Add Alerta and VictorOps kapacitor configs to UI
Andrew Watkins
parent
65babedac2
commit
ec0ba3ba8c
|
|
@ -3,6 +3,8 @@ import _ from 'lodash';
|
|||
import {getKapacitorConfig, updateKapacitorConfigSection, testAlertOutput} from 'shared/apis';
|
||||
import SlackConfig from './SlackConfig';
|
||||
import SMTPConfig from './SMTPConfig';
|
||||
import VictoropsConfig from './VictoropsConfig';
|
||||
import AlertaConfig from './AlertaConfig';
|
||||
|
||||
const AlertOutputs = React.createClass({
|
||||
propTypes: {
|
||||
|
|
@ -19,9 +21,10 @@ const AlertOutputs = React.createClass({
|
|||
|
||||
getInitialState() {
|
||||
return {
|
||||
selectedEndpoint: 'smtp',
|
||||
selectedEndpoint: 'alerta',
|
||||
smtpConfig: null,
|
||||
slackConfig: null,
|
||||
alertaConfig: null,
|
||||
};
|
||||
},
|
||||
|
||||
|
|
@ -32,8 +35,10 @@ 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),
|
||||
});
|
||||
});
|
||||
},
|
||||
|
|
@ -79,8 +84,10 @@ const AlertOutputs = React.createClass({
|
|||
<div className="form-group col-xs-7 col-sm-5 col-sm-offset-2">
|
||||
<label htmlFor="alert-endpoint" className="sr-only">Alert Enpoint</label>
|
||||
<select className="form-control" id="source" onChange={this.changeSelectedEndpoint}>
|
||||
<option key="smtp" value="smtp">SMTP</option>;
|
||||
<option key="slack" value="slack">Slack</option>;
|
||||
<option value="alerta">Alerta</option>
|
||||
<option value="slack">Slack</option>
|
||||
<option value="smtp">SMTP</option>
|
||||
<option value="victorops">VictorOps</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -96,13 +103,22 @@ const AlertOutputs = React.createClass({
|
|||
this.handleSaveConfig(endpoint, properties);
|
||||
};
|
||||
|
||||
if (endpoint === 'alerta' && this.state.alertaConfig) {
|
||||
return <AlertaConfig onSave={save} config={this.state.alertaConfig} />;
|
||||
}
|
||||
|
||||
if (endpoint === 'smtp' && this.state.smtpConfig) {
|
||||
return <SMTPConfig onSave={save} config={this.state.smtpConfig} />;
|
||||
}
|
||||
|
||||
if (endpoint === 'slack' && this.state.slackConfig) {
|
||||
return <SlackConfig onSave={save} onTest={this.testSlack} config={this.state.slackConfig} />;
|
||||
}
|
||||
|
||||
if (endpoint === 'victorops' && this.state.victoropsConfig) {
|
||||
return <VictoropsConfig onSave={save} config={this.state.victoropsConfig} />;
|
||||
}
|
||||
|
||||
return <div>This endpoint is not supported yet!</div>;
|
||||
},
|
||||
});
|
||||
|
|
|
|||
|
|
@ -0,0 +1,78 @@
|
|||
import React, {PropTypes} from 'react';
|
||||
|
||||
const AlertaConfig = React.createClass({
|
||||
propTypes: {
|
||||
config: PropTypes.shape({
|
||||
options: PropTypes.shape({
|
||||
environment: PropTypes.string,
|
||||
origin: PropTypes.string,
|
||||
token: PropTypes.bool,
|
||||
url: PropTypes.string,
|
||||
}).isRequired,
|
||||
}).isRequired,
|
||||
onSave: PropTypes.func.isRequired,
|
||||
},
|
||||
|
||||
handleSaveAlert(e) {
|
||||
e.preventDefault();
|
||||
|
||||
const properties = {
|
||||
environment: this.port.value,
|
||||
origin: this.from.value,
|
||||
token: this.username.value,
|
||||
url: this.password.value,
|
||||
};
|
||||
|
||||
this.props.onSave(properties);
|
||||
},
|
||||
|
||||
render() {
|
||||
const {environment, origin, token, url} = this.props.config.options;
|
||||
|
||||
return (
|
||||
<div className="panel-body">
|
||||
<h4 className="text-center">Alerta alerts</h4>
|
||||
<br/>
|
||||
<form onSubmit={this.handleSaveAlert}>
|
||||
<div className="row">
|
||||
<div className="col-xs-7 col-sm-8 col-sm-offset-2">
|
||||
<p>
|
||||
Have alerts sent to Alerta
|
||||
</p>
|
||||
|
||||
<div className="form-group">
|
||||
<label htmlFor="environment">Environment</label>
|
||||
<input className="form-control" id="environment" type="text" ref={(r) => this.environment = r} defaultValue={environment || ''}></input>
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label htmlFor="origin">Origin</label>
|
||||
<input className="form-control" id="origin" type="text" ref={(r) => this.origin = r} defaultValue={origin || ''}></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 Alerta Token has been set</span>
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label htmlFor="url">User</label>
|
||||
<input className="form-control" id="url" type="text" ref={(r) => this.url = r} defaultValue={url || ''}></input>
|
||||
</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 AlertaConfig;
|
||||
|
|
@ -51,8 +51,8 @@ const SlackConfig = React.createClass({
|
|||
|
||||
<div className="form-group">
|
||||
<label htmlFor="slack-url">Slack Webhook URL (<a href="https://api.slack.com/incoming-webhooks" target="_">see more on Slack webhooks</a>)</label>
|
||||
<input className="form-control" id="slack-url" type="text" ref={(r) => this.url = r} defaultValue={`${url}`}></input>
|
||||
<span>Note: a value of <code>true</code> or <code>false</code> indicates whether or not a slack channel has been set</span>
|
||||
<input className="form-control" id="slack-url" type="text" ref={(r) => this.url = r} defaultValue={url || ''}></input>
|
||||
<span>Note: a value of <code>true</code> indicates that the Slack channel has been set</span>
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
|
|
|
|||
|
|
@ -0,0 +1,81 @@
|
|||
import React, {PropTypes} from 'react';
|
||||
|
||||
const VictoropsConfig = React.createClass({
|
||||
propTypes: {
|
||||
config: PropTypes.shape({
|
||||
options: PropTypes.shape({
|
||||
'api-key': PropTypes.bool,
|
||||
'routing-key': PropTypes.string,
|
||||
global: PropTypes.bool,
|
||||
url: PropTypes.string,
|
||||
}).isRequired,
|
||||
}).isRequired,
|
||||
onSave: PropTypes.func.isRequired,
|
||||
},
|
||||
|
||||
handleSaveAlert(e) {
|
||||
e.preventDefault();
|
||||
|
||||
const properties = {
|
||||
'api-key': this.apiKey.value,
|
||||
'routing-key': this.routingKey.value,
|
||||
url: this.url.value,
|
||||
global: this.global.checked,
|
||||
};
|
||||
|
||||
this.props.onSave(properties);
|
||||
},
|
||||
|
||||
render() {
|
||||
const {options} = this.props.config;
|
||||
const apiKey = options['api-key'];
|
||||
const routingKey = options['routing-key'];
|
||||
const {url, global} = options;
|
||||
|
||||
return (
|
||||
<div className="panel-body">
|
||||
<h4 className="text-center">SMTP Alert</h4>
|
||||
<br/>
|
||||
<form onSubmit={this.handleSaveAlert}>
|
||||
<div className="row">
|
||||
<div className="col-xs-7 col-sm-8 col-sm-offset-2">
|
||||
<p>
|
||||
Have alerts sent to VictorOps
|
||||
</p>
|
||||
|
||||
<div className="form-group">
|
||||
<label htmlFor="api-key">API Key</label>
|
||||
<input className="form-control" id="api-key" type="text" ref={(r) => this.apiKey = r} defaultValue={apiKey || ''}></input>
|
||||
<span>Note: a value of <code>true</code> indicates the VictorOps API key has been set</span>
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label htmlFor="routing-key">Routing Key</label>
|
||||
<input className="form-control" id="routing-key" type="text" ref={(r) => this.routingKey = r} defaultValue={routingKey || ''}></input>
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label htmlFor="url">VictorOps URL</label>
|
||||
<input className="form-control" id="url" type="text" ref={(r) => this.url = r} defaultValue={url || ''}></input>
|
||||
</div>
|
||||
|
||||
<div className="form-group u-flex">
|
||||
<input className="u-flex" id="global" type="checkbox" ref={(r) => this.global = r} defaultChecked={global}/>
|
||||
<label htmlFor="global">This should be showing up next to the shit</label>
|
||||
</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 VictoropsConfig;
|
||||
Loading…
Reference in New Issue