bfg-common 1.2.189 → 1.2.190

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/{wizards/network/add/config/steps.ts → addNetworking/config/addNetworkingSteps.ts}

@@ -5,143 +5,96 @@ import {
   UI_I_PortProperties,
   UI_I_ReadyCompleteData,
   UI_I_ReadyCompleteFirstColumn,
+  UI_I_Step,
   UI_I_TargetDevice,
-} from '~/components/common/wizards/network/add/models/interfaces'
-import { UI_E_ValidationFields } from '~/components/common/wizards/network/add/models/enums'
-import { UI_I_WizardStep } from '~/components/atoms/wizard/models/interfaces'
-import { UI_E_WIZARD_STATUS } from '~/components/atoms/wizard/models/enums'
+} from '~/components/common/addNetworking/models/interfaces'
 
-export const stepsFunc = (
-  localization: UI_I_Localization
-): UI_I_WizardStep[] => [
+export const stepsFunc = (localization: UI_I_Localization): UI_I_Step[] => [
   {
     id: 0,
-    title: localization.selectConnectionType,
-    subTitle: localization.selectConnectionTypeToCreate,
-    status: UI_E_WIZARD_STATUS.SELECTED,
-    fields: {},
-    isValid: true,
+    name: localization.selectConnectionType,
+    status: 0,
   },
   {
     id: 1,
-    title: localization.selectTargetDevice,
-    subTitle: localization.selectTargetDeviceForNewConnection,
-    status: UI_E_WIZARD_STATUS.INACTIVE,
-    fields: {
-      [UI_E_ValidationFields.TARGET_DEVICE_STANDARD_SWITCH]: {
-        alert: '',
-        field: '',
-      },
-      [UI_E_ValidationFields.TARGET_DEVICE_NETWORK]: {
-        alert: '',
-        field: '',
-      },
-      [UI_E_ValidationFields.TARGET_DEVICE_SWITCH]: {
-        alert: '',
-        field: '',
-      },
-      [UI_E_ValidationFields.TARGET_DEVICE_MTU]: {
-        alert: '',
-        field: '',
-      },
-    },
-    isValid: true,
+    name: localization.selectTargetDevice,
+    status: 0,
   },
   {
     id: 2,
-    title: localization.createStandardSwitch,
-    subTitle: localization.assignFreePhysicalNetworkAdaptersToTheNewSwitch,
-    status: UI_E_WIZARD_STATUS.INACTIVE,
-    fields: {},
-    isValid: true,
+    name: localization.createStandardSwitch,
+    status: 0,
   },
   {
     id: 3,
-    title: localization.portProperties,
-    subTitle: localization.specifyVMkernelPortSettings,
-    status: UI_E_WIZARD_STATUS.INACTIVE,
-    fields: {
-      [UI_E_ValidationFields.PORT_PROPERTIES_NETWORK]: {
-        field: '',
-        alert: '',
-      },
-      [UI_E_ValidationFields.PORT_PROPERTIES_VLAN]: {
-        field: '',
-        alert: '',
-      },
-      [UI_E_ValidationFields.PORT_PROPERTIES_MTU]: {
-        field: '',
-        alert: '',
-      },
-    },
-    isValid: true,
+    name: localization.portProperties,
+    status: 0,
   },
   {
     id: 4,
-    title: localization.ipV4Settings,
-    subTitle: localization.specifyVMkernelIPv4Settings,
-    status: UI_E_WIZARD_STATUS.INACTIVE,
-    fields: {
-      [UI_E_ValidationFields.IPV_SETTINGS_IPV]: {
-        field: '',
-        alert: '',
-      },
-      [UI_E_ValidationFields.IPV_SETTINGS_MASK]: {
-        field: '',
-        alert: '',
-      },
-      [UI_E_ValidationFields.IPV_SETTINGS_GATEWAY]: {
-        field: '',
-        alert: '',
-      },
-    },
-    isValid: true,
+    name: localization.ipV4Settings,
+    status: 0,
   },
   {
     id: 5,
-    title: localization.connectionSettings,
-    subTitle:
-      localization.useNetworkLabelsToIdentifyMigrationCompatibleTwoHosts,
-    status: UI_E_WIZARD_STATUS.INACTIVE,
-    fields: {
-      [UI_E_ValidationFields.CONNECTION_SETTINGS_NETWORK]: {
-        field: '',
-        alert: '',
-      },
-      [UI_E_ValidationFields.CONNECTION_SETTINGS_VLAN]: {
-        field: '',
-        alert: '',
-      },
-    },
-    isValid: true,
+    name: localization.connectionSettings,
+    status: 0,
   },
   {
     id: 6,
-    title: localization.addPhysicalNetworkAdapter,
-    subTitle: localization.assignPhysicalNetworkAdaptersToTheSwitch,
-    status: UI_E_WIZARD_STATUS.INACTIVE,
-    fields: {},
-    isValid: true,
+    name: localization.addPhysicalNetworkAdapter,
+    status: 0,
   },
   {
     id: 7,
-    title: localization.readyComplete,
-    subTitle: localization.reviewYourSettingsSelectionsWizard,
-    status: UI_E_WIZARD_STATUS.INACTIVE,
-    fields: {},
-    isValid: true,
+    name: localization.readyComplete,
+    status: 0,
   },
 ]
 
-export const stepsSchemeInitial: number[][] = [
-  [0, 1, 3, 4, 7], // Validation done, except for ipv4 (backend problems)
-  [0, 1, 2, 3, 4, 7], // Validation done, except for ipv4 (backend problems)
-  [0, 1, 5, 7], // Validation done,
-  [0, 1, 2, 5, 7], // Disabled
-  [0, 1, 6, 7], // Disabled
-  [0, 1, 2, 7], // Disabled
+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,

package/components/common/{wizards/network/add → addNetworking}/config/index.ts

@@ -1,12 +1,15 @@
-import * as addNetworkingStepsConfig from './steps'
+import * as addNetworkingStepsConfig from './addNetworkingSteps'
 import * as initialData from './initialData'
+import * as temporaryData from './temporaryData'
+import * as validationData from './validation'
 import * as portProperties from './portPropertiesStep'
 import * as selectSwitches from './selectSwitch'
 import * as sendData from './sendData'
 
 export const {
   stepsFunc,
-  stepsSchemeInitial,
+  stepsSchemeFunc,
+  secondTitleFunc,
   createSecondSchemeReadyCompleteFunc,
   createZeroSchemeReadyCompleteFunc,
   createFirstSchemeReadyCompleteFunc,
@@ -19,7 +22,18 @@ export const {
   portPropertiesInitial,
   ipFourSettingsInitial,
   connectionSettingsInitial,
+  errorMessagesInitialFunc,
+  isNetworkInvalidInitial,
+  isValidNetwork,
+  isInvalidNetwork,
 } = initialData
+export const { temporarySwitches, temporaryNetworks } = temporaryData
+export const {
+  connectionSettingsFieldsErrorMessages,
+  ipFourSettingsFieldsErrorMessages,
+  portPropertiesFieldsErrorMessages,
+  targetDeviceFieldsErrorMessages,
+} = validationData
 export const { portPropertiesEnabledServicesFunc } = portProperties
 export const {
   selectStandardSwitchTableHeadFunc,

package/components/common/{wizards/network/add → addNetworking}/config/initialData.ts

@@ -1,12 +1,11 @@
 import {
   UI_I_ConnectionSettings,
-  UI_I_IpFourSettings,
-  UI_I_NetworkValidation,
+  UI_I_IpFourSettings, UI_I_NetworkValidation,
   UI_I_PortProperties,
   UI_I_Services,
   UI_I_TargetDevice,
   UI_I_VlanIdData,
-} from '~/components/common/wizards/network/add/models/interfaces'
+} from '~/components/common/addNetworking/models/interfaces'
 
 export const servicesInitial: UI_I_Services = {
   vMotion: false,
@@ -57,7 +56,23 @@ export const connectionSettingsInitial: UI_I_ConnectionSettings = {
   vlanId: 'None (0)',
 }
 
+export const errorMessagesInitialFunc = (qty: number): string[][] =>
+  new Array(qty).fill([])
+
 export const vlanIdSelectData: UI_I_VlanIdData[] = [
   { text: 'None (0)', value: 'None (0)' },
   { text: 'All (4095)', value: 'All (4095)' },
-]
+]
+
+export const isNetworkInvalidInitial: UI_I_NetworkValidation = {
+  valid: false,
+  checked: false,
+}
+export const isValidNetwork: UI_I_NetworkValidation = {
+  valid: true,
+  checked: true,
+}
+export const isInvalidNetwork: UI_I_NetworkValidation = {
+  valid: false,
+  checked: true,
+}

package/components/common/{wizards/network/add → addNetworking}/config/portPropertiesStep.ts

@@ -1,5 +1,5 @@
 import { UI_I_Localization } from '~/models/interfaces'
-import { UI_I_PortPropertiesEnabledService } from '~/components/common/wizards/network/add/models/interfaces'
+import { UI_I_PortPropertiesEnabledService } from '~/components/common/addNetworking/models/interfaces'
 
 export const portPropertiesEnabledServicesFunc = (
   localization: UI_I_Localization,

package/components/common/{wizards/network/add → addNetworking}/config/selectSwitch.ts

@@ -1,5 +1,5 @@
 import { UI_I_Localization } from '~/models/interfaces'
-import { UI_I_TableHead } from '~/components/common/wizards/network/add/models/interfaces'
+import { UI_I_TableHead } from '~/components/common/addNetworking/models/interfaces'
 
 export const selectNetworkTableHeadFunc = (
   localization: UI_I_Localization

package/components/common/{wizards/network/add → addNetworking}/config/sendData.ts

@@ -5,7 +5,7 @@ import {
   UI_I_PortProperties,
   UI_I_TargetDevice,
   UI_I_AddNetworkingSecondOrThirdSchemeDataSend,
-} from '~/components/common/wizards/network/add/models/interfaces'
+} from '~/components/common/addNetworking/models/interfaces'
 import { UI_I_AdapterStatus } from '~/components/common/diagramMain/models/interfaces'
 
 export const addNetworkingSecondOrThirdSchemeDataFunc = (

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

@@ -0,0 +1,8 @@
+export const temporarySwitches = [
+    { name: 'vSwitch0', id: '0' },
+    { name: 'vSwitch1', id: '1' },
+]
+export const temporaryNetworks: {name: string, id: string}[] = [
+    // { name: 'net-1', id: '0' },
+    // { name: 'net-2', id: '1' },
+]

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

@@ -0,0 +1,23 @@
+export const connectionSettingsFieldsErrorMessages = {
+  networkLabel: '',
+  vlanId: '',
+}
+
+export const ipFourSettingsFieldsErrorMessages = {
+  ipFourAddress: '',
+  subnetMask: '',
+  defaultGateway: '',
+}
+
+export const portPropertiesFieldsErrorMessages = {
+  networkLabel: '',
+  vlanId: '',
+  mtu: '',
+}
+
+export const targetDeviceFieldsErrorMessages = {
+  network: '',
+  switch: '',
+  standardSwitch: '',
+  mtu: '',
+}

package/components/common/{wizards/network/add → addNetworking}/modals/SelectNetwork.vue

@@ -47,8 +47,8 @@ import {
   UI_I_BodyItems,
   UI_I_Network,
   UI_I_SelectedNetwork,
-} from '~/components/common/wizards/network/add/models/interfaces'
-import { selectStandardSwitchTableHeadFunc } from '~/components/common/wizards/network/add/config'
+} from '~/components/common/addNetworking/models/interfaces'
+import { selectStandardSwitchTableHeadFunc } from '~/components/common/addNetworking/config'
 
 interface I_SelectNetworkModalProps {
   show: boolean

package/components/common/{wizards/network/add → addNetworking}/modals/SelectStandardSwitch.vue

@@ -36,10 +36,10 @@ import { UI_I_Localization } from '~/models/interfaces'
 import {
     UI_I_Switch,
     UI_I_SelectedSwitch, UI_I_BodyItems,
-} from '~/components/common/wizards/network/add/models/interfaces'
+} from '~/components/common/addNetworking/models/interfaces'
 import {
   selectStandardSwitchTableHeadFunc
-} from '~/components/common/wizards/network/add/config'
+} from '~/components/common/addNetworking/config'
 
 interface I_SelectSwitchModalProps {
   show: boolean

package/components/common/{wizards/network/add → addNetworking}/modals/SelectSwitch.vue

@@ -37,8 +37,8 @@ import {
   UI_I_Switch,
   UI_I_SelectedSwitch,
   UI_I_BodyItems,
-} from '~/components/common/wizards/network/add/models/interfaces'
-import { selectSwitchTableHeadFunc } from '~/components/common/wizards/network/add/config'
+} from '~/components/common/addNetworking/models/interfaces'
+import { selectSwitchTableHeadFunc } from '~/components/common/addNetworking/config'
 
 interface I_SelectSwitchModalProps {
   show: boolean

package/components/common/addNetworking/models/enums.ts

@@ -0,0 +1,7 @@
+export const enum UI_E_StepStatus {
+    Disabled,
+    Selected,
+    Active,
+    Complete,
+    CompleteSelected
+}