bfg-common 1.0.0

package/components/common/diagramMain/DiagramMain.vue

@@ -0,0 +1,979 @@
+<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"
+        @toggle-diagram="onToggleDiagram"
+        @show-modal="onShowModal"
+      />
+      <common-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"
+        @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="182px"
+      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.networkLabel"
+      modal-name="network-port-remove-modal"
+      view-name="port-network-remove"
+      width="872px"
+      height="558px"
+      :title="localization.removePortGroup"
+      :show="isShowNetworkRemoveModal"
+      :is-show-loader="isShowRemoveModalLoader"
+      @remove="onRemoveNetwork"
+      @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="isShowRemoveModalLoader"
+      @remove="onRemoveSwitch"
+      @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="isShowRemoveModalLoader"
+      @remove="onRemovePort"
+      @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"
+      @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"
+      @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"
+        @send-edit-data="onSendEditData"
+        @change-edit-fields-data="onChangeEditFieldsData"
+        @check-network-label="onCheckNetworkLabel"
+        @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"
+        :initial-adapter-status="initialManagePhysicalAdapterStatus"
+        @send-manage-physical-adapters-data="onSendManagePhysicalAdaptersData"
+        @change-adapter-status="onChangeManagePhysicalAdapterStatus"
+        @get-free-adapters="onGetFreeAdapters"
+        @hide="onHideSwitchManagePhysicalAdaptersModal"
+      />
+      <common-add-networking
+        v-if="isShowAddNetworkingModal"
+        modal-name="add-networking-modal"
+        view-name="add-networking"
+        width="872px"
+        height="558px"
+        :title="localization.addNetworking"
+        :standard-switches-initial="props.standardSwitchesInitial"
+        :show="isShowAddNetworkingModal"
+        :is-network-invalid="isNetworkInvalid"
+        :free-adapters="props.freeAdapters"
+        :adapters="props.adapters"
+        @check-network-label="onCheckNetworkLabel"
+        @get-existing-standard-switches="onGetExistingStandardSwitches"
+        @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"
+        modal-name="migrate-vmkernel-adapter-modal"
+        view-name="migrate-vmkernel-adapter"
+        width="956px"
+        height="636px"
+        :title="`esxi1.aobfg.ru - ${localization.migrateVmKernelNetworkAdapterTo} vSwitch0`"
+        :switch-name="diagramData.id"
+        :networks-list="props.networksList"
+        :switch-networks="diagramData.networks"
+        :show="isShowMigrateVmkernelAdapterModal"
+        @hide="onHideMigrateVmkernelAdapterModal"
+      />
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { UI_E_NetworkType, UI_E_PositionsY } from './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,
+} from '~/components/common/diagramMain/models/interfaces'
+import { UI_I_ArbitraryObject, UI_I_Localization } from '~/models/interfaces'
+import {
+  UI_I_AddNetworkingSecondSchemeDataSend,
+  UI_I_AddNetworkingZeroOrFirstSchemeDataSend,
+  UI_I_NetworkLabelCheckExisting,
+  UI_I_Switch,
+} from '~/components/common/addNetworking/models/interfaces'
+import {
+  adapterViewSettingsFunc,
+  adapterViewSettingsModalTabsFunc,
+  networkEditSettingsTabsFunc,
+  networkViewSettingsFunc,
+  networkViewSettingsModalTabsFunc,
+  portEditSettingsTabsFunc,
+  portViewSettingsFunc,
+  portViewSettingsModalTabsFunc,
+  switchEditSettingsTabsFunc,
+  switchViewSettingsFunc,
+  switchViewSettingsModalTabsFunc,
+  vCenterViewSettingsFunc,
+} from '~/components/common/diagramMain/modals/config'
+import { isNetworkInvalidInitial } from '~/components/common/addNetworking/config'
+import {
+  managePhysicalAdapterStatusInitial,
+  mainRectHeightsInitial,
+  switchLineInitial,
+  selectedPortInitial,
+  selectedSwitchLineYInitial,
+  selectedAdapterInitial,
+} from '~/components/common/diagramMain/config'
+import {
+  hasPortAndNetwork,
+  networksPositions,
+  getSelectNetworkDataFunc,
+  getSelectPortDataFunc,
+  countAdaptersHeight,
+  getAdaptersPositions,
+} from '~/components/common/diagramMain/utils/utils'
+import {
+  UI_I_DiagramDataFull,
+  UI_I_NetworkFull,
+  UI_I_SwitchAdapters,
+} from '~/components/common/diagramMain/models/interfaces'
+
+const props = withDefaults(
+  defineProps<{
+    diagramData: UI_I_DiagramDataFull | null
+    inPortlet?: boolean
+    standardSwitchesInitial?: UI_I_Switch[]
+    isNetworkInvalid?: UI_I_NetworkLabelCheckExisting
+    hostName?: string
+    adapters?: UI_I_SwitchAdapters
+    freeAdapters?: UI_I_Adapter[]
+    networksList?: UI_I_NetworkFull[]
+  }>(),
+  {
+    diagramData: null,
+    inPortlet: false,
+    standardSwitchesInitial: () => [],
+    isNetworkInvalid: () => isNetworkInvalidInitial,
+    hostName: '',
+    adapters: () => ({
+      totalItems: 0,
+      totalPages: 0,
+      items: [],
+    }),
+    freeAdapters: () => [],
+    networksList: () => [],
+  }
+)
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+const initialData = ref<UI_I_ModalsInitialData>({})
+const switchInitialData = ref<UI_I_ModalsInitialData>({})
+const isNetworkInvalid = ref<UI_I_NetworkLabelCheckExisting>()
+
+watch(
+  () => props.isNetworkInvalid,
+  (newValue: UI_I_NetworkLabelCheckExisting) => {
+    isNetworkInvalid.value = newValue
+  },
+  { deep: true, immediate: true }
+)
+
+watch(
+  () => props.diagramData?.networking,
+  (initial: UI_I_ModalsInitialData | undefined) => {
+    if (initial) {
+      initialData.value = initial
+      switchInitialData.value = initial
+    }
+  },
+  { deep: true, immediate: true }
+)
+
+const onValidateBeforeSending = (
+  networkData:
+    | UI_I_AddNetworkingSecondSchemeDataSend
+    | UI_I_AddNetworkingZeroOrFirstSchemeDataSend,
+  type: string,
+  hideSendNetworkDataLoader: () => void,
+  setValidation: (err_arg: UI_I_ArbitraryObject<string>) => void,
+  goToLastStep: (stop?: boolean) => void
+) => {
+  emits(
+    'add-networking-data-validate',
+    networkData,
+    type,
+    hideSendNetworkDataLoader,
+    setValidation,
+    goToLastStep
+  )
+}
+
+let initialManagePhysicalAdapterStatus: UI_I_AdapterStatus =
+  managePhysicalAdapterStatusInitial
+
+const managePhysicalAdapterStatus = ref<UI_I_AdapterStatus>(
+  useDeepCopy(initialManagePhysicalAdapterStatus)
+)
+
+watch(
+  () => props.diagramData,
+  (newValue) => {
+    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,
+  hideManagePhysicalAdaptersModal: () => void,
+  hideLoader: () => void
+) => {
+  emits(
+    'send-manage-physical-adapters-data',
+    adapterStatus,
+    switchName,
+    hideManagePhysicalAdaptersModal,
+    hideLoader
+  )
+}
+
+const isShowRemoveModalLoader = ref(false)
+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
+  isShowRemoveModalLoader.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
+  isShowRemoveModalLoader.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
+  isShowRemoveModalLoader.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 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
+      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 onRemoveNetwork = (id: string) => {
+  isShowRemoveModalLoader.value = true
+  emits('remove-network', { id, hideModalCB: onHideNetworkRemoveModal })
+}
+const onRemoveSwitch = (id: string) => {
+  isShowRemoveModalLoader.value = true
+  emits('remove-switch', { id, hideModalCB: onHideSwitchRemoveModal })
+}
+const onRemovePort = (id: string) => {
+  isShowRemoveModalLoader.value = true
+  emits('remove-port', { id, hideModalCB: onHidePortRemoveModal })
+}
+const onChangeEditFieldsData = (newEditFieldsData: UI_I_EditFieldsData) => {
+  emits('change-edit-fields-data', newEditFieldsData)
+}
+const onCheckNetworkLabel = (
+  networkLabel: string,
+  cb: (error_message: string) => void,
+  hideLoader: () => void
+) => {
+  emits('check-network-label', networkLabel, cb, hideLoader)
+}
+const onGetExistingStandardSwitches = (cb: () => void) => {
+  emits('get-existing-standard-switches', cb)
+}
+const onGetFreeAdapters = (cb: () => void) => {
+  emits('get-free-adapters', cb)
+}
+const onSendNetworkData = (
+  networkData:
+    | UI_I_AddNetworkingSecondSchemeDataSend
+    | UI_I_AddNetworkingZeroOrFirstSchemeDataSend,
+  type: string,
+  hideSendNetworkDataLoader: () => void,
+  onHideAddNetworkingModal: () => void
+) => {
+  emits(
+    'send-add-networking-data',
+    networkData,
+    type,
+    hideSendNetworkDataLoader,
+    onHideAddNetworkingModal
+  )
+}
+const onSendEditData = (type: string, hideModal: () => void, name?: string) => {
+  emits('send-edit-data', type, initialData.value, hideModal, name)
+}
+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
+  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') ||
+          ''
+
+        index === 0 && (switchLine.value.y1 = connectLineY)
+        networks &&
+          index === networks.length - 1 &&
+          (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?.name} ${
+                    !network.sysx.tcp_config.auto
+                      ? `: ${network.sysx.tcp_config.ipv4}`
+                      : ''
+                  }`,
+                  name: `${network.sysx?.name} ${
+                    !network.sysx.tcp_config.auto
+                      ? `: ${network.sysx.tcp_config.ipv4}`
+                      : ''
+                  }`,
+                  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 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 networksWithPositions = computed<UI_I_NetworksWithPositions[]>(
+  countNetworksPositions
+)
+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_Network) =>
+      network.activeAdapters.includes(adapterId)
+    )
+
+  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', cb: () => void): void
+  (
+    event: 'send-add-networking-data',
+    secondSchemeData:
+      | UI_I_AddNetworkingSecondSchemeDataSend
+      | UI_I_AddNetworkingZeroOrFirstSchemeDataSend,
+    type: string,
+    hideSendNetworkDataLoader: () => void,
+    onHideAddNetworkingModal: () => void
+  ): void
+  (
+    event: 'add-networking-data-validate',
+    networkData:
+      | UI_I_AddNetworkingSecondSchemeDataSend
+      | UI_I_AddNetworkingZeroOrFirstSchemeDataSend,
+    type: string,
+    hideSendNetworkDataLoader: () => void,
+    setValidation: (err_arg: UI_I_ArbitraryObject<string>) => void,
+    goToLastStep: (stop?: boolean) => void
+  ): void
+  (
+    event: 'check-network-label',
+    networkLabel: string,
+    cb: (error_message: string) => void,
+    hideLoader?: () => void
+  ): void
+  (event: 'get-free-adapters', cb: () => void): void
+  (
+    event: 'send-edit-data',
+    type: string,
+    initialData: UI_I_ModalsInitialData,
+    hideModal: () => void,
+    name?: string
+  ): void
+  (event: 'change-edit-fields-data', editFieldsData: UI_I_EditFieldsData): void
+  (event: 'remove-network', arg: { id: string; hideModalCB: () => void }): void
+  (event: 'remove-switch', arg: { id: string; hideModalCB: () => void }): void
+  (event: 'remove-port', arg: { id: string; hideModalCB: () => void }): void
+  (
+    event: 'send-manage-physical-adapters-data',
+    adapterStatus: UI_I_AdapterStatus,
+    switchName: string,
+    hideModalCB: () => void,
+    hideLoaderCB: () => void
+  ): void
+}>()
+
+const onTogglePorts = (
+  id: string,
+  isToggle: boolean,
+  diagramId: string
+): void => {
+  emits('toggle-ports', {
+    id,
+    isToggle,
+    diagramId,
+  })
+  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, id) && resetSelection()
+}
+
+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 {
+  transform: translate(-40px, -10px);
+  width: 360px;
+  .btn {
+    border-radius: 3px;
+    border-bottom: none;
+    &:hover {
+      border-bottom: none;
+    }
+    span {
+      font-size: 14px;
+    }
+    &:active {
+      box-shadow: none;
+    }
+  }
+}
+</style>