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

frontend/src/container/LogDetailedView/ContextView/ContextLogRenderer.styles.scss

@@ -22,4 +22,10 @@
             width: fit-content;
         }
 	}
+    &__item {
+        width: 100%;
+        .raw-log-content {
+            cursor: pointer;
+        }
+    }
 }

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,8 +104,36 @@ 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 => (
+			<Button
+				type="text"
+				size="small"
+				className="context-log-renderer__item"
+				onClick={(): void => {
+					handleLogClick(logTorender.id);
+				}}
+			>
 				<RawLogView
 					isActiveLog={logTorender.id === log.id}
 					isReadOnly
@@ -111,10 +142,13 @@ function ContextLogRenderer({
 					data={logTorender}
 					linesPerRow={1}
 					fontSize={options.fontSize}
-				selectedFields={convertKeysToColumnFields(defaultLogsSelectedColumns)}
+					selectedFields={convertKeysToColumnFields(
+						options.selectColumns ?? defaultLogsSelectedColumns,
+					)}
 				/>
+			</Button>
 		),
-		[log.id, options.fontSize],
+		[handleLogClick, log.id, options.fontSize, options.selectColumns],
 	);
 
 	return (