Add USB devices page skeleton

Signed-off-by: Francesco Torchia <francesco.torchia@suse.com>

pkg/harvester/edit/harvesterhci.io.addon/usbdevices-controller.vue

@@ -0,0 +1,58 @@
+<script>
+import Tabbed from '@shell/components/Tabbed';
+import Tab from '@shell/components/Tabbed/Tab';
+import { RadioGroup } from '@components/Form/Radio';
+
+import CreateEditView from '@shell/mixins/create-edit-view';
+
+export default {
+  name:       'EditAddonUSB',
+  components: {
+    Tabbed,
+    Tab,
+    RadioGroup,
+  },
+
+  mixins: [CreateEditView],
+
+  props: {
+    value: {
+      type:     Object,
+      required: true,
+    },
+
+    mode: {
+      type:     String,
+      required: true
+    },
+  },
+};
+</script>
+
+<template>
+  <Tabbed :side-tabs="true">
+    <Tab
+      name="basic"
+      :label="t('harvester.addons.usbController.titles.basic')"
+      :weight="99"
+    >
+      <RadioGroup
+        v-model="value.spec.enabled"
+        class="mb-20"
+        name="model"
+        :mode="mode"
+        :options="[true,false]"
+        :labels="[t('generic.enabled'), t('generic.disabled')]"
+      />
+    </Tab>
+  </Tabbed>
+</template>
+
+<style lang="scss" scoped>
+  ::v-deep .radio-group {
+    display: flex;
+    .radio-container {
+      margin-right: 30px;
+    }
+  }
+</style>

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

@@ -0,0 +1,65 @@
+<script>
+import { _EDIT } from '@shell/config/query-params';
+import { allHash } from '@shell/utils/promise';
+import { HCI } from '../../../types';
+import { STATE, SIMPLE_NAME } from '@shell/config/table-headers';
+import LabeledSelect from '@shell/components/form/LabeledSelect';
+import Banner from '@components/Banner/Banner.vue';
+
+export default {
+  name:       'VirtualMachineUSBDevices',
+  components: {
+    Banner,
+    LabeledSelect,
+  },
+  props: {
+    mode: {
+      type:    String,
+      default: _EDIT
+    },
+
+    value: {
+      type:    Object,
+      default: () => {}
+    },
+
+    vm: {
+      type:    Object,
+      default: () => {}
+    }
+  },
+
+  async fetch() {
+    const hash = {
+      devices: this.$store.dispatch('harvester/findAll', { type: HCI.USB_DEVICE }),
+      vms:     this.$store.dispatch(`harvester/findAll`, { type: HCI.VM })
+    };
+
+    const res = await allHash(hash);
+
+    for (const key in res) {
+      this[key] = res[key];
+    }
+  },
+
+  data() {
+    return {
+      deviceSchema:    this.$store.getters['harvester/schemaFor'](HCI.USB_DEVICE),
+      deviceHeaders: [
+        { ...STATE },
+        SIMPLE_NAME,
+      ],
+      devices:         [],
+      vms:             [],
+      selectedDevices: [],
+    };
+  },
+
+  computed: {
+  },
+};
+</script>
+
+<template>
+  <div> USB Devices </div>
+</template>

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

@@ -15,6 +15,11 @@ import Labels from '@shell/components/form/Labels';
 
 import NodeScheduling from '@shell/components/form/NodeScheduling';
 import PodAffinity from '@shell/components/form/PodAffinity';
+import AccessCredentials from './VirtualMachineAccessCredentials';
+import PciDevices from './VirtualMachinePciDevices/index';
+import VGpuDevices from './VirtualMachineVGpuDevices/index';
+import UsbDevices from './VirtualMachineUSBDevices/index';
+import RestartVMDialog from '../../dialog/RestartVMDialog';
 import KeyValue from '@shell/components/form/KeyValue';
 
 import { clear } from '@shell/utils/array';
@@ -69,10 +74,11 @@ export default {
     PciDevices,
     RestartVMDialog,
     UnitInput,
-    VirtualMachineVGpuDevices,
+    VGpuDevices,
     KeyValue,
     Banner,
-    MessageLink
+    MessageLink,
+    UsbDevices,
   },
 
   mixins: [CreateEditView, VM_MIXIN],
@@ -652,10 +658,14 @@ export default {
       </Tab>
 
       <Tab v-if="enabledSriovgpu" :label="t('harvester.tab.vGpuDevices')" name="vGpuDevices" :weight="-6">
-        <VirtualMachineVGpuDevices :mode="mode" :value="spec.template.spec" :vm="value" />
+        <VGpuDevices :mode="mode" :value="spec.template.spec" :vm="value" />
       </Tab>
 
-      <Tab v-if="isEdit" :label="t('harvester.tab.accessCredentials')" name="accessCredentials" :weight="-7">
+      <Tab v-if="enabledUSB" :label="t('harvester.tab.usbDevices')" name="usbDevices" :weight="-7">
+        <UsbDevices :mode="mode" :value="spec.template.spec" :vm="value" />
+      </Tab>
+
+      <Tab v-if="isEdit" :label="t('harvester.tab.accessCredentials')" name="accessCredentials" :weight="-8">
         <AccessCredentials v-model:value="accessCredentials" :mode="mode" :resource="value" :is-qemu-installed="isQemuInstalled" />
       </Tab>