🚧 WIP: batched site status histories

src/components/SitesTable.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import ConfirmDeleteDialog from "@app/components/ConfirmDeleteDialog";
-import UptimeMiniBar from "@app/components/UptimeMiniBar";
+import { UptimeMiniBar } from "@app/components/UptimeMiniBar";
 
 import {
     Credenza,
@@ -56,8 +56,9 @@ import { usePaidStatus } from "@app/hooks/usePaidStatus";
 import { LabelColumnFilterButton } from "./LabelColumnFilterButton";
 import { LabelsTableCell } from "./LabelsTableCell";
 import { useQuery } from "@tanstack/react-query";
-import { productUpdatesQueries } from "@app/lib/queries";
+import { orgQueries, productUpdatesQueries } from "@app/lib/queries";
 import semver from "semver";
+import { durationToMs } from "@app/lib/durationToMs";
 
 export type SiteRow = {
     id: number;
@@ -89,6 +90,8 @@ type SitesTableProps = {
     rowCount: number;
 };
 
+const SITE_STATUS_HISTORY_DAYS = 30;
+
 export default function SitesTable({
     sites,
     orgId,
@@ -112,7 +115,14 @@ export default function SitesTable({
     const [isRefreshing, startTransition] = useTransition();
     const [isNavigatingToAddPage, startNavigation] = useTransition();
 
-    const { isPaidUser } = usePaidStatus();
+    const statusHistoryQuery = useQuery({
+        ...orgQueries.batchedSiteStatusHistory({
+            orgId,
+            siteIds: sites.map((s) => s.id),
+            days: SITE_STATUS_HISTORY_DAYS
+        }),
+        staleTime: durationToMs(5, "seconds")
+    });
 
     const api = createApiClient(useEnvContext());
     const t = useTranslations();
@@ -296,7 +306,14 @@ export default function SitesTable({
                     if (originalRow.type == "local") {
                         return <span>-</span>;
                     }
-                    return <UptimeMiniBar siteId={originalRow.id} days={30} />;
+                    const data = statusHistoryQuery.data?.[row.original.id];
+                    return (
+                        <UptimeMiniBar
+                            isLoading={statusHistoryQuery.isLoading}
+                            data={data}
+                            days={SITE_STATUS_HISTORY_DAYS}
+                        />
+                    );
                 }
             },
             {
@@ -361,12 +378,9 @@ export default function SitesTable({
 
                     let updateAvailable = Boolean(
                         latestNewtVersion &&
-                            originalRow.newtVersion &&
-                            semver.valid(originalRow.newtVersion) &&
-                            semver.lt(
-                                originalRow.newtVersion,
-                                latestNewtVersion
-                            )
+                        originalRow.newtVersion &&
+                        semver.valid(originalRow.newtVersion) &&
+                        semver.lt(originalRow.newtVersion, latestNewtVersion)
                     );
 
                     if (originalRow.type === "newt") {

src/components/UptimeMiniBar.tsx

@@ -1,15 +1,14 @@
 "use client";
 
-import { useQuery } from "@tanstack/react-query";
-import { orgQueries } from "@app/lib/queries";
 import {
     Tooltip,
     TooltipContent,
     TooltipTrigger
 } from "@app/components/ui/tooltip";
-import { useEnvContext } from "@app/hooks/useEnvContext";
-import { createApiClient } from "@app/lib/api";
 import { cn } from "@app/lib/cn";
+import { orgQueries } from "@app/lib/queries";
+import type { StatusHistoryResponse } from "@server/lib/statusHistory";
+import { useQuery } from "@tanstack/react-query";
 import { useTranslations } from "next-intl";
 
 function formatDuration(seconds: number): string {
@@ -46,21 +45,16 @@ type UptimeMiniBarProps = {
     days?: number;
 };
 
-export default function UptimeMiniBar({
+export default function UptimeMiniBarWrapper({
     orgId,
     siteId,
     resourceId,
     healthCheckId,
     days = 30
 }: UptimeMiniBarProps) {
-    const t = useTranslations();
-    const api = createApiClient(useEnvContext());
-
     const siteQuery = useQuery({
         ...orgQueries.siteStatusHistory({ siteId: siteId ?? 0, days }),
-        enabled: siteId != null,
-        meta: { api },
-        staleTime: 5 * 60 * 1000
+        enabled: siteId != null
     });
 
     const hcQuery = useQuery({
@@ -69,16 +63,12 @@ export default function UptimeMiniBar({
             healthCheckId: healthCheckId ?? 0,
             days
         }),
-        enabled: healthCheckId != null && siteId == null && resourceId == null,
-        meta: { api },
-        staleTime: 5 * 60 * 1000
+        enabled: healthCheckId != null && siteId == null && resourceId == null
     });
 
     const resourceQuery = useQuery({
         ...orgQueries.resourceStatusHistory({ resourceId, days }),
-        enabled: resourceId != null && siteId == null && healthCheckId == null,
-        meta: { api },
-        staleTime: 5 * 60 * 1000
+        enabled: resourceId != null && siteId == null && healthCheckId == null
     });
 
     const { data, isLoading } =
@@ -88,6 +78,22 @@ export default function UptimeMiniBar({
               ? resourceQuery
               : hcQuery;
 
+    return <UptimeMiniBar data={data} isLoading={isLoading} days={days} />;
+}
+
+type UptimeMiniBarUIProps = {
+    data?: StatusHistoryResponse;
+    isLoading?: boolean;
+    days?: number;
+};
+
+export function UptimeMiniBar({
+    data,
+    isLoading,
+    days = 30
+}: UptimeMiniBarUIProps) {
+    const t = useTranslations();
+
     if (isLoading) {
         return (
             <div className="flex items-center gap-2">
@@ -138,7 +144,8 @@ export default function UptimeMiniBar({
                                 {formatDate(day.date)}
                             </div>
                             <div className="text-xs text-primary-foreground/80">
-                                {day.status === "no_data" || day.status === "unknown"
+                                {day.status === "no_data" ||
+                                day.status === "unknown"
                                     ? t("uptimeNoData")
                                     : `${day.uptimePercent.toFixed(1)}% ${t("uptimeSuffix")}`}
                             </div>
@@ -159,4 +166,4 @@ export default function UptimeMiniBar({
             </span>
         </div>
     );
-}
+}

src/lib/queries.ts

@@ -47,7 +47,10 @@ import { remote } from "./api";
 import { durationToMs } from "./durationToMs";
 import type { ListOrgLabelsResponse } from "@server/routers/labels/types";
 import { ListHealthChecksResponse } from "@server/routers/healthChecks/types";
-import { StatusHistoryResponse } from "@server/lib/statusHistory";
+import {
+    StatusHistoryResponse,
+    type BatchedStatusHistoryResponse
+} from "@server/lib/statusHistory";
 import type { ListResourcePoliciesResponse } from "@server/routers/resource/types";
 import type { GetResourcePolicyResponse } from "@server/routers/policy";
 import type {
@@ -642,24 +645,33 @@ export const orgQueries = {
         }),
     batchedSiteStatusHistory: ({
         siteIds,
+        orgId,
         days = 90
     }: {
+        orgId: string;
         siteIds: number[];
         days?: number;
     }) =>
         queryOptions({
             queryKey: [
-                "SITE_STATUS_HISTORY",
-                "BATCHED",
+                "ORG",
+                orgId,
+                "BATCHED_SITE_STATUS_HISTORY",
                 siteIds,
                 days
             ] as const,
             queryFn: async ({ signal, meta }) => {
-                // TODO
-                // const res = await meta!.api.get<
-                //     AxiosResponse<StatusHistoryResponse>
-                // >(`/site/${siteId}/status-history?days=${days}`, { signal });
-                // return res.data.data;
+                const sp = new URLSearchParams([
+                    ["days", days.toString()],
+                    ...siteIds.map((id) => ["siteIds", id.toString()])
+                ]);
+
+                const res = await meta!.api.get<
+                    AxiosResponse<BatchedStatusHistoryResponse>
+                >(`/org/${orgId}/site-status-histories?${sp.toString()}`, {
+                    signal
+                });
+                return res.data.data;
             }
         }),
     siteStatusHistory: ({
@@ -671,6 +683,7 @@ export const orgQueries = {
     }) =>
         queryOptions({
             queryKey: ["SITE_STATUS_HISTORY", siteId, days] as const,
+            staleTime: durationToMs(5, "seconds"),
             queryFn: async ({ signal, meta }) => {
                 const tzOffsetMinutes = -new Date().getTimezoneOffset();
                 const res = await meta!.api.get<
@@ -692,6 +705,7 @@ export const orgQueries = {
     }) =>
         queryOptions({
             queryKey: ["RESOURCE_STATUS_HISTORY", resourceId, days] as const,
+            staleTime: durationToMs(5, "seconds"),
             queryFn: async ({ signal, meta }) => {
                 const tzOffsetMinutes = -new Date().getTimezoneOffset();
                 const res = await meta!.api.get<
@@ -714,6 +728,7 @@ export const orgQueries = {
         days?: number;
     }) =>
         queryOptions({
+            staleTime: durationToMs(5, "seconds"),
             queryKey: [
                 "HC_STATUS_HISTORY",
                 orgId,