Update RuleMessageOptions

ui/src/kapacitor/components/RuleMessageOptions.js

@@ -8,11 +8,12 @@ import {
 class RuleMessageOptions extends Component {
   constructor(props) {
     super(props)
-
-    this.getAlertPropertyValue = ::this.getAlertPropertyValue
   }
 
-  getAlertPropertyValue(properties, name) {
+  getAlertPropertyValue = name => {
+    const {rule} = this.props
+    const {properties} = rule.alertNodes[0]
+
     if (properties) {
       const alertNodeProperty = properties.find(
         property => property.name === name
@@ -24,14 +25,26 @@ class RuleMessageOptions extends Component {
     return ''
   }
 
+  handleUpdateDetails = e => {
+    const {updateDetails, rule} = this.props
+    updateDetails(rule.id, e.target.value)
+  }
+
+  handleUpdateAlertNodes = e => {
+    const {updateAlertNodes, alertNodeName, rule} = this.props
+    updateAlertNodes(rule.id, alertNodeName, e.target.value)
+  }
+
+  handleUpdateAlertProperty = propertyName => e => {
+    const {updateAlertProperty, alertNodeName, rule} = this.props
+    updateAlertProperty(rule.id, alertNodeName, {
+      name: propertyName,
+      args: [e.target.value],
+    })
+  }
+
   render() {
-    const {
-      rule,
-      alertNodeName,
-      updateAlertNodes,
-      updateDetails,
-      updateAlertProperty,
-    } = this.props
+    const {rule, alertNodeName} = this.props
     const {args, details, properties} = RULE_ALERT_OPTIONS[alertNodeName]
 
     return (
@@ -47,8 +60,7 @@ class RuleMessageOptions extends Component {
                 style={{flex: '1 0 0%'}}
                 type="text"
                 placeholder={args.placeholder}
-                onChange={e =>
-                  updateAlertNodes(rule.id, alertNodeName, e.target.value)}
+                onChange={this.handleUpdateAlertNodes}
                 value={ALERT_NODES_ACCESSORS[alertNodeName](rule)}
                 autoComplete="off"
                 spellCheck="false"
@@ -87,15 +99,8 @@ class RuleMessageOptions extends Component {
                         }}
                         type="text"
                         placeholder={placeholder}
-                        onChange={e =>
-                          updateAlertProperty(rule.id, alertNodeName, {
-                            name: propertyName,
-                            args: [e.target.value],
-                          })}
-                        value={this.getAlertPropertyValue(
-                          rule.alertNodes[0].properties,
-                          propertyName
-                        )}
+                        onChange={this.handleUpdateAlertProperty(propertyName)}
+                        value={this.getAlertPropertyValue(propertyName)}
                         autoComplete="off"
                         spellCheck="false"
                       />
@@ -110,8 +115,7 @@ class RuleMessageOptions extends Component {
               <textarea
                 className="form-control form-malachite monotype rule-builder--message"
                 placeholder={details.placeholder ? details.placeholder : ''}
-                ref={r => (this.details = r)}
-                onChange={() => updateDetails(rule.id, this.details.value)}
+                onChange={this.handleUpdateDetails}
                 value={rule.details}
                 spellCheck={false}
               />