bfg-common 1.6.47 → 1.6.49

package/components/common/wizards/network/add/steps/portProperties/PortPropertiesNew.vue

@@ -299,8 +299,14 @@ const portPropertiesEnabledServices = computed<
   padding: 0 8px 0 12px;
 }
 :deep(.ui-checkbox-label) {
-  &.md {
-    height: unset;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+
+  .ui-checkbox-label-text {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
   }
 }
 </style>

package/components/common/wizards/network/add/steps/portProperties/PortPropertiesOld.vue

@@ -22,7 +22,6 @@
               <fieldset>
                 <atoms-tooltip-error
                   :has-error="!!props.messagesFields.network_name.field"
-                  test-id="network-label-error"
                 >
                   <template #elem>
                     <input
@@ -78,7 +77,7 @@
                         class="is-error tooltip-trigger"
                         name="info"
                       />
-                      <div class="tooltip-top-left tooltip-content error" data-id="vlan-id-error">
+                      <div class="tooltip-top-left tooltip-content error">
                         {{ props.messagesFields['new_network.vlan'].field }}
                       </div>
                     </div>
@@ -112,7 +111,6 @@
               </div>
               <atoms-tooltip-error
                 :has-error="!!props.messagesFields.mtu.field"
-                test-id="invalid-mtu-error"
               >
                 <template #elem>
                   <input
@@ -241,9 +239,7 @@ const emits = defineEmits<{
 }>()
 
 const localization = computed<UI_I_Localization>(() => useLocal())
-const vlanIdSelectDataLocal = computed<UI_I_Localization>(() =>
-  vlanIdSelectDataFunc(localization.value)
-)
+const vlanIdSelectDataLocal = computed<UI_I_Localization>(() => vlanIdSelectDataFunc(localization.value))
 
 const fields = computed({
   get(): UI_I_PortProperties {

package/components/common/wizards/network/add/steps/selectTargetDevice/SelectTargetDeviceNew.vue

@@ -103,7 +103,7 @@
               <template #row="{ item }">
                 <div v-if="item.iconName" class="browse-btn">
                   <ui-button
-                    test-id="browse-network"
+                    test-id="button-1"
                     type="primary"
                     variant="text"
                     size="lg"
@@ -154,7 +154,7 @@
               <template #row="{ item }">
                 <div v-if="item.iconName" class="browse-btn">
                   <ui-button
-                    test-id="browse-standard-switch"
+                    test-id="button-1"
                     type="primary"
                     variant="text"
                     size="lg"
@@ -203,7 +203,7 @@
               <template #row="{ item }">
                 <div v-if="item.iconName" class="browse-btn">
                   <ui-button
-                    test-id="browse-switch"
+                    test-id="button-1"
                     type="primary"
                     variant="text"
                     size="lg"
@@ -357,17 +357,10 @@ watch(
     :deep(.ui-btn) {
       justify-content: flex-start;
       height: 32px;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      width: 100%;
 
       span {
         text-align: left;
         color: var(--select-text);
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
       }
 
       &:hover {

package/components/common/wizards/network/add/steps/selectTargetDevice/SelectTargetDeviceOld.vue

@@ -34,7 +34,6 @@
                   fieldsLocal.selected === '0' &&
                   !!props.messagesFields.network.field
                 "
-                test-id="existing-network-error"
               >
                 <template #elem>
                   <fieldset class="fieldset-block">
@@ -98,7 +97,6 @@
                   fieldsLocal.selected === '1' &&
                   !!props.messagesFields.switch.field
                 "
-                test-id="existing-standard-switch-error"
               >
                 <template #elem>
                   <fieldset class="fieldset-block">
@@ -162,7 +160,6 @@
                   fieldsLocal.selected === '2' &&
                   !!props.messagesFields.switch2.field
                 "
-                test-id="standard-switch-error"
               >
                 <template #elem>
                   <fieldset class="fieldset-block">
@@ -232,7 +229,6 @@
                       :has-error="
                         !!props.messagesFields['new_switch.mtu'].field
                       "
-                      test-id="invalid-mtu-error"
                     >
                       <template #elem>
                         <input

package/components/common/wizards/network/add/steps/selectTargetDevice/modals/new/SelectNetwork.vue

@@ -46,7 +46,7 @@ import type {
   UI_I_DataTable,
   UI_I_DataTableHeader,
   UI_I_DataTableBody,
-  UI_I_TableTexts,
+  UI_I_TableTexts
 } from '~/node_modules/bfg-uikit/components/ui/dataTable/lib/models/interfaces'
 import type { UI_I_Localization } from '~/lib/models/interfaces'
 import type {
@@ -147,10 +147,6 @@ const onSelectNetwork = (): void => {
 <style scoped lang="scss">
 :deep(.table-container) {
   padding: 8px 32px !important;
-
-  .column-manager-button span {
-    font-weight: 500;
-  }
 }
 
 .row-container {

package/components/common/wizards/network/add/validations/common.ts

@@ -21,7 +21,7 @@ export const checkVlanId = (
   vlanId: string,
   localization: UI_I_Localization
 ): boolean =>
-  vlanId !== `${localization.common.none2} (0)` &&
+  vlanId !== `${localization.common.none} (0)` &&
   vlanId !== `${localization.common.all} (4095)` &&
   (isIntegerNumberInRange(vlanId, 0, 4095) || vlanId.trim() === '')
 

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

@@ -187,13 +187,8 @@
       >
         <template #subTitle>
           <div ref="subTitleBlock6">
-            <div class="subtitle-block flex-row items-start">
+            <div class="subtitle-block">
               <ui-wizard-subtitle :sub-title="selectedStep.subTitle" />
-
-              <common-wizards-vm-migrate-vm-origin
-                v-if="props.vmOrigin"
-                :vm-origin="props.vmOrigin"
-              />
             </div>
           </div>
         </template>
@@ -212,13 +207,8 @@
       >
         <template #subTitle>
           <div ref="subTitleBlock7">
-            <div class="subtitle-block flex-row items-start">
+            <div class="subtitle-block">
               <ui-wizard-subtitle :sub-title="selectedStep.subTitle" />
-
-              <common-wizards-vm-migrate-vm-origin
-                v-if="props.vmOrigin"
-                :vm-origin="props.vmOrigin"
-              />
             </div>
           </div>
         </template>
@@ -303,7 +293,7 @@ const texts = computed<UI_I_WizardTexts>(() => ({
   back: localization.value.common.backCap,
   processing: localization.value.common.processing,
   next: localization.value.common.next,
-  finish: localization.value.common.migrate,
+  finish: localization.value.common.create,
   incompleteTitle: localization.value.common.incompleteProcess,
   incompleteMessage: localization.value.common.incompleteProcessMessage,
   incompleteCancel: localization.value.common.cancel,

package/components/common/wizards/vm/migrate/lib/config/constructDataReady.ts

@@ -26,7 +26,6 @@ const migrateOnlyStorageDataView = (
       label: localization.common.storage,
       value: storage?.name,
       permissions: ['batch-configure'],
-      iconClassName: 'vsphere-icon-datastore',
     },
     {
       label: localization.common.diskFormat,
@@ -125,7 +124,6 @@ const storageDetailsFunc = (
       label: localization.common.virtualMachine,
       value: name,
       permissions: ['batch-configure', 'configure-disk'],
-      iconClassName: 'vsphere-icon-vm',
     },
   ]
 
@@ -150,7 +148,6 @@ const storageDetailsFunc = (
           label: localization.common[key],
           value: value.name,
           permissions: [],
-          iconClassName: `vsphere-icon-${key}`,
         })
       }
     })
@@ -168,7 +165,6 @@ const storageDetailsFunc = (
         label: localization.common.host,
         value: '', //selectedComputeResource.selectedNode.name,
         permissions: [],
-        iconClassName: 'vsphere-icon-host',
       },
       {
         label: localization.migrateVm.migrationStrategy,
@@ -180,7 +176,6 @@ const storageDetailsFunc = (
         label: localization.common.networks,
         value: setSelectNetworkDataView(localization, form),
         permissions: [],
-        iconClassName: 'vsphere-icon-network',
       },
     ]
     const storageResult = migrateOnlyStorageDataView(localization, form, name)

package/components/common/wizards/vm/migrate/lib/config/steps.ts

@@ -30,8 +30,7 @@ export const stepsFunc = (
     {
       id: dynamicSteps.selectMigrationType,
       title: localization.common.selectMigrationType,
-      subTitle:
-        localization.migrateVm.changeComputeResourceStorageVirtualMachine,
+      subTitle: localization.migrateVm.changeComputeResourceStorageVirtualMachine,
       status: UI_E_WIZARD_STATUS[!isScheduledTasks ? 'SELECTED' : 'INACTIVE'],
       fields: {},
       isValid: true,
@@ -100,7 +99,7 @@ export const stepsFunc = (
     {
       id: dynamicSteps.readyComplete,
       title: localization.common.readyComplete,
-      subTitle: localization.migrateVm.reviewDetailsBeforeVmMigrated,
+      subTitle: '',
       status: UI_E_WIZARD_STATUS.INACTIVE,
       fields: {},
       isValid: true,

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

@@ -88,9 +88,8 @@ const onTabChange = (name: keyof UI_I_SelectedTableDataKeys): void => {
 @import 'assets/scss/common/mixins';
 .compute-resource {
   @include flex($dir: column);
+  top: 16px;
   height: inherit;
-  margin-top: 16px;
-  margin-bottom: 16px;
   .tree-view-wrap {
     max-height: 250px;
     min-height: 200px;

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="tableConfig.options"
+      :options="options"
       :loading="props.isLoading"
       :total-pages="props.totalPages"
       :total-items="props.totalItems"
@@ -52,8 +52,8 @@
         >
           <ui-icon
             :name="item.data.icon"
-            width="12px"
-            height="12px"
+            width="14px"
+            height="14px"
             class="chip-icon"
           ></ui-icon>
           {{ item.text }}
@@ -79,10 +79,13 @@ 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/steps/selectStorage/lib/models/types'
+import type { UI_T_SelectComputeResourceTabType } from '~/components/common/wizards/vm/migrate/select/storage/lib/models/types'
 import type { UI_T_ComputeResourceTableItem } from '~/components/common/wizards/vm/migrate/steps/computeResource/lib/models/types'
-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'
+import {
+  options,
+  getHeaderDataFunc,
+  getBodyDataFunc,
+} from '~/components/common/wizards/vm/migrate/steps/computeResource/tableView/new/lib/config/hostTable'
 
 const selectedDataLocal = defineModel<number | null>({ required: true })
 const props = defineProps<{
@@ -117,33 +120,15 @@ 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-${props.type}-table`,
-  title: tableDataTitle.value,
+  id: 'compute-resource-host-table',
+  title: `${localization.value.common.hosts} (${props.totalItems})`,
   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[]>(() =>
-  tableConfig.value.getHeaderDataFunc(localization.value)
+  getHeaderDataFunc(localization.value)
 )
 
 const deviceBodyItems = ref<UI_I_DataTableBody[]>([])
@@ -155,22 +140,19 @@ watch(
       return
     }
 
-    deviceBodyItems.value = tableConfig.value.getBodyDataFunc(
-      newValue,
-      localization.value
-    )
+    deviceBodyItems.value = getBodyDataFunc(newValue, localization.value)
   },
   { deep: true, immediate: true }
 )
 
 const onSelectRow = (value: UI_I_DataTableBody[]): void => {
-  selectedDataLocal.value = value?.[0].row as number
+  selectedDataLocal.value = value?.[0].row
 }
 </script>
 
 <style lang="scss" scoped>
 .device-table-container {
-  margin: 16px 0 24px;
+  margin: 20px 0 24px;
   :deep(.column-manager-button.sm span) {
     font-weight: 500;
   }
@@ -187,15 +169,15 @@ const onSelectRow = (value: UI_I_DataTableBody[]): void => {
   }
   .progress {
     &-line {
-      height: 10px;
+      height: 12px;
       width: 100%;
-      background: var(--progress-bar-bg);
+      background: #e9ebed8f;
       border-radius: 6px;
 
       &-fill {
-        height: 10px;
-        min-width: 10px;
-        background: var(--progress-bar);
+        height: 12px;
+        min-width: 12px;
+        background: #008fd6;
         border-radius: 6px;
       }
     }
@@ -203,7 +185,6 @@ const onSelectRow = (value: UI_I_DataTableBody[]): void => {
     &-text {
       width: 53px;
       min-width: 53px;
-      font-size: 12px;
       margin-left: 8px;
       text-align: right;
 

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

@@ -9,7 +9,6 @@ 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,
@@ -32,18 +31,6 @@ 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[] => [
@@ -63,7 +50,7 @@ export const getHeaderDataFunc = (
     text: localization.inventorySummary.state,
     isSortable: true,
     sort: 'asc',
-    width: '144px',
+    width: '96px',
     show: true,
     filter: false,
   },
@@ -73,7 +60,7 @@ export const getHeaderDataFunc = (
     text: localization.common.cluster,
     isSortable: true,
     sort: 'asc',
-    width: '120px',
+    width: '96px',
     show: true,
     filter: false,
   },
@@ -83,7 +70,7 @@ export const getHeaderDataFunc = (
     text: localization.common.faultDomain,
     isSortable: true,
     sort: 'asc',
-    width: '120px',
+    width: '96px',
     show: true,
     filter: false,
   },
@@ -93,7 +80,7 @@ export const getHeaderDataFunc = (
     text: `${localization.common.consumedCpu} %`,
     isSortable: true,
     sort: 'asc',
-    width: '230px',
+    width: '96px',
     show: true,
     filter: false,
   },
@@ -103,7 +90,7 @@ export const getHeaderDataFunc = (
     text: `${localization.common.consumedMemory} %`,
     isSortable: true,
     sort: 'asc',
-    width: '230px',
+    width: '96px',
     show: true,
     filter: false,
   },
@@ -123,7 +110,7 @@ export const getHeaderDataFunc = (
     text: localization.inventorySummary.uptime,
     isSortable: true,
     sort: 'asc',
-    width: '270px',
+    width: '96px',
     show: true,
     filter: false,
   },
@@ -133,7 +120,7 @@ export const getHeaderDataFunc = (
     text: localization.common.certificateValidTo,
     isSortable: true,
     sort: 'asc',
-    width: '160px',
+    width: '96px',
     show: true,
     filter: false,
   },
@@ -143,7 +130,7 @@ export const getHeaderDataFunc = (
     text: `${localization.common.memorySize} (${localization.common.mb})`,
     isSortable: true,
     sort: 'asc',
-    width: '160px',
+    width: '96px',
     show: true,
     filter: false,
   },
@@ -173,7 +160,7 @@ export const getHeaderDataFunc = (
     text: localization.common.version,
     isSortable: true,
     sort: 'asc',
-    width: '270px',
+    width: '96px',
     show: true,
     filter: false,
   },
@@ -183,7 +170,7 @@ export const getHeaderDataFunc = (
     text: localization.common.alarmActions,
     isSortable: true,
     sort: 'asc',
-    width: '120px',
+    width: '96px',
     show: true,
     filter: false,
   },
@@ -224,21 +211,6 @@ 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,
@@ -250,9 +222,7 @@ export const getBodyDataFunc = (
           key: 'icon',
           col: 'col0',
           text: host.name,
-          data: {
-            iconClassName: `vsphere-icon-${hostIconByState[host.state]}`,
-          },
+          data: `vsphere-icon-${hostIconByState[host.state]}`,
           testId: `migrate-host-table-item-${index}`,
         },
 
@@ -299,7 +269,7 @@ export const getBodyDataFunc = (
         },
         {
           col: 'col8',
-          text: host.cert_valid_to || '--',
+          text: host.cert_valid_to,
           testId: `migrate-host-table-item-${index}`,
         },
 
@@ -328,8 +298,8 @@ export const getBodyDataFunc = (
         {
           key: 'status',
           col: 'col13',
-          text: alarmActionValue,
-          data: alarmActionData,
+          text: host.alarm_action,
+          data: statusData,
           testId: `migrate-host-table-item-${index}`,
         },
       ],

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

@@ -3,10 +3,6 @@ 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, :disabled) {
+    &:not(:checked) {
       & ~ .radio-label:hover {
         //border-color: var(--select-border);
         box-shadow: inset 0 0 0 1px var(--select-border);
@@ -76,11 +76,6 @@ 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,14 +27,13 @@
       :is-hide-select-disk-format="props.isHideSelectDiskFormat"
     >
       <template v-if="isShowSelectedPerDisks" #buttonConfirm>
-        <ui-button
-          test-id="apply-selected-per-disks-button"
-          type="primary"
-          size="sm"
+        <button
+          class="btn btn-sm btn-primary"
+          data-id="apply-selected-per-disks-button"
           @click="onApplyChanges"
         >
           {{ localization.common.confirm }}
-        </ui-button>
+        </button>
       </template>
     </common-wizards-vm-migrate-steps-select-storage-configure-batch>
 
@@ -48,8 +47,9 @@
     />
 
     <common-wizards-common-compatibility
-      :status="compatibilityText[0]"
-      :text="compatibilityText[1]"
+      :loading="!model.storage"
+      :text="localization.common.compatibilityChecksSucceeded"
+      status="success"
     />
   </div>
 </template>
@@ -62,7 +62,6 @@ 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', {
@@ -112,19 +111,6 @@ 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>
@@ -132,6 +118,5 @@ const compatibilityText = computed<[UI_T_CompatibilityStatus, string]>(() => {
 .select-storage {
   @include flex($dir: column);
   margin-top: 16px;
-  padding-bottom: 16px;
 }
 </style>