1 files changed, 22 insertions, 9 deletions
diff --git a/app/assets/javascripts/pipelines/components/pipeline_tabs.vue b/app/assets/javascripts/pipelines/components/pipeline_tabs.vue
index 66d30c10362..e1745969649 100644
--- a/app/assets/javascripts/pipelines/components/pipeline_tabs.vue
+++ b/app/assets/javascripts/pipelines/components/pipeline_tabs.vue
@@ -1,9 +1,10 @@
 <script>
-import { GlTabs, GlTab } from '@gitlab/ui';
+import { GlBadge, GlTabs, GlTab } from '@gitlab/ui';
 import { __ } from '~/locale';
 import { failedJobsTabName, jobsTabName, needsTabName, testReportTabName } from '../constants';
 import PipelineGraphWrapper from './graph/graph_component_wrapper.vue';
 import Dag from './dag/dag.vue';
+import FailedJobsApp from './jobs/failed_jobs_app.vue';
 import JobsApp from './jobs/jobs_app.vue';
 import TestReports from './test_reports/test_reports.vue';
 
@@ -25,14 +26,20 @@ export default {
   },
   components: {
     Dag,
+    GlBadge,
     GlTab,
     GlTabs,
     JobsApp,
-    FailedJobsApp: JobsApp,
+    FailedJobsApp,
     PipelineGraphWrapper,
     TestReports,
   },
-  inject: ['defaultTabValue'],
+  inject: ['defaultTabValue', 'failedJobsCount', 'failedJobsSummary', 'totalJobCount'],
+  computed: {
+    showFailedJobsTab() {
+      return this.failedJobsCount > 0;
+    },
+  },
   methods: {
     isActive(tabName) {
       return tabName === this.defaultTabValue;
@@ -54,19 +61,25 @@ export default {
     >
       <dag />
     </gl-tab>
-    <gl-tab
-      :title="$options.i18n.tabs.jobsTitle"
-      :active="isActive($options.tabNames.jobs)"
-      data-testid="jobs-tab"
-    >
+    <gl-tab :active="isActive($options.tabNames.jobs)" data-testid="jobs-tab" lazy>
+      <template #title>
+        <span class="gl-mr-2">{{ $options.i18n.tabs.jobsTitle }}</span>
+        <gl-badge size="sm" data-testid="builds-counter">{{ totalJobCount }}</gl-badge>
+      </template>
       <jobs-app />
     </gl-tab>
     <gl-tab
+      v-if="showFailedJobsTab"
       :title="$options.i18n.tabs.failedJobsTitle"
       :active="isActive($options.tabNames.failures)"
       data-testid="failed-jobs-tab"
+      lazy
     >
-      <failed-jobs-app />
+      <template #title>
+        <span class="gl-mr-2">{{ $options.i18n.tabs.failedJobsTitle }}</span>
+        <gl-badge size="sm" data-testid="failed-builds-counter">{{ failedJobsCount }}</gl-badge>
+      </template>
+      <failed-jobs-app :failed-jobs-summary="failedJobsSummary" />
     </gl-tab>
     <gl-tab
       :title="$options.i18n.tabs.testsTitle"