bfg-common 1.4.16 → 1.4.18

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

@@ -0,0 +1,331 @@
+<template>
+  <common-pages-hardware-health-history-testimony-tools
+    v-model:selected-timespan-type="selectedTimespanType"
+    :selected-chart-option-name="selectedChartOptionName"
+    :is-show-chart-modal="isShowChartModal"
+    :chart-title="props.powerData?.groupName || ''"
+    :selected-metric="selectedMetric"
+    :selected-power-counters-keys="selectedPowerCountersKeys"
+    :power-selected-rows-local="powerSelectedRowsLocal"
+    :selected-temperature-counters-keys="selectedTemperatureCountersKeys"
+    :temperature-selected-rows-local="temperatureSelectedRowsLocal"
+    :units-count="unitsCount"
+    :power-counters-table-data="powerCountersTableData"
+    :temperature-counters-table-data="temperatureCountersTableData"
+    :language="props.language"
+    :custom-date-from="customDateFrom"
+    :custom-date-to="customDateTo"
+    :custom-time-from="customTimeFrom"
+    :custom-time-to="customTimeTo"
+    :start-date="props.powerData?.pointStart || 0"
+    :period-type="tools.periodName"
+    @power-selected-rows-local="powerSelectedRowsLocal = $event"
+    @temperature-selected-rows-local="temperatureSelectedRowsLocal = $event"
+    @show-chart-modal="isShowChartModal = true"
+    @hide-chart-modal="isShowChartModal = false"
+    @update-tools="onUpdateTools"
+    @delete-option="onDeleteOption"
+    @submit-options="onSubmitOptions"
+  />
+  <div class="hardware-health-graph">
+    <div class="power-container">
+      <common-graph
+        v-if="powerDataLocal && !props.powerLoading"
+        :data="powerDataLocal"
+        :update="updatePowerHelper"
+        :chart="powerChart"
+        :selected-row="props.mainSelectedRow"
+      />
+      <div v-else-if="props.powerLoading" class="graphic-loader-block">
+        <div class="spinner"></div>
+      </div>
+      <div v-else class="empty-content"></div>
+    </div>
+    <div class="temperature-container">
+      <common-graph
+        v-if="temperatureDataLocal && !props.temperatureLoading"
+        :data="temperatureDataLocal"
+        :update="updateTemperatureHelper"
+        :chart="temperatureChart"
+        :selected-row="props.mainSelectedRow"
+      />
+      <div v-else-if="props.temperatureLoading" class="graphic-loader-block">
+        <div class="spinner"></div>
+      </div>
+      <div v-else class="empty-content"></div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { format } from 'date-fns'
+import type {
+  I_SeriesLine,
+  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_OptionsForm } from '~/components/common/monitor/advanced/tools/chartOptionsModal/lib/models/interfaces'
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_T_Chart } from '~/components/common/pages/hardwareHealth/historyTestimony/tools/chartOptionsModal/lib/models/types'
+import type { UI_I_HardwareHealthSensors } from '~/components/common/pages/hardwareHealth/tableView/lib/models/interfaces'
+import type { UI_I_HardwareHealthSensorsGraph } from '~/components/common/pages/hardwareHealth/historyTestimony/lib/models/interfaces'
+import type { UI_I_SensorsGraphPayload } from '~/components/common/pages/hardwareHealth/historyTestimony/tools/lib/models/interfaces'
+
+const props = defineProps<{
+  powerData: I_SeriesLine | null
+  temperatureData: I_SeriesLine | null
+  countersTableData: UI_I_HardwareHealthSensors[]
+  language: string
+  powerLoading: boolean
+  temperatureLoading: boolean
+  formattedDatetime: any
+  isDarkMode: boolean
+  getDateFormat: any
+  mainSelectedRow: number[]
+}>()
+
+const emits = defineEmits<{
+  (event: 'update:selected-timespan-type', value: string): void
+}>()
+
+const { $store }: any = useNuxtApp()
+
+const selectedChartOptionName = ref<string>('')
+const isShowChartModal = ref<boolean>(false)
+const selectedMetric = ref<UI_T_Chart>('power')
+const selectedPowerCountersKeys = ref<number[]>([])
+const selectedTemperatureCountersKeys = ref<number[]>([])
+const selectedTimespanType = ref<string>('')
+const customDateFrom = ref<string>('')
+const customDateTo = ref<string>('')
+const customTimeFrom = ref<string>('')
+const customTimeTo = ref<string>('')
+
+const unitsCount = ref<number>(0)
+const powerCountersTableData = ref<UI_I_HardwareHealthSensorsGraph[]>([])
+const temperatureCountersTableData = ref<UI_I_HardwareHealthSensorsGraph[]>([])
+const powerSelectedRowsLocal = ref<UI_I_HardwareHealthSensorsGraph[]>([])
+const temperatureSelectedRowsLocal = ref<UI_I_HardwareHealthSensorsGraph[]>([])
+
+watch(
+  () => props.countersTableData,
+  (newValue) => {
+    if (!newValue.length) return
+
+    powerCountersTableData.value = []
+    temperatureCountersTableData.value = []
+
+    newValue.forEach((item, key) => {
+      const newData: UI_I_HardwareHealthSensorsGraph = {
+        id: key,
+        name: item.name,
+        description: item.category,
+        measurement: '',
+        units: '',
+        nameEn: item.mainName || '',
+        testId: `counters-table-${item.name}-item`,
+      }
+      if (item.category.toLowerCase() === 'power')
+        powerCountersTableData.value.push(newData)
+      else if (item.category.toLowerCase() === 'temperature')
+        temperatureCountersTableData.value.push(newData)
+    })
+  },
+  { immediate: true, deep: true }
+)
+
+const selectAllCounters = (): void => {
+  if (!powerCountersTableData.value)
+    setTimeout(() => {
+      selectAllCounters()
+    }, 2000)
+  else {
+    powerCountersTableData.value.forEach((item) => {
+      selectedPowerCountersKeys.value.push(item.id)
+    })
+    temperatureCountersTableData.value.forEach((item) => {
+      selectedTemperatureCountersKeys.value.push(item.id)
+    })
+  }
+}
+
+onMounted(() => {
+  selectAllCounters()
+})
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const powerDataLocal = ref<I_LineGraph | null>(null)
+const temperatureDataLocal = ref<I_LineGraph | null>(null)
+const updatePowerHelper = ref<number>(0)
+const updateTemperatureHelper = ref<number>(0)
+let dateFormat = ''
+const powerChart = ref<any>(null)
+const temperatureChart = ref<any>(null)
+
+const powerChartCallback = (newValue: any): void => {
+  newValue && (powerChart.value = newValue)
+}
+
+const temperatureChartCallback = (newValue: any): void => {
+  newValue && (temperatureChart.value = newValue)
+}
+
+const updatePowerChart = (): void => {
+  if (!props.powerData) return
+
+  powerDataLocal.value = graphDataFunc(
+    props.powerData,
+    props.isDarkMode,
+    localization.value,
+    () => {},
+    false,
+    false,
+    true,
+    'spline',
+    '',
+    undefined,
+    powerChartCallback,
+    props.formattedDatetime,
+    format,
+    dateFormat
+  )
+
+  updatePowerHelper.value++
+}
+
+const updateTemperatureChart = (): void => {
+  if (!props.temperatureData) return
+
+  temperatureDataLocal.value = graphDataFunc(
+    props.temperatureData,
+    props.isDarkMode,
+    localization.value,
+    () => {},
+    false,
+    false,
+    true,
+    'spline',
+    '',
+    undefined,
+    temperatureChartCallback,
+    props.formattedDatetime,
+    format,
+    dateFormat
+  )
+
+  updateTemperatureHelper.value++
+}
+
+watch(
+  () => [props.powerData, props.isDarkMode, props.language],
+  (newValue) => {
+    dateFormat = props.getDateFormat(newValue[2])
+    updatePowerChart()
+  },
+  { immediate: true, deep: true }
+)
+
+watch(
+  () => [props.temperatureData, props.isDarkMode, props.language],
+  (newValue) => {
+    dateFormat = props.getDateFormat(newValue[2])
+    updateTemperatureChart()
+  },
+  { immediate: true, deep: true }
+)
+
+const updateSelectedCountersKeys = (metricType: string): void => {
+  if (metricType === 'power') {
+    const newKeys: number[] = []
+
+    powerSelectedRowsLocal.value.forEach((item) => {
+      newKeys.push(item.id)
+    })
+    selectedPowerCountersKeys.value = newKeys
+  } else if (metricType === 'temperature') {
+    const newKeys: number[] = []
+
+    temperatureSelectedRowsLocal.value.forEach((item) => {
+      newKeys.push(item.id)
+    })
+    selectedTemperatureCountersKeys.value = newKeys
+  }
+}
+
+const tools = {
+  periodName: 'real_time',
+  view: 'power',
+  metricType: selectedMetric.value,
+  period: [],
+}
+
+const onSubmitOptions = (data: UI_I_OptionsForm): void => {
+  updateSelectedCountersKeys(data.metric)
+  if (data.metric === 'power')
+    $store.dispatch(
+      'monitor/A_GET_HARDWARE_HEALTH_HISTORY_TESTIMONY_POWER',
+      data
+    )
+  if (data.metric === 'temperature')
+    $store.dispatch(
+      'monitor/A_GET_HARDWARE_HEALTH_HISTORY_TESTIMONY_TEMPERATURE',
+      data
+    )
+}
+
+const getAllMetrics = (): void => {
+  $store.dispatch(
+    'monitor/A_GET_HARDWARE_HEALTH_HISTORY_TESTIMONY_POWER',
+    tools
+  )
+  $store.dispatch(
+    'monitor/A_GET_HARDWARE_HEALTH_HISTORY_TESTIMONY_TEMPERATURE',
+    tools
+  )
+}
+
+const onUpdateTools = (data: UI_I_SensorsGraphPayload): void => {
+  const storageChartOptions = useLocalStorage(
+    data.view + 'ChartOptionsSensors',
+    undefined
+  )
+
+  selectedChartOptionName.value = ''
+
+  if (storageChartOptions) {
+    selectedChartOptionName.value = data.view
+  } else {
+    selectedMetric.value = 'power'
+  }
+
+  tools.periodName = data.periodName
+  tools.view = data.view
+  tools.period = data.period
+  tools.metricType = data.metricType || selectedMetric.value
+
+  getAllMetrics()
+}
+
+const onDeleteOption = (): void => {}
+</script>
+
+<style scoped lang="scss">
+.hardware-health-graph {
+  display: grid;
+  align-items: center;
+  grid-template-columns: 1fr 1fr;
+  grid-gap: 20px;
+
+  .graphic-loader-block {
+    height: inherit;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 300px;
+  }
+  .empty-content {
+    height: inherit;
+  }
+}
+</style>

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

@@ -0,0 +1,9 @@
+export interface UI_I_HardwareHealthSensorsGraph {
+  id: number
+  name: string
+  description: string
+  measurement: string
+  units: string
+  nameEn: string
+  testId: string
+}

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

@@ -0,0 +1,375 @@
+<template>
+  <div class="horizontal-flex-container">
+    <div class="chart-title-content">
+      <client-only>
+        <span v-if="props.chartTitle" class="chart-title"
+          >{{ props.chartTitle }},</span
+        >
+        <span v-if="chartTitleDate" class="chart-title uppercase">{{
+          chartTitleDate
+        }}</span>
+      </client-only>
+    </div>
+    <div class="horizontal-flex-container">
+      <label for="periodSelect" class="label-select"
+        >{{ localization.common.period }}:</label
+      >
+      <div class="select">
+        <select
+          id="periodSelect"
+          v-model="selectedPeriod"
+          data-id="period-select"
+          @change="onUpdateTools"
+        >
+          <option
+            v-for="(item, index) in periodOptions"
+            :key="index"
+            :value="item.value"
+          >
+            {{ item.text }}
+          </option>
+        </select>
+      </div>
+      <a
+        id="chart-options-button"
+        class="chart-options-button"
+        data-id="show-chart-options-button"
+        @click="onShowChartOptions"
+        >{{ localization.common.chartOptions }}</a
+      >
+    </div>
+    <div class="view-select-label horizontal-flex-container">
+      <label for="viewSelect" class="label-select"
+        >{{ localization.common.view }}:</label
+      >
+      <div class="select">
+        <select
+          id="viewSelect"
+          v-model="selectedView"
+          data-id="view-select"
+          @change="onUpdateTools"
+        >
+          <option
+            v-for="(item, index) in viewOptions"
+            :key="index"
+            :value="item.value"
+          >
+            {{ item.text }}
+          </option>
+        </select>
+      </div>
+    </div>
+  </div>
+
+  <common-pages-hardware-health-history-testimony-tools-chart-options-modal
+    v-if="props.isShowChartModal"
+    :selected-chart-option-name="props.selectedChartOptionName"
+    :selected-metric="props.selectedMetric"
+    :power-selected-rows-local="props.powerSelectedRowsLocal"
+    :temperature-selected-rows-local="props.temperatureSelectedRowsLocal"
+    :selected-power-counters-keys="props.selectedPowerCountersKeys"
+    :selected-temperature-counters-keys="props.selectedTemperatureCountersKeys"
+    :units-count="props.unitsCount"
+    :power-counters-table-data="props.powerCountersTableData"
+    :temperature-counters-table-data="props.temperatureCountersTableData"
+    :language="props.language"
+    :selected-timespan-type="props.selectedTimespanType"
+    :custom-date-from="props.customDateFrom"
+    :custom-date-to="props.customDateTo"
+    :custom-time-from="props.customTimeFrom"
+    :custom-time-to="props.customTimeTo"
+    @save-option-name="onSaveOptionName"
+    @delete-option="emits('delete-option')"
+    @power-selected-rows-local="emits('power-selected-rows-local', $event)"
+    @temperature-selected-rows-local="
+      emits('temperature-selected-rows-local', $event)
+    "
+    @submit-options="emits('submit-options', $event)"
+    @hide="onHideChartModal"
+  />
+</template>
+
+<script setup lang="ts">
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_HardwareHealthSensorsGraph } from '~/components/common/pages/hardwareHealth/historyTestimony/lib/models/interfaces'
+import type { UI_I_SensorsGraphPayload } from '~/components/common/pages/hardwareHealth/historyTestimony/tools/lib/models/interfaces'
+import type { UI_I_OptionItem } from '~/components/atoms/lib/models/interfaces'
+import type { UI_I_OptionsForm } from '~/components/common/monitor/advanced/tools/chartOptionsModal/lib/models/interfaces'
+import type { UI_T_Chart } from '~/components/common/pages/hardwareHealth/historyTestimony/tools/chartOptionsModal/lib/models/types'
+import { getValidDateByOptionFunc } from '~/components/common/monitor/lib/config/getValidDateByOption'
+import { checkDateFunc } from '~/components/common/monitor/overview/filters/customIntervalModal/lib/config/dateChecker'
+import {
+  getCurrentOptionsStorageFunc,
+  periodFunc,
+  viewFunc,
+} from '~/components/common/pages/hardwareHealth/historyTestimony/tools/lib/config/toolbar'
+
+const props = defineProps<{
+  selectedChartOptionName: string
+  isShowChartModal: boolean
+  chartTitle: string
+  selectedMetric: UI_T_Chart
+  selectedPowerCountersKeys: number[]
+  powerSelectedRowsLocal: UI_I_HardwareHealthSensorsGraph[]
+  selectedTemperatureCountersKeys: number[]
+  temperatureSelectedRowsLocal: UI_I_HardwareHealthSensorsGraph[]
+  unitsCount: number
+  powerCountersTableData: UI_I_HardwareHealthSensorsGraph[]
+  temperatureCountersTableData: UI_I_HardwareHealthSensorsGraph[]
+  language: string
+  customDateFrom: string
+  customDateTo: string
+  customTimeFrom: string
+  customTimeTo: string
+  selectedTimespanType: string
+  startDate: number
+  periodType: string
+}>()
+
+const emits = defineEmits<{
+  (event: 'show-chart-modal'): void
+  (event: 'hide-chart-modal'): void
+  (event: 'update-tools', value: UI_I_SensorsGraphPayload): void
+  (event: 'exporting', value: string): void
+  (event: 'open-advanced-page'): void
+  (event: 'select-metric-local', value: string): void
+  (
+    event: 'power-selected-rows-local',
+    value: UI_I_HardwareHealthSensorsGraph[]
+  ): void
+  (
+    event: 'temperature-selected-rows-local',
+    value: UI_I_HardwareHealthSensorsGraph[]
+  ): void
+  (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-custom-time', value: string): void
+  (event: 'delete-option'): 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
+  (event: 'update-custom-time-to', value: string): void
+  (event: 'submit-options', value: UI_I_OptionsForm): void
+  (event: 'update:selected-timespan-type', value: string): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+const { $formattedDatetime } = useNuxtApp()
+
+const periodOptions = computed<UI_I_OptionItem[]>(() =>
+  periodFunc(localization.value, props.selectedTimespanType)
+)
+const selectedPeriod = computed<string>({
+  get() {
+    return props.selectedTimespanType || periodOptions.value[0].value
+  },
+  set(newValue) {
+    emits('update:selected-timespan-type', newValue)
+  },
+})
+
+const optionsNames = ref<string[]>([])
+
+const selectedView = ref<string>('power')
+const viewOptions = computed<UI_I_OptionItem[]>(() =>
+  viewFunc(localization.value, optionsNames.value)
+)
+
+watch(
+  () => props.selectedChartOptionName,
+  (newValue) => {
+    let currentValue = ''
+
+    if (newValue) currentValue = newValue
+    else if (
+      selectedView.value &&
+      optionsNames.value.includes(selectedView.value)
+    )
+      currentValue = selectedView.value
+    else currentValue = selectedView.value || viewOptions.value[0]?.value
+
+    selectedView.value = currentValue
+  },
+  { immediate: true }
+)
+
+const onHideChartModal = (): void => {
+  emits('hide-chart-modal')
+}
+
+const onUpdateTools = (): void => {
+  const periodValue = selectedPeriod.value
+  const viewValue = selectedView.value
+  const selectedValue = useLocalStorage(
+    viewValue + 'ChartOptionsSensors',
+    undefined
+  )
+
+  const fields = selectedValue
+    ? selectedValue.counters.map((item) => item.name).join(', ')
+    : ''
+  const validPeriodData = getValidDateByOptionFunc(
+    periodValue,
+    null,
+    null,
+    null
+  )
+
+  const period = [
+    Math.round(validPeriodData[0] / 1000),
+    Math.round(validPeriodData[1] / 1000),
+  ]
+
+  if (periodValue === 'custom_interval' && props.periodType === 'period') {
+    const checkDateResult = checkDateFunc(
+      localization.value,
+      props.customDateFrom,
+      props.customDateTo,
+      props.customTimeFrom,
+      props.customTimeTo
+    )
+    if (Array.isArray(checkDateResult)) {
+      period[0] = Math.round(checkDateResult[0] / 1000)
+      period[1] = Math.round(checkDateResult[1] / 1000)
+    }
+  }
+
+  const tools: UI_I_SensorsGraphPayload = {
+    fields,
+    period,
+    periodName: periodValue,
+    view: viewValue,
+  }
+  if (selectedValue.metric) tools.metricType = selectedValue.metric
+
+  emits('update-timespan-type', selectedPeriod.value)
+  emits('update-tools', tools)
+}
+
+const chartTitleDate = computed<string>(() => {
+  if (!props.startDate) return ''
+
+  const start = $formattedDatetime(props.startDate, '', true)
+  const end = $formattedDatetime(new Date(), '', true)
+  return `${start} - ${end}`
+})
+
+const onShowChartOptions = (): void => {
+  emits('show-chart-modal')
+}
+
+const onSaveOptionName = (): void => {
+  optionsNames.value = getCurrentOptionsStorageFunc()
+}
+
+onMounted(() => {
+  optionsNames.value = getCurrentOptionsStorageFunc()
+  onUpdateTools()
+})
+</script>
+
+<style scoped lang="scss">
+.horizontal-flex-container {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  line-height: 20px;
+  flex-shrink: 0;
+
+  .chart-title-content {
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .select select {
+    height: 20px;
+    margin: 5px;
+    color: var(--global-font-color);
+  }
+  .single-option {
+    margin-left: 5px;
+  }
+
+  .chart-title {
+    color: var(--global-font-color);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+    margin: 6px;
+    font-weight: 700;
+    text-transform: capitalize;
+
+    &.uppercase {
+      text-transform: uppercase;
+    }
+  }
+
+  .view-select-label {
+    margin-left: auto;
+    padding-right: 7px;
+    padding-left: 7px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    align-items: center;
+  }
+
+  .chart-options-button {
+    margin-left: 5px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    text-transform: capitalize;
+    color: var(--dropdown-item-color);
+    cursor: pointer;
+  }
+
+  .chart-action-bar {
+    white-space: nowrap;
+
+    .menu-item {
+      padding-right: 4px;
+      display: inline-block;
+      list-style: none;
+      vertical-align: middle;
+
+      &:last-child {
+        padding-right: 0;
+      }
+
+      .item-link {
+        padding: 4px;
+        line-height: 22px;
+        border: 1px solid transparent;
+        display: inline-block;
+
+        &:hover {
+          text-decoration: none;
+          background-color: #e9f6fd;
+          border: 1px solid #c7e9ff;
+        }
+
+        .icon {
+          width: 16px;
+          height: 16px;
+          display: block;
+          min-width: 16px;
+          min-height: 16px;
+          background-size: 100% auto;
+        }
+      }
+
+      :deep(.dropdown-menu) {
+        min-width: auto;
+        padding: 0;
+      }
+      :deep(.user-menu-large) {
+        padding: 0;
+      }
+      :deep(.angle-icon) {
+        display: none;
+      }
+    }
+  }
+}
+</style>