diff --git a/public/app/features/dashboard/dashboard_model.ts b/public/app/features/dashboard/dashboard_model.ts index e16641eee6a..fb84d1a7cd1 100644 --- a/public/app/features/dashboard/dashboard_model.ts +++ b/public/app/features/dashboard/dashboard_model.ts @@ -215,7 +215,7 @@ export class DashboardModel { this.events.emit('panel-added', panel); } - private sortPanelsByGridPos() { + sortPanelsByGridPos() { this.panels.sort(function(panelA, panelB) { if (panelA.gridPos.y === panelB.gridPos.y) { return panelA.gridPos.x - panelB.gridPos.x; @@ -415,15 +415,28 @@ export class DashboardModel { // Use first panel to figure out if it was moved or pushed let firstPanel = row.panels[0]; let yDiff = firstPanel.gridPos.y - (row.gridPos.y + row.gridPos.h); + // start inserting after row let insertPos = rowIndex+1; + // y max will represent the bottom y pos after all panels have been added + // needed to know home much panels below should be pushed down + let yMax = row.gridPos.y; for (let panel of row.panels) { // make sure y is adjusted (in case row moved while collapsed) panel.gridPos.y -= yDiff; // insert after row this.panels.splice(insertPos, 0, new PanelModel(panel)); + // update insert post and y max insertPos += 1; + yMax = Math.max(yMax, panel.gridPos.y + panel.gridPos.h); + } + + const pushDownAmount = yMax - row.gridPos.y; + + // push panels below down + for (let panelIndex = insertPos; panelIndex < this.panels.length; panelIndex++) { + this.panels[panelIndex].gridPos.y += pushDownAmount; } row.panels = []; diff --git a/public/app/features/dashboard/dashgrid/DashboardGrid.tsx b/public/app/features/dashboard/dashgrid/DashboardGrid.tsx index d1c902db70e..283bf0c74d3 100644 --- a/public/app/features/dashboard/dashgrid/DashboardGrid.tsx +++ b/public/app/features/dashboard/dashgrid/DashboardGrid.tsx @@ -112,6 +112,8 @@ export class DashboardGrid extends React.Component { for (const newPos of newLayout) { this.panelMap[newPos.i].updateGridPos(newPos); } + + this.dashboard.sortPanelsByGridPos(); } triggerForceUpdate() { diff --git a/public/app/features/dashboard/dashnav/dashnav.html b/public/app/features/dashboard/dashnav/dashnav.html index 490cdb2e4b4..aef4bb7484e 100644 --- a/public/app/features/dashboard/dashnav/dashnav.html +++ b/public/app/features/dashboard/dashnav/dashnav.html @@ -23,32 +23,33 @@