feat: body is added in the log (#2431)

frontend/src/components/Logs/TableView/config.ts

@@ -1,4 +1,5 @@
 import { TableProps } from 'antd';
+import React from 'react';
 
 export const defaultCellStyle: React.CSSProperties = {
 	paddingTop: 4,
@@ -7,6 +8,11 @@ export const defaultCellStyle: React.CSSProperties = {
 	paddingLeft: 8,
 };
 
+export const defaultTableStyle: React.CSSProperties = {
+	minWidth: '40rem',
+	maxWidth: '40rem',
+};
+
 export const tableScroll: TableProps<Record<string, unknown>>['scroll'] = {
 	x: true,
 };

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

@@ -12,7 +12,7 @@ import { ILog } from 'types/api/logs/log';
 // styles
 import { ExpandIconWrapper } from '../RawLogView/styles';
 // config
-import { defaultCellStyle, tableScroll } from './config';
+import { defaultCellStyle, defaultTableStyle, tableScroll } from './config';
 
 type ColumnTypeRender<T = unknown> = ReturnType<
 	NonNullable<ColumnType<T>['render']>
@@ -73,26 +73,39 @@ function LogsTableView(props: LogsTableViewProps): JSX.Element {
 				}),
 			},
 			{
-				title: 'Timestamp',
+				title: 'timestamp',
 				dataIndex: 'timestamp',
 				key: 'timestamp',
 				// https://github.com/ant-design/ant-design/discussions/36886
 				render: (field): ColumnTypeRender<Record<string, unknown>> => {
 					const date = dayjs(field / 1e6).format();
 					return {
-						props: {
+						children: <Typography.Paragraph ellipsis>{date}</Typography.Paragraph>,
-							style: defaultCellStyle,
-						},
-						children: <span>{date}</span>,
 					};
 				},
 			},
 			...fieldColumns,
+			{
+				title: 'body',
+				dataIndex: 'body',
+				key: 'body',
+				render: (field): ColumnTypeRender<Record<string, unknown>> => ({
+					props: {
+						style: defaultTableStyle,
+					},
+					children: (
+						<Typography.Paragraph ellipsis={{ rows: linesPerRow }}>
+							{field}
+						</Typography.Paragraph>
+					),
+				}),
+			},
 		];
 	}, [fields, linesPerRow, onClickExpand]);
 
 	return (
 		<Table
+			size="small"
 			columns={columns}
 			dataSource={flattenLogData}
 			pagination={false}