From 0563b510985a4bab8f204e3e0dd7cdd4e9f860be Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Wed, 30 Aug 2023 10:09:47 +0200 Subject: [PATCH] DashboardScene: Use numeric panel ids in url (#74005) * DashboardScene: Use numeric panel ids in url * Rename fix * Fixed tests --- .../pages/DashboardScenePage.test.tsx | 2 +- .../scene/DashboardScene.test.tsx | 10 ++++----- .../dashboard-scene/scene/DashboardScene.tsx | 17 +++++++------- .../scene/DashboardSceneRenderer.tsx | 4 ++-- .../scene/DashboardSceneUrlSync.ts | 22 +++++++++---------- .../scene/NavToolbarActions.tsx | 4 ++-- .../scene/PanelMenuBehavior.tsx | 6 +++-- .../transformSceneToSaveModel.ts | 4 ++-- .../dashboard-scene/utils/findVizPanel.ts | 14 ------------ .../features/dashboard-scene/utils/utils.ts | 22 ++++++++++++++++--- 10 files changed, 54 insertions(+), 51 deletions(-) delete mode 100644 public/app/features/dashboard-scene/utils/findVizPanel.ts diff --git a/public/app/features/dashboard-scene/pages/DashboardScenePage.test.tsx b/public/app/features/dashboard-scene/pages/DashboardScenePage.test.tsx index f619fa5ccd4..d769273a84e 100644 --- a/public/app/features/dashboard-scene/pages/DashboardScenePage.test.tsx +++ b/public/app/features/dashboard-scene/pages/DashboardScenePage.test.tsx @@ -133,7 +133,7 @@ describe('DashboardScenePage', () => { expect(await screen.findByTitle('Panel A')).toBeInTheDocument(); - act(() => locationService.partial({ viewPanel: 'panel-2' })); + act(() => locationService.partial({ viewPanel: '2' })); expect(screen.queryByTitle('Panel A')).not.toBeInTheDocument(); expect(await screen.findByTitle('Panel B')).toBeInTheDocument(); diff --git a/public/app/features/dashboard-scene/scene/DashboardScene.test.tsx b/public/app/features/dashboard-scene/scene/DashboardScene.test.tsx index 07b488486ce..450799e0b79 100644 --- a/public/app/features/dashboard-scene/scene/DashboardScene.test.tsx +++ b/public/app/features/dashboard-scene/scene/DashboardScene.test.tsx @@ -6,20 +6,20 @@ describe('DashboardScene', () => { describe('Given a standard scene', () => { it('Should set inspectPanelKey when url has inspect key', () => { const scene = buildTestScene(); - scene.urlSync?.updateFromUrl({ inspect: 'panel-2' }); - expect(scene.state.inspectPanelKey).toBe('panel-2'); + scene.urlSync?.updateFromUrl({ inspect: '2' }); + expect(scene.state.inspectPanelId).toBe('2'); }); it('Should handle inspect key that is not found', () => { const scene = buildTestScene(); scene.urlSync?.updateFromUrl({ inspect: '12321' }); - expect(scene.state.inspectPanelKey).toBe(undefined); + expect(scene.state.inspectPanelId).toBe(undefined); }); it('Should set viewPanelKey when url has viewPanel', () => { const scene = buildTestScene(); - scene.urlSync?.updateFromUrl({ viewPanel: 'panel-2' }); - expect(scene.state.viewPanelKey).toBe('panel-2'); + scene.urlSync?.updateFromUrl({ viewPanel: '2' }); + expect(scene.state.viewPanelId).toBe('2'); }); }); diff --git a/public/app/features/dashboard-scene/scene/DashboardScene.tsx b/public/app/features/dashboard-scene/scene/DashboardScene.tsx index 0fd7f0276da..c4b08c197f4 100644 --- a/public/app/features/dashboard-scene/scene/DashboardScene.tsx +++ b/public/app/features/dashboard-scene/scene/DashboardScene.tsx @@ -16,8 +16,7 @@ import { import { DashboardSceneRenderer } from '../scene/DashboardSceneRenderer'; import { SaveDashboardDrawer } from '../serialization/SaveDashboardDrawer'; -import { findVizPanel } from '../utils/findVizPanel'; -import { forceRenderChildren } from '../utils/utils'; +import { findVizPanelById, forceRenderChildren } from '../utils/utils'; import { DashboardSceneUrlSync } from './DashboardSceneUrlSync'; @@ -29,10 +28,10 @@ export interface DashboardSceneState extends SceneObjectState { controls?: SceneObject[]; isEditing?: boolean; isDirty?: boolean; - /** Scene object key for object to inspect */ - inspectPanelKey?: string; - /** Scene object key for object to view in fullscreen */ - viewPanelKey?: string; + /** Panel to inspect */ + inspectPanelId?: string; + /** Panel to view in full screen */ + viewPanelId?: string; /** Scene object that handles the current drawer */ drawer?: SceneObject; } @@ -129,7 +128,7 @@ export class DashboardScene extends SceneObjectBase { url: locationUtil.getUrlForPartial(location, { viewPanel: null, inspect: null }), }; - if (this.state.viewPanelKey) { + if (this.state.viewPanelId) { pageNav = { text: 'View panel', parentItem: pageNav, @@ -142,8 +141,8 @@ export class DashboardScene extends SceneObjectBase { /** * Returns the body (layout) or the full view panel */ - public getBodyToRender(viewPanelKey?: string): SceneObject { - const viewPanel = findVizPanel(this, viewPanelKey); + public getBodyToRender(viewPanelId?: string): SceneObject { + const viewPanel = findVizPanelById(this, viewPanelId); return viewPanel ?? this.state.body; } diff --git a/public/app/features/dashboard-scene/scene/DashboardSceneRenderer.tsx b/public/app/features/dashboard-scene/scene/DashboardSceneRenderer.tsx index 5e81c05c243..0940fb1ee85 100644 --- a/public/app/features/dashboard-scene/scene/DashboardSceneRenderer.tsx +++ b/public/app/features/dashboard-scene/scene/DashboardSceneRenderer.tsx @@ -11,11 +11,11 @@ import { DashboardScene } from './DashboardScene'; import { NavToolbarActions } from './NavToolbarActions'; export function DashboardSceneRenderer({ model }: SceneComponentProps) { - const { controls, viewPanelKey, drawer } = model.useState(); + const { controls, viewPanelId, drawer } = model.useState(); const styles = useStyles2(getStyles); const location = useLocation(); const pageNav = model.getPageNav(location); - const bodyToRender = model.getBodyToRender(viewPanelKey); + const bodyToRender = model.getBodyToRender(viewPanelId); return ( diff --git a/public/app/features/dashboard-scene/scene/DashboardSceneUrlSync.ts b/public/app/features/dashboard-scene/scene/DashboardSceneUrlSync.ts index 36835c80ad7..0dc7f3c3054 100644 --- a/public/app/features/dashboard-scene/scene/DashboardSceneUrlSync.ts +++ b/public/app/features/dashboard-scene/scene/DashboardSceneUrlSync.ts @@ -4,7 +4,7 @@ import { SceneObjectUrlSyncHandler, SceneObjectUrlValues } from '@grafana/scenes import appEvents from 'app/core/app_events'; import { PanelInspectDrawer } from '../inspect/PanelInspectDrawer'; -import { findVizPanel } from '../utils/findVizPanel'; +import { findVizPanelById } from '../utils/utils'; import { DashboardScene, DashboardSceneState } from './DashboardScene'; @@ -17,41 +17,41 @@ export class DashboardSceneUrlSync implements SceneObjectUrlSyncHandler { getUrlState(): SceneObjectUrlValues { const state = this._scene.state; - return { inspect: state.inspectPanelKey, viewPanel: state.viewPanelKey }; + return { inspect: state.inspectPanelId, viewPanel: state.viewPanelId }; } updateFromUrl(values: SceneObjectUrlValues): void { - const { inspectPanelKey, viewPanelKey } = this._scene.state; + const { inspectPanelId, viewPanelId } = this._scene.state; const update: Partial = {}; // Handle inspect object state if (typeof values.inspect === 'string') { - const panel = findVizPanel(this._scene, values.inspect); + const panel = findVizPanelById(this._scene, values.inspect); if (!panel) { appEvents.emit(AppEvents.alertError, ['Panel not found']); locationService.partial({ inspect: null }); return; } - update.inspectPanelKey = values.inspect; + update.inspectPanelId = values.inspect; update.drawer = new PanelInspectDrawer(panel); - } else if (inspectPanelKey) { - update.inspectPanelKey = undefined; + } else if (inspectPanelId) { + update.inspectPanelId = undefined; update.drawer = undefined; } // Handle view panel state if (typeof values.viewPanel === 'string') { - const panel = findVizPanel(this._scene, values.viewPanel); + const panel = findVizPanelById(this._scene, values.viewPanel); if (!panel) { appEvents.emit(AppEvents.alertError, ['Panel not found']); locationService.partial({ viewPanel: null }); return; } - update.viewPanelKey = values.viewPanel; - } else if (viewPanelKey) { - update.viewPanelKey = undefined; + update.viewPanelId = values.viewPanel; + } else if (viewPanelId) { + update.viewPanelId = undefined; } if (Object.keys(update).length > 0) { diff --git a/public/app/features/dashboard-scene/scene/NavToolbarActions.tsx b/public/app/features/dashboard-scene/scene/NavToolbarActions.tsx index 85c3e32a480..6156fe733c2 100644 --- a/public/app/features/dashboard-scene/scene/NavToolbarActions.tsx +++ b/public/app/features/dashboard-scene/scene/NavToolbarActions.tsx @@ -13,7 +13,7 @@ interface Props { } export const NavToolbarActions = React.memo(({ dashboard }) => { - const { actions = [], isEditing, viewPanelKey, isDirty, uid } = dashboard.useState(); + const { actions = [], isEditing, viewPanelId, isDirty, uid } = dashboard.useState(); const toolbarActions = (actions ?? []).map((action) => ); if (uid) { @@ -29,7 +29,7 @@ export const NavToolbarActions = React.memo(({ dashboard }) => { toolbarActions.push(); - if (viewPanelKey) { + if (viewPanelId) { toolbarActions.push(