bfg-common 1.2.186 → 1.2.187

package/components/common/addNetworking/AddNetworking.vue

@@ -1,1123 +0,0 @@
-<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"
-    :class="[
-      'add-networking-wizard',
-      {
-        'is-dark': props.isDarkMode,
-      },
-    ]"
-    @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"
-        :project="props.project"
-        @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 { UI_T_Project } from '~/models/types'
-import {
-  createZeroSchemeReadyCompleteFunc,
-  createFirstSchemeReadyCompleteFunc,
-  createSecondSchemeReadyCompleteFunc,
-  createThirdSchemeReadyCompleteFunc,
-  stepsSchemeFunc,
-  stepsFunc,
-  secondTitleFunc,
-  errorMessagesInitialFunc,
-  connectionSettingsInitial,
-  portPropertiesInitial,
-  ipFourSettingsInitial,
-  targetDeviceInitial,
-  isNetworkInvalidInitial,
-  addNetworkingZeroOrFirstSchemeDataFunc,
-  addNetworkingSecondOrThirdSchemeDataFunc,
-} 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_NetworkLabelCheckExisting,
-  UI_I_AddNetworkingZeroOrFirstSchemeDataSend,
-  UI_I_AddNetworkingSecondOrThirdSchemeDataSend,
-  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'
-
-// 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
-    project?: UI_T_Project
-    isDarkMode: boolean
-  }>(),
-  {
-    isNetworkInvalid: () => isNetworkInvalidInitial,
-    width: '576px',
-    height: '420px',
-    title: '',
-    freeAdapters: () => [],
-    standardSwitchesInitial: () => [],
-    project: 'procurator',
-  }
-)
-
-// 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
-      )
-      return
-    }
-    if (wizard.isSelectedScheme(3)) {
-      readyCompleteFields.value = createThirdSchemeReadyCompleteFunc(
-        connectionSettings.value,
-        targetDevice.value,
-        addedAdapters.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) || wizard.isSelectedScheme(3)) {
-    const vlan = getVlanId(connectionSettings.value.vlanId)
-    const sendData: UI_I_AddNetworkingSecondOrThirdSchemeDataSend =
-      addNetworkingSecondOrThirdSchemeDataFunc(
-        connectionSettings.value,
-        targetDevice.value,
-        Number(vlan),
-        wizard.isSelectedScheme(2),
-        adapterStatus.value
-      )
-
-    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) || wizard.isSelectedScheme(3)) {
-    const vlan = getVlanId(connectionSettings.value.vlanId)
-    const sendData: UI_I_AddNetworkingSecondOrThirdSchemeDataSend =
-      addNetworkingSecondOrThirdSchemeDataFunc(
-        connectionSettings.value,
-        targetDevice.value,
-        Number(vlan),
-        wizard.isSelectedScheme(2),
-        adapterStatus.value
-      )
-
-    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_AddNetworkingSecondOrThirdSchemeDataSend
-      | UI_I_AddNetworkingZeroOrFirstSchemeDataSend,
-    type: string,
-    hideSendNetworkDataLoader: () => void,
-    onHideAddNetworkingModal: () => void
-  ): void
-  (
-    event: 'add-networking-data-validate',
-    networkData:
-      | UI_I_AddNetworkingSecondOrThirdSchemeDataSend
-      | 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;
-  }
-}
-
-.add-networking-wizard.is-dark {
-  :deep(.wizard-content-container.add-networking-step) {
-    .ready-complete-container {
-      background-color: var(--pannel-bg-color);
-      margin-top: 12px;
-
-      span {
-        color: var(--description-color);
-      }
-    }
-
-    .add-networking-radio-button-description {
-      color: var(--description-color);
-    }
-
-    .property-label-group {
-      color: var(--main-color-mode2);
-    }
-    .flex-property-label-group {
-      color: var(--main-color-mode2);
-    }
-    .flex-property-value-group {
-      select {
-        color: #fff;
-      }
-    }
-    .failover-order-master {
-      .secondary-title label {
-        color: #fff;
-      }
-    }
-    .k-grid-content {
-      background-color: var(--modal-bg-color);
-    }
-    .vui-action-bar {
-      background-color: var(--pannel-bg-color);
-      color: var(--title-color);
-      padding: 8px 0 3px;
-
-      .action-link-container:not(.disabled) {
-        &:hover {
-          background-color: #29414e;
-          border: 1px solid #c7e9ff;
-        }
-      }
-
-      svg {
-        fill: #fff;
-      }
-    }
-
-    .k-grid.k-widget .k-grid-content {
-      border-left: 1px solid #485764;
-      border-right: 1px solid #485764;
-      border-top: 1px solid #ddd;
-      border-bottom: 1px solid #ddd;
-
-      tbody tr {
-        background-color: var(--modal-bg-color);
-
-        td {
-          border-bottom: 1px solid #666666;
-          border-color: #666666;
-        }
-
-        &:hover {
-          background-color: #324f61;
-          color: var(--title-color);
-
-          td {
-            border-bottom: 1px solid #ffffff;
-          }
-        }
-
-        &.k-state-selected {
-          background-color: #d8e3e9;
-          box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
-
-          td span {
-            color: #000;
-          }
-        }
-      }
-    }
-
-    .failover-order-details {
-      &.relative-container .absolute-container {
-        background-color: var(--pannel-bg-color);
-        color: var(--main-color-mode2);
-
-        &:has(.no-items-selected-container) {
-          background-color: transparent;
-        }
-      }
-
-      td span {
-        color: var(--main-color-mode2);
-      }
-      button span {
-        color: var(--main-color-mode2);
-
-        &:hover:not(.disabled) {
-          background-color: transparent;
-        }
-      }
-      button.active span {
-        color: #fff;
-      }
-    }
-  }
-
-  .select-adapter-info span {
-    color: var(--main-color-mode2);
-  }
-}
-</style>