IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Simplify lib panel creation in dashboard (#88681)

Browse Source 
simplify lib panel creation in dashboard
This commit is contained in:
Victor Marin 2024-06-06 11:37:44 +03:00 committed by GitHub
parent 4f2a9a47f3
commit c79ea234db
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 25 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
public/app/features/dashboard-scene/scene/DashboardScene.test.tsx
View File

@ -890,13 +890,15 @@ describe('DashboardScene', () => {
}); });
it('Should create a library panel', () => { it('Should create a library panel', () => {
const gridItem = new DashboardGridItem({ const vizPanel = new VizPanel({
key: 'griditem-1',
body: new VizPanel({
title: 'Panel A', title: 'Panel A',
key: 'panel-1', key: 'panel-1',
pluginId: 'table', pluginId: 'table',
}), });
const gridItem = new DashboardGridItem({
key: 'griditem-1',
body: vizPanel,
}); });
const scene = buildTestScene({ const scene = buildTestScene({
@ -910,7 +912,7 @@ describe('DashboardScene', () => {
name: 'name', name: 'name',
}; };
scene.createLibraryPanel(gridItem, libPanel as LibraryPanel); scene.createLibraryPanel(vizPanel, libPanel as LibraryPanel);
const layout = scene.state.body as SceneGridLayout; const layout = scene.state.body as SceneGridLayout;
const newGridItem = layout.state.children[0] as DashboardGridItem; const newGridItem = layout.state.children[0] as DashboardGridItem;
@ -922,13 +924,15 @@ describe('DashboardScene', () => {
}); });
it('Should create a library panel under a row', () => { it('Should create a library panel under a row', () => {
const gridItem = new DashboardGridItem({ const vizPanel = new VizPanel({
key: 'griditem-1',
body: new VizPanel({
title: 'Panel A', title: 'Panel A',
key: 'panel-1', key: 'panel-1',
pluginId: 'table', pluginId: 'table',
}), });
const gridItem = new DashboardGridItem({
key: 'griditem-1',
body: vizPanel,
}); });
const scene = buildTestScene({ const scene = buildTestScene({
@ -947,7 +951,7 @@ describe('DashboardScene', () => {
name: 'name', name: 'name',
}; };
scene.createLibraryPanel(gridItem, libPanel as LibraryPanel); scene.createLibraryPanel(vizPanel, libPanel as LibraryPanel);
const layout = scene.state.body as SceneGridLayout; const layout = scene.state.body as SceneGridLayout;
const newGridItem = (layout.state.children[0] as SceneGridRow).state.children[0] as DashboardGridItem; const newGridItem = (layout.state.children[0] as SceneGridRow).state.children[0] as DashboardGridItem;

34
public/app/features/dashboard-scene/scene/DashboardScene.tsx
View File

@ -511,14 +511,14 @@ export class DashboardScene extends SceneObjectBase<DashboardSceneState> {
}); });
} }
public createLibraryPanel(gridItemToReplace: DashboardGridItem, libPanel: LibraryPanel) { public createLibraryPanel(panelToReplace: VizPanel, libPanel: LibraryPanel) {
const layout = this.state.body; const layout = this.state.body;
if (!(layout instanceof SceneGridLayout)) { if (!(layout instanceof SceneGridLayout)) {
throw new Error('Trying to add a panel in a layout that is not SceneGridLayout'); throw new Error('Trying to add a panel in a layout that is not SceneGridLayout');
} }
const panelKey = gridItemToReplace?.state.body.state.key; const panelKey = panelToReplace.state.key;
const body = new LibraryVizPanel({ const body = new LibraryVizPanel({
title: libPanel.model?.title ?? 'Panel', title: libPanel.model?.title ?? 'Panel',
@ -527,35 +527,13 @@ export class DashboardScene extends SceneObjectBase<DashboardSceneState> {
panelKey: panelKey ?? getVizPanelKeyForPanelId(dashboardSceneGraph.getNextPanelId(this)), panelKey: panelKey ?? getVizPanelKeyForPanelId(dashboardSceneGraph.getNextPanelId(this)),
}); });
const newGridItem = gridItemToReplace.clone({ body }); const gridItem = panelToReplace.parent;
if (!(newGridItem instanceof DashboardGridItem)) { if (!(gridItem instanceof DashboardGridItem)) {
throw new Error('Could not build library viz panel griditem'); throw new Error("Trying to replace a panel that doesn't have a parent grid item");
} }
const key = gridItemToReplace?.state.key; gridItem.setState({ body });
if (gridItemToReplace.parent instanceof SceneGridRow) {
const children = gridItemToReplace.parent.state.children.map((rowChild) => {
if (rowChild.state.key === key) {
return newGridItem;
}
return rowChild;
});
gridItemToReplace.parent.setState({ children });
layout.forceRender();
} else {
// Find the grid item in the layout and replace it
const children = layout.state.children.map((child) => {
if (child.state.key === key) {
return newGridItem;
}
return child;
});
layout.setState({ children });
}
} }
public duplicatePanel(vizPanel: VizPanel) { public duplicatePanel(vizPanel: VizPanel) {

5
public/app/features/dashboard-scene/sharing/ShareLibraryPanelTab.tsx
View File

@ -32,7 +32,8 @@ function ShareLibraryPanelTabRenderer({ model }: SceneComponentProps<ShareLibrar
return null; return null;
} }
const parent = panelRef.resolve().parent; const panel = panelRef.resolve();
const parent = panel.parent;
if (parent instanceof DashboardGridItem) { if (parent instanceof DashboardGridItem) {
const dashboardScene = dashboardRef.resolve(); const dashboardScene = dashboardRef.resolve();
@ -50,7 +51,7 @@ function ShareLibraryPanelTabRenderer({ model }: SceneComponentProps<ShareLibrar
onDismiss={() => { onDismiss={() => {
modalRef?.resolve().onDismiss(); modalRef?.resolve().onDismiss();
}} }}
onCreateLibraryPanel={(libPanel: LibraryPanel) => dashboardScene.createLibraryPanel(parent, libPanel)} onCreateLibraryPanel={(libPanel: LibraryPanel) => dashboardScene.createLibraryPanel(panel, libPanel)}
/> />
); );
} }