Add kapacitor rule message to state

ui/spec/kapacitor/reducers/rulesSpec.js

@@ -4,6 +4,7 @@ import {defaultRuleConfigs} from 'src/kapacitor/constants';
 import {
   chooseTrigger,
   updateRuleValues,
+  updateMessage,
 } from 'src/kapacitor/actions/view';
 
 describe('Kapacitor.Reducers.rules', () => {
@@ -50,4 +51,19 @@ describe('Kapacitor.Reducers.rules', () => {
     expect(finalState[ruleID].trigger).to.equal('relative');
     expect(finalState[ruleID].values).to.equal(newRelativeValues);
   });
+
+  it('can update the message', () => {
+    const ruleID = 1;
+    const initialState = {
+      [ruleID]: {
+        id: ruleID,
+        queryID: 988,
+        message: '',
+      }
+    };
+
+    const message = 'im a kapacitor rule message';
+    const newState = reducer(initialState, updateMessage(ruleID, message));
+    expect(newState[ruleID].message).to.equal(message);
+  });
 });

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

@@ -58,3 +58,13 @@ export function updateRuleValues(ruleID, trigger, values) {
     },
   };
 }
+
+export function updateMessage(ruleID, message) {
+  return {
+    type: 'UPDATE_RULE_MESSAGE',
+    payload: {
+      ruleID,
+      message,
+    },
+  };
+}

ui/src/kapacitor/components/ValuesSection.js

@@ -79,7 +79,8 @@ const Threshold = React.createClass({
   },
 
   handleDropdownChange(item) {
-    this.props.onChange(Object.assign({}, this.props.rule.values, {[item.type]: item.text}));
+    const newValues = Object.assign({}, this.props.rule.values, {[item.type]: item.text});
+    this.props.onChange(newValues);
   },
 
   handleInputChange() {

ui/src/kapacitor/containers/KapacitorRulePage.js

@@ -21,6 +21,7 @@ export const KapacitorRulePage = React.createClass({
       fetchRule: PropTypes.func.isRequired,
       chooseTrigger: PropTypes.func.isRequired,
       updateRuleValues: PropTypes.func.isRequired,
+      updateMessage: PropTypes.func.isRequired,
     }).isRequired,
     queryActions: PropTypes.shape({}).isRequired,
     params: PropTypes.shape({
@@ -37,6 +38,10 @@ export const KapacitorRulePage = React.createClass({
     }
   },
 
+  handleSave() {
+    console.log(this.props.rules); // eslint-disable-line no-console
+  },
+
   render() {
     const rule = this.props.rules[Object.keys(this.props.rules)[0]]; // this.props.params.taskID
     const query = rule && this.props.queryConfigs[rule.queryID];
@@ -52,6 +57,9 @@ export const KapacitorRulePage = React.createClass({
             <div className="enterprise-header__left">
               <h1>Kapacitor Rules</h1>
             </div>
+            <div className="enterprise-header__right">
+              <button className="btn btn-primary btn-sm" onClick={this.handleSave}>Save</button>
+            </div>
           </div>
         </div>
         <div className="container-fluid">
@@ -67,7 +75,7 @@ export const KapacitorRulePage = React.createClass({
           </div>
           <div className="row">
             <div className="col-md-12">
-              {this.renderMessageSection()}
+              {this.renderMessageSection(rule)}
             </div>
           </div>
           <div className="row">
@@ -99,11 +107,11 @@ export const KapacitorRulePage = React.createClass({
     );
   },
 
-  renderMessageSection() {
+  renderMessageSection(rule) {
     return (
       <div className="kapacitor-rule-section">
         <h3>Message</h3>
-        <textarea />
+        <textarea ref={(r) => this.message = r} onChange={() => this.handleMessageChange(rule)} />
       </div>
     );
   },
@@ -120,6 +128,10 @@ export const KapacitorRulePage = React.createClass({
       </div>
     );
   },
+
+  handleMessageChange(rule) {
+    this.props.kapacitorActions.updateMessage(rule.id, this.message.value);
+  },
 });
 
 function mapStateToProps(state) {

ui/src/kapacitor/reducers/rules.js

@@ -10,6 +10,7 @@ export default function rules(state = {}, action) {
           queryID,
           trigger: 'threshold',
           values: defaultRuleConfigs.threshold,
+          message: '',
         },
       });
     }
@@ -41,6 +42,15 @@ export default function rules(state = {}, action) {
         }),
       });
     }
+
+    case 'UPDATE_RULE_MESSAGE': {
+      const {ruleID, message} = action.payload;
+      return Object.assign({}, state, {
+        [ruleID]: Object.assign({}, state[ruleID], {
+          message,
+        }),
+      });
+    }
   }
   return state;
 }