Influxdata
/
influxdb
mirror of https://github.com/influxdata/influxdb.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Add Telegram configuration

pull/10616/head
Andrew Watkins 2016-10-27 14:40:51 -07:00
parent 6aa5735171
commit 972debac8b
2 changed files with 144 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
ui/src/kapacitor/components/AlertOutputs.js
View File

@ -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({
<option value="slack">Slack</option>
<option value="smtp">SMTP</option>
<option value="victorops">VictorOps</option>
<option value="telegram">Telegram</option>
</select>
</div>
</div>
@ -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 <VictoropsConfig onSave={save} config={this.state.victoropsConfig} />;
}
if (endpoint === 'telegram' && this.state.telegramConfig) {
return <TelegramConfig onSave={save} config={this.state.telegramConfig} />;
}
return <div>This endpoint is not supported yet!</div>;
},
});

133
ui/src/kapacitor/components/TelegramConfig.js Normal file
View File

@ -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 (
<div className="panel-body">
<h4 className="text-center">Telegram Alert</h4>
<br/>
<form onSubmit={this.handleSaveAlert}>
<div className="row">
<div className="col-xs-7 col-sm-8 col-sm-offset-2">
<p>
You can have alerts sent to Telegram by entering info below.
</p>
<div className="form-group">
<label htmlFor="url">Telegram URL</label>
<input className="form-control" id="url" type="text" ref={(r) => this.url = r} defaultValue={url || ''}></input>
</div>
<div className="form-group">
<label htmlFor="token">Token</label>
<input className="form-control" id="token" type="text" ref={(r) => this.token = r} defaultValue={token || ''}></input>
<span>Note: a value of <code>true</code> indicates the Telegram token has been set</span>
</div>
<div className="form-group">
<label htmlFor="chat-id">Chat ID</label>
<input className="form-control" id="chat-id" type="text" ref={(r) => this.chatID = r} defaultValue={chatID || ''}></input>
</div>
<div className="form-group col-xs-12">
<div className="checkbox">
<label>
<input type="checkbox" defaultChecked={parseMode} ref={(r) => this.parseMode = r} />
Enable Parse Mode
</label>
</div>
</div>
<div className="form-group col-xs-12">
<div className="checkbox">
<label>
<input type="checkbox" defaultChecked={disableWebPagePreview} ref={(r) => this.disableWebPagePreview = r} />
Disable Web Page Preview
</label>
</div>
</div>
<div className="form-group col-xs-12">
<div className="checkbox">
<label>
<input type="checkbox" defaultChecked={disableNotification} ref={(r) => this.disableNotification = r} />
Disable Notification
</label>
</div>
</div>
<div className="form-group col-xs-12">
<div className="checkbox">
<label>
<input type="checkbox" defaultChecked={global} ref={(r) => this.global = r} />
Send all alerts without marking them explicitly in TICKscript
</label>
</div>
</div>
<div className="form-group col-xs-12">
<div className="checkbox">
<label>
<input type="checkbox" defaultChecked={stateChangesOnly} ref={(r) => this.stateChangesOnly = r} />
Send alerts on state change only
</label>
</div>
</div>
</div>
</div>
<hr />
<div className="row">
<div className="form-group col-xs-5 col-sm-3 col-sm-offset-2">
<button className="btn btn-block btn-primary" type="submit">Save</button>
</div>
</div>
</form>
</div>
);
},
});
export default TelegramConfig;