From a04c0428b1e44a67377ca56532c47bb141f671e3 Mon Sep 17 00:00:00 2001
From: Jared Scheib <jared.scheib@gmail.com>
Date: Fri, 14 Jul 2017 11:49:53 -0700
Subject: [PATCH 01/25] Alphabetize alert endpoint configs

---
 ui/src/kapacitor/components/AlertTabs.js | 82 ++++++++++++------------
 1 file changed, 41 insertions(+), 41 deletions(-)

diff --git a/ui/src/kapacitor/components/AlertTabs.js b/ui/src/kapacitor/components/AlertTabs.js
index 7b8b15dd0d..7bd60fed89 100644
--- a/ui/src/kapacitor/components/AlertTabs.js
+++ b/ui/src/kapacitor/components/AlertTabs.js
@@ -135,39 +135,11 @@ class AlertTabs extends Component {
         ),
       },
       {
-        type: 'SMTP',
+        type: 'HipChat',
         component: (
-          <SMTPConfig
-            onSave={p => this.handleSaveConfig('smtp', p)}
-            config={this.getSection(configSections, 'smtp')}
-          />
-        ),
-      },
-      {
-        type: 'Slack',
-        component: (
-          <SlackConfig
-            onSave={p => this.handleSaveConfig('slack', p)}
-            onTest={test}
-            config={this.getSection(configSections, 'slack')}
-          />
-        ),
-      },
-      {
-        type: 'VictorOps',
-        component: (
-          <VictorOpsConfig
-            onSave={p => this.handleSaveConfig('victorops', p)}
-            config={this.getSection(configSections, 'victorops')}
-          />
-        ),
-      },
-      {
-        type: 'Telegram',
-        component: (
-          <TelegramConfig
-            onSave={p => this.handleSaveConfig('telegram', p)}
-            config={this.getSection(configSections, 'telegram')}
+          <HipChatConfig
+            onSave={p => this.handleSaveConfig('hipchat', p)}
+            config={this.getSection(configSections, 'hipchat')}
           />
         ),
       },
@@ -189,15 +161,6 @@ class AlertTabs extends Component {
           />
         ),
       },
-      {
-        type: 'HipChat',
-        component: (
-          <HipChatConfig
-            onSave={p => this.handleSaveConfig('hipchat', p)}
-            config={this.getSection(configSections, 'hipchat')}
-          />
-        ),
-      },
       {
         type: 'Sensu',
         component: (
@@ -207,6 +170,25 @@ class AlertTabs extends Component {
           />
         ),
       },
+      {
+        type: 'Slack',
+        component: (
+          <SlackConfig
+            onSave={p => this.handleSaveConfig('slack', p)}
+            onTest={test}
+            config={this.getSection(configSections, 'slack')}
+          />
+        ),
+      },
+      {
+        type: 'SMTP',
+        component: (
+          <SMTPConfig
+            onSave={p => this.handleSaveConfig('smtp', p)}
+            config={this.getSection(configSections, 'smtp')}
+          />
+        ),
+      },
       {
         type: 'Talk',
         component: (
@@ -216,6 +198,24 @@ class AlertTabs extends Component {
           />
         ),
       },
+      {
+        type: 'Telegram',
+        component: (
+          <TelegramConfig
+            onSave={p => this.handleSaveConfig('telegram', p)}
+            config={this.getSection(configSections, 'telegram')}
+          />
+        ),
+      },
+      {
+        type: 'VictorOps',
+        component: (
+          <VictorOpsConfig
+            onSave={p => this.handleSaveConfig('victorops', p)}
+            config={this.getSection(configSections, 'victorops')}
+          />
+        ),
+      },
     ]
 
     return (

From fb8d5cfc8ebfe1583b724242131d4954b97e7c9b Mon Sep 17 00:00:00 2001
From: Jared Scheib <jared.scheib@gmail.com>
Date: Fri, 14 Jul 2017 15:36:32 -0700
Subject: [PATCH 02/25] Add Pushover to swagger

---
 server/swagger.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/server/swagger.json b/server/swagger.json
index 769a6be2c9..de846ba8f5 100644
--- a/server/swagger.json
+++ b/server/swagger.json
@@ -2913,6 +2913,7 @@
 							"hipchat",
 							"opsgenie",
 							"pagerduty",
+							"pushover",
 							"victorops",
 							"smtp",
 							"email",

From 7f8d5f7c003e74a0bd8e4dcba24c8bb5245152ed Mon Sep 17 00:00:00 2001
From: Jared Scheib <jared.scheib@gmail.com>
Date: Fri, 14 Jul 2017 15:39:06 -0700
Subject: [PATCH 03/25] Only render configs given by Kapacitor proxy

---
 ui/src/kapacitor/components/AlertTabs.js | 100 +++++++++++++----------
 1 file changed, 55 insertions(+), 45 deletions(-)

diff --git a/ui/src/kapacitor/components/AlertTabs.js b/ui/src/kapacitor/components/AlertTabs.js
index 7bd60fed89..02be255b43 100644
--- a/ui/src/kapacitor/components/AlertTabs.js
+++ b/ui/src/kapacitor/components/AlertTabs.js
@@ -124,99 +124,89 @@ class AlertTabs extends Component {
       this.handleTest('slack', properties)
     }
 
-    const tabs = [
-      {
+    const supportedConfigs = {
+      alerta: {
         type: 'Alerta',
-        component: (
+        renderComponent: () =>
           <AlertaConfig
             onSave={p => this.handleSaveConfig('alerta', p)}
             config={this.getSection(configSections, 'alerta')}
-          />
-        ),
+          />,
       },
-      {
+      hipchat: {
         type: 'HipChat',
-        component: (
+        renderComponent: () =>
           <HipChatConfig
             onSave={p => this.handleSaveConfig('hipchat', p)}
             config={this.getSection(configSections, 'hipchat')}
-          />
-        ),
+          />,
       },
-      {
+      opsgenie: {
         type: 'OpsGenie',
-        component: (
+        renderComponent: () =>
           <OpsGenieConfig
             onSave={p => this.handleSaveConfig('opsgenie', p)}
             config={this.getSection(configSections, 'opsgenie')}
-          />
-        ),
+          />,
       },
-      {
+      pagerduty: {
         type: 'PagerDuty',
-        component: (
+        renderComponent: () =>
           <PagerDutyConfig
             onSave={p => this.handleSaveConfig('pagerduty', p)}
             config={this.getSection(configSections, 'pagerduty')}
-          />
-        ),
+          />,
       },
-      {
+      sensu: {
         type: 'Sensu',
-        component: (
+        renderComponent: () =>
           <SensuConfig
             onSave={p => this.handleSaveConfig('sensu', p)}
             config={this.getSection(configSections, 'sensu')}
-          />
-        ),
+          />,
       },
-      {
+      slack: {
         type: 'Slack',
-        component: (
+        renderComponent: () =>
           <SlackConfig
             onSave={p => this.handleSaveConfig('slack', p)}
             onTest={test}
             config={this.getSection(configSections, 'slack')}
-          />
-        ),
+          />,
       },
-      {
+      smtp: {
         type: 'SMTP',
-        component: (
+        renderComponent: () =>
           <SMTPConfig
             onSave={p => this.handleSaveConfig('smtp', p)}
             config={this.getSection(configSections, 'smtp')}
-          />
-        ),
+          />,
       },
-      {
+      talk: {
         type: 'Talk',
-        component: (
+        renderComponent: () =>
           <TalkConfig
             onSave={p => this.handleSaveConfig('talk', p)}
             config={this.getSection(configSections, 'talk')}
-          />
-        ),
+          />,
       },
-      {
+      telegram: {
         type: 'Telegram',
-        component: (
+        renderComponent: () =>
           <TelegramConfig
             onSave={p => this.handleSaveConfig('telegram', p)}
             config={this.getSection(configSections, 'telegram')}
-          />
-        ),
+          />,
       },
-      {
+      victorops: {
         type: 'VictorOps',
-        component: (
+        renderComponent: () =>
           <VictorOpsConfig
             onSave={p => this.handleSaveConfig('victorops', p)}
             config={this.getSection(configSections, 'victorops')}
-          />
-        ),
+          />,
       },
-    ]
+    }
 
     return (
       <div>
@@ -228,11 +218,31 @@ class AlertTabs extends Component {
 
         <Tabs tabContentsClass="config-endpoint">
           <TabList customClass="config-endpoint--tabs">
-            {tabs.map((t, i) => <Tab key={tabs[i].type}>{tabs[i].type}</Tab>)}
+            {_.reduce(
+              configSections,
+              (acc, _cur, k) =>
+                supportedConfigs[k]
+                  ? acc.concat(
+                      <Tab key={supportedConfigs[k].type}>
+                        {supportedConfigs[k].type}
+                      </Tab>
+                    )
+                  : acc,
+              []
+            )}
           </TabList>
           <TabPanels customClass="config-endpoint--tab-contents">
-            {tabs.map((t, i) =>
-              <TabPanel key={tabs[i].type}>{t.component}</TabPanel>
+            {_.reduce(
+              configSections,
+              (acc, _cur, k) =>
+                supportedConfigs[k]
+                  ? acc.concat(
+                      <TabPanel key={supportedConfigs[k].type}>
+                        {supportedConfigs[k].renderComponent()}
+                      </TabPanel>
+                    )
+                  : acc,
+              []
             )}
           </TabPanels>
         </Tabs>

From 80573d8348cd25563c40f0289a6552b81f67b75f Mon Sep 17 00:00:00 2001
From: Jared Scheib <jared.scheib@gmail.com>
Date: Fri, 14 Jul 2017 16:10:52 -0700
Subject: [PATCH 04/25] Add Pushover config

---
 ui/src/kapacitor/components/AlertTabs.js      |  9 ++
 .../components/config/PushoverConfig.js       | 98 +++++++++++++++++++
 ui/src/kapacitor/components/config/index.js   |  2 +
 ui/src/kapacitor/copy.js                      | 15 ++-
 4 files changed, 120 insertions(+), 4 deletions(-)
 create mode 100644 ui/src/kapacitor/components/config/PushoverConfig.js

diff --git a/ui/src/kapacitor/components/AlertTabs.js b/ui/src/kapacitor/components/AlertTabs.js
index 02be255b43..afe2d7f537 100644
--- a/ui/src/kapacitor/components/AlertTabs.js
+++ b/ui/src/kapacitor/components/AlertTabs.js
@@ -13,6 +13,7 @@ import {
   HipChatConfig,
   OpsGenieConfig,
   PagerDutyConfig,
+  PushoverConfig,
   SensuConfig,
   SlackConfig,
   SMTPConfig,
@@ -157,6 +158,14 @@ class AlertTabs extends Component {
             config={this.getSection(configSections, 'pagerduty')}
           />,
       },
+      pushover: {
+        type: 'Pushover',
+        renderComponent: () =>
+          <PushoverConfig
+            onSave={p => this.handleSaveConfig('pushover', p)}
+            config={this.getSection(configSections, 'pushover')}
+          />,
+      },
       sensu: {
         type: 'Sensu',
         renderComponent: () =>
diff --git a/ui/src/kapacitor/components/config/PushoverConfig.js b/ui/src/kapacitor/components/config/PushoverConfig.js
new file mode 100644
index 0000000000..3830012610
--- /dev/null
+++ b/ui/src/kapacitor/components/config/PushoverConfig.js
@@ -0,0 +1,98 @@
+import React, {Component, PropTypes} from 'react'
+
+import QuestionMarkTooltip from 'shared/components/QuestionMarkTooltip'
+import RedactedInput from './RedactedInput'
+
+import {PUSHOVER_DOCS_LINK} from 'src/kapacitor/copy'
+
+class PushoverConfig extends Component {
+  constructor(props) {
+    super(props)
+
+    this.handleSaveAlert = ::this.handleSaveAlert
+  }
+
+  handleSaveAlert(e) {
+    e.preventDefault()
+
+    const properties = {
+      token: this.token.value,
+      url: this.url.value,
+      'user-key': this.userKey.value,
+    }
+
+    this.props.onSave(properties)
+  }
+
+  render() {
+    const {options} = this.props.config
+    const {token, url} = options
+    const userKey = options['user-key']
+
+    return (
+      <form onSubmit={this.handleSaveAlert}>
+        <div className="form-group col-xs-12">
+          <label htmlFor="user-key">
+            User Key
+            <QuestionMarkTooltip
+              tipID="token"
+              tipContent={PUSHOVER_DOCS_LINK}
+            />
+          </label>
+          <RedactedInput
+            defaultValue={userKey}
+            id="user-key"
+            refFunc={r => (this.userKey = r)}
+          />
+        </div>
+
+        <div className="form-group col-xs-12">
+          <label htmlFor="token">
+            Token
+            <QuestionMarkTooltip
+              tipID="token"
+              tipContent={PUSHOVER_DOCS_LINK}
+            />
+          </label>
+          <RedactedInput
+            defaultValue={token}
+            id="token"
+            refFunc={r => (this.token = r)}
+          />
+        </div>
+
+        <div className="form-group col-xs-12">
+          <label htmlFor="url">Pushover URL</label>
+          <input
+            className="form-control"
+            id="url"
+            type="text"
+            ref={r => (this.url = r)}
+            defaultValue={url || ''}
+          />
+        </div>
+
+        <div className="form-group-submit col-xs-12 text-center">
+          <button className="btn btn-primary" type="submit">
+            Update Pushover Config
+          </button>
+        </div>
+      </form>
+    )
+  }
+}
+
+const {bool, func, shape, string} = PropTypes
+
+PushoverConfig.propTypes = {
+  config: shape({
+    options: shape({
+      token: bool.isRequired,
+      'user-key': bool.isRequired,
+      url: string.isRequired,
+    }).isRequired,
+  }).isRequired,
+  onSave: func.isRequired,
+}
+
+export default PushoverConfig
diff --git a/ui/src/kapacitor/components/config/index.js b/ui/src/kapacitor/components/config/index.js
index 8cf004a079..7b186a42a2 100644
--- a/ui/src/kapacitor/components/config/index.js
+++ b/ui/src/kapacitor/components/config/index.js
@@ -2,6 +2,7 @@ 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'
@@ -14,6 +15,7 @@ export {
   HipChatConfig,
   OpsGenieConfig,
   PagerDutyConfig,
+  PushoverConfig,
   SensuConfig,
   SlackConfig,
   SMTPConfig,
diff --git a/ui/src/kapacitor/copy.js b/ui/src/kapacitor/copy.js
index c624d2e824..0adaecebf8 100644
--- a/ui/src/kapacitor/copy.js
+++ b/ui/src/kapacitor/copy.js
@@ -1,3 +1,14 @@
+// HipChat
+const hipchatTokenLink =
+  'https://docs.influxdata.com/kapacitor/latest/guides/event-handler-setup/#hipchat-api-access-token'
+export const HIPCHAT_TOKEN_TIP = `<p>Need help creating a token?<br/>Check out <a href='${hipchatTokenLink}' target='_blank'>these steps</a>.</p>`
+
+// Pushover
+const pushoverDocsLink =
+  'https://docs.influxdata.com/kapacitor/latest/nodes/alert_node/#pushover'
+export const PUSHOVER_DOCS_LINK = `<p>Need help setting up Pushover?<br/>Check out <a href='${pushoverDocsLink}' target='_blank'>the docs here</a>.</p>`
+
+// Telegram
 const telegramChatIDLink =
   'https://docs.influxdata.com/kapacitor/latest/guides/event-handler-setup/#telegram-chat-id'
 export const TELEGRAM_CHAT_ID_TIP = `<p>Need help finding your chat id?<br/>Check out <a target='_blank' href='${telegramChatIDLink}'>these steps</a>.</p>`
@@ -5,7 +16,3 @@ export const TELEGRAM_CHAT_ID_TIP = `<p>Need help finding your chat id?<br/>Chec
 const telegramTokenLink =
   'https://docs.influxdata.com/kapacitor/latest/guides/event-handler-setup/#telegram-api-access-token'
 export const TELEGRAM_TOKEN_TIP = `<p>Need help finding your token?<br/>Check out <a target='_blank' href='${telegramTokenLink}'>these steps</a>.</p>`
-
-const hipchatTokenLink =
-  'https://docs.influxdata.com/kapacitor/latest/guides/event-handler-setup/#hipchat-api-access-token'
-export const HIPCHAT_TOKEN_TIP = `<p>Need help creating a token?<br/>Check out <a href='${hipchatTokenLink}' target='_blank'>these steps</a>.</p>`

From 7d93b930409175996c1bfdf943367fa25fe434ac Mon Sep 17 00:00:00 2001
From: Jared Scheib <jared.scheib@gmail.com>
Date: Fri, 14 Jul 2017 17:34:02 -0700
Subject: [PATCH 05/25] Update changelog

---
 CHANGELOG.md                        | 1 +
 ui/src/kapacitor/constants/index.js | 1 +
 2 files changed, 2 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 7613754c15..e427a1b5ea 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,6 +6,7 @@
 ### Features
 1. [#1717](https://github.com/influxdata/chronograf/pull/1717): View server generated TICKscripts
 1. [#1681](https://github.com/influxdata/chronograf/pull/1681): Add the ability to select Custom Time Ranges in the Hostpages, Data Explorer, and Dashboards.
+1. [#1724](https://github.com/influxdata/chronograf/pull/1724): Add alert configuration for Kapacitor support of Pushover
 
 
 ### UI Improvements
diff --git a/ui/src/kapacitor/constants/index.js b/ui/src/kapacitor/constants/index.js
index 3cf36b53e7..a219af7e3a 100644
--- a/ui/src/kapacitor/constants/index.js
+++ b/ui/src/kapacitor/constants/index.js
@@ -40,6 +40,7 @@ export const ALERTS = [
   'hipchat',
   'opsgenie',
   'pagerduty',
+  'pushover',
   'sensu',
   'slack',
   'smtp',

From 8bea47e0722813b1c391762baa3f8ce7900c1414 Mon Sep 17 00:00:00 2001
From: Jared Scheib <jared.scheib@gmail.com>
Date: Mon, 17 Jul 2017 17:01:30 -0700
Subject: [PATCH 06/25] Change order of alert endpoint options to make defaults
 be first

---
 ui/src/kapacitor/components/RuleMessage.js | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/ui/src/kapacitor/components/RuleMessage.js b/ui/src/kapacitor/components/RuleMessage.js
index 7e333cb43e..e207e1f592 100644
--- a/ui/src/kapacitor/components/RuleMessage.js
+++ b/ui/src/kapacitor/components/RuleMessage.js
@@ -43,11 +43,12 @@ export const RuleMessage = React.createClass({
       return {text, ruleID: rule.id}
     })
 
-    const alerts = enabledAlerts
-      .map(text => {
+    const alerts = [
+      ...defaultAlertEndpoints,
+      ...enabledAlerts.map(text => {
         return {text, ruleID: rule.id}
-      })
-      .concat(defaultAlertEndpoints)
+      }),
+    ]
 
     const selectedAlert = rule.alerts[0] || alerts[0].text
 

From ed883cffa6353508bfe89c92293a497f8ca73ad4 Mon Sep 17 00:00:00 2001
From: Jared Scheib <jared.scheib@gmail.com>
Date: Mon, 17 Jul 2017 17:29:26 -0700
Subject: [PATCH 07/25] Add Pushover as valid Kapacitor handler endpoint type

---
 kapacitor/alerts.go | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/kapacitor/alerts.go b/kapacitor/alerts.go
index 759b161fe1..638b6fb8b8 100644
--- a/kapacitor/alerts.go
+++ b/kapacitor/alerts.go
@@ -21,7 +21,7 @@ func kapaHandler(handler string) (string, error) {
 		return "email", nil
 	case "http":
 		return "post", nil
-	case "alerta", "sensu", "slack", "email", "talk", "telegram", "post", "tcp", "exec", "log":
+	case "alerta", "sensu", "slack", "email", "talk", "telegram", "post", "tcp", "exec", "log", "pushover":
 		return handler, nil
 	default:
 		return "", fmt.Errorf("Unsupported alert handler %s", handler)

From 40ad225752d42850a973024b9e24b44357ee0577 Mon Sep 17 00:00:00 2001
From: Jared Scheib <jared.scheib@gmail.com>
Date: Mon, 17 Jul 2017 17:30:12 -0700
Subject: [PATCH 08/25] Extract Pushover properties for Kapa alert via AST

---
 kapacitor/ast.go | 56 ++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 56 insertions(+)

diff --git a/kapacitor/ast.go b/kapacitor/ast.go
index 673eb670d8..e99a166755 100644
--- a/kapacitor/ast.go
+++ b/kapacitor/ast.go
@@ -492,6 +492,7 @@ func extractAlertNodes(p *pipeline.Pipeline, rule *chronograf.AlertRule) {
 			extractSlack(t, rule)
 			extractTalk(t, rule)
 			extractTelegram(t, rule)
+			extractPushover(t, rule)
 			extractTCP(t, rule)
 			extractLog(t, rule)
 			extractExec(t, rule)
@@ -851,3 +852,58 @@ func extractExec(node *pipeline.AlertNode, rule *chronograf.AlertRule) {
 
 	rule.AlertNodes = append(rule.AlertNodes, alert)
 }
+
+func extractPushover(node *pipeline.AlertNode, rule *chronograf.AlertRule) {
+	if node.PushoverHandlers == nil {
+		return
+	}
+	rule.Alerts = append(rule.Alerts, "pushover")
+	a := node.PushoverHandlers[0]
+	alert := chronograf.KapacitorNode{
+		Name: "pushover",
+	}
+
+	if a.UserKey != "" {
+		alert.Properties = append(alert.Properties, chronograf.KapacitorProperty{
+			Name: "user-key",
+			Args: []string{a.UserKey},
+		})
+	}
+
+	if a.Device != "" {
+		alert.Properties = append(alert.Properties, chronograf.KapacitorProperty{
+			Name: "device",
+			Args: []string{a.Device},
+		})
+	}
+
+	if a.Title != "" {
+		alert.Properties = append(alert.Properties, chronograf.KapacitorProperty{
+			Name: "title",
+			Args: []string{a.Title},
+		})
+	}
+
+	if a.URL != "" {
+		alert.Properties = append(alert.Properties, chronograf.KapacitorProperty{
+			Name: "url",
+			Args: []string{a.URL},
+		})
+	}
+
+	if a.URLTitle != "" {
+		alert.Properties = append(alert.Properties, chronograf.KapacitorProperty{
+			Name: "url-title",
+			Args: []string{a.URLTitle},
+		})
+	}
+
+	if a.Sound != "" {
+		alert.Properties = append(alert.Properties, chronograf.KapacitorProperty{
+			Name: "sound",
+			Args: []string{a.Sound},
+		})
+	}
+
+	rule.AlertNodes = append(rule.AlertNodes, alert)
+}

From 2170b455a1031aeb6e648e3f35caf4a83250b65d Mon Sep 17 00:00:00 2001
From: Jared Scheib <jared.scheib@gmail.com>
Date: Tue, 18 Jul 2017 12:02:07 -0700
Subject: [PATCH 09/25] Refactor RuleMessage templates into separate
 components, update to ES6

---
 ui/src/kapacitor/components/CodeData.js       | 34 +++++++++++
 ui/src/kapacitor/components/RuleMessage.js    | 56 +++----------------
 .../components/RuleMessageTemplates.js        | 50 +++++++++++++++++
 3 files changed, 91 insertions(+), 49 deletions(-)
 create mode 100644 ui/src/kapacitor/components/CodeData.js
 create mode 100644 ui/src/kapacitor/components/RuleMessageTemplates.js

diff --git a/ui/src/kapacitor/components/CodeData.js b/ui/src/kapacitor/components/CodeData.js
new file mode 100644
index 0000000000..fe19351308
--- /dev/null
+++ b/ui/src/kapacitor/components/CodeData.js
@@ -0,0 +1,34 @@
+import React, {Component, PropTypes} from 'react'
+
+// needs to be React Component for click handler to work
+class CodeData extends Component {
+  constructor(props) {
+    super(props)
+  }
+
+  render() {
+    const {onClickTemplate, template} = this.props
+
+    return (
+      <code
+        className="rule-builder--message-template"
+        data-tip={template.text}
+        onClick={onClickTemplate}
+      >
+        {template.label}
+      </code>
+    )
+  }
+}
+
+const {func, shape, string} = PropTypes
+
+CodeData.propTypes = {
+  onClickTemplate: func,
+  template: shape({
+    label: string,
+    text: string,
+  }),
+}
+
+export default CodeData
diff --git a/ui/src/kapacitor/components/RuleMessage.js b/ui/src/kapacitor/components/RuleMessage.js
index e207e1f592..5876d83c8c 100644
--- a/ui/src/kapacitor/components/RuleMessage.js
+++ b/ui/src/kapacitor/components/RuleMessage.js
@@ -1,10 +1,10 @@
 import React, {PropTypes} from 'react'
 import classnames from 'classnames'
-import ReactTooltip from 'react-tooltip'
 
 import RuleMessageAlertConfig from 'src/kapacitor/components/RuleMessageAlertConfig'
+import RuleMessageTemplates from 'src/kapacitor/components/RuleMessageTemplates'
 
-import {RULE_MESSAGE_TEMPLATES as templates, DEFAULT_ALERTS} from '../constants'
+import {RULE_MESSAGE_TEMPLATES, DEFAULT_ALERTS} from '../constants'
 
 const {arrayOf, func, shape, string} = PropTypes
 
@@ -98,57 +98,15 @@ export const RuleMessage = React.createClass({
             value={rule.message}
             spellCheck={false}
           />
-          <div className="rule-section--row rule-section--row-last rule-section--border-top">
-            <p>Templates:</p>
-            {Object.keys(templates).map(t => {
-              return (
-                <CodeData
-                  key={t}
-                  template={templates[t]}
-                  onClickTemplate={() =>
-                    actions.updateMessage(
-                      rule.id,
-                      `${this.message.value} ${templates[t].label}`
-                    )}
-                />
-              )
-            })}
-            <ReactTooltip
-              effect="solid"
-              html={true}
-              offset={{top: -4}}
-              class="influx-tooltip kapacitor-tooltip"
-            />
-          </div>
+          <RuleMessageTemplates
+            templates={RULE_MESSAGE_TEMPLATES}
+            actions={actions}
+            rule={rule}
+          />
         </div>
       </div>
     )
   },
 })
 
-const CodeData = React.createClass({
-  propTypes: {
-    onClickTemplate: func,
-    template: shape({
-      label: string,
-      text: string,
-    }),
-  },
-
-  render() {
-    const {onClickTemplate, template} = this.props
-    const {label, text} = template
-
-    return (
-      <code
-        className="rule-builder--message-template"
-        data-tip={text}
-        onClick={onClickTemplate}
-      >
-        {label}
-      </code>
-    )
-  },
-})
-
 export default RuleMessage
diff --git a/ui/src/kapacitor/components/RuleMessageTemplates.js b/ui/src/kapacitor/components/RuleMessageTemplates.js
new file mode 100644
index 0000000000..915e1fe203
--- /dev/null
+++ b/ui/src/kapacitor/components/RuleMessageTemplates.js
@@ -0,0 +1,50 @@
+import React, {Component, PropTypes} from 'react'
+import ReactTooltip from 'react-tooltip'
+
+import CodeData from 'src/kapacitor/components/CodeData'
+
+// needs to be React Component for CodeData click handler to work
+class RuleMessageTemplates extends Component {
+  constructor(props) {
+    super(props)
+  }
+
+  render() {
+    const {templates, actions, rule} = this.props
+
+    return (
+      <div className="rule-section--row rule-section--row-last rule-section--border-top">
+        <p>Templates:</p>
+        {Object.keys(templates).map(t => {
+          return (
+            <CodeData
+              key={t}
+              template={templates[t]}
+              onClickTemplate={() =>
+                actions.updateMessage(
+                  rule.id,
+                  `${rule.message} ${templates[t].label}`
+                )}
+            />
+          )
+        })}
+        <ReactTooltip
+          effect="solid"
+          html={true}
+          offset={{top: -4}}
+          class="influx-tooltip kapacitor-tooltip"
+        />
+      </div>
+    )
+  }
+}
+
+const {shape} = PropTypes
+
+RuleMessageTemplates.propTypes = {
+  templates: shape().isRequired,
+  actions: shape().isRequired,
+  rule: shape().isRequired,
+}
+
+export default RuleMessageTemplates

From 113c4cfae4fd36f8cdad9b7a929eb33db21d25d2 Mon Sep 17 00:00:00 2001
From: Jared Scheib <jared.scheib@gmail.com>
Date: Tue, 18 Jul 2017 12:15:59 -0700
Subject: [PATCH 10/25] Factor out RuleMessageText into dedicated ES6 component

---
 ui/src/kapacitor/components/RuleMessage.js    | 14 +++------
 .../kapacitor/components/RuleMessageText.js   | 31 +++++++++++++++++++
 2 files changed, 35 insertions(+), 10 deletions(-)
 create mode 100644 ui/src/kapacitor/components/RuleMessageText.js

diff --git a/ui/src/kapacitor/components/RuleMessage.js b/ui/src/kapacitor/components/RuleMessage.js
index 5876d83c8c..5b41b964c0 100644
--- a/ui/src/kapacitor/components/RuleMessage.js
+++ b/ui/src/kapacitor/components/RuleMessage.js
@@ -2,6 +2,7 @@ import React, {PropTypes} from 'react'
 import classnames from 'classnames'
 
 import RuleMessageAlertConfig from 'src/kapacitor/components/RuleMessageAlertConfig'
+import RuleMessageText from 'src/kapacitor/components/RuleMessageText'
 import RuleMessageTemplates from 'src/kapacitor/components/RuleMessageTemplates'
 
 import {RULE_MESSAGE_TEMPLATES, DEFAULT_ALERTS} from '../constants'
@@ -90,18 +91,11 @@ export const RuleMessage = React.createClass({
                 />
               </div>
             : null}
-          <textarea
-            className="form-control form-malachite monotype rule-builder--message"
-            ref={r => (this.message = r)}
-            onChange={() => actions.updateMessage(rule.id, this.message.value)}
-            placeholder="Example: {{ .ID }} is {{ .Level }} value: {{ index .Fields &quot;value&quot; }}"
-            value={rule.message}
-            spellCheck={false}
-          />
+          <RuleMessageText rule={rule} actions={actions} />
           <RuleMessageTemplates
-            templates={RULE_MESSAGE_TEMPLATES}
-            actions={actions}
             rule={rule}
+            actions={actions}
+            templates={RULE_MESSAGE_TEMPLATES}
           />
         </div>
       </div>
diff --git a/ui/src/kapacitor/components/RuleMessageText.js b/ui/src/kapacitor/components/RuleMessageText.js
new file mode 100644
index 0000000000..8cc79f507f
--- /dev/null
+++ b/ui/src/kapacitor/components/RuleMessageText.js
@@ -0,0 +1,31 @@
+import React, {Component, PropTypes} from 'react'
+
+class RuleMessageText extends Component {
+  constructor(props) {
+    super(props)
+  }
+
+  render() {
+    const {rule, actions} = this.props
+
+    return (
+      <textarea
+        className="form-control form-malachite monotype rule-builder--message"
+        ref={r => (this.message = r)}
+        onChange={() => actions.updateMessage(rule.id, this.message.value)}
+        placeholder="Example: {{ .ID }} is {{ .Level }} value: {{ index .Fields &quot;value&quot; }}"
+        value={rule.message}
+        spellCheck={false}
+      />
+    )
+  }
+}
+
+const {shape} = PropTypes
+
+RuleMessageText.propTypes = {
+  rule: shape().isRequired,
+  actions: shape().isRequired,
+}
+
+export default RuleMessageText

From af3bb567c048a13d4a084568e7f69814b56b2f82 Mon Sep 17 00:00:00 2001
From: Jared Scheib <jared.scheib@gmail.com>
Date: Tue, 18 Jul 2017 12:16:09 -0700
Subject: [PATCH 11/25] Reorder props on RuleMessageTemplates

---
 ui/src/kapacitor/components/RuleMessageTemplates.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/ui/src/kapacitor/components/RuleMessageTemplates.js b/ui/src/kapacitor/components/RuleMessageTemplates.js
index 915e1fe203..d0b77f07a4 100644
--- a/ui/src/kapacitor/components/RuleMessageTemplates.js
+++ b/ui/src/kapacitor/components/RuleMessageTemplates.js
@@ -10,7 +10,7 @@ class RuleMessageTemplates extends Component {
   }
 
   render() {
-    const {templates, actions, rule} = this.props
+    const {rule, actions, templates} = this.props
 
     return (
       <div className="rule-section--row rule-section--row-last rule-section--border-top">
@@ -42,9 +42,9 @@ class RuleMessageTemplates extends Component {
 const {shape} = PropTypes
 
 RuleMessageTemplates.propTypes = {
-  templates: shape().isRequired,
-  actions: shape().isRequired,
   rule: shape().isRequired,
+  actions: shape().isRequired,
+  templates: shape().isRequired,
 }
 
 export default RuleMessageTemplates

From c582cc637470ef3819fda5608b72f50ae9783925 Mon Sep 17 00:00:00 2001
From: Jared Scheib <jared.scheib@gmail.com>
Date: Tue, 18 Jul 2017 12:45:56 -0700
Subject: [PATCH 12/25] Rename RuleMessageAlertConfig to RuleMessageConfig for
 clarity and consistency

---
 ui/src/kapacitor/components/RuleMessage.js                  | 4 ++--
 .../{RuleMessageAlertConfig.js => RuleMessageConfig.js}     | 6 +++---
 2 files changed, 5 insertions(+), 5 deletions(-)
 rename ui/src/kapacitor/components/{RuleMessageAlertConfig.js => RuleMessageConfig.js} (87%)

diff --git a/ui/src/kapacitor/components/RuleMessage.js b/ui/src/kapacitor/components/RuleMessage.js
index 5b41b964c0..75d2332440 100644
--- a/ui/src/kapacitor/components/RuleMessage.js
+++ b/ui/src/kapacitor/components/RuleMessage.js
@@ -1,7 +1,7 @@
 import React, {PropTypes} from 'react'
 import classnames from 'classnames'
 
-import RuleMessageAlertConfig from 'src/kapacitor/components/RuleMessageAlertConfig'
+import RuleMessageConfig from 'src/kapacitor/components/RuleMessageConfig'
 import RuleMessageText from 'src/kapacitor/components/RuleMessageText'
 import RuleMessageTemplates from 'src/kapacitor/components/RuleMessageTemplates'
 
@@ -73,7 +73,7 @@ export const RuleMessage = React.createClass({
               )}
             </ul>
           </div>
-          <RuleMessageAlertConfig
+          <RuleMessageConfig
             updateAlertNodes={actions.updateAlertNodes}
             alert={selectedAlert}
             rule={rule}
diff --git a/ui/src/kapacitor/components/RuleMessageAlertConfig.js b/ui/src/kapacitor/components/RuleMessageConfig.js
similarity index 87%
rename from ui/src/kapacitor/components/RuleMessageAlertConfig.js
rename to ui/src/kapacitor/components/RuleMessageConfig.js
index 0fa84fba40..789dccadf9 100644
--- a/ui/src/kapacitor/components/RuleMessageAlertConfig.js
+++ b/ui/src/kapacitor/components/RuleMessageConfig.js
@@ -6,7 +6,7 @@ import {
   ALERT_NODES_ACCESSORS,
 } from '../constants'
 
-const RuleMessageAlertConfig = ({updateAlertNodes, alert, rule}) => {
+const RuleMessageConfig = ({updateAlertNodes, alert, rule}) => {
   if (!Object.keys(DEFAULT_ALERT_PLACEHOLDERS).find(a => a === alert)) {
     return null
   }
@@ -33,10 +33,10 @@ const RuleMessageAlertConfig = ({updateAlertNodes, alert, rule}) => {
 
 const {func, shape, string} = PropTypes
 
-RuleMessageAlertConfig.propTypes = {
+RuleMessageConfig.propTypes = {
   updateAlertNodes: func.isRequired,
   alert: string,
   rule: shape({}).isRequired,
 }
 
-export default RuleMessageAlertConfig
+export default RuleMessageConfig

From 196510159af973c1673b5af99d2b6a87189aa8f3 Mon Sep 17 00:00:00 2001
From: Jared Scheib <jared.scheib@gmail.com>
Date: Tue, 18 Jul 2017 12:47:53 -0700
Subject: [PATCH 13/25] Refactor RuleMessage to ES6

---
 ui/src/kapacitor/components/RuleMessage.js | 43 ++++++++++++----------
 1 file changed, 24 insertions(+), 19 deletions(-)

diff --git a/ui/src/kapacitor/components/RuleMessage.js b/ui/src/kapacitor/components/RuleMessage.js
index 75d2332440..de4d0fa4af 100644
--- a/ui/src/kapacitor/components/RuleMessage.js
+++ b/ui/src/kapacitor/components/RuleMessage.js
@@ -1,4 +1,4 @@
-import React, {PropTypes} from 'react'
+import React, {Component, PropTypes} from 'react'
 import classnames from 'classnames'
 
 import RuleMessageConfig from 'src/kapacitor/components/RuleMessageConfig'
@@ -7,36 +7,30 @@ import RuleMessageTemplates from 'src/kapacitor/components/RuleMessageTemplates'
 
 import {RULE_MESSAGE_TEMPLATES, DEFAULT_ALERTS} from '../constants'
 
-const {arrayOf, func, shape, string} = PropTypes
+class RuleMessage extends Component {
+  constructor(props) {
+    super(props)
 
-export const RuleMessage = React.createClass({
-  propTypes: {
-    rule: shape({}).isRequired,
-    actions: shape({
-      updateMessage: func.isRequired,
-      updateDetails: func.isRequired,
-    }).isRequired,
-    enabledAlerts: arrayOf(string.isRequired).isRequired,
-  },
-
-  getInitialState() {
-    return {
+    this.state = {
       selectedAlert: null,
       selectedAlertProperty: null,
     }
-  },
+
+    this.handleChangeMessage = ::this.handleChangeMessage
+    this.handleChooseAlert = ::this.handleChooseAlert
+  }
 
   handleChangeMessage() {
     const {actions, rule} = this.props
     actions.updateMessage(rule.id, this.message.value)
-  },
+  }
 
   handleChooseAlert(item) {
     const {actions} = this.props
     actions.updateAlerts(item.ruleID, [item.text])
     actions.updateAlertNodes(item.ruleID, item.text, '')
     this.setState({selectedAlert: item.text})
-  },
+  }
 
   render() {
     const {rule, actions, enabledAlerts} = this.props
@@ -100,7 +94,18 @@ export const RuleMessage = React.createClass({
         </div>
       </div>
     )
-  },
-})
+  }
+}
+
+const {arrayOf, func, shape, string} = PropTypes
+
+RuleMessage.propTypes = {
+  rule: shape({}).isRequired,
+  actions: shape({
+    updateMessage: func.isRequired,
+    updateDetails: func.isRequired,
+  }).isRequired,
+  enabledAlerts: arrayOf(string.isRequired).isRequired,
+}
 
 export default RuleMessage

From ac93de5945934fabae6c2f6896487a1941ca0e19 Mon Sep 17 00:00:00 2001
From: Jared Scheib <jared.scheib@gmail.com>
Date: Tue, 18 Jul 2017 13:13:58 -0700
Subject: [PATCH 14/25] Refactor RuleMessageConfig into named components; clean
 up

---
 ui/src/kapacitor/components/RuleMessage.js    |  25 +---
 .../kapacitor/components/RuleMessageConfig.js | 112 ++++++++++++++----
 .../components/RuleMessageTemplates.js        |  21 ++--
 .../kapacitor/components/RuleMessageText.js   |   8 +-
 4 files changed, 106 insertions(+), 60 deletions(-)

diff --git a/ui/src/kapacitor/components/RuleMessage.js b/ui/src/kapacitor/components/RuleMessage.js
index de4d0fa4af..010e219646 100644
--- a/ui/src/kapacitor/components/RuleMessage.js
+++ b/ui/src/kapacitor/components/RuleMessage.js
@@ -5,7 +5,7 @@ import RuleMessageConfig from 'src/kapacitor/components/RuleMessageConfig'
 import RuleMessageText from 'src/kapacitor/components/RuleMessageText'
 import RuleMessageTemplates from 'src/kapacitor/components/RuleMessageTemplates'
 
-import {RULE_MESSAGE_TEMPLATES, DEFAULT_ALERTS} from '../constants'
+import {DEFAULT_ALERTS} from 'src/kapacitor/constants'
 
 class RuleMessage extends Component {
   constructor(props) {
@@ -68,28 +68,15 @@ class RuleMessage extends Component {
             </ul>
           </div>
           <RuleMessageConfig
-            updateAlertNodes={actions.updateAlertNodes}
-            alert={selectedAlert}
             rule={rule}
+            alert={selectedAlert}
+            updateAlertNodes={actions.updateAlertNodes}
+            updateDetails={actions.updateDetails}
           />
-          {selectedAlert === 'smtp'
-            ? <div className="rule-section--border-bottom">
-                <textarea
-                  className="form-control form-malachite monotype rule-builder--message"
-                  placeholder="Email body text goes here"
-                  ref={r => (this.details = r)}
-                  onChange={() =>
-                    actions.updateDetails(rule.id, this.details.value)}
-                  value={rule.details}
-                  spellCheck={false}
-                />
-              </div>
-            : null}
-          <RuleMessageText rule={rule} actions={actions} />
+          <RuleMessageText rule={rule} updateMessage={actions.updateMessage} />
           <RuleMessageTemplates
             rule={rule}
-            actions={actions}
-            templates={RULE_MESSAGE_TEMPLATES}
+            updateMessage={actions.updateMessage}
           />
         </div>
       </div>
diff --git a/ui/src/kapacitor/components/RuleMessageConfig.js b/ui/src/kapacitor/components/RuleMessageConfig.js
index 789dccadf9..9577c01ed8 100644
--- a/ui/src/kapacitor/components/RuleMessageConfig.js
+++ b/ui/src/kapacitor/components/RuleMessageConfig.js
@@ -1,42 +1,102 @@
-import React, {PropTypes} from 'react'
+import React, {Component, PropTypes} from 'react'
 
 import {
   DEFAULT_ALERT_PLACEHOLDERS,
   DEFAULT_ALERT_LABELS,
   ALERT_NODES_ACCESSORS,
-} from '../constants'
+} from 'src/kapacitor/constants'
 
-const RuleMessageConfig = ({updateAlertNodes, alert, rule}) => {
-  if (!Object.keys(DEFAULT_ALERT_PLACEHOLDERS).find(a => a === alert)) {
-    return null
-  }
-  if (!Object.keys(DEFAULT_ALERT_LABELS).find(a => a === alert)) {
-    return null
-  }
-  return (
-    <div className="rule-section--row rule-section--border-bottom">
-      <p>{DEFAULT_ALERT_LABELS[alert]}</p>
-      <input
-        id="alert-input"
-        className="form-control input-sm form-malachite"
-        style={{flex: '1 0 0'}}
-        type="text"
-        placeholder={DEFAULT_ALERT_PLACEHOLDERS[alert]}
-        onChange={e => updateAlertNodes(rule.id, alert, e.target.value)}
-        value={ALERT_NODES_ACCESSORS[alert](rule)}
-        autoComplete="off"
-        spellCheck="false"
+const RuleMessageConfig = ({rule, alert, updateAlertNodes, updateDetails}) => {
+  const isConfigTypeDefault =
+    Object.keys(DEFAULT_ALERT_PLACEHOLDERS).find(a => a === alert) &&
+    Object.keys(DEFAULT_ALERT_LABELS).find(a => a === alert)
+
+  return isConfigTypeDefault
+    ? <DefaultConfig
+        rule={rule}
+        alert={alert}
+        updateAlertNodes={updateAlertNodes}
+      />
+    : <NonDefaultConfig
+        rule={rule}
+        alert={alert}
+        updateDetails={updateDetails}
       />
-    </div>
-  )
 }
 
 const {func, shape, string} = PropTypes
 
 RuleMessageConfig.propTypes = {
-  updateAlertNodes: func.isRequired,
-  alert: string,
   rule: shape({}).isRequired,
+  alert: string,
+  updateAlertNodes: func.isRequired,
+  updateDetails: func.isRequired,
+}
+
+class DefaultConfig extends Component {
+  constructor(props) {
+    super(props)
+  }
+
+  render() {
+    const {rule, alert, updateAlertNodes} = this.props
+    return (
+      <div className="rule-section--row rule-section--border-bottom">
+        <p>{DEFAULT_ALERT_LABELS[alert]}</p>
+        <input
+          id="alert-input"
+          className="form-control input-sm form-malachite"
+          style={{flex: '1 0 0'}}
+          type="text"
+          placeholder={DEFAULT_ALERT_PLACEHOLDERS[alert]}
+          onChange={e => updateAlertNodes(rule.id, alert, e.target.value)}
+          value={ALERT_NODES_ACCESSORS[alert](rule)}
+          autoComplete="off"
+          spellCheck="false"
+        />
+      </div>
+    )
+  }
+}
+
+DefaultConfig.propTypes = {
+  rule: shape({}).isRequired,
+  alert: string,
+  updateAlertNodes: func.isRequired,
+}
+
+class NonDefaultConfig extends Component {
+  constructor(props) {
+    super(props)
+  }
+
+  render() {
+    const {rule, alert, updateDetails} = this.props
+
+    switch (alert) {
+      case 'smtp':
+        return (
+          <div className="rule-section--border-bottom">
+            <textarea
+              className="form-control form-malachite monotype rule-builder--message"
+              placeholder="Email body text goes here"
+              ref={r => (this.details = r)}
+              onChange={() => updateDetails(rule.id, this.details.value)}
+              value={rule.details}
+              spellCheck={false}
+            />
+          </div>
+        )
+      default:
+        return null
+    }
+  }
+}
+
+NonDefaultConfig.propTypes = {
+  rule: shape({}).isRequired,
+  alert: string,
+  updateDetails: func.isRequired,
 }
 
 export default RuleMessageConfig
diff --git a/ui/src/kapacitor/components/RuleMessageTemplates.js b/ui/src/kapacitor/components/RuleMessageTemplates.js
index d0b77f07a4..9b78835555 100644
--- a/ui/src/kapacitor/components/RuleMessageTemplates.js
+++ b/ui/src/kapacitor/components/RuleMessageTemplates.js
@@ -1,8 +1,11 @@
 import React, {Component, PropTypes} from 'react'
+import _ from 'lodash'
 import ReactTooltip from 'react-tooltip'
 
 import CodeData from 'src/kapacitor/components/CodeData'
 
+import {RULE_MESSAGE_TEMPLATES} from 'src/kapacitor/constants'
+
 // needs to be React Component for CodeData click handler to work
 class RuleMessageTemplates extends Component {
   constructor(props) {
@@ -10,21 +13,18 @@ class RuleMessageTemplates extends Component {
   }
 
   render() {
-    const {rule, actions, templates} = this.props
+    const {rule, updateMessage} = this.props
 
     return (
       <div className="rule-section--row rule-section--row-last rule-section--border-top">
         <p>Templates:</p>
-        {Object.keys(templates).map(t => {
+        {_.map(RULE_MESSAGE_TEMPLATES, (template, key) => {
           return (
             <CodeData
-              key={t}
-              template={templates[t]}
+              key={key}
+              template={template}
               onClickTemplate={() =>
-                actions.updateMessage(
-                  rule.id,
-                  `${rule.message} ${templates[t].label}`
-                )}
+                updateMessage(rule.id, `${rule.message} ${template.label}`)}
             />
           )
         })}
@@ -39,12 +39,11 @@ class RuleMessageTemplates extends Component {
   }
 }
 
-const {shape} = PropTypes
+const {func, shape} = PropTypes
 
 RuleMessageTemplates.propTypes = {
   rule: shape().isRequired,
-  actions: shape().isRequired,
-  templates: shape().isRequired,
+  updateMessage: func.isRequired,
 }
 
 export default RuleMessageTemplates
diff --git a/ui/src/kapacitor/components/RuleMessageText.js b/ui/src/kapacitor/components/RuleMessageText.js
index 8cc79f507f..fc737ed98f 100644
--- a/ui/src/kapacitor/components/RuleMessageText.js
+++ b/ui/src/kapacitor/components/RuleMessageText.js
@@ -6,13 +6,13 @@ class RuleMessageText extends Component {
   }
 
   render() {
-    const {rule, actions} = this.props
+    const {rule, updateMessage} = this.props
 
     return (
       <textarea
         className="form-control form-malachite monotype rule-builder--message"
         ref={r => (this.message = r)}
-        onChange={() => actions.updateMessage(rule.id, this.message.value)}
+        onChange={() => updateMessage(rule.id, this.message.value)}
         placeholder="Example: {{ .ID }} is {{ .Level }} value: {{ index .Fields &quot;value&quot; }}"
         value={rule.message}
         spellCheck={false}
@@ -21,11 +21,11 @@ class RuleMessageText extends Component {
   }
 }
 
-const {shape} = PropTypes
+const {func, shape} = PropTypes
 
 RuleMessageText.propTypes = {
   rule: shape().isRequired,
-  actions: shape().isRequired,
+  updateMessage: func.isRequired,
 }
 
 export default RuleMessageText

From 5d7e9ded17949adf41384cb4011c2daf314b4f02 Mon Sep 17 00:00:00 2001
From: Jared Scheib <jared.scheib@gmail.com>
Date: Tue, 18 Jul 2017 14:25:39 -0700
Subject: [PATCH 15/25] Rename RuleMessageConfig to RuleMessageOptions for
 clarity

---
 ui/src/kapacitor/components/RuleMessage.js    |  4 ++--
 ...MessageConfig.js => RuleMessageOptions.js} | 22 +++++++++----------
 2 files changed, 13 insertions(+), 13 deletions(-)
 rename ui/src/kapacitor/components/{RuleMessageConfig.js => RuleMessageOptions.js} (84%)

diff --git a/ui/src/kapacitor/components/RuleMessage.js b/ui/src/kapacitor/components/RuleMessage.js
index 010e219646..1440999aaf 100644
--- 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 classnames from 'classnames'
 
-import RuleMessageConfig from 'src/kapacitor/components/RuleMessageConfig'
+import RuleMessageOptions from 'src/kapacitor/components/RuleMessageOptions'
 import RuleMessageText from 'src/kapacitor/components/RuleMessageText'
 import RuleMessageTemplates from 'src/kapacitor/components/RuleMessageTemplates'
 
@@ -67,7 +67,7 @@ class RuleMessage extends Component {
               )}
             </ul>
           </div>
-          <RuleMessageConfig
+          <RuleMessageOptions
             rule={rule}
             alert={selectedAlert}
             updateAlertNodes={actions.updateAlertNodes}
diff --git a/ui/src/kapacitor/components/RuleMessageConfig.js b/ui/src/kapacitor/components/RuleMessageOptions.js
similarity index 84%
rename from ui/src/kapacitor/components/RuleMessageConfig.js
rename to ui/src/kapacitor/components/RuleMessageOptions.js
index 9577c01ed8..ef71fa3b69 100644
--- a/ui/src/kapacitor/components/RuleMessageConfig.js
+++ b/ui/src/kapacitor/components/RuleMessageOptions.js
@@ -6,18 +6,18 @@ import {
   ALERT_NODES_ACCESSORS,
 } from 'src/kapacitor/constants'
 
-const RuleMessageConfig = ({rule, alert, updateAlertNodes, updateDetails}) => {
-  const isConfigTypeDefault =
+const RuleMessageOptions = ({rule, alert, updateAlertNodes, updateDetails}) => {
+  const isDetailsTypeDefault =
     Object.keys(DEFAULT_ALERT_PLACEHOLDERS).find(a => a === alert) &&
     Object.keys(DEFAULT_ALERT_LABELS).find(a => a === alert)
 
-  return isConfigTypeDefault
-    ? <DefaultConfig
+  return isDetailsTypeDefault
+    ? <DefaultOptions
         rule={rule}
         alert={alert}
         updateAlertNodes={updateAlertNodes}
       />
-    : <NonDefaultConfig
+    : <NonDefaultOptions
         rule={rule}
         alert={alert}
         updateDetails={updateDetails}
@@ -26,14 +26,14 @@ const RuleMessageConfig = ({rule, alert, updateAlertNodes, updateDetails}) => {
 
 const {func, shape, string} = PropTypes
 
-RuleMessageConfig.propTypes = {
+RuleMessageOptions.propTypes = {
   rule: shape({}).isRequired,
   alert: string,
   updateAlertNodes: func.isRequired,
   updateDetails: func.isRequired,
 }
 
-class DefaultConfig extends Component {
+class DefaultOptions extends Component {
   constructor(props) {
     super(props)
   }
@@ -59,13 +59,13 @@ class DefaultConfig extends Component {
   }
 }
 
-DefaultConfig.propTypes = {
+DefaultOptions.propTypes = {
   rule: shape({}).isRequired,
   alert: string,
   updateAlertNodes: func.isRequired,
 }
 
-class NonDefaultConfig extends Component {
+class NonDefaultOptions extends Component {
   constructor(props) {
     super(props)
   }
@@ -93,10 +93,10 @@ class NonDefaultConfig extends Component {
   }
 }
 
-NonDefaultConfig.propTypes = {
+NonDefaultOptions.propTypes = {
   rule: shape({}).isRequired,
   alert: string,
   updateDetails: func.isRequired,
 }
 
-export default RuleMessageConfig
+export default RuleMessageOptions

From 0950833ec0c9a90ae692e271137fbcb9af1ddbf8 Mon Sep 17 00:00:00 2001
From: Jared Scheib <jared.scheib@gmail.com>
Date: Tue, 18 Jul 2017 17:20:05 -0700
Subject: [PATCH 16/25] WIP Refactor RuleMessage to support arbitrary
 properties

---
 ui/src/kapacitor/components/RuleMessage.js    |  29 ++--
 .../components/RuleMessageOptions.js          | 145 ++++++++----------
 ui/src/kapacitor/constants/index.js           |  77 ++++++++--
 3 files changed, 139 insertions(+), 112 deletions(-)

diff --git a/ui/src/kapacitor/components/RuleMessage.js b/ui/src/kapacitor/components/RuleMessage.js
index 1440999aaf..ecc9665c6b 100644
--- a/ui/src/kapacitor/components/RuleMessage.js
+++ b/ui/src/kapacitor/components/RuleMessage.js
@@ -5,7 +5,7 @@ import RuleMessageOptions from 'src/kapacitor/components/RuleMessageOptions'
 import RuleMessageText from 'src/kapacitor/components/RuleMessageText'
 import RuleMessageTemplates from 'src/kapacitor/components/RuleMessageTemplates'
 
-import {DEFAULT_ALERTS} from 'src/kapacitor/constants'
+import {DEFAULT_ALERTS, RULE_ALERT_OPTIONS} from 'src/kapacitor/constants'
 
 class RuleMessage extends Component {
   constructor(props) {
@@ -54,17 +54,22 @@ class RuleMessage extends Component {
           <div className="rule-section--row rule-section--row-first rule-section--border-bottom">
             <p>Send this Alert to:</p>
             <ul className="nav nav-tablist nav-tablist-sm nav-tablist-malachite">
-              {alerts.map(alert =>
-                <li
-                  key={alert.text}
-                  className={classnames({
-                    active: alert.text === selectedAlert,
-                  })}
-                  onClick={() => this.handleChooseAlert(alert)}
-                >
-                  {alert.text}
-                </li>
-              )}
+              {alerts
+                // only display alert endpoints that have had their argument details configured
+                .filter(alert =>
+                  Object.keys(RULE_ALERT_OPTIONS).includes(alert.text)
+                )
+                .map(alert =>
+                  <li
+                    key={alert.text}
+                    className={classnames({
+                      active: alert.text === selectedAlert,
+                    })}
+                    onClick={() => this.handleChooseAlert(alert)}
+                  >
+                    {alert.text}
+                  </li>
+                )}
             </ul>
           </div>
           <RuleMessageOptions
diff --git a/ui/src/kapacitor/components/RuleMessageOptions.js b/ui/src/kapacitor/components/RuleMessageOptions.js
index ef71fa3b69..51355897fe 100644
--- a/ui/src/kapacitor/components/RuleMessageOptions.js
+++ b/ui/src/kapacitor/components/RuleMessageOptions.js
@@ -1,27 +1,72 @@
 import React, {Component, PropTypes} from 'react'
 
 import {
-  DEFAULT_ALERT_PLACEHOLDERS,
-  DEFAULT_ALERT_LABELS,
+  RULE_ALERT_OPTIONS,
   ALERT_NODES_ACCESSORS,
 } from 'src/kapacitor/constants'
 
-const RuleMessageOptions = ({rule, alert, updateAlertNodes, updateDetails}) => {
-  const isDetailsTypeDefault =
-    Object.keys(DEFAULT_ALERT_PLACEHOLDERS).find(a => a === alert) &&
-    Object.keys(DEFAULT_ALERT_LABELS).find(a => a === alert)
+class RuleMessageOptions extends Component {
+  constructor(props) {
+    super(props)
+  }
 
-  return isDetailsTypeDefault
-    ? <DefaultOptions
-        rule={rule}
-        alert={alert}
-        updateAlertNodes={updateAlertNodes}
-      />
-    : <NonDefaultOptions
-        rule={rule}
-        alert={alert}
-        updateDetails={updateDetails}
-      />
+  render() {
+    const {rule, alert, updateAlertNodes, updateDetails} = this.props
+    const {args, details, properties} = RULE_ALERT_OPTIONS[alert]
+
+    return (
+      <div>
+        {args
+          ? <div className="rule-section--row rule-section--border-bottom">
+              <p>{args.label}</p>
+              <input
+                id="alert-input"
+                className="form-control input-sm form-malachite"
+                style={{flex: '1 0 0'}}
+                type="text"
+                placeholder={args.placeholder}
+                onChange={e => updateAlertNodes(rule.id, alert, e.target.value)}
+                value={ALERT_NODES_ACCESSORS[alert](rule)}
+                autoComplete="off"
+                spellCheck="false"
+              />
+            </div>
+          : null}
+        {details
+          ? <div className="rule-section--border-bottom">
+              <textarea
+                className="form-control form-malachite monotype rule-builder--message"
+                placeholder={details.placeholder ? details.placeholder : ''}
+                ref={r => (this.details = r)}
+                onChange={() => updateDetails(rule.id, this.details.value)}
+                value={rule.details}
+                spellCheck={false}
+              />
+            </div>
+          : null}
+        {properties
+          ? properties.map(({key, label, placeholder}) =>
+              <div
+                key={key}
+                className="rule-section--row rule-section--border-bottom"
+              >
+                <p>{label}</p>
+                <input
+                  className="form-control input-sm form-malachite"
+                  style={{flex: '1 0 0'}}
+                  type="text"
+                  placeholder={placeholder}
+                  // onChange={e => updateProperties(rule.id, e.target.value)}
+                  value={ALERT_NODES_ACCESSORS[alert](rule)}
+                  autoComplete="off"
+                  spellCheck="false"
+                />
+              </div>
+            )
+          : null}
+      </div>
+    )
+  }
 }
 
 const {func, shape, string} = PropTypes
@@ -33,70 +78,4 @@ RuleMessageOptions.propTypes = {
   updateDetails: func.isRequired,
 }
 
-class DefaultOptions extends Component {
-  constructor(props) {
-    super(props)
-  }
-
-  render() {
-    const {rule, alert, updateAlertNodes} = this.props
-    return (
-      <div className="rule-section--row rule-section--border-bottom">
-        <p>{DEFAULT_ALERT_LABELS[alert]}</p>
-        <input
-          id="alert-input"
-          className="form-control input-sm form-malachite"
-          style={{flex: '1 0 0'}}
-          type="text"
-          placeholder={DEFAULT_ALERT_PLACEHOLDERS[alert]}
-          onChange={e => updateAlertNodes(rule.id, alert, e.target.value)}
-          value={ALERT_NODES_ACCESSORS[alert](rule)}
-          autoComplete="off"
-          spellCheck="false"
-        />
-      </div>
-    )
-  }
-}
-
-DefaultOptions.propTypes = {
-  rule: shape({}).isRequired,
-  alert: string,
-  updateAlertNodes: func.isRequired,
-}
-
-class NonDefaultOptions extends Component {
-  constructor(props) {
-    super(props)
-  }
-
-  render() {
-    const {rule, alert, updateDetails} = this.props
-
-    switch (alert) {
-      case 'smtp':
-        return (
-          <div className="rule-section--border-bottom">
-            <textarea
-              className="form-control form-malachite monotype rule-builder--message"
-              placeholder="Email body text goes here"
-              ref={r => (this.details = r)}
-              onChange={() => updateDetails(rule.id, this.details.value)}
-              value={rule.details}
-              spellCheck={false}
-            />
-          </div>
-        )
-      default:
-        return null
-    }
-  }
-}
-
-NonDefaultOptions.propTypes = {
-  rule: shape({}).isRequired,
-  alert: string,
-  updateDetails: func.isRequired,
-}
-
 export default RuleMessageOptions
diff --git a/ui/src/kapacitor/constants/index.js b/ui/src/kapacitor/constants/index.js
index a219af7e3a..1f9732312d 100644
--- a/ui/src/kapacitor/constants/index.js
+++ b/ui/src/kapacitor/constants/index.js
@@ -83,23 +83,65 @@ export const RULE_MESSAGE_TEMPLATES = {
 
 export const DEFAULT_ALERTS = ['http', 'tcp', 'exec', 'log']
 
-export const DEFAULT_ALERT_LABELS = {
-  http: 'URL:',
-  tcp: 'Address:',
-  exec: 'Add Command (Arguments separated by Spaces):',
-  log: 'File:',
-  smtp: 'Email Addresses (Separated by Spaces):',
-  slack: 'Send alerts to Slack channel:',
-  alerta: 'Paste Alerta TICKscript:',
-}
-export const DEFAULT_ALERT_PLACEHOLDERS = {
-  http: 'Ex: http://example.com/api/alert',
-  tcp: 'Ex: exampleendpoint.com:5678',
-  exec: 'Ex: woogie boogie',
-  log: 'Ex: /tmp/alerts.log',
-  smtp: 'Ex: benedict@domain.com delaney@domain.com susan@domain.com',
-  slack: '#alerts',
-  alerta: 'alerta()',
+export const RULE_ALERT_OPTIONS = {
+  http: {
+    args: {
+      label: 'URL:',
+      placeholder: 'Ex: http://example.com/api/alert',
+    },
+  },
+  tcp: {
+    args: {
+      label: 'Address:',
+      placeholder: 'Ex: exampleendpoint.com:5678',
+    },
+  },
+  exec: {
+    args: {
+      label: 'Add Command (Arguments separated by Spaces):',
+      placeholder: 'Ex: woogie boogie',
+    },
+  },
+  log: {
+    args: {
+      label: 'File:',
+      placeholder: 'Ex: /tmp/alerts.log',
+    },
+  },
+  smtp: {
+    args: {
+      label: 'Email Addresses (Separated by Spaces):',
+      placeholder:
+        'Ex: benedict@domain.com delaney@domain.com susan@domain.com',
+    },
+    details: {placeholder: 'Email body text goes here'},
+  },
+  slack: {
+    args: {
+      label: 'Send alerts to Slack channel:',
+      placeholder: '#alerts',
+    },
+  },
+  alerta: {
+    args: {
+      label: 'Paste Alerta TICKscript:',
+      placeholder: 'alerta()',
+    },
+  },
+  pushover: {
+    args: {
+      label: 'Devices (Separated by Commas, Optional):',
+      placeholder: 'phone33,submarine,pineapple_tower',
+    },
+    properties: [
+      {key: 'UserKey', label: 'User Key', placeholder: 'my_user_key'},
+      {key: 'Device', label: 'Device', placeholder: 'my_device'},
+      {key: 'Title', label: 'Title', placeholder: 'message_title'},
+      {key: 'URL', label: 'URL', placeholder: 'http://reference.url'},
+      {key: 'URLTitle', label: 'URL Title', placeholder: 'My URL Title'},
+      {key: 'Sound', label: 'Sound', placeholder: 'pineapple_falling'},
+    ],
+  },
 }
 
 export const ALERT_NODES_ACCESSORS = {
@@ -119,4 +161,5 @@ export const ALERT_NODES_ACCESSORS = {
         ['alerta()']
       )
       .join('.'),
+  pushover: rule => _.get(rule, 'alertNodes[0].args'),
 }

From 1fbea1e84e7bc62f86a70444ab21dce40acd8e72 Mon Sep 17 00:00:00 2001
From: Jared Scheib <jared.scheib@gmail.com>
Date: Thu, 20 Jul 2017 14:59:56 -0700
Subject: [PATCH 17/25] Fix and remove invalid Pushover alert node keys

---
 kapacitor/ast.go | 12 ++----------
 1 file changed, 2 insertions(+), 10 deletions(-)

diff --git a/kapacitor/ast.go b/kapacitor/ast.go
index e99a166755..846e20ac9c 100644
--- a/kapacitor/ast.go
+++ b/kapacitor/ast.go
@@ -412,7 +412,6 @@ func Reverse(script chronograf.TICKScript) (chronograf.AlertRule, error) {
 	rule.Query.RetentionPolicy = commonVars.RP
 	rule.Query.Measurement = commonVars.Measurement
 	rule.Query.GroupBy.Tags = commonVars.GroupBy
-
 	if commonVars.Filter.Operator == "==" {
 		rule.Query.AreTagsAccepted = true
 	}
@@ -863,13 +862,6 @@ func extractPushover(node *pipeline.AlertNode, rule *chronograf.AlertRule) {
 		Name: "pushover",
 	}
 
-	if a.UserKey != "" {
-		alert.Properties = append(alert.Properties, chronograf.KapacitorProperty{
-			Name: "user-key",
-			Args: []string{a.UserKey},
-		})
-	}
-
 	if a.Device != "" {
 		alert.Properties = append(alert.Properties, chronograf.KapacitorProperty{
 			Name: "device",
@@ -886,14 +878,14 @@ func extractPushover(node *pipeline.AlertNode, rule *chronograf.AlertRule) {
 
 	if a.URL != "" {
 		alert.Properties = append(alert.Properties, chronograf.KapacitorProperty{
-			Name: "url",
+			Name: "URL",
 			Args: []string{a.URL},
 		})
 	}
 
 	if a.URLTitle != "" {
 		alert.Properties = append(alert.Properties, chronograf.KapacitorProperty{
-			Name: "url-title",
+			Name: "URLTitle",
 			Args: []string{a.URLTitle},
 		})
 	}

From 76a95314bfc65a98224fb56e1b30e1423b2224f8 Mon Sep 17 00:00:00 2001
From: Jared Scheib <jared.scheib@gmail.com>
Date: Thu, 20 Jul 2017 15:37:07 -0700
Subject: [PATCH 18/25] Add ability to update a Kapacitor alert node's
 properties

Add TODO comment about Kapacitor alert node reducer work
Fix JSON schema & default values for Pushover alert node
Clarify alertType var name
Fix comment typo
Add missing propType
Perform Prettier updates
---
 ui/src/kapacitor/actions/view/index.js        |  9 ++
 ui/src/kapacitor/components/RuleMessage.js    | 16 ++--
 .../components/RuleMessageOptions.js          | 85 +++++++++++++------
 ui/src/kapacitor/constants/index.js           | 20 ++---
 .../kapacitor/containers/KapacitorRulePage.js |  1 -
 ui/src/kapacitor/reducers/rules.js            | 45 +++++++++-
 6 files changed, 130 insertions(+), 46 deletions(-)

diff --git a/ui/src/kapacitor/actions/view/index.js b/ui/src/kapacitor/actions/view/index.js
index 1452c32945..ac01e2115e 100644
--- a/ui/src/kapacitor/actions/view/index.js
+++ b/ui/src/kapacitor/actions/view/index.js
@@ -114,6 +114,15 @@ export function updateDetails(ruleID, details) {
   }
 }
 
+export const updateAlertProperty = (ruleID, alertType, alertProperty) => ({
+  type: 'UPDATE_RULE_ALERT_PROPERTY',
+  payload: {
+    ruleID,
+    alertType,
+    alertProperty,
+  },
+})
+
 export function updateAlerts(ruleID, alerts) {
   return {
     type: 'UPDATE_RULE_ALERTS',
diff --git a/ui/src/kapacitor/components/RuleMessage.js b/ui/src/kapacitor/components/RuleMessage.js
index ecc9665c6b..ada0fd0674 100644
--- a/ui/src/kapacitor/components/RuleMessage.js
+++ b/ui/src/kapacitor/components/RuleMessage.js
@@ -12,8 +12,7 @@ class RuleMessage extends Component {
     super(props)
 
     this.state = {
-      selectedAlert: null,
-      selectedAlertProperty: null,
+      selectedAlertType: null,
     }
 
     this.handleChangeMessage = ::this.handleChangeMessage
@@ -29,7 +28,7 @@ class RuleMessage extends Component {
     const {actions} = this.props
     actions.updateAlerts(item.ruleID, [item.text])
     actions.updateAlertNodes(item.ruleID, item.text, '')
-    this.setState({selectedAlert: item.text})
+    this.setState({selectedAlertType: item.text})
   }
 
   render() {
@@ -45,7 +44,7 @@ class RuleMessage extends Component {
       }),
     ]
 
-    const selectedAlert = rule.alerts[0] || alerts[0].text
+    const selectedAlertType = rule.alerts[0] || alerts[0].text
 
     return (
       <div className="rule-section">
@@ -55,7 +54,7 @@ class RuleMessage extends Component {
             <p>Send this Alert to:</p>
             <ul className="nav nav-tablist nav-tablist-sm nav-tablist-malachite">
               {alerts
-                // only display alert endpoints that have had their argument details configured
+                // only display alert endpoints that have rule alert options configured
                 .filter(alert =>
                   Object.keys(RULE_ALERT_OPTIONS).includes(alert.text)
                 )
@@ -63,7 +62,7 @@ class RuleMessage extends Component {
                   <li
                     key={alert.text}
                     className={classnames({
-                      active: alert.text === selectedAlert,
+                      active: alert.text === selectedAlertType,
                     })}
                     onClick={() => this.handleChooseAlert(alert)}
                   >
@@ -74,9 +73,10 @@ class RuleMessage extends Component {
           </div>
           <RuleMessageOptions
             rule={rule}
-            alert={selectedAlert}
+            alertType={selectedAlertType}
             updateAlertNodes={actions.updateAlertNodes}
             updateDetails={actions.updateDetails}
+            updateAlertProperty={actions.updateAlertProperty}
           />
           <RuleMessageText rule={rule} updateMessage={actions.updateMessage} />
           <RuleMessageTemplates
@@ -94,8 +94,10 @@ const {arrayOf, func, shape, string} = PropTypes
 RuleMessage.propTypes = {
   rule: shape({}).isRequired,
   actions: shape({
+    updateAlertNodes: func.isRequired,
     updateMessage: func.isRequired,
     updateDetails: func.isRequired,
+    updateAlertProperty: func.isRequired,
   }).isRequired,
   enabledAlerts: arrayOf(string.isRequired).isRequired,
 }
diff --git a/ui/src/kapacitor/components/RuleMessageOptions.js b/ui/src/kapacitor/components/RuleMessageOptions.js
index 51355897fe..6abd379822 100644
--- a/ui/src/kapacitor/components/RuleMessageOptions.js
+++ b/ui/src/kapacitor/components/RuleMessageOptions.js
@@ -8,30 +8,82 @@ import {
 class RuleMessageOptions extends Component {
   constructor(props) {
     super(props)
+
+    this.getAlertPropertyValue = ::this.getAlertPropertyValue
+  }
+
+  getAlertPropertyValue(properties, name) {
+    if (properties) {
+      const alertNodeProperty = properties.find(
+        property => property.name === name
+      )
+      if (alertNodeProperty) {
+        return alertNodeProperty.args
+      }
+    }
+    return ''
   }
 
   render() {
-    const {rule, alert, updateAlertNodes, updateDetails} = this.props
-    const {args, details, properties} = RULE_ALERT_OPTIONS[alert]
+    const {
+      rule,
+      alertType,
+      updateAlertNodes,
+      updateDetails,
+      updateAlertProperty,
+    } = this.props
+    const {args, details, properties} = RULE_ALERT_OPTIONS[alertType]
 
     return (
       <div>
         {args
           ? <div className="rule-section--row rule-section--border-bottom">
-              <p>{args.label}</p>
+              <p>
+                {args.label}
+              </p>
               <input
                 id="alert-input"
                 className="form-control input-sm form-malachite"
                 style={{flex: '1 0 0'}}
                 type="text"
                 placeholder={args.placeholder}
-                onChange={e => updateAlertNodes(rule.id, alert, e.target.value)}
-                value={ALERT_NODES_ACCESSORS[alert](rule)}
+                onChange={e =>
+                  updateAlertNodes(rule.id, alertType, e.target.value)}
+                value={ALERT_NODES_ACCESSORS[alertType](rule)}
                 autoComplete="off"
                 spellCheck="false"
               />
             </div>
           : null}
+        {properties && properties.length
+          ? <div className="rule-section--row rule-section--border-bottom">
+              <p>Optional Alert Configuration:</p>
+              {properties.map(({name: propertyName, label, placeholder}) =>
+                <div key={propertyName}>
+                  <p>
+                    {label}
+                  </p>
+                  <input
+                    className="form-control input-sm form-malachite"
+                    style={{flex: '1 0 0'}}
+                    type="text"
+                    placeholder={placeholder}
+                    onChange={e =>
+                      updateAlertProperty(rule.id, alertType, {
+                        name: propertyName,
+                        args: [e.target.value],
+                      })}
+                    value={this.getAlertPropertyValue(
+                      rule.alertNodes[0].properties,
+                      propertyName
+                    )}
+                    autoComplete="off"
+                    spellCheck="false"
+                  />
+                </div>
+              )}
+            </div>
+          : null}
         {details
           ? <div className="rule-section--border-bottom">
               <textarea
@@ -44,26 +96,6 @@ class RuleMessageOptions extends Component {
               />
             </div>
           : null}
-        {properties
-          ? properties.map(({key, label, placeholder}) =>
-              <div
-                key={key}
-                className="rule-section--row rule-section--border-bottom"
-              >
-                <p>{label}</p>
-                <input
-                  className="form-control input-sm form-malachite"
-                  style={{flex: '1 0 0'}}
-                  type="text"
-                  placeholder={placeholder}
-                  // onChange={e => updateProperties(rule.id, e.target.value)}
-                  value={ALERT_NODES_ACCESSORS[alert](rule)}
-                  autoComplete="off"
-                  spellCheck="false"
-                />
-              </div>
-            )
-          : null}
       </div>
     )
   }
@@ -73,9 +105,10 @@ const {func, shape, string} = PropTypes
 
 RuleMessageOptions.propTypes = {
   rule: shape({}).isRequired,
-  alert: string,
+  alertType: string,
   updateAlertNodes: func.isRequired,
   updateDetails: func.isRequired,
+  updateAlertProperty: func.isRequired,
 }
 
 export default RuleMessageOptions
diff --git a/ui/src/kapacitor/constants/index.js b/ui/src/kapacitor/constants/index.js
index 1f9732312d..ff110d483e 100644
--- a/ui/src/kapacitor/constants/index.js
+++ b/ui/src/kapacitor/constants/index.js
@@ -129,17 +129,16 @@ export const RULE_ALERT_OPTIONS = {
     },
   },
   pushover: {
-    args: {
-      label: 'Devices (Separated by Commas, Optional):',
-      placeholder: 'phone33,submarine,pineapple_tower',
-    },
     properties: [
-      {key: 'UserKey', label: 'User Key', placeholder: 'my_user_key'},
-      {key: 'Device', label: 'Device', placeholder: 'my_device'},
-      {key: 'Title', label: 'Title', placeholder: 'message_title'},
-      {key: 'URL', label: 'URL', placeholder: 'http://reference.url'},
-      {key: 'URLTitle', label: 'URL Title', placeholder: 'My URL Title'},
-      {key: 'Sound', label: 'Sound', placeholder: 'pineapple_falling'},
+      {
+        name: 'device',
+        label: 'Device:',
+        placeholder: 'dv1,dv2 (Comma Separated)',
+      },
+      {name: 'title', label: 'Title:', placeholder: 'Important Message'},
+      {name: 'URL', label: 'URL:', placeholder: 'https://influxdata.com'},
+      {name: 'URLTitle', label: 'URL Title:', placeholder: 'InfluxData'},
+      {name: 'sound', label: 'Sound:', placeholder: 'alien'},
     ],
   },
 }
@@ -161,5 +160,4 @@ export const ALERT_NODES_ACCESSORS = {
         ['alerta()']
       )
       .join('.'),
-  pushover: rule => _.get(rule, 'alertNodes[0].args'),
 }
diff --git a/ui/src/kapacitor/containers/KapacitorRulePage.js b/ui/src/kapacitor/containers/KapacitorRulePage.js
index 7056df5c24..75b2b92c34 100644
--- a/ui/src/kapacitor/containers/KapacitorRulePage.js
+++ b/ui/src/kapacitor/containers/KapacitorRulePage.js
@@ -82,7 +82,6 @@ class KapacitorRulePage extends Component {
     if (!query) {
       return <div className="page-spinner" />
     }
-
     return (
       <KapacitorRule
         source={source}
diff --git a/ui/src/kapacitor/reducers/rules.js b/ui/src/kapacitor/reducers/rules.js
index c2b6f50393..4ba875562c 100644
--- a/ui/src/kapacitor/reducers/rules.js
+++ b/ui/src/kapacitor/reducers/rules.js
@@ -83,6 +83,10 @@ export default function rules(state = {}, action) {
       })
     }
 
+    // TODO: refactor to allow multiple alert nodes, and change name + refactor
+    // functionality to clearly disambiguate creating an alert node, changing its
+    // type, adding other alert nodes to a single rule, and updating an alert node's
+    // properties vs args vs details vs message.
     case 'UPDATE_RULE_ALERT_NODES': {
       const {ruleID, alertType, alertNodesText} = action.payload
 
@@ -132,8 +136,15 @@ export default function rules(state = {}, action) {
             },
           ]
           break
+        case 'pushover':
         default:
-          alertNodesByType = []
+          alertNodesByType = [
+            {
+              name: alertType,
+              args: [],
+              properties: [],
+            },
+          ]
       }
 
       return Object.assign({}, state, {
@@ -143,6 +154,38 @@ export default function rules(state = {}, action) {
       })
     }
 
+    case 'UPDATE_RULE_ALERT_PROPERTY': {
+      const {ruleID, alertType, alertProperty} = action.payload
+
+      const newAlertNodes = state[ruleID].alertNodes.map(alertNode => {
+        if (alertNode.name !== alertType) {
+          return alertNode
+        }
+        let matched = false
+
+        if (!alertNode.properties) {
+          alertNode.properties = []
+        }
+        alertNode.properties = alertNode.properties.map(property => {
+          if (property.name === alertProperty.name) {
+            matched = true
+            return alertProperty
+          }
+          return property
+        })
+        if (!matched) {
+          alertNode.properties.push(alertProperty)
+        }
+        return alertNode
+      })
+
+      return {
+        ...state,
+        [ruleID]: {...state[ruleID]},
+        alertNodes: newAlertNodes,
+      }
+    }
+
     case 'UPDATE_RULE_NAME': {
       const {ruleID, name} = action.payload
       return Object.assign({}, state, {

From 7a78a5c39b515612eb57f954d8320352eb8fa2c0 Mon Sep 17 00:00:00 2001
From: Jared Scheib <jared.scheib@gmail.com>
Date: Thu, 20 Jul 2017 15:46:42 -0700
Subject: [PATCH 19/25] Change copy for optional alert parameters

---
 ui/src/kapacitor/components/RuleMessageOptions.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/src/kapacitor/components/RuleMessageOptions.js b/ui/src/kapacitor/components/RuleMessageOptions.js
index 6abd379822..103d309800 100644
--- a/ui/src/kapacitor/components/RuleMessageOptions.js
+++ b/ui/src/kapacitor/components/RuleMessageOptions.js
@@ -57,7 +57,7 @@ class RuleMessageOptions extends Component {
           : null}
         {properties && properties.length
           ? <div className="rule-section--row rule-section--border-bottom">
-              <p>Optional Alert Configuration:</p>
+              <p>Optional Alert Parameters:</p>
               {properties.map(({name: propertyName, label, placeholder}) =>
                 <div key={propertyName}>
                   <p>

From fd91e650b0c4f6baacaaed5d28a5a88d63c5cf5a Mon Sep 17 00:00:00 2001
From: Jared Scheib <jared.scheib@gmail.com>
Date: Thu, 20 Jul 2017 15:55:05 -0700
Subject: [PATCH 20/25] Update changelog again

---
 CHANGELOG.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index e427a1b5ea..c7117e60a6 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,7 +6,7 @@
 ### Features
 1. [#1717](https://github.com/influxdata/chronograf/pull/1717): View server generated TICKscripts
 1. [#1681](https://github.com/influxdata/chronograf/pull/1681): Add the ability to select Custom Time Ranges in the Hostpages, Data Explorer, and Dashboards.
-1. [#1724](https://github.com/influxdata/chronograf/pull/1724): Add alert configuration for Kapacitor support of Pushover
+1. [#1724](https://github.com/influxdata/chronograf/pull/1724): Add Pushover alert support
 
 
 ### UI Improvements

From 8c3a9db9192477d7da847db89e636916a56f1b75 Mon Sep 17 00:00:00 2001
From: Jared Scheib <jared.scheib@gmail.com>
Date: Thu, 20 Jul 2017 16:11:17 -0700
Subject: [PATCH 21/25] Make CodeData a presentational component

---
 ui/src/kapacitor/components/CodeData.js | 30 ++++++++-----------------
 1 file changed, 9 insertions(+), 21 deletions(-)

diff --git a/ui/src/kapacitor/components/CodeData.js b/ui/src/kapacitor/components/CodeData.js
index fe19351308..23a4fd160d 100644
--- a/ui/src/kapacitor/components/CodeData.js
+++ b/ui/src/kapacitor/components/CodeData.js
@@ -1,25 +1,13 @@
-import React, {Component, PropTypes} from 'react'
+import React, {PropTypes} from 'react'
 
-// needs to be React Component for click handler to work
-class CodeData extends Component {
-  constructor(props) {
-    super(props)
-  }
-
-  render() {
-    const {onClickTemplate, template} = this.props
-
-    return (
-      <code
-        className="rule-builder--message-template"
-        data-tip={template.text}
-        onClick={onClickTemplate}
-      >
-        {template.label}
-      </code>
-    )
-  }
-}
+const CodeData = ({onClickTemplate, template}) =>
+  <code
+    className="rule-builder--message-template"
+    data-tip={template.text}
+    onClick={onClickTemplate}
+  >
+    {template.label}
+  </code>
 
 const {func, shape, string} = PropTypes
 

From fcd88a297d9f937822d38de9b2b5ea0df92c3bfb Mon Sep 17 00:00:00 2001
From: Jared Scheib <jared.scheib@gmail.com>
Date: Thu, 20 Jul 2017 17:32:27 -0700
Subject: [PATCH 22/25] Change var alertType to alertNodeName for accuracy

---
 ui/src/kapacitor/actions/view/index.js         |  8 ++++----
 ui/src/kapacitor/components/RuleMessage.js     | 10 +++++-----
 .../kapacitor/components/RuleMessageOptions.js | 12 ++++++------
 ui/src/kapacitor/reducers/rules.js             | 18 +++++++++---------
 4 files changed, 24 insertions(+), 24 deletions(-)

diff --git a/ui/src/kapacitor/actions/view/index.js b/ui/src/kapacitor/actions/view/index.js
index ac01e2115e..06d16500f1 100644
--- a/ui/src/kapacitor/actions/view/index.js
+++ b/ui/src/kapacitor/actions/view/index.js
@@ -114,11 +114,11 @@ export function updateDetails(ruleID, details) {
   }
 }
 
-export const updateAlertProperty = (ruleID, alertType, alertProperty) => ({
+export const updateAlertProperty = (ruleID, alertNodeName, alertProperty) => ({
   type: 'UPDATE_RULE_ALERT_PROPERTY',
   payload: {
     ruleID,
-    alertType,
+    alertNodeName,
     alertProperty,
   },
 })
@@ -133,12 +133,12 @@ export function updateAlerts(ruleID, alerts) {
   }
 }
 
-export function updateAlertNodes(ruleID, alertType, alertNodesText) {
+export function updateAlertNodes(ruleID, alertNodeName, alertNodesText) {
   return {
     type: 'UPDATE_RULE_ALERT_NODES',
     payload: {
       ruleID,
-      alertType,
+      alertNodeName,
       alertNodesText,
     },
   }
diff --git a/ui/src/kapacitor/components/RuleMessage.js b/ui/src/kapacitor/components/RuleMessage.js
index ada0fd0674..5112397d7e 100644
--- a/ui/src/kapacitor/components/RuleMessage.js
+++ b/ui/src/kapacitor/components/RuleMessage.js
@@ -12,7 +12,7 @@ class RuleMessage extends Component {
     super(props)
 
     this.state = {
-      selectedAlertType: null,
+      selectedAlertNodeName: null,
     }
 
     this.handleChangeMessage = ::this.handleChangeMessage
@@ -28,7 +28,7 @@ class RuleMessage extends Component {
     const {actions} = this.props
     actions.updateAlerts(item.ruleID, [item.text])
     actions.updateAlertNodes(item.ruleID, item.text, '')
-    this.setState({selectedAlertType: item.text})
+    this.setState({selectedAlertNodeName: item.text})
   }
 
   render() {
@@ -44,7 +44,7 @@ class RuleMessage extends Component {
       }),
     ]
 
-    const selectedAlertType = rule.alerts[0] || alerts[0].text
+    const selectedAlertNodeName = rule.alerts[0] || alerts[0].text
 
     return (
       <div className="rule-section">
@@ -62,7 +62,7 @@ class RuleMessage extends Component {
                   <li
                     key={alert.text}
                     className={classnames({
-                      active: alert.text === selectedAlertType,
+                      active: alert.text === selectedAlertNodeName,
                     })}
                     onClick={() => this.handleChooseAlert(alert)}
                   >
@@ -73,7 +73,7 @@ class RuleMessage extends Component {
           </div>
           <RuleMessageOptions
             rule={rule}
-            alertType={selectedAlertType}
+            alertNodeName={selectedAlertNodeName}
             updateAlertNodes={actions.updateAlertNodes}
             updateDetails={actions.updateDetails}
             updateAlertProperty={actions.updateAlertProperty}
diff --git a/ui/src/kapacitor/components/RuleMessageOptions.js b/ui/src/kapacitor/components/RuleMessageOptions.js
index 103d309800..f8c9a69f00 100644
--- a/ui/src/kapacitor/components/RuleMessageOptions.js
+++ b/ui/src/kapacitor/components/RuleMessageOptions.js
@@ -27,12 +27,12 @@ class RuleMessageOptions extends Component {
   render() {
     const {
       rule,
-      alertType,
+      alertNodeName,
       updateAlertNodes,
       updateDetails,
       updateAlertProperty,
     } = this.props
-    const {args, details, properties} = RULE_ALERT_OPTIONS[alertType]
+    const {args, details, properties} = RULE_ALERT_OPTIONS[alertNodeName]
 
     return (
       <div>
@@ -48,8 +48,8 @@ class RuleMessageOptions extends Component {
                 type="text"
                 placeholder={args.placeholder}
                 onChange={e =>
-                  updateAlertNodes(rule.id, alertType, e.target.value)}
-                value={ALERT_NODES_ACCESSORS[alertType](rule)}
+                  updateAlertNodes(rule.id, alertNodeName, e.target.value)}
+                value={ALERT_NODES_ACCESSORS[alertNodeName](rule)}
                 autoComplete="off"
                 spellCheck="false"
               />
@@ -69,7 +69,7 @@ class RuleMessageOptions extends Component {
                     type="text"
                     placeholder={placeholder}
                     onChange={e =>
-                      updateAlertProperty(rule.id, alertType, {
+                      updateAlertProperty(rule.id, alertNodeName, {
                         name: propertyName,
                         args: [e.target.value],
                       })}
@@ -105,7 +105,7 @@ const {func, shape, string} = PropTypes
 
 RuleMessageOptions.propTypes = {
   rule: shape({}).isRequired,
-  alertType: string,
+  alertNodeName: string,
   updateAlertNodes: func.isRequired,
   updateDetails: func.isRequired,
   updateAlertProperty: func.isRequired,
diff --git a/ui/src/kapacitor/reducers/rules.js b/ui/src/kapacitor/reducers/rules.js
index 4ba875562c..330b4e645d 100644
--- a/ui/src/kapacitor/reducers/rules.js
+++ b/ui/src/kapacitor/reducers/rules.js
@@ -88,17 +88,17 @@ export default function rules(state = {}, action) {
     // type, adding other alert nodes to a single rule, and updating an alert node's
     // properties vs args vs details vs message.
     case 'UPDATE_RULE_ALERT_NODES': {
-      const {ruleID, alertType, alertNodesText} = action.payload
+      const {ruleID, alertNodeName, alertNodesText} = action.payload
 
       let alertNodesByType
 
-      switch (alertType) {
+      switch (alertNodeName) {
         case 'http':
         case 'tcp':
         case 'log':
           alertNodesByType = [
             {
-              name: alertType,
+              name: alertNodeName,
               args: [alertNodesText],
               properties: [],
             },
@@ -108,7 +108,7 @@ export default function rules(state = {}, action) {
         case 'smtp':
           alertNodesByType = [
             {
-              name: alertType,
+              name: alertNodeName,
               args: alertNodesText.split(' '),
               properties: [],
             },
@@ -117,7 +117,7 @@ export default function rules(state = {}, action) {
         case 'slack':
           alertNodesByType = [
             {
-              name: alertType,
+              name: alertNodeName,
               properties: [
                 {
                   name: 'channel',
@@ -130,7 +130,7 @@ export default function rules(state = {}, action) {
         case 'alerta':
           alertNodesByType = [
             {
-              name: alertType,
+              name: alertNodeName,
               args: [],
               properties: parseAlerta(alertNodesText),
             },
@@ -140,7 +140,7 @@ export default function rules(state = {}, action) {
         default:
           alertNodesByType = [
             {
-              name: alertType,
+              name: alertNodeName,
               args: [],
               properties: [],
             },
@@ -155,10 +155,10 @@ export default function rules(state = {}, action) {
     }
 
     case 'UPDATE_RULE_ALERT_PROPERTY': {
-      const {ruleID, alertType, alertProperty} = action.payload
+      const {ruleID, alertNodeName, alertProperty} = action.payload
 
       const newAlertNodes = state[ruleID].alertNodes.map(alertNode => {
-        if (alertNode.name !== alertType) {
+        if (alertNode.name !== alertNodeName) {
           return alertNode
         }
         let matched = false

From be8b72e2733e44a872e12099e6ef0238446ddc0b Mon Sep 17 00:00:00 2001
From: Jared Scheib <jared.scheib@gmail.com>
Date: Thu, 20 Jul 2017 18:19:08 -0700
Subject: [PATCH 23/25] Add test for updateAlertProperty

---
 ui/spec/kapacitor/reducers/rulesSpec.js | 101 ++++++++++++++++++++++++
 1 file changed, 101 insertions(+)

diff --git a/ui/spec/kapacitor/reducers/rulesSpec.js b/ui/spec/kapacitor/reducers/rulesSpec.js
index 3f981aca81..87223b9b83 100644
--- a/ui/spec/kapacitor/reducers/rulesSpec.js
+++ b/ui/spec/kapacitor/reducers/rulesSpec.js
@@ -11,6 +11,7 @@ import {
   updateMessage,
   updateAlerts,
   updateAlertNodes,
+  updateAlertProperty,
   updateRuleName,
   deleteRuleSuccess,
   updateRuleStatusSuccess,
@@ -200,6 +201,106 @@ describe('Kapacitor.Reducers.rules', () => {
     expect(newState[ruleID].details).to.equal(details)
   })
 
+  it('can update properties', () => {
+    const ruleID = 1
+
+    const alertNodeName = 'pushover'
+
+    const alertProperty1_Name = 'device'
+    const alertProperty1_ArgsOrig =
+      'pineapple_kingdom_control_room,bob_cOreos_watch'
+    const alertProperty1_ArgsDiff = 'pineapple_kingdom_control_tower'
+
+    const alertProperty2_Name = 'URLTitle'
+    const alertProperty2_ArgsOrig = 'Cubeapple Rising'
+    const alertProperty2_ArgsDiff = 'Cubeapple Falling'
+
+    const alertProperty1_Orig = {
+      name: alertProperty1_Name,
+      args: [alertProperty1_ArgsOrig],
+    }
+    const alertProperty1_Diff = {
+      name: alertProperty1_Name,
+      args: [alertProperty1_ArgsDiff],
+    }
+    const alertProperty2_Orig = {
+      name: alertProperty2_Name,
+      args: [alertProperty2_ArgsOrig],
+    }
+    const alertProperty2_Diff = {
+      name: alertProperty2_Name,
+      args: [alertProperty2_ArgsDiff],
+    }
+
+    const initialState = {
+      [ruleID]: {
+        id: ruleID,
+        alertNodes: [
+          {
+            name: 'pushover',
+            args: null,
+            properties: null,
+          },
+        ],
+      },
+    }
+
+    const getAlertPropertyArgs = (matchState, propertyName) =>
+      matchState[ruleID].alertNodes
+        .find(node => node.name === alertNodeName)
+        .properties.find(property => property.name === propertyName).args[0]
+
+    // add first property
+    let newState = reducer(
+      initialState,
+      updateAlertProperty(ruleID, alertNodeName, alertProperty1_Orig)
+    )
+    expect(getAlertPropertyArgs(newState, alertProperty1_Name)).to.equal(
+      alertProperty1_ArgsOrig
+    )
+
+    // change first property
+    newState = reducer(
+      initialState,
+      updateAlertProperty(ruleID, alertNodeName, alertProperty1_Diff)
+    )
+    expect(getAlertPropertyArgs(newState, alertProperty1_Name)).to.equal(
+      alertProperty1_ArgsDiff
+    )
+
+    // add second property
+    newState = reducer(
+      initialState,
+      updateAlertProperty(ruleID, alertNodeName, alertProperty2_Orig)
+    )
+    expect(getAlertPropertyArgs(newState, alertProperty1_Name)).to.equal(
+      alertProperty1_ArgsDiff
+    )
+    expect(getAlertPropertyArgs(newState, alertProperty2_Name)).to.equal(
+      alertProperty2_ArgsOrig
+    )
+    expect(
+      newState[ruleID].alertNodes.find(node => node.name === alertNodeName)
+        .properties.length
+    ).to.equal(2)
+
+    // change second property
+    newState = reducer(
+      initialState,
+      updateAlertProperty(ruleID, alertNodeName, alertProperty2_Diff)
+    )
+    expect(getAlertPropertyArgs(newState, alertProperty1_Name)).to.equal(
+      alertProperty1_ArgsDiff
+    )
+    expect(getAlertPropertyArgs(newState, alertProperty2_Name)).to.equal(
+      alertProperty2_ArgsDiff
+    )
+    expect(
+      newState[ruleID].alertNodes.find(node => node.name === alertNodeName)
+        .properties.length
+    ).to.equal(2)
+  })
+
   it('can update status', () => {
     const ruleID = 1
     const status = 'enabled'

From 498ede7bd2eb9b93cfff10e54b93ed89ce2f12b7 Mon Sep 17 00:00:00 2001
From: Jared Scheib <jared.scheib@gmail.com>
Date: Thu, 20 Jul 2017 18:52:06 -0700
Subject: [PATCH 24/25] Add basic styles to rule alert optional properties

Signed-off-by: Luke Morris <lukevmorris@gmail.com>
---
 .../components/RuleMessageOptions.js          | 73 ++++++++++++-------
 1 file changed, 47 insertions(+), 26 deletions(-)

diff --git a/ui/src/kapacitor/components/RuleMessageOptions.js b/ui/src/kapacitor/components/RuleMessageOptions.js
index f8c9a69f00..77fd068636 100644
--- a/ui/src/kapacitor/components/RuleMessageOptions.js
+++ b/ui/src/kapacitor/components/RuleMessageOptions.js
@@ -56,32 +56,53 @@ class RuleMessageOptions extends Component {
             </div>
           : null}
         {properties && properties.length
-          ? <div className="rule-section--row rule-section--border-bottom">
-              <p>Optional Alert Parameters:</p>
-              {properties.map(({name: propertyName, label, placeholder}) =>
-                <div key={propertyName}>
-                  <p>
-                    {label}
-                  </p>
-                  <input
-                    className="form-control input-sm form-malachite"
-                    style={{flex: '1 0 0'}}
-                    type="text"
-                    placeholder={placeholder}
-                    onChange={e =>
-                      updateAlertProperty(rule.id, alertNodeName, {
-                        name: propertyName,
-                        args: [e.target.value],
-                      })}
-                    value={this.getAlertPropertyValue(
-                      rule.alertNodes[0].properties,
-                      propertyName
-                    )}
-                    autoComplete="off"
-                    spellCheck="false"
-                  />
-                </div>
-              )}
+          ? <div
+              className="rule-section--row rule-section--border-bottom"
+              style={{display: 'block'}}
+            >
+              <p>Optional Alert Parameters</p>
+              <div style={{display: 'flex', flexWrap: 'wrap'}}>
+                {properties.map(({name: propertyName, label, placeholder}) =>
+                  <div
+                    key={propertyName}
+                    style={{display: 'block', flex: '0 0 33.33%'}}
+                  >
+                    <label
+                      htmlFor={label}
+                      style={{
+                        display: 'flex',
+                        width: '100%',
+                        alignItems: 'center',
+                      }}
+                    >
+                      <span style={{flex: '0 0 auto'}}>
+                        {label}
+                      </span>
+                      <input
+                        name={label}
+                        className="form-control input-sm form-malachite"
+                        style={{
+                          margin: '0 15px 0 5px',
+                          flex: '1 0 0',
+                        }}
+                        type="text"
+                        placeholder={placeholder}
+                        onChange={e =>
+                          updateAlertProperty(rule.id, alertNodeName, {
+                            name: propertyName,
+                            args: [e.target.value],
+                          })}
+                        value={this.getAlertPropertyValue(
+                          rule.alertNodes[0].properties,
+                          propertyName
+                        )}
+                        autoComplete="off"
+                        spellCheck="false"
+                      />
+                    </label>
+                  </div>
+                )}
+              </div>
             </div>
           : null}
         {details

From f1d486733dcdb93edd391ed41225038886e020fe Mon Sep 17 00:00:00 2001
From: Jared Scheib <jared.scheib@gmail.com>
Date: Fri, 21 Jul 2017 13:52:51 -0700
Subject: [PATCH 25/25] Update Kapacitor AST extract handlers to also guard
 against empty slices

---
 kapacitor/ast.go | 30 +++++++++++++++---------------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/kapacitor/ast.go b/kapacitor/ast.go
index 846e20ac9c..f0dbf7c597 100644
--- a/kapacitor/ast.go
+++ b/kapacitor/ast.go
@@ -501,7 +501,7 @@ func extractAlertNodes(p *pipeline.Pipeline, rule *chronograf.AlertRule) {
 }
 
 func extractHipchat(node *pipeline.AlertNode, rule *chronograf.AlertRule) {
-	if node.HipChatHandlers == nil {
+	if len(node.HipChatHandlers) == 0 {
 		return
 	}
 	rule.Alerts = append(rule.Alerts, "hipchat")
@@ -527,7 +527,7 @@ func extractHipchat(node *pipeline.AlertNode, rule *chronograf.AlertRule) {
 }
 
 func extractOpsgenie(node *pipeline.AlertNode, rule *chronograf.AlertRule) {
-	if node.OpsGenieHandlers == nil {
+	if len(node.OpsGenieHandlers) == 0 {
 		return
 	}
 	rule.Alerts = append(rule.Alerts, "opsgenie")
@@ -553,7 +553,7 @@ func extractOpsgenie(node *pipeline.AlertNode, rule *chronograf.AlertRule) {
 }
 
 func extractPagerduty(node *pipeline.AlertNode, rule *chronograf.AlertRule) {
-	if node.PagerDutyHandlers == nil {
+	if len(node.PagerDutyHandlers) == 0 {
 		return
 	}
 	rule.Alerts = append(rule.Alerts, "pagerduty")
@@ -572,7 +572,7 @@ func extractPagerduty(node *pipeline.AlertNode, rule *chronograf.AlertRule) {
 }
 
 func extractVictorops(node *pipeline.AlertNode, rule *chronograf.AlertRule) {
-	if node.VictorOpsHandlers == nil {
+	if len(node.VictorOpsHandlers) == 0 {
 		return
 	}
 	rule.Alerts = append(rule.Alerts, "victorops")
@@ -591,7 +591,7 @@ func extractVictorops(node *pipeline.AlertNode, rule *chronograf.AlertRule) {
 }
 
 func extractEmail(node *pipeline.AlertNode, rule *chronograf.AlertRule) {
-	if node.EmailHandlers == nil {
+	if len(node.EmailHandlers) == 0 {
 		return
 	}
 	rule.Alerts = append(rule.Alerts, "smtp")
@@ -607,7 +607,7 @@ func extractEmail(node *pipeline.AlertNode, rule *chronograf.AlertRule) {
 }
 
 func extractPost(node *pipeline.AlertNode, rule *chronograf.AlertRule) {
-	if node.HTTPPostHandlers == nil {
+	if len(node.HTTPPostHandlers) == 0 {
 		return
 	}
 	rule.Alerts = append(rule.Alerts, "http")
@@ -640,7 +640,7 @@ func extractPost(node *pipeline.AlertNode, rule *chronograf.AlertRule) {
 }
 
 func extractAlerta(node *pipeline.AlertNode, rule *chronograf.AlertRule) {
-	if node.AlertaHandlers == nil {
+	if len(node.AlertaHandlers) == 0 {
 		return
 	}
 	rule.Alerts = append(rule.Alerts, "alerta")
@@ -709,7 +709,7 @@ func extractAlerta(node *pipeline.AlertNode, rule *chronograf.AlertRule) {
 }
 
 func extractSensu(node *pipeline.AlertNode, rule *chronograf.AlertRule) {
-	if node.SensuHandlers == nil {
+	if len(node.SensuHandlers) == 0 {
 		return
 	}
 	rule.Alerts = append(rule.Alerts, "sensu")
@@ -721,7 +721,7 @@ func extractSensu(node *pipeline.AlertNode, rule *chronograf.AlertRule) {
 }
 
 func extractSlack(node *pipeline.AlertNode, rule *chronograf.AlertRule) {
-	if node.SlackHandlers == nil {
+	if len(node.SlackHandlers) == 0 {
 		return
 	}
 	rule.Alerts = append(rule.Alerts, "slack")
@@ -753,7 +753,7 @@ func extractSlack(node *pipeline.AlertNode, rule *chronograf.AlertRule) {
 	rule.AlertNodes = append(rule.AlertNodes, alert)
 }
 func extractTalk(node *pipeline.AlertNode, rule *chronograf.AlertRule) {
-	if node.TalkHandlers == nil {
+	if len(node.TalkHandlers) == 0 {
 		return
 	}
 	rule.Alerts = append(rule.Alerts, "talk")
@@ -764,7 +764,7 @@ func extractTalk(node *pipeline.AlertNode, rule *chronograf.AlertRule) {
 	rule.AlertNodes = append(rule.AlertNodes, alert)
 }
 func extractTelegram(node *pipeline.AlertNode, rule *chronograf.AlertRule) {
-	if node.TelegramHandlers == nil {
+	if len(node.TelegramHandlers) == 0 {
 		return
 	}
 	rule.Alerts = append(rule.Alerts, "telegram")
@@ -802,7 +802,7 @@ func extractTelegram(node *pipeline.AlertNode, rule *chronograf.AlertRule) {
 }
 
 func extractTCP(node *pipeline.AlertNode, rule *chronograf.AlertRule) {
-	if node.TcpHandlers == nil {
+	if len(node.TcpHandlers) == 0 {
 		return
 	}
 	rule.Alerts = append(rule.Alerts, "tcp")
@@ -819,7 +819,7 @@ func extractTCP(node *pipeline.AlertNode, rule *chronograf.AlertRule) {
 }
 
 func extractLog(node *pipeline.AlertNode, rule *chronograf.AlertRule) {
-	if node.LogHandlers == nil {
+	if len(node.LogHandlers) == 0 {
 		return
 	}
 	rule.Alerts = append(rule.Alerts, "log")
@@ -836,7 +836,7 @@ func extractLog(node *pipeline.AlertNode, rule *chronograf.AlertRule) {
 }
 
 func extractExec(node *pipeline.AlertNode, rule *chronograf.AlertRule) {
-	if node.ExecHandlers == nil {
+	if len(node.ExecHandlers) == 0 {
 		return
 	}
 	rule.Alerts = append(rule.Alerts, "exec")
@@ -853,7 +853,7 @@ func extractExec(node *pipeline.AlertNode, rule *chronograf.AlertRule) {
 }
 
 func extractPushover(node *pipeline.AlertNode, rule *chronograf.AlertRule) {
-	if node.PushoverHandlers == nil {
+	if len(node.PushoverHandlers) == 0 {
 		return
 	}
 	rule.Alerts = append(rule.Alerts, "pushover")