@oneuptime/common 11.3.28 → 11.4.1

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

@@ -0,0 +1,90 @@
+import TelemetrySearchBar from "../../../UI/Components/TelemetryViewer/components/TelemetrySearchBar";
+import "@testing-library/jest-dom/extend-expect";
+import { cleanup, fireEvent, render, screen } from "@testing-library/react";
+import React from "react";
+import { afterEach, describe, expect, jest, test } from "@jest/globals";
+
+describe("TelemetrySearchBar", () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  test("shows the results loader inside the search box while loading", () => {
+    const { rerender } = render(
+      <TelemetrySearchBar
+        value="service:api"
+        onChange={jest.fn()}
+        onSubmit={jest.fn()}
+        isLoading={false}
+      />,
+    );
+
+    expect(
+      screen.queryByRole("status", { name: "Loading results" }),
+    ).toBeNull();
+
+    rerender(
+      <TelemetrySearchBar
+        value="service:api"
+        onChange={jest.fn()}
+        onSubmit={jest.fn()}
+        isLoading={true}
+      />,
+    );
+
+    const input: HTMLElement = screen.getByRole("textbox");
+    const loader: HTMLElement = screen.getByRole("status", {
+      name: "Loading results",
+    });
+
+    expect(input.parentElement?.contains(loader)).toBe(true);
+    expect(input.parentElement?.getAttribute("aria-busy")).toBe("true");
+  });
+
+  test("Enter submits and keeps the token when onFieldValueSelect returns false", () => {
+    const onChange: (value: string) => void = jest.fn();
+    const onSubmit: () => void = jest.fn();
+    const onFieldValueSelect: (fieldKey: string, value: string) => boolean =
+      jest.fn((_fieldKey: string, _value: string): boolean => {
+        return false;
+      });
+
+    render(
+      <TelemetrySearchBar
+        value="name:process"
+        onChange={onChange}
+        onSubmit={onSubmit}
+        onFieldValueSelect={onFieldValueSelect}
+      />,
+    );
+
+    fireEvent.keyDown(screen.getByRole("textbox"), { key: "Enter" });
+
+    expect(onFieldValueSelect).toHaveBeenCalledWith("name", "process");
+    expect(onSubmit).toHaveBeenCalledTimes(1);
+    // The token must stay in the input — clearing it would drop the filter.
+    expect(onChange).not.toHaveBeenCalled();
+  });
+
+  test("Enter clears the token when onFieldValueSelect consumes it as a chip", () => {
+    const onChange: (value: string) => void = jest.fn();
+    const onSubmit: () => void = jest.fn();
+    const onFieldValueSelect: (fieldKey: string, value: string) => void =
+      jest.fn();
+
+    render(
+      <TelemetrySearchBar
+        value="@http.method:GET"
+        onChange={onChange}
+        onSubmit={onSubmit}
+        onFieldValueSelect={onFieldValueSelect}
+      />,
+    );
+
+    fireEvent.keyDown(screen.getByRole("textbox"), { key: "Enter" });
+
+    expect(onFieldValueSelect).toHaveBeenCalledWith("http.method", "GET");
+    expect(onChange).toHaveBeenCalledWith("");
+    expect(onSubmit).not.toHaveBeenCalled();
+  });
+});

package/Tests/UI/Utils/Theme.test.ts

@@ -0,0 +1,161 @@
+import { beforeEach, describe, expect, test } from "@jest/globals";
+import ThemeUtil, { THEME_STORAGE_KEY, Theme } from "../../../UI/Utils/Theme";
+
+const LIGHT_THEME_COLOR: string = "#f9fafb";
+const DARK_THEME_COLOR: string = "#0f172a";
+
+const getThemeColorMeta: () => HTMLMetaElement = (): HTMLMetaElement => {
+  const themeColor: HTMLMetaElement | null = document.querySelector(
+    'meta[name="theme-color"]:not([media])',
+  );
+
+  expect(themeColor).not.toBeNull();
+  return themeColor as HTMLMetaElement;
+};
+
+const dispatchStorageEvent: (
+  key: string | null,
+  newValue: string | null,
+) => void = (key: string | null, newValue: string | null): void => {
+  window.dispatchEvent(
+    new StorageEvent("storage", {
+      key,
+      newValue,
+      storageArea: window.localStorage,
+    }),
+  );
+};
+
+const makeLocalStorageUnavailable: () => () => void = (): (() => void) => {
+  const descriptor: PropertyDescriptor | undefined =
+    Object.getOwnPropertyDescriptor(window, "localStorage");
+
+  if (!descriptor) {
+    throw new Error(
+      "Expected window.localStorage to have a property descriptor",
+    );
+  }
+
+  Object.defineProperty(window, "localStorage", {
+    configurable: true,
+    get: (): never => {
+      throw new Error("Storage is unavailable");
+    },
+  });
+
+  return (): void => {
+    Object.defineProperty(window, "localStorage", descriptor);
+  };
+};
+
+describe("ThemeUtil", () => {
+  beforeEach(() => {
+    window.localStorage.clear();
+
+    const root: HTMLElement = document.documentElement;
+    root.removeAttribute("class");
+    root.removeAttribute("data-theme");
+    root.style.removeProperty("color-scheme");
+
+    document.head.innerHTML = [
+      '<meta name="theme-color" content="initial">',
+      '<meta name="theme-color" media="(prefers-color-scheme: dark)" content="media-theme">',
+    ].join("");
+  });
+
+  test("defaults to light when no preference has been saved", () => {
+    document.documentElement.classList.add(Theme.Dark);
+
+    expect(ThemeUtil.getStoredTheme()).toBe(Theme.Light);
+
+    ThemeUtil.initialize();
+
+    expect(ThemeUtil.getAppliedTheme()).toBe(Theme.Light);
+    expect(document.documentElement.classList.contains(Theme.Dark)).toBe(false);
+    expect(document.documentElement.dataset["theme"]).toBe(Theme.Light);
+  });
+
+  test("restores an exactly persisted dark preference", () => {
+    window.localStorage.setItem(THEME_STORAGE_KEY, Theme.Dark);
+
+    expect(ThemeUtil.getStoredTheme()).toBe(Theme.Dark);
+
+    ThemeUtil.initialize();
+
+    expect(ThemeUtil.getAppliedTheme()).toBe(Theme.Dark);
+    expect(document.documentElement.classList.contains(Theme.Dark)).toBe(true);
+  });
+
+  test.each([Theme.Light, "Dark", "DARK", " dark ", "invalid", ""])(
+    "treats the persisted value %p as light",
+    (persistedValue: string) => {
+      window.localStorage.setItem(THEME_STORAGE_KEY, persistedValue);
+
+      expect(ThemeUtil.getStoredTheme()).toBe(Theme.Light);
+    },
+  );
+
+  test("updates the root class, data attribute, color scheme, and theme-color meta", () => {
+    const mediaThemeColor: HTMLMetaElement = document.querySelector(
+      'meta[name="theme-color"][media]',
+    ) as HTMLMetaElement;
+
+    ThemeUtil.setTheme(Theme.Dark);
+
+    expect(window.localStorage.getItem(THEME_STORAGE_KEY)).toBe(Theme.Dark);
+    expect(document.documentElement.classList.contains(Theme.Dark)).toBe(true);
+    expect(document.documentElement.dataset["theme"]).toBe(Theme.Dark);
+    expect(document.documentElement.style.colorScheme).toBe(Theme.Dark);
+    expect(getThemeColorMeta().getAttribute("content")).toBe(DARK_THEME_COLOR);
+    expect(mediaThemeColor.getAttribute("content")).toBe("media-theme");
+
+    ThemeUtil.setTheme(Theme.Light);
+
+    expect(window.localStorage.getItem(THEME_STORAGE_KEY)).toBe(Theme.Light);
+    expect(document.documentElement.classList.contains(Theme.Dark)).toBe(false);
+    expect(document.documentElement.dataset["theme"]).toBe(Theme.Light);
+    expect(document.documentElement.style.colorScheme).toBe(Theme.Light);
+    expect(getThemeColorMeta().getAttribute("content")).toBe(LIGHT_THEME_COLOR);
+    expect(mediaThemeColor.getAttribute("content")).toBe("media-theme");
+  });
+
+  test("falls back to light when reading storage fails", () => {
+    const restoreLocalStorage: () => void = makeLocalStorageUnavailable();
+
+    try {
+      expect(ThemeUtil.getStoredTheme()).toBe(Theme.Light);
+    } finally {
+      restoreLocalStorage();
+    }
+  });
+
+  test("still applies the visual theme when writing storage fails", () => {
+    const restoreLocalStorage: () => void = makeLocalStorageUnavailable();
+
+    try {
+      expect(() => {
+        ThemeUtil.setTheme(Theme.Dark);
+      }).not.toThrow();
+      expect(ThemeUtil.getAppliedTheme()).toBe(Theme.Dark);
+      expect(document.documentElement.dataset["theme"]).toBe(Theme.Dark);
+    } finally {
+      restoreLocalStorage();
+    }
+  });
+
+  test("synchronizes dark and cleared preferences from other tabs", () => {
+    ThemeUtil.initialize();
+
+    dispatchStorageEvent(THEME_STORAGE_KEY, Theme.Dark);
+    expect(ThemeUtil.getAppliedTheme()).toBe(Theme.Dark);
+
+    dispatchStorageEvent(THEME_STORAGE_KEY, null);
+    expect(ThemeUtil.getAppliedTheme()).toBe(Theme.Light);
+
+    dispatchStorageEvent(THEME_STORAGE_KEY, Theme.Dark);
+    expect(ThemeUtil.getAppliedTheme()).toBe(Theme.Dark);
+
+    dispatchStorageEvent(null, null);
+    expect(ThemeUtil.getAppliedTheme()).toBe(Theme.Light);
+  });
+});

package/Types/BaseDatabase/AggregateBy.ts

@@ -16,4 +16,16 @@ export default interface AggregateBy<TBaseModel extends GenericObject> {
   skip: number;
   sort?: Sort<TBaseModel> | undefined;
   groupBy?: GroupBy<TBaseModel> | undefined;
+  /**
+   * OpenTelemetry attribute keys (e.g. "service.name") to group the
+   * aggregation by. Grouping happens on the individual map entries —
+   * `attributes['service.name']` — so all rows sharing the selected
+   * key values are pooled into one series per bucket. This is distinct
+   * from `groupBy: { attributes: true }`, which groups by the ENTIRE
+   * attribute map and therefore fragments the result into one series
+   * per unique attribute combination. Only supported by models with an
+   * `attributes` map column (currently Metric); result rows carry an
+   * `attributes` object containing exactly these keys.
+   */
+  groupByAttributeKeys?: Array<string> | undefined;
 }

package/Types/Dashboard/DashboardComponentType.ts

@@ -5,6 +5,7 @@ enum DashboardComponentType {
   Table = `Table`,
   Gauge = `Gauge`,
   LogStream = `LogStream`,
+  LogChart = `LogChart`,
   TraceList = `TraceList`,
   TraceChart = `TraceChart`,
   TraceTable = `TraceTable`,

package/Types/Dashboard/DashboardComponents/ComponentArgument.ts

@@ -27,6 +27,7 @@ export enum EntityFilterModelType {
   AlertState = "AlertState",
   MonitorStatus = "MonitorStatus",
   Monitor = "Monitor",
+  Service = "Service",
   Label = "Label",
   KubernetesCluster = "KubernetesCluster",
   DockerHost = "DockerHost",

package/Types/Dashboard/DashboardComponents/DashboardLogChartComponent.ts

@@ -0,0 +1,19 @@
+import ObjectID from "../../ObjectID";
+import DashboardComponentType from "../DashboardComponentType";
+import BaseComponent from "./DashboardBaseComponent";
+
+export default interface DashboardLogChartComponent extends BaseComponent {
+  componentType: DashboardComponentType.LogChart;
+  componentId: ObjectID;
+  arguments: {
+    title?: string | undefined;
+    serviceIds?: Array<string> | undefined;
+    severityFilters?: Array<string> | undefined;
+    bodyContains?: string | undefined;
+    /*
+     * Exact attribute matches in the log-search syntax used by Log Stream,
+     * for example: @service.name:checkout @deployment.environment:production.
+     */
+    attributeFilterQuery?: string | undefined;
+  };
+}

package/Types/Dashboard/DashboardTemplates.ts

@@ -192,7 +192,15 @@ function buildMetricQueryConfig(config: MetricConfig): Record<string, unknown> {
         metricName: config.metricName,
         aggegationType: config.aggregationType,
       },
-      groupBy: config.groupByAttributeKeys ? { attributes: true } : undefined,
+      /*
+       * groupByAttributeKeys alone drives per-series grouping — the
+       * fetch layer compiles it to `GROUP BY attributes['<key>']`.
+       * Baking a whole-map `groupBy: { attributes: true }` alongside
+       * it (the old approach) fragmented results into one series per
+       * unique attribute combination; older stored configs that still
+       * carry it are stripped at fetch time (MetricUtil.fetchResults).
+       */
+      groupBy: undefined,
       groupByAttributeKeys: config.groupByAttributeKeys,
     },
     transformAsRate: config.transformAsRate,

package/Types/Date.ts

@@ -286,6 +286,52 @@ export default class OneUptimeDate {
       .format(use12HourFormat ? "h:mm A" : "HH:mm");
   }
 
+  /**
+   * Format a single instant as a human-readable "weekday, month day, time"
+   * string resolved in a specific IANA timezone (e.g. "America/New_York").
+   *
+   * Used by the on-call schedule summaries to render each shift's start / end in
+   * the SAME zone the rotation engine schedules people in, with a DST-aware zone
+   * abbreviation appended so the reader is never in doubt which wall clock the
+   * time refers to. When `timezone` is omitted the instant is formatted in the
+   * viewer's local zone (matching the rest of the local-time UI).
+   */
+  public static getDateAsFormattedStringInTimezone(data: {
+    date: Date | string;
+    timezone?: string | undefined;
+    onlyShowDate?: boolean | undefined;
+    showWeekday?: boolean | undefined;
+    use12HourFormat?: boolean | undefined;
+  }): string {
+    const date: Date = this.fromString(data.date);
+    const use12HourFormat: boolean =
+      data.use12HourFormat ?? this.getUserPrefers12HourFormat();
+
+    const timePart: string = use12HourFormat ? "h:mm A" : "HH:mm";
+    const datePart: string = data.showWeekday
+      ? "ddd, MMM D, YYYY"
+      : "MMM D, YYYY";
+    const formatString: string = data.onlyShowDate
+      ? datePart
+      : `${datePart}, ${timePart}`;
+
+    if (!data.timezone) {
+      const local: moment.Moment = moment(date).local();
+      return (
+        local.format(formatString) +
+        (data.onlyShowDate ? "" : " " + this.getCurrentTimezoneString())
+      ).trim();
+    }
+
+    const zoned: moment.Moment = moment(date).tz(data.timezone);
+    return (
+      zoned.format(formatString) +
+      (data.onlyShowDate
+        ? ""
+        : " " + this.getZoneAbbrByTimezone(data.timezone as Timezone, date))
+    ).trim();
+  }
+
   /**
    * Reinterpret the wall-clock components of `date` — read in the process /
    * browser local zone — as the SAME wall-clock in `timezone`, and return that

package/Types/Monitor/CriteriaFilter.ts

@@ -3,6 +3,8 @@ import MetricCriteriaContext from "./MetricMonitor/MetricCriteriaContext";
 
 export enum CheckOn {
   ResponseTime = "Response Time (in ms)",
+  PacketLossPercent = "Packet Loss (in %)",
+  Jitter = "Jitter (in ms)",
   ResponseStatusCode = "Response Status Code",
   ResponseHeader = "Response Header",
   ResponseHeaderValue = "Response Header Value",
@@ -374,6 +376,8 @@ export class CriteriaFilterUtil {
     return (
       checkOn === CheckOn.ResponseStatusCode ||
       checkOn === CheckOn.ResponseTime ||
+      checkOn === CheckOn.PacketLossPercent ||
+      checkOn === CheckOn.Jitter ||
       checkOn === CheckOn.DiskUsagePercent ||
       checkOn === CheckOn.CPUUsagePercent ||
       checkOn === CheckOn.MemoryUsagePercent ||

package/Types/Monitor/HttpPhaseTimings.ts

@@ -0,0 +1,16 @@
+/*
+ * Per-phase breakdown of an HTTP(S) check, all in milliseconds. Captured by
+ * the probe from socket events on the initial connection of the request.
+ * Every field is optional: phases are absent when they don't apply (no TLS
+ * on plain HTTP, no DNS lookup when the target is an IP address) or when the
+ * request went through a proxy, where per-phase timing would be misleading.
+ * When the check follows redirects, the phases describe the first connection
+ * and the download phase absorbs the rest of the exchange.
+ */
+export default interface HttpPhaseTimings {
+  dnsLookupInMs?: number | undefined;
+  tcpConnectInMs?: number | undefined;
+  tlsHandshakeInMs?: number | undefined;
+  timeToFirstByteInMs?: number | undefined;
+  downloadInMs?: number | undefined;
+}

package/Types/Monitor/MonitorMetricType.ts

@@ -7,6 +7,23 @@ enum MonitorMetricType {
   IsOnline = "oneuptime.monitor.online",
   ExecutionTime = "oneuptime.monitor.execution.time",
 
+  /*
+   * Packet-level network metrics. Emitted by Ping/IP monitors when the
+   * probe sends multiple echo requests per check; absent for older probes.
+   */
+  PacketLossPercent = "oneuptime.monitor.ping.packet.loss.percent",
+  Jitter = "oneuptime.monitor.ping.jitter",
+
+  /*
+   * HTTP(S) phase breakdown. Emitted by Website/API monitors when the probe
+   * captured socket-level timings; absent behind proxies and on older probes.
+   */
+  DnsLookupTime = "oneuptime.monitor.http.dns.lookup.time",
+  TcpConnectTime = "oneuptime.monitor.http.tcp.connect.time",
+  TlsHandshakeTime = "oneuptime.monitor.http.tls.handshake.time",
+  TimeToFirstByte = "oneuptime.monitor.http.time.to.first.byte",
+  DownloadTime = "oneuptime.monitor.http.download.time",
+
   /*
    * Extended server/VM metrics. Emitted when the agent payload contains them;
    * absent for older agents, which keeps the pipeline backwards-compatible.

package/Types/Monitor/PingMonitor/PingMonitorResponse.ts

@@ -0,0 +1,20 @@
+/*
+ * Packet-level statistics captured by the Ping/IP monitor. Populated when
+ * the probe sends multiple ICMP echo requests per check. All RTT values
+ * are in milliseconds. Absent on older probes (single-echo pings) and when
+ * ICMP is blocked and the probe falls back to TCP port checks, which keeps
+ * the pipeline backwards-compatible.
+ */
+export default interface PingMonitorResponse {
+  packetsSent: number;
+  packetsReceived: number;
+  packetLossPercent: number;
+  minRoundTripTimeInMs?: number | undefined;
+  maxRoundTripTimeInMs?: number | undefined;
+  avgRoundTripTimeInMs?: number | undefined;
+  /*
+   * Jitter is the standard deviation of round-trip times across the
+   * packets sent in this check.
+   */
+  jitterInMs?: number | undefined;
+}