1 files changed, 22 insertions, 2 deletions
diff --git a/app/assets/javascripts/pipelines/components/graph/graph_component.vue b/app/assets/javascripts/pipelines/components/graph/graph_component.vue
index a84161ef5e7..1f1b99ff401 100644
--- a/app/assets/javascripts/pipelines/components/graph/graph_component.vue
+++ b/app/assets/javascripts/pipelines/components/graph/graph_component.vue
@@ -64,6 +64,24 @@
       capitalizeStageName(name) {
         return name.charAt(0).toUpperCase() + name.slice(1);
       },
+
+      isFirstColumn(index) {
+        return index === 0;
+      },
+
+      stageConnectorClass(index, stage) {
+        let className;
+
+        // If it's the first stage column and only has one job
+        if (index === 0 && stage.groups.length === 1) {
+          className = 'no-margin';
+        } else if (index > 0) {
+          // If it is not the first column
+          className = 'left-margin';
+        }
+
+        return className;
+      },
     },
   };
 </script>
@@ -82,10 +100,12 @@
         v-if="!isLoading"
         class="stage-column-list">
         <stage-column-component
-          v-for="stage in state.graph"
+          v-for="(stage, index) in state.graph"
           :title="capitalizeStageName(stage.name)"
           :jobs="stage.groups"
-          :key="stage.name"/>
+          :key="stage.name"
+          :stage-connector-class="stageConnectorClass(index, stage)"
+          :is-first-column="isFirstColumn(index)"/>
       </ul>
     </div>
   </div>