mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
clear history
This commit is contained in:
parent
e7d9bbf781
commit
6b5f9d5821
@ -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,
|
||||||
};
|
};
|
||||||
|
@ -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' }}>
|
||||||
|
{stateHistoryItems.length > 0 && (
|
||||||
<div style={{ marginBottom: '15px' }}>
|
<div style={{ marginBottom: '15px' }}>
|
||||||
<span className="muted">Last 50 state changes</span>
|
<span className="muted">Last 50 state changes</span>
|
||||||
<button className="btn btn-mini btn-danger pull-right">
|
<button className="btn btn-mini btn-danger pull-right" onClick={this.clearHistory}>
|
||||||
<i className="fa fa-trash" /> {` Clear history`}
|
<i className="fa fa-trash" /> {` Clear history`}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</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}`}>
|
||||||
|
Loading…
Reference in New Issue
Block a user