From 3b4fb0bbdc13f5b52d1a4d30128d0d2d99b97e72 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 01/25] 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 540689f4a61..a52bfa0ea55 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?)
-- 
GitLab


From dcb7d4148efe86ba07e9a00cb43818846d61f9d0 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 02/25] Connect top level tests to each other

---
 app/assets/stylesheets/pages/pipelines.scss   | 50 +++++++++++++++++++
 app/views/projects/commit/_pipeline.html.haml | 44 +++++++++-------
 2 files changed, 75 insertions(+), 19 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 a52bfa0ea55..72259cd0756 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?)
@@ -46,17 +52,17 @@
 - 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
-      %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)
-- 
GitLab


From 83c1ce74e01dcf95ac8f545d7584259615e8834f 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 03/25] Connect all builds in visual pipeline

---
 app/assets/stylesheets/pages/pipelines.scss   | 81 +++++++++++++++++--
 app/views/projects/commit/_pipeline.html.haml | 32 ++++----
 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
-- 
GitLab


From a76864cc92241ef9b759fbe63282a45dea7d5e03 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 04/25] 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;
+      }
     }
   }
 
-- 
GitLab


From aeacadb3e32156a33060fea81243a4cef8fc1c3e 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 05/25] Truncate build and stage names

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

diff --git a/CHANGELOG b/CHANGELOG
index 58751448d4a..31ed0e01095 100644
--- a/CHANGELOG
+++ b/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
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 06a63839107..2edf660db71 100644
--- a/app/views/projects/commit/_pipeline.html.haml
+++ b/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)
-- 
GitLab


From 94ca1e3edea8fa8e70e828cc4127e0cb8ec8a9d1 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 06/25] 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 2edf660db71..0c006656d1d 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?)
-- 
GitLab


From ef767268645e8f60b7111eb9f6b6c3aa1b615661 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 07/25] 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
-- 
GitLab


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 08/25] 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?)
-- 
GitLab


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 09/25] 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?)
-- 
GitLab


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 10/25] 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;
+        }
+      }
+    }
   }
 }
-- 
GitLab


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 11/25] 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;
+      }
     }
   }
 
-- 
GitLab


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 12/25] 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
-- 
GitLab


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 13/25] 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?)
-- 
GitLab


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 14/25] 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
-- 
GitLab


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 15/25] 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:
-- 
GitLab


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 16/25] 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
-- 
GitLab


From fee7992c08c434940f0722886dc96f249a8e7fbf Mon Sep 17 00:00:00 2001
From: Kamil Trzcinski <ayufan@ayufan.eu>
Date: Wed, 17 Aug 2016 09:46:34 +0100
Subject: [PATCH 17/25] Fix pipelines visualisation rendering

---
 app/models/ci/build.rb                        |  2 +-
 app/models/ci/pipeline.rb                     |  4 ++++
 app/views/projects/commit/_pipeline.html.haml | 16 ++++++++++------
 3 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/app/models/ci/build.rb b/app/models/ci/build.rb
index 08f396210c9..b42977f9ebd 100644
--- a/app/models/ci/build.rb
+++ b/app/models/ci/build.rb
@@ -102,7 +102,7 @@ def other_actions
     end
 
     def playable?
-      project.builds_enabled? && commands.present? && manual?
+      project.builds_enabled? && commands.present? && manual? && skipped?
     end
 
     def play(current_user = nil)
diff --git a/app/models/ci/pipeline.rb b/app/models/ci/pipeline.rb
index bce6a992af6..caf4d25029f 100644
--- a/app/models/ci/pipeline.rb
+++ b/app/models/ci/pipeline.rb
@@ -34,6 +34,10 @@ def self.stages
       CommitStatus.where(pipeline: pluck(:id)).stages
     end
 
+    def stages
+      statuses.order(:stage_idx).latest.group_by(&:stage)
+    end
+
     def project_id
       project.id
     end
diff --git a/app/views/projects/commit/_pipeline.html.haml b/app/views/projects/commit/_pipeline.html.haml
index 0c006656d1d..27501d89dc5 100644
--- a/app/views/projects/commit/_pipeline.html.haml
+++ b/app/views/projects/commit/_pipeline.html.haml
@@ -1,9 +1,8 @@
 .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
+      - stages = pipeline.statuses.latest.order(:stage_idx).group_by(&:stage)
+      - stages.each do |stage, builds|
         %li.stage-column
           .stage-name
             %a{name: stage}
@@ -11,11 +10,16 @@
               = stage.titleize
           .builds-container
             %ul
-              - statuses.each do |build|
+              - builds.each do |build|
                 %li.build
                   .build-content
-                    %span{class: "ci-status-link ci-status-icon-#{status}"}
-                      = ci_icon_for_status(status)
+                    %span{class: "ci-status-link ci-status-icon-#{build.status}"}
+                      - if build.try(:playable?)
+                        = link_to play_namespace_project_build_path(build.project.namespace, build.project, build, return_to: request.original_url), method: :post, title: 'Play' do
+                          = icon('play')
+                      - else
+                        = link_to namespace_project_build_url(build.project.namespace, build.project, build) do
+                          = ci_icon_for_status(build.status)
                     = build.name
 
 .row-content-block.build-content.middle-block.pipeline-graph
-- 
GitLab


From f52f62d7aec168b3b8c291cdb81f64501bd80e5a Mon Sep 17 00:00:00 2001
From: Kamil Trzcinski <ayufan@ayufan.eu>
Date: Tue, 16 Aug 2016 16:18:44 +0200
Subject: [PATCH 18/25] Update fixtures to make development testing easier

---
 db/fixtures/development/14_builds.rb | 32 ++++++++++++++++++++++------
 1 file changed, 26 insertions(+), 6 deletions(-)

diff --git a/db/fixtures/development/14_builds.rb b/db/fixtures/development/14_builds.rb
index e65abe4ef77..3734c861078 100644
--- a/db/fixtures/development/14_builds.rb
+++ b/db/fixtures/development/14_builds.rb
@@ -28,24 +28,44 @@ def seed!
         build_create!(pipeline, name: 'production', stage: 'deploy', environment: 'production', when: 'manual', status: :success)
 
         commit_status_create!(pipeline, name: 'jenkins', status: :success)
-
         print '.'
       rescue ActiveRecord::RecordInvalid
         print 'F'
+      ensure
+        pipeline.build_updated
       end
     end
   end
 
   def pipelines
-    commits = @project.repository.commits('master', limit: 5)
-    commits_sha = commits.map { |commit| commit.raw.id }
-    commits_sha.map do |sha|
-      @project.ensure_pipeline(sha, 'master')
-    end
+    master_pipelines + merge_request_pipelines
+  end
+
+  def master_pipelines
+    create_pipelines_for(@project, 'master')
   rescue
     []
   end
 
+  def merge_request_pipelines
+    @project.merge_requests.last(5).map do |merge_request|
+      create_pipelines(merge_request.source_project, merge_request.source_branch, merge_request.commits.last(5))
+    end.flatten
+  rescue
+    []
+  end
+
+  def create_pipelines_for(project, ref)
+    commits = project.repository.commits(ref, limit: 5)
+    create_pipelines(project, ref, commits)
+  end
+
+  def create_pipelines(project, ref, commits)
+    commits.map do |commit|
+      project.pipelines.create(sha: commit.id, ref: ref)
+    end
+  end
+
   def build_create!(pipeline, opts = {})
     attributes = build_attributes_for(pipeline, opts)
     build = Ci::Build.create!(attributes)
-- 
GitLab


From fd09311da93070546c52e65c0c2af9b8566c56b5 Mon Sep 17 00:00:00 2001
From: Kamil Trzcinski <ayufan@ayufan.eu>
Date: Wed, 17 Aug 2016 11:18:57 +0100
Subject: [PATCH 19/25] Update fixtures to add a created status to pipeline

---
 db/fixtures/development/14_builds.rb | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/db/fixtures/development/14_builds.rb b/db/fixtures/development/14_builds.rb
index 0d493fa1c3c..069d9dd6226 100644
--- a/db/fixtures/development/14_builds.rb
+++ b/db/fixtures/development/14_builds.rb
@@ -1,9 +1,8 @@
 class Gitlab::Seeder::Builds
-  STAGES = %w[build notify_build test notify_test deploy notify_deploy]
+  STAGES = %w[build test deploy notify]
   BUILDS = [
     { name: 'build:linux', stage: 'build', status: :success },
     { name: 'build:osx', stage: 'build', status: :success },
-    { name: 'slack post build', stage: 'notify_build', status: :success },
     { name: 'rspec:linux', stage: 'test', status: :success },
     { name: 'rspec:windows', stage: 'test', status: :success },
     { name: 'rspec:windows', stage: 'test', status: :success },
@@ -12,9 +11,9 @@ class Gitlab::Seeder::Builds
     { name: 'spinach:osx', stage: 'test', status: :canceled },
     { name: 'cucumber:linux', stage: 'test', status: :running },
     { name: 'cucumber:osx', stage: 'test', status: :failed },
-    { name: 'slack post test', stage: 'notify_test', status: :success },
     { name: 'staging', stage: 'deploy', environment: 'staging', status: :success },
-    { name: 'production', stage: 'deploy', environment: 'production', when: 'manual', status: :success },
+    { name: 'production', stage: 'deploy', environment: 'production', when: 'manual', status: :skipped },
+    { name: 'slack', stage: 'notify', when: 'manual', status: :created },
   ]
 
   def initialize(project)
@@ -25,7 +24,7 @@ def seed!
     pipelines.each do |pipeline|
       begin
         BUILDS.each { |opts| build_create!(pipeline, opts) }
-        commit_status_create!(pipeline, name: 'jenkins', status: :success)
+        commit_status_create!(pipeline, name: 'jenkins', stage: 'test', status: :success)
         print '.'
       rescue ActiveRecord::RecordInvalid
         print 'F'
-- 
GitLab


From 1cd9b3b8a0b1024d043b9344869aceeadb9c84f1 Mon Sep 17 00:00:00 2001
From: Kamil Trzcinski <ayufan@ayufan.eu>
Date: Wed, 17 Aug 2016 11:21:00 +0100
Subject: [PATCH 20/25] Split pipeline status item for Commit Status and Build

---
 app/models/ci/pipeline.rb                       |  4 ++--
 .../ci/builds/_build_pipeline.html.haml         | 12 ++++++++++++
 app/views/projects/commit/_pipeline.html.haml   | 17 ++++-------------
 .../_generic_commit_status_pipeline.html.haml   |  9 +++++++++
 4 files changed, 27 insertions(+), 15 deletions(-)
 create mode 100644 app/views/projects/ci/builds/_build_pipeline.html.haml
 create mode 100644 app/views/projects/generic_commit_statuses/_generic_commit_status_pipeline.html.haml

diff --git a/app/models/ci/pipeline.rb b/app/models/ci/pipeline.rb
index d3fc5191721..c360a6ff729 100644
--- a/app/models/ci/pipeline.rb
+++ b/app/models/ci/pipeline.rb
@@ -78,8 +78,8 @@ def self.stages
       CommitStatus.where(pipeline: pluck(:id)).stages
     end
 
-    def stages
-      statuses.order(:stage_idx).latest.group_by(&:stage)
+    def stages_with_latest_statuses
+      statuses.latest.order(:stage_idx).group_by(&:stage)
     end
 
     def project_id
diff --git a/app/views/projects/ci/builds/_build_pipeline.html.haml b/app/views/projects/ci/builds/_build_pipeline.html.haml
new file mode 100644
index 00000000000..5149d75e5a2
--- /dev/null
+++ b/app/views/projects/ci/builds/_build_pipeline.html.haml
@@ -0,0 +1,12 @@
+%li.build
+  .build-content
+    %span{class: "ci-status-link ci-status-icon-#{subject.status}"}
+      - if subject.playable? && can?(current_user, :update_build, @project)
+        = link_to play_namespace_project_build_path(subject.project.namespace, subject.project, subject, return_to: request.original_url), method: :post, title: 'Play' do
+          = icon('play')
+      - elsif can?(current_user, :read_build, @project) && subject.started?
+        = link_to namespace_project_build_path(subject.project.namespace, subject.project, subject) do
+          = ci_icon_for_status(subject.status)
+      - else
+        = ci_icon_for_status(subject.status)
+    = subject.name
diff --git a/app/views/projects/commit/_pipeline.html.haml b/app/views/projects/commit/_pipeline.html.haml
index 5c8f40acfe3..7a7f61e9705 100644
--- a/app/views/projects/commit/_pipeline.html.haml
+++ b/app/views/projects/commit/_pipeline.html.haml
@@ -1,8 +1,8 @@
 .row-content-block.build-content.middle-block.pipeline-graph
   .pipeline-visualization
     %ul.stage-column-list
-      - stages = pipeline.statuses.latest.order(:stage_idx).group_by(&:stage)
-      - stages.each do |stage, builds|
+      - stages = pipeline.stages_with_latest_statuses
+      - stages.each do |stage, statuses|
         %li.stage-column
           .stage-name
             %a{name: stage}
@@ -10,17 +10,8 @@
               = stage.titleize
           .builds-container
             %ul
-              - builds.each do |build|
-                %li.build
-                  .build-content
-                    %span{class: "ci-status-link ci-status-icon-#{build.status}"}
-                      - if build.try(:playable?)
-                        = link_to play_namespace_project_build_path(build.project.namespace, build.project, build, return_to: request.original_url), method: :post, title: 'Play' do
-                          = icon('play')
-                      - else
-                        = link_to namespace_project_build_url(build.project.namespace, build.project, build) do
-                          = ci_icon_for_status(build.status)
-                    = build.name
+              - statuses.each do |status|
+                = render "projects/#{status.to_partial_path}_pipeline", subject: status
 
 .row-content-block.build-content.middle-block.pipeline-graph
   .pull-right
diff --git a/app/views/projects/generic_commit_statuses/_generic_commit_status_pipeline.html.haml b/app/views/projects/generic_commit_statuses/_generic_commit_status_pipeline.html.haml
new file mode 100644
index 00000000000..760918b18a3
--- /dev/null
+++ b/app/views/projects/generic_commit_statuses/_generic_commit_status_pipeline.html.haml
@@ -0,0 +1,9 @@
+%li.build
+  .build-content
+    %span{class: "ci-status-link ci-status-icon-#{subject.status}"}
+      - if subject.target_url
+        - link_to subject.target_url do
+          = ci_icon_for_status(subject.status)
+      - else
+        = ci_icon_for_status(subject.status)
+    = subject.name
-- 
GitLab


From 49e7070adfcb281938a43aceeb52cc0257601e1d Mon Sep 17 00:00:00 2001
From: Kamil Trzcinski <ayufan@ayufan.eu>
Date: Wed, 17 Aug 2016 12:08:45 +0100
Subject: [PATCH 21/25] Add support for Play and Created jobs

---
 app/helpers/ci_status_helper.rb               | 26 ++++++++++++-------
 .../ci/builds/_build_pipeline.html.haml       | 22 +++++++++-------
 app/views/projects/commit/_pipeline.html.haml | 14 ++++------
 .../_generic_commit_status_pipeline.html.haml | 14 +++++-----
 4 files changed, 41 insertions(+), 35 deletions(-)

diff --git a/app/helpers/ci_status_helper.rb b/app/helpers/ci_status_helper.rb
index ea2f5f9281a..573cdef767e 100644
--- a/app/helpers/ci_status_helper.rb
+++ b/app/helpers/ci_status_helper.rb
@@ -38,6 +38,10 @@ def ci_icon_for_status(status)
         'icon_status_pending'
       when 'running'
         'icon_status_running'
+      when 'play'
+        'icon_status_warning'
+      when 'created'
+        'icon_status_pending'
       else
         'icon_status_cancel'
       end
@@ -48,13 +52,13 @@ def ci_icon_for_status(status)
   def render_commit_status(commit, tooltip_placement: 'auto left')
     project = commit.project
     path = builds_namespace_project_commit_path(project.namespace, project, commit)
-    render_status_with_link('commit', commit.status, path, tooltip_placement)
+    render_status_with_link('commit', commit.status, path, tooltip_placement: tooltip_placement)
   end
 
   def render_pipeline_status(pipeline, tooltip_placement: 'auto left')
     project = pipeline.project
     path = namespace_project_pipeline_path(project.namespace, project, pipeline)
-    render_status_with_link('pipeline', pipeline.status, path, tooltip_placement)
+    render_status_with_link('pipeline', pipeline.status, path, tooltip_placement: tooltip_placement)
   end
 
   def no_runners_for_project?(project)
@@ -62,13 +66,17 @@ def no_runners_for_project?(project)
       Ci::Runner.shared.blank?
   end
 
-  private
+  def render_status_with_link(type, status, path = nil, tooltip_placement: 'auto left', cssclass: '')
+    klass = "ci-status-link ci-status-icon-#{status.dasherize} #{cssclass}"
+    title = "#{type.titleize}: #{ci_label_for_status(status)}"
+    data = { toggle: 'tooltip', placement: tooltip_placement }
 
-  def render_status_with_link(type, status, path, tooltip_placement, cssclass: '')
-    link_to ci_icon_for_status(status),
-            path,
-            class: "ci-status-link ci-status-icon-#{status.dasherize} #{cssclass}",
-            title: "#{type.titleize}: #{ci_label_for_status(status)}",
-            data: { toggle: 'tooltip', placement: tooltip_placement }
+    if path
+      link_to ci_icon_for_status(status), path,
+              class: klass, title: title, data: data
+    else
+      content_tag :span, ci_icon_for_status(status),
+              class: klass, title: title, data: data
+    end
   end
 end
diff --git a/app/views/projects/ci/builds/_build_pipeline.html.haml b/app/views/projects/ci/builds/_build_pipeline.html.haml
index 5149d75e5a2..8c8e0efc60f 100644
--- a/app/views/projects/ci/builds/_build_pipeline.html.haml
+++ b/app/views/projects/ci/builds/_build_pipeline.html.haml
@@ -1,12 +1,14 @@
 %li.build
   .build-content
-    %span{class: "ci-status-link ci-status-icon-#{subject.status}"}
-      - if subject.playable? && can?(current_user, :update_build, @project)
-        = link_to play_namespace_project_build_path(subject.project.namespace, subject.project, subject, return_to: request.original_url), method: :post, title: 'Play' do
-          = icon('play')
-      - elsif can?(current_user, :read_build, @project) && subject.started?
-        = link_to namespace_project_build_path(subject.project.namespace, subject.project, subject) do
-          = ci_icon_for_status(subject.status)
-      - else
-        = ci_icon_for_status(subject.status)
-    = subject.name
+    - if subject.playable? && can?(current_user, :update_build, @project)
+      = link_to play_namespace_project_build_path(subject.project.namespace, subject.project, subject, return_to: request.original_url), method: :post, title: 'Play' do
+        = render_status_with_link('build', 'play')
+        = subject.name
+    - elsif can?(current_user, :read_build, @project)
+      = link_to namespace_project_build_path(subject.project.namespace, subject.project, subject) do
+        = render_status_with_link('build', subject.status)
+        = subject.name
+    - else
+      = render_status_with_link('build', subject.status)
+      = ci_icon_for_status(subject.status)
+
diff --git a/app/views/projects/commit/_pipeline.html.haml b/app/views/projects/commit/_pipeline.html.haml
index 44250860020..9fa54057823 100644
--- a/app/views/projects/commit/_pipeline.html.haml
+++ b/app/views/projects/commit/_pipeline.html.haml
@@ -30,9 +30,8 @@
 .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
+      - stages = pipeline.stages_with_latest_statuses
+      - stages.each do |stage, statuses|
         %li.stage-column
           .stage-name
             %a{name: stage}
@@ -40,12 +39,9 @@
               = 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)
-                    = link_to build.name, namespace_project_build_url(build.project.namespace, build.project, build)
+              - statuses.each do |status|
+                = render "projects/#{status.to_partial_path}_pipeline", subject: status
+
 
 - if pipeline.yaml_errors.present?
   .bs-callout.bs-callout-danger
diff --git a/app/views/projects/generic_commit_statuses/_generic_commit_status_pipeline.html.haml b/app/views/projects/generic_commit_statuses/_generic_commit_status_pipeline.html.haml
index 760918b18a3..584c0fa18ae 100644
--- a/app/views/projects/generic_commit_statuses/_generic_commit_status_pipeline.html.haml
+++ b/app/views/projects/generic_commit_statuses/_generic_commit_status_pipeline.html.haml
@@ -1,9 +1,9 @@
 %li.build
   .build-content
-    %span{class: "ci-status-link ci-status-icon-#{subject.status}"}
-      - if subject.target_url
-        - link_to subject.target_url do
-          = ci_icon_for_status(subject.status)
-      - else
-        = ci_icon_for_status(subject.status)
-    = subject.name
+    - if subject.target_url
+      - link_to subject.target_url do
+        = render_status_with_link('commit status', subject.status)
+        = subject.name
+    - else
+      = render_status_with_link('commit status', subject.status)
+      = subject.name
-- 
GitLab


From 4e66551a6614283f5b085a523bdbfbc552edb976 Mon Sep 17 00:00:00 2001
From: Annabel Dunstone <annabel.dunstone@gmail.com>
Date: Wed, 17 Aug 2016 10:06:10 -0500
Subject: [PATCH 22/25] Add deploy btn in graph; fix JS to toggle one graph at
 a time if multiple pipelines

---
 app/assets/javascripts/pipeline.js.es6                 | 9 ++++++---
 app/assets/stylesheets/pages/pipelines.scss            | 8 ++++++++
 app/helpers/ci_status_helper.rb                        | 4 ++--
 app/views/projects/ci/builds/_build_pipeline.html.haml | 3 +--
 4 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/app/assets/javascripts/pipeline.js.es6 b/app/assets/javascripts/pipeline.js.es6
index 7054199ac89..ae7369004de 100644
--- a/app/assets/javascripts/pipeline.js.es6
+++ b/app/assets/javascripts/pipeline.js.es6
@@ -1,8 +1,11 @@
 function toggleGraph() {
-  $('.pipeline-graph, .toggle-pipeline-btn').toggleClass('graph-collapsed');
+  const indexOfBtn = $('.toggle-pipeline-btn').index($(this));
 
-  const $btnText = $('.toggle-pipeline-btn .btn-text');
-  const graphCollapsed = $('.pipeline-graph').hasClass('graph-collapsed');
+  $($('.pipeline-graph')[indexOfBtn]).toggleClass('graph-collapsed');
+  $($('.toggle-pipeline-btn')[indexOfBtn]).toggleClass('graph-collapsed');
+
+  const $btnText = $($('.toggle-pipeline-btn .btn-text')[indexOfBtn]);
+  const graphCollapsed = $($('.pipeline-graph')[indexOfBtn]).hasClass('graph-collapsed');
 
   graphCollapsed ? $btnText.text('Expand') : $btnText.text('Hide')
 }
diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss
index ce9e3e95d3d..e49543d661f 100644
--- a/app/assets/stylesheets/pages/pipelines.scss
+++ b/app/assets/stylesheets/pages/pipelines.scss
@@ -298,6 +298,10 @@
     width: 150px;
     margin-bottom: 10px;
 
+    &.deployable {
+      background-color: $gray-light;
+    }
+
     .build-content {
       width: 130px;
       white-space: nowrap;
@@ -315,6 +319,10 @@
       margin-right: 5px;
     }
 
+    .fa {
+      font-size: 13px;
+    }
+
     // Connect first build in each stage with right horizontal line
     &:first-child {
       &::after {
diff --git a/app/helpers/ci_status_helper.rb b/app/helpers/ci_status_helper.rb
index 573cdef767e..eb385d58e3b 100644
--- a/app/helpers/ci_status_helper.rb
+++ b/app/helpers/ci_status_helper.rb
@@ -39,14 +39,14 @@ def ci_icon_for_status(status)
       when 'running'
         'icon_status_running'
       when 'play'
-        'icon_status_warning'
+        'play'
       when 'created'
         'icon_status_pending'
       else
         'icon_status_cancel'
       end
 
-    custom_icon(icon_name)
+    status == 'play' ? icon(icon_name + ' fw') : custom_icon(icon_name)
   end
 
   def render_commit_status(commit, tooltip_placement: 'auto left')
diff --git a/app/views/projects/ci/builds/_build_pipeline.html.haml b/app/views/projects/ci/builds/_build_pipeline.html.haml
index 8c8e0efc60f..6be75860db2 100644
--- a/app/views/projects/ci/builds/_build_pipeline.html.haml
+++ b/app/views/projects/ci/builds/_build_pipeline.html.haml
@@ -1,4 +1,4 @@
-%li.build
+%li.build{class: ("deployable" if subject.playable? && can?(current_user, :update_build, @project))}
   .build-content
     - if subject.playable? && can?(current_user, :update_build, @project)
       = link_to play_namespace_project_build_path(subject.project.namespace, subject.project, subject, return_to: request.original_url), method: :post, title: 'Play' do
@@ -11,4 +11,3 @@
     - else
       = render_status_with_link('build', subject.status)
       = ci_icon_for_status(subject.status)
-
-- 
GitLab


From bfe2259bb76b320bd148de4fbdcebfd1b70a59ba Mon Sep 17 00:00:00 2001
From: Annabel Dunstone <annabel.dunstone@gmail.com>
Date: Wed, 17 Aug 2016 10:20:46 -0500
Subject: [PATCH 23/25] Update CSS selector and play icon

---
 app/assets/stylesheets/pages/pipelines.scss            | 2 +-
 app/helpers/ci_status_helper.rb                        | 4 ++--
 app/views/projects/ci/builds/_build_pipeline.html.haml | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss
index e49543d661f..30239d609bc 100644
--- a/app/assets/stylesheets/pages/pipelines.scss
+++ b/app/assets/stylesheets/pages/pipelines.scss
@@ -298,7 +298,7 @@
     width: 150px;
     margin-bottom: 10px;
 
-    &.deployable {
+    &.playable {
       background-color: $gray-light;
     }
 
diff --git a/app/helpers/ci_status_helper.rb b/app/helpers/ci_status_helper.rb
index eb385d58e3b..94df7d131ca 100644
--- a/app/helpers/ci_status_helper.rb
+++ b/app/helpers/ci_status_helper.rb
@@ -39,14 +39,14 @@ def ci_icon_for_status(status)
       when 'running'
         'icon_status_running'
       when 'play'
-        'play'
+        return icon('play fw')
       when 'created'
         'icon_status_pending'
       else
         'icon_status_cancel'
       end
 
-    status == 'play' ? icon(icon_name + ' fw') : custom_icon(icon_name)
+    custom_icon(icon_name)
   end
 
   def render_commit_status(commit, tooltip_placement: 'auto left')
diff --git a/app/views/projects/ci/builds/_build_pipeline.html.haml b/app/views/projects/ci/builds/_build_pipeline.html.haml
index 6be75860db2..13088ef64d9 100644
--- a/app/views/projects/ci/builds/_build_pipeline.html.haml
+++ b/app/views/projects/ci/builds/_build_pipeline.html.haml
@@ -1,4 +1,4 @@
-%li.build{class: ("deployable" if subject.playable? && can?(current_user, :update_build, @project))}
+%li.build{class: ("playable" if subject.playable? && can?(current_user, :update_build, @project))}
   .build-content
     - if subject.playable? && can?(current_user, :update_build, @project)
       = link_to play_namespace_project_build_path(subject.project.namespace, subject.project, subject, return_to: request.original_url), method: :post, title: 'Play' do
-- 
GitLab


From 2c23465d05fa1efa4213bd5d7b0e86b1cd521212 Mon Sep 17 00:00:00 2001
From: Annabel Dunstone <annabel.dunstone@gmail.com>
Date: Wed, 17 Aug 2016 10:48:49 -0500
Subject: [PATCH 24/25] Move deployable conditional to variable; fix
 pipelines_spec

---
 app/views/projects/ci/builds/_build_pipeline.html.haml | 5 +++--
 spec/features/projects/pipelines_spec.rb               | 6 +++++-
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/app/views/projects/ci/builds/_build_pipeline.html.haml b/app/views/projects/ci/builds/_build_pipeline.html.haml
index 13088ef64d9..04cbd0c3591 100644
--- a/app/views/projects/ci/builds/_build_pipeline.html.haml
+++ b/app/views/projects/ci/builds/_build_pipeline.html.haml
@@ -1,6 +1,7 @@
-%li.build{class: ("playable" if subject.playable? && can?(current_user, :update_build, @project))}
+- is_playable = subject.playable? && can?(current_user, :update_build, @project)
+%li.build{class: ("playable" if is_playable)}
   .build-content
-    - if subject.playable? && can?(current_user, :update_build, @project)
+    - if is_playable
       = link_to play_namespace_project_build_path(subject.project.namespace, subject.project, subject, return_to: request.original_url), method: :post, title: 'Play' do
         = render_status_with_link('build', 'play')
         = subject.name
diff --git a/spec/features/projects/pipelines_spec.rb b/spec/features/projects/pipelines_spec.rb
index 29d150bc597..47482bc3cc9 100644
--- a/spec/features/projects/pipelines_spec.rb
+++ b/spec/features/projects/pipelines_spec.rb
@@ -193,7 +193,11 @@
     end
 
     context 'playing manual build' do
-      before { click_link('Play') }
+      before do
+        within '.pipeline-holder' do
+          click_link('Play')
+        end
+      end
 
       it { expect(@manual.reload).to be_pending }
     end
-- 
GitLab


From 74f80465f6078b4a78ae2ebe4e367d4f1d7c890a Mon Sep 17 00:00:00 2001
From: Annabel Dunstone <annabel.dunstone@gmail.com>
Date: Wed, 17 Aug 2016 16:41:24 -0500
Subject: [PATCH 25/25] Remove index from pipeline toggles

---
 app/assets/javascripts/pipeline.js.es6        | 20 ++++++++++---------
 app/views/projects/commit/_pipeline.html.haml |  2 +-
 2 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/app/assets/javascripts/pipeline.js.es6 b/app/assets/javascripts/pipeline.js.es6
index ae7369004de..bf33eb10100 100644
--- a/app/assets/javascripts/pipeline.js.es6
+++ b/app/assets/javascripts/pipeline.js.es6
@@ -1,13 +1,15 @@
-function toggleGraph() {
-  const indexOfBtn = $('.toggle-pipeline-btn').index($(this));
+(function() {
+  function toggleGraph() {
+    const $pipelineBtn = $(this).closest('.toggle-pipeline-btn');
+    const $pipelineGraph = $(this).closest('.row-content-block').next('.pipeline-graph');
+    const $btnText = $(this).find('.toggle-btn-text');
 
-  $($('.pipeline-graph')[indexOfBtn]).toggleClass('graph-collapsed');
-  $($('.toggle-pipeline-btn')[indexOfBtn]).toggleClass('graph-collapsed');
+    $($pipelineBtn).add($pipelineGraph).toggleClass('graph-collapsed');
 
-  const $btnText = $($('.toggle-pipeline-btn .btn-text')[indexOfBtn]);
-  const graphCollapsed = $($('.pipeline-graph')[indexOfBtn]).hasClass('graph-collapsed');
+    const graphCollapsed = $pipelineGraph.hasClass('graph-collapsed');
 
-  graphCollapsed ? $btnText.text('Expand') : $btnText.text('Hide')
-}
+    graphCollapsed ? $btnText.text('Expand') : $btnText.text('Hide')
+  }
 
-$(document).on('click', '.toggle-pipeline-btn', toggleGraph);
+  $(document).on('click', '.toggle-pipeline-btn', toggleGraph);
+})();
diff --git a/app/views/projects/commit/_pipeline.html.haml b/app/views/projects/commit/_pipeline.html.haml
index 9fa54057823..20a85148ab5 100644
--- a/app/views/projects/commit/_pipeline.html.haml
+++ b/app/views/projects/commit/_pipeline.html.haml
@@ -1,7 +1,7 @@
 .row-content-block.build-content.middle-block.pipeline-actions
   .pull-right
     .btn.btn-grouped.btn-white.toggle-pipeline-btn
-      %span.btn-text Hide
+      %span.toggle-btn-text Hide
       %span pipeline graph
       %span.caret
     - if can?(current_user, :update_pipeline, pipeline.project)
-- 
GitLab