1 files changed, 22 insertions, 12 deletions
diff --git a/app/assets/javascripts/pipelines/components/graph/graph_component.vue b/app/assets/javascripts/pipelines/components/graph/graph_component.vue
index 429122c8083..4dc6e51d2fc 100644
--- a/app/assets/javascripts/pipelines/components/graph/graph_component.vue
+++ b/app/assets/javascripts/pipelines/components/graph/graph_component.vue
@@ -43,7 +43,7 @@ export default {
   downstream: 'downstream',
   data() {
     return {
-      triggeredTopIndex: 1,
+      downstreamMarginTop: null,
     };
   },
   computed: {
@@ -77,26 +77,34 @@ export default {
     expandedTriggered() {
       return this.pipeline.triggered && this.pipeline.triggered.find(el => el.isExpanded);
     },
-
-    /**
-     * Calculates the margin top of the clicked downstream pipeline by
-     * adding the height of each linked pipeline and the margin
-     */
-    marginTop() {
-      return `${this.triggeredTopIndex * 52}px`;
-    },
     pipelineTypeUpstream() {
       return this.type !== this.$options.downstream && this.expandedTriggeredBy;
     },
     pipelineTypeDownstream() {
       return this.type !== this.$options.upstream && this.expandedTriggered;
     },
+    pipelineProjectId() {
+      return this.pipeline.project.id;
+    },
   },
   methods: {
-    handleClickedDownstream(pipeline, clickedIndex) {
-      this.triggeredTopIndex = clickedIndex;
+    handleClickedDownstream(pipeline, clickedIndex, downstreamNode) {
+      /**
+       * Calculates the margin top of the clicked downstream pipeline by
+       * subtracting the clicked downstream pipelines offsetTop by it's parent's
+       * offsetTop and then subtracting either 15 (if child) or 30 (if not a child)
+       * due to the height of node and stage name margin bottom.
+       */
+      this.downstreamMarginTop = this.calculateMarginTop(
+        downstreamNode,
+        downstreamNode.classList.contains('child-pipeline') ? 15 : 30,
+      );
+
       this.$emit('onClickTriggered', this.pipeline, pipeline);
     },
+    calculateMarginTop(downstreamNode, pixelDiff) {
+      return `${downstreamNode.offsetTop - downstreamNode.offsetParent.offsetTop - pixelDiff}px`;
+    },
     hasOnlyOneJob(stage) {
       return stage.groups.length === 1;
     },
@@ -139,6 +147,7 @@ export default {
           v-if="hasTriggeredBy"
           :linked-pipelines="triggeredByPipelines"
           :column-title="__('Upstream')"
+          :project-id="pipelineProjectId"
           graph-position="left"
           @linkedPipelineClick="
             linkedPipeline => $emit('onClickTriggeredBy', pipeline, linkedPipeline)
@@ -174,6 +183,7 @@ export default {
           v-if="hasTriggered"
           :linked-pipelines="triggeredPipelines"
           :column-title="__('Downstream')"
+          :project-id="pipelineProjectId"
           graph-position="right"
           @linkedPipelineClick="handleClickedDownstream"
         />
@@ -186,7 +196,7 @@ export default {
           :is-loading="false"
           :pipeline="expandedTriggered"
           :is-linked-pipeline="true"
-          :style="{ 'margin-top': marginTop }"
+          :style="{ 'margin-top': downstreamMarginTop }"
           :mediator="mediator"
           @onClickTriggered="
             (parentPipeline, pipeline) => clickTriggeredPipeline(parentPipeline, pipeline)