bfg-common 1.6.95 → 1.6.97

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

@@ -1,12 +1,31 @@
 <template>
-  <common-pages-hardware-health-history-testimony-tools
+  <common-pages-hardware-health-history-testimony-graph-new
+    v-if="isNewView"
     v-model:selected-view="selectedView"
-    v-model:selected-timespan-type="selectedTimespanType"
-    :selected-chart-option-name="selectedChartOptionName"
-    :is-show-chart-modal="isShowChartModal"
-    :chart-title="props.powerData?.groupName || ''"
+    :selected-timespan-type="selectedTimespanType"
+    :counters-table-data="props.countersTableData"
+    :language="props.language"
+    :power-loading="props.powerLoading"
+    :temperature-loading="props.temperatureLoading"
+    :formatted-datetime="props.formattedDatetime"
+    :is-dark-mode="props.isDarkMode"
+    :main-selected-row="props.mainSelectedRow"
+    :valid-date-end="props.validDateEnd"
+    :format-date="props.formatDate"
     :selected-metric="selectedMetric"
+    :selected-chart-option-name="selectedChartOptionName"
+    :power-data="powerDataLocal"
+    :update-power-helper="updatePowerHelper"
+    :update-temperature-helper="updateTemperatureHelper"
+    :temperature-data="temperatureDataLocal"
+    :power-chart="powerChart"
+    :temperature-chart="temperatureChart"
+    :point-start="props.powerData?.pointStart || 0"
+    :point-end="props.powerData?.pointEnd || 0"
+    :group-name="props.powerData?.groupName || ''"
+    :selected-host-name="props.selectedHostName"
     :selected-chart-type="selectedChartType"
+    :is-show-chart-modal="isShowChartModal"
     :selected-power-counters-keys="selectedPowerCountersKeys"
     :power-selected-rows-local="powerSelectedRowsLocal"
     :selected-temperature-counters-keys="selectedTemperatureCountersKeys"
@@ -14,88 +33,94 @@
     :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"
-    :end-date="props.powerData?.pointEnd || 0"
     :timespan-period-type="timespanPeriodType"
-    :valid-date-end="props.validDateEnd"
-    :format-date="props.formatDate"
+    :selected-row-power="selectedRowPower"
+    :selected-row-temperature="selectedRowTemperature"
+    :project="props.project"
+    @show-chart-modal="isShowChartModal = true"
+    @hide-chart-modal="isShowChartModal = false"
+    @update-tools="onUpdateTools"
+    @select-metric-local="selectedMetric = $event"
     @power-selected-rows-local="powerSelectedRowsLocal = $event"
     @temperature-selected-rows-local="temperatureSelectedRowsLocal = $event"
+    @update-period-type="timespanPeriodType = $event"
+    @submit-options="onSubmitOptions"
+  />
+  <common-pages-hardware-health-history-testimony-graph-old
+    v-else
+    v-model:selected-view="selectedView"
+    :selected-timespan-type="selectedTimespanType"
+    :counters-table-data="props.countersTableData"
+    :language="props.language"
+    :power-loading="props.powerLoading"
+    :temperature-loading="props.temperatureLoading"
+    :formatted-datetime="props.formattedDatetime"
+    :is-dark-mode="props.isDarkMode"
+    :main-selected-row="props.mainSelectedRow"
+    :valid-date-end="props.validDateEnd"
+    :format-date="props.formatDate"
+    :selected-metric="selectedMetric"
+    :selected-chart-option-name="selectedChartOptionName"
+    :power-data="powerDataLocal"
+    :update-power-helper="updatePowerHelper"
+    :update-temperature-helper="updateTemperatureHelper"
+    :temperature-data="temperatureDataLocal"
+    :power-chart="powerChart"
+    :temperature-chart="temperatureChart"
+    :point-start="props.powerData?.pointStart || 0"
+    :point-end="props.powerData?.pointEnd || 0"
+    :group-name="props.powerData?.groupName || ''"
+    :selected-host-name="props.selectedHostName"
+    :selected-chart-type="selectedChartType"
+    :is-show-chart-modal="isShowChartModal"
+    :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"
+    :custom-date-from="customDateFrom"
+    :custom-date-to="customDateTo"
+    :custom-time-from="customTimeFrom"
+    :custom-time-to="customTimeTo"
+    :timespan-period-type="timespanPeriodType"
+    :selected-row-power="selectedRowPower"
+    :selected-row-temperature="selectedRowTemperature"
+    :project="props.project"
     @show-chart-modal="isShowChartModal = true"
     @hide-chart-modal="isShowChartModal = false"
     @update-tools="onUpdateTools"
-    @delete-option="onDeleteOption"
-    @submit-options="onSubmitOptions"
+    @select-metric-local="selectedMetric = $event"
+    @power-selected-rows-local="powerSelectedRowsLocal = $event"
+    @temperature-selected-rows-local="temperatureSelectedRowsLocal = $event"
     @update-period-type="timespanPeriodType = $event"
+    @submit-options="onSubmitOptions"
   />
-  <div
-    ref="historyTestimonyGraph"
-    :class="[
-      `history-testimony-graph ${selectedView}`,
-      { medium: isMediumSizeGraphsContainer },
-    ]"
-  >
-    <div class="graph-container">
-      <common-graph
-        v-if="powerDataLocal && !props.powerLoading"
-        :data="powerDataLocal"
-        :update="updatePowerHelper"
-        :chart="powerChart"
-        :selected-row="selectedRowPower"
-      />
-      <div
-        v-else-if="props.powerLoading"
-        class="history-testimony-graph__loader-block"
-      >
-        <div class="spinner"></div>
-      </div>
-      <div v-else class="history-testimony-graph__empty-content"></div>
-    </div>
-    <div class="graph-container">
-      <common-graph
-        v-if="temperatureDataLocal && !props.temperatureLoading"
-        :data="temperatureDataLocal"
-        :update="updateTemperatureHelper"
-        :chart="temperatureChart"
-        :selected-row="selectedRowTemperature"
-      />
-      <div
-        v-else-if="props.temperatureLoading"
-        class="history-testimony-graph__loader-block"
-      >
-        <div class="spinner"></div>
-      </div>
-      <div v-else class="history-testimony-graph__empty-content"></div>
-    </div>
-  </div>
 </template>
-
 <script setup lang="ts">
-import { useElementSize } from '@vueuse/core'
 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/pages/hardwareHealth/historyTestimony/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_HardwareHealthSensors } from '~/components/common/pages/hardwareHealth/tableView/old/lib/models/interfaces'
 import type {
   UI_I_HardwareHealthHistoryTestimonyTools,
   UI_I_HardwareHealthSensorsGraph,
 } from '~/components/common/pages/hardwareHealth/historyTestimony/lib/models/interfaces'
+import type { UI_T_Chart } from '~/components/common/pages/hardwareHealth/historyTestimony/tools/chartOptionsModal/lib/models/types'
 import type { UI_I_SensorsGraphPayload } from '~/components/common/pages/hardwareHealth/historyTestimony/tools/lib/models/interfaces'
-import { containerMediumSize } from '~/components/common/pages/hardwareHealth/historyTestimony/lib/config/containerSizes'
+import type { UI_I_OptionsForm } from '~/components/common/pages/hardwareHealth/historyTestimony/tools/chartOptionsModal/lib/models/interfaces'
+import type { UI_T_Project } from '~/lib/models/types'
+
+const selectedView = defineModel<string>('selectedView')
 
-const emits = defineEmits<{
-  (event: 'update-tools', value: UI_I_HardwareHealthHistoryTestimonyTools): void
-}>()
 const props = defineProps<{
   powerData: I_SeriesLine | null
   temperatureData: I_SeriesLine | null
@@ -109,41 +134,124 @@ const props = defineProps<{
   mainSelectedRow: number[]
   validDateEnd: number
   formatDate: string
+  project: UI_T_Project
+  selectedHostName?: string
+}>()
+const emits = defineEmits<{
+  (event: 'update-tools', value: UI_I_HardwareHealthHistoryTestimonyTools): void
 }>()
-const selectedView = defineModel<string>('selectedView')
 
 const { $store }: any = useNuxtApp()
 
-const historyTestimonyGraph = ref<any>(null)
-const { width } = useElementSize(historyTestimonyGraph)
-const isMediumSizeGraphsContainer = computed<boolean>(
-  () => width.value < containerMediumSize
-)
+const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
 
-// 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 localization = computed<UI_I_Localization>(() => useLocal())
 
-const selectedChartOptionName = ref<string>('')
 const isShowChartModal = ref<boolean>(false)
+const selectedChartOptionName = ref<string>('')
 const selectedMetric = ref<UI_T_Chart>('power')
+
+const tools: UI_I_HardwareHealthHistoryTestimonyTools = {
+  periodName: 'real_time',
+  view: 'power',
+  metricType: selectedMetric.value,
+  period: [],
+}
+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
+
+  emits('update-tools', tools)
+}
+
+// Графики
+let dateFormat = ''
+const updatePowerHelper = ref<number>(0)
+const updateTemperatureHelper = ref<number>(0)
+const temperatureDataLocal = ref<I_LineGraph | null>(null)
+const powerDataLocal = ref<I_LineGraph | null>(null)
+const powerChart = ref<any>(null)
+const temperatureChart = ref<any>(null)
+
+const powerChartCallback = (newValue: any): void => {
+  newValue && (powerChart.value = newValue)
+}
+const updatePowerChart = (): void => {
+  if (!props.powerData) return
+
+  powerDataLocal.value = graphDataFunc({
+    graphData: props.powerData,
+    isDarkMode: props.isDarkMode,
+    localization: localization.value,
+    fullScreenCallBack: () => {},
+    disabledTitle: false,
+    disabledExportButton: false,
+    disabledLegends: true,
+    graphType: 'spline',
+    chartCallBack: powerChartCallback,
+    formattedDatetime: props.formattedDatetime,
+    formatDate: dateFormat,
+  })
+
+  updatePowerHelper.value++
+}
+watch(
+  () => [props.powerData, props.isDarkMode, props.language],
+  (newValue) => {
+    dateFormat = props.getDateFormat(newValue[2])
+    updatePowerChart()
+  },
+  { immediate: true, deep: true }
+)
+
+const temperatureChartCallback = (newValue: any): void => {
+  newValue && (temperatureChart.value = newValue)
+}
+const updateTemperatureChart = (): void => {
+  if (!props.temperatureData) return
+
+  temperatureDataLocal.value = graphDataFunc({
+    graphData: props.temperatureData,
+    isDarkMode: props.isDarkMode,
+    localization: localization.value,
+    fullScreenCallBack: () => {},
+    disabledTitle: false,
+    disabledExportButton: false,
+    disabledLegends: true,
+    graphType: 'spline',
+    chartCallBack: temperatureChartCallback,
+    formattedDatetime: props.formattedDatetime,
+    formatDate: dateFormat,
+  })
+
+  updateTemperatureHelper.value++
+}
+watch(
+  () => [props.temperatureData, props.isDarkMode, props.language],
+  (newValue) => {
+    dateFormat = props.getDateFormat(newValue[2])
+    updateTemperatureChart()
+  },
+  { immediate: true, deep: true }
+)
+
+// Таблицы
+
 const selectedPowerCountersKeys = ref<number[]>([])
 const selectedTemperatureCountersKeys = ref<number[]>([])
 const selectedTimespanType = ref<string>('')
@@ -152,9 +260,15 @@ const customDateTo = ref<string>('')
 const customTimeFrom = ref<string>('')
 const customTimeTo = ref<string>('')
 const selectedChartType = ref<string>('spline')
-
+const timespanPeriodType = ref<string>('last')
+const unitsCount = ref<number>(0)
 const selectedRowPower = ref<number[]>([])
 const selectedRowTemperature = ref<number[]>([])
+const powerCountersTableData = ref<UI_I_HardwareHealthSensorsGraph[]>([])
+const temperatureCountersTableData = ref<UI_I_HardwareHealthSensorsGraph[]>([])
+const powerSelectedRowsLocal = ref<UI_I_HardwareHealthSensorsGraph[]>([])
+const temperatureSelectedRowsLocal = ref<UI_I_HardwareHealthSensorsGraph[]>([])
+
 let powerCounters: UI_I_HardwareHealthSensors[] = []
 let temperatureCounters: UI_I_HardwareHealthSensors[] = []
 const updateAllSelectedSelectedRow = (): void => {
@@ -207,12 +321,6 @@ watch(
   { deep: true }
 )
 
-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) => {
@@ -260,83 +368,6 @@ 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 timespanPeriodType = ref<string>('last')
-
-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({
-    graphData: props.powerData,
-    isDarkMode: props.isDarkMode,
-    localization: localization.value,
-    fullScreenCallBack: () => {},
-    disabledTitle: false,
-    disabledExportButton: false,
-    disabledLegends: true,
-    graphType: 'spline',
-    chartCallBack: powerChartCallback,
-    formattedDatetime: props.formattedDatetime,
-    formatDate: dateFormat,
-  })
-
-  updatePowerHelper.value++
-}
-
-const updateTemperatureChart = (): void => {
-  if (!props.temperatureData) return
-
-  temperatureDataLocal.value = graphDataFunc({
-    graphData: props.temperatureData,
-    isDarkMode: props.isDarkMode,
-    localization: localization.value,
-    fullScreenCallBack: () => {},
-    disabledTitle: false,
-    disabledExportButton: false,
-    disabledLegends: true,
-    graphType: 'spline',
-    chartCallBack: temperatureChartCallback,
-    formattedDatetime: props.formattedDatetime,
-    formatDate: 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[] = []
@@ -355,13 +386,6 @@ const updateSelectedCountersKeys = (metricType: string): void => {
   }
 }
 
-const tools: UI_I_HardwareHealthHistoryTestimonyTools = {
-  periodName: 'real_time',
-  view: 'power',
-  metricType: selectedMetric.value,
-  period: [],
-}
-
 const onSubmitOptions = (data: UI_I_OptionsForm): void => {
   selectedTimespanType.value = data.periodName
   customDateFrom.value = data.dateFrom
@@ -381,76 +405,5 @@ const onSubmitOptions = (data: UI_I_OptionsForm): void => {
       data
     )
 }
-
-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
-
-  emits('update-tools', tools)
-}
-
-const onDeleteOption = (): void => {}
 </script>
-
-<style scoped lang="scss">
-.history-testimony-graph {
-  display: flex;
-  align-items: center;
-  grid-gap: 20px;
-
-  &.medium {
-    flex-direction: column;
-
-    .graph-container {
-      width: 100%;
-    }
-  }
-  .graph-container {
-    width: calc(50% - 10px);
-  }
-  &.power {
-    & > div:nth-child(1) {
-      width: 100%;
-    }
-    & > div:nth-child(2) {
-      display: none;
-      width: 0;
-    }
-  }
-  &.temperature {
-    & > div:nth-child(1) {
-      display: none;
-      width: 0;
-    }
-    & > div:nth-child(2) {
-      width: 100%;
-    }
-  }
-
-  &__loader-block {
-    height: inherit;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    min-height: 300px;
-  }
-  &__empty-content {
-    height: inherit;
-  }
-}
-</style>
+<style scoped lang="scss"></style>