refactor: add banner in PCI Devices page (#785) (#788)

* refactor: add banner in PCI Devices page



* refactor: based on copilot review



---------


(cherry picked from commit c5b4f6c)

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

Author: mergify[bot]

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

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: |-

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