@oneuptime/common 14.0.0 → 14.0.2

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

package/UI/Components/ModelTable/BaseModelTable.tsx

@@ -210,6 +210,18 @@ export interface BulkActionProps<T extends BaseModel | AnalyticsBaseModel> {
   deleteConfirmationWarning?: string | undefined;
 }
 
+/**
+ * What the per-row Delete confirmation says, when the table's own sentence
+ * ("Are you sure you want to delete ...?") is not the whole story - removing a
+ * team membership, say, where the row being deleted is not a thing but a
+ * relationship, and deleting the last one takes the user out of the project.
+ */
+export interface DeleteConfirmation {
+  title?: string | undefined;
+  description: string | ReactElement;
+  submitButtonText?: string | undefined;
+}
+
 export interface BaseTableProps<
   TBaseModel extends BaseModel | AnalyticsBaseModel,
 > {
@@ -280,6 +292,14 @@ export interface BaseTableProps<
   onItemDeleted?: ((item: TBaseModel) => void) | undefined;
   onBeforeEdit?: ((item: TBaseModel) => Promise<TBaseModel>) | undefined;
   onBeforeDelete?: ((item: TBaseModel) => Promise<TBaseModel>) | undefined;
+  /*
+   * Supplies the per-row Delete confirmation's wording for the row that was
+   * clicked. Runs after onBeforeDelete and before the dialog opens, so it may
+   * fetch; if it throws, the dialog does not open and the row shows the error.
+   */
+  getDeleteConfirmation?:
+    | ((item: TBaseModel) => Promise<DeleteConfirmation>)
+    | undefined;
   onBeforeView?: ((item: TBaseModel) => Promise<TBaseModel>) | undefined;
   sortBy?: keyof TBaseModel | undefined;
   sortOrder?: SortOrder | undefined;
@@ -507,6 +527,25 @@ const getItemLabel: GetItemLabelFunction = (item: unknown): string => {
   return "";
 };
 
+type GetDeleteLabelFunction = (
+  singularName: string | undefined,
+  modelSingularName: string | null | undefined,
+) => string;
+
+/*
+ * What the Delete dialog calls a row when it cannot name it. A table may pass a
+ * blank singularName to keep its create button down to a bare verb - the
+ * user's Teams tab passes " " so its button reads "Invite" - and read verbatim
+ * that turned the dialog into "Are you sure you want to delete this  ?". A
+ * blank name is no name, so it falls through to the model's own.
+ */
+const getDeleteLabel: GetDeleteLabelFunction = (
+  singularName: string | undefined,
+  modelSingularName: string | null | undefined,
+): string => {
+  return singularName?.trim() || modelSingularName?.trim() || "Item";
+};
+
 const BaseModelTable: <TBaseModel extends BaseModel | AnalyticsBaseModel>(
   props: ComponentProps<TBaseModel>,
 ) => ReactElement = <TBaseModel extends BaseModel | AnalyticsBaseModel>(
@@ -1221,6 +1260,9 @@ const BaseModelTable: <TBaseModel extends BaseModel | AnalyticsBaseModel>(
     useState<TBaseModel | null>(null);
   const [currentDeleteableItem, setCurrentDeleteableItem] =
     useState<TBaseModel | null>(null);
+  // The caller's wording for the open Delete dialog; null means the default.
+  const [deleteConfirmation, setDeleteConfirmation] =
+    useState<DeleteConfirmation | null>(null);
 
   /*
    * A page size that came in on the URL wins over the viewer's own stored
@@ -2883,6 +2925,11 @@ const BaseModelTable: <TBaseModel extends BaseModel | AnalyticsBaseModel>(
                 item = await props.onBeforeDelete(item);
               }
 
+              setDeleteConfirmation(
+                props.getDeleteConfirmation
+                  ? await props.getDeleteConfirmation(item)
+                  : null,
+              );
               setShowDeleteConfirmModal(true);
               setCurrentDeleteableItem(item);
               onCompleteAction();
@@ -4691,23 +4738,28 @@ const BaseModelTable: <TBaseModel extends BaseModel | AnalyticsBaseModel>(
 
       {showDeleteConfirmModal && (
         <ConfirmModal
-          title={`Delete ${props.singularName || model.singularName}`}
-          description={((): string => {
-            const label: string = (
-              props.singularName ||
-              model.singularName ||
-              "item"
-            ).toLowerCase();
-            const name: string = getItemLabel(currentDeleteableItem);
-
-            return `Are you sure you want to delete ${
-              name ? `"${name}"` : `this ${label}`
-            }? This action cannot be undone.`;
-          })()}
+          title={
+            deleteConfirmation?.title ||
+            `Delete ${getDeleteLabel(props.singularName, model.singularName)}`
+          }
+          description={
+            deleteConfirmation?.description ||
+            ((): string => {
+              const label: string = getDeleteLabel(
+                props.singularName,
+                model.singularName,
+              ).toLowerCase();
+              const name: string = getItemLabel(currentDeleteableItem);
+
+              return `Are you sure you want to delete ${
+                name ? `"${name}"` : `this ${label}`
+              }? This action cannot be undone.`;
+            })()
+          }
           onClose={() => {
             setShowDeleteConfirmModal(false);
           }}
-          submitButtonText={"Delete"}
+          submitButtonText={deleteConfirmation?.submitButtonText || "Delete"}
           onSubmit={async () => {
             if (currentDeleteableItem && currentDeleteableItem["_id"]) {
               await deleteItem(currentDeleteableItem);

package/UI/Components/MonitorGraphs/Uptime.tsx

@@ -45,6 +45,12 @@ export interface ComponentProps {
   uptimeBuckets?: Array<UptimeDayBucket> | undefined;
   /* Statuses by id, so a bucket's durations can be given a name and colour. */
   monitorStatuses?: Array<MonitorStatus> | undefined;
+  /*
+   * The zone uptimeBuckets were cut in, so the bars are drawn on the same
+   * day boundaries. The browser's own zone when absent, which is only right
+   * when the buckets were asked for in the browser's zone (the dashboard).
+   */
+  uptimeTimezone?: string | undefined;
   defaultBarColor: Color;
   incidents?: Array<UptimeBarTooltipIncident> | undefined;
   onBarClick?: (
@@ -118,6 +124,11 @@ const MonitorUptimeGraph: FunctionComponent<ComponentProps> = (
               seconds: duration.seconds,
               color: status?.color || props.defaultBarColor,
               isDowntime: downtimeIds.includes(statusId),
+              /*
+               * So a day painted from this bucket alone takes the colour of
+               * its worst status, as a day painted from timeline rows does.
+               */
+              priority: status?.priority ?? undefined,
             };
           },
         ),
@@ -149,6 +160,7 @@ const MonitorUptimeGraph: FunctionComponent<ComponentProps> = (
       endDate={props.endDate}
       events={events}
       dayReadings={dayReadings}
+      timezone={props.uptimeTimezone}
       defaultBarColor={props.defaultBarColor}
       height={props.height}
       barColorRules={barColorRules}

package/UI/Components/MonitorGraphs/UptimeBarDayModal.tsx

@@ -1,6 +1,7 @@
 import Modal, { ModalWidth } from "../Modal/Modal";
 import UptimeDaySummary, { StatusDuration } from "../Graphs/UptimeDaySummary";
 import OneUptimeDate from "../../../Types/Date";
+import DayUptimeGraphUtil from "../../../Utils/Uptime/DayUptimeGraphUtil";
 import UptimeBarTooltipIncident from "../../../Types/Monitor/UptimeBarTooltipIncident";
 import UptimeHistoryLabels, {
   DefaultUptimeHistoryLabels,
@@ -22,6 +23,11 @@ export interface ComponentProps {
   statusDurations?: Array<StatusDuration> | undefined;
   /* Defaults to English. The status page passes translated strings. */
   labels?: UptimeHistoryLabels | undefined;
+  /*
+   * The zone the day was drawn in, so the dialog names the same day as the
+   * bar that opened it. The browser's own zone when absent.
+   */
+  timezone?: string | undefined;
 }
 
 /*
@@ -36,8 +42,10 @@ export interface ComponentProps {
 const UptimeBarDayModal: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ): ReactElement => {
-  const dateStr: string =
-    OneUptimeDate.getDateAsUserFriendlyLocalFormattedString(props.date, true);
+  const dateStr: string = DayUptimeGraphUtil.formatDayLabel({
+    date: props.date,
+    timezone: props.timezone,
+  });
 
   const labels: UptimeHistoryLabels =
     props.labels || DefaultUptimeHistoryLabels;

package/UI/Components/Page/ModelPage.tsx

@@ -25,6 +25,13 @@ export interface ComponentProps<TBaseModel extends BaseModel> {
   modelId: ObjectID;
   modelNameField: string;
   modelAPI?: typeof ModelAPI | undefined;
+  /*
+   * Bump to read the header again for the same model, after an edit to its
+   * name or labels, say. The page below stays mounted while it reloads, and a
+   * refresh that fails keeps the header already on screen rather than
+   * replacing the whole page with an error.
+   */
+  refreshToken?: number | undefined;
 }
 
 /*
@@ -54,6 +61,42 @@ const ModelPage: <TBaseModel extends BaseModel>(
     null,
   );
 
+  /*
+   * Mirrors loadedHeader, so a read that finishes can see what is on screen
+   * now rather than what was on screen when the read started.
+   */
+  const loadedHeaderRef: MutableRefObject<LoadedModelHeader | null> =
+    useRef<LoadedModelHeader | null>(null);
+
+  type ShowHeaderFunction = (header: LoadedModelHeader) => void;
+
+  const showHeader: ShowHeaderFunction = (header: LoadedModelHeader): void => {
+    loadedHeaderRef.current = header;
+    setLoadedHeader(header);
+  };
+
+  type IsShowingHeaderForFunction = (modelId: string) => boolean;
+
+  /*
+   * Whether a failed read of this model is a refresh of a header already on
+   * screen, which it must then leave alone. A refresh that fails - a network
+   * blip, a timeout - would otherwise replace the title, the labels and the
+   * whole page below them with an error, for a model the reader could see a
+   * moment ago. Only a header that loaded without an error counts, so a page
+   * showing an error still recovers on the next refresh.
+   */
+  const isShowingHeaderFor: IsShowingHeaderForFunction = (
+    modelId: string,
+  ): boolean => {
+    const headerOnScreen: LoadedModelHeader | null = loadedHeaderRef.current;
+
+    return (
+      headerOnScreen !== null &&
+      headerOnScreen.modelId === modelId &&
+      !headerOnScreen.error
+    );
+  };
+
   /*
    * Bumped by every fetch, when the model changes and on unmount. A response
    * only lands while no newer fetch has started, so a slow read of the model
@@ -146,12 +189,25 @@ const ModelPage: <TBaseModel extends BaseModel>(
       return;
     }
 
-    setLoadedHeader(header);
+    if (header.error && isShowingHeaderFor(requestedModelId)) {
+      return;
+    }
+
+    showHeader(header);
   };
 
+  /*
+   * A refreshToken bump reads the same model again. The header keeps its id
+   * stamp while it does, so the page below is never unmounted by a refresh;
+   * only a different id takes the page back to the loader.
+   */
   useEffect(() => {
     fetchItem(props.modelId).catch((err: Error) => {
-      setLoadedHeader({
+      if (isShowingHeaderFor(modelIdString)) {
+        return;
+      }
+
+      showHeader({
         modelId: modelIdString,
         title: props.title,
         labels: [],
@@ -162,7 +218,7 @@ const ModelPage: <TBaseModel extends BaseModel>(
     return () => {
       latestRequestRef.current++;
     };
-  }, [modelIdString]);
+  }, [modelIdString, props.refreshToken]);
 
   /*
    * Decided at render time, not in an effect: the very first render for a

package/UI/Components/TelemetryViewer/TelemetryViewer.tsx

@@ -1,4 +1,4 @@
-import React, { ReactElement, ReactNode } from "react";
+import React, { ReactElement, ReactNode, useId, useState } from "react";
 import RangeStartAndEndDateTime from "../../../Types/Time/RangeStartAndEndDateTime";
 import {
   FacetData,
@@ -115,6 +115,11 @@ export interface TelemetryViewerProps<T> {
   histogramSeries?: Array<HistogramSeriesOption> | undefined;
   histogramTitle?: string | undefined;
   histogramLoading?: boolean;
+  /*
+   * How much time one histogram bar covers, as the query that drew the bars
+   * bucketed them. It is what lets a click on a bar open that bar's rows.
+   */
+  histogramBucketIntervalMs?: number | undefined;
   onHistogramTimeRangeSelect?:
     | ((startTime: Date, endTime: Date) => void)
     | undefined;
@@ -145,6 +150,14 @@ export interface TelemetryViewerProps<T> {
 
 const DEFAULT_PAGE_SIZE_OPTIONS: Array<number> = [25, 50, 100, 200];
 
+export const TELEMETRY_VIEWER_SEARCH_TEST_ID: string =
+  "telemetry-viewer-search";
+export const TELEMETRY_VIEWER_FILTERS_TOGGLE_TEST_ID: string =
+  "telemetry-viewer-filters-toggle";
+export const TELEMETRY_VIEWER_MAIN_AREA_TEST_ID: string =
+  "telemetry-viewer-main-area";
+export const TELEMETRY_VIEWER_LIST_TEST_ID: string = "telemetry-viewer-list";
+
 function TelemetryViewerInner<T>(props: TelemetryViewerProps<T>): ReactElement {
   const showFacets: boolean =
     (props.showFacetSidebar ?? true) &&
@@ -165,11 +178,32 @@ function TelemetryViewerInner<T>(props: TelemetryViewerProps<T>): ReactElement {
     onTimeRangeChange: props.onTimeRangeChange,
   });
 
+  /*
+   * Below md there is no room for the facet sidebar beside the list: at phone
+   * width it squeezed the list card to ~110px. There the sidebar stacks above
+   * the list instead, folded behind a "Filters" toggle so the list stays the
+   * first thing on screen. From md up the sidebar always shows and the toggle
+   * is hidden, so this state only matters on small screens.
+   */
+  const [isFacetPanelOpen, setIsFacetPanelOpen] = useState<boolean>(false);
+  const facetPanelId: string = useId();
+
+  const showFacetToggle: boolean = showFacets && !props.mainContentOverride;
+
   return (
     <div className="flex min-h-0 w-full flex-1 flex-col gap-3">
       {/* Toolbar */}
       <div className="flex flex-wrap items-center gap-2">
-        <div className="min-w-0 flex-1">
+        {/*
+         * Below md the search holds a 12rem basis, so the wrapping toolbar
+         * gives it its own row (shared with the Filters toggle at most) and
+         * does not squeeze it between the buttons. From md up it is flex-1
+         * again and takes whatever the buttons leave.
+         */}
+        <div
+          className="min-w-0 flex-[1_1_12rem] md:flex-1"
+          data-testid={TELEMETRY_VIEWER_SEARCH_TEST_ID}
+        >
           <TelemetrySearchBar
             ref={props.searchBarRef}
             value={props.searchValue}
@@ -189,6 +223,26 @@ function TelemetryViewerInner<T>(props: TelemetryViewerProps<T>): ReactElement {
           />
         </div>
 
+        {showFacetToggle && (
+          <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 ${
+              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={isFacetPanelOpen}
+            aria-controls={facetPanelId}
+            data-testid={TELEMETRY_VIEWER_FILTERS_TOGGLE_TEST_ID}
+            onClick={() => {
+              setIsFacetPanelOpen(!isFacetPanelOpen);
+            }}
+          >
+            <Icon icon={IconProp.Filter} className="h-3.5 w-3.5" />
+            <span>Filters</span>
+          </button>
+        )}
+
         {props.toolbarLeadingActions}
 
         <TelemetryTimeRangePicker
@@ -265,6 +319,7 @@ function TelemetryViewerInner<T>(props: TelemetryViewerProps<T>): ReactElement {
             isLoading={props.histogramLoading || false}
             series={props.histogramSeries}
             title={props.histogramTitle}
+            bucketIntervalMs={props.histogramBucketIntervalMs}
             onTimeRangeSelect={histogramZoom.onTimeRangeSelect}
             onZoomOut={histogramZoom.onZoomOut}
             headerActions={props.histogramHeaderActions}
@@ -272,14 +327,20 @@ function TelemetryViewerInner<T>(props: TelemetryViewerProps<T>): ReactElement {
           />
         )}
 
-      {/* Main area: facets + list */}
+      {/*
+       * Main area: facets + list. A column below md (the sidebar, when
+       * opened, stacks above the list); side by side from md up.
+       */}
       <div
-        className={`flex min-h-0 flex-1 gap-3 ${
+        className={`flex min-h-0 flex-1 flex-col gap-3 md:flex-row ${
           props.mainContentOverride ? "hidden" : ""
         }`}
+        data-testid={TELEMETRY_VIEWER_MAIN_AREA_TEST_ID}
       >
         {showFacets && (
           <TelemetryFacetSidebar
+            id={facetPanelId}
+            isCollapsedOnSmallScreens={!isFacetPanelOpen}
             facetData={props.facetData || {}}
             isLoading={props.facetLoading || false}
             facetConfigs={props.facetConfigs || []}
@@ -294,7 +355,10 @@ function TelemetryViewerInner<T>(props: TelemetryViewerProps<T>): ReactElement {
           />
         )}
 
-        <div className="flex min-w-0 flex-1 flex-col rounded-lg border border-gray-200 bg-white">
+        <div
+          className="flex min-w-0 flex-1 flex-col rounded-lg border border-gray-200 bg-white"
+          data-testid={TELEMETRY_VIEWER_LIST_TEST_ID}
+        >
           {props.error && (
             <div className="p-4">
               <ErrorMessage message={props.error} />

package/UI/Components/TelemetryViewer/components/TelemetryDetailPanel.tsx

@@ -24,6 +24,11 @@ export interface TelemetryDetailPanelProps {
   onTabChange: (tabId: string) => void;
   headerActions?: ReactNode;
   variant?: "floating" | "embedded";
+  /*
+   * Replaces the floating drawer's default width classes, including their
+   * cap at the viewport width, so a custom width should bring its own
+   * max-width (e.g. "w-[64rem] max-w-[95vw]").
+   */
   widthClassName?: string;
 }
 
@@ -95,7 +100,13 @@ const TelemetryDetailPanel: FunctionComponent<TelemetryDetailPanelProps> = (
     return null;
   }
 
-  const widthClassName: string = props.widthClassName || "w-[38rem]";
+  /*
+   * The drawer is pinned to the right edge, so on a viewport narrower than
+   * its width the overflow runs off the left edge and takes the header and
+   * content with it. max-w-full keeps it within the viewport on phones and
+   * leaves the 38rem width untouched wherever that fits.
+   */
+  const widthClassName: string = props.widthClassName || "w-[38rem] max-w-full";
 
   const activeTab: TelemetryDetailPanelTab | undefined = props.tabs.find(
     (t: TelemetryDetailPanelTab) => {