Features/disable alert configs

CHANGELOG.md

@@ -5,6 +5,7 @@
 1.  [#3233](https://github.com/influxdata/chronograf/pull/3233): Add default retention policy field as option in source configuration for use in querying hosts from Host List page & Host pages
 1.  [#3290](https://github.com/influxdata/chronograf/pull/3290): Add support for PagerDuty v2 in UI
 1.  [#3369](https://github.com/influxdata/chronograf/pull/3369): Add support for OpsGenie v2 in UI
+1.  [#3416](https://github.com/influxdata/chronograf/pull/3416): Allow kapacitor services to be disabled
 
 ### UI Improvements
 

ui/package.json

@@ -119,7 +119,7 @@
     "webpack-dev-server": "^2.11.1"
   },
   "dependencies": {
-    "axios": "^0.13.1",
+    "axios": "^0.18.0",
     "bignumber.js": "^4.0.2",
     "calculate-size": "^1.1.1",
     "chroma-js": "^1.3.6",

ui/src/kapacitor/components/AlertTabs.tsx

@@ -430,7 +430,7 @@ class AlertTabs extends PureComponent<Props, State> {
     return _.get(
       sections,
       [section, 'elements', '0', 'options', 'enabled'],
-      null
+      false
     )
   }
 
@@ -475,7 +475,7 @@ class AlertTabs extends PureComponent<Props, State> {
   }
 
   private sanitizeProperties = (section: string, properties: Props): Props => {
-    const cleanProps = {...properties, enabled: true}
+    const cleanProps = {enabled: true, ...properties}
     const {redacted} = this.getSection(this.state.configSections, section)
     if (redacted && redacted.length) {
       redacted.forEach(badProp => {

ui/src/kapacitor/components/HandlerEmpty.js

@@ -5,7 +5,7 @@ const HandlerEmpty = ({onGoToConfig, validationError}) => (
   <div className="endpoint-tab-contents">
     <div className="endpoint-tab--parameters">
       <div className="endpoint-tab--parameters--empty">
-        <p>This handler has not been configured</p>
+        <p>This handler is not enabled</p>
         <div className="form-group form-group-submit col-xs-12 text-center">
           <button
             className="btn btn-primary"

ui/src/kapacitor/components/config/AlertaConfig.tsx

@@ -1,4 +1,5 @@
-import React, {PureComponent} from 'react'
+import _ from 'lodash'
+import React, {PureComponent, ChangeEvent} from 'react'
 
 import RedactedInput from 'src/kapacitor/components/config/RedactedInput'
 import {ErrorHandling} from 'src/shared/decorators/errors'
@@ -16,6 +17,7 @@ interface Config {
     origin: string
     token: boolean
     url: string
+    enabled: boolean
   }
 }
 
@@ -28,6 +30,7 @@ interface Props {
 
 interface State {
   testEnabled: boolean
+  enabled: boolean
 }
 
 @ErrorHandling
@@ -41,12 +44,13 @@ class AlertaConfig extends PureComponent<Props, State> {
     super(props)
     this.state = {
       testEnabled: this.props.enabled,
+      enabled: _.get(this.props, 'config.options.enabled', false),
     }
   }
 
   public render() {
     const {environment, origin, token, url} = this.props.config.options
-    const {testEnabled} = this.state
+    const {testEnabled, enabled} = this.state
 
     return (
       <form onSubmit={this.handleSubmit}>
@@ -97,6 +101,18 @@ class AlertaConfig extends PureComponent<Props, State> {
           />
         </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"
@@ -108,7 +124,7 @@ class AlertaConfig extends PureComponent<Props, State> {
           </button>
           <button
             className="btn btn-primary"
-            disabled={!this.state.testEnabled}
+            disabled={!this.state.testEnabled || !enabled}
             onClick={this.props.onTest}
           >
             <span className="icon pulse-c" />
@@ -119,6 +135,11 @@ class AlertaConfig extends PureComponent<Props, State> {
     )
   }
 
+  private handleEnabledChange = (e: ChangeEvent<HTMLInputElement>) => {
+    this.setState({enabled: e.target.checked})
+    this.disableTest()
+  }
+
   private handleSubmit = async e => {
     e.preventDefault()
 
@@ -127,6 +148,7 @@ class AlertaConfig extends PureComponent<Props, State> {
       origin: this.origin.value,
       token: this.token.value,
       url: this.url.value,
+      enabled: this.state.enabled,
     }
 
     const success = await this.props.onSave(properties)

ui/src/kapacitor/components/config/HipChatConfig.tsx

@@ -1,4 +1,5 @@
-import React, {PureComponent} from 'react'
+import _ from 'lodash'
+import React, {PureComponent, ChangeEvent} from 'react'
 
 import QuestionMarkTooltip from 'src/shared/components/QuestionMarkTooltip'
 import {HIPCHAT_TOKEN_TIP} from 'src/kapacitor/copy'
@@ -16,6 +17,7 @@ interface Config {
     room: string
     token: boolean
     url: string
+    enabled: boolean
   }
 }
 
@@ -28,6 +30,7 @@ interface Props {
 
 interface State {
   testEnabled: boolean
+  enabled: boolean
 }
 
 @ErrorHandling
@@ -40,13 +43,14 @@ class HipchatConfig extends PureComponent<Props, State> {
     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, room, token} = options
-    const {testEnabled} = this.state
+    const {testEnabled, enabled} = this.state
 
     const subdomain = url
       .replace('https://', '')
@@ -94,6 +98,18 @@ class HipchatConfig extends PureComponent<Props, State> {
           />
         </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"
@@ -105,7 +121,7 @@ class HipchatConfig extends PureComponent<Props, State> {
           </button>
           <button
             className="btn btn-primary"
-            disabled={!this.state.testEnabled}
+            disabled={!this.state.testEnabled || !enabled}
             onClick={this.props.onTest}
           >
             <span className="icon pulse-c" />
@@ -116,13 +132,19 @@ class HipchatConfig extends PureComponent<Props, State> {
     )
   }
 
+  private handleEnabledChange = (e: ChangeEvent<HTMLInputElement>) => {
+    this.setState({enabled: e.target.checked})
+    this.disableTest()
+  }
+
   private handleSubmit = async e => {
     e.preventDefault()
 
     const properties = {
       room: this.room.value,
       url: `https://${this.url.value}.hipchat.com/v2/room`,
       token: this.token.value,
+      enabled: this.state.enabled,
     }
 
     const success = await this.props.onSave(properties)

ui/src/kapacitor/components/config/OpsGenieConfig.tsx

@@ -1,4 +1,5 @@
-import React, {PureComponent} from 'react'
+import _ from 'lodash'
+import React, {PureComponent, ChangeEvent} from 'react'
 
 import RedactedInput from 'src/kapacitor/components/config/RedactedInput'
 import TagInput from 'src/shared/components/TagInput'
@@ -15,6 +16,7 @@ interface Config {
     'api-key': boolean
     teams: string[]
     recipients: string[]
+    enabled: boolean
   }
 }
 
@@ -33,6 +35,7 @@ interface State {
   currentTeams: string[]
   currentRecipients: string[]
   testEnabled: boolean
+  enabled: boolean
 }
 
 @ErrorHandling
@@ -48,13 +51,14 @@ class OpsGenieConfig extends PureComponent<Props, State> {
       currentTeams: teams || [],
       currentRecipients: recipients || [],
       testEnabled: this.props.enabled,
+      enabled: _.get(this.props, 'config.options.enabled', false),
     }
   }
 
   public render() {
     const {options} = this.props.config
     const apiKey = options['api-key']
-    const {testEnabled} = this.state
+    const {testEnabled, enabled} = this.state
 
     return (
       <form onSubmit={this.handleSubmit}>
@@ -84,6 +88,18 @@ class OpsGenieConfig extends PureComponent<Props, State> {
           disableTest={this.disableTest}
         />
 
+        <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"
@@ -95,7 +111,7 @@ class OpsGenieConfig extends PureComponent<Props, State> {
           </button>
           <button
             className="btn btn-primary"
-            disabled={!this.state.testEnabled}
+            disabled={!this.state.testEnabled || !enabled}
             onClick={this.props.onTest}
           >
             <span className="icon pulse-c" />
@@ -106,6 +122,11 @@ class OpsGenieConfig extends PureComponent<Props, State> {
     )
   }
 
+  private handleEnabledChange = (e: ChangeEvent<HTMLInputElement>) => {
+    this.setState({enabled: e.target.checked})
+    this.disableTest()
+  }
+
   private get currentTeamsForTags(): Item[] {
     const {currentTeams} = this.state
     return currentTeams.map(team => ({name: team}))
@@ -123,6 +144,7 @@ class OpsGenieConfig extends PureComponent<Props, State> {
       'api-key': this.apiKey.value,
       teams: this.state.currentTeams,
       recipients: this.state.currentRecipients,
+      enabled: this.state.enabled,
     }
 
     const success = await this.props.onSave(properties)

ui/src/kapacitor/components/config/PagerDutyConfig.tsx

@@ -1,4 +1,5 @@
-import React, {PureComponent} from 'react'
+import _ from 'lodash'
+import React, {PureComponent, ChangeEvent} from 'react'
 import RedactedInput from 'src/kapacitor/components/config/RedactedInput'
 import {ErrorHandling} from 'src/shared/decorators/errors'
 
@@ -11,6 +12,7 @@ interface Config {
   options: {
     'service-key': boolean
     url: string
+    enabled: boolean
   }
 }
 
@@ -23,6 +25,7 @@ interface Props {
 
 interface State {
   testEnabled: boolean
+  enabled: boolean
 }
 
 @ErrorHandling
@@ -34,14 +37,15 @@ class PagerDutyConfig extends PureComponent<Props, State> {
     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 serviceKey = options['service-key']
-    const {testEnabled} = this.state
+    const {testEnabled, enabled} = this.state
 
     return (
       <form onSubmit={this.handleSubmit}>
@@ -68,6 +72,18 @@ class PagerDutyConfig extends PureComponent<Props, State> {
           />
         </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"
@@ -79,7 +95,7 @@ class PagerDutyConfig extends PureComponent<Props, State> {
           </button>
           <button
             className="btn btn-primary"
-            disabled={!this.state.testEnabled}
+            disabled={!this.state.testEnabled || !enabled}
             onClick={this.props.onTest}
           >
             <span className="icon pulse-c" />
@@ -92,12 +108,18 @@ class PagerDutyConfig extends PureComponent<Props, State> {
 
   private handleServiceKeyRef = r => (this.serviceKey = r)
 
+  private handleEnabledChange = (e: ChangeEvent<HTMLInputElement>) => {
+    this.setState({enabled: e.target.checked})
+    this.disableTest()
+  }
+
   private handleSubmit = async e => {
     e.preventDefault()
 
     const properties = {
       'service-key': this.serviceKey.value,
       url: this.url.value,
+      enabled: this.state.enabled,
     }
 
     const success = await this.props.onSave(properties)