websocket & Datatable modified
This commit is contained in:
sumedh
@@ -8,45 +8,80 @@
|
||||
<p class="loading-text">Loading data...</p>
|
||||
</div>
|
||||
</div>
|
||||
<Toolbar class="mb-6">
|
||||
<template #start>
|
||||
<Button label="Refresh" icon="pi pi-refresh" severity="secondary" class="mr-2" rounded @click="fetchCodeRepoInfo" />
|
||||
</template>
|
||||
|
||||
<template #end>
|
||||
<Button label="Expand All" icon="pi pi-plus" severity="secondary" class="mr-3" rounded @click="expandAll" />
|
||||
<Button label="Collapse All" icon="pi pi-minus" severity="secondary" class="mr-3" rounded @click="collapseAll"/>
|
||||
<!--Button label="Add New Git Repo" icon="pi pi-plus" severity="secondary" rounded class="mr-3" @click="newCodeRepoForm()" v-tooltip="'Add New Git Repo'" class="mr-2" /-->
|
||||
<!--Button label="Add Git Repo" icon="pi pi-bolt" severity="secondary" rounded @click="cloneRepoForm()" v-tooltip="'Add New Git Repo'" /-->
|
||||
<Button label="Add Git Repo" icon="pi pi-bolt" severity="secondary" rounded @click="showDialog = true" v-tooltip="'Add New Git Repo using Dialog'"/>
|
||||
|
||||
<Dialog v-model:visible="showDialog" :style="{ width: '600px' }" header="Repository Details" :modal="true">
|
||||
<div>
|
||||
<cloneForm @submitForm="cloneRepo"/>
|
||||
</div>
|
||||
</Dialog>
|
||||
</template>
|
||||
</Toolbar>
|
||||
|
||||
<DataTable
|
||||
v-else
|
||||
v-model:filters="filters"
|
||||
v-model:expandedRows="expandedRows"
|
||||
@rowExpand="onRowExpand"
|
||||
@rowCollapse="onRowCollapse"
|
||||
:value="codeRepoInfo"
|
||||
:paginator="true"
|
||||
:rows="10"
|
||||
dataKey="repoName"
|
||||
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"
|
||||
showGridlines
|
||||
rowGroupMode="subheader"
|
||||
groupRowsBy="repoName"
|
||||
filterDisplay="menu"
|
||||
:loading="loading"
|
||||
:globalFilterFields="['repoName', 'branch', 'ingestionStatus', 'ingestionDateFormat']"
|
||||
tableStyle="min-width: 60rem"
|
||||
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 Git Code Repository</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="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-bolt" rounded raised @click="cloneRepoForm()" v-tooltip="'Clone New Git Repo'" class="mr-2" />
|
||||
<template #header>
|
||||
<div class="flex flex-wrap gap-2 items-center justify-between">
|
||||
<h4 class="m-0">Manage Repositories</h4>
|
||||
<IconField>
|
||||
<InputIcon>
|
||||
<i class="pi pi-search" />
|
||||
</InputIcon>
|
||||
<InputText v-model="filters['global'].value" placeholder="Search..." />
|
||||
</IconField>
|
||||
</div>
|
||||
</template>
|
||||
<template #groupheader="slotProps">
|
||||
<div class="flex items-center gap-2">
|
||||
<img :alt="slotProps.data.repoName" :src="logoSrc" width="32" style="vertical-align: middle" />
|
||||
<span>{{ slotProps.data.repoName }}</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<Column expander style="width: 5rem" />
|
||||
|
||||
<template #empty>No Records found</template>
|
||||
<template #loading>Loading Data... </template>
|
||||
<socketManager @update="handleCloneRepoWebSocketMessage" topic="topic" subtopic="clone-status"></socketManager>
|
||||
<socketManager @update="handleCloneRepoWebSocketMessage" topic="topic" subtopic="deletion-status"></socketManager>
|
||||
|
||||
<!--Column field="id" header="KSGitInfoID" sortable /-->
|
||||
<Column/>
|
||||
<Column/>
|
||||
|
||||
<!--Column field="ksGitIngestionInfo.id" header="ksGitIngestionInfo" sortable> </Column-->
|
||||
|
||||
<Column field="repoName" header="Repo Name" sortable>
|
||||
<Column field="repoName" header="Repo Name">
|
||||
<template #body="{ data }">
|
||||
{{ data.repoName }}
|
||||
</template>
|
||||
@@ -55,7 +90,7 @@
|
||||
</template>
|
||||
</Column>
|
||||
|
||||
<Column field="branch" header="Branch" sortable>
|
||||
<Column field="branch" header="Branch">
|
||||
<template #body="{ data }">
|
||||
{{ data.branch }}
|
||||
</template>
|
||||
@@ -86,53 +121,73 @@
|
||||
</template>
|
||||
</Column>
|
||||
|
||||
<Column header="Actions" headerStyle="width: 5rem; text-align: center" bodyStyle="text-align: center; overflow: visible">
|
||||
<!--Column header="Actions" headerStyle="width: 5rem; text-align: center" bodyStyle="text-align: center; overflow: visible"-->
|
||||
<Column :exportable="false" style="min-width: 12rem">
|
||||
<template #body="slotProps">
|
||||
<div class="flex justify-center items-center space-x-3" >
|
||||
|
||||
<Button
|
||||
type="button"
|
||||
text raised rounded
|
||||
severity="info"
|
||||
type="button"
|
||||
class="mr-2"
|
||||
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'"
|
||||
:disabled="isButtonDisabled(slotProps.data)"
|
||||
/>
|
||||
|
||||
<Button
|
||||
type="button"
|
||||
text raised rounded
|
||||
severity="warn"
|
||||
type="button"
|
||||
class="mr-2"
|
||||
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
|
||||
text raised rounded
|
||||
severity="danger"
|
||||
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>
|
||||
<VueJsonView :src="slotProps.data"
|
||||
:collapsed="collapsed"
|
||||
:theme="theme"
|
||||
:sort-keys="sortKeys"
|
||||
:enable-clipboard="enableClipboard"
|
||||
class="vue-json-view"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #groupfooter="slotProps">
|
||||
<div class="flex justify-end font-bold w-full">Total Count: {{ calculateCustomerTotal(slotProps.data.repoName) }}</div>
|
||||
</template>
|
||||
</DataTable>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { FilterMatchMode, FilterOperator } from '@primevue/core/api';
|
||||
import { computed, onMounted, ref } from 'vue';
|
||||
import { computed, onMounted, onUnmounted, ref } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { useToast } from 'primevue/usetoast';
|
||||
import axios from 'axios';
|
||||
import moment from 'moment';
|
||||
import {setWebSocketMessageHandler} from '/src/service/websocketService.js';
|
||||
import VueJsonView from '@matpool/vue-json-view'
|
||||
import logo from '@/assets/gitlab-logo.svg';
|
||||
|
||||
import Button from 'primevue/button';
|
||||
import Column from 'primevue/column';
|
||||
@@ -146,6 +201,28 @@ import Tooltip from 'primevue/tooltip';
|
||||
import ProgressSpinner from 'primevue/progressspinner';
|
||||
import { useConfirm } from "primevue/useconfirm";
|
||||
|
||||
import socketManager from '/src/components/SocketManager.vue'
|
||||
|
||||
//dialog
|
||||
import cloneForm from './KsGitCloneRepoFormDialog.vue'
|
||||
const showDialog = ref(false);
|
||||
const cloneRepo = (formData) => {
|
||||
try {
|
||||
const response = axios.post('/fe-api/ks_git_repos/clone', formData, {
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
}
|
||||
});
|
||||
|
||||
console.log('Submit successful:', response.data);
|
||||
toast.add({ severity: 'success', summary: 'Success', detail: 'Repository Download is IN-PROGRESS', life: 3000 });
|
||||
} catch (error) {
|
||||
console.error('Submit failed:', error);
|
||||
toast.add({ severity: 'error', summary: 'Error', detail: 'Repository Submission failed', life: 3000 });
|
||||
}
|
||||
showDialog.value = false; // Close the dialog after form submission
|
||||
};
|
||||
|
||||
const router = useRouter();
|
||||
const codeRepoInfo = ref(null);
|
||||
const loading = ref(true);
|
||||
@@ -157,12 +234,34 @@ const ingestionResult = ref('');
|
||||
const popupTitle = ref('');
|
||||
const popupMessage = ref('');
|
||||
const filters = ref();
|
||||
const statuses = ref(['NEW', 'INGESTED', 'FAILED', 'INPROGRESS']);
|
||||
const statuses = ref(['INGESTION-ERROR','INGESTION-IN-PROGRESS', 'INGESTED', 'REPO-NEW', 'REPO-CLONE-IN-PROGRESS','REPO-CLONE-COMPLETED','REPO-CLONE-FAILED']);
|
||||
|
||||
const collapsed = ref(1)
|
||||
const theme = ref('bright:inverted')
|
||||
const sortKeys = ref(true)
|
||||
const enableClipboard = ref(true)
|
||||
|
||||
const logoSrc = ref(logo);
|
||||
|
||||
onMounted(() => {
|
||||
fetchCodeRepoInfo();
|
||||
});
|
||||
|
||||
|
||||
//websocket
|
||||
const handleCloneRepoWebSocketMessage = (data) => {
|
||||
console.log('Update received in parent component:', data);
|
||||
const { success, message } = data;
|
||||
if (success) {
|
||||
toast.add({ severity: 'success', summary: 'Success', detail: message , life: 10000 });
|
||||
fetchCodeRepoInfo();
|
||||
} else {
|
||||
toast.add({ severity: 'error', summary: 'Error', detail: message, life: 10000 });
|
||||
fetchCodeRepoInfo();
|
||||
}
|
||||
};
|
||||
//websocket end
|
||||
|
||||
const initFilters = () => {
|
||||
filters.value = {
|
||||
global: { value: null, matchMode: FilterMatchMode.CONTAINS },
|
||||
@@ -174,6 +273,20 @@ const initFilters = () => {
|
||||
};
|
||||
};
|
||||
|
||||
|
||||
|
||||
function calculateCustomerTotal(name) {
|
||||
let total = 0;
|
||||
if(codeRepoInfo.value){
|
||||
for(let RepoInfo of codeRepoInfo.value){
|
||||
if (RepoInfo.repoName === name) {
|
||||
total++;
|
||||
}
|
||||
}
|
||||
}
|
||||
return total;
|
||||
}
|
||||
|
||||
initFilters();
|
||||
|
||||
const fetchCodeRepoInfo = async () => {
|
||||
@@ -345,11 +458,29 @@ const reIngestWithPullChanges = (data) =>{
|
||||
|
||||
//expand
|
||||
const onRowExpand = (event) => {
|
||||
toast.add({ severity: 'info', summary: 'Product Expanded', detail: event.data, life: 3000 });
|
||||
console.log('Row Expanded:', event.data);
|
||||
toast.add({ severity: 'info', summary: event.data.repoName +' Expanded', life: 3000 });
|
||||
};
|
||||
const onRowCollapse = (event) => {
|
||||
toast.add({ severity: 'success', summary: 'Product Collapsed', detail: event.data, life: 3000 });
|
||||
console.log('Row Expanded:', event.data);
|
||||
toast.add({ severity: 'success', summary: event.data.repoName +' Collapsed', life: 3000 });
|
||||
};
|
||||
|
||||
const expandAll = () => {
|
||||
expandedRows.value = codeRepoInfo.value.reduce((acc, item) => {
|
||||
(acc[item.id] = true);
|
||||
return acc;
|
||||
}, {});
|
||||
};
|
||||
const collapseAll = () => {
|
||||
expandedRows.value = {};
|
||||
};
|
||||
|
||||
//disable button
|
||||
|
||||
function isButtonDisabled(data) {
|
||||
return data.ingestionStatus !== 'REPO-CLONE-COMPLETED';
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@@ -434,4 +565,8 @@ const onRowCollapse = (event) => {
|
||||
.card {
|
||||
margin: 2rem;
|
||||
}
|
||||
.vue-json-view {
|
||||
font-size: 15px; /* Change this value to your desired font size */
|
||||
}
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user