bfg-common 1.6.63 → 1.6.64

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

@@ -1,20 +1,5 @@
 <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"
-  />
+  <component :is="currentComponent" :info-data="props.infoData" />
 </template>
 
 <script setup lang="ts">
@@ -33,114 +18,6 @@ const currentComponent = computed(() =>
     ? 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>
+<style scoped lang="scss"></style>

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

@@ -1,185 +1,5 @@
-<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>
+<template>New</template>
 
-<script setup lang="ts">
-import type { UI_I_UtilizationDataItem } from '~/components/common/monitor/utilization/lib/models/interfaces'
+<script setup lang="ts"></script>
 
-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>
+<style scoped lang="scss"></style>

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

@@ -3,47 +3,23 @@
     <div class="header-block">
       <p class="title">{{ props.infoData.title }}</p>
     </div>
-    <div class="flex">
-      <div class="body-block">
-        <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 class="footer-body-block">
-          <p>{{ props.minValue }}</p>
-          <p>{{ props.maxItem?.value }}</p>
+    <div class="body-block">
+      <div class="bar">
+        <div :title="currentTitle" class="track">
+          <div
+            :style="{
+              width: animated ? barPercent + '%' : '0%',
+              background: consumedItem?.color,
+              boxShadow: `0 0 6px ${consumedItem?.color}88`,
+            }"
+            class="fill"
+          />
         </div>
       </div>
-      <ui-icon
-        v-if="props.limitItem"
-        name="arrow3"
-        class="limit-icon"
-        width="18px"
-        height="18px"
-      />
-      <ui-icon
-        v-if="props.entitlementItem"
-        name="arrow3"
-        class="entitlement-icon"
-        width="18px"
-        height="18px"
-      />
+      <div class="footer-body-block">
+        <p>{{ consumedItem?.value }}</p>
+        <p>{{ maxItem?.value }}</p>
+      </div>
     </div>
     <div class="footer-block">
       <div
@@ -54,9 +30,7 @@
         <div class="left-block">
           <div
             v-if="item.color"
-            :style="`background-color: ${
-              item.colorKey ? `var(${item.colorKey})` : item.color
-            }`"
+            :style="`background-color: ${item.color}`"
             class="color-block"
           ></div>
           <p class="name">{{ item.label }}</p>
@@ -68,20 +42,59 @@
 </template>
 
 <script setup lang="ts">
-import type { UI_I_UtilizationDataItem } from '~/components/common/monitor/utilization/lib/models/interfaces'
+import type {
+  UI_I_UtilizationDataItem,
+  UI_I_UtilizationDataItems,
+} from '~/components/common/monitor/utilization/lib/models/interfaces'
+import type { UI_I_Localization } from '~/lib/models/interfaces'
 
 const props = defineProps<{
   infoData: UI_I_UtilizationDataItem
-  maxItem: UI_I_UtilizationDataItem['data'][0] | null
-  consumedItem: UI_I_UtilizationDataItem['data'][0] | null
-  overheadItem: UI_I_UtilizationDataItem['data'][0] | null
-  demandItem: UI_I_UtilizationDataItem['data'][0] | null
-  limitItem: UI_I_UtilizationDataItem['data'][0] | null
-  entitlementItem: UI_I_UtilizationDataItem['data'][0] | null
-  barPercent: string
-  currentTitle: string
-  minValue: string
 }>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const animated = ref<boolean>(false)
+
+const maxItem = computed<UI_I_UtilizationDataItems | null>(
+  () =>
+    props.infoData.data.find((item) =>
+      item.label.toLowerCase().includes('capacity')
+    ) || null
+)
+
+const consumedItem = computed<UI_I_UtilizationDataItems | null>(
+  () =>
+    props.infoData.data.find((item) =>
+      item.label.toLowerCase().includes('consumed')
+    ) || null
+)
+
+const usageItem = computed<UI_I_UtilizationDataItems | null>(
+  () =>
+    props.infoData.data.find((item) =>
+      item.label.toLowerCase().includes('usagepercent')
+    ) || null
+)
+const currentTitle = computed<string>(
+  () =>
+    `${consumedItem.value?.value} / ${maxItem.value?.value} - ${usageItem.value?.value}`
+)
+
+const barPercent = computed<string>(() => {
+  const parse = (v: string) => parseFloat(v.replace(/[^\d.]/g, '')) || 0
+  if (!maxItem.value || !consumedItem.value) return '0'
+  return String(
+    Math.min(
+      (parse(consumedItem.value.value) / parse(maxItem.value.value)) * 100,
+      100
+    )
+  )
+})
+
+onMounted(() => {
+  setTimeout(() => (animated.value = true), 100)
+})
 </script>
 
 <style scoped lang="scss">
@@ -90,7 +103,7 @@ const props = defineProps<{
   padding: 20px;
   border: 1px solid #ccc;
   border-radius: 4px;
-  box-shadow: 0 0 2px #ccc;
+  box-shadow: 0px 0px 2px #ccc;
 
   .header-block {
     margin-bottom: 20px;
@@ -102,20 +115,12 @@ const props = defineProps<{
   }
 
   .body-block {
-    width: 80%;
     display: flex;
     flex-direction: column;
-    align-items: flex-start;
     gap: 8px;
     margin-bottom: 20px;
-    position: relative;
 
     .bar {
-      width: 100%;
-      display: grid;
-      grid-template-columns: auto max-content;
-      position: relative;
-
       .track {
         height: 18px;
         background: #e5e7eb;
@@ -129,18 +134,8 @@ const props = defineProps<{
         border-radius: 2px;
         transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
       }
-
-      .limit-icon {
-        position: absolute;
-        right: -18px;
-      }
-      .entitlement-icon {
-        position: absolute;
-        right: -36px;
-      }
     }
     .footer-body-block {
-      width: 100%;
       display: flex;
       align-items: center;
       justify-content: space-between;

package/components/common/monitor/utilization/lib/models/enums.ts

@@ -1,4 +1,4 @@
-export enum UI_E_UtilizationBlockCurrentKeys {
-  cpuUtilization = 'hostCpu',
-  hostMemoryUtilization = 'hostMem',
-}
+export enum UI_E_UtilizationBlockCurrentKeys {
+  cpuUtilization = 'hostCpu',
+  hostMemoryUtilization = 'hostMem',
+}

package/components/common/monitor/utilization/lib/models/interfaces.ts

@@ -1,27 +1,25 @@
-import type { UI_T_UtilizationDataItemType } from '~/components/common/monitor/utilization/lib/models/types'
+export interface API_UI_I_UtilizationDataItems {
+  label: string
+  value: string
+}
 
 export interface API_UI_I_UtilizationDataItem {
-  items: {
-    label: string
-    value: string
-  }[]
+  items: API_UI_I_UtilizationDataItems[]
 }
 
 export interface API_UI_I_UtilizationData {
   [key: string]: API_UI_I_UtilizationDataItem
 }
 
+export interface UI_I_UtilizationDataItems {
+  label: string
+  value: string
+  color: string
+}
+
 export interface UI_I_UtilizationDataItem {
   id: string
   isShow: boolean
   title: string
-  type: UI_T_UtilizationDataItemType
-  data: {
-    label: string
-    labelKey: string
-    value: string
-    color: string
-    colorKey: string
-    iconName: string
-  }[]
+  data: UI_I_UtilizationDataItems[]
 }

package/components/common/monitor/utilization/lib/utils/index.ts

@@ -6,84 +6,26 @@ import type { UI_I_Localization } from '~/lib/models/interfaces'
 import { UI_E_UtilizationBlockCurrentKeys } from '~/components/common/monitor/utilization/lib/models/enums'
 import { getMetricsLocalizationByKey } from '~/components/common/monitor/lib/utils/localization'
 
-const currentColorKey = (value: string): string => {
-  let result: string = ''
-  const valueLowerCase = value.toLowerCase()
-  if (valueLowerCase.includes('consumed'))
-    result = '--utilization-settings-consumed-info-color'
-  if (valueLowerCase.includes('demand'))
-    result = '--utilization-settings-demand-info-color'
-  if (valueLowerCase.includes('overhead'))
-    result = '--utilization-settings-overhead-info-color'
-  if (valueLowerCase.includes('granted'))
-    result = '--utilization-settings-granted-info-color'
-  if (valueLowerCase.includes('active'))
-    result = '--utilization-settings-active-info-color'
-  if (valueLowerCase.includes('swapped'))
-    result = '--utilization-settings-swapped-info-color'
-  if (valueLowerCase.includes('ballooned'))
-    result = '--utilization-settings-ballooned-info-color'
-  if (valueLowerCase.includes('unaccessed'))
-    result = '--utilization-settings-unaccessed-info-color'
-
-  return result
-}
-
 export const constructApiData = (
-  apiData: API_UI_I_UtilizationData | null,
+  apiData: API_UI_I_UtilizationData,
   localization: UI_I_Localization
 ): UI_I_UtilizationDataItem[] => {
-  if (!apiData) return []
-
   const result: UI_I_UtilizationDataItem[] = []
-  const utilizationPortletsShow = useLocalStorage('utilization-portlets-show')
-
   Object.keys(apiData).forEach((key) => {
-    let currentType = ''
-    if (key.includes('cpu')) currentType = 'cpu'
-    else if (key.includes('memory')) currentType = 'memory'
-
-    let isShow = true
-    if (utilizationPortletsShow) isShow = utilizationPortletsShow.includes(key)
-
     result.push({
-      isShow,
       id: key,
-      title: localization.common[UI_E_UtilizationBlockCurrentKeys[key]] || key,
-      type: currentType,
+      isShow: true,
+      title: localization.common[UI_E_UtilizationBlockCurrentKeys[key]],
       data: apiData[key].items.map((item) => {
-        const color = ![
-          'capacity',
-          'limit',
-          'vcpus',
-          'usagepercent',
-          'ballooncurrentbytes',
-          'balloonmaxbytes',
-          'entitlement',
-        ].find((item2) => item.label.toLowerCase().includes(item2))
+        item.color = !item.label.toLowerCase().includes('capacity')
           ? '#' +
             Math.floor(Math.random() * 0xffffff)
               .toString(16)
               .padStart(6, '0')
           : ''
-        const colorKey = currentColorKey(item.label)
-        const labelKey = item.label
-        const label = getMetricsLocalizationByKey(item.label)
-
-        const iconName =
-          labelKey.toLowerCase().includes('limit') ||
-          labelKey.toLowerCase().includes('entitlement')
-            ? 'arrow3'
-            : ''
+        item.label = getMetricsLocalizationByKey(item.label)
 
-        return {
-          ...item,
-          color,
-          colorKey,
-          labelKey,
-          label,
-          iconName,
-        }
+        return item
       }),
     })
   })

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "bfg-common",
   "private": false,
-  "version": "1.6.63",
+  "version": "1.6.64",
   "scripts": {
     "build": "nuxt build",
     "dev": "nuxt dev --port=3002",
@@ -18,7 +18,7 @@
     "@vueuse/core": "10.1.2",
     "@vueuse/nuxt": "10.1.2",
     "bfg-nuxt-3-graph": "1.0.28",
-    "bfg-uikit": "1.1.29",
+    "bfg-uikit": "1.1.31",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-myrules": "file:./eslint",
     "nuxt": "3.11.2",