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

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

@@ -1,30 +1,31 @@
<template>
<div>
<div class="content-section introduction big-title">
<div class="feature-intro">
<h1>Repository <span>DataTable</span></h1>
</div>
</div>
<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>
<Toolbar class="mb-6">
<template #start>
<Button label="Refresh" icon="pi pi-refresh" severity="secondary" class="mr-2" rounded
@click="fetchCodeRepoInfo" />
@click="refreshPage" v-tooltip.top="'Refresh all records'" />
</template>
<template #end>
<Button label="Expand All" icon="pi pi-plus" severity="secondary" class="mr-3" rounded
@click="expandAll" />
@click="expandAll" v-tooltip.top="'Expand all records'" />
<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'" />
@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: '800px' }" header="Repository Details"
<Dialog v-model:visible="showDialog" :style="{ width: '50rem' }" header="Repository Details"
:modal="true">
<div>
<cloneForm @submitForm="cloneRepo" @cancel="showDialog = false" />
@@ -38,9 +39,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>
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>
@@ -62,7 +64,11 @@
<Column expander style="width: 5rem" />
<template #empty>No Records found</template>
<template #loading>Loading Data... </template>
<template #loading>
<div class=" flex justify-content-center">
<ProgressSpinner />
</div>
</template>
<socketManager @update="handleCloneRepoWebSocketMessage" topic="topic" subtopic="clone-status">
</socketManager>
<socketManager @update="handleCloneRepoWebSocketMessage" topic="topic" subtopic="deletion-status">
@@ -74,7 +80,7 @@
<!--Column field="ksGitIngestionInfo.id" header="ksGitIngestionInfo" sortable> </Column-->
<Column field="repoName" header="Repo Name">
<!--Column field="repoName" header="Repo Name">
<template #body="{ data }">
{{ data.repoName }}
</template>
@@ -82,7 +88,7 @@
<InputText v-model="filterModel.value" type="text" @input="filterCallback()"
placeholder="Search by Git Repo Name" />
</template>
</Column>
</Column-->
<Column field="branch" header="Branch">
<template #body="{ data }">
@@ -124,15 +130,15 @@
<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'"
@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="'Ingest Repo with latest changes from master branch'" />
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="'Delete the Records'" />
@click="deleteRecordsFromVectorStore(slotProps.data)" v-tooltip.top="'Delete Records'" />
</template>
</Column>
@@ -152,6 +158,7 @@
</template>
</DataTable>
</div>
</div>
</template>
<script setup>
@@ -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 = {
const filters = ref({
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 }] }
};
};
});
@@ -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>