bfg-common 1.5.757 → 1.5.759

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%;

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

@@ -19,7 +19,7 @@
       <ui-skeleton-item width="96" height="20" class="ml-auto" />
     </div>
     <div class="right-content grid p-4">
-      <div class="flex justify-between gap-4 pr-4 flex-wrap top-container">
+      <div class="flex justify-between gap-4 flex-wrap top-container">
         <ui-skeleton-item width="80" height="20" />
         <div class="actions-block flex">
           <ui-skeleton-item width="20" height="20" />
@@ -29,13 +29,7 @@
           <ui-skeleton-item width="20" height="20" />
         </div>
       </div>
-      <div
-        ref="detailsScrollBlock"
-        :class="[
-          'details-block flex flex-col my-6',
-          { 'has-scroll': hasScroll },
-        ]"
-      >
+      <div class="details-block flex flex-col my-6">
         <div
           v-for="index in detailsItemsCount"
           :key="index"
@@ -51,19 +45,7 @@
 </template>
 
 <script setup lang="ts">
-import { useTemplateRef } from 'vue'
-import { useElementSize } from '@vueuse/core'
-
 const detailsItemsCount = ref<number>(6)
-
-const detailsElement = useTemplateRef<HTMLDivElement>('detailsScrollBlock')
-const { height } = useElementSize(detailsElement)
-
-const hasScroll = computed<boolean>(
-  () =>
-    height.value &&
-    detailsElement.value?.scrollHeight > detailsElement.value?.clientHeight
-)
 </script>
 
 <style>
@@ -102,8 +84,6 @@ const hasScroll = computed<boolean>(
     }
   }
   .right-content {
-    padding-right: 0;
-
     .top-container {
       .actions-block {
         grid-column-gap: 10px;
@@ -118,10 +98,6 @@ const hasScroll = computed<boolean>(
       grid-row-gap: 10px;
       overflow: auto;
 
-      &:not(.has-scroll) {
-        padding-right: 16px;
-      }
-
       .details-block-item {
         background-color: var(--snapshots-right-skeleton-item-bg-color);
         border-radius: 6px;

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

@@ -251,12 +251,10 @@ const globalPermissions = computed<any>(
 
 // Step's content data (connectionType)
 const connectionType = ref<string>(
-  globalPermissions.value === undefined
-    ? '0'
-    : !globalPermissions.value?.['Networks.CreateSysx'] &&
-      !globalPermissions.value?.['Networks.CreatePortGroup']
+  !globalPermissions.value['Networks.CreateSysx'] &&
+    !globalPermissions.value['Networks.CreatePortGroup']
     ? '2'
-    : !globalPermissions.value?.['Networks.CreateSysx']
+    : !globalPermissions.value['Networks.CreateSysx']
     ? '1'
     : '0'
 )
@@ -293,7 +291,7 @@ const onChangeAdapterStatus = (adapterStatusNew: UI_I_AdapterStatus): void => {
 // Step's content data and changers (targetDevice)
 const targetDevice = ref<UI_I_TargetDevice>(
   useDeepCopy(
-    targetDeviceInitialFunc(globalPermissions.value?.['Networks.UpdateSwitch'])
+    targetDeviceInitialFunc(globalPermissions.value['Networks.UpdateSwitch'])
   )
 )
 const mtuFromSwitch = ref<number>(1500)
@@ -387,8 +385,7 @@ watch(
         : (targetDevice.value.selected = '0')
       newCT === '1' && (targetDevice.value.selected = '1')
       newCT === '2' &&
-        (globalPermissions.value === undefined ||
-        globalPermissions.value?.['Networks.UpdateSwitch']
+        (globalPermissions.value['Networks.UpdateSwitch']
           ? (targetDevice.value.selected = '2')
           : (targetDevice.value.selected = '3'))
     }
@@ -518,7 +515,7 @@ const reset = (): void => {
   wizard.reset()
   connectionTypeLocal.value = '0'
   targetDevice.value = useDeepCopy(
-    targetDeviceInitialFunc(globalPermissions.value?.['Networks.UpdateSwitch'])
+    targetDeviceInitialFunc(globalPermissions.value['Networks.UpdateSwitch'])
   )
   connectionSettings.value = useDeepCopy(connectionSettingsInitial)
   portProperties.value = useDeepCopy(portPropertiesInitial)

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

@@ -25,8 +25,7 @@ export const servicesInitial: UI_I_Services = {
 export const targetDeviceInitialFunc = (
   updateSwitchPermission: boolean
 ): UI_I_TargetDevice => ({
-  selected:
-    updateSwitchPermission === undefined || updateSwitchPermission ? '1' : '3',
+  selected: updateSwitchPermission ? '1' : '3',
   network: '',
   switch: '',
   standardSwitch: '',

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "bfg-common",
   "private": false,
-  "version": "1.5.757",
+  "version": "1.5.759",
   "scripts": {
     "build": "nuxt build",
     "dev": "nuxt dev --port=3002",

package/plugins/time.ts

@@ -1,58 +1,58 @@
-import { defineNuxtPlugin } from '#app'
-import type { UI_T_LangValue } from '~/lib/models/types'
-export default defineNuxtPlugin(() => {
-  const time = function (): any {
-    const self: any = {}
-    self.millisecondsToHour = function (ms: number): number {
-      return ~~(ms / 1000 / 60 / 60 / 24)
-    }
-    self.formatTime = (
-      seconds: number,
-      lang: UI_T_LangValue = 'ru_RU'
-    ): string => {
-      const units = {
-        en_US: { s: 's', m: 'm', h: 'h' },
-        ru_RU: { s: 'с', m: 'м', h: 'ч' },
-        hy_AM: { s: 'վ', m: 'ր', h: 'ժ' },
-        be_BY: { s: 'с', m: 'хв', h: 'г' },
-        kk_KZ: { s: 'сек', m: 'мин', h: 'сағ' },
-        zh_CHS: { s: '秒', m: '分', h: '时' },
-        BROWSER: { s: 's', m: 'm', h: 'h' },
-      }
-
-      const unit = units[lang] || units.en_US
-
-      if (seconds < 60) {
-        return `${seconds}${unit.s}`
-      }
-
-      const hours = Math.floor(seconds / 3600)
-      const minutes = Math.floor((seconds % 3600) / 60)
-      const secs = seconds % 60
-
-      let result = ''
-
-      if (hours > 0) {
-        result += `${hours}${unit.h} `
-      }
-
-      if (minutes > 0) {
-        result += `${minutes}${unit.m} `
-      }
-
-      if (secs > 0) {
-        result += `${secs}${unit.s}`
-      }
-
-      return result.trim()
-    }
-
-    return self
-  }.call({})
-
-  return {
-    provide: {
-      time,
-    },
-  }
-})
+import { defineNuxtPlugin } from '#app'
+import type { UI_T_LangValue } from '~/lib/models/types'
+export default defineNuxtPlugin(() => {
+  const time = function (): any {
+    const self: any = {}
+    self.millisecondsToHour = function (ms: number): number {
+      return ~~(ms / 1000 / 60 / 60 / 24)
+    }
+    self.formatTime = (
+      seconds: number,
+      lang: UI_T_LangValue = 'ru_RU'
+    ): string => {
+      const units = {
+        en_US: { s: 's', m: 'm', h: 'h' },
+        ru_RU: { s: 'с', m: 'м', h: 'ч' },
+        hy_AM: { s: 'վ', m: 'ր', h: 'ժ' },
+        be_BY: { s: 'с', m: 'хв', h: 'г' },
+        kk_KZ: { s: 'сек', m: 'мин', h: 'сағ' },
+        zh_CHS: { s: '秒', m: '分', h: '时' },
+        BROWSER: { s: 's', m: 'm', h: 'h' },
+      }
+
+      const unit = units[lang] || units.en_US
+
+      if (seconds < 60) {
+        return `${seconds}${unit.s}`
+      }
+
+      const hours = Math.floor(seconds / 3600)
+      const minutes = Math.floor((seconds % 3600) / 60)
+      const secs = seconds % 60
+
+      let result = ''
+
+      if (hours > 0) {
+        result += `${hours}${unit.h} `
+      }
+
+      if (minutes > 0) {
+        result += `${minutes}${unit.m} `
+      }
+
+      if (secs > 0) {
+        result += `${secs}${unit.s}`
+      }
+
+      return result.trim()
+    }
+
+    return self
+  }.call({})
+
+  return {
+    provide: {
+      time,
+    },
+  }
+})