bfg-common 1.6.65 → 1.6.67

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

@@ -13,30 +13,26 @@
       </div>
 
       <div class="utilization-column-manage-container relative">
-        <ui-icon
-          name="settings"
-          width="24px"
-          height="24px"
-          @click="isShowColumnManage = !isShowColumnManage"
-        />
-
-        <atoms-popup-simple-popup
-          v-model="isShowColumnManage"
-          test-id="utilization-column-manage-popup"
-          top="0"
-          right="0"
+        <atoms-dropdown
+          :drop-menu="dropdownMenu"
+          test-id="help-menu-dropdown"
+          @select="onDropdownMenuItem"
         >
-          <li v-for="(item, key) in allDataLocal" :key="key" class="list-item">
-            <input
-              v-model="item.isShow"
-              :id="`utilization-column-manage-${item.id}`"
-              type="checkbox"
-            />
-            <label :for="`utilization-column-manage-${item.id}`">{{
-              item.title
-            }}</label>
-          </li>
-        </atoms-popup-simple-popup>
+          <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>
@@ -45,12 +41,51 @@
 <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 isShowColumnManage = ref<boolean>(false)
+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">
@@ -74,6 +109,12 @@ const isShowColumnManage = ref<boolean>(false)
       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

@@ -1,5 +1,10 @@
 <template>
-  <component :is="currentComponent" v-model:all-data="constructedData" />
+  <component
+    :is="currentComponent"
+    v-model:all-data="constructedData"
+    :is-loading="props.isLoading"
+    @set-items-show-settings="onSetItemsShowSettings"
+  />
 </template>
 
 <script setup lang="ts">
@@ -11,7 +16,8 @@ import type { UI_I_Localization } from '~/lib/models/interfaces'
 import { constructApiData } from '~/components/common/monitor/utilization/lib/utils'
 
 const props = defineProps<{
-  apiData: API_UI_I_UtilizationData
+  apiData: API_UI_I_UtilizationData | null
+  isLoading: boolean
 }>()
 
 const { $store }: any = useNuxtApp()
@@ -20,7 +26,7 @@ const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
 
 const currentComponent = computed(() =>
   isNewView.value
-    ? defineAsyncComponent(() => import('./New.vue'))
+    ? defineAsyncComponent(() => import('./new/New.vue'))
     : defineAsyncComponent(() => import('./Old.vue'))
 )
 
@@ -29,23 +35,25 @@ const localization = computed<UI_I_Localization>(() => useLocal())
 const constructedData = ref<UI_I_UtilizationDataItem[]>([])
 
 watch(
-  () => props.apiData,
+  [localization, () => props.apiData],
   () => {
-    !constructedData.value.length &&
-      (constructedData.value = constructApiData(
+    if (props.apiData) {
+      constructedData.value = constructApiData(
         props.apiData,
         localization.value
-      ))
+      )
+    }
   },
   { immediate: true, deep: true }
 )
-watch(
-  () => localization.value,
-  () => {
-    constructedData.value = constructApiData(props.apiData, localization.value)
-  },
-  { 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

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

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

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

@@ -3,23 +3,47 @@
     <div class="header-block">
       <p class="title">{{ props.infoData.title }}</p>
     </div>
-    <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 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>
       </div>
-      <div class="footer-body-block">
-        <p>{{ consumedItem?.value }}</p>
-        <p>{{ maxItem?.value }}</p>
-      </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>
     <div class="footer-block">
       <div
@@ -30,7 +54,9 @@
         <div class="left-block">
           <div
             v-if="item.color"
-            :style="`background-color: ${item.color}`"
+            :style="`background-color: ${
+              item.colorKey ? `var(${item.colorKey})` : item.color
+            }`"
             class="color-block"
           ></div>
           <p class="name">{{ item.label }}</p>
@@ -42,59 +68,20 @@
 </template>
 
 <script setup lang="ts">
-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'
+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
+  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">
@@ -103,7 +90,7 @@ onMounted(() => {
   padding: 20px;
   border: 1px solid #ccc;
   border-radius: 4px;
-  box-shadow: 0px 0px 2px #ccc;
+  box-shadow: 0 0 2px #ccc;
 
   .header-block {
     margin-bottom: 20px;
@@ -115,12 +102,20 @@ onMounted(() => {
   }
 
   .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;
@@ -134,8 +129,18 @@ onMounted(() => {
         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;