bfg-common 1.5.892 → 1.5.893

package/components/common/monitor/advanced/tools/chartOptionsModal/counters/table/tableOld/lib/config/tableConfig.ts

@@ -62,25 +62,25 @@ export const bodyItems = (
       {
         key: 'col1',
         text: counters[countersTableKey[0]],
-        id: key,
+        id: counters.id ?? key,
         testId: `counters-item-${countersTableKey[0]}-${key}`,
       },
       {
         key: 'col2',
         text: counters[countersTableKey[1]],
-        id: key,
+        id: counters.id ?? key,
         testId: `counters-item-${countersTableKey[1]}-${key}`,
       },
       {
         key: 'col3',
         text: counters[countersTableKey[2]],
-        id: key,
+        id: counters.id ?? key,
         testId: `counters-item-${countersTableKey[2]}-${key}`,
       },
       {
         key: 'col4',
         text: counters[countersTableKey[3]],
-        id: key,
+        id: counters.id ?? key,
         testId: `counters-item-${countersTableKey[3]}-${key}`,
       },
     ])

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

@@ -1,7 +1,10 @@
 <template>
   <common-pages-hardware-health-new
     v-if="isNewView"
-    :data="props.data"
+    v-model:active-tab="activeTab"
+    v-model:selected-graph-view="selectedGraphView"
+    v-model:main-selected-row="selectedRow"
+    :data="hardwareHealth"
     :history-testimony-power="props.historyTestimonyPower"
     :history-testimony-temperature="props.historyTestimonyTemperature"
     :loading="props.loading"
@@ -13,13 +16,19 @@
     :language="props.language"
     :valid-date-end="props.validDateEnd"
     :format-date="props.formatDate"
+    :selected-host-name="props.selectedHostName"
+    :hardware-health-tabs="tabItems"
+    :generated-alert-text="generateAlertTextWithLink"
     @update-history-testimony-tools="
       emits('update-history-testimony-tools', $event)
     "
   />
   <common-pages-hardware-health-old
     v-else
-    :data="props.data"
+    v-model:active-tab="activeTab"
+    v-model:selected-graph-view="selectedGraphView"
+    v-model:main-selected-row="selectedRow"
+    :data="hardwareHealth"
     :history-testimony-power="props.historyTestimonyPower"
     :history-testimony-temperature="props.historyTestimonyTemperature"
     :loading="props.loading"
@@ -31,6 +40,8 @@
     :language="props.language"
     :valid-date-end="props.validDateEnd"
     :format-date="props.formatDate"
+    :hardware-health-tabs="hardwareHealthTabs"
+    :generated-alert-text="generateAlertTextWithLink"
     @update-history-testimony-tools="
       emits('update-history-testimony-tools', $event)
     "
@@ -39,10 +50,17 @@
 
 <script lang="ts" setup>
 import type { I_SeriesLine } from '~/node_modules/bfg-nuxt-3-graph/graph/lib/models/interfaces'
+import type { UI_I_TabItem } from '~/node_modules/bfg-uikit/components/ui/tabs/models/interfaces'
+import type { UI_I_Localization } from '~/lib/models/interfaces'
 import type { UI_I_HardwareHealthHistoryTestimonyTools } from '~/components/common/pages/hardwareHealth/historyTestimony/lib/models/interfaces'
-import type {
-  UI_I_HardwareHealthSensors
-} from "~/components/common/pages/hardwareHealth/tableView/old/lib/models/interfaces";
+import type { UI_I_HardwareHealthSensors } from '~/components/common/pages/hardwareHealth/tableView/old/lib/models/interfaces'
+import type { UI_T_HardwareHealthTabMode } from '~/components/common/pages/hardwareHealth/lib/models/types'
+import type { UI_I_CollapseNavItem } from '~/components/atoms/collapse/lib/models/interfaces'
+import type { UI_I_StorageSensorsAlert } from '~/components/common/pages/hardwareHealth/lib/models/interfaces'
+import {
+  hardwareHealthTabsFunc,
+  hardwareHealthTabsNewFunc,
+} from '~/components/common/pages/hardwareHealth/lib/config/tabsPannel'
 
 const props = defineProps<{
   data: UI_I_HardwareHealthSensors[]
@@ -57,6 +75,7 @@ const props = defineProps<{
   language: string
   validDateEnd: number
   formatDate: string
+  selectedHostName: string
 }>()
 
 const emits = defineEmits<{
@@ -69,6 +88,43 @@ const emits = defineEmits<{
 const { $store }: any = useNuxtApp()
 
 const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const activeTab = ref<UI_T_HardwareHealthTabMode>('sensor')
+const selectedGraphView = ref<string>('all')
+const selectedRow = ref<number[]>([])
+
+const hardwareHealthTabs = computed<UI_I_CollapseNavItem[]>(() =>
+  hardwareHealthTabsFunc(localization.value)
+)
+const tabItems = computed<UI_I_TabItem[]>(() =>
+  hardwareHealthTabsNewFunc(localization.value)
+)
+
+const hardwareHealth = computed<UI_I_HardwareHealthSensors[]>(
+  () => props.data || []
+)
+
+const generateAlertTextWithLink = computed<UI_I_StorageSensorsAlert>(() => {
+  const { storageSensorsAlert, thisKbArticle } = localization.value.common
+
+  const [before, after] = storageSensorsAlert.split('{ link }')
+
+  return {
+    before,
+    after,
+    link: 'javascript:void(0)',
+    linkText: thisKbArticle,
+  }
+})
+
+onMounted(() => {
+  $store.dispatch('main/A_CONTINUE_GLOBAL_REFRESH', 'hardwareHealth')
+})
+onUnmounted(() => {
+  $store.dispatch('main/A_PAUSE_GLOBAL_REFRESH', 'hardwareHealth')
+})
 </script>
 
 <style lang="scss" scoped></style>

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

@@ -1,6 +1,6 @@
 <template>
   <div class="hardware-health flex flex-col h-full overflow-hidden">
-    <div class="flex flex-wrap justify-between gap-6 mb-5">
+    <div class="flex flex-wrap justify-between gap-6 mb-5 px-[6px]">
       <h3
         v-if="!props.loading"
         class="hardware-health-title text-[18px] font-[500]"
@@ -10,61 +10,180 @@
       <ui-skeleton-item v-else width="160" height="22" />
 
       <common-pages-hardware-health-indicators
-        :data="props.data"
+        :status-counts="statusCounts"
         :loading="props.loading"
       />
     </div>
 
-    <div class="tab-list">
+    <div class="tab-list px-[6px]">
       <ui-tabs
         v-if="!props.loading"
         v-model="activeTab"
-        :tabs="tabItems"
+        :tabs="props.hardwareHealthTabs"
         type="outline"
         test-id="hardware-health-tab-list"
       />
       <ui-skeleton-item v-else width="640" height="36" border-radius="8" />
     </div>
 
-    <div class="mt-4 h-full overflow-hidden">
-      <common-pages-hardware-health-table-view-new
-        :table-data="props.data || []"
-        :total-items="props.data?.length || 0"
-        :total-pages="1"
+    <div v-if="activeTab === 'storage-sensor'" class="px-[6px]">
+      <ui-alert
+        v-if="!props.loading"
+        :messages="['content text']"
+        type="warning"
+        test-id="select-storage-sensor-alert"
+        size="lg"
+        hide-close-button
+      >
+        <template #content>
+          <p class="alert-text text-[14px]">
+            {{ props.generatedAlertText.before }}
+            <a
+              :href="props.generatedAlertText.link"
+              data-id="general-alert-text-link"
+              class="alert-text-link"
+            >
+              {{ props.generatedAlertText.linkText }}
+            </a>
+            {{ props.generatedAlertText.after }}
+          </p>
+        </template>
+      </ui-alert>
+
+      <div v-else class="alert-skeleton p-4 mt-4">
+        <ui-skeleton-item width="960" height="20" />
+      </div>
+    </div>
+
+    <div
+      :class="[
+        'h-full overflow-hidden',
+        { 'history-testimony': activeTab === 'history-testimony' },
+      ]"
+    >
+      <common-pages-hardware-health-history-testimony-graph
+        v-if="activeTab === 'history-testimony'"
+        v-model:selected-view="selectedGraphView"
+        :power-data="props.historyTestimonyPower"
+        :power-loading="props.loadingPowerData"
+        :valid-date-end="props.validDateEnd"
+        :format-date="props.formatDate"
         :loading="props.loading"
-        :selected-graph-view="selectedGraphView"
-        :table-mode="activeTab"
+        :is-dark-mode="props.isDarkMode"
+        :formatted-datetime="props.formattedDatetime"
+        :language="props.language"
+        :get-date-format="props.getDateFormat"
+        :temperature-loading="props.loadingTemperatureData"
+        :temperature-data="props.historyTestimonyTemperature"
+        :main-selected-row="mainSelectedRow"
+        :counters-table-data="props.data"
+        :selected-host-name="props.selectedHostName"
+        @update-tools="emits('update-history-testimony-tools', $event)"
       />
+
+      <div class="table-content pt-4 h-full overflow-hidden px-[6px]">
+        <common-pages-hardware-health-table-view-new
+          :table-data="tableData || []"
+          :total-items="tableData?.length || 0"
+          :total-pages="1"
+          :loading="props.loading"
+          :selected-graph-view="selectedGraphView"
+          :table-mode="activeTab"
+        />
+      </div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import type { UI_I_TabItem } from '~/node_modules/bfg-uikit/components/ui/tabs/models/interfaces'
+import type { I_SeriesLine } from '~/node_modules/bfg-nuxt-3-graph/graph/lib/models/interfaces'
 import type { UI_I_Localization } from '~/lib/models/interfaces'
 import type { UI_T_HardwareHealthTabMode } from '~/components/common/pages/hardwareHealth/lib/models/types'
-import { hardwareHealthTabsNewFunc } from '~/components/common/pages/hardwareHealth/lib/config/tabsPannel'
-import type {
-  UI_I_HardwareHealthSensors
-} from "~/components/common/pages/hardwareHealth/tableView/old/lib/models/interfaces";
+import type { UI_I_HardwareHealthSensors } from '~/components/common/pages/hardwareHealth/tableView/old/lib/models/interfaces'
+import type { UI_I_CollapseNavItem } from '~/components/atoms/collapse/lib/models/interfaces'
+import type { UI_I_StorageSensorsAlert } from '~/components/common/pages/hardwareHealth/lib/models/interfaces'
+import type { UI_I_HardwareHealthHistoryTestimonyTools } from '~/components/common/pages/hardwareHealth/historyTestimony/lib/models/interfaces'
+import type { UI_I_IndicatorAlerts } from '~/components/common/pages/hardwareHealth/indicators/lib/models/interfaces'
+
+const activeTab = defineModel<UI_T_HardwareHealthTabMode>('activeTab', {
+  required: true,
+})
+const selectedGraphView = defineModel<string>('selectedGraphView', {
+  required: true,
+})
+const mainSelectedRow = defineModel<number[]>('mainSelectedRow', {
+  required: true,
+})
 
 const props = defineProps<{
   data: UI_I_HardwareHealthSensors[]
   loading: boolean
+  historyTestimonyPower: I_SeriesLine | null
+  historyTestimonyTemperature: I_SeriesLine | null
+  loadingPowerData: boolean
+  loadingTemperatureData: boolean
+  validDateEnd: number
+  formatDate: string
+  formattedDatetime: any
+  getDateFormat: any
+  language: string
+  isDarkMode: boolean
+  selectedHostName: string
+
+  hardwareHealthTabs: UI_I_CollapseNavItem[]
+  generatedAlertText: UI_I_StorageSensorsAlert
+}>()
+const emits = defineEmits<{
+  (
+    event: 'update-history-testimony-tools',
+    value: UI_I_HardwareHealthHistoryTestimonyTools
+  ): void
 }>()
 
 const localization = computed<UI_I_Localization>(() => useLocal())
 
-const selectedGraphView = ref<string>('all')
-const activeTab = ref<UI_T_HardwareHealthTabMode>('sensor')
-const tabItems = computed<UI_I_TabItem[]>(() =>
-  hardwareHealthTabsNewFunc(localization.value)
-)
+const tableData = computed<UI_I_HardwareHealthSensors[]>(() => {
+  if (
+    activeTab.value === 'storage-sensor' ||
+    activeTab.value === 'system-log'
+  ) {
+    return []
+  }
+  if (activeTab.value === 'alert-warning') {
+    return props.data.filter((sensor: UI_I_HardwareHealthSensors) =>
+      [2, 3].includes(sensor.status)
+    )
+  }
+  if (activeTab.value === 'history-testimony') {
+    return props.data.filter(
+      (sensor: UI_I_HardwareHealthSensors) =>
+        sensor.category?.toLowerCase() !== 'disk health'
+    )
+  }
+  return props.data
+})
+
+const statusCounts = computed<UI_I_IndicatorAlerts>(() => {
+  let alertStatus = 0
+  let warningStatus = 0
+  let length = props.data.length
+
+  props.data.forEach((item) => {
+    if (item.status === 3) alertStatus++
+    if (item.status === 2) warningStatus++
+  })
+
+  return {
+    alertStatus,
+    warningStatus,
+    length,
+  }
+})
 </script>
 
 <style scoped lang="scss">
 .hardware-health {
-  padding: 6px 6px 16px;
+  padding-top: 6px;
 
   &-title {
     color: var(--title-form-first-color);
@@ -74,5 +193,42 @@ const tabItems = computed<UI_I_TabItem[]>(() =>
     overflow-x: auto;
     min-height: max-content;
   }
+
+  :deep(.ui-alert-item.lg) {
+    padding: 16px;
+    margin-top: 16px;
+  }
+
+  .alert-text {
+    color: var(--title-form-first-color);
+  }
+
+  .alert-text-link {
+    color: var(--btn-primary-fill-bg-color);
+    text-decoration: none;
+
+    &:hover {
+      color: var(--btn-primary-fill-hover-bg-color);
+    }
+  }
+
+  .alert-skeleton {
+    background: #ffffff;
+    box-shadow: 0 1px 4px 0 #00000014;
+    border-radius: 8px;
+  }
+}
+
+.history-testimony {
+  overflow-y: auto;
+  margin-top: 24px;
+
+  :deep(.graph-containers) {
+    padding-bottom: 16px;
+  }
+
+  .table-content {
+    margin-top: 0;
+  }
 }
 </style>

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

@@ -8,7 +8,7 @@
 
     <atoms-tabs
       v-model="activeTab"
-      :items="hardwareHealthTabs"
+      :items="props.hardwareHealthTabs"
       test-id="hardware-health-tabs"
       size="small"
       class="hardware-health__tabs"
@@ -23,14 +23,14 @@
     >
       <template #default="">
         <p>
-          {{ generateAlertTextWithLink.before }}
+          {{ props.generatedAlertText.before }}
           <a
-            :href="generateAlertTextWithLink.link"
+            :href="props.generatedAlertText.link"
             data-id="general-alert-text-link"
           >
-            {{ generateAlertTextWithLink.linkText }}
+            {{ props.generatedAlertText.linkText }}
           </a>
-          {{ generateAlertTextWithLink.after }}
+          {{ props.generatedAlertText.after }}
         </p>
       </template>
     </atoms-alert>
@@ -43,25 +43,25 @@
         v-model:selected-view="selectedGraphView"
         :power-data="props.historyTestimonyPower"
         :temperature-data="props.historyTestimonyTemperature"
-        :counters-table-data="hardwareHealth"
+        :counters-table-data="props.data"
         :language="props.language"
         :power-loading="props.loadingPowerData"
         :temperature-loading="props.loadingTemperatureData"
         :formatted-datetime="props.formattedDatetime"
         :is-dark-mode="props.isDarkMode"
         :get-date-format="props.getDateFormat"
-        :main-selected-row="selectedRow"
+        :main-selected-row="mainSelectedRow"
         :valid-date-end="props.validDateEnd"
         :format-date="props.formatDate"
-        @update-tools="onUpdateHistoryTestimonyTools"
+        @update-tools="emits('update-history-testimony-tools', $event)"
       />
 
       <common-pages-hardware-health-table-view-old
         :key="uniqueKey"
-        v-model:selected-row="selectedRow"
+        v-model:selected-row="mainSelectedRow"
         :selected-graph-view="selectedGraphView"
-        :data-table="hardwareHealth"
-        :total-items="hardwareHealth.length"
+        :data-table="props.data"
+        :total-items="props.data.length"
         :total-pages="1"
         :table-mode="activeTab"
         :loading="props.loading"
@@ -73,12 +73,21 @@
 <script lang="ts" setup>
 import type { I_SeriesLine } from '~/node_modules/bfg-nuxt-3-graph/graph/lib/models/interfaces'
 import type { UI_I_Localization } from '~/lib/models/interfaces'
-import type { UI_I_HardwareHealthSensors } from '~/components/common/pages/hardwareHealth/tableView/lib/models/interfaces'
+import type { UI_I_HardwareHealthSensors } from '~/components/common/pages/hardwareHealth/tableView/old/lib/models/interfaces'
 import type { UI_I_CollapseNavItem } from '~/components/atoms/collapse/lib/models/interfaces'
 import type { UI_I_StorageSensorsAlert } from '~/components/common/pages/hardwareHealth/lib/models/interfaces'
 import type { UI_T_HardwareHealthTabMode } from '~/components/common/pages/hardwareHealth/lib/models/types'
 import type { UI_I_HardwareHealthHistoryTestimonyTools } from '~/components/common/pages/hardwareHealth/historyTestimony/lib/models/interfaces'
-import { hardwareHealthTabsFunc } from '~/components/common/pages/hardwareHealth/lib/config/tabsPannel'
+
+const activeTab = defineModel<UI_T_HardwareHealthTabMode>('activeTab', {
+  required: true,
+})
+const selectedGraphView = defineModel<string>('selectedGraphView', {
+  required: true,
+})
+const mainSelectedRow = defineModel<number[]>('mainSelectedRow', {
+  required: true,
+})
 
 const props = defineProps<{
   data: UI_I_HardwareHealthSensors[]
@@ -93,6 +102,9 @@ const props = defineProps<{
   language: string
   validDateEnd: number
   formatDate: string
+
+  hardwareHealthTabs: UI_I_CollapseNavItem[]
+  generatedAlertText: UI_I_StorageSensorsAlert
 }>()
 
 const emits = defineEmits<{
@@ -103,21 +115,12 @@ const emits = defineEmits<{
 }>()
 
 const localization = computed<UI_I_Localization>(() => useLocal())
-const { $store }: any = useNuxtApp()
 
-const activeTab = ref<UI_T_HardwareHealthTabMode>('sensor')
-const selectedGraphView = ref<string>('all')
 const uniqueKey = ref<number>(0)
 
-const selectedRow = ref<number[]>([])
-
-const hardwareHealthTabs = computed<UI_I_CollapseNavItem[]>(() =>
-  hardwareHealthTabsFunc(localization.value)
-)
-
-const hardwareHealth = computed<UI_I_HardwareHealthSensors[]>(
-  () => props.data || []
-)
+watch(activeTab, () => {
+  uniqueKey.value++
+})
 
 const hardwareHealthDescription = computed<string>(() => {
   const { thereIsAlertAndWarningOutOfSensors, noAlertsOrWarningsOutOfSensors } =
@@ -126,7 +129,7 @@ const hardwareHealthDescription = computed<string>(() => {
   let alertCount = 0
   let warningCount = 0
 
-  hardwareHealth.value.forEach((sensor: UI_I_HardwareHealthSensors) => {
+  props.data.forEach((sensor: UI_I_HardwareHealthSensors) => {
     if (sensor.status === 3) alertCount++
     if (sensor.status === 2) warningCount++
   })
@@ -145,7 +148,7 @@ const hardwareHealthDescription = computed<string>(() => {
   const replacements: Replacements = {
     alert: alertCount,
     warning: warningCount,
-    sensors: hardwareHealth.value.length || 0,
+    sensors: props.data.length || 0,
   }
   const text = hasStatusTwoOrThree
     ? thereIsAlertAndWarningOutOfSensors
@@ -156,47 +159,20 @@ const hardwareHealthDescription = computed<string>(() => {
     (_, key: keyof Replacements) => replacements[key]
   )
 })
-
-const generateAlertTextWithLink = computed<UI_I_StorageSensorsAlert>(() => {
-  const { storageSensorsAlert, thisKbArticle } = localization.value.common
-
-  const [before, after] = storageSensorsAlert.split('{ link }')
-
-  return {
-    before,
-    after,
-    link: 'javascript:void(0)',
-    linkText: thisKbArticle,
-  }
-})
-
-watch(activeTab, () => {
-  uniqueKey.value++
-})
-
-const onUpdateHistoryTestimonyTools = (
-  tools: UI_I_HardwareHealthHistoryTestimonyTools
-): void => {
-  emits('update-history-testimony-tools', tools)
-}
-
-onMounted(() => {
-  $store.dispatch('main/A_CONTINUE_GLOBAL_REFRESH', 'hardwareHealth')
-})
-onUnmounted(() => {
-  $store.dispatch('main/A_PAUSE_GLOBAL_REFRESH', 'hardwareHealth')
-})
 </script>
 
 <style lang="scss" scoped>
 @import 'bfg-common/assets/scss/common/global.scss';
+
 .hardware-health {
   @extend %block-property;
+
   &__tabs {
     :deep(.nav) {
       margin-top: 0;
     }
   }
+
   &__content {
     display: flex;
     flex-direction: column;