@oneuptime/common 13.0.8 → 14.0.1

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

@@ -0,0 +1,214 @@
+/** @timezone UTC */
+
+import { afterEach, describe, expect, test } from "@jest/globals";
+import "@testing-library/jest-dom";
+import { cleanup, fireEvent, render, screen } from "@testing-library/react";
+import * as React from "react";
+import SecurityEvent from "../../../Models/AnalyticsModels/SecurityEvent";
+import OcsfSeverity from "../../../Types/SecurityEvent/OcsfSeverity";
+import getJestMockFunction, { MockFunction } from "../../MockType";
+import SecurityEventListRow, {
+  SECURITY_EVENT_ROW_TEST_ID,
+} from "../../../../App/FeatureSet/Dashboard/src/Components/SecurityEvents/SecurityEventListRow";
+import { SECURITY_EVENT_VOLUME_COLORS } from "../../../../App/FeatureSet/Dashboard/src/Components/SecurityEvents/SecurityEventVolume";
+
+/*
+ * One security event as a dense list row — the shape the logs and traces
+ * explorers use, rather than a grid of table cells.
+ *
+ * Line one is the read that has to work while scrolling: when, how bad, what
+ * class, what happened. Line two is the context a responder scans for, and
+ * every chip on it is labelled because `svc-deploy` and `web-01` are
+ * indistinguishable without one — a SIEM row that shows the wrong side of an
+ * interaction is worse than one that shows nothing.
+ */
+
+function event(fields: Partial<SecurityEvent> = {}): SecurityEvent {
+  return Object.assign(new SecurityEvent(), fields);
+}
+
+function renderRow(
+  securityEvent: SecurityEvent,
+  props: { isSelected?: boolean; onClick?: () => void } = {},
+): void {
+  render(<SecurityEventListRow securityEvent={securityEvent} {...props} />);
+}
+
+function row(): HTMLElement {
+  return screen.getByTestId(SECURITY_EVENT_ROW_TEST_ID);
+}
+
+function severityDot(): HTMLElement {
+  const dot: Element | null = row().querySelector("span[aria-hidden='true']");
+
+  if (!dot) {
+    throw new Error("The row has no severity dot.");
+  }
+
+  return dot as HTMLElement;
+}
+
+afterEach(() => {
+  cleanup();
+});
+
+describe("what the row says", () => {
+  test("reads severity, class and message on one line", () => {
+    renderRow(
+      event({
+        time: new Date("2026-09-17T10:00:00.000Z"),
+        severityName: OcsfSeverity.Critical,
+        className: "Authentication",
+        message: "Failed logon for alice",
+      }),
+    );
+
+    expect(row()).toHaveTextContent("Critical");
+    expect(row()).toHaveTextContent("Authentication");
+    expect(row()).toHaveTextContent("Failed logon for alice");
+  });
+
+  test("only the first line of a multi-line message is shown", () => {
+    renderRow(
+      event({ message: "Failed logon\n  at Authenticator.verify\n  at ..." }),
+    );
+
+    expect(row()).toHaveTextContent("Failed logon");
+    expect(row()).not.toHaveTextContent("Authenticator.verify");
+  });
+
+  test("an event with no message says so rather than showing a blank line", () => {
+    renderRow(event({ className: "Authentication" }));
+
+    expect(row()).toHaveTextContent("No message recorded");
+  });
+
+  test("labels every identity chip, so the two sides of an interaction stay apart", () => {
+    renderRow(
+      event({
+        principalUser: "alice",
+        principalHost: "web-01",
+        principalIp: "10.0.0.4",
+        targetUser: "root",
+        targetHost: "db-01",
+        targetIp: "10.0.0.9",
+        statusName: "Failure",
+        ruleName: "BruteForce",
+        vendorName: "Acme",
+      }),
+    );
+
+    for (const [label, value] of [
+      ["user", "alice"],
+      ["host", "web-01"],
+      ["ip", "10.0.0.4"],
+      ["target user", "root"],
+      ["target host", "db-01"],
+      ["target ip", "10.0.0.9"],
+      ["status", "Failure"],
+      ["rule", "BruteForce"],
+      ["vendor", "Acme"],
+    ]) {
+      const labelNode: HTMLElement = screen.getByText(label as string);
+      expect(labelNode.parentElement).toHaveTextContent(value as string);
+    }
+  });
+
+  test("a field the source did not send gets no chip at all", () => {
+    renderRow(event({ principalUser: "alice" }));
+
+    expect(screen.getByText("user")).toBeInTheDocument();
+    expect(screen.queryByText("host")).toBeNull();
+    expect(screen.queryByText("target user")).toBeNull();
+    expect(screen.queryByText("rule")).toBeNull();
+  });
+
+  test("the time is shown, and an event with none renders without one", () => {
+    renderRow(event({ time: new Date("2026-09-17T10:00:00.000Z") }));
+
+    expect(row().textContent).toContain("2026");
+
+    cleanup();
+    renderRow(event({ message: "no time" }));
+
+    expect(row()).toHaveTextContent("no time");
+  });
+});
+
+describe("severity colour", () => {
+  test("uses the volume chart's palette, so a colour means one thing on the page", () => {
+    renderRow(event({ severityName: OcsfSeverity.Critical }));
+
+    expect(severityDot()).toHaveStyle({
+      backgroundColor: SECURITY_EVENT_VOLUME_COLORS[OcsfSeverity.Critical],
+    });
+  });
+
+  /*
+   * The column defaults to '' and pre-normalization rows exist. Anything that
+   * is not an OCSF name is read as Unknown — the same fallback the volume
+   * chart uses, so the chart's total always equals the number of rows listed.
+   */
+  test("an unrecognised or missing severity reads as Unknown", () => {
+    renderRow(event({ severityName: "" as OcsfSeverity }));
+
+    expect(row()).toHaveTextContent(OcsfSeverity.Unknown);
+    expect(severityDot()).toHaveStyle({
+      backgroundColor: SECURITY_EVENT_VOLUME_COLORS[OcsfSeverity.Unknown],
+    });
+
+    cleanup();
+    renderRow(event({ severityName: "SUPER-BAD" as OcsfSeverity }));
+
+    expect(row()).toHaveTextContent(OcsfSeverity.Unknown);
+  });
+
+  test.each([
+    OcsfSeverity.Fatal,
+    OcsfSeverity.Critical,
+    OcsfSeverity.High,
+    OcsfSeverity.Medium,
+    OcsfSeverity.Low,
+    OcsfSeverity.Informational,
+    OcsfSeverity.Other,
+    OcsfSeverity.Unknown,
+  ])("%s has its own colour", (severity: OcsfSeverity): void => {
+    renderRow(event({ severityName: severity }));
+
+    expect(severityDot()).toHaveStyle({
+      backgroundColor: SECURITY_EVENT_VOLUME_COLORS[severity],
+    });
+  });
+});
+
+describe("opening an event", () => {
+  test("the whole row is one button", () => {
+    renderRow(event({ message: "Failed logon" }));
+
+    expect(row().tagName).toBe("BUTTON");
+    expect(row()).toHaveAttribute("type", "button");
+  });
+
+  test("clicking it asks the page to open the event", () => {
+    const onClick: MockFunction = getJestMockFunction();
+
+    renderRow(event({ message: "Failed logon" }), {
+      onClick: onClick as unknown as () => void,
+    });
+
+    fireEvent.click(row());
+
+    expect(onClick).toHaveBeenCalledTimes(1);
+  });
+
+  test("the open event is marked, so the list says which one the drawer shows", () => {
+    renderRow(event({ message: "Failed logon" }), { isSelected: true });
+
+    expect(row()).toHaveAttribute("aria-pressed", "true");
+
+    cleanup();
+    renderRow(event({ message: "Failed logon" }));
+
+    expect(row()).not.toHaveAttribute("aria-pressed");
+  });
+});

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

@@ -15,7 +15,7 @@ import {
   screen,
   within,
 } from "@testing-library/react";
-import React, { ReactElement } from "react";
+import React from "react";
 import { MemoryRouter } from "react-router-dom";
 import getJestMockFunction, { MockFunction } from "../../MockType";
 
@@ -29,32 +29,8 @@ import getJestMockFunction, { MockFunction } from "../../MockType";
  * one line, and an outline button pinned to the left edge.
  */
 
-type CapturedTableProps = {
-  id?: string;
-  noItemsMessage?: ReactElement;
-  showRefreshButton?: boolean;
-  query?: Record<string, unknown>;
-};
-
-let capturedTableProps: CapturedTableProps | null = null;
 const navigateMock: MockFunction = getJestMockFunction();
 
-jest.mock("../../../UI/Components/ModelTable/AnalyticsModelTable", () => {
-  return {
-    __esModule: true,
-    default: (props: CapturedTableProps): ReactElement => {
-      capturedTableProps = props;
-      const react: typeof React = jest.requireActual("react") as typeof React;
-
-      return react.createElement(
-        "div",
-        { "data-testid": "security-events-analytics-table" },
-        props.noItemsMessage || null,
-      );
-    },
-  };
-});
-
 jest.mock("../../../UI/Utils/Navigation", () => {
   return {
     __esModule: true,
@@ -78,7 +54,6 @@ jest.mock("../../../UI/Utils/Navigation", () => {
 import SecurityEventsEmptyState, {
   SECURITY_EVENTS_EMPTY_STATE_ID,
 } from "../../../../App/FeatureSet/Dashboard/src/Components/SecurityEvents/SecurityEventsEmptyState";
-import SecurityEventsTable from "../../../../App/FeatureSet/Dashboard/src/Components/SecurityEvents/SecurityEventsTable";
 import PageMap from "../../../../App/FeatureSet/Dashboard/src/Utils/PageMap";
 import RouteMap, {
   RouteUtil,
@@ -114,7 +89,6 @@ function navigatedTo(): Array<string> {
 }
 
 beforeEach((): void => {
-  capturedTableProps = null;
   navigateMock.mockReset();
   jest.spyOn(ProjectUtil, "getCurrentProjectId").mockReturnValue(PROJECT_ID);
 });
@@ -249,59 +223,3 @@ describe("SecurityEventsEmptyState", () => {
     expect(navigateMock).not.toHaveBeenCalled();
   });
 });
-
-describe("SecurityEventsTable empty state wiring", () => {
-  test("hands the table the Security Events empty state by default", () => {
-    render(
-      <MemoryRouter>
-        <SecurityEventsTable query={{ projectId: PROJECT_ID }} />
-      </MemoryRouter>,
-    );
-
-    expect(capturedTableProps).not.toBeNull();
-    expect(capturedTableProps?.id).toBe("security-events-table");
-    expect(capturedTableProps?.query).toEqual({ projectId: PROJECT_ID });
-    /*
-     * The page's Refresh re-reads a relative window from now and recounts
-     * the volume chart; the table's own could only re-list its old window.
-     */
-    expect(capturedTableProps?.showRefreshButton).toBe(false);
-    expect(capturedTableProps?.noItemsMessage?.type).toBe(
-      SecurityEventsEmptyState,
-    );
-
-    const table: HTMLElement = screen.getByTestId(
-      "security-events-analytics-table",
-    );
-    expect(
-      within(table).getByRole("heading", { name: "No security events yet" }),
-    ).toBeInTheDocument();
-    expect(
-      within(table).getByRole("button", { name: "Read the setup guide" }),
-    ).toBeInTheDocument();
-    expect(
-      within(table).getByRole("button", {
-        name: "Connect a security product",
-      }),
-    ).toBeInTheDocument();
-  });
-
-  test("a page that knows events exist can swap in its own message", () => {
-    render(
-      <MemoryRouter>
-        <SecurityEventsTable
-          query={{ projectId: PROJECT_ID }}
-          noItemsMessage={<p>Nothing in this window</p>}
-        />
-      </MemoryRouter>,
-    );
-
-    const table: HTMLElement = screen.getByTestId(
-      "security-events-analytics-table",
-    );
-    expect(within(table).getByText("Nothing in this window")).toBeVisible();
-    expect(
-      within(table).queryByRole("heading", { name: "No security events yet" }),
-    ).toBeNull();
-  });
-});

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

@@ -0,0 +1,248 @@
+import { afterEach, beforeEach, describe, expect, test } from "@jest/globals";
+import "@testing-library/jest-dom";
+import { act, cleanup, render } from "@testing-library/react";
+import * as React from "react";
+import { MemoryRouter } from "react-router-dom";
+import SecurityEventsNavTabs from "../../../../App/FeatureSet/Dashboard/src/Components/SecurityEvents/SecurityEventsNavTabs";
+import { getSecurityEventsBreadcrumbs } from "../../../../App/FeatureSet/Dashboard/src/Utils/Breadcrumbs/SecurityEventsBreadcrumbs";
+import PageMap from "../../../../App/FeatureSet/Dashboard/src/Utils/PageMap";
+import { RouteUtil } from "../../../../App/FeatureSet/Dashboard/src/Utils/RouteMap";
+import {
+  SecurityEventsTabKey,
+  getActiveSecurityEventsTab,
+} from "../../../../App/FeatureSet/Dashboard/src/Utils/SecurityEventsNavigation";
+import { writeTelemetryViewerUrlState } from "../../../../App/FeatureSet/Dashboard/src/Utils/TelemetryViewerUrlState";
+import Link from "../../../Types/Link";
+import { goTo, PROJECT_ID, routeFor } from "./SideMenuHarness";
+
+/*
+ * The Security Events destinations, as header tabs.
+ *
+ * They used to be a left side menu, which put this product out of step with
+ * every other telemetry signal — Logs, Traces, Metrics and Exceptions all
+ * carry theirs in the page header through the same shared TelemetryNavTabs.
+ * What is pinned here is what the move must not lose: every destination still
+ * reachable exactly once, the tab you are on highlighted, the labels still
+ * matching their breadcrumb leaves, and the Events tab carrying the slice the
+ * reader is looking at so switching away and back does not silently reset it.
+ */
+
+interface ExpectedTab {
+  label: string;
+  pageMapKey: string;
+  tab: SecurityEventsTabKey;
+}
+
+const EXPECTED_TABS: Array<ExpectedTab> = [
+  { label: "Events", pageMapKey: PageMap.SECURITY_EVENTS, tab: "events" },
+  {
+    label: "Correlate",
+    pageMapKey: PageMap.SECURITY_EVENTS_CORRELATE,
+    tab: "correlate",
+  },
+  {
+    label: "Detection Rules",
+    pageMapKey: PageMap.SECURITY_EVENTS_DETECTION_RULES,
+    tab: "detection-rules",
+  },
+  {
+    label: "Threat Intel",
+    pageMapKey: PageMap.SECURITY_EVENTS_THREAT_INTEL,
+    tab: "threat-intel",
+  },
+  {
+    label: "Monitors",
+    pageMapKey: PageMap.SECURITY_EVENTS_MONITORS,
+    tab: "monitors",
+  },
+  {
+    label: "Connections",
+    pageMapKey: PageMap.SECURITY_EVENTS_CONNECTIONS,
+    tab: "connections",
+  },
+  {
+    label: "Setup Guide",
+    pageMapKey: PageMap.SECURITY_EVENTS_DOCUMENTATION,
+    tab: "setup",
+  },
+];
+
+function renderTabs(active: SecurityEventsTabKey): void {
+  render(
+    <MemoryRouter>
+      <SecurityEventsNavTabs active={active} />
+    </MemoryRouter>,
+  );
+}
+
+function anchors(): Array<HTMLAnchorElement> {
+  return Array.from(document.querySelectorAll("a"));
+}
+
+function labels(): Array<string> {
+  return anchors().map((anchor: HTMLAnchorElement): string => {
+    return anchor.textContent?.trim() ?? "";
+  });
+}
+
+function hrefs(): Array<string> {
+  return anchors().map((anchor: HTMLAnchorElement): string => {
+    return anchor.getAttribute("href") ?? "";
+  });
+}
+
+function anchorFor(label: string): HTMLAnchorElement {
+  const anchor: HTMLAnchorElement | undefined = anchors().find(
+    (candidate: HTMLAnchorElement): boolean => {
+      return candidate.textContent?.trim() === label;
+    },
+  );
+
+  if (!anchor) {
+    throw new Error(
+      `No tab labelled "${label}". Tabs rendered: ${labels().join(", ")}`,
+    );
+  }
+
+  return anchor;
+}
+
+beforeEach(() => {
+  goTo(`/dashboard/${PROJECT_ID}/security-events`);
+});
+
+afterEach(() => {
+  cleanup();
+});
+
+describe("Security Events header tabs", () => {
+  test("every destination is a tab, in the intended order", () => {
+    renderTabs("events");
+
+    expect(labels()).toEqual(
+      EXPECTED_TABS.map((tab: ExpectedTab): string => {
+        return tab.label;
+      }),
+    );
+  });
+
+  test("keeps all seven routes reachable exactly once, with icons", () => {
+    renderTabs("events");
+
+    const expectedHrefs: Array<string> = EXPECTED_TABS.map(
+      (tab: ExpectedTab): string => {
+        return routeFor(tab.pageMapKey);
+      },
+    );
+
+    expect(anchors()).toHaveLength(7);
+    expect(hrefs()).toEqual(expectedHrefs);
+    expect(new Set(hrefs()).size).toBe(hrefs().length);
+    expect(new Set(labels()).size).toBe(labels().length);
+
+    for (const anchor of anchors()) {
+      expect(anchor.querySelector("svg")).not.toBeNull();
+    }
+  });
+
+  /*
+   * A ":projectId" left in an href is the classic failure of these menus: the
+   * link renders, reads correctly, and navigates to a page that cannot load.
+   */
+  test("every href is resolved against the current project", () => {
+    renderTabs("events");
+
+    for (const href of hrefs()) {
+      expect(href.startsWith(`/dashboard/${PROJECT_ID}/`)).toBe(true);
+      expect(href).not.toContain(":projectId");
+    }
+  });
+
+  test.each(EXPECTED_TABS)(
+    "$label is the highlighted tab when it is the active one",
+    (tab: ExpectedTab): void => {
+      renderTabs(tab.tab);
+
+      const anchor: HTMLAnchorElement = anchorFor(tab.label);
+
+      expect(anchor).toHaveClass("bg-indigo-50");
+      expect(anchor).toHaveClass("text-indigo-700");
+      expect(
+        Array.from(document.querySelectorAll("a.bg-indigo-50")),
+      ).toHaveLength(1);
+    },
+  );
+
+  test.each(EXPECTED_TABS)(
+    "the route of $label resolves back to its own tab",
+    (tab: ExpectedTab): void => {
+      expect(getActiveSecurityEventsTab(routeFor(tab.pageMapKey))).toBe(
+        tab.tab,
+      );
+    },
+  );
+
+  test("every tab label matches its breadcrumb leaf", () => {
+    for (const tab of EXPECTED_TABS) {
+      const trail: Array<Link> | undefined = getSecurityEventsBreadcrumbs(
+        RouteUtil.getRouteString(tab.pageMapKey as never),
+      );
+
+      expect(trail).toBeDefined();
+      expect(trail?.[trail.length - 1]?.title).toBe(
+        tab.pageMapKey === PageMap.SECURITY_EVENTS
+          ? "Security Events"
+          : tab.label,
+      );
+    }
+  });
+});
+
+describe("the Events tab carries the slice the reader is looking at", () => {
+  /*
+   * Only the Events tab is backed by an explorer, so it is the only tab whose
+   * link can describe a slice. Handing a `filters` payload to Detection Rules
+   * or Connections would put params on a URL nothing there reads — and
+   * re-emit them on the way back as if the user had set them there.
+   */
+  test("carries the window and chips onto the Events link, and onto no other", () => {
+    goTo(`/dashboard/${PROJECT_ID}/security-events/correlate`);
+
+    act(() => {
+      writeTelemetryViewerUrlState({
+        range: "PAST_ONE_WEEK",
+        filters: JSON.stringify([["severityName", "Critical"]]),
+        search: "failed logon",
+      });
+    });
+
+    renderTabs("correlate");
+
+    const eventsHref: string = anchorFor("Events").getAttribute("href") ?? "";
+    const params: URLSearchParams = new URLSearchParams(
+      eventsHref.slice(eventsHref.indexOf("?")),
+    );
+
+    expect(params.get("range")).toBe("PAST_ONE_WEEK");
+    expect(JSON.parse(params.get("filters") as string)).toEqual([
+      ["severityName", "Critical"],
+    ]);
+    expect(params.get("search")).toBe("failed logon");
+
+    for (const label of ["Correlate", "Detection Rules", "Connections"]) {
+      expect(anchorFor(label).getAttribute("href")).not.toContain("?");
+    }
+  });
+
+  test("an unscoped page leaves every href bare", () => {
+    act(() => {
+      writeTelemetryViewerUrlState({});
+    });
+
+    renderTabs("events");
+
+    for (const href of hrefs()) {
+      expect(href).not.toContain("?");
+    }
+  });
+});