Press n or j to go to the next uncovered block, b, p or k for the previous block.
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 | <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'; 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: '', }, }, computed: { isLink() { return this.podName !== ''; }, cssClass() { return { [`deployment-instance-${this.status}`]: true, 'deployment-instance-canary': !this.stable, link: this.isLink, }; }, }, }; </script> <template> <gl-link v-gl-tooltip :class="cssClass" :title="tooltipText" class="deployment-instance d-flex justify-content-center gl-align-items-center" /> </template> |