Truncate build and stage names

CHANGELOG

@@ -81,6 +81,7 @@ v 8.11.0 (unreleased)
   - Speed up and reduce memory usage of Commit#repo_changes, Repository#expire_avatar_cache and IrkerWorker
   - Add unfold links for Side-by-Side view. !5415 (Tim Masliuchenko)
   - Adds support for pending invitation project members importing projects
+  - Add pipeline visualization/graph on pipeline page
   - Update devise initializer to turn on changed password notification emails. !5648 (tombell)
   - Avoid to show the original password field when password is automatically set. !5712 (duduribeiro)
   - Fix importing GitLab projects with an invalid MR source project

app/assets/stylesheets/pages/pipelines.scss

@@ -258,6 +258,10 @@
   .stage-name {
     margin-bottom: 15px;
     font-weight: bold;
+    width: 150px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
 
   .build {
@@ -266,12 +270,15 @@
     padding: 6px 10px;
     border-radius: 30px;
     width: 150px;
-    // TODO truncate text within .build div; not on build div itself
-    // white-space: nowrap;
-    // overflow: hidden;
-    // text-overflow: ellipsis;
     margin-bottom: 10px;
 
+    .build-content {
+      width: 130px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
     svg {
       position: relative;
       top: 2px;

app/views/projects/commit/_pipeline.html.haml

@@ -14,9 +14,10 @@
             %ul
               - statuses.each do |build|
                 %li.build
-                  %span{class: "ci-status-link ci-status-icon-#{status}"}
-                    = ci_icon_for_status(status)
-                  = build.name
+                  .build-content
+                    %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
@@ -55,16 +56,16 @@
   .bs-callout.bs-callout-warning
     \.gitlab-ci.yml not found in this commit
 
--# .table-holder.pipeline-holder
--#   %table.table.builds.pipeline
--#     %thead
--#       %tr
--#         %th Status
--#         %th Build ID
--#         %th Name
--#         %th
--#         - if pipeline.project.build_coverage_enabled?
--#           %th Coverage
--#         %th
--#     - pipeline.statuses.stages.each do |stage|
--#       = render 'projects/commit/ci_stage', stage: stage, statuses: pipeline.statuses.where(stage: stage)
+.table-holder.pipeline-holder
+  %table.table.builds.pipeline
+    %thead
+      %tr
+        %th Status
+        %th Build ID
+        %th Name
+        %th
+        - if pipeline.project.build_coverage_enabled?
+          %th Coverage
+        %th
+    - pipeline.statuses.stages.each do |stage|
+      = render 'projects/commit/ci_stage', stage: stage, statuses: pipeline.statuses.where(stage: stage)