fix: vGPU doesn't display when creating harvester downstream cluster (#1123)

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

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

@@ -232,3 +232,32 @@ export default {
     </template>
   </ResourceTable>
 </template>
+
+<style lang="scss" scoped>
+.group-actions  {
+  display: inline;
+}
+
+// Match the enable/disable passthrough bulk-action buttons height to the .btn (40px) on the right.
+:deep(.bulk .rc-button.btn-medium.bulk-action:not(.btn-sm)) {
+  min-height: 40px;
+}
+
+// Make the collapsed "Actions" dropdown button 40px too.
+:deep(.bulk .rc-button.btn-medium.bulk-actions-dropdown:not(.btn-sm)) {
+  min-height: 40px;
+}
+
+// Lay the bulk row out with flex so the "N selected" label can wrap below the buttons.
+:deep(.bulk) {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+}
+
+:deep(.bulk .action-availability) {
+  flex-basis: 100%;
+  margin-left: 0;
+  margin-top: 6px;
+}
+</style>

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

@@ -5,6 +5,7 @@ import LabeledSelect from '@shell/components/form/LabeledSelect';
 import Banner from '@components/Banner/Banner.vue';
 import remove from 'lodash/remove';
 import { set } from '@shell/utils/object';
+import { uniq } from '@shell/utils/array';
 import { HCI } from '../../../types';
 import DeviceList from './DeviceList';
 import CompatibilityMatrix from '../CompatibilityMatrix';
@@ -52,31 +53,29 @@ export default {
     }
 
     const selectedDevices = [];
-    const oldFormatDevices = [];
 
     const vmDevices = this.value?.domain?.devices?.hostDevices || [];
-    const otherDevices = this.otherDevices(vmDevices).map(({ name }) => name);
     const vmDeviceNames = vmDevices.map(({ name }) => name);
 
     this.pciDevices.forEach((row) => {
       row.allowDisable = !vmDeviceNames.includes(row.metadata.name);
     });
 
-    vmDevices.forEach(({ name, deviceName }) => {
-      const checkName = (deviceName || '').split('/')?.[1];
+    // When off, read from spec; otherwise the spec name is a placeholder ('provisioned'),
+    // so read the real allocated device names from the deviceAllocationDetails annotation.
+    const hostDeviceNames = this.vm.isOff ? [
+      ...vmDevices.map(({ name }) => name),
+    ] : [
+      ...Object.values(this.vm?.provisionedHostDevices || {}).reduce((acc, devices) => [...acc, ...devices], []),
+    ];
 
-      if (checkName && name.includes(checkName) && !otherDevices.includes(name)) {
-        oldFormatDevices.push(name);
-      } else if (this.enabledDevices.find((device) => device?.metadata?.name === name)) {
+    uniq(hostDeviceNames).forEach((name) => {
+      if (this.enabledDevices.find((device) => device?.metadata?.name === name)) {
         selectedDevices.push(name);
       }
     });
 
-    if (oldFormatDevices.length > 0) {
-      this.oldFormatDevices = oldFormatDevices;
-    } else {
-      this.selectedDevices = selectedDevices;
-    }
+    this.selectedDevices = selectedDevices;
   },
 
   data() {

pkg/harvester/models/kubevirt.io.virtualmachine.js

@@ -1283,6 +1283,18 @@ export default class VirtVm extends HarvesterResource {
     }
   }
 
+  get provisionedHostDevices() {
+    // Rancher-provisioned VMs store hostDevices.name as a placeholder ('provisioned'); the
+    // real allocated PCI device names live in this annotation, keyed by resourceName.
+    try {
+      const deviceAllocationDetails = JSON.parse(this.metadata?.annotations[HCI_ANNOTATIONS.VM_DEVICE_ALLOCATION_DETAILS] || '{}');
+
+      return deviceAllocationDetails?.hostdevices || {};
+    } catch (error) {
+      return {};
+    }
+  }
+
   get schedulingVMBackupFeatureEnabled() {
     return this.$rootGetters['harvester-common/getFeatureEnabled']('schedulingVMBackup');
   }