Update KsGitRepos.vue to add cloneStatus column and modify filter options

This commit is contained in:
sumedh
2024-10-21 12:29:33 +05:30
parent 8ada2f940d
commit 5c6f7cf17a
2 changed files with 51 additions and 21 deletions

View File

@@ -41,8 +41,8 @@
:rowsPerPageOptions="[10, 15, 20, 50, 100]" dataKey="id" :rowHover="true" rowGroupMode="subheader" :rowsPerPageOptions="[10, 15, 20, 50, 100]" dataKey="id" :rowHover="true" rowGroupMode="subheader"
groupRowsBy="repoName" sortMode="single" sortField="ksGitIngestionInfo.metadata.KsApplicationName" groupRowsBy="repoName" sortMode="single" sortField="ksGitIngestionInfo.metadata.KsApplicationName"
:sortOrder="1" filterDisplay="menu" :loading="loading" :sortOrder="1" filterDisplay="menu" :loading="loading"
:globalFilterFields="['branch', 'ingestionStatus', 'ingestionDateFormat']" tableStyle="min-width: 70rem" :globalFilterFields="['branch', 'cloneStatus', 'ingestionStatus', 'ingestionDateFormat']"
removableSort> tableStyle="min-width: 70rem" removableSort>
<template #header> <template #header>
<div class="flex flex-wrap gap-2 items-center justify-between"> <div class="flex flex-wrap gap-2 items-center justify-between">
<h4 class="m-0">Manage Repositories</h4> <h4 class="m-0">Manage Repositories</h4>
@@ -100,7 +100,21 @@
</template> </template>
</Column> </Column>
<Column field="ingestionStatus" header="Status" sortable> <Column field="cloneStatus" header="Clone Status" sortable>
<template #body="slotProps">
<Tag :value="slotProps.data.cloneStatus" :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({ cloneStatus: option })" />
</template>
</Select>
</template>
</Column>
<Column field="ingestionStatus" header="ingestion Status" sortable>
<template #body="slotProps"> <template #body="slotProps">
<Tag :value="slotProps.data.ingestionStatus" :severity="getStatus(slotProps.data)" /> <Tag :value="slotProps.data.ingestionStatus" :severity="getStatus(slotProps.data)" />
</template> </template>
@@ -216,7 +230,7 @@ const expandedRows = ref({});
const ingestionResult = ref(''); const ingestionResult = ref('');
const popupTitle = ref(''); const popupTitle = ref('');
const popupMessage = 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 statuses = ref(['ERROR', 'IN-PROGRESS', 'INGESTED', 'NEW', 'COMPLETED']);
const collapsed = ref(1) const collapsed = ref(1)
const theme = ref('bright:inverted') const theme = ref('bright:inverted')
@@ -253,7 +267,8 @@ const filters = ref({
id: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }] }, id: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }] },
branch: { 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 }] }, ingestionDateFormat: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.DATE_IS }] },
ingestionStatus: { operator: FilterOperator.OR, constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }] } ingestionStatus: { operator: FilterOperator.OR, constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }] },
cloneStatus: { operator: FilterOperator.OR, constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }] }
}); });
@@ -350,13 +365,13 @@ function formatDate(dateString) {
const getStatus = (data) => { const getStatus = (data) => {
if (data.ingestionStatus == 'INGESTED') { if (data.ingestionStatus == 'INGESTED') {
return 'success'; return 'success';
} else if (data.ingestionStatus === 'INGESTION-IN-PROGRESS' || data.ingestionStatus === 'REPO-CLONE-IN-PROGRESS') { } else if (data.ingestionStatus === 'IN-PROGRESS' || data.cloneStatus === 'IN-PROGRESS') {
return 'info'; return 'info';
} else if (data.ingestionStatus === 'INGESTION-ERROR' || data.ingestionStatus === 'REPO-CLONE-FAILED') { } else if (data.ingestionStatus === 'ERROR' || data.cloneStatus === 'IN-PROGRESS') {
return 'danger'; return 'danger';
} else if (data.ingestionStatus === 'REPO-NEW') { } else if (data.ingestionStatus === 'NEW' || data.cloneStatus === 'NEW') {
return 'warning'; return 'warning';
} else if (data.ingestionStatus === 'REPO-CLONE-COMPLETED') { } else if (data.ingestionStatus === 'COMPLETED' || data.cloneStatus === 'COMPLETED') {
return 'contrast'; return 'contrast';
} else { } else {
return 'secondary'; return 'secondary';
@@ -466,7 +481,7 @@ const collapseAll = () => {
//disable button //disable button
function isButtonDisabled(data) { function isButtonDisabled(data) {
return data.ingestionStatus !== 'REPO-CLONE-COMPLETED'; return data.cloneStatus !== 'COMPLETED';
} }
</script> </script>

View File

@@ -41,8 +41,8 @@
:rowsPerPageOptions="[10, 15, 20, 50, 100]" dataKey="id" :rowHover="true" rowGroupMode="subheader" :rowsPerPageOptions="[10, 15, 20, 50, 100]" dataKey="id" :rowHover="true" rowGroupMode="subheader"
groupRowsBy="repoName" sortMode="single" sortField="ksGitIngestionInfo.metadata.KsApplicationName" groupRowsBy="repoName" sortMode="single" sortField="ksGitIngestionInfo.metadata.KsApplicationName"
:sortOrder="1" filterDisplay="menu" :loading="loading" :sortOrder="1" filterDisplay="menu" :loading="loading"
:globalFilterFields="['branch', 'ingestionStatus', 'ingestionDateFormat']" tableStyle="min-width: 70rem" :globalFilterFields="['branch', 'cloneStatus', 'ingestionStatus', 'ingestionDateFormat']"
removableSort> tableStyle="min-width: 70rem" removableSort>
<template #header> <template #header>
<div class="flex flex-wrap gap-2 items-center justify-between"> <div class="flex flex-wrap gap-2 items-center justify-between">
<h4 class="m-0">Manage Repositories</h4> <h4 class="m-0">Manage Repositories</h4>
@@ -87,7 +87,21 @@
</template> </template>
</Column> </Column>
<Column field="ingestionStatus" header="Clone Status" sortable> <Column field="cloneStatus" header="Clone Status" sortable>
<template #body="slotProps">
<Tag :value="slotProps.data.cloneStatus" :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({ cloneStatus: option })" />
</template>
</Select>
</template>
</Column>
<Column field="ingestionStatus" header="Ingestion Status" sortable>
<template #body="slotProps"> <template #body="slotProps">
<Tag :value="slotProps.data.ingestionStatus" :severity="getStatus(slotProps.data)" /> <Tag :value="slotProps.data.ingestionStatus" :severity="getStatus(slotProps.data)" />
</template> </template>
@@ -115,7 +129,7 @@
</template> </template>
</Column> </Column>
<Column field="reverseEngineeringStatus" header="ReverseEngineeringStatus" sortable> <Column field="reverseEngineeringStatus" header="RE Status" sortable>
<template #body="slotProps"> <template #body="slotProps">
<Tag :value="slotProps.data.reverseEngineeringStatus" :severity="getStatus(slotProps.data)" /> <Tag :value="slotProps.data.reverseEngineeringStatus" :severity="getStatus(slotProps.data)" />
</template> </template>
@@ -233,7 +247,7 @@ const expandedRows = ref({});
const ingestionResult = ref(''); const ingestionResult = ref('');
const popupTitle = ref(''); const popupTitle = ref('');
const popupMessage = 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 statuses = ref(['ERROR', 'IN-PROGRESS', 'INGESTED', 'NEW', 'COMPLETED']);
const collapsed = ref(1) const collapsed = ref(1)
const theme = ref('bright:inverted') const theme = ref('bright:inverted')
@@ -323,7 +337,8 @@ const filters = ref({
id: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }] }, id: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }] },
branch: { 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 }] }, ingestionDateFormat: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.DATE_IS }] },
ingestionStatus: { operator: FilterOperator.OR, constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }] } ingestionStatus: { operator: FilterOperator.OR, constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }] },
cloneStatus: { operator: FilterOperator.OR, constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }] }
}); });
@@ -424,13 +439,13 @@ function formatDate(dateString) {
const getStatus = (data) => { const getStatus = (data) => {
if (data.ingestionStatus == 'INGESTED') { if (data.ingestionStatus == 'INGESTED') {
return 'success'; return 'success';
} else if (data.ingestionStatus === 'INGESTION-IN-PROGRESS' || data.ingestionStatus === 'REPO-CLONE-IN-PROGRESS') { } else if (data.ingestionStatus === 'IN-PROGRESS' || data.cloneStatus === 'IN-PROGRESS') {
return 'info'; return 'info';
} else if (data.ingestionStatus === 'INGESTION-ERROR' || data.ingestionStatus === 'REPO-CLONE-FAILED') { } else if (data.ingestionStatus === 'ERROR' || data.cloneStatus === 'ERROR') {
return 'danger'; return 'danger';
} else if (data.ingestionStatus === 'REPO-NEW') { } else if (data.ingestionStatus === 'NEW' || data.cloneStatus === 'NEW') {
return 'warning'; return 'warning';
} else if (data.ingestionStatus === 'REPO-CLONE-COMPLETED') { } else if (data.ingestionStatus === 'COMPLETED' || data.cloneStatus === 'COMPLETED') {
return 'contrast'; return 'contrast';
} else { } else {
return 'secondary'; return 'secondary';
@@ -540,7 +555,7 @@ const collapseAll = () => {
//disable button //disable button
function isButtonDisabled(data) { function isButtonDisabled(data) {
return data.ingestionStatus !== 'REPO-CLONE-COMPLETED'; return data.cloneStatus !== 'COMPLETED';
} }
</script> </script>