@@ -53,20 +52,27 @@ const TotalProvisionsByState = () => {
), [classes, totalProvisions])
return useMemo(() => (
-
- {title}
-
-
-
-
- ), [classes, chartData])
+ !totalProvisions && isLoading ? (
+
+ ) : (
+
+ {title}
+
+
+
+
+ )
+ ), [classes, chartData, totalProvisions, isLoading])
}
TotalProvisionsByState.displayName = 'TotalProvisionsByState'
diff --git a/src/fireedge/src/client/components/Widgets/TotalProvisionsByState/styles.js b/src/fireedge/src/client/components/Widgets/TotalProvisionsByState/styles.js
index 4885a91023..d04d99c93f 100644
--- a/src/fireedge/src/client/components/Widgets/TotalProvisionsByState/styles.js
+++ b/src/fireedge/src/client/components/Widgets/TotalProvisionsByState/styles.js
@@ -13,7 +13,7 @@
* See the License for the specific language governing permissions and *
* limitations under the License. *
* ------------------------------------------------------------------------- */
-import { makeStyles } from '@material-ui/core'
+import makeStyles from '@mui/styles/makeStyles'
export default makeStyles(theme => ({
root: {
diff --git a/src/fireedge/src/client/components/Widgets/TotalSunstoneResources.js b/src/fireedge/src/client/components/Widgets/TotalSunstoneResources.js
index 798c26ef63..6fa2416e37 100644
--- a/src/fireedge/src/client/components/Widgets/TotalSunstoneResources.js
+++ b/src/fireedge/src/client/components/Widgets/TotalSunstoneResources.js
@@ -22,74 +22,72 @@ import {
Archive as ImageIcon,
NetworkAlt as NetworkIcon
} from 'iconoir-react'
-import { makeStyles } from '@material-ui/core'
-import { Skeleton } from '@material-ui/lab'
+import { Skeleton, Grid } from '@mui/material'
-import { RESOURCES, useOne } from 'client/features/One'
+import { useUser, useGroup, useImage, useVNetwork } from 'client/features/One'
import NumberEasing from 'client/components/NumberEasing'
import { WavesCard } from 'client/components/Cards'
import { T } from 'client/constants'
-const useStyles = makeStyles({
- root: {
- display: 'grid',
- gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))',
- gridGap: '2em'
- }
-})
+const TOTAL_WIDGETS = 4
+const breakpoints = { xs: 12, sm: 6, md: 3 }
const TotalProvisionInfrastructures = ({ isLoading }) => {
- const classes = useStyles()
-
- const {
- [RESOURCES.user]: users = [],
- [RESOURCES.group]: groups = [],
- [RESOURCES.image]: images = [],
- [RESOURCES.vn]: vNetworks = []
- } = useOne()
+ const users = useUser()
+ const groups = useGroup()
+ const images = useImage()
+ const vNetworks = useVNetwork()
return useMemo(() => (
-
{!users?.length && isLoading ? (
- <>
-
-
-
-
-
+ Array.from(Array(TOTAL_WIDGETS)).map((_, index) => (
+
+
+
+ ))
) : (
<>
- }
- bgColor='#fa7892'
- icon={UserIcon}
- />
- }
- bgColor='#b25aff'
- icon={GroupIcon}
- />
- }
- bgColor='#1fbbc6'
- icon={ImageIcon}
- />
- }
- bgColor='#f09d42'
- icon={NetworkIcon}
- />
+
+ }
+ bgColor='#fa7892'
+ icon={UserIcon}
+ />
+
+
+ }
+ bgColor='#b25aff'
+ icon={GroupIcon}
+ />
+
+
+ }
+ bgColor='#1fbbc6'
+ icon={ImageIcon}
+ />
+
+
+ }
+ bgColor='#f09d42'
+ icon={NetworkIcon}
+ />
+
)}
-
- ), [users?.length, isLoading, classes])
+
+ ), [users?.length, isLoading])
}
TotalProvisionInfrastructures.displayName = 'TotalProvisionInfrastructures'
diff --git a/src/fireedge/src/client/constants/translates.js b/src/fireedge/src/client/constants/translates.js
index eb58b2a599..4a24885415 100644
--- a/src/fireedge/src/client/constants/translates.js
+++ b/src/fireedge/src/client/constants/translates.js
@@ -38,9 +38,12 @@ module.exports = {
Change: 'Change',
ChangeGroup: 'Change group',
ChangeOwner: 'Change owner',
+ Clear: 'Clear',
Clone: 'Clone',
CloneSeveralTemplates: 'Clone several Templates',
CloneTemplate: 'Clone Template',
+ Close: 'Close',
+ Collapse: 'Collapse',
Configuration: 'Configuration',
Create: 'Create',
CreateMarketApp: 'Create Marketplace App',
@@ -61,11 +64,13 @@ module.exports = {
Lock: 'Lock',
Migrate: 'Migrate',
MigrateLive: 'Migrate live',
+ Pin: 'Pin',
Poweroff: 'Poweroff',
PoweroffHard: 'Poweroff hard',
Reboot: 'Reboot',
RebootHard: 'Reboot hard',
Recover: 'Recover',
+ RecoverSomething: 'Recover: %s',
RecoverSeveralVMs: 'Recover several VMs',
Refresh: 'Refresh',
Release: 'Release',
@@ -148,6 +153,8 @@ module.exports = {
Token2FA: '2FA Token',
KeepLoggedIn: 'Keep me logged in',
Credentials: 'Credentials',
+ SwitchView: 'Switch view',
+ SwitchGroup: 'Switch group',
/* errors */
SessionExpired: 'Sorry, your session has expired',
@@ -297,6 +304,9 @@ module.exports = {
ReadyStatusGate: 'Ready status gate',
/* VM schema */
+ /* VM schema - info */
+ UserTemplate: 'User Template',
+ Template: 'Template',
/* VM schema - capacity */
Capacity: 'Capacity',
PhysicalCpu: 'Physical CPU',
diff --git a/src/fireedge/src/client/containers/ApplicationsInstances/DialogInfo/dialog.js b/src/fireedge/src/client/containers/ApplicationsInstances/DialogInfo/dialog.js
index 0feb105838..7c4806e6fd 100644
--- a/src/fireedge/src/client/containers/ApplicationsInstances/DialogInfo/dialog.js
+++ b/src/fireedge/src/client/containers/ApplicationsInstances/DialogInfo/dialog.js
@@ -23,7 +23,7 @@ import {
DialogActions,
Button,
useMediaQuery
-} from '@material-ui/core'
+} from '@mui/material'
import { Tr } from 'client/components/HOC'
import { T } from 'client/constants'
diff --git a/src/fireedge/src/client/containers/ApplicationsInstances/DialogInfo/index.js b/src/fireedge/src/client/containers/ApplicationsInstances/DialogInfo/index.js
index a2e18ef738..4839d15c28 100644
--- a/src/fireedge/src/client/containers/ApplicationsInstances/DialogInfo/index.js
+++ b/src/fireedge/src/client/containers/ApplicationsInstances/DialogInfo/index.js
@@ -24,7 +24,7 @@ import {
Calendar as ActionsIcons
} from 'iconoir-react'
-import { AppBar, Tabs, Tab, Box } from '@material-ui/core'
+import { AppBar, Tabs, Tab, Box } from '@mui/material'
import CustomDialog from 'client/containers/ApplicationsInstances/DialogInfo/dialog'
import InfoTab from 'client/containers/ApplicationsInstances/DialogInfo/info'
diff --git a/src/fireedge/src/client/containers/ApplicationsInstances/DialogInfo/info.js b/src/fireedge/src/client/containers/ApplicationsInstances/DialogInfo/info.js
index 05f89ff744..77ae57c95c 100644
--- a/src/fireedge/src/client/containers/ApplicationsInstances/DialogInfo/info.js
+++ b/src/fireedge/src/client/containers/ApplicationsInstances/DialogInfo/info.js
@@ -17,7 +17,7 @@ import { memo } from 'react'
import PropTypes from 'prop-types'
import clsx from 'clsx'
-import { List, ListItem, Typography, Grid, Paper, Divider } from '@material-ui/core'
+import { List, ListItem, Typography, Grid, Paper, Divider } from '@mui/material'
import { Check as CheckIcon, Square as BlankSquareIcon } from 'iconoir-react'
import useStyles from 'client/containers/ApplicationsInstances/DialogInfo/styles'
diff --git a/src/fireedge/src/client/containers/ApplicationsInstances/DialogInfo/styles.js b/src/fireedge/src/client/containers/ApplicationsInstances/DialogInfo/styles.js
index 14ee3fd7dc..02f2e6ad0b 100644
--- a/src/fireedge/src/client/containers/ApplicationsInstances/DialogInfo/styles.js
+++ b/src/fireedge/src/client/containers/ApplicationsInstances/DialogInfo/styles.js
@@ -13,7 +13,7 @@
* See the License for the specific language governing permissions and *
* limitations under the License. *
* ------------------------------------------------------------------------- */
-import { makeStyles } from '@material-ui/core'
+import makeStyles from '@mui/styles/makeStyles'
export default makeStyles(theme => ({
permissions: {
diff --git a/src/fireedge/src/client/containers/ApplicationsInstances/index.js b/src/fireedge/src/client/containers/ApplicationsInstances/index.js
index 39521b277a..215dc540cd 100644
--- a/src/fireedge/src/client/containers/ApplicationsInstances/index.js
+++ b/src/fireedge/src/client/containers/ApplicationsInstances/index.js
@@ -16,7 +16,7 @@
/* eslint-disable jsdoc/require-jsdoc */
import { useEffect, useState } from 'react'
-import { Container, Box } from '@material-ui/core'
+import { Container, Box } from '@mui/material'
import { useFetch } from 'client/hooks'
import { useApplication, useApplicationApi } from 'client/features/One'
diff --git a/src/fireedge/src/client/containers/ApplicationsTemplates/Form/Create/Steps/Tiers/Flow/index.js b/src/fireedge/src/client/containers/ApplicationsTemplates/Form/Create/Steps/Tiers/Flow/index.js
index 395da5a0c1..07f2c761f1 100644
--- a/src/fireedge/src/client/containers/ApplicationsTemplates/Form/Create/Steps/Tiers/Flow/index.js
+++ b/src/fireedge/src/client/containers/ApplicationsTemplates/Form/Create/Steps/Tiers/Flow/index.js
@@ -16,7 +16,7 @@
import { memo, useEffect, useMemo, JSXElementConstructor } from 'react'
import PropTypes from 'prop-types'
-import { makeStyles } from '@material-ui/core'
+import makeStyles from '@mui/styles/makeStyles'
import { AddCircledOutline as AddIcon, Selection as SelectAllIcon } from 'iconoir-react'
import ReactFlow, { Background } from 'react-flow-renderer'
diff --git a/src/fireedge/src/client/containers/ApplicationsTemplates/Form/Create/Steps/Tiers/Steps/Policies/index.js b/src/fireedge/src/client/containers/ApplicationsTemplates/Form/Create/Steps/Tiers/Steps/Policies/index.js
index eb8651c250..3f247e48e7 100644
--- a/src/fireedge/src/client/containers/ApplicationsTemplates/Form/Create/Steps/Tiers/Steps/Policies/index.js
+++ b/src/fireedge/src/client/containers/ApplicationsTemplates/Form/Create/Steps/Tiers/Steps/Policies/index.js
@@ -17,7 +17,7 @@
import { useCallback, useState, useMemo } from 'react'
import { useFormContext } from 'react-hook-form'
-import { useTheme, Box, Tab, Tabs, Fab, AppBar } from '@material-ui/core'
+import { useTheme, Box, Tab, Tabs, Fab, AppBar } from '@mui/material'
import {
Plus as PlusIcon,
WarningCircledOutline as WarningIcon
@@ -88,7 +88,7 @@ const Policies = () => ({
const policies = watch(STEP_ID)
const defaultValues = TABS[tabSelected]?.schema.default()
- const newDataTab = [...policies?.[tabSelected] ?? []].concat(defaultValues)
+ const newDataTab = [...(policies?.[tabSelected] ?? [])].concat(defaultValues)
const newPolicies = set(policies, tabSelected, newDataTab)
handleSetList(newPolicies)
diff --git a/src/fireedge/src/client/containers/ApplicationsTemplates/Form/Create/Steps/Tiers/Steps/Template/index.js b/src/fireedge/src/client/containers/ApplicationsTemplates/Form/Create/Steps/Tiers/Steps/Template/index.js
index 6c16fb3257..66d02a8f7b 100644
--- a/src/fireedge/src/client/containers/ApplicationsTemplates/Form/Create/Steps/Tiers/Steps/Template/index.js
+++ b/src/fireedge/src/client/containers/ApplicationsTemplates/Form/Create/Steps/Tiers/Steps/Template/index.js
@@ -16,7 +16,8 @@
/* eslint-disable jsdoc/require-jsdoc */
import { useCallback, useState, useEffect, useMemo } from 'react'
-import { makeStyles, IconButton, Button, Fade } from '@material-ui/core'
+import { IconButton, Button, Fade } from '@mui/material'
+import makeStyles from '@mui/styles/makeStyles'
import {
NavArrowLeft as BackIcon,
SimpleCart as MarketplaceIcon,
@@ -95,7 +96,7 @@ const Template = () => ({
return screen !== undefined ? (
+
}
diff --git a/src/fireedge/src/client/containers/ApplicationsTemplates/Form/Create/Steps/Tiers/index.js b/src/fireedge/src/client/containers/ApplicationsTemplates/Form/Create/Steps/Tiers/index.js
index 664061670d..a3d28fc404 100644
--- a/src/fireedge/src/client/containers/ApplicationsTemplates/Form/Create/Steps/Tiers/index.js
+++ b/src/fireedge/src/client/containers/ApplicationsTemplates/Form/Create/Steps/Tiers/index.js
@@ -26,7 +26,7 @@ import * as yup from 'yup'
import { useWatch } from 'react-hook-form'
import { ReactFlowProvider } from 'react-flow-renderer'
-import { Box } from '@material-ui/core'
+import { Box } from '@mui/material'
import { useListForm } from 'client/hooks'
import FormStepper from 'client/components/FormStepper'
diff --git a/src/fireedge/src/client/containers/ApplicationsTemplates/Form/Create/index.js b/src/fireedge/src/client/containers/ApplicationsTemplates/Form/Create/index.js
index 1f44fb5ed2..25c5a7c0f9 100644
--- a/src/fireedge/src/client/containers/ApplicationsTemplates/Form/Create/index.js
+++ b/src/fireedge/src/client/containers/ApplicationsTemplates/Form/Create/index.js
@@ -17,7 +17,7 @@
import { useEffect } from 'react'
import { Redirect, useHistory, useParams } from 'react-router-dom'
-import { LinearProgress, Container } from '@material-ui/core'
+import { LinearProgress, Container } from '@mui/material'
import { useForm, FormProvider } from 'react-hook-form'
import { yupResolver } from '@hookform/resolvers/yup'
diff --git a/src/fireedge/src/client/containers/ApplicationsTemplates/Form/Deploy/Steps/Networking/index.js b/src/fireedge/src/client/containers/ApplicationsTemplates/Form/Deploy/Steps/Networking/index.js
index 52baa28c01..3114857b2b 100644
--- a/src/fireedge/src/client/containers/ApplicationsTemplates/Form/Deploy/Steps/Networking/index.js
+++ b/src/fireedge/src/client/containers/ApplicationsTemplates/Form/Deploy/Steps/Networking/index.js
@@ -16,7 +16,7 @@
/* eslint-disable jsdoc/require-jsdoc */
import { useEffect, useCallback } from 'react'
-import { Divider, Paper, Typography } from '@material-ui/core'
+import { Divider, Paper, Typography } from '@mui/material'
import { useVNetworkApi, useVNetworkTemplateApi } from 'client/features/One'
import FormWithSchema from 'client/components/Forms/FormWithSchema'
diff --git a/src/fireedge/src/client/containers/ApplicationsTemplates/Form/Deploy/Steps/Tiers/index.js b/src/fireedge/src/client/containers/ApplicationsTemplates/Form/Deploy/Steps/Tiers/index.js
index 72323d007e..e83b77c3de 100644
--- a/src/fireedge/src/client/containers/ApplicationsTemplates/Form/Deploy/Steps/Tiers/index.js
+++ b/src/fireedge/src/client/containers/ApplicationsTemplates/Form/Deploy/Steps/Tiers/index.js
@@ -17,7 +17,7 @@
import { useMemo, useCallback, useState } from 'react'
import { useFormContext } from 'react-hook-form'
-import { useTheme, AppBar, Tabs, Tab } from '@material-ui/core'
+import { useTheme, AppBar, Tabs, Tab } from '@mui/material'
import { WarningCircledOutline as WarningIcon } from 'iconoir-react'
import FormWithSchema from 'client/components/Forms/FormWithSchema'
diff --git a/src/fireedge/src/client/containers/ApplicationsTemplates/Form/Deploy/index.js b/src/fireedge/src/client/containers/ApplicationsTemplates/Form/Deploy/index.js
index c170432d5f..5f100cbd66 100644
--- a/src/fireedge/src/client/containers/ApplicationsTemplates/Form/Deploy/index.js
+++ b/src/fireedge/src/client/containers/ApplicationsTemplates/Form/Deploy/index.js
@@ -17,7 +17,8 @@
import { useEffect, useMemo, useState } from 'react'
import PropTypes from 'prop-types'
-import { makeStyles, CircularProgress, Backdrop } from '@material-ui/core'
+import { CircularProgress, Backdrop } from '@mui/material'
+import makeStyles from '@mui/styles/makeStyles'
import { useFetchAll } from 'client/hooks'
import { useApplicationTemplateApi } from 'client/features/One'
@@ -86,7 +87,7 @@ const DeployForm = ({ applicationTemplate, handleCancel }) => {
if ((applicationTemplate && !data) || loading) {
return (
-
+
)
}
diff --git a/src/fireedge/src/client/containers/ApplicationsTemplates/index.js b/src/fireedge/src/client/containers/ApplicationsTemplates/index.js
index 3a16e46da0..2cba434ea2 100644
--- a/src/fireedge/src/client/containers/ApplicationsTemplates/index.js
+++ b/src/fireedge/src/client/containers/ApplicationsTemplates/index.js
@@ -17,7 +17,7 @@
import { useEffect, useState } from 'react'
import { useHistory, generatePath } from 'react-router-dom'
-import { Container, Box } from '@material-ui/core'
+import { Container, Box } from '@mui/material'
import { PATH } from 'client/apps/sunstone/routesFlow'
import { useFetch } from 'client/hooks'
diff --git a/src/fireedge/src/client/containers/Clusters/Detail.js b/src/fireedge/src/client/containers/Clusters/Detail.js
index 9b1d94e972..f325ee0aad 100644
--- a/src/fireedge/src/client/containers/Clusters/Detail.js
+++ b/src/fireedge/src/client/containers/Clusters/Detail.js
@@ -15,7 +15,7 @@
* ------------------------------------------------------------------------- */
/* eslint-disable jsdoc/require-jsdoc */
import { useParams, Redirect } from 'react-router-dom'
-import { Container, Box } from '@material-ui/core'
+import { Container, Box } from '@mui/material'
import ClusterTabs from 'client/components/Tabs/Cluster'
diff --git a/src/fireedge/src/client/containers/Clusters/index.js b/src/fireedge/src/client/containers/Clusters/index.js
index 42e82c8fd4..babbf588e4 100644
--- a/src/fireedge/src/client/containers/Clusters/index.js
+++ b/src/fireedge/src/client/containers/Clusters/index.js
@@ -15,7 +15,7 @@
* ------------------------------------------------------------------------- */
/* eslint-disable jsdoc/require-jsdoc */
import { useState } from 'react'
-import { Container, Box } from '@material-ui/core'
+import { Container, Box } from '@mui/material'
import { ClustersTable } from 'client/components/Tables'
import ClusterTabs from 'client/components/Tabs/Cluster'
diff --git a/src/fireedge/src/client/containers/Dashboard/Provision/index.js b/src/fireedge/src/client/containers/Dashboard/Provision/index.js
index d4f024a514..e6c1b8075f 100644
--- a/src/fireedge/src/client/containers/Dashboard/Provision/index.js
+++ b/src/fireedge/src/client/containers/Dashboard/Provision/index.js
@@ -15,44 +15,54 @@
* ------------------------------------------------------------------------- */
/* eslint-disable jsdoc/require-jsdoc */
import { useEffect } from 'react'
-
-import clsx from 'clsx'
-import { Container, Box, Grid } from '@material-ui/core'
+import { Container, Box, Grid } from '@mui/material'
import { useAuth } from 'client/features/Auth'
+import { useFetchAll } from 'client/hooks'
import { useProvisionApi, useProviderApi } from 'client/features/One'
import * as Widgets from 'client/components/Widgets'
import dashboardStyles from 'client/containers/Dashboard/Provision/styles'
function Dashboard () {
- const { settings: { disableanimations } = {} } = useAuth()
+ const { status, fetchRequestAll, STATUS } = useFetchAll()
+ const { INIT, PENDING } = STATUS
+
const { getProvisions } = useProvisionApi()
const { getProviders } = useProviderApi()
+ const { settings: { disableanimations } = {} } = useAuth()
const classes = dashboardStyles({ disableanimations })
- useEffect(() => {
- getProviders()
- getProvisions()
- }, [])
-
const withoutAnimations = String(disableanimations).toUpperCase() === 'YES'
+ useEffect(() => {
+ fetchRequestAll([
+ getProviders(),
+ getProvisions()
+ ])
+ }, [])
+
return (
-
+
-
-
+
+
-
-
+
+
diff --git a/src/fireedge/src/client/containers/Dashboard/Provision/styles.js b/src/fireedge/src/client/containers/Dashboard/Provision/styles.js
index 8d16b148f1..2eebec104a 100644
--- a/src/fireedge/src/client/containers/Dashboard/Provision/styles.js
+++ b/src/fireedge/src/client/containers/Dashboard/Provision/styles.js
@@ -13,7 +13,7 @@
* See the License for the specific language governing permissions and *
* limitations under the License. *
* ------------------------------------------------------------------------- */
-import { makeStyles } from '@material-ui/core'
+import makeStyles from '@mui/styles/makeStyles'
export default makeStyles({
withoutAnimations: {
diff --git a/src/fireedge/src/client/containers/Dashboard/Sunstone/index.js b/src/fireedge/src/client/containers/Dashboard/Sunstone/index.js
index aaac931164..b7ccbac42b 100644
--- a/src/fireedge/src/client/containers/Dashboard/Sunstone/index.js
+++ b/src/fireedge/src/client/containers/Dashboard/Sunstone/index.js
@@ -15,9 +15,7 @@
* ------------------------------------------------------------------------- */
/* eslint-disable jsdoc/require-jsdoc */
import { useEffect } from 'react'
-
-import clsx from 'clsx'
-import { Container, Box, Grid } from '@material-ui/core'
+import { Container, Box, Grid } from '@mui/material'
import { useAuth } from 'client/features/Auth'
import { useFetchAll } from 'client/hooks'
@@ -50,7 +48,7 @@ function Dashboard () {
return (
diff --git a/src/fireedge/src/client/containers/Dashboard/Sunstone/styles.js b/src/fireedge/src/client/containers/Dashboard/Sunstone/styles.js
index 8d16b148f1..2eebec104a 100644
--- a/src/fireedge/src/client/containers/Dashboard/Sunstone/styles.js
+++ b/src/fireedge/src/client/containers/Dashboard/Sunstone/styles.js
@@ -13,7 +13,7 @@
* See the License for the specific language governing permissions and *
* limitations under the License. *
* ------------------------------------------------------------------------- */
-import { makeStyles } from '@material-ui/core'
+import makeStyles from '@mui/styles/makeStyles'
export default makeStyles({
withoutAnimations: {
diff --git a/src/fireedge/src/client/containers/Datastores/index.js b/src/fireedge/src/client/containers/Datastores/index.js
index c982d5d0bc..46cc72b3ae 100644
--- a/src/fireedge/src/client/containers/Datastores/index.js
+++ b/src/fireedge/src/client/containers/Datastores/index.js
@@ -15,7 +15,7 @@
* ------------------------------------------------------------------------- */
/* eslint-disable jsdoc/require-jsdoc */
-import { Container, Box } from '@material-ui/core'
+import { Container, Box } from '@mui/material'
import { DatastoresTable } from 'client/components/Tables'
diff --git a/src/fireedge/src/client/containers/Groups/Detail.js b/src/fireedge/src/client/containers/Groups/Detail.js
index c8d58161e1..59831966e0 100644
--- a/src/fireedge/src/client/containers/Groups/Detail.js
+++ b/src/fireedge/src/client/containers/Groups/Detail.js
@@ -15,7 +15,7 @@
* ------------------------------------------------------------------------- */
/* eslint-disable jsdoc/require-jsdoc */
import { useParams, Redirect } from 'react-router-dom'
-import { Container, Box } from '@material-ui/core'
+import { Container, Box } from '@mui/material'
// import GroupTabs from 'client/components/Tabs/Group'
diff --git a/src/fireedge/src/client/containers/Groups/index.js b/src/fireedge/src/client/containers/Groups/index.js
index b72fb0600e..86512806d2 100644
--- a/src/fireedge/src/client/containers/Groups/index.js
+++ b/src/fireedge/src/client/containers/Groups/index.js
@@ -15,7 +15,7 @@
* ------------------------------------------------------------------------- */
/* eslint-disable jsdoc/require-jsdoc */
-import { Container, Box } from '@material-ui/core'
+import { Container, Box } from '@mui/material'
import { GroupsTable } from 'client/components/Tables'
diff --git a/src/fireedge/src/client/containers/Hosts/Detail.js b/src/fireedge/src/client/containers/Hosts/Detail.js
index 36927ccfdb..f3ec7f4bad 100644
--- a/src/fireedge/src/client/containers/Hosts/Detail.js
+++ b/src/fireedge/src/client/containers/Hosts/Detail.js
@@ -15,7 +15,7 @@
* ------------------------------------------------------------------------- */
/* eslint-disable jsdoc/require-jsdoc */
import { useParams, Redirect } from 'react-router-dom'
-import { Container, Box } from '@material-ui/core'
+import { Container, Box } from '@mui/material'
import HostTabs from 'client/components/Tabs/Host'
diff --git a/src/fireedge/src/client/containers/Hosts/index.js b/src/fireedge/src/client/containers/Hosts/index.js
index c98e22f979..be2831c317 100644
--- a/src/fireedge/src/client/containers/Hosts/index.js
+++ b/src/fireedge/src/client/containers/Hosts/index.js
@@ -15,7 +15,7 @@
* ------------------------------------------------------------------------- */
/* eslint-disable jsdoc/require-jsdoc */
import { useState } from 'react'
-import { Container, Box } from '@material-ui/core'
+import { Container, Box } from '@mui/material'
import { HostsTable } from 'client/components/Tables'
import HostTabs from 'client/components/Tabs/Host'
diff --git a/src/fireedge/src/client/containers/Images/index.js b/src/fireedge/src/client/containers/Images/index.js
index 097397d284..6746daec46 100644
--- a/src/fireedge/src/client/containers/Images/index.js
+++ b/src/fireedge/src/client/containers/Images/index.js
@@ -16,7 +16,7 @@
/* eslint-disable jsdoc/require-jsdoc */
import { useState, useMemo } from 'react'
-import { Container, Box } from '@material-ui/core'
+import { Container, Box } from '@mui/material'
import { ImagesTable } from 'client/components/Tables'
import Detail from 'client/components/Tables/Images/detail'
diff --git a/src/fireedge/src/client/containers/Login/Form.js b/src/fireedge/src/client/containers/Login/Form.js
index c8ff640159..f5a6ab2e67 100644
--- a/src/fireedge/src/client/containers/Login/Form.js
+++ b/src/fireedge/src/client/containers/Login/Form.js
@@ -18,7 +18,8 @@ import { useEffect } from 'react'
import PropTypes from 'prop-types'
import clsx from 'clsx'
-import { Box, Button, Slide } from '@material-ui/core'
+import { Box } from '@mui/system'
+import { Button, Slide } from '@mui/material'
import { useForm, FormProvider } from 'react-hook-form'
import { yupResolver } from '@hookform/resolvers/yup'
@@ -68,6 +69,7 @@ const Form = ({ onBack, onSubmit, resolver, fields, error, isLoading, transition
color='secondary'
data-cy='login-button'
isSubmitting={isLoading}
+ sx={{ textTransform: 'uppercase', padding: '0.5em' }}
label={onBack ? Tr(T.Next) : Tr(T.SignIn)}
/>
diff --git a/src/fireedge/src/client/containers/Login/index.js b/src/fireedge/src/client/containers/Login/index.js
index 72578d8e80..b5f841f180 100644
--- a/src/fireedge/src/client/containers/Login/index.js
+++ b/src/fireedge/src/client/containers/Login/index.js
@@ -15,7 +15,7 @@
* ------------------------------------------------------------------------- */
/* eslint-disable jsdoc/require-jsdoc */
import { useMemo, useState } from 'react'
-import { Box, Container, LinearProgress, Paper, useMediaQuery } from '@material-ui/core'
+import { Box, Container, LinearProgress, Paper, useMediaQuery } from '@mui/material'
import { useAuth, useAuthApi } from 'client/features/Auth'
import { useFetch } from 'client/hooks'
diff --git a/src/fireedge/src/client/containers/Login/schema.js b/src/fireedge/src/client/containers/Login/schema.js
index 0e328712ad..6fe7031f57 100644
--- a/src/fireedge/src/client/containers/Login/schema.js
+++ b/src/fireedge/src/client/containers/Login/schema.js
@@ -35,7 +35,7 @@ export const USERNAME = {
autoFocus: true,
required: true,
autoComplete: 'username',
- margin: 'normal'
+ size: 'medium'
}
}
@@ -52,7 +52,7 @@ export const PASSWORD = {
fieldProps: {
required: true,
autoComplete: 'current-password',
- margin: 'normal'
+ size: 'medium'
}
}
diff --git a/src/fireedge/src/client/containers/Login/styles.js b/src/fireedge/src/client/containers/Login/styles.js
index 44ecb900fb..bfda23d7b0 100644
--- a/src/fireedge/src/client/containers/Login/styles.js
+++ b/src/fireedge/src/client/containers/Login/styles.js
@@ -13,7 +13,7 @@
* See the License for the specific language governing permissions and *
* limitations under the License. *
* ------------------------------------------------------------------------- */
-import { makeStyles } from '@material-ui/core'
+import makeStyles from '@mui/styles/makeStyles'
export default makeStyles(theme => ({
root: {
@@ -45,7 +45,7 @@ export default makeStyles(theme => ({
}
},
wrapperForm: {
- padding: theme.spacing(),
+ padding: theme.spacing(2, 1),
display: 'flex',
overflow: 'hidden'
},
diff --git a/src/fireedge/src/client/containers/MarketplaceApps/index.js b/src/fireedge/src/client/containers/MarketplaceApps/index.js
index eef1f793ed..67d02e7fd4 100644
--- a/src/fireedge/src/client/containers/MarketplaceApps/index.js
+++ b/src/fireedge/src/client/containers/MarketplaceApps/index.js
@@ -15,7 +15,7 @@
* ------------------------------------------------------------------------- */
/* eslint-disable jsdoc/require-jsdoc */
-import { Container, Box } from '@material-ui/core'
+import { Container, Box } from '@mui/material'
import { MarketplaceAppsTable } from 'client/components/Tables'
diff --git a/src/fireedge/src/client/containers/Marketplaces/index.js b/src/fireedge/src/client/containers/Marketplaces/index.js
index 178887ac8b..7ebc9ea11b 100644
--- a/src/fireedge/src/client/containers/Marketplaces/index.js
+++ b/src/fireedge/src/client/containers/Marketplaces/index.js
@@ -15,7 +15,7 @@
* ------------------------------------------------------------------------- */
/* eslint-disable jsdoc/require-jsdoc */
-import { Container, Box } from '@material-ui/core'
+import { Container, Box } from '@mui/material'
import { MarketplacesTable } from 'client/components/Tables'
diff --git a/src/fireedge/src/client/containers/Providers/Create.js b/src/fireedge/src/client/containers/Providers/Create.js
index f06e2141bb..93b859770b 100644
--- a/src/fireedge/src/client/containers/Providers/Create.js
+++ b/src/fireedge/src/client/containers/Providers/Create.js
@@ -15,7 +15,7 @@
* ------------------------------------------------------------------------- */
/* eslint-disable jsdoc/require-jsdoc */
import { useParams, useHistory } from 'react-router'
-import { Container } from '@material-ui/core'
+import { Container } from '@mui/material'
import { useAuth } from 'client/features/Auth'
import { useGeneralApi } from 'client/features/General'
diff --git a/src/fireedge/src/client/containers/Providers/Sections/info.js b/src/fireedge/src/client/containers/Providers/Sections/info.js
index b61ad3f41c..dfb47c8748 100644
--- a/src/fireedge/src/client/containers/Providers/Sections/info.js
+++ b/src/fireedge/src/client/containers/Providers/Sections/info.js
@@ -13,19 +13,20 @@
* See the License for the specific language governing permissions and *
* limitations under the License. *
* ------------------------------------------------------------------------- */
-import { memo, useState } from 'react'
+import { memo } from 'react'
import PropTypes from 'prop-types'
import clsx from 'clsx'
-import { List, ListItem, Typography, Grid, Paper, Divider } from '@material-ui/core'
+import { List, ListItem, Typography, Grid, Paper, Divider } from '@mui/material'
import {
Check as CheckIcon,
Square as BlankSquareIcon,
EyeEmpty as EyeIcon
} from 'iconoir-react'
+import { useFetch } from 'client/hooks'
import { useProviderApi } from 'client/features/One'
-import { Action } from 'client/components/Cards/SelectCard'
+import { SubmitButton } from 'client/components/FormControl'
import { Tr } from 'client/components/HOC'
import { T } from 'client/constants'
@@ -35,7 +36,7 @@ const Info = memo(({ fetchProps }) => {
const classes = useStyles()
const { getProviderConnection } = useProviderApi()
- const [showConnection, setShowConnection] = useState(undefined)
+ const { data: showConnection, fetchRequest, loading } = useFetch(getProviderConnection)
const { ID, NAME, GNAME, UNAME, PERMISSIONS, TEMPLATE } = fetchProps?.data
const {
@@ -50,14 +51,6 @@ const Info = memo(({ fetchProps }) => {
const isChecked = checked =>
checked === '1' ? :
- const ConnectionButton = () => (
- }
- cy='provider-connection'
- handleClick={() => getProviderConnection(ID).then(setShowConnection)}
- />
- )
-
return (
@@ -96,9 +89,16 @@ const Info = memo(({ fetchProps }) => {
{Tr(T.Credentials)}
-
- {!showConnection && }
-
+ {!showConnection && (
+
+ }
+ onClick={() => fetchRequest(ID)}
+ isSubmitting={loading}
+ />
+
+ )}
{Object.entries(connection)?.map(([key, value]) =>
diff --git a/src/fireedge/src/client/containers/Providers/Sections/styles.js b/src/fireedge/src/client/containers/Providers/Sections/styles.js
index 51bb8d44c1..70218dfdc1 100644
--- a/src/fireedge/src/client/containers/Providers/Sections/styles.js
+++ b/src/fireedge/src/client/containers/Providers/Sections/styles.js
@@ -13,7 +13,7 @@
* See the License for the specific language governing permissions and *
* limitations under the License. *
* ------------------------------------------------------------------------- */
-import { makeStyles } from '@material-ui/core'
+import makeStyles from '@mui/styles/makeStyles'
export default makeStyles(theme => ({
marginBottom: {
diff --git a/src/fireedge/src/client/containers/Providers/index.js b/src/fireedge/src/client/containers/Providers/index.js
index f6c0d15751..4b120cb0f5 100644
--- a/src/fireedge/src/client/containers/Providers/index.js
+++ b/src/fireedge/src/client/containers/Providers/index.js
@@ -17,7 +17,7 @@
import { useState, useEffect } from 'react'
import { useHistory, generatePath } from 'react-router-dom'
-import { useTheme, Container, Box } from '@material-ui/core'
+import { Container, Box } from '@mui/material'
import { Trash as DeleteIcon, Settings as EditIcon } from 'iconoir-react'
import { PATH } from 'client/apps/provision/routes'
@@ -34,7 +34,6 @@ import Information from 'client/containers/Providers/Sections/info'
import { T } from 'client/constants'
function Providers () {
- const theme = useTheme()
const history = useHistory()
const [showDialog, setShowDialog] = useState(false)
@@ -104,7 +103,8 @@ function Providers () {
.then(() => fetchRequest(undefined, { reload: true }))
}
}),
- icon: ,
+ icon: ,
+ color: 'error',
cy: 'provider-delete'
}
]
diff --git a/src/fireedge/src/client/containers/Provisions/Create.js b/src/fireedge/src/client/containers/Provisions/Create.js
index af1f2ba06b..ccd6158c5a 100644
--- a/src/fireedge/src/client/containers/Provisions/Create.js
+++ b/src/fireedge/src/client/containers/Provisions/Create.js
@@ -18,7 +18,8 @@ import { useEffect, useState, memo } from 'react'
import { Redirect, useHistory } from 'react-router'
import { NavArrowLeft as ArrowBackIcon } from 'iconoir-react'
-import { makeStyles, Container, LinearProgress, IconButton, Typography } from '@material-ui/core'
+import { Container, LinearProgress, IconButton, Typography } from '@mui/material'
+import makeStyles from '@mui/styles/makeStyles'
import { useFetch, useSocket } from 'client/hooks'
import { useGeneralApi } from 'client/features/General'
diff --git a/src/fireedge/src/client/containers/Provisions/DialogInfo/index.js b/src/fireedge/src/client/containers/Provisions/DialogInfo/index.js
index b9f0d1262d..04a99d2214 100644
--- a/src/fireedge/src/client/containers/Provisions/DialogInfo/index.js
+++ b/src/fireedge/src/client/containers/Provisions/DialogInfo/index.js
@@ -17,7 +17,7 @@
import { useState, useMemo } from 'react'
import PropTypes from 'prop-types'
-import { AppBar, Tabs, Tab, Box } from '@material-ui/core'
+import { AppBar, Tabs, Tab, Box } from '@mui/material'
import {
InfoEmpty as InfoIcon,
HardDrive as HostIcon,
diff --git a/src/fireedge/src/client/containers/Provisions/DialogInfo/info.js b/src/fireedge/src/client/containers/Provisions/DialogInfo/info.js
index 42a46aad15..a55df57663 100644
--- a/src/fireedge/src/client/containers/Provisions/DialogInfo/info.js
+++ b/src/fireedge/src/client/containers/Provisions/DialogInfo/info.js
@@ -17,7 +17,7 @@ import { memo } from 'react'
import PropTypes from 'prop-types'
import clsx from 'clsx'
-import { List, ListItem, Typography, Grid, Paper, Divider } from '@material-ui/core'
+import { List, ListItem, Typography, Grid, Paper, Divider } from '@mui/material'
import { Check as CheckIcon, Square as BlankSquareIcon } from 'iconoir-react'
import useStyles from 'client/containers/Provisions/DialogInfo/styles'
diff --git a/src/fireedge/src/client/containers/Provisions/DialogInfo/log.js b/src/fireedge/src/client/containers/Provisions/DialogInfo/log.js
index e37bce4613..f131262a43 100644
--- a/src/fireedge/src/client/containers/Provisions/DialogInfo/log.js
+++ b/src/fireedge/src/client/containers/Provisions/DialogInfo/log.js
@@ -16,7 +16,7 @@
import { memo, useEffect, useMemo } from 'react'
import PropTypes from 'prop-types'
-import { LinearProgress } from '@material-ui/core'
+import { LinearProgress } from '@mui/material'
import { useFetch, useSocket } from 'client/hooks'
import { useProvisionApi } from 'client/features/One'
diff --git a/src/fireedge/src/client/containers/Provisions/DialogInfo/styles.js b/src/fireedge/src/client/containers/Provisions/DialogInfo/styles.js
index 14ee3fd7dc..02f2e6ad0b 100644
--- a/src/fireedge/src/client/containers/Provisions/DialogInfo/styles.js
+++ b/src/fireedge/src/client/containers/Provisions/DialogInfo/styles.js
@@ -13,7 +13,7 @@
* See the License for the specific language governing permissions and *
* limitations under the License. *
* ------------------------------------------------------------------------- */
-import { makeStyles } from '@material-ui/core'
+import makeStyles from '@mui/styles/makeStyles'
export default makeStyles(theme => ({
permissions: {
diff --git a/src/fireedge/src/client/containers/Provisions/index.js b/src/fireedge/src/client/containers/Provisions/index.js
index d072ca7458..35905a0416 100644
--- a/src/fireedge/src/client/containers/Provisions/index.js
+++ b/src/fireedge/src/client/containers/Provisions/index.js
@@ -17,7 +17,7 @@
import { useState, useEffect, createElement } from 'react'
import { useHistory } from 'react-router-dom'
-import { useTheme, Container, Box } from '@material-ui/core'
+import { Container, Box } from '@mui/material'
import { Trash as DeleteIcon, Settings as EditIcon } from 'iconoir-react'
import { PATH } from 'client/apps/provision/routes'
@@ -36,7 +36,6 @@ import DialogInfo from 'client/containers/Provisions/DialogInfo'
import { T } from 'client/constants'
function Provisions () {
- const theme = useTheme()
const history = useHistory()
const [{ content, ...showDialog } = {}, setShowDialog] = useState()
const handleCloseDialog = () => setShowDialog()
@@ -105,7 +104,8 @@ function Provisions () {
deleteAction: {
buttonProps: {
'data-cy': 'provision-delete',
- icon:
+ icon: ,
+ color: 'error'
},
options: [{
dialogProps: {
diff --git a/src/fireedge/src/client/containers/Settings/index.js b/src/fireedge/src/client/containers/Settings/index.js
index 18ff2d3608..0602c590cc 100644
--- a/src/fireedge/src/client/containers/Settings/index.js
+++ b/src/fireedge/src/client/containers/Settings/index.js
@@ -16,7 +16,8 @@
/* eslint-disable jsdoc/require-jsdoc */
import { useEffect } from 'react'
-import { makeStyles, Container, Paper, Box, Typography } from '@material-ui/core'
+import { Container, Paper, Box, Typography } from '@mui/material'
+import makeStyles from '@mui/styles/makeStyles'
import { useForm, FormProvider } from 'react-hook-form'
import { yupResolver } from '@hookform/resolvers/yup'
diff --git a/src/fireedge/src/client/containers/TestApi/ResponseForm.js b/src/fireedge/src/client/containers/TestApi/ResponseForm.js
index d7ccd186b6..ad3ab16c26 100644
--- a/src/fireedge/src/client/containers/TestApi/ResponseForm.js
+++ b/src/fireedge/src/client/containers/TestApi/ResponseForm.js
@@ -17,7 +17,7 @@ import { JSXElementConstructor } from 'react'
import { string, func, shape, object } from 'prop-types'
import { useForm, Controller } from 'react-hook-form'
-import { TextField, Grid, Typography, FormControlLabel, Checkbox } from '@material-ui/core'
+import { TextField, Grid, Typography, FormControlLabel, Checkbox } from '@mui/material'
import { SubmitButton } from 'client/components/FormControl'
import { RestClient, requestConfig } from 'client/utils'
@@ -41,7 +41,7 @@ const ResponseForm = ({
try {
const config = requestConfig(dataForm, { name, httpMethod, params })
- const { id, ...res } = await RestClient.request(config) ?? {}
+ const { id, ...res } = (await RestClient.request(config)) ?? {}
handleChangeResponse(JSON.stringify(res, null, '\t'))
} catch (err) {
console.log('ERROR', err)
@@ -83,7 +83,6 @@ const ResponseForm = ({
fullWidth
label={nameCommand}
color='secondary'
- variant='outlined'
/>
)
}
diff --git a/src/fireedge/src/client/containers/TestApi/index.js b/src/fireedge/src/client/containers/TestApi/index.js
index da6be0e93e..470400de78 100644
--- a/src/fireedge/src/client/containers/TestApi/index.js
+++ b/src/fireedge/src/client/containers/TestApi/index.js
@@ -14,7 +14,7 @@
* limitations under the License. *
* ------------------------------------------------------------------------- */
import { useState, useMemo, JSXElementConstructor } from 'react'
-import { Container, TextField, Grid, MenuItem, Box } from '@material-ui/core'
+import { Container, TextField, Grid, MenuItem, Box } from '@mui/material'
import ResponseForm from 'client/containers/TestApi/ResponseForm'
import { InputCode } from 'client/components/FormControl'
@@ -48,7 +48,6 @@ function TestApi () {
fullWidth
select
color='secondary'
- variant='outlined'
label={Tr(T.SelectRequest)}
value={name}
onChange={handleChangeCommand}
diff --git a/src/fireedge/src/client/containers/TestApi/styles.js b/src/fireedge/src/client/containers/TestApi/styles.js
index 17f40bcaa7..74e53e6b7b 100644
--- a/src/fireedge/src/client/containers/TestApi/styles.js
+++ b/src/fireedge/src/client/containers/TestApi/styles.js
@@ -13,7 +13,7 @@
* See the License for the specific language governing permissions and *
* limitations under the License. *
* ------------------------------------------------------------------------- */
-import { makeStyles } from '@material-ui/core'
+import makeStyles from '@mui/styles/makeStyles'
export default makeStyles({
root: {
diff --git a/src/fireedge/src/client/containers/Users/Detail.js b/src/fireedge/src/client/containers/Users/Detail.js
index 02d6ba6d43..9238103748 100644
--- a/src/fireedge/src/client/containers/Users/Detail.js
+++ b/src/fireedge/src/client/containers/Users/Detail.js
@@ -15,7 +15,7 @@
* ------------------------------------------------------------------------- */
/* eslint-disable jsdoc/require-jsdoc */
import { useParams, Redirect } from 'react-router-dom'
-import { Container, Box } from '@material-ui/core'
+import { Container, Box } from '@mui/material'
import UserTabs from 'client/components/Tabs/User'
diff --git a/src/fireedge/src/client/containers/Users/index.js b/src/fireedge/src/client/containers/Users/index.js
index a8a0122921..ba005bdc78 100644
--- a/src/fireedge/src/client/containers/Users/index.js
+++ b/src/fireedge/src/client/containers/Users/index.js
@@ -15,7 +15,7 @@
* ------------------------------------------------------------------------- */
/* eslint-disable jsdoc/require-jsdoc */
-import { Container, Box } from '@material-ui/core'
+import { Container, Box } from '@mui/material'
import { UsersTable } from 'client/components/Tables'
diff --git a/src/fireedge/src/client/containers/VNetworkTemplates/index.js b/src/fireedge/src/client/containers/VNetworkTemplates/index.js
index ff37fe7918..b0b578dbe7 100644
--- a/src/fireedge/src/client/containers/VNetworkTemplates/index.js
+++ b/src/fireedge/src/client/containers/VNetworkTemplates/index.js
@@ -15,7 +15,7 @@
* ------------------------------------------------------------------------- */
/* eslint-disable jsdoc/require-jsdoc */
-import { Container, Box } from '@material-ui/core'
+import { Container, Box } from '@mui/material'
import { VNetworkTemplatesTable } from 'client/components/Tables'
diff --git a/src/fireedge/src/client/containers/VirtualMachines/Detail.js b/src/fireedge/src/client/containers/VirtualMachines/Detail.js
index a7d887b830..716061c035 100644
--- a/src/fireedge/src/client/containers/VirtualMachines/Detail.js
+++ b/src/fireedge/src/client/containers/VirtualMachines/Detail.js
@@ -15,7 +15,7 @@
* ------------------------------------------------------------------------- */
/* eslint-disable jsdoc/require-jsdoc */
import { useParams, Redirect } from 'react-router-dom'
-import { Container, Box } from '@material-ui/core'
+import { Container, Box } from '@mui/material'
import VmTabs from 'client/components/Tabs/Vm'
diff --git a/src/fireedge/src/client/containers/VirtualMachines/index.js b/src/fireedge/src/client/containers/VirtualMachines/index.js
index d58c4868f8..d1d46e9d12 100644
--- a/src/fireedge/src/client/containers/VirtualMachines/index.js
+++ b/src/fireedge/src/client/containers/VirtualMachines/index.js
@@ -16,7 +16,7 @@
/* eslint-disable jsdoc/require-jsdoc */
import { useState } from 'react'
-import { Container, Box } from '@material-ui/core'
+import { Container, Box } from '@mui/material'
import { VmsTable } from 'client/components/Tables'
import VmActions from 'client/components/Tables/Vms/actions'
diff --git a/src/fireedge/src/client/containers/VirtualNetworks/index.js b/src/fireedge/src/client/containers/VirtualNetworks/index.js
index a3c54e6ecd..4daa3aa4ec 100644
--- a/src/fireedge/src/client/containers/VirtualNetworks/index.js
+++ b/src/fireedge/src/client/containers/VirtualNetworks/index.js
@@ -15,7 +15,7 @@
* ------------------------------------------------------------------------- */
/* eslint-disable jsdoc/require-jsdoc */
-import { Container, Box } from '@material-ui/core'
+import { Container, Box } from '@mui/material'
import { VNetworksTable } from 'client/components/Tables'
diff --git a/src/fireedge/src/client/containers/VirtualRouters/index.js b/src/fireedge/src/client/containers/VirtualRouters/index.js
index bc23647d48..d5e2a89cd9 100644
--- a/src/fireedge/src/client/containers/VirtualRouters/index.js
+++ b/src/fireedge/src/client/containers/VirtualRouters/index.js
@@ -15,7 +15,7 @@
* ------------------------------------------------------------------------- */
/* eslint-disable jsdoc/require-jsdoc */
-import { Container, Box } from '@material-ui/core'
+import { Container, Box } from '@mui/material'
import { VRoutersTable } from 'client/components/Tables'
diff --git a/src/fireedge/src/client/containers/VmTemplates/Instantiate.js b/src/fireedge/src/client/containers/VmTemplates/Instantiate.js
index e8a18f0a59..099f341e6e 100644
--- a/src/fireedge/src/client/containers/VmTemplates/Instantiate.js
+++ b/src/fireedge/src/client/containers/VmTemplates/Instantiate.js
@@ -15,7 +15,7 @@
* ------------------------------------------------------------------------- */
/* eslint-disable jsdoc/require-jsdoc */
import { useHistory, useLocation } from 'react-router'
-import { Container } from '@material-ui/core'
+import { Container } from '@mui/material'
import { useGeneralApi } from 'client/features/General'
import { useVmTemplateApi } from 'client/features/One'
diff --git a/src/fireedge/src/client/containers/VmTemplates/index.js b/src/fireedge/src/client/containers/VmTemplates/index.js
index 25a6a65548..f7ee318507 100644
--- a/src/fireedge/src/client/containers/VmTemplates/index.js
+++ b/src/fireedge/src/client/containers/VmTemplates/index.js
@@ -16,7 +16,7 @@
/* eslint-disable jsdoc/require-jsdoc */
import { useState } from 'react'
-import { Container, Box } from '@material-ui/core'
+import { Container, Box } from '@mui/material'
import { VmTemplatesTable } from 'client/components/Tables'
import VmTemplateActions from 'client/components/Tables/VmTemplates/actions'
diff --git a/src/fireedge/src/client/containers/Zones/index.js b/src/fireedge/src/client/containers/Zones/index.js
index 652cbc4b2e..b9352a2f86 100644
--- a/src/fireedge/src/client/containers/Zones/index.js
+++ b/src/fireedge/src/client/containers/Zones/index.js
@@ -15,7 +15,7 @@
* ------------------------------------------------------------------------- */
/* eslint-disable jsdoc/require-jsdoc */
-import { Container, Box } from '@material-ui/core'
+import { Container, Box } from '@mui/material'
import { ZonesTable } from 'client/components/Tables'
diff --git a/src/fireedge/src/client/features/Auth/provision.js b/src/fireedge/src/client/features/Auth/provision.js
index 26c3919dd4..d57f32131f 100644
--- a/src/fireedge/src/client/features/Auth/provision.js
+++ b/src/fireedge/src/client/features/Auth/provision.js
@@ -26,7 +26,7 @@ export const getProviderConfig = createAsyncThunk(
'provision/provider-config',
async (_, { dispatch }) => {
try {
- const config = await authService.getProviderConfig() ?? {}
+ const config = (await authService.getProviderConfig()) ?? {}
return { providerConfig: config }
} catch (error) {
diff --git a/src/fireedge/src/client/features/Auth/sunstone.js b/src/fireedge/src/client/features/Auth/sunstone.js
index 8df85cc4f4..abe500a1aa 100644
--- a/src/fireedge/src/client/features/Auth/sunstone.js
+++ b/src/fireedge/src/client/features/Auth/sunstone.js
@@ -26,7 +26,7 @@ export const getSunstoneViews = createAsyncThunk(
'sunstone/views',
async (_, { dispatch }) => {
try {
- const views = await authService.getSunstoneViews() ?? {}
+ const views = (await authService.getSunstoneViews()) ?? {}
return {
views,
@@ -43,7 +43,7 @@ export const getSunstoneConfig = createAsyncThunk(
'sunstone/config',
async (_, { dispatch }) => {
try {
- const config = await authService.getSunstoneConfig() ?? {}
+ const config = (await authService.getSunstoneConfig()) ?? {}
return { config }
} catch (error) {
diff --git a/src/fireedge/src/client/hooks/useSearch.js b/src/fireedge/src/client/hooks/useSearch.js
index c239b1300e..f948d92c64 100644
--- a/src/fireedge/src/client/hooks/useSearch.js
+++ b/src/fireedge/src/client/hooks/useSearch.js
@@ -15,7 +15,7 @@
* ------------------------------------------------------------------------- */
import { useState, useMemo, useCallback } from 'react'
-import { debounce } from '@material-ui/core'
+import { debounce } from '@mui/material'
import Fuse from 'fuse.js'
/**
diff --git a/src/fireedge/src/client/models/ProviderTemplate.js b/src/fireedge/src/client/models/ProviderTemplate.js
index 57ba8efe39..a83615d21f 100644
--- a/src/fireedge/src/client/models/ProviderTemplate.js
+++ b/src/fireedge/src/client/models/ProviderTemplate.js
@@ -87,7 +87,7 @@ export const getConnectionFixed = (template = {}, providerConfig) => {
return Object.entries(connection).reduce((res, [name, value]) => ({
...res,
- ...keys?.includes(name) && { [name]: value }
+ ...(keys?.includes(name) && { [name]: value })
}), {})
}
@@ -104,7 +104,7 @@ export const getConnectionEditable = (template = {}, providerConfig) => {
return Object.entries(connection).reduce((res, [name, value]) => ({
...res,
- ...!keys?.includes(name) && { [name]: value }
+ ...(!keys?.includes(name) && { [name]: value })
}), {})
}
diff --git a/src/fireedge/src/client/providers/muiProvider.js b/src/fireedge/src/client/providers/muiProvider.js
index 1bc2b3235c..f22a03a3c3 100644
--- a/src/fireedge/src/client/providers/muiProvider.js
+++ b/src/fireedge/src/client/providers/muiProvider.js
@@ -17,7 +17,13 @@
import { useState, useEffect } from 'react'
import PropTypes from 'prop-types'
-import { CssBaseline, ThemeProvider, StylesProvider, useMediaQuery } from '@material-ui/core'
+import {
+ CssBaseline,
+ ThemeProvider,
+ StyledEngineProvider,
+ useMediaQuery
+} from '@mui/material'
+import StylesProvider from '@mui/styles/StylesProvider'
import { createTheme, generateClassName } from 'client/theme'
import { useAuth } from 'client/features/Auth'
import { SCHEMES } from 'client/constants'
@@ -32,7 +38,7 @@ const MuiProvider = ({ theme: appTheme, children }) => {
const prefersScheme = prefersDarkMode ? DARK : LIGHT
const newScheme = scheme === SYSTEM ? prefersScheme : scheme
- return createTheme(appTheme(newScheme))
+ return createTheme(appTheme, newScheme)
}
const [muitheme, setTheme] = useState(changeScheme)
@@ -49,26 +55,23 @@ const MuiProvider = ({ theme: appTheme, children }) => {
}, [scheme, prefersDarkMode])
return (
-
-
-
- {children}
-
-
+
+
+
+
+ {children}
+
+
+
)
}
MuiProvider.propTypes = {
- theme: PropTypes.func,
+ theme: PropTypes.object,
children: PropTypes.oneOfType([
PropTypes.node,
PropTypes.arrayOf(PropTypes.node)
])
}
-MuiProvider.defaultProps = {
- theme: () => {},
- children: undefined
-}
-
export default MuiProvider
diff --git a/src/fireedge/src/client/providers/notistackProvider.js b/src/fireedge/src/client/providers/notistackProvider.js
index 1457e5a435..efd84cb6b5 100644
--- a/src/fireedge/src/client/providers/notistackProvider.js
+++ b/src/fireedge/src/client/providers/notistackProvider.js
@@ -17,12 +17,15 @@
import PropTypes from 'prop-types'
import { SnackbarProvider } from 'notistack'
-import { makeStyles } from '@material-ui/core/styles'
+import makeStyles from '@mui/styles/makeStyles'
const useStyles = makeStyles(({ palette }) => ({
containerRoot: {
marginLeft: 20,
- wordBreak: 'break-word'
+ wordBreak: 'break-word',
+ '& *[role=button], & *[role=button]:hover': {
+ color: 'inherit'
+ }
},
variantSuccess: {
backgroundColor: palette.success.main,
diff --git a/src/fireedge/src/client/router/index.js b/src/fireedge/src/client/router/index.js
index ee9f5c94a5..33e03df4a1 100644
--- a/src/fireedge/src/client/router/index.js
+++ b/src/fireedge/src/client/router/index.js
@@ -18,7 +18,7 @@ import PropTypes from 'prop-types'
import { Redirect, Route, Switch } from 'react-router-dom'
import { TransitionGroup } from 'react-transition-group'
-import { LinearProgress } from '@material-ui/core'
+import { LinearProgress } from '@mui/material'
import {
PATH as COMMON_PATH,
diff --git a/src/fireedge/src/client/theme/defaults.js b/src/fireedge/src/client/theme/defaults.js
index 57a09d5b56..e4254de785 100644
--- a/src/fireedge/src/client/theme/defaults.js
+++ b/src/fireedge/src/client/theme/defaults.js
@@ -13,19 +13,32 @@
* See the License for the specific language governing permissions and *
* limitations under the License. *
* ------------------------------------------------------------------------- */
-import { ThemeOptions } from '@material-ui/core'
+import { createTheme, darkScrollbar, ThemeOptions, colors, alpha } from '@mui/material'
import { UbuntuFont } from 'client/theme/fonts'
+import { SCHEMES } from 'client/constants'
+
+const defaultTheme = createTheme()
+const { grey } = colors
+
+const systemFont = [
+ '-apple-system',
+ 'BlinkMacSystemFont',
+ '"Segoe UI"',
+ 'Roboto',
+ '"Helvetica Neue"',
+ 'Arial',
+ 'sans-serif',
+ '"Apple Color Emoji"',
+ '"Segoe UI Emoji"',
+ '"Segoe UI Symbol"'
+]
export const breakpoints = {
xs: 0,
sm: 600,
- md: 960,
- lg: 1280,
- xl: 1920,
- // DEVICES
- tablet: 640,
- laptop: 1024,
- desktop: 1280
+ md: 900,
+ lg: 1200,
+ xl: 1536
}
export const toolbar = {
@@ -43,47 +56,321 @@ export const sidebar = {
fixed: 250
}
-/** @type {ThemeOptions} */
-export default {
- breakpoints: {
- values: breakpoints,
- keys: Object.keys(breakpoints)
- },
- typography: {
- fontFamily: [
- 'Ubuntu',
- '-apple-system',
- 'BlinkMacSystemFont',
- '"Segoe UI"',
- 'Roboto',
- '"Helvetica Neue"',
- 'Arial',
- 'sans-serif',
- '"Apple Color Emoji"',
- '"Segoe UI Emoji"',
- '"Segoe UI Symbol"'
- ].join(',')
- },
- mixins: {
- toolbar: {
- minHeight: toolbar.regular,
- [`@media (min-width:${breakpoints.xs}px) and (orientation: landscape)`]: {
- minHeight: toolbar.xs
+const buttonSvgStyle = {
+ fontSize: '1.25rem',
+ width: '1em',
+ height: '1em'
+}
+
+/**
+ * @param {ThemeOptions} appTheme - App theme
+ * @param {SCHEMES} mode - Scheme type
+ * @returns {ThemeOptions} Material theme options
+ */
+export default (appTheme, mode = SCHEMES.DARK) => {
+ const { primary, secondary } = appTheme.palette
+ const isDarkMode = mode === SCHEMES.DARK
+
+ return {
+ palette: {
+ mode,
+ primary,
+ secondary,
+ common: {
+ black: '#1D1D1D',
+ white: '#ffffff'
},
- [`@media (min-width:${breakpoints.sm}px)`]: {
- minHeight: toolbar.sm
- }
- }
- },
- overrides: {
- MuiFormControl: {
- root: {
- margin: '.5rem 0'
+ background: {
+ paper: isDarkMode ? '#2a2d3d' : '#ffffff',
+ default: isDarkMode ? '#222431' : '#f2f4f8'
+ },
+ error: {
+ 100: '#fdeae7',
+ 200: '#f8c0b7',
+ 300: '#f5aca0',
+ 400: '#f39788',
+ 500: '#ee6d58',
+ 600: '#ec5840',
+ 700: '#ec462b',
+ 800: '#f2391b',
+ light: '#f8c0b7',
+ main: '#ec5840',
+ dark: '#f2391b',
+ contrastText: '#ffffff'
+ },
+ warning: {
+ 100: '#FFF4DB',
+ 200: '#FFEDC2',
+ 300: '#FFE4A3',
+ 400: '#FFD980',
+ 500: '#FCC419',
+ 600: '#FAB005',
+ 700: '#F1A204',
+ 800: '#DB9A00',
+ light: '#ffe4a3',
+ main: '#f1a204',
+ dark: '#f1a204',
+ contrastText: 'rgba(0, 0, 0, 0.87)'
+ },
+ info: {
+ light: '#64b5f6',
+ main: '#2196f3',
+ dark: '#01579b',
+ contrastText: '#ffffff'
+ },
+ success: {
+ 100: '#bce1bd',
+ 200: '#a6d7a8',
+ 300: '#8fcd92',
+ 400: '#79c37c',
+ 500: '#62b966',
+ 600: '#4caf50',
+ 700: '#419b46',
+ 800: '#388e3c',
+ light: '#3adb76',
+ main: '#4caf50',
+ dark: '#388e3c',
+ contrastText: '#ffffff'
+ },
+ debug: {
+ light: '#e0e0e0',
+ main: '#757575',
+ dark: '#424242',
+ contrastText: '#ffffff'
}
},
- MuiCssBaseline: {
- '@global': {
- '@font-face': [UbuntuFont]
+ breakpoints: {
+ values: breakpoints,
+ keys: Object.keys(breakpoints)
+ },
+ typography: {
+ fontFamily: [UbuntuFont.fontFamily, ...systemFont].join(','),
+ fontFamilyCode: [
+ 'Consolas',
+ 'Menlo',
+ 'Monaco',
+ 'Andale Mono',
+ 'Ubuntu Mono',
+ 'monospace'
+ ].join(','),
+ fontFamilySystem: systemFont.join(','),
+ h1: {
+ fontSize: 'clamp(2.625rem, 1.2857rem + 3.5714vw, 4rem)',
+ fontWeight: 800,
+ lineHeight: 78 / 70
+ },
+ h2: {
+ fontSize: 'clamp(1.5rem, 0.9643rem + 1.4286vw, 2.25rem)',
+ fontWeight: 800,
+ lineHeight: 44 / 36
+ },
+ h3: {
+ fontSize: defaultTheme.typography.pxToRem(36),
+ lineHeight: 44 / 36,
+ letterSpacing: 0
+ },
+ h4: {
+ fontSize: defaultTheme.typography.pxToRem(28),
+ lineHeight: 42 / 28,
+ letterSpacing: 0
+ },
+ h5: {
+ fontSize: defaultTheme.typography.pxToRem(24),
+ lineHeight: 36 / 24,
+ letterSpacing: 0
+ },
+ h6: {
+ fontSize: defaultTheme.typography.pxToRem(20),
+ lineHeight: 30 / 20,
+ letterSpacing: 0
+ },
+ button: {
+ fontSize: defaultTheme.typography.pxToRem(12),
+ textTransform: 'initial',
+ fontWeight: 500,
+ letterSpacing: 0
+ },
+ subtitle1: {
+ fontSize: defaultTheme.typography.pxToRem(18),
+ lineHeight: 24 / 18,
+ letterSpacing: 0,
+ fontWeight: 500
+ },
+ body1: {
+ fontSize: defaultTheme.typography.pxToRem(16),
+ lineHeight: 24 / 16,
+ letterSpacing: 0
+ },
+ body2: {
+ fontSize: defaultTheme.typography.pxToRem(14),
+ lineHeight: 21 / 14,
+ letterSpacing: 0
+ },
+ caption: {
+ display: 'inline-block',
+ fontSize: defaultTheme.typography.pxToRem(12),
+ lineHeight: 18 / 12,
+ letterSpacing: 0,
+ fontWeight: 500
+ },
+ fontWeightLight: 300,
+ fontWeightRegular: 400,
+ fontWeightMedium: 500,
+ fontWeightBold: 700,
+ fontWeightExtraBold: 800
+ },
+ mixins: {
+ toolbar: {
+ minHeight: toolbar.regular,
+ [`@media (min-width:${breakpoints.xs}px) and (orientation: landscape)`]: {
+ minHeight: toolbar.xs
+ },
+ [`@media (min-width:${breakpoints.sm}px)`]: {
+ minHeight: toolbar.sm
+ }
+ }
+ },
+ components: {
+ MuiCssBaseline: {
+ styleOverrides: {
+ '@font-face': UbuntuFont,
+ body: isDarkMode ? darkScrollbar() : null,
+ '.description__link': {
+ margin: 0,
+ color: isDarkMode ? secondary.main : secondary.dark,
+ textDecoration: 'none',
+ '&:hover': {
+ textDecoration: 'underline'
+ }
+ }
+ }
+ },
+ MuiPaper: {
+ styleOverrides: {
+ root: { backgroundImage: 'unset' }
+ }
+ },
+ MuiButtonBase: {
+ defaultProps: {
+ disableTouchRipple: true
+ }
+ },
+ MuiButton: {
+ defaultProps: {
+ disableTouchRipple: true
+ },
+ styleOverrides: {
+ root: {
+ padding: '5px 16px',
+ '& svg:nth-of-type(1)': buttonSvgStyle
+ },
+ endIcon: {
+ marginLeft: 4,
+ width: '1rem',
+ height: '1rem'
+ },
+ text: {
+ backgroundColor: isDarkMode ? primary[400] : primary[800]
+ },
+ outlined: {
+ border: '1px solid',
+ borderColor: isDarkMode ? alpha(grey[100], 0.1) : alpha(grey[700], 0.15),
+ borderRadius: defaultTheme.shape.borderRadius,
+ color: isDarkMode ? '#ffffff' : grey[900]
+ }
+ }
+ },
+ MuiIconButton: {
+ styleOverrides: {
+ root: { '& svg:nth-of-type(1)': buttonSvgStyle }
+ },
+ variants: [{
+ props: { color: 'default' },
+ style: { '&:hover': { color: secondary.main } }
+ }]
+ },
+ MuiIcon: {
+ styleOverrides: {
+ root: { '& svg:nth-of-type(1)': buttonSvgStyle }
+ }
+ },
+ MuiAppBar: {
+ styleOverrides: {
+ root: {
+ padding: '0 2px',
+ boxShadow: 'none',
+ borderStyle: 'solid',
+ borderColor: alpha(grey[100], 0.1),
+ borderWidth: 0,
+ borderBottomWidth: 'thin',
+ backgroundColor: primary.main,
+ '& .MuiIconButton-root, & .MuiButton-root': {
+ color: '#ffffff',
+ border: 'none',
+ backgroundColor: 'transparent',
+ '&:hover': {
+ border: 'none',
+ backgroundColor: 'transparent',
+ color: alpha('#ffffff', 0.7)
+ }
+ }
+ }
+ }
+ },
+ MuiLink: {
+ defaultProps: {
+ underline: 'hover'
+ }
+ },
+ MuiFormControl: {
+ styleOverrides: {
+ root: {
+ margin: '.5rem 0'
+ }
+ }
+ },
+ MuiTextField: {
+ defaultProps: {
+ variant: 'outlined',
+ size: 'small',
+ color: 'secondary',
+ SelectProps: {
+ native: true
+ }
+ }
+ },
+ MuiTabs: {
+ styleOverrides: {
+ root: {
+ backgroundColor: isDarkMode ? secondary.dark : secondary.main,
+ borderRadius: 8,
+ boxShadow: '0px 20px 25px rgba(0, 0, 0, 0.05), 0px 10px 10px rgba(0, 0, 0, 0.02)'
+ },
+ indicator: {
+ backgroundColor: 'transparent',
+ '&:before': {
+ content: '""',
+ display: 'block',
+ position: 'absolute',
+ left: 30,
+ right: 30,
+ height: '100%',
+ backgroundColor: '#ffffff'
+ }
+ }
+ }
+ },
+ MuiTab: {
+ styleOverrides: {
+ root: {
+ color: isDarkMode ? secondary[200] : secondary[100],
+ textTransform: 'capitalize',
+ fontSize: '1rem',
+ '&.Mui-selected': {
+ color: '#ffffff'
+ }
+ }
+ }
}
}
}
diff --git a/src/fireedge/src/client/theme/index.js b/src/fireedge/src/client/theme/index.js
index 8f1b83655d..feb2452673 100644
--- a/src/fireedge/src/client/theme/index.js
+++ b/src/fireedge/src/client/theme/index.js
@@ -14,11 +14,8 @@
* limitations under the License. *
* ------------------------------------------------------------------------- */
/* eslint-disable jsdoc/require-jsdoc */
-import {
- createTheme as createMuiTheme,
- responsiveFontSizes,
- createGenerateClassName
-} from '@material-ui/core'
+import { createTheme as createMuiTheme, responsiveFontSizes } from '@mui/material'
+import createGenerateClassName from '@mui/styles/createGenerateClassName'
import defaultTheme from 'client/theme/defaults'
@@ -26,6 +23,5 @@ export const generateClassName = createGenerateClassName({
productionPrefix: 'one-'
})
-export const createTheme = theme => responsiveFontSizes(
- createMuiTheme({ ...defaultTheme, ...theme })
-)
+export const createTheme = (theme, scheme) =>
+ responsiveFontSizes(createMuiTheme(defaultTheme(theme, scheme)))
diff --git a/src/fireedge/src/client/utils/schema.js b/src/fireedge/src/client/utils/schema.js
index faab65678f..ae4b82a4ef 100644
--- a/src/fireedge/src/client/utils/schema.js
+++ b/src/fireedge/src/client/utils/schema.js
@@ -18,7 +18,7 @@
// eslint-disable-next-line no-unused-vars
import { JSXElementConstructor, SetStateAction } from 'react'
// eslint-disable-next-line no-unused-vars
-import { GridProps, TextFieldProps, CheckboxProps, InputBaseComponentProps } from '@material-ui/core'
+import { GridProps, TextFieldProps, CheckboxProps, InputBaseComponentProps } from '@mui/material'
import { string, number, boolean, array, object, BaseSchema } from 'yup'
import { INPUT_TYPES } from 'client/constants'
diff --git a/src/fireedge/src/server/routes/entrypoints/App.js b/src/fireedge/src/server/routes/entrypoints/App.js
index 466cce0e55..67d5736615 100644
--- a/src/fireedge/src/server/routes/entrypoints/App.js
+++ b/src/fireedge/src/server/routes/entrypoints/App.js
@@ -19,7 +19,7 @@ const { renderToString } = require('react-dom/server')
const root = require('window-or-global')
const { createStore, compose, applyMiddleware } = require('redux')
const thunk = require('redux-thunk').default
-const { ServerStyleSheets } = require('@material-ui/core/styles')
+const { ServerStyleSheets } = require('@mui/styles')
const rootReducer = require('client/store/reducers')
const { getConfig } = require('server/utils/yml')
const {