From 87d05659f30b48d2053ba53599c51ff50631ace0 Mon Sep 17 00:00:00 2001
From: Jared Scheib <jared.scheib@gmail.com>
Date: Mon, 14 May 2018 16:09:25 -0700
Subject: [PATCH] Add PagerDuty2 components to support diff integration key
 field name 'routing-key'

---
 ui/src/kapacitor/components/AlertTabs.tsx     |   3 +-
 ui/src/kapacitor/components/HandlerOptions.js |   3 +-
 .../components/config/PagerDuty2Config.tsx    | 136 ++++++++++++++++++
 ui/src/kapacitor/components/config/index.js   |   2 +
 .../components/handlers/Pagerduty2Handler.tsx |  50 +++++++
 ui/src/kapacitor/components/handlers/index.js |   2 +
 ui/src/kapacitor/constants/index.js           |   4 +-
 ui/src/types/kapacitor.ts                     |   7 +-
 8 files changed, 202 insertions(+), 5 deletions(-)
 create mode 100644 ui/src/kapacitor/components/config/PagerDuty2Config.tsx
 create mode 100644 ui/src/kapacitor/components/handlers/Pagerduty2Handler.tsx

diff --git a/ui/src/kapacitor/components/AlertTabs.tsx b/ui/src/kapacitor/components/AlertTabs.tsx
index 734f58f091..f696c69d53 100644
--- a/ui/src/kapacitor/components/AlertTabs.tsx
+++ b/ui/src/kapacitor/components/AlertTabs.tsx
@@ -22,6 +22,7 @@ import {
   KafkaConfig,
   OpsGenieConfig,
   PagerDutyConfig,
+  PagerDuty2Config,
   PushoverConfig,
   SensuConfig,
   SlackConfig,
@@ -280,7 +281,7 @@ class AlertTabs extends PureComponent<Props, State> {
         type: 'PagerDuty2',
         enabled: this.getEnabled(configSections, 'pagerduty2'),
         renderComponent: () => (
-          <PagerDutyConfig
+          <PagerDuty2Config
             onSave={this.handleSaveConfig('pagerduty2')}
             config={this.getSection(configSections, 'pagerduty2')}
             onTest={this.handleTestConfig('pagerduty2')}
diff --git a/ui/src/kapacitor/components/HandlerOptions.js b/ui/src/kapacitor/components/HandlerOptions.js
index 0bc907ab4e..e6b27132fc 100644
--- a/ui/src/kapacitor/components/HandlerOptions.js
+++ b/ui/src/kapacitor/components/HandlerOptions.js
@@ -11,6 +11,7 @@ import {
   KafkaHandler,
   OpsgenieHandler,
   PagerdutyHandler,
+  Pagerduty2Handler,
   PushoverHandler,
   SensuHandler,
   SlackHandler,
@@ -131,7 +132,7 @@ class HandlerOptions extends Component {
         )
       case 'pagerDuty2':
         return (
-          <PagerdutyHandler
+          <Pagerduty2Handler
             selectedHandler={selectedHandler}
             handleModifyHandler={handleModifyHandler}
             onGoToConfig={onGoToConfig('pagerduty2')}
diff --git a/ui/src/kapacitor/components/config/PagerDuty2Config.tsx b/ui/src/kapacitor/components/config/PagerDuty2Config.tsx
new file mode 100644
index 0000000000..2cbaa7c596
--- /dev/null
+++ b/ui/src/kapacitor/components/config/PagerDuty2Config.tsx
@@ -0,0 +1,136 @@
+import _ from 'lodash'
+import React, {PureComponent, ChangeEvent} from 'react'
+import RedactedInput from 'src/kapacitor/components/config/RedactedInput'
+import {ErrorHandling} from 'src/shared/decorators/errors'
+
+interface Properties {
+  'routing-key': string
+  url: string
+}
+
+interface Config {
+  options: {
+    'routing-key': boolean
+    url: string
+    enabled: boolean
+  }
+}
+
+interface Props {
+  config: Config
+  onSave: (properties: Properties) => void
+  onTest: (event: React.MouseEvent<HTMLButtonElement>) => void
+  enabled: boolean
+}
+
+interface State {
+  testEnabled: boolean
+  enabled: boolean
+}
+
+@ErrorHandling
+class PagerDutyConfig extends PureComponent<Props, State> {
+  private routingKey: HTMLInputElement
+  private url: HTMLInputElement
+
+  constructor(props) {
+    super(props)
+    this.state = {
+      testEnabled: this.props.enabled,
+      enabled: _.get(this.props, 'config.options.enabled', false),
+    }
+  }
+
+  public render() {
+    const {options} = this.props.config
+    const {url} = options
+    const routingKey = options['routing-key']
+    const {testEnabled, enabled} = this.state
+
+    return (
+      <form onSubmit={this.handleSubmit}>
+        <div className="form-group col-xs-12">
+          <label htmlFor="routing-key">Routing Key</label>
+          <RedactedInput
+            defaultValue={routingKey}
+            id="routing-key"
+            refFunc={this.handleRoutingKeyRef}
+            disableTest={this.disableTest}
+            isFormEditing={!testEnabled}
+          />
+        </div>
+
+        <div className="form-group col-xs-12">
+          <label htmlFor="url">PagerDuty URL</label>
+          <input
+            className="form-control"
+            id="url"
+            type="text"
+            ref={r => (this.url = r)}
+            defaultValue={url || ''}
+            onChange={this.disableTest}
+          />
+        </div>
+
+        <div className="form-group col-xs-12">
+          <div className="form-control-static">
+            <input
+              type="checkbox"
+              id="disabled"
+              checked={enabled}
+              onChange={this.handleEnabledChange}
+            />
+            <label htmlFor="disabled">Configuration Enabled</label>
+          </div>
+        </div>
+
+        <div className="form-group form-group-submit col-xs-12 text-center">
+          <button
+            className="btn btn-primary"
+            type="submit"
+            disabled={this.state.testEnabled}
+          >
+            <span className="icon checkmark" />
+            Save Changes
+          </button>
+          <button
+            className="btn btn-primary"
+            disabled={!this.state.testEnabled || !enabled}
+            onClick={this.props.onTest}
+          >
+            <span className="icon pulse-c" />
+            Send Test Alert
+          </button>
+        </div>
+      </form>
+    )
+  }
+
+  private handleRoutingKeyRef = r => (this.routingKey = r)
+
+  private handleEnabledChange = (e: ChangeEvent<HTMLInputElement>) => {
+    this.setState({enabled: e.target.checked})
+    this.disableTest()
+  }
+
+  private handleSubmit = async e => {
+    e.preventDefault()
+
+    const properties = {
+      'routing-key': this.routingKey.value,
+      url: this.url.value,
+      enabled: this.state.enabled,
+    }
+
+    const success = await this.props.onSave(properties)
+    if (success) {
+      this.setState({testEnabled: true})
+    }
+  }
+
+  private disableTest = () => {
+    this.setState({testEnabled: false})
+  }
+}
+
+export default PagerDutyConfig
diff --git a/ui/src/kapacitor/components/config/index.js b/ui/src/kapacitor/components/config/index.js
index 5188003845..a4d9825a9c 100644
--- a/ui/src/kapacitor/components/config/index.js
+++ b/ui/src/kapacitor/components/config/index.js
@@ -3,6 +3,7 @@ import HipChatConfig from './HipChatConfig'
 import KafkaConfig from './KafkaConfig'
 import OpsGenieConfig from './OpsGenieConfig'
 import PagerDutyConfig from './PagerDutyConfig'
+import PagerDuty2Config from './PagerDuty2Config'
 import PushoverConfig from './PushoverConfig'
 import SensuConfig from './SensuConfig'
 import SlackConfig from './SlackConfig'
@@ -17,6 +18,7 @@ export {
   KafkaConfig,
   OpsGenieConfig,
   PagerDutyConfig,
+  PagerDuty2Config,
   PushoverConfig,
   SensuConfig,
   SlackConfig,
diff --git a/ui/src/kapacitor/components/handlers/Pagerduty2Handler.tsx b/ui/src/kapacitor/components/handlers/Pagerduty2Handler.tsx
new file mode 100644
index 0000000000..3d4596d724
--- /dev/null
+++ b/ui/src/kapacitor/components/handlers/Pagerduty2Handler.tsx
@@ -0,0 +1,50 @@
+import React, {SFC} from 'react'
+import HandlerInput from 'src/kapacitor/components/HandlerInput'
+import HandlerEmpty from 'src/kapacitor/components/HandlerEmpty'
+
+interface Props {
+  selectedHandler: {
+    enabled: boolean
+  }
+  handleModifyHandler: () => void
+  onGoToConfig: () => void
+  validationError: string
+}
+
+const Pagerduty2Handler: SFC<Props> = ({
+  selectedHandler,
+  handleModifyHandler,
+  onGoToConfig,
+  validationError,
+}) =>
+  selectedHandler.enabled ? (
+    <div className="endpoint-tab-contents">
+      <div className="endpoint-tab--parameters">
+        <h4 className="u-flex u-jc-space-between">
+          Parameters from Kapacitor Configuration
+          <div className="btn btn-default btn-sm" onClick={onGoToConfig}>
+            <span className="icon cog-thick" />
+            {validationError
+              ? 'Exit this Rule and Edit Configuration'
+              : 'Save this Rule and Edit Configuration'}
+          </div>
+        </h4>
+        <HandlerInput
+          selectedHandler={selectedHandler}
+          handleModifyHandler={handleModifyHandler}
+          fieldName="routingKey"
+          fieldDisplay="Routing Key:"
+          placeholder="ex: routing_key"
+          redacted={true}
+          fieldColumns="col-md-12"
+        />
+      </div>
+    </div>
+  ) : (
+    <HandlerEmpty
+      onGoToConfig={onGoToConfig}
+      validationError={validationError}
+    />
+  )
+
+export default Pagerduty2Handler
diff --git a/ui/src/kapacitor/components/handlers/index.js b/ui/src/kapacitor/components/handlers/index.js
index b7f640ddab..aca366502f 100644
--- a/ui/src/kapacitor/components/handlers/index.js
+++ b/ui/src/kapacitor/components/handlers/index.js
@@ -7,6 +7,7 @@ import HipchatHandler from './HipchatHandler'
 import KafkaHandler from './KafkaHandler'
 import OpsgenieHandler from './OpsgenieHandler'
 import PagerdutyHandler from './PagerdutyHandler'
+import Pagerduty2Handler from './Pagerduty2Handler'
 import PushoverHandler from './PushoverHandler'
 import SensuHandler from './SensuHandler'
 import SlackHandler from './SlackHandler'
@@ -26,6 +27,7 @@ export {
   KafkaHandler,
   OpsgenieHandler,
   PagerdutyHandler,
+  Pagerduty2Handler,
   PushoverHandler,
   SensuHandler,
   SlackHandler,
diff --git a/ui/src/kapacitor/constants/index.js b/ui/src/kapacitor/constants/index.js
index c701b134f5..a90349a51d 100644
--- a/ui/src/kapacitor/constants/index.js
+++ b/ui/src/kapacitor/constants/index.js
@@ -118,7 +118,7 @@ export const ALERTS_FROM_CONFIG = {
   opsGenie: ['api-key', 'teams', 'recipients'], // api-key = bool
   opsGenie2: ['api-key', 'teams', 'recipients'], // api-key = bool
   pagerDuty: ['service-key'], // service-key = bool
-  pagerDuty2: ['service-key'], // service-key = bool
+  pagerDuty2: ['routing-key'], // routing-key = bool
   pushover: ['token', 'user-key'], // token = bool, user-key = bool
   sensu: ['addr', 'source'],
   slack: ['url', 'channel'], // url = bool
@@ -143,7 +143,7 @@ export const MAP_FIELD_KEYS_FROM_CONFIG = {
   opsGenie: {},
   opsGenie2: {},
   pagerDuty: {'service-key': 'serviceKey'},
-  pagerDuty2: {'service-key': 'serviceKey'},
+  pagerDuty2: {'routing-key': 'routingKey'},
   pushover: {'user-key': 'userKey'},
   sensu: {},
   slack: {},
diff --git a/ui/src/types/kapacitor.ts b/ui/src/types/kapacitor.ts
index 6c9e02c12b..f0a2fc84cd 100644
--- a/ui/src/types/kapacitor.ts
+++ b/ui/src/types/kapacitor.ts
@@ -56,7 +56,7 @@ interface AlertNodes {
   log: Log[]
   victorOps: VictorOps[]
   pagerDuty: PagerDuty[]
-  pagerDuty2?: PagerDuty[]
+  pagerDuty2?: PagerDuty2[]
   pushover: Pushover[]
   sensu: Sensu[]
   slack: Slack[]
@@ -120,6 +120,11 @@ interface PagerDuty {
   serviceKey: string
 }
 
+// PagerDuty sends alerts to the pagerduty.com service
+interface PagerDuty2 {
+  routingKey: string
+}
+
 // HipChat sends alerts to stride.com
 interface HipChat {
   room: string