Merge pull request kubevirt-ui#2183 from pcbailey/bug-template-cpu-me…

…mory-resources-double-unexpectedly CNV-41496: Change template details CPU/memory modal to new design
metalice · Sep 18, 2024 · 144451b · 144451b
2 parents 5df63b2 + 73b615c
commit 144451b
Show file tree

Hide file tree

Showing 7 changed files with 188 additions and 153 deletions.
diff --git a/src/utils/components/CPUMemoryModal/CPUMemoryModal.tsx b/src/utils/components/CPUMemoryModal/CPUMemoryModal.tsx
@@ -42,6 +42,15 @@ const CPUMemoryModal: FC<CPUMemoryModalProps> = ({
   vm,
 }) => {
   const { t } = useKubevirtTranslation();
+
+  const [updateInProcess, setUpdateInProcess] = useState<boolean>(false);
+  const [updateError, setUpdateError] = useState<string>();
+
+  const { size, unit } = getMemorySize(getMemory(vm));
+  const [memory, setMemory] = useState<number>(size || undefined);
+  const [memoryUnit, setMemoryUnit] = useState<string>(unit || undefined);
+  const [cpu, setCPU] = useState<V1CPU>(getCPU(vm));
+
   const {
     data: templateDefaultsData,
     error: defaultLoadError,
@@ -50,13 +59,8 @@ const CPUMemoryModal: FC<CPUMemoryModalProps> = ({
     vm?.metadata?.labels?.['vm.kubevirt.io/template'],
     vm?.metadata?.labels?.['vm.kubevirt.io/template.namespace'] || templateNamespace,
   );
-  const [updateInProcess, setUpdateInProcess] = useState<boolean>(false);
-  const [updateError, setUpdateError] = useState<string>();
-
-  const { size, unit } = getMemorySize(getMemory(vm));
-  const [memory, setMemory] = useState<number>(size || undefined);
-  const [memoryUnit, setMemoryUnit] = useState<string>(unit || undefined);
-  const [cpu, setCPU] = useState<V1CPU>(getCPU(vm));
+  const { defaultCpu, defaultMemory } = templateDefaultsData || {};
+  const { size: defaultMemorySize, unit: defaultMemoryUnit } = defaultMemory || {};
 
   const templateName = getLabel(vm, VM_TEMPLATE_ANNOTATION);
 
@@ -99,16 +103,12 @@ const CPUMemoryModal: FC<CPUMemoryModalProps> = ({
         </Button>,
         <Button
           isDisabled={
-            !templateName ||
-            !defaultsLoaded ||
-            !templateDefaultsData?.defaultCpu ||
-            !templateDefaultsData?.defaultMemory ||
-            defaultLoadError
+            !templateName || !defaultsLoaded || !defaultCpu || !defaultMemory || defaultLoadError
           }
           onClick={() => {
-            setCPU(templateDefaultsData?.defaultCpu);
-            setMemory(templateDefaultsData?.defaultMemory?.size);
-            setMemoryUnit(templateDefaultsData?.defaultMemory?.unit);
+            setCPU(defaultCpu);
+            setMemory(defaultMemorySize);
+            setMemoryUnit(defaultMemoryUnit);
           }}
           isLoading={templateName && !defaultsLoaded}
           key="default"
@@ -138,7 +138,7 @@ const CPUMemoryModal: FC<CPUMemoryModalProps> = ({
         variant={AlertVariant.info}
       />
       <div className="inputs">
-        <CPUInput cpu={cpu} setCPU={setCPU} />
+        <CPUInput currentCPU={getCPU(vm)} setUserEnteredCPU={setCPU} userEnteredCPU={cpu} />
         <MemoryInput
           memory={memory}
           memoryUnit={memoryUnit}

diff --git a/src/utils/components/CPUMemoryModal/components/CPUInput/CPUInput.tsx b/src/utils/components/CPUMemoryModal/components/CPUInput/CPUInput.tsx
@@ -17,11 +17,12 @@ import CPUHelperText from './components/vCPUInput/components/CPUHelperText/CPUHe
 import './CPUInput.scss';
 
 type CPUInputProps = {
-  cpu: V1CPU;
-  setCPU: Dispatch<SetStateAction<V1CPU>>;
+  currentCPU: V1CPU;
+  setUserEnteredCPU: Dispatch<SetStateAction<V1CPU>>;
+  userEnteredCPU: V1CPU;
 };
 
-const CPUInput: FC<CPUInputProps> = ({ cpu, setCPU }) => {
+const CPUInput: FC<CPUInputProps> = ({ currentCPU, setUserEnteredCPU, userEnteredCPU }) => {
   const { t } = useKubevirtTranslation();
   const [selectedRadioOption, setSelectedRadioOption] = useState<CPUInputType>(
     CPUInputType.editVCPU,
@@ -50,9 +51,9 @@ const CPUInput: FC<CPUInputProps> = ({ cpu, setCPU }) => {
       <Radio
         body={
           <VCPUInput
-            cpu={formatVCPUsAsSockets(cpu)}
+            cpu={formatVCPUsAsSockets(userEnteredCPU)}
             isDisabled={selectedRadioOption !== CPUInputType.editVCPU}
-            setCPU={setCPU}
+            setCPU={setUserEnteredCPU}
           />
         }
         onClick={() => {
@@ -63,14 +64,17 @@ const CPUInput: FC<CPUInputProps> = ({ cpu, setCPU }) => {
         isLabelWrapped
         name={radioInputName}
       />
-      <CPUHelperText hide={cpu?.sockets === convertTopologyToVCPUs(cpu)} sockets={cpu?.sockets} />
+      <CPUHelperText
+        cpu={userEnteredCPU}
+        hide={userEnteredCPU?.sockets === convertTopologyToVCPUs(currentCPU)}
+      />
       <Radio
         body={
           <CPUTopologyInput
-            cpu={cpu}
+            cpu={userEnteredCPU}
             hide={selectedRadioOption !== CPUInputType.editTopologyManually}
             isDisabled={selectedRadioOption !== CPUInputType.editTopologyManually}
-            setCPU={setCPU}
+            setCPU={setUserEnteredCPU}
           />
         }
         onClick={() => {

diff --git a/...Modal/components/CPUInput/components/vCPUInput/components/CPUHelperText/CPUHelperText.tsx b/...Modal/components/CPUInput/components/vCPUInput/components/CPUHelperText/CPUHelperText.tsx
@@ -1,22 +1,26 @@
 import React, { FC } from 'react';
 
+import { V1CPU } from '@kubevirt-ui/kubevirt-api/kubevirt';
+import { formatVCPUsAsSockets } from '@kubevirt-utils/components/CPUMemoryModal/components/CPUInput/utils/utils';
 import { useKubevirtTranslation } from '@kubevirt-utils/hooks/useKubevirtTranslation';
 
 import './CPUHelperText.scss';
 
 type CPUHelperTextProps = {
+  cpu: V1CPU;
   hide: boolean;
-  sockets: number;
 };
 
-const CPUHelperText: FC<CPUHelperTextProps> = ({ hide, sockets }) => {
+const CPUHelperText: FC<CPUHelperTextProps> = ({ cpu, hide }) => {
   const { t } = useKubevirtTranslation();
 
   if (hide) return null;
 
   return (
     <div id="cpu-helper-text">
-      {t('Topology will be set to {{sockets}} socket, 1 core, 1 thread', { sockets: sockets })}
+      {t('Topology will be set to {{sockets}} socket, 1 core, 1 thread', {
+        sockets: formatVCPUsAsSockets(cpu)?.sockets,
+      })}
     </div>
   );
 };

diff --git a/src/views/templates/details/tabs/details/components/CPUMemory.tsx b/src/views/templates/details/tabs/details/components/CPUMemory.tsx
@@ -10,7 +10,7 @@ import { TemplateModel, V1Template } from '@kubevirt-utils/models';
 import { getTemplateVirtualMachineCPU } from '@kubevirt-utils/resources/template';
 import { k8sUpdate } from '@openshift-console/dynamic-plugin-sdk';
 
-import CPUMemoryModal from './CPUMemoryModal';
+import CPUMemoryModal from './CPUMemoryModal/CPUMemoryModal';
 
 type CPUMemoryProps = {
   editable: boolean;

diff --git a/src/views/templates/details/tabs/details/components/CPUMemoryModal.tsx b/src/views/templates/details/tabs/details/components/CPUMemoryModal.tsx