bfg-common 1.6.49 → 1.6.50

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

@@ -9,6 +9,7 @@ import {
   UI_E_DeviceStatus,
   UI_E_DeviceStatusChipColor,
   UI_E_DeviceStatusIcon,
+  UI_E_HostAlarmStatus,
 } from '~/components/common/wizards/vm/migrate/steps/computeResource/tableView/new/lib/models/enums'
 import {
   hostIconByState,
@@ -31,6 +32,18 @@ const STATUS_MAPPING = {
   },
 }
 
+// Маппинг для статусов
+const HOST_ALARMS_MAPPING = {
+  [UI_E_HostAlarmStatus.Yes]: {
+    icon: UI_E_DeviceStatusIcon.StatusCheck,
+    chipColor: UI_E_DeviceStatusChipColor.Green,
+  },
+  [UI_E_HostAlarmStatus.No]: {
+    icon: UI_E_DeviceStatusIcon.Close,
+    chipColor: UI_E_DeviceStatusChipColor.Red,
+  },
+}
+
 export const getHeaderDataFunc = (
   localization: UI_I_Localization
 ): UI_I_DataTableHeader[] => [
@@ -50,7 +63,7 @@ export const getHeaderDataFunc = (
     text: localization.inventorySummary.state,
     isSortable: true,
     sort: 'asc',
-    width: '96px',
+    width: '144px',
     show: true,
     filter: false,
   },
@@ -60,7 +73,7 @@ export const getHeaderDataFunc = (
     text: localization.common.cluster,
     isSortable: true,
     sort: 'asc',
-    width: '96px',
+    width: '120px',
     show: true,
     filter: false,
   },
@@ -70,7 +83,7 @@ export const getHeaderDataFunc = (
     text: localization.common.faultDomain,
     isSortable: true,
     sort: 'asc',
-    width: '96px',
+    width: '120px',
     show: true,
     filter: false,
   },
@@ -80,7 +93,7 @@ export const getHeaderDataFunc = (
     text: `${localization.common.consumedCpu} %`,
     isSortable: true,
     sort: 'asc',
-    width: '96px',
+    width: '230px',
     show: true,
     filter: false,
   },
@@ -90,7 +103,7 @@ export const getHeaderDataFunc = (
     text: `${localization.common.consumedMemory} %`,
     isSortable: true,
     sort: 'asc',
-    width: '96px',
+    width: '230px',
     show: true,
     filter: false,
   },
@@ -110,7 +123,7 @@ export const getHeaderDataFunc = (
     text: localization.inventorySummary.uptime,
     isSortable: true,
     sort: 'asc',
-    width: '96px',
+    width: '270px',
     show: true,
     filter: false,
   },
@@ -120,7 +133,7 @@ export const getHeaderDataFunc = (
     text: localization.common.certificateValidTo,
     isSortable: true,
     sort: 'asc',
-    width: '96px',
+    width: '160px',
     show: true,
     filter: false,
   },
@@ -130,7 +143,7 @@ export const getHeaderDataFunc = (
     text: `${localization.common.memorySize} (${localization.common.mb})`,
     isSortable: true,
     sort: 'asc',
-    width: '96px',
+    width: '160px',
     show: true,
     filter: false,
   },
@@ -160,7 +173,7 @@ export const getHeaderDataFunc = (
     text: localization.common.version,
     isSortable: true,
     sort: 'asc',
-    width: '96px',
+    width: '270px',
     show: true,
     filter: false,
   },
@@ -170,7 +183,7 @@ export const getHeaderDataFunc = (
     text: localization.common.alarmActions,
     isSortable: true,
     sort: 'asc',
-    width: '96px',
+    width: '120px',
     show: true,
     filter: false,
   },
@@ -211,6 +224,21 @@ export const getBodyDataFunc = (
       testId: `${host.name}-${index}-status`,
     }
 
+    const alarmsStatusKey = host.alarm_action
+      ? UI_E_HostAlarmStatus.Yes
+      : UI_E_HostAlarmStatus.No
+    const alarmActionData = {
+      ...HOST_ALARMS_MAPPING[alarmsStatusKey],
+      testId: `${host.name}-${index}-alarms-status`,
+    }
+
+    const isLangEn = useLocalStorage('lang') === 'en_US'
+    const alarmActionValue = isLangEn
+      ? host.alarm_action
+        ? 'True'
+        : 'False'
+      : localization.common[alarmsStatusKey]
+
     return {
       row: index,
       collapse: false,
@@ -222,7 +250,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}`,
         },
 
@@ -269,7 +299,7 @@ export const getBodyDataFunc = (
         },
         {
           col: 'col8',
-          text: host.cert_valid_to,
+          text: host.cert_valid_to || '--',
           testId: `migrate-host-table-item-${index}`,
         },
 
@@ -298,8 +328,8 @@ export const getBodyDataFunc = (
         {
           key: 'status',
           col: 'col13',
-          text: host.alarm_action,
-          data: statusData,
+          text: alarmActionValue,
+          data: alarmActionData,
           testId: `migrate-host-table-item-${index}`,
         },
       ],

package/components/common/wizards/vm/migrate/steps/computeResource/tableView/new/lib/models/enums.ts

@@ -3,6 +3,10 @@ export enum UI_E_DeviceStatus {
   Supported = 'supported',
   NotSupported = 'not-supported',
 }
+export enum UI_E_HostAlarmStatus {
+  Yes = 'yes',
+  No = 'no',
+}
 
 export enum UI_E_DeviceStatusChipColor {
   Green = 'green',

package/components/common/wizards/vm/migrate/steps/priority/New.vue

@@ -38,7 +38,7 @@ const props = defineProps<{
 .migration-strategy {
   container-type: inline-size;
   margin-top: 16px;
-
+  padding-bottom: 16px;
   &__radio {
     &-container {
       display: grid;
@@ -62,7 +62,7 @@ const props = defineProps<{
       transition: box-shadow 0.1s ease-in-out;
     }
 
-    &:not(:checked) {
+    &:not(:checked, :disabled) {
       & ~ .radio-label:hover {
         //border-color: var(--select-border);
         box-shadow: inset 0 0 0 1px var(--select-border);
@@ -76,6 +76,11 @@ const props = defineProps<{
         box-shadow: inset 0 0 0 1.5px var(--radio-btn-active-label-border-color);
       }
     }
+    &:disabled {
+      & ~ .radio-label .migration-strategy__radio-description {
+        color: var(--checkbox-radio-label-color-disabled);
+      }
+    }
   }
 }
 

package/components/common/wizards/vm/migrate/steps/selectStorage/New.vue

@@ -27,13 +27,14 @@
       :is-hide-select-disk-format="props.isHideSelectDiskFormat"
     >
       <template v-if="isShowSelectedPerDisks" #buttonConfirm>
-        <button
-          class="btn btn-sm btn-primary"
-          data-id="apply-selected-per-disks-button"
+        <ui-button
+          test-id="apply-selected-per-disks-button"
+          type="primary"
+          size="sm"
           @click="onApplyChanges"
         >
           {{ localization.common.confirm }}
-        </button>
+        </ui-button>
       </template>
     </common-wizards-vm-migrate-steps-select-storage-configure-batch>
 
@@ -47,9 +48,8 @@
     />
 
     <common-wizards-common-compatibility
-      :loading="!model.storage"
-      :text="localization.common.compatibilityChecksSucceeded"
-      status="success"
+      :status="compatibilityText[0]"
+      :text="compatibilityText[1]"
     />
   </div>
 </template>
@@ -62,6 +62,7 @@ import type { UI_I_CollapseNavItem } from '~/components/atoms/collapse/lib/model
 import type { UI_I_DatastoreTableItem } from '~/lib/models/store/storage/interfaces'
 import type { UI_I_StorageConfigurePerDiskItem } from '~/components/common/wizards/vm/migrate/steps/selectStorage/configure/disk/table/lib/models/interfaces'
 import type { UI_I_MigrateFormLocal } from '~/components/common/wizards/vm/migrate/lib/models/interfaces'
+import type { UI_T_CompatibilityStatus } from '~/components/common/wizards/common/compatibility/lib/models/types'
 
 const model = defineModel<UI_I_MigrateFormLocal>({ required: true })
 const selectedPerDiskKeys = defineModel<number[]>('selectedDiskKeys', {
@@ -111,6 +112,19 @@ const onChangePerDiskStorage = (
 const onApplyChanges = (): void => {
   emits('confirm-changes')
 }
+
+const compatibilityText = computed<[UI_T_CompatibilityStatus, string]>(() => {
+  let res: [UI_T_CompatibilityStatus, string] = [
+    'none',
+    localization.value.common.noComputeResourceSelected,
+  ]
+
+  if (model.value.storage) {
+    res = ['success', localization.value.common.compatibilityChecksSucceeded]
+  }
+
+  return res
+})
 </script>
 
 <style lang="scss" scoped>
@@ -118,5 +132,6 @@ const onApplyChanges = (): void => {
 .select-storage {
   @include flex($dir: column);
   margin-top: 16px;
+  padding-bottom: 16px;
 }
 </style>

package/components/common/wizards/vm/migrate/steps/selectStorage/configure/batch/New.vue

@@ -61,7 +61,9 @@ const selectOptionsLocal = computed<UI_I_Dropdown[]>(() =>
     grid-template-columns: 240px 1fr;
     align-items: center;
     column-gap: 16px;
+    border-bottom: 1px solid var(--horizontal-line);
     margin-top: 16px;
+    padding-bottom: 16px;
     & > span {
       font-family: 'Inter', sans-serif;
       color: var(--title-form-first-color);
@@ -69,5 +71,9 @@ const selectOptionsLocal = computed<UI_I_Dropdown[]>(() =>
       font-size: 13px;
     }
   }
+  &__button {
+    display: flex;
+    justify-content: flex-end;
+  }
 }
 </style>

package/components/common/wizards/vm/migrate/steps/selectStorage/configure/batch/table/new/New.vue

@@ -86,6 +86,7 @@ const texts = computed<UI_I_TableTexts>(() => ({
 
 const skeletonData = ref<UI_I_DataTableSkeleton>({
   columnsCount: 4,
+  withoutPagination: true,
   headColumns: [],
   bodyColumns: [],
 })
@@ -118,9 +119,11 @@ watch(
 const onSorting = (value: string): void => {
   emits('sort', value)
 }
+
+/* TODO: если передать в emit selectedStorageKeyLocal.value, то не работает */
 const onSelectRow = (value: UI_I_DataTableBody[]): void => {
   selectedStorageKeyLocal.value = value?.[0].row as number
-  emits('select-storage', selectedStorageKeyLocal.value)
+  emits('select-storage', value?.[0].row as number)
 }
 </script>
 

package/components/common/wizards/vm/migrate/steps/selectStorage/configure/batch/table/new/lib/config/datastoreTable.ts

@@ -95,7 +95,7 @@ export const getHeaderDataFunc = (
     text: localization.common.name,
     isSortable: false,
     sort: 'asc',
-    width: '180px',
+    width: '160px',
     show: true,
     filter: false,
   },
@@ -105,7 +105,7 @@ export const getHeaderDataFunc = (
     text: localization.inventorySummary.state,
     isSortable: false,
     sort: 'asc',
-    width: '180px',
+    width: '160px',
     show: true,
     filter: false,
   },
@@ -115,7 +115,7 @@ export const getHeaderDataFunc = (
     text: localization.common.capacity,
     isSortable: false,
     sort: 'asc',
-    width: '180px',
+    width: '120px',
     show: true,
     filter: false,
   },
@@ -125,7 +125,7 @@ export const getHeaderDataFunc = (
     text: localization.common.provisioned,
     isSortable: false,
     sort: 'asc',
-    width: '180px',
+    width: '120px',
     show: true,
     filter: false,
   },
@@ -135,7 +135,7 @@ export const getHeaderDataFunc = (
     text: localization.common.free,
     isSortable: false,
     sort: 'asc',
-    width: '180px',
+    width: '120px',
     show: true,
     filter: false,
   },
@@ -145,7 +145,7 @@ export const getHeaderDataFunc = (
     text: localization.common.used,
     isSortable: false,
     sort: 'asc',
-    width: '180px',
+    width: '120px',
     show: true,
     filter: false,
   },
@@ -155,7 +155,7 @@ export const getHeaderDataFunc = (
     text: localization.common.type,
     isSortable: false,
     sort: 'asc',
-    width: '180px',
+    width: '104px',
     show: true,
     filter: false,
   },
@@ -165,7 +165,7 @@ export const getHeaderDataFunc = (
     text: localization.common.thinProvisioning,
     isSortable: false,
     sort: 'asc',
-    width: '180px',
+    width: '160px',
     show: true,
     filter: false,
   },
@@ -175,7 +175,7 @@ export const getHeaderDataFunc = (
     text: localization.common.access,
     isSortable: false,
     sort: 'asc',
-    width: '180px',
+    width: '104px',
     show: true,
     filter: false,
   },
@@ -195,7 +195,7 @@ export const getHeaderDataFunc = (
     text: localization.common.driverType,
     isSortable: false,
     sort: 'asc',
-    width: '180px',
+    width: '120px',
     show: true,
     filter: false,
   },
@@ -205,7 +205,7 @@ export const getHeaderDataFunc = (
     text: localization.common.device,
     isSortable: false,
     sort: 'asc',
-    width: '180px',
+    width: '120px',
     show: true,
     filter: false,
   },
@@ -259,11 +259,7 @@ export const getBodyDataFunc = (
       testId: `${storage.name}-${index}-thin-provisioning`,
     }
 
-    const hardwareAccelerationKey =
-      E_StorageHardwareAcceleration[
-        storage.hardware_acceleration as keyof typeof E_StorageHardwareAcceleration
-      ]
-
+    const hardwareAccelerationKey = storage.hardware_acceleration
     const hardwareAccelerationData = {
       ...HARDWARE_ACCELERATION_MAPPING[
         hardwareAccelerationKey as keyof typeof HARDWARE_ACCELERATION_MAPPING

package/components/common/wizards/vm/migrate/steps/selectStorage/configure/disk/table/new/New.vue

@@ -23,7 +23,7 @@
           class="disk-table__configure-button"
           @click="emits('configure')"
         >
-          <ui-icon name="config" width="16" height="16" />
+          <ui-icon name="settings" width="16" height="16" />
           {{ localization.inventoryTabs.configure }}
         </ui-button>
       </template>
@@ -159,18 +159,19 @@ const onSelectRow = (value: UI_I_DataTableBody[]): void => {
 </style>
 <style lang="scss" scoped>
 .disk-table {
-  margin: 16px 0;
+  margin: 16px 0 24px;
   :deep(.title-container) {
     h5 {
       margin-bottom: 0;
     }
     .title-container-top-info {
       border-left: 1px solid var(--horizontal-line);
-      padding-left: 10px;
-      margin-left: 10px;
+      padding-left: 12px;
+      margin-left: 12px;
     }
     h6.title-container-top-selected-rows {
-      line-height: inherit;
+      font-size: 12px;
+      line-height: 20px;
     }
   }
   &__icon {
@@ -180,9 +181,13 @@ const onSelectRow = (value: UI_I_DataTableBody[]): void => {
     font-size: 12px;
   }
   &__configure-button {
+    column-gap: 4px;
     background: var(--select-bg);
     border: 1px solid var(--line-color);
     color: var(--title-form-first-color);
+    &.ui-btn.ui-btn-sm {
+      height: 28px;
+    }
     &:hover {
       background: var(--custom-button-default-hover-bg-color);
     }

package/components/common/wizards/vm/migrate/steps/selectStorage/configure/disk/table/new/lib/config/diskTable.ts

@@ -43,7 +43,7 @@ export const getHeaderDataFunc = (
     text: localization.common.diskGroup,
     isSortable: false,
     sort: 'asc',
-    width: '180px',
+    width: '140px',
     show: true,
     filter: false,
   },
@@ -83,7 +83,7 @@ export const getHeaderDataFunc = (
     text: localization.common.sharing,
     isSortable: false,
     sort: 'asc',
-    width: '180px',
+    width: '120px',
     show: true,
     filter: false,
   },
@@ -93,7 +93,7 @@ export const getHeaderDataFunc = (
     text: localization.common.target,
     isSortable: false,
     sort: 'asc',
-    width: '180px',
+    width: '120px',
     show: true,
     filter: false,
   },
@@ -103,7 +103,7 @@ export const getHeaderDataFunc = (
     text: localization.common.cache,
     isSortable: false,
     sort: 'asc',
-    width: '180px',
+    width: '120px',
     show: true,
     filter: false,
   },
@@ -113,7 +113,7 @@ export const getHeaderDataFunc = (
     text: localization.common.ioControl,
     isSortable: false,
     sort: 'asc',
-    width: '180px',
+    width: '120px',
     show: true,
     filter: false,
   },
@@ -123,7 +123,7 @@ export const getHeaderDataFunc = (
     text: localization.common.discard,
     isSortable: false,
     sort: 'asc',
-    width: '180px',
+    width: '120px',
     show: true,
     filter: false,
   },
@@ -133,7 +133,7 @@ export const getHeaderDataFunc = (
     text: localization.common.diskMode,
     isSortable: false,
     sort: 'asc',
-    width: '180px',
+    width: '120px',
     show: true,
     filter: false,
   },
@@ -158,7 +158,6 @@ export const getBodyDataFunc = (
   bodyData: UI_I_StorageConfigurePerDiskItem[],
   localization: UI_I_Localization
 ): UI_I_DataTableBody[] => {
-
   return bodyData.map((disk, index: number) => {
     const diskFormat =
       index === 0 ? 'N/A' : UI_E_SelectStorageDiskFormat[disk.disk_format]
@@ -184,6 +183,12 @@ export const getBodyDataFunc = (
         : 'False'
       : localization.common[diskSharingKey]
 
+    const diskCache = disk.extra.cache
+    const diskCacheValue =
+      !diskCache || ['none', 'n/a'].includes(diskCache.toLowerCase())
+        ? '--'
+        : disk.extra.cache
+
     return {
       row: index,
       collapse: false,
@@ -198,7 +203,7 @@ export const getBodyDataFunc = (
         },
         {
           col: 'col1',
-          text: disk.disk_group,
+          text: disk.disk_group || '--',
         },
         {
           col: 'col2',
@@ -221,10 +226,10 @@ export const getBodyDataFunc = (
           data: diskSharingData,
         },
 
-        { col: 'col6', text: disk.extra.target },
+        { col: 'col6', text: disk.extra.target || '--' },
         {
           col: 'col7',
-          text: disk.extra.cache,
+          text: diskCacheValue,
         },
         { col: 'col8', text: disk.extra.io_control },
         {

package/components/common/wizards/vm/migrate/steps/selectStorage/configure/disk/table/old/lib/config/diskTable.ts

@@ -79,6 +79,12 @@ export const bodyItems = (
         ? disk[vmMigrateDiskTableItemKeys[2]]
         : `${disk.extra.disk_source} (${disk.extra.disk_size} ${localization.common.mb} )`
 
+    const diskCache = disk.extra[vmMigrateDiskTableItemKeys[7]]
+    const diskCacheValue =
+      !diskCache || ['none', 'n/a'].includes(diskCache.toLowerCase())
+        ? '--'
+        : disk.extra[vmMigrateDiskTableItemKeys[7]]
+
     bodyItems.push([
       {
         key: 'col0',
@@ -124,7 +130,7 @@ export const bodyItems = (
       },
       {
         key: 'col7',
-        text: disk.extra[vmMigrateDiskTableItemKeys[7]],
+        text: diskCacheValue,
         id: key,
         testId: `disk-table-${key}`,
       },

package/components/common/wizards/vm/migrate/steps/selectStorage/selectedPerDisk/New.vue

@@ -10,7 +10,7 @@
     />
 
     <div>
-      <span class="icon-vm vsphere-icon-vm"></span>
+      <span class="icon-vm small-margin vsphere-icon-vm"></span>
     </div>
 
     <span v-if="props.data.length === 1" class="selected-per-disk__text">{{
@@ -31,15 +31,13 @@
         dropdown-right
         dropdown-bottom
       >
-        <div
-          v-for="(item, key) in props.data"
-          :key="key"
-          class="flex items-center"
-        >
-          <span class="icon-vm vsphere-icon-vm"></span>
-          <span class="selected-per-disk__text">
-            {{ item }}
-          </span>
+        <div class="flex flex-col row-gap-2 mt-5">
+          <div v-for="(item, key) in props.data" :key="key" class="flex">
+            <span class="icon-vm vsphere-icon-vm"></span>
+            <span class="selected-per-disk__text">
+              {{ item }}
+            </span>
+          </div>
         </div>
       </common-tooltip-help>
     </div>
@@ -75,12 +73,19 @@ const onGoBack = (): void => {
       color: var(--btn-primary-fill-bg-color);
       margin-right: 8px;
       cursor: pointer;
+      &:hover {
+        color: var(--btn-primary-fill-hover-bg-color);
+      }
     }
     &-vm {
       display: block;
+      min-width: 20px;
       width: 20px;
       height: 20px;
       margin-right: 8px;
+      &.small-margin {
+        margin-right: 4px;
+      }
     }
   }
 
@@ -89,6 +94,8 @@ const onGoBack = (): void => {
     color: var(--title-form-first-color);
     font-weight: 400;
     font-size: 13px;
+    line-height: 18px;
+    align-self: center;
   }
   &__all-objects {
     @include flex($align: center);

package/components/common/wizards/vm/migrate/steps/type/TypeNew.vue

@@ -37,6 +37,7 @@ const props = defineProps<{
 .datastore-type {
   container-type: inline-size;
   margin-top: 16px;
+  padding-bottom: 16px;
 
   &__radio {
     &-container {