vectore datatable and few modifications
This commit is contained in:
sumedh
@@ -1,82 +0,0 @@
|
||||
<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>
|
||||
@@ -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>
|
||||
|
||||
|
||||
@@ -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
98
src/views/pages/KsVectorData.vue
Normal 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>
|
||||
Reference in New Issue
Block a user