bfg-common 1.2.197 → 1.2.198

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

@@ -1,603 +0,0 @@
-<template>
-  <div>
-    <atoms-modal
-      :width="props.width || '576px'"
-      :height="props.height || '420px'"
-      :show="props.show"
-      :title="props.title"
-      :class="[
-        'with-underline migrate-vm-kernel-modal',
-        {
-          'is-dark': props.isDarkMode,
-        },
-      ]"
-      @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[]
-    isDarkMode: boolean
-  }>(),
-  {
-    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;
-  }
-}
-
-.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;
-    }
-  }
-}
-
-:root.dark-theme {
-  .step-item {
-    // 1-Selected
-    &.status-1 {
-      background-color: var(--vertical-nav-active-bg-color);
-      color: var(--vertical-steps-active-color);
-    }
-    // 2-Active
-    &.status-2 {
-      color: #fff;
-      &:hover {
-        color: var(--vertical-nav-item-color);
-        background-color: var(--vertical-nav-hover-bg-color);
-        border-bottom: 1px solid var(--vertical-nav-hover-border-color);
-      }
-    }
-    // 3-Complete
-    &.status-3 {
-      color: #fff;
-      &:hover {
-        color: var(--vertical-nav-item-color);
-        background-color: var(--vertical-nav-hover-bg-color);
-        border-bottom: 1px solid var(--vertical-nav-hover-border-color);
-      }
-    }
-    // 4-ActiveSelected
-    &.status-4 {
-      background-color: var(--vertical-nav-active-bg-color);
-      color: var(--vertical-steps-active-color);
-      border-bottom: 1px solid transparent;
-    }
-  }
-}
-</style>

package/components/common/diagramMain/modals/config/migrateVmkernelAdapterSteps.ts

@@ -1,81 +0,0 @@
-import { UI_I_Step } from '~/components/common/diagramMain/models/interfaces'
-import { UI_I_Localization } from '~/models/interfaces'
-
-export const migrateVmkernelAdapterStepsFunc = (
-  localization: UI_I_Localization
-): UI_I_Step[] => [
-  {
-    id: 0,
-    name: localization.selectVmKernelAdapter,
-    status: 0,
-  },
-  {
-    id: 1,
-    name: localization.configureSettings,
-    status: 0,
-  },
-  {
-    id: 2,
-    name: localization.readyComplete,
-    status: 0,
-  },
-]
-
-export const migrateVmkernelAdapterSchemeFunc = (
-  localization: UI_I_Localization
-): UI_I_Step[][] => [
-  [
-    migrateVmkernelAdapterStepsFunc(localization)[0],
-    migrateVmkernelAdapterStepsFunc(localization)[1],
-    migrateVmkernelAdapterStepsFunc(localization)[2],
-  ],
-]
-
-export const createMigrateVmkernelAdapterSchemeReadyCompleteFunc = (
-  localization: UI_I_Localization
-) => [
-  {
-    id: 0,
-    type: 0,
-    rows: [
-      {
-        name: localization.vmAdapter,
-        value: 'vmk1',
-      },
-    ],
-  },
-  {
-    title: localization.currentSettings,
-    id: 1,
-    type: 0,
-    rows: [
-      {
-        name: localization.migrateFromSwitch,
-        value: 'vSwitch1',
-      },
-      {
-        name: localization.networkLabel,
-        value: 'VMkernel',
-      },
-    ],
-  },
-  {
-    title: localization.newSettings,
-    id: 2,
-    type: 0,
-    rows: [
-      {
-        name: localization.migrateToSwitch,
-        value: 'vSwitch0',
-      },
-      {
-        name: localization.networkLabel,
-        value: 'VMkernel 3',
-      },
-      {
-        name: localization.vlanId,
-        value: 'None (0)',
-      },
-    ],
-  },
-]

package/components/common/diagramMain/modals/config/validation.ts

@@ -1,3 +0,0 @@
-export const selectVmKernelAdapterFieldsErrorMessages = {
-    vm: '',
-}