diff --git a/src/fireedge/src/client/components/Forms/ServiceTemplate/CreateForm/Steps/Extra/networking/schema.js b/src/fireedge/src/client/components/Forms/ServiceTemplate/CreateForm/Steps/Extra/networking/schema.js index 0ab736dc04c..13e1c00a599 100644 --- a/src/fireedge/src/client/components/Forms/ServiceTemplate/CreateForm/Steps/Extra/networking/schema.js +++ b/src/fireedge/src/client/components/Forms/ServiceTemplate/CreateForm/Steps/Extra/networking/schema.js @@ -36,7 +36,7 @@ const NETWORK_TYPE = { .trim() .oneOf([...Object.keys(NETWORK_TYPES), ...Object.values(NETWORK_TYPES)]) .default(() => Object.values(NETWORK_TYPES)[0]), - grid: { sm: 1.5, md: 1.5 }, + grid: { md: 2 }, } // Network Name Field @@ -45,7 +45,7 @@ const NAME = { label: 'Name', type: INPUT_TYPES.TEXT, validation: string().trim().required(), - grid: { sm: 2.5, md: 2.5 }, + grid: { md: 2.5 }, } // Network Description Field @@ -57,7 +57,7 @@ const DESCRIPTION = { .trim() .notRequired() .default(() => undefined), - grid: { sm: 2.5, md: 2.5 }, + grid: { md: 2.5 }, } // Network Selection Field (for 'reserve' or 'existing') @@ -93,7 +93,7 @@ const NETEXTRA = { then: string().strip(), otherwise: string().notRequired(), }), - grid: { sm: 2.5, md: 2.5 }, + grid: { md: 2.5 }, } // List of Network Input Fields diff --git a/src/fireedge/src/client/components/Forms/ServiceTemplate/CreateForm/Steps/RoleConfig/MinMaxVms/index.js b/src/fireedge/src/client/components/Forms/ServiceTemplate/CreateForm/Steps/RoleConfig/MinMaxVms/index.js index c37f9bfbc55..b3693105147 100644 --- a/src/fireedge/src/client/components/Forms/ServiceTemplate/CreateForm/Steps/RoleConfig/MinMaxVms/index.js +++ b/src/fireedge/src/client/components/Forms/ServiceTemplate/CreateForm/Steps/RoleConfig/MinMaxVms/index.js @@ -18,8 +18,9 @@ import { Component, useMemo, useEffect } from 'react' import { Box, FormControl } from '@mui/material' import { createMinMaxVmsFields } from 'client/components/Forms/ServiceTemplate/CreateForm/Steps/RoleConfig/MinMaxVms/schema' import { FormWithSchema } from 'client/components/Forms' -import { useFieldArray, useFormContext } from 'react-hook-form' +import { useFieldArray, useFormContext, useWatch } from 'react-hook-form' import { STEP_ID as ROLE_DEFINITION_ID } from 'client/components/Forms/ServiceTemplate/CreateForm/Steps/Roles' +import { STEP_ID as ROLE_CONFIG_ID } from 'client/components/Forms/ServiceTemplate/CreateForm/Steps/RoleConfig' export const SECTION_ID = 'MINMAXVMS' /** @@ -29,17 +30,32 @@ export const SECTION_ID = 'MINMAXVMS' * @returns {Component} - component */ const MinMaxVms = ({ stepId, selectedRoleIndex }) => { - const { control, setValue, getValues } = useFormContext() - const cardinality = useMemo( - () => - getValues(ROLE_DEFINITION_ID)?.[selectedRoleIndex]?.CARDINALITY ?? - undefined, - [selectedRoleIndex] - ) + const { control, setValue, getValues, setError, clearErrors } = + useFormContext() + + const watchedActiveField = useWatch({ + control, + name: `${stepId}.${SECTION_ID}.${selectedRoleIndex}`, + }) + + const cardinality = useMemo(() => { + const baseCardinality = + getValues(ROLE_DEFINITION_ID)?.[selectedRoleIndex]?.CARDINALITY + const minVms = + getValues(ROLE_CONFIG_ID)?.[SECTION_ID]?.[selectedRoleIndex]?.min_vms + + const maxVms = + getValues(ROLE_CONFIG_ID)?.[SECTION_ID]?.[selectedRoleIndex]?.max_vms + + return { + min_vms: minVms, + max_vms: maxVms, + default: baseCardinality, + } + }, [selectedRoleIndex]) const fields = createMinMaxVmsFields( - `${stepId}.${SECTION_ID}.${selectedRoleIndex}`, - cardinality + `${stepId}.${SECTION_ID}.${selectedRoleIndex}` ) useFieldArray({ @@ -51,13 +67,37 @@ const MinMaxVms = ({ stepId, selectedRoleIndex }) => { return null } + useEffect(() => { + const validateFields = (activeFields) => { + const { min_vms: minVms, max_vms: maxVms } = activeFields + if (maxVms < minVms) { + ;['min_vms', 'max_vms'].forEach((field) => { + setError(`${stepId}.${SECTION_ID}.${selectedRoleIndex}.${field}`, { + type: 'manual', + message: `Min/Max validation error`, + }) + }) + } else if (maxVms >= minVms) { + ;['min_vms', 'max_vms'].forEach((field) => { + clearErrors(`${stepId}.${SECTION_ID}.${selectedRoleIndex}.${field}`) + }) + } + } + + watchedActiveField && validateFields(watchedActiveField) + }, [watchedActiveField]) + // Set default values useEffect(() => { fields.forEach((field) => { - const defaultValue = field.validation.default() - setValue(field.name, defaultValue || 0) + setValue( + field.name, + cardinality?.[field?.name?.split('.')?.at(-1)] ?? + cardinality?.default ?? + 0 + ) }) - }, [fields]) + }, [cardinality]) return ( diff --git a/src/fireedge/src/client/components/Forms/ServiceTemplate/CreateForm/Steps/RoleConfig/MinMaxVms/schema.js b/src/fireedge/src/client/components/Forms/ServiceTemplate/CreateForm/Steps/RoleConfig/MinMaxVms/schema.js index f74c61bb112..6fa719dbecf 100644 --- a/src/fireedge/src/client/components/Forms/ServiceTemplate/CreateForm/Steps/RoleConfig/MinMaxVms/schema.js +++ b/src/fireedge/src/client/components/Forms/ServiceTemplate/CreateForm/Steps/RoleConfig/MinMaxVms/schema.js @@ -24,10 +24,9 @@ const MAX_VALUE = 999999 * Creates fields for minmax vms schema based on a path prefix. * * @param {string} pathPrefix - Path prefix for field names. - * @param { number } cardinality - Number of VMs defined in Role Def. step. * @returns {object[]} - Array of field definitions for minmax vms. */ -export const createMinMaxVmsFields = (pathPrefix, cardinality) => { +export const createMinMaxVmsFields = (pathPrefix) => { const getPath = (fieldName) => pathPrefix ? `${pathPrefix}.${fieldName}` : fieldName @@ -39,11 +38,7 @@ export const createMinMaxVmsFields = (pathPrefix, cardinality) => { cy: 'elasticity', validation: number() .integer('Min VMs must be an integer') - .min( - cardinality, - `Min VMs cannot be less than defined cardinality: ${cardinality}` - ) - .default(() => cardinality), + .default(() => undefined), fieldProps: { type: 'number', }, @@ -56,9 +51,8 @@ export const createMinMaxVmsFields = (pathPrefix, cardinality) => { cy: 'elasticity', validation: number() .integer('Max VMs must be an integer') - .min(cardinality, `Max VMs cannot be less than ${cardinality}`) .max(MAX_VALUE, `Max VMs cannot exceed ${MAX_VALUE}`) - .default(() => cardinality), + .default(() => undefined), fieldProps: { type: 'number', }, @@ -73,7 +67,7 @@ export const createMinMaxVmsFields = (pathPrefix, cardinality) => { .integer('Cooldown must be an integer') .min(0, 'Cooldown cannot be less than 0') .max(MAX_VALUE, `Cooldown exceed ${MAX_VALUE}`) - .default(() => 0), + .default(() => undefined), fieldProps: { type: 'number', }, @@ -86,11 +80,10 @@ export const createMinMaxVmsFields = (pathPrefix, cardinality) => { * Creates a Yup schema for minmax vms based on a given path prefix. * * @param {string} pathPrefix - Path prefix for field names in the schema. - * @param { number } cardinality - Number of VMs defined in Role Def. step. * @returns {object} - Yup schema object for minmax vms. */ -export const createMinMaxVmsSchema = (pathPrefix, cardinality = 0) => { - const fields = createMinMaxVmsFields(pathPrefix, cardinality) +export const createMinMaxVmsSchema = (pathPrefix) => { + const fields = createMinMaxVmsFields(pathPrefix) return object(getValidationFromFields(fields)) } diff --git a/src/fireedge/src/client/components/Forms/ServiceTemplate/CreateForm/Steps/Roles/roleSummary.js b/src/fireedge/src/client/components/Forms/ServiceTemplate/CreateForm/Steps/Roles/roleSummary.js index bdd0889a641..8c5583b255f 100644 --- a/src/fireedge/src/client/components/Forms/ServiceTemplate/CreateForm/Steps/Roles/roleSummary.js +++ b/src/fireedge/src/client/components/Forms/ServiceTemplate/CreateForm/Steps/Roles/roleSummary.js @@ -13,13 +13,7 @@ * See the License for the specific language governing permissions and * * limitations under the License. * * ------------------------------------------------------------------------- */ -import { - Card, - CardContent, - CardActions, - Typography, - Divider, -} from '@mui/material' +import { Card, CardContent, Typography, Divider } from '@mui/material' import PropTypes from 'prop-types' import { T } from 'client/constants' import { Tr } from 'client/components/HOC' @@ -166,20 +160,6 @@ const RoleSummary = ({ role, selectedRoleIndex }) => ( ' ' + Tr(T.RoleAdjustmentTypePositiveNegative)} - - - {Tr(T.VMGroupConfiguration)}: -
    -
  • {Tr(T.RoleDefineRoles)}
    • -
  • {Tr(T.RoleOptimize)}
    • -
  • {Tr(T.RoleManageApps)}
    • -
- - ) diff --git a/src/fireedge/src/client/components/Forms/ServiceTemplate/CreateForm/Steps/Roles/rolesPanel.js b/src/fireedge/src/client/components/Forms/ServiceTemplate/CreateForm/Steps/Roles/rolesPanel.js index bb450b8864f..cc452b75cf6 100644 --- a/src/fireedge/src/client/components/Forms/ServiceTemplate/CreateForm/Steps/Roles/rolesPanel.js +++ b/src/fireedge/src/client/components/Forms/ServiceTemplate/CreateForm/Steps/Roles/rolesPanel.js @@ -43,6 +43,8 @@ const RoleVmVmPanel = ({ roles, onChange, selectedRoleIndex }) => { onChange({ ...roles[selectedRoleIndex], [name]: value }) // updated role } + const isDisabled = !roles?.[selectedRoleIndex] || roles?.length <= 0 + return ( @@ -53,7 +55,7 @@ const RoleVmVmPanel = ({ roles, onChange, selectedRoleIndex }) => { name="NAME" value={roles?.[selectedRoleIndex]?.NAME ?? ''} onChange={handleInputChange} - disabled={!roles?.[selectedRoleIndex]} + disabled={isDisabled} inputProps={{ 'data-cy': `role-name-${selectedRoleIndex}` }} fullWidth /> @@ -63,8 +65,9 @@ const RoleVmVmPanel = ({ roles, onChange, selectedRoleIndex }) => { 1), + .default(() => 0), } const SELECTED_VM_TEMPLATE_ID_FIELD = { diff --git a/src/fireedge/src/client/components/Forms/ServiceTemplate/CreateForm/Steps/Roles/vmTemplatesPanel.js b/src/fireedge/src/client/components/Forms/ServiceTemplate/CreateForm/Steps/Roles/vmTemplatesPanel.js index 70188f61746..34b199189f8 100644 --- a/src/fireedge/src/client/components/Forms/ServiceTemplate/CreateForm/Steps/Roles/vmTemplatesPanel.js +++ b/src/fireedge/src/client/components/Forms/ServiceTemplate/CreateForm/Steps/Roles/vmTemplatesPanel.js @@ -79,6 +79,8 @@ const VmTemplatesPanel = ({ roles, selectedRoleIndex, onChange }) => { setPage(0) } + const isDisabled = !roles?.[selectedRoleIndex] || roles?.length <= 0 + return ( { p: 2, borderRadius: 2, maxHeight: '40%', + pointerEvents: isDisabled ? 'none' : 'auto', + opacity: isDisabled ? '50%' : '100%', }} >