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

vectore datatable and few modifications

Browse Source
This commit is contained in:
sumedh
2024-08-07 12:10:50 +05:30
parent 55a547d573
commit ec5c382c3d
8 changed files with 281 additions and 172 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.vscode/settings.json vendored
View File

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

2
index.html
View File

@@ -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>

15
src/views/pages/CodeSnippet.vue → src/components/CodeSnippet.vue
View File

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

3
src/layout/AppMenu.vue
View File

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

1
src/router/index.js
View File

@@ -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')}
]

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

@@ -1,7 +1,8 @@
<template>
<div className="card">
<DataTable v-model:filters="filters" :value="ksdocuments" paginator showGridlines :rows="10" dataKey="id"
filterDisplay="menu" :loading="loading" :globalFilterFields="['name', 'fileName', 'ingestionStatus', 'ingestionDateFormat']">
filterDisplay="menu" :loading="loading"
:globalFilterFields="['name', 'fileName', 'ingestionStatus', 'ingestionDateFormat']">
<template #header>
<div class="flex items-center justify-between gap-4 p-4 ">
<span class="text-xl font-bold">KS Documents</span>
@@ -13,14 +14,17 @@
<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 }"/>
<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="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 }}
@@ -29,20 +33,22 @@
<InputText v-model="filterModel.value" type="text" @input="filterCallback()" placeholder="Search by File" />
</template>
</Column>
<Column field="fileName" header="File Name" sortable >
<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" />
<InputText v-model="filterModel.value" type="text" @input="filterCallback()"
placeholder="Search by File Name" />
</template>
</Column>
<Column field="ingestionStatus" header="Status" sortable >
<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">
<Select v-model="filterModel.value" @change="filterCallback()" :options="statuses" placeholder="Select One"
style="min-width: 12rem" :showClear="true">
<template #option="{ option }">
<Tag :value="option" :severity="getStatus({ ingestionStatus: option })" />
</template>
@@ -54,25 +60,22 @@
{{ formatDate(data.ingestionDate) }}
</template>
<template #filter="{ filterModel }">
<DatePicker v-model="filterModel.value" dateFormat="mm/dd/yy" placeholder="mm/dd/yyyy" @change="updateFilterModel"/>
<DatePicker v-model="filterModel.value" dateFormat="mm/dd/yy" placeholder="mm/dd/yyyy"
@change="updateFilterModel" />
</template>
</Column>
<Column headerStyle="width: 5rem; text-align: center" bodyStyle="text-align: center; overflow: visible">
<template #body="slotProps">
<div class="flex justify-center items-center">
<Button type="button" icon="pi pi-pencil" rounded @click="editKsDocument(slotProps.data)" v-tooltip="'Edit the information of document'" class="mr-4" />
<Button type="button" icon="pi pi-pencil" rounded @click="editKsDocument(slotProps.data)"
v-tooltip="'Edit the information of document'" class="mr-4" />
<!--Tag :value="slotProps.data.id" /-->
<!--Tag :value="slotProps.data.ingestionInfo.id" /-->
<!--Button type="button" v-if="slotProps.data.ingestionStatus === 'NEW'" icon="pi pi-play" rounded
@click="startIndividualngestion(slotProps.data.id)" v-tooltip="'Start Ingestion of document'" class="mr-4" /-->
<Button type="button"
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-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>
@@ -230,6 +233,7 @@ function formatDate(dateString) {
border-color: red;
color: white;
}
.p-button-danger:disabled {
background-color: red;
border-color: red;
@@ -237,4 +241,3 @@ function formatDate(dateString) {
cursor: not-allowed;
}
</style>

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

@@ -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 () => {

98
src/views/pages/KsVectorData.vue Normal file
View File

@@ -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>