Merge branch '26900-pipelines-tabs' into 'master'

Resolve "CI - Pipelines and Builds screens are inconsistent"

Closes #26900

See merge request !9265

4 files changed, 33 insertions, 9 deletions

diff --git a/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 b/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6
index 0265c00a414..9d66d28cc62 100644
--- a/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6
+++ b/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6
@@ -23,7 +23,7 @@ const CommitPipelinesStoreWithTimeAgo = require('../commit/pipelines/pipelines_s
         apiScope: 'all',
         pageInfo: {},
         pagenum: 1,
-        count: { all: 0, running_or_pending: 0 },
+        count: {},
         pageRequest: false,
       };
     },
diff --git a/app/controllers/projects/pipelines_controller.rb b/app/controllers/projects/pipelines_controller.rb
index 84451257b98..8657bc4dfdc 100644
--- a/app/controllers/projects/pipelines_controller.rb
+++ b/app/controllers/projects/pipelines_controller.rb
@@ -13,9 +13,15 @@ class Projects::PipelinesController < Projects::ApplicationController
       .page(params[:page])
       .per(30)
 
-    @running_or_pending_count = PipelinesFinder
+    @running_count = PipelinesFinder
       .new(project).execute(scope: 'running').count
 
+    @pending_count = PipelinesFinder
+      .new(project).execute(scope: 'pending').count
+
+    @finished_count = PipelinesFinder
+      .new(project).execute(scope: 'finished').count
+
     @pipelines_count = PipelinesFinder
       .new(project).execute.count
 
@@ -29,7 +35,9 @@ class Projects::PipelinesController < Projects::ApplicationController
             .represent(@pipelines),
           count: {
             all: @pipelines_count,
-            running_or_pending: @running_or_pending_count
+            running: @running_count,
+            pending: @pending_count,
+            finished: @finished_count,
           }
         }
       end
diff --git a/app/finders/pipelines_finder.rb b/app/finders/pipelines_finder.rb
index 32aea75486d..a9172f6767f 100644
--- a/app/finders/pipelines_finder.rb
+++ b/app/finders/pipelines_finder.rb
@@ -10,7 +10,11 @@ class PipelinesFinder
     scoped_pipelines =
       case scope
       when 'running'
-        pipelines.running_or_pending
+        pipelines.running
+      when 'pending'
+        pipelines.pending
+      when 'finished'
+        pipelines.finished
       when 'branches'
         from_ids(ids_for_ref(branches))
       when 'tags'
diff --git a/app/views/projects/pipelines/index.html.haml b/app/views/projects/pipelines/index.html.haml
index 6e0428e2a31..4147a617d95 100644
--- a/app/views/projects/pipelines/index.html.haml
+++ b/app/views/projects/pipelines/index.html.haml
@@ -5,23 +5,35 @@
 %div{ class: container_class }
   .top-area
     %ul.nav-links
-      %li{ class: active_when(@scope.nil?) }>
+      %li.js-pipelines-tab-all{ class: active_when(@scope.nil?) }>
         = link_to project_pipelines_path(@project) do
           All
           %span.badge.js-totalbuilds-count
             = number_with_delimiter(@pipelines_count)
 
-      %li{ class: active_when(@scope == 'running') }>
+      %li.js-pipelines-tab-pending{ class: active_when(@scope == 'pending') }>
+        = link_to project_pipelines_path(@project, scope: :pending) do
+          Pending
+          %span.badge
+            = number_with_delimiter(@pending_count)
+
+      %li.js-pipelines-tab-running{ class: active_when(@scope == 'running') }>
         = link_to project_pipelines_path(@project, scope: :running) do
           Running
           %span.badge.js-running-count
-            = number_with_delimiter(@running_or_pending_count)
+            = number_with_delimiter(@running_count)
+
+      %li.js-pipelines-tab-finished{ class: active_when(@scope == 'finished') }>
+        = link_to project_pipelines_path(@project, scope: :finished) do
+          Finished
+          %span.badge
+            = number_with_delimiter(@finished_count)
 
-      %li{ class: active_when(@scope == 'branches') }>
+      %li.js-pipelines-tab-branches{ class: active_when(@scope == 'branches') }>
         = link_to project_pipelines_path(@project, scope: :branches) do
           Branches
 
-      %li{ class: active_when(@scope == 'tags') }>
+      %li.js-pipelines-tab-tags{ class: active_when(@scope == 'tags') }>
         = link_to project_pipelines_path(@project, scope: :tags) do
           Tags