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

Merge pull request #2708 from influxdata/linkable-config-tabs 

Link directly to the right config tab from handler section in rule creator.
pull/10616/head
Deniz Kusefoglu 2018-01-29 10:01:01 -08:00 committed by GitHub
parent bf737959c1 fe9407422f
commit 956b4b504b
7 changed files with 64 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGELOG.md
View File

@ -2,6 +2,7 @@
### Features
1. [#2409](https://github.com/influxdata/chronograf/pull/2409): Allow adding multiple event handlers to a rule
1. [#2709](https://github.com/influxdata/chronograf/pull/2709): Add "send test alert" button to test kapacitor alert configurations"
1. [#2708](https://github.com/influxdata/chronograf/pull/2708): Link to specified kapacitor config panel from rule builder alert handlers
### UI Improvements
1. [#2698](https://github.com/influxdata/chronograf/pull/2698): Improve clarity of terminology surrounding InfluxDB & Kapacitor connections
### Bug Fixes

4
ui/src/index.js
View File

@ -133,6 +133,10 @@ const Root = React.createClass({
<Route path="tickscript/:ruleID" component={TickscriptPage} />
<Route path="kapacitors/new" component={KapacitorPage} />
<Route path="kapacitors/:id/edit" component={KapacitorPage} />
<Route
path="kapacitors/:id/edit:hash"
component={KapacitorPage}
/>
<Route path="kapacitor-tasks" component={KapacitorTasksPage} />
<Route path="admin-chronograf" component={AdminChronografPage} />
<Route path="admin-influxdb" component={AdminInfluxDBPage} />

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

@ -27,7 +27,6 @@ class AlertTabs extends Component {
super(props)
this.state = {
selectedHandler: 'smtp',
configSections: null,
}
}
@ -42,18 +41,17 @@ class AlertTabs extends Component {
}
}
refreshKapacitorConfig = kapacitor => {
getKapacitorConfig(kapacitor)
.then(({data: {sections}}) => {
this.setState({configSections: sections})
})
.catch(() => {
this.setState({configSections: null})
this.props.addFlashMessage({
type: 'error',
text: 'There was an error getting the Kapacitor config',
})
refreshKapacitorConfig = async kapacitor => {
try {
const {data: {sections}} = await getKapacitorConfig(kapacitor)
this.setState({configSections: sections})
} catch (error) {
this.setState({configSections: null})
this.props.addFlashMessage({
type: 'error',
text: 'There was an error getting the Kapacitor config',
})
}
}
getSection = (sections, section) => {
@ -72,23 +70,26 @@ class AlertTabs extends Component {
return this.getSection(sections, section)
}
handleSaveConfig = section => properties => {
handleSaveConfig = section => async properties => {
if (section !== '') {
const propsToSend = this.sanitizeProperties(section, properties)
updateKapacitorConfigSection(this.props.kapacitor, section, propsToSend)
.then(() => {
this.refreshKapacitorConfig(this.props.kapacitor)
this.props.addFlashMessage({
type: 'success',
text: `Alert configuration for ${section} successfully saved.`,
})
try {
await updateKapacitorConfigSection(
this.props.kapacitor,
section,
propsToSend
)
this.refreshKapacitorConfig(this.props.kapacitor)
this.props.addFlashMessage({
type: 'success',
text: `Alert configuration for ${section} successfully saved.`,
})
.catch(() => {
this.props.addFlashMessage({
type: 'error',
text: `There was an error saving the alert configuration for ${section}.`,
})
} catch (error) {
this.props.addFlashMessage({
type: 'error',
text: `There was an error saving the alert configuration for ${section}.`,
})
}
}
}
@ -123,8 +124,14 @@ class AlertTabs extends Component {
return cleanProps
}
getInitialIndex = (supportedConfigs, hash) => {
const index = _.indexOf(_.keys(supportedConfigs), _.replace(hash, '#', ''))
return index >= 0 ? index : 0
}
render() {
const {configSections} = this.state
const {hash} = this.props
if (!configSections) {
return null
@ -252,7 +259,6 @@ class AlertTabs extends Component {
/>,
},
}
return (
<div>
<div className="panel panel-minimal">
@ -261,7 +267,10 @@ class AlertTabs extends Component {
</div>
</div>
<Tabs tabContentsClass="config-endpoint">
<Tabs
tabContentsClass="config-endpoint"
initialIndex={this.getInitialIndex(supportedConfigs, hash)}
>
<TabList customClass="config-endpoint--tabs">
{_.reduce(
configSections,
@ -312,6 +321,7 @@ AlertTabs.propTypes = {
}).isRequired,
}),
addFlashMessage: func.isRequired,
hash: string.isRequired,
}
export default AlertTabs

22
ui/src/kapacitor/components/HandlerOptions.js
View File

@ -65,7 +65,7 @@ class HandlerOptions extends Component {
<EmailHandler
selectedHandler={selectedHandler}
handleModifyHandler={handleModifyHandler}
onGoToConfig={onGoToConfig}
onGoToConfig={onGoToConfig('smtp')}
validationError={validationError}
updateDetails={updateDetails}
rule={rule}
@ -76,7 +76,7 @@ class HandlerOptions extends Component {
<AlertaHandler
selectedHandler={selectedHandler}
handleModifyHandler={handleModifyHandler}
onGoToConfig={onGoToConfig}
onGoToConfig={onGoToConfig('alerta')}
validationError={validationError}
/>
)
@ -85,7 +85,7 @@ class HandlerOptions extends Component {
<HipchatHandler
selectedHandler={selectedHandler}
handleModifyHandler={handleModifyHandler}
onGoToConfig={onGoToConfig}
onGoToConfig={onGoToConfig('hipchat')}
validationError={validationError}
/>
)
@ -94,7 +94,7 @@ class HandlerOptions extends Component {
<OpsgenieHandler
selectedHandler={selectedHandler}
handleModifyHandler={handleModifyHandler}
onGoToConfig={onGoToConfig}
onGoToConfig={onGoToConfig('opsgenie')}
validationError={validationError}
/>
)
@ -103,7 +103,7 @@ class HandlerOptions extends Component {
<PagerdutyHandler
selectedHandler={selectedHandler}
handleModifyHandler={handleModifyHandler}
onGoToConfig={onGoToConfig}
onGoToConfig={onGoToConfig('pagerduty')}
validationError={validationError}
/>
)
@ -112,7 +112,7 @@ class HandlerOptions extends Component {
<PushoverHandler
selectedHandler={selectedHandler}
handleModifyHandler={handleModifyHandler}
onGoToConfig={onGoToConfig}
onGoToConfig={onGoToConfig('pushover')}
validationError={validationError}
/>
)
@ -121,7 +121,7 @@ class HandlerOptions extends Component {
<SensuHandler
selectedHandler={selectedHandler}
handleModifyHandler={handleModifyHandler}
onGoToConfig={onGoToConfig}
onGoToConfig={onGoToConfig('sensu')}
validationError={validationError}
/>
)
@ -130,7 +130,7 @@ class HandlerOptions extends Component {
<SlackHandler
selectedHandler={selectedHandler}
handleModifyHandler={handleModifyHandler}
onGoToConfig={onGoToConfig}
onGoToConfig={onGoToConfig('slack')}
validationError={validationError}
/>
)
@ -139,7 +139,7 @@ class HandlerOptions extends Component {
<TalkHandler
selectedHandler={selectedHandler}
handleModifyHandler={handleModifyHandler}
onGoToConfig={onGoToConfig}
onGoToConfig={onGoToConfig('talk')}
validationError={validationError}
/>
)
@ -148,7 +148,7 @@ class HandlerOptions extends Component {
<TelegramHandler
selectedHandler={selectedHandler}
handleModifyHandler={handleModifyHandler}
onGoToConfig={onGoToConfig}
onGoToConfig={onGoToConfig('telegram')}
validationError={validationError}
/>
)
@ -157,7 +157,7 @@ class HandlerOptions extends Component {
<VictoropsHandler
selectedHandler={selectedHandler}
handleModifyHandler={handleModifyHandler}
onGoToConfig={onGoToConfig}
onGoToConfig={onGoToConfig('victorops')}
validationError={validationError}
/>
)

4
ui/src/kapacitor/components/KapacitorForm.js
View File

@ -109,7 +109,7 @@ class KapacitorForm extends Component {
// TODO: move these to another page. they dont belong on this page
renderAlertOutputs() {
const {exists, kapacitor, addFlashMessage, source} = this.props
const {exists, kapacitor, addFlashMessage, source, hash} = this.props
if (exists) {
return (
@ -117,6 +117,7 @@ class KapacitorForm extends Component {
source={source}
kapacitor={kapacitor}
addFlashMessage={addFlashMessage}
hash={hash}
/>
)
}
@ -154,6 +155,7 @@ KapacitorForm.propTypes = {
source: shape({}).isRequired,
addFlashMessage: func.isRequired,
exists: bool.isRequired,
hash: string.isRequired,
}
export default KapacitorForm

6
ui/src/kapacitor/components/KapacitorRule.js
View File

@ -75,10 +75,12 @@ class KapacitorRule extends Component {
})
}
handleSaveToConfig = () => {
handleSaveToConfig = configName => () => {
const {rule, configLink, router} = this.props
if (this.validationError()) {
router.push(configLink)
router.push({
pathname: `${configLink}#${configName}`,
})
} else if (rule.id === DEFAULT_RULE_ID) {
this.handleCreate(configLink)
} else {

6
ui/src/kapacitor/containers/KapacitorPage.js
View File

@ -136,9 +136,9 @@ class KapacitorPage extends Component {
}
render() {
const {source, addFlashMessage} = this.props
const {source, addFlashMessage, location, params} = this.props
const hash = (location && location.hash) || (params && params.hash) || ''
const {kapacitor, exists} = this.state
return (
<KapacitorForm
onSubmit={this.handleSubmit}
@ -148,6 +148,7 @@ class KapacitorPage extends Component {
source={source}
addFlashMessage={addFlashMessage}
exists={exists}
hash={hash}
/>
)
}
@ -168,6 +169,7 @@ KapacitorPage.propTypes = {
url: string.isRequired,
kapacitors: array,
}),
location: shape({pathname: string, hash: string}).isRequired,
}
export default withRouter(KapacitorPage)