java-parsing ui components added

src/layout/AppMenu.vue

@@ -8,6 +8,7 @@ const model = ref([
         label: 'Knowledge Source',
         items: [{ label: 'Documents', icon: 'pi pi-fw pi-id-card', to: '/ksdocuments' },
         { label: 'Code Repository', icon: 'pi pi-fw pi-id-card', to: '/ks_git_repos' },
+        { label: 'Code Parser', icon: 'pi pi-fw pi-id-card', to: '/ks_git_repos/ks_code_parser' },
         { label: 'Texts', icon: 'pi pi-fw pi-id-card', to: '/kstexts' }
         ]
     },

src/router/index.js

@@ -21,17 +21,27 @@ const router = createRouter({
           children: [
             {path: '', name: 'ks-document', component: () => import('@/views/pages/ksDocuments/KsDocuments.vue')},
             {path: 'new', name: 'ks-document-new', component: () => import('@/views/pages/ksDocuments/KsNewDocumentForm.vue')},
-            //{path: ':id', name: 'ks-document-edit', component: () => import('@/views/pages/KsEditDocumentForm.vue')},
-            {path: '/ks_similarity_search', name: 'ks_similarity_search', component: () => import('@/views/pages/similaritySearch/KsSimilaritySearch.vue')},
-            {path: '/ks_vector_data', name: 'ks_vector_data', component: () => import('@/views/pages/vectorDBSearch/KsVectorData.vue')}
           ]
         },
         {
           path: '/ks_git_repos',
           children: [
               {path: '', name: 'ks-git-repos', component: () => import('@/views/pages/ksGitRepo/KsGitRepos.vue')},
-              {path: 'new', name: 'ks-git-repo-new', component: () => import('@/views/pages/ksGitRepo/KsNewGitRepoForm.vue')},        
-              {path: '/clone', name: 'ks-git-clone-repo', component: () => import('@/views/pages/ksGitRepo/KsGitCloneRepoForm.vue')},        
+              //{path: 'new', name: 'ks-git-repo-new', component: () => import('@/views/pages/ksGitRepo/KsNewGitRepoForm.vue')},        
+              //{path: '/clone', name: 'ks-git-clone-repo', component: () => import('@/views/pages/ksGitRepo/KsGitCloneRepoForm.vue')},
+              {path: 'ks_code_parser', name: 'ks_code_parser', component: () => import('@/views/pages/ksGitRepo/ksCodeParser/KsGitCodeParser.vue')}
+          ]
+        },
+        {
+          path: '/ks_similarity_search', 
+          children: [
+            {path: '', name: 'ks_similarity_search', component: () => import('@/views/pages/similaritySearch/KsSimilaritySearch.vue')},
+          ]
+        },
+        {
+          path: '/ks_vector_data', 
+          children: [
+            {path: '', name: 'ks_vector_data', component: () => import('@/views/pages/vectorDBSearch/KsVectorData.vue')},
           ]
         },
         {

src/views/pages/ksGitRepo/KsGitCloneRepoFormDialog.vue

@@ -77,7 +77,7 @@
     </form>
 </template>
 <script setup>
-import { defineEmits, ref } from 'vue';
+import { ref } from 'vue';
 
 const formData = ref({
     repoName: 'shellExecutionThroughAPI',

src/views/pages/ksGitRepo/ksCodeParser/KsGitCodeParser.vue

@@ -0,0 +1,660 @@
+<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>
+            <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>
+
+                <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>
+                </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>
+                    <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">
+                </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="Clone 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="ParseStatus" header="Parse Status" sortable>
+                    <template #body="slotProps">
+                        <Tag :value="slotProps.data.parseStatus" :severity="getStatus(slotProps.data)" />
+                    </template>
+                    <template #filter="{ filterModel, filterCallback }">
+                        <Select v-model="filterModel.value" @change="filterCallback()" :options="parsestatus"
+                            placeholder="Select One" style="min-width: 12rem" :showClear="true">
+                            <template #option="{ option }">
+                                <Tag :value="option" :severity="getStatus({ parseStatus: option })" />
+                            </template>
+                        </Select>
+                    </template>
+                </Column>
+
+                <Column field="reverseEngineeringStatus" header="ReverseEngineeringStatus" sortable>
+                    <template #body="slotProps">
+                        <Tag :value="slotProps.data.reverseEngineeringStatus" :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({ reverseEngineeringStatus: option })" />
+                            </template>
+                        </Select>
+                    </template>
+                </Column>
+
+                <Column field="ingestionDate" header="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 field="progress" header="Parse Progress" :showFilterMatchModes="false" style="min-width: 12rem">
+                    <template #body="slotProps">
+                        <ProgressBar :value="slotProps.data.parseInfo.totalFiles === 0 || slotProps.data.parseInfo.parsedFiles === 0
+                            ? 0
+                            : ((slotProps.data.parseInfo.parsedFiles / slotProps.data.parseInfo.totalFiles) *
+                                100)" :showValue="true" style="height: 20px">
+                        </ProgressBar>
+                    </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="parseGitRepo(slotProps.data)" v-tooltip.top="'Start Parsing 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.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>
+
+                <template #groupfooter="slotProps">
+                    <div class="flex justify-end font-bold w-full">
+                        Total Count: {{ calculateCustomerTotal(slotProps.data.repoName) }}
+                    </div>
+                </template>
+            </DataTable>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import logo from '@/assets/gitlab-logo.svg';
+import { FilterMatchMode, FilterOperator } from '@primevue/core/api';
+import axios from 'axios';
+import moment from 'moment';
+import { useToast } from 'primevue/usetoast';
+import { onMounted, ref } from 'vue';
+import { useRouter } from 'vue-router';
+
+import { useConfirm } from "primevue/useconfirm";
+
+import ProgressBar from 'primevue/progressbar';
+
+
+
+
+//dialog
+const showDialog = ref(false);
+const cloneRepo = (formData) => {
+    try {
+        const response = axios.post('/fe-api/ks_git_repos/clone', formData, {
+            headers: {
+                'Content-Type': 'application/json'
+            }
+        });
+
+        console.log('Submit successful:', response.data);
+        toast.add({ severity: 'success', summary: 'Success', detail: 'Repository Download is IN-PROGRESS', life: 3000 });
+    } catch (error) {
+        console.error('Submit failed:', error);
+        toast.add({ severity: 'error', summary: 'Error', detail: 'Repository Submission failed', life: 3000 });
+    }
+    showDialog.value = false; // Close the dialog after form submission
+};
+
+const router = useRouter();
+const codeRepoInfo = ref(null);
+const loading = ref(true);
+const toast = useToast();
+const confirm = useConfirm();
+const expandedRows = ref({});
+
+const ingestionResult = ref('');
+const popupTitle = ref('');
+const popupMessage = 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)
+const theme = ref('bright:inverted')
+const sortKeys = ref(true)
+const enableClipboard = ref(true)
+
+const logoSrc = ref(logo);
+
+onMounted(() => {
+    fetchCodeRepoInfo();
+
+});
+
+const refreshPage = () => {
+    location.reload(); // Reloads the current page
+};
+
+
+//websocket
+const handleCloneRepoWebSocketMessage = (data) => {
+    console.log('Update received in parent component:', data);
+    const { success, message } = data;
+    if (success) {
+        toast.add({ severity: 'success', summary: 'Success', detail: message, life: 10000 });
+        fetchCodeRepoInfo();
+    } else {
+        toast.add({ severity: 'error', summary: 'Error', detail: message, life: 10000 });
+        fetchCodeRepoInfo();
+    }
+};
+//websocket end
+
+//polling 
+const updateParsingProgress2 = async (data) => {
+    const updatedData = await Promise.all((data || []).map(async (d) => {
+        if (d.parseStatus == "IN PROGRESS") {
+            try {
+                const parseResponse = await axios.get(`/get-parse-status?id=${d.parseId}`)
+                console.log("parseResponse: ", parseResponse.data);
+                d.parseInfo = parseResponse.data;
+            } catch (error) {
+                console.error("Error fetching parse status:", error);
+                d.parseInfo = { totalFiles: 0, parsedFiles: 0 };
+            };
+        } else {
+            d.parseInfo = { totalFiles: 0, parsedFiles: 0 };
+        }
+        return d;
+    }));
+    return updatedData;
+};
+const updateParsingProgress = async () => {
+    for (let i = 0; i < codeRepoInfo.value.length; i++) {
+        if (codeRepoInfo.value[i].parseStatus == "IN PROGRESS" && codeRepoInfo.value[i].id != '6710d7eda8050cb3b2d088a0') {
+            axios.get(`/get-parse-status?id=${codeRepoInfo.value[i].parseId}`)
+                .then(parseResponse => {
+                    console.log("parseResponse: ", parseResponse.data)
+                    codeRepoInfo.value[i].parseInfo = parseResponse.data;
+                })
+                .catch(error => {
+                    console.error("Error fetching parse status:", error);
+                });
+        } else {
+            codeRepoInfo.value[i].parseInfo = { totalFiles: 101, parsedFiles: 101 };
+        }
+    }
+};
+
+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 }] }
+});
+
+
+
+function calculateCustomerTotal(name) {
+    let total = 0;
+    if (codeRepoInfo.value) {
+        for (let RepoInfo of codeRepoInfo.value) {
+            if (RepoInfo.repoName === name) {
+                total++;
+            }
+        }
+    }
+    return total;
+}
+
+const fetchCodeRepoInfo = async () => {
+    try {
+        const response = await axios.get('/fe-api/ks_git_repos');
+        //codeRepoInfo.value = response.data;
+        console.log(response.data);
+        const filterDate = getCustomDatewithAllResponse(response.data);
+        const filterParseEnabled = getCustomJsonWithJavaParseEnabled(filterDate);
+        const addParseInfo = await updateParsingProgress2(filterParseEnabled);
+        //console.log("updateParsingProgress2 : ", updateParsingProgress2(codeRepoInfo.value));
+        console.log("**************")
+        console.log("addParseInfo : ", addParseInfo);
+        codeRepoInfo.value = addParseInfo;
+        console.log("codeRepoInfo.value : ", codeRepoInfo.value);
+        //updateParsingProgress();
+        loading.value = false;
+    } catch (error) {
+        console.error('Failed to fetch code repo info:', error);
+    }
+};
+
+const getCustomDatewithAllResponse = (data) => {
+    return [...(data || [])].map((d) => {
+        d.ingestionDateFormat = new Date(d.ingestionDateFormat);
+        return d;
+    });
+};
+
+const getCustomJsonWithJavaParseEnabled = (data) => {
+    return [...(data || [])].filter((d) => d.codeParsingToBeDone === true);
+};
+
+
+//ingest git repo functions
+const parseGitRepo = (data) => {
+    console.log(data)
+    const requestBody = {
+        id: data.id,
+        repositoryPath: data.repoPath,
+        applicationName: data.ksGitIngestionInfo.metadata.KsApplicationName,
+        applicationVersion: data.commitId,
+        deleteExistingData: true,
+        applicationType: data.codeType,
+        projectName: data.ksGitIngestionInfo.metadata.KsApplicationName,
+    };
+    console.log(requestBody);
+
+    confirm.require({
+        target: event.currentTarget,
+        message: 'Are you sure you want to proceed?',
+        icon: 'pi pi-exclamation-circle',
+        rejectProps: {
+            label: 'Cancel',
+            severity: 'secondary',
+            outlined: true
+        },
+        acceptProps: {
+            label: 'Ingest Record',
+            severity: 'danger',
+        },
+        accept: () => {
+            axios.post('/parsejava', requestBody)
+                .then((response) => {
+                    toast.add({ severity: 'success', summary: 'Summary', detail: 'Repository Parsing Started', life: 6000 });
+                    console.log('Parsing  info:', response.data)
+                })
+                .catch((error) => {
+                    console.error('Error deleting records: ', error)
+                    toast.add({ severity: 'error', summary: 'Error', detail: 'Error Parsing Repository:', life: 6000 });
+                });
+        },
+        reject: () => {
+            toast.add({ severity: 'error', summary: 'Rejected', detail: 'You have rejected', life: 3000 })
+        }
+    })
+};
+
+// ---------------------------------------------------------------------------------------------------------
+
+
+const updateFilterModel = () => {
+    console.log('updateFilterModel');
+};
+
+function formatDate(dateString) {
+    // Parse the date string using moment
+    return moment(dateString).format('MM/DD/YYYY');
+}
+
+const getStatus = (data) => {
+    if (data.ingestionStatus == 'INGESTED') {
+        return 'success';
+    } 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 'secondary';
+    }
+};
+
+//delete functionality
+const deleteRecordsFromVectorStore = (data) => {
+    console.log("data", data);
+    console.log("reponame", data.repoName);
+
+    const requestPayload = {
+        ksGitInfoId: data.id,
+        ksGitIngestionInfoId: data.ksGitIngestionInfo.id,
+        ksDoctype: data.ksGitIngestionInfo.metadata.KsDoctype,
+        ksDocSource: data.ksGitIngestionInfo.metadata.KsDocSource,
+        ksFileSource: data.ksGitIngestionInfo.metadata.KsFileSource,
+        ksApplicationName: data.ksGitIngestionInfo.metadata.KsApplicationName,
+        ksBranch: data.ksGitIngestionInfo.metadata.KsBranch
+    };
+    console.log("requestPayload", requestPayload)
+
+    confirm.require({
+        target: event.currentTarget,
+        message: 'Are you sure you want to proceed?',
+        icon: 'pi pi-exclamation-circle',
+        rejectProps: {
+            label: 'Cancel',
+            severity: 'secondary',
+            outlined: true
+        },
+        acceptProps: {
+            label: 'Delete Records',
+            severity: 'danger',
+        },
+        accept: () => {
+            axios.post('/fe-api/vector-store/deleteGitRecords', requestPayload)
+                .then(response => {
+                    toast.add({ severity: 'info', summary: 'Deletion', detail: 'Records Deletion INPROGRESS', life: 6000 });
+                    console.log('Delete resource:', response.data)
+                })
+                .catch(error => {
+                    console.error('Error deleting records: ', error)
+                    toast.add({ severity: 'error', summary: 'Error', detail: 'Error deleting records:', life: 6000 });
+                });
+        },
+        reject: () => {
+            toast.add({ severity: 'error', summary: 'Rejected', detail: 'You have rejected', life: 3000 })
+        }
+    })
+};
+
+//reingest latest changes
+const reIngestWithPullChanges = (data) => {
+    console.log("data", data);
+    console.log("reponame", data.repoName);
+
+    confirm.require({
+        target: event.currentTarget,
+        message: 'Are you sure you want to proceed?',
+        icon: 'pi pi-exclamation-circle',
+        rejectProps: {
+            label: 'Cancel',
+            severity: 'secondary',
+            outlined: true
+        },
+        acceptProps: {
+            label: 'Reingest Latest Changes',
+            severity: 'danger',
+        },
+        accept: () => {
+            axios.get(`/test/reingest_repo?repoName=${data.repoName}&branchName=${data.branch}`)
+                .then(response => {
+                    console.log(response.data);
+                    toast.add({ severity: 'info', summary: 'Confirmed', detail: 'ReIngestion with latest pull from master started', life: 3000 });
+                }).catch(error => {
+                    console.log(error);
+                    toast.add({ severity: 'error', summary: 'Error', detail: 'Error in Reingestion', life: 3000 });
+                })
+        },
+        reject: () => {
+            toast.add({ severity: 'error', summary: 'Rejected', detail: 'You have rejected', life: 3000 })
+        }
+    })
+};
+
+//expand
+const onRowExpand = (event) => {
+    console.log('Row Expanded:', event.data);
+    toast.add({ severity: 'info', summary: event.data.repoName + ' Expanded', life: 3000 });
+};
+const onRowCollapse = (event) => {
+    console.log('Row Expanded:', event.data);
+    toast.add({ severity: 'success', summary: event.data.repoName + ' Collapsed', life: 3000 });
+};
+
+const expandAll = () => {
+    expandedRows.value = codeRepoInfo.value.reduce((acc, item) => {
+        (acc[item.id] = true);
+        return acc;
+    }, {});
+};
+const collapseAll = () => {
+    expandedRows.value = {};
+};
+
+//disable button
+
+function isButtonDisabled(data) {
+    return data.ingestionStatus !== 'REPO-CLONE-COMPLETED';
+}
+</script>
+
+<style scoped>
+/* Custom styling for disabled red button */
+.p-button-danger {
+    background-color: white;
+    border-color: blue;
+    color: black;
+}
+
+.p-button-danger:disabled {
+    /*background-color: red;*/
+    border-color: red;
+    color: red;
+    cursor: not-allowed;
+}
+
+.space-x-3>*+* {
+    margin-left: 1rem;
+    /* Adjust as needed for desired spacing */
+}
+
+.loading-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    /* Ensure the container takes full height of the parent */
+    min-height: 400px;
+    /* Adjust this height to your DataTable height */
+}
+
+.spinner-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    animation: fade-in 1s ease-in-out;
+}
+
+.spinner {
+    animation: spin 1s linear infinite;
+    width: 50px;
+    height: 50px;
+    color: var(--primary-color, #007bff);
+}
+
+.loading-text {
+    font-size: 1.2rem;
+    animation: pulse 1.5s infinite;
+    margin-top: 10px;
+    color: var(--primary-color, #007bff);
+}
+
+@keyframes spin {
+    0% {
+        transform: rotate(0deg);
+    }
+
+    100% {
+        transform: rotate(360deg);
+    }
+}
+
+@keyframes pulse {
+
+    0%,
+    100% {
+        opacity: 1;
+        color: var(--primary-color, #007bff);
+    }
+
+    50% {
+        opacity: 0.11;
+        color: var(--primary-color, #007bff);
+    }
+}
+
+@keyframes fade-in {
+    from {
+        opacity: 0;
+    }
+
+    to {
+        opacity: 1;
+    }
+}
+
+.card {
+    margin: 2rem;
+}
+
+.vue-json-view {
+    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>

src/views/pages/ksGitRepo/ksCodeParser/KsGitCodeParserDialog.vue

@@ -0,0 +1,151 @@
+<template>
+    <form @submit.prevent="submitForm" class="p-fluid">
+        <div class="flex flex-col gap-6">
+            <div class="grid grid-cols-12 gap-4">
+                <div class="col-span-6">
+                    <label for="repoName" class="block font-bold mb-3">Repo Name</label>
+                    <InputText id="repoName" v-model.trim="formData.repoName" placeholder="Enter Repo Name"
+                        required="true" fluid />
+                </div>
+                <div class="col-span-6">
+                    <label for="group" class="block font-bold mb-3">Group Name</label>
+                    <InputText id="group" v-model.trim="formData.group" placeholder="Enter Group Name" required="true"
+                        fluid />
+                </div>
+            </div>
+
+
+            <div>
+                <label for="source" class="block font-bold mb-3">Git Source URL</label>
+                <!--InputText id="source" v-model.trim="formData.source" placeholder="Enter Source base URL"
+                    required="true" /-->
+                <Select id="source" v-model="formData.source" :options="gitSourceURLs" optionLabel="label"
+                    optionValue="value" placeholder="Select Git URL" fluid></Select>
+            </div>
+
+            <div class="grid grid-cols-12 gap-4">
+                <div class="col-span-6">
+                    <label for="branch" class="block font-bold mb-3">Branch</label>
+                    <InputText id="branch" v-model.trim="formData.branch" placeholder="Enter Branch" required="true" />
+                </div>
+                <div class="col-span-6">
+                    <label for="tokenType" class="block font-bold mb-3">Git Code Type</label>
+                    <Select id="tokenType" v-model="formData.tokenType" :options="tokenTypes" optionLabel="label"
+                        optionValue="value" placeholder="Select Git Token Type" fluid></Select>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-12 gap-4">
+                <div class="col-span-6">
+                    <label for="codeParsingToBeDone" class="block font-bold mb-3">code Parsing enable</label>
+                    <Select id="codeParsingToBeDone" v-model="formData.codeParsingToBeDone"
+                        :options="[{ label: 'Enable', value: true }, { label: 'Disable', value: false }]"
+                        optionLabel="label" optionValue="value" fluid></Select>
+                </div>
+                <div class="col-span-6">
+                    <label for="codeType" class="block font-bold mb-3">Git Token Type</label>
+                    <Select id="codeType" v-model="formData.codeType" :options="codeTypes" optionLabel="label"
+                        optionValue="value" placeholder="Select Git Token Type" fluid></Select>
+                </div>
+            </div>
+
+
+            <!--div>
+                <label for="commitId" class="block font-bold mb-3">CommitID</label>
+                <InputText id="commitId" type="text" v-model.trim="formData.commitId" required="true" />
+            </div-->
+        </div>
+        <div class="button-container">
+            <Button type="button" label="Cancel" text rounded raised :fluid="false" severity="danger"
+                class="p-button-rounded p-button-lg mt-4 mr-4" @click="handleCancel" />
+            <Button type="submit" label="Submit" text rounded raised :disabled="isSubmitting" :fluid="false"
+                class="p-button-rounded p-button-lg mt-4" />
+        </div>
+
+    </form>
+</template>
+<script setup>
+import { ref } from 'vue';
+
+const formData = ref({
+    repoName: 'shellExecutionThroughAPI',
+    group: 'automationtester23',
+    source: 'https://github.com',
+    branch: 'master',
+    commitId: 'latest',
+    tokenType: 'github',
+    repoPath: 'C:/repos/olympus_ai/gitClone',
+    codeParsingToBeDone: false,
+    codeType: 'Java',
+    defaultChunkSize: 0,
+    minChunkSize: 0,
+    maxNumberOfChunks: 0,
+    minChunkSizeToEmbed: 0
+});
+
+const gitSourceURLs = ref([
+    { label: 'https://github.com', value: 'https://github.com' },
+    { label: 'https://gitlab.gcp.windtre.it', value: 'https://gitlab.gcp.windtre.it' },
+    { label: 'http://devops-tool-a-vip01.wind.root.it:8888', value: 'http://devops-tool-a-vip01.wind.root.it:8888' }
+]);
+
+const tokenTypes = ref([
+    { label: 'git-cloud', value: 'cloud' },
+    { label: 'git-onpremises', value: 'onpremises' },
+    { label: 'git-github', value: 'github' }
+]);
+
+const codeTypes = ref([
+    { label: 'Java', value: 'Java' },
+    { label: 'Python', value: 'python' },
+    { label: 'SQL', value: 'SQL' }
+]);
+
+const isSubmitting = ref(false);
+
+const emit = defineEmits(['submitForm', 'cancel'])
+
+const handleCancel = () => {
+    emit('cancel')
+}
+
+const submitForm = () => {
+    if (isSubmitting.value) return; // Prevent duplicate submissions
+
+    isSubmitting.value = true;
+
+    const formDataToSend = new FormData();
+    formDataToSend.append('repoName', formData.value.repoName);
+    formDataToSend.append('group', formData.value.group);
+    formDataToSend.append('source', formData.value.source);
+    formDataToSend.append('branch', formData.value.branch);
+    formDataToSend.append('commitId', formData.value.commitId);
+    formDataToSend.append('tokenType', formData.value.tokenType);
+    formDataToSend.append('codeParsingToBeDone', true);
+    formDataToSend.append('codeType', formData.value.codeType);
+    formDataToSend.append('defaultChunkSize', formData.value.defaultChunkSize);
+    formDataToSend.append('minChunkSize', formData.value.minChunkSize);
+    formDataToSend.append('maxNumberOfChunks', formData.value.maxNumberOfChunks);
+    formDataToSend.append('minChunkSizeToEmbed', formData.value.minChunkSizeToEmbed);
+    //console.log(formData);
+
+    const json = formDatatoJson(formDataToSend);
+    console.log(json)
+    emit('submitForm', json)
+};
+
+function formDatatoJson(formData) {
+    const jsonObject = {};
+    formData.forEach((value, key) => {
+        jsonObject[key] = value;
+    })
+    return jsonObject;
+}
+</script>
+
+<style scoped>
+.button-container {
+    display: flex;
+    justify-content: flex-end;
+}
+</style>