From 2f3cee814eef36d285c9bf8768f69bf70ca689a8 Mon Sep 17 00:00:00 2001
From: Shaheer Kochai <ashaheerki@gmail.com>
Date: Wed, 5 Mar 2025 09:09:41 +0430
Subject: [PATCH] feat: logs explorer context log line redirection (#7142)

* feat: display select columns from user preferences for context log line

* feat: add support for redirecting context log line to logs explorer

* feat: open context log line in new tab

* feat: pass all the filters on opening context log line in a new tab

* chore: make log context line cursor pointer
---
 .../ContextLogRenderer.styles.scss            |  8 ++-
 .../ContextView/ContextLogRenderer.tsx        | 58 +++++++++++++++----
 2 files changed, 53 insertions(+), 13 deletions(-)

diff --git a/frontend/src/container/LogDetailedView/ContextView/ContextLogRenderer.styles.scss b/frontend/src/container/LogDetailedView/ContextView/ContextLogRenderer.styles.scss
index c8891390f4..5c84f33dfa 100644
--- a/frontend/src/container/LogDetailedView/ContextView/ContextLogRenderer.styles.scss
+++ b/frontend/src/container/LogDetailedView/ContextView/ContextLogRenderer.styles.scss
@@ -22,4 +22,10 @@
             width: fit-content;
         }
 	}
-}
\ No newline at end of file
+    &__item {
+        width: 100%;
+        .raw-log-content {
+            cursor: pointer;
+        }
+    }
+}
diff --git a/frontend/src/container/LogDetailedView/ContextView/ContextLogRenderer.tsx b/frontend/src/container/LogDetailedView/ContextView/ContextLogRenderer.tsx
index 90a8126227..2d68f9e09b 100644
--- a/frontend/src/container/LogDetailedView/ContextView/ContextLogRenderer.tsx
+++ b/frontend/src/container/LogDetailedView/ContextView/ContextLogRenderer.tsx
@@ -1,9 +1,10 @@
 import './ContextLogRenderer.styles.scss';
 
-import { Skeleton } from 'antd';
+import { Button, Skeleton } from 'antd';
 import RawLogView from 'components/Logs/RawLogView';
 import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
 import { LOCALSTORAGE } from 'constants/localStorage';
+import { QueryParams } from 'constants/query';
 import ShowButton from 'container/LogsContextList/ShowButton';
 import { convertKeysToColumnFields } from 'container/LogsExplorerList/utils';
 import { useOptionsMenu } from 'container/OptionsMenu';
@@ -11,7 +12,9 @@ import { defaultLogsSelectedColumns } from 'container/OptionsMenu/constants';
 import { FontSize } from 'container/OptionsMenu/types';
 import { ORDERBY_FILTERS } from 'container/QueryBuilder/filters/OrderByFilter/config';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
+import useUrlQuery from 'hooks/useUrlQuery';
 import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useLocation } from 'react-router-dom';
 import { Virtuoso } from 'react-virtuoso';
 import { ILog } from 'types/api/logs/log';
 import { Query, TagFilter } from 'types/api/queryBuilder/queryBuilderData';
@@ -101,20 +104,51 @@ function ContextLogRenderer({
 		}
 	}, [options.fontSize]);
 
+	const urlQuery = useUrlQuery();
+
+	const { pathname } = useLocation();
+
+	const handleLogClick = useCallback(
+		(logId: string): void => {
+			urlQuery.set(QueryParams.activeLogId, `"${logId}"`);
+
+			urlQuery.set(
+				QueryParams.compositeQuery,
+				encodeURIComponent(JSON.stringify(query)),
+			);
+
+			const link = `${pathname}?${urlQuery.toString()}`;
+
+			window.open(link, '_blank', 'noopener,noreferrer');
+		},
+		[pathname, query, urlQuery],
+	);
+
 	const getItemContent = useCallback(
 		(_: number, logTorender: ILog): JSX.Element => (
-			<RawLogView
-				isActiveLog={logTorender.id === log.id}
-				isReadOnly
-				isTextOverflowEllipsisDisabled
-				key={logTorender.id}
-				data={logTorender}
-				linesPerRow={1}
-				fontSize={options.fontSize}
-				selectedFields={convertKeysToColumnFields(defaultLogsSelectedColumns)}
-			/>
+			<Button
+				type="text"
+				size="small"
+				className="context-log-renderer__item"
+				onClick={(): void => {
+					handleLogClick(logTorender.id);
+				}}
+			>
+				<RawLogView
+					isActiveLog={logTorender.id === log.id}
+					isReadOnly
+					isTextOverflowEllipsisDisabled
+					key={logTorender.id}
+					data={logTorender}
+					linesPerRow={1}
+					fontSize={options.fontSize}
+					selectedFields={convertKeysToColumnFields(
+						options.selectColumns ?? defaultLogsSelectedColumns,
+					)}
+				/>
+			</Button>
 		),
-		[log.id, options.fontSize],
+		[handleLogClick, log.id, options.fontSize, options.selectColumns],
 	);
 
 	return (