Add emptyendpoint if an endpoint is not configured and grab alert options from the kapacitor configuration

ui/src/kapacitor/components/EmptyEndpoint.js

@@ -1,12 +1,15 @@
 import React from 'react'
+import {Link} from 'react-router'
 
-const EmptyEndpoint = () => {
+const EmptyEndpoint = ({configLink}) => {
   return (
     <div className="endpoint-tab-contents">
       <div className="endpoint-tab--parameters">
         <div className="form-group">
-          This endpoint has not been configured, visit your kapacitor
-          configuration page to set it up!
+          This endpoint does not seem to be configured.
+          <Link to={configLink} title="Configuration Page">
+            Configure it here.
+          </Link>
         </div>
       </div>
     </div>

ui/src/kapacitor/components/EndpointInput.js

@@ -6,6 +6,8 @@ const EndpointInput = ({
   placeholder,
   selectedEndpoint,
   handleModifyEndpoint,
+  redacted = false,
+  editable = true,
 }) => {
   return (
     <div className="form-group">
@@ -27,12 +29,14 @@ const EndpointInput = ({
   )
 }
 
-const {func, shape, string} = PropTypes
+const {func, shape, string, bool} = PropTypes
 
 EndpointInput.propTypes = {
-  fieldName: string,
+  fieldName: string.isRequired,
   fieldDisplay: string,
   placeholder: string,
+  redacted: bool,
+  editable: bool,
   selectedEndpoint: shape({}).isRequired,
   handleModifyEndpoint: func.isRequired,
 }

ui/src/kapacitor/components/EndpointOptions.js

@@ -23,13 +23,14 @@ class EndpointOptions extends Component {
   }
 
   render() {
-    const {selectedEndpoint, handleModifyEndpoint} = this.props
+    const {selectedEndpoint, handleModifyEndpoint, configLink} = this.props
     switch (selectedEndpoint && selectedEndpoint.type) {
       case 'post':
         return (
           <PostConfig
             selectedEndpoint={selectedEndpoint}
             handleModifyEndpoint={handleModifyEndpoint}
+            configLink={configLink}
           />
         )
       case 'tcp':
@@ -37,6 +38,7 @@ class EndpointOptions extends Component {
           <TcpConfig
             selectedEndpoint={selectedEndpoint}
             handleModifyEndpoint={handleModifyEndpoint}
+            configLink={configLink}
           />
         )
       case 'exec':
@@ -44,6 +46,7 @@ class EndpointOptions extends Component {
           <ExecConfig
             selectedEndpoint={selectedEndpoint}
             handleModifyEndpoint={handleModifyEndpoint}
+            configLink={configLink}
           />
         )
       case 'log':
@@ -51,6 +54,7 @@ class EndpointOptions extends Component {
           <LogConfig
             selectedEndpoint={selectedEndpoint}
             handleModifyEndpoint={handleModifyEndpoint}
+            configLink={configLink}
           />
         )
       case 'smtp':
@@ -58,6 +62,7 @@ class EndpointOptions extends Component {
           <SmtpConfig
             selectedEndpoint={selectedEndpoint}
             handleModifyEndpoint={handleModifyEndpoint}
+            configLink={configLink}
           />
         )
       case 'alerta':
@@ -65,6 +70,7 @@ class EndpointOptions extends Component {
           <AlertaConfig
             selectedEndpoint={selectedEndpoint}
             handleModifyEndpoint={handleModifyEndpoint}
+            configLink={configLink}
           />
         )
       case 'hipchat':
@@ -72,6 +78,7 @@ class EndpointOptions extends Component {
           <HipchatConfig
             selectedEndpoint={selectedEndpoint}
             handleModifyEndpoint={handleModifyEndpoint}
+            configLink={configLink}
           />
         )
       case 'opsgenie':
@@ -79,6 +86,7 @@ class EndpointOptions extends Component {
           <OpsgenieConfig
             selectedEndpoint={selectedEndpoint}
             handleModifyEndpoint={handleModifyEndpoint}
+            configLink={configLink}
           />
         )
       case 'pagerduty':
@@ -86,6 +94,7 @@ class EndpointOptions extends Component {
           <PagerdutyConfig
             selectedEndpoint={selectedEndpoint}
             handleModifyEndpoint={handleModifyEndpoint}
+            configLink={configLink}
           />
         )
       case 'pushover':
@@ -93,6 +102,7 @@ class EndpointOptions extends Component {
           <PushoverConfig
             selectedEndpoint={selectedEndpoint}
             handleModifyEndpoint={handleModifyEndpoint}
+            configLink={configLink}
           />
         )
       case 'sensu':
@@ -100,6 +110,7 @@ class EndpointOptions extends Component {
           <SensuConfig
             selectedEndpoint={selectedEndpoint}
             handleModifyEndpoint={handleModifyEndpoint}
+            configLink={configLink}
           />
         )
       case 'slack':
@@ -107,6 +118,7 @@ class EndpointOptions extends Component {
           <SlackConfig
             selectedEndpoint={selectedEndpoint}
             handleModifyEndpoint={handleModifyEndpoint}
+            configLink={configLink}
           />
         )
       case 'talk':
@@ -114,6 +126,7 @@ class EndpointOptions extends Component {
           <TalkConfig
             selectedEndpoint={selectedEndpoint}
             handleModifyEndpoint={handleModifyEndpoint}
+            configLink={configLink}
           />
         )
       case 'telegram':
@@ -121,6 +134,7 @@ class EndpointOptions extends Component {
           <TelegramConfig
             selectedEndpoint={selectedEndpoint}
             handleModifyEndpoint={handleModifyEndpoint}
+            configLink={configLink}
           />
         )
       case 'victorops':
@@ -128,6 +142,7 @@ class EndpointOptions extends Component {
           <VictoropsConfig
             selectedEndpoint={selectedEndpoint}
             handleModifyEndpoint={handleModifyEndpoint}
+            configLink={configLink}
           />
         )
       default:

ui/src/kapacitor/components/KapacitorRule.js

@@ -143,6 +143,7 @@ class KapacitorRule extends Component {
       queryConfigs,
       enabledAlerts,
       queryConfigActions,
+      configLink,
     } = this.props
     const {chooseTrigger, updateRuleValues} = ruleActions
     const {timeRange} = this.state
@@ -180,6 +181,7 @@ class KapacitorRule extends Component {
                     onChooseTimeRange={this.handleChooseTimeRange}
                   />
                   <RuleEndpoints
+                    configLink={configLink}
                     rule={rule}
                     actions={ruleActions}
                     enabledAlerts={enabledAlerts}

ui/src/kapacitor/components/RuleEndpoints.js

@@ -131,12 +131,11 @@ class RuleEndpoints extends Component {
   }
 
   render() {
-    const {enabledAlerts} = this.props
+    const {enabledAlerts, configLink} = this.props
     const {endpointsOnThisAlert, selectedEndpoint} = this.state
     const alerts = _.map([...DEFAULT_ALERTS, ...enabledAlerts], a => {
       return {...a, text: a.type}
     })
-
     const dropdownLabel = endpointsOnThisAlert.length
       ? 'Add another Endpoint'
       : 'Add an Endpoint'
@@ -168,6 +167,7 @@ class RuleEndpoints extends Component {
                   handleRemoveEndpoint={this.handleRemoveEndpoint}
                 />
                 <EndpointOptions
+                  configLink={configLink}
                   selectedEndpoint={selectedEndpoint}
                   handleModifyEndpoint={this.handleModifyEndpoint}
                 />

ui/src/kapacitor/components/configEP/AlertaConfig.js

@@ -2,21 +2,36 @@ import React, {PropTypes} from 'react'
 import EndpointInput from 'src/kapacitor/components/EndpointInput'
 import EmptyEndpoint from 'src/kapacitor/components/EmptyEndpoint'
 
-const AlertaConfig = ({selectedEndpoint, handleModifyEndpoint}) => {
+const AlertaConfig = ({selectedEndpoint, handleModifyEndpoint, configLink}) => {
   return selectedEndpoint.enabled
     ? <div className="endpoint-tab-contents">
         <div className="endpoint-tab--parameters">
-          <h4>Configured Parameters</h4>
-        </div>
-        <div className="endpoint-tab--parameters">
-          <h4>Optional Parameters</h4>
+          <h4>Parameters from Kapacitor Configuration</h4>
+          <EndpointInput
+            selectedEndpoint={selectedEndpoint}
+            handleModifyEndpoint={handleModifyEndpoint}
+            fieldName="environment"
+            fieldDisplay="Environment"
+            placeholder="Ex: environment"
+          />
+          <EndpointInput
+            selectedEndpoint={selectedEndpoint}
+            handleModifyEndpoint={handleModifyEndpoint}
+            fieldName="origin"
+            fieldDisplay="Origin"
+            placeholder="Ex: origin"
+          />
           <EndpointInput
             selectedEndpoint={selectedEndpoint}
             handleModifyEndpoint={handleModifyEndpoint}
             fieldName="token"
             fieldDisplay="Token"
             placeholder="Ex: my_token"
+            redacted={true}
           />
+        </div>
+        <div className="endpoint-tab--parameters">
+          <h4>Optional Parameters</h4>
           <EndpointInput
             selectedEndpoint={selectedEndpoint}
             handleModifyEndpoint={handleModifyEndpoint}
@@ -31,13 +46,6 @@ const AlertaConfig = ({selectedEndpoint, handleModifyEndpoint}) => {
             fieldDisplay="Event"
             placeholder="Ex: event"
           />
-          <EndpointInput
-            selectedEndpoint={selectedEndpoint}
-            handleModifyEndpoint={handleModifyEndpoint}
-            fieldName="environment"
-            fieldDisplay="Environment"
-            placeholder="Ex: environment"
-          />
           <EndpointInput
             selectedEndpoint={selectedEndpoint}
             handleModifyEndpoint={handleModifyEndpoint}
@@ -52,37 +60,24 @@ const AlertaConfig = ({selectedEndpoint, handleModifyEndpoint}) => {
             fieldDisplay="Value"
             placeholder="Ex: value"
           />
-          <EndpointInput
-            selectedEndpoint={selectedEndpoint}
-            handleModifyEndpoint={handleModifyEndpoint}
-            fieldName="origin"
-            fieldDisplay="Origin"
-            placeholder="Ex: origin"
-          />
           <EndpointInput
             selectedEndpoint={selectedEndpoint}
             handleModifyEndpoint={handleModifyEndpoint}
             fieldName="service"
             fieldDisplay="Service"
-            placeholder="Ex: my_token"
-          />
-          <EndpointInput
-            selectedEndpoint={selectedEndpoint}
-            handleModifyEndpoint={handleModifyEndpoint}
-            fieldName="timeout"
-            fieldDisplay="Timeout"
-            placeholder="Ex: timeout_duration"
+            placeholder="Ex: service_name"
           />
         </div>
       </div>
-    : <EmptyEndpoint />
+    : <EmptyEndpoint configLink={configLink} />
 }
 
-const {func, shape} = PropTypes
+const {func, shape, string} = PropTypes
 
 AlertaConfig.propTypes = {
   selectedEndpoint: shape({}).isRequired,
   handleModifyEndpoint: func.isRequired,
+  configLink: string,
 }
 
 export default AlertaConfig

ui/src/kapacitor/components/configEP/HipchatConfig.js

@@ -2,11 +2,23 @@ import React, {PropTypes} from 'react'
 import EndpointInput from 'src/kapacitor/components/EndpointInput'
 import EmptyEndpoint from 'src/kapacitor/components/EmptyEndpoint'
 
-const HipchatConfig = ({selectedEndpoint, handleModifyEndpoint}) => {
+const HipchatConfig = ({
+  selectedEndpoint,
+  handleModifyEndpoint,
+  configLink,
+}) => {
   return selectedEndpoint.enabled
     ? <div className="endpoint-tab-contents">
         <div className="endpoint-tab--parameters">
-          <h4>Optional Parameters</h4>
+          <h4>Parameters:</h4>
+          <EndpointInput
+            selectedEndpoint={selectedEndpoint}
+            handleModifyEndpoint={handleModifyEndpoint}
+            fieldName="url"
+            fieldDisplay="Subdomain Url"
+            placeholder="Ex: hipchat_subdomain"
+            editable={false}
+          />
           <EndpointInput
             selectedEndpoint={selectedEndpoint}
             handleModifyEndpoint={handleModifyEndpoint}
@@ -20,17 +32,19 @@ const HipchatConfig = ({selectedEndpoint, handleModifyEndpoint}) => {
             fieldName="token"
             fieldDisplay="Token:"
             placeholder="Ex: the_token"
+            redacted={true}
           />
         </div>
       </div>
-    : <EmptyEndpoint />
+    : <EmptyEndpoint configLink={configLink} />
 }
 
-const {func, shape} = PropTypes
+const {func, shape, string} = PropTypes
 
 HipchatConfig.propTypes = {
   selectedEndpoint: shape({}).isRequired,
   handleModifyEndpoint: func.isRequired,
+  configLink: string,
 }
 
 export default HipchatConfig

ui/src/kapacitor/components/configEP/OpsGenieConfig.js

@@ -2,7 +2,11 @@ import React, {PropTypes} from 'react'
 import EndpointInput from 'src/kapacitor/components/EndpointInput'
 import EmptyEndpoint from 'src/kapacitor/components/EmptyEndpoint'
 
-const OpsgenieConfig = ({selectedEndpoint, handleModifyEndpoint}) => {
+const OpsgenieConfig = ({
+  selectedEndpoint,
+  handleModifyEndpoint,
+  configLink,
+}) => {
   return selectedEndpoint.enabled
     ? <div className="endpoint-tab-contents">
         <div className="endpoint-tab--parameters">
@@ -23,14 +27,15 @@ const OpsgenieConfig = ({selectedEndpoint, handleModifyEndpoint}) => {
           />
         </div>
       </div>
-    : <EmptyEndpoint />
+    : <EmptyEndpoint configLink={configLink} />
 }
 
-const {func, shape} = PropTypes
+const {func, shape, string} = PropTypes
 
 OpsgenieConfig.propTypes = {
   selectedEndpoint: shape({}).isRequired,
   handleModifyEndpoint: func.isRequired,
+  configLink: string,
 }
 
 export default OpsgenieConfig

ui/src/kapacitor/components/configEP/PagerDutyConfig.js

@@ -2,7 +2,11 @@ import React, {PropTypes} from 'react'
 import EndpointInput from 'src/kapacitor/components/EndpointInput'
 import EmptyEndpoint from 'src/kapacitor/components/EmptyEndpoint'
 
-const PagerdutyConfig = ({selectedEndpoint, handleModifyEndpoint}) => {
+const PagerdutyConfig = ({
+  selectedEndpoint,
+  handleModifyEndpoint,
+  configLink,
+}) => {
   return selectedEndpoint.enabled
     ? <div className="endpoint-tab-contents">
         <div className="endpoint-tab--parameters">
@@ -16,14 +20,15 @@ const PagerdutyConfig = ({selectedEndpoint, handleModifyEndpoint}) => {
           />
         </div>
       </div>
-    : <EmptyEndpoint />
+    : <EmptyEndpoint configLink={configLink} />
 }
 
-const {func, shape} = PropTypes
+const {func, shape, string} = PropTypes
 
 PagerdutyConfig.propTypes = {
   selectedEndpoint: shape({}).isRequired,
   handleModifyEndpoint: func.isRequired,
+  configLink: string,
 }
 
 export default PagerdutyConfig

ui/src/kapacitor/components/configEP/PushoverConfig.js

@@ -2,7 +2,11 @@ import React, {PropTypes} from 'react'
 import EndpointInput from 'src/kapacitor/components/EndpointInput'
 import EmptyEndpoint from 'src/kapacitor/components/EmptyEndpoint'
 
-const PushoverConfig = ({selectedEndpoint, handleModifyEndpoint}) => {
+const PushoverConfig = ({
+  selectedEndpoint,
+  handleModifyEndpoint,
+  configLink,
+}) => {
   return selectedEndpoint.enabled
     ? <div className="endpoint-tab-contents">
         <div className="endpoint-tab--parameters">
@@ -53,14 +57,15 @@ const PushoverConfig = ({selectedEndpoint, handleModifyEndpoint}) => {
           />
         </div>
       </div>
-    : <EmptyEndpoint />
+    : <EmptyEndpoint configLink={configLink} />
 }
 
-const {func, shape} = PropTypes
+const {func, shape, string} = PropTypes
 
 PushoverConfig.propTypes = {
   selectedEndpoint: shape({}).isRequired,
   handleModifyEndpoint: func.isRequired,
+  configLink: string,
 }
 
 export default PushoverConfig

ui/src/kapacitor/components/configEP/SMTPConfig.js

@@ -1,28 +1,30 @@
 import React, {PropTypes} from 'react'
 import EndpointInput from 'src/kapacitor/components/EndpointInput'
+import EmptyEndpoint from 'src/kapacitor/components/EmptyEndpoint'
 
-const SmtpConfig = ({selectedEndpoint, handleModifyEndpoint}) => {
-  return (
-    <div className="endpoint-tab-contents">
-      <div className="endpoint-tab--parameters">
-        <h4>Optional Parameters</h4>
-        <EndpointInput
-          selectedEndpoint={selectedEndpoint}
-          handleModifyEndpoint={handleModifyEndpoint}
-          fieldName="to"
-          fieldDisplay="E-mail Addresses: (separated by spaces)"
-          placeholder="Ex: bob@domain.com susan@domain.com"
-        />
+const SmtpConfig = ({selectedEndpoint, handleModifyEndpoint, configLink}) => {
+  return selectedEndpoint.enabled
+    ? <div className="endpoint-tab-contents">
+        <div className="endpoint-tab--parameters">
+          <h4>Optional Parameters</h4>
+          <EndpointInput
+            selectedEndpoint={selectedEndpoint}
+            handleModifyEndpoint={handleModifyEndpoint}
+            fieldName="to"
+            fieldDisplay="E-mail Addresses: (separated by spaces)"
+            placeholder="Ex: bob@domain.com susan@domain.com"
+          />
+        </div>
       </div>
-    </div>
-  )
+    : <EmptyEndpoint configLink={configLink} />
 }
 
-const {func, shape} = PropTypes
+const {func, shape, string} = PropTypes
 
 SmtpConfig.propTypes = {
   selectedEndpoint: shape({}).isRequired,
   handleModifyEndpoint: func.isRequired,
+  configLink: string,
 }
 
 export default SmtpConfig

ui/src/kapacitor/components/configEP/SensuConfig.js

@@ -2,7 +2,7 @@ import React, {PropTypes} from 'react'
 import EndpointInput from 'src/kapacitor/components/EndpointInput'
 import EmptyEndpoint from 'src/kapacitor/components/EmptyEndpoint'
 
-const SensuConfig = ({selectedEndpoint, handleModifyEndpoint}) => {
+const SensuConfig = ({selectedEndpoint, handleModifyEndpoint, configLink}) => {
   return selectedEndpoint.enabled
     ? <div className="endpoint-tab-contents">
         <div className="endpoint-tab--parameters">
@@ -23,14 +23,15 @@ const SensuConfig = ({selectedEndpoint, handleModifyEndpoint}) => {
           />
         </div>
       </div>
-    : <EmptyEndpoint />
+    : <EmptyEndpoint configLink={configLink} />
 }
 
-const {func, shape} = PropTypes
+const {func, shape, string} = PropTypes
 
 SensuConfig.propTypes = {
   selectedEndpoint: shape({}).isRequired,
   handleModifyEndpoint: func.isRequired,
+  configLink: string,
 }
 
 export default SensuConfig

ui/src/kapacitor/components/configEP/SlackConfig.js

@@ -2,7 +2,7 @@ import React, {PropTypes} from 'react'
 import EndpointInput from 'src/kapacitor/components/EndpointInput'
 import EmptyEndpoint from 'src/kapacitor/components/EmptyEndpoint'
 
-const SlackConfig = ({selectedEndpoint, handleModifyEndpoint}) => {
+const SlackConfig = ({selectedEndpoint, handleModifyEndpoint, configLink}) => {
   return selectedEndpoint.enabled
     ? <div className="endpoint-tab-contents">
         <div className="endpoint-tab--parameters">
@@ -30,14 +30,15 @@ const SlackConfig = ({selectedEndpoint, handleModifyEndpoint}) => {
           />
         </div>
       </div>
-    : <EmptyEndpoint />
+    : <EmptyEndpoint configLink={configLink} />
 }
 
-const {func, shape} = PropTypes
+const {func, shape, string} = PropTypes
 
 SlackConfig.propTypes = {
   selectedEndpoint: shape({}).isRequired,
   handleModifyEndpoint: func.isRequired,
+  configLink: string,
 }
 
 export default SlackConfig

ui/src/kapacitor/components/configEP/TalkConfig.js

@@ -1,19 +1,20 @@
 import React, {PropTypes} from 'react'
 import EmptyEndpoint from 'src/kapacitor/components/EmptyEndpoint'
 
-const TalkConfig = ({selectedEndpoint}) => {
+const TalkConfig = ({selectedEndpoint, configLink}) => {
   return selectedEndpoint.enabled
     ? <div className="rule-section--row rule-section--border-bottom">
         <p>Talk requires no additional alert parameters.</p>
       </div>
-    : <EmptyEndpoint />
+    : <EmptyEndpoint configLink={configLink} />
 }
 
-const {func, shape} = PropTypes
+const {func, shape, string} = PropTypes
 
 TalkConfig.propTypes = {
   selectedEndpoint: shape({}).isRequired,
   handleModifyEndpoint: func.isRequired,
+  configLink: string,
 }
 
 export default TalkConfig

ui/src/kapacitor/components/configEP/TelegramConfig.js

@@ -3,7 +3,11 @@ import EndpointInput from 'src/kapacitor/components/EndpointInput'
 import EndpointCheckbox from 'src/kapacitor/components/EndpointCheckbox'
 import EmptyEndpoint from 'src/kapacitor/components/EmptyEndpoint'
 
-const TelegramConfig = ({selectedEndpoint, handleModifyEndpoint}) => {
+const TelegramConfig = ({
+  selectedEndpoint,
+  handleModifyEndpoint,
+  configLink,
+}) => {
   return selectedEndpoint.enabled
     ? <div className="endpoint-tab-contents">
         <div className="endpoint-tab--parameters">
@@ -36,14 +40,15 @@ const TelegramConfig = ({selectedEndpoint, handleModifyEndpoint}) => {
           />
         </div>
       </div>
-    : <EmptyEndpoint />
+    : <EmptyEndpoint configLink={configLink} />
 }
 
-const {func, shape} = PropTypes
+const {func, shape, string} = PropTypes
 
 TelegramConfig.propTypes = {
   selectedEndpoint: shape({}).isRequired,
   handleModifyEndpoint: func.isRequired,
+  configLink: string,
 }
 
 export default TelegramConfig

ui/src/kapacitor/components/configEP/VictorOpsConfig.js

@@ -2,7 +2,11 @@ import React, {PropTypes} from 'react'
 import EndpointInput from 'src/kapacitor/components/EndpointInput'
 import EmptyEndpoint from 'src/kapacitor/components/EmptyEndpoint'
 
-const VictoropsConfig = ({selectedEndpoint, handleModifyEndpoint}) => {
+const VictoropsConfig = ({
+  selectedEndpoint,
+  handleModifyEndpoint,
+  configLink,
+}) => {
   return selectedEndpoint.enabled
     ? <div className="endpoint-tab-contents">
         <div className="endpoint-tab--parameters">
@@ -16,14 +20,15 @@ const VictoropsConfig = ({selectedEndpoint, handleModifyEndpoint}) => {
           />
         </div>
       </div>
-    : <EmptyEndpoint />
+    : <EmptyEndpoint configLink={configLink} />
 }
 
-const {func, shape} = PropTypes
+const {func, shape, string} = PropTypes
 
 VictoropsConfig.propTypes = {
   selectedEndpoint: shape({}).isRequired,
   handleModifyEndpoint: func.isRequired,
+  configLink: string,
 }
 
 export default VictoropsConfig

ui/src/kapacitor/constants/index.js

@@ -87,57 +87,68 @@ export const RULE_MESSAGE_TEMPLATES = {
     text: 'The time of the point that triggered the event',
   },
 }
-// DEFAULT_ALERTS provides a template for alerts that don't exist in the kapacitor config
+// DEFAULT_ALERTS are empty alert templates for handlers that don't exist in the kapacitor config
 export const DEFAULT_ALERTS = [
   {
     type: 'post',
     enabled: true,
     url: '',
     headers: '',
-    captureResponse: '',
-    timeout: '',
-  }, // is actually called 'post'??
+  },
   {type: 'tcp', enabled: true, address: ''},
-  {type: 'exec', enabled: true, command: ''},
+  {type: 'exec', enabled: true, command: []},
   {type: 'log', enabled: true, filePath: ''},
 ]
 
-// ALERT_FIELDS_FROM_CONFIG returns an array of fields to accept from the Kapacitor Config
-// I WILL NEED TO ADD MORE TO DISPLAY FIELDS WHICH COME FROM THE CONFIG WHICH WILL JUST BE DISPLAYED NOT EDITABLE>
-// I need to check what happens when one of these fields does not exist- the value in the input will fail at first. ?? add a default val?
-export const ALERT_FIELDS_FROM_CONFIG = {
-  alerta: [
-    'token',
-    'resource',
-    'event',
-    'environment',
-    'group',
-    'value',
-    'origin',
-    'service',
-    'timeout',
-  ],
-  hipchat: ['room', 'token'],
-  opsgenie: ['teams', 'recipients'],
-  pagerduty: ['serviceKey'],
-  pushover: ['userKey', 'device', 'title', 'url', 'urlTitle', 'sound'],
-  sensu: ['source', 'handlers'],
-  slack: ['channel', 'username', 'iconEmoji'],
-  smtp: ['to'],
-  snmpTrap: ['trapOid', 'data'], // [oid/type/value]
-  talk: [],
+// ALERTS_FROM_CONFIG the array of fields to accept from Kapacitor Config
+export const ALERTS_FROM_CONFIG = {
+  alerta: ['environment', 'origin', 'token'], // token = bool
+  hipchat: ['url', 'room', 'token'], // token = bool
+  opsgenie: ['api-key', 'teams', 'recipients'], // api-key = bool
+  pagerduty: ['service-key'], // service-key = bool
+  pushover: ['token', 'user-key'], // token = bool, user-key = bool
+  sensu: ['addr', 'source'],
+  slack: ['url', 'channel'], // url = bool
+  smtp: ['from', 'host', 'password', 'port', 'username'], // password = bool
+  talk: ['url', 'author_name'], // url = bool
   telegram: [
-    'chatId',
-    'parseMode',
-    'disableWebPagePreview',
-    'disableNotification',
-  ],
-  victorOps: ['routingKey'],
-  influxdb: [],
+    'token',
+    'chat-id',
+    'parse-mode',
+    'disable-web-page-preview',
+    'disable-notification',
+  ], // token = bool
+  victorops: ['api-key', 'routing-key'], // api-key = bool
+  // snmpTrap: ['trapOid', 'data'], // [oid/type/value]
+  // influxdb:[],
+  // mqtt:[]
+}
+
+export const CONFIG_TO_RULE = {
+  alerta: {},
+  hipchat: {},
+  opsgenie: {},
+  pagerduty: {'service-key': 'serviceKey'},
+  pushover: {'user-key': 'userKey'},
+  sensu: {},
+  slack: {},
+  // smtp: 'email', // this won't work.
+  smtp: {},
+  talk: {},
+  telegram: {
+    'chat-id': 'chatId',
+    'parse-mode': 'parseMode',
+    'disable-web-page-preview': 'disableWebPagePreview',
+    'disable-notification': 'disableNotification',
+  },
+  victorops: {'routing-key': 'routingKey'},
+  // snmpTrap: {},
+  // influxd: {},
+  // mqtt: {}
 }
 
 // ALERTS_TO_RULE returns array of fields that may be updated for each alert on rule.
-export const ALERT_FIELDS_TO_RULE = {
+export const ALERTS_TO_RULE = {
   alerta: [
     'token',
     'resource',
@@ -147,7 +158,6 @@ export const ALERT_FIELDS_TO_RULE = {
     'value',
     'origin',
     'service',
-    'timeout',
   ],
   hipchat: ['room', 'token'],
   opsgenie: ['teams', 'recipients'],
@@ -164,9 +174,8 @@ export const ALERT_FIELDS_TO_RULE = {
     'disableWebPagePreview',
     'disableNotification',
   ],
-  victorOps: ['routingKey'],
-  influxdb: [], // ?????
-  post: ['url', 'headers', 'captureResponse', 'timeout'],
+  victorops: ['routingKey'],
+  post: ['url', 'headers', 'captureResponse'],
   tcp: ['address'],
   exec: ['command'],
   log: ['filePath'],

ui/src/kapacitor/containers/KapacitorRulePage.js

@@ -9,26 +9,31 @@ import {bindActionCreators} from 'redux'
 import {getActiveKapacitor, getKapacitorConfig} from 'shared/apis/index'
 import {
   DEFAULT_RULE_ID,
-  ALERT_FIELDS_FROM_CONFIG,
+  ALERTS_FROM_CONFIG,
+  CONFIG_TO_RULE,
 } from 'src/kapacitor/constants'
 import KapacitorRule from 'src/kapacitor/components/KapacitorRule'
 
 const getEnabled = config => {
   const {data: {sections}} = config
+
   const allAlerts = _.map(sections, (v, k) => {
     const fromConfig = _.get(v, ['elements', '0', 'options'], {})
-    const pickedFromConfig = _.pick(fromConfig, [
-      ALERT_FIELDS_FROM_CONFIG[k],
-      'enabled',
-    ])
-    return {type: k, ...pickedFromConfig}
+    return {type: k, ...fromConfig}
   })
-  // let enabledAlerts = _.filter(allAlerts, v => _.get(v, ['enabled'], false))
-  const enabledAlerts = _.reject(
-    allAlerts,
-    v => v.type === 'influxdb' || v.type === 'snmptrap'
-  )
-  return enabledAlerts
+
+  const allowedAlerts = _.filter(allAlerts, a => a.type in ALERTS_FROM_CONFIG)
+
+  const pickedAlerts = _.map(allowedAlerts, a => {
+    return _.pick(a, ['type', 'enabled', ...ALERTS_FROM_CONFIG[a.type]])
+  })
+
+  const mappedAlerts = _.map(pickedAlerts, p => {
+    return _.mapKeys(p, (v, k) => {
+      return _.get(CONFIG_TO_RULE[p.type], k, k)
+    })
+  })
+  return mappedAlerts
 }
 
 class KapacitorRulePage extends Component {
@@ -101,6 +106,7 @@ class KapacitorRulePage extends Component {
         ruleID={params.ruleID}
         router={router}
         kapacitor={kapacitor}
+        configLink={`/sources/${source.id}/kapacitors/${kapacitor.id}/edit`}
       />
     )
   }

ui/src/kapacitor/reducers/rules.js

@@ -1,7 +1,7 @@
 import {
   defaultRuleConfigs,
   DEFAULT_RULE_ID,
-  ALERT_FIELDS_TO_RULE,
+  ALERTS_TO_RULE,
 } from 'src/kapacitor/constants'
 import _ from 'lodash'
 
@@ -94,7 +94,7 @@ export default function rules(state = {}, action) {
         const existing = _.get(alertNodesByType, ep.type, [])
         alertNodesByType[ep.type] = [
           ...existing,
-          _.pick(ep, ALERT_FIELDS_TO_RULE[ep.type]),
+          _.pick(ep, ALERTS_TO_RULE[ep.type]),
         ]
       })
       return Object.assign({}, state, {