bfg-common 1.6.77 → 1.6.78

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

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