bfg-common 1.0.0

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

@@ -0,0 +1,382 @@
+<template>
+  <div class="new-datastore">
+    <atoms-modal-by-steps
+      test-id="add-datastore-wizard"
+      :show="true"
+      :title="localization.newDatastore"
+      :step-items="stepItems"
+      :step-position="stepPosition"
+      :loading="loading"
+      @finish="onAddDatastore"
+      @next="onNextStep"
+      @back="back"
+      @change-step="onChangeStep"
+      @hide="onHideModal"
+    >
+      <template #modalBody>
+        <div class="new-datastore__body">
+          <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="datacenterHosts"
+            @loading="(e) => (loading = e)"
+            @submit="onSaveNameAndNextLocal"
+          />
+
+          <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="datacenterHosts"
+            @loading="(e) => (loading = e)"
+            @submit="onSaveAndNextSharedStorm"
+          />
+
+          <common-wizards-datastore-add-nfs
+            v-show="datastoreType === 'nfs' && !isShowCompleteBlock"
+            :step-position="stepPosition"
+            :datastore-type="datastoreType"
+            :nfs-configuration-submit="nfsConfigurationSubmit"
+            :host-accessibility-submit="hostAccessibilitySubmit"
+            @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-modal-by-steps>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { UI_I_Localization } from '~/models/interfaces'
+import { UI_I_VerticalStepItem } from '~/components/atoms/models/interfaces'
+import {
+  UI_T_DatastoreType,
+  UI_T_NfsType,
+  UI_T_WizardDatastoreMode,
+} from '~/components/common/wizards/datastore/add/models/types'
+import { UI_I_CreateDatastoreForm } from '~/components/common/wizards/datastore/add/models/interfaces'
+import {
+  UI_I_LunDisk,
+  UI_I_SelectHostOptions,
+} from '~/components/common/wizards/datastore/add/sharedStorm/deviceSelection/models/interfaces'
+import { stepItemsFunc } from '~/components/common/wizards/datastore/add/config/stepItems'
+import { constructDataReadyViewFunc } from '~/components/common/wizards/datastore/add/readyComplete/config/propertiesDetails'
+
+const props = defineProps<{
+  mode: UI_T_WizardDatastoreMode
+  finishFunc: (
+    datastoreForm: UI_I_CreateDatastoreForm,
+    datastoreType: UI_T_DatastoreType,
+    version: UI_T_NfsType
+  ) => Promise<void>
+  datacenterHosts?: UI_I_SelectHostOptions[]
+}>()
+const emits = defineEmits<{
+  (event: 'hide'): void
+  (event: 'global-refresh'): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const loading = ref<boolean>(false)
+const datastoreType = ref<UI_T_DatastoreType>('local')
+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: [],
+    pool_name: '',
+    type_code: 2,
+  },
+  nfs: {
+    name: '',
+    server: '',
+    folder: '',
+    readonly: false,
+    version: nfsVersion.value,
+    type_code: 4,
+  },
+})
+
+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 } = datastoreForm.value.nfs
+  saveChangesAndNextNfs({ name, server, folder }, 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 (
+      ((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,
+    '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)
+
+  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
+
+  dataReadyView.value = constructDataReadyViewFunc(
+    localization.value,
+    'nfs',
+    {
+      ...event,
+      version: nfsVersion.value,
+    },
+    isWizardModeForSphere.value
+  )
+
+  next && onNextStep(true)
+}
+
+const isShowCompleteBlock = computed<boolean>(() => {
+  const localStep = datastoreType.value === 'local' && stepPosition.value === 2
+  const sharesStep =
+    datastoreType.value === 'shared-storm' && stepPosition.value === 3
+  const nfsFirst =
+    datastoreType.value === 'nfs' &&
+    nfsVersion.value === 'nfs-3' &&
+    stepPosition.value === 3
+  const nfsSecond =
+    datastoreType.value === 'nfs' &&
+    nfsVersion.value === 'nfs-4.1' &&
+    stepPosition.value === 3
+
+  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';
+
+.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>

package/components/common/wizards/datastore/add/config/stepItems.ts

@@ -0,0 +1,160 @@
+import { UI_I_VerticalStepItem } from '~/components/atoms/models/interfaces'
+import { UI_I_Localization } from '~/models/interfaces'
+import {
+  UI_T_WizardDatastoreMode,
+  UI_T_DatastoreType,
+  UI_T_NfsType,
+} from '~/components/common/wizards/datastore/add/models/types'
+
+const stepFromSharedStorm = (
+  localization: UI_I_Localization
+): UI_I_VerticalStepItem[] => {
+  return [
+    { text: localization.type, disabled: false, complete: false },
+    {
+      text: localization.nameAndDeviceSelection,
+      disabled: true,
+      complete: false,
+    },
+    // {
+    //   text: localization.vmfsVersion,
+    //   disabled: true,
+    //   complete: false,
+    // }, <!-- TODO в shared-storm пока верси не будет  -->
+    {
+      text: localization.partitionConfiguration,
+      disabled: true,
+      complete: false,
+    },
+    { text: localization.readyComplete, disabled: true, complete: false },
+  ]
+}
+
+const stepFromNfs = (
+  localization: UI_I_Localization
+): UI_I_VerticalStepItem[] => {
+  return [
+    { text: localization.type, disabled: false, complete: false },
+    { text: localization.nfsVersion, disabled: true, complete: false },
+    {
+      text: localization.nameAndConfiguration,
+      disabled: true,
+      complete: false,
+    },
+    // {
+    //   text: localization.kerberosAuthentication,
+    //   disabled: true,
+    //   complete: false,
+    //   permissions: ['nfs-4.1'],
+    // },// TODO Пока что не будет чут попоже
+    // { text: localization.hostsAccessibility, disabled: true, complete: false }, // Он будет когда будем делать групповое
+    { text: localization.readyComplete, disabled: true, complete: false },
+  ]
+
+  // console.log(position, 'position')
+
+  // nfsItems = nfsItems.filter((item) => {
+  //   // return item.permissions
+  //   //   ? type !== null
+  //   //     ? item.permissions.includes(type)
+  //   //     : true
+  //   //   : false
+  //   return item.permissions ? item.permissions.includes(type) : true
+  // })
+  // nfsItems.forEach((x, key) => {
+  //   if (key <= position) {
+  //     // console.log(key, 'key')
+  //     x.complete = true
+  //     x.disabled = false
+  //   }
+  // })
+
+  // console.log(type, 'typeeeeee')
+}
+
+// const stemFromVvol = (localization: UI_I_Localization): UI_I_VerticalStepItem[] => {
+//   return [
+//     { text: localization.type, disabled: false, complete: false },
+//     {
+//       text: localization.nameAndContainerSelection,
+//       disabled: true,
+//       complete: false,
+//     },
+//     { text: localization.hostsAccessibility, disabled: true, complete: false },
+//     { text: localization.readyComplete, disabled: true, complete: false },
+//   ]
+// }
+const stemFromLocal = (
+  localization: UI_I_Localization,
+  mode: UI_T_WizardDatastoreMode
+): UI_I_VerticalStepItem[] => {
+  const isModeProcurator = mode === 'procurator'
+  return [
+    { text: localization.type, disabled: false, complete: false },
+    {
+      text: localization[
+        isModeProcurator ? 'selectDatastoreName' : 'nameAndDeviceSelection'
+      ],
+      disabled: true,
+      complete: false,
+    },
+    { text: localization.readyComplete, disabled: true, complete: false },
+  ]
+}
+
+export const stepItemsFunc = (
+  localization: UI_I_Localization,
+  type: UI_T_DatastoreType,
+  mode: UI_T_WizardDatastoreMode
+): UI_I_VerticalStepItem[] => {
+  const handlers = {
+    'shared-storm': stepFromSharedStorm,
+    nfs: stepFromNfs,
+    local: stemFromLocal,
+  }
+
+  return handlers[type](localization, mode)
+}
+
+interface SubTitles {
+  'shared-storm': string[]
+  nfs: string[]
+  local: string[]
+}
+
+export const subTitleFunc = (
+  localization: UI_I_Localization,
+  type: UI_T_DatastoreType,
+  position: number,
+  version?: UI_T_NfsType
+): string => {
+  position = position - 1
+
+  if (type === 'nfs' && version === 'nfs-3' && position === 2) {
+    position = position + 1
+  }
+
+  const description: string[] = [
+    localization.selectNfsVersion,
+    localization.nameAndConfigurationDesc,
+    // localization.kerberosAuthenticationDesc.replace(
+    //   '{0}',
+    //   version?.toUpperCase() || ''
+    // ),
+    // localization.hostsAccessibilityDesc,
+  ]
+
+  const sharedStormDesc: string[] = [
+    localization.nameAndDeviceSelectionDesc,
+    // localization.vmfsVersionDesc,
+    localization.partitionConfigurationDesc,
+  ]
+
+  const subTitles: SubTitles = {
+    nfs: description,
+    'shared-storm': sharedStormDesc,
+    local: [],
+  }
+
+  return subTitles[type][position]
+}

package/components/common/wizards/datastore/add/local/Local.vue

@@ -0,0 +1,67 @@
+<template>
+  <div class="local-step">
+    <span
+      v-if="mode === 'sphere' && props.stepPosition === 1"
+      class="vmfs-container__desc"
+    >
+      {{ localization.nameAndDeviceSelectionDesc }}
+    </span>
+
+    <common-wizards-datastore-add-local-create-name
+      v-show="mode === 'procurator' && props.stepPosition === 1"
+      :local-create-name-submit="props.localCreateNameSubmit"
+      @loading="(e) => emits('loading', e)"
+      @submit="(e) => emits('submit', e)"
+    />
+
+    <common-wizards-datastore-add-shared-storm-device-selection
+      v-show="mode === 'sphere' && props.stepPosition === 1"
+      v-model:lun-disk="selectedLunDisk"
+      mode="sphere"
+      :device-selection-submit="props.localCreateNameSubmit"
+      :step-position="props.stepPosition"
+      :datastore-type="props.datastoreType"
+      :datacenter-hosts="props.datacenterHosts"
+      @loading="(e) => emits('loading', e)"
+      @submit="(e) => emits('submit', e)"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {
+  UI_I_CreateStorageLunDiskItem,
+  UI_I_SelectHostOptions,
+} from '~/components/common/wizards/datastore/add/sharedStorm/deviceSelection/models/interfaces'
+import {
+  UI_T_WizardDatastoreMode,
+  UI_T_DatastoreType,
+} from '~/components/common/wizards/datastore/add/models/types'
+import { UI_I_Localization } from '~/models/interfaces'
+
+const props = defineProps<{
+  stepPosition: number
+  localCreateNameSubmit: number
+  datastoreType: UI_T_DatastoreType
+  mode: UI_T_WizardDatastoreMode
+  datacenterHosts?: UI_I_SelectHostOptions[]
+}>()
+const emits = defineEmits<{
+  (event: 'loading', value: boolean): void
+  (event: 'submit', value: string): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const selectedLunDisk = ref<UI_I_CreateStorageLunDiskItem[]>([])
+</script>
+
+<style lang="scss" scoped>
+.local-step {
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+  overflow-x: hidden;
+  height: 100%;
+}
+</style>