bfg-common 1.4.398 → 1.4.400

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

@@ -1,702 +0,0 @@
-<template>
-  <div class="virtual-hardware">
-    <div class="clr-row clr-justify-content-end">
-      <atoms-dropdown-tree
-        :title="localization.common.addNewDevice"
-        :items="dropdownItems"
-        test-id="add-device-dropdown"
-        @select="onAddDevice"
-      />
-    </div>
-
-    <div class="clr-component">
-      <div class="stack-view">
-        <common-vm-actions-common-customize-hardware-virtual-hardware-cpu
-          :max-cpus="props.maxCpus"
-          :cpu-models="props.cpuModels"
-          :cpu="props.cpu"
-          :is-edit="props.isEdit"
-          :state="props.state"
-          :error-validation-fields="props.errorValidationFields"
-          :vm-cpu-help-text-second="props.vmCpuHelpTextSecond"
-          @send-data="onSendDataCpuMethod"
-          @remove-error-by-title="emits('remove-error-by-title', $event)"
-          @invalid="cpuInvalid = $event"
-        />
-        <common-vm-actions-common-customize-hardware-virtual-hardware-memory
-          :max-memory="props.maxMemory"
-          :is-edit="props.isEdit"
-          :memory="props.memory"
-          :state="props.state"
-          :error-validation-fields="props.errorValidationFields"
-          @send-data="onSendDataMemoryMethod"
-          @invalid="memoryInvalid = $event"
-          @remove-error-by-title="emits('remove-error-by-title', $event)"
-        />
-        <common-vm-actions-common-customize-hardware-virtual-hardware-new-hard-disk
-          v-for="(item, key) in hardDisks"
-          :key="hardDisksIndex[key]"
-          :index="hardDisksIndex[key]"
-          :type="hardDisksType[key]"
-          :storage="props.storage"
-          :hard-disk="item"
-          :error-validation-fields="props.errorValidationFields"
-          :get-datastore-table-func="props.getDatastoreTableFunc"
-          :datastore="props.datastore"
-          :is-edit="props.isEdit"
-          :state="props.state"
-          :guest-machine-type="props.guestMachineType"
-          @remove="onRemoveHardDisk(hardDisksIndex[key], item)"
-          @roll-back="onRollBackHardDisk(hardDisksIndex[key])"
-          @send-data="onSendDataNewHardDiskMethod($event, hardDisksIndex[key])"
-          @invalid="onSetInvalidHardDisk($event, hardDisksIndex[key])"
-          @remove-error-by-title="emits('remove-error-by-title', $event)"
-        />
-        <common-vm-actions-common-customize-hardware-virtual-hardware-new-network
-          v-for="(item, key) in networks"
-          :key="networksIndex[key]"
-          :index="networksIndex[key]"
-          :type="networksType[key]"
-          :network="item"
-          :networks-table="props.networksTable"
-          :error-validation-fields="props.errorValidationFields"
-          :is-edit="props.isEdit"
-          :state="props.state"
-          :project="props.project"
-          @remove="onRemoveNetwork(networksIndex[key])"
-          @send-data="sendDataNewNetworkMethod($event, networksIndex[key])"
-          @invalid="onSetInvalidNetwork($event, networksIndex[key])"
-          @remove-error-by-title="emits('remove-error-by-title', $event)"
-          @get-networks-table="emits('get-networks-table', $event)"
-        />
-        <common-vm-actions-common-customize-hardware-virtual-hardware-cd-dvd-drive
-          v-for="(item, key) in cdDvdDrives"
-          :key="cdDvdDrivesIndex[key]"
-          :index="cdDvdDrivesIndex[key]"
-          :hard-disks-count="hardDisks.length"
-          :type="cdDvdDrivesType[key]"
-          :cd-dvd-drive="item"
-          :nodes="props.nodes"
-          :files="props.files"
-          :error-validation-fields="props.errorValidationFields"
-          :is-edit="props.isEdit"
-          :state="props.state"
-          :guest-machine-type="props.guestMachineType"
-          @remove-error-by-title="emits('remove-error-by-title', $event)"
-          @get-storage="emits('get-storage', $event)"
-          @get-folders-or-files="emits('get-folders-or-files', $event)"
-          @get-active-device-child="emits('get-active-device-child', $event)"
-          @show-datastore-child="emits('show-datastore-child', $event)"
-          @remove="onRemoveCdDvdDrive(cdDvdDrivesIndex[key], item)"
-          @roll-back="onRollBackCdDvdDrive(cdDvdDrivesIndex[key])"
-          @send-data="
-            sendDataNewCdDvdDriveMethod($event, cdDvdDrivesIndex[key])
-          "
-        />
-        <common-vm-actions-common-customize-hardware-virtual-hardware-new-usb-controller
-          :usb-controller="props.usbController"
-          :is-edit="props.isEdit"
-          :state="props.state"
-          @send-data="onSendDataNewUsbControllerMethod"
-        />
-        <template v-if="props.passthroughDevices">
-          <common-vm-actions-common-customize-hardware-virtual-hardware-new-pci-device
-            v-for="(item, key) in pciDevices"
-            :key="pciDevicesIndex[key]"
-            :index="pciDevicesIndex[key]"
-            :pci-device="item"
-            :error-validation-fields="props.errorValidationFields"
-            :passthrough-devices="props.passthroughDevices"
-            :type="pciDevicesType[key]"
-            :is-edit="props.isEdit"
-            :state="props.state"
-            @remove="onRemovePciDevice(pciDevicesIndex[key])"
-            @send-data="
-              onSendDataPciDevicesMethod($event, pciDevicesIndex[key])
-            "
-            @invalid="onSetInvalidPciDevice($event, pciDevicesIndex[key])"
-            @remove-error-by-title="emits('remove-error-by-title', $event)"
-          />
-        </template>
-        <common-vm-actions-common-customize-hardware-virtual-hardware-video-card
-          :is-edit="props.isEdit"
-          :video-card="props.videoCard"
-          :error-validation-fields="props.errorValidationFields"
-          :state="props.state"
-          @send-data="onSendDataVideoCardMethod"
-          @invalid="videoCardInvalid = $event"
-          @remove-error-by-title="emits('remove-error-by-title', $event)"
-        />
-        <common-vm-actions-common-customize-hardware-virtual-hardware-other />
-      </div>
-    </div>
-
-    <Teleport to="body">
-      <common-vm-actions-common-customize-hardware-virtual-hardware-browse-view
-        v-if="isShowFileModal"
-        :show="isShowFileModal"
-        :nodes="props.nodes"
-        :files="props.files"
-        @submit="onAddExistHardDisk"
-        @get-storage="emits('get-storage', $event)"
-        @get-folders-or-files="emits('get-folders-or-files', $event)"
-        @get-active-device-child="emits('get-active-device-child', $event)"
-        @show-datastore-child="emits('show-datastore-child', $event)"
-        @hide="isShowFileModal = false"
-      />
-    </Teleport>
-  </div>
-</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_SendDataCpu,
-  UI_I_SendDataMemory,
-  UI_I_SendDataNewHardDisk,
-  UI_I_SendDataNewNetwork,
-  UI_I_SendDataVideoCard,
-  UI_I_InvalidKeys,
-  UI_I_SendDataVirtualHardware,
-  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 {
-  API_UI_I_VmEditCpu,
-  API_UI_I_VmEditMemory,
-  UI_I_PciDevice,
-} from '~/lib/models/store/vm/interfaces'
-import { dropdownItemsFunc } from './lib/config/dropdownItems'
-
-const props = defineProps<{
-  storage: UI_I_DatastoreTableItem | null
-  cpuModels: UI_I_OptionItem[]
-  vmName: string
-  maxCpus: number
-  maxMemory: number
-  isEdit: boolean
-  isClone: boolean
-  errorValidationFields: UI_I_ErrorValidationField<string>[]
-  nodes: UI_I_FileTreeNode[]
-  files: UI_I_FileTreeNode[]
-  networksTable: UI_I_NetworkTableItem[]
-  getDatastoreTableFunc: (payload: UI_I_TablePayload) => Promise<void>
-  datastore: UI_I_DatastoreTableItem[]
-  state?: string | number
-  cpu?: API_UI_I_VmEditCpu
-  memory?: API_UI_I_VmEditMemory
-  vmCpuHelpTextSecond?: string
-  hardDisks?: UI_I_SendDataNewHardDisk[] | null
-  cdDvdDrives?: UI_I_SendDataNewCdDvdDrive[] | null
-  networks?: UI_I_SendDataNewNetwork[] | null
-  videoCard?: UI_I_SendDataVideoCard
-  usbController?: string
-  pciDevices?: UI_I_SendDataNewPciDevice[]
-  passthroughDevices?: UI_I_PciDevice[]
-  project: UI_T_Project
-  guestMachineType?: UI_I_OptionItem | null
-}>()
-const emits = defineEmits<{
-  (event: 'send-data', value: UI_I_SendDataVirtualHardware): void
-  (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 localization = computed<UI_I_Localization>(() => useLocal())
-const { $binary } = useNuxtApp()
-
-const dropdownItems = computed<UI_I_DropdownTreeItem[]>(() =>
-  dropdownItemsFunc(localization.value, props.state, props.passthroughDevices)
-)
-
-const hardDisksIndex = ref<number[]>([0])
-const hardDisksType = ref<UI_T_HardDiskType[]>(['new'])
-const hardDisks = ref<UI_I_SendDataNewHardDisk[]>([
-  {
-    create: true,
-    size: 90,
-    source: '',
-    boot_order: -1,
-  },
-])
-watch(
-  () => props.hardDisks,
-  (newValue) => {
-    if ((!props.isEdit && !props.isClone) || !newValue) return
-
-    const count = newValue?.length || 0
-    hardDisksIndex.value = [...Array(count).keys()]
-    hardDisks.value = newValue
-    if (props.isEdit) {
-      hardDisksType.value = Array(count).fill('edit')
-    } else if (props.isClone) {
-      hardDisksType.value = Array(count).fill('new')
-      hardDisks.value = newValue.map((hardDisk) => {
-        hardDisk.create = true
-        return hardDisk
-      })
-    }
-  },
-  { immediate: true }
-)
-
-const addHardDisk = (
-  create = true,
-  size = 90,
-  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'
-
-  hardDisks.value.push({
-    create,
-    size,
-    source,
-    attach: true,
-    boot_order: 0, // Убираем галочку
-    provision_type: provisionType,
-  })
-  sendData()
-}
-const onAddExistHardDisk = (file: UI_I_FileTreeNode): void => {
-  addHardDisk(
-    false,
-    $binary.bToGb(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
-    })
-    sendData()
-    return
-  }
-
-  hardDisksIndex.value = hardDisksIndex.value.filter((item) => item !== index)
-  hardDisksType.value = hardDisksType.value.filter(
-    (_item, key) => key !== removeIndex
-  )
-
-  hardDisks.value = hardDisks.value.filter((_hardDisk, key: number) => {
-    return removeIndex !== key
-  })
-
-  delete newHardDiskInvalidKeys.value[index]
-  delete sendDataNewHardDisk.value[index]
-  sendData()
-}
-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 defaultNetwork = {
-  network: '',
-  net_bridge: '',
-  mac: '',
-  target: '',
-  model: '',
-  boot_order: -1,
-}
-const networks = ref<UI_I_SendDataNewNetwork[]>([useDeepCopy(defaultNetwork)])
-const networksType = ref<UI_T_NetworkType[]>(['new'])
-const networksIndex = ref<number[]>([0])
-watch(
-  () => props.networks,
-  (newValue) => {
-    if ((!props.isEdit && !props.isClone) || !newValue) return
-
-    // networks.value = newValue
-    // networksType.value = Array(newValue.length).fill('edit')
-    const count = newValue?.length || 0
-    networksIndex.value = [...Array(count).keys()]
-    networks.value = newValue
-    if (props.isEdit) {
-      networksType.value = Array(count).fill('edit')
-    } else if (props.isClone) {
-      networksType.value = Array(count).fill('new')
-    }
-  },
-  { immediate: true }
-)
-const addNetwork = (): void => {
-  const index = (networksIndex.value.at(-1) ?? -1) + 1
-  networksIndex.value.push(index)
-  networksType.value.push('new')
-
-  networks.value.push({
-    ...useDeepCopy(defaultNetwork),
-    boot_order: 0, // Убираем галочку
-  })
-}
-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
-  )
-  networks.value = networks.value.filter(
-    (_network, key: number) => removeIndex !== key
-  )
-
-  delete newNetworkInvalidKeys.value[index]
-  delete sendDataNewNetwork.value[index]
-  sendData()
-}
-
-const defaultCdDvdDriver: UI_I_SendDataNewCdDvdDrive = {
-  create: false,
-  attach: false,
-  source: '',
-  bus: '',
-  device_type: 'cdrom',
-  boot_order: -1,
-}
-const cdDvdDrives = ref<UI_I_SendDataNewCdDvdDrive[]>([
-  useDeepCopy(defaultCdDvdDriver),
-])
-const cdDvdDrivesIndex = ref<number[]>([0])
-const cdDvdDrivesType = ref<UI_T_CdDvdType[]>(['new'])
-watch(
-  () => props.cdDvdDrives,
-  (newValue) => {
-    if ((!props.isEdit && !props.isClone) || !newValue) return
-
-    // cdDvdDrives.value = newValue
-    // cdDvdDrivesType.value = Array(newValue.length).fill('edit')
-    const count = newValue?.length || 0
-    cdDvdDrivesIndex.value = [...Array(count).keys()]
-    cdDvdDrives.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')
-  cdDvdDrives.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
-    })
-    sendData()
-    return
-  }
-
-  cdDvdDrivesIndex.value = cdDvdDrivesIndex.value.filter(
-    (cdDvdDrive) => cdDvdDrive !== index
-  )
-  cdDvdDrivesType.value = cdDvdDrivesType.value.filter(
-    (_item, key) => key !== index
-  )
-  cdDvdDrives.value = cdDvdDrives.value.filter(
-    (_cdDvdDrive, key: number) => removeIndex !== key
-  )
-
-  delete sendDataNewCdDvdDrive.value[index]
-  sendData()
-}
-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: 'cdrom',
-  device_name: 'cdrom',
-}
-const pciDevicesIndex = ref<number[]>([0])
-const pciDevicesType = ref<('new' | 'edit' | 'removed')[]>(['new'])
-const pciDevices = ref<UI_I_SendDataNewPciDevice[]>([])
-watch(
-  () => props.pciDevices,
-  (newValue) => {
-    if ((!props.isEdit && !props.isClone) || !newValue) return
-
-    const count = newValue?.length || 0
-    pciDevicesIndex.value = [...Array(count).keys()]
-    pciDevices.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')
-
-  pciDevices.value.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
-  )
-
-  pciDevices.value = pciDevices.value.filter((_pciDevice, key: number) => {
-    return removeIndex !== key
-  })
-
-  delete newPciDeviceInvalidKeys.value[index]
-  delete sendDataNewPciDevices.value[index]
-  sendData()
-}
-
-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 sendDataCpu = ref<UI_I_SendDataCpu | null>(null)
-const onSendDataCpuMethod = (data: UI_I_SendDataCpu): void => {
-  sendDataCpu.value = data
-  sendData()
-}
-const sendDataMemory = ref<UI_I_SendDataMemory | null>(null)
-const onSendDataMemoryMethod = (data: UI_I_SendDataMemory): void => {
-  sendDataMemory.value = data
-  sendData()
-}
-const sendDataNewHardDisk = ref<UI_I_SendDataNewHardDisk[]>([])
-const onSendDataNewHardDiskMethod = (
-  data: UI_I_SendDataNewHardDisk,
-  index: number
-): void => {
-  sendDataNewHardDisk.value[index] = data
-  sendData()
-}
-const sendDataNewNetwork = ref<UI_I_SendDataNewNetwork[]>([])
-const sendDataNewNetworkMethod = (
-  data: UI_I_SendDataNewNetwork,
-  index: number
-): void => {
-  sendDataNewNetwork.value[index] = data
-  sendData()
-}
-const sendDataNewCdDvdDrive = ref<UI_I_SendDataNewCdDvdDrive[]>([])
-const sendDataNewCdDvdDriveMethod = (
-  data: UI_I_SendDataNewCdDvdDrive,
-  index: number
-): void => {
-  sendDataNewCdDvdDrive.value[index] = data
-  sendData()
-}
-const sendDataNewUsbController = ref<string | null>(null)
-const onSendDataNewUsbControllerMethod = (data: string): void => {
-  sendDataNewUsbController.value = data
-  sendData()
-}
-const sendDataNewPciDevices = ref<UI_I_SendDataNewPciDevice[]>([])
-const onSendDataPciDevicesMethod = (
-  data: UI_I_SendDataNewPciDevice,
-  index: number
-): void => {
-  sendDataNewPciDevices.value[index] = data
-  sendData()
-}
-const sendDataVideoCard = ref<UI_I_SendDataVideoCard | null>(null)
-const onSendDataVideoCardMethod = (data: UI_I_SendDataVideoCard): void => {
-  sendDataVideoCard.value = data
-  sendData()
-}
-
-const sendData = (): void => {
-  const cpu = sendDataCpu.value
-  const memory = sendDataMemory.value
-  const hardDisks = sendDataNewHardDisk.value.flat(2)
-  const networks = sendDataNewNetwork.value.flat(2)
-  const cdDvdDrives = sendDataNewCdDvdDrive.value.flat(2)
-  const pciDevices = sendDataNewPciDevices.value.flat()
-  const usbController = sendDataNewUsbController.value
-  const videoCard = sendDataVideoCard.value
-
-  const sendData: UI_I_SendDataVirtualHardware = {
-    cpu,
-    memory,
-    usbController,
-    pciDevices,
-    networks,
-    hardDisks,
-    cdDvdDrives,
-    videoCard,
-  }
-  emits('send-data', sendData)
-}
-
-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">
-.virtual-hardware {
-  .content-dropdown {
-    width: 200px;
-  }
-}
-.stack-view {
-  background-color: var(--block-view-bg-color);
-}
-</style>