Adding code repository full implementation
This commit is contained in:
Mishra
@@ -7,7 +7,7 @@ const model = ref([
|
||||
{
|
||||
label: 'Knowledge Source',
|
||||
items: [{ label: 'Documents', icon: 'pi pi-fw pi-id-card', to: '/ksdocuments' },
|
||||
{ label: 'Code Repository', icon: 'pi pi-fw pi-id-card', to: '/ks_code_repo' }
|
||||
{ label: 'Code Repository', icon: 'pi pi-fw pi-id-card', to: '/ks_git_repos' }
|
||||
]
|
||||
},
|
||||
{
|
||||
|
||||
@@ -18,11 +18,19 @@ const router = createRouter({
|
||||
children: [
|
||||
{path: '', name: 'ks-document', component: () => import('@/views/pages/KsDocuments.vue')},
|
||||
{path: 'new', name: 'ks-document-new', component: () => import('@/views/pages/KsNewDocumentForm.vue')},
|
||||
{path: ':id', name: 'ks-document-edit', component: () => import('@/views/pages/KsEditDocumentForm.vue')},
|
||||
// {path: ':id', name: 'ks-document-edit', component: () => import('@/views/pages/KsEditDocumentForm.vue')},
|
||||
{path: '/ks_similarity_search', name: 'ks_similarity_search', component: () => import('@/views/pages/KsSimilaritySearch.vue')}
|
||||
|
||||
]
|
||||
|
||||
},
|
||||
{
|
||||
path: '/ks_git_repos',
|
||||
children: [
|
||||
{path: '', name: 'ks-git-repos', component: () => import('@/views/pages/KsGitRepos.vue')},
|
||||
{path: 'new', name: 'ks-git-repo-new', component: () => import('@/views/pages/KsNewGitRepoForm.vue')},
|
||||
]
|
||||
|
||||
},
|
||||
]
|
||||
}
|
||||
|
||||
336
src/views/pages/KsGitRepos.vue
Normal file
336
src/views/pages/KsGitRepos.vue
Normal file
@@ -0,0 +1,336 @@
|
||||
<template>
|
||||
<div class="card">
|
||||
<div v-if="loading" class="loading-container">
|
||||
<div class="spinner-container">
|
||||
<ProgressSpinner class="spinner" />
|
||||
<p class="loading-text">Loading data...</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<DataTable
|
||||
v-else
|
||||
v-model:filters="filters"
|
||||
:value="codeRepoInfo"
|
||||
:paginator="true"
|
||||
:rows="10"
|
||||
dataKey="repoName"
|
||||
:rowHover="true"
|
||||
showGridlines
|
||||
filterDisplay="menu"
|
||||
:loading="loading"
|
||||
:globalFilterFields="['repoName', 'branch', 'ingestionStatus', 'ingestionDateFormat']"
|
||||
>
|
||||
<template #header>
|
||||
<div class="flex items-center justify-between gap-4 p-4">
|
||||
<span class="text-xl font-bold">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" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #empty>No Records found</template>
|
||||
<template #loading>Loading Data... </template>
|
||||
|
||||
<Column field="id" header="KSGitInfoID" sortable />
|
||||
|
||||
<Column field="ksGitIngestionInfo.id" header="ksGitIngestionInfo" sortable> </Column>
|
||||
|
||||
<Column field="repoName" header="Repo Name" sortable>
|
||||
<template #body="{ data }">
|
||||
{{ data.repoName }}
|
||||
</template>
|
||||
<template #filter="{ filterModel, filterCallback }">
|
||||
<InputText v-model="filterModel.value" type="text" @input="filterCallback()" placeholder="Search by Git Repo Name" />
|
||||
</template>
|
||||
</Column>
|
||||
|
||||
<Column field="branch" header="Branch" sortable>
|
||||
<template #body="{ data }">
|
||||
{{ data.branch }}
|
||||
</template>
|
||||
<template #filter="{ filterModel, filterCallback }">
|
||||
<InputText v-model="filterModel.value" type="text" @input="filterCallback()" placeholder="Search by Git Repo Branch" />
|
||||
</template>
|
||||
</Column>
|
||||
|
||||
<Column field="ingestionStatus" header="Status" sortable>
|
||||
<template #body="slotProps">
|
||||
<Tag :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="ingestionDate" header="Ingestion Date" sortable 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 header="Actions" headerStyle="width: 5rem; text-align: center" bodyStyle="text-align: center; overflow: visible">
|
||||
<template #body="slotProps">
|
||||
<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' }"
|
||||
/>
|
||||
</template>
|
||||
</Column>
|
||||
</DataTable>
|
||||
<!-- <Dialog header="Ingestion Result" v-model:visible="ingestionDialogVisible" :modal="true" :closable="false">
|
||||
<p>{{ ingestionResult }}</p>
|
||||
<Button label="OK" icon="pi pi-check" @click="ingestionDialogVisible = false" />
|
||||
</Dialog> -->
|
||||
<Dialog v-model:visible="ingestionDialogVisible" :header="popupTitle">
|
||||
<p>{{ popupMessage }}</p>
|
||||
<Button label="OK" icon="pi pi-check" @click="ingestionDialogVisible = false" />
|
||||
</Dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { FilterMatchMode, FilterOperator } from '@primevue/core/api';
|
||||
import { computed, onMounted, ref } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { useToast } from 'primevue/usetoast';
|
||||
import axios from 'axios';
|
||||
import moment from 'moment';
|
||||
|
||||
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';
|
||||
import Tooltip from 'primevue/tooltip';
|
||||
import ProgressSpinner from 'primevue/progressspinner';
|
||||
|
||||
const router = useRouter();
|
||||
const codeRepoInfo = ref(null);
|
||||
const loading = ref(true);
|
||||
const toast = useToast();
|
||||
|
||||
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']);
|
||||
|
||||
onMounted(() => {
|
||||
fetchCodeRepoInfo();
|
||||
});
|
||||
|
||||
const initFilters = () => {
|
||||
filters.value = {
|
||||
global: { value: null, matchMode: FilterMatchMode.CONTAINS },
|
||||
id: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }] },
|
||||
repoName: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }] },
|
||||
branch: { 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 fetchCodeRepoInfo = async () => {
|
||||
try {
|
||||
const response = await axios.get('http://localhost:8082/fe-api/ks_git_repos');
|
||||
//codeRepoInfo.value = response.data;
|
||||
codeRepoInfo.value = getCustomDatewithAllResponse(response.data);
|
||||
console.log(codeRepoInfo.value);
|
||||
loading.value = false;
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch code repo info:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const getCustomDatewithAllResponse = (data) => {
|
||||
return [...(data || [])].map((d) => {
|
||||
d.ingestionDateFormat = new Date(d.ingestionDateFormat);
|
||||
return d;
|
||||
});
|
||||
};
|
||||
|
||||
//-------------------------------------------------------------------------------------------------------
|
||||
|
||||
const ingestGitRepo = (repo) => {
|
||||
axios
|
||||
.get(`http://localhost:8082/test/ingest_repo/${repo.repoName}`)
|
||||
.then((response) => {
|
||||
showPopup('Ingestion started', 'info');
|
||||
toast.add({ severity: 'success', summary: 'Ingestion Summary', detail: 'Repository Ingestion Started', life: 3000 });
|
||||
startPollingStatus(repo.repoName);
|
||||
})
|
||||
.catch((error) => {
|
||||
showPopup('Error starting ingestion', 'error');
|
||||
});
|
||||
};
|
||||
|
||||
const startPollingStatus = (repoName) => {
|
||||
if (checkStatusInterval) {
|
||||
// Prevent starting multiple intervals if there's already one running
|
||||
clearInterval(checkStatusInterval);
|
||||
}
|
||||
|
||||
checkStatusInterval = setInterval(() => {
|
||||
checkIngestionStatus(repoName);
|
||||
}, 100000); // Poll every 1 minute
|
||||
};
|
||||
|
||||
const checkIngestionStatus = (repoName) => {
|
||||
axios
|
||||
.get(`http://localhost:8082/test/check_ingestion_status/${repoName}`)
|
||||
.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';
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const showPopup = (message, severity) => {
|
||||
popupMessage.value = message;
|
||||
popupTitle.value = severity === 'success' ? 'Success' : severity === 'error' ? 'Error' : severity === 'info' ? 'Ingestion Status' : 'Notification';
|
||||
ingestionDialogVisible.value = true;
|
||||
};
|
||||
|
||||
// ---------------------------------------------------------------------------------------------------------
|
||||
|
||||
const allDocumentsIngested = computed(() => {
|
||||
return codeRepoInfo.value && codeRepoInfo.value.every((doc) => doc.ingestionStatus === 'INGESTED');
|
||||
});
|
||||
|
||||
const updateFilterModel = () => {
|
||||
console.log('updateFilterModel');
|
||||
};
|
||||
|
||||
const newCodeRepoForm = () => {
|
||||
console.log('new');
|
||||
router.push({ name: 'ks-git-repo-new' });
|
||||
};
|
||||
|
||||
function formatDate(dateString) {
|
||||
// Parse the date string using moment
|
||||
return moment(dateString).format('MM/DD/YYYY');
|
||||
}
|
||||
|
||||
const getStatus = (data) => {
|
||||
if (data.ingestionStatus === 'INGESTED') {
|
||||
return 'success';
|
||||
} else if (data.ingestionStatus === 'NEW') {
|
||||
return 'danger';
|
||||
} else {
|
||||
return 'warn';
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.loading-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%; /* Ensure the container takes full height of the parent */
|
||||
min-height: 400px; /* Adjust this height to your DataTable height */
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
|
||||
.loading-text {
|
||||
font-size: 1.2rem;
|
||||
animation: pulse 1.5s infinite;
|
||||
margin-top: 10px;
|
||||
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>
|
||||
140
src/views/pages/KsNewGitRepoForm.vue
Normal file
140
src/views/pages/KsNewGitRepoForm.vue
Normal file
@@ -0,0 +1,140 @@
|
||||
<template>
|
||||
<Fluid>
|
||||
<div class="flex mt-6">
|
||||
<div class="card flex flex-col gap-4 w-full">
|
||||
<div>
|
||||
<h2 class="text-3xl font-bold mb-4">Upload New Code Repository</h2>
|
||||
</div>
|
||||
<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="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="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" :disabled="isSubmitting" :fluid="false" class="p-button-rounded p-button-lg mt-4" />
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</Fluid>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import axios from 'axios';
|
||||
import { ref } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { useToast } from 'primevue/usetoast';
|
||||
import InputText from 'primevue/inputtext';
|
||||
import InputNumber from 'primevue/inputnumber';
|
||||
import Button from 'primevue/button';
|
||||
|
||||
const toast = useToast();
|
||||
const router = useRouter();
|
||||
const isSubmitting = ref(false);
|
||||
|
||||
const formData = ref({
|
||||
repoName: '',
|
||||
branch: '',
|
||||
commitId: '',
|
||||
repoPath: '',
|
||||
defaultChunkSize: 6000,
|
||||
minChunkSize: 200,
|
||||
maxNumberOfChunks: 1000,
|
||||
minChunkSizeToEmbed: 100
|
||||
});
|
||||
|
||||
const submitForm = async () => {
|
||||
if (isSubmitting.value) return; // Prevent duplicate submissions
|
||||
|
||||
isSubmitting.value = true;
|
||||
|
||||
const formDataToSend = new FormData();
|
||||
|
||||
formDataToSend.append('repoName', formData.value.repoName);
|
||||
formDataToSend.append('branch', formData.value.branch);
|
||||
formDataToSend.append('commitId', formData.value.commitId);
|
||||
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);
|
||||
|
||||
try {
|
||||
const response = await axios.post('http://localhost:8082/fe-api/ks_git_repos/uploadRepo', formDataToSend);
|
||||
console.log('Submit successful:', response.data);
|
||||
toast.add({ severity: 'success', summary: 'Success', detail: 'Repository submitted successfully', life: 3000 });
|
||||
|
||||
// Redirect to desktop.vue
|
||||
router.push({ name: 'ks-git-repos' });
|
||||
} catch (error) {
|
||||
console.error('Submit failed:', error);
|
||||
toast.add({ severity: 'error', summary: 'Error', detail: 'Submission failed', life: 3000 });
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.card-container {
|
||||
max-width: 800px;
|
||||
margin: 2rem auto;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
:deep(.p-card) {
|
||||
background: linear-gradient(45deg, #45a049, #4caf50);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
:deep(.p-button:hover) {
|
||||
background: linear-gradient(45deg, #45a049, #4caf50);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
:deep(.p-inputtext:focus) {
|
||||
box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.2);
|
||||
}
|
||||
|
||||
:deep(.p-dropdown:focus) {
|
||||
box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.2);
|
||||
}
|
||||
|
||||
:deep(.p-inputnumber-input:focus) {
|
||||
box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.2);
|
||||
}
|
||||
|
||||
.mt-4 {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
</style>
|
||||
@@ -51,7 +51,8 @@ const toast = useToast();
|
||||
|
||||
const dropdownItems = [
|
||||
{ name: 'Documentation', code: 'setup-documentation' },
|
||||
{ name: 'Deploy Documentation', code: 'deploy-documentation' }
|
||||
{ name: 'Deploy Documentation', code: 'deploy-documentation' },
|
||||
{ name: 'Source code', code: 'sourcecode' }
|
||||
];
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user