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
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
|
<script>
import { GlBadge, GlTooltipDirective } from '@gitlab/ui';
import CiIcon from './ci_icon.vue';
/**
* Renders CI Badge link with CI icon and status text based on
* API response shared between all places where it is used.
*
* Receives status object containing:
* status: {
* details_path or detailsPath: "/gitlab-org/gitlab-foss/pipelines/8150156" // url
* group:"running" // used for CSS class
* icon: "icon_status_running" // used to render the icon
* label:"running" // used for potential tooltip
* text:"running" // text rendered
* }
*
* Used in:
* - Pipelines table - first column
* - Jobs table - first column
* - Pipeline show view - header
* - Job show view - header
* - MR widget
* - Terraform table
* - On-demand scans list
*/
export default {
components: {
CiIcon,
GlBadge,
},
directives: {
GlTooltip: GlTooltipDirective,
},
props: {
status: {
type: Object,
required: true,
},
showText: {
type: Boolean,
required: false,
default: true,
},
badgeSize: {
type: String,
required: false,
default: 'md',
},
},
computed: {
title() {
return !this.showText ? this.status?.text : '';
},
detailsPath() {
// For now, this can either come from graphQL with camelCase or REST API in snake_case
return this.status.detailsPath || this.status.details_path;
},
badgeStyles() {
switch (this.status.icon) {
case 'status_success':
return {
textColor: 'gl-text-green-700',
variant: 'success',
};
case 'status_warning':
return {
textColor: 'gl-text-orange-700',
variant: 'warning',
};
case 'status_failed':
return {
textColor: 'gl-text-red-700',
variant: 'danger',
};
case 'status_running':
return {
textColor: 'gl-text-blue-700',
variant: 'info',
};
case 'status_pending':
return {
textColor: 'gl-text-orange-700',
variant: 'warning',
};
case 'status_canceled':
return {
textColor: 'gl-text-gray-700',
variant: 'neutral',
};
case 'status_manual':
return {
textColor: 'gl-text-gray-700',
variant: 'neutral',
};
// default covers the styles for the remainder of CI
// statuses that are not explicitly stated here
default:
return {
textColor: 'gl-text-gray-600',
variant: 'muted',
};
}
},
},
};
</script>
<template>
<gl-badge
v-gl-tooltip
:title="title"
:href="detailsPath"
:size="badgeSize"
:variant="badgeStyles.variant"
:data-testid="`ci-badge-${status.text}`"
data-qa-selector="status_badge_link"
@click="$emit('ciStatusBadgeClick')"
>
<ci-icon :status="status" />
<template v-if="showText">
<span
class="gl-ml-2 gl-white-space-nowrap"
:class="badgeStyles.textColor"
data-testid="ci-badge-text"
>
{{ status.text }}
</span>
</template>
</gl-badge>
</template>
|
