From aae788ae4610ae5a5b9521d9606b5d4fd0585847 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Thu, 5 Sep 2024 07:43:52 +0200 Subject: [PATCH] DashboardScene: Add browser history step when changing time range (#92950) DashboardScene: Upgrade scene and turn on url history --- package.json | 2 +- .../dashboard-scene/pages/DashboardScenePage.tsx | 2 +- .../app/features/dashboard-scene/solo/useSoloPanel.ts | 5 +++-- .../utils/dashboardSessionState.test.ts | 5 +++-- public/app/features/trails/DataTrail.tsx | 4 ++-- public/app/features/trails/DataTrailsHistory.tsx | 3 +-- .../app/features/trails/TrailStore/TrailStore.test.ts | 6 +++--- public/app/features/trails/TrailStore/TrailStore.ts | 8 ++++---- public/app/features/trails/utils.ts | 4 ++-- yarn.lock | 10 +++++----- 10 files changed, 25 insertions(+), 24 deletions(-) diff --git a/package.json b/package.json index aacc8efaa7a..281fd5bc892 100644 --- a/package.json +++ b/package.json @@ -268,7 +268,7 @@ "@grafana/prometheus": "workspace:*", "@grafana/runtime": "workspace:*", "@grafana/saga-icons": "workspace:*", - "@grafana/scenes": "5.12.0", + "@grafana/scenes": "^5.13.0", "@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 d64bf5975ce..2a368ffd91f 100644 --- a/public/app/features/dashboard-scene/pages/DashboardScenePage.tsx +++ b/public/app/features/dashboard-scene/pages/DashboardScenePage.tsx @@ -86,7 +86,7 @@ export function DashboardScenePage({ match, route, queryParams, history }: Props } return ( - + diff --git a/public/app/features/dashboard-scene/solo/useSoloPanel.ts b/public/app/features/dashboard-scene/solo/useSoloPanel.ts index 1ae44ef76de..28d8abf22d9 100644 --- a/public/app/features/dashboard-scene/solo/useSoloPanel.ts +++ b/public/app/features/dashboard-scene/solo/useSoloPanel.ts @@ -1,6 +1,6 @@ import { useState, useEffect } from 'react'; -import { VizPanel, SceneObject, SceneGridRow, getUrlSyncManager } from '@grafana/scenes'; +import { VizPanel, SceneObject, SceneGridRow, UrlSyncManager } from '@grafana/scenes'; import { DashboardGridItem } from '../scene/DashboardGridItem'; import { DashboardScene } from '../scene/DashboardScene'; @@ -13,7 +13,8 @@ export function useSoloPanel(dashboard: DashboardScene, panelId: string): [VizPa const [error, setError] = useState(); useEffect(() => { - getUrlSyncManager().initSync(dashboard); + const urlSyncManager = new UrlSyncManager(); + urlSyncManager.initSync(dashboard); const cleanUp = dashboard.activate(); diff --git a/public/app/features/dashboard-scene/utils/dashboardSessionState.test.ts b/public/app/features/dashboard-scene/utils/dashboardSessionState.test.ts index 2d1ec2cccbe..80b1716e7e6 100644 --- a/public/app/features/dashboard-scene/utils/dashboardSessionState.test.ts +++ b/public/app/features/dashboard-scene/utils/dashboardSessionState.test.ts @@ -1,5 +1,5 @@ import { config, locationService } from '@grafana/runtime'; -import { CustomVariable, getUrlSyncManager } from '@grafana/scenes'; +import { CustomVariable, UrlSyncManager } from '@grafana/scenes'; import { DashboardDataDTO } from 'app/types'; import { transformSaveModelToScene } from '../serialization/transformSaveModelToScene'; @@ -51,7 +51,8 @@ describe('dashboardSessionState', () => { const variable = scene.state.$variables!.getByName('customVar') as CustomVariable; const timeRange = scene.state.$timeRange; - getUrlSyncManager().initSync(scene); + const urlSyncManager = new UrlSyncManager(); + urlSyncManager.initSync(scene); expect(variable!.state!.value).toEqual(['b']); expect(variable!.state!.text).toEqual(['b']); diff --git a/public/app/features/trails/DataTrail.tsx b/public/app/features/trails/DataTrail.tsx index 7a384684d20..54194dcea59 100644 --- a/public/app/features/trails/DataTrail.tsx +++ b/public/app/features/trails/DataTrail.tsx @@ -5,7 +5,6 @@ import { config, locationService, useChromeHeaderHeight } from '@grafana/runtime import { AdHocFiltersVariable, DataSourceVariable, - getUrlSyncManager, SceneComponentProps, SceneControlsSpacer, sceneGraph, @@ -20,6 +19,7 @@ import { sceneUtils, SceneVariable, SceneVariableSet, + UrlSyncManager, VariableDependencyConfig, VariableValueSelectors, } from '@grafana/scenes'; @@ -160,7 +160,7 @@ export class DataTrail extends SceneObjectBase { }) ); - const urlState = getUrlSyncManager().getUrlState(this); + const urlState = new UrlSyncManager().getUrlState(this); const fullUrl = urlUtil.renderUrl(locationService.getLocation().pathname, urlState); locationService.replace(fullUrl); } diff --git a/public/app/features/trails/DataTrailsHistory.tsx b/public/app/features/trails/DataTrailsHistory.tsx index 5feb4e337a4..322cbca0b55 100644 --- a/public/app/features/trails/DataTrailsHistory.tsx +++ b/public/app/features/trails/DataTrailsHistory.tsx @@ -4,7 +4,6 @@ import { useMemo } from 'react'; import { getTimeZoneInfo, GrafanaTheme2, InternalTimeZones, TIME_FORMAT } from '@grafana/data'; import { convertRawToRange } from '@grafana/data/src/datetime/rangeutil'; import { - getUrlSyncManager, SceneComponentProps, SceneObjectBase, SceneObjectState, @@ -110,7 +109,7 @@ export class DataTrailHistory extends SceneObjectBase { trail.subscribeToEvent(SceneVariableValueChangedEvent, (evt) => { if (evt.payload.state.name === VAR_FILTERS) { const filtersApplied = this.state.filtersApplied; - const urlState = getUrlSyncManager().getUrlState(trail); + const urlState = sceneUtils.getUrlState(trail); this.addTrailStep(trail, 'filters', parseFilterTooltip(urlState, filtersApplied)); this.setState({ filtersApplied }); } diff --git a/public/app/features/trails/TrailStore/TrailStore.test.ts b/public/app/features/trails/TrailStore/TrailStore.test.ts index d742f81cf9c..0d011d60afb 100644 --- a/public/app/features/trails/TrailStore/TrailStore.test.ts +++ b/public/app/features/trails/TrailStore/TrailStore.test.ts @@ -1,5 +1,5 @@ import { locationService, setDataSourceSrv } from '@grafana/runtime'; -import { AdHocFiltersVariable, getUrlSyncManager, sceneGraph } from '@grafana/scenes'; +import { AdHocFiltersVariable, sceneGraph, sceneUtils } from '@grafana/scenes'; import { DataSourceType } from 'app/features/alerting/unified/utils/datasource'; import { MockDataSourceSrv, mockDataSource } from '../../alerting/unified/mocks'; @@ -303,7 +303,7 @@ describe('TrailStore', () => { getTrailStore().load(); const store = getTrailStore(); trail = store.recent[0].resolve(); - const urlState = getUrlSyncManager().getUrlState(trail); + const urlState = sceneUtils.getUrlState(trail); locationService.partial(urlState); trail.activate(); trail.state.history.activate(); @@ -356,7 +356,7 @@ describe('TrailStore', () => { getTrailStore().load(); const store = getTrailStore(); trail = store.recent[0].resolve(); - const urlState = getUrlSyncManager().getUrlState(trail); + const urlState = sceneUtils.getUrlState(trail); locationService.partial(urlState); trail.activate(); diff --git a/public/app/features/trails/TrailStore/TrailStore.ts b/public/app/features/trails/TrailStore/TrailStore.ts index 253450043db..a0373bab200 100644 --- a/public/app/features/trails/TrailStore/TrailStore.ts +++ b/public/app/features/trails/TrailStore/TrailStore.ts @@ -1,7 +1,7 @@ import { debounce, isEqual } from 'lodash'; import { urlUtil } from '@grafana/data'; -import { getUrlSyncManager, SceneObject, SceneObjectRef, SceneObjectUrlValues, sceneUtils } from '@grafana/scenes'; +import { SceneObject, SceneObjectRef, SceneObjectUrlValues, sceneUtils } from '@grafana/scenes'; import { dispatch } from 'app/store/store'; import { notifyApp } from '../../../core/reducers/appNotification'; @@ -120,7 +120,7 @@ export class TrailStore { const history = trail.state.history.state.steps.map((step) => { const stepTrail = new DataTrail(sceneUtils.cloneSceneObjectState(step.trailState)); return { - urlValues: getUrlSyncManager().getUrlState(stepTrail), + urlValues: sceneUtils.getUrlState(stepTrail), type: step.type, description: step.description, parentIndex: step.parentIndex, @@ -203,7 +203,7 @@ export class TrailStore { } addBookmark(trail: DataTrail) { - const urlState = getUrlSyncManager().getUrlState(trail); + const urlState = sceneUtils.getUrlState(trail); const bookmarkState: DataTrailBookmark = { urlValues: urlState, @@ -243,7 +243,7 @@ export class TrailStore { } function getUrlStateForComparison(trail: DataTrail) { - const urlState = getUrlSyncManager().getUrlState(trail); + const urlState = sceneUtils.getUrlState(trail); // Make a few corrections correctUrlStateForComparison(urlState); diff --git a/public/app/features/trails/utils.ts b/public/app/features/trails/utils.ts index a205ae95fec..c4207e82084 100644 --- a/public/app/features/trails/utils.ts +++ b/public/app/features/trails/utils.ts @@ -2,12 +2,12 @@ import { urlUtil } from '@grafana/data'; import { config, getDataSourceSrv } from '@grafana/runtime'; import { AdHocFiltersVariable, - getUrlSyncManager, sceneGraph, SceneObject, SceneObjectState, SceneObjectUrlValues, SceneTimeRange, + sceneUtils, } from '@grafana/scenes'; import { getDatasourceSrv } from '../plugins/datasource_srv'; @@ -35,7 +35,7 @@ export function newMetricsTrail(initialDS?: string): DataTrail { } export function getUrlForTrail(trail: DataTrail) { - const params = getUrlSyncManager().getUrlState(trail); + const params = sceneUtils.getUrlState(trail); return getUrlForValues(params); } diff --git a/yarn.lock b/yarn.lock index d9a0e946547..bbe010e1dfd 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3932,9 +3932,9 @@ __metadata: languageName: unknown linkType: soft -"@grafana/scenes@npm:5.12.0": - version: 5.12.0 - resolution: "@grafana/scenes@npm:5.12.0" +"@grafana/scenes@npm:^5.13.0": + version: 5.13.0 + resolution: "@grafana/scenes@npm:5.13.0" dependencies: "@floating-ui/react": "npm:0.26.16" "@grafana/e2e-selectors": "npm:^11.0.0" @@ -3951,7 +3951,7 @@ __metadata: "@grafana/ui": ">=10.4" react: ^18.0.0 react-dom: ^18.0.0 - checksum: 10/17e1e1b2928c06ad9c898e1988ece2a2113ca3177f510036b42eb4032d6582e783ec28f1f3110dc67acda4ec56d2747ae23c2d57593bc2dac0ff60b2fffeda61 + checksum: 10/d22cbbc146b26e4d3e9b1f2b873d44e771e7c87b4a211cc61701cbba5460eb0a5f49ba982c4dfff7c86729487712e94340d6cc5b0d6a19483549205dfea1ebe6 languageName: node linkType: hard @@ -18534,7 +18534,7 @@ __metadata: "@grafana/prometheus": "workspace:*" "@grafana/runtime": "workspace:*" "@grafana/saga-icons": "workspace:*" - "@grafana/scenes": "npm:5.12.0" + "@grafana/scenes": "npm:^5.13.0" "@grafana/schema": "workspace:*" "@grafana/sql": "workspace:*" "@grafana/tsconfig": "npm:^2.0.0"