Commit e7d9bbf7 by Peter Holmberg

state history tab

parent ce01bd69
...@@ -2,12 +2,15 @@ import React, { PureComponent } from 'react'; ...@@ -2,12 +2,15 @@ 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 EmptyListCTA from 'app/core/components/EmptyListCTA/EmptyListCTA';
import StateHistory from './StateHistory';
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';
import { DashboardModel } from '../dashboard_model';
interface Props { interface Props {
angularPanel?: AngularComponent; angularPanel?: AngularComponent;
dashboard: DashboardModel;
panel: PanelModel; panel: PanelModel;
} }
...@@ -70,7 +73,7 @@ export class AlertTab extends PureComponent<Props> { ...@@ -70,7 +73,7 @@ export class AlertTab extends PureComponent<Props> {
return { return {
title: 'State history', title: 'State history',
render: () => { render: () => {
return <div>State history</div>; return <StateHistory dashboard={this.props.dashboard} panelId={this.props.panel.id} />;
}, },
buttonType: ToolbarButtonType.View, buttonType: ToolbarButtonType.View,
}; };
...@@ -119,7 +122,6 @@ export class AlertTab extends PureComponent<Props> { ...@@ -119,7 +122,6 @@ export class AlertTab extends PureComponent<Props> {
buttonTitle: 'Create Alert', buttonTitle: 'Create Alert',
}; };
//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}>
<> <>
......
...@@ -54,7 +54,7 @@ export class PanelEditor extends PureComponent<PanelEditorProps> { ...@@ -54,7 +54,7 @@ export class PanelEditor extends PureComponent<PanelEditorProps> {
case 'queries': case 'queries':
return <QueriesTab panel={panel} dashboard={dashboard} />; return <QueriesTab panel={panel} dashboard={dashboard} />;
case 'alert': case 'alert':
return <AlertTab angularPanel={angularPanel} panel={panel} />; return <AlertTab angularPanel={angularPanel} dashboard={dashboard} panel={panel} />;
case 'visualization': case 'visualization':
return ( return (
<VisualizationTab <VisualizationTab
......
import React, { PureComponent } from 'react';
import alertDef from '../../alerting/state/alertDef';
import { getBackendSrv } from '../../../core/services/backend_srv';
import { DashboardModel } from '../dashboard_model';
interface Props {
dashboard: DashboardModel;
panelId: number;
}
interface State {
stateHistoryItems: any[];
}
class StateHistory extends PureComponent<Props, State> {
state = {
stateHistoryItems: [],
};
componentDidMount(): void {
const { dashboard, panelId } = this.props;
getBackendSrv()
.get(`/api/annotations?dashboardId=${dashboard.id}&panelId=${panelId}&limit=50&type=alert`)
.then(res => {
console.log(res);
const items = [];
res.map(item => {
items.push({
stateModel: alertDef.getStateDisplayModel(item.newState),
time: dashboard.formatDate(item.time, 'MMM D, YYYY HH:mm:ss'),
info: alertDef.getAlertAnnotationInfo(item),
});
});
this.setState({
stateHistoryItems: items,
});
});
}
render() {
const { stateHistoryItems } = this.state;
return (
<div>
<div style={{ margin: '0 auto', maxWidth: '720px' }}>
<div style={{ marginBottom: '15px' }}>
<span className="muted">Last 50 state changes</span>
<button className="btn btn-mini btn-danger pull-right">
<i className="fa fa-trash" /> {` Clear history`}
</button>
</div>
<ol className="alert-rule-list">
{stateHistoryItems ? (
stateHistoryItems.map((item, index) => {
return (
<li className="alert-rule-item" key={`${item.time}-${index}`}>
<div className={`alert-rule-item__icon ${item.stateModel.stateClass}`}>
<i className={item.stateModel.iconClass} />
</div>
<div className="alert-rule-item__body">
<div className="alert-rule-item__header">
<p className="alert-rule-item__name">{item.alertName}</p>
<div className="alert-rule-item__text">
<span className={`${item.stateModel.stateClass}`}>{item.stateModel.text}</span>
</div>
</div>
{item.info}
</div>
<div className="alert-rule-item__time">{item.time}</div>
</li>
);
})
) : (
<i>No state changes recorded</i>
)}
</ol>
</div>
</div>
);
}
}
export default StateHistory;
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