@oneuptime/common 13.0.4 → 13.0.5

package/UI/Components/Page/ModelPage.tsx

@@ -3,12 +3,16 @@ import ModelAPI from "../../Utils/ModelAPI/ModelAPI";
 import Page from "./Page";
 import BaseModel from "../../../Models/DatabaseModels/DatabaseBaseModel/DatabaseBaseModel";
 import Label from "../../../Models/DatabaseModels/Label";
-import { PromiseVoidFunction } from "../../../Types/FunctionTypes";
 import Link from "../../../Types/Link";
 import ObjectID from "../../../Types/ObjectID";
 import { JSONObject } from "../../../Types/JSON";
-import React, { ReactElement, useState } from "react";
-import useAsyncEffect from "use-async-effect";
+import React, {
+  MutableRefObject,
+  ReactElement,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
 import Select from "../../../Server/Types/Database/Select";
 
 export interface ComponentProps<TBaseModel extends BaseModel> {
@@ -23,21 +27,57 @@ export interface ComponentProps<TBaseModel extends BaseModel> {
   modelAPI?: typeof ModelAPI | undefined;
 }
 
+/*
+ * What the header shows for one model: its title, its labels, or why it could
+ * not be read. Stamped with the id it was read for, so it can never be shown
+ * for a different model.
+ */
+interface LoadedModelHeader {
+  modelId: string;
+  title: string | undefined;
+  labels: Array<Label>;
+  error: string;
+}
+
 const ModelPage: <TBaseModel extends BaseModel>(
   props: ComponentProps<TBaseModel>,
 ) => ReactElement = <TBaseModel extends BaseModel>(
   props: ComponentProps<TBaseModel>,
 ): ReactElement => {
-  const [isLoading, setIsLoading] = useState<boolean>(true);
+  /*
+   * Keyed on the id's string, not the ObjectID: layouts build a new ObjectID
+   * from the route params on every render.
+   */
+  const modelIdString: string = props.modelId.toString();
+
+  const [loadedHeader, setLoadedHeader] = useState<LoadedModelHeader | null>(
+    null,
+  );
+
+  /*
+   * 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
+   * the reader already left can never put its title back on the page.
+   */
+  const latestRequestRef: MutableRefObject<number> = useRef<number>(0);
+
+  type FetchItemFunction = (modelId: ObjectID) => Promise<void>;
 
-  const [error, setError] = useState<string>("");
-  const [labels, setLabels] = useState<Array<Label>>([]);
+  const fetchItem: FetchItemFunction = async (
+    modelId: ObjectID,
+  ): Promise<void> => {
+    const requestNumber: number = latestRequestRef.current + 1;
+    latestRequestRef.current = requestNumber;
 
-  const fetchItem: PromiseVoidFunction = async (): Promise<void> => {
-    // get item.
-    setIsLoading(true);
+    const requestedModelId: string = modelId.toString();
+
+    let header: LoadedModelHeader = {
+      modelId: requestedModelId,
+      title: props.title,
+      labels: [],
+      error: "",
+    };
 
-    setError("");
     try {
       const modelInstance: TBaseModel = new props.modelType();
       const labelsColumn: string | null =
@@ -59,66 +99,91 @@ const ModelPage: <TBaseModel extends BaseModel>(
 
       const item: TBaseModel | null = await modelAPI.getItem({
         modelType: props.modelType,
-        id: props.modelId,
+        id: modelId,
         select: select as Select<TBaseModel>,
         requestOptions: {},
       });
 
       if (!item) {
-        setError(
-          `Cannot load ${(
-            new props.modelType()?.singularName || "item"
-          ).toLowerCase()}. It could be because you don't have enough permissions to read this ${(
-            new props.modelType()?.singularName || "item"
-          ).toLowerCase()}.`,
-        );
-
-        return;
-      }
-
-      if (labelsColumn) {
-        const columnValue: Array<Label> | null = (
-          item as BaseModel
-        ).getColumnValue(labelsColumn) as Array<Label> | null;
-
-        const loadedLabels: Array<Label> =
-          columnValue || ((item as any)[labelsColumn] as Array<Label>) || [];
-        setLabels(loadedLabels);
+        const singularName: string = (
+          modelInstance.singularName || "item"
+        ).toLowerCase();
+
+        header = {
+          ...header,
+          error: `Cannot load ${singularName}. It could be because you don't have enough permissions to read this ${singularName}.`,
+        };
       } else {
-        setLabels([]);
+        let loadedLabels: Array<Label> = [];
+
+        if (labelsColumn) {
+          const columnValue: Array<Label> | null = (
+            item as BaseModel
+          ).getColumnValue(labelsColumn) as Array<Label> | null;
+
+          loadedLabels =
+            columnValue || ((item as any)[labelsColumn] as Array<Label>) || [];
+        }
+
+        header = {
+          ...header,
+          labels: loadedLabels,
+          title: `${props.title || ""} - ${
+            (item as any)[props.modelNameField] as string
+          }`,
+        };
       }
-
-      setTitle(
-        `${props.title || ""} - ${
-          (item as any)[props.modelNameField] as string
-        }`,
-      );
     } catch (err) {
-      setLabels([]);
-      setError(API.getFriendlyMessage(err));
-    } finally {
-      /*
-       * Must run even on the early "item not found" return above —
-       * otherwise the page shows its loader forever instead of the error.
-       */
-      setIsLoading(false);
+      header = {
+        ...header,
+        labels: [],
+        error: API.getFriendlyMessage(err),
+      };
     }
-  };
 
-  const [title, setTitle] = useState<string | undefined>(props.title);
+    // The reader moved to another model (or left) while this was in flight.
+    if (requestNumber !== latestRequestRef.current) {
+      return;
+    }
+
+    setLoadedHeader(header);
+  };
 
-  useAsyncEffect(async () => {
-    // fetch the model
-    await fetchItem();
-  }, []);
+  useEffect(() => {
+    fetchItem(props.modelId).catch((err: Error) => {
+      setLoadedHeader({
+        modelId: modelIdString,
+        title: props.title,
+        labels: [],
+        error: API.getFriendlyMessage(err),
+      });
+    });
+
+    return () => {
+      latestRequestRef.current++;
+    };
+  }, [modelIdString]);
+
+  /*
+   * Decided at render time, not in an effect: the very first render for a
+   * different model already shows the loader, so the children (which read the
+   * id from the route) are unmounted before they can render or fetch for the
+   * new model under the old one's header. Layouts keep ModelPage mounted when
+   * the reader follows a link to another record on the same route, so this is
+   * the only place that can notice.
+   */
+  const isCurrentModelLoaded: boolean =
+    loadedHeader !== null && loadedHeader.modelId === modelIdString;
+
+  const labels: Array<Label> = isCurrentModelLoaded ? loadedHeader!.labels : [];
 
   return (
     <Page
       {...props}
       labels={labels.length > 0 ? labels : undefined}
-      isLoading={isLoading}
-      error={error}
-      title={title}
+      isLoading={!isCurrentModelLoaded}
+      error={isCurrentModelLoaded ? loadedHeader!.error : ""}
+      title={isCurrentModelLoaded ? loadedHeader!.title : props.title}
     />
   );
 };

package/UI/Components/Table/Table.tsx

@@ -43,6 +43,10 @@ export interface ComponentProps<T extends GenericObject> {
    * bound and pagination switches to a prev/next-only UI.
    */
   hasMore?: boolean | undefined;
+  /** Page sizes offered by the shared ModelTable-style footer. */
+  itemsOnPageOptions?: Array<number> | undefined;
+  /** Optional stable id for consumers that need to target this footer. */
+  paginationDataTestId?: string | undefined;
   itemsOnPage: number;
   error: string;
   isLoading: boolean;
@@ -496,9 +500,13 @@ const Table: TableFunction = <T extends GenericObject>(
               hasMore={props.hasMore}
               itemsOnCurrentPage={props.data.length}
               itemsOnPage={props.itemsOnPage}
+              itemsOnPageOptions={props.itemsOnPageOptions}
               onNavigateToPage={props.onNavigateToPage}
               isLoading={props.isLoading}
               isError={Boolean(props.error)}
+              {...(props.paginationDataTestId
+                ? { dataTestId: props.paginationDataTestId }
+                : {})}
             />
           )}
         </div>

package/UI/Components/Table/TableRow.tsx

@@ -193,8 +193,13 @@ const TableRow: TableRowFunction = <T extends GenericObject>(
             <div className="space-y-3">
               {renderedColumns.map((column: Column<T>, i: number) => {
                 if (column.type === FieldType.Actions) {
+                  const customAction: ReactElement | null = column.getElement
+                    ? column.getElement(props.item)
+                    : null;
+
                   return (
                     <div key={i} className="flex flex-wrap gap-2">
+                      {customAction}
                       {error && (
                         <ConfirmModal
                           title={`Error`}
@@ -513,13 +518,16 @@ const TableRow: TableRowFunction = <T extends GenericObject>(
                     }
                   }}
                 >
-                  {columnContent !== null && columnContent !== undefined && (
-                    <div className={contentWrapperClassName}>
-                      {columnContent}
-                    </div>
-                  )}
+                  {column.type !== FieldType.Actions &&
+                    columnContent !== null &&
+                    columnContent !== undefined && (
+                      <div className={contentWrapperClassName}>
+                        {columnContent}
+                      </div>
+                    )}
                   {column.type === FieldType.Actions && (
                     <div className={actionsContainerClassName}>
+                      {columnContent}
                       {error && (
                         <div className="text-align-left">
                           <ConfirmModal

package/UI/Components/TelemetryViewer/FacetVisibility.ts

@@ -0,0 +1,229 @@
+import { FacetData } from "./types";
+
+/*
+ * Which facet sections a telemetry sidebar (Logs, Traces, Metrics,
+ * Exceptions) renders, and which it folds into the "N empty filters hidden"
+ * footer instead.
+ *
+ * Only resource facets (Host, Docker Host, Kubernetes Cluster, ...) may be
+ * folded away. The server answers every resource facet with the project's
+ * full Postgres list — count 0 for a resource with no telemetry in range — so
+ * an empty list means the project has no resource of that type at all (or a
+ * facet search matched nothing). Service, severity, status and friends are
+ * never hidden: an empty list there is a real answer about the time range.
+ *
+ * Kept free of React so every rule below is unit-testable as a truth table.
+ */
+
+export interface FacetVisibilityOptions {
+  // Facet keys in the order the sidebar lists them.
+  keys: ReadonlyArray<string>;
+  facetData: FacetData;
+  // Whether the facet may be folded away while it has nothing to show.
+  isHideable: (facetKey: string) => boolean;
+  activeValuesByKey: Readonly<Record<string, Set<string> | undefined>>;
+  /*
+   * Facets with a search in progress, or whose on-screen values answer a
+   * search. Never folded away: the section is what the user is typing in.
+   */
+  searchExemptKeys: ReadonlySet<string>;
+  // The footer's "Show" toggle: render hidden facets in their usual place.
+  showHidden: boolean;
+  // Section title per key, for the footer's tooltip. Defaults to the key.
+  getTitle?: ((facetKey: string) => string) | undefined;
+}
+
+export interface FacetVisibility {
+  // Keys to render, in the order they were given.
+  visibleKeys: Array<string>;
+  /*
+   * Hideable keys with nothing to show, in order. Still listed while
+   * showHidden reveals them, so the footer keeps its count.
+   */
+  hiddenKeys: Array<string>;
+  // Titles of hiddenKeys, same order.
+  hiddenTitles: Array<string>;
+  hiddenCount: number;
+}
+
+export const DEFAULT_FACET_EMPTY_STATE_TEXT: string =
+  "No values in this time range";
+
+const hasActiveValues: (activeValues: Set<string> | undefined) => boolean = (
+  activeValues: Set<string> | undefined,
+): boolean => {
+  return Boolean(activeValues && activeValues.size > 0);
+};
+
+export const computeFacetVisibility: (
+  options: FacetVisibilityOptions,
+) => FacetVisibility = (options: FacetVisibilityOptions): FacetVisibility => {
+  const visibleKeys: Array<string> = [];
+  const hiddenKeys: Array<string> = [];
+
+  for (const key of options.keys) {
+    if (!options.isHideable(key)) {
+      visibleKeys.push(key);
+      continue;
+    }
+
+    const isInUse: boolean =
+      hasActiveValues(options.activeValuesByKey[key]) ||
+      options.searchExemptKeys.has(key);
+
+    const values: FacetData[string] | undefined = options.facetData[key];
+
+    if (values === undefined) {
+      /*
+       * Not loaded yet (or not returned). Rendering it would flash a dozen
+       * empty resource sections — and a bogus "12 hidden" count — on every
+       * first load, so it is neither shown nor counted. The exception is a
+       * facet the user is working with: a selection or a search box must not
+       * vanish because a refetch failed.
+       */
+      if (isInUse) {
+        visibleKeys.push(key);
+      }
+      continue;
+    }
+
+    if (values.length > 0 || isInUse) {
+      visibleKeys.push(key);
+      continue;
+    }
+
+    hiddenKeys.push(key);
+
+    if (options.showHidden) {
+      visibleKeys.push(key);
+    }
+  }
+
+  const getTitle: (facetKey: string) => string =
+    options.getTitle ||
+    ((facetKey: string): string => {
+      return facetKey;
+    });
+
+  return {
+    visibleKeys: visibleKeys,
+    hiddenKeys: hiddenKeys,
+    hiddenTitles: hiddenKeys.map((key: string): string => {
+      return getTitle(key);
+    }),
+    hiddenCount: hiddenKeys.length,
+  };
+};
+
+// Keeps only entries with non-blank text, trimmed.
+export const getNonEmptySearchTextByKey: (
+  searchTextByKey: Readonly<Record<string, string | undefined>>,
+) => Record<string, string> = (
+  searchTextByKey: Readonly<Record<string, string | undefined>>,
+): Record<string, string> => {
+  const result: Record<string, string> = {};
+
+  for (const [key, text] of Object.entries(searchTextByKey)) {
+    const trimmed: string = (text || "").trim();
+    if (trimmed) {
+      result[key] = trimmed;
+    }
+  }
+
+  return result;
+};
+
+/*
+ * Facets a sidebar must keep on screen because of search:
+ *   - the box currently holds text (typing, or waiting on the debounce), or
+ *   - the values on screen answer a search — the text last sent to the
+ *     server was non-empty when this facetData arrived. Clearing the box
+ *     leaves that stale, empty answer in place until the refetch lands, and
+ *     the section must not blink out and back in meanwhile.
+ */
+export const getFacetSearchExemptKeys: (
+  searchTextByKey: Readonly<Record<string, string | undefined>>,
+  searchedAtArrivalByKey: Readonly<Record<string, string | undefined>>,
+) => Set<string> = (
+  searchTextByKey: Readonly<Record<string, string | undefined>>,
+  searchedAtArrivalByKey: Readonly<Record<string, string | undefined>>,
+): Set<string> => {
+  return new Set<string>([
+    ...Object.keys(getNonEmptySearchTextByKey(searchTextByKey)),
+    ...Object.keys(getNonEmptySearchTextByKey(searchedAtArrivalByKey)),
+  ]);
+};
+
+// "1 empty filter", "3 empty filters".
+export const formatEmptyFacetCount: (count: number) => string = (
+  count: number,
+): string => {
+  return `${count} empty ${count === 1 ? "filter" : "filters"}`;
+};
+
+// "1 empty filter hidden", "3 empty filters hidden".
+export const formatHiddenFacetCount: (hiddenCount: number) => string = (
+  hiddenCount: number,
+): string => {
+  return `${formatEmptyFacetCount(hiddenCount)} hidden`;
+};
+
+export const getFacetNoMatchesText: (searchText: string) => string = (
+  searchText: string,
+): string => {
+  return `No matches for “${searchText.trim()}”`;
+};
+
+// Empty state of a resource facet: the project has none of that resource.
+export const getHiddenFacetEmptyStateText: (
+  pluralNoun: string | undefined,
+) => string = (pluralNoun: string | undefined): string => {
+  const noun: string = (pluralNoun || "").trim();
+  return noun ? `No ${noun} in this project` : "No values in this project";
+};
+
+export interface FacetEmptyStateTextOptions {
+  // The section's search text right now.
+  searchText: string;
+  // The sidebar's text for this facet; defaults to the time-range wording.
+  emptyStateText?: string | undefined;
+}
+
+export const getFacetEmptyStateText: (
+  options: FacetEmptyStateTextOptions,
+) => string = (options: FacetEmptyStateTextOptions): string => {
+  if (options.searchText.trim()) {
+    return getFacetNoMatchesText(options.searchText);
+  }
+  return options.emptyStateText || DEFAULT_FACET_EMPTY_STATE_TEXT;
+};
+
+export interface SidebarFacetEmptyStateOptions {
+  isHideable: boolean;
+  // Plural noun for a hideable facet ("Docker Hosts").
+  emptyStateNoun?: string | undefined;
+  /*
+   * Search text the on-screen values answer, if any (see
+   * getFacetSearchExemptKeys). While it is set the list is a search result,
+   * even though the box has since been cleared.
+   */
+  searchedAtArrivalText?: string | undefined;
+}
+
+/*
+ * The empty-state line a sidebar hands a section for when its box is empty.
+ * Undefined means "use the section's default".
+ */
+export const getSidebarFacetEmptyStateText: (
+  options: SidebarFacetEmptyStateOptions,
+) => string | undefined = (
+  options: SidebarFacetEmptyStateOptions,
+): string | undefined => {
+  if (options.searchedAtArrivalText && options.searchedAtArrivalText.trim()) {
+    return getFacetNoMatchesText(options.searchedAtArrivalText);
+  }
+  if (options.isHideable) {
+    return getHiddenFacetEmptyStateText(options.emptyStateNoun);
+  }
+  return undefined;
+};

package/UI/Components/TelemetryViewer/ResourceFacetConfigs.ts

@@ -0,0 +1,46 @@
+import {
+  RESOURCE_FACET_CATALOG,
+  ResourceFacetDefinition,
+} from "../../../Types/Telemetry/ResourceFacetCatalog";
+import { FacetConfig } from "./types";
+
+export interface BuildResourceFacetConfigsOptions {
+  /*
+   * Priority of the first resource facet. The rest follow in catalog order
+   * at 0.01 steps, so every resource facet sorts between `basePriority` and
+   * the next whole number the viewer uses for its own facets.
+   */
+  basePriority: number;
+  /*
+   * Names the viewer already loaded, per facet key. Facets without a map
+   * still render names: the server resolves resource facet values against
+   * Postgres and returns a displayName with each value.
+   */
+  valueDisplayMaps?:
+    | Partial<Record<string, Record<string, string> | undefined>>
+    | undefined;
+}
+
+/*
+ * One FacetConfig per catalog resource type — searchable against the
+ * server, iconed, and folded away while empty so a project without, say,
+ * Podman hosts does not show a "Podman Host" section with nothing in it.
+ */
+export function buildResourceFacetConfigs(
+  options: BuildResourceFacetConfigsOptions,
+): Array<FacetConfig> {
+  return RESOURCE_FACET_CATALOG.map(
+    (definition: ResourceFacetDefinition, index: number): FacetConfig => {
+      return {
+        key: definition.facetKey,
+        title: definition.label,
+        icon: definition.icon,
+        priority: options.basePriority + index * 0.01,
+        serverSearchable: true,
+        hideWhenEmpty: true,
+        emptyStateNoun: definition.pluralLabel,
+        valueDisplayMap: options.valueDisplayMaps?.[definition.facetKey],
+      };
+    },
+  );
+}

package/UI/Components/TelemetryViewer/TelemetryViewer.tsx

@@ -15,6 +15,8 @@ import TelemetrySearchBar, {
 } from "./components/TelemetrySearchBar";
 import TelemetryFacetSidebar from "./components/TelemetryFacetSidebar";
 import TelemetryActiveFilterChips from "./components/TelemetryActiveFilterChips";
+import { LockedFilterActionOptions } from "./components/LockedFilterActions";
+import { TelemetrySignal } from "../../../Utils/Telemetry/LockedFilterSearch";
 import TelemetryHistogram from "./components/TelemetryHistogram";
 import TelemetryPagination from "./components/TelemetryPagination";
 import ComponentLoader from "../ComponentLoader/ComponentLoader";
@@ -90,6 +92,13 @@ export interface TelemetryViewerProps<T> {
   activeFilters?: Array<ActiveFilter> | undefined;
   onRemoveFilter?: ((facetKey: string, value: string) => void) | undefined;
   onClearAllFilters?: (() => void) | undefined;
+  /*
+   * Which explorer this is (names the explorer in the locked chips' tooltips
+   * and actions) and how the host reproduces its locked scope on that
+   * explorer — see LockedFilterActions. Both forwarded to the chip list.
+   */
+  lockedFilterSignal?: TelemetrySignal | undefined;
+  lockedFilterActions?: LockedFilterActionOptions | undefined;
 
   // -- Histogram --
   showHistogram?: boolean;
@@ -230,6 +239,8 @@ function TelemetryViewerInner<T>(props: TelemetryViewerProps<T>): ReactElement {
           onClearAll={() => {
             props.onClearAllFilters?.();
           }}
+          signal={props.lockedFilterSignal}
+          lockedFilterActions={props.lockedFilterActions}
         />
       )}
 

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

@@ -0,0 +1,79 @@
+import React, { FunctionComponent, ReactElement, useRef } from "react";
+import Icon from "../../Icon/Icon";
+import IconProp from "../../../../Types/Icon/IconProp";
+
+export interface FacetSearchInputProps {
+  // Facet title; names the box ("Search Host") and fills the placeholder.
+  title: string;
+  value: string;
+  onChange: (searchText: string) => void;
+}
+
+/*
+ * A facet section's search box: leading magnifying glass, a clear button once
+ * there is text, and Escape to clear. Shared by the Logs and Telemetry facet
+ * sections so the two sidebars cannot drift apart.
+ */
+const FacetSearchInput: FunctionComponent<FacetSearchInputProps> = (
+  props: FacetSearchInputProps,
+): ReactElement => {
+  const inputRef: React.RefObject<HTMLInputElement> =
+    useRef<HTMLInputElement>(null);
+
+  const hasText: boolean = props.value.length > 0;
+
+  return (
+    <div className="relative">
+      <div className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-2">
+        <Icon
+          icon={IconProp.MagnifyingGlass}
+          className="h-3 w-3 text-gray-400"
+        />
+      </div>
+      <input
+        ref={inputRef}
+        type="text"
+        /*
+         * A placeholder disappears as soon as the user types, taking the
+         * field's only description with it; the aria-label stays.
+         */
+        aria-label={`Search ${props.title}`}
+        placeholder={`Search ${props.title.toLowerCase()}...`}
+        value={props.value}
+        onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
+          props.onChange(event.target.value);
+        }}
+        onKeyDown={(event: React.KeyboardEvent<HTMLInputElement>) => {
+          /*
+           * Escape clears a non-empty box and stops there. An empty box lets
+           * the key through, so viewer-level Escape handling still works.
+           */
+          if (event.key === "Escape" && hasText) {
+            event.preventDefault();
+            event.stopPropagation();
+            props.onChange("");
+          }
+        }}
+        className={`w-full rounded border border-gray-200 bg-gray-50 py-1 pl-6 text-[11px] text-gray-700 placeholder-gray-400 outline-none transition-colors focus:border-indigo-300 focus:bg-white focus:ring-1 focus:ring-indigo-200 ${
+          hasText ? "pr-6" : "pr-2"
+        }`}
+      />
+      {hasText && (
+        <button
+          type="button"
+          aria-label="Clear search"
+          title="Clear search"
+          className="absolute inset-y-0 right-0 flex items-center rounded pr-1.5 pl-1 text-gray-400 transition-colors hover:text-gray-600"
+          onClick={() => {
+            props.onChange("");
+            inputRef.current?.focus();
+          }}
+        >
+          <Icon icon={IconProp.XMark} className="h-3 w-3" />
+        </button>
+      )}
+    </div>
+  );
+};
+
+export default FacetSearchInput;