bfg-common 1.6.96 → 1.6.97

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

@@ -19,6 +19,7 @@
             :options="tableNetworkOptionsNew"
             size="sm"
             :default-layout="false"
+            :texts="tableTexts"
             @select-row="onSelectRow"
           >
             <template #icon="{ item }">
@@ -45,6 +46,7 @@ import type {
   UI_I_DataTable,
   UI_I_DataTableHeader,
   UI_I_DataTableBody,
+  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 {
@@ -74,6 +76,21 @@ const texts = computed(() => ({
   button2: localization.value.common.select,
 }))
 
+const tableTexts = computed<UI_I_TableTexts>(() => ({
+  searchHere: localization.value.common.searchHere,
+  rowsPerPage: localization.value.common.rowsPerPage,
+  of: localization.value.common.of,
+  selected: localization.value.common.selected,
+  columns: localization.value.common.columns,
+  previous: localization.value.common.previous,
+  next: localization.value.common.next,
+  noItemsFound: localization.value.common.noItemsFound,
+  exportAll: localization.value.common.exportAll,
+  exportSelected: localization.value.common.exportSelected,
+  all: localization.value.common.all,
+  filter: localization.value.common.filter,
+}))
+
 const selectedRowData = ref<UI_I_SelectedNetwork[]>([])
 
 const headItems = computed<UI_I_DataTableHeader[]>(() =>
@@ -130,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/steps/selectTargetDevice/modals/new/SelectStandardSwitch.vue

@@ -19,6 +19,7 @@
             :options="tableOptionsNew"
             size="sm"
             :default-layout="false"
+            :texts="tableTexts"
             @select-row="onSelectRow"
           >
             <template #icon="{ item }">
@@ -45,6 +46,7 @@ import type {
   UI_I_DataTable,
   UI_I_DataTableHeader,
   UI_I_DataTableBody,
+  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 {
@@ -74,6 +76,21 @@ const texts = computed(() => ({
   button2: localization.value.common.select,
 }))
 
+const tableTexts = computed<UI_I_TableTexts>(() => ({
+  searchHere: localization.value.common.searchHere,
+  rowsPerPage: localization.value.common.rowsPerPage,
+  of: localization.value.common.of,
+  selected: localization.value.common.selected,
+  columns: localization.value.common.columns,
+  previous: localization.value.common.previous,
+  next: localization.value.common.next,
+  noItemsFound: localization.value.common.noItemsFound,
+  exportAll: localization.value.common.exportAll,
+  exportSelected: localization.value.common.exportSelected,
+  all: localization.value.common.all,
+  filter: localization.value.common.filter,
+}))
+
 const selectedRowData = ref<UI_I_SelectedSwitch[]>([])
 
 const headItems = computed<UI_I_DataTableHeader[]>(() =>
@@ -129,7 +146,7 @@ const onSelectSwitch = (): void => {
 
 <style scoped lang="scss">
 :deep(.table-container) {
-  padding: 8px 32px !important;
+  padding: 16px 32px 8px !important;
 }
 
 .row-container {

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

@@ -19,6 +19,7 @@
             :options="tableOptionsNew"
             size="sm"
             :default-layout="false"
+            :texts="tableTexts"
             @select-row="onSelectRow"
           >
             <template #icon="{ item }">
@@ -45,6 +46,7 @@ import type {
   UI_I_DataTable,
   UI_I_DataTableHeader,
   UI_I_DataTableBody,
+  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 {
@@ -74,6 +76,21 @@ const texts = computed(() => ({
   button2: localization.value.common.select,
 }))
 
+const tableTexts = computed<UI_I_TableTexts>(() => ({
+  searchHere: localization.value.common.searchHere,
+  rowsPerPage: localization.value.common.rowsPerPage,
+  of: localization.value.common.of,
+  selected: localization.value.common.selected,
+  columns: localization.value.common.columns,
+  previous: localization.value.common.previous,
+  next: localization.value.common.next,
+  noItemsFound: localization.value.common.noItemsFound,
+  exportAll: localization.value.common.exportAll,
+  exportSelected: localization.value.common.exportSelected,
+  all: localization.value.common.all,
+  filter: localization.value.common.filter,
+}))
+
 const selectedRowData = ref<UI_I_SelectedSwitch[]>([])
 
 const headItems = computed<UI_I_DataTableHeader[]>(() =>
@@ -129,7 +146,7 @@ const onSelectSwitch = (): void => {
 
 <style scoped lang="scss">
 :deep(.table-container) {
-  padding: 8px 32px !important;
+  padding: 16px 32px 8px !important;
 }
 
 .row-container {

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

@@ -1,3 +1,5 @@
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+
 export const isIntegerNumberInRange = (
   value: number | string | undefined,
   down: number,
@@ -15,9 +17,12 @@ export const checkIfValidIP = (str: string): boolean => {
   return regexExp.test(str)
 }
 
-export const checkVlanId = (vlanId: string): boolean =>
-  vlanId !== 'None (0)' &&
-  vlanId !== 'All (4095)' &&
+export const checkVlanId = (
+  vlanId: string,
+  localization: UI_I_Localization
+): boolean =>
+  vlanId !== `${localization.common.none2} (0)` &&
+  vlanId !== `${localization.common.all} (4095)` &&
   (isIntegerNumberInRange(vlanId, 0, 4095) || vlanId.trim() === '')
 
 export const checkMtu = (mtu: number): boolean => {

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

@@ -18,7 +18,7 @@ export const validateVlanIdConnectionSettingsLocal = (
   wizard.validateFieldLocal(
     5,
     UI_E_ValidationFields.CONNECTION_SETTINGS_VLAN,
-    emptyValue || checkVlanId(data.vlanId),
+    emptyValue || checkVlanId(data.vlanId, localization),
     emptyValue
       ? localization.common.fieldRequired
       : localization.common.vlanIdInvalidMessage,
@@ -49,7 +49,7 @@ export const checkConnectionSettingsSync = (
   let stepHasError = false
   const emptyValue: boolean = data.vlanId.trim() === ''
 
-  if (emptyValue || checkVlanId(data.vlanId)) {
+  if (emptyValue || checkVlanId(data.vlanId, localization)) {
     stepHasError = wizard.setValidation(
       5,
       UI_E_ValidationFields.CONNECTION_SETTINGS_VLAN,

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

@@ -25,7 +25,7 @@ const checkNetwork = async (
         if (message !== '') {
           resolve({
             isValid: false,
-            message,
+            message: localization.common.existingNetworkMessage,
           })
         }
       })
@@ -63,7 +63,7 @@ export const checkNetworkAsync = async (
 
   if (!labelValidation.isValid) {
     stepHasError = wizard.setValidation(stepId, fieldName, {
-      fieldMessage: localization.common.fieldRequired,
+      fieldMessage: labelValidation.message,
       alertMessage: labelValidation.message,
     })
   } else if (wizard.hasMessage(stepId, fieldName)) {

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

@@ -34,7 +34,7 @@ export const validateVlanIdPortPropertiesLocal = (
   wizard.validateFieldLocal(
     3,
     UI_E_ValidationFields.PORT_PROPERTIES_VLAN,
-    checkVlanId(data.vlanId),
+    checkVlanId(data.vlanId, localization),
     emptyValue
       ? localization.common.fieldRequired
       : localization.common.vlanIdInvalidMessage,
@@ -70,7 +70,7 @@ export const checkPortPropertiesSync = (
   const emptyMtu: boolean = data.mtu.option === '1' && data.mtu.size === ''
   const emptyVlanId: boolean = data.vlanId === ''
 
-  if (checkVlanId(data.vlanId) || emptyVlanId) {
+  if (checkVlanId(data.vlanId, localization) || emptyVlanId) {
     stepHasError = wizard.setValidation(
       3,
       UI_E_ValidationFields.PORT_PROPERTIES_VLAN,

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

@@ -24,10 +24,11 @@
           </div>
         </template>
         <template #content>
-          <common-pages-scheduled-tasks-modals-common-new-task-form
+          <common-pages-scheduled-tasks-modals-common-task-form
             v-if="selectedStep.id === dynamicSteps.schedulingOptions"
             v-model="modelSchedulerTask"
             :target="props.vmName"
+            template-view-mode="horizontal"
           />
         </template>
       </ui-wizard-block>
@@ -186,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>
@@ -206,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>
@@ -292,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/Old.vue

@@ -24,7 +24,7 @@
         </div>
       </template>
       <template #modalBody="{ selectedStep }">
-        <common-pages-scheduled-tasks-modals-common-new-task-form
+        <common-pages-scheduled-tasks-modals-common-task-form
           v-if="selectedStep.id === dynamicSteps.schedulingOptions"
           v-model="modelSchedulerTask"
           :target="props.vmName"

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.common.selectMigrationTypeDesc,
+      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/ComputeResource.vue

@@ -114,18 +114,40 @@ watch(
   { immediate: true, deep: true }
 )
 
-/* TODO этот compatibility для дерево, надо поправить для таблицы */
 const compatibilityText = computed<[UI_T_CompatibilityStatus, string]>(() => {
+  const { migrate_type } = model.value
+  let res: [UI_T_CompatibilityStatus, string] = [
+    'none',
+    isNewView.value ? localization.value.common.noComputeResourceSelected : '',
+  ]
+
+  return migrate_type === 'resource'
+    ? compatibilityResourceRules(res)
+    : compatibilityStorageRules(res)
+})
+
+const compatibilityResourceRules = (
+  res: [UI_T_CompatibilityStatus, string]
+): [UI_T_CompatibilityStatus, string] => {
+  /* ===== Compatibility Таблица: ресурсы ===== */
+
+  const { cluster, host } = model.value.resource
+  if (!cluster && !host) return res
+
+  res = ['success', localization.value.common.compatibilityChecksSucceeded]
+  return res
+}
+
+const compatibilityStorageRules = (
+  res: [UI_T_CompatibilityStatus, string]
+): [UI_T_CompatibilityStatus, string] => {
+  /* ===== Compatibility ресурсы и storage (шаг пока не используется) ===== */
   // TODO refactoring
 
   const { selectedNode } = model.value.resource
+  if (!selectedNode) return res
 
-  if (!selectedNode) return ['none', '']
-
-  let res: [UI_T_CompatibilityStatus, string] = [
-    'success',
-    localization.value.common.compatibilityChecksSucceeded,
-  ]
+  res = ['success', localization.value.common.compatibilityChecksSucceeded]
 
   if (selectedNode.type === 'datacenter' || selectedNode.type === 'folder') {
     res = [
@@ -149,7 +171,6 @@ const compatibilityText = computed<[UI_T_CompatibilityStatus, string]>(() => {
       ]
     }
   }
-
   return res
-})
+}
 </script>

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

@@ -30,7 +30,6 @@
         :get-compute-resource-data="props.getComputeResourceData"
       />
       <common-wizards-common-compatibility
-        :loading="!model.resource.selectedNode"
         :status="compatibilityText[0]"
         :text="compatibilityText[1]"
       />
@@ -89,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/Old.vue

@@ -38,7 +38,6 @@
       />
 
       <common-wizards-common-compatibility
-        :loading="!model.resource.selectedNode"
         :status="props.compatibilityText[0]"
         :text="props.compatibilityText[1]"
       />

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;