diff --git a/src/fireedge/src/client/components/Forms/VmTemplate/CreateForm/Steps/General/capacitySchema.js b/src/fireedge/src/client/components/Forms/VmTemplate/CreateForm/Steps/General/capacitySchema.js index 593e8bf79e..ca9708ffb1 100644 --- a/src/fireedge/src/client/components/Forms/VmTemplate/CreateForm/Steps/General/capacitySchema.js +++ b/src/fireedge/src/client/components/Forms/VmTemplate/CreateForm/Steps/General/capacitySchema.js @@ -40,6 +40,7 @@ export const MEMORY = generateCapacityInput({ label: T.Memory, tooltip: T.MemoryConcept, validation: commonValidation + .integer() .required() .when('HYPERVISOR', (hypervisor, schema) => hypervisor === HYPERVISORS.vcenter ? schema.isDivisibleBy(4) : schema diff --git a/src/fireedge/src/client/components/Tabs/Vm/Capacity/information.js b/src/fireedge/src/client/components/Tabs/Vm/Capacity/information.js index 1fe7bfbb7a..1849fe1148 100644 --- a/src/fireedge/src/client/components/Tabs/Vm/Capacity/information.js +++ b/src/fireedge/src/client/components/Tabs/Vm/Capacity/information.js @@ -13,27 +13,53 @@ * See the License for the specific language governing permissions and * * limitations under the License. * * ------------------------------------------------------------------------- */ -/* eslint-disable jsdoc/require-jsdoc */ +import { useMemo, ReactElement } from 'react' import PropTypes from 'prop-types' import { Typography } from '@mui/material' import ButtonToTriggerForm from 'client/components/Forms/ButtonToTriggerForm' import { ResizeCapacityForm } from 'client/components/Forms/Vm' -import { Tr } from 'client/components/HOC' +import { Tr, Translate } from 'client/components/HOC' import useCapacityTabStyles from 'client/components/Tabs/Vm/Capacity/styles' import { isVCenter } from 'client/models/VirtualMachine' +import { formatNumberByCurrency } from 'client/models/Helper' import { prettyBytes } from 'client/utils' -import { T, VM_ACTIONS } from 'client/constants' +import { T, VM_ACTIONS, VM } from 'client/constants' +/** + * Renders capacity information. + * + * @param {object} props - Props + * @param {string[]} props.actions - Actions tab + * @param {VM} props.vm - Virtual Machine id + * @param {string} props.handleResizeCapacity - Resize capacity + * @returns {ReactElement} Capacity information + */ const InformationPanel = ({ actions, vm = {}, handleResizeCapacity }) => { const classes = useCapacityTabStyles() const { TEMPLATE } = vm + const memory = TEMPLATE?.MEMORY + const memoryCost = useMemo(() => { + const cost = TEMPLATE?.MEMORY_COST || 0 + const monthCost = formatNumberByCurrency(memory * cost * 24 * 30) + + return + }, [memory, TEMPLATE?.MEMORY_COST]) + + const cpu = TEMPLATE?.CPU + const cpuCost = useMemo(() => { + const cost = TEMPLATE?.CPU_COST || 0 + const monthCost = formatNumberByCurrency(cpu * cost * 24 * 30) + + return + }, [cpu, TEMPLATE?.CPU_COST]) + const capacity = [ { name: T.PhysicalCpu, - value: TEMPLATE?.CPU, + value: cpu, dataCy: 'cpu', }, { @@ -53,17 +79,17 @@ const InformationPanel = ({ actions, vm = {}, handleResizeCapacity }) => { }, { name: T.Memory, - value: prettyBytes(+TEMPLATE?.MEMORY, 'MB'), + value: prettyBytes(+memory, 'MB'), dataCy: 'memory', }, { name: T.CostCpu, - value: TEMPLATE?.CPU_COST || 0, + value: cpuCost, dataCy: 'cpucost', }, { - name: T.CostMByte, - value: TEMPLATE?.MEMORY_COST || 0, + name: T.CostMemory, + value: memoryCost, dataCy: 'memorycost', }, ].filter(Boolean) diff --git a/src/fireedge/src/client/constants/translates.js b/src/fireedge/src/client/constants/translates.js index a746de01f9..c271303eb7 100644 --- a/src/fireedge/src/client/constants/translates.js +++ b/src/fireedge/src/client/constants/translates.js @@ -447,7 +447,7 @@ module.exports = { CostEachMonth: '%s / month', CostCpu: 'Cost / CPU', CostCpuConcept: 'Cost of each CPU per hour', - CostMByte: 'Cost / MByte', + CostMemory: 'Cost / Memory', CostMemoryConcept: 'Cost of each memory MB per hour', CostDiskConcept: 'Cost of each disk GB per hour', /* VM schema - storage */