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

grouping modified

Browse Source
This commit is contained in:
sumedh
2024-09-23 12:29:58 +05:30
parent 6bdc788166
commit 9e762000d3
5 changed files with 203 additions and 165 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/assets/layout/_main.scss
View File

@@ -1,6 +1,6 @@
html {
height: 100%;
font-size: 14px;
font-size: 15px;
}
body {

2
src/components/SocketManager.vue
View File

@@ -6,7 +6,7 @@
<script setup>
import { Stomp } from "@stomp/stompjs";
import SockJS from 'sockjs-client/dist/sockjs';
import { defineEmits, defineProps, onBeforeUnmount, onMounted, ref } from 'vue';
import { onBeforeUnmount, onMounted, ref } from 'vue';
// Define props
const props = defineProps(['topic', 'subtopic']);

1
src/layout/AppTopbar.vue
View File

@@ -3,6 +3,7 @@ import logo from '@/assets/Apollo_simple_logo.webp';
import { useLayout } from '@/layout/composables/layout';
import { useAuth } from '@websanova/vue-auth/src/v3.js';
import { ref } from 'vue';
//import AppConfigurator from './AppConfigurator.vue';
import AppProfileMenu from './AppProfileMenu.vue';
const { onMenuToggle, toggleDarkMode, isDarkTheme } = useLayout();

20
src/main.js
View File

@@ -1,16 +1,16 @@
import PrimeVue from 'primevue/config';
import ConfirmationService from 'primevue/confirmationservice';
import ToastService from 'primevue/toastservice';
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import Aura from '@primevue/themes/aura';
import PrimeVue from 'primevue/config';
import ConfirmationService from 'primevue/confirmationservice';
import ToastService from 'primevue/toastservice';
import BlockViewer from '@/components/BlockViewer.vue';
import { definePreset } from '@primevue/themes';
import '@/assets/styles.scss';
import '@/assets/tailwind.css';
import Aura from '@primevue/themes/aura';
import axios from 'axios';
axios.defaults.baseURL = import.meta.env.VITE_BACKEND_URL; //'http://localhost:8082'
@@ -47,10 +47,18 @@ const app = createApp(App);
app.use(router);
app.use(auth);
const MyPreset = definePreset(Aura, {
semantic: {
primary: {50: '#ecfeff', 100: '#cffafe', 200: '#a5f3fc', 300: '#67e8f9', 400: '#22d3ee', 500: '#06b6d4', 600: '#0891b2', 700: '#0e7490', 800: '#155e75', 900: '#164e63', 950: '#083344' }
}
});
app.use(PrimeVue, {
theme: {
preset: Aura,
preset: MyPreset,
options: {
prefix: 'p',
darkModeSelector: '.app-dark'
}
}

343
src/views/pages/KsGitRepos.vue
View File

@@ -1,156 +1,163 @@
<template>
<div class="card">
<Toast />
<ConfirmPopup></ConfirmPopup>
<div v-if="loading" class="loading-container">
<div class="spinner-container">
<ProgressSpinner class="spinner" />
<p class="loading-text">Loading data...</p>
<div>
<div class="content-section introduction big-title">
<div class="feature-intro">
<h1>Repository <span>DataTable</span></h1>
</div>
</div>
<Toolbar class="mb-6">
<template #start>
<Button label="Refresh" icon="pi pi-refresh" severity="secondary" class="mr-2" rounded
@click="fetchCodeRepoInfo" />
</template>
<template #end>
<Button label="Expand All" icon="pi pi-plus" severity="secondary" class="mr-3" rounded
@click="expandAll" />
<Button label="Collapse All" icon="pi pi-minus" severity="secondary" class="mr-3" rounded
@click="collapseAll" />
<!--Button label="Add New Git Repo" icon="pi pi-plus" severity="secondary" rounded class="mr-3" @click="newCodeRepoForm()" v-tooltip="'Add New Git Repo'" class="mr-2" /-->
<!--Button label="Add Git Repo" icon="pi pi-bolt" severity="secondary" rounded @click="cloneRepoForm()" v-tooltip="'Add New Git Repo'" /-->
<Button label="Add Git Repo" icon="pi pi-bolt" severity="secondary" rounded @click="showDialog = true"
v-tooltip="'Add New Git Repo using Dialog'" />
<div class="card">
<Toast />
<ConfirmPopup></ConfirmPopup>
<Toolbar class="mb-6">
<template #start>
<Button label="Refresh" icon="pi pi-refresh" severity="secondary" class="mr-2" rounded
@click="refreshPage" v-tooltip.top="'Refresh all records'" />
</template>
<Dialog v-model:visible="showDialog" :style="{ width: '800px' }" header="Repository Details"
:modal="true">
<div>
<cloneForm @submitForm="cloneRepo" @cancel="showDialog = false" />
<template #end>
<Button label="Expand All" icon="pi pi-plus" severity="secondary" class="mr-3" rounded
@click="expandAll" v-tooltip.top="'Expand all records'" />
<Button label="Collapse All" icon="pi pi-minus" severity="secondary" class="mr-3" rounded
@click="collapseAll" v-tooltip.top="'Collapse all records'" />
<!--Button label="Add New Git Repo" icon="pi pi-plus" severity="secondary" rounded class="mr-3" @click="newCodeRepoForm()" v-tooltip.top="'Add New Git Repo'" class="mr-2" /-->
<!--Button label="Add Git Repo" icon="pi pi-bolt" severity="secondary" rounded @click="cloneRepoForm()" v-tooltip.top="'Add New Git Repo'" /-->
<Button label="New Git Repository" icon="pi pi-bolt" severity="secondary" rounded
@click="showDialog = true" v-tooltip.top="'Add New Git Repository'" />
<Dialog v-model:visible="showDialog" :style="{ width: '50rem' }" header="Repository Details"
:modal="true">
<div>
<cloneForm @submitForm="cloneRepo" @cancel="showDialog = false" />
</div>
</Dialog>
</template>
</Toolbar>
<DataTable v-model:filters="filters" v-model:expandedRows="expandedRows" @rowExpand="onRowExpand"
@rowCollapse="onRowCollapse" :value="codeRepoInfo" :paginator="true" :rows="10"
paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown"
currentPageReportTemplate="Showing {first} to {last} of {totalRecords} records"
:rowsPerPageOptions="[10, 15, 20, 50, 100]" dataKey="id" :rowHover="true" rowGroupMode="subheader"
groupRowsBy="repoName" sortMode="single" sortField="ksGitIngestionInfo.metadata.KsApplicationName"
:sortOrder="1" filterDisplay="menu" :loading="loading"
:globalFilterFields="['branch', 'ingestionStatus', 'ingestionDateFormat']" tableStyle="min-width: 70rem"
removableSort>
<template #header>
<div class="flex flex-wrap gap-2 items-center justify-between">
<h4 class="m-0">Manage Repositories</h4>
<IconField>
<InputIcon>
<i class="pi pi-search" />
</InputIcon>
<InputText v-model="filters['global'].value" placeholder="Search..." />
</IconField>
</div>
</Dialog>
</template>
</Toolbar>
<DataTable v-model:filters="filters" v-model:expandedRows="expandedRows" @rowExpand="onRowExpand"
@rowCollapse="onRowCollapse" :value="codeRepoInfo" :paginator="true" :rows="10"
paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown"
currentPageReportTemplate="Showing {first} to {last} of {totalRecords} records"
:rowsPerPageOptions="[10, 15, 20, 50, 100]" dataKey="id" :rowHover="true" rowGroupMode="subheader"
groupRowsBy="repoName" filterDisplay="menu" :loading="loading"
:globalFilterFields="['repoName', 'branch', 'ingestionStatus', 'ingestionDateFormat']"
tableStyle="min-width: 70rem" removableSort>
<template #header>
<div class="flex flex-wrap gap-2 items-center justify-between">
<h4 class="m-0">Manage Repositories</h4>
<IconField>
<InputIcon>
<i class="pi pi-search" />
</InputIcon>
<InputText v-model="filters['global'].value" placeholder="Search..." />
</IconField>
</div>
</template>
<template #groupheader="slotProps">
<div class="flex items-center gap-2">
<img :alt="slotProps.data.repoName" :src="logoSrc" width="32" style="vertical-align: middle" />
<span>{{ slotProps.data.repoName }}</span>
</div>
</template>
<Column expander style="width: 5rem" />
<template #empty>No Records found</template>
<template #loading>Loading Data... </template>
<socketManager @update="handleCloneRepoWebSocketMessage" topic="topic" subtopic="clone-status">
</socketManager>
<socketManager @update="handleCloneRepoWebSocketMessage" topic="topic" subtopic="deletion-status">
</socketManager>
<!--Column field="id" header="KSGitInfoID" sortable /-->
<Column />
<Column />
<!--Column field="ksGitIngestionInfo.id" header="ksGitIngestionInfo" sortable> </Column-->
<Column field="repoName" header="Repo Name">
<template #body="{ data }">
{{ data.repoName }}
</template>
<template #filter="{ filterModel, filterCallback }">
<InputText v-model="filterModel.value" type="text" @input="filterCallback()"
placeholder="Search by Git Repo Name" />
<template #groupheader="slotProps">
<div class="flex items-center gap-2">
<img :alt="slotProps.data.repoName" :src="logoSrc" width="32" style="vertical-align: middle" />
<span>{{ slotProps.data.repoName }}</span>
</div>
</template>
</Column>
<Column field="branch" header="Branch">
<template #body="{ data }">
{{ data.branch }}
<Column expander style="width: 5rem" />
<template #empty>No Records found</template>
<template #loading>
<div class=" flex justify-content-center">
<ProgressSpinner />
</div>
</template>
<template #filter="{ filterModel, filterCallback }">
<InputText v-model="filterModel.value" type="text" @input="filterCallback()"
placeholder="Search by Git Repo Branch" />
<socketManager @update="handleCloneRepoWebSocketMessage" topic="topic" subtopic="clone-status">
</socketManager>
<socketManager @update="handleCloneRepoWebSocketMessage" topic="topic" subtopic="deletion-status">
</socketManager>
<!--Column field="id" header="KSGitInfoID" sortable /-->
<Column />
<Column />
<!--Column field="ksGitIngestionInfo.id" header="ksGitIngestionInfo" sortable> </Column-->
<!--Column field="repoName" header="Repo Name">
<template #body="{ data }">
{{ data.repoName }}
</template>
<template #filter="{ filterModel, filterCallback }">
<InputText v-model="filterModel.value" type="text" @input="filterCallback()"
placeholder="Search by Git Repo Name" />
</template>
</Column-->
<Column field="branch" header="Branch">
<template #body="{ data }">
{{ data.branch }}
</template>
<template #filter="{ filterModel, filterCallback }">
<InputText v-model="filterModel.value" type="text" @input="filterCallback()"
placeholder="Search by Git Repo Branch" />
</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 field="ingestionDate" header="Ingestion Date" sortable 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 header="Actions" headerStyle="width: 5rem; text-align: center" bodyStyle="text-align: center; overflow: visible"-->
<Column :exportable="false" style="min-width: 12rem">
<template #body="slotProps">
<Button text raised rounded severity="info" type="button" class="mr-2" icon="pi pi-play"
@click="ingestGitRepo(slotProps.data)" v-tooltip.top="'Start Ingestion of Git'"
:disabled="isButtonDisabled(slotProps.data)" />
<Button text raised rounded severity="warn" type="button" class="mr-2" icon="pi pi-forward"
@click="reIngestWithPullChanges(slotProps.data)"
v-tooltip.top="'Ingest Latest changes From Git'" />
<Button text raised rounded severity="danger" type="button" icon="pi pi-trash"
@click="deleteRecordsFromVectorStore(slotProps.data)" v-tooltip.top="'Delete Records'" />
</template>
</Column>
<template #expansion="slotProps">
<div class="p-4">
<VueJsonView :src="slotProps.data" :collapsed="collapsed" :theme="theme" :sort-keys="sortKeys"
:enable-clipboard="enableClipboard" class="vue-json-view" />
</div>
</template>
</Column>
<Column field="ingestionStatus" header="Status" sortable>
<template #body="slotProps">
<Tag :value="slotProps.data.ingestionStatus" :severity="getStatus(slotProps.data)" />
<template #groupfooter="slotProps">
<div class="flex justify-end font-bold w-full">
Total Count: {{ calculateCustomerTotal(slotProps.data.repoName) }}
</div>
</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 field="ingestionDate" header="Ingestion Date" sortable 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 header="Actions" headerStyle="width: 5rem; text-align: center" bodyStyle="text-align: center; overflow: visible"-->
<Column :exportable="false" style="min-width: 12rem">
<template #body="slotProps">
<Button text raised rounded severity="info" type="button" class="mr-2" icon="pi pi-play"
@click="ingestGitRepo(slotProps.data)" v-tooltip="'Start Ingestion of Repo'"
:disabled="isButtonDisabled(slotProps.data)" />
<Button text raised rounded severity="warn" type="button" class="mr-2" icon="pi pi-forward"
@click="reIngestWithPullChanges(slotProps.data)"
v-tooltip="'Ingest Repo with latest changes from master branch'" />
<Button text raised rounded severity="danger" type="button" icon="pi pi-trash"
@click="deleteRecordsFromVectorStore(slotProps.data)" v-tooltip="'Delete the Records'" />
</template>
</Column>
<template #expansion="slotProps">
<div class="p-4">
<VueJsonView :src="slotProps.data" :collapsed="collapsed" :theme="theme" :sort-keys="sortKeys"
:enable-clipboard="enableClipboard" class="vue-json-view" />
</div>
</template>
<template #groupfooter="slotProps">
<div class="flex justify-end font-bold w-full">
Total Count: {{ calculateCustomerTotal(slotProps.data.repoName) }}
</div>
</template>
</DataTable>
</DataTable>
</div>
</div>
</template>
@@ -170,13 +177,15 @@ import DataTable from 'primevue/datatable';
import DatePicker from 'primevue/datepicker';
import Dialog from 'primevue/dialog';
import InputText from 'primevue/inputtext';
import ProgressSpinner from 'primevue/progressspinner';
import Select from 'primevue/select';
import Tag from 'primevue/tag';
import { useConfirm } from "primevue/useconfirm";
import socketManager from '/src/components/SocketManager.vue';
import ProgressSpinner from 'primevue/progressspinner';
//dialog
import cloneForm from './KsGitCloneRepoFormDialog.vue';
const showDialog = ref(false);
@@ -207,7 +216,6 @@ const expandedRows = ref({});
const ingestionResult = ref('');
const popupTitle = ref('');
const popupMessage = ref('');
const filters = ref();
const statuses = ref(['INGESTION-ERROR', 'INGESTION-IN-PROGRESS', 'INGESTED', 'REPO-NEW', 'REPO-CLONE-IN-PROGRESS', 'REPO-CLONE-COMPLETED', 'REPO-CLONE-FAILED']);
const collapsed = ref(1)
@@ -221,6 +229,10 @@ onMounted(() => {
fetchCodeRepoInfo();
});
const refreshPage = () => {
location.reload(); // Reloads the current page
};
//websocket
const handleCloneRepoWebSocketMessage = (data) => {
@@ -236,16 +248,13 @@ const handleCloneRepoWebSocketMessage = (data) => {
};
//websocket end
const initFilters = () => {
filters.value = {
global: { value: null, matchMode: FilterMatchMode.CONTAINS },
id: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }] },
repoName: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }] },
branch: { 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 }] }
};
};
const filters = ref({
global: { value: null, matchMode: FilterMatchMode.CONTAINS },
id: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }] },
branch: { 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 }] }
});
@@ -261,8 +270,6 @@ function calculateCustomerTotal(name) {
return total;
}
initFilters();
const fetchCodeRepoInfo = async () => {
try {
const response = await axios.get('/fe-api/ks_git_repos');
@@ -341,12 +348,18 @@ function formatDate(dateString) {
}
const getStatus = (data) => {
if (data.ingestionStatus === 'INGESTED') {
if (data.ingestionStatus == 'INGESTED') {
return 'success';
} else if (data.ingestionStatus === 'NEW') {
} else if (data.ingestionStatus === 'INGESTION-IN-PROGRESS' || data.ingestionStatus === 'REPO-CLONE-IN-PROGRESS') {
return 'info';
} else if (data.ingestionStatus === 'INGESTION-ERROR' || data.ingestionStatus === 'REPO-CLONE-FAILED') {
return 'danger';
} else if (data.ingestionStatus === 'REPO-NEW') {
return 'warning';
} else if (data.ingestionStatus === 'REPO-CLONE-COMPLETED') {
return 'contrast';
} else {
return 'warn';
return 'secondary';
}
};
@@ -551,4 +564,20 @@ function isButtonDisabled(data) {
font-size: 15px;
/* Change this value to your desired font size */
}
.big-title {
font-size: 3rem;
color: #c1c3c4;
/* Adjust the size as needed */
font-weight: bold;
margin-bottom: 1rem;
margin-left: 2rem;
}
.big-title span {
color: #c1c3c4;
font-size: 2rem;
/* Optional: style the span element differently */
}
</style>