diff options
Diffstat (limited to 'app/assets/javascripts/pipelines/components/pipeline_tabs.vue')
-rw-r--r-- | app/assets/javascripts/pipelines/components/pipeline_tabs.vue | 31 |
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" |