fix: minor status page component bugs (#1943)

Author: mxkaske

packages/api/src/router/pageComponent.ts

@@ -1,6 +1,6 @@
 import { z } from "zod";
 
-import { type SQL, and, asc, desc, eq, inArray, sql } from "@openstatus/db";
+import { type SQL, and, asc, desc, eq, inArray, ne, sql } from "@openstatus/db";
 import {
   monitor,
   page,
@@ -169,7 +169,26 @@ export const pageComponentRouter = createTRPCRouter({
           )
           .all();
 
-        if (existingComponents.length >= pageComponentLimit) {
+        // Count components on OTHER pages in this workspace
+        const otherPagesComponentCount = await tx
+          .select({ id: pageComponent.id })
+          .from(pageComponent)
+          .where(
+            and(
+              eq(pageComponent.workspaceId, opts.ctx.workspace.id),
+              ne(pageComponent.pageId, opts.input.pageId),
+            ),
+          )
+          .all();
+
+        const inputComponentCount =
+          opts.input.components.length +
+          opts.input.groups.reduce((sum, g) => sum + g.components.length, 0);
+
+        const totalAfterUpdate =
+          otherPagesComponentCount.length + inputComponentCount;
+
+        if (totalAfterUpdate > pageComponentLimit) {
           throw new TRPCError({
             code: "FORBIDDEN",
             message: "You reached your page component limits.",

packages/api/src/router/statusPage.utils.test.ts

@@ -805,6 +805,70 @@ describe("getUptime", () => {
 
       expect(uptime).toBe("100%");
     });
+
+    it("should clamp report durations to the lookback window and never go negative", () => {
+      const data = Array.from({ length: 45 }, (_, i) =>
+        createStatusData(i, 100, 0, 0),
+      );
+      // Create reports that started well before the 45-day window
+      const events: Event[] = Array.from({ length: 15 }, (_, i) => {
+        const from = new Date();
+        from.setDate(from.getDate() - (60 + i * 30)); // 60 to 480 days ago
+        const to = new Date(from);
+        to.setDate(to.getDate() + 2); // each 2 days long
+        return {
+          id: i + 1,
+          name: `Old Report ${i}`,
+          from,
+          to,
+          type: "report" as const,
+          status: "degraded" as const,
+        };
+      });
+
+      const uptime = getUptime({
+        data,
+        events,
+        barType: "manual",
+        cardType: "manual",
+      });
+
+      // Reports are entirely outside the window, so uptime should be 100%
+      expect(Number.parseFloat(uptime)).toBe(100);
+    });
+
+    it("should clamp partially overlapping reports to the window boundary", () => {
+      const data = Array.from({ length: 45 }, (_, i) =>
+        createStatusData(i, 100, 0, 0),
+      );
+      // Report started 50 days ago (before window) and ended 40 days ago (inside window)
+      const from = new Date();
+      from.setDate(from.getDate() - 50);
+      const to = new Date();
+      to.setDate(to.getDate() - 40);
+      const events: Event[] = [
+        {
+          id: 1,
+          name: "Overlapping Report",
+          from,
+          to,
+          type: "report",
+          status: "degraded",
+        },
+      ];
+
+      const uptime = getUptime({
+        data,
+        events,
+        barType: "manual",
+        cardType: "manual",
+      });
+
+      // Only ~5 days should count (from window start to report end), not 10 days
+      const uptimeNum = Number.parseFloat(uptime);
+      expect(uptimeNum).toBeGreaterThan(85);
+      expect(uptimeNum).toBeLessThan(100);
+    });
   });
 
   describe("duration card type", () => {

packages/api/src/router/statusPage.utils.ts

@@ -850,14 +850,28 @@ export function getUptime({
   barType: "absolute" | "dominant" | "manual";
   cardType: "requests" | "duration" | "dominant" | "manual";
 }): string {
+  // Clamp event durations to the data lookback window to avoid
+  // events outside the window producing negative uptime values.
+  const timestamps = data.map((d) => new Date(d.day).getTime());
+  const windowStart = timestamps.length > 0 ? Math.min(...timestamps) : 0;
+  const windowEndDate = new Date(
+    timestamps.length > 0 ? Math.max(...timestamps) : Date.now(),
+  );
+  windowEndDate.setUTCHours(23, 59, 59, 999);
+  const windowEnd = windowEndDate.getTime();
+
+  function clampedDuration(item: Event): number {
+    if (!item.from) return 0;
+    const from = Math.max(item.from.getTime(), windowStart);
+    const to = Math.min((item.to || new Date()).getTime(), windowEnd);
+    return Math.max(0, to - from);
+  }
+
   if (barType === "manual") {
     const duration = events
       // NOTE: we want only user events
       .filter((e) => e.type === "report")
-      .reduce((acc, item) => {
-        if (!item.from) return acc;
-        return acc + ((item.to || new Date()).getTime() - item.from.getTime());
-      }, 0);
+      .reduce((acc, item) => acc + clampedDuration(item), 0);
 
     const total = data.length * MILLISECONDS_PER_DAY;
 
@@ -867,10 +881,7 @@ export function getUptime({
   if (cardType === "duration") {
     const duration = events
       .filter((e) => e.type === "incident")
-      .reduce((acc, item) => {
-        if (!item.from) return acc;
-        return acc + ((item.to || new Date()).getTime() - item.from.getTime());
-      }, 0);
+      .reduce((acc, item) => acc + clampedDuration(item), 0);
 
     const total = data.length * MILLISECONDS_PER_DAY;
     return `${Math.floor(((total - duration) / total) * 10000) / 100}%`;