452 lines
18 KiB
Vue
452 lines
18 KiB
Vue
<template>
|
|
<!-- <Toast />
|
|
<ConfirmPopup></ConfirmPopup>
|
|
<div v-if="loadingStore.another_loading" class="loading-container">
|
|
<div class="spinner-container">
|
|
<ProgressSpinner class="spinner" />
|
|
<p class="loading-text">Loading...</p>
|
|
</div>
|
|
</div> -->
|
|
<Fluid>
|
|
<h1 class="text-xl font-bold mt-6">KS Document</h1>
|
|
<div class="card flex mt-2 flex-col gap-4 w-full justify-center">
|
|
<Stepper value="1" linear :loading="loadingStore.another_loading">
|
|
<StepList>
|
|
<Step value="1">Add document</Step>
|
|
<Step value="2">Set parameters</Step>
|
|
<Step value="3">Ingest document</Step>
|
|
</StepList>
|
|
<StepPanels>
|
|
<StepPanel value="1" v-slot="{ activateCallback }">
|
|
<div class="flex flex-col h-48">
|
|
<FileUpload ref="fileUpload" :maxFileSize="10000000000" chooseLabel="Select File" class="p-button"
|
|
style="width: 150px;" @select="onFileSelect" @remove="onFileRemove" :showUploadButton="false"
|
|
:showCancelButton="false" v-model:files="selectedFile" :fileLimit=1>
|
|
<template #empty>
|
|
<div class="flex items-center justify-center flex-col">
|
|
<i class="pi pi-cloud-upload !border-2 !rounded-full !p-8 !text-4xl !text-muted-color" />
|
|
<p class="mt-6 mb-0">Drag and drop the file you want to add to the knowledge base. You can upload
|
|
only one file.</p>
|
|
</div>
|
|
</template>
|
|
</FileUpload>
|
|
</div>
|
|
<div class="flex mt-16 pt-6 justify-end">
|
|
<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" value="0">
|
|
<TabList>
|
|
<Tab value="0">Base</Tab>
|
|
<Tab value="1">Advanced</Tab>
|
|
</TabList>
|
|
<TabPanels>
|
|
<TabPanel value="0">
|
|
<div class="col-12 md:col-6 mb-4 mt-4">
|
|
<span class="p-float-label">
|
|
<label for="description">Document Description</label>
|
|
<i class="pi pi-info-circle text-violet-600 cursor-pointer"
|
|
v-tooltip="'A brief overview of the document'"></i>
|
|
<InputText id="description" type="text" v-model="formData.description" required
|
|
class="w-full" />
|
|
</span>
|
|
</div>
|
|
<div class="col-12 md:col-6 mb-4">
|
|
<span class="p-float-label">
|
|
<label for="type">File Type</label>
|
|
<i class="pi pi-info-circle text-violet-600 cursor-pointer"
|
|
v-tooltip="'Specify the type of file'"></i>
|
|
<InputText id="type" v-model="formData.type" required class="w-full" />
|
|
</span>
|
|
</div>
|
|
<div class="col-12 md:col-6 mb-4">
|
|
<span class="p-float-label">
|
|
<label for="ksProjectName">KS Project Name</label>
|
|
<InputText id="ksProjectName" v-model="userPrefStore.selectedProject.internal_name" required
|
|
class="w-full" :disabled="true" />
|
|
</span>
|
|
</div>
|
|
<div class="col-12 md:col-6 mb-4">
|
|
<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>
|
|
</span>
|
|
</div>
|
|
<div class="col-12 md:col-6 mb-4">
|
|
<span class="p-float-label">
|
|
<label for="ksDocType">KS Document Type</label>
|
|
<i class="pi pi-info-circle text-violet-600 cursor-pointer"
|
|
v-tooltip="'Specify the type of document'"></i>
|
|
<Dropdown id="ksDocType" v-model="formData.ksDocType" :options="documentTypeOptions"
|
|
optionLabel="name" :required class="w-full"></Dropdown>
|
|
</span>
|
|
</div>
|
|
<div class="col-12 md:col-6 mb-4">
|
|
<span class="p-float-label">
|
|
<label for="ksDocSource">KS Document Source</label>
|
|
<i class="pi pi-info-circle text-violet-600 cursor-pointer"
|
|
v-tooltip="'Specify the document source. e.g, Retrieved from DevopsJ2Cloud Git Repository - CSV System Configuration '"></i>
|
|
<InputText id="ksDocSource" v-model="formData.ksDocSource" required class="w-full" />
|
|
</span>
|
|
</div>
|
|
</TabPanel>
|
|
<TabPanel value="1">
|
|
<div class="col-12 md:col-6 mb-4 mt-4">
|
|
<span class="p-float-label">
|
|
<label for="defaultChunkSize">Default Chunk Size</label>
|
|
<i class="pi pi-info-circle text-violet-600 cursor-pointer"
|
|
v-tooltip="'Define the default size for chunks of data'"></i>
|
|
<InputNumber id="defaultChunkSize" v-model="formData.defaultChunkSize" required
|
|
class="w-full" />
|
|
</span>
|
|
<small v-if="errors.defaultChunkSize" class="text-red-500">{{ errors.defaultChunkSize }}</small>
|
|
</div>
|
|
<div class="col-12 md:col-6 mb-4">
|
|
<span class="p-float-label">
|
|
<label for="minChunkSize">Min Chunk Size</label>
|
|
<i class="pi pi-info-circle text-violet-600 cursor-pointer"
|
|
v-tooltip="'Specify the minimum allowable size for chunks'"></i>
|
|
<InputNumber id="minChunkSize" v-model="formData.minChunkSize" required class="w-full" />
|
|
</span>
|
|
<small v-if="errors.minChunkSize" class="text-red-500">{{ errors.minChunkSize }}</small>
|
|
</div>
|
|
<div class="col-12 md:col-6 mb-4">
|
|
<span class="p-float-label">
|
|
<label for="minChunkSizeToEmbed">Min Chunk Size to Embed</label>
|
|
<i class="pi pi-info-circle text-violet-600 cursor-pointer"
|
|
v-tooltip="'Define the minimum chunk size that can be embedded'"></i>
|
|
<InputNumber id="minChunkSizeToEmbed" v-model="formData.minChunkSizeToEmbed" required
|
|
class="w-full" />
|
|
</span>
|
|
<small v-if="errors.minChunkSizeToEmbed" class="text-red-500">{{ errors.minChunkSizeToEmbed
|
|
}}</small>
|
|
</div>
|
|
<div class="col-12 md:col-6 mb-4">
|
|
<span class="p-float-label">
|
|
<label for="maxNumberOfChunks">Max Number of Chunks</label>
|
|
<i class="pi pi-info-circle text-violet-600 cursor-pointer"
|
|
v-tooltip="'Set the maximum number of chunks allowed'"></i>
|
|
<InputNumber id="maxNumberOfChunks" v-model="formData.maxNumberOfChunks" required
|
|
class="w-full" />
|
|
</span>
|
|
<small v-if="errors.maxNumberOfChunks" class="text-red-500">{{ errors.maxNumberOfChunks
|
|
}}</small>
|
|
</div>
|
|
</TabPanel>
|
|
</TabPanels>
|
|
</Tabs>
|
|
</div>
|
|
<div class="flex justify-between pt-6">
|
|
<Button label="Back"
|
|
:style="{ width: '150px', backgroundColor: '#9c9c9c', color: 'white', border: '1px grey' }"
|
|
icon="pi pi-arrow-left" @click="activateCallback('1')" />
|
|
<Button label="Next" style="width: 150px;" class="p-button" icon="pi pi-arrow-right" iconPos="right"
|
|
@click="activateCallback('3')" :disabled="!isFormValid"
|
|
v-tooltip.top="!isFormValid ? 'Please fill in all fields' : ''" />
|
|
</div>
|
|
</StepPanel>
|
|
<StepPanel value="3" v-slot="{ activateCallback }">
|
|
<div class="flex flex-col mt-8 h-48">
|
|
<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 type="submit" label="Ingest" :fluid="false"></Button>
|
|
</div>
|
|
</div>
|
|
<div class="flex justify-between pt-6">
|
|
<Button label="Back"
|
|
:style="{ width: '150px', backgroundColor: '#9c9c9c', color: 'white', border: '1px grey' }"
|
|
icon="pi pi-arrow-left" @click="activateCallback('2')" />
|
|
</div>
|
|
</StepPanel>
|
|
</form>
|
|
</StepPanels>
|
|
</Stepper>
|
|
</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>
|
|
<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" />
|
|
</template>
|
|
</Dialog>
|
|
</template>
|
|
|
|
<script setup>
|
|
import axios from 'axios';
|
|
import Step from 'primevue/step';
|
|
import StepList from 'primevue/steplist';
|
|
import StepPanel from 'primevue/steppanel';
|
|
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();
|
|
const userPrefStore = UserPrefStore();
|
|
const loadingStore = LoadingStore();
|
|
const ksDocumentStore = KsDocumentStore();
|
|
const required = ref([]);
|
|
const ingestionResult = ref('');
|
|
const fileUploaded = ref(false);
|
|
const minChunkSize = ref(50);
|
|
const maxNumberOfChunks = ref(1000);
|
|
const minChunkSizeToEmbed = ref(50);
|
|
const fileUpload = ref(null);
|
|
const selectedFile = ref(null);
|
|
const ingestionDialogVisible = ref(false);
|
|
const ksdocuments = ref(null);
|
|
const showDialog = ref(false);
|
|
const existingDocument = ref(null);
|
|
const formDataToSend = ref(new FormData());
|
|
|
|
const documentTypeOptions = ref([
|
|
{ name: 'Functional', value: 'functional' },
|
|
{ name: 'Code Instruction', value: 'code_instruction' },
|
|
{ name: 'Specification', value: 'specification' },
|
|
{ name: 'Other', value: 'other' }
|
|
]);
|
|
const availableAppOptions = ref([
|
|
{ name: 'Cross', value: '' },
|
|
...userPrefStore.availableApp.map(app => ({ name: app.internal_name, value: app.internal_name }))
|
|
]);
|
|
const errors = ref({
|
|
defaultChunkSize: "",
|
|
minChunkSize: "",
|
|
maxNumberOfChunks: "",
|
|
minChunkSizeToEmbed: "",
|
|
});
|
|
|
|
const formData = ref({
|
|
description: '',
|
|
type: '',
|
|
ksProjectName: '',
|
|
ksApplicationName: { name: 'Cross', value: '' },
|
|
ksDocType: { name: 'Functional', value: 'functional' },
|
|
ksDocSource: '',
|
|
defaultChunkSize: 2000,
|
|
minChunkSize: 50,
|
|
maxNumberOfChunks: 1000,
|
|
minChunkSizeToEmbed: 50
|
|
});
|
|
|
|
|
|
const isFileSelected = computed(() => selectedFile.value !== null);
|
|
|
|
watch(
|
|
() => formData.value.defaultChunkSize,
|
|
(newValue) => validateField("defaultChunkSize", newValue, 500, 2000),
|
|
);
|
|
watch(
|
|
() => formData.value.minChunkSize,
|
|
(newValue) => validateField("minChunkSize", newValue, minChunkSize.value, 100)
|
|
);
|
|
watch(
|
|
() => formData.value.maxNumberOfChunks,
|
|
(newValue) => validateField("maxNumberOfChunks", newValue, maxNumberOfChunks.value, 2000)
|
|
);
|
|
watch(
|
|
() => formData.value.minChunkSizeToEmbed,
|
|
(newValue) => validateField("minChunkSizeToEmbed", newValue, minChunkSizeToEmbed.value, 100)
|
|
);
|
|
|
|
const validateField = (field, value, minvalue, maxvalue) => {
|
|
if (value === null || value === undefined || value < minvalue || value > maxvalue) {
|
|
errors.value[field] = "Value must be between " + minvalue + " and " + maxvalue;
|
|
} else {
|
|
errors.value[field] = "";
|
|
}
|
|
};
|
|
|
|
const isFormValid = computed(() => {
|
|
return (
|
|
formData.value.description &&
|
|
formData.value.type &&
|
|
formData.value.ksApplicationName &&
|
|
formData.value.ksDocType &&
|
|
formData.value.ksDocSource &&
|
|
!Object.values(errors.value).some((err) => err !== "")
|
|
);
|
|
});
|
|
|
|
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;
|
|
fileUploaded.value = false;
|
|
}
|
|
|
|
toast.add({
|
|
severity: 'success',
|
|
summary: 'Success',
|
|
detail: 'File uploaded successfully!',
|
|
life: 3000
|
|
});
|
|
};
|
|
|
|
watch(() => userPrefStore.getSelApp, updateDocuments, { immediate: true });
|
|
|
|
function updateDocuments() {
|
|
ksDocumentStore.fetchKsDocument().then(() => {
|
|
|
|
ksdocuments.value = [...(ksDocumentStore.ksDocument || [])];
|
|
});
|
|
};
|
|
|
|
const onFileRemove = () => {
|
|
selectedFile.value = null;
|
|
toast.add({
|
|
severity: 'success',
|
|
summary: 'Success',
|
|
detail: 'File removed successfully!',
|
|
life: 3000
|
|
});
|
|
};
|
|
|
|
const startIndividualngestion = async (id) => {
|
|
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 });
|
|
});
|
|
|
|
|
|
};
|
|
|
|
const deleteRecord = (name) => {
|
|
const documentToDelete = ksdocuments.value.find(doc => doc.name === name);
|
|
if (!documentToDelete) {
|
|
console.error('Document not found');
|
|
return;
|
|
}
|
|
|
|
const requestPayload = {
|
|
ksDocumentId: documentToDelete.id,
|
|
ksIngestionInfoId: documentToDelete.ingestionInfo.id,
|
|
ksDoctype: documentToDelete.ingestionInfo.metadata.KsDoctype,
|
|
ksDocSource: documentToDelete.ingestionInfo.metadata.KsDocSource,
|
|
ksFileSource: documentToDelete.ingestionInfo.metadata.KsFileSource,
|
|
ksApplicationName: documentToDelete.ingestionInfo.metadata.KsApplicationName,
|
|
};
|
|
|
|
axios.post('/fe-api/vector-store/deleteRecords', requestPayload)
|
|
.then(response => {
|
|
console.log('Delete resource:', response.data)
|
|
})
|
|
.catch(error => {
|
|
console.error('Error overwriting records: ', error)
|
|
toast.add({ severity: 'error', summary: 'Error', detail: 'Error in Overwriting', life: 3000 });
|
|
});
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const submitForm = async () => {
|
|
existingDocument.value = null
|
|
formDataToSend.value = new FormData(); // Reset del formData ogni volta
|
|
|
|
if (selectedFile.value) {
|
|
formDataToSend.value.append('file', selectedFile.value); // Aggiungi il file
|
|
|
|
// Aggiungi i dati del fileUploadDTO
|
|
formDataToSend.value.append('description', formData.value.description);
|
|
formDataToSend.value.append('type', formData.value.type);
|
|
formDataToSend.value.append('ksProjectName', userPrefStore.selectedProject.internal_name);
|
|
formDataToSend.value.append('ksApplicationName', formData.value.ksApplicationName.value);
|
|
formDataToSend.value.append('ksDocType', formData.value.ksDocType.value);
|
|
formDataToSend.value.append('ksDocSource', formData.value.ksDocSource);
|
|
formDataToSend.value.append('defaultChunkSize', formData.value.defaultChunkSize);
|
|
formDataToSend.value.append('minChunkSize', formData.value.minChunkSize);
|
|
formDataToSend.value.append('maxNumberOfChunks', formData.value.maxNumberOfChunks);
|
|
formDataToSend.value.append('minChunkSizeToEmbed', formData.value.minChunkSizeToEmbed);
|
|
}
|
|
existingDocument.value = ksdocuments.value.find(doc => doc.name === selectedFile.value.name);
|
|
if (existingDocument.value) {
|
|
showDialog.value = true;
|
|
return;
|
|
}
|
|
|
|
await uploadFile(formDataToSend.value); // Passa formDataToSend.value a uploadFile
|
|
};
|
|
|
|
const confirmOverwrite = async () => {
|
|
showDialog.value = false;
|
|
deleteRecord(selectedFile.value.name);
|
|
await uploadFile(formDataToSend.value);
|
|
};
|
|
|
|
const cancelOverwrite = () => {
|
|
showDialog.value = false;
|
|
};
|
|
|
|
const uploadFile = async (formDataToSend) => {
|
|
try {
|
|
const response = await axios.post('/upload', formDataToSend, {
|
|
headers: {
|
|
'Content-Type': 'multipart/form-data'
|
|
}
|
|
});
|
|
|
|
ksdocuments.value.push(response.data);
|
|
|
|
startIndividualngestion(response.data.id);
|
|
router.push({ name: 'ks-document' });
|
|
|
|
} catch (error) {
|
|
console.error('Ingestion failed:', error);
|
|
}
|
|
};
|
|
|
|
</script>
|
|
|
|
<style scoped>
|
|
.pi-info-circle {
|
|
margin-left: 6px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.loading-container {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
z-index: 9999;
|
|
background-color: rgba(255, 255, 255, 0.8);
|
|
}
|
|
</style>
|