feat: show/hide timestamp and body fields in logs explorer (raw, default, column views)

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

@@ -219,36 +219,42 @@ function ListLogView({
 					<LogStateIndicator type={logType} fontSize={fontSize} />
 					<div>
 						<LogContainer fontSize={fontSize}>
-							<LogGeneralField
-								fieldKey="Log"
-								fieldValue={flattenLogData.body}
-								linesPerRow={linesPerRow}
-								fontSize={fontSize}
-							/>
+							{updatedSelecedFields.some((field) => field.name === 'body') && (
+								<LogGeneralField
+									fieldKey="Log"
+									fieldValue={flattenLogData.body}
+									linesPerRow={linesPerRow}
+									fontSize={fontSize}
+								/>
+							)}
 							{flattenLogData.stream && (
 								<LogGeneralField
 									fieldKey="Stream"
 									fieldValue={flattenLogData.stream}
 									fontSize={fontSize}
 								/>
 							)}
-							<LogGeneralField
-								fieldKey="Timestamp"
-								fieldValue={timestampValue}
-								fontSize={fontSize}
-							/>
-
-							{updatedSelecedFields.map((field) =>
-								isValidLogField(flattenLogData[field.name] as never) ? (
-									<LogSelectedField
-										key={field.name}
-										fieldKey={field.name}
-										fieldValue={flattenLogData[field.name] as never}
-										onAddToQuery={onAddToQuery}
-										fontSize={fontSize}
-									/>
-								) : null,
+							{updatedSelecedFields.some((field) => field.name === 'timestamp') && (
+								<LogGeneralField
+									fieldKey="Timestamp"
+									fieldValue={timestampValue}
+									fontSize={fontSize}
+								/>
 							)}
+
+							{updatedSelecedFields
+								.filter((field) => !['timestamp', 'body'].includes(field.name))
+								.map((field) =>
+									isValidLogField(flattenLogData[field.name] as never) ? (
+										<LogSelectedField
+											key={field.name}
+											fieldKey={field.name}
+											fieldValue={flattenLogData[field.name] as never}
+											onAddToQuery={onAddToQuery}
+											fontSize={fontSize}
+										/>
+									) : null,
+								)}
 						</LogContainer>
 					</div>
 				</div>

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

@@ -73,6 +73,7 @@ function RawLogView({
 	);
 
 	const attributesValues = updatedSelecedFields
+		.filter((field) => !['timestamp', 'body'].includes(field.name))
 		.map((field) => flattenLogData[field.name])
 		.filter((attribute) => {
 			// loadash isEmpty doesnot work with numbers
@@ -92,19 +93,40 @@ function RawLogView({
 	const { formatTimezoneAdjustedTimestamp } = useTimezone();
 
 	const text = useMemo(() => {
-		const date =
-			typeof data.timestamp === 'string'
-				? formatTimezoneAdjustedTimestamp(data.timestamp, 'YYYY-MM-DD HH:mm:ss.SSS')
-				: formatTimezoneAdjustedTimestamp(
-						data.timestamp / 1e6,
-						'YYYY-MM-DD HH:mm:ss.SSS',
-				  );
-
-		return `${date} | ${attributesText} ${data.body}`;
+		const parts = [];
+
+		// Check if timestamp is selected
+		const showTimestamp = selectedFields.some(
+			(field) => field.name === 'timestamp',
+		);
+		if (showTimestamp) {
+			const date =
+				typeof data.timestamp === 'string'
+					? formatTimezoneAdjustedTimestamp(
+							data.timestamp,
+							'YYYY-MM-DD HH:mm:ss.SSS',
+					  )
+					: formatTimezoneAdjustedTimestamp(
+							data.timestamp / 1e6,
+							'YYYY-MM-DD HH:mm:ss.SSS',
+					  );
+			parts.push(date);
+		}
+
+		// Check if body is selected
+		const showBody = selectedFields.some((field) => field.name === 'body');
+		if (showBody) {
+			parts.push(`${attributesText} ${data.body}`);
+		} else {
+			parts.push(attributesText);
+		}
+
+		return parts.join(' | ');
 	}, [
+		selectedFields,
+		attributesText,
 		data.timestamp,
 		data.body,
-		attributesText,
 		formatTimezoneAdjustedTimestamp,
 	]);
 

frontend/src/components/Logs/TableView/useTableView.tsx

@@ -48,7 +48,7 @@ export const useTableView = (props: UseTableViewProps): UseTableViewResult => {
 
 	const columns: ColumnsType<Record<string, unknown>> = useMemo(() => {
 		const fieldColumns: ColumnsType<Record<string, unknown>> = fields
-			.filter((e) => e.name !== 'id')
+			.filter((e) => !['id', 'body', 'timestamp'].includes(e.name))
 			.map(({ name }) => ({
 				title: name,
 				dataIndex: name,
@@ -91,55 +91,67 @@ export const useTableView = (props: UseTableViewProps): UseTableViewResult => {
 					),
 				}),
 			},
-			{
-				title: 'timestamp',
-				dataIndex: 'timestamp',
-				key: 'timestamp',
-				// https://github.com/ant-design/ant-design/discussions/36886
-				render: (field): ColumnTypeRender<Record<string, unknown>> => {
-					const date =
-						typeof field === 'string'
-							? formatTimezoneAdjustedTimestamp(field, 'YYYY-MM-DD HH:mm:ss.SSS')
-							: formatTimezoneAdjustedTimestamp(
-									field / 1e6,
-									'YYYY-MM-DD HH:mm:ss.SSS',
-							  );
-					return {
-						children: (
-							<div className="table-timestamp">
-								<Typography.Paragraph ellipsis className={cx('text', fontSize)}>
-									{date}
-								</Typography.Paragraph>
-							</div>
-						),
-					};
-				},
-			},
+			...(fields.some((field) => field.name === 'timestamp')
+				? [
+						{
+							title: 'timestamp',
+							dataIndex: 'timestamp',
+							key: 'timestamp',
+							// https://github.com/ant-design/ant-design/discussions/36886
+							render: (
+								field: string | number,
+							): ColumnTypeRender<Record<string, unknown>> => {
+								const date =
+									typeof field === 'string'
+										? formatTimezoneAdjustedTimestamp(field, 'YYYY-MM-DD HH:mm:ss.SSS')
+										: formatTimezoneAdjustedTimestamp(
+												field / 1e6,
+												'YYYY-MM-DD HH:mm:ss.SSS',
+										  );
+								return {
+									children: (
+										<div className="table-timestamp">
+											<Typography.Paragraph ellipsis className={cx('text', fontSize)}>
+												{date}
+											</Typography.Paragraph>
+										</div>
+									),
+								};
+							},
+						},
+				  ]
+				: []),
 			...(appendTo === 'center' ? fieldColumns : []),
-			{
-				title: 'body',
-				dataIndex: 'body',
-				key: 'body',
-				render: (field): ColumnTypeRender<Record<string, unknown>> => ({
-					props: {
-						style: defaultTableStyle,
-					},
-					children: (
-						<TableBodyContent
-							dangerouslySetInnerHTML={{
-								__html: convert.toHtml(
-									dompurify.sanitize(unescapeString(field), {
-										FORBID_TAGS: [...FORBID_DOM_PURIFY_TAGS],
-									}),
+			...(fields.some((field) => field.name === 'body')
+				? [
+						{
+							title: 'body',
+							dataIndex: 'body',
+							key: 'body',
+							render: (
+								field: string | number,
+							): ColumnTypeRender<Record<string, unknown>> => ({
+								props: {
+									style: defaultTableStyle,
+								},
+								children: (
+									<TableBodyContent
+										dangerouslySetInnerHTML={{
+											__html: convert.toHtml(
+												dompurify.sanitize(unescapeString(field as string), {
+													FORBID_TAGS: [...FORBID_DOM_PURIFY_TAGS],
+												}),
+											),
+										}}
+										fontSize={fontSize}
+										linesPerRow={linesPerRow}
+										isDarkMode={isDarkMode}
+									/>
 								),
-							}}
-							fontSize={fontSize}
-							linesPerRow={linesPerRow}
-							isDarkMode={isDarkMode}
-						/>
-					),
-				}),
-			},
+							}),
+						},
+				  ]
+				: []),
 			...(appendTo === 'end' ? fieldColumns : []),
 		];
 	}, [

frontend/src/container/LogsExplorerList/InfinityTableView/index.tsx

@@ -121,23 +121,25 @@ const InfinityTable = forwardRef<TableVirtuosoHandle, InfinityTableProps>(
 		const tableHeader = useCallback(
 			() => (
 				<tr>
-					{tableColumns.map((column) => {
-						const isDragColumn = column.key !== 'expand';
-
-						return (
-							<TableHeaderCellStyled
-								$isLogIndicator={column.key === 'state-indicator'}
-								$isDarkMode={isDarkMode}
-								$isDragColumn={isDragColumn}
-								key={column.key}
-								fontSize={tableViewProps?.fontSize}
-								// eslint-disable-next-line react/jsx-props-no-spreading
-								{...(isDragColumn && { className: 'dragHandler' })}
-							>
-								{(column.title as string).replace(/^\w/, (c) => c.toUpperCase())}
-							</TableHeaderCellStyled>
-						);
-					})}
+					{tableColumns
+						.filter((column) => column.key)
+						.map((column) => {
+							const isDragColumn = column.key !== 'expand';
+
+							return (
+								<TableHeaderCellStyled
+									$isLogIndicator={column.key === 'state-indicator'}
+									$isDarkMode={isDarkMode}
+									$isDragColumn={isDragColumn}
+									key={column.key}
+									fontSize={tableViewProps?.fontSize}
+									// eslint-disable-next-line react/jsx-props-no-spreading
+									{...(isDragColumn && { className: 'dragHandler' })}
+								>
+									{(column.title as string).replace(/^\w/, (c) => c.toUpperCase())}
+								</TableHeaderCellStyled>
+							);
+						})}
 				</tr>
 			),
 			[tableColumns, isDarkMode, tableViewProps?.fontSize],

frontend/src/container/LogsExplorerList/InfinityTableView/styles.ts

@@ -29,7 +29,7 @@ export const TableCellStyled = styled.td<TableHeaderCellStyledProps>`
 		props.$isDarkMode ? 'inherit' : themeColors.whiteCream};
 
 	${({ $isLogIndicator }): string =>
-		$isLogIndicator ? 'padding: 0 0 0 8px;' : ''}
+		$isLogIndicator ? 'padding: 0 0 0 8px;width: 15px;' : ''}
 	color: ${(props): string =>
 		props.$isDarkMode ? themeColors.white : themeColors.bckgGrey};
 `;

frontend/src/container/OptionsMenu/constants.ts

@@ -5,7 +5,26 @@ import { FontSize, OptionsQuery } from './types';
 export const URL_OPTIONS = 'options';
 
 export const defaultOptionsQuery: OptionsQuery = {
-	selectColumns: [],
+	selectColumns: [
+		{
+			key: 'timestamp',
+			dataType: DataTypes.String,
+			type: 'tag',
+			isColumn: true,
+			isJSON: false,
+			id: 'timestamp--string--tag--true',
+			isIndexed: false,
+		},
+		{
+			key: 'body',
+			dataType: DataTypes.String,
+			type: 'tag',
+			isColumn: true,
+			isJSON: false,
+			id: 'body--string--tag--true',
+			isIndexed: false,
+		},
+	],
 	maxLines: 2,
 	format: 'raw',
 	fontSize: FontSize.SMALL,

frontend/src/container/OptionsMenu/useOptionsMenu.ts

@@ -169,6 +169,15 @@ const useOptionsMenu = ({
 
 	const searchedAttributeKeys = useMemo(() => {
 		if (searchedAttributesData?.payload?.attributeKeys?.length) {
+			if (dataSource === DataSource.LOGS) {
+				// add timestamp and body to the list of attributes
+				return [
+					...defaultOptionsQuery.selectColumns,
+					...searchedAttributesData.payload.attributeKeys.filter(
+						(attribute) => attribute.key !== 'body',
+					),
+				];
+			}
 			return searchedAttributesData.payload.attributeKeys;
 		}
 		if (dataSource === DataSource.TRACES) {
@@ -198,12 +207,17 @@ const useOptionsMenu = ({
 	);
 
 	const optionsFromAttributeKeys = useMemo(() => {
-		const filteredAttributeKeys = searchedAttributeKeys.filter(
-			(item) => item.key !== 'body',
-		);
+		const filteredAttributeKeys = searchedAttributeKeys.filter((item) => {
+			// For other data sources, only filter out 'body' if it exists
+			if (dataSource !== DataSource.LOGS) {
+				return item.key !== 'body';
+			}
+			// For LOGS, keep all keys
+			return true;
+		});
 
 		return getOptionsFromKeys(filteredAttributeKeys, selectedColumnKeys);
-	}, [searchedAttributeKeys, selectedColumnKeys]);
+	}, [dataSource, searchedAttributeKeys, selectedColumnKeys]);
 
 	const handleRedirectWithOptionsData = useCallback(
 		(newQueryData: OptionsQuery) => {