@oneuptime/common 13.0.7 → 13.0.8

package/Tests/App/Dashboard/SecurityEventsVolumeChart.test.tsx

@@ -0,0 +1,321 @@
+/** @timezone UTC */
+
+import "@testing-library/jest-dom";
+import { afterEach, describe, expect, jest, test } from "@jest/globals";
+import {
+  cleanup,
+  fireEvent,
+  render,
+  screen,
+  within,
+} from "@testing-library/react";
+import React from "react";
+import getJestMockFunction, { MockFunction } from "../../MockType";
+
+/*
+ * The Security Events volume chart: a totals row (how many events, split by
+ * severity) over a severity-stacked histogram, plus its three other states -
+ * first load, an empty window and a failed count.
+ */
+
+jest.mock("recharts", () => {
+  const react: typeof React = jest.requireActual("react") as typeof React;
+
+  interface StubRow {
+    time: string;
+  }
+
+  return {
+    __esModule: true,
+    ResponsiveContainer: (props: { children: React.ReactNode }) => {
+      return react.createElement("div", null, props.children);
+    },
+    BarChart: (props: { data: Array<StubRow>; children?: React.ReactNode }) => {
+      return react.createElement(
+        "div",
+        { "data-testid": "bar-chart" },
+        props.data.map((row: StubRow) => {
+          return react.createElement("div", {
+            key: row.time,
+            "data-testid": "chart-row",
+          });
+        }),
+        props.children,
+      );
+    },
+    Bar: (props: { dataKey: string; fill: string }) => {
+      return react.createElement("div", {
+        "data-testid": "bar",
+        "data-key": props.dataKey,
+        "data-fill": props.fill,
+      });
+    },
+    XAxis: () => {
+      return null;
+    },
+    YAxis: () => {
+      return null;
+    },
+    Tooltip: () => {
+      return null;
+    },
+    ReferenceArea: () => {
+      return null;
+    },
+  };
+});
+
+import SecurityEventsVolumeChart, {
+  SECURITY_EVENTS_VOLUME_TEST_ID,
+  SECURITY_EVENTS_VOLUME_TITLE,
+} from "../../../../App/FeatureSet/Dashboard/src/Components/SecurityEvents/SecurityEventsVolumeChart";
+import {
+  SECURITY_EVENT_VOLUME_COLORS,
+  SecurityEventVolume,
+  buildSecurityEventVolume,
+} from "../../../../App/FeatureSet/Dashboard/src/Components/SecurityEvents/SecurityEventVolume";
+import AggregatedModel from "../../../Types/BaseDatabase/AggregatedModel";
+import OcsfSeverity from "../../../Types/SecurityEvent/OcsfSeverity";
+
+const START: Date = new Date("2026-09-17T12:00:00.000Z");
+const END: Date = new Date("2026-09-17T13:00:00.000Z");
+
+function volumeOf(
+  rows: Array<[string, OcsfSeverity | string, number]>,
+): SecurityEventVolume {
+  return buildSecurityEventVolume({
+    rows: rows.map(
+      ([timestamp, severityName, value]: [
+        string,
+        OcsfSeverity | string,
+        number,
+      ]): AggregatedModel => {
+        return {
+          timestamp: timestamp as unknown as Date,
+          value: value,
+          severityName: severityName,
+        };
+      },
+    ),
+    startDate: START,
+    endDate: END,
+  });
+}
+
+const VOLUME: SecurityEventVolume = volumeOf([
+  ["2026-09-17T12:05:00.000Z", OcsfSeverity.Critical, 2],
+  ["2026-09-17T12:05:00.000Z", OcsfSeverity.Low, 40],
+  ["2026-09-17T12:40:00.000Z", OcsfSeverity.High, 1],
+  ["2026-09-17T12:41:00.000Z", OcsfSeverity.Informational, 1200],
+]);
+
+function renderChart(
+  props: Partial<React.ComponentProps<typeof SecurityEventsVolumeChart>> = {},
+): void {
+  render(
+    <SecurityEventsVolumeChart volume={VOLUME} isLoading={false} {...props} />,
+  );
+}
+
+function totalText(): string {
+  return (
+    screen.getByTestId(`${SECURITY_EVENTS_VOLUME_TEST_ID}-total`).textContent ||
+    ""
+  );
+}
+
+function severityItems(): Array<HTMLElement> {
+  return within(
+    screen.getByRole("list", { name: "Events by severity" }),
+  ).getAllByRole("listitem");
+}
+
+function barKeys(): Array<string> {
+  return screen.queryAllByTestId("bar").map((bar: HTMLElement): string => {
+    return bar.getAttribute("data-key") || "";
+  });
+}
+
+afterEach(() => {
+  cleanup();
+});
+
+describe("SecurityEventsVolumeChart totals", () => {
+  test("states the window's total with thousands separators", () => {
+    renderChart();
+
+    expect(totalText()).toBe("1,243 events");
+  });
+
+  test("uses the singular for a single event", () => {
+    renderChart({
+      volume: volumeOf([["2026-09-17T12:05:00.000Z", OcsfSeverity.High, 1]]),
+    });
+
+    expect(totalText()).toBe("1 event");
+  });
+
+  test("splits the total by severity, most severe first, skipping severities with none", () => {
+    renderChart();
+
+    expect(
+      severityItems().map((item: HTMLElement): string => {
+        return item.textContent || "";
+      }),
+    ).toEqual(["Critical2", "High1", "Low40", "Informational1,200"]);
+  });
+
+  test("each severity's swatch is the colour of its bars", () => {
+    renderChart();
+
+    const critical: HTMLElement = screen.getByTestId(
+      `${SECURITY_EVENTS_VOLUME_TEST_ID}-severity-${OcsfSeverity.Critical}`,
+    );
+    const swatch: HTMLElement = critical.querySelector(
+      "[aria-hidden='true']",
+    ) as HTMLElement;
+
+    expect(swatch).toHaveStyle({
+      backgroundColor: SECURITY_EVENT_VOLUME_COLORS[OcsfSeverity.Critical],
+    });
+  });
+
+  test("says it is counting before the first count arrives", () => {
+    renderChart({ volume: null, isLoading: true });
+
+    expect(totalText()).toBe("Counting events...");
+    expect(
+      screen.queryByRole("list", { name: "Events by severity" }),
+    ).toBeNull();
+  });
+
+  test("keeps the last totals on screen while a recount runs", () => {
+    renderChart({ isLoading: true });
+
+    expect(totalText()).toBe("1,243 events");
+    expect(screen.getByTestId(SECURITY_EVENTS_VOLUME_TEST_ID)).toHaveAttribute(
+      "aria-busy",
+      "true",
+    );
+  });
+
+  test("renders the toolbar at the end of the totals row", () => {
+    renderChart({
+      toolbar: <button type="button">Past 1 Day</button>,
+    });
+
+    expect(
+      screen.getByRole("button", { name: "Past 1 Day" }),
+    ).toBeInTheDocument();
+  });
+});
+
+describe("SecurityEventsVolumeChart histogram", () => {
+  test("is titled Security Event Volume", () => {
+    renderChart();
+
+    expect(SECURITY_EVENTS_VOLUME_TITLE).toBe("Security Event Volume");
+    expect(screen.getByText(SECURITY_EVENTS_VOLUME_TITLE)).toBeInTheDocument();
+  });
+
+  test("stacks one bar series per severity present, most severe at the bottom", () => {
+    renderChart();
+
+    expect(barKeys()).toEqual([
+      OcsfSeverity.Critical,
+      OcsfSeverity.High,
+      OcsfSeverity.Low,
+      OcsfSeverity.Informational,
+    ]);
+  });
+
+  test("paints each severity in its own colour", () => {
+    renderChart();
+
+    for (const bar of screen.getAllByTestId("bar")) {
+      expect(bar.getAttribute("data-fill")).toBe(
+        SECURITY_EVENT_VOLUME_COLORS[
+          bar.getAttribute("data-key") as OcsfSeverity
+        ],
+      );
+    }
+  });
+
+  test("gives every minute of the hour its place on the axis", () => {
+    renderChart();
+
+    expect(screen.getAllByTestId("chart-row")).toHaveLength(61);
+  });
+
+  test("offers drag-to-zoom when it can zoom, and zoom-out once it has", () => {
+    renderChart({
+      onTimeRangeSelect: getJestMockFunction(),
+      onZoomOut: getJestMockFunction(),
+    });
+
+    expect(screen.getByText("Drag to zoom")).toBeInTheDocument();
+    expect(screen.getByText("Double-click to zoom out")).toBeInTheDocument();
+  });
+
+  test("offers neither without the handlers", () => {
+    renderChart();
+
+    expect(screen.queryByText("Drag to zoom")).toBeNull();
+    expect(screen.queryByText("Double-click to zoom out")).toBeNull();
+  });
+});
+
+describe("SecurityEventsVolumeChart other states", () => {
+  test("an empty window says so rather than drawing an empty axis", () => {
+    renderChart({ volume: volumeOf([]) });
+
+    expect(
+      screen.getByTestId(`${SECURITY_EVENTS_VOLUME_TEST_ID}-empty`),
+    ).toHaveTextContent("No security events in this time range.");
+    expect(screen.queryByTestId("bar-chart")).toBeNull();
+    expect(totalText()).toBe("0 events");
+    expect(
+      screen.queryByRole("list", { name: "Events by severity" }),
+    ).toBeNull();
+  });
+
+  test("an empty window that is being recounted keeps the chart frame rather than flashing empty", () => {
+    renderChart({ volume: volumeOf([]), isLoading: true });
+
+    expect(
+      screen.queryByTestId(`${SECURITY_EVENTS_VOLUME_TEST_ID}-empty`),
+    ).toBeNull();
+  });
+
+  test("a failed count shows the error, under the chart's title, with a retry", () => {
+    const onRetry: MockFunction = getJestMockFunction();
+
+    renderChart({ error: "Could not reach ClickHouse", onRetry: onRetry });
+
+    const error: HTMLElement = screen.getByTestId(
+      `${SECURITY_EVENTS_VOLUME_TEST_ID}-error`,
+    );
+    expect(error).toHaveTextContent(SECURITY_EVENTS_VOLUME_TITLE);
+    expect(error).toHaveTextContent("Could not reach ClickHouse");
+    expect(screen.queryByTestId("bar-chart")).toBeNull();
+
+    fireEvent.click(within(error).getByTestId("refresh-button"));
+    expect(onRetry).toHaveBeenCalledTimes(1);
+  });
+
+  test("a failed count does not leave stale totals claiming to describe the window", () => {
+    renderChart({ error: "Could not reach ClickHouse" });
+
+    expect(totalText()).toBe("");
+    expect(
+      screen.queryByRole("list", { name: "Events by severity" }),
+    ).toBeNull();
+  });
+
+  test("the first load shows the chart's loader", () => {
+    renderChart({ volume: null, isLoading: true });
+
+    expect(screen.queryByTestId("bar-chart")).toBeNull();
+    expect(screen.getByTestId("component-loader")).toBeInTheDocument();
+  });
+});

package/Tests/App/Dashboard/SloOverviewHero.test.tsx

@@ -30,9 +30,8 @@ import SloWindowType from "../../../Types/ServiceLevelObjective/SloWindowType";
 
 /*
  * The SLO overview hero, RENDERED: the verdict, the facts every number below
- * depends on, and the owners and labels strip. In particular the "window
- * filling" chip that replaced the full-width "Window not yet full" banner
- * must appear for a young rolling window and for nothing else.
+ * depends on, and ownership. The facts form a labelled definition list,
+ * and the window-filling badge appears only for a young rolling window.
  */
 
 const SLO_ID: ObjectID = new ObjectID("5f8b7c1e2d3a4b5c6d7e8f90");
@@ -97,11 +96,11 @@ const renderHero: RenderHeroFunction = (
   );
 };
 
-type ChipTextsFunction = () => Array<string>;
+type FactValuesFunction = () => Array<string>;
 
-const getChipTexts: ChipTextsFunction = (): Array<string> => {
-  return within(screen.getByRole("list", { name: "SLO at a glance" }))
-    .getAllByRole("listitem")
+const getFactValues: FactValuesFunction = (): Array<string> => {
+  return within(screen.getByLabelText("SLO at a glance"))
+    .getAllByRole("definition")
     .map((item: HTMLElement) => {
       return item.textContent || "";
     });
@@ -118,13 +117,70 @@ describe("SloOverviewHero", () => {
     expect(
       screen.getByText("Customers can pay for their basket."),
     ).toBeInTheDocument();
-    expect(getChipTexts()).toEqual([
-      "Target 99.9%",
+    const facts: HTMLElement = screen.getByLabelText("SLO at a glance");
+    expect(facts.tagName).toBe("DL");
+    expect(
+      within(facts)
+        .getAllByRole("term")
+        .map((term: HTMLElement) => {
+          return term.textContent;
+        }),
+    ).toEqual(["Target", "Compliance window", "Monitors", "Owners"]);
+    expect(getFactValues()).toEqual([
+      "99.9%",
       "Rolling 30 days",
       "3 monitors",
+      "Add owners",
     ]);
   });
 
+  test.each([
+    {
+      status: SloStatus.Healthy,
+      headline: "Within error budget",
+      tone: "text-emerald-800",
+    },
+    {
+      status: SloStatus.AtRisk,
+      headline: "Error budget running low",
+      tone: "text-amber-800",
+    },
+    {
+      status: SloStatus.BudgetExhausted,
+      headline: "Error budget exhausted",
+      tone: "text-red-800",
+    },
+    {
+      status: SloStatus.Misconfigured,
+      headline: "Cannot be evaluated",
+      tone: "text-gray-700",
+    },
+    {
+      status: SloStatus.Paused,
+      headline: "Measurement paused",
+      tone: "text-gray-700",
+    },
+  ])(
+    "renders $status with a matching headline and soft status badge",
+    ({
+      status,
+      headline,
+      tone,
+    }: {
+      status: SloStatus;
+      headline: string;
+      tone: string;
+    }) => {
+      renderHero({ slo: buildSlo({ sloStatus: status }) });
+
+      expect(screen.getByRole("heading", { level: 2 })).toHaveTextContent(
+        headline,
+      );
+      expect(screen.getByText(status)).toHaveClass("bg-gradient-to-r", tone);
+      expect(screen.queryByRole("img")).toBeNull();
+    },
+  );
+
   test("says when it was last evaluated, with the exact time on hover", () => {
     renderHero({});
 
@@ -132,7 +188,9 @@ describe("SloOverviewHero", () => {
       "slo-overview-last-evaluated",
     );
 
-    expect(lastEvaluated.textContent).toMatch(/^Evaluated .+ · every 5 min$/);
+    expect(lastEvaluated.textContent).toMatch(/^Evaluated .+/);
+    expect(lastEvaluated).not.toHaveTextContent("Runs every");
+    expect(screen.getByText("Runs every 5 minutes")).toBeInTheDocument();
 
     const time: HTMLElement = lastEvaluated.querySelector("time")!;
     expect(time).toHaveAttribute("dateTime", LAST_EVALUATED_AT.toISOString());
@@ -154,17 +212,21 @@ describe("SloOverviewHero", () => {
     );
     expect(screen.queryByText("Unknown")).toBeNull();
     expect(screen.getByTestId("slo-overview-last-evaluated")).toHaveTextContent(
-      "Not evaluated yet · runs every 5 min",
+      "Not evaluated yet",
     );
+    expect(screen.getByText("Runs every 5 minutes")).toBeInTheDocument();
+    expect(screen.getAllByText("Not evaluated yet")).toHaveLength(2);
 
     const monitorsChip: HTMLElement = screen.getByTestId(
       "slo-overview-chip-monitors",
     );
     expect(monitorsChip).toHaveTextContent("No monitors");
-    expect(monitorsChip.querySelector("span")!.className).toContain("amber");
+    expect(within(monitorsChip).getByText("No monitors")).toHaveClass(
+      "text-yellow-700",
+    );
   });
 
-  test("a young rolling window gets a 'window filling' chip instead of a banner", () => {
+  test("a young rolling window shows its filling badge alongside its compliance window", () => {
     renderHero({ slo: buildSlo({ errorBudgetTotalSeconds: 648 }) });
 
     const chip: HTMLElement = screen.getByTestId(
@@ -175,12 +237,14 @@ describe("SloOverviewHero", () => {
     expect(chip.getAttribute("title")).toContain(
       "younger than its compliance window",
     );
-    expect(getChipTexts()).toEqual([
-      "Target 99.9%",
+    const window: HTMLElement = screen.getByTestId("slo-overview-chip-window");
+    expect(window).toContainElement(chip);
+    expect(within(window).getByRole("term")).toHaveTextContent(
+      "Compliance window",
+    );
+    expect(within(window).getByRole("definition")).toHaveTextContent(
       "Rolling 30 days",
-      "Window 25% full",
-      "3 monitors",
-    ]);
+    );
   });
 
   test("a mature window, a calendar month and an averaged SLO get no window chip", () => {
@@ -196,7 +260,7 @@ describe("SloOverviewHero", () => {
       }),
     });
     expect(screen.queryByTestId("slo-overview-chip-window-fill")).toBeNull();
-    expect(getChipTexts()).toContain("Calendar month (Europe/Berlin)");
+    expect(getFactValues()).toContain("Calendar month (Europe/Berlin)");
     cleanup();
 
     renderHero({
@@ -208,29 +272,80 @@ describe("SloOverviewHero", () => {
     expect(screen.queryByTestId("slo-overview-chip-window-fill")).toBeNull();
   });
 
-  test("disabled and archived SLOs say so, and never claim a stale verdict", () => {
-    renderHero({
-      slo: buildSlo({ isEnabled: false, isArchived: true }),
-    });
+  test.each([
+    { isEnabled: false, isArchived: false, status: "Disabled" },
+    { isEnabled: true, isArchived: true, status: "Archived" },
+    { isEnabled: false, isArchived: true, status: "Archived" },
+  ])(
+    "$status overrides stale health when enabled=$isEnabled and archived=$isArchived",
+    ({
+      isEnabled,
+      isArchived,
+      status,
+    }: {
+      isEnabled: boolean;
+      isArchived: boolean;
+      status: string;
+    }) => {
+      renderHero({ slo: buildSlo({ isEnabled, isArchived }) });
+
+      expect(screen.getByTestId("slo-overview-headline")).toHaveTextContent(
+        `${status} — not being measured`,
+      );
+      expect(screen.getByText(status, { exact: true })).toHaveClass(
+        "text-gray-700",
+      );
+      expect(screen.queryByText("Healthy", { exact: true })).toBeNull();
+      expect(screen.queryByText("Within error budget")).toBeNull();
+      if (isArchived) {
+        expect(screen.queryByText("Disabled", { exact: true })).toBeNull();
+      }
+    },
+  );
 
-    expect(screen.getByTestId("slo-overview-headline")).toHaveTextContent(
-      "Archived — not being measured",
-    );
-    expect(getChipTexts()).toEqual(
-      expect.arrayContaining(["Disabled", "Archived"]),
-    );
-  });
+  test.each([undefined, ""])(
+    "an empty description (%s) adds no placeholder copy",
+    (description: string | undefined) => {
+      renderHero({ slo: buildSlo({ description }) });
+
+      expect(screen.queryByText(/No description/)).toBeNull();
+      expect(
+        screen.getByTestId("slo-overview-headline").nextElementSibling,
+      ).toBeNull();
+    },
+  );
 
-  test("an SLO without a description invites one", () => {
-    renderHero({ slo: buildSlo({ description: undefined }) });
+  test("a missing target is explicit instead of showing an incomplete percentage", () => {
+    renderHero({ slo: buildSlo({ targetPercentage: undefined }) });
 
     expect(
-      screen.getByText(
-        "No description yet. Say what this objective protects in SLO Details below.",
+      within(screen.getByTestId("slo-overview-chip-target")).getByRole(
+        "definition",
       ),
-    ).toBeInTheDocument();
+    ).toHaveTextContent("Not set");
   });
 
+  test.each([
+    { count: 0, label: "No monitors" },
+    { count: 1, label: "1 monitor" },
+    { count: 3, label: "3 monitors" },
+  ])(
+    "the $label summary links to this SLO's Monitors page",
+    ({ count, label }: { count: number; label: string }) => {
+      renderHero({ monitorCount: count });
+
+      const monitorsHref: string = RouteUtil.populateRouteParams(
+        RouteMap[PageMap.SLO_VIEW_MONITORS] as Route,
+        { modelId: SLO_ID },
+      ).toString();
+
+      expect(screen.getByRole("link", { name: label })).toHaveAttribute(
+        "href",
+        monitorsHref,
+      );
+    },
+  );
+
   describe("owners", () => {
     const ownersHref: string = RouteUtil.populateRouteParams(
       RouteMap[PageMap.SLO_VIEW_OWNERS] as Route,
@@ -286,10 +401,11 @@ describe("SloOverviewHero", () => {
     expect(screen.queryByText("No labels")).toBeNull();
   });
 
-  test("owners sit beside the evaluation time, labelled", () => {
+  test("owners are labelled within the summary facts", () => {
     renderHero({ owners: [] });
 
     const owners: HTMLElement = screen.getByTestId("slo-overview-owners");
+    expect(screen.getByLabelText("SLO at a glance")).toContainElement(owners);
     expect(owners).toHaveTextContent("Owners");
     expect(
       within(owners).getByRole("link", { name: "Add owners" }),
@@ -307,5 +423,24 @@ describe("SloOverviewHero", () => {
     expect(screen.getByRole("alert")).toHaveTextContent(
       "Could not refresh — showing the last numbers that loaded. Network error.",
     );
+    expect(getFactValues()).toContain("99.9%");
+  });
+
+  test("an in-progress refresh disables duplicate requests and keeps the summary visible", () => {
+    const onRefresh: MockFunction = getJestMockFunction();
+
+    renderHero({ onRefresh, isRefreshing: true });
+
+    const refreshButton: HTMLElement = screen.getByRole("button", {
+      name: "Refresh",
+    });
+    expect(refreshButton).toBeDisabled();
+    expect(refreshButton).toHaveAttribute("aria-disabled", "true");
+    fireEvent.click(refreshButton);
+    expect(onRefresh).not.toHaveBeenCalled();
+    expect(screen.getByTestId("slo-overview-headline")).toHaveTextContent(
+      "Within error budget",
+    );
+    expect(getFactValues()).toContain("99.9%");
   });
 });