diff --git a/ui/src/CheckSources.js b/ui/src/CheckSources.js index 831352f88..da608f09b 100644 --- a/ui/src/CheckSources.js +++ b/ui/src/CheckSources.js @@ -86,7 +86,7 @@ class CheckSources extends Component { if (!isFetching && isUsingAuth && !organizations.length) { publishNotification({ - type: 'danger', + type: 'error', icon: 'alert-triangle', duration: 10000, message: @@ -100,7 +100,7 @@ class CheckSources extends Component { !organizations.find(o => o.id === currentOrganization.id) ) { publishNotification({ - type: 'danger', + type: 'error', icon: 'alert-triangle', duration: 10000, message: 'You were removed from your current organization', @@ -127,7 +127,7 @@ class CheckSources extends Component { } // if you're a viewer and there are no sources, go to purgatory. publishNotification({ - type: 'danger', + type: 'error', icon: 'alert-triangle', duration: 10000, message: 'Organization has no sources configured', diff --git a/ui/src/admin/components/DatabaseRow.js b/ui/src/admin/components/DatabaseRow.js index f683f3c00..261f2ab58 100644 --- a/ui/src/admin/components/DatabaseRow.js +++ b/ui/src/admin/components/DatabaseRow.js @@ -116,7 +116,7 @@ class DatabaseRow extends Component { if (!duration || (isRFDisplayed && !replication)) { publishNotification({ - type: 'danger', + type: 'error', icon: 'alert-triangle', duration: 10000, message: 'Fields cannot be empty', diff --git a/ui/src/admin/components/DatabaseTableHeader.js b/ui/src/admin/components/DatabaseTableHeader.js index e9b6e26f2..69a4d1b5e 100644 --- a/ui/src/admin/components/DatabaseTableHeader.js +++ b/ui/src/admin/components/DatabaseTableHeader.js @@ -81,7 +81,7 @@ const Header = ({ const onConfirm = db => { if (database.deleteCode !== `DELETE ${database.name}`) { return publishNotification({ - type: 'danger', + type: 'error', icon: 'alert-triangle', duration: 10000, message: `Type DELETE ${database.name} to confirm`, diff --git a/ui/src/admin/containers/AdminInfluxDBPage.js b/ui/src/admin/containers/AdminInfluxDBPage.js index c9c55eeb5..5ef5356df 100644 --- a/ui/src/admin/containers/AdminInfluxDBPage.js +++ b/ui/src/admin/containers/AdminInfluxDBPage.js @@ -76,7 +76,7 @@ class AdminInfluxDBPage extends Component { const {publishNotification} = this.props if (!isValidUser(user)) { publishNotification({ - type: 'danger', + type: 'error', icon: 'alert-triangle', duration: 10000, message: 'Username and/or password too short', @@ -94,7 +94,7 @@ class AdminInfluxDBPage extends Component { const {publishNotification} = this.props if (!isValidRole(role)) { publishNotification({ - type: 'danger', + type: 'error', icon: 'alert-triangle', duration: 10000, message: 'Role name too short', diff --git a/ui/src/admin/containers/DatabaseManagerPage.js b/ui/src/admin/containers/DatabaseManagerPage.js index aa5c02fb3..10915cd7f 100644 --- a/ui/src/admin/containers/DatabaseManagerPage.js +++ b/ui/src/admin/containers/DatabaseManagerPage.js @@ -36,7 +36,7 @@ class DatabaseManagerPage extends Component { const {actions, publishNotification, source, databases} = this.props if (!database.name) { return publishNotification({ - type: 'danger', + type: 'error', icon: 'alert-triangle', duration: 10000, message: 'Database name cannot be blank', @@ -45,7 +45,7 @@ class DatabaseManagerPage extends Component { if (_.findIndex(databases, {name: database.name}, 1) !== -1) { return publishNotification({ - type: 'danger', + type: 'error', icon: 'alert-triangle', duration: 10000, message: 'A database by this name already exists', @@ -71,7 +71,7 @@ class DatabaseManagerPage extends Component { if (key === 'Enter') { if (!database.name) { return publishNotification({ - type: 'danger', + type: 'error', icon: 'alert-triangle', duration: 10000, message: 'Database name cannot be blank', @@ -80,7 +80,7 @@ class DatabaseManagerPage extends Component { if (_.findIndex(databases, {name: database.name}, 1) !== -1) { return publishNotification({ - type: 'danger', + type: 'error', icon: 'alert-triangle', duration: 10000, message: 'A database by this name already exists', @@ -102,7 +102,7 @@ class DatabaseManagerPage extends Component { if (key === 'Enter') { if (database.deleteCode !== `DELETE ${database.name}`) { return publishNotification({ - type: 'danger', + type: 'error', icon: 'alert-triangle', duration: 10000, message: `Please type DELETE ${database.name} to confirm`, diff --git a/ui/src/admin/containers/QueriesPage.js b/ui/src/admin/containers/QueriesPage.js index 4f421b453..607c30515 100644 --- a/ui/src/admin/containers/QueriesPage.js +++ b/ui/src/admin/containers/QueriesPage.js @@ -44,7 +44,7 @@ class QueriesPage extends Component { if (errors.length) { errors.forEach(message => publishNotification({ - type: 'danger', + type: 'error', icon: 'alert-triangle', duration: 10000, message, @@ -62,7 +62,7 @@ class QueriesPage extends Component { if (result.errors.length) { result.errors.forEach(message => publishNotification({ - type: 'danger', + type: 'error', icon: 'alert-triangle', duration: 10000, message, diff --git a/ui/src/dashboards/components/template_variables/Row.js b/ui/src/dashboards/components/template_variables/Row.js index 18a1a81bd..b667e23a1 100644 --- a/ui/src/dashboards/components/template_variables/Row.js +++ b/ui/src/dashboards/components/template_variables/Row.js @@ -145,7 +145,7 @@ class RowWrapper extends Component { if (tempVarAlreadyExists(tempVar, id)) { return publishNotification({ - type: 'danger', + type: 'error', icon: 'alert-triangle', duration: 10000, message: `Variable '${_tempVar}' already exists. Please enter a new value.`, diff --git a/ui/src/dashboards/containers/DashboardPage.js b/ui/src/dashboards/containers/DashboardPage.js index c33ac0a13..dea5e5b1f 100644 --- a/ui/src/dashboards/containers/DashboardPage.js +++ b/ui/src/dashboards/containers/DashboardPage.js @@ -91,7 +91,7 @@ class DashboardPage extends Component { if (!dashboard) { router.push(`/sources/${source.id}/dashboards`) return publishNotification({ - type: 'danger', + type: 'error', icon: 'alert-triangle', duration: 10000, message: `Dashboard ${dashboardID} could not be found`, diff --git a/ui/src/hosts/containers/HostsPage.js b/ui/src/hosts/containers/HostsPage.js index 860ff73a1..eed7f25e0 100644 --- a/ui/src/hosts/containers/HostsPage.js +++ b/ui/src/hosts/containers/HostsPage.js @@ -54,7 +54,7 @@ class HostsPage extends Component { console.error(error) publishNotification({ icon: 'alert-triangle', - type: 'danger', + type: 'error', duration: 5000, message: hostsError, }) @@ -75,7 +75,7 @@ class HostsPage extends Component { const layoutError = 'Unable to get apps for hosts' publishNotification({ icon: 'alert-triangle', - type: 'danger', + type: 'error', duration: 5000, message: layoutError, }) diff --git a/ui/src/kapacitor/actions/view/index.js b/ui/src/kapacitor/actions/view/index.js index da0c4f32d..eb50494a8 100644 --- a/ui/src/kapacitor/actions/view/index.js +++ b/ui/src/kapacitor/actions/view/index.js @@ -171,12 +171,22 @@ export const deleteRule = rule => dispatch => { .then(() => { dispatch(deleteRuleSuccess(rule.id)) dispatch( - publishNotification('success', `${rule.name} deleted successfully`) + publishNotification({ + type: 'success', + icon: 'checkmark', + duration: 5000, + message: `${rule.name} deleted successfully`, + }) ) }) .catch(() => { dispatch( - publishNotification('danger', `${rule.name} could not be deleted`) + publishNotification({ + type: 'error', + icon: 'alert-triangle', + duration: 10000, + message: `${rule.name} could not be deleted`, + }) ) }) } @@ -185,12 +195,22 @@ export const updateRuleStatus = (rule, status) => dispatch => { updateRuleStatusAPI(rule, status) .then(() => { dispatch( - publishNotification('success', `${rule.name} ${status} successfully`) + publishNotification({ + type: 'success', + icon: 'checkmark', + duration: 5000, + message: `${rule.name} ${status} successfully`, + }) ) }) .catch(() => { dispatch( - publishNotification('danger', `${rule.name} could not be ${status}`) + publishNotification({ + type: 'error', + icon: 'alert-triangle', + duration: 10000, + message: `${rule.name} could not be ${status}`, + }) ) }) } @@ -198,7 +218,14 @@ export const updateRuleStatus = (rule, status) => dispatch => { export const createTask = (kapacitor, task) => async dispatch => { try { const {data} = await createTaskAJAX(kapacitor, task) - dispatch(publishNotification('success', 'TICKscript successfully created')) + dispatch( + publishNotification({ + type: 'success', + icon: 'checkmark', + duration: 5000, + message: 'TICKscript successfully created', + }) + ) return data } catch (error) { if (!error) { @@ -218,7 +245,14 @@ export const updateTask = ( ) => async dispatch => { try { const {data} = await updateTaskAJAX(kapacitor, task, ruleID, sourceID) - dispatch(publishNotification('success', 'TICKscript saved')) + dispatch( + publishNotification({ + type: 'success', + icon: 'checkmark', + duration: 5000, + message: 'TICKscript saved', + }) + ) return data } catch (error) { if (!error) { diff --git a/ui/src/kapacitor/components/AlertTabs.js b/ui/src/kapacitor/components/AlertTabs.js index 466820172..bc58ac8ec 100644 --- a/ui/src/kapacitor/components/AlertTabs.js +++ b/ui/src/kapacitor/components/AlertTabs.js @@ -53,7 +53,7 @@ class AlertTabs extends Component { } catch (error) { this.setState({configSections: null}) this.props.publishNotification({ - type: 'danger', + type: 'error', icon: 'alert-triangle', duration: 10000, text: 'There was an error getting the Kapacitor config', @@ -97,7 +97,7 @@ class AlertTabs extends Component { } catch ({data: {error}}) { const errorMsg = _.join(_.drop(_.split(error, ': '), 2), ': ') this.props.publishNotification({ - type: 'danger', + type: 'error', icon: 'alert-triangle', duration: 10000, text: `There was an error saving the alert configuration for ${section}: ${errorMsg}`, @@ -121,7 +121,7 @@ class AlertTabs extends Component { }) } else { this.props.publishNotification({ - type: 'danger', + type: 'error', icon: 'alert-triangle', duration: 10000, text: `There was an error sending an alert to ${section}: ${data.message}`, @@ -129,7 +129,7 @@ class AlertTabs extends Component { } } catch (error) { this.props.publishNotification({ - type: 'danger', + type: 'error', icon: 'alert-triangle', duration: 10000, text: `There was an error sending an alert to ${section}.`, diff --git a/ui/src/kapacitor/components/KapacitorRule.js b/ui/src/kapacitor/components/KapacitorRule.js index 042bf43a3..6bf4bec74 100644 --- a/ui/src/kapacitor/components/KapacitorRule.js +++ b/ui/src/kapacitor/components/KapacitorRule.js @@ -56,7 +56,7 @@ class KapacitorRule extends Component { }) .catch(() => { publishNotification({ - type: 'danger', + type: 'error', icon: 'alert-triangle', duration: 10000, text: 'There was a problem creating the rule', @@ -82,7 +82,7 @@ class KapacitorRule extends Component { }) .catch(e => { publishNotification({ - type: 'danger', + type: 'error', icon: 'alert-triangle', duration: 10000, text: `There was a problem saving ${rule.name}: ${e.data.message}`, diff --git a/ui/src/kapacitor/containers/KapacitorPage.js b/ui/src/kapacitor/containers/KapacitorPage.js index 8f3e1a9ce..082d576d4 100644 --- a/ui/src/kapacitor/containers/KapacitorPage.js +++ b/ui/src/kapacitor/containers/KapacitorPage.js @@ -49,7 +49,7 @@ class KapacitorPage extends Component { } catch (error) { this.setState({exists: false}) this.props.publishNotification({ - type: 'danger', + type: 'error', icon: 'alert-triangle', duration: 10000, text: 'Could not connect to Kapacitor. Check settings.', @@ -86,7 +86,7 @@ class KapacitorPage extends Component { if (isNew && isNameTaken) { publishNotification({ - type: 'danger', + type: 'error', icon: 'alert-triangle', duration: 10000, text: `There is already a Kapacitor configuration named "${kapacitor.name}"`, @@ -108,7 +108,7 @@ class KapacitorPage extends Component { }) .catch(() => { publishNotification({ - type: 'danger', + type: 'error', icon: 'alert-triangle', duration: 10000, text: 'There was a problem updating the Kapacitor record', @@ -130,7 +130,7 @@ class KapacitorPage extends Component { }) .catch(() => { publishNotification({ - type: 'danger', + type: 'error', icon: 'alert-triangle', duration: 10000, text: 'There was a problem creating the Kapacitor record', diff --git a/ui/src/kapacitor/containers/KapacitorRulePage.js b/ui/src/kapacitor/containers/KapacitorRulePage.js index 16bb3bde4..a8f6de590 100644 --- a/ui/src/kapacitor/containers/KapacitorRulePage.js +++ b/ui/src/kapacitor/containers/KapacitorRulePage.js @@ -34,7 +34,7 @@ class KapacitorRulePage extends Component { const kapacitor = await getActiveKapacitor(this.props.source) if (!kapacitor) { return publishNotification({ - type: 'danger', + type: 'error', icon: 'alert-triangle', duration: 10000, text: "We couldn't find a configured Kapacitor for this source", // eslint-disable-line quotes @@ -47,7 +47,7 @@ class KapacitorRulePage extends Component { this.setState({kapacitor, handlersFromConfig}) } catch (error) { publishNotification({ - type: 'danger', + type: 'error', icon: 'alert-triangle', duration: 10000, text: 'There was a problem communicating with Kapacitor', diff --git a/ui/src/kapacitor/containers/TickscriptPage.js b/ui/src/kapacitor/containers/TickscriptPage.js index a6b73c3a0..cc6536405 100644 --- a/ui/src/kapacitor/containers/TickscriptPage.js +++ b/ui/src/kapacitor/containers/TickscriptPage.js @@ -119,7 +119,7 @@ class TickscriptPage extends Component { } catch (error) { console.error(error) publishNotification({ - type: 'danger', + type: 'error', icon: 'alert-triangle', duration: 10000, message: error, diff --git a/ui/src/shared/actions/sources.js b/ui/src/shared/actions/sources.js index 6f1a27a7a..4de34dd79 100644 --- a/ui/src/shared/actions/sources.js +++ b/ui/src/shared/actions/sources.js @@ -72,7 +72,12 @@ export const removeAndLoadSources = source => async dispatch => { dispatch(loadSources(newSources)) } catch (err) { dispatch( - publishNotification('danger', 'Internal Server Error. Check API Logs') + publishNotification({ + type: 'error', + icon: 'alert-triangle', + duration: 10000, + mesasage: 'Internal Server Error. Check API Logs', + }) ) } } @@ -83,10 +88,12 @@ export const fetchKapacitorsAsync = source => async dispatch => { dispatch(fetchKapacitors(source, data.kapacitors)) } catch (err) { dispatch( - publishNotification( - 'danger', - `Internal Server Error. Could not retrieve kapacitors for source ${source.id}.` - ) + publishNotification({ + type: 'error', + icon: 'alert-triangle', + duration: 10000, + mesasage: `Internal Server Error. Could not retrieve kapacitors for source ${source.id}.`, + }) ) } } @@ -104,10 +111,12 @@ export const deleteKapacitorAsync = kapacitor => async dispatch => { dispatch(deleteKapacitor(kapacitor)) } catch (err) { dispatch( - publishNotification( - 'danger', - 'Internal Server Error. Could not delete Kapacitor config.' - ) + publishNotification({ + type: 'error', + icon: 'alert-triangle', + duration: 10000, + message: '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 15c5ac727..e9236f896 100644 --- a/ui/src/sources/containers/ManageSources.js +++ b/ui/src/sources/containers/ManageSources.js @@ -49,7 +49,7 @@ class ManageSources extends Component { }) } catch (e) { publishNotification({ - type: 'danger', + type: 'error', icon: 'alert-triangle', duration: 10000, message: 'Could not remove source from Chronograf', diff --git a/ui/src/sources/containers/SourcePage.js b/ui/src/sources/containers/SourcePage.js index 713e7f453..ebe25164c 100644 --- a/ui/src/sources/containers/SourcePage.js +++ b/ui/src/sources/containers/SourcePage.js @@ -101,7 +101,7 @@ class SourcePage extends Component { const error = this._parseError(err) console.error('Error: ', error) publishNotification({ - type: 'danger', + type: 'error', icon: 'alert-triangle', duration: 10000, message: `${bannerText}: ${error}`, diff --git a/ui/src/style/theme/_notifications.scss b/ui/src/style/theme/_notifications.scss index 184dceed1..aae627edc 100644 --- a/ui/src/style/theme/_notifications.scss +++ b/ui/src/style/theme/_notifications.scss @@ -143,7 +143,7 @@ $notification-margin: 12px; .notification-warning { @include notification-styles($c-star,$c-pool,$g20-white,$c-neutrino,$g20-white); } -.notification-danger { +.notification-error { @include notification-styles($c-curacao,$c-star,$g20-white,$c-marmelade,$g20-white); } .notification-info {