Change WorkflowStats component to use new workflow run counts

Author: jamescmartinez

packages/dashboard/src/components/workflow-stats.tsx

@@ -5,33 +5,19 @@ import {
   ClockIcon,
   HourglassIcon,
   ProhibitIcon,
-  PulseIcon,
   XCircleIcon,
 } from "@phosphor-icons/react";
-import type { WorkflowRun } from "openworkflow/internal";
+import type { WorkflowRunCounts } from "openworkflow/internal";
 
 export interface WorkflowStatsProps {
-  runs: WorkflowRun[];
+  workflowRunCounts: WorkflowRunCounts;
 }
 
-export function WorkflowStats({ runs }: WorkflowStatsProps) {
-  // this computes stats from real run data as a placeholder until the backend
-  // is updated to provide aggregated stats
-  const completed = runs.filter(
-    (r) => r.status === "completed" || r.status === "succeeded",
-  ).length;
-  const running = runs.filter((r) => r.status === "running").length;
-  const failed = runs.filter((r) => r.status === "failed").length;
-  const pending = runs.filter((r) => r.status === "pending").length;
-  const sleeping = runs.filter((r) => r.status === "sleeping").length;
-  const canceled = runs.filter((r) => r.status === "canceled").length;
+export function WorkflowStats({ workflowRunCounts }: WorkflowStatsProps) {
+  const { pending, running, sleeping, completed, failed, canceled } =
+    workflowRunCounts;
 
   const stats = [
-    {
-      label: "Total Runs",
-      value: runs.length.toLocaleString(),
-      icon: PulseIcon,
-    },
     { label: "Pending", value: pending.toLocaleString(), icon: ClockIcon },
     {
       label: "Running",
@@ -61,17 +47,13 @@ export function WorkflowStats({ runs }: WorkflowStatsProps) {
   ];
 
   return (
-    <div className="grid grid-cols-2 gap-3 sm:grid-cols-3 md:gap-4 lg:grid-cols-4 xl:grid-cols-7">
-      {stats.map((stat, index) => {
+    <div className="grid grid-cols-2 gap-3 sm:grid-cols-3 md:gap-4 xl:grid-cols-6">
+      {stats.map((stat) => {
         const Icon = stat.icon;
         return (
           <Card
             key={stat.label}
-            className={`bg-card border-border hover:border-primary/50 p-3 transition-colors sm:p-5 ${
-              index === 0
-                ? "col-span-2 sm:col-span-3 lg:col-span-2 xl:col-span-1"
-                : ""
-            }`}
+            className="bg-card border-border hover:border-primary/50 p-3 transition-colors sm:p-5"
           >
             <div className="flex items-start justify-between">
               <div className="space-y-1">

packages/dashboard/src/lib/api.ts

@@ -4,6 +4,7 @@ import type {
   PaginatedResponse,
   PaginationOptions,
   StepAttempt,
+  WorkflowRunCounts,
   WorkflowRun,
 } from "openworkflow/internal";
 import * as z from "zod";
@@ -56,6 +57,16 @@ export const listWorkflowRunsServerFn = createServerFn({ method: "GET" })
     return result;
   });
 
+/**
+ * Read workflow run counts from the backend.
+ */
+export const getWorkflowRunCountsServerFn = createServerFn({
+  method: "GET",
+}).handler(async (): Promise<WorkflowRunCounts> => {
+  const backend = await getBackend();
+  return await backend.countWorkflowRuns();
+});
+
 /**
  * Get a single workflow run by ID.
  */

packages/dashboard/src/routes/index.tsx

@@ -10,7 +10,10 @@ import {
   DialogTitle,
 } from "@/components/ui/dialog";
 import { WorkflowStats } from "@/components/workflow-stats";
-import { listWorkflowRunsServerFn } from "@/lib/api";
+import {
+  getWorkflowRunCountsServerFn,
+  listWorkflowRunsServerFn,
+} from "@/lib/api";
 import { usePolling } from "@/lib/use-polling";
 import { PlusIcon } from "@phosphor-icons/react";
 import { createFileRoute } from "@tanstack/react-router";
@@ -19,13 +22,21 @@ import { useState } from "react";
 export const Route = createFileRoute("/")({
   component: HomePage,
   loader: async () => {
-    const result = await listWorkflowRunsServerFn({ data: { limit: 100 } });
-    return result;
+    const [runsResponse, workflowRunCounts] = await Promise.all([
+      listWorkflowRunsServerFn({ data: { limit: 100 } }),
+      getWorkflowRunCountsServerFn(),
+    ]);
+
+    return {
+      runsResponse,
+      workflowRunCounts,
+    };
   },
 });
 
 function HomePage() {
-  const { data: runs } = Route.useLoaderData();
+  const { runsResponse, workflowRunCounts } = Route.useLoaderData();
+  const { data: runs } = runsResponse;
   const [isCreateRunOpen, setIsCreateRunOpen] = useState(false);
   usePolling();
 
@@ -51,7 +62,7 @@ function HomePage() {
             </Button>
           </div>
 
-          <WorkflowStats runs={runs} />
+          <WorkflowStats workflowRunCounts={workflowRunCounts} />
           <RunList runs={runs} showHeader={false} />
         </div>