@oneuptime/common 14.0.8 → 14.0.10

package/UI/Components/LogsViewer/components/LogsAnalyticsView.tsx

@@ -4,6 +4,7 @@ import React, {
   useCallback,
   useEffect,
   useMemo,
+  useRef,
   useState,
 } from "react";
 import {
@@ -16,6 +17,7 @@ import {
   CartesianGrid,
   AreaChart,
   Area,
+  ReferenceArea,
 } from "recharts";
 import RangeStartAndEndDateTime, {
   RangeStartAndEndDateTimeUtil,
@@ -44,6 +46,15 @@ import {
   getAnalyticsSeriesLabel,
   LogsEntityResolutionRequest,
 } from "../LogsEntityNames";
+import useHistogramRangeSelection, {
+  HistogramRangeSelectionState,
+} from "../../Charts/Utils/useHistogramRangeSelection";
+import {
+  ChartTimeRangeZoomContextValue,
+  ChartTimeRangeZoomHandlers,
+  resolveChartTimeRangeZoom,
+  useChartTimeRangeZoom,
+} from "../../Charts/TimeRangeZoom/TimeRangeZoomContext";
 
 type AnalyticsChartType = "timeseries" | "toplist" | "table";
 type AnalyticsAggregation = "count" | "unique";
@@ -74,8 +85,21 @@ export interface LogsAnalyticsViewProps {
   sessionIds?: Array<string> | undefined;
   appliedFacetFilters: Map<string, Set<string>>;
   logAttributes: Array<string>;
+  /*
+   * Drag-to-zoom for the timeseries chart. Without these the chart zooms
+   * whatever the enclosing viewer offers (the logs viewer hands it the same
+   * zoom its volume histogram uses), so a drag here retimes the viewer.
+   */
+  onTimeRangeSelect?: ((startTime: Date, endTime: Date) => void) | undefined;
+  // Set only while there is a zoom to undo: it holds single clicks open.
+  onTimeRangeReset?: (() => void) | undefined;
 }
 
+export const LOGS_ANALYTICS_TIMESERIES_TEST_ID: string =
+  "logs-analytics-timeseries";
+export const LOGS_ANALYTICS_ZOOM_HINT_TEST_ID: string =
+  "logs-analytics-zoom-hint";
+
 const CHART_COLORS: Array<string> = [
   "#6366f1", // indigo
   "#ec4899", // pink
@@ -330,6 +354,15 @@ const LogsAnalyticsView: FunctionComponent<LogsAnalyticsViewProps> = (
   const [timeseriesData, setTimeseriesData] = useState<
     Array<AnalyticsTimeseriesRow>
   >([]);
+  /*
+   * How much time one timeseries bucket covers, as the request that
+   * produced the rows on screen bucketed them. Kept next to the rows so a
+   * refetch in flight cannot pair these bars with another window's width;
+   * it is what lets a click on one bar zoom into that bar.
+   */
+  const [timeseriesBucketMs, setTimeseriesBucketMs] = useState<
+    number | undefined
+  >(undefined);
   const [topListData, setTopListData] = useState<Array<AnalyticsTopItem>>([]);
   const [tableData, setTableData] = useState<Array<AnalyticsTableRow>>([]);
   /*
@@ -341,6 +374,15 @@ const LogsAnalyticsView: FunctionComponent<LogsAnalyticsViewProps> = (
     [],
   );
 
+  /*
+   * Staleness guard. A zoom, its reset and the picker can change the window
+   * faster than an analytics request returns, and a wide window answers
+   * slower than a narrow one: without a sequence check the older response
+   * lands last and paints the window the reader just left under the one
+   * the picker, the list and the histogram show.
+   */
+  const requestSequenceRef: React.MutableRefObject<number> = useRef<number>(0);
+
   const allDimensionOptions: Array<{ value: string; label: string }> =
     useMemo(() => {
       const attributeOptions: Array<{ value: string; label: string }> =
@@ -359,6 +401,11 @@ const LogsAnalyticsView: FunctionComponent<LogsAnalyticsViewProps> = (
 
   const fetchAnalytics: () => Promise<void> =
     useCallback(async (): Promise<void> => {
+      const requestSequence: number = ++requestSequenceRef.current;
+      const isStale: () => boolean = (): boolean => {
+        return requestSequence !== requestSequenceRef.current;
+      };
+
       try {
         setIsLoading(true);
 
@@ -367,13 +414,17 @@ const LogsAnalyticsView: FunctionComponent<LogsAnalyticsViewProps> = (
 
         const startTime: Date = dateRange.startValue;
         const endTime: Date = dateRange.endValue;
+        const bucketSizeInMinutes: number = computeDefaultBucketSize(
+          startTime,
+          endTime,
+        );
 
         const requestData: JSONObject = {
           chartType,
           aggregation,
           startTime: startTime.toISOString(),
           endTime: endTime.toISOString(),
-          bucketSizeInMinutes: computeDefaultBucketSize(startTime, endTime),
+          bucketSizeInMinutes: bucketSizeInMinutes,
         } as JSONObject;
 
         const requestGroupBy: Array<string> =
@@ -473,24 +524,42 @@ const LogsAnalyticsView: FunctionComponent<LogsAnalyticsViewProps> = (
           throw response;
         }
 
+        /*
+         * Superseded: drop it whole, labels included - a stale group-by
+         * would relabel the newer rows.
+         */
+        if (isStale()) {
+          return;
+        }
+
         const data: unknown = response.data["data"] || [];
 
         setResultGroupByFields(requestGroupBy);
 
         if (chartType === "timeseries") {
           setTimeseriesData(data as Array<AnalyticsTimeseriesRow>);
+          setTimeseriesBucketMs(bucketSizeInMinutes * 60 * 1000);
         } else if (chartType === "toplist") {
           setTopListData(data as Array<AnalyticsTopItem>);
         } else {
           setTableData(data as Array<AnalyticsTableRow>);
         }
       } catch {
+        // A late failure of a superseded request must not blank newer data.
+        if (isStale()) {
+          return;
+        }
+
         // Silently degrade
         setTimeseriesData([]);
+        setTimeseriesBucketMs(undefined);
         setTopListData([]);
         setTableData([]);
       } finally {
-        setIsLoading(false);
+        // Only the latest request may take the loader down.
+        if (!isStale()) {
+          setIsLoading(false);
+        }
       }
     }, [
       chartType,
@@ -537,6 +606,43 @@ const LogsAnalyticsView: FunctionComponent<LogsAnalyticsViewProps> = (
     return pivotTimeseriesData(timeseriesData, entityNameMap);
   }, [timeseriesData, entityNameMap]);
 
+  /*
+   * Only the timeseries has a time axis: a window dragged across a top
+   * list or a table would not be a time range. Handlers the host passes win
+   * over the zoom the enclosing viewer offers.
+   */
+  const pageZoom: ChartTimeRangeZoomContextValue | null =
+    useChartTimeRangeZoom();
+  const zoomHandlers: ChartTimeRangeZoomHandlers = resolveChartTimeRangeZoom({
+    onTimeRangeSelect: props.onTimeRangeSelect,
+    onTimeRangeReset: props.onTimeRangeReset,
+    isTimeAxis: chartType === "timeseries",
+    pageZoom: pageZoom,
+  });
+
+  /*
+   * The same click-or-drag selection the volume histogram above uses, over
+   * the same bucket-start labels: a drag zooms into every bucket it covered,
+   * a click into one bucket, and a double-click zooms back out.
+   */
+  const selection: HistogramRangeSelectionState = useHistogramRangeSelection({
+    onTimeRangeSelect: zoomHandlers.onTimeRangeSelect,
+    onZoomOut: zoomHandlers.onTimeRangeReset,
+    bucketIntervalMs: timeseriesBucketMs,
+  });
+
+  const canZoom: boolean = Boolean(zoomHandlers.onTimeRangeSelect);
+
+  /*
+   * The crosshair goes on the chart root itself: recharts sets an inline
+   * `cursor: default` on the .recharts-wrapper that fills the plot, so a
+   * cursor on any element around it never shows over the chart. Left off
+   * entirely when nothing can be dragged, so recharts keeps its default.
+   */
+  const chartRootCursorProps: { style?: React.CSSProperties } = canZoom
+    ? { style: { cursor: "crosshair" } }
+    : {};
+
   const renderSelectControl: (
     label: string,
     value: string | number,
@@ -682,9 +788,29 @@ const LogsAnalyticsView: FunctionComponent<LogsAnalyticsViewProps> = (
     );
   };
 
+  const renderZoomHint: () => ReactElement | null = (): ReactElement | null => {
+    if (!canZoom) {
+      return null;
+    }
+
+    return (
+      <span
+        className="ml-auto shrink-0 whitespace-nowrap text-[10px] text-gray-400"
+        data-testid={LOGS_ANALYTICS_ZOOM_HINT_TEST_ID}
+      >
+        {selection.canClickToZoom ? "Click or drag to zoom" : "Drag to zoom"}
+        {zoomHandlers.onTimeRangeReset ? " · double-click to reset" : ""}
+      </span>
+    );
+  };
+
   const renderLegend: () => ReactElement = (): ReactElement => {
     if (seriesKeys.length <= 1) {
-      return <></>;
+      return canZoom ? (
+        <div className="flex items-center px-5 pb-2">{renderZoomHint()}</div>
+      ) : (
+        <></>
+      );
     }
 
     return (
@@ -704,13 +830,58 @@ const LogsAnalyticsView: FunctionComponent<LogsAnalyticsViewProps> = (
             </div>
           );
         })}
+        {renderZoomHint()}
       </div>
     );
   };
 
+  /*
+   * The band a drag paints across the buckets it covers, in the same colours
+   * the volume histogram uses.
+   */
+  const renderSelectionBand: () => ReactElement | null =
+    (): ReactElement | null => {
+      if (!selection.selectionStart || !selection.selectionEnd) {
+        return null;
+      }
+
+      return (
+        <ReferenceArea
+          x1={selection.selectionStart}
+          x2={selection.selectionEnd}
+          fill="rgba(99,102,241,0.12)"
+          stroke="rgba(99,102,241,0.5)"
+          strokeWidth={1}
+          radius={2}
+        />
+      );
+    };
+
+  /*
+   * The tooltip is pinned shut for the length of a drag: it would otherwise
+   * sit over the very buckets the reader is picking. Dropping the prop hands
+   * control back to recharts once the drag ends.
+   */
+  const tooltipDragProps: { active?: boolean } = selection.isDragging
+    ? { active: false }
+    : {};
+
   const renderTimeseries: () => ReactElement = (): ReactElement => {
     if (pivotedData.length === 0) {
-      return renderEmptyState();
+      /*
+       * A zoom into a quiet stretch lands here, with no chart left to
+       * double-click; the empty area takes the double-click instead, so the
+       * way back is where the reader's pointer already is. select-none: a
+       * double-click on the message would otherwise also select a word.
+       */
+      return (
+        <div
+          className="select-none"
+          onDoubleClick={zoomHandlers.onTimeRangeReset}
+        >
+          {renderEmptyState()}
+        </div>
+      );
     }
 
     const useAreaChart: boolean = seriesKeys.length === 1;
@@ -718,12 +889,25 @@ const LogsAnalyticsView: FunctionComponent<LogsAnalyticsViewProps> = (
     return (
       <div className="px-2 pt-4 pb-2">
         {renderLegend()}
-        <div style={{ height: 320 }}>
+        <div
+          className="select-none"
+          style={{
+            height: 320,
+            cursor: canZoom ? "crosshair" : "default",
+          }}
+          data-testid={LOGS_ANALYTICS_TIMESERIES_TEST_ID}
+          onDoubleClick={selection.onDoubleClick}
+        >
           <ResponsiveContainer width="100%" height="100%">
             {useAreaChart ? (
               <AreaChart
                 data={pivotedData}
                 margin={{ top: 8, right: 20, bottom: 4, left: 0 }}
+                onMouseDown={selection.onMouseDown}
+                {...selection.chartRootProps}
+                onMouseMove={selection.onMouseMove}
+                onMouseUp={selection.onMouseUp}
+                {...chartRootCursorProps}
               >
                 <defs>
                   <linearGradient
@@ -781,6 +965,7 @@ const LogsAnalyticsView: FunctionComponent<LogsAnalyticsViewProps> = (
                     strokeWidth: 1,
                     strokeDasharray: "4 4",
                   }}
+                  {...tooltipDragProps}
                 />
                 <Area
                   dataKey={seriesKeys[0] || "count"}
@@ -796,6 +981,7 @@ const LogsAnalyticsView: FunctionComponent<LogsAnalyticsViewProps> = (
                   }}
                   isAnimationActive={false}
                 />
+                {renderSelectionBand()}
               </AreaChart>
             ) : (
               <BarChart
@@ -803,6 +989,11 @@ const LogsAnalyticsView: FunctionComponent<LogsAnalyticsViewProps> = (
                 margin={{ top: 8, right: 20, bottom: 4, left: 0 }}
                 barCategoryGap="20%"
                 barGap={0}
+                onMouseDown={selection.onMouseDown}
+                {...selection.chartRootProps}
+                onMouseMove={selection.onMouseMove}
+                onMouseUp={selection.onMouseUp}
+                {...chartRootCursorProps}
               >
                 <CartesianGrid
                   strokeDasharray="none"
@@ -836,6 +1027,7 @@ const LogsAnalyticsView: FunctionComponent<LogsAnalyticsViewProps> = (
                 <Tooltip
                   content={<AnalyticsTooltip seriesLabels={seriesLabels} />}
                   cursor={{ fill: "rgba(99,102,241,0.04)" }}
+                  {...tooltipDragProps}
                 />
                 {seriesKeys.map((key: string, index: number) => {
                   return (
@@ -854,6 +1046,7 @@ const LogsAnalyticsView: FunctionComponent<LogsAnalyticsViewProps> = (
                     />
                   );
                 })}
+                {renderSelectionBand()}
               </BarChart>
             )}
           </ResponsiveContainer>
@@ -1069,8 +1262,18 @@ const LogsAnalyticsView: FunctionComponent<LogsAnalyticsViewProps> = (
 
   const renderChart: () => ReactElement = (): ReactElement => {
     if (isLoading) {
+      /*
+       * A zoom refetches, and until the new window lands the loader stands
+       * where the timeseries was - just when a reader double-clicks to undo
+       * the zoom (issue #4116). It takes that double-click as the chart
+       * does, even when the chart replaces it mid-double-click (see
+       * placeholderProps).
+       */
       return (
-        <div className="flex h-72 items-center justify-center">
+        <div
+          className="flex h-72 select-none items-center justify-center"
+          {...(chartType === "timeseries" ? selection.placeholderProps : {})}
+        >
           <ComponentLoader />
         </div>
       );

package/UI/Components/LogsViewer/components/LogsHistogram.tsx

@@ -95,6 +95,15 @@ const LogsHistogram: FunctionComponent<LogsHistogramProps> = (
     bucketIntervalMs: props.bucketIntervalMs,
   });
 
+  /*
+   * The crosshair goes on the chart root itself: recharts sets an inline
+   * `cursor: default` on the .recharts-wrapper that fills the plot, so the
+   * cursor on the box around it never shows over the bars. Left off
+   * entirely when nothing can be dragged, so recharts keeps its default.
+   */
+  const chartRootCursorProps: { style?: React.CSSProperties } =
+    props.onTimeRangeSelect ? { style: { cursor: "crosshair" } } : {};
+
   const pivotedData: Array<PivotedRow> = useMemo(() => {
     return pivotBuckets(props.buckets);
   }, [props.buckets]);
@@ -111,15 +120,32 @@ const LogsHistogram: FunctionComponent<LogsHistogramProps> = (
     });
   }, [props.buckets]);
 
-  if (props.isLoading && pivotedData.length === 0) {
+  /*
+   * The loader and the empty box below stand where the bars were, and take
+   * the double-click as the bars do: right after a zoom, while its window
+   * loads or when it holds nothing, is exactly when a reader double-clicks
+   * to go back (issue #4116), and the bars can replace them in the middle
+   * of that double-click (see placeholderProps). select-none: a
+   * double-click on the message would otherwise also select a word. A
+   * zoomed chart keeps its card while it loads (below), so the way back
+   * stays in the same place.
+   */
+  if (props.isLoading && pivotedData.length === 0 && !props.onZoomOut) {
     return (
-      <div className="flex h-32 items-center justify-center rounded-lg border border-gray-200 bg-white">
+      <div
+        className="flex h-32 select-none items-center justify-center rounded-lg border border-gray-200 bg-white"
+        {...selection.placeholderProps}
+      >
         <ComponentLoader />
       </div>
     );
   }
 
-  if (pivotedData.length === 0) {
+  /*
+   * A window with no logs has nothing to chart - unless a zoom brought the
+   * reader there: then the card stays, and its empty box is the way back.
+   */
+  if (pivotedData.length === 0 && !props.onZoomOut) {
     return <></>;
   }
 
@@ -129,7 +155,7 @@ const LogsHistogram: FunctionComponent<LogsHistogramProps> = (
       <div className="flex items-center justify-between border-b border-gray-100 px-4 py-2">
         <div className="flex items-center gap-2">
           <span className="text-xs font-medium text-gray-500">Log Volume</span>
-          {props.onTimeRangeSelect && (
+          {props.onTimeRangeSelect && pivotedData.length > 0 && (
             <span className="text-[10px] text-gray-300">
               {selection.canClickToZoom
                 ? "Click or drag to zoom"
@@ -138,7 +164,7 @@ const LogsHistogram: FunctionComponent<LogsHistogramProps> = (
           )}
           {props.onZoomOut && (
             <span className="text-[10px] text-gray-300">
-              Double-click to zoom out
+              Double-click to reset
             </span>
           )}
         </div>
@@ -158,87 +184,104 @@ const LogsHistogram: FunctionComponent<LogsHistogramProps> = (
         </div>
       </div>
 
+      {pivotedData.length === 0 && (
+        <div
+          className="flex h-[120px] select-none items-center justify-center text-xs text-gray-400"
+          {...selection.placeholderProps}
+        >
+          {props.isLoading ? (
+            <ComponentLoader />
+          ) : (
+            "No logs in the selected range"
+          )}
+        </div>
+      )}
+
       {/* Chart */}
-      <div
-        className="select-none px-2 pb-1 pt-2"
-        style={{
-          height: 120,
-          cursor: props.onTimeRangeSelect ? "crosshair" : "default",
-        }}
-        onDoubleClick={selection.onDoubleClick}
-      >
-        <ResponsiveContainer width="100%" height="100%">
-          <BarChart
-            data={pivotedData}
-            margin={{ top: 4, right: 8, bottom: 0, left: -4 }}
-            onMouseDown={selection.onMouseDown}
-            onMouseMove={selection.onMouseMove}
-            onMouseUp={selection.onMouseUp}
-            barCategoryGap="15%"
-            barGap={0}
-          >
-            <XAxis
-              dataKey="time"
-              tickFormatter={formatTickTime}
-              tick={{
-                fontSize: 10,
-                fill: "var(--ou-chart-tick, #9ca3af)",
-              }}
-              axisLine={{ stroke: "var(--ou-chart-grid, #e5e7eb)" }}
-              tickLine={false}
-              minTickGap={40}
-              dy={4}
-              interval="preserveStartEnd"
-            />
-            <YAxis
-              tick={{
-                fontSize: 10,
-                fill: "var(--ou-chart-tick, #9ca3af)",
-              }}
-              axisLine={false}
-              tickLine={false}
-              width={48}
-              allowDecimals={false}
-              tickFormatter={formatYAxisTick}
-            />
-            {/*
-             * The tooltip is pinned shut for the length of a drag: it would
-             * otherwise sit over the very bars the reader is trying to read
-             * while they pick the range. Dropping the prop hands control back
-             * to recharts once the drag ends.
-             */}
-            <Tooltip
-              content={<HistogramTooltip />}
-              cursor={{ fill: "rgba(99,102,241,0.06)" }}
-              {...(selection.isDragging ? { active: false } : {})}
-            />
-            {activeSeverities.map((severity: string, index: number) => {
-              const isLast: boolean = index === activeSeverities.length - 1;
-              return (
-                <Bar
-                  key={severity}
-                  dataKey={severity}
-                  stackId="severity"
-                  fill={getSeverityColor(severity).fill}
-                  radius={isLast ? [1.5, 1.5, 0, 0] : [0, 0, 0, 0]}
-                  isAnimationActive={false}
-                  maxBarSize={24}
-                />
-              );
-            })}
-            {selection.selectionStart && selection.selectionEnd && (
-              <ReferenceArea
-                x1={selection.selectionStart}
-                x2={selection.selectionEnd}
-                fill="rgba(99,102,241,0.12)"
-                stroke="rgba(99,102,241,0.5)"
-                strokeWidth={1}
-                radius={2}
+      {pivotedData.length > 0 && (
+        <div
+          className="select-none px-2 pb-1 pt-2"
+          style={{
+            height: 120,
+            cursor: props.onTimeRangeSelect ? "crosshair" : "default",
+          }}
+          onDoubleClick={selection.onDoubleClick}
+        >
+          <ResponsiveContainer width="100%" height="100%">
+            <BarChart
+              data={pivotedData}
+              margin={{ top: 4, right: 8, bottom: 0, left: -4 }}
+              onMouseDown={selection.onMouseDown}
+              {...selection.chartRootProps}
+              onMouseMove={selection.onMouseMove}
+              onMouseUp={selection.onMouseUp}
+              barCategoryGap="15%"
+              barGap={0}
+              {...chartRootCursorProps}
+            >
+              <XAxis
+                dataKey="time"
+                tickFormatter={formatTickTime}
+                tick={{
+                  fontSize: 10,
+                  fill: "var(--ou-chart-tick, #9ca3af)",
+                }}
+                axisLine={{ stroke: "var(--ou-chart-grid, #e5e7eb)" }}
+                tickLine={false}
+                minTickGap={40}
+                dy={4}
+                interval="preserveStartEnd"
               />
-            )}
-          </BarChart>
-        </ResponsiveContainer>
-      </div>
+              <YAxis
+                tick={{
+                  fontSize: 10,
+                  fill: "var(--ou-chart-tick, #9ca3af)",
+                }}
+                axisLine={false}
+                tickLine={false}
+                width={48}
+                allowDecimals={false}
+                tickFormatter={formatYAxisTick}
+              />
+              {/*
+               * The tooltip is pinned shut for the length of a drag: it would
+               * otherwise sit over the very bars the reader is trying to read
+               * while they pick the range. Dropping the prop hands control back
+               * to recharts once the drag ends.
+               */}
+              <Tooltip
+                content={<HistogramTooltip />}
+                cursor={{ fill: "rgba(99,102,241,0.06)" }}
+                {...(selection.isDragging ? { active: false } : {})}
+              />
+              {activeSeverities.map((severity: string, index: number) => {
+                const isLast: boolean = index === activeSeverities.length - 1;
+                return (
+                  <Bar
+                    key={severity}
+                    dataKey={severity}
+                    stackId="severity"
+                    fill={getSeverityColor(severity).fill}
+                    radius={isLast ? [1.5, 1.5, 0, 0] : [0, 0, 0, 0]}
+                    isAnimationActive={false}
+                    maxBarSize={24}
+                  />
+                );
+              })}
+              {selection.selectionStart && selection.selectionEnd && (
+                <ReferenceArea
+                  x1={selection.selectionStart}
+                  x2={selection.selectionEnd}
+                  fill="rgba(99,102,241,0.12)"
+                  stroke="rgba(99,102,241,0.5)"
+                  strokeWidth={1}
+                  radius={2}
+                />
+              )}
+            </BarChart>
+          </ResponsiveContainer>
+        </div>
+      )}
     </div>
   );
 };

package/UI/Components/LogsViewer/components/LogsViewerToolbar.tsx

@@ -25,6 +25,8 @@ export interface LogsViewerToolbarProps {
   liveOptions?: LiveLogsOptions;
   timeRange?: RangeStartAndEndDateTime;
   onTimeRangeChange?: (value: RangeStartAndEndDateTime) => void;
+  // Whether the picker offers "Reset zoom"; see LogTimeRangePicker.
+  showResetZoom?: boolean | undefined;
   onCreateSavedView?: (() => void) | undefined;
   savedViews?: Array<LogsSavedViewOption> | undefined;
   selectedSavedViewId?: string | null | undefined;
@@ -355,6 +357,7 @@ const LogsViewerToolbar: FunctionComponent<LogsViewerToolbarProps> = (
           <LogTimeRangePicker
             value={props.timeRange}
             onChange={props.onTimeRangeChange}
+            showResetZoom={props.showResetZoom}
           />
         )}
 

package/UI/Components/ModelTable/BaseModelTable.tsx

@@ -25,7 +25,9 @@ import PermissionGate, {
 } from "../../Utils/PermissionGate";
 import ProjectUtil from "../../Utils/Project";
 import User from "../../Utils/User";
-import ActionButtonSchema from "../ActionButton/ActionButtonSchema";
+import ActionButtonSchema, {
+  ActionButtonPlacement,
+} from "../ActionButton/ActionButtonSchema";
 import {
   BulkActionButtonSchema,
   BulkActionFailed,
@@ -2830,6 +2832,8 @@ const BaseModelTable: <TBaseModel extends BaseModel | AnalyticsBaseModel>(
         title: tx("Show ID"),
         buttonStyleType: ButtonStyleType.OUTLINE,
         hideOnMobile: true,
+        // A utility every row carries - it belongs in the ⋯ menu, not on the row.
+        placement: ActionButtonPlacement.MoreMenu,
         onClick: async (
           item: TBaseModel,
           onCompleteAction: VoidFunction,
@@ -2863,6 +2867,13 @@ const BaseModelTable: <TBaseModel extends BaseModel | AnalyticsBaseModel>(
             ? tx(props.viewButtonText)
             : `${tx("View")} ${tx(props.singularName || model.singularName || "")}`,
           buttonStyleType: ButtonStyleType.NORMAL,
+          /*
+           * Opening the record is what a row is for, so View is the row's one
+           * button and Edit, Delete and the rest go in the ⋯ menu beside it.
+           * Custom actions are listed ahead of View, so a table that wants one
+           * of its own on the row can still mark it Primary.
+           */
+          placement: ActionButtonPlacement.Primary,
           onClick: async (
             item: TBaseModel,
             onCompleteAction: VoidFunction,