From 4682a288a3c9827a11caf6ff9af78c6378f44b99 Mon Sep 17 00:00:00 2001 From: Dominik Prokop Date: Mon, 11 Aug 2025 13:38:50 +0200 Subject: [PATCH] Dashboard: Add processingTime metric for easier querying and bump scenes to 6.29.7 (#109442) * Dashboard: Add processingTime calculation to profiler and upgrade scenes - Add processingTime calculation (duration - networkDuration) to dashboard profiler - Upgrade to @grafana/scenes 6.29.6 with profiler improvements - Update documentation * Bump scenes to stable * Cancel ongoing profile on dashboard scene page page unmount * Update docs * Bump latest scenes --- package.json | 4 ++-- .../pages/DashboardScenePage.tsx | 2 ++ .../dashboard/services/DashboardProfiler.ts | 1 + .../dashboard-render-performance-profiling.md | 17 +++++++++++++- yarn.lock | 22 +++++++++---------- 5 files changed, 32 insertions(+), 14 deletions(-) diff --git a/package.json b/package.json index 4946d16793d..dd9cc608ef9 100644 --- a/package.json +++ b/package.json @@ -289,8 +289,8 @@ "@grafana/plugin-ui": "0.10.9", "@grafana/prometheus": "workspace:*", "@grafana/runtime": "workspace:*", - "@grafana/scenes": "6.29.5", - "@grafana/scenes-react": "6.29.5", + "@grafana/scenes": "6.29.7", + "@grafana/scenes-react": "6.29.7", "@grafana/schema": "workspace:*", "@grafana/sql": "workspace:*", "@grafana/ui": "workspace:*", diff --git a/public/app/features/dashboard-scene/pages/DashboardScenePage.tsx b/public/app/features/dashboard-scene/pages/DashboardScenePage.tsx index ef1ec38b653..d7eb249f1c7 100644 --- a/public/app/features/dashboard-scene/pages/DashboardScenePage.tsx +++ b/public/app/features/dashboard-scene/pages/DashboardScenePage.tsx @@ -11,6 +11,7 @@ import PageLoader from 'app/core/components/PageLoader/PageLoader'; import { GrafanaRouteComponentProps } from 'app/core/navigation/types'; import { DashboardPageError } from 'app/features/dashboard/containers/DashboardPageError'; import { DashboardPageRouteParams, DashboardPageRouteSearchParams } from 'app/features/dashboard/containers/types'; +import { getDashboardSceneProfiler } from 'app/features/dashboard/services/DashboardProfiler'; import { DashboardRoutes } from 'app/types/dashboard'; import { DashboardPrompt } from '../saving/DashboardPrompt'; @@ -48,6 +49,7 @@ export function DashboardScenePage({ route, queryParams, location }: Props) { } return () => { + getDashboardSceneProfiler().cancelProfile(); preserveDashboardSceneStateInLocalStorage(locationService.getSearch(), uid); stateManager.clearState(); stateManager.resetActiveManager(); diff --git a/public/app/features/dashboard/services/DashboardProfiler.ts b/public/app/features/dashboard/services/DashboardProfiler.ts index aa4ce4d2caa..e62a8382d24 100644 --- a/public/app/features/dashboard/services/DashboardProfiler.ts +++ b/public/app/features/dashboard/services/DashboardProfiler.ts @@ -15,6 +15,7 @@ export function getDashboardInteractionCallback(uid: string, title: string) { const payload = { duration: e.duration, networkDuration: e.networkDuration, + processingTime: e.duration - e.networkDuration, startTs: e.startTs, endTs: e.endTs, totalJSHeapSize: e.totalJSHeapSize, diff --git a/public/app/features/dashboard/services/dashboard-render-performance-profiling.md b/public/app/features/dashboard/services/dashboard-render-performance-profiling.md index c31f8d0933e..465fdcc4465 100644 --- a/public/app/features/dashboard/services/dashboard-render-performance-profiling.md +++ b/public/app/features/dashboard/services/dashboard-render-performance-profiling.md @@ -63,6 +63,7 @@ The interactions mentioned above are reported to Echo service as well as sent to const payload = { duration: e.duration, networkDuration: e.networkDuration, + processingTime: e.duration - e.networkDuration, startTs: e.startTs, endTs: e.endTs, totalJSHeapSize: e.totalJSHeapSize, @@ -108,11 +109,22 @@ interface SceneInteractionProfileEvent { For each tracked interaction, the system collects: - **Dashboard Metadata**: UID, title -- **Performance Metrics**: Duration, network duration +- **Performance Metrics**: + - `duration`: Total interaction time from start to finish + - `networkDuration`: Time spent on network requests (API calls, data fetching) + - `processingTime`: Client-side processing time calculated as `duration - networkDuration` - **Memory Metrics**: JavaScript heap usage statistics - **Timing Information**: Time since boot, profile start and end timestamps - **Interaction Context**: Type of user interaction +#### Performance Metric Breakdown + +The performance metrics provide detailed insights into where time is spent during dashboard interactions: + +- **Total Duration (`duration`)**: Complete time from interaction start to completion +- **Network Time (`networkDuration`)**: Time spent waiting for server responses (data source queries, API calls) +- **Processing Time (`processingTime`)**: Time spent on client-side operations (rendering, computations, DOM updates) + ## Debugging and Development ### Enable Profiler Debug Logging @@ -176,6 +188,7 @@ The system reports the following data for each interaction: uid: string, // Dashboard UID duration: number, // Total duration networkDuration: number, // Network time + processingTime: number, // Client-side processing time (duration - networkDuration) startTs: number, // Profile start timestamp endTs: number, // Profile end timestamp totalJSHeapSize: number, // Memory metrics @@ -231,3 +244,5 @@ This fallback catches cases where visibility events might be missed and prevents - [PR #1199 - SceneRenderProfiler: add start and end timestamps to profile events](https://github.com/grafana/scenes/pull/1199) - [PR #1205 - SceneRenderProfiler: Handle tab inactivity](https://github.com/grafana/scenes/pull/1205) - [PR #1209 - SceneRenderProfiler: Only capture network requests within measurement window](https://github.com/grafana/scenes/pull/1209) +- [PR #1211 - SceneRenderProfiler: Improve profiler accuracy by adding cancellation and skipping inactive tabs](https://github.com/grafana/scenes/pull/1211) +- [PR #1212 - SceneQueryController: Fix profiler query controller registration on scene re-activation](https://github.com/grafana/scenes/pull/1212) diff --git a/yarn.lock b/yarn.lock index 1bafff658bb..9bb15efa1b9 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3584,11 +3584,11 @@ __metadata: languageName: unknown linkType: soft -"@grafana/scenes-react@npm:6.29.5": - version: 6.29.5 - resolution: "@grafana/scenes-react@npm:6.29.5" +"@grafana/scenes-react@npm:6.29.7": + version: 6.29.7 + resolution: "@grafana/scenes-react@npm:6.29.7" dependencies: - "@grafana/scenes": "npm:6.29.5" + "@grafana/scenes": "npm:6.29.7" lru-cache: "npm:^10.2.2" react-use: "npm:^17.4.0" peerDependencies: @@ -3600,13 +3600,13 @@ __metadata: react: ^18.0.0 react-dom: ^18.0.0 react-router-dom: ^6.28.0 - checksum: 10/fd09f6614b4efcca8febbafb05054f5b05d8c064e078314325ddad80028e5ff52171c7f0bf6cd92137d78f2c476ee8b97c98c433c433e97eada04c496b57a2e3 + checksum: 10/d3db42b8face33a871cc2b983b00890b4a7b9cf685b06dd02df730036f9c13f1cdbc0dcb578453a0ce29381bdceb26d2a07ae4be77a8f753677dde1560eb491f languageName: node linkType: hard -"@grafana/scenes@npm:6.29.5": - version: 6.29.5 - resolution: "@grafana/scenes@npm:6.29.5" +"@grafana/scenes@npm:6.29.7": + version: 6.29.7 + resolution: "@grafana/scenes@npm:6.29.7" dependencies: "@floating-ui/react": "npm:^0.26.16" "@leeoniya/ufuzzy": "npm:^1.0.16" @@ -3626,7 +3626,7 @@ __metadata: react: ^18.0.0 react-dom: ^18.0.0 react-router-dom: ^6.28.0 - checksum: 10/f96500bc31bc3fc06c618e498016290d8cf1c43f69733fe6d351f3ce060db9b4487bfe7f3d352384b2612ab2931754b87778015c934ac9d67649d3f840752b19 + checksum: 10/a2bbda33c78cd568d6333e033e1b587917ee4ca00d8f69e3707197d6712beba1d1b9244f05259bc4cce7416b9ec67d24eddaa1e6073695e2b4a7af1a37253174 languageName: node linkType: hard @@ -18311,8 +18311,8 @@ __metadata: "@grafana/plugin-ui": "npm:0.10.9" "@grafana/prometheus": "workspace:*" "@grafana/runtime": "workspace:*" - "@grafana/scenes": "npm:6.29.5" - "@grafana/scenes-react": "npm:6.29.5" + "@grafana/scenes": "npm:6.29.7" + "@grafana/scenes-react": "npm:6.29.7" "@grafana/schema": "workspace:*" "@grafana/sql": "workspace:*" "@grafana/test-utils": "workspace:*"