From 2bfc106473ee8ce5fa5529bf9bd1faef68433708 Mon Sep 17 00:00:00 2001 From: "Grot (@grafanabot)" <43478413+grafanabot@users.noreply.github.com> Date: Sun, 30 Oct 2022 00:46:46 +0200 Subject: [PATCH] Dashboards: Add workaround for react-grid-layout rearrange bug (#57832) (#57836) (cherry picked from commit e4d1d8d70cd553c262e1095bb3d77f4271b111d6) Co-authored-by: kay delaney <45561153+kaydelaney@users.noreply.github.com> --- .../features/dashboard/containers/DashboardPage.tsx | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/public/app/features/dashboard/containers/DashboardPage.tsx b/public/app/features/dashboard/containers/DashboardPage.tsx index 0935e07d25e..db0aaf39071 100644 --- a/public/app/features/dashboard/containers/DashboardPage.tsx +++ b/public/app/features/dashboard/containers/DashboardPage.tsx @@ -297,9 +297,17 @@ export class UnthemedDashboardPage extends PureComponent { return; } + // Move all panels down by the height of the "add panel" widget. + // This is to work around an issue with react-grid-layout that can mess up the layout + // in certain configurations. (See https://github.com/react-grid-layout/react-grid-layout/issues/1787) + const addPanelWidgetHeight = 8; + for (const panel of dashboard.panelIterator()) { + panel.gridPos.y += addPanelWidgetHeight; + } + dashboard.addPanel({ type: 'add-panel', - gridPos: { x: 0, y: 0, w: 12, h: 8 }, + gridPos: { x: 0, y: 0, w: 12, h: addPanelWidgetHeight }, title: 'Panel Title', });