@oneuptime/common 12.0.18 → 12.0.20

package/Tests/UI/Components/Charts/ChartTooltipSorted.test.tsx

@@ -0,0 +1,129 @@
+import "@testing-library/jest-dom";
+import { afterEach, describe, expect, test } from "@jest/globals";
+import { cleanup, render, screen } from "@testing-library/react";
+import * as React from "react";
+import { ChartTooltip as AreaChartTooltip } from "../../../../UI/Components/Charts/ChartLibrary/AreaChart/AreaChart";
+import { ChartTooltip as BarChartTooltip } from "../../../../UI/Components/Charts/ChartLibrary/BarChart/BarChart";
+import { ChartTooltip as LineChartTooltip } from "../../../../UI/Components/Charts/ChartLibrary/LineChart/LineChart";
+
+/*
+ * The rendered tooltip is where "which host is this spike?" gets answered:
+ * with a 20-series group-by chart the entries must arrive highest-value
+ * first (recharts hands them over in series-mount order, effectively
+ * alphabetical) and the tail past the cap must be summarized, not
+ * silently dropped. All three chart types ship their own ChartTooltip, so
+ * all three are pinned to the same contract here.
+ */
+
+type TooltipComponent =
+  | typeof AreaChartTooltip
+  | typeof LineChartTooltip
+  | typeof BarChartTooltip;
+
+interface TooltipCase {
+  name: string;
+  Tooltip: TooltipComponent;
+}
+
+const TOOLTIP_CASES: Array<TooltipCase> = [
+  { name: "AreaChart", Tooltip: AreaChartTooltip },
+  { name: "LineChart", Tooltip: LineChartTooltip },
+  { name: "BarChart", Tooltip: BarChartTooltip },
+];
+
+function buildPayload(count: number): Array<{
+  category: string;
+  value: number;
+  index: string;
+  color: string;
+  payload: Record<string, unknown>;
+}> {
+  return Array.from({ length: count }, (_: unknown, index: number) => {
+    return {
+      /*
+       * Alphabetical categories with ASCENDING values — exactly the shape
+       * where mount order (host-00 first) and value order (host-NN first)
+       * disagree, so a pass proves the sort actually ran.
+       */
+      category: `host-${String(index).padStart(2, "0")}`,
+      value: index,
+      index: "10:00",
+      color: "blue",
+      payload: {},
+    };
+  });
+}
+
+afterEach(() => {
+  cleanup();
+});
+
+describe.each(TOOLTIP_CASES)("$name tooltip", ({ Tooltip }: TooltipCase) => {
+  test("renders entries highest-value first with an overflow summary", () => {
+    const { container } = render(
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      <Tooltip
+        active={true}
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        payload={buildPayload(14) as any}
+        label="10:00"
+        valueFormatter={(value: number): string => {
+          return `${value}%`;
+        }}
+      />,
+    );
+
+    const text: string = container.textContent || "";
+
+    // The top-valued series leads; the lowest-valued ones are elided.
+    expect(text.indexOf("host-13")).toBeGreaterThan(-1);
+    expect(text.indexOf("host-13")).toBeLessThan(text.indexOf("host-12"));
+    expect(text.indexOf("host-12")).toBeLessThan(text.indexOf("host-04"));
+    expect(text).not.toContain("host-03");
+    expect(text).not.toContain("host-00");
+
+    // 14 series, 10 shown → 4 summarized.
+    expect(
+      screen.getByText(/\+4 more series — highest values shown/),
+    ).toBeInTheDocument();
+
+    // Values run through the caller's formatter.
+    expect(text).toContain("13%");
+  });
+
+  test("shows no overflow line when everything fits", () => {
+    const { container } = render(
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      <Tooltip
+        active={true}
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        payload={buildPayload(3) as any}
+        label="10:00"
+        valueFormatter={(value: number): string => {
+          return String(value);
+        }}
+      />,
+    );
+
+    expect(container.textContent).not.toContain("more series");
+    expect(container.textContent).toContain("host-02");
+    expect(container.textContent).toContain("host-00");
+  });
+
+  test("renders nothing when inactive", () => {
+    const { container } = render(
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      <Tooltip
+        active={false}
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        payload={buildPayload(3) as any}
+        label="10:00"
+        valueFormatter={(value: number): string => {
+          return String(value);
+        }}
+      />,
+    );
+
+    expect(container.firstChild).toBeNull();
+  });
+});

package/Tests/UI/Components/Charts/TooltipEntries.test.ts

@@ -0,0 +1,155 @@
+import { describe, expect, test } from "@jest/globals";
+import {
+  DEFAULT_TOOLTIP_MAX_ENTRIES,
+  PreparedTooltipEntries,
+  SortableTooltipItem,
+  prepareTooltipEntries,
+} from "../../../../UI/Components/Charts/ChartLibrary/Utils/TooltipEntries";
+
+/*
+ * The tooltip ordering contract: on a grouped chart the series that is
+ * spiking AT THE HOVERED TIMESTAMP must be the first tooltip line, the
+ * list must stay readable at high cardinality (cap + "+N more"), and
+ * non-data entries (hidden series, band fills) must never displace a real
+ * reading. The chips already rank by peak; the tooltip is the only place
+ * the user reads per-timestamp values, so its order is what answers
+ * "which host is this spike?".
+ */
+
+interface TestItem extends SortableTooltipItem {
+  color?: string;
+}
+
+function item(category: string, value: number, type?: string): TestItem {
+  return { category, value, ...(type ? { type } : {}) };
+}
+
+function categories(prepared: PreparedTooltipEntries<TestItem>): Array<string> {
+  return prepared.entries.map((entry: TestItem) => {
+    return entry.category;
+  });
+}
+
+describe("prepareTooltipEntries", () => {
+  test("orders entries by value at the hovered point, highest first", () => {
+    const prepared: PreparedTooltipEntries<TestItem> = prepareTooltipEntries([
+      item("host-b", 10),
+      item("host-a", 90),
+      item("host-c", 40),
+    ]);
+
+    expect(categories(prepared)).toEqual(["host-a", "host-c", "host-b"]);
+    expect(prepared.overflowCount).toBe(0);
+    expect(prepared.totalCount).toBe(3);
+  });
+
+  test("breaks value ties by natural name order (cpu2 before cpu10)", () => {
+    const prepared: PreparedTooltipEntries<TestItem> = prepareTooltipEntries([
+      item("cpu10", 5),
+      item("cpu2", 5),
+      item("cpu1", 5),
+    ]);
+
+    expect(categories(prepared)).toEqual(["cpu1", "cpu2", "cpu10"]);
+  });
+
+  test("sorts non-finite values last without dropping them", () => {
+    const prepared: PreparedTooltipEntries<TestItem> = prepareTooltipEntries([
+      item("nan-series", NaN),
+      item("real-low", 1),
+      item("infinite", Infinity),
+      item("real-high", 7),
+      // The anomaly band's dataKey yields a [low, high] tuple at runtime.
+      item("band", [2, 9] as unknown as number),
+    ]);
+
+    expect(categories(prepared).slice(0, 2)).toEqual(["real-high", "real-low"]);
+    // Non-finite tail keeps natural name order among itself.
+    expect(categories(prepared).slice(2)).toEqual([
+      "band",
+      "infinite",
+      "nan-series",
+    ]);
+    expect(prepared.totalCount).toBe(5);
+  });
+
+  test('filters out type "none" entries (hidden click-target lines, band fills)', () => {
+    const prepared: PreparedTooltipEntries<TestItem> = prepareTooltipEntries([
+      item("visible", 3),
+      item("hidden", 99, "none"),
+    ]);
+
+    expect(categories(prepared)).toEqual(["visible"]);
+    expect(prepared.totalCount).toBe(1);
+    expect(prepared.overflowCount).toBe(0);
+  });
+
+  test("caps at the default and reports the overflow", () => {
+    const payload: Array<TestItem> = Array.from(
+      { length: 25 },
+      (_: unknown, index: number) => {
+        return item(`series-${index}`, index);
+      },
+    );
+
+    const prepared: PreparedTooltipEntries<TestItem> =
+      prepareTooltipEntries(payload);
+
+    expect(prepared.entries).toHaveLength(DEFAULT_TOOLTIP_MAX_ENTRIES);
+    expect(prepared.overflowCount).toBe(25 - DEFAULT_TOOLTIP_MAX_ENTRIES);
+    expect(prepared.totalCount).toBe(25);
+    // The cap keeps the HIGHEST values, not the first-mounted series.
+    expect(categories(prepared)[0]).toBe("series-24");
+    expect(categories(prepared)[DEFAULT_TOOLTIP_MAX_ENTRIES - 1]).toBe(
+      `series-${25 - DEFAULT_TOOLTIP_MAX_ENTRIES}`,
+    );
+  });
+
+  test("exactly at the cap means no overflow", () => {
+    const payload: Array<TestItem> = Array.from(
+      { length: DEFAULT_TOOLTIP_MAX_ENTRIES },
+      (_: unknown, index: number) => {
+        return item(`series-${index}`, index);
+      },
+    );
+
+    const prepared: PreparedTooltipEntries<TestItem> =
+      prepareTooltipEntries(payload);
+
+    expect(prepared.entries).toHaveLength(DEFAULT_TOOLTIP_MAX_ENTRIES);
+    expect(prepared.overflowCount).toBe(0);
+  });
+
+  test("honors a custom cap and rejects nonsense caps", () => {
+    const payload: Array<TestItem> = [item("a", 1), item("b", 2), item("c", 3)];
+
+    expect(prepareTooltipEntries(payload, 2).entries).toHaveLength(2);
+    expect(prepareTooltipEntries(payload, 2).overflowCount).toBe(1);
+
+    // Zero, negative, and fractional caps fall back to the default.
+    expect(prepareTooltipEntries(payload, 0).entries).toHaveLength(3);
+    expect(prepareTooltipEntries(payload, -5).entries).toHaveLength(3);
+    expect(prepareTooltipEntries(payload, 1.5).entries).toHaveLength(3);
+  });
+
+  test("tolerates empty, null, and undefined payloads", () => {
+    for (const payload of [[], null, undefined]) {
+      const prepared: PreparedTooltipEntries<TestItem> = prepareTooltipEntries(
+        payload as Array<TestItem>,
+      );
+      expect(prepared.entries).toEqual([]);
+      expect(prepared.overflowCount).toBe(0);
+      expect(prepared.totalCount).toBe(0);
+    }
+  });
+
+  test("does not mutate the input payload", () => {
+    const payload: Array<TestItem> = [item("low", 1), item("high", 2)];
+    prepareTooltipEntries(payload);
+    expect(
+      payload.map((entry: TestItem) => {
+        return entry.category;
+      }),
+    ).toEqual(["low", "high"]);
+  });
+});

package/Tests/UI/Components/Detail/DetailFieldErrors.test.tsx

@@ -0,0 +1,347 @@
+import "@testing-library/jest-dom";
+import {
+  afterEach,
+  beforeEach,
+  describe,
+  expect,
+  jest,
+  test,
+} from "@jest/globals";
+import { cleanup, render } from "@testing-library/react";
+import React, { ReactElement } from "react";
+import getJestMockFunction, { MockFunction } from "../../../MockType";
+
+const loggerErrorMock: MockFunction = getJestMockFunction();
+
+/*
+ * The arrow wrapper is load bearing: jest.mock is hoisted above the compiled
+ * requires, so loggerErrorMock is still unassigned when the factory runs.
+ * Dereferencing it lazily, at call time, is what makes this work.
+ */
+jest.mock("../../../../UI/Utils/Logger", () => {
+  return {
+    __esModule: true,
+    Logger: {
+      error: (...args: Array<any>) => {
+        return loggerErrorMock(...args);
+      },
+      warn: () => {
+        return undefined;
+      },
+      log: () => {
+        return undefined;
+      },
+      info: () => {
+        return undefined;
+      },
+    },
+  };
+});
+
+import Detail from "../../../../UI/Components/Detail/Detail";
+import Field from "../../../../UI/Components/Detail/Field";
+import FieldType from "../../../../UI/Components/Types/FieldType";
+import IncidentSeverity from "../../../../Models/DatabaseModels/IncidentSeverity";
+import BadDataException from "../../../../Types/Exception/BadDataException";
+import Color from "../../../../Types/Color";
+import ObjectID from "../../../../Types/ObjectID";
+
+/*
+ * Detail's getField is a plain closure called from Detail's own render, so a
+ * throw out of a field's getElement used to unwind the entire route up to the
+ * app level ErrorBoundary - replacing the whole page with "Something went
+ * wrong" over one bad cell. That is issue #3374: an Incident Episode with no
+ * severity threw "Episode Severity not found" from the severity renderer and
+ * took the detail page with it.
+ *
+ * The two call sites in that issue are fixed at source, but the same shape
+ * exists in ~20 other getElement callbacks across the dashboard. These tests
+ * pin the framework level guard: a throwing field renderer degrades to
+ * whatever the field type already rendered, logs the misconfiguration, and
+ * costs exactly one field - never the page.
+ */
+
+interface DetailItem {
+  incidentSeverity?: IncidentSeverity | undefined;
+  title?: string | undefined;
+  description?: string | undefined;
+}
+
+type RenderDetailFunction = (
+  item: DetailItem,
+  fields: Array<Field<DetailItem>>,
+) => HTMLElement;
+
+const renderDetail: RenderDetailFunction = (
+  item: DetailItem,
+  fields: Array<Field<DetailItem>>,
+): HTMLElement => {
+  const { container } = render(
+    <Detail<DetailItem>
+      item={item}
+      fields={fields}
+      showDetailsInNumberOfColumns={1}
+    />,
+  );
+
+  return container;
+};
+
+type BuildSeverityFunction = (name: string, color?: Color) => IncidentSeverity;
+
+const buildSeverity: BuildSeverityFunction = (
+  name: string,
+  color?: Color,
+): IncidentSeverity => {
+  const severity: IncidentSeverity = new IncidentSeverity();
+  severity._id = new ObjectID("severity-id").toString();
+  severity.name = name;
+
+  if (color) {
+    severity.color = color;
+  }
+
+  return severity;
+};
+
+type ThrowingFieldFunction = (
+  key: keyof DetailItem,
+  title: string,
+  error: unknown,
+) => Field<DetailItem>;
+
+const throwingField: ThrowingFieldFunction = (
+  key: keyof DetailItem,
+  title: string,
+  error: unknown,
+): Field<DetailItem> => {
+  return {
+    key: key,
+    title: title,
+    fieldType: FieldType.Element,
+    getElement: (): ReactElement => {
+      throw error;
+    },
+  };
+};
+
+const badgeSelector: string = '[data-dropdown-value-badge="true"]';
+
+beforeEach(() => {
+  loggerErrorMock.mockClear();
+});
+
+afterEach(() => {
+  cleanup();
+});
+
+describe("Detail: a throwing field renderer never takes down the page", () => {
+  test("does not rethrow out of render when getElement throws", () => {
+    expect(() => {
+      renderDetail({ title: "Episode one" }, [
+        throwingField("title", "Episode Title", new Error("boom")),
+      ]);
+    }).not.toThrow();
+  });
+
+  test("renders the surrounding grid, so the route survives", () => {
+    const container: HTMLElement = renderDetail({ title: "Episode one" }, [
+      throwingField("title", "Episode Title", new Error("boom")),
+    ]);
+
+    // The label is still rendered - the row exists, only its value is missing.
+    expect(container.textContent).toContain("Episode Title");
+  });
+
+  test("costs exactly one field - the siblings still render their values", () => {
+    const container: HTMLElement = renderDetail(
+      { title: "Episode one", description: "A long running episode" },
+      [
+        throwingField("title", "Episode Title", new Error("boom")),
+        {
+          key: "description",
+          title: "Description",
+          fieldType: FieldType.Text,
+        },
+      ],
+    );
+
+    expect(container.textContent).toContain("Description");
+    expect(container.textContent).toContain("A long running episode");
+  });
+
+  test("logs the misconfiguration once, naming the field and the message", () => {
+    renderDetail({ title: "Episode one" }, [
+      throwingField(
+        "title",
+        "Episode Title",
+        new BadDataException("Episode Severity not found"),
+      ),
+    ]);
+
+    expect(loggerErrorMock).toHaveBeenCalledTimes(1);
+
+    const logged: string = String(loggerErrorMock.mock.calls[0]?.[0]);
+
+    expect(logged).toContain("title");
+    expect(logged).toContain("Episode Severity not found");
+  });
+
+  test("logs once per throwing field when several fields throw", () => {
+    const container: HTMLElement = renderDetail(
+      { title: "Episode one", description: "A long running episode" },
+      [
+        throwingField("title", "Episode Title", new Error("first")),
+        throwingField("description", "Description", new Error("second")),
+      ],
+    );
+
+    expect(loggerErrorMock).toHaveBeenCalledTimes(2);
+    expect(container.textContent).toContain("Episode Title");
+    expect(container.textContent).toContain("Description");
+  });
+
+  test("catches a thrown non Error value and still logs it", () => {
+    expect(() => {
+      renderDetail({ title: "Episode one" }, [
+        throwingField("title", "Episode Title", "a bare string"),
+      ]);
+    }).not.toThrow();
+
+    expect(loggerErrorMock).toHaveBeenCalledTimes(1);
+    expect(String(loggerErrorMock.mock.calls[0]?.[0])).toContain(
+      "a bare string",
+    );
+  });
+
+  test("keeps the entity badge the field type already rendered", () => {
+    /*
+     * data is computed from the field key and transformed by the Entity
+     * branch before getElement runs, so swallowing the throw leaves the
+     * framework's own rendering of the relation in place.
+     */
+    const container: HTMLElement = renderDetail(
+      { incidentSeverity: buildSeverity("Critical", new Color("#ef4444")) },
+      [
+        {
+          key: "incidentSeverity",
+          title: "Episode Severity",
+          fieldType: FieldType.Entity,
+          getElement: (): ReactElement => {
+            throw new BadDataException("Episode Severity not found");
+          },
+        },
+      ],
+    );
+
+    const badge: HTMLElement | null =
+      container.querySelector<HTMLElement>(badgeSelector);
+
+    expect(badge).not.toBeNull();
+    expect(badge?.textContent).toContain("Critical");
+  });
+
+  test("falls back to the field placeholder when the relation is absent", () => {
+    const container: HTMLElement = renderDetail({}, [
+      {
+        key: "incidentSeverity",
+        title: "Episode Severity",
+        fieldType: FieldType.Entity,
+        placeholder: "No severity",
+        getElement: (): ReactElement => {
+          throw new BadDataException("Episode Severity not found");
+        },
+      },
+    ]);
+
+    expect(container.textContent).toContain("No severity");
+    expect(container.querySelector(badgeSelector)).toBeNull();
+  });
+
+  test("never shows the app level error boundary copy", () => {
+    const container: HTMLElement = renderDetail({ title: "Episode one" }, [
+      throwingField("title", "Episode Title", new Error("boom")),
+    ]);
+
+    expect(container.textContent).not.toContain("Something went wrong");
+    expect(container.textContent).not.toContain(
+      "An unexpected error has occurred",
+    );
+  });
+});
+
+describe("Detail: fields that do not throw are untouched by the guard", () => {
+  test("renders the element a healthy getElement returns", () => {
+    const container: HTMLElement = renderDetail({ title: "Episode one" }, [
+      {
+        key: "title",
+        title: "Episode Title",
+        fieldType: FieldType.Element,
+        getElement: (item: DetailItem): ReactElement => {
+          return <span data-testid="custom">{item.title}</span>;
+        },
+      },
+    ]);
+
+    expect(
+      container.querySelector<HTMLElement>('[data-testid="custom"]')
+        ?.textContent,
+    ).toEqual("Episode one");
+  });
+
+  test("does not log anything when no field throws", () => {
+    renderDetail({ title: "Episode one" }, [
+      {
+        key: "title",
+        title: "Episode Title",
+        fieldType: FieldType.Text,
+      },
+    ]);
+
+    expect(loggerErrorMock).not.toHaveBeenCalled();
+  });
+
+  test("getElement still wins over the value the field type computed", () => {
+    const container: HTMLElement = renderDetail(
+      { incidentSeverity: buildSeverity("Critical", new Color("#ef4444")) },
+      [
+        {
+          key: "incidentSeverity",
+          title: "Episode Severity",
+          fieldType: FieldType.Entity,
+          getElement: (): ReactElement => {
+            return <span data-testid="custom">Handled</span>;
+          },
+        },
+      ],
+    );
+
+    expect(container.querySelector('[data-testid="custom"]')).not.toBeNull();
+    expect(container.querySelector(badgeSelector)).toBeNull();
+  });
+
+  test("a getElement that returns a placeholder dash renders the dash", () => {
+    /*
+     * The shape both episode detail pages now use for an absent severity or
+     * state. It must survive the guard untouched and must not log.
+     */
+    const container: HTMLElement = renderDetail({}, [
+      {
+        key: "incidentSeverity",
+        title: "Episode Severity",
+        fieldType: FieldType.Entity,
+        getElement: (item: DetailItem): ReactElement => {
+          if (!item["incidentSeverity"]) {
+            return <>-</>;
+          }
+
+          return <span data-testid="custom">present</span>;
+        },
+      },
+    ]);
+
+    expect(container.textContent).toContain("Episode Severity");
+    expect(container.textContent).toContain("-");
+    expect(loggerErrorMock).not.toHaveBeenCalled();
+  });
+});