@oneuptime/common 13.0.5 → 13.0.6

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

@@ -362,7 +362,10 @@ describe("AddWidgetModal", () => {
 
       typeSearch("error budget");
 
-      expect(getVisibleWidgetTypes()).toEqual([DashboardComponentType.Slo]);
+      expect(getVisibleWidgetTypes()).toEqual([
+        DashboardComponentType.Slo,
+        DashboardComponentType.SloList,
+      ]);
     });
 
     test("narrows further with each additional word", () => {

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

@@ -0,0 +1,307 @@
+import {
+  afterEach,
+  beforeEach,
+  describe,
+  expect,
+  jest,
+  test,
+} from "@jest/globals";
+import "@testing-library/jest-dom";
+import {
+  cleanup,
+  fireEvent,
+  render,
+  screen,
+  within,
+} from "@testing-library/react";
+import React, { ReactElement, ReactNode } from "react";
+
+/*
+ * An SLO is an affected resource of the incidents and alerts its burn rate
+ * rules raise. A burn-rate incident carries no monitors on purpose, so before
+ * this change its "Affected Resources" card said "No resources affected." and
+ * its row in the incident list was blank - the incident looked like it was
+ * about nothing, with no way back to the objective that declared it.
+ *
+ * These render the real card and cell. AppLink is a plain anchor so hrefs can
+ * be read.
+ */
+jest.mock(
+  "../../../../App/FeatureSet/Dashboard/src/Components/AppLink/AppLink",
+  () => {
+    return {
+      __esModule: true,
+      default: (props: {
+        to?: { toString: () => string };
+        children: ReactNode;
+        className?: string;
+      }): ReactElement => {
+        return React.createElement(
+          "a",
+          { href: props.to?.toString(), className: props.className },
+          props.children,
+        );
+      },
+    };
+  },
+);
+
+import AffectedResourcesCell from "../../../../App/FeatureSet/Dashboard/src/Components/AffectedResources/AffectedResourcesCell";
+import AffectedResourcesDisplay from "../../../../App/FeatureSet/Dashboard/src/Components/AffectedResources/AffectedResourcesDisplay";
+import Monitor from "../../../Models/DatabaseModels/Monitor";
+import Service from "../../../Models/DatabaseModels/Service";
+import ServiceLevelObjective from "../../../Models/DatabaseModels/ServiceLevelObjective";
+import Color from "../../../Types/Color";
+import { PROJECT_ID, goTo } from "./SideMenuHarness";
+
+const CHECKOUT_SLO_ID: string = "0193c0de-8888-4aaa-8bbb-000000000001";
+const SEARCH_SLO_ID: string = "0193c0de-8888-4aaa-8bbb-000000000002";
+
+type BuildSloFunction = (id: string, name: string) => ServiceLevelObjective;
+
+const buildSlo: BuildSloFunction = (
+  id: string,
+  name: string,
+): ServiceLevelObjective => {
+  const slo: ServiceLevelObjective = new ServiceLevelObjective();
+  slo._id = id;
+  slo.name = name;
+  return slo;
+};
+
+type BuildServiceFunction = (id: string, name: string) => Service;
+
+const buildService: BuildServiceFunction = (
+  id: string,
+  name: string,
+): Service => {
+  const service: Service = new Service();
+  service._id = id;
+  service.name = name;
+  service.serviceColor = new Color("#6366f1");
+  return service;
+};
+
+type BuildMonitorFunction = (id: string, name: string) => Monitor;
+
+const buildMonitor: BuildMonitorFunction = (
+  id: string,
+  name: string,
+): Monitor => {
+  const monitor: Monitor = new Monitor();
+  monitor._id = id;
+  monitor.name = name;
+  return monitor;
+};
+
+const CHECKOUT_SLO: ServiceLevelObjective = buildSlo(
+  CHECKOUT_SLO_ID,
+  "Checkout availability",
+);
+const SEARCH_SLO: ServiceLevelObjective = buildSlo(
+  SEARCH_SLO_ID,
+  "Search latency p95",
+);
+
+function sloHref(id: string): string {
+  return `/dashboard/${PROJECT_ID}/slos/${id}`;
+}
+
+beforeEach(() => {
+  goTo(`/dashboard/${PROJECT_ID}/incidents`);
+});
+
+afterEach(() => {
+  cleanup();
+});
+
+describe("AffectedResourcesDisplay with SLOs", () => {
+  test("a burn-rate incident linked only to its SLO is not 'No resources affected.'", () => {
+    render(
+      <AffectedResourcesDisplay
+        serviceLevelObjectives={[CHECKOUT_SLO]}
+        columns={1}
+      />,
+    );
+
+    expect(screen.queryByText("No resources affected.")).toBeNull();
+
+    const grid: HTMLElement = screen.getByTestId("affected-resources-grid");
+
+    expect(grid.children).toHaveLength(1);
+    expect(within(grid).getByText("SLOs")).toBeInTheDocument();
+    expect(screen.getByText("1 resource")).toBeInTheDocument();
+    expect(screen.getByText("across 1 category")).toBeInTheDocument();
+  });
+
+  test("each SLO links to its overview and carries its full name as a title", () => {
+    render(
+      <AffectedResourcesDisplay
+        serviceLevelObjectives={[CHECKOUT_SLO, SEARCH_SLO]}
+        columns={1}
+      />,
+    );
+
+    const items: Array<HTMLElement> = screen.getAllByTestId(
+      "affected-resource-item",
+    );
+
+    expect(
+      items.map((item: HTMLElement): string | null => {
+        return item.getAttribute("title");
+      }),
+    ).toEqual(["Checkout availability", "Search latency p95"]);
+    expect(
+      items.map((item: HTMLElement): string | null => {
+        return within(item).getByRole("link").getAttribute("href");
+      }),
+    ).toEqual([sloHref(CHECKOUT_SLO_ID), sloHref(SEARCH_SLO_ID)]);
+  });
+
+  test("the SLO card counts its SLOs", () => {
+    render(
+      <AffectedResourcesDisplay
+        serviceLevelObjectives={[CHECKOUT_SLO, SEARCH_SLO]}
+        columns={1}
+      />,
+    );
+
+    const card: HTMLElement = screen.getByTestId("affected-resources-grid")
+      .firstElementChild as HTMLElement;
+
+    expect(within(card).getByText("2")).toBeInTheDocument();
+  });
+
+  test("SLOs add to the summary and sit after the infrastructure they measure", () => {
+    render(
+      <AffectedResourcesDisplay
+        services={[
+          buildService("bbbbbbbb-bbbb-4bbb-8bbb-bbbbbbbbbbb1", "checkout-api"),
+        ]}
+        serviceLevelObjectives={[CHECKOUT_SLO, SEARCH_SLO]}
+      />,
+    );
+
+    expect(screen.getByText("3 resources")).toBeInTheDocument();
+    expect(screen.getByText("across 2 categories")).toBeInTheDocument();
+
+    const grid: HTMLElement = screen.getByTestId("affected-resources-grid");
+
+    expect(grid.children).toHaveLength(2);
+    expect(
+      within(grid.lastElementChild as HTMLElement).getByText("SLOs"),
+    ).toBeInTheDocument();
+  });
+
+  test("an alert page that hides monitors still shows the SLO", () => {
+    render(
+      <AffectedResourcesDisplay
+        monitors={[
+          buildMonitor("aaaaaaaa-aaaa-4aaa-8aaa-aaaaaaaaaaa1", "checkout-web"),
+        ]}
+        serviceLevelObjectives={[CHECKOUT_SLO]}
+        hideMonitors={true}
+        columns={1}
+      />,
+    );
+
+    const grid: HTMLElement = screen.getByTestId("affected-resources-grid");
+
+    expect(grid.children).toHaveLength(1);
+    expect(within(grid).queryByText("Monitors")).toBeNull();
+    expect(within(grid).getByText("SLOs")).toBeInTheDocument();
+  });
+
+  test("a caller can hide the SLO category", () => {
+    render(
+      <AffectedResourcesDisplay
+        serviceLevelObjectives={[CHECKOUT_SLO]}
+        hideServiceLevelObjectives={true}
+        columns={1}
+      />,
+    );
+
+    expect(screen.getByText("No resources affected.")).toBeInTheDocument();
+    expect(screen.queryByTestId("affected-resources-grid")).toBeNull();
+  });
+
+  test("the empty state explains that SLOs are linked for you, not attached by hand", () => {
+    render(<AffectedResourcesDisplay columns={1} />);
+
+    expect(
+      screen.getByText(
+        /SLOs are linked automatically when their burn rate rules fire\./,
+      ),
+    ).toBeInTheDocument();
+  });
+
+  test("an empty SLO list alone is still empty", () => {
+    render(<AffectedResourcesDisplay serviceLevelObjectives={[]} />);
+
+    expect(screen.getByText("No resources affected.")).toBeInTheDocument();
+  });
+});
+
+describe("AffectedResourcesCell with SLOs", () => {
+  test("an incident row linked only to its SLO shows the SLO, not 'No resources.'", () => {
+    render(<AffectedResourcesCell serviceLevelObjectives={[CHECKOUT_SLO]} />);
+
+    expect(screen.queryByText("No resources.")).toBeNull();
+
+    const link: HTMLElement = screen.getByRole("link");
+
+    expect(link).toHaveAttribute("href", sloHref(CHECKOUT_SLO_ID));
+    expect(link).toHaveTextContent("Checkout availability");
+  });
+
+  test("the SLO row carries a type icon like every other resource row", () => {
+    render(<AffectedResourcesCell serviceLevelObjectives={[CHECKOUT_SLO]} />);
+
+    expect(screen.getByRole("link").querySelector("svg")).not.toBeNull();
+  });
+
+  test("SLOs are listed after the other resources", () => {
+    render(
+      <AffectedResourcesCell
+        services={[
+          buildService("bbbbbbbb-bbbb-4bbb-8bbb-bbbbbbbbbbb1", "checkout-api"),
+        ]}
+        serviceLevelObjectives={[CHECKOUT_SLO]}
+      />,
+    );
+
+    const links: Array<HTMLElement> = screen.getAllByRole("link");
+
+    expect(links).toHaveLength(2);
+    expect(links[0]).toHaveTextContent("checkout-api");
+    expect(links[1]).toHaveAttribute("href", sloHref(CHECKOUT_SLO_ID));
+  });
+
+  test("past the first three resources an SLO waits behind the 'more resources' button", () => {
+    render(
+      <AffectedResourcesCell
+        monitors={[
+          buildMonitor("aaaaaaaa-aaaa-4aaa-8aaa-aaaaaaaaaaa1", "checkout-web"),
+          buildMonitor("aaaaaaaa-aaaa-4aaa-8aaa-aaaaaaaaaaa2", "orders-db"),
+        ]}
+        serviceLevelObjectives={[CHECKOUT_SLO, SEARCH_SLO]}
+      />,
+    );
+
+    expect(screen.queryByText("Search latency p95")).toBeNull();
+
+    fireEvent.click(screen.getByText("1 more resources"));
+
+    expect(screen.getByText("Search latency p95")).toBeInTheDocument();
+  });
+
+  test("an SLO without an id is named without a link", () => {
+    const unsaved: ServiceLevelObjective = new ServiceLevelObjective();
+    unsaved.name = "Unsaved objective";
+
+    render(<AffectedResourcesCell serviceLevelObjectives={[unsaved]} />);
+
+    expect(screen.queryByRole("link")).toBeNull();
+    expect(screen.getByText("Unsaved objective")).toBeInTheDocument();
+  });
+});

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

@@ -22,6 +22,13 @@ import BaseModel from "../../../Models/DatabaseModels/DatabaseBaseModel/Database
 import CloudResource from "../../../Models/DatabaseModels/CloudResource";
 import RumApplication from "../../../Models/DatabaseModels/RumApplication";
 import ServerlessFunction from "../../../Models/DatabaseModels/ServerlessFunction";
+import ServiceLevelObjective from "../../../Models/DatabaseModels/ServiceLevelObjective";
+import {
+  SLO_ARCHIVE_CARD_DESCRIPTION,
+  SLO_ARCHIVE_CONFIRM_MESSAGE,
+  SLO_UNARCHIVE_CARD_DESCRIPTION,
+  SLO_UNARCHIVE_CONFIRM_MESSAGE,
+} from "../../../../App/FeatureSet/Dashboard/src/Components/Slo/SloArchiveCopy";
 import Route from "../../../Types/API/Route";
 import ObjectID from "../../../Types/ObjectID";
 import Permission from "../../../Types/Permission";
@@ -474,3 +481,285 @@ describe("ArchiveResourceCard request and confirmation handling", () => {
     },
   );
 });
+
+/*
+ * Not every archive is only a visibility flag. An archived SLO stops being
+ * evaluated and has its open burn-rate alerts and incidents resolved, so a card
+ * promising it "keeps collecting telemetry" would tell the user the opposite of
+ * what happens. The copy props let such a resource say what its archive does,
+ * while every assertion above pins the defaults as they always were.
+ */
+describe("ArchiveResourceCard copy overrides", () => {
+  interface CopyProps {
+    archiveCardDescription?: string | undefined;
+    unarchiveCardDescription?: string | undefined;
+    archiveConfirmMessage?: string | undefined;
+    unarchiveConfirmMessage?: string | undefined;
+  }
+
+  const sloResource: ResourceCase = {
+    name: "SLO",
+    modelType: ServiceLevelObjective,
+    modelId: new ObjectID("44444444-0000-4000-8000-000000000004"),
+    listRoute: new Route("/dashboard/project/slos"),
+    singularName: "SLO",
+    editPermission: Permission.EditServiceLevelObjective,
+    readPermission: Permission.ReadServiceLevelObjective,
+    deletePermission: Permission.DeleteServiceLevelObjective,
+  };
+
+  const SLO_COPY: CopyProps = {
+    archiveCardDescription: SLO_ARCHIVE_CARD_DESCRIPTION,
+    unarchiveCardDescription: SLO_UNARCHIVE_CARD_DESCRIPTION,
+    archiveConfirmMessage: SLO_ARCHIVE_CONFIRM_MESSAGE,
+    unarchiveConfirmMessage: SLO_UNARCHIVE_CONFIRM_MESSAGE,
+  };
+
+  beforeEach(() => {
+    permissions = [sloResource.editPermission];
+  });
+
+  /*
+   * `withListRoute` rather than an optional route parameter: a default value
+   * would also apply to an explicit `undefined`, silently turning the
+   * archive-in-place case back into one that navigates away.
+   */
+  async function renderSloCard(
+    copy: CopyProps,
+    options: { withListRoute: boolean } = { withListRoute: true },
+  ): Promise<void> {
+    render(
+      <ArchiveResourceCard
+        {...sloResource}
+        listRoute={options.withListRoute ? sloResource.listRoute : undefined}
+        {...copy}
+      />,
+    );
+    await waitFor(() => {
+      expect(screen.queryByTestId("component-loader")).not.toBeInTheDocument();
+    });
+  }
+
+  test("a live SLO describes and confirms its archive in its own words", async () => {
+    await renderSloCard(SLO_COPY);
+
+    expect(
+      screen.getByRole("heading", { name: "Archive SLO" }),
+    ).toBeInTheDocument();
+
+    const description: HTMLElement = screen.getByTestId("card-description");
+    expect(description).toHaveTextContent(SLO_ARCHIVE_CARD_DESCRIPTION);
+    expect(description).not.toHaveTextContent("telemetry");
+
+    const dialog: HTMLElement = openConfirmation("Archive");
+    const body: HTMLElement = within(dialog).getByTestId(
+      "confirm-modal-description",
+    );
+    expect(body).toHaveTextContent(SLO_ARCHIVE_CONFIRM_MESSAGE);
+    expect(body).not.toHaveTextContent("telemetry");
+
+    submitConfirmation(dialog);
+
+    await waitFor(() => {
+      expect(navigateMock).toHaveBeenCalledWith(sloResource.listRoute);
+    });
+    expect(updateByIdMock).toHaveBeenCalledTimes(1);
+    expect(updateByIdMock).toHaveBeenCalledWith({
+      modelType: ServiceLevelObjective,
+      id: sloResource.modelId,
+      data: { isArchived: true },
+    });
+  });
+
+  test("an archived SLO describes and confirms its unarchive in its own words", async () => {
+    getItemMock.mockResolvedValue({ isArchived: true });
+    await renderSloCard(SLO_COPY);
+
+    const description: HTMLElement = screen.getByTestId("card-description");
+    expect(description).toHaveTextContent(SLO_UNARCHIVE_CARD_DESCRIPTION);
+    expect(description).not.toHaveTextContent("telemetry");
+
+    const dialog: HTMLElement = openConfirmation("Unarchive");
+    expect(
+      within(dialog).getByTestId("confirm-modal-description"),
+    ).toHaveTextContent(SLO_UNARCHIVE_CONFIRM_MESSAGE);
+
+    submitConfirmation(dialog);
+
+    await waitFor(() => {
+      expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
+    });
+    expect(updateByIdMock).toHaveBeenCalledWith({
+      modelType: ServiceLevelObjective,
+      id: sloResource.modelId,
+      data: { isArchived: false },
+    });
+    expect(navigateMock).not.toHaveBeenCalled();
+  });
+
+  test("after archiving in place, the card switches to the unarchive copy", async () => {
+    await renderSloCard(SLO_COPY, { withListRoute: false });
+
+    submitConfirmation(openConfirmation("Archive"));
+    await screen.findByRole("button", { name: "Unarchive" });
+
+    expect(screen.getByTestId("card-description")).toHaveTextContent(
+      SLO_UNARCHIVE_CARD_DESCRIPTION,
+    );
+    expect(navigateMock).not.toHaveBeenCalled();
+  });
+
+  test("an override for one state leaves the other state's default copy untouched", async () => {
+    getItemMock.mockResolvedValue({ isArchived: true });
+    await renderSloCard({
+      archiveCardDescription: SLO_ARCHIVE_CARD_DESCRIPTION,
+      archiveConfirmMessage: SLO_ARCHIVE_CONFIRM_MESSAGE,
+    });
+
+    const description: HTMLElement = screen.getByTestId("card-description");
+    expect(description).toHaveTextContent("is archived and hidden from lists");
+    expect(description).toHaveTextContent("still collecting telemetry");
+
+    const dialog: HTMLElement = openConfirmation("Unarchive");
+    expect(
+      within(dialog).getByTestId("confirm-modal-description"),
+    ).toHaveTextContent(
+      "Are you sure you want to unarchive this SLO? It will reappear in the main list.",
+    );
+  });
+
+  test("an empty override falls back to the default copy instead of rendering a blank", async () => {
+    await renderSloCard({
+      archiveCardDescription: "",
+      archiveConfirmMessage: "",
+    });
+
+    expect(screen.getByTestId("card-description")).toHaveTextContent(
+      "Archive this SLO to hide it from lists while it keeps collecting telemetry. You can unarchive it anytime.",
+    );
+
+    const dialog: HTMLElement = openConfirmation("Archive");
+    expect(
+      within(dialog).getByTestId("confirm-modal-description"),
+    ).toHaveTextContent(
+      "Are you sure you want to archive this SLO? It will be hidden from the list but will keep collecting telemetry.",
+    );
+  });
+});
+
+/*
+ * A page can show the archive state in more places than this card - the SLO
+ * Settings page has a notice banner above it that says "This SLO is
+ * archived". onArchiveChange is how such a page hears the state changed, and
+ * it must only hear once the server has accepted the change. Every test above
+ * renders without it, which pins that leaving it out changes nothing.
+ */
+describe("ArchiveResourceCard onArchiveChange", () => {
+  const resource: ResourceCase = RESOURCE_CASES[0]!;
+  const onArchiveChangeMock: Mock<(isArchived: boolean) => void> =
+    jest.fn<(isArchived: boolean) => void>();
+
+  beforeEach(() => {
+    onArchiveChangeMock.mockReset();
+  });
+
+  async function renderWithCallback(
+    options: { withListRoute: boolean } = { withListRoute: true },
+  ): Promise<void> {
+    render(
+      <ArchiveResourceCard
+        {...resource}
+        listRoute={options.withListRoute ? resource.listRoute : undefined}
+        onArchiveChange={onArchiveChangeMock}
+      />,
+    );
+    await waitFor(() => {
+      expect(screen.queryByTestId("component-loader")).not.toBeInTheDocument();
+    });
+  }
+
+  test("reports an archive once the save succeeds, before leaving for the list", async () => {
+    await renderWithCallback();
+    submitConfirmation(openConfirmation("Archive"));
+
+    await waitFor(() => {
+      expect(navigateMock).toHaveBeenCalledWith(resource.listRoute);
+    });
+    expect(onArchiveChangeMock).toHaveBeenCalledTimes(1);
+    expect(onArchiveChangeMock).toHaveBeenCalledWith(true);
+    // The caller reacts on the page where the change was made.
+    expect(onArchiveChangeMock.mock.invocationCallOrder[0]!).toBeLessThan(
+      navigateMock.mock.invocationCallOrder[0]!,
+    );
+  });
+
+  test("reports an unarchive without leaving the page", async () => {
+    getItemMock.mockResolvedValue({ isArchived: true });
+    await renderWithCallback();
+    submitConfirmation(openConfirmation("Unarchive"));
+
+    await waitFor(() => {
+      expect(onArchiveChangeMock).toHaveBeenCalledWith(false);
+    });
+    expect(onArchiveChangeMock).toHaveBeenCalledTimes(1);
+    expect(navigateMock).not.toHaveBeenCalled();
+  });
+
+  test("reports each change in turn when archiving and unarchiving in place", async () => {
+    await renderWithCallback({ withListRoute: false });
+
+    submitConfirmation(openConfirmation("Archive"));
+    await screen.findByRole("button", { name: "Unarchive" });
+    submitConfirmation(openConfirmation("Unarchive"));
+
+    await waitFor(() => {
+      expect(onArchiveChangeMock).toHaveBeenCalledTimes(2);
+    });
+    expect(onArchiveChangeMock.mock.calls).toEqual([[true], [false]]);
+    expect(navigateMock).not.toHaveBeenCalled();
+  });
+
+  test("stays silent while the save is pending", async () => {
+    const pending: Deferred<void> = deferred<void>();
+    updateByIdMock.mockReturnValue(pending.promise);
+    await renderWithCallback();
+    submitConfirmation(openConfirmation("Archive"));
+
+    expect(updateByIdMock).toHaveBeenCalledTimes(1);
+    expect(onArchiveChangeMock).not.toHaveBeenCalled();
+
+    await act(async () => {
+      pending.resolve(undefined);
+      await pending.promise;
+    });
+
+    expect(onArchiveChangeMock).toHaveBeenCalledTimes(1);
+    expect(onArchiveChangeMock).toHaveBeenCalledWith(true);
+  });
+
+  test.each([false, true])(
+    "stays silent when the save fails (archived: %s)",
+    async (isArchived: boolean) => {
+      const error: Error = new Error("The archive update could not be saved");
+      getItemMock.mockResolvedValue({ isArchived: isArchived });
+      updateByIdMock.mockRejectedValue(error);
+      await renderWithCallback();
+      submitConfirmation(
+        openConfirmation(isArchived ? "Unarchive" : "Archive"),
+      );
+
+      expect(await screen.findByText(error.message)).toBeInTheDocument();
+      expect(onArchiveChangeMock).not.toHaveBeenCalled();
+    },
+  );
+
+  test("stays silent when the confirmation is cancelled", async () => {
+    await renderWithCallback();
+    const dialog: HTMLElement = openConfirmation("Archive");
+    fireEvent.click(within(dialog).getByRole("button", { name: "Cancel" }));
+
+    expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
+    expect(updateByIdMock).not.toHaveBeenCalled();
+    expect(onArchiveChangeMock).not.toHaveBeenCalled();
+  });
+});