bfg-common 1.5.774 → 1.5.775

package/components/common/pages/backups/modals/createBackup/New.vue

@@ -24,7 +24,7 @@
               test-id="add-vm-backup-general-error-alert"
               type="error"
               size="md"
-              class="mb-4"
+              class="mb-3"
             />
 
             <div class="subtitle-block flex-row items-start">
@@ -38,7 +38,6 @@
               v-model="model"
               :show="selectedStep.id === dynamicSteps.general"
               :messages-fields="selectedStep.fields"
-              :alert-messages="[]"
             />
           </div>
         </template>
@@ -56,7 +55,7 @@
               test-id="add-vm-backup-disks-error-alert"
               type="error"
               size="md"
-              class="mb-4"
+              class="mb-3"
             />
 
             <div class="subtitle-block flex-row w-full items-start">
@@ -70,7 +69,6 @@
               v-model="model"
               :disks="props.disks"
               :disks-loading="props.disksLoading"
-              :alert-messages="[]"
             />
           </div>
         </template>
@@ -88,7 +86,7 @@
               test-id="add-vm-backup-datastores-error-alert"
               type="error"
               size="md"
-              class="mb-4"
+              class="mb-3"
             />
 
             <div class="subtitle-block flex-row w-full items-start">
@@ -120,7 +118,7 @@
               test-id="add-vm-backup-configuration-error-alert"
               type="error"
               size="md"
-              class="mb-4"
+              class="mb-3"
             />
 
             <div class="subtitle-block flex-row items-start">
@@ -150,7 +148,7 @@
           </div>
         </template>
         <template #content>
-          <div class="my-4">
+          <div class="mt-4">
             <div class="ready-to-complete">
               <common-ready-to-complete :data="props.readyToCompleteData" />
             </div>
@@ -265,22 +263,11 @@ const onCreateDatastore = (): void => emits('submit')
     grid-template-columns: auto 1fr;
     align-items: flex-start;
   }
-  :deep(.details-list) {
-    grid-template-columns: minmax(100px, max-content) minmax(150px, 100%);
-
-    .details-item-label, .details-item-value {
-      display: -webkit-box;
-      -webkit-line-clamp: 2;
-      -webkit-box-orient: vertical;
-      overflow: hidden;
-      white-space: normal;
-      overflow-wrap: anywhere;
+  :deep(.details-list):nth-child(1) {
+    .details-item-value {
+      white-space: break-spaces;
+      overflow: auto;
     }
   }
 }
-
-:deep(.ui-wizard-content-with-subtitle) {
-  scrollbar-gutter: stable;
-  padding-right: 16px;
-}
 </style>

package/components/common/pages/backups/modals/createBackup/Old.vue

@@ -12,6 +12,14 @@
       @submit="onFinish"
     >
       <template #modalBody="{ selectedStep }">
+        <atoms-alert
+          v-show="props.alertErrors.length"
+          status="alert-danger"
+          :items="props.alertErrors"
+          test-id="create-backup-alert"
+          @remove="emits('remove-validation-errors')"
+        />
+
         <common-pages-scheduled-tasks-modals-common-new-task-form
           v-show="selectedStep.id === dynamicSteps.schedulingOptions"
           v-model="modelSchedulerTask"
@@ -23,9 +31,6 @@
           v-show="selectedStep.id === dynamicSteps.general"
           v-model="model"
           :show="selectedStep.id === dynamicSteps.general"
-          :messages-fields="selectedStep.fields"
-          :alert-messages="props.alertMessages[dynamicSteps.general]"
-          @remove-validation-errors="emits('remove-validation-errors', $event)"
         />
 
         <common-pages-backups-modals-create-backup-disks
@@ -33,8 +38,6 @@
           v-model="model"
           :disks="props.disks"
           :disks-loading="props.disksLoading"
-          :alert-messages="props.alertMessages[dynamicSteps.disks]"
-          @remove-validation-errors="emits('remove-validation-errors', $event)"
         />
 
         <common-pages-backups-modals-create-backup-datastores
@@ -42,8 +45,6 @@
           v-model="model"
           :datastore-table="props.datastoreTable"
           :datastore-table-loading="props.datastoreTableLoading"
-          :alert-messages="props.alertMessages[dynamicSteps.datastores]"
-          @remove-validation-errors="emits('remove-validation-errors', $event)"
         />
 
         <common-pages-backups-modals-create-backup-configuration
@@ -97,12 +98,13 @@ const props = defineProps<{
   disksLoading: boolean
   datastoreTable: UI_I_BackupDatastoreTable | null
   datastoreTableLoading: boolean
+  alertErrors: string[]
   readyToCompleteData: UI_I_TableInfoItem[]
 }>()
 
 const emits = defineEmits<{
   (event: 'change-step-create-backup', value: UI_I_WizardStep[]): void
-  (event: 'remove-validation-errors', value: number): void
+  (event: 'remove-validation-errors'): void
   (event: 'finish'): void
   (event: 'hide'): void
 }>()

package/components/common/pages/backups/modals/createBackup/configuration/ConfigurationNew.vue

@@ -31,7 +31,6 @@
         <ui-input
           v-model="maxBindwidthLocal"
           :error="props.messagesFields.bandWidth.field"
-          type="number"
           test-id="vm-backup-max-bandwidth-input"
           class="max-bandwidth-input"
         />
@@ -115,8 +114,7 @@ const maxBindwidthLocal = computed<number>({
   &-row {
     min-height: 36px;
     width: 100%;
-    display: grid;
-    grid-template-columns: minmax(150px, 250px) minmax(150px, 100%);
+    display: flex;
     column-gap: 16px;
     align-items: center;
 
@@ -173,10 +171,9 @@ const maxBindwidthLocal = computed<number>({
         width: fit-content;
       }
 
-      .strategy-select :deep(.ui-popup-window) {
-        min-width: max-content !important;
+      .strategy-select.capitalize, :deep(.ui-select-toggle-button) {
+        text-transform: capitalize;
       }
-
       &-max-band {
         display: flex;
         gap: 12px;
@@ -184,17 +181,6 @@ const maxBindwidthLocal = computed<number>({
         .max-bandwidth-input {
           max-width: 276px;
           width: 100%;
-
-          :deep(input.ui-main-input[type="number"]) {
-            appearance: textfield;
-            -moz-appearance: textfield;
-          }
-
-          :deep(input.ui-main-input[type="number"]::-webkit-outer-spin-button),
-          :deep(input.ui-main-input[type="number"]::-webkit-inner-spin-button) {
-            -webkit-appearance: none;
-            margin: 0;
-          }
         }
 
         .max-bandwidth-select {

package/components/common/pages/backups/modals/createBackup/datastores/Datastores.vue

@@ -10,8 +10,6 @@
     v-model="model"
     :datastore-table="props.datastoreTable"
     :datastore-table-loading="props.datastoreTableLoading"
-    :alert-messages="props.alertMessages"
-    @remove-validation-errors="emits('remove-validation-errors', $event)"
   />
 </template>
 
@@ -25,10 +23,6 @@ const model = defineModel<UI_I_CreateBackupForm>({ required: true })
 const props = defineProps<{
   datastoreTable: UI_I_BackupDatastoreTable | null
   datastoreTableLoading: boolean
-  alertMessages: string[]
-}>()
-const emits = defineEmits<{
-  (event: 'remove-validation-errors', value: number): void
 }>()
 
 const { $store }: any = useNuxtApp()

package/components/common/pages/backups/modals/createBackup/datastores/DatastoresOld.vue

@@ -1,20 +1,11 @@
 <template>
   <div class="datastores h-full">
-    <atoms-alert
-      v-show="props.alertMessages.length"
-      status="alert-danger"
-      :items="props.alertMessages"
-      test-id="create-backup-datastores-alert"
-      @remove="onRemoveErrors"
-    />
-
     <common-pages-backups-modals-create-backup-datastores-table-view-old-table-view
       v-model:selected="model.backup_storage"
       :data-table="props.datastoreTable?.items || []"
       :total-items="props.datastoreTable?.total_items || 0"
       :total-pages="props.datastoreTable?.total_pages || 1"
       :loading="props.datastoreTableLoading"
-      class="datastores-table"
     />
   </div>
 </template>
@@ -24,28 +15,17 @@ import type {
   UI_I_BackupDatastoreTable,
   UI_I_CreateBackupForm
 } from '~/components/common/pages/backups/modals/lib/models/interfaces'
-import { dynamicSteps } from '~/components/common/pages/backups/modals/createBackup/lib/config/steps'
-
-const model = defineModel<UI_I_CreateBackupForm>({ required: true })
 
 const props = defineProps<{
   datastoreTable: UI_I_BackupDatastoreTable | null
   datastoreTableLoading: boolean
-  alertMessages: string[]
-}>()
-const emits = defineEmits<{
-  (event: 'remove-validation-errors', value: number): void
 }>()
 
-const onRemoveErrors = (): void => {
-  emits('remove-validation-errors', dynamicSteps.datastores)
-}
+const model = defineModel<UI_I_CreateBackupForm>({ required: true })
+
 </script>
 
 <style lang="scss" scoped>
-.datastores-table {
-  margin-top: 5px;
-}
 .backups-table-content {
   height: 100%;
   padding: 0 10px 10px 10px;

package/components/common/pages/backups/modals/createBackup/datastores/tableView/new/lib/config/table.ts

@@ -7,7 +7,7 @@ import type { UI_I_Localization } from '~/lib/models/interfaces'
 import type {
   UI_I_BackupDatastore,
 } from '~/components/common/pages/backups/modals/lib/models/interfaces'
-import { backupStorageIconByState, datastoreLocalizationByState } from '~/components/common/lib/config/states'
+import { datastoreLocalizationByState } from '~/components/common/lib/config/states'
 import type {
   I_BackupDatastoreChipStatus
 } from "~/components/common/pages/backups/modals/createBackup/datastores/tableView/new/lib/models/interfaces";
@@ -22,7 +22,7 @@ export const getHeaderDataFunc = (
     text: localization.common.name,
     isSortable: true,
     sort: 'asc',
-    width: '160px',
+    width: '104px',
     show: true,
     filter: true
   },
@@ -32,7 +32,7 @@ export const getHeaderDataFunc = (
     text: localization.common.state,
     isSortable: true,
     sort: 'asc',
-    width: '160px',
+    width: '128px',
     show: true,
     filter: true
   },
@@ -42,7 +42,7 @@ export const getHeaderDataFunc = (
     text: localization.common.capacity,
     isSortable: true,
     sort: 'asc',
-    width: '120px',
+    width: '96px',
     show: true,
     filter: true
   },
@@ -52,7 +52,7 @@ export const getHeaderDataFunc = (
     text: localization.common.provisioned,
     isSortable: true,
     sort: 'asc',
-    width: '128px',
+    width: '96px',
     show: true,
     filter: true
   },
@@ -82,7 +82,7 @@ export const getHeaderDataFunc = (
     text: localization.common.type,
     isSortable: true,
     sort: 'asc',
-    width: '104px',
+    width: '80',
     show: true,
     filter: true
   },
@@ -92,7 +92,7 @@ export const getHeaderDataFunc = (
     text: localization.common.location,
     isSortable: true,
     sort: 'asc',
-    width: '184px',
+    width: '160px',
     show: true,
     filter: true
   }
@@ -179,7 +179,7 @@ export const getBodyDataFunc = (
           col: 'col0',
           text: datastore.name,
           data: {
-            iconClassName: `icon-${backupStorageIconByState[datastore.state]}`,
+            iconClassName: [3, 5, 6].includes(datastore.state) ? 'vsphere-icon-datastore-error' : 'vsphere-icon-datastore',
             id: datastore.id
           }
         },

package/components/common/pages/backups/modals/createBackup/disks/Disks.vue

@@ -4,8 +4,6 @@
     v-model="model"
     :disks="props.disks"
     :disks-loading="props.disksLoading"
-    :alert-messages="props.alertMessages"
-    @remove-validation-errors="emits('remove-validation-errors', $event)"
   />
   <common-pages-backups-modals-create-backup-disks-new
     v-else
@@ -26,10 +24,6 @@ const model = defineModel<UI_I_CreateBackupForm>({ required: true })
 const props = defineProps<{
   disks: UI_I_Pvm['disk_devices']
   disksLoading: boolean
-  alertMessages: string[]
-}>()
-const emits = defineEmits<{
-  (event: 'remove-validation-errors', value: number): void
 }>()
 
 const { $store }: any = useNuxtApp()

package/components/common/pages/backups/modals/createBackup/disks/DisksOld.vue

@@ -1,20 +1,11 @@
 <template>
   <div class="disks h-full">
-    <atoms-alert
-      v-show="props.alertMessages.length"
-      status="alert-danger"
-      :items="props.alertMessages"
-      test-id="create-backup-disks-alert"
-      @remove="onRemoveErrors"
-    />
-
     <common-pages-backups-modals-create-backup-disks-table-view-old-table-view
       v-model:selected="model.disk_devices"
       :data-table="props.disks"
       :loading="props.disksLoading"
       :total-items="props.disks.length"
       :total-pages="1"
-      class="disks-table"
     />
   </div>
 </template>
@@ -24,26 +15,14 @@ import type {
   UI_I_CreateBackupForm,
   UI_I_Pvm
 } from "~/components/common/pages/backups/modals/lib/models/interfaces";
-import { dynamicSteps } from '~/components/common/pages/backups/modals/createBackup/lib/config/steps'
 
 const model = defineModel<UI_I_CreateBackupForm>({ required: true })
 
 const props = defineProps<{
   disks: UI_I_Pvm['disk_devices']
   disksLoading: boolean
-  alertMessages: string[]
-}>()
-const emits = defineEmits<{
-  (event: 'remove-validation-errors', value: number): void
 }>()
 
-const onRemoveErrors = (): void => {
-  emits('remove-validation-errors', dynamicSteps.disks)
-}
 </script>
 
-<style lang="scss" scoped>
-.disks-table {
-  margin-top: 5px;
-}
-</style>
+<style lang="scss" scoped></style>

package/components/common/pages/backups/modals/createBackup/disks/tableView/new/TableView.vue

@@ -61,7 +61,7 @@ const texts = computed<UI_I_TableTexts>(() => ({
   searchHere: localization.value.common.searchHere,
   rowsPerPage: localization.value.common.rowsPerPage,
   of: localization.value.common.of,
-  selected: localization.value.common.selected2,
+  selected: localization.value.common.selected,
   columns: localization.value.common.columns,
   previous: localization.value.common.previous,
   next: localization.value.common.next,

package/components/common/pages/backups/modals/createBackup/disks/tableView/new/lib/config/table.ts

@@ -19,7 +19,7 @@ export const getHeaderDataFunc = (
     text: localization.common.source,
     isSortable: true,
     sort: 'asc',
-    width: '352px',
+    width: '368px',
     show: true,
     filter: true
   },
@@ -29,7 +29,7 @@ export const getHeaderDataFunc = (
     text: localization.common.deviceType,
     isSortable: true,
     sort: 'asc',
-    width: '160px',
+    width: '136px',
     show: true,
     filter: true
   },
@@ -39,7 +39,7 @@ export const getHeaderDataFunc = (
     text: localization.common.bus,
     isSortable: true,
     sort: 'asc',
-    width: '136px',
+    width: '112px',
     show: true,
     filter: true
   },
@@ -49,7 +49,7 @@ export const getHeaderDataFunc = (
     text: localization.common.target,
     isSortable: true,
     sort: 'asc',
-    width: '136px',
+    width: '112px',
     show: true,
     filter: true
   },
@@ -59,7 +59,7 @@ export const getHeaderDataFunc = (
     text: localization.common.capacity,
     isSortable: true,
     sort: 'asc',
-    width: '136px',
+    width: '112px',
     show: true,
     filter: true
   },
@@ -69,7 +69,7 @@ export const getHeaderDataFunc = (
     text: localization.common.used,
     isSortable: true,
     sort: 'asc',
-    width: '136px',
+    width: '112px',
     show: true,
     filter: true
   },
@@ -79,7 +79,7 @@ export const getHeaderDataFunc = (
     text: localization.common.free,
     isSortable: true,
     sort: 'asc',
-    width: '136px',
+    width: '112px',
     show: true,
     filter: true
   },

package/components/common/pages/backups/modals/createBackup/general/General.vue

@@ -9,8 +9,6 @@
     v-else
     v-model="model"
     :show="props.show"
-    :alert-messages="props.alertMessages"
-    @remove-validation-errors="emits('remove-validation-errors', $event)"
   />
 </template>
 
@@ -23,11 +21,7 @@ const model = defineModel<UI_I_CreateBackupForm>({ required: true })
 
 const props = defineProps<{
   show: boolean
-  messagesFields: UI_I_ArbitraryObject<UI_I_ErrorFields>
-  alertMessages: string[]
-}>()
-const emits = defineEmits<{
-  (event: 'remove-validation-errors', value: number): void
+  messagesFields?: UI_I_ArbitraryObject<UI_I_ErrorFields>
 }>()
 
 const { $store }: any = useNuxtApp()

package/components/common/pages/backups/modals/createBackup/general/GeneralNew.vue

@@ -30,7 +30,7 @@
         v-model="model.description"
         :placeholder="localization.common.description"
         test-id="vm-backup-name-input"
-        height="92"
+        height="84"
       />
     </div>
   </div>

package/components/common/pages/backups/modals/createBackup/general/GeneralOld.vue

@@ -1,13 +1,5 @@
 <template>
   <div class="general">
-    <atoms-alert
-      v-show="props.alertMessages.length"
-      status="alert-danger"
-      :items="props.alertMessages"
-      test-id="create-backup-name-alert"
-      @remove="onRemoveErrors"
-    />
-
     <form @submit.prevent>
       <div class="field flex pt-4">
         <label for="general-name">{{ localization.common.name }}:</label>
@@ -37,16 +29,11 @@
 <script lang="ts" setup>
 import type { UI_I_Localization } from '~/lib/models/interfaces'
 import type { UI_I_CreateBackupForm } from '~/components/common/pages/backups/modals/lib/models/interfaces'
-import { dynamicSteps } from '~/components/common/pages/backups/modals/createBackup/lib/config/steps'
 
 const model = defineModel<UI_I_CreateBackupForm>({ required: true })
 
 const props = defineProps<{
   show: boolean
-  alertMessages: string[]
-}>()
-const emits = defineEmits<{
-  (event: 'remove-validation-errors', value: number): void
 }>()
 
 const localization = computed<UI_I_Localization>(() => useLocal())
@@ -64,10 +51,6 @@ watch(
     }, 0)
   }
 )
-
-const onRemoveErrors = (): void => {
-  emits('remove-validation-errors', dynamicSteps.general)
-}
 </script>
 
 <style lang="scss" scoped>

package/components/common/pages/backups/modals/createBackup/lib/config/readyToCompleteOptions.ts

@@ -18,12 +18,12 @@ export const readyToCompleteOptions = (
     // General
     {
       label: localization.common.name,
-      value: backupForm.name || '--',
+      value: backupForm.name,
       iconClassName: 'icon-backup',
     },
     {
       label: localization.common.description,
-      value: backupForm.description || '--',
+      value: backupForm.description,
     },
   ]
 
@@ -31,7 +31,7 @@ export const readyToCompleteOptions = (
   backupForm.disk_devices.forEach((disk_device, i) => {
     result.push({
       label: `${localization.common.disk} ${i + 1}`,
-      value: disk_device.location || '--',
+      value: disk_device.location,
       iconClassName: 'icon-vSphere-dsVmDisk',
     })
   })
@@ -42,7 +42,7 @@ export const readyToCompleteOptions = (
   )
   result.push({
     label: localization.common.datastore,
-    value: datastore?.name || '--',
+    value: datastore?.name || '',
     iconClassName: 'vsphere-icon-datastore',
   })
 
@@ -51,7 +51,7 @@ export const readyToCompleteOptions = (
     label: localization.common.strategy,
     value:
       strategyOptions.find((option) => option.value === backupForm.strategy)
-        ?.label || '--',
+        ?.label || '',
   })
 
   const gbSizeByB = 1_073_741_824

package/components/common/pages/backups/modals/createBackup/lib/config/steps.ts

@@ -62,7 +62,7 @@ export const stepsFunc = (
       stepName: '',
       title: localization.common.datastores,
 
-      subTitle: localization.common.selectBackupStorageConfigurationDiskFiles,
+      subTitle: localization.common.selectStorageConfigurationDiskFiles2,
       status: UI_E_WIZARD_STATUS.INACTIVE,
       isValid: true,
       fields: {

package/components/common/pages/backups/modals/createBackup/lib/config/strategyOptions.ts

@@ -4,19 +4,10 @@ import type { UI_I_SelectInputItem } from '~/components/common/select/input/lib/
 export const strategyOptionsFunc = (
   localization: UI_I_Localization
 ): UI_I_SelectInputItem[] => {
-  const { $text } = useNuxtApp()
-  const isLangEn = useLocalStorage('lang') === 'en_US'
-
-  const labels = [
+  return [
     { label: localization.common.fullBackup, value: 0 },
     { label: localization.common.incrementalBackup, value: 1 },
     { label: localization.common.differentialBackup, value: 2 },
   ]
-
-  return isLangEn
-    ? labels.map((item) => ({
-        ...item,
-        label: $text.toCapitalizeEveryWord(item.label),
-      }))
-    : labels
 }
+