@oneuptime/common 11.5.9 → 11.5.11

package/Types/Monitor/SnmpMonitor/SnmpVendorTemplate.ts

@@ -48,7 +48,7 @@ const MIKROTIK: SnmpVendorTemplate = {
   id: "mikrotik-routeros",
   label: "MikroTik RouterOS",
   description:
-    "CPU load, CPU temperature, and voltage from the MikroTik health MIB, plus standard Host Resources CPU.",
+    "CPU load, board temperature, and voltage from the MikroTik health MIB, plus standard Host Resources CPU.",
   oids: [
     {
       oid: "1.3.6.1.2.1.25.3.3.1.2.1",
@@ -56,9 +56,10 @@ const MIKROTIK: SnmpVendorTemplate = {
       description: "hrProcessorLoad — first processor.",
     },
     {
+      // .10.0 is mtxrHlTemperature (board temp); processor temp is .11.0.
       oid: "1.3.6.1.4.1.14988.1.1.3.10.0",
-      name: "CPU Temperature (C)",
-      description: "mtxrHlProcessorTemperature.",
+      name: "Temperature (C)",
+      description: "mtxrHlTemperature — system/board temperature.",
     },
     {
       oid: "1.3.6.1.4.1.14988.1.1.3.8.0",
@@ -128,6 +129,58 @@ export const SnmpVendorTemplates: Array<SnmpVendorTemplate> = [
   UBIQUITI,
 ];
 
+/*
+ * IANA private-enterprise numbers → vendor display names, for the vendors
+ * that actually show up on monitored networks. Used to derive a vendor from
+ * sysObjectID (1.3.6.1.4.1.<enterprise>...) when the device does not
+ * implement ENTITY-MIB. Not exhaustive by design — unknown enterprises just
+ * leave the vendor blank.
+ */
+const ENTERPRISE_VENDOR_NAMES: Record<number, string> = {
+  9: "Cisco",
+  11: "HPE",
+  43: "3Com",
+  171: "D-Link",
+  207: "Allied Telesis",
+  674: "Dell",
+  1588: "Brocade",
+  1916: "Extreme Networks",
+  2011: "Huawei",
+  2021: "Net-SNMP",
+  2636: "Juniper",
+  3224: "NetScreen",
+  3375: "F5",
+  4526: "Netgear",
+  6027: "Force10",
+  6486: "Alcatel-Lucent",
+  6574: "Synology",
+  8072: "Net-SNMP",
+  9303: "PacketFront",
+  10002: "Frogfoot",
+  11863: "TP-Link",
+  12325: "pfSense",
+  12356: "Fortinet",
+  14823: "Aruba",
+  14988: "MikroTik",
+  17163: "Riverbed",
+  22610: "Vyatta",
+  24681: "QNAP",
+  25461: "Palo Alto Networks",
+  25506: "H3C",
+  26543: "Yamaha",
+  30065: "Arista",
+  35098: "PICA8",
+  41112: "Ubiquiti",
+  47196: "OPNsense",
+};
+
+// sysObjectID template routing: enterprise number → vendor template id.
+const ENTERPRISE_TEMPLATE_IDS: Record<number, string> = {
+  9: "cisco-ios",
+  14988: "mikrotik-routeros",
+  41112: "ubiquiti-edgeos",
+};
+
 export default class SnmpVendorTemplateUtil {
   public static getAll(): Array<SnmpVendorTemplate> {
     return SnmpVendorTemplates;
@@ -139,6 +192,69 @@ export default class SnmpVendorTemplateUtil {
     });
   }
 
+  /*
+   * Extracts the IANA private-enterprise number from a sysObjectID value
+   * ("1.3.6.1.4.1.<enterprise>...", with or without a leading dot). Returns
+   * undefined for OIDs outside the enterprises arc (e.g. the mib-2 values
+   * some appliances report).
+   */
+  public static getEnterpriseNumber(
+    sysObjectId: string | undefined,
+  ): number | undefined {
+    if (!sysObjectId) {
+      return undefined;
+    }
+
+    const normalized: string = sysObjectId.trim().replace(/^\./, "");
+    const enterprisesPrefix: string = "1.3.6.1.4.1.";
+
+    if (!normalized.startsWith(enterprisesPrefix)) {
+      return undefined;
+    }
+
+    const enterprisePart: string | undefined = normalized
+      .substring(enterprisesPrefix.length)
+      .split(".")[0];
+
+    const enterpriseNumber: number = parseInt(enterprisePart || "", 10);
+    return isNaN(enterpriseNumber) ? undefined : enterpriseNumber;
+  }
+
+  public static getVendorNameBySysObjectId(
+    sysObjectId: string | undefined,
+  ): string | undefined {
+    const enterpriseNumber: number | undefined =
+      SnmpVendorTemplateUtil.getEnterpriseNumber(sysObjectId);
+
+    if (enterpriseNumber === undefined) {
+      return undefined;
+    }
+
+    return ENTERPRISE_VENDOR_NAMES[enterpriseNumber];
+  }
+
+  /*
+   * Suggests the vendor OID template matching a device's sysObjectID.
+   * Returns undefined when no vendor-specific template exists — callers can
+   * fall back to the generic Host Resources template, which most
+   * Linux-based appliances answer.
+   */
+  public static matchBySysObjectId(
+    sysObjectId: string | undefined,
+  ): SnmpVendorTemplate | undefined {
+    const enterpriseNumber: number | undefined =
+      SnmpVendorTemplateUtil.getEnterpriseNumber(sysObjectId);
+
+    if (enterpriseNumber === undefined) {
+      return undefined;
+    }
+
+    const templateId: string | undefined =
+      ENTERPRISE_TEMPLATE_IDS[enterpriseNumber];
+
+    return templateId ? SnmpVendorTemplateUtil.getById(templateId) : undefined;
+  }
+
   /*
    * Merges a template's OIDs into an existing list, skipping any OID already
    * present so applying a template twice (or applying two overlapping ones)

package/Types/NetFlow/NetworkFlowRecord.ts

@@ -0,0 +1,25 @@
+/*
+ * One network flow parsed from a NetFlow v5 record, forwarded by a probe's
+ * NetFlow receiver to the server, where it is correlated to a NetworkDevice
+ * by the EXPORTER's IP address (the router/switch that sent the datagram)
+ * and written into the ClickHouse NetworkFlow table. Source/destination
+ * describe the traffic itself; exporterIpAddress identifies the device that
+ * observed it. Flow timestamps are converted to wall-clock time by the
+ * probe from the datagram's sysUptime/unixSecs header fields.
+ */
+export default interface NetworkFlowRecord {
+  exporterIpAddress: string;
+  sourceIpAddress: string;
+  destinationIpAddress: string;
+  sourcePort: number;
+  destinationPort: number;
+  protocolNumber: number;
+  octets: number;
+  packets: number;
+  flowStartAt: Date;
+  flowEndAt: Date;
+  inputInterfaceIndex?: number | undefined;
+  outputInterfaceIndex?: number | undefined;
+  tcpFlags?: number | undefined;
+  tos?: number | undefined;
+}

package/Types/Syslog/SyslogMessage.ts

@@ -0,0 +1,18 @@
+/*
+ * A syslog message received by a probe's syslog receiver and forwarded to
+ * the server, where it is correlated to a NetworkDevice by source IP and
+ * written into the telemetry Logs pipeline. Facility and severity are the
+ * RFC 5424 numerical codes decoded from the message's <PRI> prefix
+ * (facility 0-23, severity 0-7). The timestamp comes from the message
+ * itself when parseable, otherwise it equals receivedAt.
+ */
+export default interface SyslogMessage {
+  sourceIpAddress: string;
+  facility: number;
+  severity: number;
+  timestamp: Date;
+  hostname?: string | undefined;
+  appName?: string | undefined;
+  message: string;
+  receivedAt: Date;
+}

package/Types/Telemetry/TelemetrySavedViewState.ts

@@ -1,3 +1,5 @@
+import { JSONObject } from "../JSON";
+
 /*
  * Serializable view state for the Metrics and Traces explorers. Stored in the
  * `query` JSONB column of MetricSavedView / TraceSavedView. This is the same
@@ -25,4 +27,11 @@ export default interface TelemetrySavedViewState {
   pageSize?: number | undefined;
   // Traces explorer: root-spans-only toggle (defaults to true when absent).
   rootOnly?: boolean | undefined;
+  /*
+   * Metrics explorer: the full chart-builder state — MetricsViewConfig-
+   * shaped { queryConfigs, formulaConfigs } plus a time-range token.
+   * Kept loosely typed like the rest of this state: the explorer owns
+   * serialization and must deserialize defensively.
+   */
+  explorerConfig?: JSONObject | undefined;
 }

package/Types/Telemetry/TelemetrySavedViewType.ts

@@ -0,0 +1,12 @@
+/*
+ * Which explorer surface a saved telemetry view belongs to. Stored in the
+ * nullable `viewType` column of MetricSavedView — NULL is treated as List
+ * for back-compat (every row created before the column existed came from
+ * the list page).
+ */
+enum TelemetrySavedViewType {
+  List = "list",
+  Explorer = "explorer",
+}
+
+export default TelemetrySavedViewType;

package/UI/Components/Charts/Area/AreaChart.tsx

@@ -15,8 +15,13 @@ import YAxis from "../Types/YAxis/YAxis";
 import ChartCurve from "../Types/ChartCurve";
 import ChartDataPoint from "../ChartLibrary/Types/ChartDataPoint";
 import FormattedExemplarPoint from "../ChartLibrary/Types/FormattedExemplarPoint";
+import FormattedReferenceRegion from "../ChartLibrary/Types/FormattedReferenceRegion";
+import FormattedTimeReferenceLine from "../ChartLibrary/Types/FormattedTimeReferenceLine";
 import DataPointUtil from "../Utils/DataPoint";
+import TimeAnnotationUtil from "../Utils/TimeAnnotation";
 import ChartReferenceLineProps from "../Types/ReferenceLineProps";
+import ChartReferenceRegionProps from "../Types/ReferenceRegionProps";
+import ChartTimeReferenceLineProps from "../Types/TimeReferenceLineProps";
 import ExemplarPoint from "../Types/ExemplarPoint";
 import XAxisUtil from "../Utils/XAxis";
 import NoDataMessage from "../ChartGroup/NoDataMessage";
@@ -42,8 +47,20 @@ export interface ComponentProps {
   sync: boolean;
   heightInPx?: number | undefined;
   referenceLines?: Array<ChartReferenceLineProps> | undefined;
+  /*
+   * Time-anchored annotations: vertical event markers and shaded regions.
+   * Dates are snapped onto the categorical x-axis buckets; annotations
+   * outside the charted window are dropped (regions clamp to the edge).
+   */
+  timeReferenceLines?: Array<ChartTimeReferenceLineProps> | undefined;
+  referenceRegions?: Array<ChartReferenceRegionProps> | undefined;
   exemplarPoints?: Array<ExemplarPoint> | undefined;
   onExemplarClick?: ((exemplar: ExemplarPoint) => void) | undefined;
+  /*
+   * When provided, the chart supports drag-to-select: dragging across
+   * buckets calls back with the [start, end) of the selected time range.
+   */
+  onTimeRangeSelect?: ((startTime: Date, endTime: Date) => void) | undefined;
   showLegend?: boolean | undefined;
   /**
    * Render a shaded "expected range" band underneath the plotted lines.
@@ -117,6 +134,29 @@ const AreaChartElement: FunctionComponent<AreaInternalProps> = (
     });
   }, [props.exemplarPoints, props.xAxis]);
 
+  // Snap time annotations onto the categorical x-axis bucket labels
+  const formattedTimeReferenceLines: Array<FormattedTimeReferenceLine> =
+    useMemo(() => {
+      if (!props.timeReferenceLines || props.timeReferenceLines.length === 0) {
+        return [];
+      }
+      return TimeAnnotationUtil.formatTimeReferenceLines({
+        timeReferenceLines: props.timeReferenceLines,
+        xAxis: props.xAxis,
+      });
+    }, [props.timeReferenceLines, props.xAxis]);
+
+  const formattedReferenceRegions: Array<FormattedReferenceRegion> =
+    useMemo(() => {
+      if (!props.referenceRegions || props.referenceRegions.length === 0) {
+        return [];
+      }
+      return TimeAnnotationUtil.formatReferenceRegions({
+        referenceRegions: props.referenceRegions,
+        xAxis: props.xAxis,
+      });
+    }, [props.referenceRegions, props.xAxis]);
+
   const hasNoData: boolean =
     !props.data ||
     props.data.length === 0 ||
@@ -164,10 +204,21 @@ const AreaChartElement: FunctionComponent<AreaInternalProps> = (
         {...maxValueProp}
         onValueChange={() => {}}
         referenceLines={props.referenceLines}
+        formattedTimeReferenceLines={
+          formattedTimeReferenceLines.length > 0
+            ? formattedTimeReferenceLines
+            : undefined
+        }
+        formattedReferenceRegions={
+          formattedReferenceRegions.length > 0
+            ? formattedReferenceRegions
+            : undefined
+        }
         formattedExemplarPoints={
           formattedExemplars.length > 0 ? formattedExemplars : undefined
         }
         onExemplarClick={props.onExemplarClick}
+        onTimeRangeSelect={props.onTimeRangeSelect}
         anomalyBandLowerKey={bandLower}
         anomalyBandUpperKey={bandUpper}
       />

package/UI/Components/Charts/Bar/BarChart.tsx

@@ -3,13 +3,23 @@ import {
   AvailableChartColorsKeys,
   ChartColorValue,
 } from "../ChartLibrary/Utils/ChartColors";
-import React, { FunctionComponent, ReactElement, useEffect } from "react";
+import React, {
+  FunctionComponent,
+  ReactElement,
+  useEffect,
+  useMemo,
+} from "react";
 import SeriesPoint from "../Types/SeriesPoints";
 import { XAxis } from "../Types/XAxis/XAxis";
 import YAxis from "../Types/YAxis/YAxis";
 import ChartDataPoint from "../ChartLibrary/Types/ChartDataPoint";
+import FormattedReferenceRegion from "../ChartLibrary/Types/FormattedReferenceRegion";
+import FormattedTimeReferenceLine from "../ChartLibrary/Types/FormattedTimeReferenceLine";
 import DataPointUtil from "../Utils/DataPoint";
+import TimeAnnotationUtil from "../Utils/TimeAnnotation";
 import ChartReferenceLineProps from "../Types/ReferenceLineProps";
+import ChartReferenceRegionProps from "../Types/ReferenceRegionProps";
+import ChartTimeReferenceLineProps from "../Types/TimeReferenceLineProps";
 import NoDataMessage from "../ChartGroup/NoDataMessage";
 
 export const BarChartPalette: Array<AvailableChartColorsKeys> = [
@@ -31,6 +41,13 @@ export interface ComponentProps {
   sync: boolean;
   heightInPx?: number | undefined;
   referenceLines?: Array<ChartReferenceLineProps> | undefined;
+  /*
+   * Time-anchored annotations: vertical event markers and shaded regions.
+   * Dates are snapped onto the categorical x-axis buckets; annotations
+   * outside the charted window are dropped (regions clamp to the edge).
+   */
+  timeReferenceLines?: Array<ChartTimeReferenceLineProps> | undefined;
+  referenceRegions?: Array<ChartReferenceRegionProps> | undefined;
   showLegend?: boolean | undefined;
   /*
    * Optional per-series color override. Each entry may be a named palette key
@@ -64,6 +81,29 @@ const BarChartElement: FunctionComponent<BarInternalProps> = (
     setRecords(records);
   }, [props.data]);
 
+  // Snap time annotations onto the categorical x-axis bucket labels
+  const formattedTimeReferenceLines: Array<FormattedTimeReferenceLine> =
+    useMemo(() => {
+      if (!props.timeReferenceLines || props.timeReferenceLines.length === 0) {
+        return [];
+      }
+      return TimeAnnotationUtil.formatTimeReferenceLines({
+        timeReferenceLines: props.timeReferenceLines,
+        xAxis: props.xAxis,
+      });
+    }, [props.timeReferenceLines, props.xAxis]);
+
+  const formattedReferenceRegions: Array<FormattedReferenceRegion> =
+    useMemo(() => {
+      if (!props.referenceRegions || props.referenceRegions.length === 0) {
+        return [];
+      }
+      return TimeAnnotationUtil.formatReferenceRegions({
+        referenceRegions: props.referenceRegions,
+        xAxis: props.xAxis,
+      });
+    }, [props.referenceRegions, props.xAxis]);
+
   const hasNoData: boolean =
     !props.data ||
     props.data.length === 0 ||
@@ -93,6 +133,16 @@ const BarChartElement: FunctionComponent<BarInternalProps> = (
         syncid={props.sync ? props.syncid : undefined}
         onValueChange={() => {}}
         referenceLines={props.referenceLines}
+        formattedTimeReferenceLines={
+          formattedTimeReferenceLines.length > 0
+            ? formattedTimeReferenceLines
+            : undefined
+        }
+        formattedReferenceRegions={
+          formattedReferenceRegions.length > 0
+            ? formattedReferenceRegions
+            : undefined
+        }
       />
       {hasNoData && <NoDataMessage />}
     </div>

package/UI/Components/Charts/ChartGroup/ChartGroup.tsx

@@ -37,6 +37,13 @@ export interface Chart {
   metricInfo?: ChartMetricInfo | undefined;
   exemplarPoints?: Array<ExemplarPoint> | undefined;
   onExemplarClick?: ((exemplar: ExemplarPoint) => void) | undefined;
+  /**
+   * Optional "Open in Explorer" action rendered as an icon button in the
+   * chart header next to the info icon. Kept as a plain callback so this
+   * shared component stays free of any app's routing — callers build the
+   * explorer URL and navigate themselves.
+   */
+  onOpenInExplorer?: (() => void) | undefined;
   /**
    * Optional control panel rendered directly below the chart body. Used by
    * per-series-grouped metric charts to surface a search box, a sort
@@ -109,6 +116,29 @@ const ChartGroup: FunctionComponent<ComponentProps> = (
     }
   };
 
+  type GetDragToZoomHintFunction = (chart: Chart) => ReactElement;
+
+  // Same subtle hint the log/telemetry histograms show for drag-to-zoom.
+  const getDragToZoomHint: GetDragToZoomHintFunction = (
+    chart: Chart,
+  ): ReactElement => {
+    const supportsTimeRangeSelect: boolean =
+      (chart.type === ChartType.LINE || chart.type === ChartType.AREA) &&
+      Boolean(
+        (chart.props as LineChartProps | AreaChartProps).onTimeRangeSelect,
+      );
+
+    if (!supportsTimeRangeSelect) {
+      return <></>;
+    }
+
+    return (
+      <span className="ml-auto shrink-0 whitespace-nowrap text-[10px] text-gray-400">
+        Drag to zoom
+      </span>
+    );
+  };
+
   type GetInfoIconFunction = (chart: Chart) => ReactElement;
 
   const getInfoIcon: GetInfoIconFunction = (chart: Chart): ReactElement => {
@@ -119,7 +149,7 @@ const ChartGroup: FunctionComponent<ComponentProps> = (
     return (
       <button
         type="button"
-        className="ml-1.5 inline-flex items-center justify-center rounded-full w-5 h-5 text-gray-300 hover:text-gray-500 hover:bg-gray-100 transition-all duration-150"
+        className="ml-1.5 inline-flex items-center justify-center rounded-full w-5 h-5 text-gray-400 hover:text-gray-600 hover:bg-gray-100 transition-all duration-150"
         title="View metric details"
         onClick={() => {
           setMetricInfoModalChart(chart.metricInfo || null);
@@ -134,6 +164,33 @@ const ChartGroup: FunctionComponent<ComponentProps> = (
     );
   };
 
+  type GetExplorerIconFunction = (chart: Chart) => ReactElement;
+
+  const getExplorerIcon: GetExplorerIconFunction = (
+    chart: Chart,
+  ): ReactElement => {
+    if (!chart.onOpenInExplorer) {
+      return <></>;
+    }
+
+    return (
+      <button
+        type="button"
+        className="ml-1.5 inline-flex items-center justify-center rounded-full w-5 h-5 text-gray-400 hover:text-gray-600 hover:bg-gray-100 transition-all duration-150"
+        title="Open in Metric Explorer"
+        onClick={() => {
+          chart.onOpenInExplorer?.();
+        }}
+      >
+        <Icon
+          icon={IconProp.ExternalLink}
+          size={SizeProp.Smaller}
+          className="h-3.5 w-3.5"
+        />
+      </button>
+    );
+  };
+
   const renderMetricInfoModal: () => ReactElement = (): ReactElement => {
     if (!metricInfoModalChart) {
       return <></>;
@@ -250,10 +307,15 @@ const ChartGroup: FunctionComponent<ComponentProps> = (
                 <div className="px-5 pt-4 pb-4 flex flex-col flex-1">
                   <div className="mb-3 pb-3 border-b border-gray-100">
                     <div className="flex items-center">
-                      <h3 className="text-sm font-semibold text-gray-800 tracking-tight">
+                      <h3
+                        className="min-w-0 truncate text-sm font-semibold text-gray-800 tracking-tight"
+                        title={chart.title}
+                      >
                         {chart.title}
                       </h3>
                       {getInfoIcon(chart)}
+                      {getExplorerIcon(chart)}
+                      {getDragToZoomHint(chart)}
                     </div>
                     {chart.description && (
                       <p className="mt-1 text-xs text-gray-500 hidden md:block">
@@ -263,7 +325,7 @@ const ChartGroup: FunctionComponent<ComponentProps> = (
                   </div>
                   {getChartContent(chart, index)}
                   {chart.seriesControls ? (
-                    <div className="mb-3">{chart.seriesControls}</div>
+                    <div className="mt-3">{chart.seriesControls}</div>
                   ) : null}
                 </div>
               </div>
@@ -281,37 +343,46 @@ const ChartGroup: FunctionComponent<ComponentProps> = (
   return (
     <>
       {renderMetricInfoModal()}
-      <div
-        className={`grid grid-cols-1 ${gridCols} gap-4 space-y-4 lg:space-y-0`}
-      >
+      <div className={`grid grid-cols-1 ${gridCols} gap-4`}>
         {props.charts.map((chart: Chart, index: number) => {
           return (
             <div
               key={index}
-              className={`p-5 rounded-lg border border-gray-200 bg-white shadow-sm flex flex-col gap-3 ${props.chartCssClass || ""}`}
+              className={`flex flex-col rounded-lg border border-gray-200 bg-white shadow-sm ${props.chartCssClass || ""}`}
             >
-              <div className="flex items-center">
-                <h2
-                  data-testid="card-details-heading"
-                  id="card-details-heading"
-                  className="text-base font-semibold leading-6 text-gray-900"
-                >
-                  {chart.title}
-                </h2>
-                {getInfoIcon(chart)}
+              {/* Header strip — title, meta icons, hover-revealed zoom hint */}
+              <div className="border-b border-gray-100 px-4 py-2.5">
+                <div className="flex items-center">
+                  <h2
+                    data-testid="card-details-heading"
+                    id="card-details-heading"
+                    className="min-w-0 truncate text-sm font-semibold leading-6 text-gray-900"
+                    title={chart.title}
+                  >
+                    {chart.title}
+                  </h2>
+                  {getInfoIcon(chart)}
+                  {getExplorerIcon(chart)}
+                  {getDragToZoomHint(chart)}
+                </div>
+                {chart.description && (
+                  <p
+                    data-testid="card-description"
+                    className="mt-0.5 w-full truncate text-xs text-gray-500 hidden md:block"
+                    title={chart.description}
+                  >
+                    {chart.description}
+                  </p>
+                )}
               </div>
-              {chart.description && (
-                <p
-                  data-testid="card-description"
-                  className="mt-0.5 text-sm text-gray-500 w-full hidden md:block"
-                >
-                  {chart.description}
-                </p>
-              )}
-              <div className="flex-1 flex flex-col min-h-80">
+              <div className="flex-1 flex flex-col min-h-80 px-4 pt-3 pb-2">
                 {getChartContent(chart, index)}
               </div>
-              {chart.seriesControls ? chart.seriesControls : null}
+              {chart.seriesControls ? (
+                <div className="border-t border-gray-100 px-4 py-3">
+                  {chart.seriesControls}
+                </div>
+              ) : null}
             </div>
           );
         })}