Remove excess text from endpoint configs
Alex P
Jade McGough
parent
5a05fe9f34
commit
fdde4f3fc8
|
|
@ -30,42 +30,32 @@ const AlertaConfig = React.createClass({
|
|||
const {environment, origin, token, url} = this.props.config.options
|
||||
|
||||
return (
|
||||
<div className="panel panel-info col-xs-12">
|
||||
<div className="panel-heading u-flex u-ai-center u-jc-space-between">
|
||||
<h4 className="panel-title text-center">Alerta Alert</h4>
|
||||
<form onSubmit={this.handleSaveAlert}>
|
||||
<div className="form-group col-xs-12">
|
||||
<label htmlFor="environment">Environment</label>
|
||||
<input className="form-control" id="environment" type="text" ref={(r) => this.environment = r} defaultValue={environment || ''}></input>
|
||||
</div>
|
||||
<br/>
|
||||
<form onSubmit={this.handleSaveAlert}>
|
||||
<p className="no-user-select">
|
||||
Have alerts sent to Alerta
|
||||
</p>
|
||||
|
||||
<div className="form-group col-xs-12">
|
||||
<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 col-xs-12">
|
||||
<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 col-xs-12">
|
||||
<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 col-xs-12">
|
||||
<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 col-xs-12">
|
||||
<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 col-xs-12">
|
||||
<label htmlFor="url">User</label>
|
||||
<input className="form-control" id="url" type="text" ref={(r) => this.url = r} defaultValue={url || ''}></input>
|
||||
</div>
|
||||
|
||||
<div className="form-group col-xs-12">
|
||||
<label htmlFor="url">User</label>
|
||||
<input className="form-control" id="url" type="text" ref={(r) => this.url = r} defaultValue={url || ''}></input>
|
||||
</div>
|
||||
|
||||
<div className="form-group-submit col-xs-12 col-sm-6 col-sm-offset-3">
|
||||
<button className="btn btn-block btn-primary" type="submit">Save</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div className="form-group-submit col-xs-12 col-sm-6 col-sm-offset-3">
|
||||
<button className="btn btn-block btn-primary" type="submit">Save</button>
|
||||
</div>
|
||||
</form>
|
||||
)
|
||||
},
|
||||
})
|
||||
|
|
|
|||
|
|
@ -40,61 +40,54 @@ const HipchatConfig = React.createClass({
|
|||
const subdomain = url.replace('https://', '').replace('.hipchat.com/v2/room', '')
|
||||
|
||||
return (
|
||||
<div className="panel panel-info col-xs-12">
|
||||
<div className="panel-heading u-flex u-ai-center u-jc-space-between">
|
||||
<h4 className="panel-title text-center">HipChat Alert</h4>
|
||||
<form onSubmit={this.handleSaveAlert}>
|
||||
<div className="form-group col-xs-12">
|
||||
<label htmlFor="url">Subdomain</label>
|
||||
<input
|
||||
className="form-control"
|
||||
id="url"
|
||||
type="text"
|
||||
placeholder="your-subdomain"
|
||||
ref={(r) => this.url = r}
|
||||
defaultValue={subdomain && subdomain.length ? subdomain : ''}
|
||||
/>
|
||||
</div>
|
||||
<br/>
|
||||
<p className="no-user-select">Send alert messages to HipChat.</p>
|
||||
<form onSubmit={this.handleSaveAlert}>
|
||||
<div className="form-group col-xs-12">
|
||||
<label htmlFor="url">Subdomain</label>
|
||||
<input
|
||||
className="form-control"
|
||||
id="url"
|
||||
type="text"
|
||||
placeholder="your-subdomain"
|
||||
ref={(r) => this.url = r}
|
||||
defaultValue={subdomain && subdomain.length ? subdomain : ''}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="form-group col-xs-12">
|
||||
<label htmlFor="room">Room</label>
|
||||
<input
|
||||
className="form-control"
|
||||
id="room"
|
||||
type="text"
|
||||
placeholder="your-hipchat-room"
|
||||
ref={(r) => this.room = r}
|
||||
defaultValue={room || ''}
|
||||
/>
|
||||
</div>
|
||||
<div className="form-group col-xs-12">
|
||||
<label htmlFor="room">Room</label>
|
||||
<input
|
||||
className="form-control"
|
||||
id="room"
|
||||
type="text"
|
||||
placeholder="your-hipchat-room"
|
||||
ref={(r) => this.room = r}
|
||||
defaultValue={room || ''}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="form-group col-xs-12">
|
||||
<label htmlFor="token">
|
||||
Token
|
||||
<QuestionMarkTooltip
|
||||
tipID="token"
|
||||
tipContent={HIPCHAT_TOKEN_TIP}
|
||||
/>
|
||||
</label>
|
||||
<input
|
||||
className="form-control"
|
||||
id="token"
|
||||
type="text"
|
||||
placeholder="your-hipchat-token"
|
||||
ref={(r) => this.token = r}
|
||||
defaultValue={token || ''}
|
||||
<div className="form-group col-xs-12">
|
||||
<label htmlFor="token">
|
||||
Token
|
||||
<QuestionMarkTooltip
|
||||
tipID="token"
|
||||
tipContent={HIPCHAT_TOKEN_TIP}
|
||||
/>
|
||||
<label className="form-helper">Note: a value of <code>true</code> indicates the HipChat token has been set</label>
|
||||
</div>
|
||||
</label>
|
||||
<input
|
||||
className="form-control"
|
||||
id="token"
|
||||
type="text"
|
||||
placeholder="your-hipchat-token"
|
||||
ref={(r) => this.token = r}
|
||||
defaultValue={token || ''}
|
||||
/>
|
||||
<label className="form-helper">Note: a value of <code>true</code> indicates the HipChat token has been set</label>
|
||||
</div>
|
||||
|
||||
<div className="form-group form-group-submit col-xs-12 col-sm-6 col-sm-offset-3">
|
||||
<button className="btn btn-block btn-primary" type="submit">Save</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div className="form-group form-group-submit col-xs-12 col-sm-6 col-sm-offset-3">
|
||||
<button className="btn btn-block btn-primary" type="submit">Save</button>
|
||||
</div>
|
||||
</form>
|
||||
)
|
||||
},
|
||||
})
|
||||
|
|
|
|||
|
|
@ -64,27 +64,20 @@ const OpsGenieConfig = React.createClass({
|
|||
const {currentTeams, currentRecipients} = this.state
|
||||
|
||||
return (
|
||||
<div className="panel panel-info col-xs-12">
|
||||
<div className="panel-heading u-flex u-ai-center u-jc-space-between">
|
||||
<h4 className="panel-title text-center">OpsGenie Alert</h4>
|
||||
<form onSubmit={this.handleSaveAlert}>
|
||||
<div className="form-group col-xs-12">
|
||||
<label htmlFor="api-key">API Key</label>
|
||||
<input className="form-control" id="api-key" type="text" ref={(r) => this.apiKey = r} defaultValue={apiKey || ''}></input>
|
||||
<label className="form-helper">Note: a value of <code>true</code> indicates the OpsGenie API key has been set</label>
|
||||
</div>
|
||||
<br/>
|
||||
<p className="no-user-select">Have alerts sent to OpsGenie.</p>
|
||||
<form onSubmit={this.handleSaveAlert}>
|
||||
<div className="form-group col-xs-12">
|
||||
<label htmlFor="api-key">API Key</label>
|
||||
<input className="form-control" id="api-key" type="text" ref={(r) => this.apiKey = r} defaultValue={apiKey || ''}></input>
|
||||
<label className="form-helper">Note: a value of <code>true</code> indicates the OpsGenie API key has been set</label>
|
||||
</div>
|
||||
|
||||
<TagInput title="Teams" onAddTag={this.handleAddTeam} onDeleteTag={this.handleDeleteTeam} tags={currentTeams} />
|
||||
<TagInput title="Recipients" onAddTag={this.handleAddRecipient} onDeleteTag={this.handleDeleteRecipient} tags={currentRecipients} />
|
||||
<TagInput title="Teams" onAddTag={this.handleAddTeam} onDeleteTag={this.handleDeleteTeam} tags={currentTeams} />
|
||||
<TagInput title="Recipients" onAddTag={this.handleAddRecipient} onDeleteTag={this.handleDeleteRecipient} tags={currentRecipients} />
|
||||
|
||||
<div className="form-group form-group-submit col-xs-12 col-sm-6 col-sm-offset-3">
|
||||
<button className="btn btn-block btn-primary" type="submit">Save</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div className="form-group form-group-submit col-xs-12 col-sm-6 col-sm-offset-3">
|
||||
<button className="btn btn-block btn-primary" type="submit">Save</button>
|
||||
</div>
|
||||
</form>
|
||||
)
|
||||
},
|
||||
})
|
||||
|
|
|
|||
|
|
@ -28,29 +28,22 @@ const PagerDutyConfig = React.createClass({
|
|||
const serviceKey = options['service-key']
|
||||
|
||||
return (
|
||||
<div className="panel panel-info col-xs-12">
|
||||
<div className="panel-heading u-flex u-ai-center u-jc-space-between">
|
||||
<h4 className="panel-title text-center">PagerDuty Alert</h4>
|
||||
<form onSubmit={this.handleSaveAlert}>
|
||||
<div className="form-group col-xs-12">
|
||||
<label htmlFor="service-key">Service Key</label>
|
||||
<input className="form-control" id="service-key" type="text" ref={(r) => this.serviceKey = r} defaultValue={serviceKey || ''}></input>
|
||||
<label className="form-helper">Note: a value of <code>true</code> indicates the PagerDuty service key has been set</label>
|
||||
</div>
|
||||
<br/>
|
||||
<p className="no-user-select">You can have alerts sent to PagerDuty by entering info below.</p>
|
||||
<form onSubmit={this.handleSaveAlert}>
|
||||
<div className="form-group col-xs-12">
|
||||
<label htmlFor="service-key">Service Key</label>
|
||||
<input className="form-control" id="service-key" type="text" ref={(r) => this.serviceKey = r} defaultValue={serviceKey || ''}></input>
|
||||
<label className="form-helper">Note: a value of <code>true</code> indicates the PagerDuty service key has been set</label>
|
||||
</div>
|
||||
|
||||
<div className="form-group col-xs-12">
|
||||
<label htmlFor="url">PagerDuty URL</label>
|
||||
<input className="form-control" id="url" type="text" ref={(r) => this.url = r} defaultValue={url || ''}></input>
|
||||
</div>
|
||||
<div className="form-group col-xs-12">
|
||||
<label htmlFor="url">PagerDuty URL</label>
|
||||
<input className="form-control" id="url" type="text" ref={(r) => this.url = r} defaultValue={url || ''}></input>
|
||||
</div>
|
||||
|
||||
<div className="form-group form-group-submit col-xs-12 col-sm-6 col-sm-offset-3">
|
||||
<button className="btn btn-block btn-primary" type="submit">Save</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div className="form-group form-group-submit col-xs-12 col-sm-6 col-sm-offset-3">
|
||||
<button className="btn btn-block btn-primary" type="submit">Save</button>
|
||||
</div>
|
||||
</form>
|
||||
)
|
||||
},
|
||||
})
|
||||
|
|
|
|||
|
|
@ -32,43 +32,36 @@ const SMTPConfig = React.createClass({
|
|||
const {host, port, from, username, password} = this.props.config.options
|
||||
|
||||
return (
|
||||
<div className="panel panel-info col-xs-12">
|
||||
<div className="panel-heading u-flex u-ai-center u-jc-space-between">
|
||||
<h4 className="panel-title text-center">SMTP Alert</h4>
|
||||
<form onSubmit={this.handleSaveAlert}>
|
||||
<div className="form-group col-xs-12 col-md-6">
|
||||
<label htmlFor="smtp-host">SMTP Host</label>
|
||||
<input className="form-control" id="smtp-host" type="text" ref={(r) => this.host = r} defaultValue={host || ''}></input>
|
||||
</div>
|
||||
<br/>
|
||||
<p className="no-user-select">You can have alerts sent to an email address by setting up an SMTP endpoint.</p>
|
||||
<form onSubmit={this.handleSaveAlert}>
|
||||
<div className="form-group col-xs-12 col-md-6">
|
||||
<label htmlFor="smtp-host">SMTP Host</label>
|
||||
<input className="form-control" id="smtp-host" type="text" ref={(r) => this.host = r} defaultValue={host || ''}></input>
|
||||
</div>
|
||||
|
||||
<div className="form-group col-xs-12 col-md-6">
|
||||
<label htmlFor="smtp-port">SMTP Port</label>
|
||||
<input className="form-control" id="smtp-port" type="text" ref={(r) => this.port = r} defaultValue={port || ''}></input>
|
||||
</div>
|
||||
<div className="form-group col-xs-12 col-md-6">
|
||||
<label htmlFor="smtp-port">SMTP Port</label>
|
||||
<input className="form-control" id="smtp-port" type="text" ref={(r) => this.port = r} defaultValue={port || ''}></input>
|
||||
</div>
|
||||
|
||||
<div className="form-group col-xs-12">
|
||||
<label htmlFor="smtp-from">From Email</label>
|
||||
<input className="form-control" id="smtp-from" placeholder="email@domain.com" type="text" ref={(r) => this.from = r} defaultValue={from || ''}></input>
|
||||
</div>
|
||||
<div className="form-group col-xs-12">
|
||||
<label htmlFor="smtp-from">From Email</label>
|
||||
<input className="form-control" id="smtp-from" placeholder="email@domain.com" type="text" ref={(r) => this.from = r} defaultValue={from || ''}></input>
|
||||
</div>
|
||||
|
||||
<div className="form-group col-xs-12 col-md-6">
|
||||
<label htmlFor="smtp-user">User</label>
|
||||
<input className="form-control" id="smtp-user" type="text" ref={(r) => this.username = r} defaultValue={username || ''}></input>
|
||||
</div>
|
||||
<div className="form-group col-xs-12 col-md-6">
|
||||
<label htmlFor="smtp-user">User</label>
|
||||
<input className="form-control" id="smtp-user" type="text" ref={(r) => this.username = r} defaultValue={username || ''}></input>
|
||||
</div>
|
||||
|
||||
<div className="form-group col-xs-12 col-md-6">
|
||||
<label htmlFor="smtp-password">Password</label>
|
||||
<input className="form-control" id="smtp-password" type="password" ref={(r) => this.password = r} defaultValue={`${password}`}></input>
|
||||
</div>
|
||||
<div className="form-group col-xs-12 col-md-6">
|
||||
<label htmlFor="smtp-password">Password</label>
|
||||
<input className="form-control" id="smtp-password" type="password" ref={(r) => this.password = r} defaultValue={`${password}`}></input>
|
||||
</div>
|
||||
|
||||
<div className="form-group form-group-submit col-xs-12 col-sm-6 col-sm-offset-3">
|
||||
<button className="btn btn-block btn-primary" type="submit">Save</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div className="form-group form-group-submit col-xs-12 col-sm-6 col-sm-offset-3">
|
||||
<button className="btn btn-block btn-primary" type="submit">Save</button>
|
||||
</div>
|
||||
</form>
|
||||
)
|
||||
},
|
||||
})
|
||||
|
|
|
|||
|
|
@ -26,28 +26,21 @@ const SensuConfig = React.createClass({
|
|||
const {source, addr} = this.props.config.options
|
||||
|
||||
return (
|
||||
<div className="panel panel-info col-xs-12">
|
||||
<div className="panel-heading u-flex u-ai-center u-jc-space-between">
|
||||
<h4 className="panel-title text-center">Sensu Alert</h4>
|
||||
<form onSubmit={this.handleSaveAlert}>
|
||||
<div className="form-group col-xs-12 col-md-6">
|
||||
<label htmlFor="source">Source</label>
|
||||
<input className="form-control" id="source" type="text" ref={(r) => this.source = r} defaultValue={source || ''}></input>
|
||||
</div>
|
||||
<br/>
|
||||
<p className="no-user-select">Have alerts sent to Sensu.</p>
|
||||
<form onSubmit={this.handleSaveAlert}>
|
||||
<div className="form-group col-xs-12 col-md-6">
|
||||
<label htmlFor="source">Source</label>
|
||||
<input className="form-control" id="source" type="text" ref={(r) => this.source = r} defaultValue={source || ''}></input>
|
||||
</div>
|
||||
|
||||
<div className="form-group col-xs-12 col-md-6">
|
||||
<label htmlFor="address">Address</label>
|
||||
<input className="form-control" id="address" type="text" ref={(r) => this.addr = r} defaultValue={addr || ''}></input>
|
||||
</div>
|
||||
<div className="form-group col-xs-12 col-md-6">
|
||||
<label htmlFor="address">Address</label>
|
||||
<input className="form-control" id="address" type="text" ref={(r) => this.addr = r} defaultValue={addr || ''}></input>
|
||||
</div>
|
||||
|
||||
<div className="form-group form-group-submit col-xs-12 col-sm-6 col-sm-offset-3">
|
||||
<button className="btn btn-block btn-primary" type="submit">Save</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div className="form-group form-group-submit col-xs-12 col-sm-6 col-sm-offset-3">
|
||||
<button className="btn btn-block btn-primary" type="submit">Save</button>
|
||||
</div>
|
||||
</form>
|
||||
)
|
||||
},
|
||||
})
|
||||
|
|
|
|||
|
|
@ -47,30 +47,23 @@ const SlackConfig = React.createClass({
|
|||
const {url, channel} = this.props.config.options
|
||||
|
||||
return (
|
||||
<div className="panel panel-info col-xs-12">
|
||||
<div className="panel-heading u-flex u-ai-center u-jc-space-between">
|
||||
<h4 className="panel-title text-center">Slack Alert</h4>
|
||||
<form onSubmit={this.handleSaveAlert}>
|
||||
<div className="form-group col-xs-12">
|
||||
<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>
|
||||
<label className="form-helper">Note: a value of <code>true</code> indicates that the Slack channel has been set</label>
|
||||
</div>
|
||||
<br/>
|
||||
<p className="no-user-select">Post alerts to a Slack channel.</p>
|
||||
<form onSubmit={this.handleSaveAlert}>
|
||||
<div className="form-group col-xs-12">
|
||||
<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>
|
||||
<label className="form-helper">Note: a value of <code>true</code> indicates that the Slack channel has been set</label>
|
||||
</div>
|
||||
|
||||
<div className="form-group col-xs-12">
|
||||
<label htmlFor="slack-channel">Slack Channel (optional)</label>
|
||||
<input className="form-control" id="slack-channel" type="text" placeholder="#alerts" ref={(r) => this.channel = r} defaultValue={channel || ''}></input>
|
||||
</div>
|
||||
<div className="form-group col-xs-12">
|
||||
<label htmlFor="slack-channel">Slack Channel (optional)</label>
|
||||
<input className="form-control" id="slack-channel" type="text" placeholder="#alerts" ref={(r) => this.channel = r} defaultValue={channel || ''}></input>
|
||||
</div>
|
||||
|
||||
<div className="form-group form-group-submit col-xs-12 text-center">
|
||||
<a className="btn btn-warning" onClick={this.handleTest} disabled={!this.state.testEnabled}>Send Test Message</a>
|
||||
<button className="btn btn-primary" type="submit">Save</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div className="form-group form-group-submit col-xs-12 text-center">
|
||||
<a className="btn btn-warning" onClick={this.handleTest} disabled={!this.state.testEnabled}>Send Test Message</a>
|
||||
<button className="btn btn-primary" type="submit">Save</button>
|
||||
</div>
|
||||
</form>
|
||||
)
|
||||
},
|
||||
})
|
||||
|
|
|
|||
|
|
@ -33,29 +33,22 @@ const TalkConfig = React.createClass({
|
|||
const {url, author_name: author} = this.props.config.options
|
||||
|
||||
return (
|
||||
<div className="panel panel-info col-xs-12">
|
||||
<div className="panel-heading u-flex u-ai-center u-jc-space-between">
|
||||
<h4 className="panel-title text-center">Talk Alert</h4>
|
||||
<form onSubmit={this.handleSaveAlert}>
|
||||
<div className="form-group col-xs-12">
|
||||
<label htmlFor="url">URL</label>
|
||||
<input className="form-control" id="url" type="text" ref={(r) => this.url = r} defaultValue={url || ''}></input>
|
||||
<label className="form-helper">Note: a value of <code>true</code> indicates that the Talk URL has been set</label>
|
||||
</div>
|
||||
<br/>
|
||||
<p className="no-user-select">Have alerts sent to Talk.</p>
|
||||
<form onSubmit={this.handleSaveAlert}>
|
||||
<div className="form-group col-xs-12">
|
||||
<label htmlFor="url">URL</label>
|
||||
<input className="form-control" id="url" type="text" ref={(r) => this.url = r} defaultValue={url || ''}></input>
|
||||
<label className="form-helper">Note: a value of <code>true</code> indicates that the Talk URL has been set</label>
|
||||
</div>
|
||||
|
||||
<div className="form-group col-xs-12">
|
||||
<label htmlFor="author">Author Name</label>
|
||||
<input className="form-control" id="author" type="text" ref={(r) => this.author = r} defaultValue={author || ''}></input>
|
||||
</div>
|
||||
<div className="form-group col-xs-12">
|
||||
<label htmlFor="author">Author Name</label>
|
||||
<input className="form-control" id="author" type="text" ref={(r) => this.author = r} defaultValue={author || ''}></input>
|
||||
</div>
|
||||
|
||||
<div className="form-group form-group-submit col-xs-12 col-sm-6 col-sm-offset-3">
|
||||
<button className="btn btn-block btn-primary" type="submit">Save</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div className="form-group form-group-submit col-xs-12 col-sm-6 col-sm-offset-3">
|
||||
<button className="btn btn-block btn-primary" type="submit">Save</button>
|
||||
</div>
|
||||
</form>
|
||||
)
|
||||
},
|
||||
})
|
||||
|
|
|
|||
|
|
@ -54,89 +54,83 @@ const TelegramConfig = React.createClass({
|
|||
const parseMode = options['parse-mode']
|
||||
|
||||
return (
|
||||
<div className="panel panel-info col-xs-12">
|
||||
<div className="panel-heading u-flex u-ai-center u-jc-space-between">
|
||||
<h4 className="panel-title text-center">Telegram Alert</h4>
|
||||
</div>
|
||||
<br/>
|
||||
<form onSubmit={this.handleSaveAlert}>
|
||||
<p className="no-user-select">
|
||||
Send alert messages to a <a href="https://docs.influxdata.com/kapacitor/v1.2/guides/event-handler-setup/#telegram-bot" target="_blank">Telegram bot</a>.
|
||||
You need a <a href="https://docs.influxdata.com/kapacitor/v1.2/guides/event-handler-setup/#telegram-bot" target="_blank">Telegram Bot</a> to use this endpoint
|
||||
</p>
|
||||
<form onSubmit={this.handleSaveAlert}>
|
||||
<div className="form-group col-xs-12">
|
||||
<label htmlFor="token">
|
||||
Token
|
||||
<QuestionMarkTooltip
|
||||
tipID="token"
|
||||
tipContent={TELEGRAM_TOKEN_TIP}
|
||||
/>
|
||||
<div className="form-group col-xs-12">
|
||||
<label htmlFor="token">
|
||||
Token
|
||||
<QuestionMarkTooltip
|
||||
tipID="token"
|
||||
tipContent={TELEGRAM_TOKEN_TIP}
|
||||
/>
|
||||
</label>
|
||||
<input
|
||||
className="form-control"
|
||||
id="token"
|
||||
type="text"
|
||||
placeholder="your-telegram-token"
|
||||
ref={(r) => this.token = r}
|
||||
defaultValue={token || ''}>
|
||||
</input>
|
||||
<label className="form-helper">Note: a value of <code>true</code> indicates the Telegram token has been set</label>
|
||||
</div>
|
||||
|
||||
<div className="form-group col-xs-12">
|
||||
<label htmlFor="chat-id">
|
||||
Chat ID
|
||||
<QuestionMarkTooltip
|
||||
tipID="chat-id"
|
||||
tipContent={TELEGRAM_CHAT_ID_TIP}
|
||||
/>
|
||||
</label>
|
||||
<input
|
||||
className="form-control"
|
||||
id="chat-id"
|
||||
type="text"
|
||||
placeholder="your-telegram-chat-id"
|
||||
ref={(r) => this.chatID = r}
|
||||
defaultValue={chatID || ''}>
|
||||
</input>
|
||||
</div>
|
||||
|
||||
<div className="form-group col-xs-12">
|
||||
<label htmlFor="parseMode">Select the alert message format</label>
|
||||
<div className="form-control-static">
|
||||
<div className="radio">
|
||||
<input id="parseModeMarkdown" type="radio" name="parseMode" value="markdown" defaultChecked={parseMode !== 'HTML'} ref={(r) => this.parseModeMarkdown = r} />
|
||||
<label htmlFor="parseModeMarkdown">Markdown</label>
|
||||
</div>
|
||||
<div className="radio">
|
||||
<input id="parseModeHTML" type="radio" name="parseMode" value="html" defaultChecked={parseMode === 'HTML'} ref={(r) => this.parseModeHTML = r} />
|
||||
<label htmlFor="parseModeHTML">HTML</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="form-group col-xs-12">
|
||||
<div className="form-control-static">
|
||||
<input id="disableWebPagePreview" type="checkbox" defaultChecked={disableWebPagePreview} ref={(r) => this.disableWebPagePreview = r} />
|
||||
<label htmlFor="disableWebPagePreview">
|
||||
Disable <a href="https://telegram.org/blog/link-preview" target="_blank">link previews</a> in alert messages.
|
||||
</label>
|
||||
<input
|
||||
className="form-control"
|
||||
id="token"
|
||||
type="text"
|
||||
placeholder="your-telegram-token"
|
||||
ref={(r) => this.token = r}
|
||||
defaultValue={token || ''}>
|
||||
</input>
|
||||
<label className="form-helper">Note: a value of <code>true</code> indicates the Telegram token has been set</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="form-group col-xs-12">
|
||||
<label htmlFor="chat-id">
|
||||
Chat ID
|
||||
<QuestionMarkTooltip
|
||||
tipID="chat-id"
|
||||
tipContent={TELEGRAM_CHAT_ID_TIP}
|
||||
/>
|
||||
<div className="form-group col-xs-12">
|
||||
<div className="form-control-static">
|
||||
<input id="disableNotification" type="checkbox" defaultChecked={disableNotification} ref={(r) => this.disableNotification = r} />
|
||||
<label htmlFor="disableNotification">
|
||||
Disable notifications on iOS devices and disable sounds on Android devices. Android users continue to receive notifications.
|
||||
</label>
|
||||
<input
|
||||
className="form-control"
|
||||
id="chat-id"
|
||||
type="text"
|
||||
placeholder="your-telegram-chat-id"
|
||||
ref={(r) => this.chatID = r}
|
||||
defaultValue={chatID || ''}>
|
||||
</input>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="form-group col-xs-12">
|
||||
<label htmlFor="parseMode">Select the alert message format</label>
|
||||
<div className="form-control-static">
|
||||
<div className="radio">
|
||||
<input id="parseModeMarkdown" type="radio" name="parseMode" value="markdown" defaultChecked={parseMode !== 'HTML'} ref={(r) => this.parseModeMarkdown = r} />
|
||||
<label htmlFor="parseModeMarkdown">Markdown</label>
|
||||
</div>
|
||||
<div className="radio">
|
||||
<input id="parseModeHTML" type="radio" name="parseMode" value="html" defaultChecked={parseMode === 'HTML'} ref={(r) => this.parseModeHTML = r} />
|
||||
<label htmlFor="parseModeHTML">HTML</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="form-group col-xs-12">
|
||||
<div className="form-control-static">
|
||||
<input id="disableWebPagePreview" type="checkbox" defaultChecked={disableWebPagePreview} ref={(r) => this.disableWebPagePreview = r} />
|
||||
<label htmlFor="disableWebPagePreview">
|
||||
Disable <a href="https://telegram.org/blog/link-preview" target="_blank">link previews</a> in alert messages.
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="form-group col-xs-12">
|
||||
<div className="form-control-static">
|
||||
<input id="disableNotification" type="checkbox" defaultChecked={disableNotification} ref={(r) => this.disableNotification = r} />
|
||||
<label htmlFor="disableNotification">
|
||||
Disable notifications on iOS devices and disable sounds on Android devices. Android users continue to receive notifications.
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="form-group form-group-submit col-xs-12 col-sm-6 col-sm-offset-3">
|
||||
<button className="btn btn-block btn-primary" type="submit">Save</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div className="form-group form-group-submit col-xs-12 col-sm-6 col-sm-offset-3">
|
||||
<button className="btn btn-block btn-primary" type="submit">Save</button>
|
||||
</div>
|
||||
</form>
|
||||
)
|
||||
},
|
||||
})
|
||||
|
|
|
|||
|
|
@ -31,34 +31,27 @@ const VictorOpsConfig = React.createClass({
|
|||
const {url} = options
|
||||
|
||||
return (
|
||||
<div className="panel panel-info col-xs-12">
|
||||
<div className="panel-heading u-flex u-ai-center u-jc-space-between">
|
||||
<h4 className="panel-title text-center">VictorOps Alert</h4>
|
||||
<form onSubmit={this.handleSaveAlert}>
|
||||
<div className="form-group col-xs-12">
|
||||
<label htmlFor="api-key">API Key</label>
|
||||
<input className="form-control" id="api-key" type="text" ref={(r) => this.apiKey = r} defaultValue={apiKey || ''}></input>
|
||||
<label className="form-helper">Note: a value of <code>true</code> indicates the VictorOps API key has been set</label>
|
||||
</div>
|
||||
<br/>
|
||||
<p className="no-user-select">Have alerts sent to VictorOps.</p>
|
||||
<form onSubmit={this.handleSaveAlert}>
|
||||
<div className="form-group col-xs-12">
|
||||
<label htmlFor="api-key">API Key</label>
|
||||
<input className="form-control" id="api-key" type="text" ref={(r) => this.apiKey = r} defaultValue={apiKey || ''}></input>
|
||||
<label className="form-helper">Note: a value of <code>true</code> indicates the VictorOps API key has been set</label>
|
||||
</div>
|
||||
|
||||
<div className="form-group col-xs-12">
|
||||
<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 col-xs-12">
|
||||
<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 col-xs-12">
|
||||
<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 col-xs-12">
|
||||
<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 form-group-submit col-xs-12 col-sm-6 col-sm-offset-3">
|
||||
<button className="btn btn-block btn-primary" type="submit">Save</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div className="form-group form-group-submit col-xs-12 col-sm-6 col-sm-offset-3">
|
||||
<button className="btn btn-block btn-primary" type="submit">Save</button>
|
||||
</div>
|
||||
</form>
|
||||
)
|
||||
},
|
||||
})
|
||||
|
|
|
|||
Loading…
Reference in New Issue