Add nickname to display text in Alert Handlers section to use nickname

ui/src/kapacitor/components/HandlerTabs.js

@@ -19,7 +19,7 @@ const HandlerTabs = ({
           })}
           onClick={handleChooseHandler(ep)}
         >
-          {ep.type}
+          {ep.text}
           <button
             className="endpoint-tab--delete"
             onClick={handleRemoveHandler(ep)}

ui/src/kapacitor/components/RuleHandlers.js

@@ -126,6 +126,32 @@ class RuleHandlers extends Component {
     )
   }
 
+  getNickname = handler => {
+    const configType = handler.type
+    if (configType === 'slack') {
+      const workspace = _.get(handler, 'workspace')
+
+      if (workspace === '') {
+        return 'default'
+      }
+
+      return workspace
+    }
+
+    return undefined
+  }
+
+  mapWithNicknames = handlers => {
+    return _.map(handlers, h => {
+      const nickname = this.getNickname(h)
+      if (nickname) {
+        return {...h, text: `${h.type} (${nickname})`}
+      }
+
+      return {...h, text: h.type}
+    })
+  }
+
   render() {
     const {
       rule,
@@ -136,17 +162,17 @@ class RuleHandlers extends Component {
     } = this.props
     const {handlersOnThisAlert, selectedHandler} = this.state
 
-    const mappedhandlers = _.map(
+    const mappedHandlers = this.mapWithNicknames([
-      [...DEFAULT_HANDLERS, ...handlersFromConfig],
+      ...DEFAULT_HANDLERS,
-      h => {
+      ...handlersFromConfig,
-        return {...h, text: h.type}
+    ])
-      }
+
-    )
+    const mappedHandlersOnThisAlert = this.mapWithNicknames(handlersOnThisAlert)
 
     const handlers = _.flatten([
-      _.filter(mappedhandlers, ['enabled', true]),
+      _.filter(mappedHandlers, ['enabled', true]),
       {text: 'SEPARATOR'},
-      _.filter(mappedhandlers, ['enabled', false]),
+      _.filter(mappedHandlers, ['enabled', false]),
     ])
 
     const dropdownLabel = handlersOnThisAlert.length
@@ -171,10 +197,10 @@ class RuleHandlers extends Component {
               className="dropdown-170 rule-message--add-endpoint"
             />
           </div>
-          {handlersOnThisAlert.length ? (
+          {mappedHandlersOnThisAlert.length ? (
             <div className="rule-message--endpoints">
               <HandlerTabs
-                handlersOnThisAlert={handlersOnThisAlert}
+                handlersOnThisAlert={mappedHandlersOnThisAlert}
                 selectedHandler={selectedHandler}
                 handleChooseHandler={this.handleChooseHandler}
                 handleRemoveHandler={this.handleRemoveHandler}

ui/src/kapacitor/constants/index.js

@@ -180,7 +180,7 @@ export const HANDLERS_TO_RULE = {
   pagerDuty2: [],
   pushover: ['device', 'title', 'sound', 'url', 'urlTitle'],
   sensu: ['source', 'handlers'],
-  slack: ['channel', 'username', 'iconEmoji'],
+  slack: ['channel', 'username', 'iconEmoji', 'workspace'],
   email: ['to'],
   talk: [],
   telegram: [

ui/src/shared/parsing/parseHandlersFromConfig.js

@@ -20,20 +20,12 @@ const parseHandlersFromConfig = config => {
     data: {sections},
   } = config
 
-  const multiConfigSections = {}
-
   const allHandlers = _.reduce(
     sections,
     (acc, v, k) => {
       const options = getElementOptions(v)
       const type = _.get(MAP_KEYS_FROM_CONFIG, k, k)
 
-      // keep track of sections with multiple configs
-      const numberOfThisConfigType = _.get(options, 'length', 0)
-      if (numberOfThisConfigType > 1) {
-        multiConfigSections[type] = true
-      }
-
       _.forEach(options, option => {
         acc.push({
           // fill type with handler names in rule