bfg-common 1.6.95 → 1.6.97

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

@@ -0,0 +1,190 @@
+<template>
+  <div class="utilization-info-block">
+    <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>
+      </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
+        v-for="(item, key) in props.infoData.data"
+        :key="key"
+        class="footer-item"
+      >
+        <div class="left-block">
+          <div
+            v-if="item.color"
+            :style="`background-color: ${
+              item.colorKey ? `var(${item.colorKey})` : item.color
+            }`"
+            class="color-block"
+          ></div>
+          <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
+  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
+}>()
+</script>
+
+<style scoped lang="scss">
+.utilization-info-block {
+  width: 522px;
+  padding: 20px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  box-shadow: 0 0 2px #ccc;
+
+  .header-block {
+    margin-bottom: 20px;
+
+    .title {
+      font-size: 16px;
+      font-weight: 500;
+    }
+  }
+
+  .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;
+        border-radius: 4px;
+        overflow: hidden;
+        border: 1px solid gray;
+      }
+
+      .fill {
+        height: 100%;
+        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;
+
+      p {
+        font-size: 11px;
+      }
+    }
+  }
+
+  .footer-block {
+    display: grid;
+    grid-row-gap: 5px;
+    width: 70%;
+
+    .footer-item {
+      display: grid;
+      align-items: center;
+      gap: 5px;
+      grid-template-columns: 70% 30%;
+
+      .left-block {
+        display: flex;
+        align-items: center;
+        gap: 5px;
+
+        .color-block {
+          width: 15px;
+          height: 15px;
+          border: 1px solid black;
+          border-radius: 4px;
+        }
+
+        .name {
+          font-size: 14px;
+          font-weight: 500;
+        }
+      }
+
+      .value {
+        font-size: 14px;
+        font-weight: 500;
+      }
+    }
+  }
+}
+</style>

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>

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

@@ -0,0 +1,84 @@
+<template>
+  <component
+    :is="currentComponent"
+    :percent="percent"
+    :inner-fill-container-styles="innerFillContainerStyles"
+    :items-for-print="itemsForPrint"
+  />
+</template>
+
+<script setup lang="ts">
+import type { UI_I_UtilizationDataItem } from '~/components/common/monitor/utilization/lib/models/interfaces'
+import type {
+  UI_I_UtilizationProgressInnerFillStyles,
+  UI_I_UtilizationProgressItemForPrint,
+} from '~/components/common/monitor/utilization/infoBlock/progressBar/lib/models/interfaces'
+
+const props = defineProps<{
+  infoData: UI_I_UtilizationDataItem | null
+  maxItem: UI_I_UtilizationDataItem['data'][0] | null
+  percent: number | string
+  color: string
+}>()
+
+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 percent = computed<number>(() => Number(props.percent))
+
+const itemsForPrint = ref<UI_I_UtilizationProgressItemForPrint[]>([])
+
+const innerFillContainerStyles =
+  computed<UI_I_UtilizationProgressInnerFillStyles>(() => ({
+    width: `${percent.value}%`,
+    backgroundColor: `${props.color}`,
+  }))
+
+watch(
+  () => props.infoData,
+  (newValue) => {
+    if (!newValue) return
+
+    newValue.data.forEach((item) => {
+      if (
+        item.color &&
+        !['consumed'].find((item2) =>
+          item.labelKey.toLowerCase().includes(item2)
+        ) &&
+        parseFloat(item.value.replace(/[^\d.-]/g, '')) !== 0
+      )
+        itemsForPrint.value.push(item)
+    })
+    itemsForPrint.value = itemsForPrint.value.filter((item) =>
+      item.value ? parseFloat(item.value.replace(/[^\d.-]/g, '')) !== 0 : false
+    )
+
+    let currentLeft = 0
+
+    const total = parseFloat(props.maxItem.value.replace(/[^\d.-]/g, ''))
+
+    itemsForPrint.value = itemsForPrint.value.map((item) => {
+      const width = item.value
+        ? (parseFloat(item.value.replace(/[^\d.-]/g, '')) / total) * 100
+        : 0
+
+      const segment = {
+        left: currentLeft,
+        width: width,
+        color: item.colorKey ? `var(${item.colorKey})` : item.color,
+      }
+      currentLeft += width
+      return segment
+    })
+  },
+  { immediate: true, deep: true }
+)
+</script>
+
+<style scoped lang="scss"></style>

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

@@ -0,0 +1,10 @@
+export interface UI_I_UtilizationProgressInnerFillStyles {
+  width: string
+  backgroundColor: string
+}
+
+export interface UI_I_UtilizationProgressItemForPrint {
+  left: number
+  width: number
+  color: string
+}

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

@@ -0,0 +1,27 @@
+import type { UI_T_UtilizationDataItemType } from '~/components/common/monitor/utilization/lib/models/types'
+
+export interface API_UI_I_UtilizationDataItem {
+  items: {
+    label: string
+    value: string
+  }[]
+}
+
+export interface API_UI_I_UtilizationData {
+  [key: string]: API_UI_I_UtilizationDataItem
+}
+
+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
+  }[]
+}

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

@@ -0,0 +1 @@
+export type UI_T_UtilizationDataItemType = 'cpu' | 'memory'

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

@@ -0,0 +1,112 @@
+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 { 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
+}
+
+const currentTitle = (
+  routeType: T_NodeType,
+  currentType: string,
+  localization: UI_I_Localization
+): string => {
+  let result: string = ''
+
+  if (routeType === 'host') {
+    if (currentType === 'cpu') result = localization.common.hostCpu
+    if (currentType === 'memory') result = localization.common.hostMem
+  } else if (routeType === 'vm') {
+    if (currentType === 'cpu')
+      result = localization.inventoryMonitor.virtualMachineCpu
+    if (currentType === 'memory')
+      result = localization.inventoryMonitor.virtualMachineMemory
+  }
+
+  return result
+}
+
+export const constructApiData = (
+  apiData: API_UI_I_UtilizationData | null,
+  localization: UI_I_Localization,
+  routeType: T_NodeType
+): 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: currentTitle(routeType, currentType, localization) || key,
+      type: currentType,
+      data: apiData[key].items.map((item) => {
+        const color = ![
+          'capacity',
+          'limit',
+          'vcpus',
+          'usagepercent',
+          'ballooncurrentbytes',
+          'balloonmaxbytes',
+          'entitlement',
+        ].find((item2) => item.label.toLowerCase().includes(item2))
+          ? '#' +
+            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'
+            : ''
+
+        return {
+          ...item,
+          color,
+          colorKey,
+          labelKey,
+          label,
+          iconName,
+        }
+      }),
+    })
+  })
+  return result
+}