@oneuptime/common 12.0.27 → 12.0.29

package/Tests/Types/DateLocalTimeString.test.ts

@@ -0,0 +1,259 @@
+/** @timezone America/Los_Angeles */
+/**
+ * The clock reading behind every timestamp on the Logs / Traces / Metrics
+ * explorers - histogram x-axis ticks, histogram tooltips, span rows.
+ *
+ * Those sites used to call `date.toLocaleTimeString([], { hour12: false })`
+ * directly, which pinned them to a 24-hour clock and to the zone the browser
+ * process happens to run in. So a user whose computer keeps an AM/PM clock
+ * read "14:30" off a chart, and a user who had set a timezone in User
+ * Settings read a chart that disagreed with the log rows underneath it - in
+ * one Logs explorer the table's Time column and the histogram directly above
+ * it were formatted by two different rules.
+ *
+ * The docblock above pins the *browser* zone to Los Angeles and every case
+ * below configures a different zone, so a helper that quietly fell back to the
+ * process zone fails rather than passing by coincidence.
+ */
+import OneUptimeDate from "../../Types/Date";
+import Timezone from "../../Types/Timezone";
+import { afterEach, describe, expect, it, jest } from "@jest/globals";
+
+const UTC: Timezone = Timezone.UTC;
+const NEW_YORK: Timezone = Timezone.AmericaNew_York;
+const KOLKATA: Timezone = Timezone.AsiaKolkata;
+
+/** 14:30 UTC - an afternoon, so a 12-hour clock has real work to do. */
+const AFTERNOON: Date = new Date("2024-03-01T14:30:45.000Z");
+
+type Options = {
+  includeMinutes?: boolean;
+  includeSeconds?: boolean;
+  use12HourFormat?: boolean | undefined;
+};
+
+function format(date: Date, options?: Options): string {
+  return OneUptimeDate.getLocalTimeString(date, options);
+}
+
+afterEach(() => {
+  // Never leak a pinned zone or a mocked preference into the rest of the suite.
+  OneUptimeDate.setUserTimezone(null);
+  jest.restoreAllMocks();
+});
+
+describe("OneUptimeDate.getLocalTimeString", () => {
+  /*
+   * The chart x-axes in UI/Components/Charts/Utils/XAxis.ts label ticks with
+   * this helper and are laid out for the fixed width of a 24-hour reading.
+   * They pass no preference, so the default has to stay where it was - these
+   * two cases are what makes the new option opt-in rather than a behaviour
+   * change for all nine of its existing callers.
+   */
+  describe("with no preference passed", () => {
+    it("keeps the 24-hour reading it has always produced", () => {
+      OneUptimeDate.setUserTimezone(UTC);
+
+      expect(format(AFTERNOON)).toBe("14:30");
+    });
+
+    it("does not consult the machine's clock preference at all", () => {
+      OneUptimeDate.setUserTimezone(UTC);
+
+      jest.spyOn(OneUptimeDate, "getUserPrefers12HourFormat");
+
+      format(AFTERNOON);
+
+      expect(OneUptimeDate.getUserPrefers12HourFormat).not.toHaveBeenCalled();
+    });
+
+    it("zero-pads the hour so ticks stay the same width", () => {
+      OneUptimeDate.setUserTimezone(UTC);
+
+      expect(format(new Date("2024-03-01T09:05:00.000Z"))).toBe("09:05");
+      expect(format(new Date("2024-03-01T00:00:00.000Z"))).toBe("00:00");
+    });
+
+    it("appends seconds only when asked", () => {
+      OneUptimeDate.setUserTimezone(UTC);
+
+      expect(format(AFTERNOON, { includeSeconds: true })).toBe("14:30:45");
+    });
+
+    it("returns the bare hour when minutes are turned off", () => {
+      OneUptimeDate.setUserTimezone(UTC);
+
+      expect(format(AFTERNOON, { includeMinutes: false })).toBe("14");
+    });
+  });
+
+  describe("on a 12-hour clock", () => {
+    it("marks an afternoon time PM", () => {
+      OneUptimeDate.setUserTimezone(UTC);
+
+      expect(format(AFTERNOON, { use12HourFormat: true })).toBe("2:30 PM");
+    });
+
+    it("marks a morning time AM", () => {
+      OneUptimeDate.setUserTimezone(UTC);
+
+      expect(
+        format(new Date("2024-03-01T09:05:00.000Z"), {
+          use12HourFormat: true,
+        }),
+      ).toBe("9:05 AM");
+    });
+
+    // The two readings a naive `hours % 12` gets wrong.
+    it("writes midnight as 12 AM rather than 0 AM", () => {
+      OneUptimeDate.setUserTimezone(UTC);
+
+      expect(
+        format(new Date("2024-03-01T00:00:00.000Z"), {
+          use12HourFormat: true,
+        }),
+      ).toBe("12:00 AM");
+    });
+
+    it("writes noon as 12 PM rather than 0 PM", () => {
+      OneUptimeDate.setUserTimezone(UTC);
+
+      expect(
+        format(new Date("2024-03-01T12:00:00.000Z"), {
+          use12HourFormat: true,
+        }),
+      ).toBe("12:00 PM");
+    });
+
+    it("keeps the marker after the seconds", () => {
+      OneUptimeDate.setUserTimezone(UTC);
+
+      expect(
+        format(AFTERNOON, { use12HourFormat: true, includeSeconds: true }),
+      ).toBe("2:30:45 PM");
+    });
+
+    it("keeps the marker on a bare hour", () => {
+      OneUptimeDate.setUserTimezone(UTC);
+
+      expect(
+        format(AFTERNOON, { use12HourFormat: true, includeMinutes: false }),
+      ).toBe("2 PM");
+    });
+  });
+
+  /*
+   * The browser here is in Los Angeles (see the docblock). None of the
+   * readings below are the Los Angeles ones, which is the point.
+   */
+  describe("reading the configured timezone rather than the browser's", () => {
+    it("shifts a whole-hour offset", () => {
+      OneUptimeDate.setUserTimezone(NEW_YORK);
+
+      expect(format(AFTERNOON)).toBe("09:30");
+      expect(format(AFTERNOON, { use12HourFormat: true })).toBe("9:30 AM");
+    });
+
+    it("shifts a half-hour offset", () => {
+      OneUptimeDate.setUserTimezone(KOLKATA);
+
+      expect(format(AFTERNOON)).toBe("20:00");
+      expect(format(AFTERNOON, { use12HourFormat: true })).toBe("8:00 PM");
+    });
+
+    it("crosses the date line into the next day", () => {
+      OneUptimeDate.setUserTimezone(KOLKATA);
+
+      // 23:00 UTC is already 04:30 the following morning in Kolkata.
+      expect(format(new Date("2024-03-01T23:00:00.000Z"))).toBe("04:30");
+    });
+
+    it("falls back to the browser zone when nothing is configured", () => {
+      OneUptimeDate.setUserTimezone(null);
+
+      // 14:30 UTC is 06:30 in Los Angeles on a March morning (PST, UTC-8).
+      expect(format(AFTERNOON)).toBe("06:30");
+    });
+  });
+});
+
+/*
+ * "Is this bucket today?" is what the histogram tooltips ask before deciding
+ * whether a timestamp needs its date spelled out. They used to ask it with
+ * `date.toDateString() === now.toDateString()`, which compares calendar days
+ * in the browser's zone - so within a few hours of midnight in the configured
+ * zone the date got dropped from buckets that needed it and added to buckets
+ * that did not.
+ */
+describe("OneUptimeDate.areOnTheSameLocalDay", () => {
+  const BEFORE_MIDNIGHT_IN_KOLKATA: Date = new Date("2024-03-01T18:00:00.000Z");
+  const AFTER_MIDNIGHT_IN_KOLKATA: Date = new Date("2024-03-01T19:00:00.000Z");
+
+  it("separates two instants that straddle midnight in the configured zone", () => {
+    OneUptimeDate.setUserTimezone(KOLKATA);
+
+    /*
+     * 23:30 and 00:30 in Kolkata - two different days there, one hour apart.
+     * Both are still the same Friday morning in Los Angeles, which is exactly
+     * the disagreement the browser-zone comparison could not see.
+     */
+    expect(
+      OneUptimeDate.areOnTheSameLocalDay(
+        BEFORE_MIDNIGHT_IN_KOLKATA,
+        AFTER_MIDNIGHT_IN_KOLKATA,
+      ),
+    ).toBe(false);
+
+    expect(
+      OneUptimeDate.areOnTheSameDay(
+        BEFORE_MIDNIGHT_IN_KOLKATA,
+        AFTER_MIDNIGHT_IN_KOLKATA,
+      ),
+    ).toBe(true);
+  });
+
+  it("joins two instants the browser's zone splits across midnight", () => {
+    OneUptimeDate.setUserTimezone(KOLKATA);
+
+    // 07:30 and 21:30 on the same Kolkata day; Feb 29 and Mar 1 in Los Angeles.
+    const morning: Date = new Date("2024-03-01T02:00:00.000Z");
+    const evening: Date = new Date("2024-03-01T16:00:00.000Z");
+
+    expect(OneUptimeDate.areOnTheSameLocalDay(morning, evening)).toBe(true);
+    expect(OneUptimeDate.areOnTheSameDay(morning, evening)).toBe(false);
+  });
+
+  it("accepts the string form the histogram buckets arrive as", () => {
+    OneUptimeDate.setUserTimezone(UTC);
+
+    expect(
+      OneUptimeDate.areOnTheSameLocalDay(
+        "2024-03-01T00:30:00.000Z",
+        "2024-03-01T23:30:00.000Z",
+      ),
+    ).toBe(true);
+  });
+
+  it("falls back to the browser zone when nothing is configured", () => {
+    OneUptimeDate.setUserTimezone(null);
+
+    /*
+     * 16:00 and 20:00 UTC are 08:00 and 12:00 the same Los Angeles day, but
+     * two different UTC-relative readings - the browser's zone is the one
+     * that gets to answer when the user has configured none.
+     */
+    expect(
+      OneUptimeDate.areOnTheSameLocalDay(
+        new Date("2024-03-01T16:00:00.000Z"),
+        new Date("2024-03-01T20:00:00.000Z"),
+      ),
+    ).toBe(true);
+
+    expect(
+      OneUptimeDate.areOnTheSameLocalDay(
+        new Date("2024-03-01T02:00:00.000Z"),
+        new Date("2024-03-01T16:00:00.000Z"),
+      ),
+    ).toBe(false);
+  });
+});

package/Tests/Types/DateUserPrefers12HourFormat.test.ts

@@ -0,0 +1,316 @@
+/**
+ * How OneUptime decides whether to write times on a 12- or a 24-hour clock.
+ *
+ * The answer has to come from the machine the person is sitting at: a browser
+ * resolves its default locale against the operating system's own clock setting,
+ * so toggling macOS's "24-Hour Time" (or the Windows/Linux equivalent) is meant
+ * to flip every time in the product.
+ *
+ * The bug these lock in: the check used to format a time and look for the
+ * letters "am"/"pm" in it. That is only how Latin-script locales mark the day
+ * period - ko-KR writes 오후, ar-EG writes م - so 12-hour machines in those
+ * locales were misread as 24-hour and got 24-hour times back. Intl reports the
+ * hour cycle directly, so it is asked first and the string probe is kept only
+ * as a fallback for an engine without a usable Intl.
+ */
+import OneUptimeDate from "../../Types/Date";
+import Timezone from "../../Types/Timezone";
+import { afterEach, describe, expect, it, jest } from "@jest/globals";
+
+type ResolvedOptionsStub = {
+  hour12?: boolean | undefined;
+  hourCycle?: string | undefined;
+};
+
+/*
+ * Stand in for the browser's resolved locale. `locales` records what the probe
+ * asked for so a test can assert it requested an hour at all - Intl only
+ * reports `hour12` when the format includes one, so a probe that forgot to ask
+ * would silently fall through to the string check on every engine.
+ */
+type IntlProbeCall = {
+  locales: Intl.LocalesArgument;
+  options: Intl.DateTimeFormatOptions | undefined;
+};
+
+const probeCalls: Array<IntlProbeCall> = [];
+
+type StubIntlFunction = (resolved: ResolvedOptionsStub | (() => never)) => void;
+
+const stubIntl: StubIntlFunction = (
+  resolved: ResolvedOptionsStub | (() => never),
+): void => {
+  jest
+    .spyOn(Intl, "DateTimeFormat")
+    .mockImplementation(
+      (
+        locales?: Intl.LocalesArgument,
+        options?: Intl.DateTimeFormatOptions,
+      ) => {
+        probeCalls.push({ locales: locales, options: options });
+
+        if (typeof resolved === "function") {
+          resolved();
+        }
+
+        return {
+          resolvedOptions: () => {
+            return resolved as Intl.ResolvedDateTimeFormatOptions;
+          },
+        } as unknown as Intl.DateTimeFormat;
+      },
+    );
+};
+
+type StubFormattedTimeFunction = (formatted: string) => void;
+
+const stubFormattedTime: StubFormattedTimeFunction = (
+  formatted: string,
+): void => {
+  jest.spyOn(Date.prototype, "toLocaleTimeString").mockImplementation(() => {
+    return formatted;
+  });
+};
+
+/*
+ * Delegate to the real Intl but pin the locale, so a case can assert what a
+ * machine actually configured to that locale reports rather than a hand-made
+ * stub of it.
+ */
+type StubIntlWithLocaleFunction = (locale: string) => void;
+
+const stubIntlWithLocale: StubIntlWithLocaleFunction = (
+  locale: string,
+): void => {
+  const realDateTimeFormat: typeof Intl.DateTimeFormat = Intl.DateTimeFormat;
+
+  jest
+    .spyOn(Intl, "DateTimeFormat")
+    .mockImplementation(
+      (
+        _locales?: Intl.LocalesArgument,
+        options?: Intl.DateTimeFormatOptions,
+      ) => {
+        return new realDateTimeFormat(locale, options);
+      },
+    );
+
+  /*
+   * Hold the legacy string probe to a bare 24-hour reading. Without this the
+   * fallback still sees the HOST's locale, so on a US runner the old am/pm
+   * substring check would answer "12-hour" by luck and the cases below would
+   * pass against the very implementation they exist to rule out.
+   */
+  stubFormattedTime("14:30:00");
+};
+
+describe("OneUptimeDate.getUserPrefers12HourFormat", () => {
+  afterEach(() => {
+    probeCalls.length = 0;
+    jest.restoreAllMocks();
+    OneUptimeDate.setUserTimezone(null);
+  });
+
+  describe("reading the machine's clock setting from Intl", () => {
+    it("reports a 12-hour machine as 12-hour", () => {
+      stubIntl({ hour12: true, hourCycle: "h12" });
+
+      expect(OneUptimeDate.getUserPrefers12HourFormat()).toBe(true);
+    });
+
+    it("reports a 24-hour machine as 24-hour", () => {
+      stubIntl({ hour12: false, hourCycle: "h23" });
+
+      expect(OneUptimeDate.getUserPrefers12HourFormat()).toBe(false);
+    });
+
+    it("asks for an hour, without which Intl reports no clock at all", () => {
+      stubIntl({ hour12: true });
+
+      OneUptimeDate.getUserPrefers12HourFormat();
+
+      expect(probeCalls).toHaveLength(1);
+      expect(probeCalls[0]?.options?.hour).toBeDefined();
+    });
+
+    it("asks for the machine's own locale rather than pinning one", () => {
+      stubIntl({ hour12: true });
+
+      OneUptimeDate.getUserPrefers12HourFormat();
+
+      /*
+       * Assert the probe ran before reading what it asked for - without this,
+       * an implementation that never called Intl would satisfy the line below
+       * on an empty array.
+       */
+      expect(probeCalls).toHaveLength(1);
+      // `undefined` is what makes Intl resolve the browser's default locale.
+      expect(probeCalls[0]?.locales).toBeUndefined();
+    });
+  });
+
+  describe("engines that report the cycle but not the boolean", () => {
+    it("treats h12 as a 12-hour clock", () => {
+      stubIntl({ hourCycle: "h12" });
+
+      expect(OneUptimeDate.getUserPrefers12HourFormat()).toBe(true);
+    });
+
+    it("treats h11 as a 12-hour clock", () => {
+      stubIntl({ hourCycle: "h11" });
+
+      expect(OneUptimeDate.getUserPrefers12HourFormat()).toBe(true);
+    });
+
+    it("treats h23 as a 24-hour clock", () => {
+      stubIntl({ hourCycle: "h23" });
+
+      expect(OneUptimeDate.getUserPrefers12HourFormat()).toBe(false);
+    });
+
+    it("treats h24 as a 24-hour clock", () => {
+      stubIntl({ hourCycle: "h24" });
+
+      expect(OneUptimeDate.getUserPrefers12HourFormat()).toBe(false);
+    });
+
+    it("prefers the boolean when both are reported and they disagree", () => {
+      /*
+       * hour12 is the value the spec says to honour; hourCycle is only read
+       * because older engines omit hour12 entirely.
+       */
+      stubIntl({ hour12: false, hourCycle: "h12" });
+
+      expect(OneUptimeDate.getUserPrefers12HourFormat()).toBe(false);
+    });
+  });
+
+  describe("real locales", () => {
+    it("reads en-US as a 12-hour machine", () => {
+      stubIntlWithLocale("en-US");
+
+      expect(OneUptimeDate.getUserPrefers12HourFormat()).toBe(true);
+    });
+
+    it("reads en-GB as a 24-hour machine", () => {
+      stubIntlWithLocale("en-GB");
+
+      expect(OneUptimeDate.getUserPrefers12HourFormat()).toBe(false);
+    });
+
+    it("reads de-DE as a 24-hour machine", () => {
+      stubIntlWithLocale("de-DE");
+
+      expect(OneUptimeDate.getUserPrefers12HourFormat()).toBe(false);
+    });
+
+    it("honours an explicit 24-hour override on a 12-hour locale", () => {
+      // What a US machine with "24-Hour Time" switched on resolves to.
+      stubIntlWithLocale("en-US-u-hc-h23");
+
+      expect(OneUptimeDate.getUserPrefers12HourFormat()).toBe(false);
+    });
+
+    it("honours an explicit 12-hour override on a 24-hour locale", () => {
+      stubIntlWithLocale("de-DE-u-hc-h12");
+
+      expect(OneUptimeDate.getUserPrefers12HourFormat()).toBe(true);
+    });
+
+    it("reads ko-KR as a 12-hour machine even though it writes 오후, not PM", () => {
+      /*
+       * The regression this whole change exists for: the old string probe saw
+       * "오후 2:30:00", found no "am"/"pm", and told a Korean user on a
+       * 12-hour machine they were on a 24-hour one.
+       */
+      stubIntlWithLocale("ko-KR");
+
+      expect(OneUptimeDate.getUserPrefers12HourFormat()).toBe(true);
+    });
+
+    it("reads ar-EG as a 12-hour machine even though it writes م, not PM", () => {
+      stubIntlWithLocale("ar-EG");
+
+      expect(OneUptimeDate.getUserPrefers12HourFormat()).toBe(true);
+    });
+  });
+
+  describe("falling back when Intl cannot answer", () => {
+    it("reads a Latin AM/PM out of a formatted time when Intl throws", () => {
+      stubIntl(() => {
+        throw new Error("Intl unavailable");
+      });
+      stubFormattedTime("2:30:00 PM");
+
+      expect(OneUptimeDate.getUserPrefers12HourFormat()).toBe(true);
+    });
+
+    it("reads a bare 24-hour time out of a formatted time when Intl throws", () => {
+      stubIntl(() => {
+        throw new Error("Intl unavailable");
+      });
+      stubFormattedTime("14:30:00");
+
+      expect(OneUptimeDate.getUserPrefers12HourFormat()).toBe(false);
+    });
+
+    it("falls back when Intl answers with neither a boolean nor a cycle", () => {
+      stubIntl({});
+      stubFormattedTime("2:30:00 AM");
+
+      expect(OneUptimeDate.getUserPrefers12HourFormat()).toBe(true);
+    });
+
+    it("matches a lowercase day period", () => {
+      stubIntl({});
+      stubFormattedTime("2:30:00 pm");
+
+      expect(OneUptimeDate.getUserPrefers12HourFormat()).toBe(true);
+    });
+
+    it("does not throw when Intl is broken and the time has no day period", () => {
+      stubIntl(() => {
+        throw new Error("Intl unavailable");
+      });
+      stubFormattedTime("14:30:00");
+
+      expect(() => {
+        return OneUptimeDate.getUserPrefers12HourFormat();
+      }).not.toThrow();
+    });
+  });
+
+  describe("as a decision the rest of the product reads", () => {
+    it("drives the clock of the time range picker's custom label", () => {
+      /*
+       * The user-visible consequence, end to end: the same instant is written
+       * two different ways purely on the strength of this one answer.
+       */
+      /*
+       * Pin the zone: without it this reads 2:30 PM on a UTC runner and 6:30 AM
+       * on a Los Angeles one, and the assertion is about the clock, not the
+       * zone.
+       */
+      OneUptimeDate.setUserTimezone(Timezone.UTC);
+
+      stubIntlWithLocale("en-US");
+      const on12HourMachine: string =
+        OneUptimeDate.getDateAsLocalShortDateTimeString(
+          new Date("2024-03-01T14:30:00.000Z"),
+          { use12HourFormat: OneUptimeDate.getUserPrefers12HourFormat() },
+        );
+
+      jest.restoreAllMocks();
+
+      stubIntlWithLocale("en-GB");
+      const on24HourMachine: string =
+        OneUptimeDate.getDateAsLocalShortDateTimeString(
+          new Date("2024-03-01T14:30:00.000Z"),
+          { use12HourFormat: OneUptimeDate.getUserPrefers12HourFormat() },
+        );
+
+      expect(on12HourMachine).toBe("Mar 1, 2:30 PM");
+      expect(on24HourMachine).toBe("Mar 1, 14:30");
+    });
+  });
+});

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

@@ -3,9 +3,10 @@
 import LogsHistogram from "../../../UI/Components/LogsViewer/components/LogsHistogram";
 import { HistogramBucket } from "../../../UI/Components/LogsViewer/types";
 import LogSeverity from "../../../Types/Log/LogSeverity";
+import OneUptimeDate from "../../../Types/Date";
 import { render, screen } from "@testing-library/react";
 import React from "react";
-import { describe, expect, test } from "@jest/globals";
+import { afterEach, describe, expect, test } from "@jest/globals";
 
 /*
  * ResponsiveContainer measures its parent, which is always 0x0 in jsdom, so the
@@ -39,7 +40,27 @@ function seriesCount(container: HTMLElement): number {
   return container.querySelectorAll(".recharts-bar").length;
 }
 
-const CLOCK_LABEL: RegExp = /^\d{2}:\d{2}$/;
+/*
+ * Matches a tick on either clock. The axis follows the machine's 12/24-hour
+ * preference now, so a pattern that only knew "HH:mm" would quietly classify
+ * every tick as a count label on an AM/PM machine and leave the assertions
+ * below comparing empty arrays.
+ */
+const CLOCK_LABEL: RegExp = /^\d{1,2}:\d{2}( [AP]M)?$/;
+
+/*
+ * The tick labels are the machine's business, not the test's, so every case
+ * that reads them says which clock it is asking about.
+ */
+function pinClock(use12HourFormat: boolean): void {
+  jest
+    .spyOn(OneUptimeDate, "getUserPrefers12HourFormat")
+    .mockReturnValue(use12HourFormat);
+}
+
+afterEach(() => {
+  jest.restoreAllMocks();
+});
 
 /*
  * Recharts portals tick labels out of their axis group, so the two axes are
@@ -126,6 +147,8 @@ describe("LogsHistogram", () => {
     });
 
     test("labels the time axis in the reader's clock", () => {
+      pinClock(false);
+
       const { container } = render(
         <LogsHistogram buckets={ONE_SEVERITY} isLoading={false} />,
       );
@@ -133,6 +156,20 @@ describe("LogsHistogram", () => {
       expect(axisLabels(container, "time")).toContain("12:00");
     });
 
+    /*
+     * Noon is where the two clocks are hardest to tell apart - "12:00" is a
+     * valid reading on both - so the marker is the whole assertion.
+     */
+    test("labels the time axis with AM/PM when that is the reader's clock", () => {
+      pinClock(true);
+
+      const { container } = render(
+        <LogsHistogram buckets={ONE_SEVERITY} isLoading={false} />,
+      );
+
+      expect(axisLabels(container, "time")).toContain("12:00 PM");
+    });
+
     test("lists only the severities present in the window", () => {
       render(
         <LogsHistogram
@@ -176,6 +213,8 @@ describe("LogsHistogram", () => {
     });
 
     test("follows the window as it slides off the oldest bucket", () => {
+      pinClock(false);
+
       const view: ReturnType<typeof render> = render(
         <LogsHistogram buckets={ONE_SEVERITY} isLoading={false} />,
       );