Filip/playwright
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Address comments

Browse source
This commit is contained in:
Yury Semikhatsky 2024-05-15 11:34:03 -07:00
parent 0b6ac63202
commit 6dea011c02
1 changed files with 13 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

35
packages/trace-viewer/src/ui/networkTab.tsx
View file

@ -24,9 +24,11 @@ import { PlaceholderPanel } from './placeholderPanel';
import { context, type MultiTraceModel } from './modelUtil'; import { context, type MultiTraceModel } from './modelUtil';
import { GridView, type RenderedGridCell } from '@web/components/gridView'; import { GridView, type RenderedGridCell } from '@web/components/gridView';
import { SplitView } from '@web/components/splitView'; import { SplitView } from '@web/components/splitView';
import type { ContextEntry } from '../entries';
type NetworkTabModel = { type NetworkTabModel = {
resources: Entry[], resources: Entry[],
contextIdMap: ContextIdMap,
}; };
type RenderedEntry = { type RenderedEntry = {
@ -55,25 +57,24 @@ export function useNetworkTabModel(model: MultiTraceModel | undefined, selectedT
}); });
return filtered; return filtered;
}, [model, selectedTime]); }, [model, selectedTime]);
return { resources }; const contextIdMap = React.useMemo(() => new ContextIdMap(model), [model]);
return { resources, contextIdMap };
} }
export const NetworkTab: React.FunctionComponent<{ export const NetworkTab: React.FunctionComponent<{
boundaries: Boundaries, boundaries: Boundaries,
networkModel: NetworkTabModel, networkModel: NetworkTabModel,
model?: MultiTraceModel,
onEntryHovered: (entry: Entry | undefined) => void, onEntryHovered: (entry: Entry | undefined) => void,
}> = ({ boundaries, networkModel, model, onEntryHovered }) => { }> = ({ boundaries, networkModel, onEntryHovered }) => {
const [sorting, setSorting] = React.useState<Sorting | undefined>(undefined); const [sorting, setSorting] = React.useState<Sorting | undefined>(undefined);
const [selectedEntry, setSelectedEntry] = React.useState<RenderedEntry | undefined>(undefined); const [selectedEntry, setSelectedEntry] = React.useState<RenderedEntry | undefined>(undefined);
const { renderedEntries } = React.useMemo(() => { const { renderedEntries } = React.useMemo(() => {
const generator = ContextIdGenerator.forModel(model); const renderedEntries = networkModel.resources.map(entry => renderEntry(entry, boundaries, networkModel.contextIdMap));
const renderedEntries = networkModel.resources.map(entry => renderEntry(entry, boundaries, generator));
if (sorting) if (sorting)
sort(renderedEntries, sorting); sort(renderedEntries, sorting);
return { renderedEntries }; return { renderedEntries };
}, [networkModel.resources, sorting, boundaries, model]); }, [networkModel.resources, networkModel.contextIdMap, sorting, boundaries]);
if (!networkModel.resources.length) if (!networkModel.resources.length)
return <PlaceholderPanel text='No network calls' />; return <PlaceholderPanel text='No network calls' />;
@ -182,23 +183,13 @@ const renderCell = (entry: RenderedEntry, column: ColumnName): RenderedGridCell
return { body: '' }; return { body: '' };
}; };
class ContextIdGenerator { class ContextIdMap {
private _pagerefToShortId = new Map<string, string>(); private _pagerefToShortId = new Map<string, string>();
private _contextToId = new Map<ContextEntry, string>();
private _lastPageId = 0; private _lastPageId = 0;
private _lastApiRequestContextId = 0; private _lastApiRequestContextId = 0;
private static _apiRequestContextIdSymbol = Symbol('apiRequestContextId');
private static _contextIdGeneratorSymbol = Symbol('contextIdGenerator');
static forModel(model?: MultiTraceModel): ContextIdGenerator { constructor(model: MultiTraceModel | undefined) {}
if (!model)
return new ContextIdGenerator();
let generator = (model as any)[ContextIdGenerator._contextIdGeneratorSymbol];
if (!generator) {
generator = new ContextIdGenerator();
(model as any)[ContextIdGenerator._contextIdGeneratorSymbol] = generator;
}
return generator;
}
contextId(resource: Entry): string { contextId(resource: Entry): string {
if (resource.pageref) if (resource.pageref)
@ -222,11 +213,11 @@ class ContextIdGenerator {
const contextEntry = context(resource); const contextEntry = context(resource);
if (!contextEntry) if (!contextEntry)
return ''; return '';
let contextId = (contextEntry as any)[ContextIdGenerator._apiRequestContextIdSymbol]; let contextId = this._contextToId.get(contextEntry);
if (!contextId) { if (!contextId) {
++this._lastApiRequestContextId; ++this._lastApiRequestContextId;
contextId = 'api#' + this._lastApiRequestContextId; contextId = 'api#' + this._lastApiRequestContextId;
(contextEntry as any)[ContextIdGenerator._apiRequestContextIdSymbol] = contextId; this._contextToId.set(contextEntry, contextId);
} }
return contextId; return contextId;
} }
@ -242,7 +233,7 @@ function hasMultipleContexts(renderedEntries: RenderedEntry[]): boolean {
return false; return false;
} }
const renderEntry = (resource: Entry, boundaries: Boundaries, contextIdGenerator: ContextIdGenerator): RenderedEntry => { const renderEntry = (resource: Entry, boundaries: Boundaries, contextIdGenerator: ContextIdMap): RenderedEntry => {
const routeStatus = formatRouteStatus(resource); const routeStatus = formatRouteStatus(resource);
let resourceName: string; let resourceName: string;
try { try {