@oneuptime/common 12.0.19 → 12.0.21

package/UI/Components/Charts/ChartLibrary/LineChart/LineChart.tsx

@@ -40,6 +40,10 @@ import {
 import { cx } from "../Utils/Cx";
 import { getYAxisDomain } from "../Utils/GetYAxisDomain";
 import { hasOnlyOneValueForKey } from "../Utils/HasOnlyOneValueForKey";
+import {
+  PreparedTooltipEntries,
+  prepareTooltipEntries,
+} from "../Utils/TooltipEntries";
 import ChartCurve from "../../Types/ChartCurve";
 
 /*
@@ -51,6 +55,24 @@ import ChartCurve from "../../Types/ChartCurve";
  */
 const MAX_LABELED_TIME_REFERENCE_LINES: number = 6;
 
+/*
+ * recharts invokes child event handlers with varying shapes ((event) for
+ * plain SVG passthrough, (data, event) for adapted children) — find the
+ * DOM event wherever it is so propagation can be stopped reliably.
+ */
+function stopChartEventPropagation(...args: Array<unknown>): void {
+  for (const candidate of args) {
+    if (
+      candidate &&
+      typeof (candidate as { stopPropagation?: unknown }).stopPropagation ===
+        "function"
+    ) {
+      (candidate as { stopPropagation: () => void }).stopPropagation();
+      return;
+    }
+  }
+}
+
 //#region Legend
 
 interface LegendItemProps {
@@ -478,9 +500,15 @@ const ChartTooltip: ({
   valueFormatter,
 }: ChartTooltipProps): React.JSX.Element | null => {
   if (active && payload && payload.length) {
-    const legendPayload: PayloadItem[] = payload.filter((item: PayloadItem) => {
-      return item.type !== "none";
-    });
+    /*
+     * Highest value at the hovered timestamp first, capped — on a grouped
+     * chart (one series per host/pod), the spiking series must be the
+     * first line of the tooltip, not buried at its alphabetical position.
+     */
+    const {
+      entries: legendPayload,
+      overflowCount,
+    }: PreparedTooltipEntries<PayloadItem> = prepareTooltipEntries(payload);
     return (
       <div
         className={cx(
@@ -550,6 +578,11 @@ const ChartTooltip: ({
               );
             },
           )}
+          {overflowCount > 0 ? (
+            <p className={cx("pt-1 text-xs", "text-gray-400")}>
+              +{overflowCount} more series — highest values shown
+            </p>
+          ) : null}
         </div>
       </div>
     );
@@ -616,6 +649,26 @@ interface LineChartProps extends React.HTMLAttributes<HTMLDivElement> {
   formattedExemplarPoints?: Array<FormattedExemplarPoint> | undefined;
   onExemplarClick?: ((exemplar: ExemplarPoint) => void) | undefined;
   onTimeRangeSelect?: ((startTime: Date, endTime: Date) => void) | undefined;
+  /**
+   * Plain click on a time bucket (the plot background — dot/legend clicks
+   * and drag-selections never reach this). [bucketStart, bucketEnd) uses
+   * the same adjacent-row width derivation as drag-to-select. Fires only
+   * when no toggle-selection is active: a click that clears an active
+   * legend/dot selection keeps its existing meaning.
+   */
+  onBucketClick?:
+    | ((
+        bucketStart: Date,
+        bucketEnd: Date,
+        // The clicked row: one numeric entry per series + the axis keys.
+        valuesAtBucket: Record<string, number | string>,
+      ) => void)
+    | undefined;
+  /**
+   * Categories rendered as compare-to-previous-period ghosts: dashed,
+   * faded, no dots, not click-selectable — context, not data.
+   */
+  ghostCategories?: Array<string> | undefined;
 }
 
 const LineChart: React.ForwardRefExoticComponent<
@@ -655,6 +708,8 @@ const LineChart: React.ForwardRefExoticComponent<
       formattedTimeReferenceLines,
       formattedReferenceRegions,
       onTimeRangeSelect,
+      onBucketClick,
+      ghostCategories,
       ...other
     } = props;
     const CustomTooltip: React.ComponentType<TooltipProps> | undefined =
@@ -920,7 +975,12 @@ const LineChart: React.ForwardRefExoticComponent<
         <ResponsiveContainer>
           <RechartsLineChart
             data={data}
-            syncId={props.syncid?.toString() || ""}
+            /*
+             * Omitted, not "": recharts treats "" as a real sync
+             * channel, so every unsynced chart page-wide would
+             * accidentally sync with every other one.
+             */
+            {...(props.syncid ? { syncId: props.syncid.toString() } : {})}
             {...(hasOnTimeRangeSelect
               ? {
                   onMouseDown: handleRangeSelectMouseDown,
@@ -928,19 +988,51 @@ const LineChart: React.ForwardRefExoticComponent<
                   onMouseUp: handleRangeSelectMouseUp,
                 }
               : {})}
-            onClick={
-              hasOnValueChange && (activeLegend || activeDot)
-                ? () => {
-                    // Ignore the click that follows a drag-to-select.
-                    if (suppressNextClickRef.current) {
-                      return;
-                    }
-                    setActiveDot(undefined);
-                    setActiveLegend(undefined);
-                    onValueChange?.(null);
-                  }
-                : () => {} // do nothing
-            }
+            onClick={(chartState: RangeSelectionChartState) => {
+              // Ignore the click that follows a drag-to-select.
+              if (suppressNextClickRef.current) {
+                return;
+              }
+              /*
+               * A click while a legend/dot selection is active keeps its
+               * long-standing meaning — clear the selection — and never
+               * also pins a bucket.
+               */
+              if (hasOnValueChange && (activeLegend || activeDot)) {
+                setActiveDot(undefined);
+                setActiveLegend(undefined);
+                onValueChange?.(null);
+                return;
+              }
+              if (!onBucketClick) {
+                return;
+              }
+              const rowIndex: number | null =
+                getRowIndexFromChartState(chartState);
+              if (rowIndex === null) {
+                return;
+              }
+              const bucketStart: Date | null = getBucketDateAtIndex(rowIndex);
+              if (!bucketStart) {
+                return;
+              }
+              /*
+               * Cover the full bucket: width from adjacent row dates, the
+               * same derivation drag-to-select uses.
+               */
+              const adjacentDate: Date | null =
+                rowIndex > 0
+                  ? getBucketDateAtIndex(rowIndex - 1)
+                  : getBucketDateAtIndex(rowIndex + 1);
+              const bucketWidthInMs: number = adjacentDate
+                ? Math.abs(bucketStart.getTime() - adjacentDate.getTime())
+                : 0;
+              onBucketClick(
+                bucketStart,
+                new Date(bucketStart.getTime() + bucketWidthInMs),
+                (data[rowIndex] || {}) as Record<string, number | string>,
+              );
+            }}
             margin={{
               /*
                * Tick labels are 10px font with a translate(0, 6) — they
@@ -1126,85 +1218,95 @@ const LineChart: React.ForwardRefExoticComponent<
               ) as ChartColorValue;
               const isCustomColor: boolean = isHexColorValue(lineColor);
               const lineHex: string = getColorHex(lineColor);
+              const isGhost: boolean =
+                ghostCategories?.includes(category) || false;
               return (
                 <Line
                   className={cx(getColorClassName(lineColor, "stroke"))}
                   strokeOpacity={
-                    activeDot || (activeLegend && activeLegend !== category)
+                    (activeDot || (activeLegend && activeLegend !== category)
                       ? 0.3
-                      : 1
+                      : 1) * (isGhost ? 0.45 : 1)
+                  }
+                  activeDot={
+                    isGhost
+                      ? false
+                      : (props: any) => {
+                          const {
+                            cx: cxCoord,
+                            cy: cyCoord,
+                            stroke,
+                            strokeLinecap,
+                            strokeLinejoin,
+                            strokeWidth,
+                          } = props;
+                          return (
+                            <Dot
+                              className={cx(
+                                "stroke-white",
+                                onValueChange ? "cursor-pointer" : "",
+                                getColorClassName(lineColor, "fill"),
+                              )}
+                              cx={cxCoord}
+                              cy={cyCoord}
+                              r={5}
+                              fill={isCustomColor ? lineHex : ""}
+                              stroke={stroke}
+                              strokeLinecap={strokeLinecap}
+                              strokeLinejoin={strokeLinejoin}
+                              strokeWidth={strokeWidth}
+                              onClick={(_: any, event: any) => {
+                                return onDotClick(props, event);
+                              }}
+                            />
+                          );
+                        }
+                  }
+                  dot={
+                    isGhost
+                      ? false
+                      : (props: any) => {
+                          const {
+                            stroke,
+                            strokeLinecap,
+                            strokeLinejoin,
+                            strokeWidth,
+                            cx: cxCoord,
+                            cy: cyCoord,
+                            index,
+                          } = props;
+
+                          if (
+                            (hasOnlyOneValueForKey(data, category) &&
+                              !(
+                                activeDot ||
+                                (activeLegend && activeLegend !== category)
+                              )) ||
+                            (activeDot?.index === index &&
+                              activeDot?.dataKey === category)
+                          ) {
+                            return (
+                              <Dot
+                                key={index}
+                                cx={cxCoord}
+                                cy={cyCoord}
+                                r={5}
+                                stroke={stroke}
+                                fill={isCustomColor ? lineHex : ""}
+                                strokeLinecap={strokeLinecap}
+                                strokeLinejoin={strokeLinejoin}
+                                strokeWidth={strokeWidth}
+                                className={cx(
+                                  "stroke-white",
+                                  onValueChange ? "cursor-pointer" : "",
+                                  getColorClassName(lineColor, "fill"),
+                                )}
+                              />
+                            );
+                          }
+                          return <React.Fragment key={index}></React.Fragment>;
+                        }
                   }
-                  activeDot={(props: any) => {
-                    const {
-                      cx: cxCoord,
-                      cy: cyCoord,
-                      stroke,
-                      strokeLinecap,
-                      strokeLinejoin,
-                      strokeWidth,
-                    } = props;
-                    return (
-                      <Dot
-                        className={cx(
-                          "stroke-white",
-                          onValueChange ? "cursor-pointer" : "",
-                          getColorClassName(lineColor, "fill"),
-                        )}
-                        cx={cxCoord}
-                        cy={cyCoord}
-                        r={5}
-                        fill={isCustomColor ? lineHex : ""}
-                        stroke={stroke}
-                        strokeLinecap={strokeLinecap}
-                        strokeLinejoin={strokeLinejoin}
-                        strokeWidth={strokeWidth}
-                        onClick={(_: any, event: any) => {
-                          return onDotClick(props, event);
-                        }}
-                      />
-                    );
-                  }}
-                  dot={(props: any) => {
-                    const {
-                      stroke,
-                      strokeLinecap,
-                      strokeLinejoin,
-                      strokeWidth,
-                      cx: cxCoord,
-                      cy: cyCoord,
-                      index,
-                    } = props;
-
-                    if (
-                      (hasOnlyOneValueForKey(data, category) &&
-                        !(
-                          activeDot ||
-                          (activeLegend && activeLegend !== category)
-                        )) ||
-                      (activeDot?.index === index &&
-                        activeDot?.dataKey === category)
-                    ) {
-                      return (
-                        <Dot
-                          key={index}
-                          cx={cxCoord}
-                          cy={cyCoord}
-                          r={5}
-                          stroke={stroke}
-                          fill={isCustomColor ? lineHex : ""}
-                          strokeLinecap={strokeLinecap}
-                          strokeLinejoin={strokeLinejoin}
-                          strokeWidth={strokeWidth}
-                          className={cx(
-                            "stroke-white",
-                            onValueChange ? "cursor-pointer" : "",
-                            getColorClassName(lineColor, "fill"),
-                          )}
-                        />
-                      );
-                    }
-                    return <React.Fragment key={index}></React.Fragment>;
-                  }}
                   key={category}
                   name={category}
                   type={props.curve || ChartCurve.LINEAR}
@@ -1214,39 +1316,45 @@ const LineChart: React.ForwardRefExoticComponent<
                    * so the `stroke-*` Tailwind class on the Line applies.
                    */
                   stroke={isCustomColor ? lineHex : ""}
-                  strokeWidth={2}
+                  strokeWidth={isGhost ? 1.5 : 2}
                   strokeLinejoin="round"
                   strokeLinecap="round"
                   isAnimationActive={false}
                   connectNulls={connectNulls}
+                  {...(isGhost ? { strokeDasharray: "6 4" } : {})}
                 />
               );
             })}
             {/* hidden lines to increase clickable target area */}
             {onValueChange
-              ? categories.map((category: string) => {
-                  return (
-                    <Line
-                      className={cx("cursor-pointer")}
-                      strokeOpacity={0}
-                      key={category}
-                      name={category}
-                      type={props.curve || ChartCurve.LINEAR}
-                      dataKey={category}
-                      stroke="transparent"
-                      fill="transparent"
-                      legendType="none"
-                      tooltipType="none"
-                      strokeWidth={12}
-                      connectNulls={connectNulls}
-                      onClick={(props: any, event: any) => {
-                        event.stopPropagation();
-                        const { name } = props;
-                        onCategoryClick(name);
-                      }}
-                    />
-                  );
-                })
+              ? categories
+                  .filter((category: string) => {
+                    // Ghosts are context, not click-selectable series.
+                    return !(ghostCategories?.includes(category) || false);
+                  })
+                  .map((category: string) => {
+                    return (
+                      <Line
+                        className={cx("cursor-pointer")}
+                        strokeOpacity={0}
+                        key={category}
+                        name={category}
+                        type={props.curve || ChartCurve.LINEAR}
+                        dataKey={category}
+                        stroke="transparent"
+                        fill="transparent"
+                        legendType="none"
+                        tooltipType="none"
+                        strokeWidth={12}
+                        connectNulls={connectNulls}
+                        onClick={(props: any, event: any) => {
+                          event.stopPropagation();
+                          const { name } = props;
+                          onCategoryClick(name);
+                        }}
+                      />
+                    );
+                  })
               : null}
             {props.referenceLines?.map(
               (refLine: ChartReferenceLineProps, refIndex: number) => {
@@ -1288,7 +1396,9 @@ const LineChart: React.ForwardRefExoticComponent<
                     {...(region.original.onClick
                       ? {
                           style: { cursor: "pointer" as const },
-                          onClick: (): void => {
+                          onClick: (...args: Array<unknown>): void => {
+                            // Never let an annotation click also pin a bucket.
+                            stopChartEventPropagation(...args);
                             if (suppressNextClickRef.current) {
                               return;
                             }
@@ -1330,7 +1440,9 @@ const LineChart: React.ForwardRefExoticComponent<
                     {...(timeRefLine.original.onClick
                       ? {
                           style: { cursor: "pointer" as const },
-                          onClick: (): void => {
+                          onClick: (...args: Array<unknown>): void => {
+                            // Never let an annotation click also pin a bucket.
+                            stopChartEventPropagation(...args);
                             if (suppressNextClickRef.current) {
                               return;
                             }
@@ -1376,7 +1488,9 @@ const LineChart: React.ForwardRefExoticComponent<
                     stroke="var(--ou-chart-marker-ring, #ffffff)"
                     strokeWidth={2}
                     style={{ cursor: "pointer" }}
-                    onClick={() => {
+                    onClick={(...args: Array<unknown>) => {
+                      // Never let an exemplar click also pin a bucket.
+                      stopChartEventPropagation(...args);
                       // Ignore the click that follows a drag-to-select.
                       if (suppressNextClickRef.current) {
                         return;
@@ -1419,4 +1533,4 @@ const LineChart: React.ForwardRefExoticComponent<
 
 LineChart.displayName = "LineChart";
 
-export { LineChart, type LineChartEventProps, type TooltipProps };
+export { ChartTooltip, LineChart, type LineChartEventProps, type TooltipProps };

package/UI/Components/Charts/ChartLibrary/Utils/TooltipEntries.ts

@@ -0,0 +1,120 @@
+/*
+ * Shared ordering/capping for the hover tooltip of the Area / Line / Bar
+ * charts. With a grouped metric (say 20 hosts on one chart) the recharts
+ * payload arrives in series-render order — effectively alphabetical — so
+ * the series that is actually spiking at the hovered timestamp is buried
+ * mid-list. Sorting by the value AT THE HOVERED POINT puts the top series
+ * first, and capping the list keeps a high-cardinality chart's tooltip
+ * readable (the "+N more" line reports what was elided).
+ */
+
+/*
+ * The slice of a recharts tooltip payload item the ordering needs. The
+ * three chart implementations each declare their own structurally-equal
+ * PayloadItem, so this stays generic instead of importing any of them.
+ */
+export interface SortableTooltipItem {
+  category: string;
+  value: number;
+  type?: string | undefined;
+}
+
+export const DEFAULT_TOOLTIP_MAX_ENTRIES: number = 10;
+
+/*
+ * Series carrying this suffix are compare-to-previous-period ghosts.
+ * They still read out in the tooltip (that is the point of comparing)
+ * but sort after every live series so they can never displace a real
+ * reading under the entry cap.
+ */
+export const PREVIOUS_PERIOD_SERIES_SUFFIX: string = " (previous)";
+
+export interface PreparedTooltipEntries<T extends SortableTooltipItem> {
+  /** Entries to render, highest value first, capped at maxEntries. */
+  entries: Array<T>;
+  /** How many entries the cap hid (0 when everything fits). */
+  overflowCount: number;
+  /** Entry count after filtering, before capping. */
+  totalCount: number;
+}
+
+/*
+ * Natural compare so host names order like cpu0 < cpu2 < cpu10 instead of
+ * lexicographically — mirrors the series chips' name ordering.
+ */
+function compareCategoryNames(a: string, b: string): number {
+  return String(a).localeCompare(String(b), undefined, {
+    numeric: true,
+    sensitivity: "base",
+  });
+}
+
+export function prepareTooltipEntries<T extends SortableTooltipItem>(
+  payload: Array<T> | undefined | null,
+  maxEntries: number = DEFAULT_TOOLTIP_MAX_ENTRIES,
+): PreparedTooltipEntries<T> {
+  /*
+   * Two kinds of non-series entries are excluded:
+   *  - `type === "none"` (recharts tooltipType) — series explicitly
+   *    excluded from tooltips; every chart filtered these before this
+   *    module existed, so the filter lives here now to stay uniform.
+   *  - Array values — the anomaly band's range Area yields a
+   *    [low, high] tuple per point; it is a shaded region, not a series
+   *    reading, so it must neither render as a row nor count toward the
+   *    "+N more series" overflow.
+   */
+  const visibleEntries: Array<T> = (payload || []).filter((item: T) => {
+    return item.type !== "none" && !Array.isArray(item.value);
+  });
+
+  /*
+   * Sort tiers: live finite readings first (value desc), then
+   * previous-period ghosts (value desc), then non-finite entries
+   * (missing points) — lower tiers must never displace a real reading
+   * under the entry cap.
+   */
+  const getTier: (item: T) => number = (item: T): number => {
+    const hasFiniteValue: boolean =
+      typeof item.value === "number" && Number.isFinite(item.value);
+    if (!hasFiniteValue) {
+      return 2;
+    }
+    return String(item.category).endsWith(PREVIOUS_PERIOD_SERIES_SUFFIX)
+      ? 1
+      : 0;
+  };
+
+  const sortedEntries: Array<T> = visibleEntries
+    .slice()
+    .sort((a: T, b: T): number => {
+      const aTier: number = getTier(a);
+      const bTier: number = getTier(b);
+      if (aTier !== bTier) {
+        return aTier - bTier;
+      }
+      if (aTier === 2) {
+        return compareCategoryNames(a.category, b.category);
+      }
+      if (b.value !== a.value) {
+        return b.value - a.value;
+      }
+      return compareCategoryNames(a.category, b.category);
+    });
+
+  const totalCount: number = sortedEntries.length;
+
+  const cap: number =
+    Number.isInteger(maxEntries) && maxEntries > 0
+      ? maxEntries
+      : DEFAULT_TOOLTIP_MAX_ENTRIES;
+
+  if (totalCount <= cap) {
+    return { entries: sortedEntries, overflowCount: 0, totalCount };
+  }
+
+  return {
+    entries: sortedEntries.slice(0, cap),
+    overflowCount: totalCount - cap,
+    totalCount,
+  };
+}

package/UI/Components/Charts/Line/LineChart.tsx

@@ -62,6 +62,19 @@ export interface ComponentProps {
    * buckets calls back with the [start, end) of the selected time range.
    */
   onTimeRangeSelect?: ((startTime: Date, endTime: Date) => void) | undefined;
+  // Plain click on a bucket — see ChartLibrary onBucketClick.
+  onBucketClick?:
+    | ((
+        bucketStart: Date,
+        bucketEnd: Date,
+        valuesAtBucket: Record<string, number | string>,
+      ) => void)
+    | undefined;
+  /*
+   * Series rendered as compare-to-previous-period ghosts (dashed, faded,
+   * dotless). Names must exist in `data`.
+   */
+  ghostSeriesNames?: Array<string> | undefined;
   showLegend?: boolean | undefined;
   /*
    * Optional per-series color override (named palette keys or hex strings).
@@ -161,7 +174,14 @@ const LineChartElement: FunctionComponent<LineInternalProps> = (
 
   return (
     <div
-      className="relative flex flex-1"
+      /*
+       * `isolate` opens a stacking context so the recharts tooltip's
+       * z-index competes only inside this chart — without it the tooltip
+       * (zIndex 10, pinned to the chart's top edge) ties with the app
+       * header's sticky z-10 in the root context and paints over the
+       * navbar on half-scrolled charts.
+       */
+      className="relative isolate flex flex-1"
       style={props.heightInPx ? { height: `${props.heightInPx}px` } : undefined}
     >
       <LineChart
@@ -201,6 +221,8 @@ const LineChartElement: FunctionComponent<LineInternalProps> = (
         }
         onExemplarClick={props.onExemplarClick}
         onTimeRangeSelect={props.onTimeRangeSelect}
+        onBucketClick={props.onBucketClick}
+        ghostCategories={props.ghostSeriesNames}
       />
       {hasNoData && <NoDataMessage />}
     </div>

package/UI/Components/Detail/Detail.tsx

@@ -715,7 +715,24 @@ const Detail: DetailFunction = <T extends GenericObject>(
     }
 
     if (field.getElement) {
-      data = field.getElement(props.item);
+      /*
+       * getField runs inside Detail's own render, so a throw out of a field
+       * renderer unwinds the whole route to the app level ErrorBoundary and
+       * replaces the page with "Something went wrong". One misbehaving field
+       * must never cost the entire page: log the misconfiguration and keep
+       * whatever this field type already rendered - the entity badge, or ""
+       * so the placeholder below can stand in.
+       */
+      try {
+        data = field.getElement(props.item);
+      } catch (err) {
+        Logger.error(
+          "Detail: getElement for '" +
+            fieldKeyStr +
+            "' threw and was ignored. " +
+            (err instanceof Error ? err.message : String(err)),
+        );
+      }
     }
 
     let className: string = "sm:col-span-1";