Merge pull request #3467 from fosrl/dev

1.21.0

compose.example.yaml

@@ -41,7 +41,7 @@ services:
       - 80:80 # Port for traefik because of the network_mode
 
   traefik:
-    image: traefik:v3.6
+    image: traefik:v3.7
     container_name: traefik
     restart: unless-stopped
     network_mode: service:gerbil # Ports appear on the gerbil service

install/config/docker-compose.yml

@@ -50,7 +50,7 @@ services:
       - 80:80{{end}}
 
   traefik:
-    image: docker.io/traefik:v3.6
+    image: docker.io/traefik:v3.7
     container_name: traefik
     restart: unless-stopped
     {{if .InstallGerbil}}network_mode: service:gerbil # Ports appear on the gerbil service{{end}}{{if not .InstallGerbil}}

server/lib/statusHistory.ts

@@ -1,6 +1,6 @@
 import { z } from "zod";
 import { db, logsDb, statusHistory } from "@server/db";
-import { and, eq, gte, lt, asc, desc, inArray, max, sql } from "drizzle-orm";
+import { and, eq, gte, lt, asc, desc } from "drizzle-orm";
 import { regionalCache as cache } from "#dynamic/lib/cache";
 
 const STATUS_HISTORY_CACHE_TTL = 60; // seconds
@@ -41,7 +41,6 @@ export async function getCachedStatusHistory(
         return cached;
     }
 
-    console.time(`[getCachedStatusHistory/${entityType}=${entityId}]`);
     // Anchor to local midnight (UTC when tzOffsetMinutes is 0) so the query
     // window aligns with stable calendar days for the requesting client
     const todayMidnightSec = localMidnightSec(tzOffsetMinutes);
@@ -77,14 +76,12 @@ export async function getCachedStatusHistory(
 
     const priorStatus = lastKnownEvent?.status ?? null;
 
-    console.time(`[computeBuckets/${entityType}=${entityId}]`);
     const { buckets, totalDowntime } = computeBuckets(
         events,
         days,
         priorStatus,
         tzOffsetMinutes
     );
-    console.timeEnd(`[computeBuckets/${entityType}=${entityId}]`);
     const totalWindow = days * 86400;
     const overallUptime =
         totalWindow > 0
@@ -99,7 +96,6 @@ export async function getCachedStatusHistory(
         totalDowntimeSeconds: totalDowntime
     };
 
-    console.timeEnd(`[getCachedStatusHistory/${entityType}=${entityId}]`);
     await cache.set(cacheKey, result, STATUS_HISTORY_CACHE_TTL);
     return result;
 }
@@ -268,7 +264,9 @@ export function computeBuckets(
 
         // Shift by the client's offset before formatting so the label reflects
         // their local calendar date rather than the UTC date of dayStartSec
-        const dateStr = new Date((dayStartSec + tzOffsetMinutes * 60) * 1000)
+        const dateStr = new Date(
+            (dayStartSec + tzOffsetMinutes * 60) * 1000
+        )
             .toISOString()
             .slice(0, 10);
 
@@ -303,139 +301,6 @@ export function computeBuckets(
             status
         });
     }
+
     return { buckets, totalDowntime };
 }
-
-export type BatchedStatusHistoryResponse = Record<
-    string,
-    StatusHistoryResponse
->;
-
-export async function getBatchedStatusHistory(
-    entityType: string,
-    entityIds: number[],
-    days: number,
-    tzOffsetMinutes: number = 0
-): Promise<BatchedStatusHistoryResponse> {
-    // const cacheKey = statusHistoryCacheKey(entityType, entityId, days);
-    // const cached = await cache.get<StatusHistoryResponse>(cacheKey);
-    // if (cached !== undefined) {
-    //     return cached;
-    // }
-
-    console.time(
-        `[getBatchedStatusHistory/${entityType}=(${entityIds.join(" ,")})]`
-    );
-
-    // Anchor to local midnight (UTC when tzOffsetMinutes is 0) so the query
-    // window aligns with stable calendar days for the requesting client
-    const todayMidnightSec = localMidnightSec(tzOffsetMinutes);
-    const startSec = todayMidnightSec - days * 86400;
-
-    const events = await logsDb
-        .select()
-        .from(statusHistory)
-        .where(
-            and(
-                eq(statusHistory.entityType, entityType),
-                inArray(statusHistory.entityId, entityIds),
-                gte(statusHistory.timestamp, startSec)
-            )
-        )
-        .orderBy(asc(statusHistory.timestamp));
-
-    // Fetch the last known state before the window so that entities that
-    // haven't changed status recently still show the correct status rather
-    // than appearing as "no_data".
-
-    /**
-     * If we used only postgres, we would have used `SELECT DISTINCT ON` to get the
-     * latest event for each `entityId`,
-     * but it doesn't work on SQLite, so instead we use a subquery,
-     * the `ROW_NUMBER() OVER PARTITION` allows to assign a number
-     * to each row ordered by the timestamp, the number 1 is the first one appearing in
-     * the specified order, then the next and more, we only want the highest timestamp,
-     * so we get for `row_number=1`
-     */
-    const lastKnowEventsSub = logsDb
-        .select({
-            entityId: statusHistory.entityId,
-            status: statusHistory.status,
-            timestamp: statusHistory.timestamp,
-            row_number:
-                sql<number>`ROW_NUMBER() OVER (PARTITION BY ${statusHistory.entityId} ORDER BY ${statusHistory.timestamp} DESC)`.as(
-                    "row_number"
-                )
-        })
-        .from(statusHistory)
-        .where(
-            and(
-                eq(statusHistory.entityType, entityType),
-                inArray(statusHistory.entityId, entityIds),
-                lt(statusHistory.timestamp, startSec)
-            )
-        )
-        .as("sub");
-
-    const lastKnownEvents = await logsDb
-        .select({
-            entityId: lastKnowEventsSub.entityId,
-            status: lastKnowEventsSub.status,
-            timestamp: lastKnowEventsSub.timestamp
-        })
-        .from(lastKnowEventsSub)
-        .where(eq(lastKnowEventsSub.row_number, 1));
-
-    const eventStatusMap: Record<
-        number,
-        {
-            events: typeof events;
-            lastKnownEvent: (typeof lastKnownEvents)[number] | null;
-        }
-    > = {};
-
-    for (const entityId of entityIds) {
-        eventStatusMap[entityId] = {
-            events: events.filter((ev) => ev.entityId === entityId),
-            lastKnownEvent:
-                lastKnownEvents.find((ev) => ev.entityId === entityId) ?? null
-        };
-    }
-
-    const result: BatchedStatusHistoryResponse = {};
-
-    console.time(`[computeBuckets/${entityType}=(${entityIds.join(" ,")})]`);
-    for (const entityId in eventStatusMap) {
-        const event = eventStatusMap[Number(entityId)];
-        const priorStatus = event.lastKnownEvent?.status ?? null;
-
-        const { buckets, totalDowntime } = computeBuckets(
-            event.events,
-            days,
-            priorStatus
-        );
-        const totalWindow = days * 86400;
-        const overallUptime =
-            totalWindow > 0
-                ? Math.max(
-                      0,
-                      ((totalWindow - totalDowntime) / totalWindow) * 100
-                  )
-                : 100;
-
-        result[entityId] = {
-            entityType,
-            entityId: Number(entityId),
-            days: buckets,
-            overallUptimePercent: Math.round(overallUptime * 100) / 100,
-            totalDowntimeSeconds: totalDowntime
-        };
-    }
-    console.timeEnd(`[computeBuckets/${entityType}=(${entityIds.join(" ,")})]`);
-
-    console.timeEnd(
-        `[getBatchedStatusHistory/${entityType}=(${entityIds.join(" ,")})]`
-    );
-    // await cache.set(cacheKey, result, STATUS_HISTORY_CACHE_TTL);
-    return result;
-}

server/routers/external.ts

@@ -319,13 +319,6 @@ authenticated.get(
     site.getSiteStatusHistory
 );
 
-authenticated.get(
-    "/org/:orgId/site-status-histories",
-    verifyOrgAccess,
-    verifyUserHasAction(ActionsEnum.listSites),
-    site.getBatchedSiteStatusHistory
-);
-
 // Site Resource endpoints
 authenticated.put(
     "/org/:orgId/site-resource",

server/routers/site/getBatchedStatusHistory.ts

@@ -1,83 +0,0 @@
-import response from "@server/lib/response";
-import {
-    getBatchedStatusHistory,
-    type BatchedStatusHistoryResponse
-} from "@server/lib/statusHistory";
-import logger from "@server/logger";
-import HttpCode from "@server/types/HttpCode";
-import { NextFunction, Request, Response } from "express";
-import createHttpError from "http-errors";
-import { z } from "zod";
-import { fromError } from "zod-validation-error";
-
-const siteIdParamsSchema = z.object({
-    days: z
-        .string()
-        .optional()
-        .transform((v) => (v ? parseInt(v, 10) : 90)),
-    // Minutes to add to UTC to get the requesting client's local time
-    // (e.g. Australia/Sydney standard time is 600). Optional and
-    // defaults to 0 (UTC) so older clients keep the prior behavior.
-    tzOffsetMinutes: z
-        .string()
-        .optional()
-        .transform((v) => (v ? parseInt(v, 10) : 0)),
-    siteIds: z
-        .preprocess((val) => {
-            if (val === undefined || val === null || val === "") {
-                return undefined;
-            }
-            const raw = Array.isArray(val) ? val : [val];
-            const nums = raw
-                .map((v) =>
-                    typeof v === "string" ? parseInt(v, 10) : Number(v)
-                )
-                .filter((n) => Number.isInteger(n) && n > 0);
-            const unique = [...new Set(nums)];
-            return unique.length ? unique : undefined;
-        }, z.array(z.number().int().positive()))
-        .openapi({
-            description: "Filter by siteIds (repeat query param)"
-        })
-});
-
-export async function getBatchedSiteStatusHistory(
-    req: Request,
-    res: Response,
-    next: NextFunction
-): Promise<any> {
-    try {
-        const parsedQuery = siteIdParamsSchema.safeParse(req.query);
-        if (!parsedQuery.success) {
-            return next(
-                createHttpError(
-                    HttpCode.BAD_REQUEST,
-                    fromError(parsedQuery.error).toString()
-                )
-            );
-        }
-
-        const entityType = "site";
-        const { days, siteIds, tzOffsetMinutes } = parsedQuery.data;
-
-        const data = await getBatchedStatusHistory(
-            entityType,
-            siteIds,
-            days,
-            tzOffsetMinutes
-        );
-
-        return response<BatchedStatusHistoryResponse>(res, {
-            data,
-            success: true,
-            error: false,
-            message: "Status history retrieved successfully",
-            status: HttpCode.OK
-        });
-    } catch (error) {
-        logger.error(error);
-        return next(
-            createHttpError(HttpCode.INTERNAL_SERVER_ERROR, "An error occurred")
-        );
-    }
-}

server/routers/site/index.ts

@@ -1,6 +1,5 @@
 export * from "./getSite";
 export * from "./getStatusHistory";
-export * from "./getBatchedStatusHistory";
 export * from "./createSite";
 export * from "./deleteSite";
 export * from "./updateSite";

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,
@@ -52,12 +52,12 @@ import {
 } from "./ui/controlled-data-table";
 
 import { useOptimisticLabels } from "@app/hooks/useOptimisticLabels";
-import { durationToMs } from "@app/lib/durationToMs";
+import { usePaidStatus } from "@app/hooks/usePaidStatus";
-import { orgQueries, productUpdatesQueries } from "@app/lib/queries";
-import { useQuery } from "@tanstack/react-query";
-import semver from "semver";
 import { LabelColumnFilterButton } from "./LabelColumnFilterButton";
 import { LabelsTableCell } from "./LabelsTableCell";
+import { useQuery } from "@tanstack/react-query";
+import { productUpdatesQueries } from "@app/lib/queries";
+import semver from "semver";
 
 export type SiteRow = {
     id: number;
@@ -89,8 +89,6 @@ type SitesTableProps = {
     rowCount: number;
 };
 
-const SITE_STATUS_HISTORY_DAYS = 30;
-
 export default function SitesTable({
     sites,
     orgId,
@@ -114,14 +112,7 @@ export default function SitesTable({
     const [isRefreshing, startTransition] = useTransition();
     const [isNavigatingToAddPage, startNavigation] = useTransition();
 
-    const statusHistoryQuery = useQuery({
+    const { isPaidUser } = usePaidStatus();
-        ...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();
@@ -305,14 +296,7 @@ export default function SitesTable({
                     if (originalRow.type == "local") {
                         return <span>-</span>;
                     }
-                    const data = statusHistoryQuery.data?.[row.original.id];
+                    return <UptimeMiniBar siteId={originalRow.id} days={30} />;
-                    return (
-                        <UptimeMiniBar
-                            isLoading={statusHistoryQuery.isLoading}
-                            data={data}
-                            days={SITE_STATUS_HISTORY_DAYS}
-                        />
-                    );
                 }
             },
             {
@@ -375,11 +359,14 @@ export default function SitesTable({
                 cell: ({ row }) => {
                     const originalRow = row.original;
 
-                    const updateAvailable = Boolean(
+                    let updateAvailable = Boolean(
                         latestNewtVersion &&
-                        originalRow.newtVersion &&
+                            originalRow.newtVersion &&
-                        semver.valid(originalRow.newtVersion) &&
+                            semver.valid(originalRow.newtVersion) &&
-                        semver.lt(originalRow.newtVersion, latestNewtVersion)
+                            semver.lt(
+                                originalRow.newtVersion,
+                                latestNewtVersion
+                            )
                     );
 
                     if (originalRow.type === "newt") {

src/components/UptimeMiniBar.tsx

@@ -1,14 +1,15 @@
 "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 {
@@ -45,16 +46,21 @@ type UptimeMiniBarProps = {
     days?: number;
 };
 
-export default function UptimeMiniBarWrapper({
+export default function UptimeMiniBar({
     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
+        enabled: siteId != null,
+        meta: { api },
+        staleTime: 5 * 60 * 1000
     });
 
     const hcQuery = useQuery({
@@ -63,12 +69,16 @@ export default function UptimeMiniBarWrapper({
             healthCheckId: healthCheckId ?? 0,
             days
         }),
-        enabled: healthCheckId != null && siteId == null && resourceId == null
+        enabled: healthCheckId != null && siteId == null && resourceId == null,
+        meta: { api },
+        staleTime: 5 * 60 * 1000
     });
 
     const resourceQuery = useQuery({
         ...orgQueries.resourceStatusHistory({ resourceId, days }),
-        enabled: resourceId != null && siteId == null && healthCheckId == null
+        enabled: resourceId != null && siteId == null && healthCheckId == null,
+        meta: { api },
+        staleTime: 5 * 60 * 1000
     });
 
     const { data, isLoading } =
@@ -78,22 +88,6 @@ export default function UptimeMiniBarWrapper({
               ? 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">
@@ -144,8 +138,7 @@ export function UptimeMiniBar({
                                 {formatDate(day.date)}
                             </div>
                             <div className="text-xs text-primary-foreground/80">
-                                {day.status === "no_data" ||
+                                {day.status === "no_data" || day.status === "unknown"
-                                day.status === "unknown"
                                     ? t("uptimeNoData")
                                     : `${day.uptimePercent.toFixed(1)}% ${t("uptimeSuffix")}`}
                             </div>

src/lib/queries.ts

@@ -47,10 +47,7 @@ import { remote } from "./api";
 import { durationToMs } from "./durationToMs";
 import type { ListOrgLabelsResponse } from "@server/routers/labels/types";
 import { ListHealthChecksResponse } from "@server/routers/healthChecks/types";
-import {
+import { StatusHistoryResponse } from "@server/lib/statusHistory";
-    StatusHistoryResponse,
-    type BatchedStatusHistoryResponse
-} from "@server/lib/statusHistory";
 import type { ListResourcePoliciesResponse } from "@server/routers/resource/types";
 import type { GetResourcePolicyResponse } from "@server/routers/policy";
 import type {
@@ -643,37 +640,6 @@ export const orgQueries = {
                 };
             }
         }),
-    batchedSiteStatusHistory: ({
-        siteIds,
-        orgId,
-        days = 90
-    }: {
-        orgId: string;
-        siteIds: number[];
-        days?: number;
-    }) =>
-        queryOptions({
-            queryKey: [
-                "ORG",
-                orgId,
-                "BATCHED_SITE_STATUS_HISTORY",
-                siteIds,
-                days
-            ] as const,
-            queryFn: async ({ signal, meta }) => {
-                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: ({
         siteId,
         days = 90
@@ -683,7 +649,6 @@ 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<
@@ -705,7 +670,6 @@ 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<
@@ -728,7 +692,6 @@ export const orgQueries = {
         days?: number;
     }) =>
         queryOptions({
-            staleTime: durationToMs(5, "seconds"),
             queryKey: [
                 "HC_STATUS_HISTORY",
                 orgId,