Change rule status

ui/spec/kapacitor/reducers/rulesSpec.js

@@ -9,6 +9,7 @@ import {
   updateAlerts,
   updateRuleName,
   deleteRuleSuccess,
+  updateRuleStatusSuccess,
 } from 'src/kapacitor/actions/view';
 
 describe('Kapacitor.Reducers.rules', () => {
@@ -134,4 +135,20 @@ describe('Kapacitor.Reducers.rules', () => {
     const newState = reducer(initialState, updateDetails(ruleID, details));
     expect(newState[ruleID].details).to.equal(details);
   });
+
+  it('can update status', () => {
+    const ruleID = 1;
+    const status = 'enabled';
+
+    const initialState = {
+      [ruleID]: {
+        id: ruleID,
+        queryID: 988,
+        status: 'disabled',
+      }
+    };
+
+    const newState = reducer(initialState, updateRuleStatusSuccess(ruleID, status));
+    expect(newState[ruleID].status).to.equal(status);
+  });
 });

ui/src/kapacitor/actions/view/index.js

@@ -1,7 +1,12 @@
 import uuid from 'node-uuid';
-import {getRules, getRule, deleteRule as deleteRuleAPI} from 'src/kapacitor/apis';
 import {getKapacitor} from 'src/shared/apis';
 import {publishNotification} from 'src/shared/actions/notifications';
+import {
+  getRules,
+  getRule,
+  deleteRule as deleteRuleAPI,
+  updateRuleStatus as updateRuleStatusAPI,
+} from 'src/kapacitor/apis';
 
 export function fetchRule(source, ruleID) {
   return (dispatch) => {
@@ -126,6 +131,16 @@ export function deleteRuleSuccess(ruleID) {
   };
 }
 
+export function updateRuleStatusSuccess(ruleID, status) {
+  return {
+    type: 'UPDATE_RULE_STATUS_SUCCESS',
+    payload: {
+      ruleID,
+      status,
+    },
+  };
+}
+
 export function deleteRule(rule) {
   return (dispatch) => {
     deleteRuleAPI(rule).then(() => {
@@ -136,3 +151,15 @@ export function deleteRule(rule) {
     });
   };
 }
+
+export function updateRuleStatus(rule, {status}) {
+  return (dispatch) => {
+    updateRuleStatusAPI(rule, status).then(() => {
+      dispatch(updateRuleStatusSuccess(rule.id, status));
+      dispatch(publishNotification('success', `${rule.name} ${status} successfully`));
+    }).catch(() => {
+      dispatch(updateRuleStatusSuccess(rule.id, status));
+      dispatch(publishNotification('error', `${rule.name} could not be ${status}`));
+    });
+  };
+}

ui/src/kapacitor/apis/index.js

@@ -47,3 +47,11 @@ export function deleteRule(rule) {
     url: rule.links.self,
   });
 }
+
+export function updateRuleStatus(rule, status) {
+  return AJAX({
+    method: 'PATCH',
+    url: rule.links.self,
+    data: {status},
+  });
+}

ui/src/kapacitor/containers/KapacitorRulesPage.js

@@ -6,27 +6,35 @@ import {getKapacitor} from 'src/shared/apis';
 import * as kapacitorActionCreators from '../actions/view';
 import NoKapacitorError from '../../shared/components/NoKapacitorError';
 
+const {
+  arrayOf,
+  func,
+  shape,
+  string,
+} = PropTypes;
+
 export const KapacitorRulesPage = React.createClass({
   propTypes: {
-    source: PropTypes.shape({
-      id: PropTypes.string.isRequired,
-      links: PropTypes.shape({
-        proxy: PropTypes.string.isRequired,
-        self: PropTypes.string.isRequired,
-        kapacitors: PropTypes.string.isRequired,
+    source: shape({
+      id: string.isRequired,
+      links: shape({
+        proxy: string.isRequired,
+        self: string.isRequired,
+        kapacitors: string.isRequired,
       }),
     }),
-    rules: PropTypes.arrayOf(PropTypes.shape({
-      name: PropTypes.string.isRequired,
-      trigger: PropTypes.string.isRequired,
-      message: PropTypes.string.isRequired,
-      alerts: PropTypes.arrayOf(PropTypes.string.isRequired).isRequired,
+    rules: arrayOf(shape({
+      name: string.isRequired,
+      trigger: string.isRequired,
+      message: string.isRequired,
+      alerts: arrayOf(string.isRequired).isRequired,
     })).isRequired,
-    actions: PropTypes.shape({
-      fetchRules: PropTypes.func.isRequired,
-      deleteRule: PropTypes.func.isRequired,
+    actions: shape({
+      fetchRules: func.isRequired,
+      deleteRule: func.isRequired,
+      updateRuleStatus: func.isRequired,
     }).isRequired,
-    addFlashMessage: PropTypes.func,
+    addFlashMessage: func,
   },
 
   getInitialState() {
@@ -50,6 +58,11 @@ export const KapacitorRulesPage = React.createClass({
     actions.deleteRule(rule);
   },
 
+  handleRuleStatus(e, rule) {
+    const status = e.target.checked ? 'enabled' : 'disabled';
+    this.props.actions.updateRuleStatus(rule, {status});
+  },
+
   renderSubComponent() {
     const {source} = this.props;
     const {hasKapacitor, loading} = this.state;
@@ -72,6 +85,7 @@ export const KapacitorRulesPage = React.createClass({
                   <th>Trigger</th>
                   <th>Message</th>
                   <th>Alerts</th>
+                  <th>Enabled</th>
                   <th></th>
                 </tr>
               </thead>
@@ -129,6 +143,9 @@ export const KapacitorRulesPage = React.createClass({
           <td className="monotype">{rule.trigger}</td>
           <td className="monotype">{rule.message}</td>
           <td className="monotype">{rule.alerts.join(', ')}</td>
+          <td className="monotype">
+            <input className="form-control-static" type="checkbox" ref={(r) => this.enabled = r} checked={rule.status === "enabled"} onClick={(e) => this.handleRuleStatus(e, rule)} />
+          </td>
           <td className="text-right"><button className="btn btn-danger btn-xs" onClick={() => this.handleDeleteRule(rule)}>Delete</button></td>
         </tr>
       );

ui/src/kapacitor/reducers/rules.js

@@ -93,6 +93,14 @@ export default function rules(state = {}, action) {
         [ruleID]: {...state[ruleID], details},
       }};
     }
+
+    case 'UPDATE_RULE_STATUS_SUCCESS': {
+      const {ruleID, status} = action.payload;
+
+      return {...state, ...{
+        [ruleID]: {...state[ruleID], status},
+      }};
+    }
   }
   return state;
 }