bfg-common 1.6.65 → 1.6.66

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;

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

@@ -0,0 +1,64 @@
+<template>
+  <div class="progress-line">
+    <div class="bg w-full">
+      <div
+        v-if="props.percent !== 0"
+        :style="props.innerFillContainerStyles"
+        class="inner-fill-container"
+      ></div>
+      <div class="cutted-container-block">
+        <div
+          v-for="(item, key) in props.itemsForPrint"
+          :key="key"
+          :style="`width: ${item.width}%;background-color: ${item.color}; left: ${item.left}%`"
+          :class="[
+            'inner-fill-container',
+            { one: props.itemsForPrint.length === 1 },
+          ]"
+        ></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type {
+  UI_I_UtilizationProgressInnerFillStyles,
+  UI_I_UtilizationProgressItemForPrint,
+} from '~/components/common/monitor/utilization/infoBlock/progressBar/lib/models/interfaces'
+
+const props = defineProps<{
+  percent: number | string
+  innerFillContainerStyles: UI_I_UtilizationProgressInnerFillStyles
+  itemsForPrint: UI_I_UtilizationProgressItemForPrint[]
+}>()
+</script>
+
+<style scoped lang="scss">
+.progress-line {
+  .bg {
+    background: var(--progress-bar-bg);
+    height: 20px;
+    border-radius: 20px;
+
+    .inner-fill-container {
+      position: absolute;
+      height: 20px;
+      border-radius: 16px;
+    }
+
+    .cutted-container-block {
+      .inner-fill-container:not(.one) {
+        border-radius: 0;
+
+        &:first-child {
+          border-radius: 16px 0 0 16px;
+        }
+        &:last-child {
+          border-radius: 0 16px 16px 0;
+        }
+      }
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,65 @@
+<template>
+  <div class="bg w-full">
+    <div
+      v-if="props.percent !== 0"
+      :style="props.innerFillContainerStyles"
+      class="inner-fill-container"
+    ></div>
+    <div class="cutted-container-block">
+      <div
+        v-for="(item, key) in props.itemsForPrint"
+        :key="key"
+        :style="`width: ${item.width}%;background-color: ${item.color}; left: ${item.left}%`"
+        :class="[
+          'inner-fill-container',
+          { one: props.itemsForPrint.length === 1 },
+        ]"
+      ></div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type {
+  UI_I_UtilizationProgressInnerFillStyles,
+  UI_I_UtilizationProgressItemForPrint,
+} from '~/components/common/monitor/utilization/infoBlock/progressBar/lib/models/interfaces'
+
+const props = defineProps<{
+  percent: number | string
+  innerFillContainerStyles: UI_I_UtilizationProgressInnerFillStyles
+  itemsForPrint: UI_I_UtilizationProgressItemForPrint[]
+}>()
+</script>
+
+<style scoped lang="scss">
+.bg {
+  background: #ffffff;
+  border: 1px solid #666666;
+  height: 20px;
+  border-radius: 5px;
+
+  .inner-fill-container {
+    position: absolute;
+    height: 20px;
+    border-radius: 5px;
+  }
+
+  .cutted-container-block {
+    .inner-fill-container:not(.one) {
+      border-radius: 0;
+
+      &:first-child {
+        border-radius: 5px 0 0 5px;
+      }
+      &:not(:first-child):not(:last-child) {
+        border-left: 1px solid #ffffff;
+        border-right: 1px solid #ffffff;
+      }
+      &:last-child {
+        border-radius: 0 5px 5px 0;
+      }
+    }
+  }
+}
+</style>