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
|
<script>
import { GlIcon } from '@gitlab/ui';
import PipelineStages from './pipeline_stages.vue';
import LinkedPipelinesMiniList from './linked_pipelines_mini_list.vue';
/**
* Renders the pipeline mini graph.
*/
export default {
components: {
GlIcon,
LinkedPipelinesMiniList,
PipelineStages,
},
arrowStyles: [
'arrow-icon gl-display-inline-block gl-mx-1 gl-text-gray-500 gl-vertical-align-middle!',
],
props: {
downstreamPipelines: {
type: Array,
required: false,
default: () => [],
},
isMergeTrain: {
type: Boolean,
required: false,
default: false,
},
pipelinePath: {
type: String,
required: false,
default: '',
},
stages: {
type: Array,
required: true,
default: () => [],
},
updateDropdown: {
type: Boolean,
required: false,
default: false,
},
upstreamPipeline: {
type: Object,
required: false,
default: () => {},
},
},
computed: {
hasDownstreamPipelines() {
return Boolean(this.downstreamPipelines.length);
},
},
};
</script>
<template>
<div data-testid="pipeline-mini-graph">
<linked-pipelines-mini-list
v-if="upstreamPipeline"
:triggered-by="/* eslint-disable @gitlab/vue-no-new-non-primitive-in-template */ [
upstreamPipeline,
] /* eslint-enable @gitlab/vue-no-new-non-primitive-in-template */"
data-testid="pipeline-mini-graph-upstream"
/>
<gl-icon
v-if="upstreamPipeline"
:class="$options.arrowStyles"
name="long-arrow"
data-testid="upstream-arrow-icon"
/>
<pipeline-stages
:is-merge-train="isMergeTrain"
:stages="stages"
:update-dropdown="updateDropdown"
data-testid="pipeline-stages"
@miniGraphStageClick="$emit('miniGraphStageClick')"
/>
<gl-icon
v-if="hasDownstreamPipelines"
:class="$options.arrowStyles"
name="long-arrow"
data-testid="downstream-arrow-icon"
/>
<linked-pipelines-mini-list
v-if="hasDownstreamPipelines"
:triggered="downstreamPipelines"
:pipeline-path="pipelinePath"
data-testid="pipeline-mini-graph-downstream"
/>
</div>
</template>
|
