@oneuptime/common 11.4.0 → 11.4.1

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

@@ -0,0 +1,130 @@
+import EntityDropdown from "../../../UI/Components/EntityDropdown/EntityDropdown";
+import {
+  DROPDOWN_MENU_Z_INDEX,
+  DropdownOption,
+} from "../../../UI/Components/Dropdown/Dropdown";
+import getJestMockFunction, { MockFunction } from "../../../Tests/MockType";
+import { afterEach, describe, expect, jest, test } from "@jest/globals";
+import { cleanup, fireEvent, render, screen } from "@testing-library/react";
+import React from "react";
+
+describe("EntityDropdown", () => {
+  const options: Array<DropdownOption> = [
+    { value: "members", label: "Members" },
+    { value: "admins", label: "Admins" },
+  ];
+  const originalInnerHeight: number = window.innerHeight;
+  const originalInnerWidth: number = window.innerWidth;
+
+  const setViewport: (width: number, height: number) => void = (
+    width: number,
+    height: number,
+  ): void => {
+    Object.defineProperty(window, "innerWidth", {
+      configurable: true,
+      value: width,
+    });
+    Object.defineProperty(window, "innerHeight", {
+      configurable: true,
+      value: height,
+    });
+  };
+
+  const makeRect: (
+    left: number,
+    top: number,
+    width: number,
+    height: number,
+  ) => DOMRect = (
+    left: number,
+    top: number,
+    width: number,
+    height: number,
+  ): DOMRect => {
+    return {
+      bottom: top + height,
+      height,
+      left,
+      right: left + width,
+      top,
+      width,
+      x: left,
+      y: top,
+      toJSON: (): Record<string, never> => {
+        return {};
+      },
+    } as DOMRect;
+  };
+
+  const openDropdownAt: (rect: DOMRect) => HTMLInputElement = (
+    rect: DOMRect,
+  ): HTMLInputElement => {
+    const input: HTMLInputElement = screen.getByRole("combobox", {
+      name: "Team",
+    }) as HTMLInputElement;
+    const control: HTMLElement | null =
+      input.parentElement?.parentElement || null;
+
+    if (!control) {
+      throw new Error("EntityDropdown control was not rendered.");
+    }
+
+    jest.spyOn(control, "getBoundingClientRect").mockReturnValue(rect);
+    fireEvent.focus(input);
+
+    return input;
+  };
+
+  afterEach(() => {
+    cleanup();
+    jest.restoreAllMocks();
+    setViewport(originalInnerWidth, originalInnerHeight);
+  });
+
+  test("positions its fixed menu below the control above modal surfaces", () => {
+    setViewport(1000, 800);
+    render(<EntityDropdown ariaLabel="Team" options={options} />);
+
+    openDropdownAt(makeRect(120, 200, 320, 40));
+
+    const menu: HTMLElement = screen.getByTestId("entity-dropdown-menu");
+
+    expect(menu.classList.contains("fixed")).toBe(true);
+    expect(menu.style.top).toBe("244px");
+    expect(menu.style.bottom).toBe("");
+    expect(menu.style.left).toBe("120px");
+    expect(menu.style.width).toBe("320px");
+    expect(menu.style.maxHeight).toBe("384px");
+    expect(menu.style.visibility).toBe("visible");
+    expect(menu.style.zIndex).toBe(String(DROPDOWN_MENU_Z_INDEX));
+  });
+
+  test("flips its menu above a control near the modal footer", () => {
+    setViewport(1000, 600);
+    render(<EntityDropdown ariaLabel="Team" options={options} />);
+
+    openDropdownAt(makeRect(120, 520, 320, 40));
+
+    const menu: HTMLElement = screen.getByTestId("entity-dropdown-menu");
+
+    expect(menu.style.top).toBe("");
+    expect(menu.style.bottom).toBe("84px");
+    expect(menu.style.maxHeight).toBe("384px");
+    expect(menu.style.visibility).toBe("visible");
+  });
+
+  test("selects an option from the fixed menu", () => {
+    const onChange: MockFunction = getJestMockFunction();
+    setViewport(1000, 800);
+    render(
+      <EntityDropdown ariaLabel="Team" onChange={onChange} options={options} />,
+    );
+
+    openDropdownAt(makeRect(120, 200, 320, 40));
+    fireEvent.click(screen.getByRole("option", { name: "Members" }));
+
+    expect(onChange).toHaveBeenCalledTimes(1);
+    expect(onChange).toHaveBeenCalledWith("members");
+    expect(screen.queryByTestId("entity-dropdown-menu")).toBeNull();
+  });
+});

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

@@ -26,6 +26,148 @@ describe("Modal", () => {
     expect(getByText("Modal content")).toBeInTheDocument();
   });
 
+  it("renders an accessible elevated dialog shell", () => {
+    const onCloseMock: MockFunction = getJestMockFunction();
+    const { getByTestId } = render(
+      <Modal
+        title="Accessible Modal"
+        description="A concise description"
+        onClose={onCloseMock}
+      >
+        <div>Modal content</div>
+      </Modal>,
+    );
+
+    const modal: HTMLElement = getByTestId("modal");
+    const title: HTMLElement = getByTestId("modal-title");
+    const description: HTMLElement = getByTestId("modal-description");
+    const closeButton: HTMLElement = getByTestId("close-button");
+
+    expect(modal).toHaveAttribute("role", "dialog");
+    expect(modal).toHaveAttribute("aria-modal", "true");
+    expect(modal).toHaveAttribute("aria-labelledby", title.id);
+    expect(modal).toHaveAttribute("aria-describedby", description.id);
+    expect(modal).toHaveClass("rounded-t-2xl", "shadow-2xl");
+    expect(getByTestId("modal-backdrop")).toHaveClass(
+      "bg-gray-950/45",
+      "backdrop-blur-[2px]",
+    );
+    expect(closeButton).toHaveClass("inline-flex");
+    expect(closeButton).not.toHaveClass("md:hidden");
+  });
+
+  it("keeps keyboard focus inside the modal", () => {
+    const onCloseMock: MockFunction = getJestMockFunction();
+    const onSubmitMock: MockFunction = getJestMockFunction();
+    const { getByLabelText, getByTestId } = render(
+      <Modal title="Focus Modal" onClose={onCloseMock} onSubmit={onSubmitMock}>
+        <input aria-label="Modal input" />
+      </Modal>,
+    );
+
+    const input: HTMLElement = getByLabelText("Modal input");
+    const headerCloseButton: HTMLElement = getByTestId("close-button");
+    const submitButton: HTMLElement = getByTestId("modal-footer-submit-button");
+
+    expect(input).toHaveFocus();
+
+    submitButton.focus();
+    fireEvent.keyDown(document, { key: "Tab" });
+    expect(headerCloseButton).toHaveFocus();
+
+    fireEvent.keyDown(document, { key: "Tab", shiftKey: true });
+    expect(submitButton).toHaveFocus();
+  });
+
+  it("closes only the topmost modal and restores focus to its opener", () => {
+    const onParentCloseMock: MockFunction = getJestMockFunction();
+    const onChildCloseMock: MockFunction = getJestMockFunction();
+    const onChildSubmitMock: MockFunction = getJestMockFunction();
+
+    const NestedModalFixture: React.FunctionComponent =
+      (): React.ReactElement => {
+        const [isChildOpen, setIsChildOpen] = React.useState<boolean>(false);
+
+        return (
+          <Modal title="Parent Modal" onClose={onParentCloseMock}>
+            <>
+              <button
+                type="button"
+                onClick={() => {
+                  setIsChildOpen(true);
+                }}
+              >
+                Open child
+              </button>
+              {isChildOpen && (
+                <Modal
+                  title="Child Modal"
+                  onSubmit={onChildSubmitMock}
+                  onClose={() => {
+                    onChildCloseMock();
+                    setIsChildOpen(false);
+                  }}
+                >
+                  <div>Child content</div>
+                </Modal>
+              )}
+            </>
+          </Modal>
+        );
+      };
+
+    const { getByRole } = render(<NestedModalFixture />);
+    const childOpener: HTMLElement = getByRole("button", {
+      name: "Open child",
+    });
+
+    fireEvent.click(childOpener);
+    fireEvent.keyDown(document, { key: "Escape" });
+
+    expect(onChildCloseMock).toHaveBeenCalledTimes(1);
+    expect(onParentCloseMock).not.toHaveBeenCalled();
+    expect(childOpener).toHaveFocus();
+  });
+
+  it("restores focus when a modal contains an auto-focused field", () => {
+    const opener: HTMLButtonElement = document.createElement("button");
+    document.body.appendChild(opener);
+    opener.focus();
+
+    const { getByLabelText, unmount } = render(
+      <Modal title="Auto Focus Modal">
+        <input aria-label="Auto-focused input" autoFocus />
+      </Modal>,
+    );
+
+    expect(getByLabelText("Auto-focused input")).toHaveFocus();
+
+    unmount();
+    expect(opener).toHaveFocus();
+    opener.remove();
+  });
+
+  it("renders the footer only when it has content", () => {
+    const { queryByTestId, rerender } = render(
+      <Modal title="No Actions Modal">
+        <div>Modal content</div>
+      </Modal>,
+    );
+
+    expect(queryByTestId("modal-footer")).not.toBeInTheDocument();
+
+    rerender(
+      <Modal
+        title="Utility Action Modal"
+        leftFooterElement={<button type="button">Utility action</button>}
+      >
+        <div>Modal content</div>
+      </Modal>,
+    );
+
+    expect(queryByTestId("modal-footer")).toBeInTheDocument();
+  });
+
   it("closes the modal when the close button is clicked", () => {
     const onCloseMock: MockFunction = getJestMockFunction();
     const onSubmit: MockFunction = getJestMockFunction();
@@ -72,7 +214,7 @@ describe("Modal", () => {
       </Modal>,
     );
 
-    expect(getByTestId("modal")).toHaveClass("md:max-w-lg");
+    expect(getByTestId("modal")).toHaveClass("sm:max-w-lg", "md:max-w-lg");
   });
 
   it("displays the modal with the correct width when modalWidth is set", () => {
@@ -88,7 +230,7 @@ describe("Modal", () => {
       </Modal>,
     );
 
-    expect(getByTestId("modal")).toHaveClass("md:max-w-3xl");
+    expect(getByTestId("modal")).toHaveClass("sm:max-w-3xl", "md:max-w-3xl");
   });
 
   it("displays the children passed to the modal", () => {

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/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.