All files / app/assets/javascripts/jobs/components/table jobs_table_tabs.vue

100% Statements 4/4
100% Branches 0/0
100% Functions 2/2
100% Lines 4/4

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  2x 2x                                   8x                                                             158x                              
<script>
import { GlBadge, GlTab, GlTabs } from '@gitlab/ui';
import { __ } from '~/locale';
 
export default {
  components: {
    GlBadge,
    GlTab,
    GlTabs,
  },
  inject: {
    jobCounts: {
      default: {},
    },
    jobStatuses: {
      default: {},
    },
  },
  computed: {
    tabs() {
      return [
        {
          text: __('All'),
          count: this.jobCounts.all,
          scope: null,
          testId: 'jobs-all-tab',
        },
        {
          text: __('Pending'),
          count: this.jobCounts.pending,
          scope: this.jobStatuses.pending,
          testId: 'jobs-pending-tab',
        },
        {
          text: __('Running'),
          count: this.jobCounts.running,
          scope: this.jobStatuses.running,
          testId: 'jobs-running-tab',
        },
        {
          text: __('Finished'),
          count: this.jobCounts.finished,
          scope: [this.jobStatuses.success, this.jobStatuses.failed, this.jobStatuses.canceled],
          testId: 'jobs-finished-tab',
        },
      ];
    },
  },
};
</script>
 
<template>
  <gl-tabs content-class="gl-pb-0">
    <gl-tab
      v-for="tab in tabs"
      :key="tab.text"
      :title-link-attributes="{ 'data-testid': tab.testId }"
      @click="$emit('fetchJobsByStatus', tab.scope)"
    >
      <template #title>
        <span>{{ tab.text }}</span>
        <gl-badge size="sm" class="gl-tab-counter-badge">{{ tab.count }}</gl-badge>
      </template>
    </gl-tab>
  </gl-tabs>
</template>