Added delete record button and redefined stores/services

This commit is contained in:
2025-06-25 13:05:25 +02:00
parent d4724495e9
commit aedce50e6a
8 changed files with 190 additions and 116 deletions

View File

@@ -1,11 +1,20 @@
import axios from 'axios';
export const KsDocumentService = {
getKsDocuments() {
return axios.get('/fe-api/ksdocuments')
return axios.get('/fe-api/ksdocuments');
},
downloadKsDocument(doc) {
return axios.post('/fe-api/ksdocuments/downloadKSDocument', doc, { responseType: "blob", });
return axios.post('/fe-api/ksdocuments/downloadKSDocument', doc, { responseType: 'blob' });
},
deleteKsDocumentRecord(requestPayload) {
return axios.post('/fe-api/vector-store/deleteRecords', requestPayload);
},
uploadKsDocument(formData, onUploadProgress) {
return axios.post('/upload', formData, {
headers: {
'Content-Type': 'multipart/form-data'
},
onUploadProgress
});
}
}
};

View File

@@ -10,6 +10,10 @@ export const KsVideoService = {
},
downloadKsVideo(video) {
return axios.get(`/fe-api/ksvideos/downloadKSVideo`, video, {responseType: 'blob', });
return axios.get(`/fe-api/ksvideos/downloadKSVideo`, video, { responseType: 'blob' });
},
deleteKsVideoRecord(requestPayload) {
return axios.post('/fe-api/vector-store/deleteVideoRecords', requestPayload);
}
};

View File

@@ -3,34 +3,47 @@ import { computed, ref } from 'vue';
import { KsDocumentService } from '../service/KsDocumentService';
import { LoadingStore } from './LoadingStore';
export const KsDocumentStore = defineStore('ksdocument_store', () => {
const lstKsDocument = ref([])
const selectedKsDocument = ref(null)
const loadingStore = LoadingStore()
const lstKsDocument = ref([]);
const selectedKsDocument = ref(null);
const loadingStore = LoadingStore();
async function fetchKsDocument() {
loadingStore.scenario_loading = true;
await KsDocumentService.getKsDocuments().then(resp => {
await KsDocumentService.getKsDocuments().then((resp) => {
lstKsDocument.value = resp.data;
loadingStore.scenario_loading = false;
});
}
const ksDocument = computed(() => {
return lstKsDocument.value
})
return lstKsDocument.value;
});
const getSelectedKsDocument = computed(() => {
return selectedKsDocument.value
})
return selectedKsDocument.value;
});
async function setSelectedKsDocument(ksDoc){
selectedKsDocument.value = ksDoc
console.log("selectedExecScenario", selectedKsDocument.value);
async function setSelectedKsDocument(ksDoc) {
selectedKsDocument.value = ksDoc;
console.log('selectedExecScenario', selectedKsDocument.value);
}
return { fetchKsDocument, selectedKsDocument, lstKsDocument, ksDocument, getSelectedKsDocument, setSelectedKsDocument}
})
async function deleteKsDocumentRecord(requestPayload) {
try {
const response = await KsDocumentService.deleteKsDocumentRecord(requestPayload);
return response;
} catch (error) {
throw error;
}
}
async function uploadKsDocument(formData, onUploadProgress) {
try {
const response = await KsDocumentService.uploadKsDocument(formData, onUploadProgress);
return response;
} catch (error) {
throw error;
}
}
return { fetchKsDocument, deleteKsDocumentRecord, uploadKsDocument, selectedKsDocument, lstKsDocument, ksDocument, getSelectedKsDocument, setSelectedKsDocument };
});

View File

@@ -4,11 +4,9 @@ import { KsVideoService } from '../service/KsVideoService';
import { LoadingStore } from './LoadingStore';
export const KsVideoStore = defineStore('ksvideo_store', () => {
const lstKsVideo = ref([])
const selectedKsVideo = ref(null)
const loadingStore = LoadingStore()
const lstKsVideo = ref([]);
const selectedKsVideo = ref(null);
const loadingStore = LoadingStore();
async function fetchKsVideoByGroupId(groupId) {
try {
@@ -38,5 +36,14 @@ export const KsVideoStore = defineStore('ksvideo_store', () => {
console.log('selectedExecScenario', selectedKsVideo.value);
}
return {fetchKsVideoByGroupId, selectedKsVideo, lstKsVideo, ksVideo, getKsVideoByGroupId, getSelectedKsVideo, setSelectedKsVideo };
async function deleteKsVideoRecord(requestPayload) {
try {
const response = await KsVideoService.deleteKsVideoRecord(requestPayload);
return response;
} catch (error) {
throw error;
}
}
return { fetchKsVideoByGroupId, selectedKsVideo, lstKsVideo, ksVideo, getKsVideoByGroupId, getSelectedKsVideo, setSelectedKsVideo, deleteKsVideoRecord };
});

View File

@@ -138,7 +138,9 @@
</div>
<div class="flex justify-center mt-8 w-1/2 mx-auto" v-if="uploadPercentage > 0">
<div class="flex flex-col items-center gap-4 w-full">
<p class="text-center">Wait until the upload is completed. You will be automatically redirected in few minutes.</p>
<p class="text-center">Wait until the upload is completed. You will be automatically redirected in
few
minutes.</p>
<ProgressBar :value="uploadPercentage" class="w-full" />
</div>
</div>
@@ -311,7 +313,7 @@ const onFileRemove = () => {
};
const deleteRecord = (name) => {
const deleteRecord = async (name) => {
const videoToDelete = ksVideos.value.find(video => video.name === name);
if (!videoToDelete) {
console.error('Video not found');
@@ -327,15 +329,12 @@ const deleteRecord = (name) => {
ksApplicationName: videoToDelete.ingestionInfo.metadata.KsApplicationName,
};
axios.post('/fe-api/vector-store/deleteVideoRecords', 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 });
});
try {
await ksVideoStore.deleteKsVideoRecord(requestPayload);
} catch (error) {
console.error('Error overwriting records: ', error)
toast.add({ severity: 'error', summary: 'Error', detail: 'Error in Overwriting', life: 3000 });
}
};
const submitForm = async () => {

View File

@@ -71,7 +71,8 @@
</Column>
<Column field="ingestionInfo.metadata.KsDoctype" header="DocType" sortable style="min-width: 12rem">
<template #body="{ data }">
{{ mapDocType(data.ingestionInfo.metadata.KsDoctype) }}
{{data.ingestionInfo.metadata.KsDoctype.replace(/_/g, ' ').replace(/\b\w/g, char =>
char.toUpperCase())}}
</template>
<template #filter="{ filterModel, filterCallback }">
<InputText v-model="filterModel.value" type="text" @input="filterCallback()"
@@ -96,10 +97,10 @@
: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)"
@click="(slotProps.data.ingestionStatus === 'LOADED' || slotProps.data.ingestionStatus === 'ERROR') ? deleteLoadedRecord(slotProps.data.id) : 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>
:disabled="(slotProps.data.ingestionStatus !== 'INGESTED' && slotProps.data.ingestionStatus !== 'LOADED' && slotProps.data.ingestionStatus !== 'ERROR') || slotProps.data.ingestionStatus == 'IN PROGRESS'"
:class="{ 'mr-2 p-button': slotProps.data.ingestionStatus !== 'INGESTED' && slotProps.data.ingestionStatus !== 'LOADED' }"></Button>
<Button type="button" icon="pi pi-search" rounded @click="openSimilaritySearch(slotProps.data)"
v-tooltip.left="'Similarity Search'"
@@ -107,11 +108,17 @@
: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>
<!-- <Button type="button" icon="pi pi-play" rounded @click="playVideo(slotProps.data)"
v-tooltip.left="'Play Video'" class="mr-2 p-button"></Button> -->
</div>
</template>
</Column>
</DataTable>
<!-- <Dialog v-model:visible="isVideoPlayerVisible" :header="selectedVideo?.fileName || 'Video Player'" :modal="true"
:closable="true" :style="{ width: '80vw' }">
<video v-if="selectedVideo" :src="selectedVideo.filePath" controls autoplay style="width: 100%;"></video>
</Dialog> -->
</div>
</template>
@@ -121,13 +128,14 @@ import axios from 'axios';
import moment from 'moment';
import { useConfirm } from "primevue/useconfirm";
import { useToast } from 'primevue/usetoast';
import { computed, onMounted, onUnmounted, ref } from 'vue';
import { onMounted, onUnmounted, ref } from 'vue';
import { useRoute, 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 Dialog from 'primevue/dialog';
import InputText from 'primevue/inputtext';
import Select from 'primevue/select';
import Tag from 'primevue/tag';
@@ -155,6 +163,35 @@ const loadingStore = LoadingStore();
const fe_status = ref('');
let updateTimer = null; // Variabile per memorizzare l'ID del timer
const isVideoPlayerVisible = ref(false);
const selectedVideoUrl = ref(null);
const playVideo = async (video) => {
try {
// 1) Scarica il video come arraybuffer o blob
const response = await KsVideoService.downloadKsVideo(video)
// 2) Leggi il content-type dinamico
const contentType = response.headers['content-type'] || 'video/mp4'
// 3) Crea il blob
const blob = new Blob([response.data], { type: contentType })
// 4) Crea e registra l'ObjectURL
const url = window.URL.createObjectURL(blob)
blobUrls.add(url)
// 5) Mostra il player
selectedVideoUrl.value = url
isVideoPlayerVisible.value = true
} catch (err) {
console.error('Error while preparing video for playback:', err)
toast.add({
severity: 'error',
summary: 'Playback Error',
detail: 'Impossibile caricare il video.',
life: 3000
})
}
}
const initFilters = () => {
filters.value = {
global: { value: null, matchMode: FilterMatchMode.CONTAINS },
@@ -199,8 +236,6 @@ const onRowCollapse = (event) => {
};
// watch(() => userPrefStore.getSelApp, updateVideos, { immediate: true });
function updateVideos() {
ksVideoStore.fetchKsVideoByGroupId(route.params.groupId).then(() => {
ksVideos.value = getCustomDatewithAllResponse();
@@ -214,9 +249,6 @@ const getCustomDatewithAllResponse = () => {
});
};
const allVideosIngested = computed(() => {
return ksVideos.value && ksVideos.value.every(doc => doc.ingestionStatus == 'INGESTED');
});
const getStatus = (data) => {
if (data.ingestionStatus == 'INGESTED') {
@@ -235,9 +267,6 @@ const updateFilterModel = () => {
console.log("updateFilterModel")
}
// Variabile reattiva per il nome del file
const filename = ref("");
// Funzione per scaricare il file
const downloadFile = async (video) => {
console.log("video", video)
@@ -330,6 +359,32 @@ const confirmDeleteFromVectorStore = (id) => {
})
};
// Funzione per cancellare record in stato LOADED
const deleteLoadedRecord = async (id) => {
toast.add({ severity: 'info', summary: 'Info', detail: 'Deleting record...', life: 3000 });
const videoToDelete = ksVideos.value.find(video => video.id === id);
if (!videoToDelete) {
toast.add({ severity: 'error', summary: 'Error', detail: 'Video not found', life: 3000 });
return;
}
const requestPayload = {
ksDocumentId: videoToDelete.id,
ksIngestionInfoId: videoToDelete.ingestionInfo.id,
ksDocType: videoToDelete.ingestionInfo.metadata.KsDoctype,
ksDocSource: videoToDelete.ingestionInfo.metadata.KsDocSource,
ksFileSource: videoToDelete.ingestionInfo.metadata.KsFileSource,
ksApplicationName: videoToDelete.ingestionInfo.metadata.KsApplicationName,
};
try {
await ksVideoStore.deleteKsVideoRecord(requestPayload);
toast.add({ severity: 'success', summary: 'Success', detail: 'Record deleted', life: 3000 });
updateVideos();
} catch (error) {
toast.add({ severity: 'error', summary: 'Error', detail: 'Error deleting record', life: 3000 });
}
};
//ingestion
const startIndividualngestion = (id) => {
toast.add({ severity: 'info', summary: 'Info', detail: 'Starting indexing...', life: 3000 });
@@ -358,28 +413,6 @@ const startIndividualngestion = (id) => {
});
};
const startlngestion = () => {
axios.get('/test/ingestion_loop')
.then(response => {
ingestionResult.value = response.data;
if (response.data.status == "OK") {
ksVideos.value.forEach(element => {
if (response.data.ingestedVideoId.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 newKsVideo = () => {
@@ -413,13 +446,10 @@ const mapDocType = (type) => {
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>

View File

@@ -94,10 +94,10 @@
: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)"
@click="(slotProps.data.ingestionStatus === 'LOADED' || slotProps.data.ingestionStatus === 'ERROR') ? deleteLoadedRecord(slotProps.data.id) : 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>
:disabled="(slotProps.data.ingestionStatus !== 'INGESTED' && slotProps.data.ingestionStatus !== 'LOADED' && slotProps.data.ingestionStatus !== 'ERROR') || slotProps.data.ingestionStatus == 'IN PROGRESS'"
:class="{ 'mr-2 p-button': slotProps.data.ingestionStatus !== 'INGESTED' && slotProps.data.ingestionStatus !== 'LOADED' && slotProps.data.ingestionStatus !== 'ERROR' }"></Button>
<Button type="button" icon="pi pi-search" rounded @click="openSimilaritySearch(slotProps.data)"
v-tooltip.left="'Similarity Search'"
@@ -119,7 +119,7 @@ import axios from 'axios';
import moment from 'moment';
import { useConfirm } from "primevue/useconfirm";
import { useToast } from 'primevue/usetoast';
import { computed, onMounted, ref, watch, onUnmounted} from 'vue';
import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
import { useRouter } from 'vue-router';
import Button from 'primevue/button';
@@ -324,6 +324,30 @@ const confirmDeleteFromVectorStore = (id) => {
})
};
// Funzione per cancellare record in stato LOADED
const deleteLoadedRecord = async (id) => {
toast.add({ severity: 'info', summary: 'Info', detail: 'Deleting record...', life: 3000 });
const documentToDelete = ksdocuments.value.find(doc => doc.id === id);
if (!documentToDelete) {
toast.add({ severity: 'error', summary: 'Error', detail: 'Document not found', life: 3000 });
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,
};
try {
await ksDocumentStore.deleteKsDocumentRecord(requestPayload);
toast.add({ severity: 'success', summary: 'Success', detail: 'Record deleted', life: 3000 });
} catch (error) {
toast.add({ severity: 'error', summary: 'Error', detail: 'Error deleting record', life: 3000 });
}
};
//ingestion
const startIndividualngestion = (id) => {
toast.add({ severity: 'info', summary: 'Info', detail: 'Starting Ingestion...', life: 3000 });

View File

@@ -19,9 +19,9 @@
<StepPanels>
<StepPanel value="1" v-slot="{ activateCallback }">
<div class="flex flex-col h-48">
<FileUpload ref="fileUpload" :maxFileSize="52428800" chooseLabel="Select File (max 50 MB)" class="p-button"
style="width: 150px;" @select="onFileSelect" @remove="onFileRemove" :showUploadButton="false"
:showCancelButton="false" v-model:files="selectedFile" :fileLimit=1>
<FileUpload ref="fileUpload" :maxFileSize="52428800" chooseLabel="Select File (max 50 MB)"
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" />
@@ -101,8 +101,8 @@
<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" :disabled="userPrefStore.user.role !== 'ADMIN'"/>
<InputNumber id="defaultChunkSize" v-model="formData.defaultChunkSize" required class="w-full"
:disabled="userPrefStore.user.role !== 'ADMIN'" />
</span>
<small v-if="errors.defaultChunkSize" class="text-red-500">{{ errors.defaultChunkSize }}</small>
</div>
@@ -111,8 +111,8 @@
<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"
:disabled="userPrefStore.user.role !== 'ADMIN'"/>
<InputNumber id="minChunkSize" v-model="formData.minChunkSize" required class="w-full"
:disabled="userPrefStore.user.role !== 'ADMIN'" />
</span>
<small v-if="errors.minChunkSize" class="text-red-500">{{ errors.minChunkSize }}</small>
</div>
@@ -122,7 +122,7 @@
<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" :disabled="userPrefStore.user.role !== 'ADMIN'"/>
class="w-full" :disabled="userPrefStore.user.role !== 'ADMIN'" />
</span>
<small v-if="errors.minChunkSizeToEmbed" class="text-red-500">{{ errors.minChunkSizeToEmbed
}}</small>
@@ -133,7 +133,7 @@
<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" :disabled="userPrefStore.user.role !== 'ADMIN'"/>
class="w-full" :disabled="userPrefStore.user.role !== 'ADMIN'" />
</span>
<small v-if="errors.maxNumberOfChunks" class="text-red-500">{{ errors.maxNumberOfChunks
}}</small>
@@ -187,19 +187,17 @@
</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 { computed, onMounted, ref, watch } from 'vue';
import { useRouter } from 'vue-router';
import { KsDocumentStore } from '../../../stores/KsDocumentStore';
import { LoadingStore } from '../../../stores/LoadingStore';
import { UserPrefStore } from '../../../stores/UserPrefStore';
import { onMounted } from 'vue';
const toast = useToast();
const router = useRouter();
@@ -331,7 +329,7 @@ const onFileRemove = () => {
});
};
const deleteRecord = (name) => {
const deleteRecord = async (name) => {
const documentToDelete = ksdocuments.value.find(doc => doc.name === name);
if (!documentToDelete) {
console.error('Document not found');
@@ -347,15 +345,12 @@ const deleteRecord = (name) => {
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 });
});
try {
await ksDocumentStore.deleteKsDocumentRecord(requestPayload);
} catch (error) {
console.error('Error overwriting records: ', error)
toast.add({ severity: 'error', summary: 'Error', detail: 'Error in Overwriting', life: 3000 });
}
};
@@ -399,20 +394,13 @@ const cancelOverwrite = () => {
const uploadFile = async (formDataToSend) => {
try {
const response = await axios.post('/upload', formDataToSend, {
headers: {
'Content-Type': 'multipart/form-data'
},
onUploadProgress: (progressEvent) => {
const percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total);
uploadPercentage.value = percentCompleted;
console.log(`Upload progress: ${percentCompleted}%`);
}
await ksDocumentStore.uploadKsDocument(formDataToSend, (progressEvent) => {
const percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total);
uploadPercentage.value = percentCompleted;
console.log(`Upload progress: ${percentCompleted}%`);
});
toast.add({ severity: 'info', summary: 'Info', detail: 'Uploading done. Ingestion will start in few seconds.', life: 3000 });
router.push({ name: 'ks-document' });
} catch (error) {
console.error('Ingestion failed:', error);
}