bfg-common 1.2.185 → 1.2.187

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

@@ -0,0 +1,531 @@
+<template>
+  <atoms-wizard
+    v-model:show="props.show"
+    :steps="wizard.steps"
+    :selected-scheme="selectedScheme"
+    :is-loading="wizard.wizardLoader.status"
+    :loader-messages="wizard.wizardLoader.messages"
+    :title="title"
+    :was-completed="wasCompleted"
+    :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 { UI_I_Localization } from '~/models/interfaces'
+import {
+  UI_I_NetworkFull,
+  UI_I_VmkernelAdapterTableData,
+} from '~/components/common/diagramMain/models/interfaces'
+import {
+  UI_I_ConnectionSettings,
+  UI_I_SelectVmkernelAdapter,
+} from '~/components/common/wizards/network/add/models/interfaces'
+import {
+  UI_I_WizardStep,
+  UI_I_ValidationReturn,
+} from '~/components/atoms/wizard/models/interfaces'
+import {
+  UI_I_MigrateVmkernelAdapterEmits,
+  UI_I_MigrationVmkernelAdapterReadyComplete,
+} from '~/components/common/diagramMain/models/interfaces'
+import { UI_E_MigrationValidationFields } from '~/components/common/diagramMain/models/enums'
+import {
+  stepsFunc,
+  stepsSchemeInitial,
+} from '~/components/common/diagramMain/modals/migrateVmkernelAdapter/config/steps'
+import {
+  checkNetworkAsync,
+  checkConnectionSettingsSync,
+  checkSelectedVmSync,
+} from '~/components/common/diagramMain/modals/migrateVmkernelAdapter/validations/validations'
+import Wizard from '~/components/atoms/wizard/utils/utils'
+import { readyCompleteInitial } from '~/components/common/diagramMain/modals/migrateVmkernelAdapter/config/steps'
+
+const props = withDefaults(
+  defineProps<{
+    show: boolean
+    switchName?: string
+    networksList?: UI_I_NetworkFull[]
+    switchNetworks?: UI_I_NetworkFull[]
+    isDarkMode: boolean
+  }>(),
+  {
+    switchName: '',
+    networksList: () => [],
+    switchNetworks: () => [],
+  }
+)
+
+const emits = defineEmits<UI_I_MigrateVmkernelAdapterEmits>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const wizard: Wizard = new Wizard(
+  stepsFunc(localization.value),
+  stepsSchemeInitial
+)
+const wasCompleted = computed<boolean>(() => wizard.wasCompleted())
+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.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_NetworkFull[]) => {
+    const vmKernelNetworksIdOnSwitch = netsOnSwitch
+      .filter((net: UI_I_NetworkFull) => net.networkType === '1')
+      .map((net: UI_I_NetworkFull) => net.id)
+
+    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.title,
+        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 }
+)
+
+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()
+}
+
+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>

package/components/common/diagramMain/modals/migrateVmkernelAdapter/config/steps.ts

@@ -0,0 +1,114 @@
+import { UI_I_MigrationVmkernelAdapterReadyComplete } from '~/components/common/diagramMain/models/interfaces'
+import { UI_E_MigrationValidationFields } from '~/components/common/diagramMain/models/enums'
+import { UI_I_WizardStep } from '~/components/atoms/wizard/models/interfaces'
+import { UI_E_WIZARD_STATUS } from '~/components/atoms/wizard/models/enums'
+import { UI_I_Localization } from '~/models/interfaces'
+
+export const stepsFunc = (
+  localization: UI_I_Localization
+): UI_I_WizardStep[] => [
+  {
+    id: 0,
+    title: localization.selectVmKernelAdapter,
+    subTitle: localization.migrateVmKernelNetworkAdapter1Placeholder,
+    status: UI_E_WIZARD_STATUS.SELECTED,
+    fields: {
+      [UI_E_MigrationValidationFields.SELECT_ADAPTER_VM]: {
+        field: '',
+        alert: '',
+      },
+    },
+    isValid: true,
+  },
+  {
+    id: 1,
+    title: localization.configureSettings,
+    subTitle: localization.migrateVmKernelNetworkAdapter2Placeholder,
+    status: UI_E_WIZARD_STATUS.INACTIVE,
+    fields: {
+      [UI_E_MigrationValidationFields.CONNECTION_SETTINGS_NETWORK]: {
+        field: '',
+        alert: '',
+      },
+      [UI_E_MigrationValidationFields.CONNECTION_SETTINGS_VLAN]: {
+        field: '',
+        alert: '',
+      },
+    },
+    isValid: true,
+  },
+  {
+    id: 2,
+    title: localization.readyComplete,
+    subTitle: localization.migrateVmKernelNetworkAdapter3Placeholder,
+    status: UI_E_WIZARD_STATUS.INACTIVE,
+    fields: {},
+    isValid: true,
+  },
+]
+
+export const stepsSchemeInitial: number[][] = [[0, 1, 2]]
+
+export const createMigrateVmkernelAdapterSchemeReadyCompleteFunc = (
+  localization: UI_I_Localization,
+  data: UI_I_MigrationVmkernelAdapterReadyComplete
+) => [
+  {
+    id: 0,
+    type: 0,
+    rows: [
+      {
+        name: localization.vmAdapter,
+        value: data.vm,
+      },
+    ],
+  },
+  {
+    title: localization.currentSettings,
+    id: 1,
+    type: 0,
+    rows: [
+      {
+        name: localization.migrateFromSwitch,
+        value: data.currentSettings.switch,
+      },
+      {
+        name: localization.networkLabel,
+        value: data.currentSettings.network,
+      },
+    ],
+  },
+  {
+    title: localization.newSettings,
+    id: 2,
+    type: 0,
+    rows: [
+      {
+        name: localization.migrateToSwitch,
+        value: data.newSettings.switch,
+      },
+      {
+        name: localization.networkLabel,
+        value: data.newSettings.network,
+      },
+      {
+        name: localization.vlanId,
+        value: data.vlanId,
+      },
+    ],
+  },
+]
+
+export const readyCompleteInitial: UI_I_MigrationVmkernelAdapterReadyComplete =
+  {
+    vm: '-',
+    currentSettings: {
+      switch: '-',
+      network: '-',
+    },
+    newSettings: {
+      switch: '-',
+      network: '-',
+    },
+    vlanId: '-',
+  }