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

2017-11-09 13:22:05 -08:00 · 2017-11-09 13:22:05 -08:00 · 3473a8b4de
parent d02d95ba47
commit 3473a8b4de
23 changed files with 560 additions and 174 deletions
--- a/ui/src/kapacitor/components/EndpointInput.js
+++ b/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
--- a/ui/src/kapacitor/components/EndpointOptions.js
+++ b/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
--- a/ui/src/kapacitor/components/EndpointTabs.js
+++ b/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,21 +10,18 @@ const EndpointTabs = ({
 }) => {
  return endpointsOnThisAlert.length
    ? <ul className="nav nav-tablist nav-tablist-sm nav-tablist-malachite">
-        {endpointsOnThisAlert
-          .filter(alert => _.get(RULE_ALERT_OPTIONS, alert.type, false))
-          .map(alert =>
+        {endpointsOnThisAlert.map(ep =>
          <li
            key={uuid.v4()}
            className={classnames({
-                active:
-                  alert.alias === (selectedEndpoint && selectedEndpoint.alias),
+              active: ep.alias === (selectedEndpoint && selectedEndpoint.alias),
            })}
-              onClick={handleChooseAlert(alert)}
+            onClick={handleChooseAlert(ep)}
          >
-              {alert.alias}
+            {ep.alias}
            <div
              className="nav-tab--delete"
-                onClick={handleRemoveEndpoint(alert)}
+              onClick={handleRemoveEndpoint(ep)}
            />
          </li>
        )}
--- a/ui/src/kapacitor/components/RuleMessage.js
+++ b/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 => {
-    const count = _.get(endpointsOfKind, ep.name, 0) + 1
-    endpointsOfKind[ep.name] = count
-    endpointsOnThisAlert.push({
-      alias: ep.name + count,
-      type: ep.name,
-      args: ep.args, // TODO args+properties= options?
-      properties: ep.properties,
-      options: {},
-    })
+  rule.alertNodes.forEach(an => {
+    const count = _.get(endpointsOfKind, an.name, 0) + 1
+    endpointsOfKind[an.name] = count
+    const ep = {
+      alias: an.name + count,
+      type: an.name,
+      options: {...an.properties, args: an.args || {}},
+    }
+    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
-                  rule={rule}
-                  alertNode={selectedEndpoint}
+                <EndpointOptions
                  selectedEndpoint={selectedEndpoint}
-                  updateAlertNodes={actions.updateAlertNodes}
-                  updateDetails={actions.updateDetails}
-                  updateAlertProperty={actions.updateAlertProperty}
-                  handleEditAlert={this.handleEditAlert}
-                  handleUpdateArg={this.handleUpdateArg}
+                  handleModifyEndpoint={this.handleModifyEndpoint}
                />
                <RuleMessageText
                  rule={rule}
                  updateMessage={this.handleChangeMessage}
-                  alertNodeName={selectedEndpoint}
                />
                <RuleMessageTemplates
                  rule={rule}
                  updateMessage={actions.updateMessage}
-                  alertNodeName={selectedEndpoint}
                />
              </div>
            : null}
--- a/ui/src/kapacitor/components/RuleMessageOptions.js
+++ b/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
--- a/ui/src/kapacitor/components/configEP/AlertaConfig.js
+++ b/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 = () => {
-  return <div>this is AlertaConfig</div>
+const AlertaConfig = ({selectedEndpoint, handleModifyEndpoint}) => {
+  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
--- a/ui/src/kapacitor/components/configEP/ExecConfig.js
+++ b/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 = () => {
-  return <div>this is ExecConfig</div>
+const ExecConfig = ({selectedEndpoint, handleModifyEndpoint}) => {
+  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
--- a/ui/src/kapacitor/components/configEP/HipchatConfig.js
+++ b/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 = () => {
-  return <div>this is HipchatConfig</div>
+const HipchatConfig = ({selectedEndpoint, handleModifyEndpoint}) => {
+  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
--- a/ui/src/kapacitor/components/configEP/HttpConfig.js
+++ b/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 = () => {
-  return <div>this is HttpConfig</div>
+const HttpConfig = ({selectedEndpoint, handleModifyEndpoint}) => {
+  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
--- a/ui/src/kapacitor/components/configEP/LogConfig.js
+++ b/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 = () => {
-  return <div>this is LogConfig</div>
+const LogConfig = ({selectedEndpoint, handleModifyEndpoint}) => {
+  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
--- a/ui/src/kapacitor/components/configEP/OpsGenieConfig.js
+++ b/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
--- a/ui/src/kapacitor/components/configEP/PagerDutyConfig.js
+++ b/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 = () => {
-  return <div>this is PagerdutyConfig</div>
+const PagerdutyConfig = ({selectedEndpoint, handleModifyEndpoint}) => {
+  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
--- a/ui/src/kapacitor/components/configEP/PushoverConfig.js
+++ b/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 = () => {
-  return <div>this is PushoverConfig</div>
+const PushoverConfig = ({selectedEndpoint, handleModifyEndpoint}) => {
+  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
--- a/ui/src/kapacitor/components/configEP/SMTPConfig.js
+++ b/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 = () => {
-  return <div>this is SMTPConfig</div>
+const SmtpConfig = ({selectedEndpoint, handleModifyEndpoint}) => {
+  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
--- a/ui/src/kapacitor/components/configEP/SensuConfig.js
+++ b/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
--- a/ui/src/kapacitor/components/configEP/SlackConfig.js
+++ b/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 = () => {
-  return <div>this is SlackConfig</div>
+const SlackConfig = ({selectedEndpoint, handleModifyEndpoint}) => {
+  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
--- a/ui/src/kapacitor/components/configEP/TalkConfig.js
+++ b/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
--- a/ui/src/kapacitor/components/configEP/TcpConfig.js
+++ b/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 = () => {
-  return <div>this is TcpConfig</div>
+const TcpConfig = ({selectedEndpoint, handleModifyEndpoint}) => {
+  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
--- a/ui/src/kapacitor/components/configEP/TelegramConfig.js
+++ b/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 = () => {
-  return <div>this is TelegrafConfig</div>
+const HttpConfig = ({selectedEndpoint, handleModifyEndpoint}) => {
+  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
--- a/ui/src/kapacitor/components/configEP/VictorOpsConfig.js
+++ b/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 = () => {
-  return <div>this is VictoropsConfig</div>
+const VictoropsConfig = ({selectedEndpoint, handleModifyEndpoint}) => {
+  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
--- a/ui/src/kapacitor/components/configEP/index.js
+++ b/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,
--- a/ui/src/kapacitor/constants/index.js
+++ b/ui/src/kapacitor/constants/index.js
@ -89,10 +89,10 @@ export const RULE_MESSAGE_TEMPLATES = {
 }

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

 export const RULE_ALERT_OPTIONS = {
--- a/ui/src/kapacitor/containers/KapacitorRulePage.js
+++ b/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')
-  // _.get(RULE_ALERT_OPTIONS, section, false)
+  enabledAlerts = _.reject(enabledAlerts, v => v.type === 'influxdb') // TODO: should I be whitelisting here??
  return enabledAlerts
 }