websocket & Datatable modified
This commit is contained in:
sumedh
106
src/views/pages/KsGitCloneRepoFormDialog.vue
Normal file
106
src/views/pages/KsGitCloneRepoFormDialog.vue
Normal file
@@ -0,0 +1,106 @@
|
||||
<template>
|
||||
<form @submit.prevent="submitForm" class="p-fluid">
|
||||
<div class="flex flex-col gap-4">
|
||||
<div class="flex flex-col gap-2">
|
||||
<label for="repoName">Repo Name</label>
|
||||
<InputText id="repoName" v-model="formData.repoName" placeholder="Enter Repo Name" required class="w-full" />
|
||||
</div>
|
||||
<div class="flex flex-col gap-2">
|
||||
<label for="group">Group Name</label>
|
||||
<InputText id="group" v-model="formData.group" placeholder="Enter Group Name" required class="w-full" />
|
||||
</div>
|
||||
<div class="flex flex-col gap-2">
|
||||
<label for="source">Source Name</label>
|
||||
<InputText id="source" v-model="formData.source" placeholder="Enter Source base URL" required class="w-full" />
|
||||
</div>
|
||||
<div class="flex flex-col gap-2">
|
||||
<label for="branch">Branch</label>
|
||||
<InputText id="branch" v-model="formData.branch" placeholder="Enter Branch" required class="w-full" />
|
||||
</div>
|
||||
<div class="flex flex-col gap-2">
|
||||
<label for="commitId">CommitID</label>
|
||||
<InputText id="commitId" type="text" v-model="formData.commitId" required class="w-full" />
|
||||
</div>
|
||||
<div class="flex flex-col gap-2">
|
||||
<label for="tokenType">Git Token Type</label>
|
||||
<InputText id="tokenType" type="text" v-model="formData.tokenType" required class="w-full" />
|
||||
</div>
|
||||
<!--div class="col-12 mb-4">
|
||||
<span class="p-float-label">
|
||||
<label for="repoPath">Repo Path</label>
|
||||
<InputText id="repoPath" v-model="formData.repoPath" required class="w-full" />
|
||||
</span>
|
||||
</div-->
|
||||
<div class="flex flex-col gap-2">
|
||||
<label for="defaultChunkSize">Default Chunk Size</label>
|
||||
<InputNumber id="defaultChunkSize" v-model="formData.defaultChunkSize" required class="w-full" />
|
||||
</div>
|
||||
<div class="flex flex-col gap-2">
|
||||
<label for="minChunkSize">Min Chunk Size</label>
|
||||
<InputNumber id="minChunkSize" v-model="formData.minChunkSize" required class="w-full" />
|
||||
</div>
|
||||
<div class="flex flex-col gap-2">
|
||||
<label for="maxNumberOfChunks">Max Number of Chunks</label>
|
||||
<InputNumber id="maxNumberOfChunks" v-model="formData.maxNumberOfChunks" required class="w-full" />
|
||||
</div>
|
||||
<div class="flex flex-col gap-2">
|
||||
<label for="minChunkSizeToEmbed">Min Chunk Size to Embed</label>
|
||||
<InputNumber id="minChunkSizeToEmbed" v-model="formData.minChunkSizeToEmbed" required class="w-full" />
|
||||
</div>
|
||||
</div>
|
||||
<Button type="submit" label="Submit" text rounded raised :disabled="isSubmitting" :fluid="false" class="p-button-rounded p-button-lg mt-4" />
|
||||
</form>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref, defineProps, defineEmits } from 'vue';
|
||||
|
||||
const formData = ref({
|
||||
repoName: 'shellExecutionThroughAPI',
|
||||
group: 'automationtester23',
|
||||
source:'https://github.com',
|
||||
branch: 'master',
|
||||
commitId: 'latest',
|
||||
tokenType:'github',
|
||||
repoPath: 'C:\\repos\\olympus_ai\\gitClone',
|
||||
defaultChunkSize: 1988,
|
||||
minChunkSize: 200,
|
||||
maxNumberOfChunks: 1988,
|
||||
minChunkSizeToEmbed: 20
|
||||
});
|
||||
|
||||
const isSubmitting = ref(false);
|
||||
|
||||
const emit = defineEmits(['submitForm'])
|
||||
|
||||
const submitForm = () => {
|
||||
if (isSubmitting.value) return; // Prevent duplicate submissions
|
||||
|
||||
isSubmitting.value = true;
|
||||
|
||||
const formDataToSend = new FormData();
|
||||
formDataToSend.append('repoName', formData.value.repoName);
|
||||
formDataToSend.append('group', formData.value.group);
|
||||
formDataToSend.append('source', formData.value.source);
|
||||
formDataToSend.append('branch', formData.value.branch);
|
||||
formDataToSend.append('commitId', formData.value.commitId);
|
||||
formDataToSend.append('tokenType', formData.value.tokenType);
|
||||
//formDataToSend.append('repoPath', formData.value.repoPath);
|
||||
formDataToSend.append('defaultChunkSize', formData.value.defaultChunkSize);
|
||||
formDataToSend.append('minChunkSize', formData.value.minChunkSize);
|
||||
formDataToSend.append('maxNumberOfChunks', formData.value.maxNumberOfChunks);
|
||||
formDataToSend.append('minChunkSizeToEmbed', formData.value.minChunkSizeToEmbed);
|
||||
//console.log(formData);
|
||||
|
||||
const json = formDatatoJson(formDataToSend);
|
||||
console.log(json)
|
||||
emit('submitForm',json)
|
||||
};
|
||||
|
||||
function formDatatoJson(formData){
|
||||
const jsonObject ={};
|
||||
formData.forEach((value,key) => {
|
||||
jsonObject[key] = value;
|
||||
})
|
||||
return jsonObject;
|
||||
}
|
||||
</script>
|
||||
@@ -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