fix unable to detach PCI & USB device in VM edit page (#247) (#249)

* fix unable to detach PCI & USB device in VM edit page

Signed-off-by: Andy Lee <andy.lee@suse.com>

* refactor based on comment

Signed-off-by: Andy Lee <andy.lee@suse.com>

* using set from shell/utils/object

Signed-off-by: Andy Lee <andy.lee@suse.com>

---------

Signed-off-by: Andy Lee <andy.lee@suse.com>
(cherry picked from commit 2993ddb82c)

Co-authored-by: Andy Lee <andy.lee@suse.com>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "harvester-ui-extension",
-  "version": "1.5.0-rc4",
+  "version": "1.5.0-rc5",
   "private": false,
   "engines": {
     "node": ">=20.0.0"

pkg/harvester/dialog/HarvesterAddHotplugModal.vue

@@ -57,6 +57,10 @@ export default {
             if (!!pvc.metadata?.annotations?.[HCI_ANNOTATIONS.IMAGE_ID]) {
               return false;
             }
+            // we won't show golden image volume in the hot plug volume modal
+            if (pvc.isGoldenImageVolume) {
+              return false;
+            }
 
             return !pvc.attachVM;
           })

pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachinePciDevices/index.vue

@@ -101,9 +101,7 @@ export default {
         ...formatted,
       ];
 
-      if (devices.length > 0) {
+      set(this.value.domain.devices, 'hostDevices', devices);
-        set(this.value.domain.devices, 'hostDevices', devices);
-      }
     }
   },
 

pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineUSBDevices/index.vue

@@ -84,9 +84,7 @@ export default {
         ...formatted,
       ];
 
-      if (devices.length > 0) {
+      set(this.value.domain.devices, 'hostDevices', devices);
-        set(this.value.domain.devices, 'hostDevices', devices);
-      }
     }
   },
 

pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineVolume/type/existing.vue

@@ -111,7 +111,7 @@ export default {
               return false;
             }
 
-            if (pvc.metadata?.annotations?.[HCI_ANNOTATIONS.GOLDEN_IMAGE] === 'true') {
+            if (pvc.isGoldenImageVolume) {
               return false;
             }
 

pkg/harvester/edit/kubevirt.io.virtualmachine/index.vue

@@ -2,7 +2,7 @@
 import { isEqual } from 'lodash';
 import { mapGetters } from 'vuex';
 import Tabbed from '@shell/components/Tabbed';
-import { clone } from '@shell/utils/object';
+import { clone, set } from '@shell/utils/object';
 import Tab from '@shell/components/Tabbed/Tab';
 import { Checkbox } from '@components/Form/Checkbox';
 import CruResource from '@shell/components/CruResource';
@@ -16,7 +16,6 @@ import PodAffinity from '@shell/components/form/PodAffinity';
 import VGpuDevices from './VirtualMachineVGpuDevices/index';
 import UsbDevices from './VirtualMachineUSBDevices/index';
 import KeyValue from '@shell/components/form/KeyValue';
-
 import { clear } from '@shell/utils/array';
 import { saferDump } from '@shell/utils/create-yaml';
 import { exceptionToErrorsArray } from '@shell/utils/error';
@@ -412,12 +411,21 @@ export default {
       }
       const cloneDeepNewVM = clone(this.value);
 
+      // new VM
       delete cloneDeepNewVM?.metadata;
       delete cloneDeepNewVM?.__clone;
 
+      // old VM
       delete this.cloneVM?.metadata;
       delete this.cloneVM?.__clone;
 
+      // add empty hostDevices to old VM as CRD does not have it.
+      const devicesObj = this.cloneVM?.spec?.template?.spec?.domain?.devices;
+
+      if (devicesObj && devicesObj.hostDevices === undefined) {
+        set(devicesObj, 'hostDevices', []);
+      }
+
       const oldVM = JSON.parse(JSON.stringify(this.cloneVM));
       const newVM = JSON.parse(JSON.stringify(cloneDeepNewVM));
 
@@ -485,6 +493,7 @@ export default {
     },
 
     generateYaml() {
+      this.showYaml = this?.$refs?.vmCruResource?.showYaml || false;
       this.parseVM();
       const out = saferDump(this.value);
 
@@ -498,6 +507,7 @@ export default {
   <CruResource
     v-if="spec"
     id="vm"
+    ref="vmCruResource"
     :done-route="doneRoute"
     :resource="value"
     :cancel-event="true"

pkg/harvester/list/harvesterhci.io.volume.vue

@@ -6,10 +6,8 @@ import {
 } from '@shell/config/types';
 import { STATE, AGE, NAME, NAMESPACE } from '@shell/config/table-headers';
 import HarvesterVolumeState from '../formatters/HarvesterVolumeState';
-
 import { allSettled } from '../utils/promise';
 import { HCI, VOLUME_SNAPSHOT } from '../types';
-import { HCI as HCI_ANNOTATIONS } from '@pkg/harvester/config/labels-annotations';
 
 const schema = {
   id:         HCI.VOLUME,
@@ -72,7 +70,7 @@ export default {
     },
     filterRows() {
       // we only show the non golden image PVCs in the list
-      return this.rows.filter((pvc) => pvc?.metadata?.annotations?.[HCI_ANNOTATIONS.GOLDEN_IMAGE] !== 'true');
+      return this.rows.filter((pvc) => !pvc?.isGoldenImageVolume);
     },
     headers() {
       return [

pkg/harvester/mixins/harvester-vm/index.js

@@ -140,6 +140,7 @@ export default {
     return {
       OS,
       isClone,
+      showYaml:                      false,
       spec:                          null,
       osType:                        'linux',
       sshKey:                        [],
@@ -269,7 +270,7 @@ export default {
 
     needNewSecret() {
       // When creating a template it is always necessary to create a new secret.
-      return this.resourceType === HCI.VM_VERSION || this.isCreate;
+      return this.showYaml ? false : this.resourceType === HCI.VM_VERSION || this.isCreate;
     },
 
     defaultTerminationSetting() {
@@ -669,7 +670,7 @@ export default {
         }
       });
 
-      if (!this.secretName) {
+      if (this.needNewSecret || !this.secretName) {
         this.secretName = this.generateSecretName(this.secretNamePrefix);
       }
 

pkg/harvester/models/harvester/persistentvolumeclaim.js

@@ -344,6 +344,10 @@ export default class HciPv extends HarvesterResource {
     return this.dataEngine === DATA_ENGINE_V2;
   }
 
+  get isGoldenImageVolume() {
+    return this?.metadata?.annotations?.[HCI_ANNOTATIONS.GOLDEN_IMAGE] === 'true';
+  }
+
   get thirdPartyStorageFeatureEnabled() {
     return this.$rootGetters['harvester-common/getFeatureEnabled']('thirdPartyStorage');
   }

pkg/harvester/package.json

@@ -1,7 +1,7 @@
 {
   "name": "harvester",
   "description": "Rancher UI Extension for Harvester",
-  "version": "1.5.0-rc4",
+  "version": "1.5.0-rc5",
   "private": false,
   "rancher": {
     "annotations": {

pkg/harvester/utils/feature-flags.js

@@ -35,7 +35,17 @@ function latestMinorVersion(v) {
 }
 
 export const featureEnabled = (featureKey, serverVersion) => {
+  const minSupportedVersion = '1.3.0';
+
   const version = getVersion(serverVersion);
+
+  if (semver.lt(version.replace('v', ''), minSupportedVersion)) {
+    // eslint-disable-next-line no-console
+    console.error(`Harvester UI extension only supports Harvester cluster version >= ${ minSupportedVersion }. Current version: ${ version }`);
+
+    return false;
+  }
+
   let releasedFeatures = RELEASE_FEATURES[version];
 
   if (!releasedFeatures) {