feat: add WorkerSparkline

Author: moonrailgun

src/client/components/worker/WorkerSparkline.tsx

@@ -0,0 +1,88 @@
+import { trpc } from '@/api/trpc';
+import { useCurrentWorkspaceId } from '@/store/user';
+import { Sparkline } from '@/components/chart/Sparkline';
+import React from 'react';
+import { getDateArray } from '@tianji/shared';
+import dayjs from 'dayjs';
+
+export const WorkerSparkline: React.FC<{ workerId: string }> = React.memo(
+  ({ workerId }) => {
+    const workspaceId = useCurrentWorkspaceId();
+
+    // Use last 24 hours data
+    const startDate = dayjs().subtract(24, 'hour').startOf('hour');
+    const endDate = dayjs().endOf('hour');
+
+    const { data = [], isLoading } = trpc.worker.getExecutionTrend.useQuery(
+      {
+        workspaceId,
+        workerId,
+      },
+      {
+        select(data) {
+          if (!data || data.length === 0) {
+            // Return 8 empty data points for consistent display
+            return [
+              { value: 0 },
+              { value: 0 },
+              { value: 0 },
+              { value: 0 },
+              { value: 0 },
+              { value: 0 },
+              { value: 0 },
+              { value: 0 },
+            ];
+          }
+
+          return getDateArray(
+            data.map((item) => ({
+              date: item.date,
+              value: item.value,
+            })),
+            startDate,
+            endDate,
+            'hour'
+          );
+        },
+        refetchInterval: 5 * 60 * 1000, // Refresh every 5 minutes
+        trpc: {
+          context: {
+            skipBatch: true,
+          },
+        },
+      }
+    );
+
+    if (isLoading) {
+      return (
+        <div className="flex h-6 w-20 items-center justify-center">
+          <span className="text-muted-foreground text-xs">Loading...</span>
+        </div>
+      );
+    }
+
+    if (!data || data.length === 0) {
+      return (
+        <div className="flex h-6 w-20 items-center justify-center">
+          <span className="text-muted-foreground text-xs">No data</span>
+        </div>
+      );
+    }
+
+    // Extract counts for sparkline
+    const sparklineData = data.map((item) => item.value || 0);
+
+    return (
+      <div className="flex items-center gap-2">
+        <Sparkline
+          data={sparklineData}
+          width={80}
+          height={24}
+          strokeWidth={1.5}
+          showGradient={true}
+        />
+      </div>
+    );
+  }
+);
+WorkerSparkline.displayName = 'WorkerSparkline';

src/client/routes/worker.tsx

@@ -1,6 +1,6 @@
 import { trpc } from '@/api/trpc';
 import { CommonHeader } from '@/components/CommonHeader';
-import { CommonList } from '@/components/CommonList';
+import { CommonList, CommonListItem } from '@/components/CommonList';
 import { CommonWrapper } from '@/components/CommonWrapper';
 import { Button } from '@/components/ui/button';
 import { Layout } from '@/components/layout';
@@ -16,6 +16,8 @@ import {
 import { LuPlus } from 'react-icons/lu';
 import { useEvent } from '@/hooks/useEvent';
 import { useDataReady } from '@/hooks/useDataReady';
+import { useMemo } from 'react';
+import { WorkerSparkline } from '@/components/worker/WorkerSparkline';
 
 export const Route = createFileRoute('/worker')({
   beforeLoad: routeAuthBeforeLoad,
@@ -34,12 +36,16 @@ function PageComponent() {
   });
   const hasAdminPermission = useHasAdminPermission();
 
-  const items = data.map((item) => ({
-    id: item.id,
-    title: item.name,
-    content: item.description || '',
-    href: `/worker/${item.id}`,
-  }));
+  const items: CommonListItem[] = useMemo(() => {
+    return data.length > 0
+      ? data.map((item) => ({
+          id: item.id,
+          title: item.name,
+          href: `/worker/${item.id}`,
+          content: <WorkerSparkline workerId={item.id} />,
+        }))
+      : [];
+  }, [data]);
 
   useDataReady(
     () => data.length > 0,
@@ -88,6 +94,7 @@ function PageComponent() {
           <CommonList
             hasSearch={true}
             items={items}
+            direction="horizontal"
             isLoading={isLoading}
             emptyDescription={t(
               'No function workers yet. Create one to run JavaScript code in an isolated environment.'

src/server/trpc/routers/worker.ts

@@ -379,6 +379,58 @@ export const workerRouter = router({
         avgCpuTime: result.avgCpuTime,
       };
     }),
+
+  // Get execution trend for sparkline (last 24 hours, grouped by hour)
+  getExecutionTrend: workspaceProcedure
+    .input(
+      z.object({
+        workerId: z.cuid2(),
+      })
+    )
+    .query(async ({ input }) => {
+      const { workerId, workspaceId } = input;
+
+      // Verify worker exists and belongs to workspace
+      const worker = await prisma.functionWorker.findUnique({
+        where: {
+          id: workerId,
+          workspaceId,
+        },
+      });
+
+      if (!worker) {
+        throw new Error('Worker not found');
+      }
+
+      // Calculate time range for last 24 hours
+      const endDate = new Date();
+      const startDate = new Date();
+      startDate.setHours(startDate.getHours() - 24);
+
+      // Query execution counts grouped by hour
+      const trendData = await prisma.$queryRaw<
+        Array<{
+          hour: Date;
+          count: bigint;
+        }>
+      >`
+        SELECT
+          DATE_TRUNC('hour', "createdAt") as hour,
+          COUNT(*)::int as count
+        FROM "FunctionWorkerExecution"
+        WHERE "workerId" = ${workerId}
+          AND "createdAt" >= ${startDate}
+          AND "createdAt" <= ${endDate}
+        GROUP BY DATE_TRUNC('hour', "createdAt")
+        ORDER BY hour ASC
+      `;
+
+      // Convert to the format expected by frontend
+      return trendData.map((item) => ({
+        date: item.hour.toISOString(),
+        value: Number(item.count),
+      }));
+    }),
   testCode: workspaceAdminProcedure
     .input(
       z.object({