1
0
mirror of https://github.com/OpenNebula/one.git synced 2024-12-22 13:33:52 +03:00

F OpenNebula/one#6616: Refine VM backup dialog (#3169)

* M #-: Increase zIndex for action button menu

Signed-off-by: Victor Hansson <vhansson@opennebula.io>

* F OpenNebula/one#6616: Refine VM backup dialog

* Added more context to the VM backup dialog, now displaying previous backup information

Signed-off-by: Victor Hansson <vhansson@opennebula.io>

---------

Signed-off-by: Victor Hansson <vhansson@opennebula.io>
This commit is contained in:
vichansson 2024-07-24 18:52:10 +03:00 committed by GitHub
parent 88e822c24e
commit 5ec00ffdcd
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 114 additions and 10 deletions

View File

@ -96,7 +96,7 @@ const ButtonToTriggerForm = ({
open={open}
onClose={handleClose}
TransitionComponent={Grow}
sx={{ zIndex: 2 }}
sx={(theme) => ({ zIndex: theme.zIndex.tooltip })}
>
{options.map(({ cy, disabled, icon: Icon, name, ...option }) => (
<MenuItem

View File

@ -17,23 +17,117 @@
import PropTypes from 'prop-types'
import FormWithSchema from 'client/components/Forms/FormWithSchema'
import { Tr } from 'client/components/HOC'
import { T } from 'client/constants'
import {
SCHEMA,
FIELDS,
} from 'client/components/Forms/Vm/BackupForm/Steps/BasicConfiguration/schema'
import { Step } from 'client/utils'
import { T } from 'client/constants'
import { BackupsTable, IncrementsTable } from 'client/components/Tables'
import { Box, Typography, Divider } from '@mui/material'
import { useEffect, useState } from 'react'
import { useHistory, generatePath } from 'react-router-dom'
import { useGetVmQuery } from 'client/features/OneApi/vm'
import { useLazyGetImageQuery } from 'client/features/OneApi/image'
import { PATH } from 'client/apps/sunstone/routesOne'
export const STEP_ID = 'configuration'
const Content = (props) => (
const Content = (props) => {
const [increments, setIncrements] = useState([])
const { vmId: id } = props
const {
data: vm = {},
refetch,
isFetching: fetchingVms,
} = useGetVmQuery({ id })
const vmBackupsConfig = vm?.BACKUPS?.BACKUP_CONFIG
const incrementalBackupImageId = vm?.BACKUPS?.BACKUP_IDS?.ID
const incrementalBackups =
'LAST_INCREMENT_ID' in vmBackupsConfig &&
vmBackupsConfig?.MODE === 'INCREMENT' &&
incrementalBackupImageId
const [fetchBackupImage, { isFetching: fetchingImages }] =
useLazyGetImageQuery(
{ incrementalBackupImageId },
{
skip: true,
}
)
const fetchIncrements = async () => {
if (incrementalBackups) {
const result = await fetchBackupImage({
id: incrementalBackupImageId,
}).unwrap()
const image = result || {}
const fetchedIncrements = image?.BACKUP_INCREMENTS?.INCREMENT
? Array.isArray(image.BACKUP_INCREMENTS.INCREMENT)
? image.BACKUP_INCREMENTS.INCREMENT
: [image.BACKUP_INCREMENTS.INCREMENT]
: []
setIncrements(fetchedIncrements)
}
}
useEffect(() => {
fetchIncrements()
}, [incrementalBackups, fetchBackupImage])
const path = PATH.STORAGE.BACKUPS.DETAIL
const history = useHistory()
const handleRowClick = (rowId) => {
history.push(generatePath(path, { id: String(rowId) }))
}
return (
<Box>
<FormWithSchema
cy="restore-configuration"
id={STEP_ID}
fields={() => FIELDS(props)}
/>
<Divider sx={{ my: 2 }} />
<Box sx={{ mt: 3 }}>
<Typography variant="h6" gutterBottom>
{Tr(`${T.Previous} ${T.Backups}`)}
</Typography>
<Box
sx={{
padding: '16px',
}}
>
{incrementalBackups ? (
<IncrementsTable
disableGlobalSort
disableRowSelect
increments={increments}
isLoading={fetchingImages}
refetch={fetchIncrements}
onRowClick={(row) => handleRowClick(incrementalBackupImageId)}
/>
) : (
<BackupsTable
disableRowSelect
disableGlobalSort
refetchVm={refetch}
isFetchingVm={fetchingVms}
vm={vm}
onRowClick={(row) => handleRowClick(row.ID)}
/>
)}
</Box>
</Box>
</Box>
)
}
/**
* Step to configure the marketplace app.
@ -50,6 +144,7 @@ const ConfigurationStep = (isMultiple) => ({
})
Content.propTypes = {
vmId: PropTypes.string,
data: PropTypes.any,
setFormData: PropTypes.func,
nics: PropTypes.array,

View File

@ -517,7 +517,16 @@ const Actions = () => {
subheader: SubHeader,
dataCy: `modal-${VM_ACTIONS.BACKUP}`,
},
form: BackupForm,
form: (row) => {
const vm = row?.[0]?.original
const vmId = vm?.ID
return BackupForm({
stepProps: {
vmId,
},
})
},
onSubmit: (rows) => async (formData) => {
const ids = rows?.map?.(({ original }) => original?.ID)
await Promise.all(