@oneuptime/common 13.0.3 → 13.0.5

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

@@ -0,0 +1,409 @@
+import "@testing-library/jest-dom";
+import {
+  afterEach,
+  beforeEach,
+  describe,
+  expect,
+  jest,
+  test,
+} from "@jest/globals";
+import {
+  act,
+  cleanup,
+  render,
+  RenderResult,
+  screen,
+} from "@testing-library/react";
+import React, { ReactElement } from "react";
+import getJestMockFunction, { MockFunction } from "../../MockType";
+
+/*
+ * ModelPage hosts a layout route: the side menu and the "Incident - <title>"
+ * heading stay mounted while the <Outlet/> below them changes. It used to read
+ * the model once, on mount. A link from one incident to another on the same
+ * route (the AI report links related incidents) kept the layout mounted, so
+ * the heading, the document title and the header labels all stayed on the
+ * incident the reader had left, while the page below showed the new one.
+ *
+ * These tests render the real ModelPage and Page against a fake API and
+ * switch the model id the way a layout does: same component, new id.
+ */
+
+const getItemMock: MockFunction = getJestMockFunction();
+
+jest.mock("react-i18next", () => {
+  return {
+    useTranslation: () => {
+      return {
+        t: (key: string, options?: { defaultValue?: string }): string => {
+          return options?.defaultValue ?? key;
+        },
+      };
+    },
+  };
+});
+
+jest.mock("../../../UI/Utils/ModelAPI/ModelAPI", () => {
+  return {
+    __esModule: true,
+    default: {
+      getItem: (...args: Array<unknown>) => {
+        return getItemMock(...args);
+      },
+    },
+  };
+});
+
+import ModelPage from "../../../UI/Components/Page/ModelPage";
+import Incident from "../../../Models/DatabaseModels/Incident";
+import Label from "../../../Models/DatabaseModels/Label";
+import ObjectID from "../../../Types/ObjectID";
+
+const INCIDENT_A: string = "11111111-1111-4111-8111-111111111111";
+const INCIDENT_B: string = "22222222-2222-4222-8222-222222222222";
+
+interface Deferred<T> {
+  promise: Promise<T>;
+  resolve: (value: T) => void;
+  reject: (reason: unknown) => void;
+}
+
+function createDeferred<T>(): Deferred<T> {
+  let resolve: (value: T) => void = (): void => {};
+  let reject: (reason: unknown) => void = (): void => {};
+
+  const promise: Promise<T> = new Promise<T>(
+    (
+      promiseResolve: (value: T) => void,
+      promiseReject: (reason: unknown) => void,
+    ) => {
+      resolve = promiseResolve;
+      reject = promiseReject;
+    },
+  );
+
+  return { promise: promise, resolve: resolve, reject: reject };
+}
+
+type BuildIncidentFunction = (
+  id: string,
+  title: string,
+  labelNames: Array<string>,
+) => Incident;
+
+const buildIncident: BuildIncidentFunction = (
+  id: string,
+  title: string,
+  labelNames: Array<string>,
+): Incident => {
+  const incident: Incident = new Incident();
+  incident.id = new ObjectID(id);
+  incident.title = title;
+  incident.labels = labelNames.map((name: string, index: number): Label => {
+    const label: Label = new Label();
+    label.id = new ObjectID(`33333333-3333-4333-8333-33333333333${index}`);
+    label.name = name;
+    return label;
+  });
+
+  return incident;
+};
+
+// Every render and mount of the page body, with the id it was given.
+const childRenders: Array<string> = [];
+const childMounts: Array<string> = [];
+
+const ChildPage: (props: { incidentId: string }) => ReactElement = (props: {
+  incidentId: string;
+}): ReactElement => {
+  childRenders.push(props.incidentId);
+
+  React.useEffect(() => {
+    childMounts.push(props.incidentId);
+  }, []);
+
+  return <div data-testid="child-page">{`Body of ${props.incidentId}`}</div>;
+};
+
+type RenderLayoutFunction = (incidentId: string) => ReactElement;
+
+/*
+ * What a layout route renders: a fresh ObjectID built from the route params
+ * on every render, a side menu, and the routed page as the child.
+ */
+const layoutFor: RenderLayoutFunction = (incidentId: string): ReactElement => {
+  return (
+    <ModelPage
+      title="Incident"
+      modelType={Incident}
+      modelId={new ObjectID(incidentId)}
+      modelNameField="title"
+      sideMenu={<nav data-testid="side-menu">{`Menu for ${incidentId}`}</nav>}
+    >
+      <ChildPage incidentId={incidentId} />
+    </ModelPage>
+  );
+};
+
+async function flush(): Promise<void> {
+  await act(async () => {
+    for (let index: number = 0; index < 10; index++) {
+      await Promise.resolve();
+    }
+  });
+}
+
+function heading(): HTMLElement {
+  return screen.getByRole("heading", { level: 1 });
+}
+
+function requestedIds(): Array<string> {
+  return getItemMock.mock.calls.map((call: Array<unknown>): string => {
+    return (call[0] as { id: ObjectID }).id.toString();
+  });
+}
+
+beforeEach(() => {
+  getItemMock.mockReset();
+  childRenders.length = 0;
+  childMounts.length = 0;
+  document.title = "OneUptime";
+});
+
+afterEach(() => {
+  cleanup();
+});
+
+describe("ModelPage", () => {
+  test("reads the model's title and labels once and shows them over the page", async () => {
+    getItemMock.mockResolvedValue(
+      buildIncident(INCIDENT_A, "Checkout is slow", ["production"]) as never,
+    );
+
+    const view: RenderResult = render(layoutFor(INCIDENT_A));
+
+    // Loading: the heading is the plain title and the page body waits.
+    expect(heading()).toHaveTextContent(/^Incident$/);
+    expect(screen.getByTestId("bar-loader")).toBeInTheDocument();
+    expect(screen.queryByTestId("child-page")).toBeNull();
+
+    await flush();
+
+    expect(heading()).toHaveTextContent("Incident - Checkout is slow");
+    expect(screen.getByText("production")).toBeInTheDocument();
+    expect(screen.getByTestId("child-page")).toHaveTextContent(
+      `Body of ${INCIDENT_A}`,
+    );
+    expect(document.title).toBe("OneUptime | Incident - Checkout is slow");
+
+    expect(getItemMock).toHaveBeenCalledTimes(1);
+    expect(getItemMock.mock.calls[0]![0]).toMatchObject({
+      modelType: Incident,
+      select: {
+        title: true,
+        labels: { _id: true, name: true, color: true },
+      },
+    });
+
+    // A re-render builds a new ObjectID for the same id: no second read.
+    view.rerender(layoutFor(INCIDENT_A));
+    await flush();
+
+    expect(getItemMock).toHaveBeenCalledTimes(1);
+    expect(screen.queryByTestId("bar-loader")).toBeNull();
+    expect(childMounts).toEqual([INCIDENT_A]);
+  });
+
+  test("moving to another model on the same route reads it and replaces the heading, labels and document title", async () => {
+    const second: Deferred<Incident> = createDeferred<Incident>();
+
+    getItemMock
+      .mockResolvedValueOnce(
+        buildIncident(INCIDENT_A, "Checkout is slow", ["production"]) as never,
+      )
+      .mockReturnValueOnce(second.promise as never);
+
+    const view: RenderResult = render(layoutFor(INCIDENT_A));
+    await flush();
+
+    expect(heading()).toHaveTextContent("Incident - Checkout is slow");
+
+    view.rerender(layoutFor(INCIDENT_B));
+
+    // Synchronously, before any effect: nothing of the old incident is left.
+    expect(heading()).toHaveTextContent(/^Incident$/);
+    expect(screen.queryByText("Checkout is slow")).toBeNull();
+    expect(screen.queryByText("production")).toBeNull();
+    expect(screen.getByTestId("bar-loader")).toBeInTheDocument();
+    expect(screen.queryByTestId("child-page")).toBeNull();
+    // The side menu is part of the layout and stays, pointing at the new id.
+    expect(screen.getByTestId("side-menu")).toHaveTextContent(
+      `Menu for ${INCIDENT_B}`,
+    );
+
+    await flush();
+
+    expect(requestedIds()).toEqual([INCIDENT_A, INCIDENT_B]);
+
+    await act(async () => {
+      second.resolve(
+        buildIncident(INCIDENT_B, "Payments failing", ["billing"]),
+      );
+    });
+    await flush();
+
+    expect(heading()).toHaveTextContent("Incident - Payments failing");
+    expect(screen.getByText("billing")).toBeInTheDocument();
+    expect(screen.queryByText("production")).toBeNull();
+    expect(document.title).toBe("OneUptime | Incident - Payments failing");
+    expect(screen.getByTestId("child-page")).toHaveTextContent(
+      `Body of ${INCIDENT_B}`,
+    );
+  });
+
+  test("the page body never renders for the new model under the old heading, and mounts once per model", async () => {
+    const second: Deferred<Incident> = createDeferred<Incident>();
+
+    getItemMock
+      .mockResolvedValueOnce(
+        buildIncident(INCIDENT_A, "Checkout is slow", []) as never,
+      )
+      .mockReturnValueOnce(second.promise as never);
+
+    const view: RenderResult = render(layoutFor(INCIDENT_A));
+    await flush();
+
+    view.rerender(layoutFor(INCIDENT_B));
+    await flush();
+
+    expect(childRenders).not.toContain(INCIDENT_B);
+
+    await act(async () => {
+      second.resolve(buildIncident(INCIDENT_B, "Payments failing", []));
+    });
+    await flush();
+
+    expect(childRenders).toContain(INCIDENT_B);
+    // Remounted for the new model, so nothing the old page held carries over.
+    expect(childMounts).toEqual([INCIDENT_A, INCIDENT_B]);
+    expect(getItemMock).toHaveBeenCalledTimes(2);
+  });
+
+  test("a slow read of the model the reader already left cannot overwrite the new one", async () => {
+    const first: Deferred<Incident> = createDeferred<Incident>();
+    const second: Deferred<Incident> = createDeferred<Incident>();
+
+    getItemMock
+      .mockReturnValueOnce(first.promise as never)
+      .mockReturnValueOnce(second.promise as never);
+
+    const view: RenderResult = render(layoutFor(INCIDENT_A));
+    await flush();
+
+    view.rerender(layoutFor(INCIDENT_B));
+    await flush();
+
+    // The old model answers first: still loading the new one.
+    await act(async () => {
+      first.resolve(buildIncident(INCIDENT_A, "Left behind", ["old"]));
+    });
+    await flush();
+
+    expect(heading()).toHaveTextContent(/^Incident$/);
+    expect(screen.queryByText("Left behind")).toBeNull();
+    expect(screen.queryByTestId("child-page")).toBeNull();
+
+    await act(async () => {
+      second.resolve(buildIncident(INCIDENT_B, "On screen now", ["new"]));
+    });
+    await flush();
+
+    expect(heading()).toHaveTextContent("Incident - On screen now");
+    expect(screen.getByText("new")).toBeInTheDocument();
+    expect(screen.queryByText("old")).toBeNull();
+  });
+
+  test("a slow read that answers after the new model loaded is ignored too", async () => {
+    const first: Deferred<Incident> = createDeferred<Incident>();
+
+    getItemMock
+      .mockReturnValueOnce(first.promise as never)
+      .mockResolvedValueOnce(
+        buildIncident(INCIDENT_B, "On screen now", []) as never,
+      );
+
+    const view: RenderResult = render(layoutFor(INCIDENT_A));
+    await flush();
+
+    view.rerender(layoutFor(INCIDENT_B));
+    await flush();
+
+    expect(heading()).toHaveTextContent("Incident - On screen now");
+
+    await act(async () => {
+      first.resolve(buildIncident(INCIDENT_A, "Left behind", []));
+    });
+    await flush();
+
+    expect(heading()).toHaveTextContent("Incident - On screen now");
+    expect(screen.getByTestId("child-page")).toHaveTextContent(
+      `Body of ${INCIDENT_B}`,
+    );
+  });
+
+  test("an error reading one model does not stick to the next", async () => {
+    getItemMock
+      .mockRejectedValueOnce(new Error("Not allowed") as never)
+      .mockResolvedValueOnce(
+        buildIncident(INCIDENT_B, "Payments failing", []) as never,
+      );
+
+    const view: RenderResult = render(layoutFor(INCIDENT_A));
+    await flush();
+
+    expect(screen.getByText("Not allowed")).toBeInTheDocument();
+    expect(screen.queryByTestId("child-page")).toBeNull();
+
+    view.rerender(layoutFor(INCIDENT_B));
+    await flush();
+
+    expect(screen.queryByText("Not allowed")).toBeNull();
+    expect(heading()).toHaveTextContent("Incident - Payments failing");
+    expect(screen.getByTestId("child-page")).toBeInTheDocument();
+  });
+
+  test("a model the reader cannot read says so instead of loading forever", async () => {
+    getItemMock.mockResolvedValue(null as never);
+
+    render(layoutFor(INCIDENT_A));
+    await flush();
+
+    expect(
+      screen.getByText(
+        "Cannot load incident. It could be because you don't have enough permissions to read this incident.",
+      ),
+    ).toBeInTheDocument();
+    expect(screen.queryByTestId("bar-loader")).toBeNull();
+  });
+
+  test("a read still in flight when the page unmounts changes nothing", async () => {
+    const first: Deferred<Incident> = createDeferred<Incident>();
+
+    getItemMock.mockReturnValueOnce(first.promise as never);
+
+    const view: RenderResult = render(layoutFor(INCIDENT_A));
+    await flush();
+
+    expect(document.title).toBe("OneUptime | Incident");
+
+    view.unmount();
+
+    await act(async () => {
+      first.resolve(buildIncident(INCIDENT_A, "Too late", []));
+    });
+    await flush();
+
+    expect(document.title).toBe("OneUptime | Incident");
+    expect(screen.queryByText(/Too late/)).toBeNull();
+  });
+});

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

@@ -52,6 +52,8 @@ describe("Pagination in a Table", () => {
     currentPageNumber?: number;
     totalItemsCount?: number;
     itemsOnPage?: number;
+    itemsOnPageOptions?: Array<number>;
+    paginationDataTestId?: string;
     rowCount?: number;
   }) => MockFunction;
 
@@ -59,6 +61,8 @@ describe("Pagination in a Table", () => {
     currentPageNumber?: number;
     totalItemsCount?: number;
     itemsOnPage?: number;
+    itemsOnPageOptions?: Array<number>;
+    paginationDataTestId?: string;
     rowCount?: number;
   }): MockFunction => {
     const onNavigateToPage: MockFunction = getJestMockFunction();
@@ -71,6 +75,8 @@ describe("Pagination in a Table", () => {
         currentPageNumber={overrides?.currentPageNumber ?? 1}
         totalItemsCount={overrides?.totalItemsCount ?? 240}
         itemsOnPage={overrides?.itemsOnPage ?? 10}
+        itemsOnPageOptions={overrides?.itemsOnPageOptions}
+        paginationDataTestId={overrides?.paginationDataTestId}
         onNavigateToPage={
           onNavigateToPage as unknown as (
             pageNumber: number,
@@ -107,6 +113,25 @@ describe("Pagination in a Table", () => {
     expect(onNavigateToPage).toHaveBeenCalledWith(1, 25);
   });
 
+  it("forwards a consumer's page sizes and stable id to the shared footer", () => {
+    renderTable({
+      itemsOnPage: 20,
+      itemsOnPageOptions: [20, 50, 100],
+      paginationDataTestId: "custom-table-pagination",
+    });
+
+    expect(screen.getByTestId("custom-table-pagination")).toBeInTheDocument();
+    expect(
+      Array.from(
+        screen
+          .getByTestId("pagination-items-on-page-select")
+          .querySelectorAll("option"),
+      ).map((option: Element): string | null => {
+        return option.getAttribute("value");
+      }),
+    ).toEqual(["20", "50", "100"]);
+  });
+
   it("jumps straight to a page from the table footer", () => {
     const onNavigateToPage: MockFunction = renderTable();
 

package/Tests/UI/Components/ResourceFacetConfigs.test.ts

@@ -0,0 +1,172 @@
+import { buildResourceFacetConfigs } from "../../../UI/Components/TelemetryViewer/ResourceFacetConfigs";
+import { FacetConfig } from "../../../UI/Components/TelemetryViewer/types";
+import {
+  RESOURCE_FACET_CATALOG,
+  RESOURCE_FACET_CATALOG_KEYS,
+  ResourceFacetDefinition,
+} from "../../../Types/Telemetry/ResourceFacetCatalog";
+import IconProp from "../../../Types/Icon/IconProp";
+import { describe, expect, test } from "@jest/globals";
+
+/*
+ * buildResourceFacetConfigs is how the Traces and Exceptions explorers get a
+ * facet section for every resource type in the catalog, instead of the four
+ * they used to wire by hand. These pin the shape each config must have for
+ * the sidebar to fold it away while empty and search it on the server.
+ */
+
+describe("buildResourceFacetConfigs", () => {
+  test("returns one config per catalog entry, in catalog order", () => {
+    const configs: Array<FacetConfig> = buildResourceFacetConfigs({
+      basePriority: 2,
+    });
+
+    expect(
+      configs.map((config: FacetConfig): string => {
+        return config.key;
+      }),
+    ).toEqual([...RESOURCE_FACET_CATALOG_KEYS]);
+    expect(configs).toHaveLength(12);
+  });
+
+  test("covers every resource type, not only the original four", () => {
+    const keys: Array<string> = buildResourceFacetConfigs({
+      basePriority: 2,
+    }).map((config: FacetConfig): string => {
+      return config.key;
+    });
+
+    for (const key of [
+      "hostId",
+      "dockerHostId",
+      "podmanHostId",
+      "kubernetesClusterId",
+      "dockerSwarmClusterId",
+      "proxmoxClusterId",
+      "vmwareVCenterId",
+      "cephClusterId",
+      "serverlessFunctionId",
+      "cloudResourceId",
+      "rumApplicationId",
+      "iotFleetId",
+    ]) {
+      expect(keys).toContain(key);
+    }
+  });
+
+  test("titles, icons and empty-state nouns come from the catalog", () => {
+    const configs: Array<FacetConfig> = buildResourceFacetConfigs({
+      basePriority: 2,
+    });
+
+    RESOURCE_FACET_CATALOG.forEach(
+      (definition: ResourceFacetDefinition, index: number) => {
+        const config: FacetConfig = configs[index]!;
+        expect(config.title).toBe(definition.label);
+        expect(config.icon).toBe(definition.icon);
+        expect(config.emptyStateNoun).toBe(definition.pluralLabel);
+      },
+    );
+
+    expect(configs[1]!.title).toBe("Docker Host");
+    expect(configs[1]!.icon).toBe(IconProp.Docker);
+    expect(configs[1]!.emptyStateNoun).toBe("Docker Hosts");
+  });
+
+  test("every config is server-searchable and hides while empty", () => {
+    for (const config of buildResourceFacetConfigs({ basePriority: 2 })) {
+      expect(config.serverSearchable).toBe(true);
+      expect(config.hideWhenEmpty).toBe(true);
+    }
+  });
+
+  test.each([0, 1.5, 2, 5, 100])(
+    "priorities start at basePriority %p, strictly increase, and stay below the next whole step",
+    (basePriority: number) => {
+      const priorities: Array<number> = buildResourceFacetConfigs({
+        basePriority: basePriority,
+      }).map((config: FacetConfig): number => {
+        return config.priority as number;
+      });
+
+      expect(priorities[0]).toBe(basePriority);
+
+      for (let index: number = 1; index < priorities.length; index++) {
+        expect(priorities[index]!).toBeGreaterThan(priorities[index - 1]!);
+      }
+
+      for (const priority of priorities) {
+        expect(priority).toBeGreaterThanOrEqual(basePriority);
+        expect(priority).toBeLessThan(basePriority + 1);
+      }
+    },
+  );
+
+  test("sorting by priority keeps catalog order when mixed with neighbour facets", () => {
+    const configs: Array<FacetConfig> = [
+      { key: "statusCode", title: "Status", priority: 3 },
+      ...buildResourceFacetConfigs({ basePriority: 2 }),
+      { key: "primaryEntityId", title: "Service", priority: 1 },
+    ];
+
+    const sorted: Array<string> = [...configs]
+      .sort((a: FacetConfig, b: FacetConfig): number => {
+        return (a.priority ?? 100) - (b.priority ?? 100);
+      })
+      .map((config: FacetConfig): string => {
+        return config.key;
+      });
+
+    expect(sorted).toEqual([
+      "primaryEntityId",
+      ...RESOURCE_FACET_CATALOG_KEYS,
+      "statusCode",
+    ]);
+  });
+
+  test("valueDisplayMaps pass through per key and default to undefined", () => {
+    const hostNames: Record<string, string> = { h1: "web-1" };
+    const clusterNames: Record<string, string> = { c1: "prod" };
+
+    const configs: Array<FacetConfig> = buildResourceFacetConfigs({
+      basePriority: 2,
+      valueDisplayMaps: {
+        hostId: hostNames,
+        kubernetesClusterId: clusterNames,
+        notAResource: { x: "y" },
+      },
+    });
+
+    const byKey: Map<string, FacetConfig> = new Map<string, FacetConfig>(
+      configs.map((config: FacetConfig): [string, FacetConfig] => {
+        return [config.key, config];
+      }),
+    );
+
+    expect(byKey.get("hostId")!.valueDisplayMap).toBe(hostNames);
+    expect(byKey.get("kubernetesClusterId")!.valueDisplayMap).toBe(
+      clusterNames,
+    );
+    expect(byKey.get("proxmoxClusterId")!.valueDisplayMap).toBeUndefined();
+    expect(byKey.has("notAResource")).toBe(false);
+  });
+
+  test("no valueDisplayMaps leaves every map undefined", () => {
+    for (const config of buildResourceFacetConfigs({ basePriority: 2 })) {
+      expect(config.valueDisplayMap).toBeUndefined();
+      expect(config.valueColorMap).toBeUndefined();
+    }
+  });
+
+  test("each call returns fresh objects", () => {
+    const first: Array<FacetConfig> = buildResourceFacetConfigs({
+      basePriority: 2,
+    });
+    const second: Array<FacetConfig> = buildResourceFacetConfigs({
+      basePriority: 2,
+    });
+
+    expect(first).toEqual(second);
+    expect(first[0]).not.toBe(second[0]);
+  });
+});