bfg-common 1.4.9 → 1.4.10

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

@@ -1,332 +0,0 @@
-<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_T_DateFormat } from '~/lib/models/plugins/date/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: UI_T_DateFormat
-  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

@@ -1,9 +0,0 @@
-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

@@ -1,375 +0,0 @@
-<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>