feat: truncate very long lines in traces explorer list view

SigNoz · Jan 30, 2025 · fc86338 · fc86338
1 parent ffd72cf
commit fc86338
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 8 deletions.
diff --git a/frontend/src/container/TracesExplorer/ListView/utils.tsx b/frontend/src/container/TracesExplorer/ListView/utils.tsx
@@ -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>
 				);
 			},

diff --git a/frontend/src/periscope/components/LineClampedText/LineClampedText.styles.scss b/frontend/src/periscope/components/LineClampedText/LineClampedText.styles.scss
@@ -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;
+	}
 }
diff --git a/frontend/src/periscope/components/LineClampedText/LineClampedText.tsx b/frontend/src/periscope/components/LineClampedText/LineClampedText.tsx
@@ -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}
 		>