bfg-common 1.6.113 → 1.6.114

package/components/common/graph/Graph.vue

@@ -1,10 +1,11 @@
 <template>
-  <common-graph-graph-new
-    v-if="isNewView"
-    :chart-options="chartOptions"
-    @select-item="onSelectNewViewExportItem"
-  />
-  <common-graph-old v-else :chart-options="chartOptions" />
+  <div class="common-graph-block">
+    <component
+      :is="currentComponent"
+      :chart-options="chartOptions"
+      @select-item="onSelectNewViewExportItem"
+    />
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -24,13 +25,19 @@ const props = withDefaults(
   {
     chart: undefined,
     exportType: undefined,
-    selectedRow: [],
+    selectedRow: () => [],
   }
 )
 
 const { $store }: any = useNuxtApp()
 const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
 
+const currentComponent = computed(() =>
+  isNewView.value
+    ? defineAsyncComponent(() => import('./new/New.vue'))
+    : defineAsyncComponent(() => import('./Old.vue'))
+)
+
 let localChart: any = null
 const exportChart = (type: string): void => {
   if (type === 'png') {
@@ -124,4 +131,8 @@ watch(
 )
 </script>
 
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+.common-graph-block {
+  display: contents;
+}
+</style>

package/components/common/graph/{graphNew/GraphNew.vue → new/New.vue}

@@ -15,9 +15,9 @@
             <ui-button
               :test-id="`button-metric-${uniqueId}`"
               :class="['metric-export-button', { active: isShowDropdown }]"
+              variant="text"
               is-without-sizes
               is-without-height
-              variant="text"
               @click="isShowDropdown = !isShowDropdown"
             >
               <ui-icon name="burger" width="20" height="20" />
@@ -27,8 +27,8 @@
               :show="isShowDropdown"
               :items="dropdownItems"
               :elem-id="`button-metric-${uniqueId}`"
-              left
               width="max-content"
+              left
               @select="onSelect($event)"
               @hide="isShowDropdown = false"
             />
@@ -48,7 +48,7 @@
 import { useFullscreen } from '@vueuse/core'
 import type { UI_I_Dropdown } from '~/node_modules/bfg-uikit/components/ui/dropdown/models/interfaces'
 import type { UI_I_Localization } from '~/lib/models/interfaces'
-import { UI_E_ChartExportIconByKey } from '~/components/common/graph/graphNew/lib/models/enums'
+import { UI_E_ChartExportIconByKey } from '~/components/common/graph/new/lib/models/enums'
 
 const props = withDefaults(
   defineProps<{

package/components/common/modals/confirmation/Confirmation.vue

@@ -10,6 +10,7 @@
     @hide-modal="emits('hide-modal')"
     @confirm="emits('confirm')"
   >
+<!--    TODO fix slot name-->
     <template #otherContent>
       <slot v-if="$slots.otherContent" name="otherContent" />
     </template>

package/components/common/monitor/advanced/Advanced.vue

@@ -1,53 +1,6 @@
 <template>
-  <common-monitor-advanced-new
-    v-if="isNewView"
-    v-model:selected-timespan-type="localSelectedTimespanType"
-    :type="props.type"
-    :is-empty="props.isEmpty"
-    :advanced-loading="props.advancedLoading"
-    :data="props.data"
-    :export-graph-type="exportGraphType"
-    :table-data="props.tableData"
-    :language="props.language"
-    :dark-mode="props.darkMode"
-    :selected-counters-keys="props.selectedCountersKeys"
-    :selected-metric="props.selectedMetric"
-    :selected-chart-type="props.selectedChartType"
-    :units-count="props.unitsCount"
-    :period-type="props.periodType"
-    :selected-custom-time="props.selectedCustomTime"
-    :selected-chart-option-name="props.selectedChartOptionName"
-    :custom-date-from="props.customDateFrom"
-    :custom-date-to="props.customDateTo"
-    :custom-time-from="props.customTimeFrom"
-    :custom-time-to="props.customTimeTo"
-    :total-cores="totalCores"
-    :host-id="props.hostId"
-    :objects-loading="props.objectsLoading"
-    :objects-data="props.objectsData"
-    :valid-date-end="props.validDateEnd"
-    :format-date="props.formatDate"
-    :selected-table-row="selectedTableRow"
-    :selected-node-name="props.selectedNodeName"
-    :project="props.project"
-    :power-data="props.powerData"
-    :temperature-data="props.temperatureData"
-    @update-tools="emits('update-tools', $event)"
-    @export-graph="onExporting"
-    @open-advanced-page="emits('open-advanced-page')"
-    @select-row="emits('select-row', $event)"
-    @select-metric-local="emits('select-metric-local', $event)"
-    @update-chart-type="emits('update-chart-type', $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-time="emits('update-custom-time', $event)"
-    @delete-option="emits('delete-option')"
-    @submit-options="emits('submit-options', $event)"
-    @selected-table-row="onSelectTableRow"
-  />
-  <common-monitor-advanced-old
-    v-else
+  <component
+    :is="currentComponent"
     v-model:selected-timespan-type="localSelectedTimespanType"
     :type="props.type"
     :is-empty="props.isEmpty"
@@ -78,6 +31,7 @@
     :project="props.project"
     :power-data="props.powerData"
     :temperature-data="props.temperatureData"
+    :selected-node-name="props.selectedNodeName"
     @update-tools="emits('update-tools', $event)"
     @export-graph="onExporting"
     @open-advanced-page="emits('open-advanced-page')"
@@ -170,6 +124,12 @@ const { $store }: any = useNuxtApp()
 
 const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
 
+const currentComponent = computed(() =>
+  isNewView.value
+    ? defineAsyncComponent(() => import('./New.vue'))
+    : defineAsyncComponent(() => import('./Old.vue'))
+)
+
 const localSelectedTimespanType = computed<string>({
   get() {
     return props.selectedTimespanType

package/components/common/monitor/advanced/graphView/GraphView.vue

@@ -1,17 +1,7 @@
 <template>
   <div ref="chartsView">
-    <common-monitor-advanced-graph-view-new
-      v-if="isNewView"
-      :loading="props.loading"
-      :is-loading="isLoading"
-      :chart-data="chartData"
-      :chart="chart"
-      :chart-helper="chartHelper"
-      :export-type="props.export"
-      :selected-row="props.selectedRow"
-    />
-    <common-monitor-advanced-graph-view-old
-      v-else
+    <component
+      :is="currentComponent"
       :loading="props.loading"
       :is-loading="isLoading"
       :chart-data="chartData"
@@ -51,6 +41,12 @@ const localization = computed<UI_I_Localization>(() => useLocal())
 
 const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
 
+const currentComponent = computed(() =>
+  isNewView.value
+    ? defineAsyncComponent(() => import('./New.vue'))
+    : defineAsyncComponent(() => import('./Old.vue'))
+)
+
 const isLoading = ref<boolean>(true)
 
 const chartData = ref<I_LineGraph | null>(null)

package/components/common/monitor/advanced/graphView/{GraphViewNew.vue → New.vue}

@@ -1,6 +1,6 @@
 <template>
   <div :class="['advanced-graph-container', { loading: props.isLoading }]">
-    <common-graph-graph-new-empty-block v-if="!props.loading && !props.chartData" />
+    <common-graph-new-empty-block v-if="!props.loading && !props.chartData" />
     <ui-skeleton-long-metric
       v-if="props.isLoading && props.loading"
       height="336px"

package/components/common/monitor/advanced/table/Table.vue

@@ -1,13 +1,8 @@
 <template>
-  <common-monitor-advanced-table-table-new
-    v-if="isNewView"
-    :loading="props.loading"
-    :items="props.data"
-    @select="emits('select', $event)"
-  />
-  <common-monitor-advanced-table-table-old
-    v-else
+  <component
+    :is="currentComponent"
     :data="props.data"
+    :loading="props.loading"
     @select="emits('select', $event)"
   />
 </template>
@@ -26,6 +21,12 @@ const emits = defineEmits<{
 const { $store }: any = useNuxtApp()
 
 const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
+
+const currentComponent = computed(() =>
+  isNewView.value
+    ? defineAsyncComponent(() => import('./new/New.vue'))
+    : defineAsyncComponent(() => import('./old/Old.vue'))
+)
 </script>
 
 <style scoped lang="scss"></style>

package/components/common/monitor/advanced/table/{tableNew/TableNew.vue → new/New.vue}

@@ -37,21 +37,22 @@ import type { UI_I_PerformanceItem } from '~/components/common/monitor/advanced/
 import {
   bodyOptions,
   headOptions,
-} from '~/components/common/monitor/advanced/table/tableNew/lib/config/options'
+} from '~/components/common/monitor/advanced/table/new/lib/config/options'
 import { tableTextsFunc } from '~/lib/config/uiTable'
 
-const localization = computed<UI_I_Localization>(() => useLocal())
-
 const props = defineProps<{
   loading: boolean
-  items: UI_I_PerformanceItem[]
+  data: UI_I_PerformanceItem[]
 }>()
+
 const emits = defineEmits<{
   (event: 'select', value: number[]): void
 }>()
 
+const localization = computed<UI_I_Localization>(() => useLocal())
+
 const data = computed<UI_I_DataTable>(() =>
-  bodyOptions(localization.value, props.items)
+  bodyOptions(localization.value, props.data)
 )
 
 const options = computed<UI_I_DataTableOptions>(() => headOptions())

package/components/common/monitor/advanced/table/{tableNew → new}/lib/config/options.ts

@@ -2,7 +2,7 @@ import type { UI_I_DataTable } from '~/node_modules/bfg-uikit/components/ui/data
 import type { UI_I_DataTableOptions } from '~/node_modules/bfg-uikit/components/ui/dataTable/models/interfaces'
 import type { UI_I_Localization } from '~/lib/models/interfaces'
 import type { UI_I_PerformanceItem } from '~/components/common/monitor/advanced/table/lib/models/interfaces'
-import { constructUsersAndGroupsTableItems } from '~/components/common/monitor/advanced/table/tableNew/lib/utils/constructBody'
+import { constructUsersAndGroupsTableItems } from '~/components/common/monitor/advanced/table/new/lib/utils/constructBody'
 
 export const bodyOptions = (
   localization: UI_I_Localization,

package/components/common/monitor/advanced/table/{tableOld/TableOld.vue → old/Old.vue}

@@ -13,6 +13,7 @@
         :body-items="dataBody"
         :total-items="dataBody.length"
         :total-pages="1"
+        :loading="props.loading"
         type="checkbox"
         class="data-table"
         test-id="advances-table"
@@ -37,17 +38,19 @@ import type {
   UI_I_ColumnKey,
 } from '~/components/atoms/table/dataGrid/lib/models/interfaces'
 import type { UI_I_PerformanceItem } from '~/components/common/monitor/advanced/table/lib/models/interfaces'
-import * as table from '~/components/common/monitor/advanced/table/tableOld/lib/config/performanceDatatable'
-
-const localization = computed<UI_I_Localization>(() => useLocal())
+import * as table from '~/components/common/monitor/advanced/table/old/lib/config/performanceDatatable'
 
 const props = defineProps<{
   data: UI_I_PerformanceItem[]
+  loading: boolean
 }>()
+
 const emits = defineEmits<{
   (event: 'select', value: number[]): void
 }>()
 
+const localization = computed<UI_I_Localization>(() => useLocal())
+
 const selectedRow = ref<number[]>([])
 const pageSize = ref<number>(100)
 const page = ref<number>(1)

package/components/common/monitor/advanced/tools/{ToolsNew.vue → New.vue}

@@ -132,11 +132,13 @@ const props = withDefaults(
     temperatureData: UI_I_AdvancedCounterItem[]
     disabledPeriod?: boolean
     disabledView?: boolean
+    chartTitle?: string // For Console Warning
     selectedNodeName?: string
   }>(),
   {
     disabledPeriod: undefined,
     disabledView: undefined,
+    chartTitle: undefined,
     selectedNodeName: undefined,
   }
 )
@@ -149,6 +151,8 @@ const emits = defineEmits<{
   (event: 'save-option-name'): void
   (event: 'change-period'): void
   (event: 'change-view'): void
+  (event: 'exporting', value: string): void // For Console Warning
+  (event: 'open-advanced-page'): void // For Console Warning
   (event: 'select-row', value: UI_I_AdvancedCounterItem[]): void
   (event: 'select-metric-local', value: string): void
   (event: 'update-chart-type', value: string): void

package/components/common/monitor/advanced/tools/{ToolsOld.vue → Old.vue}

@@ -179,10 +179,12 @@ const props = withDefaults(
     temperatureData: UI_I_AdvancedCounterItem[]
     disabledPeriod?: boolean
     disabledView?: boolean
+    selectedNodeName?: string // For Console Warning
   }>(),
   {
     disabledPeriod: undefined,
     disabledView: undefined,
+    selectedNodeName: undefined,
   }
 )
 

package/components/common/monitor/advanced/tools/Tools.vue

@@ -1,6 +1,6 @@
 <template>
-  <common-monitor-advanced-tools-new
-    v-if="isNewView"
+  <component
+    :is="currentComponent"
     v-model:selected-view="selectedView"
     v-model:is-show-modal-local="isShowModal"
     v-model:selected-period="selectedPeriod"
@@ -12,7 +12,6 @@
     :selected-metric="props.selectedMetric"
     :disabled-period="props.disabledPeriod"
     :disabled-view="props.disabledView"
-    :selected-chart-type="props.selectedChartType"
     :units-count="props.unitsCount"
     :period-type="props.periodType"
     :selected-custom-time="props.selectedCustomTime"
@@ -30,62 +29,17 @@
     :format-date="props.formatDate"
     :view-options="viewOptions"
     :period-options="periodOptions"
-    :selected-node-name="props.selectedNodeName"
     :power-data="props.powerData"
     :temperature-data="props.temperatureData"
-    @save-option-name="onSaveOptionName"
-    @change-period="updateTools"
-    @change-view="updateTools"
-    @select-row="emits('select-row', $event)"
-    @select-metric-local="emits('select-metric-local', $event)"
-    @update-chart-type="emits('update-chart-type', $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-time="emits('update-custom-time', $event)"
-    @delete-option="onDeleteOption"
-    @submit-options="emits('submit-options', $event)"
-  />
-  <common-monitor-advanced-tools-old
-    v-else
-    v-model:selected-view="selectedView"
-    v-model:is-show-modal-local="isShowModal"
-    v-model:selected-period="selectedPeriod"
-    :selected-timespan-type="localSelectedTimespanType"
-    :type="props.type"
-    :chart-title="props.chartTitle"
-    :chart-title-date="chartTitleDate"
-    :language="props.language"
-    :selected-counters-keys="props.selectedCountersKeys"
-    :selected-metric="props.selectedMetric"
-    :disabled-period="props.disabledPeriod"
-    :disabled-view="props.disabledView"
     :selected-chart-type="props.selectedChartType"
-    :units-count="props.unitsCount"
-    :period-type="props.periodType"
-    :selected-custom-time="props.selectedCustomTime"
-    :selected-chart-option-name="props.selectedChartOptionName"
-    :custom-date-from="props.customDateFrom"
-    :custom-date-to="props.customDateTo"
-    :custom-time-from="props.customTimeFrom"
-    :custom-time-to="props.customTimeTo"
-    :total-cores="totalCores"
-    :host-id="props.hostId"
-    :project="props.project"
-    :objects-loading="props.objectsLoading"
-    :objects-data="props.objectsData"
-    :valid-date-end="props.validDateEnd"
-    :format-date="props.formatDate"
-    :view-options="viewOptions"
-    :period-options="periodOptions"
-    :power-data="props.powerData"
-    :temperature-data="props.temperatureData"
+    :selected-node-name="props.selectedNodeName"
+    :chart-title="props.chartTitle"
     @save-option-name="onSaveOptionName"
     @change-period="updateTools"
     @change-view="updateTools"
     @exporting="emits('exporting', $event)"
-    @open-advanced-page="emits('open-advanced-page')"
     @select-row="emits('select-row', $event)"
+    @open-advanced-page="emits('open-advanced-page')"
     @select-metric-local="emits('select-metric-local', $event)"
     @update-chart-type="emits('update-chart-type', $event)"
     @update-timespan-type="emits('update-timespan-type', $event)"
@@ -178,10 +132,14 @@ const { $store, $formattedDatetime }: any = useNuxtApp()
 
 const localization = computed<UI_I_Localization>(() => useLocal())
 
-const routeType = '' + useRoute().params.type
-
 const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
 
+const currentComponent = computed(() =>
+  isNewView.value
+    ? defineAsyncComponent(() => import('./New.vue'))
+    : defineAsyncComponent(() => import('./Old.vue'))
+)
+
 const updateTimeFormatAndInterfaceLang = computed<number>(
   () => $store.getters['main/getUpdateTimeFormatAndInterfaceLang']
 )

package/components/common/monitor/advanced/tools/chartOptionsModal/actions/Actions.vue

@@ -1,26 +1,16 @@
 <template>
-  <common-monitor-advanced-tools-chart-options-modal-actions-new
-    v-if="isNewView"
+  <component
+    :is="currentComponent"
     v-model:is-confirm-modal="isConfirmModal"
     v-model:local-selected-chart-option="localSelectedChartOption"
     :chart-options="chartOptions"
     :is-disabled-delete-action="isDisabledDeleteAction"
+    :is-show-save-options-modal="isShowSaveOptionsModal"
     @save-options="onSaveOptions"
     @delete-action="onDeleteAction"
     @apply-delete="onApplyDelete"
-  />
-  <common-monitor-advanced-tools-chart-options-modal-actions-old
-    v-else
-    v-model:is-confirm-modal="isConfirmModal"
-    v-model:local-selected-chart-option="localSelectedChartOption"
-    :chart-options="chartOptions"
-    :is-show-save-options-modal="isShowSaveOptionsModal"
-    :is-disabled-delete-action="isDisabledDeleteAction"
     @show-save-options-modal="onShowSaveOptionsModal"
     @hide-save-options-modal="onHideSaveOptionsModal"
-    @save-options="onSaveOptions"
-    @delete-action="onDeleteAction"
-    @apply-delete="onApplyDelete"
   />
 </template>
 
@@ -46,6 +36,12 @@ const { $store }: any = useNuxtApp()
 
 const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
 
+const currentComponent = computed(() =>
+  isNewView.value
+    ? defineAsyncComponent(() => import('./New.vue'))
+    : defineAsyncComponent(() => import('./Old.vue'))
+)
+
 const localization = computed<UI_I_Localization>(() => useLocal())
 
 const localSelectedChartOption = ref<string>('select_options')

package/components/common/monitor/advanced/tools/chartOptionsModal/actions/{ActionsNew.vue → New.vue}

@@ -6,8 +6,8 @@
       :label="localization.common.options"
       :margin-between-trigger="4"
       select-width="100%"
-      show-text
       test-id="chart-options-select"
+      show-text
     />
     <ui-input
       v-model="newChartName"
@@ -27,7 +27,7 @@
       @click="onSaveNewName"
     >
       <template #icon>
-        <ui-icon name="check" width="18" height="18"></ui-icon>
+        <ui-icon name="check" width="18" height="18" />
       </template>
       <span>{{ localization.common.save }}</span>
     </ui-button>
@@ -42,7 +42,7 @@
       @click="emits('delete-action')"
     >
       <template #icon>
-        <ui-icon name="delete" width="18" height="18"></ui-icon>
+        <ui-icon name="delete" width="18" height="18" />
       </template>
       <span>{{ localization.common.delete }}</span>
     </ui-button>
@@ -75,10 +75,13 @@ const isConfirmModalLocal = defineModel<boolean>('isConfirmModal', {
 
 const props = defineProps<{
   chartOptions: UI_I_OptionItem[]
+  isShowSaveOptionsModal: boolean // For Console Warning
   isDisabledDeleteAction: boolean
 }>()
 
 const emits = defineEmits<{
+  (event: 'show-save-options-modal'): void // For Console Warning
+  (event: 'hide-save-options-modal'): void // For Console Warning
   (event: 'save-options', value: string): void
   (event: 'delete-action'): void
   (event: 'apply-delete'): void

package/components/common/monitor/advanced/tools/chartOptionsModal/counters/Counters.vue

@@ -1,6 +1,6 @@
 <template>
-  <common-monitor-advanced-tools-chart-options-modal-counters-new
-    v-if="isNewView"
+  <component
+    :is="currentComponent"
     v-model:total-metric-items="totalMetricItems"
     :chart="props.chart"
     :language="props.language"
@@ -21,53 +21,15 @@
     :objects-loading="props.objectsLoading"
     :objects-data="props.objectsData"
     :valid-date-end="props.validDateEnd"
+    :project="props.project"
+    :power-data="props.powerData"
+    :temperature-data="props.temperatureData"
+    :current-selected-objects="props.currentSelectedObjects"
     :error-last-input="props.errorLastInput"
     :error-date-from="props.errorDateFrom"
     :error-time-from="props.errorTimeFrom"
     :error-date-to="props.errorDateTo"
     :error-time-to="props.errorTimeTo"
-    :project="props.project"
-    :power-data="props.powerData"
-    :temperature-data="props.temperatureData"
-    :current-selected-objects="props.currentSelectedObjects"
-    @select-row="emits('select-row', $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)"
-    @select-objects="emits('select-objects', $event)"
-  />
-  <common-monitor-advanced-tools-chart-options-modal-counters-old
-    v-else
-    v-model:total-metric-items="totalMetricItems"
-    :chart="props.chart"
-    :language="props.language"
-    :type="props.type"
-    :selected-keys="props.selectedKeys"
-    :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"
-    :total-cores="props.totalCores"
-    :host-id="props.hostId"
-    :selected-metrics-keys="props.selectedMetricsKeys"
-    :objects-loading="props.objectsLoading"
-    :objects-data="props.objectsData"
-    :valid-date-end="props.validDateEnd"
-    :project="props.project"
-    :power-data="props.powerData"
-    :temperature-data="props.temperatureData"
-    :current-selected-objects="props.currentSelectedObjects"
     @select-row="emits('select-row', $event)"
     @update-chart-type="emits('update-chart-type', $event)"
     @update-custom-time="emits('update-custom-time', $event)"
@@ -150,6 +112,12 @@ const { $store }: any = useNuxtApp()
 
 const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
 
+const currentComponent = computed(() =>
+  isNewView.value
+    ? defineAsyncComponent(() => import('./New.vue'))
+    : defineAsyncComponent(() => import('./Old.vue'))
+)
+
 const totalMetricItems = ref<number>(0)
 </script>
 

package/components/common/monitor/advanced/tools/chartOptionsModal/counters/table/Table.vue

@@ -1,11 +1,6 @@
 <template>
-  <common-monitor-advanced-tools-chart-options-modal-counters-table-table-new
-    v-if="isNewView"
-    v-model:selected-counters="selectedCounters"
-    :counters="counters"
-  />
-  <common-monitor-advanced-tools-chart-options-modal-counters-table-table-old
-    v-else
+  <component
+    :is="currentComponent"
     v-model:selected-counters="selectedCounters"
     v-model:pagination="pagination"
     :counters="counters"
@@ -44,6 +39,12 @@ const { $store }: any = useNuxtApp()
 
 const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
 
+const currentComponent = computed(() =>
+  isNewView.value
+    ? defineAsyncComponent(() => import('./new/New.vue'))
+    : defineAsyncComponent(() => import('./old/Old.vue'))
+)
+
 const localization = computed<UI_I_Localization>(() => useLocal())
 
 const counters = computed<UI_I_AdvancedCounterItem[]>(() =>

package/components/common/monitor/advanced/tools/chartOptionsModal/counters/table/{tableNew/TableNew.vue → new/New.vue}

@@ -15,8 +15,8 @@ import type { UI_I_DataTable } from '~/node_modules/bfg-uikit/components/ui/data
 import type { UI_I_DataTableBody } from '~/node_modules/bfg-uikit/components/ui/dataTable/models/interfaces'
 import type { UI_I_Localization } from '~/lib/models/interfaces'
 import type { UI_I_AdvancedCounterItem } from '~/components/common/monitor/advanced/tools/chartOptionsModal/counters/table/lib/models/interfaces'
-import { options } from '~/components/common/monitor/advanced/tools/chartOptionsModal/counters/table/tableNew/config/options'
-import { tableDataFunc } from '~/components/common/monitor/advanced/tools/chartOptionsModal/counters/table/tableNew/config/tableData'
+import { options } from '~/components/common/monitor/advanced/tools/chartOptionsModal/counters/table/new/config/options'
+import { tableDataFunc } from '~/components/common/monitor/advanced/tools/chartOptionsModal/counters/table/new/config/tableData'
 
 const selectedCountersLocal = defineModel<number[]>('selectedCounters', {
   required: true,

package/components/common/monitor/advanced/tools/chartOptionsModal/counters/table/{tableNew → new}/config/tableData.ts

@@ -1,7 +1,7 @@
 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_I_AdvancedCounterItem } from '~/components/common/monitor/advanced/tools/chartOptionsModal/counters/table/lib/models/interfaces'
-import { constructTable } from '~/components/common/monitor/advanced/tools/chartOptionsModal/counters/table/tableNew/utils/constructTable'
+import { constructTable } from '~/components/common/monitor/advanced/tools/chartOptionsModal/counters/table/new/utils/constructTable'
 
 export const tableDataFunc = (
   localization: UI_I_Localization,