feat(SpanBarRow): add GenAI span type icons for agentic, LLM, tool, and retrieval spans#3811
Open
bhuvan-somisetty wants to merge 1 commit intojaegertracing:mainfrom
Open
Conversation
…nd retrieval spans Signed-off-by: bhuvan-somisetty <[email protected]>
github-actions
Bot
added
the
pr-quota-reached
|
Hi @bhuvan-somisetty, thanks for your contribution! To ensure quality reviews, we limit how many concurrent PRs new contributors can open:
This PR is currently on hold. We will automatically move this into the review queue once your existing PRs are merged or closed. Please see our Contributing Guidelines for details on our tiered quota policy. |
Contributor
There was a problem hiding this comment.
Pull request overview
This PR adds GenAI-aware span classification and timeline iconography to Jaeger UI so GenAI traces are easier to scan in the TraceTimelineViewer. It also pulls in shared detection utilities that appear intended to support the related GenAI attribute-rendering work.
Changes:
- Adds
classifySpan/isGenAITracehelpers and shared GenAI attribute-key metadata insrc/utils/genai/detect.ts. - Introduces a new
GenAISpanIconcomponent that maps classified GenAI spans toreact-icons/io5icons. - Wires the icon into
SpanBarRowand adds new unit tests for the detection helper and icon component.
Reviewed changes
Copilot reviewed 5 out of 5 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
packages/jaeger-ui/src/utils/genai/detect.ts |
Adds GenAI span classification helpers and shared rich-media attribute key metadata. |
packages/jaeger-ui/src/utils/genai/detect.test.ts |
Adds unit tests for GenAI attribute detection and span classification. |
packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanBarRow.tsx |
Injects the new GenAI icon into the timeline row label area. |
packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/GenAISpanIcon.tsx |
New component that chooses an icon/label from classifySpan(span). |
packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/GenAISpanIcon.test.tsx |
Adds focused tests for null rendering, labels, and className passthrough. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| import { classifySpan, type GenAISpanKind } from '../../../utils/genai/detect'; | ||
| import { IOtelSpan } from '../../../types/otel'; | ||
|
|
||
| type IconComponent = React.ComponentType<{ className?: string }>; |
| {!hasOwnError && hasChildError && ( | ||
| <IoAlert className="SpanBarRow--errorIcon SpanBarRow--errorIcon--hollow" /> | ||
| )} | ||
| <GenAISpanIcon span={span} className="SpanBarRow--genAIIcon" /> |
| {!hasOwnError && hasChildError && ( | ||
| <IoAlert className="SpanBarRow--errorIcon SpanBarRow--errorIcon--hollow" /> | ||
| )} | ||
| <GenAISpanIcon span={span} className="SpanBarRow--genAIIcon" /> |
Comment on lines
+18
to
+24
| const KIND_ICON: Record<Exclude<GenAISpanKind, 'STANDARD'>, IconComponent> = { | ||
| AGENT: IoHardwareChipOutline, | ||
| LLM_CALL: IoFlashOutline, | ||
| TOOL_CALL: IoBuildOutline, | ||
| RETRIEVAL: IoServerOutline, | ||
| UNKNOWN_GENAI: IoStarOutline, | ||
| }; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Closes #3810
SpanBarRowcurrently has icons only for error state, links, and RPC connections. When a trace follows the OTel GenAI semantic conventions, every span looks identical in the waterfall regardless of whether it is an agent invocation, an LLM call, a tool execution, or a RAG retrieval step. This makes it hard to scan a GenAI trace at a glance.This adds a
GenAISpanIconcomponent that readsgen_ai.operation.namefromspan.attributesand renders one of five icons fromreact-icons/io5(already bundled). The icon is injected into the existing icon area inSpanBarRow, next to the error and link icons.For any span with no
gen_ai.*attributes,classifySpanreturns'STANDARD'andGenAISpanIconreturnsnull, so the change is completely invisible for non-GenAI traces.The
classifySpanandisGenAITraceutilities insrc/utils/genai/detect.tsare shared with the attribute renderer work in #3809. Since that PR is still open,detect.tsis included here as well so this branch is self-contained. Once one of the two merges, the other can drop the duplicate file.Tested by rendering
GenAISpanIconwith eachgen_ai.operation.namevalue and confirming the correctaria-label, and confirming null return for a span with nogen_ai.*attributes.