bfg-common 1.0.30 → 1.0.31

package/components/common/addNetworking/AddNetworking.vue

@@ -1,982 +1,982 @@
-<template>
-    <common-add-networking-wizard
-            :wizard="wizard"
-            :steps-with-status="stepsWithStatus"
-            :width="props.width"
-            :height="props.height"
-            :show="props.show"
-            :title="title"
-            :is-show-loader="isShowLoader"
-            :second-title="secondTitle"
-            @select-step="onSelectStep"
-            @hide="onHideAddNetworkingModal"
-            @next-step="onNextStep"
-            @finish="onFinish"
-    >
-        <template #modalBody>
-            <common-add-networking-steps-select-connection-type
-                    v-if="wizard.isSelectedStep(0)"
-                    :step-id="0"
-                    :title="localization.selectConnectionType"
-                    :text="localization.selectConnectionTypeToCreate"
-                    :connection-type="connectionType"
-                    @change-connection-type="onChangeConnectionType"
-            />
-            <common-add-networking-steps-selected-target-device
-                    v-if="wizard.isSelectedStep(1)"
-                    :step-id="1"
-                    :title="localization.selectTargetDevice"
-                    :text="localization.selectTargetDeviceForNewConnection"
-                    :target-device="targetDevice"
-                    :connection-type="connectionType"
-                    :is-show-error-message-alert="isShowErrorMessageAlert"
-                    :error-messages="errorMessages[1]"
-                    :standard-switches-initial="props.standardSwitchesInitial"
-                    :error="error"
-                    @set-error-empty="onSetErrorFieldEmpty"
-                    @change-error-messages="onChangeErrorMessages"
-                    @hide-error-message-alert="onHideErrorMessageAlert"
-                    @change-target-device="onChangeTargetDevice"
-            />
-            <common-add-networking-steps-create-standard-switch
-                    v-if="wizard.isSelectedStep(2)"
-                    :step-id="2"
-                    :title="localization.createStandardSwitch"
-                    :text="localization.assignFreePhysicalNetworkAdaptersToTheNewSwitch"
-                    :free-adapters="props.freeAdapters"
-                    :added-adapters="addedAdapters"
-                    :adapter-status="adapterStatus"
-                    :adapters="props.adapters"
-                    :is-show-no-connected-active-adapters-modal="
-          isShowNoConnectedActiveAdaptersModal
-        "
-                    :is-show-no-active-adapters-modal="isShowNoActiveAdaptersModal"
-                    @get-free-adapters="onGetFreeAdapters"
-                    @change-added-adapters="onChangeAddedAdapters"
-                    @change-adapter-status="onChangeAdapterStatus"
-                    @confirm-no-active-adapters-modal="onConfirmNoActiveAdaptersModal"
-                    @hide-no-connected-active-adapters-modal="
-          onHideNoConnectedActiveAdaptersModal
-        "
-                    @hide-no-active-adapters-modal="onHideNoActiveAdaptersModal"
-            />
-            <common-add-networking-steps-port-properties
-                    v-if="wizard.isSelectedStep(3)"
-                    :step-id="3"
-                    :title="localization.portProperties"
-                    :text="localization.specifyVMkernelPortSettings"
-                    :port-properties="portProperties"
-                    :is-show-error-message-alert="isShowErrorMessageAlert"
-                    :error-messages="errorMessages[3]"
-                    :network-label-existing-error-message="networkLabelExistingErrorMessage"
-                    :mtu-from-switch="mtuFromSwitch"
-                    :error="error"
-                    @set-error-empty="onSetErrorFieldEmpty"
-                    @change-error-messages="onChangeErrorMessages"
-                    @hide-error-message-alert="onHideErrorMessageAlert"
-                    @change-port-properties="onChangePortProperties"
-            />
-            <common-add-networking-steps-ip-four-settings
-                    v-if="wizard.isSelectedStep(4)"
-                    :step-id="4"
-                    :title="localization.ipV4Settings"
-                    :text="localization.specifyVMkernelIPv4Settings"
-                    :ip-four-settings="ipFourSettings"
-                    :is-show-error-message-alert="isShowErrorMessageAlert"
-                    :error-messages="errorMessages[4]"
-                    :error="error"
-                    @set-error-empty="onSetErrorFieldEmpty"
-                    @change-error-messages="onChangeErrorMessages"
-                    @hide-error-message-alert="onHideErrorMessageAlert"
-                    @change-ip-four-settings="onChangeIpFourSettings"
-            />
-            <common-add-networking-steps-connection-settings
-                    v-if="wizard.isSelectedStep(5)"
-                    :step-id="5"
-                    :title="localization.connectionSettings"
-                    :text="
-          localization.useNetworkLabelsToIdentifyMigrationCompatibleTwoHosts
-        "
-                    :network-label-existing-error-message="networkLabelExistingErrorMessage"
-                    :connection-settings="connectionSettings"
-                    :is-show-error-message-alert="isShowErrorMessageAlert"
-                    :error-messages="errorMessages[5]"
-                    :error="error"
-                    @set-error-empty="onSetErrorFieldEmpty"
-                    @change-error-messages="onChangeErrorMessages"
-                    @hide-error-message-alert="onHideErrorMessageAlert"
-                    @change-connection-settings="onChangeConnectionSettings"
-            />
-            <common-add-networking-steps-physical-adapter
-                    v-if="wizard.isSelectedStep(6)"
-                    :step-id="6"
-                    :title="localization.addPhysicalNetworkAdapter"
-                    :text="localization.assignPhysicalNetworkAdaptersToTheSwitch"
-            />
-            <common-add-networking-steps-ready-complete
-                    v-if="wizard.isSelectedStep(7)"
-                    :step-id="7"
-                    :title="localization.readyComplete"
-                    :text="localization.reviewYourSettingsSelectionsWizard"
-                    :ready-complete-fields="readyCompleteFields"
-            />
-        </template>
-    </common-add-networking-wizard>
-</template>
-
-<script setup lang="ts">
-import { UI_I_ArbitraryObject, UI_I_Localization } from '~/models/interfaces'
-import {
-    createZeroSchemeReadyCompleteFunc,
-    createFirstSchemeReadyCompleteFunc,
-    createSecondSchemeReadyCompleteFunc,
-    stepsSchemeFunc,
-    stepsFunc,
-    secondTitleFunc,
-    addNetworkingSecondSchemeDataFunc,
-    errorMessagesInitialFunc,
-    connectionSettingsInitial,
-    portPropertiesInitial,
-    ipFourSettingsInitial,
-    targetDeviceInitial,
-    isNetworkInvalidInitial,
-} from '~/components/common/addNetworking/config'
-import {
-    UI_I_PortProperties,
-    UI_I_IpFourSettings,
-    UI_I_ConnectionSettings,
-    UI_I_TargetDevice,
-    UI_I_Switch,
-    UI_I_ReadyCompleteFields,
-    UI_I_AddNetworkingSecondSchemeDataSend,
-    UI_I_NetworkLabelCheckExisting,
-    UI_I_AddNetworkingZeroOrFirstSchemeDataSend,
-    UI_I_Step,
-} from '~/components/common/addNetworking/models/interfaces'
-import {
-    UI_I_Adapter,
-    UI_I_AdapterStatus,
-    UI_I_SwitchAdapterItem,
-    UI_I_SwitchAdapters,
-} from '~/components/common/diagramMain/models/interfaces'
-import { Wizard, getVlanId } from '~/components/common/addNetworking/utils'
-import { addNetworkingZeroOrFirstSchemeDataFunc } from '~/components/common/addNetworking/config/sendData'
-
-// Props from up
-const props = withDefaults(
-    defineProps<{
-        modalName: string
-        viewName: string
-        show: boolean
-        width?: string
-        height?: string
-        title?: string
-        standardSwitchesInitial: UI_I_Switch[]
-        isNetworkInvalid?: UI_I_NetworkLabelCheckExisting
-        freeAdapters: UI_I_Adapter[]
-        adapters: UI_I_SwitchAdapters
-    }>(),
-    {
-        isNetworkInvalid: () => isNetworkInvalidInitial,
-        width: '576px',
-        height: '420px',
-        title: '',
-        freeAdapters: () => [],
-        standardSwitchesInitial: () => [],
-    }
-)
-
-// UI_I_Localization
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-// Title
-const hostname = ref<string>('')
-const title = computed<string>(() => `${hostname.value} - ${props.title}`)
-
-// Loader
-const isShowLoader = computed<boolean>(
-    () =>
-        isShowGetFreeAdaptersLoader.value ||
-        isShowCheckNetworkLabelLoader.value ||
-        isShowSendNetworkDataLoader.value ||
-        isShowLoaderGetStandardSwitches.value
-)
-
-/* **************************************
-// STEPS LOGIC***************************
-************************************** */
-
-// Steps
-const wizard: Wizard = new Wizard(
-    stepsSchemeFunc(stepsFunc(localization.value))
-)
-
-const secondTitle = computed<string>(() =>
-    secondTitleFunc(wizard.selectedStep, localization.value)
-)
-
-const stepsWithStatus = computed<UI_I_Step[]>(() => wizard.stepsWithStatus())
-
-// Step's content data and changers (readyCompleteFields)
-const readyCompleteFields = ref<UI_I_ReadyCompleteFields[]>([])
-
-// Step's content data (connectionType)
-const connectionType = ref<string>('0')
-
-const onChangeConnectionType = (newConnectionType: string): void => {
-    wizard.resetStepsUntilX(1)
-    connectionType.value = newConnectionType
-    targetDevice.value.standardSwitch =
-        props.standardSwitchesInitial?.[0]?.name || ''
-}
-
-// Step's content data (createStandardSwitch)
-const addedAdapters = ref<string[]>([])
-
-const onChangeAddedAdapters = (addedAdaptersNew: string[]): void => {
-    addedAdapters.value = addedAdaptersNew
-}
-
-const adapterStatus = ref<UI_I_AdapterStatus>({
-    active: [],
-    standby: [],
-    unused: [],
-})
-const onChangeAdapterStatus = (adapterStatusNew: UI_I_AdapterStatus): void => {
-    adapterStatus.value = adapterStatusNew
-}
-
-// Step's content data and changers (targetDevice)
-const targetDevice = ref<UI_I_TargetDevice>(useDeepCopy(targetDeviceInitial))
-const mtuFromSwitch = ref<number>(1500)
-
-const onChangeTargetDevice = (newTargetDevice: UI_I_TargetDevice): void => {
-    const oldTargetDeviceSelected = useDeepCopy(targetDevice.value).selected
-    const newTargetDeviceSelected = newTargetDevice.selected
-
-    if (oldTargetDeviceSelected !== newTargetDeviceSelected)
-        wizard.resetStepsUntilX(2)
-
-    const selectedSwitch = props.standardSwitchesInitial.find(
-        (sw) => newTargetDevice.standardSwitch === sw.name
-    )
-
-    if (newTargetDeviceSelected === '1' && selectedSwitch) {
-        mtuFromSwitch.value = selectedSwitch?.mtu || 1500
-    }
-    if (newTargetDeviceSelected === '3') {
-        mtuFromSwitch.value = newTargetDevice.mtu || 1500
-    }
-
-    targetDevice.value = useDeepCopy(newTargetDevice)
-}
-
-// Step's content data and changers (portProperties)
-const portProperties = ref<UI_I_PortProperties>(
-    useDeepCopy(portPropertiesInitial)
-)
-const onChangePortProperties = (newFields: UI_I_PortProperties): void => {
-    portProperties.value = newFields
-}
-
-// Step's content data and changers (ipFourSettings)
-const ipFourSettings = ref<UI_I_IpFourSettings>(ipFourSettingsInitial)
-const onChangeIpFourSettings = (newFields: UI_I_IpFourSettings): void => {
-    ipFourSettings.value = newFields
-}
-
-// Step's content data and changers (connectionSettings)
-const connectionSettings = ref<UI_I_ConnectionSettings>(
-    connectionSettingsInitial
-)
-const onChangeConnectionSettings = (
-    newFields: UI_I_ConnectionSettings
-): void => {
-    connectionSettings.value = newFields
-}
-
-const error = ref<UI_I_ArbitraryObject<string>>({})
-
-const onSetErrorFieldEmpty = (fieldName: string): void => {
-    error.value[fieldName] = ''
-}
-
-// Error Messages
-const errorMessagesInitial: string[][] = errorMessagesInitialFunc(8)
-const errorMessages = ref<string[][]>(errorMessagesInitial)
-const isShowErrorMessageAlert = ref<boolean>(false)
-
-const networkLabelExistingErrorMessage = ref<string>('')
-
-const onChangeErrorMessages = (
-    newErrorMessages: string[],
-    stepIndex: number
-): void => {
-    errorMessages.value[stepIndex] = newErrorMessages
-}
-const onShowErrorMessageAlert = (): void => {
-    isShowErrorMessageAlert.value = true
-}
-const onHideErrorMessageAlert = (): void => {
-    isShowErrorMessageAlert.value = false
-}
-
-// Choosing Scheme
-watch(
-    [connectionType, targetDevice],
-    (newValues, oldValue) => {
-        const newCT = newValues[0] // -> newConnectionType
-        const oldCT = oldValue[0] // -> oldConnectionType
-        const newTD = newValues[1] // -> newTargetDevice
-
-        if (newCT !== oldCT) {
-            newCT === '0' && (targetDevice.value.selected = '1')
-            newCT === '1' && (targetDevice.value.selected = '1')
-            newCT === '2' && (targetDevice.value.selected = '2')
-        }
-        if (newCT === '0') {
-            ;(newTD.selected === '0' || newTD.selected === '1') &&
-            (wizard.selectedScheme = 0)
-            newTD.selected === '3' && (wizard.selectedScheme = 1)
-        }
-        if (newCT === '1') {
-            newTD.selected === '1' && (wizard.selectedScheme = 2)
-            newTD.selected === '3' && (wizard.selectedScheme = 3)
-        }
-        if (newCT === '2') {
-            newTD.selected === '2' && (wizard.selectedScheme = 4)
-            newTD.selected === '3' && (wizard.selectedScheme = 5)
-        }
-    },
-    { deep: true, immediate: true }
-)
-
-// Ready complete
-watch(
-    () => wizard.selectedStep,
-    (newSelectedStep: number) => {
-        if (
-            newSelectedStep === 1 &&
-            targetDevice.value.selected === '1' &&
-            !targetDevice.value.standardSwitch
-        )
-            onGetExistingStandardSwitches()
-        if (newSelectedStep !== 7) return // If last step
-        if (wizard.isSelectedScheme(0)) {
-            readyCompleteFields.value = createZeroSchemeReadyCompleteFunc(
-                targetDevice.value,
-                portProperties.value,
-                ipFourSettings.value,
-                localization.value
-            )
-            return
-        }
-
-        if (wizard.isSelectedScheme(1)) {
-            readyCompleteFields.value = createFirstSchemeReadyCompleteFunc(
-                targetDevice.value,
-                portProperties.value,
-                ipFourSettings.value,
-                addedAdapters.value,
-                localization.value
-            )
-            return
-        }
-        if (wizard.isSelectedScheme(2)) {
-            readyCompleteFields.value = createSecondSchemeReadyCompleteFunc(
-                connectionSettings.value,
-                targetDevice.value,
-                localization.value
-            )
-        }
-    }
-)
-
-// Reset data
-const reset = (): void => {
-    wizard.reset()
-    connectionType.value = '0'
-    targetDevice.value = useDeepCopy(targetDeviceInitial)
-    connectionSettings.value = useDeepCopy(connectionSettingsInitial)
-    portProperties.value = useDeepCopy(portPropertiesInitial)
-    ipFourSettings.value = useDeepCopy(ipFourSettingsInitial)
-    addedAdapters.value = []
-    adapterStatus.value = {
-        active: [],
-        standby: [],
-        unused: [],
-    }
-    errorMessages.value = errorMessagesInitial
-}
-
-// Checking network label existing
-const isNetworkInvalid = ref<UI_I_NetworkLabelCheckExisting>()
-
-watch(
-    () => props.isNetworkInvalid,
-    (newValue: UI_I_NetworkLabelCheckExisting) => {
-        isNetworkInvalid.value = newValue
-    },
-    { deep: true, immediate: true }
-)
-
-const isShowNoConnectedActiveAdaptersModal = ref(false)
-const isShowNoActiveAdaptersModal = ref(false)
-
-const showNoConnectedActiveAdaptersModal = (): void => {
-    isShowNoConnectedActiveAdaptersModal.value = true
-}
-const onHideNoConnectedActiveAdaptersModal = (): void => {
-    isShowNoConnectedActiveAdaptersModal.value = false
-}
-const showNoActiveAdaptersModal = (): void => {
-    isShowNoActiveAdaptersModal.value = true
-}
-const onHideNoActiveAdaptersModal = (): void => {
-    isShowNoActiveAdaptersModal.value = false
-}
-
-const onConfirmNoActiveAdaptersModal = (): void => {
-    wizard.selectedStep = wizard.waitingStepId
-    onHideNoConnectedActiveAdaptersModal()
-    onHideNoActiveAdaptersModal()
-}
-
-// Step selection
-const isShowCheckNetworkLabelLoader = ref(false)
-
-const checkNetwork = (networkLabel: string, nextStep?: number): void => {
-    if (networkLabel) {
-        isShowCheckNetworkLabelLoader.value = true
-        networkLabelExistingErrorMessage.value = ''
-        emits(
-            'check-network-label',
-            networkLabel,
-            (error_message: string) => {
-                networkLabelExistingErrorMessage.value = error_message
-
-                if (
-                    error_message === '' &&
-                    errorMessages.value[wizard.selectedStep].length === 0
-                ) {
-                    nextStep ? wizard.goToSelectedStep(nextStep) : wizard.goToNextStep()
-                    return true
-                }
-
-                if (error_message !== '') {
-                    const selectedStepErrorMessages: string[] =
-                        errorMessages.value[wizard.selectedStep]
-
-                    !selectedStepErrorMessages.includes(error_message) &&
-                    selectedStepErrorMessages.push(error_message)
-                }
-                onShowErrorMessageAlert()
-            },
-            () => {
-                isShowCheckNetworkLabelLoader.value = false
-            }
-        )
-    } else {
-        onShowErrorMessageAlert()
-    }
-}
-
-const checkWizard = (nextStep?: number): void => {
-    isShowCheckNetworkLabelLoader.value = true
-
-    if (wizard.isSelectedScheme(0) || wizard.isSelectedScheme(1)) {
-        const vlan = getVlanId(portProperties.value.vlanId)
-
-        const sendData: UI_I_AddNetworkingZeroOrFirstSchemeDataSend =
-            addNetworkingZeroOrFirstSchemeDataFunc(
-                targetDevice.value,
-                Number(vlan),
-                portProperties.value,
-                ipFourSettings.value,
-                wizard.isSelectedScheme(1),
-                adapterStatus.value
-            )
-
-        emits(
-            'add-networking-data-validate',
-            sendData,
-            'vmkernel',
-            hideSendNetworkDataLoader,
-            setValidation,
-            (stop?: boolean) => {
-                if (
-                    !Object.values(error.value).filter(
-                        (errorMessage: string) => errorMessage
-                    ).length &&
-                    !stop
-                ) {
-                    nextStep ? wizard.goToSelectedStep(nextStep) : wizard.goToNextStep()
-                }
-
-                isShowCheckNetworkLabelLoader.value = false
-            }
-        )
-        return
-    }
-
-    if (wizard.isSelectedScheme(2)) {
-        const vlan = getVlanId(connectionSettings.value.vlanId)
-        const sendData: UI_I_AddNetworkingSecondSchemeDataSend =
-            addNetworkingSecondSchemeDataFunc(
-                connectionSettings.value,
-                targetDevice.value,
-                Number(vlan)
-            )
-
-        emits(
-            'add-networking-data-validate',
-            sendData,
-            'network',
-            hideSendNetworkDataLoader,
-            setValidation,
-            (stop?: boolean) => {
-                if (
-                    !Object.values(error.value).filter(
-                        (errorMessage: string) => errorMessage
-                    ).length &&
-                    !stop
-                ) {
-                    nextStep ? wizard.goToSelectedStep(nextStep) : wizard.goToNextStep()
-                }
-
-                isShowCheckNetworkLabelLoader.value = false
-            }
-        )
-    }
-}
-
-const checkBeforeGoToNextStep = (
-    selectedStepIndex: number,
-    nextStep: number
-): boolean => {
-    if (wizard.isBeforeLastStep()) {
-        checkWizard()
-        return false
-    }
-
-    if (
-        wizard.checkNetworkLabelBeforeGoToNextStep(
-            5,
-            connectionSettings.value.networkLabel,
-            isNetworkInvalid.value,
-            checkNetwork
-        )
-    )
-        return false
-
-    if (
-        wizard.checkNetworkLabelBeforeGoToNextStep(
-            3,
-            portProperties.value.networkLabel,
-            isNetworkInvalid.value,
-            checkNetwork
-        )
-    )
-        return false
-
-    if (wizard.isSelectedStep(2)) {
-        if (adapterStatus.value.active.length === 0) {
-            showNoActiveAdaptersModal()
-            wizard.waitingStepId = nextStep
-            return false
-        }
-
-        const activeAndConnectedAdapters = adapterStatus.value.active.filter(
-            (adapterName: string) =>
-                props.freeAdapters.find(
-                    (freeAdapter: UI_I_SwitchAdapterItem) =>
-                        freeAdapter.name === adapterName
-                )?.carrier
-        )
-
-        if (activeAndConnectedAdapters.length === 0) {
-            showNoConnectedActiveAdaptersModal()
-            wizard.waitingStepId = nextStep
-            return false
-        }
-    }
-
-    if (
-        // If a current step has an error, show it and stop navigation on next step
-        errorMessages.value[wizard.selectedStep].length > 0 &&
-        wizard.isUpThenSelectedStep(stepsWithStatus.value[selectedStepIndex + 1].id)
-    ) {
-        onShowErrorMessageAlert()
-        return false
-    }
-    return true
-}
-
-const checkBeforeGoToSelectedStep = (stepId: number): boolean => {
-    if (wizard.isLastStep(stepId)) {
-        checkWizard(stepId)
-        return false
-    }
-
-    if (
-        wizard.isUpThenSelectedStep(stepId) &&
-        errorMessages.value[wizard.selectedStep].length > 0
-    ) {
-        onShowErrorMessageAlert()
-        return false
-    }
-
-    if (
-        wizard.checkNetworkLabelBeforeGoToNewStep(
-            stepId,
-            2,
-            5,
-            connectionSettings.value.networkLabel,
-            isNetworkInvalid.value,
-            checkNetwork
-        )
-    ) {
-        wizard.goToSelectedStep(5)
-        return false
-    }
-
-    if (
-        wizard.checkNetworkLabelBeforeGoToNewStep(
-            stepId,
-            0,
-            3,
-            portProperties.value.networkLabel,
-            isNetworkInvalid.value,
-            checkNetwork
-        )
-    ) {
-        wizard.goToSelectedStep(3)
-        return false
-    }
-
-    if (
-        wizard.checkNetworkLabelBeforeGoToNewStep(
-            stepId,
-            1,
-            3,
-            portProperties.value.networkLabel,
-            isNetworkInvalid.value,
-            checkNetwork
-        )
-    ) {
-        wizard.goToSelectedStep(3)
-        return false
-    }
-
-    if (wizard.isSelectedStep(2) && stepId > 2) {
-        if (adapterStatus.value.active.length === 0) {
-            showNoActiveAdaptersModal()
-            wizard.waitingStepId = stepId
-            return false
-        }
-
-        const activeAndConnectedAdapters = adapterStatus.value.active.filter(
-            (adapterName: string) =>
-                props.freeAdapters.find(
-                    (freeAdapter: UI_I_SwitchAdapterItem) =>
-                        freeAdapter.name === adapterName
-                )?.carrier
-        )
-
-        if (activeAndConnectedAdapters.length === 0) {
-            showNoConnectedActiveAdaptersModal()
-            wizard.waitingStepId = stepId
-            return false
-        }
-    }
-
-    if (
-        // If a current step has an error, show it and stop navigation on next step
-        errorMessages.value[wizard.selectedStep].length > 0 &&
-        wizard.isUpThenSelectedStep(stepId)
-    ) {
-        onShowErrorMessageAlert()
-        return false
-    }
-    return true
-}
-
-watch(
-    connectionSettings,
-    (newValue: UI_I_ConnectionSettings, oldValue: UI_I_ConnectionSettings) => {
-        if (newValue.networkLabel === oldValue.networkLabel) return
-        networkLabelExistingErrorMessage.value = ''
-    },
-    { deep: true }
-)
-
-// Finish network adding and sending data
-const isShowSendNetworkDataLoader = ref(false)
-const hideSendNetworkDataLoader = (): void => {
-    isShowSendNetworkDataLoader.value = false
-}
-
-const setValidation = (err_arg: UI_I_ArbitraryObject<string>): void => {
-    error.value = err_arg
-}
-
-watch(
-    error,
-    (newErr) => {
-        if (!wizard.isBeforeLastStep() && !wizard.isLastStep(7)) return
-
-        if (newErr.switch || newErr.network || newErr['new_switch.mtu']) {
-            wizard.selectedStep = 1
-            return
-        }
-        if (newErr.network_name || newErr['new_network.vlan'] || newErr.mtu) {
-            wizard.selectedStep = 3
-            return
-        }
-        if (
-            newErr['tcp_config.ipv4'] ||
-            newErr['tcp_config.gateway'] ||
-            newErr['tcp_config.net_mask']
-        ) {
-            wizard.selectedStep = 4
-            return
-        }
-        if (newErr.name || newErr.vlan) {
-            wizard.selectedStep = 5
-        }
-    },
-    { deep: true }
-)
-
-const onFinish = async (): Promise<void> => {
-    isShowSendNetworkDataLoader.value = true
-
-    // Finish with the zero and first scheme
-    if (wizard.isSelectedScheme(0) || wizard.isSelectedScheme(1)) {
-        const vlan = getVlanId(portProperties.value.vlanId)
-        const sendData: UI_I_AddNetworkingZeroOrFirstSchemeDataSend =
-            addNetworkingZeroOrFirstSchemeDataFunc(
-                targetDevice.value,
-                Number(vlan),
-                portProperties.value,
-                ipFourSettings.value,
-                wizard.isSelectedScheme(1),
-                adapterStatus.value
-            )
-
-        emits(
-            'send-add-networking-data',
-            sendData,
-            'vmkernel',
-            hideSendNetworkDataLoader,
-            onHideAddNetworkingModal
-        )
-        return
-    }
-
-    // Finish with the second scheme
-    if (wizard.isSelectedScheme(2)) {
-        const vlan = getVlanId(connectionSettings.value.vlanId)
-        const sendData: UI_I_AddNetworkingSecondSchemeDataSend =
-            addNetworkingSecondSchemeDataFunc(
-                connectionSettings.value,
-                targetDevice.value,
-                Number(vlan)
-            )
-
-        emits(
-            'send-add-networking-data',
-            sendData,
-            'network',
-            hideSendNetworkDataLoader,
-            onHideAddNetworkingModal
-        )
-    }
-}
-
-// Trigger getting existing standard switches
-const isShowLoaderGetStandardSwitches = ref(false)
-const hideLoaderGetStandardSwitches = (): void => {
-    isShowLoaderGetStandardSwitches.value = false
-}
-const onGetExistingStandardSwitches = (): void => {
-    isShowLoaderGetStandardSwitches.value = true
-    emits('get-existing-standard-switches', hideLoaderGetStandardSwitches)
-}
-
-onMounted(() => {
-    hostname.value = location.hostname
-})
-
-const isShowGetFreeAdaptersLoader = ref(false)
-
-const hideLoaderGetFreeAdaptersCB = (): void => {
-    isShowGetFreeAdaptersLoader.value = false
-}
-
-const onGetFreeAdapters = (showAddAdapterModal: () => void): void => {
-    isShowGetFreeAdaptersLoader.value = true
-    emits('get-free-adapters', () => {
-        hideLoaderGetFreeAdaptersCB()
-        showAddAdapterModal()
-    })
-}
-
-// Modal hiding
-const emits = defineEmits<{
-    (event: 'hide'): void
-    (
-        event: 'send-add-networking-data',
-        schemeData:
-            | 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: 'get-existing-standard-switches', cb: () => void): void
-    (event: 'get-free-adapters', cb: () => void): void
-    (
-        event: 'check-network-label',
-        networkLabel: string,
-        cb: (error_message: string) => void,
-        hideLoader?: () => void
-    ): void
-}>()
-
-const onSelectStep = (stepId: number): void => {
-    wizard.goToSelectedStep(stepId, checkBeforeGoToSelectedStep)
-}
-
-const onNextStep = (): void => {
-    wizard.goToNextStep(checkBeforeGoToNextStep)
-}
-
-const onHideAddNetworkingModal = (): void => {
-    emits('hide')
-    reset()
-}
-</script>
-
-<style scoped lang="scss">
-:deep(.modal) {
-  & > .modal-dialog > .modal-content > .modal-body {
-    height: calc(100% - 110px);
-    .disabled-on-time {
-      opacity: 0.4;
-      pointer-events: none;
-    }
-  }
-}
-:deep(.disabled-on-time) {
-  opacity: 0.4;
-  pointer-events: none;
-}
-:deep(.wizard-content-container.add-networking-step) {
-  padding: 16px 15px 10px 10px;
-
-  .danger-not-valid {
-    border: 2px solid red;
-    border-bottom: 1px solid #db2100;
-  }
-  .tooltip-field {
-    margin-right: 12px;
-  }
-
-  .horizontal-flex-container {
-    margin-bottom: 5px;
-    min-height: 36px;
-    display: flex;
-    flex-direction: row;
-  }
-  .property-label-group {
-    width: 140px;
-  }
-  .disabled {
-    opacity: 0.4;
-    pointer-events: none;
-  }
-  .wizard-content-port {
-    .margin-left-property-value-group {
-      margin-left: 10px;
-    }
-
-    .property-value-group {
-      padding-left: 23px;
-    }
-    .horizontal-flex-container {
-      min-height: 24px;
-      margin-bottom: 0;
-    }
-    .radio {
-      min-height: 39px;
-      margin: 10px 0;
-    }
-    .form-block {
-      margin: 12px 0 24px 0;
-      padding-left: 23px;
-
-      &.form-block-ipv {
-        input[type='text'] {
-          width: 143px;
-        }
-        .horizontal-flex-container > label {
-          margin-right: 50px;
-        }
-      }
-    }
-    .edit-vmkernel-adapter-section {
-      padding-top: 12px;
-
-      label {
-        input[type='checkbox'] {
-          margin-right: 4px;
-          transform: translateY(1px);
-        }
-      }
-      .horizontal-flex-container {
-        margin-bottom: 5px;
-      }
-    }
-    .port-properties-network-label {
-      width: 280px;
-    }
-    .port-properties-padding {
-      padding-top: 8px;
-    }
-    .port-properties-mtu-selector {
-      margin-right: 12px;
-    }
-    .port-properties-mtu-container {
-      display: flex;
-    }
-    select {
-      height: 24px;
-    }
-  }
-  .nw-property-value-group {
-    display: inline;
-  }
-}
-
-:deep(.modal-body-content.modal-body-content__confirmation) {
-  display: flex;
-  .confirm-icon-container {
-    margin-right: 20px;
-  }
-  .preserve-newlines {
-    white-space: pre-line;
-    font-size: 15px;
-  }
-}
-</style>
+<template>
+    <common-add-networking-wizard
+            :wizard="wizard"
+            :steps-with-status="stepsWithStatus"
+            :width="props.width"
+            :height="props.height"
+            :show="props.show"
+            :title="title"
+            :is-show-loader="isShowLoader"
+            :second-title="secondTitle"
+            @select-step="onSelectStep"
+            @hide="onHideAddNetworkingModal"
+            @next-step="onNextStep"
+            @finish="onFinish"
+    >
+        <template #modalBody>
+            <common-add-networking-steps-select-connection-type
+                    v-if="wizard.isSelectedStep(0)"
+                    :step-id="0"
+                    :title="localization.selectConnectionType"
+                    :text="localization.selectConnectionTypeToCreate"
+                    :connection-type="connectionType"
+                    @change-connection-type="onChangeConnectionType"
+            />
+            <common-add-networking-steps-selected-target-device
+                    v-if="wizard.isSelectedStep(1)"
+                    :step-id="1"
+                    :title="localization.selectTargetDevice"
+                    :text="localization.selectTargetDeviceForNewConnection"
+                    :target-device="targetDevice"
+                    :connection-type="connectionType"
+                    :is-show-error-message-alert="isShowErrorMessageAlert"
+                    :error-messages="errorMessages[1]"
+                    :standard-switches-initial="props.standardSwitchesInitial"
+                    :error="error"
+                    @set-error-empty="onSetErrorFieldEmpty"
+                    @change-error-messages="onChangeErrorMessages"
+                    @hide-error-message-alert="onHideErrorMessageAlert"
+                    @change-target-device="onChangeTargetDevice"
+            />
+            <common-add-networking-steps-create-standard-switch
+                    v-if="wizard.isSelectedStep(2)"
+                    :step-id="2"
+                    :title="localization.createStandardSwitch"
+                    :text="localization.assignFreePhysicalNetworkAdaptersToTheNewSwitch"
+                    :free-adapters="props.freeAdapters"
+                    :added-adapters="addedAdapters"
+                    :adapter-status="adapterStatus"
+                    :adapters="props.adapters"
+                    :is-show-no-connected-active-adapters-modal="
+          isShowNoConnectedActiveAdaptersModal
+        "
+                    :is-show-no-active-adapters-modal="isShowNoActiveAdaptersModal"
+                    @get-free-adapters="onGetFreeAdapters"
+                    @change-added-adapters="onChangeAddedAdapters"
+                    @change-adapter-status="onChangeAdapterStatus"
+                    @confirm-no-active-adapters-modal="onConfirmNoActiveAdaptersModal"
+                    @hide-no-connected-active-adapters-modal="
+          onHideNoConnectedActiveAdaptersModal
+        "
+                    @hide-no-active-adapters-modal="onHideNoActiveAdaptersModal"
+            />
+            <common-add-networking-steps-port-properties
+                    v-if="wizard.isSelectedStep(3)"
+                    :step-id="3"
+                    :title="localization.portProperties"
+                    :text="localization.specifyVMkernelPortSettings"
+                    :port-properties="portProperties"
+                    :is-show-error-message-alert="isShowErrorMessageAlert"
+                    :error-messages="errorMessages[3]"
+                    :network-label-existing-error-message="networkLabelExistingErrorMessage"
+                    :mtu-from-switch="mtuFromSwitch"
+                    :error="error"
+                    @set-error-empty="onSetErrorFieldEmpty"
+                    @change-error-messages="onChangeErrorMessages"
+                    @hide-error-message-alert="onHideErrorMessageAlert"
+                    @change-port-properties="onChangePortProperties"
+            />
+            <common-add-networking-steps-ip-four-settings
+                    v-if="wizard.isSelectedStep(4)"
+                    :step-id="4"
+                    :title="localization.ipV4Settings"
+                    :text="localization.specifyVMkernelIPv4Settings"
+                    :ip-four-settings="ipFourSettings"
+                    :is-show-error-message-alert="isShowErrorMessageAlert"
+                    :error-messages="errorMessages[4]"
+                    :error="error"
+                    @set-error-empty="onSetErrorFieldEmpty"
+                    @change-error-messages="onChangeErrorMessages"
+                    @hide-error-message-alert="onHideErrorMessageAlert"
+                    @change-ip-four-settings="onChangeIpFourSettings"
+            />
+            <common-add-networking-steps-connection-settings
+                    v-if="wizard.isSelectedStep(5)"
+                    :step-id="5"
+                    :title="localization.connectionSettings"
+                    :text="
+          localization.useNetworkLabelsToIdentifyMigrationCompatibleTwoHosts
+        "
+                    :network-label-existing-error-message="networkLabelExistingErrorMessage"
+                    :connection-settings="connectionSettings"
+                    :is-show-error-message-alert="isShowErrorMessageAlert"
+                    :error-messages="errorMessages[5]"
+                    :error="error"
+                    @set-error-empty="onSetErrorFieldEmpty"
+                    @change-error-messages="onChangeErrorMessages"
+                    @hide-error-message-alert="onHideErrorMessageAlert"
+                    @change-connection-settings="onChangeConnectionSettings"
+            />
+            <common-add-networking-steps-physical-adapter
+                    v-if="wizard.isSelectedStep(6)"
+                    :step-id="6"
+                    :title="localization.addPhysicalNetworkAdapter"
+                    :text="localization.assignPhysicalNetworkAdaptersToTheSwitch"
+            />
+            <common-add-networking-steps-ready-complete
+                    v-if="wizard.isSelectedStep(7)"
+                    :step-id="7"
+                    :title="localization.readyComplete"
+                    :text="localization.reviewYourSettingsSelectionsWizard"
+                    :ready-complete-fields="readyCompleteFields"
+            />
+        </template>
+    </common-add-networking-wizard>
+</template>
+
+<script setup lang="ts">
+import { UI_I_ArbitraryObject, UI_I_Localization } from '~/models/interfaces'
+import {
+    createZeroSchemeReadyCompleteFunc,
+    createFirstSchemeReadyCompleteFunc,
+    createSecondSchemeReadyCompleteFunc,
+    stepsSchemeFunc,
+    stepsFunc,
+    secondTitleFunc,
+    addNetworkingSecondSchemeDataFunc,
+    errorMessagesInitialFunc,
+    connectionSettingsInitial,
+    portPropertiesInitial,
+    ipFourSettingsInitial,
+    targetDeviceInitial,
+    isNetworkInvalidInitial,
+} from '~/components/common/addNetworking/config'
+import {
+    UI_I_PortProperties,
+    UI_I_IpFourSettings,
+    UI_I_ConnectionSettings,
+    UI_I_TargetDevice,
+    UI_I_Switch,
+    UI_I_ReadyCompleteFields,
+    UI_I_AddNetworkingSecondSchemeDataSend,
+    UI_I_NetworkLabelCheckExisting,
+    UI_I_AddNetworkingZeroOrFirstSchemeDataSend,
+    UI_I_Step,
+} from '~/components/common/addNetworking/models/interfaces'
+import {
+    UI_I_Adapter,
+    UI_I_AdapterStatus,
+    UI_I_SwitchAdapterItem,
+    UI_I_SwitchAdapters,
+} from '~/components/common/diagramMain/models/interfaces'
+import { Wizard, getVlanId } from '~/components/common/addNetworking/utils'
+import { addNetworkingZeroOrFirstSchemeDataFunc } from '~/components/common/addNetworking/config/sendData'
+
+// Props from up
+const props = withDefaults(
+    defineProps<{
+        modalName: string
+        viewName: string
+        show: boolean
+        width?: string
+        height?: string
+        title?: string
+        standardSwitchesInitial: UI_I_Switch[]
+        isNetworkInvalid?: UI_I_NetworkLabelCheckExisting
+        freeAdapters: UI_I_Adapter[]
+        adapters: UI_I_SwitchAdapters
+    }>(),
+    {
+        isNetworkInvalid: () => isNetworkInvalidInitial,
+        width: '576px',
+        height: '420px',
+        title: '',
+        freeAdapters: () => [],
+        standardSwitchesInitial: () => [],
+    }
+)
+
+// UI_I_Localization
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+// Title
+const hostname = ref<string>('')
+const title = computed<string>(() => `${hostname.value} - ${props.title}`)
+
+// Loader
+const isShowLoader = computed<boolean>(
+    () =>
+        isShowGetFreeAdaptersLoader.value ||
+        isShowCheckNetworkLabelLoader.value ||
+        isShowSendNetworkDataLoader.value ||
+        isShowLoaderGetStandardSwitches.value
+)
+
+/* **************************************
+// STEPS LOGIC***************************
+************************************** */
+
+// Steps
+const wizard: Wizard = new Wizard(
+    stepsSchemeFunc(stepsFunc(localization.value))
+)
+
+const secondTitle = computed<string>(() =>
+    secondTitleFunc(wizard.selectedStep, localization.value)
+)
+
+const stepsWithStatus = computed<UI_I_Step[]>(() => wizard.stepsWithStatus())
+
+// Step's content data and changers (readyCompleteFields)
+const readyCompleteFields = ref<UI_I_ReadyCompleteFields[]>([])
+
+// Step's content data (connectionType)
+const connectionType = ref<string>('0')
+
+const onChangeConnectionType = (newConnectionType: string): void => {
+    wizard.resetStepsUntilX(1)
+    connectionType.value = newConnectionType
+    targetDevice.value.standardSwitch =
+        props.standardSwitchesInitial?.[0]?.name || ''
+}
+
+// Step's content data (createStandardSwitch)
+const addedAdapters = ref<string[]>([])
+
+const onChangeAddedAdapters = (addedAdaptersNew: string[]): void => {
+    addedAdapters.value = addedAdaptersNew
+}
+
+const adapterStatus = ref<UI_I_AdapterStatus>({
+    active: [],
+    standby: [],
+    unused: [],
+})
+const onChangeAdapterStatus = (adapterStatusNew: UI_I_AdapterStatus): void => {
+    adapterStatus.value = adapterStatusNew
+}
+
+// Step's content data and changers (targetDevice)
+const targetDevice = ref<UI_I_TargetDevice>(useDeepCopy(targetDeviceInitial))
+const mtuFromSwitch = ref<number>(1500)
+
+const onChangeTargetDevice = (newTargetDevice: UI_I_TargetDevice): void => {
+    const oldTargetDeviceSelected = useDeepCopy(targetDevice.value).selected
+    const newTargetDeviceSelected = newTargetDevice.selected
+
+    if (oldTargetDeviceSelected !== newTargetDeviceSelected)
+        wizard.resetStepsUntilX(2)
+
+    const selectedSwitch = props.standardSwitchesInitial.find(
+        (sw) => newTargetDevice.standardSwitch === sw.name
+    )
+
+    if (newTargetDeviceSelected === '1' && selectedSwitch) {
+        mtuFromSwitch.value = selectedSwitch?.mtu || 1500
+    }
+    if (newTargetDeviceSelected === '3') {
+        mtuFromSwitch.value = newTargetDevice.mtu || 1500
+    }
+
+    targetDevice.value = useDeepCopy(newTargetDevice)
+}
+
+// Step's content data and changers (portProperties)
+const portProperties = ref<UI_I_PortProperties>(
+    useDeepCopy(portPropertiesInitial)
+)
+const onChangePortProperties = (newFields: UI_I_PortProperties): void => {
+    portProperties.value = newFields
+}
+
+// Step's content data and changers (ipFourSettings)
+const ipFourSettings = ref<UI_I_IpFourSettings>(ipFourSettingsInitial)
+const onChangeIpFourSettings = (newFields: UI_I_IpFourSettings): void => {
+    ipFourSettings.value = newFields
+}
+
+// Step's content data and changers (connectionSettings)
+const connectionSettings = ref<UI_I_ConnectionSettings>(
+    connectionSettingsInitial
+)
+const onChangeConnectionSettings = (
+    newFields: UI_I_ConnectionSettings
+): void => {
+    connectionSettings.value = newFields
+}
+
+const error = ref<UI_I_ArbitraryObject<string>>({})
+
+const onSetErrorFieldEmpty = (fieldName: string): void => {
+    error.value[fieldName] = ''
+}
+
+// Error Messages
+const errorMessagesInitial: string[][] = errorMessagesInitialFunc(8)
+const errorMessages = ref<string[][]>(errorMessagesInitial)
+const isShowErrorMessageAlert = ref<boolean>(false)
+
+const networkLabelExistingErrorMessage = ref<string>('')
+
+const onChangeErrorMessages = (
+    newErrorMessages: string[],
+    stepIndex: number
+): void => {
+    errorMessages.value[stepIndex] = newErrorMessages
+}
+const onShowErrorMessageAlert = (): void => {
+    isShowErrorMessageAlert.value = true
+}
+const onHideErrorMessageAlert = (): void => {
+    isShowErrorMessageAlert.value = false
+}
+
+// Choosing Scheme
+watch(
+    [connectionType, targetDevice],
+    (newValues, oldValue) => {
+        const newCT = newValues[0] // -> newConnectionType
+        const oldCT = oldValue[0] // -> oldConnectionType
+        const newTD = newValues[1] // -> newTargetDevice
+
+        if (newCT !== oldCT) {
+            newCT === '0' && (targetDevice.value.selected = '1')
+            newCT === '1' && (targetDevice.value.selected = '1')
+            newCT === '2' && (targetDevice.value.selected = '2')
+        }
+        if (newCT === '0') {
+            ;(newTD.selected === '0' || newTD.selected === '1') &&
+            (wizard.selectedScheme = 0)
+            newTD.selected === '3' && (wizard.selectedScheme = 1)
+        }
+        if (newCT === '1') {
+            newTD.selected === '1' && (wizard.selectedScheme = 2)
+            newTD.selected === '3' && (wizard.selectedScheme = 3)
+        }
+        if (newCT === '2') {
+            newTD.selected === '2' && (wizard.selectedScheme = 4)
+            newTD.selected === '3' && (wizard.selectedScheme = 5)
+        }
+    },
+    { deep: true, immediate: true }
+)
+
+// Ready complete
+watch(
+    () => wizard.selectedStep,
+    (newSelectedStep: number) => {
+        if (
+            newSelectedStep === 1 &&
+            targetDevice.value.selected === '1' &&
+            !targetDevice.value.standardSwitch
+        )
+            onGetExistingStandardSwitches()
+        if (newSelectedStep !== 7) return // If last step
+        if (wizard.isSelectedScheme(0)) {
+            readyCompleteFields.value = createZeroSchemeReadyCompleteFunc(
+                targetDevice.value,
+                portProperties.value,
+                ipFourSettings.value,
+                localization.value
+            )
+            return
+        }
+
+        if (wizard.isSelectedScheme(1)) {
+            readyCompleteFields.value = createFirstSchemeReadyCompleteFunc(
+                targetDevice.value,
+                portProperties.value,
+                ipFourSettings.value,
+                addedAdapters.value,
+                localization.value
+            )
+            return
+        }
+        if (wizard.isSelectedScheme(2)) {
+            readyCompleteFields.value = createSecondSchemeReadyCompleteFunc(
+                connectionSettings.value,
+                targetDevice.value,
+                localization.value
+            )
+        }
+    }
+)
+
+// Reset data
+const reset = (): void => {
+    wizard.reset()
+    connectionType.value = '0'
+    targetDevice.value = useDeepCopy(targetDeviceInitial)
+    connectionSettings.value = useDeepCopy(connectionSettingsInitial)
+    portProperties.value = useDeepCopy(portPropertiesInitial)
+    ipFourSettings.value = useDeepCopy(ipFourSettingsInitial)
+    addedAdapters.value = []
+    adapterStatus.value = {
+        active: [],
+        standby: [],
+        unused: [],
+    }
+    errorMessages.value = errorMessagesInitial
+}
+
+// Checking network label existing
+const isNetworkInvalid = ref<UI_I_NetworkLabelCheckExisting>()
+
+watch(
+    () => props.isNetworkInvalid,
+    (newValue: UI_I_NetworkLabelCheckExisting) => {
+        isNetworkInvalid.value = newValue
+    },
+    { deep: true, immediate: true }
+)
+
+const isShowNoConnectedActiveAdaptersModal = ref(false)
+const isShowNoActiveAdaptersModal = ref(false)
+
+const showNoConnectedActiveAdaptersModal = (): void => {
+    isShowNoConnectedActiveAdaptersModal.value = true
+}
+const onHideNoConnectedActiveAdaptersModal = (): void => {
+    isShowNoConnectedActiveAdaptersModal.value = false
+}
+const showNoActiveAdaptersModal = (): void => {
+    isShowNoActiveAdaptersModal.value = true
+}
+const onHideNoActiveAdaptersModal = (): void => {
+    isShowNoActiveAdaptersModal.value = false
+}
+
+const onConfirmNoActiveAdaptersModal = (): void => {
+    wizard.selectedStep = wizard.waitingStepId
+    onHideNoConnectedActiveAdaptersModal()
+    onHideNoActiveAdaptersModal()
+}
+
+// Step selection
+const isShowCheckNetworkLabelLoader = ref(false)
+
+const checkNetwork = (networkLabel: string, nextStep?: number): void => {
+    if (networkLabel) {
+        isShowCheckNetworkLabelLoader.value = true
+        networkLabelExistingErrorMessage.value = ''
+        emits(
+            'check-network-label',
+            networkLabel,
+            (error_message: string) => {
+                networkLabelExistingErrorMessage.value = error_message
+
+                if (
+                    error_message === '' &&
+                    errorMessages.value[wizard.selectedStep].length === 0
+                ) {
+                    nextStep ? wizard.goToSelectedStep(nextStep) : wizard.goToNextStep()
+                    return true
+                }
+
+                if (error_message !== '') {
+                    const selectedStepErrorMessages: string[] =
+                        errorMessages.value[wizard.selectedStep]
+
+                    !selectedStepErrorMessages.includes(error_message) &&
+                    selectedStepErrorMessages.push(error_message)
+                }
+                onShowErrorMessageAlert()
+            },
+            () => {
+                isShowCheckNetworkLabelLoader.value = false
+            }
+        )
+    } else {
+        onShowErrorMessageAlert()
+    }
+}
+
+const checkWizard = (nextStep?: number): void => {
+    isShowCheckNetworkLabelLoader.value = true
+
+    if (wizard.isSelectedScheme(0) || wizard.isSelectedScheme(1)) {
+        const vlan = getVlanId(portProperties.value.vlanId)
+
+        const sendData: UI_I_AddNetworkingZeroOrFirstSchemeDataSend =
+            addNetworkingZeroOrFirstSchemeDataFunc(
+                targetDevice.value,
+                Number(vlan),
+                portProperties.value,
+                ipFourSettings.value,
+                wizard.isSelectedScheme(1),
+                adapterStatus.value
+            )
+
+        emits(
+            'add-networking-data-validate',
+            sendData,
+            'vmkernel',
+            hideSendNetworkDataLoader,
+            setValidation,
+            (stop?: boolean) => {
+                if (
+                    !Object.values(error.value).filter(
+                        (errorMessage: string) => errorMessage
+                    ).length &&
+                    !stop
+                ) {
+                    nextStep ? wizard.goToSelectedStep(nextStep) : wizard.goToNextStep()
+                }
+
+                isShowCheckNetworkLabelLoader.value = false
+            }
+        )
+        return
+    }
+
+    if (wizard.isSelectedScheme(2)) {
+        const vlan = getVlanId(connectionSettings.value.vlanId)
+        const sendData: UI_I_AddNetworkingSecondSchemeDataSend =
+            addNetworkingSecondSchemeDataFunc(
+                connectionSettings.value,
+                targetDevice.value,
+                Number(vlan)
+            )
+
+        emits(
+            'add-networking-data-validate',
+            sendData,
+            'network',
+            hideSendNetworkDataLoader,
+            setValidation,
+            (stop?: boolean) => {
+                if (
+                    !Object.values(error.value).filter(
+                        (errorMessage: string) => errorMessage
+                    ).length &&
+                    !stop
+                ) {
+                    nextStep ? wizard.goToSelectedStep(nextStep) : wizard.goToNextStep()
+                }
+
+                isShowCheckNetworkLabelLoader.value = false
+            }
+        )
+    }
+}
+
+const checkBeforeGoToNextStep = (
+    selectedStepIndex: number,
+    nextStep: number
+): boolean => {
+    if (wizard.isBeforeLastStep()) {
+        checkWizard()
+        return false
+    }
+
+    if (
+        wizard.checkNetworkLabelBeforeGoToNextStep(
+            5,
+            connectionSettings.value.networkLabel,
+            isNetworkInvalid.value,
+            checkNetwork
+        )
+    )
+        return false
+
+    if (
+        wizard.checkNetworkLabelBeforeGoToNextStep(
+            3,
+            portProperties.value.networkLabel,
+            isNetworkInvalid.value,
+            checkNetwork
+        )
+    )
+        return false
+
+    if (wizard.isSelectedStep(2)) {
+        if (adapterStatus.value.active.length === 0) {
+            showNoActiveAdaptersModal()
+            wizard.waitingStepId = nextStep
+            return false
+        }
+
+        const activeAndConnectedAdapters = adapterStatus.value.active.filter(
+            (adapterName: string) =>
+                props.freeAdapters.find(
+                    (freeAdapter: UI_I_SwitchAdapterItem) =>
+                        freeAdapter.name === adapterName
+                )?.carrier
+        )
+
+        if (activeAndConnectedAdapters.length === 0) {
+            showNoConnectedActiveAdaptersModal()
+            wizard.waitingStepId = nextStep
+            return false
+        }
+    }
+
+    if (
+        // If a current step has an error, show it and stop navigation on next step
+        errorMessages.value[wizard.selectedStep].length > 0 &&
+        wizard.isUpThenSelectedStep(stepsWithStatus.value[selectedStepIndex + 1].id)
+    ) {
+        onShowErrorMessageAlert()
+        return false
+    }
+    return true
+}
+
+const checkBeforeGoToSelectedStep = (stepId: number): boolean => {
+    if (wizard.isLastStep(stepId)) {
+        checkWizard(stepId)
+        return false
+    }
+
+    if (
+        wizard.isUpThenSelectedStep(stepId) &&
+        errorMessages.value[wizard.selectedStep].length > 0
+    ) {
+        onShowErrorMessageAlert()
+        return false
+    }
+
+    if (
+        wizard.checkNetworkLabelBeforeGoToNewStep(
+            stepId,
+            2,
+            5,
+            connectionSettings.value.networkLabel,
+            isNetworkInvalid.value,
+            checkNetwork
+        )
+    ) {
+        wizard.goToSelectedStep(5)
+        return false
+    }
+
+    if (
+        wizard.checkNetworkLabelBeforeGoToNewStep(
+            stepId,
+            0,
+            3,
+            portProperties.value.networkLabel,
+            isNetworkInvalid.value,
+            checkNetwork
+        )
+    ) {
+        wizard.goToSelectedStep(3)
+        return false
+    }
+
+    if (
+        wizard.checkNetworkLabelBeforeGoToNewStep(
+            stepId,
+            1,
+            3,
+            portProperties.value.networkLabel,
+            isNetworkInvalid.value,
+            checkNetwork
+        )
+    ) {
+        wizard.goToSelectedStep(3)
+        return false
+    }
+
+    if (wizard.isSelectedStep(2) && stepId > 2) {
+        if (adapterStatus.value.active.length === 0) {
+            showNoActiveAdaptersModal()
+            wizard.waitingStepId = stepId
+            return false
+        }
+
+        const activeAndConnectedAdapters = adapterStatus.value.active.filter(
+            (adapterName: string) =>
+                props.freeAdapters.find(
+                    (freeAdapter: UI_I_SwitchAdapterItem) =>
+                        freeAdapter.name === adapterName
+                )?.carrier
+        )
+
+        if (activeAndConnectedAdapters.length === 0) {
+            showNoConnectedActiveAdaptersModal()
+            wizard.waitingStepId = stepId
+            return false
+        }
+    }
+
+    if (
+        // If a current step has an error, show it and stop navigation on next step
+        errorMessages.value[wizard.selectedStep].length > 0 &&
+        wizard.isUpThenSelectedStep(stepId)
+    ) {
+        onShowErrorMessageAlert()
+        return false
+    }
+    return true
+}
+
+watch(
+    connectionSettings,
+    (newValue: UI_I_ConnectionSettings, oldValue: UI_I_ConnectionSettings) => {
+        if (newValue.networkLabel === oldValue.networkLabel) return
+        networkLabelExistingErrorMessage.value = ''
+    },
+    { deep: true }
+)
+
+// Finish network adding and sending data
+const isShowSendNetworkDataLoader = ref(false)
+const hideSendNetworkDataLoader = (): void => {
+    isShowSendNetworkDataLoader.value = false
+}
+
+const setValidation = (err_arg: UI_I_ArbitraryObject<string>): void => {
+    error.value = err_arg
+}
+
+watch(
+    error,
+    (newErr) => {
+        if (!wizard.isBeforeLastStep() && !wizard.isLastStep(7)) return
+
+        if (newErr.switch || newErr.network || newErr['new_switch.mtu']) {
+            wizard.selectedStep = 1
+            return
+        }
+        if (newErr.network_name || newErr['new_network.vlan'] || newErr.mtu) {
+            wizard.selectedStep = 3
+            return
+        }
+        if (
+            newErr['tcp_config.ipv4'] ||
+            newErr['tcp_config.gateway'] ||
+            newErr['tcp_config.net_mask']
+        ) {
+            wizard.selectedStep = 4
+            return
+        }
+        if (newErr.name || newErr.vlan) {
+            wizard.selectedStep = 5
+        }
+    },
+    { deep: true }
+)
+
+const onFinish = async (): Promise<void> => {
+    isShowSendNetworkDataLoader.value = true
+
+    // Finish with the zero and first scheme
+    if (wizard.isSelectedScheme(0) || wizard.isSelectedScheme(1)) {
+        const vlan = getVlanId(portProperties.value.vlanId)
+        const sendData: UI_I_AddNetworkingZeroOrFirstSchemeDataSend =
+            addNetworkingZeroOrFirstSchemeDataFunc(
+                targetDevice.value,
+                Number(vlan),
+                portProperties.value,
+                ipFourSettings.value,
+                wizard.isSelectedScheme(1),
+                adapterStatus.value
+            )
+
+        emits(
+            'send-add-networking-data',
+            sendData,
+            'vmkernel',
+            hideSendNetworkDataLoader,
+            onHideAddNetworkingModal
+        )
+        return
+    }
+
+    // Finish with the second scheme
+    if (wizard.isSelectedScheme(2)) {
+        const vlan = getVlanId(connectionSettings.value.vlanId)
+        const sendData: UI_I_AddNetworkingSecondSchemeDataSend =
+            addNetworkingSecondSchemeDataFunc(
+                connectionSettings.value,
+                targetDevice.value,
+                Number(vlan)
+            )
+
+        emits(
+            'send-add-networking-data',
+            sendData,
+            'network',
+            hideSendNetworkDataLoader,
+            onHideAddNetworkingModal
+        )
+    }
+}
+
+// Trigger getting existing standard switches
+const isShowLoaderGetStandardSwitches = ref(false)
+const hideLoaderGetStandardSwitches = (): void => {
+    isShowLoaderGetStandardSwitches.value = false
+}
+const onGetExistingStandardSwitches = (): void => {
+    isShowLoaderGetStandardSwitches.value = true
+    emits('get-existing-standard-switches', hideLoaderGetStandardSwitches)
+}
+
+onMounted(() => {
+    hostname.value = location.hostname
+})
+
+const isShowGetFreeAdaptersLoader = ref(false)
+
+const hideLoaderGetFreeAdaptersCB = (): void => {
+    isShowGetFreeAdaptersLoader.value = false
+}
+
+const onGetFreeAdapters = (showAddAdapterModal: () => void): void => {
+    isShowGetFreeAdaptersLoader.value = true
+    emits('get-free-adapters', () => {
+        hideLoaderGetFreeAdaptersCB()
+        showAddAdapterModal()
+    })
+}
+
+// Modal hiding
+const emits = defineEmits<{
+    (event: 'hide'): void
+    (
+        event: 'send-add-networking-data',
+        schemeData:
+            | 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: 'get-existing-standard-switches', cb: () => void): void
+    (event: 'get-free-adapters', cb: () => void): void
+    (
+        event: 'check-network-label',
+        networkLabel: string,
+        cb: (error_message: string) => void,
+        hideLoader?: () => void
+    ): void
+}>()
+
+const onSelectStep = (stepId: number): void => {
+    wizard.goToSelectedStep(stepId, checkBeforeGoToSelectedStep)
+}
+
+const onNextStep = (): void => {
+    wizard.goToNextStep(checkBeforeGoToNextStep)
+}
+
+const onHideAddNetworkingModal = (): void => {
+    emits('hide')
+    reset()
+}
+</script>
+
+<style scoped lang="scss">
+:deep(.modal) {
+  & > .modal-dialog > .modal-content > .modal-body {
+    height: calc(100% - 110px);
+    .disabled-on-time {
+      opacity: 0.4;
+      pointer-events: none;
+    }
+  }
+}
+:deep(.disabled-on-time) {
+  opacity: 0.4;
+  pointer-events: none;
+}
+:deep(.wizard-content-container.add-networking-step) {
+  padding: 16px 15px 10px 10px;
+
+  .danger-not-valid {
+    border: 2px solid red;
+    border-bottom: 1px solid #db2100;
+  }
+  .tooltip-field {
+    margin-right: 12px;
+  }
+
+  .horizontal-flex-container {
+    margin-bottom: 5px;
+    min-height: 36px;
+    display: flex;
+    flex-direction: row;
+  }
+  .property-label-group {
+    width: 140px;
+  }
+  .disabled {
+    opacity: 0.4;
+    pointer-events: none;
+  }
+  .wizard-content-port {
+    .margin-left-property-value-group {
+      margin-left: 10px;
+    }
+
+    .property-value-group {
+      padding-left: 23px;
+    }
+    .horizontal-flex-container {
+      min-height: 24px;
+      margin-bottom: 0;
+    }
+    .radio {
+      min-height: 39px;
+      margin: 10px 0;
+    }
+    .form-block {
+      margin: 12px 0 24px 0;
+      padding-left: 23px;
+
+      &.form-block-ipv {
+        input[type='text'] {
+          width: 143px;
+        }
+        .horizontal-flex-container > label {
+          margin-right: 50px;
+        }
+      }
+    }
+    .edit-vmkernel-adapter-section {
+      padding-top: 12px;
+
+      label {
+        input[type='checkbox'] {
+          margin-right: 4px;
+          transform: translateY(1px);
+        }
+      }
+      .horizontal-flex-container {
+        margin-bottom: 5px;
+      }
+    }
+    .port-properties-network-label {
+      width: 280px;
+    }
+    .port-properties-padding {
+      padding-top: 8px;
+    }
+    .port-properties-mtu-selector {
+      margin-right: 12px;
+    }
+    .port-properties-mtu-container {
+      display: flex;
+    }
+    select {
+      height: 24px;
+    }
+  }
+  .nw-property-value-group {
+    display: inline;
+  }
+}
+
+:deep(.modal-body-content.modal-body-content__confirmation) {
+  display: flex;
+  .confirm-icon-container {
+    margin-right: 20px;
+  }
+  .preserve-newlines {
+    white-space: pre-line;
+    font-size: 15px;
+  }
+}
+</style>