Create separate view for pipeline view with tabs

8 files changed, 140 insertions, 52 deletions

diff --git a/app/views/projects/commit/_ci_menu.html.haml b/app/views/projects/commit/_ci_menu.html.haml
index 13ab2253733..cbfd99ca448 100644
--- a/app/views/projects/commit/_ci_menu.html.haml
+++ b/app/views/projects/commit/_ci_menu.html.haml
@@ -8,3 +8,7 @@
       = link_to pipelines_namespace_project_commit_path(@project.namespace, @project, @commit.id) do
         Pipelines
         %span.badge= @ci_pipelines.count
+  = nav_link(path: 'commit#builds') do
+    = link_to builds_namespace_project_commit_path(@project.namespace, @project, @commit.id) do
+      Builds
+      %span.badge= @statuses.count
diff --git a/app/views/projects/commit/_pipeline.html.haml b/app/views/projects/commit/_pipeline.html.haml
index 4d809ca54a3..1174158eb65 100644
--- a/app/views/projects/commit/_pipeline.html.haml
+++ b/app/views/projects/commit/_pipeline.html.haml
@@ -1,51 +1,66 @@
-.tabs-holder
-  %ul.nav-links.no-top.no-bottom
-    %li.active
-      = link_to "Pipeline", "#js-tab-pipeline", data: { target: '#js-tab-pipeline', action: 'pipeline', toggle: 'tab' }
-    %li
-      = link_to "#js-tab-builds", data: { target: '#js-tab-builds', action: 'build', toggle: 'tab' } do
-        Builds
-        %span.badge= pipeline.statuses.count
+.pipeline-graph-container
+  .row-content-block.build-content.middle-block.pipeline-actions
+    .pull-right
+      - 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
 
-.tab-content
-  #js-tab-pipeline.tab-pane.active
-    .build-content.middle-block.pipeline-graph
-      .pipeline-visualization
-        %ul.stage-column-list
-          - stages = pipeline.stages_with_latest_statuses
-          - stages.each do |stage, statuses|
-            %li.stage-column
-              .stage-name
-                %a{name: stage}
-                - if stage
-                  = stage.titleize
-              .builds-container
-                %ul
-                  = render "projects/commit/pipeline_stage", statuses: statuses
+        - if pipeline.builds.running_or_pending.any?
+          = link_to "Cancel running", cancel_namespace_project_pipeline_path(pipeline.project.namespace, pipeline.project, pipeline.id), data: { confirm: 'Are you sure?' }, class: 'btn btn-grouped btn-danger', method: :post
 
-  #js-tab-builds.tab-pane
-    - if pipeline.yaml_errors.present?
-      .bs-callout.bs-callout-danger
-        %h4 Found errors in your .gitlab-ci.yml:
-        %ul
-          - pipeline.yaml_errors.split(",").each do |error|
-            %li= error
-        You can also test your .gitlab-ci.yml in the #{link_to "Lint", ci_lint_path}
+    .oneline.clearfix
+      - if defined?(pipeline_details) && pipeline_details
+        Pipeline
+        = link_to "##{pipeline.id}", namespace_project_pipeline_path(pipeline.project.namespace, pipeline.project, pipeline.id), class: "monospace"
+        with
+        = pluralize pipeline.statuses.count(:id), "build"
+        - if pipeline.ref
+          for
+          = link_to pipeline.ref, namespace_project_commits_path(pipeline.project.namespace, pipeline.project, pipeline.ref), class: "monospace"
+        - if defined?(link_to_commit) && link_to_commit
+          for commit
+          = link_to pipeline.short_sha, namespace_project_commit_path(pipeline.project.namespace, pipeline.project, pipeline.sha), class: "monospace"
+        - if pipeline.duration
+          in
+          = time_interval_in_words pipeline.duration
 
-    - if pipeline.project.builds_enabled? && !pipeline.ci_yaml_file
-      .bs-callout.bs-callout-warning
-        \.gitlab-ci.yml not found in this commit
+  .row-content-block.build-content.middle-block.pipeline-graph.hidden
+    .pipeline-visualization
+      %ul.stage-column-list
+        - stages = pipeline.stages_with_latest_statuses
+        - stages.each do |stage, statuses|
+          %li.stage-column
+            .stage-name
+              %a{name: stage}
+              - if stage
+                = stage.titleize
+            .builds-container
+              %ul
+                = render "projects/commit/pipeline_stage", statuses: statuses
 
-    .table-holder.pipeline-holder
-      %table.table.ci-table.pipeline
-        %thead
-          %tr
-            %th Status
-            %th Build ID
-            %th Name
-            %th
-            - if pipeline.project.build_coverage_enabled?
-              %th Coverage
-            %th
-        - pipeline.statuses.relevant.stages.each do |stage|
-          = render 'projects/commit/ci_stage', stage: stage, statuses: pipeline.statuses.relevant.where(stage: stage)
+
+- if pipeline.yaml_errors.present?
+  .bs-callout.bs-callout-danger
+    %h4 Found errors in your .gitlab-ci.yml:
+    %ul
+      - pipeline.yaml_errors.split(",").each do |error|
+        %li= error
+    You can also test your .gitlab-ci.yml in the #{link_to "Lint", ci_lint_path}
+
+- 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.ci-table.pipeline
+    %thead
+      %tr
+        %th Status
+        %th Build ID
+        %th Name
+        %th
+        - if pipeline.project.build_coverage_enabled?
+          %th Coverage
+        %th
+    - pipeline.statuses.relevant.stages.each do |stage|
+      = render 'projects/commit/ci_stage', stage: stage, statuses: pipeline.statuses.relevant.where(stage: stage)
diff --git a/app/views/projects/commit/builds.html.haml b/app/views/projects/commit/builds.html.haml
new file mode 100644
index 00000000000..077b2d2725b
--- /dev/null
+++ b/app/views/projects/commit/builds.html.haml
@@ -0,0 +1,9 @@
+- @no_container = true
+- page_title "Builds", "#{@commit.title} (#{@commit.short_id})", "Commits"
+= render "projects/commits/head"
+
+%div{ class: container_class }
+  = render "commit_box"
+
+  = render "ci_menu"
+  = render "builds"
diff --git a/app/views/projects/merge_requests/_show.html.haml b/app/views/projects/merge_requests/_show.html.haml
index 1111a5b9fd8..f57abe73977 100644
--- a/app/views/projects/merge_requests/_show.html.haml
+++ b/app/views/projects/merge_requests/_show.html.haml
@@ -64,6 +64,10 @@
                 = link_to pipelines_namespace_project_merge_request_path(@project.namespace, @project, @merge_request), data: { target: '#pipelines', action: 'pipelines', toggle: 'tab' } do
                   Pipelines
                   %span.badge= @pipelines.size
+              %li.builds-tab
+                = link_to builds_namespace_project_merge_request_path(@project.namespace, @project, @merge_request), data: { target: '#builds', action: 'builds', toggle: 'tab' } do
+                  Builds
+                  %span.badge= @statuses.size
             %li.diffs-tab
               = link_to diffs_namespace_project_merge_request_path(@project.namespace, @project, @merge_request), data: { target: 'div#diffs', action: 'diffs', toggle: 'tab' } do
                 Changes
@@ -91,6 +95,8 @@
 
         #commits.commits.tab-pane
           - # This tab is always loaded via AJAX
+        #builds.builds.tab-pane
+          - # This tab is always loaded via AJAX
         #pipelines.pipelines.tab-pane
           - # This tab is always loaded via AJAX
         #diffs.diffs.tab-pane
diff --git a/app/views/projects/pipelines/_with_tabs.html.haml b/app/views/projects/pipelines/_with_tabs.html.haml
new file mode 100644
index 00000000000..4d809ca54a3
--- /dev/null
+++ b/app/views/projects/pipelines/_with_tabs.html.haml
@@ -0,0 +1,51 @@
+.tabs-holder
+  %ul.nav-links.no-top.no-bottom
+    %li.active
+      = link_to "Pipeline", "#js-tab-pipeline", data: { target: '#js-tab-pipeline', action: 'pipeline', toggle: 'tab' }
+    %li
+      = link_to "#js-tab-builds", data: { target: '#js-tab-builds', action: 'build', toggle: 'tab' } do
+        Builds
+        %span.badge= pipeline.statuses.count
+
+.tab-content
+  #js-tab-pipeline.tab-pane.active
+    .build-content.middle-block.pipeline-graph
+      .pipeline-visualization
+        %ul.stage-column-list
+          - stages = pipeline.stages_with_latest_statuses
+          - stages.each do |stage, statuses|
+            %li.stage-column
+              .stage-name
+                %a{name: stage}
+                - if stage
+                  = stage.titleize
+              .builds-container
+                %ul
+                  = render "projects/commit/pipeline_stage", statuses: statuses
+
+  #js-tab-builds.tab-pane
+    - if pipeline.yaml_errors.present?
+      .bs-callout.bs-callout-danger
+        %h4 Found errors in your .gitlab-ci.yml:
+        %ul
+          - pipeline.yaml_errors.split(",").each do |error|
+            %li= error
+        You can also test your .gitlab-ci.yml in the #{link_to "Lint", ci_lint_path}
+
+    - 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.ci-table.pipeline
+        %thead
+          %tr
+            %th Status
+            %th Build ID
+            %th Name
+            %th
+            - if pipeline.project.build_coverage_enabled?
+              %th Coverage
+            %th
+        - pipeline.statuses.relevant.stages.each do |stage|
+          = render 'projects/commit/ci_stage', stage: stage, statuses: pipeline.statuses.relevant.where(stage: stage)
diff --git a/app/views/projects/pipelines/show.html.haml b/app/views/projects/pipelines/show.html.haml
index c729e18f1e2..8c6652a5f90 100644
--- a/app/views/projects/pipelines/show.html.haml
+++ b/app/views/projects/pipelines/show.html.haml
@@ -6,4 +6,4 @@
   - if @commit
     = render "projects/pipelines/info"
 
-  = render "projects/commit/pipeline", pipeline: @pipeline
+  = render "projects/pipelines/with_tabs", pipeline: @pipeline
diff --git a/changelogs/unreleased/23637-title-bar-pipelines.yml b/changelogs/unreleased/23637-title-bar-pipelines.yml
index 4dfd9e8cfb9..3d4cf88c54c 100644
--- a/changelogs/unreleased/23637-title-bar-pipelines.yml
+++ b/changelogs/unreleased/23637-title-bar-pipelines.yml
@@ -1,4 +1,4 @@
 ---
-title: 23637-title-bar-pipelines
-merge_request: 
-author: 
+title: Redesign pipelines page
+merge_request:
+author:
diff --git a/spec/features/projects/pipelines_spec.rb b/spec/features/projects/pipelines_spec.rb
index db56a50e058..77184ede784 100644
--- a/spec/features/projects/pipelines_spec.rb
+++ b/spec/features/projects/pipelines_spec.rb
@@ -156,7 +156,10 @@ describe "Pipelines" do
       @external = create(:generic_commit_status, status: 'success', pipeline: pipeline, name: 'jenkins', stage: 'external')
     end
 
-    before { visit namespace_project_pipeline_path(project.namespace, project, pipeline) }
+    before do
+      visit namespace_project_pipeline_path(project.namespace, project, pipeline)
+      find('.builds-tab').click
+    end
 
     it 'shows a list of builds' do
       expect(page).to have_content('Test')