diff --git a/frontend/src/components/Logs/ListLogView/index.tsx b/frontend/src/components/Logs/ListLogView/index.tsx index 5452db0f16..5577579b64 100644 --- a/frontend/src/components/Logs/ListLogView/index.tsx +++ b/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 & Pick; -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 { {`${fieldKey} : `} - + 1 ? linesPerRow : undefined} + /> ); } @@ -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({ />
- + {flattenLogData.stream && ( )} @@ -222,4 +238,8 @@ ListLogView.defaultProps = { activeLog: null, }; +LogGeneralField.defaultProps = { + linesPerRow: 1, +}; + export default ListLogView; diff --git a/frontend/src/components/Logs/ListLogView/styles.ts b/frontend/src/components/Logs/ListLogView/styles.ts index 84559e5137..52cc2b20d4 100644 --- a/frontend/src/components/Logs/ListLogView/styles.ts +++ b/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` 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` diff --git a/frontend/src/components/LogsFormatOptionsMenu/LogsFormatOptionsMenu.tsx b/frontend/src/components/LogsFormatOptionsMenu/LogsFormatOptionsMenu.tsx index 558a97c63b..3a42e9a0b0 100644 --- a/frontend/src/components/LogsFormatOptionsMenu/LogsFormatOptionsMenu.tsx +++ b/frontend/src/components/LogsFormatOptionsMenu/LogsFormatOptionsMenu.tsx @@ -120,38 +120,36 @@ export default function LogsFormatOptionsMenu({ {selectedItem && ( <> - {selectedItem === 'raw' && ( - <> -
-
-
max lines per row
-
- - - -
+ <> +
+
+
max lines per row
+
+ + +
- - )} +
+
{!addNewColumn &&
} diff --git a/frontend/src/container/LiveLogs/LiveLogsList/index.tsx b/frontend/src/container/LiveLogs/LiveLogsList/index.tsx index 7be2927445..39a39ab990 100644 --- a/frontend/src/container/LiveLogs/LiveLogsList/index.tsx +++ b/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} /> diff --git a/frontend/src/container/LogsExplorerList/index.tsx b/frontend/src/container/LogsExplorerList/index.tsx index 21b03cf413..fc5a1f6800 100644 --- a/frontend/src/container/LogsExplorerList/index.tsx +++ b/frontend/src/container/LogsExplorerList/index.tsx @@ -90,6 +90,7 @@ function LogsExplorerList({ onAddToQuery={onAddToQuery} onSetActiveLog={onSetActiveLog} activeLog={activeLog} + linesPerRow={options.maxLines} /> ); }, diff --git a/frontend/src/container/LogsTable/index.tsx b/frontend/src/container/LogsTable/index.tsx index c87d4232f6..b10c3503dd 100644 --- a/frontend/src/container/LogsTable/index.tsx +++ b/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} />