1
0
mirror of https://github.com/OpenNebula/one.git synced 2025-03-22 18:50:08 +03:00

F #6003: show error message in vm tabs (#2336)

Co-authored-by: Jorge Lobo <jlobo@opennebula.systems>
This commit is contained in:
Jorge Miguel Lobo Escalona 2022-11-02 16:24:48 +01:00 committed by GitHub
parent 7e1a81cc4b
commit c62fb1dffa
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 65 additions and 39 deletions

View File

@ -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' }}
>
<Fade in={!!error} unmountOnExit>
<Alert
variant="outlined"
severity="error"
sx={{ gridColumn: 'span 2' }}
action={
<SubmitButton
onClick={handleDismissError}
icon={<CloseIcon />}
tooltip={<Translate word={T.Dismiss} />}
/>
}
>
{error}
</Alert>
</Fade>
{informationPanel?.enabled && (
<Information actions={getActions(informationPanel?.actions)} vm={vm} />
)}

View File

@ -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 ? (
<LinearProgress color="secondary" sx={{ width: '100%' }} />
) : (
<Tabs addBorder tabs={tabsAvailable} />
<>
<Fade in={!!vmError} unmountOnExit>
<Alert
variant="outlined"
severity="error"
className={classes.vmError}
sx={{ gridColumn: 'span 2' }}
action={
<SubmitButton
onClick={handleDismissError}
icon={<CloseIcon />}
tooltip={<Translate word={T.Dismiss} />}
/>
}
>
{vmError}
</Alert>
</Fade>
<Tabs addBorder tabs={tabsAvailable} />
</>
)
})