feat: onClick feature is updated (#895)

frontend/src/container/MetricsTable/index.tsx

@@ -5,6 +5,7 @@ import { SKIP_ONBOARDING } from 'constants/onboarding';
 import ROUTES from 'constants/routes';
 import React, { useState } from 'react';
 import { useSelector } from 'react-redux';
+import { Link } from 'react-router-dom';
 import { servicesListItem } from 'store/actions/MetricsActions/metricsInterfaces';
 import { AppState } from 'store/reducers';
 import MetricReducer from 'types/reducer/metrics';
@@ -46,9 +47,9 @@ function Metrics(): JSX.Element {
 			key: 'serviceName',
 			// eslint-disable-next-line react/display-name
 			render: (text: string): JSX.Element => (
-				<div onClick={(): void => onClickHandler(`${ROUTES.APPLICATION}/${text}`)}>
+				<Link to={`${ROUTES.APPLICATION}/${text}`}>
 					<Name>{text}</Name>
-				</div>
+				</Link>
 			),
 		},
 		{

frontend/src/container/Trace/TraceTable/index.tsx

@@ -1,11 +1,11 @@
-import { TableProps, Tag } from 'antd';
+import { TableProps, Tag, Typography } from 'antd';
 import Table, { ColumnsType } from 'antd/lib/table';
 import ROUTES from 'constants/routes';
 import dayjs from 'dayjs';
 import duration from 'dayjs/plugin/duration';
-import history from 'lib/history';
 import React from 'react';
 import { connect, useSelector } from 'react-redux';
+import { Link } from 'react-router-dom';
 import { bindActionCreators } from 'redux';
 import { ThunkDispatch } from 'redux-thunk';
 import {
@@ -35,59 +35,99 @@ function TraceTable({ getSpansAggregate }: TraceProps): JSX.Element {
 
 	type TableType = FlatArray<TraceReducer['spansAggregate']['data'], 1>;
 
+	const getLink = (record: TableType): string => {
+		return `${ROUTES.TRACE}/${record.traceID}?spanId=${record.spanID}`;
+	};
+
 	const columns: ColumnsType<TableType> = [
 		{
 			title: 'Date',
 			dataIndex: 'timestamp',
 			key: 'timestamp',
 			sorter: true,
-			render: (value: TableType['timestamp']): JSX.Element => {
+			render: (value: TableType['timestamp'], record): JSX.Element => {
 				const day = dayjs(value);
-				return <div>{day.format('YYYY/MM/DD HH:mm:ss')}</div>;
+				return (
+					<Link to={getLink(record)}>
+						<Typography>{day.format('YYYY/MM/DD HH:mm:ss')}</Typography>
+					</Link>
+				);
 			},
 		},
 		{
 			title: 'Service',
 			dataIndex: 'serviceName',
 			key: 'serviceName',
+			render: (value, record): JSX.Element => {
+				return (
+					<Link to={getLink(record)}>
+						<Typography>{value}</Typography>
+					</Link>
+				);
+			},
 		},
 		{
 			title: 'Operation',
 			dataIndex: 'operation',
 			key: 'operation',
+			render: (value, record): JSX.Element => {
+				return (
+					<Link to={getLink(record)}>
+						<Typography>{value}</Typography>
+					</Link>
+				);
+			},
 		},
 		{
 			title: 'Duration',
 			dataIndex: 'durationNano',
 			key: 'durationNano',
-			render: (value: TableType['durationNano']): JSX.Element => (
+			render: (value: TableType['durationNano'], record): JSX.Element => (
-				<div>
+				<Link to={getLink(record)}>
+					<Typography>
 						{`${dayjs
 							.duration({ milliseconds: value / 1000000 })
 							.asMilliseconds()} ms`}
-				</div>
+					</Typography>
+				</Link>
 			),
 		},
 		{
 			title: 'Method',
 			dataIndex: 'httpMethod',
 			key: 'httpMethod',
-			render: (value: TableType['httpMethod']): JSX.Element => {
+			render: (value: TableType['httpMethod'], record): JSX.Element => {
 				if (value.length === 0) {
-					return <div>-</div>;
+					return (
+						<Link to={getLink(record)}>
+							<Typography>-</Typography>
+						</Link>
+					);
 				}
-				return <Tag color="magenta">{value}</Tag>;
+				return (
+					<Link to={getLink(record)}>
+						<Tag color="magenta">{value}</Tag>
+					</Link>
+				);
 			},
 		},
 		{
 			title: 'Status Code',
 			dataIndex: 'httpCode',
 			key: 'httpCode',
-			render: (value: TableType['httpCode']): JSX.Element => {
+			render: (value: TableType['httpMethod'], record): JSX.Element => {
 				if (value.length === 0) {
-					return <div>-</div>;
+					return (
+						<Link to={getLink(record)}>
+							<Typography>-</Typography>
+						</Link>
+					);
 				}
-				return <Tag color="magenta">{value}</Tag>;
+				return (
+					<Link to={getLink(record)}>
+						<Tag color="magenta">{value}</Tag>
+					</Link>
+				);
 			},
 		},
 	];
@@ -118,12 +158,6 @@ function TraceTable({ getSpansAggregate }: TraceProps): JSX.Element {
 			dataSource={spansAggregate.data}
 			loading={loading || filterLoading}
 			columns={columns}
-			onRow={(record) => ({
-				onClick: (): void => {
-					window.open(`${ROUTES.TRACE}/${record.traceID}?spanId=${record.spanID}`);
-				},
-			})}
-			size="middle"
 			rowKey="timestamp"
 			style={{
 				cursor: 'pointer',