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([]); + + // 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 = (
- setService(e.target.value)} - /> +