Connect all builds in visual pipeline

2 files changed, 90 insertions, 23 deletions

diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss
index e79c7e59720..fa422f4f3c5 100644
--- a/app/assets/stylesheets/pages/pipelines.scss
+++ b/app/assets/stylesheets/pages/pipelines.scss
@@ -234,6 +234,10 @@
 
 .pipeline-visualization {
   position: relative;
+
+  ul {
+    padding: 0;
+  }
 }
 
 .stage-column {
@@ -241,15 +245,15 @@
   vertical-align: top;
   margin-right: 40px;
 
+  li {
+    list-style: none;
+  }
+
   .stage-name {
     margin-bottom: 15px;
     font-weight: bold;
   }
 
-  .builds-container {
-
-  }
-
   .build {
     border: 1px solid $border-color;
     position: relative;
@@ -268,20 +272,81 @@
       margin-right: 5px;
     }
 
+    // Connect first build in each stage with right horizontal line
     &:first-child {
-      &::after, &::before {
+      &::after {
         content: '';
         position: absolute;
         top: 50%;
         right: -44px;
-        border-top: 1px solid $border-color;
+        border-top: 2px solid $border-color;
         width: 44px;
         height: 1px;
       }
     }
-    &:first-child::before, &:last-child::after{
-      border: 0 none;
+
+    // Connect each build (except for first) with curved lines
+    &:not(:first-child) {
+      &::after, &::before {
+        content: '';
+        top: -47px;
+        position: absolute;
+        border-bottom: 2px solid $border-color;
+        width: 20px;
+        height: 65px;
+      }
+
+      // Right connecting curves
+      &::after {
+        right: -21px;
+        border-right: 2px solid $border-color;
+        border-radius: 0 0 50px 0;
+        -webkit-border-radius: 0 0 50px 0;
+      }
+
+      // Left connecting curves
+      &::before {
+        left: -21px;
+        border-left: 2px solid $border-color;
+        border-radius: 0 0 0 50px;
+        -webkit-border-radius: 0 0 0 50px;
+      }
+    }
+
+    // Connect second build to first build with smaller curved line
+    &:nth-child(2) {
+      &::after, &::before {
+        height: 40px;
+        top: -26px;
+      }
+    }
+  }
+
+  &:last-child {
+    .build {
+      // Remove right connecting horizontal line from first build in last stage
+      &:first-child {
+        &::after, &::before {
+          border: none;
+        }
+      }
+      // Remove right curved connectors from all builds in last stage
+      &:not(:first-child) {
+        &::after {
+          border: none;
+        }
+      }
     }
+  }
 
+  &:first-child {
+    .build {
+      // Remove left curved connectors from all builds in first stage
+      &:not(:first-child) {
+        &::before {
+          border: none;
+        }
+      }
+    }
   }
 }
diff --git a/app/views/projects/commit/_pipeline.html.haml b/app/views/projects/commit/_pipeline.html.haml
index 72259cd0756..06a63839107 100644
--- a/app/views/projects/commit/_pipeline.html.haml
+++ b/app/views/projects/commit/_pipeline.html.haml
@@ -1,20 +1,22 @@
 .row-content-block.white
 
   .pipeline-visualization
-    - pipeline.statuses.stages.each do |stage|
-      - statuses = pipeline.statuses.where(stage: stage)
-      - status = statuses.latest.status
-      .stage-column
-        .stage-name
-          %a{name: stage}
-          - if stage
-            = stage.titleize
-        .builds-container
-          - statuses.each do |build|
-            .build
-              %span{class: "ci-status-link ci-status-icon-#{status}"}
-                = ci_icon_for_status(status)
-              = build.name
+    %ul.stage-column-list
+      - pipeline.statuses.stages.each do |stage|
+        - statuses = pipeline.statuses.where(stage: stage)
+        - status = statuses.latest.status
+        %li.stage-column
+          .stage-name
+            %a{name: stage}
+            - if stage
+              = stage.titleize
+          .builds-container
+            %ul
+              - statuses.each do |build|
+                %li.build
+                  %span{class: "ci-status-link ci-status-icon-#{status}"}
+                    = ci_icon_for_status(status)
+                  = build.name
 
 .row-content-block.build-content.middle-block
   .pull-right
@@ -52,7 +54,7 @@
 - if pipeline.project.builds_enabled? && !pipeline.ci_yaml_file
   .bs-callout.bs-callout-warning
     \.gitlab-ci.yml not found in this commit
--#
+
 -# .table-holder.pipeline-holder
 -#   %table.table.builds.pipeline
 -#     %thead