bfg-common 1.1.96 → 1.1.97

package/assets/localization/local_be.json

@@ -2068,5 +2068,10 @@
   "invalidCertificateDescription": "Увага! Па змаўчанні ўсталяваны самазавераны сертыфікат SSL. Каб працягваць працаваць з гэтым сертыфікатам SSL, вам неабходна дадаць яго ў каранёвае сховішча. Гэта можна зрабіць на ўсіх кліенцкіх прыладах або замяніць сертыфікатам SSL арганізацыі, або выкарыстоўваць свой уласны.",
   "youAreHere": "Вы тут",
   "showAllDatastores": "Паказаць усе сховішчы дадзеных",
-  "showDatastoresConnectedAllHosts": "Паказаць сховішчы даных, падлучаныя да ўсіх хостаў"
+  "showDatastoresConnectedAllHosts": "Паказаць сховішчы даных, падлучаныя да ўсіх хостаў",
+  "selectCloneOptions": "Выберыце параметры клонавання",
+  "selectFurtherCloneOptions": "Выберыце дадатковыя параметры клонавання",
+  "customizeTheOperatingSystem": "Наладзьце аперацыйную сістэму",
+  "customizeThisVirtualMachineHardware": "Наладзьце апаратнае забеспячэнне гэтай віртуальнай машыны",
+  "powerOnVirtualMachineAfterCreation": "Уключыце віртуальную машыну пасля стварэння"
 }

package/assets/localization/local_en.json

@@ -2071,5 +2071,10 @@
   "invalidCertificateDescription": "Attention! A self-signed SSL certificate is installed by default. To continue working with this SSL certificate, you need to add it to the root store. This can be done on all client devices or replaced with the organization's SSL certificate, or use your own.",
   "youAreHere": "You are here",
   "showAllDatastores": "Show all datastores",
-  "showDatastoresConnectedAllHosts": "Show datastores connected to all hosts"
+  "showDatastoresConnectedAllHosts": "Show datastores connected to all hosts",
+  "selectCloneOptions": "Select clone options",
+  "selectFurtherCloneOptions": "Select further clone options",
+  "customizeTheOperatingSystem": "Customize the operating system",
+  "customizeThisVirtualMachineHardware": "Customize this virtual machine's hardware",
+  "powerOnVirtualMachineAfterCreation": "Power on virtual machine after creation"
 }

package/assets/localization/local_hy.json

@@ -2071,5 +2071,10 @@
   "invalidCertificateDescription": "Ուշադրություն. Լռելյայն տեղադրվում է ինքնաստորագրված SSL վկայագիր: Այս SSL վկայագրի հետ աշխատելը շարունակելու համար դուք պետք է այն ավելացնեք արմատային խանութում: Սա կարելի է անել բոլոր հաճախորդի սարքերում կամ փոխարինել կազմակերպության SSL վկայականով, կամ օգտագործել ձերը:",
   "youAreHere": "Դու այստեղ ես",
   "showAllDatastores": "Ցույց տալ բոլոր տվյալների պահեստները",
-  "showDatastoresConnectedAllHosts": "Ցուցադրել տվյալների պահեստները, որոնք միացված են բոլոր հոսթներին"
+  "showDatastoresConnectedAllHosts": "Ցուցադրել տվյալների պահեստները, որոնք միացված են բոլոր հոսթներին",
+  "selectCloneOptions": "Ընտրեք կլոնավորման տարբերակները",
+  "selectFurtherCloneOptions": "Ընտրեք կլոնավորման հետագա տարբերակները",
+  "customizeTheOperatingSystem": "Անհատականացրեք օպերացիոն համակարգը",
+  "customizeThisVirtualMachineHardware": "Անհատականացրեք այս վիրտուալ մեքենայի ապարատը",
+  "powerOnVirtualMachineAfterCreation": "Միացնել վիրտուալ մեքենան ստեղծումից հետո"
 }

package/assets/localization/local_kk.json

@@ -2071,5 +2071,10 @@
   "invalidCertificateDescription": "Назар аударыңыз! Өздігінен қол қойылған SSL сертификаты әдепкі бойынша орнатылады. Осы SSL сертификатымен жұмыс істеуді жалғастыру үшін оны түбірлік қоймаға қосу керек. Мұны барлық клиенттік құрылғыларда жасауға немесе ұйымның SSL сертификатымен ауыстыруға немесе өзіңізді пайдалануға болады.",
   "youAreHere": "Сен мындасың",
   "showAllDatastores": "Барлық деректер қоймаларын көрсету",
-  "showDatastoresConnectedAllHosts": "Барлық хосттарға қосылған деректер қоймаларын көрсету"
+  "showDatastoresConnectedAllHosts": "Барлық хосттарға қосылған деректер қоймаларын көрсету",
+  "selectCloneOptions": "Клондау опцияларын таңдаңыз",
+  "selectFurtherCloneOptions": "Қосымша клондау опцияларын таңдаңыз",
+  "customizeTheOperatingSystem": "Операциялық жүйені теңшеңіз",
+  "customizeThisVirtualMachineHardware": "Осы виртуалды машинаның аппараттық құралын теңшеңіз",
+  "powerOnVirtualMachineAfterCreation": "Жасалғаннан кейін виртуалды машинаны қосыңыз"
 }

package/assets/localization/local_ru.json

@@ -2071,5 +2071,10 @@
   "invalidCertificateDescription": "Внимание! Установлен самоподписанный SSL-сертификат по умолчанию. Для продолжения работы с данным SSL-сертификатом необходимо его добавить в корневое хранилище. Это можно сделать на всех клиентских устройствах или заменить на SSL-сертификат организации, либо использовать собственный.",
   "youAreHere": "Вы здесь",
   "showAllDatastores": "Показать все хранилища данных",
-  "showDatastoresConnectedAllHosts": "Показать хранилища данных, подключенные ко всем хостам"
+  "showDatastoresConnectedAllHosts": "Показать хранилища данных, подключенные ко всем хостам",
+  "selectCloneOptions": "Выберите параметры клонирования",
+  "selectFurtherCloneOptions": "Выберите дополнительные параметры клонирования",
+  "customizeTheOperatingSystem": "Настройте операционную систему",
+  "customizeThisVirtualMachineHardware": "Настройте оборудование этой виртуальной машины",
+  "powerOnVirtualMachineAfterCreation": "Включите виртуальную машину после создания."
 }

package/assets/localization/local_zh.json

@@ -2071,5 +2071,10 @@
   "invalidCertificateDescription": "注意力！默认情况下安装自签名 SSL 证书。要继续使用此 SSL 证书，您需要将其添加到根存储区。这可以在所有客户端设备上完成，或者替换为组织的 SSL 证书，或者使用您自己的证书。",
   "youAreHere": "你在这里",
   "showAllDatastores": "显示所有数据存储",
-  "showDatastoresConnectedAllHosts": "显示连接到所有主机的数据存储"
+  "showDatastoresConnectedAllHosts": "显示连接到所有主机的数据存储",
+  "selectCloneOptions": "选择克隆选项",
+  "selectFurtherCloneOptions": "选择更多克隆选项",
+  "customizeTheOperatingSystem": "定制操作系统",
+  "customizeThisVirtualMachineHardware": "自定义该虚拟机的硬件",
+  "powerOnVirtualMachineAfterCreation": "创建后启动虚拟机"
 }

package/components/common/vm/actions/clone/Clone.vue

@@ -0,0 +1,544 @@
+<template>
+  <div class="add-vm">
+    <atoms-modal-by-steps
+      test-id="add-vm-wizard"
+      :show="true"
+      :title="localization.cloneExistingVirtualMachine"
+      :step-items="stepItems"
+      :step-position="stepPosition"
+      :loading="loading"
+      @change-step="onChangeStep"
+      @hide="onHideModal"
+    >
+      <template #modalBody>
+        <div class="add-vm-context">
+          <div class="context-title-wrap">
+            <p>{{ stepSubTitle }}</p>
+          </div>
+
+          <common-vm-actions-add-select-name
+            v-show="stepPosition === 1"
+            :show="stepPosition === 1"
+            :name-form-submit="nameFormSubmit"
+            :project="props.project"
+            @submit="onChangeNameAndNext(...$event)"
+            @check-name="emits('check-name', $event)"
+            @loading="loading = $event"
+          />
+          <common-vm-actions-add-select-storage
+            v-show="stepPosition === 2"
+            :storage-submit="storageSubmit"
+            :datastore="props.datastore"
+            :get-datastore-table-func="props.getDatastoreTableFunc"
+            @submit="onChangeStorageAndNext"
+          />
+          <common-vm-actions-clone-select-options
+            v-show="stepPosition === 3"
+            :select-options-submit="selectOptionsSubmit"
+            @submit="onChangeSelectOptionsAndNext"
+          />
+          <common-vm-actions-add-customize-hardware
+            v-show="stepPosition === 4"
+            v-model:vm-name="vmName"
+            v-model:guest-machine-type="vmSettings.guestMachineType"
+            v-model:guest-os-family="vmSettings.guestOsFamily"
+            v-model:guest-os-version="vmSettings.guestOsVersion"
+            :storage="vmSettings.storage"
+            :hard-disks-for-boot-options="virtualHardwareHardDisksLocal"
+            :cd-dvd-drives-for-boot-options="virtualHardwareCdDvdDrivesLocal"
+            :networks-for-boot-options="virtualHardwareNetworksLocal"
+            :cd-dvd-drives="vmSettings.cdDvdDrives"
+            :hard-disks="vmSettings.hardDisks"
+            :networks="vmSettings.networks"
+            :customize-hardware-submit="0"
+            :max-cpus="vmSettings.maxCpus"
+            :max-memory="vmSettings.maxMemory"
+            :cpu-models="vmSettings.cpuModels"
+            :cpu="vmSettings.cpu"
+            :memory="vmSettings.memory"
+            :video-card="vmSettings.videoCard"
+            :usb-controller="vmSettings.usbController"
+            :pci-devices="vmSettings.pciDevices"
+            :selected-nav-item="selectedNavItem"
+            :hard-disks-for-edit="vmSettings.hardDisks"
+            :options="vmSettings.options"
+            :nodes="props.nodes"
+            :files="props.files"
+            :networks-table="props.networksTable"
+            :error-validation-fields="props.errorValidationFields"
+            :vm-cpu-help-text-second="props.vmCpuHelpTextSecond"
+            :passthrough-devices="props.passthroughDevices"
+            :get-datastore-table-func="props.getDatastoreTableFunc"
+            :datastore="props.datastore"
+            :is-edit="false"
+            @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)"
+            @get-networks-table="emits('get-networks-table', $event)"
+            @get-pci-devices="emits('get-pci-devices')"
+            @change-boot-order="onChangeBootOrder"
+            @send-data="onChangeCustomizeHardware"
+          />
+          <common-vm-actions-clone-ready-to-complete
+            v-if="stepPosition === 5"
+            :ready-complete-table-info="props.readyCompleteTableInfo"
+          />
+        </div>
+      </template>
+
+      <template #modalFooter>
+        <div class="flex-align-center flex-space-between w-100">
+          <div class="power-on-by-default-wrap">
+            <template v-if="stepPosition === 5">
+              <input
+                id="power-on-by-default"
+                v-model="isPowerOnByDefault"
+                type="checkbox"
+              />
+              <label for="power-on-by-default" class="label-text-normal">{{
+                localization.powerOnByDefault
+              }}</label>
+            </template>
+          </div>
+          <div class="flex-align-center">
+            <button
+              id="vm-wizard-cancel-button"
+              class="btn btn-link"
+              @click="onHideModal"
+            >
+              {{ localization.cancel }}
+            </button>
+            <button
+              v-show="stepPosition > 0"
+              id="vm-wizard-back-button"
+              class="btn btn-outline"
+              @click="onBack"
+            >
+              {{ localization.back }}
+            </button>
+            <button
+              v-if="stepPosition === stepItems.length - 1"
+              id="vm-wizard-finish-button"
+              class="btn btn-success"
+              @click="onFinish"
+            >
+              {{ localization.finish }}
+            </button>
+            <button
+              v-else
+              id="vm-wizard-next-button"
+              class="btn btn-primary"
+              @click="onNext(false)"
+            >
+              {{ localization.next }}
+            </button>
+          </div>
+        </div>
+      </template>
+    </atoms-modal-by-steps>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type {
+  UI_I_DatastoreTableItem,
+  UI_I_FolderOrFileTreePayload,
+} from '~/models/store/storage/interfaces'
+import type { UI_I_NetworkTableItem } from '~/models/store/network/interfaces'
+import type { API_UI_I_Error, UI_I_TablePayload } from '~/models/store/interfaces'
+import type { UI_I_FileTreeNode } from '~/components/models/interfaces'
+import type { UI_I_Localization } from '~/models/interfaces'
+import type { UI_I_SendDataCustomizeHardware } from '~/components/common/vm/actions/add/customizeHardware/models/interfaces'
+import type { UI_I_ErrorValidationField } from '~/models/store/interfaces'
+import type {
+  UI_I_SendDataCpu,
+  UI_I_SendDataMemory,
+  UI_I_SendDataNewCdDvdDrive,
+  UI_I_SendDataNewHardDisk,
+  UI_I_SendDataNewNetwork,
+} from '~/components/common/vm/actions/add/customizeHardware/virtualHardware/models/interfaces'
+import type {
+  UI_T_AddVmFinishFunc,
+  UI_T_SelectedNavItem,
+} from '~/components/common/vm/actions/add/models/types'
+import type {
+  UI_I_OptionItem,
+  UI_I_VerticalStepItem,
+} from '~/components/atoms/models/interfaces'
+import type { UI_I_TableInfoItem } from '~/components/atoms/table/info/models/interfaces'
+import type { UI_I_ConfigurePciDevicesTable } from '~/models/store/host/interfaces'
+import type { UI_T_ChangeBootOrder } from '~/components/common/vm/actions/models/types'
+import type { UI_T_Project } from '~/models/types'
+import type { UI_I_VmSettings } from '~/models/store/vm/interfaces'
+import type { UI_I_VmForm } from '~/components/common/vm/actions/clone/models/interfaces'
+import { capabilities } from '~/components/common/vm/actions/add/config/capabilities'
+import {
+  stepItemsFunc,
+  subTitleFunc,
+} from '~/components/common/vm/actions/clone/utils'
+
+const props = defineProps<{
+  project: UI_T_Project
+  vmSettings: UI_I_VmSettings | null
+  nodes: UI_I_FileTreeNode[]
+  files: UI_I_FileTreeNode[]
+  networksTable: UI_I_NetworkTableItem[]
+  datastore: UI_I_DatastoreTableItem[]
+  errorValidationFields: UI_I_ErrorValidationField[]
+  readyCompleteTableInfo: UI_I_TableInfoItem[]
+  vmCpuHelpTextSecond: string
+  finishFunc: UI_T_AddVmFinishFunc
+  getDatastoreTableFunc: (payload: UI_I_TablePayload) => Promise<void>
+  validateSendDataFunc: UI_T_AddVmFinishFunc<
+    [UI_T_SelectedNavItem, null | number] | null
+  >
+  passthroughDevices: UI_I_ConfigurePciDevicesTable | null
+  vmNameInWizard: string
+}>()
+
+const emits = defineEmits<{
+  (event: 'check-name', value: [string, (error: API_UI_I_Error) => void]): 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
+  (event: 'hide'): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const stepPosition = ref<number>(0)
+watch(stepPosition, (newValue) => {
+  if (newValue === 5) validateSendData()
+})
+const stepItems = ref<UI_I_VerticalStepItem[]>([])
+stepItems.value = stepItemsFunc(localization.value, props.project)
+
+const subTitle: string[] = subTitleFunc(localization.value, props.project)
+const stepSubTitle = computed<string>(() => subTitle[stepPosition.value])
+
+const storageIdCash = ref<string | null>(null)
+const vmForm = ref<UI_I_VmForm>({
+  name: '',
+  storage: null,
+  options: [],
+})
+
+const isPowerOnByDefault = ref<boolean>(true)
+
+const onChangeNameAndNext = (name: string): void => {
+  checkLocalChangeAndChangeStepStatus()
+
+  vmForm.value.name = name
+  onNext(true)
+}
+
+const onChangeStorageAndNext = (
+  storage: UI_I_DatastoreTableItem | null
+): void => {
+  if (!storage) return
+
+  const hasChanges = storage.id !== storageIdCash.value
+  if (hasChanges) checkLocalChangeAndChangeStepStatus()
+
+  vmForm.value.storage = storage
+  storageIdCash.value = storage.id
+
+  onNext(true)
+}
+
+const onChangeSelectOptionsAndNext = (options: string[]): void => {
+  vmForm.value.options = options
+
+  onNext(true)
+}
+
+const customizeHardware = ref<UI_I_SendDataCustomizeHardware | null>(null)
+const onChangeCustomizeHardware = (
+  data: UI_I_SendDataCustomizeHardware
+): void => {
+  customizeHardware.value = data
+}
+
+const virtualHardwareHardDisksLocal = computed<
+  UI_I_SendDataNewHardDisk[] | null
+>(() => customizeHardware.value?.virtualHardware?.hardDisks || null)
+const virtualHardwareNetworksLocal = computed<UI_I_SendDataNewNetwork[] | null>(
+  () => customizeHardware.value?.virtualHardware?.networks || null
+)
+const virtualHardwareCdDvdDrivesLocal = computed<
+  UI_I_SendDataNewCdDvdDrive[] | null
+>(() => customizeHardware.value?.virtualHardware?.cdDvdDrives || null)
+
+const virtualHardwareCpu = computed<UI_I_SendDataCpu | null>(
+  () => customizeHardware.value?.virtualHardware?.cpu || null
+)
+const virtualHardwareMemory = computed<UI_I_SendDataMemory | null>(
+  () => customizeHardware.value?.virtualHardware?.memory || null
+)
+const virtualHardwareHardDisks = ref<UI_I_SendDataNewHardDisk[] | null>(null)
+const virtualHardwareCdDvdDrives = ref<UI_I_SendDataNewCdDvdDrive[] | null>(
+  null
+)
+const virtualHardwareNetworks = ref<UI_I_SendDataNewNetwork[] | null>(null)
+const onChangeBootOrder = (data: UI_T_ChangeBootOrder): void => {
+  virtualHardwareHardDisks.value = data[0]
+  virtualHardwareCdDvdDrives.value = data[1]
+  virtualHardwareNetworks.value = data[2]
+}
+
+watch(
+  () => props.vmNameInWizard,
+  (newValue) => {
+    vmForm.value.name = newValue
+  }
+)
+
+const loading = ref<boolean>(false)
+const validateSendData = (): void => {
+  loading.value = true
+  props
+    .validateSendDataFunc(
+      vmForm.value,
+      virtualHardwareCpu.value,
+      virtualHardwareMemory.value,
+      customizeHardware.value,
+      virtualHardwareNetworks.value,
+      virtualHardwareHardDisks.value,
+      virtualHardwareCdDvdDrives.value,
+      isPowerOnByDefault.value,
+      localization.value
+    )
+    .then((data) => {
+      loading.value = false
+      if (!data) return
+
+      selectedNavItem.value = data[0]
+      data[1] !== null && (stepPosition.value = data[1])
+    })
+}
+const onFinish = (): void => {
+  loading.value = true
+  props
+    .finishFunc(
+      vmForm.value,
+      virtualHardwareCpu.value,
+      virtualHardwareMemory.value,
+      customizeHardware.value,
+      virtualHardwareNetworks.value,
+      virtualHardwareHardDisks.value,
+      virtualHardwareCdDvdDrives.value,
+      isPowerOnByDefault.value,
+      localization.value
+    )
+    .then(() => {
+      onHideModal()
+      loading.value = false
+    })
+}
+
+const selectedNavItem = ref<UI_T_SelectedNavItem>(0)
+
+const nameFormSubmit = ref<number>(0)
+const storageSubmit = ref<number>(0)
+const selectOptionsSubmit = ref<number>(0)
+const customizeHardwareSubmit = ref<number>(0)
+
+const onNext = (force = false): void => {
+  const isValid = checkSubmit(force)
+  if (!isValid) {
+    return
+  }
+
+  const isDisabled = stepItems.value[cashStep]?.disabled
+  if (cashStep !== -1 && !isDisabled) {
+    stepPosition.value = cashStep
+    cashStep = -1
+    return
+  }
+
+  stepItems.value[stepPosition.value].complete = true
+  stepItems.value[stepPosition.value + 1].disabled = false
+  stepPosition.value++
+}
+const checkLocalChangeAndChangeStepStatus = (): void => {
+  stepItems.value = stepItems.value.map((step, index) => {
+    if (index > stepPosition.value) {
+      step.complete = false
+      step.disabled = index > stepPosition.value + 1
+    }
+
+    return step
+  })
+}
+
+const checkSubmit = (force = false): boolean => {
+  if (stepPosition.value === 1 && !force) {
+    nameFormSubmit.value++
+    return false
+  }
+  if (stepPosition.value === 2 && !force) {
+    storageSubmit.value++
+    return false
+  }
+  if (stepPosition.value === 3 && !force) {
+    selectOptionsSubmit.value++
+    return false
+  }
+  if (stepPosition.value === 4 && !force) {
+    customizeHardwareSubmit.value++
+    return false
+  }
+  return true
+}
+const checkSubmitByManual = (step: number): boolean => {
+  if (stepPosition.value === 1) {
+    nameFormSubmit.value++
+    return false
+  }
+  if (stepPosition.value === 2) {
+    storageSubmit.value++
+    return false
+  }
+  if (step === 6) {
+    customizeHardwareSubmit.value++
+    return false
+  }
+  return true
+}
+const onBack = (): void => {
+  stepPosition.value--
+}
+let cashStep = -1
+const onChangeStep = (key: number): void => {
+  const isValid = checkSubmitByManual(key)
+  if (!isValid) {
+    cashStep = key
+    return
+  }
+
+  stepPosition.value = key
+}
+
+const compatibility = ref<UI_I_OptionItem[]>(capabilities.compatibility)
+const cpuModels = ref<UI_I_OptionItem[]>(capabilities.cpuModels)
+const maxCpus = ref<number>(capabilities.maxCpus)
+const maxMemory = ref<number>(capabilities.maxMemory)
+
+const vmSettings = computed<UI_I_VmSettings | null>(() => props.vmSettings)
+const vmName = ref<string>(vmSettings.value?.name || '')
+watch(vmSettings, (newValue) => {
+  vmName.value = newValue?.name || ''
+})
+
+const onHideModal = (): void => {
+  emits('hide')
+}
+</script>
+
+<style scoped lang="scss">
+:deep(.has-solid.close-icon.clr-icon) {
+  width: 20px;
+  top: 0;
+}
+.add-vm-context {
+  padding: 16px 15px 10px 10px;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+
+  .context-title-wrap {
+    padding-bottom: 3px;
+    border-bottom: 1px solid #a6a6a6;
+
+    h4 {
+      font-weight: 700;
+      font-size: 13px;
+      color: var(--add-vm-context-title);
+    }
+    p {
+      font-weight: 400;
+      font-size: 13px;
+      color: var(--add-vm-context-sub-title);
+    }
+  }
+
+  .finish-block {
+    padding: 18px 24px 24px 24px;
+
+    .add-hosts-ready-to-complete-mt-12 {
+      margin-top: 12px;
+
+      .add-hosts-ready-to-complete-bold {
+        line-height: 18px;
+        font-weight: 700;
+      }
+    }
+  }
+
+  .vm-hardware-version {
+    align-self: flex-end;
+    margin-top: auto;
+  }
+}
+
+:deep(.modal .modal-dialog .modal-content .modal-footer) {
+  flex: unset;
+  height: unset;
+  min-height: unset;
+}
+:deep(.wizard-modal-titlebar h3) {
+  color: #000;
+  font-size: 24px;
+  font-weight: 200;
+  line-height: 27px;
+  margin: 0;
+  padding: 0;
+}
+:deep(.clr-wizard-stepnav-item) {
+  padding-left: 0;
+}
+:deep(.clr-wizard-stepnav
+    .clr-wizard-stepnav-item
+    button
+    .clr-wizard-stepnav-link-title) {
+  width: 189px;
+  font-weight: 700;
+  font-size: 13px;
+}
+
+#vm-wizard-notification {
+  h3 {
+    color: var(--global-font-color7);
+    margin-top: 6px;
+  }
+  p {
+    color: var(--global-font-color6);
+    line-height: 16px;
+  }
+}
+
+.power-on-by-default-wrap {
+  display: flex;
+  align-items: center;
+
+  input {
+    margin-right: 6px;
+  }
+}
+</style>
+
+<style>
+:root {
+  --add-vm-context-title: #333;
+  --add-vm-context-sub-title: #000;
+}
+:root.dark-theme {
+  --add-vm-context-title: #adbbc4;
+  --add-vm-context-sub-title: #adbbc4;
+}
+</style>

package/components/common/vm/actions/clone/models/interfaces.ts

@@ -0,0 +1,7 @@
+import { UI_I_DatastoreTableItem } from '~/models/store/storage/interfaces'
+
+export interface UI_I_VmForm {
+  name: string
+  storage: UI_I_DatastoreTableItem | null
+  options: string[]
+}

package/components/common/vm/actions/clone/select/options/Options.vue

@@ -0,0 +1,83 @@
+<template>
+  <div class="select-options">
+    <div class="checkbox">
+      <input
+        id="customize-os"
+        v-model="selectedOptions"
+        type="checkbox"
+        value="customize-os"
+      />
+      <label for="customize-os">{{
+        localization.customizeTheOperatingSystem
+      }}</label>
+    </div>
+    <div class="checkbox">
+      <input
+        id="customize-hardware"
+        v-model="selectedOptions"
+        type="checkbox"
+        value="customize-hardware"
+      />
+      <label for="customize-hardware">{{
+        localization.customizeThisVirtualMachineHardware
+      }}</label>
+    </div>
+    <div class="checkbox">
+      <input
+        id="power-on"
+        v-model="selectedOptions"
+        type="checkbox"
+        value="power-on"
+      />
+      <label for="power-on">{{
+        localization.powerOnVirtualMachineAfterCreation
+      }}</label>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_Localization } from '~/models/interfaces'
+
+const props = defineProps<{
+  selectOptionsSubmit: number
+}>()
+
+const emits = defineEmits<{
+  (event: 'submit', value: string[]): void
+}>()
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const selectedOptions = ref<string[]>([])
+watch(selectedOptions, newValue => {
+  emits('submit', newValue)
+})
+</script>
+
+<style scoped lang="scss">
+.select-os {
+  .select-os-block {
+    label:not(.windows-virtualization-label) {
+      padding: 0 5px 5px 0;
+    }
+
+    .windows-virtualization-label {
+      padding: 0 4px;
+    }
+  }
+}
+
+#os-select-help-icon {
+  h3 {
+    margin-top: 7px;
+    font-size: 22px;
+    color: #565656;
+  }
+  p {
+    width: 310px;
+    margin-top: 24px;
+    font-size: 14px;
+    color: #565656;
+  }
+}
+</style>

package/components/common/vm/actions/clone/utils.ts

@@ -0,0 +1,43 @@
+import { UI_I_Localization } from '~/models/interfaces'
+import { UI_I_VerticalStepItem } from '~/components/atoms/models/interfaces'
+import { UI_T_Project } from '~/models/types'
+
+export const stepItemsFunc = (
+  localization: UI_I_Localization,
+  project: UI_T_Project
+): UI_I_VerticalStepItem[] => {
+  if (project === 'sphere') {
+    return []
+  }
+  return [
+    {
+      text: localization.selectName,
+      disabled: true,
+      complete: false,
+    },
+    { text: localization.selectStorage, disabled: true, complete: false },
+    { text: localization.selectCloneOptions, disabled: true, complete: false },
+    {
+      text: localization.customizeHardware,
+      disabled: true,
+      complete: false,
+    },
+    { text: localization.readyComplete, disabled: true, complete: false },
+  ]
+}
+
+export const subTitleFunc = (
+  localization: UI_I_Localization,
+  project: UI_T_Project
+): string[] => {
+  if (project === 'sphere') {
+    return []
+  }
+  return [
+    localization.specifyUniqueName,
+    localization.selectStorageConfigurationDiskFiles,
+    localization.chooseGuestOSInstalledVmAndMachineTypeUsedCreateVm,
+    localization.selectFurtherCloneOptions,
+    localization.clickFinishStartCreation,
+  ]
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "bfg-common",
   "private": false,
-  "version": "1.1.96",
+  "version": "1.1.97",
   "scripts": {
     "build": "nuxt build",
     "dev": "nuxt dev --port=3002",