From ec5c382c3d9c47184b7728cb19f5bac581b99adc Mon Sep 17 00:00:00 2001
From: sumedh <s.shamrao.shinde@accenture.com>
Date: Wed, 7 Aug 2024 12:10:50 +0530
Subject: [PATCH] vectore datatable and few modifications

---
 .vscode/settings.json                         |   2 +-
 index.html                                    |   2 +-
 .../pages => components}/CodeSnippet.vue      |  23 +-
 src/layout/AppMenu.vue                        |   3 +-
 src/router/index.js                           |   1 +
 src/views/pages/KsDocuments.vue               | 319 +++++++++---------
 src/views/pages/KsSimilaritySearch.vue        |   5 +-
 src/views/pages/KsVectorData.vue              |  98 ++++++
 8 files changed, 281 insertions(+), 172 deletions(-)
 rename src/{views/pages => components}/CodeSnippet.vue (82%)
 create mode 100644 src/views/pages/KsVectorData.vue

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 407f69d..8e025df 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -9,7 +9,7 @@
         "editor.formatOnSave": true
     },
     "[vue]": {
-        "editor.defaultFormatter": "esbenp.prettier-vscode",
+        "editor.defaultFormatter": "Vue.volar",
         "editor.formatOnSave": true
     },
     "[typescript]": {
diff --git a/index.html b/index.html
index 945256a..25993c6 100644
--- a/index.html
+++ b/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>
diff --git a/src/views/pages/CodeSnippet.vue b/src/components/CodeSnippet.vue
similarity index 82%
rename from src/views/pages/CodeSnippet.vue
rename to src/components/CodeSnippet.vue
index 6c3eabc..7494626 100644
--- a/src/views/pages/CodeSnippet.vue
+++ b/src/components/CodeSnippet.vue
@@ -1,8 +1,8 @@
 <template>
   <div class="code-snippet-container">
     <div class="button-container h-8 w-8 p-0 inline-flex items-center justify-center">
-        <!-- Button to copy code to clipboard -->
-        <Button icon="pi pi-copy" @click="copyToClipboard" class="p-mt-2" />
+      <!-- Button to copy code to clipboard -->
+      <Button icon="pi pi-copy" @click="copyToClipboard" class="p-mt-2" />
     </div>
     <!-- Code display area with syntax highlighting -->
     <pre v-html="highlightedCode"></pre>
@@ -51,14 +51,17 @@ 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 */
-    right: 10px; /* Adjust as needed */
-    z-index: 1000;
+  position: sticky;
+  top: 10px;
+  /* Adjust as needed */
+  right: 10px;
+  /* Adjust as needed */
+  z-index: 1000;
 }
 
 pre {
@@ -72,8 +75,10 @@ pre {
 
 .button-container {
   position: absolute;
-  top: 10px; /* Adjust as needed */
-  right: 10px; /* Adjust as needed */
+  top: 10px;
+  /* Adjust as needed */
+  right: 10px;
+  /* Adjust as needed */
 }
 
 .p-mt-2 {
diff --git a/src/layout/AppMenu.vue b/src/layout/AppMenu.vue
index fde3ff2..660126b 100644
--- a/src/layout/AppMenu.vue
+++ b/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' }
         ]
     },
 ]);
diff --git a/src/router/index.js b/src/router/index.js
index 22abbcf..210ce1b 100644
--- a/src/router/index.js
+++ b/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')}
         
                     ]
    
diff --git a/src/views/pages/KsDocuments.vue b/src/views/pages/KsDocuments.vue
index e26a256..5a85a66 100644
--- a/src/views/pages/KsDocuments.vue
+++ b/src/views/pages/KsDocuments.vue
@@ -1,87 +1,90 @@
 <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']">
-            <template #header>
-                <div class="flex items-center justify-between gap-4 p-4 ">
-                    <span class="text-xl font-bold">KS Documents</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="newKsDocument()" v-tooltip="'Create New Document'" 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>
-            <template #loading>Loading Data. Please wait....</template>
-            <Column field="id" header="ksdocuments id" sortable style="min-width: 12rem"/>
-            <Column field="ingestionInfo.id" header="ksingestioninfo id"  sortable style="min-width: 12rem"/>
-            <Column field="name" header="Name" sortable style="min-width: 12rem">
-                <template #body="{ data }">
-                    {{ data.name }}
-                </template>
-                <template #filter="{ filterModel, filterCallback }">
-                    <InputText v-model="filterModel.value" type="text" @input="filterCallback()" placeholder="Search by File" />
-                </template>
-            </Column>
-            <Column field="fileName" header="File Name" sortable >
-                <template #body="{ data }">
-                    {{ data.fileName }}
-                </template>
-                <template #filter="{ filterModel, filterCallback }">
-                    <InputText v-model="filterModel.value" type="text" @input="filterCallback()" placeholder="Search by File Name" />
-                </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 header="Ingestion Date" 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 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" />
-                    <!--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
+	<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']">
+			<template #header>
+				<div class="flex items-center justify-between gap-4 p-4 ">
+					<span class="text-xl font-bold">KS Documents</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="newKsDocument()" v-tooltip="'Create New Document'"
+						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>
+			<template #loading>Loading Data. Please wait....</template>
+			<Column field="id" header="ksdocuments id" sortable style="min-width: 12rem" />
+			<Column field="ingestionInfo.id" header="ksingestioninfo id" sortable style="min-width: 12rem" />
+			<Column field="name" header="Name" sortable style="min-width: 12rem">
+				<template #body="{ data }">
+					{{ data.name }}
+				</template>
+				<template #filter="{ filterModel, filterCallback }">
+					<InputText v-model="filterModel.value" type="text" @input="filterCallback()" placeholder="Search by File" />
+				</template>
+			</Column>
+			<Column field="fileName" header="File Name" sortable>
+				<template #body="{ data }">
+					{{ data.fileName }}
+				</template>
+				<template #filter="{ filterModel, filterCallback }">
+					<InputText v-model="filterModel.value" type="text" @input="filterCallback()"
+						placeholder="Search by File Name" />
+				</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 header="Ingestion Date" 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 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" />
+						<!--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" 
-                            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' }" 
-                            class="mr-7" />
-                    </div>
-                </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>
-    </div>
+						<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' }" class="mr-7" />
+					</div>
+				</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>
+	</div>
 </template>
 
 <script setup>
@@ -111,14 +114,14 @@ const ingestionResult = ref('');
 const filters = ref();
 
 const initFilters = () => {
-    filters.value = {
-        global: { value: null, matchMode: FilterMatchMode.CONTAINS },
-        id: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }] },
-        name: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }] },
-        fileName: { 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 }] }
-    };
+	filters.value = {
+		global: { value: null, matchMode: FilterMatchMode.CONTAINS },
+		id: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }] },
+		name: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }] },
+		fileName: { 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();
@@ -126,99 +129,99 @@ initFilters();
 const statuses = ref(['NEW', 'INGESTED', 'FAILED']); // Add your statuses here
 
 onMounted(() => {
-    axios.get('http://localhost:8082/fe-api/ksdocuments')
-        .then(response => {
-            ksdocuments.value = getCustomDatewithAllResponse(response.data);
-            console.log(ksdocuments.value);
-            loading.value = false;
-        });
+	axios.get('http://localhost:8082/fe-api/ksdocuments')
+		.then(response => {
+			ksdocuments.value = getCustomDatewithAllResponse(response.data);
+			console.log(ksdocuments.value);
+			loading.value = false;
+		});
 });
 
 // Computed property to check if all documents are ingested
 const allDocumentsIngested = computed(() => {
-    return ksdocuments.value && ksdocuments.value.every(doc => doc.ingestionStatus === 'INGESTED');
+	return ksdocuments.value && ksdocuments.value.every(doc => doc.ingestionStatus === 'INGESTED');
 });
 
 
 const getStatus = (data) => {
-    if (data.ingestionStatus === 'INGESTED') {
-        return 'success';
-    } else if (data.ingestionStatus === 'NEW') {
-        return 'danger';
-    } else {
-        return 'warn';
-    }
+	if (data.ingestionStatus === 'INGESTED') {
+		return 'success';
+	} else if (data.ingestionStatus === 'NEW') {
+		return 'danger';
+	} else {
+		return 'warn';
+	}
 }
 
 const getCustomDatewithAllResponse = (data) => {
-    return [...(data || [])].map((d) => {
-        d.ingestionDateFormat = new Date(d.ingestionDateFormat);
-        return d;
-    });
+	return [...(data || [])].map((d) => {
+		d.ingestionDateFormat = new Date(d.ingestionDateFormat);
+		return d;
+	});
 };
 
 const updateFilterModel = () => {
-    console.log("updateFilterModel")
+	console.log("updateFilterModel")
 }
 
 const editKsDocument = (data) => {
-    console.log(data);
-    router.push({ name: 'ks-document-edit', params: { id: data.id } });
+	console.log(data);
+	router.push({ name: 'ks-document-edit', params: { id: data.id } });
 }
 
 const startIndividualngestion = (id) => {
-    axios.get(`http://localhost:8082/test/ingest_document/${id}`)
-        //axios.get('http://localhost:8082/test/ingestion_loop')
-        .then(response => {
-            ingestionResult.value = response.data;
-            if (response.data.status == "OK") {
-                ksdocuments.value.forEach(element => {
-                    if (response.data.ingestedDocumentId.includes(element.id)) {
-                        element.status = "INGESTED"
-                    }
-                });
-            } else {
-                ingestionResult.value = `Error: ${response.data.message}`;
-            }
+	axios.get(`http://localhost:8082/test/ingest_document/${id}`)
+		//axios.get('http://localhost:8082/test/ingestion_loop')
+		.then(response => {
+			ingestionResult.value = response.data;
+			if (response.data.status == "OK") {
+				ksdocuments.value.forEach(element => {
+					if (response.data.ingestedDocumentId.includes(element.id)) {
+						element.status = "INGESTED"
+					}
+				});
+			} else {
+				ingestionResult.value = `Error: ${response.data.message}`;
+			}
 
-            ingestionDialogVisible.value = true;
-        })
-        .catch(error => {
-            ingestionDialogVisible.value = true;
-        });
+			ingestionDialogVisible.value = true;
+		})
+		.catch(error => {
+			ingestionDialogVisible.value = true;
+		});
 };
 
 const startlngestion = () => {
-    axios.get('http://localhost:8082/test/ingestion_loop')
-        .then(response => {
-            ingestionResult.value = response.data;
-            if (response.data.status == "OK") {
-                ksdocuments.value.forEach(element => {
-                    if (response.data.ingestedDocumentId.includes(element.id)) {
-                        element.status = "INGESTED"
-                    }
-                });
-            } else {
-                ingestionResult.value = `Error: ${response.data.message}`;
-            }
+	axios.get('http://localhost:8082/test/ingestion_loop')
+		.then(response => {
+			ingestionResult.value = response.data;
+			if (response.data.status == "OK") {
+				ksdocuments.value.forEach(element => {
+					if (response.data.ingestedDocumentId.includes(element.id)) {
+						element.status = "INGESTED"
+					}
+				});
+			} else {
+				ingestionResult.value = `Error: ${response.data.message}`;
+			}
 
-            ingestionDialogVisible.value = true;
-        })
-        .catch(error => {
-            ingestionDialogVisible.value = true;
-        });
+			ingestionDialogVisible.value = true;
+		})
+		.catch(error => {
+			ingestionDialogVisible.value = true;
+		});
 };
 
 const newKsDocument = () => {
-    console.log('new');
-    router.push({ name: 'ks-document-new' });
+	console.log('new');
+	router.push({ name: 'ks-document-new' });
 
 }
 
 // Function to format date string
 function formatDate(dateString) {
-    // Parse the date string using moment
-    return moment(dateString).format('MM/DD/YYYY');
+	// Parse the date string using moment
+	return moment(dateString).format('MM/DD/YYYY');
 }
 
 </script>
@@ -226,15 +229,15 @@ function formatDate(dateString) {
 <style scoped>
 /* Custom styling for disabled red button */
 .p-button-danger {
-    background-color: red;
-    border-color: red;
-    color: white;
+	background-color: red;
+	border-color: red;
+	color: white;
 }
+
 .p-button-danger:disabled {
-    background-color: red;
-    border-color: red;
-    color: white;
-    cursor: not-allowed;
+	background-color: red;
+	border-color: red;
+	color: white;
+	cursor: not-allowed;
 }
 </style>
-
diff --git a/src/views/pages/KsSimilaritySearch.vue b/src/views/pages/KsSimilaritySearch.vue
index 9486cf0..d3e18bb 100644
--- a/src/views/pages/KsSimilaritySearch.vue
+++ b/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 () => {
diff --git a/src/views/pages/KsVectorData.vue b/src/views/pages/KsVectorData.vue
new file mode 100644
index 0000000..db0fa7b
--- /dev/null
+++ b/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>