GitHub-Proxy/signoz
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/SigNoz/signoz synced 2025-08-14 04:26:02 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: onClick feature is updated (#895)

Browse Source
This commit is contained in:
palash-signoz 2022-03-23 19:44:26 +05:30 committed by GitHub
parent b958bad81f
commit 7765cee610
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 59 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
frontend/src/container/MetricsTable/index.tsx
View File

@ -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>
),
},
{

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

@ -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 => (
<div>
render: (value: TableType['durationNano'], record): JSX.Element => (
<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',