Create a separate options and arguments component for each endpoint type
deniz kusefoglu
parent
a44e9979a2
commit
4b0095fc33
|
|
@ -169,16 +169,6 @@ export function updateAlertNodes(ruleID, alerts) {
|
|||
payload: {ruleID, alerts},
|
||||
}
|
||||
}
|
||||
// export function updateAlertNodes(ruleID, alertNodeName, alertNodesText) {
|
||||
// return {
|
||||
// type: 'UPDATE_RULE_ALERT_NODES',
|
||||
// payload: {
|
||||
// ruleID,
|
||||
// alertNodeName,
|
||||
// alertNodesText,
|
||||
// },
|
||||
// }
|
||||
// }
|
||||
|
||||
export function updateRuleName(ruleID, name) {
|
||||
return {
|
||||
|
|
|
|||
|
|
@ -57,11 +57,11 @@ class RuleMessage extends Component {
|
|||
|
||||
handleAddEndpoint = selectedItem => {
|
||||
const {endpointsOnThisAlert, endpointsOfKind} = this.state
|
||||
const newItemNumbering = _.get(endpointsOfKind, selectedItem.alias, 0) + 1
|
||||
const newItemName = selectedItem.alias + newItemNumbering
|
||||
const newItemNumbering = _.get(endpointsOfKind, selectedItem.type, 0) + 1
|
||||
const newItemName = selectedItem.type + newItemNumbering
|
||||
const newEndpoint = {
|
||||
alias: newItemName,
|
||||
type: selectedItem.alias,
|
||||
type: selectedItem.type,
|
||||
ruleID: selectedItem.ruleID,
|
||||
}
|
||||
this.setState(
|
||||
|
|
|
|||
|
|
@ -1,4 +1,21 @@
|
|||
import React, {Component, PropTypes} from 'react'
|
||||
import {
|
||||
HttpConfig,
|
||||
TcpConfig,
|
||||
ExecConfig,
|
||||
LogConfig,
|
||||
EmailConfig,
|
||||
AlertaConfig,
|
||||
HipchatConfig,
|
||||
OpsgenieConfig,
|
||||
PagerdutyConfig,
|
||||
PushoverConfig,
|
||||
SensuConfig,
|
||||
SlackConfig,
|
||||
TalkConfig,
|
||||
TelegramConfig,
|
||||
VictoropsConfig,
|
||||
} from './configEP'
|
||||
|
||||
import {RULE_ALERT_OPTIONS} from 'src/kapacitor/constants'
|
||||
|
||||
|
|
@ -7,118 +24,47 @@ class RuleMessageOptions extends Component {
|
|||
super(props)
|
||||
}
|
||||
|
||||
getAlertPropertyValue = name => {
|
||||
const {rule} = this.props
|
||||
const {properties} = rule.alertNodes[0]
|
||||
|
||||
if (properties) {
|
||||
const alertNodeProperty = properties.find(
|
||||
property => property.name === name
|
||||
)
|
||||
if (alertNodeProperty) {
|
||||
return alertNodeProperty.args
|
||||
}
|
||||
}
|
||||
return ''
|
||||
}
|
||||
|
||||
handleUpdateDetails = e => {
|
||||
const {updateDetails, rule} = this.props
|
||||
updateDetails(rule.id, e.target.value)
|
||||
}
|
||||
|
||||
handleUpdateAlertNodes = e => {
|
||||
const {handleUpdateArg, selectedEndpoint} = this.props
|
||||
handleUpdateArg(selectedEndpoint, e.target.value)
|
||||
}
|
||||
|
||||
handleUpdateAlertProperty = propertyName => e => {
|
||||
const {updateAlertProperty, alertNode, rule} = this.props
|
||||
updateAlertProperty(rule.id, alertNode, {
|
||||
name: propertyName,
|
||||
args: [e.target.value],
|
||||
})
|
||||
}
|
||||
|
||||
render() {
|
||||
const {rule, selectedEndpoint, handleEditAlert} = this.props
|
||||
const {args, details, properties} = RULE_ALERT_OPTIONS[
|
||||
selectedEndpoint.type
|
||||
]
|
||||
|
||||
return (
|
||||
<div>
|
||||
{args
|
||||
? <div className="rule-section--row rule-section--border-bottom">
|
||||
<p>Optional Alert Parameters:</p>
|
||||
<div className="optional-alert-parameters">
|
||||
<div className="form-group">
|
||||
<input
|
||||
name={args.label}
|
||||
id="alert-input"
|
||||
className="form-control input-sm form-malachite"
|
||||
type="text"
|
||||
placeholder={args.placeholder}
|
||||
onChange={this.handleUpdateAlertNodes}
|
||||
value={selectedEndpoint.args}
|
||||
autoComplete="off"
|
||||
spellCheck="false"
|
||||
/>
|
||||
<label htmlFor={args.label}>
|
||||
{args.label}
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
: null}
|
||||
{properties && properties.length
|
||||
? <div className="rule-section--row rule-section--border-bottom">
|
||||
<p>Optional Alert Parameters:</p>
|
||||
<div className="optional-alert-parameters">
|
||||
{properties.map(({name: propertyName, label, placeholder}) =>
|
||||
<div key={propertyName} className="form-group">
|
||||
<input
|
||||
name={label}
|
||||
className="form-control input-sm form-malachite"
|
||||
type="text"
|
||||
placeholder={placeholder}
|
||||
onChange={this.handleUpdateAlertProperty(propertyName)}
|
||||
value={this.getAlertPropertyValue(propertyName)}
|
||||
autoComplete="off"
|
||||
spellCheck="false"
|
||||
/>
|
||||
<label htmlFor={label}>
|
||||
{label}
|
||||
</label>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
: null}
|
||||
{details
|
||||
? <div className="rule-section--border-bottom">
|
||||
<textarea
|
||||
className="form-control form-malachite monotype rule-builder--message"
|
||||
placeholder={details.placeholder ? details.placeholder : ''}
|
||||
onChange={this.handleUpdateDetails}
|
||||
value={rule.details}
|
||||
spellCheck={false}
|
||||
/>
|
||||
</div>
|
||||
: null}
|
||||
</div>
|
||||
)
|
||||
const {selectedEndpoint} = this.props
|
||||
switch (selectedEndpoint && selectedEndpoint.type) {
|
||||
case 'http':
|
||||
return <HttpConfig />
|
||||
case 'tcp':
|
||||
return <TcpConfig />
|
||||
case 'exec':
|
||||
return <ExecConfig />
|
||||
case 'log':
|
||||
return <LogConfig />
|
||||
case 'smtp':
|
||||
return <SmtpConfig />
|
||||
case 'alerta':
|
||||
return <AlertaConfig />
|
||||
case 'hipchat':
|
||||
return <HipchatConfig />
|
||||
case 'opsgenie':
|
||||
return <OpsgenieConfig />
|
||||
case 'pagerduty':
|
||||
return <PagerdutyConfig />
|
||||
case 'pushover':
|
||||
return <PushoverConfig />
|
||||
case 'sensu':
|
||||
return <SensuConfig />
|
||||
case 'slack':
|
||||
return <SlackConfig />
|
||||
case 'talk':
|
||||
return <TalkConfig />
|
||||
case 'telegram':
|
||||
return <TelegramConfig />
|
||||
case 'victorops':
|
||||
return <VictoropsConfig />
|
||||
default:
|
||||
return null
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const {func, shape} = PropTypes
|
||||
|
||||
RuleMessageOptions.propTypes = {
|
||||
rule: shape({}).isRequired,
|
||||
selectedEndpoint: shape({}),
|
||||
updateAlertNodes: func.isRequired,
|
||||
updateDetails: func.isRequired,
|
||||
updateAlertProperty: func.isRequired,
|
||||
}
|
||||
RuleMessageOptions.propTypes = {}
|
||||
|
||||
export default RuleMessageOptions
|
||||
|
|
|
|||
|
|
@ -0,0 +1,11 @@
|
|||
import React, {PropTypes} from 'react'
|
||||
|
||||
const AlertaConfig = () => {
|
||||
return <div>this is AlertaConfig</div>
|
||||
}
|
||||
|
||||
const {bool, func, shape, string} = PropTypes
|
||||
|
||||
AlertaConfig.propTypes = {}
|
||||
|
||||
export default AlertaConfig
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
import React, {PropTypes} from 'react'
|
||||
|
||||
const ExecConfig = () => {
|
||||
return <div>this is ExecConfig</div>
|
||||
}
|
||||
|
||||
const {bool, func, shape, string} = PropTypes
|
||||
|
||||
ExecConfig.propTypes = {}
|
||||
|
||||
export default ExecConfig
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
import React, {PropTypes} from 'react'
|
||||
|
||||
const HipchatConfig = () => {
|
||||
return <div>this is HipchatConfig</div>
|
||||
}
|
||||
|
||||
const {bool, func, shape, string} = PropTypes
|
||||
|
||||
HipchatConfig.propTypes = {}
|
||||
|
||||
export default HipchatConfig
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
import React, {PropTypes} from 'react'
|
||||
|
||||
const HttpConfig = () => {
|
||||
return <div>this is HttpConfig</div>
|
||||
}
|
||||
|
||||
const {bool, func, shape, string} = PropTypes
|
||||
|
||||
HttpConfig.propTypes = {}
|
||||
|
||||
export default HttpConfig
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
import React, {PropTypes} from 'react'
|
||||
|
||||
const LogConfig = () => {
|
||||
return <div>this is LogConfig</div>
|
||||
}
|
||||
|
||||
const {bool, func, shape, string} = PropTypes
|
||||
|
||||
LogConfig.propTypes = {}
|
||||
|
||||
export default LogConfig
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
import React, {PropTypes} from 'react'
|
||||
|
||||
const OpsgenieConfig = () => {
|
||||
return <div>this is OpsgenieConfig</div>
|
||||
}
|
||||
|
||||
const {bool, func, shape, string} = PropTypes
|
||||
|
||||
OpsgenieConfig.propTypes = {}
|
||||
|
||||
export default OpsgenieConfig
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
import React, {PropTypes} from 'react'
|
||||
|
||||
const PagerdutyConfig = () => {
|
||||
return <div>this is PagerdutyConfig</div>
|
||||
}
|
||||
|
||||
const {bool, func, shape, string} = PropTypes
|
||||
|
||||
PagerdutyConfig.propTypes = {}
|
||||
|
||||
export default PagerdutyConfig
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
import React, {PropTypes} from 'react'
|
||||
|
||||
const PushoverConfig = () => {
|
||||
return <div>this is PushoverConfig</div>
|
||||
}
|
||||
|
||||
const {bool, func, shape, string} = PropTypes
|
||||
|
||||
PushoverConfig.propTypes = {}
|
||||
|
||||
export default PushoverConfig
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
import React, {PropTypes} from 'react'
|
||||
|
||||
const SMTPConfig = () => {
|
||||
return <div>this is SMTPConfig</div>
|
||||
}
|
||||
|
||||
const {bool, func, shape, string} = PropTypes
|
||||
|
||||
SMTPConfig.propTypes = {}
|
||||
|
||||
export default SMTPConfig
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
import React, {PropTypes} from 'react'
|
||||
|
||||
const SensuConfig = () => {
|
||||
return <div>this is SensuConfig</div>
|
||||
}
|
||||
|
||||
const {bool, func, shape, string} = PropTypes
|
||||
|
||||
SensuConfig.propTypes = {}
|
||||
|
||||
export default SensuConfig
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
import React, {PropTypes} from 'react'
|
||||
|
||||
const SlackConfig = () => {
|
||||
return <div>this is SlackConfig</div>
|
||||
}
|
||||
|
||||
const {bool, func, shape, string} = PropTypes
|
||||
|
||||
SlackConfig.propTypes = {}
|
||||
|
||||
export default SlackConfig
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
import React, {PropTypes} from 'react'
|
||||
|
||||
const TalkConfig = () => {
|
||||
return <div>this is TalkConfig</div>
|
||||
}
|
||||
|
||||
const {bool, func, shape, string} = PropTypes
|
||||
|
||||
TalkConfig.propTypes = {}
|
||||
|
||||
export default TalkConfig
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
import React, {PropTypes} from 'react'
|
||||
|
||||
const TcpConfig = () => {
|
||||
return <div>this is TcpConfig</div>
|
||||
}
|
||||
|
||||
const {bool, func, shape, string} = PropTypes
|
||||
|
||||
TcpConfig.propTypes = {}
|
||||
|
||||
export default TcpConfig
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
import React, {PropTypes} from 'react'
|
||||
|
||||
const TelegrafConfig = () => {
|
||||
return <div>this is TelegrafConfig</div>
|
||||
}
|
||||
|
||||
const {bool, func, shape, string} = PropTypes
|
||||
|
||||
TelegrafConfig.propTypes = {}
|
||||
|
||||
export default TelegrafConfig
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
import React, {PropTypes} from 'react'
|
||||
|
||||
const VictoropsConfig = () => {
|
||||
return <div>this is VictoropsConfig</div>
|
||||
}
|
||||
|
||||
const {bool, func, shape, string} = PropTypes
|
||||
|
||||
VictoropsConfig.propTypes = {}
|
||||
|
||||
export default VictoropsConfig
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
import HttpConfig from './HttpConfig'
|
||||
import TcpConfig from './TcpConfig'
|
||||
import ExecConfig from './ExecConfig'
|
||||
import LogConfig from './LogConfig'
|
||||
import AlertaConfig from './AlertaConfig'
|
||||
import HipchatConfig from './HipchatConfig'
|
||||
import OpsgenieConfig from './OpsgenieConfig'
|
||||
import PagerdutyConfig from './PagerdutyConfig'
|
||||
import PushoverConfig from './PushoverConfig'
|
||||
import SensuConfig from './SensuConfig'
|
||||
import SlackConfig from './SlackConfig'
|
||||
import SMTPConfig from './SMTPConfig'
|
||||
import TalkConfig from './TalkConfig'
|
||||
import TelegramConfig from './TelegramConfig'
|
||||
import VictoropsConfig from './VictoropsConfig'
|
||||
|
||||
export {
|
||||
HttpConfig,
|
||||
TcpConfig,
|
||||
ExecConfig,
|
||||
LogConfig,
|
||||
SMTPConfig,
|
||||
AlertaConfig,
|
||||
HipchatConfig,
|
||||
OpsgenieConfig,
|
||||
PagerdutyConfig,
|
||||
PushoverConfig,
|
||||
SensuConfig,
|
||||
SlackConfig,
|
||||
TalkConfig,
|
||||
TelegramConfig,
|
||||
VictoropsConfig,
|
||||
}
|
||||
Loading…
Reference in New Issue