diff options
Diffstat (limited to 'app/assets/javascripts/pipelines/components/pipeline_tabs.vue')
-rw-r--r-- | app/assets/javascripts/pipelines/components/pipeline_tabs.vue | 62 |
1 files changed, 43 insertions, 19 deletions
diff --git a/app/assets/javascripts/pipelines/components/pipeline_tabs.vue b/app/assets/javascripts/pipelines/components/pipeline_tabs.vue index 2a78636261b..3798863ae60 100644 --- a/app/assets/javascripts/pipelines/components/pipeline_tabs.vue +++ b/app/assets/javascripts/pipelines/components/pipeline_tabs.vue @@ -1,12 +1,13 @@ <script> 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'; +import { + failedJobsTabName, + jobsTabName, + needsTabName, + pipelineTabName, + testReportTabName, +} from '../constants'; export default { i18n: { @@ -19,20 +20,16 @@ export default { }, }, tabNames: { + pipeline: pipelineTabName, needs: needsTabName, jobs: jobsTabName, failures: failedJobsTabName, tests: testReportTabName, }, components: { - Dag, GlBadge, GlTab, GlTabs, - JobsApp, - FailedJobsApp, - PipelineGraphWrapper, - TestReports, }, inject: [ 'defaultTabValue', @@ -41,14 +38,27 @@ export default { 'totalJobCount', 'testsCount', ], + data() { + return { + activeTab: this.defaultTabValue, + }; + }, computed: { showFailedJobsTab() { return this.failedJobsCount > 0; }, }, + watch: { + $route(to) { + this.activeTab = to.name; + }, + }, methods: { isActive(tabName) { - return tabName === this.defaultTabValue; + return tabName === this.activeTab; + }, + navigateTo(tabName) { + this.$router.push({ name: tabName }); }, }, }; @@ -59,10 +69,12 @@ export default { <gl-tab ref="pipelineTab" :title="$options.i18n.tabs.pipelineTitle" + :active="isActive($options.tabNames.pipeline)" data-testid="pipeline-tab" lazy + @click="navigateTo($options.tabNames.pipeline)" > - <pipeline-graph-wrapper /> + <router-view /> </gl-tab> <gl-tab ref="dagTab" @@ -70,15 +82,21 @@ export default { :active="isActive($options.tabNames.needs)" data-testid="dag-tab" lazy + @click="navigateTo($options.tabNames.needs)" > - <dag /> + <router-view /> </gl-tab> - <gl-tab :active="isActive($options.tabNames.jobs)" data-testid="jobs-tab" lazy> + <gl-tab + :active="isActive($options.tabNames.jobs)" + data-testid="jobs-tab" + lazy + @click="navigateTo($options.tabNames.jobs)" + > <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 /> + <router-view /> </gl-tab> <gl-tab v-if="showFailedJobsTab" @@ -86,19 +104,25 @@ export default { :active="isActive($options.tabNames.failures)" data-testid="failed-jobs-tab" lazy + @click="navigateTo($options.tabNames.failures)" > <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" /> + <router-view :failed-jobs-summary="failedJobsSummary" /> </gl-tab> - <gl-tab :active="isActive($options.tabNames.tests)" data-testid="tests-tab" lazy> + <gl-tab + :active="isActive($options.tabNames.tests)" + data-testid="tests-tab" + lazy + @click="navigateTo($options.tabNames.tests)" + > <template #title> <span class="gl-mr-2">{{ $options.i18n.tabs.testsTitle }}</span> <gl-badge size="sm" data-testid="tests-counter">{{ testsCount }}</gl-badge> </template> - <test-reports /> + <router-view /> </gl-tab> <slot></slot> </gl-tabs> |