bfg-common 1.4.393 → 1.4.395

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

@@ -0,0 +1,702 @@
+<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>