From bdbc3d355a86bf03e7a7a00fc2d867fa043c0bdd Mon Sep 17 00:00:00 2001
From: Annabel Dunstone <annabel.dunstone@gmail.com>
Date: Mon, 8 Aug 2016 16:26:33 -0500
Subject: [PATCH 1/9] Add build data to top of pipeline page

---
 app/assets/stylesheets/pages/pipelines.scss   |  6 ++++++
 app/views/projects/commit/_pipeline.html.haml | 12 ++++++++++++
 2 files changed, 18 insertions(+)

diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss
index 21919fe4d73..5bc8c3a7e6c 100644
--- a/app/assets/stylesheets/pages/pipelines.scss
+++ b/app/assets/stylesheets/pages/pipelines.scss
@@ -229,3 +229,9 @@
     box-shadow: none;
   }
 }
+
+// Pipeline visualization
+.stage-column {
+  display: inline-block;
+  vertical-align: top;
+}
diff --git a/app/views/projects/commit/_pipeline.html.haml b/app/views/projects/commit/_pipeline.html.haml
index 640abdb993f..2452326fc04 100644
--- a/app/views/projects/commit/_pipeline.html.haml
+++ b/app/views/projects/commit/_pipeline.html.haml
@@ -1,4 +1,16 @@
 .row-content-block.build-content.middle-block
+  .pipeline-visualization
+    - pipeline.statuses.stages.each do |stage|
+      - statuses = pipeline.statuses.where(stage: stage)
+      .stage-column
+        %strong
+          %a{name: stage}
+          - if stage
+            = stage.titleize
+        - statuses.each do |status|
+          %div= status.name
+
+
   .pull-right
     - if can?(current_user, :update_pipeline, pipeline.project)
       - if pipeline.builds.latest.failed.any?(&:retryable?)

From dfe94da0fb4da1a84bfd6324f7b2291067582af0 Mon Sep 17 00:00:00 2001
From: Annabel Dunstone <annabel.dunstone@gmail.com>
Date: Mon, 8 Aug 2016 17:42:28 -0500
Subject: [PATCH 2/9] Connect top level tests to each other

---
 app/assets/stylesheets/pages/pipelines.scss   | 50 +++++++++++++++++++
 app/views/projects/commit/_pipeline.html.haml | 16 ++++--
 2 files changed, 61 insertions(+), 5 deletions(-)

diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss
index 5bc8c3a7e6c..e79c7e59720 100644
--- a/app/assets/stylesheets/pages/pipelines.scss
+++ b/app/assets/stylesheets/pages/pipelines.scss
@@ -231,7 +231,57 @@
 }
 
 // Pipeline visualization
+
+.pipeline-visualization {
+  position: relative;
+}
+
 .stage-column {
   display: inline-block;
   vertical-align: top;
+  margin-right: 40px;
+
+  .stage-name {
+    margin-bottom: 15px;
+    font-weight: bold;
+  }
+
+  .builds-container {
+
+  }
+
+  .build {
+    border: 1px solid $border-color;
+    position: relative;
+    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;
+
+    svg {
+      position: relative;
+      top: 2px;
+      margin-right: 5px;
+    }
+
+    &:first-child {
+      &::after, &::before {
+        content: '';
+        position: absolute;
+        top: 50%;
+        right: -44px;
+        border-top: 1px solid $border-color;
+        width: 44px;
+        height: 1px;
+      }
+    }
+    &:first-child::before, &:last-child::after{
+      border: 0 none;
+    }
+
+  }
 }
diff --git a/app/views/projects/commit/_pipeline.html.haml b/app/views/projects/commit/_pipeline.html.haml
index 2452326fc04..b993ad5ce50 100644
--- a/app/views/projects/commit/_pipeline.html.haml
+++ b/app/views/projects/commit/_pipeline.html.haml
@@ -1,16 +1,22 @@
-.row-content-block.build-content.middle-block
+.row-content-block.white
+
   .pipeline-visualization
     - pipeline.statuses.stages.each do |stage|
       - statuses = pipeline.statuses.where(stage: stage)
+      - status = statuses.latest.status
       .stage-column
-        %strong
+        .stage-name
           %a{name: stage}
           - if stage
             = stage.titleize
-        - statuses.each do |status|
-          %div= status.name
-
+        .builds-container
+          - statuses.each do |build|
+            .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
     - if can?(current_user, :update_pipeline, pipeline.project)
       - if pipeline.builds.latest.failed.any?(&:retryable?)

From ca9bba29fea30fd4cdb223273fca007c9abf12b0 Mon Sep 17 00:00:00 2001
From: Annabel Dunstone <annabel.dunstone@gmail.com>
Date: Tue, 9 Aug 2016 14:26:25 -0500
Subject: [PATCH 3/9] Connect all builds in visual pipeline

---
 app/assets/stylesheets/pages/pipelines.scss | 81 +++++++++++++++++++--
 1 file changed, 73 insertions(+), 8 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;
+        }
+      }
+    }
   }
 }

From 1b583583a9a93c2ba8e00982c33fca904e219fca Mon Sep 17 00:00:00 2001
From: Annabel Dunstone <annabel.dunstone@gmail.com>
Date: Tue, 9 Aug 2016 15:00:09 -0500
Subject: [PATCH 4/9] Add min width and horizontally scroll pipeline graph when
 overflow

---
 app/assets/stylesheets/pages/pipelines.scss | 23 +++++++++++++++------
 1 file changed, 17 insertions(+), 6 deletions(-)

diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss
index fa422f4f3c5..a9ffda00278 100644
--- a/app/assets/stylesheets/pages/pipelines.scss
+++ b/app/assets/stylesheets/pages/pipelines.scss
@@ -234,16 +234,22 @@
 
 .pipeline-visualization {
   position: relative;
+  width: 100%;
+  overflow: auto;
 
   ul {
     padding: 0;
   }
 }
 
+.stage-column-list {
+  min-width: 1220px;
+}
+
 .stage-column {
   display: inline-block;
   vertical-align: top;
-  margin-right: 40px;
+  margin-right: 50px;
 
   li {
     list-style: none;
@@ -278,9 +284,9 @@
         content: '';
         position: absolute;
         top: 50%;
-        right: -44px;
+        right: -54px;
         border-top: 2px solid $border-color;
-        width: 44px;
+        width: 54px;
         height: 1px;
       }
     }
@@ -298,7 +304,7 @@
 
       // Right connecting curves
       &::after {
-        right: -21px;
+        right: -20px;
         border-right: 2px solid $border-color;
         border-radius: 0 0 50px 0;
         -webkit-border-radius: 0 0 50px 0;
@@ -306,7 +312,7 @@
 
       // Left connecting curves
       &::before {
-        left: -21px;
+        left: -20px;
         border-left: 2px solid $border-color;
         border-radius: 0 0 0 50px;
         -webkit-border-radius: 0 0 0 50px;
@@ -316,9 +322,14 @@
     // Connect second build to first build with smaller curved line
     &:nth-child(2) {
       &::after, &::before {
-        height: 40px;
+        height: 45px;
         top: -26px;
       }
+      &::after {
+        // border-left: 2px solid $border-color;
+        border-top-right-radius: -50px;
+        -webkit-border-top-right-radius: -50px;
+      }
     }
   }
 

From d7b3b15f60e25e1b11b6fcc22f96c63bffa137a8 Mon Sep 17 00:00:00 2001
From: Annabel Dunstone <annabel.dunstone@gmail.com>
Date: Tue, 9 Aug 2016 15:08:04 -0500
Subject: [PATCH 5/9] Truncate build and stage names

---
 CHANGELOG                                     |  1 +
 app/assets/stylesheets/pages/pipelines.scss   | 15 ++++++---
 app/views/projects/commit/_pipeline.html.haml | 31 ++++++++++---------
 3 files changed, 29 insertions(+), 18 deletions(-)

diff --git a/CHANGELOG b/CHANGELOG
index aececed9add..a3e824dcac6 100644
--- a/CHANGELOG
+++ b/CHANGELOG
@@ -108,6 +108,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
diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss
index a9ffda00278..49225d7d0d4 100644
--- a/app/assets/stylesheets/pages/pipelines.scss
+++ b/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;
diff --git a/app/views/projects/commit/_pipeline.html.haml b/app/views/projects/commit/_pipeline.html.haml
index b993ad5ce50..4dacff8f6eb 100644
--- a/app/views/projects/commit/_pipeline.html.haml
+++ b/app/views/projects/commit/_pipeline.html.haml
@@ -1,20 +1,23 @@
 .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
+                  .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

From e573cdfb91308759923fbd0aacb12f801dfb561f Mon Sep 17 00:00:00 2001
From: Annabel Dunstone <annabel.dunstone@gmail.com>
Date: Tue, 9 Aug 2016 15:39:01 -0500
Subject: [PATCH 6/9] Fix graph scrolling bug

---
 app/assets/stylesheets/pages/pipelines.scss   | 13 +++++++------
 app/views/projects/commit/_pipeline.html.haml |  5 ++---
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss
index 49225d7d0d4..01bd131940a 100644
--- a/app/assets/stylesheets/pages/pipelines.scss
+++ b/app/assets/stylesheets/pages/pipelines.scss
@@ -232,20 +232,21 @@
 
 // Pipeline visualization
 
-.pipeline-visualization {
-  position: relative;
+.pipeline-graph {
   width: 100%;
   overflow: auto;
+  white-space: nowrap;
+}
+
+.pipeline-visualization {
+  position: relative;
+  min-width: 1220px;
 
   ul {
     padding: 0;
   }
 }
 
-.stage-column-list {
-  min-width: 1220px;
-}
-
 .stage-column {
   display: inline-block;
   vertical-align: top;
diff --git a/app/views/projects/commit/_pipeline.html.haml b/app/views/projects/commit/_pipeline.html.haml
index 4dacff8f6eb..e2187673da7 100644
--- a/app/views/projects/commit/_pipeline.html.haml
+++ b/app/views/projects/commit/_pipeline.html.haml
@@ -1,5 +1,4 @@
-.row-content-block.white
-
+.row-content-block.build-content.middle-block.pipeline-graph
   .pipeline-visualization
     %ul.stage-column-list
       - pipeline.statuses.stages.each do |stage|
@@ -19,7 +18,7 @@
                       = ci_icon_for_status(status)
                     = build.name
 
-.row-content-block.build-content.middle-block
+.row-content-block.build-content.middle-block.pipeline-graph
   .pull-right
     - if can?(current_user, :update_pipeline, pipeline.project)
       - if pipeline.builds.latest.failed.any?(&:retryable?)

From 0ff0acc89c80b9ef4a473e4be1549ef4a21a8b8a Mon Sep 17 00:00:00 2001
From: Annabel Dunstone <annabel.dunstone@gmail.com>
Date: Tue, 9 Aug 2016 16:15:09 -0500
Subject: [PATCH 7/9] Fix scss lint error

---
 app/assets/stylesheets/pages/pipelines.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss
index 01bd131940a..ad256e2a728 100644
--- a/app/assets/stylesheets/pages/pipelines.scss
+++ b/app/assets/stylesheets/pages/pipelines.scss
@@ -314,8 +314,8 @@
       &::after {
         right: -20px;
         border-right: 2px solid $border-color;
-        border-radius: 0 0 50px 0;
-        -webkit-border-radius: 0 0 50px 0;
+        border-radius: 0 0 50px;
+        -webkit-border-radius: 0 0 50px;
       }
 
       // Left connecting curves

From 8d5dc4fa6b0f01dbe46e89105aed5072c60cc102 Mon Sep 17 00:00:00 2001
From: Annabel Dunstone <annabel.dunstone@gmail.com>
Date: Tue, 16 Aug 2016 19:42:05 -0500
Subject: [PATCH 8/9] Add toggle button to hide graph; set max-height

---
 app/assets/javascripts/pipeline.js.es6        | 10 ++++
 app/assets/stylesheets/pages/pipelines.scss   | 43 ++++++++++++++---
 app/views/projects/commit/_pipeline.html.haml | 46 ++++++++++---------
 3 files changed, 71 insertions(+), 28 deletions(-)
 create mode 100644 app/assets/javascripts/pipeline.js.es6

diff --git a/app/assets/javascripts/pipeline.js.es6 b/app/assets/javascripts/pipeline.js.es6
new file mode 100644
index 00000000000..7054199ac89
--- /dev/null
+++ b/app/assets/javascripts/pipeline.js.es6
@@ -0,0 +1,10 @@
+function toggleGraph() {
+  $('.pipeline-graph, .toggle-pipeline-btn').toggleClass('graph-collapsed');
+
+  const $btnText = $('.toggle-pipeline-btn .btn-text');
+  const graphCollapsed = $('.pipeline-graph').hasClass('graph-collapsed');
+
+  graphCollapsed ? $btnText.text('Expand') : $btnText.text('Hide')
+}
+
+$(document).on('click', '.toggle-pipeline-btn', toggleGraph);
diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss
index ad256e2a728..f35aca193e9 100644
--- a/app/assets/stylesheets/pages/pipelines.scss
+++ b/app/assets/stylesheets/pages/pipelines.scss
@@ -232,10 +232,35 @@
 
 // Pipeline visualization
 
+.toggle-pipeline-btn {
+  background-color: $gray-dark;
+
+  .caret {
+    border-top: none;
+    border-bottom: 4px solid;
+  }
+
+  &.graph-collapsed {
+    background-color: $white-light;
+
+    .caret {
+      border-bottom: none;
+      border-top: 4px solid;
+    }
+  }
+}
+
 .pipeline-graph {
   width: 100%;
   overflow: auto;
   white-space: nowrap;
+  max-height: 500px;
+  transition: max-height 0.3s, padding 0.3s;
+
+  &.graph-collapsed {
+    max-height: 0;
+    padding: 0 16px;
+  }
 }
 
 .pipeline-visualization {
@@ -315,7 +340,6 @@
         right: -20px;
         border-right: 2px solid $border-color;
         border-radius: 0 0 50px;
-        -webkit-border-radius: 0 0 50px;
       }
 
       // Left connecting curves
@@ -323,7 +347,6 @@
         left: -20px;
         border-left: 2px solid $border-color;
         border-radius: 0 0 0 50px;
-        -webkit-border-radius: 0 0 0 50px;
       }
     }
 
@@ -333,11 +356,6 @@
         height: 45px;
         top: -26px;
       }
-      &::after {
-        // border-left: 2px solid $border-color;
-        border-top-right-radius: -50px;
-        -webkit-border-top-right-radius: -50px;
-      }
     }
   }
 
@@ -369,3 +387,14 @@
     }
   }
 }
+
+.pipeline-actions {
+  border-bottom: none;
+}
+
+.toggle-pipeline-btn {
+
+  .fa {
+    color: $dropdown-header-color;
+  }
+}
diff --git a/app/views/projects/commit/_pipeline.html.haml b/app/views/projects/commit/_pipeline.html.haml
index e2187673da7..eb80aadd524 100644
--- a/app/views/projects/commit/_pipeline.html.haml
+++ b/app/views/projects/commit/_pipeline.html.haml
@@ -1,25 +1,9 @@
-.row-content-block.build-content.middle-block.pipeline-graph
-  .pipeline-visualization
-    %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
-                  .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.pipeline-graph
+.row-content-block.build-content.middle-block.pipeline-actions
   .pull-right
+    .btn.btn-grouped.btn-white.toggle-pipeline-btn
+      %span.btn-text Hide
+      %span pipeline graph
+      %span.caret
     - if can?(current_user, :update_pipeline, pipeline.project)
       - if pipeline.builds.latest.failed.any?(&:retryable?)
         = link_to "Retry failed", retry_namespace_project_pipeline_path(pipeline.project.namespace, pipeline.project, pipeline.id), class: 'btn btn-grouped btn-primary', method: :post
@@ -43,6 +27,26 @@
         in
         = time_interval_in_words pipeline.duration
 
+.row-content-block.build-content.middle-block.pipeline-graph
+  .pipeline-visualization
+    %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
+                  .build-content
+                    %span{class: "ci-status-link ci-status-icon-#{status}"}
+                      = ci_icon_for_status(status)
+                    = build.name
+
 - if pipeline.yaml_errors.present?
   .bs-callout.bs-callout-danger
     %h4 Found errors in your .gitlab-ci.yml:

From b631985ad7a8a85d1350425e6d1cf1cb90c93b5f Mon Sep 17 00:00:00 2001
From: Annabel Dunstone <annabel.dunstone@gmail.com>
Date: Tue, 16 Aug 2016 19:52:34 -0500
Subject: [PATCH 9/9] Add links to pipeline graph

---
 app/assets/stylesheets/pages/pipelines.scss   | 4 ++++
 app/views/projects/commit/_pipeline.html.haml | 2 +-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss
index f35aca193e9..ce9e3e95d3d 100644
--- a/app/assets/stylesheets/pages/pipelines.scss
+++ b/app/assets/stylesheets/pages/pipelines.scss
@@ -303,6 +303,10 @@
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
+
+      a {
+        color: $layout-link-gray;
+      }
     }
 
     svg {
diff --git a/app/views/projects/commit/_pipeline.html.haml b/app/views/projects/commit/_pipeline.html.haml
index eb80aadd524..44250860020 100644
--- a/app/views/projects/commit/_pipeline.html.haml
+++ b/app/views/projects/commit/_pipeline.html.haml
@@ -45,7 +45,7 @@
                   .build-content
                     %span{class: "ci-status-link ci-status-icon-#{status}"}
                       = ci_icon_for_status(status)
-                    = build.name
+                    = link_to build.name, namespace_project_build_url(build.project.namespace, build.project, build)
 
 - if pipeline.yaml_errors.present?
   .bs-callout.bs-callout-danger