From a14f860ef13f818d4a34493e47c36c008f38bbf4 Mon Sep 17 00:00:00 2001 From: Alex P Date: Sat, 3 Mar 2018 17:08:50 -0800 Subject: [PATCH] Replace addFlashMessage with publishNotification Also refactoring App.js into a SFC --- ui/src/App.js | 41 +--- ui/src/hosts/containers/HostsPage.js | 22 +- ui/src/kapacitor/actions/view/index.js | 4 +- ui/src/kapacitor/components/AlertTabs.js | 44 ++-- ui/src/kapacitor/components/DataSection.js | 1 - ui/src/kapacitor/components/KapacitorForm.js | 161 ++++++++++++++ ui/src/kapacitor/components/KapacitorRule.js | 38 +++- ui/src/kapacitor/containers/KapacitorPage.js | 202 ++++++++++++++++++ .../kapacitor/containers/KapacitorRulePage.js | 20 +- .../containers/KapacitorRulesPage.js | 1 - .../containers/KapacitorTasksPage.js | 1 - ui/src/shared/actions/sources.js | 6 +- ui/src/sources/containers/ManageSources.js | 20 +- 13 files changed, 479 insertions(+), 82 deletions(-) create mode 100644 ui/src/kapacitor/components/KapacitorForm.js create mode 100644 ui/src/kapacitor/containers/KapacitorPage.js diff --git a/ui/src/App.js b/ui/src/App.js index 332a535533..43c609431a 100644 --- a/ui/src/App.js +++ b/ui/src/App.js @@ -1,43 +1,20 @@ -import React, {Component} from 'react' +import React from 'react' import PropTypes from 'prop-types' -import {connect} from 'react-redux' -import {bindActionCreators} from 'redux' import SideNav from 'src/side_nav' import Notifications from 'shared/components/Notifications' -import {publishNotification as publishNotificationAction} from 'shared/actions/notifications' +const App = ({children}) => +
+ + + {children} +
-class App extends Component { - notify = notification => { - const {publishNotification} = this.props - - publishNotification(notification) - } - - render() { - return ( -
- - - {this.props.children && - React.cloneElement(this.props.children, { - addFlashMessage: this.notify, - })} -
- ) - } -} - -const {func, node} = PropTypes +const {node} = PropTypes App.propTypes = { children: node.isRequired, - publishNotification: func.isRequired, } -const mapDispatchToProps = dispatch => ({ - publishNotification: bindActionCreators(publishNotificationAction, dispatch), -}) - -export default connect(null, mapDispatchToProps)(App) +export default App diff --git a/ui/src/hosts/containers/HostsPage.js b/ui/src/hosts/containers/HostsPage.js index d1ee6f8954..860ff73a11 100644 --- a/ui/src/hosts/containers/HostsPage.js +++ b/ui/src/hosts/containers/HostsPage.js @@ -12,6 +12,7 @@ import ManualRefresh from 'src/shared/components/ManualRefresh' import {getCpuAndLoadForHosts, getLayouts, getAppsForHosts} from '../apis' import {getEnv} from 'src/shared/apis/env' import {setAutoRefresh} from 'shared/actions/app' +import {publishNotification as publishNotificationAction} from 'shared/actions/notifications' class HostsPage extends Component { constructor(props) { @@ -25,7 +26,7 @@ class HostsPage extends Component { } async fetchHostsData() { - const {source, links, addFlashMessage} = this.props + const {source, links, publishNotification} = this.props const {telegrafSystemInterval} = await getEnv(links.environment) const hostsError = 'Unable to get hosts' try { @@ -51,7 +52,12 @@ class HostsPage extends Component { }) } catch (error) { console.error(error) - addFlashMessage({type: 'error', text: hostsError}) + publishNotification({ + icon: 'alert-triangle', + type: 'danger', + duration: 5000, + message: hostsError, + }) this.setState({ hostsError, hostsLoading: false, @@ -60,14 +66,19 @@ class HostsPage extends Component { } async componentDidMount() { - const {addFlashMessage, autoRefresh} = this.props + const {publishNotification, autoRefresh} = this.props this.setState({hostsLoading: true}) // Only print this once const {data} = await getLayouts() this.layouts = data.layouts if (!this.layouts) { const layoutError = 'Unable to get apps for hosts' - addFlashMessage({type: 'error', text: layoutError}) + publishNotification({ + icon: 'alert-triangle', + type: 'danger', + duration: 5000, + message: layoutError, + }) this.setState({ hostsError: layoutError, hostsLoading: false, @@ -169,11 +180,11 @@ HostsPage.propTypes = { links: shape({ environment: string.isRequired, }), - addFlashMessage: func, autoRefresh: number.isRequired, manualRefresh: number, onChooseAutoRefresh: func.isRequired, onManualRefresh: func.isRequired, + publishNotification: func.isRequired, } HostsPage.defaultProps = { @@ -182,6 +193,7 @@ HostsPage.defaultProps = { const mapDispatchToProps = dispatch => ({ onChooseAutoRefresh: bindActionCreators(setAutoRefresh, dispatch), + publishNotification: bindActionCreators(publishNotificationAction, dispatch), }) export default connect(mapStateToProps, mapDispatchToProps)( diff --git a/ui/src/kapacitor/actions/view/index.js b/ui/src/kapacitor/actions/view/index.js index ca485d01c7..da0c4f32de 100644 --- a/ui/src/kapacitor/actions/view/index.js +++ b/ui/src/kapacitor/actions/view/index.js @@ -176,7 +176,7 @@ export const deleteRule = rule => dispatch => { }) .catch(() => { dispatch( - publishNotification('error', `${rule.name} could not be deleted`) + publishNotification('danger', `${rule.name} could not be deleted`) ) }) } @@ -190,7 +190,7 @@ export const updateRuleStatus = (rule, status) => dispatch => { }) .catch(() => { dispatch( - publishNotification('error', `${rule.name} could not be ${status}`) + publishNotification('danger', `${rule.name} could not be ${status}`) ) }) } diff --git a/ui/src/kapacitor/components/AlertTabs.js b/ui/src/kapacitor/components/AlertTabs.js index e75a979eaf..466820172c 100644 --- a/ui/src/kapacitor/components/AlertTabs.js +++ b/ui/src/kapacitor/components/AlertTabs.js @@ -1,6 +1,10 @@ import React, {Component} from 'react' import PropTypes from 'prop-types' +import {connect} from 'react-redux' +import {bindActionCreators} from 'redux' + import _ from 'lodash' +import {publishNotification as publishNotificationAction} from 'shared/actions/notifications' import {Tab, Tabs, TabPanel, TabPanels, TabList} from 'shared/components/Tabs' import { @@ -48,8 +52,10 @@ class AlertTabs extends Component { this.setState({configSections: sections}) } catch (error) { this.setState({configSections: null}) - this.props.addFlashMessage({ - type: 'error', + this.props.publishNotification({ + type: 'danger', + icon: 'alert-triangle', + duration: 10000, text: 'There was an error getting the Kapacitor config', }) } @@ -81,15 +87,19 @@ class AlertTabs extends Component { propsToSend ) this.refreshKapacitorConfig(this.props.kapacitor) - this.props.addFlashMessage({ + this.props.publishNotification({ type: 'success', + icon: 'checkmark', + duration: 5000, text: `Alert configuration for ${section} successfully saved.`, }) return true } catch ({data: {error}}) { const errorMsg = _.join(_.drop(_.split(error, ': '), 2), ': ') - this.props.addFlashMessage({ - type: 'error', + this.props.publishNotification({ + type: 'danger', + icon: 'alert-triangle', + duration: 10000, text: `There was an error saving the alert configuration for ${section}: ${errorMsg}`, }) return false @@ -103,19 +113,25 @@ class AlertTabs extends Component { try { const {data} = await testAlertOutput(this.props.kapacitor, section) if (data.success) { - this.props.addFlashMessage({ + this.props.publishNotification({ type: 'success', + icon: 'checkmark', + duration: 5000, text: `Successfully triggered an alert to ${section}. If the alert does not reach its destination, please check your configuration settings.`, }) } else { - this.props.addFlashMessage({ - type: 'error', + this.props.publishNotification({ + type: 'danger', + icon: 'alert-triangle', + duration: 10000, text: `There was an error sending an alert to ${section}: ${data.message}`, }) } } catch (error) { - this.props.addFlashMessage({ - type: 'error', + this.props.publishNotification({ + type: 'danger', + icon: 'alert-triangle', + duration: 10000, text: `There was an error sending an alert to ${section}.`, }) } @@ -329,8 +345,12 @@ AlertTabs.propTypes = { proxy: string.isRequired, }).isRequired, }), - addFlashMessage: func.isRequired, + publishNotification: func.isRequired, hash: string.isRequired, } -export default AlertTabs +const mapDispatchToProps = dispatch => ({ + publishNotification: bindActionCreators(publishNotificationAction, dispatch), +}) + +export default connect(null, mapDispatchToProps)(AlertTabs) diff --git a/ui/src/kapacitor/components/DataSection.js b/ui/src/kapacitor/components/DataSection.js index 050998d465..d0d4a53bc1 100644 --- a/ui/src/kapacitor/components/DataSection.js +++ b/ui/src/kapacitor/components/DataSection.js @@ -97,7 +97,6 @@ DataSection.propTypes = { query: shape({ id: string.isRequired, }).isRequired, - addFlashMessage: func, actions: shape({ chooseNamespace: func.isRequired, chooseMeasurement: func.isRequired, diff --git a/ui/src/kapacitor/components/KapacitorForm.js b/ui/src/kapacitor/components/KapacitorForm.js new file mode 100644 index 0000000000..d9c43f95b4 --- /dev/null +++ b/ui/src/kapacitor/components/KapacitorForm.js @@ -0,0 +1,161 @@ +import React, {Component, PropTypes} from 'react' + +import AlertTabs from 'src/kapacitor/components/AlertTabs' +import FancyScrollbar from 'shared/components/FancyScrollbar' + +class KapacitorForm extends Component { + render() { + const { + onInputChange, + onChangeUrl, + onReset, + kapacitor, + onSubmit, + exists, + } = this.props + const {url, name, username, password} = kapacitor + return ( +
+
+
+
+

{`${exists + ? 'Configure' + : 'Add a New'} Kapacitor Connection`}

+
+
+
+ +
+
+
+
+
+

Connection Details

+
+
+
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ +
+ + +
+
+
+
+
+
+ {this.renderAlertOutputs()} +
+
+
+ +
+ ) + } + + // TODO: move these to another page. they dont belong on this page + renderAlertOutputs() { + const {exists, kapacitor, source, hash} = this.props + + if (exists) { + return + } + + return ( +
+
+

Configure Alert Endpoints

+
+
+
+

+ Connect to an active Kapacitor instance to configure alerting + endpoints +

+
+
+
+ ) + } +} + +const {func, shape, string, bool} = PropTypes + +KapacitorForm.propTypes = { + onSubmit: func.isRequired, + onInputChange: func.isRequired, + onChangeUrl: func.isRequired, + onReset: func.isRequired, + kapacitor: shape({ + url: string.isRequired, + name: string.isRequired, + username: string, + password: string, + }).isRequired, + source: shape({}).isRequired, + exists: bool.isRequired, + hash: string.isRequired, +} + +export default KapacitorForm diff --git a/ui/src/kapacitor/components/KapacitorRule.js b/ui/src/kapacitor/components/KapacitorRule.js index f7fde915f9..042bf43a33 100644 --- a/ui/src/kapacitor/components/KapacitorRule.js +++ b/ui/src/kapacitor/components/KapacitorRule.js @@ -1,5 +1,7 @@ import React, {Component} from 'react' import PropTypes from 'prop-types' +import {connect} from 'react-redux' +import {bindActionCreators} from 'redux' import NameSection from 'src/kapacitor/components/NameSection' import ValuesSection from 'src/kapacitor/components/ValuesSection' @@ -12,6 +14,7 @@ import {createRule, editRule} from 'src/kapacitor/apis' import buildInfluxQLQuery from 'utils/influxql' import {timeRanges} from 'shared/data/timeRanges' import {DEFAULT_RULE_ID} from 'src/kapacitor/constants' +import {publishNotification as publishNotificationAction} from 'shared/actions/notifications' class KapacitorRule extends Component { constructor(props) { @@ -28,7 +31,7 @@ class KapacitorRule extends Component { handleCreate = pathname => { const { - addFlashMessage, + publishNotification, queryConfigs, rule, source, @@ -44,18 +47,25 @@ class KapacitorRule extends Component { createRule(kapacitor, newRule) .then(() => { router.push(pathname || `/sources/${source.id}/alert-rules`) - addFlashMessage({type: 'success', text: 'Rule successfully created'}) + publishNotification({ + type: 'success', + icon: 'checkmark', + duration: 5000, + message: 'Rule successfully created', + }) }) .catch(() => { - addFlashMessage({ - type: 'error', + publishNotification({ + type: 'danger', + icon: 'alert-triangle', + duration: 10000, text: 'There was a problem creating the rule', }) }) } handleEdit = pathname => { - const {addFlashMessage, queryConfigs, rule, router, source} = this.props + const {publishNotification, queryConfigs, rule, router, source} = this.props const updatedRule = Object.assign({}, rule, { query: queryConfigs[rule.queryID], }) @@ -63,14 +73,18 @@ class KapacitorRule extends Component { editRule(updatedRule) .then(() => { router.push(pathname || `/sources/${source.id}/alert-rules`) - addFlashMessage({ + publishNotification({ type: 'success', + icon: 'checkmark', + duration: 5000, text: `${rule.name} successfully saved!`, }) }) .catch(e => { - addFlashMessage({ - type: 'error', + publishNotification({ + type: 'danger', + icon: 'alert-triangle', + duration: 10000, text: `There was a problem saving ${rule.name}: ${e.data.message}`, }) }) @@ -234,7 +248,7 @@ KapacitorRule.propTypes = { queryConfigs: shape({}).isRequired, queryConfigActions: shape({}).isRequired, ruleActions: shape({}).isRequired, - addFlashMessage: func.isRequired, + publishNotification: func.isRequired, ruleID: string.isRequired, handlersFromConfig: arrayOf(shape({})).isRequired, router: shape({ @@ -244,4 +258,8 @@ KapacitorRule.propTypes = { configLink: string.isRequired, } -export default KapacitorRule +const mapDispatchToProps = dispatch => ({ + publishNotification: bindActionCreators(publishNotificationAction, dispatch), +}) + +export default connect(null, mapDispatchToProps)(KapacitorRule) diff --git a/ui/src/kapacitor/containers/KapacitorPage.js b/ui/src/kapacitor/containers/KapacitorPage.js new file mode 100644 index 0000000000..8f3e1a9ce4 --- /dev/null +++ b/ui/src/kapacitor/containers/KapacitorPage.js @@ -0,0 +1,202 @@ +import React, {Component, PropTypes} from 'react' +import {withRouter} from 'react-router' +import {connect} from 'react-redux' +import {bindActionCreators} from 'redux' + +import {publishNotification as publishNotificationAction} from 'shared/actions/notifications' + +import { + getKapacitor, + createKapacitor, + updateKapacitor, + pingKapacitor, +} from 'shared/apis' +import KapacitorForm from '../components/KapacitorForm' + +const defaultName = 'My Kapacitor' +const kapacitorPort = '9092' + +class KapacitorPage extends Component { + constructor(props) { + super(props) + this.state = { + kapacitor: { + url: this._parseKapacitorURL(), + name: defaultName, + username: '', + password: '', + }, + exists: false, + } + } + + componentDidMount() { + const {source, params: {id}} = this.props + if (!id) { + return + } + + getKapacitor(source, id).then(kapacitor => { + this.setState({kapacitor}) + this.checkKapacitorConnection(kapacitor) + }) + } + + checkKapacitorConnection = async kapacitor => { + try { + await pingKapacitor(kapacitor) + this.setState({exists: true}) + } catch (error) { + this.setState({exists: false}) + this.props.publishNotification({ + type: 'danger', + icon: 'alert-triangle', + duration: 10000, + text: 'Could not connect to Kapacitor. Check settings.', + }) + } + } + + handleInputChange = e => { + const {value, name} = e.target + + this.setState(prevState => { + const update = {[name]: value} + return {kapacitor: {...prevState.kapacitor, ...update}} + }) + } + + handleChangeUrl = ({value}) => { + this.setState({kapacitor: {...this.state.kapacitor, url: value}}) + } + + handleSubmit = e => { + e.preventDefault() + const { + publishNotification, + source, + source: {kapacitors = []}, + params, + router, + } = this.props + const {kapacitor} = this.state + kapacitor.name = kapacitor.name.trim() + const isNameTaken = kapacitors.some(k => k.name === kapacitor.name) + const isNew = !params.id + + if (isNew && isNameTaken) { + publishNotification({ + type: 'danger', + icon: 'alert-triangle', + duration: 10000, + text: `There is already a Kapacitor configuration named "${kapacitor.name}"`, + }) + return + } + + if (params.id) { + updateKapacitor(kapacitor) + .then(({data}) => { + this.setState({kapacitor: data}) + this.checkKapacitorConnection(data) + publishNotification({ + type: 'success', + icon: 'checkmark', + duration: 5000, + message: 'Kapacitor Updated!', + }) + }) + .catch(() => { + publishNotification({ + type: 'danger', + icon: 'alert-triangle', + duration: 10000, + text: 'There was a problem updating the Kapacitor record', + }) + }) + } else { + createKapacitor(source, kapacitor) + .then(({data}) => { + // need up update kapacitor with info from server to AlertOutputs + this.setState({kapacitor: data}) + this.checkKapacitorConnection(data) + router.push(`/sources/${source.id}/kapacitors/${data.id}/edit`) + publishNotification({ + type: 'success', + icon: 'checkmark', + duration: 5000, + text: 'Kapacitor Created! Configuring endpoints is optional.', + }) + }) + .catch(() => { + publishNotification({ + type: 'danger', + icon: 'alert-triangle', + duration: 10000, + text: 'There was a problem creating the Kapacitor record', + }) + }) + } + } + + handleResetToDefaults = e => { + e.preventDefault() + const defaultState = { + url: this._parseKapacitorURL(), + name: defaultName, + username: '', + password: '', + } + + this.setState({kapacitor: {...defaultState}}) + } + + _parseKapacitorURL = () => { + const parser = document.createElement('a') + parser.href = this.props.source.url + + return `${parser.protocol}//${parser.hostname}:${kapacitorPort}` + } + + render() { + const {source, location, params} = this.props + const hash = (location && location.hash) || (params && params.hash) || '' + const {kapacitor, exists} = this.state + return ( + + ) + } +} + +const {array, func, shape, string} = PropTypes + +KapacitorPage.propTypes = { + publishNotification: func.isRequired, + params: shape({ + id: string, + }).isRequired, + router: shape({ + push: func.isRequired, + }).isRequired, + source: shape({ + id: string.isRequired, + url: string.isRequired, + kapacitors: array, + }), + location: shape({pathname: string, hash: string}).isRequired, +} + +const mapDispatchToProps = dispatch => ({ + publishNotification: bindActionCreators(publishNotificationAction, dispatch), +}) + +export default connect(null, mapDispatchToProps)(withRouter(KapacitorPage)) diff --git a/ui/src/kapacitor/containers/KapacitorRulePage.js b/ui/src/kapacitor/containers/KapacitorRulePage.js index daf9728505..16bb3bde40 100644 --- a/ui/src/kapacitor/containers/KapacitorRulePage.js +++ b/ui/src/kapacitor/containers/KapacitorRulePage.js @@ -10,6 +10,7 @@ import {getActiveKapacitor, getKapacitorConfig} from 'shared/apis/index' import {DEFAULT_RULE_ID} from 'src/kapacitor/constants' import KapacitorRule from 'src/kapacitor/components/KapacitorRule' import parseHandlersFromConfig from 'src/shared/parsing/parseHandlersFromConfig' +import {publishNotification as publishNotificationAction} from 'shared/actions/notifications' class KapacitorRulePage extends Component { constructor(props) { @@ -22,7 +23,7 @@ class KapacitorRulePage extends Component { } async componentDidMount() { - const {params, source, ruleActions, addFlashMessage} = this.props + const {params, source, ruleActions, publishNotification} = this.props if (params.ruleID === 'new') { ruleActions.loadDefaultRule() @@ -32,8 +33,10 @@ class KapacitorRulePage extends Component { const kapacitor = await getActiveKapacitor(this.props.source) if (!kapacitor) { - return addFlashMessage({ - type: 'error', + return publishNotification({ + type: 'danger', + icon: 'alert-triangle', + duration: 10000, text: "We couldn't find a configured Kapacitor for this source", // eslint-disable-line quotes }) } @@ -43,8 +46,10 @@ class KapacitorRulePage extends Component { const handlersFromConfig = parseHandlersFromConfig(kapacitorConfig) this.setState({kapacitor, handlersFromConfig}) } catch (error) { - addFlashMessage({ - type: 'error', + publishNotification({ + type: 'danger', + icon: 'alert-triangle', + duration: 10000, text: 'There was a problem communicating with Kapacitor', }) console.error(error) @@ -60,7 +65,6 @@ class KapacitorRulePage extends Component { router, ruleActions, queryConfigs, - addFlashMessage, queryConfigActions, } = this.props const {handlersFromConfig, kapacitor} = this.state @@ -79,7 +83,6 @@ class KapacitorRulePage extends Component { queryConfigs={queryConfigs} queryConfigActions={queryConfigActions} ruleActions={ruleActions} - addFlashMessage={addFlashMessage} handlersFromConfig={handlersFromConfig} ruleID={params.ruleID} router={router} @@ -99,7 +102,7 @@ KapacitorRulePage.propTypes = { self: string.isRequired, }), }), - addFlashMessage: func, + publishNotification: func, rules: shape({}).isRequired, queryConfigs: shape({}).isRequired, ruleActions: shape({ @@ -128,6 +131,7 @@ const mapStateToProps = ({rules, kapacitorQueryConfigs: queryConfigs}) => ({ const mapDispatchToProps = dispatch => ({ ruleActions: bindActionCreators(kapacitorRuleActionCreators, dispatch), + publishNotification: bindActionCreators(publishNotificationAction, dispatch), queryConfigActions: bindActionCreators( kapacitorQueryConfigActionCreators, dispatch diff --git a/ui/src/kapacitor/containers/KapacitorRulesPage.js b/ui/src/kapacitor/containers/KapacitorRulesPage.js index 65fa946fad..1f1dd74d2f 100644 --- a/ui/src/kapacitor/containers/KapacitorRulesPage.js +++ b/ui/src/kapacitor/containers/KapacitorRulesPage.js @@ -78,7 +78,6 @@ KapacitorRulesPage.propTypes = { deleteRule: func.isRequired, updateRuleStatus: func.isRequired, }).isRequired, - addFlashMessage: func, } const mapStateToProps = state => { diff --git a/ui/src/kapacitor/containers/KapacitorTasksPage.js b/ui/src/kapacitor/containers/KapacitorTasksPage.js index 5ae7aed4c2..552b465ab1 100644 --- a/ui/src/kapacitor/containers/KapacitorTasksPage.js +++ b/ui/src/kapacitor/containers/KapacitorTasksPage.js @@ -12,7 +12,6 @@ export const KapacitorTasksPage = React.createClass({ kapacitors: PropTypes.string.isRequired, }).isRequired, }).isRequired, - addFlashMessage: PropTypes.func, }, getInitialState() { diff --git a/ui/src/shared/actions/sources.js b/ui/src/shared/actions/sources.js index e19710492e..6f1a27a7a9 100644 --- a/ui/src/shared/actions/sources.js +++ b/ui/src/shared/actions/sources.js @@ -72,7 +72,7 @@ export const removeAndLoadSources = source => async dispatch => { dispatch(loadSources(newSources)) } catch (err) { dispatch( - publishNotification('error', 'Internal Server Error. Check API Logs') + publishNotification('danger', 'Internal Server Error. Check API Logs') ) } } @@ -84,7 +84,7 @@ export const fetchKapacitorsAsync = source => async dispatch => { } catch (err) { dispatch( publishNotification( - 'error', + 'danger', `Internal Server Error. Could not retrieve kapacitors for source ${source.id}.` ) ) @@ -105,7 +105,7 @@ export const deleteKapacitorAsync = kapacitor => async dispatch => { } catch (err) { dispatch( publishNotification( - 'error', + 'danger', 'Internal Server Error. Could not delete Kapacitor config.' ) ) diff --git a/ui/src/sources/containers/ManageSources.js b/ui/src/sources/containers/ManageSources.js index cca6b5ff6a..15c5ac7279 100644 --- a/ui/src/sources/containers/ManageSources.js +++ b/ui/src/sources/containers/ManageSources.js @@ -9,6 +9,7 @@ import { setActiveKapacitorAsync, deleteKapacitorAsync, } from 'shared/actions/sources' +import {publishNotification as publishNotificationAction} from 'shared/actions/notifications' import FancyScrollbar from 'shared/components/FancyScrollbar' import SourceIndicator from 'shared/components/SourceIndicator' @@ -36,18 +37,22 @@ class ManageSources extends Component { } handleDeleteSource = source => () => { - const {addFlashMessage} = this.props + const {publishNotification} = this.props try { this.props.removeAndLoadSources(source) - addFlashMessage({ + publishNotification({ type: 'success', - text: `Deleted source ${source.name}`, + icon: 'checkmark', + duration: 5000, + message: `Deleted source ${source.name}`, }) } catch (e) { - addFlashMessage({ - type: 'error', - text: 'Could not remove source from Chronograf', + publishNotification({ + type: 'danger', + icon: 'alert-triangle', + duration: 10000, + message: 'Could not remove source from Chronograf', }) } } @@ -101,7 +106,7 @@ ManageSources.propTypes = { }), }), sources: array, - addFlashMessage: func, + publishNotification: func.isRequired, removeAndLoadSources: func.isRequired, fetchKapacitors: func.isRequired, setActiveKapacitor: func.isRequired, @@ -117,6 +122,7 @@ const mapDispatchToProps = dispatch => ({ fetchKapacitors: bindActionCreators(fetchKapacitorsAsync, dispatch), setActiveKapacitor: bindActionCreators(setActiveKapacitorAsync, dispatch), deleteKapacitor: bindActionCreators(deleteKapacitorAsync, dispatch), + publishNotification: bindActionCreators(publishNotificationAction, dispatch), }) export default connect(mapStateToProps, mapDispatchToProps)(ManageSources)