bfg-common 1.4.158 → 1.4.160

package/components/common/wizards/vm/common/tooltip/Tooltip.vue

@@ -4,7 +4,7 @@
       v-if="props.isShowElement"
       href="javascript:void(0)"
       data-id="show-find-help-button"
-      @click.stop="isShowFindHelp = !isShowFindHelp"
+      @click.stop="isShowTooltip = !isShowTooltip"
       >{{ localization.common.vmOrigin }}
     </a>
     <atoms-the-icon
@@ -12,14 +12,14 @@
       data-id="show-help-tooltip-icon"
       class="info-icon"
       name="info-circle"
-      @click.stop="isShowFindHelp = !isShowFindHelp"
+      @click.stop="isShowTooltip = !isShowTooltip"
     />
 
     <atoms-tooltip-signpost
-      v-if="isShowFindHelp"
+      v-if="isShowTooltip"
       :elem-id="tooltipTestId"
       class="sign-post__content"
-      @hide="isShowFindHelp = false"
+      @hide="isShowTooltip = false"
     >
       <slot name="content"> </slot>
     </atoms-tooltip-signpost>
@@ -46,7 +46,7 @@ const tooltipTestId = computed<string>(
   () => `${props.testId}-configure-navigation`
 )
 
-const isShowFindHelp = ref<boolean>(false)
+const isShowTooltip = ref<boolean>(false)
 </script>
 
 <style lang="scss" scoped>

package/components/common/wizards/vm/migrate/Migrate.vue

@@ -1,96 +1,96 @@
 <template>
-  <atoms-modal-by-steps
-    test-id="clone-vm-wizard"
-    :show="true"
-    :title="localization.migrate"
-    :step-items="stepItems"
-    :step-position="stepPosition"
-    :loading="loading"
-    class="migrate-vm"
-    @next="onNextStep"
-    @back="onBack"
-    @change-step="onChangeStep"
-    @finish="onFinish"
-    @hide="onHideModal"
-  >
-    <template #contentHeading><span /></template>
-    <template #modalBody="{ title, description }">
-      <div class="migrate-vm__wrapper">
-        <common-wizards-vm-migrate-content-heading
-          :title="title"
-          :description="description"
-        />
-
-        <div class="migrate-vm__headline"></div>
+  <div class="migrate-vm">
+    <atoms-wizard
+      show
+      :wizard="wizard"
+      :selected-scheme="selectedScheme"
+      :title="localization.common.migrate"
+      :localization="localization"
+      class="migrate-vm-wizard"
+      test-id="migrate-vm-wizard"
+      @change-steps="onChangeSteps"
+      @hide="onHideModal"
+      @submit="onFinish"
+    >
+      <template #modalBody="{ selectedStep }">
         <common-wizards-vm-migrate-select-type
-          v-show="currentBlockId === 'select-migration-type'"
-          v-model="vmMigrateType"
+          v-if="selectedStep.id === 0"
+          v-model="form.migrate_type"
           :project="props.project"
         />
 
         <common-wizards-vm-migrate-select-target-server
-          v-show="currentBlockId === 'select-target-center'"
+          v-if="selectedStep.id === 1"
+          v-model="form.target_server"
+          v-model:connect-server="isConnectSourceServer"
+          :wizard="wizard"
         />
 
         <common-wizards-vm-migrate-select-compute-resource
-          v-show="currentBlockId === 'select-compute-resource'"
-          :submit="selectComputeResourceSubmit"
+          v-show="selectedStep.id === 2"
+          v-model="form"
+          :alert-messages="alertMessages[2]"
           :get-compute-resource-data="props.getComputeResourceData"
-          :migrate-type="vmMigrateType"
           :compute-resource-data="props.computeResourceTableData"
           :compute-resource-tree="props.computeResourceTree"
-          @next-step="onSelectComputeResourceAndNext"
+          @hide-alert="onHideAlert"
         />
 
         <common-wizards-vm-migrate-select-storage
-          v-show="currentBlockId === 'select-storage'"
-          :submit="selectStorageSubmit"
+          v-show="selectedStep.id === 3"
+          v-model="form"
+          :alert-messages="alertMessages[3]"
           :get-datastore-table-func="props.getDatastoreTableFunc"
           :datastore="props.datastore"
           :connected-storage-id-default="connectedStorageIdOnVm"
           :configure-per-disks="props.configurePerDisks"
-          @next-step="onSelectStorageAndNext"
+          @hide-alert="onHideAlert"
         />
 
         <common-wizards-vm-migrate-select-network
-          v-if="currentBlockId === 'select-networks'"
-          v-model:is-basic-network-mode="
-            dataFormLocal.selectNetwork.isShowNetworkBasic
-          "
-          v-model:network-data="dataFormLocal.selectNetwork.data"
+          v-show="selectedStep.id === 4"
+          v-model="form.network"
         />
 
         <common-wizards-vm-migrate-select-priority
-          v-show="currentBlockId === 'select-motion-priority'"
-          v-model="selectedVMotionPriority"
+          v-if="selectedStep.id === 5"
+          v-model="form.vMotion_priority"
         />
 
-        <common-wizards-vm-common-ready-complete
-          v-if="currentBlockId === 'ready-complete'"
-          :ready-complete-table-info="dataReadyView"
+        <common-ready-to-complete
+          v-if="selectedStep.id === 6"
+          :data="dataReadyView"
         />
-      </div>
-    </template>
-  </atoms-modal-by-steps>
+      </template>
+    </atoms-wizard>
+  </div>
 </template>
 
 <script setup lang="ts">
+import type {
+  UI_I_WizardStep,
+  UI_I_ValidationReturn,
+} from '~/components/atoms/wizard/lib/models/interfaces'
+import Wizard from '~/components/atoms/wizard/lib/utils/utils'
+import {
+  stepsFunc,
+  stepsSchemeInitial,
+} from '~/components/common/wizards/vm/migrate/lib/config/steps'
 import type { UI_I_Localization } from '~/lib/models/interfaces'
 import type { UI_T_Project } from '~/lib/models/types'
+import type {
+  UI_I_MigrateFormLocal,
+  UI_I_ChangeStepsSchemes,
+} from '~/components/common/wizards/vm/migrate/lib/models/interfaces'
+import type { UI_T_VmMigrateType } from '~/components/common/wizards/vm/migrate/select/type/lib/models/types'
 import type { UI_I_TablePayload } from '~/lib/models/table/interfaces'
 import type { UI_I_DatastoreTableItem } from '~/lib/models/store/storage/interfaces'
 import type { UI_I_VmSettings } from '~/lib/models/store/vm/interfaces'
-import type { UI_T_VmMigrateType } from '~/components/common/wizards/vm/migrate/lib/models/types'
 import type { UI_I_TreeNode } from '~/components/common/recursionTree/lib/models/interfaces'
-import type { UI_I_StorageConfigurePerDiskItem } from '~/components/common/wizards/vm/migrate/select/storage/table/disk/lib/models/interfaces'
+import type { UI_I_StorageConfigurePerDiskItem } from '~/components/common/wizards/vm/migrate/select/storage/configure/disk/table/lib/models/interfaces'
 import type { UI_I_TableInfoItem } from '~/components/atoms/table/info/lib/models/interfaces'
-import type { UI_I_SelectStorageReadyData } from '~/components/common/wizards/vm/migrate/select/storage/lib/models/interfaces'
-import type { UI_I_MigrateVerticalStepItem } from '~/components/common/wizards/vm/migrate/lib/models/interfaces'
-import type { UI_T_SelectVMotionPriority } from '~/components/common/wizards/vm/migrate/select/priority/lib/models/types'
-import type { UI_I_CollectedDataFormLocal } from '~/components/common/wizards/vm/migrate/lib/models/interfaces'
-import type { UI_I_ComputeResourceDataLocal } from '~/components/common/wizards/vm/migrate/select/computeResource/lib/models/interfaces'
-import { stepItemsFunc } from '~/components/common/wizards/vm/migrate/lib/utils'
 import { constructDataReadyViewFunc } from '~/components/common/wizards/vm/migrate/lib/config/constructDataReady'
+import * as validation from '~/components/common/wizards/vm/migrate/lib/validations'
 
 const props = defineProps<{
   project: UI_T_Project
@@ -102,177 +102,150 @@ const props = defineProps<{
   configurePerDisks: UI_I_StorageConfigurePerDiskItem[]
   computeResourceTableData?: any
   computeResourceTree?: UI_I_TreeNode
-  readyCompleteTableInfo?: any // пока так потом если будет нужен изменит или удалить
-  finishFunc: any
 }>()
-
 const emits = defineEmits<{
   (event: 'hide'): void
+  (event: 'finish', value: UI_I_MigrateFormLocal): void
 }>()
 
 const localization = computed<UI_I_Localization>(() => useLocal())
 
-const stepPosition = ref<number>(0)
-const loading = ref<boolean>(false)
-
-const selectStorageSubmit = ref<number>(0)
-const selectComputeResourceSubmit = ref<number>(0)
-
-const selectedVMotionPriority = ref<UI_T_SelectVMotionPriority>('high')
-
-const vmMigrateType = ref<UI_T_VmMigrateType>(
-  props.project === 'procurator' ? 'storage' : 'resource'
-)
-const dataReadyView = ref<UI_I_TableInfoItem[]>([])
-
-const stepItems = computed<UI_I_MigrateVerticalStepItem[]>(() =>
-  stepItemsFunc(localization.value, vmMigrateType.value, props.project)
-)
-const currentBlockId = computed<string>(
-  () => stepItems.value[stepPosition.value].id
-)
-
-const connectedStorageIdOnVm = computed<string>(
-  () => props.vmSettings?.storage.id || ''
+const wizard: Wizard = new Wizard(
+  stepsFunc(localization.value),
+  stepsSchemeInitial
 )
 
-const dataFormLocal = ref<UI_I_CollectedDataFormLocal>({
-  selectedComputeResource: null,
-  selectStorage: null,
-  selectNetwork: {
-    isShowNetworkBasic: true,
+const selectedScheme = computed<number[]>(() => wizard.selectedScheme.value)
+const alertMessages = computed<string[][]>(() => wizard.alertMessages.value)
+
+const isConnectSourceServer = ref<boolean>(false)
+const form = ref<UI_I_MigrateFormLocal>({
+  migrate_type: props.project === 'procurator' ? 'storage' : 'resource',
+  disk_format: 0,
+  storage: null,
+  configure: {
+    type: 'batch-configure',
+    disks: [],
+  },
+  target_server: {
+    fqdn: '',
+    user: '',
+    password: '',
+  },
+  network: {
+    isBasicNetworkMode: true,
     data: null,
   },
-  selectedVMotionPriority: 'high',
+  resource: {
+    selectedNode: null,
+    host: null,
+    cluster: null,
+    resourcePool: null,
+    vApps: null,
+  },
+  vMotion_priority: 'high',
 })
 
-const onSelectComputeResourceAndNext = (
-  event: UI_I_ComputeResourceDataLocal
-): void => {
-  dataFormLocal.value.selectedComputeResource = event
-
-  onNextStep(true)
-}
-const onSelectStorageAndNext = (event: UI_I_SelectStorageReadyData): void => {
-  dataFormLocal.value.selectStorage = event
-  // dataReadyView.value = constructDataReadyViewFunc<UI_I_SelectStorageReadyData>(
-  //   vmMigrateType.value,
-  //   props.vmName,
-  //   event
-  // )
+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(2, currentStep.id, nextStep.id)) {
+    const nameValidation = await validation.checkSelectedResourceSync(
+      localization.value,
+      form.value.resource,
+      wizard,
+      value
+    )
 
-  onNextStep(true)
-}
+    value = nameValidation.newValue
 
-watch(
-  currentBlockId,
-  (newValue: string) => {
-    if (newValue !== 'ready-complete') return
+    stepHasError = nameValidation.stepHasError
+  }
 
-    dataReadyView.value = constructDataReadyViewFunc<any>(
-      vmMigrateType.value,
-      props.vmName,
-      dataFormLocal.value
+  if (wizard.isValidateForStep(3, currentStep.id, nextStep.id)) {
+    const nameValidation = await validation.checkSelectedDatastoreSync(
+      localization.value,
+      form.value.storage,
+      wizard,
+      value
     )
-  },
-  { deep: true, immediate: true }
-)
-const onFinish = (): void => {
-  loading.value = true
-  props.finishFunc().then(() => {
-    onHideModal()
-    loading.value = false
-  })
-}
 
-let cashStep = -1
-const onNextStep = (force = false): void => {
-  const isValid = checkSubmit(force)
-  if (!isValid) return
+    value = nameValidation.newValue
 
-  const isDisabled = stepItems.value[cashStep]?.disabled
-  if (cashStep !== -1 && !isDisabled) {
-    stepPosition.value = cashStep
-    cashStep = -1
-    return
+    stepHasError = nameValidation.stepHasError
   }
 
-  stepItems.value[stepPosition.value].complete = true
-  stepItems.value[stepPosition.value + 1].disabled = false
-  stepPosition.value++
-}
-const checkSubmit = (force = false): boolean => {
-  if (currentBlockId.value === 'select-storage' && !force) {
-    selectStorageSubmit.value++
-    return false
+  return {
+    newValue: value,
+    stepHasError,
   }
+}
+const onChangeSteps = async (value: UI_I_WizardStep[]): Promise<void> =>
+  wizard.changeSteps(value, validationFunc)
 
-  if (currentBlockId.value === 'select-compute-resource' && !force) {
-    selectComputeResourceSubmit.value++
-    return false
-  }
+// Choosing Scheme
+watch(
+  () => form.value.migrate_type,
+  (newValue: UI_T_VmMigrateType) => {
+    const schemes: UI_I_ChangeStepsSchemes = {
+      procurator: {
+        storage: 0,
+      },
+      sphere: {
+        storage: 0,
+        resource: 1,
+        'resource-storage': 2,
+        server: 3,
+      },
+    }
+
+    const projectSchemes = schemes[props.project]
+
+    if (projectSchemes && projectSchemes[newValue] !== undefined) {
+      wizard.changeScheme(projectSchemes[newValue] as number)
+    }
+  },
+  { deep: true, immediate: true }
+)
 
-  return true
-}
-const onBack = (): void => {
-  stepPosition.value--
-}
-const onChangeStep = (key: number): void => {
-  if (key < stepPosition.value) {
-    stepPosition.value = key
-    return
-  }
+const loading = ref<boolean>(false)
 
-  const isValid = checkSubmit()
-  if (!isValid) {
-    cashStep = key
-    return
-  }
+const connectedStorageIdOnVm = computed<string>(
+  () => props.vmSettings?.storage.id || ''
+)
+
+const dataReadyView = computed<UI_I_TableInfoItem>(() =>
+  constructDataReadyViewFunc(props.vmName, form.value)
+)
 
-  stepPosition.value = key
+// const dataFormLocal = ref<UI_I_CollectedDataFormLocal>({
+//   selectedComputeResource: null,
+// })
+const onFinish = (): void => {
+  loading.value = true
+  emits('finish', form.value)
+  loading.value = false
 }
 
 const onHideModal = (): void => {
   emits('hide')
 }
+
+const onHideAlert = (stepId: number): void => {
+  wizard.hideAlertMessagesByStepId(stepId)
+}
 </script>
 
 <style scoped lang="scss">
 @import 'assets/scss/common/mixins.scss';
 .migrate-vm {
-  &__wrapper {
+  :deep(.modal-body) {
+    height: inherit;
     @include flex($dir: column);
-    //height: 100%;
-    padding-left: 10px;
   }
 }
-
-:deep(.has-solid.close-icon.clr-icon) {
-  width: 20px;
-  top: 0;
-}
-:deep(.modal .modal-dialog .modal-content .modal-footer) {
-  flex: unset;
-  height: unset;
-  min-height: unset;
-}
-:deep(.wizard-modal-titlebar h3) {
-  color: #000;
-  font-size: 24px;
-  font-weight: 200;
-  line-height: 27px;
-  margin: 0;
-  padding: 0;
-}
-:deep(.clr-wizard-stepnav-item) {
-  padding-left: 0;
-}
-:deep(.clr-wizard-stepnav
-    .clr-wizard-stepnav-item
-    button
-    .clr-wizard-stepnav-link-title) {
-  width: 189px;
-  font-weight: 700;
-  font-size: 13px;
-}
 </style>