diff options
Diffstat (limited to 'app/assets/javascripts/jobs/components/table/cells/duration_cell.vue')
-rw-r--r-- | app/assets/javascripts/jobs/components/table/cells/duration_cell.vue | 49 |
1 files changed, 49 insertions, 0 deletions
diff --git a/app/assets/javascripts/jobs/components/table/cells/duration_cell.vue b/app/assets/javascripts/jobs/components/table/cells/duration_cell.vue new file mode 100644 index 00000000000..ba5732d3d43 --- /dev/null +++ b/app/assets/javascripts/jobs/components/table/cells/duration_cell.vue @@ -0,0 +1,49 @@ +<script> +import { GlIcon, GlTooltipDirective } from '@gitlab/ui'; +import timeagoMixin from '~/vue_shared/mixins/timeago'; + +export default { + iconSize: 12, + directives: { + GlTooltip: GlTooltipDirective, + }, + components: { + GlIcon, + }, + mixins: [timeagoMixin], + props: { + job: { + type: Object, + required: true, + }, + }, + computed: { + finishedTime() { + return this.job?.finishedAt; + }, + duration() { + return this.job?.duration; + }, + }, +}; +</script> + +<template> + <div> + <div v-if="duration" data-testid="job-duration"> + <gl-icon name="timer" :size="$options.iconSize" data-testid="duration-icon" /> + {{ durationTimeFormatted(duration) }} + </div> + <div v-if="finishedTime" data-testid="job-finished-time"> + <gl-icon name="calendar" :size="$options.iconSize" data-testid="finished-time-icon" /> + <time + v-gl-tooltip + :title="tooltipTitle(finishedTime)" + data-placement="top" + data-container="body" + > + {{ timeFormatted(finishedTime) }} + </time> + </div> + </div> +</template> |