feat: add auto-refresh toggle for dashboard metrics#301
Conversation
Signed-off-by: A69SHUBHAM <spacekrai0@gmail.com>
|
[APPROVALNOTIFIER] This PR is NOT APPROVED This pull-request has been approved by: The full list of commands accepted by this bot can be found here. DetailsNeeds approval from an approver in each of these files:Approvers can indicate their approval by writing |
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request introduces an auto-refresh feature to the dashboard, allowing users to toggle automatic data refetching every 30 seconds for the summary, job status, and queue metrics. The feedback suggests a user experience improvement: instead of spinning the refresh icon continuously when auto-refresh is enabled, the icon should only animate when a background fetch is actively in progress. This can be achieved by extracting and combining the isFetching state from the tRPC queries.
Important
The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.
| const { data: summary, isLoading: summaryLoading } = | ||
| trpc.dashboardRouter.getSummary.useQuery(undefined, { | ||
| refetchInterval: autoRefresh ? REFRESH_INTERVAL_MS : false, | ||
| }); | ||
| const { data: jobStatusMetrics, isLoading: jobStatusLoading } = | ||
| trpc.dashboardRouter.getJobStatusMetrics.useQuery(undefined, { | ||
| refetchInterval: autoRefresh ? REFRESH_INTERVAL_MS : false, | ||
| }); | ||
| const { data: queueMetrics, isLoading: queueMetricsLoading } = | ||
| trpc.dashboardRouter.getQueueMetrics.useQuery(undefined, { | ||
| refetchInterval: autoRefresh ? REFRESH_INTERVAL_MS : false, | ||
| }); | ||
|
|
||
| const isLoading = summaryLoading || jobStatusLoading || queueMetricsLoading; |
There was a problem hiding this comment.
To improve the user experience, we should only animate the refresh icon when a background fetch is actively in progress, rather than spinning continuously while auto-refresh is enabled. To do this, we can extract the isFetching state from each of the tRPC queries and combine them.
| const { data: summary, isLoading: summaryLoading } = | |
| trpc.dashboardRouter.getSummary.useQuery(undefined, { | |
| refetchInterval: autoRefresh ? REFRESH_INTERVAL_MS : false, | |
| }); | |
| const { data: jobStatusMetrics, isLoading: jobStatusLoading } = | |
| trpc.dashboardRouter.getJobStatusMetrics.useQuery(undefined, { | |
| refetchInterval: autoRefresh ? REFRESH_INTERVAL_MS : false, | |
| }); | |
| const { data: queueMetrics, isLoading: queueMetricsLoading } = | |
| trpc.dashboardRouter.getQueueMetrics.useQuery(undefined, { | |
| refetchInterval: autoRefresh ? REFRESH_INTERVAL_MS : false, | |
| }); | |
| const isLoading = summaryLoading || jobStatusLoading || queueMetricsLoading; | |
| const { data: summary, isLoading: summaryLoading, isFetching: summaryFetching } = | |
| trpc.dashboardRouter.getSummary.useQuery(undefined, { | |
| refetchInterval: autoRefresh ? REFRESH_INTERVAL_MS : false, | |
| }); | |
| const { data: jobStatusMetrics, isLoading: jobStatusLoading, isFetching: jobStatusFetching } = | |
| trpc.dashboardRouter.getJobStatusMetrics.useQuery(undefined, { | |
| refetchInterval: autoRefresh ? REFRESH_INTERVAL_MS : false, | |
| }); | |
| const { data: queueMetrics, isLoading: queueMetricsLoading, isFetching: queueMetricsFetching } = | |
| trpc.dashboardRouter.getQueueMetrics.useQuery(undefined, { | |
| refetchInterval: autoRefresh ? REFRESH_INTERVAL_MS : false, | |
| }); | |
| const isLoading = summaryLoading || jobStatusLoading || queueMetricsLoading; | |
| const isFetching = summaryFetching || jobStatusFetching || queueMetricsFetching; |
| <RefreshCw | ||
| className={`h-4 w-4 transition-transform ${ | ||
| autoRefresh ? "animate-spin" : "" | ||
| }`} | ||
| aria-hidden="true" | ||
| /> |
There was a problem hiding this comment.
Use the combined isFetching state to control the spin animation. This ensures the icon only spins when data is actively being loaded in the background, providing a much cleaner and less distracting user experience.
| <RefreshCw | |
| className={`h-4 w-4 transition-transform ${ | |
| autoRefresh ? "animate-spin" : "" | |
| }`} | |
| aria-hidden="true" | |
| /> | |
| <RefreshCw | |
| className={`h-4 w-4 transition-transform ${ | |
| isFetching ? "animate-spin" : "" | |
| }`} | |
| aria-hidden="true" | |
| /> |
2 participants
Summary
This PR adds an auto-refresh toggle for dashboard metrics.
Users can now enable or disable automatic refreshing of dashboard data without manually reloading the page.
Changes
Verification
Motivation
This improves the observability experience by allowing users to monitor dashboard metrics in near real-time while maintaining control over refresh behavior.
Closes #300