Merge pull request #791 from influxdata/talk-config

Introduce Talk alert config

ui/src/kapacitor/components/AlertOutputs.js

@@ -7,6 +7,7 @@ import PagerDutyConfig from './PagerDutyConfig';
 import SensuConfig from './SensuConfig';
 import SlackConfig from './SlackConfig';
 import SMTPConfig from './SMTPConfig';
+import TalkConfig from './TalkConfig';
 import TelegramConfig from './TelegramConfig';
 import VictorOpsConfig from './VictorOpsConfig';
 
@@ -114,6 +115,7 @@ const AlertOutputs = React.createClass({
                 <option value="sensu">Sensu</option>
                 <option value="slack">Slack</option>
                 <option value="smtp">SMTP</option>
+                <option value="talk">Talk</option>
                 <option value="telegram">Telegram</option>
                 <option value="victorops">VictorOps</option>
               </select>
@@ -166,6 +168,9 @@ const AlertOutputs = React.createClass({
       case 'sensu': {
         return <SensuConfig onSave={save} config={this.getSection(configSections, endpoint)} />;
       }
+      case 'talk': {
+        return <TalkConfig onSave={save} config={this.getSection(configSections, endpoint)} />;
+      }
     }
   },
 });

ui/src/kapacitor/components/TalkConfig.js

@@ -0,0 +1,61 @@
+import React, {PropTypes} from 'react';
+
+const {
+  bool,
+  string,
+  shape,
+  func,
+} = PropTypes;
+
+const TalkConfig = React.createClass({
+  propTypes: {
+    config: shape({
+      options: shape({
+        url: bool.isRequired,
+        author_name: string.isRequired,
+      }).isRequired,
+    }).isRequired,
+    onSave: func.isRequired,
+  },
+
+  handleSaveAlert(e) {
+    e.preventDefault();
+
+    const properties = {
+      url: this.url.value,
+      author_name: this.author.value,
+    };
+
+    this.props.onSave(properties);
+  },
+
+  render() {
+    const {url, author_name: author} = this.props.config.options;
+
+    return (
+      <div>
+        <h4 className="text-center">Talk Alert</h4>
+        <br/>
+        <p>Have alerts sent to Talk.</p>
+        <form onSubmit={this.handleSaveAlert}>
+          <div className="form-group col-xs-12">
+            <label htmlFor="url">URL</label>
+            <input className="form-control" id="url" type="text" ref={(r) => this.url = r} defaultValue={url || ''}></input>
+            <label className="form-helper">Note: a value of <code>true</code> indicates that the Talk URL has been set</label>
+          </div>
+
+          <div className="form-group col-xs-12">
+            <label htmlFor="author">Author Name</label>
+            <input className="form-control" id="author" type="text" ref={(r) => this.author = r} defaultValue={author || ''}></input>
+          </div>
+
+          <div className="form-group form-group-submit col-xs-12 col-sm-6 col-sm-offset-3">
+            <button className="btn btn-block btn-primary" type="submit">Save</button>
+          </div>
+        </form>
+      </div>
+    );
+  },
+});
+
+export default TalkConfig;