bfg-common 1.4.158 → 1.4.160

package/components/common/mainNavigationPanel/MainNavigationPanelNew.vue

@@ -1,307 +1,307 @@
-<template>
-  <div
-    :class="['main-navigation-panel', { pinned: menuPined }]"
-    @mouseenter="mainMenuHovered = true"
-    @mouseleave="mainMenuHovered = false"
-  >
-    <div
-      v-show="props.showMenu"
-      :class="['nav-context', { collapsed: props.menuCollapsed }]"
-    >
-      <div class="tools">
-        <div v-show="!props.menuCollapsed" class="pin-wrap">
-          <input
-            id="pin-menu-control"
-            v-model="menuPined"
-            data-id="navigation-panel-pin-menu-control"
-            type="checkbox"
-            :disabled="props.disabledPin"
-            @change="emits('change-menu-pin')"
-          />
-          <label
-            for="pin-menu-control"
-            class="pointer flex-align-center pin-unpin-label"
-          >
-            <ui-icon-main-navigation-panel
-              :name="menuPined ? 'unpin' : 'pin'"
-              width="16px"
-              height="16px"
-            />
-            <span v-if="!menuPined" class="pin-unpin-text">{{
-              localization.common.pinMenu
-            }}</span>
-            <span v-else class="pin-unpin-text">{{
-              localization.common.unpinMenu
-            }}</span>
-          </label>
-        </div>
-
-        <button
-          v-if="menuPined"
-          id="nav-trigger"
-          data-id="navigation-panel-trigger"
-          class="nav-trigger"
-          @click="emits('collapse-menu')"
-        >
-          <span class="nav-trigger-icon flex">
-            <ui-icon-main-navigation-panel
-              name="doubleArrow"
-              width="16px"
-              height="16px"
-            />
-          </span>
-        </button>
-      </div>
-
-      <div class="nav-content">
-        <template v-for="(item, key) in props.navigationItems" :key="key">
-          <ui-tooltip
-            v-for="(item2, key2) in item"
-            :id="`tooltip-nav-${key}-${key2}`"
-            :key="item2.id"
-            :test-id="`tooltip-nav-${key}-${key2}`"
-            size="md"
-            menu
-          >
-            <template #target>
-              <div
-                :id="`tooltip-nav-${key}-${key2}`"
-                class="popped tooltip inline-block content-toggle-tooltip"
-              >
-                <nuxt-link
-                  :id="`nav-item-${key}-${key2}`"
-                  :data-id="item2.testId"
-                  class="nav-link"
-                  active-class="active"
-                  :to="item2.to"
-                  @click="emits('hide-main-menu')"
-                >
-                  <ui-icon-main-navigation-panel
-                    :name="item2.iconName"
-                    width="20px"
-                    height="20px"
-                  />
-                  <span class="nav-text">{{ item2.title }}</span>
-                </nuxt-link>
-              </div>
-            </template>
-            <template #content>
-              {{ item2.title }}
-            </template>
-          </ui-tooltip>
-          <div
-            v-show="key !== props.navigationItems.length - 1"
-            class="nav-divider"
-          />
-        </template>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { UI_I_Localization } from '~/lib/models/interfaces'
-import type { UI_I_NavigationItem } from '~/components/common/mainNavigationPanel/lib/models/interfaces'
-import type { UI_T_ParentStatus } from '~/components/common/mainNavigationPanel/lib/models/types'
-
-const props = defineProps<{
-  mainMenuStatus: boolean
-  navigationItems: UI_I_NavigationItem[][]
-  parentStatus: UI_T_ParentStatus
-  disabledPin: boolean
-  menuCollapsed: boolean
-  showMenu: boolean
-}>()
-const emits = defineEmits<{
-  (event: 'toggle', value: boolean): void
-  (event: 'collapse-menu'): void
-  (event: 'change-menu-pin'): void
-  (event: 'hide-main-menu'): void
-}>()
-
-const mainMenuHovered = defineModel<boolean>('mainMenuHovered', {
-  required: true,
-})
-const menuPined = defineModel<boolean>('menuPined', {
-  required: true,
-})
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-</script>
-
-<style scoped lang="scss">
-.main-navigation-panel {
-  display: flex;
-  flex: 1 1 auto;
-
-  &.pinned {
-    .nav-context {
-      position: relative;
-    }
-  }
-  &:not(.pinned) {
-    .nav-context {
-      backdrop-filter: blur(12px);
-      box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.08);
-    }
-  }
-
-  .nav-context {
-    position: absolute;
-    z-index: 1001;
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    background-color: var(--vertical-nav-bg-color);
-
-    &.collapsed {
-      .tools {
-        justify-content: center;
-
-        button {
-          transform: rotate(180deg);
-        }
-      }
-
-      .nav-link {
-        .nav-text {
-          display: none;
-        }
-      }
-    }
-    &:not(.collapsed) {
-      :deep(.tooltip-container-hover) {
-        display: none;
-      }
-    }
-
-    .tools {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      padding: 12px;
-
-      .pin-wrap {
-        padding: 4px;
-        border-radius: 4px;
-
-        &:hover {
-          //background-color: var(--vertical-nav-hover-bg-color);
-
-          .pin-unpin-label {
-            color: var(--pin-unpin-label-hover-color);
-          }
-        }
-
-        input {
-          display: none;
-        }
-        .pin-unpin-label {
-          color: var(--vertical-nav-item-color);
-          font-size: 12px;
-          font-weight: 500;
-
-          .pin-unpin-text {
-            font-size: 12px;
-            font-weight: 500;
-            margin-left: 6px;
-          }
-        }
-      }
-
-      #nav-trigger {
-        padding: 4px;
-        margin: 0;
-        border-radius: 4px;
-        border: none;
-        background-color: transparent;
-        cursor: pointer;
-        color: var(--vertical-nav-item-color);
-
-        &:hover {
-          //background-color: var(--vertical-nav-hover-bg-color);
-          color: var(--pin-unpin-label-hover-color);
-        }
-      }
-    }
-
-    .nav-content {
-      overflow: auto;
-      padding: 0 12px 12px;
-      height: inherit;
-
-      &::-webkit-scrollbar-thumb {
-        background: var(--nav-content-scrollbar-thumb-bg);
-      }
-
-      .content-toggle-tooltip {
-        width: 100%;
-
-        .nav-link {
-          display: flex;
-          align-items: center;
-          padding: 10px 12px;
-          border-radius: 8px;
-          color: var(--vertical-nav-item-color);
-          font-size: 12px;
-          font-weight: 500;
-          white-space: nowrap;
-          text-decoration: none;
-
-          &.active {
-            background-color: var(--vertical-active-nav-bg-color);
-            color: var(--vertical-active-nav-color);
-
-            .nav-text {
-              color: var(--vertical-active-nav-color);
-            }
-          }
-
-          &:not(.active):hover {
-            background-color: var(--vertical-nav-hover-bg-color);
-          }
-
-          .nav-text {
-            margin-left: 12px;
-            font-size: 14px;
-            font-weight: 400;
-          }
-        }
-        .nav-link + .nav-link {
-          margin-top: 4px;
-        }
-      }
-
-      .nav-divider {
-        width: 100%;
-        height: 1px;
-        background-color: var(--nav-content-divider-bg);
-        margin: 12px 0;
-      }
-    }
-  }
-}
-</style>
-
-<style>
-:root.is-new-view {
-  --vertical-nav-bg-color: rgba(233, 235, 237, 0.92);
-  --vertical-nav-item-color: #4d5d69;
-  --vertical-nav-hover-bg-color: rgba(211, 214, 218, 0.48);
-  --vertical-active-nav-bg-color: #213444;
-  --vertical-active-nav-color: #ffffff;
-  --pin-unpin-label-hover-color: #008fd6;
-  --nav-content-scrollbar-thumb-bg: #9da6ad;
-  --nav-content-divider-bg: #d3d6da;
-}
-:root.is-new-view.dark-theme {
-  --vertical-nav-bg-color: rgba(51, 68, 83, 0.92);
-  --vertical-nav-item-color: #e9eaec;
-  --vertical-nav-hover-bg-color: rgba(233, 234, 236, 0.12);
-  --vertical-active-nav-bg-color: rgba(233, 235, 237, 0.96);
-  --vertical-active-nav-color: #213444;
-  --pin-unpin-label-hover-color: #2ba2de;
-  --nav-content-scrollbar-thumb-bg: rgba(157, 166, 173, 0.32);
-  --nav-content-divider-bg: rgba(211, 214, 218, 0.12);
-}
-</style>
+<template>
+  <div
+    :class="['main-navigation-panel', { pinned: menuPined }]"
+    @mouseenter="mainMenuHovered = true"
+    @mouseleave="mainMenuHovered = false"
+  >
+    <div
+      v-show="props.showMenu"
+      :class="['nav-context', { collapsed: props.menuCollapsed }]"
+    >
+      <div class="tools">
+        <div v-show="!props.menuCollapsed" class="pin-wrap">
+          <input
+            id="pin-menu-control"
+            v-model="menuPined"
+            data-id="navigation-panel-pin-menu-control"
+            type="checkbox"
+            :disabled="props.disabledPin"
+            @change="emits('change-menu-pin')"
+          />
+          <label
+            for="pin-menu-control"
+            class="pointer flex-align-center pin-unpin-label"
+          >
+            <ui-icon-main-navigation-panel
+              :name="menuPined ? 'unpin' : 'pin'"
+              width="16px"
+              height="16px"
+            />
+            <span v-if="!menuPined" class="pin-unpin-text">{{
+              localization.common.pinMenu
+            }}</span>
+            <span v-else class="pin-unpin-text">{{
+              localization.common.unpinMenu
+            }}</span>
+          </label>
+        </div>
+
+        <button
+          v-if="menuPined"
+          id="nav-trigger"
+          data-id="navigation-panel-trigger"
+          class="nav-trigger"
+          @click="emits('collapse-menu')"
+        >
+          <span class="nav-trigger-icon flex">
+            <ui-icon-main-navigation-panel
+              name="doubleArrow"
+              width="16px"
+              height="16px"
+            />
+          </span>
+        </button>
+      </div>
+
+      <div class="nav-content">
+        <template v-for="(item, key) in props.navigationItems" :key="key">
+          <ui-tooltip
+            v-for="(item2, key2) in item"
+            :id="`tooltip-nav-${key}-${key2}`"
+            :key="item2.id"
+            :test-id="`tooltip-nav-${key}-${key2}`"
+            size="md"
+            menu
+          >
+            <template #target>
+              <div
+                :id="`tooltip-nav-${key}-${key2}`"
+                class="popped tooltip inline-block content-toggle-tooltip"
+              >
+                <nuxt-link
+                  :id="`nav-item-${key}-${key2}`"
+                  :data-id="item2.testId"
+                  class="nav-link"
+                  active-class="active"
+                  :to="item2.to"
+                  @click="emits('hide-main-menu')"
+                >
+                  <ui-icon-main-navigation-panel
+                    :name="item2.iconName"
+                    width="20px"
+                    height="20px"
+                  />
+                  <span class="nav-text">{{ item2.title }}</span>
+                </nuxt-link>
+              </div>
+            </template>
+            <template #content>
+              {{ item2.title }}
+            </template>
+          </ui-tooltip>
+          <div
+            v-show="key !== props.navigationItems.length - 1"
+            class="nav-divider"
+          />
+        </template>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_NavigationItem } from '~/components/common/mainNavigationPanel/lib/models/interfaces'
+import type { UI_T_ParentStatus } from '~/components/common/mainNavigationPanel/lib/models/types'
+
+const props = defineProps<{
+  mainMenuStatus: boolean
+  navigationItems: UI_I_NavigationItem[][]
+  parentStatus: UI_T_ParentStatus
+  disabledPin: boolean
+  menuCollapsed: boolean
+  showMenu: boolean
+}>()
+const emits = defineEmits<{
+  (event: 'toggle', value: boolean): void
+  (event: 'collapse-menu'): void
+  (event: 'change-menu-pin'): void
+  (event: 'hide-main-menu'): void
+}>()
+
+const mainMenuHovered = defineModel<boolean>('mainMenuHovered', {
+  required: true,
+})
+const menuPined = defineModel<boolean>('menuPined', {
+  required: true,
+})
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+</script>
+
+<style scoped lang="scss">
+.main-navigation-panel {
+  display: flex;
+  flex: 1 1 auto;
+
+  &.pinned {
+    .nav-context {
+      position: relative;
+    }
+  }
+  &:not(.pinned) {
+    .nav-context {
+      backdrop-filter: blur(12px);
+      box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.08);
+    }
+  }
+
+  .nav-context {
+    position: absolute;
+    z-index: 1001;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    background-color: var(--vertical-nav-bg-color);
+
+    &.collapsed {
+      .tools {
+        justify-content: center;
+
+        button {
+          transform: rotate(180deg);
+        }
+      }
+
+      .nav-link {
+        .nav-text {
+          display: none;
+        }
+      }
+    }
+    &:not(.collapsed) {
+      :deep(.tooltip-container-hover) {
+        display: none;
+      }
+    }
+
+    .tools {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 12px;
+
+      .pin-wrap {
+        padding: 4px;
+        border-radius: 4px;
+
+        &:hover {
+          //background-color: var(--vertical-nav-hover-bg-color);
+
+          .pin-unpin-label {
+            color: var(--pin-unpin-label-hover-color);
+          }
+        }
+
+        input {
+          display: none;
+        }
+        .pin-unpin-label {
+          color: var(--vertical-nav-item-color);
+          font-size: 12px;
+          font-weight: 500;
+
+          .pin-unpin-text {
+            font-size: 12px;
+            font-weight: 500;
+            margin-left: 6px;
+          }
+        }
+      }
+
+      #nav-trigger {
+        padding: 4px;
+        margin: 0;
+        border-radius: 4px;
+        border: none;
+        background-color: transparent;
+        cursor: pointer;
+        color: var(--vertical-nav-item-color);
+
+        &:hover {
+          //background-color: var(--vertical-nav-hover-bg-color);
+          color: var(--pin-unpin-label-hover-color);
+        }
+      }
+    }
+
+    .nav-content {
+      overflow: auto;
+      padding: 0 12px 12px;
+      height: inherit;
+
+      &::-webkit-scrollbar-thumb {
+        background: var(--nav-content-scrollbar-thumb-bg);
+      }
+
+      .content-toggle-tooltip {
+        width: 100%;
+
+        .nav-link {
+          display: flex;
+          align-items: center;
+          padding: 10px 12px;
+          border-radius: 8px;
+          color: var(--vertical-nav-item-color);
+          font-size: 12px;
+          font-weight: 500;
+          white-space: nowrap;
+          text-decoration: none;
+
+          &.active {
+            background-color: var(--vertical-active-nav-bg-color);
+            color: var(--vertical-active-nav-color);
+
+            .nav-text {
+              color: var(--vertical-active-nav-color);
+            }
+          }
+
+          &:not(.active):hover {
+            background-color: var(--vertical-nav-hover-bg-color);
+          }
+
+          .nav-text {
+            margin-left: 12px;
+            font-size: 14px;
+            font-weight: 400;
+          }
+        }
+        .nav-link + .nav-link {
+          margin-top: 4px;
+        }
+      }
+
+      .nav-divider {
+        width: 100%;
+        height: 1px;
+        background-color: var(--nav-content-divider-bg);
+        margin: 12px 0;
+      }
+    }
+  }
+}
+</style>
+
+<style>
+:root.is-new-view {
+  --vertical-nav-bg-color: rgba(233, 235, 237, 0.92);
+  --vertical-nav-item-color: #4d5d69;
+  --vertical-nav-hover-bg-color: rgba(211, 214, 218, 0.48);
+  --vertical-active-nav-bg-color: #213444;
+  --vertical-active-nav-color: #ffffff;
+  --pin-unpin-label-hover-color: #008fd6;
+  --nav-content-scrollbar-thumb-bg: #9da6ad;
+  --nav-content-divider-bg: #d3d6da;
+}
+:root.is-new-view.dark-theme {
+  --vertical-nav-bg-color: rgba(51, 68, 83, 0.92);
+  --vertical-nav-item-color: #e9eaec;
+  --vertical-nav-hover-bg-color: rgba(233, 234, 236, 0.12);
+  --vertical-active-nav-bg-color: rgba(233, 235, 237, 0.96);
+  --vertical-active-nav-color: #213444;
+  --pin-unpin-label-hover-color: #2ba2de;
+  --nav-content-scrollbar-thumb-bg: rgba(157, 166, 173, 0.32);
+  --nav-content-divider-bg: rgba(211, 214, 218, 0.12);
+}
+</style>

package/components/common/monitor/advanced/tools/chartOptionsModal/counters/timespan/object/Object.vue

@@ -148,10 +148,7 @@ watch(
           target_object: 'averageMHz',
         })
       }
-    } else if (
-      newValue[0] === 'host' &&
-      ['disk', 'network'].includes(newValue[1])
-    ) {
+    } else if (newValue[0] === 'host' && ['network'].includes(newValue[1])) {
       let newItems = [
         {
           id: 'total',

package/components/common/select/input/lib/models/interfaces.ts

@@ -2,4 +2,5 @@ export interface UI_I_SelectInputItem {
   label: string
   value: string | number
   disabled?: boolean
+  testId?: string
 }

package/components/common/wizards/vm/common/computeResource/TreeView.vue

@@ -2,9 +2,9 @@
   <div class="tree-view">
     <atoms-loader-pre-loader
       v-show="loading"
+      show
       id="loader"
       class="absolute-center tree-view__loading"
-      :show="true"
     />
     <common-recursion-tree
       :nodes="props.computeResourceTree"
@@ -20,19 +20,16 @@
 import type { UI_I_TreeNode } from '~/components/common/recursionTree/lib/models/interfaces'
 
 const props = defineProps<{
-  modelValue: UI_I_TreeNode | null
   computeResourceTree: UI_I_TreeNode[]
 }>()
-
+const modelNode = defineModel<UI_I_TreeNode>()
 const emits = defineEmits<{
-  (event: 'update:modelValue', value: UI_I_TreeNode): void
   (
     event: 'get-compute-resource-tree',
     value: { id: string | number; cb: () => void }
   ): void
   (event: 'show-compute-resource-tree', value: UI_I_TreeNode): void
   (event: 'select-compute-resource-tree', value: UI_I_TreeNode): void
-  (event: 'clear-compute-resource-tree'): void
 }>()
 
 const loading = ref<boolean>(false)
@@ -42,7 +39,7 @@ const onShowNodes = (event: any): void => {
 const onSelectNode = (node: UI_I_TreeNode): void => {
   emits('select-compute-resource-tree', node)
 
-  emits('update:modelValue', node)
+  modelNode.value = node
 }
 </script>