Skip to content

Commit 7c11140

Browse files
olblakolblak
authored
feat: add pagination support & a few revamp (#64)
* feat: add pagination support to reports component Signed-off-by: Olivier Vernin <olivier.vernin@suse.com> * feat: refactor the config view * feat: add pagination support to configs view * feat: add pagination support to scm summary view * feat: revamp about view * feat: revamp landing page --------- Signed-off-by: Olivier Vernin <olivier.vernin@suse.com>
1 parent 2d79fc8 commit 7c11140

File tree

8 files changed

+1770
-1253
lines changed

8 files changed

+1770
-1253
lines changed

‎src/components/pipeline/configs/GitRepositorySection.vue‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
<!-- GitRepositorySection.vue -->
2+
<template>
3+
<v-expansion-panels flat variant="accordion" class="mb-4">
4+
<v-expansion-panel>
5+
<v-expansion-panel-title>
6+
<div class="d-flex align-center">
7+
<v-icon class="mr-3" :icon="getGitProviderIcon(scmUrl)"></v-icon>
8+
<div>
9+
<div class="font-weight-medium">
10+
{{ getRepositoryDisplayName(scmUrl) }}
11+
</div>
12+
<div class="text-caption text-medium-emphasis">
13+
{{ Object.keys(scmData).length }} branch(es)
14+
</div>
15+
</div>
16+
</div>
17+
</v-expansion-panel-title>
18+
19+
<v-expansion-panel-text>
20+
<div v-for="(branchData, branchName) in scmData" :key="branchName">
21+
<div class="d-flex align-center mb-3">
22+
<v-icon class="mr-2" size="small">mdi-source-branch</v-icon>
23+
<span class="font-weight-medium">{{ branchName }}</span>
24+
<v-chip class="ml-2" size="x-small" variant="outlined">
25+
{{ branchData.length }} reports
26+
</v-chip>
27+
</div>
28+
29+
<v-row>
30+
<v-col
31+
v-for="report in branchData"
32+
:key="report.ID"
33+
cols="12"
34+
md="6"
35+
lg="4"
36+
>
37+
<ReportCard
38+
:report="report"
39+
:config-type="configType"
40+
@view-details="$emit('view-report', $event)"
41+
/>
42+
</v-col>
43+
</v-row>
44+
</div>
45+
</v-expansion-panel-text>
46+
</v-expansion-panel>
47+
</v-expansion-panels>
48+
</template>
49+
50+
<script>
51+
import { extractGitURLInfo } from '@/composables/git'
52+
import ReportCard from './ReportCard.vue'
53+
54+
export default {
55+
name: 'GitRepositorySection',
56+
components: { ReportCard },
57+
props: {
58+
scmUrl: String,
59+
scmData: Object,
60+
configType: String
61+
},
62+
emits: ['view-report'],
63+
methods: {
64+
getGitProviderIcon(url) {
65+
const info = extractGitURLInfo(url)
66+
const icons = {
67+
'github': 'mdi-github',
68+
'gitlab': 'mdi-gitlab',
69+
'bitbucket': 'mdi-bitbucket'
70+
}
71+
return icons[info?.provider] || 'mdi-git'
72+
},
73+
getRepositoryDisplayName(url) {
74+
const info = extractGitURLInfo(url)
75+
return info?.provider !== 'unknown' ? `${info.owner}/${info.repo}` : url
76+
}
77+
}
78+
}
79+
</script>

‎src/components/pipeline/configs/ReportCard.vue‎

Lines changed: 153 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,153 @@
1+
<template>
2+
<v-card variant="outlined" class="report-card h-100" hover>
3+
<v-card-title class="pb-2">
4+
<div class="d-flex align-center">
5+
<v-icon class="mr-2" size="small">mdi-file-document-outline</v-icon>
6+
<span class="text-truncate">{{ report.Name || 'Unnamed Report' }}</span>
7+
</div>
8+
</v-card-title>
9+
10+
<v-card-subtitle class="pb-1">
11+
<div class="d-flex align-center flex-wrap gap-1">
12+
<v-chip size="x-small" :color="getResultColor(report.Result)" variant="tonal">
13+
{{ report.Result }}
14+
</v-chip>
15+
<v-chip size="x-small" color="grey" variant="outlined">
16+
{{ report.Kind }}
17+
</v-chip>
18+
</div>
19+
</v-card-subtitle>
20+
21+
<v-card-text class="flex-grow-1">
22+
<p class="text-body-2 line-clamp-3 mb-2">
23+
{{ report.Description || 'No description available' }}
24+
</p>
25+
26+
<!-- Condition-specific info -->
27+
<div v-if="configType === 'condition' && report.Pass !== undefined" class="mt-2">
28+
<v-chip size="x-small" :color="report.Pass ? 'success' : 'error'" variant="tonal">
29+
{{ report.Pass ? 'Passed' : 'Failed' }}
30+
</v-chip>
31+
</div>
32+
33+
<!-- Source-specific info -->
34+
<div v-if="configType === 'source' && report.NewInformation" class="mt-2">
35+
<div class="text-caption text-medium-emphasis">
36+
<strong>New:</strong> {{ report.NewInformation }}
37+
</div>
38+
</div>
39+
40+
<!-- Target-specific info -->
41+
<div v-if="configType === 'target'" class="mt-2">
42+
<div v-if="report.Information" class="text-caption text-medium-emphasis mb-1">
43+
<strong>Info:</strong> {{ report.Information }}
44+
</div>
45+
<div v-if="report.NewInformation" class="text-caption text-medium-emphasis mb-1">
46+
<strong>New:</strong> {{ report.NewInformation }}
47+
</div>
48+
<div v-if="report.Files && report.Files.length > 0" class="text-caption text-medium-emphasis">
49+
<strong>Files:</strong> {{ report.Files.length }} file(s)
50+
</div>
51+
</div>
52+
53+
<!-- Report metadata -->
54+
<div class="mt-2 pt-2 border-t-thin">
55+
<div class="d-flex align-center text-caption text-medium-emphasis">
56+
<v-icon size="12" class="mr-1">mdi-identifier</v-icon>
57+
ID: {{ report.ID }}
58+
</div>
59+
</div>
60+
</v-card-text>
61+
62+
<v-card-actions>
63+
<v-btn
64+
variant="text"
65+
size="small"
66+
prepend-icon="mdi-eye"
67+
@click="$emit('view-details', report.ID)"
68+
block
69+
color="grey-darken-3"
70+
>
71+
View Details
72+
</v-btn>
73+
</v-card-actions>
74+
</v-card>
75+
</template>
76+
77+
<script>
78+
export default {
79+
name: 'ReportCard',
80+
props: {
81+
report: {
82+
type: Object,
83+
required: true,
84+
validator(value) {
85+
return value && typeof value.ID !== 'undefined'
86+
}
87+
},
88+
configType: {
89+
type: String,
90+
required: true,
91+
validator(value) {
92+
return ['source', 'condition', 'target'].includes(value)
93+
}
94+
}
95+
},
96+
97+
emits: ['view-details'],
98+
99+
methods: {
100+
getResultColor(result) {
101+
const colors = {
102+
'success': 'success',
103+
'skipped': 'grey',
104+
'changed': 'warning',
105+
'failure': 'error',
106+
'attention': 'orange',
107+
'failed': 'error',
108+
'passed': 'success'
109+
}
110+
return colors[result?.toLowerCase()] || 'grey'
111+
}
112+
}
113+
}
114+
</script>
115+
116+
<style scoped>
117+
.report-card {
118+
border-radius: 8px;
119+
transition: all 0.2s ease;
120+
min-height: 200px;
121+
}
122+
123+
.report-card:hover {
124+
transform: translateY(-2px);
125+
box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
126+
}
127+
128+
.line-clamp-3 {
129+
display: -webkit-box;
130+
-webkit-box-orient: vertical;
131+
overflow: hidden;
132+
line-height: 1.4;
133+
}
134+
135+
.gap-1 {
136+
gap: 0.25rem;
137+
}
138+
139+
.border-t-thin {
140+
border-top: 1px solid rgba(var(--v-theme-outline), 0.2);
141+
}
142+
143+
/* Ensure card takes full height */
144+
.h-100 {
145+
height: 100%;
146+
display: flex;
147+
flex-direction: column;
148+
}
149+
150+
.flex-grow-1 {
151+
flex-grow: 1;
152+
}
153+
</style>

0 commit comments

Comments
 (0)