bfg-common 1.4.55 → 1.4.56

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

@@ -37,14 +37,10 @@
 
     <common-pages-hardware-health-tools-panel :selected-tab="activeTab" />
 
-    <div
-      :class="[
-        'bottom-container',
-        { 'history-testimony': activeTab === 'history-testimony' },
-      ]"
-    >
+    <div :class="['hardware-health__content', activeTab]">
       <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 +55,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 +93,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[]>([])
@@ -182,10 +180,15 @@ onUnmounted(() => {
       margin-top: 0;
     }
   }
-  .bottom-container {
+  &__content {
+    display: flex;
+    flex-direction: column;
+    height: inherit;
+    overflow: hidden;
+
     &.history-testimony {
-      overflow: hidden;
       overflow-y: auto;
+      display: block;
     }
   }
 }

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"
@@ -18,7 +19,7 @@
     :custom-time-from="customTimeFrom"
     :custom-time-to="customTimeTo"
     :start-date="props.powerData?.pointStart || 0"
-    :period-type="tools.periodName"
+    :timespan-period-type="timespanPeriodType"
     @power-selected-rows-local="powerSelectedRowsLocal = $event"
     @temperature-selected-rows-local="temperatureSelectedRowsLocal = $event"
     @show-chart-modal="isShowChartModal = true"
@@ -26,9 +27,13 @@
     @update-tools="onUpdateTools"
     @delete-option="onDeleteOption"
     @submit-options="onSubmitOptions"
+    @update-timespan-period-type="timespanPeriodType = $event"
   />
-  <div class="hardware-health-graph">
-    <div class="power-container">
+  <div
+    ref="historyTestimonyGraph"
+    :class="`history-testimony-graph ${selectedView}`"
+  >
+    <div>
       <common-graph
         v-if="powerDataLocal && !props.powerLoading"
         :data="powerDataLocal"
@@ -36,12 +41,15 @@
         :chart="powerChart"
         :selected-row="selectedRowPower"
       />
-      <div v-else-if="props.powerLoading" class="graphic-loader-block">
+      <div
+        v-else-if="props.powerLoading"
+        class="history-testimony-graph__loader-block"
+      >
         <div class="spinner"></div>
       </div>
-      <div v-else class="empty-content"></div>
+      <div v-else class="history-testimony-graph__empty-content"></div>
     </div>
-    <div class="temperature-container">
+    <div>
       <common-graph
         v-if="temperatureDataLocal && !props.temperatureLoading"
         :data="temperatureDataLocal"
@@ -49,10 +57,13 @@
         :chart="temperatureChart"
         :selected-row="selectedRowTemperature"
       />
-      <div v-else-if="props.temperatureLoading" class="graphic-loader-block">
+      <div
+        v-else-if="props.temperatureLoading"
+        class="history-testimony-graph__loader-block"
+      >
         <div class="spinner"></div>
       </div>
-      <div v-else class="empty-content"></div>
+      <div v-else class="history-testimony-graph__empty-content"></div>
     </div>
   </div>
 </template>
@@ -83,9 +94,31 @@ const props = defineProps<{
   getDateFormat: any
   mainSelectedRow: number[]
 }>()
+const selectedView = defineModel<string>('selectedView')
 
 const { $store }: any = useNuxtApp()
 
+// const historyTestimonyGraph = ref(null)
+// const contentWidth = ref<number>(
+//   useElementSize(historyTestimonyGraph)?.width || 0
+// )
+// watch(contentWidth, (newValue) => {
+//   if (newValue) {
+//     updatePowerChart()
+//     updateTemperatureChart()
+//   }
+//   if (!powerChart.value || !temperatureChart.value) return
+//
+//   powerChart.value.setSize(1, powerChart.chartHeight)
+//   temperatureChart.value.setSize(1, temperatureChart.chartHeight)
+//
+//   setTimeout(() => {
+//     powerChart.value.setSize(newValue, powerChart.chartHeight)
+//     temperatureChart.value.setSize(newValue, temperatureChart.chartHeight)
+//   }, 1000)
+// })
+// const isContentMediumSize = computed<boolean>(() => contentWidth.value <= 1200)
+
 const selectedChartOptionName = ref<string>('')
 const isShowChartModal = ref<boolean>(false)
 const selectedMetric = ref<UI_T_Chart>('power')
@@ -99,22 +132,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 +176,13 @@ watch(
   },
   { deep: true, immediate: true }
 )
+watch(
+  selectedView,
+  () => {
+    updateAllSelectedSelectedRow()
+  },
+  { deep: true }
+)
 
 const unitsCount = ref<number>(0)
 const powerCountersTableData = ref<UI_I_HardwareHealthSensorsGraph[]>([])
@@ -146,6 +207,7 @@ watch(
         units: '',
         nameEn: item.mainName || '',
         testId: `counters-table-${item.name}-item`,
+        hidden: item.hidden,
       }
       if (item.category.toLowerCase() === 'power')
         powerCountersTableData.value.push(newData)
@@ -166,7 +228,7 @@ const selectAllCounters = (): void => {
       selectedPowerCountersKeys.value.push(item.id)
     })
     temperatureCountersTableData.value.forEach((item) => {
-      selectedTemperatureCountersKeys.value.push(item.id)
+      if (!item.hidden) selectedTemperatureCountersKeys.value.push(item.id)
     })
   }
 }
@@ -184,6 +246,7 @@ const updateTemperatureHelper = ref<number>(0)
 let dateFormat = ''
 const powerChart = ref<any>(null)
 const temperatureChart = ref<any>(null)
+const timespanPeriodType = ref<string>('last')
 
 const powerChartCallback = (newValue: any): void => {
   newValue && (powerChart.value = newValue)
@@ -334,20 +397,38 @@ const onDeleteOption = (): void => {}
 </script>
 
 <style scoped lang="scss">
-.hardware-health-graph {
+.history-testimony-graph {
   display: grid;
   align-items: center;
-  grid-template-columns: 1fr 1fr;
   grid-gap: 20px;
+  grid-template-columns: 1fr 1fr;
+
+  //&.medium {
+  //  grid-template-columns: 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 {
+  &__loader-block {
     height: inherit;
     display: flex;
     justify-content: center;
     align-items: center;
     min-height: 300px;
   }
-  .empty-content {
+  &__empty-content {
     height: inherit;
   }
 }

package/components/common/pages/hardwareHealth/historyTestimony/lib/models/interfaces.ts

@@ -6,4 +6,5 @@ export interface UI_I_HardwareHealthSensorsGraph {
   units: string
   nameEn: string
   testId: string
+  hidden: boolean
 }

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

@@ -78,9 +78,11 @@
     :custom-date-to="props.customDateTo"
     :custom-time-from="props.customTimeFrom"
     :custom-time-to="props.customTimeTo"
+    :timespan-period-type="props.timespanPeriodType"
     @save-option-name="onSaveOptionName"
     @delete-option="emits('delete-option')"
     @power-selected-rows-local="emits('power-selected-rows-local', $event)"
+    @update-timespan-period-type="emits('update-timespan-period-type', $event)"
     @temperature-selected-rows-local="
       emits('temperature-selected-rows-local', $event)
     "
@@ -123,8 +125,9 @@ const props = defineProps<{
   customTimeTo: string
   selectedTimespanType: string
   startDate: number
-  periodType: string
+  timespanPeriodType: string
 }>()
+const selectedView = defineModel<string>('selectedView')
 
 const emits = defineEmits<{
   (event: 'show-chart-modal'): void
@@ -144,7 +147,7 @@ const emits = defineEmits<{
   (event: 'update-chart-type', value: string): void
   (event: 'update-timespan-type', value: string): void
   (event: 'update-unit-count', value: number): void
-  (event: 'update-period-type', value: string): void
+  (event: 'update-timespan-period-type', value: string): void
   (event: 'update-custom-time', value: string): void
   (event: 'delete-option'): void
   (event: 'update-custom-date-from', value: string): void
@@ -172,7 +175,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)
 )
@@ -222,7 +224,10 @@ const onUpdateTools = (): void => {
     Math.round(validPeriodData[1] / 1000),
   ]
 
-  if (periodValue === 'custom_interval' && props.periodType === 'period') {
+  if (
+    periodValue === 'custom_interval' &&
+    props.timespanPeriodType === 'period'
+  ) {
     const checkDateResult = checkDateFunc(
       localization.value,
       props.customDateFrom,

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

@@ -42,7 +42,7 @@
               :selected-chart-type="localSelectedChartType"
               :selected-timespan-type="localSelectedTimespanType"
               :units-count="localUnitsCount"
-              :period-type="localPeriodType"
+              :timespan-period-type="localTimespanPeriodType"
               :selected-custom-time="localCustomTime"
               :custom-date-from="props.customDateFrom"
               :custom-date-to="props.customDateTo"
@@ -54,7 +54,7 @@
               @update-custom-time="localCustomTime = $event"
               @update-timespan-type="timespanType = $event"
               @update-unit-count="unitCount = $event"
-              @update-period-type="localPeriodType = $event"
+              @update-timespan-period-type="localTimespanPeriodType = $event"
               @update-custom-date-from="onUpdateCustomDateFrom"
               @update-custom-date-to="onUpdateCustomDateTo"
               @update-custom-time-from="onUpdateCustomTimeFrom"
@@ -94,6 +94,7 @@ const props = defineProps<{
   customDateTo: string
   customTimeFrom: string
   customTimeTo: string
+  timespanPeriodType: string
 }>()
 
 const emits = defineEmits<{
@@ -110,7 +111,7 @@ const emits = defineEmits<{
   (event: 'update-chart-type', value: string): void
   (event: 'update-timespan-type', value: string): void
   (event: 'update-unit-count', value: number): void
-  (event: 'update-period-type', value: string): void
+  (event: 'update-timespan-period-type', value: string): void
   (event: 'update-custom-time', value: string): void
   (event: 'delete-option'): void
   (event: 'save-option-name'): void
@@ -187,11 +188,11 @@ watch(
   { immediate: true }
 )
 
-const localPeriodType = ref<string>('')
+const localTimespanPeriodType = ref<string>('')
 watch(
-  () => props.periodType,
+  () => props.timespanPeriodType,
   (newValue) => {
-    localPeriodType.value = newValue
+    localTimespanPeriodType.value = newValue
   },
   { immediate: true }
 )
@@ -251,7 +252,7 @@ const checkValidations = (): boolean => {
     return false
   } else if (
     timespanType.value === 'custom_interval' &&
-    localPeriodType.value === 'period' &&
+    localTimespanPeriodType.value === 'period' &&
     checkDateResult !== '' &&
     typeof checkDateResult === 'string'
   ) {
@@ -300,13 +301,29 @@ const onSubmit = (): void => {
     unitCount.value,
     localCustomTime.value
   )
+  if (
+    timespanType.value === 'custom_interval' &&
+    localTimespanPeriodType.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,
     optionName: selectedLocalOptionName.value,
     metric: selectedMetric.value,
     periodName: timespanType.value,
-    periodType: localPeriodType.value,
+    periodType: localTimespanPeriodType.value,
     unitCount: unitCount.value,
     localTimespanType: localCustomTime.value,
     dateFrom: localCustomDateFrom.value,
@@ -317,6 +334,7 @@ const onSubmit = (): void => {
     period: validPeriod,
   }
 
+  emits('update-timespan-period-type', savedObject.periodType)
   emits('submit-options', savedObject)
   onHide()
 }
@@ -343,7 +361,7 @@ const onSaveOptions = (name: string): void => {
     counters,
     metric: selectedMetric.value,
     timespan: {
-      periodType: localPeriodType.value,
+      periodType: localTimespanPeriodType.value,
       units: localCustomTime.value,
       unitsCount: unitCount.value,
       type: timespanType.value,
@@ -366,7 +384,7 @@ const setDefaultOptions = (): void => {
   localSelectedChartType.value = 'spline'
   localSelectedTimespanType.value = ''
   localUnitsCount.value = 0
-  localPeriodType.value = ''
+  localTimespanPeriodType.value = ''
   localCustomTime.value = ''
 }
 
@@ -392,7 +410,7 @@ const setCustomOptions = (name: string): void => {
   localSelectedChartType.value = currentChartType
   localSelectedTimespanType.value = selectedValue.timespan.type
   localUnitsCount.value = selectedValue.timespan.unitsCount
-  localPeriodType.value = selectedValue.timespan.periodType
+  localTimespanPeriodType.value = selectedValue.timespan.periodType
   localCustomTime.value = selectedValue.timespan.units
 }
 

package/components/common/pages/hardwareHealth/historyTestimony/tools/chartOptionsModal/counters/Counters.vue

@@ -15,7 +15,7 @@
       :selected-chart-type="props.selectedChartType"
       :selected-timespan-type="props.selectedTimespanType"
       :units-count="props.unitsCount"
-      :period-type="props.periodType"
+      :timespan-period-type="props.timespanPeriodType"
       :selected-custom-time="props.selectedCustomTime"
       :custom-date-from="props.customDateFrom"
       :custom-date-to="props.customDateTo"
@@ -25,7 +25,9 @@
       @update-custom-time="emits('update-custom-time', $event)"
       @update-timespan-type="emits('update-timespan-type', $event)"
       @update-unit-count="emits('update-unit-count', $event)"
-      @update-period-type="emits('update-period-type', $event)"
+      @update-timespan-period-type="
+        emits('update-timespan-period-type', $event)
+      "
       @update-custom-date-from="emits('update-custom-date-from', $event)"
       @update-custom-date-to="emits('update-custom-date-to', $event)"
       @update-custom-time-from="emits('update-custom-time-from', $event)"
@@ -48,7 +50,7 @@ const props = defineProps<{
   selectedChartType: string
   selectedTimespanType: string
   unitsCount: number
-  periodType: string
+  timespanPeriodType: string
   selectedCustomTime: string
   customDateFrom: string
   customDateTo: string
@@ -58,12 +60,15 @@ const props = defineProps<{
 
 const emits = defineEmits<{
   (event: 'select-power-row', value: UI_I_HardwareHealthSensorsGraph[]): void
-  (event: 'select-temperature-row', value: UI_I_HardwareHealthSensorsGraph[]): void
+  (
+    event: 'select-temperature-row',
+    value: UI_I_HardwareHealthSensorsGraph[]
+  ): void
   (event: 'update-chart-type', value: string): void
   (event: 'update-custom-time', value: string): void
   (event: 'update-timespan-type', value: string): void
   (event: 'update-unit-count', value: number): void
-  (event: 'update-period-type', value: string): void
+  (event: 'update-timespan-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/historyTestimony/tools/chartOptionsModal/counters/timespan/Timespan.vue

@@ -5,7 +5,7 @@
       :selected-chart-type="props.selectedChartType"
       :selected-timespan-type="props.selectedTimespanType"
       :units-count="props.unitsCount"
-      :period-type="props.periodType"
+      :timespan-period-type="props.timespanPeriodType"
       :selected-custom-time="props.selectedCustomTime"
       :custom-date-from="props.customDateFrom"
       :custom-date-to="props.customDateTo"
@@ -15,7 +15,9 @@
       @update-custom-time="emits('update-custom-time', $event)"
       @update-timespan-type="emits('update-timespan-type', $event)"
       @update-unit-count="emits('update-unit-count', $event)"
-      @update-period-type="emits('update-period-type', $event)"
+      @update-timespan-period-type="
+        emits('update-timespan-period-type', $event)
+      "
       @update-custom-date-from="emits('update-custom-date-from', $event)"
       @update-custom-date-to="emits('update-custom-date-to', $event)"
       @update-custom-time-from="emits('update-custom-time-from', $event)"
@@ -30,7 +32,7 @@ const props = defineProps<{
   selectedChartType: string
   selectedTimespanType: string
   unitsCount: number
-  periodType: string
+  timespanPeriodType: string
   selectedCustomTime: string
   customDateFrom: string
   customDateTo: string
@@ -43,7 +45,7 @@ const emits = defineEmits<{
   (event: 'update-custom-time', value: string): void
   (event: 'update-timespan-type', value: string): void
   (event: 'update-unit-count', value: number): void
-  (event: 'update-period-type', value: string): void
+  (event: 'update-timespan-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/historyTestimony/tools/chartOptionsModal/counters/timespan/form/Form.vue

@@ -37,7 +37,7 @@
                   <td class="relative">
                     <input
                       id="custom-time-lastInput"
-                      v-model="localPeriodType"
+                      v-model="localTimespanPeriodType"
                       data-id="custom-time-lastInput"
                       type="radio"
                       value="last"
@@ -55,7 +55,7 @@
                     <div
                       :class="[
                         'custom-timespan-type-last-container',
-                        { active: localPeriodType === 'last' },
+                        { active: localTimespanPeriodType === 'last' },
                       ]"
                     >
                       <input
@@ -95,7 +95,7 @@
                   <td class="relative">
                     <input
                       id="custom-time-fromInput"
-                      v-model="localPeriodType"
+                      v-model="localTimespanPeriodType"
                       data-id="custom-time-from-input"
                       type="radio"
                       value="period"
@@ -112,7 +112,7 @@
                     <div
                       :class="[
                         'date-container-row disabled-container calendar-date-row',
-                        { active: localPeriodType === 'period' },
+                        { active: localTimespanPeriodType === 'period' },
                       ]"
                     >
                       <input
@@ -148,7 +148,7 @@
                     <div
                       :class="[
                         'date-container-row disabled-container calendar-date-row',
-                        { active: localPeriodType === 'period' },
+                        { active: localTimespanPeriodType === 'period' },
                       ]"
                     >
                       <input
@@ -181,7 +181,7 @@
                   <td
                     :class="[
                       'disabled-container',
-                      { active: localPeriodType === 'period' },
+                      { active: localTimespanPeriodType === 'period' },
                     ]"
                   >
                     <span> ({{ localization.common.isoTimeFormat }}) </span>
@@ -233,7 +233,7 @@ const props = defineProps<{
   selectedChartType: string
   selectedTimespanType: string
   unitsCount: number
-  periodType: string
+  timespanPeriodType: string
   selectedCustomTime: string
   customDateFrom: string
   customDateTo: string
@@ -246,7 +246,7 @@ const emits = defineEmits<{
   (event: 'update-custom-time', value: string): void
   (event: 'update-timespan-type', value: string): void
   (event: 'update-unit-count', value: number): void
-  (event: 'update-period-type', value: string): void
+  (event: 'update-timespan-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
@@ -269,11 +269,11 @@ watch(
     localSelectedTimespan.value = newValue || timespanOptions.value[0].value
   }
 )
-const localPeriodType = ref<string>('last')
+const localTimespanPeriodType = ref<string>('last')
 watch(
-  () => props.periodType,
+  () => props.timespanPeriodType,
   (newValue) => {
-    localPeriodType.value = newValue || 'last'
+    localTimespanPeriodType.value = newValue || 'last'
   },
   { immediate: true }
 )
@@ -287,10 +287,10 @@ watch(
 )
 
 watch(
-  localPeriodType,
+  localTimespanPeriodType,
   (newValue) => {
     const currentValue = newValue || 'period'
-    emits('update-period-type', currentValue)
+    emits('update-timespan-period-type', currentValue)
   },
   { immediate: true }
 )

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/lib/config/status.ts

@@ -2,7 +2,7 @@ export const sensorsLocalizationByStatus = [
   'unknown',
   'normal',
   'warning',
-  'alert',
+  'problem',
 ]
 
 export const sensorsIconByStatus = [