bfg-common 1.4.580 → 1.4.582

package/components/common/diagramMain/network/noNetwork/NoNetworkNew.vue

@@ -81,7 +81,7 @@ const localization = computed<UI_I_Localization>(() => useLocal())
 
   .no-associated-port-groups {
     font-size: 14px;
-    font-weight: 300;
+    font-weight: 400;
     line-height: 16.94px;
     text-align: center;
   }

package/components/common/diagramMain/port/Port.vue

@@ -532,8 +532,6 @@ const onSelectPort = (networkId: string, portId: string): void => {
 
 :root.is-new-view {
   .port-text.text-ellipsis {
-    user-select: none;
-    -webkit-user-select: none;
     line-height: 25px;
     padding-left: 18px;
     color: var(--diagram-content-text);

package/components/common/diagramMain/port/Ports.vue

@@ -1,47 +1,47 @@
-<template>
-  <g>
-    <template v-if="props.network.toggle">
-      <template v-for="port in props.network.ports" :key="port.id">
-        <common-diagram-main-port
-          :network="props.network"
-          :port="port"
-          :is-dark-mode="props.isDarkMode"
-          :selected-port="props.selectedPort"
-          :selected-adapter="props.selectedAdapter"
-          @select-port="onSelectPort"
-          @show-modal="onShowModal"
-        />
-      </template>
-    </template>
-  </g>
-</template>
-
-<script setup lang="ts">
-import type {
-  UI_I_ModalsInitialData,
-  UI_I_NetworkFullWithPositions,
-  UI_I_SelectedAdapter,
-  UI_I_SelectedPort,
-} from '~/components/common/diagramMain/lib/models/interfaces'
-
-const props = defineProps<{
-  network: UI_I_NetworkFullWithPositions
-  selectedPort: UI_I_SelectedPort
-  selectedAdapter: UI_I_SelectedAdapter
-  isDarkMode: boolean
-}>()
-
-const emits = defineEmits<{
-  (event: 'select-port', networkId: string, portId: string): void
-  (
-    event: 'show-modal',
-    value: string,
-    properties?: UI_I_ModalsInitialData
-  ): void
-}>()
-
-const onSelectPort = (networkId: string, portId: string) =>
-  emits('select-port', networkId, portId)
-const onShowModal = (value: string, properties?: UI_I_ModalsInitialData) =>
-  emits('show-modal', value, properties)
-</script>
+<template>
+  <g>
+    <template v-if="props.network.toggle">
+      <template v-for="port in props.network.ports" :key="port.id">
+        <common-diagram-main-port
+          :network="props.network"
+          :port="port"
+          :is-dark-mode="props.isDarkMode"
+          :selected-port="props.selectedPort"
+          :selected-adapter="props.selectedAdapter"
+          @select-port="onSelectPort"
+          @show-modal="onShowModal"
+        />
+      </template>
+    </template>
+  </g>
+</template>
+
+<script setup lang="ts">
+import type {
+  UI_I_ModalsInitialData,
+  UI_I_NetworkFullWithPositions,
+  UI_I_SelectedAdapter,
+  UI_I_SelectedPort,
+} from '~/components/common/diagramMain/lib/models/interfaces'
+
+const props = defineProps<{
+  network: UI_I_NetworkFullWithPositions
+  selectedPort: UI_I_SelectedPort
+  selectedAdapter: UI_I_SelectedAdapter
+  isDarkMode: boolean
+}>()
+
+const emits = defineEmits<{
+  (event: 'select-port', networkId: string, portId: string): void
+  (
+    event: 'show-modal',
+    value: string,
+    properties?: UI_I_ModalsInitialData
+  ): void
+}>()
+
+const onSelectPort = (networkId: string, portId: string) =>
+  emits('select-port', networkId, portId)
+const onShowModal = (value: string, properties?: UI_I_ModalsInitialData) =>
+  emits('show-modal', value, properties)
+</script>

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

@@ -89,7 +89,7 @@
             </span>
           </template>
         </ui-tooltip>
-        <div class="divider" />
+        <div class="divider right-divider-global-refresh" />
         <div class="container-content">
           <common-layout-the-header-theme-switch
             :is-dark-theme="props.isDarkTheme"
@@ -178,11 +178,13 @@ const emits = defineEmits<{
 
 const localization = computed<UI_I_Localization>(() => useLocal())
 
-const {$store}: any = useNuxtApp()
+const { $store }: any = useNuxtApp()
 
 const isMenuPined = computed(() => $store.getters['main/getIsMenuPined'])
 
-const mainMenuTriggerStatus = computed<boolean>(() => !props.isShowMainMenu || isMenuPined.value)
+const mainMenuTriggerStatus = computed<boolean>(
+  () => !props.isShowMainMenu || isMenuPined.value
+)
 </script>
 
 <style>
@@ -240,6 +242,7 @@ const mainMenuTriggerStatus = computed<boolean>(() => !props.isShowMainMenu || i
       }
       :deep(#tooltip-inventory-menu-trigger-div) {
         z-index: 9999;
+        transform: translate(13px, 0px);
       }
 
       .header-shortcuts-link {
@@ -272,6 +275,10 @@ const mainMenuTriggerStatus = computed<boolean>(() => !props.isShowMainMenu || i
         width: 1px;
         height: 32px;
         background-color: #394a58;
+
+        &.right-divider-global-refresh {
+          margin-left: 16px;
+        }
       }
 
       .global-refresh-button {
@@ -281,7 +288,6 @@ const mainMenuTriggerStatus = computed<boolean>(() => !props.isShowMainMenu || i
         background: transparent;
         cursor: pointer;
         display: flex;
-        margin-right: 16px;
 
         .reset-icon {
           width: 24px;

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

@@ -51,13 +51,13 @@
         :class="['w-full flex items-center dropdown-item', item.iconName]"
       >
         <span v-if="item.iconName === 'lock'" class="flex ui-item-text">
-          <ui-icon-icon3 :name="item.iconName" width="18" height="18" />
+          <ui-icon-icon3 :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="18" height="18" />
+        <span v-if="item.iconName === 'settings'" class="flex ui-item-text">
+          <ui-icon :name="item.iconName" width="16" height="16" />
         </span>
         <span v-if="item.iconName === 'logout'" class="flex ui-item-text">
-          <ui-icon :name="item.iconName" width="18" height="18" />
+          <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 }}

package/components/common/layout/theHeader/userMenu/userMenuNew/lib/config/dropMenu.ts

@@ -16,7 +16,7 @@ export const userMenuFunc = (
       value: 'preferences',
       testId: 'user-menu-preferences',
       divider: true,
-      iconName: 'info',
+      iconName: 'settings',
     },
     {
       text: localization.common.logout,

package/components/common/pages/home/headline/HeadlineNew.vue

@@ -1,48 +1,71 @@
-<template>
-  <div class="container-flex">
-    <h1>{{ localization.mainNavigation.home }}</h1>
-
-    <ui-select
-      v-if="isProjectSphere"
-      v-model="selectedZoneModel"
-      :items="selectItems"
-      width="165px"
-      select-width="100%"
-      size="sm"
-      test-id="home-zone-select"
-    />
-  </div>
-</template>
-
-<script lang="ts" setup>
-import type { UI_I_Dropdown } from '~/node_modules/bfg-uikit/components/ui/dropdown/models/interfaces'
-import type { UI_I_Localization } from '~/lib/models/interfaces'
-import type { UI_T_Project } from '~/lib/models/types'
-
-const props = defineProps<{
-  project: UI_T_Project
-}>()
-const selectedZoneModel = defineModel<number>({ required: true })
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-const isProjectSphere = computed<boolean>(() => props.project === 'sphere')
-
-const selectItems = computed<UI_I_Dropdown[]>(() => {
-  return []
-})
-</script>
-
-<style lang="scss" scoped>
-@import '/assets/scss/common/mixins';
-.container-flex {
-  @include flex($align: center, $just: space-between);
-  & > h1 {
-    color: var(--home-title-color);
-    font-size: 22px;
-    font-weight: 400;
-    line-height: 26.63px;
-    margin-bottom: 19px;
-  }
-}
-</style>
+<template>
+  <div class="container-flex">
+    <h1>{{ localization.mainNavigation.home }}</h1>
+
+    <ui-select
+      v-if="isProjectSphere"
+      v-model="selectedZoneModel"
+      :items="selectItems"
+      :disabled="!selectItems.length"
+      width="165px"
+      select-width="100%"
+      size="sm"
+      test-id="home-zone-select"
+    >
+      <template v-if="!selectItems.length" #toggleContent>
+        <div class="default-toggle-content">
+          <span class="default-icon vsphere-icon-vcenter"></span>
+          <span class="text">{{ localization.common.default }}</span>
+        </div>
+      </template>
+    </ui-select>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { UI_I_Dropdown } from '~/node_modules/bfg-uikit/components/ui/dropdown/models/interfaces'
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_T_Project } from '~/lib/models/types'
+
+const props = defineProps<{
+  project: UI_T_Project
+}>()
+const selectedZoneModel = defineModel<number>({ required: true })
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const isProjectSphere = computed<boolean>(() => props.project === 'sphere')
+
+const selectItems = computed<UI_I_Dropdown[]>(() => {
+  return []
+})
+</script>
+
+<style lang="scss" scoped>
+@import '/assets/scss/common/mixins';
+.container-flex {
+  @include flex($align: center, $just: space-between);
+  & > h1 {
+    color: var(--home-title-color);
+    font-size: 22px;
+    font-weight: 400;
+    line-height: 26.63px;
+    margin-bottom: 19px;
+  }
+
+  .default-toggle-content {
+    display: flex;
+    align-items: center;
+    grid-gap: 8px;
+
+    .default-icon {
+      width: 20px;
+      height: 20px;
+    }
+    .text {
+      font-size: 13px;
+      font-weight: 400;
+    }
+  }
+}
+</style>

package/components/common/pages/home/resource/ResourceNew.vue

@@ -1,58 +1,63 @@
-<template>
-  <div class="total-usages">
-    <h1>{{ localization.home.totalUsages }}</h1>
-    <div class="total-usages__container">
-      <ui-widget v-for="(item, key) in resourceMeter" :key="key">
-        <template v-if="props.loading">
-          <ui-widget-items-skeleton-line-bar />
-        </template>
-        <ui-widget-items-progress-bar-linear
-          v-else
-          id="host-summary-memory"
-          container-id="host"
-          :icon="item.icon"
-          :title="item.title"
-          :data="item.data"
-          :used-title="item.usedTitle"
-          :capacity-title="item.capacityTitle"
-          :status="item.status"
-        />
-      </ui-widget>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import type { UI_I_Localization } from '~/lib/models/interfaces'
-import type { UI_I_Resources } from '~/components/common/resource/lib/models/interfaces'
-import type { UI_I_ResourceBlock } from '~/components/common/pages/home/resource/lib/models/interfaces'
-import { constructResourceMeter } from '~/components/common/pages/home/resource/lib/utils/resourceMeter'
-
-const props = defineProps<{
-  items: UI_I_Resources[]
-  loading: boolean
-}>()
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-const resourceMeter = computed<UI_I_ResourceBlock[]>(() =>
-  constructResourceMeter(props.items, localization.value)
-)
-</script>
-
-<style lang="scss" scoped>
-.total-usages {
-  & > h1 {
-    font-size: 14px;
-    font-weight: 400;
-    line-height: 16.94px;
-    color: #9da6ad;
-    margin-bottom: 12px;
-  }
-  &__container {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    grid-column-gap: 12px;
-  }
-}
-</style>
+<template>
+  <div class="total-usages">
+    <h1>{{ localization.home.totalUsages }}</h1>
+    <div class="total-usages__container">
+      <ui-widget v-for="(item, key) in resourceMeter" :key="key">
+        <template v-if="props.loading">
+          <ui-widget-items-skeleton-line-bar />
+        </template>
+        <ui-widget-items-progress-bar-linear
+          v-else
+          id="host-summary-memory"
+          container-id="host"
+          :icon="item.icon"
+          :title="item.title"
+          :data="item.data"
+          :used-title="item.usedTitle"
+          :capacity-title="item.capacityTitle"
+          :status="item.status"
+        />
+      </ui-widget>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_Resources } from '~/components/common/resource/lib/models/interfaces'
+import type { UI_I_ResourceBlock } from '~/components/common/pages/home/resource/lib/models/interfaces'
+import { constructResourceMeter } from '~/components/common/pages/home/resource/lib/utils/resourceMeter'
+
+const props = defineProps<{
+  items: UI_I_Resources[]
+  loading: boolean
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const resourceMeter = computed<UI_I_ResourceBlock[]>(() =>
+  constructResourceMeter(props.items, localization.value)
+)
+</script>
+
+<style lang="scss" scoped>
+.total-usages {
+  & > h1 {
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 16.94px;
+    color: #9da6ad;
+    margin-bottom: 12px;
+  }
+  &__container {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-column-gap: 12px;
+
+    @media (max-width: 1440px) {
+      grid-template-columns: 1fr;
+      grid-row-gap: 12px;
+    }
+  }
+}
+</style>

package/components/common/pages/home/widgets/WidgetsNew.vue

@@ -1,74 +1,79 @@
-<template>
-  <div class="home-total-quantities">
-    <h1>
-      {{ localization.home.totalQuantities }}
-    </h1>
-
-    <div class="grid-container">
-      <common-pages-home-widgets-vms :vms="vms" :loading="props.loading" />
-
-      <common-pages-home-widgets-hosts
-        :hosts="hosts"
-        :loading="props.loading"
-      />
-    </div>
-  </div>
-
-  <div class="home-total-warnings">
-    <h1>
-      {{ localization.home.totalAlertsWarnings }}
-    </h1>
-
-    <div class="grid-container">
-      <common-pages-home-widgets-warnings
-        :alerts="alerts || []"
-        :loading="props.loading"
-      />
-
-      <common-pages-home-widgets-services
-        :services="services || []"
-        :loading="props.loading"
-      />
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import type { UI_I_Localization } from '~/lib/models/interfaces'
-import type {
-  UI_I_Alert,
-  UI_I_Hosts,
-  UI_I_Vms,
-  UI_I_Service,
-} from '~/components/common/pages/home/lib/models/interfaces'
-
-const props = defineProps<{
-  vms: UI_I_Vms
-  hosts: UI_I_Hosts
-  alerts: UI_I_Alert[]
-  services: UI_I_Service[]
-  loading: boolean
-}>()
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-</script>
-
-<style lang="scss" scoped>
-.home-total-warnings,
-.home-total-quantities {
-  margin-top: 24px;
-  & > h1 {
-    font-size: 14px;
-    font-weight: 400;
-    line-height: 16.94px;
-    color: #9da6ad;
-    margin-bottom: 12px;
-  }
-}
-
-.grid-container {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  grid-column-gap: 12px;
-}
-</style>
+<template>
+  <div class="home-total-quantities">
+    <h1>
+      {{ localization.home.totalQuantities }}
+    </h1>
+
+    <div class="grid-container">
+      <common-pages-home-widgets-vms :vms="vms" :loading="props.loading" />
+
+      <common-pages-home-widgets-hosts
+        :hosts="hosts"
+        :loading="props.loading"
+      />
+    </div>
+  </div>
+
+  <div class="home-total-warnings">
+    <h1>
+      {{ localization.home.totalAlertsWarnings }}
+    </h1>
+
+    <div class="grid-container">
+      <common-pages-home-widgets-warnings
+        :alerts="alerts || []"
+        :loading="props.loading"
+      />
+
+      <common-pages-home-widgets-services
+        :services="services || []"
+        :loading="props.loading"
+      />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type {
+  UI_I_Alert,
+  UI_I_Hosts,
+  UI_I_Vms,
+  UI_I_Service,
+} from '~/components/common/pages/home/lib/models/interfaces'
+
+const props = defineProps<{
+  vms: UI_I_Vms
+  hosts: UI_I_Hosts
+  alerts: UI_I_Alert[]
+  services: UI_I_Service[]
+  loading: boolean
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+</script>
+
+<style lang="scss" scoped>
+.home-total-warnings,
+.home-total-quantities {
+  margin-top: 24px;
+  & > h1 {
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 16.94px;
+    color: #9da6ad;
+    margin-bottom: 12px;
+  }
+}
+
+.grid-container {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  grid-column-gap: 12px;
+
+  @media (max-width: 1024px) {
+    grid-template-columns: 1fr;
+    grid-row-gap: 12px;
+  }
+}
+</style>