@oneuptime/common 13.0.7 → 14.0.0

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

@@ -30,9 +30,8 @@ import SloWindowType from "../../../Types/ServiceLevelObjective/SloWindowType";
 
 /*
  * The SLO overview hero, RENDERED: the verdict, the facts every number below
- * depends on, and the owners and labels strip. In particular the "window
- * filling" chip that replaced the full-width "Window not yet full" banner
- * must appear for a young rolling window and for nothing else.
+ * depends on, and ownership. The facts form a labelled definition list,
+ * and the window-filling badge appears only for a young rolling window.
  */
 
 const SLO_ID: ObjectID = new ObjectID("5f8b7c1e2d3a4b5c6d7e8f90");
@@ -97,11 +96,11 @@ const renderHero: RenderHeroFunction = (
   );
 };
 
-type ChipTextsFunction = () => Array<string>;
+type FactValuesFunction = () => Array<string>;
 
-const getChipTexts: ChipTextsFunction = (): Array<string> => {
-  return within(screen.getByRole("list", { name: "SLO at a glance" }))
-    .getAllByRole("listitem")
+const getFactValues: FactValuesFunction = (): Array<string> => {
+  return within(screen.getByLabelText("SLO at a glance"))
+    .getAllByRole("definition")
     .map((item: HTMLElement) => {
       return item.textContent || "";
     });
@@ -118,13 +117,70 @@ describe("SloOverviewHero", () => {
     expect(
       screen.getByText("Customers can pay for their basket."),
     ).toBeInTheDocument();
-    expect(getChipTexts()).toEqual([
-      "Target 99.9%",
+    const facts: HTMLElement = screen.getByLabelText("SLO at a glance");
+    expect(facts.tagName).toBe("DL");
+    expect(
+      within(facts)
+        .getAllByRole("term")
+        .map((term: HTMLElement) => {
+          return term.textContent;
+        }),
+    ).toEqual(["Target", "Compliance window", "Monitors", "Owners"]);
+    expect(getFactValues()).toEqual([
+      "99.9%",
       "Rolling 30 days",
       "3 monitors",
+      "Add owners",
     ]);
   });
 
+  test.each([
+    {
+      status: SloStatus.Healthy,
+      headline: "Within error budget",
+      tone: "text-emerald-800",
+    },
+    {
+      status: SloStatus.AtRisk,
+      headline: "Error budget running low",
+      tone: "text-amber-800",
+    },
+    {
+      status: SloStatus.BudgetExhausted,
+      headline: "Error budget exhausted",
+      tone: "text-red-800",
+    },
+    {
+      status: SloStatus.Misconfigured,
+      headline: "Cannot be evaluated",
+      tone: "text-gray-700",
+    },
+    {
+      status: SloStatus.Paused,
+      headline: "Measurement paused",
+      tone: "text-gray-700",
+    },
+  ])(
+    "renders $status with a matching headline and soft status badge",
+    ({
+      status,
+      headline,
+      tone,
+    }: {
+      status: SloStatus;
+      headline: string;
+      tone: string;
+    }) => {
+      renderHero({ slo: buildSlo({ sloStatus: status }) });
+
+      expect(screen.getByRole("heading", { level: 2 })).toHaveTextContent(
+        headline,
+      );
+      expect(screen.getByText(status)).toHaveClass("bg-gradient-to-r", tone);
+      expect(screen.queryByRole("img")).toBeNull();
+    },
+  );
+
   test("says when it was last evaluated, with the exact time on hover", () => {
     renderHero({});
 
@@ -132,7 +188,9 @@ describe("SloOverviewHero", () => {
       "slo-overview-last-evaluated",
     );
 
-    expect(lastEvaluated.textContent).toMatch(/^Evaluated .+ · every 5 min$/);
+    expect(lastEvaluated.textContent).toMatch(/^Evaluated .+/);
+    expect(lastEvaluated).not.toHaveTextContent("Runs every");
+    expect(screen.getByText("Runs every 5 minutes")).toBeInTheDocument();
 
     const time: HTMLElement = lastEvaluated.querySelector("time")!;
     expect(time).toHaveAttribute("dateTime", LAST_EVALUATED_AT.toISOString());
@@ -154,17 +212,21 @@ describe("SloOverviewHero", () => {
     );
     expect(screen.queryByText("Unknown")).toBeNull();
     expect(screen.getByTestId("slo-overview-last-evaluated")).toHaveTextContent(
-      "Not evaluated yet · runs every 5 min",
+      "Not evaluated yet",
     );
+    expect(screen.getByText("Runs every 5 minutes")).toBeInTheDocument();
+    expect(screen.getAllByText("Not evaluated yet")).toHaveLength(2);
 
     const monitorsChip: HTMLElement = screen.getByTestId(
       "slo-overview-chip-monitors",
     );
     expect(monitorsChip).toHaveTextContent("No monitors");
-    expect(monitorsChip.querySelector("span")!.className).toContain("amber");
+    expect(within(monitorsChip).getByText("No monitors")).toHaveClass(
+      "text-yellow-700",
+    );
   });
 
-  test("a young rolling window gets a 'window filling' chip instead of a banner", () => {
+  test("a young rolling window shows its filling badge alongside its compliance window", () => {
     renderHero({ slo: buildSlo({ errorBudgetTotalSeconds: 648 }) });
 
     const chip: HTMLElement = screen.getByTestId(
@@ -175,12 +237,14 @@ describe("SloOverviewHero", () => {
     expect(chip.getAttribute("title")).toContain(
       "younger than its compliance window",
     );
-    expect(getChipTexts()).toEqual([
-      "Target 99.9%",
+    const window: HTMLElement = screen.getByTestId("slo-overview-chip-window");
+    expect(window).toContainElement(chip);
+    expect(within(window).getByRole("term")).toHaveTextContent(
+      "Compliance window",
+    );
+    expect(within(window).getByRole("definition")).toHaveTextContent(
       "Rolling 30 days",
-      "Window 25% full",
-      "3 monitors",
-    ]);
+    );
   });
 
   test("a mature window, a calendar month and an averaged SLO get no window chip", () => {
@@ -196,7 +260,7 @@ describe("SloOverviewHero", () => {
       }),
     });
     expect(screen.queryByTestId("slo-overview-chip-window-fill")).toBeNull();
-    expect(getChipTexts()).toContain("Calendar month (Europe/Berlin)");
+    expect(getFactValues()).toContain("Calendar month (Europe/Berlin)");
     cleanup();
 
     renderHero({
@@ -208,29 +272,80 @@ describe("SloOverviewHero", () => {
     expect(screen.queryByTestId("slo-overview-chip-window-fill")).toBeNull();
   });
 
-  test("disabled and archived SLOs say so, and never claim a stale verdict", () => {
-    renderHero({
-      slo: buildSlo({ isEnabled: false, isArchived: true }),
-    });
+  test.each([
+    { isEnabled: false, isArchived: false, status: "Disabled" },
+    { isEnabled: true, isArchived: true, status: "Archived" },
+    { isEnabled: false, isArchived: true, status: "Archived" },
+  ])(
+    "$status overrides stale health when enabled=$isEnabled and archived=$isArchived",
+    ({
+      isEnabled,
+      isArchived,
+      status,
+    }: {
+      isEnabled: boolean;
+      isArchived: boolean;
+      status: string;
+    }) => {
+      renderHero({ slo: buildSlo({ isEnabled, isArchived }) });
+
+      expect(screen.getByTestId("slo-overview-headline")).toHaveTextContent(
+        `${status} — not being measured`,
+      );
+      expect(screen.getByText(status, { exact: true })).toHaveClass(
+        "text-gray-700",
+      );
+      expect(screen.queryByText("Healthy", { exact: true })).toBeNull();
+      expect(screen.queryByText("Within error budget")).toBeNull();
+      if (isArchived) {
+        expect(screen.queryByText("Disabled", { exact: true })).toBeNull();
+      }
+    },
+  );
 
-    expect(screen.getByTestId("slo-overview-headline")).toHaveTextContent(
-      "Archived — not being measured",
-    );
-    expect(getChipTexts()).toEqual(
-      expect.arrayContaining(["Disabled", "Archived"]),
-    );
-  });
+  test.each([undefined, ""])(
+    "an empty description (%s) adds no placeholder copy",
+    (description: string | undefined) => {
+      renderHero({ slo: buildSlo({ description }) });
+
+      expect(screen.queryByText(/No description/)).toBeNull();
+      expect(
+        screen.getByTestId("slo-overview-headline").nextElementSibling,
+      ).toBeNull();
+    },
+  );
 
-  test("an SLO without a description invites one", () => {
-    renderHero({ slo: buildSlo({ description: undefined }) });
+  test("a missing target is explicit instead of showing an incomplete percentage", () => {
+    renderHero({ slo: buildSlo({ targetPercentage: undefined }) });
 
     expect(
-      screen.getByText(
-        "No description yet. Say what this objective protects in SLO Details below.",
+      within(screen.getByTestId("slo-overview-chip-target")).getByRole(
+        "definition",
       ),
-    ).toBeInTheDocument();
+    ).toHaveTextContent("Not set");
   });
 
+  test.each([
+    { count: 0, label: "No monitors" },
+    { count: 1, label: "1 monitor" },
+    { count: 3, label: "3 monitors" },
+  ])(
+    "the $label summary links to this SLO's Monitors page",
+    ({ count, label }: { count: number; label: string }) => {
+      renderHero({ monitorCount: count });
+
+      const monitorsHref: string = RouteUtil.populateRouteParams(
+        RouteMap[PageMap.SLO_VIEW_MONITORS] as Route,
+        { modelId: SLO_ID },
+      ).toString();
+
+      expect(screen.getByRole("link", { name: label })).toHaveAttribute(
+        "href",
+        monitorsHref,
+      );
+    },
+  );
+
   describe("owners", () => {
     const ownersHref: string = RouteUtil.populateRouteParams(
       RouteMap[PageMap.SLO_VIEW_OWNERS] as Route,
@@ -286,10 +401,11 @@ describe("SloOverviewHero", () => {
     expect(screen.queryByText("No labels")).toBeNull();
   });
 
-  test("owners sit beside the evaluation time, labelled", () => {
+  test("owners are labelled within the summary facts", () => {
     renderHero({ owners: [] });
 
     const owners: HTMLElement = screen.getByTestId("slo-overview-owners");
+    expect(screen.getByLabelText("SLO at a glance")).toContainElement(owners);
     expect(owners).toHaveTextContent("Owners");
     expect(
       within(owners).getByRole("link", { name: "Add owners" }),
@@ -307,5 +423,24 @@ describe("SloOverviewHero", () => {
     expect(screen.getByRole("alert")).toHaveTextContent(
       "Could not refresh — showing the last numbers that loaded. Network error.",
     );
+    expect(getFactValues()).toContain("99.9%");
+  });
+
+  test("an in-progress refresh disables duplicate requests and keeps the summary visible", () => {
+    const onRefresh: MockFunction = getJestMockFunction();
+
+    renderHero({ onRefresh, isRefreshing: true });
+
+    const refreshButton: HTMLElement = screen.getByRole("button", {
+      name: "Refresh",
+    });
+    expect(refreshButton).toBeDisabled();
+    expect(refreshButton).toHaveAttribute("aria-disabled", "true");
+    fireEvent.click(refreshButton);
+    expect(onRefresh).not.toHaveBeenCalled();
+    expect(screen.getByTestId("slo-overview-headline")).toHaveTextContent(
+      "Within error budget",
+    );
+    expect(getFactValues()).toContain("99.9%");
   });
 });

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

@@ -0,0 +1,215 @@
+import {
+  afterEach,
+  beforeEach,
+  describe,
+  expect,
+  jest,
+  test,
+} from "@jest/globals";
+import "@testing-library/jest-dom";
+import { cleanup, screen } from "@testing-library/react";
+import * as React from "react";
+import SloViewSideMenu from "../../../../App/FeatureSet/Dashboard/src/Pages/Slo/View/SideMenu";
+import ObjectID from "../../../Types/ObjectID";
+import {
+  DESKTOP_WIDTH,
+  MOBILE_WIDTH,
+  MenuLink,
+  PROJECT_ID,
+  goTo,
+  hrefsInMenu,
+  iconCountIn,
+  isExpanded,
+  linksIn,
+  mobileSummaryText,
+  renderMenu,
+  sectionTitlesInOrder,
+  setViewportWidth,
+  titlesInMenu,
+} from "./SideMenuHarness";
+
+jest.mock("react-i18next", () => {
+  return {
+    useTranslation: () => {
+      return {
+        t: (value: string): string => {
+          return value;
+        },
+      };
+    },
+  };
+});
+
+// The count suite covers badge data; these tests exercise the real navigation.
+jest.mock("../../../UI/Utils/ModelAPI/ModelAPI", () => {
+  return {
+    __esModule: true,
+    default: {
+      count: () => {
+        return Promise.resolve(0);
+      },
+      getList: () => {
+        return Promise.resolve({ data: [], count: 0, skip: 0, limit: 0 });
+      },
+    },
+  };
+});
+
+const SLO_ID: string = "0193c0de-9999-4aaa-8bbb-000000000009";
+const SLO_PATH: string = `/dashboard/${PROJECT_ID}/slos/${SLO_ID}`;
+
+interface DetailPage {
+  title: string;
+  section: string;
+  path: string;
+}
+
+const DETAIL_PAGES: ReadonlyArray<DetailPage> = [
+  { title: "Overview", section: "Overview", path: SLO_PATH },
+  { title: "Metrics", section: "Overview", path: `${SLO_PATH}/metrics` },
+  { title: "Incidents", section: "Activity", path: `${SLO_PATH}/incidents` },
+  { title: "Alerts", section: "Activity", path: `${SLO_PATH}/alerts` },
+  { title: "Feed", section: "Activity", path: `${SLO_PATH}/feed` },
+  {
+    title: "Monitors",
+    section: "Configuration",
+    path: `${SLO_PATH}/monitors`,
+  },
+  {
+    title: "Monitor Rules",
+    section: "Configuration",
+    path: `${SLO_PATH}/monitor-rules`,
+  },
+  {
+    title: "Burn Rate Rules",
+    section: "Configuration",
+    path: `${SLO_PATH}/burn-rate-rules`,
+  },
+  { title: "Owners", section: "Management", path: `${SLO_PATH}/owners` },
+  { title: "Settings", section: "Management", path: `${SLO_PATH}/settings` },
+  {
+    title: "Audit Logs",
+    section: "Management",
+    path: `${SLO_PATH}/audit-logs`,
+  },
+  { title: "Delete SLO", section: "Management", path: `${SLO_PATH}/delete` },
+];
+
+async function renderSloMenu(): Promise<void> {
+  await renderMenu(<SloViewSideMenu modelId={new ObjectID(SLO_ID)} />);
+}
+
+describe("SLO detail side menu", () => {
+  beforeEach(() => {
+    setViewportWidth(DESKTOP_WIDTH);
+    goTo(SLO_PATH);
+  });
+
+  afterEach(() => {
+    cleanup();
+  });
+
+  test("places performance and activity before configuration and management", async () => {
+    await renderSloMenu();
+
+    expect(sectionTitlesInOrder()).toEqual([
+      "Overview",
+      "Activity",
+      "Configuration",
+      "Management",
+    ]);
+  });
+
+  test.each(["Overview", "Activity", "Configuration", "Management"])(
+    "%s contains its intended destinations in order and starts expanded",
+    async (section: string) => {
+      await renderSloMenu();
+
+      const expectedLinks: Array<MenuLink> = DETAIL_PAGES.filter(
+        (page: DetailPage): boolean => {
+          return page.section === section;
+        },
+      ).map((page: DetailPage): MenuLink => {
+        return { title: page.title, href: page.path };
+      });
+
+      expect(linksIn(section)).toEqual(expectedLinks);
+      expect(isExpanded(section)).toBe(true);
+    },
+  );
+
+  test("keeps all twelve destinations unique and fully populated", async () => {
+    await renderSloMenu();
+
+    const hrefs: Array<string> = hrefsInMenu();
+    const titles: Array<string> = titlesInMenu();
+
+    expect(hrefs).toHaveLength(12);
+    expect(hrefs).toEqual(Array.from(new Set(hrefs)));
+    expect(titles).toEqual(Array.from(new Set(titles)));
+    expect(hrefs).toEqual(
+      DETAIL_PAGES.map((page: DetailPage): string => {
+        return page.path;
+      }),
+    );
+  });
+
+  test.each(DETAIL_PAGES)(
+    "marks only $title active on desktop in $section",
+    async (page: DetailPage) => {
+      goTo(page.path);
+      await renderSloMenu();
+
+      const activeLink: HTMLElement = screen.getByRole("link", {
+        name: page.title,
+      });
+
+      expect(activeLink).toHaveAttribute("href", page.path);
+      expect(activeLink).toHaveClass(
+        "bg-indigo-50",
+        "text-indigo-700",
+        "font-semibold",
+      );
+      expect(isExpanded(page.section)).toBe(true);
+      expect(document.querySelectorAll("a.bg-indigo-50")).toHaveLength(1);
+    },
+  );
+
+  test.each(DETAIL_PAGES)(
+    "the mobile summary identifies $section / $title",
+    async (page: DetailPage) => {
+      setViewportWidth(MOBILE_WIDTH);
+      goTo(page.path);
+      await renderSloMenu();
+
+      expect(mobileSummaryText()).toContain(`${page.section} / ${page.title}`);
+    },
+  );
+
+  test("every destination retains its label and icon", async () => {
+    await renderSloMenu();
+
+    sectionTitlesInOrder().forEach((section: string) => {
+      const links: Array<MenuLink> = linksIn(section);
+
+      expect(iconCountIn(section)).toBe(links.length);
+      links.forEach((link: MenuLink) => {
+        expect(link.title.trim()).not.toBe("");
+      });
+    });
+  });
+
+  test("keeps deletion last in Management with its danger hover treatment", async () => {
+    await renderSloMenu();
+
+    const managementLinks: Array<MenuLink> = linksIn("Management");
+
+    expect(managementLinks[managementLinks.length - 1]).toEqual({
+      title: "Delete SLO",
+      href: `${SLO_PATH}/delete`,
+    });
+    expect(screen.getByRole("link", { name: "Delete SLO" })).toHaveClass(
+      "danger-on-hover",
+    );
+  });
+});

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

@@ -7,7 +7,13 @@ import {
   test,
 } from "@jest/globals";
 import "@testing-library/jest-dom";
-import { act, cleanup, waitFor, within } from "@testing-library/react";
+import {
+  act,
+  cleanup,
+  fireEvent,
+  waitFor,
+  within,
+} from "@testing-library/react";
 import * as React from "react";
 import getJestMockFunction, { MockFunction } from "../../MockType";
 
@@ -94,9 +100,11 @@ import {
   MenuLink,
   PROJECT_ID,
   goTo,
+  isExpanded,
   linksIn,
   renderMenu,
   sectionRoot,
+  sectionToggle,
   setViewportWidth,
 } from "./SideMenuHarness";
 
@@ -162,7 +170,7 @@ function idsOf(value: unknown): Array<string> {
 
 function anchorFor(page: PageMap): HTMLAnchorElement {
   const anchor: HTMLAnchorElement | undefined = Array.from(
-    sectionRoot("SLO").querySelectorAll<HTMLAnchorElement>("a"),
+    sectionRoot("Activity").querySelectorAll<HTMLAnchorElement>("a"),
   ).find((candidate: HTMLAnchorElement): boolean => {
     return candidate.getAttribute("href") === pagePath(page);
   });
@@ -246,7 +254,7 @@ describe("SLO side menu open counts", () => {
       expect(mockCount).toHaveBeenCalledTimes(2);
     });
 
-    const titles: Array<string> = linksIn("SLO").map(
+    const titles: Array<string> = linksIn("Activity").map(
       (link: MenuLink): string => {
         return link.title;
       },
@@ -299,6 +307,35 @@ describe("SLO side menu open counts", () => {
     });
   });
 
+  test("collapsing Activity preserves its destinations and loaded badges", async () => {
+    await renderSloMenu();
+
+    await waitFor(() => {
+      expect(badgesInMenu()).toHaveLength(2);
+    });
+
+    const activityLinks: Array<MenuLink> = linksIn("Activity");
+
+    fireEvent.click(sectionToggle("Activity"));
+
+    expect(isExpanded("Activity")).toBe(false);
+    expect(linksIn("Activity")).toEqual(activityLinks);
+
+    fireEvent.click(sectionToggle("Activity"));
+
+    expect(isExpanded("Activity")).toBe(true);
+    expect(linksIn("Activity")).toEqual(activityLinks);
+    expect(
+      within(anchorFor(PageMap.SLO_VIEW_ALERTS)).getByText(`${OPEN_ALERTS}`),
+    ).toBeInTheDocument();
+    expect(
+      within(anchorFor(PageMap.SLO_VIEW_INCIDENTS)).getByText(
+        `${OPEN_INCIDENTS}`,
+      ),
+    ).toBeInTheDocument();
+    expect(mockCount).toHaveBeenCalledTimes(2);
+  });
+
   test("asks for no count while the unresolved states are still loading", async () => {
     mockGetUnresolvedIncidentStates.mockImplementation(() => {
       return new Promise<Array<IncidentState>>(() => {