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>
/**
* An instance in deploy board is represented by a square in this mockup:
* https://gitlab.com/gitlab-org/gitlab-foss/uploads/2f655655c0eadf655d0ae7467b53002a/environments__deploy-graphic.png
*
* Each instance has a state and a tooltip.
* The state needs to be represented in different colors,
* see more information about this in
* https://gitlab.com/gitlab-org/gitlab/uploads/f1f00df6293d30f241dbeaa876a1e939/Screen_Shot_2019-11-26_at_3.35.43_PM.png
*
* An instance can represent a normal deploy or a canary deploy. In the latter we need to provide
* this information in the tooltip and the colors.
* Mockup is https://gitlab.com/gitlab-org/gitlab/issues/35570
*/
import { GlLink, GlTooltipDirective } from '@gitlab/ui';
import { mergeUrlParams } from '~/lib/utils/url_utility';
export default {
components: {
GlLink,
},
directives: {
GlTooltip: GlTooltipDirective,
},
props: {
/**
* Represents the status of the pod. Each state is represented with a different
* color.
* It should be one of the following:
* succeeded || running || failed || pending || unknown
*/
status: {
type: String,
required: true,
default: 'succeeded',
},
tooltipText: {
type: String,
required: false,
default: '',
},
stable: {
type: Boolean,
required: false,
default: true,
},
podName: {
type: String,
required: false,
default: '',
},
logsPath: {
type: String,
required: false,
default: '',
},
},
computed: {
isLink() {
return this.logsPath !== '' && this.podName !== '';
},
cssClass() {
return {
[`deployment-instance-${this.status}`]: true,
'deployment-instance-canary': !this.stable,
link: this.isLink,
};
},
computedLogPath() {
return this.isLink ? mergeUrlParams({ pod_name: this.podName }, this.logsPath) : null;
},
},
};
</script>
<template>
<gl-link
v-gl-tooltip
:class="cssClass"
:title="tooltipText"
:href="computedLogPath"
class="deployment-instance d-flex justify-content-center align-items-center"
/>
</template>
|
