91 lines
2.2 KiB
Vue
91 lines
2.2 KiB
Vue
<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>
|