More refreshing and status history displays

src/components/ProxyResourcesTable.tsx

@@ -19,6 +19,7 @@ import { toast } from "@app/hooks/useToast";
 import { createApiClient, formatAxiosError } from "@app/lib/api";
 import { UpdateResourceResponse } from "@server/routers/resource";
 import type { PaginationState } from "@tanstack/react-table";
+import { useQuery } from "@tanstack/react-query";
 import { AxiosResponse } from "axios";
 import {
     ArrowDown01Icon,
@@ -37,6 +38,7 @@ import { useTranslations } from "next-intl";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
 import {
+    useEffect,
     useOptimistic,
     useRef,
     useState,
@@ -47,6 +49,13 @@ import { useDebouncedCallback } from "use-debounce";
 import z from "zod";
 import { ColumnFilterButton } from "./ColumnFilterButton";
 import { ControlledDataTable } from "./ui/controlled-data-table";
+import {
+    Tooltip,
+    TooltipContent,
+    TooltipProvider,
+    TooltipTrigger
+} from "@app/components/ui/tooltip";
+import type { StatusHistoryResponse } from "@server/lib/statusHistory";
 
 export type TargetHealth = {
     targetId: number;
@@ -161,6 +170,13 @@ export default function ProxyResourcesTable({
     const [isRefreshing, startTransition] = useTransition();
     const [isNavigatingToAddPage, startNavigation] = useTransition();
 
+    useEffect(() => {
+        const interval = setInterval(() => {
+            router.refresh();
+        }, 10_000);
+        return () => clearInterval(interval);
+    }, []);
+
     const refreshData = () => {
         startTransition(() => {
             try {
@@ -322,6 +338,82 @@ export default function ProxyResourcesTable({
         );
     }
 
+    function ResourceStatusHistory({
+        resourceId,
+        api
+    }: {
+        resourceId: number;
+        api: ReturnType<typeof createApiClient>;
+    }) {
+        const { data: history, isLoading: loading } = useQuery({
+            queryKey: ["RESOURCE_STATUS_HISTORY", resourceId, 30],
+            queryFn: async ({ signal }) => {
+                const res = await api.get(
+                    `/resource/${resourceId}/status-history`,
+                    {
+                        params: { days: 30 },
+                        signal
+                    }
+                );
+                return (res.data.data ?? res.data) as StatusHistoryResponse;
+            },
+            staleTime: 5 * 60 * 1000,
+            meta: { api }
+        });
+
+        if (loading) {
+            return (
+                <div className="flex items-center gap-0.5">
+                    {Array.from({ length: 90 }).map((_, i) => (
+                        <div
+                            key={i}
+                            className="w-1 h-6 rounded-sm bg-muted animate-pulse"
+                        />
+                    ))}
+                </div>
+            );
+        }
+
+        if (!history) return null;
+
+        return (
+            <div className="flex items-center gap-2">
+                <TooltipProvider>
+                    <div className="flex items-center gap-0.5">
+                        {history.days.map((bucket, i) => {
+                            const colorClass =
+                                bucket.status === "good"
+                                    ? "bg-green-500"
+                                    : bucket.status === "degraded"
+                                      ? "bg-yellow-500"
+                                      : bucket.status === "bad"
+                                        ? "bg-red-500"
+                                        : "bg-muted";
+                            return (
+                                <Tooltip key={i}>
+                                    <TooltipTrigger asChild>
+                                        <div
+                                            className={`w-1 h-6 rounded-sm ${colorClass} cursor-default`}
+                                        />
+                                    </TooltipTrigger>
+                                    <TooltipContent>
+                                        <span>
+                                            {bucket.date}:{" "}
+                                            {bucket.uptimePercent}% uptime
+                                        </span>
+                                    </TooltipContent>
+                                </Tooltip>
+                            );
+                        })}
+                    </div>
+                </TooltipProvider>
+                <span className="text-sm text-muted-foreground whitespace-nowrap">
+                    {history.overallUptimePercent.toFixed(1)}% uptime
+                </span>
+            </div>
+        );
+    }
+
     const proxyColumns: ExtendedColumnDef<ResourceRow>[] = [
         {
             accessorKey: "name",
@@ -422,6 +514,20 @@ export default function ProxyResourcesTable({
                 return statusOrder[statusA] - statusOrder[statusB];
             }
         },
+        {
+            id: "statusHistory",
+            friendlyName: t("statusHistory"),
+            header: () => <span className="p-3">{t("statusHistory")}</span>,
+            cell: ({ row }) => {
+                const resourceRow = row.original;
+                return (
+                    <ResourceStatusHistory
+                        resourceId={resourceRow.id}
+                        api={api}
+                    />
+                );
+            }
+        },
         {
             accessorKey: "domain",
             friendlyName: t("access"),