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

add handler parameters from config and style handler parameter inputs

pull/10616/head
deniz kusefoglu 2017-11-28 14:11:28 -08:00
parent bb99d4b107
commit 6d0b3fcb4b
19 changed files with 318 additions and 148 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
ui/src/kapacitor/components/HandlerEmpty.js
View File

@ -5,10 +5,14 @@ const HandlerEmpty = ({configLink}) => {
return ( return (
<div className="endpoint-tab-contents"> <div className="endpoint-tab-contents">
<div className="endpoint-tab--parameters"> <div className="endpoint-tab--parameters">
<div className="form-group"> <div className="endpoint-tab--parameters--empty">
This handler does not seem to be configured. <p>This handler does not seem to be configured.</p>
<Link to={configLink} title="Configuration Page"> <Link to={configLink} title="Configuration Page">
Configure it here. <div className="form-group-submit col-xs-12 text-center">
<button className="btn btn-primary" type="submit">
Configure Alert Handlers
</button>
</div>
</Link> </Link>
</div> </div>
</div> </div>

49
ui/src/kapacitor/components/HandlerInput.js
View File

@ -7,25 +7,37 @@ const HandlerInput = ({
selectedHandler, selectedHandler,
handleModifyHandler, handleModifyHandler,
redacted = false, redacted = false,
editable = true, disabled = false,
fieldColumns = 'col-md-6',
}) => { }) => {
const formGroupClass = `form-group ${fieldColumns}`
return ( return (
<div className="form-group"> <form>
<label htmlFor={fieldName}> <div className={formGroupClass}>
{fieldDisplay} <label htmlFor={fieldName}>
</label> {fieldDisplay}
<input </label>
name={fieldName} <div className={redacted ? 'form-control-static redacted-input' : null}>
id={fieldName} <input
className="form-control input-sm form-malachite" name={fieldName}
type="text" id={fieldName}
placeholder={placeholder} className="form-control input-sm form-malachite"
onChange={handleModifyHandler(selectedHandler, fieldName)} type={redacted ? 'hidden' : 'text'}
value={selectedHandler[fieldName]} placeholder={placeholder}
autoComplete="off" onChange={handleModifyHandler(selectedHandler, fieldName)}
spellCheck="false" value={selectedHandler[fieldName]}
/> autoComplete="off"
</div> spellCheck="false"
disabled={disabled}
/>
{redacted
? <span className="alert-value-set">
<span className="icon checkmark" /> Value set in Config
</span>
: null}
</div>
</div>
</form>
) )
} }
@ -35,10 +47,11 @@ HandlerInput.propTypes = {
fieldName: string.isRequired, fieldName: string.isRequired,
fieldDisplay: string, fieldDisplay: string,
placeholder: string, placeholder: string,
disabled: bool,
redacted: bool, redacted: bool,
editable: bool,
selectedHandler: shape({}).isRequired, selectedHandler: shape({}).isRequired,
handleModifyHandler: func.isRequired, handleModifyHandler: func.isRequired,
fieldColumns: string,
} }
export default HandlerInput export default HandlerInput

2
ui/src/kapacitor/components/RuleHandlers.js
View File

@ -56,7 +56,7 @@ class RuleHandlers extends Component {
handleAddEndpoint = selectedItem => { handleAddEndpoint = selectedItem => {
const {handlersOnThisAlert, handlersOfKind} = this.state const {handlersOnThisAlert, handlersOfKind} = this.state
const newItemNumbering = _.get(handlersOfKind, selectedItem.type, 0) + 1 const newItemNumbering = _.get(handlersOfKind, selectedItem.type, 0) + 1
const newItemName = selectedItem.type + newItemNumbering const newItemName = `${selectedItem.type}-${newItemNumbering}`
const newEndpoint = { const newEndpoint = {
...selectedItem, ...selectedItem,
alias: newItemName, alias: newItemName,

95
ui/src/kapacitor/components/handlers/AlertaHandler.js
View File

@ -7,66 +7,69 @@ const AlertaHandler = ({selectedHandler, handleModifyHandler, configLink}) => {
? <div className="endpoint-tab-contents"> ? <div className="endpoint-tab-contents">
<div className="endpoint-tab--parameters"> <div className="endpoint-tab--parameters">
<h4>Parameters from Kapacitor Configuration</h4> <h4>Parameters from Kapacitor Configuration</h4>
<HandlerInput
selectedHandler={selectedHandler}
handleModifyHandler={handleModifyHandler}
fieldName="token"
fieldDisplay="Token"
placeholder="ex: my_token"
redacted={true}
fieldColumns="col-md-12"
/>
<HandlerInput <HandlerInput
selectedHandler={selectedHandler} selectedHandler={selectedHandler}
handleModifyHandler={handleModifyHandler} handleModifyHandler={handleModifyHandler}
fieldName="environment" fieldName="environment"
fieldDisplay="Environment" fieldDisplay="Environment"
placeholder="Ex: environment" placeholder="ex: environment"
/> />
<HandlerInput <HandlerInput
selectedHandler={selectedHandler} selectedHandler={selectedHandler}
handleModifyHandler={handleModifyHandler} handleModifyHandler={handleModifyHandler}
fieldName="origin" fieldName="origin"
fieldDisplay="Origin" fieldDisplay="Origin"
placeholder="Ex: origin" placeholder="ex: origin"
/>
<HandlerInput
selectedHandler={selectedHandler}
handleModifyHandler={handleModifyHandler}
fieldName="token"
fieldDisplay="Token"
placeholder="Ex: my_token"
redacted={true}
/> />
</div> </div>
<div className="endpoint-tab--parameters"> <div className="endpoint-tab--parameters">
<h4>Optional Parameters</h4> <h4>Parameters for this Alert Handler</h4>
<HandlerInput <form>
selectedHandler={selectedHandler} <HandlerInput
handleModifyHandler={handleModifyHandler} selectedHandler={selectedHandler}
fieldName="resource" handleModifyHandler={handleModifyHandler}
fieldDisplay="Resource" fieldName="resource"
placeholder="Ex: my_resource" fieldDisplay="Resource"
/> placeholder=""
<HandlerInput />
selectedHandler={selectedHandler} <HandlerInput
handleModifyHandler={handleModifyHandler} selectedHandler={selectedHandler}
fieldName="event" handleModifyHandler={handleModifyHandler}
fieldDisplay="Event" fieldName="event"
placeholder="Ex: event" fieldDisplay="Event"
/> placeholder=""
<HandlerInput />
selectedHandler={selectedHandler} <HandlerInput
handleModifyHandler={handleModifyHandler} selectedHandler={selectedHandler}
fieldName="group" handleModifyHandler={handleModifyHandler}
fieldDisplay="Group" fieldName="group"
placeholder="Ex: group_name" fieldDisplay="Group"
/> placeholder=""
<HandlerInput />
selectedHandler={selectedHandler} <HandlerInput
handleModifyHandler={handleModifyHandler} selectedHandler={selectedHandler}
fieldName="value" handleModifyHandler={handleModifyHandler}
fieldDisplay="Value" fieldName="value"
placeholder="Ex: value" fieldDisplay="Value"
/> placeholder=""
<HandlerInput />
selectedHandler={selectedHandler} <HandlerInput
handleModifyHandler={handleModifyHandler} selectedHandler={selectedHandler}
fieldName="service" handleModifyHandler={handleModifyHandler}
fieldDisplay="Service" fieldName="service"
placeholder="Ex: service_name" fieldDisplay="Service"
/> placeholder=""
/>
</form>
</div> </div>
</div> </div>
: <HandlerEmpty configLink={configLink} /> : <HandlerEmpty configLink={configLink} />

5
ui/src/kapacitor/components/handlers/ExecHandler.js
View File

@ -5,13 +5,14 @@ const ExecHandler = ({selectedHandler, handleModifyHandler}) => {
return ( return (
<div className="endpoint-tab-contents"> <div className="endpoint-tab-contents">
<div className="endpoint-tab--parameters"> <div className="endpoint-tab--parameters">
<h4>Optional Parameters</h4> <h4>Parameters for this Alert Handler</h4>
<HandlerInput <HandlerInput
selectedHandler={selectedHandler} selectedHandler={selectedHandler}
handleModifyHandler={handleModifyHandler} handleModifyHandler={handleModifyHandler}
fieldName="command" fieldName="command"
fieldDisplay="Command (arguments separated by spaces):" fieldDisplay="Command (arguments separated by spaces):"
placeholder="Ex: command argument" placeholder="ex: command argument"
fieldColumns="col-md-12"
/> />
</div> </div>
</div> </div>

13
ui/src/kapacitor/components/handlers/HipchatHandler.js
View File

@ -1,13 +1,7 @@
import React, {PropTypes} from 'react' import React, {PropTypes} from 'react'
import HandlerInput from 'src/kapacitor/components/HandlerInput' import HandlerInput from 'src/kapacitor/components/HandlerInput'
import HandlerEmpty from 'src/kapacitor/components/HandlerEmpty' import HandlerEmpty from 'src/kapacitor/components/HandlerEmpty'
// import RedactedInput from './RedactedInput'
// <RedactedInput
// defaultValue={token}
// id="token"
// refFunc={this.handleTokenRef}
// />
const HipchatHandler = ({selectedHandler, handleModifyHandler, configLink}) => { const HipchatHandler = ({selectedHandler, handleModifyHandler, configLink}) => {
return selectedHandler.enabled return selectedHandler.enabled
? <div className="endpoint-tab-contents"> ? <div className="endpoint-tab-contents">
@ -18,22 +12,23 @@ const HipchatHandler = ({selectedHandler, handleModifyHandler, configLink}) => {
handleModifyHandler={handleModifyHandler} handleModifyHandler={handleModifyHandler}
fieldName="url" fieldName="url"
fieldDisplay="Subdomain Url" fieldDisplay="Subdomain Url"
placeholder="Ex: hipchat_subdomain" placeholder="ex: hipchat_subdomain"
editable={false} editable={false}
fieldColumns="col-md-12"
/> />
<HandlerInput <HandlerInput
selectedHandler={selectedHandler} selectedHandler={selectedHandler}
handleModifyHandler={handleModifyHandler} handleModifyHandler={handleModifyHandler}
fieldName="room" fieldName="room"
fieldDisplay="Room:" fieldDisplay="Room:"
placeholder="Ex: room_name" placeholder="ex: room_name"
/> />
<HandlerInput <HandlerInput
selectedHandler={selectedHandler} selectedHandler={selectedHandler}
handleModifyHandler={handleModifyHandler} handleModifyHandler={handleModifyHandler}
fieldName="token" fieldName="token"
fieldDisplay="Token:" fieldDisplay="Token:"
placeholder="Ex: the_token" placeholder="ex: the_token"
redacted={true} redacted={true}
/> />
</div> </div>

7
ui/src/kapacitor/components/handlers/LogHandler.js
View File

@ -5,13 +5,14 @@ const LogHandler = ({selectedHandler, handleModifyHandler}) => {
return ( return (
<div className="endpoint-tab-contents"> <div className="endpoint-tab-contents">
<div className="endpoint-tab--parameters"> <div className="endpoint-tab--parameters">
<h4>Optional Parameters</h4> <h4>Parameters for this Alert Handler</h4>
<HandlerInput <HandlerInput
selectedHandler={selectedHandler} selectedHandler={selectedHandler}
handleModifyHandler={handleModifyHandler} handleModifyHandler={handleModifyHandler}
fieldName="filePath" fieldName="filePath"
fieldDisplay="Log File Path:" fieldDisplay="File Path for Log File:"
placeholder="Ex: /tmp/alerts.log" placeholder="ex: /tmp/alerts.log"
fieldColumns="col-md-12"
/> />
</div> </div>
</div> </div>

18
ui/src/kapacitor/components/handlers/OpsGenieHandler.js
View File

@ -10,20 +10,32 @@ const OpsgenieHandler = ({
return selectedHandler.enabled return selectedHandler.enabled
? <div className="endpoint-tab-contents"> ? <div className="endpoint-tab-contents">
<div className="endpoint-tab--parameters"> <div className="endpoint-tab--parameters">
<h4>Optional Parameters</h4> <h4>Parameters from Kapacitor Configuration</h4>
<HandlerInput
selectedHandler={selectedHandler}
handleModifyHandler={handleModifyHandler}
fieldName="api-key"
fieldDisplay="API-key"
placeholder=""
redacted={true}
disabled={true}
/>
</div>
<div className="endpoint-tab--parameters">
<h4>Parameters for this Alert Handler:</h4>
<HandlerInput <HandlerInput
selectedHandler={selectedHandler} selectedHandler={selectedHandler}
handleModifyHandler={handleModifyHandler} handleModifyHandler={handleModifyHandler}
fieldName="teams" fieldName="teams"
fieldDisplay="Teams" fieldDisplay="Teams"
placeholder="Ex: teams_name" placeholder="ex: teams_name"
/> />
<HandlerInput <HandlerInput
selectedHandler={selectedHandler} selectedHandler={selectedHandler}
handleModifyHandler={handleModifyHandler} handleModifyHandler={handleModifyHandler}
fieldName="recipients" fieldName="recipients"
fieldDisplay="Recipients" fieldDisplay="Recipients"
placeholder="Ex: recipients_name" placeholder="ex: recipients_name"
/> />
</div> </div>
</div> </div>

20
ui/src/kapacitor/components/handlers/PagerDutyHandler.js
View File

@ -10,14 +10,18 @@ const PagerdutyHandler = ({
return selectedHandler.enabled return selectedHandler.enabled
? <div className="endpoint-tab-contents"> ? <div className="endpoint-tab-contents">
<div className="endpoint-tab--parameters"> <div className="endpoint-tab--parameters">
<h4>Optional Parameters</h4> <h4>Parameters</h4>
<HandlerInput <form>
selectedHandler={selectedHandler} <HandlerInput
handleModifyHandler={handleModifyHandler} selectedHandler={selectedHandler}
fieldName="serviceKey" handleModifyHandler={handleModifyHandler}
fieldDisplay="Service Key:" fieldName="serviceKey"
placeholder="Ex: service_key" fieldDisplay="Service Key:"
/> placeholder="ex: service_key"
redacted={true}
fieldColumns="col-md-12"
/>
</form>
</div> </div>
</div> </div>
: <HandlerEmpty configLink={configLink} /> : <HandlerEmpty configLink={configLink} />

14
ui/src/kapacitor/components/handlers/PostHandler.js
View File

@ -1,24 +1,18 @@
import React, {PropTypes} from 'react' import React, {PropTypes} from 'react'
import HandlerInput from 'src/kapacitor/components/HandlerInput' import HandlerInput from 'src/kapacitor/components/HandlerInput'
import HandlerCheckbox from 'src/kapacitor/components/HandlerCheckbox'
const HttpHandler = ({selectedHandler, handleModifyHandler}) => { const HttpHandler = ({selectedHandler, handleModifyHandler}) => {
return ( return (
<div className="endpoint-tab-contents"> <div className="endpoint-tab-contents">
<div className="endpoint-tab--parameters"> <div className="endpoint-tab--parameters">
<h4>Optional Parameters</h4> <h4>Parameters for this Alert Handler</h4>
<HandlerInput <HandlerInput
selectedHandler={selectedHandler} selectedHandler={selectedHandler}
handleModifyHandler={handleModifyHandler} handleModifyHandler={handleModifyHandler}
fieldName="url" fieldName="url"
fieldDisplay="POST URL" fieldDisplay="HTTP endpoint for POST request"
placeholder="Ex: http://example.com/api/alert" placeholder="ex: http://example.com/api/alert"
/> fieldColumns="col-md-12"
<HandlerCheckbox
selectedHandler={selectedHandler}
handleModifyHandler={handleModifyHandler}
fieldName="captureResponse"
fieldDisplay="Capture response"
/> />
</div> </div>
</div> </div>

46
ui/src/kapacitor/components/handlers/PushoverHandler.js
View File

@ -10,50 +10,62 @@ const PushoverHandler = ({
return selectedHandler.enabled return selectedHandler.enabled
? <div className="endpoint-tab-contents"> ? <div className="endpoint-tab-contents">
<div className="endpoint-tab--parameters"> <div className="endpoint-tab--parameters">
<h4>Optional Parameters</h4> <h4>Parameters from Kapacitor Configuration</h4>
<HandlerInput
selectedHandler={selectedHandler}
handleModifyHandler={handleModifyHandler}
fieldName="token"
fieldDisplay="Token"
placeholder=""
disabled={true}
redacted={true}
/>
<HandlerInput <HandlerInput
selectedHandler={selectedHandler} selectedHandler={selectedHandler}
handleModifyHandler={handleModifyHandler} handleModifyHandler={handleModifyHandler}
fieldName="userKey" fieldName="userKey"
fieldDisplay="User Key" fieldDisplay="User Key"
placeholder="Ex: the_key" placeholder=""
/> redacted={true}
<HandlerInput
selectedHandler={selectedHandler}
handleModifyHandler={handleModifyHandler}
fieldName="device"
fieldDisplay="Device: (comma separated)"
placeholder="Ex: dv1, dv2"
/> />
</div>
<div className="endpoint-tab--parameters">
<h4>Parameters for this Alert Handler</h4>
<HandlerInput <HandlerInput
selectedHandler={selectedHandler} selectedHandler={selectedHandler}
handleModifyHandler={handleModifyHandler} handleModifyHandler={handleModifyHandler}
fieldName="title" fieldName="title"
fieldDisplay="Title:" fieldDisplay="Alert Title:"
placeholder="Ex: Important Alert" placeholder="ex: Important Alert"
fieldColumns="col-md-12"
/> />
</div>
<div className="optional-alert-parameters">
<HandlerInput <HandlerInput
selectedHandler={selectedHandler} selectedHandler={selectedHandler}
handleModifyHandler={handleModifyHandler} handleModifyHandler={handleModifyHandler}
fieldName="url" fieldName="url"
fieldDisplay="URL:" fieldDisplay="URL:"
placeholder="Ex: https://influxdata.com" placeholder="ex: https://influxdata.com"
/> />
<HandlerInput <HandlerInput
selectedHandler={selectedHandler} selectedHandler={selectedHandler}
handleModifyHandler={handleModifyHandler} handleModifyHandler={handleModifyHandler}
fieldName="urlTitle" fieldName="urlTitle"
fieldDisplay="URL Title:" fieldDisplay="URL Title:"
placeholder="Ex: InfluxData" placeholder="ex: InfluxData"
/>
<HandlerInput
selectedHandler={selectedHandler}
handleModifyHandler={handleModifyHandler}
fieldName="device"
fieldDisplay="Devices: (comma separated)"
placeholder="ex: dv1, dv2"
/> />
<HandlerInput <HandlerInput
selectedHandler={selectedHandler} selectedHandler={selectedHandler}
handleModifyHandler={handleModifyHandler} handleModifyHandler={handleModifyHandler}
fieldName="sound" fieldName="sound"
fieldDisplay="Sound:" fieldDisplay="Alert Sound:"
placeholder="Ex: alien" placeholder="ex: alien"
/> />
</div> </div>
</div> </div>

31
ui/src/kapacitor/components/handlers/SMTPHandler.js
View File

@ -6,13 +6,40 @@ const SmtpHandler = ({selectedHandler, handleModifyHandler, configLink}) => {
return selectedHandler.enabled return selectedHandler.enabled
? <div className="endpoint-tab-contents"> ? <div className="endpoint-tab-contents">
<div className="endpoint-tab--parameters"> <div className="endpoint-tab--parameters">
<h4>Optional Parameters</h4> <h4>Parameters from Kapacitor Configuration</h4>
<HandlerInput
selectedHandler={selectedHandler}
handleModifyHandler={handleModifyHandler}
fieldName="host"
fieldDisplay="SMTP Host"
placeholder=""
disabled={true}
/>
<HandlerInput
selectedHandler={selectedHandler}
handleModifyHandler={handleModifyHandler}
fieldName="port"
fieldDisplay="SMTP Port"
placeholder=""
disabled={true}
/>
<HandlerInput
selectedHandler={selectedHandler}
handleModifyHandler={handleModifyHandler}
fieldName="from"
fieldDisplay="from"
placeholder=""
disabled={true}
/>
</div>
<div className="endpoint-tab--parameters">
<h4>Parameters for this Alert Handler</h4>
<HandlerInput <HandlerInput
selectedHandler={selectedHandler} selectedHandler={selectedHandler}
handleModifyHandler={handleModifyHandler} handleModifyHandler={handleModifyHandler}
fieldName="to" fieldName="to"
fieldDisplay="E-mail Addresses: (separated by spaces)" fieldDisplay="E-mail Addresses: (separated by spaces)"
placeholder="Ex: bob@domain.com susan@domain.com" placeholder="ex: bob@domain.com susan@domain.com"
/> />
</div> </div>
</div> </div>

18
ui/src/kapacitor/components/handlers/SensuHandler.js
View File

@ -6,20 +6,32 @@ const SensuHandler = ({selectedHandler, handleModifyHandler, configLink}) => {
return selectedHandler.enabled return selectedHandler.enabled
? <div className="endpoint-tab-contents"> ? <div className="endpoint-tab-contents">
<div className="endpoint-tab--parameters"> <div className="endpoint-tab--parameters">
<h4>Optional Parameters</h4> <h4>Parameters from Kapacitor Configuration</h4>
<HandlerInput
selectedHandler={selectedHandler}
handleModifyHandler={handleModifyHandler}
fieldName="addr"
fieldDisplay="Address"
placeholder=""
disabled={true}
/>
<HandlerInput <HandlerInput
selectedHandler={selectedHandler} selectedHandler={selectedHandler}
handleModifyHandler={handleModifyHandler} handleModifyHandler={handleModifyHandler}
fieldName="source" fieldName="source"
fieldDisplay="Source" fieldDisplay="Source"
placeholder="Ex: my_source" placeholder="ex: my_source"
/> />
</div>
<div className="endpoint-tab--parameters">
<h4>Parameters for this Alert Handler</h4>
<HandlerInput <HandlerInput
selectedHandler={selectedHandler} selectedHandler={selectedHandler}
handleModifyHandler={handleModifyHandler} handleModifyHandler={handleModifyHandler}
fieldName="handlers" fieldName="handlers"
fieldDisplay="Handlers" fieldDisplay="Handlers"
placeholder="Ex: my_handlers" placeholder="ex: my_handlers"
fieldColumns="col-md-12"
/> />
</div> </div>
</div> </div>

24
ui/src/kapacitor/components/handlers/SlackHandler.js
View File

@ -6,27 +6,43 @@ const SlackHandler = ({selectedHandler, handleModifyHandler, configLink}) => {
return selectedHandler.enabled return selectedHandler.enabled
? <div className="endpoint-tab-contents"> ? <div className="endpoint-tab-contents">
<div className="endpoint-tab--parameters"> <div className="endpoint-tab--parameters">
<h4>Optional Parameters</h4> <h4>Parameters from Kapacitor Configuration</h4>
<HandlerInput
selectedHandler={selectedHandler}
handleModifyHandler={handleModifyHandler}
fieldName="url"
fieldDisplay="Webhook URL:"
placeholder=""
disabled={true}
redacted={true}
fieldColumns="col-md-12"
/>
</div>
<div className="endpoint-tab--parameters">
<h4>Parameters for this Alert Handler</h4>
<HandlerInput <HandlerInput
selectedHandler={selectedHandler} selectedHandler={selectedHandler}
handleModifyHandler={handleModifyHandler} handleModifyHandler={handleModifyHandler}
fieldName="channel" fieldName="channel"
fieldDisplay="Channel:" fieldDisplay="Channel:"
placeholder="Ex: #my_favorite_channel" placeholder="ex: #my_favorite_channel"
fieldColumns="col-md-4"
/> />
<HandlerInput <HandlerInput
selectedHandler={selectedHandler} selectedHandler={selectedHandler}
handleModifyHandler={handleModifyHandler} handleModifyHandler={handleModifyHandler}
fieldName="username" fieldName="username"
fieldDisplay="Username:" fieldDisplay="Username:"
placeholder="Ex: my_favorite_username" placeholder="ex: my_favorite_username"
fieldColumns="col-md-4"
/> />
<HandlerInput <HandlerInput
selectedHandler={selectedHandler} selectedHandler={selectedHandler}
handleModifyHandler={handleModifyHandler} handleModifyHandler={handleModifyHandler}
fieldName="iconEmoji" fieldName="iconEmoji"
fieldDisplay="Emoji:" fieldDisplay="Emoji:"
placeholder="Ex: :thumbsup:" placeholder="ex: :thumbsup:"
fieldColumns="col-md-4"
/> />
</div> </div>
</div> </div>

26
ui/src/kapacitor/components/handlers/TalkHandler.js
View File

@ -1,10 +1,30 @@
import React, {PropTypes} from 'react' import React, {PropTypes} from 'react'
import HandlerInput from 'src/kapacitor/components/HandlerInput'
import HandlerEmpty from 'src/kapacitor/components/HandlerEmpty' import HandlerEmpty from 'src/kapacitor/components/HandlerEmpty'
const TalkHandler = ({selectedHandler, configLink}) => { const TalkHandler = ({selectedHandler, handleModifyHandler, configLink}) => {
return selectedHandler.enabled return selectedHandler.enabled
? <div className="rule-section--row rule-section--border-bottom"> ? <div className="endpoint-tab-contents">
<p>Talk requires no additional alert parameters.</p> <div className="endpoint-tab--parameters">
<h4>Parameters from Kapacitor Configuration</h4>
<HandlerInput
selectedHandler={selectedHandler}
handleModifyHandler={handleModifyHandler}
fieldName="url"
fieldDisplay="URL"
placeholder=""
disabled={true}
redacted={true}
/>
<HandlerInput
selectedHandler={selectedHandler}
handleModifyHandler={handleModifyHandler}
fieldName="author_name"
fieldDisplay="Author Name"
placeholder=""
disabled={true}
/>
</div>
</div> </div>
: <HandlerEmpty configLink={configLink} /> : <HandlerEmpty configLink={configLink} />
} }

6
ui/src/kapacitor/components/handlers/TcpHandler.js
View File

@ -5,13 +5,13 @@ const TcpHandler = ({selectedHandler, handleModifyHandler}) => {
return ( return (
<div className="endpoint-tab-contents"> <div className="endpoint-tab-contents">
<div className="endpoint-tab--parameters"> <div className="endpoint-tab--parameters">
<h4>Optional Parameters</h4> <h4>Parameters for this Alert Handler</h4>
<HandlerInput <HandlerInput
selectedHandler={selectedHandler} selectedHandler={selectedHandler}
handleModifyHandler={handleModifyHandler} handleModifyHandler={handleModifyHandler}
fieldName="address" fieldName="address"
fieldDisplay="address" fieldDisplay="Address"
placeholder="Ex: exampleendpoint.com:5678" placeholder="ex: exampleendpoint.com:5678"
/> />
</div> </div>
</div> </div>

19
ui/src/kapacitor/components/handlers/TelegramHandler.js
View File

@ -11,20 +11,33 @@ const TelegramHandler = ({
return selectedHandler.enabled return selectedHandler.enabled
? <div className="endpoint-tab-contents"> ? <div className="endpoint-tab-contents">
<div className="endpoint-tab--parameters"> <div className="endpoint-tab--parameters">
<h4>Optional Parameters</h4> <h4>Parameters from Kapacitor Configuration</h4>
<HandlerInput
selectedHandler={selectedHandler}
handleModifyHandler={handleModifyHandler}
fieldName="token"
fieldDisplay="Token"
placeholder=""
disabled={true}
redacted={true}
fieldColumns="col-md-12"
/>
</div>
<div className="endpoint-tab--parameters">
<h4>Parameters for this Alert Handler</h4>
<HandlerInput <HandlerInput
selectedHandler={selectedHandler} selectedHandler={selectedHandler}
handleModifyHandler={handleModifyHandler} handleModifyHandler={handleModifyHandler}
fieldName="chatId" fieldName="chatId"
fieldDisplay="Chat ID:" fieldDisplay="Chat ID:"
placeholder="Ex: ??????" placeholder="ex: chat_id"
/> />
<HandlerInput <HandlerInput
selectedHandler={selectedHandler} selectedHandler={selectedHandler}
handleModifyHandler={handleModifyHandler} handleModifyHandler={handleModifyHandler}
fieldName="parseMode" fieldName="parseMode"
fieldDisplay="Parse Mode:" fieldDisplay="Parse Mode:"
placeholder="Ex: Markdown" placeholder="ex: Markdown or HTML"
/> />
<HandlerCheckbox <HandlerCheckbox
selectedHandler={selectedHandler} selectedHandler={selectedHandler}

16
ui/src/kapacitor/components/handlers/VictorOpsHandler.js
View File

@ -10,13 +10,25 @@ const VictoropsHandler = ({
return selectedHandler.enabled return selectedHandler.enabled
? <div className="endpoint-tab-contents"> ? <div className="endpoint-tab-contents">
<div className="endpoint-tab--parameters"> <div className="endpoint-tab--parameters">
<h4>Optional Parameters</h4> <h4>Parameters from Kapacitor Configuration</h4>
<HandlerInput
selectedHandler={selectedHandler}
handleModifyHandler={handleModifyHandler}
fieldName="api-key"
fieldDisplay="API key"
placeholder="ex: api_key"
disabled={true}
redacted={true}
/>
</div>
<div className="endpoint-tab--parameters">
<h4>Parameters for this Alert Handler</h4>
<HandlerInput <HandlerInput
selectedHandler={selectedHandler} selectedHandler={selectedHandler}
handleModifyHandler={handleModifyHandler} handleModifyHandler={handleModifyHandler}
fieldName="routingKey" fieldName="routingKey"
fieldDisplay="Routing Key:" fieldDisplay="Routing Key:"
placeholder="Ex: routing_key" placeholder="ex: routing_key"
/> />
</div> </div>
</div> </div>

47
ui/src/style/pages/kapacitor.scss
View File

@ -260,7 +260,7 @@ $rule-builder--radius-lg: 5px;
top: ($rule-builder--padding-lg * 2); top: ($rule-builder--padding-lg * 2);
left: $rule-builder--padding-sm; left: $rule-builder--padding-sm;
width: calc(100% - #{$rule-builder--padding-sm * 2}); width: calc(100% - #{$rule-builder--padding-sm * 2});
height: calc(100% - #{$rule-builder--padding-lg * 2}) !important;; height: calc(100% - #{$rule-builder--padding-lg * 2}) !important;
} }
> .dygraph > .dygraph-child { > .dygraph > .dygraph-child {
position: absolute; position: absolute;
@ -290,7 +290,10 @@ $rule-builder--radius-lg: 5px;
} }
.rule-builder--graph-options { .rule-builder--graph-options {
width: 100%; width: 100%;
padding: $rule-builder--padding-sm ($rule-builder--padding-lg - $rule-builder--padding-sm); padding: $rule-builder--padding-sm
(
$rule-builder--padding-lg - $rule-builder--padding-sm
);
display: flex; display: flex;
align-items: center; align-items: center;
height: ($rule-builder--padding-lg * 2); height: ($rule-builder--padding-lg * 2);
@ -422,7 +425,7 @@ $rule-builder--radius-lg: 5px;
} }
.endpoint-tabs { .endpoint-tabs {
width: 260px; width: 150px;
background-color: $rule-builder--section-border; background-color: $rule-builder--section-border;
border-bottom-left-radius: $rule-builder--radius-lg; border-bottom-left-radius: $rule-builder--radius-lg;
display: flex; display: flex;
@ -448,9 +451,7 @@ $rule-builder--radius-lg: 5px;
font-size: 14.5px; font-size: 14.5px;
font-weight: 600; font-weight: 600;
border-right: 2px solid $rule-builder--section-border; border-right: 2px solid $rule-builder--section-border;
transition: transition: color 0.25s ease, background-color 0.25s ease,
color 0.25s ease,
background-color 0.25s ease,
border-color 0.25s ease; border-color 0.25s ease;
&:last-child { &:last-child {
@ -490,7 +491,7 @@ $rule-builder--radius-lg: 5px;
left: 50%; left: 50%;
background-color: $g8-storm; background-color: $g8-storm;
border-radius: 1px; border-radius: 1px;
transform: translate(-50%,-50%) rotate(45deg); transform: translate(-50%, -50%) rotate(45deg);
transition: background-color 0.25s ease; transition: background-color 0.25s ease;
} }
&:before { &:before {
@ -506,7 +507,9 @@ $rule-builder--radius-lg: 5px;
background-color: $g5-pepper; background-color: $g5-pepper;
cursor: pointer; cursor: pointer;
&:before, &:before,
&:after {background-color: $g20-white;} &:after {
background-color: $g20-white;
}
} }
&:hover:active { &:hover:active {
background-color: $c-curacao; background-color: $c-curacao;
@ -519,6 +522,7 @@ $rule-builder--radius-lg: 5px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: stretch; align-items: stretch;
min-height: 350px;
h4 { h4 {
width: 100%; width: 100%;
@ -532,4 +536,31 @@ $rule-builder--radius-lg: 5px;
} }
.endpoint-tab--parameters { .endpoint-tab--parameters {
padding: $rule-builder--padding-lg; padding: $rule-builder--padding-lg;
padding-bottom: 0;
&:last-child {
padding-bottom: $rule-builder--padding-lg;
}
}
.endpoint-tab--parameters form {
margin-left: -7px;
margin-right: -7px;
}
.endpoint-tab--parameters--empty {
align-items: center;
justify-content: center;
@include no-user-select();
p {
margin: 0;
font-size: 16px;
line-height: 23px;
text-align: center;
color: $g12-forge;
strong {
color: $g18-cloud;
font-weight: 900;
}
}
} }