@oneuptime/common 13.0.8 → 14.0.0

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

@@ -0,0 +1,399 @@
+/** @timezone UTC */
+
+import {
+  afterEach,
+  beforeEach,
+  describe,
+  expect,
+  jest,
+  test,
+} from "@jest/globals";
+import "@testing-library/jest-dom";
+import {
+  cleanup,
+  fireEvent,
+  render,
+  screen,
+  within,
+} from "@testing-library/react";
+import * as React from "react";
+import { MemoryRouter } from "react-router-dom";
+import SecurityEvent from "../../../Models/AnalyticsModels/SecurityEvent";
+import OcsfSeverity from "../../../Types/SecurityEvent/OcsfSeverity";
+import Navigation from "../../../UI/Utils/Navigation";
+import getJestMockFunction, { MockFunction } from "../../MockType";
+import SecurityEventDetailPanel, {
+  SECURITY_EVENT_DETAIL_ATTRIBUTES_TAB_ID,
+  SECURITY_EVENT_DETAIL_JSON_TAB_ID,
+  SECURITY_EVENT_DETAIL_OVERVIEW_TAB_ID,
+  SECURITY_EVENT_DETAIL_PANEL_TEST_ID,
+} from "../../../../App/FeatureSet/Dashboard/src/Components/SecurityEvents/SecurityEventDetailPanel";
+import { SECURITY_EVENT_ATTRIBUTE_FACET_PREFIX } from "../../../../App/FeatureSet/Dashboard/src/Components/SecurityEvents/SecurityEventsFacets";
+
+/*
+ * One security event, opened from the list.
+ *
+ * Built on the shared TelemetryDetailPanel — the drawer the traces and
+ * exceptions explorers open — rather than a SideOver, so the list stays
+ * usable behind it. What is pinned here is what the drawer is FOR: reading
+ * the whole event (typed fields, every source attribute, the raw record) and
+ * turning anything in it into a filter on the list behind it without
+ * re-typing it into the search bar.
+ */
+
+const PROJECT_ID: string = "11111111-1111-4111-8111-111111111111";
+
+function event(fields: Partial<SecurityEvent> = {}): SecurityEvent {
+  return Object.assign(new SecurityEvent(), fields);
+}
+
+const FULL_EVENT: SecurityEvent = event({
+  time: new Date("2026-09-17T10:00:00.000Z"),
+  eventUid: "abc123",
+  severityName: OcsfSeverity.Critical,
+  className: "Authentication",
+  categoryName: "IAM",
+  activityName: "Logon",
+  statusName: "Failure",
+  message: "Failed logon for alice",
+  vendorName: "Acme",
+  productName: "Defender",
+  ruleName: "BruteForce",
+  principalUser: "alice",
+  principalHost: "web-01",
+  observables: ["alice", "10.0.0.4"],
+  attributes: {
+    "threat.matched": "true",
+    "device.hostname": "web-01",
+  },
+});
+
+function renderPanel(
+  securityEvent: SecurityEvent = FULL_EVENT,
+  props: {
+    onClose?: () => void;
+    onFilterBy?: (facetKey: string, value: string) => void;
+    onCorrelateObservable?: (observable: string) => void;
+  } = {},
+): void {
+  render(
+    <MemoryRouter>
+      <SecurityEventDetailPanel
+        securityEvent={securityEvent}
+        onClose={props.onClose || ((): void => {})}
+        {...(props.onFilterBy ? { onFilterBy: props.onFilterBy } : {})}
+        {...(props.onCorrelateObservable
+          ? { onCorrelateObservable: props.onCorrelateObservable }
+          : {})}
+      />
+    </MemoryRouter>,
+  );
+}
+
+function panel(): HTMLElement {
+  return screen.getByTestId(SECURITY_EVENT_DETAIL_PANEL_TEST_ID);
+}
+
+function tab(label: string): HTMLElement {
+  return screen.getByRole("tab", { name: new RegExp(`^${label}`) });
+}
+
+function filterButton(label: string): HTMLElement {
+  return screen.getByRole("button", { name: `Filter by ${label}` });
+}
+
+beforeEach(() => {
+  window.history.replaceState(
+    null,
+    "",
+    `/dashboard/${PROJECT_ID}/security-events`,
+  );
+});
+
+afterEach(() => {
+  cleanup();
+  jest.restoreAllMocks();
+});
+
+describe("the drawer", () => {
+  test("names the event and when it happened", () => {
+    renderPanel();
+
+    expect(panel()).toHaveTextContent("Failed logon for alice");
+    expect(panel().textContent).toContain("2026");
+  });
+
+  test("falls back to the event class when there is no message", () => {
+    renderPanel(event({ className: "Authentication" }));
+
+    expect(panel()).toHaveTextContent("Authentication");
+  });
+
+  test("offers Overview, Attributes and JSON, opening on Overview", () => {
+    renderPanel();
+
+    expect(
+      screen.getAllByRole("tab").map((node: HTMLElement): string => {
+        return node.getAttribute("id") || "";
+      }),
+    ).toEqual(
+      expect.arrayContaining([
+        expect.stringContaining(SECURITY_EVENT_DETAIL_OVERVIEW_TAB_ID),
+        expect.stringContaining(SECURITY_EVENT_DETAIL_ATTRIBUTES_TAB_ID),
+        expect.stringContaining(SECURITY_EVENT_DETAIL_JSON_TAB_ID),
+      ]),
+    );
+    expect(tab("Overview")).toHaveAttribute("aria-selected", "true");
+  });
+
+  test("the Attributes tab counts what it holds, so a reader knows before opening it", () => {
+    renderPanel();
+
+    expect(tab("Attributes")).toHaveTextContent("2");
+  });
+
+  test("closing it tells the page", () => {
+    const onClose: MockFunction = getJestMockFunction();
+
+    renderPanel(FULL_EVENT, { onClose: onClose as unknown as () => void });
+
+    fireEvent.click(screen.getByRole("button", { name: /close/i }));
+
+    expect(onClose).toHaveBeenCalledTimes(1);
+  });
+});
+
+describe("Overview", () => {
+  test("shows the typed OCSF fields, severity as a pill", () => {
+    renderPanel();
+
+    expect(panel()).toHaveTextContent("Event Class");
+    expect(panel()).toHaveTextContent("Authentication");
+    expect(panel()).toHaveTextContent("Status");
+    expect(panel()).toHaveTextContent("Failure");
+    expect(panel()).toHaveTextContent(OcsfSeverity.Critical);
+  });
+
+  test("omits what the source did not say", () => {
+    renderPanel(event({ className: "Authentication" }));
+
+    expect(panel()).not.toHaveTextContent("Target Host");
+    expect(panel()).not.toHaveTextContent("MITRE Tactics");
+  });
+
+  test("lists observables as chips, and says so when there are none", () => {
+    renderPanel();
+
+    expect(
+      screen.getByTestId("security-event-panel-observable-chip-0"),
+    ).toHaveTextContent("alice");
+    expect(
+      screen.getByTestId("security-event-panel-observable-chip-1"),
+    ).toHaveTextContent("10.0.0.4");
+
+    cleanup();
+    renderPanel(event({ message: "no observables" }));
+
+    expect(panel()).toHaveTextContent(
+      "No observables extracted from this event.",
+    );
+  });
+});
+
+describe("filtering the list from the drawer", () => {
+  test("severity, and every typed field the sidebar also facets, offers a filter", () => {
+    const onFilterBy: MockFunction = getJestMockFunction();
+
+    renderPanel(FULL_EVENT, {
+      onFilterBy: onFilterBy as unknown as (
+        facetKey: string,
+        value: string,
+      ) => void,
+    });
+
+    fireEvent.click(filterButton("Severity"));
+    expect(onFilterBy).toHaveBeenLastCalledWith(
+      "severityName",
+      OcsfSeverity.Critical,
+    );
+
+    fireEvent.click(filterButton("Event Class"));
+    expect(onFilterBy).toHaveBeenLastCalledWith("className", "Authentication");
+
+    fireEvent.click(filterButton("Principal User"));
+    expect(onFilterBy).toHaveBeenLastCalledWith("principalUser", "alice");
+
+    fireEvent.click(filterButton("Detection Rule"));
+    expect(onFilterBy).toHaveBeenLastCalledWith("ruleName", "BruteForce");
+  });
+
+  /*
+   * Filtering on a value that is unique per row would return the one event
+   * already on screen, so those fields deliberately offer no action.
+   */
+  test("free-text and unique fields offer none", () => {
+    renderPanel(FULL_EVENT, {
+      onFilterBy: getJestMockFunction() as unknown as (
+        facetKey: string,
+        value: string,
+      ) => void,
+    });
+
+    expect(
+      screen.queryByRole("button", { name: "Filter by Message" }),
+    ).toBeNull();
+    expect(
+      screen.queryByRole("button", { name: "Filter by Event UID" }),
+    ).toBeNull();
+  });
+
+  test("an attribute filters under its own attributes.<key> chip", () => {
+    const onFilterBy: MockFunction = getJestMockFunction();
+
+    renderPanel(FULL_EVENT, {
+      onFilterBy: onFilterBy as unknown as (
+        facetKey: string,
+        value: string,
+      ) => void,
+    });
+
+    fireEvent.click(tab("Attributes"));
+    fireEvent.click(filterButton("threat.matched"));
+
+    expect(onFilterBy).toHaveBeenCalledWith(
+      `${SECURITY_EVENT_ATTRIBUTE_FACET_PREFIX}threat.matched`,
+      "true",
+    );
+  });
+
+  test("a page that cannot filter gets no filter actions at all", () => {
+    renderPanel();
+
+    expect(screen.queryByRole("button", { name: /^Filter by/ })).toBeNull();
+  });
+});
+
+describe("Attributes", () => {
+  test("lists every source attribute, sorted, with its value", () => {
+    renderPanel();
+
+    fireEvent.click(tab("Attributes"));
+
+    const terms: Array<string> = Array.from(panel().querySelectorAll("dt")).map(
+      (node: Element): string => {
+        return node.textContent || "";
+      },
+    );
+
+    expect(terms).toEqual(["device.hostname", "threat.matched"]);
+    expect(panel()).toHaveTextContent("web-01");
+    expect(panel()).toHaveTextContent("true");
+  });
+
+  test("an event with none says so", () => {
+    renderPanel(event({ message: "bare" }));
+
+    fireEvent.click(tab("Attributes"));
+
+    expect(panel()).toHaveTextContent("No attributes recorded for this event.");
+  });
+});
+
+describe("JSON", () => {
+  test("prints the record, including what the source left empty", () => {
+    renderPanel();
+
+    fireEvent.click(tab("JSON"));
+
+    const json: Record<string, unknown> = JSON.parse(
+      screen.getByTestId("security-event-detail-json").textContent || "{}",
+    );
+
+    expect(json["message"]).toBe("Failed logon for alice");
+    expect(json["severityName"]).toBe(OcsfSeverity.Critical);
+    expect(json["targetHost"]).toBe("");
+    expect(json["attributes"]).toEqual({
+      "threat.matched": "true",
+      "device.hostname": "web-01",
+    });
+  });
+
+  /*
+   * An analytics model carries its whole table definition on the object;
+   * serializing that would bury twenty facts about the event under a few
+   * hundred about the table.
+   */
+  test("describes the event, not the table", () => {
+    renderPanel();
+
+    fireEvent.click(tab("JSON"));
+
+    const text: string =
+      screen.getByTestId("security-event-detail-json").textContent || "";
+
+    expect(text).not.toContain("tableColumns");
+    expect(text).not.toContain("accessControl");
+  });
+});
+
+describe("correlating an observable", () => {
+  test("deep-links to the Correlate tab seeded with the observable", () => {
+    const navigate: MockFunction = getJestMockFunction();
+    jest
+      .spyOn(Navigation, "navigate")
+      .mockImplementation(navigate as unknown as typeof Navigation.navigate);
+
+    renderPanel();
+
+    fireEvent.click(
+      screen.getByTestId("security-event-panel-observable-chip-1"),
+    );
+
+    expect(navigate).toHaveBeenCalledTimes(1);
+    const route: string = String((navigate.mock.calls[0] as Array<unknown>)[0]);
+
+    expect(route).toContain("/security-events/correlate");
+    expect(route).toContain(`observable=${encodeURIComponent("10.0.0.4")}`);
+  });
+
+  test("a host that already shows a graph pivots in place instead", () => {
+    const onCorrelateObservable: MockFunction = getJestMockFunction();
+    const navigate: MockFunction = getJestMockFunction();
+    jest
+      .spyOn(Navigation, "navigate")
+      .mockImplementation(navigate as unknown as typeof Navigation.navigate);
+
+    renderPanel(FULL_EVENT, {
+      onCorrelateObservable: onCorrelateObservable as unknown as (
+        observable: string,
+      ) => void,
+    });
+
+    fireEvent.click(
+      screen.getByTestId("security-event-panel-observable-chip-0"),
+    );
+
+    expect(onCorrelateObservable).toHaveBeenCalledWith("alice");
+    expect(navigate).not.toHaveBeenCalled();
+  });
+});
+
+describe("the drawer is a modal", () => {
+  test("Escape closes it", () => {
+    const onClose: MockFunction = getJestMockFunction();
+
+    renderPanel(FULL_EVENT, { onClose: onClose as unknown as () => void });
+
+    fireEvent.keyDown(document, { key: "Escape" });
+
+    expect(onClose).toHaveBeenCalledTimes(1);
+  });
+
+  test("its tabs are a real tablist", () => {
+    renderPanel();
+
+    const tablist: HTMLElement = screen.getByRole("tablist");
+
+    expect(within(tablist).getAllByRole("tab")).toHaveLength(3);
+  });
+});

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");
+  });
+});