@oneuptime/common 10.8.2 → 11.0.0

package/Types/Trace/TraceRecordingRuleDefinition.ts

@@ -6,6 +6,11 @@ import TraceAggregationType from "./TraceAggregationType";
  * match. Each source is aliased (A, B, C, ...) and referenced from the rule's
  * expression string.
  */
+export interface TraceRecordingRuleAttributeFilter {
+  key: string;
+  value: string;
+}
+
 export interface TraceRecordingRuleSource {
   alias: string;
   aggregationType: TraceAggregationType;
@@ -13,8 +18,16 @@ export interface TraceRecordingRuleSource {
   spanNameRegex?: string;
   spanKind?: string;
   onlyErrors?: boolean;
+  /*
+   * Legacy single attribute filter — superseded by `filterAttributes` but
+   * still honored for rules saved before multi-filter support. Use
+   * TraceRecordingRuleDefinitionUtil.getSourceAttributeFilters to read the
+   * combined set.
+   */
   filterAttributeKey?: string;
   filterAttributeValue?: string;
+  // Multiple attribute equality filters — ANDed (e.g. http.route AND url.host).
+  filterAttributes?: Array<TraceRecordingRuleAttributeFilter>;
 }
 
 /*
@@ -78,6 +91,11 @@ export class TraceRecordingRuleDefinitionUtil {
         label: "p50 Duration (s)",
         description: "Median span duration.",
       },
+      {
+        value: TraceAggregationType.P90DurationSeconds,
+        label: "p90 Duration (s)",
+        description: "90th percentile span duration.",
+      },
       {
         value: TraceAggregationType.P95DurationSeconds,
         label: "p95 Duration (s)",
@@ -112,6 +130,38 @@ export class TraceRecordingRuleDefinitionUtil {
     ];
   }
 
+  /*
+   * Combined attribute filters for a source: the multi-filter array plus the
+   * legacy single pair (deduplicated by key, array entries win).
+   */
+  public static getSourceAttributeFilters(
+    source: TraceRecordingRuleSource,
+  ): Array<TraceRecordingRuleAttributeFilter> {
+    const filters: Array<TraceRecordingRuleAttributeFilter> = [];
+    const seenKeys: Set<string> = new Set<string>();
+
+    for (const filter of source.filterAttributes || []) {
+      if (!filter || typeof filter !== "object") {
+        continue;
+      }
+      const key: string = (filter.key || "").trim();
+      const value: string = (filter.value || "").trim();
+      if (!key || !value || seenKeys.has(key)) {
+        continue;
+      }
+      seenKeys.add(key);
+      filters.push({ key, value });
+    }
+
+    const legacyKey: string = (source.filterAttributeKey || "").trim();
+    const legacyValue: string = (source.filterAttributeValue || "").trim();
+    if (legacyKey && legacyValue && !seenKeys.has(legacyKey)) {
+      filters.push({ key: legacyKey, value: legacyValue });
+    }
+
+    return filters;
+  }
+
   public static getNextAlias(
     sources: Array<TraceRecordingRuleSource> | undefined,
   ): string {
@@ -161,6 +211,12 @@ export class TraceRecordingRuleDefinitionUtil {
     const aliases: Set<string> = new Set<string>();
     for (let i: number = 0; i < sources.length; i++) {
       const source: TraceRecordingRuleSource = sources[i]!;
+
+      // Definitions arrive as JSON (deep links, API writes) — never throw.
+      if (!source || typeof source !== "object") {
+        return `Source #${i + 1}: Invalid source.`;
+      }
+
       const prefix: string = `Source ${source.alias || `#${i + 1}`}: `;
 
       if (!source.alias || !ALIAS_REGEX.test(source.alias)) {
@@ -184,6 +240,24 @@ export class TraceRecordingRuleDefinitionUtil {
       if (hasFilterKey !== hasFilterValue) {
         return `${prefix}Attribute filter needs both a key and a value (or leave both empty).`;
       }
+
+      if (
+        source.filterAttributes !== undefined &&
+        !Array.isArray(source.filterAttributes)
+      ) {
+        return `${prefix}Invalid attribute filters.`;
+      }
+
+      for (const filter of source.filterAttributes || []) {
+        if (!filter || typeof filter !== "object") {
+          return `${prefix}Invalid attribute filter row.`;
+        }
+        const hasKey: boolean = Boolean(filter.key?.trim());
+        const hasValue: boolean = Boolean(filter.value?.trim());
+        if (hasKey !== hasValue) {
+          return `${prefix}Attribute filter needs both a key and a value (or remove the row).`;
+        }
+      }
     }
 
     const expression: string = (definition.expression || "").trim();

package/UI/Components/LogsViewer/LogsViewer.tsx

@@ -466,7 +466,7 @@ const LogsViewer: FunctionComponent<ComponentProps> = (
          * Logs without a service.name are tagged with the projectId
          * (ServiceType.Unknown) and have no Service row. Register a
          * synthetic "Unknown Service" keyed by the projectId so the
-         * serviceId -> name resolution and the serviceId facet render
+         * primaryEntityId -> name resolution and the service facet render
          * "Unknown Service" instead of a raw id. Harmless when no logs
          * are unattributed — nothing resolves against it.
          */
@@ -631,17 +631,17 @@ const LogsViewer: FunctionComponent<ComponentProps> = (
 
     // Resolve human-readable service name to UUID if needed
     if (
-      queryFilter["serviceId"] &&
-      typeof queryFilter["serviceId"] === "string"
+      queryFilter["primaryEntityId"] &&
+      typeof queryFilter["primaryEntityId"] === "string"
     ) {
-      const serviceName: string = queryFilter["serviceId"] as string;
+      const serviceName: string = queryFilter["primaryEntityId"] as string;
       const resolvedId: string | undefined = resolveServiceNameToId(
         serviceName,
         serviceMap,
       );
 
       if (resolvedId) {
-        queryFilter["serviceId"] = resolvedId;
+        queryFilter["primaryEntityId"] = resolvedId;
       }
     }
 
@@ -824,7 +824,7 @@ const LogsViewer: FunctionComponent<ComponentProps> = (
     }
 
     return props.activeFilters.map((filter: ActiveFilter): ActiveFilter => {
-      if (filter.facetKey === "serviceId" && serviceMap[filter.value]) {
+      if (filter.facetKey === "primaryEntityId" && serviceMap[filter.value]) {
         const service: Service | undefined = serviceMap[filter.value];
         return {
           ...filter,
@@ -870,7 +870,7 @@ const LogsViewer: FunctionComponent<ComponentProps> = (
   ]);
 
   /*
-   * Replace serviceId UUIDs with human-readable names in value suggestions,
+   * Replace primaryEntityId UUIDs with human-readable names in value suggestions,
    * and merge in the lazily-fetched attribute value suggestions.
    * Must be before early returns to maintain consistent hook call order.
    */
@@ -889,8 +889,11 @@ const LogsViewer: FunctionComponent<ComponentProps> = (
         ...attributeValueSuggestions,
       };
 
-      if (suggestions["serviceId"] && Object.keys(serviceMap).length > 0) {
-        suggestions["serviceId"] = suggestions["serviceId"].map(
+      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;

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

@@ -65,7 +65,7 @@ interface ContextLog {
   time: string;
   severity: string;
   body: string;
-  serviceId: string;
+  primaryEntityId: string;
 }
 
 const prepareBody: (body: string | undefined) => PreparedBody = (
@@ -106,7 +106,7 @@ function parseContextRow(row: JSONObject): ContextLog {
     time: String(row["time"] || ""),
     severity: String(row["severityText"] || "Unspecified"),
     body: String(row["body"] || ""),
-    serviceId: String(row["serviceId"] || ""),
+    primaryEntityId: String(row["primaryEntityId"] || ""),
   };
 }
 
@@ -121,9 +121,10 @@ const LogDetailsPanel: FunctionComponent<LogDetailsPanelProps> = (
   const [contextLoaded, setContextLoaded] = useState<boolean>(false);
 
   const variant: "floating" | "embedded" = props.variant || "floating";
-  const serviceId: string = props.log.serviceId?.toString() || "";
-  const service: Service | undefined = props.serviceMap[serviceId];
-  const serviceName: string = service?.name || serviceId || "Unknown service";
+  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";
 
@@ -214,7 +215,7 @@ const LogDetailsPanel: FunctionComponent<LogDetailsPanelProps> = (
 
   const loadContext: () => Promise<void> =
     useCallback(async (): Promise<void> => {
-      if (!props.projectId || !serviceId || !props.log.time) {
+      if (!props.projectId || !primaryEntityId || !props.log.time) {
         setContextError("Missing project or service information for context.");
         return;
       }
@@ -230,7 +231,7 @@ const LogDetailsPanel: FunctionComponent<LogDetailsPanelProps> = (
             ),
             data: {
               logId: props.log.getColumnValue("_id")?.toString() || "",
-              serviceId: serviceId,
+              primaryEntityId: primaryEntityId,
               time: props.log.time
                 ? OneUptimeDate.toString(props.log.time)
                 : "",
@@ -260,7 +261,7 @@ const LogDetailsPanel: FunctionComponent<LogDetailsPanelProps> = (
       } finally {
         setContextLoading(false);
       }
-    }, [props.projectId, serviceId, props.log]);
+    }, [props.projectId, primaryEntityId, props.log]);
 
   useEffect(() => {
     if (activeTab === "context" && !contextLoaded && !contextLoading) {
@@ -622,7 +623,7 @@ const LogDetailsPanel: FunctionComponent<LogDetailsPanelProps> = (
                   time: props.log.time ? props.log.time.toString() : "",
                   severity: props.log.severityText?.toString() || "Unspecified",
                   body: props.log.body || "",
-                  serviceId: serviceId,
+                  primaryEntityId: primaryEntityId,
                 },
                 true,
               )}

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

@@ -398,7 +398,7 @@ function extractCurrentWord(value: string): string {
 const FIELD_ALIAS_MAP: Record<string, string> = {
   severity: "severityText",
   level: "severityText",
-  service: "serviceId",
+  service: "primaryEntityId",
   trace: "traceId",
   span: "spanId",
 };

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

@@ -85,7 +85,7 @@ const CHART_COLORS_MUTED: Array<string> = [
 
 const DIMENSION_OPTIONS: Array<{ value: string; label: string }> = [
   { value: "severityText", label: "Severity" },
-  { value: "serviceId", label: "Service" },
+  { value: "primaryEntityId", label: "Service" },
   { value: "traceId", label: "Trace ID" },
   { value: "spanId", label: "Span ID" },
 ];
@@ -372,7 +372,7 @@ const LogsAnalyticsView: FunctionComponent<LogsAnalyticsViewProps> = (
         }
 
         const serviceFilterValues: Set<string> | undefined =
-          props.appliedFacetFilters.get("serviceId");
+          props.appliedFacetFilters.get("primaryEntityId");
 
         if (serviceFilterValues && serviceFilterValues.size > 0) {
           (requestData as Record<string, unknown>)["serviceIds"] =

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

@@ -39,7 +39,7 @@ export interface LogsFacetSidebarProps {
 }
 
 const RESOURCE_FACET_KEYS: ReadonlySet<string> = new Set([
-  "serviceId",
+  "primaryEntityId",
   "hostId",
   "dockerHostId",
   "kubernetesClusterId",
@@ -146,7 +146,7 @@ function buildClusterDisplayMap(
 function getFacetTitle(key: string): string {
   const titleMap: Record<string, string> = {
     severityText: "Severity",
-    serviceId: "Service",
+    primaryEntityId: "Service",
     hostId: "Host",
     dockerHostId: "Docker Host",
     kubernetesClusterId: "Kubernetes Cluster",
@@ -187,7 +187,7 @@ const LogsFacetSidebar: FunctionComponent<LogsFacetSidebarProps> = (
   const facetKeys: Array<string> = useMemo(() => {
     const priorityKeys: Array<string> = [
       "severityText",
-      "serviceId",
+      "primaryEntityId",
       "hostId",
       "dockerHostId",
       "kubernetesClusterId",
@@ -280,7 +280,7 @@ const LogsFacetSidebar: FunctionComponent<LogsFacetSidebarProps> = (
           let valueDisplayMap: Record<string, string> | undefined;
           let valueColorMap: Record<string, string> | undefined;
 
-          if (key === "serviceId") {
+          if (key === "primaryEntityId") {
             valueDisplayMap = serviceDisplayMap;
             valueColorMap = serviceColorMap;
           } else if (key === "hostId") {

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

@@ -233,10 +233,12 @@ const LogsTable: FunctionComponent<LogsTableProps> = (
           <tbody className="divide-y divide-gray-100">
             {props.logs.map((log: Log, index: number) => {
               const rowId: string = resolveLogIdentifier(log, index);
-              const serviceId: string = log.serviceId?.toString() || "";
-              const service: Service | undefined = props.serviceMap[serviceId];
+              const primaryEntityId: string =
+                log.primaryEntityId?.toString() || "";
+              const service: Service | undefined =
+                props.serviceMap[primaryEntityId];
               const serviceName: string =
-                service?.name || serviceId || "Unknown";
+                service?.name || primaryEntityId || "Unknown";
               const serviceColor: string =
                 (service?.serviceColor && service?.serviceColor.toString()) ||
                 "#94a3b8";

package/UI/Components/Navbar/NavBarMenuModal.tsx

@@ -137,11 +137,13 @@ interface IndexedItem {
 interface MenuGroup {
   category: string;
   items: IndexedItem[];
+  isRecent: boolean;
 }
 
 interface RawGroup {
   category: string;
   items: MoreMenuItem[];
+  isRecent: boolean;
 }
 
 const NavBarMenuModal: FunctionComponent<ComponentProps> = (
@@ -230,7 +232,7 @@ const NavBarMenuModal: FunctionComponent<ComponentProps> = (
       byCategory.get(category)!.push(item);
     });
     return order.map((category: string) => {
-      return { category, items: byCategory.get(category)! };
+      return { category, items: byCategory.get(category)!, isRecent: false };
     });
   }, [filteredItems]);
 
@@ -242,7 +244,7 @@ const NavBarMenuModal: FunctionComponent<ComponentProps> = (
   const displayGroups: MenuGroup[] = useMemo(() => {
     const raw: RawGroup[] = [];
     if (!query.trim() && recentItems.length > 0) {
-      raw.push({ category: recentLabel, items: recentItems });
+      raw.push({ category: recentLabel, items: recentItems, isRecent: true });
     }
     raw.push(...categoryGroups);
 
@@ -253,7 +255,7 @@ const NavBarMenuModal: FunctionComponent<ComponentProps> = (
         flatIndex++;
         return entry;
       });
-      return { category: group.category, items };
+      return { category: group.category, items, isRecent: group.isRecent };
     });
   }, [query, recentItems, categoryGroups, recentLabel]);
 
@@ -444,7 +446,7 @@ const NavBarMenuModal: FunctionComponent<ComponentProps> = (
     >
       {/* Backdrop */}
       <div
-        className={`fixed inset-0 bg-gray-900 bg-opacity-50 backdrop-blur-sm transition-opacity duration-200 ${
+        className={`fixed inset-0 bg-gray-900/50 backdrop-blur-sm transition-opacity duration-200 ${
           isShown ? "opacity-100" : "opacity-0"
         }`}
       />
@@ -456,8 +458,10 @@ const NavBarMenuModal: FunctionComponent<ComponentProps> = (
       >
         <div className="flex min-h-full items-start justify-center p-4 sm:p-6">
           <div
-            className={`relative mt-[6vh] flex w-full max-w-4xl flex-col overflow-hidden rounded-2xl bg-white shadow-2xl ring-1 ring-black ring-opacity-5 transition-all duration-200 ease-out ${
-              isShown ? "scale-100 opacity-100" : "scale-95 opacity-0"
+            className={`relative mt-[6vh] flex w-full max-w-4xl flex-col overflow-hidden rounded-2xl bg-white shadow-2xl ring-1 ring-gray-900/5 transition-all duration-200 ease-out ${
+              isShown
+                ? "translate-y-0 scale-100 opacity-100"
+                : "translate-y-2 scale-[0.98] opacity-0"
             }`}
             style={{ maxHeight: "80vh" }}
             onClick={(event: React.MouseEvent<HTMLDivElement>) => {
@@ -465,7 +469,7 @@ const NavBarMenuModal: FunctionComponent<ComponentProps> = (
             }}
           >
             {/* Search header */}
-            <div className="flex items-center gap-3 border-b border-gray-100 px-4 py-3">
+            <div className="flex items-center gap-3 border-b border-gray-100 px-5 py-4">
               <Icon
                 icon={IconProp.Search}
                 className="h-5 w-5 flex-shrink-0 text-gray-400"
@@ -482,6 +486,10 @@ const NavBarMenuModal: FunctionComponent<ComponentProps> = (
                     : undefined
                 }
                 aria-label={props.searchPlaceholder || "Search products"}
+                autoComplete="off"
+                autoCorrect="off"
+                autoCapitalize="off"
+                spellCheck={false}
                 value={query}
                 onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
                   setQuery(event.target.value);
@@ -490,9 +498,23 @@ const NavBarMenuModal: FunctionComponent<ComponentProps> = (
                 placeholder={props.searchPlaceholder || "Search…"}
                 className="flex-1 border-0 bg-transparent p-0 text-base text-gray-900 placeholder-gray-400 focus:outline-none focus:ring-0"
               />
-              <kbd className="hidden items-center rounded border border-gray-200 bg-gray-50 px-1.5 py-0.5 text-xs font-medium text-gray-400 sm:inline-flex">
-                {shortcutLabel}
-              </kbd>
+              {query ? (
+                <button
+                  type="button"
+                  aria-label="Clear search"
+                  onClick={() => {
+                    setQuery("");
+                    inputRef.current?.focus();
+                  }}
+                  className="flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full text-gray-400 transition-colors hover:bg-gray-100 hover:text-gray-600"
+                >
+                  <Icon icon={IconProp.Close} className="h-4 w-4" />
+                </button>
+              ) : (
+                <kbd className="hidden items-center rounded border border-gray-200 bg-gray-50 px-1.5 py-0.5 text-xs font-medium text-gray-400 sm:inline-flex">
+                  {shortcutLabel}
+                </kbd>
+              )}
             </div>
 
             {/* Body */}
@@ -500,19 +522,21 @@ const NavBarMenuModal: FunctionComponent<ComponentProps> = (
               id="navbar-menu-listbox"
               role="listbox"
               aria-label="Products"
-              className="flex-1 overflow-y-auto px-4 py-4"
+              className="flex-1 overflow-y-auto overscroll-contain px-5 pb-5 pt-4"
             >
               {flatItems.length === 0 ? (
                 <div className="flex flex-col items-center justify-center py-16 text-center">
-                  <Icon
-                    icon={IconProp.Search}
-                    className="mb-3 h-8 w-8 text-gray-300"
-                  />
-                  <p className="text-sm text-gray-500">
+                  <div className="mb-3 flex h-12 w-12 items-center justify-center rounded-full bg-gray-50 ring-1 ring-gray-100">
+                    <Icon
+                      icon={IconProp.Search}
+                      className="h-5 w-5 text-gray-400"
+                    />
+                  </div>
+                  <p className="text-sm font-medium text-gray-900">
                     {props.noResultsText || "No results found."}
                   </p>
                   {query && (
-                    <p className="mt-1 text-xs text-gray-400">
+                    <p className="mt-1 text-xs text-gray-500">
                       &ldquo;{query}&rdquo;
                     </p>
                   )}
@@ -521,10 +545,18 @@ const NavBarMenuModal: FunctionComponent<ComponentProps> = (
                 displayGroups.map((group: MenuGroup) => {
                   return (
                     <div key={group.category} className="mb-6 last:mb-1">
-                      <h3 className="mb-2 px-1 text-xs font-semibold uppercase tracking-wider text-gray-500">
-                        {group.category}
-                      </h3>
-                      <div className="grid grid-cols-2 gap-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5">
+                      <div className="mb-2.5 flex items-center gap-1.5 px-1">
+                        {group.isRecent && (
+                          <Icon
+                            icon={IconProp.Clock}
+                            className="h-3.5 w-3.5 text-gray-500"
+                          />
+                        )}
+                        <h3 className="text-[11px] font-semibold uppercase tracking-[0.1em] text-gray-500">
+                          {group.category}
+                        </h3>
+                      </div>
+                      <div className="grid grid-cols-1 gap-2 sm:grid-cols-2 lg:grid-cols-3">
                         {group.items.map((entry: IndexedItem) => {
                           const item: MoreMenuItem = entry.item;
                           const flatIndex: number = entry.flatIndex;
@@ -543,43 +575,44 @@ const NavBarMenuModal: FunctionComponent<ComponentProps> = (
                               ref={(element: HTMLDivElement | null) => {
                                 cellRefs.current[flatIndex] = element;
                               }}
-                              onMouseEnter={() => {
+                              onMouseMove={() => {
                                 setActiveIndex(flatIndex);
                               }}
-                              className="relative"
                             >
-                              {isCurrent && (
-                                <span
-                                  aria-hidden="true"
-                                  className="absolute right-2 top-2 z-10 h-2 w-2 rounded-full bg-indigo-500 ring-2 ring-white"
-                                />
-                              )}
                               <Link
                                 to={item.route}
                                 onClick={() => {
                                   selectItem(item);
                                 }}
-                                className={`group flex h-full flex-col items-center gap-2 rounded-xl p-3 text-center transition-all duration-150 ${
+                                className={`group flex h-full items-start gap-3 rounded-xl border p-3 text-left transition-colors duration-150 ${
                                   isActive
-                                    ? "scale-[1.03] bg-indigo-50 shadow-sm ring-2 ring-indigo-400"
+                                    ? "border-indigo-300 bg-indigo-50 shadow-sm"
                                     : isCurrent
-                                      ? "bg-indigo-50/60 ring-1 ring-indigo-200 hover:bg-indigo-50"
-                                      : "hover:bg-gray-50"
+                                      ? "border-indigo-100 bg-indigo-50/40"
+                                      : "border-transparent"
                                 }`}
                               >
                                 <div
-                                  className={`flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-xl ${colors.bg} ring-1 ${colors.ring}`}
+                                  className={`flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-lg ${colors.bg} ring-1 ${colors.ring}`}
                                 >
                                   <Icon
                                     icon={item.icon}
-                                    className={`h-6 w-6 transition-transform duration-150 group-hover:scale-110 ${colors.text}`}
+                                    className={`h-5 w-5 transition-transform duration-150 group-hover:scale-110 ${colors.text}`}
                                   />
                                 </div>
-                                <div className="w-full">
-                                  <p className="text-sm font-medium text-gray-900">
-                                    {highlightMatch(item.title)}
+                                <div className="min-w-0 flex-1">
+                                  <p className="flex items-center gap-1.5 text-sm font-medium text-gray-900">
+                                    <span className="truncate">
+                                      {highlightMatch(item.title)}
+                                    </span>
+                                    {isCurrent && (
+                                      <span
+                                        aria-hidden="true"
+                                        className="h-1.5 w-1.5 flex-shrink-0 rounded-full bg-indigo-500"
+                                      />
+                                    )}
                                   </p>
-                                  <p className="mt-0.5 text-xs leading-snug text-gray-500 line-clamp-2">
+                                  <p className="mt-0.5 text-xs leading-relaxed text-gray-500 line-clamp-2">
                                     {highlightMatch(item.description)}
                                   </p>
                                 </div>
@@ -596,21 +629,25 @@ const NavBarMenuModal: FunctionComponent<ComponentProps> = (
 
             {/* Footer */}
             {props.footer && (
-              <div className="flex items-center justify-between gap-4 border-t border-gray-100 bg-gray-50 px-4 py-3">
+              <div className="flex items-center justify-between gap-4 border-t border-gray-100 bg-gray-50/80 px-5 py-3">
                 <Link
                   to={props.footer.link}
                   openInNewTab={true}
                   className="group flex min-w-0 items-center gap-3"
                 >
-                  <div className="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg bg-gray-100 ring-1 ring-gray-200 transition-all group-hover:bg-gray-200">
+                  <div className="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg bg-gray-900 transition-colors group-hover:bg-gray-700">
                     <Icon
                       icon={IconProp.GitHub}
-                      className="h-4 w-4 text-gray-700"
+                      className="h-4 w-4 text-white"
                     />
                   </div>
                   <div className="min-w-0 text-left">
-                    <p className="truncate text-sm font-medium text-gray-900">
-                      {props.footer.title}
+                    <p className="flex items-center gap-1 text-sm font-medium text-gray-900">
+                      <span className="truncate">{props.footer.title}</span>
+                      <Icon
+                        icon={IconProp.ExternalLink}
+                        className="h-3 w-3 flex-shrink-0 text-gray-400 opacity-0 transition-opacity duration-150 group-hover:opacity-100 group-focus-visible:opacity-100"
+                      />
                     </p>
                     <p className="truncate text-xs text-gray-500">
                       {props.footer.description}

package/UI/Components/TelemetryViewer/TelemetryViewer.tsx

@@ -92,6 +92,17 @@ export interface TelemetryViewerProps<T> {
   onHistogramTimeRangeSelect?:
     | ((startTime: Date, endTime: Date) => void)
     | undefined;
+  // Extra controls in the histogram header (e.g. a chart-metric selector).
+  histogramHeaderActions?: ReactNode;
+  // Y-axis / tooltip value formatting (e.g. latency metrics in ms).
+  histogramValueFormatter?: ((value: number) => string) | undefined;
+
+  /*
+   * When set, replaces the histogram + facet sidebar + list with the given
+   * content (e.g. an analytics view). The toolbar, search bar, and active
+   * filter chips stay, so the override content can consume the same filters.
+   */
+  mainContentOverride?: ReactNode;
 
   // -- Pagination --
   page: number;
@@ -201,19 +212,31 @@ function TelemetryViewerInner<T>(props: TelemetryViewerProps<T>): ReactElement {
         />
       )}
 
+      {/* Main content override (e.g. analytics view) */}
+      {props.mainContentOverride}
+
       {/* Histogram */}
-      {showHistogram && props.histogramBuckets && props.histogramSeries && (
-        <TelemetryHistogram
-          buckets={props.histogramBuckets}
-          isLoading={props.histogramLoading || false}
-          series={props.histogramSeries}
-          title={props.histogramTitle}
-          onTimeRangeSelect={props.onHistogramTimeRangeSelect}
-        />
-      )}
+      {!props.mainContentOverride &&
+        showHistogram &&
+        props.histogramBuckets &&
+        props.histogramSeries && (
+          <TelemetryHistogram
+            buckets={props.histogramBuckets}
+            isLoading={props.histogramLoading || false}
+            series={props.histogramSeries}
+            title={props.histogramTitle}
+            onTimeRangeSelect={props.onHistogramTimeRangeSelect}
+            headerActions={props.histogramHeaderActions}
+            valueFormatter={props.histogramValueFormatter}
+          />
+        )}
 
       {/* Main area: facets + list */}
-      <div className="flex min-h-0 flex-1 gap-3">
+      <div
+        className={`flex min-h-0 flex-1 gap-3 ${
+          props.mainContentOverride ? "hidden" : ""
+        }`}
+      >
         {showFacets && (
           <TelemetryFacetSidebar
             facetData={props.facetData || {}}