Merge branch 'ci-stages' into 'master'

app/assets/stylesheets/pages/pipelines.scss

@@ -147,14 +147,37 @@
   }
 
   .stage-cell {
-    text-align: center;
+    font-size: 0;
 
     svg {
       height: 18px;
       width: 18px;
+      position: relative;
+      z-index: 2;
       vertical-align: middle;
       overflow: visible;
     }
+
+    .stage-container {
+      display: inline-block;
+      position: relative;
+      margin-right: 6px;
+
+      .tooltip {
+        white-space: nowrap;
+      }
+
+      &:not(:last-child) {
+        &::after {
+          content: '';
+          width: 8px;
+          position: absolute;;
+          right: -7px;
+          bottom: 8px;
+          border-bottom: 2px solid $border-color;
+        }
+      }
+    }
   }
 
   .duration,

app/views/projects/ci/pipelines/_pipeline.html.haml

@@ -36,16 +36,14 @@
 
 
     - stages_status = pipeline.statuses.relevant.latest.stages_status
-    - stages.each do |stage|
-      %td.stage-cell
+    %td.stage-cell
+      - stages.each do |stage|
         - status = stages_status[stage]
         - tooltip = "#{stage.titleize}: #{status || 'not found'}"
         - if status
-          = link_to namespace_project_pipeline_path(pipeline.project.namespace, pipeline.project, pipeline.id, anchor: stage), class: "has-tooltip ci-status-icon-#{status}", title: tooltip do
-            = ci_icon_for_status(status)
-        - else
-          .light.has-tooltip{ title: tooltip }
-            \-
+          .stage-container
+            = link_to namespace_project_pipeline_path(pipeline.project.namespace, pipeline.project, pipeline.id, anchor: stage), class: "has-tooltip ci-status-icon-#{status}", title: tooltip do
+              = ci_icon_for_status(status)
 
   %td
     - if pipeline.duration

app/views/projects/pipelines/index.html.haml

@@ -47,13 +47,7 @@
           %tbody
             %th Status
             %th Commit
-            - stages.each do |stage|
-              %th.stage
-                - if stage.titleize.length > 12
-                  %span.has-tooltip{ title: "#{stage.titleize}" }
-                    = stage.titleize
-                - else
-                  = stage.titleize
+            %th Stages
             %th
             %th
           = render @pipelines, commit_sha: true, stage: true, allow_retry: true, stages: stages