diff --git a/src/fireedge/src/client/apps/provision/_app.js b/src/fireedge/src/client/apps/provision/_app.js index 4239634c00..661be5b175 100644 --- a/src/fireedge/src/client/apps/provision/_app.js +++ b/src/fireedge/src/client/apps/provision/_app.js @@ -47,14 +47,14 @@ const ProvisionApp = () => { const { changeAppTitle } = useGeneralApi() useEffect(() => { - (async () => { + ;(async () => { appTitle !== APP_NAME && changeAppTitle(APP_NAME) try { if (jwt) { getAuthUser() - !providerConfig && await getProviderConfig() - !provisionTemplate?.length && await getProvisionsTemplates() + !providerConfig && (await getProviderConfig()) + !provisionTemplate?.length && (await getProvisionsTemplates()) } } catch { logout() @@ -62,10 +62,10 @@ const ProvisionApp = () => { })() }, [jwt]) - const endpoints = useMemo(() => [ - ...ENDPOINTS, - ...(isDevelopment() ? DEV_ENDPOINTS : []) - ], []) + const endpoints = useMemo( + () => [...ENDPOINTS, ...(isDevelopment() ? DEV_ENDPOINTS : [])], + [] + ) if (jwt && firstRender) { return diff --git a/src/fireedge/src/client/apps/provision/index.js b/src/fireedge/src/client/apps/provision/index.js index 537f41ae2c..cca823f7c5 100644 --- a/src/fireedge/src/client/apps/provision/index.js +++ b/src/fireedge/src/client/apps/provision/index.js @@ -67,7 +67,7 @@ const Provision = ({ store = {}, location = '', context = {} }) => ( Provision.propTypes = { location: PropTypes.string, context: PropTypes.object, - store: PropTypes.object + store: PropTypes.object, } Provision.displayName = 'ProvisionApp' diff --git a/src/fireedge/src/client/apps/provision/routes.js b/src/fireedge/src/client/apps/provision/routes.js index 33fed76439..edc3f5bc17 100644 --- a/src/fireedge/src/client/apps/provision/routes.js +++ b/src/fireedge/src/client/apps/provision/routes.js @@ -17,34 +17,49 @@ import { ReportColumns as DashboardIcon, DatabaseSettings as ProvidersIcon, SettingsCloud as ProvisionsIcon, - Settings as SettingsIcon + Settings as SettingsIcon, } from 'iconoir-react' import loadable from '@loadable/component' -const Dashboard = loadable(() => import('client/containers/Dashboard/Provision'), { ssr: false }) +const Dashboard = loadable( + () => import('client/containers/Dashboard/Provision'), + { ssr: false } +) -const Providers = loadable(() => import('client/containers/Providers'), { ssr: false }) -const CreateProvider = loadable(() => import('client/containers/Providers/Create'), { ssr: false }) +const Providers = loadable(() => import('client/containers/Providers'), { + ssr: false, +}) +const CreateProvider = loadable( + () => import('client/containers/Providers/Create'), + { ssr: false } +) -const Provisions = loadable(() => import('client/containers/Provisions'), { ssr: false }) -const CreateProvision = loadable(() => import('client/containers/Provisions/Create'), { ssr: false }) +const Provisions = loadable(() => import('client/containers/Provisions'), { + ssr: false, +}) +const CreateProvision = loadable( + () => import('client/containers/Provisions/Create'), + { ssr: false } +) -const Settings = loadable(() => import('client/containers/Settings'), { ssr: false }) +const Settings = loadable(() => import('client/containers/Settings'), { + ssr: false, +}) export const PATH = { DASHBOARD: '/dashboard', PROVIDERS: { LIST: '/providers', CREATE: '/providers/create', - EDIT: '/providers/edit/:id' + EDIT: '/providers/edit/:id', }, PROVISIONS: { LIST: '/provisions', CREATE: '/provisions/create', - EDIT: '/provisions/edit/:id' + EDIT: '/provisions/edit/:id', }, - SETTINGS: '/settings' + SETTINGS: '/settings', } export const ENDPOINTS = [ @@ -53,49 +68,49 @@ export const ENDPOINTS = [ path: PATH.DASHBOARD, sidebar: true, icon: DashboardIcon, - Component: Dashboard + Component: Dashboard, }, { label: 'Providers', path: PATH.PROVIDERS.LIST, sidebar: true, icon: ProvidersIcon, - Component: Providers + Component: Providers, }, { label: 'Create Provider', path: PATH.PROVIDERS.CREATE, - Component: CreateProvider + Component: CreateProvider, }, { label: 'Edit Provider template', path: PATH.PROVIDERS.EDIT, - Component: CreateProvider + Component: CreateProvider, }, { label: 'Provisions', path: PATH.PROVISIONS.LIST, sidebar: true, icon: ProvisionsIcon, - Component: Provisions + Component: Provisions, }, { label: 'Create Provision', path: PATH.PROVISIONS.CREATE, - Component: CreateProvision + Component: CreateProvision, }, { label: 'Edit Provision template', path: PATH.PROVISIONS.EDIT, - Component: CreateProvision + Component: CreateProvision, }, { label: 'Settings', path: PATH.SETTINGS, sidebar: true, icon: SettingsIcon, - Component: Settings - } + Component: Settings, + }, ] export default { PATH, ENDPOINTS } diff --git a/src/fireedge/src/client/apps/provision/theme.js b/src/fireedge/src/client/apps/provision/theme.js index e86004ca25..517591bd2b 100644 --- a/src/fireedge/src/client/apps/provision/theme.js +++ b/src/fireedge/src/client/apps/provision/theme.js @@ -22,7 +22,7 @@ export default { light: '#2a2d3d', main: '#222431', dark: '#191924', - contrastText: '#ffffff' + contrastText: '#ffffff', }, secondary: { 100: '#ffeae4', @@ -37,7 +37,7 @@ export default { light: '#ffd6c8', main: '#fe835a', dark: '#fe5a23', - contrastText: '#ffffff' - } - } + contrastText: '#ffffff', + }, + }, } diff --git a/src/fireedge/src/client/apps/sunstone/_app.js b/src/fireedge/src/client/apps/sunstone/_app.js index 1b465b97c8..395ed81da7 100644 --- a/src/fireedge/src/client/apps/sunstone/_app.js +++ b/src/fireedge/src/client/apps/sunstone/_app.js @@ -16,7 +16,11 @@ import { useEffect, useMemo, JSXElementConstructor } from 'react' import Router from 'client/router' -import { ENDPOINTS, PATH, getEndpointsByView } from 'client/apps/sunstone/routes' +import { + ENDPOINTS, + PATH, + getEndpointsByView, +} from 'client/apps/sunstone/routes' import { ENDPOINTS as ONE_ENDPOINTS } from 'client/apps/sunstone/routesOne' import { ENDPOINTS as DEV_ENDPOINTS } from 'client/router/dev' @@ -39,7 +43,8 @@ export const APP_NAME = _APPS.sunstone.name */ const SunstoneApp = () => { const { isLogged, jwt, firstRender, view, views, config } = useAuth() - const { getAuthUser, logout, getSunstoneViews, getSunstoneConfig } = useAuthApi() + const { getAuthUser, logout, getSunstoneViews, getSunstoneConfig } = + useAuthApi() const { appTitle } = useGeneral() const { changeAppTitle } = useGeneralApi() @@ -47,14 +52,14 @@ const SunstoneApp = () => { const { getOneConfig } = useSystemApi() useEffect(() => { - (async () => { + ;(async () => { appTitle !== APP_NAME && changeAppTitle(APP_NAME) try { if (jwt) { getAuthUser() - !view && await getSunstoneViews() - !config && await getSunstoneConfig() + !view && (await getSunstoneViews()) + !config && (await getSunstoneConfig()) !oneConfig && getOneConfig() } } catch { @@ -63,11 +68,14 @@ const SunstoneApp = () => { })() }, [jwt]) - const endpoints = useMemo(() => [ - ...ENDPOINTS, - ...(view ? getEndpointsByView(views?.[view], ONE_ENDPOINTS) : []), - ...(isDevelopment() ? DEV_ENDPOINTS : []) - ], [view]) + const endpoints = useMemo( + () => [ + ...ENDPOINTS, + ...(view ? getEndpointsByView(views?.[view], ONE_ENDPOINTS) : []), + ...(isDevelopment() ? DEV_ENDPOINTS : []), + ], + [view] + ) if (jwt && firstRender) { return diff --git a/src/fireedge/src/client/apps/sunstone/index.js b/src/fireedge/src/client/apps/sunstone/index.js index 6520bd7bc7..c457fec973 100644 --- a/src/fireedge/src/client/apps/sunstone/index.js +++ b/src/fireedge/src/client/apps/sunstone/index.js @@ -45,12 +45,12 @@ const Sunstone = ({ store = {}, location = '', context = {} }) => ( {location && context ? ( - // server build + // server build ) : ( - // browser build + // browser build @@ -64,7 +64,7 @@ const Sunstone = ({ store = {}, location = '', context = {} }) => ( Sunstone.propTypes = { location: PropTypes.string, context: PropTypes.shape({}), - store: PropTypes.shape({}) + store: PropTypes.shape({}), } Sunstone.displayName = 'SunstoneApp' diff --git a/src/fireedge/src/client/apps/sunstone/routes.js b/src/fireedge/src/client/apps/sunstone/routes.js index 0c27f54465..738ff21278 100644 --- a/src/fireedge/src/client/apps/sunstone/routes.js +++ b/src/fireedge/src/client/apps/sunstone/routes.js @@ -15,17 +15,22 @@ * ------------------------------------------------------------------------- */ import { ReportColumns as DashboardIcon, - Settings as SettingsIcon + Settings as SettingsIcon, } from 'iconoir-react' import loadable from '@loadable/component' -const Dashboard = loadable(() => import('client/containers/Dashboard/Sunstone'), { ssr: false }) -const Settings = loadable(() => import('client/containers/Settings'), { ssr: false }) +const Dashboard = loadable( + () => import('client/containers/Dashboard/Sunstone'), + { ssr: false } +) +const Settings = loadable(() => import('client/containers/Settings'), { + ssr: false, +}) export const PATH = { DASHBOARD: '/dashboard', - SETTINGS: '/settings' + SETTINGS: '/settings', } export const ENDPOINTS = [ @@ -35,7 +40,7 @@ export const ENDPOINTS = [ sidebar: true, icon: DashboardIcon, position: 1, - Component: Dashboard + Component: Dashboard, }, { label: 'Settings', @@ -43,8 +48,8 @@ export const ENDPOINTS = [ sidebar: true, icon: SettingsIcon, position: -1, - Component: Settings - } + Component: Settings, + }, ] /** @@ -69,7 +74,7 @@ export const getEndpointsByView = (views, endpoints = []) => { * @param {string} [route.path] - Pathname route * @returns {boolean | object} If user view yaml contains the route, return it */ - const hasRoutePermission = route => + const hasRoutePermission = (route) => views?.some(({ resource_name: name = '', actions: bulkActions = [] }) => { // eg: '/vm-template/instantiate' => ['vm-template', 'instantiate'] const paths = route?.path diff --git a/src/fireedge/src/client/apps/sunstone/routesFlow.js b/src/fireedge/src/client/apps/sunstone/routesFlow.js index b30bc2d731..a65d718abb 100644 --- a/src/fireedge/src/client/apps/sunstone/routesFlow.js +++ b/src/fireedge/src/client/apps/sunstone/routesFlow.js @@ -15,7 +15,7 @@ * ------------------------------------------------------------------------- */ import { List as TemplatesIcons, - Cell4X4 as InstancesIcons + Cell4X4 as InstancesIcons, } from 'iconoir-react' import loadable from '@loadable/component' @@ -39,11 +39,11 @@ export const PATH = { APPLICATIONS_TEMPLATES: { LIST: '/applications-templates', CREATE: '/applications-templates/create', - EDIT: '/applications-templates/edit/:id' + EDIT: '/applications-templates/edit/:id', }, APPLICATIONS: { - LIST: '/applications' - } + LIST: '/applications', + }, } export const ENDPOINTS = [ @@ -52,25 +52,25 @@ export const ENDPOINTS = [ path: PATH.APPLICATIONS_TEMPLATES.LIST, sidebar: true, icon: TemplatesIcons, - Component: ApplicationsTemplates + Component: ApplicationsTemplates, }, { label: 'Create Application template', path: PATH.APPLICATIONS_TEMPLATES.CREATE, - Component: ApplicationsTemplatesFormCreate + Component: ApplicationsTemplatesFormCreate, }, { label: 'Edit Application template', path: PATH.APPLICATIONS_TEMPLATES.EDIT, - Component: ApplicationsTemplatesFormCreate + Component: ApplicationsTemplatesFormCreate, }, { label: 'Service Instances', path: PATH.APPLICATIONS.LIST, sidebar: true, icon: InstancesIcons, - Component: ApplicationsInstances - } + Component: ApplicationsInstances, + }, ] export default { PATH, ENDPOINTS } diff --git a/src/fireedge/src/client/apps/sunstone/routesOne.js b/src/fireedge/src/client/apps/sunstone/routesOne.js index 42b98908af..5af9fe77a4 100644 --- a/src/fireedge/src/client/apps/sunstone/routesOne.js +++ b/src/fireedge/src/client/apps/sunstone/routesOne.js @@ -17,66 +17,107 @@ import { Cell4X4 as InstancesIcons, ModernTv as VmsIcons, Shuffle as VRoutersIcons, - Archive as TemplatesIcon, GoogleDocs as TemplateIcon, - Box as StorageIcon, Db as DatastoreIcon, BoxIso as ImageIcon, SimpleCart as MarketplaceIcon, CloudDownload as MarketplaceAppIcon, - ServerConnection as NetworksIcon, NetworkAlt as NetworkIcon, KeyframesCouple as NetworkTemplateIcon, - CloudSync as InfrastructureIcon, Server as ClusterIcon, HardDrive as HostIcon, MinusPinAlt as ZoneIcon, - Home as SystemIcon, User as UserIcon, - Group as GroupIcon - + Group as GroupIcon, } from 'iconoir-react' import loadable from '@loadable/component' import { RESOURCE_NAMES } from 'client/constants' -const VirtualMachines = loadable(() => import('client/containers/VirtualMachines'), { ssr: false }) -const VirtualMachineDetail = loadable(() => import('client/containers/VirtualMachines/Detail'), { ssr: false }) -const VirtualRouters = loadable(() => import('client/containers/VirtualRouters'), { ssr: false }) +const VirtualMachines = loadable( + () => import('client/containers/VirtualMachines'), + { ssr: false } +) +const VirtualMachineDetail = loadable( + () => import('client/containers/VirtualMachines/Detail'), + { ssr: false } +) +const VirtualRouters = loadable( + () => import('client/containers/VirtualRouters'), + { ssr: false } +) -const VmTemplates = loadable(() => import('client/containers/VmTemplates'), { ssr: false }) -const InstantiateVmTemplate = - loadable(() => import('client/containers/VmTemplates/Instantiate'), { ssr: false }) -const CreateVmTemplate = loadable(() => import('client/containers/VmTemplates/Create'), { ssr: false }) +const VmTemplates = loadable(() => import('client/containers/VmTemplates'), { + ssr: false, +}) +const InstantiateVmTemplate = loadable( + () => import('client/containers/VmTemplates/Instantiate'), + { ssr: false } +) +const CreateVmTemplate = loadable( + () => import('client/containers/VmTemplates/Create'), + { ssr: false } +) // const VrTemplates = loadable(() => import('client/containers/VrTemplates'), { ssr: false }) // const VmGroups = loadable(() => import('client/containers/VmGroups'), { ssr: false }) -const Datastores = loadable(() => import('client/containers/Datastores'), { ssr: false }) -const Images = loadable(() => import('client/containers/Images'), { ssr: false }) -const Marketplaces = loadable(() => import('client/containers/Marketplaces'), { ssr: false }) -const MarketplaceApps = loadable(() => import('client/containers/MarketplaceApps'), { ssr: false }) -const CreateMarketplaceApp = loadable(() => import('client/containers/MarketplaceApps/Create'), { ssr: false }) +const Datastores = loadable(() => import('client/containers/Datastores'), { + ssr: false, +}) +const Images = loadable(() => import('client/containers/Images'), { + ssr: false, +}) +const Marketplaces = loadable(() => import('client/containers/Marketplaces'), { + ssr: false, +}) +const MarketplaceApps = loadable( + () => import('client/containers/MarketplaceApps'), + { ssr: false } +) +const CreateMarketplaceApp = loadable( + () => import('client/containers/MarketplaceApps/Create'), + { ssr: false } +) -const VirtualNetworks = loadable(() => import('client/containers/VirtualNetworks'), { ssr: false }) -const VNetworkTemplates = loadable(() => import('client/containers/VNetworkTemplates'), { ssr: false }) +const VirtualNetworks = loadable( + () => import('client/containers/VirtualNetworks'), + { ssr: false } +) +const VNetworkTemplates = loadable( + () => import('client/containers/VNetworkTemplates'), + { ssr: false } +) // const NetworkTopologies = loadable(() => import('client/containers/NetworkTopologies'), { ssr: false }) // const SecurityGroups = loadable(() => import('client/containers/SecurityGroups'), { ssr: false }) -const Clusters = loadable(() => import('client/containers/Clusters'), { ssr: false }) -const ClusterDetail = loadable(() => import('client/containers/Clusters/Detail'), { ssr: false }) +const Clusters = loadable(() => import('client/containers/Clusters'), { + ssr: false, +}) +const ClusterDetail = loadable( + () => import('client/containers/Clusters/Detail'), + { ssr: false } +) const Hosts = loadable(() => import('client/containers/Hosts'), { ssr: false }) -const HostDetail = loadable(() => import('client/containers/Hosts/Detail'), { ssr: false }) +const HostDetail = loadable(() => import('client/containers/Hosts/Detail'), { + ssr: false, +}) const Zones = loadable(() => import('client/containers/Zones'), { ssr: false }) const Users = loadable(() => import('client/containers/Users'), { ssr: false }) -const UserDetail = loadable(() => import('client/containers/Users/Detail'), { ssr: false }) -const Groups = loadable(() => import('client/containers/Groups'), { ssr: false }) -const GroupDetail = loadable(() => import('client/containers/Groups/Detail'), { ssr: false }) +const UserDetail = loadable(() => import('client/containers/Users/Detail'), { + ssr: false, +}) +const Groups = loadable(() => import('client/containers/Groups'), { + ssr: false, +}) +const GroupDetail = loadable(() => import('client/containers/Groups/Detail'), { + ssr: false, +}) // const VDCs = loadable(() => import('client/containers/VDCs'), { ssr: false }) // const ACLs = loadable(() => import('client/containers/ACLs'), { ssr: false }) @@ -84,77 +125,77 @@ export const PATH = { INSTANCE: { VMS: { LIST: `/${RESOURCE_NAMES.VM}`, - DETAIL: `/${RESOURCE_NAMES.VM}/:id` + DETAIL: `/${RESOURCE_NAMES.VM}/:id`, }, VROUTERS: { - LIST: `/${RESOURCE_NAMES.V_ROUTER}` - } + LIST: `/${RESOURCE_NAMES.V_ROUTER}`, + }, }, TEMPLATE: { VMS: { LIST: `/${RESOURCE_NAMES.VM_TEMPLATE}`, DETAIL: `/${RESOURCE_NAMES.VM_TEMPLATE}/:id`, INSTANTIATE: `/${RESOURCE_NAMES.VM_TEMPLATE}/instantiate`, - CREATE: `/${RESOURCE_NAMES.VM_TEMPLATE}/create` - } + CREATE: `/${RESOURCE_NAMES.VM_TEMPLATE}/create`, + }, }, STORAGE: { DATASTORES: { LIST: `/${RESOURCE_NAMES.DATASTORE}`, - DETAIL: `/${RESOURCE_NAMES.DATASTORE}/:id` + DETAIL: `/${RESOURCE_NAMES.DATASTORE}/:id`, }, IMAGES: { LIST: `/${RESOURCE_NAMES.IMAGE}`, - DETAIL: `/${RESOURCE_NAMES.IMAGE}/:id` + DETAIL: `/${RESOURCE_NAMES.IMAGE}/:id`, }, MARKETPLACES: { LIST: `/${RESOURCE_NAMES.MARKETPLACE}`, - DETAIL: `/${RESOURCE_NAMES.MARKETPLACE}/:id` + DETAIL: `/${RESOURCE_NAMES.MARKETPLACE}/:id`, }, MARKETPLACE_APPS: { LIST: `/${RESOURCE_NAMES.APP}`, DETAIL: `/${RESOURCE_NAMES.APP}/:id`, - CREATE: `/${RESOURCE_NAMES.APP}/create` - } + CREATE: `/${RESOURCE_NAMES.APP}/create`, + }, }, NETWORK: { VNETS: { LIST: `/${RESOURCE_NAMES.VNET}`, - DETAIL: `/${RESOURCE_NAMES.VNET}/:id` + DETAIL: `/${RESOURCE_NAMES.VNET}/:id`, }, VN_TEMPLATES: { LIST: `/${RESOURCE_NAMES.VN_TEMPLATE}`, - DETAIL: `/${RESOURCE_NAMES.VN_TEMPLATE}/:id` + DETAIL: `/${RESOURCE_NAMES.VN_TEMPLATE}/:id`, }, SEC_GROUPS: { LIST: `/${RESOURCE_NAMES.SEC_GROUP}`, - DETAIL: `/${RESOURCE_NAMES.SEC_GROUP}/:id` - } + DETAIL: `/${RESOURCE_NAMES.SEC_GROUP}/:id`, + }, }, INFRASTRUCTURE: { CLUSTERS: { LIST: `/${RESOURCE_NAMES.CLUSTER}`, - DETAIL: `/${RESOURCE_NAMES.CLUSTER}/:id` + DETAIL: `/${RESOURCE_NAMES.CLUSTER}/:id`, }, HOSTS: { LIST: `/${RESOURCE_NAMES.HOST}`, - DETAIL: `/${RESOURCE_NAMES.HOST}/:id` + DETAIL: `/${RESOURCE_NAMES.HOST}/:id`, }, ZONES: { LIST: `/${RESOURCE_NAMES.ZONE}`, - DETAIL: `/${RESOURCE_NAMES.ZONE}/:id` - } + DETAIL: `/${RESOURCE_NAMES.ZONE}/:id`, + }, }, SYSTEM: { USERS: { LIST: `/${RESOURCE_NAMES.USER}`, - DETAIL: `/${RESOURCE_NAMES.USER}/:id` + DETAIL: `/${RESOURCE_NAMES.USER}/:id`, }, GROUPS: { LIST: `/${RESOURCE_NAMES.GROUP}`, - DETAIL: `/${RESOURCE_NAMES.GROUP}/:id` - } - } + DETAIL: `/${RESOURCE_NAMES.GROUP}/:id`, + }, + }, } const ENDPOINTS = [ @@ -168,21 +209,21 @@ const ENDPOINTS = [ path: PATH.INSTANCE.VMS.LIST, sidebar: true, icon: VmsIcons, - Component: VirtualMachines + Component: VirtualMachines, }, { - label: params => `VM #${params.id}`, + label: (params) => `VM #${params.id}`, path: PATH.INSTANCE.VMS.DETAIL, - Component: VirtualMachineDetail + Component: VirtualMachineDetail, }, { label: 'Virtual Routers', path: PATH.INSTANCE.VROUTERS.LIST, sidebar: true, icon: VRoutersIcons, - Component: VirtualRouters - } - ] + Component: VirtualRouters, + }, + ], }, { label: 'Templates', @@ -194,19 +235,19 @@ const ENDPOINTS = [ path: PATH.TEMPLATE.VMS.LIST, sidebar: true, icon: TemplateIcon, - Component: VmTemplates + Component: VmTemplates, }, { label: 'Instantiate VM Template', path: PATH.TEMPLATE.VMS.INSTANTIATE, - Component: InstantiateVmTemplate + Component: InstantiateVmTemplate, }, { label: 'Create VM Template', path: PATH.TEMPLATE.VMS.CREATE, - Component: CreateVmTemplate - } - ] + Component: CreateVmTemplate, + }, + ], }, { label: 'Storage', @@ -218,35 +259,35 @@ const ENDPOINTS = [ path: PATH.STORAGE.DATASTORES.LIST, sidebar: true, icon: DatastoreIcon, - Component: Datastores + Component: Datastores, }, { label: 'Images', path: PATH.STORAGE.IMAGES.LIST, sidebar: true, icon: ImageIcon, - Component: Images + Component: Images, }, { label: 'Marketplaces', path: PATH.STORAGE.MARKETPLACES.LIST, sidebar: true, icon: MarketplaceIcon, - Component: Marketplaces + Component: Marketplaces, }, { label: 'Apps', path: PATH.STORAGE.MARKETPLACE_APPS.LIST, sidebar: true, icon: MarketplaceAppIcon, - Component: MarketplaceApps + Component: MarketplaceApps, }, { label: 'Create Marketplace App', path: PATH.STORAGE.MARKETPLACE_APPS.CREATE, - Component: CreateMarketplaceApp - } - ] + Component: CreateMarketplaceApp, + }, + ], }, { label: 'Networks', @@ -258,16 +299,16 @@ const ENDPOINTS = [ path: PATH.NETWORK.VNETS.LIST, sidebar: true, icon: NetworkIcon, - Component: VirtualNetworks + Component: VirtualNetworks, }, { label: 'Network Templates', path: PATH.NETWORK.VN_TEMPLATES.LIST, sidebar: true, icon: NetworkTemplateIcon, - Component: VNetworkTemplates - } - ] + Component: VNetworkTemplates, + }, + ], }, { label: 'Infrastructure', @@ -279,33 +320,33 @@ const ENDPOINTS = [ path: PATH.INFRASTRUCTURE.CLUSTERS.LIST, sidebar: true, icon: ClusterIcon, - Component: Clusters + Component: Clusters, }, { - label: params => `Clusters #${params.id}`, + label: (params) => `Clusters #${params.id}`, path: PATH.INFRASTRUCTURE.CLUSTERS.DETAIL, - Component: ClusterDetail + Component: ClusterDetail, }, { label: 'Hosts', path: PATH.INFRASTRUCTURE.HOSTS.LIST, sidebar: true, icon: HostIcon, - Component: Hosts + Component: Hosts, }, { - label: params => `Hosts #${params.id}`, + label: (params) => `Hosts #${params.id}`, path: PATH.INFRASTRUCTURE.HOSTS.DETAIL, - Component: HostDetail + Component: HostDetail, }, { label: 'Zones', path: PATH.INFRASTRUCTURE.ZONES.LIST, sidebar: true, icon: ZoneIcon, - Component: Zones - } - ] + Component: Zones, + }, + ], }, { label: 'System', @@ -317,27 +358,27 @@ const ENDPOINTS = [ path: PATH.SYSTEM.USERS.LIST, sidebar: true, icon: UserIcon, - Component: Users + Component: Users, }, { - label: params => `User #${params.id}`, + label: (params) => `User #${params.id}`, path: PATH.SYSTEM.USERS.DETAIL, - Component: UserDetail + Component: UserDetail, }, { label: 'Groups', path: PATH.SYSTEM.GROUPS.LIST, sidebar: true, icon: GroupIcon, - Component: Groups + Component: Groups, }, { - label: params => `Group #${params.id}`, + label: (params) => `Group #${params.id}`, path: PATH.SYSTEM.GROUPS.DETAIL, - Component: GroupDetail - } - ] - } + Component: GroupDetail, + }, + ], + }, ] export { ENDPOINTS } diff --git a/src/fireedge/src/client/apps/sunstone/theme.js b/src/fireedge/src/client/apps/sunstone/theme.js index 63545fbf73..b8c330bf82 100644 --- a/src/fireedge/src/client/apps/sunstone/theme.js +++ b/src/fireedge/src/client/apps/sunstone/theme.js @@ -22,7 +22,7 @@ export default { light: '#2a2d3d', main: '#222431', dark: '#191924', - contrastText: '#ffffff' + contrastText: '#ffffff', }, secondary: { 100: '#dff2f8', @@ -37,7 +37,7 @@ export default { light: '#bfe6f0', main: '#40b3da', dark: '#0099c3', - contrastText: '#fff' - } - } + contrastText: '#fff', + }, + }, } diff --git a/src/fireedge/src/client/components/Alerts/Error.js b/src/fireedge/src/client/components/Alerts/Error.js index 9f20a16de9..9a5e7c4a30 100644 --- a/src/fireedge/src/client/components/Alerts/Error.js +++ b/src/fireedge/src/client/components/Alerts/Error.js @@ -28,11 +28,11 @@ const AlertError = ({ children, ...props }) => ( ) AlertError.propTypes = { - children: PropTypes.oneOfType([PropTypes.string, PropTypes.node]) + children: PropTypes.oneOfType([PropTypes.string, PropTypes.node]), } AlertError.defaultProps = { - children: 'Error!' + children: 'Error!', } export default AlertError diff --git a/src/fireedge/src/client/components/AutoScrollBox/index.js b/src/fireedge/src/client/components/AutoScrollBox/index.js index e319c56fc6..a9c7533dd6 100644 --- a/src/fireedge/src/client/components/AutoScrollBox/index.js +++ b/src/fireedge/src/client/components/AutoScrollBox/index.js @@ -20,112 +20,114 @@ import { Chip, Slide } from '@mui/material' import makeStyles from '@mui/styles/makeStyles' import { Download as GoToBottomIcon } from 'iconoir-react' -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ scrollable: { padding: theme.spacing(1), overflowY: 'scroll', '&::-webkit-scrollbar': { - width: 14 + width: 14, }, '&::-webkit-scrollbar-thumb': { backgroundClip: 'content-box', border: '4px solid transparent', borderRadius: 7, boxShadow: 'inset 0 0 0 10px', - color: theme.palette.secondary.light - } + color: theme.palette.secondary.light, + }, }, wrapperButton: { top: 5, position: 'sticky', - textAlign: 'center' + textAlign: 'center', }, - button: { padding: theme.spacing(0, 2) } + button: { padding: theme.spacing(0, 2) }, })) -const AutoScrollBox = memo(({ - children, - className, - height, - autoButtonText, - preventInteraction, - scrollBehavior, - showOption, - dataCy -}) => { - const classes = useStyles() - const [autoScroll, setAutoScroll] = useState(true) - const containerElement = useRef(null) - - const style = { +const AutoScrollBox = memo( + ({ + children, + className, height, - scrollBehavior: 'auto', - pointerEvents: preventInteraction ? 'none' : 'auto' - } + autoButtonText, + preventInteraction, + scrollBehavior, + showOption, + dataCy, + }) => { + const classes = useStyles() + const [autoScroll, setAutoScroll] = useState(true) + const containerElement = useRef(null) - /** - * Handle mousewheel events on the scroll container. - */ - const onWheel = () => { - const { current } = containerElement - - if (current && showOption) { - setAutoScroll( - current.scrollTop + current.offsetHeight === current.scrollHeight - ) + const style = { + height, + scrollBehavior: 'auto', + pointerEvents: preventInteraction ? 'none' : 'auto', } - } - // Apply the scroll behavior property after the first render, - // so that the initial render is scrolled all the way to the bottom. - useEffect(() => { - setTimeout(() => { + /** + * Handle mousewheel events on the scroll container. + */ + const onWheel = () => { + const { current } = containerElement + + if (current && showOption) { + setAutoScroll( + current.scrollTop + current.offsetHeight === current.scrollHeight + ) + } + } + + // Apply the scroll behavior property after the first render, + // so that the initial render is scrolled all the way to the bottom. + useEffect(() => { + setTimeout(() => { + const { current } = containerElement + + if (current) { + current.style.scrollBehavior = scrollBehavior + } + }, 0) + }, [containerElement, scrollBehavior]) + + // When the children are updated, scroll the container to the bottom. + useEffect(() => { + if (!autoScroll) { + return + } + const { current } = containerElement if (current) { - current.style.scrollBehavior = scrollBehavior + current.scrollTop = current.scrollHeight } - }, 0) - }, [containerElement, scrollBehavior]) + }, [children, containerElement, autoScroll]) - // When the children are updated, scroll the container to the bottom. - useEffect(() => { - if (!autoScroll) { - return - } - - const { current } = containerElement - - if (current) { - current.scrollTop = current.scrollHeight - } - }, [children, containerElement, autoScroll]) - - return ( -
-
- -
- } - color='secondary' - className={classes.button} - label={autoButtonText} - onClick={() => setAutoScroll(true)} - /> -
- - {children} + return ( +
+
+ +
+ } + color="secondary" + className={classes.button} + label={autoButtonText} + onClick={() => setAutoScroll(true)} + /> +
+ + {children} +
-
- ) -}) + ) + } +) AutoScrollBox.propTypes = { // Children to render in the scroll container. @@ -133,10 +135,7 @@ AutoScrollBox.propTypes = { // Extra CSS class names. className: PropTypes.object, // Height value of the scroll container. - height: PropTypes.oneOfType([ - PropTypes.string, - PropTypes.number - ]), + height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), // Text to use for the auto scroll option. autoButtonText: PropTypes.string, // Prevent all mouse interaction with the scroll container. @@ -145,7 +144,7 @@ AutoScrollBox.propTypes = { scrollBehavior: PropTypes.oneOf(['smooth', 'auto']), // Show the auto scroll option. showOption: PropTypes.bool, - dataCy: PropTypes.string + dataCy: PropTypes.string, } AutoScrollBox.defaultProps = { @@ -156,7 +155,7 @@ AutoScrollBox.defaultProps = { preventInteraction: false, scrollBehavior: 'smooth', showOption: true, - dataCy: 'auto-scroll' + dataCy: 'auto-scroll', } AutoScrollBox.displayName = 'AutoScrollBox' diff --git a/src/fireedge/src/client/components/Cards/ApplicationCard.js b/src/fireedge/src/client/components/Cards/ApplicationCard.js index 58ac6033de..e6dd06385b 100644 --- a/src/fireedge/src/client/components/Cards/ApplicationCard.js +++ b/src/fireedge/src/client/components/Cards/ApplicationCard.js @@ -24,52 +24,55 @@ import SelectCard from 'client/components/Cards/SelectCard' import { Tr } from 'client/components/HOC' import { T, APPLICATION_STATES } from 'client/constants' -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ content: { display: 'flex', - gap: theme.spacing(1) - } + gap: theme.spacing(1), + }, })) -const ApplicationCard = memo( - ({ value, handleShow, handleRemove }) => { - const classes = useStyles() - const { ID, NAME, TEMPLATE } = value - const { description, state } = TEMPLATE.BODY +const ApplicationCard = memo(({ value, handleShow, handleRemove }) => { + const classes = useStyles() + const { ID, NAME, TEMPLATE } = value + const { description, state } = TEMPLATE.BODY - const stateInfo = APPLICATION_STATES[state] + const stateInfo = APPLICATION_STATES[state] - return ( - } - title={`${ID} - ${NAME}`} - subheader={description} - > - - - - - - - {handleShow && ( - - )} - {handleRemove && ( - - )} - - - ) - } -) + return ( + } + title={`${ID} - ${NAME}`} + subheader={description} + > + + + + + + + {handleShow && ( + + )} + {handleRemove && ( + + )} + + + ) +}) ApplicationCard.propTypes = { value: PropTypes.shape({ @@ -80,18 +83,18 @@ ApplicationCard.propTypes = { description: PropTypes.string, state: PropTypes.number, networks: PropTypes.object, - roles: PropTypes.arrayOf(PropTypes.object) - }).isRequired - }).isRequired + roles: PropTypes.arrayOf(PropTypes.object), + }).isRequired, + }).isRequired, }), handleShow: PropTypes.func, - handleRemove: PropTypes.func + handleRemove: PropTypes.func, } ApplicationCard.defaultProps = { value: {}, handleShow: undefined, - handleRemove: undefined + handleRemove: undefined, } ApplicationCard.displayName = 'Application TemplateCard' diff --git a/src/fireedge/src/client/components/Cards/ApplicationNetworkCard.js b/src/fireedge/src/client/components/Cards/ApplicationNetworkCard.js index d7167e2ed9..bc0aee93df 100644 --- a/src/fireedge/src/client/components/Cards/ApplicationNetworkCard.js +++ b/src/fireedge/src/client/components/Cards/ApplicationNetworkCard.js @@ -22,54 +22,55 @@ import SelectCard from 'client/components/Cards/SelectCard' import { Tr } from 'client/components/HOC' import { T } from 'client/constants' -const ApplicationNetworkCard = memo(({ - value, - isSelected, - handleClick, - handleEdit, - handleClone, - handleRemove -}) => { - const { mandatory, name, description } = value +const ApplicationNetworkCard = memo( + ({ + value, + isSelected, + handleClick, + handleEdit, + handleClone, + handleRemove, + }) => { + const { mandatory, name, description } = value - return ( - - - {handleEdit && ( - - )} - {handleClone && ( - - )} - {handleRemove && ( - - )} - - - ) -} + return ( + + + {handleEdit && ( + + )} + {handleClone && ( + + )} + {handleRemove && ( + + )} + + + ) + } ) ApplicationNetworkCard.propTypes = { @@ -79,13 +80,13 @@ ApplicationNetworkCard.propTypes = { description: PropTypes.string, type: PropTypes.string, id: PropTypes.string, - extra: PropTypes.string + extra: PropTypes.string, }), isSelected: PropTypes.bool, handleClick: PropTypes.func, handleEdit: PropTypes.func, handleClone: PropTypes.func, - handleRemove: PropTypes.func + handleRemove: PropTypes.func, } ApplicationNetworkCard.defaultProps = { @@ -94,7 +95,7 @@ ApplicationNetworkCard.defaultProps = { handleClick: undefined, handleEdit: undefined, handleClone: undefined, - handleRemove: undefined + handleRemove: undefined, } ApplicationNetworkCard.displayName = 'ApplicationNetworkCard' diff --git a/src/fireedge/src/client/components/Cards/ApplicationTemplateCard.js b/src/fireedge/src/client/components/Cards/ApplicationTemplateCard.js index 30510feaab..9e3edb166a 100644 --- a/src/fireedge/src/client/components/Cards/ApplicationTemplateCard.js +++ b/src/fireedge/src/client/components/Cards/ApplicationTemplateCard.js @@ -21,18 +21,18 @@ import makeStyles from '@mui/styles/makeStyles' import { Page as FileIcon, HardDrive as HostIcon, - Network as NetworkIcon + Network as NetworkIcon, } from 'iconoir-react' import SelectCard from 'client/components/Cards/SelectCard' import { Tr } from 'client/components/HOC' import { T } from 'client/constants' -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ badgesWrapper: { display: 'flex', - gap: theme.typography.pxToRem(12) - } + gap: theme.typography.pxToRem(12), + }, })) const ApplicationTemplateCard = memo( @@ -47,11 +47,7 @@ const ApplicationTemplateCard = memo( const badgePosition = { vertical: 'top', horizontal: 'right' } return ( - } - title={NAME} - subheader={description} - > + } title={NAME} subheader={description}> ({ +const useStyles = makeStyles((theme) => ({ badgesWrapper: { display: 'flex', - gap: theme.typography.pxToRem(12) - } + gap: theme.typography.pxToRem(12), + }, })) const ClusterCard = memo( @@ -100,25 +100,25 @@ ClusterCard.propTypes = { NAME: PropTypes.string.isRequired, HOSTS: PropTypes.oneOfType([ PropTypes.arrayOf(PropTypes.object), - PropTypes.object + PropTypes.object, ]), VNETS: PropTypes.oneOfType([ PropTypes.arrayOf(PropTypes.object), - PropTypes.object + PropTypes.object, ]), DATASTORES: PropTypes.oneOfType([ PropTypes.arrayOf(PropTypes.object), - PropTypes.object - ]) + PropTypes.object, + ]), }), isSelected: PropTypes.bool, - handleClick: PropTypes.func + handleClick: PropTypes.func, } ClusterCard.defaultProps = { value: {}, isSelected: false, - handleClick: undefined + handleClick: undefined, } ClusterCard.displayName = 'ClusterCard' diff --git a/src/fireedge/src/client/components/Cards/DatastoreCard.js b/src/fireedge/src/client/components/Cards/DatastoreCard.js index 1f454b920b..d3994db972 100644 --- a/src/fireedge/src/client/components/Cards/DatastoreCard.js +++ b/src/fireedge/src/client/components/Cards/DatastoreCard.js @@ -21,22 +21,26 @@ import makeStyles from '@mui/styles/makeStyles' import { Folder as DatastoreIcon } from 'iconoir-react' import SelectCard, { Action } from 'client/components/Cards/SelectCard' -import { StatusBadge, StatusChip, LinearProgressWithLabel } from 'client/components/Status' +import { + StatusBadge, + StatusChip, + LinearProgressWithLabel, +} from 'client/components/Status' import * as DatastoreModel from 'client/models/Datastore' -const useStyles = makeStyles(({ +const useStyles = makeStyles({ title: { display: 'flex', - gap: '0.5rem' + gap: '0.5rem', }, content: { padding: '2em', display: 'flex', flexFlow: 'column', - gap: '1em' - } -})) + gap: '1em', + }, +}) const DatastoreCard = memo( ({ value, isSelected, handleClick, actions }) => { @@ -47,16 +51,14 @@ const DatastoreCard = memo( const type = DatastoreModel.getType(value) const state = DatastoreModel.getState(value) - const { - percentOfUsed, - percentLabel - } = DatastoreModel.getCapacityInfo(value) + const { percentOfUsed, percentLabel } = + DatastoreModel.getCapacityInfo(value) return ( + action={actions?.map((action) => ( - )} + ))} icon={ @@ -64,7 +66,7 @@ const DatastoreCard = memo( } title={ - + {NAME} @@ -80,10 +82,9 @@ const DatastoreCard = memo( ) }, - (prev, next) => ( + (prev, next) => prev.isSelected === next.isSelected && prev.value?.STATE === next.value?.STATE - ) ) DatastoreCard.propTypes = { @@ -94,7 +95,7 @@ DatastoreCard.propTypes = { STATE: PropTypes.string, TOTAL_MB: PropTypes.string, FREE_MB: PropTypes.string, - USED_MB: PropTypes.string + USED_MB: PropTypes.string, }), isSelected: PropTypes.bool, handleClick: PropTypes.func, @@ -102,16 +103,16 @@ DatastoreCard.propTypes = { PropTypes.shape({ handleClick: PropTypes.func.isRequired, icon: PropTypes.node.isRequired, - cy: PropTypes.string + cy: PropTypes.string, }) - ) + ), } DatastoreCard.defaultProps = { value: {}, isSelected: false, handleClick: undefined, - actions: undefined + actions: undefined, } DatastoreCard.displayName = 'DatastoreCard' diff --git a/src/fireedge/src/client/components/Cards/EmptyCard.js b/src/fireedge/src/client/components/Cards/EmptyCard.js index 2752733bff..bbebc8f447 100644 --- a/src/fireedge/src/client/components/Cards/EmptyCard.js +++ b/src/fireedge/src/client/components/Cards/EmptyCard.js @@ -21,16 +21,16 @@ import makeStyles from '@mui/styles/makeStyles' import { Tr } from 'client/components/HOC' import { T } from 'client/constants' -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ root: { - height: '100%' + height: '100%', }, content: { height: '100%', minHeight: 140, padding: theme.spacing(1), - textAlign: 'center' - } + textAlign: 'center', + }, })) const EmptyCard = memo(({ title }) => { @@ -49,11 +49,11 @@ const EmptyCard = memo(({ title }) => { }) EmptyCard.propTypes = { - title: PropTypes.oneOfType([PropTypes.string, PropTypes.array]) + title: PropTypes.oneOfType([PropTypes.string, PropTypes.array]), } EmptyCard.defaultProps = { - title: undefined + title: undefined, } EmptyCard.displayName = 'EmptyCard' diff --git a/src/fireedge/src/client/components/Cards/HostCard.js b/src/fireedge/src/client/components/Cards/HostCard.js index fd273f8a13..71d921c681 100644 --- a/src/fireedge/src/client/components/Cards/HostCard.js +++ b/src/fireedge/src/client/components/Cards/HostCard.js @@ -21,21 +21,25 @@ import makeStyles from '@mui/styles/makeStyles' import { HardDrive as HostIcon } from 'iconoir-react' import SelectCard, { Action } from 'client/components/Cards/SelectCard' -import { StatusBadge, StatusChip, LinearProgressWithLabel } from 'client/components/Status' +import { + StatusBadge, + StatusChip, + LinearProgressWithLabel, +} from 'client/components/Status' import * as HostModel from 'client/models/Host' const useStyles = makeStyles({ title: { display: 'flex', - gap: '0.5rem' + gap: '0.5rem', }, content: { padding: '2em', display: 'flex', flexFlow: 'column', - gap: '1em' - } + gap: '1em', + }, }) const HostCard = memo( @@ -44,12 +48,8 @@ const HostCard = memo( const { ID, NAME, IM_MAD, VM_MAD } = value - const { - percentCpuUsed, - percentCpuLabel, - percentMemUsed, - percentMemLabel - } = HostModel.getAllocatedInfo(value) + const { percentCpuUsed, percentCpuLabel, percentMemUsed, percentMemLabel } = + HostModel.getAllocatedInfo(value) const state = HostModel.getState(value) @@ -57,9 +57,9 @@ const HostCard = memo( return ( + action={actions?.map((action) => ( - )} + ))} icon={ @@ -67,7 +67,7 @@ const HostCard = memo( } title={ - + {NAME} @@ -78,16 +78,21 @@ const HostCard = memo( handleClick={handleClick} >
- - + +
) }, - (prev, next) => ( + (prev, next) => prev.isSelected === next.isSelected && prev.value?.STATE === next.value?.STATE - ) ) HostCard.propTypes = { @@ -102,8 +107,8 @@ HostCard.propTypes = { CPU_USAGE: PropTypes.string, TOTAL_CPU: PropTypes.string, MEM_USAGE: PropTypes.string, - TOTAL_MEM: PropTypes.string - }) + TOTAL_MEM: PropTypes.string, + }), }), isSelected: PropTypes.bool, handleClick: PropTypes.func, @@ -111,16 +116,16 @@ HostCard.propTypes = { PropTypes.shape({ handleClick: PropTypes.func.isRequired, icon: PropTypes.node.isRequired, - cy: PropTypes.string + cy: PropTypes.string, }) - ) + ), } HostCard.defaultProps = { value: {}, isSelected: false, handleClick: undefined, - actions: undefined + actions: undefined, } HostCard.displayName = 'HostCard' diff --git a/src/fireedge/src/client/components/Cards/NetworkCard.js b/src/fireedge/src/client/components/Cards/NetworkCard.js index bfa89e53fe..a0e9e02f7b 100644 --- a/src/fireedge/src/client/components/Cards/NetworkCard.js +++ b/src/fireedge/src/client/components/Cards/NetworkCard.js @@ -28,14 +28,16 @@ const NetworkCard = memo( const addresses = [AR_POOL?.AR ?? []].flat() const totalLeases = addresses.reduce((res, ar) => +ar.SIZE + res, 0) - const percentOfUsed = +USED_LEASES * 100 / +totalLeases || 0 - const percentLabel = `${USED_LEASES} / ${totalLeases} (${Math.round(percentOfUsed)}%)` + const percentOfUsed = (+USED_LEASES * 100) / +totalLeases || 0 + const percentLabel = `${USED_LEASES} / ${totalLeases} (${Math.round( + percentOfUsed + )}%)` return ( + action={actions?.map((action) => ( - )} + ))} icon={} title={NAME} subheader={`#${ID}`} @@ -59,8 +61,8 @@ NetworkCard.propTypes = { STATE: PropTypes.string, USED_LEASES: PropTypes.string, AR_POOL: PropTypes.shape({ - AR: PropTypes.oneOfType([PropTypes.object, PropTypes.array]) - }) + AR: PropTypes.oneOfType([PropTypes.object, PropTypes.array]), + }), }), isSelected: PropTypes.bool, handleClick: PropTypes.func, @@ -68,16 +70,16 @@ NetworkCard.propTypes = { PropTypes.shape({ handleClick: PropTypes.func.isRequired, icon: PropTypes.node.isRequired, - cy: PropTypes.string + cy: PropTypes.string, }) - ) + ), } NetworkCard.defaultProps = { value: {}, isSelected: false, handleClick: undefined, - actions: undefined + actions: undefined, } NetworkCard.displayName = 'NetworkCard' diff --git a/src/fireedge/src/client/components/Cards/PolicyCard.js b/src/fireedge/src/client/components/Cards/PolicyCard.js index d497935a4a..ac47e68c7e 100644 --- a/src/fireedge/src/client/components/Cards/PolicyCard.js +++ b/src/fireedge/src/client/components/Cards/PolicyCard.js @@ -28,33 +28,36 @@ const useStyles = makeStyles(() => ({ height: '100%', minHeight: 140, display: 'flex', - flexDirection: 'column' + flexDirection: 'column', }, content: { - minHeight: 260 - } + minHeight: 260, + }, })) -const PolicyCard = memo( - ({ id, cy, fields, handleRemove, cardProps }) => { - const classes = useStyles() +const PolicyCard = memo(({ id, cy, fields, handleRemove, cardProps }) => { + const classes = useStyles() - return ( - - - - - - {handleRemove && ( - - )} - - - ) - } -) + return ( + + + + + + {handleRemove && ( + + )} + + + ) +}) PolicyCard.propTypes = { id: PropTypes.string, @@ -63,7 +66,7 @@ PolicyCard.propTypes = { handleEdit: PropTypes.func, handleClone: PropTypes.func, handleRemove: PropTypes.func, - cardProps: PropTypes.object + cardProps: PropTypes.object, } PolicyCard.defaultProps = { @@ -73,7 +76,7 @@ PolicyCard.defaultProps = { handleEdit: undefined, handleClone: undefined, handleRemove: undefined, - cardProps: undefined + cardProps: undefined, } PolicyCard.displayName = 'PolicyCard' diff --git a/src/fireedge/src/client/components/Cards/ProvisionCard.js b/src/fireedge/src/client/components/Cards/ProvisionCard.js index fe79b12ad9..2857154e22 100644 --- a/src/fireedge/src/client/components/Cards/ProvisionCard.js +++ b/src/fireedge/src/client/components/Cards/ProvisionCard.js @@ -28,12 +28,24 @@ import { PROVISIONS_STATES, PROVIDER_IMAGES_URL, PROVISION_IMAGES_URL, - DEFAULT_IMAGE + DEFAULT_IMAGE, } from 'client/constants' const ProvisionCard = memo( - ({ value, image: propImage, isSelected, handleClick, isProvider, actions, deleteAction }) => { - const { ID, NAME, TEMPLATE: { BODY = {} } } = value + ({ + value, + image: propImage, + isSelected, + handleClick, + isProvider, + actions, + deleteAction, + }) => { + const { + ID, + NAME, + TEMPLATE: { BODY = {} }, + } = value const IMAGES_URL = isProvider ? PROVIDER_IMAGES_URL : PROVISION_IMAGES_URL @@ -43,22 +55,22 @@ const ProvisionCard = memo( const isExternalImage = useMemo(() => isExternalURL(image), [image]) const imageUrl = useMemo( - () => isExternalImage ? image : `${IMAGES_URL}/${image}`, + () => (isExternalImage ? image : `${IMAGES_URL}/${image}`), [isExternalImage] ) return ( 0 || deleteAction) && ( - <> - {actions?.map(action => - - )} - {deleteAction && ( - - )} - - )} + action={ + (actions?.length > 0 || deleteAction) && ( + <> + {actions?.map((action) => ( + + ))} + {deleteAction && } + + ) + } dataCy={isProvider ? 'provider' : 'provision'} handleClick={handleClick} icon={ @@ -74,21 +86,18 @@ const ProvisionCard = memo( mediaProps={{ component: 'div', children: ( - - ) + + ), }} subheader={`#${ID}`} title={NAME} disableFilterImage={isExternalImage} /> ) - }, (prev, next) => ( + }, + (prev, next) => prev.isSelected === next.isSelected && prev.value?.TEMPLATE?.BODY?.state === next.value?.TEMPLATE?.BODY?.state - ) ) ProvisionCard.propTypes = { @@ -102,9 +111,9 @@ ProvisionCard.propTypes = { PropTypes.shape({ handleClick: PropTypes.func.isRequired, icon: PropTypes.object.isRequired, - cy: PropTypes.string + cy: PropTypes.string, }) - ) + ), } ProvisionCard.defaultProps = { @@ -114,7 +123,7 @@ ProvisionCard.defaultProps = { isSelected: undefined, image: undefined, deleteAction: undefined, - value: {} + value: {}, } ProvisionCard.displayName = 'ProvisionCard' diff --git a/src/fireedge/src/client/components/Cards/ProvisionTemplateCard.js b/src/fireedge/src/client/components/Cards/ProvisionTemplateCard.js index 6b21d55622..65d5442559 100644 --- a/src/fireedge/src/client/components/Cards/ProvisionTemplateCard.js +++ b/src/fireedge/src/client/components/Cards/ProvisionTemplateCard.js @@ -16,7 +16,10 @@ import { memo, useMemo } from 'react' import PropTypes from 'prop-types' -import { Db as ProviderIcon, SettingsCloud as ProvisionIcon } from 'iconoir-react' +import { + Db as ProviderIcon, + SettingsCloud as ProvisionIcon, +} from 'iconoir-react' import { SelectCard } from 'client/components/Cards' import Image from 'client/components/Image' @@ -32,7 +35,7 @@ const ProvisionTemplateCard = memo( const isExternalImage = useMemo(() => isExternalURL(image), [image]) const imageUrl = useMemo( - () => isExternalImage ? image : `${IMAGES_URL}/${image}`, + () => (isExternalImage ? image : `${IMAGES_URL}/${image}`), [isExternalImage] ) @@ -47,11 +50,8 @@ const ProvisionTemplateCard = memo( mediaProps={{ component: 'div', children: ( - - ) + + ), }} subheader={description} title={name} @@ -67,7 +67,7 @@ ProvisionTemplateCard.propTypes = { isSelected: PropTypes.bool, isValid: PropTypes.bool, image: PropTypes.string, - value: PropTypes.object + value: PropTypes.object, } ProvisionTemplateCard.defaultProps = { @@ -76,7 +76,7 @@ ProvisionTemplateCard.defaultProps = { isSelected: false, isValid: true, image: undefined, - value: { name: '', description: '' } + value: { name: '', description: '' }, } ProvisionTemplateCard.displayName = 'ProvisionTemplateCard' diff --git a/src/fireedge/src/client/components/Cards/SelectCard/Action.js b/src/fireedge/src/client/components/Cards/SelectCard/Action.js index 869b0c72d8..c63c1a84cf 100644 --- a/src/fireedge/src/client/components/Cards/SelectCard/Action.js +++ b/src/fireedge/src/client/components/Cards/SelectCard/Action.js @@ -19,21 +19,16 @@ import PropTypes from 'prop-types' import useFetch from 'client/hooks/useFetch' import { SubmitButton } from 'client/components/FormControl' -const Action = memo(({ - cy, - handleClick, - stopPropagation, - ...props -}) => { - const { fetchRequest, data, loading } = useFetch( - e => Promise.resolve(handleClick?.(e)) +const Action = memo(({ cy, handleClick, stopPropagation, ...props }) => { + const { fetchRequest, data, loading } = useFetch((e) => + Promise.resolve(handleClick?.(e)) ) return ( { + onClick={(evt) => { stopPropagation && evt?.stopPropagation?.() fetchRequest() }} @@ -47,12 +42,12 @@ Action.propTypes = { cy: PropTypes.string, handleClick: PropTypes.func.isRequired, icon: PropTypes.node, - stopPropagation: PropTypes.bool + stopPropagation: PropTypes.bool, } Action.defaultProps = { icon: undefined, - cy: 'action-card' + cy: 'action-card', } Action.displayName = 'ActionCard' diff --git a/src/fireedge/src/client/components/Cards/SelectCard/SelectCard.js b/src/fireedge/src/client/components/Cards/SelectCard/SelectCard.js index b1b82450c9..dbcc882e43 100644 --- a/src/fireedge/src/client/components/Cards/SelectCard/SelectCard.js +++ b/src/fireedge/src/client/components/Cards/SelectCard/SelectCard.js @@ -23,7 +23,7 @@ import { CardHeader, CardActions, CardMedia, - Skeleton + Skeleton, } from '@mui/material' import useNearScreen from 'client/hooks/useNearScreen' @@ -32,129 +32,139 @@ import { ConditionalWrap } from 'client/components/HOC' import { Action } from 'client/components/Cards/SelectCard' import selectCardStyles from 'client/components/Cards/SelectCard/styles' -const SelectCard = memo(({ - action, - actions, - cardActionsProps, - cardHeaderProps, - cardProps, - cardActionAreaProps, - children, - dataCy, - disableFilterImage, - handleClick, - icon, - isSelected, - mediaProps, - observerOff, - skeletonHeight, - stylesProps, - subheader, - title -}) => { - const classes = selectCardStyles({ ...stylesProps, isSelected, disableFilterImage }) - const { isNearScreen, fromRef } = useNearScreen({ - distance: '100px' - }) +const SelectCard = memo( + ({ + action, + actions, + cardActionsProps, + cardHeaderProps, + cardProps, + cardActionAreaProps, + children, + dataCy, + disableFilterImage, + handleClick, + icon, + isSelected, + mediaProps, + observerOff, + skeletonHeight, + stylesProps, + subheader, + title, + }) => { + const classes = selectCardStyles({ + ...stylesProps, + isSelected, + disableFilterImage, + }) + const { isNearScreen, fromRef } = useNearScreen({ + distance: '100px', + }) - return ( - {children}}> - {observerOff || isNearScreen ? ( - - - {/* CARD ACTION AREA */} - - - {children} - - } + return ( + {children}} + > + {observerOff || isNearScreen ? ( + - {/* CARD HEADER */} - {(title || subheader || icon || action) && ( - - )} + {/* CARD ACTION AREA */} + ( + + {children} + + )} + > + {/* CARD HEADER */} + {(title || subheader || icon || action) && ( + + )} - {/* CARD CONTENT */} - {children} + {/* CARD CONTENT */} + {children} - {/* CARD MEDIA */} - {mediaProps && ( - - - {children} - - } - > - - - )} + {/* CARD MEDIA */} + {mediaProps && ( + ( + + {children} + + )} + > + + + )} - {/* CARD ACTIONS */} - {actions?.length > 0 && ( - - {actions?.map(action => ( - - ))} - - )} - - - ) : ( - - )} - - ) -}) + {/* CARD ACTIONS */} + {actions?.length > 0 && ( + + {actions?.map((action) => ( + + ))} + + )} + + + ) : ( + + )} + + ) + } +) export const SelectCardProps = { stylesProps: PropTypes.object, @@ -163,25 +173,16 @@ export const SelectCardProps = { PropTypes.shape({ handleClick: PropTypes.func.isRequired, icon: PropTypes.node.isRequired, - cy: PropTypes.string + cy: PropTypes.string, }) ), cardActionsProps: PropTypes.shape({ className: PropTypes.string, - style: PropTypes.object + style: PropTypes.object, }), - icon: PropTypes.oneOfType([ - PropTypes.string, - PropTypes.object - ]), - title: PropTypes.oneOfType([ - PropTypes.string, - PropTypes.object - ]), - subheader: PropTypes.oneOfType([ - PropTypes.string, - PropTypes.object - ]), + icon: PropTypes.oneOfType([PropTypes.string, PropTypes.object]), + title: PropTypes.oneOfType([PropTypes.string, PropTypes.object]), + subheader: PropTypes.oneOfType([PropTypes.string, PropTypes.object]), cardHeaderProps: PropTypes.object, mediaProps: PropTypes.shape({ classes: PropTypes.object, @@ -189,7 +190,7 @@ export const SelectCardProps = { component: PropTypes.elementType, image: PropTypes.string, src: PropTypes.string, - style: PropTypes.object + style: PropTypes.object, }), isSelected: PropTypes.bool, handleClick: PropTypes.func, @@ -199,11 +200,11 @@ export const SelectCardProps = { children: PropTypes.oneOfType([ PropTypes.arrayOf(PropTypes.node), PropTypes.node, - PropTypes.string + PropTypes.string, ]), dataCy: PropTypes.string, disableFilterImage: PropTypes.bool, - skeletonHeight: PropTypes.number + skeletonHeight: PropTypes.number, } SelectCard.defaultProps = { @@ -224,7 +225,7 @@ SelectCard.defaultProps = { stylesProps: undefined, subheader: undefined, title: undefined, - skeletonHeight: 140 + skeletonHeight: 140, } SelectCard.propTypes = SelectCardProps diff --git a/src/fireedge/src/client/components/Cards/SelectCard/index.js b/src/fireedge/src/client/components/Cards/SelectCard/index.js index 92df76a285..bd5035f6ab 100644 --- a/src/fireedge/src/client/components/Cards/SelectCard/index.js +++ b/src/fireedge/src/client/components/Cards/SelectCard/index.js @@ -13,7 +13,9 @@ * See the License for the specific language governing permissions and * * limitations under the License. * * ------------------------------------------------------------------------- */ -import SelectCard, { SelectCardProps } from 'client/components/Cards/SelectCard/SelectCard' +import SelectCard, { + SelectCardProps, +} from 'client/components/Cards/SelectCard/SelectCard' import Action from 'client/components/Cards/SelectCard/Action' export { Action, SelectCardProps } diff --git a/src/fireedge/src/client/components/Cards/SelectCard/styles.js b/src/fireedge/src/client/components/Cards/SelectCard/styles.js index d28eccf50d..f94e168685 100644 --- a/src/fireedge/src/client/components/Cards/SelectCard/styles.js +++ b/src/fireedge/src/client/components/Cards/SelectCard/styles.js @@ -17,34 +17,34 @@ import makeStyles from '@mui/styles/makeStyles' import { SCHEMES } from 'client/constants' -const styles = makeStyles(theme => ({ +const styles = makeStyles((theme) => ({ root: ({ isSelected }) => ({ height: '100%', - transition: theme.transitions.create( - ['background-color', 'box-shadow'], { duration: '0.2s' } - ), + transition: theme.transitions.create(['background-color', 'box-shadow'], { + duration: '0.2s', + }), '&:hover': { - boxShadow: theme.shadows['5'] + boxShadow: theme.shadows['5'], }, ...(isSelected && { color: theme.palette.secondary.contrastText, backgroundColor: theme.palette.secondary.main, '& .badge': { color: theme.palette.secondary.main, - backgroundColor: theme.palette.secondary.contrastText - } - }) + backgroundColor: theme.palette.secondary.contrastText, + }, + }), }), actionArea: { '&:disabled': { - filter: 'brightness(0.5)' - } + filter: 'brightness(0.5)', + }, }, mediaActionArea: { '&:hover': { backgroundColor: theme.palette.secondary.contrastText, - '& $media': { filter: 'none' } - } + '& $media': { filter: 'none' }, + }, }, media: { width: '100%', @@ -58,26 +58,27 @@ const styles = makeStyles(theme => ({ height: '100%', objectFit: 'cover', position: 'absolute', - userSelect: 'none' + userSelect: 'none', }, transition: theme.transitions.create('filter', { duration: '0.2s' }), filter: ({ isSelected, disableFilterImage }) => disableFilterImage ? 'none' - : (theme.palette.mode === SCHEMES.DARK || isSelected) - ? 'contrast(0) brightness(2)' - : 'contrast(0) brightness(0.8)' + : theme.palette.mode === SCHEMES.DARK || isSelected + ? 'contrast(0) brightness(2)' + : 'contrast(0) brightness(0.8)', }, headerRoot: { // align header icon to top - alignItems: 'start' + alignItems: 'start', }, headerContent: { overflow: 'auto' }, headerAvatar: { display: 'flex', - color: ({ isSelected }) => isSelected - ? theme.palette.secondary.contrastText - : theme.palette.text.primary + color: ({ isSelected }) => + isSelected + ? theme.palette.secondary.contrastText + : theme.palette.text.primary, }, subheader: { color: ({ isSelected }) => @@ -87,8 +88,8 @@ const styles = makeStyles(theme => ({ whiteSpace: 'initial', display: '-webkit-box', lineClamp: 2, - boxOrient: 'vertical' - } + boxOrient: 'vertical', + }, })) export default styles diff --git a/src/fireedge/src/client/components/Cards/TierCard.js b/src/fireedge/src/client/components/Cards/TierCard.js index 3d0a6b8125..198b228b1f 100644 --- a/src/fireedge/src/client/components/Cards/TierCard.js +++ b/src/fireedge/src/client/components/Cards/TierCard.js @@ -23,63 +23,63 @@ import SelectCard from 'client/components/Cards/SelectCard' import { Tr } from 'client/components/HOC' import { T } from 'client/constants' -const TierCard = memo( - ({ value, handleEdit, handleRemove, cardProps }) => { - const { name, cardinality } = value +const TierCard = memo(({ value, handleEdit, handleRemove, cardProps }) => { + const { name, cardinality } = value - return ( - + + + } + title={name} + cardProps={cardProps} + > + + {handleEdit && ( + - )} - {handleRemove && ( - - )} - - - ) - } -) + {Tr(T.Edit)} + + )} + {handleRemove && ( + + )} + + + ) +}) TierCard.propTypes = { value: PropTypes.shape({ name: PropTypes.string, - cardinality: PropTypes.oneOfType([ - PropTypes.string, - PropTypes.number - ]) + cardinality: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), }), handleEdit: PropTypes.func, handleRemove: PropTypes.func, - cardProps: PropTypes.object + cardProps: PropTypes.object, } TierCard.defaultProps = { value: {}, handleEdit: undefined, handleRemove: undefined, - cardProps: undefined + cardProps: undefined, } TierCard.displayName = 'TierCard' diff --git a/src/fireedge/src/client/components/Cards/VirtualMachineCard.js b/src/fireedge/src/client/components/Cards/VirtualMachineCard.js index 090b846c4d..2c5e7a3d85 100644 --- a/src/fireedge/src/client/components/Cards/VirtualMachineCard.js +++ b/src/fireedge/src/client/components/Cards/VirtualMachineCard.js @@ -28,17 +28,17 @@ const VirtualMachineCard = memo( return ( + action={actions?.map((action) => ( - )} + ))} skeletonHeight={75} dataCy={`vm-${ID}`} handleClick={handleClick} - icon={( + icon={ - )} + } isSelected={isSelected} subheader={`#${ID}`} title={NAME} @@ -59,16 +59,16 @@ VirtualMachineCard.propTypes = { PropTypes.shape({ handleClick: PropTypes.func.isRequired, icon: PropTypes.object.isRequired, - cy: PropTypes.string + cy: PropTypes.string, }) - ) + ), } VirtualMachineCard.defaultProps = { handleClick: undefined, isSelected: false, value: {}, - actions: undefined + actions: undefined, } VirtualMachineCard.displayName = 'VirtualMachineCard' diff --git a/src/fireedge/src/client/components/Cards/WavesCard.js b/src/fireedge/src/client/components/Cards/WavesCard.js index 9f6206ccc5..fec25dc07e 100644 --- a/src/fireedge/src/client/components/Cards/WavesCard.js +++ b/src/fireedge/src/client/components/Cards/WavesCard.js @@ -23,9 +23,11 @@ import makeStyles from '@mui/styles/makeStyles' import { addOpacityToColor } from 'client/utils' import { SCHEMES } from 'client/constants' -const useStyles = makeStyles(theme => { - const getBackgroundColor = theme.palette.mode === SCHEMES.DARK ? darken : lighten - const getContrastBackgroundColor = theme.palette.mode === SCHEMES.LIGHT ? darken : lighten +const useStyles = makeStyles((theme) => { + const getBackgroundColor = + theme.palette.mode === SCHEMES.DARK ? darken : lighten + const getContrastBackgroundColor = + theme.palette.mode === SCHEMES.LIGHT ? darken : lighten return { root: { @@ -36,8 +38,8 @@ const useStyles = makeStyles(theme => { [theme.breakpoints.only('xs')]: { display: 'flex', alignItems: 'baseline', - gap: '1em' - } + gap: '1em', + }, }, icon: { position: 'absolute', @@ -49,8 +51,8 @@ const useStyles = makeStyles(theme => { '& > svg': { color: addOpacityToColor(theme.palette.common.white, 0.2), height: '100%', - width: '30%' - } + width: '30%', + }, }, wave: { display: 'block', @@ -60,57 +62,66 @@ const useStyles = makeStyles(theme => { left: '50%', width: 220, height: 220, - borderRadius: '43%' + borderRadius: '43%', }, wave1: { - backgroundColor: ({ bgColor }) => getContrastBackgroundColor(bgColor, 0.3), - animation: '$drift 7s infinite linear' + backgroundColor: ({ bgColor }) => + getContrastBackgroundColor(bgColor, 0.3), + animation: '$drift 7s infinite linear', }, wave2: { - backgroundColor: ({ bgColor }) => getContrastBackgroundColor(bgColor, 0.5), - animation: '$drift 5s infinite linear' + backgroundColor: ({ bgColor }) => + getContrastBackgroundColor(bgColor, 0.5), + animation: '$drift 5s infinite linear', }, '@keyframes drift': { from: { transform: 'rotate(0deg)' }, - to: { transform: 'rotate(360deg)' } - } + to: { transform: 'rotate(360deg)' }, + }, } }) -const WavesCard = memo(({ text, value, bgColor, icon: Icon }) => { - const classes = useStyles({ bgColor }) +const WavesCard = memo( + ({ text, value, bgColor, icon: Icon }) => { + const classes = useStyles({ bgColor }) - return ( - - {text} - {value} - - - {Icon && ( - - - - )} - - ) -}, (prev, next) => prev.value === next.value) + return ( + + + {text} + + + {value} + + + + {Icon && ( + + + + )} + + ) + }, + (prev, next) => prev.value === next.value +) WavesCard.propTypes = { text: PropTypes.string, value: PropTypes.oneOfType([ PropTypes.string, PropTypes.number, - PropTypes.element + PropTypes.element, ]), bgColor: PropTypes.string, - icon: PropTypes.any + icon: PropTypes.any, } WavesCard.defaultProps = { text: undefined, value: undefined, bgColor: '#ffffff00', - icon: undefined + icon: undefined, } WavesCard.displayName = 'WavesCard' diff --git a/src/fireedge/src/client/components/Cards/index.js b/src/fireedge/src/client/components/Cards/index.js index 63939c8cb3..7ddffa2ddb 100644 --- a/src/fireedge/src/client/components/Cards/index.js +++ b/src/fireedge/src/client/components/Cards/index.js @@ -44,5 +44,5 @@ export { SelectCard, TierCard, VirtualMachineCard, - WavesCard + WavesCard, } diff --git a/src/fireedge/src/client/components/Charts/CircleChart.js b/src/fireedge/src/client/components/Charts/CircleChart.js index 507fbe36cb..d183aa576b 100644 --- a/src/fireedge/src/client/components/Charts/CircleChart.js +++ b/src/fireedge/src/client/components/Charts/CircleChart.js @@ -26,31 +26,35 @@ import NumberEasing from 'client/components/NumberEasing' * @param {string} props.color - Color of component: primary, secondary or inherit * @returns {JSXElementConstructor} Circular progress bar component */ -const Circle = memo(({ color = 'secondary' }) => { - const [progress, setProgress] = useState(0) +const Circle = memo( + ({ color = 'secondary' }) => { + const [progress, setProgress] = useState(0) - useEffect(() => { - const timer = setInterval(() => { - setProgress(prevProgress => { - const nextProgress = prevProgress + 2 - if (nextProgress === 100) clearInterval(timer) - return nextProgress - }) - }, 50) + useEffect(() => { + const timer = setInterval(() => { + setProgress((prevProgress) => { + const nextProgress = prevProgress + 2 + if (nextProgress === 100) clearInterval(timer) - return () => clearInterval(timer) - }, []) + return nextProgress + }) + }, 50) - return ( - - ) -}, (prev, next) => prev.color === next.color) + return () => clearInterval(timer) + }, []) + + return ( + + ) + }, + (prev, next) => prev.color === next.color +) Circle.propTypes = { color: PropTypes.string } Circle.displayName = 'Circle' @@ -67,32 +71,39 @@ Circle.displayName = 'Circle' * @param {object} props.labelProps - Props of text * @returns {JSXElementConstructor} Circular chart component */ -const CircleChart = memo(({ label, labelProps }) => ( - - - - - - ( + + + + + - - + + + + - -), (prev, next) => prev.label === next.label) + ), + (prev, next) => prev.label === next.label +) CircleChart.propTypes = { label: PropTypes.string, - labelProps: PropTypes.object + labelProps: PropTypes.object, } CircleChart.displayName = 'CircleChart' diff --git a/src/fireedge/src/client/components/Charts/SingleBar.js b/src/fireedge/src/client/components/Charts/SingleBar.js index 5894f75a10..b3f1c21040 100644 --- a/src/fireedge/src/client/components/Charts/SingleBar.js +++ b/src/fireedge/src/client/components/Charts/SingleBar.js @@ -22,11 +22,11 @@ import makeStyles from '@mui/styles/makeStyles' import { TypographyWithPoint } from 'client/components/Typography' import { addOpacityToColor } from 'client/utils' -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ legend: { display: 'grid', gridGap: '1rem', - gridTemplateColumns: 'repeat(auto-fit, minmax(125px, 1fr))' + gridTemplateColumns: 'repeat(auto-fit, minmax(125px, 1fr))', }, bar: { marginTop: '1rem', @@ -36,11 +36,11 @@ const useStyles = makeStyles(theme => ({ backgroundColor: '#616161e0', transition: '1s', gridTemplateColumns: ({ fragments }) => - fragments?.map(fragment => `${fragment}fr`)?.join(' '), + fragments?.map((fragment) => `${fragment}fr`)?.join(' '), [theme.breakpoints.only('xs')]: { - display: 'none' - } - } + display: 'none', + }, + }, })) /** @@ -53,7 +53,7 @@ const useStyles = makeStyles(theme => ({ * @returns {JSXElementConstructor} Chart bar component */ const SingleBar = ({ legend, data, total = 0 }) => { - const fragments = data.map(data => Math.floor(data * 10 / (total || 1))) + const fragments = data.map((data) => Math.floor((data * 10) / (total || 1))) const classes = useStyles({ fragments }) @@ -62,7 +62,11 @@ const SingleBar = ({ legend, data, total = 0 }) => { {/* LEGEND */}
{legend?.map(({ name, color }, idx) => ( - + {name} ))} @@ -75,11 +79,16 @@ const SingleBar = ({ legend, data, total = 0 }) => { const color = legend[idx]?.color const style = { backgroundColor: color, - '&:hover': { backgroundColor: addOpacityToColor(color, 0.6) } + '&:hover': { backgroundColor: addOpacityToColor(color, 0.6) }, } return ( - +
) @@ -90,17 +99,16 @@ const SingleBar = ({ legend, data, total = 0 }) => { } SingleBar.propTypes = { - legend: PropTypes.arrayOf(PropTypes.shape({ - name: PropTypes.string, - color: PropTypes.string - })), - data: PropTypes.arrayOf( - PropTypes.oneOfType([ - PropTypes.string, - PropTypes.number - ]) + legend: PropTypes.arrayOf( + PropTypes.shape({ + name: PropTypes.string, + color: PropTypes.string, + }) ), - total: PropTypes.number + data: PropTypes.arrayOf( + PropTypes.oneOfType([PropTypes.string, PropTypes.number]) + ), + total: PropTypes.number, } SingleBar.displayName = 'SingleBar' diff --git a/src/fireedge/src/client/components/Charts/index.js b/src/fireedge/src/client/components/Charts/index.js index 519ef172dc..9606d3432e 100644 --- a/src/fireedge/src/client/components/Charts/index.js +++ b/src/fireedge/src/client/components/Charts/index.js @@ -16,7 +16,4 @@ import CircleChart from 'client/components/Charts/CircleChart' import SingleBar from 'client/components/Charts/SingleBar' -export { - CircleChart, - SingleBar -} +export { CircleChart, SingleBar } diff --git a/src/fireedge/src/client/components/DebugLog/ansiHtml.js b/src/fireedge/src/client/components/DebugLog/ansiHtml.js index bf3b16dd66..d9c70aaa4c 100644 --- a/src/fireedge/src/client/components/DebugLog/ansiHtml.js +++ b/src/fireedge/src/client/components/DebugLog/ansiHtml.js @@ -15,8 +15,9 @@ * ------------------------------------------------------------------------- */ // Reference to https://github.com/sindresorhus/ansi-regex -// eslint-disable-next-line no-control-regex -export const _regANSI = /(?:(?:\u001b\[)|\u009b)(?:(?:[0-9]{1,3})?(?:(?:;[0-9]{0,3})*)?[A-M|f-m])|\u001b[A-M]/ +export const _regANSI = + // eslint-disable-next-line no-control-regex + /(?:(?:\u001b\[)|\u009b)(?:(?:[0-9]{1,3})?(?:(?:;[0-9]{0,3})*)?[A-M|f-m])|\u001b[A-M]/ const _defColors = { reset: ['fff', '000'], // [FOREGROUND_COLOR, BACKGROUND_COLOR] @@ -28,7 +29,7 @@ const _defColors = { magenta: 'ff00ff', cyan: '00ffee', lightgrey: 'f0f0f0', - darkgrey: '888' + darkgrey: '888', } const _styles = { 30: 'black', @@ -38,7 +39,7 @@ const _styles = { 34: 'blue', 35: 'magenta', 36: 'cyan', - 37: 'lightgrey' + 37: 'lightgrey', } const _openTags = { 1: 'font-weight:bold', // bold @@ -46,12 +47,12 @@ const _openTags = { 3: '', // italic 4: '', // underscore 8: 'display:none', // hidden - 9: '' // delete + 9: '', // delete } const _closeTags = { 23: '', // reset italic 24: '', // reset underscore - 29: '' // reset delete + 29: '', // reset delete } ;[0, 21, 22, 27, 28, 39, 49].forEach(function (n) { @@ -64,40 +65,46 @@ const _closeTags = { * @param {string} text - Text * @returns {string} HTML as string */ -export default function ansiHTML (text) { +export default function ansiHTML(text) { // Returns the text if the string has no ANSI escape code. if (!_regANSI.test(text)) { return text } // Cache opened sequence. - var ansiCodes = [] + const ansiCodes = [] + // Replace with markup. - var ret = text.replace(/\033\[(\d+)*m/g, function (match, seq) { + let ret = text.replace(/\033\[(\d+)*m/g, function (match, seq) { const ot = _openTags[seq] if (ot) { // If current sequence has been opened, close it. - if (!!~ansiCodes.indexOf(seq)) { // eslint-disable-line no-extra-boolean-cast + if (~ansiCodes.indexOf(seq)) { + // eslint-disable-line no-extra-boolean-cast ansiCodes.pop() + return '' } // Open tag. ansiCodes.push(seq) - return ot[0] === '<' ? ot : '' + + return ot[0] === '<' ? ot : `` } const ct = _closeTags[seq] if (ct) { // Pop sequence ansiCodes.pop() + return ct } + return '' }) // Make sure tags are closed. - var l = ansiCodes.length - ;(l > 0) && (ret += Array(l + 1).join('')) + const l = ansiCodes.length + l > 0 && (ret += Array(l + 1).join('')) return ret } @@ -109,29 +116,43 @@ export default function ansiHTML (text) { */ ansiHTML.setColors = function (colors) { if (typeof colors !== 'object') { - throw new Error('`colors` parameter must be an Object.') + throw new Error("'colors' parameter must be an Object.") } - var _finalColors = {} + const _finalColors = {} for (const key in _defColors) { - var hex = Object.prototype.hasOwnProperty.call(colors, key) ? colors[key] : null + let hex = Object.prototype.hasOwnProperty.call(colors, key) + ? colors[key] + : null + if (!hex) { _finalColors[key] = _defColors[key] continue } + if (key === 'reset') { if (typeof hex === 'string') { hex = [hex] } - if (!Array.isArray(hex) || hex.length === 0 || hex.some(function (h) { - return typeof h !== 'string' - })) { - throw new Error('The value of `' + key + '` property must be an Array and each item could only be a hex string, e.g.: FF0000') + + if ( + !Array.isArray(hex) || + hex.length === 0 || + hex.some(function (h) { + return typeof h !== 'string' + }) + ) { + throw new Error( + `The value of '${key}' property must be an Array and each item could only be a hex string, e.g.: FF0000` + ) } - var defHexColor = _defColors[key] + + const defHexColor = _defColors[key] + if (!hex[0]) { hex[0] = defHexColor[0] } + if (hex.length === 1 || !hex[1]) { hex = [hex[0]] hex.push(defHexColor[1]) @@ -139,8 +160,11 @@ ansiHTML.setColors = function (colors) { hex = hex.slice(0, 2) } else if (typeof hex !== 'string') { - throw new Error('The value of `' + key + '` property must be a hex string, e.g.: FF0000') + throw new Error( + `The value of '${key}' property must be a hex string, e.g.: FF0000` + ) } + _finalColors[key] = hex } _setTags(_finalColors) @@ -162,10 +186,14 @@ ansiHTML.tags = {} if (Object.defineProperty) { Object.defineProperty(ansiHTML.tags, 'open', { - get: function () { return _openTags } + get: function () { + return _openTags + }, }) Object.defineProperty(ansiHTML.tags, 'close', { - get: function () { return _closeTags } + get: function () { + return _closeTags + }, }) } else { ansiHTML.tags.open = _openTags @@ -174,17 +202,17 @@ if (Object.defineProperty) { const _setTags = (colors) => { // reset all - _openTags['0'] = 'font-weight:normal;opacity:1;color:#' + colors.reset[0] + ';background:#' + colors.reset[1] + _openTags[0] = `font-weight:normal;opacity:1;color:#${colors.reset[0]};background:#${colors.reset[1]}` // inverse - _openTags['7'] = 'color:#' + colors.reset[1] + ';background:#' + colors.reset[0] + _openTags[7] = `color:#${colors.reset[1]};background:#${colors.reset[0]}` // dark grey - _openTags['90'] = 'color:#' + colors.darkgrey + _openTags[90] = `color:#${colors.darkgrey}` for (const code in _styles) { const color = _styles[code] const oriColor = colors[color] || '000' - _openTags[code] = 'color:#' + oriColor - _openTags[(parseInt(code) + 10).toString()] = 'background:#' + oriColor + _openTags[code] = `color:#${oriColor}` + _openTags[(parseInt(code) + 10).toString()] = `background:#${oriColor}` } } diff --git a/src/fireedge/src/client/components/DebugLog/filters.js b/src/fireedge/src/client/components/DebugLog/filters.js index 1d9fb4feb0..c2e63eec98 100644 --- a/src/fireedge/src/client/components/DebugLog/filters.js +++ b/src/fireedge/src/client/components/DebugLog/filters.js @@ -21,101 +21,103 @@ import makeStyles from '@mui/styles/makeStyles' import { DEBUG_LEVEL } from 'client/constants' -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ root: { display: 'flex', border: `1px solid ${theme.palette.divider}`, flexWrap: 'wrap', - marginBottom: '0.8em' + marginBottom: '0.8em', }, grouped: { margin: theme.spacing(0.5), border: 'none', '&:not(:first-child)': { - borderRadius: theme.shape.borderRadius + borderRadius: theme.shape.borderRadius, }, '&:first-child': { - borderRadius: theme.shape.borderRadius - } - } + borderRadius: theme.shape.borderRadius, + }, + }, })) -const Filters = memo(({ log, filters, setFilters }) => { - const classes = useStyles() +const Filters = memo( + ({ log, filters, setFilters }) => { + const classes = useStyles() - const commands = Object.keys(log) + const commands = Object.keys(log) - const handleFilterCommands = (_, filterCommand) => { - setFilters(prev => ({ ...prev, command: filterCommand })) - } + const handleFilterCommands = (_, filterCommand) => { + setFilters((prev) => ({ ...prev, command: filterCommand })) + } - const handleFilterSeverity = (_, filterCommand) => { - setFilters(prev => ({ ...prev, severity: filterCommand })) - } + const handleFilterSeverity = (_, filterCommand) => { + setFilters((prev) => ({ ...prev, severity: filterCommand })) + } - return ( - - {/* SEVERITY FILTER */} - - {Object.values(DEBUG_LEVEL).map(severity => ( - - {severity} - - ))} - - - - - {/* COMMANDS FILTER */} - {commands.length > 1 && ( + return ( + + {/* SEVERITY FILTER */} - {commands?.map(command => ( - - {command} + {Object.values(DEBUG_LEVEL).map((severity) => ( + + {severity} ))} - )} - - ) -}, (prev, next) => - Object.keys(prev.log).length === Object.keys(next.log).length && - prev.filters.command === next.filters.command && - prev.filters.severity === next.filters.severity + + + + {/* COMMANDS FILTER */} + {commands.length > 1 && ( + + {commands?.map((command) => ( + + {command} + + ))} + + )} + + ) + }, + (prev, next) => + Object.keys(prev.log).length === Object.keys(next.log).length && + prev.filters.command === next.filters.command && + prev.filters.severity === next.filters.severity ) Filters.propTypes = { filters: PropTypes.shape({ command: PropTypes.string, - severity: PropTypes.string + severity: PropTypes.string, }), log: PropTypes.object.isRequired, - setFilters: PropTypes.func + setFilters: PropTypes.func, } Filters.defaultProps = { filters: { command: undefined, - severity: undefined + severity: undefined, }, log: {}, - setFilters: () => undefined + setFilters: () => undefined, } Filters.displayName = 'Filters' diff --git a/src/fireedge/src/client/components/DebugLog/index.js b/src/fireedge/src/client/components/DebugLog/index.js index d1b503e478..c6786ed200 100644 --- a/src/fireedge/src/client/components/DebugLog/index.js +++ b/src/fireedge/src/client/components/DebugLog/index.js @@ -23,11 +23,11 @@ import MessageList from 'client/components/DebugLog/messagelist' import Filters from 'client/components/DebugLog/filters' import * as LogUtils from 'client/components/DebugLog/utils' -const debugLogStyles = makeStyles(theme => ({ +const debugLogStyles = makeStyles((theme) => ({ root: { display: 'flex', flexFlow: 'column', - height: '100%' + height: '100%', }, containerScroll: { width: '100%', @@ -37,71 +37,74 @@ const debugLogStyles = makeStyles(theme => ({ backgroundColor: '#1d1f21', wordBreak: 'break-word', '&::-webkit-scrollbar': { - width: 14 + width: 14, }, '&::-webkit-scrollbar-thumb': { backgroundClip: 'content-box', border: '4px solid transparent', borderRadius: 7, boxShadow: 'inset 0 0 0 10px', - color: theme.palette.secondary.light - } - } + color: theme.palette.secondary.light, + }, + }, })) -const DebugLog = memo(({ uuid, socket, logDefault, title }) => { - const classes = debugLogStyles() +const DebugLog = memo( + ({ uuid, socket, logDefault, title }) => { + const classes = debugLogStyles() - const [log, setLog] = useState(logDefault) + const [log, setLog] = useState(logDefault) - const [filters, setFilters] = useState(() => ({ - command: undefined, - severity: undefined - })) + const [filters, setFilters] = useState(() => ({ + command: undefined, + severity: undefined, + })) - useEffect(() => { - const { on, off } = socket((socketData = {}) => { - socketData.id === uuid && - setLog(prevLog => LogUtils.concatNewMessageToLog(prevLog, socketData)) - }) + useEffect(() => { + const { on, off } = socket((socketData = {}) => { + socketData.id === uuid && + setLog((prevLog) => + LogUtils.concatNewMessageToLog(prevLog, socketData) + ) + }) - uuid && on() - return off - }, []) + uuid && on() - return ( -
- {title} + return off + }, []) - + return ( +
+ {title} -
- - - + + +
+ + + +
-
- ) -}, (prev, next) => prev.uuid === next.uuid) + ) + }, + (prev, next) => prev.uuid === next.uuid +) DebugLog.propTypes = { uuid: PropTypes.string, socket: PropTypes.func.isRequired, logDefault: PropTypes.object, - title: PropTypes.oneOfType([ - PropTypes.element, - PropTypes.string - ]) + title: PropTypes.oneOfType([PropTypes.element, PropTypes.string]), } DebugLog.defaultProps = { uuid: undefined, socket: { on: () => undefined, - off: () => undefined + off: () => undefined, }, logDefault: {}, - title: null + title: null, } DebugLog.displayName = 'DebugLog' diff --git a/src/fireedge/src/client/components/DebugLog/message.js b/src/fireedge/src/client/components/DebugLog/message.js index 23b77bc513..1348262e06 100644 --- a/src/fireedge/src/client/components/DebugLog/message.js +++ b/src/fireedge/src/client/components/DebugLog/message.js @@ -18,14 +18,17 @@ import PropTypes from 'prop-types' import clsx from 'clsx' import makeStyles from '@mui/styles/makeStyles' -import { NavArrowRight as CollapseIcon, NavArrowDown as ExpandMoreIcon } from 'iconoir-react' +import { + NavArrowRight as CollapseIcon, + NavArrowDown as ExpandMoreIcon, +} from 'iconoir-react' import { DEBUG_LEVEL } from 'client/constants' import AnsiHtml from 'client/components/DebugLog/ansiHtml' const MAX_CHARS = 80 -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ root: { marginBottom: '0.3em', padding: '0.5em 0', @@ -33,23 +36,29 @@ const useStyles = makeStyles(theme => ({ fontFamily: 'monospace', color: '#fafafa', '&:hover': { - background: '#333537' + background: '#333537', }, display: 'grid', gridTemplateColumns: '32px 220px 1fr', gap: '1em', alignItems: 'center', cursor: ({ isMoreThanMaxChars }) => - isMoreThanMaxChars ? 'pointer' : 'default' + isMoreThanMaxChars ? 'pointer' : 'default', }, message: { transition: 'all 0.3s ease-out', - whiteSpace: 'pre-line' + whiteSpace: 'pre-line', + }, + [DEBUG_LEVEL.ERROR]: { + borderLeft: `0.3em solid ${theme.palette.error.light}`, + }, + [DEBUG_LEVEL.WARN]: { + borderLeft: `0.3em solid ${theme.palette.warning.light}`, }, - [DEBUG_LEVEL.ERROR]: { borderLeft: `0.3em solid ${theme.palette.error.light}` }, - [DEBUG_LEVEL.WARN]: { borderLeft: `0.3em solid ${theme.palette.warning.light}` }, [DEBUG_LEVEL.INFO]: { borderLeft: `0.3em solid ${theme.palette.info.light}` }, - [DEBUG_LEVEL.DEBUG]: { borderLeft: `0.3em solid ${theme.palette.debug.main}` } + [DEBUG_LEVEL.DEBUG]: { + borderLeft: `0.3em solid ${theme.palette.debug.main}`, + }, })) const Message = memo(({ timestamp, severity, message }) => { @@ -57,28 +66,28 @@ const Message = memo(({ timestamp, severity, message }) => { const [isCollapsed, setCollapse] = useState(() => isMoreThanMaxChars) const classes = useStyles({ isMoreThanMaxChars }) - const textToShow = (isCollapsed && isMoreThanMaxChars) - ? `${message?.slice(0, MAX_CHARS)}…` - : message + const textToShow = + isCollapsed && isMoreThanMaxChars + ? `${message?.slice(0, MAX_CHARS)}…` + : message const html = AnsiHtml(textToShow) return (
setCollapse(prev => !prev)} - data-cy='message' + onClick={() => setCollapse((prev) => !prev)} + data-cy="message" > - {isMoreThanMaxChars && (isCollapsed ? ( - - ) : ( - - ))} + {isMoreThanMaxChars && + (isCollapsed ? : )}
{timestamp}
-
+
) }) @@ -86,13 +95,13 @@ const Message = memo(({ timestamp, severity, message }) => { Message.propTypes = { timestamp: PropTypes.string, severity: PropTypes.oneOf(Object.keys(DEBUG_LEVEL)), - message: PropTypes.string + message: PropTypes.string, } Message.defaultProps = { timestamp: '', severity: DEBUG_LEVEL.DEBUG, - message: '' + message: '', } Message.displayName = 'Message' diff --git a/src/fireedge/src/client/components/DebugLog/messagelist.js b/src/fireedge/src/client/components/DebugLog/messagelist.js index b1edb7a5da..926d24ff29 100644 --- a/src/fireedge/src/client/components/DebugLog/messagelist.js +++ b/src/fireedge/src/client/components/DebugLog/messagelist.js @@ -20,40 +20,40 @@ import Message from 'client/components/DebugLog/message' import { getMessageInfo } from 'client/components/DebugLog/utils' const MessageList = ({ log = {}, filters = {} }) => - Object.entries(log)?.map(([command, entries]) => ( - // filter by command - (!filters.command || filters.command.includes(command)) && ( - Object.entries(entries)?.map(([commandId, messages]) => - Array.isArray(messages) && messages?.map((data, index) => { - const { severity, ...messageInfo } = getMessageInfo(data) + Object.entries(log)?.map( + ([command, entries]) => + // filter by command + (!filters.command || filters.command.includes(command)) && + Object.entries(entries)?.map( + ([commandId, messages]) => + Array.isArray(messages) && + messages?.map((data, index) => { + const { severity, ...messageInfo } = getMessageInfo(data) - // filter by severity - if (filters.severity && filters.severity !== severity) return null + // filter by severity + if (filters.severity && filters.severity !== severity) return null - const key = `${index}-${command}-${commandId}` + const key = `${index}-${command}-${commandId}` - return ( - - ) - }) + return + }) ) - ) - )) + ) MessageList.propTypes = { filters: PropTypes.shape({ command: PropTypes.string, - severity: PropTypes.string + severity: PropTypes.string, }).isRequired, - log: PropTypes.object + log: PropTypes.object, } MessageList.defaultProps = { filters: { command: undefined, - severity: undefined + severity: undefined, }, - log: undefined + log: undefined, } MessageList.displayName = 'MessageList' diff --git a/src/fireedge/src/client/components/DebugLog/utils.js b/src/fireedge/src/client/components/DebugLog/utils.js index 1b945b37b4..0d5f403d0e 100644 --- a/src/fireedge/src/client/components/DebugLog/utils.js +++ b/src/fireedge/src/client/components/DebugLog/utils.js @@ -21,14 +21,14 @@ import { DEBUG_LEVEL } from 'client/constants' * @param {string} data - Message text * @returns {string} Severity type (debug level) */ -export const getSeverityFromData = data => +export const getSeverityFromData = (data) => data.includes(DEBUG_LEVEL.ERROR) ? DEBUG_LEVEL.ERROR : data.includes(DEBUG_LEVEL.INFO) - ? DEBUG_LEVEL.INFO - : data.includes(DEBUG_LEVEL.WARN) - ? DEBUG_LEVEL.WARN - : DEBUG_LEVEL.DEBUG + ? DEBUG_LEVEL.INFO + : data.includes(DEBUG_LEVEL.WARN) + ? DEBUG_LEVEL.WARN + : DEBUG_LEVEL.DEBUG /** * Returns the message information as json. @@ -67,7 +67,7 @@ export const concatNewMessageToLog = (log, message = {}) => { return { ...log, [command]: { - [commandId]: [...(log?.[command]?.[commandId] ?? []), data] - } + [commandId]: [...(log?.[command]?.[commandId] ?? []), data], + }, } } diff --git a/src/fireedge/src/client/components/Dialogs/DialogConfirmation.js b/src/fireedge/src/client/components/Dialogs/DialogConfirmation.js index 1b84c77fbc..c27f6415b7 100644 --- a/src/fireedge/src/client/components/Dialogs/DialogConfirmation.js +++ b/src/fireedge/src/client/components/Dialogs/DialogConfirmation.js @@ -23,7 +23,7 @@ import { DialogContent, DialogActions, Typography, - IconButton + IconButton, } from '@mui/material' import { Box } from '@mui/system' import { Cancel as CancelIcon } from 'iconoir-react' @@ -64,9 +64,9 @@ const DialogConfirmation = memo( handleEntering, fixedWidth, fixedHeight, - children + children, }) => { - const isMobile = useMediaQuery(theme => theme.breakpoints.only('xs')) + const isMobile = useMediaQuery((theme) => theme.breakpoints.only('xs')) return ( + onEntering: handleEntering, + }} + > {title && ( - + {typeof title === 'string' ? Tr(title) : title} )} {subheader && ( - + {typeof subheader === 'string' ? Tr(subheader) : subheader} )} {handleCancel && ( + size="large" + > )} @@ -124,9 +126,9 @@ const DialogConfirmation = memo( {handleAccept && ( ({ +const useStyles = makeStyles((theme) => ({ content: { width: '80vw', height: '60vh', @@ -34,42 +36,46 @@ const useStyles = makeStyles(theme => ({ flexDirection: 'column', [theme.breakpoints.only('xs')]: { width: '100vw', - height: '100vh' - } - } + height: '100vh', + }, + }, })) -const DialogForm = ({ values, resolver, handleSubmit, dialogProps, children }) => { +const DialogForm = ({ + values, + resolver, + handleSubmit, + dialogProps, + children, +}) => { const classes = useStyles() const { className, ...contentProps } = dialogProps.contentProps ?? {} dialogProps.contentProps = { className: clsx(classes.content, className), - ...contentProps + ...contentProps, } const methods = useForm({ mode: 'onBlur', reValidateMode: 'onSubmit', defaultValues: values, - resolver: yupResolver(resolver()) + resolver: yupResolver(resolver()), }) return ( - - {children} - + {children} ) } @@ -77,7 +83,7 @@ const DialogForm = ({ values, resolver, handleSubmit, dialogProps, children }) = DialogForm.propTypes = { values: PropTypes.oneOfType([ PropTypes.arrayOf(PropTypes.any), - PropTypes.objectOf(PropTypes.any) + PropTypes.objectOf(PropTypes.any), ]), resolver: PropTypes.func.isRequired, handleSubmit: PropTypes.func, @@ -85,8 +91,8 @@ DialogForm.propTypes = { children: PropTypes.oneOfType([ PropTypes.arrayOf(PropTypes.node), PropTypes.node, - PropTypes.func - ]) + PropTypes.func, + ]), } export default DialogForm diff --git a/src/fireedge/src/client/components/Dialogs/DialogRequest.js b/src/fireedge/src/client/components/Dialogs/DialogRequest.js index b3dc6d990c..22a2728243 100644 --- a/src/fireedge/src/client/components/Dialogs/DialogRequest.js +++ b/src/fireedge/src/client/components/Dialogs/DialogRequest.js @@ -24,16 +24,16 @@ import makeStyles from '@mui/styles/makeStyles' import { useFetch } from 'client/hooks' import { DialogConfirmation } from 'client/components/Dialogs' -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ backdrop: { zIndex: theme.zIndex.drawer + 1, - color: theme.palette.common.white + color: theme.palette.common.white, }, withTabs: { overflow: 'hidden', display: 'flex', - flexDirection: 'column' - } + flexDirection: 'column', + }, })) const DialogRequest = ({ withTabs, request, dialogProps, children }) => { @@ -41,14 +41,16 @@ const DialogRequest = ({ withTabs, request, dialogProps, children }) => { const fetchProps = useFetch(request) const { data, fetchRequest, loading, error } = fetchProps - useEffect(() => { fetchRequest() }, []) + useEffect(() => { + fetchRequest() + }, []) error && dialogProps?.handleCancel() if (!data || loading) { return ( - + ) } @@ -58,7 +60,7 @@ const DialogRequest = ({ withTabs, request, dialogProps, children }) => { dialogProps.contentProps = { className: clsx(classes.withTabs, className), - ...contentProps + ...contentProps, } } @@ -79,9 +81,9 @@ DialogRequest.propTypes = { acceptButtonProps: PropTypes.objectOf(PropTypes.any), handleCancel: PropTypes.func, cancelButtonProps: PropTypes.objectOf(PropTypes.any), - handleEntering: PropTypes.func + handleEntering: PropTypes.func, }), - children: PropTypes.func + children: PropTypes.func, } DialogRequest.defaultProps = { @@ -94,9 +96,9 @@ DialogRequest.defaultProps = { acceptButtonProps: undefined, handleCancel: undefined, cancelButtonProps: undefined, - handleEntering: undefined + handleEntering: undefined, }, - children: () => undefined + children: () => undefined, } DialogRequest.displayName = 'DialogRequest' diff --git a/src/fireedge/src/client/components/Dialogs/index.js b/src/fireedge/src/client/components/Dialogs/index.js index 207404215d..687100378a 100644 --- a/src/fireedge/src/client/components/Dialogs/index.js +++ b/src/fireedge/src/client/components/Dialogs/index.js @@ -18,8 +18,4 @@ import DialogRequest from 'client/components/Dialogs/DialogRequest' import DialogConfirmation from 'client/components/Dialogs/DialogConfirmation' export * from 'client/components/Dialogs/DialogConfirmation' -export { - DialogConfirmation, - DialogForm, - DialogRequest -} +export { DialogConfirmation, DialogForm, DialogRequest } diff --git a/src/fireedge/src/client/components/Fab/index.js b/src/fireedge/src/client/components/Fab/index.js index e3d7a3ef4d..ecf0203698 100644 --- a/src/fireedge/src/client/components/Fab/index.js +++ b/src/fireedge/src/client/components/Fab/index.js @@ -20,27 +20,25 @@ import clsx from 'clsx' import { Fab } from '@mui/material' import makeStyles from '@mui/styles/makeStyles' -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ root: { transition: '0.5s ease', zIndex: theme.zIndex.appBar, position: 'absolute', bottom: 60, - right: theme.spacing(5) - } + right: theme.spacing(5), + }, })) -const FloatingActionButton = memo( - ({ icon, className, ...props }) => { - const classes = useStyles() +const FloatingActionButton = memo(({ icon, className, ...props }) => { + const classes = useStyles() - return ( - - {icon} - - ) - } -) + return ( + + {icon} + + ) +}) FloatingActionButton.propTypes = { icon: PropTypes.node.isRequired, @@ -48,7 +46,7 @@ FloatingActionButton.propTypes = { color: PropTypes.oneOf(['inherit', 'primary', 'secondary']), disabled: PropTypes.bool, size: PropTypes.oneOf(['large', 'medium', 'small']), - variant: PropTypes.oneOf(['extended', 'circular']) + variant: PropTypes.oneOf(['extended', 'circular']), } FloatingActionButton.defaultProps = { @@ -57,7 +55,7 @@ FloatingActionButton.defaultProps = { color: 'primary', disabled: false, size: 'large', - variant: 'circular' + variant: 'circular', } FloatingActionButton.displayName = 'FloatingActionButton' diff --git a/src/fireedge/src/client/components/Footer/index.js b/src/fireedge/src/client/components/Footer/index.js index 4b22cc2dea..3a8ec1c340 100644 --- a/src/fireedge/src/client/components/Footer/index.js +++ b/src/fireedge/src/client/components/Footer/index.js @@ -32,15 +32,15 @@ const FooterBox = styled('footer')(({ theme }) => ({ right: 0, zIndex: theme.zIndex.appBar, textAlign: 'center', - padding: theme.spacing(0.6) + padding: theme.spacing(0.6), })) const HeartIcon = styled('span')(({ theme }) => ({ margin: theme.spacing(0, 1), color: theme.palette.error.dark, '&:before': { - content: "'❤️'" - } + content: "'❤️'", + }, })) const Footer = memo(() => { @@ -54,15 +54,13 @@ const Footer = memo(() => { return ( - + {'Made with'} - - + + {BY.text} - {version && ( - - )} + {version && } ) diff --git a/src/fireedge/src/client/components/FormControl/AutocompleteController.js b/src/fireedge/src/client/components/FormControl/AutocompleteController.js index 267961cd19..d489fa44ad 100644 --- a/src/fireedge/src/client/components/FormControl/AutocompleteController.js +++ b/src/fireedge/src/client/components/FormControl/AutocompleteController.js @@ -32,11 +32,11 @@ const AutocompleteController = memo( tooltip = '', multiple = false, values = [], - fieldProps: { separators, ...fieldProps } = {} + fieldProps: { separators, ...fieldProps } = {}, }) => { const { field: { value: renderValue, onBlur, onChange }, - fieldState: { error } + fieldState: { error }, } = useController({ name, control }) const selected = multiple @@ -46,13 +46,13 @@ const AutocompleteController = memo( return ( { const newValueToChange = multiple - ? newValue?.map(value => - typeof value === 'string' ? value : ({ text: value, value }) - ) + ? newValue?.map((value) => + typeof value === 'string' ? value : { text: value, value } + ) : newValue?.value return onChange(newValueToChange ?? '') @@ -65,28 +65,30 @@ const AutocompleteController = memo( tags.map((tag, index) => ( )) } - getOptionLabel={option => option.text} - isOptionEqualToValue={option => option.value === renderValue} + getOptionLabel={(option) => option.text} + isOptionEqualToValue={(option) => option.value === renderValue} renderInput={({ inputProps, ...inputParams }) => ( } + helperText={ + Boolean(error) && + } FormHelperTextProps={{ 'data-cy': `${cy}-error` }} {...inputParams} /> )} {...(tooltip && { loading: true, - loadingText: labelCanBeTranslated(tooltip) ? Tr(tooltip) : tooltip + loadingText: labelCanBeTranslated(tooltip) ? Tr(tooltip) : tooltip, })} {...(Array.isArray(separators) && { autoSelect: true, @@ -95,16 +97,15 @@ const AutocompleteController = memo( event.target.blur() event.target.focus() } - } + }, })} {...fieldProps} /> ) }, - (prevProps, nextProps) => ( - prevProps.error === nextProps.error && - prevProps.values === nextProps.values - )) + (prevProps, nextProps) => + prevProps.error === nextProps.error && prevProps.values === nextProps.values +) AutocompleteController.propTypes = { control: PropTypes.object, @@ -114,7 +115,7 @@ AutocompleteController.propTypes = { tooltip: PropTypes.any, multiple: PropTypes.bool, values: PropTypes.arrayOf(PropTypes.object), - fieldProps: PropTypes.object + fieldProps: PropTypes.object, } AutocompleteController.displayName = 'AutocompleteController' diff --git a/src/fireedge/src/client/components/FormControl/CheckboxController.js b/src/fireedge/src/client/components/FormControl/CheckboxController.js index 321b3ab0b2..faba4be899 100644 --- a/src/fireedge/src/client/components/FormControl/CheckboxController.js +++ b/src/fireedge/src/client/components/FormControl/CheckboxController.js @@ -16,7 +16,13 @@ import { memo } from 'react' import PropTypes from 'prop-types' -import { styled, FormControl, FormControlLabel, FormHelperText, Checkbox } from '@mui/material' +import { + styled, + FormControl, + FormControlLabel, + FormHelperText, + Checkbox, +} from '@mui/material' import { useController } from 'react-hook-form' import { ErrorHelper, Tooltip } from 'client/components/FormControl' @@ -26,7 +32,7 @@ import { generateKey } from 'client/utils' const Label = styled('span')({ display: 'flex', alignItems: 'center', - gap: '0.5em' + gap: '0.5em', }) const CheckboxController = memo( @@ -36,22 +42,22 @@ const CheckboxController = memo( name = '', label = '', tooltip, - fieldProps = {} + fieldProps = {}, }) => { const { field: { value = false, onChange }, - fieldState: { error } + fieldState: { error }, } = useController({ name, control }) return ( - + onChange(e.target.checked)} + onChange={(e) => onChange(e.target.checked)} name={name} checked={Boolean(value)} - color='secondary' + color="secondary" inputProps={{ 'data-cy': cy }} {...fieldProps} /> @@ -62,7 +68,7 @@ const CheckboxController = memo( {tooltip && } } - labelPlacement='end' + labelPlacement="end" /> {Boolean(error) && ( @@ -81,7 +87,7 @@ CheckboxController.propTypes = { name: PropTypes.string.isRequired, label: PropTypes.any, tooltip: PropTypes.any, - fieldProps: PropTypes.object + fieldProps: PropTypes.object, } CheckboxController.displayName = 'CheckboxController' diff --git a/src/fireedge/src/client/components/FormControl/ErrorHelper.js b/src/fireedge/src/client/components/FormControl/ErrorHelper.js index 178bc9d4ff..a7873dea4e 100644 --- a/src/fireedge/src/client/components/FormControl/ErrorHelper.js +++ b/src/fireedge/src/client/components/FormControl/ErrorHelper.js @@ -24,20 +24,26 @@ import { Tr, labelCanBeTranslated } from 'client/components/HOC' const ErrorTypo = styled(Typography)(({ theme }) => ({ ...theme.typography.body1, paddingLeft: theme.spacing(1), - overflowWrap: 'anywhere' + overflowWrap: 'anywhere', })) const ErrorHelper = memo(({ label, ...rest }) => ( - + - + {labelCanBeTranslated(label) ? Tr(label) : label} )) ErrorHelper.propTypes = { - label: oneOfType([string, node]) + label: oneOfType([string, node]), } ErrorHelper.displayName = 'ErrorHelper' diff --git a/src/fireedge/src/client/components/FormControl/FileController.js b/src/fireedge/src/client/components/FormControl/FileController.js index 1d3b3bc253..932e189f70 100644 --- a/src/fireedge/src/client/components/FormControl/FileController.js +++ b/src/fireedge/src/client/components/FormControl/FileController.js @@ -20,7 +20,11 @@ import { styled, FormControl, FormHelperText } from '@mui/material' import { Check as CheckIcon, Page as FileIcon } from 'iconoir-react' import { useController } from 'react-hook-form' -import { ErrorHelper, Tooltip, SubmitButton } from 'client/components/FormControl' +import { + ErrorHelper, + Tooltip, + SubmitButton, +} from 'client/components/FormControl' import { Tr, labelCanBeTranslated } from 'client/components/HOC' import { generateKey } from 'client/utils' @@ -31,8 +35,8 @@ const Label = styled('label')(({ theme, error }) => ({ alignItems: 'center', gap: '1em', ...(error && { - color: theme.palette.error.main - }) + color: theme.palette.error.main, + }), })) const FileController = memo( @@ -45,30 +49,33 @@ const FileController = memo( validationBeforeTransform, transform, fieldProps = {}, - formContext = {} + formContext = {}, }) => { const { setValue, setError, clearErrors, watch } = formContext const { field: { ref, value, onChange, ...inputProps }, - fieldState: { error } + fieldState: { error }, } = useController({ name, control }) const [isLoading, setLoading] = useState(() => false) const [success, setSuccess] = useState(() => !error && !!watch(name)) const timer = useRef() - useEffect(() => () => { - clearTimeout(timer.current) - }, []) + useEffect( + () => () => { + clearTimeout(timer.current) + }, + [] + ) /** * Simulate 1 second loading, then set success or error. * * @param {string} message - Message */ - const handleDelayState = message => { - // simulate is loading for one second + const handleDelayState = (message) => { + // simulate is loading for one second timer.current = setTimeout(() => { setSuccess(!message) setLoading(false) @@ -82,7 +89,7 @@ const FileController = memo( * * @param {ChangeEvent} event - Change event object */ - const handleChange = async event => { + const handleChange = async (event) => { try { const file = event.target.files?.[0] @@ -108,19 +115,19 @@ const FileController = memo( } return ( - + ) }, @@ -109,7 +121,7 @@ SelectController.propTypes = { multiple: PropTypes.bool, values: PropTypes.arrayOf(PropTypes.object).isRequired, renderValue: PropTypes.func, - fieldProps: PropTypes.object + fieldProps: PropTypes.object, } SelectController.displayName = 'SelectController' diff --git a/src/fireedge/src/client/components/FormControl/SliderController.js b/src/fireedge/src/client/components/FormControl/SliderController.js index 9bae472dde..af465af00d 100644 --- a/src/fireedge/src/client/components/FormControl/SliderController.js +++ b/src/fireedge/src/client/components/FormControl/SliderController.js @@ -16,7 +16,13 @@ import { memo } from 'react' import PropTypes from 'prop-types' -import { Typography, TextField, Slider, FormHelperText, Grid } from '@mui/material' +import { + Typography, + TextField, + Slider, + FormHelperText, + Grid, +} from '@mui/material' import { useController } from 'react-hook-form' import { ErrorHelper } from 'client/components/FormControl' @@ -29,11 +35,11 @@ const SliderController = memo( cy = `slider-${generateKey()}`, name = '', label = '', - fieldProps = {} + fieldProps = {}, }) => { const { field: { value, onChange, ...inputProps }, - fieldState: { error } + fieldState: { error }, } = useController({ name, control }) const sliderId = `${cy}-slider` @@ -44,13 +50,13 @@ const SliderController = memo( {labelCanBeTranslated(label) ? Tr(label) : label} - + onChange(val)} {...fieldProps} @@ -62,15 +68,17 @@ const SliderController = memo( fullWidth value={value} error={Boolean(error)} - type='number' + type="number" inputProps={{ 'data-cy': inputId, 'aria-labelledby': sliderId, - ...fieldProps + ...fieldProps, }} - onChange={evt => onChange( - evt.target.value === '' ? '0' : Number(evt.target.value) - )} + onChange={(evt) => + onChange( + evt.target.value === '' ? '0' : Number(evt.target.value) + ) + } /> @@ -93,7 +101,7 @@ SliderController.propTypes = { tooltip: PropTypes.any, multiple: PropTypes.bool, values: PropTypes.arrayOf(PropTypes.object).isRequired, - fieldProps: PropTypes.object + fieldProps: PropTypes.object, } SliderController.displayName = 'SliderController' diff --git a/src/fireedge/src/client/components/FormControl/SubmitButton.js b/src/fireedge/src/client/components/FormControl/SubmitButton.js index af099b87ac..38d5acef4e 100644 --- a/src/fireedge/src/client/components/FormControl/SubmitButton.js +++ b/src/fireedge/src/client/components/FormControl/SubmitButton.js @@ -17,22 +17,28 @@ import { forwardRef, memo } from 'react' import PropTypes from 'prop-types' import clsx from 'clsx' -import { CircularProgress, Button, IconButton, Tooltip, Typography } from '@mui/material' +import { + CircularProgress, + Button, + IconButton, + Tooltip, + Typography, +} from '@mui/material' import makeStyles from '@mui/styles/makeStyles' import { Tr, ConditionalWrap } from 'client/components/HOC' import { T } from 'client/constants' -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ root: { transition: 'disabled 0.5s ease', - boxShadow: 'none' + boxShadow: 'none', }, disabled: { '& svg': { - color: theme.palette.action.disabled - } - } + color: theme.palette.action.disabled, + }, + }, })) const ButtonComponent = forwardRef( @@ -42,8 +48,9 @@ const ButtonComponent = forwardRef( {children} ) : ( -