diff options
Diffstat (limited to 'app/assets/javascripts/pipelines/components/pipelines_list/time_ago.vue')
-rw-r--r-- | app/assets/javascripts/pipelines/components/pipelines_list/time_ago.vue | 44 |
1 files changed, 21 insertions, 23 deletions
diff --git a/app/assets/javascripts/pipelines/components/pipelines_list/time_ago.vue b/app/assets/javascripts/pipelines/components/pipelines_list/time_ago.vue index cd44c998074..960af030421 100644 --- a/app/assets/javascripts/pipelines/components/pipelines_list/time_ago.vue +++ b/app/assets/javascripts/pipelines/components/pipelines_list/time_ago.vue @@ -19,53 +19,51 @@ export default { duration() { return this.pipeline?.details?.duration; }, - finishedTime() { - return this.pipeline?.details?.finished_at; - }, - skipped() { - return this.pipeline?.details?.status?.label === 'skipped'; - }, - stuck() { - return this.pipeline.flags.stuck; - }, durationFormatted() { return durationTimeFormatted(this.duration); }, + finishedTime() { + return this.pipeline?.details?.finished_at; + }, showInProgress() { return !this.duration && !this.finishedTime && !this.skipped; }, showSkipped() { return !this.duration && !this.finishedTime && this.skipped; }, + skipped() { + return this.pipeline?.details?.status?.label === 'skipped'; + }, + stuck() { + return this.pipeline.flags.stuck; + }, }, }; </script> <template> - <div class="gl-display-block"> - <span v-if="showInProgress" data-testid="pipeline-in-progress"> + <div class="gl-display-flex gl-flex-direction-column time-ago"> + <span + v-if="showInProgress" + class="gl-display-inline-flex gl-align-items-center" + data-testid="pipeline-in-progress" + > <gl-icon v-if="stuck" name="warning" class="gl-mr-2" :size="12" data-testid="warning-icon" /> - <gl-icon - v-else - name="hourglass" - class="gl-vertical-align-baseline! gl-mr-2" - :size="12" - data-testid="hourglass-icon" - /> + <gl-icon v-else name="hourglass" class="gl-mr-2" :size="12" data-testid="hourglass-icon" /> {{ s__('Pipeline|In progress') }} </span> <span v-if="showSkipped" data-testid="pipeline-skipped"> - <gl-icon name="status_skipped_borderless" class="gl-mr-2" :size="16" /> + <gl-icon name="status_skipped_borderless" /> {{ s__('Pipeline|Skipped') }} </span> - <p v-if="duration" class="duration"> - <gl-icon name="timer" class="gl-vertical-align-baseline!" :size="12" /> + <p v-if="duration" class="duration gl-display-inline-flex gl-align-items-center"> + <gl-icon name="timer" class="gl-mr-2" :size="12" /> {{ durationFormatted }} </p> - <p v-if="finishedTime" class="finished-at d-none d-md-block"> - <gl-icon name="calendar" class="gl-vertical-align-baseline!" :size="12" /> + <p v-if="finishedTime" class="finished-at gl-display-inline-flex gl-align-items-center"> + <gl-icon name="calendar" class="gl-mr-2" :size="12" /> <time v-gl-tooltip |