How jaegertracing/jaeger-ui works
Jaeger UI is a browser application for exploring distributed traces and service behavior. Users search for traces, open a result, and inspect its spans through timeline, flamegraph, and graph views; related workflows compare traces and examine service metrics and dependencies. The UI also includes deep-dependency analysis and an assistant surface. The graph maps the principal routes and query/API boundary, plus domain analysis layers visible in the tree. Several feature links rely on module names and documented hook behavior; unsampled implementation details are not asserted.
Main entry points: jaeger.ts Jaeger API client · TracePage/index.tsx Trace detail page · App/index.tsx App and routes · SearchTracePage/index.tsx Trace search
Components 24
Application shell
- App and routes
packages/jaeger-ui/src/components/App/index.tsx - Query provider
packages/jaeger-ui/src/query/app-query-client.tsx - Jaeger assistant
packages/jaeger-ui/src/components/App/JaegerAssistantPanel.tsx
Trace exploration
- Trace search
packages/jaeger-ui/src/components/SearchTracePage/index.tsx - Search results
packages/jaeger-ui/src/components/SearchTracePage/SearchResults/index.tsx - Trace detail page
packages/jaeger-ui/src/components/TracePage/index.tsx - Span timeline
packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/index.tsx - Trace flamegraph
packages/jaeger-ui/src/components/TracePage/TraceFlamegraph/index.tsx - Trace graph
packages/jaeger-ui/src/components/TracePage/TraceGraph/TraceGraph.tsx
Service analysis
- Trace comparison
packages/jaeger-ui/src/components/TraceDiff/TraceDiff.tsx - Service monitoring
packages/jaeger-ui/src/components/Monitor/ServicesView/index.tsx - Service dependencies
packages/jaeger-ui/src/components/DependencyGraph/index.tsx - Deep dependency graph
packages/jaeger-ui/src/components/DeepDependencies/index.tsx
Data and models
- Trace discovery
packages/jaeger-ui/src/hooks/useTraceDiscovery.ts - Jaeger API client
packages/jaeger-ui/src/api/jaeger.ts - Trace loading
packages/jaeger-ui/src/hooks/useTraceLoading.ts - Trace models
packages/jaeger-ui/src/model/transform-trace-data.ts - Metrics queries
packages/jaeger-ui/src/components/Monitor/ServicesView/useMetricsQuery.ts - Dependency query
packages/jaeger-ui/src/hooks/useDependenciesQuery.ts - Deep graph query
packages/jaeger-ui/src/hooks/useDeepDependencyGraphQuery.ts - Dependency transforms
packages/jaeger-ui/src/model/ddg/transformDdgData.ts - Assistant hook
packages/jaeger-ui/src/hooks/useJaegerAssistant.ts
Other components
- Jaeger user
- Jaeger backend
Connections 24
- Jaeger user → App and routes: uses
- App and routes → Trace search: routes to
- App and routes → Query provider: provides queries
- App and routes → Jaeger assistant: shows
- Trace search → Trace discovery: discovers traces
- Trace discovery → Jaeger API client: requests traces
- Jaeger API client → Jaeger backend: calls
- Trace search → Search results: presents
- Search results → Trace loading: opens trace
- Trace loading → Jaeger API client: loads trace
- Trace loading → Trace models: transforms data
- Trace detail page → Span timeline: renders spans
- Trace detail page → Trace flamegraph: renders view
- Trace detail page → Trace graph: renders graph
- Trace detail page → Trace comparison: supports comparison
- Service monitoring → Metrics queries: queries metrics
- Metrics queries → Jaeger API client: fetches metrics
- Service dependencies → Dependency query: queries dependencies
- Dependency query → Jaeger API client: fetches dependencies
- Jaeger API client → Jaeger backend: calls
- Deep dependency graph → Deep graph query: queries graph
- Deep graph query → Jaeger API client: fetches graph data
- Deep graph query → Dependency transforms: transforms payload
- Jaeger assistant → Assistant hook: uses