104 lines
2.6 KiB
TypeScript
104 lines
2.6 KiB
TypeScript
import { percentOf } from 'App/utils';
|
|
import styles from './barRow.module.css';
|
|
import tableStyles from './timeTable.module.css';
|
|
import React from 'react';
|
|
|
|
const formatTime = (time) => (time < 1000 ? `${time.toFixed(2)}ms` : `${time / 1000}s`);
|
|
|
|
interface Props {
|
|
resource: {
|
|
time: number;
|
|
ttfb?: number;
|
|
duration?: number;
|
|
key: string;
|
|
};
|
|
popup?: boolean;
|
|
timestart: number;
|
|
timewidth: number;
|
|
}
|
|
|
|
// TODO: If request has no duration, set duration to 0.2s. Enforce existence of duration in the future.
|
|
const BarRow = ({
|
|
resource: { time, ttfb = 0, duration = 200, key },
|
|
popup = false,
|
|
timestart = 0,
|
|
timewidth,
|
|
}: 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}
|
|
style={{
|
|
left: `${percentOf(timeOffset, timewidth)}%`,
|
|
right: `${100 - percentOf(timeOffset + duration, timewidth)}%`,
|
|
minWidth: '5px',
|
|
}}
|
|
>
|
|
<div
|
|
className={styles.ttfbBar}
|
|
style={{
|
|
width: `${percentOf(ttfb, duration)}%`,
|
|
}}
|
|
/>
|
|
<div
|
|
className={styles.downloadBar}
|
|
style={{
|
|
width: `${percentOf(duration - ttfb, duration)}%`,
|
|
minWidth: '5px',
|
|
}}
|
|
/>
|
|
</div>
|
|
);
|
|
if (!popup)
|
|
return (
|
|
<div key={key} className={tableStyles.row}>
|
|
{' '}
|
|
{trigger}{' '}
|
|
</div>
|
|
);
|
|
|
|
return (
|
|
<div key={key} className={tableStyles.row} style={{ height: '15px' }}>
|
|
{trigger}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
BarRow.displayName = 'BarRow';
|
|
|
|
export default BarRow;
|