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

* feat: show/hide timestamp and body fields in logs explorer (raw, default, column views) * fix: add width to log indicator column to ensure that a single column doesn't take half the space * fix: handle edge cases and fix issues for show/hide body and timestamp in logs explorer
2025-08-12 07:08:58 +08:00 · 2025-01-27 20:54:59 +04:30 · 2025-01-27 20:54:59 +04:30 · 98cdbcd711
commit 98cdbcd711
parent 61a6c21edb
11 changed files with 246 additions and 117 deletions
--- a/frontend/src/components/Logs/ListLogView/index.tsx
+++ b/frontend/src/components/Logs/ListLogView/index.tsx
@ -220,12 +220,14 @@ 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"
@ -233,23 +235,27 @@ function ListLogView({
 									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>
--- a/frontend/src/components/Logs/RawLogView/index.tsx
+++ b/frontend/src/components/Logs/RawLogView/index.tsx
@ -74,6 +74,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
@ -93,22 +94,40 @@ function RawLogView({
 	const { formatTimezoneAdjustedTimestamp } = useTimezone();

 	const text = useMemo(() => {
-		const date =
-			typeof data.timestamp === 'string'
-				? formatTimezoneAdjustedTimestamp(
-						data.timestamp,
-						DATE_TIME_FORMATS.ISO_DATETIME_MS,
-				  )
-				: formatTimezoneAdjustedTimestamp(
-						data.timestamp / 1e6,
-						DATE_TIME_FORMATS.ISO_DATETIME_MS,
-				  );
+		const parts = [];

-		return `${date} | ${attributesText} ${data.body}`;
+		// Check if timestamp is selected
+		const showTimestamp = selectedFields.some(
+			(field) => field.name === 'timestamp',
+		);
+		if (showTimestamp) {
+			const date =
+				typeof data.timestamp === 'string'
+					? formatTimezoneAdjustedTimestamp(
+							data.timestamp,
+							DATE_TIME_FORMATS.ISO_DATETIME_MS,
+					  )
+					: formatTimezoneAdjustedTimestamp(
+							data.timestamp / 1e6,
+							DATE_TIME_FORMATS.ISO_DATETIME_MS,
+					  );
+			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,
 	]);

--- a/frontend/src/components/Logs/TableView/useTableView.tsx
+++ b/frontend/src/components/Logs/TableView/useTableView.tsx
@ -49,7 +49,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,
@ -92,58 +92,70 @@ 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,
-									DATE_TIME_FORMATS.ISO_DATETIME_MS,
-							  )
-							: formatTimezoneAdjustedTimestamp(
-									field / 1e6,
-									DATE_TIME_FORMATS.ISO_DATETIME_MS,
-							  );
-					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,
+												DATE_TIME_FORMATS.ISO_DATETIME_MS,
+										  )
+										: formatTimezoneAdjustedTimestamp(
+												field / 1e6,
+												DATE_TIME_FORMATS.ISO_DATETIME_MS,
+										  );
+								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 : []),
 		];
 	}, [
--- a/frontend/src/components/LogsFormatOptionsMenu/LogsFormatOptionsMenu.tsx
+++ b/frontend/src/components/LogsFormatOptionsMenu/LogsFormatOptionsMenu.tsx
@ -417,11 +417,13 @@ export default function LogsFormatOptionsMenu({
 														{key}
 													</Tooltip>
 												</div>
-												<X
-													className="delete-btn"
-													size={14}
-													onClick={(): void => addColumn.onRemove(id as string)}
-												/>
+												{addColumn?.value?.length > 1 && (
+													<X
+														className="delete-btn"
+														size={14}
+														onClick={(): void => addColumn.onRemove(id as string)}
+													/>
+												)}
 											</div>
 										))}
 										{addColumn && addColumn?.value?.length === 0 && (
--- a/frontend/src/container/ExplorerOptions/ExplorerOptions.tsx
+++ b/frontend/src/container/ExplorerOptions/ExplorerOptions.tsx
@ -37,7 +37,7 @@ import useErrorNotification from 'hooks/useErrorNotification';
 import { useHandleExplorerTabChange } from 'hooks/useHandleExplorerTabChange';
 import { useNotifications } from 'hooks/useNotifications';
 import { mapCompositeQueryFromQuery } from 'lib/newQueryBuilder/queryBuilderMappers/mapCompositeQueryFromQuery';
-import { cloneDeep, isEqual } from 'lodash-es';
+import { cloneDeep, isEqual, omit } from 'lodash-es';
 import {
 	Check,
 	ConciergeBell,
@ -256,13 +256,17 @@ function ExplorerOptions({
 	const { handleExplorerTabChange } = useHandleExplorerTabChange();

 	const { options, handleOptionsChange } = useOptionsMenu({
-		storageKey: LOCALSTORAGE.TRACES_LIST_OPTIONS,
-		dataSource: DataSource.TRACES,
+		storageKey:
+			sourcepage === DataSource.TRACES
+				? LOCALSTORAGE.TRACES_LIST_OPTIONS
+				: LOCALSTORAGE.LOGS_LIST_OPTIONS,
+		dataSource: sourcepage,
 		aggregateOperator: StringOperators.NOOP,
 	});

 	type ExtraData = {
 		selectColumns?: BaseAutocompleteData[];
+		version?: number;
 	};

 	const updateOrRestoreSelectColumns = (
@ -283,14 +287,20 @@ function ExplorerOptions({
 			console.error('Error parsing extraData:', error);
 		}

+		let backwardCompatibleOptions = options;
+
+		if (!extraData?.version) {
+			backwardCompatibleOptions = omit(options, 'version');
+		}
+
 		if (extraData.selectColumns?.length) {
 			handleOptionsChange({
-				...options,
+				...backwardCompatibleOptions,
 				selectColumns: extraData.selectColumns,
 			});
 		} else if (!isEqual(defaultTraceSelectedColumns, options.selectColumns)) {
 			handleOptionsChange({
-				...options,
+				...backwardCompatibleOptions,
 				selectColumns: defaultTraceSelectedColumns,
 			});
 		}
@ -423,6 +433,7 @@ function ExplorerOptions({
 			extraData: JSON.stringify({
 				color,
 				selectColumns: options.selectColumns,
+				version: 1,
 			}),
 			notifications,
 			panelType: panelType || PANEL_TYPES.LIST,
--- a/frontend/src/container/LogsExplorerList/InfinityTableView/index.tsx
+++ b/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';
+					{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>
-						);
-					})}
+							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],
--- a/frontend/src/container/LogsExplorerList/InfinityTableView/styles.ts
+++ b/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};
 `;
--- a/frontend/src/container/OptionsMenu/constants.ts
+++ b/frontend/src/container/OptionsMenu/constants.ts
@ -11,6 +11,27 @@ export const defaultOptionsQuery: OptionsQuery = {
 	fontSize: FontSize.SMALL,
 };

+export const defaultLogsSelectedColumns = [
+	{
+		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,
+	},
+];
+
 export const defaultTraceSelectedColumns = [
 	{
 		key: 'serviceName',
--- a/frontend/src/container/OptionsMenu/types.ts
+++ b/frontend/src/container/OptionsMenu/types.ts
@ -17,6 +17,7 @@ export interface OptionsQuery {
 	maxLines: number;
 	format: LogViewMode;
 	fontSize: FontSize;
+	version?: number;
 }

 export interface InitialOptions
--- a/frontend/src/container/OptionsMenu/useOptionsMenu.ts
+++ b/frontend/src/container/OptionsMenu/useOptionsMenu.ts
@ -21,6 +21,7 @@ import {
 import { DataSource } from 'types/common/queryBuilder';

 import {
+	defaultLogsSelectedColumns,
 	defaultOptionsQuery,
 	defaultTraceSelectedColumns,
 	URL_OPTIONS,
@ -169,6 +170,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 [
+					...defaultLogsSelectedColumns,
+					...searchedAttributesData.payload.attributeKeys.filter(
+						(attribute) => attribute.key !== 'body',
+					),
+				];
+			}
 			return searchedAttributesData.payload.attributeKeys;
 		}
 		if (dataSource === DataSource.TRACES) {
@ -198,12 +208,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) => {
--- a/frontend/src/pages/LogsExplorer/index.tsx
+++ b/frontend/src/pages/LogsExplorer/index.tsx
@ -9,11 +9,18 @@ import QuickFilters from 'components/QuickFilters/QuickFilters';
 import { LOCALSTORAGE } from 'constants/localStorage';
 import LogExplorerQuerySection from 'container/LogExplorerQuerySection';
 import LogsExplorerViews from 'container/LogsExplorerViews';
+import {
+	defaultLogsSelectedColumns,
+	defaultOptionsQuery,
+	URL_OPTIONS,
+} from 'container/OptionsMenu/constants';
+import { OptionsQuery } from 'container/OptionsMenu/types';
 import LeftToolbarActions from 'container/QueryBuilder/components/ToolbarActions/LeftToolbarActions';
 import RightToolbarActions from 'container/QueryBuilder/components/ToolbarActions/RightToolbarActions';
 import Toolbar from 'container/Toolbar/Toolbar';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
-import { isNull } from 'lodash-es';
+import useUrlQueryData from 'hooks/useUrlQueryData';
+import { isEqual, isNull } from 'lodash-es';
 import ErrorBoundaryFallback from 'pages/ErrorBoundaryFallback/ErrorBoundaryFallback';
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { DataSource } from 'types/common/queryBuilder';
@ -73,6 +80,39 @@ function LogsExplorer(): JSX.Element {
 		}
 	}, [currentQuery.builder.queryData, currentQuery.builder.queryData.length]);

+	const {
+		queryData: optionsQueryData,
+		redirectWithQuery: redirectWithOptionsData,
+	} = useUrlQueryData<OptionsQuery>(URL_OPTIONS, defaultOptionsQuery);
+
+	const migrateOptionsQuery = (query: OptionsQuery): OptionsQuery => {
+		// If version is missing AND timestamp/body are not in selectColumns, this is an old URL
+		if (
+			!query.version &&
+			!query.selectColumns.some((col) => col.key === 'timestamp') &&
+			!query.selectColumns.some((col) => col.key === 'body')
+		) {
+			return {
+				...query,
+				version: 1,
+				selectColumns: [
+					// Add default timestamp and body columns
+					...defaultLogsSelectedColumns,
+					...query.selectColumns,
+				],
+			};
+		}
+		return query;
+	};
+
+	useEffect(() => {
+		const migratedQuery = migrateOptionsQuery(optionsQueryData);
+		// Only redirect if the query was actually modified
+		if (!isEqual(migratedQuery, optionsQueryData)) {
+			redirectWithOptionsData(migratedQuery);
+		}
+	}, [optionsQueryData, redirectWithOptionsData]);
+
 	const isMultipleQueries = useMemo(
 		() =>
 			currentQuery.builder.queryData?.length > 1 ||