From a98a533f93d44d9ea90fd6c4f8cf24d48b78f1ca Mon Sep 17 00:00:00 2001
From: Will Piers <willpiers@influxdb.com>
Date: Fri, 4 Nov 2016 13:51:09 -0700
Subject: [PATCH] Make index page for Kapacitor Rules

---
 ui/src/index.js                               |  5 +-
 ui/src/kapacitor/apis/index.js                |  7 ++
 .../kapacitor/containers/KapacitorRulePage.js |  4 +-
 .../containers/KapacitorRulesPage.js          | 85 +++++++++++++++++++
 ui/src/kapacitor/index.js                     |  3 +-
 ui/src/style/enterprise_style/hosts.scss      |  3 +-
 6 files changed, 101 insertions(+), 6 deletions(-)
 create mode 100644 ui/src/kapacitor/containers/KapacitorRulesPage.js

diff --git a/ui/src/index.js b/ui/src/index.js
index 86847d93e4..fd1ba732fa 100644
--- a/ui/src/index.js
+++ b/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} />
diff --git a/ui/src/kapacitor/apis/index.js b/ui/src/kapacitor/apis/index.js
index b255d35078..3b68e95c35 100644
--- a/ui/src/kapacitor/apis/index.js
+++ b/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,
+  });
+}
diff --git a/ui/src/kapacitor/containers/KapacitorRulePage.js b/ui/src/kapacitor/containers/KapacitorRulePage.js
index 8a14f68d4e..07ca5d9495 100644
--- a/ui/src/kapacitor/containers/KapacitorRulePage.js
+++ b/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 {
diff --git a/ui/src/kapacitor/containers/KapacitorRulesPage.js b/ui/src/kapacitor/containers/KapacitorRulesPage.js
new file mode 100644
index 0000000000..ebe6a11c2c
--- /dev/null
+++ b/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;
diff --git a/ui/src/kapacitor/index.js b/ui/src/kapacitor/index.js
index 83ab33f638..df1d345df8 100644
--- a/ui/src/kapacitor/index.js
+++ b/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};
diff --git a/ui/src/style/enterprise_style/hosts.scss b/ui/src/style/enterprise_style/hosts.scss
index 32230f15c2..0eca2f5448 100644
--- a/ui/src/style/enterprise_style/hosts.scss
+++ b/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;