@oneuptime/common 13.0.3 → 13.0.5

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

@@ -0,0 +1,285 @@
+import { afterEach, 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 getJestMockFunction, { MockFunction } from "../../MockType";
+
+/*
+ * End to end through the real Feed and FeedItem: an AI investigation in the
+ * incident or alert feed shows only the compact summary and root cause, and
+ * "More Information" opens the whole report. Both renders stay in safeMode,
+ * because every word of the report is model-authored.
+ */
+
+const getListMock: MockFunction = getJestMockFunction();
+const markdownViewerMock: MockFunction = getJestMockFunction();
+
+jest.mock("../../../UI/Utils/ModelAPI/ModelAPI", () => {
+  return {
+    __esModule: true,
+    default: {
+      getList: (...args: Array<any>) => {
+        return getListMock(...args);
+      },
+    },
+  };
+});
+
+jest.mock("../../../UI/Components/Markdown.tsx/LazyMarkdownViewer", () => {
+  return {
+    __esModule: true,
+    default: (props: MarkdownViewerProps): React.ReactElement => {
+      markdownViewerMock(props);
+      return React.createElement(
+        "div",
+        { "data-testid": "markdown", "data-safe-mode": String(props.safeMode) },
+        props.text,
+      );
+    },
+  };
+});
+
+jest.mock("../../../UI/Components/Modal/ConfirmModal", () => {
+  return {
+    __esModule: true,
+    default: (props: ConfirmModalProps): React.ReactElement => {
+      return React.createElement("div", { role: "dialog" }, props.description);
+    },
+  };
+});
+
+import AlertFeedElement from "../../../../App/FeatureSet/Dashboard/src/Components/Alert/AlertFeed";
+import IncidentFeedElement from "../../../../App/FeatureSet/Dashboard/src/Components/Incident/IncidentFeed";
+import AlertFeed, {
+  AlertFeedEventType,
+} from "../../../Models/DatabaseModels/AlertFeed";
+import IncidentFeed, {
+  IncidentFeedEventType,
+} from "../../../Models/DatabaseModels/IncidentFeed";
+import ObjectID from "../../../Types/ObjectID";
+
+interface MarkdownViewerProps {
+  text: string;
+  safeMode?: boolean | undefined;
+}
+
+interface ConfirmModalProps {
+  description: React.ReactElement;
+}
+
+interface ListResult<T> {
+  data: Array<T>;
+  count: number;
+  skip: number;
+  limit: number;
+}
+
+const INCIDENT_ID: ObjectID = new ObjectID(
+  "d1d1d1d1-d1d1-4d1d-8d1d-d1d1d1d1d1d1",
+);
+const ALERT_ID: ObjectID = new ObjectID("d2d2d2d2-d2d2-4d2d-8d2d-d2d2d2d2d2d2");
+const AI_RUN_ID: ObjectID = new ObjectID(
+  "d3d3d3d3-d3d3-4d3d-8d3d-d3d3d3d3d3d3",
+);
+const POSTED_AT: Date = new Date("2026-09-14T18:04:00.000Z");
+
+const REPORT: string = [
+  "## 🧠 AI — Automated Root Cause Analysis",
+  "",
+  "**Summary** — checkout-api p95 passed 2s because its pool was cut to 10 [C2][C3].",
+  "",
+  "**Most likely root cause** — Release 2026.09.14-2 set `max=10` [C5], so requests queued for a connection [C6].",
+  "",
+  "**Evidence**",
+  "- Pool usage pinned at 10 [C6]",
+  "",
+  "**Suggested next steps**",
+  "1. Roll checkout-api back.",
+  "",
+  "**Evidence checked**",
+  "- **[C2]** P95(http.server.request.duration) — 80 row(s)",
+  "- **[C3]** Logs — 50 row(s)",
+  "",
+  "---",
+  "*Investigated automatically by OneUptime AI — read-only, 10 queries run across your own telemetry using claude-sonnet-4-5. This is an AI-generated first pass; verify before acting.*",
+].join("\n");
+
+const COMPACT_TEXT: string = [
+  "**OneUptime AI posted a root cause analysis**",
+  "checkout-api p95 passed 2s because its pool was cut to 10.",
+  "**Most likely root cause:** Release 2026.09.14-2 set `max=10`, so requests queued for a connection.",
+].join("\n\n");
+
+const ENGINEER_ROOT_CAUSE: string =
+  "## Root cause\n\nAn engineer found a configuration regression.";
+
+function listResult<T>(data: Array<T>): ListResult<T> {
+  return { data, count: data.length, skip: 0, limit: 100 };
+}
+
+function incidentItem(
+  id: string,
+  markdown: string,
+  aiRunId?: ObjectID,
+): IncidentFeed {
+  const item: IncidentFeed = new IncidentFeed();
+  item.id = new ObjectID(id);
+  item.incidentId = INCIDENT_ID;
+  item.incidentFeedEventType = IncidentFeedEventType.RootCause;
+  item.feedInfoInMarkdown = markdown;
+  item.postedAt = POSTED_AT;
+  item.createdAt = POSTED_AT;
+
+  if (aiRunId) {
+    item.aiRunId = aiRunId;
+  }
+
+  return item;
+}
+
+function alertItem(
+  id: string,
+  markdown: string,
+  aiRunId?: ObjectID,
+): AlertFeed {
+  const item: AlertFeed = new AlertFeed();
+  item.id = new ObjectID(id);
+  item.alertId = ALERT_ID;
+  item.alertFeedEventType = AlertFeedEventType.RootCause;
+  item.feedInfoInMarkdown = markdown;
+  item.postedAt = POSTED_AT;
+  item.createdAt = POSTED_AT;
+
+  if (aiRunId) {
+    item.aiRunId = aiRunId;
+  }
+
+  return item;
+}
+
+function viewerCallsWithText(text: string): Array<MarkdownViewerProps> {
+  return (markdownViewerMock.mock.calls as Array<Array<MarkdownViewerProps>>)
+    .map((call: Array<MarkdownViewerProps>): MarkdownViewerProps => {
+      return call[0]!;
+    })
+    .filter((props: MarkdownViewerProps): boolean => {
+      return props.text === text;
+    });
+}
+
+async function expectCompactItemWithFullReportBehindMoreInformation(): Promise<void> {
+  expect(
+    await screen.findByText(/OneUptime AI posted a root cause analysis/),
+  ).toBeVisible();
+
+  /* The feed body: compact, safe, and nothing of the full report yet. */
+  const compactCalls: Array<MarkdownViewerProps> =
+    viewerCallsWithText(COMPACT_TEXT);
+  expect(compactCalls.length).toBeGreaterThan(0);
+  compactCalls.forEach((props: MarkdownViewerProps): void => {
+    expect(props.safeMode).toBe(true);
+  });
+  expect(viewerCallsWithText(REPORT)).toHaveLength(0);
+  expect(screen.queryByText(/Evidence checked/)).toBeNull();
+  expect(screen.queryByText(/\[C\d+\]/)).toBeNull();
+  expect(screen.queryByRole("dialog")).toBeNull();
+
+  fireEvent.click(screen.getByRole("button", { name: "More Information" }));
+
+  /* More Information: the whole report, still safe. */
+  const dialog: HTMLElement = screen.getByRole("dialog");
+  expect(dialog).toBeVisible();
+  const reportCalls: Array<MarkdownViewerProps> = viewerCallsWithText(REPORT);
+  expect(reportCalls.length).toBeGreaterThan(0);
+  reportCalls.forEach((props: MarkdownViewerProps): void => {
+    expect(props.safeMode).toBe(true);
+  });
+  const reportViewer: HTMLElement = within(dialog).getByTestId("markdown");
+  expect(reportViewer.textContent).toBe(REPORT);
+  expect(reportViewer).toHaveAttribute("data-safe-mode", "true");
+}
+
+afterEach(() => {
+  cleanup();
+  getListMock.mockReset();
+  markdownViewerMock.mockReset();
+});
+
+describe("AI root-cause feed items through the real feed", () => {
+  test("incident feed: compact AI item, full report in More Information, both in safe mode", async () => {
+    getListMock.mockResolvedValueOnce(
+      listResult<IncidentFeed>([
+        incidentItem("d4d4d4d4-d4d4-4d4d-8d4d-d4d4d4d4d4d4", REPORT, AI_RUN_ID),
+      ]) as never,
+    );
+
+    render(<IncidentFeedElement incidentId={INCIDENT_ID} refreshToken={0} />);
+
+    await expectCompactItemWithFullReportBehindMoreInformation();
+  });
+
+  test("alert feed: compact AI item, full report in More Information, both in safe mode", async () => {
+    getListMock.mockResolvedValueOnce(
+      listResult<AlertFeed>([
+        alertItem("d5d5d5d5-d5d5-4d5d-8d5d-d5d5d5d5d5d5", REPORT, AI_RUN_ID),
+      ]) as never,
+    );
+
+    render(<AlertFeedElement alertId={ALERT_ID} refreshToken={0} />);
+
+    await expectCompactItemWithFullReportBehindMoreInformation();
+  });
+
+  test("an engineer's root cause keeps its text, its normal markdown and no More Information", async () => {
+    getListMock.mockResolvedValueOnce(
+      listResult<IncidentFeed>([
+        incidentItem(
+          "d6d6d6d6-d6d6-4d6d-8d6d-d6d6d6d6d6d6",
+          ENGINEER_ROOT_CAUSE,
+        ),
+      ]) as never,
+    );
+
+    const incidentView: ReturnType<typeof render> = render(
+      <IncidentFeedElement incidentId={INCIDENT_ID} refreshToken={0} />,
+    );
+
+    expect(await screen.findByText(/configuration regression/)).toBeVisible();
+    viewerCallsWithText(ENGINEER_ROOT_CAUSE).forEach(
+      (props: MarkdownViewerProps): void => {
+        expect(props.safeMode).toBe(false);
+      },
+    );
+    expect(viewerCallsWithText(ENGINEER_ROOT_CAUSE).length).toBeGreaterThan(0);
+    expect(
+      screen.queryByRole("button", { name: "More Information" }),
+    ).toBeNull();
+
+    incidentView.unmount();
+    markdownViewerMock.mockReset();
+    getListMock.mockResolvedValueOnce(
+      listResult<AlertFeed>([
+        alertItem("d7d7d7d7-d7d7-4d7d-8d7d-d7d7d7d7d7d7", ENGINEER_ROOT_CAUSE),
+      ]) as never,
+    );
+
+    render(<AlertFeedElement alertId={ALERT_ID} refreshToken={0} />);
+
+    expect(await screen.findByText(/configuration regression/)).toBeVisible();
+    expect(viewerCallsWithText(ENGINEER_ROOT_CAUSE).length).toBeGreaterThan(0);
+    viewerCallsWithText(ENGINEER_ROOT_CAUSE).forEach(
+      (props: MarkdownViewerProps): void => {
+        expect(props.safeMode).toBe(false);
+      },
+    );
+    expect(
+      screen.queryByRole("button", { name: "More Information" }),
+    ).toBeNull();
+  });
+});

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

@@ -0,0 +1,242 @@
+import { afterEach, describe, expect, jest, test } from "@jest/globals";
+import "@testing-library/jest-dom";
+import { cleanup, render, screen, within } from "@testing-library/react";
+import React, { ReactElement, ReactNode } from "react";
+
+/*
+ * AffectedResourcesDisplay groups an event's resources into category cards.
+ * Its grid used to follow the viewport alone (two columns from md up), so on
+ * an overview page's ~300px sidebar two cards shared the width and every name
+ * was clipped mid-word ("Checkout A"). Callers in a narrow column now ask for
+ * one column, and a long name ends in an ellipsis with the full name on hover.
+ */
+
+jest.mock(
+  "../../../../App/FeatureSet/Dashboard/src/Components/AppLink/AppLink",
+  () => {
+    return {
+      __esModule: true,
+      default: (props: {
+        to?: { toString: () => string };
+        children: ReactNode;
+        className?: string;
+      }): ReactElement => {
+        return React.createElement(
+          "a",
+          { href: props.to?.toString(), className: props.className },
+          props.children,
+        );
+      },
+    };
+  },
+);
+
+import AffectedResourcesDisplay, {
+  getAffectedResourcesGridClassName,
+} from "../../../../App/FeatureSet/Dashboard/src/Components/AffectedResources/AffectedResourcesDisplay";
+import Monitor from "../../../Models/DatabaseModels/Monitor";
+import Service from "../../../Models/DatabaseModels/Service";
+import Host from "../../../Models/DatabaseModels/Host";
+import Color from "../../../Types/Color";
+
+const LONG_MONITOR_NAME: string =
+  "Checkout API p95 latency above two seconds in eu-west-1";
+
+type BuildMonitorFunction = (id: string, name: string) => Monitor;
+
+const buildMonitor: BuildMonitorFunction = (
+  id: string,
+  name: string,
+): Monitor => {
+  const monitor: Monitor = new Monitor();
+  monitor._id = id;
+  monitor.name = name;
+  return monitor;
+};
+
+type BuildServiceFunction = (id: string, name: string) => Service;
+
+const buildService: BuildServiceFunction = (
+  id: string,
+  name: string,
+): Service => {
+  const service: Service = new Service();
+  service._id = id;
+  service.name = name;
+  service.serviceColor = new Color("#6366f1");
+  return service;
+};
+
+const MONITORS: Array<Monitor> = [
+  buildMonitor("aaaaaaaa-aaaa-4aaa-8aaa-aaaaaaaaaaa1", LONG_MONITOR_NAME),
+  buildMonitor("aaaaaaaa-aaaa-4aaa-8aaa-aaaaaaaaaaa2", "orders-db primary"),
+];
+
+const SERVICES: Array<Service> = [
+  buildService("bbbbbbbb-bbbb-4bbb-8bbb-bbbbbbbbbbb1", "checkout-api"),
+];
+
+afterEach(() => {
+  cleanup();
+});
+
+describe("getAffectedResourcesGridClassName", () => {
+  test("follows the viewport by default: one column, two from md up", () => {
+    expect(getAffectedResourcesGridClassName(undefined)).toBe(
+      "grid grid-cols-1 gap-3 md:grid-cols-2",
+    );
+  });
+
+  test("two columns is the same viewport-based grid", () => {
+    expect(getAffectedResourcesGridClassName(2)).toBe(
+      "grid grid-cols-1 gap-3 md:grid-cols-2",
+    );
+  });
+
+  test("one column never splits, whatever the viewport", () => {
+    const className: string = getAffectedResourcesGridClassName(1);
+
+    expect(className).toBe("grid grid-cols-1 gap-3");
+    expect(className).not.toContain("md:grid-cols-2");
+  });
+});
+
+describe("AffectedResourcesDisplay columns", () => {
+  test("renders today's two-column grid when columns is left out", () => {
+    render(
+      <AffectedResourcesDisplay monitors={MONITORS} services={SERVICES} />,
+    );
+
+    const grid: HTMLElement = screen.getByTestId("affected-resources-grid");
+
+    expect(grid).toHaveClass("grid", "grid-cols-1", "gap-3", "md:grid-cols-2");
+    expect(grid.children).toHaveLength(2);
+  });
+
+  test("renders one column for a narrow sidebar", () => {
+    render(
+      <AffectedResourcesDisplay
+        monitors={MONITORS}
+        services={SERVICES}
+        columns={1}
+      />,
+    );
+
+    const grid: HTMLElement = screen.getByTestId("affected-resources-grid");
+
+    expect(grid).toHaveClass("grid", "grid-cols-1", "gap-3");
+    expect(grid).not.toHaveClass("md:grid-cols-2");
+    // Both categories still render, one under the other.
+    expect(within(grid).getByText("Monitors")).toBeInTheDocument();
+    expect(within(grid).getByText("Services")).toBeInTheDocument();
+  });
+
+  test("keeps the summary counts in either layout", () => {
+    const { rerender } = render(
+      <AffectedResourcesDisplay monitors={MONITORS} services={SERVICES} />,
+    );
+
+    expect(screen.getByText("3 resources")).toBeInTheDocument();
+    expect(screen.getByText("across 2 categories")).toBeInTheDocument();
+    expect(screen.getByText("·")).toBeInTheDocument();
+
+    rerender(
+      <AffectedResourcesDisplay
+        monitors={MONITORS}
+        services={SERVICES}
+        columns={1}
+      />,
+    );
+
+    expect(screen.getByText("3 resources")).toBeInTheDocument();
+    expect(screen.getByText("across 2 categories")).toBeInTheDocument();
+    // The separator would dangle at the end of a wrapped first line.
+    expect(screen.queryByText("·")).toBeNull();
+  });
+
+  test("the empty state does not depend on columns", () => {
+    render(
+      <AffectedResourcesDisplay columns={1} emptyMessage="Nothing hit." />,
+    );
+
+    expect(screen.getByText("Nothing hit.")).toBeInTheDocument();
+    expect(screen.queryByTestId("affected-resources-grid")).toBeNull();
+  });
+});
+
+describe("AffectedResourcesDisplay item names", () => {
+  test("every item carries its full name as a title", () => {
+    render(
+      <AffectedResourcesDisplay
+        monitors={MONITORS}
+        services={SERVICES}
+        columns={1}
+      />,
+    );
+
+    const items: Array<HTMLElement> = screen.getAllByTestId(
+      "affected-resource-item",
+    );
+
+    expect(
+      items.map((item: HTMLElement) => {
+        return item.getAttribute("title");
+      }),
+    ).toEqual([LONG_MONITOR_NAME, "orders-db primary", "checkout-api"]);
+  });
+
+  test("the item wrapper truncates, and turns the elements' flex name spans into truncating blocks", () => {
+    render(<AffectedResourcesDisplay monitors={MONITORS} columns={1} />);
+
+    const item: HTMLElement = screen.getByTitle(LONG_MONITOR_NAME);
+
+    expect(item).toHaveClass(
+      "min-w-0",
+      "flex-1",
+      "truncate",
+      "[&_span.flex]:block",
+      "[&_span.flex]:truncate",
+    );
+
+    // The monitor element really does wrap its name in a flex span.
+    const link: HTMLElement = within(item).getByRole("link");
+    const nameSpan: Element | null = link.querySelector("span.flex");
+
+    expect(nameSpan).not.toBeNull();
+    expect(nameSpan).toHaveTextContent(LONG_MONITOR_NAME);
+    expect(link).toHaveAttribute(
+      "href",
+      expect.stringContaining("aaaaaaaa-aaaa-4aaa-8aaa-aaaaaaaaaaa1"),
+    );
+  });
+
+  test("a service name truncates beside its colour swatch", () => {
+    render(<AffectedResourcesDisplay services={SERVICES} columns={1} />);
+
+    const name: HTMLElement = screen.getByText("checkout-api");
+
+    expect(name).toHaveClass("min-w-0", "truncate");
+    expect(screen.getByTitle("checkout-api")).toContainElement(name);
+  });
+
+  test("a resource with no name gets no empty title", () => {
+    const hosts: Array<Host> = [new Host()];
+
+    render(<AffectedResourcesDisplay hosts={hosts} columns={1} />);
+
+    expect(screen.getByTestId("affected-resource-item")).not.toHaveAttribute(
+      "title",
+    );
+  });
+
+  test("the category label and count cannot push each other out of the card", () => {
+    render(<AffectedResourcesDisplay monitors={MONITORS} columns={1} />);
+
+    const label: HTMLElement = screen.getByText("Monitors");
+    const count: HTMLElement = screen.getByText("2");
+
+    expect(label).toHaveClass("truncate");
+    expect(label.parentElement).toHaveClass("min-w-0");
+    expect(count).toHaveClass("flex-shrink-0");
+  });
+});