@oneuptime/common 13.0.3 → 13.0.5

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

@@ -23,6 +23,12 @@ const FacetValueRow: FunctionComponent<FacetValueRowProps> = (
 
   const displayLabel: string = props.displayValue || props.value || "(empty)";
   const isActive: boolean = props.isActive || false;
+  /*
+   * Resource facets list every resource in the project, including ones with
+   * no telemetry in the range (count 0). Muting those lets the rows that do
+   * have data stand out without dropping the rest from the list.
+   */
+  const isZeroCount: boolean = props.count === 0 && !isActive;
 
   return (
     <div className="group flex items-center gap-2 py-0.5">
@@ -54,7 +60,11 @@ const FacetValueRow: FunctionComponent<FacetValueRowProps> = (
         )}
         <span
           className={`min-w-0 truncate text-[12px] ${
-            isActive ? "font-medium text-indigo-700" : "text-gray-700"
+            isActive
+              ? "font-medium text-indigo-700"
+              : isZeroCount
+                ? "text-gray-400"
+                : "text-gray-700"
           }`}
         >
           {displayLabel}
@@ -77,7 +87,11 @@ const FacetValueRow: FunctionComponent<FacetValueRowProps> = (
         </div>
         <span
           className={`min-w-[2rem] text-right font-mono text-[10px] tabular-nums ${
-            isActive ? "font-medium text-indigo-600" : "text-gray-400"
+            isActive
+              ? "font-medium text-indigo-600"
+              : isZeroCount
+                ? "text-gray-300"
+                : "text-gray-400"
           }`}
         >
           {props.count.toLocaleString()}
@@ -92,6 +106,7 @@ const FacetValueRow: FunctionComponent<FacetValueRowProps> = (
           props.onExclude(props.value);
         }}
         title={`Exclude ${displayLabel}`}
+        aria-label={`Exclude ${displayLabel}`}
       >
         -
       </button>

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

@@ -31,6 +31,15 @@ import { APP_API_URL } from "../../../Config";
 import HTTPResponse from "../../../../Types/API/HTTPResponse";
 import HTTPErrorResponse from "../../../../Types/API/HTTPErrorResponse";
 import ObjectID from "../../../../Types/ObjectID";
+import {
+  DEFAULT_TELEMETRY_ENTITY_LABEL,
+  TelemetryEntityNameMap,
+} from "../../../Utils/Telemetry/TelemetryEntityNames";
+import {
+  getLogEntityDisplay,
+  LogEntityDisplay,
+  LogsResourceEntityMaps,
+} from "../LogsEntityNames";
 
 type LogDetailTab = "details" | "context";
 
@@ -39,6 +48,17 @@ export type LogContextScope = "nearby" | "trace";
 export interface LogDetailsPanelProps {
   log: Log;
   serviceMap: Dictionary<Service>;
+  /*
+   * Names for primaryEntityIds serviceMap does not hold (RUM application,
+   * host, …) so the header names the entity instead of printing its id.
+   */
+  entityNameMap?: TelemetryEntityNameMap | undefined;
+  /*
+   * Preloaded host / Docker host / Podman host / Kubernetes cluster maps.
+   * Agent-ingested telemetry is primary-keyed on those rows, and such ids
+   * are named from these maps rather than sent to the resolver.
+   */
+  resourceEntityMaps?: LogsResourceEntityMaps | undefined;
   onClose?: () => void;
   getTraceRoute?:
     | ((traceId: string, log: Log) => Route | URL | undefined)
@@ -231,11 +251,23 @@ const LogDetailsPanel: FunctionComponent<LogDetailsPanelProps> = (
 
   const variant: "floating" | "embedded" = props.variant || "floating";
   const primaryEntityId: string = props.log.primaryEntityId?.toString() || "";
-  const service: Service | undefined = props.serviceMap[primaryEntityId];
-  const serviceName: string =
-    service?.name || primaryEntityId || "Unknown service";
-  const serviceColor: string =
-    (service?.serviceColor && service?.serviceColor.toString()) || "#64748b";
+  const entityDisplay: LogEntityDisplay = getLogEntityDisplay({
+    primaryEntityId,
+    serviceMap: props.serviceMap,
+    resourceMaps: props.resourceEntityMaps,
+    entityNameMap: props.entityNameMap,
+  });
+  const serviceName: string = entityDisplay.name || "Unknown service";
+  const serviceColor: string = entityDisplay.color || "#64748b";
+  /*
+   * "Service" is what the header has always implied; only a different kind
+   * of entity (a RUM application, a host) earns an explicit type badge.
+   */
+  const entityTypeBadge: string | undefined =
+    entityDisplay.typeLabel &&
+    entityDisplay.typeLabel !== DEFAULT_TELEMETRY_ENTITY_LABEL
+      ? entityDisplay.typeLabel
+      : undefined;
 
   const bodyDetails: PreparedBody = useMemo(() => {
     return prepareBody(props.log.body?.toString());
@@ -626,6 +658,14 @@ const LogDetailsPanel: FunctionComponent<LogDetailsPanelProps> = (
               <SeverityBadge severity={props.log.severityText} />
             </div>
             <div className="flex flex-wrap items-center gap-2">
+              {entityTypeBadge && (
+                <span
+                  className={smallBadgeClass}
+                  data-testid="log-details-entity-type"
+                >
+                  {entityTypeBadge}
+                </span>
+              )}
               {props.log.time && (
                 <span className={smallBadgeClass}>
                   <Icon icon={IconProp.Clock} className="h-3 w-3" />

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

@@ -35,6 +35,15 @@ import { APP_API_URL } from "../../../Config";
 import ModelAPI from "../../../Utils/ModelAPI/ModelAPI";
 import ComponentLoader from "../../ComponentLoader/ComponentLoader";
 import OneUptimeDate from "../../../../Types/Date";
+import useTelemetryEntityNames from "../../../Utils/Telemetry/UseTelemetryEntityNames";
+import { TelemetryEntityNameMap } from "../../../Utils/Telemetry/TelemetryEntityNames";
+import {
+  collectAnalyticsEntityIds,
+  getAnalyticsDimensionLabel,
+  getAnalyticsGroupValueLabel,
+  getAnalyticsSeriesLabel,
+  LogsEntityResolutionRequest,
+} from "../LogsEntityNames";
 
 type AnalyticsChartType = "timeseries" | "toplist" | "table";
 type AnalyticsAggregation = "count" | "unique";
@@ -107,12 +116,22 @@ interface PivotedTimeseriesRow {
   [key: string]: number | string;
 }
 
-function pivotTimeseriesData(rows: Array<AnalyticsTimeseriesRow>): {
+/*
+ * Series keys stay the raw joined group values (ids for an entity
+ * dimension) so two entities that share a name remain two series;
+ * `seriesLabels` carries what the legend and tooltip print for each key.
+ */
+export function pivotTimeseriesData(
+  rows: Array<AnalyticsTimeseriesRow>,
+  entityNameMap?: TelemetryEntityNameMap | undefined,
+): {
   pivotedData: Array<PivotedTimeseriesRow>;
   seriesKeys: Array<string>;
+  seriesLabels: Record<string, string>;
 } {
   const map: Map<string, PivotedTimeseriesRow> = new Map();
   const seriesKeysSet: Set<string> = new Set();
+  const seriesLabels: Record<string, string> = {};
 
   for (const row of rows) {
     let pivotRow: PivotedTimeseriesRow | undefined = map.get(row.time);
@@ -122,15 +141,20 @@ function pivotTimeseriesData(rows: Array<AnalyticsTimeseriesRow>): {
       map.set(row.time, pivotRow);
     }
 
-    const groupKey: string =
-      Object.values(row.groupValues).join(" / ") || "count";
+    const groupValues: Record<string, string> = row.groupValues || {};
+    const groupKey: string = Object.values(groupValues).join(" / ") || "count";
     seriesKeysSet.add(groupKey);
+    if (seriesLabels[groupKey] === undefined) {
+      seriesLabels[groupKey] =
+        getAnalyticsSeriesLabel(groupValues, entityNameMap) || groupKey;
+    }
     pivotRow[groupKey] = ((pivotRow[groupKey] as number) || 0) + row.count;
   }
 
   return {
     pivotedData: Array.from(map.values()),
     seriesKeys: Array.from(seriesKeysSet),
+    seriesLabels,
   };
 }
 
@@ -205,6 +229,8 @@ function computeDefaultBucketSize(startTime: Date, endTime: Date): number {
 interface AnalyticsTooltipProps {
   active?: boolean;
   label?: string;
+  // Series key -> printed label (entity names instead of ids).
+  seriesLabels?: Record<string, string> | undefined;
   payload?: Array<{
     dataKey: string;
     value: number;
@@ -266,7 +292,9 @@ const AnalyticsTooltip: FunctionComponent<AnalyticsTooltipProps> = (
                   className="inline-block h-2.5 w-2.5 rounded-[3px]"
                   style={{ backgroundColor: entry.color }}
                 />
-                <span className="text-xs text-gray-600">{entry.key}</span>
+                <span className="text-xs text-gray-600">
+                  {props.seriesLabels?.[entry.key] || entry.key}
+                </span>
               </div>
               <span className="font-mono text-xs font-semibold tabular-nums text-gray-800">
                 {entry.value.toLocaleString()}
@@ -304,6 +332,14 @@ const LogsAnalyticsView: FunctionComponent<LogsAnalyticsViewProps> = (
   >([]);
   const [topListData, setTopListData] = useState<Array<AnalyticsTopItem>>([]);
   const [tableData, setTableData] = useState<Array<AnalyticsTableRow>>([]);
+  /*
+   * The group-by the data on screen was fetched with. The picker can move
+   * ahead of the data while a refetch is in flight, and labels must follow
+   * the data (a top list row's value belongs to this dimension).
+   */
+  const [resultGroupByFields, setResultGroupByFields] = useState<Array<string>>(
+    [],
+  );
 
   const allDimensionOptions: Array<{ value: string; label: string }> =
     useMemo(() => {
@@ -340,15 +376,17 @@ const LogsAnalyticsView: FunctionComponent<LogsAnalyticsViewProps> = (
           bucketSizeInMinutes: computeDefaultBucketSize(startTime, endTime),
         } as JSONObject;
 
-        if (
+        const requestGroupBy: Array<string> =
           groupByFields.length > 0 &&
           groupByFields[0] &&
           groupByFields[0].length > 0
-        ) {
-          (requestData as Record<string, unknown>)["groupBy"] =
-            groupByFields.filter((f: string) => {
-              return f.length > 0;
-            });
+            ? groupByFields.filter((f: string) => {
+                return f.length > 0;
+              })
+            : [];
+
+        if (requestGroupBy.length > 0) {
+          (requestData as Record<string, unknown>)["groupBy"] = requestGroupBy;
         }
 
         if (aggregation === "unique" && aggregationField) {
@@ -437,6 +475,8 @@ const LogsAnalyticsView: FunctionComponent<LogsAnalyticsViewProps> = (
 
         const data: unknown = response.data["data"] || [];
 
+        setResultGroupByFields(requestGroupBy);
+
         if (chartType === "timeseries") {
           setTimeseriesData(data as Array<AnalyticsTimeseriesRow>);
         } else if (chartType === "toplist") {
@@ -468,9 +508,34 @@ const LogsAnalyticsView: FunctionComponent<LogsAnalyticsViewProps> = (
     void fetchAnalytics();
   }, [fetchAnalytics]);
 
-  const { pivotedData, seriesKeys } = useMemo(() => {
-    return pivotTimeseriesData(timeseriesData);
-  }, [timeseriesData]);
+  /*
+   * Group values of an entity dimension (primaryEntityId, hostId, …) are
+   * ids — for a RUM application's logs the RumApplication id. One resolver
+   * request names every id the current result shows. Grouped rows are read
+   * by their own groupValues keys, not resultGroupByFields: after a chart
+   * type switch the rows on screen may predate the last fetch's group-by.
+   */
+  const entityResolutionRequest: LogsEntityResolutionRequest = useMemo(() => {
+    return collectAnalyticsEntityIds({
+      groupByFields: resultGroupByFields,
+      groupedRows:
+        chartType === "timeseries"
+          ? timeseriesData
+          : chartType === "table"
+            ? tableData
+            : [],
+      topListItems: chartType === "toplist" ? topListData : [],
+    });
+  }, [resultGroupByFields, chartType, timeseriesData, tableData, topListData]);
+
+  const entityNameMap: TelemetryEntityNameMap = useTelemetryEntityNames(
+    entityResolutionRequest.ids,
+    { typeHints: entityResolutionRequest.typeHints },
+  );
+
+  const { pivotedData, seriesKeys, seriesLabels } = useMemo(() => {
+    return pivotTimeseriesData(timeseriesData, entityNameMap);
+  }, [timeseriesData, entityNameMap]);
 
   const renderSelectControl: (
     label: string,
@@ -633,7 +698,9 @@ const LogsAnalyticsView: FunctionComponent<LogsAnalyticsViewProps> = (
                   backgroundColor: CHART_COLORS[index % CHART_COLORS.length],
                 }}
               />
-              <span className="text-[11px] text-gray-500">{key}</span>
+              <span className="text-[11px] text-gray-500">
+                {seriesLabels[key] || key}
+              </span>
             </div>
           );
         })}
@@ -708,7 +775,7 @@ const LogsAnalyticsView: FunctionComponent<LogsAnalyticsViewProps> = (
                   tickFormatter={formatYAxisTick}
                 />
                 <Tooltip
-                  content={<AnalyticsTooltip />}
+                  content={<AnalyticsTooltip seriesLabels={seriesLabels} />}
                   cursor={{
                     stroke: "var(--ou-accent-muted, #c7d2fe)",
                     strokeWidth: 1,
@@ -767,7 +834,7 @@ const LogsAnalyticsView: FunctionComponent<LogsAnalyticsViewProps> = (
                   tickFormatter={formatYAxisTick}
                 />
                 <Tooltip
-                  content={<AnalyticsTooltip />}
+                  content={<AnalyticsTooltip seriesLabels={seriesLabels} />}
                   cursor={{ fill: "rgba(99,102,241,0.04)" }}
                 />
                 {seriesKeys.map((key: string, index: number) => {
@@ -840,7 +907,11 @@ const LogsAnalyticsView: FunctionComponent<LogsAnalyticsViewProps> = (
                   style={{ backgroundColor: color }}
                 />
                 <div className="w-44 min-w-0 truncate text-sm font-medium text-gray-700">
-                  {item.value || "(empty)"}
+                  {getAnalyticsGroupValueLabel(
+                    resultGroupByFields[0],
+                    item.value,
+                    entityNameMap,
+                  ) || "(empty)"}
                 </div>
                 <div className="flex-1">
                   <div className="relative h-7 w-full overflow-hidden rounded-md bg-gray-50">
@@ -901,7 +972,13 @@ const LogsAnalyticsView: FunctionComponent<LogsAnalyticsViewProps> = (
                       key={key}
                       className="px-4 py-2.5 text-left text-[11px] font-semibold uppercase tracking-wider text-gray-400"
                     >
-                      {key}
+                      {getAnalyticsDimensionLabel(
+                        key,
+                        tableData.map((row: AnalyticsTableRow): string => {
+                          return row.groupValues?.[key] || "";
+                        }),
+                        entityNameMap,
+                      )}
                     </th>
                   );
                 })}
@@ -934,7 +1011,11 @@ const LogsAnalyticsView: FunctionComponent<LogsAnalyticsViewProps> = (
                           key={key}
                           className="whitespace-nowrap px-4 py-2.5 text-sm text-gray-700"
                         >
-                          {row.groupValues[key] || "(empty)"}
+                          {getAnalyticsGroupValueLabel(
+                            key,
+                            row.groupValues[key] || "",
+                            entityNameMap,
+                          ) || "(empty)"}
                         </td>
                       );
                     })}

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

@@ -1,4 +1,10 @@
-import React, { FunctionComponent, ReactElement, useMemo } from "react";
+import React, {
+  FunctionComponent,
+  ReactElement,
+  useId,
+  useMemo,
+  useState,
+} from "react";
 import {
   FacetData,
   FacetValue,
@@ -16,6 +22,24 @@ import Dictionary from "../../../../Types/Dictionary";
 import ComponentLoader from "../../ComponentLoader/ComponentLoader";
 import { getSeverityColor } from "./severityColors";
 import LogSeverity from "../../../../Types/Log/LogSeverity";
+import { TelemetryEntityNameMap } from "../../../Utils/Telemetry/TelemetryEntityNames";
+import { mergeFacetValueDisplayMap } from "../LogsEntityNames";
+import IconProp from "../../../../Types/Icon/IconProp";
+import {
+  RESOURCE_FACET_CATALOG_KEYS,
+  ResourceFacetDefinition,
+  getResourceFacetDefinition,
+  isCatalogResourceFacetKey,
+} from "../../../../Types/Telemetry/ResourceFacetCatalog";
+import HiddenFacetsFooter from "../../TelemetryViewer/components/HiddenFacetsFooter";
+import {
+  FacetVisibility,
+  computeFacetVisibility,
+  getSidebarFacetEmptyStateText,
+} from "../../TelemetryViewer/FacetVisibility";
+import useFacetSearchExemptions, {
+  FacetSearchExemptions,
+} from "../../TelemetryViewer/useFacetSearchExemptions";
 
 export interface LogsFacetSidebarProps {
   facetData: FacetData;
@@ -25,6 +49,12 @@ export interface LogsFacetSidebarProps {
   dockerHostMap?: Dictionary<DockerHost>;
   podmanHostMap?: Dictionary<PodmanHost>;
   kubernetesClusterMap?: Dictionary<KubernetesCluster>;
+  /*
+   * Generic resolver names for resource facet values the maps above do not
+   * hold (e.g. a RUM application id under "Service"). Used only when the
+   * server sent no displayName and no preloaded map names the value.
+   */
+  entityNameMap?: TelemetryEntityNameMap | undefined;
   onIncludeFilter: (facetKey: string, value: string) => void;
   onExcludeFilter: (facetKey: string, value: string) => void;
   activeFilters?: Array<ActiveFilter> | undefined;
@@ -43,13 +73,21 @@ export interface LogsFacetSidebarProps {
     | undefined;
 }
 
-const RESOURCE_FACET_KEYS: ReadonlySet<string> = new Set([
-  "primaryEntityId",
-  "hostId",
-  "dockerHostId",
-  "podmanHostId",
-  "kubernetesClusterId",
-]);
+/*
+ * Facets whose search box also asks the server: the Service facet and every
+ * resource type in the catalog, all resolved against Postgres.
+ */
+function isServerSearchableFacetKey(key: string): boolean {
+  return key === "primaryEntityId" || isCatalogResourceFacetKey(key);
+}
+
+/*
+ * Only resource facets fold away while empty — an empty list there means the
+ * project has no resource of that type. Service and severity always show.
+ */
+function isHideableFacetKey(key: string): boolean {
+  return isCatalogResourceFacetKey(key);
+}
 
 const SEVERITY_ORDER: Array<string> = [
   LogSeverity.Fatal,
@@ -167,13 +205,16 @@ function buildClusterDisplayMap(
 }
 
 function getFacetTitle(key: string): string {
+  const resourceDefinition: ResourceFacetDefinition | undefined =
+    getResourceFacetDefinition(key);
+
+  if (resourceDefinition) {
+    return resourceDefinition.label;
+  }
+
   const titleMap: Record<string, string> = {
     severityText: "Severity",
     primaryEntityId: "Service",
-    hostId: "Host",
-    dockerHostId: "Docker Host",
-    podmanHostId: "Podman Host",
-    kubernetesClusterId: "Kubernetes Cluster",
     traceId: "Trace ID",
     spanId: "Span ID",
   };
@@ -181,6 +222,21 @@ function getFacetTitle(key: string): string {
   return titleMap[key] || key;
 }
 
+function getFacetIcon(key: string): IconProp | undefined {
+  if (key === "primaryEntityId" || key === "serviceId") {
+    return IconProp.SquareStack;
+  }
+
+  return getResourceFacetDefinition(key)?.icon;
+}
+
+// Severity, then Service, then resources in catalog order.
+const PRIORITY_FACET_KEYS: ReadonlyArray<string> = [
+  "severityText",
+  "primaryEntityId",
+  ...RESOURCE_FACET_CATALOG_KEYS,
+];
+
 const LogsFacetSidebar: FunctionComponent<LogsFacetSidebarProps> = (
   props: LogsFacetSidebarProps,
 ): ReactElement => {
@@ -189,45 +245,60 @@ const LogsFacetSidebar: FunctionComponent<LogsFacetSidebarProps> = (
   }, []);
 
   const serviceDisplayMap: Record<string, string> = useMemo(() => {
-    return buildServiceDisplayMap(props.serviceMap);
-  }, [props.serviceMap]);
+    return mergeFacetValueDisplayMap(
+      buildServiceDisplayMap(props.serviceMap),
+      props.entityNameMap,
+    );
+  }, [props.serviceMap, props.entityNameMap]);
 
   const serviceColorMap: Record<string, string> = useMemo(() => {
     return buildServiceColorMap(props.serviceMap);
   }, [props.serviceMap]);
 
   const hostDisplayMap: Record<string, string> = useMemo(() => {
-    return buildHostDisplayMap(props.hostMap);
-  }, [props.hostMap]);
+    return mergeFacetValueDisplayMap(
+      buildHostDisplayMap(props.hostMap),
+      props.entityNameMap,
+    );
+  }, [props.hostMap, props.entityNameMap]);
 
   const dockerHostDisplayMap: Record<string, string> = useMemo(() => {
-    return buildDockerHostDisplayMap(props.dockerHostMap);
-  }, [props.dockerHostMap]);
+    return mergeFacetValueDisplayMap(
+      buildDockerHostDisplayMap(props.dockerHostMap),
+      props.entityNameMap,
+    );
+  }, [props.dockerHostMap, props.entityNameMap]);
 
   const podmanHostDisplayMap: Record<string, string> = useMemo(() => {
-    return buildPodmanHostDisplayMap(props.podmanHostMap);
-  }, [props.podmanHostMap]);
+    return mergeFacetValueDisplayMap(
+      buildPodmanHostDisplayMap(props.podmanHostMap),
+      props.entityNameMap,
+    );
+  }, [props.podmanHostMap, props.entityNameMap]);
 
   const clusterDisplayMap: Record<string, string> = useMemo(() => {
-    return buildClusterDisplayMap(props.kubernetesClusterMap);
-  }, [props.kubernetesClusterMap]);
+    return mergeFacetValueDisplayMap(
+      buildClusterDisplayMap(props.kubernetesClusterMap),
+      props.entityNameMap,
+    );
+  }, [props.kubernetesClusterMap, props.entityNameMap]);
+
+  /*
+   * Resource types the viewer preloads no map for (Proxmox, vCenter, Ceph,
+   * ...) still get the resolver's names underneath the server displayName.
+   */
+  const entityNameDisplayMap: Record<string, string> = useMemo(() => {
+    return mergeFacetValueDisplayMap({}, props.entityNameMap);
+  }, [props.entityNameMap]);
 
   const facetKeys: Array<string> = useMemo(() => {
-    const priorityKeys: Array<string> = [
-      "severityText",
-      "primaryEntityId",
-      "hostId",
-      "dockerHostId",
-      "podmanHostId",
-      "kubernetesClusterId",
-    ];
     const otherKeys: Array<string> = Object.keys(props.facetData).filter(
       (key: string) => {
-        return !priorityKeys.includes(key);
+        return !PRIORITY_FACET_KEYS.includes(key);
       },
     );
     return [
-      ...priorityKeys.filter((key: string) => {
+      ...PRIORITY_FACET_KEYS.filter((key: string) => {
         return props.facetData[key] !== undefined;
       }),
       ...otherKeys.sort(),
@@ -251,6 +322,32 @@ const LogsFacetSidebar: FunctionComponent<LogsFacetSidebarProps> = (
     return map;
   }, [props.activeFilters]);
 
+  const [showHidden, setShowHidden] = useState<boolean>(false);
+  const facetListId: string = useId();
+
+  const facetSearch: FacetSearchExemptions = useFacetSearchExemptions({
+    facetData: props.facetData,
+    onFacetSearchChange: props.onFacetSearchChange,
+  });
+
+  const visibility: FacetVisibility = useMemo(() => {
+    return computeFacetVisibility({
+      keys: facetKeys,
+      facetData: props.facetData,
+      isHideable: isHideableFacetKey,
+      activeValuesByKey: activeValuesByKey,
+      searchExemptKeys: facetSearch.searchExemptKeys,
+      showHidden: showHidden,
+      getTitle: getFacetTitle,
+    });
+  }, [
+    facetKeys,
+    props.facetData,
+    activeValuesByKey,
+    facetSearch.searchExemptKeys,
+    showHidden,
+  ]);
+
   return (
     <div className="flex h-full w-56 flex-none flex-col overflow-y-auto rounded-lg border border-gray-200 bg-white">
       <div className="border-b border-gray-100 px-3 py-2.5">
@@ -265,7 +362,7 @@ const LogsFacetSidebar: FunctionComponent<LogsFacetSidebarProps> = (
         </div>
       )}
 
-      <div className="flex-1 overflow-y-auto">
+      <div id={facetListId} className="flex-1 overflow-y-auto">
         {props.savedViews && props.savedViews.length > 0 && (
           <SavedViewsFacetSection
             savedViews={props.savedViews}
@@ -275,13 +372,13 @@ const LogsFacetSidebar: FunctionComponent<LogsFacetSidebarProps> = (
           />
         )}
 
-        {facetKeys.map((key: string) => {
+        {visibility.visibleKeys.map((key: string) => {
           const values: Array<FacetValue> = props.facetData[key] || [];
 
           let valueDisplayMap: Record<string, string> | undefined;
           let valueColorMap: Record<string, string> | undefined;
 
-          if (key === "primaryEntityId") {
+          if (key === "primaryEntityId" || key === "serviceId") {
             valueDisplayMap = serviceDisplayMap;
             valueColorMap = serviceColorMap;
           } else if (key === "hostId") {
@@ -294,13 +391,13 @@ const LogsFacetSidebar: FunctionComponent<LogsFacetSidebarProps> = (
             valueDisplayMap = clusterDisplayMap;
           } else if (key === "severityText") {
             valueColorMap = severityColorMap;
+          } else if (isCatalogResourceFacetKey(key)) {
+            valueDisplayMap = entityNameDisplayMap;
           }
 
           const onSearchChange: ((text: string) => void) | undefined =
-            RESOURCE_FACET_KEYS.has(key) && props.onFacetSearchChange
-              ? (text: string) => {
-                  props.onFacetSearchChange!(key, text);
-                }
+            isServerSearchableFacetKey(key)
+              ? facetSearch.getSearchChangeHandler(key)
               : undefined;
 
           return (
@@ -315,9 +412,29 @@ const LogsFacetSidebar: FunctionComponent<LogsFacetSidebarProps> = (
               valueColorMap={valueColorMap}
               activeValues={activeValuesByKey[key]}
               onSearchChange={onSearchChange}
+              icon={getFacetIcon(key)}
+              searchText={facetSearch.searchTextByKey[key] ?? ""}
+              onSearchTextChange={(text: string) => {
+                facetSearch.setSearchText(key, text);
+              }}
+              emptyStateText={getSidebarFacetEmptyStateText({
+                isHideable: isHideableFacetKey(key),
+                emptyStateNoun: getResourceFacetDefinition(key)?.pluralLabel,
+                searchedAtArrivalText: facetSearch.searchedAtArrivalByKey[key],
+              })}
             />
           );
         })}
+
+        <HiddenFacetsFooter
+          hiddenCount={visibility.hiddenCount}
+          hiddenTitles={visibility.hiddenTitles}
+          isShowingHidden={showHidden}
+          controlsId={facetListId}
+          onToggle={() => {
+            setShowHidden(!showHidden);
+          }}
+        />
       </div>
     </div>
   );