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,6 +99,16 @@ const AlertOutputs = React.createClass({
       <div className="panel-body">
         <h4 className="text-center">Alert Endpoints</h4>
         <br/>
+        { 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>
@@ -115,6 +129,10 @@ const AlertOutputs = React.createClass({
           </div>
         </div>
       );
+    } else {
+      body = (<p className="error">Cannot connect.</p>);
+    }
+    return body;
   },
 
   renderAlertConfig(endpoint) {

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.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'});
     });
   },