gitlab-org--gitlab-foss/app/assets/javascripts/vue_shared/components/deployment_instance.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>