Consume alert EP options from kapacitorconfig

ui/src/kapacitor/components/KapacitorRule.js

@@ -193,22 +193,24 @@ class KapacitorRule extends Component {
   }
 }
 
+const {arrayOf, func, shape, string} = PropTypes
+
 KapacitorRule.propTypes = {
-  source: PropTypes.shape({}).isRequired,
-  rule: PropTypes.shape({
-    values: PropTypes.shape({}),
+  source: shape({}).isRequired,
+  rule: shape({
+    values: shape({}),
   }).isRequired,
-  query: PropTypes.shape({}).isRequired,
-  queryConfigs: PropTypes.shape({}).isRequired,
-  queryConfigActions: PropTypes.shape({}).isRequired,
-  ruleActions: PropTypes.shape({}).isRequired,
-  addFlashMessage: PropTypes.func.isRequired,
-  ruleID: PropTypes.string.isRequired,
-  enabledAlerts: PropTypes.arrayOf(PropTypes.string.isRequired).isRequired,
-  router: PropTypes.shape({
-    push: PropTypes.func.isRequired,
+  query: shape({}).isRequired,
+  queryConfigs: shape({}).isRequired,
+  queryConfigActions: shape({}).isRequired,
+  ruleActions: shape({}).isRequired,
+  addFlashMessage: func.isRequired,
+  ruleID: string.isRequired,
+  enabledAlerts: arrayOf(shape({})).isRequired,
+  router: shape({
+    push: func.isRequired,
   }).isRequired,
-  kapacitor: PropTypes.shape({}).isRequired,
+  kapacitor: shape({}).isRequired,
 }
 
 export default KapacitorRule

ui/src/kapacitor/components/RuleMessage.js

@@ -18,10 +18,9 @@ const alertNodesToEndpoints = rule => {
     endpointsOnThisAlert.push({
       alias: ep.name + count,
       type: ep.name,
-      text: ep.name,
-      ruleID: rule.id,
-      args: ep.args,
+      args: ep.args, // TODO args+properties= options?
       properties: ep.properties,
+      options: {},
     })
   })
   const selectedEndpoint = endpointsOnThisAlert.length
@@ -51,8 +50,8 @@ class RuleMessage extends Component {
     actions.updateMessage(rule.id, e.target.value)
   }
 
-  handleChooseAlert = item => () => {
-    this.setState({selectedEndpoint: item})
+  handleChooseAlert = ep => () => {
+    this.setState({selectedEndpoint: ep})
   }
 
   handleAddEndpoint = selectedItem => {
@@ -60,35 +59,33 @@ class RuleMessage extends Component {
     const newItemNumbering = _.get(endpointsOfKind, selectedItem.type, 0) + 1
     const newItemName = selectedItem.type + newItemNumbering
     const newEndpoint = {
+      ...selectedItem,
       alias: newItemName,
-      type: selectedItem.type,
-      ruleID: selectedItem.ruleID,
     }
     this.setState(
       {
         endpointsOnThisAlert: [...endpointsOnThisAlert, newEndpoint],
         endpointsOfKind: {
           ...endpointsOfKind,
-          [selectedItem.alias]: newItemNumbering,
+          [selectedItem.type]: newItemNumbering,
         },
         selectedEndpoint: newEndpoint,
       },
       this.handleUpdateAllAlerts
     )
   }
-
-  handleRemoveEndpoint = alert => e => {
+  handleRemoveEndpoint = removedEP => e => {
     e.stopPropagation()
     const {endpointsOnThisAlert, selectedEndpoint} = this.state
     const removedIndex = _.findIndex(endpointsOnThisAlert, [
       'alias',
-      alert.alias,
+      removedEP.alias,
     ])
     const remainingEndpoints = _.reject(endpointsOnThisAlert, [
       'alias',
-      alert.alias,
+      removedEP.alias,
     ])
-    if (selectedEndpoint.alias === alert.alias) {
+    if (selectedEndpoint.alias === removedEP.alias) {
       const selectedIndex = removedIndex > 0 ? removedIndex - 1 : 0
       const newSelected = remainingEndpoints.length
         ? remainingEndpoints[selectedIndex]
@@ -96,9 +93,7 @@ class RuleMessage extends Component {
       this.setState({selectedEndpoint: newSelected})
     }
     this.setState(
-      {
-        endpointsOnThisAlert: remainingEndpoints,
-      },
+      {endpointsOnThisAlert: remainingEndpoints},
       this.handleUpdateAllAlerts
     )
   }
@@ -113,15 +108,9 @@ class RuleMessage extends Component {
   render() {
     const {rule, actions, enabledAlerts} = this.props
     const {endpointsOnThisAlert, selectedEndpoint} = this.state
-    const defaultAlertEndpoints = DEFAULT_ALERTS.map(alias => {
-      return {alias, text: alias, type: alias, ruleID: rule.id}
+    const alerts = _.map([...DEFAULT_ALERTS, ...enabledAlerts], a => {
+      return {...a, text: a.type}
     })
-    const alerts = [
-      ...defaultAlertEndpoints,
-      ...enabledAlerts.map(alias => {
-        return {text: alias, type: alias, ruleID: rule.id}
-      }),
-    ]
     return (
       <div className="rule-section">
         <h3 className="rule-section--heading">Alert Message</h3>
@@ -172,7 +161,7 @@ class RuleMessage extends Component {
   }
 }
 
-const {arrayOf, func, shape, string} = PropTypes
+const {arrayOf, func, shape} = PropTypes
 
 RuleMessage.propTypes = {
   rule: shape({}).isRequired,
@@ -182,7 +171,7 @@ RuleMessage.propTypes = {
     updateDetails: func.isRequired,
     updateAlertProperty: func.isRequired,
   }).isRequired,
-  enabledAlerts: arrayOf(string.isRequired).isRequired,
+  enabledAlerts: arrayOf(shape({})),
 }
 
 export default RuleMessage

ui/src/kapacitor/components/RuleMessageOptions.js

@@ -4,7 +4,7 @@ import {
   TcpConfig,
   ExecConfig,
   LogConfig,
-  EmailConfig,
+  SmtpConfig,
   AlertaConfig,
   HipchatConfig,
   OpsgenieConfig,
@@ -17,8 +17,6 @@ import {
   VictoropsConfig,
 } from './configEP'
 
-import {RULE_ALERT_OPTIONS} from 'src/kapacitor/constants'
-
 class RuleMessageOptions extends Component {
   constructor(props) {
     super(props)

ui/src/kapacitor/constants/index.js

@@ -88,7 +88,12 @@ export const RULE_MESSAGE_TEMPLATES = {
   },
 }
 
-export const DEFAULT_ALERTS = ['http', 'tcp', 'exec', 'log']
+export const DEFAULT_ALERTS = [
+  {type: 'http', options: {}},
+  {type: 'tcp', options: {}},
+  {type: 'exec', options: {}},
+  {type: 'log', options: {}},
+]
 
 export const RULE_ALERT_OPTIONS = {
   http: {

ui/src/kapacitor/containers/KapacitorRulePage.js

@@ -7,9 +7,22 @@ import * as kapacitorQueryConfigActionCreators from 'src/kapacitor/actions/query
 
 import {bindActionCreators} from 'redux'
 import {getActiveKapacitor, getKapacitorConfig} from 'shared/apis/index'
-import {RULE_ALERT_OPTIONS, DEFAULT_RULE_ID} from 'src/kapacitor/constants'
+import {DEFAULT_RULE_ID} from 'src/kapacitor/constants'
 import KapacitorRule from 'src/kapacitor/components/KapacitorRule'
 
+const getEnabled = config => {
+  const {data: {sections}} = config
+  const allAlerts = _.map(sections, (v, k) => {
+    return {type: k, options: _.get(v, ['elements', '0', 'options'], {})}
+  })
+  let enabledAlerts = _.filter(allAlerts, v =>
+    _.get(v, ['options', 'enabled'], false)
+  )
+  enabledAlerts = _.reject(enabledAlerts, v => v.type === 'influxdb')
+  // _.get(RULE_ALERT_OPTIONS, section, false)
+  return enabledAlerts
+}
+
 class KapacitorRulePage extends Component {
   constructor(props) {
     super(props)
@@ -35,16 +48,8 @@ class KapacitorRulePage extends Component {
     }
 
     try {
-      const {data: {sections}} = await getKapacitorConfig(kapacitor)
-      const enabledAlerts = Object.keys(sections).filter(
-        section =>
-          _.get(
-            sections,
-            [section, 'elements', '0', 'options', 'enabled'],
-            false
-          ) && _.get(RULE_ALERT_OPTIONS, section, false)
-      )
-
+      const kapacitorConfig = await getKapacitorConfig(kapacitor)
+      const enabledAlerts = getEnabled(kapacitorConfig)
       this.setState({kapacitor, enabledAlerts})
     } catch (error) {
       addFlashMessage({