Refactor document ingestion logic and improve UI responsiveness
This commit is contained in:
@@ -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 });
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
Reference in New Issue
Block a user