Skip to content

N
nexpie-grafana-theme
Commit bbdb1cdd by Marcus Efraimsson
Options

dashboard: delete row improvements 

Possibility to delete row and all its panels or
only the row which will leave its panels in the dashboard.
parent 07432cb4
Showing with 96 additions and 42 deletions
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
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);
});
});
});
});
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment