Warn when we can't ping the kapacitor

ui/src/kapacitor/components/AlertOutputs.js

@@ -32,6 +32,7 @@ const AlertOutputs = React.createClass({
       telegramConfig: null,
       hipchatConfig: null,
       sensuConfig: null,
+      canConnect: false,
     };
   },
 
@@ -51,6 +52,9 @@ const AlertOutputs = React.createClass({
         victoropsConfig: this.getSection(sections, 'victorops'),
         sensuConfig: this.getSection(sections, 'sensu'),
       });
+      this.setState({canConnect: true});
+    }).catch(() => {
+      this.setState({canConnect: false});
     });
   },
 
@@ -95,28 +99,42 @@ const AlertOutputs = React.createClass({
       <div className="panel-body">
         <h4 className="text-center">Alert Endpoints</h4>
         <br/>
-        <div className="row">
-          <div className="form-group col-xs-7 col-sm-5 col-sm-offset-2">
-            <label htmlFor="alert-endpoint" className="sr-only">Alert Enpoint</label>
-            <select className="form-control" id="source" onChange={this.changeSelectedEndpoint}>
-              <option value="alerta">Alerta</option>
-              <option value="hipchat">HipChat</option>
-              <option value="pagerduty">PagerDuty</option>
-              <option value="sensu">Sensu</option>
-              <option value="slack">Slack</option>
-              <option value="smtp">SMTP</option>
-              <option value="telegram">Telegram</option>
-              <option value="victorops">VictorOps</option>
-            </select>
-          </div>
-        </div>
-        <div className="row">
-          {this.renderAlertConfig(this.state.selectedEndpoint)}
-        </div>
+        { this.renderBody() }
       </div>
     );
   },
 
+  renderBody() {
+    let body;
+    if (this.state.canConnect) {
+      body = (
+        <div>
+          <div className="row">
+            <div className="form-group col-xs-7 col-sm-5 col-sm-offset-2">
+              <label htmlFor="alert-endpoint" className="sr-only">Alert Enpoint</label>
+              <select className="form-control" id="source" onChange={this.changeSelectedEndpoint}>
+                <option value="alerta">Alerta</option>
+                <option value="hipchat">HipChat</option>
+                <option value="pagerduty">PagerDuty</option>
+                <option value="sensu">Sensu</option>
+                <option value="slack">Slack</option>
+                <option value="smtp">SMTP</option>
+                <option value="telegram">Telegram</option>
+                <option value="victorops">VictorOps</option>
+              </select>
+            </div>
+          </div>
+          <div className="row">
+            {this.renderAlertConfig(this.state.selectedEndpoint)}
+          </div>
+        </div>
+      );
+    } else {
+      body = (<p className="error">Cannot connect.</p>);
+    }
+    return body;
+  },
+
   renderAlertConfig(endpoint) {
     const save = (properties) => {
       this.handleSaveConfig(endpoint, properties);

ui/src/kapacitor/containers/KapacitorPage.js

@@ -1,6 +1,7 @@
 import React, {PropTypes} from 'react';
-import {getKapacitor, createKapacitor, updateKapacitor} from 'shared/apis';
+import {createKapacitor, updateKapacitor} from 'shared/apis';
 import AlertOutputs from '../components/AlertOutputs';
+import AJAX from 'utils/ajax';
 
 export const KapacitorPage = React.createClass({
   propTypes: {
@@ -13,6 +14,7 @@ export const KapacitorPage = React.createClass({
   getInitialState() {
     return {
       kapacitor: null,
+      canConnect: false,
     };
   },
 
@@ -21,9 +23,21 @@ export const KapacitorPage = React.createClass({
   },
 
   fetchKapacitor() {
-    getKapacitor(this.props.source).then((kapacitor) => {
+    let kapacitor;
+    const {source} = this.props;
+    AJAX({
+      url: source.links.kapacitors,
+      method: 'GET',
+    }).then(({data}) => {
+      kapacitor = data.kapacitors[0];
       this.setState({kapacitor});
+      this.pingKapacitor().then(() => {
+        // do nothing. It works :)
+      }).catch(() => {
+        this.props.addFlashMessage({type: 'error', text: 'Kapacitor found but cannot connect. Check settings.'});
+      });
     }).catch(function(_) {
+      console.error("error fetching kapacitors"); // eslint-disable-line no-console
       // do nothing for now
     });
   },
@@ -53,6 +67,14 @@ export const KapacitorPage = React.createClass({
     });
   },
 
+  pingKapacitor() {
+    const {kapacitor} = this.state;
+    return AJAX({
+      method: 'GET',
+      url: `${kapacitor.links.proxy}/?path=/kapacitor/v1/ping`,
+    });
+  },
+
   handleUpdateKapacitor() {
     const {kapacitor, newURL, newName, newUsername} = this.state;
     updateKapacitor(kapacitor, {
@@ -61,9 +83,18 @@ export const KapacitorPage = React.createClass({
       username: newUsername || kapacitor.username,
       password: this.kapacitorPassword.value,
     }).then(() => {
-      this.props.addFlashMessage({type: 'success', text: 'Kapacitor Saved!'});
-      this.fetchKapacitor();
+      this.pingKapacitor().then(() => {
+        this.props.addFlashMessage({type: 'success', text: 'Kapacitor Saved!'});
+        this.fetchKapacitor();
+      }).catch(() => {
+        this.props.addFlashMessage({type: 'error', text: 'Kapacitor Saved, but cannot connect. Check settings.'});
+      });
+      // this.canPing().then(() => {
+      // }).catch(() => {
+        // this.props.addFlashMessage({type: 'error', text: 'Kapacitor Saved, but cannot connect. Check settings.'});
+      // });
     }).catch(() => {
+      console.error(arguments); // eslint-disable-line no-console
       this.props.addFlashMessage({type: 'error', text: 'There was a problem updating the Kapacitor record'});
     });
   },