@oneuptime/common 14.0.1 → 14.0.3

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) => {

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

@@ -35,6 +35,15 @@ export interface TelemetryFacetSidebarProps {
   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;
 }
 
 const TelemetryFacetSidebar: FunctionComponent<TelemetryFacetSidebarProps> = (
@@ -137,7 +146,12 @@ const TelemetryFacetSidebar: FunctionComponent<TelemetryFacetSidebarProps> = (
     });
 
   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">
           {props.headerLabel || "Filters"}

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

@@ -2,11 +2,7 @@ import React, {
   FunctionComponent,
   ReactElement,
   ReactNode,
-  useEffect,
   useMemo,
-  useCallback,
-  useRef,
-  useState,
 } from "react";
 import {
   BarChart,
@@ -21,6 +17,9 @@ import { HistogramBucket, HistogramSeriesOption } from "../types";
 import TelemetryHistogramTooltip from "./TelemetryHistogramTooltip";
 import ComponentLoader from "../../ComponentLoader/ComponentLoader";
 import OneUptimeDate from "../../../../Types/Date";
+import useHistogramRangeSelection, {
+  HistogramRangeSelectionState,
+} from "../../Charts/Utils/useHistogramRangeSelection";
 
 export interface TelemetryHistogramProps {
   buckets: Array<HistogramBucket>;
@@ -38,6 +37,12 @@ export interface TelemetryHistogramProps {
    * 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;
   // Extra controls rendered in the chart header (e.g. a metric selector).
   headerActions?: ReactNode;
   // Formats Y-axis ticks and tooltip values (e.g. milliseconds → "1.2 s").
@@ -93,15 +98,11 @@ function formatYAxisTick(value: number): string {
 const TelemetryHistogram: FunctionComponent<TelemetryHistogramProps> = (
   props: TelemetryHistogramProps,
 ): 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);
@@ -134,85 +135,6 @@ const TelemetryHistogram: FunctionComponent<TelemetryHistogramProps> = (
     });
   }, [props.buckets, props.series]);
 
-  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">
@@ -232,13 +154,23 @@ const TelemetryHistogram: FunctionComponent<TelemetryHistogramProps> = (
 
   return (
     <div className="rounded-lg border border-gray-200 bg-white">
-      <div className="flex items-center justify-between border-b border-gray-100 px-4 py-2">
-        <div className="flex items-center gap-2">
+      {/*
+       * Below md the header wraps rather than overflowing: at phone width a
+       * legend of several series plus the header actions ran past the
+       * viewport and scrolled the whole page sideways. From md up it is the
+       * single row it always was (md:flex-nowrap, md:gap-x-0).
+       */}
+      <div className="flex flex-wrap items-center justify-between gap-x-3 gap-y-1 border-b border-gray-100 px-4 py-2 md:flex-nowrap md:gap-x-0">
+        <div className="flex flex-wrap items-center gap-x-2 gap-y-0.5 md:flex-nowrap">
           <span className="text-xs font-medium text-gray-500">
             {props.title || "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">
@@ -246,7 +178,7 @@ const TelemetryHistogram: FunctionComponent<TelemetryHistogramProps> = (
             </span>
           )}
         </div>
-        <div className="flex items-center gap-3">
+        <div className="flex flex-wrap items-center gap-x-3 gap-y-1 md:flex-nowrap">
           {activeSeries.map((option: HistogramSeriesOption) => {
             return (
               <div key={option.key} className="flex items-center gap-1.5">
@@ -276,15 +208,15 @@ const TelemetryHistogram: FunctionComponent<TelemetryHistogramProps> = (
             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}
             >
@@ -326,7 +258,7 @@ const TelemetryHistogram: FunctionComponent<TelemetryHistogramProps> = (
                   />
                 }
                 cursor={{ fill: "rgba(99,102,241,0.06)" }}
-                {...(isDragging ? { active: false } : {})}
+                {...(selection.isDragging ? { active: false } : {})}
               />
               {activeSeries.map(
                 (option: HistogramSeriesOption, index: number) => {
@@ -344,10 +276,10 @@ const TelemetryHistogram: FunctionComponent<TelemetryHistogramProps> = (
                   );
                 },
               )}
-              {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/TelemetryViewer/components/TelemetrySearchBar.tsx

@@ -424,7 +424,15 @@ const TelemetrySearchBar: React.ForwardRefExoticComponent<
             }}
             onKeyDown={handleKeyDown}
             placeholder={props.placeholder || "Search..."}
-            className="flex-1 bg-transparent font-mono text-sm text-gray-900 placeholder-gray-400 outline-none"
+            /*
+             * min-w-0 below md: an input's default minimum is its intrinsic
+             * ~20ch width, so in a narrow box on a phone it overflowed and its
+             * placeholder painted over the toolbar buttons beside it. From md
+             * up it keeps that minimum: there the box can be squeezed to a
+             * sliver by a crowded toolbar, and an input shrunk to fit would
+             * leave nothing to click.
+             */
+            className="min-w-0 flex-1 bg-transparent font-mono text-sm text-gray-900 placeholder-gray-400 outline-none md:min-w-[auto]"
             spellCheck={false}
             autoComplete="off"
           />

package/UI/Components/Tooltip/InfoTooltip.tsx

@@ -0,0 +1,78 @@
+import React, { FunctionComponent, ReactElement } from "react";
+import IconProp from "../../../Types/Icon/IconProp";
+import Icon from "../Icon/Icon";
+import Tooltip from "./Tooltip";
+
+/*
+ * A small (i) beside a label that explains it on hover or keyboard focus -
+ * "what does p95 mean?" answered where the number is, rather than in the
+ * docs. Built for metric tiles and chart headers, but nothing here is
+ * metric-specific.
+ *
+ * The trigger is a real <button> so it is reachable with Tab and announced
+ * as a control; Tippy shows the text on focus as well as on hover and links
+ * it with aria-describedby. It is lazy: an overview page draws dozens of
+ * these, and none of them needs a Tippy instance until someone reaches for
+ * it.
+ *
+ * A click is swallowed, and so are Enter and Space: the (i) can sit inside a
+ * card that is itself a link or a button, and asking what a number means
+ * should not navigate away from it.
+ */
+
+export interface ComponentProps {
+  // The explanation. Nothing renders when it is empty.
+  text?: string | undefined;
+  /*
+   * What is being explained, e.g. the metric's title. Names the button for
+   * screen readers ("About p95 duration") and is never shown.
+   */
+  label: string;
+  className?: string | undefined;
+  iconClassName?: string | undefined;
+  dataTestId?: string | undefined;
+}
+
+const InfoTooltip: FunctionComponent<ComponentProps> = (
+  props: ComponentProps,
+): ReactElement => {
+  const text: string = (props.text || "").trim();
+
+  if (!text) {
+    return <></>;
+  }
+
+  return (
+    <Tooltip text={text} lazy={true}>
+      <button
+        type="button"
+        aria-label={`About ${props.label}`}
+        data-testid={props.dataTestId}
+        className={`inline-flex flex-shrink-0 items-center justify-center rounded-full text-gray-400 hover:text-gray-600 focus:outline-none focus-visible:text-gray-600 focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-1 ${
+          props.className || ""
+        }`}
+        onClick={(event: React.MouseEvent<HTMLButtonElement>): void => {
+          event.preventDefault();
+          event.stopPropagation();
+        }}
+        /*
+         * A clickable card that handles Enter / Space itself (InfoCard, a
+         * tile acting as a button) would otherwise hear these keys bubble up
+         * from the (i) and activate.
+         */
+        onKeyDown={(event: React.KeyboardEvent<HTMLButtonElement>): void => {
+          if (event.key === "Enter" || event.key === " ") {
+            event.stopPropagation();
+          }
+        }}
+      >
+        <Icon
+          icon={IconProp.InformationCircle}
+          className={props.iconClassName || "h-3.5 w-3.5"}
+        />
+      </button>
+    </Tooltip>
+  );
+};
+
+export default InfoTooltip;

package/UI/Utils/ModelAPI/ProjectUsersModelAPI.ts

@@ -141,6 +141,24 @@ export default class ProjectUsersModelAPI extends ModelAPI {
       return ModelAPI.deleteItem<TBaseModel>(data);
     }
 
+    await this.removeUserFromProject({
+      userId: userId,
+      requestOptions: data.requestOptions,
+    });
+  }
+
+  /**
+   * Removes one user from the current project - every team they belong to in
+   * it - in a single `remove-user-from-project` request. See deleteItem for
+   * why this must not be a DELETE per membership.
+   *
+   * Public so that every "remove from project" in the product goes through the
+   * same all-or-nothing request, not just the Users table's.
+   */
+  public static async removeUserFromProject(data: {
+    userId: ObjectID;
+    requestOptions?: RequestOptions | undefined;
+  }): Promise<void> {
     const url: URL = URL.fromString(APP_API_URL.toString())
       .addRoute(new TeamMember().getCrudApiPath()!)
       .addRoute("/remove-user-from-project");
@@ -149,7 +167,7 @@ export default class ProjectUsersModelAPI extends ModelAPI {
       await API.post<JSONObject>({
         url: url,
         data: {
-          userId: userId.toString(),
+          userId: data.userId.toString(),
         },
         headers: ModelAPI.getCommonHeaders(data.requestOptions),
       });

package/UI/Utils/PermissionGate.ts

@@ -79,6 +79,13 @@ export interface PermissionGateOptions {
    * what the user sees on screen ("Monitor" vs "Monitor Template").
    */
   singularName?: string | undefined;
+  /*
+   * The verb to use in the message when the operation is presented as
+   * something other than its own name - a table of links whose delete action
+   * is labelled "Unlink", say. Only the wording changes: the permissions
+   * checked and listed are still the ones for `action`.
+   */
+  verb?: string | undefined;
 }
 
 /*
@@ -176,15 +183,17 @@ export default class PermissionGate {
     const singularName: string =
       options?.singularName || model.singularName || "item";
 
+    const verb: string = (options?.verb?.trim() || action).toLowerCase();
+
     const titles: Array<string> = this.getPermissionTitles(
       this.getModelPermissions(model, action),
     );
 
     if (titles.length === 0) {
-      return `You do not have permission to ${action} this ${singularName}.`;
+      return `You do not have permission to ${verb} this ${singularName}.`;
     }
 
-    return `You do not have permission to ${action} this ${singularName}. You need one of these permissions: ${titles.join(
+    return `You do not have permission to ${verb} this ${singularName}. You need one of these permissions: ${titles.join(
       ", ",
     )}.`;
   }