@oneuptime/common 14.0.8 → 14.0.9

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

@@ -0,0 +1,358 @@
+import "@testing-library/jest-dom";
+import {
+  afterEach,
+  beforeEach,
+  describe,
+  expect,
+  jest,
+  test,
+} from "@jest/globals";
+import {
+  act,
+  cleanup,
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+} from "@testing-library/react";
+import * as React from "react";
+import getJestMockFunction, { MockFunction } from "../../MockType";
+
+/*
+ * Issue #4105 on an incident's Root Cause page: "Metric at Incident Time"
+ * charts the metric that opened the incident from 30 minutes before it was
+ * declared to 15 minutes after. A drag used to narrow that window with no
+ * way back short of a reload. The page is rendered for real (the root
+ * cause text card stubbed); MetricCharts is stood in for with buttons that
+ * call exactly the handlers MetricView hands the charts.
+ */
+
+const getItemMock: MockFunction = getJestMockFunction();
+const fetchResultsMock: MockFunction = getJestMockFunction();
+
+interface MockChartsProps {
+  onTimeRangeSelect?: ((startTime: Date, endTime: Date) => void) | undefined;
+  onTimeRangeReset?: (() => void) | undefined;
+  timeReferenceLines?: Array<{ date: Date; label?: string }> | undefined;
+}
+
+let mockLatestCharts: MockChartsProps | null = null;
+
+const MOCK_DRAG: { start: Date; end: Date } = {
+  start: new Date("2026-09-28T11:20:00.000Z"),
+  end: new Date("2026-09-28T11:35:00.000Z"),
+};
+
+jest.mock(
+  "../../../../App/FeatureSet/Dashboard/src/Components/Metrics/MetricCharts",
+  () => {
+    return {
+      __esModule: true,
+      default: (props: MockChartsProps): React.ReactElement => {
+        mockLatestCharts = props;
+        return (
+          <div data-testid="metric-charts">
+            <button
+              type="button"
+              onClick={() => {
+                props.onTimeRangeSelect?.(MOCK_DRAG.start, MOCK_DRAG.end);
+              }}
+            >
+              Drag across the chart
+            </button>
+            <button
+              type="button"
+              onClick={() => {
+                props.onTimeRangeReset?.();
+              }}
+            >
+              Double-click the chart
+            </button>
+          </div>
+        );
+      },
+    };
+  },
+);
+
+jest.mock(
+  "../../../../App/FeatureSet/Dashboard/src/Components/Metrics/Utils/Metrics",
+  () => {
+    return {
+      __esModule: true,
+      default: {
+        fetchResults: (...args: Array<unknown>) => {
+          return fetchResultsMock(...args);
+        },
+        loadAllMetricsTypes: () => {
+          return Promise.resolve({ metricTypes: [], telemetryServices: [] });
+        },
+        getMetricTypes: () => {
+          return Promise.resolve([]);
+        },
+        clearQueryTopNOverridesForScope: () => {
+          return undefined;
+        },
+      },
+    };
+  },
+);
+
+jest.mock("../../../UI/Utils/ModelAPI/ModelAPI", () => {
+  return {
+    __esModule: true,
+    default: {
+      getItem: (...args: Array<unknown>) => {
+        return getItemMock(...args);
+      },
+    },
+  };
+});
+
+jest.mock("../../../UI/Utils/Navigation", () => {
+  return {
+    __esModule: true,
+    default: {
+      getLastParamAsObjectID: () => {
+        return new ObjectID("11111111-1111-4111-8111-111111111111");
+      },
+    },
+  };
+});
+
+jest.mock("../../../UI/Components/ModelDetail/CardModelDetail", () => {
+  return {
+    __esModule: true,
+    default: () => {
+      return <div data-testid="root-cause-text" />;
+    },
+  };
+});
+
+import RootCausePage from "../../../../App/FeatureSet/Dashboard/src/Pages/Incidents/View/RootCause";
+import PageComponentProps from "../../../../App/FeatureSet/Dashboard/src/Pages/PageComponentProps";
+import { RESET_TIME_RANGE_ZOOM_BUTTON_TEST_ID } from "../../../UI/Components/Charts/TimeRangeZoom/ResetTimeRangeZoomButton";
+import Route from "../../../Types/API/Route";
+import MetricViewData from "../../../Types/Metrics/MetricViewData";
+import MetricsAggregationType from "../../../Types/Metrics/MetricsAggregationType";
+import MonitorType from "../../../Types/Monitor/MonitorType";
+import ObjectID from "../../../Types/ObjectID";
+
+const NOW: Date = new Date("2026-09-28T13:00:00.000Z");
+const DECLARED_AT: Date = new Date("2026-09-28T11:30:00.000Z");
+// 30 minutes before the declaration to 15 minutes after.
+const ANCHOR_START: Date = new Date("2026-09-28T11:00:00.000Z");
+const ANCHOR_END: Date = new Date("2026-09-28T11:45:00.000Z");
+
+const PAGE_PROPS: PageComponentProps = {
+  pageRoute: new Route("/dashboard/incidents/view/root-cause"),
+  currentProject: null,
+  hasPaymentMethod: true,
+};
+
+type Window = [number, number];
+
+function windowOf(start: Date, end: Date): Window {
+  return [start.getTime(), end.getTime()];
+}
+
+function fetchedWindows(): Array<Window> {
+  return fetchResultsMock.mock.calls.map((call: Array<unknown>): Window => {
+    const data: MetricViewData = (call[0] as { metricViewData: MetricViewData })
+      .metricViewData;
+    return [
+      data.startAndEndDate!.startValue.getTime(),
+      data.startAndEndDate!.endValue.getTime(),
+    ];
+  });
+}
+
+function lastFetchedWindow(): Window | undefined {
+  const windows: Array<Window> = fetchedWindows();
+  return windows[windows.length - 1];
+}
+
+function charts(): MockChartsProps {
+  if (!mockLatestCharts) {
+    throw new Error("The chart has not rendered");
+  }
+  return mockLatestCharts;
+}
+
+function buildIncident(): Record<string, unknown> {
+  return {
+    createdAt: DECLARED_AT,
+    seriesLabels: undefined,
+    monitors: [
+      {
+        monitorType: MonitorType.Metrics,
+        monitorSteps: {
+          data: {
+            monitorStepsInstanceArray: [
+              {
+                data: {
+                  metricMonitor: {
+                    metricViewConfig: {
+                      queryConfigs: [
+                        {
+                          metricAliasData: {
+                            metricVariable: "a",
+                            title: "CPU",
+                            description: "",
+                            legend: "",
+                            legendUnit: "",
+                          },
+                          metricQueryData: {
+                            filterData: {
+                              metricName: "system.cpu.utilization",
+                              aggegationType: MetricsAggregationType.Avg,
+                            },
+                          },
+                        },
+                      ],
+                      formulaConfigs: [],
+                    },
+                  },
+                },
+              },
+            ],
+          },
+        },
+      },
+    ],
+  };
+}
+
+async function renderPage(): Promise<void> {
+  render(<RootCausePage {...PAGE_PROPS} />);
+  /*
+   * MetricView draws its charts once before it loads, then shows a loader
+   * until its first fetch lands: wait for that fetch and the charts after.
+   */
+  await waitFor(() => {
+    expect(fetchedWindows().length).toBeGreaterThan(0);
+    expect(screen.getByTestId("metric-charts")).toBeInTheDocument();
+  });
+}
+
+beforeEach(() => {
+  jest.useFakeTimers({ doNotFake: ["nextTick", "setImmediate"] });
+  jest.setSystemTime(NOW);
+  getItemMock.mockReset();
+  fetchResultsMock.mockReset();
+  mockLatestCharts = null;
+  getItemMock.mockResolvedValue(buildIncident());
+  fetchResultsMock.mockImplementation(() => {
+    return Promise.resolve([{ data: [], truncated: false }]);
+  });
+});
+
+afterEach(() => {
+  cleanup();
+  jest.useRealTimers();
+});
+
+describe("Root Cause: Metric at Incident Time", () => {
+  test("charts the window around the declaration, with the marker, and offers a drag", async () => {
+    await renderPage();
+
+    expect(lastFetchedWindow()).toEqual(windowOf(ANCHOR_START, ANCHOR_END));
+    expect(
+      charts().timeReferenceLines?.map((line: { date: Date }) => {
+        return line.date.toISOString();
+      }),
+    ).toEqual([DECLARED_AT.toISOString()]);
+    expect(charts().onTimeRangeSelect).toBeInstanceOf(Function);
+    // Nothing to undo yet, so single clicks are not held back.
+    expect(charts().onTimeRangeReset).toBeUndefined();
+    expect(
+      screen.queryByTestId(RESET_TIME_RANGE_ZOOM_BUTTON_TEST_ID),
+    ).toBeNull();
+  });
+
+  test("a drag re-queries the dragged window and offers the way back", async () => {
+    await renderPage();
+
+    fireEvent.click(
+      await screen.findByRole("button", { name: "Drag across the chart" }),
+    );
+
+    await waitFor(() => {
+      expect(lastFetchedWindow()).toEqual(
+        windowOf(MOCK_DRAG.start, MOCK_DRAG.end),
+      );
+    });
+    expect(charts().onTimeRangeReset).toBeInstanceOf(Function);
+    expect(
+      screen.getByTestId(RESET_TIME_RANGE_ZOOM_BUTTON_TEST_ID),
+    ).toBeVisible();
+    // The declaration marker stays on the zoomed chart.
+    expect(charts().timeReferenceLines?.[0]?.date.toISOString()).toBe(
+      DECLARED_AT.toISOString(),
+    );
+  });
+
+  test("a double-click returns to the window around the declaration, not to now", async () => {
+    await renderPage();
+
+    fireEvent.click(
+      await screen.findByRole("button", { name: "Drag across the chart" }),
+    );
+    await waitFor(() => {
+      expect(charts().onTimeRangeReset).toBeInstanceOf(Function);
+    });
+    fireEvent.click(
+      await screen.findByRole("button", { name: "Double-click the chart" }),
+    );
+
+    await waitFor(() => {
+      expect(lastFetchedWindow()).toEqual(windowOf(ANCHOR_START, ANCHOR_END));
+    });
+    expect(charts().onTimeRangeReset).toBeUndefined();
+    expect(
+      screen.queryByTestId(RESET_TIME_RANGE_ZOOM_BUTTON_TEST_ID),
+    ).toBeNull();
+  });
+
+  test("Reset zoom does what a double-click does", async () => {
+    await renderPage();
+
+    fireEvent.click(
+      await screen.findByRole("button", { name: "Drag across the chart" }),
+    );
+    fireEvent.click(
+      await screen.findByTestId(RESET_TIME_RANGE_ZOOM_BUTTON_TEST_ID),
+    );
+
+    await waitFor(() => {
+      expect(lastFetchedWindow()).toEqual(windowOf(ANCHOR_START, ANCHOR_END));
+    });
+  });
+
+  test("two drags deep, one double-click still returns to the window around the declaration", async () => {
+    await renderPage();
+
+    fireEvent.click(
+      await screen.findByRole("button", { name: "Drag across the chart" }),
+    );
+    await waitFor(() => {
+      expect(charts().onTimeRangeReset).toBeInstanceOf(Function);
+    });
+    const deeperStart: Date = new Date("2026-09-28T11:25:00.000Z");
+    const deeperEnd: Date = new Date("2026-09-28T11:28:00.000Z");
+    act(() => {
+      charts().onTimeRangeSelect?.(deeperStart, deeperEnd);
+    });
+    await waitFor(() => {
+      expect(lastFetchedWindow()).toEqual(windowOf(deeperStart, deeperEnd));
+    });
+
+    fireEvent.click(
+      await screen.findByRole("button", { name: "Double-click the chart" }),
+    );
+
+    await waitFor(() => {
+      expect(lastFetchedWindow()).toEqual(windowOf(ANCHOR_START, ANCHOR_END));
+    });
+  });
+});

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

@@ -45,23 +45,40 @@ jest.mock("react-i18next", () => {
   };
 });
 
+/*
+ * How the map asked React Flow to treat the wheel, a pinch and a
+ * double-click over its canvas, as last rendered (see "a map inside a page").
+ */
+interface MockFlowSettings {
+  zoomOnScroll?: boolean;
+  zoomOnPinch?: boolean;
+  zoomOnDoubleClick?: boolean;
+  preventScrolling?: boolean;
+  panOnScroll?: boolean;
+}
+let mockFlowSettings: MockFlowSettings | null = null;
+
 /*
  * The infrastructure map draws one level of the tree: cards for the
  * workloads and machines in scope, a column of the services running on them,
  * and an arrow per placement. React Flow's rendering is the only boundary
- * replaced; layout runs for real.
+ * replaced; layout runs for real. The stand-in records the canvas settings it
+ * is given.
  */
 jest.mock("reactflow", () => {
   return {
     __esModule: true,
-    default: (props: {
-      nodes: Array<Node>;
-      edges: Array<Edge>;
-      onNodeClick: (event: React.MouseEvent, node: Node) => void;
-      onEdgeClick?: (event: React.MouseEvent, edge: Edge) => void;
-      onEdgeMouseEnter?: (event: React.MouseEvent, edge: Edge) => void;
-      onEdgeMouseLeave?: (event: React.MouseEvent, edge: Edge) => void;
-    }): React.ReactElement => {
+    default: (
+      props: MockFlowSettings & {
+        nodes: Array<Node>;
+        edges: Array<Edge>;
+        onNodeClick: (event: React.MouseEvent, node: Node) => void;
+        onEdgeClick?: (event: React.MouseEvent, edge: Edge) => void;
+        onEdgeMouseEnter?: (event: React.MouseEvent, edge: Edge) => void;
+        onEdgeMouseLeave?: (event: React.MouseEvent, edge: Edge) => void;
+      },
+    ): React.ReactElement => {
+      mockFlowSettings = props;
       return (
         <div data-testid="infrastructure-canvas">
           {props.nodes.map((node: Node): React.ReactElement => {
@@ -175,6 +192,7 @@ function kubernetesModel(): InfrastructureTopologyModel {
 
 afterEach(() => {
   cleanup();
+  mockFlowSettings = null;
 });
 
 describe("layoutInfrastructureMap", () => {
@@ -1339,3 +1357,76 @@ describe("InfrastructureGraph traffic", () => {
     );
   });
 });
+
+/*
+ * Issue #4117. This map and the Service Map beside it sit inside a page,
+ * but React Flow's defaults took every wheel event over the canvas: the page
+ * stopped scrolling under the pointer and the map zoomed about it instead,
+ * which on a large drawing zoomed the cards out of view. The plain wheel now
+ * belongs to the page. Ctrl + scroll and a pinch still zoom (React Flow reads
+ * a trackpad pinch as a wheel event with Ctrl held), and the map says so.
+ */
+describe("a map inside a page (#4117)", () => {
+  function renderKubernetesOverview(): void {
+    const model: InfrastructureTopologyModel = kubernetesModel();
+    render(
+      <InfrastructureGraph
+        model={model}
+        nodeIds={collectMapCards(model, null)}
+        onOpenNode={() => {}}
+        now={NOW}
+      />,
+    );
+  }
+
+  function settings(): MockFlowSettings {
+    expect(mockFlowSettings).not.toBeNull();
+    return mockFlowSettings!;
+  }
+
+  test("the wheel over the map scrolls the page instead of zooming it", () => {
+    renderKubernetesOverview();
+    expect(settings().zoomOnScroll).toBe(false);
+    expect(settings().preventScrolling).toBe(false);
+    // Nor is the wheel taken over to pan the canvas.
+    expect(settings().panOnScroll).not.toBe(true);
+  });
+
+  test("a pinch, and Ctrl + scroll with it, still zooms the map", () => {
+    renderKubernetesOverview();
+    expect(settings().zoomOnPinch).not.toBe(false);
+  });
+
+  test("a double-click on the canvas does not zoom it", () => {
+    renderKubernetesOverview();
+    expect(settings().zoomOnDoubleClick).toBe(false);
+  });
+
+  test("says how to zoom, in the bar above the canvas", () => {
+    renderKubernetesOverview();
+    const hint: HTMLElement = screen.getByTestId("infrastructure-zoom-hint");
+    expect(hint).toHaveTextContent("Ctrl + scroll or pinch to zoom");
+    expect(screen.getByTestId("infrastructure-traffic-bar")).toContainElement(
+      hint,
+    );
+  });
+
+  test("the hint stays beside the line labels when cards have traffic", () => {
+    const model: InfrastructureTopologyModel = aksNodeModel();
+    render(
+      <InfrastructureGraph
+        model={model}
+        nodeIds={collectMapCards(model, "node-k")}
+        onOpenNode={() => {}}
+        metricsWindowSeconds={WINDOW_SECONDS}
+        now={NOW}
+      />,
+    );
+    expect(screen.getByLabelText("Line labels")).toBeInTheDocument();
+    expect(screen.getByTestId("infrastructure-zoom-hint")).toHaveTextContent(
+      "Ctrl + scroll or pinch to zoom",
+    );
+    expect(settings().zoomOnScroll).toBe(false);
+    expect(settings().preventScrolling).toBe(false);
+  });
+});