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

fix(ui) - network timeline

Browse source
This commit is contained in:
Shekar Siri 2022-11-16 13:35:11 +01:00
parent 8971c4063c
commit c3f9871e23
1 changed files with 36 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

74
frontend/app/components/shared/DevTools/TimeTable/BarRow.tsx
View file

@ -27,6 +27,40 @@ const BarRow = ({
}: Props) => {
const timeOffset = time - timestart;
ttfb = ttfb || 0;
// TODO fix the tooltip
const content = (
<React.Fragment>
{ttfb != null && (
<div className={styles.popupRow}>
<div className={styles.title}>{'Waiting (TTFB)'}</div>
<div className={styles.popupBarWrapper}>
<div
className={styles.ttfbBar}
style={{
left: 0,
width: `${percentOf(ttfb, duration)}%`,
}}
/>
</div>
<div className={styles.time}>{formatTime(ttfb)}</div>
</div>
)}
<div className={styles.popupRow}>
<div className={styles.title}>{'Content Download'}</div>
<div className={styles.popupBarWrapper}>
<div
className={styles.downloadBar}
style={{
left: `${percentOf(ttfb, duration)}%`,
width: `${percentOf(duration - ttfb, duration)}%`,
}}
/>
</div>
<div className={styles.time}>{formatTime(duration - ttfb)}</div>
</div>
</React.Fragment>
);
const trigger = (
<div
className={styles.barWrapper}
@ -60,44 +94,8 @@ const BarRow = ({
);
return (
<div key={key} className={tableStyles.row}>
<Tooltip
title={
<React.Fragment>
{ttfb != null && (
<div className={styles.popupRow}>
<div className={styles.title}>{'Waiting (TTFB)'}</div>
<div className={styles.popupBarWrapper}>
<div
className={styles.ttfbBar}
style={{
left: 0,
width: `${percentOf(ttfb, duration)}%`,
}}
/>
</div>
<div className={styles.time}>{formatTime(ttfb)}</div>
</div>
)}
<div className={styles.popupRow}>
<div className={styles.title}>{'Content Download'}</div>
<div className={styles.popupBarWrapper}>
<div
className={styles.downloadBar}
style={{
left: `${percentOf(ttfb, duration)}%`,
width: `${percentOf(duration - ttfb, duration)}%`,
}}
/>
</div>
<div className={styles.time}>{formatTime(duration - ttfb)}</div>
</div>
</React.Fragment>
}
placement="top"
>
{trigger}
</Tooltip>
<div key={key} className={tableStyles.row} style={{ height: '15px' }}>
{trigger}
</div>
);
};