@oneuptime/common 13.0.6 → 13.0.8

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

@@ -0,0 +1,358 @@
+import "@testing-library/jest-dom";
+import {
+  afterEach,
+  beforeEach,
+  describe,
+  expect,
+  jest,
+  test,
+} from "@jest/globals";
+import {
+  cleanup,
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+} from "@testing-library/react";
+import * as React from "react";
+import getJestMockFunction, { MockFunction } from "../../MockType";
+import EmbeddedMetricCard from "../../../../App/FeatureSet/Dashboard/src/Components/Metrics/EmbeddedMetricCard";
+import MonitorMetricsPage from "../../../../App/FeatureSet/Dashboard/src/Pages/Monitor/View/Metrics";
+import SloMetricsPage from "../../../../App/FeatureSet/Dashboard/src/Pages/Slo/View/Metrics";
+import PageComponentProps from "../../../../App/FeatureSet/Dashboard/src/Pages/PageComponentProps";
+import MetricQueryConfigData from "../../../Types/Metrics/MetricQueryConfigData";
+import MetricViewData from "../../../Types/Metrics/MetricViewData";
+import MonitorType from "../../../Types/Monitor/MonitorType";
+import InBetween from "../../../Types/BaseDatabase/InBetween";
+import Search from "../../../Types/BaseDatabase/Search";
+import ObjectID from "../../../Types/ObjectID";
+import Route from "../../../Types/API/Route";
+import TimeRange from "../../../Types/Time/TimeRange";
+import ChartTimeReferenceLineProps from "../../../UI/Components/Charts/Types/TimeReferenceLineProps";
+
+/*
+ * Exercise real page -> real tab -> real resource metric component -> real
+ * EmbeddedMetricCard. Only the shared hook and chart renderer are replaced,
+ * exposing the scope each API boundary receives. The hook integration suite
+ * separately verifies how this scope filters incidents, alerts and changes.
+ */
+const hookMock: MockFunction = getJestMockFunction();
+const metricViewMock: MockFunction = getJestMockFunction();
+const getItemMock: MockFunction = getJestMockFunction();
+const analyticsGetListMock: MockFunction = getJestMockFunction();
+
+jest.mock(
+  "../../../../App/FeatureSet/Dashboard/src/Components/Metrics/Utils/UseEventTimeReferenceLines",
+  () => {
+    return {
+      __esModule: true,
+      default: (props: unknown) => {
+        hookMock(props);
+        return {
+          lines: [
+            {
+              date: new Date("2026-09-01T10:30:00.000Z"),
+              label: "Incident: scoped incident",
+              color: "#f00",
+            },
+          ],
+          markerCount: 1,
+        };
+      },
+    };
+  },
+);
+
+jest.mock(
+  "../../../../App/FeatureSet/Dashboard/src/Components/Metrics/MetricView",
+  () => {
+    return {
+      __esModule: true,
+      default: (props: unknown) => {
+        metricViewMock(props);
+        return <div data-testid="metric-view" />;
+      },
+    };
+  },
+);
+
+jest.mock("../../../UI/Utils/Translation", () => {
+  return {
+    __esModule: true,
+    default: () => {
+      return {
+        translateString: (value: unknown) => {
+          return value;
+        },
+        translateValue: (value: unknown) => {
+          return value;
+        },
+      };
+    },
+  };
+});
+
+jest.mock("../../../UI/Utils/Navigation", () => {
+  return {
+    __esModule: true,
+    default: {
+      getLastParamAsObjectID: () => {
+        return new ObjectID("0193c0de-5555-4aaa-8bbb-000000000005");
+      },
+    },
+  };
+});
+
+jest.mock("../../../UI/Utils/Project", () => {
+  return {
+    __esModule: true,
+    default: {
+      getCurrentProjectId: () => {
+        return new ObjectID("10000000-0000-4000-8000-000000000001");
+      },
+    },
+  };
+});
+
+jest.mock("../../../UI/Utils/ModelAPI/ModelAPI", () => {
+  return {
+    __esModule: true,
+    default: {
+      getItem: (...args: Array<unknown>) => {
+        return getItemMock(...args);
+      },
+    },
+  };
+});
+
+jest.mock("../../../UI/Utils/AnalyticsModelAPI/AnalyticsModelAPI", () => {
+  return {
+    __esModule: true,
+    default: {
+      getList: (...args: Array<unknown>) => {
+        return analyticsGetListMock(...args);
+      },
+    },
+  };
+});
+
+jest.mock("../../../../App/FeatureSet/Dashboard/src/Utils/Probe", () => {
+  return {
+    __esModule: true,
+    default: {
+      getAllProbes: () => {
+        return Promise.resolve([]);
+      },
+    },
+  };
+});
+
+jest.mock(
+  "../../../../App/FeatureSet/Dashboard/src/Components/Monitor/DisabledWarning",
+  () => {
+    return {
+      __esModule: true,
+      default: () => {
+        return null;
+      },
+    };
+  },
+);
+
+jest.mock(
+  "../../../../App/FeatureSet/Dashboard/src/Components/Slo/SloNoticeBanner",
+  () => {
+    return {
+      __esModule: true,
+      default: () => {
+        return null;
+      },
+    };
+  },
+);
+
+jest.mock(
+  "../../../../App/FeatureSet/Dashboard/src/Components/Slo/SloHistoryCharts",
+  () => {
+    return {
+      __esModule: true,
+      default: () => {
+        return null;
+      },
+    };
+  },
+);
+
+const RESOURCE_ID: string = "0193c0de-5555-4aaa-8bbb-000000000005";
+const PAGE_PROPS: PageComponentProps = {
+  pageRoute: new Route("/dashboard/resource"),
+  currentProject: null,
+  hasPaymentMethod: true,
+};
+const WINDOW: InBetween<Date> = new InBetween<Date>(
+  new Date("2026-09-01T10:00:00.000Z"),
+  new Date("2026-09-01T11:00:00.000Z"),
+);
+
+interface OverlayProps {
+  enabled: boolean;
+  window: InBetween<Date>;
+  queryConfigs?: Array<MetricQueryConfigData>;
+  refreshTick?: number;
+}
+
+interface MetricViewProps {
+  data: MetricViewData;
+  timeReferenceLines?: Array<ChartTimeReferenceLineProps>;
+  refreshNonce?: number;
+}
+
+function latestOverlay(): OverlayProps {
+  return hookMock.mock.calls[
+    hookMock.mock.calls.length - 1
+  ]![0] as OverlayProps;
+}
+
+function assertAllOverlayQueriesHaveScope(
+  attributeKey: string,
+  membership: boolean = false,
+): void {
+  expect(hookMock).toHaveBeenCalled();
+  for (const [rawProps] of hookMock.mock.calls) {
+    const props: OverlayProps = rawProps as OverlayProps;
+    expect(props.enabled).toBe(true);
+    expect(props.queryConfigs?.length).toBeGreaterThan(0);
+    for (const query of props.queryConfigs || []) {
+      const attributes: Record<string, unknown> = query.metricQueryData
+        .filterData.attributes as Record<string, unknown>;
+      if (membership) {
+        expect(attributes[attributeKey]).toBeInstanceOf(Search);
+        expect((attributes[attributeKey] as Search<string>).toString()).toBe(
+          RESOURCE_ID,
+        );
+      } else {
+        expect(attributes[attributeKey]).toBe(RESOURCE_ID);
+      }
+    }
+  }
+}
+
+beforeEach(() => {
+  hookMock.mockReset();
+  metricViewMock.mockReset();
+  getItemMock.mockReset();
+  analyticsGetListMock.mockReset();
+  getItemMock.mockResolvedValue({ monitorType: MonitorType.SyntheticMonitor });
+  analyticsGetListMock.mockResolvedValue({
+    data: [{ name: "custom.monitor.checkout_latency" }],
+  });
+});
+
+afterEach(() => {
+  cleanup();
+});
+
+describe("embedded metric event scope", () => {
+  test.each<[string, string, boolean]>([
+    ["Monitor Metrics", "monitorId", false],
+    ["Custom Metrics", "monitorId", false],
+    ["Incident Metrics", "monitorIds", true],
+    ["Alert Metrics", "monitorId", false],
+  ])(
+    "the monitor's %s tab scopes every chart overlay to that monitor",
+    async (tabName: string, attributeKey: string, membership: boolean) => {
+      render(<MonitorMetricsPage {...PAGE_PROPS} />);
+      await screen.findAllByTestId("metric-view");
+      const tab: HTMLElement = screen.getByRole("tab", { name: tabName });
+      if (tabName !== "Monitor Metrics") {
+        hookMock.mockClear();
+        fireEvent.click(tab);
+      }
+      await waitFor(() => {
+        expect(screen.getByRole("tab", { name: tabName })).toHaveAttribute(
+          "aria-selected",
+          "true",
+        );
+      });
+      await waitFor(() => {
+        expect(screen.getAllByTestId("metric-view").length).toBeGreaterThan(0);
+        assertAllOverlayQueriesHaveScope(attributeKey, membership);
+      });
+    },
+  );
+
+  test.each<[string, string, boolean]>([
+    ["SLO Metrics", "sloId", false],
+    ["Incident Metrics", "serviceLevelObjectiveIds", true],
+    ["Alert Metrics", "serviceLevelObjectiveIds", true],
+  ])(
+    "the SLO's %s tab scopes every chart overlay to that SLO",
+    async (tabName: string, attributeKey: string, membership: boolean) => {
+      render(<SloMetricsPage {...PAGE_PROPS} />);
+      if (tabName !== "SLO Metrics") {
+        hookMock.mockClear();
+        fireEvent.click(screen.getByRole("tab", { name: tabName }));
+      }
+      await waitFor(() => {
+        assertAllOverlayQueriesHaveScope(attributeKey, membership);
+      });
+    },
+  );
+
+  test("refreshing a fixed window refreshes the markers along with the metric data", () => {
+    const queryConfigs: Array<MetricQueryConfigData> = [
+      {
+        metricQueryData: {
+          filterData: { attributes: { monitorId: RESOURCE_ID } },
+        },
+      },
+    ];
+    render(
+      <EmbeddedMetricCard
+        queryConfigs={queryConfigs}
+        defaultTimeRange={{ range: TimeRange.CUSTOM, startAndEndDate: WINDOW }}
+      />,
+    );
+    expect(latestOverlay().refreshTick).toBe(0);
+    expect(latestOverlay().queryConfigs).toBe(queryConfigs);
+    fireEvent.click(screen.getByRole("button", { name: "Refresh" }));
+    expect(latestOverlay().refreshTick).toBe(1);
+    expect(latestOverlay().window).toEqual(WINDOW);
+    expect(latestOverlay().queryConfigs).toBe(queryConfigs);
+    const view: MetricViewProps = metricViewMock.mock.calls[
+      metricViewMock.mock.calls.length - 1
+    ]![0] as MetricViewProps;
+    expect(view.refreshNonce).toBe(1);
+    expect(
+      view.timeReferenceLines?.map((line: ChartTimeReferenceLineProps) => {
+        return line.label;
+      }),
+    ).toEqual(["Incident: scoped incident"]);
+  });
+
+  test("resource changes replace the overlay scope even when the time window stays fixed", () => {
+    const first: Array<MetricQueryConfigData> = [
+      {
+        metricQueryData: {
+          filterData: { attributes: { "resource.host.id": "host-a" } },
+        },
+      },
+    ];
+    const second: Array<MetricQueryConfigData> = [
+      {
+        metricQueryData: {
+          filterData: { attributes: { "resource.host.id": "host-b" } },
+        },
+      },
+    ];
+    const { rerender } = render(
+      <EmbeddedMetricCard queryConfigs={first} startAndEndDate={WINDOW} />,
+    );
+    expect(latestOverlay().queryConfigs).toBe(first);
+    rerender(
+      <EmbeddedMetricCard queryConfigs={second} startAndEndDate={WINDOW} />,
+    );
+    expect(latestOverlay().queryConfigs).toBe(second);
+    expect(latestOverlay().window).toBe(WINDOW);
+  });
+});

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

@@ -21,7 +21,10 @@ import ObjectID from "../../../Types/ObjectID";
  * selected: a blank picker over a live selection is how that selection gets
  * silently dropped on the next edit. So the picker lists only live SLOs and,
  * separately, looks up any selected SLO that list is missing, showing it marked
- * "(archived)". Every other entity type is untouched.
+ * "(archived)" - but only when it really is archived: a live SLO can be missing
+ * from the list just by sitting past its 1000-row cap. Only SLOs narrow the
+ * list; the by-id lookup itself is shared with every entity type (see
+ * EntityFilterDropdownUnlistedSelection.test.tsx).
  */
 
 interface ListArgs {
@@ -36,6 +39,7 @@ interface ListArgs {
 interface Row {
   _id: string;
   name: string;
+  isArchived?: boolean | undefined;
 }
 
 interface ListResultShape {
@@ -106,11 +110,20 @@ import ServiceLevelObjective from "../../../Models/DatabaseModels/ServiceLevelOb
 const LIVE_SLO: Row = {
   _id: "0193c0de-7777-4aaa-8bbb-000000000101",
   name: "Checkout availability",
+  isArchived: false,
 };
 
 const ARCHIVED_SLO: Row = {
   _id: "0193c0de-7777-4aaa-8bbb-000000000102",
   name: "Legacy search latency",
+  isArchived: true,
+};
+
+// Live, but past the list's 1000-row cap in a project with many SLOs.
+const LIVE_SLO_PAST_CAP: Row = {
+  _id: "0193c0de-7777-4aaa-8bbb-000000000103",
+  name: "Zeta payments latency",
+  isArchived: false,
 };
 
 function listOf(rows: Array<Row>): Promise<ListResultShape> {
@@ -124,8 +137,8 @@ function listOf(rows: Array<Row>): Promise<ListResultShape> {
 
 /*
  * The server as the picker sees it: the pickable list returns only the live
- * SLO, and a lookup by id returns whichever SLOs were asked for, archived or
- * not.
+ * SLO within its cap, and a lookup by id returns whichever SLOs were asked
+ * for, archived or not - carrying isArchived only if the lookup selected it.
  */
 function serveSlos(args: ListArgs): Promise<ListResultShape> {
   const idFilter: unknown = args.query["_id"];
@@ -138,9 +151,15 @@ function serveSlos(args: ListArgs): Promise<ListResultShape> {
     );
 
     return listOf(
-      [LIVE_SLO, ARCHIVED_SLO].filter((row: Row): boolean => {
-        return ids.includes(row._id);
-      }),
+      [LIVE_SLO, ARCHIVED_SLO, LIVE_SLO_PAST_CAP]
+        .filter((row: Row): boolean => {
+          return ids.includes(row._id);
+        })
+        .map((row: Row): Row => {
+          return args.select["isArchived"]
+            ? row
+            : { _id: row._id, name: row.name };
+        }),
     );
   }
 
@@ -151,12 +170,14 @@ function renderPicker(options: {
   type: EntityFilterModelType;
   isMultiSelect?: boolean | undefined;
   value?: string | Array<string> | undefined;
+  placeholder?: string | undefined;
 }): void {
   render(
     <EntityFilterDropdown
       entityFilterModelType={options.type}
       isMultiSelect={Boolean(options.isMultiSelect)}
       value={options.value}
+      placeholder={options.placeholder}
       onChange={() => {
         return undefined;
       }}
@@ -228,6 +249,8 @@ describe("EntityFilterDropdown and archived SLOs", () => {
       ),
     ).toEqual([ARCHIVED_SLO._id]);
     expect(lookup.limit).toBe(1);
+    // Fetches isArchived, so the marker is earned rather than assumed.
+    expect(lookup.select).toEqual({ isArchived: true, _id: true, name: true });
   });
 
   test("in a multi-select, looks up only the selected SLOs the live list is missing", async () => {
@@ -306,6 +329,82 @@ describe("EntityFilterDropdown and archived SLOs", () => {
     expect(getListMock).toHaveBeenCalledTimes(1);
   });
 
+  test("a live SLO past the list's row cap is shown by name, not marked archived", async () => {
+    renderPicker({
+      type: EntityFilterModelType.ServiceLevelObjective,
+      value: LIVE_SLO_PAST_CAP._id,
+      placeholder: "All SLOs",
+    });
+
+    expect(
+      await screen.findByText("Zeta payments latency"),
+    ).toBeInTheDocument();
+    expect(screen.queryByText(/\(archived\)/)).not.toBeInTheDocument();
+    expect(screen.queryByText("All SLOs")).not.toBeInTheDocument();
+
+    expect(getListMock).toHaveBeenCalledTimes(2);
+    expect(
+      ((listCall(1).query["_id"] as Includes).values as Array<ObjectID>).map(
+        (id: ObjectID): string => {
+          return id.toString();
+        },
+      ),
+    ).toEqual([LIVE_SLO_PAST_CAP._id]);
+  });
+
+  test("in a multi-select, marks only the archived one of two unlisted SLOs", async () => {
+    renderPicker({
+      type: EntityFilterModelType.ServiceLevelObjective,
+      isMultiSelect: true,
+      value: [LIVE_SLO._id, LIVE_SLO_PAST_CAP._id, ARCHIVED_SLO._id],
+    });
+
+    expect(
+      await screen.findByRole("button", {
+        name: "Remove Legacy search latency (archived)",
+      }),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole("button", { name: "Remove Zeta payments latency" }),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole("button", { name: "Remove Checkout availability" }),
+    ).toBeInTheDocument();
+    expect(
+      screen.queryByText("Zeta payments latency (archived)"),
+    ).not.toBeInTheDocument();
+
+    expect(getListMock).toHaveBeenCalledTimes(2);
+    expect(
+      ((listCall(1).query["_id"] as Includes).values as Array<ObjectID>)
+        .map((id: ObjectID): string => {
+          return id.toString();
+        })
+        .sort(),
+    ).toEqual([ARCHIVED_SLO._id, LIVE_SLO_PAST_CAP._id].sort());
+  });
+
+  test("does not mark an SLO archived when the lookup cannot tell", async () => {
+    getListMock.mockImplementation((args: ListArgs) => {
+      if (args.query["_id"]) {
+        // e.g. the field came back unreadable: no isArchived on the row.
+        return listOf([{ _id: ARCHIVED_SLO._id, name: ARCHIVED_SLO.name }]);
+      }
+
+      return listOf([LIVE_SLO]);
+    });
+
+    renderPicker({
+      type: EntityFilterModelType.ServiceLevelObjective,
+      value: ARCHIVED_SLO._id,
+    });
+
+    expect(
+      await screen.findByText("Legacy search latency"),
+    ).toBeInTheDocument();
+    expect(screen.queryByText(/\(archived\)/)).not.toBeInTheDocument();
+  });
+
   test("a failed lookup of the stale selection leaves the picker working", async () => {
     getListMock.mockImplementation((args: ListArgs) => {
       if (args.query["_id"]) {