@oneuptime/common 12.0.29 → 12.0.31

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

@@ -1,18 +1,262 @@
-/** @timezone Europe/London */
+/** @timezone UTC */
 
+import { afterEach, describe, expect, test } from "@jest/globals";
+import OneUptimeDate from "../../../Types/Date";
+import Timezone from "../../../Types/Timezone";
+import XAxisMaxMin from "../../../UI/Components/Charts/Types/XAxis/XAxisMaxMin";
+import XAxisPrecision from "../../../UI/Components/Charts/Types/XAxis/XAxisPrecision";
 import XAxisUtil from "../../../UI/Components/Charts/Utils/XAxis";
 
-describe("XAxisUtil", () => {
-  test("formats past-day chart labels in local BST time instead of UTC", () => {
+/*
+ * A chart's x-axis label is the IDENTITY of its bucket, not decoration:
+ * DataPointUtil places a series row by finding the first row whose label
+ * matches, TimeAnnotationUtil resolves an event marker the same way, and
+ * recharts' categorical scale resolves no category at all once its domain
+ * holds a duplicate.
+ *
+ * These tests hold the property that makes all three safe — inside any one
+ * window, no two ticks may share a label — and the corollary that a window
+ * short enough not to need help keeps its short labels.
+ */
+
+const HOUR_IN_MS: number = 60 * 60 * 1000;
+
+const WINDOW_START: Date = new Date("2026-03-02T00:00:00.000Z");
+
+function windowOf(
+  hours: number,
+  start: Date = WINDOW_START,
+): {
+  xAxisMin: XAxisMaxMin;
+  xAxisMax: XAxisMaxMin;
+} {
+  return {
+    xAxisMin: start,
+    xAxisMax: new Date(start.getTime() + hours * HOUR_IN_MS),
+  };
+}
+
+function labelsFor(bounds: {
+  xAxisMin: XAxisMaxMin;
+  xAxisMax: XAxisMaxMin;
+}): Array<string> {
+  const formatter: (value: Date) => string = XAxisUtil.getFormatter(bounds);
+  return XAxisUtil.getPrecisionIntervals(bounds).map((interval: Date) => {
+    return formatter(interval);
+  });
+}
+
+afterEach((): void => {
+  OneUptimeDate.setUserTimezone(null);
+});
+
+describe("XAxisUtil label uniqueness", () => {
+  test("a 24 hour window labels every one of its 97 ticks distinctly", () => {
+    /*
+     * The reported bug. A 24h window sits on the fifteen-minute tier and
+     * spans 97 interval starts, but a bare "HH:mm" only has 96 readings in
+     * a day — the first and last tick both read "00:00", so the last
+     * bucket's data and annotations were folded onto the first.
+     */
+    const bounds: ReturnType<typeof windowOf> = windowOf(24);
+
+    expect(XAxisUtil.getPrecision(bounds)).toBe(
+      XAxisPrecision.EVERY_FIFTEEN_MINUTES,
+    );
+
+    const labels: Array<string> = labelsFor(bounds);
+
+    expect(labels).toHaveLength(97);
+    expect(new Set(labels).size).toBe(97);
+  });
+
+  test("a 48 hour window labels every one of its 97 ticks distinctly", () => {
+    /*
+     * The severe case. A 48h window sits on the thirty-minute tier: 97
+     * interval starts over a bare "HH:mm" that has only 48 readings, so
+     * every label appeared exactly twice and the whole of day two merged
+     * onto day one.
+     */
+    const bounds: ReturnType<typeof windowOf> = windowOf(48);
+
+    expect(XAxisUtil.getPrecision(bounds)).toBe(
+      XAxisPrecision.EVERY_THIRTY_MINUTES,
+    );
+
+    const labels: Array<string> = labelsFor(bounds);
+
+    expect(labels).toHaveLength(97);
+    expect(new Set(labels).size).toBe(97);
+  });
+
+  test.each([
+    ["6 hours", 6, 73],
+    ["12 hours", 12, 145],
+    ["13 hours", 13, 53],
+    ["23 hours", 23, 93],
+    ["24 hours", 24, 97],
+    ["36 hours", 36, 73],
+    ["48 hours", 48, 97],
+    ["72 hours", 72, 145],
+    ["5 days", 120, 121],
+  ])(
+    "%s: no two ticks share a label",
+    (_name: string, hours: number, expectedTicks: number): void => {
+      const labels: Array<string> = labelsFor(windowOf(hours));
+
+      expect(labels).toHaveLength(expectedTicks);
+      expect(new Set(labels).size).toBe(labels.length);
+    },
+  );
+
+  test("no window across three days repeats a label, at any tier", () => {
+    /*
+     * The property itself, swept rather than sampled — including windows
+     * that start off a clean boundary, which is what a live "last N hours"
+     * range always does.
+     */
+    const start: Date = new Date("2026-03-02T07:23:00.000Z");
+    const repeating: Array<string> = [];
+
+    for (let minutes: number = 15; minutes <= 3 * 24 * 60; minutes += 97) {
+      const bounds: { xAxisMin: XAxisMaxMin; xAxisMax: XAxisMaxMin } = {
+        xAxisMin: start,
+        xAxisMax: new Date(start.getTime() + minutes * 60 * 1000),
+      };
+      const labels: Array<string> = labelsFor(bounds);
+      if (new Set(labels).size !== labels.length) {
+        repeating.push(
+          `${minutes}min: ${labels.length} ticks, ${new Set(labels).size} distinct`,
+        );
+      }
+    }
+
+    expect(repeating).toEqual([]);
+  });
+});
+
+describe("XAxisUtil label verbosity", () => {
+  test("a window that cannot wrap the clock keeps its bare time labels", () => {
+    /*
+     * The date is bought at the cost of nearly tripling the label width,
+     * so it is only spent where a bare reading would be ambiguous. 23h is
+     * the last window that cannot repeat one.
+     */
+    const labels: Array<string> = labelsFor(windowOf(23));
+
+    expect(labels[0]).toBe("00:00");
+    expect(labels[labels.length - 1]).toBe("23:00");
+  });
+
+  test("a window that can wrap the clock says which day each tick is", () => {
+    const labels: Array<string> = labelsFor(windowOf(48));
+
+    expect(labels[0]).toBe("02 Mar, 00:00");
+    expect(labels[labels.length - 1]).toBe("04 Mar, 00:00");
+    // The same clock reading on the two days is now two different labels.
+    expect(labels).toContain("03 Mar, 00:00");
+  });
+
+  test("the day-qualified form matches the shape the hourly tier already uses", () => {
+    /*
+     * EVERY_HOUR and every coarser tier have carried "DD MMM, HH:00" for
+     * this same reason all along, so the finer tiers borrow its shape
+     * rather than inventing one.
+     */
+    const hourly: Array<string> = labelsFor(windowOf(5 * 24));
+    const subHourly: Array<string> = labelsFor(windowOf(48));
+
+    expect(hourly[0]).toBe("02 Mar, 00:00");
+    expect(subHourly[0]).toBe("02 Mar, 00:00");
+  });
+});
+
+describe("XAxisUtil labels across a daylight saving transition", () => {
+  /*
+   * The browser reports UTC here (see the docblock) while the user has
+   * configured London — the normal case for anyone who has set a timezone,
+   * and the one where a transition in the configured zone is invisible to
+   * the interval walker.
+   */
+
+  test("clocks going back do not give two ticks the same label", () => {
+    /*
+     * On 2026-10-25 London runs 01:00-01:59 BST and then 01:00-01:59 GMT.
+     * A four hour window is nowhere near long enough to wrap the clock,
+     * but the replayed hour repeated twelve five-minute labels — and the
+     * date does not settle it either, since both readings are on the 25th.
+     */
+    OneUptimeDate.setUserTimezone("Europe/London" as Timezone);
+
+    const bounds: ReturnType<typeof windowOf> = windowOf(
+      4,
+      new Date("2026-10-25T00:00:00.000Z"),
+    );
+    const labels: Array<string> = labelsFor(bounds);
+
+    expect(new Set(labels).size).toBe(labels.length);
+    expect(labels).toContain("25 Oct, 01:00 BST");
+    expect(labels).toContain("25 Oct, 01:00 GMT");
+  });
+
+  test("clocks going forward stay on the plain form", () => {
+    /*
+     * A spring-forward skips an hour rather than replaying one, so it
+     * cannot produce a duplicate and must not cost the axis any width.
+     */
+    OneUptimeDate.setUserTimezone("Europe/London" as Timezone);
+
+    const bounds: ReturnType<typeof windowOf> = windowOf(
+      4,
+      new Date("2026-03-29T00:00:00.000Z"),
+    );
+    const labels: Array<string> = labelsFor(bounds);
+
+    expect(new Set(labels).size).toBe(labels.length);
+    for (const label of labels) {
+      expect(label).toMatch(/^\d{2}:\d{2}$/);
+    }
+  });
+
+  test("an ordinary window in the same zone is untouched", () => {
+    OneUptimeDate.setUserTimezone("Europe/London" as Timezone);
+
+    const labels: Array<string> = labelsFor(
+      windowOf(6, new Date("2026-06-01T00:00:00.000Z")),
+    );
+
+    expect(new Set(labels).size).toBe(labels.length);
+    expect(labels[0]).toBe("01:00");
+  });
+});
+
+describe("XAxisUtil formats in the configured timezone", () => {
+  test("past-day labels read in local BST time instead of UTC", () => {
+    OneUptimeDate.setUserTimezone("Europe/London" as Timezone);
+
     const formatter: (value: Date) => string = XAxisUtil.getFormatter({
       xAxisMin: new Date("2026-04-06T14:00:00.000Z"),
       xAxisMax: new Date("2026-04-07T14:00:00.000Z"),
     });
 
     /*
-     * A 24h window now uses the fifteen-minute precision tier, whose labels
-     * are local wall-clock times: 07:30 UTC is 08:30 in BST.
+     * A 24h window uses the fifteen-minute tier, and is exactly long
+     * enough to wrap the clock — so the label carries its day. 07:30 UTC
+     * is 08:30 BST on the 7th.
      */
+    expect(formatter(new Date("2026-04-07T07:30:00.000Z"))).toBe(
+      "07 Apr, 08:30",
+    );
+  });
+
+  test("a window too short to wrap still reads in local BST time", () => {
+    OneUptimeDate.setUserTimezone("Europe/London" as Timezone);
+
+    const formatter: (value: Date) => string = XAxisUtil.getFormatter({
+      xAxisMin: new Date("2026-04-07T02:00:00.000Z"),
+      xAxisMax: new Date("2026-04-07T14:00:00.000Z"),
+    });
+
     expect(formatter(new Date("2026-04-07T07:30:00.000Z"))).toBe("08:30");
   });
 
@@ -28,4 +272,25 @@ describe("XAxisUtil", () => {
 
     expect(originalDate.toISOString()).toBe("2026-04-07T07:30:45.000Z");
   });
+
+  test("the weekly tier reads its day and its month in the same zone", () => {
+    /*
+     * These used to be mixed inside one label — the day came from the
+     * browser's clock and the month from the configured one — so a tick
+     * near midnight could report a day from one date and a month from
+     * another.
+     */
+    OneUptimeDate.setUserTimezone("Pacific/Auckland" as Timezone);
+
+    const formatter: (value: Date) => string = XAxisUtil.getFormatter({
+      xAxisMin: new Date("2026-01-01T00:00:00.000Z"),
+      xAxisMax: new Date("2026-03-01T00:00:00.000Z"),
+    });
+
+    /*
+     * 31 Jan 23:00 UTC is already 1 Feb in Auckland (UTC+13). Both halves
+     * of the label have to agree on that.
+     */
+    expect(formatter(new Date("2026-01-31T23:00:00.000Z"))).toBe("01 Feb");
+  });
 });

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

@@ -0,0 +1,113 @@
+/** @timezone Europe/London */
+
+import { describe, expect, test } from "@jest/globals";
+import XAxisMaxMin from "../../../UI/Components/Charts/Types/XAxis/XAxisMaxMin";
+import XAxisUtil from "../../../UI/Components/Charts/Utils/XAxis";
+
+/*
+ * The daylight-saving half of the label-uniqueness property, in the OTHER
+ * of the two configurations it has to hold in.
+ *
+ * OneUptimeDate.getCurrentTimezone() is `userTimezone || moment.tz.guess()`,
+ * so a user who has never opened User Settings reads dates in the zone the
+ * browser reports — the configured and browser zones are the SAME. That is
+ * this file (the docblock sets both to London). XAxis.test.ts covers the
+ * other configuration, where a user has picked a zone the browser does not
+ * report.
+ *
+ * The two behave differently and both need holding: the interval walker
+ * steps in browser wall-clock time, so when the zones agree it walks
+ * straight over the repeated hour and never emits it twice, while when
+ * they differ the transition is invisible to it and the hour is emitted
+ * twice over.
+ */
+
+const WINDOW_START: Date = new Date("2026-10-25T00:00:00.000Z");
+
+/*
+ * London's 2026 fall-back: 02:00 BST becomes 01:00 GMT, so 01:00-01:59
+ * is a wall-clock reading that names two different instants that day.
+ */
+const FOUR_HOURS_ACROSS_THE_FALL_BACK: {
+  xAxisMin: XAxisMaxMin;
+  xAxisMax: XAxisMaxMin;
+} = {
+  xAxisMin: WINDOW_START,
+  xAxisMax: new Date(WINDOW_START.getTime() + 4 * 60 * 60 * 1000),
+};
+
+function labelsFor(bounds: {
+  xAxisMin: XAxisMaxMin;
+  xAxisMax: XAxisMaxMin;
+}): Array<string> {
+  const formatter: (value: Date) => string = XAxisUtil.getFormatter(bounds);
+  return XAxisUtil.getPrecisionIntervals(bounds).map((interval: Date) => {
+    return formatter(interval);
+  });
+}
+
+/** The zone London is really in at `date`, straight from the platform. */
+function actualZoneAbbr(date: Date): string {
+  return (
+    new Intl.DateTimeFormat("en-GB", {
+      timeZone: "Europe/London",
+      timeZoneName: "short",
+    })
+      .formatToParts(date)
+      .find((part: Intl.DateTimeFormatPart): boolean => {
+        return part.type === "timeZoneName";
+      })?.value || ""
+  );
+}
+
+describe("a fall-back window when the browser and configured zones agree", () => {
+  test("no two ticks share a label", () => {
+    const labels: Array<string> = labelsFor(FOUR_HOURS_ACROSS_THE_FALL_BACK);
+
+    expect(new Set(labels).size).toBe(labels.length);
+  });
+
+  test("every tick names the zone it is really in", () => {
+    /*
+     * The labels carry a zone abbreviation here, and an abbreviation that
+     * lied would be worse than none — a reader would take an instant for
+     * one an hour away. Checked against the platform's own answer rather
+     * than against our formatter.
+     */
+    const intervals: Array<Date> = XAxisUtil.getPrecisionIntervals(
+      FOUR_HOURS_ACROSS_THE_FALL_BACK,
+    );
+    const labels: Array<string> = labelsFor(FOUR_HOURS_ACROSS_THE_FALL_BACK);
+
+    for (let index: number = 0; index < intervals.length; index++) {
+      expect(labels[index]).toContain(actualZoneAbbr(intervals[index]!));
+    }
+  });
+
+  test("the transition reads straight through, BST into GMT", () => {
+    const labels: Array<string> = labelsFor(FOUR_HOURS_ACROSS_THE_FALL_BACK);
+
+    /*
+     * Stepping wall-clock minutes in the browser's own zone walks over the
+     * repeated hour rather than through it, so the axis never holds both
+     * 01:30s. It still says which side of the change each tick is on.
+     */
+    expect(labels).toContain("25 Oct, 01:55 BST");
+    expect(labels).toContain("25 Oct, 02:00 GMT");
+    expect(labels).not.toContain("25 Oct, 01:00 GMT");
+  });
+
+  test("an ordinary window in the same zone keeps its bare labels", () => {
+    // No transition, well under a day: nothing to disambiguate, nothing spent.
+    const summer: Date = new Date("2026-06-01T00:00:00.000Z");
+    const labels: Array<string> = labelsFor({
+      xAxisMin: summer,
+      xAxisMax: new Date(summer.getTime() + 6 * 60 * 60 * 1000),
+    });
+
+    expect(new Set(labels).size).toBe(labels.length);
+    for (const label of labels) {
+      expect(label).toMatch(/^\d{2}:\d{2}$/);
+    }
+  });
+});

package/Tests/UI/Styles/ChartFocusRing.test.ts

@@ -0,0 +1,153 @@
+import { describe, expect, test } from "@jest/globals";
+import {
+  StyleRule,
+  declaredValue,
+  rulesFor,
+  selectorsDeclaring,
+} from "./ThemeStylesheet";
+
+/*
+ * https://github.com/OneUptime/oneuptime/issues/3528: a black box around the
+ * graphs.
+ *
+ * recharts leaves its accessibility layer on, so the root <svg> of every
+ * chart carries tabindex="0", and the annotation layer gives the same to the
+ * <g> elements it draws for event chips and highlighted windows. Chrome's SVG
+ * user-agent stylesheet rings a focused <svg> on plain :focus rather than on
+ * :focus-visible the way it treats focusable HTML, so a mouse press inside a
+ * chart -- dragging out a zoom range on the Logs and Traces volume charts,
+ * clicking an event marker -- paints a hard black rectangle over the data.
+ *
+ * The fix is four lines of CSS, which is exactly why it needs cover: nothing
+ * else in the build would notice a reformat that dropped the descendant
+ * selector, or a reorder that let the user-agent ring back in. The rules
+ * carry no !important and no extra specificity, so their contract is a
+ * cascade contract, and that is what is asserted here rather than the literal
+ * text of the file.
+ *
+ * ChartFocusRingCoverage.test.tsx holds the other half: that the selectors
+ * written here still reach the elements recharts actually renders.
+ */
+
+// The chart surface and the focusable shapes drawn inside it.
+const POINTER_FOCUS_SELECTORS: Array<string> = [
+  ".recharts-surface:focus",
+  ".recharts-surface [tabindex]:focus",
+];
+
+const KEYBOARD_FOCUS_SELECTORS: Array<string> = [
+  ".recharts-surface:focus-visible",
+  ".recharts-surface [tabindex]:focus-visible",
+];
+
+describe("Chart focus rings", () => {
+  test.each(POINTER_FOCUS_SELECTORS)(
+    "%s drops the user-agent focus ring",
+    (selector: string) => {
+      expect(declaredValue(selector, "outline")).toBe("none");
+    },
+  );
+
+  test.each(KEYBOARD_FOCUS_SELECTORS)(
+    "%s draws a ring a keyboard reader can see",
+    (selector: string) => {
+      const outline: string | undefined = declaredValue(selector, "outline");
+
+      expect(outline).toBeDefined();
+      expect(outline).not.toBe("none");
+      // Themed, so the ring is legible on the dark canvas as well as the light one.
+      expect(outline).toContain("var(--ou-chart-focus-ring)");
+    },
+  );
+
+  /*
+   * A ring flush against the plot edge reads as a border on the chart itself.
+   * The offset is what makes it read as focus.
+   */
+  test.each(KEYBOARD_FOCUS_SELECTORS)(
+    "%s holds the ring off the plot",
+    (selector: string) => {
+      expect(declaredValue(selector, "outline-offset")).toBe("2px");
+    },
+  );
+
+  /*
+   * :focus and :focus-visible weigh the same, so the keyboard ring only
+   * survives while it is declared later in the file. Reordering the two blocks
+   * would leave keyboard users with no focus indicator at all, and no other
+   * assertion here would fail.
+   */
+  test("the keyboard ring is declared after the ring it restores", () => {
+    const sourceOrder: (selectors: Array<string>) => Array<number> = (
+      selectors: Array<string>,
+    ): Array<number> => {
+      return selectors.flatMap((selector: string): Array<number> => {
+        return rulesFor(selector).map((rule: StyleRule): number => {
+          return rule.index;
+        });
+      });
+    };
+
+    const pointerRuleIndexes: Array<number> = sourceOrder(
+      POINTER_FOCUS_SELECTORS,
+    );
+    const keyboardRuleIndexes: Array<number> = sourceOrder(
+      KEYBOARD_FOCUS_SELECTORS,
+    );
+
+    // Ordering says nothing if one side of it went missing.
+    expect(pointerRuleIndexes.length).toBe(POINTER_FOCUS_SELECTORS.length);
+    expect(keyboardRuleIndexes.length).toBe(KEYBOARD_FOCUS_SELECTORS.length);
+
+    expect(Math.min(...keyboardRuleIndexes)).toBeGreaterThan(
+      Math.max(...pointerRuleIndexes),
+    );
+  });
+
+  /*
+   * Neither rule is fought over by anything else in the sheet, so neither
+   * needs !important to win. If one ever appears here it means something else
+   * started competing for the same property, and the pair above stopped being
+   * the whole story.
+   */
+  test.each([...POINTER_FOCUS_SELECTORS, ...KEYBOARD_FOCUS_SELECTORS])(
+    "%s wins on the cascade alone",
+    (selector: string) => {
+      expect(declaredValue(selector, "outline")).not.toContain("!important");
+    },
+  );
+
+  describe("the accent the ring is drawn in", () => {
+    test.each([":root", "html.dark"])("%s defines it", (selector: string) => {
+      expect(declaredValue(selector, "--ou-chart-focus-ring")).toMatch(
+        /^#[0-9a-f]{6}$/i,
+      );
+    });
+
+    /*
+     * A single value cannot clear both canvases. Light and dark carry their
+     * own, the way every other --ou-chart-* token in the sheet does.
+     */
+    test("light and dark do not share one value", () => {
+      expect(declaredValue(":root", "--ou-chart-focus-ring")).not.toBe(
+        declaredValue("html.dark", "--ou-chart-focus-ring"),
+      );
+    });
+  });
+
+  /*
+   * The fix is deliberately narrow: it silences the ring on charts, and
+   * nothing else. A blanket `:focus { outline: none }` would take the focus
+   * indicator off the whole dashboard, which is the usual way this class of
+   * bug gets "fixed" and is far worse than the black box.
+   */
+  test("nothing outside the charts had its focus ring silenced", () => {
+    const silenced: Array<string> = selectorsDeclaring("outline", "none");
+
+    expect(silenced.length).toBeGreaterThan(0);
+
+    for (const selector of silenced) {
+      expect(selector.startsWith(".recharts-surface")).toBe(true);
+    }
+  });
+});