diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2022-11-17 14:33:21 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2022-11-17 14:33:21 +0300 |
commit | 7021455bd1ed7b125c55eb1b33c5a01f2bc55ee0 (patch) | |
tree | 5bdc2229f5198d516781f8d24eace62fc7e589e9 /app/assets/javascripts/pipelines/components | |
parent | 185b095e93520f96e9cfc31d9c3e69b498cdab7c (diff) |
Add latest changes from gitlab-org/gitlab@15-6-stable-eev15.6.0-rc42
Diffstat (limited to 'app/assets/javascripts/pipelines/components')
7 files changed, 75 insertions, 45 deletions
diff --git a/app/assets/javascripts/pipelines/components/dag/dag.vue b/app/assets/javascripts/pipelines/components/dag/dag.vue index 475dd3bf36e..be12df68f76 100644 --- a/app/assets/javascripts/pipelines/components/dag/dag.vue +++ b/app/assets/javascripts/pipelines/components/dag/dag.vue @@ -29,7 +29,7 @@ export default { dagDocPath: { default: null, }, - emptySvgPath: { + emptyDagSvgPath: { default: '', }, pipelineIid: { @@ -213,7 +213,7 @@ export default { /> <gl-empty-state v-else-if="hasNoDependentJobs" - :svg-path="emptySvgPath" + :svg-path="emptyDagSvgPath" :title="$options.emptyStateTexts.title" > <template #description> diff --git a/app/assets/javascripts/pipelines/components/pipeline_mini_graph/pipeline_stage.vue b/app/assets/javascripts/pipelines/components/pipeline_mini_graph/pipeline_stage.vue index f1c6c6633eb..ba150919e58 100644 --- a/app/assets/javascripts/pipelines/components/pipeline_mini_graph/pipeline_stage.vue +++ b/app/assets/javascripts/pipelines/components/pipeline_mini_graph/pipeline_stage.vue @@ -27,6 +27,7 @@ export default { }, dropdownPopperOpts: { placement: 'bottom', + positionFixed: true, }, components: { CiIcon, @@ -136,25 +137,19 @@ export default { :is-active="isDropdownOpen" :size="24" :status="stage.status" - class="gl-align-items-center gl-border gl-display-inline-flex gl-z-index-1" + class="gl-display-inline-flex gl-align-items-center gl-border gl-z-index-1" /> </template> - <div - v-if="isLoading" - class="gl-display-flex gl-justify-content-center gl-p-2" - data-testid="pipeline-stage-loading-state" - > + <div v-if="isLoading" class="gl--flex-center gl-p-2" data-testid="pipeline-stage-loading-state"> <gl-loading-icon size="sm" class="gl-mr-3" /> - <p class="gl-mb-0">{{ $options.i18n.loadingText }}</p> + <p class="gl-line-height-normal gl-mb-0">{{ $options.i18n.loadingText }}</p> </div> <ul v-else class="js-builds-dropdown-list scrollable-menu" data-testid="mini-pipeline-graph-dropdown-menu-list" > - <div - class="gl-align-items-center gl-border-b gl-display-flex gl-font-weight-bold gl-justify-content-center gl-pb-3" - > + <div class="gl--flex-center gl-border-b gl-font-weight-bold gl-pb-3"> <span class="gl-mr-1">{{ $options.i18n.stage }}</span> <span data-testid="pipeline-stage-dropdown-menu-title">{{ stageName }}</span> </div> 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> diff --git a/app/assets/javascripts/pipelines/components/pipelines_list/pipeline_url.vue b/app/assets/javascripts/pipelines/components/pipelines_list/pipeline_url.vue index 39d41415456..fe2ef2c2d71 100644 --- a/app/assets/javascripts/pipelines/components/pipelines_list/pipeline_url.vue +++ b/app/assets/javascripts/pipelines/components/pipelines_list/pipeline_url.vue @@ -115,6 +115,9 @@ export default { commitTitle() { return this.pipeline?.commit?.title; }, + pipelineName() { + return this.pipeline?.name; + }, }, methods: { trackClick(action) { @@ -125,7 +128,18 @@ export default { </script> <template> <div class="pipeline-tags" data-testid="pipeline-url-table-cell"> - <div class="commit-title gl-mb-2" data-testid="commit-title-container"> + <div v-if="pipelineName" class="gl-mb-2" data-testid="pipeline-name-container"> + <span class="gl-display-flex"> + <tooltip-on-truncate + :title="pipelineName" + class="gl-flex-grow-1 gl-text-truncate gl-text-gray-900" + > + {{ pipelineName }} + </tooltip-on-truncate> + </span> + </div> + + <div v-if="!pipelineName" class="commit-title gl-mb-2" data-testid="commit-title-container"> <span v-if="commitTitle" class="gl-display-flex"> <tooltip-on-truncate :title="commitTitle" class="gl-flex-grow-1 gl-text-truncate"> <gl-link diff --git a/app/assets/javascripts/pipelines/components/pipelines_list/time_ago.vue b/app/assets/javascripts/pipelines/components/pipelines_list/time_ago.vue index 387438fb726..cd44c998074 100644 --- a/app/assets/javascripts/pipelines/components/pipelines_list/time_ago.vue +++ b/app/assets/javascripts/pipelines/components/pipelines_list/time_ago.vue @@ -1,12 +1,14 @@ <script> import { GlIcon, GlTooltipDirective } from '@gitlab/ui'; -import { formatDate, getTimeago, durationTimeFormatted } from '~/lib/utils/datetime_utility'; +import { durationTimeFormatted } from '~/lib/utils/datetime_utility'; +import timeagoMixin from '~/vue_shared/mixins/timeago'; export default { directives: { GlTooltip: GlTooltipDirective, }, components: { GlIcon }, + mixins: [timeagoMixin], props: { pipeline: { type: Object, @@ -35,12 +37,6 @@ export default { showSkipped() { return !this.duration && !this.finishedTime && this.skipped; }, - timeFormatted() { - return getTimeago().format(this.finishedTime); - }, - tooltipTitle() { - return formatDate(this.finishedTime); - }, }, }; </script> @@ -73,12 +69,12 @@ export default { <time v-gl-tooltip - :title="tooltipTitle" + :title="tooltipTitle(finishedTime)" :datetime="finishedTime" data-placement="top" data-container="body" > - {{ timeFormatted }} + {{ timeFormatted(finishedTime) }} </time> </p> </div> diff --git a/app/assets/javascripts/pipelines/components/test_reports/test_case_details.vue b/app/assets/javascripts/pipelines/components/test_reports/test_case_details.vue index 69509c9088b..2d1f1945e5a 100644 --- a/app/assets/javascripts/pipelines/components/test_reports/test_case_details.vue +++ b/app/assets/javascripts/pipelines/components/test_reports/test_case_details.vue @@ -73,6 +73,7 @@ export default { <template> <gl-modal + data-testid="test-case-details-modal" :modal-id="modalId" :title="testCase.classname" :action-primary="$options.modalCloseButton" diff --git a/app/assets/javascripts/pipelines/components/test_reports/test_suite_table.vue b/app/assets/javascripts/pipelines/components/test_reports/test_suite_table.vue index 7d0f1ba4b5f..1cd28e027f3 100644 --- a/app/assets/javascripts/pipelines/components/test_reports/test_suite_table.vue +++ b/app/assets/javascripts/pipelines/components/test_reports/test_suite_table.vue @@ -112,21 +112,21 @@ export default { > <div class="table-section section-20 section-wrap"> <div role="rowheader" class="table-mobile-header">{{ __('Suite') }}</div> - <div class="table-mobile-content gl-md-pr-2 gl-overflow-wrap-break"> + <div class="table-mobile-content gl-pr-0 gl-sm-pr-2 gl-overflow-wrap-break"> <gl-friendly-wrap :symbols="$options.wrapSymbols" :text="testCase.classname" /> </div> </div> <div class="table-section section-40 section-wrap"> <div role="rowheader" class="table-mobile-header">{{ __('Name') }}</div> - <div class="table-mobile-content gl-md-pr-2 gl-overflow-wrap-break"> + <div class="table-mobile-content gl-pr-0 gl-sm-pr-2 gl-overflow-wrap-break"> <gl-friendly-wrap :symbols="$options.wrapSymbols" :text="testCase.name" /> </div> </div> <div class="table-section section-10 section-wrap"> <div role="rowheader" class="table-mobile-header">{{ __('Filename') }}</div> - <div class="table-mobile-content gl-md-pr-2 gl-overflow-wrap-break"> + <div class="table-mobile-content gl-pr-0 gl-sm-pr-2 gl-overflow-wrap-break"> <gl-link v-if="testCase.file" :href="testCase.filePath" target="_blank"> <gl-friendly-wrap :symbols="$options.wrapSymbols" :text="testCase.file" /> </gl-link> @@ -156,7 +156,7 @@ export default { <div role="rowheader" class="table-mobile-header"> {{ __('Duration') }} </div> - <div class="table-mobile-content gl-sm-pr-2"> + <div class="table-mobile-content gl-pr-0 gl-sm-pr-2"> {{ testCase.formattedTime }} </div> </div> |