@oneuptime/common 14.0.1 → 14.0.3

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

@@ -13,6 +13,13 @@ import Dictionary from "../../../../Types/Dictionary";
 import Route from "../../../../Types/API/Route";
 import URL from "../../../../Types/API/URL";
 import CopyTextButton from "../../CopyTextButton/CopyTextButton";
+import AttributesJSONView from "../../AttributesJSON/AttributesJSONView";
+import AttributesViewToggle from "../../AttributesJSON/AttributesViewToggle";
+import CopyAttributesAsJSONButton from "../../AttributesJSON/CopyAttributesAsJSONButton";
+import {
+  AttributesView,
+  useAttributesView,
+} from "../../AttributesJSON/AttributesJSONPreferences";
 import Icon from "../../Icon/Icon";
 import IconProp from "../../../../Types/Icon/IconProp";
 import Link from "../../Link/Link";
@@ -298,17 +305,7 @@ const LogDetailsPanel: FunctionComponent<LogDetailsPanelProps> = (
       });
   }, [props.log.attributes]);
 
-  const attributesAsJson: string | null = useMemo(() => {
-    if (attributeEntries.length === 0) {
-      return null;
-    }
-
-    const flat: Record<string, string> = {};
-    for (const entry of attributeEntries) {
-      flat[entry.key] = entry.value;
-    }
-    return JSON.stringify(flat, null, 2);
-  }, [attributeEntries]);
+  const [attributesView, setAttributesView] = useAttributesView();
 
   const traceId: string = props.log.traceId?.toString() || "";
   const spanId: string = props.log.spanId?.toString() || "";
@@ -877,74 +874,92 @@ const LogDetailsPanel: FunctionComponent<LogDetailsPanelProps> = (
 
           {attributeEntries.length > 0 && (
             <section className="space-y-3">
-              <header className="flex items-center justify-between text-[11px] uppercase tracking-wide text-gray-400">
-                <span>Attributes</span>
-                {attributesAsJson && (
-                  <CopyTextButton
-                    textToBeCopied={attributesAsJson}
-                    size="xs"
-                    variant="ghost"
-                    iconOnly={false}
-                    title="Copy attributes as JSON"
+              <header className="flex flex-wrap items-center justify-between gap-2">
+                <span className="flex items-center gap-1.5 text-[11px] uppercase tracking-wide text-gray-400">
+                  Attributes
+                  <span className="rounded-full bg-gray-100 px-1.5 py-px text-[10px] font-medium normal-case tracking-normal tabular-nums text-gray-500">
+                    {attributeEntries.length}
+                  </span>
+                </span>
+                <div className="flex items-center gap-1.5">
+                  <AttributesViewToggle
+                    value={attributesView}
+                    onChange={(view: AttributesView) => {
+                      setAttributesView(view);
+                    }}
+                    dataTestId="log-attributes-view-toggle"
+                  />
+                  <CopyAttributesAsJSONButton
+                    attributes={props.log.attributes}
+                    dataTestId="log-attributes-copy-json"
                   />
-                )}
+                </div>
               </header>
-              <div
-                className={`max-h-80 overflow-auto rounded-lg border ${surfaceCardClass}`}
-              >
-                <ul className="divide-y divide-gray-200">
-                  {attributeEntries.map((entry: AttributeEntry) => {
-                    return (
-                      <li
-                        key={entry.key}
-                        className="group flex items-start gap-3 px-3 py-2 hover:bg-white"
-                      >
-                        <span
-                          className="w-56 flex-none truncate font-mono text-[12px] text-gray-500"
-                          title={entry.key}
-                        >
-                          {entry.key}
-                        </span>
-                        <span
-                          className="min-w-0 flex-1 break-all font-mono text-[12px] text-gray-800"
-                          title={entry.value}
+              {attributesView === "json" ? (
+                <AttributesJSONView
+                  attributes={props.log.attributes}
+                  dataTestId="log-attributes-json"
+                />
+              ) : (
+                <div
+                  className={`max-h-80 overflow-auto rounded-lg border ${surfaceCardClass}`}
+                >
+                  <ul className="divide-y divide-gray-200">
+                    {attributeEntries.map((entry: AttributeEntry) => {
+                      return (
+                        <li
+                          key={entry.key}
+                          className="group flex items-start gap-3 px-3 py-2 hover:bg-white"
                         >
-                          {entry.value || (
-                            <span className="italic text-gray-400">empty</span>
-                          )}
-                        </span>
-                        <div className="flex flex-none items-center gap-1 opacity-0 transition-opacity group-hover:opacity-100 group-focus-within:opacity-100">
-                          {props.onFilterByAttribute && entry.value && (
-                            <button
-                              type="button"
-                              className="rounded p-1 text-gray-400 hover:bg-gray-100 hover:text-indigo-600"
-                              title={`Filter by ${entry.key}: ${entry.value}`}
-                              onClick={() => {
-                                props.onFilterByAttribute!(
-                                  entry.key,
-                                  entry.value,
-                                );
-                              }}
-                            >
-                              <Icon
-                                icon={IconProp.Filter}
-                                className="h-3.5 w-3.5"
-                              />
-                            </button>
-                          )}
-                          <CopyTextButton
-                            textToBeCopied={entry.value}
-                            size="xs"
-                            variant="ghost"
-                            iconOnly={true}
-                            title={`Copy ${entry.key}`}
-                          />
-                        </div>
-                      </li>
-                    );
-                  })}
-                </ul>
-              </div>
+                          <span
+                            className="w-56 flex-none truncate font-mono text-[12px] text-gray-500"
+                            title={entry.key}
+                          >
+                            {entry.key}
+                          </span>
+                          <span
+                            className="min-w-0 flex-1 break-all font-mono text-[12px] text-gray-800"
+                            title={entry.value}
+                          >
+                            {entry.value || (
+                              <span className="italic text-gray-400">
+                                empty
+                              </span>
+                            )}
+                          </span>
+                          <div className="flex flex-none items-center gap-1 opacity-0 transition-opacity group-hover:opacity-100 group-focus-within:opacity-100">
+                            {props.onFilterByAttribute && entry.value && (
+                              <button
+                                type="button"
+                                className="rounded p-1 text-gray-400 hover:bg-gray-100 hover:text-indigo-600"
+                                title={`Filter by ${entry.key}: ${entry.value}`}
+                                onClick={() => {
+                                  props.onFilterByAttribute!(
+                                    entry.key,
+                                    entry.value,
+                                  );
+                                }}
+                              >
+                                <Icon
+                                  icon={IconProp.Filter}
+                                  className="h-3.5 w-3.5"
+                                />
+                              </button>
+                            )}
+                            <CopyTextButton
+                              textToBeCopied={entry.value}
+                              size="xs"
+                              variant="ghost"
+                              iconOnly={true}
+                              title={`Copy ${entry.key}`}
+                            />
+                          </div>
+                        </li>
+                      );
+                    })}
+                  </ul>
+                </div>
+              )}
             </section>
           )}
         </div>

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

@@ -71,6 +71,15 @@ export interface LogsFacetSidebarProps {
   onFacetSearchChange?:
     | ((facetKey: string, searchText: string) => void)
     | undefined;
+  // Lets a disclosure toggle point at the panel with aria-controls.
+  id?: string | undefined;
+  /*
+   * Below md the sidebar stacks above the list at full width rather than
+   * sitting beside it. When true it is also folded away there, until the
+   * caller's toggle opens it. From md up it always shows. The fold is CSS
+   * only, so the sidebar stays mounted and keeps its search and expand state.
+   */
+  isCollapsedOnSmallScreens?: boolean | undefined;
 }
 
 /*
@@ -349,7 +358,12 @@ const LogsFacetSidebar: FunctionComponent<LogsFacetSidebarProps> = (
   ]);
 
   return (
-    <div className="flex h-full w-56 flex-none flex-col overflow-y-auto rounded-lg border border-gray-200 bg-white">
+    <div
+      id={props.id}
+      className={`${
+        props.isCollapsedOnSmallScreens ? "hidden md:flex" : "flex"
+      } max-h-80 w-full flex-none flex-col overflow-y-auto rounded-lg border border-gray-200 bg-white md:h-full md:max-h-none md:w-56`}
+    >
       <div className="border-b border-gray-100 px-3 py-2.5">
         <h3 className="text-[11px] font-semibold uppercase tracking-widest text-gray-400">
           Filters

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

@@ -1,12 +1,4 @@
-import React, {
-  FunctionComponent,
-  ReactElement,
-  useEffect,
-  useMemo,
-  useCallback,
-  useRef,
-  useState,
-} from "react";
+import React, { FunctionComponent, ReactElement, useMemo } from "react";
 import {
   BarChart,
   Bar,
@@ -25,6 +17,9 @@ import {
 import HistogramTooltip from "./HistogramTooltip";
 import ComponentLoader from "../../ComponentLoader/ComponentLoader";
 import OneUptimeDate from "../../../../Types/Date";
+import useHistogramRangeSelection, {
+  HistogramRangeSelectionState,
+} from "../../Charts/Utils/useHistogramRangeSelection";
 
 export interface LogsHistogramProps {
   buckets: Array<HistogramBucket>;
@@ -36,6 +31,12 @@ export interface LogsHistogramProps {
    * started from.
    */
   onZoomOut?: (() => void) | undefined;
+  /*
+   * How much time one bar covers. With it a click on a bar zooms into that
+   * bar and a drag zooms through the end of the last bar it covered; without
+   * it a selection can only run from one bar's start to another's.
+   */
+  bucketIntervalMs?: number | undefined;
 }
 
 interface PivotedRow {
@@ -88,15 +89,11 @@ function formatYAxisTick(value: number): string {
 const LogsHistogram: FunctionComponent<LogsHistogramProps> = (
   props: LogsHistogramProps,
 ): ReactElement => {
-  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 selection: HistogramRangeSelectionState = useHistogramRangeSelection({
+    onTimeRangeSelect: props.onTimeRangeSelect,
+    onZoomOut: props.onZoomOut,
+    bucketIntervalMs: props.bucketIntervalMs,
+  });
 
   const pivotedData: Array<PivotedRow> = useMemo(() => {
     return pivotBuckets(props.buckets);
@@ -114,85 +111,6 @@ const LogsHistogram: FunctionComponent<LogsHistogramProps> = (
     });
   }, [props.buckets]);
 
-  const handleMouseDown: (e: any) => void = useCallback(
-    (e: any): void => {
-      if (!props.onTimeRangeSelect || !e?.activeLabel) {
-        return;
-      }
-
-      isSelecting.current = true;
-      setIsDragging(true);
-      setSelectionStart(e.activeLabel as string);
-      setSelectionEnd(null);
-    },
-    [props.onTimeRangeSelect],
-  );
-
-  const handleMouseMove: (e: any) => void = useCallback((e: any): void => {
-    if (!isSelecting.current || !e?.activeLabel) {
-      return;
-    }
-
-    setSelectionEnd(e.activeLabel as string);
-  }, []);
-
-  const handleMouseUp: () => void = useCallback((): void => {
-    if (
-      !isSelecting.current ||
-      !selectionStart ||
-      !selectionEnd ||
-      !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);
-
-    if (isNaN(start.getTime()) || isNaN(end.getTime())) {
-      setSelectionStart(null);
-      setSelectionEnd(null);
-      return;
-    }
-
-    const earlierDate: Date = start < end ? start : end;
-    const laterDate: Date = start < end ? end : start;
-
-    props.onTimeRangeSelect(earlierDate, laterDate);
-
-    setSelectionStart(null);
-    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">
@@ -212,7 +130,11 @@ const LogsHistogram: FunctionComponent<LogsHistogramProps> = (
         <div className="flex items-center gap-2">
           <span className="text-xs font-medium text-gray-500">Log Volume</span>
           {props.onTimeRangeSelect && (
-            <span className="text-[10px] text-gray-300">Drag to zoom</span>
+            <span className="text-[10px] text-gray-300">
+              {selection.canClickToZoom
+                ? "Click or drag to zoom"
+                : "Drag to zoom"}
+            </span>
           )}
           {props.onZoomOut && (
             <span className="text-[10px] text-gray-300">
@@ -243,15 +165,15 @@ const LogsHistogram: FunctionComponent<LogsHistogramProps> = (
           height: 120,
           cursor: props.onTimeRangeSelect ? "crosshair" : "default",
         }}
-        onDoubleClick={props.onZoomOut}
+        onDoubleClick={selection.onDoubleClick}
       >
         <ResponsiveContainer width="100%" height="100%">
           <BarChart
             data={pivotedData}
             margin={{ top: 4, right: 8, bottom: 0, left: -4 }}
-            onMouseDown={handleMouseDown}
-            onMouseMove={handleMouseMove}
-            onMouseUp={handleMouseUp}
+            onMouseDown={selection.onMouseDown}
+            onMouseMove={selection.onMouseMove}
+            onMouseUp={selection.onMouseUp}
             barCategoryGap="15%"
             barGap={0}
           >
@@ -288,7 +210,7 @@ const LogsHistogram: FunctionComponent<LogsHistogramProps> = (
             <Tooltip
               content={<HistogramTooltip />}
               cursor={{ fill: "rgba(99,102,241,0.06)" }}
-              {...(isDragging ? { active: false } : {})}
+              {...(selection.isDragging ? { active: false } : {})}
             />
             {activeSeverities.map((severity: string, index: number) => {
               const isLast: boolean = index === activeSeverities.length - 1;
@@ -304,10 +226,10 @@ const LogsHistogram: FunctionComponent<LogsHistogramProps> = (
                 />
               );
             })}
-            {selectionStart && selectionEnd && (
+            {selection.selectionStart && selection.selectionEnd && (
               <ReferenceArea
-                x1={selectionStart}
-                x2={selectionEnd}
+                x1={selection.selectionStart}
+                x2={selection.selectionEnd}
                 fill="rgba(99,102,241,0.12)"
                 stroke="rgba(99,102,241,0.5)"
                 strokeWidth={1}

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

@@ -5,6 +5,7 @@ import ColumnSelector from "./ColumnSelector";
 import SavedViewsDropdown from "./SavedViewsDropdown";
 import KeyboardShortcutsHelp from "./KeyboardShortcutsHelp";
 import Icon from "../../Icon/Icon";
+import IconProp from "../../../../Types/Icon/IconProp";
 import Tooltip from "../../Tooltip/Tooltip";
 import {
   LiveLogsOptions,
@@ -43,8 +44,23 @@ export interface LogsViewerToolbarProps {
   onToggleKeyboardShortcuts?: (() => void) | undefined;
   onShowDocumentation?: (() => void) | undefined;
   signalPivotActions?: Array<LogsSignalPivotAction> | undefined;
+  /*
+   * The phone-only "Filters" toggle for the facet sidebar. Below md the
+   * sidebar stacks above the list, folded until this opens it; from md up it
+   * always shows beside the list and the toggle is hidden. `facetPanelId` is
+   * the sidebar's id, for aria-controls.
+   */
+  facetPanelId?: string | undefined;
+  isFacetPanelOpen?: boolean | undefined;
+  onToggleFacetPanel?: (() => void) | undefined;
 }
 
+export const LOGS_VIEWER_TOOLBAR_TEST_ID: string = "logs-viewer-toolbar";
+export const LOGS_VIEWER_FILTERS_TOGGLE_TEST_ID: string =
+  "logs-viewer-filters-toggle";
+export const LOGS_VIEWER_EXPORT_MENU_TEST_ID: string =
+  "logs-viewer-export-menu";
+
 const LogsViewerToolbar: FunctionComponent<LogsViewerToolbarProps> = (
   props: LogsViewerToolbarProps,
 ): ReactElement => {
@@ -62,11 +78,37 @@ const LogsViewerToolbar: FunctionComponent<LogsViewerToolbarProps> = (
   const showExport: boolean = Boolean(props.onExportCSV || props.onExportJSON);
 
   return (
+    /*
+     * Below md the two groups wrap onto their own rows instead of sharing
+     * one: side by side they squeezed each other on a phone. Wrapping moves
+     * the triggers, so there every popover in the row spans the row (its
+     * positioning context) rather than hanging off its trigger. From md up it
+     * is the single unwrapped row it always was, popovers included.
+     */
     <div
-      className={`flex items-center justify-between gap-3 ${props.className || ""}`}
+      className={`relative flex flex-wrap items-center justify-between gap-3 md:flex-nowrap ${props.className || ""}`}
+      data-testid={LOGS_VIEWER_TOOLBAR_TEST_ID}
     >
       {/* Left group: View management + stats */}
       <div className="flex flex-wrap items-center gap-3">
+        {props.facetPanelId && props.onToggleFacetPanel && (
+          <button
+            type="button"
+            className={`inline-flex items-center gap-1.5 rounded-md border px-2.5 py-1.5 text-xs font-medium shadow-sm transition-colors md:hidden ${
+              props.isFacetPanelOpen
+                ? "border-indigo-300 bg-indigo-50 text-indigo-700"
+                : "border-gray-200 bg-white text-gray-700 hover:border-gray-300 hover:bg-gray-50"
+            }`}
+            aria-expanded={Boolean(props.isFacetPanelOpen)}
+            aria-controls={props.facetPanelId}
+            data-testid={LOGS_VIEWER_FILTERS_TOGGLE_TEST_ID}
+            onClick={props.onToggleFacetPanel}
+          >
+            <Icon icon={IconProp.Filter} className="h-3.5 w-3.5" />
+            <span>Filters</span>
+          </button>
+        )}
+
         {props.viewMode && props.onViewModeChange && (
           <div className="inline-flex rounded-md shadow-sm" role="group">
             <button
@@ -175,8 +217,11 @@ const LogsViewerToolbar: FunctionComponent<LogsViewerToolbarProps> = (
         </div>
       </div>
 
-      {/* Right group: Display controls */}
-      <div className="flex flex-wrap items-center justify-end gap-2">
+      {/*
+       * Right group: Display controls. Start-aligned below md, where it sits
+       * on its own row under the left group.
+       */}
+      <div className="flex flex-wrap items-center justify-start gap-2 md:justify-end">
         {props.availableColumns &&
           props.selectedColumns &&
           props.onSelectedColumnsChange && (
@@ -212,7 +257,7 @@ const LogsViewerToolbar: FunctionComponent<LogsViewerToolbarProps> = (
         )}
 
         {props.onToggleKeyboardShortcuts && (
-          <div className="relative">
+          <div className="md:relative">
             <button
               type="button"
               className={`inline-flex items-center gap-1.5 rounded-md border px-2.5 py-1.5 text-xs font-medium shadow-sm transition-colors ${
@@ -236,7 +281,7 @@ const LogsViewerToolbar: FunctionComponent<LogsViewerToolbarProps> = (
         )}
 
         {showExport && (
-          <div className="relative" ref={exportDropdownRef}>
+          <div className="md:relative" ref={exportDropdownRef}>
             <button
               type="button"
               className="inline-flex items-center gap-1.5 rounded-md border border-gray-200 bg-white px-2.5 py-1.5 text-xs font-medium text-gray-700 shadow-sm transition-colors hover:border-gray-300 hover:bg-gray-50"
@@ -273,7 +318,10 @@ const LogsViewerToolbar: FunctionComponent<LogsViewerToolbarProps> = (
               </svg>
             </button>
             {isExportOpen && (
-              <div className="absolute right-0 z-20 mt-1 w-40 rounded-md border border-gray-200 bg-white py-1 shadow-lg">
+              <div
+                className="absolute left-0 right-0 z-20 mt-1 rounded-md border border-gray-200 bg-white py-1 shadow-lg md:left-auto md:w-40"
+                data-testid={LOGS_VIEWER_EXPORT_MENU_TEST_ID}
+              >
                 {props.onExportCSV && (
                   <button
                     type="button"

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

@@ -146,7 +146,13 @@ const SavedViewsDropdown: FunctionComponent<SavedViewsDropdownProps> = (
   };
 
   return (
-    <div className="relative" ref={ref}>
+    /*
+     * Positioned from md up only. Below md the toolbar wraps, so the trigger
+     * can sit anywhere in its row, and an 18rem panel hung off it could run
+     * off the side of a phone. There the panel instead spans the nearest
+     * positioned ancestor, the toolbar row, and drops below the trigger.
+     */
+    <div className="md:relative" ref={ref}>
       <button
         ref={triggerRef}
         type="button"
@@ -175,7 +181,7 @@ const SavedViewsDropdown: FunctionComponent<SavedViewsDropdownProps> = (
         <div
           role="dialog"
           aria-label="Saved views"
-          className="absolute left-0 z-20 mt-2 w-72 rounded-lg border border-gray-200 bg-white shadow-xl"
+          className="absolute left-0 right-0 z-20 mt-2 rounded-lg border border-gray-200 bg-white shadow-xl md:right-auto md:w-72"
         >
           {/*
            * Explicit way back to the unfiltered explorer. Clicking the

package/UI/Components/LogsViewer/useLogsHistogram.ts

@@ -9,16 +9,47 @@ export interface LogsHistogramRefreshOptions {
   silent?: boolean | undefined;
 }
 
+export interface LogsHistogramData {
+  buckets: Array<HistogramBucket>;
+  /*
+   * How much time one bucket covers, as the query bucketed it. It travels
+   * with the buckets it describes so the chart never pairs one window's
+   * bars with another window's width.
+   */
+  bucketIntervalMs?: number | undefined;
+}
+
 export interface LogsHistogramState {
   buckets: Array<HistogramBucket>;
+  /** Width of one bucket in `buckets`; undefined when the query did not say. */
+  bucketIntervalMs: number | undefined;
   isLoading: boolean;
   refresh: (options?: LogsHistogramRefreshOptions) => Promise<void>;
 }
 
+/*
+ * A bare array is a query that does not report its bucket width; the chart
+ * still draws it, but can only zoom from one bar's start to another's.
+ */
 export type FetchHistogramBucketsFunction = () => Promise<
-  Array<HistogramBucket>
+  Array<HistogramBucket> | LogsHistogramData
 >;
 
+const EMPTY_HISTOGRAM: LogsHistogramData = { buckets: [] };
+
+function toHistogramData(
+  result: Array<HistogramBucket> | LogsHistogramData,
+): LogsHistogramData {
+  if (Array.isArray(result)) {
+    return { buckets: result };
+  }
+
+  return {
+    buckets: result.buckets || [],
+    bucketIntervalMs: result.bucketIntervalMs,
+  };
+}
+
 export type UseLogsHistogramFunction = (
   fetchBuckets: FetchHistogramBucketsFunction,
 ) => LogsHistogramState;
@@ -44,7 +75,8 @@ export type UseLogsHistogramFunction = (
 const useLogsHistogram: UseLogsHistogramFunction = (
   fetchBuckets: FetchHistogramBucketsFunction,
 ): LogsHistogramState => {
-  const [buckets, setBuckets] = useState<Array<HistogramBucket>>([]);
+  const [histogram, setHistogram] =
+    useState<LogsHistogramData>(EMPTY_HISTOGRAM);
   const [isLoading, setIsLoading] = useState<boolean>(false);
 
   const silentRequestInFlight: React.MutableRefObject<boolean> =
@@ -78,15 +110,15 @@ const useLogsHistogram: UseLogsHistogramFunction = (
         }
 
         try {
-          const nextBuckets: Array<HistogramBucket> = await fetchBuckets();
+          const next: LogsHistogramData = toHistogramData(await fetchBuckets());
 
           if (currentQuery.current === fetchBuckets) {
-            setBuckets(nextBuckets);
+            setHistogram(next);
           }
         } catch {
           // The histogram is non-critical; degrade rather than fail the page.
           if (!isSilent && currentQuery.current === fetchBuckets) {
-            setBuckets([]);
+            setHistogram(EMPTY_HISTOGRAM);
           }
         } finally {
           if (isSilent) {
@@ -104,7 +136,8 @@ const useLogsHistogram: UseLogsHistogramFunction = (
   }, [refresh]);
 
   return {
-    buckets: buckets,
+    buckets: histogram.buckets,
+    bucketIntervalMs: histogram.bucketIntervalMs,
     isLoading: isLoading,
     refresh: refresh,
   };