From 9e762000d3586d90d158db60dc82dd97b2e6d86e Mon Sep 17 00:00:00 2001
From: sumedh <s.shamrao.shinde@accenture.com>
Date: Mon, 23 Sep 2024 12:29:58 +0530
Subject: [PATCH] grouping modified

---
 src/assets/layout/_main.scss     |   2 +-
 src/components/SocketManager.vue |   2 +-
 src/layout/AppTopbar.vue         |   1 +
 src/main.js                      |  20 +-
 src/views/pages/KsGitRepos.vue   | 343 +++++++++++++++++--------------
 5 files changed, 203 insertions(+), 165 deletions(-)

diff --git a/src/assets/layout/_main.scss b/src/assets/layout/_main.scss
index 17a7a81..47bf3fb 100644
--- a/src/assets/layout/_main.scss
+++ b/src/assets/layout/_main.scss
@@ -1,6 +1,6 @@
 html {
     height: 100%;
-    font-size: 14px;
+    font-size: 15px;
 }
 
 body {
diff --git a/src/components/SocketManager.vue b/src/components/SocketManager.vue
index 24138db..dba6046 100644
--- a/src/components/SocketManager.vue
+++ b/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']);
diff --git a/src/layout/AppTopbar.vue b/src/layout/AppTopbar.vue
index b76d0db..5e6ec52 100644
--- a/src/layout/AppTopbar.vue
+++ b/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();
diff --git a/src/main.js b/src/main.js
index 2039f12..42d02db 100644
--- a/src/main.js
+++ b/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'
         }
     }
diff --git a/src/views/pages/KsGitRepos.vue b/src/views/pages/KsGitRepos.vue
index 085ffa5..dfc1031 100644
--- a/src/views/pages/KsGitRepos.vue
+++ b/src/views/pages/KsGitRepos.vue
@@ -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>
\ No newline at end of file