admin/apollo-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

code alignment

Browse Source
This commit is contained in:
sumedh
2024-09-13 15:08:57 +05:30
parent 93dfb81ef6
commit 9c047d6e2e
16 changed files with 447 additions and 439 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/BlockViewer.vue
View File

@@ -1,5 +1,5 @@
<script setup>
import { ref, reactive } from 'vue';
import { reactive, ref } from 'vue';
const props = defineProps({
header: {
@@ -45,11 +45,14 @@ async function copyCode(event) {
<span class="badge-free" v-if="free">Free</span>
</span>
<div class="block-actions">
<a tabindex="0" :class="{ 'block-action-active': blockView === BlockView.PREVIEW }" @click="activateView($event, BlockView.PREVIEW)"><span>Preview</span></a>
<a :tabindex="'0'" :class="{ 'block-action-active': blockView === BlockView.CODE }" @click="activateView($event, BlockView.CODE)">
<a tabindex="0" :class="{ 'block-action-active': blockView === BlockView.PREVIEW }"
@click="activateView($event, BlockView.PREVIEW)"><span>Preview</span></a>
<a :tabindex="'0'" :class="{ 'block-action-active': blockView === BlockView.CODE }"
@click="activateView($event, BlockView.CODE)">
<span>Code</span>
</a>
<a :tabindex="0" class="block-action-copy" @click="copyCode($event)" v-tooltip.focus.bottom="{ value: 'Copied to clipboard' }"><i class="pi pi-copy"></i></a>
<a :tabindex="0" class="block-action-copy" @click="copyCode($event)"
v-tooltip.focus.bottom="{ value: 'Copied to clipboard' }"><i class="pi pi-copy"></i></a>
</div>
</div>
<div class="block-content">
@@ -57,7 +60,7 @@ async function copyCode(event) {
<slot></slot>
</div>
<div v-if="blockView === BlockView.CODE">
<pre class="app-code"><code>{{code}}</code></pre>
<pre class="app-code"><code>{{ code }}</code></pre>
</div>
</div>
</div>
@@ -172,6 +175,7 @@ pre[class*='language-'] {
padding: 0 2rem !important;
.token {
&.tag,
&.keyword {
color: #2196f3 !important;

3
src/components/CodeSnippet.vue
View File

@@ -10,10 +10,9 @@
</template>
<script setup>
import { computed } from 'vue';
import Button from 'primevue/button';
import Toast from 'primevue/toast';
import { useToast } from 'primevue/usetoast';
import { computed } from 'vue';
import Prism from 'prismjs';
import 'prismjs/components/prism-javascript'; // Import necessary languages

22
src/components/SocketManager.vue
View File

@@ -1,12 +1,12 @@
<template>
<div>
<div>
</div>
</template>
<script setup>
import { ref, onMounted, onBeforeUnmount, defineProps, defineEmits } from 'vue';
import { Stomp } from "@stomp/stompjs";
import SockJS from 'sockjs-client/dist/sockjs';
import { defineEmits, defineProps, onBeforeUnmount, onMounted, ref } from 'vue';
// Define props
const props = defineProps(['topic', 'subtopic']);
@@ -23,7 +23,7 @@ let messageHandler = null;
const connectWebSocket = (onMessageReceived) => {
messageHandler = onMessageReceived; // Store the message handler
if (stompClient !== null){
if (stompClient !== null) {
console.warn('Websocket is already Connected.');
return;
}
@@ -31,7 +31,7 @@ const connectWebSocket = (onMessageReceived) => {
const socket = new SockJS(`http://localhost:8082/ws/endpoint`);
stompClient = Stomp.over(socket);
stompClient.reconnect_delay = 5000;
stompClient.connect({},(frame) => {
stompClient.connect({}, (frame) => {
//console.log('Connected: '+frame);
// Correctly use props.topic and props.subtopic
@@ -39,15 +39,15 @@ const connectWebSocket = (onMessageReceived) => {
console.log('Subscribing to: ' + subscriptionTopic);
stompClient.subscribe(subscriptionTopic, (message) => {
if(messageHandler){
if (messageHandler) {
messageHandler(JSON.parse(message.body));
}
});
}, (error) => {
console.warn('WebSocket Error: '+error);
console.warn('WebSocket Error: ' + error);
});
};
onMounted(() => {
@@ -56,7 +56,7 @@ onMounted(() => {
});
onBeforeUnmount(() => {
if(stompClient !== null){
if (stompClient !== null) {
stompClient.disconnect(() => {
console.log('Disconnected');
})
@@ -64,8 +64,8 @@ onBeforeUnmount(() => {
}
});
const handleWebSocketMessage = (data) =>{
console.log('Received WebSocket message: ',data)
const handleWebSocketMessage = (data) => {
console.log('Received WebSocket message: ', data)
lastMessage.value = data;
emit('update', data);
}

2
src/layout/AppFooter.vue
View File

@@ -11,7 +11,7 @@ const logoUrl = computed(() => {
<template>
<div class="layout-footer">
APOLLO
APOLLO
by
<span class="font-medium ml-2">OlympusAI</span>
</div>

4
src/layout/AppMenu.vue
View File

@@ -13,8 +13,8 @@ const model = ref([
{
label: 'Vector Database',
items: [//{ label: 'Dashboard', icon: 'pi pi-fw pi-home', to: '/' },
{ label: 'Similarity Search', icon: 'pi pi-fw pi-search', to: '/ks_similarity_search' },
{ label: 'Vector Database Search', icon: 'pi pi-fw pi-search', to: '/ks_vector_data' }
{ label: 'Similarity Search', icon: 'pi pi-fw pi-search', to: '/ks_similarity_search' },
{ label: 'Vector Database Search', icon: 'pi pi-fw pi-search', to: '/ks_vector_data' }
]
},
]);

1
src/layout/AppProfileMenu.vue
View File

@@ -1,6 +1,5 @@
<script setup>
import { ref } from 'vue';
import { useAuth } from '@websanova/vue-auth/src/v3.js';
const auth = useAuth();

42
src/layout/AppTopbar.vue
View File

@@ -1,12 +1,11 @@
<script setup>
import { ref } from 'vue';
import { useLayout } from '@/layout/composables/layout';
import AppConfigurator from './AppConfigurator.vue';
import logo from '@/assets/Apollo_simple_logo.webp';
import { useLayout } from '@/layout/composables/layout';
import { useAuth } from '@websanova/vue-auth/src/v3.js';
import { ref } from 'vue';
import AppProfileMenu from './AppProfileMenu.vue';
const { onMenuToggle, toggleDarkMode, isDarkTheme } = useLayout();
import { useAuth } from '@websanova/vue-auth/src/v3.js';
import AppProfileMenu from './AppProfileMenu.vue';
const auth = useAuth();
const logoSrc = ref(logo);
@@ -16,30 +15,18 @@ const logoSrc = ref(logo);
<div class="layout-topbar">
<div class="layout-topbar-logo-container">
<button class="layout-topbar-action" @click="onMenuToggle"> <!--class layout-menu-button -->
<i class="pi pi-bars"></i>
<i class="pi pi-bars"></i>
</button>
<router-link to="/" class="layout-topbar-logo">
<!--svg width="85" height="63" viewBox="0 0 85 63" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M27.017 30.3135C27.0057 30.5602 27 30.8085 27 31.0581C27 39.9267 34.1894 47.1161 43.0581 47.1161C51.9267 47.1161 59.1161 39.9267 59.1161 31.0581C59.1161 30.8026 59.1102 30.5485 59.0984 30.2959C60.699 30.0511 62.2954 29.7696 63.8864 29.4515L64.0532 29.4181C64.0949 29.9593 64.1161 30.5062 64.1161 31.0581C64.1161 42.6881 54.6881 52.1161 43.0581 52.1161C31.428 52.1161 22 42.6881 22 31.0581C22 30.514 22.0206 29.9747 22.0612 29.441L22.1136 29.4515C23.7428 29.7773 25.3777 30.0646 27.017 30.3135ZM52.4613 18.0397C49.8183 16.1273 46.5698 15 43.0581 15C39.54 15 36.2862 16.1313 33.6406 18.05C31.4938 17.834 29.3526 17.5435 27.221 17.1786C31.0806 12.7781 36.7449 10 43.0581 10C49.3629 10 55.0207 12.7708 58.8799 17.1612C56.7487 17.5285 54.6078 17.8214 52.4613 18.0397ZM68.9854 28.4316C69.0719 29.2954 69.1161 30.1716 69.1161 31.0581C69.1161 45.4495 57.4495 57.1161 43.0581 57.1161C28.6666 57.1161 17 45.4495 17 31.0581C17 30.1793 17.0435 29.3108 17.1284 28.4544L12.2051 27.4697C12.0696 28.6471 12 29.8444 12 31.0581C12 48.211 25.9052 62.1161 43.0581 62.1161C60.211 62.1161 74.1161 48.211 74.1161 31.0581C74.1161 29.8366 74.0456 28.6317 73.9085 27.447L68.9854 28.4316ZM69.6705 15.0372L64.3929 16.0927C59.6785 9.38418 51.8803 5 43.0581 5C34.2269 5 26.4218 9.39306 21.7089 16.1131L16.4331 15.0579C21.867 6.03506 31.7578 0 43.0581 0C54.3497 0 64.234 6.02581 69.6705 15.0372Z"
fill="var(--primary-color)" />
<mask id="path-2-inside-1" fill="var(--primary-color)">
<path
d="M42.5 28.9252C16.5458 30.2312 0 14 0 14C0 14 26 22.9738 42.5 22.9738C59 22.9738 85 14 85 14C85 14 68.4542 27.6193 42.5 28.9252Z" />
</mask>
<path
d="M0 14L5.87269 -3.01504L-12.6052 26.8495L0 14ZM42.5 28.9252L41.5954 10.948L42.5 28.9252ZM85 14L96.4394 27.8975L79.1273 -3.01504L85 14ZM0 14C-12.6052 26.8495 -12.5999 26.8546 -12.5946 26.8598C-12.5928 26.8617 -12.5874 26.8669 -12.5837 26.8706C-12.5762 26.8779 -12.5685 26.8854 -12.5605 26.8932C-12.5445 26.9088 -12.5274 26.9254 -12.5092 26.943C-12.4729 26.9782 -12.4321 27.0174 -12.387 27.0605C-12.2969 27.1467 -12.1892 27.2484 -12.0642 27.3646C-11.8144 27.5968 -11.4949 27.8874 -11.1073 28.2273C-10.3332 28.9063 -9.28165 29.7873 -7.96614 30.7967C-5.34553 32.8073 -1.61454 35.3754 3.11693 37.872C12.5592 42.8544 26.4009 47.7581 43.4046 46.9025L41.5954 10.948C32.6449 11.3983 25.2366 8.83942 19.9174 6.03267C17.2682 4.63475 15.2406 3.22667 13.9478 2.23478C13.3066 1.74283 12.8627 1.366 12.6306 1.16243C12.5151 1.06107 12.4538 1.00422 12.4485 0.999363C12.446 0.996981 12.4576 1.00773 12.4836 1.03256C12.4966 1.04498 12.5132 1.06094 12.5334 1.08055C12.5436 1.09035 12.5546 1.10108 12.5665 1.11273C12.5725 1.11855 12.5787 1.12461 12.5852 1.13091C12.5884 1.13405 12.5934 1.13895 12.595 1.14052C12.6 1.14548 12.6052 1.15049 0 14ZM43.4046 46.9025C59.3275 46.1013 72.3155 41.5302 81.3171 37.1785C85.8337 34.9951 89.4176 32.8333 91.9552 31.151C93.2269 30.3079 94.2446 29.5794 94.9945 29.0205C95.3698 28.7409 95.6788 28.503 95.92 28.3138C96.0406 28.2192 96.1443 28.1366 96.2309 28.067C96.2742 28.0321 96.3133 28.0005 96.348 27.9723C96.3654 27.9581 96.3817 27.9448 96.3969 27.9323C96.4045 27.9261 96.4119 27.9201 96.419 27.9143C96.4225 27.9114 96.4276 27.9072 96.4294 27.9057C96.4344 27.9016 96.4394 27.8975 85 14C73.5606 0.102497 73.5655 0.0985097 73.5703 0.0945756C73.5718 0.0933319 73.5765 0.0894438 73.5795 0.0869551C73.5856 0.0819751 73.5914 0.077195 73.597 0.0726136C73.6082 0.0634509 73.6185 0.055082 73.6278 0.0474955C73.6465 0.0323231 73.6614 0.0202757 73.6726 0.0112606C73.695 -0.00676378 73.7026 -0.0126931 73.6957 -0.00726687C73.6818 0.00363418 73.6101 0.0596753 73.4822 0.154983C73.2258 0.346025 72.7482 0.691717 72.0631 1.14588C70.6873 2.05798 68.5127 3.38259 65.6485 4.7672C59.8887 7.55166 51.6267 10.4432 41.5954 10.948L43.4046 46.9025ZM85 14C79.1273 -3.01504 79.1288 -3.01557 79.1303 -3.01606C79.1306 -3.01618 79.1319 -3.01664 79.1326 -3.01688C79.134 -3.01736 79.135 -3.0177 79.1356 -3.01791C79.1369 -3.01834 79.1366 -3.01823 79.1347 -3.01759C79.131 -3.01633 79.1212 -3.01297 79.1055 -3.00758C79.0739 -2.99681 79.0185 -2.97794 78.9404 -2.95151C78.7839 -2.89864 78.5366 -2.81564 78.207 -2.7068C77.5472 -2.48895 76.561 -2.16874 75.3165 -1.78027C72.8181 -1.00046 69.3266 0.039393 65.3753 1.07466C57.0052 3.26771 48.2826 4.97383 42.5 4.97383V40.9738C53.2174 40.9738 65.7448 38.193 74.4997 35.8992C79.1109 34.691 83.1506 33.4874 86.0429 32.5846C87.4937 32.1318 88.6676 31.7509 89.4942 31.478C89.9077 31.3414 90.2351 31.2317 90.4676 31.1531C90.5839 31.1138 90.6765 31.0823 90.7443 31.0591C90.7783 31.0475 90.806 31.038 90.8275 31.0306C90.8382 31.0269 90.8473 31.0238 90.8549 31.0212C90.8586 31.0199 90.862 31.0187 90.865 31.0177C90.8665 31.0172 90.8684 31.0165 90.8691 31.0163C90.871 31.0156 90.8727 31.015 85 14ZM42.5 4.97383C36.7174 4.97383 27.9948 3.26771 19.6247 1.07466C15.6734 0.039393 12.1819 -1.00046 9.68352 -1.78027C8.43897 -2.16874 7.4528 -2.48895 6.79299 -2.7068C6.46337 -2.81564 6.21607 -2.89864 6.05965 -2.95151C5.98146 -2.97794 5.92606 -2.99681 5.89453 -3.00758C5.87876 -3.01297 5.86897 -3.01633 5.86528 -3.01759C5.86344 -3.01823 5.86312 -3.01834 5.86435 -3.01791C5.86497 -3.0177 5.86597 -3.01736 5.86736 -3.01688C5.86805 -3.01664 5.86939 -3.01618 5.86973 -3.01606C5.87116 -3.01557 5.87269 -3.01504 0 14C-5.87269 31.015 -5.87096 31.0156 -5.86914 31.0163C-5.8684 31.0165 -5.86647 31.0172 -5.86498 31.0177C-5.86201 31.0187 -5.85864 31.0199 -5.85486 31.0212C-5.84732 31.0238 -5.83818 31.0269 -5.82747 31.0306C-5.80603 31.038 -5.77828 31.0475 -5.74435 31.0591C-5.67649 31.0823 -5.58388 31.1138 -5.46761 31.1531C-5.23512 31.2317 -4.9077 31.3414 -4.49416 31.478C-3.66764 31.7509 -2.49366 32.1318 -1.04289 32.5846C1.84938 33.4874 5.88908 34.691 10.5003 35.8992C19.2552 38.193 31.7826 40.9738 42.5 40.9738V4.97383Z"
fill="var(--primary-color)" mask="url(#path-2-inside-1)" />
</svg-->
<img :src="logoSrc" alt="Logo" class="logo-image"/>
<img :src="logoSrc" alt="Logo" class="logo-image" />
<span>APOLLO</span>
</router-link>
</div>
<div class="layout-topbar-actions">
<div class="layout-config-menu">
@@ -80,9 +67,12 @@ const logoSrc = ref(logo);
<style scoped>
.logo-image {
border-radius: 50%;
width: 40px; /* Adjust the size as needed */
height: 40px; /* Adjust the size as needed */
object-fit: cover; /* Ensures the logo scales nicely within the circle */
border-radius: 50%;
width: 40px;
/* Adjust the size as needed */
height: 40px;
/* Adjust the size as needed */
object-fit: cover;
/* Ensures the logo scales nicely within the circle */
}
</style>

218
src/views/pages/KsDocuments.vue
View File

@@ -1,13 +1,13 @@
<template>
<div class="card">
<Toast/>
<ConfirmPopup></ConfirmPopup>
<Toast />
<ConfirmPopup></ConfirmPopup>
<div v-if="loading" class="loading-container">
<div class="spinner-container">
<ProgressSpinner class="spinner" />
<p class="loading-text">Loading data...</p>
</div>
</div>
<div class="spinner-container">
<ProgressSpinner class="spinner" />
<p class="loading-text">Loading data...</p>
</div>
</div>
<DataTable v-model:filters="filters" :value="ksdocuments" paginator showGridlines :rows="10" dataKey="id"
filterDisplay="menu" :loading="loading"
@@ -31,14 +31,15 @@
</div>
</template>
<template #empty>No Records found</template>
<Column field="ingestionInfo.metadata.KsApplicationName" header="ApplicationName" sortable
style="min-width: 12rem">
<template #body="{ data }">
{{ data.ingestionInfo.metadata.KsApplicationName }}
</template>
<template #filter="{ filterModel, filterCallback }">
<InputText v-model="filterModel.value" type="text" @input="filterCallback()" placeholder="Search by File" />
<InputText v-model="filterModel.value" type="text" @input="filterCallback()"
placeholder="Search by File" />
</template>
</Column>
<Column field="ingestionInfo.metadata.KsFileSource" header="FileSource" sortable>
@@ -55,7 +56,8 @@
{{ data.ingestionInfo.metadata.KsDocSource }}
</template>
<template #filter="{ filterModel, filterCallback }">
<InputText v-model="filterModel.value" type="text" @input="filterCallback()" placeholder="Search by File" />
<InputText v-model="filterModel.value" type="text" @input="filterCallback()"
placeholder="Search by File" />
</template>
</Column>
<Column field="ingestionStatus" header="Status" sortable>
@@ -63,8 +65,8 @@
<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">
<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>
@@ -82,14 +84,17 @@
</Column>
<Column 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" >
<div class="flex justify-center items-center space-x-3">
<!--Button type="button" icon="pi pi-pencil" rounded @click="editKsDocument(slotProps.data)"
v-tooltip="'Edit the information of document'" /-->
<Button type="button" icon="pi pi-play" rounded @click="startIndividualngestion(slotProps.data.id)"
v-tooltip="'Start Ingestion of document'" :disabled="slotProps.data.ingestionStatus === 'INGESTED'"
<Button type="button" icon="pi pi-play" rounded
@click="startIndividualngestion(slotProps.data.id)"
v-tooltip="'Start Ingestion of document'"
:disabled="slotProps.data.ingestionStatus === 'INGESTED'"
:class="{ 'p-button-danger': slotProps.data.ingestionStatus === 'INGESTED' }" />
<Button type="button" icon="pi pi-trash" rounded @click="confirmDelete(slotProps.data.id)"
v-tooltip="'Delete the ingested Record'" :disabled="slotProps.data.ingestionStatus === 'NEW'"
v-tooltip="'Delete the ingested Record'"
:disabled="slotProps.data.ingestionStatus === 'NEW'"
:class="{ 'p-button-danger': slotProps.data.ingestionStatus === 'NEW' }" />
</div>
</template>
@@ -105,22 +110,21 @@
<script setup>
import { FilterMatchMode, FilterOperator } from '@primevue/core/api';
import axios from 'axios';
import moment from 'moment';
import { useConfirm } from "primevue/useconfirm";
import { useToast } from 'primevue/usetoast';
import { computed, onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';
import { useToast } from 'primevue/usetoast';
import { useConfirm } from "primevue/useconfirm";
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 DatePicker from 'primevue/datepicker';
import Dialog from 'primevue/dialog';
import InputText from 'primevue/inputtext';
import ProgressSpinner from 'primevue/progressspinner';
import Select from 'primevue/select';
import Tag from 'primevue/tag';
import Tooltip from 'primevue/tooltip';
import ProgressSpinner from 'primevue/progressspinner';
const router = useRouter()
@@ -190,25 +194,25 @@ const editKsDocument = (data) => {
router.push({ name: 'ks-document-edit', params: { id: data.id } });
}
const confirmDelete = (id) =>{
console.log("id",id);
const confirmDelete = (id) => {
console.log("id", id);
confirm.require({
target: event.currentTarget,
message: 'Are you sure you want to proceed?',
icon: 'pi pi-exclamation-triangle',
rejectProps: {
label: 'Cancel',
severity: 'secondary',
outlined: true
},
acceptProps: {
label: 'Delete',
severity: 'danger',
},
accept: () => {
confirm.require({
target: event.currentTarget,
message: 'Are you sure you want to proceed?',
icon: 'pi pi-exclamation-triangle',
rejectProps: {
label: 'Cancel',
severity: 'secondary',
outlined: true
},
acceptProps: {
label: 'Delete',
severity: 'danger',
},
accept: () => {
const documentToDelete = ksdocuments.value.find(doc => doc.id === id);
console.log("documentToDelete",documentToDelete)
console.log("documentToDelete", documentToDelete)
if (!documentToDelete) {
console.error('Document not found');
return;
@@ -222,24 +226,24 @@ const confirmDelete = (id) =>{
ksFileSource: documentToDelete.ingestionInfo.metadata.KsFileSource,
ksApplicationName: documentToDelete.ingestionInfo.metadata.KsApplicationName,
};
console.log("requestPayload",requestPayload)
console.log("requestPayload", requestPayload)
axios.post('/fe-api/vector-store/deleteRecords', requestPayload)
.then(response => {
console.log('Delete resource:', response.data)
ksdocuments.value = ksdocuments.value.filter(doc => doc.id !== id);
console.log('ksdocuments.value',ksdocuments.value)
toast.add({ severity: 'info', summary: 'Confirmed', detail: 'deletion is in PROGRESS', life: 3000 });
})
.catch(error => {
console.error('Error deleting records: ', error)
toast.add({ severity: 'error', summary: 'Error', detail: 'Error in Deletion', life: 3000 });
});
},
reject: () => {
toast.add({severity: 'error', summary: 'Rejected', detail: 'You have rejected', life: 3000})
}
})
.then(response => {
console.log('Delete resource:', response.data)
ksdocuments.value = ksdocuments.value.filter(doc => doc.id !== id);
console.log('ksdocuments.value', ksdocuments.value)
toast.add({ severity: 'info', summary: 'Confirmed', detail: 'deletion is in PROGRESS', life: 3000 });
})
.catch(error => {
console.error('Error deleting records: ', error)
toast.add({ severity: 'error', summary: 'Error', detail: 'Error in Deletion', life: 3000 });
});
},
reject: () => {
toast.add({ severity: 'error', summary: 'Rejected', detail: 'You have rejected', life: 3000 })
}
})
};
//ingestion
@@ -301,7 +305,6 @@ function formatDate(dateString) {
</script>
<style scoped>
/* Custom styling for disabled red button */
.p-button-danger {
background-color: white;
@@ -316,75 +319,84 @@ function formatDate(dateString) {
cursor: not-allowed;
}
.space-x-3 > * + * {
margin-left: 1rem; /* Adjust as needed for desired spacing */
.space-x-3>*+* {
margin-left: 1rem;
/* Adjust as needed for desired spacing */
}
.loading-container {
display: flex;
align-items: center;
justify-content: center;
position: fixed; /* Change to fixed */
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 9999; /* Ensure it’s on top of everything */
background-color: rgba(255, 255, 255, 0.8); /* Optional: Add a background to obscure content */
display: flex;
align-items: center;
justify-content: center;
position: fixed;
/* Change to fixed */
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 9999;
/* Ensure it’s on top of everything */
background-color: rgba(255, 255, 255, 0.8);
/* Optional: Add a background to obscure content */
}
.spinner-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
animation: fade-in 1s ease-in-out;
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);
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);
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);
}
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);
}
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;
}
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.card {
margin: 2rem;
margin: 2rem;
}
</style>

53
src/views/pages/KsGitCloneRepoForm.vue
View File

@@ -9,19 +9,23 @@
<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" />
<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" />
<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" />
<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" />
<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>
@@ -29,7 +33,8 @@
</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" />
<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">
@@ -39,7 +44,8 @@
</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" />
<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>
@@ -47,14 +53,17 @@
</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" />
<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" />
<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" />
<Button type="submit" label="Submit" :disabled="isSubmitting" :fluid="false"
class="p-button-rounded p-button-lg mt-4" />
</form>
</div>
</div>
@@ -63,12 +72,12 @@
<script setup>
import axios from 'axios';
import Button from 'primevue/button';
import InputNumber from 'primevue/inputnumber';
import InputText from 'primevue/inputtext';
import { useToast } from 'primevue/usetoast';
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();
@@ -77,10 +86,10 @@ const isSubmitting = ref(false);
const formData = ref({
repoName: 'shellExecutionThroughAPI',
group: 'automationtester23',
source:'https://github.com',
source: 'https://github.com',
branch: 'master',
commitId: 'latest',
tokenType:'github',
tokenType: 'github',
repoPath: 'C:\\repos\\olympus_ai\\gitClone',
defaultChunkSize: 1988,
minChunkSize: 200,
@@ -114,10 +123,10 @@ const submitForm = async () => {
try {
const response = await axios.post('/fe-api/ks_git_repos/clone', json, {
headers: {
'Content-Type': 'application/json'
}
});
headers: {
'Content-Type': 'application/json'
}
});
console.log('Submit successful:', response.data);
toast.add({ severity: 'success', summary: 'Success', detail: 'Repository submitted successfully', life: 3000 });
@@ -129,9 +138,9 @@ const submitForm = async () => {
}
};
function formDatatoJson(formData){
const jsonObject ={};
formData.forEach((value,key) => {
function formDatatoJson(formData) {
const jsonObject = {};
formData.forEach((value, key) => {
jsonObject[key] = value;
})
return jsonObject;

107
src/views/pages/KsGitCloneRepoFormDialog.vue
View File

@@ -1,66 +1,69 @@
<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">
<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>
<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';
import { defineEmits, ref } from 'vue';
const formData = ref({
repoName: 'shellExecutionThroughAPI',
group: 'automationtester23',
source:'https://github.com',
source: 'https://github.com',
branch: 'master',
commitId: 'latest',
tokenType:'github',
tokenType: 'github',
repoPath: 'C:\\repos\\olympus_ai\\gitClone',
defaultChunkSize: 1988,
minChunkSize: 200,
@@ -93,12 +96,12 @@ const submitForm = () => {
const json = formDatatoJson(formDataToSend);
console.log(json)
emit('submitForm',json)
emit('submitForm', json)
};
function formDatatoJson(formData){
const jsonObject ={};
formData.forEach((value,key) => {
function formDatatoJson(formData) {
const jsonObject = {};
formData.forEach((value, key) => {
jsonObject[key] = value;
})
return jsonObject;

313
src/views/pages/KsGitRepos.vue
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">
@@ -9,48 +9,39 @@
</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 #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'"/>
<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>
<Dialog v-model:visible="showDialog" :style="{ width: '600px' }" header="Repository Details"
:modal="true">
<div>
<cloneForm @submitForm="cloneRepo" />
</div>
</Dialog>
</template>
</Toolbar>
<DataTable
v-model:filters="filters"
v-model:expandedRows="expandedRows"
@rowExpand="onRowExpand"
@rowCollapse="onRowCollapse"
:value="codeRepoInfo"
:paginator="true"
:rows="10"
<DataTable v-model:filters="filters" v-model:expandedRows="expandedRows" @rowExpand="onRowExpand"
@rowCollapse="onRowCollapse" :value="codeRepoInfo" :paginator="true" :rows="10"
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"
rowGroupMode="subheader"
groupRowsBy="repoName"
filterDisplay="menu"
:loading="loading"
:rowsPerPageOptions="[10, 15, 20, 50, 100]" dataKey="id" :rowHover="true" rowGroupMode="subheader"
groupRowsBy="repoName" filterDisplay="menu" :loading="loading"
:globalFilterFields="['repoName', 'branch', 'ingestionStatus', 'ingestionDateFormat']"
tableStyle="min-width: 70rem"
removableSort
>
<template #header>
tableStyle="min-width: 70rem" removableSort>
<template #header>
<div class="flex flex-wrap gap-2 items-center justify-between">
<h4 class="m-0">Manage Repositories</h4>
<IconField>
@@ -60,7 +51,7 @@
<InputText v-model="filters['global'].value" placeholder="Search..." />
</IconField>
</div>
</template>
</template>
<template #groupheader="slotProps">
<div class="flex items-center gap-2">
<img :alt="slotProps.data.repoName" :src="logoSrc" width="32" style="vertical-align: middle" />
@@ -72,12 +63,14 @@
<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>
<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 />
<Column />
<!--Column field="ksGitIngestionInfo.id" header="ksGitIngestionInfo" sortable> </Column-->
@@ -86,7 +79,8 @@
{{ data.repoName }}
</template>
<template #filter="{ filterModel, filterCallback }">
<InputText v-model="filterModel.value" type="text" @input="filterCallback()" placeholder="Search by Git Repo Name" />
<InputText v-model="filterModel.value" type="text" @input="filterCallback()"
placeholder="Search by Git Repo Name" />
</template>
</Column>
@@ -95,7 +89,8 @@
{{ data.branch }}
</template>
<template #filter="{ filterModel, filterCallback }">
<InputText v-model="filterModel.value" type="text" @input="filterCallback()" placeholder="Search by Git Repo Branch" />
<InputText v-model="filterModel.value" type="text" @input="filterCallback()"
placeholder="Search by Git Repo Branch" />
</template>
</Column>
@@ -104,7 +99,8 @@
<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">
<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>
@@ -112,81 +108,61 @@
</template>
</Column>
<Column field="ingestionDate" header="Ingestion Date" sortable filterField="ingestionDateFormat" dataType="date" style="min-width: 10rem">
<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" />
<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"-->
<Column :exportable="false" style="min-width: 12rem">
<template #body="slotProps">
<Button
text raised rounded
severity="info"
type="button"
class="mr-2"
icon="pi pi-play"
@click="ingestGitRepo(slotProps.data)"
v-tooltip="'Start Ingestion of Repo'"
:disabled="isButtonDisabled(slotProps.data)"
/>
<Button
text raised rounded
severity="warn"
type="button"
class="mr-2"
icon="pi pi-forward"
@click="reIngestWithPullChanges(slotProps.data)"
v-tooltip="'Ingest Repo with latest changes from master branch'"
/>
<Button text raised rounded severity="info" type="button" class="mr-2" icon="pi pi-play"
@click="ingestGitRepo(slotProps.data)" v-tooltip="'Start Ingestion of Repo'"
:disabled="isButtonDisabled(slotProps.data)" />
<Button text raised rounded severity="warn" type="button" class="mr-2" icon="pi pi-forward"
@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"
@click="deleteRecordsFromVectorStore(slotProps.data)" v-tooltip="'Delete the Records'" />
<Button
text raised rounded
severity="danger"
type="button"
icon="pi pi-trash"
@click="deleteRecordsFromVectorStore(slotProps.data)"
v-tooltip="'Delete the Records'"
/>
</template>
</Column>
<template #expansion="slotProps">
<div class="p-4">
<VueJsonView :src="slotProps.data"
:collapsed="collapsed"
:theme="theme"
:sort-keys="sortKeys"
:enable-clipboard="enableClipboard"
class="vue-json-view"
/>
<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>
<div class="flex justify-end font-bold w-full">
Total Count: {{ calculateCustomerTotal(slotProps.data.repoName) }}
</div>
</template>
</DataTable>
</div>
</template>
<script setup>
import logo from '@/assets/gitlab-logo.svg';
import VueJsonView from '@matpool/vue-json-view';
import { FilterMatchMode, FilterOperator } from '@primevue/core/api';
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 VueJsonView from '@matpool/vue-json-view'
import logo from '@/assets/gitlab-logo.svg';
import { useToast } from 'primevue/usetoast';
import { computed, onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';
import Button from 'primevue/button';
import Column from 'primevue/column';
@@ -194,16 +170,15 @@ import DataTable from 'primevue/datatable';
import DatePicker from 'primevue/datepicker';
import Dialog from 'primevue/dialog';
import InputText from 'primevue/inputtext';
import ProgressSpinner from 'primevue/progressspinner';
import Select from 'primevue/select';
import Tag from 'primevue/tag';
import Tooltip from 'primevue/tooltip';
import ProgressSpinner from 'primevue/progressspinner';
import { useConfirm } from "primevue/useconfirm";
import socketManager from '/src/components/SocketManager.vue'
import socketManager from '/src/components/SocketManager.vue';
//dialog
import cloneForm from './KsGitCloneRepoFormDialog.vue'
import cloneForm from './KsGitCloneRepoFormDialog.vue';
const showDialog = ref(false);
const cloneRepo = (formData) => {
try {
@@ -212,7 +187,7 @@ const cloneRepo = (formData) => {
'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) {
@@ -233,7 +208,7 @@ const ingestionResult = ref('');
const popupTitle = ref('');
const popupMessage = ref('');
const filters = ref();
const statuses = ref(['INGESTION-ERROR','INGESTION-IN-PROGRESS', 'INGESTED', 'REPO-NEW', 'REPO-CLONE-IN-PROGRESS','REPO-CLONE-COMPLETED','REPO-CLONE-FAILED']);
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')
@@ -250,14 +225,14 @@ onMounted(() => {
//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();
}
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
@@ -276,8 +251,8 @@ const initFilters = () => {
function calculateCustomerTotal(name) {
let total = 0;
if(codeRepoInfo.value){
for(let RepoInfo of codeRepoInfo.value){
if (codeRepoInfo.value) {
for (let RepoInfo of codeRepoInfo.value) {
if (RepoInfo.repoName === name) {
total++;
}
@@ -309,7 +284,7 @@ const getCustomDatewithAllResponse = (data) => {
//ingest git repo functions
const ingestGitRepo = (repo) => {
const ingestGitRepo = (repo) => {
confirm.require({
target: event.currentTarget,
message: 'Are you sure you want to proceed?',
@@ -325,17 +300,17 @@ const ingestGitRepo = (repo) => {
},
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 });
});
.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})
toast.add({ severity: 'error', summary: 'Rejected', detail: 'You have rejected', life: 3000 })
}
})
};
@@ -355,7 +330,7 @@ const newCodeRepoForm = () => {
router.push({ name: 'ks-git-repo-new' });
};
const cloneRepoForm = () =>{
const cloneRepoForm = () => {
console.log("clone repo form");
router.push({ name: 'ks-git-clone-repo' });
}
@@ -376,20 +351,20 @@ const getStatus = (data) => {
};
//delete functionality
const deleteRecordsFromVectorStore = (data) =>{
console.log("data",data);
console.log("reponame",data.repoName);
const deleteRecordsFromVectorStore = (data) => {
console.log("data", data);
console.log("reponame", data.repoName);
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,
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)
};
console.log("requestPayload", requestPayload)
confirm.require({
target: event.currentTarget,
@@ -406,25 +381,25 @@ const deleteRecordsFromVectorStore = (data) =>{
},
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 });
});
.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})
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);
const reIngestWithPullChanges = (data) => {
console.log("data", data);
console.log("reponame", data.repoName);
confirm.require({
target: event.currentTarget,
@@ -440,17 +415,17 @@ const reIngestWithPullChanges = (data) =>{
severity: 'danger',
},
accept: () => {
axios.get(`/test/reingest_repo?repoName=${data.repoName}&branchName=${data.branch}`)
.then(response => {
console.log(response.data);
toast.add({ severity: 'info', summary: 'Confirmed', detail: 'ReIngestion with latest pull from master started', life: 3000 });
}).catch(error => {
console.log(error);
toast.add({ severity: 'error', summary: 'Error', detail: 'Error in Reingestion', life: 3000 });
})
axios.get(`/test/reingest_repo?repoName=${data.repoName}&branchName=${data.branch}`)
.then(response => {
console.log(response.data);
toast.add({ severity: 'info', summary: 'Confirmed', detail: 'ReIngestion with latest pull from master started', life: 3000 });
}).catch(error => {
console.log(error);
toast.add({ severity: 'error', summary: 'Error', detail: 'Error in Reingestion', life: 3000 });
})
},
reject: () => {
toast.add({severity: 'error', summary: 'Rejected', detail: 'You have rejected', life: 3000})
toast.add({ severity: 'error', summary: 'Rejected', detail: 'You have rejected', life: 3000 })
}
})
};
@@ -458,11 +433,11 @@ const reIngestWithPullChanges = (data) =>{
//expand
const onRowExpand = (event) => {
console.log('Row Expanded:', event.data);
toast.add({ severity: 'info', summary: event.data.repoName +' Expanded', life: 3000 });
toast.add({ severity: 'info', summary: event.data.repoName + ' Expanded', life: 3000 });
};
const onRowCollapse = (event) => {
console.log('Row Expanded:', event.data);
toast.add({ severity: 'success', summary: event.data.repoName +' Collapsed', life: 3000 });
toast.add({ severity: 'success', summary: event.data.repoName + ' Collapsed', life: 3000 });
};
const expandAll = () => {
@@ -483,31 +458,33 @@ function isButtonDisabled(data) {
</script>
<style scoped>
/* Custom styling for disabled red button */
.p-button-danger {
background-color: white;
border-color: blue;
color: black;
background-color: white;
border-color: blue;
color: black;
}
.p-button-danger:disabled {
/*background-color: red;*/
border-color: red;
color: red;
cursor: not-allowed;
/*background-color: red;*/
border-color: red;
color: red;
cursor: not-allowed;
}
.space-x-3 > * + * {
margin-left: 1rem; /* Adjust as needed for desired spacing */
.space-x-3>*+* {
margin-left: 1rem;
/* Adjust as needed for desired spacing */
}
.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 */
height: 100%;
/* Ensure the container takes full height of the parent */
min-height: 400px;
/* Adjust this height to your DataTable height */
}
.spinner-container {
@@ -536,17 +513,20 @@ function isButtonDisabled(data) {
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);
@@ -557,15 +537,18 @@ function isButtonDisabled(data) {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.card {
margin: 2rem;
}
.vue-json-view {
font-size: 15px; /* Change this value to your desired font size */
}
.vue-json-view {
font-size: 15px;
/* Change this value to your desired font size */
}
</style>

12
src/views/pages/KsNewDocumentForm.vue
View File

@@ -33,7 +33,8 @@
<div class="col-12 md:col-6 mb-4">
<span class="p-float-label">
<label for="ksDocType" v-tooltip="'Specify the type of document e.g, md, pdf,'">KS Document Type</label>
<Select id="ksDocType" v-model="formData.ksDocType" :options="dropdownItems" required optionLabel="name" optionValue="value" placeholder="Select One" class="w-full"></Select>
<Select id="ksDocType" v-model="formData.ksDocType" :options="dropdownItems" required optionLabel="name"
optionValue="value" placeholder="Select One" class="w-full"></Select>
<!--InputText id="ksDocType" v-model="formData.ksDocType" required class="w-full" /-->
</span>
</div>
@@ -99,16 +100,15 @@ import axios from 'axios';
import { useToast } from 'primevue/usetoast';
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import Tooltip from 'primevue/tooltip';
const toast = useToast();
const router = useRouter();
const dropdownItems = ref([
{ name: 'PDF', value: 'pdf' },
{ name: 'MD', value: 'md' },
{ name: 'DOCX', value: 'docx' },
{ name: 'EXCEL', value: 'excel' }
{ name: 'PDF', value: 'pdf' },
{ name: 'MD', value: 'md' },
{ name: 'DOCX', value: 'docx' },
{ name: 'EXCEL', value: 'excel' }
]);
const formData = ref({

26
src/views/pages/KsNewGitRepoForm.vue
View File

@@ -9,11 +9,13 @@
<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" />
<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" />
<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>
@@ -27,7 +29,8 @@
</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" />
<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>
@@ -35,14 +38,17 @@
</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" />
<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" />
<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" />
<Button type="submit" label="Submit" :disabled="isSubmitting" :fluid="false"
class="p-button-rounded p-button-lg mt-4" />
</form>
</div>
</div>
@@ -51,12 +57,12 @@
<script setup>
import axios from 'axios';
import Button from 'primevue/button';
import InputNumber from 'primevue/inputnumber';
import InputText from 'primevue/inputtext';
import { useToast } from 'primevue/usetoast';
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();

35
src/views/pages/KsSimilaritySearch.vue
View File

@@ -28,14 +28,13 @@
</template>
<script setup>
import CodeSnippet from '@/components/CodeSnippet.vue';
import axios from 'axios';
import Button from 'primevue/button';
import Card from 'primevue/card';
import ScrollPanel from 'primevue/scrollpanel';
import SelectButton from 'primevue/selectbutton'; // Import SelectButton
import { useToast } from 'primevue/usetoast';
import { watch, ref } from 'vue';
import CodeSnippet from '@/components/CodeSnippet.vue';
import axios from 'axios';
import { ref, watch } from 'vue';
const query = ref('');
const dropdownItem = ref(null);
@@ -58,21 +57,21 @@ const sendQuery = () => {
filterQuery: filterQuery.value,
}
})
.then(response => {
const data = response.data;
console.log('API response:', data);
.then(response => {
const data = response.data;
console.log('API response:', data);
if (data && Array.isArray(data) && data.length > 0) {
messages.value = data;
toast.add({ severity: 'success', summary: 'Success', detail: 'Query sent successfully', life: 3000 });
} else {
toast.add({ severity: 'info', summary: 'Info', detail: 'No results found', life: 3000 });
}
})
.catch(error => {
console.error('Error sending query:', error);
toast.add({ severity: 'error', summary: 'Error', detail: 'Failed to send query', life: 3000 });
});
if (data && Array.isArray(data) && data.length > 0) {
messages.value = data;
toast.add({ severity: 'success', summary: 'Success', detail: 'Query sent successfully', life: 3000 });
} else {
toast.add({ severity: 'info', summary: 'Info', detail: 'No results found', life: 3000 });
}
})
.catch(error => {
console.error('Error sending query:', error);
toast.add({ severity: 'error', summary: 'Error', detail: 'Failed to send query', life: 3000 });
});
} else {
toast.add({ severity: 'warn', summary: 'Warning', detail: 'Please enter a query and select a type', life: 3000 });
}

11
src/views/pages/KsVectorData.vue
View File

@@ -1,7 +1,7 @@
<template>
<div className="card">
<DataTable v-model:filters="filters" :value="vectorDetails" dataKey="id" :loading="loading" paginator showGridlines
:rows="10" filterDisplay="menu"
<DataTable v-model:filters="filters" :value="vectorDetails" dataKey="id" :loading="loading" paginator
showGridlines :rows="10" filterDisplay="menu"
:globalFilterFields="['id', 'metadata.ksApplicationName', 'metadata.ksDocSource', 'metadata.ksDoctype', 'metadata.ksFileSource']">
<template #header>
<div class="flex items-center justify-between gap-4 p-4 ">
@@ -23,7 +23,8 @@
{{ data.id }}
</template>
<template #filter="{ filterModel, filterCallback }">
<InputText v-model="filterModel.value" type="text" @input="filterCallback()" placeholder="Search By id" />
<InputText v-model="filterModel.value" type="text" @input="filterCallback()"
placeholder="Search By id" />
</template>
</Column>
<Column field="metadata.ksApplicationName" header="KsApplicationName" sortable>
@@ -66,9 +67,9 @@
</div>
</template>
<script setup>
import { onMounted, ref } from 'vue';
import { FilterMatchMode, FilterOperator } from '@primevue/core/api'
import { FilterMatchMode, FilterOperator } from '@primevue/core/api';
import axios from 'axios';
import { onMounted, ref } from 'vue';
const vectorDetails = ref(null);
const loading = ref(true);

23
src/views/pages/auth/Login.vue
View File

@@ -1,13 +1,13 @@
<script setup>
import { useLayout } from '@/layout/composables/layout';
import { useAuth } from '@websanova/vue-auth/src/v3.js';
import { computed, ref } from 'vue';
import {useAuth } from '@websanova/vue-auth/src/v3.js';
//import logo from '@/assets/Logo_Apollo_Transparent.png';
import logo from '@/assets/apollo.jpg';
const auth = useAuth();
const auth = useAuth();
const { isDarkTheme } = useLayout();
const username = ref('');
const username = ref('');
const password = ref('');
const logoSrc = ref(logo);
@@ -40,13 +40,13 @@ const login = () => {
style="border-radius: 56px; padding: 0.3rem; background: linear-gradient(180deg, var(--primary-color) 10%, rgba(33, 150, 243, 0) 30%)">
<div class="w-full bg-surface-0 dark:bg-surface-900 py-20 px-8 sm:px-20" style="border-radius: 53px">
<div class="text-center mb-8">
<img :src="logoSrc" alt="Logo" class="logo-image mx-auto" />
<!--span style="font-size: 24px;" class="text-surface-600 dark:text-surface-200 font-medium">Welcome to Apollo- The Knowledge Source</span-->
<div style="text-align: center; padding: 20px;">
<span style="font-size: 36px; font-weight: bold; color: #3b7a57;">Welcome to Apollo</span><br>
<span style="font-size: 24px; color: #555;">The Knowledge Source</span>
<span style="font-size: 36px; font-weight: bold; color: #3b7a57;">Welcome to Apollo</span><br>
<span style="font-size: 24px; color: #555;">The Knowledge Source</span>
</div>
</div>
@@ -90,9 +90,12 @@ const login = () => {
.logo-image {
border-radius: 50%;
width: 220px; /* Adjust the size as needed */
height: 220px; /* Adjust the size as needed */
object-fit: cover; /* Ensures the logo scales nicely within the circle */
width: 220px;
/* Adjust the size as needed */
height: 220px;
/* Adjust the size as needed */
object-fit: cover;
/* Ensures the logo scales nicely within the circle */
display: block;
}
</style>