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

Scenes: Fix lib panel and lib widget placement in collapsed/uncollapsed rows (#83516)

Browse Source 
* wip

* tests + refactor ad panel func

* Add row functionality

* update row state only when there are children

* Add new row + copy paste panels

* Add library panel functionality

* tests

* PR mods

* reafctor + tests

* reafctor

* fix test

* refactor

* fix bug on cancelling lib widget

* dashboard now saves with lib panel widget

* add lib panels widget works in rows as well

* split add lib panel func to another PR

* Add library panel functionality

* Fix lib panel and lib widget placement in collapsed/uncollapsed rows

* refactor

* take panelKey into account when getting next panel id in dashboard

* fix tests
This commit is contained in:
Victor Marin 2024-02-28 18:25:22 +02:00 committed by GitHub
parent 260a87a3f6
commit 528ce96118
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 122 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

101
public/app/features/dashboard-scene/serialization/transformSaveModelToScene.test.ts
View File

@ -186,12 +186,26 @@ describe('transformSaveModelToScene', () => {
gridPos: { x: 1, y: 0, w: 12, h: 8 },
}) as Panel;
const widgetLibPanel = {
title: 'Widget Panel',
type: 'add-library-panel',
};
const libPanel = createPanelSaveModel({
title: 'Library Panel',
gridPos: { x: 0, y: 0, w: 12, h: 8 },
libraryPanel: {
uid: '123',
name: 'My Panel',
},
});
const row = createPanelSaveModel({
title: 'test',
type: 'row',
gridPos: { x: 0, y: 0, w: 12, h: 1 },
collapsed: true,
panels: [panel],
panels: [panel, widgetLibPanel, libPanel],
}) as unknown as RowPanel;
const dashboard = {
@ -210,8 +224,12 @@ describe('transformSaveModelToScene', () => {
expect(rowScene.state.title).toEqual(row.title);
expect(rowScene.state.y).toEqual(row.gridPos!.y);
expect(rowScene.state.isCollapsed).toEqual(row.collapsed);
expect(rowScene.state.children).toHaveLength(1);
expect(rowScene.state.children).toHaveLength(3);
expect(rowScene.state.children[0]).toBeInstanceOf(SceneGridItem);
expect(rowScene.state.children[1]).toBeInstanceOf(SceneGridItem);
expect(rowScene.state.children[2]).toBeInstanceOf(SceneGridItem);
expect((rowScene.state.children[1] as SceneGridItem).state.body!).toBeInstanceOf(AddLibraryPanelWidget);
expect((rowScene.state.children[2] as SceneGridItem).state.body!).toBeInstanceOf(LibraryVizPanel);
});
it('should create panels within expanded row', () => {
@ -224,6 +242,24 @@ describe('transformSaveModelToScene', () => {
y: 0,
},
});
const widgetLibPanelOutOfRow = {
title: 'Widget Panel',
type: 'add-library-panel',
gridPos: {
h: 8,
w: 12,
x: 12,
y: 0,
},
};
const libPanelOutOfRow = createPanelSaveModel({
title: 'Library Panel',
gridPos: { x: 0, y: 8, w: 12, h: 8 },
libraryPanel: {
uid: '123',
name: 'My Panel',
},
});
const rowWithPanel = createPanelSaveModel({
title: 'Row with panel',
type: 'row',
@ -233,7 +269,7 @@ describe('transformSaveModelToScene', () => {
h: 1,
w: 24,
x: 0,
y: 8,
y: 16,
},
// This panels array is not used if the row is not collapsed
panels: [],
@ -243,17 +279,35 @@ describe('transformSaveModelToScene', () => {
h: 8,
w: 12,
x: 0,
y: 9,
y: 17,
},
title: 'In row 1',
});
const widgetLibPanelInRow = {
title: 'Widget Panel',
type: 'add-library-panel',
gridPos: {
h: 8,
w: 12,
x: 12,
y: 17,
},
};
const libPanelInRow = createPanelSaveModel({
title: 'Library Panel',
gridPos: { x: 0, y: 25, w: 12, h: 8 },
libraryPanel: {
uid: '123',
name: 'My Panel',
},
});
const emptyRow = createPanelSaveModel({
collapsed: false,
gridPos: {
h: 1,
w: 24,
x: 0,
y: 17,
y: 26,
},
// This panels array is not used if the row is not collapsed
panels: [],
@ -262,7 +316,16 @@ describe('transformSaveModelToScene', () => {
});
const dashboard = {
...defaultDashboard,
panels: [panelOutOfRow, rowWithPanel, panelInRow, emptyRow],
panels: [
panelOutOfRow,
widgetLibPanelOutOfRow,
libPanelOutOfRow,
rowWithPanel,
panelInRow,
widgetLibPanelInRow,
libPanelInRow,
emptyRow,
],
};
const oldModel = new DashboardModel(dashboard);
@ -270,25 +333,37 @@ describe('transformSaveModelToScene', () => {
const scene = createDashboardSceneFromDashboardModel(oldModel);
const body = scene.state.body as SceneGridLayout;
expect(body.state.children).toHaveLength(3);
expect(body.state.children).toHaveLength(5);
expect(body).toBeInstanceOf(SceneGridLayout);
// Panel out of row
expect(body.state.children[0]).toBeInstanceOf(SceneGridItem);
const panelOutOfRowVizPanel = body.state.children[0] as SceneGridItem;
expect((panelOutOfRowVizPanel.state.body as VizPanel)?.state.title).toBe(panelOutOfRow.title);
// Row with panel
expect(body.state.children[1]).toBeInstanceOf(SceneGridRow);
const rowWithPanelsScene = body.state.children[1] as SceneGridRow;
// widget lib panel out of row
expect(body.state.children[1]).toBeInstanceOf(SceneGridItem);
const panelOutOfRowWidget = body.state.children[1] as SceneGridItem;
expect(panelOutOfRowWidget.state.body!).toBeInstanceOf(AddLibraryPanelWidget);
// lib panel out of row
expect(body.state.children[2]).toBeInstanceOf(SceneGridItem);
const panelOutOfRowLibVizPanel = body.state.children[2] as SceneGridItem;
expect(panelOutOfRowLibVizPanel.state.body!).toBeInstanceOf(LibraryVizPanel);
// Row with panels
expect(body.state.children[3]).toBeInstanceOf(SceneGridRow);
const rowWithPanelsScene = body.state.children[3] as SceneGridRow;
expect(rowWithPanelsScene.state.title).toBe(rowWithPanel.title);
expect(rowWithPanelsScene.state.key).toBe('panel-10');
expect(rowWithPanelsScene.state.children).toHaveLength(1);
expect(rowWithPanelsScene.state.children).toHaveLength(3);
const widget = rowWithPanelsScene.state.children[1] as SceneGridItem;
expect(widget.state.body!).toBeInstanceOf(AddLibraryPanelWidget);
const libPanel = rowWithPanelsScene.state.children[2] as SceneGridItem;
expect(libPanel.state.body!).toBeInstanceOf(LibraryVizPanel);
// Panel within row
expect(rowWithPanelsScene.state.children[0]).toBeInstanceOf(SceneGridItem);
const panelInRowVizPanel = rowWithPanelsScene.state.children[0] as SceneGridItem;
expect((panelInRowVizPanel.state.body as VizPanel).state.title).toBe(panelInRow.title);
// Empty row
expect(body.state.children[2]).toBeInstanceOf(SceneGridRow);
const emptyRowScene = body.state.children[2] as SceneGridRow;
expect(body.state.children[4]).toBeInstanceOf(SceneGridRow);
const emptyRowScene = body.state.children[4] as SceneGridRow;
expect(emptyRowScene.state.title).toBe(emptyRow.title);
expect(emptyRowScene.state.children).toHaveLength(0);
});

36
public/app/features/dashboard-scene/serialization/transformSaveModelToScene.ts
View File

@ -114,12 +114,25 @@ export function createSceneObjectsForPanels(oldPanels: PanelModel[]): SceneGridI
} else if (panel.type === 'add-library-panel') {
const gridItem = buildGridItemForLibraryPanelWidget(panel);
if (gridItem) {
if (!gridItem) {
continue;
}
if (currentRow) {
currentRowPanels.push(gridItem);
} else {
panels.push(gridItem);
}
} else if (panel.libraryPanel?.uid && !('model' in panel.libraryPanel)) {
const gridItem = buildGridItemForLibPanel(panel);
if (gridItem) {
if (!gridItem) {
continue;
}
if (currentRow) {
currentRowPanels.push(gridItem);
} else {
panels.push(gridItem);
}
} else {
@ -155,6 +168,25 @@ function createRowFromPanelModel(row: PanelModel, content: SceneGridItemLike[]):
if (!(saveModel instanceof PanelModel)) {
saveModel = new PanelModel(saveModel);
}
if (saveModel.type === 'add-library-panel') {
const gridItem = buildGridItemForLibraryPanelWidget(saveModel);
if (!gridItem) {
throw new Error('Failed to build grid item for library panel widget');
}
return gridItem;
} else if (saveModel.libraryPanel?.uid && !('model' in saveModel.libraryPanel)) {
const gridItem = buildGridItemForLibPanel(saveModel);
if (!gridItem) {
throw new Error('Failed to build grid item for library panel');
}
return gridItem;
}
return buildGridItemForPanel(saveModel);
});
}