bfg-common 1.4.579 → 1.4.581

package/components/common/diagramMain/modals/migrateVmkernelAdapter/validations/selectVmkernelAdapter.ts

@@ -1,52 +1,52 @@
-import type { UI_I_SelectVmkernelAdapter } from '~/components/common/wizards/network/add/lib/models/interfaces'
-import type { UI_I_Localization } from '~/lib/models/interfaces'
-import type { UI_I_WizardStep, UI_I_ValidationReturn } from '~/components/atoms/wizard/lib/models/interfaces'
-import { UI_E_MigrationValidationFields } from '~/components/common/diagramMain/lib/models/enums'
-import type Wizard from '~/components/atoms/wizard/lib/utils/utils'
-
-export const validateSelectedVmLocal = (
-  localization: UI_I_Localization,
-  data: UI_I_SelectVmkernelAdapter,
-  wizard: Wizard
-): void => {
-  wizard.validateFieldLocal(
-    0,
-    'vm',
-    data.vm === '',
-    '',
-    localization.common.noVmKernelNetworkAdapterSelectedForMigration
-  )
-}
-
-export const checkSelectedVmSync = (
-  localization: UI_I_Localization,
-  data: UI_I_SelectVmkernelAdapter,
-  wizard: Wizard,
-  value: UI_I_WizardStep[]
-): UI_I_ValidationReturn => {
-  let stepHasError = false
-
-  if (data.vm === '') {
-    stepHasError = wizard.setValidation(
-      0,
-      UI_E_MigrationValidationFields.SELECT_ADAPTER_VM,
-      {
-        fieldMessage: '',
-        alertMessage: localization.common.noVmKernelNetworkAdapterSelectedForMigration,
-      }
-    )
-  } else if (
-    wizard.hasMessage(0, UI_E_MigrationValidationFields.SELECT_ADAPTER_VM)
-  ) {
-    value = wizard.removeValidation(
-      0,
-      UI_E_MigrationValidationFields.SELECT_ADAPTER_VM,
-      value
-    )
-  }
-
-  return {
-    newValue: value,
-    stepHasError,
-  }
-}
+import type { UI_I_SelectVmkernelAdapter } from '~/components/common/wizards/network/add/lib/models/interfaces'
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_WizardStep, UI_I_ValidationReturn } from '~/components/atoms/wizard/lib/models/interfaces'
+import { UI_E_MigrationValidationFields } from '~/components/common/diagramMain/lib/models/enums'
+import type Wizard from '~/components/atoms/wizard/lib/utils/utils'
+
+export const validateSelectedVmLocal = (
+  localization: UI_I_Localization,
+  data: UI_I_SelectVmkernelAdapter,
+  wizard: Wizard
+): void => {
+  wizard.validateFieldLocal(
+    0,
+    'vm',
+    data.vm === '',
+    '',
+    localization.common.noVmKernelNetworkAdapterSelectedForMigration
+  )
+}
+
+export const checkSelectedVmSync = (
+  localization: UI_I_Localization,
+  data: UI_I_SelectVmkernelAdapter,
+  wizard: Wizard,
+  value: UI_I_WizardStep[]
+): UI_I_ValidationReturn => {
+  let stepHasError = false
+
+  if (data.vm === '') {
+    stepHasError = wizard.setValidation(
+      0,
+      UI_E_MigrationValidationFields.SELECT_ADAPTER_VM,
+      {
+        fieldMessage: '',
+        alertMessage: localization.common.noVmKernelNetworkAdapterSelectedForMigration,
+      }
+    )
+  } else if (
+    wizard.hasMessage(0, UI_E_MigrationValidationFields.SELECT_ADAPTER_VM)
+  ) {
+    value = wizard.removeValidation(
+      0,
+      UI_E_MigrationValidationFields.SELECT_ADAPTER_VM,
+      value
+    )
+  }
+
+  return {
+    newValue: value,
+    stepHasError,
+  }
+}

package/components/common/diagramMain/modals/migrateVmkernelAdapter/validations/validations.ts

@@ -1,19 +1,19 @@
-import {
-  validateVlanIdConnectionSettingsLocal,
-  validateNetworkConnectionSettingsLocal,
-  checkConnectionSettingsSync,
-  checkNetworkAsync,
-} from '~/components/common/diagramMain/modals/migrateVmkernelAdapter/validations/connectionSettings'
-import {
-  checkSelectedVmSync,
-  validateSelectedVmLocal,
-} from '~/components/common/diagramMain/modals/migrateVmkernelAdapter/validations/selectVmkernelAdapter'
-
-export {
-  validateVlanIdConnectionSettingsLocal,
-  validateNetworkConnectionSettingsLocal,
-  checkConnectionSettingsSync,
-  checkNetworkAsync,
-  checkSelectedVmSync,
-  validateSelectedVmLocal,
-}
+import {
+  validateVlanIdConnectionSettingsLocal,
+  validateNetworkConnectionSettingsLocal,
+  checkConnectionSettingsSync,
+  checkNetworkAsync,
+} from '~/components/common/diagramMain/modals/migrateVmkernelAdapter/validations/connectionSettings'
+import {
+  checkSelectedVmSync,
+  validateSelectedVmLocal,
+} from '~/components/common/diagramMain/modals/migrateVmkernelAdapter/validations/selectVmkernelAdapter'
+
+export {
+  validateVlanIdConnectionSettingsLocal,
+  validateNetworkConnectionSettingsLocal,
+  checkConnectionSettingsSync,
+  checkNetworkAsync,
+  checkSelectedVmSync,
+  validateSelectedVmLocal,
+}

package/components/common/diagramMain/modals/viewSettings/info/InfoNew.vue

@@ -107,9 +107,10 @@ const viewSettingsTabContent = (tab: number): UI_I_ViewSettingsFields[] =>
 }
 
 .table-fixed-height {
-  min-height: 400px;
-  max-height: 400px;
+  min-height: min(calc(100vh - 270px), 400px);
+  max-height: min(calc(100vh - 270px), 400px);
   overflow-y: auto;
+  overflow-x: hidden;
   padding-right: 32px;
   padding-top: 16px;
 

package/components/common/diagramMain/modals/viewSettings/viewSettingsModal/ViewSettingsModalNew.vue

@@ -60,4 +60,9 @@ const emits = defineEmits<{
 }>()
 </script>
 
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+:deep(.modal-body) {
+  max-height: unset;
+  overflow-y: unset;
+}
+</style>

package/components/common/diagramMain/network/Contents.vue

@@ -16,6 +16,7 @@
       style="text-decoration: none"
       cursor="pointer"
       data-title="network-name-link"
+      class="network-title-link"
       @click="onSelectNetwork(props.network.id)"
     >
       <foreignObject
@@ -430,6 +431,8 @@ const onTogglePorts = (
 
 :root.is-new-view {
   .network-title {
+    user-select: none;
+    -webkit-user-select: none;
     line-height: 26px;
     color: var(--diagram-content-text);
 
@@ -440,7 +443,7 @@ const onTogglePorts = (
     &.is-selected {
       color: var(--diagram-content-text-selected);
       &:hover {
-        color: var(--diagram-content-text-selected);
+        color: var(--diagram-content-text-selected-hover);
         text-decoration: unset;
       }
     }

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: 400;
+    font-weight: 300;
     line-height: 16.94px;
     text-align: center;
   }

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

@@ -532,6 +532,8 @@ 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/pages/home/headline/HeadlineNew.vue

@@ -1,71 +1,48 @@
-<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>
+<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>

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

@@ -1,63 +1,58 @@
-<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>
+<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>