mirror of
https://git.mirrors.martin98.com/https://github.com/SigNoz/signoz
synced 2025-06-04 11:25:52 +08:00
feat: truncate very long lines in traces explorer list view (#6987)
* 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
GitHub
parent
01b6e22bbd
commit
aecbb71ce4
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
|
||||
@ -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';
|
||||
@ -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>
|
||||
);
|
||||
},
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -35,7 +35,7 @@ function LineClampedText({
|
||||
const content = (
|
||||
<div
|
||||
ref={textRef}
|
||||
className="line-clamped-text"
|
||||
className="line-clamped-wrapper__text"
|
||||
style={{
|
||||
WebkitLineClamp: lines,
|
||||
}}
|
||||
@ -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}
|
||||
>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user