From 6aa5735171aeecb9abac784ed89226d6e1c04fa1 Mon Sep 17 00:00:00 2001 From: Andrew Watkins Date: Thu, 27 Oct 2016 13:57:44 -0700 Subject: [PATCH 1/5] Move get into helper function --- ui/src/kapacitor/components/AlertOutputs.js | 18 ++++++++++++------ 1 file changed, 12 insertions(+), 6 deletions(-) diff --git a/ui/src/kapacitor/components/AlertOutputs.js b/ui/src/kapacitor/components/AlertOutputs.js index 06afbc31b6..e5b9a6acab 100644 --- a/ui/src/kapacitor/components/AlertOutputs.js +++ b/ui/src/kapacitor/components/AlertOutputs.js @@ -1,10 +1,10 @@ import React, {PropTypes} from 'react'; import _ from 'lodash'; import {getKapacitorConfig, updateKapacitorConfigSection, testAlertOutput} from 'shared/apis'; +import AlertaConfig from './AlertaConfig'; import SlackConfig from './SlackConfig'; import SMTPConfig from './SMTPConfig'; import VictoropsConfig from './VictoropsConfig'; -import AlertaConfig from './AlertaConfig'; const AlertOutputs = React.createClass({ propTypes: { @@ -22,9 +22,10 @@ const AlertOutputs = React.createClass({ getInitialState() { return { selectedEndpoint: 'alerta', + alertaConfig: null, smtpConfig: null, slackConfig: null, - alertaConfig: null, + telegram: null, }; }, @@ -35,10 +36,11 @@ const AlertOutputs = React.createClass({ refreshKapacitorConfig() { getKapacitorConfig(this.props.kapacitor).then(({data: {sections}}) => { this.setState({ - alertaConfig: _.get(sections, ['alerta', 'elements', '0'], null), - slackConfig: _.get(sections, ['slack', 'elements', '0'], null), - smtpConfig: _.get(sections, ['smtp', 'elements', '0'], null), - victoropsConfig: _.get(sections, ['victorops', 'elements', '0'], null), + alertaConfig: this.getSection(sections, 'alerta'), + slackConfig: this.getSection(sections, 'slack'), + smtpConfig: this.getSection(sections, 'smtp'), + telegram: this.getSection(sections, 'telegram'), + victoropsConfig: this.getSection(sections, 'victorops'), }); }); }, @@ -98,6 +100,10 @@ const AlertOutputs = React.createClass({ ); }, + getSection(sections, section) { + return _.get(sections, [section, 'elements', '0'], null); + }, + renderAlertConfig(endpoint) { const save = (properties) => { this.handleSaveConfig(endpoint, properties); From 972debac8b2e64bc49d7190183ce873dd66f6543 Mon Sep 17 00:00:00 2001 From: Andrew Watkins Date: Thu, 27 Oct 2016 14:40:51 -0700 Subject: [PATCH 2/5] Add Telegram configuration --- ui/src/kapacitor/components/AlertOutputs.js | 16 ++- ui/src/kapacitor/components/TelegramConfig.js | 133 ++++++++++++++++++ 2 files changed, 144 insertions(+), 5 deletions(-) create mode 100644 ui/src/kapacitor/components/TelegramConfig.js diff --git a/ui/src/kapacitor/components/AlertOutputs.js b/ui/src/kapacitor/components/AlertOutputs.js index e5b9a6acab..00dc83eea1 100644 --- a/ui/src/kapacitor/components/AlertOutputs.js +++ b/ui/src/kapacitor/components/AlertOutputs.js @@ -4,6 +4,7 @@ import {getKapacitorConfig, updateKapacitorConfigSection, testAlertOutput} from import AlertaConfig from './AlertaConfig'; import SlackConfig from './SlackConfig'; import SMTPConfig from './SMTPConfig'; +import TelegramConfig from './TelegramConfig'; import VictoropsConfig from './VictoropsConfig'; const AlertOutputs = React.createClass({ @@ -39,12 +40,16 @@ const AlertOutputs = React.createClass({ alertaConfig: this.getSection(sections, 'alerta'), slackConfig: this.getSection(sections, 'slack'), smtpConfig: this.getSection(sections, 'smtp'), - telegram: this.getSection(sections, 'telegram'), + telegramConfig: this.getSection(sections, 'telegram'), victoropsConfig: this.getSection(sections, 'victorops'), }); }); }, + getSection(sections, section) { + return _.get(sections, [section, 'elements', '0'], null); + }, + handleSaveConfig(section, properties) { if (section !== '') { updateKapacitorConfigSection(this.props.kapacitor, section, Object.assign({}, properties, {enabled: true})).then(() => { @@ -90,6 +95,7 @@ const AlertOutputs = React.createClass({ + @@ -100,10 +106,6 @@ const AlertOutputs = React.createClass({ ); }, - getSection(sections, section) { - return _.get(sections, [section, 'elements', '0'], null); - }, - renderAlertConfig(endpoint) { const save = (properties) => { this.handleSaveConfig(endpoint, properties); @@ -125,6 +127,10 @@ const AlertOutputs = React.createClass({ return ; } + if (endpoint === 'telegram' && this.state.telegramConfig) { + return ; + } + return
This endpoint is not supported yet!
; }, }); diff --git a/ui/src/kapacitor/components/TelegramConfig.js b/ui/src/kapacitor/components/TelegramConfig.js new file mode 100644 index 0000000000..1f72d18b0f --- /dev/null +++ b/ui/src/kapacitor/components/TelegramConfig.js @@ -0,0 +1,133 @@ +import React, {PropTypes} from 'react'; + +const TelegramConfig = React.createClass({ + propTypes: { + config: PropTypes.shape({ + options: PropTypes.shape({ + 'chat-id': PropTypes.string.isRequired, + 'disable-notification': PropTypes.bool.isRequired, + 'disable-web-page-preview': PropTypes.bool.isRequired, + global: PropTypes.bool.isRequired, + 'parse-mode': PropTypes.string.isRequired, + 'state-changes-only': PropTypes.bool.isRequired, + token: PropTypes.bool.isRequired, + url: PropTypes.string.isRequired, + }).isRequired, + }).isRequired, + onSave: PropTypes.func.isRequired, + }, + + handleSaveAlert(e) { + e.preventDefault(); + + const properties = { + chatID: this.chatID.value, + disableNotification: this.disableNotification.checked, + disableWebPagePreview: this.disableWebPagePreview.checked, + global: this.global.checked, + parseMode: this.parseMode.checked, + stateChangesOnly: this.stateChangesOnly.checked, + token: this.token.value, + url: this.url.value, + }; + + this.props.onSave(properties); + }, + + render() { + const {options} = this.props.config; + const {global, url, token} = options; + const chatID = options['chat-id']; + const disableNotification = options['chat-id']; + const disableWebPagePreview = options['disable-web-page-preview']; + const parseMode = options['parse-mode']; + const stateChangesOnly = options['state-changes-only']; + + return ( +
+

Telegram Alert

+
+
+
+
+

+ You can have alerts sent to Telegram by entering info below. +

+ +
+ + this.url = r} defaultValue={url || ''}> +
+ +
+ + this.token = r} defaultValue={token || ''}> + Note: a value of true indicates the Telegram token has been set +
+ +
+ + this.chatID = r} defaultValue={chatID || ''}> +
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+ +
+
+
+
+ ); + }, +}); + +export default TelegramConfig; From f957d7df52d19374538d0e03af9dccff7b9b9dc1 Mon Sep 17 00:00:00 2001 From: Andrew Watkins Date: Thu, 27 Oct 2016 15:50:40 -0700 Subject: [PATCH 3/5] Add PagerdutyConfig --- ui/src/kapacitor/components/AlertOutputs.js | 7 ++ .../kapacitor/components/PagerdutyConfig.js | 78 +++++++++++++++++++ 2 files changed, 85 insertions(+) create mode 100644 ui/src/kapacitor/components/PagerdutyConfig.js diff --git a/ui/src/kapacitor/components/AlertOutputs.js b/ui/src/kapacitor/components/AlertOutputs.js index 00dc83eea1..869c2ffd80 100644 --- a/ui/src/kapacitor/components/AlertOutputs.js +++ b/ui/src/kapacitor/components/AlertOutputs.js @@ -2,6 +2,7 @@ import React, {PropTypes} from 'react'; import _ from 'lodash'; import {getKapacitorConfig, updateKapacitorConfigSection, testAlertOutput} from 'shared/apis'; import AlertaConfig from './AlertaConfig'; +import PagerdutyConfig from './PagerdutyConfig'; import SlackConfig from './SlackConfig'; import SMTPConfig from './SMTPConfig'; import TelegramConfig from './TelegramConfig'; @@ -38,6 +39,7 @@ const AlertOutputs = React.createClass({ getKapacitorConfig(this.props.kapacitor).then(({data: {sections}}) => { this.setState({ alertaConfig: this.getSection(sections, 'alerta'), + pagerdutyConfig: this.getSection(sections, 'pagerduty'), slackConfig: this.getSection(sections, 'slack'), smtpConfig: this.getSection(sections, 'smtp'), telegramConfig: this.getSection(sections, 'telegram'), @@ -96,6 +98,7 @@ const AlertOutputs = React.createClass({ + @@ -131,6 +134,10 @@ const AlertOutputs = React.createClass({ return ; } + if (endpoint === 'pagerduty' && this.state.pagerdutyConfig) { + return ; + } + return
This endpoint is not supported yet!
; }, }); diff --git a/ui/src/kapacitor/components/PagerdutyConfig.js b/ui/src/kapacitor/components/PagerdutyConfig.js new file mode 100644 index 0000000000..1ee39cbc5a --- /dev/null +++ b/ui/src/kapacitor/components/PagerdutyConfig.js @@ -0,0 +1,78 @@ +import React, {PropTypes} from 'react'; + +const PagerdutyConfig = React.createClass({ + propTypes: { + config: PropTypes.shape({ + options: PropTypes.shape({ + global: PropTypes.bool.isRequired, + 'service-key': PropTypes.bool.isRequired, + url: PropTypes.string.isRequired, + }).isRequired, + }).isRequired, + onSave: PropTypes.func.isRequired, + }, + + handleSaveAlert(e) { + e.preventDefault(); + + const properties = { + global: this.global.checked, + serviceKey: this.serviceKey.value, + url: this.url.value, + }; + + this.props.onSave(properties); + }, + + render() { + const {options} = this.props.config; + const {global, url} = options; + const serviceKey = options['service-key']; + + return ( +
+

PagerDuty Alert

+
+
+
+
+

+ You can have alerts sent to PagerDuty by entering info below. +

+ +
+ + this.serviceKey = r} defaultValue={serviceKey || ''}> + Note: a value of true indicates the PagerDuty service key has been set +
+ +
+ + this.url = r} defaultValue={url || ''}> +
+ +
+
+ +
+
+ +
+
+ +
+
+
+ +
+
+
+
+ ); + }, +}); + +export default PagerdutyConfig; From 2e26ee3e758f48ffa51e44534dbc1dbe3af2aed5 Mon Sep 17 00:00:00 2001 From: Andrew Watkins Date: Mon, 31 Oct 2016 11:03:45 -0700 Subject: [PATCH 4/5] Add HipChat config --- ui/src/kapacitor/components/AlertOutputs.js | 14 ++- ui/src/kapacitor/components/HipchatConfig.js | 95 ++++++++++++++++++++ 2 files changed, 106 insertions(+), 3 deletions(-) create mode 100644 ui/src/kapacitor/components/HipchatConfig.js diff --git a/ui/src/kapacitor/components/AlertOutputs.js b/ui/src/kapacitor/components/AlertOutputs.js index 869c2ffd80..f63c054bd1 100644 --- a/ui/src/kapacitor/components/AlertOutputs.js +++ b/ui/src/kapacitor/components/AlertOutputs.js @@ -2,6 +2,7 @@ import React, {PropTypes} from 'react'; import _ from 'lodash'; import {getKapacitorConfig, updateKapacitorConfigSection, testAlertOutput} from 'shared/apis'; import AlertaConfig from './AlertaConfig'; +import HipchatConfig from './HipchatConfig'; import PagerdutyConfig from './PagerdutyConfig'; import SlackConfig from './SlackConfig'; import SMTPConfig from './SMTPConfig'; @@ -27,7 +28,8 @@ const AlertOutputs = React.createClass({ alertaConfig: null, smtpConfig: null, slackConfig: null, - telegram: null, + telegramConfig: null, + hipchatConfig: null, }; }, @@ -39,6 +41,7 @@ const AlertOutputs = React.createClass({ getKapacitorConfig(this.props.kapacitor).then(({data: {sections}}) => { this.setState({ alertaConfig: this.getSection(sections, 'alerta'), + hipchatConfig: this.getSection(sections, 'hipchat'), pagerdutyConfig: this.getSection(sections, 'pagerduty'), slackConfig: this.getSection(sections, 'slack'), smtpConfig: this.getSection(sections, 'smtp'), @@ -94,11 +97,12 @@ const AlertOutputs = React.createClass({ @@ -138,6 +142,10 @@ const AlertOutputs = React.createClass({ return ; } + if (endpoint === 'hipchat' && this.state.pagerdutyConfig) { + return ; + } + return
This endpoint is not supported yet!
; }, }); diff --git a/ui/src/kapacitor/components/HipchatConfig.js b/ui/src/kapacitor/components/HipchatConfig.js new file mode 100644 index 0000000000..4fce7e23ce --- /dev/null +++ b/ui/src/kapacitor/components/HipchatConfig.js @@ -0,0 +1,95 @@ +import React, {PropTypes} from 'react'; + +const HipchatConfig = React.createClass({ + propTypes: { + config: PropTypes.shape({ + options: PropTypes.shape({ + global: PropTypes.bool.isRequired, + room: PropTypes.string.isRequired, + 'state-changes-only': PropTypes.bool.isRequired, + token: PropTypes.bool.isRequired, + url: PropTypes.string.isRequired, + }).isRequired, + }).isRequired, + onSave: PropTypes.func.isRequired, + }, + + handleSaveAlert(e) { + e.preventDefault(); + + const properties = { + room: this.room.value, + url: this.url.value, + token: this.token.value, + 'state-changes-only': this.stateChangesOnly.checked, + global: this.global.checked, + }; + + this.props.onSave(properties); + }, + + render() { + const {options} = this.props.config; + const stateChangesOnly = options['state-changes-only']; + const {url, global, room, token} = options; + + return ( +
+

VictorOps Alert

+
+
+
+
+

+ Have alerts sent to HipChat +

+ +
+ + this.url = r} defaultValue={url || ''}> +
+ +
+ + this.room = r} defaultValue={room || ''}> +
+ +
+ + this.token = r} defaultValue={token || ''}> + Note: a value of true indicates the HipChat token has been set +
+ +
+
+ +
+
+ +
+
+ +
+
+
+
+ +
+
+
+ +
+
+
+
+ ); + }, +}); + +export default HipchatConfig; From 177d394e761ce7a6ac1ee295dd653f0d98495b51 Mon Sep 17 00:00:00 2001 From: Andrew Watkins Date: Mon, 31 Oct 2016 11:11:34 -0700 Subject: [PATCH 5/5] Add Sensu config --- ui/src/kapacitor/components/AlertOutputs.js | 12 +++- ui/src/kapacitor/components/SensuConfig.js | 63 +++++++++++++++++++++ 2 files changed, 73 insertions(+), 2 deletions(-) create mode 100644 ui/src/kapacitor/components/SensuConfig.js diff --git a/ui/src/kapacitor/components/AlertOutputs.js b/ui/src/kapacitor/components/AlertOutputs.js index f63c054bd1..c10b95ae8c 100644 --- a/ui/src/kapacitor/components/AlertOutputs.js +++ b/ui/src/kapacitor/components/AlertOutputs.js @@ -4,6 +4,7 @@ import {getKapacitorConfig, updateKapacitorConfigSection, testAlertOutput} from import AlertaConfig from './AlertaConfig'; import HipchatConfig from './HipchatConfig'; import PagerdutyConfig from './PagerdutyConfig'; +import SensuConfig from './SensuConfig'; import SlackConfig from './SlackConfig'; import SMTPConfig from './SMTPConfig'; import TelegramConfig from './TelegramConfig'; @@ -30,6 +31,7 @@ const AlertOutputs = React.createClass({ slackConfig: null, telegramConfig: null, hipchatConfig: null, + sensuConfig: null, }; }, @@ -47,6 +49,7 @@ const AlertOutputs = React.createClass({ smtpConfig: this.getSection(sections, 'smtp'), telegramConfig: this.getSection(sections, 'telegram'), victoropsConfig: this.getSection(sections, 'victorops'), + sensuConfig: this.getSection(sections, 'sensu'), }); }); }, @@ -99,6 +102,7 @@ const AlertOutputs = React.createClass({ + @@ -142,11 +146,15 @@ const AlertOutputs = React.createClass({ return ; } - if (endpoint === 'hipchat' && this.state.pagerdutyConfig) { + if (endpoint === 'hipchat' && this.state.hipchatConfig) { return ; } - return
This endpoint is not supported yet!
; + if (endpoint === 'sensu' && this.state.sensuConfig) { + return ; + } + + return
; }, }); diff --git a/ui/src/kapacitor/components/SensuConfig.js b/ui/src/kapacitor/components/SensuConfig.js new file mode 100644 index 0000000000..e637d8d0fa --- /dev/null +++ b/ui/src/kapacitor/components/SensuConfig.js @@ -0,0 +1,63 @@ +import React, {PropTypes} from 'react'; + +const SensuConfig = React.createClass({ + propTypes: { + config: PropTypes.shape({ + options: PropTypes.shape({ + source: PropTypes.string.isRequired, + addr: PropTypes.string.isRequired, + }).isRequired, + }).isRequired, + onSave: PropTypes.func.isRequired, + }, + + handleSaveAlert(e) { + e.preventDefault(); + + const properties = { + source: this.source.value, + addr: this.addr.value, + }; + + this.props.onSave(properties); + }, + + render() { + const {source, addr} = this.props.config.options; + + return ( +
+

Alerta Alert

+
+
+
+
+

+ Have alerts sent to Sensu +

+ +
+ + this.source = r} defaultValue={source || ''}> +
+ +
+ + this.addr = r} defaultValue={addr || ''}> +
+
+
+ +
+
+
+ +
+
+
+
+ ); + }, +}); + +export default SensuConfig;