diff --git a/ui/src/kapacitor/components/config/TeamsConfig.tsx b/ui/src/kapacitor/components/config/TeamsConfig.tsx new file mode 100644 index 000000000..305c30280 --- /dev/null +++ b/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 diff --git a/ui/src/kapacitor/components/config/index.js b/ui/src/kapacitor/components/config/index.js index e88ca6278..f551c0b37 100644 --- a/ui/src/kapacitor/components/config/index.js +++ b/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, }