Run: Label filter buttons with job counts

Additionally, hide buttons when there are no jobs with their corresponding status. Signed-off-by: Zack Cerza <[email protected]>
ceph · Oct 17, 2023 · e3c68d7 · e3c68d7
1 parent 6cc5250
commit e3c68d7
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 4 deletions.
diff --git 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;
-}
+}
diff --git 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,15 +93,15 @@ export default function Run() {
         >
           All
         </Button>
-        {statuses.map((item) => (
+        {statuses.filter(item => data?.results[item]).map((item) => (
           <Button
             key={item}
             onClick={() => {
               setParams({ status: item });
             }}
             variant={params.status === item ? "contained" : "outlined"}
           >
-            {item.charAt(0).toUpperCase() + item.slice(1)}
+            {statusLabels[item]}
           </Button>
         ))}
       </ButtonGroup>