bfg-common 1.0.0

package/components/common/addNetworking/Wizard.vue

@@ -0,0 +1,286 @@
+<template>
+  <div v-if="props.show" class="modal clr-wizard wizard-xl">
+    <div class="modal-dialog modal-xl relative">
+      <div class="modal-content-wrapper">
+        <nav class="modal-nav clr-wizard-stepnav-wrapper">
+          <h1 class="clr-wizard-title">
+            {{ props.title }}
+          </h1>
+          <div :class="['clr-wizard-stepnav']">
+            <div class="clr-wizard-stepnav-list">
+              <div
+                v-for="currentStep in props.stepsWithStatus"
+                :key="currentStep.id"
+                :class="[
+                  'clr-wizard clr-wizard-stepnav-item clr-nav-link nav-item',
+                  { disabled: currentStep.status === UI_E_StepStatus.Disabled },
+                  {
+                    active:
+                      currentStep.status === UI_E_StepStatus.Selected ||
+                      currentStep.status === UI_E_StepStatus.CompleteSelected,
+                  },
+                  {
+                    complete:
+                      currentStep.status === UI_E_StepStatus.Complete ||
+                      currentStep.status === UI_E_StepStatus.CompleteSelected,
+                  },
+                ]"
+              >
+                <atoms-the-icon
+                  v-if="false"
+                  :style="{
+                    opacity:
+                      currentStep.status === UI_E_StepStatus.Complete ||
+                      currentStep.status === UI_E_StepStatus.CompleteSelected
+                        ? 1
+                        : 0,
+                  }"
+                  width="14px"
+                  fill="#3aab24"
+                  name="check"
+                />
+                <button
+                  class="btn btn-link clr-wizard-stepnav-link wizard-ml-8"
+                  :disabled="currentStep.status === UI_E_StepStatus.Disabled"
+                  @click="onSelectStep(currentStep.id)"
+                >
+                  <span class="clr-wizard-stepnav-link-title">
+                    {{ currentStep.name }}
+                  </span>
+                </button>
+              </div>
+            </div>
+          </div>
+        </nav>
+        <div class="modal-content">
+          <div class="modal-header--accessible">
+            <div class="modal-title-wrapper">
+              <h2 class="modal-title">
+                <span class="modal-title-text">{{ props.secondTitle }}</span>
+              </h2>
+            </div>
+            <button class="close" @click="onHideModal">
+              <atoms-the-icon class="close-icon" name="close" />
+            </button>
+          </div>
+          <div class="modal-body">
+            <slot name="modalBody" />
+          </div>
+          <div class="modal-footer">
+            <slot name="modalFooter">
+              <button class="btn btn-link" @click="onHideModal">
+                {{ localization.cancel }}
+              </button>
+              <button
+                v-show="!props.wizard.isSelectedStep(0)"
+                class="btn btn-outline"
+                @click="onBackStep"
+              >
+                {{ localization.back }}
+              </button>
+              <button
+                v-if="props.wizard.isSelectedStep(7)"
+                class="btn btn-success"
+                @click="onFinish"
+              >
+                {{ localization.finish }}
+              </button>
+              <button v-else class="btn btn-primary" @click="onNextStep">
+                {{ localization.next }}
+              </button>
+            </slot>
+          </div>
+        </div>
+      </div>
+
+      <div v-show="props.isShowLoader" class="loader">
+        <i class="fa clr-tree-node-caret-icon spinner spinner" />
+      </div>
+    </div>
+    <div class="modal-backdrop" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { UI_I_Step } from '~/components/common/addNetworking/models/interfaces'
+import { Wizard } from '~/components/common/addNetworking/utils'
+import { UI_I_Localization } from '~/models/interfaces'
+import { UI_E_StepStatus } from '~/components/common/addNetworking/models/enums'
+
+const props = defineProps<{
+  wizard: Wizard
+  stepsWithStatus: UI_I_Step[]
+  width: string
+  height: string
+  show: boolean
+  title: string
+  isShowLoader: boolean
+  secondTitle: string
+}>()
+
+const emits = defineEmits<{
+  (event: 'select-step', id: number): void
+  (event: 'hide'): void
+  (event: 'next-step'): void
+  (event: 'finish'): void
+}>()
+
+// UI_I_Localization
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const onHideModal = (): void => emits('hide')
+const onSelectStep = (id: number): void => emits('select-step', id)
+const onNextStep = (): void => emits('next-step')
+const onBackStep = (): void => props.wizard.goToBackStep()
+const onFinish = (): void => emits('finish')
+</script>
+
+<style scoped lang="scss">
+.modal {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  z-index: 1050;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 48px;
+  overflow-y: auto;
+
+  .modal-nav {
+    background-color: var(--block-view-bg-color4);
+    .clr-wizard-title {
+      color: var(--main-color-mode);
+      font-size: 22px;
+      padding: 24px 12px 24px 24px;
+      //line-height: 1.2rem;
+    }
+  }
+
+  .modal-content-wrapper {
+    position: relative;
+    -webkit-animation-name: animateTop;
+    -webkit-animation-duration: 0.4s;
+    animation-name: animateTop;
+    animation-duration: 0.4s;
+  }
+
+  .modal-content {
+    background-color: var(--modal-bg-color);
+
+    .modal-header--accessible {
+      display: flex;
+      justify-content: space-between;
+      align-items: flex-start;
+      width: 100%;
+      padding: 24px 19px 6px 24px;
+
+      .modal-title-text {
+        color: var(--main-color-mode);
+        font-size: 22px;
+      }
+
+      .close-icon {
+        fill: var(--close-icon);
+        width: 24px;
+        height: 24px;
+      }
+    }
+
+    .modal-body {
+      padding: 0 3px;
+    }
+
+    .modal-footer {
+      display: flex;
+      justify-content: flex-end;
+      padding: 24px;
+      flex: unset;
+      min-height: 0;
+      height: auto;
+    }
+  }
+
+  .loader {
+    position: absolute;
+    z-index: 1000;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    top: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: rgba(0, 0, 0, 0.3);
+
+    .spinner {
+      left: unset;
+    }
+  }
+
+  .modal-backdrop {
+    opacity: 1;
+    background-color: rgba(0, 0, 0, 0.6);
+  }
+}
+h1,
+h2 {
+  // просмотреть если нигде не ломается переместит глобально
+  line-height: inherit;
+}
+
+.clr-wizard-stepnav {
+  &.check {
+    .clr-wizard-stepnav-item {
+      box-shadow: none;
+      display: flex;
+      align-items: center;
+
+      button {
+        height: auto;
+        font-size: 13px;
+        border-radius: 3px;
+        //margin-left: 4px;
+      }
+    }
+  }
+  .clr-wizard-stepnav-item {
+    padding: 0.3rem 0 0.4rem;
+
+    .wizard-ml-8 {
+      margin-left: 8px;
+    }
+
+    &.active {
+      button:hover,
+      button {
+        color: var(--vertical-steps-active-color);
+        background-color: var(--vertical-steps-active-bg-color);
+        cursor: default;
+        span {
+          color: var(--checkbox-mark-color);
+        }
+      }
+    }
+    &.complete:not(&.active) {
+      button {
+        background: var(--block-view-bg-color3);
+      }
+      button:hover {
+        color: var(--vertical-steps-complete-color);
+        background-color: var(--vertical-steps-complete-bg-color);
+        border-bottom: 1px solid var(--vertical-steps-hover-border-color);
+      }
+    }
+    button {
+      color: var(--add-vm-context-title);
+      .clr-wizard-stepnav-link-title {
+        font-size: 14px;
+      }
+    }
+  }
+}
+</style>

package/components/common/addNetworking/config/addNetworkingSteps.ts

@@ -0,0 +1,404 @@
+import { UI_I_Localization } from '~/models/interfaces'
+import {
+  UI_I_ConnectionSettings,
+  UI_I_IpFourSettings,
+  UI_I_PortProperties,
+  UI_I_ReadyCompleteData,
+  UI_I_ReadyCompleteFirstColumn,
+  UI_I_Step,
+  UI_I_TargetDevice,
+} from '~/components/common/addNetworking/models/interfaces'
+
+export const stepsFunc = (localization: UI_I_Localization): UI_I_Step[] => [
+  {
+    id: 0,
+    name: localization.selectConnectionType,
+    status: 0,
+  },
+  {
+    id: 1,
+    name: localization.selectTargetDevice,
+    status: 0,
+  },
+  {
+    id: 2,
+    name: localization.createStandardSwitch,
+    status: 0,
+  },
+  {
+    id: 3,
+    name: localization.portProperties,
+    status: 0,
+  },
+  {
+    id: 4,
+    name: localization.ipV4Settings,
+    status: 0,
+  },
+  {
+    id: 5,
+    name: localization.connectionSettings,
+    status: 0,
+  },
+  {
+    id: 6,
+    name: localization.addPhysicalNetworkAdapter,
+    status: 0,
+  },
+  {
+    id: 7,
+    name: localization.readyComplete,
+    status: 0,
+  },
+]
+
+export const stepsSchemeFunc = (step: UI_I_Step[]): UI_I_Step[][] => [
+  [step[0], step[1], step[3], step[4], step[7]], // Validation done, except for ipv4 (backend problems)
+  [step[0], step[1], step[2], step[3], step[4], step[7]], // Validation done, except for ipv4 (backend problems)
+  [step[0], step[1], step[5], step[7]], // Validation done,
+  [step[0], step[1], step[2], step[5], step[7]], // Disabled
+  [step[0], step[1], step[6], step[7]], // Disabled
+  [step[0], step[1], step[2], step[7]], // Disabled
+]
+
+export const secondTitleFunc = (
+  selectedStep: number,
+  localization: UI_I_Localization
+): string => {
+  let text = ''
+  switch (selectedStep) {
+    case 0:
+      text = localization.selectConnectionType
+      break
+    case 1:
+      text = localization.selectTargetDevice
+      break
+    case 2:
+      text = localization.createStandardSwitch
+      break
+    case 3:
+      text = localization.portProperties
+      break
+    case 4:
+      text = localization.ipV4Settings
+      break
+    case 5:
+      text = localization.connectionSettings
+      break
+    case 6:
+      text = localization.addPhysicalNetworkAdapter
+      break
+    case 7:
+      text = localization.readyComplete
+      break
+  }
+  return text
+}
+
+export const createSecondSchemeReadyCompleteFunc = (
+  connectionSettingsValues: UI_I_ConnectionSettings,
+  targetDeviceValues: UI_I_TargetDevice,
+  localization: UI_I_Localization
+): UI_I_ReadyCompleteData[] => [
+  {
+    id: 0,
+    type: 0,
+    rows: [
+      {
+        name: localization.virtualMachinePortGroup,
+        value: connectionSettingsValues.networkLabel,
+      },
+      {
+        name: localization.standardSwitch,
+        value: targetDeviceValues.standardSwitch,
+      },
+      {
+        name: localization.vlanId,
+        value: connectionSettingsValues.vlanId,
+      },
+    ],
+  },
+]
+
+const makeFirstColumnOfZeroAndFirstScheme = (
+  targetDevice: UI_I_TargetDevice,
+  portProperties: UI_I_PortProperties,
+  localization: UI_I_Localization,
+  isNewSwitch = false,
+  addedAdapters: string[] = []
+): UI_I_ReadyCompleteFirstColumn[] => {
+  let zero: UI_I_ReadyCompleteFirstColumn[] = [
+    {
+      name: localization.newPortGroup,
+      value: portProperties.networkLabel,
+    },
+    {
+      name: localization.standardSwitch,
+      value: targetDevice.standardSwitch,
+    },
+    {
+      name: localization.vlanId,
+      value: portProperties.vlanId,
+    },
+    {
+      name: localization.vMotion,
+      value: portProperties.services.vMotion
+        ? localization.enabled
+        : localization.disabled,
+    },
+    {
+      name: localization.provisioning,
+      value: portProperties.services.provisioning
+        ? localization.enabled
+        : localization.disabled,
+    },
+    {
+      name: localization.faultToleranceLogging,
+      value: portProperties.services.faultToleranceLogging
+        ? localization.enabled
+        : localization.disabled,
+    },
+    {
+      name: localization.management,
+      value: portProperties.services.management
+        ? localization.enabled
+        : localization.disabled,
+    },
+    {
+      name: localization.procuratorReplication,
+      value: portProperties.services.replication
+        ? localization.enabled
+        : localization.disabled,
+    },
+    {
+      name: localization.procuratorReplicationNFC,
+      value: portProperties.services.replicationNFC
+        ? localization.enabled
+        : localization.disabled,
+    },
+    {
+      name: localization.vSAN,
+      value: portProperties.services.vSAN
+        ? localization.enabled
+        : localization.disabled,
+    },
+    {
+      name: localization.procuratorBackupNFC,
+      value: portProperties.services.backupNFC
+        ? localization.enabled
+        : localization.disabled,
+    },
+    {
+      name: localization.nvmEOverTCP,
+      value: portProperties.services.nVMeOverTCP
+        ? localization.enabled
+        : localization.disabled,
+    },
+    {
+      name: localization.nvmEOverRDMA,
+      value: portProperties.services.nVMeOverRDMA
+        ? localization.enabled
+        : localization.disabled,
+    },
+  ]
+  if (isNewSwitch) {
+    zero.splice(1, 1)
+    const newSwitchFields = [
+      {
+        name: localization.newStandardSwitch,
+        value: '--',
+      },
+      {
+        name: localization.assignedAdapters,
+        value: addedAdapters.join(', '),
+      },
+      {
+        name: localization.switchMTU,
+        value: targetDevice.mtu?.toString(),
+      },
+    ]
+
+    zero = [...newSwitchFields, ...zero]
+  }
+
+  return zero
+}
+
+export const createZeroSchemeReadyCompleteFunc = (
+  targetDevice: UI_I_TargetDevice,
+  portProperties: UI_I_PortProperties,
+  ipFourSettings: UI_I_IpFourSettings,
+  localization: UI_I_Localization,
+  isNewSwitch = false,
+  addedAdapters: string[] = []
+): UI_I_ReadyCompleteData[] => [
+  {
+    id: 0,
+    type: 0,
+    rows: makeFirstColumnOfZeroAndFirstScheme(
+      targetDevice,
+      portProperties,
+      localization,
+      isNewSwitch,
+      addedAdapters
+    ),
+  },
+  {
+    id: 1,
+    type: 0,
+    title: localization.nicSettings,
+    rows: [
+      {
+        name: localization.mtu,
+        value: portProperties.mtu.size.toString(),
+      },
+      {
+        name: localization.tcpIpStack,
+        value: localization[portProperties.tcp],
+      },
+    ],
+  },
+  {
+    id: 2,
+    type: 0,
+    title: localization.ipV4Settings,
+    rows:
+      ipFourSettings.ipSettings === '0'
+        ? [
+            {
+              name: localization.dhcp,
+              value: localization.enabled,
+            },
+          ]
+        : ipFourSettings.static.defaultGateway.override
+        ? [
+            {
+              name: localization.ipv4address,
+              value: ipFourSettings.static.ipFourAddress,
+            },
+            {
+              name: localization.subnetMask,
+              value: ipFourSettings.static.subnetMask,
+            },
+            {
+              name: localization.defaultGatewayForIPv4,
+              value: ipFourSettings.static.defaultGateway.value,
+            },
+          ]
+        : [
+            {
+              name: localization.ipv4address,
+              value: ipFourSettings.static.ipFourAddress,
+            },
+            {
+              name: localization.subnetMask,
+              value: ipFourSettings.static.subnetMask,
+            },
+          ],
+  },
+]
+
+export const createFirstSchemeReadyCompleteFunc = (
+  targetDevice: UI_I_TargetDevice,
+  portProperties: UI_I_PortProperties,
+  ipFourSettings: UI_I_IpFourSettings,
+  addedAdapters: string[],
+  localization: UI_I_Localization
+): UI_I_ReadyCompleteData[] =>
+  createZeroSchemeReadyCompleteFunc(
+    targetDevice,
+    portProperties,
+    ipFourSettings,
+    localization,
+    true,
+    addedAdapters
+  )
+
+// For later
+
+// const viewSettingsFields = [
+//   {
+//     id: 0,
+//     type: 0,
+//     rows: [
+//       {
+//         name: 'New port group',
+//         value: 'VMkernel',
+//       },
+//       {
+//         name: 'Standard switch',
+//         value: 'vSwitch0',
+//       },
+//       {
+//         name: 'VLAN ID',
+//         value: 'None (0)',
+//       },
+//       {
+//         name: 'vMotion',
+//         value: 'Disabled',
+//       },
+//       {
+//         name: 'Provisioning',
+//         value: 'Disabled',
+//       },
+//       {
+//         name: 'Fault Tolerance logging',
+//         value: 'Disabled',
+//       },
+//       {
+//         name: 'Management',
+//         value: 'Disabled',
+//       },
+//       {
+//         name: 'Iridium Replication',
+//         value: 'Disabled',
+//       },
+//       {
+//         name: 'Iridium Replication NFC',
+//         value: 'Disabled',
+//       },
+//       {
+//         name: 'vSAN',
+//         value: 'Disabled',
+//       },
+//       {
+//         name: 'Iridium Backup NFC',
+//         value: 'Disabled',
+//       },
+//       {
+//         name: 'NVMe over TCP',
+//         value: 'Disabled',
+//       },
+//       {
+//         name: 'NVMe over RDMA',
+//         value: 'Disabled',
+//       },
+//     ],
+//   },
+//   {
+//     title: 'NIC settings',
+//     id: 1,
+//     type: 0,
+//     rows: [
+//       {
+//         name: 'MTU',
+//         value: '1500',
+//       },
+//       {
+//         name: 'TCP/IP stack',
+//         value: 'Default',
+//       },
+//     ],
+//   },
+//   {
+//     title: 'IPv4 settings',
+//     id: 2,
+//     type: 0,
+//     rows: [
+//       {
+//         name: 'DHCP',
+//         value: 'Enabled',
+//       },
+//     ],
+//   },
+// ]