@oneuptime/common 13.0.4 → 13.0.5

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

@@ -15,6 +15,8 @@ import {
   screen,
   waitFor,
 } from "@testing-library/react";
+import fs from "fs";
+import path from "path";
 import React from "react";
 import * as Router from "react-router-dom";
 import PageMap from "../../../../App/FeatureSet/Dashboard/src/Utils/PageMap";
@@ -229,6 +231,28 @@ const persistentSharedRouteBundles: Array<string> = [
   "TopologyRoutes",
 ];
 
+interface ProductRouteBundleCase {
+  page: PageMap;
+  module: string;
+}
+
+const productRouteBundles: Array<ProductRouteBundleCase> = [
+  { page: PageMap.MONITORS, module: "MonitorsRoutes" },
+  { page: PageMap.STATUS_PAGES, module: "StatusPagesRoutes" },
+  { page: PageMap.ON_CALL_DUTY, module: "OnCallDutyRoutes" },
+];
+
+interface ProductSwitchCase {
+  initial: ProductRouteBundleCase;
+  target: ProductRouteBundleCase;
+}
+
+const productSwitchCases: Array<ProductSwitchCase> = [
+  { initial: productRouteBundles[0]!, target: productRouteBundles[1]! },
+  { initial: productRouteBundles[1]!, target: productRouteBundles[2]! },
+  { initial: productRouteBundles[2]!, target: productRouteBundles[0]! },
+];
+
 interface PageCase {
   page: PageMap;
   module: string;
@@ -447,7 +471,7 @@ function mockSecondaryPage(module: string): void {
   });
 }
 
-function mockPersistentSharedRouteBundle(module: string): void {
+function mockRouteBundle(module: string): void {
   const moduleName: string = `Routes/${module}`;
 
   jest.doMock(`${dashboardSource}/Routes/${module}`, () => {
@@ -530,8 +554,13 @@ beforeEach(() => {
     mockSecondaryPage(module);
   }
 
-  for (const module of persistentSharedRouteBundles) {
-    mockPersistentSharedRouteBundle(module);
+  for (const module of new Set([
+    ...persistentSharedRouteBundles,
+    ...productRouteBundles.map((route: ProductRouteBundleCase): string => {
+      return route.module;
+    }),
+  ])) {
+    mockRouteBundle(module);
   }
 
   for (const module of [
@@ -607,8 +636,11 @@ afterEach(() => {
 });
 
 /*
- * `useRouterTransition: false` is how a caller asks to OBSERVE the Suspense
- * fallback at all.
+ * Production explicitly opts out of router transitions so a pending lazy
+ * product reveals the existing Suspense fallback instead of leaving the old
+ * product painted. Keep false as this helper's default so navigation tests
+ * exercise the production scheduler. A test can still pass true when it
+ * deliberately needs React Router's concurrent behavior.
  *
  * Every react-router v7 router wraps its location update in
  * React.startTransition unless it is told not to (BrowserRouter and
@@ -623,7 +655,7 @@ afterEach(() => {
  * when it stopped being a flag; the parameter outlived its wiring and both
  * branches became the same render.
  */
-function renderApp(path: string, useRouterTransition: boolean = true): void {
+function renderApp(path: string, useRouterTransition: boolean = false): void {
   const App: React.FunctionComponent = (
     jest.requireActual(`${dashboardSource}/App`) as {
       default: React.FunctionComponent;
@@ -640,7 +672,32 @@ function renderApp(path: string, useRouterTransition: boolean = true): void {
   );
 }
 
+function expectPageNotVisible(pageText: string): void {
+  const page: HTMLElement | null = screen.queryByText(pageText);
+
+  if (page) {
+    expect(page).not.toBeVisible();
+  }
+}
+
 describe("dashboard secondary page loading", () => {
+  test("production BrowserRouter keeps route updates synchronous so Suspense can reveal the page loader", () => {
+    const indexSource: string = fs.readFileSync(
+      path.resolve(
+        __dirname,
+        "../../../../App/FeatureSet/Dashboard/src/Index.tsx",
+      ),
+      "utf8",
+    );
+    const browserRouterTags: Array<string> =
+      indexSource.match(/<BrowserRouter\b[^>]*>/g) || [];
+
+    expect(browserRouterTags).toHaveLength(1);
+    expect(browserRouterTags[0]).toMatch(
+      /\buseTransitions\s*=\s*\{\s*false\s*\}/,
+    );
+  });
+
   test(
     "renders Home without loading any secondary leaf modules",
     async () => {
@@ -734,6 +791,96 @@ describe("dashboard secondary page loading", () => {
     ]);
   });
 
+  test.each(productSwitchCases)(
+    "replaces a pending $initial.module product with the loader before $target.module is ready",
+    async (routeCase: ProductSwitchCase) => {
+      const gate: SuspensionGate = createSuspensionGate();
+      suspendedModule = "Routes/" + routeCase.target.module;
+      pageSuspensionGate = gate;
+
+      renderApp(pathFor(routeCase.initial.page));
+
+      const initialModuleName: string = "Routes/" + routeCase.initial.module;
+      const targetModuleName: string = "Routes/" + routeCase.target.module;
+
+      expect(await screen.findByText(initialModuleName)).toBeVisible();
+      expect(screen.queryByTestId("page-loader")).not.toBeInTheDocument();
+
+      await act(async () => {
+        navigateHook(pathFor(routeCase.target.page));
+      });
+
+      expect(screen.getByTestId("page-loader")).toBeVisible();
+      expect(screen.getByText("Dashboard shell")).toBeInTheDocument();
+      expectPageNotVisible(initialModuleName);
+      expectPageNotVisible(targetModuleName);
+
+      await act(async () => {
+        gate.resolve();
+        await gate.promise;
+      });
+
+      expect(await screen.findByText(targetModuleName)).toBeInTheDocument();
+      expect(screen.queryByTestId("page-loader")).not.toBeInTheDocument();
+      expectPageNotVisible(initialModuleName);
+    },
+  );
+
+  test("keeps the loader on the latest product when navigating again before the first product is ready", async () => {
+    const statusPagesGate: SuspensionGate = createSuspensionGate();
+    suspendedModule = "Routes/StatusPagesRoutes";
+    pageSuspensionGate = statusPagesGate;
+
+    renderApp(pathFor(PageMap.MONITORS));
+    expect(
+      await screen.findByText("Routes/MonitorsRoutes"),
+    ).toBeInTheDocument();
+
+    const statusPagesPath: string = pathFor(PageMap.STATUS_PAGES);
+    await act(async () => {
+      navigateHook(statusPagesPath);
+    });
+
+    expect(currentPath).toBe(statusPagesPath);
+    expect(screen.getByTestId("page-loader")).toBeVisible();
+    expect(screen.getByText("Dashboard shell")).toBeInTheDocument();
+    expectPageNotVisible("Routes/MonitorsRoutes");
+
+    const onCallGate: SuspensionGate = createSuspensionGate();
+    suspendedModule = "Routes/OnCallDutyRoutes";
+    pageSuspensionGate = onCallGate;
+
+    const onCallPath: string = pathFor(PageMap.ON_CALL_DUTY);
+    await act(async () => {
+      navigateHook(onCallPath);
+    });
+
+    expect(currentPath).toBe(onCallPath);
+    expect(screen.getByTestId("page-loader")).toBeVisible();
+    expectPageNotVisible("Routes/StatusPagesRoutes");
+
+    await act(async () => {
+      statusPagesGate.resolve();
+      await statusPagesGate.promise;
+    });
+
+    expect(currentPath).toBe(onCallPath);
+    expect(screen.getByTestId("page-loader")).toBeVisible();
+    expectPageNotVisible("Routes/StatusPagesRoutes");
+    expectPageNotVisible("Routes/OnCallDutyRoutes");
+
+    await act(async () => {
+      onCallGate.resolve();
+      await onCallGate.promise;
+    });
+
+    expect(
+      await screen.findByText("Routes/OnCallDutyRoutes"),
+    ).toBeInTheDocument();
+    expect(screen.queryByTestId("page-loader")).not.toBeInTheDocument();
+    expectPageNotVisible("Routes/StatusPagesRoutes");
+  });
+
   test.each(appRouteWiringCases)(
     "$family child routes stay inside their persistent layout in the real App route tree",
     async (routeCase: AppRouteWiringCase) => {

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

@@ -161,3 +161,168 @@ describe("topology connection details", () => {
     ).not.toBeInTheDocument();
   });
 });
+
+describe("service map details", () => {
+  const SERVICE: InventoryItem = {
+    entityKey: "svc",
+    displayName: "api",
+    entityType: EntityType.Service,
+    descriptiveAttributes: { "telemetry.sdk.language": "nodejs" },
+  } as unknown as InventoryItem;
+  const POD: InventoryItem = {
+    entityKey: "pod",
+    displayName: "api-6d4f8b9c7d-x2k9p",
+    entityType: EntityType.KubernetesPod,
+  } as InventoryItem;
+  const POSTGRES: InventoryItem = {
+    entityKey: "pg",
+    displayName: "orders",
+    entityType: EntityType.Database,
+    identifyingAttributes: { "db.system.name": "postgresql" },
+  } as unknown as InventoryItem;
+  const byKey: Map<string, InventoryItem> = new Map<string, InventoryItem>([
+    ["svc", SERVICE],
+    ["pod", POD],
+    ["pg", POSTGRES],
+  ]);
+  const relationships: Array<InventoryItemRelationship> = [
+    {
+      fromEntityKey: "svc",
+      toEntityKey: "pg",
+      relationshipType: EntityRelationshipType.DependsOn,
+      callCount: 60,
+      errorCount: 0,
+      avgDurationMs: 4,
+    },
+    {
+      fromEntityKey: "svc",
+      toEntityKey: "pod",
+      relationshipType: EntityRelationshipType.RunsOn,
+    },
+  ] as Array<InventoryItemRelationship>;
+
+  function renderService(
+    options: {
+      onOpenInfrastructure?: (key: string) => void;
+      onSelectEntity?: (key: string) => void;
+    } = {},
+  ): void {
+    render(
+      <EntityDetailPanel
+        entity={SERVICE}
+        relationships={relationships}
+        entityByKey={byKey}
+        metricsWindowSeconds={60}
+        traffic={{
+          inbound: { calls: 0, errors: 0, avgDurationMs: null },
+          outbound: { calls: 60, errors: 0, avgDurationMs: 4 },
+          statusLabel: "Entry point",
+          statusColor: "#6366f1",
+          subtitle: "Service · Node.js",
+        }}
+        onClose={() => {
+          return undefined;
+        }}
+        onFocus={() => {
+          return undefined;
+        }}
+        onSelectEntity={options.onSelectEntity}
+        onOpenInfrastructure={options.onOpenInfrastructure}
+      />,
+    );
+  }
+
+  test("leads with status and the traffic in both directions", () => {
+    renderService();
+    expect(screen.getByTestId("entity-detail-status")).toHaveTextContent(
+      "Entry point",
+    );
+    expect(
+      screen.getByText("Requests it answered").parentElement,
+    ).toHaveTextContent("None observed");
+    expect(screen.getByText("Calls it made").parentElement).toHaveTextContent(
+      "60/min",
+    );
+    expect(screen.getByText("Calls it made").parentElement).toHaveTextContent(
+      "4ms",
+    );
+  });
+
+  test("separates what it calls from where it runs", () => {
+    renderService();
+    expect(screen.getByTestId("entity-detail-calls")).toHaveTextContent(
+      "api depends on orders",
+    );
+    expect(screen.getByTestId("entity-detail-calls")).toHaveTextContent(
+      "Database",
+    );
+    expect(screen.getByTestId("entity-detail-runs-on")).toHaveTextContent(
+      "api runs on api-6d4f8b9c7d-x2k9p",
+    );
+    expect(
+      screen.queryByTestId("entity-detail-called-by"),
+    ).not.toBeInTheDocument();
+  });
+
+  test("placements open in the Infrastructure view, calls stay on the map", () => {
+    const onOpenInfrastructure: MockFunction = getJestMockFunction();
+    const onSelectEntity: MockFunction = getJestMockFunction();
+    renderService({ onOpenInfrastructure, onSelectEntity });
+    fireEvent.click(
+      screen.getByRole("button", {
+        name: "View details for api-6d4f8b9c7d-x2k9p",
+      }),
+    );
+    expect(onOpenInfrastructure).toHaveBeenCalledWith("pod");
+    fireEvent.click(
+      screen.getByRole("button", { name: "View details for orders" }),
+    );
+    expect(onSelectEntity).toHaveBeenCalledWith("pg");
+  });
+
+  test("a resource lists the services running on it as related infrastructure", () => {
+    render(
+      <EntityDetailPanel
+        entity={POD}
+        relationships={relationships}
+        entityByKey={byKey}
+        metricsWindowSeconds={60}
+        onClose={() => {
+          return undefined;
+        }}
+        onFocus={() => {
+          return undefined;
+        }}
+      />,
+    );
+    expect(screen.getByTestId("entity-detail-related")).toHaveTextContent(
+      "api runs on api-6d4f8b9c7d-x2k9p",
+    );
+    expect(
+      screen.queryByTestId("entity-detail-runs-on"),
+    ).not.toBeInTheDocument();
+  });
+
+  test("shows the attributes that identify a dependency", () => {
+    render(
+      <EntityDetailPanel
+        entity={POSTGRES}
+        relationships={relationships}
+        entityByKey={byKey}
+        metricsWindowSeconds={60}
+        onClose={() => {
+          return undefined;
+        }}
+        onFocus={() => {
+          return undefined;
+        }}
+      />,
+    );
+    expect(screen.getByText("Database engine").parentElement).toHaveTextContent(
+      "postgresql",
+    );
+    expect(screen.getByTestId("entity-detail-called-by")).toHaveTextContent(
+      "api depends on orders",
+    );
+  });
+});