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