bfg-common 1.6.10 → 1.6.12

package/assets/localization/local_be.json

@@ -3440,7 +3440,9 @@
     "snapshotHasNoDescriptionYet": "Гэты здымак яшчэ не мае апісання.",
     "takeSnapshot": "Зрабіце здымак",
     "newSnapshot": "Новы здымак",
-    "editSnapshot": "Рэдагаваць здымак"
+    "editSnapshot": "Рэдагаваць здымак",
+    "revertLatestSnapshot": "Вярнуцца да апошняга здымка",
+    "consolidateSnapshots": "Кансолідаваць здымкі"
   },
   "importVms": {
     "selectSourceTooltipDesc": "Правы карыстальніка esxi павінны адпавядаць ролях Administrator, крэдыт прымаюцца ад esxi і vSphere",

package/assets/localization/local_en.json

@@ -3444,7 +3444,9 @@
     "snapshotHasNoDescriptionYet": "This snapshot has no description yet.",
     "takeSnapshot": "Take Snapshot",
     "newSnapshot": "New Snapshot",
-    "editSnapshot": "Edit snapshot"
+    "editSnapshot": "Edit snapshot",
+    "revertLatestSnapshot": "Revert to Latest Snapshot",
+    "consolidateSnapshots": "Consolidate Snapshots"
   },
   "importVms": {
     "selectSourceTooltipDesc": "No Trusted infrastructure Administrator, credits are accepted from esxi and vSphere",

package/assets/localization/local_hy.json

@@ -3444,7 +3444,9 @@
     "snapshotHasNoDescriptionYet": "Այս պահպանումը դեռևս չունի նկարագրություն։",
     "takeSnapshot": "Ակնթարթ նկար",
     "newSnapshot": "Նոր սքրինշոթ",
-    "editSnapshot": "Խմբագրել սքրինշոթը"
+    "editSnapshot": "Խմբագրել սքրինշոթը",
+    "revertLatestSnapshot": "Վերադառնալ վերջին նկարին",
+    "consolidateSnapshots": "Միավորել լուսանկարները"
   },
   "importVms": {
     "selectSourceTooltipDesc": "Esxi օգտագործողի իրավունքները պետք է համապատասխանեն Administrator-ի դերերին, կրեդիտներն ընդունվում են esxi-ից և vSphere-ից",

package/assets/localization/local_kk.json

@@ -3443,7 +3443,9 @@
     "snapshotHasNoDescriptionYet": "Бұл суретке әлі сипаттама қосылмаған.",
     "takeSnapshot": "сурет",
     "newSnapshot": "Жаңа снимок",
-    "editSnapshot": "Снимокты өңдеу"
+    "editSnapshot": "Снимокты өңдеу",
+    "revertLatestSnapshot": "Варнузза және түтіннің тұманы",
+    "consolidateSnapshots": "Суреттерді біріктіру"
   },
   "importVms": {
     "selectSourceTooltipDesc": "Esxi пайдаланушы құқықтары әкімші рөлдеріне сәйкес келуі керек, несиелер esxi және vSphere - ден алынады",

package/assets/localization/local_ru.json

@@ -3443,7 +3443,9 @@
     "snapshotHasNoDescriptionYet": "У этого снимка пока нет описания.",
     "takeSnapshot": "Сделать снимок",
     "newSnapshot": "Новый снимок",
-    "editSnapshot": "Редактировать снимок"
+    "editSnapshot": "Редактировать снимок",
+    "revertLatestSnapshot": "Вернуться к последнему снимку",
+    "consolidateSnapshots": "Консолидация снимков"
   },
   "importVms": {
     "selectSourceTooltipDesc": "Права пользователя vmware дожны соответствовать ролям Administrator, креды принимаются от esxi и vSphere",

package/assets/localization/local_zh.json

@@ -3441,7 +3441,9 @@
     "snapshotHasNoDescriptionYet": "此快照尚无描述。",
     "takeSnapshot": "快照",
     "newSnapshot": "新快照",
-    "editSnapshot": "编辑快照"
+    "editSnapshot": "编辑快照",
+    "revertLatestSnapshot": "回到上一张照片",
+    "consolidateSnapshots": "合并快照"
   },
   "importVms": {
     "selectSourceTooltipDesc": "Esxi用户权限必须对应于管理员角色. esxi和vSphere接受积分",

package/components/common/monitor/lib/utils/local_be.json

@@ -684,5 +684,7 @@
   "multicastTx": "Перададзеныя multicast",
   "multicastTxDesc": "Колькасць перададзеных multicast пакетаў",
   "multicastRx": "Атрыманыя multicast",
-  "multicastRxDesc": "Колькасць атрыманых multicast пакетаў"
+  "multicastRxDesc": "Колькасць атрыманых multicast пакетаў",
+  "memSharedcommon": "Выкарыстанне агульнай памяці",
+  "memSharedcommonDesc": "Аб'ём памяці, якая падзяляецца паміж працэсамі (выкарыстанне агульнага сегмента агульнай памяці)"
 }

package/components/common/monitor/lib/utils/local_en.json

@@ -684,5 +684,7 @@
   "multicastTx": "Multicast transmitted",
   "multicastTxDesc": "Number of multicast packets transmitted",
   "multicastRx": "Multicast received",
-  "multicastRxDesc": "Number of multicast packets received"
+  "multicastRxDesc": "Number of multicast packets received",
+  "memSharedcommon": "Shared Memory Usage",
+  "memSharedcommonDesc": "Amount of memory shared between processes (common shared memory segment usage)"
 }

package/components/common/monitor/lib/utils/local_hy.json

@@ -684,5 +684,7 @@
   "multicastTx": "Փոխանցված multicast",
   "multicastTxDesc": "Փոխանցված multicast փաթեթների քանակը",
   "multicastRx": "Ստացված multicast",
-  "multicastRxDesc": "Ստացված multicast փաթեթների քանակը"
+  "multicastRxDesc": "Ստացված multicast փաթեթների քանակը",
+  "memSharedcommon": "Համօգտագործվող հիշողության օգտագործում",
+  "memSharedcommonDesc": "Պրոցեսների միջև համօգտագործվող հիշողության ծավալը (ընդհանուր համօգտագործվող հիշողության սեգմենտի օգտագործում)"
 }

package/components/common/monitor/lib/utils/local_kk.json

@@ -684,5 +684,7 @@
   "multicastTx": "Жіберілген мультикаст",
   "multicastTxDesc": "Жіберілген мультикаст пакеттерінің саны",
   "multicastRx": "Қабылданған мультикаст",
-  "multicastRxDesc": "Қабылданған мультикаст пакеттерінің саны"
+  "multicastRxDesc": "Қабылданған мультикаст пакеттерінің саны",
+  "memSharedcommon": "Ортақ жадты пайдалану",
+  "memSharedcommonDesc": "Процестер арасында бөлісетін жад көлемі (ортақ бөлісетін жад сегментін пайдалану)"
 }

package/components/common/monitor/lib/utils/local_ru.json

@@ -684,5 +684,7 @@
   "multicastTx": "Multicast отправлено",
   "multicastTxDesc": "Количество отправленных групповых пакетов",
   "multicastRx": "Multicast получено",
-  "multicastRxDesc": "Количество полученных групповых пакетов"
+  "multicastRxDesc": "Количество полученных групповых пакетов",
+  "memSharedcommon": "Использование разделяемой памяти",
+  "memSharedcommonDesc": "Объём памяти, совместно используемой процессами (общие сегменты разделяемой памяти)"
 }

package/components/common/monitor/lib/utils/local_zh.json

@@ -684,5 +684,7 @@
   "multicastTx": "已发送组播",
   "multicastTxDesc": "已发送的组播数据包数",
   "multicastRx": "已接收组播",
-  "multicastRxDesc": "已接收的组播数据包数"
+  "multicastRxDesc": "已接收的组播数据包数",
+  "memSharedcommon": "共享内存使用情况",
+  "memSharedcommonDesc": "进程之间共享的内存量（公共共享内存段使用情况）"
 }

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

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

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

@@ -0,0 +1,79 @@
+<template>
+  <div class="logs__wrapper flex flex-col h-full">
+    <common-headline :headline="localization.common.utilization" class="mb-1" />
+
+    <div class="utilization-body-container">
+      <div class="utilization-info-block-flex-container">
+        <template v-for="(item, key) in allDataLocal" :key="key">
+          <common-monitor-utilization-info-block
+            v-if="item.isShow"
+            :info-data="item"
+          />
+        </template>
+      </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"
+        >
+          <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>
+      </div>
+    </div>
+  </div>
+</template>
+
+<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'
+
+const allDataLocal = defineModel<UI_I_UtilizationDataItem[]>('all-data')
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const isShowColumnManage = ref<boolean>(false)
+</script>
+
+<style scoped lang="scss">
+.utilization-body-container {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+
+  .utilization-info-block-flex-container {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 20px;
+  }
+  .utilization-column-manage-container {
+    :deep(.close-wrapper) {
+      display: none;
+    }
+    .list-item {
+      white-space: nowrap;
+      display: flex;
+      align-items: center;
+      gap: 5px;
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,51 @@
+<template>
+  <component :is="currentComponent" v-model:all-data="constructedData" />
+</template>
+
+<script setup lang="ts">
+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 { constructApiData } from '~/components/common/monitor/utilization/lib/utils'
+
+const props = defineProps<{
+  apiData: API_UI_I_UtilizationData
+}>()
+
+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 localization = computed<UI_I_Localization>(() => useLocal())
+
+const constructedData = ref<UI_I_UtilizationDataItem[]>([])
+
+watch(
+  () => props.apiData,
+  () => {
+    !constructedData.value.length &&
+      (constructedData.value = constructApiData(
+        props.apiData,
+        localization.value
+      ))
+  },
+  { immediate: true, deep: true }
+)
+watch(
+  () => localization.value,
+  () => {
+    constructedData.value = constructApiData(props.apiData, localization.value)
+  },
+  { deep: true }
+)
+</script>
+
+<style scoped lang="scss"></style>

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

@@ -0,0 +1,23 @@
+<template>
+  <component :is="currentComponent" :info-data="props.infoData" />
+</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
+}>()
+
+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'))
+)
+</script>
+
+<style scoped lang="scss"></style>

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

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

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

@@ -0,0 +1,185 @@
+<template>
+  <div class="utilization-info-block">
+    <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>
+      </div>
+      <div class="footer-body-block">
+        <p>{{ consumedItem?.value }}</p>
+        <p>{{ maxItem?.value }}</p>
+      </div>
+    </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.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,
+  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
+}>()
+
+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">
+.utilization-info-block {
+  width: 522px;
+  padding: 20px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  box-shadow: 0px 0px 2px #ccc;
+
+  .header-block {
+    margin-bottom: 20px;
+
+    .title {
+      font-size: 16px;
+      font-weight: 500;
+    }
+  }
+
+  .body-block {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    margin-bottom: 20px;
+
+    .bar {
+      .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);
+      }
+    }
+    .footer-body-block {
+      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/lib/models/enums.ts

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

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

@@ -0,0 +1,25 @@
+export interface API_UI_I_UtilizationDataItems {
+  label: string
+  value: string
+}
+
+export interface API_UI_I_UtilizationDataItem {
+  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
+  data: UI_I_UtilizationDataItems[]
+}

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

@@ -0,0 +1,31 @@
+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 { UI_E_UtilizationBlockCurrentKeys } from '~/components/common/monitor/utilization/lib/models/enums'
+
+export const constructApiData = (
+  apiData: API_UI_I_UtilizationData,
+  localization: UI_I_Localization
+): UI_I_UtilizationDataItem[] => {
+  const result: UI_I_UtilizationDataItem[] = []
+  Object.keys(apiData).forEach((key) => {
+    result.push({
+      id: key,
+      isShow: true,
+      title: localization.common[UI_E_UtilizationBlockCurrentKeys[key]],
+      data: apiData[key].items.map((item) => {
+        item.color = !item.label.toLowerCase().includes('capacity')
+          ? '#' +
+            Math.floor(Math.random() * 0xffffff)
+              .toString(16)
+              .padStart(6, '0')
+          : ''
+
+        return item
+      }),
+    })
+  })
+  return result
+}

package/components/common/vm/actions/consolidate/New.vue

@@ -1,6 +1,6 @@
 <template>
   <common-modals-confirmation
-    :headline="localization.common.consolidateConfirmation"
+    :headline="localization.snapshots.consolidateSnapshots"
     :description="localization.common.consolidateConfirmationDesc"
     :modal-texts="modalTexts"
     @hide-modal="emits('hide-modal')"

package/components/common/vm/actions/consolidate/Old.vue

@@ -1,7 +1,7 @@
 <template>
   <common-modals-confirmation
-    :headline="localization.common.consolidate"
-    :description="localization.common.consolidateConfirmationDescOld"
+    :headline="localization.snapshots.consolidateSnapshots"
+    :description="localization.common.consolidateConfirmationDesc"
     @hide-modal="emits('hide-modal')"
     @confirm="emits('confirm')"
   />