feat: [SIG-572]: allow number of lines changing in the logs list view (#4737)

* feat: [SIG-572]: allow number of lines changing in the logs list view

* feat: [SIG-572]: allow number of lines changing in the logs list view

* feat: added options to change row values in table view

* fix: build issues

frontend/src/components/Logs/ListLogView/index.tsx

@@ -37,12 +37,18 @@ const convert = new Convert();
 interface LogFieldProps {
 	fieldKey: string;
 	fieldValue: string;
+	linesPerRow?: number;
 }
 
-type LogSelectedFieldProps = LogFieldProps &
+type LogSelectedFieldProps = Omit<LogFieldProps, 'linesPerRow'> &
 	Pick<AddToQueryHOCProps, 'onAddToQuery'>;
 
-function LogGeneralField({ fieldKey, fieldValue }: LogFieldProps): JSX.Element {
+function LogGeneralField({
+	fieldKey,
+	fieldValue,
+	linesPerRow = 1,
+}: LogFieldProps): JSX.Element {
+	console.log('fieldKey:', fieldKey, linesPerRow);
 	const html = useMemo(
 		() => ({
 			__html: convert.toHtml(dompurify.sanitize(fieldValue)),
@@ -55,7 +61,11 @@ function LogGeneralField({ fieldKey, fieldValue }: LogFieldProps): JSX.Element {
 			<Text ellipsis type="secondary" className="log-field-key">
 				{`${fieldKey} : `}
 			</Text>
-			<LogText dangerouslySetInnerHTML={html} className="log-value" />
+			<LogText
+				dangerouslySetInnerHTML={html}
+				className="log-value"
+				linesPerRow={linesPerRow > 1 ? linesPerRow : undefined}
+			/>
 		</TextContainer>
 	);
 }
@@ -92,6 +102,7 @@ type ListLogViewProps = {
 	onSetActiveLog: (log: ILog) => void;
 	onAddToQuery: AddToQueryHOCProps['onAddToQuery'];
 	activeLog?: ILog | null;
+	linesPerRow: number;
 };
 
 function ListLogView({
@@ -100,6 +111,7 @@ function ListLogView({
 	onSetActiveLog,
 	onAddToQuery,
 	activeLog,
+	linesPerRow,
 }: ListLogViewProps): JSX.Element {
 	const flattenLogData = useMemo(() => FlatLogData(logData), [logData]);
 
@@ -179,7 +191,11 @@ function ListLogView({
 					/>
 					<div>
 						<LogContainer>
-							<LogGeneralField fieldKey="Log" fieldValue={flattenLogData.body} />
+							<LogGeneralField
+								fieldKey="Log"
+								fieldValue={flattenLogData.body}
+								linesPerRow={linesPerRow}
+							/>
 							{flattenLogData.stream && (
 								<LogGeneralField fieldKey="Stream" fieldValue={flattenLogData.stream} />
 							)}
@@ -222,4 +238,8 @@ ListLogView.defaultProps = {
 	activeLog: null,
 };
 
+LogGeneralField.defaultProps = {
+	linesPerRow: 1,
+};
+
 export default ListLogView;

frontend/src/components/Logs/ListLogView/styles.ts

@@ -2,6 +2,10 @@ import { Color } from '@signozhq/design-tokens';
 import { Card, Typography } from 'antd';
 import styled from 'styled-components';
 
+interface LogTextProps {
+	linesPerRow?: number;
+}
+
 export const Container = styled(Card)<{
 	$isActiveLog: boolean;
 	$isDarkMode: boolean;
@@ -23,7 +27,7 @@ export const Container = styled(Card)<{
 
 export const Text = styled(Typography.Text)`
 	&&& {
-		min-width: 1.5rem;
+		min-width: 2.5rem;
 		white-space: nowrap;
 	}
 `;
@@ -41,11 +45,19 @@ export const LogContainer = styled.div`
 	gap: 6px;
 `;
 
-export const LogText = styled.div`
+export const LogText = styled.div<LogTextProps>`
 	display: inline-block;
 	text-overflow: ellipsis;
 	overflow: hidden;
-	white-space: nowrap;
+	${({ linesPerRow }): string =>
+		linesPerRow
+			? `-webkit-line-clamp: ${linesPerRow};
+		line-clamp: ${linesPerRow};
+		display: -webkit-box;
+		-webkit-box-orient: vertical;
+		white-space: normal; `
+			: 'white-space: nowrap;'};
+	};
 `;
 
 export const SelectedLog = styled.div`

frontend/src/components/LogsFormatOptionsMenu/LogsFormatOptionsMenu.tsx

@@ -120,38 +120,36 @@ export default function LogsFormatOptionsMenu({
 
 			{selectedItem && (
 				<>
-					{selectedItem === 'raw' && (
+					<>
-						<>
+						<div className="horizontal-line" />
-							<div className="horizontal-line" />
+						<div className="max-lines-per-row">
-							<div className="max-lines-per-row">
+							<div className="title"> max lines per row </div>
-								<div className="title"> max lines per row </div>
+							<div className="raw-format max-lines-per-row-input">
-								<div className="raw-format max-lines-per-row-input">
+								<button
-									<button
+									type="button"
-										type="button"
+									className="periscope-btn"
-										className="periscope-btn"
+									onClick={decrementMaxLinesPerRow}
-										onClick={decrementMaxLinesPerRow}
+								>
-									>
+									{' '}
-										{' '}
+									<Minus size={12} />{' '}
-										<Minus size={12} />{' '}
+								</button>
-									</button>
+								<InputNumber
-									<InputNumber
+									min={1}
-										min={1}
+									max={10}
-										max={10}
+									value={maxLinesPerRow}
-										value={maxLinesPerRow}
+									onChange={handleLinesPerRowChange}
-										onChange={handleLinesPerRowChange}
+								/>
-									/>
+								<button
-									<button
+									type="button"
-										type="button"
+									className="periscope-btn"
-										className="periscope-btn"
+									onClick={incrementMaxLinesPerRow}
-										onClick={incrementMaxLinesPerRow}
+								>
-									>
+									{' '}
-										{' '}
+									<Plus size={12} />{' '}
-										<Plus size={12} />{' '}
+								</button>
-									</button>
-								</div>
 							</div>
-						</>
+						</div>
-					)}
+					</>
 
 					<div className="selected-item-content-container active">
 						{!addNewColumn && <div className="horizontal-line" />}

frontend/src/container/LiveLogs/LiveLogsList/index.tsx

@@ -71,6 +71,7 @@ function LiveLogsList({ logs }: LiveLogsListProps): JSX.Element {
 					key={log.id}
 					logData={log}
 					selectedFields={selectedFields}
+					linesPerRow={options.maxLines}
 					onAddToQuery={onAddToQuery}
 					onSetActiveLog={onSetActiveLog}
 				/>

frontend/src/container/LogsExplorerList/index.tsx

@@ -90,6 +90,7 @@ function LogsExplorerList({
 					onAddToQuery={onAddToQuery}
 					onSetActiveLog={onSetActiveLog}
 					activeLog={activeLog}
+					linesPerRow={options.maxLines}
 				/>
 			);
 		},

frontend/src/container/LogsTable/index.tsx

@@ -74,6 +74,7 @@ function LogsTable(props: LogsTableProps): JSX.Element {
 					key={log.id}
 					logData={log}
 					selectedFields={selected}
+					linesPerRow={linesPerRow}
 					onAddToQuery={onAddToQuery}
 					onSetActiveLog={onSetActiveLog}
 				/>