1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
|
<script>
import { s__ } from '~/locale';
import ReportItem from '~/reports/components/report_item.vue';
import SmartVirtualList from '~/vue_shared/components/smart_virtual_list.vue';
export default {
components: {
ReportItem,
SmartVirtualList,
},
props: {
component: {
type: String,
required: false,
default: '',
},
nestedLevel: {
type: Number,
required: false,
default: 0,
validator: (value) => [0, 1, 2].includes(value),
},
resolvedIssues: {
type: Array,
required: false,
default: () => [],
},
unresolvedIssues: {
type: Array,
required: false,
default: () => [],
},
resolvedHeading: {
type: String,
required: false,
default: s__('ciReport|Fixed'),
},
unresolvedHeading: {
type: String,
required: false,
default: s__('ciReport|New'),
},
},
groups: ['unresolved', 'resolved'],
typicalReportItemHeight: 32,
maxShownReportItems: 20,
computed: {
groups() {
return this.$options.groups
.map((group) => ({
name: group,
issues: this[`${group}Issues`],
heading: this[`${group}Heading`],
}))
.filter(({ issues }) => issues.length > 0);
},
listLength() {
// every group has a header which is rendered as a list item
const groupsCount = this.groups.length;
const issuesCount = this.groups.reduce(
(totalIssues, { issues }) => totalIssues + issues.length,
0,
);
return groupsCount + issuesCount;
},
listClasses() {
return {
'gl-pl-9': this.nestedLevel === 1,
'gl-pl-11-5': this.nestedLevel === 2,
};
},
},
};
</script>
<template>
<smart-virtual-list
:length="listLength"
:remain="$options.maxShownReportItems"
:size="$options.typicalReportItemHeight"
:class="listClasses"
class="report-block-container"
wtag="ul"
wclass="report-block-list"
>
<template v-for="(group, groupIndex) in groups">
<h2
:key="group.name"
:data-testid="`${group.name}Heading`"
:class="[groupIndex > 0 ? 'mt-2' : 'mt-0']"
class="h5 mb-1"
>
{{ group.heading }}
</h2>
<report-item
v-for="(issue, issueIndex) in group.issues"
:key="`${group.name}-${issue.name}-${group.name}-${issueIndex}`"
:issue="issue"
:show-report-section-status-icon="false"
:component="component"
status="none"
/>
</template>
</smart-virtual-list>
</template>
|
