@oneuptime/common 12.0.25 → 12.0.27

package/Types/Workspace/NotificationRules/NotificationRuleCondition.ts

@@ -195,6 +195,7 @@ export class NotificationRuleConditionUtil {
       case NotificationRuleConditionCheckOn.AlertEpisodeLabels:
       case NotificationRuleConditionCheckOn.IncidentEpisodeLabels:
       case NotificationRuleConditionCheckOn.ScheduledMaintenanceLabels:
+      case NotificationRuleConditionCheckOn.OnCallDutyPolicyLabels:
       case NotificationRuleConditionCheckOn.Monitors:
         return true;
       default:
@@ -287,7 +288,8 @@ export class NotificationRuleConditionUtil {
       data.checkOn === NotificationRuleConditionCheckOn.AlertEpisodeLabels ||
       data.checkOn === NotificationRuleConditionCheckOn.IncidentEpisodeLabels ||
       data.checkOn ===
-        NotificationRuleConditionCheckOn.ScheduledMaintenanceLabels
+        NotificationRuleConditionCheckOn.ScheduledMaintenanceLabels ||
+      data.checkOn === NotificationRuleConditionCheckOn.OnCallDutyPolicyLabels
     ) {
       return data.labels.map((label: Label) => {
         return {
@@ -386,6 +388,12 @@ export class NotificationRuleConditionUtil {
           NotificationRuleConditionCheckOn.MonitorLabels,
           NotificationRuleConditionCheckOn.Monitors,
         ];
+      case NotificationRuleEventType.OnCallDutyPolicy:
+        return [
+          NotificationRuleConditionCheckOn.OnCallDutyPolicyName,
+          NotificationRuleConditionCheckOn.OnCallDutyPolicyDescription,
+          NotificationRuleConditionCheckOn.OnCallDutyPolicyLabels,
+        ];
       default:
         return [];
     }
@@ -406,6 +414,8 @@ export class NotificationRuleConditionUtil {
       case NotificationRuleConditionCheckOn.IncidentEpisodeDescription:
       case NotificationRuleConditionCheckOn.ScheduledMaintenanceTitle:
       case NotificationRuleConditionCheckOn.ScheduledMaintenanceDescription:
+      case NotificationRuleConditionCheckOn.OnCallDutyPolicyName:
+      case NotificationRuleConditionCheckOn.OnCallDutyPolicyDescription:
         return [
           ConditionType.EqualTo,
           ConditionType.NotEqualTo,
@@ -434,6 +444,7 @@ export class NotificationRuleConditionUtil {
       case NotificationRuleConditionCheckOn.IncidentLabels:
       case NotificationRuleConditionCheckOn.MonitorLabels:
       case NotificationRuleConditionCheckOn.ScheduledMaintenanceLabels:
+      case NotificationRuleConditionCheckOn.OnCallDutyPolicyLabels:
         return [
           ConditionType.ContainsAny,
           ConditionType.NotContains,

package/UI/Components/Charts/Utils/useHistogramZoom.ts

@@ -0,0 +1,101 @@
+import { useCallback, useState } from "react";
+import RangeStartAndEndDateTime from "../../../../Types/Time/RangeStartAndEndDateTime";
+
+export interface HistogramZoomOptions {
+  /** The window the explorer is showing right now. */
+  timeRange?: RangeStartAndEndDateTime | undefined;
+  /** Applies a range the reader dragged out on the histogram. */
+  onTimeRangeSelect?: ((startTime: Date, endTime: Date) => void) | undefined;
+  /** Applies a range picked anywhere else (the toolbar picker, a reset). */
+  onTimeRangeChange?:
+    | ((timeRange: RangeStartAndEndDateTime) => void)
+    | undefined;
+}
+
+export interface HistogramZoomState {
+  /** Hand to the histogram in place of the raw select handler. */
+  onTimeRangeSelect: ((startTime: Date, endTime: Date) => void) | undefined;
+  /**
+   * Hand to the histogram: set only while a drag-zoom is in effect, so the
+   * chart can both offer the affordance and act on a double-click.
+   */
+  onZoomOut: (() => void) | undefined;
+  /** Hand to the time range picker in place of the raw change handler. */
+  onTimeRangeChange:
+    | ((timeRange: RangeStartAndEndDateTime) => void)
+    | undefined;
+}
+
+export type UseHistogramZoomFunction = (
+  options: HistogramZoomOptions,
+) => HistogramZoomState;
+
+/**
+ * Remembers the window a reader was on before they dragged a zoom out of the
+ * histogram, so a double-click can put them back on it.
+ *
+ * Only the *first* zoom is remembered: after drilling from "past one hour"
+ * into a minute and then into ten seconds, one double-click returns the whole
+ * hour rather than making the reader climb back out a level at a time. Any
+ * time range picked by other means — the toolbar picker, a saved view — is
+ * the reader choosing a new starting point, so it forgets what it held and
+ * the zoom-out affordance goes away until the next drag.
+ */
+const useHistogramZoom: UseHistogramZoomFunction = (
+  options: HistogramZoomOptions,
+): HistogramZoomState => {
+  const [rangeBeforeZoom, setRangeBeforeZoom] =
+    useState<RangeStartAndEndDateTime | null>(null);
+
+  const timeRange: RangeStartAndEndDateTime | undefined = options.timeRange;
+  const onTimeRangeSelect:
+    | ((startTime: Date, endTime: Date) => void)
+    | undefined = options.onTimeRangeSelect;
+  const onTimeRangeChange:
+    | ((timeRange: RangeStartAndEndDateTime) => void)
+    | undefined = options.onTimeRangeChange;
+
+  const handleTimeRangeSelect: (startTime: Date, endTime: Date) => void =
+    useCallback(
+      (startTime: Date, endTime: Date): void => {
+        if (!onTimeRangeSelect) {
+          return;
+        }
+
+        if (timeRange) {
+          setRangeBeforeZoom((current: RangeStartAndEndDateTime | null) => {
+            return current || timeRange;
+          });
+        }
+
+        onTimeRangeSelect(startTime, endTime);
+      },
+      [onTimeRangeSelect, timeRange],
+    );
+
+  const handleZoomOut: () => void = useCallback((): void => {
+    if (!rangeBeforeZoom || !onTimeRangeChange) {
+      return;
+    }
+
+    setRangeBeforeZoom(null);
+    onTimeRangeChange(rangeBeforeZoom);
+  }, [rangeBeforeZoom, onTimeRangeChange]);
+
+  const handleTimeRangeChange: (timeRange: RangeStartAndEndDateTime) => void =
+    useCallback(
+      (nextTimeRange: RangeStartAndEndDateTime): void => {
+        setRangeBeforeZoom(null);
+        onTimeRangeChange?.(nextTimeRange);
+      },
+      [onTimeRangeChange],
+    );
+
+  return {
+    onTimeRangeSelect: onTimeRangeSelect ? handleTimeRangeSelect : undefined,
+    onZoomOut: rangeBeforeZoom && onTimeRangeChange ? handleZoomOut : undefined,
+    onTimeRangeChange: onTimeRangeChange ? handleTimeRangeChange : undefined,
+  };
+};
+
+export default useHistogramZoom;

package/UI/Components/Dictionary/DictionaryFilterOperator.ts

@@ -4,6 +4,8 @@ import Search from "../../../Types/BaseDatabase/Search";
 import NotContains from "../../../Types/BaseDatabase/NotContains";
 import StartsWith from "../../../Types/BaseDatabase/StartsWith";
 import EndsWith from "../../../Types/BaseDatabase/EndsWith";
+import Wildcard from "../../../Types/BaseDatabase/Wildcard";
+import NotWildcard from "../../../Types/BaseDatabase/NotWildcard";
 import GreaterThan from "../../../Types/BaseDatabase/GreaterThan";
 import GreaterThanOrEqual from "../../../Types/BaseDatabase/GreaterThanOrEqual";
 import LessThan from "../../../Types/BaseDatabase/LessThan";
@@ -28,6 +30,8 @@ export enum DictionaryFilterOperator {
   NotContains = "NotContains",
   StartsWith = "StartsWith",
   EndsWith = "EndsWith",
+  Matches = "Matches",
+  NotMatches = "NotMatches",
   GreaterThan = "GreaterThan",
   LessThan = "LessThan",
   GreaterThanOrEqual = "GreaterThanOrEqual",
@@ -95,6 +99,16 @@ export const DICTIONARY_FILTER_OPERATOR_OPTIONS: ReadonlyArray<DictionaryFilterO
       label: "ends with",
       symbol: "ends with",
     },
+    {
+      operator: DictionaryFilterOperator.Matches,
+      label: "matches",
+      symbol: "matches",
+    },
+    {
+      operator: DictionaryFilterOperator.NotMatches,
+      label: "does not match",
+      symbol: "does not match",
+    },
     {
       operator: DictionaryFilterOperator.GreaterThan,
       label: "greater than",
@@ -143,6 +157,8 @@ export type DictionaryEntryValue =
   | NotContains<string>
   | StartsWith<string>
   | EndsWith<string>
+  | Wildcard<string>
+  | NotWildcard<string>
   | GreaterThan<number>
   | GreaterThanOrEqual<number>
   | LessThan<number>
@@ -152,6 +168,40 @@ export type DictionaryEntryValue =
   | Includes
   | IncludesNone;
 
+const GLOB_SEPARATOR: string = " OR ";
+
+type JoinGlobsFunction = (value: unknown) => string;
+
+const joinGlobs: JoinGlobsFunction = (value: unknown): string => {
+  const raw: unknown =
+    value instanceof Wildcard || value instanceof NotWildcard
+      ? value.values
+      : (value as { value?: unknown }).value;
+
+  if (Array.isArray(raw)) {
+    return raw
+      .map((glob: unknown) => {
+        return String(glob ?? "");
+      })
+      .join(GLOB_SEPARATOR);
+  }
+
+  return String(raw ?? "");
+};
+
+type SplitGlobsFunction = (value: string) => Array<string>;
+
+const splitGlobs: SplitGlobsFunction = (value: string): Array<string> => {
+  return value
+    .split(GLOB_SEPARATOR)
+    .map((glob: string) => {
+      return glob.trim();
+    })
+    .filter((glob: string) => {
+      return glob.length > 0;
+    });
+};
+
 export const getOperatorOption: (
   operator: DictionaryFilterOperator,
 ) => DictionaryFilterOperatorOption = (
@@ -331,6 +381,30 @@ export const detectOperatorFromValue: (
       rawValue: wrapperValue,
     };
   }
+  /*
+   * A wildcard carries an ARRAY of globs (one operator can express an OR),
+   * so its payload is joined for the single-value input the form renders.
+   * Round-tripping through that input keeps the disjunction: the builder
+   * splits on the same separator.
+   */
+  if (
+    value instanceof Wildcard ||
+    matchesObjectType(value, ObjectType.Wildcard)
+  ) {
+    return {
+      operator: DictionaryFilterOperator.Matches,
+      rawValue: joinGlobs(value),
+    };
+  }
+  if (
+    value instanceof NotWildcard ||
+    matchesObjectType(value, ObjectType.NotWildcard)
+  ) {
+    return {
+      operator: DictionaryFilterOperator.NotMatches,
+      rawValue: joinGlobs(value),
+    };
+  }
   if (
     value instanceof GreaterThan ||
     matchesObjectType(value, ObjectType.GreaterThan)
@@ -434,6 +508,15 @@ export const buildDictionaryValue: (input: {
       return new StartsWith<string>(trimmed);
     case DictionaryFilterOperator.EndsWith:
       return new EndsWith<string>(trimmed);
+    /*
+     * A glob, e.g. `api-*`. The pattern translation happens at compile time
+     * (Wildcard.toPatterns), so what is stored stays readable and can be
+     * re-rendered into this same input.
+     */
+    case DictionaryFilterOperator.Matches:
+      return new Wildcard<string>(splitGlobs(trimmed));
+    case DictionaryFilterOperator.NotMatches:
+      return new NotWildcard<string>(splitGlobs(trimmed));
     case DictionaryFilterOperator.GreaterThan:
       return new GreaterThan<number>(Number(trimmed));
     case DictionaryFilterOperator.GreaterThanOrEqual:

package/UI/Components/Icon/Icon.tsx

@@ -397,12 +397,39 @@ const Icon: FunctionComponent<ComponentProps> = ({
      * alone is what everybody already reads as edit, and it survives being
      * small. IconProp.PencilSquare still draws the composite for the handful of
      * places that want it.
+     *
+     * DRAWN AT 80% OF THE UPSTREAM HEROICON, and that is the whole point of
+     * this path existing rather than the stock one.
+     *
+     * Every icon here shares a 24x24 box, but the eye does not measure the
+     * box - it measures the ink. Heroicons' pencil is one unbroken diagonal
+     * from corner to corner, so its ink ran 26.8 units end to end: the
+     * longest stroke of any icon in this file, against a median of 21 and
+     * against the 20.5 of the Trash and the 19.9 of the List it sits beside
+     * in a table row. At the 20px a Button renders it at, that is a 22px
+     * stroke inside a 20px box - it overshot the cap height of its own label
+     * and read as a size larger than every button next to it.
+     *
+     * (Those figures are the longest distance across each glyph's drawn ink,
+     * with arcs and curves sampled. Common/Tests/UI/Components/
+     * IconOpticalSize.test.tsx measures the same quantity from the path
+     * VERTICES alone, which under-reads every icon by a fraction of a unit -
+     * so its numbers are smaller than these and its comparison is relative
+     * rather than absolute.)
+     *
+     * Scaling by 0.8 about the centre of the box brings the ink to 21.4 -
+     * between Trash and Copy, at the median - while keeping the glyph
+     * itself untouched: a uniform scale preserves the arc flags, the 45
+     * degree barrel, and the tangency of the nib and eraser arcs. The
+     * numbers stay exact (radii 1.5 and 3.6, tip at 4.2 19.8), and the
+     * stroke width deliberately does NOT scale, so the pencil keeps the same
+     * weight as its neighbours instead of thinning out.
      */
     return getSvgWrapper(
       <path
         strokeLinecap="round"
         strokeLinejoin="round"
-        d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L6.832 19.82a4.5 4.5 0 01-1.897 1.13l-2.685.8.8-2.685a4.5 4.5 0 011.13-1.897L16.863 4.487zm0 0L19.5 7.125"
+        d="M15.89 5.99l1.35-1.35a1.5 1.5 0 112.122 2.122L7.866 18.256a3.6 3.6 0 01-1.518.904l-2.148.64.64-2.148a3.6 3.6 0 01.904-1.518L15.89 5.99zm0 0L18 8.1"
       />,
     );
   } else if (icon === IconProp.Equals) {

package/UI/Components/LogsViewer/LogsViewer.tsx

@@ -66,6 +66,9 @@ 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";
 
 export interface ComponentProps {
   logs: Array<Log>;
@@ -282,6 +285,18 @@ const LogsViewer: FunctionComponent<ComponentProps> = (
   const [showKeyboardShortcuts, setShowKeyboardShortcuts] =
     useState<boolean>(false);
 
+  /*
+   * 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.
+   */
+  const histogramZoom: HistogramZoomState = useHistogramZoom({
+    timeRange: props.timeRange,
+    onTimeRangeSelect: props.onHistogramTimeRangeSelect,
+    onTimeRangeChange: props.onTimeRangeChange,
+  });
+
   useEffect(() => {
     setFilterData(props.filterData);
   }, [props.filterData]);
@@ -1074,10 +1089,10 @@ const LogsViewer: FunctionComponent<ComponentProps> = (
       exportLogs(displayedLogs, LogExportFormat.JSON, selectedColumns);
     },
     ...(props.liveOptions ? { liveOptions: props.liveOptions } : {}),
-    ...(props.timeRange && props.onTimeRangeChange
+    ...(props.timeRange && histogramZoom.onTimeRangeChange
       ? {
           timeRange: props.timeRange,
-          onTimeRangeChange: props.onTimeRangeChange,
+          onTimeRangeChange: histogramZoom.onTimeRangeChange,
         }
       : {}),
     showKeyboardShortcuts,
@@ -1130,7 +1145,8 @@ const LogsViewer: FunctionComponent<ComponentProps> = (
         <LogsHistogram
           buckets={props.histogramBuckets}
           isLoading={props.histogramLoading || false}
-          onTimeRangeSelect={props.onHistogramTimeRangeSelect}
+          onTimeRangeSelect={histogramZoom.onTimeRangeSelect}
+          onZoomOut={histogramZoom.onZoomOut}
         />
       )}
 

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

@@ -58,12 +58,23 @@ const LogSearchBar: React.ForwardRefExoticComponent<
 
     const currentWord: string = extractCurrentWord(props.value);
 
-    // Strip leading "@" — treat it as a trigger character for suggestions
-    const hasAtPrefix: boolean = currentWord.startsWith("@");
-    const normalizedWord: string = hasAtPrefix
+    /*
+     * A leading `-` negates the whole term. It is stripped before the `@`
+     * check so `-@http.method:GET` still reads as an attribute for the
+     * suggestion dropdown, and remembered so Enter can decline to build a
+     * chip out of it.
+     */
+    const isNegatedWord: boolean = currentWord.startsWith("-");
+    const unnegatedWord: string = isNegatedWord
       ? currentWord.substring(1)
       : currentWord;
 
+    // Strip leading "@" — treat it as a trigger character for suggestions
+    const hasAtPrefix: boolean = unnegatedWord.startsWith("@");
+    const normalizedWord: string = hasAtPrefix
+      ? unnegatedWord.substring(1)
+      : unnegatedWord;
+
     // Determine if we're in "field:value" mode or "field name" mode
     const colonIndex: number = normalizedWord.indexOf(":");
     const isValueMode: boolean = colonIndex > 0;
@@ -150,9 +161,19 @@ const LogSearchBar: React.ForwardRefExoticComponent<
               return;
             }
 
-            // If in value mode with a typed value, apply as a chip
+            /*
+             * In value mode with a typed value, apply it as a chip — the
+             * chip is compiled with the same search grammar as the raw
+             * query string, so `@platform.team:a*` stays a prefix match.
+             *
+             * A negated token (`-severity:debug`) is the one shape a chip
+             * cannot carry: the chip's key would be the literal
+             * "-severity". Those fall through to a plain submit, where the
+             * parser reads the `-` as the negation it is.
+             */
             if (
               isValueMode &&
+              !isNegatedWord &&
               partialValue.length > 0 &&
               props.onFieldValueSelect
             ) {
@@ -225,6 +246,7 @@ const LogSearchBar: React.ForwardRefExoticComponent<
           selectedSuggestionIndex,
           filteredSuggestions,
           isValueMode,
+          isNegatedWord,
           fieldPrefix,
           partialValue,
           props,

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

@@ -10,6 +10,12 @@ interface HelpRow {
   example: string;
 }
 
+/*
+ * The syntax table. Every row here is honoured by the shared search grammar
+ * in Common/Types/Telemetry/TelemetrySearchQuery — the help used to advertise
+ * a wildcard row whose own example ("service:api-*") matched nothing, so the
+ * rule is that a row is only listed once its behaviour is pinned by a test.
+ */
 const HELP_ROWS: Array<HelpRow> = [
   {
     syntax: "free text",
@@ -18,7 +24,7 @@ const HELP_ROWS: Array<HelpRow> = [
   },
   {
     syntax: '"quoted phrase"',
-    description: "Exact phrase match",
+    description: "Keep spaces together",
     example: '"out of memory"',
   },
   {
@@ -36,29 +42,39 @@ const HELP_ROWS: Array<HelpRow> = [
     description: "Filter by trace ID",
     example: "trace:abc123def456",
   },
-  {
-    syntax: "span:<id>",
-    description: "Filter by span ID",
-    example: "span:e1f7f671fe78",
-  },
   {
     syntax: "@<attr>:<value>",
     description: "Filter by attribute",
     example: "@http.status_code:500",
   },
   {
-    syntax: "-field:value",
-    description: "Exclude matching logs",
-    example: "-severity:debug",
+    syntax: "@<attr>:<value>*",
+    description: "Wildcard — * is any text, ? is one character",
+    example: "@platform.team:a*",
+  },
+  {
+    syntax: "@<attr>:*",
+    description: "Attribute is present",
+    example: "@user.id:*",
+  },
+  {
+    syntax: "@<attr>:~<text>",
+    description: "Attribute contains",
+    example: "@url.host:~internal",
+  },
+  {
+    syntax: "-<filter>",
+    description: "Exclude — works with every filter above",
+    example: "-@platform.team:a*",
   },
   {
-    syntax: "field:value*",
-    description: "Wildcard match",
-    example: "service:api-*",
+    syntax: "@<attr>:(a OR b)",
+    description: "Any of these values",
+    example: "@http.method:(GET OR POST)",
   },
   {
-    syntax: "@attr:>N",
-    description: "Numeric comparison",
+    syntax: "@<attr>:>N",
+    description: "Numeric comparison (also >=, <, <=)",
     example: "@duration:>1000",
   },
 ];
@@ -115,10 +131,12 @@ const LogSearchHelp: FunctionComponent<LogSearchHelpProps> = (
           <kbd className="rounded border border-gray-200 bg-gray-50 px-1 py-0.5 font-mono text-[10px]">
             Enter
           </kbd>{" "}
-          to search · Combine filters:{" "}
+          to search · Filters combine with AND ·{" "}
           <code className="font-mono text-[10px] text-gray-500">
             severity:error service:api &quot;timeout&quot;
-          </code>
+          </code>{" "}
+          · Use <code className="font-mono text-[10px]">\*</code> for a literal
+          asterisk
         </span>
       </div>
     </div>

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

@@ -1,6 +1,7 @@
 import React, {
   FunctionComponent,
   ReactElement,
+  useEffect,
   useMemo,
   useCallback,
   useRef,
@@ -29,6 +30,12 @@ export interface LogsHistogramProps {
   buckets: Array<HistogramBucket>;
   isLoading: boolean;
   onTimeRangeSelect?: ((startTime: Date, endTime: Date) => void) | undefined;
+  /*
+   * Set only while the chart is showing a window the reader dragged out of
+   * it. Double-clicking the chart then puts them back on the window they
+   * started from.
+   */
+  onZoomOut?: (() => void) | undefined;
 }
 
 interface PivotedRow {
@@ -86,6 +93,12 @@ const LogsHistogram: FunctionComponent<LogsHistogramProps> = (
   const [selectionStart, setSelectionStart] = useState<string | null>(null);
   const [selectionEnd, setSelectionEnd] = useState<string | null>(null);
   const isSelecting: React.MutableRefObject<boolean> = useRef(false);
+  /*
+   * Mirrors isSelecting for rendering. The ref stays the authority so a
+   * mouseup handled twice (chart *and* window, below) cannot commit the same
+   * drag twice; the state is only here so the drag can change what is drawn.
+   */
+  const [isDragging, setIsDragging] = useState<boolean>(false);
 
   const pivotedData: Array<PivotedRow> = useMemo(() => {
     return pivotBuckets(props.buckets);
@@ -110,6 +123,7 @@ const LogsHistogram: FunctionComponent<LogsHistogramProps> = (
       }
 
       isSelecting.current = true;
+      setIsDragging(true);
       setSelectionStart(e.activeLabel as string);
       setSelectionEnd(null);
     },
@@ -132,12 +146,14 @@ const LogsHistogram: FunctionComponent<LogsHistogramProps> = (
       !props.onTimeRangeSelect
     ) {
       isSelecting.current = false;
+      setIsDragging(false);
       setSelectionStart(null);
       setSelectionEnd(null);
       return;
     }
 
     isSelecting.current = false;
+    setIsDragging(false);
 
     const start: Date = OneUptimeDate.fromString(selectionStart);
     const end: Date = OneUptimeDate.fromString(selectionEnd);
@@ -157,6 +173,28 @@ const LogsHistogram: FunctionComponent<LogsHistogramProps> = (
     setSelectionEnd(null);
   }, [selectionStart, selectionEnd, props.onTimeRangeSelect]);
 
+  /*
+   * Readers routinely drag past the edge of a 120px-tall chart and let go
+   * outside it, where the chart's own mouseup never fires. Without this the
+   * drag would never end: the selection band would stay painted and the
+   * tooltip would stay suppressed until the next click.
+   */
+  useEffect(() => {
+    if (!isDragging) {
+      return undefined;
+    }
+
+    const finishDragOutsideChart: () => void = (): void => {
+      handleMouseUp();
+    };
+
+    window.addEventListener("mouseup", finishDragOutsideChart);
+
+    return () => {
+      window.removeEventListener("mouseup", finishDragOutsideChart);
+    };
+  }, [isDragging, handleMouseUp]);
+
   if (props.isLoading && pivotedData.length === 0) {
     return (
       <div className="flex h-32 items-center justify-center rounded-lg border border-gray-200 bg-white">
@@ -178,6 +216,11 @@ const LogsHistogram: FunctionComponent<LogsHistogramProps> = (
           {props.onTimeRangeSelect && (
             <span className="text-[10px] text-gray-300">Drag to zoom</span>
           )}
+          {props.onZoomOut && (
+            <span className="text-[10px] text-gray-300">
+              Double-click to zoom out
+            </span>
+          )}
         </div>
         <div className="flex items-center gap-3">
           {activeSeverities.map((severity: string) => {
@@ -197,11 +240,12 @@ const LogsHistogram: FunctionComponent<LogsHistogramProps> = (
 
       {/* Chart */}
       <div
-        className="px-2 pb-1 pt-2"
+        className="select-none px-2 pb-1 pt-2"
         style={{
           height: 120,
           cursor: props.onTimeRangeSelect ? "crosshair" : "default",
         }}
+        onDoubleClick={props.onZoomOut}
       >
         <ResponsiveContainer width="100%" height="100%">
           <BarChart
@@ -237,9 +281,16 @@ const LogsHistogram: FunctionComponent<LogsHistogramProps> = (
               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)" }}
+              {...(isDragging ? { active: false } : {})}
             />
             {activeSeverities.map((severity: string, index: number) => {
               const isLast: boolean = index === activeSeverities.length - 1;