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] 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 });
   }