bfg-common 1.5.707 → 1.5.708

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

@@ -29,27 +29,23 @@ import type {
 import type { UI_I_Option } from '~/components/atoms/select/lib/models/interfaces'
 import { pciDeviceTypeOptionsFunc } from '~/components/common/vm/actions/common/customizeHardware/virtualHardware/newPciDevice/lib/config/options'
 
-const address = defineModel<string>('address')
-const vendorName = defineModel<string>('vendorName')
-const className = defineModel<string>('className')
-const deviceName = defineModel<string>('deviceName')
-const mediatedDevice = defineModel<boolean>('mediatedDevice')
-const mediatedDeviceUuid = defineModel<string>('mediatedDeviceUuid')
-
 const props = withDefaults(
   defineProps<{
     index: number
+    pciDevice: UI_I_SendDataNewPciDevice
     passthroughDevices: UI_I_PciDevice[]
     mediatedDevices: UI_I_MediatedDevice[]
     type: UI_T_PciDeviceType
     isEdit: boolean
     state?: string | number
+    // errorValidationFields: UI_I_ErrorValidationField<string>[]
   }>(),
   {
     state: undefined,
   }
 )
 const emits = defineEmits<{
+  (event: 'send-data', value: UI_I_SendDataNewPciDevice): void
   (event: 'remove'): void
 }>()
 
@@ -68,8 +64,7 @@ const isRunning = computed<boolean>(() => {
 })
 
 const isRemovable = computed<boolean>(() => {
-  // return !props.isEdit || !isRunning.value
-  return props.type !== 'edit' || !isRunning.value
+  return !props.isEdit || !isRunning.value
 })
 
 const label = computed<string>(() => {
@@ -80,17 +75,16 @@ const label = computed<string>(() => {
 })
 
 const selectedLabel = computed<string>(() => {
-  if (address.value) {
-    return `${address.value} | ${deviceName.value}`
+  if (props.pciDevice.address) {
+    return `${props.pciDevice.address} | ${props.pciDevice.device_name}`
   }
   switch (selectedType.value.value) {
     case 'direct_path_io':
-      return directPathIo.value
-      // return `${directPathIo.value?.address} | ${directPathIo.value?.device_name}`
+      return `${directPathIo.value?.address} | ${directPathIo.value?.device_name}`
     case 'dynamic_direct_path_io':
       return `${dynamicDirectPathIo.value?.address} | ${dynamicDirectPathIo.value?.device_name}`
     default:
-      return nvidiaGridProfile.value?.text || ''
+      return nvidiaGridProfile.value?.text
   }
 })
 
@@ -105,43 +99,47 @@ pciDeviceTypeOptions.value.forEach((option) => {
   if (!option.disabled) selectedType.value = option
 })
 
-const directPathIo = ref<string>('')
+const directPathIo = ref<string>('') /// TODO
 const dynamicDirectPathIo = ref<UI_I_PciDevice>(props.passthroughDevices[0])
 const nvidiaGridProfile = ref<UI_I_Option | null>(null)
 
-const setData = (): void => {
-  const passthroughDevice = props.passthroughDevices.find((device) => {
-    return (
-      device.class_name + '_' + device.address ===
-      className.value + '_' + address.value
-    )
-  })
-  if (passthroughDevice) {
-    dynamicDirectPathIo.value = passthroughDevice
-  }
+watch(
+  [() => props.pciDevice, () => props.mediatedDevices],
+  ([newValue1]) => {
+    // const passthroughDevice = props.passthroughDevices.find(
+    //   (item) => item.address === newValue.address
+    // )
+    // passthroughDevice && (directPathIo.value = passthroughDevice) // Todo change
+    if (newValue1) {
+      // directPathIo.value = newValue1
+      const passthroughDevice = props.passthroughDevices.find((device) => {
+        return (
+          device.class_name + '_' + device.address ===
+          newValue1.class_name + '_' + newValue1.address
+        )
+      })
+      if (passthroughDevice) {
+        dynamicDirectPathIo.value = passthroughDevice
+      }
 
-  const mediatedDevice = props.mediatedDevices.find((device) => {
-    return (
-      device.profile_name + '_' + device.root_device ===
-      className.value + '_' + address.value
-    )
-  })
-  if (mediatedDevice) {
-    nvidiaGridProfile.value = {
-      text: mediatedDevice.human_readable,
-      value: mediatedDevice.profile_name + '_' + mediatedDevice.root_device,
+      const mediatedDevice = props.mediatedDevices.find((device) => {
+        return (
+          device.profile_name + '_' + device.root_device ===
+          newValue1.class_name + '_' + newValue1.address
+        )
+      })
+      if (mediatedDevice) {
+        nvidiaGridProfile.value = {
+          text: mediatedDevice.human_readable,
+          value: mediatedDevice.profile_name + '_' + mediatedDevice.root_device,
+        }
+
+        selectedType.value =
+          pciDeviceTypeOptions.value.find(
+            (option) => option.value === 'nvidia_grid'
+          ) || selectedType.value
+      }
     }
-
-    selectedType.value =
-      pciDeviceTypeOptions.value.find(
-        (option) => option.value === 'nvidia_grid'
-      ) || selectedType.value
-  }
-}
-watch(
-  () => props.mediatedDevices,
-  () => {
-    setData() // for edit
   },
   { immediate: true, deep: true }
 )
@@ -192,12 +190,7 @@ const sendData = computed<UI_I_SendDataNewPciDevice>(() => {
 watch(
   sendData,
   (newValue) => {
-    address.value = newValue.address
-    vendorName.value = newValue.vendor_name
-    className.value = newValue.class_name
-    deviceName.value = newValue.device_name
-    mediatedDevice.value = newValue.mediated_device
-    mediatedDeviceUuid.value = newValue.mediated_device_uuid || ''
+    emits('send-data', props.type === 'edit' ? props.pciDevice : newValue)
   },
   { immediate: true }
 )

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

@@ -56,7 +56,6 @@
 </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 {
@@ -67,13 +66,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,
 })
 
@@ -92,4 +91,8 @@ const emits = defineEmits<{
 }>()
 </script>
 
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+#network-connect {
+  margin-right: 4px;
+}
+</style>

package/components/common/vm/actions/common/customizeHardware/virtualHardware/newPciDevice/directPathIo/DirectPathIo.vue

@@ -7,7 +7,9 @@
 </template>
 
 <script lang="ts" setup>
-const model = defineModel<string>({ required: true })
+import type { UI_I_ConfigureAllPciDevicesItem } from '~/lib/models/store/host/interfaces'
+
+const model = defineModel<UI_I_ConfigureAllPciDevicesItem>({ required: true })
 
 const props = defineProps<{
   pciDeviceIndex: number

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

@@ -1,7 +1,7 @@
 <template>
   <ui-stack-block
-    :has-children="false"
-    :test-id="`pci-device-direct-path-io-stack-block-${props.pciDeviceIndex}`"
+      :has-children="false"
+      :test-id="`pci-device-direct-path-io-stack-block-${props.pciDeviceIndex}`"
   >
     <template #stackBlockKey>
       {{ localization.common.pciDevice }}

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

@@ -1,8 +1,8 @@
 <template>
   <div>
     <atoms-stack-block
-      :has-children="false"
-      :test-id="`pci-device-direct-path-io-stack-block-${props.pciDeviceIndex}`"
+        :has-children="false"
+        :test-id="`pci-device-direct-path-io-stack-block-${props.pciDeviceIndex}`"
     >
       <template #stackBlockContent>
         <input

package/components/common/vm/actions/common/customizeHardware/virtualHardware/newPciDevice/dynamicDirectPathIo/DynamicDirectPathIo.vue

@@ -10,7 +10,7 @@
 <script lang="ts" setup>
 import type { UI_I_PciDevice } from '~/lib/models/store/vm/interfaces'
 
-const model = defineModel<UI_I_PciDevice>({ required: true })
+const model = defineModel<string>({ required: true })
 
 const props = defineProps<{
   pciDeviceIndex: number

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

@@ -21,9 +21,10 @@
 
 <script lang="ts" setup>
 import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_ConfigureAllPciDevicesItem } from '~/lib/models/store/host/interfaces'
 import type { UI_I_PciDevice } from '~/lib/models/store/vm/interfaces'
 
-const model = defineModel<UI_I_PciDevice>()
+const model = defineModel<UI_I_ConfigureAllPciDevicesItem>()
 
 const props = defineProps<{
   pciDeviceIndex: number

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

@@ -28,9 +28,10 @@
 
 <script lang="ts" setup>
 import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_ConfigureAllPciDevicesItem } from '~/lib/models/store/host/interfaces'
 import type { UI_I_PciDevice } from '~/lib/models/store/vm/interfaces'
 
-const model = defineModel<UI_I_PciDevice>()
+const model = defineModel<UI_I_ConfigureAllPciDevicesItem>()
 
 const props = defineProps<{
   pciDeviceIndex: number

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

@@ -27,7 +27,7 @@
 import type { UI_I_Localization } from '~/lib/models/interfaces'
 import type { UI_I_Option } from '~/components/atoms/select/lib/models/interfaces'
 
-const model = defineModel<UI_I_Option | null>({ required: true })
+const model = defineModel<string>({ required: true })
 
 const props = defineProps<{
   options: UI_I_Option[]

package/components/common/vm/actions/common/customizeHardware/virtualHardware/newPciDevice/nvidiaGrid/NvidiaGrid.vue

@@ -11,7 +11,7 @@
 import type { UI_I_Option } from '~/components/atoms/select/lib/models/interfaces'
 import type { UI_I_MediatedDevice } from '~/lib/models/store/vm/interfaces'
 
-const model = defineModel<UI_I_Option | null>({ required: true })
+const model = defineModel<string>({ required: true })
 
 const props = defineProps<{
   pciDeviceIndex: number

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

@@ -42,7 +42,7 @@
 import type { UI_I_Localization } from '~/lib/models/interfaces'
 import type { UI_I_Option } from '~/components/atoms/select/lib/models/interfaces'
 
-const model = defineModel<UI_I_Option | null>({ required: true })
+const model = defineModel<string>({ required: true })
 
 const props = defineProps<{
   options: UI_I_Option[]

package/components/common/vm/actions/common/customizeHardware/vmoptions/bootOptions/order/Order.vue

@@ -1,156 +1,156 @@
-<template>
-  <div>
-    <component
-      :is="currentComponent"
-      :boot-list="bootList"
-      :is-disabled="props.isDisabled"
-      @change-order="onChangeOrder"
-      @update-boot-list="onBootListUpdate"
-    />
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { UI_I_BootItem } from '~/components/common/vm/actions/common/customizeHardware/vmoptions/bootOptions/order/lib/models/interfaces'
-import type { UI_I_DropEvent } from '~/components/atoms/list/dragDropList/lib/config/events'
-import type { UI_I_CreateVmData } from '~/components/common/vm/actions/common/lib/models/interfaces'
-
-const model = defineModel<UI_I_CreateVmData>({ required: true })
-
-const props = defineProps<{
-  isDisabled: boolean
-}>()
-
-const { $store }: any = useNuxtApp()
-const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
-const currentComponent = computed(() =>
-  isNewView.value
-    ? defineAsyncComponent(() => import('./New.vue'))
-    : defineAsyncComponent(() => import('./Old.vue'))
-)
-
-const bootList = ref<UI_I_BootItem[]>([])
-
-// Используем computed для автоматического обновления bootList при изменении модели
-const hardDisksAndNetworks = computed(() => [
-  model.value.disk_devices?.filter((disk) => disk.device_type !== 'cdrom') ||
-    [],
-  model.value.disk_devices?.filter((disk) => disk.device_type === 'cdrom') ||
-    [],
-  model.value.network_devices || [],
-])
-
-// Watcher для обновления bootList при изменении модели
-watch(
-  hardDisksAndNetworks,
-  ([hardDisks, cdDvdDrives, networks]) => {
-    const hardDiskItems: UI_I_BootItem[] = hardDisks.map((item, index) => {
-      const order = item.boot_order || 0
-      return {
-        order,
-        isChecked: !!order,
-        text: `disk${index}`,
-        iconClassName: 'icon-disk',
-        type: 'disk' as const,
-        name: `${item.source}_${index}`,
-        testId: `select-disk-value-${index + 1}`,
-      }
-    })
-
-    const cdDvdDriveItems: UI_I_BootItem[] = cdDvdDrives.map((item, index) => {
-      const order = item.boot_order || 0
-      return {
-        order,
-        isChecked: !!order,
-        text: `cdrom${index}`,
-        iconClassName: 'icon-disk',
-        type: 'cdDvd' as const,
-        name: `${item.source}_${hardDisks.length + index}`,
-        testId: `select-cd-dvd-value-${index + 1}`,
-      }
-    })
-
-    const networkItems: UI_I_BootItem[] = networks.map((item, index) => {
-      const order = item.boot_order || 0
-      return {
-        order,
-        isChecked: !!order,
-        text: item.mac || 'undefined',
-        iconClassName: 'vsphere-icon-network',
-        type: 'nic' as const,
-        name: `${item.network}_${index}`,
-        testId: `select-nic-value-${index + 1}`,
-      }
-    })
-
-    bootList.value = [...hardDiskItems, ...cdDvdDriveItems, ...networkItems]
-      .filter((item) => item.order >= 0)
-      .sort((a, b) => a.order - b.order)
-  },
-  { deep: true, immediate: true }
-)
-
-// Обработчик изменения порядка через drag & drop
-const onChangeOrder = (event: UI_I_DropEvent): void => {
-  const updatedList = [...bootList.value]
-  const movedItem = updatedList.find((item) => item.name === event.target.name)
-
-  if (!movedItem) return
-
-  // Удаляем элемент из текущей позиции
-  const fromIndex = updatedList.indexOf(movedItem)
-  updatedList.splice(fromIndex, 1)
-
-  // Вставляем элемент в новую позицию
-  updatedList.splice(event.toPosition, 0, movedItem)
-
-  // Обновляем порядок всех элементов
-  updatedList.forEach((item, index) => {
-    item.order = index + 1
-  })
-
-  bootList.value = updatedList
-  updateModelFromBootList(updatedList)
-}
-
-// Обработчик обновления bootList (при изменении чекбоксов)
-const onBootListUpdate = (updatedBootList: UI_I_BootItem[]): void => {
-  bootList.value = updatedBootList
-  updateModelFromBootList(updatedBootList)
-}
-
-// Функция для обновления модели на основе bootList
-const updateModelFromBootList = (bootItems: UI_I_BootItem[]): void => {
-  // Сначала сбрасываем все boot_order
-  model.value.disk_devices?.forEach((disk) => {
-    disk.boot_order = 0
-  })
-  model.value.network_devices?.forEach((network) => {
-    network.boot_order = 0
-  })
-
-  // Затем устанавливаем boot_order только для выбранных элементов
-  let currentOrder = 1
-  bootItems.forEach((bootItem) => {
-    if (!bootItem.isChecked) return
-
-    if (bootItem.type === 'nic') {
-      const [networkName, indexStr] = bootItem.name.split('_')
-      const index = parseInt(indexStr, 10)
-      const network = model.value.network_devices?.[index]
-      if (network && network.network === networkName) {
-        network.boot_order = currentOrder++
-      }
-    } else {
-      const [source, indexStr] = bootItem.name.split('_')
-      const index = parseInt(indexStr, 10)
-      const disk = model.value.disk_devices?.[index]
-      if (disk && disk.source+'' === source) {
-        disk.boot_order = currentOrder++
-      }
-    }
-  })
-}
-</script>
-
-<style scoped lang="scss"></style>
+<template>
+  <div>
+    <component
+      :is="currentComponent"
+      :boot-list="bootList"
+      :is-disabled="props.isDisabled"
+      @change-order="onChangeOrder"
+      @update-boot-list="onBootListUpdate"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_BootItem } from '~/components/common/vm/actions/common/customizeHardware/vmoptions/bootOptions/order/lib/models/interfaces'
+import type { UI_I_DropEvent } from '~/components/atoms/list/dragDropList/lib/config/events'
+import type { UI_I_CreateVmData } from '~/components/common/vm/actions/common/lib/models/interfaces'
+
+const model = defineModel<UI_I_CreateVmData>({ required: true })
+
+const props = defineProps<{
+  isDisabled: boolean
+}>()
+
+const { $store }: any = useNuxtApp()
+const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
+const currentComponent = computed(() =>
+  isNewView.value
+    ? defineAsyncComponent(() => import('./New.vue'))
+    : defineAsyncComponent(() => import('./Old.vue'))
+)
+
+const bootList = ref<UI_I_BootItem[]>([])
+
+// Используем computed для автоматического обновления bootList при изменении модели
+const hardDisksAndNetworks = computed(() => [
+  model.value.disk_devices?.filter((disk) => disk.device_type !== 'cdrom') ||
+    [],
+  model.value.disk_devices?.filter((disk) => disk.device_type === 'cdrom') ||
+    [],
+  model.value.network_devices || [],
+])
+
+// Watcher для обновления bootList при изменении модели
+watch(
+  hardDisksAndNetworks,
+  ([hardDisks, cdDvdDrives, networks]) => {
+    const hardDiskItems: UI_I_BootItem[] = hardDisks.map((item, index) => {
+      const order = item.boot_order || 0
+      return {
+        order,
+        isChecked: !!order,
+        text: `disk${index}`,
+        iconClassName: 'icon-disk',
+        type: 'disk' as const,
+        name: `${item.source}_${index}`,
+        testId: `select-disk-value-${index + 1}`,
+      }
+    })
+
+    const cdDvdDriveItems: UI_I_BootItem[] = cdDvdDrives.map((item, index) => {
+      const order = item.boot_order || 0
+      return {
+        order,
+        isChecked: !!order,
+        text: `cdrom${index}`,
+        iconClassName: 'icon-disk',
+        type: 'cdDvd' as const,
+        name: `${item.source}_${hardDisks.length + index}`,
+        testId: `select-cd-dvd-value-${index + 1}`,
+      }
+    })
+
+    const networkItems: UI_I_BootItem[] = networks.map((item, index) => {
+      const order = item.boot_order || 0
+      return {
+        order,
+        isChecked: !!order,
+        text: item.mac || 'undefined',
+        iconClassName: 'vsphere-icon-network',
+        type: 'nic' as const,
+        name: `${item.network}_${index}`,
+        testId: `select-nic-value-${index + 1}`,
+      }
+    })
+
+    bootList.value = [...hardDiskItems, ...cdDvdDriveItems, ...networkItems]
+      .filter((item) => item.order >= 0)
+      .sort((a, b) => a.order - b.order)
+  },
+  { deep: true, immediate: true }
+)
+
+// Обработчик изменения порядка через drag & drop
+const onChangeOrder = (event: UI_I_DropEvent): void => {
+  const updatedList = [...bootList.value]
+  const movedItem = updatedList.find((item) => item.name === event.target.name)
+
+  if (!movedItem) return
+
+  // Удаляем элемент из текущей позиции
+  const fromIndex = updatedList.indexOf(movedItem)
+  updatedList.splice(fromIndex, 1)
+
+  // Вставляем элемент в новую позицию
+  updatedList.splice(event.toPosition, 0, movedItem)
+
+  // Обновляем порядок всех элементов
+  updatedList.forEach((item, index) => {
+    item.order = index + 1
+  })
+
+  bootList.value = updatedList
+  updateModelFromBootList(updatedList)
+}
+
+// Обработчик обновления bootList (при изменении чекбоксов)
+const onBootListUpdate = (updatedBootList: UI_I_BootItem[]): void => {
+  bootList.value = updatedBootList
+  updateModelFromBootList(updatedBootList)
+}
+
+// Функция для обновления модели на основе bootList
+const updateModelFromBootList = (bootItems: UI_I_BootItem[]): void => {
+  // Сначала сбрасываем все boot_order
+  model.value.disk_devices?.forEach((disk) => {
+    disk.boot_order = 0
+  })
+  model.value.network_devices?.forEach((network) => {
+    network.boot_order = 0
+  })
+
+  // Затем устанавливаем boot_order только для выбранных элементов
+  let currentOrder = 1
+  bootItems.forEach((bootItem) => {
+    if (!bootItem.isChecked) return
+
+    if (bootItem.type === 'nic') {
+      const [networkName, indexStr] = bootItem.name.split('_')
+      const index = parseInt(indexStr, 10)
+      const network = model.value.network_devices?.[index]
+      if (network && network.network === networkName) {
+        network.boot_order = currentOrder++
+      }
+    } else {
+      const [source, indexStr] = bootItem.name.split('_')
+      const index = parseInt(indexStr, 10)
+      const disk = model.value.disk_devices?.[index]
+      if (disk && disk.source+'' === source) {
+        disk.boot_order = currentOrder++
+      }
+    }
+  })
+}
+</script>
+
+<style scoped lang="scss"></style>