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

fix: make the trace table row act as an anchor tag (#5626)

Browse Source 
* fix: wrap the trace row cells inside a tag to make them clickable
This commit is contained in:
Shaheer Kochai 2024-09-10 11:30:22 +04:30 committed by GitHub
parent 6f0cf03371
commit ee1e2b824f
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 41 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
frontend/src/container/TracesExplorer/ListView/utils.tsx
View File

@ -5,10 +5,26 @@ import { getMs } from 'container/Trace/Filters/Panel/PanelBody/Duration/util';
import { formUrlParams } from 'container/TraceDetail/utils'; import { formUrlParams } from 'container/TraceDetail/utils';
import dayjs from 'dayjs'; import dayjs from 'dayjs';
import { RowData } from 'lib/query/createTableColumnsFromQuery'; import { RowData } from 'lib/query/createTableColumnsFromQuery';
import { Link } from 'react-router-dom';
import { ILog } from 'types/api/logs/log'; import { ILog } from 'types/api/logs/log';
import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse'; import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
import { QueryDataV3 } from 'types/api/widgets/getQuery'; 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 (
<Link to={to} style={{ display: 'block' }}>
{children}
</Link>
);
}
export const transformDataWithDate = ( export const transformDataWithDate = (
data: QueryDataV3[], data: QueryDataV3[],
): Omit<ILog, 'timestamp'>[] => ): Omit<ILog, 'timestamp'>[] =>
@ -36,7 +52,11 @@ export const getListColumns = (
typeof item === 'string' typeof item === 'string'
? dayjs(item).format('YYYY-MM-DD HH:mm:ss.SSS') ? dayjs(item).format('YYYY-MM-DD HH:mm:ss.SSS')
: dayjs(item / 1e6).format('YYYY-MM-DD HH:mm:ss.SSS'); : dayjs(item / 1e6).format('YYYY-MM-DD HH:mm:ss.SSS');
return <Typography.Text>{date}</Typography.Text>; return (
<BlockLink to={getTraceLink(item)}>
<Typography.Text>{date}</Typography.Text>
</BlockLink>
);
}, },
}, },
]; ];
@ -49,22 +69,36 @@ export const getListColumns = (
width: 145, width: 145,
render: (value): JSX.Element => { render: (value): JSX.Element => {
if (value === '') { if (value === '') {
return <Typography data-testid={key}>N/A</Typography>; return (
<BlockLink to={getTraceLink(value)}>
<Typography data-testid={key}>N/A</Typography>
</BlockLink>
);
} }
if (key === 'httpMethod' || key === 'responseStatusCode') { if (key === 'httpMethod' || key === 'responseStatusCode') {
return ( return (
<Tag data-testid={key} color="magenta"> <BlockLink to={getTraceLink(value)}>
{value} <Tag data-testid={key} color="magenta">
</Tag> {value}
</Tag>
</BlockLink>
); );
} }
if (key === 'durationNano') { if (key === 'durationNano') {
return <Typography data-testid={key}>{getMs(value)}ms</Typography>; return (
<BlockLink to={getTraceLink(value)}>
<Typography data-testid={key}>{getMs(value)}ms</Typography>
</BlockLink>
);
} }
return <Typography data-testid={key}>{value}</Typography>; return (
<BlockLink to={getTraceLink(value)}>
<Typography data-testid={key}>{value}</Typography>
</BlockLink>
);
}, },
responsive: ['md'], responsive: ['md'],
})) || []; })) || [];