bfg-common 1.3.422 → 1.3.423

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

@@ -0,0 +1,599 @@
+<template>
+  <div class="new-datastore">
+    <atoms-wizard
+      show
+      :wizard="wizard"
+      :selected-scheme="selectedScheme"
+      :title="localization.newDatastore"
+      :localization="localization"
+      class="add-datastore"
+      test-id="add-datastore-wizard"
+      @change-steps="onChangeSteps"
+      @hide="onHideModal"
+      @submit="onFinish"
+    >
+      <template #modalBody="{ selectedStep }">
+        <common-wizards-datastore-new-add-types
+          v-if="selectedStep.id === 0"
+          v-model:datastore-type="datastoreType"
+          :project="props.project"
+        />
+
+        <common-wizards-datastore-new-add-local
+          v-show="selectedStep.id === 1"
+          :project="props.project"
+          :datastore-type="datastoreType"
+          :alert-messages="alertMessages[1]"
+          :messages-fields="selectedStep.fields"
+          :local-create-name-submit="localCreateNameSubmit"
+          :datacenter-hosts="props.datacenterHosts"
+          :is-main-filter="props.isMainFilter"
+          @hide-alert="onHideAlert"
+          @loading="(e) => (loading = e)"
+          @submit="onSaveNameAndNextLocal"
+          @main-filter="emits('main-filter', $event)"
+        />
+
+        <common-wizards-datastore-new-add-shared-storm
+          v-show="datastoreType === 'shared-storm'"
+          :mode="props.project"
+          :step-id="selectedStep.id"
+          :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-new-add-nfs
+          v-show="datastoreType === 'nfs'"
+          :mode="props.project"
+          :step-id="selectedStep.id"
+          :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="selectedStep.id === 11"
+          :data-ready-view="dataReadyView"
+        />
+      </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/datastoreNew/add/lib/config/steps'
+
+import { UI_I_Localization } from '~/lib/models/interfaces'
+import { UI_T_Project } from '~/lib/models/types'
+// import { UI_I_VerticalStepItem } from '~/components/atoms/lib/models/interfaces'
+import {
+  UI_T_DatastoreType,
+  UI_T_NfsType,
+  // UI_T_WizardDatastoreMode,
+} from '~/components/common/wizards/datastore/add/lib/models/types'
+import { UI_I_CreateDatastoreForm } from '~/components/common/wizards/datastore/add/lib/models/interfaces'
+import {
+  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'
+
+const props = defineProps<{
+  project: UI_T_Project
+  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: '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 selectedScheme = computed<number[]>(() => wizard.selectedScheme.value)
+const alertMessages = computed<string[][]>(() => wizard.alertMessages.value)
+
+const loading = ref<boolean>(false)
+const datastoreType = ref<UI_T_DatastoreType>(
+  props.project === 'procurator' ? 'local' : 'shared-storm'
+)
+const nfsVersion = ref<UI_T_NfsType>('nfs-3')
+
+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 checkIpFourSettingsSync = (
+  localization: UI_I_Localization,
+  data: string,
+  wizard: Wizard,
+  value: UI_I_WizardStep[]
+): UI_I_ValidationReturn => {
+  let stepHasError = false
+
+  if (!data) {
+    stepHasError = wizard.setValidation(1, 'datastoreName', {
+      fieldMessage: localization.specifyDatastoreName,
+      alertMessage: '',
+    })
+  } else if (wizard.hasMessage(1, 'datastoreName')) {
+    value = wizard.removeValidation(1, 'datastoreName', value)
+  }
+
+  return {
+    newValue: value,
+    stepHasError,
+  }
+}
+
+// const checkNetwork = async (
+//     label: string,
+//     localization: UI_I_Localization,
+//     emits: UI_I_AddNetworkingEmits
+// ): Promise<UI_I_AsyncCheckReturn> => {
+//   if (label) {
+//     return new Promise((resolve, _reject) =>
+//         emits('check-network-label', label, (message: string) => {
+//           if (message === '') {
+//             resolve({
+//               isValid: true,
+//               message: '',
+//             })
+//           }
+//
+//           if (message !== '') {
+//             resolve({
+//               isValid: false,
+//               message,
+//             })
+//           }
+//         })
+//     )
+//   } else {
+//     return {
+//       isValid: false,
+//       message: localization.networkLabelInvalidMessage,
+//     }
+//   }
+// }
+
+// export const checkNetworkAsync = async (
+//     value: UI_I_WizardStep[],
+//     label: string,
+//     stepId: number,
+//     fieldName: string,
+//     emits: UI_I_AddNetworkingEmits,
+//     localization: UI_I_Localization,
+//     wizard: Wizard
+// ): Promise<UI_I_ValidationReturn> => {
+//   let stepHasError = false
+//
+//   const labelValidation: {
+//     isValid: boolean
+//     message: string
+//   } = await checkNetwork(label, localization, emits)
+//
+//   if (!labelValidation.isValid) {
+//     stepHasError = wizard.setValidation(stepId, fieldName, {
+//       fieldMessage: labelValidation.message,
+//       alertMessage: labelValidation.message,
+//     })
+//   } else if (wizard.hasMessage(stepId, fieldName)) {
+//     value = wizard.removeValidation(stepId, fieldName, value)
+//   }
+//
+//   return {
+//     newValue: value,
+//     stepHasError,
+//   }
+// }
+
+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 = checkIpFourSettingsSync(
+      localization.value,
+      datastoreForm.value.local.name,
+      wizard,
+      value
+    )
+
+    value = nameValidation.newValue
+
+    stepHasError = nameValidation.stepHasError
+  }
+
+  return {
+    newValue: value,
+    stepHasError,
+  }
+}
+
+const onChangeSteps = async (value: UI_I_WizardStep[]): Promise<void> =>
+  wizard.changeSteps(value, validationFunc)
+
+// Choosing Scheme
+watch(
+  datastoreType,
+  (newValue: UI_T_DatastoreType) => {
+    if (props.project === 'procurator') {
+      if (newValue === 'local') {
+        wizard.changeScheme(0)
+      }
+
+      if (newValue === 'shared-storm') {
+        wizard.changeScheme(1)
+      }
+
+      if (newValue === 'nfs') {
+        wizard.changeScheme(2)
+      }
+    }
+  },
+  { deep: true, immediate: true }
+)
+
+// const stepItems = computed<UI_I_VerticalStepItem[]>(() =>
+//   stepItemsFunc(localization.value, datastoreType.value, props.mode)
+// )
+
+// let cashStep = -1
+const onNextStep = (_force = false): void => {
+  // const isValid = checkSubmit(force)
+  //
+  // if (!isValid) {
+  //   return
+  // }
+  //
+  // const isDisabled = stepItems.value[cashStep]?.disabled
+  // if (cashStep !== -1 && !isDisabled) {
+  //   stepPosition.value = cashStep
+  //   cashStep = -1
+  //   return
+  // }
+  //
+  // stepItems.value[stepPosition.value].complete = true
+  // stepItems.value[stepPosition.value + 1].disabled = false
+  // stepPosition.value++
+}
+
+const back = (): void => {
+  stepPosition.value--
+}
+
+// const onChangeStep = (key: number): void => {
+//   if (key < stepPosition.value) {
+//     stepPosition.value = key
+//     return
+//   }
+//
+//   const isValid = checkSubmit()
+//
+//   if (!isValid) {
+//     cashStep = key
+//     return
+//   }
+//
+//   stepPosition.value = key
+// }
+const onHideModal = (): void => {
+  emits('hide')
+}
+
+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
+//     }
+//   }
+//
+//   if (datastoreType.value === 'shared-storm') {
+//     if (stepPosition.value === 1 && !force) {
+//       deviceSelectionSubmit.value++
+//       return false
+//     }
+//   }
+//
+//   if (datastoreType.value === 'nfs') {
+//     if (stepPosition.value === 2 && !force) {
+//       nfsConfigurationSubmit.value++
+//       return false
+//     }
+//
+//     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.project === '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,
+    'local',
+    event,
+    isWizardModeForSphere.value
+  )
+
+  onNextStep(true)
+}
+
+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 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)
+}
+
+// const isShowCompleteBlock = computed<boolean>(() => {
+//   // TODO refactoring
+//   const localStep = datastoreType.value === 'local' && stepPosition.value === 2
+//
+//   const sharesStep =
+//     datastoreType.value === 'shared-storm' &&
+//     (props.project === 'procurator'
+//       ? stepPosition.value === 3
+//       : stepPosition.value === 2)
+//
+//   let nfsFirst
+//   if (props.project === '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.project === '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)
+// }
+
+const onHideAlert = (stepId: number): void => {
+  wizard.hideAlertMessagesByStepId(stepId)
+}
+const onFinish = async (): Promise<void> => {
+  loading.value = true
+
+  onHideModal()
+  loading.value = false
+}
+</script>
+
+<style scoped lang="scss">
+@import 'assets/scss/common/mixins.scss';
+.new-datastore {
+  &__body {
+    @include flex($dir: column);
+    height: 100%;
+    padding-left: 24px;
+  }
+}
+
+.finish-block {
+  padding: 18px 24px 24px 24px;
+
+  .add-hosts-ready-to-complete-mt-12 {
+    margin-top: 12px;
+
+    .add-hosts-ready-to-complete-bold {
+      line-height: 18px;
+      font-weight: 700;
+    }
+  }
+}
+</style>