Merge pull request #2757 from influxdata/bugfix/kapacitor-test-button-errors-SMTP

Bugfix/kapacitor test button errors smtp

CHANGELOG.md

@@ -16,6 +16,7 @@
 ### Bug Fixes
 1. [#2684](https://github.com/influxdata/chronograf/pull/2684): Fix TICKscript Sensu alerts when no group by tags selected
 1. [#2735](https://github.com/influxdata/chronograf/pull/2735): Remove cli options from systemd service file
+1. [#2757](https://github.com/influxdata/chronograf/pull/2757): Added "TO" field to kapacitor SMTP config, and improved error messages for config saving and testing
 1. [#2761](https://github.com/influxdata/chronograf/pull/2761): Remove cli options from sysvinit service file
 
 ## v1.4.0.1 [2017-1-9]

ui/src/kapacitor/components/AlertTabs.js

@@ -84,11 +84,14 @@ class AlertTabs extends Component {
           type: 'success',
           text: `Alert configuration for ${section} successfully saved.`,
         })
-      } catch (error) {
+        return true
+      } catch ({data: {error}}) {
+        const errorMsg = _.join(_.drop(_.split(error, ': '), 2), ': ')
         this.props.addFlashMessage({
           type: 'error',
-          text: `There was an error saving the alert configuration for ${section}.`,
+          text: `There was an error saving the alert configuration for ${section}. ${errorMsg}`,
         })
+        return false
       }
     }
   }
@@ -97,11 +100,18 @@ class AlertTabs extends Component {
     e.preventDefault()
 
     try {
-      await testAlertOutput(this.props.kapacitor, section)
+      const {data} = await testAlertOutput(this.props.kapacitor, section)
-      this.props.addFlashMessage({
+      if (data.success) {
-        type: 'success',
+        this.props.addFlashMessage({
-        text: `Successfully triggered an alert to ${section}. If the alert does not reach its destination, please check your configuration settings.`,
+          type: 'success',
-      })
+          text: `Successfully triggered an alert to ${section}. If the alert does not reach its destination, please check your configuration settings.`,
+        })
+      } else {
+        this.props.addFlashMessage({
+          type: 'error',
+          text: `There was an error sending an alert to ${section}: ${data.message}`,
+        })
+      }
     } catch (error) {
       this.props.addFlashMessage({
         type: 'error',

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

@@ -10,7 +10,7 @@ class AlertaConfig extends Component {
     }
   }
 
-  handleSubmit = e => {
+  handleSubmit = async e => {
     e.preventDefault()
 
     const properties = {
@@ -20,8 +20,10 @@ class AlertaConfig extends Component {
       url: this.url.value,
     }
 
-    this.props.onSave(properties)
+    const success = await this.props.onSave(properties)
-    this.setState({testEnabled: true})
+    if (success) {
+      this.setState({testEnabled: true})
+    }
   }
 
   disableTest = () => {

ui/src/kapacitor/components/config/HipChatConfig.js

@@ -12,7 +12,7 @@ class HipchatConfig extends Component {
     }
   }
 
-  handleSubmit = e => {
+  handleSubmit = async e => {
     e.preventDefault()
 
     const properties = {
@@ -21,8 +21,10 @@ class HipchatConfig extends Component {
       token: this.token.value,
     }
 
-    this.props.onSave(properties)
+    const success = await this.props.onSave(properties)
-    this.setState({testEnabled: true})
+    if (success) {
+      this.setState({testEnabled: true})
+    }
   }
 
   disableTest = () => {

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

@@ -16,7 +16,7 @@ class OpsGenieConfig extends Component {
     }
   }
 
-  handleSubmit = e => {
+  handleSubmit = async e => {
     e.preventDefault()
 
     const properties = {
@@ -25,8 +25,10 @@ class OpsGenieConfig extends Component {
       recipients: this.state.currentRecipients,
     }
 
-    this.props.onSave(properties)
+    const success = await this.props.onSave(properties)
-    this.setState({testEnabled: true})
+    if (success) {
+      this.setState({testEnabled: true})
+    }
   }
 
   disableTest = () => {

ui/src/kapacitor/components/config/PagerDutyConfig.js

@@ -9,7 +9,7 @@ class PagerDutyConfig extends Component {
     }
   }
 
-  handleSubmit = e => {
+  handleSubmit = async e => {
     e.preventDefault()
 
     const properties = {
@@ -17,8 +17,10 @@ class PagerDutyConfig extends Component {
       url: this.url.value,
     }
 
-    this.props.onSave(properties)
+    const success = await this.props.onSave(properties)
-    this.setState({testEnabled: true})
+    if (success) {
+      this.setState({testEnabled: true})
+    }
   }
 
   disableTest = () => {

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

@@ -13,7 +13,7 @@ class PushoverConfig extends Component {
     }
   }
 
-  handleSubmit = e => {
+  handleSubmit = async e => {
     e.preventDefault()
 
     const properties = {
@@ -22,8 +22,10 @@ class PushoverConfig extends Component {
       'user-key': this.userKey.value,
     }
 
-    this.props.onSave(properties)
+    const success = await this.props.onSave(properties)
-    this.setState({testEnabled: true})
+    if (success) {
+      this.setState({testEnabled: true})
+    }
   }
 
   disableTest = () => {

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

@@ -8,19 +8,21 @@ class SMTPConfig extends Component {
     }
   }
 
-  handleSubmit = e => {
+  handleSubmit = async e => {
     e.preventDefault()
 
     const properties = {
       host: this.host.value,
       port: this.port.value,
       from: this.from.value,
+      to: this.to.value ? [this.to.value] : [],
       username: this.username.value,
       password: this.password.value,
     }
-
+    const success = await this.props.onSave(properties)
-    this.props.onSave(properties)
+    if (success) {
-    this.setState({testEnabled: true})
+      this.setState({testEnabled: true})
+    }
   }
 
   disableTest = () => {
@@ -28,7 +30,7 @@ class SMTPConfig extends Component {
   }
 
   render() {
-    const {host, port, from, username, password} = this.props.config.options
+    const {host, port, from, username, password, to} = this.props.config.options
 
     return (
       <form onSubmit={this.handleSubmit}>
@@ -56,7 +58,7 @@ class SMTPConfig extends Component {
           />
         </div>
 
-        <div className="form-group col-xs-12">
+        <div className="form-group col-xs-6">
           <label htmlFor="smtp-from">From Email</label>
           <input
             className="form-control"
@@ -69,6 +71,18 @@ class SMTPConfig extends Component {
           />
         </div>
 
+        <div className="form-group col-xs-12 col-md-6">
+          <label htmlFor="smtp-to">To Email</label>
+          <input
+            className="form-control"
+            id="smtp-to"
+            type="text"
+            ref={r => (this.to = r)}
+            defaultValue={to || ''}
+            onChange={this.disableTest}
+          />
+        </div>
+
         <div className="form-group col-xs-12 col-md-6">
           <label htmlFor="smtp-user">User</label>
           <input

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

@@ -8,7 +8,7 @@ class SensuConfig extends Component {
     }
   }
 
-  handleSubmit = e => {
+  handleSubmit = async e => {
     e.preventDefault()
 
     const properties = {
@@ -16,8 +16,10 @@ class SensuConfig extends Component {
       addr: this.addr.value,
     }
 
-    this.props.onSave(properties)
+    const success = await this.props.onSave(properties)
-    this.setState({testEnabled: true})
+    if (success) {
+      this.setState({testEnabled: true})
+    }
   }
 
   disableTest = () => {

ui/src/kapacitor/components/config/SlackConfig.js

@@ -10,14 +10,16 @@ class SlackConfig extends Component {
     }
   }
 
-  handleSubmit = e => {
+  handleSubmit = async e => {
     e.preventDefault()
     const properties = {
       url: this.url.value,
       channel: this.channel.value,
     }
-    this.props.onSave(properties)
+    const success = await this.props.onSave(properties)
-    this.setState({testEnabled: true})
+    if (success) {
+      this.setState({testEnabled: true})
+    }
   }
   disableTest = () => {
     this.setState({testEnabled: false})

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

@@ -10,7 +10,7 @@ class TalkConfig extends Component {
     }
   }
 
-  handleSubmit = e => {
+  handleSubmit = async e => {
     e.preventDefault()
 
     const properties = {
@@ -18,8 +18,10 @@ class TalkConfig extends Component {
       author_name: this.author.value,
     }
 
-    this.props.onSave(properties)
+    const success = await this.props.onSave(properties)
-    this.setState({testEnabled: true})
+    if (success) {
+      this.setState({testEnabled: true})
+    }
   }
 
   disableTest = () => {

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

@@ -12,7 +12,7 @@ class TelegramConfig extends Component {
     }
   }
 
-  handleSubmit = e => {
+  handleSubmit = async e => {
     e.preventDefault()
 
     let parseMode
@@ -31,8 +31,10 @@ class TelegramConfig extends Component {
       token: this.token.value,
     }
 
-    this.props.onSave(properties)
+    const success = await this.props.onSave(properties)
-    this.setState({testEnabled: true})
+    if (success) {
+      this.setState({testEnabled: true})
+    }
   }
 
   disableTest = () => {

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

@@ -10,7 +10,7 @@ class VictorOpsConfig extends Component {
     }
   }
 
-  handleSubmit = e => {
+  handleSubmit = async e => {
     e.preventDefault()
 
     const properties = {
@@ -19,8 +19,10 @@ class VictorOpsConfig extends Component {
       url: this.url.value,
     }
 
-    this.props.onSave(properties)
+    const success = await this.props.onSave(properties)
-    this.setState({testEnabled: true})
+    if (success) {
+      this.setState({testEnabled: true})
+    }
   }
 
   disableTest = () => {