bfg-common 1.5.773 → 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/configuration/backupWindow/BackupWindow.vue

@@ -1,29 +1,29 @@
-<template>
-  <atoms-stack-block
-      :has-children="false"
-      test-id="backup-window-stack-block"
-  >
-    <template #stackBlockKey>
-      <span>{{ localization.common.backupWindow }}</span>
-    </template>
-    <template #stackBlockContent>
-      <input
-        v-model="model.start_window_min"
-        data-id="hours-input"
-        type="number"
-        class="hrs"
-      />
-    </template>
-  </atoms-stack-block>
-</template>
-
-<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'
-
-const model = defineModel<UI_I_CreateBackupForm>({ required: true })
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-</script>
-
-<style lang="scss" scoped></style>
+<template>
+  <atoms-stack-block
+      :has-children="false"
+      test-id="backup-window-stack-block"
+  >
+    <template #stackBlockKey>
+      <span>{{ localization.common.backupWindow }}</span>
+    </template>
+    <template #stackBlockContent>
+      <input
+        v-model="model.start_window_min"
+        data-id="hours-input"
+        type="number"
+        class="hrs"
+      />
+    </template>
+  </atoms-stack-block>
+</template>
+
+<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'
+
+const model = defineModel<UI_I_CreateBackupForm>({ required: true })
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+</script>
+
+<style lang="scss" scoped></style>

package/components/common/pages/backups/modals/createBackup/configuration/maxBandwidth/MaxBandwidth.vue

@@ -1,69 +1,69 @@
-<template>
-  <atoms-stack-block
-      :has-children="false"
-      test-id="backup-max-bandwidth-stack-block"
-  >
-    <template #stackBlockKey>
-      <span>{{ localization.common.maxBandwidth }}</span>
-    </template>
-    <template #stackBlockContent>
-      <div class="flex-align-center">
-        <input
-          v-model="maxBindwidthLocal"
-          data-id="mbps-input"
-          type="number"
-          class="mbps"
-        />
-
-        <common-select-input
-          v-model="selectedType"
-          :data="maxBandwidthOptionsLocal"
-          test-id="backup-max-bandwidth-type"
-          class="ml-1"
-        />
-      </div>
-    </template>
-  </atoms-stack-block>
-</template>
-
-<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 type { UI_T_BandwidthOption } from '~/components/common/pages/backups/modals/createBackup/configuration/maxBandwidth/lib/models/types'
-import type { UI_I_SelectInputItem } from '~/components/common/select/input/lib/models/interfaces'
-import { maxBandwidthOptions } from '~/components/common/pages/backups/modals/createBackup/configuration/maxBandwidth/lib/config/options'
-
-const model = defineModel<UI_I_CreateBackupForm>({ required: true })
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-const { $binary }: any = useNuxtApp()
-
-const maxBandwidthOptionsLocal =
-  ref<UI_I_SelectInputItem[]>(maxBandwidthOptions)
-
-const maxBindwidthLocal = computed<number>({
-  get() {
-    return selectedType.value === 1
-      ? $binary.bToGb(model.value.bandwidth_limit)
-      : $binary.bToMb(model.value.bandwidth_limit)
-  },
-  set(newValue: number) {
-    model.value.bandwidth_limit =
-      selectedType.value === 1
-        ? $binary.gbToB(newValue)
-        : $binary.mbToB(newValue)
-  },
-})
-
-const selectedType = ref<UI_T_BandwidthOption>(0)
-watch(selectedType, (newValue) => {
-  if (newValue === 1) model.value.bandwidth_limit *= 1_024
-  else model.value.bandwidth_limit /= 1_024
-})
-</script>
-
-<style lang="scss" scoped>
-#backup-transaction-logs {
-  margin: 4px 4px 0 0;
-}
-</style>
+<template>
+  <atoms-stack-block
+      :has-children="false"
+      test-id="backup-max-bandwidth-stack-block"
+  >
+    <template #stackBlockKey>
+      <span>{{ localization.common.maxBandwidth }}</span>
+    </template>
+    <template #stackBlockContent>
+      <div class="flex-align-center">
+        <input
+          v-model="maxBindwidthLocal"
+          data-id="mbps-input"
+          type="number"
+          class="mbps"
+        />
+
+        <common-select-input
+          v-model="selectedType"
+          :data="maxBandwidthOptionsLocal"
+          test-id="backup-max-bandwidth-type"
+          class="ml-1"
+        />
+      </div>
+    </template>
+  </atoms-stack-block>
+</template>
+
+<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 type { UI_T_BandwidthOption } from '~/components/common/pages/backups/modals/createBackup/configuration/maxBandwidth/lib/models/types'
+import type { UI_I_SelectInputItem } from '~/components/common/select/input/lib/models/interfaces'
+import { maxBandwidthOptions } from '~/components/common/pages/backups/modals/createBackup/configuration/maxBandwidth/lib/config/options'
+
+const model = defineModel<UI_I_CreateBackupForm>({ required: true })
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+const { $binary }: any = useNuxtApp()
+
+const maxBandwidthOptionsLocal =
+  ref<UI_I_SelectInputItem[]>(maxBandwidthOptions)
+
+const maxBindwidthLocal = computed<number>({
+  get() {
+    return selectedType.value === 1
+      ? $binary.bToGb(model.value.bandwidth_limit)
+      : $binary.bToMb(model.value.bandwidth_limit)
+  },
+  set(newValue: number) {
+    model.value.bandwidth_limit =
+      selectedType.value === 1
+        ? $binary.gbToB(newValue)
+        : $binary.mbToB(newValue)
+  },
+})
+
+const selectedType = ref<UI_T_BandwidthOption>(0)
+watch(selectedType, (newValue) => {
+  if (newValue === 1) model.value.bandwidth_limit *= 1_024
+  else model.value.bandwidth_limit /= 1_024
+})
+</script>
+
+<style lang="scss" scoped>
+#backup-transaction-logs {
+  margin: 4px 4px 0 0;
+}
+</style>

package/components/common/pages/backups/modals/createBackup/configuration/strategy/Strategy.vue

@@ -1,38 +1,38 @@
-<template>
-  <atoms-stack-block
-      :has-children="false"
-      test-id="backup-strategy-stack-block"
-  >
-    <template #stackBlockKey>
-      <span>{{ localization.common.strategy }}</span>
-    </template>
-    <template #stackBlockContent>
-      <common-select-input
-        v-model="model.strategy"
-        :data="strategyOptions"
-        test-id="backup-strategy"
-      />
-    </template>
-  </atoms-stack-block>
-</template>
-
-<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 type { UI_I_SelectInputItem } from '~/components/common/select/input/lib/models/interfaces'
-import { strategyOptionsFunc } from '~/components/common/pages/backups/modals/createBackup/lib/config/strategyOptions'
-
-const model = defineModel<UI_I_CreateBackupForm>({ required: true })
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-const strategyOptions = ref<UI_I_SelectInputItem[]>(
-  strategyOptionsFunc(localization.value)
-)
-</script>
-
-<style lang="scss" scoped>
-#backup-transaction-logs {
-  margin: 4px 4px 0 0;
-}
-</style>
+<template>
+  <atoms-stack-block
+      :has-children="false"
+      test-id="backup-strategy-stack-block"
+  >
+    <template #stackBlockKey>
+      <span>{{ localization.common.strategy }}</span>
+    </template>
+    <template #stackBlockContent>
+      <common-select-input
+        v-model="model.strategy"
+        :data="strategyOptions"
+        test-id="backup-strategy"
+      />
+    </template>
+  </atoms-stack-block>
+</template>
+
+<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 type { UI_I_SelectInputItem } from '~/components/common/select/input/lib/models/interfaces'
+import { strategyOptionsFunc } from '~/components/common/pages/backups/modals/createBackup/lib/config/strategyOptions'
+
+const model = defineModel<UI_I_CreateBackupForm>({ required: true })
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const strategyOptions = ref<UI_I_SelectInputItem[]>(
+  strategyOptionsFunc(localization.value)
+)
+</script>
+
+<style lang="scss" scoped>
+#backup-transaction-logs {
+  margin: 4px 4px 0 0;
+}
+</style>

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()