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>

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

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

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

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

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

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>