1 files changed, 66 insertions, 0 deletions
diff --git a/app/assets/javascripts/jobs/components/table/jobs_table_tabs.vue b/app/assets/javascripts/jobs/components/table/jobs_table_tabs.vue
new file mode 100644
index 00000000000..95d265fce60
--- /dev/null
+++ b/app/assets/javascripts/jobs/components/table/jobs_table_tabs.vue
@@ -0,0 +1,66 @@
+<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>
+    <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>