tech: alert list react migration progress

public/app/stores/AlertListStore.ts

@@ -0,0 +1,85 @@
+import { types, getEnv, flow } from 'mobx-state-tree';
+import moment from 'moment';
+import alertDef from 'app/features/alerting/alert_def';
+
+function setStateFields(rule, state) {
+  let stateModel = alertDef.getStateDisplayModel(state);
+  rule.state = state;
+  rule.stateText = stateModel.text;
+  rule.stateIcon = stateModel.iconClass;
+  rule.stateClass = stateModel.stateClass;
+  rule.stateAge = moment(rule.newStateDate)
+    .fromNow()
+    .replace(' ago', '');
+}
+
+export const AlertRule = types
+  .model('AlertRule', {
+    id: types.identifier(types.number),
+    dashboardId: types.number,
+    panelId: types.number,
+    name: types.string,
+    state: types.string,
+    stateText: types.string,
+    stateIcon: types.string,
+    stateClass: types.string,
+    stateAge: types.string,
+    info: types.optional(types.string, ''),
+    dashboardUri: types.string,
+  })
+  .views(self => ({
+    get isPaused() {
+      return self.state === 'paused';
+    },
+  }))
+  .actions(self => ({
+    /**
+     * will toggle alert rule paused state
+     */
+    togglePaused: flow(function* togglePaused() {
+      let backendSrv = getEnv(self).backendSrv;
+
+      var payload = { paused: self.isPaused };
+      let res = yield backendSrv.post(`/api/alerts/${self.id}/pause`, payload);
+      setStateFields(self, res.state);
+      self.info = '';
+    }),
+  }));
+
+type IAlertRuleType = typeof AlertRule.Type;
+export interface IAlertRule extends IAlertRuleType {}
+
+export const AlertListStore = types
+  .model('AlertListStore', {
+    rules: types.array(AlertRule),
+    stateFilter: types.optional(types.string, 'all'),
+  })
+  .actions(self => ({
+    setStateFilter: function(state) {
+      self.stateFilter = state;
+    },
+
+    loadRules: flow(function* load() {
+      let backendSrv = getEnv(self).backendSrv;
+
+      let filters = { state: self.stateFilter };
+
+      let rules = yield backendSrv.get('/api/alerts', filters);
+
+      self.rules.clear();
+
+      for (let rule of rules) {
+        setStateFields(rule, rule.state);
+
+        if (rule.executionError) {
+          rule.info = 'Execution Error: ' + rule.executionError;
+        }
+
+        if (rule.evalData && rule.evalData.noData) {
+          rule.info = 'Query returned no data';
+        }
+
+        self.rules.push(AlertRule.create(rule));
+      }
+    }),
+  }));

public/app/stores/AlertingStore.ts

@@ -1,51 +0,0 @@
-import { types, getEnv, flow } from 'mobx-state-tree';
-import moment from 'moment';
-import alertDef from 'app/features/alerting/alert_def';
-
-export const AlertRule = types.model('AlertRule', {
-  id: types.identifier(types.number),
-  dashboardId: types.number,
-  panelId: types.number,
-  name: types.string,
-  state: types.string,
-  stateText: types.string,
-  stateIcon: types.string,
-  stateClass: types.string,
-  stateAge: types.string,
-  info: types.optional(types.string, ''),
-  dashboardUri: types.string,
-});
-
-export const AlertingStore = types
-  .model('AlertingStore', {
-    rules: types.array(AlertRule),
-  })
-  .actions(self => ({
-    loadRules: flow(function* load() {
-      let backendSrv = getEnv(self).backendSrv;
-
-      let rules = yield backendSrv.get('/api/alerts');
-
-      self.rules.clear();
-
-      for (let rule of rules) {
-        let stateModel = alertDef.getStateDisplayModel(rule.state);
-        rule.stateText = stateModel.text;
-        rule.stateIcon = stateModel.iconClass;
-        rule.stateClass = stateModel.stateClass;
-        rule.stateAge = moment(rule.newStateDate)
-          .fromNow()
-          .replace(' ago', '');
-
-        if (rule.executionError) {
-          rule.info = 'Execution Error: ' + rule.executionError;
-        }
-
-        if (rule.evalData && rule.evalData.noData) {
-          rule.info = 'Query returned no data';
-        }
-
-        self.rules.push(AlertRule.create(rule));
-      }
-    }),
-  }));

public/app/stores/RootStore.ts

@@ -2,7 +2,7 @@ import { types } from 'mobx-state-tree';
 import { SearchStore } from './SearchStore';
 import { ServerStatsStore } from './ServerStatsStore';
 import { NavStore } from './NavStore';
-import { AlertingStore } from './AlertingStore';
+import { AlertListStore } from './AlertListStore';
 
 export const RootStore = types.model({
   search: types.optional(SearchStore, {
@@ -12,7 +12,7 @@ export const RootStore = types.model({
     stats: [],
   }),
   nav: types.optional(NavStore, {}),
-  alerting: types.optional(AlertingStore, {
+  alertList: types.optional(AlertListStore, {
     rules: [],
   }),
 });