From 73b615cec91a2830b9e26694e1133f8c6c90d180 Mon Sep 17 00:00:00 2001
From: Phillip Rhodes <pcbailey@users.noreply.github.com>
Date: Mon, 16 Sep 2024 09:01:39 -0400
Subject: [PATCH] Change template details CPU/memory modal to new design

---
 .../CPUMemoryModal/CPUMemoryModal.tsx         |  32 ++---
 .../components/CPUInput/CPUInput.tsx          |  20 +--
 .../CPUHelperText/CPUHelperText.tsx           |  10 +-
 .../tabs/details/components/CPUMemory.tsx     |   2 +-
 .../details/components/CPUMemoryModal.tsx     | 125 ----------------
 .../CPUMemoryModal/CPUMemoryModal.tsx         | 133 ++++++++++++++++++
 .../components/CPUMemoryModal/utils.ts        |  19 +++
 7 files changed, 188 insertions(+), 153 deletions(-)
 delete mode 100644 src/views/templates/details/tabs/details/components/CPUMemoryModal.tsx
 create mode 100644 src/views/templates/details/tabs/details/components/CPUMemoryModal/CPUMemoryModal.tsx
 create mode 100644 src/views/templates/details/tabs/details/components/CPUMemoryModal/utils.ts

diff --git a/src/utils/components/CPUMemoryModal/CPUMemoryModal.tsx b/src/utils/components/CPUMemoryModal/CPUMemoryModal.tsx
index 5b7ddc958..61bc872fc 100644
--- 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
index 8225e2d09..cf9f3ecf9 100644
--- 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/src/utils/components/CPUMemoryModal/components/CPUInput/components/vCPUInput/components/CPUHelperText/CPUHelperText.tsx b/src/utils/components/CPUMemoryModal/components/CPUInput/components/vCPUInput/components/CPUHelperText/CPUHelperText.tsx
index 0d59b991c..714dc8523 100644
--- a/src/utils/components/CPUMemoryModal/components/CPUInput/components/vCPUInput/components/CPUHelperText/CPUHelperText.tsx
+++ b/src/utils/components/CPUMemoryModal/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
index 9d94e63bc..6c4eece90 100644
--- 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
deleted file mode 100644
index f969752c1..000000000
--- a/src/views/templates/details/tabs/details/components/CPUMemoryModal.tsx
+++ /dev/null
@@ -1,125 +0,0 @@
-import React, { ChangeEvent, FC, MouseEvent, useEffect, useMemo, useState } from 'react';
-import produce from 'immer';
-
-import { V1Template } from '@kubevirt-ui/kubevirt-api/console';
-import {
-  getMemorySize,
-  memorySizesTypes,
-} from '@kubevirt-utils/components/CPUMemoryModal/utils/CpuMemoryUtils';
-import FormPFSelect from '@kubevirt-utils/components/FormPFSelect/FormPFSelect';
-import TabModal from '@kubevirt-utils/components/TabModal/TabModal';
-import { useKubevirtTranslation } from '@kubevirt-utils/hooks/useKubevirtTranslation';
-import { getTemplateVirtualMachineObject } from '@kubevirt-utils/resources/template';
-import { getCPUCores, getMemory } from '@kubevirt-utils/resources/vm';
-import { toIECUnit } from '@kubevirt-utils/utils/units';
-import { ensurePath } from '@kubevirt-utils/utils/utils';
-import { NumberInput, SelectOption, Title, TitleSizes } from '@patternfly/react-core';
-
-import useEditTemplateAccessReview from '../../../hooks/useIsTemplateEditable';
-
-type CPUMemoryModalProps = {
-  isOpen: boolean;
-  onClose: () => void;
-  onSubmit: (updatedVMTemplate: V1Template) => Promise<V1Template | void>;
-  template: V1Template;
-};
-
-const CPUMemoryModal: FC<CPUMemoryModalProps> = ({ isOpen, onClose, onSubmit, template }) => {
-  const { t } = useKubevirtTranslation();
-  const vm = getTemplateVirtualMachineObject(template);
-
-  const { isTemplateEditable } = useEditTemplateAccessReview(template);
-
-  const [memory, setMemory] = useState<number>();
-  const [cpuCores, setCpuCores] = useState<number>();
-  const [memoryUnit, setMemoryUnit] = useState<string>();
-
-  const updatedTemplate = useMemo(
-    () =>
-      produce<V1Template>(template, (templateDraft: V1Template) => {
-        const draftVM = getTemplateVirtualMachineObject(templateDraft);
-
-        ensurePath(draftVM, [
-          'spec.template.spec.domain.cpu',
-          'spec.template.spec.domain.memory.guest',
-        ]);
-
-        draftVM.spec.template.spec.domain.cpu.cores = cpuCores;
-        draftVM.spec.template.spec.domain.memory.guest = `${memory}${memoryUnit}`;
-      }),
-    [memory, cpuCores, memoryUnit, template],
-  );
-
-  useEffect(() => {
-    if (vm?.metadata) {
-      const { size, unit } = getMemorySize(getMemory(vm));
-      setMemoryUnit(unit);
-      setMemory(size);
-      setCpuCores(getCPUCores(vm));
-    }
-  }, [vm]);
-
-  return (
-    <TabModal
-      headerText={t('Edit CPU | Memory')}
-      isOpen={isOpen}
-      obj={updatedTemplate}
-      onClose={onClose}
-      onSubmit={onSubmit}
-    >
-      <div className="inputs">
-        <div className="input-cpu">
-          <Title headingLevel="h6" size={TitleSizes.md}>
-            {t('CPUs')}
-          </Title>
-          <NumberInput
-            onChange={(e: ChangeEvent<HTMLInputElement>) => {
-              const newNumber = +e?.target?.value;
-              setCpuCores((cpus) => (newNumber > 0 ? newNumber : cpus));
-            }}
-            inputName="cpu-input"
-            isDisabled={!isTemplateEditable}
-            min={1}
-            onMinus={() => setCpuCores((cpus) => +cpus - 1)}
-            onPlus={() => setCpuCores((cpus) => +cpus + 1)}
-            value={cpuCores}
-          />
-        </div>
-        <div className="input-memory">
-          <Title headingLevel="h6" size={TitleSizes.md}>
-            {t('Memory')}
-          </Title>
-          <NumberInput
-            onChange={(e: ChangeEvent<HTMLInputElement>) => {
-              const newNumber = +e?.target?.value;
-              setMemory((mem) => (newNumber > 0 ? newNumber : mem));
-            }}
-            inputName="memory-input"
-            isDisabled={!isTemplateEditable}
-            min={1}
-            onMinus={() => setMemory((mem) => +mem - 1)}
-            onPlus={() => setMemory((mem) => +mem + 1)}
-            value={memory}
-          />
-          <FormPFSelect
-            onSelect={(e: MouseEvent<HTMLInputElement>, value: string) => setMemoryUnit(value)}
-            selected={memoryUnit}
-            selectedLabel={toIECUnit(memoryUnit)}
-            toggleProps={{ className: 'input-memory--dropdown' }}
-          >
-            {memorySizesTypes.map((value) => {
-              const iecUnit = toIECUnit(value);
-              return (
-                <SelectOption key={value} value={value}>
-                  {iecUnit}
-                </SelectOption>
-              );
-            })}
-          </FormPFSelect>
-        </div>
-      </div>
-    </TabModal>
-  );
-};
-
-export default CPUMemoryModal;
diff --git a/src/views/templates/details/tabs/details/components/CPUMemoryModal/CPUMemoryModal.tsx b/src/views/templates/details/tabs/details/components/CPUMemoryModal/CPUMemoryModal.tsx
new file mode 100644
index 000000000..2455a136d
--- /dev/null
+++ b/src/views/templates/details/tabs/details/components/CPUMemoryModal/CPUMemoryModal.tsx
@@ -0,0 +1,133 @@
+import React, { FC, useEffect, useState } from 'react';
+import produce from 'immer';
+
+import { V1Template } from '@kubevirt-ui/kubevirt-api/console';
+import { V1CPU } from '@kubevirt-ui/kubevirt-api/kubevirt';
+import CPUInput from '@kubevirt-utils/components/CPUMemoryModal/components/CPUInput/CPUInput';
+import MemoryInput from '@kubevirt-utils/components/CPUMemoryModal/components/MemoryInput/MemoryInput';
+import { getMemorySize } from '@kubevirt-utils/components/CPUMemoryModal/utils/CpuMemoryUtils';
+import { useKubevirtTranslation } from '@kubevirt-utils/hooks/useKubevirtTranslation';
+import { getTemplateVirtualMachineObject } from '@kubevirt-utils/resources/template';
+import { getCPU, getMemory } from '@kubevirt-utils/resources/vm';
+import { ensurePath } from '@kubevirt-utils/utils/utils';
+import { Alert, Button, ButtonVariant, Modal, ModalVariant } from '@patternfly/react-core';
+
+import useEditTemplateAccessReview from '../../../../hooks/useIsTemplateEditable';
+
+import { getDefaultCPUMemoryValues } from './utils';
+
+import '@kubevirt-utils/components/CPUMemoryModal/cpu-memory-modal.scss';
+
+type CPUMemoryModalProps = {
+  isOpen: boolean;
+  onClose: () => void;
+  onSubmit: (updatedVMTemplate: V1Template) => Promise<V1Template | void>;
+  template: V1Template;
+};
+
+const CPUMemoryModal: FC<CPUMemoryModalProps> = ({ isOpen, onClose, onSubmit, template }) => {
+  const { t } = useKubevirtTranslation();
+  const vm = getTemplateVirtualMachineObject(template);
+
+  const { isTemplateEditable } = useEditTemplateAccessReview(template);
+
+  const [cpu, setCPU] = useState<V1CPU>(getCPU(vm));
+  const [memory, setMemory] = useState<number>();
+  const [memoryUnit, setMemoryUnit] = useState<string>();
+
+  const [updateInProcess, setUpdateInProcess] = useState<boolean>(false);
+  const [updateError, setUpdateError] = useState<string>();
+
+  const handleSubmit = async () => {
+    setUpdateInProcess(true);
+    setUpdateError(null);
+
+    const updatedTemplate = produce<V1Template>(template, (templateDraft: V1Template) => {
+      const draftVM = getTemplateVirtualMachineObject(templateDraft);
+
+      ensurePath(draftVM, [
+        'spec.template.spec.domain.cpu',
+        'spec.template.spec.domain.memory.guest',
+      ]);
+
+      draftVM.spec.template.spec.domain.cpu = cpu;
+      draftVM.spec.template.spec.domain.memory.guest = `${memory}${memoryUnit}`;
+    });
+
+    try {
+      await onSubmit(updatedTemplate);
+
+      setUpdateInProcess(false);
+      onClose();
+    } catch (error) {
+      setUpdateInProcess(false);
+      setUpdateError(error.message);
+    }
+  };
+
+  const { defaultCPU, defaultMemory } = getDefaultCPUMemoryValues(template);
+  const { defaultMemorySize, defaultMemoryUnit } = defaultMemory;
+
+  useEffect(() => {
+    if (vm?.metadata) {
+      const { size: memSize, unit: memUnit } = getMemorySize(getMemory(vm));
+      setMemoryUnit(memUnit);
+      setMemory(memSize);
+      setCPU(getCPU(vm));
+    }
+  }, [vm]);
+
+  return (
+    <Modal
+      actions={[
+        <Button
+          isDisabled={updateInProcess}
+          isLoading={updateInProcess}
+          key="confirm"
+          onClick={handleSubmit}
+          variant={ButtonVariant.primary}
+        >
+          {t('Save')}
+        </Button>,
+        <Button
+          onClick={() => {
+            setCPU(defaultCPU);
+            setMemory(defaultMemorySize);
+            setMemoryUnit(defaultMemoryUnit);
+          }}
+          isDisabled={isTemplateEditable}
+          key="default"
+          variant={ButtonVariant.secondary}
+        >
+          {t('Restore template settings')}
+        </Button>,
+        <Button key="cancel" onClick={onClose} variant="link">
+          {t('Cancel')}
+        </Button>,
+      ]}
+      className="cpu-memory-modal"
+      isOpen={isOpen}
+      onClose={onClose}
+      title={t('Edit CPU | Memory')}
+      variant={ModalVariant.small}
+      width="650px"
+    >
+      <div className="inputs">
+        <CPUInput currentCPU={defaultCPU} setUserEnteredCPU={setCPU} userEnteredCPU={cpu} />
+        <MemoryInput
+          memory={memory}
+          memoryUnit={memoryUnit}
+          setMemory={setMemory}
+          setMemoryUnit={setMemoryUnit}
+        />
+      </div>
+      {updateError && (
+        <Alert isInline title={t('Error')} variant="danger">
+          {updateError}
+        </Alert>
+      )}
+    </Modal>
+  );
+};
+
+export default CPUMemoryModal;
diff --git a/src/views/templates/details/tabs/details/components/CPUMemoryModal/utils.ts b/src/views/templates/details/tabs/details/components/CPUMemoryModal/utils.ts
new file mode 100644
index 000000000..1779d7b6c
--- /dev/null
+++ b/src/views/templates/details/tabs/details/components/CPUMemoryModal/utils.ts
@@ -0,0 +1,19 @@
+import { V1Template } from '@kubevirt-ui/kubevirt-api/console';
+import { V1CPU } from '@kubevirt-ui/kubevirt-api/kubevirt';
+import { getMemorySize } from '@kubevirt-utils/components/CPUMemoryModal/utils/CpuMemoryUtils';
+import { getTemplateVirtualMachineObject } from '@kubevirt-utils/resources/template';
+import { getCPU, getMemory } from '@kubevirt-utils/resources/vm';
+
+type CPUMemoryValues = {
+  defaultCPU: V1CPU;
+  defaultMemory: { defaultMemorySize: number; defaultMemoryUnit: string };
+};
+
+export const getDefaultCPUMemoryValues = (template: V1Template): CPUMemoryValues => {
+  const vmObject = getTemplateVirtualMachineObject(template);
+  const defaultCPU = getCPU(vmObject);
+  const defaultMemory = getMemorySize(getMemory(vmObject));
+  const { size, unit } = defaultMemory;
+
+  return { defaultCPU, defaultMemory: { defaultMemorySize: size, defaultMemoryUnit: unit } };
+};