@oneuptime/common 12.0.27 → 12.0.29

package/Tests/Utils/Monitor/NetworkDeviceMonitorTemplateUtil.test.ts

@@ -9,7 +9,9 @@ import MonitorStep from "../../../Types/Monitor/MonitorStep";
 import MonitorSteps from "../../../Types/Monitor/MonitorSteps";
 import MonitorType from "../../../Types/Monitor/MonitorType";
 import ObjectID from "../../../Types/ObjectID";
-import NetworkDeviceMonitorTemplateUtil from "../../../Utils/Monitor/NetworkDeviceMonitorTemplateUtil";
+import NetworkDeviceMonitorTemplateUtil, {
+  MAX_PROVISIONED_MONITOR_NAME_LENGTH,
+} from "../../../Utils/Monitor/NetworkDeviceMonitorTemplateUtil";
 import { describe, expect, it } from "@jest/globals";
 
 const PROJECT_ID: ObjectID = new ObjectID(
@@ -290,36 +292,202 @@ describe("NetworkDeviceMonitorTemplateUtil.buildMonitor", () => {
       networkDevice: buildDevice({ name: " ", hostname: " " }),
     });
 
-    expect(monitor.name).toBe(
-      `Network Device ${DEVICE_ID.toString()} - Monitor`,
-    );
+    expect(monitor.name).toBe(`Network Device ${DEVICE_ID.toString()}`);
     expect(monitor.name?.trim()).not.toBe("");
   });
 
-  it("caps names at ShortText without leaving half a surrogate pair", () => {
+  /*
+   * ISSUE #3486, and the reason the column became optional.
+   *
+   * An auto-import rule names every monitor it provisions after the device.
+   * While the template's default monitor name was required there was nothing
+   * an operator could type that did not become a suffix on the whole imported
+   * estate - "UN0660WANRTR01 - Unit Router" for a router already called
+   * UN0660WANRTR01. The three tests below pin the three ways a template can
+   * say "no suffix", because all three are reachable: the column is nullable,
+   * the dashboard's edit form PUTs an empty string rather than null when the
+   * box is cleared, and the API accepts whitespace.
+   */
+  it("names the monitor after the device alone when the template has no default name", () => {
+    const monitor: Monitor = NetworkDeviceMonitorTemplateUtil.buildMonitor({
+      template: buildTemplate({ monitorName: undefined }),
+      networkDevice: buildDevice({ name: "UN0660WANRTR01" }),
+    });
+
+    expect(monitor.name).toBe("UN0660WANRTR01");
+    expect(monitor.name).not.toContain(" - ");
+  });
+
+  it("treats an empty default monitor name as no default name", () => {
+    const monitor: Monitor = NetworkDeviceMonitorTemplateUtil.buildMonitor({
+      template: buildTemplate({ monitorName: "" }),
+      networkDevice: buildDevice({ name: "UN0660WANRTR01" }),
+    });
+
+    expect(monitor.name).toBe("UN0660WANRTR01");
+  });
+
+  it("treats a whitespace-only default monitor name as no default name", () => {
     const monitor: Monitor = NetworkDeviceMonitorTemplateUtil.buildMonitor({
-      template: buildTemplate({ monitorName: "🔥 alerting" }),
+      template: buildTemplate({ monitorName: "   " }),
+      networkDevice: buildDevice({ name: "UN0660WANRTR01" }),
+    });
+
+    expect(monitor.name).toBe("UN0660WANRTR01");
+  });
+
+  it("falls back to the hostname, not to a suffix, for an unnamed device on an unnamed template", () => {
+    const monitor: Monitor = NetworkDeviceMonitorTemplateUtil.buildMonitor({
+      template: buildTemplate({ monitorName: undefined }),
+      networkDevice: buildDevice({ name: "  ", hostname: "10.20.30.40" }),
+    });
+
+    expect(monitor.name).toBe("10.20.30.40");
+  });
+
+  /*
+   * The other half of the contract. Dropping the suffix when it IS asked for
+   * would make two templates provisioning the same device produce two
+   * identically named monitors, which is the thing the suffix is for.
+   */
+  it("keeps the suffix when the template does carry a default name", () => {
+    const device: NetworkDevice = buildDevice({ name: "UN0660WANRTR01" });
+
+    const named: Monitor = NetworkDeviceMonitorTemplateUtil.buildMonitor({
+      template: buildTemplate({ monitorName: "Unit Router" }),
+      networkDevice: device,
+    });
+    const otherNamed: Monitor = NetworkDeviceMonitorTemplateUtil.buildMonitor({
+      template: buildTemplate({ monitorName: "Interface Health" }),
+      networkDevice: device,
+    });
+
+    expect(named.name).toBe("UN0660WANRTR01 - Unit Router");
+    expect(otherNamed.name).toBe("UN0660WANRTR01 - Interface Health");
+    expect(named.name).not.toBe(otherNamed.name);
+  });
+
+  it("trims the stored default monitor name before composing", () => {
+    const monitor: Monitor = NetworkDeviceMonitorTemplateUtil.buildMonitor({
+      template: buildTemplate({ monitorName: "  Unit Router  " }),
+      networkDevice: buildDevice({ name: "UN0660WANRTR01" }),
+    });
+
+    expect(monitor.name).toBe("UN0660WANRTR01 - Unit Router");
+  });
+
+  /*
+   * THE CAP IS THE SLUG'S, NOT THE NAME COLUMN'S.
+   *
+   * Monitor.name is varchar(100), but Monitor is @SlugifyColumn("name",
+   * "slug") and Slug.getSlug appends a dash plus ten random digits into its
+   * own varchar(100). A 100-character name therefore produces a
+   * 111-character slug and the INSERT throws - the monitor lands in
+   * `monitorsFailed` and the device silently never gets one. 88 leaves
+   * exactly that 11-character tail.
+   */
+  it("caps a provisioned name low enough that its generated slug still fits", () => {
+    const monitor: Monitor = NetworkDeviceMonitorTemplateUtil.buildMonitor({
+      template: buildTemplate({ monitorName: "t".repeat(60) }),
       networkDevice: buildDevice({ name: "d".repeat(96) }),
     });
+    const slugTailLength: number = "-1234567890".length;
+
+    expect(monitor.name).toHaveLength(MAX_PROVISIONED_MONITOR_NAME_LENGTH);
+    expect(monitor.name!.length + slugTailLength).toBeLessThanOrEqual(
+      ColumnLength.Slug,
+    );
+    expect(monitor.name!.length).toBeLessThanOrEqual(ColumnLength.ShortText);
+  });
+
+  it("caps an unsuffixed device name at the same ceiling", () => {
+    const monitor: Monitor = NetworkDeviceMonitorTemplateUtil.buildMonitor({
+      template: buildTemplate({ monitorName: undefined }),
+      networkDevice: buildDevice({ name: "d".repeat(120) }),
+    });
+
+    expect(monitor.name).toBe("d".repeat(MAX_PROVISIONED_MONITOR_NAME_LENGTH));
+  });
+
+  it("caps names without leaving half a surrogate pair", () => {
+    /*
+     * 80 + " - " + 4 characters puts the cap exactly on the leading half of
+     * the astral character, the only cut that can produce an unpaired code
+     * unit.
+     */
+    const monitor: Monitor = NetworkDeviceMonitorTemplateUtil.buildMonitor({
+      template: buildTemplate({ monitorName: "tttt🔥 alerting" }),
+      networkDevice: buildDevice({ name: "d".repeat(80) }),
+    });
     const loneSurrogate: RegExp =
       /[\uD800-\uDBFF](?![\uDC00-\uDFFF])|(?:^|[^\uD800-\uDBFF])[\uDC00-\uDFFF]/;
 
-    expect(monitor.name!.length).toBeLessThanOrEqual(ColumnLength.ShortText);
-    expect(monitor.name!.length).toBe(99);
+    expect(monitor.name!.length).toBeLessThanOrEqual(
+      MAX_PROVISIONED_MONITOR_NAME_LENGTH,
+    );
+    expect(monitor.name).toBe(`${"d".repeat(80)} - tttt`);
     expect(loneSurrogate.test(monitor.name!)).toBe(false);
-    expect(monitor.name!.startsWith("d".repeat(96))).toBe(true);
   });
 
-  it("keeps a composed name exactly at the column limit", () => {
-    const deviceName: string = "d".repeat(80);
-    const templateName: string = "t".repeat(17);
+  it("keeps an astral character in the device identity whole", () => {
+    const monitor: Monitor = NetworkDeviceMonitorTemplateUtil.buildMonitor({
+      template: buildTemplate(),
+      networkDevice: buildDevice({ name: `${"d".repeat(87)}🔥` }),
+    });
+    const loneSurrogate: RegExp =
+      /[\uD800-\uDBFF](?![\uDC00-\uDFFF])|(?:^|[^\uD800-\uDBFF])[\uDC00-\uDFFF]/;
+
+    expect(monitor.name).toBe("d".repeat(87));
+    expect(loneSurrogate.test(monitor.name!)).toBe(false);
+  });
+
+  it("keeps a composed name exactly at the cap", () => {
+    const deviceName: string = "d".repeat(70);
+    const templateName: string = "t".repeat(15);
     const monitor: Monitor = NetworkDeviceMonitorTemplateUtil.buildMonitor({
       template: buildTemplate({ monitorName: templateName }),
       networkDevice: buildDevice({ name: deviceName }),
     });
 
     expect(monitor.name).toBe(`${deviceName} - ${templateName}`);
-    expect(monitor.name).toHaveLength(ColumnLength.ShortText);
+    expect(monitor.name).toHaveLength(MAX_PROVISIONED_MONITOR_NAME_LENGTH);
+  });
+
+  /*
+   * A cap landing inside " - " would otherwise ship a name trailing a
+   * half-written separator - "core switch -" - which reads as a truncation
+   * bug to whoever opens the monitor.
+   */
+  it("drops a separator the cap cut through", () => {
+    // One character into " - ", two characters in, and exactly at its end.
+    for (const deviceNameLength of [87, 86, 85]) {
+      const deviceName: string = "d".repeat(deviceNameLength);
+      const monitor: Monitor = NetworkDeviceMonitorTemplateUtil.buildMonitor({
+        template: buildTemplate({ monitorName: "Unit Router" }),
+        networkDevice: buildDevice({ name: deviceName }),
+      });
+
+      expect({
+        deviceNameLength: deviceNameLength,
+        name: monitor.name,
+      }).toEqual({ deviceNameLength: deviceNameLength, name: deviceName });
+      expect(monitor.name!.endsWith(" ")).toBe(false);
+      expect(monitor.name!.endsWith("-")).toBe(false);
+    }
+  });
+
+  /*
+   * The mirror of the test above: the remnant rule is a LENGTH check, not a
+   * "does it end with a dash" check, so a device whose own name ends in a
+   * dash keeps it when nothing was cut.
+   */
+  it("keeps a device's own trailing dash when nothing was truncated", () => {
+    const monitor: Monitor = NetworkDeviceMonitorTemplateUtil.buildMonitor({
+      template: buildTemplate({ monitorName: undefined }),
+      networkDevice: buildDevice({ name: "Router A -" }),
+    });
+
+    expect(monitor.name).toBe("Router A -");
   });
 
   it("rejects a template without an id", () => {

package/Types/API/Route.ts

@@ -5,16 +5,27 @@ import { JSONObject, ObjectType } from "../JSON";
 import { FindOperator } from "typeorm";
 
 export default class Route extends DatabaseProperty {
+  private static readonly SCHEME_PREFIX: RegExp = /^[a-zA-Z][a-zA-Z\d+.-]*:/;
+
+  private static validateRoute(route: string): void {
+    if (Route.SCHEME_PREFIX.test(route)) {
+      throw new BadDataException(`Invalid route: ${route}`);
+    }
+
+    const matchRouteCharacters: RegExp =
+      /^[a-zA-Z_\d\-!#$%&'()*+,./:;=?@[\]]*$/;
+
+    if (route && !matchRouteCharacters.test(route)) {
+      throw new BadDataException(`Invalid route: ${route}`);
+    }
+  }
+
   private _route: string = "";
   public get route(): string {
     return this._route;
   }
   public set route(v: string) {
-    const matchRouteCharacters: RegExp =
-      /^[a-zA-Z_\d\-!#$%&'()*+,./:;=?@[\]]*$/;
-    if (v && !matchRouteCharacters.test(v)) {
-      throw new BadDataException(`Invalid route: ${v}`);
-    }
+    Route.validateRoute(v);
     this._route = v;
   }
 
@@ -24,6 +35,10 @@ export default class Route extends DatabaseProperty {
       route = route.toString();
     }
 
+    if (route) {
+      Route.validateRoute(route);
+    }
+
     route = route?.replace(/\/+/g, "/"); // remove multiple slashes from route and replace with single slash
 
     if (route) {

package/Types/Date.ts

@@ -194,32 +194,48 @@ export default class OneUptimeDate {
     return this.getLocalShortMonthName(date);
   }
 
+  /**
+   * The wall clock `date` reads at in the current timezone - "14:30", or
+   * "2:30 PM" when the caller asks for a 12-hour clock.
+   *
+   * `use12HourFormat` is opt-in rather than defaulted to
+   * `getUserPrefers12HourFormat()`: the chart x-axes in
+   * UI/Components/Charts/Utils/XAxis.ts label ticks with this and are laid out
+   * for the fixed width of a 24-hour reading, so they must keep the clock they
+   * were built against. Surfaces that show a person a timestamp - histogram
+   * ticks and tooltips, span rows - pass
+   * `use12HourFormat: OneUptimeDate.getUserPrefers12HourFormat()` explicitly.
+   */
   public static getLocalTimeString(
     date: Date | string,
     options?: {
       includeMinutes?: boolean;
       includeSeconds?: boolean;
+      use12HourFormat?: boolean | undefined;
     },
   ): string {
     date = this.fromString(date);
 
     const includeMinutes: boolean = options?.includeMinutes ?? true;
     const includeSeconds: boolean = options?.includeSeconds ?? false;
-    const localDate: moment.Moment = this.inCurrentTimezone(date);
-    const hours: string = this.padDatePart(localDate.hours());
+    const use12HourFormat: boolean = options?.use12HourFormat ?? false;
 
-    if (!includeMinutes) {
-      return hours;
-    }
+    // "HH" and "h" are the zero-padded 24-hour and the bare 12-hour readings.
+    let timeFormat: string = use12HourFormat ? "h" : "HH";
 
-    const minutes: string = this.padDatePart(localDate.minutes());
+    if (includeMinutes) {
+      timeFormat += ":mm";
+
+      if (includeSeconds) {
+        timeFormat += ":ss";
+      }
+    }
 
-    if (!includeSeconds) {
-      return `${hours}:${minutes}`;
+    if (use12HourFormat) {
+      timeFormat += " A";
     }
 
-    const seconds: string = this.padDatePart(localDate.seconds());
-    return `${hours}:${minutes}:${seconds}`;
+    return this.inCurrentTimezone(date).format(timeFormat);
   }
 
   public static getDateAsLocalDayMonthString(date: Date | string): string {
@@ -237,6 +253,41 @@ export default class OneUptimeDate {
     return `${this.getDateAsLocalDayMonthString(date)}, ${this.getLocalTimeString(date, { includeMinutes: false })}:00`;
   }
 
+  /**
+   * A compact "Mar 1, 14:30" (or "Mar 1, 2:30 PM") label for one instant, used
+   * where a whole window has to fit on a button - the time range picker above
+   * the metrics, traces and logs explorers, chiefly.
+   *
+   * Both halves follow the user's machine: the wall clock is resolved in the
+   * configured timezone (falling back to the one the browser reports), and the
+   * 12- vs 24-hour choice follows the operating system's clock preference
+   * unless a caller overrides it.
+   */
+  public static getDateAsLocalShortDateTimeString(
+    date: Date | string,
+    options?: {
+      use12HourFormat?: boolean | undefined;
+      includeSeconds?: boolean | undefined;
+    },
+  ): string {
+    date = this.fromString(date);
+
+    const use12HourFormat: boolean =
+      options?.use12HourFormat ?? this.getUserPrefers12HourFormat();
+
+    let timeFormat: string = use12HourFormat ? "h:mm" : "HH:mm";
+
+    if (options?.includeSeconds) {
+      timeFormat += ":ss";
+    }
+
+    if (use12HourFormat) {
+      timeFormat += " A";
+    }
+
+    return this.inCurrentTimezone(date).format(`MMM D, ${timeFormat}`);
+  }
+
   public static getDateAsLocalMonthYearString(date: Date | string): string {
     date = this.fromString(date);
 
@@ -857,6 +908,25 @@ export default class OneUptimeDate {
     return moment(date1).isSame(date2, "day");
   }
 
+  /**
+   * Whether the two instants fall on the same calendar day *in the current
+   * timezone*, which is the question a UI is asking when it decides whether a
+   * timestamp needs its date spelled out or a bare clock reading will do.
+   *
+   * `areOnTheSameDay` above answers it in the zone the process happens to run
+   * in. Near midnight those two zones disagree, so asking the wrong one drops
+   * the date from yesterday's buckets and adds it to today's.
+   */
+  public static areOnTheSameLocalDay(
+    date1: Date | string,
+    date2: Date | string,
+  ): boolean {
+    return this.inCurrentTimezone(date1).isSame(
+      this.inCurrentTimezone(date2),
+      "day",
+    );
+  }
+
   public static areOnTheSameMonth(date1: Date, date2: Date): boolean {
     date1 = this.fromString(date1);
     date2 = this.fromString(date2);
@@ -1465,15 +1535,75 @@ export default class OneUptimeDate {
     return this.getDateAsFormattedString(new Date(), options);
   }
 
+  /**
+   * Whether the machine this is running on writes the time of day on a 12-hour
+   * clock, read from the browser's resolved default locale - which browsers
+   * derive from the operating system's language and region, so changing those
+   * changes this. An explicit -u-hc- override on the locale is honoured too.
+   *
+   * Note what this cannot see: the standalone "24-Hour Time" switch macOS and
+   * Windows offer separately from the region. Safari and recent Firefox fold
+   * that into the locale they resolve; Chromium does not. A user who wants a
+   * clock that ignores their region would need an explicit preference stored
+   * alongside the timezone in User Settings - there is none today.
+   *
+   * Asked of Intl rather than inferred from a formatted string. The string
+   * probe below only recognises the Latin "AM"/"PM", so it misread every
+   * 12-hour locale that marks the day period some other way - ko-KR writes
+   * the equivalent of "PM" in Hangul, ar-EG in Arabic script - and served
+   * those users a 24-hour clock against their own convention.
+   */
   public static getUserPrefers12HourFormat(): boolean {
     if (typeof window === "undefined") {
       // Server-side: default to 12-hour format for user-friendly display
       return true;
     }
 
-    // Client-side: detect user's preferred time format from browser locale
-    const testDate: Date = new Date();
-    const timeString: string = testDate.toLocaleTimeString();
+    /*
+     * `hour12` is only reported when the format actually asks for an hour, so
+     * the probe has to request one.
+     */
+    try {
+      /*
+       * Typed structurally rather than as Intl.ResolvedDateTimeFormatOptions:
+       * `hourCycle` only appears on that interface from the ES2021 lib, and
+       * this file has to compile against the older one too.
+       */
+      const resolvedOptions: {
+        hour12?: boolean | undefined;
+        hourCycle?: string | undefined;
+      } = new Intl.DateTimeFormat(undefined, {
+        hour: "numeric",
+      }).resolvedOptions();
+
+      if (typeof resolvedOptions.hour12 === "boolean") {
+        return resolvedOptions.hour12;
+      }
+
+      /*
+       * Older engines report the cycle but not the boolean. h11/h12 are the
+       * two 12-hour cycles; h23/h24 are the 24-hour ones.
+       */
+      if (resolvedOptions.hourCycle) {
+        return (
+          resolvedOptions.hourCycle === "h11" ||
+          resolvedOptions.hourCycle === "h12"
+        );
+      }
+    } catch {
+      /*
+       * A missing or broken Intl must not take every timestamp in the UI down
+       * with it - fall through to the string probe below.
+       */
+    }
+
+    /*
+     * Last resort: read a formatted time and look for a day-period marker.
+     * This only recognises the Latin "AM"/"PM" - which is exactly why it is the
+     * fallback and not the primary check, since locales like ko-KR and ar-EG
+     * are 12-hour but mark the day period with characters this cannot see.
+     */
+    const timeString: string = new Date().toLocaleTimeString();
     return (
       timeString.toLowerCase().includes("am") ||
       timeString.toLowerCase().includes("pm")

package/Types/Rum/SessionReplay.ts

@@ -296,6 +296,20 @@ export interface SessionReplayChunkEnvelope {
   /* Already scrubbed client-side: origin + path, no query, no fragment. */
   url: string;
 
+  /*
+   * Distinct scrubbed URLs the page was on while this chunk was open, in
+   * chronological order. Optional so an older recorder posting to a newer
+   * server is still accepted - the server then falls back to `url` alone,
+   * which is what it did before this field existed.
+   *
+   * `url` says where the chunk was FLUSHED from; this says where the user
+   * went while it was filling. The session header's routes[] column is the
+   * union of these, and the "sessions that hit /checkout" filter reads it,
+   * so without this a navigation that both starts and ends inside one flush
+   * window is invisible.
+   */
+  routes?: Array<string>;
+
   signals: SessionReplaySignalCounts;
 
   fidelityNotices: Array<string>;
@@ -313,10 +327,52 @@ export interface SessionReplayChunkEnvelope {
   traceIds?: Array<string>;
 }
 
+/*
+ * WHY a config response says enabled:false.
+ *
+ * The disabled response is deliberately a complete, well-formed config
+ * rather than an error, so a recorder that cannot parse a config still
+ * refuses to record. The cost of that was one answer for five very
+ * different causes: from a browser, an instance-wide kill switch, a
+ * deployment whose recorder bundle was never built, an application
+ * somebody switched off and a Redis outage were all "enabled: false" and
+ * nothing else, and no amount of dashboard configuration fixes three of
+ * them.
+ *
+ * This is a closed vocabulary carrying no project data - it is answered
+ * only to a request already bearing a valid ingestion key for that
+ * project, and it says strictly less than the Dashboard's own ingest
+ * status endpoint already shows the same customer.
+ */
+export enum SessionReplayDisabledReason {
+  /* SESSION_REPLAY_INGEST_ENABLED=false on this deployment. */
+  IngestDisabled = "ingest-disabled",
+
+  /* SESSION_REPLAY_ENABLED_BY_DEFAULT=false on this deployment. */
+  DisabledByDefault = "disabled-by-default",
+
+  /*
+   * No published recorder artifact. The build never ran, or its output is
+   * not where the server looks for it - overwhelmingly the answer on a
+   * self-hosted install where replay has never worked at all.
+   */
+  RecorderNotBuilt = "recorder-not-built",
+
+  /* The policy lookup threw. Fail closed, and say that it failed. */
+  PolicyUnavailable = "policy-unavailable",
+
+  /*
+   * No policy for this project/application pair: the application is
+   * switched off, the project is not allowed replay, the identifier does
+   * not match one, or a kill key is set.
+   */
+  NotEnabledForApplication = "not-enabled-for-application",
+}
+
 /*
  * Policy snapshot handed to the recorder at startup. This endpoint is
  * what makes every server-side privacy control reachable by a live
- * recorder — without it, flipping a masking setting would never take
+ * recorder - without it, flipping a masking setting would never take
  * effect in a browser that already loaded.
  */
 export interface SessionReplayConfigResponse {
@@ -401,6 +457,25 @@ export interface SessionReplayConfigResponse {
   configEpoch: number;
 
   directive: SessionReplayDirective;
+
+  /*
+   * Set only alongside enabled:false. Optional on the wire like every
+   * other field added after v1: an older recorder ignores it, a newer one
+   * logs it, and neither breaks.
+   */
+  disabledReason?: SessionReplayDisabledReason;
+
+  /*
+   * Ask every recorder that reads this policy to print its decisions to
+   * the browser console (SESSION_REPLAY_DEBUG on the deployment).
+   *
+   * The switch of last resort, and the only one an operator can reach
+   * without editing a page they do not own: the per-browser localStorage
+   * and query-string switches need somebody at that browser. It is off by
+   * default and must stay that way - a RUM script logging on every visitor
+   * of every customer is noise on somebody else's site.
+   */
+  debug?: boolean;
 }
 
 /* Response to a chunk POST. Deliberately tiny. */

package/UI/Components/Date/TimeRangePickerDropdown.tsx

@@ -7,6 +7,7 @@ import React, {
   useState,
 } from "react";
 import InBetween from "../../../Types/BaseDatabase/InBetween";
+import OneUptimeDate from "../../../Types/Date";
 import IconProp from "../../../Types/Icon/IconProp";
 import RangeStartAndEndDateTime, {
   RangeStartAndEndDateTimeUtil,
@@ -54,12 +55,15 @@ export const TIME_RANGE_PRESET_OPTIONS: Array<TimeRangePickerPresetOption> = [
   { range: TimeRange.PAST_THREE_MONTHS, label: "Past 3 Months" },
 ];
 
+/*
+ * Both ends of a custom window are written the way the user's machine writes
+ * times: on its 12- or 24-hour clock, in the timezone they configured. Reading
+ * the digits off the Date itself - which is what this used to do - pinned the
+ * label to a 24-hour clock in whatever zone the browser process happened to be
+ * in, so a machine set to AM/PM still got "Mar 1, 14:30" back.
+ */
 function formatDateShort(date: Date): string {
-  const month: string = date.toLocaleString("en-US", { month: "short" });
-  const day: number = date.getDate();
-  const hours: string = date.getHours().toString().padStart(2, "0");
-  const minutes: string = date.getMinutes().toString().padStart(2, "0");
-  return `${month} ${day}, ${hours}:${minutes}`;
+  return OneUptimeDate.getDateAsLocalShortDateTimeString(date);
 }
 
 export function getTimeRangeButtonLabel(

package/UI/Components/LogsViewer/LogsViewer.tsx

@@ -175,7 +175,11 @@ const severityWeight: Record<string, number> = {
   trace: 1,
 };
 
-function getEmptyMessageWithTimeRange(
+/*
+ * Exported so the window it reports can be unit-tested directly - rendering the
+ * whole viewer to read one sentence is not worth the setup.
+ */
+export function getEmptyMessageWithTimeRange(
   timeRange: RangeStartAndEndDateTime | undefined,
 ): string {
   if (!timeRange) {
@@ -185,13 +189,14 @@ function getEmptyMessageWithTimeRange(
   if (timeRange.range === TimeRange.CUSTOM && timeRange.startAndEndDate) {
     const startDate: Date = timeRange.startAndEndDate.startValue;
     const endDate: Date = timeRange.startAndEndDate.endValue;
+    /*
+     * Same shape, clock and timezone as the label on the picker button that
+     * set this window - pinning en-US here handed a US viewer AM/PM even on a
+     * 24-hour machine, and read the digits in the browser's zone rather than
+     * the one configured in User Settings.
+     */
     const fmt: (d: Date) => string = (d: Date): string => {
-      return d.toLocaleString("en-US", {
-        month: "short",
-        day: "numeric",
-        hour: "2-digit",
-        minute: "2-digit",
-      });
+      return OneUptimeDate.getDateAsLocalShortDateTimeString(d);
     };
 
     return `Time range: ${fmt(startDate)} – ${fmt(endDate)}. Try adjusting filters or expanding the time range.`;