bfg-common 1.6.95 → 1.6.97

package/components/common/monitor/lib/utils/localization.ts

@@ -0,0 +1,43 @@
+import localBe from '~/components/common/monitor/lib/utils/local_be.json'
+import localEn from '~/components/common/monitor/lib/utils/local_en.json'
+import localHy from '~/components/common/monitor/lib/utils/local_hy.json'
+import localKk from '~/components/common/monitor/lib/utils/local_kk.json'
+import localRu from '~/components/common/monitor/lib/utils/local_ru.json'
+import localZh from '~/components/common/monitor/lib/utils/local_zh.json'
+import type { UI_I_ArbitraryObject } from '~/lib/models/interfaces'
+
+const rawLocals: Record<string, any> = {
+  be: localBe,
+  en: localEn,
+  hy: localHy,
+  kk: localKk,
+  ru: localRu,
+  zh: localZh,
+}
+
+// Кешируем уже обработанные локали
+const processedCache: Record<string, UI_I_ArbitraryObject<string> | undefined> =
+  {}
+
+const currentLocalization = (): UI_I_ArbitraryObject<string> => {
+  const config = useRuntimeConfig()
+  let code = String(config?.public?.LOCALIZATION_CODE || 'ru').toLowerCase()
+
+  // если в кеше нет — создаём и сохраняем
+  if (!processedCache[code]) {
+    processedCache[code] = rawLocals[code] || rawLocals['ru']
+  }
+
+  return processedCache[code] as UI_I_ArbitraryObject<string>
+}
+
+export const getMetricsLocalizationByKey = (data: string): string => {
+  const metricLocalization = currentLocalization()
+
+  const [key, ...value] = data.split(' ')
+  let result = metricLocalization[key] || key
+  value.forEach((item) => {
+    result = result.replace('{}', item)
+  })
+  return result
+}

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

@@ -93,7 +93,9 @@ export const viewFunc = (
       { text: localization.inventoryMonitor.overview, value: 'overview' },
       // { text: localization.common.space, value: 'space' },
       // { text: localization.inventoryMonitor.spaceUtilization, value: 'space_utilization' },
-      // { text: localization.common.network, value: 'network' }, TODO 700
+      { text: localization.common.cpu, value: 'cpu' },
+      { text: localization.common.memory, value: 'memory' },
+      { text: localization.common.network, value: 'network' },
       { text: localization.common.disks, value: 'disks' },
     ],
     cluster: [

package/components/common/monitor/utilization/Old.vue

@@ -0,0 +1,120 @@
+<template>
+  <div class="logs__wrapper flex flex-col h-full">
+    <common-headline :headline="localization.common.utilization" class="mb-1" />
+
+    <div class="utilization-body-container">
+      <div class="utilization-info-block-flex-container">
+        <template v-for="(item, key) in allDataLocal" :key="key">
+          <common-monitor-utilization-info-block
+            v-if="item.isShow"
+            :info-data="item"
+          />
+        </template>
+      </div>
+
+      <div class="utilization-column-manage-container relative">
+        <atoms-dropdown
+          :drop-menu="dropdownMenu"
+          test-id="help-menu-dropdown"
+          @select="onDropdownMenuItem"
+        >
+          <template #icon>
+            <ui-icon name="settings" width="24px" height="24px" />
+          </template>
+          <template #item="{ item }">
+            <label
+              :for="`utilization-column-manage-${item.action}`"
+              class="utilization-column-manage-item"
+              ><input
+                v-model="item.data.isShow"
+                :id="`utilization-column-manage-${item.action}`"
+                type="checkbox"
+              />{{ item.text }}</label
+            >
+          </template>
+        </atoms-dropdown>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_UtilizationDataItem } from '~/components/common/monitor/utilization/lib/models/interfaces'
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_DropMenu } from '~/components/atoms/dropdown/dropdown/lib/models/interfaces'
+
+const allDataLocal = defineModel<UI_I_UtilizationDataItem[]>('all-data')
+
+const emits = defineEmits<{
+  (event: 'set-items-show-settings'): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const dropdownMenu = ref<UI_I_DropMenu<string>[]>([])
+
+watch(
+  allDataLocal,
+  (newValue) => {
+    if (!newValue) return
+
+    dropdownMenu.value = []
+
+    newValue.forEach((item) => {
+      dropdownMenu.value.push({
+        text: item.title,
+        action: item.id,
+        closeAfterClick: false,
+        testId: `utilization-dropdown-${item.id}`,
+        data: {
+          isShow: item.isShow,
+        },
+      })
+    })
+  },
+  { immediate: true, deep: true }
+)
+
+const onDropdownMenuItem = (value: UI_I_DropMenu<string>): void => {
+  if (!allDataLocal.value) return
+
+  allDataLocal.value = allDataLocal.value.map((item) => {
+    return {
+      ...item,
+      isShow: value.action === item.id ? !value.data.isShow : item.isShow,
+    }
+  })
+  emits('set-items-show-settings')
+}
+</script>
+
+<style scoped lang="scss">
+.utilization-body-container {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+
+  .utilization-info-block-flex-container {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 20px;
+  }
+  .utilization-column-manage-container {
+    :deep(.close-wrapper) {
+      display: none;
+    }
+    .list-item {
+      white-space: nowrap;
+      display: flex;
+      align-items: center;
+      gap: 5px;
+    }
+    .utilization-column-manage-item {
+      pointer-events: none;
+      display: flex;
+      align-items: center;
+      grid-gap: 8px;
+    }
+  }
+}
+</style>

package/components/common/monitor/utilization/Utilization.vue

@@ -0,0 +1,65 @@
+<template>
+  <component
+    :is="currentComponent"
+    v-model:all-data="constructedData"
+    :is-loading="props.isLoading"
+    @set-items-show-settings="onSetItemsShowSettings"
+  />
+</template>
+
+<script setup lang="ts">
+import type {
+  API_UI_I_UtilizationData,
+  UI_I_UtilizationDataItem,
+} from '~/components/common/monitor/utilization/lib/models/interfaces'
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { T_NodeType } from '~/components/templates/inventory/lib/models/types'
+import { constructApiData } from '~/components/common/monitor/utilization/lib/utils'
+
+const props = defineProps<{
+  apiData: API_UI_I_UtilizationData | null
+  isLoading: boolean
+}>()
+
+const { $store }: any = useNuxtApp()
+
+const routeType = computed<T_NodeType>(
+  () => useRoute().params.type.toString() as T_NodeType
+)
+
+const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
+
+const currentComponent = computed(() =>
+  isNewView.value
+    ? defineAsyncComponent(() => import('./new/New.vue'))
+    : defineAsyncComponent(() => import('./Old.vue'))
+)
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const constructedData = ref<UI_I_UtilizationDataItem[]>([])
+
+watch(
+  [localization, () => props.apiData],
+  () => {
+    if (props.apiData) {
+      constructedData.value = constructApiData(
+        props.apiData,
+        localization.value,
+        routeType.value
+      )
+    }
+  },
+  { immediate: true, deep: true }
+)
+
+const onSetItemsShowSettings = (): void => {
+  const showBlocksId: string[] = []
+  constructedData.value.forEach((item) => {
+    if (item.isShow) showBlocksId.push(item.id)
+  })
+  useLocalStorage('utilization-portlets-show', showBlocksId)
+}
+</script>
+
+<style scoped lang="scss"></style>

package/components/common/monitor/utilization/infoBlock/InfoBlock.vue

@@ -0,0 +1,146 @@
+<template>
+  <component
+    :is="currentComponent"
+    :info-data="props.infoData"
+    :max-item="maxItem"
+    :consumed-item="consumedItem"
+    :demand-item="demandItem"
+    :overhead-item="overheadItem"
+    :usage-item="usageItem"
+    :bar-percent="barPercent"
+    :current-title="currentTitle"
+    :limit-item="limitItem"
+    :limit-percent="limitPercent"
+    :entitlement-item="entitlementItem"
+    :entitlement-percent="entitlementPercent"
+    :min-value="minValue"
+  />
+</template>
+
+<script setup lang="ts">
+import type { UI_I_UtilizationDataItem } from '~/components/common/monitor/utilization/lib/models/interfaces'
+
+const props = defineProps<{
+  infoData: UI_I_UtilizationDataItem
+}>()
+
+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 maxItem = ref<UI_I_UtilizationDataItem['data'][0] | null>(null)
+const consumedItem = ref<UI_I_UtilizationDataItem['data'][0] | null>(null)
+const demandItem = ref<UI_I_UtilizationDataItem['data'][0] | null>(null)
+const overheadItem = ref<UI_I_UtilizationDataItem['data'][0] | null>(null)
+const minValue = ref<string>('')
+const usageItem = ref<UI_I_UtilizationDataItem['data'][0] | null>(null)
+const limitItem = ref<UI_I_UtilizationDataItem['data'][0] | null>(null)
+const entitlementItem = ref<UI_I_UtilizationDataItem['data'][0] | null>(null)
+
+const parse = (value: string): number =>
+  parseFloat(value.replace(/[^\d.]/g, '')) || 0
+
+const barPercent = computed<string>(() => {
+  if (!parse(maxItem.value?.value) || !parse(consumedItem.value?.value))
+    return '0'
+
+  return String(
+    Math.min(
+      (parse(consumedItem.value.value) / parse(maxItem.value.value)) * 100,
+      100
+    )
+  )
+})
+
+const limitPercent = computed<string>(() => {
+  if (
+    !limitItem.value ||
+    !parse(limitItem.value?.value) ||
+    !parse(maxItem.value?.value)
+  )
+    return '0'
+
+  return String(
+    Math.min(
+      (parse(limitItem.value.value) / parse(maxItem.value.value)) * 100,
+      100
+    )
+  )
+})
+
+const entitlementPercent = computed<string>(() => {
+  if (
+    !entitlementItem.value ||
+    !parse(entitlementItem.value?.value) ||
+    !parse(maxItem.value?.value)
+  )
+    return '0'
+
+  return String(
+    Math.min(
+      (parse(entitlementItem.value.value) / parse(maxItem.value.value)) * 100,
+      100
+    )
+  )
+})
+
+const currentTitle = computed<string>(
+  () =>
+    `${consumedItem.value?.value} / ${maxItem.value?.value} - ${usageItem.value?.value}`
+)
+
+watch(
+  () => props.infoData,
+  (newValue) => {
+    newValue.data.forEach((item) => {
+      const currentLabelKey = item.labelKey.toLowerCase()
+
+      if (currentLabelKey.includes('capacity')) maxItem.value = item
+      if (currentLabelKey.includes('consumed')) {
+        consumedItem.value = item
+        minValue.value = '0 ' + item.value.split(' ')[1]
+      }
+      if (currentLabelKey.includes('demand')) demandItem.value = item
+      if (currentLabelKey.includes('overhead')) overheadItem.value = item
+
+      if (currentLabelKey.includes('usagepercent')) usageItem.value = item
+      if (
+        currentLabelKey.includes('limit') &&
+        item.value.toLowerCase() !== 'unlimited'
+      )
+        limitItem.value = item
+      if (currentLabelKey.includes('entitlement')) entitlementItem.value = item
+    })
+  },
+  { immediate: true, deep: true }
+)
+</script>
+
+<style>
+:root {
+  --utilization-settings-consumed-info-color: #008fd6;
+  --utilization-settings-demand-info-color: #0776b3;
+  --utilization-settings-overhead-info-color: #239332;
+  --utilization-settings-active-info-color: #239332;
+  --utilization-settings-granted-info-color: #6fb842;
+  --utilization-settings-swapped-info-color: #ea3223;
+  --utilization-settings-ballooned-info-color: #fbce28;
+  --utilization-settings-unaccessed-info-color: #bdc3c7;
+}
+:root.dark-theme {
+  --utilization-settings-consumed-info-color: #2ba2de;
+  --utilization-settings-demand-info-color: #0776b3;
+  --utilization-settings-overhead-info-color: #3cae4c;
+  --utilization-settings-active-info-color: #3cae4c;
+  --utilization-settings-granted-info-color: #84bb42;
+  --utilization-settings-swapped-info-color: #ec4235;
+  --utilization-settings-ballooned-info-color: #fbce28;
+  --utilization-settings-unaccessed-info-color: #bdc3c770;
+}
+</style>

package/components/common/monitor/utilization/infoBlock/New.vue

@@ -0,0 +1,185 @@
+<template>
+  <div class="info-block-new">
+    <div class="header-block mb-4">
+      <div
+        :class="[
+          'progress-bar-container flex-col gap-2',
+          { 'has-icon': props.limitItem || props.entitlementItem },
+        ]"
+      >
+        <common-monitor-utilization-info-block-progress-bar
+          :percent="props.barPercent"
+          :color="`var(${props.consumedItem.colorKey})`"
+          :info-data="null"
+          :max-item="props.maxItem"
+        />
+        <common-monitor-utilization-info-block-progress-bar
+          v-if="props.demandItem"
+          :percent="props.barPercent"
+          :info-data="props.infoData"
+          :max-item="props.maxItem"
+          :color="`var(${props.demandItem.colorKey})`"
+        />
+        <common-monitor-utilization-info-block-progress-bar
+          v-if="props.overheadItem"
+          :percent="props.barPercent"
+          :info-data="props.infoData"
+          :max-item="props.maxItem"
+          :color="`var(${props.overheadItem.colorKey})`"
+        />
+        <div
+          v-if="props.limitItem"
+          :style="`left: calc(${props.limitPercent}% - 8px)`"
+          class="icon-box limit"
+        >
+          <ui-icon name="dotes-with-arrow" class="icon-limit" />
+        </div>
+        <div
+          v-if="props.entitlementItem"
+          :style="`left: calc(${props.entitlementPercent}% - 8px)`"
+          class="icon-box entitlement"
+        >
+          <ui-icon name="dotes-with-arrow" class="icon-entitlement" />
+        </div>
+      </div>
+      <div class="header-block-info-texts-block flex justify-between mt-3 pb-4">
+        <p class="text-info">{{ props.minValue }}</p>
+        <p class="text-info">{{ props.maxItem?.value }}</p>
+      </div>
+    </div>
+    <div class="footer-block flex flex-col gap-3">
+      <div
+        v-for="(item, key) in props.infoData.data"
+        :key="key"
+        class="footer-block-item flex justify-between"
+      >
+        <div class="left-block flex items-center gap-2">
+          <div
+            v-if="item.color"
+            :style="`background-color: ${
+              item.colorKey ? `var(${item.colorKey})` : item.color
+            }`"
+            class="color-block"
+          ></div>
+          <ui-icon
+            v-else-if="item.iconName"
+            :name="item.iconName"
+            :class="`icon-block ${item.labelKey}`"
+          />
+          <p class="name">{{ item.label }}</p>
+        </div>
+        <p class="value">{{ item.value }}</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_UtilizationDataItem } from '~/components/common/monitor/utilization/lib/models/interfaces'
+
+const props = defineProps<{
+  infoData: UI_I_UtilizationDataItem
+  maxItem: UI_I_UtilizationDataItem['data'][0] | null
+  consumedItem: UI_I_UtilizationDataItem['data'][0] | null
+  demandItem: UI_I_UtilizationDataItem['data'][0] | null
+  overheadItem: UI_I_UtilizationDataItem['data'][0] | null
+  limitItem: UI_I_UtilizationDataItem['data'][0] | null
+  entitlementItem: UI_I_UtilizationDataItem['data'][0] | null
+  entitlementPercent: string
+  barPercent: string
+  limitPercent: string
+  minValue: string
+}>()
+</script>
+
+<style>
+:root {
+  --utilization-settings-info-text-color: #4d5d69;
+  --utilization-settings-value-info-text-color: #182531;
+  --utilization-settings-limit-icon-color: #ea3223;
+  --utilization-settings-entitlement-icon-color: #213444;
+}
+:root.dark-theme {
+  --utilization-settings-info-text-color: #e9eaec;
+  --utilization-settings-value-info-text-color: #e9eaec;
+  --utilization-settings-limit-icon-color: #ec4235;
+  --utilization-settings-entitlement-icon-color: #e9eaec;
+}
+</style>
+
+<style scoped lang="scss">
+.info-block-new {
+  .header-block {
+    .progress-bar-container {
+      &.has-icon {
+        display: flex;
+        position: relative;
+        height: 60px;
+        justify-content: center;
+
+        .icon-box {
+          position: absolute;
+          top: 0;
+
+          &.entitlement {
+            z-index: 2;
+            transform: rotateY(170deg);
+          }
+        }
+      }
+
+      .progress-line {
+        width: 100%;
+      }
+      .icon-limit {
+        color: var(--utilization-settings-limit-icon-color);
+      }
+      .icon-entitlement {
+        color: var(--utilization-settings-entitlement-icon-color);
+      }
+    }
+    .header-block-info-texts-block {
+      border-bottom: 1px solid #e9ebeda3;
+
+      .text-info {
+        font-size: 12px;
+        font-weight: 500;
+        color: var(--utilization-settings-info-text-color);
+      }
+    }
+  }
+
+  .footer-block {
+    .footer-block-item {
+      .left-block {
+        .color-block {
+          width: 16px;
+          height: 16px;
+          border-radius: 50%;
+        }
+        .icon-block.limitMHz {
+          fill: var(--utilization-settings-limit-icon-color);
+          transform: rotate(225deg);
+        }
+        .icon-block.entitlementMHz,
+        .icon-block.entitlementBytes {
+          transform: rotate(145deg);
+        }
+
+        .name {
+          font-size: 13px;
+          line-height: 18px;
+          font-weight: 400;
+          color: var(--utilization-settings-info-text-color);
+        }
+      }
+      .value {
+        font-size: 13px;
+        font-weight: 400;
+        line-height: 18px;
+        color: var(--utilization-settings-value-info-text-color);
+      }
+    }
+  }
+}
+</style>