bfg-common 1.3.593 → 1.3.594

package/components/common/context/recursion/RecursionOld.vue

@@ -1,212 +1,212 @@
-<template>
-  <ul class="context-wrap">
-    <span v-if="props.isLoading">
-      <atoms-loader-pre-loader
-        id="loader"
-        class="absolute-center context-menu__loading"
-        :show="true"
-      />
-    </span>
-    <li
-      v-for="(item, key) in props.items"
-      :key="key"
-      :class="[
-        'menu-item',
-        { disabled: item.disabled || isLoading },
-        { 'item-header': item.isHeader },
-        { 'has-border-top': item.hasBorderTop },
-      ]"
-      @mouseenter="emits('toggle-items', [item, true, $event])"
-      @mouseleave="emits('toggle-items', [item, false, $event])"
-    >
-      <span
-        class="context-link"
-        :data-id="`${item.testId}-context-link`"
-        @mousedown="emits('select-item', item)"
-      >
-        <span :class="['context-icon', item.iconClassName]" />
-        <span class="menu-item-text">{{ item.name }}</span>
-        <span v-if="item.items.length" class="arrow-icon" />
-        <span v-if="item.shortcut" class="shortcut">{{ item.shortcut }}</span>
-      </span>
-
-      <div class="context-children">
-        <common-context-recursion
-          v-show="item.isShowItems"
-          :action-loading="props.actionLoading"
-          :class="[{ 'child-show': item.isShowItems }]"
-          :items="item.items"
-          @select-item="emits('select-item', $event)"
-        />
-      </div>
-    </li>
-  </ul>
-</template>
-
-<script setup lang="ts">
-import type { UI_I_ContextMenuItem } from '~/components/common/context/lib/models/interfaces'
-import type { I_HTMLLiElement } from '~/components/common/context/recursion/lib/models/interfaces'
-
-const props = defineProps<{
-  items: UI_I_ContextMenuItem[]
-  actionLoading: string | null
-  isLoading: boolean
-  testId?: string
-}>()
-
-const emits = defineEmits<{
-  (event: 'select-item', value: UI_I_ContextMenuItem): void
-  (
-    event: 'toggle-items',
-    value: [UI_I_ContextMenuItem, boolean, I_HTMLLiElement]
-  ): void
-}>()
-</script>
-
-<style scoped lang="scss">
-.loader-wrapper {
-  width: 100%;
-  height: 100%;
-  z-index: 100;
-}
-
-.context-menu__loading {
-  :deep(.spinner) {
-    width: 45px;
-    height: 45px;
-    min-width: 45px;
-    min-height: 45px;
-    z-index: 1000;
-  }
-}
-.context-wrap {
-  width: auto;
-  max-width: 400px;
-  background: var(--global-bg-color);
-  border-radius: 0;
-  color: #333;
-  border: 1px solid var(--context-menu-border-color);
-  user-select: none;
-  list-style: none;
-  max-height: 100vh;
-  overflow-y: auto;
-
-  .menu-item {
-    position: relative;
-    color: #565656;
-    border-bottom: 1px solid transparent;
-    cursor: pointer;
-    padding: 5px 0 3px;
-
-    &.has-border-top {
-      border-top: 1px solid var(--context-menu-inset-border-color);
-    }
-
-    &.item-header {
-      font-size: 11px;
-      background-color: var(--context-menu-item-header-color);
-      cursor: default;
-    }
-    &:not(.item-header):not(.disabled):hover {
-      background-color: var(--context-menu-hover-bg-color);
-      color: #454545;
-      border-bottom: 1px solid var(--context-menu-hover-border-color);
-    }
-    &.disabled {
-      opacity: 0.5;
-      user-select: none;
-      cursor: default;
-    }
-    &.left {
-      :deep(.context-children) {
-        left: 0;
-        background: red;
-
-        .context-wrap {
-          transform: translateX(-100%);
-          left: auto;
-        }
-      }
-    }
-
-    .context-link {
-      position: relative;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      display: flex;
-      align-items: center;
-      user-select: none;
-      padding: 3px 20px 4px 10px;
-
-      .menu-item-text {
-        flex: 1 1 0;
-      }
-
-      .context-icon {
-        display: inline-block;
-        margin: -2px 4px 0 0;
-        vertical-align: middle;
-        width: 18px;
-        height: 18px;
-      }
-
-      .arrow-icon {
-        position: absolute;
-        top: 50%;
-        margin-top: -8px;
-        right: 4px;
-        background-image: url('assets/img/icons/sprite.png');
-        display: inline-block;
-        width: 16px;
-        height: 16px;
-        overflow: hidden;
-        background-repeat: no-repeat;
-        font-size: 0;
-        line-height: 0;
-        text-align: center;
-        transform: rotate(90deg);
-      }
-
-      .shortcut {
-        padding-left: 10px;
-      }
-    }
-
-    .context-children {
-      position: absolute;
-      top: 0;
-      left: 100%;
-
-      .context-wrap {
-        position: fixed;
-      }
-    }
-  }
-}
-.context-menu__loading {
-  :deep(.spinner) {
-    width: 45px;
-    height: 45px;
-    min-width: 45px;
-    min-height: 45px;
-    z-index: 1000;
-  }
-}
-</style>
-<style>
-:root {
-  --context-menu-hover-bg-color: #e8e8e8;
-  --context-menu-border-color: #949494;
-  --context-menu-inset-border-color: #d4d5d6;
-  --context-menu-item-header-color: #eceff2;
-  --context-menu-hover-border-color: #666;
-}
-:root.dark-theme {
-  --context-menu-hover-bg-color: #324f61;
-  --context-menu-border-color: #495865;
-  --context-menu-inset-border-color: #485764;
-  --context-menu-item-header-color: #29414e;
-  --context-menu-hover-border-color: #fff;
-}
-</style>
+<template>
+  <ul class="context-wrap">
+    <span v-if="props.isLoading">
+      <atoms-loader-pre-loader
+        id="loader"
+        class="absolute-center context-menu__loading"
+        :show="true"
+      />
+    </span>
+    <li
+      v-for="(item, key) in props.items"
+      :key="key"
+      :class="[
+        'menu-item',
+        { disabled: item.disabled || isLoading },
+        { 'item-header': item.isHeader },
+        { 'has-border-top': item.hasBorderTop },
+      ]"
+      @mouseenter="emits('toggle-items', [item, true, $event])"
+      @mouseleave="emits('toggle-items', [item, false, $event])"
+    >
+      <span
+        class="context-link"
+        :data-id="`${item.testId}-context-link`"
+        @mousedown="emits('select-item', item)"
+      >
+        <span :class="['context-icon', item.iconClassName]" />
+        <span class="menu-item-text">{{ item.name }}</span>
+        <span v-if="item.items.length" class="arrow-icon" />
+        <span v-if="item.shortcut" class="shortcut">{{ item.shortcut }}</span>
+      </span>
+
+      <div class="context-children">
+        <common-context-recursion
+          v-show="item.isShowItems"
+          :action-loading="props.actionLoading"
+          :class="[{ 'child-show': item.isShowItems }]"
+          :items="item.items"
+          @select-item="emits('select-item', $event)"
+        />
+      </div>
+    </li>
+  </ul>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_ContextMenuItem } from '~/components/common/context/lib/models/interfaces'
+import type { I_HTMLLiElement } from '~/components/common/context/recursion/lib/models/interfaces'
+
+const props = defineProps<{
+  items: UI_I_ContextMenuItem[]
+  actionLoading: string | null
+  isLoading: boolean
+  testId?: string
+}>()
+
+const emits = defineEmits<{
+  (event: 'select-item', value: UI_I_ContextMenuItem): void
+  (
+    event: 'toggle-items',
+    value: [UI_I_ContextMenuItem, boolean, I_HTMLLiElement]
+  ): void
+}>()
+</script>
+
+<style scoped lang="scss">
+.loader-wrapper {
+  width: 100%;
+  height: 100%;
+  z-index: 100;
+}
+
+.context-menu__loading {
+  :deep(.spinner) {
+    width: 45px;
+    height: 45px;
+    min-width: 45px;
+    min-height: 45px;
+    z-index: 1000;
+  }
+}
+.context-wrap {
+  width: auto;
+  max-width: 400px;
+  background: var(--global-bg-color);
+  border-radius: 0;
+  color: #333;
+  border: 1px solid var(--context-menu-border-color);
+  user-select: none;
+  list-style: none;
+  max-height: 100vh;
+  overflow-y: auto;
+
+  .menu-item {
+    position: relative;
+    color: #565656;
+    border-bottom: 1px solid transparent;
+    cursor: pointer;
+    padding: 5px 0 3px;
+
+    &.has-border-top {
+      border-top: 1px solid var(--context-menu-inset-border-color);
+    }
+
+    &.item-header {
+      font-size: 11px;
+      background-color: var(--context-menu-item-header-color);
+      cursor: default;
+    }
+    &:not(.item-header):not(.disabled):hover {
+      background-color: var(--context-menu-hover-bg-color);
+      color: #454545;
+      border-bottom: 1px solid var(--context-menu-hover-border-color);
+    }
+    &.disabled {
+      opacity: 0.5;
+      user-select: none;
+      cursor: default;
+    }
+    &.left {
+      :deep(.context-children) {
+        left: 0;
+        background: red;
+
+        .context-wrap {
+          transform: translateX(-100%);
+          left: auto;
+        }
+      }
+    }
+
+    .context-link {
+      position: relative;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      display: flex;
+      align-items: center;
+      user-select: none;
+      padding: 3px 20px 4px 10px;
+
+      .menu-item-text {
+        flex: 1 1 0;
+      }
+
+      .context-icon {
+        display: inline-block;
+        margin: -2px 4px 0 0;
+        vertical-align: middle;
+        width: 18px;
+        height: 18px;
+      }
+
+      .arrow-icon {
+        position: absolute;
+        top: 50%;
+        margin-top: -8px;
+        right: 4px;
+        background-image: url('assets/img/icons/sprite.png');
+        display: inline-block;
+        width: 16px;
+        height: 16px;
+        overflow: hidden;
+        background-repeat: no-repeat;
+        font-size: 0;
+        line-height: 0;
+        text-align: center;
+        transform: rotate(90deg);
+      }
+
+      .shortcut {
+        padding-left: 10px;
+      }
+    }
+
+    .context-children {
+      position: absolute;
+      top: 0;
+      left: 100%;
+
+      .context-wrap {
+        position: fixed;
+      }
+    }
+  }
+}
+.context-menu__loading {
+  :deep(.spinner) {
+    width: 45px;
+    height: 45px;
+    min-width: 45px;
+    min-height: 45px;
+    z-index: 1000;
+  }
+}
+</style>
+<style>
+:root {
+  --context-menu-hover-bg-color: #e8e8e8;
+  --context-menu-border-color: #949494;
+  --context-menu-inset-border-color: #d4d5d6;
+  --context-menu-item-header-color: #eceff2;
+  --context-menu-hover-border-color: #666;
+}
+:root.dark-theme {
+  --context-menu-hover-bg-color: #324f61;
+  --context-menu-border-color: #495865;
+  --context-menu-inset-border-color: #485764;
+  --context-menu-item-header-color: #29414e;
+  --context-menu-hover-border-color: #fff;
+}
+</style>

package/components/common/layout/theHeader/TheHeaderNew.vue

@@ -38,7 +38,7 @@
             name="reset"
           />
           <span v-else class="reset-loader-content">
-            <ui-loader2 />
+            <ui-loader2 width="24" height="24" />
           </span>
         </button>
         <div class="divider" />
@@ -180,7 +180,8 @@ const emits = defineEmits<{
         align-items: center;
 
         .title {
-          font-size: 14px;
+          font-size: 16px;
+          font-weight: 400;
         }
         .badge-info {
           background-color: var(--badge-info-bg-color);
@@ -223,8 +224,8 @@ const emits = defineEmits<{
           }
         }
         .reset-loader-content {
-          width: 18px;
-          height: 18px;
+          width: 24px;
+          height: 24px;
 
           .loader {
             padding: 2px;

package/components/common/layout/theHeader/feedback/Feedback.vue

@@ -78,7 +78,7 @@ const showNotification = (message: UI_I_NotifyBodyMessage): void => {
 }
 const msgError = ref<UI_I_NotifyBodyMessage>({
   status: 'error',
-  title: localization.value.common.error,
+  title: localization.value.error,
   desc: '',
 })
 const handleErrors = (error: Ref<API_UI_I_Error>): void => {

package/components/common/layout/theHeader/helpMenu/helpMenuNew/HelpMenuNew.vue

@@ -26,7 +26,32 @@
     elem-id="help-menu-dropdown-toggle"
     @select="onSelectDropdown"
     @hide="onHideDropdown"
-  />
+  >
+    <template #row="{ item }">
+      <a
+        :id="item.testId"
+        :data-id="item.testId"
+        class="w-full flex items-center dropdown-item"
+      >
+        <span v-if="item.iconName === 'icon-help'" class="flex ui-item-text">
+          <ui-icon-main-navigation-panel
+            :name="item.iconName"
+            width="16"
+            height="16"
+          />
+        </span>
+        <span v-if="item.iconName === 'info'" class="flex ui-item-text">
+          <ui-icon :name="item.iconName" width="16" height="16" />
+        </span>
+        <span v-if="item.iconName === 'comment'" class="flex ui-item-text">
+          <ui-icon :name="item.iconName" width="16" height="16" />
+        </span>
+        <p class="ui-item-text truncate text-sm font-medium mt-0 mb-0 ml-2">
+          {{ item.text }}
+        </p>
+      </a>
+    </template>
+  </ui-dropdown>
 
   <common-layout-the-header-feedback
     :is-show-feedback="isShowFeedback"
@@ -110,7 +135,17 @@ const onSelectDropdown = (value: string): void => {
     padding: 0 !important;
   }
 }
-#dropdown-help-menu-dropdown {
+#ui-popup-window-help-menu-dropdown-toggle {
   margin-top: 17px;
 }
+#dropdown-help-menu-dropdown {
+  .ui-item-text {
+    color: var(--dropdown-item-hover-color);
+  }
+  .ui-dropdown-menu-item:has(.logout) {
+    .ui-item-text {
+      color: #ea3223;
+    }
+  }
+}
 </style>

package/components/common/layout/theHeader/helpMenu/helpMenuNew/lib/config/dropMenu.ts

@@ -6,20 +6,23 @@ export const helpMenuFunc = (
 ): UI_I_Dropdown[] => {
   return [
     {
-      text: localization.mainNavigation.help,
+      text: localization.help,
       value: 'help',
       testId: 'information-menu-help',
+      iconName: 'icon-help',
     },
     {
       text: localization.about,
       value: 'about',
       testId: 'information-menu-about',
       divider: true,
+      iconName: 'info',
     },
     {
       text: localization.sendFeedback,
       value: 'sendFeedback',
       testId: 'information-menu-send-feedback',
+      iconName: 'comment',
     },
   ]
 }

package/components/common/layout/theHeader/helpMenu/helpMenuOld/lib/config/dropMenu.ts

@@ -7,7 +7,7 @@ export const helpMenuFunc = (
 ): UI_I_DropMenu<UI_T_ActionTypeHelpMenu>[] => {
   return [
     {
-      text: localization.mainNavigation.help,
+      text: localization.help,
       action: 'help',
       closeAfterClick: true,
       testId: 'information-menu-help',

package/components/common/layout/theHeader/userMenu/modals/preferences/inventory/InventoryNew.vue

@@ -11,7 +11,7 @@
 
       <div>
         <div class="form-first-title">
-          {{ localization.mainNavigation.inventory }}
+          {{ localization.inventory }}
         </div>
         <div class="form-second-title">
           {{ localization.inventoryDesc }}

package/components/common/layout/theHeader/userMenu/modals/preferences/lib/config/preferencesTabs.ts

@@ -25,7 +25,7 @@ export const preferencesTabs = (
     testId: 'user-preferences-default-console',
   }
   const inventoryTab = {
-    text: `${localization.mainNavigation.inventory}`,
+    text: `${localization.inventory}`,
     value: 'inventory-tab',
     disabled: false,
     testId: 'user-preferences-inventory',

package/components/common/layout/theHeader/userMenu/userMenuNew/UserMenuNew.vue

@@ -95,6 +95,12 @@ const onSelectDropdown = (value: string): void => {
       color: #ffffff;
     }
 
+    .title {
+      font-size: 14px;
+      font-weight: 400;
+      font-family: 'Inter';
+    }
+
     .arrow-icon-container {
       display: flex;
       transform: rotate(90deg);
@@ -102,9 +108,10 @@ const onSelectDropdown = (value: string): void => {
   }
 }
 
-#dropdown-user-menu-dropdown {
+#ui-popup-window-user-menu-dropdown-toggle {
   margin-top: 17px;
-
+}
+#dropdown-user-menu-dropdown {
   .ui-item-text {
     color: var(--dropdown-item-hover-color);
   }

package/components/common/monitor/advanced/Advanced.vue

@@ -19,6 +19,7 @@
             :language="props.language"
             :selected-counters-keys="props.selectedCountersKeys"
             :selected-metric="props.selectedMetric"
+            :selected-metric-local="props.selectedMetricLocal"
             :disabled-period="props.disabledPeriod"
             :disabled-view="props.disabledView"
             :selected-chart-type="props.selectedChartType"
@@ -35,11 +36,12 @@
             :selected-objects="props.selectedObjects"
             :project="props.project"
             :objects-loading="props.objectsLoading"
+            :objects-data="props.objectsData"
             @update-tools="emits('update-tools', $event)"
             @exporting="onExporting"
             @open-advanced-page="onGetEmptyPage"
             @select-row="emits('select-row', $event)"
-            @select-metric="emits('select-metric', $event)"
+            @select-metric-local="emits('select-metric-local', $event)"
             @update-chart-type="emits('update-chart-type', $event)"
             @update-timespan-type="emits('update-timespan-type', $event)"
             @update-unit-count="emits('update-unit-count', $event)"
@@ -51,7 +53,6 @@
             @update-custom-time-from="emits('update-custom-time-from', $event)"
             @update-custom-time-to="emits('update-custom-time-to', $event)"
             @submit-options="emits('submit-options', $event)"
-            @update-cores="emits('update-cores')"
           />
 
           <div v-show="!props.data" class="empty-container">
@@ -100,6 +101,7 @@ import type {
 } from '~/components/common/monitor/advanced/tools/chartOptionsModal/lib/models/types'
 import type { UI_I_OptionsForm } from '~/components/common/monitor/advanced/tools/chartOptionsModal/lib/models/interfaces'
 import type { UI_I_AdvancedCounterItem } from '~/components/common/monitor/advanced/tools/chartOptionsModal/counters/table/lib/models/interfaces'
+import type { UI_I_ObjectItem } from '~/components/common/monitor/advanced/tools/chartOptionsModal/counters/timespan/object/lib/models/interfaces'
 import type { UI_T_Project } from '~/lib/models/types'
 import { getCountCores } from '~/components/common/monitor/advanced/tools/lib/utils/countCores'
 
@@ -115,6 +117,7 @@ const props = defineProps<{
   getDateFormat: any
   selectedCountersKeys: number[]
   selectedMetric: UI_T_ChartHost | UI_T_ChartVm
+  selectedMetricLocal: UI_T_ChartHost | UI_T_ChartVm
   selectedChartType: string
   selectedTimespanType: string
   unitsCount: number
@@ -129,6 +132,7 @@ const props = defineProps<{
   selectedObjects: string
   project: UI_T_Project
   objectsLoading: boolean
+  objectsData: UI_I_ObjectItem[]
   disabledPeriod?: boolean
   disabledView?: boolean
   isEmpty?: boolean
@@ -139,7 +143,7 @@ const emits = defineEmits<{
   (event: 'open-advanced-page'): void
   (event: 'update-selected-row', value: number[]): void
   (event: 'select-row', value: UI_I_AdvancedCounterItem[]): void
-  (event: 'select-metric', value: string): void
+  (event: 'select-metric-local', value: string): void
   (event: 'update-chart-type', value: string): void
   (event: 'update-timespan-type', value: string): void
   (event: 'update-unit-count', value: number): void
@@ -152,7 +156,6 @@ const emits = defineEmits<{
   (event: 'update-custom-time-to', value: string): void
   (event: 'submit-options', value: UI_I_OptionsForm): void
   (event: 'update:selected-timespan-type', value: string): void
-  (event: 'update-cores'): void
 }>()
 
 const localization = computed<UI_I_Localization>(() => useLocal())