diff --git a/ui/src/kapacitor/actions/view/index.js b/ui/src/kapacitor/actions/view/index.js
index dfe45e9cb..1314fb335 100644
--- a/ui/src/kapacitor/actions/view/index.js
+++ b/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 {
diff --git a/ui/src/kapacitor/components/RuleMessage.js b/ui/src/kapacitor/components/RuleMessage.js
index 48f760cd2..496400891 100644
--- a/ui/src/kapacitor/components/RuleMessage.js
+++ b/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 newItemName = selectedItem.alias + newItemNumbering
+    const newItemNumbering = _.get(endpointsOfKind, selectedItem.type, 0) + 1
+    const newItemName = selectedItem.type + newItemNumbering
     const newEndpoint = {
       alias: newItemName,
-      type: selectedItem.alias,
+      type: selectedItem.type,
       ruleID: selectedItem.ruleID,
     }
     this.setState(
diff --git a/ui/src/kapacitor/components/RuleMessageOptions.js b/ui/src/kapacitor/components/RuleMessageOptions.js
index ec4a20061..0410003bc 100644
--- a/ui/src/kapacitor/components/RuleMessageOptions.js
+++ b/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 {args, details, properties} = RULE_ALERT_OPTIONS[
-      selectedEndpoint.type
-    ]
-
-    return (
-      <div>
-        {args
-          ? <div className="rule-section--row rule-section--border-bottom">
-              <p>Optional Alert Parameters:</p>
-              <div className="optional-alert-parameters">
-                <div className="form-group">
-                  <input
-                    name={args.label}
-                    id="alert-input"
-                    className="form-control input-sm form-malachite"
-                    type="text"
-                    placeholder={args.placeholder}
-                    onChange={this.handleUpdateAlertNodes}
-                    value={selectedEndpoint.args}
-                    autoComplete="off"
-                    spellCheck="false"
-                  />
-                  <label htmlFor={args.label}>
-                    {args.label}
-                  </label>
-                </div>
-              </div>
-            </div>
-          : null}
-        {properties && properties.length
-          ? <div className="rule-section--row rule-section--border-bottom">
-              <p>Optional Alert Parameters:</p>
-              <div className="optional-alert-parameters">
-                {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 {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 = {
-  rule: shape({}).isRequired,
-  selectedEndpoint: shape({}),
-  updateAlertNodes: func.isRequired,
-  updateDetails: func.isRequired,
-  updateAlertProperty: func.isRequired,
-}
+RuleMessageOptions.propTypes = {}
 
 export default RuleMessageOptions
diff --git a/ui/src/kapacitor/components/configEP/AlertaConfig.js b/ui/src/kapacitor/components/configEP/AlertaConfig.js
new file mode 100644
index 000000000..803bda1f9
--- /dev/null
+++ b/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
diff --git a/ui/src/kapacitor/components/configEP/ExecConfig.js b/ui/src/kapacitor/components/configEP/ExecConfig.js
new file mode 100644
index 000000000..da421f2e8
--- /dev/null
+++ b/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
diff --git a/ui/src/kapacitor/components/configEP/HipchatConfig.js b/ui/src/kapacitor/components/configEP/HipchatConfig.js
new file mode 100644
index 000000000..3f4e0606c
--- /dev/null
+++ b/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
diff --git a/ui/src/kapacitor/components/configEP/HttpConfig.js b/ui/src/kapacitor/components/configEP/HttpConfig.js
new file mode 100644
index 000000000..3a0b682de
--- /dev/null
+++ b/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
diff --git a/ui/src/kapacitor/components/configEP/LogConfig.js b/ui/src/kapacitor/components/configEP/LogConfig.js
new file mode 100644
index 000000000..ec60d3158
--- /dev/null
+++ b/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
diff --git a/ui/src/kapacitor/components/configEP/OpsGenieConfig.js b/ui/src/kapacitor/components/configEP/OpsGenieConfig.js
new file mode 100644
index 000000000..c8e73a741
--- /dev/null
+++ b/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
diff --git a/ui/src/kapacitor/components/configEP/PagerDutyConfig.js b/ui/src/kapacitor/components/configEP/PagerDutyConfig.js
new file mode 100644
index 000000000..bf9a166ce
--- /dev/null
+++ b/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
diff --git a/ui/src/kapacitor/components/configEP/PushoverConfig.js b/ui/src/kapacitor/components/configEP/PushoverConfig.js
new file mode 100644
index 000000000..a838e6dd5
--- /dev/null
+++ b/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
diff --git a/ui/src/kapacitor/components/configEP/SMTPConfig.js b/ui/src/kapacitor/components/configEP/SMTPConfig.js
new file mode 100644
index 000000000..89644e5d5
--- /dev/null
+++ b/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
diff --git a/ui/src/kapacitor/components/configEP/SensuConfig.js b/ui/src/kapacitor/components/configEP/SensuConfig.js
new file mode 100644
index 000000000..b413b7e3c
--- /dev/null
+++ b/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
diff --git a/ui/src/kapacitor/components/configEP/SlackConfig.js b/ui/src/kapacitor/components/configEP/SlackConfig.js
new file mode 100644
index 000000000..04b8da25b
--- /dev/null
+++ b/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
diff --git a/ui/src/kapacitor/components/configEP/TalkConfig.js b/ui/src/kapacitor/components/configEP/TalkConfig.js
new file mode 100644
index 000000000..fe7fceec6
--- /dev/null
+++ b/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
diff --git a/ui/src/kapacitor/components/configEP/TcpConfig.js b/ui/src/kapacitor/components/configEP/TcpConfig.js
new file mode 100644
index 000000000..6eea86782
--- /dev/null
+++ b/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
diff --git a/ui/src/kapacitor/components/configEP/TelegramConfig.js b/ui/src/kapacitor/components/configEP/TelegramConfig.js
new file mode 100644
index 000000000..716ba0963
--- /dev/null
+++ b/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
diff --git a/ui/src/kapacitor/components/configEP/VictorOpsConfig.js b/ui/src/kapacitor/components/configEP/VictorOpsConfig.js
new file mode 100644
index 000000000..c53c384a1
--- /dev/null
+++ b/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
diff --git a/ui/src/kapacitor/components/configEP/index.js b/ui/src/kapacitor/components/configEP/index.js
new file mode 100644
index 000000000..4631cb2f7
--- /dev/null
+++ b/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,
+}