grouping modified

src/assets/layout/_main.scss

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

src/components/SocketManager.vue

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

src/layout/AppTopbar.vue

@@ -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();

src/main.js

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

src/views/pages/KsGitRepos.vue

@@ -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" />
+                        @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="'Add New Git Repo'" class="mr-2" /-->
+                    <!--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="'Add New Git Repo'" /-->
+                    <!--Button label="Add Git Repo" icon="pi pi-bolt"  severity="secondary" rounded  @click="cloneRepoForm()" v-tooltip.top="'Add New Git Repo'" /-->
-                <Button label="Add Git Repo" icon="pi pi-bolt" severity="secondary" rounded @click="showDialog = true"
+                    <Button label="New Git Repository" icon="pi pi-bolt" severity="secondary" rounded
-                    v-tooltip="'Add New Git Repo using Dialog'" />
+                        @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"
+                groupRowsBy="repoName" sortMode="single" sortField="ksGitIngestionInfo.metadata.KsApplicationName"
-            :globalFilterFields="['repoName', 'branch', 'ingestionStatus', 'ingestionDateFormat']"
+                :sortOrder="1" filterDisplay="menu" :loading="loading"
-            tableStyle="min-width: 70rem" removableSort>
+                :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 = () => {
+const filters = ref({
-    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 }] }
-    };
+});
-};
 
 
 
@@ -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>