bfg-common 1.5.956 → 1.5.959

package/assets/localization/local_en.json

@@ -2262,7 +2262,7 @@
     "embedded": "Embedded",
     "offUser": "Off User",
     "addingStorage": "Adding Storage",
-    "historyTestimony": "History of testimony",
+    "historyTestimony": "History of Testimony",
     "alarmName": "Alarm Name",
     "objectType": "Object type",
     "lastModified": "Last modified",

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

@@ -49,47 +49,48 @@
             <common-pages-backups-modals-restore-name
               v-model="model"
               :show="selectedStep.id === dynamicSteps.selectName"
-              :message-error-field="props.alertMessages[dynamicSteps.selectName][0]"
+              :message-error-field="
+                props.alertMessages[dynamicSteps.selectName][0]
+              "
               :is-loading="isLoading"
             />
           </div>
         </template>
       </ui-wizard-block>
 
-      <ui-wizard-block
-        v-if="selectedStep.id === dynamicSteps.selectStorage"
-        :sub-title-height="height2"
-      >
-        <template #subTitle>
-          <div ref="subTitleBlock2">
-            <ui-alert
-              v-if="props.alertMessages[dynamicSteps.selectStorage].length"
-              :messages="props.alertMessages[dynamicSteps.selectStorage]"
-              test-id="backup-restore-datastores-error-alert"
-              type="error"
-              size="md"
-              class="mb-4"
-            />
-
-            <div class="subtitle-block flex-row w-full items-start">
-              <ui-wizard-subtitle :sub-title="selectedStep.subTitle" />
+      <div v-show="selectedStep.id === dynamicSteps.selectStorage">
+        <ui-wizard-block :sub-title-height="height2">
+          <template #subTitle>
+            <div ref="subTitleBlock2">
+              <ui-alert
+                v-if="props.alertMessages[dynamicSteps.selectStorage].length"
+                :messages="props.alertMessages[dynamicSteps.selectStorage]"
+                test-id="backup-restore-datastores-error-alert"
+                type="error"
+                size="md"
+                class="mb-4"
+              />
+
+              <div class="subtitle-block flex-row w-full items-start">
+                <ui-wizard-subtitle :sub-title="selectedStep.subTitle" />
+              </div>
             </div>
-          </div>
-        </template>
-        <template #content>
-          <div class="restore-select-storage mb-4">
-            <common-vm-actions-common-select-storage
-              :storage-submit="props.storageSubmit"
-              :is-datastore-loading="props.datastoreLoading"
-              :get-datastore-table-func="getDatastoreTableFunc"
-              :datastore="props.datastore"
-              :storage="props.selectedStorage"
-              hide-alert
-              @change-storage="onChangeStorage"
-            />
-          </div>
-        </template>
-      </ui-wizard-block>
+          </template>
+          <template #content>
+            <div class="restore-select-storage mb-4">
+              <common-vm-actions-common-select-storage
+                :storage-submit="props.storageSubmit"
+                :is-datastore-loading="props.datastoreLoading"
+                :get-datastore-table-func="getDatastoreTableFunc"
+                :datastore="props.datastore"
+                :storage="model.pvm.storage"
+                hide-alert
+                @change-storage="onChangeStorage"
+              />
+            </div>
+          </template>
+        </ui-wizard-block>
+      </div>
 
       <ui-wizard-block
         v-if="selectedStep.id === dynamicSteps.selectDisks"
@@ -228,7 +229,6 @@ const props = defineProps<{
   alertMessages: string[][]
   readyCompleteData: UI_I_TableInfoItem[]
   storageSubmit: null | Function
-  selectedStorage: UI_I_DatastoreTableItem | null
   datastore: UI_I_DatastoreTableItem[]
   datastoreLoading: boolean
   networks: UI_I_NetworkTableItem[]

package/components/common/pages/backups/modals/restore/Restore.vue

@@ -11,7 +11,6 @@
     :datastore-loading="props.datastoreLoading"
     :networks="props.networks"
     :ready-complete-data="readyToCompleteInfo"
-    :selected-storage="selectedStorage"
     :is-loading="isLoading"
     :errors="errors"
     @change-storage="onChangeStorage"
@@ -242,12 +241,10 @@ const getDatastoreTableFunc = async (): Promise<void> => {
 }
 
 const selectedStorageName = ref<string>('')
-const selectedStorage = ref<UI_I_DatastoreTableItem | null>(null)
 const onChangeStorage = (storage: UI_I_DatastoreTableItem | null): void => {
   if (!storage) return
 
   selectedStorageName.value = storage.name
-  selectedStorage.value = storage
   model.value.pvm.storage = {
     id: storage.id,
     folder: model.value.pvm.storage.folder || '',

package/components/common/pages/backups/modals/restore/disks/tableView/new/Table.vue

@@ -105,9 +105,14 @@ watch(
 const onSelectRow = (value: UI_I_DataTableBody[]): void => {
   const allNotDisks =
     model.value.filter((row) => row.device_type !== 'disk') || []
+
+  const selectedSources = value.map(
+    (item) => item.data[0]?.data?.data?.source || ''
+  )
+
   model.value = [
     ...allNotDisks,
-    ...value.map((item) => item.data[0]?.data?.data),
+    ...(props.disks.filter((item) => selectedSources.includes(item.source)) || []),
   ]
 }
 </script>

package/components/common/pages/hardwareHealth/HardwareHealthNew.vue

@@ -182,7 +182,7 @@ const statusCounts = computed<UI_I_IndicatorAlerts>(() => {
 
 <style scoped lang="scss">
 .hardware-health {
-  padding-top: 6px;
+  padding-top: 16px;
 
   &-title {
     color: var(--title-form-first-color);
@@ -191,6 +191,10 @@ const statusCounts = computed<UI_I_IndicatorAlerts>(() => {
   .tab-list {
     overflow-x: auto;
     min-height: max-content;
+
+    &::-webkit-scrollbar {
+      height: 0;
+    }
   }
 
   :deep(.ui-alert-item.lg) {

package/components/common/pages/hardwareHealth/indicators/Indicators.vue

@@ -65,13 +65,21 @@ const props = defineProps<{
 const localization = computed<UI_I_Localization>(() => useLocal())
 </script>
 
+<style>
+:root {
+  --chip-line-bg: #e9ebeda3;
+}
+:root.dark-theme {
+  --chip-line-bg: #e9ebed1f;
+}
+</style>
 <style scoped lang="scss">
 .chip-item {
   &:not(:first-child)::before {
     content: '';
     width: 1px;
     height: 20px;
-    background: #e9ebeda3;
+    background: var(--chip-line-bg);
     margin-right: 16px;
   }
 

package/components/common/pages/hardwareHealth/tableView/new/New.vue

@@ -8,9 +8,15 @@
       :total-items="props.totalItems"
       :texts="texts"
       :skeleton="tableSkeleton"
-      :size="tableSize"
+      size="md"
       test-id="hardware-health-table"
     >
+      <template #skeleton-header>
+        <div class="flex gap-4 justify-between items-center">
+          <ui-skeleton-item width="80" height="20" />
+          <ui-skeleton-item width="112" height="36" border-radius="8" />
+        </div>
+      </template>
       <template v-if="props.tableMode !== 'history-testimony'" #insteadOfTitleActions>
         <ui-button
           test-id="vm-migrate-configure-button"
@@ -37,7 +43,7 @@
                 item.data.statusText
               }}</span>
           </ui-chip>
-          <div v-if="item.data.warning" class="ml-2">
+          <div v-if="item.data.warning" class="ml-2 hardware-health-tooltip">
             <common-pages-hardware-health-tooltip
               :id="row"
               :text="item.data.warning"
@@ -45,7 +51,7 @@
             />
           </div>
         </div>
-        <div v-else class="flex gap-1">
+        <div v-else class="flex gap-1 items-center">
           <span :class="item.data.iconClassName" />
           <span class="text-ellipsis">{{ item.text }}</span>
         </div>
@@ -98,30 +104,38 @@ const table: any = {
   'history-testimony': historyTestimonyTable,
 }
 
-const tableSize = computed<string>(() => (props.loading ? 'sm' : 'md'))
-
-const tableTitle = ref<string>(localization.value.common.sensors)
+const tableTitle = computed<string>(() => {
+  switch (props.tableMode) {
+    case 'sensor':
+      return localization.value.common.sensors
+    case 'history-testimony':
+      return localization.value.common.sensors
+    case 'storage-sensor':
+      return localization.value.common.storageSensors
+    case 'alert-warning':
+      return localization.value.common.alertsAndWarnings
+    case 'system-log':
+      return localization.value.common.systemEvents
+    default:
+      return ''
+  }
+})
 watch(() => props.tableMode, (newValue) => {
   switch (newValue) {
     case 'sensor':
       tableSkeleton.value.columnsCount = 6
-      tableTitle.value = localization.value.common.sensors
       break
     case 'history-testimony':
       tableSkeleton.value.columnsCount = 4
-      tableTitle.value = localization.value.common.sensors
       break
     case 'storage-sensor':
       tableSkeleton.value.columnsCount = 3
-      tableTitle.value = localization.value.common.storageSensors
       break
     case 'alert-warning':
       tableSkeleton.value.columnsCount = 3
-      tableTitle.value = localization.value.common.alertsAndWarnings
       break
     case 'system-log':
       tableSkeleton.value.columnsCount = 2
-      tableTitle.value = localization.value.common.systemEvents
       break
   }
 })
@@ -142,7 +156,7 @@ const texts = computed<UI_I_TableTexts>(() => ({
 }))
 
 const tableSkeleton = ref<UI_I_DataTableSkeleton>({
-  withoutPagination: true,
+  withoutPagination: false,
   columnsCount: 6
 })
 
@@ -150,7 +164,7 @@ const data = computed<UI_I_DataTable>(() => ({
   id: 'hardware-health-table',
   header: tableHeadItems.value,
   body: tableBodyItems.value,
-  title: `${tableTitle.value}(${props.totalItems})`
+  title: `${tableTitle.value} (${props.totalItems})`
 }))
 
 const tableHeadItems = computed<UI_I_DataTableHeader[]>(() =>
@@ -159,16 +173,16 @@ const tableHeadItems = computed<UI_I_DataTableHeader[]>(() =>
 
 const tableBodyItems = ref<UI_I_DataTableBody[]>([])
 watch(
-  () => props.tableData,
-  (newValue) => {
+  [() => props.tableData, localization],
+  ([newValue]) => {
     if (!newValue?.length) {
       tableBodyItems.value = []
       return
     }
 
     tableBodyItems.value = table[props.tableMode].getBodyDataFunc(
-      newValue,
-      localization.value
+        newValue,
+        localization.value
     )
   },
   { deep: true, immediate: true }
@@ -182,8 +196,35 @@ const onUpdateTable = () => {
 
 <style lang="scss" scoped>
 .hardware-health-table {
+  .hardware-health-tooltip {
+    margin-top: 2px;
+  }
+  :deep(.table-title-actions-container) {
+    grid-column-gap: 16px;
+  }
   :deep(.table-container) {
     grid-template-rows: auto 1fr;
   }
+  :deep(.row-size-md .ui-main-no-items-found) {
+    top: 50%;
+  }
+  :deep(.data-table-skeleton) {
+    height: 100%;
+    overflow: hidden;
+  }
+  :deep(.body.with-actions) {
+    height: calc(100% - 86px);
+  }
+  :deep(.body-row > .body-col:last-child) {
+    display: none !important;
+  }
+  :deep(.default-header > div:last-child) {
+    width: 112px !important;
+    height: 36px !important;
+  }
+  :deep(.default-header > div:first-child .skeleton-item) {
+    width: 80px !important;
+    height: 20px !important;
+  }
 }
 </style>

package/components/common/pages/hardwareHealth/tableView/new/lib/config/alertWarningTable.ts

@@ -46,7 +46,12 @@ export const getHeaderDataFunc = (
   }
 ]
 export const options: UI_I_DataTableOptions = {
-  perPageOptions: [{ text: '10', value: 100, default: true }],
+  perPageOptions: [
+    { text: '10', value: 10, default: true },
+    { text: '25', value: 25 },
+    { text: '50', value: 50 },
+    { text: '100', value: 100 },
+  ],
   isSelectable: false,
   showPagination: true,
   showPageInfo: true,
@@ -62,8 +67,6 @@ export const getBodyDataFunc = (
   bodyData: UI_I_HardwareHealthSensors[],
   localization: UI_I_Localization
 ): UI_I_DataTableBody[] => {
-  const { $formattedDatetime }: any = useNuxtApp()
-
   return bodyData.map((sensor, _index: number) => {
     return {
       row: sensor.id as number,

package/components/common/pages/hardwareHealth/tableView/new/lib/config/historyTestimonyTable.ts

@@ -57,7 +57,12 @@ export const getHeaderDataFunc = (
   },
 ]
 export const options: UI_I_DataTableOptions = {
-  perPageOptions: [{ text: '10', value: 100, default: true }],
+  perPageOptions: [
+    { text: '10', value: 10, default: true },
+    { text: '25', value: 25 },
+    { text: '50', value: 50 },
+    { text: '100', value: 100 },
+  ],
   isSelectable: false,
   showPagination: true,
   showPageInfo: true,
@@ -73,8 +78,6 @@ export const getBodyDataFunc = (
   bodyData: UI_I_HardwareHealthSensors[],
   localization: UI_I_Localization
 ): UI_I_DataTableBody[] => {
-  const { $formattedDatetime }: any = useNuxtApp()
-
   return bodyData.map((sensor, _index: number) => {
 
     return {

package/components/common/pages/hardwareHealth/tableView/new/lib/config/sensorTable.ts

@@ -41,7 +41,7 @@ export const getHeaderDataFunc = (
     text: localization.common.reading,
     isSortable: true,
     sort: 'asc',
-    width: '128px',
+    width: '144px',
     show: true,
     filter: true,
   },
@@ -51,7 +51,7 @@ export const getHeaderDataFunc = (
     text: localization.common.categories,
     isSortable: true,
     sort: 'asc',
-    width: '144px',
+    width: '160px',
     show: true,
     filter: true,
   },
@@ -77,7 +77,12 @@ export const getHeaderDataFunc = (
   },
 ]
 export const options: UI_I_DataTableOptions = {
-  perPageOptions: [{ text: '10', value: 100, default: true }],
+  perPageOptions: [
+    { text: '10', value: 10, default: true },
+    { text: '25', value: 25 },
+    { text: '50', value: 50 },
+    { text: '100', value: 100 },
+  ],
   isSelectable: false,
   showPagination: true,
   showPageInfo: true,

package/components/common/pages/hardwareHealth/tableView/new/lib/config/storageSensorsTable.ts

@@ -41,7 +41,12 @@ export const getHeaderDataFunc = (
   }
 ]
 export const options: UI_I_DataTableOptions = {
-  perPageOptions: [{ text: '10', value: 100, default: true }],
+  perPageOptions: [
+    { text: '10', value: 10, default: true },
+    { text: '25', value: 25 },
+    { text: '50', value: 50 },
+    { text: '100', value: 100 },
+  ],
   isSelectable: false,
   showPagination: true,
   showPageInfo: true,

package/components/common/pages/hardwareHealth/tableView/new/lib/config/systemLogTable.ts

@@ -31,7 +31,12 @@ export const getHeaderDataFunc = (
   }
 ]
 export const options: UI_I_DataTableOptions = {
-  perPageOptions: [{ text: '10', value: 100, default: true }],
+  perPageOptions: [
+    { text: '10', value: 10, default: true },
+    { text: '25', value: 25 },
+    { text: '50', value: 50 },
+    { text: '100', value: 100 },
+  ],
   isSelectable: false,
   showPagination: true,
   showPageInfo: true,

package/components/common/pages/hardwareHealth/tooltip/Tooltip.vue

@@ -11,6 +11,7 @@
       info="warning"
       type="click"
       width="320"
+      :margin-between-trigger="8"
       @open="isShowTooltip = true"
       @close="isShowTooltip = false"
     />
@@ -38,9 +39,23 @@ const isShowTooltip = ref<boolean>(false)
 
 <style scoped lang="scss">
 .tooltip-info {
+  :deep(.tooltip) {
+    min-width: 320px;
+  }
+  :deep(.tooltip.popped) {
+    min-width: max-content;
+  }
+
+  :deep(.tooltip:not(.variant-2).md .tooltip-info-header span) {
+    font-size: 14px;
+  }
+  :deep(.tooltip:not(.variant-2).md .tooltip-info-body span) {
+    font-size: 13px;
+    font-weight: 400;
+  }
   :deep(.tooltip-info-close) {
     position: static;
-    margin-left: 25px;
+    margin-left: auto;
   }
 
   &__icon {

package/components/common/vm/actions/common/select/storage/Old.vue

@@ -63,7 +63,6 @@ const props = withDefaults(
     datastore: UI_I_DatastoreTableItem[]
     isDatastoreLoading: boolean
     errors: string[]
-    selectedStorage: UI_I_DatastoreTableItem | null
     compatibility: [UI_T_CompatibilityStatus, string]
     hideCompatibility?: boolean
   }>(),

package/components/common/vm/actions/common/select/storage/Storage.vue

@@ -6,7 +6,6 @@
     :datastore="props.datastore"
     :is-datastore-loading="props.isDatastoreLoading"
     :errors="errors"
-    :selected-storage="selectedStorage"
     :hide-compatibility="props.hideCompatibility"
     :hide-alert="props.hideAlert"
     :is-in-wizard="props.isInWizard"
@@ -100,8 +99,8 @@ const setStorageFromProps = (): void => {
 }
 watch(
   () => props.storage,
-  () => {
-    setStorageFromProps()
+  (newValue, oldValue) => {
+    if (newValue?.id !== oldValue?.id) setStorageFromProps()
   },
   { immediate: true }
 )

package/components/common/vm/actions/common/select/storage/new/New.vue

@@ -89,7 +89,6 @@ const props = withDefaults(
     datastore: UI_I_DatastoreTableItem[]
     isDatastoreLoading: boolean
     errors: string[]
-    selectedStorage: UI_I_DatastoreTableItem | null
     compatibility: [UI_T_CompatibilityStatus, string]
     hideCompatibility?: boolean
     hideAlert?: boolean
@@ -146,15 +145,19 @@ watch(
   // { deep: true }
 )
 
-watch(selectedRow, (newValue) => {
-  if (newValue && props.datastore.length) {
-    data.value.body = tableBodyFunc(
-      props.datastore,
-      localization.value,
-      newValue
-    )
-  }
-})
+watch(
+  selectedRow,
+  (newValue) => {
+    if (newValue && props.datastore.length) {
+      data.value.body = tableBodyFunc(
+        props.datastore,
+        localization.value,
+        newValue
+      )
+    }
+  },
+  { once: true }
+)
 
 const onSelectRow = (selectedData: UI_I_DataTable): void => {
   const selectedId = selectedData[0]?.data[0]?.data.id

package/package.json

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