prototype(explore): add Attributes page at /explore/attributes/#113190
prototype(explore): add Attributes page at /explore/attributes/#113190marthalyndon wants to merge 6 commits intomasterfrom
Conversation
Adds a new top-level Explore tab that lists span attributes with their type (string/number/boolean), fetched from the existing trace-items/attributes API. Description, unit, last used, and issues columns show "—" pending backend support. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
github-actions
bot
added
the
Scope: Frontend
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes and found 4 potential issues.
❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.
Reviewed by Cursor Bugbot for commit 92fa19a. Configure here.
| }); | ||
|
|
||
| return all.sort((a, b) => a.name.localeCompare(b.name)); | ||
| }, [results]); |
There was a problem hiding this comment.
useMemo dependency on unstable useQueries array reference
Medium Severity
The useMemo at line 70 uses [results] as its dependency, but useQueries returns a new array reference on every render, so this memo recomputes every time — providing no memoization benefit. This also cascades to the filtered memo since it depends on attributes. The codebase has an established pattern to fix this: use useQueries's combine option (as seen in useScmIntegrationTreeData.ts, useFeedbackEvents.tsx, and setupMessagingIntegrationButton.tsx) to derive stable values directly.
Additional Locations (1)
Reviewed by Cursor Bugbot for commit 92fa19a. Configure here.
| color: ${p => p.theme.tokens.content.secondary}; | ||
| width: ${p => (p.flex ? `${p.flex * 8}%` : 'auto')}; | ||
| white-space: nowrap; | ||
| `; |
There was a problem hiding this comment.
Column widths sum to 120% causing overflow
Medium Severity
HeadCell calculates width as flex * 8%. The flex values across all columns sum to 15 (3+5+2+2+2+1), so the total percentage width is 120%. Combined with the 40px StarCell, the table exceeds its container width. With table-layout: fixed and overflow: auto on the wrapper, this will produce an unintended horizontal scrollbar.
Additional Locations (1)
Reviewed by Cursor Bugbot for commit 92fa19a. Configure here.
|
|
||
| const Muted = styled('span')` | ||
| color: ${p => p.theme.tokens.content.secondary}; | ||
| `; |
There was a problem hiding this comment.
New styled components instead of core Flex/Text primitives
Low Severity
Multiple newly added styled() calls duplicate functionality available in core components. PageBody, Toolbar, and ToolbarLeft all use display: flex and could use Flex from @sentry/scraps/layout. Muted and AttributeName style text with color/font properties and could use Text from @sentry/scraps/text (e.g. <Text variant="muted">). Other explore views already use these core components extensively.
Triggered by project rule: Frontend guidelines
Reviewed by Cursor Bugbot for commit 92fa19a. Configure here.
| project: selection.projects, | ||
| itemType: 'spans', | ||
| ...normalizeDateTimeParams(selection.datetime), | ||
| }; |
There was a problem hiding this comment.
Environment filter selection not passed to API query
Medium Severity
The page renders an EnvironmentPageFilter but sharedQuery only includes project and datetime params — selection.environments is never passed to the API request. This means changing the environment filter has no effect on the fetched attributes. All other explore views (e.g., useTraces.tsx) include environment: selection.environments in their API queries.
Additional Locations (1)
Reviewed by Cursor Bugbot for commit 92fa19a. Configure here.
- Fix spacing above filters by skipping Layout.Header when page frame is active (title slots into TopBar) - Fix table border rendering by wrapping table in a div (border-radius/overflow:hidden don't work on <table> with border-collapse:collapse) - Use border.primary for table card border - Move pagination inside the table card with a border-top separator - Replace custom pagination buttons with scraps Button component - Set page content background to white (background.primary) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…gation - Add detail page for individual attributes with metadata form, value chart, related issues, truncated spans, and history - Wire up attribute name links in the list to navigate to detail page - Fix missing environment filter in attributes API query - Add route for :attributeKey/ under attributes/ Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
1 participant
Early Prototype: Adds a new top-level Explore tab that lists span attributes with their type (string/number/boolean), fetched from the existing trace-items/attributes API. Description, unit, last used, and issues columns show "—" pending backend support.