1 files changed, 63 insertions, 15 deletions

diff --git a/app/assets/javascripts/pipelines/components/graph/graph_component.vue b/app/assets/javascripts/pipelines/components/graph/graph_component.vue
index 67b2ed3b596..cd403757fe6 100644
--- a/app/assets/javascripts/pipelines/components/graph/graph_component.vue
+++ b/app/assets/javascripts/pipelines/components/graph/graph_component.vue
@@ -1,12 +1,15 @@
 <script>
 import LinkedGraphWrapper from '../graph_shared/linked_graph_wrapper.vue';
+import LinksLayer from '../graph_shared/links_layer.vue';
 import LinkedPipelinesColumn from './linked_pipelines_column.vue';
 import StageColumnComponent from './stage_column_component.vue';
 import { DOWNSTREAM, MAIN, UPSTREAM } from './constants';
+import { reportToSentry } from './utils';
 
 export default {
   name: 'PipelineGraph',
   components: {
+    LinksLayer,
     LinkedGraphWrapper,
     LinkedPipelinesColumn,
     StageColumnComponent,
@@ -31,9 +34,16 @@ export default {
     DOWNSTREAM,
     UPSTREAM,
   },
+  CONTAINER_REF: 'PIPELINE_LINKS_CONTAINER_REF',
+  BASE_CONTAINER_ID: 'pipeline-links-container',
   data() {
     return {
       hoveredJobName: '',
+      highlightedJobs: [],
+      measurements: {
+        width: 0,
+        height: 0,
+      },
       pipelineExpanded: {
         jobName: '',
         expanded: false,
@@ -41,6 +51,9 @@ export default {
     };
   },
   computed: {
+    containerId() {
+      return `${this.$options.BASE_CONTAINER_ID}-${this.pipeline.id}`;
+    },
     downstreamPipelines() {
       return this.hasDownstreamPipelines ? this.pipeline.downstream : [];
     },
@@ -53,12 +66,13 @@ export default {
     hasUpstreamPipelines() {
       return Boolean(this.pipeline?.upstream?.length > 0);
     },
-    // The two show checks prevent upstream / downstream from showing redundant linked columns
+    // The show downstream check prevents showing redundant linked columns
     showDownstreamPipelines() {
       return (
         this.hasDownstreamPipelines && this.type !== this.$options.pipelineTypeConstants.UPSTREAM
       );
     },
+    // The show upstream check prevents showing redundant linked columns
     showUpstreamPipelines() {
       return (
         this.hasUpstreamPipelines && this.type !== this.$options.pipelineTypeConstants.DOWNSTREAM
@@ -68,7 +82,22 @@ export default {
       return this.hasUpstreamPipelines ? this.pipeline.upstream : [];
     },
   },
+  errorCaptured(err, _vm, info) {
+    reportToSentry(this.$options.name, `error: ${err}, info: ${info}`);
+  },
+  mounted() {
+    this.measurements = this.getMeasurements();
+  },
   methods: {
+    getMeasurements() {
+      return {
+        width: this.$refs[this.containerId].scrollWidth,
+        height: this.$refs[this.containerId].scrollHeight,
+      };
+    },
+    onError(errorType) {
+      this.$emit('error', errorType);
+    },
     setJob(jobName) {
       this.hoveredJobName = jobName;
     },
@@ -78,14 +107,17 @@ export default {
         jobName: expanded ? jobName : '',
       };
     },
+    updateHighlightedJobs(jobs) {
+      this.highlightedJobs = jobs;
+    },
   },
 };
 </script>
 <template>
   <div class="js-pipeline-graph">
     <div
-      class="gl-pipeline-min-h gl-display-flex gl-position-relative gl-overflow-auto gl-bg-gray-10 gl-white-space-nowrap"
-      :class="{ 'gl-py-5': !isLinkedPipeline }"
+      class="gl-display-flex gl-position-relative gl-overflow-auto gl-bg-gray-10 gl-white-space-nowrap"
+      :class="{ 'gl-pipeline-min-h gl-py-5': !isLinkedPipeline }"
     >
       <linked-graph-wrapper>
         <template #upstream>
@@ -94,20 +126,36 @@ export default {
             :linked-pipelines="upstreamPipelines"
             :column-title="__('Upstream')"
             :type="$options.pipelineTypeConstants.UPSTREAM"
-            @error="emit('error', errorType)"
+            @error="onError"
           />
         </template>
         <template #main>
-          <stage-column-component
-            v-for="stage in graph"
-            :key="stage.name"
-            :title="stage.name"
-            :groups="stage.groups"
-            :action="stage.status.action"
-            :job-hovered="hoveredJobName"
-            :pipeline-expanded="pipelineExpanded"
-            @refreshPipelineGraph="$emit('refreshPipelineGraph')"
-          />
+          <div :id="containerId" :ref="containerId">
+            <links-layer
+              :pipeline-data="graph"
+              :pipeline-id="pipeline.id"
+              :container-id="containerId"
+              :container-measurements="measurements"
+              :highlighted-job="hoveredJobName"
+              default-link-color="gl-stroke-transparent"
+              @error="onError"
+              @highlightedJobsChange="updateHighlightedJobs"
+            >
+              <stage-column-component
+                v-for="stage in graph"
+                :key="stage.name"
+                :title="stage.name"
+                :groups="stage.groups"
+                :action="stage.status.action"
+                :highlighted-jobs="highlightedJobs"
+                :job-hovered="hoveredJobName"
+                :pipeline-expanded="pipelineExpanded"
+                :pipeline-id="pipeline.id"
+                @refreshPipelineGraph="$emit('refreshPipelineGraph')"
+                @jobHover="setJob"
+              />
+            </links-layer>
+          </div>
         </template>
         <template #downstream>
           <linked-pipelines-column
@@ -117,7 +165,7 @@ export default {
             :type="$options.pipelineTypeConstants.DOWNSTREAM"
             @downstreamHovered="setJob"
             @pipelineExpandToggle="togglePipelineExpanded"
-            @error="emit('error', errorType)"
+            @error="onError"
           />
         </template>
       </linked-graph-wrapper>