Add Sensu config

ui/src/kapacitor/components/AlertOutputs.js

@@ -4,6 +4,7 @@ import {getKapacitorConfig, updateKapacitorConfigSection, testAlertOutput} from
 import AlertaConfig from './AlertaConfig';
 import HipchatConfig from './HipchatConfig';
 import PagerdutyConfig from './PagerdutyConfig';
+import SensuConfig from './SensuConfig';
 import SlackConfig from './SlackConfig';
 import SMTPConfig from './SMTPConfig';
 import TelegramConfig from './TelegramConfig';
@@ -30,6 +31,7 @@ const AlertOutputs = React.createClass({
       slackConfig: null,
       telegramConfig: null,
       hipchatConfig: null,
+      sensuConfig: null,
     };
   },
 
@@ -47,6 +49,7 @@ const AlertOutputs = React.createClass({
         smtpConfig: this.getSection(sections, 'smtp'),
         telegramConfig: this.getSection(sections, 'telegram'),
         victoropsConfig: this.getSection(sections, 'victorops'),
+        sensuConfig: this.getSection(sections, 'sensu'),
       });
     });
   },
@@ -99,6 +102,7 @@ const AlertOutputs = React.createClass({
               <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>
@@ -142,11 +146,15 @@ const AlertOutputs = React.createClass({
       return <PagerdutyConfig onSave={save} config={this.state.pagerdutyConfig} />;
     }
 
-    if (endpoint === 'hipchat' && this.state.pagerdutyConfig) {
+    if (endpoint === 'hipchat' && this.state.hipchatConfig) {
       return <HipchatConfig onSave={save} config={this.state.hipchatConfig} />;
     }
 
-    return <div>This endpoint is not supported yet!</div>;
+    if (endpoint === 'sensu' && this.state.sensuConfig) {
+      return <SensuConfig onSave={save} config={this.state.sensuConfig} />;
+    }
+
+    return <div></div>;
   },
 });
 

ui/src/kapacitor/components/SensuConfig.js

@@ -0,0 +1,63 @@
+import React, {PropTypes} from 'react';
+
+const SensuConfig = React.createClass({
+  propTypes: {
+    config: PropTypes.shape({
+      options: PropTypes.shape({
+        source: PropTypes.string.isRequired,
+        addr: PropTypes.string.isRequired,
+      }).isRequired,
+    }).isRequired,
+    onSave: PropTypes.func.isRequired,
+  },
+
+  handleSaveAlert(e) {
+    e.preventDefault();
+
+    const properties = {
+      source: this.source.value,
+      addr: this.addr.value,
+    };
+
+    this.props.onSave(properties);
+  },
+
+  render() {
+    const {source, addr} = this.props.config.options;
+
+    return (
+      <div className="panel-body">
+        <h4 className="text-center">Alerta Alert</h4>
+        <br/>
+        <form onSubmit={this.handleSaveAlert}>
+          <div className="row">
+            <div className="col-xs-7 col-sm-8 col-sm-offset-2">
+              <p>
+                Have alerts sent to Sensu
+              </p>
+
+              <div className="form-group">
+                <label htmlFor="source">Source</label>
+                <input className="form-control" id="source" type="text" ref={(r) => this.source = r} defaultValue={source || ''}></input>
+              </div>
+
+              <div className="form-group">
+                <label htmlFor="address">Address</label>
+                <input className="form-control" id="address" type="text" ref={(r) => this.addr = r} defaultValue={addr || ''}></input>
+              </div>
+            </div>
+          </div>
+
+          <hr />
+          <div className="row">
+            <div className="form-group col-xs-5 col-sm-3 col-sm-offset-2">
+              <button className="btn btn-block btn-primary" type="submit">Save</button>
+            </div>
+          </div>
+        </form>
+      </div>
+    );
+  },
+});
+
+export default SensuConfig;