From 1d7bda976a77ca32e8d9812e1e77b278fe4a0b2e Mon Sep 17 00:00:00 2001
From: Jared Scheib <jared.scheib@gmail.com>
Date: Fri, 11 May 2018 11:30:55 -0700
Subject: [PATCH 1/5] Convert cellEditorOverlay.js to cellEditorOverlay.ts

---
 .../actions/{cellEditorOverlay.js => cellEditorOverlay.ts}        | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename ui/src/dashboards/actions/{cellEditorOverlay.js => cellEditorOverlay.ts} (100%)

diff --git a/ui/src/dashboards/actions/cellEditorOverlay.js b/ui/src/dashboards/actions/cellEditorOverlay.ts
similarity index 100%
rename from ui/src/dashboards/actions/cellEditorOverlay.js
rename to ui/src/dashboards/actions/cellEditorOverlay.ts

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 2/5] 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

From 5bee635c71193045f2e0bd99adc2c636344009e1 Mon Sep 17 00:00:00 2001
From: Jared Scheib <jared.scheib@gmail.com>
Date: Mon, 14 May 2018 16:10:54 -0700
Subject: [PATCH 3/5] Update some missed var names to PagerDuty2

---
 ui/src/kapacitor/components/config/PagerDuty2Config.tsx | 4 ++--
 ui/src/types/kapacitor.ts                               | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/ui/src/kapacitor/components/config/PagerDuty2Config.tsx b/ui/src/kapacitor/components/config/PagerDuty2Config.tsx
index 2cbaa7c596..f7bce544f1 100644
--- a/ui/src/kapacitor/components/config/PagerDuty2Config.tsx
+++ b/ui/src/kapacitor/components/config/PagerDuty2Config.tsx
@@ -29,7 +29,7 @@ interface State {
 }
 
 @ErrorHandling
-class PagerDutyConfig extends PureComponent<Props, State> {
+class PagerDuty2Config extends PureComponent<Props, State> {
   private routingKey: HTMLInputElement
   private url: HTMLInputElement
 
@@ -133,4 +133,4 @@ class PagerDutyConfig extends PureComponent<Props, State> {
   }
 }
 
-export default PagerDutyConfig
+export default PagerDuty2Config
diff --git a/ui/src/types/kapacitor.ts b/ui/src/types/kapacitor.ts
index f0a2fc84cd..5dc1e6e95b 100644
--- a/ui/src/types/kapacitor.ts
+++ b/ui/src/types/kapacitor.ts
@@ -120,7 +120,7 @@ interface PagerDuty {
   serviceKey: string
 }
 
-// PagerDuty sends alerts to the pagerduty.com service
+// PagerDuty2 sends alerts to the pagerduty.com service
 interface PagerDuty2 {
   routingKey: string
 }

From b15424fc21e9c82edd7e5e5f2b292630e494ff3d Mon Sep 17 00:00:00 2001
From: Jared Scheib <jared.scheib@gmail.com>
Date: Mon, 14 May 2018 16:38:06 -0700
Subject: [PATCH 4/5] Add stronger types to PagerDuty2Config

---
 .../components/config/PagerDuty2Config.tsx       | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/ui/src/kapacitor/components/config/PagerDuty2Config.tsx b/ui/src/kapacitor/components/config/PagerDuty2Config.tsx
index f7bce544f1..a674f7dbb4 100644
--- a/ui/src/kapacitor/components/config/PagerDuty2Config.tsx
+++ b/ui/src/kapacitor/components/config/PagerDuty2Config.tsx
@@ -6,6 +6,7 @@ import {ErrorHandling} from 'src/shared/decorators/errors'
 interface Properties {
   'routing-key': string
   url: string
+  enabled: boolean
 }
 
 interface Config {
@@ -33,7 +34,7 @@ class PagerDuty2Config extends PureComponent<Props, State> {
   private routingKey: HTMLInputElement
   private url: HTMLInputElement
 
-  constructor(props) {
+  constructor(props: Props) {
     super(props)
     this.state = {
       testEnabled: this.props.enabled,
@@ -106,17 +107,20 @@ class PagerDuty2Config extends PureComponent<Props, State> {
     )
   }
 
-  private handleRoutingKeyRef = r => (this.routingKey = r)
+  private handleRoutingKeyRef = (r: HTMLInputElement): HTMLInputElement =>
+    (this.routingKey = r)
 
-  private handleEnabledChange = (e: ChangeEvent<HTMLInputElement>) => {
+  private handleEnabledChange = (e: ChangeEvent<HTMLInputElement>): void => {
     this.setState({enabled: e.target.checked})
     this.disableTest()
   }
 
-  private handleSubmit = async e => {
+  private handleSubmit = async (
+    e: React.FormEvent<HTMLFormElement>
+  ): Promise<void> => {
     e.preventDefault()
 
-    const properties = {
+    const properties: Properties = {
       'routing-key': this.routingKey.value,
       url: this.url.value,
       enabled: this.state.enabled,
@@ -128,7 +132,7 @@ class PagerDuty2Config extends PureComponent<Props, State> {
     }
   }
 
-  private disableTest = () => {
+  private disableTest = (): void => {
     this.setState({testEnabled: false})
   }
 }

From 8f5ebbcbe18e4761f1848b3901154349ce4aa44c Mon Sep 17 00:00:00 2001
From: Jared Scheib <jared.scheib@gmail.com>
Date: Mon, 14 May 2018 16:48:52 -0700
Subject: [PATCH 5/5] Remove ternaries from PagerDuty2Handler for ease of
 debugging

---
 .../components/handlers/Pagerduty2Handler.tsx | 57 +++++++++++--------
 1 file changed, 33 insertions(+), 24 deletions(-)

diff --git a/ui/src/kapacitor/components/handlers/Pagerduty2Handler.tsx b/ui/src/kapacitor/components/handlers/Pagerduty2Handler.tsx
index 3d4596d724..41ceee90fe 100644
--- a/ui/src/kapacitor/components/handlers/Pagerduty2Handler.tsx
+++ b/ui/src/kapacitor/components/handlers/Pagerduty2Handler.tsx
@@ -16,35 +16,44 @@ const Pagerduty2Handler: SFC<Props> = ({
   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"
-        />
+}) => {
+  if (selectedHandler.enabled) {
+    let goToConfigText
+    if (validationError) {
+      goToConfigText = 'Exit this Rule and Edit Configuration'
+    } else {
+      goToConfigText = 'Save this Rule and Edit Configuration'
+    }
+    return (
+      <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" />
+              {goToConfigText}
+            </div>
+          </h4>
+          <HandlerInput
+            selectedHandler={selectedHandler}
+            handleModifyHandler={handleModifyHandler}
+            fieldName="routingKey"
+            fieldDisplay="Routing Key:"
+            placeholder="ex: routing_key"
+            redacted={true}
+            fieldColumns="col-md-12"
+          />
+        </div>
       </div>
-    </div>
-  ) : (
+    )
+  }
+
+  return (
     <HandlerEmpty
       onGoToConfig={onGoToConfig}
       validationError={validationError}
     />
   )
+}
 
 export default Pagerduty2Handler