Merge pull request #3407 from SigNoz/issue-3400-ui-horizontal-scroll-logs-context

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

@@ -21,8 +21,6 @@ import {
 	useMemo,
 	useState,
 } from 'react';
-// interfaces
-import { ILog } from 'types/api/logs/log';
 
 // styles
 import {
@@ -31,19 +29,17 @@ import {
 	RawLogContent,
 	RawLogViewContainer,
 } from './styles';
+import { RawLogViewProps } from './types';
 
 const convert = new Convert();
 
-interface RawLogViewProps {
+function RawLogView({
-	isActiveLog?: boolean;
+	isActiveLog,
-	isReadOnly?: boolean;
+	isReadOnly,
-	data: ILog;
+	data,
-	linesPerRow: number;
+	linesPerRow,
-}
+	isTextOverflowEllipsisDisabled,
-
+}: RawLogViewProps): JSX.Element {
-function RawLogView(props: RawLogViewProps): JSX.Element {
-	const { isActiveLog = false, isReadOnly = false, data, linesPerRow } = props;
-
 	const { isHighlighted, isLogsExplorerPage, onLogCopy } = useCopyLogLink(
 		data.id,
 	);
@@ -143,6 +139,7 @@ function RawLogView(props: RawLogViewProps): JSX.Element {
 			<RawLogContent
 				$isReadOnly={isReadOnly}
 				$isActiveLog={isActiveLog}
+				$isTextOverflowEllipsisDisabled={isTextOverflowEllipsisDisabled}
 				linesPerRow={linesPerRow}
 				dangerouslySetInnerHTML={html}
 			/>
@@ -181,6 +178,7 @@ function RawLogView(props: RawLogViewProps): JSX.Element {
 RawLogView.defaultProps = {
 	isActiveLog: false,
 	isReadOnly: false,
+	isTextOverflowEllipsisDisabled: false,
 };
 
 export default RawLogView;

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

@@ -3,10 +3,12 @@ import { Col, Row, Space } from 'antd';
 import styled from 'styled-components';
 import { getActiveLogBackground, getDefaultLogBackground } from 'utils/logs';
 
+import { RawLogContentProps } from './types';
+
 export const RawLogViewContainer = styled(Row)<{
 	$isDarkMode: boolean;
-	$isReadOnly: boolean;
+	$isReadOnly?: boolean;
-	$isActiveLog: boolean;
+	$isActiveLog?: boolean;
 }>`
 	position: relative;
 	width: 100%;
@@ -31,32 +33,29 @@ export const ExpandIconWrapper = styled(Col)`
 	font-size: 12px;
 `;
 
-interface RawLogContentProps {
-	linesPerRow: number;
-	$isReadOnly: boolean;
-	$isActiveLog: boolean;
-}
-
 export const RawLogContent = styled.div<RawLogContentProps>`
 	margin-bottom: 0;
 	font-family: Fira Code, monospace;
 	font-weight: 300;
 
-	overflow: hidden;
+	${({ $isTextOverflowEllipsisDisabled, linesPerRow }): string =>
-	text-overflow: ellipsis;
+		$isTextOverflowEllipsisDisabled
-	display: -webkit-box;
+			? 'white-space: nowrap'
-	-webkit-line-clamp: ${(props): number => props.linesPerRow};
+			: `overflow: hidden;
-	line-clamp: ${(props): number => props.linesPerRow};
+		text-overflow: ellipsis; 
-	-webkit-box-orient: vertical;
+		display: -webkit-box;
+		-webkit-line-clamp: ${linesPerRow};
+		line-clamp: ${linesPerRow}; 
+		-webkit-box-orient: vertical;`};
 
 	font-size: 1rem;
 	line-height: 2rem;
 
-	cursor: ${(props): string =>
+	cursor: ${({ $isActiveLog, $isReadOnly }): string =>
-		props.$isActiveLog || props.$isReadOnly ? 'initial' : 'pointer'};
+		$isActiveLog || $isReadOnly ? 'initial' : 'pointer'};
 
-	${(props): string =>
+	${({ $isActiveLog, $isReadOnly }): string =>
-		props.$isReadOnly && !props.$isActiveLog ? 'padding: 0 1.5rem;' : ''}
+		$isReadOnly && $isActiveLog ? 'padding: 0 1.5rem;' : ''}
 `;
 
 export const ActionButtonsWrapper = styled(Space)`

frontend/src/components/Logs/RawLogView/types.ts

@@ -0,0 +1,16 @@
+import { ILog } from 'types/api/logs/log';
+
+export interface RawLogViewProps {
+	isActiveLog?: boolean;
+	isReadOnly?: boolean;
+	isTextOverflowEllipsisDisabled?: boolean;
+	data: ILog;
+	linesPerRow: number;
+}
+
+export interface RawLogContentProps {
+	linesPerRow: number;
+	$isReadOnly?: boolean;
+	$isActiveLog?: boolean;
+	$isTextOverflowEllipsisDisabled?: boolean;
+}

frontend/src/container/LogsContextList/index.tsx

@@ -154,7 +154,13 @@ function LogsContextList({
 
 	const getItemContent = useCallback(
 		(_: number, log: ILog): JSX.Element => (
-			<RawLogView isReadOnly key={log.id} data={log} linesPerRow={1} />
+			<RawLogView
+				isReadOnly
+				isTextOverflowEllipsisDisabled
+				key={log.id}
+				data={log}
+				linesPerRow={1}
+			/>
 		),
 		[],
 	);

frontend/src/container/LogsExplorerContext/index.tsx

@@ -9,7 +9,7 @@ import { useIsDarkMode } from 'hooks/useDarkMode';
 import { memo, useCallback, useMemo, useState } from 'react';
 import { Query, TagFilter } from 'types/api/queryBuilder/queryBuilderData';
 
-import { EditButton, TitleWrapper } from './styles';
+import { EditButton, LogContainer, TitleWrapper } from './styles';
 import { LogsExplorerContextProps } from './types';
 import useInitialQuery from './useInitialQuery';
 
@@ -96,7 +96,15 @@ function LogsExplorerContext({
 				// eslint-disable-next-line react/jsx-props-no-spreading
 				{...contextListParams}
 			/>
-			<RawLogView isActiveLog isReadOnly data={log} linesPerRow={1} />
+			<LogContainer>
+				<RawLogView
+					isActiveLog
+					isReadOnly
+					isTextOverflowEllipsisDisabled
+					data={log}
+					linesPerRow={1}
+				/>
+			</LogContainer>
 			<LogsContextList
 				order={FILTERS.DESC}
 				// eslint-disable-next-line react/jsx-props-no-spreading

frontend/src/container/LogsExplorerContext/styles.ts

@@ -28,3 +28,7 @@ export const EditButton = styled(Button)<{ $isDarkMode: boolean }>`
 			? getAlphaColor(themeColors.white)[45]
 			: getAlphaColor(themeColors.black)[45]};
 `;
+
+export const LogContainer = styled.div`
+	overflow-x: auto;
+`;

frontend/src/utils/logs.ts

@@ -3,8 +3,8 @@ import { themeColors } from 'constants/theme';
 import getAlphaColor from 'utils/getAlphaColor';
 
 export const getDefaultLogBackground = (
-	isReadOnly: boolean,
+	isReadOnly?: boolean,
-	isDarkMode: boolean,
+	isDarkMode?: boolean,
 ): string => {
 	if (isReadOnly) return '';
 	return `&:hover {