opensource/grafana
1
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-09-22 02:52:27 +08:00
Code Issues Packages Projects Releases Wiki Activity

add alert in react instead of angular

Browse Source
This commit is contained in:
Peter Holmberg
2019-01-02 10:57:12 +01:00
parent d9c93e572e
commit ce01bd696e
3 changed files with 23 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
public/app/features/alerting/AlertTabCtrl.ts
View File

@ -45,6 +45,7 @@ export class AlertTabCtrl {
this.noDataModes = alertDef.noDataModes; this.noDataModes = alertDef.noDataModes;
this.executionErrorModes = alertDef.executionErrorModes; this.executionErrorModes = alertDef.executionErrorModes;
this.appSubUrl = config.appSubUrl; this.appSubUrl = config.appSubUrl;
this.panelCtrl._enableAlert = this.enable;
} }
$onInit() { $onInit() {
@ -353,11 +354,11 @@ export class AlertTabCtrl {
}); });
} }
enable() { enable = () => {
this.panel.alert = {}; this.panel.alert = {};
this.initModel(); this.initModel();
this.panel.alert.for = '5m'; //default value for new alerts. for existing alerts we use 0m to avoid breaking changes this.panel.alert.for = '5m'; //default value for new alerts. for existing alerts we use 0m to avoid breaking changes
} };
evaluatorParamsChanged() { evaluatorParamsChanged() {
ThresholdMapper.alertToGraphThresholds(this.panel); ThresholdMapper.alertToGraphThresholds(this.panel);

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

@ -153,13 +153,3 @@
</div> </div>
</div> </div>
</div> </div>
<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__title">Panel has no alert rule defined</div>
<button class="empty-list-cta__button btn btn-xlarge btn-success" ng-click="ctrl.enable()">
<i class="icon-gf icon-gf-alert"></i>
Create Alert
</button>
</div>
</div>

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

@ -1,7 +1,7 @@
import React, { PureComponent } from 'react'; 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 EmptyListCTA from 'app/core/components/EmptyListCTA/EmptyListCTA';
import appEvents from 'app/core/app_events'; import appEvents from 'app/core/app_events';
import { PanelModel } from '../panel_model'; import { PanelModel } from '../panel_model';
import 'app/features/alerting/AlertTabCtrl'; import 'app/features/alerting/AlertTabCtrl';
@ -33,7 +33,7 @@ export class AlertTab extends PureComponent<Props> {
} }
shouldLoadAlertTab() { shouldLoadAlertTab() {
return this.props.angularPanel && this.element; return this.props.angularPanel && this.element && !this.component;
} }
componentWillUnmount() { componentWillUnmount() {
@ -93,6 +93,7 @@ export class AlertTab extends PureComponent<Props> {
panel.thresholds = []; panel.thresholds = [];
this.panelCtrl.alertState = null; this.panelCtrl.alertState = null;
this.panelCtrl.render(); this.panelCtrl.render();
this.forceUpdate();
}, },
}); });
}, },
@ -100,15 +101,31 @@ export class AlertTab extends PureComponent<Props> {
}; };
}; };
onAddAlert = () => {
this.panelCtrl._enableAlert();
this.component.digest();
this.forceUpdate();
};
render() { render() {
const { alert } = this.props.panel; const { alert } = this.props.panel;
const toolbarItems = alert ? [this.stateHistory(), this.deleteAlert()] : []; const toolbarItems = alert ? [this.stateHistory(), this.deleteAlert()] : [];
const model = {
title: 'Panel has no alert rule defined',
icon: 'icon-gf icon-gf-alert',
onClick: this.onAddAlert,
buttonTitle: 'Create Alert',
};
//TODO move add button react from angular and add condition to render angular view //TODO move add button react from angular and add condition to render angular view
return ( return (
<EditorTabBody heading="Alert" toolbarItems={toolbarItems}> <EditorTabBody heading="Alert" toolbarItems={toolbarItems}>
<>
<div ref={element => (this.element = element)} /> <div ref={element => (this.element = element)} />
{!alert && <EmptyListCTA model={model} />}
</>
</EditorTabBody> </EditorTabBody>
); );
} }