Create a separate options and arguments component for each endpoint type

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

@@ -169,16 +169,6 @@ export function updateAlertNodes(ruleID, alerts) {
     payload: {ruleID, alerts},
   }
 }
-// export function updateAlertNodes(ruleID, alertNodeName, alertNodesText) {
-//   return {
-//     type: 'UPDATE_RULE_ALERT_NODES',
-//     payload: {
-//       ruleID,
-//       alertNodeName,
-//       alertNodesText,
-//     },
-//   }
-// }
 
 export function updateRuleName(ruleID, name) {
   return {

ui/src/kapacitor/components/RuleMessage.js

@@ -57,11 +57,11 @@ class RuleMessage extends Component {
 
   handleAddEndpoint = selectedItem => {
     const {endpointsOnThisAlert, endpointsOfKind} = this.state
-    const newItemNumbering = _.get(endpointsOfKind, selectedItem.alias, 0) + 1
+    const newItemNumbering = _.get(endpointsOfKind, selectedItem.type, 0) + 1
-    const newItemName = selectedItem.alias + newItemNumbering
+    const newItemName = selectedItem.type + newItemNumbering
     const newEndpoint = {
       alias: newItemName,
-      type: selectedItem.alias,
+      type: selectedItem.type,
       ruleID: selectedItem.ruleID,
     }
     this.setState(

ui/src/kapacitor/components/RuleMessageOptions.js

@@ -1,4 +1,21 @@
 import React, {Component, PropTypes} from 'react'
+import {
+  HttpConfig,
+  TcpConfig,
+  ExecConfig,
+  LogConfig,
+  EmailConfig,
+  AlertaConfig,
+  HipchatConfig,
+  OpsgenieConfig,
+  PagerdutyConfig,
+  PushoverConfig,
+  SensuConfig,
+  SlackConfig,
+  TalkConfig,
+  TelegramConfig,
+  VictoropsConfig,
+} from './configEP'
 
 import {RULE_ALERT_OPTIONS} from 'src/kapacitor/constants'
 
@@ -7,118 +24,47 @@ class RuleMessageOptions extends Component {
     super(props)
   }
 
-  getAlertPropertyValue = name => {
-    const {rule} = this.props
-    const {properties} = rule.alertNodes[0]
-
-    if (properties) {
-      const alertNodeProperty = properties.find(
-        property => property.name === name
-      )
-      if (alertNodeProperty) {
-        return alertNodeProperty.args
-      }
-    }
-    return ''
-  }
-
-  handleUpdateDetails = e => {
-    const {updateDetails, rule} = this.props
-    updateDetails(rule.id, e.target.value)
-  }
-
-  handleUpdateAlertNodes = e => {
-    const {handleUpdateArg, selectedEndpoint} = this.props
-    handleUpdateArg(selectedEndpoint, e.target.value)
-  }
-
-  handleUpdateAlertProperty = propertyName => e => {
-    const {updateAlertProperty, alertNode, rule} = this.props
-    updateAlertProperty(rule.id, alertNode, {
-      name: propertyName,
-      args: [e.target.value],
-    })
-  }
-
   render() {
-    const {rule, selectedEndpoint, handleEditAlert} = this.props
+    const {selectedEndpoint} = this.props
-    const {args, details, properties} = RULE_ALERT_OPTIONS[
+    switch (selectedEndpoint && selectedEndpoint.type) {
-      selectedEndpoint.type
+      case 'http':
-    ]
+        return <HttpConfig />
-
+      case 'tcp':
-    return (
+        return <TcpConfig />
-      <div>
+      case 'exec':
-        {args
+        return <ExecConfig />
-          ? <div className="rule-section--row rule-section--border-bottom">
+      case 'log':
-              <p>Optional Alert Parameters:</p>
+        return <LogConfig />
-              <div className="optional-alert-parameters">
+      case 'smtp':
-                <div className="form-group">
+        return <SmtpConfig />
-                  <input
+      case 'alerta':
-                    name={args.label}
+        return <AlertaConfig />
-                    id="alert-input"
+      case 'hipchat':
-                    className="form-control input-sm form-malachite"
+        return <HipchatConfig />
-                    type="text"
+      case 'opsgenie':
-                    placeholder={args.placeholder}
+        return <OpsgenieConfig />
-                    onChange={this.handleUpdateAlertNodes}
+      case 'pagerduty':
-                    value={selectedEndpoint.args}
+        return <PagerdutyConfig />
-                    autoComplete="off"
+      case 'pushover':
-                    spellCheck="false"
+        return <PushoverConfig />
-                  />
+      case 'sensu':
-                  <label htmlFor={args.label}>
+        return <SensuConfig />
-                    {args.label}
+      case 'slack':
-                  </label>
+        return <SlackConfig />
-                </div>
+      case 'talk':
-              </div>
+        return <TalkConfig />
-            </div>
+      case 'telegram':
-          : null}
+        return <TelegramConfig />
-        {properties && properties.length
+      case 'victorops':
-          ? <div className="rule-section--row rule-section--border-bottom">
+        return <VictoropsConfig />
-              <p>Optional Alert Parameters:</p>
+      default:
-              <div className="optional-alert-parameters">
+        return null
-                {properties.map(({name: propertyName, label, placeholder}) =>
+    }
-                  <div key={propertyName} className="form-group">
-                    <input
-                      name={label}
-                      className="form-control input-sm form-malachite"
-                      type="text"
-                      placeholder={placeholder}
-                      onChange={this.handleUpdateAlertProperty(propertyName)}
-                      value={this.getAlertPropertyValue(propertyName)}
-                      autoComplete="off"
-                      spellCheck="false"
-                    />
-                    <label htmlFor={label}>
-                      {label}
-                    </label>
-                  </div>
-                )}
-              </div>
-            </div>
-          : null}
-        {details
-          ? <div className="rule-section--border-bottom">
-              <textarea
-                className="form-control form-malachite monotype rule-builder--message"
-                placeholder={details.placeholder ? details.placeholder : ''}
-                onChange={this.handleUpdateDetails}
-                value={rule.details}
-                spellCheck={false}
-              />
-            </div>
-          : null}
-      </div>
-    )
   }
 }
 
 const {func, shape} = PropTypes
 
-RuleMessageOptions.propTypes = {
+RuleMessageOptions.propTypes = {}
-  rule: shape({}).isRequired,
-  selectedEndpoint: shape({}),
-  updateAlertNodes: func.isRequired,
-  updateDetails: func.isRequired,
-  updateAlertProperty: func.isRequired,
-}
 
 export default RuleMessageOptions

ui/src/kapacitor/components/configEP/AlertaConfig.js

@@ -0,0 +1,11 @@
+import React, {PropTypes} from 'react'
+
+const AlertaConfig = () => {
+  return <div>this is AlertaConfig</div>
+}
+
+const {bool, func, shape, string} = PropTypes
+
+AlertaConfig.propTypes = {}
+
+export default AlertaConfig

ui/src/kapacitor/components/configEP/ExecConfig.js

@@ -0,0 +1,11 @@
+import React, {PropTypes} from 'react'
+
+const ExecConfig = () => {
+  return <div>this is ExecConfig</div>
+}
+
+const {bool, func, shape, string} = PropTypes
+
+ExecConfig.propTypes = {}
+
+export default ExecConfig

ui/src/kapacitor/components/configEP/HipchatConfig.js

@@ -0,0 +1,11 @@
+import React, {PropTypes} from 'react'
+
+const HipchatConfig = () => {
+  return <div>this is HipchatConfig</div>
+}
+
+const {bool, func, shape, string} = PropTypes
+
+HipchatConfig.propTypes = {}
+
+export default HipchatConfig

ui/src/kapacitor/components/configEP/HttpConfig.js

@@ -0,0 +1,11 @@
+import React, {PropTypes} from 'react'
+
+const HttpConfig = () => {
+  return <div>this is HttpConfig</div>
+}
+
+const {bool, func, shape, string} = PropTypes
+
+HttpConfig.propTypes = {}
+
+export default HttpConfig

ui/src/kapacitor/components/configEP/LogConfig.js

@@ -0,0 +1,11 @@
+import React, {PropTypes} from 'react'
+
+const LogConfig = () => {
+  return <div>this is LogConfig</div>
+}
+
+const {bool, func, shape, string} = PropTypes
+
+LogConfig.propTypes = {}
+
+export default LogConfig

ui/src/kapacitor/components/configEP/OpsGenieConfig.js

@@ -0,0 +1,11 @@
+import React, {PropTypes} from 'react'
+
+const OpsgenieConfig = () => {
+  return <div>this is OpsgenieConfig</div>
+}
+
+const {bool, func, shape, string} = PropTypes
+
+OpsgenieConfig.propTypes = {}
+
+export default OpsgenieConfig

ui/src/kapacitor/components/configEP/PagerDutyConfig.js

@@ -0,0 +1,11 @@
+import React, {PropTypes} from 'react'
+
+const PagerdutyConfig = () => {
+  return <div>this is PagerdutyConfig</div>
+}
+
+const {bool, func, shape, string} = PropTypes
+
+PagerdutyConfig.propTypes = {}
+
+export default PagerdutyConfig

ui/src/kapacitor/components/configEP/PushoverConfig.js

@@ -0,0 +1,11 @@
+import React, {PropTypes} from 'react'
+
+const PushoverConfig = () => {
+  return <div>this is PushoverConfig</div>
+}
+
+const {bool, func, shape, string} = PropTypes
+
+PushoverConfig.propTypes = {}
+
+export default PushoverConfig

ui/src/kapacitor/components/configEP/SMTPConfig.js

@@ -0,0 +1,11 @@
+import React, {PropTypes} from 'react'
+
+const SMTPConfig = () => {
+  return <div>this is SMTPConfig</div>
+}
+
+const {bool, func, shape, string} = PropTypes
+
+SMTPConfig.propTypes = {}
+
+export default SMTPConfig

ui/src/kapacitor/components/configEP/SensuConfig.js

@@ -0,0 +1,11 @@
+import React, {PropTypes} from 'react'
+
+const SensuConfig = () => {
+  return <div>this is SensuConfig</div>
+}
+
+const {bool, func, shape, string} = PropTypes
+
+SensuConfig.propTypes = {}
+
+export default SensuConfig

ui/src/kapacitor/components/configEP/SlackConfig.js

@@ -0,0 +1,11 @@
+import React, {PropTypes} from 'react'
+
+const SlackConfig = () => {
+  return <div>this is SlackConfig</div>
+}
+
+const {bool, func, shape, string} = PropTypes
+
+SlackConfig.propTypes = {}
+
+export default SlackConfig

ui/src/kapacitor/components/configEP/TalkConfig.js

@@ -0,0 +1,11 @@
+import React, {PropTypes} from 'react'
+
+const TalkConfig = () => {
+  return <div>this is TalkConfig</div>
+}
+
+const {bool, func, shape, string} = PropTypes
+
+TalkConfig.propTypes = {}
+
+export default TalkConfig

ui/src/kapacitor/components/configEP/TcpConfig.js

@@ -0,0 +1,11 @@
+import React, {PropTypes} from 'react'
+
+const TcpConfig = () => {
+  return <div>this is TcpConfig</div>
+}
+
+const {bool, func, shape, string} = PropTypes
+
+TcpConfig.propTypes = {}
+
+export default TcpConfig

ui/src/kapacitor/components/configEP/TelegramConfig.js

@@ -0,0 +1,11 @@
+import React, {PropTypes} from 'react'
+
+const TelegrafConfig = () => {
+  return <div>this is TelegrafConfig</div>
+}
+
+const {bool, func, shape, string} = PropTypes
+
+TelegrafConfig.propTypes = {}
+
+export default TelegrafConfig

ui/src/kapacitor/components/configEP/VictorOpsConfig.js

@@ -0,0 +1,11 @@
+import React, {PropTypes} from 'react'
+
+const VictoropsConfig = () => {
+  return <div>this is VictoropsConfig</div>
+}
+
+const {bool, func, shape, string} = PropTypes
+
+VictoropsConfig.propTypes = {}
+
+export default VictoropsConfig

ui/src/kapacitor/components/configEP/index.js

@@ -0,0 +1,33 @@
+import HttpConfig from './HttpConfig'
+import TcpConfig from './TcpConfig'
+import ExecConfig from './ExecConfig'
+import LogConfig from './LogConfig'
+import AlertaConfig from './AlertaConfig'
+import HipchatConfig from './HipchatConfig'
+import OpsgenieConfig from './OpsgenieConfig'
+import PagerdutyConfig from './PagerdutyConfig'
+import PushoverConfig from './PushoverConfig'
+import SensuConfig from './SensuConfig'
+import SlackConfig from './SlackConfig'
+import SMTPConfig from './SMTPConfig'
+import TalkConfig from './TalkConfig'
+import TelegramConfig from './TelegramConfig'
+import VictoropsConfig from './VictoropsConfig'
+
+export {
+  HttpConfig,
+  TcpConfig,
+  ExecConfig,
+  LogConfig,
+  SMTPConfig,
+  AlertaConfig,
+  HipchatConfig,
+  OpsgenieConfig,
+  PagerdutyConfig,
+  PushoverConfig,
+  SensuConfig,
+  SlackConfig,
+  TalkConfig,
+  TelegramConfig,
+  VictoropsConfig,
+}