bfg-common 1.0.0

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

@@ -0,0 +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>

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

@@ -0,0 +1,110 @@
+import { UI_I_Localization } from '~/models/interfaces'
+import { UI_I_ModalsInitialData } from '~/components/common/diagramMain/models/interfaces'
+
+export const adapterViewSettingsModalTabsFunc = (
+  localization: UI_I_Localization
+) => [
+  {
+    text: localization.all,
+    value: 0,
+  },
+  {
+    text: localization.properties,
+    value: 1,
+  },
+  {
+    text: localization.cdp,
+    value: 2,
+  },
+  {
+    text: localization.lldp,
+    value: 3,
+  },
+]
+
+export const adapterViewSettingsFunc = (
+  localization: UI_I_Localization,
+  initialData: UI_I_ModalsInitialData
+) => [
+  {
+    id: 1,
+    type: 1,
+    rows: [
+      {
+        name: localization.adapter,
+        value: initialData.adapter?.trim(),
+      },
+      {
+        name: localization.name,
+        value: initialData.name,
+      },
+      {
+        name: localization.location,
+        value: `PCI ${initialData.pciAddress}`,
+      },
+      {
+        name: localization.driver,
+        value: initialData.driver,
+      },
+    ],
+  },
+  {
+    title: localization.status,
+    id: 2,
+    type: 1,
+    rows: [
+      {
+        name: localization.status,
+        value: initialData.carrier
+          ? localization.connected
+          : localization.disconnected,
+      },
+      {
+        name: localization.actualSpeedDuplex,
+        value: initialData.carrier
+          ? `${initialData.speed} ${localization.gbitS}, ${initialData.duplex} Duplex`
+          : '',
+      },
+      {
+        name: localization.configuredSpeedDuplex,
+        value: initialData.carrier
+          ? `${initialData.speed} ${localization.gbitS}, ${initialData.duplex} Duplex`
+          : '',
+      },
+      {
+        name: localization.networks,
+        value: initialData.networks || '',
+      },
+    ],
+  },
+  {
+    title: localization.srIov,
+    id: 3,
+    type: 1,
+    rows: [
+      {
+        name: localization.status,
+        value: !initialData.srIov ? localization.notSupported : '',
+      },
+    ],
+  },
+  {
+    title: localization.ciscoDiscoveryProtocol,
+    id: 4,
+    type: 2,
+    rows: !initialData.cdp ? [] : [],
+  },
+  {
+    title: localization.linkLayerDiscoveryProtocol,
+    id: 5,
+    type: 3,
+    rows: !initialData.lldp ? [] : [],
+  },
+]
+
+export const adapterPopupFieldsFunc = (localization: UI_I_Localization) => [
+  {
+    text: localization.viewSettings,
+    value: 'adapter-view-settings',
+  },
+]

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

@@ -0,0 +1,17 @@
+import { UI_I_Localization } from '~/models/interfaces'
+import { UI_I_NavigationItem } from '~/components/common/diagramMain/models/interfaces'
+
+export const switchMainNavigationFunc = (localization: UI_I_Localization): UI_I_NavigationItem[] => [
+    {
+        text: localization.migrateVmKernelAdapter,
+        value: 'migrate-vmkernel-adapter',
+    },
+    {
+        text: localization.viewSettings,
+        value: 'switch-view-settings',
+    },
+    {
+        text: localization.remove,
+        value: 'switch-remove',
+    },
+]