@oneuptime/common 14.0.5 → 14.0.7

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

@@ -541,13 +541,16 @@ function vitalsWith(
   value: (d: WebVitalDefinition) => number | null,
 ): Array<WebVital> {
   return WebVitalDefinitions.map((d: WebVitalDefinition): WebVital => {
+    const reported: number | null = value(d);
     return {
       key: d.key,
       label: d.label,
       description: d.description,
-      value: value(d),
+      value: reported,
       unit: d.unit,
       thresholds: d.thresholds,
+      // As fetchWebVitals reports it: the first alias, once one has data.
+      metricName: reported === null ? null : d.names[0] || null,
     };
   });
 }

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

@@ -40,6 +40,7 @@ const countMock: MockFunction = getJestMockFunction();
 const fetchSpanMetricsMock: MockFunction = getJestMockFunction();
 const fetchSpanNameStatsMock: MockFunction = getJestMockFunction();
 const fetchWebVitalsMock: MockFunction = getJestMockFunction();
+const fetchWebVitalByRouteMock: MockFunction = getJestMockFunction();
 const fetchSignalsMock: MockFunction = getJestMockFunction();
 const fetchSessionReplayListMock: MockFunction = getJestMockFunction();
 const lineChartMock: MockFunction = getJestMockFunction();
@@ -204,6 +205,9 @@ jest.mock(
       fetchWebVitals: (...args: Array<unknown>): unknown => {
         return fetchWebVitalsMock(...args);
       },
+      fetchWebVitalByRoute: (...args: Array<unknown>): unknown => {
+        return fetchWebVitalByRouteMock(...args);
+      },
       fetchLogAndExceptionSignals: (...args: Array<unknown>): unknown => {
         return fetchSignalsMock(...args);
       },
@@ -279,6 +283,7 @@ import {
   SpanNameStats,
   LogAndExceptionSignals,
   WebVital,
+  WebVitalByRoute,
 } from "../../../../App/FeatureSet/Dashboard/src/Components/TelemetryResource/telemetryMetrics";
 import PageComponentProps from "../../../../App/FeatureSet/Dashboard/src/Pages/PageComponentProps";
 import {
@@ -367,10 +372,25 @@ const VITALS: Array<WebVital> = WebVitalDefinitions.map(
       value: d.unit === "score" ? 0.05 : d.thresholds.warn / 2,
       unit: d.unit,
       thresholds: d.thresholds,
+      metricName: null,
     };
   },
 );
 
+/* INP as instrumentation that emits web_vital.inp reports it. */
+const VITALS_WITH_INP: Array<WebVital> = VITALS.map((v: WebVital): WebVital => {
+  return v.key === "inp"
+    ? { ...v, value: 260, metricName: "web_vital.inp" }
+    : v;
+});
+
+const NO_ROUTES: WebVitalByRoute = {
+  routeAttribute: null,
+  routes: [],
+  totalRoutes: null,
+  failed: false,
+};
+
 function sessions(count: number): Array<{ sessionId: string }> {
   return Array.from({ length: count }, (_: unknown, i: number) => {
     return { sessionId: `s-${i}` };
@@ -419,6 +439,7 @@ interface Scenario {
   pageLoadStats?: Promise<SpanNameStats> | undefined;
   signals?: Promise<LogAndExceptionSignals> | undefined;
   vitals?: Promise<Array<WebVital>> | undefined;
+  inpByRoute?: Promise<WebVitalByRoute> | undefined;
   sessionList?: Promise<unknown> | undefined;
 }
 
@@ -444,6 +465,9 @@ function arrange(scenario: Scenario = {}): void {
   fetchWebVitalsMock.mockImplementation(() => {
     return scenario.vitals ?? Promise.resolve(VITALS);
   });
+  fetchWebVitalByRouteMock.mockImplementation(() => {
+    return scenario.inpByRoute ?? Promise.resolve(NO_ROUTES);
+  });
   fetchSessionReplayListMock.mockImplementation(() => {
     return (
       scenario.sessionList ??
@@ -560,6 +584,7 @@ beforeEach(() => {
     fetchSpanMetricsMock,
     fetchSpanNameStatsMock,
     fetchWebVitalsMock,
+    fetchWebVitalByRouteMock,
     fetchSignalsMock,
     fetchSessionReplayListMock,
     lineChartMock,
@@ -1193,3 +1218,105 @@ describe("RUM overview: refreshing", () => {
     expectTile("Page loads", "42", "3 failed");
   });
 });
+
+/*
+ * Issue #3975. The app-wide INP mixes every view of a single-page app
+ * together; the per-route card is where the slow one shows up.
+ */
+describe("RUM overview: INP by route", () => {
+  test("is not shown, and not asked for, until INP has reported", async () => {
+    arrange();
+    await renderPage();
+
+    expect(fetchWebVitalByRouteMock).not.toHaveBeenCalled();
+    expect(screen.queryByText("INP by route")).toBeNull();
+  });
+
+  test("asks for INP per route under the name the vitals card found it by", async () => {
+    arrange({ vitals: Promise.resolve(VITALS_WITH_INP) });
+    await renderPage();
+
+    expect(fetchWebVitalByRouteMock).toHaveBeenCalledTimes(1);
+
+    const request: {
+      primaryEntityId: ObjectID;
+      metricName: string;
+      start: Date;
+      end: Date;
+    } = fetchWebVitalByRouteMock.mock.calls[0]![0] as {
+      primaryEntityId: ObjectID;
+      metricName: string;
+      start: Date;
+      end: Date;
+    };
+
+    expect(request.metricName).toBe("web_vital.inp");
+    expect(request.primaryEntityId.toString()).toBe(MODEL_ID);
+    expect(request.end.getTime()).toBeGreaterThan(request.start.getTime());
+  });
+
+  test("lists the routes slowest first, each rated, and explains itself", async () => {
+    arrange({
+      vitals: Promise.resolve(VITALS_WITH_INP),
+      inpByRoute: Promise.resolve({
+        routeAttribute: "app.route",
+        routes: [
+          { route: "/products/:id", value: 620 },
+          { route: "/cart", value: 240 },
+          { route: "/", value: 90 },
+        ],
+        totalRoutes: 12,
+        failed: false,
+      }),
+    });
+    await renderPage();
+
+    expect(screen.getByText("INP by route")).toBeInTheDocument();
+    expect(
+      await tooltipTextOf(
+        screen.getByRole("button", { name: "About INP by route" }),
+      ),
+    ).toBe(RUM_METRIC_DESCRIPTIONS.inpByRoute);
+
+    const rows: Array<HTMLElement> = screen.getAllByTestId(
+      "web-vital-route-row",
+    );
+
+    expect(
+      rows.map((row: HTMLElement): string => {
+        return row.textContent || "";
+      }),
+    ).toEqual([
+      "/products/:id620 msPoor",
+      "/cart240 msNeeds work",
+      "/90 msGood",
+    ]);
+    expect(screen.getByText("(app.route)")).toBeInTheDocument();
+    expect(screen.getByText(/The 3 slowest of 12/)).toBeInTheDocument();
+  });
+
+  test("INP without a route attribute says how to add one", async () => {
+    arrange({ vitals: Promise.resolve(VITALS_WITH_INP) });
+    await renderPage();
+
+    expect(
+      screen.getByText("INP is reported, but not per route"),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole("link", { name: "How to measure INP per route" }),
+    ).toHaveAttribute("href", "/docs/rum/web-vitals#single-page-apps");
+  });
+
+  test("a failed lookup says so rather than claiming there are no routes", async () => {
+    arrange({
+      vitals: Promise.resolve(VITALS_WITH_INP),
+      inpByRoute: Promise.resolve({ ...NO_ROUTES, failed: true }),
+    });
+    await renderPage();
+
+    expect(
+      screen.getByText("Could not load INP by route."),
+    ).toBeInTheDocument();
+    expect(screen.queryByText("INP is reported, but not per route")).toBeNull();
+  });
+});

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

@@ -7,7 +7,14 @@ import {
   jest,
   test,
 } from "@jest/globals";
-import { cleanup, render, screen, waitFor } from "@testing-library/react";
+import {
+  RenderResult,
+  act,
+  cleanup,
+  render,
+  screen,
+  waitFor,
+} from "@testing-library/react";
 import * as React from "react";
 import getJestMockFunction, { MockFunction } from "../../MockType";
 
@@ -41,6 +48,25 @@ jest.mock("../../../UI/Utils/ModelAPI/ModelAPI", () => {
     },
   };
 });
+/*
+ * The drawer resolves its links from the full row the entity endpoint
+ * returns; the fake answers with the node under test.
+ */
+const fetchEntityDetailMock: MockFunction = getJestMockFunction();
+jest.mock(
+  "../../../../App/FeatureSet/Dashboard/src/Components/Topology/EntityDetailApi",
+  () => {
+    return {
+      __esModule: true,
+      ...(jest.requireActual(
+        "../../../../App/FeatureSet/Dashboard/src/Components/Topology/EntityDetailApi",
+      ) as Record<string, unknown>),
+      fetchEntityDetail: (...args: Array<any>) => {
+        return fetchEntityDetailMock(...args);
+      },
+    };
+  },
+);
 jest.mock("../../../UI/Utils/Translation", () => {
   return {
     __esModule: true,
@@ -77,8 +103,12 @@ import {
   resolveTypedRowLink,
 } from "../../../../App/FeatureSet/Dashboard/src/Components/Inventory/ResolveTypedRowLink";
 import EntityDetailPanel from "../../../../App/FeatureSet/Dashboard/src/Components/Topology/EntityDetailPanel";
+import {
+  EntityDetail,
+  EntityDetailData,
+  emptyConnectionSection,
+} from "../../../../App/FeatureSet/Dashboard/src/Components/Topology/EntityDetailApi";
 import InventoryItem from "../../../Models/DatabaseModels/InventoryItem";
-import InventoryItemRelationship from "../../../Models/DatabaseModels/InventoryItemRelationship";
 import StartsWith from "../../../Types/BaseDatabase/StartsWith";
 import { JSONObject } from "../../../Types/JSON";
 import ObjectID from "../../../Types/ObjectID";
@@ -1002,23 +1032,78 @@ describe("resolveDatabaseServerLink", () => {
 });
 
 describe("the Service Map detail drawer", () => {
-  function renderPanel(entity: InventoryItem): void {
-    render(
+  const RANGE_START: Date = new Date("2026-09-26T10:00:00.000Z");
+
+  function detailOf(
+    node: InventoryItem,
+    id: string = "1a1a0000-0000-4000-8000-000000000001",
+  ): EntityDetail {
+    const detail: EntityDetail = {
+      id: id,
+      entityKey: node.entityKey!,
+      entityType: node.entityType!,
+    };
+    if (node.displayName) {
+      detail.displayName = node.displayName;
+    }
+    if (node.identifyingAttributes) {
+      detail.identifyingAttributes = node.identifyingAttributes;
+    }
+    if (node.descriptiveAttributes) {
+      detail.descriptiveAttributes = node.descriptiveAttributes;
+    }
+    return detail;
+  }
+
+  function answerWith(node: InventoryItem, id?: string): EntityDetailData {
+    return {
+      rangeStart: RANGE_START,
+      entity: detailOf(node, id),
+      sections: {
+        calls: emptyConnectionSection(),
+        calledBy: emptyConnectionSection(),
+        runsOn: emptyConnectionSection(),
+        related: emptyConnectionSection(),
+      },
+      isScanLimited: false,
+    };
+  }
+
+  function endpointLookups(): Array<GetListArgs> {
+    return calls().filter((args: GetListArgs): boolean => {
+      return args.modelType.name === "DatabaseServerEndpoint";
+    });
+  }
+
+  function panelFor(node: InventoryItem, rangeStart: Date): React.ReactElement {
+    /* A map hands over what it drew: key, type and name — no attributes. */
+    return (
       <EntityDetailPanel
-        entity={entity}
-        relationships={[] as Array<InventoryItemRelationship>}
-        entityByKey={new Map<string, InventoryItem>([["db-node", entity]])}
+        entity={{
+          entityKey: node.entityKey!,
+          entityType: node.entityType,
+          displayName: node.displayName,
+        }}
+        rangeStart={rangeStart}
         metricsWindowSeconds={60}
         onClose={() => {
           return undefined;
         }}
-        onFocus={() => {
-          return undefined;
-        }}
-      />,
+      />
     );
   }
 
+  function renderPanel(node: InventoryItem): RenderResult {
+    fetchEntityDetailMock.mockImplementation(async () => {
+      return answerWith(node);
+    });
+    return render(panelFor(node, RANGE_START));
+  }
+
+  beforeEach(() => {
+    fetchEntityDetailMock.mockReset();
+  });
+
   test("offers 'Open database' for a database node a DatabaseServer owns", async () => {
     useTable([{ owner: DATABASE_ID, endpoint: "db.prod.example.com:5432" }]);
 
@@ -1074,12 +1159,113 @@ describe("the Service Map detail drawer", () => {
       entityType: EntityType.Container,
     } as InventoryItem);
 
+    await screen.findByText("Inventory details");
     expect(screen.queryByText("Open database")).not.toBeInTheDocument();
-    const endpointLookups: Array<GetListArgs> = calls().filter(
-      (args: GetListArgs): boolean => {
-        return args.modelType.name === "DatabaseServerEndpoint";
+    expect(endpointLookups()).toHaveLength(0);
+  });
+
+  test("resolves from the full row: the preview alone names no endpoint", async () => {
+    useTable([{ owner: DATABASE_ID, endpoint: "db.prod.example.com:5432" }]);
+    const node: InventoryItem = databaseNode({
+      "db.system.name": "postgresql",
+      "server.address": "db.prod.example.com",
+    });
+    let answer: (value: EntityDetailData) => void = () => {
+      return undefined;
+    };
+    fetchEntityDetailMock.mockImplementation(() => {
+      return new Promise<EntityDetailData>(
+        (resolve: (value: EntityDetailData) => void) => {
+          answer = resolve;
+        },
+      );
+    });
+
+    render(panelFor(node, RANGE_START));
+    /* Only the preview so far: a database type, but no address to resolve. */
+    expect(endpointLookups()).toHaveLength(0);
+
+    await act(async () => {
+      answer(answerWith(node));
+    });
+
+    expect(await screen.findByText("Open database")).toBeInTheDocument();
+    expect(endpointLookups()[0]!.query["endpoint"]).toBe(
+      "db.prod.example.com:5432",
+    );
+  });
+
+  test("looks the database up once per row, not once per range", async () => {
+    useTable([{ owner: DATABASE_ID, endpoint: "db.prod.example.com:5432" }]);
+    const node: InventoryItem = databaseNode({
+      "db.system.name": "postgresql",
+      "server.address": "db.prod.example.com",
+    });
+
+    const view: RenderResult = renderPanel(node);
+    await screen.findByText("Open database");
+    const lookups: number = endpointLookups().length;
+    expect(lookups).toBeGreaterThan(0);
+
+    view.rerender(panelFor(node, new Date("2026-09-26T11:00:00.000Z")));
+    await waitFor(() => {
+      expect(fetchEntityDetailMock).toHaveBeenCalledTimes(2);
+    });
+    expect(await screen.findByText("Open database")).toBeInTheDocument();
+
+    expect(endpointLookups()).toHaveLength(lookups);
+  });
+
+  test("moving the open drawer to another database never shows the first one's link", async () => {
+    useTable([{ owner: DATABASE_ID, endpoint: "db.prod.example.com:5432" }]);
+    const orders: InventoryItem = databaseNode({
+      "db.system.name": "postgresql",
+      "server.address": "db.prod.example.com",
+    });
+    /* Another database on the map, which no DatabaseServer owns. */
+    const reports: InventoryItem = {
+      ...databaseNode({
+        "db.system.name": "postgresql",
+        "server.address": "reports.example.com",
+      }),
+      entityKey: "reports-node",
+      displayName: "reports",
+    } as unknown as InventoryItem;
+    let answerReports: (value: EntityDetailData) => void = () => {
+      return undefined;
+    };
+    fetchEntityDetailMock.mockImplementation(
+      (target: { entityKey: string }) => {
+        if (target.entityKey !== "reports-node") {
+          return Promise.resolve(answerWith(orders));
+        }
+        return new Promise<EntityDetailData>(
+          (resolve: (value: EntityDetailData) => void) => {
+            answerReports = resolve;
+          },
+        );
       },
     );
-    expect(endpointLookups).toHaveLength(0);
+
+    const view: RenderResult = render(panelFor(orders, RANGE_START));
+    expect(
+      (await screen.findByText("Open database")).closest("a"),
+    ).toHaveAttribute("href", databasePage(DATABASE_ID));
+
+    /* The same drawer, now for the other database: no remount. */
+    view.rerender(panelFor(reports, RANGE_START));
+    expect(screen.queryByText("Open database")).not.toBeInTheDocument();
+
+    const lookupsBefore: number = endpointLookups().length;
+    await act(async () => {
+      answerReports(
+        answerWith(reports, "1a1a0000-0000-4000-8000-000000000002"),
+      );
+    });
+    await waitFor(() => {
+      expect(endpointLookups().length).toBeGreaterThan(lookupsBefore);
+    });
+    await screen.findByText("Inventory details");
+    expect(screen.queryByText("Open database")).not.toBeInTheDocument();
   });
 });