bfg-common 1.3.342 → 1.3.344

package/components/common/diagramMain/DiagramMain.vue

@@ -35,205 +35,74 @@
         @show-modal="onShowModal"
       />
     </div>
-    <common-diagram-main-modals-view-settings-modal
-      v-if="isShowPortViewSettingsModal"
-      view-name="port-settings-modal"
-      height="448px"
-      :title="initialData.portName"
-      :second-title="hostName"
-      :show="isShowPortViewSettingsModal"
-      :modal-tabs="portViewSettingsModalTabs"
-      :view-settings-fields="portViewSettings"
-      @hide="onHidePortViewSettingsModal"
-    />
-    <common-diagram-main-modals-view-settings-modal
-      v-if="isShowNetworkViewSettingsModal"
-      view-name="network-settings-modal"
-      height="448px"
-      :title="initialData.networkLabel"
-      :show="isShowNetworkViewSettingsModal"
-      :modal-tabs="networkViewSettingsModalTabs"
-      :view-settings-fields="networkViewSettings"
+    <common-diagram-main-modals
+      :is-show-port-view-settings-modal="isShowPortViewSettingsModal"
+      :is-show-network-view-settings-modal="isShowNetworkViewSettingsModal"
+      :is-show-adapter-view-settings-modal="isShowAdapterViewSettingsModal"
+      :is-show-vcenter-view-settings-modal="isShowVCenterViewSettingsModal"
+      :is-show-network-remove-modal="isShowNetworkRemoveModal"
+      :is-show-switch-remove-modal="isShowSwitchRemoveModal"
+      :is-show-port-remove-modal="isShowPortRemoveModal"
+      :is-show-network-edit-settings-modal="isShowNetworkEditSettingsModal"
+      :is-show-port-edit-settings-modal="isShowPortEditSettingsModal"
+      :is-show-switch-edit-settings-modal="isShowSwitchEditSettingsModal"
+      :is-show-switch-view-settings-modal="isShowSwitchViewSettingsModal"
+      :is-show-switch-manage-physical-adapters-modal="
+        isShowSwitchManagePhysicalAdaptersModal
+      "
+      :is-show-add-networking-modal="isShowAddNetworkingModal"
+      :is-show-migrate-vmkernel-adapter-modal="
+        isShowMigrateVmkernelAdapterModal
+      "
       :initial-data="initialData"
-      @hide="onHideNetworkViewSettingsModal"
-    />
-    <common-diagram-main-modals-view-settings-modal
-      v-if="isShowAdapterViewSettingsModal"
-      :view-name="localization.physicalNetworkAdapter"
-      :title="initialData.name || localization.physicalNetworkAdapter"
-      :second-title="props.hostName"
-      height="448px"
-      :show="isShowAdapterViewSettingsModal"
-      :modal-tabs="adapterViewSettingsModalTabs"
-      :view-settings-fields="adapterViewSettings"
-      @hide="onHideAdapterViewSettingsModal"
-    />
-    <common-diagram-main-modals-view-settings-modal
-      v-if="isShowVCenterViewSettingsModal"
-      view-name="VCenter-settings-modal"
-      height="185px"
-      info-height="80px"
-      :without-footer-padding="true"
-      :title="initialData.vmTitle"
-      :show="isShowVCenterViewSettingsModal"
-      :view-settings-fields="vCenterViewSettings"
-      @hide="onHideVCenterViewSettingsModal"
-    />
-    <common-diagram-main-modals-remove-modal
-      v-if="isShowNetworkRemoveModal"
-      :id="initialData.id"
-      :label="initialData.networkLabel"
-      modal-name="network-port-remove-modal"
-      view-name="port-network-remove"
-      width="872px"
-      height="558px"
-      :title="localization.removePortGroup"
-      :show="isShowNetworkRemoveModal"
-      :is-show-loader="props.isRemoveModalLoading"
-      type="network"
-      @remove="onRemove"
-      @hide="onHideNetworkRemoveModal"
-    />
-    <common-diagram-main-modals-remove-modal
-      v-if="isShowSwitchRemoveModal"
-      :id="props.diagramData.id"
-      modal-name="switch-remove-modal"
-      view-name="switch-remove"
-      width="872px"
-      height="558px"
-      title="Remove Standard Switch"
-      :show="isShowSwitchRemoveModal"
-      :is-show-loader="props.isRemoveModalLoading"
-      type="switch"
-      @remove="onRemove"
-      @hide="onHideSwitchRemoveModal"
-    />
-    <common-diagram-main-modals-remove-modal
-      v-if="isShowPortRemoveModal"
-      :id="initialData.portName"
-      modal-name="port-remove-modal"
-      view-name="port-remove"
-      width="872px"
-      height="558px"
-      :title="localization.removeVMkernelAdapter"
-      :show="isShowPortRemoveModal"
-      :is-show-loader="props.isRemoveModalLoading"
-      type="port"
-      @remove="onRemove"
-      @hide="onHidePortRemoveModal"
-    />
-    <common-diagram-main-modals-edit-settings-modal
-      v-if="isShowNetworkEditSettingsModal"
-      view-name="network-edit"
-      width="1087px"
-      height="662px"
-      :show="isShowNetworkEditSettingsModal"
-      :title="initialData.networkLabel"
-      :initial-data="initialData"
-      :items="networkEditSettingsTabs"
+      :host-name="props.hostName"
+      :is-remove-modal-loading="props.isRemoveModalLoading"
+      :diagram-data="props.diagramData"
       :adapters="props.adapters"
       :is-dark-mode="props.isDarkMode"
       :is-edit-modal-loading="props.isEditModalLoading"
+      :free-adapters="props.freeAdapters"
+      :manage-physical-adapter-status="managePhysicalAdapterStatus"
+      :initial-manage-physical-adapter-status="
+        initialManagePhysicalAdapterStatus
+      "
+      :is-manage-adapters-modal-loading="props.isManageAdaptersModalLoading"
+      :standard-switches-initial="props.standardSwitchesInitial"
+      :selected-standard-switch-id="selectedStandardSwitchId"
+      :selected-switch-id="selectedSwitchId"
+      :tcp-stacks="props.tcpStacks"
+      :is-networking-loading="props.isNetworkingLoading"
+      :networks-list="props.networksList"
+      :is-migrate-adapter-loading="props.isMigrateAdapterLoading"
+      :diagrams-data="props.diagramsData"
+      @hide-port-view-settings-modal="onHidePortViewSettingsModal"
+      @hide-network-view-settings-modal="onHideNetworkViewSettingsModal"
+      @hide-adapter-view-settings-modal="onHideAdapterViewSettingsModal"
+      @hide-vcenter-view-settings-modal="onHideVCenterViewSettingsModal"
+      @hide-switch-view-settings-modal="onHideSwitchViewSettingsModal"
+      @hide-network-remove-modal="onHideNetworkRemoveModal"
+      @hide-switch-remove-modal="onHideSwitchRemoveModal"
+      @hide-port-remove-modal="onHidePortRemoveModal"
+      @hide-network-edit-settings-modal="onHideNetworkEditSettingsModal"
+      @hide-port-edit-settings-modal="onHidePortEditSettingsModal"
+      @hide-switch-edit-settings-modal="onHideSwitchEditSettingsModal"
+      @hide-switch-manage-physical-adapters-modal="
+        onHideSwitchManagePhysicalAdaptersModal
+      "
+      @hide-add-networking-modal="onHideAddNetworkingModal"
+      @hide-migrate-vmkernel-adapter-modal="onHideMigrateVmkernelAdapterModal"
+      @remove="onRemove"
       @send-edit-data="onSendEditData"
       @change-edit-fields-data="onChangeEditFieldsData"
       @check-network-label="onCheckNetworkLabel"
-      @hide="onHideNetworkEditSettingsModal"
-    />
-    <common-diagram-main-modals-edit-settings-modal
-      v-if="isShowPortEditSettingsModal"
-      view-name="port-edit"
-      width="872px"
-      height="558px"
-      :show="isShowPortEditSettingsModal"
-      :title="initialData.portName"
-      :initial-data="initialData"
-      :items="portEditSettingsTabs"
-      :is-dark-mode="props.isDarkMode"
-      :is-edit-modal-loading="props.isEditModalLoading"
-      @send-edit-data="onSendEditData"
-      @change-edit-fields-data="onChangeEditFieldsData"
-      @hide="onHidePortEditSettingsModal"
+      @send-manage-physical-adapters-data="onSendManagePhysicalAdaptersData"
+      @change-adapter-status="onChangeManagePhysicalAdapterStatus"
+      @get-free-adapters="onGetFreeAdapters"
+      @get-existing-standard-switches="onGetExistingStandardSwitches"
+      @get-tcp-stacks="onGetTcpStacks"
+      @send-add-networking-data="onSendNetworkData"
+      @add-networking-data-validate="onValidateBeforeSending"
     />
-    <template v-if="!props.inPortlet">
-      <common-diagram-main-modals-edit-settings-modal
-        v-if="isShowSwitchEditSettingsModal"
-        view-name="switch-edit"
-        width="1087px"
-        height="662px"
-        :show="isShowSwitchEditSettingsModal"
-        :title="props.diagramData.id"
-        :initial-data="initialData"
-        :items="switchEditSettingsTabs"
-        :adapters="props.adapters"
-        :is-dark-mode="props.isDarkMode"
-        :is-edit-modal-loading="props.isEditModalLoading"
-        @send-edit-data="onSendEditData"
-        @change-edit-fields-data="onChangeEditFieldsData"
-        @hide="onHideSwitchEditSettingsModal"
-      />
-      <common-diagram-main-modals-view-settings-modal
-        v-if="isShowSwitchViewSettingsModal"
-        view-name="switch-view-settings"
-        width="576px"
-        height="449px"
-        info-height="390px"
-        :with-collapse="true"
-        :title="props.diagramData.diagramName"
-        :show="isShowSwitchViewSettingsModal"
-        :modal-tabs="switchViewSettingsModalTabs"
-        :view-settings-fields="switchViewSettings"
-        @hide="onHideSwitchViewSettingsModal"
-      />
-      <common-diagram-main-modals-manage-physical-adapters-modal
-        v-if="isShowSwitchManagePhysicalAdaptersModal"
-        view-name="switch-manage-physical-adapters"
-        width="864px"
-        height="510px"
-        :show="isShowSwitchManagePhysicalAdaptersModal"
-        :switch-name="props.diagramData.id"
-        :free-adapters="props.freeAdapters"
-        :adapter-status="managePhysicalAdapterStatus"
-        :adapters="props.adapters"
-        :is-dark-mode="props.isDarkMode"
-        :initial-adapter-status="initialManagePhysicalAdapterStatus"
-        :is-manage-adapters-modal-loading="props.isManageAdaptersModalLoading"
-        @send-manage-physical-adapters-data="onSendManagePhysicalAdaptersData"
-        @change-adapter-status="onChangeManagePhysicalAdapterStatus"
-        @get-free-adapters="onGetFreeAdapters"
-        @hide="onHideSwitchManagePhysicalAdaptersModal"
-      />
-      <common-wizards-network-add
-        v-if="isShowAddNetworkingModal"
-        :show="isShowAddNetworkingModal"
-        :adapters="props.adapters"
-        :standard-switches-initial="props.standardSwitchesInitial"
-        :free-adapters="props.freeAdapters"
-        :is-dark-mode="props.isDarkMode"
-        :selected-standard-switch-id="selectedStandardSwitchId"
-        :selected-switch-id="selectedSwitchId"
-        :tcp-stacks="props.tcpStacks"
-        :diagrams-data="props.diagramsData"
-        :is-networking-loading="props.isNetworkingLoading"
-        @check-network-label="onCheckNetworkLabel"
-        @get-existing-standard-switches="onGetExistingStandardSwitches"
-        @get-tcp-stacks="onGetTcpStacks"
-        @get-free-adapters="onGetFreeAdapters"
-        @send-add-networking-data="onSendNetworkData"
-        @add-networking-data-validate="onValidateBeforeSending"
-        @hide="onHideAddNetworkingModal"
-      />
-      <common-diagram-main-modals-migrate-vmkernel-adapter
-        v-if="isShowMigrateVmkernelAdapterModal"
-        :show="isShowMigrateVmkernelAdapterModal"
-        :switch-name="props.diagramData.id"
-        :networks-list="props.networksList"
-        :switch-networks="props.diagramData.networks"
-        :is-dark-mode="props.isDarkMode"
-        :is-migrate-adapter-loading="props.isMigrateAdapterLoading"
-        @check-network-label="onCheckNetworkLabel"
-        @hide="onHideMigrateVmkernelAdapterModal"
-      />
-    </template>
   </div>
 </template>
 
@@ -266,21 +135,8 @@ import {
   UI_I_Switch,
   UI_I_TCPStack,
 } from '~/components/common/wizards/network/add/lib/models/interfaces'
-import { UI_T_EditData } from '~/components/common/wizards/network/add/lib/models/type'
-import {
-  adapterViewSettingsFunc,
-  adapterViewSettingsModalTabsFunc,
-  networkEditSettingsTabsFunc,
-  networkViewSettingsFunc,
-  networkViewSettingsModalTabsFunc,
-  portEditSettingsTabsFunc,
-  portViewSettingsFunc,
-  portViewSettingsModalTabsFunc,
-  switchEditSettingsTabsFunc,
-  switchViewSettingsFunc,
-  switchViewSettingsModalTabsFunc,
-  vCenterViewSettingsFunc,
-} from '~/components/common/diagramMain/modals/lib/config'
+import { UI_T_EditData } from '~/components/common/wizards/network/add/lib/models/types'
+import { UI_T_Adapters } from '~/components/common/diagramMain/lib/models/types'
 import {
   managePhysicalAdapterStatusInitial,
   mainRectHeightsInitial,
@@ -361,25 +217,26 @@ const onValidateBeforeSending = (
   emits('add-networking-data-validate', data, type, setValidation)
 }
 
-let initialManagePhysicalAdapterStatus: UI_I_AdapterStatus =
+let initialManagePhysicalAdapterStatus = ref<UI_I_AdapterStatus>(
   managePhysicalAdapterStatusInitial
+)
 
 const managePhysicalAdapterStatus = ref<UI_I_AdapterStatus>(
-  useDeepCopy(initialManagePhysicalAdapterStatus)
+  useDeepCopy(initialManagePhysicalAdapterStatus.value)
 )
 
 watch(
   () => props.diagramData,
   (newValue: UI_I_DiagramData) => {
     if (newValue?.networking) {
-      initialManagePhysicalAdapterStatus = {
+      initialManagePhysicalAdapterStatus.value = {
         active: useDeepCopy(props.diagramData?.networking?.activeAdapters),
         standby: useDeepCopy(props.diagramData?.networking?.standbyAdapters),
         unused: useDeepCopy(props.diagramData?.networking?.unusedAdapters),
       }
 
       managePhysicalAdapterStatus.value = useDeepCopy(
-        initialManagePhysicalAdapterStatus
+        initialManagePhysicalAdapterStatus.value
       )
     }
   },
@@ -410,15 +267,6 @@ const onSendManagePhysicalAdaptersData = (
   )
 }
 
-const switchViewSettingsModalTabs = computed(() =>
-  switchViewSettingsModalTabsFunc(localization.value)
-)
-const switchViewSettings = computed(() =>
-  switchViewSettingsFunc(localization.value, initialData.value)
-)
-const switchEditSettingsTabs = computed(() =>
-  switchEditSettingsTabsFunc(localization.value)
-)
 const isShowSwitchViewSettingsModal = ref<boolean>(false)
 const isShowSwitchEditSettingsModal = ref<boolean>(false)
 const isShowSwitchRemoveModal = ref<boolean>(false)
@@ -431,25 +279,12 @@ const onHideSwitchEditSettingsModal = (): void => {
 const onHideSwitchRemoveModal = (): void => {
   isShowSwitchRemoveModal.value = false
 }
-const adapterViewSettingsModalTabs = computed(() =>
-  adapterViewSettingsModalTabsFunc(localization.value)
-)
-const adapterViewSettings = computed(() =>
-  adapterViewSettingsFunc(localization.value, initialData.value)
-)
+
 const isShowAdapterViewSettingsModal = ref<boolean>(false)
 const onHideAdapterViewSettingsModal = (): void => {
   isShowAdapterViewSettingsModal.value = false
 }
-const networkViewSettingsModalTabs = computed(() =>
-  networkViewSettingsModalTabsFunc(localization.value)
-)
-const networkViewSettings = computed(() =>
-  networkViewSettingsFunc(localization.value, initialData.value)
-)
-const networkEditSettingsTabs = computed(() =>
-  networkEditSettingsTabsFunc(localization.value)
-)
+
 const isShowNetworkViewSettingsModal = ref<boolean>(false)
 const isShowNetworkEditSettingsModal = ref<boolean>(false)
 const isShowNetworkRemoveModal = ref<boolean>(false)
@@ -462,15 +297,7 @@ const onHideNetworkEditSettingsModal = (): void => {
 const onHideNetworkRemoveModal = (): void => {
   isShowNetworkRemoveModal.value = false
 }
-const portViewSettingsModalTabs = computed(() =>
-  portViewSettingsModalTabsFunc(localization.value)
-)
-const portViewSettings = computed(() =>
-  portViewSettingsFunc(localization.value, initialData.value)
-)
-const portEditSettingsTabs = computed(() =>
-  portEditSettingsTabsFunc(localization.value)
-)
+
 const isShowPortViewSettingsModal = ref<boolean>(false)
 const isShowPortEditSettingsModal = ref<boolean>(false)
 const isShowPortRemoveModal = ref<boolean>(false)
@@ -483,9 +310,7 @@ const onHidePortEditSettingsModal = (): void => {
 const onHidePortRemoveModal = (): void => {
   isShowPortRemoveModal.value = false
 }
-const vCenterViewSettings = computed(() =>
-  vCenterViewSettingsFunc(localization.value, initialData.value)
-)
+
 const isShowVCenterViewSettingsModal = ref<boolean>(false)
 const onHideVCenterViewSettingsModal = (): void => {
   isShowVCenterViewSettingsModal.value = false
@@ -563,13 +388,24 @@ const onShowModal = (
       break
   }
 }
+
 const onRemove = (id: string, type: string) => {
+  if (type === 'network' && selectedNetwork.value === id) {
+    selectedNetwork.value = '-1'
+    resetSelection()
+  } else if (type === 'port' && selectedPort.value.portId === id) {
+    selectedPort.value.networkId = '-1'
+    selectedPort.value.portId = '-1'
+    resetSelection()
+  }
+
   const hideModal =
     type === 'network'
       ? onHideNetworkRemoveModal
       : type === 'switch'
       ? onHideSwitchRemoveModal
       : onHidePortRemoveModal
+
   emits('remove', id, type, hideModal)
 }
 const onChangeEditFieldsData = (newEditFieldsData: UI_I_EditFieldsData) => {
@@ -634,7 +470,9 @@ const mainRectHeight = computed<number>(() =>
   )
 )
 
-const countNetworksPositions = (): UI_I_NetworksWithPositions[] => {
+const countNetworksPositions = (
+  newNetworks?: UI_I_Network[] | null
+): UI_I_NetworksWithPositions[] => {
   let lastNetworkHeight = 0
   let lastPosition = UI_E_PositionsY.DIAGRAM_TOP + UI_E_PositionsY.BETWEEN_RECTS
   mainRectHeights.value.networksHeight =
@@ -646,8 +484,8 @@ const countNetworksPositions = (): UI_I_NetworksWithPositions[] => {
   )
 
   return (
-    props.diagramData?.networks?.map(
-      (network: UI_I_Network, index: number, networks: UI_I_Network[]) => {
+    (newNetworks ? newNetworks : props.diagramData?.networks)?.map(
+      (network: UI_I_Network, index: number) => {
         let portsCount = 0
         if (
           network.networkType ===
@@ -753,16 +591,6 @@ const isPortToggled = ref<UI_I_PortToggleFlag>({
   id: '',
 })
 
-watch(
-  () => props.diagramData?.networks,
-  () => {
-    networksWithPositions.value = countNetworksPositions()
-
-    isPortToggled.value.value && handlePortToggle()
-  },
-  { deep: true }
-)
-
 const countAdaptersPositions = (): UI_I_AdaptersWithPositions => {
   const { height, toggle, adaptersCount } = countAdaptersHeight(
     props.diagramData
@@ -787,9 +615,34 @@ const countAdaptersPositions = (): UI_I_AdaptersWithPositions => {
   }
 }
 
-const adaptersWithPositions = computed<UI_I_AdaptersWithPositions>(
-  countAdaptersPositions
+const adaptersWithPositions = computed<UI_I_AdaptersWithPositions>(() => {
+  return countAdaptersPositions()
+})
+
+watch(
+  () => props.diagramData?.networks,
+  (newValue: UI_I_Network[] | null) => {
+    networksWithPositions.value = countNetworksPositions(newValue)
+
+    isPortToggled.value.value && handlePortToggle()
+
+    if (selectedAdapter.value.adapterId !== '-1') {
+      onSelectAdapter(selectedAdapter.value.adapterId)
+      return
+    }
+    if (selectedPort.value.portId !== '-1') {
+      onSelectPort(selectedPort.value.networkId, selectedPort.value.portId)
+      return
+    }
+    if (selectedNetwork.value !== '-1') {
+      onSelectNetwork(selectedNetwork.value)
+      return
+    }
+    resetSelection()
+  },
+  { deep: true }
 )
+
 const onSelectPort = (networkId: string, portId: string): void => {
   const selectPortData = getSelectPortDataFunc(
     networkId,
@@ -828,8 +681,9 @@ const onSelectAdapter = (adapterId: string): void => {
 
   let pos: number[] = selectedNetworks?.reduce(networksPositions, [])
   let selectedAdapterPosition: number | null =
-    adaptersWithPositions.value.adapters?.find((ad) => ad.id === adapterId)
-      ?.adapterPosition || null
+    adaptersWithPositions.value.adapters?.find(
+      (adapter: UI_T_Adapters) => adapter.id === adapterId
+    )?.adapterPosition || null
 
   selectedAdapterPosition !== null &&
     (selectedAdapterPosition += 7.5) &&
@@ -996,4 +850,4 @@ const onClickDiagram = (ev: MouseEvent): void => {
     }
   }
 }
-</style>
+</style>

package/components/common/diagramMain/lib/models/interfaces.ts

@@ -7,7 +7,6 @@ import {
   UI_E_ICBLinkDetectionMode,
   UI_E_IBSTLoadBalancingMode,
 } from '~/components/common/diagramMain/lib/models/enums'
-import { NETWORK_POSITIONS } from '#build/components/common/diagramMain/lib/config/initial'
 
 export interface UI_I_Port {
   id: string

package/components/common/diagramMain/modals/Modals.vue

@@ -0,0 +1,442 @@
+<template>
+  <common-diagram-main-modals-view-settings-modal
+    v-if="props.isShowPortViewSettingsModal"
+    view-name="port-settings-modal"
+    height="448px"
+    :title="props.initialData.portName"
+    :second-title="props.hostName"
+    :show="props.isShowPortViewSettingsModal"
+    :modal-tabs="portViewSettingsModalTabs"
+    :view-settings-fields="portViewSettings"
+    @hide="emits('hide-port-view-settings-modal')"
+  />
+  <common-diagram-main-modals-view-settings-modal
+    v-if="props.isShowNetworkViewSettingsModal"
+    view-name="network-settings-modal"
+    height="448px"
+    :title="props.initialData.networkLabel"
+    :show="props.isShowNetworkViewSettingsModal"
+    :modal-tabs="networkViewSettingsModalTabs"
+    :view-settings-fields="networkViewSettings"
+    :initial-data="props.initialData"
+    @hide="emits('hide-network-view-settings-modal')"
+  />
+  <common-diagram-main-modals-view-settings-modal
+    v-if="props.isShowAdapterViewSettingsModal"
+    :view-name="localization.physicalNetworkAdapter"
+    :title="props.initialData.name || localization.physicalNetworkAdapter"
+    :second-title="props.hostName"
+    height="448px"
+    :show="props.isShowAdapterViewSettingsModal"
+    :modal-tabs="adapterViewSettingsModalTabs"
+    :view-settings-fields="adapterViewSettings"
+    @hide="emits('hide-adapter-view-settings-modal')"
+  />
+  <common-diagram-main-modals-view-settings-modal
+    v-if="props.isShowVcenterViewSettingsModal"
+    view-name="VCenter-settings-modal"
+    height="185px"
+    info-height="80px"
+    :without-footer-padding="true"
+    :title="props.initialData.vmTitle"
+    :show="props.isShowVcenterViewSettingsModal"
+    :view-settings-fields="vCenterViewSettings"
+    @hide="emits('hide-vcenter-view-settings-modal')"
+  />
+  <common-diagram-main-modals-remove-modal
+    v-if="props.isShowNetworkRemoveModal"
+    :id="props.initialData.id"
+    :label="props.initialData.networkLabel"
+    modal-name="network-port-remove-modal"
+    view-name="port-network-remove"
+    width="872px"
+    height="558px"
+    :title="localization.removePortGroup"
+    :show="props.isShowNetworkRemoveModal"
+    :is-show-loader="props.isRemoveModalLoading"
+    type="network"
+    @remove="onRemove"
+    @hide="emits('hide-network-remove-modal')"
+  />
+  <common-diagram-main-modals-remove-modal
+    v-if="props.isShowSwitchRemoveModal"
+    :id="props.diagramData.id"
+    modal-name="switch-remove-modal"
+    view-name="switch-remove"
+    width="872px"
+    height="558px"
+    title="Remove Standard Switch"
+    :show="props.isShowSwitchRemoveModal"
+    :is-show-loader="props.isRemoveModalLoading"
+    type="switch"
+    @remove="onRemove"
+    @hide="emits('hide-switch-remove-modal')"
+  />
+  <common-diagram-main-modals-remove-modal
+    v-if="props.isShowPortRemoveModal"
+    :id="props.initialData.portName"
+    modal-name="port-remove-modal"
+    view-name="port-remove"
+    width="872px"
+    height="558px"
+    :title="localization.removeVMkernelAdapter"
+    :show="props.isShowPortRemoveModal"
+    :is-show-loader="props.isRemoveModalLoading"
+    type="port"
+    @remove="onRemove"
+    @hide="emits('hide-port-remove-modal')"
+  />
+  <common-diagram-main-modals-edit-settings-modal
+    v-if="props.isShowNetworkEditSettingsModal"
+    view-name="network-edit"
+    width="1087px"
+    height="662px"
+    :show="props.isShowNetworkEditSettingsModal"
+    :title="props.initialData.networkLabel"
+    :initial-data="props.initialData"
+    :items="networkEditSettingsTabs"
+    :adapters="props.adapters"
+    :is-dark-mode="props.isDarkMode"
+    :is-edit-modal-loading="props.isEditModalLoading"
+    @send-edit-data="onSendEditData"
+    @change-edit-fields-data="onChangeEditFieldsData"
+    @check-network-label="onCheckNetworkLabel"
+    @hide="emits('hide-network-edit-settings-modal')"
+  />
+  <common-diagram-main-modals-edit-settings-modal
+    v-if="props.isShowPortEditSettingsModal"
+    view-name="port-edit"
+    width="872px"
+    height="558px"
+    :show="props.isShowPortEditSettingsModal"
+    :title="props.initialData.portName"
+    :initial-data="props.initialData"
+    :items="portEditSettingsTabs"
+    :is-dark-mode="props.isDarkMode"
+    :is-edit-modal-loading="props.isEditModalLoading"
+    @send-edit-data="onSendEditData"
+    @change-edit-fields-data="onChangeEditFieldsData"
+    @hide="emits('hide-port-edit-settings-modal')"
+  />
+  <template v-if="!props.inPortlet">
+    <common-diagram-main-modals-edit-settings-modal
+      v-if="props.isShowSwitchEditSettingsModal"
+      view-name="switch-edit"
+      width="1087px"
+      height="662px"
+      :show="props.isShowSwitchEditSettingsModal"
+      :title="props.diagramData.id"
+      :initial-data="props.initialData"
+      :items="switchEditSettingsTabs"
+      :adapters="props.adapters"
+      :is-dark-mode="props.isDarkMode"
+      :is-edit-modal-loading="props.isEditModalLoading"
+      @send-edit-data="onSendEditData"
+      @change-edit-fields-data="onChangeEditFieldsData"
+      @hide="emits('hide-switch-edit-settings-modal')"
+    />
+    <common-diagram-main-modals-view-settings-modal
+      v-if="props.isShowSwitchViewSettingsModal"
+      view-name="switch-view-settings"
+      width="576px"
+      height="449px"
+      info-height="390px"
+      :with-collapse="true"
+      :title="props.diagramData.diagramName"
+      :show="props.isShowSwitchViewSettingsModal"
+      :modal-tabs="switchViewSettingsModalTabs"
+      :view-settings-fields="switchViewSettings"
+      @hide="emits('hide-switch-view-settings-modal')"
+    />
+    <common-diagram-main-modals-manage-physical-adapters-modal
+      v-if="props.isShowSwitchManagePhysicalAdaptersModal"
+      view-name="switch-manage-physical-adapters"
+      width="864px"
+      height="510px"
+      :show="props.isShowSwitchManagePhysicalAdaptersModal"
+      :switch-name="props.diagramData.id"
+      :free-adapters="props.freeAdapters"
+      :adapter-status="props.managePhysicalAdapterStatus"
+      :adapters="props.adapters"
+      :is-dark-mode="props.isDarkMode"
+      :initial-adapter-status="props.initialManagePhysicalAdapterStatus"
+      :is-manage-adapters-modal-loading="props.isManageAdaptersModalLoading"
+      @send-manage-physical-adapters-data="onSendManagePhysicalAdaptersData"
+      @change-adapter-status="onChangeManagePhysicalAdapterStatus"
+      @get-free-adapters="onGetFreeAdapters"
+      @hide="emits('hide-switch-manage-physical-adapters-modal')"
+    />
+    <common-wizards-network-add
+      v-if="props.isShowAddNetworkingModal"
+      :show="props.isShowAddNetworkingModal"
+      :adapters="props.adapters"
+      :standard-switches-initial="props.standardSwitchesInitial"
+      :free-adapters="props.freeAdapters"
+      :is-dark-mode="props.isDarkMode"
+      :selected-standard-switch-id="props.selectedStandardSwitchId"
+      :selected-switch-id="props.selectedSwitchId"
+      :tcp-stacks="props.tcpStacks"
+      :diagrams-data="props.diagramsData"
+      :is-networking-loading="props.isNetworkingLoading"
+      @check-network-label="onCheckNetworkLabel"
+      @get-existing-standard-switches="onGetExistingStandardSwitches"
+      @get-tcp-stacks="onGetTcpStacks"
+      @get-free-adapters="onGetFreeAdapters"
+      @send-add-networking-data="onSendNetworkData"
+      @add-networking-data-validate="onValidateBeforeSending"
+      @hide="emits('hide-add-networking-modal')"
+    />
+    <common-diagram-main-modals-migrate-vmkernel-adapter
+      v-if="props.isShowMigrateVmkernelAdapterModal"
+      :show="props.isShowMigrateVmkernelAdapterModal"
+      :switch-name="props.diagramData.id"
+      :networks-list="props.networksList"
+      :switch-networks="props.diagramData.networks"
+      :is-dark-mode="props.isDarkMode"
+      :is-migrate-adapter-loading="props.isMigrateAdapterLoading"
+      @check-network-label="onCheckNetworkLabel"
+      @hide="emits('hide-migrate-vmkernel-adapter-modal')"
+    />
+  </template>
+</template>
+
+<script setup lang="ts">
+import {
+  UI_I_ItemsWithTotalCounts,
+  UI_I_ArbitraryObject,
+  UI_I_Localization,
+} from '~/lib/models/interfaces'
+import {
+  UI_I_ModalsInitialData,
+  UI_I_DiagramData,
+  UI_I_SwitchAdapterItem,
+  UI_I_Adapter,
+  UI_I_AdapterStatus,
+  UI_I_Network,
+  UI_I_EditFieldsData,
+} from '~/components/common/diagramMain/lib/models/interfaces'
+import {
+  UI_I_Switch,
+  UI_I_TCPStack,
+} from '~/components/common/wizards/network/add/lib/models/interfaces'
+import { UI_T_EditData } from '~/components/common/wizards/network/add/lib/models/types'
+import {
+  portViewSettingsModalTabsFunc,
+  portViewSettingsFunc,
+  networkViewSettingsModalTabsFunc,
+  networkViewSettingsFunc,
+  adapterViewSettingsModalTabsFunc,
+  adapterViewSettingsFunc,
+  vCenterViewSettingsFunc,
+  networkEditSettingsTabsFunc,
+  portEditSettingsTabsFunc,
+  switchViewSettingsModalTabsFunc,
+  switchViewSettingsFunc,
+  switchEditSettingsTabsFunc,
+} from '~/components/common/diagramMain/modals/lib/config'
+
+const props = defineProps<{
+  isShowPortViewSettingsModal: boolean
+  isShowNetworkViewSettingsModal: boolean
+  isShowAdapterViewSettingsModal: boolean
+  isShowVcenterViewSettingsModal: boolean
+  isShowNetworkRemoveModal: boolean
+  isShowSwitchRemoveModal: boolean
+  isShowPortRemoveModal: boolean
+  isShowNetworkEditSettingsModal: boolean
+  isShowPortEditSettingsModal: boolean
+  isShowSwitchEditSettingsModal: boolean
+  isShowSwitchViewSettingsModal: boolean
+  isShowSwitchManagePhysicalAdaptersModal: boolean
+  isShowAddNetworkingModal: boolean
+  isShowMigrateVmkernelAdapterModal: boolean
+  initialData: UI_I_ModalsInitialData
+  isRemoveModalLoading: boolean
+  diagramData: UI_I_DiagramData
+  adapters: UI_I_ItemsWithTotalCounts<UI_I_SwitchAdapterItem>
+  hostName: string
+  isDarkMode: boolean
+  isEditModalLoading: boolean
+  freeAdapters: UI_I_Adapter[]
+  managePhysicalAdapterStatus: UI_I_AdapterStatus
+  initialManagePhysicalAdapterStatus: UI_I_AdapterStatus
+  isManageAdaptersModalLoading: boolean
+  standardSwitchesInitial: UI_I_Switch[]
+  selectedStandardSwitchId: string
+  selectedSwitchId: string
+  tcpStacks: UI_I_TCPStack[]
+  isNetworkingLoading: boolean
+  networksList: UI_I_Network[]
+  isMigrateAdapterLoading: boolean
+  diagramsData: UI_I_DiagramData[]
+}>()
+
+const emits = defineEmits<{
+  (event: 'hide-port-view-settings-modal'): void
+  (event: 'hide-network-view-settings-modal'): void
+  (event: 'hide-adapter-view-settings-modal'): void
+  (event: 'hide-vcenter-view-settings-modal'): void
+  (event: 'hide-switch-view-settings-modal'): void
+  (event: 'hide-network-edit-settings-modal'): void
+  (event: 'hide-port-edit-settings-modal'): void
+  (event: 'hide-switch-edit-settings-modal'): void
+  (event: 'hide-network-remove-modal'): void
+  (event: 'hide-switch-remove-modal'): void
+  (event: 'hide-port-remove-modal'): void
+  (event: 'hide-switch-manage-physical-adapters-modal'): void
+  (event: 'hide-add-networking-modal'): void
+  (event: 'hide-migrate-vmkernel-adapter-modal'): void
+  (event: 'remove', id: string, type: string): void
+  (event: 'change-edit-fields-data', editFieldsData: UI_I_EditFieldsData): void
+  (
+    event: 'send-edit-data',
+    type: string,
+    hideModal: () => void,
+    id?: string
+  ): void
+  (
+    event: 'check-network-label',
+    label: string,
+    sendMessage: (message: string) => void
+  ): void
+  (
+    event: 'send-manage-physical-adapters-data',
+    adapterStatus: UI_I_AdapterStatus,
+    switchName: string,
+    hideModal: () => void
+  ): void
+  (event: 'change-adapter-status', adapterStatusNew: UI_I_AdapterStatus): void
+  (event: 'get-free-adapters', showModal: () => void): void
+  (event: 'get-existing-standard-switches'): void
+  (event: 'get-tcp-stacks'): void
+  (
+    event: 'send-add-networking-data',
+    data: UI_T_EditData,
+    type: string,
+    hideModal: () => void
+  ): void
+  (
+    event: 'add-networking-data-validate',
+    data: UI_T_EditData,
+    type: string,
+    setValidation: (message: UI_I_ArbitraryObject<string>) => void
+  ): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const portViewSettingsModalTabs = computed(() =>
+  portViewSettingsModalTabsFunc(localization.value)
+)
+
+const portViewSettings = computed(() =>
+  portViewSettingsFunc(localization.value, props.initialData)
+)
+
+const networkViewSettingsModalTabs = computed(() =>
+  networkViewSettingsModalTabsFunc(localization.value)
+)
+
+const networkViewSettings = computed(() =>
+  networkViewSettingsFunc(localization.value, props.initialData)
+)
+
+const adapterViewSettingsModalTabs = computed(() =>
+  adapterViewSettingsModalTabsFunc(localization.value)
+)
+
+const adapterViewSettings = computed(() =>
+  adapterViewSettingsFunc(localization.value, props.initialData)
+)
+
+const vCenterViewSettings = computed(() =>
+  vCenterViewSettingsFunc(localization.value, props.initialData)
+)
+
+const networkEditSettingsTabs = computed(() =>
+  networkEditSettingsTabsFunc(localization.value)
+)
+
+const portEditSettingsTabs = computed(() =>
+  portEditSettingsTabsFunc(localization.value)
+)
+
+const switchViewSettingsModalTabs = computed(() =>
+  switchViewSettingsModalTabsFunc(localization.value)
+)
+const switchViewSettings = computed(() =>
+  switchViewSettingsFunc(localization.value, props.initialData)
+)
+
+const switchEditSettingsTabs = computed(() =>
+  switchEditSettingsTabsFunc(localization.value)
+)
+
+const onRemove = (id: string, type: string) => {
+  emits('remove', id, type)
+}
+
+const onCheckNetworkLabel = (
+  label: string,
+  sendMessage: (message: string) => void
+) => {
+  emits('check-network-label', label, sendMessage)
+}
+
+const onChangeEditFieldsData = (newEditFieldsData: UI_I_EditFieldsData) => {
+  emits('change-edit-fields-data', newEditFieldsData)
+}
+
+const onSendEditData = (type: string, hideModal: () => void, id?: string) => {
+  emits('send-edit-data', type, hideModal, id)
+}
+
+const onSendManagePhysicalAdaptersData = (
+  adapterStatus: UI_I_AdapterStatus,
+  switchName: string,
+  hideModal: () => void
+) => {
+  emits(
+    'send-manage-physical-adapters-data',
+    adapterStatus,
+    switchName,
+    hideModal
+  )
+}
+
+const onChangeManagePhysicalAdapterStatus = (
+  adapterStatusNew: UI_I_AdapterStatus
+) => {
+  emits('change-adapter-status', adapterStatusNew)
+}
+
+const onGetFreeAdapters = (showModal: () => void) => {
+  emits('get-free-adapters', showModal)
+}
+
+const onGetExistingStandardSwitches = () => {
+  emits('get-existing-standard-switches')
+}
+
+const onGetTcpStacks = () => {
+  emits('get-tcp-stacks')
+}
+
+const onSendNetworkData = (
+  data: UI_T_EditData,
+  type: string,
+  hideModal: () => void
+) => {
+  emits('send-add-networking-data', data, type, hideModal)
+}
+
+const onValidateBeforeSending = (
+  data: UI_T_EditData,
+  type: string,
+  setValidation: (messages: UI_I_ArbitraryObject<string>) => void
+) => {
+  emits('add-networking-data-validate', data, type, setValidation)
+}
+</script>
+
+<style scoped lang="scss"></style>

package/components/common/diagramMain/modals/editSettings/EditSettings.vue

@@ -338,11 +338,6 @@ const isNotChangedAdapterStatusFunc = (): boolean => {
   const adapterStatusLastSavedString = JSON.stringify(
     lastSavedAdapterStatus.value
   )
-  console.log(
-    adapterStatusLastSavedString,
-    adapterStatusString,
-    adapterStatusInitialString
-  )
 
   return (
     adapterStatusString === adapterStatusInitialString ||
@@ -358,11 +353,7 @@ watch(
       return
     }
     const isNotChangedAdapterStatus = isNotChangedAdapterStatusFunc()
-    console.log(
-      !isFailoverOrderOverride.value,
-      isNotChangedAdapterStatus,
-      isApprovedAdapterStatus.value
-    )
+
     if (
       !isFailoverOrderOverride.value ||
       (isNotChangedAdapterStatus && isApprovedAdapterStatus.value) ||
@@ -381,7 +372,6 @@ const selectedTabInAlertModal = ref<string>('')
 const lastSavedAdapterStatus = ref<UI_I_AdapterStatus>()
 
 const stopTabChanging = (newSelectedTab: string) => {
-  console.log('adapterStatus', adapterStatus.value)
   adapterStatus.value.active.length === 0 && (selectedTab.value = '4')
   selectedTabInAlertModal.value = newSelectedTab
   lastSavedAdapterStatus.value = useDeepCopy(adapterStatus.value)

package/components/common/wizards/datastore/add/Add.vue

@@ -135,7 +135,7 @@ const datastoreForm = ref<UI_I_CreateDatastoreForm>({
     readonly: false,
     version: nfsVersion.value,
     type_code: 4,
-    hosts: []
+    hosts: [],
   },
 })
 
@@ -284,14 +284,17 @@ const saveChangesAndNextNfs = (event: any, next = true): void => {
   nfs.hosts = event.hosts
 
   // TODO refactoring
-  const hostsName = props.nfsHosts?.filter(host => event.hosts.includes(host.id)).map(host => host.name)
+  const hostsNames =
+    props.nfsHosts
+      ?.filter((host) => event.hosts.includes(host.id))
+      ?.map((host) => host.name) || []
 
   dataReadyView.value = constructDataReadyViewFunc(
     localization.value,
     'nfs',
     {
       ...event,
-      hosts: hostsName,
+      hosts: hostsNames,
       version: nfsVersion.value,
     },
     isWizardModeForSphere.value

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "bfg-common",
   "private": false,
-  "version": "1.3.342",
+  "version": "1.3.344",
   "scripts": {
     "build": "nuxt build",
     "dev": "nuxt dev --port=3002",