bfg-common 1.6.49 → 1.6.50

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="button-1"
+                    test-id="browse-network"
                     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="button-1"
+                    test-id="browse-standard-switch"
                     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="button-1"
+                    test-id="browse-switch"
                     type="primary"
                     variant="text"
                     size="lg"
@@ -357,10 +357,17 @@ 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,6 +34,7 @@
                   fieldsLocal.selected === '0' &&
                   !!props.messagesFields.network.field
                 "
+                test-id="existing-network-error"
               >
                 <template #elem>
                   <fieldset class="fieldset-block">
@@ -97,6 +98,7 @@
                   fieldsLocal.selected === '1' &&
                   !!props.messagesFields.switch.field
                 "
+                test-id="existing-standard-switch-error"
               >
                 <template #elem>
                   <fieldset class="fieldset-block">
@@ -160,6 +162,7 @@
                   fieldsLocal.selected === '2' &&
                   !!props.messagesFields.switch2.field
                 "
+                test-id="standard-switch-error"
               >
                 <template #elem>
                   <fieldset class="fieldset-block">
@@ -229,6 +232,7 @@
                       :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,6 +147,10 @@ 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.none} (0)` &&
+  vlanId !== `${localization.common.none2} (0)` &&
   vlanId !== `${localization.common.all} (4095)` &&
   (isIntegerNumberInRange(vlanId, 0, 4095) || vlanId.trim() === '')
 

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

@@ -187,8 +187,13 @@
       >
         <template #subTitle>
           <div ref="subTitleBlock6">
-            <div class="subtitle-block">
+            <div class="subtitle-block flex-row items-start">
               <ui-wizard-subtitle :sub-title="selectedStep.subTitle" />
+
+              <common-wizards-vm-migrate-vm-origin
+                v-if="props.vmOrigin"
+                :vm-origin="props.vmOrigin"
+              />
             </div>
           </div>
         </template>
@@ -207,8 +212,13 @@
       >
         <template #subTitle>
           <div ref="subTitleBlock7">
-            <div class="subtitle-block">
+            <div class="subtitle-block flex-row items-start">
               <ui-wizard-subtitle :sub-title="selectedStep.subTitle" />
+
+              <common-wizards-vm-migrate-vm-origin
+                v-if="props.vmOrigin"
+                :vm-origin="props.vmOrigin"
+              />
             </div>
           </div>
         </template>
@@ -293,7 +303,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.create,
+  finish: localization.value.common.migrate,
   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,6 +26,7 @@ const migrateOnlyStorageDataView = (
       label: localization.common.storage,
       value: storage?.name,
       permissions: ['batch-configure'],
+      iconClassName: 'vsphere-icon-datastore',
     },
     {
       label: localization.common.diskFormat,
@@ -124,6 +125,7 @@ const storageDetailsFunc = (
       label: localization.common.virtualMachine,
       value: name,
       permissions: ['batch-configure', 'configure-disk'],
+      iconClassName: 'vsphere-icon-vm',
     },
   ]
 
@@ -148,6 +150,7 @@ const storageDetailsFunc = (
           label: localization.common[key],
           value: value.name,
           permissions: [],
+          iconClassName: `vsphere-icon-${key}`,
         })
       }
     })
@@ -165,6 +168,7 @@ const storageDetailsFunc = (
         label: localization.common.host,
         value: '', //selectedComputeResource.selectedNode.name,
         permissions: [],
+        iconClassName: 'vsphere-icon-host',
       },
       {
         label: localization.migrateVm.migrationStrategy,
@@ -176,6 +180,7 @@ 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,7 +30,8 @@ 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,
@@ -99,7 +100,7 @@ export const stepsFunc = (
     {
       id: dynamicSteps.readyComplete,
       title: localization.common.readyComplete,
-      subTitle: '',
+      subTitle: localization.migrateVm.reviewDetailsBeforeVmMigrated,
       status: UI_E_WIZARD_STATUS.INACTIVE,
       fields: {},
       isValid: true,

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

@@ -88,8 +88,9 @@ 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="options"
+      :options="tableConfig.options"
       :loading="props.isLoading"
       :total-pages="props.totalPages"
       :total-items="props.totalItems"
@@ -52,8 +52,8 @@
         >
           <ui-icon
             :name="item.data.icon"
-            width="14px"
-            height="14px"
+            width="12px"
+            height="12px"
             class="chip-icon"
           ></ui-icon>
           {{ item.text }}
@@ -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,19 +155,22 @@ 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>
 
 <style lang="scss" scoped>
 .device-table-container {
-  margin: 20px 0 24px;
+  margin: 16px 0 24px;
   :deep(.column-manager-button.sm span) {
     font-weight: 500;
   }
@@ -169,15 +187,15 @@ const onSelectRow = (value: UI_I_DataTableBody[]): void => {
   }
   .progress {
     &-line {
-      height: 12px;
+      height: 10px;
       width: 100%;
-      background: #e9ebed8f;
+      background: var(--progress-bar-bg);
       border-radius: 6px;
 
       &-fill {
-        height: 12px;
-        min-width: 12px;
-        background: #008fd6;
+        height: 10px;
+        min-width: 10px;
+        background: var(--progress-bar);
         border-radius: 6px;
       }
     }
@@ -185,6 +203,7 @@ 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/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}`,
+        },
+      ],
+    }
+  })
+}