bfg-common 1.4.579 → 1.4.580

package/components/common/diagramMain/modals/migrateVmkernelAdapter/MigrateVmkernelAdapter.vue

@@ -1,537 +1,537 @@
-<template>
-  <atoms-wizard
-    v-model:show="props.show"
-    :wizard="wizard"
-    :selected-scheme="selectedScheme"
-    :title="title"
-    :localization="localization"
-    :class="[
-      'migrate-vm-kernel-modal',
-      {
-        'is-dark': props.isDarkMode,
-      },
-    ]"
-    @change-steps="onChangeSteps"
-    @hide="onHide"
-    @submit="onSubmit"
-  >
-    <template #modalBody="{ selectedStep }">
-      <common-diagram-main-modals-migrate-vmkernel-adapter-steps-select-vmkernel-adapter
-        v-if="selectedStep.id === 0"
-        :vmkernel-adapter="vmkernelAdapter"
-        :table-data="filteredNetworksList"
-        :alert-messages="alertMessages[0]"
-        @hide-alert="onHideAlert"
-        @change-vmkernel-adapter="onChangeMigrateVmkernelAdapter"
-      />
-      <common-diagram-main-modals-migrate-vmkernel-adapter-steps-connection-settings
-        v-if="selectedStep.id === 1"
-        :connection-settings="connectionSettings"
-        :messages-fields="selectedStep.fields"
-        :alert-messages="alertMessages[1]"
-        :wizard="wizard"
-        @hide-alert="onHideAlert"
-        @change-connection-settings="onChangeConnectionSettings"
-      />
-      <common-diagram-main-modals-migrate-vmkernel-adapter-steps-vmkernel-adapter-ready-complete
-        v-if="selectedStep.id === 2"
-        :data="readyCompleteData"
-      />
-    </template>
-  </atoms-wizard>
-</template>
-
-<script setup lang="ts">
-import type { UI_I_Localization } from '~/lib/models/interfaces'
-import type {
-  UI_I_Network,
-  UI_I_VmkernelAdapterTableData,
-} from '~/components/common/diagramMain/lib/models/interfaces'
-import type {
-  UI_I_ConnectionSettings,
-  UI_I_SelectVmkernelAdapter,
-} from '~/components/common/wizards/network/add/lib/models/interfaces'
-import type {
-  UI_I_WizardStep,
-  UI_I_ValidationReturn,
-} from '~/components/atoms/wizard/lib/models/interfaces'
-import type {
-  UI_I_MigrateVmkernelAdapterEmits,
-  UI_I_MigrationVmkernelAdapterReadyComplete,
-} from '~/components/common/diagramMain/lib/models/interfaces'
-import { UI_E_MigrationValidationFields } from '~/components/common/diagramMain/lib/models/enums'
-import {
-  stepsFunc,
-  stepsSchemeInitial,
-} from '~/components/common/diagramMain/modals/migrateVmkernelAdapter/lib/config/steps'
-import {
-  checkNetworkAsync,
-  checkConnectionSettingsSync,
-  checkSelectedVmSync,
-} from '~/components/common/diagramMain/modals/migrateVmkernelAdapter/validations/validations'
-import Wizard from '~/components/atoms/wizard/lib/utils/utils'
-import { readyCompleteInitial } from '~/components/common/diagramMain/modals/migrateVmkernelAdapter/lib/config/steps'
-
-const props = withDefaults(
-  defineProps<{
-    show: boolean
-    switchName?: string
-    networksList?: UI_I_Network[]
-    switchNetworks?: UI_I_Network[]
-    isDarkMode: boolean
-    isMigrateAdapterLoading?: boolean
-  }>(),
-  {
-    switchName: '',
-    networksList: () => [],
-    switchNetworks: () => [],
-    isMigrateAdapterLoading: false,
-  }
-)
-
-const emits = defineEmits<UI_I_MigrateVmkernelAdapterEmits>()
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-const wizard: Wizard = new Wizard(
-  stepsFunc(localization.value),
-  stepsSchemeInitial
-)
-const selectedScheme = computed<number[]>(() => wizard.selectedScheme.value)
-const alertMessages = computed<string[][]>(() => wizard.alertMessages.value)
-
-const hostname = ref<string>('')
-const title = computed<string>(
-  () =>
-    `${hostname.value} - ${localization.value.common.migrateVmKernelNetworkAdapterTo} ${props.switchName}`
-)
-
-const connectionSettings = ref<UI_I_ConnectionSettings>({
-  networkLabel: 'VM Network',
-  vlanId: 'None (0)',
-})
-
-const vmkernelAdapter = ref<UI_I_SelectVmkernelAdapter>({
-  vm: '',
-})
-
-const readyCompleteData =
-  ref<UI_I_MigrationVmkernelAdapterReadyComplete>(readyCompleteInitial)
-
-const validationFunc = async (
-  value: UI_I_WizardStep[],
-  currentStep: UI_I_WizardStep,
-  nextStep: UI_I_WizardStep
-): Promise<UI_I_ValidationReturn> => {
-  let stepHasError = false
-
-  if (wizard.isValidateForStep(0, currentStep.id, nextStep.id)) {
-    const selectVmkernelAdapterValidation = checkSelectedVmSync(
-      localization.value,
-      vmkernelAdapter.value,
-      wizard,
-      value
-    )
-
-    value = selectVmkernelAdapterValidation.newValue
-
-    stepHasError = stepHasError || selectVmkernelAdapterValidation.stepHasError
-  }
-
-  if (wizard.isValidateForStep(1, currentStep.id, nextStep.id)) {
-    const labelValidation = await checkNetworkAsync(
-      value,
-      connectionSettings.value.networkLabel,
-      1,
-      UI_E_MigrationValidationFields.CONNECTION_SETTINGS_NETWORK,
-      emits,
-      localization.value,
-      wizard
-    )
-
-    value = labelValidation.newValue
-
-    const connectionSettingsValidation = checkConnectionSettingsSync(
-      localization.value,
-      connectionSettings.value,
-      wizard,
-      value
-    )
-
-    value = connectionSettingsValidation.newValue
-
-    stepHasError =
-      stepHasError ||
-      labelValidation.stepHasError ||
-      connectionSettingsValidation.stepHasError
-  }
-
-  return {
-    newValue: value,
-    stepHasError,
-  }
-}
-
-const finalValidationFunc = async (
-  value: UI_I_WizardStep[]
-): Promise<UI_I_ValidationReturn> => {
-  let stepHasError = false
-
-  // wizard.setLoader(true)
-
-  // wizard.setLoader(false)
-  return {
-    stepHasError,
-    newValue: value,
-  }
-}
-
-const onChangeSteps = async (value: UI_I_WizardStep[]): Promise<void> =>
-  wizard.changeSteps(value, validationFunc, finalValidationFunc)
-
-const filteredNetworksList = ref<UI_I_VmkernelAdapterTableData[]>([])
-
-watch(
-  () => wizard.selectedStepId,
-  (newSelectedStepId: number) => {
-    if (newSelectedStepId !== 2) return
-
-    const from = filteredNetworksList.value.find(
-      (network) => network.name === vmkernelAdapter.value.vm
-    )
-
-    readyCompleteData.value = {
-      vm: vmkernelAdapter.value.vm,
-      currentSettings: {
-        switch: from?.switch || '',
-        network: from?.networkLabel || '',
-      },
-      newSettings: {
-        switch: props.switchName,
-        network: connectionSettings.value.networkLabel,
-      },
-      vlanId: connectionSettings.value.vlanId,
-    }
-  }
-)
-
-watch(
-  () => props.switchNetworks,
-  (netsOnSwitch: UI_I_Network[]) => {
-    const vmKernelNetworksIdOnSwitch = netsOnSwitch
-      .filter((net: UI_I_Network) => net.networkType === '1')
-      .map((net: UI_I_Network) => net.id)
-
-    filteredNetworksList.value = props.networksList
-      .filter(
-        (net: UI_I_Network) =>
-          net.networkType === '1' &&
-          !vmKernelNetworksIdOnSwitch.includes(net.id)
-      )
-      .map((net: UI_I_Network, index: number) => ({
-        name: net.sysx?.id || '',
-        networkLabel: net.title,
-        switch: net.switchName || '',
-        ipAddress: net.sysx?.ipv4_settings.ipv4 || '--',
-        tcp: net.sysx?.tcp_stack
-          ? localization.value[net.sysx?.tcp_stack]
-          : '--',
-        id: `${net.sysx?.id || ''}-${index}`,
-      }))
-  },
-  { deep: true, immediate: true }
-)
-
-const onChangeConnectionSettings = (
-  newFields: UI_I_ConnectionSettings
-): void => {
-  connectionSettings.value = newFields
-}
-
-const onChangeMigrateVmkernelAdapter = (
-  newFields: UI_I_SelectVmkernelAdapter
-): void => {
-  vmkernelAdapter.value = newFields
-}
-
-const reset = (): void => {
-  wizard.reset()
-  connectionSettings.value = {
-    networkLabel: 'VM Network',
-    vlanId: 'None (0)',
-  }
-  vmkernelAdapter.value = {
-    vm: '',
-  }
-}
-
-const onHideAlert = (stepId: number): void => {
-  wizard.hideAlertMessagesByStepId(stepId)
-}
-
-const onHide = (): void => {
-  emits('hide')
-  reset()
-}
-
-const onSubmit = (): void => {
-  onHide()
-}
-
-watch(
-  () => props.isMigrateAdapterLoading,
-  (newValue: boolean) => {
-    wizard.setLoader(newValue)
-  },
-  { immediate: true }
-)
-
-onMounted(() => {
-  hostname.value = location.hostname
-})
-</script>
-
-<style scoped lang="scss">
-.main-step-container {
-  display: flex;
-}
-
-:deep(.modal) {
-  & > .modal-dialog > .modal-content > .modal-body {
-    height: calc(100% - 110px);
-  }
-}
-.step-items-container {
-  width: 230px;
-  padding: 10px 5px 10px 6px;
-  li {
-    display: flex;
-    margin: 0;
-    height: 24.8px;
-    span {
-      width: 16px;
-    }
-  }
-
-  .step-item {
-    margin: 0;
-    height: 24.8px;
-    padding-left: 5px;
-    // 0-Disabled
-    &.status-0 {
-      height: 24.8px;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      border-bottom: 1px solid transparent;
-      width: 189px;
-      line-height: 24px;
-      display: inline-block;
-      text-decoration: none;
-      font-weight: 700;
-      color: #999;
-      cursor: default;
-    }
-    // 1-Selected
-    &.status-1 {
-      background-color: #29414e;
-      color: #ffffff;
-      border-bottom: 1px solid transparent;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      border-radius: 5px;
-      cursor: default;
-      width: 189px;
-      line-height: 24px;
-      display: inline-block;
-      text-decoration: none;
-      font-weight: 700;
-    }
-    // 2-Active
-    &.status-2 {
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      border-bottom: 1px solid transparent;
-      width: 189px;
-      line-height: 24px;
-      cursor: pointer;
-      display: inline-block;
-      text-decoration: none;
-      font-weight: 700;
-      color: #333;
-      &:hover {
-        color: #454545;
-        background-color: #e8e8e8;
-        border-bottom: 1px solid #666666;
-        border-radius: 5px;
-      }
-    }
-    // 3-Complete
-    &.status-3 {
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      border-bottom: 1px solid transparent;
-      width: 189px;
-      line-height: 24px;
-      display: inline-block;
-      text-decoration: none;
-      font-weight: 700;
-      color: #333;
-      cursor: pointer;
-      &:hover {
-        color: #454545;
-        background-color: #e8e8e8;
-        border-bottom: 1px solid #666666;
-        text-decoration: none;
-        border-radius: 5px;
-      }
-    }
-    // 4-ActiveSelected
-    &.status-4 {
-      background-color: #29414e;
-      color: #ffffff;
-      border-bottom: 1px solid transparent;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      border-radius: 5px;
-      cursor: default;
-      width: 189px;
-      line-height: 24px;
-      display: inline-block;
-      text-decoration: none;
-      font-weight: 700;
-    }
-  }
-}
-:deep(.with-underline) {
-  & > .modal-dialog > .modal-content > .modal-header {
-    border-bottom: 1px solid #a6a6a6;
-    padding: 0;
-  }
-  & > .modal-dialog > .modal-content > .modal-body {
-    height: calc(100% - 87px);
-  }
-}
-:deep(.wizard-content-container.add-networking-step) {
-  .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;
-  }
-}
-
-.migrate-vm-kernel-modal.is-dark {
-  :deep(.wizard-content-container) {
-    .ready-complete-container {
-      background-color: var(--pannel-bg-color);
-      margin-top: 12px;
-
-      span {
-        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;
-      }
-    }
-    .wizard-content-header-area .title {
-      color: #adbbc4;
-    }
-  }
-}
-</style>
+<template>
+  <atoms-wizard
+    v-model:show="props.show"
+    :wizard="wizard"
+    :selected-scheme="selectedScheme"
+    :title="title"
+    :localization="localization"
+    :class="[
+      'migrate-vm-kernel-modal',
+      {
+        'is-dark': props.isDarkMode,
+      },
+    ]"
+    @change-steps="onChangeSteps"
+    @hide="onHide"
+    @submit="onSubmit"
+  >
+    <template #modalBody="{ selectedStep }">
+      <common-diagram-main-modals-migrate-vmkernel-adapter-steps-select-vmkernel-adapter
+        v-if="selectedStep.id === 0"
+        :vmkernel-adapter="vmkernelAdapter"
+        :table-data="filteredNetworksList"
+        :alert-messages="alertMessages[0]"
+        @hide-alert="onHideAlert"
+        @change-vmkernel-adapter="onChangeMigrateVmkernelAdapter"
+      />
+      <common-diagram-main-modals-migrate-vmkernel-adapter-steps-connection-settings
+        v-if="selectedStep.id === 1"
+        :connection-settings="connectionSettings"
+        :messages-fields="selectedStep.fields"
+        :alert-messages="alertMessages[1]"
+        :wizard="wizard"
+        @hide-alert="onHideAlert"
+        @change-connection-settings="onChangeConnectionSettings"
+      />
+      <common-diagram-main-modals-migrate-vmkernel-adapter-steps-vmkernel-adapter-ready-complete
+        v-if="selectedStep.id === 2"
+        :data="readyCompleteData"
+      />
+    </template>
+  </atoms-wizard>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type {
+  UI_I_Network,
+  UI_I_VmkernelAdapterTableData,
+} from '~/components/common/diagramMain/lib/models/interfaces'
+import type {
+  UI_I_ConnectionSettings,
+  UI_I_SelectVmkernelAdapter,
+} from '~/components/common/wizards/network/add/lib/models/interfaces'
+import type {
+  UI_I_WizardStep,
+  UI_I_ValidationReturn,
+} from '~/components/atoms/wizard/lib/models/interfaces'
+import type {
+  UI_I_MigrateVmkernelAdapterEmits,
+  UI_I_MigrationVmkernelAdapterReadyComplete,
+} from '~/components/common/diagramMain/lib/models/interfaces'
+import { UI_E_MigrationValidationFields } from '~/components/common/diagramMain/lib/models/enums'
+import {
+  stepsFunc,
+  stepsSchemeInitial,
+} from '~/components/common/diagramMain/modals/migrateVmkernelAdapter/lib/config/steps'
+import {
+  checkNetworkAsync,
+  checkConnectionSettingsSync,
+  checkSelectedVmSync,
+} from '~/components/common/diagramMain/modals/migrateVmkernelAdapter/validations/validations'
+import Wizard from '~/components/atoms/wizard/lib/utils/utils'
+import { readyCompleteInitial } from '~/components/common/diagramMain/modals/migrateVmkernelAdapter/lib/config/steps'
+
+const props = withDefaults(
+  defineProps<{
+    show: boolean
+    switchName?: string
+    networksList?: UI_I_Network[]
+    switchNetworks?: UI_I_Network[]
+    isDarkMode: boolean
+    isMigrateAdapterLoading?: boolean
+  }>(),
+  {
+    switchName: '',
+    networksList: () => [],
+    switchNetworks: () => [],
+    isMigrateAdapterLoading: false,
+  }
+)
+
+const emits = defineEmits<UI_I_MigrateVmkernelAdapterEmits>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const wizard: Wizard = new Wizard(
+  stepsFunc(localization.value),
+  stepsSchemeInitial
+)
+const selectedScheme = computed<number[]>(() => wizard.selectedScheme.value)
+const alertMessages = computed<string[][]>(() => wizard.alertMessages.value)
+
+const hostname = ref<string>('')
+const title = computed<string>(
+  () =>
+    `${hostname.value} - ${localization.value.common.migrateVmKernelNetworkAdapterTo} ${props.switchName}`
+)
+
+const connectionSettings = ref<UI_I_ConnectionSettings>({
+  networkLabel: 'VM Network',
+  vlanId: 'None (0)',
+})
+
+const vmkernelAdapter = ref<UI_I_SelectVmkernelAdapter>({
+  vm: '',
+})
+
+const readyCompleteData =
+  ref<UI_I_MigrationVmkernelAdapterReadyComplete>(readyCompleteInitial)
+
+const validationFunc = async (
+  value: UI_I_WizardStep[],
+  currentStep: UI_I_WizardStep,
+  nextStep: UI_I_WizardStep
+): Promise<UI_I_ValidationReturn> => {
+  let stepHasError = false
+
+  if (wizard.isValidateForStep(0, currentStep.id, nextStep.id)) {
+    const selectVmkernelAdapterValidation = checkSelectedVmSync(
+      localization.value,
+      vmkernelAdapter.value,
+      wizard,
+      value
+    )
+
+    value = selectVmkernelAdapterValidation.newValue
+
+    stepHasError = stepHasError || selectVmkernelAdapterValidation.stepHasError
+  }
+
+  if (wizard.isValidateForStep(1, currentStep.id, nextStep.id)) {
+    const labelValidation = await checkNetworkAsync(
+      value,
+      connectionSettings.value.networkLabel,
+      1,
+      UI_E_MigrationValidationFields.CONNECTION_SETTINGS_NETWORK,
+      emits,
+      localization.value,
+      wizard
+    )
+
+    value = labelValidation.newValue
+
+    const connectionSettingsValidation = checkConnectionSettingsSync(
+      localization.value,
+      connectionSettings.value,
+      wizard,
+      value
+    )
+
+    value = connectionSettingsValidation.newValue
+
+    stepHasError =
+      stepHasError ||
+      labelValidation.stepHasError ||
+      connectionSettingsValidation.stepHasError
+  }
+
+  return {
+    newValue: value,
+    stepHasError,
+  }
+}
+
+const finalValidationFunc = async (
+  value: UI_I_WizardStep[]
+): Promise<UI_I_ValidationReturn> => {
+  let stepHasError = false
+
+  // wizard.setLoader(true)
+
+  // wizard.setLoader(false)
+  return {
+    stepHasError,
+    newValue: value,
+  }
+}
+
+const onChangeSteps = async (value: UI_I_WizardStep[]): Promise<void> =>
+  wizard.changeSteps(value, validationFunc, finalValidationFunc)
+
+const filteredNetworksList = ref<UI_I_VmkernelAdapterTableData[]>([])
+
+watch(
+  () => wizard.selectedStepId,
+  (newSelectedStepId: number) => {
+    if (newSelectedStepId !== 2) return
+
+    const from = filteredNetworksList.value.find(
+      (network) => network.name === vmkernelAdapter.value.vm
+    )
+
+    readyCompleteData.value = {
+      vm: vmkernelAdapter.value.vm,
+      currentSettings: {
+        switch: from?.switch || '',
+        network: from?.networkLabel || '',
+      },
+      newSettings: {
+        switch: props.switchName,
+        network: connectionSettings.value.networkLabel,
+      },
+      vlanId: connectionSettings.value.vlanId,
+    }
+  }
+)
+
+watch(
+  () => props.switchNetworks,
+  (netsOnSwitch: UI_I_Network[]) => {
+    const vmKernelNetworksIdOnSwitch = netsOnSwitch
+      .filter((net: UI_I_Network) => net.networkType === '1')
+      .map((net: UI_I_Network) => net.id)
+
+    filteredNetworksList.value = props.networksList
+      .filter(
+        (net: UI_I_Network) =>
+          net.networkType === '1' &&
+          !vmKernelNetworksIdOnSwitch.includes(net.id)
+      )
+      .map((net: UI_I_Network, index: number) => ({
+        name: net.sysx?.id || '',
+        networkLabel: net.title,
+        switch: net.switchName || '',
+        ipAddress: net.sysx?.ipv4_settings.ipv4 || '--',
+        tcp: net.sysx?.tcp_stack
+          ? localization.value[net.sysx?.tcp_stack]
+          : '--',
+        id: `${net.sysx?.id || ''}-${index}`,
+      }))
+  },
+  { deep: true, immediate: true }
+)
+
+const onChangeConnectionSettings = (
+  newFields: UI_I_ConnectionSettings
+): void => {
+  connectionSettings.value = newFields
+}
+
+const onChangeMigrateVmkernelAdapter = (
+  newFields: UI_I_SelectVmkernelAdapter
+): void => {
+  vmkernelAdapter.value = newFields
+}
+
+const reset = (): void => {
+  wizard.reset()
+  connectionSettings.value = {
+    networkLabel: 'VM Network',
+    vlanId: 'None (0)',
+  }
+  vmkernelAdapter.value = {
+    vm: '',
+  }
+}
+
+const onHideAlert = (stepId: number): void => {
+  wizard.hideAlertMessagesByStepId(stepId)
+}
+
+const onHide = (): void => {
+  emits('hide')
+  reset()
+}
+
+const onSubmit = (): void => {
+  onHide()
+}
+
+watch(
+  () => props.isMigrateAdapterLoading,
+  (newValue: boolean) => {
+    wizard.setLoader(newValue)
+  },
+  { immediate: true }
+)
+
+onMounted(() => {
+  hostname.value = location.hostname
+})
+</script>
+
+<style scoped lang="scss">
+.main-step-container {
+  display: flex;
+}
+
+:deep(.modal) {
+  & > .modal-dialog > .modal-content > .modal-body {
+    height: calc(100% - 110px);
+  }
+}
+.step-items-container {
+  width: 230px;
+  padding: 10px 5px 10px 6px;
+  li {
+    display: flex;
+    margin: 0;
+    height: 24.8px;
+    span {
+      width: 16px;
+    }
+  }
+
+  .step-item {
+    margin: 0;
+    height: 24.8px;
+    padding-left: 5px;
+    // 0-Disabled
+    &.status-0 {
+      height: 24.8px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      border-bottom: 1px solid transparent;
+      width: 189px;
+      line-height: 24px;
+      display: inline-block;
+      text-decoration: none;
+      font-weight: 700;
+      color: #999;
+      cursor: default;
+    }
+    // 1-Selected
+    &.status-1 {
+      background-color: #29414e;
+      color: #ffffff;
+      border-bottom: 1px solid transparent;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      border-radius: 5px;
+      cursor: default;
+      width: 189px;
+      line-height: 24px;
+      display: inline-block;
+      text-decoration: none;
+      font-weight: 700;
+    }
+    // 2-Active
+    &.status-2 {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      border-bottom: 1px solid transparent;
+      width: 189px;
+      line-height: 24px;
+      cursor: pointer;
+      display: inline-block;
+      text-decoration: none;
+      font-weight: 700;
+      color: #333;
+      &:hover {
+        color: #454545;
+        background-color: #e8e8e8;
+        border-bottom: 1px solid #666666;
+        border-radius: 5px;
+      }
+    }
+    // 3-Complete
+    &.status-3 {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      border-bottom: 1px solid transparent;
+      width: 189px;
+      line-height: 24px;
+      display: inline-block;
+      text-decoration: none;
+      font-weight: 700;
+      color: #333;
+      cursor: pointer;
+      &:hover {
+        color: #454545;
+        background-color: #e8e8e8;
+        border-bottom: 1px solid #666666;
+        text-decoration: none;
+        border-radius: 5px;
+      }
+    }
+    // 4-ActiveSelected
+    &.status-4 {
+      background-color: #29414e;
+      color: #ffffff;
+      border-bottom: 1px solid transparent;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      border-radius: 5px;
+      cursor: default;
+      width: 189px;
+      line-height: 24px;
+      display: inline-block;
+      text-decoration: none;
+      font-weight: 700;
+    }
+  }
+}
+:deep(.with-underline) {
+  & > .modal-dialog > .modal-content > .modal-header {
+    border-bottom: 1px solid #a6a6a6;
+    padding: 0;
+  }
+  & > .modal-dialog > .modal-content > .modal-body {
+    height: calc(100% - 87px);
+  }
+}
+:deep(.wizard-content-container.add-networking-step) {
+  .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;
+  }
+}
+
+.migrate-vm-kernel-modal.is-dark {
+  :deep(.wizard-content-container) {
+    .ready-complete-container {
+      background-color: var(--pannel-bg-color);
+      margin-top: 12px;
+
+      span {
+        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;
+      }
+    }
+    .wizard-content-header-area .title {
+      color: #adbbc4;
+    }
+  }
+}
+</style>