@oneuptime/common 10.5.1 → 10.5.3

package/Server/Utils/Telemetry/ResourceFacetResolver.ts

@@ -0,0 +1,299 @@
+import ObjectID from "../../../Types/ObjectID";
+import PositiveNumber from "../../../Types/PositiveNumber";
+import Search from "../../../Types/BaseDatabase/Search";
+import MultiSearch from "../../../Types/BaseDatabase/MultiSearch";
+import ServiceModel from "../../../Models/DatabaseModels/Service";
+import HostModel from "../../../Models/DatabaseModels/Host";
+import DockerHostModel from "../../../Models/DatabaseModels/DockerHost";
+import KubernetesClusterModel from "../../../Models/DatabaseModels/KubernetesCluster";
+import ServiceService from "../../Services/ServiceService";
+import HostService from "../../Services/HostService";
+import DockerHostService from "../../Services/DockerHostService";
+import KubernetesClusterService from "../../Services/KubernetesClusterService";
+import CaptureSpan from "./CaptureSpan";
+
+/*
+ * Facet keys whose values are entity IDs backed by a Postgres source-of-truth
+ * table. ClickHouse aggregation only sees IDs that appear in the sampled
+ * trace/log window, so low-volume resources never reach the filter sidebar.
+ * Resolving the value list from Postgres instead means every project resource
+ * shows up regardless of recent telemetry activity, and the sidebar search
+ * matches across the full set (not just the loaded subset).
+ */
+export const RESOURCE_FACET_KEYS: ReadonlySet<string> = new Set([
+  "serviceId",
+  "hostId",
+  "dockerHostId",
+  "kubernetesClusterId",
+]);
+
+export interface ResourceFacetSpec {
+  facetKey: string;
+  counts: Map<string, number>;
+  searchText?: string | undefined;
+  limit?: number | undefined;
+}
+
+export interface ResolvedFacetValue {
+  value: string;
+  count: number;
+  displayName: string;
+}
+
+export default class ResourceFacetResolver {
+  private static readonly DEFAULT_LIMIT: number = 500;
+
+  public static isResourceFacet(facetKey: string): boolean {
+    return RESOURCE_FACET_KEYS.has(facetKey);
+  }
+
+  @CaptureSpan()
+  public static async resolve(
+    projectId: ObjectID,
+    specs: Array<ResourceFacetSpec>,
+  ): Promise<Record<string, Array<ResolvedFacetValue>>> {
+    const results: Array<readonly [string, Array<ResolvedFacetValue>]> =
+      await Promise.all(
+        specs.map(
+          async (
+            spec: ResourceFacetSpec,
+          ): Promise<readonly [string, Array<ResolvedFacetValue>]> => {
+            try {
+              const values: Array<ResolvedFacetValue> =
+                await ResourceFacetResolver.resolveOne(projectId, spec);
+              return [spec.facetKey, values] as const;
+            } catch {
+              return [spec.facetKey, []] as const;
+            }
+          },
+        ),
+      );
+
+    return Object.fromEntries(results);
+  }
+
+  private static async resolveOne(
+    projectId: ObjectID,
+    spec: ResourceFacetSpec,
+  ): Promise<Array<ResolvedFacetValue>> {
+    const limit: number = spec.limit ?? ResourceFacetResolver.DEFAULT_LIMIT;
+    const searchText: string | undefined =
+      spec.searchText && spec.searchText.trim().length > 0
+        ? spec.searchText.trim()
+        : undefined;
+
+    switch (spec.facetKey) {
+      case "serviceId":
+        return ResourceFacetResolver.queryServices(
+          projectId,
+          spec.counts,
+          searchText,
+          limit,
+        );
+      case "hostId":
+        return ResourceFacetResolver.queryHosts(
+          projectId,
+          spec.counts,
+          searchText,
+          limit,
+        );
+      case "dockerHostId":
+        return ResourceFacetResolver.queryDockerHosts(
+          projectId,
+          spec.counts,
+          searchText,
+          limit,
+        );
+      case "kubernetesClusterId":
+        return ResourceFacetResolver.queryKubernetesClusters(
+          projectId,
+          spec.counts,
+          searchText,
+          limit,
+        );
+      default:
+        return [];
+    }
+  }
+
+  private static async queryServices(
+    projectId: ObjectID,
+    counts: Map<string, number>,
+    searchText: string | undefined,
+    limit: number,
+  ): Promise<Array<ResolvedFacetValue>> {
+    const query: Record<string, unknown> = { projectId };
+    if (searchText) {
+      query["name"] = new Search<string>(searchText);
+    }
+
+    const services: Array<ServiceModel> = await ServiceService.findBy({
+      query: query as any,
+      select: {
+        _id: true,
+        name: true,
+      },
+      limit: new PositiveNumber(limit),
+      skip: new PositiveNumber(0),
+      props: { isRoot: true },
+    });
+
+    return ResourceFacetResolver.mergeCounts(
+      services.map((s: ServiceModel): { id: string; displayName: string } => {
+        return {
+          id: s._id ? s._id.toString() : "",
+          displayName: s.name || "Unknown",
+        };
+      }),
+      counts,
+    );
+  }
+
+  private static async queryHosts(
+    projectId: ObjectID,
+    counts: Map<string, number>,
+    searchText: string | undefined,
+    limit: number,
+  ): Promise<Array<ResolvedFacetValue>> {
+    const query: Record<string, unknown> = { projectId };
+    if (searchText) {
+      query["name"] = new MultiSearch({
+        fields: ["name", "hostIdentifier"],
+        value: searchText,
+      });
+    }
+
+    const hosts: Array<HostModel> = await HostService.findBy({
+      query: query as any,
+      select: {
+        _id: true,
+        name: true,
+        hostIdentifier: true,
+      },
+      limit: new PositiveNumber(limit),
+      skip: new PositiveNumber(0),
+      props: { isRoot: true },
+    });
+
+    return ResourceFacetResolver.mergeCounts(
+      hosts.map((h: HostModel): { id: string; displayName: string } => {
+        return {
+          id: h._id ? h._id.toString() : "",
+          displayName: h.name || h.hostIdentifier || "Unknown",
+        };
+      }),
+      counts,
+    );
+  }
+
+  private static async queryDockerHosts(
+    projectId: ObjectID,
+    counts: Map<string, number>,
+    searchText: string | undefined,
+    limit: number,
+  ): Promise<Array<ResolvedFacetValue>> {
+    const query: Record<string, unknown> = { projectId };
+    if (searchText) {
+      query["name"] = new MultiSearch({
+        fields: ["name", "hostIdentifier"],
+        value: searchText,
+      });
+    }
+
+    const dockerHosts: Array<DockerHostModel> = await DockerHostService.findBy({
+      query: query as any,
+      select: {
+        _id: true,
+        name: true,
+        hostIdentifier: true,
+      },
+      limit: new PositiveNumber(limit),
+      skip: new PositiveNumber(0),
+      props: { isRoot: true },
+    });
+
+    return ResourceFacetResolver.mergeCounts(
+      dockerHosts.map(
+        (d: DockerHostModel): { id: string; displayName: string } => {
+          return {
+            id: d._id ? d._id.toString() : "",
+            displayName: d.name || d.hostIdentifier || "Unknown",
+          };
+        },
+      ),
+      counts,
+    );
+  }
+
+  private static async queryKubernetesClusters(
+    projectId: ObjectID,
+    counts: Map<string, number>,
+    searchText: string | undefined,
+    limit: number,
+  ): Promise<Array<ResolvedFacetValue>> {
+    const query: Record<string, unknown> = { projectId };
+    if (searchText) {
+      query["name"] = new MultiSearch({
+        fields: ["name", "clusterIdentifier"],
+        value: searchText,
+      });
+    }
+
+    const clusters: Array<KubernetesClusterModel> =
+      await KubernetesClusterService.findBy({
+        query: query as any,
+        select: {
+          _id: true,
+          name: true,
+          clusterIdentifier: true,
+        },
+        limit: new PositiveNumber(limit),
+        skip: new PositiveNumber(0),
+        props: { isRoot: true },
+      });
+
+    return ResourceFacetResolver.mergeCounts(
+      clusters.map(
+        (c: KubernetesClusterModel): { id: string; displayName: string } => {
+          return {
+            id: c._id ? c._id.toString() : "",
+            displayName: c.name || c.clusterIdentifier || "Unknown",
+          };
+        },
+      ),
+      counts,
+    );
+  }
+
+  /*
+   * Combine Postgres-sourced entities with counts from the ClickHouse sample.
+   * Entities without a count default to 0 (they exist in the project but
+   * had no telemetry in the active window). Sorts active-first so the
+   * highest-traffic resources surface at the top of the sidebar.
+   */
+  private static mergeCounts(
+    entities: Array<{ id: string; displayName: string }>,
+    counts: Map<string, number>,
+  ): Array<ResolvedFacetValue> {
+    const out: Array<ResolvedFacetValue> = entities
+      .filter((e: { id: string }): boolean => {
+        return e.id.length > 0;
+      })
+      .map((e: { id: string; displayName: string }): ResolvedFacetValue => {
+        return {
+          value: e.id,
+          count: counts.get(e.id) || 0,
+          displayName: e.displayName,
+        };
+      });
+
+    out.sort((a: ResolvedFacetValue, b: ResolvedFacetValue): number => {
+      if (a.count !== b.count) {
+        return b.count - a.count;
+      }
+      return a.displayName.localeCompare(b.displayName);
+    });
+
+    return out;
+  }
+}

package/Types/Monitor/MonitorStep.ts

@@ -52,6 +52,39 @@ import MonitorStepDockerMonitor, {
 } from "./MonitorStepDockerMonitor";
 import Zod, { ZodSchema } from "../../Utils/Schema/Zod";
 
+/*
+ * Caps and defaults for per-step request timeout and retry settings.
+ * Users may lower these via the UI; values higher than the cap are clamped.
+ */
+export const MAX_MONITOR_REQUEST_TIMEOUT_IN_MS: number = 60000; // 60 seconds
+export const DEFAULT_MONITOR_REQUEST_TIMEOUT_IN_MS: number = 60000;
+export const MAX_MONITOR_RETRY_COUNT: number = 3;
+export const DEFAULT_MONITOR_RETRY_COUNT: number = 3;
+
+export const clampMonitorRequestTimeoutInMs: (value: number) => number = (
+  value: number,
+): number => {
+  if (!value || value <= 0) {
+    return DEFAULT_MONITOR_REQUEST_TIMEOUT_IN_MS;
+  }
+  if (value > MAX_MONITOR_REQUEST_TIMEOUT_IN_MS) {
+    return MAX_MONITOR_REQUEST_TIMEOUT_IN_MS;
+  }
+  return value;
+};
+
+export const clampMonitorRetryCount: (value: number) => number = (
+  value: number,
+): number => {
+  if (value === undefined || value === null || isNaN(value) || value < 0) {
+    return DEFAULT_MONITOR_RETRY_COUNT;
+  }
+  if (value > MAX_MONITOR_RETRY_COUNT) {
+    return MAX_MONITOR_RETRY_COUNT;
+  }
+  return value;
+};
+
 export interface MonitorStepType {
   id: string;
   monitorDestination?: URL | IP | Hostname | undefined;
@@ -88,6 +121,19 @@ export interface MonitorStepType {
   // retry count for synthetic monitors - number of times to retry on error
   retryCountOnError?: number | undefined;
 
+  /*
+   * Per-step request timeout in milliseconds for probe-based monitors
+   * (Website, API, Ping, IP, Port, SSLCertificate). Defaults to and is
+   * capped at 60000 ms (60 seconds).
+   */
+  requestTimeoutInMs?: number | undefined;
+
+  /*
+   * Per-step retry count for probe-based monitors when a check fails.
+   * Defaults to and is capped at 3.
+   */
+  retryCount?: number | undefined;
+
   // Log monitor type.
   logMonitor?: MonitorStepLogMonitor | undefined;
 
@@ -148,6 +194,8 @@ export default class MonitorStep extends DatabaseProperty {
       screenSizeTypes: undefined,
       browserTypes: undefined,
       retryCountOnError: undefined,
+      requestTimeoutInMs: undefined,
+      retryCount: undefined,
       logMonitor: undefined,
       traceMonitor: undefined,
       metricMonitor: undefined,
@@ -190,6 +238,8 @@ export default class MonitorStep extends DatabaseProperty {
       screenSizeTypes: undefined,
       browserTypes: undefined,
       retryCountOnError: undefined,
+      requestTimeoutInMs: undefined,
+      retryCount: undefined,
       logMonitor: undefined,
       traceMonitor: undefined,
       metricMonitor: undefined,
@@ -294,6 +344,27 @@ export default class MonitorStep extends DatabaseProperty {
     return this;
   }
 
+  public setRequestTimeoutInMs(
+    requestTimeoutInMs: number | undefined,
+  ): MonitorStep {
+    if (requestTimeoutInMs === undefined) {
+      this.data!.requestTimeoutInMs = undefined;
+      return this;
+    }
+    this.data!.requestTimeoutInMs =
+      clampMonitorRequestTimeoutInMs(requestTimeoutInMs);
+    return this;
+  }
+
+  public setRetryCount(retryCount: number | undefined): MonitorStep {
+    if (retryCount === undefined) {
+      this.data!.retryCount = undefined;
+      return this;
+    }
+    this.data!.retryCount = clampMonitorRetryCount(retryCount);
+    return this;
+  }
+
   public setLogMonitor(logMonitor: MonitorStepLogMonitor): MonitorStep {
     this.data!.logMonitor = logMonitor;
     return this;
@@ -400,6 +471,8 @@ export default class MonitorStep extends DatabaseProperty {
         screenSizeTypes: undefined,
         browserTypes: undefined,
         retryCountOnError: undefined,
+        requestTimeoutInMs: undefined,
+        retryCount: undefined,
         logMonitor: undefined,
         exceptionMonitor: undefined,
         kubernetesMonitor: undefined,
@@ -597,6 +670,11 @@ export default class MonitorStep extends DatabaseProperty {
           screenSizeTypes: this.data.screenSizeTypes || undefined,
           browserTypes: this.data.browserTypes || undefined,
           retryCountOnError: this.data.retryCountOnError || undefined,
+          requestTimeoutInMs: this.data.requestTimeoutInMs || undefined,
+          retryCount:
+            this.data.retryCount === undefined
+              ? undefined
+              : this.data.retryCount,
           logMonitor: this.data.logMonitor
             ? MonitorStepLogMonitorUtil.toJSON(
                 this.data.logMonitor || MonitorStepLogMonitorUtil.getDefault(),
@@ -745,6 +823,11 @@ export default class MonitorStep extends DatabaseProperty {
         (json["screenSizeTypes"] as Array<ScreenSizeType>) || undefined,
       browserTypes: (json["browserTypes"] as Array<BrowserType>) || undefined,
       retryCountOnError: (json["retryCountOnError"] as number) || undefined,
+      requestTimeoutInMs: (json["requestTimeoutInMs"] as number) || undefined,
+      retryCount:
+        json["retryCount"] === undefined || json["retryCount"] === null
+          ? undefined
+          : (json["retryCount"] as number),
       logMonitor: json["logMonitor"]
         ? (json["logMonitor"] as JSONObject)
         : undefined,
@@ -806,6 +889,8 @@ export default class MonitorStep extends DatabaseProperty {
         screenSizeTypes: Zod.any().optional(),
         browserTypes: Zod.any().optional(),
         retryCountOnError: Zod.number().optional(),
+        requestTimeoutInMs: Zod.number().optional(),
+        retryCount: Zod.number().optional(),
         logMonitor: Zod.any().optional(),
         traceMonitor: Zod.any().optional(),
         metricMonitor: Zod.any().optional(),

package/Types/StatusPage/StatusPageGroupViewMode.ts

@@ -0,0 +1,6 @@
+enum StatusPageGroupViewMode {
+  List = "List",
+  Grid = "Grid",
+}
+
+export default StatusPageGroupViewMode;

package/UI/Components/Accordion/Accordion.tsx

@@ -75,7 +75,9 @@ const Accordion: FunctionComponent<ComponentProps> = (
     <div className={className}>
       <div>
         <div
-          className={`flex justify-between cursor-pointer`}
+          className={`flex justify-between items-start gap-3 cursor-pointer group/accordion-header rounded-lg -mx-2 px-2 py-2 transition-colors ${
+            isOpen ? "" : "hover:bg-gray-50/80"
+          }`}
           role="button"
           tabIndex={0}
           aria-expanded={isOpen}
@@ -85,43 +87,47 @@ const Accordion: FunctionComponent<ComponentProps> = (
           }}
           onKeyDown={handleKeyDown}
         >
-          <div className="flex">
+          <div className="flex items-start min-w-0 flex-1">
             {props.title && (
-              <div>
-                {isOpen && (
-                  <Icon
-                    className="h-4 w-4 text-gray-500"
-                    icon={IconProp.ChevronDown}
-                    thick={ThickProp.Thick}
-                  />
-                )}
-                {!isOpen && (
-                  <Icon
-                    className="h-4 w-4 text-gray-500"
-                    icon={IconProp.ChevronRight}
-                    thick={ThickProp.Thick}
-                  />
-                )}
+              <div
+                className={`flex-shrink-0 mt-0.5 flex items-center justify-center w-6 h-6 rounded-md transition-all duration-200 ${
+                  isOpen
+                    ? "bg-gray-900/5 text-gray-700"
+                    : "text-gray-400 group-hover/accordion-header:bg-gray-900/5 group-hover/accordion-header:text-gray-700"
+                }`}
+                aria-hidden="true"
+              >
+                <Icon
+                  className={`h-3.5 w-3.5 transition-transform duration-200 ease-out ${
+                    isOpen ? "rotate-90" : ""
+                  }`}
+                  icon={IconProp.ChevronRight}
+                  thick={ThickProp.Thick}
+                />
               </div>
             )}
             {props.title && (
               <div
-                className={`ml-1 -mt-1 ${
+                className={`ml-2.5 min-w-0 flex-1 ${
                   props.onClick ? "cursor-pointer" : ""
                 }`}
               >
-                <div className={`text-gray-500 ${props.titleClassName}`}>
-                  {props.title}{" "}
-                </div>
-                <div className="mb-2 text-sm">
-                  {props.description && (
-                    <MarkdownViewer text={props.description || ""} />
-                  )}
+                <div
+                  className={`text-gray-900 leading-snug ${props.titleClassName || ""}`}
+                >
+                  {props.title}
                 </div>
+                {props.description && (
+                  <div className="mt-1 text-sm text-gray-500 leading-relaxed">
+                    <MarkdownViewer text={props.description} />
+                  </div>
+                )}
               </div>
             )}
           </div>
-          {!isOpen && <div className="">{props.rightElement}</div>}
+          {!isOpen && props.rightElement && (
+            <div className="flex-shrink-0 mt-0.5">{props.rightElement}</div>
+          )}
         </div>
         {isOpen && (
           <div

package/UI/Components/LogsViewer/LogsViewer.tsx

@@ -89,6 +89,15 @@ export interface ComponentProps {
   facetLoading?: boolean;
   onFacetInclude?: (facetKey: string, value: string) => void;
   onFacetExclude?: (facetKey: string, value: string) => void;
+  /*
+   * Debounced search emit for resource facets (serviceId / hostId / etc.).
+   * Parent updates state and re-fetches facets so the result includes
+   * matching resources from the Postgres source-of-truth, not just those
+   * already loaded into the sidebar.
+   */
+  onFacetSearchChange?:
+    | ((facetKey: string, searchText: string) => void)
+    | undefined;
   showFacetSidebar?: boolean;
   activeFilters?: Array<ActiveFilter> | undefined;
   baseActiveFilters?: Array<ActiveFilter> | undefined;
@@ -1063,6 +1072,7 @@ const LogsViewer: FunctionComponent<ComponentProps> = (
               savedViews={props.savedViews}
               selectedSavedViewId={props.selectedSavedViewId}
               onSavedViewSelect={props.onSavedViewSelect}
+              onFacetSearchChange={props.onFacetSearchChange}
             />
           )}
 

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

@@ -1,6 +1,8 @@
 import React, {
   FunctionComponent,
   ReactElement,
+  useEffect,
+  useRef,
   useState,
   useMemo,
 } from "react";
@@ -19,10 +21,17 @@ export interface FacetSectionProps {
   valueDisplayMap?: Record<string, string> | undefined;
   valueColorMap?: Record<string, string> | undefined;
   activeValues?: Set<string> | undefined;
+  /*
+   * When set, the search box also emits typed text to the parent (debounced)
+   * so it can refetch values from the backend. Client-side filtering still
+   * runs as defense-in-depth.
+   */
+  onSearchChange?: ((text: string) => void) | undefined;
 }
 
 const DEFAULT_VISIBLE_COUNT: number = 5;
 const SEARCH_THRESHOLD: number = 6;
+const SEARCH_DEBOUNCE_MS: number = 300;
 
 const FacetSection: FunctionComponent<FacetSectionProps> = (
   props: FacetSectionProps,
@@ -31,7 +40,31 @@ const FacetSection: FunctionComponent<FacetSectionProps> = (
   const [showAll, setShowAll] = useState<boolean>(false);
   const [searchText, setSearchText] = useState<string>("");
 
-  const showSearch: boolean = props.values.length >= SEARCH_THRESHOLD;
+  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 filteredValues: Array<FacetValue> = useMemo(() => {
     if (!searchText.trim()) {
@@ -40,7 +73,9 @@ const FacetSection: FunctionComponent<FacetSectionProps> = (
     const query: string = searchText.toLowerCase().trim();
     return props.values.filter((facet: FacetValue) => {
       const displayName: string =
-        props.valueDisplayMap?.[facet.value] ?? facet.value;
+        facet.displayName ??
+        props.valueDisplayMap?.[facet.value] ??
+        facet.value;
       return displayName.toLowerCase().includes(query);
     });
   }, [props.values, props.valueDisplayMap, searchText]);
@@ -114,7 +149,9 @@ const FacetSection: FunctionComponent<FacetSectionProps> = (
               <FacetValueRow
                 key={facet.value}
                 value={facet.value}
-                displayValue={props.valueDisplayMap?.[facet.value]}
+                displayValue={
+                  facet.displayName ?? props.valueDisplayMap?.[facet.value]
+                }
                 count={facet.count}
                 maxCount={maxCount}
                 color={props.valueColorMap?.[facet.value]}

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

@@ -28,8 +28,23 @@ export interface LogsFacetSidebarProps {
   savedViews?: Array<LogsSavedViewOption> | undefined;
   selectedSavedViewId?: string | null | undefined;
   onSavedViewSelect?: ((viewId: string) => void) | undefined;
+  /*
+   * Called (debounced) when typing in a resource facet's search box. Lets
+   * the parent re-issue the facets request with the typed text scoped to
+   * that facet, so the result includes resources beyond the loaded subset.
+   */
+  onFacetSearchChange?:
+    | ((facetKey: string, searchText: string) => void)
+    | undefined;
 }
 
+const RESOURCE_FACET_KEYS: ReadonlySet<string> = new Set([
+  "serviceId",
+  "hostId",
+  "dockerHostId",
+  "kubernetesClusterId",
+]);
+
 const SEVERITY_ORDER: Array<string> = [
   LogSeverity.Fatal,
   LogSeverity.Error,
@@ -278,6 +293,13 @@ const LogsFacetSidebar: FunctionComponent<LogsFacetSidebarProps> = (
             valueColorMap = severityColorMap;
           }
 
+          const onSearchChange: ((text: string) => void) | undefined =
+            RESOURCE_FACET_KEYS.has(key) && props.onFacetSearchChange
+              ? (text: string) => {
+                  props.onFacetSearchChange!(key, text);
+                }
+              : undefined;
+
           return (
             <FacetSection
               key={key}
@@ -289,6 +311,7 @@ const LogsFacetSidebar: FunctionComponent<LogsFacetSidebarProps> = (
               valueDisplayMap={valueDisplayMap}
               valueColorMap={valueColorMap}
               activeValues={activeValuesByKey[key]}
+              onSearchChange={onSearchChange}
             />
           );
         })}

package/UI/Components/LogsViewer/types.ts

@@ -13,6 +13,8 @@ export interface HistogramBucket {
 export interface FacetValue {
   value: string;
   count: number;
+  // Server-resolved display name (e.g. serviceId → service name).
+  displayName?: string | undefined;
 }
 
 export type FacetData = Record<string, Array<FacetValue>>;