bfg-common 1.6.91 → 1.6.92

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: `${localization.value.common.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: `${localization.value.common.none} (0)`,
+    vlanId: `${localization.value.common.none2} (0)`,
   }
   vmkernelAdapter.value = {
     vm: '',

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

@@ -14,6 +14,6 @@ export const checkVlanId = (
   vlanId: string,
   localization: UI_I_Localization
 ): boolean =>
-  vlanId !== `${localization.common.none} (0)` &&
+  vlanId !== `${localization.common.none2} (0)` &&
   vlanId !== `${localization.common.all} (4095)` &&
   (isIntegerNumberInRange(vlanId, 0, 4095) || vlanId === '')

package/components/common/diagramMain/modals/remove/RemoveModalNew.vue

@@ -1,14 +1,24 @@
 <template>
-  <ui-popup
-    :v-if="props.show"
-    :title="title"
-    :message="text"
-    :texts="buttons"
-    icon-name="info-status"
-    size="sm"
-    @hide="onHideModal"
-    @submit="onRemove"
-  />
+  <div>
+    <ui-popup
+      :v-if="props.show"
+      :title="title"
+      :message="text"
+      :texts="buttons"
+      icon-name="circle-warning"
+      size="sm"
+      @hide="onHideModal"
+      @submit="onRemove"
+    >
+      <template #content>
+        <div v-if="props.type === 'port'" class="message">
+          <span class="message-title">{{ title }}</span>
+          <span class="message-item">{{ text[0] }}</span>
+          <span class="message-item">{{ text[1] }}</span>
+        </div>
+      </template>
+    </ui-popup>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -63,16 +73,19 @@ const title = computed<string>(() => {
   }
 })
 
-const text = computed<string>(() => {
+const text = computed<string | string[]>(() => {
   switch (props.type) {
     case 'network':
       return localization.value.common.confirmNetworkRemovalMessage
         .replace('{networkName}', props.label)
         .replace('{switchName}', props.switchName)
     case 'port':
-      return localization.value.common.confirmPortRemovalMessage
-        .replace('{portName}', props.id)
-        .replace('{switchName}', props.switchName)
+      return [
+        localization.value.common.confirmPortRemovalMessage1,
+        localization.value.common.confirmPortRemovalMessage2
+          .replace('{portName}', props.id)
+          .replace('{switchName}', props.switchName),
+      ]
     case 'switch':
       return localization.value.common.confirmSwitchRemovalMessage
         .replace('{switchName}', props.switchName)
@@ -84,7 +97,7 @@ const text = computed<string>(() => {
 
 const buttons = computed<UI_I_ModalTexts>(() => ({
   button1: localization.value.common.cancel,
-  button2: localization.value.common.confirm,
+  button2: localization.value.common.remove,
 }))
 
 const isSphereProject = computed<boolean>(() => props.project === 'sphere')
@@ -103,4 +116,42 @@ const onHideModal = (): void => {
 }
 </script>
 
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+:deep(svg) {
+  path {
+    fill: #ea3223;
+  }
+}
+
+.message {
+  padding: 16px 32px;
+
+  &-title {
+    display: block;
+    font-weight: 500;
+    font-size: 20px;
+    line-height: 24px;
+    letter-spacing: 0;
+    text-align: center;
+    vertical-align: middle;
+    margin-bottom: 8px;
+    color: var(--title-form-first-color);
+  }
+
+  &-item {
+    display: block;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 18px;
+    letter-spacing: 0;
+    text-align: center;
+    vertical-align: middle;
+    color: #9da6ad;
+    margin-bottom: 12px;
+  }
+
+  span:last-of-type {
+    margin-bottom: 0;
+  }
+}
+</style>

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

@@ -46,5 +46,13 @@ const emits = defineEmits<{
 :deep(.modal-body) {
   max-height: unset;
   overflow-y: unset;
+
+  .info-container {
+    padding-top: 0;
+  }
+  .table-fixed-height {
+    scrollbar-gutter: stable;
+    padding-right: 18px;
+  }
 }
 </style>

package/components/common/diagramMain/skeleton/Header.vue

@@ -0,0 +1,31 @@
+<template>
+  <div class="diagram-header-skeleton">
+    <div class="diagram-header-skeleton-title">
+      <ui-skeleton-item width="160" height="22" />
+    </div>
+    <div class="diagram-header-skeleton-buttons">
+      <ui-skeleton-item width="112" height="36" border-radius="8" />
+      <ui-skeleton-item width="160" height="36" border-radius="8" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped lang="scss">
+.diagram-header-skeleton {
+  padding: 16px;
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  row-gap: 24px;
+  column-gap: 24px;
+
+  &-buttons {
+    display: flex;
+    column-gap: 16px;
+    margin-left: auto;
+  }
+}
+</style>