Skip to content

feat(replays): Save Replay>Network sort field/dir into the url #42795

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jan 6, 2023
Merged

feat(replays): Save Replay>Network sort field/dir into the url #42795

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion static/app/views/replays/detail/domMutations/domMutationRow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -107,7 +107,7 @@ const MutationListItem = styled('div')<{
p.isCurrent ? p.theme.purple300 : p.isHovered ? p.theme.purple200 : 'transparent'};

&:hover {
background-color: ${p => p.theme.backgroundSecondary};
background-color: ${p => p.theme.hover};
}

/*
Expand Down
261 changes: 49 additions & 212 deletions static/app/views/replays/detail/network/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,10 @@
import {useEffect, useRef, useState} from 'react';
import {
AutoSizer,
CellMeasurer,
CellMeasurerCache,
GridCellProps,
MultiGrid,
} from 'react-virtualized';
import {useRef, useState} from 'react';
import {AutoSizer, CellMeasurer, GridCellProps, MultiGrid} from 'react-virtualized';
import styled from '@emotion/styled';

import FileSize from 'sentry/components/fileSize';
import Placeholder from 'sentry/components/placeholder';
import {useReplayContext} from 'sentry/components/replays/replayContext';
import {relativeTimeInMs} from 'sentry/components/replays/utils';
import Tooltip from 'sentry/components/tooltip';
import {t} from 'sentry/locale';
import space from 'sentry/styles/space';
import {defined} from 'sentry/utils';
import {getPrevReplayEvent} from 'sentry/utils/replays/getReplayEvent';
import useCrumbHandlers from 'sentry/utils/replays/hooks/useCrumbHandlers';
import FluidHeight from 'sentry/views/replays/detail/layout/fluidHeight';
Expand All @@ -24,31 +13,21 @@ import NetworkHeaderCell, {
COLUMN_COUNT,
HEADER_HEIGHT,
} from 'sentry/views/replays/detail/network/networkHeaderCell';
import NetworkTableCell from 'sentry/views/replays/detail/network/networkTableCell';
import useNetworkFilters from 'sentry/views/replays/detail/network/useNetworkFilters';
import useSortNetwork from 'sentry/views/replays/detail/network/useSortNetwork';
import NoRowRenderer from 'sentry/views/replays/detail/noRowRenderer';
import TimestampButton from 'sentry/views/replays/detail/timestampButton';
import useVirtualizedGrid from 'sentry/views/replays/detail/useVirtualizedGrid';
import type {NetworkSpan} from 'sentry/views/replays/types';

type Props = {
networkSpans: undefined | NetworkSpan[];
startTimestampMs: number;
};

type SortDirection = 'asc' | 'desc';

const cache = new CellMeasurerCache({
defaultWidth: 100,
fixedHeight: true,
});

function NetworkList({networkSpans, startTimestampMs}: Props) {
const {currentTime, currentHoverTime} = useReplayContext();

const [scrollBarWidth, setScrollBarWidth] = useState(0);
const multiGridRef = useRef<MultiGrid>(null);
const networkTableRef = useRef<HTMLDivElement>(null);

const filterProps = useNetworkFilters({networkSpans: networkSpans || []});
const {items: filteredItems, searchTerm, setSearchTerm} = filterProps;
const clearSearchTerm = () => setSearchTerm('');
Expand All @@ -73,97 +52,18 @@ function NetworkList({networkSpans, startTimestampMs}: Props) {
})
: null;

useEffect(() => {
let observer: ResizeObserver | null;

if (networkTableRef.current) {
// Observe the network table for width changes
observer = new ResizeObserver(() => {
// Recompute the column widths
multiGridRef.current?.recomputeGridSize({columnIndex: 1});
});

observer.observe(networkTableRef.current);
}

return () => {
observer?.disconnect();
};
}, [networkTableRef, searchTerm]);

const getNetworkColumnValue = (network: NetworkSpan, column: number) => {
const networkStartTimestamp = network.startTimestamp * 1000;
const networkEndTimestamp = network.endTimestamp * 1000;
const statusCode = network.data.statusCode;

const columnProps = {
onMouseEnter: () => handleMouseEnter(network),
onMouseLeave: () => handleMouseLeave(network),
isStatusError: typeof statusCode === 'number' && statusCode >= 400,
isCurrent: network.id === current?.id,
isHovered: network.id === hovered?.id,
hasOccurred:
currentTime >= relativeTimeInMs(networkStartTimestamp, startTimestampMs),
timestampSortDir:
sortConfig.by === 'startTimestamp'
? ((sortConfig.asc ? 'asc' : 'desc') as SortDirection)
: undefined,
};

const columnValues = [
<Item key="statusCode" {...columnProps}>
{statusCode ? statusCode : <EmptyText>---</EmptyText>}
</Item>,
<Item key="description" {...columnProps}>
{network.description ? (
<Tooltip
title={network.description}
isHoverable
overlayStyle={{
maxWidth: '500px !important',
}}
showOnlyOnOverflow
>
<Text>{network.description}</Text>
</Tooltip>
) : (
<EmptyText>({t('No value')})</EmptyText>
)}
</Item>,
<Item key="type" {...columnProps}>
<Tooltip
title={network.op.replace('resource.', '')}
isHoverable
overlayStyle={{
maxWidth: '500px !important',
}}
showOnlyOnOverflow
>
<Text>{network.op.replace('resource.', '')}</Text>
</Tooltip>
</Item>,
<Item key="size" {...columnProps} numeric>
{defined(network.data.size) ? (
<FileSize bytes={network.data.size} />
) : (
<EmptyText>({t('No value')})</EmptyText>
)}
</Item>,
<Item key="duration" {...columnProps} numeric>
{`${(networkEndTimestamp - networkStartTimestamp).toFixed(2)}ms`}
</Item>,
<Item key="timestamp" {...columnProps} numeric>
<TimestampButton
format="mm:ss.SSS"
onClick={() => handleClick(network)}
startTimestampMs={startTimestampMs}
timestampMs={networkStartTimestamp}
/>
</Item>,
];

return columnValues[column];
};
const [scrollBarWidth, setScrollBarWidth] = useState(0);
const gridRef = useRef<MultiGrid>(null);
const tableRef = useRef<HTMLDivElement>(null);
const {cache} = useVirtualizedGrid({
cellMeasurer: {
defaultWidth: 100,
fixedHeight: true,
},
ref: gridRef,
wrapperRef: tableRef,
deps: [items, searchTerm],
});

const renderTableRow = ({columnIndex, rowIndex, key, style, parent}: GridCellProps) => {
const network = items[rowIndex - 1];
Expand All @@ -176,30 +76,40 @@ function NetworkList({networkSpans, startTimestampMs}: Props) {
parent={parent}
rowIndex={rowIndex}
>
<div key={key} style={style}>
{rowIndex === 0 ? (
<NetworkHeaderCell
handleSort={handleSort}
index={columnIndex}
sortConfig={sortConfig}
/>
) : (
getNetworkColumnValue(network, columnIndex)
)}
</div>
{rowIndex === 0 ? (
<NetworkHeaderCell
handleSort={handleSort}
index={columnIndex}
sortConfig={sortConfig}
style={style}
/>
) : (
<NetworkTableCell
columnIndex={columnIndex}
handleClick={handleClick}
handleMouseEnter={handleMouseEnter}
handleMouseLeave={handleMouseLeave}
isCurrent={network.id === current?.id}
isHovered={network.id === hovered?.id}
sortConfig={sortConfig}
span={network}
startTimestampMs={startTimestampMs}
style={style}
/>
)}
</CellMeasurer>
);
};

return (
<NetworkContainer>
<NetworkFilters networkSpans={networkSpans} {...filterProps} />
<NetworkTable ref={networkTableRef}>
<NetworkTable ref={tableRef}>
{networkSpans ? (
<AutoSizer>
{({width, height}) => (
<MultiGrid
ref={multiGridRef}
ref={gridRef}
columnCount={COLUMN_COUNT}
columnWidth={({index}) => {
if (index === 1) {
Expand All @@ -215,21 +125,10 @@ function NetworkList({networkSpans, startTimestampMs}: Props) {

return cache.columnWidth({index});
}}
deferredMeasurementCache={cache}
height={height}
overscanRowCount={5}
cellRenderer={renderTableRow}
rowCount={items.length + 1}
rowHeight={({index}) => (index === 0 ? HEADER_HEIGHT : 28)}
width={width}
deferredMeasurementCache={cache}
fixedRowCount={1}
onScrollbarPresenceChange={({vertical, size}) => {
if (vertical) {
setScrollBarWidth(size);
} else {
setScrollBarWidth(0);
}
}}
height={height}
noContentRenderer={() => (
<NoRowRenderer
unfilteredItems={networkSpans}
Expand All @@ -238,6 +137,14 @@ function NetworkList({networkSpans, startTimestampMs}: Props) {
{t('No network requests recorded')}
</NoRowRenderer>
)}
onScrollbarPresenceChange={({vertical, size}) =>
setScrollBarWidth(vertical ? size : 0)
}
overscanColumnCount={COLUMN_COUNT}
overscanRowCount={5}
rowCount={items.length + 1}
rowHeight={({index}) => (index === 0 ? HEADER_HEIGHT : 28)}
width={width}
/>
)}
</AutoSizer>
Expand All @@ -253,82 +160,12 @@ const NetworkContainer = styled(FluidHeight)`
height: 100%;
`;

const Text = styled('p')`
padding: 0;
margin: 0;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
`;

const EmptyText = styled(Text)`
font-style: italic;
color: ${p => p.theme.subText};
`;

const fontColor = p =>
p.isStatusError
? p.theme.alert.error.iconColor
: p.hasOccurred
? 'inherit'
: p.theme.gray300;

const Item = styled('div')<{
hasOccurred: boolean;
isCurrent: boolean;
isHovered: boolean;
isStatusError: boolean;
timestampSortDir: SortDirection | undefined;
numeric?: boolean;
}>`
display: flex;
align-items: center;
padding: ${space(0.75)} ${space(1.5)};

font-size: ${p => p.theme.fontSizeSmall};
max-height: 28px;
font-variant-numeric: tabular-nums;
${p => (p.numeric ? 'justify-content: flex-end;' : '')};

background-color: ${p =>
p.isStatusError ? p.theme.alert.error.backgroundLight : 'inherit'};

border-bottom: 1px solid
${p =>
p.timestampSortDir === 'asc'
? p.isCurrent
? p.theme.purple300
: p.isHovered
? p.theme.purple200
: 'transparent'
: 'transparent'};

border-top: 1px solid
${p =>
p.timestampSortDir === 'desc'
? p.isCurrent
? p.theme.purple300
: p.isHovered
? p.theme.purple200
: 'transparent'
: 'transparent'};

color: ${fontColor};

${EmptyText} {
color: ${fontColor};
}
`;

const NetworkTable = styled('div')`
list-style: none;
position: relative;
height: 100%;
overflow: hidden;
border: 1px solid ${p => p.theme.border};
border-radius: ${p => p.theme.borderRadius};
padding-left: 0;
margin-bottom: 0;
`;

export default NetworkList;
Loading