diff --git a/src/fireedge/src/client/apps/sunstone/routesOne.js b/src/fireedge/src/client/apps/sunstone/routesOne.js index c5bff0ce16..8c220fe043 100644 --- a/src/fireedge/src/client/apps/sunstone/routesOne.js +++ b/src/fireedge/src/client/apps/sunstone/routesOne.js @@ -14,31 +14,31 @@ * limitations under the License. * * ------------------------------------------------------------------------- */ import { - Cell2X2 as InstancesIcons, - ModernTv as VmsIcons, - Shuffle as VRoutersIcons, - Archive as TemplatesIcon, - EmptyPage as TemplateIcon, - Packages as ServicesIcon, - MultiplePagesEmpty as ServiceTemplateIcon, - Box as StorageIcon, + RefreshDouble as BackupIcon, + Server as ClusterIcon, Db as DatastoreIcon, - BoxIso as ImageIcon, Folder as FileIcon, - SimpleCart as MarketplaceIcon, + Group as GroupIcon, + HardDrive as HostIcon, + BoxIso as ImageIcon, + CloudSync as InfrastructureIcon, + Cell2X2 as InstancesIcons, CloudDownload as MarketplaceAppIcon, - ServerConnection as NetworksIcon, + SimpleCart as MarketplaceIcon, 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, + ServerConnection as NetworksIcon, HistoricShield as SecurityGroupIcon, - RefreshDouble as BackupIcon, + MultiplePagesEmpty as ServiceTemplateIcon, + Packages as ServicesIcon, + Box as StorageIcon, + Home as SystemIcon, + EmptyPage as TemplateIcon, + Archive as TemplatesIcon, + User as UserIcon, + Shuffle as VRoutersIcons, + ModernTv as VmsIcons, + MinusPinAlt as ZoneIcon, } from 'iconoir-react' import loadable from '@loadable/component' diff --git a/src/fireedge/src/client/components/Charts/Chartist.js b/src/fireedge/src/client/components/Charts/Chartist.js index d836e32813..bfd24cd607 100644 --- a/src/fireedge/src/client/components/Charts/Chartist.js +++ b/src/fireedge/src/client/components/Charts/Chartist.js @@ -13,27 +13,27 @@ * See the License for the specific language governing permissions and * * limitations under the License. * * ------------------------------------------------------------------------- */ -import { JSXElementConstructor, useMemo } from 'react' import PropTypes from 'prop-types' +import { JSXElementConstructor, useMemo } from 'react' +import { ArgumentScale, ValueScale } from '@devexpress/dx-react-chart' import { - CircularProgress, - Stack, - Paper, - List, - ListItem, - Typography, -} from '@mui/material' -import { - Chart, ArgumentAxis, - ValueAxis, + Chart, LineSeries, + ValueAxis, ZoomAndPan, } from '@devexpress/dx-react-chart-material-ui' -import { scaleTime } from 'd3-scale' -import { ArgumentScale, ValueScale } from '@devexpress/dx-react-chart' +import { + CircularProgress, + List, + ListItem, + Paper, + Stack, + Typography, +} from '@mui/material' import makeStyles from '@mui/styles/makeStyles' +import { scaleTime } from 'd3-scale' const useStyles = makeStyles(({ palette, typography }) => ({ graphStyle: { @@ -128,21 +128,7 @@ const Chartist = ({ Chartist.propTypes = { name: PropTypes.string, filter: PropTypes.arrayOf(PropTypes.string), - data: PropTypes.arrayOf( - PropTypes.shape({ - TIMESTAMP: PropTypes.string, - DISK_SIZE: PropTypes.arrayOf(PropTypes.shape({})), - ID: PropTypes.string, - CPU: PropTypes.string, - DISKRDBYTES: PropTypes.string, - DISKRDIOPS: PropTypes.string, - DISKWRBYTES: PropTypes.string, - DISKWRIOPS: PropTypes.string, - MEMORY: PropTypes.string, - NETRX: PropTypes.string, - NETTX: PropTypes.string, - }) - ), + data: PropTypes.array, x: PropTypes.string, y: PropTypes.string, interpolationY: PropTypes.func, diff --git a/src/fireedge/src/client/components/SplitPane/index.js b/src/fireedge/src/client/components/SplitPane/index.js index d0454a4211..26f3544707 100644 --- a/src/fireedge/src/client/components/SplitPane/index.js +++ b/src/fireedge/src/client/components/SplitPane/index.js @@ -13,11 +13,11 @@ * See the License for the specific language governing permissions and * * limitations under the License. * * ------------------------------------------------------------------------- */ -import { useRef, useEffect, useCallback, Children, ReactElement } from 'react' import PropTypes from 'prop-types' +import { Children, ReactElement, useCallback, useEffect, useRef } from 'react' +import { Divider, styled } from '@mui/material' import Split, { SplitOptions } from 'split-grid' -import { styled, Divider } from '@mui/material' const Gutter = styled(Divider)(({ theme, direction = 'row' }) => ({ position: 'relative', diff --git a/src/fireedge/src/client/components/Tables/Enhanced/Utils/GlobalActions/Action.js b/src/fireedge/src/client/components/Tables/Enhanced/Utils/GlobalActions/Action.js index dd965f0555..b0bf04d6c0 100644 --- a/src/fireedge/src/client/components/Tables/Enhanced/Utils/GlobalActions/Action.js +++ b/src/fireedge/src/client/components/Tables/Enhanced/Utils/GlobalActions/Action.js @@ -13,10 +13,10 @@ * See the License for the specific language governing permissions and * * limitations under the License. * * ------------------------------------------------------------------------- */ -// eslint-disable-next-line no-unused-vars -import { memo, ReactElement, useCallback, useMemo } from 'react' import PropTypes from 'prop-types' // eslint-disable-next-line no-unused-vars +import { ReactElement, memo, useCallback, useMemo } from 'react' +// eslint-disable-next-line no-unused-vars import { Row } from 'react-table' import QueryButton from 'client/components/Buttons/QueryButton' @@ -24,9 +24,9 @@ import { Action } from 'client/components/Cards/SelectCard' import { ButtonToTriggerForm } from 'client/components/Forms' import { Tr } from 'client/components/HOC' // eslint-disable-next-line no-unused-vars -import { DialogPropTypes, DialogProps } from 'client/components/Dialogs' +import { DialogProps } from 'client/components/Dialogs' // eslint-disable-next-line no-unused-vars -import { CreateStepsCallback, CreateFormCallback } from 'client/utils' +import { CreateFormCallback, CreateStepsCallback } from 'client/utils' /** * @typedef {object} Option @@ -54,97 +54,86 @@ import { CreateStepsCallback, CreateFormCallback } from 'client/utils' * @property {function(Row[]):object} [useQuery] - Function to get rtk query result */ -const ActionItem = memo( - ({ item, selectedRows }) => { - /** @type {GlobalAction} */ - const { - accessor, - dataCy, - tooltip, - label, - color, - variant = 'contained', - icon: Icon, - options, - action, - disabled, - useQuery, - selected = false, - } = item +const ActionItem = memo(({ item, selectedRows }) => { + /** @type {GlobalAction} */ + const { + accessor, + dataCy, + tooltip, + label, + color, + variant = 'contained', + icon: Icon, + options, + action, + disabled, + useQuery, + selected = false, + } = item - const isDisabledByNumberOfSelectedRows = useMemo(() => { - const numberOfRowSelected = selectedRows.length - const min = selected?.min ?? 1 - const max = selected?.max ?? Number.MAX_SAFE_INTEGER - - return ( - (selected === true && !numberOfRowSelected) || - (selected && min > numberOfRowSelected && numberOfRowSelected < max) - ) - }, [selectedRows.length, selected]) - - const buttonProps = { - color, - variant, - 'data-cy': - (dataCy && `action-${dataCy}`) ?? (accessor && `action-${accessor}`), - disabled: - isDisabledByNumberOfSelectedRows || - (typeof disabled === 'function' ? disabled(selectedRows) : disabled), - icon: Icon && , - label: label && Tr(label), - title: tooltip && Tr(tooltip), - } - - const addRowsToFn = useCallback( - (fn) => (typeof fn === 'function' ? fn(selectedRows) : fn), - [selectedRows] - ) - - const addRowsToEntries = useCallback( - (entries) => - Object.entries(entries).reduce( - (res, [prop, value]) => ({ ...res, [prop]: addRowsToFn(value) }), - {} - ), - [addRowsToFn] - ) - - return action ? ( - addRowsToFn(action)} /> - ) : useQuery ? ( - addRowsToFn(useQuery)} /> - ) : ( - { - const { - form, - accessor: optionAccessor, - dialogProps = {}, - ...restOfOption - } = option ?? {} - - return { - ...addRowsToEntries(restOfOption), - form: form ? () => addRowsToFn(form) : undefined, - cy: optionAccessor && `action-${optionAccessor}`, - dialogProps: addRowsToEntries(dialogProps), - } - })} - /> - ) - }, - (prev, next) => { - const prevStates = prev.selectedRows?.map?.(({ values }) => values?.STATE) - const nextStates = next.selectedRows?.map?.(({ values }) => values?.STATE) + const isDisabledByNumberOfSelectedRows = useMemo(() => { + const numberOfRowSelected = selectedRows.length + const min = selected?.min ?? 1 + const max = selected?.max ?? Number.MAX_SAFE_INTEGER return ( - prev.selectedRows?.length === next.selectedRows?.length && - prevStates?.every((prevState) => nextStates?.includes(prevState)) + (selected === true && !numberOfRowSelected) || + (selected && min > numberOfRowSelected && numberOfRowSelected < max) ) + }, [selectedRows.length, selected]) + + const buttonProps = { + color, + variant, + 'data-cy': + (dataCy && `action-${dataCy}`) ?? (accessor && `action-${accessor}`), + disabled: + isDisabledByNumberOfSelectedRows || + (typeof disabled === 'function' ? disabled(selectedRows) : disabled), + icon: Icon && , + label: label && Tr(label), + title: tooltip && Tr(tooltip), } -) + + const addRowsToFn = useCallback( + (fn) => (typeof fn === 'function' ? fn(selectedRows) : fn), + [selectedRows] + ) + + const addRowsToEntries = useCallback( + (entries) => + Object.entries(entries).reduce( + (res, [prop, value]) => ({ ...res, [prop]: addRowsToFn(value) }), + {} + ), + [addRowsToFn] + ) + + return action ? ( + addRowsToFn(action)} /> + ) : useQuery ? ( + addRowsToFn(useQuery)} /> + ) : ( + { + const { + form, + accessor: optionAccessor, + dialogProps = {}, + ...restOfOption + } = option ?? {} + + return { + ...addRowsToEntries(restOfOption), + form: form ? () => addRowsToFn(form) : undefined, + cy: optionAccessor && `action-${optionAccessor}`, + dialogProps: addRowsToEntries(dialogProps), + } + })} + /> + ) +}) ActionItem.propTypes = { item: PropTypes.object, diff --git a/src/fireedge/src/client/components/Tables/Enhanced/Utils/GlobalActions/index.js b/src/fireedge/src/client/components/Tables/Enhanced/Utils/GlobalActions/index.js index c0ac47b1fd..cbc6a3c295 100644 --- a/src/fireedge/src/client/components/Tables/Enhanced/Utils/GlobalActions/index.js +++ b/src/fireedge/src/client/components/Tables/Enhanced/Utils/GlobalActions/index.js @@ -13,19 +13,19 @@ * See the License for the specific language governing permissions and * * limitations under the License. * * ------------------------------------------------------------------------- */ -import { ReactElement } from 'react' import PropTypes from 'prop-types' +import { ReactElement } from 'react' -import { Stack, Checkbox } from '@mui/material' +import { Checkbox, Stack } from '@mui/material' import { RefreshDouble } from 'iconoir-react' -import { UseTableInstanceProps, UseRowSelectInstanceProps } from 'react-table' +import { UseRowSelectInstanceProps, UseTableInstanceProps } from 'react-table' +import { SubmitButton } from 'client/components/FormControl' +import { Tr } from 'client/components/HOC' import { Action, GlobalAction, } from 'client/components/Tables/Enhanced/Utils/GlobalActions/Action' -import { SubmitButton } from 'client/components/FormControl' -import { Tr } from 'client/components/HOC' import { T } from 'client/constants' /** diff --git a/src/fireedge/src/client/components/Tables/Enhanced/Utils/utils.js b/src/fireedge/src/client/components/Tables/Enhanced/Utils/utils.js index d3f6f473f1..19e0c2a2ee 100644 --- a/src/fireedge/src/client/components/Tables/Enhanced/Utils/utils.js +++ b/src/fireedge/src/client/components/Tables/Enhanced/Utils/utils.js @@ -16,8 +16,8 @@ import { Column } from 'react-table' import { - GlobalAction, CategoryFilter, + GlobalAction, TimeFilter, } from 'client/components/Tables/Enhanced/Utils' diff --git a/src/fireedge/src/client/components/Tables/Enhanced/index.js b/src/fireedge/src/client/components/Tables/Enhanced/index.js index 65c774647b..7227c96535 100644 --- a/src/fireedge/src/client/components/Tables/Enhanced/index.js +++ b/src/fireedge/src/client/components/Tables/Enhanced/index.js @@ -14,32 +14,32 @@ * limitations under the License. * * ------------------------------------------------------------------------- */ /* eslint-disable jsdoc/require-jsdoc */ -import { useMemo } from 'react' import PropTypes from 'prop-types' +import { useMemo } from 'react' +import { Box, Chip } from '@mui/material' import clsx from 'clsx' import InfoEmpty from 'iconoir-react/dist/InfoEmpty' import RemoveIcon from 'iconoir-react/dist/RemoveSquare' -import { Box, Chip } from '@mui/material' import { - useGlobalFilter, + // types + UseRowSelectRowProps, useFilters, + useGlobalFilter, + useMountedLayoutEffect, usePagination, useRowSelect, useSortBy, useTable, - useMountedLayoutEffect, - // types - UseRowSelectRowProps, } from 'react-table' import { GlobalActions, - GlobalSearch, GlobalFilter, GlobalLabel, - GlobalSort, + GlobalSearch, GlobalSelectedRows, + GlobalSort, LABEL_COLUMN_ID, } from 'client/components/Tables/Enhanced/Utils' import Pagination from 'client/components/Tables/Enhanced/pagination' diff --git a/src/fireedge/src/client/components/Tables/Vms/actions.js b/src/fireedge/src/client/components/Tables/Vms/actions.js index 14a807d769..aebb263338 100644 --- a/src/fireedge/src/client/components/Tables/Vms/actions.js +++ b/src/fireedge/src/client/components/Tables/Vms/actions.js @@ -13,55 +13,55 @@ * See the License for the specific language governing permissions and * * limitations under the License. * * ------------------------------------------------------------------------- */ -import { useMemo } from 'react' -import { useHistory } from 'react-router-dom' import { Typography } from '@mui/material' import { makeStyles } from '@mui/styles' import { AddCircledOutline, + Cart, + Group, + Lock, PlayOutline, SaveFloppyDisk, - TransitionRight, SystemShut, - Group, + TransitionRight, Trash, - Lock, - Cart, } from 'iconoir-react' +import { useMemo } from 'react' +import { useHistory } from 'react-router-dom' import { useViews } from 'client/features/Auth' import { useGeneralApi } from 'client/features/General' import { useGetDatastoresQuery } from 'client/features/OneApi/datastore' import { - useLockVmMutation, - useUnlockVmMutation, - useSaveAsTemplateMutation, - useDeployMutation, useActionVmMutation, - useMigrateMutation, - useChangeVmOwnershipMutation, - useRecoverMutation, useBackupMutation, + useChangeVmOwnershipMutation, + useDeployMutation, + useLockVmMutation, + useMigrateMutation, + useRecoverMutation, + useSaveAsTemplateMutation, + useUnlockVmMutation, } from 'client/features/OneApi/vm' import { BackupForm, - RecoverForm, - ChangeUserForm, ChangeGroupForm, + ChangeUserForm, MigrateForm, + RecoverForm, SaveAsTemplateForm, } from 'client/components/Forms/Vm' import { - createActions, GlobalAction, + createActions, } from 'client/components/Tables/Enhanced/Utils' import VmTemplatesTable from 'client/components/Tables/VmTemplates' -import { Translate } from 'client/components/HOC' import { PATH } from 'client/apps/sunstone/routesOne' +import { Translate } from 'client/components/HOC' +import { RESOURCE_NAMES, T, VM_ACTIONS } from 'client/constants' import { getLastHistory, isAvailableAction } from 'client/models/VirtualMachine' -import { T, VM_ACTIONS, RESOURCE_NAMES } from 'client/constants' const useTableStyles = makeStyles({ body: { gridTemplateColumns: 'repeat(auto-fill, minmax(400px, 1fr))' }, diff --git a/src/fireedge/src/client/components/Tables/Vms/columns.js b/src/fireedge/src/client/components/Tables/Vms/columns.js index f96e27c9be..ba2529e41f 100644 --- a/src/fireedge/src/client/components/Tables/Vms/columns.js +++ b/src/fireedge/src/client/components/Tables/Vms/columns.js @@ -15,13 +15,13 @@ * ------------------------------------------------------------------------- */ import { Column } from 'react-table' -import { - getState, - getIps, - getType, - getLastHistory, -} from 'client/models/VirtualMachine' import { T } from 'client/constants' +import { + getIps, + getLastHistory, + getState, + getType, +} from 'client/models/VirtualMachine' /** @type {Column[]} VM columns */ const COLUMNS = [ diff --git a/src/fireedge/src/client/components/Tables/Vms/index.js b/src/fireedge/src/client/components/Tables/Vms/index.js index 1df5cee169..a7cb621e32 100644 --- a/src/fireedge/src/client/components/Tables/Vms/index.js +++ b/src/fireedge/src/client/components/Tables/Vms/index.js @@ -13,7 +13,7 @@ * See the License for the specific language governing permissions and * * limitations under the License. * * ------------------------------------------------------------------------- */ -import { useMemo, ReactElement } from 'react' +import { ReactElement, useMemo } from 'react' import { useViews } from 'client/features/Auth' import { useGetVmsQuery } from 'client/features/OneApi/vm' @@ -21,7 +21,7 @@ import { useGetVmsQuery } from 'client/features/OneApi/vm' import EnhancedTable, { createColumns } from 'client/components/Tables/Enhanced' import VmColumns from 'client/components/Tables/Vms/columns' import VmRow from 'client/components/Tables/Vms/row' -import { RESOURCE_NAMES, VM_STATES, STATES } from 'client/constants' +import { RESOURCE_NAMES, STATES, VM_STATES } from 'client/constants' const DEFAULT_DATA_CY = 'vms' diff --git a/src/fireedge/src/client/components/Tabs/Backup/index.js b/src/fireedge/src/client/components/Tabs/Backup/index.js index a045622820..18550eee61 100644 --- a/src/fireedge/src/client/components/Tabs/Backup/index.js +++ b/src/fireedge/src/client/components/Tabs/Backup/index.js @@ -13,19 +13,19 @@ * See the License for the specific language governing permissions and * * limitations under the License. * * ------------------------------------------------------------------------- */ -import { memo, useMemo } from 'react' -import PropTypes from 'prop-types' import { Alert, LinearProgress } from '@mui/material' +import PropTypes from 'prop-types' +import { memo, useMemo } from 'react' +import { RESOURCE_NAMES } from 'client/constants' import { useViews } from 'client/features/Auth' import { useGetImageQuery } from 'client/features/OneApi/image' import { getAvailableInfoTabs } from 'client/models/Helper' -import { RESOURCE_NAMES } from 'client/constants' import Tabs from 'client/components/Tabs' +import Increments from 'client/components/Tabs/Backup/Increments' import Info from 'client/components/Tabs/Backup/Info' import Vms from 'client/components/Tabs/Backup/Vms' -import Increments from 'client/components/Tabs/Backup/Increments' const getTabComponent = (tabName) => ({ @@ -36,7 +36,7 @@ const getTabComponent = (tabName) => const BackupTabs = memo(({ id }) => { const { view, getResourceView } = useViews() - const { isLoading, isError, error } = useGetImageQuery({ id }) + const { isLoading, isError, error, status } = useGetImageQuery({ id }) const tabsAvailable = useMemo(() => { const resource = RESOURCE_NAMES.BACKUP @@ -53,11 +53,14 @@ const BackupTabs = memo(({ id }) => { ) } - return isLoading ? ( - - ) : ( - - ) + if (isLoading || status === 'pending') { + return + } + if (status === 'fulfilled') { + return + } + + return <> }) BackupTabs.propTypes = { id: PropTypes.string.isRequired } diff --git a/src/fireedge/src/client/components/Tabs/Cluster/index.js b/src/fireedge/src/client/components/Tabs/Cluster/index.js index 5e57320ed2..dec93c5923 100644 --- a/src/fireedge/src/client/components/Tabs/Cluster/index.js +++ b/src/fireedge/src/client/components/Tabs/Cluster/index.js @@ -13,14 +13,14 @@ * See the License for the specific language governing permissions and * * limitations under the License. * * ------------------------------------------------------------------------- */ -import { memo, useMemo } from 'react' -import PropTypes from 'prop-types' import { Alert, LinearProgress } from '@mui/material' +import PropTypes from 'prop-types' +import { memo, useMemo } from 'react' +import { RESOURCE_NAMES } from 'client/constants' import { useViews } from 'client/features/Auth' import { useGetClusterQuery } from 'client/features/OneApi/cluster' import { getAvailableInfoTabs } from 'client/models/Helper' -import { RESOURCE_NAMES } from 'client/constants' import Tabs from 'client/components/Tabs' import Info from 'client/components/Tabs/Cluster/Info' @@ -32,7 +32,7 @@ const getTabComponent = (tabName) => const ClusterTabs = memo(({ id }) => { const { view, getResourceView } = useViews() - const { isLoading, isError, error } = useGetClusterQuery({ id }) + const { isLoading, isError, error, status } = useGetClusterQuery({ id }) const tabsAvailable = useMemo(() => { const resource = RESOURCE_NAMES.CLUSTER @@ -48,12 +48,14 @@ const ClusterTabs = memo(({ id }) => { ) } + if (isLoading || status === 'pending') { + return + } + if (status === 'fulfilled') { + return + } - return isLoading ? ( - - ) : ( - - ) + return <> }) ClusterTabs.propTypes = { id: PropTypes.string.isRequired } diff --git a/src/fireedge/src/client/components/Tabs/Datastore/index.js b/src/fireedge/src/client/components/Tabs/Datastore/index.js index e7da9a8b52..ef1459d75f 100644 --- a/src/fireedge/src/client/components/Tabs/Datastore/index.js +++ b/src/fireedge/src/client/components/Tabs/Datastore/index.js @@ -13,14 +13,14 @@ * See the License for the specific language governing permissions and * * limitations under the License. * * ------------------------------------------------------------------------- */ -import { memo, useMemo } from 'react' -import PropTypes from 'prop-types' import { Alert, LinearProgress } from '@mui/material' +import PropTypes from 'prop-types' +import { memo, useMemo } from 'react' +import { RESOURCE_NAMES } from 'client/constants' import { useViews } from 'client/features/Auth' import { useGetDatastoreQuery } from 'client/features/OneApi/datastore' import { getAvailableInfoTabs } from 'client/models/Helper' -import { RESOURCE_NAMES } from 'client/constants' import Tabs from 'client/components/Tabs' import Info from 'client/components/Tabs/Datastore/Info' @@ -32,7 +32,7 @@ const getTabComponent = (tabName) => const DatastoreTabs = memo(({ id }) => { const { view, getResourceView } = useViews() - const { isLoading, isError, error } = useGetDatastoreQuery({ id }) + const { isLoading, isError, error, status } = useGetDatastoreQuery({ id }) const tabsAvailable = useMemo(() => { const resource = RESOURCE_NAMES.DATASTORE @@ -48,12 +48,14 @@ const DatastoreTabs = memo(({ id }) => { ) } + if (isLoading || status === 'pending') { + return + } + if (status === 'fulfilled') { + return + } - return isLoading ? ( - - ) : ( - - ) + return <> }) DatastoreTabs.propTypes = { id: PropTypes.string.isRequired } diff --git a/src/fireedge/src/client/components/Tabs/File/index.js b/src/fireedge/src/client/components/Tabs/File/index.js index a05d984cb2..3e0cbf75d7 100644 --- a/src/fireedge/src/client/components/Tabs/File/index.js +++ b/src/fireedge/src/client/components/Tabs/File/index.js @@ -13,14 +13,14 @@ * See the License for the specific language governing permissions and * * limitations under the License. * * ------------------------------------------------------------------------- */ -import { memo, useMemo } from 'react' -import PropTypes from 'prop-types' import { Alert, LinearProgress } from '@mui/material' +import PropTypes from 'prop-types' +import { memo, useMemo } from 'react' +import { RESOURCE_NAMES } from 'client/constants' import { useViews } from 'client/features/Auth' import { useGetImageQuery } from 'client/features/OneApi/image' import { getAvailableInfoTabs } from 'client/models/Helper' -import { RESOURCE_NAMES } from 'client/constants' import Tabs from 'client/components/Tabs' import Info from 'client/components/Tabs/Image/Info' @@ -32,7 +32,7 @@ const getTabComponent = (tabName) => const FileTabs = memo(({ id }) => { const { view, getResourceView } = useViews() - const { isLoading, isError, error } = useGetImageQuery({ id }) + const { isLoading, isError, error, status } = useGetImageQuery({ id }) const tabsAvailable = useMemo(() => { const resource = RESOURCE_NAMES.IMAGE @@ -48,14 +48,15 @@ const FileTabs = memo(({ id }) => { ) } + if (isLoading || status === 'pending') { + return + } + if (status === 'fulfilled') { + return + } - return isLoading ? ( - - ) : ( - - ) + return <> }) - FileTabs.propTypes = { id: PropTypes.string.isRequired } FileTabs.displayName = 'FileTabs' diff --git a/src/fireedge/src/client/components/Tabs/Group/index.js b/src/fireedge/src/client/components/Tabs/Group/index.js index 6dedc87c8f..ff6fa57a10 100644 --- a/src/fireedge/src/client/components/Tabs/Group/index.js +++ b/src/fireedge/src/client/components/Tabs/Group/index.js @@ -13,14 +13,14 @@ * See the License for the specific language governing permissions and * * limitations under the License. * * ------------------------------------------------------------------------- */ -import { memo, useMemo } from 'react' -import PropTypes from 'prop-types' import { Alert, LinearProgress } from '@mui/material' +import PropTypes from 'prop-types' +import { memo, useMemo } from 'react' +import { RESOURCE_NAMES } from 'client/constants' import { useViews } from 'client/features/Auth' import { useGetGroupQuery } from 'client/features/OneApi/group' import { getAvailableInfoTabs } from 'client/models/Helper' -import { RESOURCE_NAMES } from 'client/constants' import Tabs from 'client/components/Tabs' import Info from 'client/components/Tabs/Group/Info' @@ -32,7 +32,7 @@ const getTabComponent = (tabName) => const GroupTabs = memo(({ id }) => { const { view, getResourceView } = useViews() - const { isLoading, isError, error } = useGetGroupQuery({ id }) + const { isLoading, isError, error, status } = useGetGroupQuery({ id }) const tabsAvailable = useMemo(() => { const resource = RESOURCE_NAMES.GROUP @@ -48,12 +48,14 @@ const GroupTabs = memo(({ id }) => { ) } + if (isLoading || status === 'pending') { + return + } + if (status === 'fulfilled') { + return + } - return isLoading ? ( - - ) : ( - - ) + return <> }) GroupTabs.propTypes = { id: PropTypes.string.isRequired } diff --git a/src/fireedge/src/client/components/Tabs/Host/index.js b/src/fireedge/src/client/components/Tabs/Host/index.js index 177c692ea9..0e26892cf2 100644 --- a/src/fireedge/src/client/components/Tabs/Host/index.js +++ b/src/fireedge/src/client/components/Tabs/Host/index.js @@ -13,21 +13,21 @@ * See the License for the specific language governing permissions and * * limitations under the License. * * ------------------------------------------------------------------------- */ -import { memo, useMemo } from 'react' -import PropTypes from 'prop-types' import { Alert, LinearProgress } from '@mui/material' +import PropTypes from 'prop-types' +import { memo, useMemo } from 'react' +import { RESOURCE_NAMES } from 'client/constants' import { useViews } from 'client/features/Auth/hooks' import { useGetHostQuery } from 'client/features/OneApi/host' import { getAvailableInfoTabs } from 'client/models/Helper' -import { RESOURCE_NAMES } from 'client/constants' import Tabs from 'client/components/Tabs' import Info from 'client/components/Tabs/Host/Info' -import Wilds from 'client/components/Tabs/Host/Wilds' import Numa from 'client/components/Tabs/Host/Numa' -import Zombies from 'client/components/Tabs/Host/Zombies' import Vms from 'client/components/Tabs/Host/Vms' +import Wilds from 'client/components/Tabs/Host/Wilds' +import Zombies from 'client/components/Tabs/Host/Zombies' const getTabComponent = (tabName) => ({ @@ -40,7 +40,7 @@ const getTabComponent = (tabName) => const HostTabs = memo(({ id }) => { const { view, getResourceView } = useViews() - const { isLoading, isError, error } = useGetHostQuery( + const { isLoading, isError, error, status } = useGetHostQuery( { id }, { refetchOnMountOrArgChange: 10 } ) @@ -59,12 +59,14 @@ const HostTabs = memo(({ id }) => { ) } + if (isLoading || status === 'pending') { + return + } + if (status === 'fulfilled') { + return + } - return isLoading ? ( - - ) : ( - - ) + return <> }) HostTabs.propTypes = { id: PropTypes.string.isRequired } diff --git a/src/fireedge/src/client/components/Tabs/Image/Vms/index.js b/src/fireedge/src/client/components/Tabs/Image/Vms/index.js index b80e0b9f5c..89e492d7da 100644 --- a/src/fireedge/src/client/components/Tabs/Image/Vms/index.js +++ b/src/fireedge/src/client/components/Tabs/Image/Vms/index.js @@ -13,14 +13,14 @@ * See the License for the specific language governing permissions and * * limitations under the License. * * ------------------------------------------------------------------------- */ -import { ReactElement } from 'react' -import PropTypes from 'prop-types' -import { T } from 'client/constants' -import EmptyTab from 'client/components/Tabs/EmptyTab' -import { useHistory, generatePath } from 'react-router-dom' import { PATH } from 'client/apps/sunstone/routesOne' -import { useGetImageQuery } from 'client/features/OneApi/image' import { VmsTable } from 'client/components/Tables' +import EmptyTab from 'client/components/Tabs/EmptyTab' +import { T } from 'client/constants' +import { useGetImageQuery } from 'client/features/OneApi/image' +import PropTypes from 'prop-types' +import { ReactElement } from 'react' +import { generatePath, useHistory } from 'react-router-dom' /** * Renders mainly Vms tab. diff --git a/src/fireedge/src/client/components/Tabs/Image/index.js b/src/fireedge/src/client/components/Tabs/Image/index.js index 423354820f..72f1b887b3 100644 --- a/src/fireedge/src/client/components/Tabs/Image/index.js +++ b/src/fireedge/src/client/components/Tabs/Image/index.js @@ -13,19 +13,19 @@ * See the License for the specific language governing permissions and * * limitations under the License. * * ------------------------------------------------------------------------- */ -import { memo, useMemo } from 'react' -import PropTypes from 'prop-types' import { Alert, LinearProgress } from '@mui/material' +import PropTypes from 'prop-types' +import { memo, useMemo } from 'react' +import { RESOURCE_NAMES } from 'client/constants' import { useViews } from 'client/features/Auth' import { useGetImageQuery } from 'client/features/OneApi/image' import { getAvailableInfoTabs } from 'client/models/Helper' -import { RESOURCE_NAMES } from 'client/constants' import Tabs from 'client/components/Tabs' import Info from 'client/components/Tabs/Image/Info' -import Vms from 'client/components/Tabs/Image/Vms' import Snapshots from 'client/components/Tabs/Image/Snapshots' +import Vms from 'client/components/Tabs/Image/Vms' const getTabComponent = (tabName) => ({ @@ -36,7 +36,7 @@ const getTabComponent = (tabName) => const ImageTabs = memo(({ id }) => { const { view, getResourceView } = useViews() - const { isLoading, isError, error } = useGetImageQuery({ id }) + const { isLoading, isError, error, status } = useGetImageQuery({ id }) const tabsAvailable = useMemo(() => { const resource = RESOURCE_NAMES.IMAGE @@ -52,12 +52,14 @@ const ImageTabs = memo(({ id }) => { ) } + if (isLoading || status === 'pending') { + return + } + if (status === 'fulfilled') { + return + } - return isLoading ? ( - - ) : ( - - ) + return <> }) ImageTabs.propTypes = { id: PropTypes.string.isRequired } diff --git a/src/fireedge/src/client/components/Tabs/Marketplace/index.js b/src/fireedge/src/client/components/Tabs/Marketplace/index.js index 34b156fd98..77df769489 100644 --- a/src/fireedge/src/client/components/Tabs/Marketplace/index.js +++ b/src/fireedge/src/client/components/Tabs/Marketplace/index.js @@ -13,14 +13,14 @@ * See the License for the specific language governing permissions and * * limitations under the License. * * ------------------------------------------------------------------------- */ -import { memo, useMemo } from 'react' -import PropTypes from 'prop-types' import { Alert, LinearProgress } from '@mui/material' +import PropTypes from 'prop-types' +import { memo, useMemo } from 'react' +import { RESOURCE_NAMES } from 'client/constants' import { useViews } from 'client/features/Auth' import { useGetMarketplaceQuery } from 'client/features/OneApi/marketplace' import { getAvailableInfoTabs } from 'client/models/Helper' -import { RESOURCE_NAMES } from 'client/constants' import Tabs from 'client/components/Tabs' import Info from 'client/components/Tabs/Marketplace/Info' @@ -32,7 +32,7 @@ const getTabComponent = (tabName) => const MarketplaceTabs = memo(({ id }) => { const { view, getResourceView } = useViews() - const { isLoading, isError, error } = useGetMarketplaceQuery({ id }) + const { isLoading, isError, error, status } = useGetMarketplaceQuery({ id }) const tabsAvailable = useMemo(() => { const resource = RESOURCE_NAMES.MARKETPLACE @@ -49,13 +49,15 @@ const MarketplaceTabs = memo(({ id }) => { ) } - return isLoading ? ( - - ) : ( - - ) -}) + if (isLoading || status === 'pending') { + return + } + if (status === 'fulfilled') { + return + } + return <> +}) MarketplaceTabs.propTypes = { id: PropTypes.string.isRequired } MarketplaceTabs.displayName = 'MarketplaceTabs' diff --git a/src/fireedge/src/client/components/Tabs/MarketplaceApp/index.js b/src/fireedge/src/client/components/Tabs/MarketplaceApp/index.js index f17dd4948b..56ba9cd8d2 100644 --- a/src/fireedge/src/client/components/Tabs/MarketplaceApp/index.js +++ b/src/fireedge/src/client/components/Tabs/MarketplaceApp/index.js @@ -13,14 +13,14 @@ * See the License for the specific language governing permissions and * * limitations under the License. * * ------------------------------------------------------------------------- */ -import { memo, useMemo } from 'react' -import PropTypes from 'prop-types' import { Alert, LinearProgress } from '@mui/material' +import PropTypes from 'prop-types' +import { memo, useMemo } from 'react' +import { RESOURCE_NAMES } from 'client/constants' import { useViews } from 'client/features/Auth' import { useGetMarketplaceAppQuery } from 'client/features/OneApi/marketplaceApp' import { getAvailableInfoTabs } from 'client/models/Helper' -import { RESOURCE_NAMES } from 'client/constants' import Tabs from 'client/components/Tabs' import Info from 'client/components/Tabs/MarketplaceApp/Info' @@ -34,7 +34,7 @@ const getTabComponent = (tabName) => const MarketplaceAppTabs = memo(({ id }) => { const { view, getResourceView } = useViews() - const { isLoading, isError, error } = useGetMarketplaceAppQuery( + const { isLoading, isError, error, status } = useGetMarketplaceAppQuery( { id }, { refetchOnMountOrArgChange: 10 } ) @@ -54,13 +54,15 @@ const MarketplaceAppTabs = memo(({ id }) => { ) } - return isLoading ? ( - - ) : ( - - ) -}) + if (isLoading || status === 'pending') { + return + } + if (status === 'fulfilled') { + return + } + return <> +}) MarketplaceAppTabs.propTypes = { id: PropTypes.string.isRequired } MarketplaceAppTabs.displayName = 'MarketplaceAppTabs' diff --git a/src/fireedge/src/client/components/Tabs/SecurityGroup/index.js b/src/fireedge/src/client/components/Tabs/SecurityGroup/index.js index f86821ae70..edbecacaf4 100644 --- a/src/fireedge/src/client/components/Tabs/SecurityGroup/index.js +++ b/src/fireedge/src/client/components/Tabs/SecurityGroup/index.js @@ -13,14 +13,13 @@ * See the License for the specific language governing permissions and * * limitations under the License. * * ------------------------------------------------------------------------- */ -import { memo, useMemo } from 'react' -import PropTypes from 'prop-types' import { Alert, LinearProgress } from '@mui/material' - +import { RESOURCE_NAMES } from 'client/constants' import { useViews } from 'client/features/Auth' import { useGetSecGroupQuery } from 'client/features/OneApi/securityGroup' import { getAvailableInfoTabs } from 'client/models/Helper' -import { RESOURCE_NAMES } from 'client/constants' +import PropTypes from 'prop-types' +import { memo, useMemo } from 'react' import Tabs from 'client/components/Tabs' import Info from 'client/components/Tabs/SecurityGroup/Info' @@ -34,7 +33,7 @@ const getTabComponent = (tabName) => const SecurityGroupTabs = memo(({ id }) => { const { view, getResourceView } = useViews() - const { isLoading, isError, error } = useGetSecGroupQuery({ id }) + const { isLoading, isError, error, status } = useGetSecGroupQuery({ id }) const tabsAvailable = useMemo(() => { const resource = RESOURCE_NAMES.SEC_GROUP @@ -51,11 +50,14 @@ const SecurityGroupTabs = memo(({ id }) => { ) } - return isLoading ? ( - - ) : ( - - ) + if (isLoading || status === 'pending') { + return + } + if (status === 'fulfilled') { + return + } + + return <> }) SecurityGroupTabs.propTypes = { id: PropTypes.string.isRequired } diff --git a/src/fireedge/src/client/components/Tabs/Service/index.js b/src/fireedge/src/client/components/Tabs/Service/index.js index de0db4262c..9dac9c7d66 100644 --- a/src/fireedge/src/client/components/Tabs/Service/index.js +++ b/src/fireedge/src/client/components/Tabs/Service/index.js @@ -13,20 +13,20 @@ * See the License for the specific language governing permissions and * * limitations under the License. * * ------------------------------------------------------------------------- */ -import { memo, useMemo } from 'react' -import PropTypes from 'prop-types' import { Alert, LinearProgress } from '@mui/material' +import PropTypes from 'prop-types' +import { memo, useMemo } from 'react' +import { RESOURCE_NAMES } from 'client/constants' import { useViews } from 'client/features/Auth' import { useGetServiceQuery } from 'client/features/OneApi/service' import { getAvailableInfoTabs } from 'client/models/Helper' -import { RESOURCE_NAMES } from 'client/constants' import Tabs from 'client/components/Tabs' -import Info from 'client/components/Tabs/Service/Info' -import Roles from 'client/components/Tabs/Service/Roles' -import Log from 'client/components/Tabs/Service/Log' import Actions from 'client/components/Tabs/Service/Actions' +import Info from 'client/components/Tabs/Service/Info' +import Log from 'client/components/Tabs/Service/Log' +import Roles from 'client/components/Tabs/Service/Roles' const getTabComponent = (tabName) => ({ @@ -38,7 +38,7 @@ const getTabComponent = (tabName) => const ServiceTabs = memo(({ id }) => { const { view, getResourceView } = useViews() - const { isLoading, isError, error } = useGetServiceQuery({ id }) + const { isLoading, isError, error, status } = useGetServiceQuery({ id }) const tabsAvailable = useMemo(() => { const resource = RESOURCE_NAMES.SERVICE @@ -55,11 +55,14 @@ const ServiceTabs = memo(({ id }) => { ) } - return isLoading ? ( - - ) : ( - - ) + if (isLoading || status === 'pending') { + return + } + if (status === 'fulfilled') { + return + } + + return <> }) ServiceTabs.propTypes = { id: PropTypes.string.isRequired } diff --git a/src/fireedge/src/client/components/Tabs/ServiceTemplate/index.js b/src/fireedge/src/client/components/Tabs/ServiceTemplate/index.js index c806e409e1..14103be63c 100644 --- a/src/fireedge/src/client/components/Tabs/ServiceTemplate/index.js +++ b/src/fireedge/src/client/components/Tabs/ServiceTemplate/index.js @@ -13,14 +13,14 @@ * See the License for the specific language governing permissions and * * limitations under the License. * * ------------------------------------------------------------------------- */ -import { memo, useMemo } from 'react' -import PropTypes from 'prop-types' import { Alert, LinearProgress } from '@mui/material' +import PropTypes from 'prop-types' +import { memo, useMemo } from 'react' +import { RESOURCE_NAMES } from 'client/constants' import { useViews } from 'client/features/Auth' import { useGetServiceTemplateQuery } from 'client/features/OneApi/serviceTemplate' import { getAvailableInfoTabs } from 'client/models/Helper' -import { RESOURCE_NAMES } from 'client/constants' import Tabs from 'client/components/Tabs' import Info from 'client/components/Tabs/ServiceTemplate/Info' @@ -36,7 +36,9 @@ const getTabComponent = (tabName) => const ServiceTemplateTabs = memo(({ id }) => { const { view, getResourceView } = useViews() - const { isLoading, isError, error } = useGetServiceTemplateQuery({ id }) + const { isLoading, isError, error, status } = useGetServiceTemplateQuery({ + id, + }) const tabsAvailable = useMemo(() => { const resource = RESOURCE_NAMES.SERVICE_TEMPLATE @@ -52,12 +54,14 @@ const ServiceTemplateTabs = memo(({ id }) => { ) } + if (isLoading || status === 'pending') { + return + } + if (status === 'fulfilled') { + return + } - return isLoading ? ( - - ) : ( - - ) + return <> }) ServiceTemplateTabs.propTypes = { id: PropTypes.string.isRequired } diff --git a/src/fireedge/src/client/components/Tabs/User/index.js b/src/fireedge/src/client/components/Tabs/User/index.js index 0a8dd648b8..41be23afca 100644 --- a/src/fireedge/src/client/components/Tabs/User/index.js +++ b/src/fireedge/src/client/components/Tabs/User/index.js @@ -13,14 +13,14 @@ * See the License for the specific language governing permissions and * * limitations under the License. * * ------------------------------------------------------------------------- */ -import { memo, useMemo } from 'react' -import PropTypes from 'prop-types' import { Alert, LinearProgress } from '@mui/material' +import PropTypes from 'prop-types' +import { memo, useMemo } from 'react' +import { RESOURCE_NAMES } from 'client/constants' import { useViews } from 'client/features/Auth' import { useGetUserQuery } from 'client/features/OneApi/user' import { getAvailableInfoTabs } from 'client/models/Helper' -import { RESOURCE_NAMES } from 'client/constants' import Tabs from 'client/components/Tabs' import Info from 'client/components/Tabs/User/Info' @@ -32,7 +32,7 @@ const getTabComponent = (tabName) => const UserTabs = memo(({ id }) => { const { view, getResourceView } = useViews() - const { isLoading, isError, error } = useGetUserQuery({ id }) + const { isLoading, isError, error, status } = useGetUserQuery({ id }) const tabsAvailable = useMemo(() => { const resource = RESOURCE_NAMES.USER @@ -48,12 +48,14 @@ const UserTabs = memo(({ id }) => { ) } + if (isLoading || status === 'pending') { + return + } + if (status === 'fulfilled') { + return + } - return isLoading ? ( - - ) : ( - - ) + return <> }) UserTabs.propTypes = { id: PropTypes.string.isRequired } diff --git a/src/fireedge/src/client/components/Tabs/VNetwork/index.js b/src/fireedge/src/client/components/Tabs/VNetwork/index.js index f8588e1290..b1b137762c 100644 --- a/src/fireedge/src/client/components/Tabs/VNetwork/index.js +++ b/src/fireedge/src/client/components/Tabs/VNetwork/index.js @@ -13,22 +13,22 @@ * See the License for the specific language governing permissions and * * limitations under the License. * * ------------------------------------------------------------------------- */ -import { memo, useMemo } from 'react' -import PropTypes from 'prop-types' import { Alert, LinearProgress } from '@mui/material' +import PropTypes from 'prop-types' +import { memo, useMemo } from 'react' +import { RESOURCE_NAMES } from 'client/constants' import { useViews } from 'client/features/Auth' import { useGetVNetworkQuery } from 'client/features/OneApi/network' import { getAvailableInfoTabs } from 'client/models/Helper' -import { RESOURCE_NAMES } from 'client/constants' import Tabs from 'client/components/Tabs' -import Info from 'client/components/Tabs/VNetwork/Info' import Address from 'client/components/Tabs/VNetwork/Address' +import Clusters from 'client/components/Tabs/VNetwork/Clusters' +import Info from 'client/components/Tabs/VNetwork/Info' import Lease from 'client/components/Tabs/VNetwork/Leases' import Security from 'client/components/Tabs/VNetwork/Security' import VRouters from 'client/components/Tabs/VNetwork/VRouters' -import Clusters from 'client/components/Tabs/VNetwork/Clusters' const getTabComponent = (tabName) => ({ @@ -42,7 +42,7 @@ const getTabComponent = (tabName) => const VNetworkTabs = memo(({ id }) => { const { view, getResourceView } = useViews() - const { isLoading, isError, error } = useGetVNetworkQuery({ id }) + const { isLoading, isError, error, status } = useGetVNetworkQuery({ id }) const tabsAvailable = useMemo(() => { const resource = RESOURCE_NAMES.VNET @@ -59,13 +59,15 @@ const VNetworkTabs = memo(({ id }) => { ) } - return isLoading ? ( - - ) : ( - - ) -}) + if (isLoading || status === 'pending') { + return + } + if (status === 'fulfilled') { + return + } + return <> +}) VNetworkTabs.propTypes = { id: PropTypes.string.isRequired } VNetworkTabs.displayName = 'VNetworkTabs' diff --git a/src/fireedge/src/client/components/Tabs/VNetworkTemplate/index.js b/src/fireedge/src/client/components/Tabs/VNetworkTemplate/index.js index eda797a765..e247ec34c5 100644 --- a/src/fireedge/src/client/components/Tabs/VNetworkTemplate/index.js +++ b/src/fireedge/src/client/components/Tabs/VNetworkTemplate/index.js @@ -13,14 +13,14 @@ * See the License for the specific language governing permissions and * * limitations under the License. * * ------------------------------------------------------------------------- */ -import { memo, useMemo } from 'react' -import PropTypes from 'prop-types' import { Alert, LinearProgress } from '@mui/material' +import PropTypes from 'prop-types' +import { memo, useMemo } from 'react' +import { RESOURCE_NAMES } from 'client/constants' import { useViews } from 'client/features/Auth' import { useGetVNTemplateQuery } from 'client/features/OneApi/networkTemplate' import { getAvailableInfoTabs } from 'client/models/Helper' -import { RESOURCE_NAMES } from 'client/constants' import Tabs from 'client/components/Tabs' import Info from 'client/components/Tabs/VNetworkTemplate/Info' @@ -32,7 +32,7 @@ const getTabComponent = (tabName) => const VNetTemplateTabs = memo(({ id }) => { const { view, getResourceView } = useViews() - const { isLoading, isError, error } = useGetVNTemplateQuery({ id }) + const { isLoading, isError, error, status } = useGetVNTemplateQuery({ id }) const tabsAvailable = useMemo(() => { const resource = RESOURCE_NAMES.VN_TEMPLATE @@ -49,11 +49,14 @@ const VNetTemplateTabs = memo(({ id }) => { ) } - return isLoading ? ( - - ) : ( - - ) + if (isLoading || status === 'pending') { + return + } + if (status === 'fulfilled') { + return + } + + return <> }) VNetTemplateTabs.propTypes = { id: PropTypes.string.isRequired } diff --git a/src/fireedge/src/client/components/Tabs/Vm/Info/Graphs.js b/src/fireedge/src/client/components/Tabs/Vm/Info/Graphs.js index 057d1d8c7f..7b348d0ffe 100644 --- a/src/fireedge/src/client/components/Tabs/Vm/Info/Graphs.js +++ b/src/fireedge/src/client/components/Tabs/Vm/Info/Graphs.js @@ -13,14 +13,14 @@ * See the License for the specific language governing permissions and * * limitations under the License. * * ------------------------------------------------------------------------- */ -import { ReactElement } from 'react' import PropTypes from 'prop-types' +import { ReactElement } from 'react' -import { useGetMonitoringQuery } from 'client/features/OneApi/vm' import { Chartist } from 'client/components/Charts' import { Tr } from 'client/components/HOC' -import { prettyBytes } from 'client/utils' import { T } from 'client/constants' +import { useGetMonitoringQuery } from 'client/features/OneApi/vm' +import { prettyBytes } from 'client/utils' /** * Render Graphs Capacity. diff --git a/src/fireedge/src/client/components/Tabs/Vm/Info/index.js b/src/fireedge/src/client/components/Tabs/Vm/Info/index.js index e5a850daaf..05d9724f88 100644 --- a/src/fireedge/src/client/components/Tabs/Vm/Info/index.js +++ b/src/fireedge/src/client/components/Tabs/Vm/Info/index.js @@ -13,33 +13,33 @@ * See the License for the specific language governing permissions and * * limitations under the License. * * ------------------------------------------------------------------------- */ -import { ReactElement, useMemo, useCallback } from 'react' -import PropTypes from 'prop-types' import { Stack } from '@mui/material' +import PropTypes from 'prop-types' +import { ReactElement, useCallback, useMemo } from 'react' import { - useGetVmQuery, + AttributePanel, + Ownership, + Permissions, +} from 'client/components/Tabs/Common' +import Graphs from 'client/components/Tabs/Vm/Info/Graphs' +import Capacity from 'client/components/Tabs/Vm/Info/capacity' +import Information from 'client/components/Tabs/Vm/Info/information' +import { useChangeVmOwnershipMutation, useChangeVmPermissionsMutation, + useGetVmQuery, useUpdateUserTemplateMutation, } from 'client/features/OneApi/vm' -import { - Permissions, - Ownership, - AttributePanel, -} from 'client/components/Tabs/Common' -import Information from 'client/components/Tabs/Vm/Info/information' -import Capacity from 'client/components/Tabs/Vm/Info/capacity' -import Graphs from 'client/components/Tabs/Vm/Info/Graphs' import { Tr } from 'client/components/HOC' import { T } from 'client/constants' -import { getHypervisor } from 'client/models/VirtualMachine' import { - getActionsAvailable, filterAttributes, + getActionsAvailable, jsonToXml, } from 'client/models/Helper' +import { getHypervisor } from 'client/models/VirtualMachine' import { cloneObject, set } from 'client/utils' const LXC_ATTRIBUTES_REG = /^LXC_/ diff --git a/src/fireedge/src/client/components/Tabs/Vm/Info/information.js b/src/fireedge/src/client/components/Tabs/Vm/Info/information.js index 73d872dfca..4bd352e436 100644 --- a/src/fireedge/src/client/components/Tabs/Vm/Info/information.js +++ b/src/fireedge/src/client/components/Tabs/Vm/Info/information.js @@ -13,33 +13,33 @@ * See the License for the specific language governing permissions and * * limitations under the License. * * ------------------------------------------------------------------------- */ -import { ReactElement, useMemo } from 'react' -import PropTypes from 'prop-types' -import { generatePath } from 'react-router-dom' import { Stack } from '@mui/material' +import PropTypes from 'prop-types' +import { ReactElement, useMemo } from 'react' +import { generatePath } from 'react-router-dom' import { useViews } from 'client/features/Auth' import { useGetClusterAdminQuery } from 'client/features/OneApi/cluster' import { useRenameVmMutation } from 'client/features/OneApi/vm' -import { StatusCircle, StatusChip } from 'client/components/Status' -import { List } from 'client/components/Tabs/Common' import { Translate } from 'client/components/HOC' import MultipleTags from 'client/components/MultipleTags' +import { StatusChip, StatusCircle } from 'client/components/Status' +import { List } from 'client/components/Tabs/Common' -import { - getState, - getLastHistory, - getIps, - getNicWithPortForwarding, -} from 'client/models/VirtualMachine' +import { PATH } from 'client/apps/sunstone/routesOne' +import { RESOURCE_NAMES, T, VM, VM_ACTIONS } from 'client/constants' import { booleanToString, levelLockToString, timeToString, } from 'client/models/Helper' -import { T, VM, VM_ACTIONS, RESOURCE_NAMES } from 'client/constants' -import { PATH } from 'client/apps/sunstone/routesOne' +import { + getIps, + getLastHistory, + getNicWithPortForwarding, + getState, +} from 'client/models/VirtualMachine' const { CLUSTER, HOST } = RESOURCE_NAMES diff --git a/src/fireedge/src/client/components/Tabs/Vm/Network/Actions.js b/src/fireedge/src/client/components/Tabs/Vm/Network/Actions.js index 46dfbbd508..6c58f11022 100644 --- a/src/fireedge/src/client/components/Tabs/Vm/Network/Actions.js +++ b/src/fireedge/src/client/components/Tabs/Vm/Network/Actions.js @@ -13,28 +13,28 @@ * See the License for the specific language governing permissions and * * limitations under the License. * * ------------------------------------------------------------------------- */ -import { memo, useEffect } from 'react' +import { Edit, ShieldAdd, ShieldCross, Trash } from 'iconoir-react' import PropTypes from 'prop-types' -import { Edit, Trash, ShieldAdd, ShieldCross } from 'iconoir-react' +import { memo, useEffect } from 'react' -import { - useAttachNicMutation, - useDetachNicMutation, - useUpdateNicMutation, - useAttachSecurityGroupMutation, - useDetachSecurityGroupMutation, -} from 'client/features/OneApi/vm' import ButtonToTriggerForm from 'client/components/Forms/ButtonToTriggerForm' import { AttachNicForm, AttachSecGroupForm, UpdateNicForm, } from 'client/components/Forms/Vm' +import { + useAttachNicMutation, + useAttachSecurityGroupMutation, + useDetachNicMutation, + useDetachSecurityGroupMutation, + useUpdateNicMutation, +} from 'client/features/OneApi/vm' -import { useGeneralApi } from 'client/features/General' -import { jsonToXml } from 'client/models/Helper' import { Tr, Translate } from 'client/components/HOC' import { T } from 'client/constants' +import { useGeneralApi } from 'client/features/General' +import { jsonToXml } from 'client/models/Helper' const AttachAction = memo( ({ vmId, hypervisor, nic, currentNics, onSubmit, sx }) => { diff --git a/src/fireedge/src/client/components/Tabs/Vm/index.js b/src/fireedge/src/client/components/Tabs/Vm/index.js index d63803b338..e2fc421ce7 100644 --- a/src/fireedge/src/client/components/Tabs/Vm/index.js +++ b/src/fireedge/src/client/components/Tabs/Vm/index.js @@ -13,12 +13,14 @@ * See the License for the specific language governing permissions and * * limitations under the License. * * ------------------------------------------------------------------------- */ -import { memo, useMemo } from 'react' -import PropTypes from 'prop-types' -import { Alert, LinearProgress, Fade } from '@mui/material' -import { Cancel as CloseIcon } from 'iconoir-react' +import { Alert, Fade, LinearProgress } from '@mui/material' import makeStyles from '@mui/styles/makeStyles' +import { Cancel as CloseIcon } from 'iconoir-react' +import PropTypes from 'prop-types' +import { memo, useMemo } from 'react' +import { Translate } from 'client/components/HOC' +import { RESOURCE_NAMES, T } from 'client/constants' import { useViews } from 'client/features/Auth' import { useGetVmQuery, @@ -26,22 +28,20 @@ import { } from 'client/features/OneApi/vm' import { getAvailableInfoTabs, - jsonToXml, getErrorMessage, + jsonToXml, } from 'client/models/Helper' -import { RESOURCE_NAMES, T } from 'client/constants' -import { Translate } from 'client/components/HOC' import { SubmitButton } from 'client/components/FormControl' import Tabs from 'client/components/Tabs' +import Backup from 'client/components/Tabs/Vm/Backup' +import Configuration from 'client/components/Tabs/Vm/Configuration' +import History from 'client/components/Tabs/Vm/History' import Info from 'client/components/Tabs/Vm/Info' import Network from 'client/components/Tabs/Vm/Network' -import History from 'client/components/Tabs/Vm/History' import SchedActions from 'client/components/Tabs/Vm/SchedActions' import Snapshot from 'client/components/Tabs/Vm/Snapshot' -import Backup from 'client/components/Tabs/Vm/Backup' import Storage from 'client/components/Tabs/Vm/Storage' -import Configuration from 'client/components/Tabs/Vm/Configuration' import Template from 'client/components/Tabs/Vm/Template' const useStyles = makeStyles(({ palette }) => ({ @@ -70,6 +70,7 @@ const VmTabs = memo(({ id }) => { const classes = useStyles() const { view, getResourceView } = useViews() const { + status, isLoading, isError, error, @@ -93,7 +94,7 @@ const VmTabs = memo(({ id }) => { const infoTabs = getResourceView(resource)?.['info-tabs'] ?? {} return getAvailableInfoTabs(infoTabs, getTabComponent, id) - }, [view]) + }, [view, id]) if (isError) { return ( @@ -103,30 +104,35 @@ const VmTabs = memo(({ id }) => { ) } - return isLoading ? ( - - ) : ( - <> - - } - tooltip={} - /> - } - > - {vmError} - - - - - ) + if (isLoading || status === 'pending') { + return + } + if (status === 'fulfilled') { + return ( + <> + + } + tooltip={} + /> + } + > + {vmError} + + + + + ) + } + + return <> }) VmTabs.propTypes = { id: PropTypes.string.isRequired } diff --git a/src/fireedge/src/client/components/Tabs/VmTemplate/index.js b/src/fireedge/src/client/components/Tabs/VmTemplate/index.js index fefd0411b6..e42cb2c2db 100644 --- a/src/fireedge/src/client/components/Tabs/VmTemplate/index.js +++ b/src/fireedge/src/client/components/Tabs/VmTemplate/index.js @@ -13,14 +13,14 @@ * See the License for the specific language governing permissions and * * limitations under the License. * * ------------------------------------------------------------------------- */ -import { memo, useMemo } from 'react' -import PropTypes from 'prop-types' import { Alert, LinearProgress } from '@mui/material' +import PropTypes from 'prop-types' +import { memo, useMemo } from 'react' +import { RESOURCE_NAMES } from 'client/constants' import { useViews } from 'client/features/Auth' import { useGetTemplateQuery } from 'client/features/OneApi/vmTemplate' import { getAvailableInfoTabs } from 'client/models/Helper' -import { RESOURCE_NAMES } from 'client/constants' import Tabs from 'client/components/Tabs' import Info from 'client/components/Tabs/VmTemplate/Info' @@ -34,7 +34,7 @@ const getTabComponent = (tabName) => const VmTemplateTabs = memo(({ id }) => { const { view, getResourceView } = useViews() - const { isLoading, isError, error } = useGetTemplateQuery({ id }) + const { isLoading, isError, error, status } = useGetTemplateQuery({ id }) const tabsAvailable = useMemo(() => { const resource = RESOURCE_NAMES.VM_TEMPLATE @@ -50,14 +50,15 @@ const VmTemplateTabs = memo(({ id }) => { ) } + if (isLoading || status === 'pending') { + return + } + if (status === 'fulfilled') { + return + } - return isLoading ? ( - - ) : ( - - ) + return <> }) - VmTemplateTabs.propTypes = { id: PropTypes.string.isRequired } VmTemplateTabs.displayName = 'VmTemplateTabs' diff --git a/src/fireedge/src/client/components/Tabs/index.js b/src/fireedge/src/client/components/Tabs/index.js index 5d1595e00a..b56d07f8fe 100644 --- a/src/fireedge/src/client/components/Tabs/index.js +++ b/src/fireedge/src/client/components/Tabs/index.js @@ -13,16 +13,16 @@ * See the License for the specific language governing permissions and * * limitations under the License. * * ------------------------------------------------------------------------- */ -import { useState, useMemo, ReactElement } from 'react' import PropTypes from 'prop-types' +import { ReactElement, useMemo, useState } from 'react' import { - styled, - Tabs as MTabs, - TabsProps, - Tab as MTab, Fade, + Tab as MTab, + Tabs as MTabs, Stack, + TabsProps, + styled, } from '@mui/material' import { WarningCircledOutline } from 'iconoir-react' diff --git a/src/fireedge/src/client/components/Timer/index.js b/src/fireedge/src/client/components/Timer/index.js index 5d1610145c..d508154ed8 100644 --- a/src/fireedge/src/client/components/Timer/index.js +++ b/src/fireedge/src/client/components/Timer/index.js @@ -13,9 +13,9 @@ * See the License for the specific language governing permissions and * * limitations under the License. * * ------------------------------------------------------------------------- */ -import { ReactElement, memo, useState, useMemo, useEffect } from 'react' -import PropTypes from 'prop-types' import { DateTime } from 'luxon' +import PropTypes from 'prop-types' +import { ReactElement, memo, useEffect, useMemo, useState } from 'react' import { Translate } from 'client/components/HOC' import { timeFromMilliseconds } from 'client/models/Helper' diff --git a/src/fireedge/src/client/containers/Hosts/index.js b/src/fireedge/src/client/containers/Hosts/index.js index fd5a0e084e..398619dd42 100644 --- a/src/fireedge/src/client/containers/Hosts/index.js +++ b/src/fireedge/src/client/containers/Hosts/index.js @@ -13,26 +13,26 @@ * See the License for the specific language governing permissions and * * limitations under the License. * * ------------------------------------------------------------------------- */ -import { ReactElement, useState, memo } from 'react' -import PropTypes from 'prop-types' +import { Box, Chip, Stack, Typography } from '@mui/material' +import Cancel from 'iconoir-react/dist/Cancel' import GotoIcon from 'iconoir-react/dist/Pin' import RefreshDouble from 'iconoir-react/dist/RefreshDouble' -import Cancel from 'iconoir-react/dist/Cancel' -import { Typography, Box, Stack, Chip } from '@mui/material' +import PropTypes from 'prop-types' +import { ReactElement, memo, useState } from 'react' import { Row } from 'react-table' +import { SubmitButton } from 'client/components/FormControl' +import { Tr } from 'client/components/HOC' +import MultipleTags from 'client/components/MultipleTags' +import SplitPane from 'client/components/SplitPane' +import { HostsTable } from 'client/components/Tables' +import HostActions from 'client/components/Tables/Hosts/actions' +import HostTabs from 'client/components/Tabs/Host' +import { Host, T } from 'client/constants' import { useLazyGetHostQuery, useUpdateHostMutation, } from 'client/features/OneApi/host' -import { HostsTable } from 'client/components/Tables' -import HostTabs from 'client/components/Tabs/Host' -import HostActions from 'client/components/Tables/Hosts/actions' -import SplitPane from 'client/components/SplitPane' -import MultipleTags from 'client/components/MultipleTags' -import { SubmitButton } from 'client/components/FormControl' -import { Tr } from 'client/components/HOC' -import { T, Host } from 'client/constants' /** * Displays a list of Hosts with a split pane between the list and selected row(s). diff --git a/src/fireedge/src/client/containers/VirtualMachines/Detail.js b/src/fireedge/src/client/containers/VirtualMachines/Detail.js index 48566596ba..fa0d5d491c 100644 --- a/src/fireedge/src/client/containers/VirtualMachines/Detail.js +++ b/src/fireedge/src/client/containers/VirtualMachines/Detail.js @@ -14,7 +14,7 @@ * limitations under the License. * * ------------------------------------------------------------------------- */ import { ReactElement } from 'react' -import { useParams, Redirect } from 'react-router-dom' +import { Redirect, useParams } from 'react-router-dom' 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 066180591b..eade741c73 100644 --- a/src/fireedge/src/client/containers/VirtualMachines/index.js +++ b/src/fireedge/src/client/containers/VirtualMachines/index.js @@ -13,26 +13,26 @@ * See the License for the specific language governing permissions and * * limitations under the License. * * ------------------------------------------------------------------------- */ -import { ReactElement, useState, memo } from 'react' -import PropTypes from 'prop-types' +import { Box, Chip, Stack, Typography } from '@mui/material' +import Cancel from 'iconoir-react/dist/Cancel' import GotoIcon from 'iconoir-react/dist/Pin' import RefreshDouble from 'iconoir-react/dist/RefreshDouble' -import Cancel from 'iconoir-react/dist/Cancel' -import { Typography, Box, Stack, Chip } from '@mui/material' +import PropTypes from 'prop-types' +import { ReactElement, memo, useState } from 'react' import { Row } from 'react-table' +import { SubmitButton } from 'client/components/FormControl' +import { Tr } from 'client/components/HOC' +import MultipleTags from 'client/components/MultipleTags' +import SplitPane from 'client/components/SplitPane' +import { VmsTable } from 'client/components/Tables' +import VmActions from 'client/components/Tables/Vms/actions' +import VmTabs from 'client/components/Tabs/Vm' +import { T, VM } from 'client/constants' import { useLazyGetVmQuery, useUpdateUserTemplateMutation, } from 'client/features/OneApi/vm' -import { VmsTable } from 'client/components/Tables' -import VmActions from 'client/components/Tables/Vms/actions' -import VmTabs from 'client/components/Tabs/Vm' -import SplitPane from 'client/components/SplitPane' -import MultipleTags from 'client/components/MultipleTags' -import { SubmitButton } from 'client/components/FormControl' -import { Tr } from 'client/components/HOC' -import { T, VM } from 'client/constants' /** * Displays a list of VMs with a split pane between the list and selected row(s). @@ -41,7 +41,7 @@ import { T, VM } from 'client/constants' */ function VirtualMachines() { const [selectedRows, onSelectedRowsChange] = useState(() => []) - const actions = VmActions() + const actions = VmActions(selectedRows) const hasSelectedRows = selectedRows?.length > 0 const moreThanOneSelected = selectedRows?.length > 1 @@ -55,7 +55,6 @@ function VirtualMachines() { globalActions={actions} useUpdateMutation={useUpdateUserTemplateMutation} /> - {hasSelectedRows && ( <> diff --git a/src/fireedge/src/client/models/Helper.js b/src/fireedge/src/client/models/Helper.js index 5eca77c561..9aba15db5b 100644 --- a/src/fireedge/src/client/models/Helper.js +++ b/src/fireedge/src/client/models/Helper.js @@ -13,22 +13,22 @@ * See the License for the specific language governing permissions and * * limitations under the License. * * ------------------------------------------------------------------------- */ -import { DateTime, Settings } from 'luxon' import { - parse as ParserToJson, - X2jOptions, - j2xParser as ParserToXml, J2xOptions, + parse as ParserToJson, + j2xParser as ParserToXml, + X2jOptions, } from 'fast-xml-parser' +import { DateTime, Settings } from 'luxon' -import { sentenceCase } from 'client/utils' import { - T, - Permission, - UserInputObject, - USER_INPUT_TYPES, CURRENCY, + Permission, + T, + USER_INPUT_TYPES, + UserInputObject, } from 'client/constants' +import { sentenceCase } from 'client/utils' /** * @param {object} json - JSON diff --git a/src/fireedge/src/client/models/VirtualMachine.js b/src/fireedge/src/client/models/VirtualMachine.js index eb63a6dfa9..60b436f576 100644 --- a/src/fireedge/src/client/models/VirtualMachine.js +++ b/src/fireedge/src/client/models/VirtualMachine.js @@ -13,29 +13,29 @@ * See the License for the specific language governing permissions and * * limitations under the License. * * ------------------------------------------------------------------------- */ +import { stringToBoolean } from 'client/models/Helper' +import { isRelative } from 'client/models/Scheduler' import { getSecurityGroupsFromResource, prettySecurityGroup, } from 'client/models/SecurityGroup' -import { isRelative } from 'client/models/Scheduler' -import { stringToBoolean } from 'client/models/Helper' import { - STATES, - VM_ACTIONS_BY_STATE, - VM_STATES, - VM_LCM_STATES, - NIC_IP_ATTRS, + Disk, EXTERNAL_IP_ATTRS, HISTORY_ACTIONS, HYPERVISORS, - VM, - Disk, + HistoryRecord, + NIC_IP_ATTRS, Nic, NicAlias, + STATES, ScheduleAction, - HistoryRecord, Snapshot, + VM, + VM_ACTIONS_BY_STATE, + VM_LCM_STATES, + VM_STATES, } from 'client/constants' /**