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