@oneuptime/common 13.0.4 → 13.0.5

package/UI/Components/LogsViewer/LogsViewer.tsx

@@ -42,6 +42,8 @@ import LogDetailsPanel from "./components/LogDetailsPanel";
 import LogsHistogram from "./components/LogsHistogram";
 import LogsFacetSidebar from "./components/LogsFacetSidebar";
 import ActiveFilterChips from "./components/ActiveFilterChips";
+import { LockedFilterActionOptions } from "../TelemetryViewer/components/LockedFilterActions";
+import { TelemetrySignal } from "../../../Utils/Telemetry/LockedFilterSearch";
 import {
   LiveLogsOptions,
   HistogramBucket,
@@ -69,6 +71,16 @@ import OneUptimeDate from "../../../Types/Date";
 import useHistogramZoom, {
   HistogramZoomState,
 } from "../Charts/Utils/useHistogramZoom";
+import useTelemetryEntityNames from "../../Utils/Telemetry/UseTelemetryEntityNames";
+import { TelemetryEntityNameMap } from "../../Utils/Telemetry/TelemetryEntityNames";
+import {
+  collectLogsEntityIdsToResolve,
+  enrichLogsActiveFilters,
+  LogsEntityLookupMaps,
+  LogsEntityResolutionRequest,
+  PrimaryEntitySuggestions,
+  resolvePrimaryEntitySuggestions,
+} from "./LogsEntityNames";
 
 export interface ComponentProps {
   logs: Array<Log>;
@@ -150,6 +162,13 @@ export interface ComponentProps {
   analyticsSessionIds?: Array<string> | undefined;
   analyticsAppliedFacetFilters?: Map<string, Set<string>> | undefined;
   signalPivotActions?: Array<LogsSignalPivotAction> | 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;
 }
 
 export type LogsSortField = LogsTableSortField;
@@ -217,13 +236,27 @@ const getSeverityWeight: (severity: string | undefined) => number = (
   return severityWeight[normalized] || 0;
 };
 
-// Resolve a human-readable service name to its UUID using the serviceMap.
+/*
+ * Resolve a human-readable service name to its UUID. The labels the
+ * `service:` suggestions were rendered with come first: each names exactly
+ * one id and they also cover entities that are not Services (a RUM
+ * application, a host), so picking "checkout (RUM Application)" — or a RUM
+ * application called like a preloaded Service — filters by the entity the
+ * user picked rather than by the first Service with that name. A typed name
+ * the suggestions do not hold falls back to the preloaded Services.
+ */
 function resolveServiceNameToId(
   name: string,
   serviceMap: Dictionary<Service>,
+  suggestionLabelToId?: Record<string, string> | undefined,
 ): string | undefined {
   const lowerName: string = name.toLowerCase();
 
+  const suggestedId: string | undefined = suggestionLabelToId?.[lowerName];
+  if (suggestedId) {
+    return suggestedId;
+  }
+
   for (const [id, service] of Object.entries(serviceMap)) {
     if (service?.name && service.name.toLowerCase() === lowerName) {
       return id;
@@ -700,6 +733,82 @@ const LogsViewer: FunctionComponent<ComponentProps> = (
     }
   }, [props.onPageChange, props.page]);
 
+  const entityLookupMaps: LogsEntityLookupMaps = useMemo(() => {
+    return {
+      serviceMap,
+      hostMap,
+      dockerHostMap,
+      podmanHostMap,
+      kubernetesClusterMap,
+    };
+  }, [serviceMap, hostMap, dockerHostMap, podmanHostMap, kubernetesClusterMap]);
+
+  /*
+   * primaryEntityId values the `service:` dropdown offers. The lazily
+   * fetched attribute values override the parent's, as in the merge below.
+   */
+  const primaryEntitySuggestionIds: Array<string> = useMemo(() => {
+    return (
+      attributeValueSuggestions["primaryEntityId"] ||
+      props.valueSuggestions?.["primaryEntityId"] ||
+      []
+    );
+  }, [attributeValueSuggestions, props.valueSuggestions]);
+
+  /*
+   * One resolver request for every id on screen the preloaded maps cannot
+   * name: chips, the Service column / details header of the displayed logs,
+   * `service:` suggestions and sidebar facet rows. A RUM application's or a
+   * serverless function's logs otherwise read as raw UUIDs, because only
+   * Services / hosts / clusters are preloaded. Held back while those maps
+   * load so ids they will name are not looked up twice.
+   */
+  const entityResolutionRequest: LogsEntityResolutionRequest = useMemo(() => {
+    if (isPageLoading) {
+      return { ids: [], typeHints: {} };
+    }
+
+    return collectLogsEntityIdsToResolve({
+      filters: [
+        ...(props.baseActiveFilters || []),
+        ...(props.activeFilters || []),
+      ],
+      logs: displayedLogs,
+      facetData: props.facetData,
+      suggestionIds: primaryEntitySuggestionIds,
+      maps: entityLookupMaps,
+    });
+  }, [
+    isPageLoading,
+    props.baseActiveFilters,
+    props.activeFilters,
+    displayedLogs,
+    props.facetData,
+    primaryEntitySuggestionIds,
+    entityLookupMaps,
+  ]);
+
+  const entityNameMap: TelemetryEntityNameMap = useTelemetryEntityNames(
+    entityResolutionRequest.ids,
+    { typeHints: entityResolutionRequest.typeHints },
+  );
+
+  const primaryEntitySuggestions: PrimaryEntitySuggestions = useMemo(() => {
+    return resolvePrimaryEntitySuggestions({
+      ids: primaryEntitySuggestionIds,
+      facetValues: props.facetData?.["primaryEntityId"],
+      serviceMap,
+      resourceMaps: entityLookupMaps,
+      entityNameMap,
+    });
+  }, [
+    primaryEntitySuggestionIds,
+    props.facetData,
+    serviceMap,
+    entityLookupMaps,
+    entityNameMap,
+  ]);
+
   const handleSearchSubmit: () => void = useCallback((): void => {
     const queryFilter: Record<string, unknown> = queryStringToFilter(
       searchQuery,
@@ -714,6 +823,7 @@ const LogsViewer: FunctionComponent<ComponentProps> = (
       const resolvedId: string | undefined = resolveServiceNameToId(
         serviceName,
         serviceMap,
+        primaryEntitySuggestions.labelToId,
       );
 
       if (resolvedId) {
@@ -729,7 +839,14 @@ const LogsViewer: FunctionComponent<ComponentProps> = (
     resetPage();
     setSelectedLogId(null);
     props.onFilterChanged(mergedFilter);
-  }, [searchQuery, serviceMap, filterData, resetPage, props]);
+  }, [
+    searchQuery,
+    serviceMap,
+    primaryEntitySuggestions,
+    filterData,
+    resetPage,
+    props,
+  ]);
 
   // Scroll focused row into view
   useEffect(() => {
@@ -891,68 +1008,29 @@ const LogsViewer: FunctionComponent<ComponentProps> = (
   };
 
   /*
-   * Enrich active filters with resolved display values (e.g. service names)
+   * Enrich active filters with resolved display values (e.g. service names).
+   * Preloaded maps first, then a name the parent already supplied, then the
+   * generic resolver for entities the maps do not cover (see
+   * LogsEntityNames.enrichLogsActiveFilter). Base (read-only) chips go
+   * through the same rules so a scope chip handed over as a bare id still
+   * gets named, while one the parent already named is left alone.
    * Must be before early returns to maintain consistent hook call order.
    */
   const enrichedActiveFilters: Array<ActiveFilter> = useMemo(() => {
-    if (!props.activeFilters) {
-      return [];
-    }
-
-    return props.activeFilters.map((filter: ActiveFilter): ActiveFilter => {
-      if (filter.facetKey === "primaryEntityId" && serviceMap[filter.value]) {
-        const service: Service | undefined = serviceMap[filter.value];
-        return {
-          ...filter,
-          displayValue: service?.name || filter.value,
-        };
-      }
-      if (filter.facetKey === "hostId" && hostMap[filter.value]) {
-        const host: Host | undefined = hostMap[filter.value];
-        return {
-          ...filter,
-          displayValue: host?.name || host?.hostIdentifier || filter.value,
-        };
-      }
-      if (filter.facetKey === "dockerHostId" && dockerHostMap[filter.value]) {
-        const dockerHost: DockerHost | undefined = dockerHostMap[filter.value];
-        return {
-          ...filter,
-          displayValue:
-            dockerHost?.name || dockerHost?.hostIdentifier || filter.value,
-        };
-      }
-      if (filter.facetKey === "podmanHostId" && podmanHostMap[filter.value]) {
-        const podmanHost: PodmanHost | undefined = podmanHostMap[filter.value];
-        return {
-          ...filter,
-          displayValue:
-            podmanHost?.name || podmanHost?.hostIdentifier || filter.value,
-        };
-      }
-      if (
-        filter.facetKey === "kubernetesClusterId" &&
-        kubernetesClusterMap[filter.value]
-      ) {
-        const cluster: KubernetesCluster | undefined =
-          kubernetesClusterMap[filter.value];
-        return {
-          ...filter,
-          displayValue:
-            cluster?.name || cluster?.clusterIdentifier || filter.value,
-        };
-      }
+    return enrichLogsActiveFilters(
+      props.activeFilters,
+      entityLookupMaps,
+      entityNameMap,
+    );
+  }, [props.activeFilters, entityLookupMaps, entityNameMap]);
 
-      return filter;
-    });
-  }, [
-    props.activeFilters,
-    serviceMap,
-    hostMap,
-    dockerHostMap,
-    podmanHostMap,
-    kubernetesClusterMap,
-  ]);
+  const enrichedBaseActiveFilters: Array<ActiveFilter> = useMemo(() => {
+    return enrichLogsActiveFilters(
+      props.baseActiveFilters,
+      entityLookupMaps,
+      entityNameMap,
+    );
+  }, [props.baseActiveFilters, entityLookupMaps, entityNameMap]);
 
   /*
    * Replace primaryEntityId UUIDs with human-readable names in value suggestions,
@@ -974,20 +1052,16 @@ const LogsViewer: FunctionComponent<ComponentProps> = (
         ...attributeValueSuggestions,
       };
 
-      if (
-        suggestions["primaryEntityId"] &&
-        Object.keys(serviceMap).length > 0
-      ) {
-        suggestions["primaryEntityId"] = suggestions["primaryEntityId"].map(
-          (id: string) => {
-            const service: Service | undefined = serviceMap[id];
-            return service?.name || id;
-          },
-        );
+      if (suggestions["primaryEntityId"]) {
+        suggestions["primaryEntityId"] = primaryEntitySuggestions.labels;
       }
 
       return suggestions;
-    }, [props.valueSuggestions, serviceMap, attributeValueSuggestions]);
+    }, [
+      props.valueSuggestions,
+      primaryEntitySuggestions,
+      attributeValueSuggestions,
+    ]);
 
   /*
    * Wrap onFieldValueSelect to resolve service names back to UUIDs
@@ -1005,6 +1079,7 @@ const LogsViewer: FunctionComponent<ComponentProps> = (
         const resolvedId: string | undefined = resolveServiceNameToId(
           value,
           serviceMap,
+          primaryEntitySuggestions.labelToId,
         );
 
         if (resolvedId) {
@@ -1015,7 +1090,7 @@ const LogsViewer: FunctionComponent<ComponentProps> = (
 
       props.onFieldValueSelect!(fieldKey, value);
     };
-  }, [props.onFieldValueSelect, serviceMap]);
+  }, [props.onFieldValueSelect, serviceMap, primaryEntitySuggestions]);
 
   const selectedColumns: Array<string> = props.selectedColumns
     ? normalizeLogsTableColumns(props.selectedColumns)
@@ -1133,15 +1208,14 @@ const LogsViewer: FunctionComponent<ComponentProps> = (
       )}
 
       {/* Active filter chips (read-only base filters + user-applied filters) */}
-      {((props.baseActiveFilters && props.baseActiveFilters.length > 0) ||
+      {(enrichedBaseActiveFilters.length > 0 ||
         (enrichedActiveFilters.length > 0 && props.onRemoveFilter)) && (
         <ActiveFilterChips
-          filters={[
-            ...(props.baseActiveFilters || []),
-            ...enrichedActiveFilters,
-          ]}
+          filters={[...enrichedBaseActiveFilters, ...enrichedActiveFilters]}
           onRemove={props.onRemoveFilter || (() => {})}
           onClearAll={props.onClearAllFilters || (() => {})}
+          signal={props.lockedFilterSignal}
+          lockedFilterActions={props.lockedFilterActions}
         />
       )}
 
@@ -1175,6 +1249,7 @@ const LogsViewer: FunctionComponent<ComponentProps> = (
               dockerHostMap={dockerHostMap}
               podmanHostMap={podmanHostMap}
               kubernetesClusterMap={kubernetesClusterMap}
+              entityNameMap={entityNameMap}
               onIncludeFilter={props.onFacetInclude || (() => {})}
               onExcludeFilter={props.onFacetExclude || (() => {})}
               activeFilters={props.activeFilters}
@@ -1197,6 +1272,8 @@ const LogsViewer: FunctionComponent<ComponentProps> = (
               <LogsTable
                 logs={displayedLogs}
                 serviceMap={serviceMap}
+                resourceEntityMaps={entityLookupMaps}
+                entityNameMap={entityNameMap}
                 isLoading={props.isLoading}
                 focusedRowIndex={
                   focusedRowIndex >= 0 ? focusedRowIndex : undefined
@@ -1227,6 +1304,8 @@ const LogsViewer: FunctionComponent<ComponentProps> = (
                     <LogDetailsPanel
                       log={log}
                       serviceMap={serviceMap}
+                      resourceEntityMaps={entityLookupMaps}
+                      entityNameMap={entityNameMap}
                       onClose={() => {
                         setSelectedLogId(null);
                       }}

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

@@ -4,11 +4,27 @@ import Icon from "../../Icon/Icon";
 import IconProp from "../../../../Types/Icon/IconProp";
 import Link from "../../Link/Link";
 import { formatDictionaryValueForDisplay } from "../../Dictionary/DictionaryFilterOperator";
+import LockedFilterChip from "../../TelemetryViewer/components/LockedFilterChip";
+import LockedFilterActions, {
+  LockedFilterActionOptions,
+} from "../../TelemetryViewer/components/LockedFilterActions";
+import { TelemetrySignal } from "../../../../Utils/Telemetry/LockedFilterSearch";
 
 export interface ActiveFilterChipsProps {
   filters: Array<ActiveFilter>;
   onRemove: (facetKey: string, value: string) => void;
   onClearAll: () => void;
+  /*
+   * Which explorer the read-only chips belong to — names the explorer in the
+   * locked chips' tooltips and in the "Copy filter" / "Open in …" actions.
+   * Defaults to logs, the only signal this list renders.
+   */
+  signal?: TelemetrySignal | undefined;
+  /*
+   * How the host reproduces its locked scope elsewhere. Rendered after the
+   * read-only chips; nothing is rendered when neither field is set.
+   */
+  lockedFilterActions?: LockedFilterActionOptions | undefined;
 }
 
 /*
@@ -60,6 +76,8 @@ const ActiveFilterChips: FunctionComponent<ActiveFilterChipsProps> = (
     return null;
   }
 
+  const signal: TelemetrySignal = props.signal || "logs";
+
   const readOnlyFilters: Array<ActiveFilter> = props.filters.filter(
     (f: ActiveFilter) => {
       return f.readOnly;
@@ -76,23 +94,22 @@ const ActiveFilterChips: FunctionComponent<ActiveFilterChipsProps> = (
       {readOnlyFilters.map((filter: ActiveFilter) => {
         const chipKey: string = `readonly:${filter.facetKey}:${chipText(filter.value)}`;
         return (
-          <span
+          <LockedFilterChip
             key={chipKey}
-            className="inline-flex items-center gap-1 rounded-md border border-gray-300 bg-gray-100 py-0.5 pl-2 pr-2 text-xs text-gray-700"
-            title={`${filter.displayKey}: ${chipText(filter.displayValue)} (applied filter)`}
-          >
-            <Icon icon={IconProp.Lock} className="h-2.5 w-2.5 text-gray-400" />
-            <span className="font-medium text-gray-500">
-              {filter.displayKey}:
-            </span>
-            <span>{chipText(filter.displayValue)}</span>
-            {renderOpenAffordance(
+            displayKey={filter.displayKey}
+            displayValue={chipText(filter.displayValue)}
+            lockedDetail={filter.lockedDetail}
+            signal={signal}
+            trailing={renderOpenAffordance(
               filter,
               "text-gray-400 hover:bg-gray-200 hover:text-indigo-600",
             )}
-          </span>
+          />
         );
       })}
+      {readOnlyFilters.length > 0 && props.lockedFilterActions && (
+        <LockedFilterActions signal={signal} {...props.lockedFilterActions} />
+      )}
       {removableFilters.map((filter: ActiveFilter) => {
         const chipKey: string = `${filter.facetKey}:${chipText(filter.value)}`;
         return (

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

@@ -1,15 +1,21 @@
 import React, {
   FunctionComponent,
   ReactElement,
-  useEffect,
-  useRef,
+  useId,
   useState,
   useMemo,
 } from "react";
 import { FacetValue } from "../types";
+import { getFacetValueDisplayLabel } from "../LogsEntityNames";
 import FacetValueRow from "./FacetValueRow";
-import Icon from "../../Icon/Icon";
 import IconProp from "../../../../Types/Icon/IconProp";
+import FacetSectionHeader from "../../TelemetryViewer/components/FacetSectionHeader";
+import FacetSearchInput from "../../TelemetryViewer/components/FacetSearchInput";
+import FacetShowMoreButton from "../../TelemetryViewer/components/FacetShowMoreButton";
+import useFacetSectionSearch, {
+  FacetSectionSearch,
+} from "../../TelemetryViewer/useFacetSectionSearch";
+import { getFacetEmptyStateText } from "../../TelemetryViewer/FacetVisibility";
 
 export interface FacetSectionProps {
   title: string;
@@ -27,44 +33,45 @@ export interface FacetSectionProps {
    * runs as defense-in-depth.
    */
   onSearchChange?: ((text: string) => void) | undefined;
+  // Optional icon shown before the title.
+  icon?: IconProp | undefined;
+  /*
+   * Controlled search text. The sidebar owns it so it can keep a section
+   * that is being searched on screen, and so the box survives a remount.
+   * Leave undefined for the section to keep its own.
+   */
+  searchText?: string | undefined;
+  onSearchTextChange?: ((text: string) => void) | undefined;
+  /*
+   * Shown when there are no values and no search. Defaults to "No values in
+   * this time range".
+   */
+  emptyStateText?: string | undefined;
 }
 
 const DEFAULT_VISIBLE_COUNT: number = 5;
 const SEARCH_THRESHOLD: number = 6;
-const SEARCH_DEBOUNCE_MS: number = 300;
 
 const FacetSection: FunctionComponent<FacetSectionProps> = (
   props: FacetSectionProps,
 ): ReactElement => {
   const [isExpanded, setIsExpanded] = useState<boolean>(true);
   const [showAll, setShowAll] = useState<boolean>(false);
-  const [searchText, setSearchText] = useState<string>("");
+  const bodyId: string = useId();
 
   const showSearch: boolean =
     props.onSearchChange !== undefined ||
     props.values.length >= SEARCH_THRESHOLD;
 
-  const onSearchChange: FacetSectionProps["onSearchChange"] =
-    props.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);
-    }, SEARCH_DEBOUNCE_MS);
-    return () => {
-      clearTimeout(handle);
-    };
-  }, [searchText, onSearchChange]);
+  const search: FacetSectionSearch = useFacetSectionSearch({
+    searchText: props.searchText,
+    onSearchTextChange: props.onSearchTextChange,
+    onSearchChange: props.onSearchChange,
+    isSearchVisible: showSearch,
+  });
+
+  const searchText: string = search.activeSearchText;
+  const isSearching: boolean = searchText.trim() !== "";
 
   const filteredValues: Array<FacetValue> = useMemo(() => {
     if (!searchText.trim()) {
@@ -73,9 +80,7 @@ const FacetSection: FunctionComponent<FacetSectionProps> = (
     const query: string = searchText.toLowerCase().trim();
     return props.values.filter((facet: FacetValue) => {
       const displayName: string =
-        facet.displayName ??
-        props.valueDisplayMap?.[facet.value] ??
-        facet.value;
+        getFacetValueDisplayLabel(facet, props.valueDisplayMap) || facet.value;
       return displayName.toLowerCase().includes(query);
     });
   }, [props.values, props.valueDisplayMap, searchText]);
@@ -83,14 +88,13 @@ const FacetSection: FunctionComponent<FacetSectionProps> = (
   const visibleCount: number =
     props.initialVisibleCount ?? DEFAULT_VISIBLE_COUNT;
 
-  const displayedValues: Array<FacetValue> = searchText.trim()
+  const displayedValues: Array<FacetValue> = isSearching
     ? filteredValues
     : showAll
       ? filteredValues
       : filteredValues.slice(0, visibleCount);
 
-  const hasMore: boolean =
-    !searchText.trim() && filteredValues.length > visibleCount;
+  const hasMore: boolean = !isSearching && filteredValues.length > visibleCount;
 
   const maxCount: number =
     props.values.length > 0
@@ -105,41 +109,25 @@ const FacetSection: FunctionComponent<FacetSectionProps> = (
 
   return (
     <div className="border-b border-gray-100 py-2">
-      <button
-        type="button"
-        className="flex w-full items-center justify-between px-2 py-1 text-left"
-        onClick={() => {
+      <FacetSectionHeader
+        title={props.title}
+        icon={props.icon}
+        activeCount={activeCount}
+        isExpanded={isExpanded}
+        controlsId={bodyId}
+        onToggle={() => {
           setIsExpanded(!isExpanded);
         }}
-      >
-        <div className="flex items-center gap-1.5">
-          <span className="text-[11px] font-semibold uppercase tracking-wider text-gray-500">
-            {props.title}
-          </span>
-          {activeCount > 0 && (
-            <span className="inline-flex h-4 min-w-[1rem] items-center justify-center rounded-full bg-indigo-100 px-1 text-[10px] font-semibold text-indigo-600">
-              {activeCount}
-            </span>
-          )}
-        </div>
-        <Icon
-          icon={isExpanded ? IconProp.ChevronDown : IconProp.ChevronRight}
-          className="h-3 w-3 text-gray-400"
-        />
-      </button>
+      />
 
       {isExpanded && (
-        <div className="mt-1 px-1">
+        <div id={bodyId} className="mt-1 px-1">
           {showSearch && (
             <div className="mb-1 px-1">
-              <input
-                type="text"
-                placeholder={`Search ${props.title.toLowerCase()}...`}
-                value={searchText}
-                onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-                  setSearchText(e.target.value);
-                }}
-                className="w-full rounded border border-gray-200 bg-gray-50 px-2 py-1 text-[11px] text-gray-700 placeholder-gray-400 outline-none focus:border-indigo-300 focus:bg-white focus:ring-1 focus:ring-indigo-200"
+              <FacetSearchInput
+                title={props.title}
+                value={search.searchText}
+                onChange={search.setSearchText}
               />
             </div>
           )}
@@ -149,9 +137,10 @@ const FacetSection: FunctionComponent<FacetSectionProps> = (
               <FacetValueRow
                 key={facet.value}
                 value={facet.value}
-                displayValue={
-                  facet.displayName ?? props.valueDisplayMap?.[facet.value]
-                }
+                displayValue={getFacetValueDisplayLabel(
+                  facet,
+                  props.valueDisplayMap,
+                )}
                 count={facet.count}
                 maxCount={maxCount}
                 color={props.valueColorMap?.[facet.value]}
@@ -167,24 +156,22 @@ const FacetSection: FunctionComponent<FacetSectionProps> = (
           })}
 
           {displayedValues.length === 0 && (
-            <p className="px-1 py-2 text-[11px] text-gray-400">
-              {searchText.trim() ? "No matches found" : "No values found"}
+            <p className="px-1.5 py-2 text-[11px] text-gray-400">
+              {getFacetEmptyStateText({
+                searchText: searchText,
+                emptyStateText: props.emptyStateText,
+              })}
             </p>
           )}
 
-          {hasMore && (
-            <button
-              type="button"
-              className="mt-1 px-1 text-[11px] font-medium text-indigo-500 hover:text-indigo-600"
-              onClick={() => {
-                setShowAll(!showAll);
-              }}
-            >
-              {showAll
-                ? "Show less"
-                : `+${props.values.length - visibleCount} more`}
-            </button>
-          )}
+          <FacetShowMoreButton
+            hasMore={hasMore}
+            isShowingAll={showAll}
+            hiddenCount={Math.max(0, filteredValues.length - visibleCount)}
+            onToggle={() => {
+              setShowAll(!showAll);
+            }}
+          />
         </div>
       )}
     </div>