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 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 | 4x 13x 13x 13x 13x 13x 12x 13x 13x 13x 2x 1x | <!-- eslint-disable vue/multi-word-component-names --> <script> import { GlLoadingIcon, GlIcon, GlTooltipDirective, GlBadge } from '@gitlab/ui'; import { __ } from '~/locale'; import Item from './item.vue'; export default { directives: { GlTooltip: GlTooltipDirective, }, components: { GlIcon, GlBadge, Item, GlLoadingIcon, }, props: { stage: { type: Object, required: true, }, }, data() { return { showTooltip: false, }; }, computed: { collapseIcon() { return this.stage.isCollapsed ? 'chevron-lg-down' : 'chevron-lg-up'; }, showLoadingIcon() { return this.stage.isLoading && !this.stage.jobs.length; }, stageTitle() { const prefix = __('Stage'); return `${prefix}: ${this.stage.name}`; }, jobsCount() { return this.stage.jobs.length; }, }, mounted() { const { stageTitle } = this.$refs; this.showTooltip = stageTitle.scrollWidth > stageTitle.offsetWidth; this.$emit('fetch', this.stage); }, methods: { toggleCollapsed() { this.$emit('toggleCollapsed', this.stage.id); }, clickViewLog(job) { this.$emit('clickViewLog', job); }, }, }; </script> <template> <div class="ide-stage card gl-mt-3"> <div :class="{ 'border-bottom-0': stage.isCollapsed, }" class="card-header gl-align-items-center gl-cursor-pointer gl-display-flex" data-testid="card-header" @click="toggleCollapsed" > <strong ref="stageTitle" v-gl-tooltip="showTooltip" :title="showTooltip ? stage.name : null" data-container="body" class="gl-text-truncate" data-testid="stage-title" > {{ stageTitle }} </strong> <div v-if="!stage.isLoading || stage.jobs.length" class="gl-mr-3 gl-ml-2"> <gl-badge>{{ jobsCount }}</gl-badge> </div> <gl-icon :name="collapseIcon" class="gl-absolute gl-right-5" /> </div> <div v-show="!stage.isCollapsed" class="card-body p-0" data-testid="job-list"> <gl-loading-icon v-if="showLoadingIcon" size="sm" /> <template v-else> <item v-for="job in stage.jobs" :key="job.id" :job="job" @clickViewLog="clickViewLog" /> </template> </div> </div> </template> |