@oneuptime/common 13.0.3 → 13.0.5

package/UI/Components/TelemetryViewer/types.ts

@@ -1,3 +1,6 @@
+import { LockedFilterDetail } from "../../../Types/Telemetry/LockedFilterDetail";
+import IconProp from "../../../Types/Icon/IconProp";
+
 /*
  * Generic types for the TelemetryViewer shell. Shared by logs, traces,
  * metrics, and exceptions viewers.
@@ -22,6 +25,11 @@ export interface ActiveFilter {
   displayKey: string;
   displayValue: string;
   readOnly?: boolean | undefined;
+  /*
+   * For a read-only chip: what it matches and why it is locked, rendered as
+   * the chip's tooltip and folded into "Copy filter". Display only.
+   */
+  lockedDetail?: LockedFilterDetail | undefined;
 }
 
 export interface HistogramBucket {
@@ -64,6 +72,17 @@ export interface FacetConfig {
    * values from the backend (used for resource facets backed by Postgres).
    */
   serverSearchable?: boolean | undefined;
+  // Optional icon shown beside the section title (e.g. resource brand icon).
+  icon?: IconProp | undefined;
+  /*
+   * When true, the sidebar folds the section away while it has no values,
+   * no active selection and no search in progress, and counts it in the
+   * "N empty filters hidden" footer instead. Meant for resource facets,
+   * where an empty list means the project has no resource of that type.
+   */
+  hideWhenEmpty?: boolean | undefined;
+  // Plural noun used in the empty state once revealed ("Docker Hosts").
+  emptyStateNoun?: string | undefined;
 }
 
 export interface SearchHelpRow {

package/UI/Components/TelemetryViewer/useFacetSearchExemptions.ts

@@ -0,0 +1,158 @@
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import { FacetData } from "./types";
+import {
+  getFacetSearchExemptKeys,
+  getNonEmptySearchTextByKey,
+} from "./FacetVisibility";
+
+export type FacetSearchChangeHandler = (
+  facetKey: string,
+  searchText: string,
+) => void;
+
+export interface FacetSearchExemptionsOptions {
+  facetData: FacetData;
+  // The sidebar's server-search callback, if the host supports one.
+  onFacetSearchChange?: FacetSearchChangeHandler | undefined;
+}
+
+export interface FacetSearchExemptions {
+  // Each section's search box text, lifted so it survives a remount.
+  searchTextByKey: Readonly<Record<string, string>>;
+  setSearchText: (facetKey: string, searchText: string) => void;
+  /*
+   * Search text (trimmed, non-empty) that was last sent to the server for a
+   * facet when the current facetData arrived — i.e. the search the values on
+   * screen answer.
+   */
+  searchedAtArrivalByKey: Readonly<Record<string, string>>;
+  // Facets that must stay on screen because of search.
+  searchExemptKeys: ReadonlySet<string>;
+  /*
+   * The debounced server-search callback for one facet: records what was
+   * sent, then forwards it to onFacetSearchChange. The same function comes
+   * back for a key on every render, so a section's debounce timer is not
+   * re-armed each time the host re-renders. Undefined when the host gave no
+   * onFacetSearchChange.
+   */
+  getSearchChangeHandler: (
+    facetKey: string,
+  ) => ((searchText: string) => void) | undefined;
+}
+
+export type UseFacetSearchExemptionsFunction = (
+  options: FacetSearchExemptionsOptions,
+) => FacetSearchExemptions;
+
+/*
+ * Resource facets are server-searchable, and a search that matches nothing
+ * comes back as an empty list — exactly what "hide empty resource facets"
+ * folds away. Left alone, the section would disappear under the user's
+ * cursor, and clearing the box would make it vanish and reappear, because
+ * the stale empty answer stays in facetData until the debounced refetch
+ * lands.
+ *
+ * This hook owns the sections' search text and the record of what was last
+ * sent to the server, and answers which facets are exempt from hiding.
+ */
+const useFacetSearchExemptions: UseFacetSearchExemptionsFunction = (
+  options: FacetSearchExemptionsOptions,
+): FacetSearchExemptions => {
+  const [searchTextByKey, setSearchTextByKey] = useState<
+    Record<string, string>
+  >({});
+
+  const lastEmittedRef: React.MutableRefObject<Record<string, string>> = useRef<
+    Record<string, string>
+  >({});
+
+  const onFacetSearchChangeRef: React.MutableRefObject<
+    FacetSearchChangeHandler | undefined
+  > = useRef<FacetSearchChangeHandler | undefined>(options.onFacetSearchChange);
+
+  useEffect(() => {
+    onFacetSearchChangeRef.current = options.onFacetSearchChange;
+  });
+
+  const handlersRef: React.MutableRefObject<
+    Map<string, (searchText: string) => void>
+  > = useRef<Map<string, (searchText: string) => void>>(
+    new Map<string, (searchText: string) => void>(),
+  );
+
+  const setSearchText: (facetKey: string, searchText: string) => void =
+    useCallback((facetKey: string, searchText: string): void => {
+      setSearchTextByKey(
+        (previous: Record<string, string>): Record<string, string> => {
+          if ((previous[facetKey] ?? "") === searchText) {
+            return previous;
+          }
+          return { ...previous, [facetKey]: searchText };
+        },
+      );
+    }, []);
+
+  /*
+   * Snapshotted once per facetData object, deliberately: what matters is
+   * which searches were in flight when this response arrived, not what has
+   * been sent since. Sending "" after clearing the box must not un-exempt
+   * the stale empty answer still on screen — only the next response may.
+   */
+  const searchedAtArrivalByKey: Record<string, string> = useMemo(() => {
+    return getNonEmptySearchTextByKey(lastEmittedRef.current);
+  }, [options.facetData]);
+
+  const searchExemptKeys: Set<string> = useMemo(() => {
+    return getFacetSearchExemptKeys(searchTextByKey, searchedAtArrivalByKey);
+  }, [searchTextByKey, searchedAtArrivalByKey]);
+
+  const hasSearchCallback: boolean = options.onFacetSearchChange !== undefined;
+
+  const getSearchChangeHandler: (
+    facetKey: string,
+  ) => ((searchText: string) => void) | undefined = (
+    facetKey: string,
+  ): ((searchText: string) => void) | undefined => {
+    if (!hasSearchCallback) {
+      return undefined;
+    }
+
+    const existing: ((searchText: string) => void) | undefined =
+      handlersRef.current.get(facetKey);
+
+    if (existing) {
+      return existing;
+    }
+
+    const handler: (searchText: string) => void = (
+      searchText: string,
+    ): void => {
+      // Recorded first, so a host that answers synchronously is covered.
+      lastEmittedRef.current = {
+        ...lastEmittedRef.current,
+        [facetKey]: searchText,
+      };
+      onFacetSearchChangeRef.current?.(facetKey, searchText);
+    };
+
+    handlersRef.current.set(facetKey, handler);
+
+    return handler;
+  };
+
+  return {
+    searchTextByKey: searchTextByKey,
+    setSearchText: setSearchText,
+    searchedAtArrivalByKey: searchedAtArrivalByKey,
+    searchExemptKeys: searchExemptKeys,
+    getSearchChangeHandler: getSearchChangeHandler,
+  };
+};
+
+export default useFacetSearchExemptions;

package/UI/Components/TelemetryViewer/useFacetSectionSearch.ts

@@ -0,0 +1,102 @@
+import React, { useEffect, useRef, useState } from "react";
+
+export const FACET_SEARCH_DEBOUNCE_MS: number = 300;
+
+export interface FacetSectionSearchOptions {
+  /*
+   * Controlled search text. When set, the section shows this and reports
+   * edits through onSearchTextChange; when undefined it keeps its own.
+   */
+  searchText?: string | undefined;
+  onSearchTextChange?: ((searchText: string) => void) | undefined;
+  /*
+   * Debounced server search: called with the trimmed text 300ms after the
+   * last edit, and once on mount, so the host can refetch facet values.
+   */
+  onSearchChange?: ((searchText: string) => void) | undefined;
+  /*
+   * Whether the section is showing its search box. A query the user can no
+   * longer see is a filter they cannot cancel, so it stops applying — and is
+   * cleared — while the box is gone.
+   */
+  isSearchVisible: boolean;
+}
+
+export interface FacetSectionSearch {
+  // What the box shows.
+  searchText: string;
+  // What the section filters by: the box's text, or "" while it is hidden.
+  activeSearchText: string;
+  setSearchText: (searchText: string) => void;
+}
+
+export type UseFacetSectionSearchFunction = (
+  options: FacetSectionSearchOptions,
+) => FacetSectionSearch;
+
+/*
+ * The search state every facet section shares (Logs and Telemetry alike):
+ * controlled or uncontrolled text, and the debounced upward emit. The local
+ * filter applies immediately; only the server round-trip waits.
+ */
+const useFacetSectionSearch: UseFacetSectionSearchFunction = (
+  options: FacetSectionSearchOptions,
+): FacetSectionSearch => {
+  const [localSearchText, setLocalSearchText] = useState<string>("");
+
+  const isControlled: boolean = options.searchText !== undefined;
+  const searchText: string = isControlled
+    ? options.searchText || ""
+    : localSearchText;
+
+  const onSearchTextChange: FacetSectionSearchOptions["onSearchTextChange"] =
+    options.onSearchTextChange;
+
+  const setSearchText: (nextSearchText: string) => void = (
+    nextSearchText: string,
+  ): void => {
+    if (!isControlled) {
+      setLocalSearchText(nextSearchText);
+    }
+    onSearchTextChange?.(nextSearchText);
+  };
+
+  const onSearchChange: FacetSectionSearchOptions["onSearchChange"] =
+    options.onSearchChange;
+  const lastEmittedRef: React.MutableRefObject<string | null> = useRef<
+    string | null
+  >(null);
+
+  useEffect(() => {
+    if (!onSearchChange) {
+      return;
+    }
+    const trimmed: string = searchText.trim();
+    if (lastEmittedRef.current === trimmed) {
+      return;
+    }
+    const handle: ReturnType<typeof setTimeout> = setTimeout(() => {
+      lastEmittedRef.current = trimmed;
+      onSearchChange(trimmed);
+    }, FACET_SEARCH_DEBOUNCE_MS);
+    return () => {
+      clearTimeout(handle);
+    };
+  }, [searchText, onSearchChange]);
+
+  const hasSearchText: boolean = searchText !== "";
+
+  useEffect(() => {
+    if (!options.isSearchVisible && hasSearchText) {
+      setSearchText("");
+    }
+  }, [options.isSearchVisible, hasSearchText]);
+
+  return {
+    searchText: searchText,
+    activeSearchText: options.isSearchVisible ? searchText : "",
+    setSearchText: setSearchText,
+  };
+};
+
+export default useFacetSectionSearch;

package/UI/Utils/Clipboard.ts

@@ -1,5 +1,71 @@
+/*
+ * Clipboard writes that report whether anything was actually copied.
+ *
+ * `navigator.clipboard` is absent on plain-http origins (a self-hosted
+ * install reached over a LAN hostname), inside some sandboxed frames and in
+ * older browsers, and `writeText` rejects when the document is not focused.
+ * An affordance that awaits an optional-chained call and then says
+ * "Copied!" lies in every one of those cases. The legacy execCommand path
+ * still works where the async API is missing, so it is the fallback; the
+ * boolean is what lets a caller show "Copy failed" instead of a green tick.
+ */
 export default class Clipboard {
-  public static async copyToClipboard(text: string): Promise<void> {
-    await navigator.clipboard?.writeText(text);
+  public static async copyToClipboard(text: string): Promise<boolean> {
+    try {
+      if (
+        typeof navigator !== "undefined" &&
+        navigator.clipboard &&
+        typeof navigator.clipboard.writeText === "function"
+      ) {
+        await navigator.clipboard.writeText(text);
+
+        return true;
+      }
+    } catch {
+      /*
+       * The async API refused (document not focused, permission denied):
+       * fall through to the legacy path rather than give up.
+       */
+    }
+
+    return Clipboard.copyWithExecCommand(text);
+  }
+
+  /*
+   * A hidden, read-only textarea selected and copied through the deprecated
+   * command. Off-screen rather than display:none — a hidden element cannot
+   * be selected, and selection is what the command copies.
+   */
+  private static copyWithExecCommand(text: string): boolean {
+    if (
+      typeof document === "undefined" ||
+      typeof document.execCommand !== "function" ||
+      !document.body
+    ) {
+      return false;
+    }
+
+    const textarea: HTMLTextAreaElement = document.createElement("textarea");
+    textarea.value = text;
+    textarea.setAttribute("readonly", "");
+    textarea.setAttribute("aria-hidden", "true");
+    textarea.style.position = "fixed";
+    textarea.style.top = "0";
+    textarea.style.left = "-9999px";
+    textarea.style.opacity = "0";
+    textarea.style.pointerEvents = "none";
+
+    document.body.appendChild(textarea);
+
+    try {
+      textarea.select();
+      textarea.setSelectionRange(0, text.length);
+
+      return document.execCommand("copy") === true;
+    } catch {
+      return false;
+    } finally {
+      textarea.remove();
+    }
   }
 }

package/UI/Utils/Navigation.ts

@@ -228,8 +228,23 @@ abstract class Navigation {
 
       let isOnThisPage: boolean = true;
 
-      const routeItems: Array<string> = route.toString().split("/");
-      const currentPathItems: Array<string> = current.toString().split("/");
+      /*
+       * React Router resolves `/page` and `/page/` to the same route. Match
+       * that behavior here so side-menu selection and the compact mobile
+       * label do not disappear when a bookmarked URL carries a trailing
+       * slash. Keep `/` intact so the root route still has a segment.
+       */
+      const trimTrailingSlashes: (path: string) => string = (
+        path: string,
+      ): string => {
+        return path.length > 1 ? path.replace(/\/+$/, "") : path;
+      };
+      const routeItems: Array<string> = trimTrailingSlashes(
+        route.toString(),
+      ).split("/");
+      const currentPathItems: Array<string> = trimTrailingSlashes(
+        current.toString(),
+      ).split("/");
       if (routeItems.length !== currentPathItems.length) {
         return false;
       }