From 95c9258bd5c45fd8e55823b2ba0a9553e14636b0 Mon Sep 17 00:00:00 2001
From: sumedh <s.shamrao.shinde@accenture.com>
Date: Mon, 5 Aug 2024 23:24:52 +0530
Subject: [PATCH 01/14] filter capability added

---
 src/router/index.js             |  4 +-
 src/views/pages/KsDocuments.vue | 97 +++++++++++++++++++++++++++++----
 2 files changed, 89 insertions(+), 12 deletions(-)

diff --git a/src/router/index.js b/src/router/index.js
index b221412..22abbcf 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -18,8 +18,8 @@ const router = createRouter({
                     children: [
                         {path: '', name: 'ks-document', component: () => import('@/views/pages/KsDocuments.vue')},
                         {path: 'new', name: 'ks-document-new', component: () => import('@/views/pages/KsNewDocumentForm.vue')},
-                        {path: ':id', name: 'ks-document-edit', component: () => import('@/views/pages/KsEditDocumentForm.vue')},
-                        {path: '/ks_similarity_search', name: 'ks_similarity_search', component: () => import('@/views/pages/KsSimilaritySearch.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')},
         
                     ]
    
diff --git a/src/views/pages/KsDocuments.vue b/src/views/pages/KsDocuments.vue
index a23c0e9..f5b64f3 100644
--- a/src/views/pages/KsDocuments.vue
+++ b/src/views/pages/KsDocuments.vue
@@ -1,21 +1,59 @@
 <template>
     <div className="card">
-
-        <DataTable :value="ksdocuments" :paginator="true" :rows="10" dataKey="id" :rowHover="true" showGridlines>
+        <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 flex-wrap items-center justify-between gap-2">
+                <div class="flex items-center justify-between gap-4 p-4 bg-gray-100 border-b border-gray-200">
                     <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()" />
                 </div>
             </template>
-            <Column field="name" header="Name"></Column>
-            <Column field="fileName" header="File Name"></Column>
+            <template #empty>No Records found</template>
+            <template #loading>Loading Data. Please wait....</template>
+            <Column field="name" header="Name" 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">
+                <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">
                 <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 }">
+                    {{ data.ingestionDate }}
+                </template>
+                <template #filter="{ filterModel }">
+                    <DatePicker v-model="filterModel.value" dateFormat="mm/dd/yy" placeholder="mm/dd/yyyy"  @change="updateFilterModel"/>
+                </template>
             </Column>
-            <Column field="ingestionDate" header="Ingestion Date"></Column>
             <Column headerStyle="width: 5rem; text-align: center" bodyStyle="text-align: center; overflow: visible">
                 <template #body="slotProps">
                     <Button type="button" icon="pi pi-pencil" rounded @click="editKsDocument(slotProps.data)" />
@@ -26,7 +64,6 @@
                 </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" />
@@ -35,21 +72,50 @@
 </template>
 
 <script setup>
+import { FilterMatchMode, FilterOperator } from '@primevue/core/api';
 import axios from 'axios';
-import { onMounted, ref } from 'vue';
+import { computed, onMounted, ref } from 'vue';
 import { useRouter } from 'vue-router';
 
+import Button from 'primevue/button';
+import Column from 'primevue/column';
+import DataTable from 'primevue/datatable';
+import DatePicker from 'primevue/datepicker'
+import Dialog from 'primevue/dialog';
+import InputText from 'primevue/inputtext';
+import Select from 'primevue/select';
+import Tag from 'primevue/tag';
+
+
 const router = useRouter()
 const ksdocuments = ref(null);
+const loading = ref(true);
 
 const ingestionDialogVisible = ref(false);
 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 }] }
+    };
+};
+
+initFilters();
+
+const statuses = ref(['NEW', 'INGESTED', 'FAILED']); // Add your statuses here
 
 onMounted(() => {
     axios.get('http://localhost:8082/fe-api/ksdocuments')
         .then(response => {
-            console.log(response.data);
-            ksdocuments.value = response.data;
+            ksdocuments.value = getCustomDatewithAllResponse(response.data);
+            console.log(ksdocuments.value);
+            loading.value = false;
         });
 });
 
@@ -63,6 +129,17 @@ const getStatus = (data) => {
     }
 }
 
+const getCustomDatewithAllResponse = (data) => {
+    return [...(data || [])].map((d) => {
+        d.ingestionDateFormat = new Date(d.ingestionDateFormat);
+        return d;
+    });
+};
+
+const updateFilterModel = () => {
+    console.log("updateFilterModel")
+}
+
 const editKsDocument = (data) => {
     console.log(data);
     router.push({ name: 'ks-document-edit', params: { id: data.id } });

From 4f264dec425cf48ea28174cf2b47ffe291595d77 Mon Sep 17 00:00:00 2001
From: sumedh <s.shamrao.shinde@accenture.com>
Date: Tue, 6 Aug 2024 11:45:35 +0530
Subject: [PATCH 02/14] filters added

---
 package-lock.json               | 10 ++++
 package.json                    |  1 +
 src/views/pages/KsDocuments.vue | 89 ++++++++++++++++++++++++++++-----
 3 files changed, 88 insertions(+), 12 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 7a3a224..787f558 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,6 +11,7 @@
                 "@primevue/themes": "^4.0.0",
                 "axios": "^1.7.2",
                 "chart.js": "3.3.2",
+                "moment": "^2.30.1",
                 "primeicons": "^6.0.1",
                 "primevue": "^4.0.0",
                 "vue": "^3.4.34",
@@ -2519,6 +2520,15 @@
                 "ufo": "^1.5.3"
             }
         },
+        "node_modules/moment": {
+            "version": "2.30.1",
+            "resolved": "https://registry.npmjs.org/moment/-/moment-2.30.1.tgz",
+            "integrity": "sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==",
+            "license": "MIT",
+            "engines": {
+                "node": "*"
+            }
+        },
         "node_modules/ms": {
             "version": "2.1.2",
             "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
diff --git a/package.json b/package.json
index 6b553a5..db99a80 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
         "@primevue/themes": "^4.0.0",
         "axios": "^1.7.2",
         "chart.js": "3.3.2",
+        "moment": "^2.30.1",
         "primeicons": "^6.0.1",
         "primevue": "^4.0.0",
         "vue": "^3.4.34",
diff --git a/src/views/pages/KsDocuments.vue b/src/views/pages/KsDocuments.vue
index f5b64f3..e26a256 100644
--- a/src/views/pages/KsDocuments.vue
+++ b/src/views/pages/KsDocuments.vue
@@ -3,7 +3,7 @@
         <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 bg-gray-100 border-b border-gray-200">
+                <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">
@@ -13,12 +13,15 @@
                         <InputText v-model="filters['global'].value" placeholder="Keyword Search" />
                     </IconField>
                     </div>
-                    <Button icon="pi pi-plus" rounded raised @click="newKsDocument()" />
+                    <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="name" header="Name" style="min-width: 12rem">
+            <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>
@@ -26,7 +29,7 @@
                     <InputText v-model="filterModel.value" type="text" @input="filterCallback()" placeholder="Search by File" />
                 </template>
             </Column>
-            <Column field="fileName" header="File Name">
+            <Column field="fileName" header="File Name" sortable >
                 <template #body="{ data }">
                     {{ data.fileName }}
                 </template>
@@ -34,7 +37,7 @@
                     <InputText v-model="filterModel.value" type="text" @input="filterCallback()" placeholder="Search by File Name" />
                 </template>
             </Column>
-            <Column field="ingestionStatus" header="Status">
+            <Column field="ingestionStatus" header="Status" sortable >
                 <template #body="slotProps">
                     <Tag :value="slotProps.data.ingestionStatus" :severity="getStatus(slotProps.data)" />
                 </template>
@@ -48,7 +51,7 @@
             </Column>
             <Column header="Ingestion Date" filterField="ingestionDateFormat" dataType="date" style="min-width: 10rem">
                 <template #body="{ data }">
-                    {{ data.ingestionDate }}
+                    {{ formatDate(data.ingestionDate) }}
                 </template>
                 <template #filter="{ filterModel }">
                     <DatePicker v-model="filterModel.value" dateFormat="mm/dd/yy" placeholder="mm/dd/yyyy"  @change="updateFilterModel"/>
@@ -56,11 +59,21 @@
             </Column>
             <Column headerStyle="width: 5rem; text-align: center" bodyStyle="text-align: center; overflow: visible">
                 <template #body="slotProps">
-                    <Button type="button" icon="pi pi-pencil" rounded @click="editKsDocument(slotProps.data)" />
-                    <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="startIngestion(slotProps.data.id)" />
+                <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>
@@ -76,6 +89,7 @@ import { FilterMatchMode, FilterOperator } from '@primevue/core/api';
 import axios from 'axios';
 import { computed, onMounted, ref } from 'vue';
 import { useRouter } from 'vue-router';
+import moment from 'moment';
 
 import Button from 'primevue/button';
 import Column from 'primevue/column';
@@ -85,6 +99,7 @@ import Dialog from 'primevue/dialog';
 import InputText from 'primevue/inputtext';
 import Select from 'primevue/select';
 import Tag from 'primevue/tag';
+import Tooltip from 'primevue/tooltip';
 
 
 const router = useRouter()
@@ -119,6 +134,12 @@ onMounted(() => {
         });
 });
 
+// Computed property to check if all documents are ingested
+const allDocumentsIngested = computed(() => {
+    return ksdocuments.value && ksdocuments.value.every(doc => doc.ingestionStatus === 'INGESTED');
+});
+
+
 const getStatus = (data) => {
     if (data.ingestionStatus === 'INGESTED') {
         return 'success';
@@ -145,7 +166,7 @@ const editKsDocument = (data) => {
     router.push({ name: 'ks-document-edit', params: { id: data.id } });
 }
 
-const startIngestion = (id) => {
+const startIndividualngestion = (id) => {
     axios.get(`http://localhost:8082/test/ingest_document/${id}`)
         //axios.get('http://localhost:8082/test/ingestion_loop')
         .then(response => {
@@ -167,9 +188,53 @@ const startIngestion = (id) => {
         });
 };
 
+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}`;
+            }
+
+            ingestionDialogVisible.value = true;
+        })
+        .catch(error => {
+            ingestionDialogVisible.value = true;
+        });
+};
+
 const newKsDocument = () => {
     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');
+}
+
 </script>
+
+<style scoped>
+/* Custom styling for disabled red button */
+.p-button-danger {
+    background-color: red;
+    border-color: red;
+    color: white;
+}
+.p-button-danger:disabled {
+    background-color: red;
+    border-color: red;
+    color: white;
+    cursor: not-allowed;
+}
+</style>
+

From 9b9aef9257466ae9b5e539982ad91378d75f0f82 Mon Sep 17 00:00:00 2001
From: sumedh <s.shamrao.shinde@accenture.com>
Date: Tue, 6 Aug 2024 20:05:01 +0530
Subject: [PATCH 03/14] similaritysearch UI modified

---
 package-lock.json                      |  10 ++
 src/views/pages/CodeSnippet.vue        |  82 ++++++++++++++++
 src/views/pages/KsSimilaritySearch.vue | 127 +++++++++++++++----------
 3 files changed, 169 insertions(+), 50 deletions(-)
 create mode 100644 src/views/pages/CodeSnippet.vue

diff --git a/package-lock.json b/package-lock.json
index 787f558..f9b9fe1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,6 +14,7 @@
                 "moment": "^2.30.1",
                 "primeicons": "^6.0.1",
                 "primevue": "^4.0.0",
+                "prismjs": "^1.29.0",
                 "vue": "^3.4.34",
                 "vue-router": "^4.4.0"
             },
@@ -3007,6 +3008,15 @@
                 "node": ">=12.11.0"
             }
         },
+        "node_modules/prismjs": {
+            "version": "1.29.0",
+            "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.29.0.tgz",
+            "integrity": "sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==",
+            "license": "MIT",
+            "engines": {
+                "node": ">=6"
+            }
+        },
         "node_modules/proxy-from-env": {
             "version": "1.1.0",
             "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
diff --git a/src/views/pages/CodeSnippet.vue b/src/views/pages/CodeSnippet.vue
new file mode 100644
index 0000000..6c3eabc
--- /dev/null
+++ b/src/views/pages/CodeSnippet.vue
@@ -0,0 +1,82 @@
+<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" />
+    </div>
+    <!-- Code display area with syntax highlighting -->
+    <pre v-html="highlightedCode"></pre>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import Button from 'primevue/button';
+import Toast from 'primevue/toast';
+import { useToast } from 'primevue/usetoast';
+
+import Prism from 'prismjs';
+import 'prismjs/components/prism-javascript'; // Import necessary languages
+import 'prismjs/components/prism-systemd'; // Import necessary languages
+import 'prismjs/themes/prism-tomorrow.css'; // Import a theme for syntax highlighting
+
+const toast = useToast();
+
+// Define the code snippet as a prop
+const props = defineProps({
+  code: {
+    type: String,
+    required: true
+  },
+  language: {
+    type: String,
+    default: 'systemd'
+  }
+});
+
+const highlightedCode = computed(() => {
+  return Prism.highlight(props.code, Prism.languages[props.language], props.language);
+});
+
+// Function to copy the code to the clipboard
+function copyToClipboard() {
+  navigator.clipboard.writeText(props.code).then(() => {
+    toast.add({ severity: 'success', summary: 'Success', detail: 'Code copied to clipboard!', life: 10000 });
+  }).catch((error) => {
+    console.error('Failed to copy code:', error);
+    toast.add({ severity: 'error', summary: 'Error', detail: 'Failed to copy code.', life: 10000 });
+  });
+}
+</script>
+
+<style scoped>
+.code-snippet-container {
+  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;
+}
+
+pre {
+  background-color: #2d2d2d;
+  color: #ccc;
+  padding: 1em;
+  border-radius: 5px;
+  overflow-x: auto;
+  white-space: pre-wrap;
+}
+
+.button-container {
+  position: absolute;
+  top: 10px; /* Adjust as needed */
+  right: 10px; /* Adjust as needed */
+}
+
+.p-mt-2 {
+  margin-top: 1em;
+}
+</style>
diff --git a/src/views/pages/KsSimilaritySearch.vue b/src/views/pages/KsSimilaritySearch.vue
index 03f02ab..9f35814 100644
--- a/src/views/pages/KsSimilaritySearch.vue
+++ b/src/views/pages/KsSimilaritySearch.vue
@@ -1,34 +1,28 @@
 <template>
   <Fluid>
-    <div class="flex mt-6">
-      <div class="card flex flex-col gap-4 w-full">
-        <div>
-          <h2 class="text-3xl font-bold mb-4">Similarity Search</h2>
-        </div>
-        <div class="flex flex-wrap">
-          <!--label for="address">Address</label-->
-          <Textarea id="query" v-model="query" rows="4" placeholder="Enter your query..." class="w-full" />
-        </div>
-
-        <div class="flex flex-col md:flex-row gap-4">
-          <div class="flex flex-wrap gap-2 w-full">
-            <Select id="type" v-model="dropdownItem" :options="dropdownItems" optionLabel="name"
-              placeholder="Select type" class="w-full"></Select>
+    <div class="similarity-search">
+      <div class="card-container flex flex-col gap-6">
+        <h2 class="text-4xl font-semibold text-center mb-4">Similarity Search</h2>
+        <div class="flex flex-col gap-4">
+          <Textarea id="query" v-model="query" rows="6" placeholder="Enter your query..." class="input-textarea" />
+          <div class="select-container">
+            <SelectButton 
+              id="type" 
+              v-model="dropdownItem" 
+              :options="dropdownItems" 
+              optionLabel="name"
+              class="select-button"
+            />
           </div>
         </div>
-
-        <div class="p-field p-col-12 p-md-2">
-          <Button label="Send" icon="pi pi-send" :fluid="false" @click="sendQuery" />
-        </div>
+        <Button label="Send" icon="pi pi-send" @click="sendQuery" class="send-button" />
       </div>
-    </div>
 
-    <div class="flex mt-6">
-      <div class="results-container p-mt-4">
-        <Card v-for="(result, index) in messages" :key="index" class="p-mb-3">
+      <div class="results-container mt-6">
+        <Card v-for="(result, index) in messages" :key="index" class="result-card">
           <template #content>
-            <ScrollPanel style="width: 100%; max-height: 200px">
-              <pre class="result-content">{{ result }}</pre>
+            <ScrollPanel style="width: 100%; max-height: 400px">
+              <CodeSnippet :code="dynamicCode" language="systemd" />
             </ScrollPanel>
           </template>
         </Card>
@@ -41,20 +35,22 @@
 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 { ref } from 'vue';
+import { watch, ref } from 'vue';
+import CodeSnippet from './CodeSnippet.vue';
 
 const query = ref('');
 const dropdownItem = ref(null);
 const messages = ref([]);
 const toast = useToast();
+const dynamicCode = ref('');
 
 const dropdownItems = [
   { name: 'Documentation', code: 'setup-documentation' },
   { name: 'Deploy Documentation', code: 'deploy-documentation' }
 ];
 
-
 const sendQuery = async () => {
   if (query.value.trim() !== '' && dropdownItem.value) {
     try {
@@ -78,42 +74,73 @@ const sendQuery = async () => {
     toast.add({ severity: 'warn', summary: 'Warning', detail: 'Please enter a query and select a type', life: 3000 });
   }
 };
+
+// Function to generate dynamic code snippet
+function generateDynamicCode() {
+  const randomValue = messages.value.join(', ');
+  return `[${randomValue}]`;
+}
+
+watch(messages, (newMessages) => {
+  dynamicCode.value = generateDynamicCode();
+});
 </script>
 
 <style scoped>
 .similarity-search {
-  max-width: 1200px;
+  max-width: 1000px;
   margin: 0 auto;
+  padding: 2rem;
+}
+
+.card-container {
+  padding: 2rem;
+  border-radius: 8px;
+  background-color: #ffffff;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
+
+.input-textarea {
+  width: 100%;
+  resize: vertical;
+  min-height: 150px; /* Increased height for better readability */
+  border-radius: 8px;
   padding: 1rem;
+  border: 1px solid #ccc;
+  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
+}
+
+.select-container {
+  display: flex;
+  justify-content: center;
+}
+
+.select-button {
+  width: 100%;
+  border-radius: 8px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.send-button {
+  width: 100%;
+  border-radius: 8px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }
 
 .results-container {
-  max-height: 600px;
-  overflow-y: auto;
+  padding: 2rem;
+  background-color: #f9f9f9;
+  border-radius: 8px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
 }
 
-.result-content {
-  white-space: pre-wrap;
-  word-wrap: break-word;
-  font-family: monospace;
-  font-size: 0.9em;
-  padding: 1rem;
-  background-color: #f8f9fa;
-  border-radius: 4px;
+.result-card {
+  margin-bottom: 1rem;
+  border-radius: 8px;
 }
 
-.p-select {
-  width: 100%;
-}
-
-.p-select .p-select-label {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.p-inputtextarea {
-  resize: vertical;
-  min-height: 100px;
+.p-scrollpanel {
+  border-radius: 8px;
+  background-color: #ffffff;
 }
 </style>
\ No newline at end of file

From 55a547d5735d7a8d300d524dc511e37b5ccc79eb Mon Sep 17 00:00:00 2001
From: sumedh <s.shamrao.shinde@accenture.com>
Date: Tue, 6 Aug 2024 20:37:59 +0530
Subject: [PATCH 04/14] View modified

---
 src/views/pages/KsSimilaritySearch.vue | 50 +++++++++++++-------------
 1 file changed, 25 insertions(+), 25 deletions(-)

diff --git a/src/views/pages/KsSimilaritySearch.vue b/src/views/pages/KsSimilaritySearch.vue
index 9f35814..9486cf0 100644
--- a/src/views/pages/KsSimilaritySearch.vue
+++ b/src/views/pages/KsSimilaritySearch.vue
@@ -1,32 +1,32 @@
 <template>
   <Fluid>
+    <h2 class="text-4xl font-semibold text-center mb-4">Similarity Search</h2>
     <div class="similarity-search">
-      <div class="card-container flex flex-col gap-6">
-        <h2 class="text-4xl font-semibold text-center mb-4">Similarity Search</h2>
-        <div class="flex flex-col gap-4">
-          <Textarea id="query" v-model="query" rows="6" placeholder="Enter your query..." class="input-textarea" />
-          <div class="select-container">
-            <SelectButton 
-              id="type" 
-              v-model="dropdownItem" 
-              :options="dropdownItems" 
-              optionLabel="name"
-              class="select-button"
-            />
-          </div>
+        <div v-if="messages.length > 0" class="results-container mt-6">
+            <Card v-for="(result, index) in messages" :key="index" class="result-card">
+              <template #content>
+                <ScrollPanel style="width: 100%; max-height: 400px">
+                  <CodeSnippet :code="dynamicCode" language="systemd" />
+                </ScrollPanel>
+              </template>
+            </Card>
+        </div>
+      
+        <div class="card-container flex flex-col gap-6">
+          <div class="flex flex-col gap-4">
+            <Textarea id="query" v-model="query" rows="6" placeholder="Enter your query..." class="input-textarea" />
+            <div class="select-container">
+              <SelectButton 
+                id="type" 
+                v-model="dropdownItem" 
+                :options="dropdownItems" 
+                optionLabel="name"
+                class="select-button"
+              />
+            </div>
+          </div>
+          <Button label="Send" icon="pi pi-send" @click="sendQuery" class="send-button" />
         </div>
-        <Button label="Send" icon="pi pi-send" @click="sendQuery" class="send-button" />
-      </div>
-
-      <div class="results-container mt-6">
-        <Card v-for="(result, index) in messages" :key="index" class="result-card">
-          <template #content>
-            <ScrollPanel style="width: 100%; max-height: 400px">
-              <CodeSnippet :code="dynamicCode" language="systemd" />
-            </ScrollPanel>
-          </template>
-        </Card>
-      </div>
     </div>
   </Fluid>
 </template>

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 05/14] 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>

From 4c54153dc8399cc01c786dbeee4d8e2d344aa3bf Mon Sep 17 00:00:00 2001
From: sumedh <s.shamrao.shinde@accenture.com>
Date: Thu, 8 Aug 2024 10:34:54 +0530
Subject: [PATCH 06/14] delete functionality implemented

---
 src/components/CodeSnippet.vue         |   2 +-
 src/views/pages/KsDocuments.vue        | 100 ++++++++++++++++++---
 src/views/pages/KsNewDocumentForm.vue  | 118 ++++++-------------------
 src/views/pages/KsSimilaritySearch.vue |  54 ++++++-----
 src/views/pages/KsVectorData.vue       |  28 +++---
 5 files changed, 155 insertions(+), 147 deletions(-)

diff --git a/src/components/CodeSnippet.vue b/src/components/CodeSnippet.vue
index 7494626..7d50975 100644
--- a/src/components/CodeSnippet.vue
+++ b/src/components/CodeSnippet.vue
@@ -55,7 +55,7 @@ function copyToClipboard() {
   /* Enable positioning of child elements */
 }
 
-.class="button-container" {
+.button-container {
   position: sticky;
   top: 10px;
   /* Adjust as needed */
diff --git a/src/views/pages/KsDocuments.vue b/src/views/pages/KsDocuments.vue
index 5a85a66..aae2406 100644
--- a/src/views/pages/KsDocuments.vue
+++ b/src/views/pages/KsDocuments.vue
@@ -2,7 +2,7 @@
 	<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']">
+			:globalFilterFields="['ingestionInfo.metadata.KsApplicationName', 'ingestionInfo.metadata.KsFileSources', 'ingestionInfo.metadata.KsDocSource', 'ingestionStatus', 'ingestionDateFormat']">
 			<template #header>
 				<div class="flex items-center justify-between gap-4 p-4 ">
 					<span class="text-xl font-bold">KS Documents</span>
@@ -23,25 +23,39 @@
 			</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">
+			<Column field="id" header="id" sortable style="min-width: 12rem">
+				<template #body="slotProps">
+					<Tag>ksdocuments: {{ slotProps.data.id }}</Tag>
+					<Tag>ksingestioninfo: {{ slotProps.data.ingestionInfo.id }}</Tag>
+				</template>
+			</Column>
+			<!--Column field="ingestionInfo.id" header="ksingestioninfo id" sortable style="min-width: 12rem" /-->
+			<Column field="ingestionInfo.metadata.KsApplicationName" header="KSApplicationName" sortable
+				style="min-width: 12rem">
 				<template #body="{ data }">
-					{{ data.name }}
+					{{ data.ingestionInfo.metadata.KsApplicationName }}
 				</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>
+			<Column field="ingestionInfo.metadata.KsFileSource" header="KsFileSource" sortable>
 				<template #body="{ data }">
-					{{ data.fileName }}
+					{{ data.ingestionInfo.metadata.KsFileSource }}
 				</template>
 				<template #filter="{ filterModel, filterCallback }">
 					<InputText v-model="filterModel.value" type="text" @input="filterCallback()"
 						placeholder="Search by File Name" />
 				</template>
 			</Column>
+			<Column field="ingestionInfo.metadata.KsDocSource" header="KsDocSource" sortable style="min-width: 12rem">
+				<template #body="{ data }">
+					{{ data.ingestionInfo.metadata.KsDocSource }}
+				</template>
+				<template #filter="{ filterModel, filterCallback }">
+					<InputText v-model="filterModel.value" type="text" @input="filterCallback()" placeholder="Search by File" />
+				</template>
+			</Column>
 			<Column field="ingestionStatus" header="Status" sortable>
 				<template #body="slotProps">
 					<Tag :value="slotProps.data.ingestionStatus" :severity="getStatus(slotProps.data)" />
@@ -69,13 +83,21 @@
 					<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" />
+						<Button type="button" icon="pi pi-trash" rounded @click="showConfirmDialog(slotProps.data.id)"
+							v-tooltip="'Delete the ingested Record'" :disabled="slotProps.data.ingestionStatus === 'NEW'"
+							:class="{ 'p-button-danger': slotProps.data.ingestionStatus === 'NEW' }" class="mr-7" />
+
+						<Dialog header="Confirm Deletion" :visible="confirmDialogVisible" modal @hide="resetConfirmDialog"
+							:style="{ width: '300px' }">
+							<p>Are you sure you want to delete this record?</p>
+							<template #footer>
+								<Button label="No" icon="pi pi-times" @click="confirmDialogVisible = false" class="p-button-text" />
+								<Button label="Yes" icon="pi pi-check" @click="confirmDelete" class="p-button-danger" />
+							</template>
+						</Dialog>
 					</div>
 				</template>
 			</Column>
@@ -113,12 +135,16 @@ const ingestionDialogVisible = ref(false);
 const ingestionResult = ref('');
 const filters = ref();
 
+const confirmDialogVisible = ref(false);
+const recordToDelete = ref(null);
+
 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 }] },
+		'ingestionInfo.metadata.KsApplicationName': { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }] },
+		'ingestionInfo.metadata.KsFileSource': { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }] },
+		'ingestionInfo.metadata.KsDocSource': { 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 }] }
 	};
@@ -169,6 +195,53 @@ const editKsDocument = (data) => {
 	router.push({ name: 'ks-document-edit', params: { id: data.id } });
 }
 
+//delete functionality
+function showConfirmDialog(id) {
+	recordToDelete.value = id;
+	confirmDialogVisible.value = true;
+}
+
+function confirmDelete() {
+	if (recordToDelete.value !== null) {
+		deleteRecordsFromVectorStore(recordToDelete.value);
+		recordToDelete.value = null;
+	}
+	confirmDialogVisible.value = false;
+}
+
+function resetConfirmDialog() {
+	recordToDelete.value = null;
+}
+
+
+const deleteRecordsFromVectorStore = (id) => {
+	const documentToDelete = ksdocuments.value.find(doc => doc.id === id);
+
+	if (!documentToDelete) {
+		console.error('Document not found');
+		return;
+	}
+
+	const requestPayload = {
+		ksDocumentId: id,
+		ksIngestionInfoId: documentToDelete.ingestionInfo.id,
+		ksDoctype: documentToDelete.ingestionInfo.metadata.KsDoctype,
+		ksDocSource: documentToDelete.ingestionInfo.metadata.KsDocSource,
+		ksFileSource: documentToDelete.ingestionInfo.metadata.KsFileSource,
+		ksApplicationName: documentToDelete.ingestionInfo.metadata.KsApplicationName,
+	};
+
+	axios.post('http://localhost:8082/fe-api/vector-store/deleteRecords', requestPayload)
+		.then(response => {
+			console.log('Delete resource:', response.data)
+			ksdocuments.value = ksdocuments.value.filter(doc => doc.id !== id);
+		})
+		.catch(error => {
+			console.error('Error deleting records: ', error)
+		});
+}
+
+//ingestion
 const startIndividualngestion = (id) => {
 	axios.get(`http://localhost:8082/test/ingest_document/${id}`)
 		//axios.get('http://localhost:8082/test/ingestion_loop')
@@ -212,6 +285,7 @@ const startlngestion = () => {
 		});
 };
 
+//new record creation
 const newKsDocument = () => {
 	console.log('new');
 	router.push({ name: 'ks-document-new' });
diff --git a/src/views/pages/KsNewDocumentForm.vue b/src/views/pages/KsNewDocumentForm.vue
index 46defb0..688cf5e 100644
--- a/src/views/pages/KsNewDocumentForm.vue
+++ b/src/views/pages/KsNewDocumentForm.vue
@@ -8,71 +8,81 @@
         <form @submit.prevent="submitForm" class="p-fluid">
           <div class="lex flex-col md:flex-row gap-4">
             <div class="flex flex-wrap gap-2 w-full">
-              <label for="description">Description</label>
+              <label for="description" v-tooltip="'A brief overview of the system purpose and functionality.'">System
+                Description</label>
               <InputText id="description" type="text" v-model="formData.description" required class="w-full" />
             </div>
           </div>
 
           <div class="col-12 md:col-6 mb-4">
             <span class="p-float-label">
-              <label for="type">Type</label>
+              <label for="type"
+                v-tooltip="'Specify the type of file here. e.g, PDF Document, DOCX, TXT, MD Document etc..'">File
+                Type</label>
               <InputText id="type" v-model="formData.type" required class="w-full" />
             </span>
           </div>
 
           <div class="col-12 md:col-6 mb-4">
             <span class="p-float-label">
-              <label for="ksApplicationName">KS Application Name</label>
+              <label for="ksApplicationName" v-tooltip="'Enter the application name here.'">KS Application Name</label>
               <InputText id="ksApplicationName" v-model="formData.ksApplicationName" required class="w-full" />
             </span>
           </div>
 
           <div class="col-12 md:col-6 mb-4">
             <span class="p-float-label">
-              <label for="ksDocType">KS Doc Type</label>
+              <label for="ksDocType" v-tooltip="'Specify the type of document e.g, md, pdf,'">KS Document Type</label>
               <InputText id="ksDocType" v-model="formData.ksDocType" required class="w-full" />
             </span>
           </div>
 
           <div class="col-12 md:col-6 mb-4">
             <span class="p-float-label">
-              <label for="ksDocSource">KS Doc Source</label>
+              <label for="ksDocSource"
+                v-tooltip="'The KS Document Source field is intended to capture the origin or source from where the document was obtained or associated.  ex.. Retrieved from DevopsJ2Cloud Git Repository - CSV System Configuration '">KS
+                Document Source</label>
               <InputText id="ksDocSource" v-model="formData.ksDocSource" required class="w-full" />
             </span>
           </div>
 
           <div class="col-12 md:col-6 mb-4">
             <span class="p-float-label">
-              <label for="defaultChunkSize">Default Chunk Size</label>
+              <label for="defaultChunkSize" v-tooltip="'Define the default size for chunks of data.'">Default Chunk
+                Size</label>
               <InputNumber id="defaultChunkSize" v-model="formData.defaultChunkSize" required class="w-full" />
             </span>
           </div>
 
           <div class="col-12 md:col-6 mb-4">
             <span class="p-float-label">
-              <label for="minChunkSize">Min Chunk Size</label>
+              <label for="minChunkSize" v-tooltip="'Specify the minimum allowable size for chunks'">Min Chunk
+                Size</label>
               <InputNumber id="minChunkSize" v-model="formData.minChunkSize" required class="w-full" />
             </span>
           </div>
 
           <div class="col-12 md:col-6 mb-4">
             <span class="p-float-label">
-              <label for="maxNumberOfChunks">Max Number of Chunks</label>
+              <label for="maxNumberOfChunks" v-tooltip="'Set the maximum number of chunks allowed.'">Max Number of
+                Chunks</label>
               <InputNumber id="maxNumberOfChunks" v-model="formData.maxNumberOfChunks" required class="w-full" />
             </span>
           </div>
 
           <div class="col-12 md:col-6 mb-4">
             <span class="p-float-label">
-              <label for="minChunkSizeToEmbed">Min Chunk Size to Embed</label>
+              <label for="minChunkSizeToEmbed" v-tooltip="'Define the minimum chunk size that can be embedded.'">Min
+                Chunk Size to
+                Embed</label>
               <InputNumber id="minChunkSizeToEmbed" v-model="formData.minChunkSizeToEmbed" required class="w-full" />
             </span>
           </div>
 
           <div class="col-12 mb-4">
-            <label for="file" class="block text-lg mb-2">File</label>
+            <label for="file" class="block text-lg mb-2" v-tooltip="'Upload the file here.'">File</label>
             <div class="flex align-items-center">
-              <FileUpload ref="fileUpload" mode="basic" :maxFileSize="10000000" chooseLabel="Select File"
+              <FileUpload ref="fileUpload" mode="basic" :maxFileSize="10000000000" chooseLabel="Select File"
                 class="p-button-rounded" @select="onFileSelect" />
             </div>
           </div>
@@ -81,81 +91,6 @@
       </div>
     </div>
   </Fluid>
-  <!--div class="card-container">
-    <form @submit.prevent="submitForm" class="p-fluid">
-      <div class="grid">
-        <div class="col-12 mb-4">
-          <label for="file" class="block text-lg mb-2">File</label>
-          <div class="flex align-items-center">
-            <FileUpload
-              ref="fileUpload"
-              mode="basic"
-              :maxFileSize="10000000"
-              chooseLabel="Select File"
-              class="p-button-rounded"
-              @select="onFileSelect"
-            />
-
-          </div>
-        </div>
-        <div class="col-12 md:col-6 mb-4">
-          <span class="p-float-label">
-            <label for="description">Description</label>
-            <InputText id="description" v-model="formData.description" required class="w-full" />
-          </span>
-        </div>
-        <div class="col-12 md:col-6 mb-4">
-          <span class="p-float-label">
-            <label for="type">Type</label>
-            <InputText id="type" v-model="formData.type" required class="w-full" />
-          </span>
-        </div>
-        <div class="col-12 md:col-6 mb-4">
-          <span class="p-float-label">
-            <label for="ksApplicationName">KS Application Name</label>
-            <InputText id="ksApplicationName" v-model="formData.ksApplicationName" required class="w-full" />
-          </span>
-        </div>
-        <div class="col-12 md:col-6 mb-4">
-          <span class="p-float-label">
-            <label for="ksDocType">KS Doc Type</label>
-            <InputText id="ksDocType" v-model="formData.ksDocType" required class="w-full" />
-          </span>
-        </div>
-        <div class="col-12 md:col-6 mb-4">
-          <span class="p-float-label">
-            <label for="ksDocSource">KS Doc Source</label>
-            <InputText id="ksDocSource" v-model="formData.ksDocSource" required class="w-full" />
-          </span>
-        </div>
-        <div class="col-12 md:col-6 mb-4">
-          <span class="p-float-label">
-            <label for="defaultChunkSize">Default Chunk Size</label>
-            <InputNumber id="defaultChunkSize" v-model="formData.defaultChunkSize" required class="w-full" />
-          </span>
-        </div>
-        <div class="col-12 md:col-6 mb-4">
-          <span class="p-float-label">
-            <label for="minChunkSize">Min Chunk Size</label>
-            <InputNumber id="minChunkSize" v-model="formData.minChunkSize" required class="w-full" />
-          </span>
-        </div>
-        <div class="col-12 md:col-6 mb-4">
-          <span class="p-float-label">
-            <label for="maxNumberOfChunks">Max Number of Chunks</label>
-            <InputNumber id="maxNumberOfChunks" v-model="formData.maxNumberOfChunks" required class="w-full" />
-          </span>
-        </div>
-        <div class="col-12 md:col-6 mb-4">
-          <span class="p-float-label">
-            <label for="minChunkSizeToEmbed">Min Chunk Size to Embed</label>
-            <InputNumber id="minChunkSizeToEmbed" v-model="formData.minChunkSizeToEmbed" required class="w-full" />
-          </span>
-        </div>
-      </div>
-      <Button type="submit" label="Submit" class="p-button-rounded p-button-lg" />
-    </form>
-  </div-->
 </template>
 
 <script setup>
@@ -163,17 +98,18 @@ 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 formData = ref({
-  description: 'Test-UI-DevopsJ2CSystem',
+  description: 'Jenkins DevopsJ2Cloud System CSV configuration md file',
   ingestionStatus: 'NEW',
-  type: 'MD_DOCUMENT',
-  ksApplicationName: 'jenkins',
-  ksDocType: 'setup-documentation',
-  ksDocSource: 'guide-for-techincal-setup',
+  type: '.md file',
+  ksApplicationName: 'Jenkins-DevopsJ2Cloud',
+  ksDocType: 'md',
+  ksDocSource: 'Git Repository - DevopsJ2Cloud CSV System Configuration',
   defaultChunkSize: 1000,
   minChunkSize: 200,
   maxNumberOfChunks: 1000,
diff --git a/src/views/pages/KsSimilaritySearch.vue b/src/views/pages/KsSimilaritySearch.vue
index d3e18bb..502a0d9 100644
--- a/src/views/pages/KsSimilaritySearch.vue
+++ b/src/views/pages/KsSimilaritySearch.vue
@@ -2,31 +2,27 @@
   <Fluid>
     <h2 class="text-4xl font-semibold text-center mb-4">Similarity Search</h2>
     <div class="similarity-search">
-        <div v-if="messages.length > 0" class="results-container mt-6">
-            <Card v-for="(result, index) in messages" :key="index" class="result-card">
-              <template #content>
-                <ScrollPanel style="width: 100%; max-height: 400px">
-                  <CodeSnippet :code="dynamicCode" language="systemd" />
-                </ScrollPanel>
-              </template>
-            </Card>
-        </div>
-      
-        <div class="card-container flex flex-col gap-6">
-          <div class="flex flex-col gap-4">
-            <Textarea id="query" v-model="query" rows="6" placeholder="Enter your query..." class="input-textarea" />
-            <div class="select-container">
-              <SelectButton 
-                id="type" 
-                v-model="dropdownItem" 
-                :options="dropdownItems" 
-                optionLabel="name"
-                class="select-button"
-              />
-            </div>
+      <div class="card-container flex flex-col gap-6">
+        <div class="flex flex-col gap-4">
+          <Textarea id="query" v-model="query" rows="6" placeholder="Enter your query..." class="input-textarea" />
+          <div class="select-container">
+            <!--SelectButton id="type" v-model="dropdownItem" :options="dropdownItems" optionLabel="name"
+              class="select-button" /-->
+            <InputText v-model="filterQuery" type="text" placeholder="Add filterQuery" />
           </div>
-          <Button label="Send" icon="pi pi-send" @click="sendQuery" class="send-button" />
         </div>
+        <Button label="Query" icon="pi pi-send" @click="sendQuery" class="send-button" />
+      </div>
+
+      <div v-if="messages.length > 0" class="results-container mt-6">
+        <Card v-for="(result, index) in messages" :key="index" class="result-card">
+          <template #content>
+            <ScrollPanel style="width: 100%; max-height: 400px">
+              <CodeSnippet :code="dynamicCode" language="systemd" />
+            </ScrollPanel>
+          </template>
+        </Card>
+      </div>
     </div>
   </Fluid>
 </template>
@@ -45,6 +41,7 @@ const dropdownItem = ref(null);
 const messages = ref([]);
 const toast = useToast();
 const dynamicCode = ref('');
+const filterQuery = ref("'KsApplicationName' == 'atf'")
 
 const dropdownItems = [
   { name: 'Documentation', code: 'setup-documentation' },
@@ -53,9 +50,9 @@ const dropdownItems = [
 ];
 
 const sendQuery = async () => {
-  if (query.value.trim() !== '' && dropdownItem.value) {
+  if (query.value.trim() !== '' && filterQuery) {
     try {
-      const response = await fetch(`http://localhost:8082/test/query_vector?query="${query.value}"&type=${dropdownItem.value.code}`);
+      const response = await fetch(`http://localhost:8082/test/query_vector?query="${query.value}"&filterQuery=${filterQuery.value}`);
       const data = await response.json();
       console.log('API response:', data);
 
@@ -69,8 +66,8 @@ const sendQuery = async () => {
       console.error('Error sending query:', error);
       toast.add({ severity: 'error', summary: 'Error', detail: 'Failed to send query', life: 3000 });
     }
-    query.value = '';
-    dropdownItem.value = null;
+    //query.value = '';
+    //dropdownItem.value = null;
   } else {
     toast.add({ severity: 'warn', summary: 'Warning', detail: 'Please enter a query and select a type', life: 3000 });
   }
@@ -104,7 +101,8 @@ watch(messages, (newMessages) => {
 .input-textarea {
   width: 100%;
   resize: vertical;
-  min-height: 150px; /* Increased height for better readability */
+  min-height: 150px;
+  /* Increased height for better readability */
   border-radius: 8px;
   padding: 1rem;
   border: 1px solid #ccc;
diff --git a/src/views/pages/KsVectorData.vue b/src/views/pages/KsVectorData.vue
index db0fa7b..d4ce9cc 100644
--- a/src/views/pages/KsVectorData.vue
+++ b/src/views/pages/KsVectorData.vue
@@ -2,7 +2,7 @@
 	<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']">
+			:globalFilterFields="['id', 'metadata.ksApplicationName', 'metadata.ksDocSource', 'metadata.ksDoctype', 'metadata.ksFileSource']">
 			<template #header>
 				<div class="flex items-center justify-between gap-4 p-4 ">
 					<span class="text-xl font-bold">Vector Data</span>
@@ -26,7 +26,7 @@
 					<InputText v-model="filterModel.value" type="text" @input="filterCallback()" placeholder="Search By id" />
 				</template>
 			</Column>
-			<Column field="metadata.ksApplicationName" header="ksApplicationName" sortable>
+			<Column field="metadata.ksApplicationName" header="KsApplicationName" sortable>
 				<template #body="{ data }">
 					{{ data.metadata.ksApplicationName }}
 				</template>
@@ -35,7 +35,16 @@
 						placeholder="Search By Application name" />
 				</template>
 			</Column>
-			<Column field="metadata.ksDocSource" header="ksDocSource" sortable>
+			<Column field="metadata.ksFileSource" header="KsFileSource" sortable>
+				<template #body="{ data }">
+					{{ data.metadata.ksFileSource }}
+				</template>
+				<template #filter="{ filterModel, filterCallback }">
+					<InputText v-model="filterModel.value" type="text" @input="filterCallback()"
+						placeholder="Search By Source/Path" />
+				</template>
+			</Column>
+			<Column field="metadata.ksDocSource" header="KsDocSource" sortable>
 				<template #body="{ data }">
 					{{ data.metadata.ksDocSource }}
 				</template>
@@ -44,7 +53,7 @@
 						placeholder="Search By Document/Repo source" />
 				</template>
 			</Column>
-			<Column field="metadata.ksDoctype" header="ksDoctype" sortable>
+			<Column field="metadata.ksDoctype" header="KsDoctype" sortable>
 				<template #body="{ data }">
 					{{ data.metadata.ksDoctype }}
 				</template>
@@ -53,15 +62,6 @@
 						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>
@@ -90,7 +90,7 @@ const initFilters = () => {
 		'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 }] }
+		'metadata.ksFileSource': { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }] }
 	};
 };
 

From 71dadac7ce2594f1ad82d91c2581b75f9cba0610 Mon Sep 17 00:00:00 2001
From: sumedh <s.shamrao.shinde@accenture.com>
Date: Thu, 8 Aug 2024 13:17:22 +0530
Subject: [PATCH 07/14] authentication done

---
 package-lock.json              | 20 +++++++-
 package.json                   |  3 ++
 src/layout/AppProfileMenu.vue  | 18 +++++++
 src/layout/AppTopbar.vue       | 44 +++++++----------
 src/main.js                    | 31 ++++++++++++
 src/router/index.js            | 56 ++++++++++++----------
 src/views/pages/auth/Login.vue | 88 +++++++++++++++++++++-------------
 7 files changed, 175 insertions(+), 85 deletions(-)
 create mode 100644 src/layout/AppProfileMenu.vue

diff --git a/package-lock.json b/package-lock.json
index f9b9fe1..cf81486 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,7 @@
             "version": "4.0.0",
             "dependencies": {
                 "@primevue/themes": "^4.0.0",
+                "@websanova/vue-auth": "^4.2.1",
                 "axios": "^1.7.2",
                 "chart.js": "3.3.2",
                 "moment": "^2.30.1",
@@ -16,6 +17,7 @@
                 "primevue": "^4.0.0",
                 "prismjs": "^1.29.0",
                 "vue": "^3.4.34",
+                "vue-authenticate-2": "^2.2.0",
                 "vue-router": "^4.4.0"
             },
             "devDependencies": {
@@ -924,7 +926,6 @@
             "cpu": [
                 "x64"
             ],
-            "dev": true,
             "optional": true,
             "os": [
                 "linux"
@@ -1123,6 +1124,11 @@
             "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.4.34.tgz",
             "integrity": "sha512-x5LmiRLpRsd9KTjAB8MPKf0CDPMcuItjP0gbNqFCIgL1I8iYp4zglhj9w9FPCdIbHG2M91RVeIbArFfFTz9I3A=="
         },
+        "node_modules/@websanova/vue-auth": {
+            "version": "4.2.1",
+            "resolved": "https://registry.npmjs.org/@websanova/vue-auth/-/vue-auth-4.2.1.tgz",
+            "integrity": "sha512-gc4WL3WzJMkj3wZmrBAP7U7WBAcVY0/a/YhCzMVR/iA1u/8QJlugq/320CRRbZ0Acz+qbGPhdm07IRE3U053yg=="
+        },
         "node_modules/acorn": {
             "version": "8.12.1",
             "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.12.1.tgz",
@@ -3783,6 +3789,18 @@
                 }
             }
         },
+        "node_modules/vue-authenticate-2": {
+            "version": "2.2.0",
+            "resolved": "https://registry.npmjs.org/vue-authenticate-2/-/vue-authenticate-2-2.2.0.tgz",
+            "integrity": "sha512-4jk9Wv/bV6Bfk6LWQp5WESCe6hxkBrCQThFYqkg9F70q6auEDcdwzo2cVYWPFTwQE5UFX8C9MJUC2Wx6OYwdhw==",
+            "optionalDependencies": {
+                "@rollup/rollup-linux-x64-gnu": "^4.9.5"
+            },
+            "peerDependencies": {
+                "axios": "^1.6.7",
+                "vue": "^3.4.21"
+            }
+        },
         "node_modules/vue-eslint-parser": {
             "version": "9.4.3",
             "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-9.4.3.tgz",
diff --git a/package.json b/package.json
index db99a80..1f38e8b 100644
--- a/package.json
+++ b/package.json
@@ -9,12 +9,15 @@
     },
     "dependencies": {
         "@primevue/themes": "^4.0.0",
+        "@websanova/vue-auth": "^4.2.1",
         "axios": "^1.7.2",
         "chart.js": "3.3.2",
         "moment": "^2.30.1",
         "primeicons": "^6.0.1",
         "primevue": "^4.0.0",
         "vue": "^3.4.34",
+        "prismjs": "^1.29.0",
+        "vue-authenticate-2": "^2.2.0",
         "vue-router": "^4.4.0"
     },
     "devDependencies": {
diff --git a/src/layout/AppProfileMenu.vue b/src/layout/AppProfileMenu.vue
new file mode 100644
index 0000000..4890963
--- /dev/null
+++ b/src/layout/AppProfileMenu.vue
@@ -0,0 +1,18 @@
+<script setup>
+
+import { ref } from 'vue';
+import { useAuth } from '@websanova/vue-auth/src/v3.js';
+const auth = useAuth();
+
+</script>
+
+<template>
+    <div class="config-panel hidden">
+        <div class="config-panel-content">
+            <span class="config-panel-label">Welcome </span>
+
+            {{ auth.user().name + " " + auth.user().surname }}
+            <button @click="auth.logout()" class="p-button p-button-danger p-button-outlined">Logout</button>
+        </div>
+    </div>
+</template>
\ No newline at end of file
diff --git a/src/layout/AppTopbar.vue b/src/layout/AppTopbar.vue
index e52fb88..c87dce4 100644
--- a/src/layout/AppTopbar.vue
+++ b/src/layout/AppTopbar.vue
@@ -3,6 +3,9 @@ import { useLayout } from '@/layout/composables/layout';
 import AppConfigurator from './AppConfigurator.vue';
 
 const { onMenuToggle, toggleDarkMode, isDarkTheme } = useLayout();
+import { useAuth } from '@websanova/vue-auth/src/v3.js';
+import AppProfileMenu from './AppProfileMenu.vue';
+const auth = useAuth();
 </script>
 
 <template>
@@ -10,20 +13,16 @@ const { onMenuToggle, toggleDarkMode, isDarkTheme } = useLayout();
         <div class="layout-topbar-logo-container">
             <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"
+                    <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)"
-                    />
+                        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" />
+                        <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)"
-                    />
+                        fill="var(--primary-color)" mask="url(#path-2-inside-1)" />
                 </svg>
 
                 <span>APOLLO</span>
@@ -42,36 +41,29 @@ const { onMenuToggle, toggleDarkMode, isDarkTheme } = useLayout();
                 <div class="relative">
                     <button
                         v-styleclass="{ selector: '@next', enterFromClass: 'hidden', enterActiveClass: 'animate-scalein', leaveToClass: 'hidden', leaveActiveClass: 'animate-fadeout', hideOnOutsideClick: true }"
-                        type="button"
-                        class="layout-topbar-action layout-topbar-action-highlight"
-                    >
+                        type="button" class="layout-topbar-action layout-topbar-action-highlight">
                         <i class="pi pi-palette"></i>
                     </button>
                     <AppConfigurator />
                 </div>
             </div>
 
-            <button
-                class="layout-topbar-menu-button layout-topbar-action"
-                v-styleclass="{ selector: '@next', enterFromClass: 'hidden', enterActiveClass: 'animate-scalein', leaveToClass: 'hidden', leaveActiveClass: 'animate-fadeout', hideOnOutsideClick: true }"
-            >
+            <button class="layout-topbar-menu-button layout-topbar-action"
+                v-styleclass="{ selector: '@next', enterFromClass: 'hidden', enterActiveClass: 'animate-scalein', leaveToClass: 'hidden', leaveActiveClass: 'animate-fadeout', hideOnOutsideClick: true }">
                 <i class="pi pi-ellipsis-v"></i>
             </button>
 
             <div class="layout-topbar-menu hidden lg:block">
                 <div class="layout-topbar-menu-content">
-                    <button type="button" class="layout-topbar-action">
-                        <i class="pi pi-calendar"></i>
-                        <span>Calendar</span>
-                    </button>
-                    <button type="button" class="layout-topbar-action">
-                        <i class="pi pi-inbox"></i>
-                        <span>Messages</span>
-                    </button>
-                    <button type="button" class="layout-topbar-action">
+
+                    <button
+                        v-styleclass="{ selector: '@next', enterFromClass: 'hidden', enterActiveClass: 'animate-scalein', leaveToClass: 'hidden', leaveActiveClass: 'animate-fadeout', hideOnOutsideClick: true }"
+                        type="button" class="layout-topbar-action ">
                         <i class="pi pi-user"></i>
-                        <span>Profile</span>
                     </button>
+                    <AppProfileMenu />
+
+
                 </div>
             </div>
         </div>
diff --git a/src/main.js b/src/main.js
index 2a2e682..22b10db 100644
--- a/src/main.js
+++ b/src/main.js
@@ -11,10 +11,41 @@ import BlockViewer from '@/components/BlockViewer.vue';
 
 import '@/assets/styles.scss';
 import '@/assets/tailwind.css';
+import axios from 'axios';
+
+import { createAuth } from '@websanova/vue-auth';
+import driverAuthBearer from '@websanova/vue-auth/dist/drivers/auth/bearer.esm.js';
+import driverHttpAxios from '@websanova/vue-auth/dist/drivers/http/axios.1.x.esm.js';
+import driverRouterVueRouter from '@websanova/vue-auth/dist/drivers/router/vue-router.2.x.esm.js';
+
+
+var auth = createAuth({
+    plugins: {
+        http: axios,
+        router: router
+    },
+    drivers: {
+        http: driverHttpAxios,
+        auth: driverAuthBearer,
+        router: driverRouterVueRouter
+    },
+    options:{
+        notFoundRedirect: '/auth/login',
+        authRedirect: '/auth/login',
+        loginData: {url: 'api/auth/login', method: 'POST', redirect: '/'},
+        fetchData: {url: 'api/auth/fetch-user', method: 'GET', enabled: true},
+        refreshData: {url: 'api/auth/refresh-token', method: 'GET', enabled: true}
+    }
+});
+
+
+axios.defaults.baseURL ='http://localhost:8082' // import.meta.env.VITE_BACKEND_URL;
+console.log(import.meta.env.VITE_BACKEND_URL);
 
 const app = createApp(App);
 
 app.use(router);
+app.use(auth);
 app.use(PrimeVue, {
     theme: {
         preset: Aura,
diff --git a/src/router/index.js b/src/router/index.js
index 210ce1b..c2e7aec 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -2,32 +2,38 @@ import AppLayout from '@/layout/AppLayout.vue';
 import { createRouter, createWebHistory } from 'vue-router';
 
 const router = createRouter({
-    history: createWebHistory(),
-    routes: [
+  history: createWebHistory(),
+  routes: [
+    {
+      path: '/',
+      component: AppLayout,
+      meta: {
+        auth: true
+      },
+      children: [
         {
-            path: '/',
-            component: AppLayout,
-            children: [
-                {
-                    path: '/',
-                    name: 'dashboard',
-                    component: () => import('@/views/Dashboard.vue')
-                },
-                {
-                    path: '/ksdocuments', 
-                    children: [
-                        {path: '', name: 'ks-document', component: () => import('@/views/pages/KsDocuments.vue')},
-                        {path: 'new', name: 'ks-document-new', component: () => import('@/views/pages/KsNewDocumentForm.vue')},
-                        //{path: ':id', name: 'ks-document-edit', component: () => import('@/views/pages/KsEditDocumentForm.vue')},
-                        {path: '/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')}
-        
-                    ]
-   
-                },
-                            ]
-        }
-    ]
+          path: '/',
+          name: 'dashboard',
+          component: () => import('@/views/Dashboard.vue')
+        },
+        {
+          path: '/ksdocuments', 
+          children: [
+            {path: '', name: 'ks-document', component: () => import('@/views/pages/KsDocuments.vue')},
+            {path: 'new', name: 'ks-document-new', component: () => import('@/views/pages/KsNewDocumentForm.vue')},
+            //{path: ':id', name: 'ks-document-edit', component: () => import('@/views/pages/KsEditDocumentForm.vue')},
+            {path: '/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')}
+          ]
+        },
+      ]
+    },
+    {
+      path: '/auth/login',
+      name: 'login',
+      component: () => import('@/views/pages/auth/Login.vue')
+    },
+  ]
 });
 
 export default router;
diff --git a/src/views/pages/auth/Login.vue b/src/views/pages/auth/Login.vue
index a665c95..1d75e71 100644
--- a/src/views/pages/auth/Login.vue
+++ b/src/views/pages/auth/Login.vue
@@ -1,59 +1,81 @@
 <script setup>
 import { useLayout } from '@/layout/composables/layout';
 import { computed, ref } from 'vue';
+import {useAuth  } from '@websanova/vue-auth/src/v3.js';
+const auth     = useAuth();
 
 const { isDarkTheme } = useLayout();
-const email = ref('');
+const username =  ref('');
 const password = ref('');
-const checked = ref(false);
 
 const logoUrl = computed(() => {
-    return `/layout/images/${isDarkTheme ? 'logo-white' : 'logo-dark'}.svg`;
+  return `/layout/images/${isDarkTheme ? 'logo-white' : 'logo-dark'}.svg`;
 });
+
+const login = () => {
+  console.log('Username: ', username.value);
+
+  auth.login({
+    data: {
+      "username": username.value,
+      "password": password.value
+    },
+    redirect: '/ksdocuments',
+    fetchUser: true,
+    url: '/api/auth/login'
+  });
+
+}
 </script>
 
 <template>
-    <div class="bg-surface-50 dark:bg-surface-950 flex items-center justify-center min-h-screen min-w-[100vw] overflow-hidden">
-        <div class="flex flex-col items-center justify-center">
-            <img :src="logoUrl" alt="Sakai logo" class="mb-8 w-24 shrink-0" />
-            <div 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="/demo/images/login/avatar.png" alt="Image" height="50" class="mb-4" />
-                        <div class="text-surface-900 dark:text-surface-0 text-3xl font-medium mb-4">Welcome, Isabel!</div>
-                        <span class="text-surface-600 dark:text-surface-200 font-medium">Sign in to continue</span>
-                    </div>
+  <div
+    class="bg-surface-50 dark:bg-surface-950 flex items-center justify-center min-h-screen min-w-[100vw] overflow-hidden">
+    <div class="flex flex-col items-center justify-center">
 
-                    <div>
-                        <label for="email1" class="block text-surface-900 dark:text-surface-0 text-xl font-medium mb-2">Email</label>
-                        <InputText id="email1" type="text" placeholder="Email address" class="w-full md:w-[30rem] mb-8" style="padding: 1rem" v-model="email" />
+      <div
+        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">
+            <span class="text-surface-600 dark:text-surface-200 font-medium">Welcome to Apollo- The Knowledge
+              Source</span>
+          </div>
 
-                        <label for="password1" class="block text-surface-900 dark:text-surface-0 font-medium text-xl mb-2">Password</label>
-                        <Password id="password1" v-model="password" placeholder="Password" :toggleMask="true" class="w-full mb-4" inputClass="w-full" :inputStyle="{ padding: '1rem' }"></Password>
+          <div>
+            <label for="email1"
+              class="block text-surface-900 dark:text-surface-0 text-xl font-medium mb-2">Username</label>
+            <InputText id="email1" type="text" placeholder="Username" class="w-full md:w-[30rem] mb-8"
+              style="padding: 1rem" v-model="username" />
 
-                        <div class="flex items-center justify-between mb-8 gap-8">
-                            <div class="flex items-center">
-                                <Checkbox v-model="checked" id="rememberme1" binary class="mr-2"></Checkbox>
-                                <label for="rememberme1">Remember me</label>
-                            </div>
-                            <a class="font-medium no-underline ml-2 text-right cursor-pointer" style="color: var(--primary-color)">Forgot password?</a>
-                        </div>
-                        <Button label="Sign In" class="w-full p-4 text-xl"></Button>
-                    </div>
-                </div>
-            </div>
+            <label for="password1"
+              class="block text-surface-900 dark:text-surface-0 font-medium text-xl mb-2">Password</label>
+            <Password id="password1" v-model="password" placeholder="Password" :toggleMask="true" class="w-full mb-4"
+              inputClass="w-full" :inputStyle="{ padding: '1rem' }"></Password>
+
+            <!--div class="flex items-center justify-between mb-8 gap-8">
+              <div class="flex items-center">
+                <Checkbox v-model="checked" id="rememberme1" binary class="mr-2"></Checkbox>
+                <label for="rememberme1">Remember me</label>
+              </div>
+              <a class="font-medium no-underline ml-2 text-right cursor-pointer"
+                style="color: var(--primary-color)">Forgot password?</a>
+            </div> -->
+            <Button label="Sign In" @click="login" class="w-full p-4 text-xl"></Button>
+          </div>
         </div>
+      </div>
     </div>
+  </div>
 </template>
 
 <style scoped>
 .pi-eye {
-    transform: scale(1.6);
-    margin-right: 1rem;
+  transform: scale(1.6);
+  margin-right: 1rem;
 }
 
 .pi-eye-slash {
-    transform: scale(1.6);
-    margin-right: 1rem;
+  transform: scale(1.6);
+  margin-right: 1rem;
 }
 </style>

From a47c1291ab2a4f136ea517985348cdc5685be1f8 Mon Sep 17 00:00:00 2001
From: Sumedh <s.shamrao.shinde@accenture.com>
Date: Thu, 8 Aug 2024 12:54:03 +0000
Subject: [PATCH 08/14] Dockerfile created

---
 Dockerfile | 26 ++++++++++++++++++++++++++
 1 file changed, 26 insertions(+)
 create mode 100644 Dockerfile

diff --git a/Dockerfile b/Dockerfile
new file mode 100644
index 0000000..9456250
--- /dev/null
+++ b/Dockerfile
@@ -0,0 +1,26 @@
+FROM node:latest as builder
+
+# automatically creates the dir and sets it as the current working dir
+WORKDIR /usr/src/app
+# this will allow us to run vite and other tools directly
+ENV PATH /usr/src/node_modules/.bin:$PATH
+
+# inject all environment vars we'll need
+ARG VITE_BACKEND_URL
+ENV VITE_BACKEND_URL=$VITE_BACKEND_URL
+
+COPY package.json ./
+
+RUN npm install
+
+COPY . ./
+
+FROM builder as prod-builder
+RUN npm run build
+
+# it's a good idea to pin this, but for demo purposes we'll leave it as is
+FROM nginx:latest as prod
+
+COPY --from=prod-builder /usr/src/app/dist /usr/share/nginx/html
+
+CMD ["nginx", "-g", "daemon off;"]
\ No newline at end of file

From f9c82f95596692e2d0d716c2c2c83d46eeecf592 Mon Sep 17 00:00:00 2001
From: Sumedh <s.shamrao.shinde@accenture.com>
Date: Thu, 8 Aug 2024 12:57:46 +0000
Subject: [PATCH 09/14] Update .gitlab-ci.yml file

---
 .gitlab-ci.yml | 46 ++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 46 insertions(+)
 create mode 100644 .gitlab-ci.yml

diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml
new file mode 100644
index 0000000..d25fd94
--- /dev/null
+++ b/.gitlab-ci.yml
@@ -0,0 +1,46 @@
+# This file is a template, and might need editing before it works on your project.
+# To contribute improvements to CI/CD templates, please follow the Development guide at:
+# https://docs.gitlab.com/ee/development/cicd/templates.html
+# This specific template is located at:
+# https://gitlab.com/gitlab-org/gitlab/-/blob/master/lib/gitlab/ci/templates/Docker.gitlab-ci.yml
+
+# Build a Docker image with CI/CD and push to the GitLab registry.
+# Docker-in-Docker documentation: https://docs.gitlab.com/ee/ci/docker/using_docker_build.html
+#
+# This template uses one generic job with conditional builds
+# for the default branch and all other (MR) branches.
+
+docker-build:
+  # Use the official docker image.
+  image: gcr.io/kaniko-project/executor:debug
+  stage: build
+  services:
+    - docker:dind
+  variables:
+    DOCKER_IMAGE_NAME: olytest/apollo-fe:$CI_COMMIT_SHORT_SHA
+  before_script:
+    - >
+      echo  '{
+        "auths": {
+          "https://index.docker.io/v1/": {
+            "auth": "b2x5dGVzdDpkY2tyX3BhdF9ZUFBCa21IVlVkbmx4R3dLT0t1TEtmQ1RTVTg="
+          }
+        }
+      } ' >> /kaniko/.docker/config.json
+
+  # All branches are tagged with $DOCKER_IMAGE_NAME (defaults to commit ref slug)
+  # Default branch is also tagged with `latest`
+  script:
+     - /kaniko/executor
+      --context "${CI_PROJECT_DIR}"
+      --dockerfile "${CI_PROJECT_DIR}/Dockerfile"
+      --destination "${DOCKER_IMAGE_NAME}"
+      --build-arg "VITE_BACKEND_URL=http://localhost:8082"
+
+  # Run this job in a branch where a Dockerfile exists
+  rules:
+    - if: $CI_COMMIT_BRANCH
+      exists:
+        - Dockerfile
+  tags:
+    - OLYMPUS
\ No newline at end of file

From e06e348bf94d17dbed39277c02557840432c08a1 Mon Sep 17 00:00:00 2001
From: sumedh <s.shamrao.shinde@accenture.com>
Date: Thu, 8 Aug 2024 19:18:37 +0530
Subject: [PATCH 10/14] localhost removed

---
 src/main.js                            |  3 +++
 src/views/pages/KsDocuments.vue        | 10 +++++-----
 src/views/pages/KsNewDocumentForm.vue  |  2 +-
 src/views/pages/KsSimilaritySearch.vue |  2 +-
 src/views/pages/KsVectorData.vue       |  2 +-
 5 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/src/main.js b/src/main.js
index 22b10db..d18928f 100644
--- a/src/main.js
+++ b/src/main.js
@@ -13,6 +13,9 @@ import '@/assets/styles.scss';
 import '@/assets/tailwind.css';
 import axios from 'axios';
 
+axios.defaults.baseURL = import.meta.env.VITE_BACKEND_URL; //'http://localhost:8082'
+console.log(import.meta.env.VITE_BACKEND_URL);
+
 import { createAuth } from '@websanova/vue-auth';
 import driverAuthBearer from '@websanova/vue-auth/dist/drivers/auth/bearer.esm.js';
 import driverHttpAxios from '@websanova/vue-auth/dist/drivers/http/axios.1.x.esm.js';
diff --git a/src/views/pages/KsDocuments.vue b/src/views/pages/KsDocuments.vue
index aae2406..21dc312 100644
--- a/src/views/pages/KsDocuments.vue
+++ b/src/views/pages/KsDocuments.vue
@@ -155,7 +155,7 @@ initFilters();
 const statuses = ref(['NEW', 'INGESTED', 'FAILED']); // Add your statuses here
 
 onMounted(() => {
-	axios.get('http://localhost:8082/fe-api/ksdocuments')
+	axios.get('/fe-api/ksdocuments')
 		.then(response => {
 			ksdocuments.value = getCustomDatewithAllResponse(response.data);
 			console.log(ksdocuments.value);
@@ -231,7 +231,7 @@ const deleteRecordsFromVectorStore = (id) => {
 		ksApplicationName: documentToDelete.ingestionInfo.metadata.KsApplicationName,
 	};
 
-	axios.post('http://localhost:8082/fe-api/vector-store/deleteRecords', 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);
@@ -243,8 +243,8 @@ const deleteRecordsFromVectorStore = (id) => {
 
 //ingestion
 const startIndividualngestion = (id) => {
-	axios.get(`http://localhost:8082/test/ingest_document/${id}`)
-		//axios.get('http://localhost:8082/test/ingestion_loop')
+	axios.get(`/test/ingest_document/${id}`)
+		//axios.get('/test/ingestion_loop')
 		.then(response => {
 			ingestionResult.value = response.data;
 			if (response.data.status == "OK") {
@@ -265,7 +265,7 @@ const startIndividualngestion = (id) => {
 };
 
 const startlngestion = () => {
-	axios.get('http://localhost:8082/test/ingestion_loop')
+	axios.get('/test/ingestion_loop')
 		.then(response => {
 			ingestionResult.value = response.data;
 			if (response.data.status == "OK") {
diff --git a/src/views/pages/KsNewDocumentForm.vue b/src/views/pages/KsNewDocumentForm.vue
index 688cf5e..0d96c2c 100644
--- a/src/views/pages/KsNewDocumentForm.vue
+++ b/src/views/pages/KsNewDocumentForm.vue
@@ -142,7 +142,7 @@ const submitForm = async () => {
   formDataToSend.append('minChunkSizeToEmbed', formData.value.minChunkSizeToEmbed);
 
   try {
-    const response = await axios.post('http://localhost:8082/upload', formDataToSend, {
+    const response = await axios.post('/upload', formDataToSend, {
       headers: {
         'Content-Type': 'multipart/form-data'
       }
diff --git a/src/views/pages/KsSimilaritySearch.vue b/src/views/pages/KsSimilaritySearch.vue
index 502a0d9..a295b8e 100644
--- a/src/views/pages/KsSimilaritySearch.vue
+++ b/src/views/pages/KsSimilaritySearch.vue
@@ -52,7 +52,7 @@ const dropdownItems = [
 const sendQuery = async () => {
   if (query.value.trim() !== '' && filterQuery) {
     try {
-      const response = await fetch(`http://localhost:8082/test/query_vector?query="${query.value}"&filterQuery=${filterQuery.value}`);
+      const response = await fetch(`/test/query_vector?query="${query.value}"&filterQuery=${filterQuery.value}`);
       const data = await response.json();
       console.log('API response:', data);
 
diff --git a/src/views/pages/KsVectorData.vue b/src/views/pages/KsVectorData.vue
index d4ce9cc..7a1f09d 100644
--- a/src/views/pages/KsVectorData.vue
+++ b/src/views/pages/KsVectorData.vue
@@ -75,7 +75,7 @@ const loading = ref(true);
 const filters = ref();
 
 onMounted(() => {
-	axios.get('http://localhost:8082/fe-api/vector-store/details')
+	axios.get('/fe-api/vector-store/details')
 		.then(response => {
 			vectorDetails.value = response.data;
 			console.log(vectorDetails.value)

From 92b10fa499456e6d4922f93239a28063c9b9a067 Mon Sep 17 00:00:00 2001
From: Sumedh <s.shamrao.shinde@accenture.com>
Date: Thu, 8 Aug 2024 13:57:05 +0000
Subject: [PATCH 11/14] Update .gitlab-ci.yml file

---
 .gitlab-ci.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml
index d25fd94..36e50e0 100644
--- a/.gitlab-ci.yml
+++ b/.gitlab-ci.yml
@@ -35,7 +35,7 @@ docker-build:
       --context "${CI_PROJECT_DIR}"
       --dockerfile "${CI_PROJECT_DIR}/Dockerfile"
       --destination "${DOCKER_IMAGE_NAME}"
-      --build-arg "VITE_BACKEND_URL=http://localhost:8082"
+      --build-arg "VITE_BACKEND_URL=https://apollo-2wwkklgrpq-uc.a.run.app"
 
   # Run this job in a branch where a Dockerfile exists
   rules:

From d220920dcff9813308a0b970cc9ce5ce0f6e37ff Mon Sep 17 00:00:00 2001
From: Sumedh <s.shamrao.shinde@accenture.com>
Date: Thu, 8 Aug 2024 14:18:54 +0000
Subject: [PATCH 12/14] Update .gitlab-ci.yml file

---
 .gitlab-ci.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml
index 36e50e0..351f3ef 100644
--- a/.gitlab-ci.yml
+++ b/.gitlab-ci.yml
@@ -35,7 +35,7 @@ docker-build:
       --context "${CI_PROJECT_DIR}"
       --dockerfile "${CI_PROJECT_DIR}/Dockerfile"
       --destination "${DOCKER_IMAGE_NAME}"
-      --build-arg "VITE_BACKEND_URL=https://apollo-2wwkklgrpq-uc.a.run.app"
+      --build-arg "VITE_BACKEND_URL=https://apollo-nu6mvqujsq-ey.a.run.app"
 
   # Run this job in a branch where a Dockerfile exists
   rules:

From 174106af5b61f89e2b1460bf5d1c88533e2397f6 Mon Sep 17 00:00:00 2001
From: Sumedh <s.shamrao.shinde@accenture.com>
Date: Thu, 8 Aug 2024 14:35:57 +0000
Subject: [PATCH 13/14] extra baseURL removed

---
 src/main.js | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/main.js b/src/main.js
index d18928f..910ed37 100644
--- a/src/main.js
+++ b/src/main.js
@@ -16,6 +16,7 @@ import axios from 'axios';
 axios.defaults.baseURL = import.meta.env.VITE_BACKEND_URL; //'http://localhost:8082'
 console.log(import.meta.env.VITE_BACKEND_URL);
 
+
 import { createAuth } from '@websanova/vue-auth';
 import driverAuthBearer from '@websanova/vue-auth/dist/drivers/auth/bearer.esm.js';
 import driverHttpAxios from '@websanova/vue-auth/dist/drivers/http/axios.1.x.esm.js';
@@ -41,10 +42,6 @@ var auth = createAuth({
     }
 });
 
-
-axios.defaults.baseURL ='http://localhost:8082' // import.meta.env.VITE_BACKEND_URL;
-console.log(import.meta.env.VITE_BACKEND_URL);
-
 const app = createApp(App);
 
 app.use(router);

From 55dd8ce8a309e04067ac46da4089a7806b0ef0be Mon Sep 17 00:00:00 2001
From: sumedh <s.shamrao.shinde@accenture.com>
Date: Fri, 9 Aug 2024 00:21:52 +0530
Subject: [PATCH 14/14] in similarity search axios is used

---
 .gitlab-ci.yml                         |  1 +
 src/views/pages/KsDocuments.vue        | 31 +++++++++++++++-----------
 src/views/pages/KsNewDocumentForm.vue  | 26 +++++++++++++--------
 src/views/pages/KsSimilaritySearch.vue | 23 +++++++++++--------
 4 files changed, 50 insertions(+), 31 deletions(-)

diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml
index 351f3ef..473aefe 100644
--- a/.gitlab-ci.yml
+++ b/.gitlab-ci.yml
@@ -42,5 +42,6 @@ docker-build:
     - if: $CI_COMMIT_BRANCH
       exists:
         - Dockerfile
+  when: manual
   tags:
     - OLYMPUS
\ No newline at end of file
diff --git a/src/views/pages/KsDocuments.vue b/src/views/pages/KsDocuments.vue
index 21dc312..10dddc8 100644
--- a/src/views/pages/KsDocuments.vue
+++ b/src/views/pages/KsDocuments.vue
@@ -23,12 +23,12 @@
 			</template>
 			<template #empty>No Records found</template>
 			<template #loading>Loading Data. Please wait....</template>
-			<Column field="id" header="id" sortable style="min-width: 12rem">
+			<!--Column field="id" header="id" sortable style="min-width: 12rem">
 				<template #body="slotProps">
 					<Tag>ksdocuments: {{ slotProps.data.id }}</Tag>
 					<Tag>ksingestioninfo: {{ slotProps.data.ingestionInfo.id }}</Tag>
 				</template>
-			</Column>
+			</Column-->
 			<!--Column field="ingestionInfo.id" header="ksingestioninfo id" sortable style="min-width: 12rem" /-->
 			<Column field="ingestionInfo.metadata.KsApplicationName" header="KSApplicationName" sortable
 				style="min-width: 12rem">
@@ -80,21 +80,21 @@
 			</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" />
+					<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'"
-							:class="{ 'p-button-danger': slotProps.data.ingestionStatus === 'INGESTED' }" class="mr-7" />
+							:class="{ 'p-button-danger': slotProps.data.ingestionStatus === 'INGESTED' }" />
 						<Button type="button" icon="pi pi-trash" rounded @click="showConfirmDialog(slotProps.data.id)"
 							v-tooltip="'Delete the ingested Record'" :disabled="slotProps.data.ingestionStatus === 'NEW'"
-							:class="{ 'p-button-danger': slotProps.data.ingestionStatus === 'NEW' }" class="mr-7" />
+							:class="{ 'p-button-danger': slotProps.data.ingestionStatus === 'NEW' }" />
 
 						<Dialog header="Confirm Deletion" :visible="confirmDialogVisible" modal @hide="resetConfirmDialog"
 							:style="{ width: '300px' }">
 							<p>Are you sure you want to delete this record?</p>
 							<template #footer>
-								<Button label="No" icon="pi pi-times" @click="confirmDialogVisible = false" class="p-button-text" />
+								<Button label="No" icon="pi pi-times" @click="confirmDialogVisible = false"/>
 								<Button label="Yes" icon="pi pi-check" @click="confirmDelete" class="p-button-danger" />
 							</template>
 						</Dialog>
@@ -301,17 +301,22 @@ function formatDate(dateString) {
 </script>
 
 <style scoped>
+/* Add this to ensure buttons are spaced consistently */
+.space-x-3 > * + * {
+  margin-left: 1rem; /* Adjust as needed for desired spacing */
+}
+
 /* Custom styling for disabled red button */
 .p-button-danger {
-	background-color: red;
-	border-color: red;
-	color: white;
+	background-color: white;
+	border-color: blue;
+	color: black;
 }
 
 .p-button-danger:disabled {
-	background-color: red;
+	/*background-color: red;*/
 	border-color: red;
-	color: white;
+	color: red;
 	cursor: not-allowed;
 }
 </style>
diff --git a/src/views/pages/KsNewDocumentForm.vue b/src/views/pages/KsNewDocumentForm.vue
index 0d96c2c..9edac9a 100644
--- a/src/views/pages/KsNewDocumentForm.vue
+++ b/src/views/pages/KsNewDocumentForm.vue
@@ -6,12 +6,12 @@
           <h2 class="text-3xl font-bold mb-4">Ks document</h2>
         </div>
         <form @submit.prevent="submitForm" class="p-fluid">
-          <div class="lex flex-col md:flex-row gap-4">
-            <div class="flex flex-wrap gap-2 w-full">
+          <div class="col-12 md:col-6 mb-4">
+            <span class="p-float-label">
               <label for="description" v-tooltip="'A brief overview of the system purpose and functionality.'">System
                 Description</label>
               <InputText id="description" type="text" v-model="formData.description" required class="w-full" />
-            </div>
+            </span>
           </div>
 
           <div class="col-12 md:col-6 mb-4">
@@ -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>
-              <InputText id="ksDocType" v-model="formData.ksDocType" required class="w-full" />
+              <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>
 
@@ -103,13 +104,20 @@ 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' }
+]);
+
 const formData = ref({
-  description: 'Jenkins DevopsJ2Cloud System CSV configuration md file',
+  description: '', //Jenkins DevopsJ2Cloud System CSV configuration md file
   ingestionStatus: 'NEW',
-  type: '.md file',
-  ksApplicationName: 'Jenkins-DevopsJ2Cloud',
-  ksDocType: 'md',
-  ksDocSource: 'Git Repository - DevopsJ2Cloud CSV System Configuration',
+  type: '', //.md file
+  ksApplicationName: '', //Jenkins-DevopsJ2Cloud
+  ksDocType: '',
+  ksDocSource: '', //Git Repository - DevopsJ2Cloud CSV System Configuration
   defaultChunkSize: 1000,
   minChunkSize: 200,
   maxNumberOfChunks: 1000,
diff --git a/src/views/pages/KsSimilaritySearch.vue b/src/views/pages/KsSimilaritySearch.vue
index a295b8e..409e27b 100644
--- a/src/views/pages/KsSimilaritySearch.vue
+++ b/src/views/pages/KsSimilaritySearch.vue
@@ -35,13 +35,14 @@ 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';
 
 const query = ref('');
 const dropdownItem = ref(null);
 const messages = ref([]);
 const toast = useToast();
 const dynamicCode = ref('');
-const filterQuery = ref("'KsApplicationName' == 'atf'")
+const filterQuery = ref("'KsApplicationName' == 'ATF'")
 
 const dropdownItems = [
   { name: 'Documentation', code: 'setup-documentation' },
@@ -49,11 +50,16 @@ const dropdownItems = [
   { name: 'SourceCode', code: 'sourcecode' }
 ];
 
-const sendQuery = async () => {
+const sendQuery = () => {
   if (query.value.trim() !== '' && filterQuery) {
-    try {
-      const response = await fetch(`/test/query_vector?query="${query.value}"&filterQuery=${filterQuery.value}`);
-      const data = await response.json();
+    axios.get('/test/query_vector', {
+      params: {
+        query: query.value,
+        filterQuery: filterQuery.value,
+      }
+    })
+    .then(response => {
+      const data = response.data;
       console.log('API response:', data);
 
       if (data && Array.isArray(data) && data.length > 0) {
@@ -62,12 +68,11 @@ const sendQuery = async () => {
       } else {
         toast.add({ severity: 'info', summary: 'Info', detail: 'No results found', life: 3000 });
       }
-    } catch (error) {
+    })
+    .catch(error => {
       console.error('Error sending query:', error);
       toast.add({ severity: 'error', summary: 'Error', detail: 'Failed to send query', life: 3000 });
-    }
-    //query.value = '';
-    //dropdownItem.value = null;
+    });
   } else {
     toast.add({ severity: 'warn', summary: 'Warning', detail: 'Please enter a query and select a type', life: 3000 });
   }