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 (
+
+ {children}
+
+ );
+}
+
export const transformDataWithDate = (
data: QueryDataV3[],
): Omit[] =>
@@ -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 {date};
+ return (
+
+ {date}
+
+ );
},
},
];
@@ -49,22 +69,36 @@ export const getListColumns = (
width: 145,
render: (value): JSX.Element => {
if (value === '') {
- return N/A;
+ return (
+
+ N/A
+
+ );
}
if (key === 'httpMethod' || key === 'responseStatusCode') {
return (
-
- {value}
-
+
+
+ {value}
+
+
);
}
if (key === 'durationNano') {
- return {getMs(value)}ms;
+ return (
+
+ {getMs(value)}ms
+
+ );
}
- return {value};
+ return (
+
+ {value}
+
+ );
},
responsive: ['md'],
})) || [];