@oneuptime/common 11.7.4 → 12.0.0

package/Tests/App/StatusPage/BulkAddStatusPageMonitors.test.ts

@@ -0,0 +1,343 @@
+import bulkAddStatusPageMonitors, {
+  BulkAddStatusPageMonitorsResult,
+} from "../../../../App/FeatureSet/Dashboard/src/Components/StatusPage/BulkAddStatusPageMonitors";
+import Monitor from "../../../Models/DatabaseModels/Monitor";
+import StatusPageResource from "../../../Models/DatabaseModels/StatusPageResource";
+import ObjectID from "../../../Types/ObjectID";
+import UptimePrecision from "../../../Types/StatusPage/UptimePrecision";
+import { describe, expect, jest, test } from "@jest/globals";
+
+const PROJECT_ID: ObjectID = new ObjectID(
+  "0198c8ec-2a1d-7f0c-9e75-384194160001",
+);
+const STATUS_PAGE_ID: ObjectID = new ObjectID(
+  "0198c8ec-2a1d-7f0c-9e75-384194160002",
+);
+const GROUP_ID: ObjectID = new ObjectID("0198c8ec-2a1d-7f0c-9e75-384194160003");
+
+const makeMonitor: (
+  id: string | null,
+  name?: string,
+  description?: string,
+) => Monitor = (
+  id: string | null,
+  name?: string,
+  description?: string,
+): Monitor => {
+  const monitor: Monitor = new Monitor();
+
+  if (id) {
+    monitor._id = id;
+  }
+
+  if (name !== undefined) {
+    monitor.name = name;
+  }
+
+  if (description !== undefined) {
+    monitor.description = description;
+  }
+  return monitor;
+};
+
+describe("bulkAddStatusPageMonitors", () => {
+  test("copies monitor identity and presentation fields into grouped resources", async () => {
+    const first: Monitor = makeMonitor(
+      "0198c8ec-2a1d-7f0c-9e75-384194160010",
+      "Checkout API",
+      "Processes customer checkouts",
+    );
+    const second: Monitor = makeMonitor(
+      "0198c8ec-2a1d-7f0c-9e75-384194160011",
+      "Billing Worker",
+      "Runs recurring invoices",
+    );
+    const created: Array<StatusPageResource> = [];
+
+    const result: BulkAddStatusPageMonitorsResult =
+      await bulkAddStatusPageMonitors({
+        monitors: [first, second],
+        projectId: PROJECT_ID,
+        statusPageId: STATUS_PAGE_ID,
+        statusPageGroupId: GROUP_ID,
+        createResource: async (resource: StatusPageResource): Promise<void> => {
+          created.push(resource);
+        },
+      });
+
+    expect(result.succeeded).toEqual([first, second]);
+    expect(result.failed).toEqual([]);
+    expect(created).toHaveLength(2);
+    expect(created[0]).toMatchObject({
+      projectId: PROJECT_ID,
+      statusPageId: STATUS_PAGE_ID,
+      statusPageGroupId: GROUP_ID,
+      monitorId: first.id,
+      displayName: "Checkout API",
+      displayDescription: "Processes customer checkouts",
+    });
+    expect(created[1]).toMatchObject({
+      monitorId: second.id,
+      displayName: "Billing Worker",
+      displayDescription: "Runs recurring invoices",
+    });
+  });
+
+  test("leaves group and optional description unset for uncategorized resources", async () => {
+    const monitor: Monitor = makeMonitor(
+      "0198c8ec-2a1d-7f0c-9e75-384194160020",
+      "Public Website",
+    );
+    let created: StatusPageResource | null = null;
+
+    await bulkAddStatusPageMonitors({
+      monitors: [monitor],
+      projectId: PROJECT_ID,
+      statusPageId: STATUS_PAGE_ID,
+      createResource: async (resource: StatusPageResource): Promise<void> => {
+        created = resource;
+      },
+    });
+
+    expect(created).not.toBeNull();
+    expect(created!.displayDescription).toBeUndefined();
+    expect(created!.statusPageGroupId).toBeUndefined();
+    expect(created!.rowAxisValue).toBeUndefined();
+    expect(created!.columnAxisValue).toBeUndefined();
+  });
+
+  test("applies one grid placement to every selected monitor", async () => {
+    const monitors: Array<Monitor> = [
+      makeMonitor("0198c8ec-2a1d-7f0c-9e75-384194160030", "US API"),
+      makeMonitor("0198c8ec-2a1d-7f0c-9e75-384194160031", "US Worker"),
+    ];
+    const created: Array<StatusPageResource> = [];
+
+    await bulkAddStatusPageMonitors({
+      monitors,
+      projectId: PROJECT_ID,
+      statusPageId: STATUS_PAGE_ID,
+      statusPageGroupId: GROUP_ID,
+      rowAxisValue: "Production",
+      columnAxisValue: "US East",
+      createResource: async (resource: StatusPageResource): Promise<void> => {
+        created.push(resource);
+      },
+    });
+
+    expect(created).toHaveLength(2);
+    expect(
+      created.every((resource: StatusPageResource) => {
+        return (
+          resource.rowAxisValue === "Production" &&
+          resource.columnAxisValue === "US East"
+        );
+      }),
+    ).toBe(true);
+  });
+
+  test("applies the shared resource options to every selected monitor", async () => {
+    const monitors: Array<Monitor> = [
+      makeMonitor("0198c8ec-2a1d-7f0c-9e75-384194160035", "US API"),
+      makeMonitor("0198c8ec-2a1d-7f0c-9e75-384194160036", "US Worker"),
+    ];
+    const created: Array<StatusPageResource> = [];
+
+    await bulkAddStatusPageMonitors({
+      monitors,
+      projectId: PROJECT_ID,
+      statusPageId: STATUS_PAGE_ID,
+      resourceOptions: {
+        displayTooltip: "Runs in US East",
+        showCurrentStatus: false,
+        showUptimePercent: true,
+        uptimePercentPrecision: UptimePrecision.TWO_DECIMAL,
+        showStatusHistoryChart: false,
+      },
+      createResource: async (resource: StatusPageResource): Promise<void> => {
+        created.push(resource);
+      },
+    });
+
+    expect(created).toHaveLength(2);
+
+    for (const resource of created) {
+      expect(resource).toMatchObject({
+        displayTooltip: "Runs in US East",
+        showCurrentStatus: false,
+        showUptimePercent: true,
+        uptimePercentPrecision: UptimePrecision.TWO_DECIMAL,
+        showStatusHistoryChart: false,
+      });
+    }
+  });
+
+  test("leaves resource options unset when the form did not collect them", async () => {
+    const monitor: Monitor = makeMonitor(
+      "0198c8ec-2a1d-7f0c-9e75-384194160037",
+      "US API",
+    );
+    let created: StatusPageResource | null = null;
+
+    await bulkAddStatusPageMonitors({
+      monitors: [monitor],
+      projectId: PROJECT_ID,
+      statusPageId: STATUS_PAGE_ID,
+      createResource: async (resource: StatusPageResource): Promise<void> => {
+        created = resource;
+      },
+    });
+
+    expect(created!.displayTooltip).toBeUndefined();
+    expect(created!.showCurrentStatus).toBeUndefined();
+    expect(created!.showUptimePercent).toBeUndefined();
+    expect(created!.uptimePercentPrecision).toBeUndefined();
+    expect(created!.showStatusHistoryChart).toBeUndefined();
+  });
+
+  test("deduplicates repeated monitor selections while retaining first-selection order", async () => {
+    const first: Monitor = makeMonitor(
+      "0198c8ec-2a1d-7f0c-9e75-384194160040",
+      "First",
+    );
+    const duplicateFirst: Monitor = makeMonitor(
+      "0198c8ec-2a1d-7f0c-9e75-384194160040",
+      "First Duplicate",
+    );
+    const second: Monitor = makeMonitor(
+      "0198c8ec-2a1d-7f0c-9e75-384194160041",
+      "Second",
+    );
+    const createdNames: Array<string> = [];
+
+    const result: BulkAddStatusPageMonitorsResult =
+      await bulkAddStatusPageMonitors({
+        monitors: [first, duplicateFirst, second],
+        projectId: PROJECT_ID,
+        statusPageId: STATUS_PAGE_ID,
+        createResource: async (resource: StatusPageResource): Promise<void> => {
+          createdNames.push(resource.displayName!);
+        },
+      });
+
+    expect(createdNames).toEqual(["First", "Second"]);
+    expect(result.succeeded).toEqual([first, second]);
+    expect(result.failed).toEqual([]);
+  });
+
+  test("accepts plain monitor objects returned by the multi-select list", async () => {
+    const selectedMonitor: Monitor = {
+      _id: "0198c8ec-2a1d-7f0c-9e75-384194160045",
+      name: "Plain Object Monitor",
+      description: "Selected through ModelList",
+    } as Monitor;
+    let created: StatusPageResource | null = null;
+
+    const result: BulkAddStatusPageMonitorsResult =
+      await bulkAddStatusPageMonitors({
+        monitors: [selectedMonitor],
+        projectId: PROJECT_ID,
+        statusPageId: STATUS_PAGE_ID,
+        createResource: async (resource: StatusPageResource): Promise<void> => {
+          created = resource;
+        },
+      });
+
+    expect(result.failed).toEqual([]);
+    expect(created!.monitorId?.toString()).toBe(selectedMonitor._id);
+    expect(created!.displayName).toBe("Plain Object Monitor");
+    expect(created!.displayDescription).toBe("Selected through ModelList");
+  });
+
+  test("reports invalid monitors and continues adding valid selections", async () => {
+    const missingId: Monitor = makeMonitor(null, "Missing ID");
+    const missingName: Monitor = makeMonitor(
+      "0198c8ec-2a1d-7f0c-9e75-384194160050",
+    );
+    const valid: Monitor = makeMonitor(
+      "0198c8ec-2a1d-7f0c-9e75-384194160051",
+      "Valid",
+    );
+    const createResource: (resource: StatusPageResource) => Promise<void> =
+      jest.fn(async (_resource: StatusPageResource): Promise<void> => {});
+
+    const result: BulkAddStatusPageMonitorsResult =
+      await bulkAddStatusPageMonitors({
+        monitors: [missingId, missingName, valid],
+        projectId: PROJECT_ID,
+        statusPageId: STATUS_PAGE_ID,
+        createResource,
+      });
+
+    expect(createResource).toHaveBeenCalledTimes(1);
+    expect(result.succeeded).toEqual([valid]);
+    expect(result.failed).toHaveLength(2);
+    expect((result.failed[0]!.error as Error).message).toBe(
+      "Monitor ID is required.",
+    );
+    expect((result.failed[1]!.error as Error).message).toBe(
+      "Monitor name is required.",
+    );
+  });
+
+  test("isolates create failures so later monitors still run", async () => {
+    const first: Monitor = makeMonitor(
+      "0198c8ec-2a1d-7f0c-9e75-384194160060",
+      "First",
+    );
+    const failing: Monitor = makeMonitor(
+      "0198c8ec-2a1d-7f0c-9e75-384194160061",
+      "Failing",
+    );
+    const last: Monitor = makeMonitor(
+      "0198c8ec-2a1d-7f0c-9e75-384194160062",
+      "Last",
+    );
+    const attemptedNames: Array<string> = [];
+
+    const result: BulkAddStatusPageMonitorsResult =
+      await bulkAddStatusPageMonitors({
+        monitors: [first, failing, last],
+        projectId: PROJECT_ID,
+        statusPageId: STATUS_PAGE_ID,
+        createResource: async (resource: StatusPageResource): Promise<void> => {
+          attemptedNames.push(resource.displayName!);
+          if (resource.displayName === "Failing") {
+            throw new Error("Create denied");
+          }
+        },
+      });
+
+    expect(attemptedNames).toEqual(["First", "Failing", "Last"]);
+    expect(result.succeeded).toEqual([first, last]);
+    expect(result.failed).toHaveLength(1);
+    expect(result.failed[0]!.monitor).toBe(failing);
+    expect((result.failed[0]!.error as Error).message).toBe("Create denied");
+  });
+
+  test("waits for each create before starting the next one", async () => {
+    const monitors: Array<Monitor> = [
+      makeMonitor("0198c8ec-2a1d-7f0c-9e75-384194160070", "First"),
+      makeMonitor("0198c8ec-2a1d-7f0c-9e75-384194160071", "Second"),
+      makeMonitor("0198c8ec-2a1d-7f0c-9e75-384194160072", "Third"),
+    ];
+    let activeCreates: number = 0;
+    let maximumActiveCreates: number = 0;
+
+    await bulkAddStatusPageMonitors({
+      monitors,
+      projectId: PROJECT_ID,
+      statusPageId: STATUS_PAGE_ID,
+      createResource: async (): Promise<void> => {
+        activeCreates++;
+        maximumActiveCreates = Math.max(maximumActiveCreates, activeCreates);
+        await new Promise<void>((resolve: () => void) => {
+          setTimeout(resolve, 1);
+        });
+        activeCreates--;
+      },
+    });
+
+    expect(maximumActiveCreates).toBe(1);
+  });
+});

package/Tests/App/StatusPage/BulkAddStatusPageMonitorsModal.test.tsx

@@ -0,0 +1,320 @@
+import "@testing-library/jest-dom";
+import { fireEvent, render, waitFor } from "@testing-library/react";
+import React from "react";
+import { beforeEach, describe, expect, jest, test } from "@jest/globals";
+
+const MONITOR_ONE_ID: string = "0198c8ec-2a1d-7f0c-9e75-384194161010";
+const MONITOR_TWO_ID: string = "0198c8ec-2a1d-7f0c-9e75-384194161011";
+
+jest.mock("Common/UI/Components/EntityDropdown/EntityDropdown", () => {
+  return {
+    __esModule: true,
+    default: (props: {
+      isMultiSelect?: boolean;
+      error?: string;
+      onChange?: (value: Array<string>) => void;
+    }) => {
+      return (
+        <div>
+          <button
+            type="button"
+            onClick={() => {
+              props.onChange?.([MONITOR_TWO_ID, MONITOR_ONE_ID]);
+            }}
+          >
+            {props.isMultiSelect ? "Select two monitors" : "Select one monitor"}
+          </button>
+          {props.error ? <p>{props.error}</p> : null}
+        </div>
+      );
+    },
+  };
+});
+
+jest.mock("Common/UI/Components/Dropdown/Dropdown", () => {
+  return {
+    __esModule: true,
+    DROPDOWN_MENU_Z_INDEX: 1,
+    default: (props: {
+      placeholder?: string;
+      error?: string;
+      options: Array<{ value: string }>;
+      onChange?: (value: string) => void;
+    }) => {
+      return (
+        <div>
+          <button
+            type="button"
+            onClick={() => {
+              props.onChange?.(props.options[0]!.value);
+            }}
+          >
+            Choose {props.placeholder}
+          </button>
+          {props.error ? <p>{props.error}</p> : null}
+        </div>
+      );
+    },
+  };
+});
+
+jest.mock("Common/UI/Utils/ModelAPI/ModelAPI", () => {
+  return {
+    __esModule: true,
+    default: {
+      getList: jest.fn(),
+    },
+  };
+});
+
+jest.mock(
+  "../../../../App/FeatureSet/Dashboard/src/Components/StatusPage/BulkAddStatusPageMonitors",
+  () => {
+    return {
+      __esModule: true,
+      default: jest.fn(),
+    };
+  },
+);
+
+import bulkAddStatusPageMonitors, {
+  BulkAddStatusPageMonitorsOptions,
+  BulkAddStatusPageMonitorsResult,
+} from "../../../../App/FeatureSet/Dashboard/src/Components/StatusPage/BulkAddStatusPageMonitors";
+import BulkAddStatusPageMonitorsModal from "../../../../App/FeatureSet/Dashboard/src/Components/StatusPage/BulkAddStatusPageMonitorsModal";
+import Monitor from "../../../Models/DatabaseModels/Monitor";
+import ObjectID from "../../../Types/ObjectID";
+import ModelAPI from "../../../UI/Utils/ModelAPI/ModelAPI";
+
+const PROJECT_ID: ObjectID = new ObjectID(
+  "0198c8ec-2a1d-7f0c-9e75-384194161001",
+);
+const STATUS_PAGE_ID: ObjectID = new ObjectID(
+  "0198c8ec-2a1d-7f0c-9e75-384194161002",
+);
+const GROUP_ID: ObjectID = new ObjectID("0198c8ec-2a1d-7f0c-9e75-384194161003");
+
+const mockBulkAdd: jest.MockedFunction<typeof bulkAddStatusPageMonitors> =
+  bulkAddStatusPageMonitors as jest.MockedFunction<
+    typeof bulkAddStatusPageMonitors
+  >;
+
+const mockGetList: jest.MockedFunction<any> =
+  ModelAPI.getList as unknown as jest.MockedFunction<any>;
+
+type MakeMonitorFunction = (
+  id: string,
+  name: string,
+  description: string,
+) => Monitor;
+
+const makeMonitor: MakeMonitorFunction = (
+  id: string,
+  name: string,
+  description: string,
+): Monitor => {
+  const monitor: Monitor = new Monitor();
+  monitor._id = id;
+  monitor.name = name;
+  monitor.description = description;
+  return monitor;
+};
+
+type RenderModalFunction = (
+  overrides?: Partial<
+    React.ComponentProps<typeof BulkAddStatusPageMonitorsModal>
+  >,
+) => ReturnType<typeof render>;
+
+const renderModal: RenderModalFunction = (
+  overrides: Partial<
+    React.ComponentProps<typeof BulkAddStatusPageMonitorsModal>
+  > = {},
+): ReturnType<typeof render> => {
+  return render(
+    <BulkAddStatusPageMonitorsModal
+      projectId={PROJECT_ID}
+      statusPageId={STATUS_PAGE_ID}
+      statusPageGroupId={GROUP_ID}
+      onClose={jest.fn()}
+      onComplete={jest.fn()}
+      {...overrides}
+    />,
+  );
+};
+
+type GoToLastStepFunction = (view: ReturnType<typeof render>) => Promise<void>;
+
+// The form has the same "Monitor Details" then "Advanced" steps as the single resource form.
+const goToLastStep: GoToLastStepFunction = async (
+  view: ReturnType<typeof render>,
+): Promise<void> => {
+  fireEvent.click(view.getByTestId("modal-footer-submit-button"));
+
+  await waitFor(() => {
+    expect(view.getByTestId("modal-footer-submit-button")).toHaveTextContent(
+      "Add Monitors",
+    );
+  });
+};
+
+describe("BulkAddStatusPageMonitorsModal", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+
+    mockGetList.mockImplementation(async (): Promise<any> => {
+      return {
+        data: [
+          makeMonitor(MONITOR_ONE_ID, "Checkout API", "Takes payments"),
+          makeMonitor(MONITOR_TWO_ID, "Billing Worker", "Sends invoices"),
+        ],
+        count: 2,
+      };
+    });
+
+    mockBulkAdd.mockImplementation(
+      async (
+        options: BulkAddStatusPageMonitorsOptions,
+      ): Promise<BulkAddStatusPageMonitorsResult> => {
+        return { succeeded: options.monitors, failed: [] };
+      },
+    );
+  });
+
+  test("asks for monitors and the resource options, but never a display name", () => {
+    const view: ReturnType<typeof render> = renderModal();
+
+    expect(view.getByText("Monitors")).toBeVisible();
+    expect(view.getByText("Monitor Details")).toBeVisible();
+    expect(view.getByText("Advanced")).toBeVisible();
+    expect(view.queryByText("Display Name")).not.toBeInTheDocument();
+    expect(view.queryByText("Description")).not.toBeInTheDocument();
+  });
+
+  test("requires at least one monitor before the bulk add runs", async () => {
+    const view: ReturnType<typeof render> = renderModal();
+
+    fireEvent.click(view.getByTestId("modal-footer-submit-button"));
+
+    await waitFor(() => {
+      expect(view.getByText("Monitors is required.")).toBeVisible();
+    });
+
+    expect(mockBulkAdd).not.toHaveBeenCalled();
+  });
+
+  test("adds the selected monitors with the shared resource options", async () => {
+    const onComplete: (result: BulkAddStatusPageMonitorsResult) => void =
+      jest.fn((_result: BulkAddStatusPageMonitorsResult): void => {});
+    const view: ReturnType<typeof render> = renderModal({ onComplete });
+
+    fireEvent.click(view.getByRole("button", { name: "Select two monitors" }));
+    await goToLastStep(view);
+    fireEvent.click(view.getByTestId("modal-footer-submit-button"));
+
+    await waitFor(() => {
+      expect(mockBulkAdd).toHaveBeenCalledTimes(1);
+    });
+
+    const options: BulkAddStatusPageMonitorsOptions =
+      mockBulkAdd.mock.calls[0]![0];
+    expect(options.projectId).toBe(PROJECT_ID);
+    expect(options.statusPageId).toBe(STATUS_PAGE_ID);
+    expect(options.statusPageGroupId).toBe(GROUP_ID);
+
+    // Monitors are added in the order they were picked, not the order they were fetched in.
+    expect(
+      options.monitors.map((monitor: Monitor) => {
+        return monitor.name;
+      }),
+    ).toEqual(["Billing Worker", "Checkout API"]);
+
+    expect(options.resourceOptions).toEqual({
+      displayTooltip: undefined,
+      showCurrentStatus: true,
+      showUptimePercent: false,
+      uptimePercentPrecision: undefined,
+      showStatusHistoryChart: true,
+    });
+
+    await waitFor(() => {
+      expect(onComplete).toHaveBeenCalledTimes(1);
+      expect(view.getByText("Added 2 of 2 selected monitors.")).toBeVisible();
+    });
+  });
+
+  test("requires and submits a shared grid placement", async () => {
+    const view: ReturnType<typeof render> = renderModal({
+      gridPlacement: {
+        rowLabel: "Environment",
+        rowValues: ["Production", "Staging"],
+        columnLabel: "Region",
+        columnValues: ["US East", "EU West"],
+      },
+    });
+
+    fireEvent.click(view.getByRole("button", { name: "Select two monitors" }));
+    fireEvent.click(view.getByTestId("modal-footer-submit-button"));
+
+    await waitFor(() => {
+      expect(view.getByText("Environment (Row) is required.")).toBeVisible();
+    });
+    expect(view.getByText("Region (Column) is required.")).toBeVisible();
+
+    fireEvent.click(
+      view.getByRole("button", { name: "Choose Select environment" }),
+    );
+    fireEvent.click(view.getByRole("button", { name: "Choose Select region" }));
+
+    await goToLastStep(view);
+    fireEvent.click(view.getByTestId("modal-footer-submit-button"));
+
+    await waitFor(() => {
+      expect(mockBulkAdd).toHaveBeenCalledTimes(1);
+    });
+
+    const options: BulkAddStatusPageMonitorsOptions =
+      mockBulkAdd.mock.calls[0]![0];
+    expect(options.rowAxisValue).toBe("Production");
+    expect(options.columnAxisValue).toBe("US East");
+  });
+
+  test("shows a non-retryable completion summary for partial failures", async () => {
+    mockBulkAdd.mockImplementationOnce(
+      async (
+        options: BulkAddStatusPageMonitorsOptions,
+      ): Promise<BulkAddStatusPageMonitorsResult> => {
+        return {
+          succeeded: [options.monitors[0]!],
+          failed: [
+            {
+              monitor: options.monitors[1]!,
+              error: new Error("Permission denied"),
+            },
+          ],
+        };
+      },
+    );
+    const onClose: () => void = jest.fn((): void => {});
+    const view: ReturnType<typeof render> = renderModal({ onClose });
+
+    fireEvent.click(view.getByRole("button", { name: "Select two monitors" }));
+    await goToLastStep(view);
+    fireEvent.click(view.getByTestId("modal-footer-submit-button"));
+
+    await waitFor(() => {
+      expect(view.getByText("Added 1 of 2 selected monitors.")).toBeVisible();
+    });
+
+    expect(view.getByText("Added (1)")).toBeVisible();
+    expect(view.getByText("Failed (1)")).toBeVisible();
+    expect(view.getByText("Billing Worker")).toBeVisible();
+    expect(view.getByText(/Checkout API:/)).toBeVisible();
+    expect(view.getByText("Permission denied")).toBeVisible();
+    expect(view.queryByText("Select two monitors")).not.toBeInTheDocument();
+
+    fireEvent.click(view.getByTestId("modal-footer-close-button"));
+    expect(onClose).toHaveBeenCalledTimes(1);
+    expect(mockBulkAdd).toHaveBeenCalledTimes(1);
+  });
+});