bfg-common 1.6.95 → 1.6.97

package/components/common/pages/hardwareHealth/historyTestimony/tools/chartOptionsModal/actions/ActionsOld.vue

@@ -0,0 +1,81 @@
+<template>
+  <div class="horizontal-flex-container">
+    <div class="horizontal-flex-container">
+      <label for="chartOptionsSelect" class="label-select"
+        >{{ localization.inventoryMonitor.chartOptions }}:</label
+      >
+      <div class="select">
+        <select
+          id="chartOptionsSelect"
+          v-model="selectedChartOption"
+          data-id="chart-options-select"
+        >
+          <option
+            v-for="item in props.chartOptions"
+            :key="item.value"
+            :value="item.value"
+          >
+            {{ item.text }}
+          </option>
+        </select>
+      </div>
+    </div>
+    <div>
+      <button
+        class="btn chart-options-save-button"
+        data-id="chart-options-save-button"
+        @click="emits('show-save-options-modal')"
+      >
+        {{ localization.inventoryMonitor.saveOptionsAs }}...
+      </button>
+      <common-pages-hardware-health-history-testimony-tools-chart-options-modal-actions-save-options-modal
+        v-if="props.isShowSaveOptionsModal"
+        @hide="emits('hide-save-options-modal')"
+        @save="emits('save-options', $event)"
+      />
+      <button
+        :disabled="!props.isDisabledAction"
+        class="btn chart-options-delete-button"
+        data-id="chart-options-delete-button"
+        @click="emits('delete-action')"
+      >
+        {{ localization.inventoryMonitor.deleteOptions }}
+      </button>
+    </div>
+  </div>
+
+  <common-modals-confirmation
+    v-if="props.isShowConfirmModal"
+    :headline="localization.inventoryMonitor.deleteChartOption"
+    :description="confirmModalDesc"
+    @hide-modal="emits('hide-confirm-modal')"
+    @confirm="emits('apply-delete')"
+  />
+</template>
+<script setup lang="ts">
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_OptionItem } from '~/components/atoms/lib/models/interfaces'
+
+const selectedChartOption = defineModel<string>('selectedChartOption', {
+  required: true,
+})
+const props = defineProps<{
+  chartOptions: UI_I_OptionItem[]
+  isShowSaveOptionsModal: boolean
+  isDisabledAction: boolean
+  isShowConfirmModal: boolean
+  confirmModalDesc: string
+}>()
+const emits = defineEmits<{
+  (event: 'show-save-options-modal'): void
+  (event: 'hide-save-options-modal'): void
+  (event: 'delete-action'): void
+  (event: 'save-options', value: string): void
+  (event: 'hide-confirm-modal'): void
+  (event: 'apply-delete'): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+</script>
+
+<style scoped lang="scss"></style>

package/components/common/pages/hardwareHealth/historyTestimony/tools/chartOptionsModal/actions/{SaveOptionsModal.vue → saveOptionsModal/SaveOptionsModal.vue}

@@ -7,7 +7,7 @@
     @submit="onSave"
   >
     <template #modalBody>
-      <common-monitor-advanced-tools-chart-options-modal-notification
+      <common-pages-hardware-health-history-testimony-tools-chart-options-modal-notification-old
         v-show="isShowAlerts"
         :alerts="alerts"
         @remove="onRemoveAlerts"
@@ -46,7 +46,7 @@ const onHide = (): void => {
 }
 const onSave = (): void => {
   if (!name.value) {
-    alerts.value = [localization.value.settingsNameErrorDesc]
+    alerts.value = [localization.value.common.settingsNameErrorDesc]
     isShowAlerts.value = true
 
     return

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

@@ -1,43 +1,73 @@
 <template>
-  <div class="vertical-flex-container chart-option-counters-container">
-    <common-pages-hardware-health-history-testimony-tools-chart-options-modal-counters-table
-      :chart="props.chart"
-      :selected-power-keys="props.selectedPowerKeys"
-      :selected-temperature-keys="props.selectedTemperatureKeys"
-      :power-counters-table-data="props.powerCountersTableData"
-      :temperature-counters-table-data="props.temperatureCountersTableData"
-      @select-power-row="emits('select-power-row', $event)"
-      @select-temperature-row="emits('select-temperature-row', $event)"
-      @total-items="totalMetricItems = $event"
-    />
-    <common-pages-hardware-health-history-testimony-tools-chart-options-modal-counters-timespan
-      :language="props.language"
-      :selected-chart-type="props.selectedChartType"
-      :selected-timespan-type="props.selectedTimespanType"
-      :units-count="props.unitsCount"
-      :period-type="props.periodType"
-      :selected-custom-time="props.selectedCustomTime"
-      :custom-date-from="props.customDateFrom"
-      :custom-date-to="props.customDateTo"
-      :custom-time-from="props.customTimeFrom"
-      :custom-time-to="props.customTimeTo"
-      :valid-date-end="props.validDateEnd"
-      @update-chart-type="emits('update-chart-type', $event)"
-      @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-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)"
-      @update-custom-time-to="emits('update-custom-time-to', $event)"
-    />
-  </div>
+  <common-pages-hardware-health-history-testimony-tools-chart-options-modal-counters-new
+    v-if="isNewView"
+    :chart="props.chart"
+    :selected-power-keys="props.selectedPowerKeys"
+    :selected-temperature-keys="props.selectedTemperatureKeys"
+    :power-counters-table-data="props.powerCountersTableData"
+    :temperature-counters-table-data="props.temperatureCountersTableData"
+    :language="props.language"
+    :selected-chart-type="props.selectedChartType"
+    :selected-timespan-type="props.selectedTimespanType"
+    :units-count="props.unitsCount"
+    :period-type="props.periodType"
+    :selected-custom-time="props.selectedCustomTime"
+    :custom-date-from="props.customDateFrom"
+    :custom-date-to="props.customDateTo"
+    :custom-time-from="props.customTimeFrom"
+    :custom-time-to="props.customTimeTo"
+    :valid-date-end="props.validDateEnd"
+    @select-power-row="emits('select-power-row', $event)"
+    @select-temperature-row="emits('select-temperature-row', $event)"
+    @change-total-metrics="totalMetricItems = $event"
+    @update-chart-type="emits('update-chart-type', $event)"
+    @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-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)"
+    @update-custom-time-to="emits('update-custom-time-to', $event)"
+  />
+  <common-pages-hardware-health-history-testimony-tools-chart-options-modal-counters-old
+    v-else
+    :chart="props.chart"
+    :selected-power-keys="props.selectedPowerKeys"
+    :selected-temperature-keys="props.selectedTemperatureKeys"
+    :power-counters-table-data="props.powerCountersTableData"
+    :temperature-counters-table-data="props.temperatureCountersTableData"
+    :language="props.language"
+    :selected-chart-type="props.selectedChartType"
+    :selected-timespan-type="props.selectedTimespanType"
+    :units-count="props.unitsCount"
+    :period-type="props.periodType"
+    :selected-custom-time="props.selectedCustomTime"
+    :custom-date-from="props.customDateFrom"
+    :custom-date-to="props.customDateTo"
+    :custom-time-from="props.customTimeFrom"
+    :custom-time-to="props.customTimeTo"
+    :valid-date-end="props.validDateEnd"
+    @select-power-row="emits('select-power-row', $event)"
+    @select-temperature-row="emits('select-temperature-row', $event)"
+    @change-total-metrics="totalMetricItems = $event"
+    @update-chart-type="emits('update-chart-type', $event)"
+    @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-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)"
+    @update-custom-time-to="emits('update-custom-time-to', $event)"
+  />
 </template>
 
 <script setup lang="ts">
 import type { 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_T_Chart
+} from "~/components/common/pages/hardwareHealth/historyTestimony/tools/chartOptionsModal/lib/models/types";
 
 const props = defineProps<{
   chart: UI_T_Chart
@@ -75,20 +105,11 @@ const emits = defineEmits<{
   (event: 'update-custom-time-to', value: string): void
 }>()
 
+const { $store }: any = useNuxtApp()
+
+const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
+
 const totalMetricItems = ref<number>(0)
 </script>
 
-<style scoped lang="scss">
-.chart-option-counters-container {
-  margin-top: 20px;
-  flex-basis: 80%;
-  padding-left: 15px;
-  max-width: 80%;
-}
-@media (max-width: 1024px) {
-  .chart-option-counters-container {
-    max-width: unset;
-    padding-left: 0;
-  }
-}
-</style>
+<style scoped lang="scss"></style>

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

@@ -0,0 +1,108 @@
+<template>
+  <div
+    ref="chartOptionsBottomBlock"
+    :class="['chart-options-bottom-right-container', { 'is-scrolled' :isScrolledBlock }]"
+  >
+    <div v-show="isScrolledBlock" class="border-block"></div>
+    <common-pages-hardware-health-history-testimony-tools-chart-options-modal-counters-table
+      :chart="props.chart"
+      :selected-power-keys="props.selectedPowerKeys"
+      :selected-temperature-keys="props.selectedTemperatureKeys"
+      :power-counters-table-data="props.powerCountersTableData"
+      :temperature-counters-table-data="props.temperatureCountersTableData"
+      @select-power-row="emits('select-power-row', $event)"
+      @select-temperature-row="emits('select-temperature-row', $event)"
+      @total-items="emits('change-total-metrics', $event)"
+    />
+    <common-pages-hardware-health-history-testimony-tools-chart-options-modal-counters-timespan
+      :language="props.language"
+      :selected-chart-type="props.selectedChartType"
+      :selected-timespan-type="props.selectedTimespanType"
+      :units-count="props.unitsCount"
+      :period-type="props.periodType"
+      :selected-custom-time="props.selectedCustomTime"
+      :custom-date-from="props.customDateFrom"
+      :custom-date-to="props.customDateTo"
+      :custom-time-from="props.customTimeFrom"
+      :custom-time-to="props.customTimeTo"
+      :valid-date-end="props.validDateEnd"
+      @update-chart-type="emits('update-chart-type', $event)"
+      @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-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)"
+      @update-custom-time-to="emits('update-custom-time-to', $event)"
+    />
+  </div>
+</template>
+<script setup lang="ts">
+import { useScroll } from '@vueuse/core'
+import type { UI_T_Chart } from '~/components/common/pages/hardwareHealth/historyTestimony/tools/chartOptionsModal/lib/models/types'
+import type { UI_I_HardwareHealthSensorsGraph } from '~/components/common/pages/hardwareHealth/historyTestimony/lib/models/interfaces'
+
+const props = defineProps<{
+  chart: UI_T_Chart
+  selectedPowerKeys: number[]
+  selectedTemperatureKeys: number[]
+  powerCountersTableData: UI_I_HardwareHealthSensorsGraph[]
+  temperatureCountersTableData: UI_I_HardwareHealthSensorsGraph[]
+  language: string
+  selectedChartType: string
+  selectedTimespanType: string
+  unitsCount: number
+  periodType: string
+  selectedCustomTime: string
+  customDateFrom: string
+  customDateTo: string
+  customTimeFrom: string
+  customTimeTo: string
+  validDateEnd: number
+}>()
+const emits = defineEmits<{
+  (event: 'select-power-row', value: UI_I_HardwareHealthSensorsGraph[]): void
+  (
+    event: 'select-temperature-row',
+    value: UI_I_HardwareHealthSensorsGraph[]
+  ): void
+  (event: 'change-total-metrics', value: number): 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-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
+}>()
+
+const chartOptionsBottomBlock = ref<HTMLElement | null>(null)
+const { y } = useScroll(chartOptionsBottomBlock)
+const isScrolledBlock = computed<boolean>(() => y.value > 0)
+</script>
+
+<style scoped lang="scss">
+.chart-options-bottom-right-container {
+  overflow-x: hidden;
+  overflow-y: auto;
+  padding-right: 18px;
+  padding-left: 12px;
+  padding-top: 6px;
+  scrollbar-gutter: stable;
+
+  &.is-scrolled {
+    margin-top: 6px;
+    padding-top: 0;
+  }
+
+  .border-block {
+    border-top: 1px solid var(--counters-border-block-border-color);
+    position: sticky;
+    inset: 0;
+    z-index: var(--z-fixed);
+  }
+}
+</style>

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

@@ -0,0 +1,93 @@
+<template>
+  <div class="vertical-flex-container chart-option-counters-container">
+    <common-pages-hardware-health-history-testimony-tools-chart-options-modal-counters-table
+      :chart="props.chart"
+      :selected-power-keys="props.selectedPowerKeys"
+      :selected-temperature-keys="props.selectedTemperatureKeys"
+      :power-counters-table-data="props.powerCountersTableData"
+      :temperature-counters-table-data="props.temperatureCountersTableData"
+      @select-power-row="emits('select-power-row', $event)"
+      @select-temperature-row="emits('select-temperature-row', $event)"
+      @total-items="emits('change-total-metrics', $event)"
+    />
+    <common-pages-hardware-health-history-testimony-tools-chart-options-modal-counters-timespan
+      :language="props.language"
+      :selected-chart-type="props.selectedChartType"
+      :selected-timespan-type="props.selectedTimespanType"
+      :units-count="props.unitsCount"
+      :period-type="props.periodType"
+      :selected-custom-time="props.selectedCustomTime"
+      :custom-date-from="props.customDateFrom"
+      :custom-date-to="props.customDateTo"
+      :custom-time-from="props.customTimeFrom"
+      :custom-time-to="props.customTimeTo"
+      :valid-date-end="props.validDateEnd"
+      @update-chart-type="emits('update-chart-type', $event)"
+      @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-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)"
+      @update-custom-time-to="emits('update-custom-time-to', $event)"
+    />
+  </div>
+</template>
+<script setup lang="ts">
+import type { UI_T_Chart } from '~/components/common/pages/hardwareHealth/historyTestimony/tools/chartOptionsModal/lib/models/types'
+import type { UI_I_HardwareHealthSensorsGraph } from '~/components/common/pages/hardwareHealth/historyTestimony/lib/models/interfaces'
+
+const props = defineProps<{
+  chart: UI_T_Chart
+  selectedPowerKeys: number[]
+  selectedTemperatureKeys: number[]
+  powerCountersTableData: UI_I_HardwareHealthSensorsGraph[]
+  temperatureCountersTableData: UI_I_HardwareHealthSensorsGraph[]
+  language: string
+  selectedChartType: string
+  selectedTimespanType: string
+  unitsCount: number
+  periodType: string
+  selectedCustomTime: string
+  customDateFrom: string
+  customDateTo: string
+  customTimeFrom: string
+  customTimeTo: string
+  validDateEnd: number
+}>()
+
+const emits = defineEmits<{
+  (event: 'select-power-row', value: UI_I_HardwareHealthSensorsGraph[]): void
+  (
+    event: 'select-temperature-row',
+    value: UI_I_HardwareHealthSensorsGraph[]
+  ): void
+  (event: 'change-total-metrics', value: number): 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-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
+}>()
+</script>
+
+<style scoped lang="scss">
+.chart-option-counters-container {
+  margin-top: 20px;
+  flex-basis: 80%;
+  padding-left: 15px;
+  max-width: 80%;
+}
+
+@media (max-width: 1024px) {
+  .chart-option-counters-container {
+    max-width: unset;
+    padding-left: 0;
+  }
+}
+</style>

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

@@ -1,39 +1,31 @@
 <template>
-  <div class="vertical-flex-container chart-option-counters-vertical-split">
-    <span class="chart-options-grid-title">{{
-      localization.inventoryMonitor.selectCountersForThisChart
-    }}</span>
-
-    <atoms-table-data-grid
-      v-model:selected-row="selectedCounters"
-      v-model:column-keys="columnItems"
-      v-model:page-size="pagination.pageSize"
-      v-model:page="pagination.page"
-      :head-items="headItems"
-      :body-items="bodyItems"
-      :total-items="totalItems"
-      :total-pages="totalPages"
-      type="checkbox"
-      class="data-table"
-      test-id="chart-options-table"
-      hide-footer
-      server-off
-      @change="onChangeRow"
-    />
-  </div>
+  <common-pages-hardware-health-history-testimony-tools-chart-options-modal-counters-table-table-new
+    v-if="isNewView"
+    v-model:selected-counters="selectedCounters"
+    :power-counters-table-data="props.powerCountersTableData"
+    :temperature-counters-table-data="props.temperatureCountersTableData"
+    :chart="props.chart"
+    :total-items="totalItems"
+    :total-pages="totalPages"
+    @select-row="onChangeRow"
+  />
+  <common-pages-hardware-health-history-testimony-tools-chart-options-modal-counters-table-table-old
+    v-else
+    v-model:selected-counters="selectedCounters"
+    :pagination="pagination"
+    :power-counters-table-data="props.powerCountersTableData"
+    :temperature-counters-table-data="props.temperatureCountersTableData"
+    :chart="props.chart"
+    :total-items="totalItems"
+    :total-pages="totalPages"
+    @select-row="onChangeRow"
+  />
 </template>
 
 <script setup lang="ts">
-import type { UI_I_Localization } from '~/lib/models/interfaces'
 import type { UI_I_Pagination } from '~/lib/models/table/interfaces'
-import type {
-  UI_I_BodyItem,
-  UI_I_ColumnKey,
-  UI_I_HeadItem,
-} from '~/components/atoms/table/dataGrid/lib/models/interfaces'
 import type { 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 * as table from '~/components/common/pages/hardwareHealth/historyTestimony/tools/chartOptionsModal/counters/table/lib/config/tableConfig'
 
 const props = defineProps<{
   chart: UI_T_Chart
@@ -52,7 +44,9 @@ const emits = defineEmits<{
   (event: 'total-items', value: number): void
 }>()
 
-const localization = computed<UI_I_Localization>(() => useLocal())
+const { $store }: any = useNuxtApp()
+
+const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
 
 const totalItems = computed<number>(() => props.powerCountersTableData.length)
 const totalPages = computed<number>(() => 1)
@@ -98,42 +92,6 @@ const pagination = ref<UI_I_Pagination>({
   pageSize: 35,
 })
 
-const columnItems = computed<UI_I_ColumnKey[]>(() =>
-  table.columnKeys(localization.value)
-)
-const headItems = computed<UI_I_HeadItem[]>(() =>
-  table.headItems(localization.value)
-)
-const bodyItems = ref<UI_I_BodyItem[][]>([])
-
-watch(
-  () => [
-    props.powerCountersTableData,
-    props.temperatureCountersTableData,
-    props.chart,
-  ],
-  (newValue) => {
-    if (
-      (!newValue[0].length && newValue[2] === 'power') ||
-      (!newValue[1].length && newValue[2] === 'temperature')
-    )
-      return
-
-    let currentBody: UI_I_HardwareHealthSensorsGraph[] = []
-    switch (newValue[2]) {
-      case 'power':
-        currentBody = newValue[0]
-        break
-      case 'temperature':
-        currentBody = newValue[1]
-        break
-    }
-
-    bodyItems.value = table.bodyItems(currentBody)
-  },
-  { deep: true, immediate: true }
-)
-
 const onChangeRow = (value: number[]): void => {
   const result: UI_I_HardwareHealthSensorsGraph[] = []
 
@@ -160,15 +118,4 @@ watch(
 )
 </script>
 
-<style scoped lang="scss">
-.chart-option-counters-vertical-split {
-  .chart-options-grid-title {
-    display: block;
-    margin-bottom: -20px;
-  }
-
-  :deep(.datagrid-table-wrapper) {
-    max-height: 176px;
-  }
-}
-</style>
+<style scoped lang="scss"></style>

package/components/common/pages/hardwareHealth/historyTestimony/tools/chartOptionsModal/counters/table/lib/models/interfaces.ts

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

package/components/common/pages/hardwareHealth/historyTestimony/tools/chartOptionsModal/counters/table/tableNew/TableNew.vue

@@ -0,0 +1,58 @@
+<template>
+  <div class="chart-options-table-container">
+    <ui-data-table
+      :data="dataLocal"
+      :options="options"
+      :total-pages="props.totalPages"
+      :total-items="props.totalItems"
+      test-id="chart-options-table"
+      size="sm"
+      @select-row="emits('select-row', $event)"
+    />
+  </div>
+</template>
+<script setup lang="ts">
+import type { UI_I_DataTable } from '~/node_modules/bfg-uikit/components/ui/dataTable/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_HardwareHealthSensorsGraph } from '~/components/common/pages/hardwareHealth/historyTestimony/lib/models/interfaces'
+import { options } from '~/components/common/pages/hardwareHealth/historyTestimony/tools/chartOptionsModal/counters/table/tableNew/lib/config/options'
+import { tableDataFunc } from '~/components/common/pages/hardwareHealth/historyTestimony/tools/chartOptionsModal/counters/table/tableNew/lib/config/tableData'
+
+const selectedCounters = defineModel<number[]>('selectedCounters', {
+  required: true,
+})
+
+const props = defineProps<{
+  powerCountersTableData: UI_I_HardwareHealthSensorsGraph[]
+  temperatureCountersTableData: UI_I_HardwareHealthSensorsGraph[]
+  chart: UI_T_Chart
+  totalItems: number
+  totalPages: number
+}>()
+const emits = defineEmits<{
+  (events: 'select-row', value: number[]): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const countersData = computed<UI_I_HardwareHealthSensorsGraph[]>(() =>
+  props.chart === 'power'
+    ? props.powerCountersTableData
+    : props.temperatureCountersTableData
+)
+
+const dataLocal = computed<UI_I_DataTable>(() =>
+  tableDataFunc(localization.value, countersData.value, selectedCounters.value)
+)
+</script>
+<style scoped lang="scss">
+:deep(.bottom-grid-content) {
+  max-height: 235px;
+}
+:deep(.table-title-actions-container) {
+  .title-container h5 {
+    font-size: 14px;
+  }
+}
+</style>

package/components/common/pages/hardwareHealth/historyTestimony/tools/chartOptionsModal/counters/table/tableNew/lib/config/options.ts

@@ -0,0 +1,19 @@
+import type { UI_I_DataTableOptions } from '~/node_modules/bfg-uikit/components/ui/dataTable/models/interfaces'
+
+export const options: UI_I_DataTableOptions = {
+  perPageOptions: [
+    { text: '10', value: 10 },
+    { text: '25', value: 25 },
+    { text: '50', value: 50 },
+    { text: '100', value: 100 },
+  ],
+  isSelectable: true,
+  showPagination: false,
+  showPageInfo: false,
+  isSortable: true,
+  server: false,
+  isResizable: true,
+  showSearch: false,
+  showColumnManager: false,
+  inBlock: true,
+}