From c6ac8df70774607297f268a9dc39580066319d72 Mon Sep 17 00:00:00 2001
From: Palash Gupta <palashgdev@gmail.com>
Date: Tue, 8 Aug 2023 14:48:59 +0530
Subject: [PATCH] fix: table view logs on expand is updated (#3286)

---
 frontend/src/components/Logs/TableView/types.ts |  1 +
 frontend/src/container/LogsTable/index.tsx      | 12 ++++++++++--
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/Logs/TableView/types.ts b/frontend/src/components/Logs/TableView/types.ts
index d5a456182d..446e99f32c 100644
--- a/frontend/src/components/Logs/TableView/types.ts
+++ b/frontend/src/components/Logs/TableView/types.ts
@@ -10,6 +10,7 @@ export type LogsTableViewProps = {
 	logs: ILog[];
 	fields: IField[];
 	linesPerRow: number;
+	onClickExpand?: (log: ILog) => void;
 };
 
 export type UseTableViewResult = {
diff --git a/frontend/src/container/LogsTable/index.tsx b/frontend/src/container/LogsTable/index.tsx
index 729b9c6b94..2acfdc9a13 100644
--- a/frontend/src/container/LogsTable/index.tsx
+++ b/frontend/src/container/LogsTable/index.tsx
@@ -5,6 +5,7 @@ import RawLogView from 'components/Logs/RawLogView';
 import LogsTableView from 'components/Logs/TableView';
 import Spinner from 'components/Spinner';
 import { contentStyle } from 'container/Trace/Search/config';
+import { useActiveLog } from 'hooks/logs/useActiveLog';
 import useFontFaceObserver from 'hooks/useFontObserver';
 import { memo, useCallback, useMemo } from 'react';
 import { useSelector } from 'react-redux';
@@ -26,6 +27,8 @@ type LogsTableProps = {
 function LogsTable(props: LogsTableProps): JSX.Element {
 	const { viewMode, linesPerRow } = props;
 
+	const { onSetActiveLog } = useActiveLog();
+
 	useFontFaceObserver(
 		[
 			{
@@ -72,7 +75,12 @@ function LogsTable(props: LogsTableProps): JSX.Element {
 	const renderContent = useMemo(() => {
 		if (viewMode === 'table') {
 			return (
-				<LogsTableView logs={logs} fields={selected} linesPerRow={linesPerRow} />
+				<LogsTableView
+					onClickExpand={onSetActiveLog}
+					logs={logs}
+					fields={selected}
+					linesPerRow={linesPerRow}
+				/>
 			);
 		}
 
@@ -85,7 +93,7 @@ function LogsTable(props: LogsTableProps): JSX.Element {
 				/>
 			</Card>
 		);
-	}, [getItemContent, linesPerRow, logs, selected, viewMode]);
+	}, [getItemContent, linesPerRow, logs, onSetActiveLog, selected, viewMode]);
 
 	if (isLoading) {
 		return <Spinner height={20} tip="Getting Logs" />;