AdguardTeam/AdGuardHome

Update stats on Dashboard in real-time

Open

#1739 opened on May 27, 2020

View on GitHub
 (7 comments) (23 reactions) (0 assignees)Go (34,000 stars) (2,333 forks)batch import
P3: MediumUIfeature requesthelp wanted

Description

(@ainar-g: updating the top post with more details about the UI; original content is below the horizontal ruler.)

In order to make stats monitoring easier, we want to add an autoupdate feature.

Proposed change: Add a Refresh automatically button/checkbox right next to the already-present Refresh statistics button. When active/checked, the front-end code starts refreshing the dashboard data every 5 seconds.

I am running the latest version Hope that the statistical data in the web page can be updated in real time or automatically and regularly

Contributor guide

Tech stack
javascriptgo
Domain
frontendbackend
Issue type
feature
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
half day
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
Basic JavaScriptFamiliarity with AdGuardHome dashboardUnderstanding of setInterval
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
70
Research direction
Start by examining the frontend code in the repository, particularly the dashboard view where statistics are displayed. Look for the existing 'Refresh statistics' button to understand its implementation. Then, consider adding a checkbox or toggle button that triggers a setInterval to call the same refresh function every 5 seconds. Ensure to handle cleanup (e.g., clearing interval when component unmounts or dashboard is closed). Review the backend API to confirm it can handle frequent requests and consider adding throttling if needed. Examine existing comments and discussions in the issue for any additional requirements or concerns.