fix: table columns adding (#3058)

add configurable order for appending table columns

Co-authored-by: Vishal Sharma <makeavish786@gmail.com>

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

@@ -1,4 +1,4 @@
-import { ColumnType } from 'antd/es/table';
+import { ColumnsType, ColumnType } from 'antd/es/table';
 import { IField } from 'types/api/logs/fields';
 import { ILog } from 'types/api/logs/log';
 
@@ -12,3 +12,12 @@ export type LogsTableViewProps = {
 	linesPerRow: number;
 	onClickExpand: (log: ILog) => void;
 };
+
+export type UseTableViewResult = {
+	columns: ColumnsType<Record<string, unknown>>;
+	dataSource: Record<string, string>[];
+};
+
+export type UseTableViewProps = {
+	appendTo?: 'center' | 'end';
+} & LogsTableViewProps;

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

@@ -11,17 +11,22 @@ import { ILog } from 'types/api/logs/log';
 import { ExpandIconWrapper } from '../RawLogView/styles';
 import { defaultCellStyle, defaultTableStyle } from './config';
 import { TableBodyContent } from './styles';
-import { ColumnTypeRender, LogsTableViewProps } from './types';
+import {
-
+	ColumnTypeRender,
-export type UseTableViewResult = {
+	UseTableViewProps,
-	columns: ColumnsType<Record<string, unknown>>;
+	UseTableViewResult,
-	dataSource: Record<string, string>[];
+} from './types';
-};
 
 const convert = new Convert();
 
-export const useTableView = (props: LogsTableViewProps): UseTableViewResult => {
+export const useTableView = (props: UseTableViewProps): UseTableViewResult => {
-	const { logs, fields, linesPerRow, onClickExpand } = props;
+	const {
+		logs,
+		fields,
+		linesPerRow,
+		onClickExpand,
+		appendTo = 'center',
+	} = props;
 
 	const flattenLogData = useMemo(() => logs.map((log) => FlatLogData(log)), [
 		logs,
@@ -82,7 +87,7 @@ export const useTableView = (props: LogsTableViewProps): UseTableViewResult => {
 					};
 				},
 			},
-			...fieldColumns,
+			...(appendTo === 'center' ? fieldColumns : []),
 			{
 				title: 'body',
 				dataIndex: 'body',
@@ -101,8 +106,9 @@ export const useTableView = (props: LogsTableViewProps): UseTableViewResult => {
 					),
 				}),
 			},
+			...(appendTo === 'end' ? fieldColumns : []),
 		];
-	}, [fields, linesPerRow, onClickExpand]);
+	}, [fields, linesPerRow, appendTo, onClickExpand]);
 
 	return { columns, dataSource: flattenLogData };
 };

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

@@ -1,7 +1,7 @@
-import { LogsTableViewProps } from 'components/Logs/TableView/types';
+import { UseTableViewProps } from 'components/Logs/TableView/types';
 
 export type InfinityTableProps = {
-	tableViewProps: LogsTableViewProps;
+	tableViewProps: UseTableViewProps;
 	infitiyTableProps: {
 		onEndReached: (index: number) => void;
 	};

frontend/src/container/LogsExplorerList/index.tsx

@@ -104,6 +104,7 @@ function LogsExplorerList({
 						fields: selectedFields,
 						linesPerRow: options.maxLines,
 						onClickExpand: onExpand,
+						appendTo: 'end',
 					}}
 					infitiyTableProps={{ onEndReached }}
 				/>