Extract EndpointInput component and fill the alert endpoints with the input fields they need

ui/src/kapacitor/components/EndpointInput.js

@@ -0,0 +1,40 @@
+import React, {PropTypes} from 'react'
+
+const EndpointInput = ({
+  fieldName,
+  fieldDisplay,
+  placeholder,
+  selectedEndpoint,
+  handleModifyEndpoint,
+}) => {
+  return (
+    <div className="form-group">
+      <label htmlFor={fieldName}>
+        {fieldDisplay}
+      </label>
+      <input
+        name={fieldName}
+        id={fieldName}
+        className="form-control input-sm form-malachite"
+        type="text"
+        placeholder={placeholder}
+        onChange={handleModifyEndpoint(selectedEndpoint, fieldName)}
+        value={selectedEndpoint.options[fieldName]}
+        autoComplete="off"
+        spellCheck="false"
+      />
+    </div>
+  )
+}
+
+const {func, shape, string} = PropTypes
+
+EndpointInput.propTypes = {
+  fieldName: string,
+  fieldDisplay: string,
+  placeholder: string,
+  selectedEndpoint: shape({}).isRequired,
+  handleModifyEndpoint: func.isRequired,
+}
+
+export default EndpointInput

ui/src/kapacitor/components/EndpointOptions.js

@@ -0,0 +1,146 @@
+import React, {Component, PropTypes} from 'react'
+import {
+  HttpConfig,
+  TcpConfig,
+  ExecConfig,
+  LogConfig,
+  SmtpConfig,
+  AlertaConfig,
+  HipchatConfig,
+  OpsgenieConfig,
+  PagerdutyConfig,
+  PushoverConfig,
+  SensuConfig,
+  SlackConfig,
+  TalkConfig,
+  TelegramConfig,
+  VictoropsConfig,
+} from './configEP'
+
+class EndpointOptions extends Component {
+  constructor(props) {
+    super(props)
+  }
+
+  render() {
+    const {selectedEndpoint, handleModifyEndpoint} = this.props
+    switch (selectedEndpoint && selectedEndpoint.type) {
+      case 'http':
+        return (
+          <HttpConfig
+            selectedEndpoint={selectedEndpoint}
+            handleModifyEndpoint={handleModifyEndpoint}
+          />
+        )
+      case 'tcp':
+        return (
+          <TcpConfig
+            selectedEndpoint={selectedEndpoint}
+            handleModifyEndpoint={handleModifyEndpoint}
+          />
+        )
+      case 'exec':
+        return (
+          <ExecConfig
+            selectedEndpoint={selectedEndpoint}
+            handleModifyEndpoint={handleModifyEndpoint}
+          />
+        )
+      case 'log':
+        return (
+          <LogConfig
+            selectedEndpoint={selectedEndpoint}
+            handleModifyEndpoint={handleModifyEndpoint}
+          />
+        )
+      case 'smtp':
+        return (
+          <SmtpConfig
+            selectedEndpoint={selectedEndpoint}
+            handleModifyEndpoint={handleModifyEndpoint}
+          />
+        )
+      case 'alerta':
+        return (
+          <AlertaConfig
+            selectedEndpoint={selectedEndpoint}
+            handleModifyEndpoint={handleModifyEndpoint}
+          />
+        )
+      case 'hipchat':
+        return (
+          <HipchatConfig
+            selectedEndpoint={selectedEndpoint}
+            handleModifyEndpoint={handleModifyEndpoint}
+          />
+        )
+      case 'opsgenie':
+        return (
+          <OpsgenieConfig
+            selectedEndpoint={selectedEndpoint}
+            handleModifyEndpoint={handleModifyEndpoint}
+          />
+        )
+      case 'pagerduty':
+        return (
+          <PagerdutyConfig
+            selectedEndpoint={selectedEndpoint}
+            handleModifyEndpoint={handleModifyEndpoint}
+          />
+        )
+      case 'pushover':
+        return (
+          <PushoverConfig
+            selectedEndpoint={selectedEndpoint}
+            handleModifyEndpoint={handleModifyEndpoint}
+          />
+        )
+      case 'sensu':
+        return (
+          <SensuConfig
+            selectedEndpoint={selectedEndpoint}
+            handleModifyEndpoint={handleModifyEndpoint}
+          />
+        )
+      case 'slack':
+        return (
+          <SlackConfig
+            selectedEndpoint={selectedEndpoint}
+            handleModifyEndpoint={handleModifyEndpoint}
+          />
+        )
+      case 'talk':
+        return (
+          <TalkConfig
+            selectedEndpoint={selectedEndpoint}
+            handleModifyEndpoint={handleModifyEndpoint}
+          />
+        )
+      case 'telegram':
+        return (
+          <TelegramConfig
+            selectedEndpoint={selectedEndpoint}
+            handleModifyEndpoint={handleModifyEndpoint}
+          />
+        )
+      case 'victorops':
+        return (
+          <VictoropsConfig
+            selectedEndpoint={selectedEndpoint}
+            handleModifyEndpoint={handleModifyEndpoint}
+          />
+        )
+      default:
+        return null
+    }
+  }
+}
+
+const {func, shape} = PropTypes
+
+EndpointOptions.propTypes = {
+  selectedEndpoint: shape({}).isRequired,
+  handleModifyEndpoint: func.isRequired,
+}
+
+export default EndpointOptions

ui/src/kapacitor/components/EndpointTabs.js

@@ -1,8 +1,6 @@
 import React, {PropTypes} from 'react'
-import _ from 'lodash'
 import classnames from 'classnames'
 import uuid from 'node-uuid'
-import {RULE_ALERT_OPTIONS} from 'src/kapacitor/constants'
 
 const EndpointTabs = ({
   endpointsOnThisAlert,
@@ -12,24 +10,21 @@ const EndpointTabs = ({
 }) => {
   return endpointsOnThisAlert.length
     ? <ul className="nav nav-tablist nav-tablist-sm nav-tablist-malachite">
-        {endpointsOnThisAlert
+        {endpointsOnThisAlert.map(ep =>
-          .filter(alert => _.get(RULE_ALERT_OPTIONS, alert.type, false))
+          <li
-          .map(alert =>
+            key={uuid.v4()}
-            <li
+            className={classnames({
-              key={uuid.v4()}
+              active: ep.alias === (selectedEndpoint && selectedEndpoint.alias),
-              className={classnames({
+            })}
-                active:
+            onClick={handleChooseAlert(ep)}
-                  alert.alias === (selectedEndpoint && selectedEndpoint.alias),
+          >
-              })}
+            {ep.alias}
-              onClick={handleChooseAlert(alert)}
+            <div
-            >
+              className="nav-tab--delete"
-              {alert.alias}
+              onClick={handleRemoveEndpoint(ep)}
-              <div
+            />
-                className="nav-tab--delete"
+          </li>
-                onClick={handleRemoveEndpoint(alert)}
+        )}
-              />
-            </li>
-          )}
       </ul>
     : null
 }

ui/src/kapacitor/components/RuleMessage.js

@@ -1,7 +1,7 @@
 import React, {Component, PropTypes} from 'react'
 import _ from 'lodash'
 
-import RuleMessageOptions from 'src/kapacitor/components/RuleMessageOptions'
+import EndpointOptions from 'src/kapacitor/components/EndpointOptions'
 import RuleMessageText from 'src/kapacitor/components/RuleMessageText'
 import RuleMessageTemplates from 'src/kapacitor/components/RuleMessageTemplates'
 import EndpointTabs from 'src/kapacitor/components/EndpointTabs'
@@ -10,18 +10,17 @@ import Dropdown from 'shared/components/Dropdown'
 import {DEFAULT_ALERTS} from 'src/kapacitor/constants'
 
 const alertNodesToEndpoints = rule => {
-  const endpointsOfKind = {}
+  const endpointsOfKind = {} // TODO why are these consts?
   const endpointsOnThisAlert = []
-  rule.alertNodes.forEach(ep => {
+  rule.alertNodes.forEach(an => {
-    const count = _.get(endpointsOfKind, ep.name, 0) + 1
+    const count = _.get(endpointsOfKind, an.name, 0) + 1
-    endpointsOfKind[ep.name] = count
+    endpointsOfKind[an.name] = count
-    endpointsOnThisAlert.push({
+    const ep = {
-      alias: ep.name + count,
+      alias: an.name + count,
-      type: ep.name,
+      type: an.name,
-      args: ep.args, // TODO args+properties= options?
+      options: {...an.properties, args: an.args || {}},
-      properties: ep.properties,
+    }
-      options: {},
+    endpointsOnThisAlert.push(ep)
-    })
   })
   const selectedEndpoint = endpointsOnThisAlert.length
     ? endpointsOnThisAlert[0]
@@ -74,6 +73,7 @@ class RuleMessage extends Component {
       this.handleUpdateAllAlerts
     )
   }
+
   handleRemoveEndpoint = removedEP => e => {
     e.stopPropagation()
     const {endpointsOnThisAlert, selectedEndpoint} = this.state
@@ -105,6 +105,25 @@ class RuleMessage extends Component {
     actions.updateAlerts(rule.id, endpointsOnThisAlert)
   }
 
+  handleModifyEndpoint = (selectedEndpoint, fieldName) => e => {
+    const {endpointsOnThisAlert} = this.state
+    const modifiedEP = {
+      ...selectedEndpoint,
+      options: {...selectedEndpoint.options, [fieldName]: e.target.value},
+    }
+    const remainingEndpoints = _.reject(endpointsOnThisAlert, [
+      'alias',
+      modifiedEP.alias,
+    ])
+    this.setState(
+      {
+        selectedEndpoint: modifiedEP,
+        endpointsOnThisAlert: [...remainingEndpoints, modifiedEP],
+      },
+      this.handleUpdateAllAlerts
+    )
+  }
+
   render() {
     const {rule, actions, enabledAlerts} = this.props
     const {endpointsOnThisAlert, selectedEndpoint} = this.state
@@ -133,25 +152,17 @@ class RuleMessage extends Component {
           </div>
           {endpointsOnThisAlert.length
             ? <div>
-                <RuleMessageOptions
+                <EndpointOptions
-                  rule={rule}
-                  alertNode={selectedEndpoint}
                   selectedEndpoint={selectedEndpoint}
-                  updateAlertNodes={actions.updateAlertNodes}
+                  handleModifyEndpoint={this.handleModifyEndpoint}
-                  updateDetails={actions.updateDetails}
-                  updateAlertProperty={actions.updateAlertProperty}
-                  handleEditAlert={this.handleEditAlert}
-                  handleUpdateArg={this.handleUpdateArg}
                 />
                 <RuleMessageText
                   rule={rule}
                   updateMessage={this.handleChangeMessage}
-                  alertNodeName={selectedEndpoint}
                 />
                 <RuleMessageTemplates
                   rule={rule}
                   updateMessage={actions.updateMessage}
-                  alertNodeName={selectedEndpoint}
                 />
               </div>
             : null}

ui/src/kapacitor/components/RuleMessageOptions.js

@@ -1,68 +0,0 @@
-import React, {Component, PropTypes} from 'react'
-import {
-  HttpConfig,
-  TcpConfig,
-  ExecConfig,
-  LogConfig,
-  SmtpConfig,
-  AlertaConfig,
-  HipchatConfig,
-  OpsgenieConfig,
-  PagerdutyConfig,
-  PushoverConfig,
-  SensuConfig,
-  SlackConfig,
-  TalkConfig,
-  TelegramConfig,
-  VictoropsConfig,
-} from './configEP'
-
-class RuleMessageOptions extends Component {
-  constructor(props) {
-    super(props)
-  }
-
-  render() {
-    const {selectedEndpoint} = this.props
-    switch (selectedEndpoint && selectedEndpoint.type) {
-      case 'http':
-        return <HttpConfig />
-      case 'tcp':
-        return <TcpConfig />
-      case 'exec':
-        return <ExecConfig />
-      case 'log':
-        return <LogConfig />
-      case 'smtp':
-        return <SmtpConfig />
-      case 'alerta':
-        return <AlertaConfig />
-      case 'hipchat':
-        return <HipchatConfig />
-      case 'opsgenie':
-        return <OpsgenieConfig />
-      case 'pagerduty':
-        return <PagerdutyConfig />
-      case 'pushover':
-        return <PushoverConfig />
-      case 'sensu':
-        return <SensuConfig />
-      case 'slack':
-        return <SlackConfig />
-      case 'talk':
-        return <TalkConfig />
-      case 'telegram':
-        return <TelegramConfig />
-      case 'victorops':
-        return <VictoropsConfig />
-      default:
-        return null
-    }
-  }
-}
-
-const {func, shape} = PropTypes
-
-RuleMessageOptions.propTypes = {}
-
-export default RuleMessageOptions

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

@@ -1,11 +1,28 @@
 import React, {PropTypes} from 'react'
+import EndpointInput from 'src/kapacitor/components/EndpointInput'
 
-const AlertaConfig = () => {
+const AlertaConfig = ({selectedEndpoint, handleModifyEndpoint}) => {
-  return <div>this is AlertaConfig</div>
+  return (
+    <div className="rule-section--row rule-section--border-bottom">
+      <p>Alert Parameters:</p>
+      <div className="optional-alert-parameters">
+        <EndpointInput
+          selectedEndpoint={selectedEndpoint}
+          handleModifyEndpoint={handleModifyEndpoint}
+          fieldName="script"
+          fieldDisplay="Alerta TICKscript"
+          placeholder="alerta()"
+        />
+      </div>
+    </div>
+  )
 }
 
-const {bool, func, shape, string} = PropTypes
+const {func, shape} = PropTypes
 
-AlertaConfig.propTypes = {}
+AlertaConfig.propTypes = {
+  selectedEndpoint: shape({}).isRequired,
+  handleModifyEndpoint: func.isRequired,
+}
 
 export default AlertaConfig

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

@@ -1,11 +1,28 @@
 import React, {PropTypes} from 'react'
+import EndpointInput from 'src/kapacitor/components/EndpointInput'
 
-const ExecConfig = () => {
+const ExecConfig = ({selectedEndpoint, handleModifyEndpoint}) => {
-  return <div>this is ExecConfig</div>
+  return (
+    <div className="rule-section--row rule-section--border-bottom">
+      <p>Alert Parameters:</p>
+      <div className="optional-alert-parameters">
+        <EndpointInput
+          selectedEndpoint={selectedEndpoint}
+          handleModifyEndpoint={handleModifyEndpoint}
+          fieldName="command"
+          fieldDisplay="Command (arguments separated by spaces):"
+          placeholder="Ex: woogie boogie"
+        />
+      </div>
+    </div>
+  )
 }
 
-const {bool, func, shape, string} = PropTypes
+const {func, shape} = PropTypes
 
-ExecConfig.propTypes = {}
+ExecConfig.propTypes = {
+  selectedEndpoint: shape({}).isRequired,
+  handleModifyEndpoint: func.isRequired,
+}
 
 export default ExecConfig

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

@@ -1,11 +1,35 @@
 import React, {PropTypes} from 'react'
+import EndpointInput from 'src/kapacitor/components/EndpointInput'
 
-const HipchatConfig = () => {
+const HipchatConfig = ({selectedEndpoint, handleModifyEndpoint}) => {
-  return <div>this is HipchatConfig</div>
+  return (
+    <div className="rule-section--row rule-section--border-bottom">
+      <p>Alert Parameters:</p>
+      <div className="optional-alert-parameters">
+        <EndpointInput
+          selectedEndpoint={selectedEndpoint}
+          handleModifyEndpoint={handleModifyEndpoint}
+          fieldName="room"
+          fieldDisplay="Room:"
+          placeholder="Ex: room_name"
+        />
+        <EndpointInput
+          selectedEndpoint={selectedEndpoint}
+          handleModifyEndpoint={handleModifyEndpoint}
+          fieldName="token"
+          fieldDisplay="Token:"
+          placeholder="Ex: the_token"
+        />
+      </div>
+    </div>
+  )
 }
 
-const {bool, func, shape, string} = PropTypes
+const {func, shape} = PropTypes
 
-HipchatConfig.propTypes = {}
+HipchatConfig.propTypes = {
+  selectedEndpoint: shape({}).isRequired,
+  handleModifyEndpoint: func.isRequired,
+}
 
 export default HipchatConfig

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

@@ -1,11 +1,35 @@
 import React, {PropTypes} from 'react'
+import EndpointInput from 'src/kapacitor/components/EndpointInput'
 
-const HttpConfig = () => {
+const HttpConfig = ({selectedEndpoint, handleModifyEndpoint}) => {
-  return <div>this is HttpConfig</div>
+  return (
+    <div className="rule-section--row rule-section--border-bottom">
+      <p>Alert Parameters:</p>
+      <div className="optional-alert-parameters">
+        <EndpointInput
+          selectedEndpoint={selectedEndpoint}
+          handleModifyEndpoint={handleModifyEndpoint}
+          fieldName="url"
+          fieldDisplay="URL"
+          placeholder="Ex: http://example.com/api/alert"
+        />
+        <EndpointInput
+          selectedEndpoint={selectedEndpoint}
+          handleModifyEndpoint={handleModifyEndpoint}
+          fieldName="url"
+          fieldDisplay="URL"
+          placeholder="Ex: http://example.com/api/alert"
+        />
+      </div>
+    </div>
+  )
 }
 
-const {bool, func, shape, string} = PropTypes
+const {func, shape} = PropTypes
 
-HttpConfig.propTypes = {}
+HttpConfig.propTypes = {
+  selectedEndpoint: shape({}).isRequired,
+  handleModifyEndpoint: func.isRequired,
+}
 
 export default HttpConfig

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

@@ -1,11 +1,28 @@
 import React, {PropTypes} from 'react'
+import EndpointInput from 'src/kapacitor/components/EndpointInput'
 
-const LogConfig = () => {
+const LogConfig = ({selectedEndpoint, handleModifyEndpoint}) => {
-  return <div>this is LogConfig</div>
+  return (
+    <div className="rule-section--row rule-section--border-bottom">
+      <p>Alert Parameters:</p>
+      <div className="optional-alert-parameters">
+        <EndpointInput
+          selectedEndpoint={selectedEndpoint}
+          handleModifyEndpoint={handleModifyEndpoint}
+          fieldName="file"
+          fieldDisplay="Destination of Log File:"
+          placeholder="Ex: /tmp/alerts.log"
+        />
+      </div>
+    </div>
+  )
 }
 
-const {bool, func, shape, string} = PropTypes
+const {func, shape} = PropTypes
 
-LogConfig.propTypes = {}
+LogConfig.propTypes = {
+  selectedEndpoint: shape({}).isRequired,
+  handleModifyEndpoint: func.isRequired,
+}
 
 export default LogConfig

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

@@ -4,8 +4,6 @@ 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

@@ -1,11 +1,28 @@
 import React, {PropTypes} from 'react'
+import EndpointInput from 'src/kapacitor/components/EndpointInput'
 
-const PagerdutyConfig = () => {
+const PagerdutyConfig = ({selectedEndpoint, handleModifyEndpoint}) => {
-  return <div>this is PagerdutyConfig</div>
+  return (
+    <div className="rule-section--row rule-section--border-bottom">
+      <p>Alert Parameters:</p>
+      <div className="optional-alert-parameters">
+        <EndpointInput
+          selectedEndpoint={selectedEndpoint}
+          handleModifyEndpoint={handleModifyEndpoint}
+          fieldName="serviceKey"
+          fieldDisplay="Servive Key:"
+          placeholder="Ex: a_key"
+        />
+      </div>
+    </div>
+  )
 }
 
-const {bool, func, shape, string} = PropTypes
+const {func, shape} = PropTypes
 
-PagerdutyConfig.propTypes = {}
+PagerdutyConfig.propTypes = {
+  selectedEndpoint: shape({}).isRequired,
+  handleModifyEndpoint: func.isRequired,
+}
 
 export default PagerdutyConfig

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

@@ -1,11 +1,58 @@
 import React, {PropTypes} from 'react'
+import EndpointInput from 'src/kapacitor/components/EndpointInput'
 
-const PushoverConfig = () => {
+const PushoverConfig = ({selectedEndpoint, handleModifyEndpoint}) => {
-  return <div>this is PushoverConfig</div>
+  return (
+    <div className="rule-section--row rule-section--border-bottom">
+      <p>Alert Parameters:</p>
+      <div className="optional-alert-parameters">
+        <EndpointInput
+          selectedEndpoint={selectedEndpoint}
+          handleModifyEndpoint={handleModifyEndpoint}
+          fieldName="device"
+          fieldDisplay="Device: (comma separated)"
+          placeholder="Ex: dv1,dv2"
+        />
+        <EndpointInput
+          selectedEndpoint={selectedEndpoint}
+          handleModifyEndpoint={handleModifyEndpoint}
+          fieldName="title"
+          fieldDisplay="Title:"
+          placeholder="Ex: Important Alert"
+        />
+      </div>
+      <div className="optional-alert-parameters">
+        <EndpointInput
+          selectedEndpoint={selectedEndpoint}
+          handleModifyEndpoint={handleModifyEndpoint}
+          fieldName="URL"
+          fieldDisplay="URL:"
+          placeholder="Ex: https://influxdata.com"
+        />
+        <EndpointInput
+          selectedEndpoint={selectedEndpoint}
+          handleModifyEndpoint={handleModifyEndpoint}
+          fieldName="URLTitle"
+          fieldDisplay="URL Title:"
+          placeholder="Ex: InfluxData"
+        />
+        <EndpointInput
+          selectedEndpoint={selectedEndpoint}
+          handleModifyEndpoint={handleModifyEndpoint}
+          fieldName="sound"
+          fieldDisplay="Sound:"
+          placeholder="Ex: alien"
+        />
+      </div>
+    </div>
+  )
 }
 
-const {bool, func, shape, string} = PropTypes
+const {func, shape} = PropTypes
 
-PushoverConfig.propTypes = {}
+PushoverConfig.propTypes = {
+  selectedEndpoint: shape({}).isRequired,
+  handleModifyEndpoint: func.isRequired,
+}
 
 export default PushoverConfig

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

@@ -1,11 +1,28 @@
 import React, {PropTypes} from 'react'
+import EndpointInput from 'src/kapacitor/components/EndpointInput'
 
-const SMTPConfig = () => {
+const SmtpConfig = ({selectedEndpoint, handleModifyEndpoint}) => {
-  return <div>this is SMTPConfig</div>
+  return (
+    <div className="rule-section--row rule-section--border-bottom">
+      <p>Alert Parameters:</p>
+      <div className="optional-alert-parameters">
+        <EndpointInput
+          selectedEndpoint={selectedEndpoint}
+          handleModifyEndpoint={handleModifyEndpoint}
+          fieldName="email"
+          fieldDisplay="E-mail Addresses: (separated by spaces)"
+          placeholder="Ex: bob@domain.com susan@domain.com"
+        />
+      </div>
+    </div>
+  )
 }
 
-const {bool, func, shape, string} = PropTypes
+const {func, shape} = PropTypes
 
-SMTPConfig.propTypes = {}
+SmtpConfig.propTypes = {
+  selectedEndpoint: shape({}).isRequired,
+  handleModifyEndpoint: func.isRequired,
+}
 
-export default SMTPConfig
+export default SmtpConfig

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

@@ -4,8 +4,6 @@ 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

@@ -1,11 +1,42 @@
 import React, {PropTypes} from 'react'
+import EndpointInput from 'src/kapacitor/components/EndpointInput'
 
-const SlackConfig = () => {
+const SlackConfig = ({selectedEndpoint, handleModifyEndpoint}) => {
-  return <div>this is SlackConfig</div>
+  return (
+    <div className="rule-section--row rule-section--border-bottom">
+      <p>Optional Alert Parameters:</p>
+      <div className="optional-alert-parameters">
+        <EndpointInput
+          selectedEndpoint={selectedEndpoint}
+          handleModifyEndpoint={handleModifyEndpoint}
+          fieldName="channel"
+          fieldDisplay="Channel:"
+          placeholder="Ex: #My_favorite_channel"
+        />
+        <EndpointInput
+          selectedEndpoint={selectedEndpoint}
+          handleModifyEndpoint={handleModifyEndpoint}
+          fieldName="iconEmoji"
+          fieldDisplay="Emoji:"
+          placeholder="Ex: :thumbsup:"
+        />
+        <EndpointInput
+          selectedEndpoint={selectedEndpoint}
+          handleModifyEndpoint={handleModifyEndpoint}
+          fieldName="username"
+          fieldDisplay="Username:"
+          placeholder="Ex: my_favorite_alert"
+        />
+      </div>
+    </div>
+  )
 }
 
-const {bool, func, shape, string} = PropTypes
+const {func, shape} = PropTypes
 
-SlackConfig.propTypes = {}
+SlackConfig.propTypes = {
+  selectedEndpoint: shape({}).isRequired,
+  handleModifyEndpoint: func.isRequired,
+}
 
 export default SlackConfig

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

@@ -4,8 +4,6 @@ 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

@@ -1,11 +1,28 @@
 import React, {PropTypes} from 'react'
+import EndpointInput from 'src/kapacitor/components/EndpointInput'
 
-const TcpConfig = () => {
+const TcpConfig = ({selectedEndpoint, handleModifyEndpoint}) => {
-  return <div>this is TcpConfig</div>
+  return (
+    <div className="rule-section--row rule-section--border-bottom">
+      <p>Alert Parameters:</p>
+      <div className="optional-alert-parameters">
+        <EndpointInput
+          selectedEndpoint={selectedEndpoint}
+          handleModifyEndpoint={handleModifyEndpoint}
+          fieldName="address"
+          fieldDisplay="address"
+          placeholder="Ex: exampleendpoint.com:5678"
+        />
+      </div>
+    </div>
+  )
 }
 
-const {bool, func, shape, string} = PropTypes
+const {func, shape} = PropTypes
 
-TcpConfig.propTypes = {}
+TcpConfig.propTypes = {
+  selectedEndpoint: shape({}).isRequired,
+  handleModifyEndpoint: func.isRequired,
+}
 
 export default TcpConfig

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

@@ -1,11 +1,35 @@
 import React, {PropTypes} from 'react'
+import EndpointInput from 'src/kapacitor/components/EndpointInput'
 
-const TelegrafConfig = () => {
+const HttpConfig = ({selectedEndpoint, handleModifyEndpoint}) => {
-  return <div>this is TelegrafConfig</div>
+  return (
+    <div className="rule-section--row rule-section--border-bottom">
+      <p>Alert Parameters:</p>
+      <div className="optional-alert-parameters">
+        <EndpointInput
+          selectedEndpoint={selectedEndpoint}
+          handleModifyEndpoint={handleModifyEndpoint}
+          fieldName="chatId"
+          fieldDisplay="Chat ID:"
+          placeholder="Ex: ??????"
+        />
+        <EndpointInput
+          selectedEndpoint={selectedEndpoint}
+          handleModifyEndpoint={handleModifyEndpoint}
+          fieldName="parseMode"
+          fieldDisplay="Parse Mode:"
+          placeholder="Ex: Markdown"
+        />
+      </div>
+    </div>
+  )
 }
 
-const {bool, func, shape, string} = PropTypes
+const {func, shape} = PropTypes
 
-TelegrafConfig.propTypes = {}
+HttpConfig.propTypes = {
+  selectedEndpoint: shape({}).isRequired,
+  handleModifyEndpoint: func.isRequired,
+}
 
-export default TelegrafConfig
+export default HttpConfig

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

@@ -1,11 +1,28 @@
 import React, {PropTypes} from 'react'
+import EndpointInput from 'src/kapacitor/components/EndpointInput'
 
-const VictoropsConfig = () => {
+const VictoropsConfig = ({selectedEndpoint, handleModifyEndpoint}) => {
-  return <div>this is VictoropsConfig</div>
+  return (
+    <div className="rule-section--row rule-section--border-bottom">
+      <p>Alert Parameters:</p>
+      <div className="optional-alert-parameters">
+        <EndpointInput
+          selectedEndpoint={selectedEndpoint}
+          handleModifyEndpoint={handleModifyEndpoint}
+          fieldName="routingKey"
+          fieldDisplay="Channel:"
+          placeholder="Ex: team_rocket"
+        />
+      </div>
+    </div>
+  )
 }
 
-const {bool, func, shape, string} = PropTypes
+const {func, shape} = PropTypes
 
-VictoropsConfig.propTypes = {}
+VictoropsConfig.propTypes = {
+  selectedEndpoint: shape({}).isRequired,
+  handleModifyEndpoint: func.isRequired,
+}
 
 export default VictoropsConfig

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

@@ -9,7 +9,7 @@ import PagerdutyConfig from './PagerdutyConfig'
 import PushoverConfig from './PushoverConfig'
 import SensuConfig from './SensuConfig'
 import SlackConfig from './SlackConfig'
-import SMTPConfig from './SMTPConfig'
+import SmtpConfig from './SmtpConfig'
 import TalkConfig from './TalkConfig'
 import TelegramConfig from './TelegramConfig'
 import VictoropsConfig from './VictoropsConfig'
@@ -19,7 +19,7 @@ export {
   TcpConfig,
   ExecConfig,
   LogConfig,
-  SMTPConfig,
+  SmtpConfig,
   AlertaConfig,
   HipchatConfig,
   OpsgenieConfig,

ui/src/kapacitor/constants/index.js

@@ -89,10 +89,10 @@ export const RULE_MESSAGE_TEMPLATES = {
 }
 
 export const DEFAULT_ALERTS = [
-  {type: 'http', options: {}},
+  {type: 'http', options: {url: ''}},
-  {type: 'tcp', options: {}},
+  {type: 'tcp', options: {address: ''}},
-  {type: 'exec', options: {}},
+  {type: 'exec', options: {command: ''}},
-  {type: 'log', options: {}},
+  {type: 'log', options: {file: ''}},
 ]
 
 export const RULE_ALERT_OPTIONS = {

ui/src/kapacitor/containers/KapacitorRulePage.js

@@ -18,8 +18,7 @@ const getEnabled = config => {
   let enabledAlerts = _.filter(allAlerts, v =>
     _.get(v, ['options', 'enabled'], false)
   )
-  enabledAlerts = _.reject(enabledAlerts, v => v.type === 'influxdb')
+  enabledAlerts = _.reject(enabledAlerts, v => v.type === 'influxdb') // TODO: should I be whitelisting here??
-  // _.get(RULE_ALERT_OPTIONS, section, false)
   return enabledAlerts
 }