Add a TICKscript table to alert rules page

ui/src/kapacitor/components/KapacitorRules.js

@@ -4,6 +4,7 @@ import {Link} from 'react-router'
 import NoKapacitorError from 'shared/components/NoKapacitorError'
 import SourceIndicator from 'shared/components/SourceIndicator'
 import KapacitorRulesTable from 'src/kapacitor/components/KapacitorRulesTable'
+import TasksTable from 'src/kapacitor/components/TasksTable'
 import FancyScrollbar from 'shared/components/FancyScrollbar'
 
 const KapacitorRules = ({
@@ -40,13 +41,17 @@ const KapacitorRules = ({
     )
   }
 
-  const tableHeader =
-    rules.length === 1 ? '1 Alert Rule' : `${rules.length} Alert Rules`
+  const rulez = rules.filter(r => r.query)
+  const tasks = rules.filter(r => !r.query)
+
+  const rHeader = `${rulez.length} Alert Rule${rulez.length === 1 ? '' : 's'}`
+  const tHeader = `${tasks.length} TICKscript${tasks.length === 1 ? '' : 's'}`
+
   return (
     <PageContents source={source}>
       <div className="panel-heading u-flex u-ai-center u-jc-space-between">
         <h2 className="panel-title">
-          {tableHeader}
+          {rHeader}
         </h2>
         <div className="u-flex u-ai-center u-jc-space-between">
           <Link
@@ -56,20 +61,40 @@ const KapacitorRules = ({
           >
             Build Rule
           </Link>
-          <Link
-            to={`/sources/${source.id}/tickscript/new`}
-            className="btn btn-sm btn-info"
-          >
-            Write TICKscript
-          </Link>
         </div>
       </div>
       <KapacitorRulesTable
         source={source}
-        rules={rules}
+        rules={rulez}
         onDelete={onDelete}
         onChangeRuleStatus={onChangeRuleStatus}
       />
+
+      <div className="row">
+        <div className="col-md-12">
+          <div className="panel panel-minimal">
+            <div className="panel-heading u-flex u-ai-center u-jc-space-between">
+              <h2 className="panel-title">
+                {tHeader}
+              </h2>
+              <div className="u-flex u-ai-center u-jc-space-between">
+                <Link
+                  to={`/sources/${source.id}/tickscript/new`}
+                  className="btn btn-sm btn-info"
+                >
+                  Write TICKscript
+                </Link>
+              </div>
+            </div>
+            <TasksTable
+              source={source}
+              tasks={tasks}
+              onDelete={onDelete}
+              onChangeRuleStatus={onChangeRuleStatus}
+            />
+          </div>
+        </div>
+      </div>
     </PageContents>
   )
 }

ui/src/kapacitor/components/KapacitorRulesTable.js

@@ -5,7 +5,7 @@ import _ from 'lodash'
 import {KAPACITOR_RULES_TABLE} from 'src/kapacitor/constants/tableSizing'
 const {
   colName,
-  colType,
+  colTrigger,
   colMessage,
   colAlerts,
   colEnabled,
@@ -18,7 +18,7 @@ const KapacitorRulesTable = ({rules, source, onDelete, onChangeRuleStatus}) =>
       <thead>
         <tr>
           <th style={{width: colName}}>Name</th>
-          <th style={{width: colType}}>Rule Type</th>
+          <th style={{width: colTrigger}}>Rule Trigger</th>
           <th style={{width: colMessage}}>Message</th>
           <th style={{width: colAlerts}}>Alerts</th>
           <th style={{width: colEnabled}} className="text-center">
@@ -50,7 +50,7 @@ const RuleRow = ({rule, source, onDelete, onChangeRuleStatus}) =>
     <td style={{width: colName}} className="monotype">
       <RuleTitle rule={rule} source={source} />
     </td>
-    <td style={{width: colType}} className="monotype">
+    <td style={{width: colTrigger}} className="monotype">
       {rule.trigger}
     </td>
     <td className="monotype">

ui/src/kapacitor/components/TasksTable.js

@@ -0,0 +1,96 @@
+import React, {PropTypes} from 'react'
+import {Link} from 'react-router'
+import _ from 'lodash'
+
+import {TASKS_TABLE} from 'src/kapacitor/constants/tableSizing'
+
+const {colID, colType, colEnabled, colActions} = TASKS_TABLE
+
+const TasksTable = ({tasks, source, onDelete, onChangeRuleStatus}) =>
+  <div className="panel-body">
+    <table className="table v-center">
+      <thead>
+        <tr>
+          <th style={{width: colID}}>ID</th>
+          <th style={{width: colType}}>Type</th>
+          <th style={{width: colEnabled}} className="text-center">
+            Enabled
+          </th>
+          <th style={{width: colActions}} />
+        </tr>
+      </thead>
+      <tbody>
+        {_.sortBy(tasks, t => t.name.toLowerCase()).map(task => {
+          return (
+            <TaskRow
+              key={task.id}
+              task={task}
+              source={source}
+              onDelete={onDelete}
+              onChangeRuleStatus={onChangeRuleStatus}
+            />
+          )
+        })}
+      </tbody>
+    </table>
+  </div>
+
+const handleDelete = (task, onDelete) => onDelete(task)
+
+const TaskRow = ({task, source, onDelete, onChangeRuleStatus}) =>
+  <tr key={task.id}>
+    <td style={{width: colID}} className="monotype">
+      <i>
+        {task.id}
+      </i>
+    </td>
+    <td style={{width: colType}} className="monotype">
+      {task.type}
+    </td>
+    <td style={{width: colEnabled}} className="monotype text-center">
+      <div className="dark-checkbox">
+        <input
+          id={`kapacitor-enabled ${task.id}`}
+          className="form-control-static"
+          type="checkbox"
+          defaultChecked={task.status === 'enabled'}
+          onClick={onChangeRuleStatus(task)}
+        />
+        <label htmlFor={`kapacitor-enabled ${task.id}`} />
+      </div>
+    </td>
+    <td style={{width: colActions}} className="text-right table-cell-nowrap">
+      <Link
+        className="btn btn-info btn-xs"
+        to={`/sources/${source.id}/tickscript/${task.id}`}
+      >
+        Edit TICKscript
+      </Link>
+      <button
+        className="btn btn-danger btn-xs"
+        onClick={handleDelete(task, onDelete)}
+      >
+        Delete
+      </button>
+    </td>
+  </tr>
+
+const {arrayOf, func, shape, string} = PropTypes
+
+TasksTable.propTypes = {
+  tasks: arrayOf(shape()),
+  onChangeRuleStatus: func,
+  onDelete: func,
+  source: shape({
+    id: string.isRequired,
+  }).isRequired,
+}
+
+TaskRow.propTypes = {
+  task: shape(),
+  source: shape(),
+  onChangeRuleStatus: func,
+  onDelete: func,
+}
+
+export default TasksTable

ui/src/kapacitor/components/TickscriptHeader.js

@@ -34,7 +34,7 @@ const TickscriptHeader = ({
         />
         <button
           className="btn btn-success btn-sm"
-          title={id ? '' : 'Name your Tickscript to save'}
+          title={id ? '' : 'ID your TICKscript to save'}
           onClick={onSave}
           disabled={!id}
         >

ui/src/kapacitor/components/TickscriptID.js

@@ -14,7 +14,7 @@ class TickscriptID extends Component {
         autoFocus={true}
         value={id}
         onChange={onChangeID}
-        placeholder="Name your tickscript"
+        placeholder="ID your TICKscript"
         spellCheck={false}
         autoComplete={false}
       />
@@ -24,7 +24,7 @@ class TickscriptID extends Component {
 
 export const TickscriptStaticID = ({id}) =>
   <h1
-    className="page-header__title page-header kapacitor-theme"
+    className="page-header--editing kapacitor-theme"
     style={{display: 'flex', justifyContent: 'baseline'}}
   >
     {id}

ui/src/kapacitor/constants/tableSizing.js

@@ -1,8 +1,15 @@
 export const KAPACITOR_RULES_TABLE = {
   colName: '200px',
-  colType: '90px',
+  colTrigger: '90px',
   colMessage: '460px',
   colAlerts: '120px',
   colEnabled: '64px',
   colActions: '176px',
 }
+
+export const TASKS_TABLE = {
+  colID: '200px',
+  colType: '90px',
+  colEnabled: '64px',
+  colActions: '176px',
+}