From 9665f420b13c7d160cc536750ed1d5d2bc3a325f Mon Sep 17 00:00:00 2001
From: Iris Scholten <ischolten.is@gmail.com>
Date: Tue, 8 May 2018 16:40:37 -0700
Subject: [PATCH] Add ability to display multiple slack nodes in UI

---
 ui/src/kapacitor/components/AlertTabs.tsx     | 64 +++++++++++-----
 .../components/config/SlackConfig.tsx         |  5 +-
 .../components/config/SlackConfigs.tsx        | 75 +++++++++++++++++++
 ui/src/shared/apis/index.js                   | 16 ++++
 4 files changed, 140 insertions(+), 20 deletions(-)
 create mode 100644 ui/src/kapacitor/components/config/SlackConfigs.tsx

diff --git a/ui/src/kapacitor/components/AlertTabs.tsx b/ui/src/kapacitor/components/AlertTabs.tsx
index f696c69d53..9b22be822d 100644
--- a/ui/src/kapacitor/components/AlertTabs.tsx
+++ b/ui/src/kapacitor/components/AlertTabs.tsx
@@ -12,6 +12,7 @@ import {
 import {
   getKapacitorConfig,
   updateKapacitorConfigSection,
+  addKapacitorConfigInSection,
   testAlertOutput,
   getAllServices,
 } from 'src/shared/apis'
@@ -25,7 +26,6 @@ import {
   PagerDuty2Config,
   PushoverConfig,
   SensuConfig,
-  SlackConfig,
   SMTPConfig,
   TalkConfig,
   TelegramConfig,
@@ -44,6 +44,7 @@ import DeprecationWarning from 'src/admin/components/DeprecationWarning'
 import {ErrorHandling} from 'src/shared/decorators/errors'
 
 import {Source, Kapacitor} from 'src/types'
+import SlackConfigs from 'src/kapacitor/components/config/SlackConfigs'
 
 interface Service {
   link: Link
@@ -208,7 +209,7 @@ class AlertTabs extends PureComponent<Props, State> {
         renderComponent: () => (
           <AlertaConfig
             onSave={this.handleSaveConfig('alerta')}
-            config={this.getSection(configSections, 'alerta')}
+            config={this.getSectionElement(configSections, 'alerta')}
             onTest={this.handleTestConfig('alerta')}
             enabled={this.getEnabled(configSections, 'alerta')}
           />
@@ -220,7 +221,7 @@ class AlertTabs extends PureComponent<Props, State> {
         renderComponent: () => (
           <HipChatConfig
             onSave={this.handleSaveConfig('hipchat')}
-            config={this.getSection(configSections, 'hipchat')}
+            config={this.getSectionElement(configSections, 'hipchat')}
             onTest={this.handleTestConfig('hipchat')}
             enabled={this.getEnabled(configSections, 'hipchat')}
           />
@@ -247,7 +248,7 @@ class AlertTabs extends PureComponent<Props, State> {
         renderComponent: () => (
           <OpsGenieConfig
             onSave={this.handleSaveConfig('opsgenie')}
-            config={this.getSection(configSections, 'opsgenie')}
+            config={this.getSectionElement(configSections, 'opsgenie')}
             onTest={this.handleTestConfig('opsgenie')}
             enabled={this.getEnabled(configSections, 'opsgenie')}
           />
@@ -259,7 +260,7 @@ class AlertTabs extends PureComponent<Props, State> {
         renderComponent: () => (
           <OpsGenieConfig
             onSave={this.handleSaveConfig('opsgenie2')}
-            config={this.getSection(configSections, 'opsgenie2')}
+            config={this.getSectionElement(configSections, 'opsgenie2')}
             onTest={this.handleTestConfig('opsgenie2')}
             enabled={this.getEnabled(configSections, 'opsgenie2')}
           />
@@ -271,7 +272,7 @@ class AlertTabs extends PureComponent<Props, State> {
         renderComponent: () => (
           <PagerDutyConfig
             onSave={this.handleSaveConfig('pagerduty')}
-            config={this.getSection(configSections, 'pagerduty')}
+            config={this.getSectionElement(configSections, 'pagerduty')}
             onTest={this.handleTestConfig('pagerduty')}
             enabled={this.getEnabled(configSections, 'pagerduty')}
           />
@@ -283,7 +284,7 @@ class AlertTabs extends PureComponent<Props, State> {
         renderComponent: () => (
           <PagerDuty2Config
             onSave={this.handleSaveConfig('pagerduty2')}
-            config={this.getSection(configSections, 'pagerduty2')}
+            config={this.getSectionElement(configSections, 'pagerduty2')}
             onTest={this.handleTestConfig('pagerduty2')}
             enabled={this.getEnabled(configSections, 'pagerduty2')}
           />
@@ -295,7 +296,7 @@ class AlertTabs extends PureComponent<Props, State> {
         renderComponent: () => (
           <PushoverConfig
             onSave={this.handleSaveConfig('pushover')}
-            config={this.getSection(configSections, 'pushover')}
+            config={this.getSectionElement(configSections, 'pushover')}
             onTest={this.handleTestConfig('pushover')}
             enabled={this.getEnabled(configSections, 'pushover')}
           />
@@ -307,7 +308,7 @@ class AlertTabs extends PureComponent<Props, State> {
         renderComponent: () => (
           <SensuConfig
             onSave={this.handleSaveConfig('sensu')}
-            config={this.getSection(configSections, 'sensu')}
+            config={this.getSectionElement(configSections, 'sensu')}
             onTest={this.handleTestConfig('sensu')}
             enabled={this.getEnabled(configSections, 'sensu')}
           />
@@ -317,21 +318,34 @@ class AlertTabs extends PureComponent<Props, State> {
         type: 'Slack',
         enabled: this.getEnabled(configSections, 'slack'),
         renderComponent: () => (
-          <SlackConfig
+          <SlackConfigs
+            slackConfigs={this.getSectionElements(configSections, 'slack')}
             onSave={this.handleSaveConfig('slack')}
-            config={this.getSection(configSections, 'slack')}
+            config={this.getSectionElement(configSections, 'slack')}
             onTest={this.handleTestConfig('slack')}
             enabled={this.getEnabled(configSections, 'slack')}
           />
         ),
       },
+      // slack: {
+      //   type: 'Slack',
+      //   enabled: this.getEnabled(configSections, 'slack'),
+      //   renderComponent: () => (
+      //     <SlackConfig
+      //       onSave={this.handleSaveConfig('slack')}
+      //       config={this.getSectionElement(configSections, 'slack')}
+      //       onTest={this.handleTestConfig('slack')}
+      //       enabled={this.getEnabled(configSections, 'slack')}
+      //     />
+      //   ),
+      // },
       smtp: {
         type: 'SMTP',
         enabled: this.getEnabled(configSections, 'smtp'),
         renderComponent: () => (
           <SMTPConfig
             onSave={this.handleSaveConfig('smtp')}
-            config={this.getSection(configSections, 'smtp')}
+            config={this.getSectionElement(configSections, 'smtp')}
             onTest={this.handleTestConfig('smtp')}
             enabled={this.getEnabled(configSections, 'smtp')}
           />
@@ -343,7 +357,7 @@ class AlertTabs extends PureComponent<Props, State> {
         renderComponent: () => (
           <TalkConfig
             onSave={this.handleSaveConfig('talk')}
-            config={this.getSection(configSections, 'talk')}
+            config={this.getSectionElement(configSections, 'talk')}
             onTest={this.handleTestConfig('talk')}
             enabled={this.getEnabled(configSections, 'talk')}
           />
@@ -355,7 +369,7 @@ class AlertTabs extends PureComponent<Props, State> {
         renderComponent: () => (
           <TelegramConfig
             onSave={this.handleSaveConfig('telegram')}
-            config={this.getSection(configSections, 'telegram')}
+            config={this.getSectionElement(configSections, 'telegram')}
             onTest={this.handleTestConfig('telegram')}
             enabled={this.getEnabled(configSections, 'telegram')}
           />
@@ -367,7 +381,7 @@ class AlertTabs extends PureComponent<Props, State> {
         renderComponent: () => (
           <VictorOpsConfig
             onSave={this.handleSaveConfig('victorops')}
-            config={this.getSection(configSections, 'victorops')}
+            config={this.getSectionElement(configSections, 'victorops')}
             onTest={this.handleTestConfig('victorops')}
             enabled={this.getEnabled(configSections, 'victorops')}
           />
@@ -441,8 +455,19 @@ class AlertTabs extends PureComponent<Props, State> {
     }
   }
 
-  private getSection = (sections: Sections, section: string): Element => {
-    return _.get(sections, [section, 'elements', '0'], null)
+  private getSectionElement = (
+    sections: Sections,
+    section: string,
+    elementIndex: number = 0
+  ): Element => {
+    return _.get(sections, [section, 'elements', elementIndex], null)
+  }
+
+  private getSectionElements = (
+    sections: Sections,
+    section: string
+  ): Element[] => {
+    return _.get(sections, [section, 'elements'], null)
   }
 
   private getEnabled = (sections: Sections, section: string): boolean => {
@@ -511,7 +536,10 @@ class AlertTabs extends PureComponent<Props, State> {
 
   private sanitizeProperties = (section: string, properties: Props): Props => {
     const cleanProps = {enabled: true, ...properties}
-    const {redacted} = this.getSection(this.state.configSections, section)
+    const {redacted} = this.getSectionElement(
+      this.state.configSections,
+      section
+    )
     if (redacted && redacted.length) {
       redacted.forEach(badProp => {
         if (properties[badProp] === 'true') {
diff --git a/ui/src/kapacitor/components/config/SlackConfig.tsx b/ui/src/kapacitor/components/config/SlackConfig.tsx
index 17c66ec7d5..efc6064dcb 100644
--- a/ui/src/kapacitor/components/config/SlackConfig.tsx
+++ b/ui/src/kapacitor/components/config/SlackConfig.tsx
@@ -13,6 +13,7 @@ interface Config {
     url: boolean
     channel: string
     enabled: boolean
+    workspace: string
   }
 }
 
@@ -42,7 +43,7 @@ class SlackConfig extends PureComponent<Props, State> {
   }
 
   public render() {
-    const {url, channel} = this.props.config.options
+    const {url, channel, workspace} = this.props.config.options
     const {testEnabled, enabled} = this.state
 
     return (
@@ -55,7 +56,7 @@ class SlackConfig extends PureComponent<Props, State> {
             type="text"
             placeholder="Optional unless multiple Slack configurations exist"
             // ref={r => (this.channel = r)}
-            defaultValue={channel || ''}
+            defaultValue={workspace}
             onChange={this.disableTest}
           />
         </div>
diff --git a/ui/src/kapacitor/components/config/SlackConfigs.tsx b/ui/src/kapacitor/components/config/SlackConfigs.tsx
new file mode 100644
index 0000000000..973b25b3e8
--- /dev/null
+++ b/ui/src/kapacitor/components/config/SlackConfigs.tsx
@@ -0,0 +1,75 @@
+import React, {PureComponent} from 'react'
+import {ErrorHandling} from 'src/shared/decorators/errors'
+import SlackConfig from 'src/kapacitor/components/config/SlackConfig'
+
+interface Properties {
+  channel: string
+  url: string
+}
+
+interface Config {
+  options: {
+    url: boolean
+    channel: string
+  }
+}
+
+interface Props {
+  slackConfigs: any[]
+  config: Config
+  onSave: (properties: Properties) => void
+  onTest: (event: React.MouseEvent<HTMLButtonElement>) => void
+  enabled: boolean
+}
+
+interface State {
+  slackConfigs: any[]
+}
+
+@ErrorHandling
+class SlackConfigs extends PureComponent<Props, State> {
+  constructor(props) {
+    super(props)
+    this.state = {
+      slackConfigs: this.props.slackConfigs,
+    }
+  }
+
+  public render() {
+    const {slackConfigs} = this.state
+    const {onSave, onTest, enabled} = this.props
+    return (
+      <div>
+        {slackConfigs.map((config, i) => (
+          <SlackConfig
+            key={i}
+            onSave={onSave}
+            config={config}
+            onTest={onTest}
+            enabled={enabled}
+          />
+        ))}
+        <button className="btn btn-md btn-default" onClick={this.addConfig}>
+          <span className="icon plus" /> Add Another Config
+        </button>
+      </div>
+    )
+  }
+
+  private get slackConfigs() {
+    return this.state.slackConfigs
+  }
+
+  private addConfig = () => {
+    const configs = this.slackConfigs
+    const newConfig = {
+      options: {
+        url: false,
+        channel: '',
+      },
+    }
+    this.setState({slackConfigs: [...configs, newConfig]})
+  }
+}
+
+export default SlackConfigs
diff --git a/ui/src/shared/apis/index.js b/ui/src/shared/apis/index.js
index 025d3c5d34..a692a52058 100644
--- a/ui/src/shared/apis/index.js
+++ b/ui/src/shared/apis/index.js
@@ -173,6 +173,22 @@ export function updateKapacitorConfigSection(kapacitor, section, properties) {
   return AJAX(params)
 }
 
+export function addKapacitorConfigInSection(kapacitor, section, properties) {
+  return AJAX({
+    method: 'POST',
+    url: kapacitor.links.proxy,
+    params: {
+      path: `/kapacitor/v1/config/${section}/`,
+    },
+    data: {
+      add: properties,
+    },
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  })
+}
+
 export const testAlertOutput = async (kapacitor, outputName, options) => {
   try {
     const {