Remove stage names; connect stages in column

4 files changed, 48 insertions, 15 deletions

diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss
index cc71b8eb045..81c2c7314c9 100644
--- a/app/assets/stylesheets/pages/pipelines.scss
+++ b/app/assets/stylesheets/pages/pipelines.scss
@@ -155,6 +155,30 @@
       vertical-align: middle;
       overflow: visible;
     }
+
+    .stage-container {
+      display: inline-block;
+      position: relative;
+      margin-right: 6px;
+
+      &:not(:last-child) {
+        &::after {
+          content: '';
+          height: 20px;
+          width: 9px;
+          position: absolute;;
+          right: -9px;
+          bottom: 36%;
+          border-bottom: 2px solid $white-dark;
+        }
+      }
+    }
+
+    .stage-empty {
+      g {
+        fill: $white-normal;
+      }
+    }
   }
 
   .duration,
diff --git a/app/views/projects/ci/pipelines/_pipeline.html.haml b/app/views/projects/ci/pipelines/_pipeline.html.haml
index bb9493f5158..9b8aa57a9dc 100644
--- a/app/views/projects/ci/pipelines/_pipeline.html.haml
+++ b/app/views/projects/ci/pipelines/_pipeline.html.haml
@@ -36,16 +36,17 @@
 
 
     - 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
+          - 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 }
+              = custom_icon('icon_stage_empty')
 
   %td
     - if pipeline.duration
diff --git a/app/views/projects/pipelines/index.html.haml b/app/views/projects/pipelines/index.html.haml
index 4d957e0d890..0c784f626a9 100644
--- a/app/views/projects/pipelines/index.html.haml
+++ b/app/views/projects/pipelines/index.html.haml
@@ -47,13 +47,14 @@
           %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
+            -# - stages.each do |stage|
+            -#   %th.stage
+            -#     - if stage.titleize.length > 12
+            -#       %span.has-tooltip{ title: "#{stage.titleize}" }
+            -#         = stage.titleize
+            -#     - else
+            -#       = stage.titleize
             %th
             %th
           = render @pipelines, commit_sha: true, stage: true, allow_retry: true, stages: stages
diff --git a/app/views/shared/icons/_icon_stage_empty.svg b/app/views/shared/icons/_icon_stage_empty.svg
new file mode 100644
index 00000000000..c317033b625
--- /dev/null
+++ b/app/views/shared/icons/_icon_stage_empty.svg
@@ -0,0 +1,7 @@
+<svg width="14px" class="stage-empty" height="14px" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="_icon_status_created" fill="#000000">
+            <path d="M12.5,7 C12.5,4 10,1.5 7,1.5 C4,1.5 1.5,4 1.5,7 C1.5,10 4,12.5 7,12.5 C10,12.5 12.5,10 12.5,7 L12.5,7 L12.5,7 Z M0,7 C0,3.1 3.1,0 7,0 C10.9,0 14,3.1 14,7 C14,10.9 10.9,14 7,14 C3.1,14 0,10.9 0,7 L0,7 L0,7 Z" id="Shape"></path>
+        </g>
+    </g>
+</svg>