From 0b475992ee25cadd3a330f5360901e6e4c728170 Mon Sep 17 00:00:00 2001
From: Jeff Larson <thejefflarson@gmail.com>
Date: Sun, 7 Jun 2026 22:55:50 -0700
Subject: [PATCH] ui: service filter on traces is a dropdown

Replace the free-text service input with a <select> populated from /api/services
(the services that have traces in the current window). "all services" clears it.
A service set via a service-map drill-down stays selectable even if it's outside
the window's list. Service stays in the URL, so drill-downs still land here.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 ui/src/components/TraceList.tsx | 30 ++++++++++++++++++++++++------
 1 file changed, 24 insertions(+), 6 deletions(-)

diff --git a/ui/src/components/TraceList.tsx b/ui/src/components/TraceList.tsx
index 8e243a5..c3ea44f 100644
--- a/ui/src/components/TraceList.tsx
+++ b/ui/src/components/TraceList.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useState } from "react";
 import { useSearchParams } from "react-router-dom";
-import { listTraces, type TraceSummary } from "../api";
+import { listTraces, listServices, type TraceSummary } from "../api";
 import { useControls, rangeParams } from "../timerange";
 import { useSort } from "../sort";
 
@@ -28,6 +28,18 @@ export default function TraceList({ onSelect }: { onSelect: (traceId: string) =>
   const [attr, setAttr] = useState("");
   const [errorsOnly, setErrorsOnly] = useState(false);
   const [minDuration, setMinDuration] = useState("");
+  const [services, setServices] = useState<string[]>([]);
+
+  // Populate the service dropdown from the services that have traces in range.
+  useEffect(() => {
+    let active = true;
+    listServices(rangeParams(rangeKey))
+      .then((rows) => active && setServices(rows.map((r) => r.service).sort()))
+      .catch(() => active && setServices([]));
+    return () => {
+      active = false;
+    };
+  }, [rangeKey, tick]);
 
   useEffect(() => {
     let active = true;
@@ -61,11 +73,17 @@ export default function TraceList({ onSelect }: { onSelect: (traceId: string) =>
 
   const filters = (
     <div className="filters">
-      <input
-        placeholder="service"
-        value={service}
-        onChange={(e) => setService(e.target.value)}
-      />
+      <select value={service} onChange={(e) => setService(e.target.value)}>
+        <option value="">all services</option>
+        {/* keep a drill-down service selectable even if it's outside the window's list */}
+        {(services.includes(service) || !service ? services : [service, ...services]).map(
+          (s) => (
+            <option key={s} value={s}>
+              {s}
+            </option>
+          ),
+        )}
+      </select>
       <input
         placeholder="root span name…"
         value={name}