@oneuptime/common 14.0.7 → 14.0.9

package/UI/Components/LogsViewer/LogsViewer.tsx

@@ -68,9 +68,10 @@ import ProjectUtil from "../../Utils/Project";
 import TelemetryServiceUtil from "../../Utils/TelemetryService";
 import ObjectID from "../../../Types/ObjectID";
 import OneUptimeDate from "../../../Types/Date";
-import useHistogramZoom, {
-  HistogramZoomState,
-} from "../Charts/Utils/useHistogramZoom";
+import useViewerTimeRangeZoom, {
+  ViewerTimeRangeZoom,
+} from "../TelemetryViewer/useViewerTimeRangeZoom";
+import { TimeRangeZoomProvider } from "../Charts/TimeRangeZoom/TimeRangeZoomContext";
 import useTelemetryEntityNames from "../../Utils/Telemetry/UseTelemetryEntityNames";
 import { TelemetryEntityNameMap } from "../../Utils/Telemetry/TelemetryEntityNames";
 import {
@@ -342,10 +343,15 @@ const LogsViewer: FunctionComponent<ComponentProps> = (
   /*
    * Drag-zooming the histogram is a one-way trip on its own: it swaps the
    * window for a custom one and nothing remembers what the reader was
-   * looking at. This keeps that window so a double-click on the chart can
-   * hand it back.
+   * looking at. This keeps that window so a double-click on a chart, or
+   * "Reset zoom" beside the picker, can hand it back. The analytics chart
+   * shares the same zoom (see the provider below), so dragging across
+   * either one retimes the whole viewer, and either one zooms back out. A
+   * viewer pinned to the window of a zoom offered around it (a telemetry
+   * snapshot's primary explorer) follows that zoom instead, so a drag here
+   * retimes everything that zoom does.
    */
-  const histogramZoom: HistogramZoomState = useHistogramZoom({
+  const viewerZoom: ViewerTimeRangeZoom = useViewerTimeRangeZoom({
     timeRange: props.timeRange,
     onTimeRangeSelect: props.onHistogramTimeRangeSelect,
     onTimeRangeChange: props.onTimeRangeChange,
@@ -1192,10 +1198,15 @@ const LogsViewer: FunctionComponent<ComponentProps> = (
       exportLogs(displayedLogs, LogExportFormat.JSON, selectedColumns);
     },
     ...(props.liveOptions ? { liveOptions: props.liveOptions } : {}),
-    ...(props.timeRange && histogramZoom.onTimeRangeChange
+    ...(props.timeRange && viewerZoom.onTimeRangeChange
       ? {
           timeRange: props.timeRange,
-          onTimeRangeChange: histogramZoom.onTimeRangeChange,
+          onTimeRangeChange: viewerZoom.onTimeRangeChange,
+          /*
+           * A followed zoom's way back is shown by whoever offers it (the
+           * snapshot's, beside its badge): one Reset zoom per zoom.
+           */
+          showResetZoom: !viewerZoom.followsEnclosingZoom,
         }
       : {}),
     showKeyboardShortcuts,
@@ -1219,7 +1230,7 @@ const LogsViewer: FunctionComponent<ComponentProps> = (
       : {}),
   };
 
-  return (
+  const viewer: ReactElement = (
     <div className="space-y-2">
       {props.showFilters && (
         <div>
@@ -1255,8 +1266,8 @@ const LogsViewer: FunctionComponent<ComponentProps> = (
           buckets={props.histogramBuckets}
           isLoading={props.histogramLoading || false}
           bucketIntervalMs={props.histogramBucketIntervalMs}
-          onTimeRangeSelect={histogramZoom.onTimeRangeSelect}
-          onZoomOut={histogramZoom.onZoomOut}
+          onTimeRangeSelect={viewerZoom.onTimeRangeSelect}
+          onZoomOut={viewerZoom.onZoomOut}
         />
       )}
 
@@ -1381,6 +1392,24 @@ const LogsViewer: FunctionComponent<ComponentProps> = (
       )}
     </div>
   );
+
+  /*
+   * The histogram, the analytics chart and the toolbar's "Reset zoom" all
+   * work on this viewer's window, whatever page it sits in, so the viewer's
+   * zoom shadows any zoom offered around it, unless that zoom is over this
+   * very window: the viewer then hands that zoom on (see
+   * useViewerTimeRangeZoom). A host that cannot zoom (no select handler)
+   * leaves whatever surrounds the viewer in place.
+   */
+  if (!viewerZoom.zoom) {
+    return viewer;
+  }
+
+  return (
+    <TimeRangeZoomProvider zoom={viewerZoom.zoom}>
+      {viewer}
+    </TimeRangeZoomProvider>
+  );
 };
 
 export default LogsViewer;

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

@@ -1,10 +1,17 @@
 import React, { FunctionComponent, ReactElement } from "react";
 import RangeStartAndEndDateTime from "../../../../Types/Time/RangeStartAndEndDateTime";
 import TimeRangePickerDropdown from "../../Date/TimeRangePickerDropdown";
+import ResetTimeRangeZoomButton from "../../Charts/TimeRangeZoom/ResetTimeRangeZoomButton";
 
 export interface LogTimeRangePickerProps {
   value: RangeStartAndEndDateTime;
   onChange: (value: RangeStartAndEndDateTime) => void;
+  /*
+   * False while the viewer follows a zoom offered around it (see
+   * useViewerTimeRangeZoom): whoever offers that zoom shows its "Reset
+   * zoom", and a second one here would only repeat it.
+   */
+  showResetZoom?: boolean | undefined;
 }
 
 // Matches the Tailwind `w-72` on the rendered dropdown (18rem).
@@ -16,13 +23,22 @@ export const LOG_TIME_RANGE_PICKER_TEST_ID_PREFIX: string =
 const LogTimeRangePicker: FunctionComponent<LogTimeRangePickerProps> = (
   props: LogTimeRangePickerProps,
 ): ReactElement => {
+  /*
+   * Once a drag on the log volume or analytics chart has zoomed the viewer,
+   * the picker only reads "Custom". The reset button beside it is the way
+   * back for anyone who does not know to double-click a chart, and the only
+   * one for keyboard users. It renders nothing unless the viewer is zoomed.
+   */
   return (
-    <TimeRangePickerDropdown
-      value={props.value}
-      onChange={props.onChange}
-      dataTestIdPrefix={LOG_TIME_RANGE_PICKER_TEST_ID_PREFIX}
-      dropdownWidthInPx={LOG_TIME_RANGE_DROPDOWN_WIDTH_IN_PX}
-    />
+    <div className="inline-flex items-center gap-1.5">
+      <TimeRangePickerDropdown
+        value={props.value}
+        onChange={props.onChange}
+        dataTestIdPrefix={LOG_TIME_RANGE_PICKER_TEST_ID_PREFIX}
+        dropdownWidthInPx={LOG_TIME_RANGE_DROPDOWN_WIDTH_IN_PX}
+      />
+      {props.showResetZoom === false ? null : <ResetTimeRangeZoomButton />}
+    </div>
   );
 };
 

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>
       );