diff --git a/src/fireedge/src/client/actions/general.js b/src/fireedge/src/client/actions/general.js index 10fc7aa67d..7b5ebe8e01 100644 --- a/src/fireedge/src/client/actions/general.js +++ b/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 diff --git a/src/fireedge/src/client/apps/flow/theme.js b/src/fireedge/src/client/apps/flow/theme.js index 8581fb396d..431f36fe5a 100644 --- a/src/fireedge/src/client/apps/flow/theme.js +++ b/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 } } diff --git a/src/fireedge/src/client/apps/provision/theme.js b/src/fireedge/src/client/apps/provision/theme.js index f4147a1fe7..fc53b948dc 100644 --- a/src/fireedge/src/client/apps/provision/theme.js +++ b/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 } }) diff --git a/src/fireedge/src/client/components/Cards/ProvisionCard.js b/src/fireedge/src/client/components/Cards/ProvisionCard.js index 33d06ac15b..81cb45e20a 100644 --- a/src/fireedge/src/client/components/Cards/ProvisionCard.js +++ b/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 ) ) diff --git a/src/fireedge/src/client/constants/color.js b/src/fireedge/src/client/constants/color.js new file mode 100644 index 0000000000..a4ddde7023 --- /dev/null +++ b/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' + } +} diff --git a/src/fireedge/src/client/constants/datastore.js b/src/fireedge/src/client/constants/datastore.js index 93dff89ee4..cf4154b6ee 100644 --- a/src/fireedge/src/client/constants/datastore.js +++ b/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 } ] diff --git a/src/fireedge/src/client/constants/flow.js b/src/fireedge/src/client/constants/flow.js index fdb29fa48d..45058baf31 100644 --- a/src/fireedge/src/client/constants/flow.js +++ b/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' } ] diff --git a/src/fireedge/src/client/constants/host.js b/src/fireedge/src/client/constants/host.js index d489a5e184..13c3a690dc 100644 --- a/src/fireedge/src/client/constants/host.js +++ b/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 } ] diff --git a/src/fireedge/src/client/constants/provision.js b/src/fireedge/src/client/constants/provision.js index 1db88a1516..5f68de122f 100644 --- a/src/fireedge/src/client/constants/provision.js +++ b/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: '' } ] diff --git a/src/fireedge/src/client/hooks/useProvision.js b/src/fireedge/src/client/hooks/useProvision.js index 00b9822e15..0a3ce3c5b4 100644 --- a/src/fireedge/src/client/hooks/useProvision.js +++ b/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'))) diff --git a/src/fireedge/src/client/providers/notistackProvider.js b/src/fireedge/src/client/providers/notistackProvider.js index 249d40a76a..6f529cee95 100644 --- a/src/fireedge/src/client/providers/notistackProvider.js +++ b/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 } })) diff --git a/src/fireedge/src/client/types/provision.js b/src/fireedge/src/client/types/provision.js index fb4fc6ec26..96fc8c611e 100644 --- a/src/fireedge/src/client/types/provision.js +++ b/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,