bfg-common 1.6.7 → 1.6.8

package/assets/localization/local_be.json

@@ -3492,8 +3492,7 @@
     "takeSnapshot": "Зрабіце здымак",
     "newSnapshot": "Новы здымак",
     "editSnapshot": "Рэдагаваць здымак",
-    "revertLatestSnapshot": "Вярнуцца да апошняга здымка",
-    "consolidateSnapshots": "Кансолідаваць здымкі"
+    "revertLatestSnapshot": "Вярнуцца да апошняга здымка"
   },
   "importVms": {
     "selectSourceTooltipDesc": "Правы карыстальніка esxi павінны адпавядаць ролях Administrator, крэдыт прымаюцца ад esxi і vSphere",

package/assets/localization/local_en.json

@@ -3496,8 +3496,7 @@
     "takeSnapshot": "Take Snapshot",
     "newSnapshot": "New Snapshot",
     "editSnapshot": "Edit snapshot",
-    "revertLatestSnapshot": "Revert to Latest Snapshot",
-    "consolidateSnapshots": "Consolidate Snapshots"
+    "revertLatestSnapshot": "Revert to Latest Snapshot"
   },
   "importVms": {
     "selectSourceTooltipDesc": "No Trusted infrastructure Administrator, credits are accepted from esxi and vSphere",

package/assets/localization/local_hy.json

@@ -3496,8 +3496,7 @@
     "takeSnapshot": "Ակնթարթ նկար",
     "newSnapshot": "Նոր սքրինշոթ",
     "editSnapshot": "Խմբագրել սքրինշոթը",
-    "revertLatestSnapshot": "Վերադառնալ վերջին նկարին",
-    "consolidateSnapshots": "Միավորել լուսանկարները"
+    "revertLatestSnapshot": "Վերադառնալ վերջին նկարին"
   },
   "importVms": {
     "selectSourceTooltipDesc": "Esxi օգտագործողի իրավունքները պետք է համապատասխանեն Administrator-ի դերերին, կրեդիտներն ընդունվում են esxi-ից և vSphere-ից",

package/assets/localization/local_kk.json

@@ -3495,8 +3495,7 @@
     "takeSnapshot": "сурет",
     "newSnapshot": "Жаңа снимок",
     "editSnapshot": "Снимокты өңдеу",
-    "revertLatestSnapshot": "Варнузза және түтіннің тұманы",
-    "consolidateSnapshots": "Суреттерді біріктіру"
+    "revertLatestSnapshot": "Варнузза және түтіннің тұманы"
   },
   "importVms": {
     "selectSourceTooltipDesc": "Esxi пайдаланушы құқықтары әкімші рөлдеріне сәйкес келуі керек, несиелер esxi және vSphere - ден алынады",

package/assets/localization/local_ru.json

@@ -3495,8 +3495,7 @@
     "takeSnapshot": "Сделать снимок",
     "newSnapshot": "Новый снимок",
     "editSnapshot": "Редактировать снимок",
-    "revertLatestSnapshot": "Вернуться к последнему снимку",
-    "consolidateSnapshots": "Консолидация снимков"
+    "revertLatestSnapshot": "Вернуться к последнему снимку"
   },
   "importVms": {
     "selectSourceTooltipDesc": "Права пользователя vmware дожны соответствовать ролям Administrator, креды принимаются от esxi и vSphere",
@@ -4088,7 +4087,7 @@
     "makeSureSelectHeartbeatDatastoreSeeDetails": "Убедитесь, что выбрали datastore для heartbeat, чтобы увидеть подробности."
   },
   "registerVm": {
-    "register": "Зарегистрироваться",
+    "register": "Зарегистрировать",
     "lastCreateSubtitle": "Проверьте данные перед регистрацией виртуальной машины.",
     "registerVmSelectFile": "Зарегистрировать ВМ — Выбор файла",
     "nameAlreadyExistsDescription": "Запись с таким именем уже существует."

package/assets/localization/local_zh.json

@@ -3493,8 +3493,7 @@
     "takeSnapshot": "快照",
     "newSnapshot": "新快照",
     "editSnapshot": "编辑快照",
-    "revertLatestSnapshot": "回到上一张照片",
-    "consolidateSnapshots": "合并快照"
+    "revertLatestSnapshot": "回到上一张照片"
   },
   "importVms": {
     "selectSourceTooltipDesc": "Esxi用户权限必须对应于管理员角色. esxi和vSphere接受积分",

package/components/common/layout/theHeader/ThemeSwitch.vue

@@ -2,7 +2,7 @@
   <ui-tooltip
     id="tooltip-theme-mode-toggle-button"
     test-id="tooltip-theme-mode-toggle-button"
-    size="sm"
+    size="md"
     position="bottom"
     position-by-tooltip="center"
   >

package/components/common/mainNavigationPanel/MainNavigationPanelNew.vue

@@ -143,7 +143,7 @@ const localization = computed<UI_I_Localization>(() => useLocal())
   &.pinned {
     .nav-context {
       position: relative;
-      z-index: calc(var(--z-default) + 1);
+      z-index: calc(var(--z-fixed) + 2);
     }
   }
   &:not(.pinned) {
@@ -177,6 +177,8 @@ const localization = computed<UI_I_Localization>(() => useLocal())
       }
     }
     &:not(.collapsed) {
+      min-width: 240px;
+
       :deep(.tooltip-container-hover) {
         display: none;
       }

package/components/common/monitor/lib/utils/local_be.json

@@ -684,5 +684,7 @@
   "multicastTx": "Перададзеныя multicast",
   "multicastTxDesc": "Колькасць перададзеных multicast пакетаў",
   "multicastRx": "Атрыманыя multicast",
-  "multicastRxDesc": "Колькасць атрыманых multicast пакетаў"
+  "multicastRxDesc": "Колькасць атрыманых multicast пакетаў",
+  "memSharedcommon": "Выкарыстанне агульнай памяці",
+  "memSharedcommonDesc": "Аб'ём памяці, якая падзяляецца паміж працэсамі (выкарыстанне агульнага сегмента агульнай памяці)"
 }

package/components/common/monitor/lib/utils/local_en.json

@@ -684,5 +684,7 @@
   "multicastTx": "Multicast transmitted",
   "multicastTxDesc": "Number of multicast packets transmitted",
   "multicastRx": "Multicast received",
-  "multicastRxDesc": "Number of multicast packets received"
+  "multicastRxDesc": "Number of multicast packets received",
+  "memSharedcommon": "Shared Memory Usage",
+  "memSharedcommonDesc": "Amount of memory shared between processes (common shared memory segment usage)"
 }

package/components/common/monitor/lib/utils/local_hy.json

@@ -684,5 +684,7 @@
   "multicastTx": "Փոխանցված multicast",
   "multicastTxDesc": "Փոխանցված multicast փաթեթների քանակը",
   "multicastRx": "Ստացված multicast",
-  "multicastRxDesc": "Ստացված multicast փաթեթների քանակը"
+  "multicastRxDesc": "Ստացված multicast փաթեթների քանակը",
+  "memSharedcommon": "Համօգտագործվող հիշողության օգտագործում",
+  "memSharedcommonDesc": "Պրոցեսների միջև համօգտագործվող հիշողության ծավալը (ընդհանուր համօգտագործվող հիշողության սեգմենտի օգտագործում)"
 }

package/components/common/monitor/lib/utils/local_kk.json

@@ -684,5 +684,7 @@
   "multicastTx": "Жіберілген мультикаст",
   "multicastTxDesc": "Жіберілген мультикаст пакеттерінің саны",
   "multicastRx": "Қабылданған мультикаст",
-  "multicastRxDesc": "Қабылданған мультикаст пакеттерінің саны"
+  "multicastRxDesc": "Қабылданған мультикаст пакеттерінің саны",
+  "memSharedcommon": "Ортақ жадты пайдалану",
+  "memSharedcommonDesc": "Процестер арасында бөлісетін жад көлемі (ортақ бөлісетін жад сегментін пайдалану)"
 }

package/components/common/monitor/lib/utils/local_ru.json

@@ -684,5 +684,7 @@
   "multicastTx": "Multicast отправлено",
   "multicastTxDesc": "Количество отправленных групповых пакетов",
   "multicastRx": "Multicast получено",
-  "multicastRxDesc": "Количество полученных групповых пакетов"
+  "multicastRxDesc": "Количество полученных групповых пакетов",
+  "memSharedcommon": "Использование разделяемой памяти",
+  "memSharedcommonDesc": "Объём памяти, совместно используемой процессами (общие сегменты разделяемой памяти)"
 }

package/components/common/monitor/lib/utils/local_zh.json

@@ -684,5 +684,7 @@
   "multicastTx": "已发送组播",
   "multicastTxDesc": "已发送的组播数据包数",
   "multicastRx": "已接收组播",
-  "multicastRxDesc": "已接收的组播数据包数"
+  "multicastRxDesc": "已接收的组播数据包数",
+  "memSharedcommon": "共享内存使用情况",
+  "memSharedcommonDesc": "进程之间共享的内存量（公共共享内存段使用情况）"
 }

package/components/common/monitor/utilization/infoBlock/Old.vue

@@ -17,7 +17,7 @@
         </div>
       </div>
       <div class="footer-body-block">
-        <p>0 {{ localization.common.gb }}</p>
+        <p>{{ consumedItem?.value }}</p>
         <p>{{ maxItem?.value }}</p>
       </div>
     </div>

package/components/common/pages/scheduledTasks/table/new/New.vue

@@ -82,16 +82,18 @@
               <ui-icon name="vertical-dotes" width="20" height="20" />
             </span>
           </ui-button>
-          <ui-dropdown
-            :show="actionsShowId === item.data.id"
-            :test-id="`event-table-action-dropdown-${item.data.id}`"
-            :items="schedulerDropActions"
-            :elem-id="`event-table-action-${item.data.id}`"
-            width="max-content"
-            left
-            @select="onSelectAction"
-            @hide="onHideActionsDropdown"
-          />
+          <Teleport to="body">
+            <ui-dropdown
+              :show="actionsShowId === item.data.id"
+              :test-id="`event-table-action-dropdown-${item.data.id}`"
+              :items="schedulerDropActions"
+              :elem-id="`event-table-action-${item.data.id}`"
+              width="max-content"
+              left
+              @select="onSelectAction"
+              @hide="onHideActionsDropdown"
+            />
+          </Teleport>
         </div>
       </template>
 

package/components/common/pages/tasks/table/Table.vue

@@ -67,28 +67,30 @@
             <ui-icon name="vertical-dotes" width="20" height="20" />
           </span>
         </ui-button>
-        <ui-dropdown
-          :show="actionsShowId === item.data.id"
-          :test-id="`data-table-task-dropdown-${item.data.id}`"
-          :items="actions"
-          :elem-id="`data-table-task-action-${item.data.id}`"
-          width="max-content"
-          left
-          @select="onSelectAction(item.data.target, $event)"
-          @hide="onHideActionsDropdown"
-        >
-          <template #row="{ item: dropMenu }">
-            <ui-icon
-              v-if="dropMenu.iconName === 'hide'"
-              name="password-hide"
-              width="16"
-              height="16"
-            />
-            <span class="action-text">
-              {{ dropMenu.text }}
-            </span>
-          </template>
-        </ui-dropdown>
+        <Teleport to="body">
+          <ui-dropdown
+            :show="actionsShowId === item.data.id"
+            :test-id="`data-table-task-dropdown-${item.data.id}`"
+            :items="actions"
+            :elem-id="`data-table-task-action-${item.data.id}`"
+            width="max-content"
+            left
+            @select="onSelectAction(item.data.target, $event)"
+            @hide="onHideActionsDropdown"
+          >
+            <template #row="{ item: dropMenu }">
+              <ui-icon
+                v-if="dropMenu.iconName === 'hide'"
+                name="password-hide"
+                width="16"
+                height="16"
+              />
+              <span class="action-text">
+                {{ dropMenu.text }}
+              </span>
+            </template>
+          </ui-dropdown>
+        </Teleport>
       </div>
     </template>
 

package/components/common/vm/actions/consolidate/New.vue

@@ -1,6 +1,6 @@
 <template>
   <common-modals-confirmation
-    :headline="localization.snapshots.consolidateSnapshots"
+    :headline="localization.common.consolidateConfirmation"
     :description="localization.common.consolidateConfirmationDesc"
     :modal-texts="modalTexts"
     @hide-modal="emits('hide-modal')"

package/components/common/vm/actions/consolidate/Old.vue

@@ -1,7 +1,7 @@
 <template>
   <common-modals-confirmation
-    :headline="localization.snapshots.consolidateSnapshots"
-    :description="localization.common.consolidateConfirmationDesc"
+    :headline="localization.common.consolidate"
+    :description="localization.common.consolidateConfirmationDescOld"
     @hide-modal="emits('hide-modal')"
     @confirm="emits('confirm')"
   />

package/components/common/vm/actions/register/New.vue

@@ -21,12 +21,14 @@
         :sub-title-height="heightName"
       >
         <template #subTitle>
-          <div ref="subTitleBlockName" class="subtitle-block">
-            <div
-              id="name-alert-wrapper"
-              :class="[{ 'mb-4': !isNameAlertWrapperEmpty }]"
-            ></div>
-            <ui-wizard-subtitle :sub-title="currentSubtitleSelectNameBlock" />
+          <div ref="subTitleBlockName">
+            <div class="subtitle-block">
+              <div
+                id="name-alert-wrapper"
+                :class="[{ 'mb-4': !isNameAlertWrapperEmpty }]"
+              ></div>
+              <ui-wizard-subtitle :sub-title="currentSubtitleSelectNameBlock" />
+            </div>
           </div>
         </template>
         <template #content>
@@ -51,7 +53,7 @@
             "
             :test-ids="props.nameTestIds"
             :has-location="props.isSphere"
-            :location-nodes="props.locationNodes"
+            :location-nodes="localLocationNodes"
             :allowed-location-kinds="props.allowedLocationKinds"
             :location-description="props.locationDescription"
             @submit="emits('change-name', $event)"
@@ -68,21 +70,23 @@
         :sub-title-height="heightComputeResource"
       >
         <template #subTitle>
-          <div ref="computeResource" class="subtitle-block">
-            <ui-alert
-              v-if="props.computeResourceAlert.length"
-              :messages="props.computeResourceAlert"
-              test-id="computed-resource-alert"
-              type="error"
-              size="md"
-              class="subtitle-block__alert mb-4"
-            />
-            <ui-wizard-subtitle
-              :sub-title="
-                localization.vmWizard
-                  .selectDestinationComputeResourceForThisOperation
-              "
-            />
+          <div ref="computeResource">
+            <div class="subtitle-block">
+              <ui-alert
+                v-if="props.computeResourceAlert.length"
+                :messages="props.computeResourceAlert"
+                test-id="computed-resource-alert"
+                type="error"
+                size="md"
+                class="subtitle-block__alert mb-4"
+              />
+              <ui-wizard-subtitle
+                :sub-title="
+                  localization.vmWizard
+                    .selectDestinationComputeResourceForThisOperation
+                "
+              />
+            </div>
           </div>
         </template>
         <template #content>
@@ -115,10 +119,12 @@
           </div>
         </template>
         <template #content>
-          <common-ready-to-complete
-            v-if="selectedStep.id === props.dynamicSteps.readyComplete"
-            :data="props.readyCompleteTableInfo"
-          />
+          <div class="register-vm-ready-to-complete-container">
+            <common-ready-to-complete
+              v-if="selectedStep.id === props.dynamicSteps.readyComplete"
+              :data="props.readyCompleteTableInfo"
+            />
+          </div>
         </template>
       </ui-wizard-block>
     </template>
@@ -213,6 +219,15 @@ const currentSubtitleSelectNameBlock = ref<string>(
 
 const initialCompare = compare(vmForm)
 const hasChanges = computed<boolean>(() => initialCompare.getDiff(vmForm.value))
+
+const localLocationNodes = computed<UI_I_TreeNode[]>(() => {
+  const copyData = useDeepCopy(props.locationNodes)
+  if (copyData[0] && !copyData[0]?.nodes.length) {
+    copyData[0].hasNodes = true
+  }
+
+  return copyData
+})
 </script>
 
 <style>
@@ -234,10 +249,23 @@ const hasChanges = computed<boolean>(() => initialCompare.getDiff(vmForm.value))
   border-color: var(--select-name-border-color);
 }
 .compute-resource-container {
-  padding-bottom: 40px;
+  padding-bottom: 16px;
 
+  :deep(.tree-content) {
+    padding: 8px !important;
+  }
   :deep(.compatibility-wrap) {
     margin-top: 24px;
   }
 }
+.register-vm-ready-to-complete-container {
+  padding-bottom: 16px;
+
+  :deep(.details-list__col-right) {
+    align-items: flex-start;
+  }
+  :deep(.details-item-value) {
+    white-space: normal;
+  }
+}
 </style>

package/components/common/vm/actions/register/lib/config/steps.ts

@@ -72,7 +72,7 @@ export const stepsFunc = (
     {
       id: dynamicSteps.readyComplete,
       stepName: '',
-      title: localization.vmWizard.readyComplete,
+      title: localization.common.readyComplete,
       subTitle: localization.vmWizard.lastCreateSubtitle,
       status: UI_E_WIZARD_STATUS.INACTIVE,
       isValid: true,

package/components/common/vm/actions/rename/New.vue

@@ -11,21 +11,12 @@
     @hide="emits('hide')"
   >
     <template #content>
-      <ui-alert
-          v-if="props.errors.length"
-          :messages="props.errors.length && !isEmptyName ? props.errors : []"
-          test-id="sign-in-error-alert"
-          type="error"
-          class="mb-2 mx-8"
-          size="md"
-          hide-close-button
-      />
       <div class="content">
         <form @submit.prevent="onRename">
           <ui-input
             id="name"
             v-model="nameLocal"
-            :error="props.isEmptyName ? localization.common.fieldRequired : ''"
+            :error="props.errors[0]"
             :label="localization.common.name"
             test-id="rename-vm-name-input"
             type="text"
@@ -46,7 +37,6 @@ const props = defineProps<{
   vmName: string
   isLoading: boolean
   errors: string[]
-  isEmptyName: boolean
 }>()
 const emits = defineEmits<{
   (event: 'hide'): void

package/components/common/vm/actions/rename/Rename.vue

@@ -4,7 +4,6 @@
     :vm-name="props.vmName"
     :is-loading="isLoading"
     :errors="errors"
-    :is-empty-name="isEmptyName"
     @hide="onHide"
     @change-name="onChangeName"
     @remove-validation-errors="onRemoveValidationErrors"
@@ -65,7 +64,6 @@ const onChangeName = async (name: string): Promise<void> => {
   onHide()
 }
 
-const isEmptyName = ref<boolean>(false)
 const errors = ref<string[]>([])
 const showValidationErrors = (data: string[]): void => {
   errors.value = data
@@ -76,8 +74,6 @@ const onRemoveValidationErrors = (): void => {
 
 const onCheckName = async (name: string): Promise<boolean> => {
   let result = true
-  isEmptyName.value = false
-  errors.value = []
 
   const url = props.nameRequestUrl.replace('{name}', encodeURIComponent(name))
   const { error } = await useMyFetch<null, API_UI_I_Error>(url, {
@@ -87,11 +83,9 @@ const onCheckName = async (name: string): Promise<boolean> => {
   const status = error.value?.statusCode || 200
   switch (status) {
     case 400: // Empty name
-    case 404: // 404 получаем в Сфере
       showValidationErrors([
         localization.value.common.emptyNameValidationDescription,
       ])
-      isEmptyName.value = true
       result = false
       break
     case 405: // Invalid kind

package/components/common/vm/snapshots/lib/models/types.ts

@@ -2,7 +2,6 @@ export type UI_T_SnapshotActionType =
   | 'take'
   | 'edit'
   | 'revert'
-  | 'revertLast'
   | 'delete'
   | 'delete_all'
   | 'group_take'

package/components/common/vm/snapshots/modals/confirm/New.vue

@@ -10,7 +10,7 @@
     @hide-modal="emits('hide')"
     @confirm="emits('submit')"
   >
-    <template v-if="props.type === 'revert' || props.type === 'revertLast'" #otherContent>
+    <template v-if="props.type === 'revert'" #otherContent>
       <div class="confirm-modal-checkbox-content mt-4 p-3">
         <ui-checkbox
           v-model="suspendOnRevert"
@@ -79,7 +79,6 @@ const descriptionText = computed<string>(() => {
       break
 
     case 'revert':
-    case 'revertLast':
       description =
         localization.value.snapshots.revertToSnapshotDescription.replace(
           '{0}',

package/components/common/vm/snapshots/modals/confirm/Old.vue

@@ -8,7 +8,7 @@
     @submit="onConfirm"
   >
     <template #modalBody>
-      <div v-if="props.type === 'revert' || props.type === 'revertLast'">
+      <div v-if="props.type === 'revert'">
         <p class="description-text" data-id="description-revert-content">
           {{ descriptionRevertContent }}
         </p>

package/components/common/vm/snapshots/modals/confirm/lib/models/enums.ts

@@ -2,7 +2,6 @@ export enum UI_E_TitleConfirmModal {
   'take' = '',
   'edit' = 'edit',
   'revert' = 'revert',
-  'revertLast' = 'revert',
   'delete' = 'delete',
   'delete_all' = 'deleteAll',
   'group_delete_all' = 'deleteAll',
@@ -13,7 +12,6 @@ export enum UI_E_TitleModal {
   'take' = '',
   'edit' = '',
   'revert' = 'revertToSnapshot',
-  'revertLast' = 'revertLatestSnapshot',
   'delete' = 'deleteSnapshot',
   'delete_all' = 'deleteAllSnapshots',
   'group_delete_all' = 'deleteAllSnapshots',

package/components/common/vm/snapshots/modals/lib/config/modalTexts.ts

@@ -18,7 +18,6 @@ export const modalTexts = (
     groupTake: localization.common.create,
     edit: localization.common.save,
     revert: localization.common.revert,
-    revertLast: localization.common.revert,
     delete: localization.common.delete,
     delete_all: localization.common.deleteAll,
     group_delete_all: localization.common.deleteAll,

package/components/common/wizards/common/steps/name/New.vue

@@ -16,7 +16,7 @@
 
     <div class="name-field">
       <div class="flex-1 flex-align-center">
-        <ui-skeleton-item v-if="isLoading" width="112px" height="20px"/>
+        <ui-skeleton-item v-if="isLoading" width="112px" height="20px" />
         <label v-else :for="`${props.testIds.name}-name`" class="name-label">{{
           localization.common.name
         }}</label>
@@ -33,33 +33,42 @@
       </div>
 
       <div class="flex-2">
-        <ui-skeleton-item v-if="isLoading" width="480px" height="36px" border-radius="8px"/>
+        <ui-skeleton-item
+          v-if="isLoading"
+          width="480px"
+          height="36px"
+          border-radius="8px"
+        />
 
         <!--        ToDo при возможности придумать способ выделить тултип в компонент инпута-->
         <ui-tooltip
-            v-else
-            id="vm-name-tooltip"
-            test-id="vm-name-tooltip"
-            size="md"
-            width="240"
-            position="bottom"
-            show-type="variant-1"
-            timing="500"
+          v-else
+          id="vm-name-tooltip"
+          test-id="vm-name-tooltip"
+          size="md"
+          width="240"
+          position="bottom"
+          show-type="variant-1"
+          timing="500"
         >
           <template #target>
             <ui-input
-                v-model="name"
-                id="vm-name-tooltip"
-                :placeholder="`${localization.common.name} (${localization.common.optional})`"
-                type="text"
-                maxlength="54"
-                :error="props.nameErrorText"
-                :test-id="props.testIds.name"
-                :disabled="props.isDisabledField"
+              v-model="name"
+              id="vm-name-tooltip"
+              :placeholder="`${localization.common.name} (${localization.common.optional})`"
+              type="text"
+              maxlength="54"
+              :error="props.nameErrorText"
+              :test-id="props.testIds.name"
+              :disabled="props.isDisabledField"
             />
           </template>
-          <template v-if="props.errors.length" #content >
-            <p v-for="(error, index) in props.errors" :key="index" class="name-tooltip-text">
+          <template v-if="props.errors.length" #content>
+            <p
+              v-for="(error, index) in props.errors"
+              :key="index"
+              class="name-tooltip-text"
+            >
               {{ error }}
             </p>
           </template>
@@ -70,11 +79,19 @@
     <template v-if="props.hasLocation">
       <div class="location">
         <div class="flex-1">
-          <span v-if="location" class="location-label">{{ localization.common.location }}</span>
-          <ui-skeleton-item v-else width="144px" height="20px"/>
+          <span v-if="location" class="location-label">{{
+            localization.common.location
+          }}</span>
+          <ui-skeleton-item v-else width="144px" height="20px" />
         </div>
 
-        <div v-if="location" :class="['selected-location flex-2', { disabled: props.isDisabledField }]">
+        <div
+          v-if="location"
+          :class="[
+            'selected-location flex-2',
+            { disabled: props.isDisabledField },
+          ]"
+        >
           <span :class="['node-icon', location.iconClassName]" />
           <span :class="['text', isShowAlert && 'error']">
             {{ location.name }}
@@ -82,10 +99,10 @@
         </div>
         <ui-skeleton-item v-else width="160px" height="20px" />
       </div>
-      <div :class="['tree-view-wrap', { 'disabled': props.isDisabledField }]">
+      <div :class="['tree-view-wrap', { disabled: props.isDisabledField }]">
         <common-wizards-common-steps-name-location
-            v-model:location="location"
-            :nodes="props.locationNodes"
+          v-model:location="location"
+          :nodes="props.locationNodes"
         />
       </div>
     </template>
@@ -123,7 +140,7 @@ const isShowAlert = computed<boolean>(() =>
 const isLoading = ref(true)
 
 onMounted(() => {
-  setTimeout(() => isLoading.value = false, 0)
+  setTimeout(() => (isLoading.value = false), 0)
 })
 </script>
 
@@ -134,9 +151,10 @@ onMounted(() => {
   --select-name-help-icon-active-color: #008fd6;
   --select-name-help-hide-icon-color: #213444;
   --select-name-border-color: #e9ebeda3;
+  --select-register-vm-name-top-border-color: #e9ebeda3;
   --select-name-location-node-color: #182531;
   --select-name-location-bg-color: #ffffff;
-  --select-name-tooltip-bg: #EA3223E0;
+  --select-name-tooltip-bg: #ea3223e0;
 }
 :root.dark-theme {
   --select-name-text-color: #e9eaec;
@@ -144,9 +162,10 @@ onMounted(() => {
   --select-name-help-icon-active-color: #2ba2de;
   --select-name-help-hide-icon-color: #e9eaec;
   --select-name-border-color: #e9ebed1f;
+  --select-register-vm-name-top-border-color: #e9ebed1f;
   --select-name-location-node-color: #e9eaec;
   --select-name-location-bg-color: #1b2a371f;
-  --select-name-tooltip-bg: #EA3223B8;
+  --select-name-tooltip-bg: #ea3223b8;
 }
 </style>
 <style scoped lang="scss">
@@ -170,7 +189,7 @@ onMounted(() => {
 
     .name-tooltip-text {
       font-size: 12px;
-      color: #E9EAEC;
+      color: #e9eaec;
     }
 
     .name-label {
@@ -200,7 +219,7 @@ onMounted(() => {
     display: flex;
     margin-top: 16px;
     padding: 22px 0;
-    border-top: 1px solid var(--select-name-border-color);
+    border-top: 1px solid var(--select-register-vm-name-top-border-color);
     column-gap: 16px;
     align-items: flex-start;
 

package/components/common/wizards/vm/migrate/steps/computeResource/tableView/new/New.vue

@@ -2,7 +2,7 @@
   <div class="device-table-container">
     <ui-data-table
       :data="data"
-      :options="options"
+      :options="tableConfig.options"
       :loading="props.isLoading"
       :total-pages="props.totalPages"
       :total-items="props.totalItems"
@@ -79,13 +79,10 @@ import type {
   UI_I_TableTexts,
 } from '~/node_modules/bfg-uikit/components/ui/dataTable/models/interfaces'
 import type { UI_I_DataTableSkeleton } from '~/node_modules/bfg-uikit/components/ui/dataTable/models/interfaces'
-import type { UI_T_SelectComputeResourceTabType } from '~/components/common/wizards/vm/migrate/select/storage/lib/models/types'
+import type { UI_T_SelectComputeResourceTabType } from '~/components/common/wizards/vm/migrate/steps/selectStorage/lib/models/types'
 import type { UI_T_ComputeResourceTableItem } from '~/components/common/wizards/vm/migrate/steps/computeResource/lib/models/types'
-import {
-  options,
-  getHeaderDataFunc,
-  getBodyDataFunc,
-} from '~/components/common/wizards/vm/migrate/steps/computeResource/tableView/new/lib/config/hostTable'
+import * as hostTable from '~/components/common/wizards/vm/migrate/steps/computeResource/tableView/new/lib/config/hostTable'
+import * as clusterTable from '~/components/common/wizards/vm/migrate/steps/computeResource/tableView/new/lib/config/clusterTable'
 
 const selectedDataLocal = defineModel<number | null>({ required: true })
 const props = defineProps<{
@@ -120,15 +117,33 @@ const tableSkeleton = ref<UI_I_DataTableSkeleton>({
   withoutPagination: true,
 })
 
+const tableTitleMap = {
+  host: localization.value.common.hosts,
+  cluster: localization.value.common.clusters,
+} as const
+const tableConfigMap = {
+  host: hostTable,
+  cluster: clusterTable,
+} as const
+
+const tableConfig = computed(
+  () => tableConfigMap[props.type as keyof typeof tableConfigMap]
+)
+
 const data = computed<UI_I_DataTable>(() => ({
-  id: 'compute-resource-host-table',
-  title: `${localization.value.common.hosts} (${props.totalItems})`,
+  id: `compute-resource-${props.type}-table`,
+  title: tableDataTitle.value,
   header: deviceHeadItems.value,
   body: deviceBodyItems.value,
 }))
-
+const tableDataTitle = computed<string>(
+  () =>
+    `${tableTitleMap[props.type as keyof typeof tableConfigMap]} (${
+      props.totalItems
+    })`
+)
 const deviceHeadItems = computed<UI_I_DataTableHeader[]>(() =>
-  getHeaderDataFunc(localization.value)
+  tableConfig.value.getHeaderDataFunc(localization.value)
 )
 
 const deviceBodyItems = ref<UI_I_DataTableBody[]>([])
@@ -140,13 +155,16 @@ watch(
       return
     }
 
-    deviceBodyItems.value = getBodyDataFunc(newValue, localization.value)
+    deviceBodyItems.value = tableConfig.value.getBodyDataFunc(
+      newValue,
+      localization.value
+    )
   },
   { deep: true, immediate: true }
 )
 
 const onSelectRow = (value: UI_I_DataTableBody[]): void => {
-  selectedDataLocal.value = value?.[0].row
+  selectedDataLocal.value = value?.[0].row as number
 }
 </script>
 

package/components/common/wizards/vm/migrate/steps/computeResource/tableView/new/lib/config/clusterTable.ts

@@ -0,0 +1,340 @@
+import type {
+  UI_I_DataTableBody,
+  UI_I_DataTableOptions,
+  UI_I_DataTableHeader,
+} from '~/node_modules/bfg-uikit/components/ui/dataTable/models/interfaces'
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_ClusterTableItem } from '~/components/common/wizards/vm/migrate/steps/computeResource/tableView/lib/models/interfaces'
+// import {
+//   UI_E_DeviceStatus,
+//   UI_E_DeviceStatusChipColor,
+//   UI_E_DeviceStatusIcon,
+// } from '~/components/common/wizards/vm/migrate/steps/computeResource/tableView/new/lib/models/enums'
+
+// // Маппинг для статусов
+// const STATUS_MAPPING = {
+//   [UI_E_DeviceStatus.Unknown]: {
+//     icon: UI_E_DeviceStatusIcon.HelpIcon,
+//     chipColor: UI_E_DeviceStatusChipColor.Primary,
+//   },
+//   [UI_E_DeviceStatus.Supported]: {
+//     icon: UI_E_DeviceStatusIcon.StatusCheck,
+//     chipColor: UI_E_DeviceStatusChipColor.Green,
+//   },
+//   [UI_E_DeviceStatus.NotSupported]: {
+//     icon: UI_E_DeviceStatusIcon.Close,
+//     chipColor: UI_E_DeviceStatusChipColor.Red,
+//   },
+// }
+
+export const getHeaderDataFunc = (
+  localization: UI_I_Localization
+): UI_I_DataTableHeader[] => [
+  {
+    col: 'col0',
+    colName: 'name',
+    text: localization.common.name,
+    isSortable: true,
+    sort: 'asc',
+    width: '180px',
+    show: true,
+    filter: false,
+  },
+  {
+    col: 'col1',
+    colName: 'available_cpu',
+    text: localization.common.availableCpu,
+    isSortable: true,
+    sort: 'asc',
+    width: '96px',
+    show: true,
+    filter: false,
+  },
+  {
+    col: 'col2',
+    colName: 'available_memory',
+    text: localization.common.availableMemory,
+    isSortable: true,
+    sort: 'asc',
+    width: '96px',
+    show: true,
+    filter: false,
+  },
+  {
+    col: 'col3',
+    colName: 'available_storage',
+    text: localization.common.availableStorage,
+    isSortable: true,
+    sort: 'asc',
+    width: '96px',
+    show: true,
+    filter: false,
+  },
+  {
+    col: 'col4',
+    colName: 'drs',
+    text: localization.common.vSphere_DRS,
+    isSortable: true,
+    sort: 'asc',
+    width: '96px',
+    show: true,
+    filter: false,
+  },
+  {
+    col: 'col5',
+    colName: 'ha',
+    text: localization.common.vSphere_HA,
+    isSortable: true,
+    sort: 'asc',
+    width: '96px',
+    show: true,
+    filter: false,
+  },
+  {
+    col: 'col6',
+    colName: 'total_cpu',
+    text: localization.common.totalCpu,
+    isSortable: true,
+    sort: 'asc',
+    width: '96px',
+    show: true,
+    filter: false,
+  },
+  {
+    col: 'col7',
+    colName: 'total_memory',
+    text: localization.common.totalMemory,
+    isSortable: true,
+    sort: 'asc',
+    width: '96px',
+    show: true,
+    filter: false,
+  },
+  {
+    col: 'col8',
+    colName: 'total_storage',
+    text: localization.common.totalStorage,
+    isSortable: true,
+    sort: 'asc',
+    width: '96px',
+    show: true,
+    filter: false,
+  },
+  {
+    col: 'col9',
+    colName: 'vms',
+    text: localization.common.vms,
+    isSortable: true,
+    sort: 'asc',
+    width: '96px',
+    show: true,
+    filter: false,
+  },
+  {
+    col: 'col10',
+    colName: 'hosts',
+    text: localization.common.hosts,
+    isSortable: true,
+    sort: 'asc',
+    width: '96px',
+    show: true,
+    filter: false,
+  },
+  {
+    col: 'col11',
+    colName: 'cpus',
+    text: localization.common.cpus,
+    isSortable: true,
+    sort: 'asc',
+    width: '96px',
+    show: true,
+    filter: false,
+  },
+  {
+    col: 'col12',
+    colName: 'datastores',
+    text: localization.common.datastores,
+    isSortable: true,
+    sort: 'asc',
+    width: '96px',
+    show: true,
+    filter: false,
+  },
+  {
+    col: 'col13',
+    colName: 'vsan',
+    text: localization.common.vSAN,
+    isSortable: true,
+    sort: 'asc',
+    width: '96px',
+    show: true,
+    filter: false,
+  },
+  {
+    col: 'col14',
+    colName: 'vc',
+    text: localization.common.vc,
+    isSortable: true,
+    sort: 'asc',
+    width: '96px',
+    show: true,
+    filter: false,
+  },
+  {
+    col: 'col15',
+    colName: 'evc_cpu_mode',
+    text: localization.common.evcCpuMode,
+    isSortable: true,
+    sort: 'asc',
+    width: '96px',
+    show: true,
+    filter: false,
+  },
+  {
+    col: 'col16',
+    colName: 'evc_graphics_mode',
+    text: localization.common.evcGraphicsMode,
+    isSortable: true,
+    sort: 'asc',
+    width: '96px',
+    show: true,
+    filter: false,
+  },
+]
+export const options: UI_I_DataTableOptions = {
+  perPageOptions: [{ text: '10', value: 100, default: true }],
+  isSelectable: true,
+  selectType: 'radio',
+  showPagination: false,
+  showPageInfo: false,
+  isSortable: true,
+  server: true,
+  isResizable: true,
+  showSelectedRows: false,
+  showColumnManager: true,
+  inModal: true,
+  inBlock: false,
+  // isFocusable: false,
+  // showPaginationOnTop: false,
+  // showSearch: false,
+  // withActions: false,
+  // showExport: false,
+  // withCollapse: false,
+}
+
+export const getBodyDataFunc = (
+  bodyData: UI_I_ClusterTableItem[],
+  _localization: UI_I_Localization
+): UI_I_DataTableBody[] => {
+  const { $binary }: any = useNuxtApp()
+
+  return bodyData.map((cluster, index: number) => {
+    //   const statusKey = host.state
+    //   ? UI_E_DeviceStatus.Unknown
+    //   : UI_E_DeviceStatus.Supported
+    // const statusData = {
+    //   ...STATUS_MAPPING[statusKey],
+    //   testId: `${host.name}-${index}-status`,
+    // }
+
+    return {
+      row: index,
+      collapse: false,
+      isHiddenCollapse: false,
+      collapseToggle: false,
+
+      data: [
+        {
+          key: 'icon',
+          col: 'col0',
+          text: cluster.name,
+          data: {
+            iconClassName: 'vsphere-icon-cluster',
+          },
+          testId: `migrate-cluster-table-item-${index}`,
+        },
+
+        {
+          col: 'col1',
+          text: $binary.roundHz(cluster.available_cpu),
+          testId: `migrate-cluster-table-item-${index}`,
+        },
+        {
+          col: 'col2',
+          text: $binary.round(cluster.available_memory),
+          testId: `migrate-cluster-table-item-${index}`,
+        },
+        {
+          col: 'col3',
+          text: $binary.round(cluster.available_storage),
+          testId: `migrate-cluster-table-item-${index}`,
+        },
+        {
+          col: 'col4',
+          text: cluster.drs,
+          testId: `migrate-cluster-table-item-${index}`,
+        },
+        {
+          col: 'col5',
+          text: cluster.ha,
+          testId: `migrate-cluster-table-item-${index}`,
+        },
+        {
+          col: 'col6',
+          text: $binary.roundHz(cluster.total_cpu),
+          testId: `migrate-cluster-table-item-${index}`,
+        },
+        {
+          col: 'col7',
+          text: $binary.round(cluster.total_memory),
+          testId: `migrate-cluster-table-item-${index}`,
+        },
+        {
+          col: 'col8',
+          text: $binary.round(cluster.total_storage),
+          testId: `migrate-cluster-table-item-${index}`,
+        },
+        {
+          col: 'col9',
+          text: cluster.vms,
+          testId: `migrate-cluster-table-item-${index}`,
+        },
+        {
+          col: 'col10',
+          text: cluster.hosts,
+          testId: `migrate-cluster-table-item-${index}`,
+        },
+        {
+          col: 'col11',
+          text: cluster.cpus,
+          testId: `migrate-cluster-table-item-${index}`,
+        },
+        {
+          col: 'col12',
+          text: cluster.datastores,
+          testId: `migrate-cluster-table-item-${index}`,
+        },
+        {
+          col: 'col13',
+          text: cluster.vsan,
+          testId: `migrate-cluster-table-item-${index}`,
+        },
+        {
+          col: 'col14',
+          text: cluster.vc,
+          testId: `migrate-cluster-table-item-${index}`,
+        },
+        {
+          col: 'col15',
+          text: cluster.evc_cpu_mode,
+          testId: `migrate-cluster-table-item-${index}`,
+        },
+        {
+          col: 'col16',
+          text: cluster.evc_graphics_mode,
+          testId: `migrate-cluster-table-item-${index}`,
+        },
+      ],
+    }
+  })
+}

package/components/common/wizards/vm/migrate/steps/computeResource/tableView/new/lib/config/hostTable.ts

@@ -222,7 +222,9 @@ export const getBodyDataFunc = (
           key: 'icon',
           col: 'col0',
           text: host.name,
-          data: `vsphere-icon-${hostIconByState[host.state]}`,
+          data: {
+            iconClassName: `vsphere-icon-${hostIconByState[host.state]}`,
+          },
           testId: `migrate-host-table-item-${index}`,
         },
 

package/package.json

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