GitHub-Proxy/signoz
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/SigNoz/signoz synced 2025-06-04 11:25:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: truncate very long lines in traces explorer list view (#6987)

Browse Source 
* feat: truncate very long lines in traces explorer list view

* fix: update snapshot tests with new line-clamped text class to fix the failing test
This commit is contained in:
Shaheer Kochai 2025-02-04 17:59:23 +04:30 committed by GitHub
parent 01b6e22bbd
commit aecbb71ce4
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 31 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
frontend/src/container/PanelWrapper/__tests__/__snapshots__/TablePanelWrapper.test.tsx.snap
View File

@ -266,7 +266,7 @@ exports[`Table panel wrappper tests table should render fine with the query resp
> >
<div> <div>
<div <div
class="line-clamped-text" class="line-clamped-wrapper__text"
> >
demo-app demo-app
</div> </div>
@ -277,7 +277,7 @@ exports[`Table panel wrappper tests table should render fine with the query resp
> >
<div> <div>
<div <div
class="line-clamped-text" class="line-clamped-wrapper__text"
> >
4.35 s 4.35 s
</div> </div>
@ -292,7 +292,7 @@ exports[`Table panel wrappper tests table should render fine with the query resp
> >
<div> <div>
<div <div
class="line-clamped-text" class="line-clamped-wrapper__text"
> >
customer customer
</div> </div>
@ -303,7 +303,7 @@ exports[`Table panel wrappper tests table should render fine with the query resp
> >
<div> <div>
<div <div
class="line-clamped-text" class="line-clamped-wrapper__text"
> >
431 ms 431 ms
</div> </div>
@ -318,7 +318,7 @@ exports[`Table panel wrappper tests table should render fine with the query resp
> >
<div> <div>
<div <div
class="line-clamped-text" class="line-clamped-wrapper__text"
> >
mysql mysql
</div> </div>
@ -329,7 +329,7 @@ exports[`Table panel wrappper tests table should render fine with the query resp
> >
<div> <div>
<div <div
class="line-clamped-text" class="line-clamped-wrapper__text"
> >
431 ms 431 ms
</div> </div>
@ -344,7 +344,7 @@ exports[`Table panel wrappper tests table should render fine with the query resp
> >
<div> <div>
<div <div
class="line-clamped-text" class="line-clamped-wrapper__text"
> >
frontend frontend
</div> </div>
@ -355,7 +355,7 @@ exports[`Table panel wrappper tests table should render fine with the query resp
> >
<div> <div>
<div <div
class="line-clamped-text" class="line-clamped-wrapper__text"
> >
287 ms 287 ms
</div> </div>
@ -370,7 +370,7 @@ exports[`Table panel wrappper tests table should render fine with the query resp
> >
<div> <div>
<div <div
class="line-clamped-text" class="line-clamped-wrapper__text"
> >
driver driver
</div> </div>
@ -381,7 +381,7 @@ exports[`Table panel wrappper tests table should render fine with the query resp
> >
<div> <div>
<div <div
class="line-clamped-text" class="line-clamped-wrapper__text"
> >
230 ms 230 ms
</div> </div>
@ -396,7 +396,7 @@ exports[`Table panel wrappper tests table should render fine with the query resp
> >
<div> <div>
<div <div
class="line-clamped-text" class="line-clamped-wrapper__text"
> >
route route
</div> </div>
@ -407,7 +407,7 @@ exports[`Table panel wrappper tests table should render fine with the query resp
> >
<div> <div>
<div <div
class="line-clamped-text" class="line-clamped-wrapper__text"
> >
66.4 ms 66.4 ms
</div> </div>
@ -422,7 +422,7 @@ exports[`Table panel wrappper tests table should render fine with the query resp
> >
<div> <div>
<div <div
class="line-clamped-text" class="line-clamped-wrapper__text"
> >
redis redis
</div> </div>
@ -433,7 +433,7 @@ exports[`Table panel wrappper tests table should render fine with the query resp
> >
<div> <div>
<div <div
class="line-clamped-text" class="line-clamped-wrapper__text"
> >
31.3 ms 31.3 ms
</div> </div>

5
frontend/src/container/TracesExplorer/ListView/utils.tsx
View File

@ -6,6 +6,7 @@ import { getMs } from 'container/Trace/Filters/Panel/PanelBody/Duration/util';
import { formUrlParams } from 'container/TraceDetail/utils'; import { formUrlParams } from 'container/TraceDetail/utils';
import { TimestampInput } from 'hooks/useTimezoneFormatter/useTimezoneFormatter'; import { TimestampInput } from 'hooks/useTimezoneFormatter/useTimezoneFormatter';
import { RowData } from 'lib/query/createTableColumnsFromQuery'; import { RowData } from 'lib/query/createTableColumnsFromQuery';
import LineClampedText from 'periscope/components/LineClampedText/LineClampedText';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import { ILog } from 'types/api/logs/log'; import { ILog } from 'types/api/logs/log';
import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse'; import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
@ -113,7 +114,9 @@ export const getListColumns = (
return ( return (
<BlockLink to={getTraceLink(item)} openInNewTab={false}> <BlockLink to={getTraceLink(item)} openInNewTab={false}>
<Typography data-testid={key}>{value}</Typography> <Typography data-testid={key}>
<LineClampedText text={value} lines={3} />
</Typography>
</BlockLink> </BlockLink>
); );
}, },

14
frontend/src/periscope/components/LineClampedText/LineClampedText.styles.scss
View File

@ -1,6 +1,10 @@
.line-clamped-text { .line-clamped-wrapper {
display: -webkit-box; max-height: 300px;
-webkit-box-orient: vertical; overflow-y: auto;
overflow: hidden; &__text {
text-overflow: ellipsis; display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
} }

6
frontend/src/periscope/components/LineClampedText/LineClampedText.tsx
View File

@ -35,7 +35,7 @@ function LineClampedText({
const content = ( const content = (
<div <div
ref={textRef} ref={textRef}
className="line-clamped-text" className="line-clamped-wrapper__text"
style={{ style={{
WebkitLineClamp: lines, WebkitLineClamp: lines,
}} }}
@ -46,7 +46,9 @@ function LineClampedText({
return isOverflowing ? ( return isOverflowing ? (
<Tooltip <Tooltip
title={text} // eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events
title={<div onClick={(e): void => e.stopPropagation()}>{text}</div>}
overlayClassName="line-clamped-wrapper"
// eslint-disable-next-line react/jsx-props-no-spreading // eslint-disable-next-line react/jsx-props-no-spreading
{...tooltipProps} {...tooltipProps}
> >