dialog modifications

This commit is contained in:
sumedh
2024-09-03 17:12:14 +05:30
parent b3977d012d
commit f7940c244c

View File

@@ -1,6 +1,6 @@
<template>
<div class="card">
<Toast/>
<Toast/>
<ConfirmPopup></ConfirmPopup>
<div v-if="loading" class="loading-container">
<div class="spinner-container">
@@ -21,6 +21,7 @@
filterDisplay="menu"
:loading="loading"
:globalFilterFields="['repoName', 'branch', 'ingestionStatus', 'ingestionDateFormat']"
tableStyle="min-width: 60rem"
>
<template #header>
<div class="flex items-center justify-between gap-4 p-4">
@@ -33,7 +34,7 @@
<InputText v-model="filters['global'].value" placeholder="Keyword Search" />
</IconField>
</div>
<Button icon="pi pi-plus" rounded raised @click="newCodeRepoForm()" v-tooltip="'Add New Git Repo'" class="mr-2" />
<!--Button icon="pi pi-plus" rounded raised @click="newCodeRepoForm()" v-tooltip="'Add New Git Repo'" class="mr-2" /-->
<Button icon="pi pi-bolt" rounded raised @click="cloneRepoForm()" v-tooltip="'Clone New Git Repo'" class="mr-2" />
</div>
</template>
@@ -87,40 +88,41 @@
<Column header="Actions" 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-play"
class="p-button-rounded p-button-success p-mr-2"
@click="ingestGitRepo(slotProps.data)"
v-tooltip="'Start Ingestion of Repo'"
:disabled="slotProps.data.ingestionStatus === 'INGESTED'"
:class="{ 'p-button-danger': slotProps.data.ingestionStatus === 'INGESTED' }"
/>
<Button type="button" icon="pi pi-forward" severity="danger" rounded @click="reIngestWithPullChanges(slotProps.data)" v-tooltip="'Ingest Repo with latest changes from master branch'"/>
<Button type="button" icon="pi pi-trash" rounded @click="showConfirmDialog(slotProps.data.id)"
v-tooltip="'Delete the Records'" />
</div>
<div class="flex justify-center items-center space-x-3" >
<Button
type="button"
icon="pi pi-play"
class="p-button-rounded p-button-success p-mr-2"
@click="ingestGitRepo(slotProps.data)"
v-tooltip="'Start Ingestion of Repo'"
:disabled="slotProps.data.ingestionStatus === 'INGESTED'"
/>
<Dialog header="Confirm Deletion" :visible="confirmDialogVisible" modal @hide="resetConfirmDialog"
:style="{ width: '300px' }">
<p>Are you sure you want to delete this record?</p>
<template #footer>
<Button label="No" icon="pi pi-times" @click="confirmDialogVisible = false"/>
<Button label="Yes" icon="pi pi-check" @click="confirmDelete" class="p-button-danger" />
</template>
</Dialog>
<Button
type="button"
icon="pi pi-forward"
class="p-button-rounded p-button-success p-mr-2"
@click="reIngestWithPullChanges(slotProps.data)"
v-tooltip="'Ingest Repo with latest changes from master branch'"
/>
<Button
type="button"
icon="pi pi-trash"
class="p-button-rounded p-button-success p-mr-2"
@click="deleteRecordsFromVectorStore(slotProps.data)"
v-tooltip="'Delete the Records'"
/>
</div>
</template>
</Column>
<template #expansion="slotProps">
<div class="p-4">
<h5>Records of {{ slotProps.data }}</h5>
</div>
</template>
</DataTable>
<Dialog v-model:visible="ingestionDialogVisible" :header="popupTitle">
<p>{{ popupMessage }}</p>
<Button label="OK" icon="pi pi-check" @click="ingestionDialogVisible = false" />
</Dialog>
</div>
</template>
@@ -149,15 +151,11 @@ const codeRepoInfo = ref(null);
const loading = ref(true);
const toast = useToast();
const confirm = useConfirm();
const expandedRows = ref({});
const confirmDialogVisible = ref(false);
const recordToDelete = ref(null);
const ingestionDialogVisible = ref(false);
const ingestionResult = ref('');
const popupTitle = ref('');
const popupMessage = ref('');
let checkStatusInterval = null;
const filters = ref();
const statuses = ref(['NEW', 'INGESTED', 'FAILED', 'INPROGRESS']);
@@ -197,68 +195,37 @@ const getCustomDatewithAllResponse = (data) => {
});
};
//-------------------------------------------------------------------------------------------------------
const ingestGitRepo = (repo) => {
axios
.get(`/test/ingest_repo?repoName=${repo.repoName}&branchName=${repo.branch}`)
.then((response) => {
showPopup('Ingestion started', 'info');
toast.add({ severity: 'success', summary: 'Ingestion Summary', detail: 'Repository Ingestion Started', life: 3000 });
startPollingStatus(repo);
})
.catch((error) => {
showPopup('Error starting ingestion', 'error');
});
};
const startPollingStatus = (repo) => {
if (checkStatusInterval) {
// Prevent starting multiple intervals if there's already one running
clearInterval(checkStatusInterval);
}
checkStatusInterval = setInterval(() => {
checkIngestionStatus(repo);
}, 100000); // Poll every 1 minute
};
const checkIngestionStatus = (repo) => {
axios
.get(`/test/check_ingestion_status?repoName=${repo.repoName}&branchName=${repo.branch}`)
.then((response) => {
const data = response.data;
if (data.status === 'INGESTED') {
clearInterval(checkStatusInterval);
checkStatusInterval = null; // Reset interval reference
showPopup('Ingestion completed successfully', 'success');
updateRepositoryStatus(data.ingestedDocumentId);
} else if (data.status === 'ERROR') {
clearInterval(checkStatusInterval);
checkStatusInterval = null; // Reset interval reference
showPopup(`Error: ${data.message}`, 'error');
}
})
.catch((error) => {
clearInterval(checkStatusInterval);
checkStatusInterval = null; // Reset interval reference
showPopup('Error checking ingestion status', 'error');
});
};
const updateRepositoryStatus = (ingestedDocumentId) => {
// Update status of the repository in your local state or data
codeRepoInfo.value.forEach((element) => {
if (ingestedDocumentId.includes(element.id)) {
element.status = 'INGESTED';
//ingest git repo functions
const ingestGitRepo = (repo) => {
confirm.require({
target: event.currentTarget,
message: 'Are you sure you want to proceed?',
icon: 'pi pi-exclamation-circle',
rejectProps: {
label: 'Cancel',
severity: 'secondary',
outlined: true
},
acceptProps: {
label: 'Ingest Record',
severity: 'danger',
},
accept: () => {
axios.get(`/test/ingest_repo?repoName=${repo.repoName}&branchName=${repo.branch}`)
.then((response) => {
toast.add({ severity: 'success', summary: 'Ingestion Summary', detail: 'Repository Ingestion Started', life: 6000 });
console.log('Delete resource:', response.data)
})
.catch((error) => {
console.error('Error deleting records: ', error)
toast.add({ severity: 'error', summary: 'Error', detail: 'Error Ingesting records:', life: 6000 });
});
},
reject: () => {
toast.add({severity: 'error', summary: 'Rejected', detail: 'You have rejected', life: 3000})
}
});
};
const showPopup = (message, severity) => {
popupMessage.value = message;
popupTitle.value = severity === 'success' ? 'Success' : severity === 'error' ? 'Error' : severity === 'info' ? 'Ingestion Status' : 'Notification';
ingestionDialogVisible.value = true;
})
};
// ---------------------------------------------------------------------------------------------------------
@@ -297,52 +264,52 @@ const getStatus = (data) => {
};
//delete functionality
function showConfirmDialog(id) {
recordToDelete.value = id;
confirmDialogVisible.value = true;
}
const deleteRecordsFromVectorStore = (data) =>{
console.log("data",data);
console.log("reponame",data.repoName);
function confirmDelete() {
if (recordToDelete.value !== null) {
deleteRecordsFromVectorStore(recordToDelete.value);
recordToDelete.value = null;
}
confirmDialogVisible.value = false;
}
function resetConfirmDialog() {
recordToDelete.value = null;
}
const deleteRecordsFromVectorStore = (id) => {
const ksGitInfoToDelete = codeRepoInfo.value.find(ksGitInfo => ksGitInfo.id === id);
if (!ksGitInfoToDelete) {
console.error('Repository not found');
return;
}
const requestPayload = {
ksGitInfoId: id,
ksGitIngestionInfoId: ksGitInfoToDelete.ksGitIngestionInfo.id,
ksDoctype: ksGitInfoToDelete.ksGitIngestionInfo.metadata.KsDoctype,
ksDocSource: ksGitInfoToDelete.ksGitIngestionInfo.metadata.KsDocSource,
ksFileSource: ksGitInfoToDelete.ksGitIngestionInfo.metadata.KsFileSource,
ksApplicationName: ksGitInfoToDelete.ksGitIngestionInfo.metadata.KsApplicationName,
ksBranch: ksGitInfoToDelete.ksGitIngestionInfo.metadata.KsBranch
const requestPayload = {
ksGitInfoId: data.id,
ksGitIngestionInfoId: data.ksGitIngestionInfo.id,
ksDoctype: data.ksGitIngestionInfo.metadata.KsDoctype,
ksDocSource: data.ksGitIngestionInfo.metadata.KsDocSource,
ksFileSource: data.ksGitIngestionInfo.metadata.KsFileSource,
ksApplicationName: data.ksGitIngestionInfo.metadata.KsApplicationName,
ksBranch: data.ksGitIngestionInfo.metadata.KsBranch
};
console.log("requestPayload",requestPayload)
axios.post('/fe-api/vector-store/deleteGitRecords', requestPayload)
.then(response => {
console.log('Delete resource:', response.data)
codeRepoInfo.value = codeRepoInfo.value.filter(ksGitInfo => ksGitInfo.id !== id);
})
.catch(error => {
console.error('Error deleting records: ', error)
});
}
confirm.require({
target: event.currentTarget,
message: 'Are you sure you want to proceed?',
icon: 'pi pi-exclamation-circle',
rejectProps: {
label: 'Cancel',
severity: 'secondary',
outlined: true
},
acceptProps: {
label: 'Delete Records',
severity: 'danger',
},
accept: () => {
axios.post('/fe-api/vector-store/deleteGitRecords', requestPayload)
.then(response => {
toast.add({ severity: 'info', summary: 'Deletion', detail: 'Records Deletion INPROGRESS', life: 6000 });
console.log('Delete resource:', response.data)
})
.catch(error => {
console.error('Error deleting records: ', error)
toast.add({ severity: 'error', summary: 'Error', detail: 'Error deleting records:', life: 6000 });
});
},
reject: () => {
toast.add({severity: 'error', summary: 'Rejected', detail: 'You have rejected', life: 3000})
}
})
};
//reingest latest changes
const reIngestWithPullChanges = (data) =>{
console.log("data",data);
console.log("reponame",data.repoName);
@@ -350,14 +317,14 @@ const reIngestWithPullChanges = (data) =>{
confirm.require({
target: event.currentTarget,
message: 'Are you sure you want to proceed?',
icon: 'pi pi-exclamation-triangle',
icon: 'pi pi-exclamation-circle',
rejectProps: {
label: 'Cancel',
severity: 'secondary',
outlined: true
},
acceptProps: {
label: 'Ingest Changes',
label: 'Reingest Latest Changes',
severity: 'danger',
},
accept: () => {
@@ -375,6 +342,14 @@ const reIngestWithPullChanges = (data) =>{
}
})
};
//expand
const onRowExpand = (event) => {
toast.add({ severity: 'info', summary: 'Product Expanded', detail: event.data, life: 3000 });
};
const onRowCollapse = (event) => {
toast.add({ severity: 'success', summary: 'Product Collapsed', detail: event.data, life: 3000 });
};
</script>
<style scoped>
@@ -459,4 +434,4 @@ const reIngestWithPullChanges = (data) =>{
.card {
margin: 2rem;
}
</style>
</style>