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

fix: intermittent undefined page in trace details page (#6084)

Browse Source
This commit is contained in:
Vikrant Gupta 2024-09-26 19:06:22 +05:30 committed by GitHub
parent 7a125e31ec
commit ef4b70f67b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 11 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
frontend/src/container/TracesExplorer/ListView/index.tsx
View File

@ -14,9 +14,8 @@ import { Pagination } from 'hooks/queryPagination';
import useDragColumns from 'hooks/useDragColumns'; import useDragColumns from 'hooks/useDragColumns';
import { getDraggedColumns } from 'hooks/useDragColumns/utils'; import { getDraggedColumns } from 'hooks/useDragColumns/utils';
import useUrlQueryData from 'hooks/useUrlQueryData'; import useUrlQueryData from 'hooks/useUrlQueryData';
import history from 'lib/history';
import { RowData } from 'lib/query/createTableColumnsFromQuery'; import { RowData } from 'lib/query/createTableColumnsFromQuery';
import { HTMLAttributes, memo, useCallback, useMemo } from 'react'; import { memo, useCallback, useMemo } from 'react';
import { useSelector } from 'react-redux'; import { useSelector } from 'react-redux';
import { AppState } from 'store/reducers'; import { AppState } from 'store/reducers';
import { DataSource } from 'types/common/queryBuilder'; import { DataSource } from 'types/common/queryBuilder';
@ -25,7 +24,7 @@ import { GlobalReducer } from 'types/reducer/globalTime';
import { TracesLoading } from '../TraceLoading/TraceLoading'; import { TracesLoading } from '../TraceLoading/TraceLoading';
import { defaultSelectedColumns, PER_PAGE_OPTIONS } from './configs'; import { defaultSelectedColumns, PER_PAGE_OPTIONS } from './configs';
import { Container, ErrorText, tableStyles } from './styles'; import { Container, ErrorText, tableStyles } from './styles';
import { getListColumns, getTraceLink, transformDataWithDate } from './utils'; import { getListColumns, transformDataWithDate } from './utils';
interface ListViewProps { interface ListViewProps {
isFilterApplied: boolean; isFilterApplied: boolean;
@ -108,21 +107,6 @@ function ListView({ isFilterApplied }: ListViewProps): JSX.Element {
[queryTableData], [queryTableData],
); );
const handleRow = useCallback(
(record: RowData): HTMLAttributes<RowData> => ({
onClick: (event): void => {
event.preventDefault();
event.stopPropagation();
if (event.metaKey || event.ctrlKey) {
window.open(getTraceLink(record), '_blank');
} else {
history.push(getTraceLink(record));
}
},
}),
[],
);
const handleDragColumn = useCallback( const handleDragColumn = useCallback(
(fromIndex: number, toIndex: number) => (fromIndex: number, toIndex: number) =>
onDragColumns(columns, fromIndex, toIndex), onDragColumns(columns, fromIndex, toIndex),
@ -169,7 +153,6 @@ function ListView({ isFilterApplied }: ListViewProps): JSX.Element {
style={tableStyles} style={tableStyles}
dataSource={transformedQueryTableData} dataSource={transformedQueryTableData}
columns={columns} columns={columns}
onRow={handleRow}
onDragColumn={handleDragColumn} onDragColumn={handleDragColumn}
/> />
)} )}

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

@ -47,11 +47,11 @@ export const getListColumns = (
key: 'date', key: 'date',
title: 'Timestamp', title: 'Timestamp',
width: 145, width: 145,
render: (item): JSX.Element => { render: (value, item): JSX.Element => {
const date = const date =
typeof item === 'string' typeof value === 'string'
? dayjs(item).format('YYYY-MM-DD HH:mm:ss.SSS') ? dayjs(value).format('YYYY-MM-DD HH:mm:ss.SSS')
: dayjs(item / 1e6).format('YYYY-MM-DD HH:mm:ss.SSS'); : dayjs(value / 1e6).format('YYYY-MM-DD HH:mm:ss.SSS');
return ( return (
<BlockLink to={getTraceLink(item)}> <BlockLink to={getTraceLink(item)}>
<Typography.Text>{date}</Typography.Text> <Typography.Text>{date}</Typography.Text>
@ -67,10 +67,10 @@ export const getListColumns = (
dataIndex: key, dataIndex: key,
key: `${key}-${dataType}-${type}`, key: `${key}-${dataType}-${type}`,
width: 145, width: 145,
render: (value): JSX.Element => { render: (value, item): JSX.Element => {
if (value === '') { if (value === '') {
return ( return (
<BlockLink to={getTraceLink(value)}> <BlockLink to={getTraceLink(item)}>
<Typography data-testid={key}>N/A</Typography> <Typography data-testid={key}>N/A</Typography>
</BlockLink> </BlockLink>
); );
@ -78,7 +78,7 @@ export const getListColumns = (
if (key === 'httpMethod' || key === 'responseStatusCode') { if (key === 'httpMethod' || key === 'responseStatusCode') {
return ( return (
<BlockLink to={getTraceLink(value)}> <BlockLink to={getTraceLink(item)}>
<Tag data-testid={key} color="magenta"> <Tag data-testid={key} color="magenta">
{value} {value}
</Tag> </Tag>
@ -88,14 +88,14 @@ export const getListColumns = (
if (key === 'durationNano') { if (key === 'durationNano') {
return ( return (
<BlockLink to={getTraceLink(value)}> <BlockLink to={getTraceLink(item)}>
<Typography data-testid={key}>{getMs(value)}ms</Typography> <Typography data-testid={key}>{getMs(value)}ms</Typography>
</BlockLink> </BlockLink>
); );
} }
return ( return (
<BlockLink to={getTraceLink(value)}> <BlockLink to={getTraceLink(item)}>
<Typography data-testid={key}>{value}</Typography> <Typography data-testid={key}>{value}</Typography>
</BlockLink> </BlockLink>
); );