diff options
Diffstat (limited to 'app/assets/javascripts/vue_shared/components/deployment_instance.vue')
-rw-r--r-- | app/assets/javascripts/vue_shared/components/deployment_instance.vue | 91 |
1 files changed, 91 insertions, 0 deletions
diff --git a/app/assets/javascripts/vue_shared/components/deployment_instance.vue b/app/assets/javascripts/vue_shared/components/deployment_instance.vue new file mode 100644 index 00000000000..41b783aa011 --- /dev/null +++ b/app/assets/javascripts/vue_shared/components/deployment_instance.vue @@ -0,0 +1,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> |