bfg-common 1.4.69 → 1.4.70

package/components/common/wizards/datastore/add/Add.vue

@@ -1,289 +1,419 @@
 <template>
   <div class="new-datastore">
-    <atoms-wizard
-      show
-      :wizard="wizard"
-      :selected-scheme="selectedScheme"
-      :title="localization.newDatastore"
-      :localization="localization"
-      class="add-datastore"
+    <atoms-modal-by-steps
       test-id="add-datastore-wizard"
-      @change-steps="onChangeSteps"
+      :show="true"
+      :title="localization.common.newDatastore"
+      :step-items="stepItems"
+      :step-position="stepPosition"
+      :loading="loading"
+      @finish="onAddDatastore"
+      @next="onNextStep"
+      @back="back"
+      @change-step="onChangeStep"
       @hide="onHideModal"
-      @submit="onFinish"
     >
-      <template #modalBody="{ selectedStep }">
-        <common-wizards-datastore-add-types
-          v-if="selectedStep.id === 0"
-          v-model="form"
-          v-model:datastore-type="datastoreType"
-          :project="props.project"
-        />
-
-        <common-wizards-datastore-add-local
-          v-if="selectedStep.id === 1"
-          v-model="form"
-          :project="props.project"
-          :step-id="selectedStep.id"
-          :datastore-type="datastoreType"
-          :alert-messages="alertMessages[1]"
-          :messages-fields="selectedStep.fields"
-          @hide-alert="onHideAlert"
-        />
-
-        <common-wizards-datastore-add-shared-storm
-          v-show="datastoreType === 'shared-storm'"
-          v-model="form"
-          :project="props.project"
-          :step-id="selectedStep.id"
-          :datastore-type="datastoreType"
-          :alert-messages="alertMessages[selectedStep.id]"
-          :messages-fields="selectedStep.fields"
-          :hosts="props.nfsHosts"
-          :is-main-filter="props.isMainFilter"
-          :host-id="props.hostId"
-          @hide-alert="onHideAlert"
-          @main-filter="emits('main-filter', $event)"
-        />
-
-        <common-wizards-datastore-add-nfs
-          v-show="datastoreType === 'nfs'"
-          v-model="form"
-          :project="props.project"
-          :step-id="selectedStep.id"
-          :alert-messages="alertMessages[selectedStep.id]"
-          :messages-fields="selectedStep.fields"
-          :hosts="props.nfsHosts"
-        />
-
-        <common-wizards-datastore-add-ready-complete
-          v-show="selectedStep.id === 11"
-          :data-ready-view="dataReadyView"
-        />
+      <template #modalBody>
+        <div class="new-datastore__body">
+          <!--          :project="props.mode"-->
+          <common-wizards-datastore-add-types
+            v-show="stepPosition === 0"
+            v-model:type="datastoreType"
+          />
+
+          <common-wizards-datastore-add-local
+            v-show="datastoreType === 'local' && !isShowCompleteBlock"
+            :mode="props.mode"
+            :step-position="stepPosition"
+            :datastore-type="datastoreType"
+            :local-create-name-submit="localCreateNameSubmit"
+            :datacenter-hosts="props.datacenterHosts"
+            :is-main-filter="props.isMainFilter"
+            @loading="(e) => (loading = e)"
+            @submit="onSaveNameAndNextLocal"
+            @main-filter="emits('main-filter', $event)"
+          />
+
+          <common-wizards-datastore-add-shared-storm
+            v-show="datastoreType === 'shared-storm' && !isShowCompleteBlock"
+            :mode="props.mode"
+            :step-position="stepPosition"
+            :datastore-type="datastoreType"
+            :device-selection-submit="deviceSelectionSubmit"
+            :datacenter-hosts="props.datacenterHosts"
+            :is-main-filter="props.isMainFilter"
+            :host-id="props.hostId"
+            @loading="(e) => (loading = e)"
+            @submit="onSaveAndNextSharedStorm"
+            @main-filter="emits('main-filter', $event)"
+          />
+
+          <common-wizards-datastore-add-nfs
+            v-show="datastoreType === 'nfs' && !isShowCompleteBlock"
+            :mode="props.mode"
+            :step-position="stepPosition"
+            :datastore-type="datastoreType"
+            :nfs-configuration-submit="nfsConfigurationSubmit"
+            :host-accessibility-submit="hostAccessibilitySubmit"
+            :hosts="props.nfsHosts"
+            @loading="(e) => (loading = e)"
+            @change-nfs-version="updateNfsVersion"
+            @submit="saveChangesAndNextNfs"
+          />
+
+          <common-wizards-datastore-add-ready-complete
+            v-show="isShowCompleteBlock"
+            :data-ready-view="dataReadyView"
+          />
+        </div>
       </template>
-    </atoms-wizard>
+    </atoms-modal-by-steps>
   </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/datastore/add/lib/config/steps'
-
 import type { UI_I_Localization } from '~/lib/models/interfaces'
-import type { UI_T_Project } from '~/lib/models/types'
-import type { UI_T_DatastoreType } from '~/components/common/wizards/datastore/add/lib/models/types'
+import type { UI_I_VerticalStepItem } from '~/components/atoms/lib/models/interfaces'
+import type {
+  UI_T_DatastoreType,
+  UI_T_NfsType,
+  UI_T_WizardDatastoreMode,
+} from '~/components/common/wizards/datastore/add/lib/models/types'
 import type { UI_I_CreateDatastoreForm } from '~/components/common/wizards/datastore/add/lib/models/interfaces'
-import type { UI_I_DetailsItem } from '~/components/common/details/lib/models/interfaces'
-import type { UI_I_CreateDatastoreHosts } from '~/components/common/wizards/datastore/add/nfs/accessibility/tablesView/lib/models/interfaces'
-import type { UI_I_ChangeStepsSchemes } from '~/components/common/wizards/datastore/add/lib/models/interfaces'
-import { E_DatastoreTypeKode } from '~/components/common/wizards/datastore/add/lib/models/enums'
+import type {
+  UI_I_LunDisk,
+  UI_I_SelectHostOptions,
+} from '~/components/common/wizards/datastore/add/sharedStorm/deviceSelection/lib/models/interfaces'
+import { stepItemsFunc } from '~/components/common/wizards/datastore/add/lib/config/stepItems'
 import { constructDataReadyViewFunc } from '~/components/common/wizards/datastore/add/readyComplete/lib/config/propertiesDetails'
-import * as validation from '~/components/common/wizards/datastore/add/lib/validations'
 
 const props = defineProps<{
-  project: UI_T_Project
-  nfsHosts?: UI_I_CreateDatastoreHosts
-  hostId?: string
+  // TODO refactoring to project
+  mode: UI_T_WizardDatastoreMode
+  finishFunc: (
+    datastoreForm: UI_I_CreateDatastoreForm,
+    datastoreType: UI_T_DatastoreType,
+    version: UI_T_NfsType
+  ) => Promise<void>
+  datacenterHosts?: UI_I_SelectHostOptions[]
+  nfsHosts?: any
   isMainFilter?: boolean
+  hostId?: string
 }>()
 const emits = defineEmits<{
   (event: 'hide'): void
-  (event: 'finish', value: any): void
+  (event: 'global-refresh'): void
   (event: 'main-filter', value: string): void
 }>()
 
 const localization = computed<UI_I_Localization>(() => useLocal())
 
-const wizard: Wizard = new Wizard(
-  stepsFunc(localization.value),
-  stepsSchemeInitial
+const loading = ref<boolean>(false)
+const datastoreType = ref<UI_T_DatastoreType>(
+  // props.mode === 'procurator' ? 'local' : 'shared-storm'
+  'shared-storm'
 )
+const nfsVersion = ref<UI_T_NfsType>('nfs-3')
 
-const selectedScheme = computed<number[]>(() => wizard.selectedScheme.value)
-const alertMessages = computed<string[][]>(() => wizard.alertMessages.value)
-
-// const datastoreType = ref<UI_T_DatastoreType>(
-//   props.project === 'procurator' ? 'local' : 'shared-storm'
-// )
-const datastoreType = ref<UI_T_DatastoreType>('shared-storm')
-const form = ref<UI_I_CreateDatastoreForm>({
-  name: 'Datastore',
-  lunDisk: [],
-  hosts: props.hostId ? [props?.hostId] : [],
-  type_code: E_DatastoreTypeKode[datastoreType.value],
-  nfsVersion: 'nfs-3',
-  readonly: false,
-  server: '',
-  folder: '',
+const stepPosition = ref<number>(0)
+const dataReadyView = ref<any>([])
+
+const datastoreForm = ref<UI_I_CreateDatastoreForm>({
+  local: {
+    name: '',
+    hosts: [],
+    type_code: 1,
+  },
+  sharedStorm: {
+    name: '',
+    dev_names: [],
+    hosts: [],
+    pool_name: '',
+    type_code: 2,
+  },
+  nfs: {
+    name: '',
+    server: '',
+    folder: '',
+    readonly: false,
+    version: nfsVersion.value,
+    type_code: 4,
+    hosts: [],
+  },
 })
 
-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(1, currentStep.id, nextStep.id)) {
-    const nameValidation = await validation.checkDatastoreNameAsync(
-      localization.value,
-      value,
-      form.value,
-      1,
-      'datastoreName',
-      wizard,
-      props.project
-    )
-
-    value = nameValidation.newValue
-
-    stepHasError = nameValidation.stepHasError
-  }
+const stepItems = computed<UI_I_VerticalStepItem[]>(() =>
+  stepItemsFunc(localization.value, datastoreType.value, props.mode)
+)
 
-  if (wizard.isValidateForStep(2, currentStep.id, nextStep.id)) {
-    const nameValidation = await validation.checkDatastoreNameAsync(
-      localization.value,
-      value,
-      form.value,
-      2,
-      'datastoreName',
-      wizard,
-      props.project
-    )
-
-    value = nameValidation.newValue
-
-    const lunDiskValidation = validation.checkSelectedLunDiskSync(
-      localization.value,
-      form.value,
-      wizard,
-      value,
-      props.project,
-      props.hostId
-    )
-
-    value = lunDiskValidation.newValue
-
-    stepHasError = nameValidation.stepHasError || lunDiskValidation.stepHasError
+let cashStep = -1
+const onNextStep = (force = false): void => {
+  const isValid = checkSubmit(force)
+
+  if (!isValid) {
+    return
   }
 
-  if (wizard.isValidateForStep(5, currentStep.id, nextStep.id)) {
-    const nameValidation = await validation.checkDatastoreNameAsync(
-      localization.value,
-      value,
-      form.value,
-      5,
-      'name',
-      wizard,
-      props.project
-    )
-    value = nameValidation.newValue
-
-    const folderValidation = validation.checkNfsFolderSync(
-      localization.value,
-      form.value.folder,
-      wizard,
-      value
-    )
-    value = folderValidation.newValue
-
-    const serverValidation = validation.checkNfsServerSync(
-      localization.value,
-      form.value.server,
-      wizard,
-      value
-    )
-    value = serverValidation.newValue
-
-    stepHasError =
-      nameValidation.stepHasError ||
-      folderValidation.stepHasError ||
-      serverValidation.stepHasError
+  const isDisabled = stepItems.value[cashStep]?.disabled
+  if (cashStep !== -1 && !isDisabled) {
+    stepPosition.value = cashStep
+    cashStep = -1
+    return
   }
 
-  if (wizard.isValidateForStep(6, currentStep.id, nextStep.id)) {
-    const nameValidation = await validation.checkHostsAccessibilitySync(
-      localization.value,
-      form.value.hosts,
-      wizard,
-      value
-    )
+  stepItems.value[stepPosition.value].complete = true
+  stepItems.value[stepPosition.value + 1].disabled = false
+  stepPosition.value++
+}
 
-    value = nameValidation.newValue
+const back = (): void => {
+  stepPosition.value--
+}
 
-    stepHasError = nameValidation.stepHasError
+const onChangeStep = (key: number): void => {
+  if (key < stepPosition.value) {
+    stepPosition.value = key
+    return
   }
 
-  return {
-    newValue: value,
-    stepHasError,
+  const isValid = checkSubmit()
+
+  if (!isValid) {
+    cashStep = key
+    return
   }
+
+  stepPosition.value = key
+}
+const onHideModal = (): void => {
+  emits('hide')
 }
 
-const onChangeSteps = async (value: UI_I_WizardStep[]): Promise<void> =>
-  wizard.changeSteps(value, validationFunc)
-
-// Choosing Scheme
-watch(
-  datastoreType,
-  (newValue: UI_T_DatastoreType) => {
-    const schemes: UI_I_ChangeStepsSchemes = {
-      procurator: {
-        local: 0,
-        'shared-storm': 1,
-        nfs: 2,
-      },
-      sphere: {
-        'shared-storm': 3,
-        nfs: 4,
-      },
+const updateNfsVersion = (event: UI_T_NfsType): void => {
+  nfsVersion.value = event
+  const { name, server, folder, hosts } = datastoreForm.value.nfs
+  saveChangesAndNextNfs({ name, server, folder, hosts }, false)
+}
+
+const localCreateNameSubmit = ref<number>(0)
+
+const nfsConfigurationSubmit = ref<number>(0)
+const hostAccessibilitySubmit = ref<number>(0)
+
+const deviceSelectionSubmit = ref<number>(0)
+
+const checkSubmit = (force = false): boolean => {
+  if (datastoreType.value === 'local') {
+    if (stepPosition.value === 1 && !force) {
+      localCreateNameSubmit.value++
+      return false
     }
+  }
 
-    const projectSchemes = schemes[props.project]
+  if (datastoreType.value === 'shared-storm') {
+    if (stepPosition.value === 1 && !force) {
+      deviceSelectionSubmit.value++
+      return false
+    }
+  }
 
-    if (projectSchemes && projectSchemes[newValue] !== undefined) {
-      wizard.changeScheme(projectSchemes[newValue] as number)
+  if (datastoreType.value === 'nfs') {
+    if (stepPosition.value === 2 && !force) {
+      nfsConfigurationSubmit.value++
+      return false
     }
-  },
-  { deep: true, immediate: true }
-)
 
-const dataReadyView = computed<UI_I_DetailsItem>(() =>
-  constructDataReadyViewFunc(
+    if (props.mode === 'sphere' && stepPosition.value === 3 && !force) {
+      hostAccessibilitySubmit.value++
+      return false
+    }
+    // if (
+    //   ((stepPosition.value === 4 && nfsVersion.value === 'nfs-4.1') ||
+    //     (stepPosition.value === 3 && nfsVersion.value === 'nfs-3')) &&
+    //   !force
+    // ) {
+    //   hostAccessibilitySubmit.value++
+    //   return false
+    // }
+  }
+
+  return true
+}
+
+const isWizardModeForSphere = computed<boolean>(() => props.mode === 'sphere')
+
+const onSaveNameAndNextLocal = (event: any): void => {
+  const { local } = datastoreForm.value
+
+  if (isWizardModeForSphere.value) {
+    local.name = event.name
+    local.hosts.push(event.host)
+  }
+
+  if (!isWizardModeForSphere.value) {
+    local.name = event
+  }
+
+  dataReadyView.value = constructDataReadyViewFunc(
     localization.value,
-    form.value,
-    props.project,
-    props.nfsHosts
+    'local',
+    event,
+    isWizardModeForSphere.value
   )
-)
 
-const onHideAlert = (stepId: number): void => {
-  wizard.hideAlertMessagesByStepId(stepId)
+  onNextStep(true)
 }
-const onHideModal = (): void => {
-  emits('hide')
+
+const onSaveAndNextSharedStorm = (event: any): void => {
+  const { sharedStorm } = datastoreForm.value
+  sharedStorm.name = event.name
+  sharedStorm.dev_names = event.lunDisk.map((lun: UI_I_LunDisk) => lun.name)
+  sharedStorm.hosts = [event.host]
+
+  dataReadyView.value = constructDataReadyViewFunc(
+    localization.value,
+    'shared-storm',
+    event,
+    isWizardModeForSphere.value
+  )
+
+  onNextStep(true)
 }
-const onFinish = (): void => {
-  emits('finish', form.value)
+const saveChangesAndNextNfs = (event: any, next = true): void => {
+  const { nfs } = datastoreForm.value
+  nfs.name = event.name
+  nfs.folder = event.folder
+  nfs.server = event.server
+  nfs.hosts = event.hosts
+
+  // TODO refactoring
+  const hostsNames = props.nfsHosts
+    ? props.nfsHosts.items
+        .filter((host) => event.hosts.includes(host.id))
+        .map((host) => host.host)
+    : []
+
+  dataReadyView.value = constructDataReadyViewFunc(
+    localization.value,
+    'nfs',
+    {
+      ...event,
+      hosts: hostsNames,
+      version: nfsVersion.value,
+    },
+    isWizardModeForSphere.value
+  )
+
+  next && onNextStep(true)
 }
-// watch(
-//   () => props.isLoading,
-//   (newValue) => {
-//     wizard.setLoader(newValue)
-//   },
-//   { immediate: true }
-// )
+
+const isShowCompleteBlock = computed<boolean>(() => {
+  // TODO refactoring
+  const localStep = datastoreType.value === 'local' && stepPosition.value === 2
+
+  const sharesStep =
+    datastoreType.value === 'shared-storm' &&
+    (props.mode === 'procurator'
+      ? stepPosition.value === 3
+      : stepPosition.value === 2)
+
+  let nfsFirst
+  if (props.mode === 'procurator') {
+    nfsFirst =
+      datastoreType.value === 'nfs' &&
+      nfsVersion.value === 'nfs-3' &&
+      stepPosition.value === 3
+  } else {
+    nfsFirst =
+      datastoreType.value === 'nfs' &&
+      nfsVersion.value === 'nfs-3' &&
+      stepPosition.value === 4
+  }
+
+  let nfsSecond
+  if (props.mode === 'procurator') {
+    nfsSecond =
+      datastoreType.value === 'nfs' &&
+      nfsVersion.value === 'nfs-4.1' &&
+      stepPosition.value === 3
+  } else {
+    nfsSecond =
+      datastoreType.value === 'nfs' &&
+      nfsVersion.value === 'nfs-4.1' &&
+      stepPosition.value === 4
+  }
+
+  return localStep || sharesStep || nfsFirst || nfsSecond
+})
+
+const onAddDatastore = async (): Promise<void> => {
+  loading.value = true
+
+  props
+    .finishFunc(datastoreForm.value, datastoreType.value, nfsVersion.value)
+    .then(() => {
+      emits('global-refresh')
+      loading.value = false
+      onHideModal()
+    })
+}
+
+// const createDatastoreFromLocal = async (): Promise<API_UI_I_Error> => {
+//   const { local } = datastoreForm.value
+//
+//   return await createDatastore<Omit<UI_I_CreateDatastoreBodyRequest, 'pool_name'>>(
+//     local
+//   )
+// }
+// const createDatastoreFromSharedStorm = async (): Promise<API_UI_I_Error> => {
+//   const {
+//     sharedStorm: { dev_names: disks, ...sendData },
+//   } = datastoreForm.value
+//
+//   const { data, msg } = await getStoragePoolName<{ dev_names: string[] }>(
+//     '/psm/api/v1/storage/lvm/create',
+//     { dev_names: disks }
+//   )
+//
+//   if (!data && msg) return msg
+//
+//   sendData.pool_name = data?.pool_name || ''
+//
+//   return await createDatastore(sendData)
+// }
+
+// const createDatastoreFromNfs = async (): Promise<API_UI_I_Error> => {
+//   const {
+//     nfs: { server, folder, readonly, name, type_code: type },
+//   } = datastoreForm.value
+//
+//   const sendDataOne = {
+//     server,
+//     folder,
+//     readonly,
+//     version: nfsVersion.value === 'nfs-4.1' ? 4.1 : 3.0,
+//   }
+//
+//   const { data, msg } = await getStoragePoolName<UI_I_NfsPoolNameForm>(
+//     '/psm/api/v1/storage/cnfs',
+//     sendDataOne
+//   )
+//
+//   if (!data && msg) return msg
+//
+//   const sendDataTwo = {
+//     name,
+//     type_code: type,
+//     pool_name: data?.pool_name || '',
+//   }
+//
+//   return await createDatastore(sendDataTwo)
+// }
 </script>
 
 <style scoped lang="scss">
-@import 'assets/scss/common/mixins.scss';
+@import '~/assets/scss/common/mixins.scss';
+
 .new-datastore {
   &__body {
     @include flex($dir: column);