diff --git a/public/app/features/dashboard/dashboard_model.ts b/public/app/features/dashboard/dashboard_model.ts index 07a7f210052..6fc6c89bb68 100644 --- a/public/app/features/dashboard/dashboard_model.ts +++ b/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; } diff --git a/public/app/features/dashboard/dashgrid/DashboardRow.tsx b/public/app/features/dashboard/dashgrid/DashboardRow.tsx index 3d4ec474886..8efcb77a86d 100644 --- a/public/app/features/dashboard/dashgrid/DashboardRow.tsx +++ b/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 { 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 { 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 { } openSettings() { - appEvents.emit('show-modal', { - templateHtml: ``, - modalClass: 'modal--narrow', + appEvents.emit("show-modal", { + templateHtml: ``, + 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 (
{title} - ({hiddenPanels} hidden panels) + + ({hiddenPanels} hidden panels) +
diff --git a/public/app/features/dashboard/dashgrid/RowOptions.ts b/public/app/features/dashboard/dashgrid/RowOptions.ts index 0038afb3784..3326cd34939 100644 --- a/public/app/features/dashboard/dashgrid/RowOptions.ts +++ b/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: "&" } }; } diff --git a/public/app/features/dashboard/partials/row_options.html b/public/app/features/dashboard/partials/row_options.html index e66801bfa20..3d5c6116679 100644 --- a/public/app/features/dashboard/partials/row_options.html +++ b/public/app/features/dashboard/partials/row_options.html @@ -23,7 +23,6 @@
-
diff --git a/public/app/features/dashboard/specs/dashboard_model.jest.ts b/public/app/features/dashboard/specs/dashboard_model.jest.ts index d512749b0ab..2200842de23 100644 --- a/public/app/features/dashboard/specs/dashboard_model.jest.ts +++ b/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); + }); + }); }); });