bfg-common 1.2.20 → 1.2.21

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

@@ -1,535 +1,535 @@
-<template>
-  <div>
-    <atoms-modal
-      :width="props.width || '576px'"
-      :height="props.height || '420px'"
-      :show="props.show"
-      :title="props.title"
-      class="with-underline"
-      @hide="onHideViewSettingsModal"
-    >
-      <template #modalBody>
-        <div class="main-step-container">
-          <div class="step-items-container">
-            <template
-              v-for="(currentStep, index) in stepsWithStatus"
-              :key="currentStep.id"
-            >
-              <li>
-                <span class="vui-inline-icon-container">
-                  <img
-                    v-if="currentStep.status === 3 || currentStep.status === 4"
-                    alt="Completed"
-                    src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAABHppVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IlhNUCBDb3JlIDUuNC4wIj4KICAgPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICAgICAgPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIKICAgICAgICAgICAgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iCiAgICAgICAgICAgIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIgogICAgICAgICAgICB4bWxuczp0aWZmPSJodHRwOi8vbnMuYWRvYmUuY29tL3RpZmYvMS4wLyIKICAgICAgICAgICAgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIj4KICAgICAgICAgPHhtcE1NOkRlcml2ZWRGcm9tIHJkZjpwYXJzZVR5cGU9IlJlc291cmNlIj4KICAgICAgICAgICAgPHN0UmVmOmluc3RhbmNlSUQ+eG1wLmlpZDo0QURGRTI5NjEzMjA2ODExODIyQUJGMzNERjE1NzQyRTwvc3RSZWY6aW5zdGFuY2VJRD4KICAgICAgICAgICAgPHN0UmVmOmRvY3VtZW50SUQ+eG1wLmRpZDowMTgwMTE3NDA3MjA2ODExOEMxNEM3QTM5NUE3RTRFMTwvc3RSZWY6ZG9jdW1lbnRJRD4KICAgICAgICAgPC94bXBNTTpEZXJpdmVkRnJvbT4KICAgICAgICAgPHhtcE1NOkRvY3VtZW50SUQ+eG1wLmRpZDozRUI3RDAwODQ4RTIxMUU0QTQ2NDg2QzZFRkFFODM2NDwveG1wTU06RG9jdW1lbnRJRD4KICAgICAgICAgPHhtcE1NOkluc3RhbmNlSUQ+eG1wLmlpZDozRUI3RDAwNzQ4RTIxMUU0QTQ2NDg2QzZFRkFFODM2NDwveG1wTU06SW5zdGFuY2VJRD4KICAgICAgICAgPHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD54bXAuZGlkOjAxODAxMTc0MDcyMDY4MTE4QzE0QzdBMzk1QTdFNEUxPC94bXBNTTpPcmlnaW5hbERvY3VtZW50SUQ+CiAgICAgICAgIDx0aWZmOk9yaWVudGF0aW9uPjE8L3RpZmY6T3JpZW50YXRpb24+CiAgICAgICAgIDx4bXA6Q3JlYXRvclRvb2w+QWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKTwveG1wOkNyZWF0b3JUb29sPgogICAgICA8L3JkZjpEZXNjcmlwdGlvbj4KICAgPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4KOz7cZwAAANtJREFUOBFjYBhowEiKA2zWqP5nYGZgYGT5337Y904VSC8TsQaANHOLcTKw8DAyfHvzqxKmjygXgDSzijAx/AfCVxc/MlzLfwnXB2fYrlXN/fX9zySQySdj7sPFQZqZ+RmBWhkY3lxD1QxSC/fC2yefJrEKszCAMNivQEkQzcTNwPDvzz+smkEGwG0CcbQmiv8XUuAF28b4GyjFCnL0f4b3D76gOBukFgZQDAAJggzhl+YGBjYzw18g/Pj0K07NIPUYBsAM4RHjZvjyCr9mkFqcAOQSnJKjEtQNAQB/8VEEGU05ZQAAAABJRU5ErkJggg=="
-                  />
-                </span>
-                <a
-                  :class="`step-item status-${currentStep.status}`"
-                  @click="
-                    currentStep.status !== 0 && onSelectStep(currentStep.id)
-                  "
-                >
-                  {{ index + 1 }} {{ currentStep.name }}
-                </a>
-              </li>
-            </template>
-          </div>
-          <common-diagram-main-modals-steps-select-vmkernel-adapter
-            v-show="selectedStep === 0"
-            title="Select VMkernel adapter"
-            :text="localization.migrateVmKernelNetworkAdapter1Placeholder"
-            :step-id="0"
-            :vmkernel-adapter="vmkernelAdapter"
-            :table-data="filteredNetworksList"
-            :is-show-error-message-alert="isShowErrorMessageAlert"
-            :error-messages="errorMessages[0]"
-            @change-error-messages="onChangeErrorMessages"
-            @hide-error-message-alert="onHideErrorMessageAlert"
-            @change-vmkernel-adapter="onChangeMigrateVmkernelAdapter"
-          />
-          <common-diagram-main-modals-steps-connection-settings
-            v-show="selectedStep === 1"
-            title="Configure settings"
-            :text="localization.migrateVmKernelNetworkAdapter2Placeholder"
-            :step-id="1"
-            :connection-settings="connectionSettings"
-            :is-show-error-message-alert="isShowErrorMessageAlert"
-            :error-messages="errorMessages[1]"
-            @change-error-messages="onChangeErrorMessages"
-            @hide-error-message-alert="onHideErrorMessageAlert"
-            @change-connection-settings="onChangeConnectionSettings"
-          />
-          <common-diagram-main-modals-steps-vmkernel-adapter-ready-complete
-            v-show="selectedStep === 2"
-            :step-id="2"
-            title="Ready to complete"
-            :text="localization.migrateVmKernelNetworkAdapter3Placeholder"
-          />
-        </div>
-      </template>
-      <template #modalFooter>
-        <div>
-          <button
-            id="migrate-vmkernel-adapter-cancel-button"
-            class="btn btn-link"
-            @click="onCancel"
-          >
-            Cancel
-          </button>
-          <button
-            id="migrate-vmkernel-adapter-back-button"
-            class="btn btn-outline"
-            :disabled="selectedStep === 0"
-            @click="onBackStep"
-          >
-            Back
-          </button>
-          <button
-            id="migrate-vmkernel-adapter-next-button"
-            class="btn btn-primary"
-            @click="selectedStep === 2 ? onFinish() : onNextStep()"
-          >
-            {{ selectedStep === 2 ? 'Finish' : 'Next' }}
-          </button>
-        </div>
-      </template>
-    </atoms-modal>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { migrateVmkernelAdapterSchemeFunc } from '~/components/common/diagramMain/modals/config'
-import { errorMessagesInitialFunc } from '~/components/common/addNetworking/config'
-import { UI_I_Localization } from '~/models/interfaces'
-import { UI_E_StepStatus } from '~/components/common/diagramMain/models/enums'
-import {
-  UI_I_NetworkFull,
-  UI_I_Step,
-  UI_I_VmkernelAdapterTableData,
-} from '~/components/common/diagramMain/models/interfaces'
-import {
-  UI_I_ConnectionSettings,
-  UI_I_SelectVmkernelAdapter,
-} from '~/components/common/addNetworking/models/interfaces'
-
-// Props from up
-const props = withDefaults(
-  defineProps<{
-    modalName: string
-    viewName: string
-    show: boolean
-    width: string
-    height: string
-    title: string
-    switchName?: string
-    networksList?: UI_I_NetworkFull[]
-    switchNetworks?: UI_I_NetworkFull[]
-  }>(),
-  {
-    switchName: '',
-    networksList: () => [],
-    switchNetworks: () => [],
-  }
-)
-
-// UI_I_Localization
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-const filteredNetworksList = ref<UI_I_VmkernelAdapterTableData[]>([])
-
-watch(
-  () => props.switchNetworks,
-  (netsOnSwitch: UI_I_NetworkFull[]) => {
-    const vmKernelNetworksIdOnSwitch = netsOnSwitch
-      .filter((net: UI_I_NetworkFull) => net.networkType === '1')
-      .map((net: UI_I_NetworkFull) => net.id)
-    console.log()
-    filteredNetworksList.value = props.networksList
-      .filter(
-        (net: UI_I_NetworkFull) =>
-          net.networkType === '1' &&
-          !vmKernelNetworksIdOnSwitch.includes(net.id)
-      )
-      .map((net: UI_I_NetworkFull, index: number) => ({
-        name: net.sysx?.name || '',
-        networkLabel: net.id,
-        switch: net.switchName || '',
-        ipAddress: net.sysx?.tcp_config.ipv4 || '--',
-        tcp: net.sysx?.tcp_stack
-          ? localization.value[net.sysx?.tcp_stack]
-          : '--',
-        id: `${net.sysx?.name || ''}-${index}`,
-      }))
-  },
-  { deep: true, immediate: true }
-)
-
-// Steps initial data
-const stepsInitial: UI_I_Step[][] = migrateVmkernelAdapterSchemeFunc(
-  localization.value
-)
-
-// Selected scheme, for this it's only one
-const selectedStepScheme = ref<number>(0)
-
-// Selected step on table
-const selectedStep = ref<number>(0)
-
-// Completed steps for the check icon and for step to back
-const completedStepsId = ref<number[]>([])
-
-// TODO They are temporary data for the changing later
-const connectionSettings = ref<UI_I_ConnectionSettings>({
-  networkLabel: 'VM Network',
-  vlanId: 'None (0)',
-})
-
-const vmkernelAdapter = ref<UI_I_SelectVmkernelAdapter>({
-  vm: '',
-})
-
-const errorMessagesInitial: string[][] = errorMessagesInitialFunc(3)
-
-// Error Message
-const errorMessages = ref<string[][]>(errorMessagesInitial)
-const isShowErrorMessageAlert = ref<boolean>(false)
-
-const onChangeErrorMessages = (
-  newErrorMessages: string[],
-  stepIndex: number
-): void => {
-  errorMessages.value[stepIndex] = newErrorMessages
-}
-const onShowErrorMessageAlert = (): void => {
-  isShowErrorMessageAlert.value = true
-}
-const onHideErrorMessageAlert = (): void => {
-  isShowErrorMessageAlert.value = false
-}
-
-const onChangeConnectionSettings = (
-  newFields: UI_I_ConnectionSettings
-): void => {
-  connectionSettings.value = newFields
-}
-const onChangeMigrateVmkernelAdapter = (
-  newFields: UI_I_SelectVmkernelAdapter
-): void => {
-  vmkernelAdapter.value = newFields
-}
-
-const stepsWithStatus = computed<UI_I_Step[]>(() => {
-  let selectedFlag = false
-  let lastId = 0
-
-  return stepsInitial[selectedStepScheme.value].map((step: UI_I_Step) => {
-    if (
-      step.id === selectedStep.value &&
-      completedStepsId.value.includes(step.id)
-    ) {
-      lastId = step.id
-      return { ...step, status: UI_E_StepStatus.ActiveSelected }
-    } else if (
-      step.id < selectedStep.value ||
-      completedStepsId.value.includes(step.id)
-    ) {
-      !completedStepsId.value.includes(step.id) &&
-        completedStepsId.value.push(step.id)
-      lastId = step.id
-      return { ...step, status: UI_E_StepStatus.Complete }
-    } else if (step.id === selectedStep.value) {
-      selectedFlag = true
-      lastId = step.id
-      return { ...step, status: UI_E_StepStatus.Selected }
-    } else if (
-      selectedFlag ||
-      lastId === completedStepsId.value[completedStepsId.value.length - 1]
-    ) {
-      selectedFlag = false
-      lastId = step.id
-      return { ...step, status: UI_E_StepStatus.Active }
-    } else {
-      lastId = step.id
-      return { ...step, status: UI_E_StepStatus.Disabled }
-    }
-  })
-})
-
-const reset = (): void => {
-  selectedStepScheme.value = 0
-  selectedStep.value = 0
-  completedStepsId.value = []
-
-  connectionSettings.value = {
-    networkLabel: 'VM Network',
-    vlanId: 'None (0)',
-  }
-  vmkernelAdapter.value = {
-    vm: '',
-  }
-
-  errorMessages.value = errorMessagesInitial
-}
-const onSelectStep = (stepId: number): void => {
-  if (
-    errorMessages.value[selectedStep.value].length > 0 &&
-    selectedStep.value <= stepId
-  ) {
-    onShowErrorMessageAlert()
-    return
-  }
-  selectedStep.value = stepId
-}
-const onNextStep = (): void => {
-  const selectedStepIndex = stepsWithStatus.value.findIndex(
-    (step: UI_I_Step) => step.id === selectedStep.value
-  )
-
-  if (
-    errorMessages.value[selectedStep.value].length > 0 &&
-    selectedStep.value <= stepsWithStatus.value[selectedStepIndex + 1].id
-  ) {
-    onShowErrorMessageAlert()
-    return
-  }
-
-  selectedStep.value = stepsWithStatus.value[selectedStepIndex + 1].id
-}
-const onBackStep = (): void => {
-  const selectedStepIndex = stepsWithStatus.value.findIndex(
-    (step: UI_I_Step) => step.id === selectedStep.value
-  )
-  selectedStep.value = stepsWithStatus.value[selectedStepIndex - 1].id
-}
-const onCancel = (): void => {
-  onHideViewSettingsModal()
-}
-const onFinish = (): void => {
-  onHideViewSettingsModal()
-}
-
-const emits = defineEmits<{
-  (event: 'hide'): void
-}>()
-const onHideViewSettingsModal = (): void => {
-  emits('hide')
-  reset()
-}
-</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;
-  }
-}
-</style>
+<template>
+  <div>
+    <atoms-modal
+      :width="props.width || '576px'"
+      :height="props.height || '420px'"
+      :show="props.show"
+      :title="props.title"
+      class="with-underline"
+      @hide="onHideViewSettingsModal"
+    >
+      <template #modalBody>
+        <div class="main-step-container">
+          <div class="step-items-container">
+            <template
+              v-for="(currentStep, index) in stepsWithStatus"
+              :key="currentStep.id"
+            >
+              <li>
+                <span class="vui-inline-icon-container">
+                  <img
+                    v-if="currentStep.status === 3 || currentStep.status === 4"
+                    alt="Completed"
+                    src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAABHppVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IlhNUCBDb3JlIDUuNC4wIj4KICAgPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICAgICAgPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIKICAgICAgICAgICAgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iCiAgICAgICAgICAgIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIgogICAgICAgICAgICB4bWxuczp0aWZmPSJodHRwOi8vbnMuYWRvYmUuY29tL3RpZmYvMS4wLyIKICAgICAgICAgICAgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIj4KICAgICAgICAgPHhtcE1NOkRlcml2ZWRGcm9tIHJkZjpwYXJzZVR5cGU9IlJlc291cmNlIj4KICAgICAgICAgICAgPHN0UmVmOmluc3RhbmNlSUQ+eG1wLmlpZDo0QURGRTI5NjEzMjA2ODExODIyQUJGMzNERjE1NzQyRTwvc3RSZWY6aW5zdGFuY2VJRD4KICAgICAgICAgICAgPHN0UmVmOmRvY3VtZW50SUQ+eG1wLmRpZDowMTgwMTE3NDA3MjA2ODExOEMxNEM3QTM5NUE3RTRFMTwvc3RSZWY6ZG9jdW1lbnRJRD4KICAgICAgICAgPC94bXBNTTpEZXJpdmVkRnJvbT4KICAgICAgICAgPHhtcE1NOkRvY3VtZW50SUQ+eG1wLmRpZDozRUI3RDAwODQ4RTIxMUU0QTQ2NDg2QzZFRkFFODM2NDwveG1wTU06RG9jdW1lbnRJRD4KICAgICAgICAgPHhtcE1NOkluc3RhbmNlSUQ+eG1wLmlpZDozRUI3RDAwNzQ4RTIxMUU0QTQ2NDg2QzZFRkFFODM2NDwveG1wTU06SW5zdGFuY2VJRD4KICAgICAgICAgPHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD54bXAuZGlkOjAxODAxMTc0MDcyMDY4MTE4QzE0QzdBMzk1QTdFNEUxPC94bXBNTTpPcmlnaW5hbERvY3VtZW50SUQ+CiAgICAgICAgIDx0aWZmOk9yaWVudGF0aW9uPjE8L3RpZmY6T3JpZW50YXRpb24+CiAgICAgICAgIDx4bXA6Q3JlYXRvclRvb2w+QWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKTwveG1wOkNyZWF0b3JUb29sPgogICAgICA8L3JkZjpEZXNjcmlwdGlvbj4KICAgPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4KOz7cZwAAANtJREFUOBFjYBhowEiKA2zWqP5nYGZgYGT5337Y904VSC8TsQaANHOLcTKw8DAyfHvzqxKmjygXgDSzijAx/AfCVxc/MlzLfwnXB2fYrlXN/fX9zySQySdj7sPFQZqZ+RmBWhkY3lxD1QxSC/fC2yefJrEKszCAMNivQEkQzcTNwPDvzz+smkEGwG0CcbQmiv8XUuAF28b4GyjFCnL0f4b3D76gOBukFgZQDAAJggzhl+YGBjYzw18g/Pj0K07NIPUYBsAM4RHjZvjyCr9mkFqcAOQSnJKjEtQNAQB/8VEEGU05ZQAAAABJRU5ErkJggg=="
+                  />
+                </span>
+                <a
+                  :class="`step-item status-${currentStep.status}`"
+                  @click="
+                    currentStep.status !== 0 && onSelectStep(currentStep.id)
+                  "
+                >
+                  {{ index + 1 }} {{ currentStep.name }}
+                </a>
+              </li>
+            </template>
+          </div>
+          <common-diagram-main-modals-steps-select-vmkernel-adapter
+            v-show="selectedStep === 0"
+            title="Select VMkernel adapter"
+            :text="localization.migrateVmKernelNetworkAdapter1Placeholder"
+            :step-id="0"
+            :vmkernel-adapter="vmkernelAdapter"
+            :table-data="filteredNetworksList"
+            :is-show-error-message-alert="isShowErrorMessageAlert"
+            :error-messages="errorMessages[0]"
+            @change-error-messages="onChangeErrorMessages"
+            @hide-error-message-alert="onHideErrorMessageAlert"
+            @change-vmkernel-adapter="onChangeMigrateVmkernelAdapter"
+          />
+          <common-diagram-main-modals-steps-connection-settings
+            v-show="selectedStep === 1"
+            title="Configure settings"
+            :text="localization.migrateVmKernelNetworkAdapter2Placeholder"
+            :step-id="1"
+            :connection-settings="connectionSettings"
+            :is-show-error-message-alert="isShowErrorMessageAlert"
+            :error-messages="errorMessages[1]"
+            @change-error-messages="onChangeErrorMessages"
+            @hide-error-message-alert="onHideErrorMessageAlert"
+            @change-connection-settings="onChangeConnectionSettings"
+          />
+          <common-diagram-main-modals-steps-vmkernel-adapter-ready-complete
+            v-show="selectedStep === 2"
+            :step-id="2"
+            title="Ready to complete"
+            :text="localization.migrateVmKernelNetworkAdapter3Placeholder"
+          />
+        </div>
+      </template>
+      <template #modalFooter>
+        <div>
+          <button
+            id="migrate-vmkernel-adapter-cancel-button"
+            class="btn btn-link"
+            @click="onCancel"
+          >
+            Cancel
+          </button>
+          <button
+            id="migrate-vmkernel-adapter-back-button"
+            class="btn btn-outline"
+            :disabled="selectedStep === 0"
+            @click="onBackStep"
+          >
+            Back
+          </button>
+          <button
+            id="migrate-vmkernel-adapter-next-button"
+            class="btn btn-primary"
+            @click="selectedStep === 2 ? onFinish() : onNextStep()"
+          >
+            {{ selectedStep === 2 ? 'Finish' : 'Next' }}
+          </button>
+        </div>
+      </template>
+    </atoms-modal>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { migrateVmkernelAdapterSchemeFunc } from '~/components/common/diagramMain/modals/config'
+import { errorMessagesInitialFunc } from '~/components/common/addNetworking/config'
+import { UI_I_Localization } from '~/models/interfaces'
+import { UI_E_StepStatus } from '~/components/common/diagramMain/models/enums'
+import {
+  UI_I_NetworkFull,
+  UI_I_Step,
+  UI_I_VmkernelAdapterTableData,
+} from '~/components/common/diagramMain/models/interfaces'
+import {
+  UI_I_ConnectionSettings,
+  UI_I_SelectVmkernelAdapter,
+} from '~/components/common/addNetworking/models/interfaces'
+
+// Props from up
+const props = withDefaults(
+  defineProps<{
+    modalName: string
+    viewName: string
+    show: boolean
+    width: string
+    height: string
+    title: string
+    switchName?: string
+    networksList?: UI_I_NetworkFull[]
+    switchNetworks?: UI_I_NetworkFull[]
+  }>(),
+  {
+    switchName: '',
+    networksList: () => [],
+    switchNetworks: () => [],
+  }
+)
+
+// UI_I_Localization
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const filteredNetworksList = ref<UI_I_VmkernelAdapterTableData[]>([])
+
+watch(
+  () => props.switchNetworks,
+  (netsOnSwitch: UI_I_NetworkFull[]) => {
+    const vmKernelNetworksIdOnSwitch = netsOnSwitch
+      .filter((net: UI_I_NetworkFull) => net.networkType === '1')
+      .map((net: UI_I_NetworkFull) => net.id)
+    console.log()
+    filteredNetworksList.value = props.networksList
+      .filter(
+        (net: UI_I_NetworkFull) =>
+          net.networkType === '1' &&
+          !vmKernelNetworksIdOnSwitch.includes(net.id)
+      )
+      .map((net: UI_I_NetworkFull, index: number) => ({
+        name: net.sysx?.name || '',
+        networkLabel: net.id,
+        switch: net.switchName || '',
+        ipAddress: net.sysx?.tcp_config.ipv4 || '--',
+        tcp: net.sysx?.tcp_stack
+          ? localization.value[net.sysx?.tcp_stack]
+          : '--',
+        id: `${net.sysx?.name || ''}-${index}`,
+      }))
+  },
+  { deep: true, immediate: true }
+)
+
+// Steps initial data
+const stepsInitial: UI_I_Step[][] = migrateVmkernelAdapterSchemeFunc(
+  localization.value
+)
+
+// Selected scheme, for this it's only one
+const selectedStepScheme = ref<number>(0)
+
+// Selected step on table
+const selectedStep = ref<number>(0)
+
+// Completed steps for the check icon and for step to back
+const completedStepsId = ref<number[]>([])
+
+// TODO They are temporary data for the changing later
+const connectionSettings = ref<UI_I_ConnectionSettings>({
+  networkLabel: 'VM Network',
+  vlanId: 'None (0)',
+})
+
+const vmkernelAdapter = ref<UI_I_SelectVmkernelAdapter>({
+  vm: '',
+})
+
+const errorMessagesInitial: string[][] = errorMessagesInitialFunc(3)
+
+// Error Message
+const errorMessages = ref<string[][]>(errorMessagesInitial)
+const isShowErrorMessageAlert = ref<boolean>(false)
+
+const onChangeErrorMessages = (
+  newErrorMessages: string[],
+  stepIndex: number
+): void => {
+  errorMessages.value[stepIndex] = newErrorMessages
+}
+const onShowErrorMessageAlert = (): void => {
+  isShowErrorMessageAlert.value = true
+}
+const onHideErrorMessageAlert = (): void => {
+  isShowErrorMessageAlert.value = false
+}
+
+const onChangeConnectionSettings = (
+  newFields: UI_I_ConnectionSettings
+): void => {
+  connectionSettings.value = newFields
+}
+const onChangeMigrateVmkernelAdapter = (
+  newFields: UI_I_SelectVmkernelAdapter
+): void => {
+  vmkernelAdapter.value = newFields
+}
+
+const stepsWithStatus = computed<UI_I_Step[]>(() => {
+  let selectedFlag = false
+  let lastId = 0
+
+  return stepsInitial[selectedStepScheme.value].map((step: UI_I_Step) => {
+    if (
+      step.id === selectedStep.value &&
+      completedStepsId.value.includes(step.id)
+    ) {
+      lastId = step.id
+      return { ...step, status: UI_E_StepStatus.ActiveSelected }
+    } else if (
+      step.id < selectedStep.value ||
+      completedStepsId.value.includes(step.id)
+    ) {
+      !completedStepsId.value.includes(step.id) &&
+        completedStepsId.value.push(step.id)
+      lastId = step.id
+      return { ...step, status: UI_E_StepStatus.Complete }
+    } else if (step.id === selectedStep.value) {
+      selectedFlag = true
+      lastId = step.id
+      return { ...step, status: UI_E_StepStatus.Selected }
+    } else if (
+      selectedFlag ||
+      lastId === completedStepsId.value[completedStepsId.value.length - 1]
+    ) {
+      selectedFlag = false
+      lastId = step.id
+      return { ...step, status: UI_E_StepStatus.Active }
+    } else {
+      lastId = step.id
+      return { ...step, status: UI_E_StepStatus.Disabled }
+    }
+  })
+})
+
+const reset = (): void => {
+  selectedStepScheme.value = 0
+  selectedStep.value = 0
+  completedStepsId.value = []
+
+  connectionSettings.value = {
+    networkLabel: 'VM Network',
+    vlanId: 'None (0)',
+  }
+  vmkernelAdapter.value = {
+    vm: '',
+  }
+
+  errorMessages.value = errorMessagesInitial
+}
+const onSelectStep = (stepId: number): void => {
+  if (
+    errorMessages.value[selectedStep.value].length > 0 &&
+    selectedStep.value <= stepId
+  ) {
+    onShowErrorMessageAlert()
+    return
+  }
+  selectedStep.value = stepId
+}
+const onNextStep = (): void => {
+  const selectedStepIndex = stepsWithStatus.value.findIndex(
+    (step: UI_I_Step) => step.id === selectedStep.value
+  )
+
+  if (
+    errorMessages.value[selectedStep.value].length > 0 &&
+    selectedStep.value <= stepsWithStatus.value[selectedStepIndex + 1].id
+  ) {
+    onShowErrorMessageAlert()
+    return
+  }
+
+  selectedStep.value = stepsWithStatus.value[selectedStepIndex + 1].id
+}
+const onBackStep = (): void => {
+  const selectedStepIndex = stepsWithStatus.value.findIndex(
+    (step: UI_I_Step) => step.id === selectedStep.value
+  )
+  selectedStep.value = stepsWithStatus.value[selectedStepIndex - 1].id
+}
+const onCancel = (): void => {
+  onHideViewSettingsModal()
+}
+const onFinish = (): void => {
+  onHideViewSettingsModal()
+}
+
+const emits = defineEmits<{
+  (event: 'hide'): void
+}>()
+const onHideViewSettingsModal = (): void => {
+  emits('hide')
+  reset()
+}
+</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;
+  }
+}
+</style>