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 84a0dd52af..b21ce4aaa9 100644 --- a/src/fireedge/src/client/components/Tabs/Vm/Info/index.js +++ b/src/fireedge/src/client/components/Tabs/Vm/Info/index.js @@ -15,8 +15,7 @@ * ------------------------------------------------------------------------- */ import { ReactElement, useMemo, useCallback } from 'react' import PropTypes from 'prop-types' -import { Stack, Alert, Fade } from '@mui/material' -import { Cancel as CloseIcon } from 'iconoir-react' +import { Stack } from '@mui/material' import { useGetVmQuery, @@ -32,16 +31,14 @@ import { 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 { SubmitButton } from 'client/components/FormControl' -import { Tr, Translate } from 'client/components/HOC' +import { Tr } from 'client/components/HOC' import { T } from 'client/constants' import { getHypervisor } from 'client/models/VirtualMachine' import { getActionsAvailable, filterAttributes, jsonToXml, - getErrorMessage, } from 'client/models/Helper' import { cloneObject, set } from 'client/utils' @@ -75,11 +72,9 @@ const VmInfoTab = ({ tabProps = {}, id }) => { const [changeVmOwnership] = useChangeVmOwnershipMutation() const [changeVmPermissions] = useChangeVmPermissionsMutation() const [updateUserTemplate] = useUpdateUserTemplateMutation() - const [dismissError] = useUpdateUserTemplateMutation() const { UNAME, UID, GNAME, GID, PERMISSIONS, USER_TEMPLATE, MONITORING } = vm - const error = useMemo(() => getErrorMessage(vm), [vm]) const hypervisor = useMemo(() => getHypervisor(vm), [vm]) const { @@ -114,13 +109,6 @@ const VmInfoTab = ({ tabProps = {}, id }) => { await updateUserTemplate({ id, template: xml, replace: 0 }) } - const handleDismissError = async () => { - const { ERROR, SCHED_MESSAGE, ...templateWithoutError } = USER_TEMPLATE - const xml = jsonToXml({ ...templateWithoutError }) - - await dismissError({ id, template: xml, replace: 0 }) - } - const getActions = useCallback( (actions) => getActionsAvailable(actions, hypervisor), [hypervisor] @@ -139,22 +127,6 @@ const VmInfoTab = ({ tabProps = {}, id }) => { gridTemplateColumns="repeat(auto-fit, minmax(49%, 1fr))" padding={{ sm: '0.8em' }} > - - } - tooltip={} - /> - } - > - {error} - - {informationPanel?.enabled && ( )} diff --git a/src/fireedge/src/client/components/Tabs/Vm/index.js b/src/fireedge/src/client/components/Tabs/Vm/index.js index 7f7c6d5fc9..3bfc32058a 100644 --- a/src/fireedge/src/client/components/Tabs/Vm/index.js +++ b/src/fireedge/src/client/components/Tabs/Vm/index.js @@ -15,13 +15,24 @@ * ------------------------------------------------------------------------- */ import { memo, useMemo } from 'react' import PropTypes from 'prop-types' -import { Alert, LinearProgress } from '@mui/material' +import { Alert, LinearProgress, Fade } from '@mui/material' +import { Cancel as CloseIcon } from 'iconoir-react' +import makeStyles from '@mui/styles/makeStyles' import { useViews } from 'client/features/Auth' -import { useGetVmQuery } from 'client/features/OneApi/vm' -import { getAvailableInfoTabs } from 'client/models/Helper' -import { RESOURCE_NAMES } from 'client/constants' +import { + useGetVmQuery, + useUpdateUserTemplateMutation, +} from 'client/features/OneApi/vm' +import { + getAvailableInfoTabs, + jsonToXml, + getErrorMessage, +} 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 Info from 'client/components/Tabs/Vm/Info' import Network from 'client/components/Tabs/Vm/Network' @@ -33,6 +44,15 @@ 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 }) => ({ + vmError: { + '&': { + marginBottom: '15px', + backgroundColor: palette.background.paper, + }, + }, +})) + const getTabComponent = (tabName) => ({ info: Info, @@ -47,11 +67,26 @@ const getTabComponent = (tabName) => }[tabName]) const VmTabs = memo(({ id }) => { + const classes = useStyles() const { view, getResourceView } = useViews() - const { isLoading, isError, error } = useGetVmQuery( - { id }, - { refetchOnMountOrArgChange: 10 } - ) + const { + isLoading, + isError, + error, + data: vm = {}, + } = useGetVmQuery({ id }, { refetchOnMountOrArgChange: 10 }) + const [dismissError] = useUpdateUserTemplateMutation() + + const { USER_TEMPLATE } = vm + + const handleDismissError = async () => { + const { ERROR, SCHED_MESSAGE, ...templateWithoutError } = USER_TEMPLATE + const xml = jsonToXml({ ...templateWithoutError }) + + await dismissError({ id, template: xml, replace: 0 }) + } + + const vmError = useMemo(() => getErrorMessage(vm), [vm]) const tabsAvailable = useMemo(() => { const resource = RESOURCE_NAMES.VM @@ -71,7 +106,26 @@ const VmTabs = memo(({ id }) => { return isLoading ? ( ) : ( - + <> + + } + tooltip={} + /> + } + > + {vmError} + + + + ) })