✨ resource status histories

src/components/PublicResourcesTable.tsx

@@ -31,10 +31,13 @@ import { toast } from "@app/hooks/useToast";
 import { createApiClient, formatAxiosError } from "@app/lib/api";
 import { cn } from "@app/lib/cn";
 import { dataTableFilterPopoverContentClassName } from "@app/lib/dataTableFilterPopover";
+import { durationToMs } from "@app/lib/durationToMs";
+import { orgQueries } from "@app/lib/queries";
 import { getNextSortOrder, getSortDirection } from "@app/lib/sortColumn";
 import { build } from "@server/build";
 import { tierMatrix } from "@server/lib/billing/tierMatrix";
 import { UpdateResourceResponse } from "@server/routers/resource";
+import { useQuery } from "@tanstack/react-query";
 import type { PaginationState } from "@tanstack/react-table";
 import { AxiosResponse } from "axios";
 import {
@@ -69,7 +72,7 @@ import { useDebouncedCallback } from "use-debounce";
 import z from "zod";
 import { ColumnFilterButton } from "./ColumnFilterButton";
 import { ControlledDataTable } from "./ui/controlled-data-table";
-import UptimeMiniBar from "./UptimeMiniBar";
+import { UptimeMiniBar } from "./UptimeMiniBar";
 import { type SelectedLabel } from "./labels-selector";
 import { LabelColumnFilterButton } from "./LabelColumnFilterButton";
 import { useLocalLabels } from "@app/hooks/useLocalLabels";
@@ -127,6 +130,8 @@ const booleanSearchFilterSchema = z
     .optional()
     .catch(undefined);
 
+const RESOURCE_STATUS_HISTORY_DAYS = 30;
+
 export default function PublicResourcesTable({
     resources,
     orgId,
@@ -155,6 +160,21 @@ export default function PublicResourcesTable({
     const [isRefreshing, startTransition] = useTransition();
     const [isNavigatingToAddPage, startNavigation] = useTransition();
 
+    // Only http resources show an uptime bar, so don't ask for the others
+    const statusHistoryResourceIds = useMemo(
+        () => resources.filter((r) => r.mode === "http").map((r) => r.id),
+        [resources]
+    );
+
+    const statusHistoryQuery = useQuery({
+        ...orgQueries.batchedResourceStatusHistory({
+            orgId,
+            resourceIds: statusHistoryResourceIds,
+            days: RESOURCE_STATUS_HISTORY_DAYS
+        }),
+        enabled: statusHistoryResourceIds.length > 0
+    });
+
     const refreshData = () => {
         startTransition(() => {
             try {
@@ -407,7 +427,11 @@ export default function PublicResourcesTable({
                         return <span>-</span>;
                     }
                     return (
-                        <UptimeMiniBar resourceId={resourceRow.id} days={30} />
+                        <UptimeMiniBar
+                            isLoading={statusHistoryQuery.isLoading}
+                            data={statusHistoryQuery.data?.[resourceRow.id]}
+                            days={RESOURCE_STATUS_HISTORY_DAYS}
+                        />
                     );
                 }
             },
@@ -625,7 +649,13 @@ export default function PublicResourcesTable({
         ];
 
         return cols;
-    }, [orgId, t, searchParams]);
+    }, [
+        orgId,
+        t,
+        searchParams,
+        statusHistoryQuery.data,
+        statusHistoryQuery.isLoading
+    ]);
 
     function handleFilterChange(
         column: string,