Skip to content

Commit

Permalink
feat: truncate very long lines in traces explorer list view (#6987)
Browse files Browse the repository at this point in the history 
* 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
  • Loading branch information
@ahmadshaheer
ahmadshaheer authored Feb 4, 2025
1 parent 01b6e22 commit aecbb71
Show file tree
Hide file tree
Showing 4 changed files with 31 additions and 22 deletions.
28 changes: 14 additions & 14 deletions frontend/src/container/PanelWrapper/__tests__/__snapshots__/TablePanelWrapper.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -266,7 +266,7 @@ exports[`Table panel wrappper tests table should render fine with the query resp
>
<div>
<div
class="line-clamped-text"
class="line-clamped-wrapper__text"
>
demo-app
</div>
Expand All @@ -277,7 +277,7 @@ exports[`Table panel wrappper tests table should render fine with the query resp
>
<div>
<div
class="line-clamped-text"
class="line-clamped-wrapper__text"
>
4.35 s
</div>
Expand All @@ -292,7 +292,7 @@ exports[`Table panel wrappper tests table should render fine with the query resp
>
<div>
<div
class="line-clamped-text"
class="line-clamped-wrapper__text"
>
customer
</div>
Expand All @@ -303,7 +303,7 @@ exports[`Table panel wrappper tests table should render fine with the query resp
>
<div>
<div
class="line-clamped-text"
class="line-clamped-wrapper__text"
>
431 ms
</div>
Expand All @@ -318,7 +318,7 @@ exports[`Table panel wrappper tests table should render fine with the query resp
>
<div>
<div
class="line-clamped-text"
class="line-clamped-wrapper__text"
>
mysql
</div>
Expand All @@ -329,7 +329,7 @@ exports[`Table panel wrappper tests table should render fine with the query resp
>
<div>
<div
class="line-clamped-text"
class="line-clamped-wrapper__text"
>
431 ms
</div>
Expand All @@ -344,7 +344,7 @@ exports[`Table panel wrappper tests table should render fine with the query resp
>
<div>
<div
class="line-clamped-text"
class="line-clamped-wrapper__text"
>
frontend
</div>
Expand All @@ -355,7 +355,7 @@ exports[`Table panel wrappper tests table should render fine with the query resp
>
<div>
<div
class="line-clamped-text"
class="line-clamped-wrapper__text"
>
287 ms
</div>
Expand All @@ -370,7 +370,7 @@ exports[`Table panel wrappper tests table should render fine with the query resp
>
<div>
<div
class="line-clamped-text"
class="line-clamped-wrapper__text"
>
driver
</div>
Expand All @@ -381,7 +381,7 @@ exports[`Table panel wrappper tests table should render fine with the query resp
>
<div>
<div
class="line-clamped-text"
class="line-clamped-wrapper__text"
>
230 ms
</div>
Expand All @@ -396,7 +396,7 @@ exports[`Table panel wrappper tests table should render fine with the query resp
>
<div>
<div
class="line-clamped-text"
class="line-clamped-wrapper__text"
>
route
</div>
Expand All @@ -407,7 +407,7 @@ exports[`Table panel wrappper tests table should render fine with the query resp
>
<div>
<div
class="line-clamped-text"
class="line-clamped-wrapper__text"
>
66.4 ms
</div>
Expand All @@ -422,7 +422,7 @@ exports[`Table panel wrappper tests table should render fine with the query resp
>
<div>
<div
class="line-clamped-text"
class="line-clamped-wrapper__text"
>
redis
</div>
Expand All @@ -433,7 +433,7 @@ exports[`Table panel wrappper tests table should render fine with the query resp
>
<div>
<div
class="line-clamped-text"
class="line-clamped-wrapper__text"
>
31.3 ms
</div>
Expand Down
5 changes: 4 additions & 1 deletion frontend/src/container/TracesExplorer/ListView/utils.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import { getMs } from 'container/Trace/Filters/Panel/PanelBody/Duration/util';
import { formUrlParams } from 'container/TraceDetail/utils';
import { TimestampInput } from 'hooks/useTimezoneFormatter/useTimezoneFormatter';
import { RowData } from 'lib/query/createTableColumnsFromQuery';
import LineClampedText from 'periscope/components/LineClampedText/LineClampedText';
import { Link } from 'react-router-dom';
import { ILog } from 'types/api/logs/log';
import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
Expand Down Expand Up @@ -113,7 +114,9 @@ export const getListColumns = (

return (
<BlockLink to={getTraceLink(item)} openInNewTab={false}>
<Typography data-testid={key}>{value}</Typography>
<Typography data-testid={key}>
<LineClampedText text={value} lines={3} />
</Typography>
</BlockLink>
);
},
Expand Down
14 changes: 9 additions & 5 deletions frontend/src/periscope/components/LineClampedText/LineClampedText.styles.scss
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,10 @@
.line-clamped-text {
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
.line-clamped-wrapper {
max-height: 300px;
overflow-y: auto;
&__text {
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
}
6 changes: 4 additions & 2 deletions frontend/src/periscope/components/LineClampedText/LineClampedText.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ function LineClampedText({
const content = (
<div
ref={textRef}
className="line-clamped-text"
className="line-clamped-wrapper__text"
style={{
WebkitLineClamp: lines,
}}
Expand All @@ -46,7 +46,9 @@ function LineClampedText({

return isOverflowing ? (
<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
{...tooltipProps}
>
Expand Down

0 comments on commit aecbb71

Please sign in to comment.