Rename 'danger' to 'error' to be more semantic

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',

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',

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`,

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',

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`,

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,

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.`,

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`,

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,
       })

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) {

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}.`,

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}`,

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',

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',

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,

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.',
+      })
     )
   }
 }

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',

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}`,

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 {