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

Add ability to display multiple slack nodes in UI

pull/10616/head
Iris Scholten 2018-05-08 16:40:37 -07:00
parent f79a45e2f1
commit 9665f420b1
4 changed files with 140 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -12,6 +12,7 @@ import {
import {
getKapacitorConfig,
updateKapacitorConfigSection,
addKapacitorConfigInSection,
testAlertOutput,
getAllServices,
} from 'src/shared/apis'
@ -25,7 +26,6 @@ import {
PagerDuty2Config,
PushoverConfig,
SensuConfig,
SlackConfig,
SMTPConfig,
TalkConfig,
TelegramConfig,
@ -44,6 +44,7 @@ import DeprecationWarning from 'src/admin/components/DeprecationWarning'
import {ErrorHandling} from 'src/shared/decorators/errors'
import {Source, Kapacitor} from 'src/types'
import SlackConfigs from 'src/kapacitor/components/config/SlackConfigs'
interface Service {
link: Link
@ -208,7 +209,7 @@ class AlertTabs extends PureComponent<Props, State> {
renderComponent: () => (
<AlertaConfig
onSave={this.handleSaveConfig('alerta')}
config={this.getSection(configSections, 'alerta')}
config={this.getSectionElement(configSections, 'alerta')}
onTest={this.handleTestConfig('alerta')}
enabled={this.getEnabled(configSections, 'alerta')}
/>
@ -220,7 +221,7 @@ class AlertTabs extends PureComponent<Props, State> {
renderComponent: () => (
<HipChatConfig
onSave={this.handleSaveConfig('hipchat')}
config={this.getSection(configSections, 'hipchat')}
config={this.getSectionElement(configSections, 'hipchat')}
onTest={this.handleTestConfig('hipchat')}
enabled={this.getEnabled(configSections, 'hipchat')}
/>
@ -247,7 +248,7 @@ class AlertTabs extends PureComponent<Props, State> {
renderComponent: () => (
<OpsGenieConfig
onSave={this.handleSaveConfig('opsgenie')}
config={this.getSection(configSections, 'opsgenie')}
config={this.getSectionElement(configSections, 'opsgenie')}
onTest={this.handleTestConfig('opsgenie')}
enabled={this.getEnabled(configSections, 'opsgenie')}
/>
@ -259,7 +260,7 @@ class AlertTabs extends PureComponent<Props, State> {
renderComponent: () => (
<OpsGenieConfig
onSave={this.handleSaveConfig('opsgenie2')}
config={this.getSection(configSections, 'opsgenie2')}
config={this.getSectionElement(configSections, 'opsgenie2')}
onTest={this.handleTestConfig('opsgenie2')}
enabled={this.getEnabled(configSections, 'opsgenie2')}
/>
@ -271,7 +272,7 @@ class AlertTabs extends PureComponent<Props, State> {
renderComponent: () => (
<PagerDutyConfig
onSave={this.handleSaveConfig('pagerduty')}
config={this.getSection(configSections, 'pagerduty')}
config={this.getSectionElement(configSections, 'pagerduty')}
onTest={this.handleTestConfig('pagerduty')}
enabled={this.getEnabled(configSections, 'pagerduty')}
/>
@ -283,7 +284,7 @@ class AlertTabs extends PureComponent<Props, State> {
renderComponent: () => (
<PagerDuty2Config
onSave={this.handleSaveConfig('pagerduty2')}
config={this.getSection(configSections, 'pagerduty2')}
config={this.getSectionElement(configSections, 'pagerduty2')}
onTest={this.handleTestConfig('pagerduty2')}
enabled={this.getEnabled(configSections, 'pagerduty2')}
/>
@ -295,7 +296,7 @@ class AlertTabs extends PureComponent<Props, State> {
renderComponent: () => (
<PushoverConfig
onSave={this.handleSaveConfig('pushover')}
config={this.getSection(configSections, 'pushover')}
config={this.getSectionElement(configSections, 'pushover')}
onTest={this.handleTestConfig('pushover')}
enabled={this.getEnabled(configSections, 'pushover')}
/>
@ -307,7 +308,7 @@ class AlertTabs extends PureComponent<Props, State> {
renderComponent: () => (
<SensuConfig
onSave={this.handleSaveConfig('sensu')}
config={this.getSection(configSections, 'sensu')}
config={this.getSectionElement(configSections, 'sensu')}
onTest={this.handleTestConfig('sensu')}
enabled={this.getEnabled(configSections, 'sensu')}
/>
@ -317,21 +318,34 @@ class AlertTabs extends PureComponent<Props, State> {
type: 'Slack',
enabled: this.getEnabled(configSections, 'slack'),
renderComponent: () => (
<SlackConfig
<SlackConfigs
slackConfigs={this.getSectionElements(configSections, 'slack')}
onSave={this.handleSaveConfig('slack')}
config={this.getSection(configSections, 'slack')}
config={this.getSectionElement(configSections, 'slack')}
onTest={this.handleTestConfig('slack')}
enabled={this.getEnabled(configSections, 'slack')}
/>
),
},
// slack: {
// type: 'Slack',
// enabled: this.getEnabled(configSections, 'slack'),
// renderComponent: () => (
// <SlackConfig
// onSave={this.handleSaveConfig('slack')}
// config={this.getSectionElement(configSections, 'slack')}
// onTest={this.handleTestConfig('slack')}
// enabled={this.getEnabled(configSections, 'slack')}
// />
// ),
// },
smtp: {
type: 'SMTP',
enabled: this.getEnabled(configSections, 'smtp'),
renderComponent: () => (
<SMTPConfig
onSave={this.handleSaveConfig('smtp')}
config={this.getSection(configSections, 'smtp')}
config={this.getSectionElement(configSections, 'smtp')}
onTest={this.handleTestConfig('smtp')}
enabled={this.getEnabled(configSections, 'smtp')}
/>
@ -343,7 +357,7 @@ class AlertTabs extends PureComponent<Props, State> {
renderComponent: () => (
<TalkConfig
onSave={this.handleSaveConfig('talk')}
config={this.getSection(configSections, 'talk')}
config={this.getSectionElement(configSections, 'talk')}
onTest={this.handleTestConfig('talk')}
enabled={this.getEnabled(configSections, 'talk')}
/>
@ -355,7 +369,7 @@ class AlertTabs extends PureComponent<Props, State> {
renderComponent: () => (
<TelegramConfig
onSave={this.handleSaveConfig('telegram')}
config={this.getSection(configSections, 'telegram')}
config={this.getSectionElement(configSections, 'telegram')}
onTest={this.handleTestConfig('telegram')}
enabled={this.getEnabled(configSections, 'telegram')}
/>
@ -367,7 +381,7 @@ class AlertTabs extends PureComponent<Props, State> {
renderComponent: () => (
<VictorOpsConfig
onSave={this.handleSaveConfig('victorops')}
config={this.getSection(configSections, 'victorops')}
config={this.getSectionElement(configSections, 'victorops')}
onTest={this.handleTestConfig('victorops')}
enabled={this.getEnabled(configSections, 'victorops')}
/>
@ -441,8 +455,19 @@ class AlertTabs extends PureComponent<Props, State> {
}
}
private getSection = (sections: Sections, section: string): Element => {
return _.get(sections, [section, 'elements', '0'], null)
private getSectionElement = (
sections: Sections,
section: string,
elementIndex: number = 0
): Element => {
return _.get(sections, [section, 'elements', elementIndex], null)
}
private getSectionElements = (
sections: Sections,
section: string
): Element[] => {
return _.get(sections, [section, 'elements'], null)
}
private getEnabled = (sections: Sections, section: string): boolean => {
@ -511,7 +536,10 @@ class AlertTabs extends PureComponent<Props, State> {
private sanitizeProperties = (section: string, properties: Props): Props => {
const cleanProps = {enabled: true, ...properties}
const {redacted} = this.getSection(this.state.configSections, section)
const {redacted} = this.getSectionElement(
this.state.configSections,
section
)
if (redacted && redacted.length) {
redacted.forEach(badProp => {
if (properties[badProp] === 'true') {

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

@ -13,6 +13,7 @@ interface Config {
url: boolean
channel: string
enabled: boolean
workspace: string
}
}
@ -42,7 +43,7 @@ class SlackConfig extends PureComponent<Props, State> {
}
public render() {
const {url, channel} = this.props.config.options
const {url, channel, workspace} = this.props.config.options
const {testEnabled, enabled} = this.state
return (
@ -55,7 +56,7 @@ class SlackConfig extends PureComponent<Props, State> {
type="text"
placeholder="Optional unless multiple Slack configurations exist"
// ref={r => (this.channel = r)}
defaultValue={channel || ''}
defaultValue={workspace}
onChange={this.disableTest}
/>
</div>

75
ui/src/kapacitor/components/config/SlackConfigs.tsx Normal file
View File

@ -0,0 +1,75 @@
import React, {PureComponent} from 'react'
import {ErrorHandling} from 'src/shared/decorators/errors'
import SlackConfig from 'src/kapacitor/components/config/SlackConfig'
interface Properties {
channel: string
url: string
}
interface Config {
options: {
url: boolean
channel: string
}
}
interface Props {
slackConfigs: any[]
config: Config
onSave: (properties: Properties) => void
onTest: (event: React.MouseEvent<HTMLButtonElement>) => void
enabled: boolean
}
interface State {
slackConfigs: any[]
}
@ErrorHandling
class SlackConfigs extends PureComponent<Props, State> {
constructor(props) {
super(props)
this.state = {
slackConfigs: this.props.slackConfigs,
}
}
public render() {
const {slackConfigs} = this.state
const {onSave, onTest, enabled} = this.props
return (
<div>
{slackConfigs.map((config, i) => (
<SlackConfig
key={i}
onSave={onSave}
config={config}
onTest={onTest}
enabled={enabled}
/>
))}
<button className="btn btn-md btn-default" onClick={this.addConfig}>
<span className="icon plus" /> Add Another Config
</button>
</div>
)
}
private get slackConfigs() {
return this.state.slackConfigs
}
private addConfig = () => {
const configs = this.slackConfigs
const newConfig = {
options: {
url: false,
channel: '',
},
}
this.setState({slackConfigs: [...configs, newConfig]})
}
}
export default SlackConfigs

16
ui/src/shared/apis/index.js
View File

@ -173,6 +173,22 @@ export function updateKapacitorConfigSection(kapacitor, section, properties) {
return AJAX(params)
}
export function addKapacitorConfigInSection(kapacitor, section, properties) {
return AJAX({
method: 'POST',
url: kapacitor.links.proxy,
params: {
path: `/kapacitor/v1/config/${section}/`,
},
data: {
add: properties,
},
headers: {
'Content-Type': 'application/json',
},
})
}
export const testAlertOutput = async (kapacitor, outputName, options) => {
try {
const {