bfg-common 1.4.36 → 1.4.38

package/components/common/graph/Graph.vue

@@ -1,109 +1,110 @@
-<template>
-  <div class="graph-content">
-    <template v-if="chartOptions">
-      <client-only>
-        <highchart
-          :options="chartOptions"
-          :modules="['exporting', 'export-data']"
-          class="graph-block"
-        />
-      </client-only>
-    </template>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type {
-  I_LineGraph,
-  I_DiskGraph,
-} from 'bfg-nuxt-3-graph/graph/lib/models/interfaces'
-
-const props = defineProps<{
-  chart?: any
-  data: I_LineGraph | I_DiskGraph
-  update: number
-  exportType?: string
-  selectedRow?: number[]
-}>()
-
-let localChart: any = null
-const exportChart = (type: string): void => {
-  if (type === 'png') {
-    localChart.exportChart({
-      type: 'image/png',
-    })
-  } else if (type === 'jpeg') {
-    localChart.exportChart({
-      type: 'image/jpeg',
-    })
-  } else if (type === 'svg') {
-    localChart.exportChart({
-      type: 'image/svg+xml',
-    })
-  } else if (type === 'csv') {
-    localChart.downloadCSV()
-  }
-}
-
-const chartOptions = ref<I_LineGraph | I_DiskGraph | null>(null)
-const initGraph = (): void => {
-  if (!props.data) return
-  setTimeout(() => {
-    chartOptions.value = props.data
-  }, 500)
-}
-
-watch(
-  () => props.update,
-  (newValue) => {
-    newValue && initGraph()
-  },
-  { immediate: true }
-)
-
-watch(
-  () => props.exportType,
-  (newValue) => {
-    if (!newValue) return
-
-    exportChart(newValue)
-  }
-)
-
-watch(
-  () => props.chart,
-  (newValue) => {
-    if (newValue.series) localChart = newValue
-  },
-  { deep: true }
-)
-
-const updateSeriesStrokeWidth = (data: number[]): void => {
-  if (!localChart) return
-
-  localChart.series.forEach((_: any, key: number) => {
-    localChart.options.series[key].lineWidth = 1.5
-
-    if (data.includes(key)) localChart.options.series[key].lineWidth = 3
-  })
-
-  localChart.update(localChart.options)
-}
-
-watch(
-  () => props.selectedRow,
-  (newValue) => newValue && updateSeriesStrokeWidth(newValue)
-)
-</script>
-
-<style scoped lang="scss">
-.graph-content {
-  width: 100%;
-  //height: inherit;
-  height: 100%;
-
-  .graph-block {
-    height: 100%;
-  }
-}
-</style>
+<template>
+  <div class="graph-content">
+    <template v-if="chartOptions">
+      <client-only>
+        <highchart
+          :options="chartOptions"
+          :modules="['exporting', 'export-data']"
+          class="graph-block"
+        />
+      </client-only>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type {
+  I_LineGraph,
+  I_DiskGraph,
+} from 'bfg-nuxt-3-graph/graph/lib/models/interfaces'
+
+const props = defineProps<{
+  chart?: any
+  data: I_LineGraph | I_DiskGraph
+  update: number
+  exportType?: string
+  selectedRow?: number[]
+}>()
+
+let localChart: any = null
+const exportChart = (type: string): void => {
+  if (type === 'png') {
+    localChart.exportChart({
+      type: 'image/png',
+    })
+  } else if (type === 'jpeg') {
+    localChart.exportChart({
+      type: 'image/jpeg',
+    })
+  } else if (type === 'svg') {
+    localChart.exportChart({
+      type: 'image/svg+xml',
+    })
+  } else if (type === 'csv') {
+    localChart.downloadCSV()
+  }
+}
+
+const chartOptions = ref<I_LineGraph | I_DiskGraph | null>(null)
+const initGraph = (): void => {
+  if (!props.data) return
+  setTimeout(() => {
+    chartOptions.value = props.data
+  }, 500)
+}
+
+watch(
+  () => props.update,
+  (newValue) => {
+    newValue && initGraph()
+  },
+  { immediate: true }
+)
+
+watch(
+  () => props.exportType,
+  (newValue) => {
+    if (!newValue) return
+
+    exportChart(newValue)
+  }
+)
+
+watch(
+  () => props.chart,
+  (newValue) => {
+    if (newValue.series) localChart = newValue
+  },
+  { deep: true }
+)
+
+const updateSeriesStrokeWidth = (data: number[]): void => {
+  if (!localChart) return
+
+  const newChartOptions = chartOptions.value
+  newChartOptions.series.forEach((_: any, key: number) => {
+    newChartOptions.series[key].lineWidth = 1.5
+
+    if (data.includes(key)) newChartOptions.series[key].lineWidth = 3
+  })
+
+  chartOptions.value = newChartOptions
+}
+
+watch(
+  () => props.selectedRow,
+  (newValue) => newValue && updateSeriesStrokeWidth(newValue)
+)
+</script>
+
+<style scoped lang="scss">
+.graph-content {
+  width: 100%;
+  //height: inherit;
+  height: 100%;
+
+  .graph-block {
+    height: 100%;
+  }
+}
+</style>

package/components/common/monitor/advanced/tools/chartOptionsModal/counters/timespan/Timespan.vue

@@ -72,7 +72,6 @@ const emits = defineEmits<{
   (event: 'update-timespan-type', value: string): void
   (event: 'update-unit-count', value: number): void
   (event: 'update-period-type', value: string): void
-  (event: 'update-period-type', value: string): void
   (event: 'update-custom-date-from', value: string): void
   (event: 'update-custom-date-to', value: string): void
   (event: 'update-custom-time-from', value: string): void

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

@@ -45,6 +45,7 @@
     >
       <common-pages-hardware-health-history-testimony-graph
         v-if="activeTab === 'history-testimony'"
+        v-model:selected-view="selectedGraphView"
         :power-data="props.historyTestimonyPower"
         :temperature-data="props.historyTestimonyTemperature"
         :counters-table-data="hardwareHealth"
@@ -59,7 +60,8 @@
 
       <common-pages-hardware-health-table-view
         :key="uniqueKey"
-        v-model:selected="selectedRow"
+        v-model:selected-row="selectedRow"
+        :selected-graph-view="selectedGraphView"
         :data-table="hardwareHealth"
         :total-items="hardwareHealth.length"
         :total-pages="1"
@@ -96,6 +98,7 @@ 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[]>([])

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

@@ -1,5 +1,6 @@
 <template>
   <common-pages-hardware-health-history-testimony-tools
+    v-model:selected-view="selectedView"
     v-model:selected-timespan-type="selectedTimespanType"
     :selected-chart-option-name="selectedChartOptionName"
     :is-show-chart-modal="isShowChartModal"
@@ -27,7 +28,7 @@
     @delete-option="onDeleteOption"
     @submit-options="onSubmitOptions"
   />
-  <div class="hardware-health-graph">
+  <div :class="`hardware-health-graph ${selectedView}`">
     <div class="power-container">
       <common-graph
         v-if="powerDataLocal && !props.powerLoading"
@@ -83,6 +84,7 @@ const props = defineProps<{
   getDateFormat: any
   mainSelectedRow: number[]
 }>()
+const selectedView = defineModel<string>('selectedView')
 
 const { $store }: any = useNuxtApp()
 
@@ -99,22 +101,43 @@ const customTimeTo = ref<string>('')
 
 const selectedRowPower = ref<number[]>([])
 const selectedRowTemperature = ref<number[]>([])
+let powerCounters: UI_I_HardwareHealthSensors[] = []
+let temperatureCounters: UI_I_HardwareHealthSensors[] = []
 const updateAllSelectedSelectedRow = (): void => {
   selectedRowPower.value = []
   selectedRowTemperature.value = []
+
+  if (!props.mainSelectedRow.length) return
+
   props.mainSelectedRow.forEach((key) => {
-    const category = props.countersTableData[key].category.toLowerCase()
-
-    switch (category) {
-      case 'power':
-        selectedRowPower.value.push(key)
-        break
-      case 'temperature':
-        selectedRowTemperature.value.push(key)
-        break
+    const selectedItem = props.countersTableData[key]
+    const category = selectedItem.category.toLowerCase()
+
+    if (category === 'power') {
+      const currentKey = powerCounters.findIndex(
+        (item) => item.id === selectedItem.id
+      )
+      selectedRowPower.value.push(currentKey)
+    } else if (category === 'temperature') {
+      const currentKey = temperatureCounters.findIndex(
+        (item) => item.id === selectedItem.id
+      )
+      selectedRowTemperature.value.push(currentKey)
     }
   })
 }
+watch(
+  () => props.countersTableData,
+  (newValue) => {
+    powerCounters = newValue.filter(
+      (item) => item.category.toLowerCase() === 'power'
+    )
+    temperatureCounters = newValue.filter(
+      (item) => item.category.toLowerCase() === 'temperature'
+    )
+  },
+  { deep: true, immediate: true }
+)
 watch(
   () => props.mainSelectedRow,
   () => {
@@ -122,6 +145,13 @@ watch(
   },
   { deep: true, immediate: true }
 )
+watch(
+  selectedView,
+  () => {
+    updateAllSelectedSelectedRow()
+  },
+  { deep: true }
+)
 
 const unitsCount = ref<number>(0)
 const powerCountersTableData = ref<UI_I_HardwareHealthSensorsGraph[]>([])
@@ -337,9 +367,26 @@ const onDeleteOption = (): void => {}
 .hardware-health-graph {
   display: grid;
   align-items: center;
-  grid-template-columns: 1fr 1fr;
   grid-gap: 20px;
 
+  &.all {
+    grid-template-columns: 1fr 1fr;
+  }
+  &.power {
+    grid-template-columns: 1fr 0;
+
+    & > div:nth-child(2) {
+      visibility: hidden;
+    }
+  }
+  &.temperature {
+    grid-template-columns: 0 1fr;
+
+    & > div:nth-child(1) {
+      visibility: hidden;
+    }
+  }
+
   .graphic-loader-block {
     height: inherit;
     display: flex;

package/components/common/pages/hardwareHealth/historyTestimony/tools/Tools.vue

@@ -125,6 +125,7 @@ const props = defineProps<{
   startDate: number
   periodType: string
 }>()
+const selectedView = defineModel<string>('selectedView')
 
 const emits = defineEmits<{
   (event: 'show-chart-modal'): void
@@ -172,7 +173,6 @@ const selectedPeriod = computed<string>({
 
 const optionsNames = ref<string[]>([])
 
-const selectedView = ref<string>('power')
 const viewOptions = computed<UI_I_OptionItem[]>(() =>
   viewFunc(localization.value, optionsNames.value)
 )

package/components/common/pages/hardwareHealth/historyTestimony/tools/chartOptionsModal/ChartOptionsModal.vue

@@ -300,6 +300,22 @@ const onSubmit = (): void => {
     unitCount.value,
     localCustomTime.value
   )
+  if (
+    timespanType.value === 'custom_interval' &&
+    localPeriodType.value === 'period'
+  ) {
+    const checkDateResult = checkDateFunc(
+      localization.value,
+      localCustomDateFrom.value,
+      localCustomDateTo.value,
+      localCustomTimeFrom.value,
+      localCustomTimeTo.value
+    )
+    if (Array.isArray(checkDateResult)) {
+      validPeriod[0] = checkDateResult[0]
+      validPeriod[1] = checkDateResult[1]
+    }
+  }
 
   const savedObject = {
     fields: currentFields,

package/components/common/pages/hardwareHealth/historyTestimony/tools/lib/config/toolbar.ts

@@ -43,6 +43,10 @@ export const viewFunc = (
   optionsNames: string[]
 ): UI_I_OptionItem[] => {
   const result = [
+    {
+      text: localization.common.all,
+      value: 'all',
+    },
     {
       text: localization.common.power,
       value: 'power',

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

@@ -81,13 +81,14 @@ import * as systemLogTable from '~/components/common/pages/hardwareHealth/tableV
 import * as historyTestimonyTable from '~/components/common/pages/hardwareHealth/tableView/lib/config/historyTestimonyTable'
 
 const props = defineProps<{
+  selectedGraphView: string
   dataTable: UI_I_HardwareHealthSensors[]
   loading: boolean
   totalItems: number
   totalPages: number
   tableMode: UI_T_HardwareHealthTabMode
 }>()
-const selectedRow = defineModel<string[]>('selected')
+const selectedRow = defineModel<number[]>('selectedRow')
 const localization = computed<UI_I_Localization>(() => useLocal())
 
 const table: any = {
@@ -135,7 +136,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.selectedGraphView
+  )
 })
 
 const isShowSensorWarningDetails = ref<boolean>(false)

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

@@ -79,7 +79,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,
+  selectedGraphView: string
 ): UI_I_BodyItem[][] => {
   const bodyItems: UI_I_BodyItem[][] = []
   data.forEach((sensor: UI_I_HardwareHealthSensors, key) => {
@@ -89,7 +90,15 @@ export const bodyItems = (
       warning: sensor.warning,
     }
 
-    if (!['disk health'].includes(sensor.category.toLowerCase()))
+    const isCurrentItem =
+      selectedGraphView !== 'all'
+        ? selectedGraphView === sensor.category.toLowerCase()
+        : true
+
+    if (
+      !['disk health'].includes(sensor.category.toLowerCase()) &&
+      isCurrentItem
+    )
       bodyItems.push([
         {
           key: 'col0',

package/package.json

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