bfg-common 1.5.699 → 1.5.701

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

@@ -1,680 +1,706 @@
-<template>
-  <component
-    :is="currentComponent"
-    v-model="model"
-    v-model:cpu-invalid="cpuInvalid"
-    v-model:memory-invalid="memoryInvalid"
-    v-model:video-card-invalid="videoCardInvalid"
-    :nodes="props.nodes"
-    :files="props.files"
-    :is-edit="props.isEdit"
-    :storage="props.storage"
-    :storage-free="storageFree"
-    :project="props.project"
-    :max-memory="props.maxMemory"
-    :cpu-models="props.cpuModels"
-    :datastore="props.datastore"
-    :is-datastore-loading="props.isDatastoreLoading"
-    :networks-type="networksType"
-    :networks-table="props.networksTable"
-    :dropdown-items="dropdownItems"
-    :hard-disks-type="hardDisksType"
-    :networks-index="networksIndex"
-    :hard-disks-index="hardDisksIndex"
-    :pci-devices-type="pciDevicesType"
-    :is-show-file-modal="isShowFileModal"
-    :pci-devices-index="pciDevicesIndex"
-    :cd-dvd-drives-type="cdDvdDrivesType"
-    :cd-dvd-drives-index="cdDvdDrivesIndex"
-    :error-validation-fields="errorValidationFields"
-    :get-datastore-table-func="getDatastoreTableFunc"
-    :state="state"
-    :video-card="videoCard"
-    :guest-machine-type="guestMachineType"
-    :passthrough-devices="passthroughDevices"
-    :mediated-devices="mediatedDevices"
-    :vm-cpu-help-text-second="vmCpuHelpTextSecond"
-    :compute-resource="props.computeResource"
-    :compatibility-info="props.compatibilityInfo"
-    :network-value-prop="networkValueProp"
-    @add-device="onAddDevice"
-    @get-storage="emits('get-storage', $event)"
-    @remove-network="onRemoveNetwork"
-    @hide-file-modal="isShowFileModal = false"
-    @remove-hard-disk="onRemoveHardDisk(...$event)"
-    @remove-pci-device="onRemovePciDevice"
-    @get-networks-table="emits('get-networks-table', $event)"
-    @add-exist-hard-disk="onAddExistHardDisk"
-    @roll-back-hard-disk="onRollBackHardDisk"
-    @set-invalid-network="onSetInvalidNetwork(...$event)"
-    @remove-cd-dvd-drive="onRemoveCdDvdDrive(...$event)"
-    @show-datastore-child="emits('show-datastore-child', $event)"
-    @get-folders-or-files="emits('get-folders-or-files', $event)"
-    @set-invalid-hard-disk="onSetInvalidHardDisk(...$event)"
-    @remove-error-by-title="emits('remove-error-by-title', $event)"
-    @roll-back-cd-dvd-drive="onRollBackCdDvdDrive"
-    @get-active-device-child="emits('get-active-device-child', $event)"
-    @send-data-new-hard-disk-method="onSendDataNewHardDiskMethod(...$event)"
-    @send-data-new-cd-dvd-drive-method="sendDataNewCdDvdDriveMethod(...$event)"
-  />
-</template>
-
-<script setup lang="ts">
-import type { UI_T_Project } from '~/lib/models/types'
-import type { UI_I_DatastoreTableItem } from '~/lib/models/store/storage/interfaces'
-import type { UI_I_NetworkTableItem } from '~/lib/models/store/network/interfaces'
-import type { UI_I_TablePayload } from '~/lib/models/table/interfaces'
-import type { UI_I_FolderOrFileTreePayload } from '~/lib/models/store/storage/interfaces'
-import type { UI_I_FileTreeNode } from '~/components/lib/models/interfaces'
-import type {
-  UI_I_SendDataNewHardDisk,
-  UI_I_SendDataVideoCard,
-  UI_I_InvalidKeys,
-  UI_I_SendDataNewCdDvdDrive,
-  // UI_I_HardDisk,
-  UI_I_SendDataNewPciDevice,
-} 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_HardDiskType,
-  UI_T_NetworkType,
-  UI_T_CdDvdType,
-} from '~/components/common/vm/actions/common/customizeHardware/virtualHardware/lib/models/types'
-import type { UI_I_OptionItem } from '~/components/atoms/lib/models/interfaces'
-import type {
-  UI_I_DropdownTreeItem,
-  UI_I_DropdownTreeItemChild,
-} from '~/components/atoms/dropdown/tree/lib/models/interfaces'
-import type { UI_I_Localization } from '~/lib/models/interfaces'
-import type {
-  UI_I_MediatedDevice,
-  UI_I_PciDevice,
-} from '~/lib/models/store/vm/interfaces'
-import type { UI_I_TreeNode } from '~/components/common/recursionTree/lib/models/interfaces'
-import type { UI_I_CreateVmData } from '~/components/common/vm/actions/common/lib/models/interfaces'
-import { dropdownItemsFunc } from './lib/config/dropdownItems'
-
-const model = defineModel<UI_I_CreateVmData>({ required: true })
-
-const props = withDefaults(
-  defineProps<{
-    storage: UI_I_DatastoreTableItem | null
-    cpuModels: UI_I_OptionItem[]
-    maxMemory: number
-    isEdit: boolean
-    isClone: boolean
-    errorValidationFields: UI_I_ErrorValidationField[]
-    nodes: UI_I_FileTreeNode[]
-    files: UI_I_FileTreeNode[]
-    networksTable: UI_I_NetworkTableItem[]
-    getDatastoreTableFunc: (payload: UI_I_TablePayload) => Promise<void>
-    datastore: UI_I_DatastoreTableItem[]
-    isDatastoreLoading: boolean
-    project: UI_T_Project
-    state?: string | number
-    vmCpuHelpTextSecond?: string
-    hardDisks?: UI_I_SendDataNewHardDisk[] | null
-    cdDvdDrives?: UI_I_SendDataNewCdDvdDrive[] | null
-    videoCard?: UI_I_SendDataVideoCard
-    // pciDevices?: UI_I_SendDataNewPciDevice[]
-    passthroughDevices?: UI_I_PciDevice[]
-    mediatedDevices?: UI_I_MediatedDevice[]
-    guestMachineType?: UI_I_OptionItem | null
-    computeResource?: UI_I_TreeNode | null
-    compatibilityInfo?: string
-  }>(),
-  {
-    state: undefined,
-    vmCpuHelpTextSecond: undefined,
-    hardDisks: undefined,
-    cdDvdDrives: undefined,
-    videoCard: undefined,
-    // pciDevices: undefined,
-    passthroughDevices: undefined,
-    mediatedDevices: undefined,
-    guestMachineType: undefined,
-    computeResource: undefined,
-    compatibilityInfo: undefined,
-  }
-)
-const emits = defineEmits<{
-  (event: 'invalid', value: string[]): void
-  (event: 'get-storage', value: UI_I_TablePayload): void
-  (event: 'get-folders-or-files', value: UI_I_FolderOrFileTreePayload): void
-  (event: 'get-active-device-child', value: UI_I_FileTreeNode): void
-  (event: 'show-datastore-child', value: UI_I_FileTreeNode): void
-  (event: 'remove-error-by-title', value: string): void
-  (event: 'get-networks-table', value: UI_I_TablePayload): void
-  (event: 'get-pci-devices'): void
-}>()
-
-const { $store, $binary }: any = useNuxtApp()
-const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
-const currentComponent = computed(() =>
-  isNewView.value
-    ? defineAsyncComponent(() => import('./New.vue'))
-    : defineAsyncComponent(() => import('./Old.vue'))
-)
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-const dropdownItems = computed<UI_I_DropdownTreeItem[]>(() =>
-  dropdownItemsFunc(
-    localization.value,
-    props.state,
-    props.passthroughDevices,
-    props.mediatedDevices
-  )
-)
-
-const hardDisksIndex = ref<number[]>([0])
-const hardDisksType = ref<UI_T_HardDiskType[]>(['new'])
-// const hardDisksLocal = ref<UI_I_SendDataNewHardDisk[]>([
-//   {
-//     create: true,
-//     size: 90,
-//     source: '',
-//     boot_order: -1,
-//   },
-// ])
-if (!model.value.disk_devices?.length) {
-  hardDisksType.value = []
-  hardDisksIndex.value = []
-} else {
-  model.value.disk_devices
-    .filter((disk) => disk.device_type !== 'cdrom')
-    .forEach((_disk, _index, array) => {
-      if (!props.isEdit && !props.isClone) return
-
-      const count = array.length
-      hardDisksIndex.value = [...Array(count).keys()]
-      if (props.isEdit) {
-        hardDisksType.value = Array(count).fill('edit')
-      } else if (props.isClone) {
-        hardDisksType.value = Array(count).fill('clone')
-      }
-    })
-}
-
-// watch(
-//   () => props.hardDisks,
-//   (newValue) => {
-//     if ((!props.isEdit && !props.isClone) || !newValue) return
-//
-//     const count = newValue?.length || 0
-//     hardDisksIndex.value = [...Array(count).keys()]
-//     hardDisksLocal.value = newValue
-//     if (props.isEdit) {
-//       hardDisksType.value = Array(count).fill('edit')
-//     } else if (props.isClone) {
-//       hardDisksType.value = Array(count).fill('clone')
-//       hardDisksLocal.value = newValue.map((hardDisk) => {
-//         hardDisk.create = true
-//         return hardDisk
-//       })
-//     }
-//   },
-//   { 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
-  source = '',
-  type: UI_T_HardDiskType = 'new',
-  provisioned_type?: number // При добавлении существующей
-): void => {
-  const newIndex = (hardDisksIndex.value.at(-1) ?? -1) + 1
-  hardDisksIndex.value.push(newIndex)
-  hardDisksType.value.push(type)
-
-  let provisionType = 'thick'
-  if (provisioned_type === 1) provisionType = 'thin'
-
-  model.value.disk_devices = [
-    ...model.value.disk_devices.filter((disk) => disk.device_type !== 'cdrom'),
-    // {
-    //   create,
-    //   size,
-    //   source,
-    //   attach: true,
-    //   boot_order: 0, // Убираем галочку
-    //   provision_type: provisionType,
-    // },
-    {
-      create,
-      size,
-      source,
-      bus: 'virtio',
-      storage_id: '',
-      provision_type: 'thick',
-      disk_mode: 'dependent',
-      boot_order: 0, // Убираем галочку
-      device_type: 'disk',
-      sharing: false,
-      shares: 0,
-      cache: 'none',
-      io: '',
-      limit_iops: 0,
-      attach: true,
-    },
-    ...model.value.disk_devices.filter((disk) => disk.device_type === 'cdrom'),
-  ]
-  // hardDisksLocal.value.push({
-  //   create,
-  //   size,
-  //   source,
-  //   attach: true,
-  //   boot_order: 0, // Убираем галочку
-  //   provision_type: provisionType,
-  // })
-}
-const onAddExistHardDisk = (file: UI_I_FileTreeNode): void => {
-  addHardDisk(
-    false,
-    $binary.bToMb(file.size),
-    file.path,
-    'exist',
-    file.provisioned_type
-  )
-}
-const onRemoveHardDisk = (
-  index: number,
-  hardDisk: UI_I_SendDataNewHardDisk
-): void => {
-  const removeIndex = hardDisksIndex.value.indexOf(index)
-
-  if (!hardDisk.create && !hardDisk.attach) {
-    hardDisksType.value = hardDisksType.value.map((item, key) => {
-      if (key === removeIndex) return 'removed'
-      return item
-    })
-    return
-  }
-
-  hardDisksIndex.value = hardDisksIndex.value.filter((item) => item !== index)
-  hardDisksType.value = hardDisksType.value.filter(
-    (_item, key) => key !== removeIndex
-  )
-
-  model.value.disk_devices = model.value.disk_devices.filter(
-    (_hardDisk, key: number) => {
-      return removeIndex !== key
-    }
-  )
-  // hardDisksLocal.value = hardDisksLocal.value.filter(
-  //   (_hardDisk, key: number) => {
-  //     return removeIndex !== key
-  //   }
-  // )
-
-  delete newHardDiskInvalidKeys.value[index]
-}
-const onRollBackHardDisk = (index: number): void => {
-  const removeIndex = hardDisksIndex.value.indexOf(index)
-  hardDisksType.value = hardDisksType.value.map((item, key) => {
-    if (key === removeIndex) return 'edit'
-    return item
-  })
-}
-
-const networkValueProp = props.project === 'sphere' ? 'network' : 'net_bridge'
-const networksType = ref<UI_T_NetworkType[]>(['new'])
-const networksIndex = ref<number[]>([0])
-if (!model.value.network_devices?.length) {
-  networksType.value = []
-  networksIndex.value = []
-} else {
-  model.value.network_devices.forEach(() => {
-    if (!props.isEdit && !props.isClone) return
-
-    const count = model.value.network_devices.length || 0
-    networksIndex.value = [...Array(count).keys()]
-    if (props.isEdit) {
-      networksType.value = Array(count).fill('edit')
-    } else if (props.isClone) {
-      networksType.value = Array(count).fill('clone')
-    }
-  })
-}
-
-const defaultNetwork = {
-  network: '',
-  net_bridge: '',
-  mac: '',
-  target: '',
-  model: 'virtio',
-  boot_order: 0,
-}
-const addNetwork = (): void => {
-  const index = (networksIndex.value.at(-1) ?? -1) + 1
-  networksIndex.value.push(index)
-  networksType.value.push('new')
-
-  model.value.network_devices.push({
-    ...useDeepCopy(defaultNetwork),
-  })
-}
-const onRemoveNetwork = (index: number): void => {
-  const removeIndex = networksIndex.value.indexOf(index)
-  networksIndex.value = networksIndex.value.filter((item) => item !== index)
-  networksType.value = networksType.value.filter(
-    (_item, key) => key !== removeIndex
-  )
-  model.value.network_devices = model.value.network_devices.filter(
-    (_network, key: number) => removeIndex !== key
-  )
-
-  delete newNetworkInvalidKeys.value[index]
-}
-
-// const defaultCdDvdDriver: UI_I_SendDataNewCdDvdDrive = {
-//   create: false,
-//   attach: false,
-//   source: '',
-//   bus: '',
-//   device_type: 'cdrom',
-//   boot_order: -1,
-// }
-const defaultCdDvdDriver: UI_I_SendDataNewCdDvdDrive = {
-  source: '',
-  storage_id: '',
-  device_type: 'cdrom',
-  bus: '',
-  target: '',
-  boot_order: 0,
-  provision_type: 'thick',
-  disk_mode: 'dependent',
-  sharing: false,
-  read_only: true,
-  shares: 0,
-  cache: 'none',
-  io: 'native',
-  limit_iops: 0,
-  discard: 'unmap',
-  attach: false,
-  detach: false,
-  remove: false,
-  create: false,
-}
-// const cdDvdDrivesLocal = ref<UI_I_SendDataNewCdDvdDrive[]>([
-//   useDeepCopy(defaultCdDvdDriver),
-// ])
-const cdDvdDrivesIndex = ref<number[]>([0])
-const cdDvdDrivesType = ref<UI_T_CdDvdType[]>(['new'])
-if (!model.value.disk_devices?.length) {
-  cdDvdDrivesIndex.value = []
-  cdDvdDrivesType.value = []
-} else {
-  model.value.disk_devices
-    .filter((disk) => disk.device_type === 'cdrom')
-    .forEach((_disk, _index, array) => {
-      if (!props.isEdit && !props.isClone) return
-
-      const count = array.length
-      cdDvdDrivesIndex.value = [...Array(count).keys()]
-      if (props.isEdit) {
-        cdDvdDrivesType.value = Array(count).fill('edit')
-      } else if (props.isClone) {
-        cdDvdDrivesType.value = Array(count).fill('clone')
-      }
-    })
-}
-// watch(
-//   () => props.cdDvdDrives,
-//   (newValue) => {
-//     if ((!props.isEdit && !props.isClone) || !newValue) return
-//
-//     // cdDvdDrivesLocal.value = newValue
-//     // cdDvdDrivesType.value = Array(newValue.length).fill('edit')
-//     const count = newValue?.length || 0
-//     cdDvdDrivesIndex.value = [...Array(count).keys()]
-//     cdDvdDrivesLocal.value = newValue
-//     if (props.isEdit) {
-//       cdDvdDrivesType.value = Array(count).fill('edit')
-//     } else if (props.isClone) {
-//       cdDvdDrivesType.value = Array(count).fill('new')
-//     }
-//   },
-//   { immediate: true }
-// )
-const addCdDvdDrive = (): void => {
-  const value = (cdDvdDrivesIndex.value.at(-1) ?? -1) + 1
-  cdDvdDrivesIndex.value.push(value)
-  cdDvdDrivesType.value.push('new')
-  model.value.disk_devices.push({
-    ...useDeepCopy(defaultCdDvdDriver),
-    attach: true,
-    boot_order: 0, // Убираем галочку
-  })
-  // cdDvdDrivesLocal.value.push({
-  //   ...useDeepCopy(defaultCdDvdDriver),
-  //   attach: true,
-  //   boot_order: 0, // Убираем галочку
-  // })
-}
-const onRemoveCdDvdDrive = (
-  index: number,
-  cdDvdDrive: UI_I_SendDataNewCdDvdDrive
-): void => {
-  const removeIndex = cdDvdDrivesIndex.value.indexOf(index)
-
-  // if (!cdDvdDrive.create && !cdDvdDrive.attach) {
-  if (cdDvdDrivesType.value[index] === 'edit' && !cdDvdDrive.attach) {
-    cdDvdDrivesType.value = cdDvdDrivesType.value.map((item, key) => {
-      if (key === removeIndex) return 'removed'
-      return item
-    })
-    return
-  }
-
-  cdDvdDrivesIndex.value = cdDvdDrivesIndex.value.filter(
-    (cdDvdDrive) => cdDvdDrive !== index
-  )
-  cdDvdDrivesType.value = cdDvdDrivesType.value.filter(
-    (_item, key) => key !== index
-  )
-
-  const hardDiskCount = hardDisksIndex.value.length
-  model.value.disk_devices = model.value.disk_devices.filter(
-    (_cdDvdDrive, key: number) => hardDiskCount + removeIndex !== key
-  )
-  // cdDvdDrivesLocal.value = cdDvdDrivesLocal.value.filter(
-  //   (_cdDvdDrive, key: number) => removeIndex !== key
-  // )
-}
-const onRollBackCdDvdDrive = (index: number): void => {
-  const removeIndex = cdDvdDrivesIndex.value.indexOf(index)
-  cdDvdDrivesType.value = cdDvdDrivesType.value.map((item, key) => {
-    if (key === removeIndex) return 'edit'
-    return item
-  })
-}
-
-const defaultPciDevice: UI_I_SendDataNewPciDevice = {
-  address: '',
-  vendor_name: '',
-  class_name: '',
-  device_name: '',
-}
-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 count = array.length
-    pciDevicesIndex.value = [...Array(count).keys()]
-    if (props.isEdit) {
-      pciDevicesType.value = Array(count).fill('edit')
-    } else if (props.isClone) {
-      pciDevicesType.value = Array(count).fill('clone') // before been 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 }
-// )
-
-const addPciDevice = (): void => {
-  const newIndex = (pciDevicesIndex.value.at(-1) ?? -1) + 1
-  pciDevicesIndex.value.push(newIndex)
-  pciDevicesType.value.push('new')
-
-  // pciDevicesLocal.value.push(useDeepCopy(defaultPciDevice))
-  model.value.passthrough_pci_devices.push(useDeepCopy(defaultPciDevice))
-}
-const onRemovePciDevice = (index: number): void => {
-  const removeIndex = pciDevicesIndex.value.indexOf(index)
-  pciDevicesIndex.value = pciDevicesIndex.value.filter((item) => item !== index)
-  pciDevicesType.value = pciDevicesType.value.filter(
-    (_item, key) => key !== removeIndex
-  )
-
-  model.value.passthrough_pci_devices =
-    model.value.passthrough_pci_devices.filter((_pciDevice, key: number) => {
-      return removeIndex !== key
-    })
-}
-
-const isShowFileModal = ref<boolean>(false)
-const onAddDevice = (item: UI_I_DropdownTreeItemChild): void => {
-  switch (item.value) {
-    case 1:
-      addHardDisk()
-      break
-    case 2:
-      isShowFileModal.value = true
-      break
-    case 5:
-      addCdDvdDrive()
-      break
-    case 10:
-      addPciDevice()
-      break
-    case 14:
-      addNetwork()
-      break
-  }
-}
-
-const cpuInvalid = ref<boolean>(false)
-const onSendDataNewHardDiskMethod = (
-  data: UI_I_SendDataNewHardDisk,
-  index: number
-): void => {
-  model.value.disk_devices[index] = {
-    ...data,
-    boot_order: model.value.disk_devices[index]?.boot_order || 0,
-  }
-}
-const sendDataNewCdDvdDriveMethod = (
-  data: UI_I_SendDataNewCdDvdDrive,
-  index: number
-): void => {
-  const cdromIndexStart = model.value.disk_devices.findIndex(
-    (disk) => disk.device_type === 'cdrom'
-  )
-  model.value.disk_devices[cdromIndexStart + index] = {
-    ...data,
-    boot_order:
-      model.value.disk_devices[cdromIndexStart + index]?.boot_order || 0,
-  }
-}
-
-const onSetInvalidHardDisk = (invalid: boolean, index: number): void => {
-  newHardDiskInvalidKeys.value[index] = invalid
-}
-
-const onSetInvalidNetwork = (invalid: boolean, key: number): void => {
-  newNetworkInvalidKeys.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>({})
-
-watch(
-  [
-    cpuInvalid,
-    memoryInvalid,
-    newHardDiskInvalidKeys,
-    newNetworkInvalidKeys,
-    videoCardInvalid,
-  ],
-  () => {
-    const cpu = cpuInvalid.value ? localization.value.common.cpu : ''
-    const memory = memoryInvalid.value ? localization.value.common.memory : ''
-    const videoCard = videoCardInvalid.value
-      ? localization.value.common.videoCard
-      : ''
-    let newHardDisk = ''
-    Object.keys(newHardDiskInvalidKeys.value).forEach((key) => {
-      if (!newHardDiskInvalidKeys.value[+key]) {
-        return
-      }
-
-      newHardDisk +=
-        (newHardDisk ? ', ' : '') +
-        localization.value.common.newHardDisk +
-        ' ' +
-        (+key + 1)
-    })
-    let newNetwork = ''
-    Object.keys(newNetworkInvalidKeys.value).forEach((key) => {
-      if (!newNetworkInvalidKeys.value[+key]) {
-        return
-      }
-
-      newNetwork +=
-        (newNetwork ? ', ' : '') +
-        localization.value.common.newNetwork +
-        ' ' +
-        (+key + 1)
-    })
-
-    emits('invalid', [cpu, memory, newHardDisk, newNetwork, videoCard])
-  },
-  { deep: true }
-)
-
-emits('get-pci-devices')
-</script>
-
-<style scoped lang="scss"></style>
+<template>
+  <component
+    :is="currentComponent"
+    v-model="model"
+    v-model:cpu-invalid="cpuInvalid"
+    v-model:memory-invalid="memoryInvalid"
+    v-model:video-card-invalid="videoCardInvalid"
+    :nodes="props.nodes"
+    :files="props.files"
+    :is-edit="props.isEdit"
+    :storage="props.storage"
+    :storage-free="storageFree"
+    :project="props.project"
+    :max-memory="props.maxMemory"
+    :cpu-models="props.cpuModels"
+    :datastore="props.datastore"
+    :is-datastore-loading="props.isDatastoreLoading"
+    :networks-type="networksType"
+    :networks-table="props.networksTable"
+    :dropdown-items="dropdownItems"
+    :hard-disks-type="hardDisksType"
+    :networks-index="networksIndex"
+    :hard-disks-index="hardDisksIndex"
+    :pci-devices-type="pciDevicesType"
+    :is-show-file-modal="isShowFileModal"
+    :pci-devices-index="pciDevicesIndex"
+    :cd-dvd-drives-type="cdDvdDrivesType"
+    :cd-dvd-drives-index="cdDvdDrivesIndex"
+    :error-validation-fields="errorValidationFields"
+    :get-datastore-table-func="getDatastoreTableFunc"
+    :state="state"
+    :video-card="videoCard"
+    :guest-machine-type="guestMachineType"
+    :passthrough-devices="passthroughDevices"
+    :mediated-devices="mediatedDevices"
+    :vm-cpu-help-text-second="vmCpuHelpTextSecond"
+    :compute-resource="props.computeResource"
+    :compatibility-info="props.compatibilityInfo"
+    :network-value-prop="networkValueProp"
+    @add-device="onAddDevice"
+    @get-storage="emits('get-storage', $event)"
+    @remove-network="onRemoveNetwork"
+    @hide-file-modal="isShowFileModal = false"
+    @remove-hard-disk="onRemoveHardDisk(...$event)"
+    @remove-pci-device="onRemovePciDevice"
+    @get-networks-table="emits('get-networks-table', $event)"
+    @add-exist-hard-disk="onAddExistHardDisk"
+    @roll-back-hard-disk="onRollBackHardDisk"
+    @set-invalid-network="onSetInvalidNetwork(...$event)"
+    @remove-cd-dvd-drive="onRemoveCdDvdDrive(...$event)"
+    @show-datastore-child="emits('show-datastore-child', $event)"
+    @get-folders-or-files="emits('get-folders-or-files', $event)"
+    @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-new-hard-disk-method="onSendDataNewHardDiskMethod(...$event)"
+    @send-data-new-cd-dvd-drive-method="sendDataNewCdDvdDriveMethod(...$event)"
+  />
+</template>
+
+<script setup lang="ts">
+import type { UI_T_Project } from '~/lib/models/types'
+import type { UI_I_DatastoreTableItem } from '~/lib/models/store/storage/interfaces'
+import type { UI_I_NetworkTableItem } from '~/lib/models/store/network/interfaces'
+import type { UI_I_TablePayload } from '~/lib/models/table/interfaces'
+import type { UI_I_FolderOrFileTreePayload } from '~/lib/models/store/storage/interfaces'
+import type { UI_I_FileTreeNode } from '~/components/lib/models/interfaces'
+import type {
+  UI_I_SendDataNewHardDisk,
+  UI_I_SendDataVideoCard,
+  UI_I_InvalidKeys,
+  UI_I_SendDataNewCdDvdDrive,
+  // UI_I_HardDisk,
+  UI_I_SendDataNewPciDevice,
+} 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_HardDiskType,
+  UI_T_NetworkType,
+  UI_T_CdDvdType,
+} from '~/components/common/vm/actions/common/customizeHardware/virtualHardware/lib/models/types'
+import type { UI_I_OptionItem } from '~/components/atoms/lib/models/interfaces'
+import type {
+  UI_I_DropdownTreeItem,
+  UI_I_DropdownTreeItemChild,
+} from '~/components/atoms/dropdown/tree/lib/models/interfaces'
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type {
+  UI_I_MediatedDevice,
+  UI_I_PciDevice,
+} from '~/lib/models/store/vm/interfaces'
+import type { UI_I_TreeNode } from '~/components/common/recursionTree/lib/models/interfaces'
+import type { UI_I_CreateVmData } from '~/components/common/vm/actions/common/lib/models/interfaces'
+import { dropdownItemsFunc } from './lib/config/dropdownItems'
+
+const model = defineModel<UI_I_CreateVmData>({ required: true })
+
+const props = withDefaults(
+  defineProps<{
+    storage: UI_I_DatastoreTableItem | null
+    cpuModels: UI_I_OptionItem[]
+    maxMemory: number
+    isEdit: boolean
+    isClone: boolean
+    errorValidationFields: UI_I_ErrorValidationField[]
+    nodes: UI_I_FileTreeNode[]
+    files: UI_I_FileTreeNode[]
+    networksTable: UI_I_NetworkTableItem[]
+    getDatastoreTableFunc: (payload: UI_I_TablePayload) => Promise<void>
+    datastore: UI_I_DatastoreTableItem[]
+    isDatastoreLoading: boolean
+    project: UI_T_Project
+    state?: string | number
+    vmCpuHelpTextSecond?: string
+    hardDisks?: UI_I_SendDataNewHardDisk[] | null
+    cdDvdDrives?: UI_I_SendDataNewCdDvdDrive[] | null
+    videoCard?: UI_I_SendDataVideoCard
+    // pciDevices?: UI_I_SendDataNewPciDevice[]
+    passthroughDevices?: UI_I_PciDevice[]
+    mediatedDevices?: UI_I_MediatedDevice[]
+    guestMachineType?: UI_I_OptionItem | null
+    computeResource?: UI_I_TreeNode | null
+    compatibilityInfo?: string
+  }>(),
+  {
+    state: undefined,
+    vmCpuHelpTextSecond: undefined,
+    hardDisks: undefined,
+    cdDvdDrives: undefined,
+    videoCard: undefined,
+    // pciDevices: undefined,
+    passthroughDevices: undefined,
+    mediatedDevices: undefined,
+    guestMachineType: undefined,
+    computeResource: undefined,
+    compatibilityInfo: undefined,
+  }
+)
+const emits = defineEmits<{
+  (event: 'invalid', value: string[]): void
+  (event: 'get-storage', value: UI_I_TablePayload): void
+  (event: 'get-folders-or-files', value: UI_I_FolderOrFileTreePayload): void
+  (event: 'get-active-device-child', value: UI_I_FileTreeNode): void
+  (event: 'show-datastore-child', value: UI_I_FileTreeNode): void
+  (event: 'remove-error-by-title', value: string): void
+  (event: 'get-networks-table', value: UI_I_TablePayload): void
+  (event: 'get-pci-devices'): void
+}>()
+
+const { $store, $binary }: any = useNuxtApp()
+const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
+const currentComponent = computed(() =>
+  isNewView.value
+    ? defineAsyncComponent(() => import('./New.vue'))
+    : defineAsyncComponent(() => import('./Old.vue'))
+)
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const dropdownItems = computed<UI_I_DropdownTreeItem[]>(() =>
+  dropdownItemsFunc(
+    localization.value,
+    props.state,
+    props.passthroughDevices,
+    props.mediatedDevices
+  )
+)
+
+const hardDisksIndex = ref<number[]>([0])
+const hardDisksType = ref<UI_T_HardDiskType[]>(['new'])
+// const hardDisksLocal = ref<UI_I_SendDataNewHardDisk[]>([
+//   {
+//     create: true,
+//     size: 90,
+//     source: '',
+//     boot_order: -1,
+//   },
+// ])
+if (!model.value.disk_devices?.length) {
+  hardDisksType.value = []
+  hardDisksIndex.value = []
+} else {
+  model.value.disk_devices
+    .filter((disk) => disk.device_type !== 'cdrom')
+    .forEach((_disk, _index, array) => {
+      if (!props.isEdit && !props.isClone) return
+
+      const count = array.length
+      hardDisksIndex.value = [...Array(count).keys()]
+      if (props.isEdit) {
+        hardDisksType.value = Array(count).fill('edit')
+      } else if (props.isClone) {
+        hardDisksType.value = Array(count).fill('clone')
+      }
+    })
+}
+
+// watch(
+//   () => props.hardDisks,
+//   (newValue) => {
+//     if ((!props.isEdit && !props.isClone) || !newValue) return
+//
+//     const count = newValue?.length || 0
+//     hardDisksIndex.value = [...Array(count).keys()]
+//     hardDisksLocal.value = newValue
+//     if (props.isEdit) {
+//       hardDisksType.value = Array(count).fill('edit')
+//     } else if (props.isClone) {
+//       hardDisksType.value = Array(count).fill('clone')
+//       hardDisksLocal.value = newValue.map((hardDisk) => {
+//         hardDisk.create = true
+//         return hardDisk
+//       })
+//     }
+//   },
+//   { 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
+  source = '',
+  type: UI_T_HardDiskType = 'new',
+  provisioned_type?: number // При добавлении существующей
+): void => {
+  const newIndex = (hardDisksIndex.value.at(-1) ?? -1) + 1
+  hardDisksIndex.value.push(newIndex)
+  hardDisksType.value.push(type)
+
+  let provisionType = 'thick'
+  if (provisioned_type === 1) provisionType = 'thin'
+
+  model.value.disk_devices = [
+    ...model.value.disk_devices.filter((disk) => disk.device_type !== 'cdrom'),
+    // {
+    //   create,
+    //   size,
+    //   source,
+    //   attach: true,
+    //   boot_order: 0, // Убираем галочку
+    //   provision_type: provisionType,
+    // },
+    {
+      create,
+      size,
+      source,
+      bus: 'virtio',
+      storage_id: '',
+      provision_type: 'thick',
+      disk_mode: 'dependent',
+      boot_order: 0, // Убираем галочку
+      device_type: 'disk',
+      sharing: false,
+      shares: 0,
+      cache: 'none',
+      io: '',
+      limit_iops: 0,
+      attach: true,
+    },
+    ...model.value.disk_devices.filter((disk) => disk.device_type === 'cdrom'),
+  ]
+  // hardDisksLocal.value.push({
+  //   create,
+  //   size,
+  //   source,
+  //   attach: true,
+  //   boot_order: 0, // Убираем галочку
+  //   provision_type: provisionType,
+  // })
+}
+const onAddExistHardDisk = (file: UI_I_FileTreeNode): void => {
+  addHardDisk(
+    false,
+    $binary.bToMb(file.size),
+    file.path,
+    'exist',
+    file.provisioned_type
+  )
+}
+const onRemoveHardDisk = (
+  index: number,
+  hardDisk: UI_I_SendDataNewHardDisk
+): void => {
+  const removeIndex = hardDisksIndex.value.indexOf(index)
+
+  if (!hardDisk.create && !hardDisk.attach) {
+    hardDisksType.value = hardDisksType.value.map((item, key) => {
+      if (key === removeIndex) return 'removed'
+      return item
+    })
+    return
+  }
+
+  hardDisksIndex.value = hardDisksIndex.value.filter((item) => item !== index)
+  hardDisksType.value = hardDisksType.value.filter(
+    (_item, key) => key !== removeIndex
+  )
+
+  model.value.disk_devices = model.value.disk_devices.filter(
+    (_hardDisk, key: number) => {
+      return removeIndex !== key
+    }
+  )
+  // hardDisksLocal.value = hardDisksLocal.value.filter(
+  //   (_hardDisk, key: number) => {
+  //     return removeIndex !== key
+  //   }
+  // )
+
+  delete newHardDiskInvalidKeys.value[index]
+}
+const onRollBackHardDisk = (index: number): void => {
+  const removeIndex = hardDisksIndex.value.indexOf(index)
+  hardDisksType.value = hardDisksType.value.map((item, key) => {
+    if (key === removeIndex) return 'edit'
+    return item
+  })
+}
+
+const networkValueProp = props.project === 'sphere' ? 'network' : 'net_bridge'
+const networksType = ref<UI_T_NetworkType[]>(['new'])
+const networksIndex = ref<number[]>([0])
+if (!model.value.network_devices?.length) {
+  networksType.value = []
+  networksIndex.value = []
+} else {
+  model.value.network_devices.forEach(() => {
+    if (!props.isEdit && !props.isClone) return
+
+    const count = model.value.network_devices.length || 0
+    networksIndex.value = [...Array(count).keys()]
+    if (props.isEdit) {
+      networksType.value = Array(count).fill('edit')
+    } else if (props.isClone) {
+      networksType.value = Array(count).fill('clone')
+    }
+  })
+}
+
+const defaultNetwork = {
+  network: '',
+  net_bridge: '',
+  mac: '',
+  target: '',
+  model: 'virtio',
+  boot_order: 0,
+}
+const addNetwork = (): void => {
+  const index = (networksIndex.value.at(-1) ?? -1) + 1
+  networksIndex.value.push(index)
+  networksType.value.push('new')
+
+  model.value.network_devices.push({
+    ...useDeepCopy(defaultNetwork),
+  })
+}
+const onRemoveNetwork = (index: number): void => {
+  const removeIndex = networksIndex.value.indexOf(index)
+  networksIndex.value = networksIndex.value.filter((item) => item !== index)
+  networksType.value = networksType.value.filter(
+    (_item, key) => key !== removeIndex
+  )
+  model.value.network_devices = model.value.network_devices.filter(
+    (_network, key: number) => removeIndex !== key
+  )
+
+  delete newNetworkInvalidKeys.value[index]
+}
+
+// const defaultCdDvdDriver: UI_I_SendDataNewCdDvdDrive = {
+//   create: false,
+//   attach: false,
+//   source: '',
+//   bus: '',
+//   device_type: 'cdrom',
+//   boot_order: -1,
+// }
+const defaultCdDvdDriver: UI_I_SendDataNewCdDvdDrive = {
+  source: '',
+  storage_id: '',
+  device_type: 'cdrom',
+  bus: '',
+  target: '',
+  boot_order: 0,
+  provision_type: 'thick',
+  disk_mode: 'dependent',
+  sharing: false,
+  read_only: true,
+  shares: 0,
+  cache: 'none',
+  io: 'native',
+  limit_iops: 0,
+  discard: 'unmap',
+  attach: false,
+  detach: false,
+  remove: false,
+  create: false,
+}
+// const cdDvdDrivesLocal = ref<UI_I_SendDataNewCdDvdDrive[]>([
+//   useDeepCopy(defaultCdDvdDriver),
+// ])
+const cdDvdDrivesIndex = ref<number[]>([0])
+const cdDvdDrivesType = ref<UI_T_CdDvdType[]>(['new'])
+if (!model.value.disk_devices?.length) {
+  cdDvdDrivesIndex.value = []
+  cdDvdDrivesType.value = []
+} else {
+  model.value.disk_devices
+    .filter((disk) => disk.device_type === 'cdrom')
+    .forEach((_disk, _index, array) => {
+      if (!props.isEdit && !props.isClone) return
+
+      const count = array.length
+      cdDvdDrivesIndex.value = [...Array(count).keys()]
+      if (props.isEdit) {
+        cdDvdDrivesType.value = Array(count).fill('edit')
+      } else if (props.isClone) {
+        cdDvdDrivesType.value = Array(count).fill('clone')
+      }
+    })
+}
+// watch(
+//   () => props.cdDvdDrives,
+//   (newValue) => {
+//     if ((!props.isEdit && !props.isClone) || !newValue) return
+//
+//     // cdDvdDrivesLocal.value = newValue
+//     // cdDvdDrivesType.value = Array(newValue.length).fill('edit')
+//     const count = newValue?.length || 0
+//     cdDvdDrivesIndex.value = [...Array(count).keys()]
+//     cdDvdDrivesLocal.value = newValue
+//     if (props.isEdit) {
+//       cdDvdDrivesType.value = Array(count).fill('edit')
+//     } else if (props.isClone) {
+//       cdDvdDrivesType.value = Array(count).fill('new')
+//     }
+//   },
+//   { immediate: true }
+// )
+const addCdDvdDrive = (): void => {
+  const value = (cdDvdDrivesIndex.value.at(-1) ?? -1) + 1
+  cdDvdDrivesIndex.value.push(value)
+  cdDvdDrivesType.value.push('new')
+  model.value.disk_devices.push({
+    ...useDeepCopy(defaultCdDvdDriver),
+    attach: true,
+    boot_order: 0, // Убираем галочку
+  })
+  // cdDvdDrivesLocal.value.push({
+  //   ...useDeepCopy(defaultCdDvdDriver),
+  //   attach: true,
+  //   boot_order: 0, // Убираем галочку
+  // })
+}
+const onRemoveCdDvdDrive = (
+  index: number,
+  cdDvdDrive: UI_I_SendDataNewCdDvdDrive
+): void => {
+  const removeIndex = cdDvdDrivesIndex.value.indexOf(index)
+
+  // if (!cdDvdDrive.create && !cdDvdDrive.attach) {
+  if (cdDvdDrivesType.value[index] === 'edit' && !cdDvdDrive.attach) {
+    cdDvdDrivesType.value = cdDvdDrivesType.value.map((item, key) => {
+      if (key === removeIndex) return 'removed'
+      return item
+    })
+    return
+  }
+
+  cdDvdDrivesIndex.value = cdDvdDrivesIndex.value.filter(
+    (cdDvdDrive) => cdDvdDrive !== index
+  )
+  cdDvdDrivesType.value = cdDvdDrivesType.value.filter(
+    (_item, key) => key !== index
+  )
+
+  const hardDiskCount = hardDisksIndex.value.length
+  model.value.disk_devices = model.value.disk_devices.filter(
+    (_cdDvdDrive, key: number) => hardDiskCount + removeIndex !== key
+  )
+  // cdDvdDrivesLocal.value = cdDvdDrivesLocal.value.filter(
+  //   (_cdDvdDrive, key: number) => removeIndex !== key
+  // )
+}
+const onRollBackCdDvdDrive = (index: number): void => {
+  const removeIndex = cdDvdDrivesIndex.value.indexOf(index)
+  cdDvdDrivesType.value = cdDvdDrivesType.value.map((item, key) => {
+    if (key === removeIndex) return 'edit'
+    return item
+  })
+}
+
+const defaultPciDevice: UI_I_SendDataNewPciDevice = {
+  address: '',
+  vendor_name: '',
+  class_name: '',
+  device_name: '',
+}
+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 count = array.length
+    pciDevicesIndex.value = [...Array(count).keys()]
+    if (props.isEdit) {
+      pciDevicesType.value = Array(count).fill('edit')
+    } else if (props.isClone) {
+      pciDevicesType.value = Array(count).fill('clone') // before been 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 }
+// )
+
+const addPciDevice = (): void => {
+  const newIndex = (pciDevicesIndex.value.at(-1) ?? -1) + 1
+  pciDevicesIndex.value.push(newIndex)
+  pciDevicesType.value.push('new')
+
+  // pciDevicesLocal.value.push(useDeepCopy(defaultPciDevice))
+  model.value.passthrough_pci_devices.push(useDeepCopy(defaultPciDevice))
+}
+const onRemovePciDevice = (index: number): void => {
+  const removeIndex = pciDevicesIndex.value.indexOf(index)
+  pciDevicesIndex.value = pciDevicesIndex.value.filter((item) => item !== index)
+  pciDevicesType.value = pciDevicesType.value.filter(
+    (_item, key) => key !== removeIndex
+  )
+
+  model.value.passthrough_pci_devices =
+    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)
+const onAddDevice = (item: UI_I_DropdownTreeItemChild): void => {
+  switch (item.value) {
+    case 1:
+      addHardDisk()
+      break
+    case 2:
+      isShowFileModal.value = true
+      break
+    case 5:
+      addCdDvdDrive()
+      break
+    case 10:
+      addPciDevice()
+      break
+    case 14:
+      addNetwork()
+      break
+  }
+}
+
+const cpuInvalid = ref<boolean>(false)
+const onSendDataNewHardDiskMethod = (
+  data: UI_I_SendDataNewHardDisk,
+  index: number
+): void => {
+  model.value.disk_devices[index] = {
+    ...data,
+    boot_order: model.value.disk_devices[index]?.boot_order || 0,
+  }
+}
+const sendDataNewCdDvdDriveMethod = (
+  data: UI_I_SendDataNewCdDvdDrive,
+  index: number
+): void => {
+  const cdromIndexStart = model.value.disk_devices.findIndex(
+    (disk) => disk.device_type === 'cdrom'
+  )
+  model.value.disk_devices[cdromIndexStart + index] = {
+    ...data,
+    boot_order:
+      model.value.disk_devices[cdromIndexStart + index]?.boot_order || 0,
+  }
+}
+
+const onSetInvalidHardDisk = (invalid: boolean, index: number): void => {
+  newHardDiskInvalidKeys.value[index] = invalid
+}
+
+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(
+  [
+    cpuInvalid,
+    memoryInvalid,
+    newHardDiskInvalidKeys,
+    newNetworkInvalidKeys,
+    newPciDeviceInvalidKeys,
+    videoCardInvalid,
+  ],
+  () => {
+    const cpu = cpuInvalid.value ? localization.value.common.cpu : ''
+    const memory = memoryInvalid.value ? localization.value.common.memory : ''
+    const videoCard = videoCardInvalid.value
+      ? localization.value.common.videoCard
+      : ''
+    let newHardDisk = ''
+    Object.keys(newHardDiskInvalidKeys.value).forEach((key) => {
+      if (!newHardDiskInvalidKeys.value[+key]) {
+        return
+      }
+
+      newHardDisk +=
+        (newHardDisk ? ', ' : '') +
+        localization.value.common.newHardDisk +
+        ' ' +
+        (+key + 1)
+    })
+    let newNetwork = ''
+    Object.keys(newNetworkInvalidKeys.value).forEach((key) => {
+      if (!newNetworkInvalidKeys.value[+key]) {
+        return
+      }
+
+      newNetwork +=
+        (newNetwork ? ', ' : '') +
+        localization.value.common.newNetwork +
+        ' ' +
+        (+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])
+  },
+  { deep: true }
+)
+
+emits('get-pci-devices')
+</script>
+
+<style scoped lang="scss"></style>