@oneuptime/common 11.7.3 → 12.0.0

package/Tests/UI/Components/TelemetryTimeRangePicker.test.tsx

@@ -0,0 +1,404 @@
+import TelemetryTimeRangePicker, {
+  TIME_RANGE_DROPDOWN_WIDTH_IN_PX,
+} from "../../../UI/Components/TelemetryViewer/components/TelemetryTimeRangePicker";
+import RangeStartAndEndDateTime from "../../../Types/Time/RangeStartAndEndDateTime";
+import TimeRange from "../../../Types/Time/TimeRange";
+import InBetween from "../../../Types/BaseDatabase/InBetween";
+import "@testing-library/jest-dom/extend-expect";
+import {
+  act,
+  cleanup,
+  fireEvent,
+  render,
+  screen,
+} from "@testing-library/react";
+import React from "react";
+import {
+  afterEach,
+  beforeEach,
+  describe,
+  expect,
+  jest,
+  test,
+} from "@jest/globals";
+
+const BUTTON_TEST_ID: string = "telemetry-time-range-picker-button";
+const DROPDOWN_TEST_ID: string = "telemetry-time-range-picker-dropdown";
+
+const ORIGINAL_INNER_WIDTH: number = window.innerWidth;
+const originalGetBoundingClientRect: () => DOMRect =
+  Element.prototype.getBoundingClientRect;
+
+/*
+ * jsdom performs no layout, so every rect comes back zero-sized. These helpers
+ * let a test describe where the trigger button sits inside a viewport of a
+ * given width, which is the only input the alignment logic reads.
+ */
+function setViewportWidth(width: number): void {
+  Object.defineProperty(window, "innerWidth", {
+    configurable: true,
+    writable: true,
+    value: width,
+  });
+}
+
+function stubTriggerRect(left: number, right: number): void {
+  Element.prototype.getBoundingClientRect = function (this: Element): DOMRect {
+    if (
+      this instanceof HTMLElement &&
+      this.getAttribute("data-testid") === BUTTON_TEST_ID
+    ) {
+      return {
+        left: left,
+        right: right,
+        top: 40,
+        bottom: 68,
+        width: right - left,
+        height: 28,
+        x: left,
+        y: 40,
+        toJSON: (): Record<string, unknown> => {
+          return {};
+        },
+      } as DOMRect;
+    }
+
+    return originalGetBoundingClientRect.call(this);
+  };
+}
+
+function renderPicker(
+  value: RangeStartAndEndDateTime,
+  onChange: (value: RangeStartAndEndDateTime) => void = jest.fn(),
+): void {
+  render(<TelemetryTimeRangePicker value={value} onChange={onChange} />);
+}
+
+function getTrigger(): HTMLElement {
+  return screen.getByTestId(BUTTON_TEST_ID);
+}
+
+function getDropdown(): HTMLElement {
+  return screen.getByTestId(DROPDOWN_TEST_ID);
+}
+
+function openDropdown(): HTMLElement {
+  fireEvent.click(getTrigger());
+  return getDropdown();
+}
+
+function hasClass(element: HTMLElement, className: string): boolean {
+  return element.classList.contains(className);
+}
+
+describe("TelemetryTimeRangePicker", () => {
+  beforeEach(() => {
+    setViewportWidth(1440);
+    stubTriggerRect(64, 180);
+  });
+
+  afterEach(() => {
+    cleanup();
+    Element.prototype.getBoundingClientRect = originalGetBoundingClientRect;
+    setViewportWidth(ORIGINAL_INNER_WIDTH);
+  });
+
+  describe("dropdown alignment", () => {
+    test("opens rightwards when the trigger sits at the left of the metrics toolbar", () => {
+      /*
+       * Regression: the panel was hard-coded to `right-0`, so on the metric
+       * explorer — where the time range button is the first control in the
+       * toolbar — the 288px panel rendered off the left edge of the content
+       * area and on top of the app sidebar.
+       */
+      renderPicker({ range: TimeRange.PAST_ONE_HOUR });
+
+      const dropdown: HTMLElement = openDropdown();
+
+      expect(hasClass(dropdown, "left-0")).toBe(true);
+      expect(hasClass(dropdown, "right-0")).toBe(false);
+      expect(dropdown.getAttribute("data-align")).toBe("left");
+    });
+
+    test("stays left aligned for a trigger flush against x=0", () => {
+      stubTriggerRect(0, 116);
+      renderPicker({ range: TimeRange.PAST_ONE_HOUR });
+
+      expect(hasClass(openDropdown(), "left-0")).toBe(true);
+    });
+
+    test("stays left aligned for a trigger in the middle of a wide toolbar", () => {
+      stubTriggerRect(500, 616);
+      renderPicker({ range: TimeRange.PAST_ONE_HOUR });
+
+      expect(hasClass(openDropdown(), "left-0")).toBe(true);
+    });
+
+    test("flips to right alignment when the trigger is near the right edge", () => {
+      stubTriggerRect(1310, 1430);
+      renderPicker({ range: TimeRange.PAST_ONE_HOUR });
+
+      const dropdown: HTMLElement = openDropdown();
+
+      expect(hasClass(dropdown, "right-0")).toBe(true);
+      expect(hasClass(dropdown, "left-0")).toBe(false);
+      expect(dropdown.getAttribute("data-align")).toBe("right");
+    });
+
+    test("never emits both positioning classes at once", () => {
+      stubTriggerRect(1310, 1430);
+      renderPicker({ range: TimeRange.PAST_ONE_HOUR });
+
+      const dropdown: HTMLElement = openDropdown();
+
+      expect(
+        hasClass(dropdown, "left-0") && hasClass(dropdown, "right-0"),
+      ).toBe(false);
+    });
+
+    test("stays left aligned on a narrow mobile viewport", () => {
+      setViewportWidth(375);
+      stubTriggerRect(12, 128);
+      renderPicker({ range: TimeRange.PAST_ONE_HOUR });
+
+      expect(hasClass(openDropdown(), "left-0")).toBe(true);
+    });
+
+    test("re-measures alignment when the window is resized", () => {
+      stubTriggerRect(1000, 1116);
+      renderPicker({ range: TimeRange.PAST_ONE_HOUR });
+
+      expect(hasClass(openDropdown(), "left-0")).toBe(true);
+
+      // Shrink the window so the same trigger no longer has room to its right.
+      act(() => {
+        setViewportWidth(1200);
+        window.dispatchEvent(new Event("resize"));
+      });
+
+      expect(hasClass(getDropdown(), "right-0")).toBe(true);
+    });
+
+    test("keeps the panel on screen when neither edge fits the viewport", () => {
+      /*
+       * Viewport narrower than the 288px panel: left alignment clips by 60px,
+       * right alignment would clip by 116px, so left is the lesser evil.
+       */
+      setViewportWidth(300);
+      stubTriggerRect(64, 180);
+      renderPicker({ range: TimeRange.PAST_ONE_HOUR });
+
+      const dropdown: HTMLElement = openDropdown();
+
+      expect(hasClass(dropdown, "left-0")).toBe(true);
+      expect(hasClass(dropdown, "max-w-[calc(100vw-1rem)]")).toBe(true);
+    });
+
+    test("re-measures alignment when scrolling moves the trigger sideways", () => {
+      renderPicker({ range: TimeRange.PAST_ONE_HOUR });
+
+      expect(hasClass(openDropdown(), "left-0")).toBe(true);
+
+      act(() => {
+        stubTriggerRect(1310, 1430);
+        window.dispatchEvent(new Event("scroll"));
+      });
+
+      expect(hasClass(getDropdown(), "right-0")).toBe(true);
+    });
+
+    test("re-evaluates alignment each time the dropdown is reopened", () => {
+      renderPicker({ range: TimeRange.PAST_ONE_HOUR });
+
+      expect(hasClass(openDropdown(), "left-0")).toBe(true);
+
+      fireEvent.click(getTrigger());
+      expect(screen.queryByTestId(DROPDOWN_TEST_ID)).toBeNull();
+
+      stubTriggerRect(1310, 1430);
+      expect(hasClass(openDropdown(), "right-0")).toBe(true);
+    });
+
+    test("stops listening for layout changes once closed", () => {
+      const removedEvents: Array<string> = [];
+      const originalRemoveEventListener: typeof window.removeEventListener =
+        window.removeEventListener.bind(window);
+
+      window.removeEventListener = ((
+        type: string,
+        listener: EventListenerOrEventListenerObject,
+        options?: boolean | EventListenerOptions,
+      ): void => {
+        removedEvents.push(type);
+        originalRemoveEventListener(type, listener, options);
+      }) as typeof window.removeEventListener;
+
+      try {
+        renderPicker({ range: TimeRange.PAST_ONE_HOUR });
+        openDropdown();
+        fireEvent.click(getTrigger());
+
+        expect(removedEvents).toContain("resize");
+        expect(removedEvents).toContain("scroll");
+      } finally {
+        window.removeEventListener = originalRemoveEventListener;
+      }
+    });
+
+    test("ignores layout events once the dropdown is closed", () => {
+      renderPicker({ range: TimeRange.PAST_ONE_HOUR });
+      openDropdown();
+      fireEvent.click(getTrigger());
+
+      /*
+       * Firing a resize after close must not resurrect the panel or throw
+       * because a listener outlived the element it measured.
+       */
+      act(() => {
+        setViewportWidth(300);
+        window.dispatchEvent(new Event("resize"));
+      });
+
+      expect(screen.queryByTestId(DROPDOWN_TEST_ID)).toBeNull();
+    });
+
+    test("keeps the panel anchored below the trigger inside a relative container", () => {
+      renderPicker({ range: TimeRange.PAST_ONE_HOUR });
+
+      const dropdown: HTMLElement = openDropdown();
+
+      expect(hasClass(dropdown, "absolute")).toBe(true);
+      expect(hasClass(dropdown, "top-full")).toBe(true);
+      expect(
+        dropdown.parentElement?.classList.contains("relative") ?? false,
+      ).toBe(true);
+    });
+
+    test("caps the panel width so it cannot exceed the viewport", () => {
+      renderPicker({ range: TimeRange.PAST_ONE_HOUR });
+
+      expect(hasClass(openDropdown(), "max-w-[calc(100vw-1rem)]")).toBe(true);
+    });
+
+    test("exports a width constant that matches the rendered w-72 panel", () => {
+      expect(TIME_RANGE_DROPDOWN_WIDTH_IN_PX).toBe(288);
+
+      renderPicker({ range: TimeRange.PAST_ONE_HOUR });
+      expect(hasClass(openDropdown(), "w-72")).toBe(true);
+    });
+  });
+
+  describe("open and close behaviour", () => {
+    test("is closed until the trigger is clicked", () => {
+      renderPicker({ range: TimeRange.PAST_ONE_HOUR });
+
+      expect(screen.queryByTestId(DROPDOWN_TEST_ID)).toBeNull();
+      expect(getTrigger().getAttribute("aria-expanded")).toBe("false");
+    });
+
+    test("marks the trigger as expanded while open", () => {
+      renderPicker({ range: TimeRange.PAST_ONE_HOUR });
+      openDropdown();
+
+      expect(getTrigger().getAttribute("aria-expanded")).toBe("true");
+    });
+
+    test("closes when clicking outside the picker", () => {
+      renderPicker({ range: TimeRange.PAST_ONE_HOUR });
+      openDropdown();
+
+      fireEvent.mouseDown(document.body);
+
+      expect(screen.queryByTestId(DROPDOWN_TEST_ID)).toBeNull();
+    });
+
+    test("stays open when clicking inside the dropdown", () => {
+      renderPicker({ range: TimeRange.PAST_ONE_HOUR });
+      const dropdown: HTMLElement = openDropdown();
+
+      fireEvent.mouseDown(dropdown);
+
+      expect(screen.queryByTestId(DROPDOWN_TEST_ID)).not.toBeNull();
+    });
+  });
+
+  describe("range selection", () => {
+    test("shows the label of the currently selected preset", () => {
+      renderPicker({ range: TimeRange.PAST_ONE_HOUR });
+
+      expect(getTrigger().textContent).toContain("Past 1 Hour");
+    });
+
+    test("emits the picked preset and closes the dropdown", () => {
+      const onChange: (value: RangeStartAndEndDateTime) => void = jest.fn();
+      renderPicker({ range: TimeRange.PAST_ONE_HOUR }, onChange);
+      openDropdown();
+
+      fireEvent.click(screen.getByText("Past 30 Minutes"));
+
+      expect(onChange).toHaveBeenCalledWith({
+        range: TimeRange.PAST_THIRTY_MINS,
+      });
+      expect(screen.queryByTestId(DROPDOWN_TEST_ID)).toBeNull();
+    });
+
+    test("lists every preset option plus the custom entry", () => {
+      renderPicker({ range: TimeRange.PAST_ONE_HOUR });
+      const dropdown: HTMLElement = openDropdown();
+
+      const optionLabels: Array<string> = Array.from(
+        dropdown.querySelectorAll("button"),
+      ).map((button: HTMLButtonElement): string => {
+        return (button.textContent || "").trim();
+      });
+
+      const expectedLabels: Array<string> = [
+        "Past 5 Minutes",
+        "Past 15 Minutes",
+        "Past 30 Minutes",
+        "Past 1 Hour",
+        "Past 2 Hours",
+        "Past 3 Hours",
+        "Past 1 Day",
+        "Past 2 Days",
+        "Past 1 Week",
+        "Past 2 Weeks",
+        "Past 1 Month",
+        "Past 3 Months",
+        "Custom Range...",
+      ];
+
+      expect(optionLabels).toEqual(expectedLabels);
+    });
+
+    test("renders the custom range editor when a custom range is active", () => {
+      renderPicker({
+        range: TimeRange.CUSTOM,
+        startAndEndDate: new InBetween<Date>(
+          new Date("2024-01-01T00:00:00.000Z"),
+          new Date("2024-01-02T00:00:00.000Z"),
+        ),
+      });
+
+      const dropdown: HTMLElement = openDropdown();
+
+      // The custom editor lives in the same panel, so alignment still applies.
+      expect(hasClass(dropdown, "left-0")).toBe(true);
+      expect(dropdown.querySelectorAll("input").length).toBeGreaterThan(0);
+    });
+
+    test("keeps the taller custom panel inside the viewport near the right edge", () => {
+      stubTriggerRect(1310, 1430);
+
+      renderPicker({
+        range: TimeRange.CUSTOM,
+        startAndEndDate: new InBetween<Date>(
+          new Date("2024-01-01T00:00:00.000Z"),
+          new Date("2024-01-02T00:00:00.000Z"),
+        ),
+      });
+
+      expect(hasClass(openDropdown(), "right-0")).toBe(true);
+    });
+  });
+});

package/Tests/UI/Monitor/MonitorSummarySnapshotRender.test.tsx

@@ -0,0 +1,248 @@
+/*
+ * The package entry, not the `/extend-expect` subpath the older tests use:
+ * the matchers are already registered by Tests/jest.setup.ts, and only this
+ * specifier resolves to the type augmentation that makes them visible to
+ * TypeScript.
+ */
+import "@testing-library/jest-dom";
+import { render, screen } from "@testing-library/react";
+import * as React from "react";
+import { describe, expect, it } from "@jest/globals";
+import { JSONObject } from "../../../Types/JSON";
+import FilterCondition from "../../../Types/Filter/FilterCondition";
+import MonitorEvaluationSummary from "../../../Types/Monitor/MonitorEvaluationSummary";
+import MonitorSummarySnapshot from "../../../Types/Monitor/MonitorSummarySnapshot";
+import MonitorType from "../../../Types/Monitor/MonitorType";
+import ObjectID from "../../../Types/ObjectID";
+import MonitorSummarySnapshotUtil, {
+  MonitorSummaryDataToProcess,
+  MonitorSummaryInfoProps,
+} from "../../../Utils/Monitor/MonitorSummarySnapshotUtil";
+/*
+ * The Dashboard resolves its own copy of react, which would give the
+ * component a different hook dispatcher than the one react-dom renders
+ * with. Pinned in Common's jest moduleNameMapper - see
+ * Tests/UI/Rum/ReplayStage.test.tsx for why the path-based version broke CI.
+ */
+import SummaryInfo from "../../../../App/FeatureSet/Dashboard/src/Components/Monitor/SummaryView/SummaryInfo";
+
+/*
+ * End to end for the read half of the feature: a snapshot that came out of
+ * the incident's jsonb column has to reach the same per-monitor-type view
+ * the monitor page renders, and actually put the check on screen.
+ *
+ * The pure mapping is covered in Tests/Utils/Monitor/MonitorSummarySnapshotUtil.test.ts.
+ * What that one cannot catch is the shape mismatch that renders nothing:
+ * SummaryInfo takes probeMonitorResponse*s* (plural, because a monitor can
+ * have several steps), so handing it the bare object silently produces an
+ * empty card - which is indistinguishable from "this monitor had no data",
+ * the exact bug this feature exists to fix.
+ */
+
+const PROJECT_ID: ObjectID = new ObjectID(
+  "11111111-1111-4111-8111-111111111111",
+);
+const MONITOR_ID: ObjectID = new ObjectID(
+  "22222222-2222-4222-8222-222222222222",
+);
+const MONITOR_STEP_ID: ObjectID = new ObjectID(
+  "33333333-3333-4333-8333-333333333333",
+);
+const PROBE_ID: ObjectID = new ObjectID("44444444-4444-4444-8444-444444444444");
+
+const CAPTURED_AT: Date = new Date("2026-07-31T10:00:00.000Z");
+
+const EVALUATION_SUMMARY: MonitorEvaluationSummary = {
+  evaluatedAt: CAPTURED_AT,
+  criteriaResults: [
+    {
+      criteriaId: "criteria-1",
+      criteriaName: "Site Is Offline",
+      filterCondition: FilterCondition.Any,
+      met: true,
+      message: "Monitor is offline",
+      filters: [],
+    },
+  ],
+  events: [],
+};
+
+/*
+ * Build the snapshot the way the server does, push it through the jsonb
+ * round trip, and read it back the way the browser does - so the test
+ * exercises the real storage path rather than an in-memory object.
+ */
+function storeAndReadBack(input: {
+  monitorType: MonitorType;
+  dataToProcess?: MonitorSummaryDataToProcess | undefined;
+  probeName?: string | undefined;
+}): MonitorSummarySnapshot {
+  const snapshot: MonitorSummarySnapshot | null =
+    MonitorSummarySnapshotUtil.buildSnapshot({
+      monitorType: input.monitorType,
+      dataToProcess: input.dataToProcess,
+      monitorId: MONITOR_ID.toString(),
+      monitorName: "Production API",
+      probeName: input.probeName,
+      evaluationSummary: EVALUATION_SUMMARY,
+      capturedAt: CAPTURED_AT,
+    });
+
+  const stored: JSONObject = JSON.parse(
+    JSON.stringify(MonitorSummarySnapshotUtil.serialize(snapshot)),
+  ) as JSONObject;
+
+  return MonitorSummarySnapshotUtil.deserialize(stored)!;
+}
+
+function renderSnapshot(snapshot: MonitorSummarySnapshot): void {
+  const props: MonitorSummaryInfoProps =
+    MonitorSummarySnapshotUtil.toSummaryInfoProps(snapshot);
+
+  render(<SummaryInfo {...props} />);
+}
+
+describe("A stored monitor summary renders the check that caused the incident", () => {
+  it("renders a website check, including the probe that ran it", () => {
+    renderSnapshot(
+      storeAndReadBack({
+        monitorType: MonitorType.Website,
+        probeName: "US West Probe",
+        dataToProcess: {
+          projectId: PROJECT_ID,
+          monitorId: MONITOR_ID,
+          monitorStepId: MONITOR_STEP_ID,
+          probeId: PROBE_ID,
+          isOnline: false,
+          responseCode: 503,
+          responseTimeInMs: 1234,
+          failureCause: "Connection refused",
+          monitoredAt: CAPTURED_AT,
+        } as unknown as MonitorSummaryDataToProcess,
+      }),
+    );
+
+    expect(screen.getByText("503")).toBeInTheDocument();
+    /*
+     * The probe name is the whole reason MonitorSummaryCapture resolves it
+     * server-side - the old log only ever had the id, so this card would
+     * otherwise read "Probe: -".
+     */
+    expect(screen.getByText("US West Probe")).toBeInTheDocument();
+  });
+
+  it("renders a server check's hostname rather than an empty card", () => {
+    /*
+     * SummaryInfo has no guard for a Server monitor with no response - it
+     * renders an empty <div>. Routing the payload into serverMonitorResponse
+     * is what keeps this card populated.
+     */
+    renderSnapshot(
+      storeAndReadBack({
+        monitorType: MonitorType.Server,
+        dataToProcess: {
+          projectId: PROJECT_ID,
+          monitorId: MONITOR_ID,
+          hostname: "prod-db-01",
+          requestReceivedAt: CAPTURED_AT,
+          onlyCheckRequestReceivedAt: false,
+        } as unknown as MonitorSummaryDataToProcess,
+      }),
+    );
+
+    expect(screen.getByText("prod-db-01")).toBeInTheDocument();
+  });
+
+  it("renders an incoming request, including the check time the snapshot supplies", () => {
+    renderSnapshot(
+      storeAndReadBack({
+        monitorType: MonitorType.IncomingRequest,
+        dataToProcess: {
+          projectId: PROJECT_ID,
+          monitorId: MONITOR_ID,
+          requestMethod: "POST",
+          incomingRequestReceivedAt: CAPTURED_AT,
+          checkedAt: CAPTURED_AT,
+          requestBody: { status: "degraded" },
+        } as unknown as MonitorSummaryDataToProcess,
+      }),
+    );
+
+    expect(screen.getByText("POST")).toBeInTheDocument();
+    /*
+     * The live card fills this from the monitor's *current* heartbeat time.
+     * A frozen capture has no such thing, so toSummaryInfoProps substitutes
+     * the moment this very request was checked - without it the card loses
+     * a field on every incident.
+     */
+    expect(screen.getByText("Monitor Status Check At")).toBeInTheDocument();
+  });
+
+  it("renders an incoming email's subject and sender", () => {
+    renderSnapshot(
+      storeAndReadBack({
+        monitorType: MonitorType.IncomingEmail,
+        dataToProcess: {
+          projectId: PROJECT_ID,
+          monitorId: MONITOR_ID,
+          emailFrom: "alerts@example.com",
+          emailTo: "monitor@oneuptime.com",
+          emailSubject: "Backup failed",
+          emailBody: "The nightly backup did not complete.",
+          emailReceivedAt: CAPTURED_AT,
+          checkedAt: CAPTURED_AT,
+        } as unknown as MonitorSummaryDataToProcess,
+      }),
+    );
+
+    expect(screen.getByText("Backup failed")).toBeInTheDocument();
+    expect(screen.getByText("alerts@example.com")).toBeInTheDocument();
+  });
+
+  it("renders the criteria evaluation that decided to open the incident", () => {
+    /*
+     * For a telemetry monitor there is no per-probe check to show, so the
+     * evaluation log IS the summary - and it is the part that answers "why
+     * did this fire?".
+     */
+    renderSnapshot(
+      storeAndReadBack({
+        monitorType: MonitorType.Logs,
+        dataToProcess: {
+          projectId: PROJECT_ID,
+          monitorId: MONITOR_ID,
+          logCount: 412,
+        } as unknown as MonitorSummaryDataToProcess,
+      }),
+    );
+
+    expect(screen.getByText(/Site Is Offline/)).toBeInTheDocument();
+  });
+
+  it("does not tell the reader to wait a few minutes for data that is already here", () => {
+    /*
+     * SummaryInfo's empty state for a probeable monitor is "No summary
+     * available for the selected probe. Should be few minutes for summary
+     * to show up." On an incident from last quarter that is nonsense, and
+     * it is exactly what a bare (unwrapped) probe response produces.
+     */
+    renderSnapshot(
+      storeAndReadBack({
+        monitorType: MonitorType.Ping,
+        probeName: "US West Probe",
+        dataToProcess: {
+          projectId: PROJECT_ID,
+          monitorId: MONITOR_ID,
+          monitorStepId: MONITOR_STEP_ID,
+          probeId: PROBE_ID,
+          isOnline: false,
+          failureCause: "Host unreachable",
+          monitoredAt: CAPTURED_AT,
+        } as unknown as MonitorSummaryDataToProcess,
+      }),
+    );
+
+    expect(screen.queryByText(/few minutes for summary/)).toBeNull();
+    expect(screen.getByText("Host unreachable")).toBeInTheDocument();
+  });
+});