admin/apollo-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update Apollo layput

Browse Source 
Resolved Similarity Search bug
This commit is contained in:
Emanuele Ferrelli
2025-03-14 15:08:17 +01:00
parent 2338845f00
commit 4a43ff984a
7 changed files with 538 additions and 281 deletions
Download Patch File Download Diff File Expand all files Collapse all files

245
src/views/pages/ksDocuments/KsDocuments.vue
View File

@@ -1,18 +1,18 @@
<template>
<div class="card">
<Toast />
<Toast />
<ConfirmPopup></ConfirmPopup>
<div v-if="loadingStore.another_loading" class="loading-container">
<div class="spinner-container">
<ProgressSpinner class="spinner" />
<p class="loading-text">Loading data...</p>
</div>
</div>
<DataTable v-model:filters="filters" :value="ksdocuments" paginator showGridlines :rows="10" dataKey="id"
filterDisplay="menu" :loading="loadingStore.another_loading"
:globalFilterFields="['ingestionInfo.metadata.KsApplicationName', 'ingestionInfo.metadata.KsFileSources', 'ingestionInfo.metadata.KsDocSource', 'ingestionStatus', 'ingestionDateFormat']">
<template #header>
<div >
<DataTable v-model:filters="filters" v-model:expandedRows="expandedRows" @rowExpand="onRowExpand"
@rowCollapse="onRowCollapse" :value="ksdocuments"
:loading="loadingStore.loading_exectuion"
:paginator="true" :rows="10"
paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown"
currentPageReportTemplate="Showing {first} to {last} of {totalRecords} records"
:rowsPerPageOptions="[10, 15, 20, 50, 100]" dataKey="id" :rowHover="true" rowGroupMode="subheader"
:sortOrder="1" filterDisplay="menu"
:globalFilterFields="['ingestionInfo.metadata.KsApplicationName', 'ingestionInfo.metadata.KsFileSources', 'ingestionInfo.metadata.KsDocSource', 'ingestionStatus', 'ingestionDateFormat']"
tableStyle="min-width: 70rem" removableSort>
<template #header>
<div class="flex items-center justify-between gap-4 p-4 ">
<span class="text-xl font-bold">Knowledge Source Documents</span>
<div class="flex items-center gap-2 flex-grow">
@@ -20,53 +20,19 @@
<InputIcon>
<i class="pi pi-search" />
</InputIcon>
<InputText v-model="filters['global'].value" placeholder="Keyword Search" />
<InputText v-model="filters['global'].value" placeholder="Search..." />
</IconField>
</div>
<Button icon="pi pi-plus" rounded raised @click="newKsDocument()" v-tooltip="'Create New Document'"
class="mr-2" />
<Button icon="pi pi-plus" rounded raised @click="newKsDocument()"
v-tooltip.left="'Add New Document'"
class="mr-2 p-button-sm" />
<Button icon="pi pi-check-circle" rounded raised @click="startlngestion()"
v-tooltip="'Start All documents Ingestion'" class="mr-8" :disabled="allDocumentsIngested"
:class="{ 'p-button-danger': allDocumentsIngested }" />
v-tooltip.left="'Start All documents Ingestion'"
class="mr-8 p-button-sm"
:disabled="allDocumentsIngested" :class="{ 'p-button': allDocumentsIngested }" />
</div>
</template>
<template #empty>No Records found</template>
<Column field="ingestionInfo.metadata.KsApplicationName" header="ApplicationName" sortable
style="min-width: 12rem">
<template #body="{ data }">
{{ data.ingestionInfo.metadata.KsApplicationName }}
</template>
<template #filter="{ filterModel, filterCallback }">
<InputText v-model="filterModel.value" type="text" @input="filterCallback()"
placeholder="Search by File" />
</template>
</Column>
<Column field="ingestionInfo.metadata.KsProjectName" header="KsProjectName" sortable
style="min-width: 12rem">
<template #body="{ data }">
{{ data.ingestionInfo.metadata.KsProjectName }}
</template>
</Column>
<Column field="ingestionInfo.metadata.KsFileSource" header="FileSource" sortable>
<template #body="{ data }">
{{ data.ingestionInfo.metadata.KsFileSource }}
</template>
<template #filter="{ filterModel, filterCallback }">
<InputText v-model="filterModel.value" type="text" @input="filterCallback()"
placeholder="Search by File Name" />
</template>
</Column>
<Column field="ingestionInfo.metadata.KsDocSource" header="DocSource" sortable style="min-width: 12rem">
<template #body="{ data }">
{{ data.ingestionInfo.metadata.KsDocSource }}
</template>
<template #filter="{ filterModel, filterCallback }">
<InputText v-model="filterModel.value" type="text" @input="filterCallback()"
placeholder="Search by File" />
</template>
</Column>
<Column field="ingestionStatus" header="Status" sortable>
<template #body="slotProps">
<Tag :value="slotProps.data.ingestionStatus" :severity="getStatus(slotProps.data)" />
@@ -80,6 +46,34 @@
</Select>
</template>
</Column>
<Column field="ingestionInfo.metadata.KsFileSource" header="FileName" sortable>
<template #body="{ data }">
{{ data.fileName }}
</template>
<template #filter="{ filterModel, filterCallback }">
<InputText v-model="filterModel.value" type="text" @input="filterCallback()"
placeholder="Search by File Name" />
</template>
</Column>
<Column field="ingestionInfo.metadata.KsApplicationName" header="ApplicationName" sortable
style="min-width: 12rem">
<template #body="{ data }">
{{ data.ingestionInfo.metadata.KsApplicationName }}
</template>
<template #filter="{ filterModel, filterCallback }">
<InputText v-model="filterModel.value" type="text" @input="filterCallback()"
placeholder="Search by File" />
</template>
</Column>
<Column field="ingestionInfo.metadata.KsDocSource" header="DocType" sortable style="min-width: 12rem">
<template #body="{ data }">
{{ data.ingestionInfo.metadata.KsDoctype }}
</template>
<template #filter="{ filterModel, filterCallback }">
<InputText v-model="filterModel.value" type="text" @input="filterCallback()"
placeholder="Search by File" />
</template>
</Column>
<Column header="Date" filterField="ingestionDateFormat" dataType="date" style="min-width: 10rem">
<template #body="{ data }">
{{ formatDate(data.ingestionDate) }}
@@ -89,34 +83,33 @@
@change="updateFilterModel" />
</template>
</Column>
<Column headerStyle="width: 5rem; text-align: center" bodyStyle="text-align: center; overflow: visible">
<template #body="slotProps">
<div class="flex justify-center items-center space-x-3">
<!--Button type="button" icon="pi pi-pencil" rounded @click="editKsDocument(slotProps.data)"
v-tooltip="'Edit the information of document'" /-->
<Button type="button" icon="pi pi-play" rounded
@click="startIndividualngestion(slotProps.data.id)"
v-tooltip="'Start Ingestion of document'"
<Column field="id" :style="{ position: 'sticky', right: '0', zIndex: '1', background: '#f3f3f3' }">
<!-- <Column field="id" :style="{ position: 'sticky', right: '0', zIndex: '1'}"> -->
<template #body="slotProps">
<div class="flex justify-center items-center space-x-3">
<!-- PARTE EDIT DA CREARE -->
<!-- <Button type="button" icon="pi pi-pencil" rounded @click="editKsDocument(slotProps.data)"
v-tooltip="'Edit the information of document'" /> -->
<Button type="button" icon="pi pi-play" rounded @click="startIndividualngestion(slotProps.data.id)"
v-tooltip.left="'Start Ingestion of document'"
:disabled="slotProps.data.ingestionStatus === 'INGESTED'"
:class="{ 'p-button-danger': slotProps.data.ingestionStatus === 'INGESTED' }" />
<Button type="button" icon="pi pi-trash" rounded @click="confirmDelete(slotProps.data.id)"
v-tooltip="'Delete the ingested Record'"
:disabled="slotProps.data.ingestionStatus === 'NEW'"
:class="{ 'p-button-danger': slotProps.data.ingestionStatus === 'NEW' }" />
:class="{ 'p-button': slotProps.data.ingestionStatus === 'INGESTED' }" />
<Button type="button" icon="pi pi-trash" rounded @click="confirmDeleteFromVectorStore(slotProps.data.id)"
v-tooltip.left="'Delete the ingested Record'"
:disabled="slotProps.data.ingestionStatus !== 'INGESTED'"
:class="{ 'mr-2 p-button': slotProps.data.ingestionStatus !== 'INGESTED' }" />
<Button type="button" icon="pi pi-search" rounded @click="openSimilaritySearch(slotProps.data)"
v-tooltip="'Similarity Search'" :disabled="slotProps.data.ingestionStatus === 'NEW'"
:class="{ 'p-button-danger': slotProps.data.ingestionStatus === 'NEW' }" />
v-tooltip.left="'Similarity Search'"
:disabled="slotProps.data.ingestionStatus !== 'INGESTED'"
:class="{ 'mr-2 p-button': slotProps.data.ingestionStatus !== 'INGESTED' }" />
<Button type="button" icon="pi pi-download" rounded @click="downloadFile(slotProps.data)"
v-tooltip="'Download file'" :disabled="slotProps.data.ingestionStatus === 'NEW'"
:class="{ 'p-button-danger': slotProps.data.ingestionStatus === 'NEW' }" />
</div>
</template>
v-tooltip.left="'Download file'"
class="mr-2 p-button" />
</div>
</template>
</Column>
</DataTable>
<Dialog header="Ingestion Result" v-model:visible="ingestionDialogVisible" :modal="true" :closable="false">
<p>{{ ingestionResult }}</p>
<Button label="OK" icon="pi pi-check" @click="ingestionDialogVisible = false" />
</Dialog>
</div>
</template>
@@ -143,13 +136,14 @@ import { KsDocumentStore } from '../../../stores/KsDocumentStore';
import { LoadingStore } from '../../../stores/LoadingStore';
import { UserPrefStore } from '../../../stores/UserPrefStore';
const expandedRows = ref([]);
const router = useRouter()
const ksdocuments = ref(null);
const loading = ref(true);
const toast = useToast();
const confirm = useConfirm();
const ingestionDialogVisible = ref(false);
//const ingestionDialogVisible = ref(false);
const ingestionResult = ref('');
const filters = ref();
const userPrefStore = UserPrefStore();
@@ -170,18 +164,23 @@ const initFilters = () => {
initFilters();
const statuses = ref(['NEW', 'INGESTED', 'FAILED']); // Add your statuses here
const statuses = ref(['NEW', 'LOADED','INGESTED', 'FAILED']); // Add your statuses here
onMounted(() => {
userPrefStore.fetchUserData().then(() => {
updateDocuments();
});
});
const onRowExpand = (event) => {
console.log("Row expanded:", event.data);
};
const onRowCollapse = (event) => {
console.log("Row collapsed:", event.data);
};
watch(() => userPrefStore.getSelApp, updateDocuments, { immediate: true });
function updateDocuments() {
@@ -189,6 +188,7 @@ function updateDocuments() {
ksDocumentStore.fetchKsDocument().then(() => {
ksdocuments.value = getCustomDatewithAllResponse();
//ingestionDialogVisible.value = false;
//loading.value = false;
});
};
@@ -205,7 +205,7 @@ const allDocumentsIngested = computed(() => {
const getStatus = (data) => {
if (data.ingestionStatus === 'INGESTED') {
return 'success';
} else if (data.ingestionStatus === 'NEW') {
} else if (data.ingestionStatus === 'LOADED') {
return 'danger';
} else {
return 'warn';
@@ -269,8 +269,8 @@ const downloadFile = async (doc) => {
link.click();
link.remove();*/
} catch (error) {
console.error("Errore durante il download:", error);
alert("Errore durante il download. Controlla il nome del file.");
console.error("Error while downloading the file:", error);
toast.add({ severity: 'error', summary: 'Error', detail: 'Error while downloading the file. Check the file name.', life: 3000 });
}
};
@@ -280,23 +280,21 @@ const editKsDocument = (data) => {
}
const openSimilaritySearch = (doc) => {
console.log("doc", doc)
ksDocumentStore.setSelectedKsDocument(doc).then(() => {
router.push({ name: 'ks_similarity_search' });
});
}
const confirmDelete = (id) => {
console.log("id", id);
const confirmDeleteFromVectorStore = (id) => {
console.log("OK");
confirm.require({
target: event.currentTarget,
target: event.target,
message: 'Are you sure you want to proceed?',
icon: 'pi pi-exclamation-triangle',
rejectProps: {
label: 'Cancel',
severity: 'secondary',
outlined: true
class:"p-button",
outlined: true,
},
acceptProps: {
label: 'Delete',
@@ -304,7 +302,6 @@ const confirmDelete = (id) => {
},
accept: () => {
const documentToDelete = ksdocuments.value.find(doc => doc.id === id);
console.log("documentToDelete", documentToDelete)
if (!documentToDelete) {
console.error('Document not found');
return;
@@ -318,45 +315,46 @@ const confirmDelete = (id) => {
ksFileSource: documentToDelete.ingestionInfo.metadata.KsFileSource,
ksApplicationName: documentToDelete.ingestionInfo.metadata.KsApplicationName,
};
console.log("requestPayload", requestPayload)
axios.post('/fe-api/vector-store/deleteRecords', requestPayload)
axios.post('/fe-api/vector-store/deleteRecordsFromVectorStore', requestPayload)
.then(response => {
console.log('Delete resource:', response.data)
ksdocuments.value = ksdocuments.value.filter(doc => doc.id !== id);
console.log('ksdocuments.value', ksdocuments.value)
toast.add({ severity: 'info', summary: 'Confirmed', detail: 'deletion is in PROGRESS', life: 3000 });
updateDocuments(); // Call updateDocuments after successful deletion
toast.add({ severity: 'success', summary: 'Success', detail: 'Deletion Completed', life: 3000 });
})
.catch(error => {
console.error('Error deleting records: ', error)
toast.add({ severity: 'error', summary: 'Error', detail: 'Error in Deletion', life: 3000 });
});
},
reject: () => {
toast.add({ severity: 'error', summary: 'Rejected', detail: 'You have rejected', life: 3000 })
}
})
};
//ingestion
const startIndividualngestion = (id) => {
toast.add({ severity: 'info', summary: 'Info', detail: 'Starting Ingestion', life: 3000 });
axios.get(`/test/ingest_document/${id}`)
.then(response => {
ingestionResult.value = response.data;
if (response.data.status == "OK") {
ksdocuments.value.forEach(element => {
updateDocuments();
if (response.data.ingestedDocumentId.includes(element.id)) {
element.status = "INGESTED"
updateDocuments();
toast.add({severity: 'success', summary: 'Success', detail: 'File ingested successfully!', life: 3000});
}
});
} else {
ingestionResult.value = `Error: ${response.data.message}`;
ingestionResult.value = `Error: ${response.data.message}`;
}
ingestionDialogVisible.value = true;
//ingestionDialogVisible.value = true;
})
.catch(error => {
ingestionDialogVisible.value = true;
//ingestionDialogVisible.value = true;
console.error('Error ingesting record: ', error)
toast.add({ severity: 'error', summary: 'Error', detail: 'Error while ingesting', life: 3000 });
});
};
@@ -374,18 +372,18 @@ const startlngestion = () => {
ingestionResult.value = `Error: ${response.data.message}`;
}
ingestionDialogVisible.value = true;
//ingestionDialogVisible.value = true;
})
.catch(error => {
ingestionDialogVisible.value = true;
//ingestionDialogVisible.value = true;
console.error('Error ingesting records: ', error)
toast.add({ severity: 'error', summary: 'Error', detail: 'Error in Ingestion', life: 3000 });
});
};
//new record creation
const newKsDocument = () => {
console.log('new');
router.push({ name: 'ks-document-new' });
}
// Function to format date string
@@ -394,6 +392,7 @@ function formatDate(dateString) {
return moment(dateString).format('MM/DD/YYYY');
}
</script>
<style scoped>
@@ -411,27 +410,6 @@ function formatDate(dateString) {
cursor: not-allowed;
}
.space-x-3>*+* {
margin-left: 1rem;
/* Adjust as needed for desired spacing */
}
.loading-container {
display: flex;
align-items: center;
justify-content: center;
position: fixed;
/* Change to fixed */
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 9999;
/* Ensure it’s on top of everything */
background-color: rgba(255, 255, 255, 0.8);
/* Optional: Add a background to obscure content */
}
.spinner-container {
display: flex;
flex-direction: column;
@@ -447,12 +425,6 @@ function formatDate(dateString) {
color: var(--primary-color, #007bff);
}
.loading-text {
font-size: 1.2rem;
animation: pulse 1.5s infinite;
margin-top: 10px;
color: var(--primary-color, #007bff);
}
@keyframes spin {
0% {
@@ -491,4 +463,5 @@ function formatDate(dateString) {
.card {
margin: 2rem;
}
</style>