Add PagerdutyConfig

ui/src/kapacitor/components/AlertOutputs.js

@@ -2,6 +2,7 @@ import React, {PropTypes} from 'react';
 import _ from 'lodash';
 import {getKapacitorConfig, updateKapacitorConfigSection, testAlertOutput} from 'shared/apis';
 import AlertaConfig from './AlertaConfig';
+import PagerdutyConfig from './PagerdutyConfig';
 import SlackConfig from './SlackConfig';
 import SMTPConfig from './SMTPConfig';
 import TelegramConfig from './TelegramConfig';
@@ -38,6 +39,7 @@ const AlertOutputs = React.createClass({
     getKapacitorConfig(this.props.kapacitor).then(({data: {sections}}) => {
       this.setState({
         alertaConfig: this.getSection(sections, 'alerta'),
+        pagerdutyConfig: this.getSection(sections, 'pagerduty'),
         slackConfig: this.getSection(sections, 'slack'),
         smtpConfig: this.getSection(sections, 'smtp'),
         telegramConfig: this.getSection(sections, 'telegram'),
@@ -96,6 +98,7 @@ const AlertOutputs = React.createClass({
               <option value="smtp">SMTP</option>
               <option value="victorops">VictorOps</option>
               <option value="telegram">Telegram</option>
+              <option value="pagerduty">PagerDuty</option>
             </select>
           </div>
         </div>
@@ -131,6 +134,10 @@ const AlertOutputs = React.createClass({
       return <TelegramConfig onSave={save} config={this.state.telegramConfig} />;
     }
 
+    if (endpoint === 'pagerduty' && this.state.pagerdutyConfig) {
+      return <PagerdutyConfig onSave={save} config={this.state.pagerdutyConfig} />;
+    }
+
     return <div>This endpoint is not supported yet!</div>;
   },
 });

ui/src/kapacitor/components/PagerdutyConfig.js

@@ -0,0 +1,78 @@
+import React, {PropTypes} from 'react';
+
+const PagerdutyConfig = React.createClass({
+  propTypes: {
+    config: PropTypes.shape({
+      options: PropTypes.shape({
+        global: PropTypes.bool.isRequired,
+        'service-key': PropTypes.bool.isRequired,
+        url: PropTypes.string.isRequired,
+      }).isRequired,
+    }).isRequired,
+    onSave: PropTypes.func.isRequired,
+  },
+
+  handleSaveAlert(e) {
+    e.preventDefault();
+
+    const properties = {
+      global: this.global.checked,
+      serviceKey: this.serviceKey.value,
+      url: this.url.value,
+    };
+
+    this.props.onSave(properties);
+  },
+
+  render() {
+    const {options} = this.props.config;
+    const {global, url} = options;
+    const serviceKey = options['service-key'];
+
+    return (
+      <div className="panel-body">
+        <h4 className="text-center">PagerDuty Alert</h4>
+        <br/>
+        <form onSubmit={this.handleSaveAlert}>
+          <div className="row">
+            <div className="col-xs-7 col-sm-8 col-sm-offset-2">
+              <p>
+                You can have alerts sent to PagerDuty by entering info below.
+              </p>
+
+              <div className="form-group">
+                <label htmlFor="service-key">Service Key</label>
+                <input className="form-control" id="service-key" type="text" ref={(r) => this.serviceKey = r} defaultValue={serviceKey || ''}></input>
+                <span>Note: a value of <code>true</code> indicates the PagerDuty service key has been set</span>
+              </div>
+
+              <div className="form-group">
+                <label htmlFor="url">PagerDuty URL</label>
+                <input className="form-control" id="url" type="text" ref={(r) => this.url = r} defaultValue={url || ''}></input>
+              </div>
+
+              <div className="form-group col-xs-12">
+                <div className="checkbox">
+                  <label>
+                    <input type="checkbox" defaultChecked={global} ref={(r) => this.global = r} />
+                    Send all alerts without marking them explicitly in TICKscript
+                  </label>
+                </div>
+              </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 PagerdutyConfig;