npm - @oneuptime/common - Versions diffs - 11.4.1 → 11.5.1 - Mend

@oneuptime/common 11.4.1 → 11.5.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (324) hide show

package/UI/Components/Icon/Icon.tsx CHANGED Viewed

@@ -2938,18 +2938,20 @@ const Icon: FunctionComponent<ComponentProps> = ({
     );
   } else if (icon === IconProp.Podman) {
     /*
-     * Podman mark — a simplified, bold silhouette of Podman's seal mascot.
-     * The official emblem (a finely detailed seal inside a hexagonal frame)
-     * collapses into an illegible blob at small sizes, so this is a cleaner
-     * single-path seal that stays recognizable down to ~16px and sits well
-     * beside the other resource brand logos (Docker / Proxmox / Ceph).
+     * Podman mark — a clean side-profile silhouette of Podman's seal mascot:
+     * head raised with a visible eye, an arched back, and trailing tail
+     * flippers. The official emblem (a finely detailed seal inside a hexagonal
+     * frame) collapses into an illegible blob at small sizes, so this reads as
+     * a recognizable little sea creature down to ~16px and sits well beside the
+     * other resource brand logos (Docker / Proxmox / Ceph). The eye is punched
+     * out via the even-odd fill rule.
      */
     return getSvgWrapper(
       <path
         fill="currentColor"
         stroke="none"
         fillRule="evenodd"
-        d="M6.4 7.2C6.2 5.2 7.8 3.7 9.7 3.9C11.2 4.1 12.2 5.3 12.3 6.8C13 6.4 14 6.6 14.4 7.4C14.8 8.1 14.5 8.9 13.9 9.3C15.4 11 16.2 13.4 16.2 15.7C17.1 15.6 18.2 15.9 18.6 16.7C18.2 17.6 17 18.2 15.7 18.1C14 18 12.7 16.7 12.4 15C11.7 16.9 10.1 18.2 8.3 18.1C7.2 18 6.9 17.1 7.6 16.5C8.7 15.6 9.1 14 8.8 12.4C8.6 11 8 9.6 7.3 8.5C6.8 8.3 6.5 7.8 6.4 7.2ZM8.45 6.4a0.85 0.85 0 1 0 1.7 0a0.85 0.85 0 1 0 -1.7 0z"
+        d="M6.6 8.4C6.2 6.6 7.4 5 9.2 4.9c1.6-.1 2.9 1 3.5 2.2.7-.5 1.7-.7 2.5-.2.6.36.8 1.06.5 1.6 1.9 1.3 3.2 3.4 3.6 5.9.9-.15 1.9.15 2.3.95.35.75-.2 1.45-1.1 1.7-1.5.42-3.2-.15-4.1-1.5-.3.95-.9 1.75-1.7 2.25 1.2.5 2 1.2 1.6 2-.3.6-1.2.7-2.2.4-1.7-.5-3-1.9-3.4-3.6-.9.9-2.2 1.4-3.5 1.3-1-.1-1.5-.8-1.2-1.5.25-.6.9-.9 1.6-1-1-1.5-1.5-3.4-1.4-5.3-.6-.3-1.05-.85-1.1-1.55ZM8.4 8a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Z"
       />,
     );
   } else if (icon === IconProp.Proxmox) {

package/UI/Components/MonitorTemplateVariables/TemplateVariablesCatalog.ts CHANGED Viewed

@@ -344,9 +344,9 @@ export default class TemplateVariablesCatalog {
           ],
         };
-      case MonitorType.SNMP:
+      case MonitorType.NetworkDevice:
         return {
-          title: "SNMP",
+          title: "Network Device (SNMP)",
           variables: [
             {
               key: "isOnline",

package/UI/Components/MoreMenu/MoreMenu.tsx CHANGED Viewed

@@ -15,6 +15,12 @@ import Button, { ButtonStyleType } from "../Button/Button";
 export interface ComponentProps {
   children: Array<ReactElement>;
   elementToBeShownInsteadOfButton?: ReactElement | undefined;
+  /*
+   * Classes applied to the custom-trigger wrapper (the focusable element that
+   * opens the menu). Lets callers style a custom trigger — e.g. to match a
+   * button group — while keeping the menu's keyboard/ARIA behavior.
+   */
+  triggerClassName?: string | undefined;
   menuIcon?: IconProp | undefined;
   text?: string | undefined;
 }
@@ -63,6 +69,23 @@ const MoreMenu: React.ForwardRefExoticComponent<
       }
     }, [focusedIndex]);
+    const restoreFocusToTrigger: () => void = useCallback((): void => {
+      /*
+       * Return focus to the trigger after the menu closes via Escape or item
+       * selection (WAI-ARIA menu-button pattern). Deferred to the next frame so
+       * the menu has unmounted, and only reclaimed if focus fell back to
+       * <body> — so we never steal focus that the activated item intentionally
+       * moved elsewhere (e.g. into a dialog it opened). Not called on
+       * outside-click dismissal, which should leave focus where the user clicked.
+       */
+      requestAnimationFrame(() => {
+        const activeElement: Element | null = document.activeElement;
+        if (!activeElement || activeElement === document.body) {
+          document.getElementById(buttonId)?.focus();
+        }
+      });
+    }, [buttonId]);
     const handleKeyDown: (event: React.KeyboardEvent) => void = useCallback(
       (event: React.KeyboardEvent): void => {
         if (!isComponentVisible) {
@@ -75,6 +98,7 @@ const MoreMenu: React.ForwardRefExoticComponent<
           case "Escape":
             event.preventDefault();
             setIsComponentVisible(false);
+            restoreFocusToTrigger();
             break;
           case "ArrowDown":
             event.preventDefault();
@@ -98,7 +122,12 @@ const MoreMenu: React.ForwardRefExoticComponent<
             break;
         }
       },
-      [isComponentVisible, props.children.length, setIsComponentVisible],
+      [
+        isComponentVisible,
+        props.children.length,
+        setIsComponentVisible,
+        restoreFocusToTrigger,
+      ],
     );
     return (
@@ -124,13 +153,42 @@ const MoreMenu: React.ForwardRefExoticComponent<
         {props.elementToBeShownInsteadOfButton && (
           <div
+            /*
+             * The id lets the menu's aria-labelledby resolve and lets focus
+             * return here on close. But the menu-button ARIA (haspopup/expanded/
+             * label) is only applied when a caller opts in with triggerClassName
+             * — callers that pass their own element (some already a real
+             * <button>) keep a bare wrapper to avoid layering redundant button
+             * semantics on top.
+             */
+            id={buttonId}
+            className={props.triggerClassName}
             onClick={() => {
               setIsComponentVisible(!isDropdownVisible);
             }}
             role="button"
             tabIndex={0}
+            aria-label={
+              props.triggerClassName ? props.text || "More options" : undefined
+            }
+            aria-haspopup={props.triggerClassName ? "menu" : undefined}
+            aria-expanded={
+              props.triggerClassName ? isComponentVisible : undefined
+            }
+            aria-controls={
+              props.triggerClassName && isComponentVisible ? menuId : undefined
+            }
             onKeyDown={(e: React.KeyboardEvent) => {
-              if (e.key === "Enter" || e.key === " ") {
+              /*
+               * Only respond to the wrapper's own keys, never a focusable
+               * child's (e.g. an input inside a custom trigger), so typing
+               * isn't hijacked.
+               */
+              if (
+                (e.key === "Enter" || e.key === " ") &&
+                e.target === e.currentTarget
+              ) {
+                e.preventDefault();
                 setIsComponentVisible(!isDropdownVisible);
               }
             }}
@@ -160,6 +218,7 @@ const MoreMenu: React.ForwardRefExoticComponent<
                   onClick={() => {
                     if (isComponentVisible) {
                       setIsComponentVisible(false);
+                      restoreFocusToTrigger();
                     }
                   }}
                   onKeyDown={(e: React.KeyboardEvent) => {

package/UI/Components/Tabs/Tabs.tsx CHANGED Viewed

@@ -10,6 +10,11 @@ import React, {
 export interface ComponentProps {
   tabs: Array<Tab>;
   onTabChange: (tab: Tab) => void;
+  /**
+   * Tab selected on first render (e.g. restored from a URL param).
+   * Falls back to the first tab when absent or unknown.
+   */
+  initialTabName?: string | undefined;
 }
 const Tabs: FunctionComponent<ComponentProps> = (
@@ -88,7 +93,11 @@ const Tabs: FunctionComponent<ComponentProps> = (
     if (!hasInitialized.current && props.tabs.length > 0) {
       hasInitialized.current = true;
-      setCurrentTabName(props.tabs[0]!.name);
+      setCurrentTabName(
+        props.initialTabName && tabNames.includes(props.initialTabName)
+          ? props.initialTabName
+          : props.tabs[0]!.name,
+      );
       return;
     }

package/UI/Utils/Navigation.ts CHANGED Viewed

@@ -102,7 +102,16 @@ abstract class Navigation {
       (queryString ? `?${queryString}` : "") +
       window.location.hash;
-    window.history.replaceState(window.history.state, "", newRelativeUrl);
+    try {
+      window.history.replaceState(window.history.state, "", newRelativeUrl);
+    } catch {
+      /*
+       * Safari throws SecurityError when replaceState is called >100
+       * times / 30s (e.g. fast typing into a URL-synced search box).
+       * React state stays authoritative; the URL re-syncs on the next
+       * successful write.
+       */
+    }
   }
   public static getParamByName(

package/Utils/Dashboard/Components/DashboardLogChartComponent.ts CHANGED Viewed

@@ -7,13 +7,13 @@ import {
   ComponentArgument,
   ComponentArgumentSection,
   ComponentInputType,
-  EntityFilterModelType,
 } from "../../../Types/Dashboard/DashboardComponents/ComponentArgument";
 import DashboardComponentType from "../../../Types/Dashboard/DashboardComponentType";
+import DashboardChartType from "../../../Types/Dashboard/Chart/ChartType";
 const DisplaySection: ComponentArgumentSection = {
   name: "Display Options",
-  description: "Configure the chart heading",
+  description: "Configure the chart heading and visualization",
   order: 1,
 };
@@ -35,7 +35,9 @@ export default class DashboardLogChartComponentUtil extends DashboardBaseCompone
       componentId: ObjectID.generate(),
       minHeightInDashboardUnits: 3,
       minWidthInDashboardUnits: 6,
-      arguments: {},
+      arguments: {
+        chartType: DashboardChartType.Bar,
+      },
     };
   }
@@ -53,14 +55,17 @@ export default class DashboardLogChartComponentUtil extends DashboardBaseCompone
         section: DisplaySection,
       },
       {
-        name: "Services",
-        description: "Only count logs emitted by the selected services",
-        required: false,
-        type: ComponentInputType.EntityMultiSelectDropdown,
-        id: "serviceIds",
-        placeholder: "All services",
-        section: FiltersSection,
-        entityFilterModelType: EntityFilterModelType.Service,
+        name: "Chart Type",
+        description: "How log volume is visualized over time",
+        required: true,
+        type: ComponentInputType.Dropdown,
+        id: "chartType",
+        section: DisplaySection,
+        dropdownOptions: [
+          { label: "Bar Chart", value: DashboardChartType.Bar },
+          { label: "Line Chart", value: DashboardChartType.Line },
+          { label: "Area Chart", value: DashboardChartType.Area },
+        ],
       },
       {
         name: "Severities",
@@ -89,16 +94,6 @@ export default class DashboardLogChartComponentUtil extends DashboardBaseCompone
         placeholder: "Search text...",
         section: FiltersSection,
       },
-      {
-        name: "Attribute Filters",
-        description:
-          "Exact attribute matches, e.g. @service.name:checkout @deployment.environment:production",
-        required: false,
-        type: ComponentInputType.LongText,
-        id: "attributeFilterQuery",
-        placeholder: "@key:value @another.key:value",
-        section: FiltersSection,
-      },
     ];
   }
 }

package/Utils/Monitor/LatencyMatrixUtil.ts ADDED Viewed

@@ -0,0 +1,162 @@
+import LatencyMatrix, {
+  LatencyMatrixAxisItem,
+  LatencyMatrixCell,
+} from "../../Types/Monitor/LatencyMatrix";
+import { JSONObject } from "../../Types/JSON";
+export interface LatencyMatrixMonitorInput {
+  id: string;
+  name: string;
+}
+export interface LatencyMatrixProbeInput {
+  id: string;
+  name: string;
+}
+export interface LatencyMatrixProbeResult {
+  monitorId: string;
+  probeId: string;
+  /*
+   * MonitorProbe.lastMonitoringLog: a map of monitorStepId -> the last
+   * ProbeMonitorResponse for that step. The matrix uses the most recently
+   * monitored step's response time and online state.
+   */
+  lastMonitoringLog?: JSONObject | undefined;
+}
+export default class LatencyMatrixUtil {
+  /*
+   * Shapes probe/monitor axes plus each monitor-probe pair's last-check
+   * snapshot into a dense grid. Pure over its inputs so it's unit-testable
+   * without a database.
+   */
+  public static buildMatrix(data: {
+    monitors: Array<LatencyMatrixMonitorInput>;
+    probes: Array<LatencyMatrixProbeInput>;
+    results: Array<LatencyMatrixProbeResult>;
+    now: Date;
+  }): LatencyMatrix {
+    const monitors: Array<LatencyMatrixAxisItem> = data.monitors.map(
+      (monitor: LatencyMatrixMonitorInput) => {
+        return { id: monitor.id, name: monitor.name };
+      },
+    );
+    const probes: Array<LatencyMatrixAxisItem> = data.probes.map(
+      (probe: LatencyMatrixProbeInput) => {
+        return { id: probe.id, name: probe.name };
+      },
+    );
+    const cells: Record<string, Record<string, LatencyMatrixCell>> = {};
+    // Seed every cell as "no data" so the grid is dense.
+    for (const monitor of monitors) {
+      cells[monitor.id] = {};
+      for (const probe of probes) {
+        cells[monitor.id]![probe.id] = {
+          monitorId: monitor.id,
+          probeId: probe.id,
+          hasData: false,
+        };
+      }
+    }
+    for (const result of data.results) {
+      const row: Record<string, LatencyMatrixCell> | undefined =
+        cells[result.monitorId];
+      if (!row || !row[result.probeId]) {
+        continue;
+      }
+      const latest: {
+        latencyInMs?: number | undefined;
+        isOnline?: boolean | undefined;
+        monitoredAt?: Date | undefined;
+      } | null = LatencyMatrixUtil.extractLatest(result.lastMonitoringLog);
+      if (!latest) {
+        continue;
+      }
+      const cell: LatencyMatrixCell = {
+        monitorId: result.monitorId,
+        probeId: result.probeId,
+        hasData: true,
+        latencyInMs: latest.latencyInMs,
+        isOnline: latest.isOnline,
+      };
+      if (latest.monitoredAt) {
+        cell.ageInSeconds = Math.max(
+          0,
+          Math.round(
+            (data.now.getTime() - new Date(latest.monitoredAt).getTime()) /
+              1000,
+          ),
+        );
+      }
+      row[result.probeId] = cell;
+    }
+    return { monitors, probes, cells };
+  }
+  /*
+   * Picks the most-recently-monitored step from a lastMonitoringLog and
+   * returns its latency / online / timestamp. Returns null when the log is
+   * empty or malformed.
+   */
+  private static extractLatest(log: JSONObject | undefined): {
+    latencyInMs?: number | undefined;
+    isOnline?: boolean | undefined;
+    monitoredAt?: Date | undefined;
+  } | null {
+    if (!log || typeof log !== "object") {
+      return null;
+    }
+    let best: {
+      latencyInMs?: number | undefined;
+      isOnline?: boolean | undefined;
+      monitoredAt?: Date | undefined;
+    } | null = null;
+    let bestTime: number = -Infinity;
+    for (const stepId of Object.keys(log)) {
+      const response: JSONObject | undefined = log[stepId] as
+        | JSONObject
+        | undefined;
+      if (!response || typeof response !== "object") {
+        continue;
+      }
+      const monitoredAtValue: unknown = response["monitoredAt"];
+      const monitoredAt: Date | undefined = monitoredAtValue
+        ? new Date(monitoredAtValue as string)
+        : undefined;
+      const time: number =
+        monitoredAt && !isNaN(monitoredAt.getTime())
+          ? monitoredAt.getTime()
+          : 0;
+      if (time >= bestTime) {
+        bestTime = time;
+        const latencyValue: unknown = response["responseTimeInMs"];
+        const onlineValue: unknown = response["isOnline"];
+        best = {
+          latencyInMs:
+            typeof latencyValue === "number" ? latencyValue : undefined,
+          isOnline: typeof onlineValue === "boolean" ? onlineValue : undefined,
+          monitoredAt:
+            monitoredAt && !isNaN(monitoredAt.getTime())
+              ? monitoredAt
+              : undefined,
+        };
+      }
+    }
+    return best;
+  }
+}

package/Utils/Monitor/MonitorMetricType.ts CHANGED Viewed

@@ -43,6 +43,14 @@ class MonitorMetricTypeUtil {
       case MonitorMetricType.TimeToFirstByte:
       case MonitorMetricType.DownloadTime:
         return AggregationType.Avg;
+      case MonitorMetricType.SnmpInterfaceOperStatus:
+        return AggregationType.Min;
+      case MonitorMetricType.SnmpInterfaceInBitsPerSecond:
+      case MonitorMetricType.SnmpInterfaceOutBitsPerSecond:
+      case MonitorMetricType.SnmpInterfaceErrorsPerSecond:
+        return AggregationType.Avg;
+      case MonitorMetricType.SnmpInterfaceUtilizationPercent:
+        return AggregationType.Max;
       /*
        * Extended server/VM metrics. Cumulative counters (bytes/packets/ops since
@@ -197,9 +205,20 @@ class MonitorMetricTypeUtil {
       ];
     }
+    if (monitorType === MonitorType.NetworkDevice) {
+      return [
+        MonitorMetricType.IsOnline,
+        MonitorMetricType.ResponseTime,
+        MonitorMetricType.SnmpInterfaceOperStatus,
+        MonitorMetricType.SnmpInterfaceInBitsPerSecond,
+        MonitorMetricType.SnmpInterfaceOutBitsPerSecond,
+        MonitorMetricType.SnmpInterfaceUtilizationPercent,
+        MonitorMetricType.SnmpInterfaceErrorsPerSecond,
+      ];
+    }
     if (
       monitorType === MonitorType.Port ||
-      monitorType === MonitorType.SNMP ||
       monitorType === MonitorType.DNS ||
       monitorType === MonitorType.DNSSEC ||
       monitorType === MonitorType.Domain ||
@@ -285,6 +304,28 @@ class MonitorMetricTypeUtil {
       ];
     }
+    if (monitorType === MonitorType.NetworkDevice) {
+      return [
+        {
+          title: "Availability",
+          description: "Device reachability and SNMP response time.",
+          metrics: [MonitorMetricType.IsOnline, MonitorMetricType.ResponseTime],
+        },
+        {
+          title: "Interfaces",
+          description:
+            "Per-interface status, bandwidth, utilization, and errors. One series per interface.",
+          metrics: [
+            MonitorMetricType.SnmpInterfaceOperStatus,
+            MonitorMetricType.SnmpInterfaceInBitsPerSecond,
+            MonitorMetricType.SnmpInterfaceOutBitsPerSecond,
+            MonitorMetricType.SnmpInterfaceUtilizationPercent,
+            MonitorMetricType.SnmpInterfaceErrorsPerSecond,
+          ],
+        },
+      ];
+    }
     // Other monitor types keep the single-card layout.
     const metrics: Array<MonitorMetricType> =
       this.getMonitorMetricTypesByMonitorType(monitorType);
@@ -332,6 +373,16 @@ class MonitorMetricTypeUtil {
         return "Time to First Byte";
       case MonitorMetricType.DownloadTime:
         return "Download Time";
+      case MonitorMetricType.SnmpInterfaceOperStatus:
+        return "Interface Status";
+      case MonitorMetricType.SnmpInterfaceInBitsPerSecond:
+        return "Interface Inbound Bandwidth";
+      case MonitorMetricType.SnmpInterfaceOutBitsPerSecond:
+        return "Interface Outbound Bandwidth";
+      case MonitorMetricType.SnmpInterfaceUtilizationPercent:
+        return "Interface Utilization";
+      case MonitorMetricType.SnmpInterfaceErrorsPerSecond:
+        return "Interface Errors";
       case MonitorMetricType.LoadAverage1Min:
         return "Load Average (1 minute)";
       case MonitorMetricType.LoadAverage5Min:
@@ -424,6 +475,15 @@ class MonitorMetricTypeUtil {
       case MonitorMetricType.TimeToFirstByte:
       case MonitorMetricType.DownloadTime:
         return "ms";
+      case MonitorMetricType.SnmpInterfaceOperStatus:
+        return "";
+      case MonitorMetricType.SnmpInterfaceInBitsPerSecond:
+      case MonitorMetricType.SnmpInterfaceOutBitsPerSecond:
+        return "bps";
+      case MonitorMetricType.SnmpInterfaceUtilizationPercent:
+        return "%";
+      case MonitorMetricType.SnmpInterfaceErrorsPerSecond:
+        return "errors/s";
       case MonitorMetricType.LoadAverage1Min:
       case MonitorMetricType.LoadAverage5Min:
       case MonitorMetricType.LoadAverage15Min:
@@ -494,6 +554,16 @@ class MonitorMetricTypeUtil {
         return "Time from the end of connection setup until the first byte of the response arrived — the server-side processing time.";
       case MonitorMetricType.DownloadTime:
         return "Time spent receiving the response body after the first byte arrived.";
+      case MonitorMetricType.SnmpInterfaceOperStatus:
+        return "Operational status of each interface: 1 when up, 0 when down. Interfaces that are administratively disabled also report 0.";
+      case MonitorMetricType.SnmpInterfaceInBitsPerSecond:
+        return "Inbound traffic per interface, computed from the delta of IF-MIB octet counters between checks.";
+      case MonitorMetricType.SnmpInterfaceOutBitsPerSecond:
+        return "Outbound traffic per interface, computed from the delta of IF-MIB octet counters between checks.";
+      case MonitorMetricType.SnmpInterfaceUtilizationPercent:
+        return "Traffic in the busiest direction as a percentage of the interface's reported speed. Sustained values above 80% typically mean the link needs an upgrade.";
+      case MonitorMetricType.SnmpInterfaceErrorsPerSecond:
+        return "Combined inbound and outbound errors per second per interface. A non-zero rate usually points to cabling, SFP, or duplex problems.";
       case MonitorMetricType.LoadAverage1Min:
         return "Average number of runnable or uninterruptible processes over the last 1 minute. Values persistently above the number of CPU cores indicate CPU saturation.";
       case MonitorMetricType.LoadAverage5Min: