@oneuptime/common 12.0.33 → 13.0.0

package/UI/Components/MonitorTemplateVariables/TemplateVariablesCatalog.ts

@@ -42,6 +42,7 @@ export default class TemplateVariablesCatalog {
     const groups: Array<TemplateVariableGroup> = [];
 
     groups.push(TemplateVariablesCatalog.monitorIdentityGroup());
+    groups.push(TemplateVariablesCatalog.seriesContextGroup());
 
     const perTypeGroup: TemplateVariableGroup | null =
       TemplateVariablesCatalog.perTypeGroup(input.monitorType);
@@ -87,6 +88,49 @@ export default class TemplateVariablesCatalog {
     };
   }
 
+  /**
+   * Ready-made renderings of the breaching series' identity.
+   *
+   * Listed for EVERY monitor type, not just the grouped ones, because
+   * `MonitorTemplateUtil` defines them unconditionally - they resolve to
+   * an empty string on a monitor with no group-by rather than leaving a
+   * `{{...}}` placeholder in the rendered title. That is the whole reason
+   * they exist: `{{resource.k8s.pod.name}}` is only safe in a template
+   * that is certain to be grouped by that attribute, whereas
+   * `{{seriesResourceSuffix}}` is safe anywhere.
+   */
+  private static seriesContextGroup(): TemplateVariableGroup {
+    return {
+      title: "Affected Resource",
+      description:
+        "The specific pod / container / host / mount that breached. Resolves to an empty string on a monitor with no Group By, so these are safe to use in any title or description.",
+      variables: [
+        {
+          key: "seriesResourceSuffix",
+          description:
+            "The identity, prefixed with a separator, for appending to a title. Empty when the monitor is not grouped.",
+          example: " - Pod: checkout-7d9f-2xk | Namespace: prod",
+        },
+        {
+          key: "seriesResourceSummary",
+          description:
+            "The same identity with no leading separator, for use mid-sentence.",
+          example: "Pod: checkout-7d9f-2xk | Namespace: prod",
+        },
+        {
+          key: "seriesResourceBlock",
+          description:
+            "Every label the series carries, as a markdown list. Best in a description rather than a title.",
+        },
+        {
+          key: "seriesDebugCommands",
+          description:
+            "Read-only commands for this exact resource (kubectl / docker / df ...), already filled in, as a markdown list.",
+        },
+      ],
+    };
+  }
+
   private static seriesLabelsGroup(
     attributeKeys: Array<string> | undefined,
   ): TemplateVariableGroup {

package/UI/Components/StatusPage/ResourceGroupSection.tsx

@@ -6,6 +6,7 @@ import React, {
   FunctionComponent,
   ReactElement,
   useEffect,
+  useRef,
   useState,
 } from "react";
 
@@ -40,6 +41,19 @@ export interface ComponentProps {
   /* Hex or css colour for the rollup, from the rolled up status. */
   rollupColor?: string | undefined;
   isInitiallyExpanded?: boolean | undefined;
+  /*
+   * Opens the section when it turns true, and puts back whatever the visitor
+   * had when it turns false again. The overview sets it while a search is
+   * running: a filtered page whose matches sit inside collapsed groups shows
+   * nothing, which reads as "no results" rather than as "found, but folded
+   * away".
+   *
+   * Deliberately a nudge rather than a lock. Pinning the section open would
+   * leave the header rendering as a working toggle that does nothing, and a
+   * visitor who wants a matched group out of the way while they read another
+   * one should be able to close it.
+   */
+  autoExpand?: boolean | undefined;
   /* The group's own resources. */
   resourcesElement?: ReactElement | undefined;
   /* Nested sections, normally one per sub group. */
@@ -77,6 +91,32 @@ const ResourceGroupSection: FunctionComponent<ComponentProps> = (
     setIsOpen(initiallyExpanded);
   }, [initiallyExpanded]);
 
+  /*
+   * Remembering the visitor's own choice across an autoExpand episode. Without
+   * this, clearing a search would leave every group on the page open - the
+   * search would have quietly rewritten the page's shape.
+   */
+  const wasAutoExpanded: React.MutableRefObject<boolean> =
+    useRef<boolean>(false);
+  const openStateBeforeAutoExpand: React.MutableRefObject<boolean | null> =
+    useRef<boolean | null>(null);
+
+  const autoExpand: boolean = Boolean(props.autoExpand);
+
+  useEffect(() => {
+    if (autoExpand && !wasAutoExpanded.current) {
+      openStateBeforeAutoExpand.current = isOpen;
+      setIsOpen(true);
+    } else if (!autoExpand && wasAutoExpanded.current) {
+      if (openStateBeforeAutoExpand.current !== null) {
+        setIsOpen(openStateBeforeAutoExpand.current);
+        openStateBeforeAutoExpand.current = null;
+      }
+    }
+
+    wasAutoExpanded.current = autoExpand;
+  }, [autoExpand]);
+
   const generatedId: string = React.useId();
   const bodyId: string = `status-page-group-body-${generatedId}`;
   const descriptionId: string = `status-page-group-description-${generatedId}`;

package/UI/Components/Table/CellClassName.ts

@@ -0,0 +1,81 @@
+import Column from "./Types/Column";
+import GenericObject from "../../../Types/GenericObject";
+
+/*
+ * Width cap for a cell that opts into wrapping without naming its own.
+ *
+ * 28rem is wide enough for a two-line status sentence and narrow enough that
+ * one long message cannot starve the columns beside it.
+ */
+export const DEFAULT_WRAP_MAX_WIDTH_CLASS_NAME: string = "max-w-md";
+
+export interface TableCellClassNameOptions<T extends GenericObject> {
+  column: Column<T>;
+  /*
+   * Compared against the RENDERED column count, not the declared one: with
+   * any column filtered out (hideOnMobile, permissions, the viewer's own
+   * layout) the two differ, and the extra right padding would land on the
+   * wrong cell - or on none.
+   */
+  isLastRenderedColumn: boolean;
+}
+
+/**
+ * The classes for one desktop body `<td>`.
+ *
+ * `whitespace-nowrap` is the default and is load-bearing for every date,
+ * count, badge and actions cell in the product - it is what keeps
+ * "12 Mar 2026, 4:05 pm" from folding onto two lines, in roughly two hundred
+ * column declarations that have no layout coverage of their own. Columns that
+ * hold prose opt out with `wrapContent`; see Types/Column.ts for why a
+ * max-width alone does not work and in fact makes the overlap worse
+ * (OneUptime issue #3585).
+ *
+ * For a column that declares no wrapping this returns the exact string the
+ * two cell renderers hard-coded before it existed, character for character.
+ */
+export function getTableCellClassName<T extends GenericObject>(
+  options: TableCellClassNameOptions<T>,
+): string {
+  const whitespaceClassName: string = options.column.wrapContent
+    ? "whitespace-normal break-words"
+    : "whitespace-nowrap";
+
+  const paddingRightClassName: string = options.isLastRenderedColumn
+    ? "pr-6"
+    : "pr-3";
+
+  return `${whitespaceClassName} py-4 pl-4 ${paddingRightClassName} text-sm font-medium text-gray-500 sm:pl-6 align-top`;
+}
+
+/**
+ * The classes for the `<div>` that wraps a cell's content.
+ *
+ * Empty for a column that asks for nothing, which is the overwhelming
+ * majority - deliberately, so neither the DOM nor a single class shifts for a
+ * column that declares neither option.
+ *
+ * A wrapping column always gets its width cap HERE, on the `<td>`'s direct
+ * child, never on the `<td>` itself: CSS leaves the effect of `max-width` on
+ * a table-cell box undefined and browsers ignore it, while a max-width on a
+ * block child DOES cap the column's max-content contribution under
+ * `table-layout: auto` - which is what Table.tsx renders, its `<table>`
+ * carrying no table-layout utility.
+ */
+export function getTableCellContentClassName<T extends GenericObject>(
+  column: Column<T>,
+): string {
+  const classNames: Array<string> = [];
+
+  if (column.wrapContent) {
+    classNames.push(
+      column.wrapMaxWidthClassName || DEFAULT_WRAP_MAX_WIDTH_CLASS_NAME,
+    );
+  }
+
+  if (column.contentClassName) {
+    classNames.push(column.contentClassName);
+  }
+
+  return classNames.join(" ");
+}

package/UI/Components/Table/TableRow.tsx

@@ -6,6 +6,10 @@ import Icon, { ThickProp } from "../Icon/Icon";
 import ConfirmModal from "../Modal/ConfirmModal";
 import FieldType from "../Types/FieldType";
 import Column from "./Types/Column";
+import {
+  getTableCellClassName,
+  getTableCellContentClassName,
+} from "./CellClassName";
 import Columns from "./Types/Columns";
 import Color from "../../../Types/Color";
 import OneUptimeDate from "../../../Types/Date";
@@ -395,17 +399,15 @@ const TableRow: TableRowFunction = <T extends GenericObject>(
           )}
           {props.columns &&
             renderedColumns.map((column: Column<T>, i: number) => {
-              let className: string =
-                "whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-500 sm:pl-6 align-top";
               /*
-               * Compared against the rendered count, not the declared one:
-               * with any column filtered out the two differ, and the extra
-               * right padding would land on the wrong cell - or on none.
+               * Shared with the loading skeleton, so the two can no longer
+               * drift, and the one place that decides whether this cell's
+               * text may wrap.
                */
-              if (i === renderedColumns.length - 1) {
-                className =
-                  "whitespace-nowrap py-4 pl-4 pr-6 text-sm font-medium text-gray-500 sm:pl-6 align-top";
-              }
+              const className: string = getTableCellClassName<T>({
+                column: column,
+                isLastRenderedColumn: i === renderedColumns.length - 1,
+              });
 
               let columnContent: React.ReactNode = null;
 
@@ -479,12 +481,16 @@ const TableRow: TableRowFunction = <T extends GenericObject>(
                 columnContent = column.getElement(props.item);
               }
 
-              const contentWrapperClassName: string = column.contentClassName
-                ? column.contentClassName
-                : "";
+              /*
+               * The column's own classes, plus the width cap a wrapping
+               * column gets - which has to sit on this div rather than on the
+               * <td>, because max-width is ignored on a table-cell box.
+               */
+              const contentWrapperClassName: string =
+                getTableCellContentClassName<T>(column);
 
-              const actionsContainerClassName: string = column.contentClassName
-                ? `flex justify-end ${column.contentClassName}`
+              const actionsContainerClassName: string = contentWrapperClassName
+                ? `flex justify-end ${contentWrapperClassName}`
                 : "flex justify-end";
 
               return (

package/UI/Components/Table/TableSkeletonRows.tsx

@@ -1,5 +1,6 @@
 import Skeleton from "../Skeleton/Skeleton";
 import Column from "./Types/Column";
+import { getTableCellClassName } from "./CellClassName";
 import Columns from "./Types/Columns";
 import GenericObject from "../../../Types/GenericObject";
 import React, { ReactElement } from "react";
@@ -107,17 +108,16 @@ const TableSkeletonRows: TableSkeletonRowsFunction = <T extends GenericObject>(
                 </div>
               </td>
             )}
-            {visibleColumns.map((_column: Column<T>, columnIndex: number) => {
+            {visibleColumns.map((column: Column<T>, columnIndex: number) => {
               /*
-               * Cell classes copied from TableRow's real cells so the
-               * skeleton's rhythm and padding match the rows that replace it.
+               * The same classes TableRow gives its real cells, from the same
+               * helper, so the skeleton's rhythm and padding match the rows
+               * that replace it - and cannot drift from them again.
                */
-              let className: string =
-                "whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-500 sm:pl-6 align-top";
-              if (columnIndex === visibleColumns.length - 1) {
-                className =
-                  "whitespace-nowrap py-4 pl-4 pr-6 text-sm font-medium text-gray-500 sm:pl-6 align-top";
-              }
+              const className: string = getTableCellClassName<T>({
+                column: column,
+                isLastRenderedColumn: columnIndex === visibleColumns.length - 1,
+              });
 
               return (
                 <td key={columnIndex} className={className}>

package/UI/Components/Table/Types/Column.ts

@@ -14,6 +14,42 @@ export default interface Column<T extends GenericObject> {
   colSpan?: number | undefined;
   noValueMessage?: string | undefined;
   contentClassName?: string | undefined;
+  /*
+   * Let this cell's content wrap onto more than one line.
+   *
+   * Body cells are `whitespace-nowrap` by default, and `white-space` is an
+   * INHERITED property - so the nowrap declared on the <td> reaches every
+   * element `getElement` returns, whatever classes that element carries. A
+   * cell holding a free-text sentence (a status message, a probe error, an
+   * operator note) therefore renders as one long line that paints straight
+   * over the columns to its right, and a `max-w-*` on the inner element makes
+   * that WORSE rather than better: it caps the box the line overflows out of,
+   * so the text overlaps its neighbours instead of merely widening the table
+   * (OneUptime issue #3585). Never pair a max-width with a nowrap cell - that
+   * pairing is what this option exists to make unspellable.
+   *
+   * Set it on any column whose cell can hold server- or operator-authored
+   * prose. The cell then declares `whitespace-normal break-words` and its
+   * content is capped at `wrapMaxWidthClassName`, so long text wraps inside
+   * the column's own width. Leave it unset - the default, and no change for
+   * every column that has one today - for dates, counts, badges, ids and
+   * anything else that must stay on a single line.
+   *
+   * Desktop only, by construction: the mobile card layout declares no nowrap
+   * and already wraps, and it reads neither this nor `contentClassName`.
+   */
+  wrapContent?: boolean | undefined;
+  /*
+   * Width cap for a wrapping cell, e.g. "max-w-3xl". Read ONLY when
+   * `wrapContent` is set; defaults to "max-w-md" (28rem).
+   *
+   * It belongs here rather than in `contentClassName` for two reasons. Two
+   * `max-w-*` utilities on one element are resolved by Tailwind's stylesheet
+   * order, not by the order they were written, so the narrower one silently
+   * loses; and a width that is only emitted alongside a wrapping mode can
+   * never be the overlap generator described above.
+   */
+  wrapMaxWidthClassName?: string | undefined;
   alignItem?: AlignItem | undefined;
   key?: keyof T | null; //can be null because actions column does not have a key.
   hideOnMobile?: boolean | undefined; // Hide column on mobile devices

package/UI/Components/Tooltip/Tooltip.tsx

@@ -35,7 +35,17 @@ const Tooltip: FunctionComponent<ComponentProps> = (
 
   return (
     <Tippy
-      key={Math.random()}
+      /*
+       * Deliberately no key. This used to carry key={Math.random()}, which
+       * gives the element a different identity on every render and so unmounts
+       * and remounts the child each time the parent re-renders. Tippy updates
+       * its content from props perfectly well without that, and the remount
+       * had two costs worth naming: a page that re-renders on a timer tore
+       * down and rebuilt every tooltipped element under it (a status page
+       * draws ninety of them per resource), and anything focused inside one
+       * lost focus on every tick - which makes a keyboard-navigable widget
+       * impossible to build under it.
+       */
       content={tooltipContent}
       interactive={isRich}
       trigger="mouseenter focus"

package/UI/Components/Workflow/ComponentsModal.tsx

@@ -146,38 +146,31 @@ const ComponentsModal: FunctionComponent<ComponentProps> = (
   const searchInputRef: React.RefObject<HTMLInputElement> =
     useRef<HTMLInputElement>(null);
 
-  const [components, setComponents] = useState<Array<ComponentMetadata>>([]);
-  const [categories, setCategories] = useState<Array<ComponentCategory>>([]);
-  const [componentsToShow, setComponentsToShow] = useState<
-    Array<ComponentMetadata>
-  >([]);
-  const [selectedComponentMetadata, setSelectedComponentMetadata] =
-    useState<ComponentMetadata | null>(null);
-
-  useEffect(() => {
-    setComponents(props.components);
-    setComponentsToShow([...props.components]);
-    setCategories(props.categories);
-  }, [props.categories, props.components]);
-
-  useEffect(() => {
-    const tokens: Array<string> = getSearchTokens(search);
-
-    const filteredComponents: Array<ComponentMetadata> = components
-      .filter((componentMetadata: ComponentMetadata) => {
-        return componentMetadata.componentType === props.componentsType;
-      })
+  const [selectedComponentId, setSelectedComponentId] = useState<string | null>(
+    null,
+  );
+  const categories: Array<ComponentCategory> = props.categories;
+  const searchTokens: Array<string> = useMemo(() => {
+    return getSearchTokens(search);
+  }, [search]);
+  const components: Array<ComponentMetadata> = useMemo(() => {
+    return props.components.filter((componentMetadata: ComponentMetadata) => {
+      return componentMetadata.componentType === props.componentsType;
+    });
+  }, [props.components, props.componentsType]);
+  const componentsToShow: Array<ComponentMetadata> = useMemo(() => {
+    return components
       .filter((componentMetadata: ComponentMetadata) => {
-        return matchesSearch(componentMetadata, tokens);
+        return matchesSearch(componentMetadata, searchTokens);
       })
       .sort((componentA: ComponentMetadata, componentB: ComponentMetadata) => {
-        if (tokens.length === 0) {
+        if (searchTokens.length === 0) {
           return componentA.title.localeCompare(componentB.title);
         }
 
         const scoreDifference: number =
-          getSearchScore(componentB, tokens) -
-          getSearchScore(componentA, tokens);
+          getSearchScore(componentB, searchTokens) -
+          getSearchScore(componentA, searchTokens);
 
         if (scoreDifference !== 0) {
           return scoreDifference;
@@ -185,9 +178,33 @@ const ComponentsModal: FunctionComponent<ComponentProps> = (
 
         return componentA.title.localeCompare(componentB.title);
       });
+  }, [components, searchTokens]);
+  const selectedComponentMetadata: ComponentMetadata | undefined =
+    componentsToShow.find((componentMetadata: ComponentMetadata) => {
+      return componentMetadata.id === selectedComponentId;
+    });
 
-    setComponentsToShow(filteredComponents);
-  }, [components, props.componentsType, search]);
+  useEffect(() => {
+    // A hidden selection must not be submitted or reappear when search clears.
+    if (!selectedComponentMetadata) {
+      setSelectedComponentId(null);
+    }
+  }, [selectedComponentMetadata]);
+
+  const searchHighlightPattern: RegExp | null = useMemo(() => {
+    if (searchTokens.length === 0) {
+      return null;
+    }
+
+    const alternatives: string = [...new Set(searchTokens)]
+      .sort((tokenA: string, tokenB: string) => {
+        return tokenB.length - tokenA.length;
+      })
+      .map(escapeRegExp)
+      .join("|");
+
+    return new RegExp(`(${alternatives})`, "ig");
+  }, [searchTokens]);
 
   /*
    * Grouped once per search rather than re-filtered inside the render loop.
@@ -270,18 +287,16 @@ const ComponentsModal: FunctionComponent<ComponentProps> = (
     text: string,
     markClassName?: string,
   ): React.ReactNode => {
-    if (!hasSearchTerm) {
+    if (!searchHighlightPattern) {
       return text;
     }
 
-    const highlightedParts: Array<string> = text.split(
-      new RegExp(`(${escapeRegExp(search.trim())})`, "ig"),
-    );
+    const highlightedParts: Array<string> = text.split(searchHighlightPattern);
 
     return (
       <>
         {highlightedParts.map((part: string, index: number) => {
-          if (part.toLowerCase() === normalizedSearch) {
+          if (searchTokens.includes(part.toLowerCase())) {
             return (
               <mark
                 key={`${part}-${index}`}
@@ -424,6 +439,7 @@ const ComponentsModal: FunctionComponent<ComponentProps> = (
                       <button
                         key={category.name}
                         type="button"
+                        aria-pressed={isActive}
                         onClick={() => {
                           setSearch(category.name);
                           searchInputRef.current?.focus();
@@ -520,19 +536,23 @@ const ComponentsModal: FunctionComponent<ComponentProps> = (
                     {/* Component cards grid */}
                     <div className="grid grid-cols-1 gap-2">
                       {categoryComponents.map(
-                        (componentMetadata: ComponentMetadata, j: number) => {
+                        (componentMetadata: ComponentMetadata) => {
                           const isSelected: boolean =
-                            selectedComponentMetadata !== null &&
+                            selectedComponentMetadata !== undefined &&
                             selectedComponentMetadata.id ===
                               componentMetadata.id;
 
                           return (
-                            <div
-                              key={j}
+                            <button
+                              key={componentMetadata.id}
+                              type="button"
+                              aria-label={componentMetadata.title}
+                              aria-describedby={`workflow-component-description-${componentMetadata.id}`}
+                              aria-pressed={isSelected}
                               onClick={() => {
-                                setSelectedComponentMetadata(componentMetadata);
+                                setSelectedComponentId(componentMetadata.id);
                               }}
-                              className="cursor-pointer transition-all duration-150"
+                              className="w-full cursor-pointer text-left transition-all duration-150 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
                               style={{
                                 padding: "0.75rem",
                                 borderRadius: "10px",
@@ -618,6 +638,7 @@ const ComponentsModal: FunctionComponent<ComponentProps> = (
                                   )}
                                 </div>
                                 <p
+                                  id={`workflow-component-description-${componentMetadata.id}`}
                                   style={{
                                     fontSize: "0.75rem",
                                     color: isSelected
@@ -666,7 +687,7 @@ const ComponentsModal: FunctionComponent<ComponentProps> = (
                                   />
                                 </div>
                               )}
-                            </div>
+                            </button>
                           );
                         },
                       )}

package/UI/Components/Workflow/NodePlacement.ts

@@ -0,0 +1,57 @@
+import { ComponentType, NodeType } from "../../../Types/Workflow/Component";
+import { Node, XYPosition } from "reactflow";
+
+const DEFAULT_NODE_HEIGHT: number = 200;
+const NODE_GAP: number = 80;
+
+type GetNewWorkflowNodePositionFunction = (
+  nodes: Array<Node>,
+  componentType: ComponentType,
+) => XYPosition;
+
+/** Keep new steps clear of existing cards, including cards resized by content. */
+export const getNewWorkflowNodePosition: GetNewWorkflowNodePositionFunction = (
+  nodes: Array<Node>,
+  componentType: ComponentType,
+): XYPosition => {
+  if (componentType === ComponentType.Trigger) {
+    const trigger: Node | undefined = nodes.find((node: Node) => {
+      return (
+        node.data.nodeType === NodeType.PlaceholderNode ||
+        node.data.componentType === ComponentType.Trigger
+      );
+    });
+
+    if (trigger) {
+      return { ...trigger.position };
+    }
+
+    const firstNode: Node | undefined = [...nodes].sort((a: Node, b: Node) => {
+      return a.position.y - b.position.y;
+    })[0];
+
+    return firstNode
+      ? {
+          x: firstNode.position.x,
+          y: firstNode.position.y - DEFAULT_NODE_HEIGHT - NODE_GAP,
+        }
+      : { x: 100, y: 100 };
+  }
+
+  let lastNode: Node | undefined;
+  let lowestBottom: number = -Infinity;
+
+  for (const node of nodes) {
+    const bottom: number =
+      node.position.y + (node.height || DEFAULT_NODE_HEIGHT);
+
+    if (bottom > lowestBottom) {
+      lowestBottom = bottom;
+      lastNode = node;
+    }
+  }
+
+  return lastNode
+    ? { x: lastNode.position.x, y: lowestBottom + NODE_GAP }
+    : { x: 100, y: 100 };
+};