@oneuptime/common 12.0.31 → 12.0.32

package/UI/Components/Navbar/NavBarMenuModal.tsx

@@ -129,6 +129,11 @@ export interface ComponentProps {
     | undefined;
   searchPlaceholder?: string | undefined;
   noResultsText?: string | undefined;
+  /*
+   * Defaults to visible for direct/legacy consumers. Dashboard hides it when
+   * its command palette owns Cmd/Ctrl+K instead of this products menu.
+   */
+  showCommandKShortcutHint?: boolean | undefined;
   keyboardHint?: string | undefined;
   recentLabel?: string | undefined;
   onClose: () => void;
@@ -502,14 +507,14 @@ const NavBarMenuModal: FunctionComponent<ComponentProps> = (
                 >
                   <Icon icon={IconProp.Close} className="h-4 w-4" />
                 </button>
-              ) : (
+              ) : props.showCommandKShortcutHint !== false ? (
                 /* OS-appropriate hint: ⌘ K on a Mac, Ctrl K elsewhere. */
                 <KeyboardShortcut
                   keys={[KeyboardKey.Mod, "K"]}
                   size={KeyboardShortcutSize.Small}
                   className="hidden sm:inline-flex"
                 />
-              )}
+              ) : null}
             </div>
 
             {/* Body */}

package/UI/Components/SideMenu/CountModelSideMenuItem.tsx

@@ -21,6 +21,7 @@ export const REFRESH_SIDEBAR_COUNT_EVENT: string = "REFRESH_SIDEBAR_COUNTS";
 
 export interface ComponentProps<TBaseModel extends BaseModel> {
   link: Link;
+  activeRoute?: Link["to"] | undefined;
   modelType?: { new (): TBaseModel } | undefined;
   badgeType?: BadgeType | undefined;
   countQuery?: Query<TBaseModel> | undefined;
@@ -136,6 +137,7 @@ const CountModelSideMenuItem: <TBaseModel extends BaseModel>(
   return (
     <SideMenuItem
       link={props.link}
+      activeRoute={props.activeRoute}
       badge={!isLoading && !error ? count : undefined}
       badgeType={props.badgeType}
       icon={props.icon}

package/UI/Components/SideMenu/SideMenu.tsx

@@ -20,6 +20,8 @@ import { RequestOptions } from "../../Utils/ModelAPI/ModelAPI";
 
 export interface SideMenuItemProps {
   link: Link;
+  // Use a different route for selection when the link target also changes query state.
+  activeRoute?: Link["to"] | undefined;
   showAlert?: boolean;
   showWarning?: boolean;
   badge?: number;
@@ -106,7 +108,7 @@ const SideMenu: FunctionComponent<ComponentProps> = (props: ComponentProps) => {
     if (props.sections) {
       for (const section of props.sections) {
         for (const item of section.items) {
-          if (Navigation.isOnThisPage(item.link.to)) {
+          if (Navigation.isOnThisPage(item.activeRoute || item.link.to)) {
             const result: {
               sectionTitle: string;
               itemTitle: string;
@@ -127,7 +129,7 @@ const SideMenu: FunctionComponent<ComponentProps> = (props: ComponentProps) => {
     // Check direct items
     if (props.items) {
       for (const item of props.items) {
-        if (Navigation.isOnThisPage(item.link.to)) {
+        if (Navigation.isOnThisPage(item.activeRoute || item.link.to)) {
           const result: {
             itemTitle: string;
             icon?: IconProp;
@@ -184,9 +186,13 @@ const SideMenu: FunctionComponent<ComponentProps> = (props: ComponentProps) => {
             icon?: IconProp;
             defaultCollapsed?: boolean;
             collapsible?: boolean;
+            isActive: boolean;
           } = {
             key: `section-${sectionIndex}`,
             title: section.title,
+            isActive: section.items.some((item: SideMenuItemProps): boolean => {
+              return Navigation.isOnThisPage(item.activeRoute || item.link.to);
+            }),
           };
 
           if (section.icon) {
@@ -209,6 +215,7 @@ const SideMenu: FunctionComponent<ComponentProps> = (props: ComponentProps) => {
                       <CountModelSideMenuItem
                         key={`section-${sectionIndex}-count-item-${itemIndex}`}
                         link={item.link}
+                        activeRoute={item.activeRoute}
                         badgeType={item.badgeType}
                         modelType={item.modelType as any}
                         countQuery={item.countQuery as any}
@@ -225,6 +232,7 @@ const SideMenu: FunctionComponent<ComponentProps> = (props: ComponentProps) => {
                     <SideMenuItem
                       key={`section-${sectionIndex}-item-${itemIndex}`}
                       link={item.link}
+                      activeRoute={item.activeRoute}
                       showAlert={item.showAlert}
                       showWarning={item.showWarning}
                       badge={item.badge}
@@ -252,6 +260,7 @@ const SideMenu: FunctionComponent<ComponentProps> = (props: ComponentProps) => {
             <CountModelSideMenuItem
               key={`count-item-${itemIndex}`}
               link={item.link}
+              activeRoute={item.activeRoute}
               badgeType={item.badgeType}
               modelType={item.modelType as any}
               countQuery={item.countQuery as any}
@@ -267,6 +276,7 @@ const SideMenu: FunctionComponent<ComponentProps> = (props: ComponentProps) => {
             <SideMenuItem
               key={`item-${itemIndex}`}
               link={item.link}
+              activeRoute={item.activeRoute}
               showAlert={item.showAlert}
               showWarning={item.showWarning}
               badge={item.badge}

package/UI/Components/SideMenu/SideMenuItem.tsx

@@ -9,6 +9,7 @@ import React, { FunctionComponent } from "react";
 
 export interface ComponentProps {
   link: Link;
+  activeRoute?: Link["to"] | undefined;
   showAlert?: undefined | boolean;
   showWarning?: undefined | boolean;
   badge?: undefined | number;
@@ -23,7 +24,9 @@ const SideMenuItem: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ) => {
   const { translateString } = useTranslateValue();
-  const isActive: boolean = Navigation.isOnThisPage(props.link.to);
+  const isActive: boolean = Navigation.isOnThisPage(
+    props.activeRoute || props.link.to,
+  );
   const isSubItemActive: boolean = props.subItemLink
     ? Navigation.isOnThisPage(props.subItemLink.to)
     : false;

package/UI/Components/SideMenu/SideMenuSection.tsx

@@ -1,7 +1,12 @@
 import Icon from "../Icon/Icon";
 import useTranslateValue from "../../Utils/Translation";
 import IconProp from "../../../Types/Icon/IconProp";
-import React, { FunctionComponent, ReactElement, useState } from "react";
+import React, {
+  FunctionComponent,
+  ReactElement,
+  useEffect,
+  useState,
+} from "react";
 
 export interface ComponentProps {
   title: string;
@@ -9,6 +14,7 @@ export interface ComponentProps {
   defaultCollapsed?: boolean;
   collapsible?: boolean;
   icon?: IconProp;
+  isActive?: boolean;
 }
 
 const SideMenuSection: FunctionComponent<ComponentProps> = (
@@ -16,12 +22,18 @@ const SideMenuSection: FunctionComponent<ComponentProps> = (
 ) => {
   const { translateString } = useTranslateValue();
   const [isCollapsed, setIsCollapsed] = useState<boolean>(
-    props.defaultCollapsed || false,
+    Boolean(props.defaultCollapsed && !props.isActive),
   );
   const translatedTitle: string = translateString(props.title) || props.title;
 
   const isCollapsible: boolean = props.collapsible ?? true;
 
+  useEffect(() => {
+    if (props.isActive) {
+      setIsCollapsed(false);
+    }
+  }, [props.isActive]);
+
   const handleToggle: () => void = (): void => {
     if (isCollapsible) {
       setIsCollapsed(!isCollapsed);

package/UI/Utils/UseDashboardTimeRangeZoom.ts

@@ -0,0 +1,77 @@
+import DashboardTimeRangeZoomUtil, {
+  DashboardTimeRangeZoomState,
+} from "../../Utils/Dashboard/DashboardTimeRangeZoom";
+import RangeStartAndEndDateTime from "../../Types/Time/RangeStartAndEndDateTime";
+import { useCallback, useState } from "react";
+
+export interface DashboardTimeRangeZoom {
+  /** The window to hand every widget on the board. */
+  startAndEndDate: RangeStartAndEndDateTime;
+  /** True while a panel drag-selection is narrowing the board. */
+  isZoomed: boolean;
+  /** An explicit pick from the time-range picker — a new baseline. */
+  setStartAndEndDate: (range: RangeStartAndEndDateTime) => void;
+  /** A drag-selection on a time-series panel — zooms the whole board. */
+  zoomToTimeRange: (startTime: Date, endTime: Date) => void;
+  /** Double-click on a panel, or the toolbar's reset — undoes the zoom. */
+  resetZoom: () => void;
+}
+
+export type UseDashboardTimeRangeZoomFunction = (
+  initialRange: RangeStartAndEndDateTime,
+) => DashboardTimeRangeZoom;
+
+/**
+ * Owns the dashboard-wide time range and the one level of undo that makes
+ * drag-to-zoom reversible. Both dashboard shells (the authenticated
+ * DashboardView and the public DashboardViewPage) use this so a panel
+ * gesture means the same thing on both.
+ *
+ * All three callbacks are identity-stable for the life of the dashboard:
+ * they are handed down through the canvas into React.memo'd widgets whose
+ * comparators do not look at function props, so a changing reference would
+ * leave a widget holding a stale closure.
+ */
+const useDashboardTimeRangeZoom: UseDashboardTimeRangeZoomFunction = (
+  initialRange: RangeStartAndEndDateTime,
+): DashboardTimeRangeZoom => {
+  const [state, setState] = useState<DashboardTimeRangeZoomState>(() => {
+    return DashboardTimeRangeZoomUtil.getInitialState(initialRange);
+  });
+
+  const setStartAndEndDate: (range: RangeStartAndEndDateTime) => void =
+    useCallback((range: RangeStartAndEndDateTime): void => {
+      setState((previous: DashboardTimeRangeZoomState) => {
+        return DashboardTimeRangeZoomUtil.selectRange(previous, range);
+      });
+    }, []);
+
+  const zoomToTimeRange: (startTime: Date, endTime: Date) => void = useCallback(
+    (startTime: Date, endTime: Date): void => {
+      setState((previous: DashboardTimeRangeZoomState) => {
+        return DashboardTimeRangeZoomUtil.zoomToWindow(
+          previous,
+          startTime,
+          endTime,
+        );
+      });
+    },
+    [],
+  );
+
+  const resetZoom: () => void = useCallback((): void => {
+    setState((previous: DashboardTimeRangeZoomState) => {
+      return DashboardTimeRangeZoomUtil.resetZoom(previous);
+    });
+  }, []);
+
+  return {
+    startAndEndDate: state.current,
+    isZoomed: DashboardTimeRangeZoomUtil.isZoomed(state),
+    setStartAndEndDate,
+    zoomToTimeRange,
+    resetZoom,
+  };
+};
+
+export default useDashboardTimeRangeZoom;

package/Utils/Dashboard/DashboardTimeRangeZoom.ts

@@ -0,0 +1,118 @@
+import InBetween from "../../Types/BaseDatabase/InBetween";
+import RangeStartAndEndDateTime from "../../Types/Time/RangeStartAndEndDateTime";
+import TimeRange from "../../Types/Time/TimeRange";
+
+/**
+ * The dashboard's time window, plus the window to go back to when a zoom
+ * is undone.
+ *
+ * A dashboard has exactly ONE time range and every widget renders it, so
+ * drag-selecting a window on a time-series panel is a statement about the
+ * whole board, not about that one panel. `baseline` is what makes the
+ * gesture reversible: the first zoom records the range that was in effect
+ * before it, later zooms keep that same original, and a reset restores it.
+ * `baseline === null` is the canonical "not zoomed" signal — the toolbar's
+ * reset affordance and the panels' double-click-to-reset both key off it.
+ */
+export interface DashboardTimeRangeZoomState {
+  /** The window every widget on the board is currently querying. */
+  current: RangeStartAndEndDateTime;
+  /** Window a reset returns to; null when no zoom is active. */
+  baseline: RangeStartAndEndDateTime | null;
+}
+
+export default class DashboardTimeRangeZoomUtil {
+  public static getInitialState(
+    range: RangeStartAndEndDateTime,
+  ): DashboardTimeRangeZoomState {
+    return {
+      current: range,
+      baseline: null,
+    };
+  }
+
+  public static isZoomed(state: DashboardTimeRangeZoomState): boolean {
+    return state.baseline !== null;
+  }
+
+  /**
+   * An explicit pick from the time-range picker. That is a new baseline,
+   * not a zoom: it drops any pending "return to" window, so the reset
+   * affordance disappears instead of offering to jump back to a range the
+   * user has deliberately moved on from.
+   */
+  public static selectRange(
+    _state: DashboardTimeRangeZoomState,
+    range: RangeStartAndEndDateTime,
+  ): DashboardTimeRangeZoomState {
+    return {
+      current: range,
+      baseline: null,
+    };
+  }
+
+  /**
+   * Drag-selected window from a time-series panel. Returns the state
+   * unchanged (same reference, so callers can skip a render) when the
+   * selection is not a usable window — the chart library can hand back a
+   * zero-width or invalid pair when a drag never left its starting bucket.
+   */
+  public static zoomToWindow(
+    state: DashboardTimeRangeZoomState,
+    startTime: Date,
+    endTime: Date,
+  ): DashboardTimeRangeZoomState {
+    if (!(startTime instanceof Date) || !(endTime instanceof Date)) {
+      return state;
+    }
+
+    const startTimeInMs: number = startTime.getTime();
+    const endTimeInMs: number = endTime.getTime();
+
+    if (Number.isNaN(startTimeInMs) || Number.isNaN(endTimeInMs)) {
+      return state;
+    }
+
+    // A drag right-to-left is the same window as left-to-right.
+    const lowerInMs: number = Math.min(startTimeInMs, endTimeInMs);
+    const upperInMs: number = Math.max(startTimeInMs, endTimeInMs);
+
+    if (lowerInMs === upperInMs) {
+      return state;
+    }
+
+    return {
+      current: {
+        range: TimeRange.CUSTOM,
+        startAndEndDate: new InBetween<Date>(
+          new Date(lowerInMs),
+          new Date(upperInMs),
+        ),
+      },
+      /*
+       * Zooming again while already zoomed keeps the ORIGINAL baseline, so
+       * one reset always lands back where the investigation started rather
+       * than unwinding one drag at a time.
+       */
+      baseline: state.baseline || state.current,
+    };
+  }
+
+  /**
+   * Undo the zoom. A no-op (same state reference) when nothing is zoomed,
+   * so a stray double-click on an unzoomed dashboard cannot retime the
+   * board or spend a refetch.
+   */
+  public static resetZoom(
+    state: DashboardTimeRangeZoomState,
+  ): DashboardTimeRangeZoomState {
+    if (state.baseline === null) {
+      return state;
+    }
+
+    return {
+      current: state.baseline,
+      baseline: null,
+    };
+  }
+}

package/Utils/Monitor/NetworkDeviceRoleCatalog.ts

@@ -0,0 +1,232 @@
+import {
+  NetworkTopologyDeviceRole,
+  NetworkTopologyNode,
+  NetworkTopologyNodeShape,
+} from "../../Types/Monitor/SnmpMonitor/NetworkTopology";
+
+/*
+ * The project's configured device roles, reduced to what the topology needs.
+ *
+ * WHY THIS EXISTS. Roles are rows now (NetworkDeviceRole), which means the
+ * label a role is drawn with, the silhouette it uses, whether it sits at the
+ * core and whether it is worth walking with SNMP are all per-project answers.
+ * None of them can be compiled into the client any more.
+ *
+ * The client is NOT given the table to look things up in, though. The topology
+ * builder stamps the four answers onto each node as it builds it, so every
+ * consumer downstream - the shape module, three layouts, the legend, the
+ * detail panel, the accessible label - keeps its current pure signature and
+ * needs no catalogue threaded through it. This module is the one place that
+ * turns rows into that stamp.
+ *
+ * Pure and dependency-free so it runs identically on the server, in the
+ * builder, and in the unit tests.
+ */
+
+/** One configured role, as the topology builder needs it. */
+export interface TopologyDeviceRoleInput {
+  id?: string | undefined;
+  key: string;
+  name: string;
+  topologyShape?: string | undefined;
+  isCoreLayer?: boolean | undefined;
+  isSnmpWalkable?: boolean | undefined;
+}
+
+/** What gets stamped onto a node. Every field optional - see stampForRoleKey. */
+export interface TopologyNodeRoleStamp {
+  roleId?: string | undefined;
+  roleKey?: string | undefined;
+  roleLabel?: string | undefined;
+  roleShape?: NetworkTopologyNodeShape | undefined;
+  isCoreLayerRole?: boolean | undefined;
+  isSnmpWalkableRole?: boolean | undefined;
+}
+
+/*
+ * The silhouettes the renderer can actually draw. A row's topologyShape is a
+ * free-text column - the geometry lives in the client and adding a shape must
+ * not need a migration - so a value that is not one of these is dropped rather
+ * than passed through to a renderer that would have no path for it.
+ */
+const KNOWN_SHAPES: ReadonlySet<string> = new Set<string>([
+  "circle",
+  "rounded-square",
+  "diamond",
+  "triangle",
+  "hexagon",
+  "tower",
+  "cylinder",
+  "rect",
+]);
+
+export type NormalizeRoleKeyFunction = (
+  value: string | undefined | null,
+) => string | undefined;
+
+/*
+ * Keys are matched case- and whitespace-insensitively, the same way
+ * parseDeviceRoleOverride reads the stored column, so a hand-edited or
+ * imported "Router " still finds the Router row.
+ */
+export const normalizeRoleKey: NormalizeRoleKeyFunction = (
+  value: string | undefined | null,
+): string | undefined => {
+  const normalized: string = (value || "").trim().toLowerCase();
+  return normalized || undefined;
+};
+
+/**
+ * Index the project's roles for lookup by key.
+ *
+ * Later rows do not overwrite earlier ones on a key clash. The key is unique
+ * per project in the database, so a clash here means the caller passed rows
+ * from more than one project, and quietly taking the last one would draw the
+ * wrong project's shapes.
+ */
+export type BuildRoleIndexFunction = (
+  roles: ReadonlyArray<TopologyDeviceRoleInput>,
+) => Map<string, TopologyDeviceRoleInput>;
+
+export const buildDeviceRoleIndex: BuildRoleIndexFunction = (
+  roles: ReadonlyArray<TopologyDeviceRoleInput>,
+): Map<string, TopologyDeviceRoleInput> => {
+  const index: Map<string, TopologyDeviceRoleInput> = new Map<
+    string,
+    TopologyDeviceRoleInput
+  >();
+
+  for (const role of roles) {
+    const key: string | undefined = normalizeRoleKey(role.key);
+    if (!key || index.has(key)) {
+      continue;
+    }
+    index.set(key, role);
+  }
+
+  return index;
+};
+
+export type StampForRoleKeyFunction = (
+  roleKey: string | undefined,
+  index: Map<string, TopologyDeviceRoleInput>,
+) => TopologyNodeRoleStamp;
+
+/**
+ * The stamp for one role key.
+ *
+ * Returns an EMPTY object when the project has no row for the key - which is
+ * the normal case for a project that has not been backfilled yet, and the
+ * permanent case for a project that deleted a seeded role the classifier can
+ * still produce. Every field a node does not get falls back to the built-in
+ * behaviour on the client, so an empty stamp draws exactly the map that was
+ * drawn before roles were configurable.
+ *
+ * The one field always present when a row IS found is `roleKey`, because the
+ * legend groups by it and a group with no key cannot be grouped.
+ */
+export const stampForRoleKey: StampForRoleKeyFunction = (
+  roleKey: string | undefined,
+  index: Map<string, TopologyDeviceRoleInput>,
+): TopologyNodeRoleStamp => {
+  const normalized: string | undefined = normalizeRoleKey(roleKey);
+  if (!normalized) {
+    return {};
+  }
+
+  const role: TopologyDeviceRoleInput | undefined = index.get(normalized);
+  if (!role) {
+    return {};
+  }
+
+  const stamp: TopologyNodeRoleStamp = {
+    roleKey: role.key,
+  };
+
+  if (role.id) {
+    stamp.roleId = role.id;
+  }
+
+  if (role.name) {
+    stamp.roleLabel = role.name;
+  }
+
+  if (role.topologyShape && KNOWN_SHAPES.has(role.topologyShape)) {
+    stamp.roleShape = role.topologyShape as NetworkTopologyNodeShape;
+  }
+
+  if (role.isCoreLayer !== undefined) {
+    stamp.isCoreLayerRole = Boolean(role.isCoreLayer);
+  }
+
+  if (role.isSnmpWalkable !== undefined) {
+    stamp.isSnmpWalkableRole = Boolean(role.isSnmpWalkable);
+  }
+
+  return stamp;
+};
+
+export type RoleKeyForNodeFunction = (
+  assignedRoleKey: string | undefined,
+  classifiedRole: NetworkTopologyDeviceRole,
+) => string | undefined;
+
+/**
+ * Which key a node's presentation should come from.
+ *
+ * The operator's assignment wins, exactly as it does for `role` itself. With
+ * no assignment the classifier's answer is used, so a project that renamed
+ * "Router" to "Edge Router" sees the new name on devices it never had to
+ * touch. "unknown" is not a key any row holds and is deliberately not looked
+ * up: it is the classifier declining to answer, and a neutral node is the
+ * honest drawing of that.
+ */
+export const roleKeyForNode: RoleKeyForNodeFunction = (
+  assignedRoleKey: string | undefined,
+  classifiedRole: NetworkTopologyDeviceRole,
+): string | undefined => {
+  const assigned: string | undefined = normalizeRoleKey(assignedRoleKey);
+  if (assigned) {
+    return assigned;
+  }
+  if (classifiedRole === "unknown") {
+    return undefined;
+  }
+  return classifiedRole;
+};
+
+export type ApplyRoleStampFunction = (
+  node: NetworkTopologyNode,
+  stamp: TopologyNodeRoleStamp,
+) => void;
+
+/**
+ * Copy a stamp onto a node, omitting the fields it does not carry.
+ *
+ * Assigning undefined rather than omitting would break the payload's own
+ * contract - "absent means fall back" - for any consumer that checks with
+ * `in` or serialises the node, so absent stays absent.
+ */
+export const applyRoleStamp: ApplyRoleStampFunction = (
+  node: NetworkTopologyNode,
+  stamp: TopologyNodeRoleStamp,
+): void => {
+  if (stamp.roleId !== undefined) {
+    node.roleId = stamp.roleId;
+  }
+  if (stamp.roleKey !== undefined) {
+    node.roleKey = stamp.roleKey;
+  }
+  if (stamp.roleLabel !== undefined) {
+    node.roleLabel = stamp.roleLabel;
+  }
+  if (stamp.roleShape !== undefined) {
+    node.roleShape = stamp.roleShape;
+  }
+  if (stamp.isCoreLayerRole !== undefined) {
+    node.isCoreLayerRole = stamp.isCoreLayerRole;
+  }
+  if (stamp.isSnmpWalkableRole !== undefined) {
+    node.isSnmpWalkableRole = stamp.isSnmpWalkableRole;
+  }
+};

package/Utils/Monitor/NetworkDeviceRoleUtil.ts

@@ -538,7 +538,8 @@ export function labelForDeviceRole(
  * The classifier above is evidence-driven, and its evidence is SNMP: a
  * device nothing walks — a ping-only device imported by discovery, say —
  * offers it a hostname and nothing else, so it comes back "unknown" and
- * stays there forever. `NetworkDevice.deviceRole` is the operator saying
+ * stays there forever. The role an operator ASSIGNED the device
+ * (NetworkDevice.networkDeviceRole, whose key is what arrives here) is them saying
  * what the box actually is, and it is the only statement about a role that
  * is not an inference, so it outranks everything the classifier can find.
  *