state history tab

public/app/features/dashboard/dashgrid/AlertTab.tsx

@@ -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> {
     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> {
       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}>
         <>
         <>

public/app/features/dashboard/dashgrid/PanelEditor.tsx

@@ -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

public/app/features/dashboard/dashgrid/StateHistory.tsx

+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;