@oneuptime/common 12.0.33 → 13.0.0

package/Tests/UI/Components/MonitorGraphs/UptimeBarDayModal.test.tsx

@@ -0,0 +1,302 @@
+import "@testing-library/jest-dom";
+import { fireEvent, render, screen } from "@testing-library/react";
+import React from "react";
+import { describe, expect, jest, test } from "@jest/globals";
+import UptimeBarDayModal from "../../../../UI/Components/MonitorGraphs/UptimeBarDayModal";
+import { StatusDuration } from "../../../../UI/Components/Graphs/UptimeDaySummary";
+import { Green, Red } from "../../../../Types/BrandColors";
+import Color from "../../../../Types/Color";
+import OneUptimeDate from "../../../../Types/Date";
+import UptimeBarTooltipIncident from "../../../../Types/Monitor/UptimeBarTooltipIncident";
+import UptimeHistoryLabels, {
+  DefaultUptimeHistoryLabels,
+} from "../../../../Types/Monitor/UptimeHistoryLabels";
+
+/*
+ * Contract under test - the dialog a day on the uptime strip opens.
+ *
+ * It used to be an incident list and nothing else, which was fine while only
+ * days with incidents could open it. Now that every day opens - the only way a
+ * phone or a keyboard can read a day, since the tooltip beside it is
+ * hover-only - it has to carry the same reading the tooltip does. A dialog
+ * that says "no incidents" on a day the service was down for six hours is
+ * worse than no dialog.
+ */
+
+const DAY: Date = new Date("2026-03-03T12:00:00.000Z");
+
+function makeIncident(
+  overrides: Partial<UptimeBarTooltipIncident> = {},
+): UptimeBarTooltipIncident {
+  return {
+    id: "incident-1",
+    title: "Checkout API is down",
+    declaredAt: DAY,
+    monitorIds: [],
+    ...overrides,
+  };
+}
+
+const DOWNTIME: StatusDuration = {
+  label: "Offline",
+  seconds: 60 * 60 * 6,
+  color: Red,
+  isDowntime: true,
+};
+
+const UPTIME: StatusDuration = {
+  label: "Operational",
+  seconds: 60 * 60 * 18,
+  color: Green,
+  isDowntime: false,
+};
+
+describe("UptimeBarDayModal - the day's reading", () => {
+  test("shows the uptime percentage when the caller measured the day", () => {
+    render(
+      <UptimeBarDayModal
+        date={DAY}
+        incidents={[]}
+        hasEvents={true}
+        uptimePercent={75}
+        statusDurations={[DOWNTIME, UPTIME]}
+        onClose={() => {}}
+      />,
+    );
+
+    expect(screen.getByText("Uptime")).toBeInTheDocument();
+    expect(screen.getByText("75.00")).toBeInTheDocument();
+  });
+
+  test("names every status the day passed through", () => {
+    render(
+      <UptimeBarDayModal
+        date={DAY}
+        incidents={[]}
+        hasEvents={true}
+        uptimePercent={75}
+        statusDurations={[DOWNTIME, UPTIME]}
+        onClose={() => {}}
+      />,
+    );
+
+    expect(screen.getByText("Offline")).toBeInTheDocument();
+    expect(screen.getByText("Operational")).toBeInTheDocument();
+  });
+
+  /*
+   * A day before the monitor existed is not a day of downtime, and must not
+   * be drawn as 0%.
+   */
+  test("a day with no timeline rows says so rather than showing 0%", () => {
+    render(
+      <UptimeBarDayModal
+        date={DAY}
+        incidents={[]}
+        hasEvents={false}
+        uptimePercent={0}
+        statusDurations={[]}
+        onClose={() => {}}
+      />,
+    );
+
+    expect(
+      screen.getByText("No monitoring data for this day"),
+    ).toBeInTheDocument();
+    expect(screen.queryByText("Uptime")).not.toBeInTheDocument();
+  });
+
+  /*
+   * The dashboard's monitor-group page still opens this dialog without a
+   * reading. Rendering "0% uptime" there would be inventing a measurement
+   * nobody took.
+   */
+  test("a caller that measured nothing gets no uptime block at all", () => {
+    render(<UptimeBarDayModal date={DAY} incidents={[]} onClose={() => {}} />);
+
+    expect(screen.queryByText("Uptime")).not.toBeInTheDocument();
+    expect(
+      screen.queryByText("No monitoring data for this day"),
+    ).not.toBeInTheDocument();
+    expect(screen.getByText("No incidents")).toBeInTheDocument();
+  });
+});
+
+describe("UptimeBarDayModal - incidents", () => {
+  test("a quiet day says it was quiet", () => {
+    render(
+      <UptimeBarDayModal
+        date={DAY}
+        incidents={[]}
+        hasEvents={true}
+        uptimePercent={100}
+        statusDurations={[UPTIME]}
+        onClose={() => {}}
+      />,
+    );
+
+    expect(screen.getByText("No incidents")).toBeInTheDocument();
+    expect(
+      screen.getByText("No incidents were reported on this day."),
+    ).toBeInTheDocument();
+  });
+
+  test("lists the incidents declared that day", () => {
+    render(
+      <UptimeBarDayModal
+        date={DAY}
+        incidents={[
+          makeIncident(),
+          makeIncident({ id: "incident-2", title: "Search is degraded" }),
+        ]}
+        onClose={() => {}}
+      />,
+    );
+
+    expect(screen.getByText("Checkout API is down")).toBeInTheDocument();
+    expect(screen.getByText("Search is degraded")).toBeInTheDocument();
+    expect(screen.queryByText("No incidents")).not.toBeInTheDocument();
+  });
+
+  test("clicking an incident hands its id back", () => {
+    const onIncidentClick: ReturnType<typeof jest.fn<(id: string) => void>> =
+      jest.fn<(id: string) => void>();
+
+    render(
+      <UptimeBarDayModal
+        date={DAY}
+        incidents={[makeIncident()]}
+        onIncidentClick={onIncidentClick}
+        onClose={() => {}}
+      />,
+    );
+
+    fireEvent.click(screen.getByText("Checkout API is down"));
+
+    expect(onIncidentClick).toHaveBeenCalledWith("incident-1");
+  });
+
+  test("the dialog is titled with the day it is about", () => {
+    render(<UptimeBarDayModal date={DAY} incidents={[]} onClose={() => {}} />);
+
+    expect(
+      screen.getByText(
+        OneUptimeDate.getDateAsUserFriendlyLocalFormattedString(DAY, true),
+      ),
+    ).toBeInTheDocument();
+  });
+
+  test("one incident is described in the singular", () => {
+    render(
+      <UptimeBarDayModal
+        date={DAY}
+        incidents={[makeIncident()]}
+        onClose={() => {}}
+      />,
+    );
+
+    expect(
+      screen.getByText("1 incident reported on this day"),
+    ).toBeInTheDocument();
+  });
+
+  test("more than one is counted", () => {
+    render(
+      <UptimeBarDayModal
+        date={DAY}
+        incidents={[
+          makeIncident(),
+          makeIncident({ id: "incident-2" }),
+          makeIncident({ id: "incident-3" }),
+        ]}
+        onClose={() => {}}
+      />,
+    );
+
+    expect(
+      screen.getByText("3 incidents reported on this day"),
+    ).toBeInTheDocument();
+  });
+
+  test("a severity and a state are shown when the incident carries them", () => {
+    render(
+      <UptimeBarDayModal
+        date={DAY}
+        incidents={[
+          makeIncident({
+            incidentSeverity: { name: "Major", color: new Color("#ff0000") },
+            currentIncidentState: {
+              name: "Identified",
+              color: new Color("#ffaa00"),
+            },
+          }),
+        ]}
+        onClose={() => {}}
+      />,
+    );
+
+    expect(screen.getByText("Major")).toBeInTheDocument();
+    expect(screen.getByText("Identified")).toBeInTheDocument();
+  });
+});
+
+describe("UptimeBarDayModal - translation", () => {
+  /*
+   * The status page is public and ships in fifteen languages. A dialog every
+   * day now opens cannot be the one English thing on it.
+   */
+  test("every string the caller supplies is used", () => {
+    const labels: UptimeHistoryLabels = {
+      ...DefaultUptimeHistoryLabels,
+      uptime: "Disponibilite",
+      noIncidents: "Aucun incident",
+      noIncidentsDescription: "Aucun incident signale ce jour-la.",
+      close: "Fermer",
+    };
+
+    render(
+      <UptimeBarDayModal
+        date={DAY}
+        incidents={[]}
+        hasEvents={true}
+        uptimePercent={100}
+        statusDurations={[UPTIME]}
+        labels={labels}
+        onClose={() => {}}
+      />,
+    );
+
+    expect(screen.getByText("Disponibilite")).toBeInTheDocument();
+    expect(screen.getByText("Aucun incident")).toBeInTheDocument();
+    expect(
+      screen.getByText("Aucun incident signale ce jour-la."),
+    ).toBeInTheDocument();
+    expect(screen.getByText("Fermer")).toBeInTheDocument();
+  });
+
+  test("the incident count sentence is translated too", () => {
+    const labels: UptimeHistoryLabels = {
+      ...DefaultUptimeHistoryLabels,
+      incidentsOnThisDay: "{{total}} incidents signales",
+      declared: "Declare le",
+    };
+
+    render(
+      <UptimeBarDayModal
+        date={DAY}
+        incidents={[makeIncident(), makeIncident({ id: "incident-2" })]}
+        labels={labels}
+        onClose={() => {}}
+      />,
+    );
+
+    expect(screen.getByText("2 incidents signales")).toBeInTheDocument();
+    expect(screen.getAllByText(/Declare le/)).toHaveLength(2);
+  });
+
+  test("without labels it falls back to English", () => {
+    render(<UptimeBarDayModal date={DAY} incidents={[]} onClose={() => {}} />);
+
+    expect(screen.getByText("No incidents")).toBeInTheDocument();
+  });
+});

package/Tests/UI/Components/MonitorTemplateVariables/TemplateVariablesCatalog.test.ts

@@ -15,6 +15,21 @@ const MONITOR_GROUP_TITLE: string = "Monitor";
 const SERIES_GROUP_TITLE: string = "Series Labels (per-host / per-container)";
 const METRIC_GROUP_TITLE: string = "Metric";
 
+/*
+ * The ready-made renderings of the breaching series' identity
+ * (seriesResourceSuffix and friends). Emitted for EVERY monitor type, right
+ * after the identity group: MonitorTemplateUtil defines these
+ * unconditionally, and they resolve to an empty string on an ungrouped
+ * monitor rather than leaving a raw {{...}} in the rendered title.
+ */
+const RESOURCE_GROUP_TITLE: string = "Affected Resource";
+
+/* Every getVariables() answer opens with these two, in this order. */
+const ALWAYS_GROUP_TITLES: Array<string> = [
+  MONITOR_GROUP_TITLE,
+  RESOURCE_GROUP_TITLE,
+];
+
 /*
  * The eight infrastructure/telemetry monitor types that (a) get the single
  * "Metric" per-type group AND (b) additionally get the "Series Labels" group.
@@ -349,11 +364,11 @@ describe("TemplateVariablesCatalog.getVariables - per-type groups", () => {
     });
   }
 
-  it("orders the identity group before the per-type group", () => {
+  it("orders the identity and resource groups before the per-type group", () => {
     const groups: Array<TemplateVariableGroup> =
       TemplateVariablesCatalog.getVariables({ monitorType: MonitorType.DNS });
 
-    expect(titlesOf(groups)).toEqual([MONITOR_GROUP_TITLE, "DNS"]);
+    expect(titlesOf(groups)).toEqual([...ALWAYS_GROUP_TITLES, "DNS"]);
   });
 
   it("treats API and Website as the same case (identical Response group)", () => {
@@ -442,12 +457,11 @@ describe("TemplateVariablesCatalog.getVariables - per-type groups", () => {
 
 describe("TemplateVariablesCatalog.getVariables - identity-only monitor types", () => {
   for (const monitorType of IDENTITY_ONLY_TYPES) {
-    it(`returns only the identity group for ${monitorType} (default branch, no series labels)`, () => {
+    it(`returns only the always-on groups for ${monitorType} (default branch, no series labels)`, () => {
       const groups: Array<TemplateVariableGroup> =
         TemplateVariablesCatalog.getVariables({ monitorType });
 
-      expect(groups.length).toBe(1);
-      expect(titlesOf(groups)).toEqual([MONITOR_GROUP_TITLE]);
+      expect(titlesOf(groups)).toEqual(ALWAYS_GROUP_TITLES);
     });
   }
 
@@ -459,13 +473,13 @@ describe("TemplateVariablesCatalog.getVariables - identity-only monitor types",
       });
 
     expect(findGroup(groups, SERIES_GROUP_TITLE)).toBeUndefined();
-    expect(groups.length).toBe(1);
+    expect(titlesOf(groups)).toEqual(ALWAYS_GROUP_TITLES);
   });
 });
 
 describe("TemplateVariablesCatalog.getVariables - infrastructure series labels", () => {
   for (const monitorType of INFRA_TYPES) {
-    it(`emits identity, Metric and series-labels groups in order for ${monitorType}`, () => {
+    it(`emits identity, resource, Metric and series-labels groups in order for ${monitorType}`, () => {
       const groups: Array<TemplateVariableGroup> =
         TemplateVariablesCatalog.getVariables({
           monitorType,
@@ -473,7 +487,7 @@ describe("TemplateVariablesCatalog.getVariables - infrastructure series labels",
         });
 
       expect(titlesOf(groups)).toEqual([
-        MONITOR_GROUP_TITLE,
+        ...ALWAYS_GROUP_TITLES,
         METRIC_GROUP_TITLE,
         SERIES_GROUP_TITLE,
       ]);
@@ -612,7 +626,7 @@ describe("TemplateVariablesCatalog.getVariables - non-infra types ignore series
       });
 
     expect(findGroup(groups, SERIES_GROUP_TITLE)).toBeUndefined();
-    expect(titlesOf(groups)).toEqual([MONITOR_GROUP_TITLE, "Response"]);
+    expect(titlesOf(groups)).toEqual([...ALWAYS_GROUP_TITLES, "Response"]);
   });
 });
 
@@ -621,7 +635,7 @@ describe("TemplateVariablesCatalog.getVariables - structural invariants", () =>
     MonitorType,
   ) as Array<MonitorType>;
 
-  it("returns between one and three groups for every monitor type", () => {
+  it("returns between two and four groups for every monitor type, always opening with the two unconditional ones", () => {
     for (const monitorType of allTypes) {
       const groups: Array<TemplateVariableGroup> =
         TemplateVariablesCatalog.getVariables({
@@ -629,8 +643,10 @@ describe("TemplateVariablesCatalog.getVariables - structural invariants", () =>
           seriesAttributeKeys: ["host.name"],
         });
 
-      expect(groups.length).toBeGreaterThanOrEqual(1);
-      expect(groups.length).toBeLessThanOrEqual(3);
+      /* Identity + Affected Resource, then at most a per-type and a series group. */
+      expect(groups.length).toBeGreaterThanOrEqual(2);
+      expect(groups.length).toBeLessThanOrEqual(4);
+      expect(titlesOf(groups).slice(0, 2)).toEqual(ALWAYS_GROUP_TITLES);
     }
   });
 

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

@@ -0,0 +1,74 @@
+import Modal from "../../../UI/Components/Modal/Modal";
+import SideOver from "../../../UI/Components/SideOver/SideOver";
+import { hasOpenModalDialog } from "../../../UI/Utils/GlobalKeyboardShortcut";
+import { describe, expect, it } from "@jest/globals";
+import "@testing-library/jest-dom";
+import { render } from "@testing-library/react";
+import React from "react";
+import getJestMockFunction, { MockFunction } from "../../MockType";
+
+/*
+ * WHY THIS FILE EXISTS
+ *
+ * The global shortcut layer stands down while a modal dialog is open, and it
+ * decides that by querying the DOM for [role="dialog"][aria-modal="true"] —
+ * an agreement with components it never imports. Unit tests on either side
+ * would both keep passing if Modal stopped setting aria-modal, and the only
+ * symptom in the product would be that "g" then a letter navigates away from
+ * a half-filled form.
+ *
+ * So the guard is exercised against the real components rather than a
+ * hand-written fixture.
+ */
+
+describe("the shortcut layer's dialog guard, against the real components", () => {
+  it("sees nothing on a page with no dialogs", () => {
+    render(<div>An ordinary page</div>);
+
+    expect(hasOpenModalDialog(document)).toBe(false);
+  });
+
+  it("sees an open Modal", () => {
+    const onClose: MockFunction = getJestMockFunction();
+
+    render(
+      <Modal title="Create Monitor" onClose={onClose}>
+        <div>A half-filled form</div>
+      </Modal>,
+    );
+
+    expect(hasOpenModalDialog(document)).toBe(true);
+  });
+
+  it("does not see a SideOver, which leaves the page behind it live", () => {
+    /*
+     * SideOver sets role="dialog" WITHOUT aria-modal on purpose — the page
+     * behind it is still usable, so its shortcuts should still work.
+     */
+    const onClose: MockFunction = getJestMockFunction();
+
+    render(
+      <SideOver title="Filters" description="Narrow the list" onClose={onClose}>
+        <div>Panel body</div>
+      </SideOver>,
+    );
+
+    expect(hasOpenModalDialog(document)).toBe(false);
+  });
+
+  it("stops seeing a Modal once it unmounts", () => {
+    const onClose: MockFunction = getJestMockFunction();
+
+    const { unmount } = render(
+      <Modal title="Create Monitor" onClose={onClose}>
+        <div>A half-filled form</div>
+      </Modal>,
+    );
+
+    expect(hasOpenModalDialog(document)).toBe(true);
+
+    unmount();
+
+    expect(hasOpenModalDialog(document)).toBe(false);
+  });
+});