diff --git a/public/app/features/dashboard-scene/scene/layout-auto-grid/AutoGridLayoutManager.tsx b/public/app/features/dashboard-scene/scene/layout-auto-grid/AutoGridLayoutManager.tsx index ad7440182c4..b81b34d2d1f 100644 --- a/public/app/features/dashboard-scene/scene/layout-auto-grid/AutoGridLayoutManager.tsx +++ b/public/app/features/dashboard-scene/scene/layout-auto-grid/AutoGridLayoutManager.tsx @@ -114,18 +114,30 @@ export class AutoGridLayoutManager } public duplicate(): DashboardLayoutManager { + const children = this.state.layout.state.children; + const clonedChildren: AutoGridItem[] = []; + + if (children.length) { + let panelId = dashboardSceneGraph.getNextPanelId(children[0].state.body); + + children.forEach((child) => { + const clone = child.clone({ + key: undefined, + body: child.state.body.clone({ + key: getVizPanelKeyForPanelId(panelId), + }), + }); + + clonedChildren.push(clone); + panelId++; + }); + } + return this.clone({ key: undefined, layout: this.state.layout.clone({ key: undefined, - children: this.state.layout.state.children.map((child) => - child.clone({ - key: undefined, - body: child.state.body.clone({ - key: getVizPanelKeyForPanelId(dashboardSceneGraph.getNextPanelId(child.state.body)), - }), - }) - ), + children: clonedChildren, }), }); } diff --git a/public/app/features/dashboard-scene/scene/layout-default/DefaultGridLayoutManager.tsx b/public/app/features/dashboard-scene/scene/layout-default/DefaultGridLayoutManager.tsx index caba4bcb6a3..e5b00abc627 100644 --- a/public/app/features/dashboard-scene/scene/layout-default/DefaultGridLayoutManager.tsx +++ b/public/app/features/dashboard-scene/scene/layout-default/DefaultGridLayoutManager.tsx @@ -229,22 +229,35 @@ export class DefaultGridLayoutManager } public duplicate(): DashboardLayoutManager { + const children = this.state.grid.state.children; + const hasGridItem = children.find((child) => child instanceof DashboardGridItem); + const clonedChildren: SceneGridItemLike[] = []; + + if (children.length) { + let panelId = hasGridItem ? dashboardSceneGraph.getNextPanelId(hasGridItem.state.body) : 1; + + children.forEach((child) => { + if (child instanceof DashboardGridItem) { + const clone = child.clone({ + key: undefined, + body: child.state.body.clone({ + key: getVizPanelKeyForPanelId(panelId), + }), + }); + + clonedChildren.push(clone); + panelId++; + } else { + clonedChildren.push(child.clone({ key: undefined })); + } + }); + } + const clone = this.clone({ key: undefined, grid: this.state.grid.clone({ key: undefined, - children: this.state.grid.state.children.map((child) => { - if (child instanceof DashboardGridItem) { - return child.clone({ - key: undefined, - body: child.state.body.clone({ - key: getVizPanelKeyForPanelId(dashboardSceneGraph.getNextPanelId(child.state.body)), - }), - }); - } - - return child.clone({ key: undefined }); - }), + children: clonedChildren, }), });