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

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

View File

@ -14,9 +14,8 @@ import { Pagination } from 'hooks/queryPagination';
import useDragColumns from 'hooks/useDragColumns';
import { getDraggedColumns } from 'hooks/useDragColumns/utils';
import useUrlQueryData from 'hooks/useUrlQueryData';
import history from 'lib/history';
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 { AppState } from 'store/reducers';
import { DataSource } from 'types/common/queryBuilder';
@ -25,7 +24,7 @@ import { GlobalReducer } from 'types/reducer/globalTime';
import { TracesLoading } from '../TraceLoading/TraceLoading';
import { defaultSelectedColumns, PER_PAGE_OPTIONS } from './configs';
import { Container, ErrorText, tableStyles } from './styles';
import { getListColumns, getTraceLink, transformDataWithDate } from './utils';
import { getListColumns, transformDataWithDate } from './utils';
interface ListViewProps {
isFilterApplied: boolean;
@ -108,21 +107,6 @@ function ListView({ isFilterApplied }: ListViewProps): JSX.Element {
[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(
(fromIndex: number, toIndex: number) =>
onDragColumns(columns, fromIndex, toIndex),
@ -169,7 +153,6 @@ function ListView({ isFilterApplied }: ListViewProps): JSX.Element {
style={tableStyles}
dataSource={transformedQueryTableData}
columns={columns}
onRow={handleRow}
onDragColumn={handleDragColumn}
/>
)}

View File

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