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
107
108
|
<script>
import { reportToSentry } from '../../utils';
import { JOB_DROPDOWN, SINGLE_JOB } from './constants';
import JobItem from './job_item.vue';
/**
* Renders the dropdown for the pipeline graph.
*
* The object provided as `group` corresponds to app/serializers/job_group_entity.rb.
*
*/
export default {
components: {
JobItem,
},
props: {
group: {
type: Object,
required: true,
},
pipelineId: {
type: Number,
required: false,
default: -1,
},
cssClassJobName: {
type: [String, Array],
required: false,
default: '',
},
stageName: {
type: String,
required: false,
default: '',
},
},
jobItemTypes: {
jobDropdown: JOB_DROPDOWN,
singleJob: SINGLE_JOB,
},
computed: {
computedJobId() {
return this.pipelineId > -1 ? `${this.group.name}-${this.pipelineId}` : '';
},
tooltipText() {
const { name, status } = this.group;
return `${name} - ${status.label}`;
},
jobGroupClasses() {
return [this.cssClassJobName, `job-${this.group.status.group}`];
},
},
errorCaptured(err, _vm, info) {
reportToSentry('job_group_dropdown', `error: ${err}, info: ${info}`);
},
methods: {
pipelineActionRequestComplete() {
this.$emit('pipelineActionRequestComplete');
},
},
};
</script>
<template>
<!-- eslint-disable @gitlab/vue-no-data-toggle -->
<div
:id="computedJobId"
class="ci-job-dropdown-container dropdown dropright"
data-qa-selector="job_dropdown_container"
>
<button
type="button"
data-toggle="dropdown"
data-display="static"
:class="jobGroupClasses"
class="dropdown-menu-toggle gl-pipeline-job-width! gl-pr-4!"
>
<div class="gl-display-flex gl-align-items-stretch gl-justify-content-space-between">
<job-item
:type="$options.jobItemTypes.jobDropdown"
:group-tooltip="tooltipText"
:job="group"
:stage-name="stageName"
/>
<div class="gl-font-weight-100 gl-font-size-lg gl-ml-n4">{{ group.size }}</div>
</div>
</button>
<ul
class="dropdown-menu big-pipeline-graph-dropdown-menu js-grouped-pipeline-dropdown"
data-qa-selector="jobs_dropdown_menu"
>
<li class="scrollable-menu">
<ul>
<li v-for="job in group.jobs" :key="job.id">
<job-item
:dropdown-length="group.size"
:job="job"
:type="$options.jobItemTypes.singleJob"
css-class-job-name="mini-pipeline-graph-dropdown-item"
@pipelineActionRequestComplete="pipelineActionRequestComplete"
/>
</li>
</ul>
</li>
</ul>
</div>
</template>
|
