bfg-common 1.4.43 → 1.4.45

package/assets/localization/local_ru.json

@@ -2431,7 +2431,7 @@
     "ioCountForPathSwitch": "Количество операций ввода-вывода для переключения пути",
     "byteCountForPathSwitch": "Количество байт для переключения пути",
     "theValueEitherEmptyOrInvalid": "Значение либо пустое, либо недопустимое",
-    "weight": "Бес"
+    "weight": "Вес"
   },
   "auth": {
     "welcomeTo": "Добро пожаловать в",

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

@@ -37,12 +37,7 @@
 
     <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"
@@ -185,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

@@ -19,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"
@@ -27,9 +27,13 @@
     @update-tools="onUpdateTools"
     @delete-option="onDeleteOption"
     @submit-options="onSubmitOptions"
+    @update-timespan-period-type="timespanPeriodType = $event"
   />
-  <div :class="`hardware-health-graph ${selectedView}`">
-    <div class="power-container">
+  <div
+    ref="historyTestimonyGraph"
+    :class="`history-testimony-graph ${selectedView}`"
+  >
+    <div>
       <common-graph
         v-if="powerDataLocal && !props.powerLoading"
         :data="powerDataLocal"
@@ -37,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"
@@ -50,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>
@@ -88,6 +98,27 @@ 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')
@@ -214,6 +245,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)
@@ -364,14 +396,15 @@ const onDeleteOption = (): void => {}
 </script>
 
 <style scoped lang="scss">
-.hardware-health-graph {
+.history-testimony-graph {
   display: grid;
   align-items: center;
   grid-gap: 20px;
+  grid-template-columns: 1fr 1fr;
 
-  &.all {
-    grid-template-columns: 1fr 1fr;
-  }
+  //&.medium {
+  //  grid-template-columns: 1fr;
+  //}
   &.power {
     grid-template-columns: 1fr 0;
 
@@ -387,14 +420,14 @@ const onDeleteOption = (): void => {}
     }
   }
 
-  .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/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,7 +125,7 @@ const props = defineProps<{
   customTimeTo: string
   selectedTimespanType: string
   startDate: number
-  periodType: string
+  timespanPeriodType: string
 }>()
 const selectedView = defineModel<string>('selectedView')
 
@@ -145,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
@@ -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'
   ) {
@@ -302,7 +303,7 @@ const onSubmit = (): void => {
   )
   if (
     timespanType.value === 'custom_interval' &&
-    localPeriodType.value === 'period'
+    localTimespanPeriodType.value === 'period'
   ) {
     const checkDateResult = checkDateFunc(
       localization.value,
@@ -322,7 +323,7 @@ const onSubmit = (): void => {
     optionName: selectedLocalOptionName.value,
     metric: selectedMetric.value,
     periodName: timespanType.value,
-    periodType: localPeriodType.value,
+    periodType: localTimespanPeriodType.value,
     unitCount: unitCount.value,
     localTimespanType: localCustomTime.value,
     dateFrom: localCustomDateFrom.value,
@@ -333,6 +334,7 @@ const onSubmit = (): void => {
     period: validPeriod,
   }
 
+  emits('update-timespan-period-type', savedObject.periodType)
   emits('submit-options', savedObject)
   onHide()
 }
@@ -359,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,
@@ -382,7 +384,7 @@ const setDefaultOptions = (): void => {
   localSelectedChartType.value = 'spline'
   localSelectedTimespanType.value = ''
   localUnitsCount.value = 0
-  localPeriodType.value = ''
+  localTimespanPeriodType.value = ''
   localCustomTime.value = ''
 }
 
@@ -408,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/recursionTree/RecursionTree.vue

@@ -1,6 +1,10 @@
 <template>
   <div class="recursion-tree">
-    <div v-for="node in nodes" :key="`${node.type}_${node.id}`">
+    <div
+      v-for="node in nodes"
+      :key="`${node.type}_${node.id}`"
+      :data-id="`${node.testId}-${node.type}-root`"
+    >
       <div
         :id="`tree-node-${node.type}-${node.id}`"
         :data-id="node.testId"

package/package.json

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