CNV-41522: Fix customize IT

Signed-off-by: Matan Schatzman <mschatzm@redhat.com>
kubevirt-ui · May 7, 2024 · 56a95a9 · 56a95a9
1 parent 1d8e7c4
commit 56a95a9
Show file tree

Hide file tree

Showing 18 changed files with 121 additions and 76 deletions.
diff --git a/src/utils/components/BootOrderModal/BootOrderModal.tsx b/src/utils/components/BootOrderModal/BootOrderModal.tsx
@@ -21,7 +21,7 @@ import './boot-order.scss';
 const BootOrderModal: FC<{
   isOpen: boolean;
   onClose: () => void;
-  onSubmit: (updatedVM: V1VirtualMachine) => Promise<V1VirtualMachine | void>;
+  onSubmit: (updatedVM: V1VirtualMachine) => Promise<V1VirtualMachine>;
   vm: V1VirtualMachine;
   vmi?: V1VirtualMachineInstance;
 }> = ({ isOpen, onClose, onSubmit, vm, vmi }) => {

diff --git a/src/utils/store/customizeInstanceType.ts b/src/utils/store/customizeInstanceType.ts
@@ -37,12 +37,14 @@ export const updateCustomizeInstanceType: UpdateCustomizeInstanceType = (
   updateValues,
 ): V1VirtualMachine => {
   let vm = vmSignal.value;
+
   updateValues.forEach(({ data, merge = false, path }) => {
     //replace complete vm obj
     if (isEmpty(path)) {
       vm = data;
       return;
     }
+
     vm = produce(vm, (vmDraft) => {
       const pathParts = path.split('.');
       let obj = vmDraft;
@@ -52,11 +54,16 @@ export const updateCustomizeInstanceType: UpdateCustomizeInstanceType = (
           obj = obj?.[part] ? obj[part] : Object.assign(obj, { [part]: {} })[part];
           return;
         }
+
         obj[part] = merge ? { ...obj[part], ...data } : data;
       });
     });
   });
 
   vmSignal.value = vm;
+
   return vmSignal.value;
 };
+
+export const updateVMCustomizeIT = (vm: V1VirtualMachine) =>
+  Promise.resolve(updateCustomizeInstanceType([{ data: vm }]));
diff --git a/src/views/catalog/CustomizeInstanceType/components/CustomizeITVMFooter.tsx b/src/views/catalog/CustomizeInstanceType/components/CustomizeITVMFooter.tsx
@@ -12,7 +12,7 @@ import { getResourceUrl } from '@kubevirt-utils/resources/shared';
 import { clearCustomizeInstanceType, vmSignal } from '@kubevirt-utils/store/customizeInstanceType';
 import { createHeadlessService } from '@kubevirt-utils/utils/headless-service';
 import { isEmpty } from '@kubevirt-utils/utils/utils';
-import { k8sCreate } from '@openshift-console/dynamic-plugin-sdk';
+import { k8sCreate, useActiveNamespace } from '@openshift-console/dynamic-plugin-sdk';
 import {
   Button,
   ButtonVariant,
@@ -28,6 +28,7 @@ import './CustomizeITVMFooter.scss';
 const CustomizeITVMFooter: FC = () => {
   const { t } = useKubevirtTranslation();
   const navigate = useNavigate();
+  const [activeNamespace] = useActiveNamespace();
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [error, setError] = useState<any | Error>(null);
   const { instanceTypeVMState, setStartVM, startVM, vm, vmNamespaceTarget } =
@@ -94,7 +95,7 @@ const CustomizeITVMFooter: FC = () => {
             </SplitItem>
             <SplitItem>
               <Button
-                onClick={() => navigate(`/k8s/ns/${vmNamespaceTarget}/catalog`)}
+                onClick={() => navigate(`/k8s/ns/${activeNamespace}/catalog`)}
                 variant={ButtonVariant.link}
               >
                 {t('Cancel')}

diff --git a/...g/CustomizeInstanceType/tabs/configuration/utils/tabs/CustomizeInstanceTypeDetailsTab.tsx b/...g/CustomizeInstanceType/tabs/configuration/utils/tabs/CustomizeInstanceTypeDetailsTab.tsx
@@ -176,7 +176,7 @@ const CustomizeInstanceTypeDetailsTab = () => {
               }
               vm={vm}
             />
-            <DetailsSectionBoot canUpdateVM={canUpdateVM} vm={vm} />
+            <DetailsSectionBoot canUpdateVM={canUpdateVM} isCustomizeInstanceType vm={vm} />
           </DescriptionList>
         </GridItem>
       </Grid>

diff --git a/...ustomizeInstanceType/tabs/configuration/utils/tabs/CustomizeInstanceTypeInitialRunTab.tsx b/...ustomizeInstanceType/tabs/configuration/utils/tabs/CustomizeInstanceTypeInitialRunTab.tsx
@@ -1,10 +1,9 @@
 import React from 'react';
 
-import { V1VirtualMachine } from '@kubevirt-ui/kubevirt-api/kubevirt';
 import Loading from '@kubevirt-utils/components/Loading/Loading';
 import SearchItem from '@kubevirt-utils/components/SearchItem/SearchItem';
 import { useKubevirtTranslation } from '@kubevirt-utils/hooks/useKubevirtTranslation';
-import { updateCustomizeInstanceType, vmSignal } from '@kubevirt-utils/store/customizeInstanceType';
+import { updateVMCustomizeIT, vmSignal } from '@kubevirt-utils/store/customizeInstanceType';
 import {
   DescriptionList,
   Divider,
@@ -23,16 +22,13 @@ const CustomizeInstanceTypeInitialRunTab = () => {
     return <Loading />;
   }
 
-  const onSubmit = (updatedVM: V1VirtualMachine) =>
-    Promise.resolve(updateCustomizeInstanceType([{ data: updatedVM }]));
-
   return (
     <PageSection variant={PageSectionVariants.light}>
       <Title headingLevel="h2">
         <SearchItem id="initial-run">{t('Initial run')}</SearchItem>
       </Title>
       <DescriptionList className="pf-c-description-list">
-        <InitialRunTabCloudinit canUpdateVM onSubmit={onSubmit} vm={vm} />
+        <InitialRunTabCloudinit canUpdateVM onSubmit={updateVMCustomizeIT} vm={vm} />
         <Divider />
         <InitialRunTabSysprep canUpdateVM vm={vm} />
       </DescriptionList>

diff --git a/.../CustomizeInstanceType/tabs/configuration/utils/tabs/CustomizeInstanceTypeMetadataTab.tsx b/.../CustomizeInstanceType/tabs/configuration/utils/tabs/CustomizeInstanceTypeMetadataTab.tsx
@@ -33,7 +33,7 @@ const CustomizeInstanceTypeMetadataTab = () => {
       updateCustomizeInstanceType([
         {
           data,
-          path: `spec.template.metadata.${type}`,
+          path: `metadata.${type}`,
         },
       ]),
     );
@@ -61,7 +61,7 @@ const CustomizeInstanceTypeMetadataTab = () => {
             }
             breadcrumb="VirtualMachine.metadata.labels"
             data-test-id={`${getName(vm)}-labels`}
-            descriptionData={<MetadataTabLabels labels={vm?.spec?.template?.metadata?.labels} />}
+            descriptionData={<MetadataTabLabels labels={vm?.metadata?.labels} />}
             descriptionHeader={<SearchItem id="labels">{t('Labels')}</SearchItem>}
             editOnTitleJustify
             isEdit
@@ -73,9 +73,6 @@ const CustomizeInstanceTypeMetadataTab = () => {
             bodyContent={t(
               'Annotations is an unstructured key value map stored with a resource that may be set by external tools to store and retrieve arbitrary metadata. They are not queryable and should be preserved when modifying objects. ',
             )}
-            descriptionData={
-              <MetadataTabAnnotations annotations={vm?.spec?.template?.metadata?.annotations} />
-            }
             onEditClick={() =>
               createModal(({ isOpen, onClose }) => (
                 <AnnotationsModal
@@ -87,6 +84,7 @@ const CustomizeInstanceTypeMetadataTab = () => {
               ))
             }
             breadcrumb="VirtualMachine.metadata.annotations"
+            descriptionData={<MetadataTabAnnotations annotations={vm?.metadata?.annotations} />}
             descriptionHeader={<SearchItem id="metadata">{t('Annotations')}</SearchItem>}
             isEdit
             isPopover

diff --git a/...g/CustomizeInstanceType/tabs/configuration/utils/tabs/CustomizeInstanceTypeNetworkTab.tsx b/...g/CustomizeInstanceType/tabs/configuration/utils/tabs/CustomizeInstanceTypeNetworkTab.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 
 import NetworkInterfaceList from '@catalog/wizard/tabs/network/components/list/NetworkInterfaceList';
-import { V1Interface, V1Network } from '@kubevirt-ui/kubevirt-api/kubevirt';
+import { V1Interface, V1Network, V1VirtualMachine } from '@kubevirt-ui/kubevirt-api/kubevirt';
 import Loading from '@kubevirt-utils/components/Loading/Loading';
 import SearchItem from '@kubevirt-utils/components/SearchItem/SearchItem';
 import { useKubevirtTranslation } from '@kubevirt-utils/hooks/useKubevirtTranslation';
@@ -31,13 +31,18 @@ const CustomizeInstanceTypeNetworkTab = () => {
       ]),
     );
 
+  const onUpdateVM = (updatedVM: V1VirtualMachine) => {
+    updateCustomizeInstanceType([{ data: updatedVM }]);
+    return Promise.resolve();
+  };
+
   return (
     <PageSection variant={PageSectionVariants.light}>
       <Title headingLevel="h2">
         <SearchItem id="network">{t('Network interfaces')}</SearchItem>
       </Title>
       <AddNetworkInterfaceButton onAddNetworkInterface={onAddNetworkInterface} vm={vm} />
-      <NetworkInterfaceList vm={vm} />
+      <NetworkInterfaceList onUpdateVM={onUpdateVM} vm={vm} />
     </PageSection>
   );
 };

diff --git a/...talog/CustomizeInstanceType/tabs/configuration/utils/tabs/CustomizeInstanceTypeSSHTab.tsx b/...talog/CustomizeInstanceType/tabs/configuration/utils/tabs/CustomizeInstanceTypeSSHTab.tsx
@@ -1,10 +1,9 @@
 import React from 'react';
 
-import { V1VirtualMachine } from '@kubevirt-ui/kubevirt-api/kubevirt';
 import Loading from '@kubevirt-utils/components/Loading/Loading';
 import SearchItem from '@kubevirt-utils/components/SearchItem/SearchItem';
 import { useKubevirtTranslation } from '@kubevirt-utils/hooks/useKubevirtTranslation';
-import { updateCustomizeInstanceType, vmSignal } from '@kubevirt-utils/store/customizeInstanceType';
+import { updateVMCustomizeIT, vmSignal } from '@kubevirt-utils/store/customizeInstanceType';
 import {
   Grid,
   GridItem,
@@ -24,15 +23,6 @@ const CustomizeInstanceTypeSSHTab = () => {
     return <Loading />;
   }
 
-  const onUpdateVM = (data: V1VirtualMachine) =>
-    Promise.resolve(
-      updateCustomizeInstanceType([
-        {
-          data,
-        },
-      ]),
-    );
-
   return (
     <PageSection variant={PageSectionVariants.light}>
       <Title headingLevel="h2">
@@ -42,7 +32,11 @@ const CustomizeInstanceTypeSSHTab = () => {
         <GridItem>
           <Stack hasGutter>
             <SSHTabSSHAccess vm={vm} />
-            <SSHTabAuthorizedSSHKey onUpdateVM={onUpdateVM} vm={vm} />
+            <SSHTabAuthorizedSSHKey
+              isCustomizeInstanceType
+              onUpdateVM={updateVMCustomizeIT}
+              vm={vm}
+            />
           </Stack>
         </GridItem>
       </Grid>

diff --git a/...ustomizeInstanceType/tabs/configuration/utils/tabs/CustomizeInstanceTypeSchedulingTab.tsx b/...ustomizeInstanceType/tabs/configuration/utils/tabs/CustomizeInstanceTypeSchedulingTab.tsx
@@ -1,8 +1,7 @@
 import React from 'react';
 
-import { V1VirtualMachine } from '@kubevirt-ui/kubevirt-api/kubevirt';
 import Loading from '@kubevirt-utils/components/Loading/Loading';
-import { updateCustomizeInstanceType, vmSignal } from '@kubevirt-utils/store/customizeInstanceType';
+import { updateVMCustomizeIT, vmSignal } from '@kubevirt-utils/store/customizeInstanceType';
 import { PageSection, PageSectionVariants } from '@patternfly/react-core';
 import SchedulingSection from '@virtualmachines/details/tabs/configuration/scheduling/components/SchedulingSection';
 
@@ -13,18 +12,9 @@ const CustomizeInstanceTypeSchedulingTab = () => {
     return <Loading />;
   }
 
-  const onSubmit = (updatedVM: V1VirtualMachine) =>
-    Promise.resolve(
-      updateCustomizeInstanceType([
-        {
-          data: updatedVM,
-        },
-      ]),
-    );
-
   return (
     <PageSection variant={PageSectionVariants.light}>
-      <SchedulingSection onSubmit={onSubmit} vm={vm} />
+      <SchedulingSection onSubmit={updateVMCustomizeIT} vm={vm} />
     </PageSection>
   );
 };

diff --git a/...g/CustomizeInstanceType/tabs/configuration/utils/tabs/CustomizeInstanceTypeStorageTab.tsx b/...g/CustomizeInstanceType/tabs/configuration/utils/tabs/CustomizeInstanceTypeStorageTab.tsx
@@ -4,7 +4,11 @@ import { V1VirtualMachine } from '@kubevirt-ui/kubevirt-api/kubevirt';
 import EnvironmentForm from '@kubevirt-utils/components/EnvironmentEditor/EnvironmentForm';
 import Loading from '@kubevirt-utils/components/Loading/Loading';
 import { getDataVolumeTemplates, getDisks, getVolumes } from '@kubevirt-utils/resources/vm';
-import { updateCustomizeInstanceType, vmSignal } from '@kubevirt-utils/store/customizeInstanceType';
+import {
+  updateCustomizeInstanceType,
+  updateVMCustomizeIT,
+  vmSignal,
+} from '@kubevirt-utils/store/customizeInstanceType';
 import { Divider, Grid, GridItem, PageSection, PageSectionVariants } from '@patternfly/react-core';
 import DiskList from '@virtualmachines/details/tabs/configuration/storage/components/tables/disk/DiskList';
 
@@ -47,18 +51,7 @@ const CustomizeInstanceTypeStorageTab = () => {
       </GridItem>
       <GridItem>
         <PageSection variant={PageSectionVariants.light}>
-          <EnvironmentForm
-            updateVM={(updatedVM) =>
-              Promise.resolve(
-                updateCustomizeInstanceType([
-                  {
-                    data: updatedVM,
-                  },
-                ]),
-              )
-            }
-            vm={vm}
-          />
+          <EnvironmentForm updateVM={updateVMCustomizeIT} vm={vm} />
         </PageSection>
       </GridItem>
     </Grid>

diff --git a/src/views/catalog/wizard/tabs/network/components/list/NetworkInterfaceActions.tsx b/src/views/catalog/wizard/tabs/network/components/list/NetworkInterfaceActions.tsx
@@ -8,23 +8,27 @@ import TabModal from '@kubevirt-utils/components/TabModal/TabModal';
 import KebabToggle from '@kubevirt-utils/components/toggles/KebabToggle';
 import { useKubevirtTranslation } from '@kubevirt-utils/hooks/useKubevirtTranslation';
 import { NetworkPresentation } from '@kubevirt-utils/resources/vm/utils/network/constants';
+import { vmSignal } from '@kubevirt-utils/store/customizeInstanceType';
 import { ButtonVariant, Dropdown, DropdownItem, DropdownList } from '@patternfly/react-core';
 
 import WizardEditNetworkInterfaceModal from '../modal/WizardEditNetworkInterfaceModal';
 
 type NetworkInterfaceActionsProps = {
   nicName: string;
   nicPresentation: NetworkPresentation;
+  onUpdateVM?: (updateVM: V1VirtualMachine) => Promise<void>;
 };
 
 const NetworkInterfaceActions: FC<NetworkInterfaceActionsProps> = ({
   nicName,
   nicPresentation,
+  onUpdateVM,
 }) => {
   const { t } = useKubevirtTranslation();
-  const { updateVM, vm } = useWizardVMContext();
+  const { updateVM, vm: vmContext } = useWizardVMContext();
   const { createModal } = useModal();
-
+  const vm = vmSignal.value || vmContext;
+  const onUpdate = onUpdateVM || updateVM;
   const [isDropdownOpen, setIsDropdownOpen] = useState(false);
   const label = t('Delete NIC?');
   const editBtnText = t('Edit');
@@ -36,7 +40,7 @@ const NetworkInterfaceActions: FC<NetworkInterfaceActionsProps> = ({
         isOpen={isOpen}
         nicPresentation={nicPresentation}
         onClose={onClose}
-        updateVM={updateVM}
+        updateVM={onUpdate}
         vm={vm}
       />
     ));
@@ -52,8 +56,8 @@ const NetworkInterfaceActions: FC<NetworkInterfaceActionsProps> = ({
       draftVM.spec.template.spec.domain.devices.interfaces =
         draftVM.spec.template.spec.domain.devices.interfaces.filter(({ name }) => name !== nicName);
     });
-    return updateVM(updatedVM);
-  }, [nicName, updateVM, vm]);
+    return onUpdate(updatedVM);
+  }, [nicName, onUpdate, vm]);
 
   const onDeleteModalToggle = () => {
     createModal(({ isOpen, onClose }) => (

diff --git a/src/views/catalog/wizard/tabs/network/components/list/NetworkInterfaceList.tsx b/src/views/catalog/wizard/tabs/network/components/list/NetworkInterfaceList.tsx
@@ -15,10 +15,11 @@ import useNetworkRowFilters from '../../hooks/useNetworkRowFilters';
 import NetworkInterfaceRow from './NetworkInterfaceRow';
 
 type NetworkInterfaceListProps = {
+  onUpdateVM?: (updateVM: V1VirtualMachine) => Promise<void>;
   vm: V1VirtualMachine;
 };
 
-const NetworkInterfaceList: React.FC<NetworkInterfaceListProps> = ({ vm }) => {
+const NetworkInterfaceList: React.FC<NetworkInterfaceListProps> = ({ onUpdateVM, vm }) => {
   const networks = getNetworks(vm);
   const interfaces = getInterfaces(vm);
   const filters = useNetworkRowFilters();
@@ -36,6 +37,7 @@ const NetworkInterfaceList: React.FC<NetworkInterfaceListProps> = ({ vm }) => {
         loaded
         loadError={false}
         Row={NetworkInterfaceRow}
+        rowData={{ onUpdateVM }}
         unfilteredData={data}
       />
     </>

diff --git a/src/views/catalog/wizard/tabs/network/components/list/NetworkInterfaceRow.tsx b/src/views/catalog/wizard/tabs/network/components/list/NetworkInterfaceRow.tsx
@@ -1,5 +1,6 @@
-import * as React from 'react';
+import React, { FC } from 'react';
 
+import { V1VirtualMachine } from '@kubevirt-ui/kubevirt-api/kubevirt';
 import { useKubevirtTranslation } from '@kubevirt-utils/hooks/useKubevirtTranslation';
 import { NO_DATA_DASH } from '@kubevirt-utils/resources/vm/utils/constants';
 import { NetworkPresentation } from '@kubevirt-utils/resources/vm/utils/network/constants';
@@ -12,10 +13,9 @@ export type NetworkInterfaceRowProps = {
   obj: NetworkPresentation;
 };
 
-const NetworkInterfaceRow: React.FC<RowProps<NetworkPresentation>> = ({
-  activeColumnIDs,
-  obj: { iface, network },
-}) => {
+const NetworkInterfaceRow: FC<
+  RowProps<NetworkPresentation, { onUpdateVM?: (updateVM: V1VirtualMachine) => Promise<void> }>
+> = ({ activeColumnIDs, obj: { iface, network }, rowData: { onUpdateVM } }) => {
   const { t } = useKubevirtTranslation();
   return (
     <>
@@ -39,7 +39,11 @@ const NetworkInterfaceRow: React.FC<RowProps<NetworkPresentation>> = ({
         className="dropdown-kebab-pf pf-v5-c-table__action"
         id=""
       >
-        <NetworkInterfaceActions nicName={network.name} nicPresentation={{ iface, network }} />
+        <NetworkInterfaceActions
+          nicName={network.name}
+          nicPresentation={{ iface, network }}
+          onUpdateVM={onUpdateVM}
+        />
       </TableData>
     </>
   );