From e3c68d747a89bdf7f85fd87606b75e86d673efc6 Mon Sep 17 00:00:00 2001
From: Zack Cerza <zack@redhat.com>
Date: Tue, 17 Oct 2023 10:51:13 -0600
Subject: [PATCH] Run: Label filter buttons with job counts

Additionally, hide buttons when there are no jobs with their corresponding
status.

Signed-off-by: Zack Cerza <zack@redhat.com>
---
 src/lib/paddles.d.ts    |  7 ++++++-
 src/pages/Run/index.tsx | 15 ++++++++++++---
 2 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/src/lib/paddles.d.ts b/src/lib/paddles.d.ts
index 77e9bc8..afad206 100644
--- a/src/lib/paddles.d.ts
+++ b/src/lib/paddles.d.ts
@@ -26,12 +26,17 @@ export type Job = {
   scheduled: string;
 };
 
+export type RunResults = {
+  [key: string]: number | string;
+}
+
 export type Run = {
   name: string;
   branch: string;
   suite: string;
   jobs: Job[];
   scheduled: string;
+  results: RunResults;
 };
 
 export type Node = {
@@ -67,4 +72,4 @@ export interface StatsJobsResponse {
   unknown?: number;
   running?: number;
   total: number;
-}
\ No newline at end of file
+}
diff --git a/src/pages/Run/index.tsx b/src/pages/Run/index.tsx
index f7ffaef..eec797c 100644
--- a/src/pages/Run/index.tsx
+++ b/src/pages/Run/index.tsx
@@ -38,6 +38,10 @@ const FilterLink = (props: PropsWithChildren<FilterLinkProps>) => (
   </Link>
 );
 
+type StatusLabels = {
+  [key: string]: string;
+}
+
 export default function Run() {
   const [params, setParams] = useQueryParams({
     status: StringParam,
@@ -51,7 +55,12 @@ export default function Run() {
   const data: Run | undefined = query.data;
   const suite = data?.suite;
   const branch = query.data?.branch;
-  const statuses = ["pass", "fail", "dead", "running", "waiting"];
+  const statuses = ["pass", "fail", "dead", "running", "waiting", "queued"];
+  const statusLabels: StatusLabels = {};
+  statuses.forEach(item => {
+    statusLabels[item] = item.charAt(0).toUpperCase() + item.slice(1);
+    if ( data?.results[item] ) statusLabels[item] += ` (${data.results[item]})`;
+  });
   const date = query.data?.scheduled
     ? format(new Date(query.data.scheduled), "yyyy-MM-dd")
     : null;
@@ -84,7 +93,7 @@ export default function Run() {
         >
           All
         </Button>
-        {statuses.map((item) => (
+        {statuses.filter(item => data?.results[item]).map((item) => (
           <Button
             key={item}
             onClick={() => {
@@ -92,7 +101,7 @@ export default function Run() {
             }}
             variant={params.status === item ? "contained" : "outlined"}
           >
-            {item.charAt(0).toUpperCase() + item.slice(1)}
+            {statusLabels[item]}
           </Button>
         ))}
       </ButtonGroup>