@oneuptime/common 12.0.25 → 12.0.27

package/UI/Components/TelemetryViewer/TelemetryViewer.tsx

@@ -21,6 +21,9 @@ import ComponentLoader from "../ComponentLoader/ComponentLoader";
 import ErrorMessage from "../ErrorMessage/ErrorMessage";
 import Icon from "../Icon/Icon";
 import IconProp from "../../../Types/Icon/IconProp";
+import useHistogramZoom, {
+  HistogramZoomState,
+} from "../Charts/Utils/useHistogramZoom";
 
 export interface TelemetryViewerProps<T> {
   // -- Data --
@@ -132,6 +135,18 @@ function TelemetryViewerInner<T>(props: TelemetryViewerProps<T>): ReactElement {
 
   const showHistogram: boolean = props.showHistogram ?? true;
 
+  /*
+   * Drag-zooming the histogram is a one-way trip on its own: it swaps the
+   * window for a custom one and nothing remembers what the reader was
+   * looking at. This keeps that window so a double-click on the chart can
+   * hand it back.
+   */
+  const histogramZoom: HistogramZoomState = useHistogramZoom({
+    timeRange: props.timeRange,
+    onTimeRangeSelect: props.onHistogramTimeRangeSelect,
+    onTimeRangeChange: props.onTimeRangeChange,
+  });
+
   return (
     <div className="flex min-h-0 w-full flex-1 flex-col gap-3">
       {/* Toolbar */}
@@ -160,7 +175,7 @@ function TelemetryViewerInner<T>(props: TelemetryViewerProps<T>): ReactElement {
 
         <TelemetryTimeRangePicker
           value={props.timeRange}
-          onChange={props.onTimeRangeChange}
+          onChange={histogramZoom.onTimeRangeChange || props.onTimeRangeChange}
         />
 
         {props.live && (
@@ -231,7 +246,8 @@ function TelemetryViewerInner<T>(props: TelemetryViewerProps<T>): ReactElement {
             isLoading={props.histogramLoading || false}
             series={props.histogramSeries}
             title={props.histogramTitle}
-            onTimeRangeSelect={props.onHistogramTimeRangeSelect}
+            onTimeRangeSelect={histogramZoom.onTimeRangeSelect}
+            onZoomOut={histogramZoom.onZoomOut}
             headerActions={props.histogramHeaderActions}
             valueFormatter={props.histogramValueFormatter}
           />

package/UI/Components/TelemetryViewer/components/TelemetryHistogram.tsx

@@ -2,6 +2,7 @@ import React, {
   FunctionComponent,
   ReactElement,
   ReactNode,
+  useEffect,
   useMemo,
   useCallback,
   useRef,
@@ -31,6 +32,12 @@ export interface TelemetryHistogramProps {
   series: Array<HistogramSeriesOption>;
   title?: string | undefined;
   onTimeRangeSelect?: ((startTime: Date, endTime: Date) => void) | undefined;
+  /*
+   * Set only while the chart is showing a window the reader dragged out of
+   * it. Double-clicking the chart then puts them back on the window they
+   * started from.
+   */
+  onZoomOut?: (() => void) | undefined;
   // Extra controls rendered in the chart header (e.g. a metric selector).
   headerActions?: ReactNode;
   // Formats Y-axis ticks and tooltip values (e.g. milliseconds → "1.2 s").
@@ -91,6 +98,12 @@ const TelemetryHistogram: FunctionComponent<TelemetryHistogramProps> = (
   const [selectionStart, setSelectionStart] = useState<string | null>(null);
   const [selectionEnd, setSelectionEnd] = useState<string | null>(null);
   const isSelecting: React.MutableRefObject<boolean> = useRef(false);
+  /*
+   * Mirrors isSelecting for rendering. The ref stays the authority so a
+   * mouseup handled twice (chart *and* window, below) cannot commit the same
+   * drag twice; the state is only here so the drag can change what is drawn.
+   */
+  const [isDragging, setIsDragging] = useState<boolean>(false);
 
   const pivotedData: Array<PivotedRow> = useMemo(() => {
     return pivotBuckets(props.buckets);
@@ -123,6 +136,7 @@ const TelemetryHistogram: FunctionComponent<TelemetryHistogramProps> = (
       }
 
       isSelecting.current = true;
+      setIsDragging(true);
       setSelectionStart(e.activeLabel as string);
       setSelectionEnd(null);
     },
@@ -145,12 +159,14 @@ const TelemetryHistogram: FunctionComponent<TelemetryHistogramProps> = (
       !props.onTimeRangeSelect
     ) {
       isSelecting.current = false;
+      setIsDragging(false);
       setSelectionStart(null);
       setSelectionEnd(null);
       return;
     }
 
     isSelecting.current = false;
+    setIsDragging(false);
 
     const start: Date = OneUptimeDate.fromString(selectionStart);
     const end: Date = OneUptimeDate.fromString(selectionEnd);
@@ -170,6 +186,28 @@ const TelemetryHistogram: FunctionComponent<TelemetryHistogramProps> = (
     setSelectionEnd(null);
   }, [selectionStart, selectionEnd, props.onTimeRangeSelect]);
 
+  /*
+   * Readers routinely drag past the edge of a 120px-tall chart and let go
+   * outside it, where the chart's own mouseup never fires. Without this the
+   * drag would never end: the selection band would stay painted and the
+   * tooltip would stay suppressed until the next click.
+   */
+  useEffect(() => {
+    if (!isDragging) {
+      return undefined;
+    }
+
+    const finishDragOutsideChart: () => void = (): void => {
+      handleMouseUp();
+    };
+
+    window.addEventListener("mouseup", finishDragOutsideChart);
+
+    return () => {
+      window.removeEventListener("mouseup", finishDragOutsideChart);
+    };
+  }, [isDragging, handleMouseUp]);
+
   if (props.isLoading && pivotedData.length === 0) {
     return (
       <div className="flex h-32 items-center justify-center rounded-lg border border-gray-200 bg-white">
@@ -197,6 +235,11 @@ const TelemetryHistogram: FunctionComponent<TelemetryHistogramProps> = (
           {props.onTimeRangeSelect && (
             <span className="text-[10px] text-gray-300">Drag to zoom</span>
           )}
+          {props.onZoomOut && (
+            <span className="text-[10px] text-gray-300">
+              Double-click to zoom out
+            </span>
+          )}
         </div>
         <div className="flex items-center gap-3">
           {activeSeries.map((option: HistogramSeriesOption) => {
@@ -223,11 +266,12 @@ const TelemetryHistogram: FunctionComponent<TelemetryHistogramProps> = (
 
       {pivotedData.length > 0 && (
         <div
-          className="px-2 pb-1 pt-2"
+          className="select-none px-2 pb-1 pt-2"
           style={{
             height: 120,
             cursor: props.onTimeRangeSelect ? "crosshair" : "default",
           }}
+          onDoubleClick={props.onZoomOut}
         >
           <ResponsiveContainer width="100%" height="100%">
             <BarChart
@@ -263,6 +307,12 @@ const TelemetryHistogram: FunctionComponent<TelemetryHistogramProps> = (
                 allowDecimals={Boolean(props.valueFormatter)}
                 tickFormatter={props.valueFormatter || formatYAxisTick}
               />
+              {/*
+               * The tooltip is pinned shut for the length of a drag: it would
+               * otherwise sit over the very bars the reader is trying to read
+               * while they pick the range. Dropping the prop hands control back
+               * to recharts once the drag ends.
+               */}
               <Tooltip
                 content={
                   <TelemetryHistogramTooltip
@@ -271,6 +321,7 @@ const TelemetryHistogram: FunctionComponent<TelemetryHistogramProps> = (
                   />
                 }
                 cursor={{ fill: "rgba(99,102,241,0.06)" }}
+                {...(isDragging ? { active: false } : {})}
               />
               {activeSeries.map(
                 (option: HistogramSeriesOption, index: number) => {

package/UI/Components/TelemetryViewer/components/TelemetrySearchBar.tsx

@@ -88,11 +88,22 @@ const TelemetrySearchBar: React.ForwardRefExoticComponent<
 
     const currentWord: string = extractCurrentWord(props.value);
 
-    const hasAtPrefix: boolean = currentWord.startsWith("@");
-    const normalizedWord: string = hasAtPrefix
+    /*
+     * A leading `-` negates the whole term. It is stripped before the `@`
+     * check so `-@http.method:GET` still reads as an attribute for the
+     * suggestion dropdown, and remembered so Enter can decline to build a
+     * chip out of it — a chip's key would be the literal "-http.method".
+     */
+    const isNegatedWord: boolean = currentWord.startsWith("-");
+    const unnegatedWord: string = isNegatedWord
       ? currentWord.substring(1)
       : currentWord;
 
+    const hasAtPrefix: boolean = unnegatedWord.startsWith("@");
+    const normalizedWord: string = hasAtPrefix
+      ? unnegatedWord.substring(1)
+      : unnegatedWord;
+
     const colonIndex: number = normalizedWord.indexOf(":");
     const isValueMode: boolean = colonIndex > 0;
     /*
@@ -183,6 +194,7 @@ const TelemetrySearchBar: React.ForwardRefExoticComponent<
 
             if (
               isValueMode &&
+              !isNegatedWord &&
               partialValue.length > 0 &&
               props.onFieldValueSelect
             ) {
@@ -272,6 +284,7 @@ const TelemetrySearchBar: React.ForwardRefExoticComponent<
           selectedSuggestionIndex,
           filteredSuggestions,
           isValueMode,
+          isNegatedWord,
           fieldPrefix,
           partialValue,
           props,

package/Utils/Metrics/MetricExplorerUrl.ts

@@ -1,6 +1,9 @@
 import Dictionary from "../../Types/Dictionary";
 import Includes from "../../Types/BaseDatabase/Includes";
 import JSONFunctions from "../../Types/JSONFunctions";
+import QueryOperator from "../../Types/BaseDatabase/QueryOperator";
+import SerializableObjectDictionary from "../../Types/SerializableObjectDictionary";
+import { JSONObject } from "../../Types/JSON";
 import OneUptimeDate from "../../Types/Date";
 import MetricFormulaConfigData from "../../Types/Metrics/MetricFormulaConfigData";
 import MetricQueryConfigData, {
@@ -102,17 +105,22 @@ export interface SerializedMetricFormula {
 
 /*
  * One attribute filter value inside the serialized `metricQueries` param.
- * Scalars are equality filters; Includes is the "any of" membership the
- * UI's operator layer and the query layer both understand. It JSON-
- * serializes to {_type: "Includes", value: [...]} (its toJSON), which the
- * parse side rebuilds into a real instance — that round trip is how a
- * multi-service scope survives Copy Link and saved views.
+ * Scalars are equality filters; every other operator (Includes, Search,
+ * Wildcard, NotEqual, GreaterThan, ...) travels as its own
+ * {_type, value} JSON and is rebuilt into a real instance on the way back —
+ * that round trip is how a multi-service scope, or a `matches api-*` filter,
+ * survives Copy Link and saved views.
+ *
+ * This used to keep ONLY scalars and Includes, so every other operator was
+ * silently dropped from a copied link: the chart the recipient opened had
+ * fewer filters than the one that was shared, with nothing to say so.
  */
 export type SerializedMetricAttributeValue =
   | string
   | number
   | boolean
-  | Includes;
+  | Includes
+  | QueryOperator<string>;
 
 const MAX_SERVICES_PARAM_ENTRIES: number = 20;
 
@@ -654,25 +662,79 @@ export default class MetricExplorerUrl {
       }
 
       /*
-       * "Any of" membership filters. Live view state holds Includes
-       * INSTANCES; parsed URLs hold the plain {_type, value} JSON shape.
-       * Both normalize to a fresh instance so multi-value filters (e.g.
-       * a multi-service scope) survive Copy Link / saved views instead
-       * of being silently dropped — and downstream consumers (the query
-       * layer, the operator detector, the monitor evaluator's deep-link
-       * builder) all already speak Includes.
+       * Operator filters. Live view state holds INSTANCES; a parsed URL holds
+       * the plain {_type, value} JSON shape. Both normalize to a fresh
+       * instance, so the filter means the same thing on both sides of a Copy
+       * Link — and the downstream consumers (the query layer, the operator
+       * detector, the monitor evaluator's deep-link builder) all speak
+       * operator instances already.
+       *
+       * An empty membership list is the one shape that is dropped: it means
+       * "All", and carrying it would only add a no-op predicate.
+       */
+      /*
+       * Membership keeps its own branch because it also CLEANS: blank and
+       * non-scalar entries are dropped, and a list left empty by that means
+       * "All" and carries no predicate at all.
        */
       const membershipValues: Array<string> | null =
         MetricExplorerUrl.getIncludesShapeValues(attributeValue);
 
-      if (membershipValues !== null && membershipValues.length > 0) {
-        attributes[key] = new Includes(membershipValues);
+      if (membershipValues !== null) {
+        if (membershipValues.length > 0) {
+          attributes[key] = new Includes(membershipValues);
+        }
+
+        continue;
+      }
+
+      if (attributeValue instanceof QueryOperator) {
+        attributes[key] = attributeValue as QueryOperator<string>;
+        continue;
+      }
+
+      const rebuilt: QueryOperator<string> | null =
+        MetricExplorerUrl.rebuildOperator(attributeValue);
+
+      if (rebuilt) {
+        attributes[key] = rebuilt;
       }
     }
 
     return attributes;
   }
 
+  /*
+   * Rebuild a `{_type, value}` JSON blob into its operator instance, using the
+   * same registry `JSONFunctions.deserialize` uses. An unknown `_type` yields
+   * null rather than a half-hydrated object — a plain object reaching the
+   * query layer is a silently wrong filter, not an error.
+   */
+  private static rebuildOperator(value: unknown): QueryOperator<string> | null {
+    if (!value || typeof value !== "object" || Array.isArray(value)) {
+      return null;
+    }
+
+    const type: unknown = (value as Record<string, unknown>)["_type"];
+
+    if (typeof type !== "string" || !SerializableObjectDictionary[type]) {
+      return null;
+    }
+
+    try {
+      const hydrated: unknown = SerializableObjectDictionary[type].fromJSON(
+        value as JSONObject,
+      );
+
+      return hydrated instanceof QueryOperator
+        ? (hydrated as QueryOperator<string>)
+        : null;
+    } catch {
+      // Malformed payload in a hand-edited URL. Drop the filter, not the page.
+      return null;
+    }
+  }
+
   private static getIncludesShapeValues(value: unknown): Array<string> | null {
     let rawValues: unknown = null;
 

package/Utils/Monitor/InterfaceInventoryUtil.ts

@@ -0,0 +1,251 @@
+import ColumnLength from "../../Types/Database/ColumnLength";
+import SnmpInterface from "../../Types/Monitor/SnmpMonitor/SnmpInterface";
+
+/*
+ * Pure helpers that turn ONE device's IF-MIB walk into the exact rows the
+ * NetworkInterface inventory should insert and update, plus the set of
+ * interface indexes the user has muted. Everything here is deterministic and
+ * side-effect free so the column-by-column contract can be tested without a
+ * database; the batched SQL that applies it lives in NetworkInterfaceService.
+ *
+ * This mirrors EndpointAttachmentUtil.decideUpsert / NetworkEndpointService:
+ * the decision is pure, the persistence is one statement per chunk.
+ */
+
+/*
+ * The stored row, as far as planning cares. Only these two columns are read
+ * back from the database: the walk is authoritative for every other column,
+ * and isMonitored is the one column it must never touch.
+ */
+export interface InterfaceExistingRowSnapshot {
+  /*
+   * Optional to mirror the model, where every column is optional. A stored
+   * row without one cannot be matched to a walked interface and is skipped.
+   */
+  interfaceIndex?: number | undefined;
+  isMonitored?: boolean | undefined;
+}
+
+/*
+ * A NetworkInterface row that does not exist yet.
+ *
+ * Deliberately NARROWER than InterfaceUpdateRow: the create path has never
+ * written inRateMbps / outRateMbps / utilizationPercent / errorsPerSecond,
+ * and it must not start. Those four are computed server-side from the delta
+ * against the PREVIOUS walk, so on the walk that first discovers an interface
+ * they carry whatever the rate util managed to derive with no baseline —
+ * writing them here would publish a rate nobody can reproduce. The absence of
+ * those fields on this type is the guardrail.
+ *
+ * isMonitored is `true` rather than `boolean` for the same reason in the
+ * opposite direction: new ports are monitored by default, and typing it as a
+ * literal keeps a future edit from routing a user-owned value through here.
+ */
+export interface InterfaceInsertRow {
+  interfaceIndex: number;
+  name: string;
+  alias: string | null;
+  macAddress: string | null;
+  interfaceType: number | null;
+  isMonitored: true;
+  isOperationallyUp: boolean;
+  isAdministrativelyUp: boolean;
+  speedInMbps: number | null;
+  lastSeenAt: Date;
+}
+
+/*
+ * A NetworkInterface row the walk re-observed.
+ *
+ * There is NO isMonitored member here, and that omission is load-bearing:
+ * isMonitored is user-owned (the per-interface mute toggle in the dashboard).
+ * A walk that wrote it would silently un-mute every port a user muted on the
+ * very next poll, and the mute would appear to "not stick" with nothing in
+ * the logs. Keeping the field off the type makes that a compile error.
+ *
+ * Every other column is written unconditionally, `null` included: the walk is
+ * the authority on interface state, so an interface that stops reporting an
+ * alias / MAC / speed has genuinely lost it and the stored value must clear.
+ */
+export interface InterfaceUpdateRow {
+  interfaceIndex: number;
+  name: string;
+  alias: string | null;
+  macAddress: string | null;
+  interfaceType: number | null;
+  isOperationallyUp: boolean;
+  isAdministrativelyUp: boolean;
+  speedInMbps: number | null;
+  inRateMbps: number | null;
+  outRateMbps: number | null;
+  utilizationPercent: number | null;
+  errorsPerSecond: number | null;
+  lastSeenAt: Date;
+}
+
+export interface InterfaceUpsertPlan {
+  inserts: Array<InterfaceInsertRow>;
+  updates: Array<InterfaceUpdateRow>;
+  /*
+   * Walked interfaces whose stored row has isMonitored === false. The caller
+   * prunes these out of the in-flight walk response so criteria and
+   * per-interface metrics ignore them — while the inventory rows above still
+   * record every walked port.
+   */
+  unmonitoredInterfaceIndexes: Array<number>;
+}
+
+// Bits/sec on the wire; Mbps in the inventory.
+const BITS_PER_MEGABIT: number = 1000000;
+
+/*
+ * Rate columns are stored rounded to three decimals (kbps resolution). The
+ * rounding is part of the stored value, not presentation: it keeps a rate
+ * that wobbles in the ninth decimal from writing a new row version every poll.
+ */
+const RATE_DECIMAL_SCALE: number = 1000;
+
+/*
+ * ShortText columns are varchar(100). Truncating HERE rather than at write
+ * time matters: the raw batched INSERT/UPDATE has no model validation in
+ * front of it (DatabaseService.create throws on an over-length value instead
+ * of truncating), so one 300-character ifAlias from a chatty agent would
+ * abort the whole chunk it rides in and lose every other interface with it.
+ */
+function truncateShortText(value: string | undefined): string | null {
+  if (!value) {
+    return null;
+  }
+  return value.length > ColumnLength.ShortText
+    ? value.substring(0, ColumnLength.ShortText)
+    : value;
+}
+
+export default class InterfaceInventoryUtil {
+  /*
+   * (walked interfaces, stored rows, walk timestamp) -> (rows to insert,
+   * rows to update, muted indexes).
+   *
+   * lastSeenAt is stamped from the caller's single `now` for every row, so a
+   * 400-port chassis does not end up with 400 slightly different timestamps
+   * that make "which ports answered on this walk" unanswerable.
+   */
+  public static planWalkUpsert(data: {
+    walkedInterfaces: Array<SnmpInterface>;
+    existingRows: Array<InterfaceExistingRowSnapshot>;
+    now: Date;
+  }): InterfaceUpsertPlan {
+    const plan: InterfaceUpsertPlan = {
+      inserts: [],
+      updates: [],
+      unmonitoredInterfaceIndexes: [],
+    };
+
+    /*
+     * De-duplicate by ifIndex before anything else.
+     *
+     * ON CONFLICT DO UPDATE cannot touch the same row twice in one statement
+     * — Postgres raises "ON CONFLICT DO UPDATE command cannot affect row a
+     * second time" and aborts the statement, which here would abort the whole
+     * walk. Agents do send duplicate ifIndex rows (a bridge that reports the
+     * same port under two ifTable entries, a proxy agent merging two
+     * sub-agents). Map.set keeps the FIRST occurrence's position and the LAST
+     * occurrence's data, which is what the previous row-at-a-time loop
+     * converged on: it applied both writes in order, so the last one won.
+     */
+    const walkedByIndex: Map<number, SnmpInterface> = new Map();
+    for (const walked of data.walkedInterfaces) {
+      walkedByIndex.set(walked.interfaceIndex, walked);
+    }
+
+    const existingByIndex: Map<number, InterfaceExistingRowSnapshot> =
+      new Map();
+    for (const existing of data.existingRows) {
+      if (existing.interfaceIndex !== undefined) {
+        existingByIndex.set(existing.interfaceIndex, existing);
+      }
+    }
+
+    for (const walked of walkedByIndex.values()) {
+      const existing: InterfaceExistingRowSnapshot | undefined =
+        existingByIndex.get(walked.interfaceIndex);
+
+      /*
+       * Only a walked interface can be pruned from the walk response, so the
+       * muted set is built from the walk, not from the whole stored table.
+       */
+      if (existing && existing.isMonitored === false) {
+        plan.unmonitoredInterfaceIndexes.push(walked.interfaceIndex);
+      }
+
+      if (existing) {
+        plan.updates.push({
+          interfaceIndex: walked.interfaceIndex,
+          name: InterfaceInventoryUtil.interfaceName(walked),
+          alias: truncateShortText(walked.alias),
+          macAddress: truncateShortText(walked.macAddress),
+          interfaceType: walked.interfaceType ?? null,
+          isOperationallyUp: walked.isOperationallyUp,
+          isAdministrativelyUp: walked.isAdministrativelyUp,
+          speedInMbps: InterfaceInventoryUtil.toMbps(
+            walked.speedInBitsPerSecond,
+          ),
+          inRateMbps: InterfaceInventoryUtil.toRoundedMbps(
+            walked.inBitsPerSecond,
+          ),
+          outRateMbps: InterfaceInventoryUtil.toRoundedMbps(
+            walked.outBitsPerSecond,
+          ),
+          utilizationPercent: walked.utilizationPercent ?? null,
+          errorsPerSecond: walked.errorsPerSecond ?? null,
+          lastSeenAt: data.now,
+        });
+      } else {
+        plan.inserts.push({
+          interfaceIndex: walked.interfaceIndex,
+          name: InterfaceInventoryUtil.interfaceName(walked),
+          alias: truncateShortText(walked.alias),
+          macAddress: truncateShortText(walked.macAddress),
+          interfaceType: walked.interfaceType ?? null,
+          isMonitored: true,
+          isOperationallyUp: walked.isOperationallyUp,
+          isAdministrativelyUp: walked.isAdministrativelyUp,
+          speedInMbps: InterfaceInventoryUtil.toMbps(
+            walked.speedInBitsPerSecond,
+          ),
+          lastSeenAt: data.now,
+        });
+      }
+    }
+
+    return plan;
+  }
+
+  /*
+   * `name` is NOT NULL in the schema, and some agents return an empty
+   * ifDescr for tunnel/loopback pseudo-interfaces — hence the empty-string
+   * floor rather than a null.
+   */
+  private static interfaceName(walked: SnmpInterface): string {
+    return (walked.name || "").substring(0, ColumnLength.ShortText);
+  }
+
+  // ifSpeed/ifHighSpeed are bits per second; speedInMbps is megabits.
+  private static toMbps(bitsPerSecond: number | undefined): number | null {
+    return bitsPerSecond !== undefined
+      ? bitsPerSecond / BITS_PER_MEGABIT
+      : null;
+  }
+
+  private static toRoundedMbps(
+    bitsPerSecond: number | undefined,
+  ): number | null {
+    if (bitsPerSecond === undefined) {
+      return null;
+    }
+    return (
+      Math.round((bitsPerSecond / BITS_PER_MEGABIT) * RATE_DECIMAL_SCALE) /
+      RATE_DECIMAL_SCALE
+    );
+  }
+}