From 928be9877cef28c1b488dde0c1d1b1a6f037effc Mon Sep 17 00:00:00 2001
From: deniz kusefoglu <denizk@gmail.com>
Date: Thu, 7 Dec 2017 15:53:10 -0800
Subject: [PATCH] Save or Exit alert rule before redirecting to config page

---
 ui/src/kapacitor/components/HandlerEmpty.js   | 26 +++++----
 ui/src/kapacitor/components/HandlerOptions.js | 43 ++++++++------
 ui/src/kapacitor/components/KapacitorRule.js  | 58 ++++++++++++++++++-
 ui/src/kapacitor/components/RuleHandlers.js   | 14 ++++-
 .../components/handlers/AlertaHandler.js      | 16 ++++-
 .../components/handlers/EmailHandler.js       | 12 +++-
 .../components/handlers/HipchatHandler.js     | 16 ++++-
 .../components/handlers/OpsgenieHandler.js    | 15 ++++-
 .../components/handlers/PagerdutyHandler.js   | 15 ++++-
 .../components/handlers/PushoverHandler.js    | 15 ++++-
 .../components/handlers/SensuHandler.js       | 15 ++++-
 .../components/handlers/SlackHandler.js       | 15 ++++-
 .../components/handlers/TalkHandler.js        | 15 ++++-
 .../components/handlers/TelegramHandler.js    | 15 ++++-
 .../components/handlers/VictoropsHandler.js   | 15 ++++-
 ui/src/kapacitor/reducers/rules.js            | 12 ++--
 16 files changed, 245 insertions(+), 72 deletions(-)

diff --git a/ui/src/kapacitor/components/HandlerEmpty.js b/ui/src/kapacitor/components/HandlerEmpty.js
index 17c293f81b..b553a3968c 100644
--- a/ui/src/kapacitor/components/HandlerEmpty.js
+++ b/ui/src/kapacitor/components/HandlerEmpty.js
@@ -1,26 +1,30 @@
 import React, {PropTypes} from 'react'
-import {Link} from 'react-router'
 
-const HandlerEmpty = ({configLink}) =>
+const HandlerEmpty = ({onGoToConfig, validationError}) =>
   <div className="endpoint-tab-contents">
     <div className="endpoint-tab--parameters">
       <div className="endpoint-tab--parameters--empty">
         <p>This handler does not seem to be configured.</p>
-        <Link to={configLink} title="Configuration Page">
-          <div className="form-group-submit col-xs-12 text-center">
-            <button className="btn btn-primary" type="submit">
-              Configure Alert Handlers
-            </button>
-          </div>
-        </Link>
+        <div className="form-group-submit col-xs-12 text-center">
+          <button
+            className="btn btn-primary"
+            type="submit"
+            onClick={onGoToConfig}
+          >
+            {validationError
+              ? 'Exit Rule and Configure Alert Handlers'
+              : 'Save Rule and Configure Alert Handlers'}
+          </button>
+        </div>
       </div>
     </div>
   </div>
 
-const {string} = PropTypes
+const {string, func} = PropTypes
 
 HandlerEmpty.propTypes = {
-  configLink: string,
+  onGoToConfig: func.isRequired,
+  validationError: string.isRequired,
 }
 
 export default HandlerEmpty
diff --git a/ui/src/kapacitor/components/HandlerOptions.js b/ui/src/kapacitor/components/HandlerOptions.js
index 05be22b42c..9a8861326b 100644
--- a/ui/src/kapacitor/components/HandlerOptions.js
+++ b/ui/src/kapacitor/components/HandlerOptions.js
@@ -26,9 +26,10 @@ class HandlerOptions extends Component {
     const {
       selectedHandler,
       handleModifyHandler,
-      configLink,
       rule,
       updateDetails,
+      onGoToConfig,
+      validationError,
     } = this.props
     switch (selectedHandler && selectedHandler.type) {
       case 'post':
@@ -36,7 +37,6 @@ class HandlerOptions extends Component {
           <PostHandler
             selectedHandler={selectedHandler}
             handleModifyHandler={handleModifyHandler}
-            configLink={configLink}
           />
         )
       case 'tcp':
@@ -44,7 +44,6 @@ class HandlerOptions extends Component {
           <TcpHandler
             selectedHandler={selectedHandler}
             handleModifyHandler={handleModifyHandler}
-            configLink={configLink}
           />
         )
       case 'exec':
@@ -52,7 +51,6 @@ class HandlerOptions extends Component {
           <ExecHandler
             selectedHandler={selectedHandler}
             handleModifyHandler={handleModifyHandler}
-            configLink={configLink}
           />
         )
       case 'log':
@@ -60,7 +58,6 @@ class HandlerOptions extends Component {
           <LogHandler
             selectedHandler={selectedHandler}
             handleModifyHandler={handleModifyHandler}
-            configLink={configLink}
           />
         )
       case 'email':
@@ -68,7 +65,8 @@ class HandlerOptions extends Component {
           <EmailHandler
             selectedHandler={selectedHandler}
             handleModifyHandler={handleModifyHandler}
-            configLink={configLink}
+            onGoToConfig={onGoToConfig}
+            validationError={validationError}
             updateDetails={updateDetails}
             rule={rule}
           />
@@ -78,7 +76,8 @@ class HandlerOptions extends Component {
           <AlertaHandler
             selectedHandler={selectedHandler}
             handleModifyHandler={handleModifyHandler}
-            configLink={configLink}
+            onGoToConfig={onGoToConfig}
+            validationError={validationError}
           />
         )
       case 'hipChat':
@@ -86,7 +85,8 @@ class HandlerOptions extends Component {
           <HipchatHandler
             selectedHandler={selectedHandler}
             handleModifyHandler={handleModifyHandler}
-            configLink={configLink}
+            onGoToConfig={onGoToConfig}
+            validationError={validationError}
           />
         )
       case 'opsGenie':
@@ -94,7 +94,8 @@ class HandlerOptions extends Component {
           <OpsgenieHandler
             selectedHandler={selectedHandler}
             handleModifyHandler={handleModifyHandler}
-            configLink={configLink}
+            onGoToConfig={onGoToConfig}
+            validationError={validationError}
           />
         )
       case 'pagerDuty':
@@ -102,7 +103,8 @@ class HandlerOptions extends Component {
           <PagerdutyHandler
             selectedHandler={selectedHandler}
             handleModifyHandler={handleModifyHandler}
-            configLink={configLink}
+            onGoToConfig={onGoToConfig}
+            validationError={validationError}
           />
         )
       case 'pushover':
@@ -110,7 +112,8 @@ class HandlerOptions extends Component {
           <PushoverHandler
             selectedHandler={selectedHandler}
             handleModifyHandler={handleModifyHandler}
-            configLink={configLink}
+            onGoToConfig={onGoToConfig}
+            validationError={validationError}
           />
         )
       case 'sensu':
@@ -118,7 +121,8 @@ class HandlerOptions extends Component {
           <SensuHandler
             selectedHandler={selectedHandler}
             handleModifyHandler={handleModifyHandler}
-            configLink={configLink}
+            onGoToConfig={onGoToConfig}
+            validationError={validationError}
           />
         )
       case 'slack':
@@ -126,7 +130,8 @@ class HandlerOptions extends Component {
           <SlackHandler
             selectedHandler={selectedHandler}
             handleModifyHandler={handleModifyHandler}
-            configLink={configLink}
+            onGoToConfig={onGoToConfig}
+            validationError={validationError}
           />
         )
       case 'talk':
@@ -134,7 +139,8 @@ class HandlerOptions extends Component {
           <TalkHandler
             selectedHandler={selectedHandler}
             handleModifyHandler={handleModifyHandler}
-            configLink={configLink}
+            onGoToConfig={onGoToConfig}
+            validationError={validationError}
           />
         )
       case 'telegram':
@@ -142,7 +148,8 @@ class HandlerOptions extends Component {
           <TelegramHandler
             selectedHandler={selectedHandler}
             handleModifyHandler={handleModifyHandler}
-            configLink={configLink}
+            onGoToConfig={onGoToConfig}
+            validationError={validationError}
           />
         )
       case 'victorOps':
@@ -150,7 +157,8 @@ class HandlerOptions extends Component {
           <VictoropsHandler
             selectedHandler={selectedHandler}
             handleModifyHandler={handleModifyHandler}
-            configLink={configLink}
+            onGoToConfig={onGoToConfig}
+            validationError={validationError}
           />
         )
       default:
@@ -164,9 +172,10 @@ const {func, shape, string} = PropTypes
 HandlerOptions.propTypes = {
   selectedHandler: shape({}).isRequired,
   handleModifyHandler: func.isRequired,
-  configLink: string,
   updateDetails: func,
   rule: shape({}),
+  onGoToConfig: func.isRequired,
+  validationError: string.isRequired,
 }
 
 export default HandlerOptions
diff --git a/ui/src/kapacitor/components/KapacitorRule.js b/ui/src/kapacitor/components/KapacitorRule.js
index 1849596bc0..eb1b260e3e 100644
--- a/ui/src/kapacitor/components/KapacitorRule.js
+++ b/ui/src/kapacitor/components/KapacitorRule.js
@@ -74,6 +74,58 @@ class KapacitorRule extends Component {
       })
   }
 
+  handleSaveToConfig = () => {
+    const {
+      addFlashMessage,
+      queryConfigs,
+      rule,
+      router,
+      configLink,
+      kapacitor,
+    } = this.props
+    const updatedRule = Object.assign({}, rule, {
+      query: queryConfigs[rule.queryID],
+    })
+    if (this.validationError()) {
+      router.push(configLink)
+    } else if (rule.id === 'new') {
+      const newRule = Object.assign({}, rule, {
+        query: queryConfigs[rule.queryID],
+      })
+      delete newRule.queryID
+
+      createRule(kapacitor, newRule)
+        .then(() => {
+          router.push(configLink)
+          addFlashMessage({
+            type: 'success',
+            text: 'Rule successfully created',
+          })
+        })
+        .catch(() => {
+          addFlashMessage({
+            type: 'error',
+            text: 'There was a problem creating the rule',
+          })
+        })
+    } else {
+      editRule(updatedRule)
+        .then(() => {
+          router.push(configLink)
+          addFlashMessage({
+            type: 'success',
+            text: `${rule.name} successfully saved!`,
+          })
+        })
+        .catch(() => {
+          addFlashMessage({
+            type: 'error',
+            text: `There was a problem saving ${rule.name}`,
+          })
+        })
+    }
+  }
+
   handleAddEvery = frequency => {
     const {rule: {id: ruleID}, ruleActions: {addEvery}} = this.props
     addEvery(ruleID, frequency)
@@ -143,7 +195,6 @@ class KapacitorRule extends Component {
       queryConfigs,
       handlersFromConfig,
       queryConfigActions,
-      configLink,
     } = this.props
     const {chooseTrigger, updateRuleValues} = ruleActions
     const {timeRange} = this.state
@@ -181,10 +232,11 @@ class KapacitorRule extends Component {
                     onChooseTimeRange={this.handleChooseTimeRange}
                   />
                   <RuleHandlers
-                    configLink={configLink}
                     rule={rule}
                     ruleActions={ruleActions}
                     handlersFromConfig={handlersFromConfig}
+                    onGoToConfig={this.handleSaveToConfig}
+                    validationError={this.validationError()}
                   />
                   <RuleMessage rule={rule} ruleActions={ruleActions} />
                 </div>
@@ -215,7 +267,7 @@ KapacitorRule.propTypes = {
     push: func.isRequired,
   }).isRequired,
   kapacitor: shape({}).isRequired,
-  configLink: string,
+  configLink: string.isRequired,
 }
 
 export default KapacitorRule
diff --git a/ui/src/kapacitor/components/RuleHandlers.js b/ui/src/kapacitor/components/RuleHandlers.js
index 3285def9f9..eac544a23e 100644
--- a/ui/src/kapacitor/components/RuleHandlers.js
+++ b/ui/src/kapacitor/components/RuleHandlers.js
@@ -142,7 +142,13 @@ class RuleHandlers extends Component {
   }
 
   render() {
-    const {handlersFromConfig, configLink, rule, ruleActions} = this.props
+    const {
+      handlersFromConfig,
+      rule,
+      ruleActions,
+      onGoToConfig,
+      validationError,
+    } = this.props
     const {handlersOnThisAlert, selectedHandler} = this.state
     const alerts = _.map([...DEFAULT_HANDLERS, ...handlersFromConfig], a => {
       return {...a, text: a.type}
@@ -178,11 +184,12 @@ class RuleHandlers extends Component {
                   handleRemoveHandler={this.handleRemoveHandler}
                 />
                 <HandlerOptions
-                  configLink={configLink}
                   selectedHandler={selectedHandler}
                   handleModifyHandler={this.handleModifyHandler}
                   updateDetails={ruleActions.updateDetails}
                   rule={rule}
+                  onGoToConfig={onGoToConfig}
+                  validationError={validationError}
                 />
               </div>
             : null}
@@ -203,7 +210,8 @@ RuleHandlers.propTypes = {
     updateAlertProperty: func.isRequired,
   }).isRequired,
   handlersFromConfig: arrayOf(shape({})),
-  configLink: string,
+  onGoToConfig: func.isRequired,
+  validationError: string.isRequired,
 }
 
 export default RuleHandlers
diff --git a/ui/src/kapacitor/components/handlers/AlertaHandler.js b/ui/src/kapacitor/components/handlers/AlertaHandler.js
index 1348450293..07a0ea0b2b 100644
--- a/ui/src/kapacitor/components/handlers/AlertaHandler.js
+++ b/ui/src/kapacitor/components/handlers/AlertaHandler.js
@@ -2,7 +2,12 @@ import React, {PropTypes} from 'react'
 import HandlerInput from 'src/kapacitor/components/HandlerInput'
 import HandlerEmpty from 'src/kapacitor/components/HandlerEmpty'
 
-const AlertaHandler = ({selectedHandler, handleModifyHandler, configLink}) =>
+const AlertaHandler = ({
+  selectedHandler,
+  handleModifyHandler,
+  onGoToConfig,
+  validationError,
+}) =>
   selectedHandler.enabled
     ? <div className="endpoint-tab-contents">
         <div className="endpoint-tab--parameters">
@@ -76,14 +81,19 @@ const AlertaHandler = ({selectedHandler, handleModifyHandler, configLink}) =>
           </div>
         </div>
       </div>
-    : <HandlerEmpty configLink={configLink} />
+    : <HandlerEmpty
+        onGoToConfig={onGoToConfig}
+        validationError={validationError}
+      />
 
 const {func, shape, string} = PropTypes
 
 AlertaHandler.propTypes = {
   selectedHandler: shape({}).isRequired,
   handleModifyHandler: func.isRequired,
-  configLink: string,
+
+  onGoToConfig: func.isRequired,
+  validationError: string.isRequired,
 }
 
 export default AlertaHandler
diff --git a/ui/src/kapacitor/components/handlers/EmailHandler.js b/ui/src/kapacitor/components/handlers/EmailHandler.js
index f9ba7336ae..3a6ab45a82 100644
--- a/ui/src/kapacitor/components/handlers/EmailHandler.js
+++ b/ui/src/kapacitor/components/handlers/EmailHandler.js
@@ -8,7 +8,8 @@ const EmailHandler = ({
   updateDetails,
   selectedHandler,
   handleModifyHandler,
-  configLink,
+  onGoToConfig,
+  validationError,
 }) =>
   selectedHandler.enabled
     ? <div className="endpoint-tab-contents">
@@ -60,16 +61,21 @@ const EmailHandler = ({
           </div>
         </div>
       </div>
-    : <HandlerEmpty configLink={configLink} />
+    : <HandlerEmpty
+        onGoToConfig={onGoToConfig}
+        validationError={validationError}
+      />
 
 const {func, shape, string} = PropTypes
 
 EmailHandler.propTypes = {
   selectedHandler: shape({}).isRequired,
   handleModifyHandler: func.isRequired,
-  configLink: string,
+
   updateDetails: func,
   rule: shape({}),
+  onGoToConfig: func.isRequired,
+  validationError: string.isRequired,
 }
 
 export default EmailHandler
diff --git a/ui/src/kapacitor/components/handlers/HipchatHandler.js b/ui/src/kapacitor/components/handlers/HipchatHandler.js
index 600bdffb14..19c3ef1108 100644
--- a/ui/src/kapacitor/components/handlers/HipchatHandler.js
+++ b/ui/src/kapacitor/components/handlers/HipchatHandler.js
@@ -2,7 +2,12 @@ import React, {PropTypes} from 'react'
 import HandlerInput from 'src/kapacitor/components/HandlerInput'
 import HandlerEmpty from 'src/kapacitor/components/HandlerEmpty'
 
-const HipchatHandler = ({selectedHandler, handleModifyHandler, configLink}) =>
+const HipchatHandler = ({
+  selectedHandler,
+  handleModifyHandler,
+  onGoToConfig,
+  validationError,
+}) =>
   selectedHandler.enabled
     ? <div className="endpoint-tab-contents">
         <div className="endpoint-tab--parameters">
@@ -35,14 +40,19 @@ const HipchatHandler = ({selectedHandler, handleModifyHandler, configLink}) =>
           </div>
         </div>
       </div>
-    : <HandlerEmpty configLink={configLink} />
+    : <HandlerEmpty
+        onGoToConfig={onGoToConfig}
+        validationError={validationError}
+      />
 
 const {func, shape, string} = PropTypes
 
 HipchatHandler.propTypes = {
   selectedHandler: shape({}).isRequired,
   handleModifyHandler: func.isRequired,
-  configLink: string,
+
+  onGoToConfig: func.isRequired,
+  validationError: string.isRequired,
 }
 
 export default HipchatHandler
diff --git a/ui/src/kapacitor/components/handlers/OpsgenieHandler.js b/ui/src/kapacitor/components/handlers/OpsgenieHandler.js
index ea43c1fa27..d7afb1fe81 100644
--- a/ui/src/kapacitor/components/handlers/OpsgenieHandler.js
+++ b/ui/src/kapacitor/components/handlers/OpsgenieHandler.js
@@ -2,7 +2,12 @@ import React, {PropTypes} from 'react'
 import HandlerInput from 'src/kapacitor/components/HandlerInput'
 import HandlerEmpty from 'src/kapacitor/components/HandlerEmpty'
 
-const OpsgenieHandler = ({selectedHandler, handleModifyHandler, configLink}) =>
+const OpsgenieHandler = ({
+  selectedHandler,
+  handleModifyHandler,
+  onGoToConfig,
+  validationError,
+}) =>
   selectedHandler.enabled
     ? <div className="endpoint-tab-contents">
         <div className="endpoint-tab--parameters">
@@ -42,14 +47,18 @@ const OpsgenieHandler = ({selectedHandler, handleModifyHandler, configLink}) =>
           </div>
         </div>
       </div>
-    : <HandlerEmpty configLink={configLink} />
+    : <HandlerEmpty
+        onGoToConfig={onGoToConfig}
+        validationError={validationError}
+      />
 
 const {func, shape, string} = PropTypes
 
 OpsgenieHandler.propTypes = {
   selectedHandler: shape({}).isRequired,
   handleModifyHandler: func.isRequired,
-  configLink: string,
+  onGoToConfig: func.isRequired,
+  validationError: string.isRequired,
 }
 
 export default OpsgenieHandler
diff --git a/ui/src/kapacitor/components/handlers/PagerdutyHandler.js b/ui/src/kapacitor/components/handlers/PagerdutyHandler.js
index 0928a02d8d..1b2c8ffb39 100644
--- a/ui/src/kapacitor/components/handlers/PagerdutyHandler.js
+++ b/ui/src/kapacitor/components/handlers/PagerdutyHandler.js
@@ -2,7 +2,12 @@ import React, {PropTypes} from 'react'
 import HandlerInput from 'src/kapacitor/components/HandlerInput'
 import HandlerEmpty from 'src/kapacitor/components/HandlerEmpty'
 
-const PagerdutyHandler = ({selectedHandler, handleModifyHandler, configLink}) =>
+const PagerdutyHandler = ({
+  selectedHandler,
+  handleModifyHandler,
+  onGoToConfig,
+  validationError,
+}) =>
   selectedHandler.enabled
     ? <div className="endpoint-tab-contents">
         <div className="endpoint-tab--parameters">
@@ -18,14 +23,18 @@ const PagerdutyHandler = ({selectedHandler, handleModifyHandler, configLink}) =>
           />
         </div>
       </div>
-    : <HandlerEmpty configLink={configLink} />
+    : <HandlerEmpty
+        onGoToConfig={onGoToConfig}
+        validationError={validationError}
+      />
 
 const {func, shape, string} = PropTypes
 
 PagerdutyHandler.propTypes = {
   selectedHandler: shape({}).isRequired,
   handleModifyHandler: func.isRequired,
-  configLink: string,
+  onGoToConfig: func.isRequired,
+  validationError: string.isRequired,
 }
 
 export default PagerdutyHandler
diff --git a/ui/src/kapacitor/components/handlers/PushoverHandler.js b/ui/src/kapacitor/components/handlers/PushoverHandler.js
index c008335830..8d5fb9b5b8 100644
--- a/ui/src/kapacitor/components/handlers/PushoverHandler.js
+++ b/ui/src/kapacitor/components/handlers/PushoverHandler.js
@@ -2,7 +2,12 @@ import React, {PropTypes} from 'react'
 import HandlerInput from 'src/kapacitor/components/HandlerInput'
 import HandlerEmpty from 'src/kapacitor/components/HandlerEmpty'
 
-const PushoverHandler = ({selectedHandler, handleModifyHandler, configLink}) =>
+const PushoverHandler = ({
+  selectedHandler,
+  handleModifyHandler,
+  onGoToConfig,
+  validationError,
+}) =>
   selectedHandler.enabled
     ? <div className="endpoint-tab-contents">
         <div className="endpoint-tab--parameters">
@@ -69,14 +74,18 @@ const PushoverHandler = ({selectedHandler, handleModifyHandler, configLink}) =>
           </div>
         </div>
       </div>
-    : <HandlerEmpty configLink={configLink} />
+    : <HandlerEmpty
+        onGoToConfig={onGoToConfig}
+        validationError={validationError}
+      />
 
 const {func, shape, string} = PropTypes
 
 PushoverHandler.propTypes = {
   selectedHandler: shape({}).isRequired,
   handleModifyHandler: func.isRequired,
-  configLink: string,
+  onGoToConfig: func.isRequired,
+  validationError: string.isRequired,
 }
 
 export default PushoverHandler
diff --git a/ui/src/kapacitor/components/handlers/SensuHandler.js b/ui/src/kapacitor/components/handlers/SensuHandler.js
index e99e44f897..343d539bdf 100644
--- a/ui/src/kapacitor/components/handlers/SensuHandler.js
+++ b/ui/src/kapacitor/components/handlers/SensuHandler.js
@@ -2,7 +2,12 @@ import React, {PropTypes} from 'react'
 import HandlerInput from 'src/kapacitor/components/HandlerInput'
 import HandlerEmpty from 'src/kapacitor/components/HandlerEmpty'
 
-const SensuHandler = ({selectedHandler, handleModifyHandler, configLink}) =>
+const SensuHandler = ({
+  selectedHandler,
+  handleModifyHandler,
+  onGoToConfig,
+  validationError,
+}) =>
   selectedHandler.enabled
     ? <div className="endpoint-tab-contents">
         <div className="endpoint-tab--parameters">
@@ -40,14 +45,18 @@ const SensuHandler = ({selectedHandler, handleModifyHandler, configLink}) =>
           </div>
         </div>
       </div>
-    : <HandlerEmpty configLink={configLink} />
+    : <HandlerEmpty
+        onGoToConfig={onGoToConfig}
+        validationError={validationError}
+      />
 
 const {func, shape, string} = PropTypes
 
 SensuHandler.propTypes = {
   selectedHandler: shape({}).isRequired,
   handleModifyHandler: func.isRequired,
-  configLink: string,
+  onGoToConfig: func.isRequired,
+  validationError: string.isRequired,
 }
 
 export default SensuHandler
diff --git a/ui/src/kapacitor/components/handlers/SlackHandler.js b/ui/src/kapacitor/components/handlers/SlackHandler.js
index b46b11f02e..e3185cbabb 100644
--- a/ui/src/kapacitor/components/handlers/SlackHandler.js
+++ b/ui/src/kapacitor/components/handlers/SlackHandler.js
@@ -2,7 +2,12 @@ import React, {PropTypes} from 'react'
 import HandlerInput from 'src/kapacitor/components/HandlerInput'
 import HandlerEmpty from 'src/kapacitor/components/HandlerEmpty'
 
-const SlackHandler = ({selectedHandler, handleModifyHandler, configLink}) =>
+const SlackHandler = ({
+  selectedHandler,
+  handleModifyHandler,
+  onGoToConfig,
+  validationError,
+}) =>
   selectedHandler.enabled
     ? <div className="endpoint-tab-contents">
         <div className="endpoint-tab--parameters">
@@ -50,14 +55,18 @@ const SlackHandler = ({selectedHandler, handleModifyHandler, configLink}) =>
           </div>
         </div>
       </div>
-    : <HandlerEmpty configLink={configLink} />
+    : <HandlerEmpty
+        onGoToConfig={onGoToConfig}
+        validationError={validationError}
+      />
 
 const {func, shape, string} = PropTypes
 
 SlackHandler.propTypes = {
   selectedHandler: shape({}).isRequired,
   handleModifyHandler: func.isRequired,
-  configLink: string,
+  onGoToConfig: func.isRequired,
+  validationError: string.isRequired,
 }
 
 export default SlackHandler
diff --git a/ui/src/kapacitor/components/handlers/TalkHandler.js b/ui/src/kapacitor/components/handlers/TalkHandler.js
index e3a49b1eea..e1fe9b081f 100644
--- a/ui/src/kapacitor/components/handlers/TalkHandler.js
+++ b/ui/src/kapacitor/components/handlers/TalkHandler.js
@@ -2,7 +2,12 @@ import React, {PropTypes} from 'react'
 import HandlerInput from 'src/kapacitor/components/HandlerInput'
 import HandlerEmpty from 'src/kapacitor/components/HandlerEmpty'
 
-const TalkHandler = ({selectedHandler, handleModifyHandler, configLink}) =>
+const TalkHandler = ({
+  selectedHandler,
+  handleModifyHandler,
+  onGoToConfig,
+  validationError,
+}) =>
   selectedHandler.enabled
     ? <div className="endpoint-tab-contents">
         <div className="endpoint-tab--parameters">
@@ -28,14 +33,18 @@ const TalkHandler = ({selectedHandler, handleModifyHandler, configLink}) =>
           </div>
         </div>
       </div>
-    : <HandlerEmpty configLink={configLink} />
+    : <HandlerEmpty
+        onGoToConfig={onGoToConfig}
+        validationError={validationError}
+      />
 
 const {func, shape, string} = PropTypes
 
 TalkHandler.propTypes = {
   selectedHandler: shape({}).isRequired,
   handleModifyHandler: func.isRequired,
-  configLink: string,
+  onGoToConfig: func.isRequired,
+  validationError: string.isRequired,
 }
 
 export default TalkHandler
diff --git a/ui/src/kapacitor/components/handlers/TelegramHandler.js b/ui/src/kapacitor/components/handlers/TelegramHandler.js
index ef2db63334..680bfd677d 100644
--- a/ui/src/kapacitor/components/handlers/TelegramHandler.js
+++ b/ui/src/kapacitor/components/handlers/TelegramHandler.js
@@ -3,7 +3,12 @@ import HandlerInput from 'src/kapacitor/components/HandlerInput'
 import HandlerCheckbox from 'src/kapacitor/components/HandlerCheckbox'
 import HandlerEmpty from 'src/kapacitor/components/HandlerEmpty'
 
-const TelegramHandler = ({selectedHandler, handleModifyHandler, configLink}) =>
+const TelegramHandler = ({
+  selectedHandler,
+  handleModifyHandler,
+  onGoToConfig,
+  validationError,
+}) =>
   selectedHandler.enabled
     ? <div className="endpoint-tab-contents">
         <div className="endpoint-tab--parameters">
@@ -53,14 +58,18 @@ const TelegramHandler = ({selectedHandler, handleModifyHandler, configLink}) =>
           </div>
         </div>
       </div>
-    : <HandlerEmpty configLink={configLink} />
+    : <HandlerEmpty
+        onGoToConfig={onGoToConfig}
+        validationError={validationError}
+      />
 
 const {func, shape, string} = PropTypes
 
 TelegramHandler.propTypes = {
   selectedHandler: shape({}).isRequired,
   handleModifyHandler: func.isRequired,
-  configLink: string,
+  onGoToConfig: func.isRequired,
+  validationError: string.isRequired,
 }
 
 export default TelegramHandler
diff --git a/ui/src/kapacitor/components/handlers/VictoropsHandler.js b/ui/src/kapacitor/components/handlers/VictoropsHandler.js
index 9208cf76bd..6d86638138 100644
--- a/ui/src/kapacitor/components/handlers/VictoropsHandler.js
+++ b/ui/src/kapacitor/components/handlers/VictoropsHandler.js
@@ -2,7 +2,12 @@ import React, {PropTypes} from 'react'
 import HandlerInput from 'src/kapacitor/components/HandlerInput'
 import HandlerEmpty from 'src/kapacitor/components/HandlerEmpty'
 
-const VictoropsHandler = ({selectedHandler, handleModifyHandler, configLink}) =>
+const VictoropsHandler = ({
+  selectedHandler,
+  handleModifyHandler,
+  onGoToConfig,
+  validationError,
+}) =>
   selectedHandler.enabled
     ? <div className="endpoint-tab-contents">
         <div className="endpoint-tab--parameters">
@@ -34,14 +39,18 @@ const VictoropsHandler = ({selectedHandler, handleModifyHandler, configLink}) =>
           </div>
         </div>
       </div>
-    : <HandlerEmpty configLink={configLink} />
+    : <HandlerEmpty
+        onGoToConfig={onGoToConfig}
+        validationError={validationError}
+      />
 
 const {func, shape, string} = PropTypes
 
 VictoropsHandler.propTypes = {
   selectedHandler: shape({}).isRequired,
   handleModifyHandler: func.isRequired,
-  configLink: string,
+  onGoToConfig: func.isRequired,
+  validationError: string.isRequired,
 }
 
 export default VictoropsHandler
diff --git a/ui/src/kapacitor/reducers/rules.js b/ui/src/kapacitor/reducers/rules.js
index 46ec0ebdad..6fe0f430b6 100644
--- a/ui/src/kapacitor/reducers/rules.js
+++ b/ui/src/kapacitor/reducers/rules.js
@@ -80,11 +80,13 @@ export default function rules(state = {}, action) {
       const {ruleID, alerts} = action.payload
       const alertNodesByType = {}
       _.forEach(alerts, ep => {
-        const existing = _.get(alertNodesByType, ep.type, [])
-        alertNodesByType[ep.type] = [
-          ...existing,
-          _.pick(ep, ALERTS_TO_RULE[ep.type]),
-        ]
+        if (ep.enabled) {
+          const existing = _.get(alertNodesByType, ep.type, [])
+          alertNodesByType[ep.type] = [
+            ...existing,
+            _.pick(ep, ALERTS_TO_RULE[ep.type]),
+          ]
+        }
       })
       return Object.assign({}, state, {
         [ruleID]: Object.assign({}, state[ruleID], {