External/signoz
1
0
Fork 0
mirror of https://github.com/SigNoz/signoz.git synced 2025-12-20 17:07:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix: trace details bugfixes (#9116)

Browse Source 
* fix: make the trace details sidebar scrollable

* fix: fix the long value overflowing trace details attributes

* fix: fix the layout issues in trace details v2

* Revert "fix: make the trace details sidebar scrollable"

This reverts commit 469022ed6aa89f9cc5864fdd30bdd6096bb11870.

* fix: make the trace details sidebar scrollable

* fix: make the attribute value take 100% width

---------

Co-authored-by: Nityananda Gohain <nityanandagohain@gmail.com>
This commit is contained in:
Shaheer Kochai 2025-09-17 18:28:34 +04:30 committed by GitHub
parent 0626a89412
commit 24307b48ff
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 18 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/src/container/SpanDetailsDrawer/Attributes/Attributes.styles.scss
View File

@ -58,12 +58,16 @@
padding: 2px 8px; padding: 2px 8px;
align-items: center; align-items: center;
width: fit-content; width: fit-content;
max-width: calc(100% - 120px); /* Reserve space for action buttons */ max-width: 100%;
gap: 8px; gap: 8px;
border-radius: 50px; border-radius: 50px;
border: 1px solid var(--bg-slate-400); border: 1px solid var(--bg-slate-400);
background: var(--bg-slate-500); background: var(--bg-slate-500);
.copy-wrapper {
overflow: hidden;
}
.item-value { .item-value {
color: var(--bg-vanilla-400); color: var(--bg-vanilla-400);
font-family: Inter; font-family: Inter;

4
frontend/src/container/SpanDetailsDrawer/Attributes/Attributes.tsx
View File

@ -97,11 +97,13 @@ function Attributes(props: IAttributesProps): JSX.Element {
</div> </div>
<div className="value-wrapper"> <div className="value-wrapper">
<Tooltip title={item.value}> <Tooltip title={item.value}>
<div className="copy-wrapper">
<CopyClipboardHOC entityKey={item.value} textToCopy={item.value}> <CopyClipboardHOC entityKey={item.value} textToCopy={item.value}>
<Typography.Text className="item-value" ellipsis> <Typography.Text className="item-value" ellipsis>
{item.value} {item.value}
</Typography.Text>{' '} </Typography.Text>
</CopyClipboardHOC> </CopyClipboardHOC>
</div>
</Tooltip> </Tooltip>
<AttributeActions <AttributeActions
record={item} record={item}

2
frontend/src/container/SpanDetailsDrawer/SpanDetailsDrawer.styles.scss
View File

@ -3,7 +3,7 @@
flex-direction: column; flex-direction: column;
height: calc(100vh - 44px); //44px -> trace details top bar height: calc(100vh - 44px); //44px -> trace details top bar
border-left: 1px solid var(--bg-slate-400); border-left: 1px solid var(--bg-slate-400);
overflow-y: auto; overflow-y: auto !important;
&:not(&-docked) { &:not(&-docked) {
min-width: 450px; min-width: 450px;
} }

6
frontend/src/pages/TraceDetailV2/TraceDetailV2.tsx
View File

@ -127,7 +127,11 @@ function TraceDetailsV2(): JSX.Element {
]; ];
return ( return (
<ResizablePanelGroup direction="horizontal" autoSaveId="trace-drawer"> <ResizablePanelGroup
direction="horizontal"
autoSaveId="trace-drawer"
className="trace-layout"
>
<ResizablePanel minSize={20} maxSize={80} className="trace-left-content"> <ResizablePanel minSize={20} maxSize={80} className="trace-left-content">
<TraceMetadata <TraceMetadata
traceID={traceId} traceID={traceId}