bfg-common 1.6.65 → 1.6.66

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

@@ -6,26 +6,84 @@ 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,
+  apiData: API_UI_I_UtilizationData | null,
   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,
-      isShow: true,
-      title: localization.common[UI_E_UtilizationBlockCurrentKeys[key]],
+      title: localization.common[UI_E_UtilizationBlockCurrentKeys[key]] || key,
+      type: currentType,
       data: apiData[key].items.map((item) => {
-        item.color = !item.label.toLowerCase().includes('capacity')
+        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')
           : ''
-        item.label = getMetricsLocalizationByKey(item.label)
+        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
+        return {
+          ...item,
+          color,
+          colorKey,
+          labelKey,
+          label,
+          iconName,
+        }
       }),
     })
   })

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

@@ -0,0 +1,195 @@
+<template>
+  <div class="utilization flex flex-col h-full overflow-hidden">
+    <common-monitor-utilization-new-skeleton v-if="props.isLoading" />
+    <template v-else>
+      <div class="flex flex-wrap justify-between gap-4 mb-4 px-[6px]">
+        <h3 class="utilization-title text-[18px] font-[500]">
+          {{ localization.common.utilization }}
+        </h3>
+
+        <ui-button
+          id="utilization-settings-edit-button"
+          test-id="utilization-settings-edit-button"
+          variant="text"
+          class="utilization-settings-edit-button"
+          is-without-sizes
+          is-without-height
+          @click="isShowSettings = !isShowSettings"
+        >
+          <ui-icon name="settings" width="18px" height="18px" />
+        </ui-button>
+        <ui-popup-window
+          v-model="isShowSettings"
+          test-id="utilization-settings-select"
+          elem-id="utilization-settings-edit-button"
+          :margin-between-trigger="4"
+          width="144px"
+          left
+        >
+          <ul class="utilization-settings-items grid gap-2 p-2">
+            <li class="list-item">
+              <ui-checkbox
+                v-model="isCheckAllSettings"
+                :label-text="localization.common.all"
+                :disabled="isDisabledCheckAllSettings"
+                test-id="utilization-settings-all"
+                size="md"
+                @change="onCheckAllSettings"
+              />
+            </li>
+            <li v-for="item in allDataLocal" :key="item.id" class="list-item">
+              <ui-checkbox
+                v-model="item.isShow"
+                :test-id="`utilization-settings-${item.id}`"
+                :label-text="item.title"
+                size="md"
+              />
+            </li>
+          </ul>
+        </ui-popup-window>
+      </div>
+
+      <div class="utilization-info-block-flex-container overflow-auto">
+        <ui-portlet-sortable-view
+          :portlets="portlets"
+          :name="portletsPageName"
+          @change-container-size="onChangeContainerSize"
+        >
+          <template
+            #default="{ portletId, dragged, isOpen, draggedAny, isLast }"
+          >
+            <common-monitor-utilization-new-portlet
+              :all-data="allDataLocal"
+              :portlet-id="portletId"
+              :dragged="dragged"
+              :dragged-any="draggedAny"
+              :is-open="isOpen"
+              :is-last="isLast"
+              :not-single-column-block="notSingleColumnBlock"
+              @toggle-portlet="onTogglePortlet"
+            />
+          </template>
+        </ui-portlet-sortable-view>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_Portlet } from '~/node_modules/bfg-uikit/components/ui/portlet/lib/models/interfaces'
+import { togglePortletFunc } from '~/node_modules/bfg-uikit/components/ui/portlet/lib/utils/utils'
+import type { UI_I_UtilizationDataItem } from '~/components/common/monitor/utilization/lib/models/interfaces'
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import { getPortletsLocal } from '~/components/common/monitor/utilization/new/lib/utils/newPortlet'
+
+const allDataLocal = defineModel<UI_I_UtilizationDataItem[]>('all-data', {
+  required: true,
+})
+const props = defineProps<{
+  isLoading: boolean
+}>()
+const emits = defineEmits<{
+  (event: 'set-items-show-settings'): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const isShowSettings = ref<boolean>(false)
+
+const isCheckAllSettings = ref<boolean>(false)
+const isDisabledCheckAllSettings = computed<boolean>(() =>
+  allDataLocal.value.every((item) => item.isShow)
+)
+const onCheckAllSettings = () => {
+  allDataLocal.value = allDataLocal.value.map((item) => {
+    return {
+      ...item,
+      isShow: isCheckAllSettings.value,
+    }
+  })
+}
+
+const portletsPageName = 'utilization'
+
+const portlets = ref<UI_I_Portlet[]>([])
+
+let initialPortlets: UI_I_Portlet[] = []
+
+const containerWidth = ref<number>(0)
+
+const notSingleColumnBlock = computed<boolean>(
+  () =>
+    containerWidth.value > 1150 ||
+    (containerWidth.value < 720 && containerWidth.value > 500)
+)
+
+const onChangeContainerSize = (width: number): void => {
+  containerWidth.value = width
+}
+
+const getPortletData = (): void => {
+  portlets.value = getPortletsLocal(portletsPageName, initialPortlets)
+}
+
+const onTogglePortlet = (id: string): void => {
+  togglePortletFunc(id, portletsPageName, initialPortlets, getPortletData)
+}
+
+watch(
+  allDataLocal,
+  (newValue) => {
+    if (newValue.length) {
+      initialPortlets = []
+
+      newValue.forEach((item) => {
+        initialPortlets.push({
+          id: item.id,
+          list: 1,
+          isOpen: true,
+        })
+      })
+      getPortletData()
+      emits('set-items-show-settings')
+
+      const isNotAllSelected = newValue.some((item) => !item.isShow)
+      isCheckAllSettings.value = !isNotAllSelected
+    }
+  },
+  { immediate: true, deep: true }
+)
+</script>
+
+<style>
+:root {
+  --utilization-settings-trigger-btn-bg-color: #f6f7f8;
+}
+:root.dark-theme {
+  --utilization-settings-trigger-btn-bg-color: #283948;
+}
+</style>
+
+<style scoped lang="scss">
+.utilization {
+  padding-top: 16px;
+
+  &-title {
+    color: var(--title-form-first-color);
+  }
+
+  .utilization-settings-edit-button {
+    width: 34px;
+    height: 34px;
+    border: 1px solid var(--line-color);
+    color: var(--modal-icon);
+    background-color: var(--btn-default-outline-bg-color);
+    &:hover {
+      background-color: var(--utilization-settings-trigger-btn-bg-color);
+    }
+  }
+  .utilization-settings-items {
+    .list-item {
+      padding: 7px 9px;
+    }
+  }
+}
+</style>

package/components/common/monitor/utilization/new/Portlet.vue

@@ -0,0 +1,42 @@
+<template>
+  <ui-portlet
+    v-if="selectedItem?.isShow"
+    :title="selectedItem.title"
+    :dragged="props.dragged"
+    :dragged-any="props.draggedAny"
+    :is-open="props.isOpen"
+    :portlet-id="props.portletId"
+    :is-last="props.isLast"
+    :not-single="!props.notSingleColumnBlock"
+    :test-id="`utilization-portlet-${props.portletId}`"
+    @toggle="emits('toggle-portlet', $event)"
+  >
+    <template #portletBody>
+      <common-monitor-utilization-info-block :info-data="selectedItem" />
+    </template>
+  </ui-portlet>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_UtilizationDataItem } from '~/components/common/monitor/utilization/lib/models/interfaces'
+
+const props = defineProps<{
+  allData: UI_I_UtilizationDataItem[]
+  portletId: string
+  dragged: boolean
+  isOpen: boolean
+  isLast: boolean
+  draggedAny: boolean
+  notSingleColumnBlock: boolean
+}>()
+
+const emits = defineEmits<{
+  (event: 'toggle-portlet', id: string): void
+}>()
+
+const selectedItem = computed<UI_I_UtilizationDataItem | null>(
+  () => props.allData.find((item) => item.id === props.portletId) || null
+)
+</script>
+
+<style scoped lang="scss"></style>

package/components/common/monitor/utilization/new/Skeleton.vue

@@ -0,0 +1,120 @@
+<template>
+  <div class="flex flex-col overflow-hidden h-full pb-4">
+    <div class="flex flex-wrap justify-between gap-4 px-[6px]">
+      <ui-skeleton-item width="160" height="22" />
+      <ui-skeleton-item width="34" height="34" border-radius="8" />
+    </div>
+    <div
+      class="utilization-portlet-skeleton-container h-full overflow-auto mt-4"
+    >
+      <div class="utilization-portlet-skeleton p-4">
+        <div class="flex justify-between">
+          <ui-skeleton-item width="80" height="20" />
+          <ui-icon
+            name="drag-area"
+            class="utilization-portlet-skeleton-drag-icon"
+          />
+          <ui-icon
+            class="utilization-portlet-skeleton-arrow-icon"
+            name="arrow"
+            width="20"
+            height="20"
+          />
+        </div>
+        <div
+          class="utilization-portlet-skeleton-progress-container grid mt-4 gap-2"
+        >
+          <ui-skeleton-item width="100%" height="20" />
+          <ui-skeleton-item width="100%" height="20" />
+          <ui-icon name="dotes-with-arrow" class="icon-dotes left" />
+          <ui-icon name="dotes-with-arrow" class="icon-dotes right" />
+        </div>
+        <div class="block-header-text-info flex justify-between mt-3 pb-4">
+          <ui-skeleton-item width="64" height="16" />
+          <ui-skeleton-item width="64" height="16" />
+        </div>
+        <div class="flex justify-between mt-4">
+          <ui-skeleton-item width="144" height="18" />
+          <ui-skeleton-item width="144" height="18" />
+        </div>
+        <div class="flex justify-between mt-4">
+          <ui-skeleton-item width="144" height="18" />
+          <ui-skeleton-item width="144" height="18" />
+        </div>
+        <div class="flex justify-between mt-4">
+          <ui-skeleton-item width="144" height="18" />
+          <ui-skeleton-item width="144" height="18" />
+        </div>
+        <div class="flex justify-between mt-4">
+          <ui-skeleton-item width="144" height="18" />
+          <ui-skeleton-item width="144" height="18" />
+        </div>
+        <div class="flex justify-between mt-4">
+          <ui-skeleton-item width="144" height="18" />
+          <ui-skeleton-item width="144" height="18" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style>
+:root {
+  --utilization-settings-skeleton-block-bg: #ffffff;
+  --utilization-settings-skeleton-drag-icon: #e9ebed;
+  --utilization-settings-skeleton-toggle-icon: #213444;
+  --utilization-settings-skeleton-dotes-icon: #bdc3c7;
+  --utilization-settings-skeleton-progress-bottom-info-block-border: #e9ebeda3;
+}
+:root.dark-theme {
+  --utilization-settings-skeleton-block-bg: #334453;
+  --utilization-settings-skeleton-drag-icon: #e9ebed1f;
+  --utilization-settings-skeleton-toggle-icon: #e9eaec;
+  --utilization-settings-skeleton-dotes-icon: #bdc3c770;
+  --utilization-settings-skeleton-progress-bottom-info-block-border: #e9ebed1f;
+}
+</style>
+
+<style scoped lang="scss">
+.utilization-portlet-skeleton-container {
+  padding-left: 6px;
+  padding-right: 6px;
+
+  .utilization-portlet-skeleton {
+    background-color: var(--utilization-settings-skeleton-block-bg);
+    box-shadow: 0 1px 4px 0 #00000014;
+    border-radius: 8px;
+
+    .utilization-portlet-skeleton-drag-icon {
+      color: var(--utilization-settings-skeleton-drag-icon);
+    }
+    .utilization-portlet-skeleton-arrow-icon {
+      color: var(--utilization-settings-skeleton-toggle-icon);
+    }
+    .utilization-portlet-skeleton-progress-container {
+      height: 64px;
+      position: relative;
+
+      .icon-dotes {
+        color: var(--utilization-settings-skeleton-dotes-icon);
+        position: absolute;
+        top: -2px;
+
+        &.left {
+          left: 30%;
+          transform: rotateY(170deg);
+        }
+        &.right {
+          left: 70%;
+        }
+      }
+    }
+    .block-header-text-info {
+      border-bottom: 1px solid
+        var(--utilization-settings-skeleton-progress-bottom-info-block-border);
+    }
+  }
+}
+</style>

package/components/common/monitor/utilization/new/lib/utils/newPortlet.ts

@@ -0,0 +1,7 @@
+import type { UI_I_Portlet } from '~/node_modules/bfg-uikit/components/ui/portlet/lib/models/interfaces'
+
+export const getPortletsLocal = (
+  portletsPageName: string,
+  initialPortlets: UI_I_Portlet[]
+): UI_I_Portlet[] =>
+  useLocalStorage(`${portletsPageName}-portlets-positions`) || initialPortlets

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "bfg-common",
   "private": false,
-  "version": "1.6.65",
+  "version": "1.6.66",
   "scripts": {
     "build": "nuxt build",
     "dev": "nuxt dev --port=3002",

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

@@ -1,5 +0,0 @@
-<template>New</template>
-
-<script setup lang="ts"></script>
-
-<style scoped lang="scss"></style>