jan/openreplay
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat ui: add timestamps to devtools rows

Browse source
This commit is contained in:
nick-delirium 2024-07-01 14:30:31 +02:00
parent 2d154200a0
commit 1b827071ec
No known key found for this signature in database
GPG key ID: 93ABD695DF5FDBA0
4 changed files with 14 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
frontend/app/components/shared/DevTools/ConsoleRow/ConsoleRow.tsx
View file

@ -65,7 +65,7 @@ function ConsoleRow(props: Props) {
</div>
))}
</div>
<JumpButton onClick={() => jump(log.time)} />
<JumpButton time={log.time} onClick={() => jump(log.time)} />
</div>
);
}

7
frontend/app/components/shared/DevTools/JumpButton/JumpButton.tsx
View file

@ -1,8 +1,10 @@
import React from 'react';
import { Icon, Tooltip } from 'UI';
import { shortDurationFromMs } from "App/date";
interface Props {
onClick: any;
time?: number;
tooltip?: string;
}
function JumpButton(props: Props) {
@ -11,7 +13,7 @@ function JumpButton(props: Props) {
<div className="absolute right-2 top-0 bottom-0 my-auto flex items-center">
<Tooltip title={tooltip} disabled={!tooltip}>
<div
className="mr-2 border cursor-pointer invisible group-hover:visible rounded bg-white text-xs flex items-center px-2 py-1 color-teal hover:shadow h-6"
className="mr-2 border cursor-pointer hidden group-hover:flex rounded bg-white text-xs items-center px-2 py-1 color-teal hover:shadow h-6"
onClick={(e: any) => {
e.stopPropagation();
props.onClick();
@ -20,6 +22,9 @@ function JumpButton(props: Props) {
<Icon name="caret-right-fill" size="12" color="teal" />
<span>JUMP</span>
</div>
{props.time ? <div className={'block group-hover:hidden mr-2'}>
{shortDurationFromMs(props.time)}
</div> : null}
</Tooltip>
</div>
);

2
frontend/app/components/shared/DevTools/StackEventRow/StackEventRow.tsx
View file

@ -44,7 +44,7 @@ function StackEventRow(props: Props) {
<div className='code-font text-xs'>{message}</div>
</div>
</div>
<JumpButton onClick={onJump} />
<JumpButton time={event.time} onClick={onJump} />
</div>
);
}

6
frontend/app/date.ts
View file

@ -44,6 +44,12 @@ export function durationFromMsFormatted(ms: number): string {
return durationFormatted(Duration.fromMillis(ms || 0));
}
export function shortDurationFromMs(ms: number): string {
const dur = Duration.fromMillis(ms)
return dur.toFormat(`mm:ss`)
}
export function durationFromMs(ms: number, isFull?: boolean): string {
const dur = Duration.fromMillis(ms)