bfg-common 1.6.65 → 1.6.67

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/components/common/noDataProvided/NoDataProvidedNew.vue

@@ -43,7 +43,7 @@ const localization = computed<UI_I_Localization>(() => useLocal())
     }
 
     .ui-no-data-provided-title {
-      font-weight: 400;
+      font-weight: 500;
       font-size: 16px;
       line-height: 19px;
       letter-spacing: 0;

package/components/common/pages/backups/modals/createBackup/datastores/tableView/new/lib/config/table.ts

@@ -191,19 +191,19 @@ export const getBodyDataFunc = (
         },
         {
           col: 'col2',
-          text: $binary.round(datastore.capacity.capacity_mb || 0, false, lang)
+          text: $binary.round(datastore.capacity.capacity_mb, false, lang)
         },
         {
           col: 'col3',
-          text: $binary.round(datastore.capacity.provisioned_mb || 0, false, lang)
+          text: $binary.round(datastore.capacity.provisioned_mb, false, lang)
         },
         {
           col: 'col4',
-          text: $binary.round(datastore.capacity.free_mb || 0, false, lang)
+          text: $binary.round(datastore.capacity.free_mb, false, lang)
         },
         {
           col: 'col5',
-          text: $binary.round(datastore.capacity.used_mb || 0, false, lang)
+          text: $binary.round(datastore.capacity.used_mb, false, lang)
         },
         {
           col: 'col6',

package/components/common/pages/backups/modals/createBackup/datastores/tableView/old/lib/config/table.ts

@@ -83,7 +83,7 @@ export const bodyItems = (
       },
       {
         key: 'col2',
-        text: $binary.round(datastore.capacity[tableKeys[2]] || 0, false, lang),
+        text: $binary.round(datastore.capacity[tableKeys[2]], false, lang),
         id: datastore.id,
         testId: `backup-datastore-table-item-${datastore.id}`,
         data: {
@@ -93,7 +93,7 @@ export const bodyItems = (
       {
         key: 'col3',
         text: $binary.round(
-          datastore.capacity[tableKeys[3]] || 0,
+          datastore.capacity[tableKeys[3]],
           false,
           lang
         ),
@@ -105,7 +105,7 @@ export const bodyItems = (
       },
       {
         key: 'col4',
-        text: $binary.round(datastore.capacity[tableKeys[4]] || 0, false, lang),
+        text: $binary.round(datastore.capacity[tableKeys[4]], false, lang),
         id: datastore.id,
         testId: `backup-datastore-table-item-${datastore.id}`,
         data: {
@@ -114,7 +114,7 @@ export const bodyItems = (
       },
       {
         key: 'col5',
-        text: $binary.round(datastore.capacity[tableKeys[5]] || 0, false, lang),
+        text: $binary.round(datastore.capacity[tableKeys[5]], false, lang),
         id: datastore.id,
         testId: `backup-datastore-table-item-${datastore.id}`,
         data: {