diff options
Diffstat (limited to 'app/assets/javascripts/pipelines/components/graph/linked_pipeline.vue')
-rw-r--r-- | app/assets/javascripts/pipelines/components/graph/linked_pipeline.vue | 53 |
1 files changed, 32 insertions, 21 deletions
diff --git a/app/assets/javascripts/pipelines/components/graph/linked_pipeline.vue b/app/assets/javascripts/pipelines/components/graph/linked_pipeline.vue index 550b9daa521..733553e02c0 100644 --- a/app/assets/javascripts/pipelines/components/graph/linked_pipeline.vue +++ b/app/assets/javascripts/pipelines/components/graph/linked_pipeline.vue @@ -1,7 +1,7 @@ <script> import { GlLoadingIcon, GlTooltipDirective, GlDeprecatedButton } from '@gitlab/ui'; import CiStatus from '~/vue_shared/components/ci_icon.vue'; -import { __ } from '~/locale'; +import { __, sprintf } from '~/locale'; export default { directives: { @@ -28,7 +28,8 @@ export default { }, computed: { tooltipText() { - return `${this.projectName} - ${this.pipelineStatus.label}`; + return `${this.downstreamTitle} #${this.pipeline.id} - ${this.pipelineStatus.label} + ${this.sourceJobInfo}`; }, buttonId() { return `js-linked-pipeline-${this.pipeline.id}`; @@ -39,25 +40,32 @@ export default { projectName() { return this.pipeline.project.name; }, + downstreamTitle() { + return this.childPipeline ? __('child-pipeline') : this.pipeline.project.name; + }, parentPipeline() { // Refactor string match when BE returns Upstream/Downstream indicators return this.projectId === this.pipeline.project.id && this.columnTitle === __('Upstream'); }, childPipeline() { // Refactor string match when BE returns Upstream/Downstream indicators - return this.projectId === this.pipeline.project.id && this.columnTitle === __('Downstream'); + return this.projectId === this.pipeline.project.id && this.isDownstream; }, label() { - return this.parentPipeline ? __('Parent') : __('Child'); - }, - childTooltipText() { - return __('This pipeline was triggered by a parent pipeline'); + if (this.parentPipeline) { + return __('Parent'); + } else if (this.childPipeline) { + return __('Child'); + } + return __('Multi-project'); }, - parentTooltipText() { - return __('This pipeline triggered a child pipeline'); + isDownstream() { + return this.columnTitle === __('Downstream'); }, - labelToolTipText() { - return this.label === __('Parent') ? this.parentTooltipText : this.childTooltipText; + sourceJobInfo() { + return this.isDownstream + ? sprintf(__('Created by %{job}'), { job: this.pipeline.source_job.name }) + : ''; }, }, methods: { @@ -68,6 +76,12 @@ export default { hideTooltips() { this.$root.$emit('bv::hide::tooltip'); }, + onDownstreamHovered() { + this.$emit('downstreamHovered', this.pipeline.source_job.name); + }, + onDownstreamHoverLeave() { + this.$emit('downstreamHovered', ''); + }, }, }; </script> @@ -76,7 +90,10 @@ export default { <li ref="linkedPipeline" class="linked-pipeline build" - :class="{ 'child-pipeline': childPipeline }" + :class="{ 'downstream-pipeline': isDownstream }" + data-qa-selector="child_pipeline" + @mouseover="onDownstreamHovered" + @mouseleave="onDownstreamHoverLeave" > <gl-deprecated-button :id="buttonId" @@ -94,15 +111,9 @@ export default { css-classes="position-top-0" class="js-linked-pipeline-status" /> - <span class="str-truncated align-bottom"> {{ projectName }} • #{{ pipeline.id }} </span> - <div v-if="parentPipeline || childPipeline" class="parent-child-label-container"> - <span - v-gl-tooltip.bottom - :title="labelToolTipText" - class="badge badge-primary" - @mouseover="hideTooltips" - >{{ label }}</span - > + <span class="str-truncated"> {{ downstreamTitle }} • #{{ pipeline.id }} </span> + <div class="gl-pt-2"> + <span class="badge badge-primary" data-testid="downstream-pipeline-label">{{ label }}</span> </div> </gl-deprecated-button> </li> |