Tweak response history

This commit is contained in:
Gregory Schier
2023-04-09 23:15:51 -07:00
parent 6bc1f9f494
commit b28dc01e6b
2 changed files with 22 additions and 7 deletions

View File

@@ -111,11 +111,21 @@ export const ResponsePane = memo(function ResponsePane({ style, className }: Pro
{activeResponse && ( {activeResponse && (
<HStack alignItems="center" className="w-full"> <HStack alignItems="center" className="w-full">
<div className="whitespace-nowrap px-3"> <div className="whitespace-nowrap px-3">
<StatusTag showReason response={activeResponse} /> <HStack space={2}>
{activeResponse.elapsed > 0 && <>&nbsp;&bull;&nbsp;{activeResponse.elapsed}ms</>} <StatusTag showReason response={activeResponse} />
{activeResponse.body.length > 0 && ( {activeResponse.elapsed > 0 && (
<>&nbsp;&bull;&nbsp;{(activeResponse.body.length / 1000).toFixed(1)} KB</> <>
)} <span>&bull;</span>
<span>{activeResponse.elapsed}ms</span>
</>
)}
{activeResponse.body.length > 0 && (
<>
<span>&bull;</span>
<span>{(activeResponse.body.length / 1000).toFixed(1)} KB</span>
</>
)}
</HStack>
</div> </div>
<Dropdown <Dropdown
@@ -133,7 +143,12 @@ export const ResponsePane = memo(function ResponsePane({ style, className }: Pro
}, },
{ type: 'separator', label: 'History' }, { type: 'separator', label: 'History' },
...responses.slice(0, 10).map((r) => ({ ...responses.slice(0, 10).map((r) => ({
label: r.status + ' - ' + r.elapsed + ' ms', label: (
<HStack space={2}>
<StatusTag className="text-xs" response={r} />
<span>&bull;</span> <span>{r.elapsed}ms</span>
</HStack>
),
leftSlot: activeResponse?.id === r.id ? <Icon icon="check" /> : <></>, leftSlot: activeResponse?.id === r.id ? <Icon icon="check" /> : <></>,
onSelect: () => setPinnedResponseId(r.id), onSelect: () => setPinnedResponseId(r.id),
})), })),

View File

@@ -26,7 +26,7 @@ export type DropdownItemSeparator = {
export type DropdownItem = export type DropdownItem =
| { | {
type?: 'default'; type?: 'default';
label: string; label: ReactNode;
variant?: 'danger'; variant?: 'danger';
disabled?: boolean; disabled?: boolean;
hidden?: boolean; hidden?: boolean;