bfg-common 1.3.338 → 1.3.340

package/components/common/diagramMain/DiagramMain.vue

@@ -1,999 +1,853 @@
-<template>
-  <div
-    v-if="props.diagramData"
-    :class="{ 'diagram-min-width': !props.inPortlet }"
-  >
-    <div class="diagram-main-container">
-      <common-diagram-main-header
-        :in-portlet="props.inPortlet"
-        :is-show-diagram="isShowDiagram"
-        :diagram-name="props.diagramData.diagramName"
-        :test-id="props.diagramData.testId"
-        @toggle-diagram="onToggleDiagram"
-        @show-modal="onShowModal"
-      />
-      <common-diagram-main-diagram
-        :diagram-data="props.diagramData"
-        :is-show-diagram="isShowDiagram"
-        :in-portlet="props.inPortlet"
-        :networks-with-positions="networksWithPositions"
-        :main-rect-height="mainRectHeight"
-        :main-switch-line="mainSwitchLine"
-        :selected-main-line="selectedMainLine"
-        :adapters-with-positions="adaptersWithPositions"
-        :selected-port="selectedPort"
-        :selected-adapter="selectedAdapter"
-        :selected-network="selectedNetwork"
-        :selected-switch-line-y="selectedSwitchLineY"
-        :is-dark-mode="props.isDarkMode"
-        @click-diagram="onClickDiagram"
-        @toggle-adapters="onToggleAdapters"
-        @select-adapter="onSelectAdapter"
-        @toggle-ports="onTogglePorts"
-        @select-port="onSelectPort"
-        @select-network="onSelectNetwork"
-        @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"
-      :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"
-      :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="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"
-    />
-    <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>
-
-<script setup lang="ts">
-import { UI_E_NetworkType, UI_E_PositionsY } from './lib/models/enums'
-import {
-  UI_I_Adapter,
-  UI_I_AdapterStatus,
-  UI_I_AdaptersWithPositions,
-  UI_I_MainRectHeights,
-  UI_I_ModalsInitialData,
-  UI_I_Network,
-  UI_I_EditFieldsData,
-  UI_I_NetworksWithPositions,
-  UI_I_SelectedAdapter,
-  UI_I_SelectedPort,
-  UI_I_SwitchLine,
-  UI_I_ToggleDiagramAdaptersPayload,
-  UI_I_ToggleDiagramPortsPayload,
-  UI_I_PortToggleFlag,
-  UI_I_DiagramData,
-  UI_I_SwitchAdapterItem,
-} from '~/components/common/diagramMain/lib/models/interfaces'
-import {
-  UI_I_ArbitraryObject,
-  UI_I_Localization,
-  UI_I_ItemsWithTotalCounts,
-} from '~/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/type'
-import {
-  adapterViewSettingsFunc,
-  adapterViewSettingsModalTabsFunc,
-  networkEditSettingsTabsFunc,
-  networkViewSettingsFunc,
-  networkViewSettingsModalTabsFunc,
-  portEditSettingsTabsFunc,
-  portViewSettingsFunc,
-  portViewSettingsModalTabsFunc,
-  switchEditSettingsTabsFunc,
-  switchViewSettingsFunc,
-  switchViewSettingsModalTabsFunc,
-  vCenterViewSettingsFunc,
-} from '~/components/common/diagramMain/modals/lib/config'
-import {
-  managePhysicalAdapterStatusInitial,
-  mainRectHeightsInitial,
-  switchLineInitial,
-  selectedPortInitial,
-  selectedSwitchLineYInitial,
-  selectedAdapterInitial,
-} from '~/components/common/diagramMain/lib/config'
-import {
-  hasPortAndNetwork,
-  networksPositions,
-  getSelectNetworkDataFunc,
-  getSelectPortDataFunc,
-  countAdaptersHeight,
-  getAdaptersPositions,
-} from '~/components/common/diagramMain/lib/utils/utils'
-
-const props = withDefaults(
-  defineProps<{
-    diagramData: UI_I_DiagramData
-    inPortlet?: boolean
-    standardSwitchesInitial?: UI_I_Switch[]
-    hostName?: string
-    adapters?: UI_I_ItemsWithTotalCounts<UI_I_SwitchAdapterItem>
-    freeAdapters?: UI_I_Adapter[]
-    networksList?: UI_I_Network[]
-    isDarkMode: boolean
-    tcpStacks?: UI_I_TCPStack[]
-    diagramsData?: UI_I_DiagramData[]
-    isManageAdaptersModalLoading?: boolean
-    isNetworkingLoading?: boolean
-    isRemoveModalLoading?: boolean
-    isEditModalLoading?: boolean
-    isMigrateAdapterLoading?: boolean
-  }>(),
-  {
-    diagramData: null,
-    inPortlet: false,
-    standardSwitchesInitial: () => [],
-    hostName: '',
-    adapters: () => ({
-      total_items: 0,
-      total_pages: 0,
-      items: [],
-    }),
-    freeAdapters: () => [],
-    networksList: () => [],
-    tcpStacks: () => [],
-    diagramsData: [],
-    isManageAdaptersModalLoading: false,
-    isNetworkingLoading: false,
-    isRemoveModalLoading: false,
-    isEditModalLoading: false,
-    isMigrateAdapterLoading: false,
-  }
-)
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-const initialData = ref<UI_I_ModalsInitialData>({})
-const switchInitialData = ref<UI_I_ModalsInitialData>({})
-
-watch(
-  () => props.diagramData?.networking,
-  (initial: UI_I_ModalsInitialData | undefined) => {
-    if (initial) {
-      initialData.value = initial
-      switchInitialData.value = initial
-    }
-  },
-  { deep: true, immediate: true }
-)
-
-const onValidateBeforeSending = (
-  data: UI_T_EditData,
-  type: string,
-  setValidation: (messages: UI_I_ArbitraryObject<string>) => void
-) => {
-  emits('add-networking-data-validate', data, type, setValidation)
-}
-
-let initialManagePhysicalAdapterStatus: UI_I_AdapterStatus =
-  managePhysicalAdapterStatusInitial
-
-const managePhysicalAdapterStatus = ref<UI_I_AdapterStatus>(
-  useDeepCopy(initialManagePhysicalAdapterStatus)
-)
-
-watch(
-  () => props.diagramData,
-  (newValue: UI_I_DiagramData) => {
-    if (newValue?.networking) {
-      initialManagePhysicalAdapterStatus = {
-        active: useDeepCopy(props.diagramData?.networking?.activeAdapters),
-        standby: useDeepCopy(props.diagramData?.networking?.standbyAdapters),
-        unused: useDeepCopy(props.diagramData?.networking?.unusedAdapters),
-      }
-
-      managePhysicalAdapterStatus.value = useDeepCopy(
-        initialManagePhysicalAdapterStatus
-      )
-    }
-  },
-  { deep: true, immediate: true }
-)
-
-const onChangeManagePhysicalAdapterStatus = (
-  adapterStatusNew: UI_I_AdapterStatus
-) => {
-  managePhysicalAdapterStatus.value = adapterStatusNew
-}
-
-const isShowSwitchManagePhysicalAdaptersModal = ref<boolean>(false)
-const onHideSwitchManagePhysicalAdaptersModal = (): void => {
-  isShowSwitchManagePhysicalAdaptersModal.value = false
-}
-
-const onSendManagePhysicalAdaptersData = (
-  adapterStatus: UI_I_AdapterStatus,
-  switchName: string,
-  hideModal: () => void
-) => {
-  emits(
-    'send-manage-physical-adapters-data',
-    adapterStatus,
-    switchName,
-    hideModal
-  )
-}
-
-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)
-const onHideSwitchViewSettingsModal = (): void => {
-  isShowSwitchViewSettingsModal.value = false
-}
-const onHideSwitchEditSettingsModal = (): void => {
-  isShowSwitchEditSettingsModal.value = false
-}
-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)
-const onHideNetworkViewSettingsModal = (): void => {
-  isShowNetworkViewSettingsModal.value = false
-}
-const onHideNetworkEditSettingsModal = (): void => {
-  isShowNetworkEditSettingsModal.value = false
-}
-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)
-const onHidePortViewSettingsModal = (): void => {
-  isShowPortViewSettingsModal.value = false
-}
-const onHidePortEditSettingsModal = (): void => {
-  isShowPortEditSettingsModal.value = false
-}
-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
-}
-const isShowAddNetworkingModal = ref<boolean>(false)
-const onHideAddNetworkingModal = (): void => {
-  isShowAddNetworkingModal.value = false
-}
-const isShowMigrateVmkernelAdapterModal = ref<boolean>(false)
-const onHideMigrateVmkernelAdapterModal = (): void => {
-  isShowMigrateVmkernelAdapterModal.value = false
-}
-
-const selectedStandardSwitchId = ref<string>('')
-const selectedSwitchId = ref<string>('')
-
-const onShowModal = (
-  value: string,
-  properties: UI_I_ModalsInitialData
-): void => {
-  switch (value) {
-    case 'port-view-settings':
-      initialData.value = properties
-      isShowPortViewSettingsModal.value = true
-      break
-    case 'network-view-settings':
-      isShowNetworkViewSettingsModal.value = true
-      initialData.value = properties
-      break
-    case 'adapter-view-settings':
-      isShowAdapterViewSettingsModal.value = true
-      initialData.value = properties
-      break
-    case 'v-center-view-settings':
-      isShowVCenterViewSettingsModal.value = true
-      initialData.value = properties
-      break
-    case 'network-edit-settings':
-      isShowNetworkEditSettingsModal.value = true
-      initialData.value = properties
-      break
-    case 'port-edit-settings':
-      initialData.value = properties
-      isShowPortEditSettingsModal.value = true
-      break
-    case 'network-port-remove':
-      initialData.value = properties
-      isShowNetworkRemoveModal.value = true
-      break
-    case 'port-remove':
-      initialData.value = properties
-      isShowPortRemoveModal.value = true
-      break
-    case 'switch-edit':
-      isShowSwitchEditSettingsModal.value = true
-      initialData.value = useDeepCopy(switchInitialData.value)
-      break
-    case 'switch-manage-physical-adapters':
-      isShowSwitchManagePhysicalAdaptersModal.value = true
-      break
-    case 'add-networking':
-      isShowAddNetworkingModal.value = true
-      selectedStandardSwitchId.value = properties.switch_name
-      selectedSwitchId.value = properties.switch_name
-      break
-    case 'switch-view-settings':
-      isShowSwitchViewSettingsModal.value = true
-      initialData.value = useDeepCopy(switchInitialData.value)
-      break
-    case 'migrate-vmkernel-adapter':
-      isShowMigrateVmkernelAdapterModal.value = true
-      break
-    case 'switch-remove':
-      isShowSwitchRemoveModal.value = true
-      break
-  }
-}
-const onRemove = (id: string, type: string) => {
-  const hideModal =
-    type === 'network'
-      ? onHideNetworkRemoveModal
-      : type === 'switch'
-      ? onHideSwitchRemoveModal
-      : onHidePortRemoveModal
-  emits('remove', id, type, hideModal)
-}
-const onChangeEditFieldsData = (newEditFieldsData: UI_I_EditFieldsData) => {
-  emits('change-edit-fields-data', newEditFieldsData)
-}
-const onCheckNetworkLabel = (
-  label: string,
-  sendMessage: (message: string) => void
-) => {
-  emits('check-network-label', label, sendMessage)
-}
-const onGetExistingStandardSwitches = () => {
-  emits('get-existing-standard-switches')
-}
-const onGetTcpStacks = () => {
-  emits('get-tcp-stacks')
-}
-const onGetFreeAdapters = (showModal: () => void) => {
-  emits('get-free-adapters', showModal)
-}
-const onSendNetworkData = (
-  data: UI_T_EditData,
-  type: string,
-  hideModal: () => void
-) => {
-  emits('send-add-networking-data', data, type, hideModal)
-}
-const onSendEditData = (type: string, hideModal: () => void, id?: string) => {
-  emits('send-edit-data', type, initialData.value, hideModal, id)
-}
-const isShowDiagram = ref<boolean>(true)
-const onToggleDiagram = () => {
-  isShowDiagram.value = !isShowDiagram.value
-}
-const mainRectHeights = ref<UI_I_MainRectHeights>(
-  useDeepCopy(mainRectHeightsInitial)
-)
-
-const switchLine = ref<UI_I_SwitchLine>(useDeepCopy(switchLineInitial))
-const mainSwitchLine = computed<UI_I_SwitchLine>(
-  () =>
-    (switchLine.value.ay && {
-      y1: Math.min(switchLine.value.y1, switchLine.value.ay),
-      y2: Math.max(switchLine.value.y2, switchLine.value.ay),
-    }) || { y1: 0, y2: 0 }
-)
-
-const selectedMainLine = ref(false)
-const selectedPort = ref<UI_I_SelectedPort>(useDeepCopy(selectedPortInitial))
-const selectedAdapter = ref<UI_I_SelectedAdapter>(
-  useDeepCopy(selectedAdapterInitial)
-)
-const selectedNetwork = ref<string>('-1')
-
-const selectedSwitchLineY = ref<UI_I_SwitchLine>(
-  useDeepCopy(selectedSwitchLineYInitial)
-)
-const mainRectHeight = computed<number>(() =>
-  Math.max(
-    mainRectHeights.value.networksHeight,
-    mainRectHeights.value.adaptersHeight
-  )
-)
-
-const countNetworksPositions = (): UI_I_NetworksWithPositions[] => {
-  let lastNetworkHeight = 0
-  let lastPosition = UI_E_PositionsY.DIAGRAM_TOP + UI_E_PositionsY.BETWEEN_RECTS
-  mainRectHeights.value.networksHeight =
-    UI_E_PositionsY.DIAGRAM_TOP + UI_E_PositionsY.BETWEEN_RECTS
-
-  const lastIndex = props.diagramData?.networks.findLastIndex(
-    (network: UI_I_Network) =>
-      network.activeAdapters.length > 0 && network.state.state !== 3
-  )
-
-  return (
-    props.diagramData?.networks?.map(
-      (network: UI_I_Network, index: number, networks: UI_I_Network[]) => {
-        let portsCount = 0
-        if (
-          network.networkType ===
-          (UI_E_NetworkType.VMPortsGroup || UI_E_NetworkType.VCenter)
-        ) {
-          portsCount = network.ports.length
-        } else {
-          portsCount = network.sysx ? 1 : 0
-        }
-        const portsHeight = network.toggle
-          ? network.networkType === UI_E_NetworkType.VCenter
-            ? portsCount * UI_E_PositionsY.SINGLE_V_CENTER_HEIGHT
-            : portsCount * UI_E_PositionsY.SINGLE_PORT_HEIGHT
-          : 0
-        const networkHeight =
-          UI_E_PositionsY.PORTS_FROM_RECT_TOP +
-          portsHeight +
-          (network.networkType === UI_E_NetworkType.VCenter
-            ? UI_E_PositionsY.SINGLE_V_CENTER_HEIGHT - 10
-            : UI_E_PositionsY.SINGLE_PORT_HEIGHT) +
-          UI_E_PositionsY.SPACE_FROM_RECT_BOTTOM
-
-        lastPosition +=
-          lastNetworkHeight + (index && UI_E_PositionsY.BETWEEN_RECTS)
-        lastNetworkHeight = networkHeight
-
-        const connectLineY = lastPosition + networkHeight / 2
-        const titlePosition = lastPosition + UI_E_PositionsY.TITLE_FROM_RECT_TOP
-        const vlanPosition = lastPosition + UI_E_PositionsY.VLAN_FROM_RECT_TOP
-        const portsPosition = lastPosition + UI_E_PositionsY.PORTS_FROM_RECT_TOP
-
-        const networkPortsName =
-          (network.networkType === UI_E_NetworkType.VMkernel &&
-            'VMkernel Ports') ||
-          (network.networkType === UI_E_NetworkType.VMPortsGroup &&
-            'Virtual Machines') ||
-          (network.networkType === UI_E_NetworkType.VCenter &&
-            'Virtual Machines') ||
-          ''
-
-        lastIndex !== -1 && index === 0 && (switchLine.value.y1 = connectLineY)
-        lastIndex !== -1 &&
-          index === lastIndex &&
-          (switchLine.value.y2 = connectLineY)
-
-        mainRectHeights.value.networksHeight +=
-          networkHeight + UI_E_PositionsY.BETWEEN_RECTS
-
-        const networkWithPortsPositions =
-          network.networkType ===
-          (UI_E_NetworkType.VMPortsGroup || UI_E_NetworkType.VCenter)
-            ? network.ports.map((port, index) => {
-                const portPosition =
-                  portsPosition +
-                  (network.networkType === UI_E_NetworkType.VCenter
-                    ? (index + 1) * UI_E_PositionsY.SINGLE_V_CENTER_HEIGHT - 10
-                    : (index + 1) * UI_E_PositionsY.SINGLE_PORT_HEIGHT)
-
-                return {
-                  ...port,
-                  portPosition,
-                }
-              })
-            : (network.sysx && [
-                {
-                  id: network.sysx?.id,
-                  name: `${network.sysx?.id} ${
-                    network.sysx.ipv4_settings.ipv4
-                      ? `: ${network.sysx.ipv4_settings.ipv4}`
-                      : ''
-                  }`,
-                  state: network.sysx.state,
-                  portPosition:
-                    portsPosition + UI_E_PositionsY.SINGLE_PORT_HEIGHT,
-                },
-              ]) ||
-              []
-
-        return {
-          ...network,
-          ports: networkWithPortsPositions,
-          portsCount,
-          portsHeight,
-          networkHeight,
-          rectPosition: lastPosition,
-          connectLineY,
-          titlePosition,
-          vlanPosition,
-          vlanId: network.vlanId || '--',
-          portsPosition,
-          networkPortsName,
-        }
-      }
-    ) || []
-  )
-}
-const networksWithPositions = ref<UI_I_NetworksWithPositions[]>(
-  countNetworksPositions()
-)
-
-const isPortToggled = ref<UI_I_PortToggleFlag>({
-  value: false,
-  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
-  )
-
-  mainRectHeights.value.adaptersHeight =
-    UI_E_PositionsY.DIAGRAM_TOP + UI_E_PositionsY.BETWEEN_RECTS * 2 + height
-
-  const { titlePosition, rectPosition, adaptersConnectLineY, adapters } =
-    getAdaptersPositions(props.diagramData, height)
-
-  switchLine.value.ay = adaptersConnectLineY
-
-  return {
-    toggle,
-    height,
-    adapters,
-    rectPosition,
-    adaptersConnectLineY,
-    titlePosition,
-    adaptersCount,
-  }
-}
-
-const adaptersWithPositions = computed<UI_I_AdaptersWithPositions>(
-  countAdaptersPositions
-)
-const onSelectPort = (networkId: string, portId: string): void => {
-  const selectPortData = getSelectPortDataFunc(
-    networkId,
-    portId,
-    networksWithPositions.value,
-    adaptersWithPositions.value
-  )
-
-  if (!selectPortData) return
-
-  selectedSwitchLineY.value = selectPortData.selectedSwitchLineY
-  selectedPort.value = selectPortData.selectedPort
-}
-
-const onSelectNetwork = (networkId: string): void => {
-  selectedNetwork.value = networkId
-
-  const selectNetworkData = getSelectNetworkDataFunc(
-    networkId,
-    networksWithPositions.value,
-    adaptersWithPositions.value
-  )
-
-  if (!selectNetworkData) return
-
-  selectedSwitchLineY.value = selectNetworkData.selectedSwitchLineY
-  selectedPort.value = selectNetworkData.selectedPort
-}
-
-const onSelectAdapter = (adapterId: string): void => {
-  const selectedNetworks: UI_I_NetworksWithPositions[] =
-    networksWithPositions.value?.filter(
-      (network: UI_I_NetworksWithPositions) =>
-        network.activeAdapters.includes(adapterId) && network.state.state !== 3
-    )
-
-  let pos: number[] = selectedNetworks?.reduce(networksPositions, [])
-  let selectedAdapterPosition: number | null =
-    adaptersWithPositions.value.adapters?.find((ad) => ad.id === adapterId)
-      ?.adapterPosition || null
-
-  selectedAdapterPosition !== null &&
-    (selectedAdapterPosition += 7.5) &&
-    pos?.push(selectedAdapterPosition)
-
-  pos = pos?.sort((y1, y2) => y1 - y2)
-
-  if (pos) {
-    selectedSwitchLineY.value = {
-      y1: pos[0],
-      y2: pos[pos.length - 1],
-    }
-  }
-
-  selectedAdapter.value = {
-    adapterId,
-    connectedPorts:
-      selectedNetworks?.map((network: UI_I_Network) => ({
-        networkId: network.id,
-        ports: network.ports.map((port) => port.id),
-      })) || [],
-  }
-}
-
-const resetSelection = (): void => {
-  selectedPort.value = useDeepCopy(selectedPortInitial)
-  selectedSwitchLineY.value = useDeepCopy(selectedSwitchLineYInitial)
-  selectedAdapter.value = useDeepCopy(selectedAdapterInitial)
-  selectedNetwork.value = '-1'
-  selectedMainLine.value = false
-}
-
-const emits = defineEmits<{
-  (
-    event: 'toggle-ports',
-    payload: Omit<UI_I_ToggleDiagramPortsPayload, 'paths'>
-  ): void
-  (
-    event: 'toggle-adapters',
-    payload: Omit<UI_I_ToggleDiagramAdaptersPayload, 'paths'>
-  ): void
-  (event: 'get-existing-standard-switches'): 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
-  (
-    event: 'check-network-label',
-    label: string,
-    sendMessage: (message: string) => void
-  ): void
-  (event: 'get-free-adapters', showModal: () => void): void
-  (
-    event: 'send-edit-data',
-    type: string,
-    initialData: UI_I_ModalsInitialData,
-    hideModal: () => void,
-    id?: string
-  ): void
-  (event: 'change-edit-fields-data', editFieldsData: UI_I_EditFieldsData): void
-  (event: 'remove', id: string, type: string, hideModal: () => void): void
-  (
-    event: 'send-manage-physical-adapters-data',
-    adapterStatus: UI_I_AdapterStatus,
-    switchName: string,
-    hideModal: () => void
-  ): void
-  (event: 'get-tcp-stacks'): void
-}>()
-
-const onTogglePorts = (
-  id: string,
-  isToggle: boolean,
-  diagramId: string
-): void => {
-  emits('toggle-ports', {
-    id,
-    isToggle,
-    diagramId,
-  })
-
-  isPortToggled.value = {
-    value: true,
-    id: id,
-  }
-}
-
-const handlePortToggle = () => {
-  selectedPort.value.portId !== '-1' &&
-    onSelectPort(selectedPort.value.networkId, selectedPort.value.portId)
-  selectedAdapter.value.adapterId !== '-1' &&
-    onSelectAdapter(selectedAdapter.value.adapterId)
-  selectedNetwork.value !== '-1' && onSelectNetwork(selectedNetwork.value)
-  hasPortAndNetwork(selectedPort.value, isPortToggled.value.id) &&
-    resetSelection()
-
-  isPortToggled.value = {
-    value: false,
-    id: '',
-  }
-}
-
-const onToggleAdapters = (): void => {
-  const newState = !adaptersWithPositions.value.toggle
-  const payload: Omit<UI_I_ToggleDiagramAdaptersPayload, 'paths'> = {
-    isToggle: newState,
-    diagramId: props.diagramData?.id || '',
-  }
-
-  emits('toggle-adapters', payload)
-
-  selectedPort.value.portId !== '-1' &&
-    onSelectPort(selectedPort.value.networkId, selectedPort.value.portId)
-  selectedAdapter.value.adapterId !== '-1' && resetSelection()
-  selectedNetwork.value !== '-1' && onSelectNetwork(selectedNetwork.value)
-}
-
-const onClickDiagram = (ev: MouseEvent): void => {
-  const target = ev.target as HTMLElement
-  const targetClassList = target.classList
-  if (targetClassList.contains('main-line__handler')) {
-    resetSelection()
-    selectedMainLine.value = true
-  } else {
-    !(
-      target.closest('.diagram-block__toggle') ||
-      target.closest('.diagram-actions')
-    ) && resetSelection()
-  }
-}
-</script>
-
-<style scoped lang="scss">
-.diagram {
-  &-min-width {
-    min-width: 745px;
-  }
-  &-main-container {
-    padding-top: 5px;
-  }
-}
-</style>
-<style lang="scss">
-.diagram-main-actions__popup.navbar-dropdown-menu {
-  .btn {
-    border-radius: 3px;
-    border-bottom: none;
-    &:hover {
-      border-bottom: none;
-    }
-    span {
-      font-size: 14px;
-    }
-    &:active {
-      box-shadow: none;
-    }
-  }
-}
-</style>
+<template>
+  <div
+    v-if="props.diagramData"
+    :class="{ 'diagram-min-width': !props.inPortlet }"
+  >
+    <div class="diagram-main-container">
+      <common-diagram-main-header
+        :in-portlet="props.inPortlet"
+        :is-show-diagram="isShowDiagram"
+        :diagram-name="props.diagramData.diagramName"
+        :test-id="props.diagramData.testId"
+        @toggle-diagram="onToggleDiagram"
+        @show-modal="onShowModal"
+      />
+      <common-diagram-main-diagram
+        :diagram-data="props.diagramData"
+        :is-show-diagram="isShowDiagram"
+        :in-portlet="props.inPortlet"
+        :networks-with-positions="networksWithPositions"
+        :main-rect-height="mainRectHeight"
+        :main-switch-line="mainSwitchLine"
+        :selected-main-line="selectedMainLine"
+        :adapters-with-positions="adaptersWithPositions"
+        :selected-port="selectedPort"
+        :selected-adapter="selectedAdapter"
+        :selected-network="selectedNetwork"
+        :selected-switch-line-y="selectedSwitchLineY"
+        :is-dark-mode="props.isDarkMode"
+        @click-diagram="onClickDiagram"
+        @toggle-adapters="onToggleAdapters"
+        @select-adapter="onSelectAdapter"
+        @toggle-ports="onTogglePorts"
+        @select-port="onSelectPort"
+        @select-network="onSelectNetwork"
+        @show-modal="onShowModal"
+      />
+    </div>
+    <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"
+      :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"
+      @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"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { UI_E_NetworkType, UI_E_PositionsY } from './lib/models/enums'
+import {
+  UI_I_Adapter,
+  UI_I_AdapterStatus,
+  UI_I_AdaptersWithPositions,
+  UI_I_MainRectHeights,
+  UI_I_ModalsInitialData,
+  UI_I_Network,
+  UI_I_EditFieldsData,
+  UI_I_NetworksWithPositions,
+  UI_I_SelectedAdapter,
+  UI_I_SelectedPort,
+  UI_I_SwitchLine,
+  UI_I_ToggleDiagramAdaptersPayload,
+  UI_I_ToggleDiagramPortsPayload,
+  UI_I_PortToggleFlag,
+  UI_I_DiagramData,
+  UI_I_SwitchAdapterItem,
+} from '~/components/common/diagramMain/lib/models/interfaces'
+import {
+  UI_I_ArbitraryObject,
+  UI_I_Localization,
+  UI_I_ItemsWithTotalCounts,
+} from '~/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 { UI_T_Adapters } from '~/components/common/diagramMain/lib/models/types'
+import {
+  managePhysicalAdapterStatusInitial,
+  mainRectHeightsInitial,
+  switchLineInitial,
+  selectedPortInitial,
+  selectedSwitchLineYInitial,
+  selectedAdapterInitial,
+} from '~/components/common/diagramMain/lib/config'
+import {
+  hasPortAndNetwork,
+  networksPositions,
+  getSelectNetworkDataFunc,
+  getSelectPortDataFunc,
+  countAdaptersHeight,
+  getAdaptersPositions,
+} from '~/components/common/diagramMain/lib/utils/utils'
+
+const props = withDefaults(
+  defineProps<{
+    diagramData: UI_I_DiagramData
+    inPortlet?: boolean
+    standardSwitchesInitial?: UI_I_Switch[]
+    hostName?: string
+    adapters?: UI_I_ItemsWithTotalCounts<UI_I_SwitchAdapterItem>
+    freeAdapters?: UI_I_Adapter[]
+    networksList?: UI_I_Network[]
+    isDarkMode: boolean
+    tcpStacks?: UI_I_TCPStack[]
+    diagramsData?: UI_I_DiagramData[]
+    isManageAdaptersModalLoading?: boolean
+    isNetworkingLoading?: boolean
+    isRemoveModalLoading?: boolean
+    isEditModalLoading?: boolean
+    isMigrateAdapterLoading?: boolean
+  }>(),
+  {
+    diagramData: null,
+    inPortlet: false,
+    standardSwitchesInitial: () => [],
+    hostName: '',
+    adapters: () => ({
+      total_items: 0,
+      total_pages: 0,
+      items: [],
+    }),
+    freeAdapters: () => [],
+    networksList: () => [],
+    tcpStacks: () => [],
+    diagramsData: [],
+    isManageAdaptersModalLoading: false,
+    isNetworkingLoading: false,
+    isRemoveModalLoading: false,
+    isEditModalLoading: false,
+    isMigrateAdapterLoading: false,
+  }
+)
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+const initialData = ref<UI_I_ModalsInitialData>({})
+const switchInitialData = ref<UI_I_ModalsInitialData>({})
+
+watch(
+  () => props.diagramData?.networking,
+  (initial: UI_I_ModalsInitialData | undefined) => {
+    if (initial) {
+      initialData.value = initial
+      switchInitialData.value = initial
+    }
+  },
+  { deep: true, immediate: true }
+)
+
+const onValidateBeforeSending = (
+  data: UI_T_EditData,
+  type: string,
+  setValidation: (messages: UI_I_ArbitraryObject<string>) => void
+) => {
+  emits('add-networking-data-validate', data, type, setValidation)
+}
+
+let initialManagePhysicalAdapterStatus = ref<UI_I_AdapterStatus>(
+  managePhysicalAdapterStatusInitial
+)
+
+const managePhysicalAdapterStatus = ref<UI_I_AdapterStatus>(
+  useDeepCopy(initialManagePhysicalAdapterStatus.value)
+)
+
+watch(
+  () => props.diagramData,
+  (newValue: UI_I_DiagramData) => {
+    if (newValue?.networking) {
+      initialManagePhysicalAdapterStatus.value = {
+        active: useDeepCopy(props.diagramData?.networking?.activeAdapters),
+        standby: useDeepCopy(props.diagramData?.networking?.standbyAdapters),
+        unused: useDeepCopy(props.diagramData?.networking?.unusedAdapters),
+      }
+
+      managePhysicalAdapterStatus.value = useDeepCopy(
+        initialManagePhysicalAdapterStatus.value
+      )
+    }
+  },
+  { deep: true, immediate: true }
+)
+
+const onChangeManagePhysicalAdapterStatus = (
+  adapterStatusNew: UI_I_AdapterStatus
+) => {
+  managePhysicalAdapterStatus.value = adapterStatusNew
+}
+
+const isShowSwitchManagePhysicalAdaptersModal = ref<boolean>(false)
+const onHideSwitchManagePhysicalAdaptersModal = (): void => {
+  isShowSwitchManagePhysicalAdaptersModal.value = false
+}
+
+const onSendManagePhysicalAdaptersData = (
+  adapterStatus: UI_I_AdapterStatus,
+  switchName: string,
+  hideModal: () => void
+) => {
+  emits(
+    'send-manage-physical-adapters-data',
+    adapterStatus,
+    switchName,
+    hideModal
+  )
+}
+
+const isShowSwitchViewSettingsModal = ref<boolean>(false)
+const isShowSwitchEditSettingsModal = ref<boolean>(false)
+const isShowSwitchRemoveModal = ref<boolean>(false)
+const onHideSwitchViewSettingsModal = (): void => {
+  isShowSwitchViewSettingsModal.value = false
+}
+const onHideSwitchEditSettingsModal = (): void => {
+  isShowSwitchEditSettingsModal.value = false
+}
+const onHideSwitchRemoveModal = (): void => {
+  isShowSwitchRemoveModal.value = false
+}
+
+const isShowAdapterViewSettingsModal = ref<boolean>(false)
+const onHideAdapterViewSettingsModal = (): void => {
+  isShowAdapterViewSettingsModal.value = false
+}
+
+const isShowNetworkViewSettingsModal = ref<boolean>(false)
+const isShowNetworkEditSettingsModal = ref<boolean>(false)
+const isShowNetworkRemoveModal = ref<boolean>(false)
+const onHideNetworkViewSettingsModal = (): void => {
+  isShowNetworkViewSettingsModal.value = false
+}
+const onHideNetworkEditSettingsModal = (): void => {
+  isShowNetworkEditSettingsModal.value = false
+}
+const onHideNetworkRemoveModal = (): void => {
+  isShowNetworkRemoveModal.value = false
+}
+
+const isShowPortViewSettingsModal = ref<boolean>(false)
+const isShowPortEditSettingsModal = ref<boolean>(false)
+const isShowPortRemoveModal = ref<boolean>(false)
+const onHidePortViewSettingsModal = (): void => {
+  isShowPortViewSettingsModal.value = false
+}
+const onHidePortEditSettingsModal = (): void => {
+  isShowPortEditSettingsModal.value = false
+}
+const onHidePortRemoveModal = (): void => {
+  isShowPortRemoveModal.value = false
+}
+
+const isShowVCenterViewSettingsModal = ref<boolean>(false)
+const onHideVCenterViewSettingsModal = (): void => {
+  isShowVCenterViewSettingsModal.value = false
+}
+const isShowAddNetworkingModal = ref<boolean>(false)
+const onHideAddNetworkingModal = (): void => {
+  isShowAddNetworkingModal.value = false
+}
+const isShowMigrateVmkernelAdapterModal = ref<boolean>(false)
+const onHideMigrateVmkernelAdapterModal = (): void => {
+  isShowMigrateVmkernelAdapterModal.value = false
+}
+
+const selectedStandardSwitchId = ref<string>('')
+const selectedSwitchId = ref<string>('')
+
+const onShowModal = (
+  value: string,
+  properties: UI_I_ModalsInitialData
+): void => {
+  switch (value) {
+    case 'port-view-settings':
+      initialData.value = properties
+      isShowPortViewSettingsModal.value = true
+      break
+    case 'network-view-settings':
+      isShowNetworkViewSettingsModal.value = true
+      initialData.value = properties
+      break
+    case 'adapter-view-settings':
+      isShowAdapterViewSettingsModal.value = true
+      initialData.value = properties
+      break
+    case 'v-center-view-settings':
+      isShowVCenterViewSettingsModal.value = true
+      initialData.value = properties
+      break
+    case 'network-edit-settings':
+      isShowNetworkEditSettingsModal.value = true
+      initialData.value = properties
+      break
+    case 'port-edit-settings':
+      initialData.value = properties
+      isShowPortEditSettingsModal.value = true
+      break
+    case 'network-port-remove':
+      initialData.value = properties
+      isShowNetworkRemoveModal.value = true
+      break
+    case 'port-remove':
+      initialData.value = properties
+      isShowPortRemoveModal.value = true
+      break
+    case 'switch-edit':
+      isShowSwitchEditSettingsModal.value = true
+      initialData.value = useDeepCopy(switchInitialData.value)
+      break
+    case 'switch-manage-physical-adapters':
+      isShowSwitchManagePhysicalAdaptersModal.value = true
+      break
+    case 'add-networking':
+      isShowAddNetworkingModal.value = true
+      selectedStandardSwitchId.value = properties.switch_name
+      selectedSwitchId.value = properties.switch_name
+      break
+    case 'switch-view-settings':
+      isShowSwitchViewSettingsModal.value = true
+      initialData.value = useDeepCopy(switchInitialData.value)
+      break
+    case 'migrate-vmkernel-adapter':
+      isShowMigrateVmkernelAdapterModal.value = true
+      break
+    case 'switch-remove':
+      isShowSwitchRemoveModal.value = true
+      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) => {
+  emits('change-edit-fields-data', newEditFieldsData)
+}
+const onCheckNetworkLabel = (
+  label: string,
+  sendMessage: (message: string) => void
+) => {
+  emits('check-network-label', label, sendMessage)
+}
+const onGetExistingStandardSwitches = () => {
+  emits('get-existing-standard-switches')
+}
+const onGetTcpStacks = () => {
+  emits('get-tcp-stacks')
+}
+const onGetFreeAdapters = (showModal: () => void) => {
+  emits('get-free-adapters', showModal)
+}
+const onSendNetworkData = (
+  data: UI_T_EditData,
+  type: string,
+  hideModal: () => void
+) => {
+  emits('send-add-networking-data', data, type, hideModal)
+}
+const onSendEditData = (type: string, hideModal: () => void, id?: string) => {
+  emits('send-edit-data', type, initialData.value, hideModal, id)
+}
+const isShowDiagram = ref<boolean>(true)
+const onToggleDiagram = () => {
+  isShowDiagram.value = !isShowDiagram.value
+}
+const mainRectHeights = ref<UI_I_MainRectHeights>(
+  useDeepCopy(mainRectHeightsInitial)
+)
+
+const switchLine = ref<UI_I_SwitchLine>(useDeepCopy(switchLineInitial))
+const mainSwitchLine = computed<UI_I_SwitchLine>(
+  () =>
+    (switchLine.value.ay && {
+      y1: Math.min(switchLine.value.y1, switchLine.value.ay),
+      y2: Math.max(switchLine.value.y2, switchLine.value.ay),
+    }) || { y1: 0, y2: 0 }
+)
+
+const selectedMainLine = ref(false)
+const selectedPort = ref<UI_I_SelectedPort>(useDeepCopy(selectedPortInitial))
+const selectedAdapter = ref<UI_I_SelectedAdapter>(
+  useDeepCopy(selectedAdapterInitial)
+)
+const selectedNetwork = ref<string>('-1')
+
+const selectedSwitchLineY = ref<UI_I_SwitchLine>(
+  useDeepCopy(selectedSwitchLineYInitial)
+)
+const mainRectHeight = computed<number>(() =>
+  Math.max(
+    mainRectHeights.value.networksHeight,
+    mainRectHeights.value.adaptersHeight
+  )
+)
+
+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 =
+    UI_E_PositionsY.DIAGRAM_TOP + UI_E_PositionsY.BETWEEN_RECTS
+
+  const lastIndex = props.diagramData?.networks.findLastIndex(
+    (network: UI_I_Network) =>
+      network.activeAdapters.length > 0 && network.state.state !== 3
+  )
+
+  return (
+    (newNetworks ? newNetworks : props.diagramData?.networks)?.map(
+      (network: UI_I_Network, index: number) => {
+        let portsCount = 0
+        if (
+          network.networkType ===
+          (UI_E_NetworkType.VMPortsGroup || UI_E_NetworkType.VCenter)
+        ) {
+          portsCount = network.ports.length
+        } else {
+          portsCount = network.sysx ? 1 : 0
+        }
+        const portsHeight = network.toggle
+          ? network.networkType === UI_E_NetworkType.VCenter
+            ? portsCount * UI_E_PositionsY.SINGLE_V_CENTER_HEIGHT
+            : portsCount * UI_E_PositionsY.SINGLE_PORT_HEIGHT
+          : 0
+        const networkHeight =
+          UI_E_PositionsY.PORTS_FROM_RECT_TOP +
+          portsHeight +
+          (network.networkType === UI_E_NetworkType.VCenter
+            ? UI_E_PositionsY.SINGLE_V_CENTER_HEIGHT - 10
+            : UI_E_PositionsY.SINGLE_PORT_HEIGHT) +
+          UI_E_PositionsY.SPACE_FROM_RECT_BOTTOM
+
+        lastPosition +=
+          lastNetworkHeight + (index && UI_E_PositionsY.BETWEEN_RECTS)
+        lastNetworkHeight = networkHeight
+
+        const connectLineY = lastPosition + networkHeight / 2
+        const titlePosition = lastPosition + UI_E_PositionsY.TITLE_FROM_RECT_TOP
+        const vlanPosition = lastPosition + UI_E_PositionsY.VLAN_FROM_RECT_TOP
+        const portsPosition = lastPosition + UI_E_PositionsY.PORTS_FROM_RECT_TOP
+
+        const networkPortsName =
+          (network.networkType === UI_E_NetworkType.VMkernel &&
+            'VMkernel Ports') ||
+          (network.networkType === UI_E_NetworkType.VMPortsGroup &&
+            'Virtual Machines') ||
+          (network.networkType === UI_E_NetworkType.VCenter &&
+            'Virtual Machines') ||
+          ''
+
+        lastIndex !== -1 && index === 0 && (switchLine.value.y1 = connectLineY)
+        lastIndex !== -1 &&
+          index === lastIndex &&
+          (switchLine.value.y2 = connectLineY)
+
+        mainRectHeights.value.networksHeight +=
+          networkHeight + UI_E_PositionsY.BETWEEN_RECTS
+
+        const networkWithPortsPositions =
+          network.networkType ===
+          (UI_E_NetworkType.VMPortsGroup || UI_E_NetworkType.VCenter)
+            ? network.ports.map((port, index) => {
+                const portPosition =
+                  portsPosition +
+                  (network.networkType === UI_E_NetworkType.VCenter
+                    ? (index + 1) * UI_E_PositionsY.SINGLE_V_CENTER_HEIGHT - 10
+                    : (index + 1) * UI_E_PositionsY.SINGLE_PORT_HEIGHT)
+
+                return {
+                  ...port,
+                  portPosition,
+                }
+              })
+            : (network.sysx && [
+                {
+                  id: network.sysx?.id,
+                  name: `${network.sysx?.id} ${
+                    network.sysx.ipv4_settings.ipv4
+                      ? `: ${network.sysx.ipv4_settings.ipv4}`
+                      : ''
+                  }`,
+                  state: network.sysx.state,
+                  portPosition:
+                    portsPosition + UI_E_PositionsY.SINGLE_PORT_HEIGHT,
+                },
+              ]) ||
+              []
+
+        return {
+          ...network,
+          ports: networkWithPortsPositions,
+          portsCount,
+          portsHeight,
+          networkHeight,
+          rectPosition: lastPosition,
+          connectLineY,
+          titlePosition,
+          vlanPosition,
+          vlanId: network.vlanId || '--',
+          portsPosition,
+          networkPortsName,
+        }
+      }
+    ) || []
+  )
+}
+const networksWithPositions = ref<UI_I_NetworksWithPositions[]>(
+  countNetworksPositions()
+)
+
+const isPortToggled = ref<UI_I_PortToggleFlag>({
+  value: false,
+  id: '',
+})
+
+const countAdaptersPositions = (): UI_I_AdaptersWithPositions => {
+  const { height, toggle, adaptersCount } = countAdaptersHeight(
+    props.diagramData
+  )
+
+  mainRectHeights.value.adaptersHeight =
+    UI_E_PositionsY.DIAGRAM_TOP + UI_E_PositionsY.BETWEEN_RECTS * 2 + height
+
+  const { titlePosition, rectPosition, adaptersConnectLineY, adapters } =
+    getAdaptersPositions(props.diagramData, height)
+
+  switchLine.value.ay = adaptersConnectLineY
+
+  return {
+    toggle,
+    height,
+    adapters,
+    rectPosition,
+    adaptersConnectLineY,
+    titlePosition,
+    adaptersCount,
+  }
+}
+
+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,
+    portId,
+    networksWithPositions.value,
+    adaptersWithPositions.value
+  )
+
+  if (!selectPortData) return
+
+  selectedSwitchLineY.value = selectPortData.selectedSwitchLineY
+  selectedPort.value = selectPortData.selectedPort
+}
+
+const onSelectNetwork = (networkId: string): void => {
+  selectedNetwork.value = networkId
+
+  const selectNetworkData = getSelectNetworkDataFunc(
+    networkId,
+    networksWithPositions.value,
+    adaptersWithPositions.value
+  )
+
+  if (!selectNetworkData) return
+
+  selectedSwitchLineY.value = selectNetworkData.selectedSwitchLineY
+  selectedPort.value = selectNetworkData.selectedPort
+}
+
+const onSelectAdapter = (adapterId: string): void => {
+  const selectedNetworks: UI_I_NetworksWithPositions[] =
+    networksWithPositions.value?.filter(
+      (network: UI_I_NetworksWithPositions) =>
+        network.activeAdapters.includes(adapterId) && network.state.state !== 3
+    )
+
+  let pos: number[] = selectedNetworks?.reduce(networksPositions, [])
+  let selectedAdapterPosition: number | null =
+    adaptersWithPositions.value.adapters?.find(
+      (adapter: UI_T_Adapters) => adapter.id === adapterId
+    )?.adapterPosition || null
+
+  selectedAdapterPosition !== null &&
+    (selectedAdapterPosition += 7.5) &&
+    pos?.push(selectedAdapterPosition)
+
+  pos = pos?.sort((y1, y2) => y1 - y2)
+
+  if (pos) {
+    selectedSwitchLineY.value = {
+      y1: pos[0],
+      y2: pos[pos.length - 1],
+    }
+  }
+
+  selectedAdapter.value = {
+    adapterId,
+    connectedPorts:
+      selectedNetworks?.map((network: UI_I_Network) => ({
+        networkId: network.id,
+        ports: network.ports.map((port) => port.id),
+      })) || [],
+  }
+}
+
+const resetSelection = (): void => {
+  selectedPort.value = useDeepCopy(selectedPortInitial)
+  selectedSwitchLineY.value = useDeepCopy(selectedSwitchLineYInitial)
+  selectedAdapter.value = useDeepCopy(selectedAdapterInitial)
+  selectedNetwork.value = '-1'
+  selectedMainLine.value = false
+}
+
+const emits = defineEmits<{
+  (
+    event: 'toggle-ports',
+    payload: Omit<UI_I_ToggleDiagramPortsPayload, 'paths'>
+  ): void
+  (
+    event: 'toggle-adapters',
+    payload: Omit<UI_I_ToggleDiagramAdaptersPayload, 'paths'>
+  ): void
+  (event: 'get-existing-standard-switches'): 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
+  (
+    event: 'check-network-label',
+    label: string,
+    sendMessage: (message: string) => void
+  ): void
+  (event: 'get-free-adapters', showModal: () => void): void
+  (
+    event: 'send-edit-data',
+    type: string,
+    initialData: UI_I_ModalsInitialData,
+    hideModal: () => void,
+    id?: string
+  ): void
+  (event: 'change-edit-fields-data', editFieldsData: UI_I_EditFieldsData): void
+  (event: 'remove', id: string, type: string, hideModal: () => void): void
+  (
+    event: 'send-manage-physical-adapters-data',
+    adapterStatus: UI_I_AdapterStatus,
+    switchName: string,
+    hideModal: () => void
+  ): void
+  (event: 'get-tcp-stacks'): void
+}>()
+
+const onTogglePorts = (
+  id: string,
+  isToggle: boolean,
+  diagramId: string
+): void => {
+  emits('toggle-ports', {
+    id,
+    isToggle,
+    diagramId,
+  })
+
+  isPortToggled.value = {
+    value: true,
+    id: id,
+  }
+}
+
+const handlePortToggle = () => {
+  selectedPort.value.portId !== '-1' &&
+    onSelectPort(selectedPort.value.networkId, selectedPort.value.portId)
+  selectedAdapter.value.adapterId !== '-1' &&
+    onSelectAdapter(selectedAdapter.value.adapterId)
+  selectedNetwork.value !== '-1' && onSelectNetwork(selectedNetwork.value)
+  hasPortAndNetwork(selectedPort.value, isPortToggled.value.id) &&
+    resetSelection()
+
+  isPortToggled.value = {
+    value: false,
+    id: '',
+  }
+}
+
+const onToggleAdapters = (): void => {
+  const newState = !adaptersWithPositions.value.toggle
+  const payload: Omit<UI_I_ToggleDiagramAdaptersPayload, 'paths'> = {
+    isToggle: newState,
+    diagramId: props.diagramData?.id || '',
+  }
+
+  emits('toggle-adapters', payload)
+
+  selectedPort.value.portId !== '-1' &&
+    onSelectPort(selectedPort.value.networkId, selectedPort.value.portId)
+  selectedAdapter.value.adapterId !== '-1' && resetSelection()
+  selectedNetwork.value !== '-1' && onSelectNetwork(selectedNetwork.value)
+}
+
+const onClickDiagram = (ev: MouseEvent): void => {
+  const target = ev.target as HTMLElement
+  const targetClassList = target.classList
+  if (targetClassList.contains('main-line__handler')) {
+    resetSelection()
+    selectedMainLine.value = true
+  } else {
+    !(
+      target.closest('.diagram-block__toggle') ||
+      target.closest('.diagram-actions')
+    ) && resetSelection()
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.diagram {
+  &-min-width {
+    min-width: 745px;
+  }
+  &-main-container {
+    padding-top: 5px;
+  }
+}
+</style>
+<style lang="scss">
+.diagram-main-actions__popup.navbar-dropdown-menu {
+  .btn {
+    border-radius: 3px;
+    border-bottom: none;
+    &:hover {
+      border-bottom: none;
+    }
+    span {
+      font-size: 14px;
+    }
+    &:active {
+      box-shadow: none;
+    }
+  }
+}
+</style>