bfg-common 1.2.195 → 1.2.196

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

@@ -33,6 +33,8 @@
             :total-cores="totalCores"
             :host-id="props.hostId"
             :selected-objects="props.selectedObjects"
+            :project="props.project"
+            :objects-loading="props.objectsLoading"
             @update-tools="emits('update-tools', $event)"
             @exporting="onExporting"
             @open-advanced-page="onGetEmptyPage"
@@ -49,6 +51,7 @@
             @update-custom-time-from="emits('update-custom-time-from', $event)"
             @update-custom-time-to="emits('update-custom-time-to', $event)"
             @submit-options="emits('submit-options', $event)"
+            @update-cores="emits('update-cores')"
           />
 
           <div v-show="!props.data" class="empty-container">
@@ -92,11 +95,12 @@ import { I_SeriesLine } from 'bfg-nuxt-3-graph/graph/models/interfaces'
 import { UI_I_MonitorGraphPayload } from '~/components/common/monitor/models/interfaces'
 import { UI_I_PerformanceItem } from '~/components/common/monitor/advanced/table/models/interfaces'
 import {
-  T_ChartHost,
-  T_ChartVm,
+  UI_T_ChartHost,
+  UI_T_ChartVm,
 } from '~/components/common/monitor/advanced/tools/chartOptionsModal/models/types'
 import { UI_I_OptionsForm } from '~/components/common/monitor/advanced/tools/chartOptionsModal/models/interfaces'
 import { UI_I_AdvancedCounterItem } from '~/components/common/monitor/advanced/tools/chartOptionsModal/counters/table/models/interfaces'
+import { UI_T_Project } from '~/models/types'
 import { getCountCores } from '~/components/common/monitor/advanced/tools/utils/countCores'
 
 const props = defineProps<{
@@ -110,7 +114,7 @@ const props = defineProps<{
   formattedDatetime: any
   getDateFormat: any
   selectedCountersKeys: number[]
-  selectedMetric: T_ChartHost | T_ChartVm
+  selectedMetric: UI_T_ChartHost | UI_T_ChartVm
   selectedChartType: string
   selectedTimespanType: string
   unitsCount: number
@@ -123,6 +127,8 @@ const props = defineProps<{
   customTimeTo: string
   hostId: string
   selectedObjects: string
+  project: UI_T_Project
+  objectsLoading: boolean
   disabledPeriod?: boolean
   disabledView?: boolean
   isEmpty?: boolean
@@ -146,6 +152,7 @@ const emits = defineEmits<{
   (event: 'update-custom-time-to', value: string): void
   (event: 'submit-options', value: UI_I_OptionsForm): void
   (event: 'update:selected-timespan-type', value: string): void
+  (event: 'update-cores'): void
 }>()
 
 const localization = computed<UI_I_Localization>(() => useLocal())

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

@@ -101,6 +101,8 @@
     :total-cores="props.totalCores"
     :host-id="props.hostId"
     :selected-objects="props.selectedObjects"
+    :project="props.project"
+    :objects-loading="props.objectsLoading"
     @hide="isShowModal = false"
     @select-row="emits('select-row', $event)"
     @select-metric="emits('select-metric', $event)"
@@ -116,6 +118,7 @@
     @update-custom-time-from="emits('update-custom-time-from', $event)"
     @update-custom-time-to="emits('update-custom-time-to', $event)"
     @submit-options="emits('submit-options', $event)"
+    @update-cores="emits('update-cores')"
   />
 </template>
 
@@ -126,11 +129,12 @@ import { UI_I_MonitorGraphPayload } from '~/components/common/monitor/models/int
 import { UI_I_DropMenu } from '~/components/common/monitor/advanced/tools/models/interfaces'
 import { UI_T_AdvancedType } from '~/components/common/monitor/advanced/models/types'
 import {
-  T_ChartHost,
-  T_ChartVm,
+  UI_T_ChartHost,
+  UI_T_ChartVm,
 } from '~/components/common/monitor/advanced/tools/chartOptionsModal/models/types'
 import { UI_I_OptionsForm } from '~/components/common/monitor/advanced/tools/chartOptionsModal/models/interfaces'
 import { UI_I_AdvancedCounterItem } from '~/components/common/monitor/advanced/tools/chartOptionsModal/counters/table/models/interfaces'
+import { UI_T_Project } from '~/models/types'
 import { getValidDateByOptionFunc } from '~/components/common/monitor/config/getValidDateByOption'
 import {
   periodFunc,
@@ -146,7 +150,7 @@ const props = defineProps<{
   chartTitle: string
   language: string
   selectedCountersKeys: number[]
-  selectedMetric: T_ChartHost | T_ChartVm
+  selectedMetric: UI_T_ChartHost | UI_T_ChartVm
   selectedChartType: string
   selectedTimespanType: string
   unitsCount: number
@@ -160,6 +164,8 @@ const props = defineProps<{
   totalCores: number
   hostId: string
   selectedObjects: string
+  project: UI_T_Project
+  objectsLoading: boolean
   disabledPeriod?: boolean
   disabledView?: boolean
 }>()
@@ -182,6 +188,7 @@ const emits = defineEmits<{
   (event: 'update-custom-time-to', value: string): void
   (event: 'submit-options', value: UI_I_OptionsForm): void
   (event: 'update:selected-timespan-type', value: string): void
+  (event: 'update-cores'): void
 }>()
 
 const routeType = '' + useRoute().params.type
@@ -215,7 +222,7 @@ watch(
 
 const onDeleteOption = (): void => {
   emits('delete-option')
-  optionsNames.value = getCurrentOptionsStorageFunc(routeType)
+  optionsNames.value = getCurrentOptionsStorageFunc(routeType, props.project)
 }
 
 const periodOptions = computed<UI_I_OptionItem[]>(() =>
@@ -239,10 +246,11 @@ watch(isShowModal, (newValue) => {
 const updateTools = (): void => {
   const periodValue = selectedPeriod.value
   const viewValue = selectedView.value
+  const prefix = props.project === 'sphere'
   const selectedValue = useLocalStorage(
     viewValue + 'ChartOptions',
     undefined,
-    false
+    prefix
   )
 
   const fields = selectedValue
@@ -314,11 +322,11 @@ const onShowChartOptions = (): void => {
 }
 
 const onSaveOptionName = (): void => {
-  optionsNames.value = getCurrentOptionsStorageFunc(routeType)
+  optionsNames.value = getCurrentOptionsStorageFunc(routeType, props.project)
 }
 
 onMounted(() => {
-  optionsNames.value = getCurrentOptionsStorageFunc(routeType)
+  optionsNames.value = getCurrentOptionsStorageFunc(routeType, props.project)
   updateTools()
 })
 </script>

package/components/common/monitor/advanced/tools/chartOptionsModal/ChartOptionsModal.vue

@@ -48,6 +48,7 @@
               :host-id="props.hostId"
               :selected-metrics-keys="selectedMetricsKeys"
               :selected-objects="props.selectedObjects"
+              :objects-loading="props.objectsLoading"
               @select-row="selectedRows = $event"
               @update-chart-type="selectedChartTypeLocal = $event"
               @update-custom-time="localCustomTime = $event"
@@ -59,6 +60,7 @@
               @update-custom-time-from="onUpdateCustomTimeFrom"
               @update-custom-time-to="onUpdateCustomTimeTo"
               @select-objects="localSelectedObjects = $event"
+              @update-cores="emits('update-cores')"
             />
           </div>
         </div>
@@ -73,10 +75,11 @@ import { UI_T_AdvancedType } from '~/components/common/monitor/advanced/models/t
 import { UI_I_VerticalTabs } from '~/components/atoms/tabs/models/interfaces'
 import { UI_I_AdvancedCounterItem } from '~/components/common/monitor/advanced/tools/chartOptionsModal/counters/table/models/interfaces'
 import {
-  T_ChartHost,
-  T_ChartVm,
+  UI_T_ChartHost,
+  UI_T_ChartVm,
 } from '~/components/common/monitor/advanced/tools/chartOptionsModal/models/types'
 import { UI_I_OptionsForm } from '~/components/common/monitor/advanced/tools/chartOptionsModal/models/interfaces'
+import { UI_T_Project } from '~/models/types'
 import { metricsFunc } from '~/components/common/monitor/advanced/tools/chartOptionsModal/metrics/config/optionsMetrics'
 import { getCurrentOptionsStorageFunc } from '~/components/common/monitor/advanced/tools/config/advancedToolbar'
 import { checkDateFunc } from '~/components/common/monitor/overview/filters/customIntervalModal/config/dateChecker'
@@ -86,7 +89,7 @@ const props = defineProps<{
   type: UI_T_AdvancedType
   language: string
   selectedCountersKeys: number[]
-  selectedMetric: T_ChartHost | T_ChartVm
+  selectedMetric: UI_T_ChartHost | UI_T_ChartVm
   selectedChartType: string
   selectedTimespanType: string
   unitsCount: number
@@ -100,6 +103,8 @@ const props = defineProps<{
   totalCores: number
   hostId: string
   selectedObjects: string
+  project: UI_T_Project
+  objectsLoading: boolean
 }>()
 
 const emits = defineEmits<{
@@ -119,6 +124,7 @@ const emits = defineEmits<{
   (event: 'update-custom-time-to', value: string): void
   (event: 'submit-options', value: UI_I_OptionsForm): void
   (event: 'select-objects', value: string): void
+  (event: 'update-cores'): void
 }>()
 
 const routeType = '' + useRoute().params.type
@@ -145,7 +151,7 @@ const onUpdateCustomTimeTo = (value: string): void => {
 const metricsItems = computed<UI_I_VerticalTabs[]>(() =>
   metricsFunc(localization.value, props.type)
 )
-const selectedMetric = ref<T_ChartHost | T_ChartVm>(
+const selectedMetric = ref<UI_T_ChartHost | UI_T_ChartVm>(
   props.selectedMetric || '' + metricsItems.value[0]?.value
 )
 
@@ -375,8 +381,9 @@ const onSaveOptions = (name: string): void => {
       type: timespanType.value,
     },
   }
-  useLocalStorage(`${name}ChartOptions`, saveOptionsData, false)
-  optionsNames.value = getCurrentOptionsStorageFunc(routeType)
+  const prefix = props.project === 'sphere'
+  useLocalStorage(`${name}ChartOptions`, saveOptionsData, prefix)
+  optionsNames.value = getCurrentOptionsStorageFunc(routeType, props.project)
   localSelectedChartOptionName.value = name
   emits('save-option-name')
 }
@@ -402,7 +409,12 @@ const setDefaultOptions = (): void => {
 }
 
 const setCustomOptions = (name: string): void => {
-  const selectedValue = useLocalStorage(name + 'ChartOptions', undefined, false)
+  const prefix = props.project === 'sphere'
+  const selectedValue = useLocalStorage(
+    name + 'ChartOptions',
+    undefined,
+    prefix
+  )
 
   if (selectedValue.routeType !== routeType) return
 
@@ -442,7 +454,7 @@ watch(
 
 const onDeleteChartName = (name: string): void => {
   window.localStorage.removeItem(name + 'ChartOptions')
-  optionsNames.value = getCurrentOptionsStorageFunc(routeType)
+  optionsNames.value = getCurrentOptionsStorageFunc(routeType, props.project)
   setSelectOptions()
   emits('delete-option')
 }
@@ -455,7 +467,7 @@ const isDisabledSubmit = computed<boolean>(
 )
 
 onMounted(() => {
-  optionsNames.value = getCurrentOptionsStorageFunc(routeType)
+  optionsNames.value = getCurrentOptionsStorageFunc(routeType, props.project)
 })
 </script>
 

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

@@ -25,6 +25,7 @@
       :selected-metrics-keys="props.selectedMetricsKeys"
       :total-metric-items="totalMetricItems"
       :selected-objects="props.selectedObjects"
+      :objects-loading="props.objectsLoading"
       @update-chart-type="emits('update-chart-type', $event)"
       @update-custom-time="emits('update-custom-time', $event)"
       @update-timespan-type="emits('update-timespan-type', $event)"
@@ -35,21 +36,22 @@
       @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)"
+      @update-cores="emits('update-cores')"
     />
   </div>
 </template>
 
 <script setup lang="ts">
 import {
-  T_ChartHost,
-  T_ChartVm,
+  UI_T_ChartHost,
+  UI_T_ChartVm,
 } from '~/components/common/monitor/advanced/tools/chartOptionsModal/models/types'
 import { UI_T_AdvancedType } from '~/components/common/monitor/advanced/models/types'
 import { UI_I_AdvancedCounterItem } from '~/components/common/monitor/advanced/tools/chartOptionsModal/counters/table/models/interfaces'
 
 const props = defineProps<{
   language: string
-  chart: T_ChartHost | T_ChartVm
+  chart: UI_T_ChartHost | UI_T_ChartVm
   type: UI_T_AdvancedType
   selectedKeys: number[]
   selectedChartType: string
@@ -65,6 +67,7 @@ const props = defineProps<{
   hostId: string
   selectedMetricsKeys: number[]
   selectedObjects: string
+  objectsLoading: boolean
 }>()
 
 const emits = defineEmits<{
@@ -79,6 +82,7 @@ const emits = defineEmits<{
   (event: 'update-custom-time-from', value: string): void
   (event: 'update-custom-time-to', value: string): void
   (event: 'select-objects', value: string): void
+  (event: 'update-cores'): void
 }>()
 
 const totalMetricItems = ref<number>(0)

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

@@ -32,14 +32,14 @@ import {UI_I_Localization, UI_I_Pagination} from '~/models/interfaces'
 import * as table from '~/components/common/monitor/advanced/tools/chartOptionsModal/counters/table/config/tableConfig'
 import { UI_I_AdvancedCounterItem } from '~/components/common/monitor/advanced/tools/chartOptionsModal/counters/table/models/interfaces'
 import {
-  T_ChartHost,
-  T_ChartVm,
+  UI_T_ChartHost,
+  UI_T_ChartVm,
 } from '~/components/common/monitor/advanced/tools/chartOptionsModal/models/types'
 import { UI_T_AdvancedType } from '~/components/common/monitor/advanced/models/types'
 import { countersItemsFunc } from '~/components/common/monitor/advanced/tools/chartOptionsModal/counters/table/config/utils'
 
 const props = defineProps<{
-  chart: T_ChartHost | T_ChartVm
+  chart: UI_T_ChartHost | UI_T_ChartVm
   type: UI_T_AdvancedType
   selectedKeys: number[]
 }>()

package/components/common/monitor/advanced/tools/chartOptionsModal/counters/table/config/utils.ts

@@ -5,13 +5,13 @@ import {
   I_VmMetrics,
 } from '~/components/common/monitor/advanced/tools/chartOptionsModal/counters/table/models/interfaces'
 import {
-  T_ChartHost,
-  T_ChartVm,
+  UI_T_ChartHost,
+  UI_T_ChartVm,
 } from '~/components/common/monitor/advanced/tools/chartOptionsModal/models/types'
 import { UI_I_Localization } from '~/models/interfaces'
 
 const hostItemsFunc = (
-  chart: T_ChartHost,
+  chart: UI_T_ChartHost,
   localization: UI_I_Localization
 ): UI_I_AdvancedCounterItem[] => {
   const cpu: UI_I_AdvancedCounterItem[] = [
@@ -395,7 +395,7 @@ const hostItemsFunc = (
 }
 
 const vmItemsFunc = (
-  chart: T_ChartVm,
+  chart: UI_T_ChartVm,
   localization: UI_I_Localization
 ): UI_I_AdvancedCounterItem[] => {
   const disk: UI_I_AdvancedCounterItem[] = [
@@ -614,7 +614,7 @@ const vmItemsFunc = (
 
 export const countersItemsFunc = (
   type: UI_T_AdvancedType,
-  chart: T_ChartHost | T_ChartVm,
+  chart: UI_T_ChartHost | UI_T_ChartVm,
   localization: UI_I_Localization
 ): UI_I_AdvancedCounterItem[] => {
   let result: UI_I_AdvancedCounterItem[] = []

package/components/common/monitor/advanced/tools/chartOptionsModal/counters/timespan/Timespan.vue

@@ -29,7 +29,9 @@
       :selected-metrics-keys="props.selectedMetricsKeys"
       :total-metric-items="props.totalMetricItems"
       :selected-objects="props.selectedObjects"
+      :loading="props.objectsLoading"
       @select-objects="emits('select-objects', $event)"
+      @update-cores="emits('update-cores')"
     />
   </div>
 </template>
@@ -37,13 +39,13 @@
 <script setup lang="ts">
 import { UI_T_AdvancedType } from '~/components/common/monitor/advanced/models/types'
 import {
-  T_ChartHost,
-  T_ChartVm,
+  UI_T_ChartHost,
+  UI_T_ChartVm,
 } from '~/components/common/monitor/advanced/tools/chartOptionsModal/models/types'
 
 const props = defineProps<{
   type: UI_T_AdvancedType
-  chart: T_ChartHost | T_ChartVm
+  chart: UI_T_ChartHost | UI_T_ChartVm
   language: string
   selectedChartType: string
   selectedTimespanType: string
@@ -59,6 +61,7 @@ const props = defineProps<{
   selectedMetricsKeys: number[]
   totalMetricItems: number
   selectedObjects: string
+  objectsLoading: boolean
 }>()
 
 const emits = defineEmits<{
@@ -73,6 +76,7 @@ const emits = defineEmits<{
   (event: 'update-custom-time-from', value: string): void
   (event: 'update-custom-time-to', value: string): void
   (event: 'select-objects', value: string): void
+  (event: 'update-cores'): void
 }>()
 </script>
 

package/components/common/monitor/advanced/tools/chartOptionsModal/counters/timespan/object/Object.vue

@@ -12,6 +12,7 @@
           v-model:page="pagination.page"
           type="checkbox"
           class="data-table"
+          :loading="props.loading"
           :head-items="headItems"
           :body-items="bodyItems"
           :total-items="bodyItems.length"
@@ -36,22 +37,24 @@ import { UI_I_AdvancedTargetObject } from '~/components/common/monitor/advanced/
 import * as table from '~/components/common/monitor/advanced/tools/chartOptionsModal/counters/timespan/object/config/objectTable'
 import { UI_T_AdvancedType } from '~/components/common/monitor/advanced/models/types'
 import {
-  T_ChartHost,
-  T_ChartVm,
+  UI_T_ChartHost,
+  UI_T_ChartVm,
 } from '~/components/common/monitor/advanced/tools/chartOptionsModal/models/types'
 
 const props = defineProps<{
   type: UI_T_AdvancedType
-  chart: T_ChartHost | T_ChartVm
+  chart: UI_T_ChartHost | UI_T_ChartVm
   totalCores: number
   hostId: string
   selectedMetricsKeys: number[]
   totalMetricItems: number
   selectedObjects: string
+  loading: boolean
 }>()
 
 const emits = defineEmits<{
   (event: 'select-objects', value: string): void
+  (event: 'update-cores'): void
 }>()
 
 const localization = computed<UI_I_Localization>(() => useLocal())
@@ -72,6 +75,24 @@ const columnItems = computed<UI_I_ColumnKey[]>(() =>
 const bodyItems = ref<UI_I_BodyItem[][]>([])
 
 let items: UI_I_AdvancedTargetObject[] = []
+let firstRequest = false
+const getTotalCores = (): void => {
+  if (
+    props.selectedMetricsKeys.includes(1) &&
+    !props.totalCores &&
+    !firstRequest
+  ) {
+    emits('update-cores')
+    firstRequest = true
+  }
+}
+watch(
+  () => props.selectedMetricsKeys,
+  () => {
+    getTotalCores()
+  },
+  { deep: true }
+)
 watch(
   () => [
     props.type,

package/components/common/monitor/advanced/tools/chartOptionsModal/models/types.ts

@@ -1,3 +1,3 @@
-export type T_ChartHost = 'cpu' | 'memory' | 'network' | 'disk'
+export type UI_T_ChartHost = 'cpu' | 'memory' | 'network' | 'disk'
 
-export type T_ChartVm = 'cpu' | 'memory' | 'network' | 'disk' | 'datastore'
+export type UI_T_ChartVm = 'cpu' | 'memory' | 'network' | 'disk' | 'datastore'

package/components/common/monitor/advanced/tools/config/advancedToolbar.ts

@@ -3,6 +3,7 @@ import { UI_I_OptionItem } from '~/components/atoms/models/interfaces'
 import { UI_I_DropMenu } from '~/components/common/monitor/advanced/tools/models/interfaces'
 import { UI_T_AdvancedType } from '~/components/common/monitor/advanced/models/types'
 import { UI_I_OptionData } from '~/components/common/monitor/advanced/models/interfaces'
+import { UI_T_Project } from '~/models/types'
 
 export const periodFunc = (
   localization: UI_I_Localization,
@@ -103,15 +104,21 @@ export const exportFunc = (
   { text: localization.toCsv + '...', action: 'csv' },
 ]
 
-export const getCurrentOptionsStorageFunc = (routeType: string): string[] => {
+export const getCurrentOptionsStorageFunc = (
+  routeType: string,
+  project: UI_T_Project
+): string[] => {
+  const prefix = project === 'sphere'
   const optionsNames = []
   for (const key of Object.entries(localStorage)) {
-    const currentOptions = useLocalStorage(key[0], undefined, false)
-    if (
-      key[0].includes('ChartOptions') &&
-      currentOptions.routeType === routeType
-    ) {
-      optionsNames.push(key[0].replace('ChartOptions', ''))
+    if (key[0].includes('ChartOptions')) {
+      const currentOptions = useLocalStorage(key[0], undefined, prefix)
+      if (
+        key[0].includes('ChartOptions') &&
+        currentOptions.routeType === routeType
+      ) {
+        optionsNames.push(key[0].replace('ChartOptions', ''))
+      }
     }
   }
   return optionsNames

package/components/common/monitor/overview/filters/Filters.vue

@@ -55,13 +55,14 @@
 <script setup lang="ts">
 import { UI_I_Localization } from '~/models/interfaces'
 import { UI_I_OptionItem } from '~/components/atoms/models/interfaces'
+import { UI_T_Project } from '~/models/types'
+import { UI_I_MonitorGraphPayload } from '~/components/common/monitor/models/interfaces'
+import { UI_T_OverviewViewType } from '~/components/common/monitor/overview/filters/models/types'
 import {
   periodFunc,
   viewFunc,
 } from '~/components/common/monitor/overview/filters/config/filterOptions'
-import { UI_I_MonitorGraphPayload } from '~/components/common/monitor/models/interfaces'
 import { getValidDateByOptionFunc } from '~/components/common/monitor/config/getValidDateByOption'
-import { UI_T_OverviewViewType } from '~/components/common/monitor/overview/filters/models/types'
 
 const localization = computed<UI_I_Localization>(() => useLocal())
 const { $formattedDatetime } = useNuxtApp()
@@ -73,7 +74,7 @@ const props = defineProps<{
   view: UI_T_OverviewViewType
   selectedPeriods: number[]
   formatDate: string
-  projectType?: number
+  project: UI_T_Project
   formatTime?: string
 }>()
 
@@ -142,7 +143,7 @@ const disabledPeriodOptions = computed<boolean>(() => props.chartType === 'pie')
 
 const selectedView = ref<string>('')
 const viewOptions = computed<UI_I_OptionItem[]>(() =>
-  viewFunc(localization.value, props.view, props.projectType)
+  viewFunc(localization.value, props.view, props.project)
 )
 watch(
   () => viewOptions.value,

package/components/common/monitor/overview/filters/config/filterOptions.ts

@@ -2,6 +2,7 @@ import { UI_I_Localization } from '~/models/interfaces'
 import { UI_I_OptionItem } from '~/components/atoms/models/interfaces'
 import { UI_I_OverviewViewOptionData } from '~/components/common/monitor/overview/filters/models/interfaces'
 import { UI_T_OverviewViewType } from '~/components/common/monitor/overview/filters/models/types'
+import { UI_T_Project } from '~/models/types'
 
 export const periodFunc = (
   localization: UI_I_Localization
@@ -35,7 +36,7 @@ export const periodFunc = (
 export const viewFunc = (
   localization: UI_I_Localization,
   viewType: UI_T_OverviewViewType,
-  projectType?: number
+  project: UI_T_Project
 ): UI_I_OptionItem[] => {
   const host = [
     { text: localization.overview, value: 'overview' },
@@ -45,7 +46,7 @@ export const viewFunc = (
     { text: localization.disks, value: 'disks' },
     // { text: localization.virtual_machines, value: 'virtual_machines' },
   ]
-  if (projectType === 1)
+  if (project === 'procurator')
     host.push({
       text: localization.spaceUtilization,
       value: 'spaceUtilization',

package/components/common/tools/viewSettings/ViewSettings.vue

@@ -0,0 +1,71 @@
+<template>
+  <div class="info-container">
+    <atoms-nav-bar
+      v-if="props.tabs && props.tabs.length > 0"
+      v-model="selectedTabViewSettings"
+      :items="props.tabs"
+    />
+
+    <slot :value="selectedTabViewSettings"></slot>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_CollapseNavItem } from '~/components/atoms/collapse/models/interfaces'
+import type { UI_I_ViewSettingsFields } from '~/components/common/tools/viewSettings/models/interfaces'
+
+// Props from up
+
+const props = withDefaults(
+  defineProps<{
+    tabs?: UI_I_CollapseNavItem[]
+    viewSettingsFields?: UI_I_ViewSettingsFields[]
+    activeDefaultTab?: number | string
+  }>(),
+  {
+    viewSettingsFields: () => [],
+    activeDefaultTab: '',
+    tabs: undefined,
+  }
+)
+
+// Selected tab id on the view settings
+const selectedTabViewSettings = ref<number | string>(props.activeDefaultTab)
+
+// Filtering the selected tab content
+// const viewSettingsTabContent = (tab: number): UI_I_ViewSettingsFields[] =>
+//   tab === 0
+//     ? props.viewSettingsFields
+//     : props.viewSettingsFields.filter(
+//         (field: UI_I_ViewSettingsFields): boolean => field.type === tab
+//       )
+</script>
+
+<style lang="scss">
+:root.dark-theme {
+  .info-container {
+    background-color: var(--pannel-bg-color);
+    color: var(--main-color-mode2);
+
+    &:has(.no-items-selected-container) {
+      background-color: transparent;
+    }
+
+    td span {
+      color: var(--main-color-mode2);
+    }
+
+    button span {
+      color: var(--main-color-mode2);
+
+      &:hover:not(.disabled) {
+        background-color: transparent;
+      }
+    }
+
+    button.active span {
+      color: #fff;
+    }
+  }
+}
+</style>

package/components/common/tools/viewSettings/models/interfaces.ts

@@ -0,0 +1,9 @@
+export interface UI_I_ViewSettingsFields {
+  title?: string
+  id: number
+  type: number
+  rows: {
+    name: string
+    value?: string | string[]
+  }[]
+}

package/package.json

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