bfg-common 1.5.756 → 1.5.759

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/maxBandwidth/lib/config/options.ts

@@ -1,6 +1,6 @@
-import type {UI_I_SelectInputItem} from "~/components/common/select/input/lib/models/interfaces";
-
-export const maxBandwidthOptions: UI_I_SelectInputItem[] = [
-  { label: 'Mbps', value: 0 },
-  { label: 'Gbps', value: 1 },
-]
+import type {UI_I_SelectInputItem} from "~/components/common/select/input/lib/models/interfaces";
+
+export const maxBandwidthOptions: UI_I_SelectInputItem[] = [
+  { label: 'Mbps', value: 0 },
+  { label: 'Gbps', value: 1 },
+]

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/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 { datastoreLocalizationByState } from '~/components/common/lib/config/states'
+import {backupStorageIconByState, 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: '104px',
+    width: '160px',
     show: true,
     filter: true
   },
@@ -32,7 +32,7 @@ export const getHeaderDataFunc = (
     text: localization.common.state,
     isSortable: true,
     sort: 'asc',
-    width: '128px',
+    width: '160px',
     show: true,
     filter: true
   },
@@ -42,7 +42,7 @@ export const getHeaderDataFunc = (
     text: localization.common.capacity,
     isSortable: true,
     sort: 'asc',
-    width: '96px',
+    width: '120px',
     show: true,
     filter: true
   },
@@ -52,7 +52,7 @@ export const getHeaderDataFunc = (
     text: localization.common.provisioned,
     isSortable: true,
     sort: 'asc',
-    width: '96px',
+    width: '128px',
     show: true,
     filter: true
   },
@@ -82,7 +82,7 @@ export const getHeaderDataFunc = (
     text: localization.common.type,
     isSortable: true,
     sort: 'asc',
-    width: '80',
+    width: '104px',
     show: true,
     filter: true
   },
@@ -92,7 +92,7 @@ export const getHeaderDataFunc = (
     text: localization.common.location,
     isSortable: true,
     sort: 'asc',
-    width: '160px',
+    width: '184px',
     show: true,
     filter: true
   }
@@ -179,7 +179,7 @@ export const getBodyDataFunc = (
           col: 'col0',
           text: datastore.name,
           data: {
-            iconClassName: [3, 5, 6].includes(datastore.state) ? 'vsphere-icon-datastore-error' : 'vsphere-icon-datastore',
+            iconClassName: `icon-${backupStorageIconByState[datastore.state]}`,
             id: datastore.id
           }
         },

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.selected,
+  selected: localization.value.common.selected2,
   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: '368px',
+    width: '352px',
     show: true,
     filter: true
   },
@@ -29,7 +29,7 @@ export const getHeaderDataFunc = (
     text: localization.common.deviceType,
     isSortable: true,
     sort: 'asc',
-    width: '136px',
+    width: '160px',
     show: true,
     filter: true
   },
@@ -39,7 +39,7 @@ export const getHeaderDataFunc = (
     text: localization.common.bus,
     isSortable: true,
     sort: 'asc',
-    width: '112px',
+    width: '136px',
     show: true,
     filter: true
   },
@@ -49,7 +49,7 @@ export const getHeaderDataFunc = (
     text: localization.common.target,
     isSortable: true,
     sort: 'asc',
-    width: '112px',
+    width: '136px',
     show: true,
     filter: true
   },
@@ -59,7 +59,7 @@ export const getHeaderDataFunc = (
     text: localization.common.capacity,
     isSortable: true,
     sort: 'asc',
-    width: '112px',
+    width: '136px',
     show: true,
     filter: true
   },
@@ -69,7 +69,7 @@ export const getHeaderDataFunc = (
     text: localization.common.used,
     isSortable: true,
     sort: 'asc',
-    width: '112px',
+    width: '136px',
     show: true,
     filter: true
   },
@@ -79,7 +79,7 @@ export const getHeaderDataFunc = (
     text: localization.common.free,
     isSortable: true,
     sort: 'asc',
-    width: '112px',
+    width: '136px',
     show: true,
     filter: true
   },

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="84"
+        height="92"
       />
     </div>
   </div>

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.selectStorageConfigurationDiskFiles2,
+      subTitle: localization.common.selectBackupStorageConfigurationDiskFiles,
       status: UI_E_WIZARD_STATUS.INACTIVE,
       isValid: true,
       fields: {

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

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

package/components/common/pages/backups/modals/createBackup/lib/models/interfaces.ts

@@ -1,8 +1,8 @@
-export interface UI_I_DynamicSteps {
-  general: number
-  disks: number
-  datastores: number
-  configuration: number
-  readyComplete: number
-  schedulingOptions: number
-}
+export interface UI_I_DynamicSteps {
+  general: number
+  disks: number
+  datastores: number
+  configuration: number
+  readyComplete: number
+  schedulingOptions: number
+}

package/components/common/pages/backups/modals/createBackup/lib/validation/validations.ts

@@ -20,7 +20,7 @@ export const checkName = async (
   if (!name) {
     stepHasError = wizard.setValidation(dynamicSteps.general, 'name', {
       fieldMessage: localization.common.fieldRequired,
-      alertMessage: localization.common.fieldRequired
+      alertMessage: ''
     })
     wizard.setLoader(false)
     return { 
@@ -53,7 +53,7 @@ export const checkName = async (
 
         if (stepErrorMessage) {
           stepHasError = wizard.setValidation(dynamicSteps.general, 'name', {
-            fieldMessage: stepErrorMessage,
+            fieldMessage: ' ',
             alertMessage: stepErrorMessage
           })
         } else if (wizard.hasMessage(dynamicSteps.general, 'name')) {
@@ -82,8 +82,8 @@ export const checkDisks = (
 
   if (!isValidStores) {
     stepHasError = wizard.setValidation(dynamicSteps.disks, 'disk_devices', {
-      fieldMessage: localization.common.diskIsRequired,
-      alertMessage: localization.common.diskIsRequired
+      fieldMessage: localization.common.selectLeastOneDisk,
+      alertMessage: localization.common.selectLeastOneDisk
     })
   } else if (wizard.hasMessage(dynamicSteps.disks, 'disk_devices')) {
     value = wizard.removeValidation(dynamicSteps.disks, 'disk_devices', value)
@@ -106,8 +106,8 @@ export const checkDatastore = (
 
   if (!isValidStorage) {
     stepHasError = wizard.setValidation(dynamicSteps.datastores, 'backup_storage', {
-      fieldMessage: localization.common.datastoreIsRequired,
-      alertMessage: localization.common.datastoreIsRequired
+      fieldMessage: localization.common.selectBackupStorageToProceed,
+      alertMessage: localization.common.selectBackupStorageToProceed
     })
   } else if (wizard.hasMessage(dynamicSteps.datastores, 'backup_storage')) {
     value = wizard.removeValidation(dynamicSteps.datastores, 'backup_storage', value)

package/components/common/vm/snapshots/new/New.vue

@@ -227,7 +227,6 @@
 </template>
 
 <script setup lang="ts">
-import { useTemplateRef } from 'vue'
 import { useElementSize } from '@vueuse/core'
 import type { UI_I_InfoBlock } from '~/node_modules/bfg-uikit/components/ui/infoBlock/models/interfaces'
 import type { UI_I_Localization } from '~/lib/models/interfaces'
@@ -269,14 +268,19 @@ const onSelectContextMenuItem = (actionType: UI_T_SnapshotActionType): void => {
   emits('show-modal', actionType)
 }
 
-const detailsElement = useTemplateRef<HTMLDivElement>('detailsScrollBlock')
-const { height } = useElementSize(detailsElement)
+const detailsScrollBlock = ref<HTMLElement | null>(null)
+const { height } = useElementSize(detailsScrollBlock)
+const hasScroll = ref<boolean>(false)
+const checkScroll = (): void => {
+  const element = detailsScrollBlock.value
+  if (element) {
+    hasScroll.value = element.scrollHeight > element.clientHeight
+  }
+}
 
-const hasScroll = computed<boolean>(
-  () =>
-    height.value &&
-    detailsElement.value?.scrollHeight > detailsElement.value?.clientHeight
-)
+watch(height, () => {
+  checkScroll()
+})
 </script>
 
 <style>
@@ -429,9 +433,6 @@ const hasScroll = computed<boolean>(
       line-height: 18px;
       text-align: right;
     }
-    :deep(.ui-main-info-block-item) {
-      grid-column-gap: 10px;
-    }
     :deep(.ui-main-info-block-item-right) {
       white-space: unset !important;
       max-width: 50%;