GitHub-Proxy/signoz
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/SigNoz/signoz synced 2025-07-31 10:22:00 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: onClick is added in the row (#966)

Browse Source
This commit is contained in:
palash-signoz 2022-04-07 13:11:27 +05:30 committed by GitHub
parent a767697a86
commit 041a5249b3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 21 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
frontend/src/container/Trace/TraceTable/index.tsx
View File

@ -3,9 +3,9 @@ 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 { useDispatch, useSelector } from 'react-redux';
import { Link } from 'react-router-dom';
import { Dispatch } from 'redux';
import { updateURL } from 'store/actions/trace/util';
import { AppState } from 'store/reducers';
@ -40,30 +40,17 @@ function TraceTable(): JSX.Element {
return `${ROUTES.TRACE}/${record.traceID}?spanId=${record.spanID}`;
};
const getValue = (value: string, record: TableType): JSX.Element => {
return (
<Link to={getLink(record)}>
<Typography>{value}</Typography>
</Link>
);
const getValue = (value: string): JSX.Element => {
return <Typography>{value}</Typography>;
};
const getHttpMethodOrStatus = (
value: TableType['httpMethod'],
record: TableType,
): JSX.Element => {
if (value.length === 0) {
return (
<Link to={getLink(record)}>
<Typography>-</Typography>
</Link>
);
return <Typography>-</Typography>;
}
return (
<Link to={getLink(record)}>
<Tag color="magenta">{value}</Tag>
</Link>
);
return <Tag color="magenta">{value}</Tag>;
};
const columns: ColumnsType<TableType> = [
@ -72,13 +59,9 @@ function TraceTable(): JSX.Element {
dataIndex: 'timestamp',
key: 'timestamp',
sorter: true,
render: (value: TableType['timestamp'], record): JSX.Element => {
render: (value: TableType['timestamp']): JSX.Element => {
const day = dayjs(value);
return (
<Link to={getLink(record)}>
<Typography>{day.format('YYYY/MM/DD HH:mm:ss')}</Typography>
</Link>
);
return <Typography>{day.format('YYYY/MM/DD HH:mm:ss')}</Typography>;
},
},
{
@ -97,15 +80,13 @@ function TraceTable(): JSX.Element {
title: 'Duration',
dataIndex: 'durationNano',
key: 'durationNano',
render: (value: TableType['durationNano'], record): JSX.Element => (
<Link to={getLink(record)}>
<Typography>
{`${dayjs
.duration({ milliseconds: value / 1000000 })
.asMilliseconds()
.toFixed(2)} ms`}
</Typography>
</Link>
render: (value: TableType['durationNano']): JSX.Element => (
<Typography>
{`${dayjs
.duration({ milliseconds: value / 1000000 })
.asMilliseconds()
.toFixed(2)} ms`}
</Typography>
),
},
{
@ -169,6 +150,13 @@ function TraceTable(): JSX.Element {
style={{
cursor: 'pointer',
}}
onRow={(record): React.HTMLAttributes<TableType> => ({
onClick: (event): void => {
event.preventDefault();
event.stopPropagation();
history.push(getLink(record));
},
})}
pagination={{
current: spansAggregate.currentPage,
pageSize: spansAggregate.pageSize,