bfg-common 1.6.96 → 1.6.97

package/components/common/diagramMain/modals/managePhysicalAdapters/ManagePhysicalAdaptersNew.vue

@@ -0,0 +1,306 @@
+<template>
+  <div class="manage-physical-adapters">
+    <ui-modal
+      :texts="modalTextsLocal"
+      :title="localization.common.managePhysicalNetworkAdapters"
+      :subtitle="props.switchName"
+      test-id="manage-physical-adapters-modal"
+      width="880px"
+      size="md"
+      :is-loading="props.isManageAdaptersModalLoading"
+      @hide="emits('hide')"
+      @submit="emits('send-manage-adapter')"
+    >
+      <template #content>
+        <div class="modal-content">
+          <common-adapter-manager
+            :adapters="props.adapters"
+            :free-adapters="props.freeAdapters"
+            :added-adapters="props.addedAdapters"
+            :adapter-status="props.adapterStatus"
+            :is-dark-mode="props.isDarkMode"
+            test-id="manage-physical-adapter"
+            :is-active="true"
+            :full-mode="true"
+            :is-show-no-connected-active-adapters-modal="
+              props.isShowNoConnectedActiveAdaptersModal
+            "
+            :is-show-no-active-adapters-modal="
+              props.isShowNoActiveAdaptersModal
+            "
+            @hide-no-connected-active-adapters-modal="
+              emits('hide-no-connected-active-adapters-modal')
+            "
+            @hide-no-active-adapters-modal="
+              emits('hide-no-active-adapters-modal')
+            "
+            @submit-from-modal="emits('confirm-no-active-adapters-modal')"
+            @change-added-adapters="onChangeAddedAdapters"
+            @change-adapter-status="onChangeAdapterStatus"
+            @get-free-adapters="onGetFreeAdapters"
+          />
+        </div>
+      </template>
+      <template #footerLeftContent><span></span></template>
+    </ui-modal>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_ModalTexts } from '~/node_modules/bfg-uikit/components/ui/modal/models/interfaces'
+import type {
+  UI_I_Localization,
+  UI_I_ItemsWithTotalCounts,
+} from '~/lib/models/interfaces'
+import type {
+  UI_I_Adapter,
+  UI_I_AdapterStatus,
+  UI_I_SwitchAdapterItem,
+} from '~/components/common/diagramMain/lib/models/interfaces'
+
+const props = defineProps<{
+  switchName: string
+  freeAdapters: UI_I_Adapter[]
+  adapterStatus: UI_I_AdapterStatus
+  adapters: UI_I_ItemsWithTotalCounts<UI_I_SwitchAdapterItem>
+  addedAdapters: string[]
+  isDarkMode: boolean
+  isManageAdaptersModalLoading: boolean
+  isShowNoConnectedActiveAdaptersModal: boolean
+  isShowNoActiveAdaptersModal: boolean
+}>()
+
+const emits = defineEmits<{
+  (event: 'get-free-adapters', showModal: () => void): void
+  (event: 'change-added-adapters', addedAdapters: string[]): void
+  (event: 'change-adapter-status', adapterStatus: UI_I_AdapterStatus): void
+  (event: 'hide-no-connected-active-adapters-modal'): void
+  (event: 'hide-no-active-adapters-modal'): void
+  (event: 'confirm-no-active-adapters-modal'): void
+  (event: 'send-manage-adapter'): void
+  (event: 'hide'): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const modalTextsLocal = computed<UI_I_ModalTexts>(() => ({
+  button1: localization.value.common.cancel,
+  button2: localization.value.common.save,
+}))
+
+const onChangeAddedAdapters = (addedAdaptersNew: string[]) => {
+  emits('change-added-adapters', addedAdaptersNew)
+}
+
+const onChangeAdapterStatus = (adapterStatusNew: UI_I_AdapterStatus) => {
+  emits('change-adapter-status', adapterStatusNew)
+}
+
+const onGetFreeAdapters = (showModal: () => void) => {
+  emits('get-free-adapters', showModal)
+}
+</script>
+
+<style scoped lang="scss">
+.modal-content {
+  padding: 8px 0 8px 32px;
+
+  :deep(.manager) {
+    height: calc(100vh - 316px - 36px);
+    max-height: 331px;
+    min-height: unset;
+    width: 240px !important;
+  }
+
+  :deep(.info-container) {
+    .table-fixed-height {
+      height: calc(100vh - 316px - 36px);
+      max-height: 331px;
+      min-height: unset;
+    }
+  }
+}
+
+:deep(.modal-body) {
+  overflow: hidden;
+  height: 100%;
+
+  .modal-content {
+    max-height: calc(100vh - 300px);
+
+    .edit-pg-failover-order-with-details.full-height {
+      max-height: calc(100vh - 316px);
+
+      .failover-order-with-details {
+        max-height: calc(100vh - 316px);
+
+        .flex-container.flex-row.fill-parent {
+          max-height: calc(100vh - 316px);
+
+          .failover-order-master.relative-container {
+            max-height: calc(100vh - 316px);
+
+            .manager-wrapper {
+              max-height: calc(100vh - 316px);
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .ui-main-no-items-found {
+    padding-top: 8px;
+    padding-bottom: 8px;
+  }
+
+  .full-width-adapter-info.no-selected-adapter {
+    overflow: hidden;
+  }
+}
+
+:deep(.modal-footer-transparent-block) {
+  display: block !important;
+  width: calc(100% - 224px - 32px - 16px - 24px);
+  right: 16px;
+  top: -22px;
+}
+
+@media (max-width: 1084px) {
+  :deep(.edit-pg-failover-order-with-details:not(.add-adapter-view)) {
+    .failover-order-details {
+      width: 100%;
+    }
+    .tabs-container {
+      padding-right: 32px !important;
+    }
+    .manager {
+      height: calc(100vh - 316px - 36px) !important;
+      max-height: 331px !important;
+      min-height: unset !important;
+      width: 240px !important;
+    }
+
+    .info-container {
+      .table-fixed-height {
+        height: calc(100vh - 316px - 36px) !important;
+        max-height: 331px !important;
+        min-height: unset !important;
+      }
+    }
+
+    .table-fixed-height {
+      min-height: unset !important;
+      max-height: unset !important;
+
+      .info-block-container {
+        padding-right: 19px !important;
+      }
+    }
+    .flex-container {
+      flex-direction: row !important;
+      row-gap: 16px;
+
+      .manager-wrapper {
+        width: 100%;
+        padding-right: 0;
+      }
+    }
+    .no-selected-adapter {
+      padding-bottom: unset;
+    }
+  }
+}
+
+@media (max-width: 650px) {
+  :deep(.modal-body) {
+    overflow-y: auto !important;
+    scrollbar-gutter: stable;
+    height: 383px !important;
+
+    .modal-content {
+      max-height: 100% !important;
+      height: 100% !important;
+
+      .edit-pg-failover-order-with-details.full-height {
+        max-height: 100% !important;
+        height: 100% !important;
+        .failover-order-with-details {
+          max-height: 100% !important;
+          height: 100% !important;
+          .flex-container.flex-row.fill-parent {
+            max-height: 100% !important;
+            height: 100% !important;
+            .manager-wrapper {
+              max-height: 100% !important;
+              height: 100% !important;
+            }
+            .failover-order-details.relative-container {
+              max-height: 100% !important;
+              height: 100% !important;
+            }
+          }
+        }
+      }
+    }
+  }
+  .modal-content {
+    padding: 8px 0 8px 32px;
+    height: 100%;
+
+    :deep(.manager) {
+      width: 100% !important;
+    }
+    :deep(.info-container) {
+      .table-fixed-height {
+        height: unset;
+      }
+    }
+  }
+
+  :deep(.modal-footer-transparent-block) {
+    display: block !important;
+    width: calc(100% - 14px) !important;
+    right: 14px !important;
+    top: -16px !important;
+  }
+
+  :deep(.edit-pg-failover-order-with-details:not(.add-adapter-view)) {
+    .manager {
+      height: unset !important;
+      max-height: unset !important;
+      min-height: unset !important;
+      width: 100% !important;
+    }
+
+    .info-container {
+      .table-fixed-height {
+        height: unset !important;
+        max-height: unset !important;
+        min-height: unset !important;
+      }
+    }
+
+    :deep(.table-fixed-height) {
+      min-height: unset !important;
+      max-height: unset !important;
+
+      .info-block-container {
+        padding-right: 19px !important;
+      }
+    }
+    .flex-container {
+      flex-direction: column !important;
+      column-gap: 16px;
+
+      .manager-wrapper {
+        width: 100%;
+        padding-right: 18px;
+      }
+    }
+    .no-selected-adapter {
+      padding-bottom: 16px;
+    }
+  }
+}
+</style>

package/components/common/diagramMain/modals/{ManagePhysicalAdaptersModal.vue → managePhysicalAdapters/ManagePhysicalAdaptersOld.vue}

@@ -1,9 +1,9 @@
 <template>
-  <div>
+  <div class="manage-physical-adapters">
     <atoms-modal
-      :width="props.width"
-      :height="props.height"
-      :show="props.show"
+      width="864px"
+      height="510px"
+      show
       :title="localization.common.managePhysicalNetworkAdapters"
       :second-title="props.switchName"
       :class="[
@@ -12,8 +12,8 @@
           'is-dark': props.isDarkMode,
         },
       ]"
-      @hide="onHideManagePhysicalAdaptersModal"
-      @submit="onSendManageAdapter"
+      @hide="emits('hide')"
+      @submit="emits('send-manage-adapter')"
     >
       <template #modalBody>
         <div class="wizard-content__container">
@@ -21,22 +21,25 @@
             <common-adapter-manager
               :adapters="props.adapters"
               :free-adapters="props.freeAdapters"
-              :added-adapters="addedAdapters"
+              :added-adapters="props.addedAdapters"
               :adapter-status="props.adapterStatus"
               :is-dark-mode="props.isDarkMode"
               test-id="manage-physical-adapter"
               :is-active="true"
               :full-mode="true"
               :is-show-no-connected-active-adapters-modal="
-                isShowNoConnectedActiveAdaptersModal
+                props.isShowNoConnectedActiveAdaptersModal
+              "
+              :is-show-no-active-adapters-modal="
+                props.isShowNoActiveAdaptersModal
               "
-              :is-show-no-active-adapters-modal="isShowNoActiveAdaptersModal"
-
               @hide-no-connected-active-adapters-modal="
-                onHideNoConnectedActiveAdaptersModal
+                emits('hide-no-connected-active-adapters-modal')
               "
-              @hide-no-active-adapters-modal="onHideNoActiveAdaptersModal"
-              @submit-from-modal="onConfirmNoActiveAdaptersModal"
+              @hide-no-active-adapters-modal="
+                emits('hide-no-active-adapters-modal')
+              "
+              @submit-from-modal="emits('confirm-no-active-adapters-modal')"
               @change-added-adapters="onChangeAddedAdapters"
               @change-adapter-status="onChangeAdapterStatus"
               @get-free-adapters="onGetFreeAdapters"
@@ -60,131 +63,42 @@ import type {
   UI_I_SwitchAdapterItem,
 } from '~/components/common/diagramMain/lib/models/interfaces'
 
-// Props from up
-const props = withDefaults(
-  defineProps<{
-    switchName: string
-    show: boolean
-    viewName: string
-    width: string
-    height: string
-    freeAdapters: UI_I_Adapter[]
-    adapterStatus: UI_I_AdapterStatus
-    adapters: UI_I_ItemsWithTotalCounts<UI_I_SwitchAdapterItem>
-    initialAdapterStatus: UI_I_AdapterStatus
-    isDarkMode?: boolean
-    isManageAdaptersModalLoading?: boolean
-  }>(),
-  {
-    switchName: '',
-    adapterStatus: () => ({
-      active: [],
-      standby: [],
-      unused: [],
-    }),
-    isDarkMode: false,
-    isManageAdaptersModalLoading: false,
-  }
-)
+const props = defineProps<{
+  switchName: string
+  freeAdapters: UI_I_Adapter[]
+  adapterStatus: UI_I_AdapterStatus
+  adapters: UI_I_ItemsWithTotalCounts<UI_I_SwitchAdapterItem>
+  addedAdapters: string[]
+  isDarkMode: boolean
+  isManageAdaptersModalLoading: boolean
+  isShowNoConnectedActiveAdaptersModal: boolean
+  isShowNoActiveAdaptersModal: boolean
+}>()
 
-// Modal
 const emits = defineEmits<{
-  (event: 'hide'): void
   (event: 'get-free-adapters', showModal: () => void): void
   (event: 'change-added-adapters', addedAdapters: string[]): void
   (event: 'change-adapter-status', adapterStatus: UI_I_AdapterStatus): void
-  (
-    event: 'send-manage-physical-adapters-data',
-    adapterStatus: UI_I_AdapterStatus,
-    switchName: string,
-    hideModal: () => void
-  ): void
+  (event: 'hide-no-connected-active-adapters-modal'): void
+  (event: 'hide-no-active-adapters-modal'): void
+  (event: 'confirm-no-active-adapters-modal'): void
+  (event: 'send-manage-adapter'): void
+  (event: 'hide'): void
 }>()
 
-// UI_I_Localization
 const localization = computed<UI_I_Localization>(() => useLocal())
 
-const addedAdapters = ref<string[]>()
-
 const onChangeAddedAdapters = (addedAdaptersNew: string[]) => {
-  addedAdapters.value = addedAdaptersNew
+  emits('change-added-adapters', addedAdaptersNew)
 }
 
 const onChangeAdapterStatus = (adapterStatusNew: UI_I_AdapterStatus) => {
   emits('change-adapter-status', adapterStatusNew)
 }
 
-const isShowNoConnectedActiveAdaptersModal = ref(false)
-const isShowNoActiveAdaptersModal = ref(false)
-
-const showNoConnectedActiveAdaptersModal = () => {
-  isShowNoConnectedActiveAdaptersModal.value = true
-}
-const onHideNoConnectedActiveAdaptersModal = () => {
-  isShowNoConnectedActiveAdaptersModal.value = false
-}
-const showNoActiveAdaptersModal = () => {
-  isShowNoActiveAdaptersModal.value = true
-}
-const onHideNoActiveAdaptersModal = () => {
-  isShowNoActiveAdaptersModal.value = false
-}
-
-const onSendManagePhysicalAdaptersData = (
-  adapterStatus: UI_I_AdapterStatus,
-  switchName: string,
-  hideModal: () => void
-) => {
-  emits(
-    'send-manage-physical-adapters-data',
-    adapterStatus,
-    switchName,
-    hideModal
-  )
-}
-const onConfirmNoActiveAdaptersModal = () => {
-  onSendManagePhysicalAdaptersData(
-    props.adapterStatus,
-    props.switchName,
-    onHideManagePhysicalAdaptersModal
-  )
-  onHideNoConnectedActiveAdaptersModal()
-  onHideNoActiveAdaptersModal()
-}
-
-const onSendManageAdapter = () => {
-  if (props.adapterStatus.active.length === 0) {
-    showNoActiveAdaptersModal()
-    return
-  }
-
-  const activeAndConnectedAdapters = props.adapterStatus.active.filter(
-    (adapterName: string) =>
-      props.adapters.items.find(
-        (ad: UI_I_SwitchAdapterItem) => ad.name === adapterName
-      )?.carrier
-  )
-  if (activeAndConnectedAdapters.length === 0) {
-    showNoConnectedActiveAdaptersModal()
-    return
-  }
-
-  onSendManagePhysicalAdaptersData(
-    props.adapterStatus,
-    props.switchName,
-    onHideManagePhysicalAdaptersModal
-  )
-}
-
 const onGetFreeAdapters = (showModal: () => void) => {
   emits('get-free-adapters', showModal)
 }
-
-const onHideManagePhysicalAdaptersModal = (): void => {
-  addedAdapters.value = []
-  emits('change-adapter-status', props.initialAdapterStatus)
-  emits('hide')
-}
 </script>
 
 <style scoped lang="scss">

package/components/common/diagramMain/modals/migrateVmkernelAdapter/MigrateVmkernelAdapter.vue

@@ -112,7 +112,7 @@ const title = computed<string>(
 
 const connectionSettings = ref<UI_I_ConnectionSettings>({
   networkLabel: 'VM Network',
-  vlanId: 'None (0)',
+  vlanId: `${localization.value.common.none2} (0)`,
 })
 
 const vmkernelAdapter = ref<UI_I_SelectVmkernelAdapter>({
@@ -262,7 +262,7 @@ const reset = (): void => {
   wizard.reset()
   connectionSettings.value = {
     networkLabel: 'VM Network',
-    vlanId: 'None (0)',
+    vlanId: `${localization.value.common.none2} (0)`,
   }
   vmkernelAdapter.value = {
     vm: '',

package/components/common/diagramMain/modals/migrateVmkernelAdapter/steps/ConnectionSettings.vue

@@ -54,7 +54,7 @@
                 <div class="flex-align-center">
                   <atoms-combobox
                     v-model.trim="fields.vlanId"
-                    :items="vlanIdSelectData"
+                    :items="vlanIdSelectDataLocal"
                     :class="{
                       'danger-not-valid': props.messagesFields.vlan.field,
                     }"
@@ -95,7 +95,7 @@ import type {
   UI_I_Localization,
 } from '~/lib/models/interfaces'
 import type { UI_I_ConnectionSettings } from '~/components/common/wizards/network/add/lib/models/interfaces'
-import { vlanIdSelectData } from '~/components/common/wizards/network/add/lib/config/config'
+import { vlanIdSelectDataFunc } from '~/components/common/wizards/network/add/lib/config/config'
 import {
   validateNetworkConnectionSettingsLocal,
   validateVlanIdConnectionSettingsLocal,
@@ -109,6 +109,7 @@ const props = defineProps<{
 }>()
 
 const localization = computed<UI_I_Localization>(() => useLocal())
+const vlanIdSelectDataLocal = computed<UI_I_Localization>(() => vlanIdSelectDataFunc(localization.value))
 
 const emits = defineEmits<{
   (

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

@@ -1,3 +1,5 @@
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+
 export const isIntegerNumberInRange = (
   value: number | string | undefined,
   down: number,
@@ -8,7 +10,10 @@ export const isIntegerNumberInRange = (
   Number(value) > up ||
   Number(value) !== Math.round(Number(value))
 
-export const checkVlanId = (vlanId: string): boolean =>
-  vlanId !== 'None (0)' &&
-  vlanId !== 'All (4095)' &&
+export const checkVlanId = (
+  vlanId: string,
+  localization: UI_I_Localization
+): boolean =>
+  vlanId !== `${localization.common.none2} (0)` &&
+  vlanId !== `${localization.common.all} (4095)` &&
   (isIntegerNumberInRange(vlanId, 0, 4095) || vlanId === '')

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

@@ -18,7 +18,7 @@ export const validateVlanIdConnectionSettingsLocal = (
   wizard.validateFieldLocal(
     1,
     UI_E_MigrationValidationFields.CONNECTION_SETTINGS_VLAN,
-    checkVlanId(data.vlanId),
+    checkVlanId(data.vlanId, localization),
     localization.common.vlanIdInvalidMessage,
     localization.common.vlanIdInvalidMessage
   )
@@ -46,7 +46,7 @@ export const checkConnectionSettingsSync = (
 ): UI_I_ValidationReturn => {
   let stepHasError = false
 
-  if (checkVlanId(data.vlanId)) {
+  if (checkVlanId(data.vlanId, localization)) {
     stepHasError = wizard.setValidation(
       1,
       UI_E_MigrationValidationFields.CONNECTION_SETTINGS_VLAN,