@oneuptime/common 12.0.30 → 12.0.32

package/UI/Components/Table/TableHeader.tsx

@@ -6,6 +6,7 @@ import Columns from "./Types/Columns";
 import SortOrder, {
   SortOrderToAriaSortMap,
 } from "../../../Types/BaseDatabase/SortOrder";
+import { VoidFunction } from "../../../Types/FunctionTypes";
 import GenericObject from "../../../Types/GenericObject";
 import IconProp from "../../../Types/Icon/IconProp";
 import useTranslateValue from "../../Utils/Translation";
@@ -113,60 +114,75 @@ const TableHeader: TableHeaderFunction = <T extends GenericObject>(
                   ? "none"
                   : undefined;
 
+            const sortColumn: VoidFunction = (): void => {
+              if (!column.key || !canSort) {
+                return;
+              }
+
+              const sortOrder: SortOrder =
+                props.sortOrder === SortOrder.Ascending
+                  ? SortOrder.Descending
+                  : SortOrder.Ascending;
+
+              props.onSortChanged(column.key, sortOrder);
+            };
+
+            const contentClassName: string = `flex w-full px-6 py-3 ${
+              column.type === FieldType.Actions
+                ? "justify-end"
+                : "justify-start"
+            }`;
+
+            const headerContent: ReactElement = (
+              <>
+                {translateString(column.title) ?? column.title}
+                {canSort &&
+                  props.sortBy === column.key &&
+                  props.sortOrder === SortOrder.Ascending && (
+                    <Icon
+                      icon={IconProp.ChevronUp}
+                      thick={ThickProp.Thick}
+                      className="ml-2  p-1 flex-none rounded bg-gray-200 text-gray-500 group-hover:bg-gray-300 h-4 w-4"
+                    />
+                  )}
+                {canSort &&
+                  props.sortBy === column.key &&
+                  props.sortOrder === SortOrder.Descending && (
+                    <Icon
+                      icon={IconProp.ChevronDown}
+                      thick={ThickProp.Thick}
+                      className="ml-2 p-1 flex-none rounded bg-gray-200 text-gray-500 group-hover:bg-gray-300 h-4 w-4"
+                    />
+                  )}
+              </>
+            );
+
             return (
               <th
                 key={i}
                 scope="col"
                 aria-sort={ariaSort}
-                className={`px-6 py-3 text-left text-sm font-semibold text-gray-900 ${
-                  canSort ? "cursor-pointer" : ""
-                }`}
-                onClick={() => {
-                  if (!column.key) {
-                    return;
-                  }
-
-                  if (!canSort) {
-                    return;
-                  }
-
-                  const sortOrder: SortOrder =
-                    props.sortOrder === SortOrder.Ascending
-                      ? SortOrder.Descending
-                      : SortOrder.Ascending;
-
-                  const currentSortColumn: keyof T = column.key;
-
-                  props.onSortChanged(currentSortColumn, sortOrder);
-                }}
+                className="text-left text-sm font-semibold text-gray-900"
               >
-                <div
-                  className={`flex ${
-                    column.type === FieldType.Actions
-                      ? "justify-end"
-                      : "justify-start"
-                  }`}
-                >
-                  {translateString(column.title) ?? column.title}
-                  {canSort &&
-                    props.sortBy === column.key &&
-                    props.sortOrder === SortOrder.Ascending && (
-                      <Icon
-                        icon={IconProp.ChevronUp}
-                        thick={ThickProp.Thick}
-                        className="ml-2  p-1 flex-none rounded bg-gray-200 text-gray-500 group-hover:bg-gray-300 h-4 w-4"
-                      />
-                    )}
-                  {canSort &&
-                    props.sortBy === column.key &&
-                    props.sortOrder === SortOrder.Descending && (
-                      <Icon
-                        icon={IconProp.ChevronDown}
-                        thick={ThickProp.Thick}
-                        className="ml-2 p-1 flex-none rounded bg-gray-200 text-gray-500 group-hover:bg-gray-300 h-4 w-4"
-                      />
-                    )}
-                </div>
+                {/*
+                 * The sort handler used to sit on the <th> itself, which is
+                 * not focusable and does not answer Enter or Space - so
+                 * sorting any table in the product was mouse-only, even though
+                 * aria-sort was already announcing the column as sortable. The
+                 * padding moves onto the button so the clickable area is the
+                 * whole cell, exactly as before.
+                 */}
+                {canSort ? (
+                  <button
+                    type="button"
+                    onClick={sortColumn}
+                    className={`${contentClassName} cursor-pointer text-left font-semibold text-gray-900 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-indigo-500`}
+                  >
+                    {headerContent}
+                  </button>
+                ) : (
+                  <div className={contentClassName}>{headerContent}</div>
+                )}
               </th>
             );
           })}

package/UI/Components/Table/TableRow.tsx

@@ -95,10 +95,20 @@ const TableRow: TableRowFunction = <T extends GenericObject>(
     };
   }, []);
 
+  /*
+   * The local isMobile state above starts false and is only corrected inside
+   * an effect, i.e. after the first paint. TableBody already knows which
+   * layout it is mounting and says so explicitly, so prefer what it passed:
+   * without this, a mobile card renders its hideOnMobile columns for one frame
+   * and then drops them, which is a visible jump on exactly the narrow screens
+   * the flag exists to protect.
+   */
+  const isMobileView: boolean = props.isMobile ?? isMobile;
+
   // The columns this row will actually put on screen.
   const renderedColumns: Array<Column<T>> = (props.columns || []).filter(
     (column: Column<T>) => {
-      return !(column.hideOnMobile && isMobile);
+      return !(column.hideOnMobile && isMobileView);
     },
   );
 
@@ -175,7 +185,7 @@ const TableRow: TableRowFunction = <T extends GenericObject>(
             )}
 
             <div className="space-y-3">
-              {props.columns.map((column: Column<T>, i: number) => {
+              {renderedColumns.map((column: Column<T>, i: number) => {
                 if (column.type === FieldType.Actions) {
                   return (
                     <div key={i} className="flex flex-wrap gap-2">
@@ -520,7 +530,7 @@ const TableRow: TableRowFunction = <T extends GenericObject>(
                           }
 
                           // Hide button on mobile if hideOnMobile is true
-                          if (button.hideOnMobile && isMobile) {
+                          if (button.hideOnMobile && isMobileView) {
                             return <div key={i}></div>;
                           }
 

package/UI/Styles/Theme.css

@@ -24,6 +24,7 @@
   --ou-chart-cursor: #d1d5db;
   --ou-chart-track: #eef2f7;
   --ou-chart-marker-ring: #ffffff;
+  --ou-chart-focus-ring: #4f46e5;
   --ou-flow-mask: rgb(241 245 249 / 70%);
   --ou-accent-soft: #eef2ff;
   --ou-accent-muted: #e0e7ff;
@@ -73,6 +74,7 @@ html.dark {
   --ou-chart-cursor: #64748b;
   --ou-chart-track: #334155;
   --ou-chart-marker-ring: #172033;
+  --ou-chart-focus-ring: #818cf8;
   --ou-flow-mask: rgb(15 23 42 / 72%);
   --ou-accent-soft: #1e1b4b;
   --ou-accent-muted: #312e81;
@@ -1350,6 +1352,42 @@ html.dark ::backdrop {
   background-color: var(--ou-background-primary);
 }
 
+/*
+ * Chart focus rings. Both themes -- the black box this replaces was never a
+ * dark-mode-only problem.
+ *
+ * recharts leaves its accessibility layer on by default, which puts
+ * tabindex="0" on the root <svg> of every chart. Chrome's SVG user-agent
+ * stylesheet rings a focused <svg> on plain :focus -- not on :focus-visible,
+ * the way it treats focusable HTML -- so simply pressing the mouse inside a
+ * chart paints a hard black rectangle around the entire plot. Dragging out a
+ * zoom range on the Logs and Traces volume charts lands focus there every
+ * time, which is how https://github.com/OneUptime/oneuptime/issues/3528 was
+ * reported: a black box around the graph, over the data, for the rest of the
+ * session.
+ *
+ * Dropping the ring and stopping there would take a real affordance with it:
+ * arrow keys walk the tooltip across a focused chart. So it is drawn again
+ * for :focus-visible only, in the app's own accent, which is what a reader
+ * who arrived by keyboard gets and a reader who arrived by mouse does not.
+ *
+ * The descendant half covers the focusable <g> elements the annotation layer
+ * draws inside the plot: event chips and highlighted windows are clickable by
+ * design, so a pointer lands on them routinely, and each one was getting
+ * boxed the same way.
+ */
+.recharts-surface:focus,
+.recharts-surface [tabindex]:focus {
+  outline: none;
+}
+
+.recharts-surface:focus-visible,
+.recharts-surface [tabindex]:focus-visible {
+  outline: 2px solid var(--ou-chart-focus-ring);
+  outline-offset: 2px;
+  border-radius: 6px;
+}
+
 /*
  * Motion. Tailwind here is the Play-CDN runtime configured inline per app, so
  * a new animate-* utility name would silently generate nothing unless its

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,
+    };
+  }
+}