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
This commit is contained in:
Dominik Prokop
+2
-2
@@ -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:*",
|
||||
|
||||
@@ -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();
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -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)
|
||||
|
||||
@@ -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:*"
|
||||
|
||||
Reference in New Issue
Block a user