wip: redux refactor

public/app/features/alerting/apis/index.ts

+import { getBackendSrv } from 'app/core/services/backend_srv';
+import alertDef from '../alert_def';
+import moment from 'moment';
+
+export interface AlertRule {
+  id: number;
+  dashboardId: number;
+  panelId: number;
+  name: string;
+  state: string;
+  stateText: string;
+  stateIcon: string;
+  stateClass: string;
+  stateAge: string;
+  info?: string;
+  url: string;
+}
+
+export function setStateFields(rule, state) {
+  const 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 getAlertRules = async (): Promise<AlertRule[]> => {
+  try {
+    const rules = await getBackendSrv().get('/api/alerts', {});
+
+    for (const rule of rules) {
+      setStateFields(rule, rule.state);
+
+      if (rule.state !== 'paused') {
+        if (rule.executionError) {
+          rule.info = 'Execution Error: ' + rule.executionError;
+        }
+        if (rule.evalData && rule.evalData.noData) {
+          rule.info = 'Query returned no data';
+        }
+      }
+    }
+
+    return rules;
+  } catch (error) {
+    console.error(error);
+    throw error;
+  }
+};

public/app/containers/AlertRuleList/AlertRuleList.tsx → public/app/features/alerting/containers/AlertRuleList.tsx

-import React from 'react';
+import React, { PureComponent } from 'react';
 import { hot } from 'react-hot-loader';
 import { hot } from 'react-hot-loader';
+import { connect } from 'react-redux';
 import classNames from 'classnames';
 import classNames from 'classnames';
-import { inject, observer } from 'mobx-react';
 import PageHeader from 'app/core/components/PageHeader/PageHeader';
 import PageHeader from 'app/core/components/PageHeader/PageHeader';
-import { AlertRule } from 'app/stores/AlertListStore/AlertListStore';
 import appEvents from 'app/core/app_events';
 import appEvents from 'app/core/app_events';
-import ContainerProps from 'app/containers/ContainerProps';
 import Highlighter from 'react-highlight-words';
 import Highlighter from 'react-highlight-words';
+import { initNav } from 'app/core/actions';
+import { ContainerProps } from 'app/types';
+import { getAlertRules, AlertRule } from '../apis';
 
 
-@inject('view', 'nav', 'alertList')
-@observer
-export class AlertRuleList extends React.Component<ContainerProps, any> {
+interface Props extends ContainerProps {}
+
+interface State {
+  rules: AlertRule[];
+  search: string;
+  stateFilter: string;
+}
+
+export class AlertRuleList extends PureComponent<Props, State> {
   stateFilters = [
   stateFilters = [
     { text: 'All', value: 'all' },
     { text: 'All', value: 'all' },
     { text: 'OK', value: 'ok' },
     { text: 'OK', value: 'ok' },
@@ -23,19 +30,35 @@ export class AlertRuleList extends React.Component<ContainerProps, any> {
   constructor(props) {
   constructor(props) {
     super(props);
     super(props);
 
 
-    this.props.nav.load('alerting', 'alert-list');
+    this.state = {
+      rules: [],
+      search: '',
+      stateFilter: '',
+    };
+
+    this.props.initNav('alerting', 'alert-list');
+  }
+
+  componentDidMount() {
     this.fetchRules();
     this.fetchRules();
   }
   }
 
 
   onStateFilterChanged = evt => {
   onStateFilterChanged = evt => {
-    this.props.view.updateQuery({ state: evt.target.value });
-    this.fetchRules();
+    // this.props.view.updateQuery({ state: evt.target.value });
+    // this.fetchRules();
   };
   };
 
 
-  fetchRules() {
-    this.props.alertList.loadRules({
-      state: this.props.view.query.get('state') || 'all',
-    });
+  async fetchRules() {
+    try {
+      const rules = await getAlertRules();
+      this.setState({ rules });
+    } catch (error) {
+      console.error(error);
+    }
+
+    // this.props.alertList.loadRules({
+    //   state: this.props.view.query.get('state') || 'all',
+    // });
   }
   }
 
 
   onOpenHowTo = () => {
   onOpenHowTo = () => {
@@ -47,15 +70,16 @@ export class AlertRuleList extends React.Component<ContainerProps, any> {
   };
   };
 
 
   onSearchQueryChange = evt => {
   onSearchQueryChange = evt => {
-    this.props.alertList.setSearchQuery(evt.target.value);
+    // this.props.alertList.setSearchQuery(evt.target.value);
   };
   };
 
 
   render() {
   render() {
-    const { nav, alertList } = this.props;
+    const { navModel } = this.props;
+    const { rules, search, stateFilter } = this.state;
 
 
     return (
     return (
       <div>
       <div>
-        <PageHeader model={nav as any} />
+        <PageHeader model={navModel} />
         <div className="page-container page-body">
         <div className="page-container page-body">
           <div className="page-action-bar">
           <div className="page-action-bar">
             <div className="gf-form gf-form--grow">
             <div className="gf-form gf-form--grow">
@@ -64,7 +88,7 @@ export class AlertRuleList extends React.Component<ContainerProps, any> {
                   type="text"
                   type="text"
                   className="gf-form-input"
                   className="gf-form-input"
                   placeholder="Search alerts"
                   placeholder="Search alerts"
-                  value={alertList.search}
+                  value={search}
                   onChange={this.onSearchQueryChange}
                   onChange={this.onSearchQueryChange}
                 />
                 />
                 <i className="gf-form-input-icon fa fa-search" />
                 <i className="gf-form-input-icon fa fa-search" />
@@ -74,7 +98,7 @@ export class AlertRuleList extends React.Component<ContainerProps, any> {
               <label className="gf-form-label">States</label>
               <label className="gf-form-label">States</label>
 
 
               <div className="gf-form-select-wrapper width-13">
               <div className="gf-form-select-wrapper width-13">
-                <select className="gf-form-input" onChange={this.onStateFilterChanged} value={alertList.stateFilter}>
+                <select className="gf-form-input" onChange={this.onStateFilterChanged} value={stateFilter}>
                   {this.stateFilters.map(AlertStateFilterOption)}
                   {this.stateFilters.map(AlertStateFilterOption)}
                 </select>
                 </select>
               </div>
               </div>
@@ -89,8 +113,8 @@ export class AlertRuleList extends React.Component<ContainerProps, any> {
 
 
           <section>
           <section>
             <ol className="alert-rule-list">
             <ol className="alert-rule-list">
-              {alertList.filteredRules.map(rule => (
-                <AlertRuleItem rule={rule} key={rule.id} search={alertList.search} />
+              {rules.map(rule => (
+                <AlertRuleItem rule={rule} key={rule.id} search={search} />
               ))}
               ))}
             </ol>
             </ol>
           </section>
           </section>
@@ -113,10 +137,9 @@ export interface AlertRuleItemProps {
   search: string;
   search: string;
 }
 }
 
 
-@observer
 export class AlertRuleItem extends React.Component<AlertRuleItemProps, any> {
 export class AlertRuleItem extends React.Component<AlertRuleItemProps, any> {
   toggleState = () => {
   toggleState = () => {
-    this.props.rule.togglePaused();
+    // this.props.rule.togglePaused();
   };
   };
 
 
   renderText(text: string) {
   renderText(text: string) {
@@ -134,8 +157,8 @@ export class AlertRuleItem extends React.Component<AlertRuleItemProps, any> {
 
 
     const stateClass = classNames({
     const stateClass = classNames({
       fa: true,
       fa: true,
-      'fa-play': rule.isPaused,
-      'fa-pause': !rule.isPaused,
+      'fa-play': rule.state === 'paused',
+      'fa-pause': rule.state !== 'paused',
     });
     });
 
 
     const ruleUrl = `${rule.url}?panelId=${rule.panelId}&fullscreen=true&edit=true&tab=alert`;
     const ruleUrl = `${rule.url}?panelId=${rule.panelId}&fullscreen=true&edit=true&tab=alert`;
@@ -175,4 +198,12 @@ export class AlertRuleItem extends React.Component<AlertRuleItemProps, any> {
   }
   }
 }
 }
 
 
-export default hot(module)(AlertRuleList);
+const mapStateToProps = state => ({
+  navModel: state.navModel,
+});
+
+const mapDispatchToProps = {
+  initNav,
+};
+
+export default hot(module)(connect(mapStateToProps, mapDispatchToProps)(AlertRuleList));

public/app/routes/routes.ts

 import './dashboard_loaders';
 import './dashboard_loaders';
 import './ReactContainer';
 import './ReactContainer';
 
 
-import ServerStats from 'app/features/server-stats/ServerStats';
-import AlertRuleList from 'app/containers/AlertRuleList/AlertRuleList';
+import ServerStats from 'app/features/serverStats/ServerStats';
+import AlertRuleList from 'app/features/alerting/containers/AlertRuleList';
 import FolderSettings from 'app/containers/ManageDashboards/FolderSettings';
 import FolderSettings from 'app/containers/ManageDashboards/FolderSettings';
 import FolderPermissions from 'app/containers/ManageDashboards/FolderPermissions';
 import FolderPermissions from 'app/containers/ManageDashboards/FolderPermissions';
 import TeamPages from 'app/containers/Teams/TeamPages';
 import TeamPages from 'app/containers/Teams/TeamPages';