bfg-common 1.6.67 → 1.6.69

package/components/common/vm/snapshots/DetailView.vue

@@ -7,13 +7,13 @@
     >
       <tbody>
         <tr>
-          <td class="left">{{ localization.common.name }}</td>
+          <td class="left" data-id="vm-snapshot-name-label">{{ localization.common.name }}</td>
           <td class="left snapshot-name-label" data-id="vm-snapshot-name">
             {{ detailData.name }}
           </td>
         </tr>
         <tr>
-          <td class="left">{{ localization.common.description }}</td>
+          <td class="left" data-id="vm-snapshot-description-label">{{ localization.common.description }}</td>
           <td
             class="left snapshot-name-label"
             data-id="vm-snapshot-description"
@@ -22,17 +22,17 @@
           </td>
         </tr>
         <tr>
-          <td class="left">{{ localization.snapshots.timestamp }}</td>
+          <td class="left" data-id="vm-snapshot-timestamp-label">{{ localization.snapshots.timestamp }}</td>
           <td class="left snapshot-name-label" data-id="vm-snapshot-timestamp">
             {{ detailData.timestamp }}
           </td>
         </tr>
         <tr>
-          <td class="left">{{ localization.common.size }}</td>
+          <td class="left" data-id="vm-snapshot-size-label">{{ localization.common.size }}</td>
           <td class="left snapshot-name-label">{{ detailData.size }}</td>
         </tr>
         <tr>
-          <td class="left">
+          <td class="left" data-id="vm-snapshot-of-memory-label">
             {{ localization.common.snapshotTheVirtualMachinesMemory }}
           </td>
           <td class="left snapshot-name-label" data-id="vm-snapshot-of-memory">
@@ -40,7 +40,7 @@
           </td>
         </tr>
         <tr>
-          <td class="left">
+          <td class="left" data-id="vm-snapshot-file-system-label">
             {{ localization.common.quiesceGuestFileSystem }}
           </td>
           <td

package/components/common/wizards/datastore/add/New.vue

@@ -256,4 +256,10 @@ const onCreateDatastore = (): void => emits('submit')
     padding: 10px 12px;
   }
 }
+:deep(.ui-wizard-content-right-container) {
+  padding: 0 30px;
+}
+:deep(.ui-wizard-subtitle-container) + *, :deep(.ui-wizard-subtitle-container) {
+  padding-left: 2px;
+}
 </style>

package/components/common/wizards/datastore/add/lib/config/steps.ts

@@ -130,7 +130,7 @@ export const stepsFunc = (
   // },
   {
     id: dynamicSteps.readyComplete,
-    title: localization.common.readyComplete,
+    title: localization.vmWizard.readyComplete,
     subTitle: localization.common.readyCompleteDatastoreDesc,
     status: UI_E_WIZARD_STATUS.INACTIVE,
     fields: {},

package/components/common/wizards/datastore/add/steps/nameAndDevice/NameAndDeviceNew.vue

@@ -179,7 +179,7 @@ const onSelectHost = (event: string): void => {
   display: flex;
   flex-direction: column;
   row-gap: 16px;
-  margin: 16px 0 16px 2px;
+  margin: 16px 0;
 
   &__alert {
     align-items: flex-start;

package/components/common/wizards/datastore/add/steps/nameAndDevice/advancedOptions/New.vue

@@ -3,7 +3,7 @@
     <ui-button
       variant="text"
       test-id="advanced-options-button"
-      class="advanced-options-btn btn btn-link"
+      class="advanced-options-btn"
       @click="isShowAdvancedOptions = !isShowAdvancedOptions"
     >
       <template #icon>

package/components/common/wizards/network/add/Add.vue

@@ -618,9 +618,20 @@ const finalValidationFunc = async (
     const stepId = wizard.getStepIdByFieldName(fieldName)
 
     if (stepId !== -1) {
+      let message = ''
+
+      if (validationFields[fieldName]) {
+        message = `${validationFields[
+          fieldName
+        ][0].toUpperCase()}${validationFields[fieldName].substring(1)}`
+
+        message =
+          message.charAt(message.length - 1) !== '.' ? message + '.' : message
+      }
+
       stepHasError = wizard.setValidation(stepId, fieldName, {
-        fieldMessage: validationFields[fieldName],
-        alertMessage: validationFields[fieldName],
+        fieldMessage: message,
+        alertMessage: message,
       })
     }
   }

package/components/common/wizards/network/add/AddNew.vue

@@ -44,22 +44,21 @@
         >
           <template #subTitle>
             <div ref="selectTargetDeviceBlock">
-              <div class="subtitle-block flex flex-col">
+              <div class="alert-block flex flex-col">
                 <template
                   v-for="(message, field, key) in selectedStep.fields"
                   :key="key"
                 >
                   <ui-alert
+                    v-if="!!message.alert"
                     :messages="[message.alert]"
                     test-id="select-target-device-alert"
-                    :class="{
-                      'mb-4':
-                        props.alertMessages[selectedStep.id].length - 1 === key,
-                    }"
                     size="md"
                     @hide="emits('hide-alert', selectedStep.id, field)"
                   />
                 </template>
+              </div>
+              <div class="subtitle-block flex flex-col">
                 <ui-wizard-subtitle :sub-title="selectedStep.subTitle" />
                 <ui-line margin="12px 0 0" />
               </div>
@@ -89,22 +88,21 @@
         >
           <template #subTitle>
             <div ref="createStandardSwitchBlock">
-              <div class="subtitle-block flex flex-col">
+              <div class="alert-block flex flex-col">
                 <template
                   v-for="(message, field, key) in selectedStep.fields"
                   :key="key"
                 >
                   <ui-alert
+                    v-if="!!message.alert"
                     :messages="[message.alert]"
                     test-id="create-standard-switch-alert"
-                    :class="{
-                      'mb-4':
-                        props.alertMessages[selectedStep.id].length - 1 === key,
-                    }"
                     size="md"
                     @hide="emits('hide-alert', selectedStep.id, field)"
                   />
                 </template>
+              </div>
+              <div class="subtitle-block flex flex-col">
                 <ui-wizard-subtitle :sub-title="selectedStep.subTitle" />
                 <ui-line margin="12px 0 0" />
               </div>
@@ -146,22 +144,21 @@
         >
           <template #subTitle>
             <div ref="portPropertiesBlock">
-              <div class="subtitle-block flex flex-col">
+              <div class="alert-block flex flex-col">
                 <template
                   v-for="(message, field, key) in selectedStep.fields"
                   :key="key"
                 >
                   <ui-alert
+                    v-if="!!message.alert"
                     :messages="[message.alert]"
                     test-id="port-properties-alert"
-                    :class="{
-                      'mb-4':
-                        props.alertMessages[selectedStep.id].length - 1 === key,
-                    }"
                     size="md"
                     @hide="emits('hide-alert', selectedStep.id, field)"
                   />
                 </template>
+              </div>
+              <div class="subtitle-block flex flex-col">
                 <ui-wizard-subtitle :sub-title="selectedStep.subTitle" />
                 <ui-line margin="12px 0 0" />
               </div>
@@ -190,22 +187,21 @@
         >
           <template #subTitle>
             <div ref="ipFourSettingsBlock">
-              <div class="subtitle-block flex flex-col">
+              <div class="alert-block flex flex-col">
                 <template
                   v-for="(message, field, key) in selectedStep.fields"
                   :key="key"
                 >
                   <ui-alert
+                    v-if="!!message.alert"
                     :messages="[message.alert]"
                     test-id="ip-four-settings-alert"
-                    :class="{
-                      'mb-4':
-                        props.alertMessages[selectedStep.id].length - 1 === key,
-                    }"
                     size="md"
                     @hide="emits('hide-alert', selectedStep.id, field)"
                   />
                 </template>
+              </div>
+              <div class="subtitle-block flex flex-col">
                 <ui-wizard-subtitle :sub-title="selectedStep.subTitle" />
                 <ui-line margin="12px 0 0" />
               </div>
@@ -233,22 +229,21 @@
         >
           <template #subTitle>
             <div ref="connectionSettingsBlock">
-              <div class="subtitle-block flex flex-col">
+              <div class="alert-block flex flex-col">
                 <template
                   v-for="(message, field, key) in selectedStep.fields"
                   :key="key"
                 >
                   <ui-alert
+                    v-if="!!message.alert"
                     :messages="[message.alert]"
                     test-id="connection-settings-alert"
-                    :class="{
-                      'mb-4':
-                        props.alertMessages[selectedStep.id].length - 1 === key,
-                    }"
                     size="md"
                     @hide="emits('hide-alert', selectedStep.id, field)"
                   />
                 </template>
+              </div>
+              <div class="subtitle-block flex flex-col">
                 <ui-wizard-subtitle :sub-title="selectedStep.subTitle" />
                 <ui-line margin="12px 0 0" />
               </div>
@@ -463,6 +458,7 @@ const onChangeSteps = async (value: UI_I_WizardStep[]): Promise<void> => {
   }
   :deep(.ui-wizard-content-with-subtitle) {
     padding-right: 0;
+    scrollbar-gutter: unset;
   }
 }
 
@@ -477,7 +473,7 @@ const onChangeSteps = async (value: UI_I_WizardStep[]): Promise<void> => {
 :deep(.ui-alert-item) {
   margin-bottom: 12px;
 
-  &.mb-4 {
+  &:last-of-type {
     margin-bottom: 16px;
   }
 }

package/components/common/wizards/network/add/lib/config/initialData.ts

@@ -37,7 +37,7 @@ export const portPropertiesInitial = (
   localization: UI_I_Localization
 ): UI_I_PortProperties => ({
   networkLabel: '',
-  vlanId: `${localization.common.none} (0)`,
+  vlanId: `${localization.common.none2} (0)`,
   mtu: {
     option: '0',
     size: 1500,
@@ -62,19 +62,21 @@ export const connectionSettingsInitial = (
   localization: UI_I_Localization
 ): UI_I_ConnectionSettings => ({
   networkLabel: 'VM Network',
-  vlanId: `${localization.common.none} (0)`,
+  vlanId: `${localization.common.none2} (0)`,
 })
 
 export const vlanIdSelectDataFunc = (
   localization: UI_I_Localization
 ): UI_I_VlanIdData[] => [
   {
-    text: `${localization.common.none} (0)`,
-    value: `${localization.common.none} (0)`,
+    text: `${localization.common.none2} (0)`,
+    value: `${localization.common.none2} (0)`,
+    testId: 'vlan-id-start'
   },
   {
     text: `${localization.common.all} (4095)`,
     value: `${localization.common.all} (4095)`,
+    testId: 'vlan-id-end'
   },
 ]
 

package/components/common/wizards/network/add/lib/config/steps.ts

@@ -145,7 +145,7 @@ export const stepsFunc = (
   },
   {
     id: 7,
-    title: localization.common.readyComplete,
+    title: localization.vmWizard.readyComplete,
     subTitle: localization.common.addNetworkingReadyCompleteSubtitle,
     status: UI_E_WIZARD_STATUS.INACTIVE,
     fields: {},

package/components/common/wizards/network/add/lib/models/interfaces.ts

@@ -177,6 +177,7 @@ export interface UI_I_AddNetworkingFourthOrFifthSchemeDataSend {
 export interface UI_I_VlanIdData {
   text: string
   value: string
+  testId?: string
 }
 
 export interface UI_I_NetworkValidation {

package/components/common/wizards/network/add/lib/utils/utils.ts

@@ -5,5 +5,5 @@ export const getVlanId = (
   localization: UI_I_Localization
 ): string =>
   (vlanId === `${localization.common.all} (4095)` && '4095') ||
-  (vlanId === `${localization.common.none} (0)` && '0') ||
+  (vlanId === `${localization.common.none2} (0)` && '0') ||
   vlanId

package/components/common/wizards/network/add/steps/connectionSettings/ConnectionSettingsOld.vue

@@ -18,6 +18,7 @@
               <fieldset>
                 <atoms-tooltip-error
                   :has-error="!!props.messagesFields.name.field"
+                  test-id="network-label-error"
                 >
                   <template #elem>
                     <input
@@ -72,7 +73,10 @@
                         class="is-error tooltip-trigger"
                         name="info"
                       />
-                      <div class="tooltip-top-left tooltip-content error">
+                      <div
+                        class="tooltip-top-left tooltip-content error"
+                        data-id="vlan-id-error"
+                      >
                         {{ props.messagesFields.vlan.field }}
                       </div>
                     </div>

package/components/common/wizards/network/add/steps/ipFourSettings/IpFourSettingsNew.vue

@@ -281,14 +281,8 @@ const fields = computed({
   }
 }
 :deep(.ui-checkbox-label) {
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
-
-  .ui-checkbox-label-text {
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    overflow: hidden;
+  &.md {
+    height: unset;
   }
 }
 .tooltip-text {

package/components/common/wizards/network/add/steps/ipFourSettings/IpFourSettingsOld.vue

@@ -53,6 +53,7 @@
                     :has-error="
                       !!props.messagesFields['ipv4_settings.ipv4'].field
                     "
+                    test-id="address-error"
                   >
                     <template #elem>
                       <input
@@ -88,6 +89,7 @@
                     :has-error="
                       !!props.messagesFields['ipv4_settings.mask'].field
                     "
+                    test-id="mask-error"
                   >
                     <template #elem>
                       <input
@@ -142,6 +144,7 @@
                       :has-error="
                         !!props.messagesFields['ipv4_settings.gateway'].field
                       "
+                      test-id="gateway-error"
                     >
                       <template #elem>
                         <input

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

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

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

@@ -22,6 +22,7 @@
               <fieldset>
                 <atoms-tooltip-error
                   :has-error="!!props.messagesFields.network_name.field"
+                  test-id="network-label-error"
                 >
                   <template #elem>
                     <input
@@ -77,7 +78,7 @@
                         class="is-error tooltip-trigger"
                         name="info"
                       />
-                      <div class="tooltip-top-left tooltip-content error">
+                      <div class="tooltip-top-left tooltip-content error" data-id="vlan-id-error">
                         {{ props.messagesFields['new_network.vlan'].field }}
                       </div>
                     </div>
@@ -111,6 +112,7 @@
               </div>
               <atoms-tooltip-error
                 :has-error="!!props.messagesFields.mtu.field"
+                test-id="invalid-mtu-error"
               >
                 <template #elem>
                   <input
@@ -239,7 +241,9 @@ 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="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;