From ef4b70f67b014393483c0adb079a2c732c323d9e Mon Sep 17 00:00:00 2001
From: Vikrant Gupta <vikrant.thomso@gmail.com>
Date: Thu, 26 Sep 2024 19:06:22 +0530
Subject: [PATCH] fix: intermittent undefined page in trace details page
 (#6084)

---
 .../TracesExplorer/ListView/index.tsx         | 21 ++-----------------
 .../TracesExplorer/ListView/utils.tsx         | 18 ++++++++--------
 2 files changed, 11 insertions(+), 28 deletions(-)

diff --git a/frontend/src/container/TracesExplorer/ListView/index.tsx b/frontend/src/container/TracesExplorer/ListView/index.tsx
index 810ffb8241..c22623772b 100644
--- a/frontend/src/container/TracesExplorer/ListView/index.tsx
+++ b/frontend/src/container/TracesExplorer/ListView/index.tsx
@@ -14,9 +14,8 @@ import { Pagination } from 'hooks/queryPagination';
 import useDragColumns from 'hooks/useDragColumns';
 import { getDraggedColumns } from 'hooks/useDragColumns/utils';
 import useUrlQueryData from 'hooks/useUrlQueryData';
-import history from 'lib/history';
 import { RowData } from 'lib/query/createTableColumnsFromQuery';
-import { HTMLAttributes, memo, useCallback, useMemo } from 'react';
+import { memo, useCallback, useMemo } from 'react';
 import { useSelector } from 'react-redux';
 import { AppState } from 'store/reducers';
 import { DataSource } from 'types/common/queryBuilder';
@@ -25,7 +24,7 @@ import { GlobalReducer } from 'types/reducer/globalTime';
 import { TracesLoading } from '../TraceLoading/TraceLoading';
 import { defaultSelectedColumns, PER_PAGE_OPTIONS } from './configs';
 import { Container, ErrorText, tableStyles } from './styles';
-import { getListColumns, getTraceLink, transformDataWithDate } from './utils';
+import { getListColumns, transformDataWithDate } from './utils';
 
 interface ListViewProps {
 	isFilterApplied: boolean;
@@ -108,21 +107,6 @@ function ListView({ isFilterApplied }: ListViewProps): JSX.Element {
 		[queryTableData],
 	);
 
-	const handleRow = useCallback(
-		(record: RowData): HTMLAttributes<RowData> => ({
-			onClick: (event): void => {
-				event.preventDefault();
-				event.stopPropagation();
-				if (event.metaKey || event.ctrlKey) {
-					window.open(getTraceLink(record), '_blank');
-				} else {
-					history.push(getTraceLink(record));
-				}
-			},
-		}),
-		[],
-	);
-
 	const handleDragColumn = useCallback(
 		(fromIndex: number, toIndex: number) =>
 			onDragColumns(columns, fromIndex, toIndex),
@@ -169,7 +153,6 @@ function ListView({ isFilterApplied }: ListViewProps): JSX.Element {
 					style={tableStyles}
 					dataSource={transformedQueryTableData}
 					columns={columns}
-					onRow={handleRow}
 					onDragColumn={handleDragColumn}
 				/>
 			)}
diff --git a/frontend/src/container/TracesExplorer/ListView/utils.tsx b/frontend/src/container/TracesExplorer/ListView/utils.tsx
index a6201436d1..dc0e3808ae 100644
--- a/frontend/src/container/TracesExplorer/ListView/utils.tsx
+++ b/frontend/src/container/TracesExplorer/ListView/utils.tsx
@@ -47,11 +47,11 @@ export const getListColumns = (
 			key: 'date',
 			title: 'Timestamp',
 			width: 145,
-			render: (item): JSX.Element => {
+			render: (value, item): JSX.Element => {
 				const date =
-					typeof item === 'string'
-						? dayjs(item).format('YYYY-MM-DD HH:mm:ss.SSS')
-						: dayjs(item / 1e6).format('YYYY-MM-DD HH:mm:ss.SSS');
+					typeof value === 'string'
+						? dayjs(value).format('YYYY-MM-DD HH:mm:ss.SSS')
+						: dayjs(value / 1e6).format('YYYY-MM-DD HH:mm:ss.SSS');
 				return (
 					<BlockLink to={getTraceLink(item)}>
 						<Typography.Text>{date}</Typography.Text>
@@ -67,10 +67,10 @@ export const getListColumns = (
 			dataIndex: key,
 			key: `${key}-${dataType}-${type}`,
 			width: 145,
-			render: (value): JSX.Element => {
+			render: (value, item): JSX.Element => {
 				if (value === '') {
 					return (
-						<BlockLink to={getTraceLink(value)}>
+						<BlockLink to={getTraceLink(item)}>
 							<Typography data-testid={key}>N/A</Typography>
 						</BlockLink>
 					);
@@ -78,7 +78,7 @@ export const getListColumns = (
 
 				if (key === 'httpMethod' || key === 'responseStatusCode') {
 					return (
-						<BlockLink to={getTraceLink(value)}>
+						<BlockLink to={getTraceLink(item)}>
 							<Tag data-testid={key} color="magenta">
 								{value}
 							</Tag>
@@ -88,14 +88,14 @@ export const getListColumns = (
 
 				if (key === 'durationNano') {
 					return (
-						<BlockLink to={getTraceLink(value)}>
+						<BlockLink to={getTraceLink(item)}>
 							<Typography data-testid={key}>{getMs(value)}ms</Typography>
 						</BlockLink>
 					);
 				}
 
 				return (
-					<BlockLink to={getTraceLink(value)}>
+					<BlockLink to={getTraceLink(item)}>
 						<Typography data-testid={key}>{value}</Typography>
 					</BlockLink>
 				);