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

Cleaned up callTab React code

Browse source
This commit is contained in:
Adam Gastineau 2024-12-09 12:15:53 -08:00
parent d13736d17e
commit ef78bc69bb
1 changed files with 32 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

57
packages/trace-viewer/src/ui/callTab.tsx
View file

@ -31,12 +31,11 @@ export const CallTab: React.FunctionComponent<{
executionStartWallTime: number,
sdkLanguage: Language | undefined,
}> = ({ action, executionStartTime, executionStartWallTime, sdkLanguage }) => {
// We never need the waitForEventInfo (`info`).
const paramKeys = React.useMemo(() => Object.keys(action?.params ?? {}).filter(name => name !== 'info'), [action]);
if (!action)
return <PlaceholderPanel text='No action selected' />;
const params = { ...action.params };
// Strip down the waitForEventInfo data, we never need it.
delete params.info;
const paramKeys = Object.keys(params);
const startTimeMillis = action.startTime - executionStartTime;
const startTime = msToString(startTimeMillis);
@ -46,25 +45,33 @@ export const CallTab: React.FunctionComponent<{
const duration = action.endTime ? msToString(action.endTime - action.startTime) : 'Timed Out';
return <div className='call-tab'>
<div className='call-line'>{action.apiName}</div>
{<>
<div className='call-section'>Time</div>
{wallTime && <DateTimeCallLine name='wall time:' value={wallTime}/>}
<DateTimeCallLine name='start:' value={startTime}/>
<DateTimeCallLine name='duration:' value={duration}/>
</>}
{ !!paramKeys.length && <div className='call-section'>Parameters</div> }
{
!!paramKeys.length && paramKeys.map((name, index) => renderProperty(propertyToString(action, name, params[name], sdkLanguage), 'param-' + index))
}
{ !!action.result && <div className='call-section'>Return value</div> }
{
!!action.result && Object.keys(action.result).map((name, index) =>
renderProperty(propertyToString(action, name, action.result[name], sdkLanguage), 'result-' + index)
)
}
</div>;
return (
<div className='call-tab'>
<div className='call-line'>{action.apiName}</div>
{
<>
<div className='call-section'>Time</div>
{wallTime && <DateTimeCallLine name='wall time:' value={wallTime}/>}
<DateTimeCallLine name='start:' value={startTime}/>
<DateTimeCallLine name='duration:' value={duration}/>
</>
}
{
!!paramKeys.length && <>
<div className='call-section'>Parameters</div>
{paramKeys.map(name => renderProperty(propertyToString(action, name, action.params[name], sdkLanguage)))}
</>
}
{
!!action.result && <>
<div className='call-section'>Return value</div>
{Object.keys(action.result).map(name =>
renderProperty(propertyToString(action, name, action.result[name], sdkLanguage))
)}
</>
}
</div>
);
};
const DateTimeCallLine: React.FC<{ name: string, value: string }> = ({ name, value }) => <div className='call-line'>{name}<span className='call-value datetime' title={value}>{value}</span></div>;
@ -75,12 +82,12 @@ type Property = {
text: string;
};
function renderProperty(property: Property, key: string) {
function renderProperty(property: Property) {
let text = property.text.replace(/\n/g, '↵');
if (property.type === 'string')
text = `"${text}"`;
return (
<div key={key} className='call-line'>
<div key={property.name} className='call-line'>
{property.name}:<span className={clsx('call-value', property.type)} title={property.text}>{text}</span>
{ ['string', 'number', 'object', 'locator'].includes(property.type) &&
<CopyToClipboard value={property.text} />