bfg-common 1.5.539 → 1.5.541

package/components/common/pages/backups/modals/restore/Restore.vue

@@ -1,86 +1,42 @@
 <template>
-  <div class="restore">
-    <atoms-wizard
-      show
-      :wizard="wizard"
-      :selected-scheme="selectedScheme"
-      :title="localization.common.restore"
-      :localization="localization"
-      test-id="restore"
-      @change-steps="onChangeSteps"
-      @hide="onHideModal"
-      @submit="onRestore"
-    >
-      <template #modalBody="{ selectedStep }">
-        <div
-          v-show="isLoading"
-          class="loader-wrap absolute left-0 right-0 top-0 bottom-0"
-        >
-          <atoms-loader-pre-loader
-            id="loader"
-            :show="isLoading"
-            class="absolute-center"
-            test-id="backup-restore-spinner"
-          />
-        </div>
-        <atoms-alert
-          v-show="errors.length"
-          :items="errors"
-          status="alert-danger"
-          test-id="restore-alert"
-          @remove="onRemoveValidationErrors"
-        />
-
-        <common-pages-backups-modals-restore-types
-          v-show="selectedStep.id === dynamicSteps.selectType"
-          v-model="model"
-        />
-
-        <common-pages-backups-modals-restore-name
-          v-show="selectedStep.id === dynamicSteps.selectName"
-          v-model="model"
-          :show="selectedStep.id === dynamicSteps.selectName"
-          :name-form-submit="nameFormSubmit"
-          @check-name="onCheckName"
-        />
-
-        <!--        TODO refactoring-->
-        <common-vm-actions-common-select-storage
-          v-show="selectedStep.id === dynamicSteps.selectStorage"
-          :storage-submit="storageSubmit"
-          :datastore="props.datastore"
-          :is-datastore-loading="props.datastoreLoading"
-          :storage="model.pvm.storage"
-          :get-datastore-table-func="getDatastoreTableFunc"
-          @submit="onChangeStorage"
-        />
-
-        <common-pages-backups-modals-restore-disks
-          v-show="selectedStep.id === dynamicSteps.selectDisks"
-          v-model="model"
-        />
-        <common-pages-backups-modals-restore-networks
-          v-if="selectedStep.id === dynamicSteps.selectNetwork"
-          v-model="model"
-          :alert-messages="[]"
-          :networks="props.networks"
-          @get-networks="onGetNetworks"
-        />
-
-        <common-ready-to-complete
-          v-show="selectedStep.id === dynamicSteps.readyComplete"
-          :data="readyToCompleteInfo"
-        />
-      </template>
-    </atoms-wizard>
-  </div>
-
-  <common-modals-confirmation
-    v-if="isShowConfirm"
-    :headline="localization.common.attention"
-    :description="localization.common.restoreBackupConfirmDescription"
-    @hide-modal="isShowConfirm = false"
-    @confirm="onFinish"
+  <common-pages-backups-modals-restore-new
+    v-if="isNewView"
+    v-model="model"
+    :wizard="wizard"
+    :selected-scheme="selectedScheme"
+    :alert-messages="alertMessages"
+    :storage-submit="storageSubmit"
+    :datastore="props.datastore"
+    :datastore-loading="props.datastoreLoading"
+    :networks="props.networks"
+    :ready-complete-data="readyToCompleteInfo"
+    :selected-storage="selectedStorage"
+    @change-storage="onChangeStorage"
+    @get-datastore="getDatastoreTableFunc"
+    @get-networks="onGetNetworks"
+    @change-steps="onChangeSteps"
+    @hide="onHideModal"
+    @submit="onRestore"
+  />
+  <common-pages-backups-modals-restore-old
+    v-else
+    v-model="model"
+    :wizard="wizard"
+    :selected-scheme="selectedScheme"
+    :ready-complete-data="readyToCompleteInfo"
+    :storage-submit="storageSubmit"
+    :is-loading="isLoading"
+    :errors="errors"
+    :datastore="props.datastore"
+    :datastore-loading="props.datastoreLoading"
+    :networks="props.networks"
+    @remove-validation-errors="onRemoveValidationErrors"
+    @change-storage="onChangeStorage"
+    @get-datastore="getDatastoreTableFunc"
+    @get-networks="onGetNetworks"
+    @change-steps="onChangeSteps"
+    @finish="onRestore"
+    @hide="onHideModal"
   />
 </template>
 
@@ -102,6 +58,11 @@ import {
   dynamicSteps,
 } from '~/components/common/pages/backups/modals/restore/lib/config/steps'
 import { restoreCodes } from '~/components/common/pages/backups/modals/restore/lib/config/restoreCodes'
+import { readyToCompleteOptions } from '~/components/common/pages/backups/modals/restore/lib/config/readyToCompleteOptions'
+import {
+  checkDisksValidation,
+  checkNameValidation,
+} from '~/components/common/pages/backups/modals/restore/validation/validation'
 
 const model = defineModel<UI_I_RestoreForm>({ required: true })
 
@@ -122,10 +83,13 @@ const { $store }: any = useNuxtApp()
 
 const localization = computed<UI_I_Localization>(() => useLocal())
 
+const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
+
 const wizard: Wizard = new Wizard(
   stepsFunc(localization.value),
   stepsSchemeInitial
 )
+const alertMessages = computed<string[][]>(() => wizard.alertMessages.value)
 
 watch(
   () => model.value.restore_code,
@@ -139,7 +103,6 @@ const onChangeSteps = async (value: UI_I_WizardStep[]): Promise<void> => {
   wizard.changeSteps(value, validationFunc)
 }
 
-const nameFormSubmit = ref<null | Function>(null)
 const storageSubmit = ref<null | Function>(null)
 
 const validationFunc = async (
@@ -163,7 +126,15 @@ const validationFunc = async (
       nextStep.id
     )
   ) {
-    const nameValidation = await checkName(value)
+    const nameValidation = await checkNameValidation(
+      value,
+      model.value.pvm.name,
+      wizard,
+      localization.value,
+      showValidationErrors,
+      onRemoveValidationErrors,
+      emits
+    )
 
     value = nameValidation.newValue
     stepHasError = stepHasError || nameValidation.stepHasError
@@ -189,7 +160,14 @@ const validationFunc = async (
       nextStep.id
     )
   ) {
-    const validation = checkDisks(value)
+    const validation = checkDisksValidation(
+      value,
+      !!model.value?.pvm.disk_devices.length,
+      wizard,
+      localization.value,
+      showValidationErrors,
+      onRemoveValidationErrors
+    )
 
     value = validation.newValue
     stepHasError = stepHasError || validation.stepHasError
@@ -204,31 +182,6 @@ const validationFunc = async (
   }
 }
 
-const checkName = async (
-  value: UI_I_WizardStep[]
-): Promise<UI_I_ValidationReturn> => {
-  let stepHasError = false
-
-  return new Promise((resolve) => {
-    nameFormSubmit.value = (isValid: boolean): void => {
-      if (!isValid) {
-        stepHasError = wizard.setValidation(dynamicSteps.selectName, 'name', {
-          fieldMessage: 'aaa',
-          alertMessage: 'aaa',
-        })
-      } else if (wizard.hasMessage(dynamicSteps.selectName, 'name')) {
-        value = wizard.removeValidation(dynamicSteps.selectName, 'name', value)
-      }
-
-      resolve({
-        stepHasError,
-        newValue: value,
-      })
-      nameFormSubmit.value = null
-    }
-  })
-}
-
 const checkStorage = async (
   value: UI_I_WizardStep[]
 ): Promise<UI_I_ValidationReturn> => {
@@ -241,8 +194,9 @@ const checkStorage = async (
           dynamicSteps.selectStorage,
           'storage',
           {
-            fieldMessage: 'aaa',
-            alertMessage: 'aaa',
+            fieldMessage: localization.value.common.selectStorage,
+            alertMessage:
+              localization.value.common.selectValidDestinationStorage,
           }
         )
       } else if (wizard.hasMessage(dynamicSteps.selectStorage, 'storage')) {
@@ -262,53 +216,23 @@ const checkStorage = async (
   })
 }
 
-const checkDisks = (value: UI_I_WizardStep[]): UI_I_ValidationReturn => {
-  let stepHasError = false
-
-  const isValidStores = !!model.value?.pvm.disk_devices.length
-  if (!isValidStores) {
-    stepHasError = wizard.setValidation(
-      dynamicSteps.selectDisks,
-      'disk_devices',
-      {
-        fieldMessage: localization.value.common.diskIsRequired,
-        alertMessage: localization.value.common.diskIsRequired,
-      }
-    )
-    showValidationErrors([localization.value.common.diskIsRequired])
-  } else if (wizard.hasMessage(dynamicSteps.selectDisks, 'disk_devices')) {
-    value = wizard.removeValidation(
-      dynamicSteps.selectDisks,
-      'disk_devices',
-      value
-    )
-    onRemoveValidationErrors()
-  }
-
-  return {
-    stepHasError,
-    newValue: value,
-  }
-}
-
 const getDatastoreTableFunc = async (): Promise<void> => {
   emits('get-datastore', model.value.bucket)
 }
 
 const selectedStorageName = ref<string>('')
+const selectedStorage = ref<UI_I_DatastoreTableItem | null>(null)
 const onChangeStorage = (storage: UI_I_DatastoreTableItem | null): void => {
   if (!storage) return
+
   selectedStorageName.value = storage.name
+  selectedStorage.value = storage
   model.value.pvm.storage = {
     id: storage.id,
     folder: '',
   }
 }
 
-const onCheckName = async (data: UI_I_NameCheck): Promise<void> => {
-  emits('check-name', data)
-}
-
 const isLoading = ref<boolean>(true)
 // В Сфере и Прокураторе одно и тоже
 const getPvm = async (): Promise<void> => {
@@ -319,61 +243,18 @@ const getPvm = async (): Promise<void> => {
   })
 
   model.value.pvm = useDeepCopy($store.getters['backup/getPvm'])
+  model.value.pvm.disk_devices = [] // ToDo если не обнулить тогда в форме всегда будет выбранны диски
   isLoading.value = false
 }
 getPvm()
 
-const readyToCompleteInfo = computed<UI_I_TableInfoItem[]>(() => {
-  const result = []
-
-  switch (model.value.restore_code) {
-    case restoreCodes.diskOnly:
-    case restoreCodes.existing:
-      result.push({
-        label: localization.value.common.backup,
-        value: model.value.backup,
-      })
-      break
-    case restoreCodes.asNew:
-      result.push({
-        label: localization.value.common.vmName,
-        value: model.value.pvm.name,
-      })
-
-      // Datastores
-      result.push({
-        label: localization.value.common.datastore,
-        value: selectedStorageName.value,
-      })
-
-      // Disks
-      model.value.pvm.disk_devices.forEach((disk_device, i) => {
-        if (!disk_device.source) return
-
-        result.push({
-          label: `${localization.value.common.disk} ${i}`,
-          value: disk_device.source,
-        })
-      })
-
-      // Networks
-      model.value.pvm.network_devices.forEach((network) => {
-        result.push({
-          label: localization.value.common.network,
-          value: network.network,
-        })
-      })
-      break
-    // case 1:
-    //   result.push({
-    //     label: localization.value.common.vmName,
-    //     value: model.value.pvm.name,
-    //   })
-    //   break
-  }
-
-  return result
-})
+const readyToCompleteInfo = computed<UI_I_TableInfoItem[]>(() =>
+  readyToCompleteOptions(
+    model.value,
+    localization.value,
+    selectedStorageName.value
+  )
+)
 
 const errors = ref<string[]>([])
 const showValidationErrors = (data: string[]): void => {
@@ -410,6 +291,7 @@ const onGetNetworks = (hostId: string): void => {
   display: flex;
   flex-direction: column;
 }
+
 .loader-wrap {
   background-color: rgba(0, 0, 0, 0.3);
   z-index: var(--z-fixed);

package/components/common/pages/backups/modals/restore/RestoreNew.vue

@@ -0,0 +1,289 @@
+<template>
+  <ui-wizard
+    :steps="props.wizard.steps"
+    :selected-scheme="props.selectedScheme"
+    :is-loading="props.wizard.wizardLoader.status"
+    :title="title"
+    :texts="texts"
+    test-id="backup-restore-wizard"
+    show
+    class="restore-wizard"
+    @change-steps="onChangeSteps"
+    @hide="onHideModal"
+    @submit="onCreateDatastore"
+  >
+    <template #content="{ selectedStep }">
+      <ui-wizard-block
+        v-if="selectedStep.id === dynamicSteps.selectType"
+        :sub-title-height="height0"
+      >
+        <template #content>
+          <div class="pt-2 pb-4">
+            <common-pages-backups-modals-restore-types v-model="model" />
+          </div>
+        </template>
+      </ui-wizard-block>
+
+      <ui-wizard-block
+        v-if="selectedStep.id === dynamicSteps.selectName"
+        :sub-title-height="height1"
+      >
+        <template #subTitle>
+          <div ref="subTitleBlock1">
+            <ui-alert
+              v-if="props.alertMessages[dynamicSteps.selectName].length"
+              :messages="props.alertMessages[dynamicSteps.selectName]"
+              test-id="add-vm-backup-disks-error-alert"
+              type="error"
+              size="md"
+              class="mb-3"
+            />
+
+            <div class="subtitle-block flex-row w-full items-start">
+              <ui-wizard-subtitle :sub-title="selectedStep.subTitle" />
+            </div>
+          </div>
+        </template>
+        <template #content>
+          <div class="mt-4 mb-4">
+            <common-pages-backups-modals-restore-name
+              v-model="model"
+              :show="selectedStep.id === dynamicSteps.selectName"
+              :messages-fields="selectedStep.fields"
+            />
+          </div>
+        </template>
+      </ui-wizard-block>
+
+      <ui-wizard-block
+        v-if="selectedStep.id === dynamicSteps.selectStorage"
+        :sub-title-height="height2"
+      >
+        <template #subTitle>
+          <div ref="subTitleBlock2">
+            <ui-alert
+              v-if="props.alertMessages[dynamicSteps.selectStorage].length"
+              :messages="props.alertMessages[dynamicSteps.selectStorage]"
+              test-id="backup-restore-datastores-error-alert"
+              type="error"
+              size="md"
+              class="mb-3"
+            />
+
+            <div class="subtitle-block flex-row w-full items-start">
+              <ui-wizard-subtitle :sub-title="selectedStep.subTitle" />
+            </div>
+          </div>
+        </template>
+        <template #content>
+          <div class="restore-select-storage mb-4">
+            <common-vm-actions-common-select-storage
+              :storage-submit="props.storageSubmit"
+              :is-datastore-loading="props.datastoreLoading"
+              :get-datastore-table-func="getDatastoreTableFunc"
+              :datastore="props.datastore"
+              :storage="props.selectedStorage"
+              hide-alert
+              @change-storage="onChangeStorage"
+            />
+          </div>
+        </template>
+      </ui-wizard-block>
+
+      <ui-wizard-block
+        v-if="selectedStep.id === dynamicSteps.selectDisks"
+        :sub-title-height="height3"
+      >
+        <template #subTitle>
+          <div ref="subTitleBlock3">
+            <ui-alert
+              v-if="props.alertMessages[dynamicSteps.selectDisks].length"
+              :messages="props.alertMessages[dynamicSteps.selectDisks]"
+              test-id="add-vm-backup-configuration-error-alert"
+              type="error"
+              size="md"
+              class="mb-3"
+            />
+
+            <div class="subtitle-block flex-row items-start">
+              <ui-wizard-subtitle :sub-title="selectedStep.subTitle" />
+            </div>
+          </div>
+        </template>
+        <template #content>
+          <div class="mt-3">
+            <common-pages-backups-modals-restore-disks v-model="model" />
+          </div>
+        </template>
+      </ui-wizard-block>
+
+      <ui-wizard-block
+        v-if="selectedStep.id === dynamicSteps.selectNetwork"
+        :sub-title-height="height4"
+      >
+        <template #subTitle>
+          <div ref="subTitleBlock4">
+            <div class="subtitle-block flex-row items-start">
+              <ui-wizard-subtitle :sub-title="selectedStep.subTitle" />
+            </div>
+          </div>
+        </template>
+        <template #content>
+          <div class="mt-4">
+            <div class="ready-to-complete"></div>
+            <common-pages-backups-modals-restore-networks
+              v-model="model"
+              :alert-messages="[]"
+              :networks="props.networks"
+              @get-networks="onGetNetworks"
+            />
+          </div>
+        </template>
+      </ui-wizard-block>
+
+      <ui-wizard-block
+        v-if="selectedStep.id === dynamicSteps.readyComplete"
+        :sub-title-height="height4"
+      >
+        <template #subTitle>
+          <div ref="subTitleBlock4">
+            <div class="subtitle-block flex-row items-start">
+              <ui-wizard-subtitle :sub-title="selectedStep.subTitle" />
+            </div>
+          </div>
+        </template>
+        <template #content>
+          <div class="mt-4">
+            <div class="ready-to-complete"></div>
+            <common-ready-to-complete :data="props.readyCompleteData" />
+          </div>
+        </template>
+      </ui-wizard-block>
+    </template>
+  </ui-wizard>
+</template>
+
+<script setup lang="ts">
+import { useElementSize } from '@vueuse/core'
+import type {
+  UI_I_WizardStep,
+  UI_I_WizardTexts,
+} from '~/node_modules/bfg-uikit/components/ui/wizard/lib/models/interfaces'
+import type Wizard from '~/node_modules/bfg-uikit/components/ui/wizard/lib/utils/utils'
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_TableInfoItem } from '~/components/atoms/table/info/lib/models/interfaces'
+import type { UI_I_RestoreForm } from '~/components/common/pages/backups/modals/lib/models/interfaces'
+import type { UI_I_DatastoreTableItem } from '~/lib/models/store/storage/interfaces'
+import type { UI_I_NetworkTableItem } from '~/lib/models/store/network/interfaces'
+import { dynamicSteps } from '~/components/common/pages/backups/modals/restore/lib/config/steps'
+
+const model = defineModel<UI_I_RestoreForm>({ required: true })
+
+const props = defineProps<{
+  wizard: Wizard
+  selectedScheme: number[]
+  alertMessages: string[][]
+  readyCompleteData: UI_I_TableInfoItem[]
+  storageSubmit: null | Function
+  selectedStorage: UI_I_DatastoreTableItem | null
+  datastore: UI_I_DatastoreTableItem[]
+  datastoreLoading: boolean
+  networks: UI_I_NetworkTableItem[]
+}>()
+const emits = defineEmits<{
+  (event: 'change-steps', value: UI_I_WizardStep[]): void
+  (event: 'change-storage', value: UI_I_DatastoreTableItem | null): void
+  (event: 'get-datastore', value: string): void
+  (event: 'get-networks', value: string): void
+  (event: 'hide'): void
+  (event: 'submit'): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const title = computed<string>(() =>
+  localization.value.common.restoreFromBackup.replace('backup', 'Backup')
+)
+
+const texts = computed<UI_I_WizardTexts>(() => ({
+  cancel: localization.value.common.cancel,
+  back: localization.value.common.backCap,
+  processing: localization.value.common.processing,
+  next: localization.value.common.next,
+  finish: localization.value.common.restore,
+  incompleteTitle: localization.value.common.incompleteProcess,
+  incompleteMessage: localization.value.common.incompleteProcessMessage,
+  incompleteCancel: localization.value.common.cancel,
+  incompleteLeave: localization.value.common.leave,
+  step: localization.value.common.step,
+  of: localization.value.common.of2,
+}))
+
+const subTitleBlock0 = ref<HTMLElement | null>(null)
+const { height: height0 } = useElementSize(subTitleBlock0)
+
+const subTitleBlock1 = ref<HTMLElement | null>(null)
+const { height: height1 } = useElementSize(subTitleBlock1)
+
+const subTitleBlock2 = ref<HTMLElement | null>(null)
+const { height: height2 } = useElementSize(subTitleBlock2)
+
+const subTitleBlock3 = ref<HTMLElement | null>(null)
+const { height: height3 } = useElementSize(subTitleBlock3)
+
+const subTitleBlock4 = ref<HTMLElement | null>(null)
+const { height: height4 } = useElementSize(subTitleBlock4)
+
+const getDatastoreTableFunc = async (): Promise<void> => {
+  emits('get-datastore', model.value.bucket)
+}
+
+const onChangeSteps = async (value: UI_I_WizardStep[]): Promise<void> =>
+  emits('change-steps', value)
+
+const onChangeStorage = (storage: UI_I_DatastoreTableItem | null): void => {
+  emits('change-storage', storage)
+}
+
+const onGetNetworks = (hostId: string): void => {
+  emits('get-networks', hostId)
+}
+
+const onHideModal = (): void => emits('hide')
+const onCreateDatastore = (): void => emits('submit')
+</script>
+
+<style scoped lang="scss">
+.subtitle-block {
+  display: flex;
+  flex-direction: column;
+  row-gap: 16px;
+  border-bottom: 1px solid var(--wizard-line);
+  padding-bottom: 12px;
+
+  &.flex-row {
+    flex-direction: row;
+  }
+
+  :deep(&__alert) {
+    padding: 10px 12px;
+  }
+}
+
+.ready-to-complete {
+  :deep(.details-list):nth-child(1) {
+    .details-item-value {
+      white-space: break-spaces;
+      overflow: auto;
+    }
+  }
+}
+
+.restore-wizard {
+  .restore-select-storage {
+    :deep(.ui-main-no-items-found span) {
+      font-size: 14px;
+    }
+  }
+}
+</style>