diff --git a/public/app/features/dashboard-scene/inspect/InspectJsonTab.tsx b/public/app/features/dashboard-scene/inspect/InspectJsonTab.tsx index 74725d1d6c5..8710778da53 100644 --- a/public/app/features/dashboard-scene/inspect/InspectJsonTab.tsx +++ b/public/app/features/dashboard-scene/inspect/InspectJsonTab.tsx @@ -17,6 +17,7 @@ import { sceneUtils, VizPanel, } from '@grafana/scenes'; +import { LibraryPanel } from '@grafana/schema/'; import { Button, CodeEditor, Field, Select, useStyles2 } from '@grafana/ui'; import { t } from 'app/core/internationalization'; import { getPanelDataFrames } from 'app/features/dashboard/components/HelpWizard/utils'; @@ -257,17 +258,26 @@ function libraryPanelChildToLegacyRepresentation(panel: VizPanel<{}, {}>) { } const gridItem = panel.parent.parent; - const libraryPanelObj = gridItemToPanel(gridItem); - const panelObj = vizPanelToPanel(panel); - - panelObj.gridPos = { + const gridPos = { x: gridItem.state.x || 0, y: gridItem.state.y || 0, h: gridItem.state.height || 0, w: gridItem.state.width || 0, }; + const libraryPanelObj = vizPanelToLibraryPanel(panel); + const panelObj = vizPanelToPanel(panel, gridPos, false, gridItem); - return { ...libraryPanelObj, ...panelObj }; + return { libraryPanel: { ...libraryPanelObj }, ...panelObj }; +} + +function vizPanelToLibraryPanel(panel: VizPanel): LibraryPanel { + if (!(panel.parent instanceof LibraryVizPanel)) { + throw new Error('Panel not a child of LibraryVizPanel'); + } + if (!panel.parent.state._loadedPanel) { + throw new Error('Library panel not loaded'); + } + return panel.parent.state._loadedPanel; } function hasGridPosChanged(a: SceneGridItemStateLike, b: SceneGridItemStateLike) { diff --git a/public/app/features/dashboard-scene/scene/DashboardSceneUrlSync.ts b/public/app/features/dashboard-scene/scene/DashboardSceneUrlSync.ts index f818fd27870..fb02736233e 100644 --- a/public/app/features/dashboard-scene/scene/DashboardSceneUrlSync.ts +++ b/public/app/features/dashboard-scene/scene/DashboardSceneUrlSync.ts @@ -66,6 +66,20 @@ export class DashboardSceneUrlSync implements SceneObjectUrlSyncHandler { return; } + if (isLibraryPanelChild(panel)) { + this._handleLibraryPanel(panel, (p) => { + if (p.state.key === undefined) { + // Inspect drawer require a panel key to be set + throw new Error('library panel key is undefined'); + } + const drawer = new PanelInspectDrawer({ + $behaviors: [new ResolveInspectPanelByKey({ panelKey: p.state.key })], + }); + this._scene.setState({ overlay: drawer, inspectPanelKey: p.state.key }); + }); + return; + } + update.inspectPanelKey = values.inspect; update.overlay = new PanelInspectDrawer({ $behaviors: [new ResolveInspectPanelByKey({ panelKey: values.inspect })], diff --git a/public/app/features/dashboard-scene/scene/LibraryVizPanel.tsx b/public/app/features/dashboard-scene/scene/LibraryVizPanel.tsx index b5ab559f343..b7692f08a90 100644 --- a/public/app/features/dashboard-scene/scene/LibraryVizPanel.tsx +++ b/public/app/features/dashboard-scene/scene/LibraryVizPanel.tsx @@ -10,6 +10,7 @@ import { VizPanelMenu, VizPanelState, } from '@grafana/scenes'; +import { LibraryPanel } from '@grafana/schema'; import { PanelModel } from 'app/features/dashboard/state'; import { getLibraryPanel } from 'app/features/library-panels/state/api'; @@ -28,7 +29,7 @@ interface LibraryVizPanelState extends SceneObjectState { panel?: VizPanel; isLoaded?: boolean; panelKey: string; - _loadedVersion?: number; + _loadedPanel?: LibraryPanel; } export class LibraryVizPanel extends SceneObjectBase { @@ -56,7 +57,7 @@ export class LibraryVizPanel extends SceneObjectBase { try { const libPanel = await getLibraryPanel(this.state.uid, true); - if (this.state._loadedVersion === libPanel.version) { + if (this.state._loadedPanel?.version === libPanel.version) { return; } @@ -107,7 +108,7 @@ export class LibraryVizPanel extends SceneObjectBase { }); } - this.setState({ panel, _loadedVersion: libPanel.version, isLoaded: true }); + this.setState({ panel, _loadedPanel: libPanel, isLoaded: true }); } catch (err) { vizPanel.setState({ _pluginLoadError: `Unable to load library panel: ${this.state.uid}`, diff --git a/public/app/features/library-panels/state/api.ts b/public/app/features/library-panels/state/api.ts index 27fca15ef04..1b3b77a027e 100644 --- a/public/app/features/library-panels/state/api.ts +++ b/public/app/features/library-panels/state/api.ts @@ -65,6 +65,12 @@ export async function getLibraryPanel(uid: string, isHandled = false): Promise + delete model.gridPos; + delete model.id; + delete model.libraryPanel; + dash.destroy(); // kill event listeners return { ...result,