From ee1e2b824f83a654362c5233fd97b6f1fb610f93 Mon Sep 17 00:00:00 2001
From: Shaheer Kochai <ashaheerki@gmail.com>
Date: Tue, 10 Sep 2024 11:30:22 +0430
Subject: [PATCH] fix: make the trace table row act as an anchor tag (#5626)

* fix: wrap the trace row cells inside a tag to make them clickable
---
 .../TracesExplorer/ListView/utils.tsx         | 48 ++++++++++++++++---
 1 file changed, 41 insertions(+), 7 deletions(-)

diff --git a/frontend/src/container/TracesExplorer/ListView/utils.tsx b/frontend/src/container/TracesExplorer/ListView/utils.tsx
index 254ff93296..a6201436d1 100644
--- a/frontend/src/container/TracesExplorer/ListView/utils.tsx
+++ b/frontend/src/container/TracesExplorer/ListView/utils.tsx
@@ -5,10 +5,26 @@ import { getMs } from 'container/Trace/Filters/Panel/PanelBody/Duration/util';
 import { formUrlParams } from 'container/TraceDetail/utils';
 import dayjs from 'dayjs';
 import { RowData } from 'lib/query/createTableColumnsFromQuery';
+import { Link } from 'react-router-dom';
 import { ILog } from 'types/api/logs/log';
 import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { QueryDataV3 } from 'types/api/widgets/getQuery';
 
+function BlockLink({
+	children,
+	to,
+}: {
+	children: React.ReactNode;
+	to: string;
+}): any {
+	// Display block to make the whole cell clickable
+	return (
+		<Link to={to} style={{ display: 'block' }}>
+			{children}
+		</Link>
+	);
+}
+
 export const transformDataWithDate = (
 	data: QueryDataV3[],
 ): Omit<ILog, 'timestamp'>[] =>
@@ -36,7 +52,11 @@ export const getListColumns = (
 					typeof item === 'string'
 						? dayjs(item).format('YYYY-MM-DD HH:mm:ss.SSS')
 						: dayjs(item / 1e6).format('YYYY-MM-DD HH:mm:ss.SSS');
-				return <Typography.Text>{date}</Typography.Text>;
+				return (
+					<BlockLink to={getTraceLink(item)}>
+						<Typography.Text>{date}</Typography.Text>
+					</BlockLink>
+				);
 			},
 		},
 	];
@@ -49,22 +69,36 @@ export const getListColumns = (
 			width: 145,
 			render: (value): JSX.Element => {
 				if (value === '') {
-					return <Typography data-testid={key}>N/A</Typography>;
+					return (
+						<BlockLink to={getTraceLink(value)}>
+							<Typography data-testid={key}>N/A</Typography>
+						</BlockLink>
+					);
 				}
 
 				if (key === 'httpMethod' || key === 'responseStatusCode') {
 					return (
-						<Tag data-testid={key} color="magenta">
-							{value}
-						</Tag>
+						<BlockLink to={getTraceLink(value)}>
+							<Tag data-testid={key} color="magenta">
+								{value}
+							</Tag>
+						</BlockLink>
 					);
 				}
 
 				if (key === 'durationNano') {
-					return <Typography data-testid={key}>{getMs(value)}ms</Typography>;
+					return (
+						<BlockLink to={getTraceLink(value)}>
+							<Typography data-testid={key}>{getMs(value)}ms</Typography>
+						</BlockLink>
+					);
 				}
 
-				return <Typography data-testid={key}>{value}</Typography>;
+				return (
+					<BlockLink to={getTraceLink(value)}>
+						<Typography data-testid={key}>{value}</Typography>
+					</BlockLink>
+				);
 			},
 			responsive: ['md'],
 		})) || [];