diff --git a/package.json b/package.json index ad528dbd3c7..3db5fcdd704 100644 --- a/package.json +++ b/package.json @@ -255,7 +255,7 @@ "@grafana/lezer-traceql": "0.0.11", "@grafana/monaco-logql": "^0.0.7", "@grafana/runtime": "workspace:*", - "@grafana/scenes": "1.24.6", + "@grafana/scenes": "^1.24.6", "@grafana/schema": "workspace:*", "@grafana/ui": "workspace:*", "@kusto/monaco-kusto": "^7.4.0", diff --git a/public/app/features/dashboard-scene/scene/DashboardScene.tsx b/public/app/features/dashboard-scene/scene/DashboardScene.tsx index 43679d6dfc6..a016017c91d 100644 --- a/public/app/features/dashboard-scene/scene/DashboardScene.tsx +++ b/public/app/features/dashboard-scene/scene/DashboardScene.tsx @@ -28,9 +28,10 @@ import { SaveDashboardDrawer } from '../serialization/SaveDashboardDrawer'; import { DashboardEditView } from '../settings/utils'; import { DashboardModelCompatibilityWrapper } from '../utils/DashboardModelCompatibilityWrapper'; import { getDashboardUrl } from '../utils/urlBuilders'; -import { findVizPanelByKey, forceRenderChildren, getClosestVizPanel, getPanelIdForVizPanel } from '../utils/utils'; +import { forceRenderChildren, getClosestVizPanel, getPanelIdForVizPanel } from '../utils/utils'; import { DashboardSceneUrlSync } from './DashboardSceneUrlSync'; +import { ViewPanelScene } from './ViewPanelScene'; import { setupKeyboardShortcuts } from './keyboardShortcuts'; export interface DashboardSceneState extends SceneObjectState { @@ -58,8 +59,8 @@ export interface DashboardSceneState extends SceneObjectState { meta: DashboardMeta; /** Panel to inspect */ inspectPanelKey?: string; - /** Panel to view in full screen */ - viewPanelKey?: string; + /** Panel to view in fullscreen */ + viewPanelScene?: ViewPanelScene; /** Edit view */ editview?: DashboardEditView; /** Scene object that handles the current drawer or modal */ @@ -174,7 +175,7 @@ export class DashboardScene extends SceneObjectBase { }; public getPageNav(location: H.Location, navIndex: NavIndex) { - const { meta, viewPanelKey } = this.state; + const { meta, viewPanelScene } = this.state; let pageNav: NavModelItem = { text: this.state.title, @@ -200,7 +201,7 @@ export class DashboardScene extends SceneObjectBase { } } - if (viewPanelKey) { + if (viewPanelScene) { pageNav = { text: 'View panel', parentItem: pageNav, @@ -213,9 +214,8 @@ export class DashboardScene extends SceneObjectBase { /** * Returns the body (layout) or the full view panel */ - public getBodyToRender(viewPanelKey?: string): SceneObject { - const viewPanel = findVizPanelByKey(this, viewPanelKey); - return viewPanel ?? this.state.body; + public getBodyToRender(): SceneObject { + return this.state.viewPanelScene ?? this.state.body; } private startTrackingChanges() { diff --git a/public/app/features/dashboard-scene/scene/DashboardSceneRenderer.tsx b/public/app/features/dashboard-scene/scene/DashboardSceneRenderer.tsx index 107df971fb2..08f39caa97c 100644 --- a/public/app/features/dashboard-scene/scene/DashboardSceneRenderer.tsx +++ b/public/app/features/dashboard-scene/scene/DashboardSceneRenderer.tsx @@ -13,12 +13,12 @@ import { DashboardScene } from './DashboardScene'; import { NavToolbarActions } from './NavToolbarActions'; export function DashboardSceneRenderer({ model }: SceneComponentProps) { - const { controls, viewPanelKey, overlay, editview } = model.useState(); + const { controls, overlay, editview } = model.useState(); const styles = useStyles2(getStyles); const location = useLocation(); const navIndex = useSelector((state) => state.navIndex); const pageNav = model.getPageNav(location, navIndex); - const bodyToRender = model.getBodyToRender(viewPanelKey); + const bodyToRender = model.getBodyToRender(); const navModel = getNavModel(navIndex, 'dashboards/browse'); if (editview) { diff --git a/public/app/features/dashboard-scene/scene/DashboardSceneUrlSync.test.ts b/public/app/features/dashboard-scene/scene/DashboardSceneUrlSync.test.ts index 951187e9d2e..bfdd5587c83 100644 --- a/public/app/features/dashboard-scene/scene/DashboardSceneUrlSync.test.ts +++ b/public/app/features/dashboard-scene/scene/DashboardSceneUrlSync.test.ts @@ -22,7 +22,7 @@ describe('DashboardSceneUrlSync', () => { it('Should set viewPanelKey when url has viewPanel', () => { const scene = buildTestScene(); scene.urlSync?.updateFromUrl({ viewPanel: '2' }); - expect(scene.state.viewPanelKey).toBe('2'); + expect(scene.state.viewPanelScene!.getUrlKey()).toBe('panel-2'); }); }); @@ -34,7 +34,7 @@ describe('DashboardSceneUrlSync', () => { scene.urlSync?.updateFromUrl({ viewPanel: 'panel-1-clone-1' }); - expect(scene.state.viewPanelKey).toBeUndefined(); + expect(scene.state.viewPanelScene).toBeUndefined(); // Verify no error notice was shown expect(errorNotice).toBe(0); @@ -56,7 +56,7 @@ describe('DashboardSceneUrlSync', () => { // Verify it subscribes to DashboardRepeatsProcessedEvent scene.publishEvent(new DashboardRepeatsProcessedEvent({ source: scene })); - expect(scene.state.viewPanelKey).toBe('panel-1-clone-1'); + expect(scene.state.viewPanelScene?.getUrlKey()).toBe('panel-1-clone-1'); }); }); diff --git a/public/app/features/dashboard-scene/scene/DashboardSceneUrlSync.ts b/public/app/features/dashboard-scene/scene/DashboardSceneUrlSync.ts index 68fb41c3385..95436611062 100644 --- a/public/app/features/dashboard-scene/scene/DashboardSceneUrlSync.ts +++ b/public/app/features/dashboard-scene/scene/DashboardSceneUrlSync.ts @@ -10,6 +10,7 @@ import { createDashboardEditViewFor } from '../settings/utils'; import { findVizPanelByKey } from '../utils/utils'; import { DashboardScene, DashboardSceneState } from './DashboardScene'; +import { ViewPanelScene } from './ViewPanelScene'; import { DashboardRepeatsProcessedEvent } from './types'; export class DashboardSceneUrlSync implements SceneObjectUrlSyncHandler { @@ -25,13 +26,13 @@ export class DashboardSceneUrlSync implements SceneObjectUrlSyncHandler { const state = this._scene.state; return { inspect: state.inspectPanelKey, - viewPanel: state.viewPanelKey, + viewPanel: state.viewPanelScene?.getUrlKey(), editview: state.editview?.getUrlKey(), }; } updateFromUrl(values: SceneObjectUrlValues): void { - const { inspectPanelKey, viewPanelKey, meta, isEditing } = this._scene.state; + const { inspectPanelKey, viewPanelScene, meta, isEditing } = this._scene.state; const update: Partial = {}; if (typeof values.editview === 'string' && meta.canEdit) { @@ -78,9 +79,9 @@ export class DashboardSceneUrlSync implements SceneObjectUrlSyncHandler { return; } - update.viewPanelKey = values.viewPanel; - } else if (viewPanelKey) { - update.viewPanelKey = undefined; + update.viewPanelScene = new ViewPanelScene({ panelRef: panel.getRef() }); + } else if (viewPanelScene) { + update.viewPanelScene = undefined; } if (Object.keys(update).length > 0) { @@ -94,7 +95,7 @@ export class DashboardSceneUrlSync implements SceneObjectUrlSyncHandler { const panel = findVizPanelByKey(this._scene, viewPanel); if (panel) { this._eventSub?.unsubscribe(); - this._scene.setState({ viewPanelKey: viewPanel }); + this._scene.setState({ viewPanelScene: new ViewPanelScene({ panelRef: panel.getRef() }) }); } }); } diff --git a/public/app/features/dashboard-scene/scene/NavToolbarActions.tsx b/public/app/features/dashboard-scene/scene/NavToolbarActions.tsx index 8a85b652357..832948337b8 100644 --- a/public/app/features/dashboard-scene/scene/NavToolbarActions.tsx +++ b/public/app/features/dashboard-scene/scene/NavToolbarActions.tsx @@ -16,7 +16,7 @@ interface Props { } export const NavToolbarActions = React.memo(({ dashboard }) => { - const { actions = [], isEditing, viewPanelKey, isDirty, uid, meta, editview } = dashboard.useState(); + const { actions = [], isEditing, viewPanelScene, isDirty, uid, meta, editview } = dashboard.useState(); const toolbarActions = (actions ?? []).map((action) => ); if (uid && !editview) { @@ -62,7 +62,7 @@ export const NavToolbarActions = React.memo(({ dashboard }) => { toolbarActions.push(); - if (viewPanelKey) { + if (viewPanelScene) { toolbarActions.push(