feat(ui): add teams config page

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

@@ -0,0 +1,112 @@
+import _ from 'lodash'
+import React, {PureComponent, ChangeEvent} from 'react'
+import {ErrorHandling} from 'src/shared/decorators/errors'
+import {TeamsProperties} from 'src/types/kapacitor'
+
+interface Config {
+  options: {
+    'channel-url': string
+  }
+}
+
+interface Props {
+  config: Config
+  onSave: (properties: TeamsProperties) => Promise<boolean>
+  onTest: (event: React.MouseEvent<HTMLButtonElement>) => void
+  enabled: boolean
+}
+
+interface State {
+  testEnabled: boolean
+  enabled: boolean
+}
+
+@ErrorHandling
+class TeamsConfig extends PureComponent<Props, State> {
+  private channelURL: HTMLInputElement
+
+  constructor(props) {
+    super(props)
+    this.state = {
+      testEnabled: this.props.enabled,
+      enabled: _.get(this.props, 'config.options.enabled', false),
+    }
+  }
+
+  public render() {
+    const {'channel-url': channelURL} = this.props.config.options
+    const {enabled} = this.state
+
+    return (
+      <form onSubmit={this.handleSubmit}>
+        <div className="form-group col-xs-12">
+          <label htmlFor="source">Channel URL</label>
+          <input
+            className="form-control"
+            id="url"
+            type="text"
+            ref={r => (this.channelURL = r)}
+            defaultValue={channelURL || ''}
+            onChange={this.disableTest}
+          />
+        </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"
+            type="submit"
+            disabled={this.state.testEnabled}
+          >
+            <span className="icon checkmark" />
+            Save Changes
+          </button>
+          <button
+            className="btn btn-primary"
+            disabled={!this.state.testEnabled || !enabled}
+            onClick={this.props.onTest}
+          >
+            <span className="icon pulse-c" />
+            Send Test Event
+          </button>
+        </div>
+      </form>
+    )
+  }
+
+  private handleEnabledChange = (e: ChangeEvent<HTMLInputElement>) => {
+    this.setState({enabled: e.target.checked})
+    this.disableTest()
+  }
+
+  private handleSubmit = async e => {
+    e.preventDefault()
+
+    const properties: TeamsProperties = {
+      'channel-url': this.channelURL.value,
+      enabled: this.state.enabled,
+    }
+
+    const success = await this.props.onSave(properties)
+    if (success) {
+      this.setState({testEnabled: true})
+    }
+  }
+
+  private disableTest = () => {
+    this.setState({testEnabled: false})
+  }
+}
+
+export default TeamsConfig

ui/src/kapacitor/components/config/index.js

@@ -14,6 +14,7 @@ import SlackConfigs from './SlackConfigs'
 import KafkaConfigs from './KafkaConfigs'
 import ServiceNowConfig from './ServiceNowConfig'
 import BigPandaConfig from './BigPandaConfig'
+import TeamsConfig from './TeamsConfig'
 
 export {
   AlertaConfig,
@@ -32,4 +33,5 @@ export {
   KafkaConfigs,
   ServiceNowConfig,
   BigPandaConfig,
+  TeamsConfig,
 }