From 5b1f99a7bbe5af66b1e8c70866e5ad62eb35a36d Mon Sep 17 00:00:00 2001 From: vichansson Date: Thu, 10 Oct 2024 15:37:13 +0300 Subject: [PATCH] F OpenNebula/one#6742: Update OS & CPU tab layout (#3262) Signed-off-by: Victor Hansson (cherry picked from commit 32805d41302d6572234e5db72515769a714f99a1) --- .../ExtraConfiguration/booting/bootSchema.js | 9 ++-- .../booting/featuresSchema.js | 2 +- .../Steps/ExtraConfiguration/booting/index.js | 12 ++--- .../booting/kernelSchema.js | 5 ++ .../booting/ramdiskSchema.js | 12 +++-- .../ExtraConfiguration/booting/schema.js | 24 +++++----- .../ExtraConfiguration/booting/styles.js | 47 +++++++++++++++++++ .../src/client/constants/translates.js | 2 +- 8 files changed, 83 insertions(+), 30 deletions(-) create mode 100644 src/fireedge/src/client/components/Forms/VmTemplate/CreateForm/Steps/ExtraConfiguration/booting/styles.js diff --git a/src/fireedge/src/client/components/Forms/VmTemplate/CreateForm/Steps/ExtraConfiguration/booting/bootSchema.js b/src/fireedge/src/client/components/Forms/VmTemplate/CreateForm/Steps/ExtraConfiguration/booting/bootSchema.js index 2bc15216dc..40d4bd33a1 100644 --- a/src/fireedge/src/client/components/Forms/VmTemplate/CreateForm/Steps/ExtraConfiguration/booting/bootSchema.js +++ b/src/fireedge/src/client/components/Forms/VmTemplate/CreateForm/Steps/ExtraConfiguration/booting/bootSchema.js @@ -100,6 +100,7 @@ export const KERNEL_CMD = { .notRequired() .default(() => undefined), fieldProps: { placeholder: 'ro console=tty1' }, + grid: { md: 12 }, } /** @type {Field} Path bootloader field */ @@ -157,7 +158,7 @@ export const FIRMWARE = { fieldProps: { freeSolo: true, }, - grid: { md: 12 }, + grid: { md: 8 }, } /** @type {Field} Firmware secure field */ @@ -167,7 +168,7 @@ export const FIRMWARE_SECURE = { notOnHypervisors: [lxc], type: INPUT_TYPES.CHECKBOX, validation: boolean().yesOrNo(), - grid: { md: 12 }, + grid: { md: 4 }, } /** @type {Field[]} List of Boot fields */ @@ -176,9 +177,9 @@ export const BOOT_FIELDS = [ SD_DISK_BUS, MACHINE_TYPES, ROOT_DEVICE, + FIRMWARE, + FIRMWARE_SECURE, KERNEL_CMD, BOOTLOADER, UUID, - FIRMWARE, - FIRMWARE_SECURE, ] diff --git a/src/fireedge/src/client/components/Forms/VmTemplate/CreateForm/Steps/ExtraConfiguration/booting/featuresSchema.js b/src/fireedge/src/client/components/Forms/VmTemplate/CreateForm/Steps/ExtraConfiguration/booting/featuresSchema.js index 2387466eb5..f443cdc3ac 100644 --- a/src/fireedge/src/client/components/Forms/VmTemplate/CreateForm/Steps/ExtraConfiguration/booting/featuresSchema.js +++ b/src/fireedge/src/client/components/Forms/VmTemplate/CreateForm/Steps/ExtraConfiguration/booting/featuresSchema.js @@ -13,7 +13,7 @@ * See the License for the specific language governing permissions and * * limitations under the License. * * ------------------------------------------------------------------------- */ -import { number, string } from 'yup' +import { number, string, boolean } from 'yup' import { HYPERVISORS, INPUT_TYPES, T } from 'client/constants' import { Field, OPTION_SORTERS, arrayToOptions } from 'client/utils' diff --git a/src/fireedge/src/client/components/Forms/VmTemplate/CreateForm/Steps/ExtraConfiguration/booting/index.js b/src/fireedge/src/client/components/Forms/VmTemplate/CreateForm/Steps/ExtraConfiguration/booting/index.js index f7386050cf..bec243e287 100644 --- a/src/fireedge/src/client/components/Forms/VmTemplate/CreateForm/Steps/ExtraConfiguration/booting/index.js +++ b/src/fireedge/src/client/components/Forms/VmTemplate/CreateForm/Steps/ExtraConfiguration/booting/index.js @@ -37,11 +37,13 @@ import { T } from 'client/constants' import { useGeneralApi } from 'client/features/General' import { useWatch, useFormContext } from 'react-hook-form' +import useStyles from 'client/components/Forms/VmTemplate/CreateForm/Steps/ExtraConfiguration/booting/styles' export const TAB_ID = 'OS' const Booting = ({ hypervisor, oneConfig, adminGroup, ...props }) => { const { setFieldPath } = useGeneralApi() + const classes = useStyles() useEffect(() => { setFieldPath(`extra.OsCpu`) }, []) @@ -61,15 +63,11 @@ const Booting = ({ hypervisor, oneConfig, adminGroup, ...props }) => { const nicsAlias = getValues(`${EXTRA_ID}.${NIC_ID[1]}`) return ( - + {(!!disks?.length || !!nics?.length || !!nicsAlias?.length) && ( @@ -81,7 +79,7 @@ const Booting = ({ hypervisor, oneConfig, adminGroup, ...props }) => { id={EXTRA_ID} saveState={true} cy={`${EXTRA_ID}-${id}`} - hiddenLegend={id === 'os-ramdisk' && !kernelWatch && !kernelDsWatch} + rootProps={{ className: classes[id] }} {...section} /> ))} diff --git a/src/fireedge/src/client/components/Forms/VmTemplate/CreateForm/Steps/ExtraConfiguration/booting/kernelSchema.js b/src/fireedge/src/client/components/Forms/VmTemplate/CreateForm/Steps/ExtraConfiguration/booting/kernelSchema.js index c5ab87cf73..ffb11d1327 100644 --- a/src/fireedge/src/client/components/Forms/VmTemplate/CreateForm/Steps/ExtraConfiguration/booting/kernelSchema.js +++ b/src/fireedge/src/client/components/Forms/VmTemplate/CreateForm/Steps/ExtraConfiguration/booting/kernelSchema.js @@ -46,6 +46,8 @@ export const KERNEL_PATH_ENABLED = { validation: boolean() .strip() .default(() => false), + + grid: { md: 4 }, } /** @type {Field} Kernel DS field */ @@ -84,6 +86,8 @@ export const KERNEL_DS = { form?.setValue(`extra.${KERNEL_DS_NAME}`, undefined) } }, + + grid: { md: 8 }, } /** @type {Field} Kernel path field */ @@ -104,6 +108,7 @@ export const KERNEL = { form?.setValue(`extra.${KERNEL_NAME}`, '') } }, + grid: { md: 8 }, } /** @type {Field[]} List of Kernel fields */ diff --git a/src/fireedge/src/client/components/Forms/VmTemplate/CreateForm/Steps/ExtraConfiguration/booting/ramdiskSchema.js b/src/fireedge/src/client/components/Forms/VmTemplate/CreateForm/Steps/ExtraConfiguration/booting/ramdiskSchema.js index 59317c14bc..513de03397 100644 --- a/src/fireedge/src/client/components/Forms/VmTemplate/CreateForm/Steps/ExtraConfiguration/booting/ramdiskSchema.js +++ b/src/fireedge/src/client/components/Forms/VmTemplate/CreateForm/Steps/ExtraConfiguration/booting/ramdiskSchema.js @@ -43,7 +43,6 @@ export const RAMDISK_PATH_ENABLED = { notOnHypervisors: [lxc], type: INPUT_TYPES.SWITCH, dependOf: [`$extra.${KERNEL_DS_NAME}`, `$extra.${KERNEL_NAME}`], - htmlType: ([ds, path] = []) => !(ds || path) && INPUT_TYPES.HIDDEN, fieldProps: (_, form) => { const ds = form?.getValues(`extra.${KERNEL_DS_NAME}`) const path = form?.getValues(`extra.${KERNEL_NAME}`) @@ -58,6 +57,8 @@ export const RAMDISK_PATH_ENABLED = { validation: boolean() .strip() .default(() => false), + + grid: { md: 4 }, } /** @type {Field} Ramdisk DS field */ @@ -72,8 +73,7 @@ export const RAMDISK_DS = { `$extra.${KERNEL_NAME}`, `$extra.${KERNEL_PATH_ENABLED_NAME}`, ], - htmlType: ([enabled = false, ds, path] = []) => - (enabled || !(ds || path)) && INPUT_TYPES.HIDDEN, + htmlType: ([enabled = false] = []) => enabled && INPUT_TYPES.HIDDEN, fieldProps: (_, form) => { const ds = form?.getValues(`extra.${KERNEL_DS_NAME}`) const path = form?.getValues(`extra.${KERNEL_NAME}`) @@ -113,6 +113,8 @@ export const RAMDISK_DS = { form?.setValue(`extra.${RAMDISK_DS_NAME}`, undefined) } }, + + grid: { md: 8 }, } /** @type {Field} Ramdisk path field */ @@ -143,9 +145,9 @@ export const RAMDISK = { return ds || path ? {} : { disabled: true } }, - htmlType: ([enabled = false, ds, path] = []) => - (!enabled || !(ds || path)) && INPUT_TYPES.HIDDEN, + htmlType: ([enabled = false] = []) => !enabled && INPUT_TYPES.HIDDEN, validation: ramdiskValidation, + grid: { md: 8 }, } /** @type {Field[]} List of Ramdisk fields */ diff --git a/src/fireedge/src/client/components/Forms/VmTemplate/CreateForm/Steps/ExtraConfiguration/booting/schema.js b/src/fireedge/src/client/components/Forms/VmTemplate/CreateForm/Steps/ExtraConfiguration/booting/schema.js index 50cd393223..1d05aeab6f 100644 --- a/src/fireedge/src/client/components/Forms/VmTemplate/CreateForm/Steps/ExtraConfiguration/booting/schema.js +++ b/src/fireedge/src/client/components/Forms/VmTemplate/CreateForm/Steps/ExtraConfiguration/booting/schema.js @@ -49,19 +49,9 @@ const SECTIONS = (hypervisor, oneConfig, adminGroup) => [ adminGroup ), }, - { - id: 'os-features', - legend: T.Features, - fields: disableFields( - filterFieldsByHypervisor(FEATURES_FIELDS, hypervisor), - 'OS', - oneConfig, - adminGroup - ), - }, { id: 'os-kernel', - legend: T.Kernel, + legend: `${T.Kernel}`, fields: disableFields( filterFieldsByHypervisor(KERNEL_FIELDS, hypervisor), 'OS', @@ -71,7 +61,7 @@ const SECTIONS = (hypervisor, oneConfig, adminGroup) => [ }, { id: 'os-ramdisk', - legend: T.Ramdisk, + legend: `${T.Ramdisk}`, fields: disableFields( filterFieldsByHypervisor(RAMDISK_FIELDS, hypervisor), 'OS', @@ -79,6 +69,16 @@ const SECTIONS = (hypervisor, oneConfig, adminGroup) => [ adminGroup ), }, + { + id: 'os-features', + legend: T.Features, + fields: disableFields( + filterFieldsByHypervisor(FEATURES_FIELDS, hypervisor), + 'OS', + oneConfig, + adminGroup + ), + }, { id: 'os-boot', legend: T.Boot, diff --git a/src/fireedge/src/client/components/Forms/VmTemplate/CreateForm/Steps/ExtraConfiguration/booting/styles.js b/src/fireedge/src/client/components/Forms/VmTemplate/CreateForm/Steps/ExtraConfiguration/booting/styles.js new file mode 100644 index 0000000000..a076ca537b --- /dev/null +++ b/src/fireedge/src/client/components/Forms/VmTemplate/CreateForm/Steps/ExtraConfiguration/booting/styles.js @@ -0,0 +1,47 @@ +/* ------------------------------------------------------------------------- * + * Copyright 2002-2024, OpenNebula Project, OpenNebula Systems * + * * + * Licensed under the Apache License, Version 2.0 (the "License"); you may * + * not use this file except in compliance with the License. You may obtain * + * a copy of the License at * + * * + * http://www.apache.org/licenses/LICENSE-2.0 * + * * + * Unless required by applicable law or agreed to in writing, software * + * distributed under the License is distributed on an "AS IS" BASIS, * + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * + * See the License for the specific language governing permissions and * + * limitations under the License. * + * ------------------------------------------------------------------------- */ +import makeStyles from '@mui/styles/makeStyles' + +const useStyles = makeStyles((theme) => ({ + root: { + display: 'grid', + gridTemplateColumns: '1fr 1fr', + gridTemplateRows: 'auto', + gap: theme.spacing(1), + overflow: 'auto', + [theme.breakpoints.down('sm')]: { + gridTemplateColumns: '1fr', + }, + }, + 'os-cpu-model': { + gridColumn: '1 / span 2', + // gridRow: '1', + padding: theme.spacing(1), + [theme.breakpoints.down('sm')]: { + gridColumn: '1 / -1', + }, + }, + 'os-raw': { + gridColumn: '1 / span 2', + // gridRow: '1', + padding: theme.spacing(1), + [theme.breakpoints.down('sm')]: { + gridColumn: '1 / -1', + }, + }, +})) + +export default useStyles diff --git a/src/fireedge/src/client/constants/translates.js b/src/fireedge/src/client/constants/translates.js index 482786f3c3..649e250896 100644 --- a/src/fireedge/src/client/constants/translates.js +++ b/src/fireedge/src/client/constants/translates.js @@ -1256,7 +1256,7 @@ module.exports = { FirmwareSecure: 'Firmware secure', CpuModel: 'CPU Model', CpuFeature: 'CPU Features', - CustomPath: 'Customize with path', + CustomPath: 'Custom path', /* VM Template schema - OS & CPU - kernel */ Kernel: 'Kernel', KernelExpression: 'Kernel expression',