dashboard: delete row improvements

Possibility to delete row and all its panels or
only the row which will leave its panels in the dashboard.

public/app/features/dashboard/dashboard_model.ts

@@ -469,6 +469,16 @@ export class DashboardModel {
     this.events.emit("panel-removed", panel);
   }
 
+  removeRow(row: PanelModel, removePanels: boolean) {
+    const needToogle = (!removePanels && row.collapsed) || (removePanels && !row.collapsed);
+
+    if (needToogle) {
+      this.toggleRow(row);
+    }
+
+    this.removePanel(row);
+  }
+
   setPanelFocus(id) {
     this.meta.focusPanelId = id;
   }

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

@@ -1,9 +1,9 @@
-import React from 'react';
-import classNames from 'classnames';
-import { PanelModel } from '../panel_model';
-import { PanelContainer } from './PanelContainer';
-import templateSrv from 'app/features/templating/template_srv';
-import appEvents from 'app/core/app_events';
+import React from "react";
+import classNames from "classnames";
+import { PanelModel } from "../panel_model";
+import { PanelContainer } from "./PanelContainer";
+import templateSrv from "app/features/templating/template_srv";
+import appEvents from "app/core/app_events";
 
 export interface DashboardRowProps {
   panel: PanelModel;
@@ -18,7 +18,7 @@ export class DashboardRow extends React.Component<DashboardRowProps, any> {
     super(props);
 
     this.state = {
-      collapsed: this.props.panel.collapsed,
+      collapsed: this.props.panel.collapsed
     };
 
     this.panelContainer = this.props.getPanelContainer();
@@ -26,6 +26,7 @@ export class DashboardRow extends React.Component<DashboardRowProps, any> {
 
     this.toggle = this.toggle.bind(this);
     this.openSettings = this.openSettings.bind(this);
+    this.delete = this.delete.bind(this);
   }
 
   toggle() {
@@ -37,59 +38,70 @@ export class DashboardRow extends React.Component<DashboardRowProps, any> {
   }
 
   openSettings() {
-    appEvents.emit('show-modal', {
-      templateHtml: `<row-options row="model.row" on-updated="model.onUpdated()" on-delete="model.onDelete()" dismiss="dismiss()"></row-options>`,
-      modalClass: 'modal--narrow',
+    appEvents.emit("show-modal", {
+      templateHtml: `<row-options row="model.row" on-updated="model.onUpdated()" dismiss="dismiss()"></row-options>`,
+      modalClass: "modal--narrow",
       model: {
         row: this.props.panel,
-        onUpdated: this.forceUpdate.bind(this),
-        onDelete: this.onDelete.bind(this),
-      },
+        onUpdated: this.forceUpdate.bind(this)
+      }
     });
   }
 
-  onDelete() {
-    let text2 = '';
-
-    if (this.props.panel.panels.length) {
-      text2 = `This will also remove the row's ${this.props.panel.panels.length} panels`;
-    }
-
-    appEvents.emit('confirm-modal', {
-      title: 'Delete Row',
-      text: 'Are you sure you want to remove this row?',
-      text2: text2,
-      icon: 'fa-trash',
+  delete() {
+    appEvents.emit("confirm-modal", {
+      title: "Delete Row",
+      text: "Are you sure you want to remove this row and all its panels?",
+      altActionText: "Delete row only",
+      icon: "fa-trash",
       onConfirm: () => {
         const panelContainer = this.props.getPanelContainer();
         const dashboard = panelContainer.getDashboard();
-        dashboard.removePanel(this.props.panel);
+        dashboard.removeRow(this.props.panel, true);
       },
+      onAltAction: () => {
+        const panelContainer = this.props.getPanelContainer();
+        const dashboard = panelContainer.getDashboard();
+        dashboard.removeRow(this.props.panel, false);
+      }
     });
   }
 
   render() {
-    const classes = classNames({ 'dashboard-row': true, 'dashboard-row--collapsed': this.state.collapsed });
+    const classes = classNames({
+      "dashboard-row": true,
+      "dashboard-row--collapsed": this.state.collapsed
+    });
     const chevronClass = classNames({
       fa: true,
-      'fa-chevron-down': !this.state.collapsed,
-      'fa-chevron-right': this.state.collapsed,
+      "fa-chevron-down": !this.state.collapsed,
+      "fa-chevron-right": this.state.collapsed
     });
 
-    let title = templateSrv.replaceWithText(this.props.panel.title, this.props.panel.scopedVars);
-    const hiddenPanels = this.props.panel.panels ? this.props.panel.panels.length : 0;
+    let title = templateSrv.replaceWithText(
+      this.props.panel.title,
+      this.props.panel.scopedVars
+    );
+    const hiddenPanels = this.props.panel.panels
+      ? this.props.panel.panels.length
+      : 0;
 
     return (
       <div className={classes}>
         <a className="dashboard-row__title pointer" onClick={this.toggle}>
           <i className={chevronClass} />
           {title}
-          <span className="dashboard-row__panel_count">({hiddenPanels} hidden panels)</span>
+          <span className="dashboard-row__panel_count">
+            ({hiddenPanels} hidden panels)
+          </span>
         </a>
         <div className="dashboard-row__actions">
           <a className="pointer" onClick={this.openSettings}>
             <i className="fa fa-cog" />
           </a>
+          <a className="pointer" onClick={this.delete}>
+            <i className="fa fa-trash" />
+          </a>
         </div>
         <div className="dashboard-row__drag grid-drag-handle" />
       </div>

public/app/features/dashboard/dashgrid/RowOptions.ts

@@ -5,7 +5,6 @@ export class RowOptionsCtrl {
   source: any;
   dismiss: any;
   onUpdated: any;
-  onDelete: any;
   showDelete: boolean;
 
   /** @ngInject */
@@ -20,11 +19,6 @@ export class RowOptionsCtrl {
     this.onUpdated();
     this.dismiss();
   }
-
-  delete() {
-    this.onDelete();
-    this.dismiss();
-  }
 }
 
 export function rowOptionsDirective() {
@@ -37,8 +31,7 @@ export function rowOptionsDirective() {
     scope: {
       row: "=",
       dismiss: "&",
-      onUpdated: "&",
-      onDelete: "&"
+      onUpdated: "&"
     }
   };
 }

public/app/features/dashboard/partials/row_options.html

@@ -23,7 +23,6 @@
 
 			<div class="gf-form-button-row">
 				<button type="submit" class="btn btn-success" ng-click="ctrl.update()">Update</button>
-				<button type="button" class="btn btn-danger" ng-click="ctrl.delete()">Remove</button>
 				<button type="button" class="btn btn-inverse" ng-click="ctrl.dismiss()">Cancel</button>
 			</div>
 		</div>

public/app/features/dashboard/specs/dashboard_model.jest.ts

@@ -329,6 +329,26 @@ describe("DashboardModel", function() {
       expect(dashboard.panels.length).toBe(3);
       expect(dashboard.panels[1].panels.length).toBe(2);
     });
+
+    describe("and when removing row and its panels", function() {
+      beforeEach(function() {
+        dashboard.removeRow(dashboard.panels[1], true);
+      });
+
+      it("should remove row and its panels", function() {
+        expect(dashboard.panels.length).toBe(2);
+      });
+    });
+
+    describe("and when removing only the row", function() {
+      beforeEach(function() {
+        dashboard.removeRow(dashboard.panels[1], false);
+      });
+
+      it("should only remove row", function() {
+        expect(dashboard.panels.length).toBe(4);
+      });
+    });
   });
 
   describe("When expanding row", function() {
@@ -348,7 +368,7 @@ describe("DashboardModel", function() {
               { id: 4, type: "graph", gridPos: { x: 12, y: 2, w: 12, h: 2 } }
             ]
           },
-          { id: 5, type: "graph", gridPos: { x: 0, y: 6, w: 1, h: 1 } }
+          { id: 5, type: "row", gridPos: { x: 0, y: 6, w: 1, h: 1 } }
         ]
       });
       dashboard.toggleRow(dashboard.panels[1]);
@@ -380,5 +400,25 @@ describe("DashboardModel", function() {
         h: 1
       });
     });
+
+    describe("and when removing row and its panels", function() {
+      beforeEach(function() {
+        dashboard.removeRow(dashboard.panels[1], true);
+      });
+
+      it("should remove row and its panels", function() {
+        expect(dashboard.panels.length).toBe(2);
+      });
+    });
+
+    describe("and when removing only the row", function() {
+      beforeEach(function() {
+        dashboard.removeRow(dashboard.panels[1], false);
+      });
+
+      it("should only remove row", function() {
+        expect(dashboard.panels.length).toBe(4);
+      });
+    });
   });
 });