478 lines
15 KiB
Vue
478 lines
15 KiB
Vue
<template>
|
|
<Toast />
|
|
<ConfirmPopup></ConfirmPopup>
|
|
<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-8 p-6 ">
|
|
<span class="text-xl font-bold">Knowledge Source Documents</span>
|
|
<div class="flex items-center gap-2 flex-grow">
|
|
<IconField class="flex-grow">
|
|
<InputIcon>
|
|
<i class="pi pi-search" />
|
|
</InputIcon>
|
|
<InputText v-model="filters['global'].value" placeholder="Search..." />
|
|
</IconField>
|
|
</div>
|
|
<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.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="ingestionStatus" header="Status" sortable>
|
|
<template #body="slotProps">
|
|
<Tag v-tooltip="slotProps.data.ingestionMessage" :value="slotProps.data.ingestionStatus"
|
|
:severity="getStatus(slotProps.data)" />
|
|
</template>
|
|
<template #filter="{ filterModel, filterCallback }">
|
|
<Select v-model="filterModel.value" @change="filterCallback()" :options="statuses"
|
|
placeholder="Select One" style="min-width: 12rem" :showClear="true">
|
|
<template #option="{ option }">
|
|
<Tag :value="option" :severity="getStatus({ ingestionStatus: option })" />
|
|
</template>
|
|
</Select>
|
|
</template>
|
|
</Column>
|
|
<Column field="ingestionInfo.metadata.KsFileSource" header="FileName" sortable>
|
|
<template #body="{ data }">
|
|
<span>
|
|
<i :class="getFileIcon(data.fileName)" class="mr-2"></i>
|
|
{{ data.fileName }}
|
|
</span>
|
|
</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.KsDoctype" header="DocType" sortable style="min-width: 12rem">
|
|
<template #body="{ data }">
|
|
{{ mapDocType(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) }}
|
|
</template>
|
|
<template #filter="{ filterModel }">
|
|
<DatePicker v-model="filterModel.value" dateFormat="mm/dd/yy" placeholder="mm/dd/yyyy"
|
|
@change="updateFilterModel" />
|
|
</template>
|
|
</Column>
|
|
<Column field="id" header="Actions" style="width: 10rem" class="text-center">
|
|
<template #body="slotProps">
|
|
<div class="flex justify-center items-center space-x-3">
|
|
|
|
<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' || slotProps.data.ingestionStatus == 'IN PROGRESS' || slotProps.data.ingestionStatus == 'INGESTING' || slotProps.data.ingestionStatus == 'INGESTION_QUEUE'"
|
|
:class="{ 'p-button': slotProps.data.ingestionStatus === 'INGESTED' }"></Button>
|
|
<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' || slotProps.data.ingestionStatus == 'IN PROGRESS'"
|
|
:class="{ 'mr-2 p-button': slotProps.data.ingestionStatus !== 'INGESTED' }"></Button>
|
|
|
|
<Button type="button" icon="pi pi-search" rounded @click="openSimilaritySearch(slotProps.data)"
|
|
v-tooltip.left="'Similarity Search'"
|
|
:disabled="slotProps.data.ingestionStatus !== 'INGESTED' || slotProps.data.ingestionStatus == 'IN PROGRESS'"
|
|
:class="{ 'mr-2 p-button': slotProps.data.ingestionStatus !== 'INGESTED' }"></Button>
|
|
<Button type="button" icon="pi pi-download" rounded @click="downloadFile(slotProps.data)"
|
|
v-tooltip.left="'Download file'" class="mr-2 p-button"></Button>
|
|
</div>
|
|
</template>
|
|
</Column>
|
|
|
|
</DataTable>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { FilterMatchMode, FilterOperator } from '@primevue/core/api';
|
|
import axios from 'axios';
|
|
import moment from 'moment';
|
|
import { useConfirm } from "primevue/useconfirm";
|
|
import { useToast } from 'primevue/usetoast';
|
|
import { computed, onMounted, ref, watch } from 'vue';
|
|
import { useRouter } from 'vue-router';
|
|
|
|
import Button from 'primevue/button';
|
|
import Column from 'primevue/column';
|
|
import DataTable from 'primevue/datatable';
|
|
import DatePicker from 'primevue/datepicker';
|
|
import InputText from 'primevue/inputtext';
|
|
import Select from 'primevue/select';
|
|
import Tag from 'primevue/tag';
|
|
import { KsDocumentService } from '../../../service/KsDocumentService';
|
|
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 ingestionResult = ref('');
|
|
const filters = ref();
|
|
const userPrefStore = UserPrefStore();
|
|
const ksDocumentStore = KsDocumentStore();
|
|
const loadingStore = LoadingStore();
|
|
const fe_status = ref('');
|
|
|
|
const initFilters = () => {
|
|
filters.value = {
|
|
global: { value: null, matchMode: FilterMatchMode.CONTAINS },
|
|
id: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }] },
|
|
'ingestionInfo.metadata.KsApplicationName': { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }] },
|
|
'ingestionInfo.metadata.KsFileSource': { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }] },
|
|
'ingestionInfo.metadata.KsDocSource': { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }] },
|
|
ingestionDateFormat: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.DATE_IS }] },
|
|
ingestionStatus: { operator: FilterOperator.OR, constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }] }
|
|
};
|
|
};
|
|
|
|
initFilters();
|
|
|
|
const statuses = ref(['NEW', 'LOADED', 'INGESTED', 'FAILED', 'ERROR', 'INGESTION_QUEUE', 'INGESTING']); // Add your statuses here
|
|
|
|
onMounted(() => {
|
|
userPrefStore.fetchUserData().then(() => {
|
|
updateDocuments();
|
|
|
|
setInterval(() => {
|
|
updateDocuments();
|
|
}, 5000);
|
|
});
|
|
|
|
|
|
});
|
|
|
|
|
|
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() {
|
|
ksDocumentStore.fetchKsDocument().then(() => {
|
|
ksdocuments.value = getCustomDatewithAllResponse();
|
|
});
|
|
};
|
|
|
|
const allDocumentsIngested = computed(() => {
|
|
return ksdocuments.value && ksdocuments.value.every(doc => doc.ingestionStatus == 'INGESTED');
|
|
});
|
|
|
|
const getStatus = (data) => {
|
|
if (data.ingestionStatus == 'INGESTED') {
|
|
return 'success';
|
|
} else if (data.ingestionStatus == 'LOADED' || data.ingestionStatus == 'ERROR') {
|
|
return 'danger';
|
|
} else if (data.ingestionStatus == 'IN PROGRESS' || data.ingestionStatus == 'INGESTION_QUEUE' || data.ingestionStatus == 'INGESTING') {
|
|
return 'info';
|
|
} else {
|
|
return 'warning';
|
|
}
|
|
}
|
|
|
|
const getCustomDatewithAllResponse = () => {
|
|
return [...(ksDocumentStore.ksDocument || [])].map((d) => {
|
|
d.ingestionDateFormat = new Date(d.ingestionDateFormat);
|
|
return d;
|
|
});
|
|
};
|
|
|
|
const updateFilterModel = () => {
|
|
console.log("updateFilterModel")
|
|
}
|
|
|
|
// Variabile reattiva per il nome del file
|
|
const filename = ref("");
|
|
|
|
// Funzione per scaricare il file
|
|
const downloadFile = async (doc) => {
|
|
console.log("doc", doc)
|
|
|
|
try {
|
|
|
|
const response = await KsDocumentService.downloadKsDocument(doc);
|
|
console.log("response download", response);
|
|
|
|
const contentType = response.headers['content-type']; // Tipo MIME dinamico
|
|
const blob = new Blob([response.data], { type: contentType });
|
|
|
|
// Crea un URL temporaneo per il download
|
|
const url = window.URL.createObjectURL(blob);
|
|
const link = document.createElement('a');
|
|
link.href = url;
|
|
|
|
const fileName = doc.fileName;
|
|
console.log("fileName", fileName)
|
|
|
|
link.setAttribute('download', fileName);
|
|
document.body.appendChild(link);
|
|
link.click();
|
|
link.remove();
|
|
|
|
} catch (error) {
|
|
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 });
|
|
}
|
|
};
|
|
|
|
const editKsDocument = (data) => {
|
|
console.log(data);
|
|
router.push({ name: 'ks-document-edit', params: { id: data.id } });
|
|
}
|
|
|
|
const openSimilaritySearch = (doc) => {
|
|
ksDocumentStore.setSelectedKsDocument(doc).then(() => {
|
|
router.push({ name: 'ks_similarity_search' });
|
|
});
|
|
}
|
|
|
|
const confirmDeleteFromVectorStore = (id) => {
|
|
console.log("OK");
|
|
confirm.require({
|
|
target: event.target,
|
|
message: 'Are you sure you want to proceed?',
|
|
icon: 'pi pi-exclamation-triangle',
|
|
rejectProps: {
|
|
label: 'Cancel',
|
|
class: "p-button",
|
|
outlined: true,
|
|
},
|
|
acceptProps: {
|
|
label: 'Delete',
|
|
severity: 'danger',
|
|
},
|
|
accept: () => {
|
|
const documentToDelete = ksdocuments.value.find(doc => doc.id === id);
|
|
if (!documentToDelete) {
|
|
console.error('Document not found');
|
|
return;
|
|
}
|
|
|
|
const requestPayload = {
|
|
ksDocumentId: 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/deleteRecordsFromVectorStore', requestPayload)
|
|
.then(response => {
|
|
console.log('Delete resource:', response.data)
|
|
ksdocuments.value.forEach(element => {
|
|
if (element.id == id) {
|
|
element.ingestionStatus = "DELETING"
|
|
console.log("Updated element", element)
|
|
}
|
|
});
|
|
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 });
|
|
});
|
|
}
|
|
})
|
|
};
|
|
|
|
//ingestion
|
|
const startIndividualngestion = (id) => {
|
|
toast.add({ severity: 'info', summary: 'Info', detail: 'Starting Ingestion...', life: 3000 });
|
|
fe_status.value = "INGESTION_QUEUE"
|
|
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 });
|
|
fe_status.value = "INGESTION_QUEUE"
|
|
}
|
|
if (response.data.status == "ERROR") {
|
|
toast.add({ severity: 'error', summary: 'Success', detail: 'Error ingesting document:' + response.data.message, life: 3000 });
|
|
fe_status.value = "ERROR"
|
|
}
|
|
ksdocuments.value.forEach(element => {
|
|
if (element.id == id) {
|
|
element.ingestionStatus = fe_status.value
|
|
console.log("Updated element", element)
|
|
}
|
|
});
|
|
})
|
|
.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 startlngestion = () => {
|
|
axios.get('/test/ingestion_loop')
|
|
.then(response => {
|
|
ingestionResult.value = response.data;
|
|
if (response.data.status == "OK") {
|
|
ksdocuments.value.forEach(element => {
|
|
if (response.data.ingestedDocumentId.includes(element.id)) {
|
|
element.status = "INGESTED"
|
|
}
|
|
});
|
|
} else {
|
|
ingestionResult.value = `Error: ${response.data.message}`;
|
|
}
|
|
|
|
//ingestionDialogVisible.value = true;
|
|
})
|
|
.catch(error => {
|
|
//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 = () => {
|
|
router.push({ name: 'ks-document-new' });
|
|
};
|
|
|
|
const getFileIcon = (filename) => {
|
|
const ext = filename.split('.').pop();
|
|
if (ext === 'pdf') {
|
|
return 'pi pi-file-pdf';
|
|
} else if (ext === 'doc' || ext === 'docx') {
|
|
return 'pi pi-file-word';
|
|
} else if (ext === 'xls' || ext === 'xlsx') {
|
|
return 'pi pi-file-excel';
|
|
} else if (ext === 'ppt' || ext === 'pptx') {
|
|
return 'pi pi-file-powerpoint';
|
|
} else {
|
|
return 'pi pi-file';
|
|
}
|
|
}
|
|
|
|
const mapDocType = (type) => {
|
|
const mapping = {
|
|
'functional': 'Functional',
|
|
'code_instruction': 'Code Instruction',
|
|
'specification': 'Specification',
|
|
'other': 'Other'
|
|
};
|
|
return mapping[type] || type;
|
|
};
|
|
|
|
// Function to format date string
|
|
function formatDate(dateString) {
|
|
// Parse the date string using moment
|
|
return moment(dateString).format('DD/MM/YYYY');
|
|
}
|
|
|
|
|
|
</script>
|
|
|
|
<style scoped>
|
|
/* Custom styling for disabled red button */
|
|
.p-button-danger {
|
|
background-color: white;
|
|
border-color: blue;
|
|
color: black;
|
|
}
|
|
|
|
.p-button-danger:disabled {
|
|
/*background-color: red;*/
|
|
border-color: red;
|
|
color: red;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.spinner-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
animation: fade-in 1s ease-in-out;
|
|
}
|
|
|
|
.spinner {
|
|
animation: spin 1s linear infinite;
|
|
width: 50px;
|
|
height: 50px;
|
|
color: var(--primary-color, #007bff);
|
|
}
|
|
|
|
|
|
@keyframes spin {
|
|
0% {
|
|
transform: rotate(0deg);
|
|
}
|
|
|
|
100% {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
@keyframes pulse {
|
|
|
|
0%,
|
|
100% {
|
|
opacity: 1;
|
|
color: var(--primary-color, #007bff);
|
|
}
|
|
|
|
50% {
|
|
opacity: 0.11;
|
|
color: var(--primary-color, #007bff);
|
|
}
|
|
}
|
|
|
|
@keyframes fade-in {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.card {
|
|
margin: 2rem;
|
|
}
|
|
</style> |