Add details text field and details change handling function on email handler

ui/src/kapacitor/components/HandlerInput.js

@@ -1,4 +1,5 @@
 import React, {PropTypes} from 'react'
+import _ from 'lodash'
 
 const HandlerInput = ({
   fieldName,

ui/src/kapacitor/components/HandlerOptions.js

@@ -23,7 +23,13 @@ class HandlerOptions extends Component {
   }
 
   render() {
-    const {selectedHandler, handleModifyHandler, configLink} = this.props
+    const {
+      selectedHandler,
+      handleModifyHandler,
+      configLink,
+      rule,
+      updateDetails,
+    } = this.props
     switch (selectedHandler && selectedHandler.type) {
       case 'post':
         return (
@@ -63,6 +69,8 @@ class HandlerOptions extends Component {
             selectedHandler={selectedHandler}
             handleModifyHandler={handleModifyHandler}
             configLink={configLink}
+            updateDetails={updateDetails}
+            rule={rule}
           />
         )
       case 'alerta':
@@ -157,6 +165,8 @@ HandlerOptions.propTypes = {
   selectedHandler: shape({}).isRequired,
   handleModifyHandler: func.isRequired,
   configLink: string,
+  updateDetails: func,
+  rule: shape({}),
 }
 
 export default HandlerOptions

ui/src/kapacitor/components/KapacitorRule.js

@@ -183,10 +183,10 @@ class KapacitorRule extends Component {
                   <RuleHandlers
                     configLink={configLink}
                     rule={rule}
-                    actions={ruleActions}
+                    ruleActions={ruleActions}
                     handlersFromConfig={handlersFromConfig}
                   />
-                  <RuleMessage rule={rule} actions={ruleActions} />
+                  <RuleMessage rule={rule} ruleActions={ruleActions} />
                 </div>
               </div>
             </div>

ui/src/kapacitor/components/RuleDetailsText.js

@@ -0,0 +1,36 @@
+import React, {Component, PropTypes} from 'react'
+
+class RuleDetailsText extends Component {
+  constructor(props) {
+    super(props)
+  }
+
+  handleUpdateDetails = e => {
+    const {rule, updateDetails} = this.props
+    updateDetails(rule.id, e.target.value)
+  }
+
+  render() {
+    const {rule} = this.props
+    return (
+      <div className="rule-builder--message">
+        <textarea
+          className="form-control form-malachite monotype"
+          onChange={this.handleUpdateDetails}
+          placeholder="Enter the body for your email here. Can contain html"
+          value={rule.details}
+          spellCheck={false}
+        />
+      </div>
+    )
+  }
+}
+
+const {shape, func} = PropTypes
+
+RuleDetailsText.propTypes = {
+  rule: shape().isRequired,
+  updateDetails: func.isRequired,
+}
+
+export default RuleDetailsText

ui/src/kapacitor/components/RuleHandlers.js

@@ -25,8 +25,8 @@ class RuleHandlers extends Component {
   }
 
   handleChangeMessage = e => {
-    const {actions, rule} = this.props
-    actions.updateMessage(rule.id, e.target.value)
+    const {ruleActions, rule} = this.props
+    ruleActions.updateMessage(rule.id, e.target.value)
   }
 
   handleChooseHandler = ep => () => {
@@ -79,10 +79,10 @@ class RuleHandlers extends Component {
   }
 
   handleUpdateAllAlerts = () => {
-    const {rule, actions} = this.props
+    const {rule, ruleActions} = this.props
     const {handlersOnThisAlert} = this.state
 
-    actions.updateAlertNodes(rule.id, handlersOnThisAlert)
+    ruleActions.updateAlertNodes(rule.id, handlersOnThisAlert)
   }
 
   handleModifyHandler = (selectedHandler, fieldName, parseToArray) => e => {
@@ -123,7 +123,7 @@ class RuleHandlers extends Component {
   }
 
   render() {
-    const {handlersFromConfig, configLink} = this.props
+    const {handlersFromConfig, configLink, rule, ruleActions} = this.props
     const {handlersOnThisAlert, selectedHandler} = this.state
     const alerts = _.map([...DEFAULT_HANDLERS, ...handlersFromConfig], a => {
       return {...a, text: a.type}
@@ -162,6 +162,8 @@ class RuleHandlers extends Component {
                   configLink={configLink}
                   selectedHandler={selectedHandler}
                   handleModifyHandler={this.handleModifyHandler}
+                  updateDetails={ruleActions.updateDetails}
+                  rule={rule}
                 />
               </div>
             : null}
@@ -175,7 +177,7 @@ const {arrayOf, func, shape, string} = PropTypes
 
 RuleHandlers.propTypes = {
   rule: shape({}).isRequired,
-  actions: shape({
+  ruleActions: shape({
     updateAlertNodes: func.isRequired,
     updateMessage: func.isRequired,
     updateDetails: func.isRequired,

ui/src/kapacitor/components/RuleMessage.js

@@ -9,12 +9,12 @@ class RuleMessage extends Component {
   }
 
   handleChangeMessage = e => {
-    const {actions, rule} = this.props
-    actions.updateMessage(rule.id, e.target.value)
+    const {ruleActions, rule} = this.props
+    ruleActions.updateMessage(rule.id, e.target.value)
   }
 
   render() {
-    const {rule, actions} = this.props
+    const {rule, ruleActions} = this.props
 
     return (
       <div className="rule-section">
@@ -26,7 +26,7 @@ class RuleMessage extends Component {
           />
           <RuleMessageTemplates
             rule={rule}
-            updateMessage={actions.updateMessage}
+            updateMessage={ruleActions.updateMessage}
           />
         </div>
       </div>
@@ -38,7 +38,7 @@ const {func, shape} = PropTypes
 
 RuleMessage.propTypes = {
   rule: shape().isRequired,
-  actions: shape({
+  ruleActions: shape({
     updateMessage: func.isRequired,
   }).isRequired,
 }

ui/src/kapacitor/components/handlers/EmailHandler.js

@@ -1,8 +1,15 @@
 import React, {PropTypes} from 'react'
 import HandlerInput from 'src/kapacitor/components/HandlerInput'
 import HandlerEmpty from 'src/kapacitor/components/HandlerEmpty'
+import RuleDetailsText from 'src/kapacitor/components/RuleDetailsText'
 
-const EmailHandler = ({selectedHandler, handleModifyHandler, configLink}) => {
+const EmailHandler = ({
+  rule,
+  updateDetails,
+  selectedHandler,
+  handleModifyHandler,
+  configLink,
+}) => {
   return selectedHandler.enabled
     ? <div className="endpoint-tab-contents">
         <div className="endpoint-tab--parameters">
@@ -46,6 +53,7 @@ const EmailHandler = ({selectedHandler, handleModifyHandler, configLink}) => {
             parseToArray={true}
             fieldColumns="col-md-12"
           />
+          <RuleDetailsText rule={rule} updateDetails={updateDetails} />
         </div>
       </div>
     : <HandlerEmpty configLink={configLink} />
@@ -57,6 +65,8 @@ EmailHandler.propTypes = {
   selectedHandler: shape({}).isRequired,
   handleModifyHandler: func.isRequired,
   configLink: string,
+  updateDetails: func,
+  rule: shape({}),
 }
 
 export default EmailHandler

ui/src/shared/parsing/parseHandlersFromRule.js

@@ -17,6 +17,7 @@ export const getHandlersFromRule = rule => {
           ...alertOptions,
           alias: alertKind + count,
           type: alertKind,
+          enabled: true,
         }
         handlersOnThisAlert.push(ep)
       })