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

clear history

Browse Source
This commit is contained in:
Peter Holmberg 2019-01-02 16:07:29 +01:00
parent e7d9bbf781
commit 6b5f9d5821
2 changed files with 47 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -19,10 +19,6 @@ export class AlertTab extends PureComponent<Props> {
component: AngularComponent; component: AngularComponent;
panelCtrl: any; panelCtrl: any;
constructor(props) {
super(props);
}
componentDidMount() { componentDidMount() {
if (this.shouldLoadAlertTab()) { if (this.shouldLoadAlertTab()) {
this.loadAlertTab(); this.loadAlertTab();
@ -73,7 +69,13 @@ export class AlertTab extends PureComponent<Props> {
return { return {
title: 'State history', title: 'State history',
render: () => { render: () => {
return <StateHistory dashboard={this.props.dashboard} panelId={this.props.panel.id} />; return (
<StateHistory
dashboard={this.props.dashboard}
panelId={this.props.panel.id}
onRefresh={this.panelCtrl.refresh}
/>
);
}, },
buttonType: ToolbarButtonType.View, buttonType: ToolbarButtonType.View,
}; };

53
public/app/features/dashboard/dashgrid/StateHistory.tsx
View File

@ -1,11 +1,13 @@
import React, { PureComponent } from 'react'; import React, { PureComponent } from 'react';
import alertDef from '../../alerting/state/alertDef'; import alertDef from '../../alerting/state/alertDef';
import { getBackendSrv } from '../../../core/services/backend_srv'; import { getBackendSrv } from 'app/core/services/backend_srv';
import { DashboardModel } from '../dashboard_model'; import { DashboardModel } from '../dashboard_model';
import appEvents from '../../../core/app_events';
interface Props { interface Props {
dashboard: DashboardModel; dashboard: DashboardModel;
panelId: number; panelId: number;
onRefresh: () => void;
} }
interface State { interface State {
@ -23,14 +25,12 @@ class StateHistory extends PureComponent<Props, State> {
getBackendSrv() getBackendSrv()
.get(`/api/annotations?dashboardId=${dashboard.id}&panelId=${panelId}&limit=50&type=alert`) .get(`/api/annotations?dashboardId=${dashboard.id}&panelId=${panelId}&limit=50&type=alert`)
.then(res => { .then(res => {
console.log(res); const items = res.map(item => {
const items = []; return {
res.map(item => {
items.push({
stateModel: alertDef.getStateDisplayModel(item.newState), stateModel: alertDef.getStateDisplayModel(item.newState),
time: dashboard.formatDate(item.time, 'MMM D, YYYY HH:mm:ss'), time: dashboard.formatDate(item.time, 'MMM D, YYYY HH:mm:ss'),
info: alertDef.getAlertAnnotationInfo(item), info: alertDef.getAlertAnnotationInfo(item),
}); };
}); });
this.setState({ this.setState({
@ -39,20 +39,47 @@ class StateHistory extends PureComponent<Props, State> {
}); });
} }
clearHistory = () => {
const { dashboard, onRefresh, panelId } = this.props;
appEvents.emit('confirm-modal', {
title: 'Delete Alert History',
text: 'Are you sure you want to remove all history & annotations for this alert?',
icon: 'fa-trash',
yesText: 'Yes',
onConfirm: () => {
getBackendSrv()
.post('/api/annotations/mass-delete', {
dashboardId: dashboard.id,
panelId: panelId,
})
.then(() => {
onRefresh();
});
this.setState({
stateHistoryItems: [],
});
},
});
};
render() { render() {
const { stateHistoryItems } = this.state; const { stateHistoryItems } = this.state;
return ( return (
<div> <div>
<div style={{ margin: '0 auto', maxWidth: '720px' }}> <div style={{ margin: '0 auto', maxWidth: '720px' }}>
<div style={{ marginBottom: '15px' }}> {stateHistoryItems.length > 0 && (
<span className="muted">Last 50 state changes</span> <div style={{ marginBottom: '15px' }}>
<button className="btn btn-mini btn-danger pull-right"> <span className="muted">Last 50 state changes</span>
<i className="fa fa-trash" /> {` Clear history`} <button className="btn btn-mini btn-danger pull-right" onClick={this.clearHistory}>
</button> <i className="fa fa-trash" /> {` Clear history`}
</div> </button>
</div>
)}
<ol className="alert-rule-list"> <ol className="alert-rule-list">
{stateHistoryItems ? ( {stateHistoryItems.length > 0 ? (
stateHistoryItems.map((item, index) => { stateHistoryItems.map((item, index) => {
return ( return (
<li className="alert-rule-item" key={`${item.time}-${index}`}> <li className="alert-rule-item" key={`${item.time}-${index}`}>