bfg-common 1.3.615 → 1.3.616

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

@@ -0,0 +1,84 @@
+<template>
+  <div class="hardware-health-graph">
+    <common-graph
+      v-if="dataLocal && !props.loading"
+      :data="dataLocal"
+      :update="updateHelper"
+    />
+    <div v-else-if="props.loading" class="graphic-loader-block">
+      <div class="spinner"></div>
+    </div>
+    <div v-else class="empty-content"></div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { format } from 'date-fns'
+import type { I_SeriesLine } from '~/node_modules/bfg-nuxt-3-graph/graph/lib/models/interfaces'
+import type { I_LineGraph } from '~/node_modules/bfg-nuxt-3-graph/graph/lib/models/interfaces'
+import { graphDataFunc } from '~/node_modules/bfg-nuxt-3-graph/graph/lib/utils/renderGraph'
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+
+const props = defineProps<{
+  data: I_SeriesLine | null
+  loading: boolean
+  formattedDatetime: any
+  isDarkMode: boolean
+  getDateFormat: any
+  language: string
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const dataLocal = ref<I_LineGraph | null>(null)
+const updateHelper = ref<number>(0)
+let dateFormat = ''
+
+const updateChart = (): void => {
+  if (!props.data) return
+
+  dataLocal.value = graphDataFunc(
+    props.data,
+    props.isDarkMode,
+    localization.value,
+    () => {},
+    false,
+    false,
+    true,
+    'spline',
+    '',
+    undefined,
+    () => {},
+    props.formattedDatetime,
+    format,
+    dateFormat
+  )
+
+  updateHelper.value++
+}
+
+watch(
+  () => [props.data, props.isDarkMode, props.language],
+  (newValue) => {
+    dateFormat = props.getDateFormat(newValue[2])
+    updateChart()
+  },
+  { immediate: true, deep: true }
+)
+</script>
+
+<style scoped lang="scss">
+.hardware-health-graph {
+  height: 300px;
+
+  .graphic-loader-block {
+    height: inherit;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .empty-content {
+    height: inherit;
+  }
+}
+</style>

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

@@ -37,8 +37,19 @@
 
     <common-pages-hardware-health-tools-panel :selected-tab="activeTab" />
 
+    <common-pages-hardware-health-graph
+      v-if="activeTab === 'history-testimony'"
+      :data="props.historyTestimony"
+      :loading="props.loadingHistoryTestimony"
+      :is-dark-mode="props.isDarkMode"
+      :formatted-datetime="props.formattedDatetime"
+      :get-date-format="props.getDateFormat"
+      :language="props.language"
+    />
+
     <common-pages-hardware-health-table-view
       :key="uniqueKey"
+      v-model:selected="selectedRow"
       :data-table="hardwareHealth"
       :total-items="hardwareHealth.length"
       :total-pages="1"
@@ -49,16 +60,28 @@
 </template>
 
 <script lang="ts" setup>
-import { UI_I_Localization } from '~/lib/models/interfaces'
-import { UI_I_CollapseNavItem } from '~/components/atoms/collapse/lib/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_I_CollapseNavItem } from '~/components/atoms/collapse/lib/models/interfaces'
 import type { UI_T_HardwareHealthTabMode } from '~/components/common/pages/hardwareHealth/lib/models/types'
 import type { UI_I_StorageSensorsAlert } from '~/components/common/pages/hardwareHealth/lib/models/interfaces'
 import type { UI_I_HardwareHealthSensors } from '~/components/common/pages/hardwareHealth/tableView/lib/models/interfaces'
+import type { UI_T_SelectedRow } from '~/components/atoms/table/dataGrid/lib/models/types'
 import { hardwareHealthTabsFunc } from '~/components/common/pages/hardwareHealth/lib/config/tabsPannel'
 
 const props = defineProps<{
   data: UI_I_HardwareHealthSensors[]
   loading: boolean
+  historyTestimony: I_SeriesLine | null
+  loadingHistoryTestimony: boolean
+  isDarkMode: boolean
+  formattedDatetime: any
+  getDateFormat: any
+  language: string
+}>()
+
+const emits = defineEmits<{
+  (event: 'update-chart-data', value: string): void
 }>()
 
 const localization = computed<UI_I_Localization>(() => useLocal())
@@ -67,6 +90,8 @@ const { $store }: any = useNuxtApp()
 const activeTab = ref<UI_T_HardwareHealthTabMode>('sensor')
 const uniqueKey = ref<number>(0)
 
+const selectedRow = ref<UI_T_SelectedRow>([])
+
 const hardwareHealthTabs = computed<UI_I_CollapseNavItem[]>(() =>
   hardwareHealthTabsFunc(localization.value)
 )
@@ -126,10 +151,38 @@ const generateAlertTextWithLink = computed<UI_I_StorageSensorsAlert>(() => {
   }
 })
 
+const updateChartData = (isSendAll: boolean = false): void => {
+  const selectedNames: string[] = []
+  hardwareHealth.value.forEach((item, key) => {
+    if (isSendAll) {
+      if (['power', 'temperature'].includes(item.category.toLowerCase()))
+        selectedNames.push(item.name)
+    } else if (
+      ['power', 'temperature'].includes(item.category.toLowerCase()) &&
+      selectedRow.value.includes(key)
+    ) {
+      selectedNames.push(item.name)
+    }
+  })
+  emits('update-chart-data', selectedNames.join(','))
+}
+
+watch(selectedRow, (newValue) => {
+  newValue.length && updateChartData()
+})
+
 watch(activeTab, () => {
   uniqueKey.value++
 })
 
+watch(
+  hardwareHealth,
+  (newValue) => {
+    newValue.length && updateChartData(true)
+  },
+  { immediate: true }
+)
+
 onMounted(() => {
   $store.dispatch('main/A_CONTINUE_GLOBAL_REFRESH', 'hardwareHealth')
 })

package/components/common/pages/hardwareHealth/lib/config/tabsPannel.ts

@@ -1,8 +1,14 @@
-import { UI_I_Localization } from '~/lib/models/interfaces'
-import { UI_I_CollapseNavItem } from '~/components/atoms/collapse/lib/models/interfaces'
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_CollapseNavItem } from '~/components/atoms/collapse/lib/models/interfaces'
+
 export const hardwareHealthTabsFunc = (
   localization: UI_I_Localization
 ): UI_I_CollapseNavItem[] => {
+  const config = useRuntimeConfig()
+
+  const isDisabledHistoryTestimony =
+    String(config.public.PRODUCT_NAME_EN).toLowerCase() === 'sphere'
+
   return [
     {
       text: localization.sensors,
@@ -28,5 +34,11 @@ export const hardwareHealthTabsFunc = (
       disabled: false,
       testId: 'hardware-health-system-log',
     },
+    {
+      text: localization.historyTestimony,
+      value: 'history-testimony',
+      disabled: isDisabledHistoryTestimony,
+      testId: 'hardware-health-history-testimony',
+    },
   ]
 }

package/components/common/pages/hardwareHealth/tableView/TableView.vue

@@ -3,12 +3,14 @@
     <div class="data-table-view__inner">
       <atoms-table-data-grid
         v-model:column-keys="columnKeys"
+        v-model:selected-row="selectedRow"
         :head-items="headItems"
         :body-items="bodyItems"
         :total-items="props.totalItems"
         :total-pages="props.totalPages"
         :page-size="100"
         :page="1"
+        :type="tableType"
         class="data-table"
         test-id="hardware-health-table"
         :loading="props.loading"
@@ -71,6 +73,10 @@ import type {
 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_T_HardwareHealthTabMode } from '~/components/common/pages/hardwareHealth/lib/models/types'
+import type {
+  UI_T_DataGridType,
+  UI_T_SelectedRow,
+} from '~/components/atoms/table/dataGrid/lib/models/types'
 import * as sensorTable from '~/components/common/pages/hardwareHealth/tableView/lib/config/sensorTable'
 import * as storageSensorTable from '~/components/common/pages/hardwareHealth/tableView/lib/config/storageSensorTable'
 import * as alertWarningTable from '~/components/common/pages/hardwareHealth/tableView/lib/config/alertWarningTable'
@@ -83,6 +89,7 @@ const props = defineProps<{
   totalPages: number
   tableMode: UI_T_HardwareHealthTabMode
 }>()
+const selectedRow = defineModel<string[]>('selected')
 const localization = computed<UI_I_Localization>(() => useLocal())
 
 const table: any = {
@@ -90,8 +97,13 @@ const table: any = {
   'storage-sensor': storageSensorTable,
   'alert-warning': alertWarningTable,
   'system-log': systemLogTable,
+  'history-testimony': sensorTable,
 }
 
+const tableType = computed<UI_T_DataGridType | undefined>(() =>
+  props.tableMode === 'history-testimony' ? 'checkbox' : undefined
+)
+
 const hasNonEmptySelEntries = computed<boolean>(() => {
   return (
     props.dataTable.some(
@@ -125,7 +137,11 @@ const bodyItems = computed<UI_I_BodyItem[][]>(() => {
       break
   }
 
-  return table[props.tableMode].bodyItems(tableData, localization.value)
+  return table[props.tableMode].bodyItems(
+    tableData,
+    localization.value,
+    props.tableMode
+  )
 })
 
 const isShowSensorWarningDetails = ref<boolean>(false)

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

@@ -9,6 +9,7 @@ import {
   constructColumnKey,
 } from '~/components/atoms/table/dataGrid/lib/utils/constructDataTable'
 import type { UI_I_HardwareHealthSensors } from '~/components/common/pages/hardwareHealth/tableView/lib/models/interfaces'
+import type { UI_T_HardwareHealthTabMode } from '~/components/common/pages/hardwareHealth/lib/models/types'
 import { UI_E_SensorsCategoryIcon } from '~/components/common/pages/hardwareHealth/lib/models/enums'
 import { hardwareHealthSensorTableKeys } from '~/components/common/pages/hardwareHealth/tableView/lib/config/tableKeys'
 import {
@@ -21,7 +22,12 @@ const getItems = (
 ): [string, boolean, string, string][] => {
   return [
     [localization.sensors, true, '330px', hardwareHealthSensorTableKeys[0]],
-    [localization.common.status, true, '140px', hardwareHealthSensorTableKeys[1]],
+    [
+      localization.common.status,
+      true,
+      '140px',
+      hardwareHealthSensorTableKeys[1],
+    ],
     [localization.reading, true, '115px', hardwareHealthSensorTableKeys[2]],
     [localization.categories, true, '130px', hardwareHealthSensorTableKeys[3]],
     [localization.lastUpdated, true, '195px', hardwareHealthSensorTableKeys[4]],
@@ -60,7 +66,8 @@ export const headItems = (localization: UI_I_Localization): UI_I_HeadItem[] => {
 
 export const bodyItems = (
   data: UI_I_HardwareHealthSensors[],
-  localization: UI_I_Localization
+  localization: UI_I_Localization,
+  tableMode: UI_T_HardwareHealthTabMode
 ): UI_I_BodyItem[][] => {
   const bodyItems: UI_I_BodyItem[][] = []
   data.forEach((sensor: UI_I_HardwareHealthSensors, key) => {
@@ -70,6 +77,13 @@ export const bodyItems = (
       warning: sensor.warning,
     }
 
+    let isDisabledRow = false
+    if (
+      tableMode === 'history-testimony' &&
+      !['power', 'temperature'].includes(sensor.category.toLowerCase())
+    )
+      isDisabledRow = true
+
     bodyItems.push([
       // {
       //   data,
@@ -82,6 +96,7 @@ export const bodyItems = (
         key: 'col0',
         text: sensor[hardwareHealthSensorTableKeys[0]],
         id: key,
+        disabled: isDisabledRow,
       },
       {
         key: 'icon',