bfg-common 1.5.672 → 1.5.673

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

@@ -1,628 +1,630 @@
-<template>
-  <div class="virtual-hardware">
-    <div class="action-wrap py-3">
-      <span class="device-count">{{ deviceCountText }}</span>
-
-      <div class="add-device-dropdown-wrap">
-        <button
-          id="add-device-dropdown"
-          :class="['cursor-pointer', { active: isShowAddDeviceDropdown }]"
-          data-id="add-device-dropdown"
-          @click="isShowAddDeviceDropdown = !isShowAddDeviceDropdown"
-        >
-          <ui-icon name="plus" width="18" height="18" />
-          <span class="add-device-dropdown-text">
-            {{ addNewDeviceText }}
-          </span>
-        </button>
-        <ui-dropdown
-          :items="dropdownItems"
-          :show="isShowAddDeviceDropdown"
-          :margin-between-trigger="4"
-          show-from-left
-          width="max-content"
-          elem-id="add-device-dropdown"
-          test-id="add-device-dropdown"
-          left
-          max-height="400px"
-          @select="onAddDevice"
-          @hide="isShowAddDeviceDropdown = false"
-        />
-      </div>
-    </div>
-
-    <div class="overflow-auto virtual-hardware-content-block">
-      <div class="stack-view">
-        <common-vm-actions-common-customize-hardware-virtual-hardware-cpu
-          v-model="model"
-          :cpu-models="props.cpuModels"
-          :is-edit="props.isEdit"
-          :state="props.state"
-          :error-validation-fields="props.errorValidationFields"
-          :vm-cpu-help-text-second="props.vmCpuHelpTextSecond"
-          @remove-error-by-title="emits('remove-error-by-title', $event)"
-          @invalid="cpuInvalid = $event"
-        />
-        <common-vm-actions-common-customize-hardware-virtual-hardware-memory
-          v-model="model"
-          :max-memory="props.maxMemory"
-          :is-edit="props.isEdit"
-          :state="props.state"
-          :error-validation-fields="props.errorValidationFields"
-          @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-datastore-loading="props.isDatastoreLoading"-->
-        <!--                  :is-edit="props.isEdit"-->
-        <!--                  :state="props.state"-->
-        <!--                  :guest-machine-type="props.guestMachineType"-->
-        <!--                  :compute-resource="props.computeResource"-->
-        <!--                  @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)"-->
-        <!--        />-->
-        <!--        TODO-->
-        <div
-          v-for="(item, key) in model.disk_devices.filter(
-            (disk) => disk.device_type !== 'cdrom'
-          )"
-          :key="props.hardDisksIndex[key]"
-        >
-          <common-vm-actions-common-customize-hardware-virtual-hardware-new-hard-disk
-            v-model:size="item.size"
-            v-model:provision-type="item.provision_type"
-            v-model:sharing="item.sharing"
-            v-model:shares="item.shares"
-            v-model:limit-iops="item.limit_iops"
-            v-model:disk-mode="item.disk_mode"
-            v-model:cache="item.cache"
-            v-model:bus="item.bus"
-            v-model:read-only="item.readOnly"
-            v-model:discard="item.discard"
-            v-model:io="item.io"
-            v-model:target="item.target"
-            v-model:source="item.source"
-            v-model:storage="item.storage"
-            :index="props.hardDisksIndex[key]"
-            :type="props.hardDisksType[key]"
-            :main-storage="props.storage"
-            :error-validation-fields="props.errorValidationFields"
-            :get-datastore-table-func="props.getDatastoreTableFunc"
-            :datastore="props.datastore"
-            :is-datastore-loading="props.isDatastoreLoading"
-            :is-edit="props.isEdit"
-            :state="props.state"
-            :guest-machine-type="props.guestMachineType"
-            :compute-resource="props.computeResource"
-            @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)"
-          />
-        </div>
-        <!--        <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)"-->
-        <!--        />-->
-        <div
-          v-for="(item, key) in model.network_devices"
-          :key="props.networksIndex[key]"
-        >
-          <common-vm-actions-common-customize-hardware-virtual-hardware-new-network
-            v-model:network="item.network"
-            v-model:network-value="item[props.networkValueProp]"
-            v-model:mac="item.mac"
-            v-model:model="item.model"
-            :index="props.networksIndex[key]"
-            :type="props.networksType[key]"
-            :networks-table="props.networksTable"
-            :error-validation-fields="props.errorValidationFields"
-            :is-edit="props.isEdit"
-            :state="props.state"
-            :project="props.project"
-            :network-value-prop="props.networkValueProp"
-            @remove="emits('remove-network', 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)"
-          />
-        </div>
-        <!--        <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"-->
-        <!--          :compute-resource="props.computeResource"-->
-        <!--          @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],-->
-        <!--            ])-->
-        <!--          "-->
-        <!--        />-->
-        <div
-          v-for="(item, key) in model.disk_devices.filter(
-            (disk) => disk.device_type === 'cdrom'
-          )"
-          :key="props.hardDisksIndex[key]"
-        >
-          <!--          TODO count-->
-          <common-vm-actions-common-customize-hardware-virtual-hardware-cd-dvd-drive
-            v-model:source="item.source"
-            v-model:bus="item.bus"
-            v-model:remove="item.remove"
-            v-model:detach="item.detach"
-            :index="props.cdDvdDrivesIndex[key]"
-            :hard-disks-count="
-              model.disk_devices.filter((disk) => disk.device_type !== 'cdrom')
-                ?.length || 0
-            "
-            :type="props.cdDvdDrivesType[key]"
-            :nodes="props.nodes"
-            :files="props.files"
-            :error-validation-fields="props.errorValidationFields"
-            :is-edit="props.isEdit"
-            :state="props.state"
-            :guest-machine-type="props.guestMachineType"
-            :compute-resource="props.computeResource"
-            @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],
-              ])
-            "
-          />
-        </div>
-        <div v-for="(item, key) in model.usb_controllers" :key="key">
-          <common-vm-actions-common-customize-hardware-virtual-hardware-new-usb-controller
-            v-model="item.type"
-            :is-edit="props.isEdit"
-            :state="props.state"
-          />
-        </div>
-        <template v-if="props.passthroughDevices || props.mediatedDevices">
-          <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"
-            :mediated-devices="props.mediatedDevices"
-            :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
-          v-model="model.video_card"
-          :is-edit="props.isEdit"
-          :video-card="props.videoCard"
-          :error-validation-fields="props.errorValidationFields"
-          :state="props.state"
-          @invalid="videoCardInvalid = $event"
-          @remove-error-by-title="emits('remove-error-by-title', $event)"
-        />
-        <common-vm-actions-common-customize-hardware-virtual-hardware-other />
-        <div
-          v-if="props.compatibilityInfo"
-          class="vm-hardware-version-wrap justify-end flex flex-1 mt-4"
-        >
-          <span class="vm-hardware-version">
-            {{ props.compatibilityInfo }}
-          </span>
-        </div>
-      </div>
-    </div>
-
-    <Teleport to="body">
-      <common-vm-actions-common-customize-hardware-virtual-hardware-browse-view
-        v-if="props.isShowFileModal"
-        :nodes="props.nodes"
-        :files="props.files"
-        show
-        @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_I_Dropdown } from '~/node_modules/bfg-uikit/components/ui/dropdown/models/interfaces'
-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_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,
-  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 { dropdownItemsNewFunc } from './lib/config/dropdownItems'
-
-const model = defineModel<UI_I_CreateVmData>({ required: true })
-
-const cpuInvalid = defineModel<boolean>('cpuInvalid', { required: true })
-const memoryInvalid = defineModel<boolean>('memoryInvalid', { required: true })
-const videoCardInvalid = defineModel<boolean>('videoCardInvalid', {
-  required: true,
-})
-
-const props = withDefaults(
-  defineProps<{
-    nodes: UI_I_FileTreeNode[]
-    files: UI_I_FileTreeNode[]
-    isEdit: boolean
-    storage: UI_I_DatastoreTableItem | null
-    project: UI_T_Project
-    maxMemory: number
-    cpuModels: UI_I_OptionItem[]
-    datastore: UI_I_DatastoreTableItem[]
-    isDatastoreLoading: boolean
-    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>
-    networkValueProp: 'network' | 'net_bridge'
-    cpu?: API_UI_I_VmEditCpu
-    state?: string | number
-    // hardDisks?: UI_I_SendDataNewHardDisk[] | null
-    videoCard?: UI_I_SendDataVideoCard
-    pciDevices?: UI_I_SendDataNewPciDevice[]
-    // cdDvdDrives?: UI_I_SendDataNewCdDvdDrive[] | null
-    guestMachineType?: UI_I_OptionItem | null
-    passthroughDevices?: UI_I_PciDevice[]
-    mediatedDevices?: UI_I_MediatedDevice[]
-    vmCpuHelpTextSecond?: string
-    computeResource?: UI_I_TreeNode | null
-    compatibilityInfo?: string
-  }>(),
-  {
-    cpu: undefined,
-    state: undefined,
-    videoCard: undefined,
-    pciDevices: undefined,
-    guestMachineType: undefined,
-    passthroughDevices: undefined,
-    mediatedDevices: undefined,
-    vmCpuHelpTextSecond: undefined,
-    computeResource: undefined,
-    compatibilityInfo: undefined,
-  }
-)
-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: '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-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
-}>()
-
-const { $text } = useNuxtApp()
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-const isShowAddDeviceDropdown = ref<boolean>(false)
-
-// TODO
-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) +
-    (model.value.disk_devices?.length || 0) +
-    (model.value.network_devices?.length || 0) +
-    (props.pciDevices?.length || 0) +
-    6
-)
-const deviceCountText = computed<string>(() =>
-  localization.value.vmWizard.devices.replace(
-    '{0}',
-    deviceCount.value.toString()
-  )
-)
-const dropdownItems = computed<UI_I_Dropdown[]>(() =>
-  dropdownItemsNewFunc(
-    localization.value,
-    props.state,
-    props.passthroughDevices,
-    props.mediatedDevices
-  )
-)
-
-const onAddDevice = (data: number): void => {
-  isShowAddDeviceDropdown.value = false
-  // из-за старого компонента
-  emits('add-device', { value: data })
-}
-</script>
-
-<style>
-:root {
-  --vm-wizard-block-view-bg-color: #fafafa;
-  --add-device-dropdown-bg-color: #fff;
-  --add-device-dropdown-bg-color-hover: #f6f7f8;
-  --add-device-dropdown-active-bg-color-hover: #f0f8fd;
-  --add-device-dropdown-border-color: #e9ebed;
-  --add-device-dropdown-border-color-hover: #e9ebed;
-  --add-device-dropdown-color: #4d5d69;
-  --add-device-dropdown-color-hover: #4d5d69;
-  --add-device-dropdown-item-title-color: #182531;
-}
-:root.dark-theme {
-  --vm-wizard-block-view-bg-color: transparent;
-  --add-device-dropdown-bg-color: #1b2a373d;
-  //--add-device-dropdown-bg-color-hover: #2585b614;
-  --add-device-dropdown-bg-color-hover: #b8bcc10a;
-  --add-device-dropdown-active-bg-color-hover: #2785b614;
-  --add-device-dropdown-border-color: #e9ebed1f;
-  --add-device-dropdown-border-color-hover: #2ba2de;
-  --add-device-dropdown-color: #e9eaec;
-  --add-device-dropdown-color-hover: #2ba2de;
-  --add-device-dropdown-item-title-color: #e9eaec;
-}
-</style>
-
-<style scoped lang="scss">
-.virtual-hardware {
-  height: 100%;
-  display: grid;
-
-  .action-wrap {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    //padding: 12px;
-
-    .device-count {
-      font-size: 13px;
-      font-weight: 500;
-      line-height: 15.73px;
-      color: #9da6ad;
-    }
-
-    .add-device-dropdown-wrap {
-      #add-device-dropdown {
-        display: flex;
-        align-items: center;
-        gap: 8px;
-        background-color: var(--add-device-dropdown-bg-color);
-        border: 1px solid var(--add-device-dropdown-border-color);
-        border-radius: 6px;
-        padding: 7px 12px;
-        color: var(--add-device-dropdown-color);
-        font-size: 13px;
-        font-weight: 500;
-        line-height: 15.73px;
-        height: 32px;
-
-        &:hover {
-          background-color: var(--add-device-dropdown-bg-color-hover);
-          border-color: var(--add-device-dropdown-border-color-hover);
-          color: var(--add-device-dropdown-color-hover);
-        }
-
-        &.active {
-          color: #008fd6;
-          border-color: #008fd6;
-
-          &:hover {
-            background-color: var(--add-device-dropdown-active-bg-color-hover);
-          }
-        }
-
-        .add-device-dropdown-text {
-          font-weight: 500;
-          font-family: 'Inter', sans-serif;
-          text-transform: capitalize;
-        }
-      }
-      :deep(.ui-popup-window) {
-        overflow: hidden;
-        padding: 8px 0;
-
-        .ui-dropdown {
-          overflow: auto;
-          //max-height: calc(300px - 24px);
-
-          .ui-dropdown-menu.md {
-            padding: 0 8px;
-
-            li {
-              &.has-items .group-title {
-                padding: 4px 8px 0;
-                color: var(--add-device-dropdown-item-title-color);
-              }
-              &:not(:last-child) {
-                margin-bottom: 4px;
-              }
-              //&:last-child ul li:last-child {
-              //height: 26px;
-              //align-items: flex-end;
-              //}
-            }
-          }
-        }
-      }
-    }
-  }
-}
-.stack-view {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-  padding-bottom: 12px;
-  background-color: var(--vm-wizard-block-view-bg-color);
-
-  .vm-hardware-version-wrap {
-    align-items: flex-end;
-    text-align: right;
-
-    .vm-hardware-version {
-      font-size: 13px;
-      color: #9da6ad; // for light and dark
-    }
-  }
-}
-</style>
+<template>
+  <div class="virtual-hardware">
+    <div class="action-wrap py-3">
+      <span class="device-count">{{ deviceCountText }}</span>
+
+      <div class="add-device-dropdown-wrap">
+        <button
+          id="add-device-dropdown"
+          :class="['cursor-pointer', { active: isShowAddDeviceDropdown }]"
+          data-id="add-device-dropdown"
+          @click="isShowAddDeviceDropdown = !isShowAddDeviceDropdown"
+        >
+          <ui-icon name="plus" width="18" height="18" />
+          <span class="add-device-dropdown-text">
+            {{ addNewDeviceText }}
+          </span>
+        </button>
+        <ui-dropdown
+          :items="dropdownItems"
+          :show="isShowAddDeviceDropdown"
+          :margin-between-trigger="4"
+          show-from-left
+          width="max-content"
+          elem-id="add-device-dropdown"
+          test-id="add-device-dropdown"
+          left
+          max-height="400px"
+          @select="onAddDevice"
+          @hide="isShowAddDeviceDropdown = false"
+        />
+      </div>
+    </div>
+
+    <div class="overflow-auto virtual-hardware-content-block">
+      <div class="stack-view">
+        <common-vm-actions-common-customize-hardware-virtual-hardware-cpu
+          v-model="model"
+          :cpu-models="props.cpuModels"
+          :is-edit="props.isEdit"
+          :state="props.state"
+          :error-validation-fields="props.errorValidationFields"
+          :vm-cpu-help-text-second="props.vmCpuHelpTextSecond"
+          @remove-error-by-title="emits('remove-error-by-title', $event)"
+          @invalid="cpuInvalid = $event"
+        />
+        <common-vm-actions-common-customize-hardware-virtual-hardware-memory
+          v-model="model"
+          :max-memory="props.maxMemory"
+          :is-edit="props.isEdit"
+          :state="props.state"
+          :error-validation-fields="props.errorValidationFields"
+          @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-datastore-loading="props.isDatastoreLoading"-->
+        <!--                  :is-edit="props.isEdit"-->
+        <!--                  :state="props.state"-->
+        <!--                  :guest-machine-type="props.guestMachineType"-->
+        <!--                  :compute-resource="props.computeResource"-->
+        <!--                  @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)"-->
+        <!--        />-->
+        <!--        TODO-->
+        <div
+          v-for="(item, key) in model.disk_devices.filter(
+            (disk) => disk.device_type !== 'cdrom'
+          )"
+          :key="props.hardDisksIndex[key]"
+        >
+          <common-vm-actions-common-customize-hardware-virtual-hardware-new-hard-disk
+            v-model:size="item.size"
+            v-model:provision-type="item.provision_type"
+            v-model:sharing="item.sharing"
+            v-model:shares="item.shares"
+            v-model:limit-iops="item.limit_iops"
+            v-model:disk-mode="item.disk_mode"
+            v-model:cache="item.cache"
+            v-model:bus="item.bus"
+            v-model:read-only="item.readOnly"
+            v-model:discard="item.discard"
+            v-model:io="item.io"
+            v-model:target="item.target"
+            v-model:source="item.source"
+            v-model:storage="item.storage"
+            :index="props.hardDisksIndex[key]"
+            :type="props.hardDisksType[key]"
+            :main-storage="props.storage"
+            :main-storage-free="props.storageFree"
+            :error-validation-fields="props.errorValidationFields"
+            :get-datastore-table-func="props.getDatastoreTableFunc"
+            :datastore="props.datastore"
+            :is-datastore-loading="props.isDatastoreLoading"
+            :is-edit="props.isEdit"
+            :state="props.state"
+            :guest-machine-type="props.guestMachineType"
+            :compute-resource="props.computeResource"
+            @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)"
+          />
+        </div>
+        <!--        <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)"-->
+        <!--        />-->
+        <div
+          v-for="(item, key) in model.network_devices"
+          :key="props.networksIndex[key]"
+        >
+          <common-vm-actions-common-customize-hardware-virtual-hardware-new-network
+            v-model:network="item.network"
+            v-model:network-value="item[props.networkValueProp]"
+            v-model:mac="item.mac"
+            v-model:model="item.model"
+            :index="props.networksIndex[key]"
+            :type="props.networksType[key]"
+            :networks-table="props.networksTable"
+            :error-validation-fields="props.errorValidationFields"
+            :is-edit="props.isEdit"
+            :state="props.state"
+            :project="props.project"
+            :network-value-prop="props.networkValueProp"
+            @remove="emits('remove-network', 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)"
+          />
+        </div>
+        <!--        <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"-->
+        <!--          :compute-resource="props.computeResource"-->
+        <!--          @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],-->
+        <!--            ])-->
+        <!--          "-->
+        <!--        />-->
+        <div
+          v-for="(item, key) in model.disk_devices.filter(
+            (disk) => disk.device_type === 'cdrom'
+          )"
+          :key="props.hardDisksIndex[key]"
+        >
+          <!--          TODO count-->
+          <common-vm-actions-common-customize-hardware-virtual-hardware-cd-dvd-drive
+            v-model:source="item.source"
+            v-model:bus="item.bus"
+            v-model:remove="item.remove"
+            v-model:detach="item.detach"
+            :index="props.cdDvdDrivesIndex[key]"
+            :hard-disks-count="
+              model.disk_devices.filter((disk) => disk.device_type !== 'cdrom')
+                ?.length || 0
+            "
+            :type="props.cdDvdDrivesType[key]"
+            :nodes="props.nodes"
+            :files="props.files"
+            :error-validation-fields="props.errorValidationFields"
+            :is-edit="props.isEdit"
+            :state="props.state"
+            :guest-machine-type="props.guestMachineType"
+            :compute-resource="props.computeResource"
+            @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],
+              ])
+            "
+          />
+        </div>
+        <div v-for="(item, key) in model.usb_controllers" :key="key">
+          <common-vm-actions-common-customize-hardware-virtual-hardware-new-usb-controller
+            v-model="item.type"
+            :is-edit="props.isEdit"
+            :state="props.state"
+          />
+        </div>
+        <template v-if="props.passthroughDevices || props.mediatedDevices">
+          <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"
+            :mediated-devices="props.mediatedDevices"
+            :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
+          v-model="model.video_card"
+          :is-edit="props.isEdit"
+          :video-card="props.videoCard"
+          :error-validation-fields="props.errorValidationFields"
+          :state="props.state"
+          @invalid="videoCardInvalid = $event"
+          @remove-error-by-title="emits('remove-error-by-title', $event)"
+        />
+        <common-vm-actions-common-customize-hardware-virtual-hardware-other />
+        <div
+          v-if="props.compatibilityInfo"
+          class="vm-hardware-version-wrap justify-end flex flex-1 mt-4"
+        >
+          <span class="vm-hardware-version">
+            {{ props.compatibilityInfo }}
+          </span>
+        </div>
+      </div>
+    </div>
+
+    <Teleport to="body">
+      <common-vm-actions-common-customize-hardware-virtual-hardware-browse-view
+        v-if="props.isShowFileModal"
+        :nodes="props.nodes"
+        :files="props.files"
+        show
+        @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_I_Dropdown } from '~/node_modules/bfg-uikit/components/ui/dropdown/models/interfaces'
+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_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,
+  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 { dropdownItemsNewFunc } from './lib/config/dropdownItems'
+
+const model = defineModel<UI_I_CreateVmData>({ required: true })
+
+const cpuInvalid = defineModel<boolean>('cpuInvalid', { required: true })
+const memoryInvalid = defineModel<boolean>('memoryInvalid', { required: true })
+const videoCardInvalid = defineModel<boolean>('videoCardInvalid', {
+  required: true,
+})
+
+const props = withDefaults(
+  defineProps<{
+    nodes: UI_I_FileTreeNode[]
+    files: UI_I_FileTreeNode[]
+    isEdit: boolean
+    storage: UI_I_DatastoreTableItem | null
+    storageFree: number
+    project: UI_T_Project
+    maxMemory: number
+    cpuModels: UI_I_OptionItem[]
+    datastore: UI_I_DatastoreTableItem[]
+    isDatastoreLoading: boolean
+    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>
+    networkValueProp: 'network' | 'net_bridge'
+    cpu?: API_UI_I_VmEditCpu
+    state?: string | number
+    // hardDisks?: UI_I_SendDataNewHardDisk[] | null
+    videoCard?: UI_I_SendDataVideoCard
+    pciDevices?: UI_I_SendDataNewPciDevice[]
+    // cdDvdDrives?: UI_I_SendDataNewCdDvdDrive[] | null
+    guestMachineType?: UI_I_OptionItem | null
+    passthroughDevices?: UI_I_PciDevice[]
+    mediatedDevices?: UI_I_MediatedDevice[]
+    vmCpuHelpTextSecond?: string
+    computeResource?: UI_I_TreeNode | null
+    compatibilityInfo?: string
+  }>(),
+  {
+    cpu: undefined,
+    state: undefined,
+    videoCard: undefined,
+    pciDevices: undefined,
+    guestMachineType: undefined,
+    passthroughDevices: undefined,
+    mediatedDevices: undefined,
+    vmCpuHelpTextSecond: undefined,
+    computeResource: undefined,
+    compatibilityInfo: undefined,
+  }
+)
+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: '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-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
+}>()
+
+const { $text } = useNuxtApp()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const isShowAddDeviceDropdown = ref<boolean>(false)
+
+// TODO
+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) +
+    (model.value.disk_devices?.length || 0) +
+    (model.value.network_devices?.length || 0) +
+    (props.pciDevices?.length || 0) +
+    6
+)
+const deviceCountText = computed<string>(() =>
+  localization.value.vmWizard.devices.replace(
+    '{0}',
+    deviceCount.value.toString()
+  )
+)
+const dropdownItems = computed<UI_I_Dropdown[]>(() =>
+  dropdownItemsNewFunc(
+    localization.value,
+    props.state,
+    props.passthroughDevices,
+    props.mediatedDevices
+  )
+)
+
+const onAddDevice = (data: number): void => {
+  isShowAddDeviceDropdown.value = false
+  // из-за старого компонента
+  emits('add-device', { value: data })
+}
+</script>
+
+<style>
+:root {
+  --vm-wizard-block-view-bg-color: #fafafa;
+  --add-device-dropdown-bg-color: #fff;
+  --add-device-dropdown-bg-color-hover: #f6f7f8;
+  --add-device-dropdown-active-bg-color-hover: #f0f8fd;
+  --add-device-dropdown-border-color: #e9ebed;
+  --add-device-dropdown-border-color-hover: #e9ebed;
+  --add-device-dropdown-color: #4d5d69;
+  --add-device-dropdown-color-hover: #4d5d69;
+  --add-device-dropdown-item-title-color: #182531;
+}
+:root.dark-theme {
+  --vm-wizard-block-view-bg-color: transparent;
+  --add-device-dropdown-bg-color: #1b2a373d;
+  //--add-device-dropdown-bg-color-hover: #2585b614;
+  --add-device-dropdown-bg-color-hover: #b8bcc10a;
+  --add-device-dropdown-active-bg-color-hover: #2785b614;
+  --add-device-dropdown-border-color: #e9ebed1f;
+  --add-device-dropdown-border-color-hover: #2ba2de;
+  --add-device-dropdown-color: #e9eaec;
+  --add-device-dropdown-color-hover: #2ba2de;
+  --add-device-dropdown-item-title-color: #e9eaec;
+}
+</style>
+
+<style scoped lang="scss">
+.virtual-hardware {
+  height: 100%;
+  display: grid;
+
+  .action-wrap {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    //padding: 12px;
+
+    .device-count {
+      font-size: 13px;
+      font-weight: 500;
+      line-height: 15.73px;
+      color: #9da6ad;
+    }
+
+    .add-device-dropdown-wrap {
+      #add-device-dropdown {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        background-color: var(--add-device-dropdown-bg-color);
+        border: 1px solid var(--add-device-dropdown-border-color);
+        border-radius: 6px;
+        padding: 7px 12px;
+        color: var(--add-device-dropdown-color);
+        font-size: 13px;
+        font-weight: 500;
+        line-height: 15.73px;
+        height: 32px;
+
+        &:hover {
+          background-color: var(--add-device-dropdown-bg-color-hover);
+          border-color: var(--add-device-dropdown-border-color-hover);
+          color: var(--add-device-dropdown-color-hover);
+        }
+
+        &.active {
+          color: #008fd6;
+          border-color: #008fd6;
+
+          &:hover {
+            background-color: var(--add-device-dropdown-active-bg-color-hover);
+          }
+        }
+
+        .add-device-dropdown-text {
+          font-weight: 500;
+          font-family: 'Inter', sans-serif;
+          text-transform: capitalize;
+        }
+      }
+      :deep(.ui-popup-window) {
+        overflow: hidden;
+        padding: 8px 0;
+
+        .ui-dropdown {
+          overflow: auto;
+          //max-height: calc(300px - 24px);
+
+          .ui-dropdown-menu.md {
+            padding: 0 8px;
+
+            li {
+              &.has-items .group-title {
+                padding: 4px 8px 0;
+                color: var(--add-device-dropdown-item-title-color);
+              }
+              &:not(:last-child) {
+                margin-bottom: 4px;
+              }
+              //&:last-child ul li:last-child {
+              //height: 26px;
+              //align-items: flex-end;
+              //}
+            }
+          }
+        }
+      }
+    }
+  }
+}
+.stack-view {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding-bottom: 12px;
+  background-color: var(--vm-wizard-block-view-bg-color);
+
+  .vm-hardware-version-wrap {
+    align-items: flex-end;
+    text-align: right;
+
+    .vm-hardware-version {
+      font-size: 13px;
+      color: #9da6ad; // for light and dark
+    }
+  }
+}
+</style>