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

Refactor AlertTabs for typing

pull/10616/head
Iris Scholten 2018-05-14 16:57:09 -07:00
parent 2674f27d17
commit d5bb9902fa
18 changed files with 405 additions and 350 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

438
ui/src/kapacitor/components/AlertTabs.tsx
View File

@ -46,8 +46,14 @@ import {
import DeprecationWarning from 'src/admin/components/DeprecationWarning' import DeprecationWarning from 'src/admin/components/DeprecationWarning'
import {ErrorHandling} from 'src/shared/decorators/errors' import {ErrorHandling} from 'src/shared/decorators/errors'
import {Source, Kapacitor, NotificationFunc} from 'src/types' import {Source, Kapacitor} from 'src/types'
import {ServiceProperties} from 'src/types/kapacitor'
import SlackConfigs from 'src/kapacitor/components/config/SlackConfigs' import SlackConfigs from 'src/kapacitor/components/config/SlackConfigs'
import {
AlertDisplayText,
SupportedServices,
AlertTypes,
} from 'src/kapacitor/constants'
interface Service { interface Service {
link: Link link: Link
@ -94,30 +100,6 @@ interface Sections {
victorops: Section victorops: Section
} }
interface Config {
type: string
enabled: boolean
renderComponent: () => JSX.Element
notify?: (message: Notification | NotificationFunc) => void
}
interface SupportedConfig {
alerta: Config
hipchat: Config
kafka: Config
opsgenie: Config
opsgenie2: Config
pagerduty: Config
pagerduty2: Config
pushover: Config
sensu: Config
slack: Config
smtp: Config
talk: Config
telegram: Config
victorops: Config
}
interface Notification { interface Notification {
id?: string id?: string
type: string type: string
@ -177,11 +159,11 @@ class AlertTabs extends PureComponent<Props, State> {
const pagerDutyV1Enabled: boolean = this.getConfigEnabled( const pagerDutyV1Enabled: boolean = this.getConfigEnabled(
configSections, configSections,
'pagerduty' AlertTypes.pagerduty
) )
const opsGenieV1Enabled: boolean = this.getConfigEnabled( const opsGenieV1Enabled: boolean = this.getConfigEnabled(
configSections, configSections,
'opsgenie' AlertTypes.opsgenie
) )
const pagerDutyDeprecationMessage: JSX.Element = ( const pagerDutyDeprecationMessage: JSX.Element = (
@ -206,181 +188,6 @@ class AlertTabs extends PureComponent<Props, State> {
</div> </div>
) )
const supportedConfigs: SupportedConfig = {
alerta: {
type: 'Alerta',
enabled: this.getConfigEnabled(configSections, 'alerta'),
renderComponent: () => (
<AlertaConfig
onSave={this.handleSaveConfig('alerta')}
config={this.getSectionElement(configSections, 'alerta')}
onTest={this.handleTestConfig('alerta')}
enabled={this.getConfigEnabled(configSections, 'alerta')}
/>
),
},
hipchat: {
type: 'HipChat',
enabled: this.getConfigEnabled(configSections, 'hipchat'),
renderComponent: () => (
<HipChatConfig
onSave={this.handleSaveConfig('hipchat')}
config={this.getSectionElement(configSections, 'hipchat')}
onTest={this.handleTestConfig('hipchat')}
enabled={this.getConfigEnabled(configSections, 'hipchat')}
/>
),
},
kafka: {
type: 'Kafka',
enabled: this.getConfigEnabled(configSections, 'kafka'),
renderComponent: () => (
<KafkaConfig
onSave={this.handleSaveConfig('kafka')}
config={this.getSectionElement(configSections, 'kafka')}
onTest={this.handleTestConfig('kafka', {
cluster: this.getProperty(configSections, 'kafka', 'id'),
})}
enabled={this.getConfigEnabled(configSections, 'kafka')}
notify={this.props.notify}
/>
),
},
opsgenie: {
type: 'OpsGenie',
enabled: this.getConfigEnabled(configSections, 'opsgenie'),
renderComponent: () => (
<OpsGenieConfig
onSave={this.handleSaveConfig('opsgenie')}
config={this.getSectionElement(configSections, 'opsgenie')}
onTest={this.handleTestConfig('opsgenie')}
enabled={this.getConfigEnabled(configSections, 'opsgenie')}
/>
),
},
opsgenie2: {
type: 'OpsGenie2',
enabled: this.getConfigEnabled(configSections, 'opsgenie2'),
renderComponent: () => (
<OpsGenieConfig
onSave={this.handleSaveConfig('opsgenie2')}
config={this.getSectionElement(configSections, 'opsgenie2')}
onTest={this.handleTestConfig('opsgenie2')}
enabled={this.getConfigEnabled(configSections, 'opsgenie2')}
/>
),
},
pagerduty: {
type: 'PagerDuty',
enabled: this.getConfigEnabled(configSections, 'pagerduty'),
renderComponent: () => (
<PagerDutyConfig
onSave={this.handleSaveConfig('pagerduty')}
config={this.getSectionElement(configSections, 'pagerduty')}
onTest={this.handleTestConfig('pagerduty')}
enabled={this.getConfigEnabled(configSections, 'pagerduty')}
/>
),
},
pagerduty2: {
type: 'PagerDuty2',
enabled: this.getConfigEnabled(configSections, 'pagerduty2'),
renderComponent: () => (
<PagerDuty2Config
onSave={this.handleSaveConfig('pagerduty2')}
config={this.getSectionElement(configSections, 'pagerduty2')}
onTest={this.handleTestConfig('pagerduty2')}
enabled={this.getConfigEnabled(configSections, 'pagerduty2')}
/>
),
},
pushover: {
type: 'Pushover',
enabled: this.getConfigEnabled(configSections, 'pushover'),
renderComponent: () => (
<PushoverConfig
onSave={this.handleSaveConfig('pushover')}
config={this.getSectionElement(configSections, 'pushover')}
onTest={this.handleTestConfig('pushover')}
enabled={this.getConfigEnabled(configSections, 'pushover')}
/>
),
},
sensu: {
type: 'Sensu',
enabled: this.getConfigEnabled(configSections, 'sensu'),
renderComponent: () => (
<SensuConfig
onSave={this.handleSaveConfig('sensu')}
config={this.getSectionElement(configSections, 'sensu')}
onTest={this.handleTestConfig('sensu')}
enabled={this.getConfigEnabled(configSections, 'sensu')}
/>
),
},
slack: {
type: 'Slack',
enabled: this.getConfigEnabled(configSections, 'slack'),
renderComponent: () => (
<SlackConfigs
configs={this.getSectionElements(configSections, 'slack')}
onSave={this.handleSaveConfig('slack')}
onTest={this.handleTestConfig('slack')}
onDelete={this.handleDeleteConfig('slack')}
onEnabled={this.getSpecificConfigEnabled(configSections, 'slack')}
/>
),
},
smtp: {
type: 'SMTP',
enabled: this.getConfigEnabled(configSections, 'smtp'),
renderComponent: () => (
<SMTPConfig
onSave={this.handleSaveConfig('smtp')}
config={this.getSectionElement(configSections, 'smtp')}
onTest={this.handleTestConfig('smtp')}
enabled={this.getConfigEnabled(configSections, 'smtp')}
/>
),
},
talk: {
type: 'Talk',
enabled: this.getConfigEnabled(configSections, 'talk'),
renderComponent: () => (
<TalkConfig
onSave={this.handleSaveConfig('talk')}
config={this.getSectionElement(configSections, 'talk')}
onTest={this.handleTestConfig('talk')}
enabled={this.getConfigEnabled(configSections, 'talk')}
/>
),
},
telegram: {
type: 'Telegram',
enabled: this.getConfigEnabled(configSections, 'telegram'),
renderComponent: () => (
<TelegramConfig
onSave={this.handleSaveConfig('telegram')}
config={this.getSectionElement(configSections, 'telegram')}
onTest={this.handleTestConfig('telegram')}
enabled={this.getConfigEnabled(configSections, 'telegram')}
/>
),
},
victorops: {
type: 'VictorOps',
enabled: this.getConfigEnabled(configSections, 'victorops'),
renderComponent: () => (
<VictorOpsConfig
onSave={this.handleSaveConfig('victorops')}
config={this.getSectionElement(configSections, 'victorops')}
onTest={this.handleTestConfig('victorops')}
enabled={this.getConfigEnabled(configSections, 'victorops')}
/>
),
},
}
return ( return (
<div className="panel"> <div className="panel">
<div className="panel-heading"> <div className="panel-heading">
@ -395,22 +202,23 @@ class AlertTabs extends PureComponent<Props, State> {
<Tabs <Tabs
tabContentsClass="config-endpoint" tabContentsClass="config-endpoint"
initialIndex={this.getInitialIndex(supportedConfigs, hash)} initialIndex={this.getInitialIndex(hash)}
> >
<TabList customClass="config-endpoint--tabs"> <TabList customClass="config-endpoint--tabs">
{_.reduce( {_.reduce(
configSections, configSections,
(acc, __, k) => { (acc, __, k) => {
return this.isSupportedService(supportedConfigs[k]) if (this.isSupportedService(k)) {
? acc.concat( return acc.concat(
<Tab <Tab
key={supportedConfigs[k].type} key={k}
isConfigured={supportedConfigs[k].enabled} isConfigured={this.getConfigEnabled(configSections, k)}
> >
{supportedConfigs[k].type} {AlertDisplayText[k]}
</Tab> </Tab>
) )
: acc }
return acc
}, },
[] []
)} )}
@ -418,14 +226,14 @@ class AlertTabs extends PureComponent<Props, State> {
<TabPanels customClass="config-endpoint--tab-contents"> <TabPanels customClass="config-endpoint--tab-contents">
{_.reduce( {_.reduce(
configSections, configSections,
(acc, __, k) => (acc, __, k) => {
this.isSupportedService(supportedConfigs[k]) if (this.isSupportedService(k)) {
? acc.concat( return acc.concat(
<TabPanel key={supportedConfigs[k].type}> <TabPanel key={k}>{this.getConfig(k)}</TabPanel>
{supportedConfigs[k].renderComponent()}
</TabPanel>
) )
: acc, }
return acc
},
[] []
)} )}
</TabPanels> </TabPanels>
@ -434,6 +242,169 @@ class AlertTabs extends PureComponent<Props, State> {
) )
} }
private getConfig(config: string): JSX.Element {
const {configSections} = this.state
switch (config) {
case AlertTypes.alerta:
return (
<AlertaConfig
onSave={this.handleSaveConfig(AlertTypes.alerta)}
config={this.getSectionElement(configSections, AlertTypes.alerta)}
onTest={this.handleTestConfig(AlertTypes.alerta)}
enabled={this.getConfigEnabled(configSections, AlertTypes.alerta)}
/>
)
case AlertTypes.hipchat:
return (
<HipChatConfig
onSave={this.handleSaveConfig(AlertTypes.hipchat)}
config={this.getSectionElement(configSections, AlertTypes.hipchat)}
onTest={this.handleTestConfig(AlertTypes.hipchat)}
enabled={this.getConfigEnabled(configSections, AlertTypes.hipchat)}
/>
)
case AlertTypes.kafka:
return (
<KafkaConfig
onSave={this.handleSaveConfig(AlertTypes.kafka)}
config={this.getSectionElement(configSections, AlertTypes.kafka)}
onTest={this.handleTestConfig(AlertTypes.kafka, {
cluster: this.getProperty(configSections, AlertTypes.kafka, 'id'),
})}
enabled={this.getConfigEnabled(configSections, AlertTypes.kafka)}
notify={this.props.notify}
/>
)
case AlertTypes.opsgenie:
return (
<OpsGenieConfig
onSave={this.handleSaveConfig(AlertTypes.opsgenie)}
config={this.getSectionElement(configSections, AlertTypes.opsgenie)}
onTest={this.handleTestConfig(AlertTypes.opsgenie)}
enabled={this.getConfigEnabled(configSections, AlertTypes.opsgenie)}
/>
)
case AlertTypes.opsgenie2:
return (
<OpsGenieConfig
onSave={this.handleSaveConfig(AlertTypes.opsgenie2)}
config={this.getSectionElement(
configSections,
AlertTypes.opsgenie2
)}
onTest={this.handleTestConfig(AlertTypes.opsgenie2)}
enabled={this.getConfigEnabled(
configSections,
AlertTypes.opsgenie2
)}
/>
)
case AlertTypes.pagerduty:
return (
<PagerDutyConfig
onSave={this.handleSaveConfig(AlertTypes.pagerduty)}
config={this.getSectionElement(
configSections,
AlertTypes.pagerduty
)}
onTest={this.handleTestConfig(AlertTypes.pagerduty)}
enabled={this.getConfigEnabled(
configSections,
AlertTypes.pagerduty
)}
/>
)
case AlertTypes.pagerduty2:
return (
<PagerDuty2Config
onSave={this.handleSaveConfig(AlertTypes.pagerduty2)}
config={this.getSectionElement(
configSections,
AlertTypes.pagerduty2
)}
onTest={this.handleTestConfig(AlertTypes.pagerduty2)}
enabled={this.getConfigEnabled(
configSections,
AlertTypes.pagerduty2
)}
/>
)
case AlertTypes.pushover:
return (
<PushoverConfig
onSave={this.handleSaveConfig(AlertTypes.pushover)}
config={this.getSectionElement(configSections, AlertTypes.pushover)}
onTest={this.handleTestConfig(AlertTypes.pushover)}
enabled={this.getConfigEnabled(configSections, AlertTypes.pushover)}
/>
)
case AlertTypes.sensu:
return (
<SensuConfig
onSave={this.handleSaveConfig(AlertTypes.sensu)}
config={this.getSectionElement(configSections, AlertTypes.sensu)}
onTest={this.handleTestConfig(AlertTypes.sensu)}
enabled={this.getConfigEnabled(configSections, AlertTypes.sensu)}
/>
)
case AlertTypes.slack:
return (
<SlackConfigs
configs={this.getSectionElements(configSections, AlertTypes.slack)}
onSave={this.handleSaveConfig(AlertTypes.slack)}
onTest={this.handleTestConfig(AlertTypes.slack)}
onDelete={this.handleDeleteConfig(AlertTypes.slack)}
onEnabled={this.getSpecificConfigEnabled(
configSections,
AlertTypes.slack
)}
/>
)
case AlertTypes.smtp:
return (
<SMTPConfig
onSave={this.handleSaveConfig(AlertTypes.smtp)}
config={this.getSectionElement(configSections, AlertTypes.smtp)}
onTest={this.handleTestConfig(AlertTypes.smtp)}
enabled={this.getConfigEnabled(configSections, AlertTypes.smtp)}
/>
)
case AlertTypes.talk:
return (
<TalkConfig
onSave={this.handleSaveConfig(AlertTypes.talk)}
config={this.getSectionElement(configSections, AlertTypes.talk)}
onTest={this.handleTestConfig(AlertTypes.talk)}
enabled={this.getConfigEnabled(configSections, AlertTypes.talk)}
/>
)
case AlertTypes.telegram:
return (
<TelegramConfig
onSave={this.handleSaveConfig(AlertTypes.telegram)}
config={this.getSectionElement(configSections, AlertTypes.telegram)}
onTest={this.handleTestConfig(AlertTypes.telegram)}
enabled={this.getConfigEnabled(configSections, AlertTypes.telegram)}
/>
)
case AlertTypes.victorops:
return (
<VictorOpsConfig
onSave={this.handleSaveConfig(AlertTypes.victorops)}
config={this.getSectionElement(
configSections,
AlertTypes.victorops
)}
onTest={this.handleTestConfig(AlertTypes.victorops)}
enabled={this.getConfigEnabled(
configSections,
AlertTypes.victorops
)}
/>
)
}
}
private refreshKapacitorConfig = async ( private refreshKapacitorConfig = async (
kapacitor: Kapacitor kapacitor: Kapacitor
): Promise<void> => { ): Promise<void> => {
@ -497,7 +468,7 @@ class AlertTabs extends PureComponent<Props, State> {
} }
private handleSaveConfig = (section: string) => async ( private handleSaveConfig = (section: string) => async (
properties, properties: ServiceProperties,
isNewConfigInSection?: boolean, isNewConfigInSection?: boolean,
specificConfig?: string specificConfig?: string
): Promise<boolean> => { ): Promise<boolean> => {
@ -575,7 +546,10 @@ class AlertTabs extends PureComponent<Props, State> {
} }
} }
private sanitizeProperties = (section: string, properties: Props): Props => { private sanitizeProperties = (
section: string,
properties: ServiceProperties
): ServiceProperties => {
const cleanProps = {enabled: true, ...properties} const cleanProps = {enabled: true, ...properties}
const {redacted} = this.getSectionElement( const {redacted} = this.getSectionElement(
this.state.configSections, this.state.configSections,
@ -592,21 +566,29 @@ class AlertTabs extends PureComponent<Props, State> {
return cleanProps return cleanProps
} }
private getInitialIndex = ( private getInitialIndex = (hash: string): number => {
supportedConfigs: SupportedConfig, const index = _.indexOf(_.keys(SupportedServices), _.replace(hash, '#', ''))
hash: string
): number => {
const index = _.indexOf(_.keys(supportedConfigs), _.replace(hash, '#', ''))
return index >= 0 ? index : 0 return index >= 0 ? index : 0
} }
private isSupportedService = config => { private isSupportedService = (serviceType: string): boolean => {
return ( const {services, configSections} = this.state
config && const foundKapacitorService: Service = services.find(service => {
this.state.services.find(service => { return service.name === serviceType
return service.name === _.toLower(config.type)
}) })
const foundSupportedService: string = SupportedServices.find(
service => service === serviceType
) )
const foundSection: Section = _.get(configSections, serviceType, undefined)
const isSupported: boolean =
!_.isUndefined(foundKapacitorService) &&
!_.isUndefined(foundSupportedService) &&
!_.isUndefined(foundSection)
return isSupported
} }
} }

11
ui/src/kapacitor/components/config/AlertaConfig.tsx
View File

@ -4,12 +4,7 @@ import React, {PureComponent, ChangeEvent} from 'react'
import RedactedInput from 'src/kapacitor/components/config/RedactedInput' import RedactedInput from 'src/kapacitor/components/config/RedactedInput'
import {ErrorHandling} from 'src/shared/decorators/errors' import {ErrorHandling} from 'src/shared/decorators/errors'
interface Properties { import {AlertaProperties} from 'src/types/kapacitor'
environment: string
origin: string
token: string
url: string
}
interface Config { interface Config {
options: { options: {
@ -23,7 +18,7 @@ interface Config {
interface Props { interface Props {
config: Config config: Config
onSave: (properties: Properties) => void onSave: (properties: AlertaProperties) => void
onTest: (event: React.MouseEvent<HTMLButtonElement>) => void onTest: (event: React.MouseEvent<HTMLButtonElement>) => void
enabled: boolean enabled: boolean
} }
@ -143,7 +138,7 @@ class AlertaConfig extends PureComponent<Props, State> {
private handleSubmit = async e => { private handleSubmit = async e => {
e.preventDefault() e.preventDefault()
const properties = { const properties: AlertaProperties = {
environment: this.environment.value, environment: this.environment.value,
origin: this.origin.value, origin: this.origin.value,
token: this.token.value, token: this.token.value,

10
ui/src/kapacitor/components/config/HipChatConfig.tsx
View File

@ -6,11 +6,7 @@ import {HIPCHAT_TOKEN_TIP} from 'src/kapacitor/copy'
import RedactedInput from 'src/kapacitor/components/config/RedactedInput' import RedactedInput from 'src/kapacitor/components/config/RedactedInput'
import {ErrorHandling} from 'src/shared/decorators/errors' import {ErrorHandling} from 'src/shared/decorators/errors'
interface Properties { import {HipChatProperties} from 'src/types/kapacitor'
room: string
url: string
token: string
}
interface Config { interface Config {
options: { options: {
@ -23,7 +19,7 @@ interface Config {
interface Props { interface Props {
config: Config config: Config
onSave: (properties: Properties) => void onSave: (properties: HipChatProperties) => void
onTest: (event: React.MouseEvent<HTMLButtonElement>) => void onTest: (event: React.MouseEvent<HTMLButtonElement>) => void
enabled: boolean enabled: boolean
} }
@ -140,7 +136,7 @@ class HipchatConfig extends PureComponent<Props, State> {
private handleSubmit = async e => { private handleSubmit = async e => {
e.preventDefault() e.preventDefault()
const properties = { const properties: HipChatProperties = {
room: this.room.value, room: this.room.value,
url: `https://${this.url.value}.hipchat.com/v2/room`, url: `https://${this.url.value}.hipchat.com/v2/room`,
token: this.token.value, token: this.token.value,

17
ui/src/kapacitor/components/config/KafkaConfig.tsx
View File

@ -5,22 +5,11 @@ import {ErrorHandling} from 'src/shared/decorators/errors'
import {Notification, NotificationFunc} from 'src/types' import {Notification, NotificationFunc} from 'src/types'
import {KafkaProperties} from 'src/types/kapacitor'
import {notifyInvalidBatchSizeValue} from 'src/shared/copy/notifications' import {notifyInvalidBatchSizeValue} from 'src/shared/copy/notifications'
interface Properties {
brokers: string[]
timeout: string
'batch-size': number
'batch-timeout': string
'use-ssl': boolean
'ssl-ca': string
'ssl-cert': string
'ssl-key': string
'insecure-skip-verify': boolean
}
interface Config { interface Config {
options: Properties & { options: KafkaProperties & {
id: string id: string
} }
} }
@ -31,7 +20,7 @@ interface Item {
interface Props { interface Props {
config: Config config: Config
onSave: (properties: Properties) => void onSave: (properties: KafkaProperties) => void
onTest: (event: React.MouseEvent<HTMLButtonElement>) => void onTest: (event: React.MouseEvent<HTMLButtonElement>) => void
enabled: boolean enabled: boolean
notify: (message: Notification | NotificationFunc) => void notify: (message: Notification | NotificationFunc) => void

10
ui/src/kapacitor/components/config/OpsGenieConfig.tsx
View File

@ -5,11 +5,7 @@ import RedactedInput from 'src/kapacitor/components/config/RedactedInput'
import TagInput from 'src/shared/components/TagInput' import TagInput from 'src/shared/components/TagInput'
import {ErrorHandling} from 'src/shared/decorators/errors' import {ErrorHandling} from 'src/shared/decorators/errors'
interface Properties { import {OpsGenieProperties} from 'src/types/kapacitor'
'api-key': string
teams: string[]
recipients: string[]
}
interface Config { interface Config {
options: { options: {
@ -26,7 +22,7 @@ interface Item {
interface Props { interface Props {
config: Config config: Config
onSave: (properties: Properties) => void onSave: (properties: OpsGenieProperties) => void
onTest: (event: React.MouseEvent<HTMLButtonElement>) => void onTest: (event: React.MouseEvent<HTMLButtonElement>) => void
enabled: boolean enabled: boolean
} }
@ -140,7 +136,7 @@ class OpsGenieConfig extends PureComponent<Props, State> {
private handleSubmit = async e => { private handleSubmit = async e => {
e.preventDefault() e.preventDefault()
const properties = { const properties: OpsGenieProperties = {
'api-key': this.apiKey.value, 'api-key': this.apiKey.value,
teams: this.state.currentTeams, teams: this.state.currentTeams,
recipients: this.state.currentRecipients, recipients: this.state.currentRecipients,

10
ui/src/kapacitor/components/config/PagerDuty2Config.tsx
View File

@ -3,11 +3,7 @@ import React, {PureComponent, ChangeEvent} from 'react'
import RedactedInput from 'src/kapacitor/components/config/RedactedInput' import RedactedInput from 'src/kapacitor/components/config/RedactedInput'
import {ErrorHandling} from 'src/shared/decorators/errors' import {ErrorHandling} from 'src/shared/decorators/errors'
interface Properties { import {PagerDuty2Properties} from 'src/types/kapacitor'
'routing-key': string
url: string
enabled: boolean
}
interface Config { interface Config {
options: { options: {
@ -19,7 +15,7 @@ interface Config {
interface Props { interface Props {
config: Config config: Config
onSave: (properties: Properties) => void onSave: (properties: PagerDuty2Properties) => void
onTest: (event: React.MouseEvent<HTMLButtonElement>) => void onTest: (event: React.MouseEvent<HTMLButtonElement>) => void
enabled: boolean enabled: boolean
} }
@ -120,7 +116,7 @@ class PagerDuty2Config extends PureComponent<Props, State> {
): Promise<void> => { ): Promise<void> => {
e.preventDefault() e.preventDefault()
const properties: Properties = { const properties: PagerDuty2Properties = {
'routing-key': this.routingKey.value, 'routing-key': this.routingKey.value,
url: this.url.value, url: this.url.value,
enabled: this.state.enabled, enabled: this.state.enabled,

9
ui/src/kapacitor/components/config/PagerDutyConfig.tsx
View File

@ -3,10 +3,7 @@ import React, {PureComponent, ChangeEvent} from 'react'
import RedactedInput from 'src/kapacitor/components/config/RedactedInput' import RedactedInput from 'src/kapacitor/components/config/RedactedInput'
import {ErrorHandling} from 'src/shared/decorators/errors' import {ErrorHandling} from 'src/shared/decorators/errors'
interface Properties { import {PagerDutyProperties} from 'src/types/kapacitor'
'service-key': string
url: string
}
interface Config { interface Config {
options: { options: {
@ -18,7 +15,7 @@ interface Config {
interface Props { interface Props {
config: Config config: Config
onSave: (properties: Properties) => void onSave: (properties: PagerDutyProperties) => void
onTest: (event: React.MouseEvent<HTMLButtonElement>) => void onTest: (event: React.MouseEvent<HTMLButtonElement>) => void
enabled: boolean enabled: boolean
} }
@ -116,7 +113,7 @@ class PagerDutyConfig extends PureComponent<Props, State> {
private handleSubmit = async e => { private handleSubmit = async e => {
e.preventDefault() e.preventDefault()
const properties = { const properties: PagerDutyProperties = {
'service-key': this.serviceKey.value, 'service-key': this.serviceKey.value,
url: this.url.value, url: this.url.value,
enabled: this.state.enabled, enabled: this.state.enabled,

11
ui/src/kapacitor/components/config/PushoverConfig.tsx
View File

@ -6,12 +6,7 @@ import RedactedInput from 'src/kapacitor/components/config/RedactedInput'
import {ErrorHandling} from 'src/shared/decorators/errors' import {ErrorHandling} from 'src/shared/decorators/errors'
import {PUSHOVER_DOCS_LINK} from 'src/kapacitor/copy' import {PUSHOVER_DOCS_LINK} from 'src/kapacitor/copy'
import {PushoverProperties} from 'src/types/kapacitor'
interface Properties {
token: string
url: string
'user-key': string
}
interface Config { interface Config {
options: { options: {
@ -24,7 +19,7 @@ interface Config {
interface Props { interface Props {
config: Config config: Config
onSave: (properties: Properties) => void onSave: (properties: PushoverProperties) => void
onTest: (event: React.MouseEvent<HTMLButtonElement>) => void onTest: (event: React.MouseEvent<HTMLButtonElement>) => void
enabled: boolean enabled: boolean
} }
@ -144,7 +139,7 @@ class PushoverConfig extends PureComponent<Props, State> {
private handleSubmit = async e => { private handleSubmit = async e => {
e.preventDefault() e.preventDefault()
const properties = { const properties: PushoverProperties = {
token: this.token.value, token: this.token.value,
url: this.url.value, url: this.url.value,
'user-key': this.userKey.value, 'user-key': this.userKey.value,

14
ui/src/kapacitor/components/config/SMTPConfig.tsx
View File

@ -1,15 +1,7 @@
import _ from 'lodash' import _ from 'lodash'
import React, {PureComponent, ChangeEvent} from 'react' import React, {PureComponent, ChangeEvent} from 'react'
import {ErrorHandling} from 'src/shared/decorators/errors' import {ErrorHandling} from 'src/shared/decorators/errors'
import {SMTPProperties} from 'src/types/kapacitor'
interface Properties {
host: string
port: string
from: string
to: string[]
username: string
password: string
}
interface Config { interface Config {
options: { options: {
@ -25,7 +17,7 @@ interface Config {
interface Props { interface Props {
config: Config config: Config
onSave: (properties: Properties) => void onSave: (properties: SMTPProperties) => void
onTest: (event: React.MouseEvent<HTMLButtonElement>) => void onTest: (event: React.MouseEvent<HTMLButtonElement>) => void
enabled: boolean enabled: boolean
} }
@ -178,7 +170,7 @@ class SMTPConfig extends PureComponent<Props, State> {
private handleSubmit = async e => { private handleSubmit = async e => {
e.preventDefault() e.preventDefault()
const properties = { const properties: SMTPProperties = {
host: this.host.value, host: this.host.value,
port: this.port.value, port: this.port.value,
from: this.from.value, from: this.from.value,

10
ui/src/kapacitor/components/config/SensuConfig.tsx
View File

@ -1,11 +1,7 @@
import _ from 'lodash' import _ from 'lodash'
import React, {PureComponent, ChangeEvent} from 'react' import React, {PureComponent, ChangeEvent} from 'react'
import {ErrorHandling} from 'src/shared/decorators/errors' import {ErrorHandling} from 'src/shared/decorators/errors'
import {SensuProperties} from 'src/types/kapacitor'
interface Properties {
source: string
addr: string
}
interface Config { interface Config {
options: { options: {
@ -17,7 +13,7 @@ interface Config {
interface Props { interface Props {
config: Config config: Config
onSave: (properties: Properties) => void onSave: (properties: SensuProperties) => void
onTest: (event: React.MouseEvent<HTMLButtonElement>) => void onTest: (event: React.MouseEvent<HTMLButtonElement>) => void
enabled: boolean enabled: boolean
} }
@ -112,7 +108,7 @@ class SensuConfig extends PureComponent<Props, State> {
private handleSubmit = async e => { private handleSubmit = async e => {
e.preventDefault() e.preventDefault()
const properties = { const properties: SensuProperties = {
source: this.source.value, source: this.source.value,
addr: this.addr.value, addr: this.addr.value,
enabled: this.state.enabled, enabled: this.state.enabled,

12
ui/src/kapacitor/components/config/SlackConfig.tsx
View File

@ -2,13 +2,7 @@ import _ from 'lodash'
import React, {PureComponent, ChangeEvent, MouseEvent} from 'react' import React, {PureComponent, ChangeEvent, MouseEvent} from 'react'
import RedactedInput from 'src/kapacitor/components/config/RedactedInput' import RedactedInput from 'src/kapacitor/components/config/RedactedInput'
import {ErrorHandling} from 'src/shared/decorators/errors' import {ErrorHandling} from 'src/shared/decorators/errors'
import {SlackProperties} from 'src/types/kapacitor'
interface Properties {
channel: string
url: string
workspace?: string
enabled: boolean
}
interface Config { interface Config {
options: { options: {
@ -21,7 +15,7 @@ interface Config {
interface Props { interface Props {
config: Config config: Config
onSave: ( onSave: (
properties: Properties, properties: SlackProperties,
isNewConfigInSection: boolean, isNewConfigInSection: boolean,
specificConfig: string specificConfig: string
) => void ) => void
@ -207,7 +201,7 @@ class SlackConfig extends PureComponent<Props, State> {
private handleSubmit = async e => { private handleSubmit = async e => {
const {isNewConfig} = this.props const {isNewConfig} = this.props
e.preventDefault() e.preventDefault()
const properties: Properties = { const properties: SlackProperties = {
url: this.url.value, url: this.url.value,
channel: this.channel.value, channel: this.channel.value,
enabled: this.state.enabled, enabled: this.state.enabled,

9
ui/src/kapacitor/components/config/SlackConfigs.tsx
View File

@ -3,12 +3,7 @@ import _ from 'lodash'
import {ErrorHandling} from 'src/shared/decorators/errors' import {ErrorHandling} from 'src/shared/decorators/errors'
import SlackConfig from 'src/kapacitor/components/config/SlackConfig' import SlackConfig from 'src/kapacitor/components/config/SlackConfig'
import {SlackProperties} from 'src/types/kapacitor'
interface Properties {
channel: string
url: string
workspace?: string
}
interface Config { interface Config {
options: { options: {
@ -21,7 +16,7 @@ interface Config {
interface Props { interface Props {
configs: Config[] configs: Config[]
onSave: ( onSave: (
properties: Properties, properties: SlackProperties,
isNewConfigInSection: boolean, isNewConfigInSection: boolean,
specificConfig: string specificConfig: string
) => void ) => void

9
ui/src/kapacitor/components/config/TalkConfig.tsx
View File

@ -4,10 +4,7 @@ import React, {PureComponent, ChangeEvent} from 'react'
import RedactedInput from 'src/kapacitor/components/config/RedactedInput' import RedactedInput from 'src/kapacitor/components/config/RedactedInput'
import {ErrorHandling} from 'src/shared/decorators/errors' import {ErrorHandling} from 'src/shared/decorators/errors'
interface Properties { import {TalkProperties} from 'src/types/kapacitor'
url: string
author_name: string
}
interface Config { interface Config {
options: { options: {
@ -24,7 +21,7 @@ interface State {
interface Props { interface Props {
config: Config config: Config
onSave: (properties: Properties) => void onSave: (properties: TalkProperties) => void
onTest: (event: React.MouseEvent<HTMLButtonElement>) => void onTest: (event: React.MouseEvent<HTMLButtonElement>) => void
enabled: boolean enabled: boolean
} }
@ -113,7 +110,7 @@ class TalkConfig extends PureComponent<Props, State> {
private handleSubmit = async e => { private handleSubmit = async e => {
e.preventDefault() e.preventDefault()
const properties = { const properties: TalkProperties = {
url: this.url.value, url: this.url.value,
author_name: this.author.value, author_name: this.author.value,
enabled: this.state.enabled, enabled: this.state.enabled,

13
ui/src/kapacitor/components/config/TelegramConfig.tsx
View File

@ -5,14 +5,7 @@ import {TELEGRAM_CHAT_ID_TIP, TELEGRAM_TOKEN_TIP} from 'src/kapacitor/copy'
import RedactedInput from 'src/kapacitor/components/config/RedactedInput' import RedactedInput from 'src/kapacitor/components/config/RedactedInput'
import {ErrorHandling} from 'src/shared/decorators/errors' import {ErrorHandling} from 'src/shared/decorators/errors'
import {TelegramProperties} from 'src/types/kapacitor'
interface Properties {
'chat-id': string
'disable-notification': boolean
'disable-web-page-preview': boolean
'parse-mode': string
token: string
}
interface Config { interface Config {
options: { options: {
@ -27,7 +20,7 @@ interface Config {
interface Props { interface Props {
config: Config config: Config
onSave: (properties: Properties) => void onSave: (properties: TelegramProperties) => void
onTest: (event: React.MouseEvent<HTMLButtonElement>) => void onTest: (event: React.MouseEvent<HTMLButtonElement>) => void
enabled: boolean enabled: boolean
} }
@ -231,7 +224,7 @@ class TelegramConfig extends PureComponent<Props, State> {
parseMode = 'Markdown' parseMode = 'Markdown'
} }
const properties = { const properties: TelegramProperties = {
'chat-id': this.chatID.value, 'chat-id': this.chatID.value,
'disable-notification': this.disableNotification.checked, 'disable-notification': this.disableNotification.checked,
'disable-web-page-preview': this.disableWebPagePreview.checked, 'disable-web-page-preview': this.disableWebPagePreview.checked,

11
ui/src/kapacitor/components/config/VictorOpsConfig.tsx
View File

@ -3,12 +3,7 @@ import React, {PureComponent, ChangeEvent} from 'react'
import RedactedInput from 'src/kapacitor/components/config/RedactedInput' import RedactedInput from 'src/kapacitor/components/config/RedactedInput'
import {ErrorHandling} from 'src/shared/decorators/errors' import {ErrorHandling} from 'src/shared/decorators/errors'
import {VictorOpsProperties} from 'src/types/kapacitor'
interface Properties {
'api-key': string
'routing-key': string
url: string
}
interface Config { interface Config {
options: { options: {
@ -21,7 +16,7 @@ interface Config {
interface Props { interface Props {
config: Config config: Config
onSave: (properties: Properties) => void onSave: (properties: VictorOpsProperties) => void
onTest: (event: React.MouseEvent<HTMLButtonElement>) => void onTest: (event: React.MouseEvent<HTMLButtonElement>) => void
enabled: boolean enabled: boolean
} }
@ -131,7 +126,7 @@ class VictorOpsConfig extends PureComponent<Props, State> {
private handleSubmit = async e => { private handleSubmit = async e => {
e.preventDefault() e.preventDefault()
const properties = { const properties: VictorOpsProperties = {
'api-key': this.apiKey.value, 'api-key': this.apiKey.value,
'routing-key': this.routingKey.value, 'routing-key': this.routingKey.value,
url: this.url.value, url: this.url.value,

34
ui/src/kapacitor/constants/index.ts
View File

@ -33,6 +33,40 @@ export enum AlertTypes {
log = 'log', log = 'log',
} }
export enum AlertDisplayText {
alerta = 'Alerta',
hipchat = 'HipChat',
kafka = 'Kafka',
opsgenie = 'OpsGenie',
opsgenie2 = 'OpsGenie2',
pagerduty = 'PagerDuty',
pagerduty2 = 'PagerDuty2',
pushover = 'Pushover',
sensu = 'Sensu',
slack = 'Slack',
smtp = 'SMTP',
talk = 'Talk',
telegram = 'Telegram',
victorops = 'VictorOps',
}
export const SupportedServices: string[] = [
'alerta',
'hipchat',
'kafka',
'opsgenie',
'opsgenie2',
'pagerduty',
'pagerduty2',
'pushover',
'sensu',
'slack',
'smtp',
'talk',
'telegram',
'victorops',
]
export const defaultRuleConfigs = { export const defaultRuleConfigs = {
deadman: { deadman: {
period: '10m', period: '10m',

2
ui/src/shared/components/Tabs.tsx
View File

@ -3,7 +3,7 @@ import React, {PureComponent, ReactElement, SFC} from 'react'
import classnames from 'classnames' import classnames from 'classnames'
interface TabProps { interface TabProps {
children: JSX.Element[] | JSX.Element children: JSX.Element[] | JSX.Element | string
onClick?: () => void onClick?: () => void
isDisabled?: boolean isDisabled?: boolean
isActive?: boolean isActive?: boolean

113
ui/src/types/kapacitor.ts
View File

@ -288,3 +288,116 @@ export type ConfigKeyMaps =
| telegramConfigKeyMap | telegramConfigKeyMap
| victorOpsConfigKeyMap | victorOpsConfigKeyMap
| {} | {}
export interface AlertaProperties {
environment: string
origin: string
token: string
url: string
enabled: boolean
}
export interface HipChatProperties {
room: string
url: string
token: string
enabled: boolean
}
export interface KafkaProperties {
brokers: string[]
timeout: string
'batch-size': number
'batch-timeout': string
'use-ssl': boolean
'ssl-ca': string
'ssl-cert': string
'ssl-key': string
'insecure-skip-verify': boolean
}
export interface OpsGenieProperties {
'api-key': string
teams: string[]
recipients: string[]
enabled: boolean
}
export interface PagerDutyProperties {
'service-key': string
url: string
enabled: boolean
}
export interface PagerDuty2Properties {
'routing-key': string
url: string
enabled: boolean
}
export interface PushoverProperties {
token: string
url: string
'user-key': string
enabled: boolean
}
export interface SensuProperties {
source: string
addr: string
enabled: boolean
}
export interface SlackProperties {
channel: string
url: string
workspace?: string
enabled: boolean
}
export interface SMTPProperties {
host: string
port: string
from: string
to: string[]
username: string
password: string
enabled: boolean
}
export interface TalkProperties {
url: string
author_name: string
enabled: boolean
}
export interface TelegramProperties {
'chat-id': string
'disable-notification': boolean
'disable-web-page-preview': boolean
'parse-mode': string
token: string
enabled: boolean
}
export interface VictorOpsProperties {
'api-key': string
'routing-key': string
url: string
enabled: boolean
}
export type ServiceProperties =
| AlertaProperties
| HipChatProperties
| KafkaProperties
| OpsGenieProperties
| PagerDutyProperties
| PagerDuty2Properties
| PushoverProperties
| SensuProperties
| SlackProperties
| SMTPProperties
| TalkProperties
| TelegramProperties
| VictorOpsProperties