From 6fb6632110ccec9c7ad64217647e17a29bdd66e3 Mon Sep 17 00:00:00 2001
From: Filipa Lacerda <filipa@gitlab.com>
Date: Wed, 15 Mar 2017 21:51:44 +0000
Subject: [PATCH] Adds counters to badges

---
 .../vue_pipelines_index/pipelines.js          | 35 +++++++++++++++----
 1 file changed, 29 insertions(+), 6 deletions(-)

diff --git a/app/assets/javascripts/vue_pipelines_index/pipelines.js b/app/assets/javascripts/vue_pipelines_index/pipelines.js
index e9b99fede10..ffcf3744233 100644
--- a/app/assets/javascripts/vue_pipelines_index/pipelines.js
+++ b/app/assets/javascripts/vue_pipelines_index/pipelines.js
@@ -26,7 +26,12 @@ const CommitPipelinesStoreWithTimeAgo = require('../commit/pipelines/pipelines_s
         apiScope: 'all',
         pageInfo: {},
         pagenum: 1,
-        count: {},
+        count: {
+          all: 0,
+          pending: 0,
+          running: 0,
+          finished: 0,
+        },
         pageRequest: false,
         hasError: false,
         pipelinesEmptyStateSVG,
@@ -127,6 +132,7 @@ const CommitPipelinesStoreWithTimeAgo = require('../commit/pipelines/pipelines_s
                 All
               </a>
               <span class="badge js-totalbuilds-count">
+                {{count.all}}
               </span>
             </li>
             <li
@@ -135,25 +141,42 @@ const CommitPipelinesStoreWithTimeAgo = require('../commit/pipelines/pipelines_s
               <a :href="pendingPath">
                 Pending
               </a>
-              <span class="badge"></span>
+
+              <span class="badge">
+                {{count.pending}}
+              </span>
             </li>
             <li
               class="js-pipelines-tab-running"
               :class="{ 'active': scope === 'running'}">
-              <a :href="runningPath">Running</a>
-              <span class="badge"></span>
+
+              <a :href="runningPath">
+                Running
+              </a>
+
+              <span class="badge">
+                {{count.running}}
+              </span>
             </li>
+
             <li
               class="js-pipelines-tab-finished"
               :class="{ 'active': scope === 'finished'}">
-              <a :href="finishedPath">Finished</a>
-              <span class="badge"></span>
+
+              <a :href="finishedPath">
+                Finished
+              </a>
+              <span class="badge">
+                {{count.finished}}
+              </span>
             </li>
+
             <li
             class="js-pipelines-tab-branches"
             :class="{ 'active': scope === 'branches'}">
               <a :href="branchesPath">Branches</a>
             </li>
+
             <li
               class="js-pipelines-tab-tags"
               :class="{ 'active': scope === 'tags'}">