Dashboard grid fixes (#10194)

* grid: fix layout saving after panel move, #10185

* don't allow to drag fullscreen panels, #10171

public/app/features/dashboard/dashgrid/DashboardGrid.tsx

@@ -10,7 +10,7 @@ import sizeMe from 'react-sizeme';
 
 
 let lastGridWidth = 1200;
 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) {
   if (size.width === 0) {
     console.log('size is zero!');
     console.log('size is zero!');
   }
   }
@@ -37,6 +37,7 @@ function GridWrapper({size, layout, onLayoutChange, children, onResize, onResize
       layout={layout}
       layout={layout}
       onResize={onResize}
       onResize={onResize}
       onResizeStop={onResizeStop}
       onResizeStop={onResizeStop}
+      onDragStop={onDragStop}
       onLayoutChange={onLayoutChange}>
       onLayoutChange={onLayoutChange}>
       {children}
       {children}
     </ReactGridLayout>
     </ReactGridLayout>
@@ -61,6 +62,7 @@ export class DashboardGrid extends React.Component<DashboardGridProps, any> {
     this.onLayoutChange = this.onLayoutChange.bind(this);
     this.onLayoutChange = this.onLayoutChange.bind(this);
     this.onResize = this.onResize.bind(this);
     this.onResize = this.onResize.bind(this);
     this.onResizeStop = this.onResizeStop.bind(this);
     this.onResizeStop = this.onResizeStop.bind(this);
+    this.onDragStop = this.onDragStop.bind(this);
     this.onWidthChange = this.onWidthChange.bind(this);
     this.onWidthChange = this.onWidthChange.bind(this);
 
 
     this.state = {animated: false};
     this.state = {animated: false};
@@ -127,14 +129,27 @@ export class DashboardGrid extends React.Component<DashboardGridProps, any> {
     }
     }
   }
   }
 
 
+  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) {
   onResize(layout, oldItem, newItem) {
     this.panelMap[newItem.i].updateGridPos(newItem);
     this.panelMap[newItem.i].updateGridPos(newItem);
   }
   }
 
 
   onResizeStop(layout, oldItem, newItem) {
   onResizeStop(layout, oldItem, newItem) {
+    this.updateGridPos(newItem, layout);
     this.panelMap[newItem.i].resizeDone();
     this.panelMap[newItem.i].resizeDone();
   }
   }
 
 
+  onDragStop(layout, oldItem, newItem) {
+    this.updateGridPos(newItem, layout);
+  }
+
   componentDidMount() {
   componentDidMount() {
     setTimeout(() => {
     setTimeout(() => {
       this.setState(() => {
       this.setState(() => {
@@ -165,6 +180,7 @@ export class DashboardGrid extends React.Component<DashboardGridProps, any> {
         layout={this.buildLayout()}
         layout={this.buildLayout()}
         onLayoutChange={this.onLayoutChange}
         onLayoutChange={this.onLayoutChange}
         onWidthChange={this.onWidthChange}
         onWidthChange={this.onWidthChange}
+        onDragStop={this.onDragStop}
         onResize={this.onResize}
         onResize={this.onResize}
         onResizeStop={this.onResizeStop}>
         onResizeStop={this.onResizeStop}>
         {this.renderPanels()}
         {this.renderPanels()}

public/app/features/panel/panel_directive.ts

@@ -6,7 +6,7 @@ var module = angular.module('grafana.directives');
 
 
 var panelTemplate = `
 var panelTemplate = `
   <div class="panel-container">
   <div class="panel-container">
-    <div class="panel-header grid-drag-handle">
+    <div class="panel-header" ng-class="{'grid-drag-handle': !ctrl.fullscreen}">
       <span class="panel-info-corner">
       <span class="panel-info-corner">
         <i class="fa"></i>
         <i class="fa"></i>
         <span class="panel-info-corner-inner"></span>
         <span class="panel-info-corner-inner"></span>