Transform selectedAlertName to selectedAlert object with name and kind properties

ui/src/kapacitor/components/RuleMessage.js

@@ -15,7 +15,7 @@ class RuleMessage extends Component {
     super(props)
 
     this.state = {
-      selectedAlertNodeName: null,
+      selectedAlertNode: null,
       endpointsOnThisAlert: [],
       endpointsOfKind: {},
     }
@@ -30,7 +30,7 @@ class RuleMessage extends Component {
     const {actions} = this.props
     actions.updateAlerts(item.ruleID, [item.text]) // TODO: this seems to be doing a lot more than it needs to.
     actions.updateAlertNodes(item.ruleID, item.text, '')
-    this.setState({selectedAlertNodeName: item.text})
+    this.setState({selectedAlertNode: {name: item.text, kind: item.kind}})
   }
 
   handleAddNewAlertEndpoint = selectedItem => {
@@ -56,7 +56,7 @@ class RuleMessage extends Component {
 
   render() {
     const {rule, actions, enabledAlerts} = this.props
-    const {endpointsOnThisAlert} = this.state
+    const {endpointsOnThisAlert, selectedAlertNode} = this.state
     const defaultAlertEndpoints = DEFAULT_ALERTS.map(text => {
       return {text, kind: text, ruleID: rule.id}
     })
@@ -68,7 +68,7 @@ class RuleMessage extends Component {
       }),
     ]
 
-    const selectedAlertNodeName = rule.alerts[0] || alerts[0].text
+    // const selectedAlertNode = rule.alerts[0] || alerts[0].text
 
     return (
       <div className="rule-section">
@@ -86,7 +86,9 @@ class RuleMessage extends Component {
                       <li
                         key={uuid.v4()}
                         className={classnames({
-                          active: alert.text === selectedAlertNodeName,
+                          active:
+                            alert.text ===
+                            (selectedAlertNode && selectedAlertNode.text),
                         })}
                         onClick={this.handleChooseAlert(alert)}
                       >
@@ -104,21 +106,27 @@ class RuleMessage extends Component {
               className="dropdown-140 rule-message--add-endpoint"
             />
           </div>
-          <RuleMessageOptions
-            rule={rule}
-            alertNodeName={selectedAlertNodeName}
-            updateAlertNodes={actions.updateAlertNodes}
-            updateDetails={actions.updateDetails}
-            updateAlertProperty={actions.updateAlertProperty}
-          />
-          <RuleMessageText
-            rule={rule}
-            updateMessage={this.handleChangeMessage}
-          />
-          <RuleMessageTemplates
-            rule={rule}
-            updateMessage={actions.updateMessage}
-          />
+          {selectedAlertNode
+            ? <div>
+                <RuleMessageOptions
+                  rule={rule}
+                  alertNode={selectedAlertNode}
+                  updateAlertNodes={actions.updateAlertNodes}
+                  updateDetails={actions.updateDetails}
+                  updateAlertProperty={actions.updateAlertProperty}
+                />
+                <RuleMessageText
+                  rule={rule}
+                  updateMessage={this.handleChangeMessage}
+                  alertNodeName={selectedAlertNode}
+                />
+                <RuleMessageTemplates
+                  rule={rule}
+                  updateMessage={actions.updateMessage}
+                  alertNodeName={selectedAlertNode}
+                />
+              </div>
+            : null}
         </div>
       </div>
     )

ui/src/kapacitor/components/RuleMessageOptions.js

@@ -31,21 +31,21 @@ class RuleMessageOptions extends Component {
   }
 
   handleUpdateAlertNodes = e => {
-    const {updateAlertNodes, alertNodeName, rule} = this.props
-    updateAlertNodes(rule.id, alertNodeName, e.target.value)
+    const {updateAlertNodes, alertNode, rule} = this.props
+    updateAlertNodes(rule.id, alertNode, e.target.value)
   }
 
   handleUpdateAlertProperty = propertyName => e => {
-    const {updateAlertProperty, alertNodeName, rule} = this.props
-    updateAlertProperty(rule.id, alertNodeName, {
+    const {updateAlertProperty, alertNode, rule} = this.props
+    updateAlertProperty(rule.id, alertNode, {
       name: propertyName,
       args: [e.target.value],
     })
   }
 
   render() {
-    const {rule, alertNodeName} = this.props
-    const {args, details, properties} = RULE_ALERT_OPTIONS[alertNodeName]
+    const {rule, alertNode} = this.props
+    const {args, details, properties} = RULE_ALERT_OPTIONS[alertNode.kind]
 
     return (
       <div>
@@ -61,7 +61,7 @@ class RuleMessageOptions extends Component {
                     type="text"
                     placeholder={args.placeholder}
                     onChange={this.handleUpdateAlertNodes}
-                    value={ALERT_NODES_ACCESSORS[alertNodeName](rule)}
+                    value={ALERT_NODES_ACCESSORS[alertNode.kind](rule)}
                     autoComplete="off"
                     spellCheck="false"
                   />
@@ -112,11 +112,11 @@ class RuleMessageOptions extends Component {
   }
 }
 
-const {func, shape, string} = PropTypes
+const {func, shape} = PropTypes
 
 RuleMessageOptions.propTypes = {
   rule: shape({}).isRequired,
-  alertNodeName: string,
+  alertNode: shape({}),
   updateAlertNodes: func.isRequired,
   updateDetails: func.isRequired,
   updateAlertProperty: func.isRequired,