bfg-common 1.4.393 → 1.4.395

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

@@ -0,0 +1,392 @@
+<template>
+  <div class="virtual-hardware">
+    <div class="action-wrap">
+      <span class="device-count">{{deviceCountText}}</span>
+
+      <div>
+        <button
+          id="add-device-dropdown"
+          :class="['pointer', {active: isShowAddDeviceDropdown}]"
+          data-id="add-device-dropdown"
+          @click="isShowAddDeviceDropdown = !isShowAddDeviceDropdown"
+        >
+          <ui-icon name="plus" width="18" height="18" />
+          <span>
+          {{ addNewDeviceText }}
+        </span>
+        </button>
+        <ui-dropdown
+          :items="dropdownItems"
+          :show="isShowAddDeviceDropdown"
+          show-from-left
+          width="max-content"
+          elem-id="add-device-dropdown"
+          test-id="add-device-dropdown"
+          @select="onAddDevice"
+          @hide="isShowAddDeviceDropdown = false"
+        />
+      </div>
+    </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="emits('send-data-cpu-method', $event)"
+          @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="emits('send-data-memory-method', $event)"
+          @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 props.hardDisks"
+          :key="props.hardDisksIndex[key]"
+          :index="props.hardDisksIndex[key]"
+          :type="props.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="emits('remove-hard-disk', [props.hardDisksIndex[key], item])"
+          @roll-back="emits('roll-back-hard-disk', props.hardDisksIndex[key])"
+          @send-data="
+            emits('send-data-new-hard-disk-method', [
+              $event,
+              props.hardDisksIndex[key],
+            ])
+          "
+          @invalid="
+            emits('set-invalid-hard-disk', [$event, props.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 props.networks"
+          :key="props.networksIndex[key]"
+          :index="props.networksIndex[key]"
+          :type="props.networksType[key]"
+          :network="item"
+          :networks-table="props.networksTable"
+          :error-validation-fields="props.errorValidationFields"
+          :is-edit="props.isEdit"
+          :state="props.state"
+          :project="props.project"
+          @remove="emits('remove-network', props.networksIndex[key])"
+          @send-data="
+            emits('send-data-new-network-method', [
+              $event,
+              props.networksIndex[key],
+            ])
+          "
+          @invalid="
+            emits('set-invalid-network', [$event, props.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 props.cdDvdDrives"
+          :key="props.cdDvdDrivesIndex[key]"
+          :index="props.cdDvdDrivesIndex[key]"
+          :hard-disks-count="props.hardDisks?.length || 0"
+          :type="props.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="
+            emits('remove-cd-dvd-drive', [props.cdDvdDrivesIndex[key], item])
+          "
+          @roll-back="
+            emits('roll-back-cd-dvd-drive', props.cdDvdDrivesIndex[key])
+          "
+          @send-data="
+            emits('send-data-new-cd-dvd-drive-method', [
+              $event,
+              props.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="emits('send-data-new-usb-controller-method', $event)"
+        />
+        <template v-if="props.passthroughDevices">
+          <common-vm-actions-common-customize-hardware-virtual-hardware-new-pci-device
+            v-for="(item, key) in props.pciDevices"
+            :key="props.pciDevicesIndex[key]"
+            :index="props.pciDevicesIndex[key]"
+            :pci-device="item"
+            :error-validation-fields="props.errorValidationFields"
+            :passthrough-devices="props.passthroughDevices"
+            :type="props.pciDevicesType[key]"
+            :is-edit="props.isEdit"
+            :state="props.state"
+            @remove="emits('remove-pci-device', props.pciDevicesIndex[key])"
+            @send-data="
+              emits('send-data-pci-devices-method', [
+                $event,
+                props.pciDevicesIndex[key],
+              ])
+            "
+            @invalid="
+              emits('set-invalid-pci-device', [
+                $event,
+                props.pciDevicesIndex[key],
+              ])
+            "
+            @remove-error-by-title="emits('remove-error-by-title', $event)"
+          />
+        </template>
+        <common-vm-actions-common-customize-hardware-virtual-hardware-video-card
+          :is-edit="props.isEdit"
+          :video-card="props.videoCard"
+          :error-validation-fields="props.errorValidationFields"
+          :state="props.state"
+          @send-data="emits('send-data-video-card-method', $event)"
+          @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="props.isShowFileModal"
+        show
+        :nodes="props.nodes"
+        :files="props.files"
+        @submit="emits('add-exist-hard-disk', $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)"
+        @hide="emits('hide-file-modal')"
+      />
+    </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_SendDataNewCdDvdDrive,
+  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,
+} 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_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 { dropdownItemsNewFunc } from './lib/config/dropdownItems'
+
+const cpuInvalid = defineModel<boolean>('cpu-invalid', { required: true })
+const memoryInvalid = defineModel<boolean>('memory-invalid', { required: true })
+const videoCardInvalid = defineModel<boolean>('video-card-invalid', {
+  required: true,
+})
+
+const props = defineProps<{
+  nodes: UI_I_FileTreeNode[]
+  files: UI_I_FileTreeNode[]
+  isEdit: boolean
+  storage: UI_I_DatastoreTableItem | null
+  project: UI_T_Project
+  maxCpus: number
+  maxMemory: number
+  cpuModels: UI_I_OptionItem[]
+  datastore: UI_I_DatastoreTableItem[]
+  networksType: UI_T_NetworkType[]
+  networksTable: UI_I_NetworkTableItem[]
+  // dropdownItems: UI_I_DropdownTreeItem[]
+  hardDisksType: UI_T_HardDiskType[]
+  networksIndex: number[]
+  hardDisksIndex: number[]
+  pciDevicesType: UI_T_NetworkType[]
+  isShowFileModal: boolean
+  pciDevicesIndex: number[]
+  cdDvdDrivesType: UI_T_NetworkType[]
+  cdDvdDrivesIndex: number[]
+  errorValidationFields: UI_I_ErrorValidationField<string>[]
+  getDatastoreTableFunc: (payload: UI_I_TablePayload) => Promise<void>
+  cpu?: API_UI_I_VmEditCpu
+  state?: string | number
+  memory?: API_UI_I_VmEditMemory
+  networks?: UI_I_SendDataNewNetwork[] | null
+  hardDisks?: UI_I_SendDataNewHardDisk[] | null
+  videoCard?: UI_I_SendDataVideoCard
+  pciDevices?: UI_I_SendDataNewPciDevice[]
+  cdDvdDrives?: UI_I_SendDataNewCdDvdDrive[] | null
+  usbController?: string
+  guestMachineType?: UI_I_OptionItem | null
+  passthroughDevices?: UI_I_PciDevice[]
+  vmCpuHelpTextSecond?: string
+}>()
+const emits = defineEmits<{
+  (event: 'add-device', value: { value: number }): void
+  (event: 'get-storage', value: UI_I_TablePayload): void
+  (event: 'remove-network', value: number): void
+  (event: 'hide-file-modal'): void
+  (event: 'remove-hard-disk', value: [number, UI_I_SendDataNewHardDisk]): void
+  (event: 'remove-pci-device', value: number): void
+  (event: 'get-networks-table', value: UI_I_TablePayload): void
+  (event: 'add-exist-hard-disk', value: UI_I_FileTreeNode): void
+  (event: 'roll-back-hard-disk', value: number): void
+  (event: 'set-invalid-network', value: [boolean, number]): void
+  (
+    event: 'remove-cd-dvd-drive',
+    value: [number, UI_I_SendDataNewCdDvdDrive]
+  ): void
+  (event: 'show-datastore-child', value: UI_I_FileTreeNode): void
+  (event: 'get-folders-or-files', value: UI_I_FolderOrFileTreePayload): void
+  (event: 'send-data-cpu-method', value: UI_I_SendDataCpu): void
+  (event: 'set-invalid-hard-disk', value: [boolean, number]): void
+  (event: 'remove-error-by-title', value: string): void
+  (event: 'roll-back-cd-dvd-drive', value: number): void
+  (event: 'set-invalid-pci-device', value: [boolean, number]): void
+  (event: 'get-active-device-child', value: UI_I_FileTreeNode): void
+  (event: 'send-data-memory-method', value: UI_I_SendDataMemory): void
+  (event: 'send-data-video-card-method', value: UI_I_SendDataVideoCard): void
+  (
+    event: 'send-data-new-network-method',
+    value: [UI_I_SendDataNewNetwork, number]
+  ): void
+  (
+    event: 'send-data-pci-devices-method',
+    value: [UI_I_SendDataNewPciDevice, number]
+  ): void
+  (
+    event: 'send-data-new-hard-disk-method',
+    value: [UI_I_SendDataNewHardDisk, number]
+  ): void
+  (
+    event: 'send-data-new-cd-dvd-drive-method',
+    value: [UI_I_SendDataNewCdDvdDrive, number]
+  ): void
+  (event: 'send-data-new-usb-controller-method', value: string): void
+}>()
+
+const { $text } = useNuxtApp()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const isShowAddDeviceDropdown = ref<boolean>(false)
+
+const addNewDeviceText = computed<string>(() =>
+  $text.toCapitalize(localization.value.common.addNewDevice)
+)
+const deviceCount = computed<number>(
+  () =>
+    (props.hardDisks?.length || 0) +
+    (props.networks?.length || 0) +
+    (props.cdDvdDrives?.length || 0) +
+    (props.pciDevices?.length || 0) +
+    6
+)
+const deviceCountText = computed<string>(() =>
+  // localization.value.vmWizard.devices.replace('{0}', deviceCount)
+  'Devices ({0})'.replace('{0}', deviceCount.value)
+)
+const dropdownItems = computed<UI_I_Dropdown[]>(() =>
+  dropdownItemsNewFunc(
+    localization.value,
+    props.state,
+    props.passthroughDevices
+  )
+)
+
+const onAddDevice = (data: number): void => {
+  isShowAddDeviceDropdown.value = false
+  // из-за старого компонента
+  emits('add-device', { value: data })
+}
+</script>
+
+<style scoped lang="scss">
+.virtual-hardware {
+  .action-wrap {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 12px 0;
+
+    .device-count {
+      font-size: 13px;
+      font-weight: 500;
+      line-height: 15.73px;
+      color: #9DA6AD;
+    }
+
+    #add-device-dropdown {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      background-color: #fff;
+      border: 1px solid #e9ebed;
+      border-radius: 6px;
+      padding: 7px 12px;
+      color: #4d5d69;
+      font-size: 13px;
+      font-weight: 500;
+      line-height: 15.73px;
+
+      &.active {
+        color: #008FD6;
+        border-color: #008FD6;
+      }
+    }
+  }
+}
+.stack-view {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  background-color: var(--block-view-bg-color);
+}
+</style>

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

@@ -0,0 +1,267 @@
+<template>
+  <div class="virtual-hardware">
+    <div class="clr-row clr-justify-content-end">
+      <atoms-dropdown-tree
+        :title="localization.common.addNewDevice"
+        :items="props.dropdownItems"
+        test-id="add-device-dropdown"
+        @select="emits('add-device', $event)"
+      />
+    </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="emits('send-data-cpu-method', $event)"
+          @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="emits('send-data-memory-method', $event)"
+          @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 props.hardDisks"
+          :key="props.hardDisksIndex[key]"
+          :index="props.hardDisksIndex[key]"
+          :type="props.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="emits('remove-hard-disk', [props.hardDisksIndex[key], item])"
+          @roll-back="emits('roll-back-hard-disk', props.hardDisksIndex[key])"
+          @send-data="emits('send-data-new-hard-disk-method', [$event, props.hardDisksIndex[key]])"
+          @invalid="emits('set-invalid-hard-disk', [$event, props.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 props.networks"
+          :key="props.networksIndex[key]"
+          :index="props.networksIndex[key]"
+          :type="props.networksType[key]"
+          :network="item"
+          :networks-table="props.networksTable"
+          :error-validation-fields="props.errorValidationFields"
+          :is-edit="props.isEdit"
+          :state="props.state"
+          :project="props.project"
+          @remove="emits('remove-network', props.networksIndex[key])"
+          @send-data="emits('send-data-new-network-method', [$event, props.networksIndex[key]])"
+          @invalid="emits('set-invalid-network', [$event, props.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 props.cdDvdDrives"
+          :key="props.cdDvdDrivesIndex[key]"
+          :index="props.cdDvdDrivesIndex[key]"
+          :hard-disks-count="props.hardDisks?.length || 0"
+          :type="props.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="emits('remove-cd-dvd-drive', [props.cdDvdDrivesIndex[key], item])"
+          @roll-back="emits('roll-back-cd-dvd-drive', props.cdDvdDrivesIndex[key])"
+          @send-data="
+            emits('send-data-new-cd-dvd-drive-method', [$event, props.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="emits('send-data-new-usb-controller-method', $event)"
+        />
+        <template v-if="props.passthroughDevices">
+          <common-vm-actions-common-customize-hardware-virtual-hardware-new-pci-device
+            v-for="(item, key) in props.pciDevices"
+            :key="props.pciDevicesIndex[key]"
+            :index="props.pciDevicesIndex[key]"
+            :pci-device="item"
+            :error-validation-fields="props.errorValidationFields"
+            :passthrough-devices="props.passthroughDevices"
+            :type="props.pciDevicesType[key]"
+            :is-edit="props.isEdit"
+            :state="props.state"
+            @remove="emits('remove-pci-device', props.pciDevicesIndex[key])"
+            @send-data="
+              emits('send-data-pci-devices-method', [$event, props.pciDevicesIndex[key]])
+            "
+            @invalid="emits('set-invalid-pci-device', [$event, props.pciDevicesIndex[key]])"
+            @remove-error-by-title="emits('remove-error-by-title', $event)"
+          />
+        </template>
+        <common-vm-actions-common-customize-hardware-virtual-hardware-video-card
+          :is-edit="props.isEdit"
+          :video-card="props.videoCard"
+          :error-validation-fields="props.errorValidationFields"
+          :state="props.state"
+          @send-data="emits('send-data-video-card-method', $event)"
+          @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="props.isShowFileModal"
+        show
+        :nodes="props.nodes"
+        :files="props.files"
+        @submit="emits('add-exist-hard-disk', $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)"
+        @hide="emits('hide-file-modal')"
+      />
+    </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_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,
+} 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'
+
+const cpuInvalid = defineModel<boolean>('cpu-invalid', {required: true})
+const memoryInvalid = defineModel<boolean>('memory-invalid', {required: true})
+const videoCardInvalid = defineModel<boolean>('video-card-invalid', {required: true})
+
+const props = defineProps<{
+  nodes: UI_I_FileTreeNode[]
+  files: UI_I_FileTreeNode[]
+  isEdit: boolean
+  storage: UI_I_DatastoreTableItem | null
+  project: UI_T_Project
+  maxCpus: number
+  maxMemory: number
+  cpuModels: UI_I_OptionItem[]
+  datastore: UI_I_DatastoreTableItem[]
+  networksType: UI_T_NetworkType[]
+  networksTable: UI_I_NetworkTableItem[]
+  dropdownItems: UI_I_DropdownTreeItem[]
+  hardDisksType: UI_T_HardDiskType[]
+  networksIndex: number[]
+  hardDisksIndex: number[]
+  pciDevicesType: UI_T_NetworkType[]
+  isShowFileModal: boolean
+  pciDevicesIndex: number[]
+  cdDvdDrivesType: UI_T_NetworkType[]
+  cdDvdDrivesIndex: number[]
+  errorValidationFields: UI_I_ErrorValidationField<string>[]
+  getDatastoreTableFunc: (payload: UI_I_TablePayload) => Promise<void>
+  cpu?: API_UI_I_VmEditCpu
+  state?: string | number
+  memory?: API_UI_I_VmEditMemory
+  networks?: UI_I_SendDataNewNetwork[] | null
+  hardDisks?: UI_I_SendDataNewHardDisk[] | null
+  videoCard?: UI_I_SendDataVideoCard
+  pciDevices?: UI_I_SendDataNewPciDevice[]
+  cdDvdDrives?: UI_I_SendDataNewCdDvdDrive[] | null
+  usbController?: string
+  guestMachineType?: UI_I_OptionItem | null
+  passthroughDevices?: UI_I_PciDevice[]
+  vmCpuHelpTextSecond?: string
+}>()
+const emits = defineEmits<{
+  (event: 'add-device', value: UI_I_DropdownTreeItemChild): void
+  (event: 'get-storage', value: UI_I_TablePayload): void
+  (event: 'remove-network', value: number): void
+  (event: 'hide-file-modal'): void
+  (event: 'remove-hard-disk', value: [number, UI_I_SendDataNewHardDisk]): void
+  (event: 'remove-pci-device', value: number): void
+  (event: 'get-networks-table', value: UI_I_TablePayload): void
+  (event: 'add-exist-hard-disk', value: UI_I_FileTreeNode): void
+  (event: 'roll-back-hard-disk', value: number): void
+  (event: 'set-invalid-network', value: [boolean, number]): void
+  (event: 'remove-cd-dvd-drive', value: [number, UI_I_SendDataNewCdDvdDrive]): void
+  (event: 'show-datastore-child', value: UI_I_FileTreeNode): void
+  (event: 'get-folders-or-files', value: UI_I_FolderOrFileTreePayload): void
+  (event: 'send-data-cpu-method', value: UI_I_SendDataCpu): void
+  (event: 'set-invalid-hard-disk', value: [boolean, number]): void
+  (event: 'remove-error-by-title', value: string): void
+  (event: 'roll-back-cd-dvd-drive', value: number): void
+  (event: 'set-invalid-pci-device', value: [boolean, number]): void
+  (event: 'get-active-device-child', value: UI_I_FileTreeNode): void
+  (event: 'send-data-memory-method', value: UI_I_SendDataMemory): void
+  (event: 'send-data-video-card-method', value: UI_I_SendDataVideoCard): void
+  (event: 'send-data-new-network-method', value: [UI_I_SendDataNewNetwork, number]): void
+  (event: 'send-data-pci-devices-method', value: [UI_I_SendDataNewPciDevice, number]): void
+  (event: 'send-data-new-hard-disk-method', value: [UI_I_SendDataNewHardDisk, number]): void
+  (event: 'send-data-new-cd-dvd-drive-method', value: [UI_I_SendDataNewCdDvdDrive, number]): void
+  (event: 'send-data-new-usb-controller-method', value: string): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+</script>
+
+<style scoped lang="scss">
+.virtual-hardware {
+  .content-dropdown {
+    width: 200px;
+  }
+}
+.stack-view {
+  background-color: var(--block-view-bg-color);
+}
+</style>