From 0beffb50ca82d119e04e4d9c52e5b7a9da7e7d36 Mon Sep 17 00:00:00 2001
From: Palash Gupta <palashgdev@gmail.com>
Date: Mon, 17 Jul 2023 18:25:55 +0530
Subject: [PATCH] fix: table view on click is now taking raw logs (#3153)

---
 frontend/src/components/LogDetail/index.tsx   | 40 ++++++++++---------
 .../Logs/TableView/useTableView.tsx           |  7 ++--
 2 files changed, 25 insertions(+), 22 deletions(-)

diff --git a/frontend/src/components/LogDetail/index.tsx b/frontend/src/components/LogDetail/index.tsx
index f8a320e8e9..8ea0709fbd 100644
--- a/frontend/src/components/LogDetail/index.tsx
+++ b/frontend/src/components/LogDetail/index.tsx
@@ -1,6 +1,7 @@
 import { Drawer, Tabs } from 'antd';
 import JSONView from 'container/LogDetailedView/JsonView';
 import TableView from 'container/LogDetailedView/TableView';
+import { useMemo } from 'react';
 
 import { LogDetailProps } from './LogDetail.interfaces';
 
@@ -14,24 +15,27 @@ function LogDetail({
 		onClose();
 	};
 
-	const items = [
-		{
-			label: 'Table',
-			key: '1',
-			children: log && (
-				<TableView
-					logData={log}
-					onAddToQuery={onAddToQuery}
-					onClickActionItem={onClickActionItem}
-				/>
-			),
-		},
-		{
-			label: 'JSON',
-			key: '2',
-			children: log && <JSONView logData={log} />,
-		},
-	];
+	const items = useMemo(
+		() => [
+			{
+				label: 'Table',
+				key: '1',
+				children: log && (
+					<TableView
+						logData={log}
+						onAddToQuery={onAddToQuery}
+						onClickActionItem={onClickActionItem}
+					/>
+				),
+			},
+			{
+				label: 'JSON',
+				key: '2',
+				children: log && <JSONView logData={log} />,
+			},
+		],
+		[log, onAddToQuery, onClickActionItem],
+	);
 
 	return (
 		<Drawer
diff --git a/frontend/src/components/Logs/TableView/useTableView.tsx b/frontend/src/components/Logs/TableView/useTableView.tsx
index 7967aa15f9..d50feb35dd 100644
--- a/frontend/src/components/Logs/TableView/useTableView.tsx
+++ b/frontend/src/components/Logs/TableView/useTableView.tsx
@@ -6,7 +6,6 @@ import dayjs from 'dayjs';
 import dompurify from 'dompurify';
 import { FlatLogData } from 'lib/logs/flatLogData';
 import { useMemo } from 'react';
-import { ILog } from 'types/api/logs/log';
 
 import { ExpandIconWrapper } from '../RawLogView/styles';
 import { defaultCellStyle, defaultTableStyle } from './config';
@@ -57,14 +56,14 @@ export const useTableView = (props: UseTableViewProps): UseTableViewResult => {
 				dataIndex: 'id',
 				key: 'expand',
 				// https://github.com/ant-design/ant-design/discussions/36886
-				render: (_, item): ColumnTypeRender<Record<string, unknown>> => ({
+				render: (_, item, index): ColumnTypeRender<Record<string, unknown>> => ({
 					props: {
 						style: defaultCellStyle,
 					},
 					children: (
 						<ExpandIconWrapper
 							onClick={(): void => {
-								onClickExpand((item as unknown) as ILog);
+								onClickExpand(logs[index]);
 							}}
 						>
 							<ExpandAltOutlined />
@@ -108,7 +107,7 @@ export const useTableView = (props: UseTableViewProps): UseTableViewResult => {
 			},
 			...(appendTo === 'end' ? fieldColumns : []),
 		];
-	}, [fields, linesPerRow, appendTo, onClickExpand]);
+	}, [fields, appendTo, linesPerRow, onClickExpand, logs]);
 
 	return { columns, dataSource: flattenLogData };
 };