IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

delete works

Browse Source
This commit is contained in:
Peter Holmberg 2018-12-21 14:56:49 +01:00
parent 6aacd0734b
commit 4002f80ab8
2 changed files with 34 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
public/app/features/alerting/partials/alert_tab.html
View File

@ -1,4 +1,4 @@
<div ng-if="ctrl.alert"> <div ng-if="ctrl.panel.alert">
<div class="alert alert-error m-b-2" ng-show="ctrl.error"> <div class="alert alert-error m-b-2" ng-show="ctrl.error">
<i class="fa fa-warning"></i> {{ctrl.error}} <i class="fa fa-warning"></i> {{ctrl.error}}
</div> </div>
@ -154,7 +154,7 @@
</div> </div>
</div> </div>
<div class="gf-form-group p-t-4 p-b-4" ng-if="!ctrl.alert"> <div class="gf-form-group p-t-4 p-b-4" ng-if="!ctrl.panel.alert">
<div class="empty-list-cta"> <div class="empty-list-cta">
<div class="empty-list-cta__title">Panel has no alert rule defined</div> <div class="empty-list-cta__title">Panel has no alert rule defined</div>
<button class="empty-list-cta__button btn btn-xlarge btn-success" ng-click="ctrl.enable()"> <button class="empty-list-cta__button btn btn-xlarge btn-success" ng-click="ctrl.enable()">

44
public/app/features/dashboard/dashgrid/AlertTab.tsx
View File

@ -2,8 +2,9 @@ import React, { PureComponent } from 'react';
import { AngularComponent, getAngularLoader } from 'app/core/services/AngularLoader'; import { AngularComponent, getAngularLoader } from 'app/core/services/AngularLoader';
import { EditorTabBody, EditorToolbarView, ToolbarButtonType } from './EditorTabBody'; import { EditorTabBody, EditorToolbarView, ToolbarButtonType } from './EditorTabBody';
import 'app/features/alerting/AlertTabCtrl'; import appEvents from 'app/core/app_events';
import { PanelModel } from '../panel_model'; import { PanelModel } from '../panel_model';
import 'app/features/alerting/AlertTabCtrl';
interface Props { interface Props {
angularPanel?: AngularComponent; angularPanel?: AngularComponent;
@ -13,6 +14,7 @@ interface Props {
export class AlertTab extends PureComponent<Props> { export class AlertTab extends PureComponent<Props> {
element: any; element: any;
component: AngularComponent; component: AngularComponent;
panelCtrl: any;
constructor(props) { constructor(props) {
super(props); super(props);
@ -53,37 +55,55 @@ export class AlertTab extends PureComponent<Props> {
return; return;
} }
const panelCtrl = scope.$$childHead.ctrl; this.panelCtrl = scope.$$childHead.ctrl;
const loader = getAngularLoader(); const loader = getAngularLoader();
const template = '<alert-tab />'; const template = '<alert-tab />';
const scopeProps = { const scopeProps = {
ctrl: panelCtrl, ctrl: this.panelCtrl,
}; };
this.component = loader.load(this.element, scopeProps, template); this.component = loader.load(this.element, scopeProps, template);
} }
render() { stateHistory = (): EditorToolbarView => {
const { alert } = this.props.panel; return {
const stateHistory: EditorToolbarView = {
title: 'State history', title: 'State history',
render: () => { render: () => {
return <div>State history</div>; return <div>State history</div>;
}, },
buttonType: ToolbarButtonType.View, buttonType: ToolbarButtonType.View,
}; };
};
const deleteAlert = { deleteAlert = (): EditorToolbarView => {
title: 'Delete button', const { panel } = this.props;
render: () => { return {
return <div>Hello</div>; title: 'Delete',
icon: 'fa fa-trash',
onClick: () => {
appEvents.emit('confirm-modal', {
title: 'Delete Alert',
text: 'Are you sure you want to delete this alert rule?',
text2: 'You need to save dashboard for the delete to take effect',
icon: 'fa-trash',
yesText: 'Delete',
onConfirm: () => {
delete panel.alert;
panel.thresholds = [];
this.panelCtrl.alertState = null;
this.panelCtrl.render();
},
});
}, },
buttonType: ToolbarButtonType.Action, buttonType: ToolbarButtonType.Action,
}; };
};
const toolbarItems = alert ? [deleteAlert, stateHistory] : []; render() {
const { alert } = this.props.panel;
const toolbarItems = alert ? [this.stateHistory(), this.deleteAlert()] : [];
return ( return (
<EditorTabBody heading="Alert" toolbarItems={toolbarItems}> <EditorTabBody heading="Alert" toolbarItems={toolbarItems}>