From c5b4f6cd1ee6a23d14f251b6d45d13e7c2274b2b Mon Sep 17 00:00:00 2001
From: Andy Lee <andy.lee@suse.com>
Date: Tue, 31 Mar 2026 17:45:06 +0800
Subject: [PATCH] refactor: add banner in PCI Devices page (#785)

* refactor: add banner in PCI Devices page

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

* refactor: based on copilot review

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

---------

Signed-off-by: Andy Lee <andy.lee@suse.com>
---
 .../VirtualMachinePciDevices/index.vue        |  6 ++--
 pkg/harvester/l10n/en-us.yaml                 | 10 ++++--
 .../devices.harvesterhci.io.pcidevice.vue     | 33 ++++++++++++++++---
 3 files changed, 38 insertions(+), 11 deletions(-)

diff --git a/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachinePciDevices/index.vue b/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachinePciDevices/index.vue
index 254643fb..69807ed7 100644
--- a/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachinePciDevices/index.vue
+++ b/pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachinePciDevices/index.vue
@@ -243,9 +243,9 @@ export default {
           <Banner color="info">
             <MessageLink
               :to="toVGpuDevicesPage"
-              prefix-label="harvester.pci.howToUseDevice.prefix"
-              middle-label="harvester.pci.howToUseDevice.middle"
-              suffix-label="harvester.pci.howToUseDevice.suffix"
+              prefix-label="harvester.pci.howToUseDeviceInVMCreation.prefix"
+              middle-label="harvester.pci.howToUseDeviceInVMCreation.middle"
+              suffix-label="harvester.pci.howToUseDeviceInVMCreation.suffix"
             />
           </Banner>
           <Banner
diff --git a/pkg/harvester/l10n/en-us.yaml b/pkg/harvester/l10n/en-us.yaml
index 806fb96b..4813437a 100644
--- a/pkg/harvester/l10n/en-us.yaml
+++ b/pkg/harvester/l10n/en-us.yaml
@@ -376,10 +376,14 @@ harvester:
     available: Available Devices
     compatibleNodes: Compatible Nodes
     impossibleSelection: 'There are no hosts with all of the selected devices.'
-    howToUseDevice: 
-      prefix: 'Use the table below to enable PCI passthrough on each device you want to use in this virtual machine.<br>For vGPU devices, please enable them on the'
-      middle: vGPU Devices 
+    howToUseDeviceInVMCreation: 
+      prefix: 'Use the table below to enable PCI passthrough on each device you want to use in this virtual machine. <br>For vGPU devices, please enable them on the'
+      middle: vGPU Devices
       suffix: page first.
+    howToUseDevice: 
+      prefix: 'Select the device in the table to enable PCI passthrough. <br>For vGPU devices, please enable them on the'
+      middle: vGPU Devices
+      suffix: page.
     deviceInTheSameHost: 'You can only select devices on the same host.'
     oldFormatDevices:
       help: |-
diff --git a/pkg/harvester/list/devices.harvesterhci.io.pcidevice.vue b/pkg/harvester/list/devices.harvesterhci.io.pcidevice.vue
index 3bf639c4..55417552 100644
--- a/pkg/harvester/list/devices.harvesterhci.io.pcidevice.vue
+++ b/pkg/harvester/list/devices.harvesterhci.io.pcidevice.vue
@@ -60,6 +60,17 @@ export default {
       return schema;
     },
 
+    toVGpuDevicesPage() {
+      return {
+        name:   'harvester-c-cluster-resource',
+        params: { cluster: this.$store.getters['clusterId'], resource: HCI.VGPU_DEVICE },
+      };
+    },
+
+    vGPUAsPCIDeviceEnabled() {
+      return this.$store.getters['harvester-common/getFeatureEnabled']('vGPUAsPCIDevice');
+    },
+
     rows() {
       const inStore = this.$store.getters['currentProduct'].inStore;
       const rows = this.$store.getters[`${ inStore }/all`](HCI.PCI_DEVICE);
@@ -85,11 +96,23 @@ export default {
       {{ t('harvester.pci.noPCIPermission') }}
     </Banner>
   </div>
-  <DeviceList
-    v-else-if="hasSchema && enabledPCI"
-    :devices="rows"
-    :schema="schema"
-  />
+  <div v-else-if="hasSchema && enabledPCI">
+    <Banner
+      v-if="vGPUAsPCIDeviceEnabled"
+      color="info"
+    >
+      <MessageLink
+        :to="toVGpuDevicesPage"
+        prefix-label="harvester.pci.howToUseDevice.prefix"
+        middle-label="harvester.pci.howToUseDevice.middle"
+        suffix-label="harvester.pci.howToUseDevice.suffix"
+      />
+    </Banner>
+    <DeviceList
+      :devices="rows"
+      :schema="schema"
+    />
+  </div>
   <div v-else>
     <Banner color="warning">
       <MessageLink