diff --git a/public/app/features/dashboard/dashgrid/DashboardGrid.tsx b/public/app/features/dashboard/dashgrid/DashboardGrid.tsx index c640e06cc9b..be8f1822d62 100644 --- a/public/app/features/dashboard/dashgrid/DashboardGrid.tsx +++ b/public/app/features/dashboard/dashgrid/DashboardGrid.tsx @@ -10,7 +10,7 @@ import sizeMe from 'react-sizeme'; let lastGridWidth = 1200; -function GridWrapper({size, layout, onLayoutChange, children, onResize, onResizeStop, onWidthChange, className}) { +function GridWrapper({size, layout, onLayoutChange, children, onDragStop, onResize, onResizeStop, onWidthChange, className}) { if (size.width === 0) { console.log('size is zero!'); } @@ -37,6 +37,7 @@ function GridWrapper({size, layout, onLayoutChange, children, onResize, onResize layout={layout} onResize={onResize} onResizeStop={onResizeStop} + onDragStop={onDragStop} onLayoutChange={onLayoutChange}> {children} @@ -61,6 +62,7 @@ export class DashboardGrid extends React.Component { this.onLayoutChange = this.onLayoutChange.bind(this); this.onResize = this.onResize.bind(this); this.onResizeStop = this.onResizeStop.bind(this); + this.onDragStop = this.onDragStop.bind(this); this.onWidthChange = this.onWidthChange.bind(this); this.state = {animated: false}; @@ -127,14 +129,27 @@ export class DashboardGrid extends React.Component { } } + updateGridPos(item, layout) { + this.panelMap[item.i].updateGridPos(item); + + // react-grid-layout has a bug (#670), and onLayoutChange() is only called when the component is mounted. + // So it's required to call it explicitly when panel resized or moved to save layout changes. + this.onLayoutChange(layout); + } + onResize(layout, oldItem, newItem) { this.panelMap[newItem.i].updateGridPos(newItem); } onResizeStop(layout, oldItem, newItem) { + this.updateGridPos(newItem, layout); this.panelMap[newItem.i].resizeDone(); } + onDragStop(layout, oldItem, newItem) { + this.updateGridPos(newItem, layout); + } + componentDidMount() { setTimeout(() => { this.setState(() => { @@ -165,6 +180,7 @@ export class DashboardGrid extends React.Component { layout={this.buildLayout()} onLayoutChange={this.onLayoutChange} onWidthChange={this.onWidthChange} + onDragStop={this.onDragStop} onResize={this.onResize} onResizeStop={this.onResizeStop}> {this.renderPanels()} diff --git a/public/app/features/panel/panel_directive.ts b/public/app/features/panel/panel_directive.ts index 626e7c151e9..9e1b87d00cc 100644 --- a/public/app/features/panel/panel_directive.ts +++ b/public/app/features/panel/panel_directive.ts @@ -6,7 +6,7 @@ var module = angular.module('grafana.directives'); var panelTemplate = `
-
+