Refactor document ingestion logic and improve UI responsiveness

This commit is contained in:
andrea.terzani
2025-03-22 19:57:37 +01:00
parent 77171af7c2
commit aadf076aca
4 changed files with 443 additions and 276 deletions

View File

@@ -32,15 +32,14 @@
</FileUpload>
</div>
<div class="flex mt-16 pt-6 justify-end">
<Button label="Next" icon="pi pi-arrow-right" @click="activateCallback('2')"
:disabled="!isFileSelected"
<Button label="Next" icon="pi pi-arrow-right" @click="activateCallback('2')" :disabled="!isFileSelected"
style="width: 150px;" class="p-button" v-tooltip.top="!isFileSelected ? 'Please select a file' : ''" />
</div>
</StepPanel>
<form @submit.prevent="submitForm" class="p-fluid">
<StepPanel value="2" v-slot="{ activateCallback }">
<div class="flex flex-col h-full">
<Tabs class="mt-6">
<Tabs class="mt-6" value="0">
<TabList>
<Tab value="0">Base</Tab>
<Tab value="1">Advanced</Tab>
@@ -75,7 +74,7 @@
<span class="p-float-label">
<label for="ksApplicationName">KS Application Name</label>
<Dropdown id="ksApplicationName" v-model="formData.ksApplicationName"
:options="availableAppOptions" optionLabel="name" required class="w-full"></Dropdown>
:options="availableAppOptions" optionLabel="name" required class="w-full"></Dropdown>
</span>
</div>
<div class="col-12 md:col-6 mb-4">
@@ -125,7 +124,7 @@
class="w-full" />
</span>
<small v-if="errors.minChunkSizeToEmbed" class="text-red-500">{{ errors.minChunkSizeToEmbed
}}</small>
}}</small>
</div>
<div class="col-12 md:col-6 mb-4">
<span class="p-float-label">
@@ -136,7 +135,7 @@
class="w-full" />
</span>
<small v-if="errors.maxNumberOfChunks" class="text-red-500">{{ errors.maxNumberOfChunks
}}</small>
}}</small>
</div>
</TabPanel>
</TabPanels>
@@ -156,7 +155,7 @@
<p v-if="selectedFile" class="text-center">You can execute the ingestion for the following file:</p>
<p v-if="selectedFile" class="text-center">{{ selectedFile.name }}</p>
<div class="flex justify-center mt-4">
<Button :disabled="loadingStore.isLoading" type="submit" label="Ingest" :fluid="false"></Button>
<Button type="submit" label="Ingest" :fluid="false"></Button>
</div>
</div>
<div class="flex justify-between pt-6">
@@ -171,27 +170,28 @@
</div>
</Fluid>
<Dialog v-model:visible="showDialog" header="Confirm Overwrite" :modal="true">
<p>The document "{{ selectedFile?.name }}" already exists with status "{{ existingDocument?.ingestionStatus }}". Do you want to overwrite it?</p>
<p>The document "{{ selectedFile?.name }}" already exists with status "{{ existingDocument?.ingestionStatus }}". Do
you want to overwrite it?</p>
<template #footer>
<Button label="Cancel" icon="pi pi-times" @click="cancelOverwrite" class="p-button" />
<Button label="Overwrite" icon="pi pi-check" @click="confirmOverwrite" class="p-button-danger"/>
<Button label="Overwrite" icon="pi pi-check" @click="confirmOverwrite" class="p-button-danger" />
</template>
</Dialog>
</template>
<script setup>
import axios from 'axios';
import { useToast } from 'primevue/usetoast';
import { ref, watch, computed, onMounted, nextTick } from 'vue';
import { useRouter } from 'vue-router';
import { UserPrefStore } from '../../../stores/UserPrefStore';
import Stepper from 'primevue/stepper';
import StepList from 'primevue/steplist';
import StepPanels from 'primevue/steppanels';
import Step from 'primevue/step';
import StepList from 'primevue/steplist';
import StepPanel from 'primevue/steppanel';
import { LoadingStore } from '../../../stores/LoadingStore';
import StepPanels from 'primevue/steppanels';
import Stepper from 'primevue/stepper';
import { useToast } from 'primevue/usetoast';
import { computed, ref, watch } from 'vue';
import { useRouter } from 'vue-router';
import { KsDocumentStore } from '../../../stores/KsDocumentStore';
import { LoadingStore } from '../../../stores/LoadingStore';
import { UserPrefStore } from '../../../stores/UserPrefStore';
const toast = useToast();
const router = useRouter();
@@ -285,6 +285,7 @@ const onFileSelect = (event) => {
if (event.files && event.files.length > 0) {
selectedFile.value = event.files[0];
formData.value.type = selectedFile.value.name.split('.').pop().toLowerCase();
formData.value.description = selectedFile.value.name;
fileUploaded.value = true;
} else {
selectedFile.value = null;
@@ -319,22 +320,29 @@ const onFileRemove = () => {
};
const startIndividualngestion = async (id) => {
try {
const response = await axios.get(`/test/ingest_document/${id}`);
ingestionResult.value = response.data;
toast.add({ severity: 'info', summary: 'Info', detail: 'Starting Ingestion', life: 3000 });
axios.get(`/test/ingest_document/${id}`)
.then(response => {
if (response.data.status == "OK") {
toast.add({ severity: 'success', summary: 'Success', detail: 'Document ingestion started...', life: 3000 });
}
if (response.data.status == "ERROR") {
toast.add({ severity: 'error', summary: 'Success', detail: 'Error ingesting document:' + response.data.message, life: 3000 });
}
})
.catch(error => {
//ingestionDialogVisible.value = true;
console.error('Error ingesting record: ', error)
toast.add({ severity: 'error', summary: 'Success', detail: 'Error ingesting document:' + error, life: 3000 });
});
if (response.status !== 200) {
ingestionResult.value = `Error: ${response.data.message}`;
}
ingestionDialogVisible.value = true;
} catch (error) {
console.error('Error during ingestion:', error);
ingestionDialogVisible.value = true;
throw error;
}
};
const deleteRecord = (name) => {
const deleteRecord = (name) => {
const documentToDelete = ksdocuments.value.find(doc => doc.name === name);
if (!documentToDelete) {
console.error('Document not found');
@@ -409,12 +417,14 @@ const uploadFile = async (formDataToSend) => {
'Content-Type': 'multipart/form-data'
}
});
await startIndividualngestion(response.data.id);
toast.add({ severity: 'success', summary: 'Success', detail: 'File ingested successfully', life: 3000 });
ksdocuments.value.push(response.data);
startIndividualngestion(response.data.id);
router.push({ name: 'ks-document' });
} catch (error) {
console.error('Ingestion failed:', error);
toast.add({ severity: 'error', summary: 'Error', detail: 'File ingestion failed', life: 3000 });
}
};