vectore datatable and few modifications

.vscode/settings.json

@@ -9,7 +9,7 @@
         "editor.formatOnSave": true
     },
     "[vue]": {
-        "editor.defaultFormatter": "esbenp.prettier-vscode",
+        "editor.defaultFormatter": "Vue.volar",
         "editor.formatOnSave": true
     },
     "[typescript]": {

index.html

@@ -5,7 +5,7 @@
       <meta charset="UTF-8">
       <link rel="icon" href="/favicon.ico">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
-      <title>Sakai Vue</title>
+      <title>Apollo</title>
       <link href="https://cdn.jsdelivr.net/npm/@vetixy/circular-std@1.0.0/dist/index.min.css" rel="stylesheet">
 
 </head>

src/components/CodeSnippet.vue

@@ -51,13 +51,16 @@ function copyToClipboard() {
 
 <style scoped>
 .code-snippet-container {
-  position: relative; /* Enable positioning of child elements */
+  position: relative;
+  /* Enable positioning of child elements */
 }
 
 .class="button-container" {
   position: sticky;
-    top: 10px; /* Adjust as needed */
+  top: 10px;
-    right: 10px; /* Adjust as needed */
+  /* Adjust as needed */
+  right: 10px;
+  /* Adjust as needed */
   z-index: 1000;
 }
 
@@ -72,8 +75,10 @@ pre {
 
 .button-container {
   position: absolute;
-  top: 10px; /* Adjust as needed */
+  top: 10px;
-  right: 10px; /* Adjust as needed */
+  /* Adjust as needed */
+  right: 10px;
+  /* Adjust as needed */
 }
 
 .p-mt-2 {

src/layout/AppMenu.vue

@@ -13,7 +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: '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' }
         ]
     },
 ]);

src/router/index.js

@@ -20,6 +20,7 @@ const router = createRouter({
                         {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: '/ks_similarity_search', name: 'ks_similarity_search', component: () => import('@/views/pages/KsSimilaritySearch.vue')},
+                        {path: '/ks_vector_data', name: 'ks_vector_data', component: () => import('@/views/pages/KsVectorData.vue')}
         
                     ]
    

src/views/pages/KsDocuments.vue

@@ -1,7 +1,8 @@
 <template>
 	<div className="card">
 		<DataTable v-model:filters="filters" :value="ksdocuments" paginator showGridlines :rows="10" dataKey="id"
-                filterDisplay="menu" :loading="loading" :globalFilterFields="['name', 'fileName', 'ingestionStatus', 'ingestionDateFormat']">
+			filterDisplay="menu" :loading="loading"
+			:globalFilterFields="['name', 'fileName', 'ingestionStatus', 'ingestionDateFormat']">
 			<template #header>
 				<div class="flex items-center justify-between gap-4 p-4 ">
 					<span class="text-xl font-bold">KS Documents</span>
@@ -13,8 +14,11 @@
 							<InputText v-model="filters['global'].value" placeholder="Keyword Search" />
 						</IconField>
 					</div>
-                    <Button icon="pi pi-plus" rounded raised @click="newKsDocument()" v-tooltip="'Create New Document'" class="mr-2"  />
+					<Button icon="pi pi-plus" rounded raised @click="newKsDocument()" v-tooltip="'Create New Document'"
-                    <Button icon="pi pi-check-circle" rounded raised @click="startlngestion()" v-tooltip="'Start All documents Ingestion'" class="mr-8" :disabled="allDocumentsIngested"  :class="{ 'p-button-danger': allDocumentsIngested }"/>
+						class="mr-2" />
+					<Button icon="pi pi-check-circle" rounded raised @click="startlngestion()"
+						v-tooltip="'Start All documents Ingestion'" class="mr-8" :disabled="allDocumentsIngested"
+						:class="{ 'p-button-danger': allDocumentsIngested }" />
 				</div>
 			</template>
 			<template #empty>No Records found</template>
@@ -34,7 +38,8 @@
 					{{ data.fileName }}
 				</template>
 				<template #filter="{ filterModel, filterCallback }">
-                    <InputText v-model="filterModel.value" type="text" @input="filterCallback()" placeholder="Search by File Name" />
+					<InputText v-model="filterModel.value" type="text" @input="filterCallback()"
+						placeholder="Search by File Name" />
 				</template>
 			</Column>
 			<Column field="ingestionStatus" header="Status" sortable>
@@ -42,7 +47,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>
@@ -54,25 +60,22 @@
 					{{ 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 headerStyle="width: 5rem; text-align: center" bodyStyle="text-align: center; overflow: visible">
 				<template #body="slotProps">
 					<div class="flex justify-center items-center">
-                    <Button type="button" icon="pi pi-pencil" rounded @click="editKsDocument(slotProps.data)" v-tooltip="'Edit the information of document'" class="mr-4" />
+						<Button type="button" icon="pi pi-pencil" rounded @click="editKsDocument(slotProps.data)"
+							v-tooltip="'Edit the information of document'" class="mr-4" />
 						<!--Tag :value="slotProps.data.id" /-->
 						<!--Tag :value="slotProps.data.ingestionInfo.id" /-->
 						<!--Button type="button" v-if="slotProps.data.ingestionStatus === 'NEW'" icon="pi pi-play" rounded
                         @click="startIndividualngestion(slotProps.data.id)" v-tooltip="'Start Ingestion of document'" class="mr-4" /-->
-                    <Button type="button" 
+						<Button type="button" icon="pi pi-play" rounded @click="startIndividualngestion(slotProps.data.id)"
-                            icon="pi pi-play" 
+							v-tooltip="'Start Ingestion of document'" :disabled="slotProps.data.ingestionStatus === 'INGESTED'"
-                            rounded 
+							:class="{ 'p-button-danger': slotProps.data.ingestionStatus === 'INGESTED' }" class="mr-7" />
-                            @click="startIndividualngestion(slotProps.data.id)" 
-                            v-tooltip="'Start Ingestion of document'" 
-                            :disabled="slotProps.data.ingestionStatus === 'INGESTED'" 
-                            :class="{ 'p-button-danger': slotProps.data.ingestionStatus === 'INGESTED' }" 
-                            class="mr-7" />
 					</div>
 				</template>
 			</Column>
@@ -230,6 +233,7 @@ function formatDate(dateString) {
 	border-color: red;
 	color: white;
 }
+
 .p-button-danger:disabled {
 	background-color: red;
 	border-color: red;
@@ -237,4 +241,3 @@ function formatDate(dateString) {
 	cursor: not-allowed;
 }
 </style>
-

src/views/pages/KsSimilaritySearch.vue

@@ -38,7 +38,7 @@ 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 './CodeSnippet.vue';
+import CodeSnippet from '@/components/CodeSnippet.vue';
 
 const query = ref('');
 const dropdownItem = ref(null);
@@ -48,7 +48,8 @@ const dynamicCode = ref('');
 
 const dropdownItems = [
   { name: 'Documentation', code: 'setup-documentation' },
-  { name: 'Deploy Documentation', code: 'deploy-documentation' }
+  { name: 'Deploy Documentation', code: 'deploy-documentation' },
+  { name: 'SourceCode', code: 'sourcecode' }
 ];
 
 const sendQuery = async () => {

src/views/pages/KsVectorData.vue

@@ -0,0 +1,98 @@
+<template>
+	<div className="card">
+		<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.source']">
+			<template #header>
+				<div class="flex items-center justify-between gap-4 p-4 ">
+					<span class="text-xl font-bold">Vector Data</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>
+				</div>
+			</template>
+			<template #empty>No Records found</template>
+			<template #loading>Loading Data. Please wait.....</template>
+			<Column field="id" header="Id" sortable>
+				<template #body="{ data }">
+					{{ data.id }}
+				</template>
+				<template #filter="{ filterModel, filterCallback }">
+					<InputText v-model="filterModel.value" type="text" @input="filterCallback()" placeholder="Search By id" />
+				</template>
+			</Column>
+			<Column field="metadata.ksApplicationName" header="ksApplicationName" sortable>
+				<template #body="{ data }">
+					{{ data.metadata.ksApplicationName }}
+				</template>
+				<template #filter="{ filterModel, filterCallback }">
+					<InputText v-model="filterModel.value" type="text" @input="filterCallback()"
+						placeholder="Search By Application name" />
+				</template>
+			</Column>
+			<Column field="metadata.ksDocSource" header="ksDocSource" sortable>
+				<template #body="{ data }">
+					{{ data.metadata.ksDocSource }}
+				</template>
+				<template #filter="{ filterModel, filterCallback }">
+					<InputText v-model="filterModel.value" type="text" @input="filterCallback()"
+						placeholder="Search By Document/Repo source" />
+				</template>
+			</Column>
+			<Column field="metadata.ksDoctype" header="ksDoctype" sortable>
+				<template #body="{ data }">
+					{{ data.metadata.ksDoctype }}
+				</template>
+				<template #filter="{ filterModel, filterCallback }">
+					<InputText v-model="filterModel.value" type="text" @input="filterCallback()"
+						placeholder="Search By Document/Source type" />
+				</template>
+			</Column>
+			<Column field="metadata.source" header="source" sortable>
+				<template #body="{ data }">
+					{{ data.metadata.source }}
+				</template>
+				<template #filter="{ filterModel, filterCallback }">
+					<InputText v-model="filterModel.value" type="text" @input="filterCallback()"
+						placeholder="Search By Source/Path" />
+				</template>
+			</Column>
+		</DataTable>
+	</div>
+</template>
+<script setup>
+import { onMounted, ref } from 'vue';
+import { FilterMatchMode, FilterOperator } from '@primevue/core/api'
+import axios from 'axios';
+
+const vectorDetails = ref(null);
+const loading = ref(true);
+const filters = ref();
+
+onMounted(() => {
+	axios.get('http://localhost:8082/fe-api/vector-store/details')
+		.then(response => {
+			vectorDetails.value = response.data;
+			console.log(vectorDetails.value)
+			loading.value = false;
+		});
+});
+
+const initFilters = () => {
+	filters.value = {
+		global: { value: null, matchMode: FilterMatchMode.CONTAINS },
+		id: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }] },
+		'metadata.ksApplicationName': { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }] },
+		'metadata.ksDocSource': { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }] },
+		'metadata.ksDoctype': { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }] },
+		'metadata.source': { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }] }
+	};
+};
+
+initFilters();
+</script>