F #3951: Fix actions notification (#828)

src/fireedge/src/client/actions/general.js

@@ -73,6 +73,14 @@ module.exports = {
       options: { variant: 'success' }
     }
   }),
+  enqueueInfo: message => ({
+    type: ENQUEUE_SNACKBAR,
+    notification: {
+      key: new Date().getTime() + Math.random(),
+      message,
+      options: { variant: 'info' }
+    }
+  }),
   closeSnackbar: key => ({
     type: CLOSE_SNACKBAR,
     dismissAll: !key, // dismiss all if no key has been defined

src/fireedge/src/client/apps/flow/theme.js

@@ -1,3 +1,5 @@
+import Color from 'client/constants/color'
+
 export default {
   palette: {
     type: 'dark',
@@ -18,11 +20,6 @@ export default {
       dark: 'rgba(0, 152, 195, 1)',
       contrastText: '#fff'
     },
-    error: {
-      light: '#e57373',
-      main: '#f44336',
-      dark: '#d32f2f',
-      contrastText: '#fff'
-    }
+    ...Color
   }
 }

src/fireedge/src/client/apps/provision/theme.js

@@ -1,3 +1,5 @@
+import Color from 'client/constants/color'
+
 export default (mode = 'dark') => ({
   palette: {
     type: mode,
@@ -21,14 +23,6 @@ export default (mode = 'dark') => ({
       dark: '#fe5a23',
       contrastText: '#ffffff'
     },
-    error: {
-      light: '#e57373',
-      main: '#e04d40',
-      dark: '#d32f2f',
-      contrastText: '#ffffff'
-    },
-    debug: {
-      main: '#7b7c7e'
-    }
+    ...Color
   }
 })

src/fireedge/src/client/components/Cards/ProvisionCard.js

@@ -19,16 +19,13 @@ import {
 
 const ProvisionCard = memo(
   ({ value, isSelected, handleClick, isProvider, actions }) => {
-    const [{ image, ...body }, setBody] = useState({})
+    const { ID, NAME, TEMPLATE: { PLAIN = {}, BODY = {} } } = value
 
     const IMAGES_URL = isProvider ? PROVIDER_IMAGES_URL : PROVISION_IMAGES_URL
-    const { ID, NAME, TEMPLATE: { PLAIN = {}, BODY = {} } } = value
-    const stateInfo = PROVISIONS_STATES[body?.state]
+    const bodyData = isProvider ? PLAIN : BODY
 
-    useEffect(() => {
-      const json = isProvider ? PLAIN : BODY
-      setBody({ ...json, image: json.image ?? DEFAULT_IMAGE })
-    }, [])
+    const stateInfo = PROVISIONS_STATES[bodyData?.state]
+    const image = bodyData?.image ?? DEFAULT_IMAGE
 
     const isExternalImage = isExternalURL(image)
 
@@ -84,8 +81,6 @@ const ProvisionCard = memo(
     )
   }, (prev, next) => (
     prev.isSelected === next.isSelected &&
-    !prev.isProvider &&
-    !next.isProvider &&
     prev.value?.TEMPLATE?.BODY?.state === next.value?.TEMPLATE?.BODY?.state
   )
 )

src/fireedge/src/client/constants/color.js

@@ -0,0 +1,32 @@
+export default {
+  error: {
+    light: '#e57373',
+    main: '#ec5840',
+    dark: '#d32f2f',
+    contrastText: '#fff'
+  },
+  warning: {
+    light: '#ffb74d',
+    main: '#ff9800',
+    dark: '#f57c00',
+    contrastText: 'rgba(0, 0, 0, 0.87)'
+  },
+  info: {
+    light: '#64b5f6',
+    main: '#2196f3',
+    dark: '#1976d2',
+    contrastText: '#fff'
+  },
+  success: {
+    light: '#3adb76',
+    main: '#4caf50',
+    dark: '#388e3c',
+    contrastText: 'rgba(0, 0, 0, 0.87)'
+  },
+  debug: {
+    light: '#7f7f7f',
+    main: '#6d6d6d',
+    dark: '#5e5e5e',
+    contrastText: '#fff'
+  }
+}

src/fireedge/src/client/constants/datastore.js

@@ -1,4 +1,5 @@
 import * as STATES from 'client/constants/states'
+import COLOR from 'client/constants/color'
 
 const DATASTORE_TYPES = [
   {
@@ -19,12 +20,12 @@ const DATASTORE_STATES = [
   {
     name: STATES.READY,
     shortName: 'on',
-    color: '#3adb76'
+    color: COLOR.success.main
   },
   {
     name: STATES.DISABLED,
     shortName: 'off',
-    color: '#ec5840'
+    color: COLOR.error.dark
   }
 ]
 

src/fireedge/src/client/constants/flow.js

@@ -1,63 +1,64 @@
 import * as STATES from 'client/constants/states'
+import COLOR from 'client/constants/color'
 
 export const APPLICATION_STATES = [
   {
     name: STATES.PENDING,
-    color: '#4DBBD3',
+    color: COLOR.info.main,
     meaning: `
       The Application starts in this state, and will stay in
       it until the LCM decides to deploy it`
   },
   {
     name: STATES.DEPLOYING,
-    color: '#4DBBD3',
+    color: COLOR.info.main,
     meaning: 'Some Tiers are being deployed'
   },
   {
     name: STATES.RUNNING,
-    color: '#3adb76',
+    color: COLOR.success.main,
     meaning: 'All Tiers are deployed successfully'
   },
   {
     name: STATES.UNDEPLOYING,
-    color: '#ffa07a',
+    color: COLOR.error.light,
     meaning: 'Some Tiers are being undeployed'
   },
   {
     name: STATES.WARNING,
-    color: '#ffa07a',
+    color: COLOR.error.light,
     meaning: 'A VM was found in a failure state'
   },
   {
     name: STATES.DONE,
-    color: '#ec5840',
+    color: COLOR.error.dark,
     meaning: `
       The Applications will stay in this state after
       a successful undeployment. It can be deleted`
   },
   {
     name: STATES.FAILED_UNDEPLOYING,
-    color: '#ec5840',
+    color: COLOR.error.dark,
     meaning: 'An error occurred while undeploying the Application'
   },
   {
     name: STATES.FAILED_DEPLOYING,
-    color: '#ec5840',
+    color: COLOR.error.dark,
     meaning: 'An error occurred while deploying the Application'
   },
   {
     name: STATES.SCALING,
-    color: '#ffa07a',
+    color: COLOR.error.light,
     meaning: 'A Tier is scaling up or down'
   },
   {
     name: STATES.FAILED_SCALING,
-    color: '#ec5840',
+    color: COLOR.error.dark,
     meaning: 'An error occurred while scaling the Application'
   },
   {
     name: STATES.COOLDOWN,
-    color: '#ffa07a',
+    color: COLOR.error.light,
     meaning: 'A Tier is in the cooldown period after a scaling operation'
   }
 ]

src/fireedge/src/client/constants/host.js

@@ -1,50 +1,51 @@
 import * as STATES from 'client/constants/states'
+import COLOR from 'client/constants/color'
 
 const HOST_STATES = [
   {
     name: STATES.INIT,
     shortName: 'init',
-    color: '#4DBBD3'
+    color: COLOR.info.main
   },
   {
     name: STATES.MONITORING_MONITORED,
     shortName: 'update',
-    color: '#4DBBD3'
+    color: COLOR.info.main
   },
   {
     name: STATES.MONITORED,
     shortName: 'on',
-    color: '#3adb76'
+    color: COLOR.success.main
   },
   {
     name: STATES.ERROR,
     shortName: 'err',
-    color: '#ec5840'
+    color: COLOR.error.dark
   },
   {
     name: STATES.DISABLED,
     shortName: 'dsbl',
-    color: '#ffa07a'
+    color: COLOR.error.light
   },
   {
     name: STATES.MONITORING_ERROR,
     shortName: 'retry',
-    color: '#ec5840'
+    color: COLOR.error.dark
   },
   {
     name: STATES.MONITORING_INIT,
     shortName: 'init',
-    color: '#4DBBD3'
+    color: COLOR.info.main
   },
   {
     name: STATES.MONITORING_DISABLED,
     shortName: 'dsbl',
-    color: '#ffa07a'
+    color: COLOR.error.light
   },
   {
     name: STATES.OFFLINE,
     shortName: 'off',
-    color: '#ec5840'
+    color: COLOR.error.dark
   }
 ]
 

src/fireedge/src/client/constants/provision.js

@@ -1,34 +1,35 @@
 import * as STATES from 'client/constants/states'
+import COLOR from 'client/constants/color'
 
 export const PROVISIONS_STATES = [
   {
     name: STATES.PENDING,
-    color: '#966615',
+    color: COLOR.warning.main,
     meaning: ''
   },
   {
     name: STATES.DEPLOYING,
-    color: '#4DBBD3',
+    color: COLOR.info.main,
     meaning: ''
   },
   {
     name: STATES.CONFIGURING,
-    color: '#4DBBD3',
+    color: COLOR.info.main,
     meaning: ''
   },
   {
     name: STATES.RUNNING,
-    color: '#318b77',
+    color: COLOR.success.main,
     meaning: ''
   },
   {
     name: STATES.ERROR,
-    color: '#8c352a',
+    color: COLOR.error.dark,
     meaning: ''
   },
   {
     name: STATES.DELETING,
-    color: '#8c352a',
+    color: COLOR.error.light,
     meaning: ''
   }
 ]

src/fireedge/src/client/hooks/useProvision.js

@@ -8,7 +8,7 @@ import {
   successOneRequest
 } from 'client/actions/pool'
 
-import { enqueueError, enqueueSuccess } from 'client/actions/general'
+import { enqueueError, enqueueSuccess, enqueueInfo } from 'client/actions/general'
 
 import * as serviceProvision from 'client/services/provision'
 
@@ -153,11 +153,11 @@ export default function useProvision () {
       serviceProvision
         .createProvision({ data })
         .then(doc => {
-          dispatch(enqueueSuccess('Provision created'))
+          dispatch(enqueueInfo('Creating provision'))
           return doc.data
         })
         .catch(err => {
-          dispatch(enqueueError(err?.message ?? 'Error CREATE Provision'))
+          dispatch(enqueueError(err?.message ?? 'Error creating provision'))
         }),
     [dispatch]
   )
@@ -167,10 +167,10 @@ export default function useProvision () {
       serviceProvision
         .configureProvision({ id })
         .then(doc => {
-          dispatch(enqueueSuccess(`Provision configuring - ID: ${id}`))
+          dispatch(enqueueInfo(`Configuring provision - ID: ${id}`))
           return doc
         })
-        .catch(err => dispatch(enqueueError(err ?? 'Error CONFIGURE provision')))
+        .catch(err => dispatch(enqueueError(err ?? 'Error configuring provision')))
     , [dispatch]
   )
 
@@ -178,9 +178,9 @@ export default function useProvision () {
     ({ id }) =>
       serviceProvision
         .deleteProvision({ id })
-        .then(() => dispatch(enqueueSuccess(`Provision deleted - ID: ${id}`)))
+        .then(() => dispatch(enqueueInfo(`Deleting provision - ID: ${id}`)))
         .then(() => getProvisions())
-        .catch(err => dispatch(enqueueError(err ?? 'Error DELETE provision')))
+        .catch(err => dispatch(enqueueError(err ?? 'Error deleting provision')))
     , [dispatch]
   )
 
@@ -201,7 +201,7 @@ export default function useProvision () {
       serviceProvision
         .deleteDatastore({ id })
         .then(doc => {
-          dispatch(enqueueSuccess(`Datastore deleted - ID: ${doc}`))
+          dispatch(enqueueSuccess(`Datastore deleted - ID: ${id}`))
           return doc
         })
         .catch(err => dispatch(enqueueError(err ?? 'Error DELETE datastore')))
@@ -237,7 +237,7 @@ export default function useProvision () {
       serviceProvision
         .configureHost({ id })
         .then(doc => {
-          dispatch(enqueueSuccess(`Host configuring - ID: ${id}`))
+          dispatch(enqueueInfo(`Configuring host - ID: ${id}`))
           return doc
         })
         .catch(err => dispatch(enqueueError(err ?? 'Error CONFIGURE host')))

src/fireedge/src/client/providers/notistackProvider.js

@@ -6,16 +6,20 @@ import { makeStyles } from '@material-ui/core/styles'
 
 const useStyles = makeStyles(({ palette }) => ({
   variantSuccess: {
-    backgroundColor: `${palette.success.main} !important`
+    backgroundColor: `${palette.success.main} !important`,
+    color: palette.success.contrastText
   },
   variantError: {
-    backgroundColor: `${palette.error.main} !important`
+    backgroundColor: `${palette.error.main} !important`,
+    color: palette.error.contrastText
   },
   variantInfo: {
-    backgroundColor: `${palette.info.main} !important`
+    backgroundColor: `${palette.debug.main} !important`,
+    color: palette.debug.contrastText
   },
   variantWarning: {
-    backgroundColor: `${palette.warning.main} !important`
+    backgroundColor: `${palette.warning.main} !important`,
+    color: palette.warning.contrastText
   }
 }))
 

src/fireedge/src/client/types/provision.js

@@ -104,7 +104,10 @@ export const Provider = PropTypes.shape({
         provider: ProviderType,
         connection: PropTypes.objectOf(PropTypes.string),
         registration_time: PropTypes.number,
-        description: PropTypes.string,
+        description: PropTypes.oneOfType([
+          PropTypes.string,
+          PropTypes.number
+        ]),
         inputs: PropTypes.arrayOf(UserInput)
       }).isRequired
     ])
@@ -138,7 +141,10 @@ export const Provision = PropTypes.shape({
   TEMPLATE: PropTypes.shape({
     BODY: PropTypes.shape({
       name: PropTypes.string,
-      description: PropTypes.string,
+      description: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.number
+      ]),
       start_time: PropTypes.number,
       state: PropTypes.number,
       provider: PropTypes.string,