From ec0ba3ba8c0713522adea0613ef1f3a4d066002b Mon Sep 17 00:00:00 2001
From: Andrew Watkins <watts@influxdb.com>
Date: Wed, 26 Oct 2016 16:25:36 -0700
Subject: [PATCH] Add Alerta and VictorOps kapacitor configs to UI

---
 ui/src/kapacitor/components/AlertOutputs.js   | 22 ++++-
 ui/src/kapacitor/components/AlertaConfig.js   | 78 ++++++++++++++++++
 ui/src/kapacitor/components/SlackConfig.js    |  4 +-
 .../kapacitor/components/VictoropsConfig.js   | 81 +++++++++++++++++++
 4 files changed, 180 insertions(+), 5 deletions(-)
 create mode 100644 ui/src/kapacitor/components/AlertaConfig.js
 create mode 100644 ui/src/kapacitor/components/VictoropsConfig.js

diff --git a/ui/src/kapacitor/components/AlertOutputs.js b/ui/src/kapacitor/components/AlertOutputs.js
index a68202c2d..06afbc31b 100644
--- a/ui/src/kapacitor/components/AlertOutputs.js
+++ b/ui/src/kapacitor/components/AlertOutputs.js
@@ -3,6 +3,8 @@ import _ from 'lodash';
 import {getKapacitorConfig, updateKapacitorConfigSection, testAlertOutput} from 'shared/apis';
 import SlackConfig from './SlackConfig';
 import SMTPConfig from './SMTPConfig';
+import VictoropsConfig from './VictoropsConfig';
+import AlertaConfig from './AlertaConfig';
 
 const AlertOutputs = React.createClass({
   propTypes: {
@@ -19,9 +21,10 @@ const AlertOutputs = React.createClass({
 
   getInitialState() {
     return {
-      selectedEndpoint: 'smtp',
+      selectedEndpoint: 'alerta',
       smtpConfig: null,
       slackConfig: null,
+      alertaConfig: null,
     };
   },
 
@@ -32,8 +35,10 @@ const AlertOutputs = React.createClass({
   refreshKapacitorConfig() {
     getKapacitorConfig(this.props.kapacitor).then(({data: {sections}}) => {
       this.setState({
+        alertaConfig: _.get(sections, ['alerta', 'elements', '0'], null),
         slackConfig: _.get(sections, ['slack', 'elements', '0'], null),
         smtpConfig: _.get(sections, ['smtp', 'elements', '0'], null),
+        victoropsConfig: _.get(sections, ['victorops', 'elements', '0'], null),
       });
     });
   },
@@ -79,8 +84,10 @@ const AlertOutputs = React.createClass({
           <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 key="smtp" value="smtp">SMTP</option>;
-              <option key="slack" value="slack">Slack</option>;
+              <option value="alerta">Alerta</option>
+              <option value="slack">Slack</option>
+              <option value="smtp">SMTP</option>
+              <option value="victorops">VictorOps</option>
             </select>
           </div>
         </div>
@@ -96,13 +103,22 @@ const AlertOutputs = React.createClass({
       this.handleSaveConfig(endpoint, properties);
     };
 
+    if (endpoint === 'alerta' && this.state.alertaConfig) {
+      return <AlertaConfig onSave={save} config={this.state.alertaConfig} />;
+    }
+
     if (endpoint === 'smtp' && this.state.smtpConfig) {
       return <SMTPConfig onSave={save} config={this.state.smtpConfig} />;
     }
+
     if (endpoint === 'slack' && this.state.slackConfig) {
       return <SlackConfig onSave={save} onTest={this.testSlack} config={this.state.slackConfig} />;
     }
 
+    if (endpoint === 'victorops' && this.state.victoropsConfig) {
+      return <VictoropsConfig onSave={save} config={this.state.victoropsConfig} />;
+    }
+
     return <div>This endpoint is not supported yet!</div>;
   },
 });
diff --git a/ui/src/kapacitor/components/AlertaConfig.js b/ui/src/kapacitor/components/AlertaConfig.js
new file mode 100644
index 000000000..35039c112
--- /dev/null
+++ b/ui/src/kapacitor/components/AlertaConfig.js
@@ -0,0 +1,78 @@
+import React, {PropTypes} from 'react';
+
+const AlertaConfig = React.createClass({
+  propTypes: {
+    config: PropTypes.shape({
+      options: PropTypes.shape({
+        environment: PropTypes.string,
+        origin: PropTypes.string,
+        token: PropTypes.bool,
+        url: PropTypes.string,
+      }).isRequired,
+    }).isRequired,
+    onSave: PropTypes.func.isRequired,
+  },
+
+  handleSaveAlert(e) {
+    e.preventDefault();
+
+    const properties = {
+      environment: this.port.value,
+      origin: this.from.value,
+      token: this.username.value,
+      url: this.password.value,
+    };
+
+    this.props.onSave(properties);
+  },
+
+  render() {
+    const {environment, origin, token, url} = this.props.config.options;
+
+    return (
+      <div className="panel-body">
+        <h4 className="text-center">Alerta alerts</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 Alerta
+              </p>
+
+              <div className="form-group">
+                <label htmlFor="environment">Environment</label>
+                <input className="form-control" id="environment" type="text" ref={(r) => this.environment = r} defaultValue={environment || ''}></input>
+              </div>
+
+              <div className="form-group">
+                <label htmlFor="origin">Origin</label>
+                <input className="form-control" id="origin" type="text" ref={(r) => this.origin = r} defaultValue={origin || ''}></input>
+              </div>
+
+              <div className="form-group">
+                <label htmlFor="token">Token</label>
+                <input className="form-control" id="token" type="text" ref={(r) => this.token = r} defaultValue={token || ''}></input>
+                <span>Note: a value of <code>true</code> indicates the Alerta Token has been set</span>
+              </div>
+
+              <div className="form-group">
+                <label htmlFor="url">User</label>
+                <input className="form-control" id="url" type="text" ref={(r) => this.url = r} defaultValue={url || ''}></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 AlertaConfig;
diff --git a/ui/src/kapacitor/components/SlackConfig.js b/ui/src/kapacitor/components/SlackConfig.js
index ae84620d5..b507978ac 100644
--- a/ui/src/kapacitor/components/SlackConfig.js
+++ b/ui/src/kapacitor/components/SlackConfig.js
@@ -51,8 +51,8 @@ const SlackConfig = React.createClass({
 
               <div className="form-group">
                 <label htmlFor="slack-url">Slack Webhook URL (<a href="https://api.slack.com/incoming-webhooks" target="_">see more on Slack webhooks</a>)</label>
-                <input className="form-control" id="slack-url" type="text" ref={(r) => this.url = r} defaultValue={`${url}`}></input>
-                <span>Note: a value of <code>true</code> or <code>false</code> indicates whether or not a slack channel has been set</span>
+                <input className="form-control" id="slack-url" type="text" ref={(r) => this.url = r} defaultValue={url || ''}></input>
+                <span>Note: a value of <code>true</code> indicates that the Slack channel has been set</span>
               </div>
 
               <div className="form-group">
diff --git a/ui/src/kapacitor/components/VictoropsConfig.js b/ui/src/kapacitor/components/VictoropsConfig.js
new file mode 100644
index 000000000..2267bf8c3
--- /dev/null
+++ b/ui/src/kapacitor/components/VictoropsConfig.js
@@ -0,0 +1,81 @@
+import React, {PropTypes} from 'react';
+
+const VictoropsConfig = React.createClass({
+  propTypes: {
+    config: PropTypes.shape({
+      options: PropTypes.shape({
+        'api-key': PropTypes.bool,
+        'routing-key': PropTypes.string,
+        global: PropTypes.bool,
+        url: PropTypes.string,
+      }).isRequired,
+    }).isRequired,
+    onSave: PropTypes.func.isRequired,
+  },
+
+  handleSaveAlert(e) {
+    e.preventDefault();
+
+    const properties = {
+      'api-key': this.apiKey.value,
+      'routing-key': this.routingKey.value,
+      url: this.url.value,
+      global: this.global.checked,
+    };
+
+    this.props.onSave(properties);
+  },
+
+  render() {
+    const {options} = this.props.config;
+    const apiKey = options['api-key'];
+    const routingKey = options['routing-key'];
+    const {url, global} = options;
+
+    return (
+      <div className="panel-body">
+        <h4 className="text-center">SMTP 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 VictorOps
+              </p>
+
+              <div className="form-group">
+                <label htmlFor="api-key">API Key</label>
+                <input className="form-control" id="api-key" type="text" ref={(r) => this.apiKey = r} defaultValue={apiKey || ''}></input>
+                <span>Note: a value of <code>true</code> indicates the VictorOps API key has been set</span>
+              </div>
+
+              <div className="form-group">
+                <label htmlFor="routing-key">Routing Key</label>
+                <input className="form-control" id="routing-key" type="text" ref={(r) => this.routingKey = r} defaultValue={routingKey || ''}></input>
+              </div>
+
+              <div className="form-group">
+                <label htmlFor="url">VictorOps URL</label>
+                <input className="form-control" id="url" type="text" ref={(r) => this.url = r} defaultValue={url || ''}></input>
+              </div>
+
+              <div className="form-group u-flex">
+                <input className="u-flex" id="global" type="checkbox" ref={(r) => this.global = r} defaultChecked={global}/>
+                <label htmlFor="global">This should be showing up next to the shit</label>
+              </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 VictoropsConfig;