Merge pull request #363 from influxdata/feature/rules-index-#307

Make index page for Kapacitor Rules

ui/src/index.js

@@ -7,7 +7,7 @@ import App from 'src/App';
 import AlertsApp from 'src/alerts';
 import CheckDataNodes from 'src/CheckDataNodes';
 import {HostsPage, HostPage} from 'src/hosts';
-import {KapacitorPage, KapacitorRulePage, KapacitorTasksPage} from 'src/kapacitor';
+import {KapacitorPage, KapacitorRulePage, KapacitorRulesPage, KapacitorTasksPage} from 'src/kapacitor';
 import QueriesPage from 'src/queries';
 import TasksPage from 'src/tasks';
 import RetentionPoliciesPage from 'src/retention_policies';
@@ -117,7 +117,8 @@ const Root = React.createClass({
               <Route path="kapacitor-config" component={KapacitorPage} />
               <Route path="kapacitor-tasks" component={KapacitorTasksPage} />
               <Route path="alerts" component={AlertsApp} />
-              <Route path="alert-rules" component={KapacitorRulePage} />
+              <Route path="alert-rules" component={KapacitorRulesPage} />
+              <Route path="alert-rules/:ruleID" component={KapacitorRulePage} />
             </Route>
             <Route path="tasks" component={TasksPage} />
             <Route path="*" component={NotFound} />

ui/src/kapacitor/apis/index.js

@@ -7,3 +7,10 @@ export function createRule(kapacitor, rule) {
     data: rule,
   });
 }
+
+export function getRules(kapacitor) {
+  return AJAX({
+    method: 'GET',
+    url: kapacitor.links.rules,
+  });
+}

ui/src/kapacitor/containers/KapacitorRulePage.js

@@ -21,7 +21,7 @@ export const KapacitorRulePage = React.createClass({
       links: PropTypes.shape({
         proxy: PropTypes.string.isRequired,
         self: PropTypes.string.isRequired,
-      }).isRequired,
+      }),
     }),
     addFlashMessage: PropTypes.func,
     rules: PropTypes.shape({}).isRequired,
@@ -50,7 +50,7 @@ export const KapacitorRulePage = React.createClass({
   },
 
   componentDidMount() {
-    const {ruleID} = this.props.params;
+    const {ruleID} = false; // this.props.params;
     if (ruleID) {
       this.props.kapacitorActions.fetchRule(ruleID);
     } else {

ui/src/kapacitor/containers/KapacitorRulesPage.js

@@ -0,0 +1,85 @@
+import React, {PropTypes} from 'react';
+import {Link} from 'react-router';
+import {getRules} from 'src/kapacitor/apis';
+import {getKapacitor} from 'src/shared/apis';
+
+export const KapacitorRulesPage = React.createClass({
+  propTypes: {
+    source: PropTypes.shape({
+      id: PropTypes.string.isRequired,
+      name: PropTypes.string.isRequired,
+      type: PropTypes.string.isRequired, // 'influx-enterprise'
+      username: PropTypes.string.isRequired,
+      links: PropTypes.shape({
+        kapacitors: PropTypes.string.isRequired,
+      }).isRequired,
+    }).isRequired,
+    addFlashMessage: PropTypes.func,
+  },
+
+  getInitialState() {
+    return {
+      rules: [],
+    };
+  },
+
+  componentDidMount() {
+    getKapacitor(this.props.source).then((kapacitor) => {
+      getRules(kapacitor).then(({data: {rules}}) => {
+        this.setState({rules});
+      });
+    });
+  },
+
+  render() {
+    const {rules} = this.state;
+    const {source} = this.props;
+
+    return (
+      <div className="kapacitor-rules-page">
+        <div className="enterprise-header">
+          <div className="enterprise-header__container">
+            <div className="enterprise-header__left">
+              <h1>Kapacitor Rules</h1>
+            </div>
+          </div>
+        </div>
+        <div className="container-fluid">
+          <div className="panel panel-minimal">
+            <div className="panel-heading u-flex u-ai-center u-jc-space-between">
+              <h2 className="panel-title">Alert Rules</h2>
+            </div>
+            <div className="panel-body">
+              <table className="table v-center">
+                <thead>
+                  <tr>
+                    <th>Name</th>
+                    <th>Trigger</th>
+                    <th>Message</th>
+                    <th>Alerts</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {
+                    rules.map((rule) => {
+                      return (
+                        <tr key={rule.id}>
+                          <td className="monotype"><Link to={`/sources/${source.id}/alert-rules/${rule.id}`}>{rule.name}</Link></td>
+                          <td className="monotype">{rule.trigger}</td>
+                          <td className="monotype">{rule.message}</td>
+                          <td className="monotype">{rule.alerts.join(', ')}</td>
+                        </tr>
+                        );
+                    })
+                  }
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  },
+});
+
+export default KapacitorRulesPage;

ui/src/kapacitor/index.js

@@ -1,4 +1,5 @@
 import KapacitorPage from './containers/KapacitorPage';
 import KapacitorRulePage from './containers/KapacitorRulePage';
+import KapacitorRulesPage from './containers/KapacitorRulesPage';
 import KapacitorTasksPage from './containers/KapacitorTasksPage';
-export {KapacitorPage, KapacitorRulePage, KapacitorTasksPage};
+export {KapacitorPage, KapacitorRulePage, KapacitorRulesPage, KapacitorTasksPage};

ui/src/style/enterprise_style/hosts.scss

@@ -2,6 +2,7 @@
     Hosts Dashboard
     ----------------------------------------------
 */
+.kapacitor-rules-page,
 .hosts-page {
   position: absolute;
   top: 0;
@@ -44,7 +45,7 @@
   .enterprise-header {
     background-color: $g0-obsidian;
   }
-  
+
   .panel-minimal {
     border: 0;