bfg-common 1.5.774 → 1.5.775

package/components/common/split/vertical/New.vue

@@ -73,8 +73,7 @@ const props = defineProps<{
   .gutter-vertical {
     position: relative;
     min-height: 4px;
-    //background-color: var(--gutter-bg-color);
-    background-color: var(--new-gutter-bg-color);
+    background-color: var(--gutter-bg-color);
     transition-delay: 0.25s;
     transition-duration: 0.25s;
     user-select: none;

package/components/common/vm/actions/add/New.vue

@@ -52,18 +52,16 @@
         :sub-title-height="heightName"
       >
         <template #subTitle>
-          <div ref="subTitleBlockName">
-            <div class="subtitle-block">
-              <div
-                  id="name-alert-wrapper"
-                  :class="[{ 'mb-4': !isNameAlertWrapperEmpty }]"
-              ></div>
-              <ui-wizard-subtitle
-                  :sub-title="
+          <div ref="subTitleBlockName" class="subtitle-block">
+            <div
+              id="name-alert-wrapper"
+              :class="[{ 'mb-4': !isNameAlertWrapperEmpty }]"
+            ></div>
+            <ui-wizard-subtitle
+              :sub-title="
                 localization.vmWizard.specifyUniqueNameAndTargetLocationForVm
               "
-              />
-            </div>
+            />
           </div>
         </template>
         <template #content>
@@ -105,7 +103,7 @@
                 test-id="computed-resource-alert"
                 type="error"
                 size="md"
-                class="subtitle-block__alert mb-4"
+                class="subtitle-block__alert"
               />
               <ui-wizard-subtitle
                 :sub-title="
@@ -177,7 +175,7 @@
         </template>
         <template #content>
           <common-vm-actions-common-select-options
-            :is-new-vm-from-template="selectedCreateType === '1'"
+            :is-create-template="selectedCreateType === '1'"
             @change="emits('change-select-options', $event)"
             @change-count="emits('change-clone-count', $event)"
           />
@@ -239,7 +237,7 @@
               :error-validation-fields="props.errorValidationFields"
               @remove-error-by-title="emits('remove-error-by-title', $event)"
             />
-            <div class="vm-hardware-version-wrap justify-end flex flex-1 mt-6">
+            <div class="vm-hardware-version-wrap justify-end flex flex-1 mt-7">
               <span class="vm-hardware-version">{{
                 props.compatibilityInfo
               }}</span>

package/components/common/vm/actions/add/Old.vue

@@ -75,7 +75,7 @@
               selectedStep.id === dynamicSteps.selectOptions ||
               selectedStep.id === dynamicSteps.selectOptionsForDeployment
             "
-            :is-new-vm-from-template="selectedCreateType === '1'"
+            :is-create-template="selectedCreateType === '1'"
             @change="emits('change-select-options', $event)"
             @change-count="emits('change-clone-count', $event)"
           />

package/components/common/vm/actions/clone/old/Old.vue

@@ -5,7 +5,6 @@
       :selected-scheme="props.selectedScheme"
       :title="props.title"
       :localization="localization"
-      test-id="clone-exist-vm"
       show
       @change-steps="emits('change-steps', $event)"
       @hide="emits('hide')"

package/components/common/vm/actions/common/customizeHardware/virtualHardware/New.vue

@@ -105,7 +105,6 @@
             :index="props.hardDisksIndex[key]"
             :type="props.hardDisksType[key]"
             :main-storage="props.storage"
-            :main-storage-free="props.storageFree"
             :error-validation-fields="props.errorValidationFields"
             :get-datastore-table-func="props.getDatastoreTableFunc"
             :datastore="props.datastore"
@@ -118,6 +117,12 @@
               emits('remove-hard-disk', [props.hardDisksIndex[key], item])
             "
             @roll-back="emits('roll-back-hard-disk', props.hardDisksIndex[key])"
+            @send-data="
+              emits('send-data-new-hard-disk-method', [
+                $event,
+                props.hardDisksIndex[key],
+              ])
+            "
             @invalid="
               emits('set-invalid-hard-disk', [
                 $event,
@@ -261,21 +266,30 @@
         </div>
         <template v-if="props.passthroughDevices || props.mediatedDevices">
           <common-vm-actions-common-customize-hardware-virtual-hardware-new-pci-device
-            v-for="(item, key) in model.passthrough_pci_devices"
-            v-model:address="item.address"
-            v-model:vendor_name="item.vendor_name"
-            v-model:class_name="item.class_name"
-            v-model:device_name="item.device_name"
-            v-model:mediated_device="item.mediated_device"
-            v-model:mediated_device_uuid="item.mediated_device_uuid"
+            v-for="(item, key) in props.pciDevices"
             :key="props.pciDevicesIndex[key]"
             :index="props.pciDevicesIndex[key]"
+            :pci-device="item"
+            :error-validation-fields="props.errorValidationFields"
             :passthrough-devices="props.passthroughDevices"
             :mediated-devices="props.mediatedDevices"
             :type="props.pciDevicesType[key]"
             :is-edit="props.isEdit"
             :state="props.state"
             @remove="emits('remove-pci-device', props.pciDevicesIndex[key])"
+            @send-data="
+              emits('send-data-pci-devices-method', [
+                $event,
+                props.pciDevicesIndex[key],
+              ])
+            "
+            @invalid="
+              emits('set-invalid-pci-device', [
+                $event,
+                props.pciDevicesIndex[key],
+              ])
+            "
+            @remove-error-by-title="emits('remove-error-by-title', $event)"
           />
         </template>
         <common-vm-actions-common-customize-hardware-virtual-hardware-video-card
@@ -290,7 +304,7 @@
         <common-vm-actions-common-customize-hardware-virtual-hardware-other />
         <div
           v-if="props.compatibilityInfo"
-          class="vm-hardware-version-wrap justify-end flex flex-1 mt-1"
+          class="vm-hardware-version-wrap justify-end flex flex-1 mt-4"
         >
           <span class="vm-hardware-version">
             {{ props.compatibilityInfo }}
@@ -360,7 +374,6 @@ const props = withDefaults(
     files: UI_I_FileTreeNode[]
     isEdit: boolean
     storage: UI_I_DatastoreTableItem | null
-    storageFree: number
     project: UI_T_Project
     maxMemory: number
     cpuModels: UI_I_OptionItem[]
@@ -384,6 +397,7 @@ const props = withDefaults(
     state?: string | number
     // hardDisks?: UI_I_SendDataNewHardDisk[] | null
     videoCard?: UI_I_SendDataVideoCard
+    pciDevices?: UI_I_SendDataNewPciDevice[]
     // cdDvdDrives?: UI_I_SendDataNewCdDvdDrive[] | null
     guestMachineType?: UI_I_OptionItem | null
     passthroughDevices?: UI_I_PciDevice[]
@@ -396,6 +410,7 @@ const props = withDefaults(
     cpu: undefined,
     state: undefined,
     videoCard: undefined,
+    pciDevices: undefined,
     guestMachineType: undefined,
     passthroughDevices: undefined,
     mediatedDevices: undefined,
@@ -424,7 +439,16 @@ const emits = defineEmits<{
   (event: 'set-invalid-hard-disk', value: [boolean, number]): void
   (event: 'remove-error-by-title', value: string): void
   (event: 'roll-back-cd-dvd-drive', value: number): void
+  (event: 'set-invalid-pci-device', value: [boolean, number]): void
   (event: 'get-active-device-child', value: UI_I_FileTreeNode): void
+  (
+    event: 'send-data-pci-devices-method',
+    value: [UI_I_SendDataNewPciDevice, number]
+  ): void
+  (
+    event: 'send-data-new-hard-disk-method',
+    value: [UI_I_SendDataNewHardDisk, number]
+  ): void
   (
     event: 'send-data-new-cd-dvd-drive-method',
     value: [UI_I_SendDataNewCdDvdDrive, number]
@@ -449,7 +473,7 @@ const deviceCount = computed<number>(
     // (props.pciDevices?.length || 0) +
     (model.value.disk_devices?.length || 0) +
     (model.value.network_devices?.length || 0) +
-    (model.value.passthrough_pci_devices?.length || 0) +
+    (props.pciDevices?.length || 0) +
     6
 )
 const deviceCountText = computed<string>(() =>
@@ -588,7 +612,7 @@ const onAddDevice = (data: number): void => {
   display: flex;
   flex-direction: column;
   gap: 12px;
-  padding-bottom: 16px;
+  padding-bottom: 12px;
   background-color: var(--vm-wizard-block-view-bg-color);
 
   .vm-hardware-version-wrap {

package/components/common/vm/actions/common/customizeHardware/virtualHardware/Old.vue

@@ -85,7 +85,6 @@
             :index="props.hardDisksIndex[key]"
             :type="props.hardDisksType[key]"
             :main-storage="props.storage"
-            :main-storage-free="props.storageFree"
             :error-validation-fields="props.errorValidationFields"
             :get-datastore-table-func="props.getDatastoreTableFunc"
             :datastore="props.datastore"
@@ -98,6 +97,12 @@
               emits('remove-hard-disk', [props.hardDisksIndex[key], item])
             "
             @roll-back="emits('roll-back-hard-disk', props.hardDisksIndex[key])"
+            @send-data="
+              emits('send-data-new-hard-disk-method', [
+                $event,
+                props.hardDisksIndex[key],
+              ])
+            "
             @invalid="
               emits('set-invalid-hard-disk', [
                 $event,
@@ -241,21 +246,30 @@
         </div>
         <template v-if="props.passthroughDevices || props.mediatedDevices">
           <common-vm-actions-common-customize-hardware-virtual-hardware-new-pci-device
-            v-for="(item, key) in model.passthrough_pci_devices"
-            v-model:address="item.address"
-            v-model:vendor-name="item.vendor_name"
-            v-model:class-name="item.class_name"
-            v-model:device-name="item.device_name"
-            v-model:mediated-device="item.mediated_device"
-            v-model:mediated-device-uuid="item.mediated_device_uuid"
+            v-for="(item, key) in props.pciDevices"
             :key="props.pciDevicesIndex[key]"
             :index="props.pciDevicesIndex[key]"
+            :pci-device="item"
+            :error-validation-fields="props.errorValidationFields"
             :passthrough-devices="props.passthroughDevices"
             :mediated-devices="props.mediatedDevices"
             :type="props.pciDevicesType[key]"
             :is-edit="props.isEdit"
             :state="props.state"
             @remove="emits('remove-pci-device', props.pciDevicesIndex[key])"
+            @send-data="
+              emits('send-data-pci-devices-method', [
+                $event,
+                props.pciDevicesIndex[key],
+              ])
+            "
+            @invalid="
+              emits('set-invalid-pci-device', [
+                $event,
+                props.pciDevicesIndex[key],
+              ])
+            "
+            @remove-error-by-title="emits('remove-error-by-title', $event)"
           />
         </template>
         <common-vm-actions-common-customize-hardware-virtual-hardware-video-card
@@ -304,10 +318,8 @@ import type {
 } from '~/components/common/vm/actions/common/customizeHardware/virtualHardware/lib/models/interfaces'
 import type { UI_I_ErrorValidationField } from '~/lib/models/store/interfaces'
 import type {
-  UI_T_CdDvdType,
   UI_T_HardDiskType,
   UI_T_NetworkType,
-  UI_T_PciDeviceType,
 } from '~/components/common/vm/actions/common/customizeHardware/virtualHardware/lib/models/types'
 import type { UI_I_OptionItem } from '~/components/atoms/lib/models/interfaces'
 import type {
@@ -337,7 +349,6 @@ const props = withDefaults(
     files: UI_I_FileTreeNode[]
     isEdit: boolean
     storage: UI_I_DatastoreTableItem | null
-    storageFree: number
     project: UI_T_Project
     maxMemory: number
     cpuModels: UI_I_OptionItem[]
@@ -349,10 +360,10 @@ const props = withDefaults(
     hardDisksType: UI_T_HardDiskType[]
     networksIndex: number[]
     hardDisksIndex: number[]
-    pciDevicesType: UI_T_PciDeviceType[]
+    pciDevicesType: UI_T_NetworkType[]
     isShowFileModal: boolean
     pciDevicesIndex: number[]
-    cdDvdDrivesType: UI_T_CdDvdType[]
+    cdDvdDrivesType: UI_T_NetworkType[]
     cdDvdDrivesIndex: number[]
     errorValidationFields: UI_I_ErrorValidationField[]
     getDatastoreTableFunc: (payload: UI_I_TablePayload) => Promise<void>
@@ -360,6 +371,7 @@ const props = withDefaults(
     cpu?: API_UI_I_VmEditCpu
     state?: string | number
     videoCard?: UI_I_SendDataVideoCard
+    pciDevices?: UI_I_SendDataNewPciDevice[]
     guestMachineType?: UI_I_OptionItem | null
     passthroughDevices?: UI_I_PciDevice[]
     mediatedDevices?: UI_I_MediatedDevice[]
@@ -370,9 +382,10 @@ const props = withDefaults(
     cpu: undefined,
     state: undefined,
     videoCard: undefined,
+    pciDevices: undefined,
     guestMachineType: undefined,
-    passthroughDevices: () => [],
-    mediatedDevices: () => [],
+    passthroughDevices: undefined,
+    mediatedDevices: undefined,
     vmCpuHelpTextSecond: undefined,
     computeResource: undefined,
   }
@@ -397,7 +410,16 @@ const emits = defineEmits<{
   (event: 'set-invalid-hard-disk', value: [boolean, number]): void
   (event: 'remove-error-by-title', value: string): void
   (event: 'roll-back-cd-dvd-drive', value: number): void
+  (event: 'set-invalid-pci-device', value: [boolean, number]): void
   (event: 'get-active-device-child', value: UI_I_FileTreeNode): void
+  (
+    event: 'send-data-pci-devices-method',
+    value: [UI_I_SendDataNewPciDevice, number]
+  ): void
+  (
+    event: 'send-data-new-hard-disk-method',
+    value: [UI_I_SendDataNewHardDisk, number]
+  ): void
   (
     event: 'send-data-new-cd-dvd-drive-method',
     value: [UI_I_SendDataNewCdDvdDrive, number]

package/components/common/vm/actions/common/customizeHardware/virtualHardware/VirtualHardware.vue

@@ -9,7 +9,6 @@
     :files="props.files"
     :is-edit="props.isEdit"
     :storage="props.storage"
-    :storage-free="storageFree"
     :project="props.project"
     :max-memory="props.maxMemory"
     :cpu-models="props.cpuModels"
@@ -30,6 +29,7 @@
     :get-datastore-table-func="getDatastoreTableFunc"
     :state="state"
     :video-card="videoCard"
+    :pci-devices="pciDevicesLocal"
     :guest-machine-type="guestMachineType"
     :passthrough-devices="passthroughDevices"
     :mediated-devices="mediatedDevices"
@@ -53,7 +53,9 @@
     @set-invalid-hard-disk="onSetInvalidHardDisk(...$event)"
     @remove-error-by-title="emits('remove-error-by-title', $event)"
     @roll-back-cd-dvd-drive="onRollBackCdDvdDrive"
+    @set-invalid-pci-device="onSetInvalidPciDevice(...$event)"
     @get-active-device-child="emits('get-active-device-child', $event)"
+    @send-data-pci-devices-method="onSendDataPciDevicesMethod(...$event)"
     @send-data-new-hard-disk-method="onSendDataNewHardDiskMethod(...$event)"
     @send-data-new-cd-dvd-drive-method="sendDataNewCdDvdDriveMethod(...$event)"
   />
@@ -116,7 +118,7 @@ const props = withDefaults(
     hardDisks?: UI_I_SendDataNewHardDisk[] | null
     cdDvdDrives?: UI_I_SendDataNewCdDvdDrive[] | null
     videoCard?: UI_I_SendDataVideoCard
-    // pciDevices?: UI_I_SendDataNewPciDevice[]
+    pciDevices?: UI_I_SendDataNewPciDevice[]
     passthroughDevices?: UI_I_PciDevice[]
     mediatedDevices?: UI_I_MediatedDevice[]
     guestMachineType?: UI_I_OptionItem | null
@@ -129,7 +131,7 @@ const props = withDefaults(
     hardDisks: undefined,
     cdDvdDrives: undefined,
     videoCard: undefined,
-    // pciDevices: undefined,
+    pciDevices: undefined,
     passthroughDevices: undefined,
     mediatedDevices: undefined,
     guestMachineType: undefined,
@@ -217,24 +219,6 @@ if (!model.value.disk_devices?.length) {
 //   { immediate: true }
 // )
 
-const getDisksSize = (): number => {
-  return (
-    model.value.disk_devices.reduce(
-      (acum, disk) => (acum += disk.size || 0),
-      0
-    ) || 0
-  )
-}
-const initialDisksSize = getDisksSize()
-const storageFree = computed<number>(() => {
-  if (!props.storage) return 0
-  const free = (props.storage.capacity.free_mb || props.storage.free) as number // TODO fix
-
-  const disksSize = getDisksSize()
-
-  return free + initialDisksSize - (disksSize - initialDisksSize)
-})
-
 const addHardDisk = (
   create = true,
   size = 92_160, // 90GB
@@ -517,47 +501,30 @@ const defaultPciDevice: UI_I_SendDataNewPciDevice = {
 }
 const pciDevicesIndex = ref<number[]>([0])
 const pciDevicesType = ref<('new' | 'edit' | 'removed')[]>(['new'])
-// const pciDevicesLocal = ref<UI_I_SendDataNewPciDevice[]>([])
-if (!model.value.passthrough_pci_devices?.length) {
-  pciDevicesIndex.value = []
-  pciDevicesType.value = []
-} else {
-  model.value.passthrough_pci_devices.forEach((_disk, _index, array) => {
-    if (!props.isEdit && !props.isClone) return
+const pciDevicesLocal = ref<UI_I_SendDataNewPciDevice[]>([])
+watch(
+  () => props.pciDevices,
+  (newValue) => {
+    if ((!props.isEdit && !props.isClone) || !newValue) return
 
-    const count = array.length
+    const count = newValue?.length || 0
     pciDevicesIndex.value = [...Array(count).keys()]
+    pciDevicesLocal.value = newValue || []
     if (props.isEdit) {
       pciDevicesType.value = Array(count).fill('edit')
     } else if (props.isClone) {
-      pciDevicesType.value = Array(count).fill('clone') // before been new
+      pciDevicesType.value = Array(count).fill('new')
     }
-  })
-}
-// watch(
-//   () => props.pciDevices,
-//   (newValue) => {
-//     if ((!props.isEdit && !props.isClone) || !newValue) return
-//
-//     const count = newValue?.length || 0
-//     pciDevicesIndex.value = [...Array(count).keys()]
-//     pciDevicesLocal.value = newValue || []
-//     if (props.isEdit) {
-//       pciDevicesType.value = Array(count).fill('edit')
-//     } else if (props.isClone) {
-//       pciDevicesType.value = Array(count).fill('new')
-//     }
-//   },
-//   { immediate: true }
-// )
+  },
+  { immediate: true }
+)
 
 const addPciDevice = (): void => {
   const newIndex = (pciDevicesIndex.value.at(-1) ?? -1) + 1
   pciDevicesIndex.value.push(newIndex)
   pciDevicesType.value.push('new')
 
-  // pciDevicesLocal.value.push(useDeepCopy(defaultPciDevice))
-  if (!model.value.passthrough_pci_devices) model.value.passthrough_pci_devices = []
+  pciDevicesLocal.value.push(useDeepCopy(defaultPciDevice))
   model.value.passthrough_pci_devices.push(useDeepCopy(defaultPciDevice))
 }
 const onRemovePciDevice = (index: number): void => {
@@ -571,6 +538,13 @@ const onRemovePciDevice = (index: number): void => {
     model.value.passthrough_pci_devices.filter((_pciDevice, key: number) => {
       return removeIndex !== key
     })
+  pciDevicesLocal.value = pciDevicesLocal.value.filter(
+    (_pciDevice, key: number) => {
+      return removeIndex !== key
+    }
+  )
+
+  delete newPciDeviceInvalidKeys.value[index]
 }
 
 const isShowFileModal = ref<boolean>(false)
@@ -617,6 +591,14 @@ const sendDataNewCdDvdDriveMethod = (
       model.value.disk_devices[cdromIndexStart + index]?.boot_order || 0,
   }
 }
+const onSendDataPciDevicesMethod = (
+  data: UI_I_SendDataNewPciDevice,
+  index: number
+): void => {
+  model.value.passthrough_pci_devices[index] = {
+    ...data,
+  }
+}
 
 const onSetInvalidHardDisk = (invalid: boolean, index: number): void => {
   newHardDiskInvalidKeys.value[index] = invalid
@@ -626,10 +608,15 @@ const onSetInvalidNetwork = (invalid: boolean, key: number): void => {
   newNetworkInvalidKeys.value[key] = invalid
 }
 
+const onSetInvalidPciDevice = (invalid: boolean, key: number): void => {
+  newPciDeviceInvalidKeys.value[key] = invalid
+}
+
 const memoryInvalid = ref<boolean>(false)
 const videoCardInvalid = ref<boolean>(false)
 const newHardDiskInvalidKeys = ref<UI_I_InvalidKeys>({})
 const newNetworkInvalidKeys = ref<UI_I_InvalidKeys>({})
+const newPciDeviceInvalidKeys = ref<UI_I_InvalidKeys>({})
 
 watch(
   [
@@ -637,6 +624,7 @@ watch(
     memoryInvalid,
     newHardDiskInvalidKeys,
     newNetworkInvalidKeys,
+    newPciDeviceInvalidKeys,
     videoCardInvalid,
   ],
   () => {
@@ -669,6 +657,18 @@ watch(
         ' ' +
         (+key + 1)
     })
+    // let pciDevice = ''
+    // Object.keys(newPciDeviceInvalidKeys.value).forEach((key) => {
+    //   if (!newPciDeviceInvalidKeys.value[+key]) {
+    //     return
+    //   }
+    //
+    //   pciDevice +=
+    //     (pciDevice ? ', ' : '') +
+    //     localization.value.common.pciDevice +
+    //     ' ' +
+    //     (+key + 1)
+    // })
 
     emits('invalid', [cpu, memory, newHardDisk, newNetwork, videoCard])
   },

package/components/common/vm/actions/common/customizeHardware/virtualHardware/cpu/coresPerSocket/CoresPerSocket.vue

@@ -59,9 +59,9 @@ const socketOptions = computed<number[]>(() => {
 watch(
   socketOptions,
   () => {
-    // !socketOptions.value.includes(selectedCorePerSocketLocal.value) &&
-    !props.disabled &&
-      (selectedCorePerSocketLocal.value = socketOptions.value.at(-1) || 1)
+    !socketOptions.value.includes(selectedCorePerSocketLocal.value) &&
+      !props.disabled &&
+      (selectedCorePerSocketLocal.value = 1)
   },
   { deep: true }
 )

package/components/common/vm/actions/common/customizeHardware/virtualHardware/lib/models/interfaces.ts

@@ -105,11 +105,9 @@ export interface UI_I_SendDataNewCdDvdDrive {
 }
 export interface UI_I_SendDataNewPciDevice {
   address: string
-  vendor_name: string
   class_name: string
   device_name: string
-  mediated_device: boolean
-  mediated_device_uuid?: string
+  vendor_name: string
 }
 
 export interface UI_I_HardDisk {

package/components/common/vm/actions/common/customizeHardware/virtualHardware/newHardDisk/NewHardDisk.vue

@@ -115,7 +115,6 @@ const detach = defineModel<boolean>('detach', { required: true })
 const props = withDefaults(
   defineProps<{
     mainStorage: UI_I_DatastoreTableItem | null
-    mainStorageFree: number
     // hardDisk: UI_I_SendDataNewHardDisk
     type: UI_T_HardDiskType
     index: number
@@ -197,22 +196,17 @@ const label = computed<string>(() => {
 })
 
 const maxHardDisk = computed<number>(() => {
-  // // const hardDiskSizeMb = $binary.gbToMb(props.hardDisk.size)
-  //
-  // if (props.type === 'exist') return initialSize
-  //
-  // if (!storageLocal.value) return 0
-  // const free = (storageLocal.value.capacity.free_mb ||
-  //   storageLocal.value.free) as number // TODO fix
-  //
-  // if (props.type === 'edit') return free + initialSize
-  //
-  // return free
+  // const hardDiskSizeMb = $binary.gbToMb(props.hardDisk.size)
+
   if (props.type === 'exist') return initialSize
 
   if (!storageLocal.value) return 0
+  const free = (storageLocal.value.capacity.free_mb ||
+    storageLocal.value.capacity) as number // TODO fix
+
+  if (props.isEdit) return free + initialSize
 
-  return props.mainStorageFree + size.value
+  return free
 })
 const hardDiskTypeErrorLocalText = computed<string>(() => {
   if (size.value > maxHardDisk.value) {

package/components/common/vm/actions/common/customizeHardware/virtualHardware/newPciDevice/New.vue

@@ -46,15 +46,12 @@
         />
       </template>
 
-      <common-vm-actions-common-customize-hardware-virtual-hardware-new-pci-device-note
-        :pci-device-index="props.index"
-      />
+      <common-vm-actions-common-customize-hardware-virtual-hardware-new-pci-device-note />
     </template>
   </ui-stack-block>
 </template>
 
 <script setup lang="ts">
-import type { UI_I_Option } from '~/components/atoms/select/lib/models/interfaces'
 import type { UI_I_OptionItem } from '~/components/atoms/lib/models/interfaces'
 import type { UI_T_PciDeviceType } from '~/components/common/vm/actions/common/customizeHardware/virtualHardware/lib/models/types'
 import type {
@@ -65,13 +62,13 @@ import type {
 const selectedType = defineModel<UI_I_OptionItem>('selectedType', {
   required: true,
 })
-const directPathIo = defineModel<string>('directPathIo', {
+const directPathIo = defineModel<UI_I_PciDevice>('directPathIo', {
   required: true,
 })
-const dynamicDirectPathIo = defineModel<UI_I_PciDevice>('dynamicDirectPathIo', {
+const dynamicDirectPathIo = defineModel<string>('dynamicDirectPathIo', {
   required: true,
 })
-const nvidiaGridProfile = defineModel<UI_I_Option | null>('nvidiaGridProfile', {
+const nvidiaGridProfile = defineModel<string>('nvidiaGridProfile', {
   required: true,
 })