1 files changed, 14 insertions, 26 deletions

diff --git a/app/assets/javascripts/pipelines/components/graph/graph_component.vue b/app/assets/javascripts/pipelines/components/graph/graph_component.vue
index 63048777724..71ec81b8969 100644
--- a/app/assets/javascripts/pipelines/components/graph/graph_component.vue
+++ b/app/assets/javascripts/pipelines/components/graph/graph_component.vue
@@ -2,6 +2,7 @@
 import { reportToSentry } from '../../utils';
 import LinkedGraphWrapper from '../graph_shared/linked_graph_wrapper.vue';
 import LinksLayer from '../graph_shared/links_layer.vue';
+import { generateColumnsFromLayersListMemoized } from '../parsing_utils';
 import { DOWNSTREAM, MAIN, UPSTREAM, ONE_COL_WIDTH, STAGE_VIEW } from './constants';
 import LinkedPipelinesColumn from './linked_pipelines_column.vue';
 import StageColumnComponent from './stage_column_component.vue';
@@ -25,6 +26,10 @@ export default {
       type: Object,
       required: true,
     },
+    showLinks: {
+      type: Boolean,
+      required: true,
+    },
     viewType: {
       type: String,
       required: true,
@@ -74,7 +79,9 @@ export default {
       return this.hasDownstreamPipelines ? this.pipeline.downstream : [];
     },
     layout() {
-      return this.isStageView ? this.pipeline.stages : this.generateColumnsFromLayersList();
+      return this.isStageView
+        ? this.pipeline.stages
+        : generateColumnsFromLayersListMemoized(this.pipeline, this.pipelineLayers);
     },
     hasDownstreamPipelines() {
       return Boolean(this.pipeline?.downstream?.length > 0);
@@ -91,8 +98,8 @@ export default {
         collectMetrics: true,
       };
     },
-    shouldHideLinks() {
-      return this.isStageView;
+    showJobLinks() {
+      return !this.isStageView && this.showLinks;
     },
     shouldShowStageName() {
       return !this.isStageView;
@@ -120,26 +127,6 @@ export default {
     this.getMeasurements();
   },
   methods: {
-    generateColumnsFromLayersList() {
-      return this.pipelineLayers.map((layers, idx) => {
-        /*
-          look up the groups in each layer,
-          then add each set of layer groups to a stage-like object
-        */
-
-        const groups = layers.map((id) => {
-          const { stageIdx, groupIdx } = this.pipeline.stagesLookup[id];
-          return this.pipeline.stages?.[stageIdx]?.groups?.[groupIdx];
-        });
-
-        return {
-          name: '',
-          id: `layer-${idx}`,
-          status: { action: null },
-          groups: groups.filter(Boolean),
-        };
-      });
-    },
     getMeasurements() {
       this.measurements = {
         width: this.$refs[this.containerId].scrollWidth,
@@ -178,7 +165,7 @@ export default {
   <div class="js-pipeline-graph">
     <div
       ref="mainPipelineContainer"
-      class="gl-display-flex gl-position-relative gl-bg-gray-10 gl-white-space-nowrap"
+      class="gl-display-flex gl-position-relative gl-bg-gray-10 gl-white-space-nowrap gl-border-t-solid gl-border-t-1 gl-border-gray-100"
       :class="{ 'gl-pipeline-min-h gl-py-5 gl-overflow-auto': !isLinkedPipeline }"
     >
       <linked-graph-wrapper>
@@ -188,6 +175,7 @@ export default {
             :config-paths="configPaths"
             :linked-pipelines="upstreamPipelines"
             :column-title="__('Upstream')"
+            :show-links="showJobLinks"
             :type="$options.pipelineTypeConstants.UPSTREAM"
             :view-type="viewType"
             @error="onError"
@@ -202,9 +190,8 @@ export default {
               :container-measurements="measurements"
               :highlighted-job="hoveredJobName"
               :metrics-config="metricsConfig"
-              :never-show-links="shouldHideLinks"
+              :show-links="showJobLinks"
               :view-type="viewType"
-              default-link-color="gl-stroke-transparent"
               @error="onError"
               @highlightedJobsChange="updateHighlightedJobs"
             >
@@ -234,6 +221,7 @@ export default {
             :config-paths="configPaths"
             :linked-pipelines="downstreamPipelines"
             :column-title="__('Downstream')"
+            :show-links="showJobLinks"
             :type="$options.pipelineTypeConstants.DOWNSTREAM"
             :view-type="viewType"
             @downstreamHovered="setSourceJob"