fix(ui) - dev tools - fetch name col width and tooltip issue
This commit is contained in:
Shekar Siri
parent
7b344c29cd
commit
c028b8eba7
4 changed files with 135 additions and 128 deletions
|
|
@ -160,7 +160,7 @@ export default class Fetch extends React.PureComponent {
|
|||
width: 60,
|
||||
}, {
|
||||
label: "Name",
|
||||
width: 180,
|
||||
width: 240,
|
||||
render: renderName,
|
||||
},
|
||||
{
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import React from 'react';
|
||||
import cn from 'classnames';
|
||||
import { connectPlayer, jump, pause } from 'Player';
|
||||
import { Popup } from 'UI';
|
||||
import { Popup, Button, TextEllipsis } from 'UI';
|
||||
import { getRE } from 'App/utils';
|
||||
import { TYPES } from 'Types/session/resource';
|
||||
import stl from './network.module.css';
|
||||
|
|
@ -18,138 +18,142 @@ const MEDIA = 'media';
|
|||
const OTHER = 'other';
|
||||
|
||||
const TAB_TO_TYPE_MAP = {
|
||||
[ XHR ]: TYPES.XHR,
|
||||
[ JS ]: TYPES.JS,
|
||||
[ CSS ]: TYPES.CSS,
|
||||
[ IMG ]: TYPES.IMG,
|
||||
[ MEDIA ]: TYPES.MEDIA,
|
||||
[ OTHER ]: TYPES.OTHER
|
||||
}
|
||||
[XHR]: TYPES.XHR,
|
||||
[JS]: TYPES.JS,
|
||||
[CSS]: TYPES.CSS,
|
||||
[IMG]: TYPES.IMG,
|
||||
[MEDIA]: TYPES.MEDIA,
|
||||
[OTHER]: TYPES.OTHER,
|
||||
};
|
||||
|
||||
export function renderName(r) {
|
||||
return (
|
||||
<div className="flex w-full relative items-center">
|
||||
<Popup content={ <div className={ stl.popupNameContent }>{ r.url }</div> } >
|
||||
<div className={ stl.popupNameTrigger }>{ r.name }</div>
|
||||
</Popup>
|
||||
<div
|
||||
className="absolute right-0 text-xs uppercase p-2 color-gray-500 hover:color-black"
|
||||
onClick={ (e) => {
|
||||
e.stopPropagation();
|
||||
jump(r.time)
|
||||
}}
|
||||
>Jump</div>
|
||||
</div>
|
||||
);
|
||||
export function renderName(r) {
|
||||
return (
|
||||
<div className="flex justify-between items-center grow-0 w-full">
|
||||
<Popup style={{ maxWidth: '75%' }} content={<div className={stl.popupNameContent}>{r.url}</div>}>
|
||||
<TextEllipsis>{r.name}</TextEllipsis>
|
||||
</Popup>
|
||||
<Button
|
||||
variant="text"
|
||||
className="right-0 text-xs uppercase p-2 color-gray-500 hover:color-teal"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
jump(r.time);
|
||||
}}
|
||||
>
|
||||
Jump
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function renderDuration(r) {
|
||||
if (!r.success) return 'x';
|
||||
if (!r.success) return 'x';
|
||||
|
||||
const text = `${ Math.round(r.duration) }ms`;
|
||||
if (!r.isRed() && !r.isYellow()) return text;
|
||||
const text = `${Math.round(r.duration)}ms`;
|
||||
if (!r.isRed() && !r.isYellow()) return text;
|
||||
|
||||
let tooltipText;
|
||||
let className = "w-full h-full flex items-center ";
|
||||
if (r.isYellow()) {
|
||||
tooltipText = "Slower than average";
|
||||
className += "warn color-orange";
|
||||
} else {
|
||||
tooltipText = "Much slower than average";
|
||||
className += "error color-red";
|
||||
}
|
||||
|
||||
return (
|
||||
<Popup content={ tooltipText } >
|
||||
<div className={ cn(className, stl.duration) } > { text } </div>
|
||||
</Popup>
|
||||
);
|
||||
}
|
||||
|
||||
@connectPlayer(state => ({
|
||||
location: state.location,
|
||||
resources: state.resourceList,
|
||||
domContentLoadedTime: state.domContentLoadedTime,
|
||||
loadTime: state.loadTime,
|
||||
// time: state.time,
|
||||
playing: state.playing,
|
||||
domBuildingTime: state.domBuildingTime,
|
||||
fetchPresented: state.fetchList.length > 0,
|
||||
}))
|
||||
@connect(state => ({
|
||||
timelinePointer: state.getIn(['sessions', 'timelinePointer']),
|
||||
}), { setTimelinePointer })
|
||||
export default class Network extends React.PureComponent {
|
||||
state = {
|
||||
filter: '',
|
||||
filteredList: this.props.resources,
|
||||
activeTab: ALL,
|
||||
currentIndex: 0
|
||||
}
|
||||
|
||||
onRowClick = (e, index) => {
|
||||
pause();
|
||||
jump(e.time);
|
||||
this.setState({ currentIndex: index })
|
||||
this.props.setTimelinePointer(null);
|
||||
}
|
||||
|
||||
onTabClick = activeTab => this.setState({ activeTab })
|
||||
|
||||
onFilterChange = (e, { value }) => {
|
||||
const { resources } = this.props;
|
||||
const filterRE = getRE(value, 'i');
|
||||
const filtered = resources.filter(({ type, name }) =>
|
||||
filterRE.test(name) && (activeTab === ALL || type === TAB_TO_TYPE_MAP[ activeTab ]));
|
||||
|
||||
this.setState({ filter: value, filteredList: value ? filtered : resources, currentIndex: 0 });
|
||||
}
|
||||
|
||||
static getDerivedStateFromProps(nextProps, prevState) {
|
||||
const { filteredList } = prevState;
|
||||
if (nextProps.timelinePointer) {
|
||||
const activeItem = filteredList.find((r) => r.time >= nextProps.timelinePointer.time);
|
||||
return {
|
||||
currentIndex: activeItem ? filteredList.indexOf(activeItem) : filteredList.length - 1,
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
const {
|
||||
location,
|
||||
resources,
|
||||
domContentLoadedTime,
|
||||
loadTime,
|
||||
domBuildingTime,
|
||||
fetchPresented,
|
||||
// time,
|
||||
playing
|
||||
} = this.props;
|
||||
const { filter, activeTab, currentIndex, filteredList } = this.state;
|
||||
// const filterRE = getRE(filter, 'i');
|
||||
// let filtered = resources.filter(({ type, name }) =>
|
||||
// filterRE.test(name) && (activeTab === ALL || type === TAB_TO_TYPE_MAP[ activeTab ]));
|
||||
const resourcesSize = filteredList.reduce((sum, { decodedBodySize }) => sum + (decodedBodySize || 0), 0);
|
||||
const transferredSize = filteredList
|
||||
.reduce((sum, { headerSize, encodedBodySize }) => sum + (headerSize || 0) + (encodedBodySize || 0), 0);
|
||||
let tooltipText;
|
||||
let className = 'w-full h-full flex items-center ';
|
||||
if (r.isYellow()) {
|
||||
tooltipText = 'Slower than average';
|
||||
className += 'warn color-orange';
|
||||
} else {
|
||||
tooltipText = 'Much slower than average';
|
||||
className += 'error color-red';
|
||||
}
|
||||
|
||||
return (
|
||||
<React.Fragment>
|
||||
<NetworkContent
|
||||
// time = { time }
|
||||
location = { location }
|
||||
resources = { filteredList }
|
||||
domContentLoadedTime = { domContentLoadedTime }
|
||||
loadTime = { loadTime }
|
||||
domBuildingTime = { domBuildingTime }
|
||||
fetchPresented = { fetchPresented }
|
||||
resourcesSize={resourcesSize}
|
||||
transferredSize={transferredSize}
|
||||
onRowClick={ this.onRowClick }
|
||||
currentIndex={currentIndex}
|
||||
/>
|
||||
</React.Fragment>
|
||||
<Popup content={tooltipText}>
|
||||
<div className={cn(className, stl.duration)}> {text} </div>
|
||||
</Popup>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@connectPlayer((state) => ({
|
||||
location: state.location,
|
||||
resources: state.resourceList,
|
||||
domContentLoadedTime: state.domContentLoadedTime,
|
||||
loadTime: state.loadTime,
|
||||
// time: state.time,
|
||||
playing: state.playing,
|
||||
domBuildingTime: state.domBuildingTime,
|
||||
fetchPresented: state.fetchList.length > 0,
|
||||
}))
|
||||
@connect(
|
||||
(state) => ({
|
||||
timelinePointer: state.getIn(['sessions', 'timelinePointer']),
|
||||
}),
|
||||
{ setTimelinePointer }
|
||||
)
|
||||
export default class Network extends React.PureComponent {
|
||||
state = {
|
||||
filter: '',
|
||||
filteredList: this.props.resources,
|
||||
activeTab: ALL,
|
||||
currentIndex: 0,
|
||||
};
|
||||
|
||||
onRowClick = (e, index) => {
|
||||
pause();
|
||||
jump(e.time);
|
||||
this.setState({ currentIndex: index });
|
||||
this.props.setTimelinePointer(null);
|
||||
};
|
||||
|
||||
onTabClick = (activeTab) => this.setState({ activeTab });
|
||||
|
||||
onFilterChange = (e, { value }) => {
|
||||
const { resources } = this.props;
|
||||
const filterRE = getRE(value, 'i');
|
||||
const filtered = resources.filter(({ type, name }) => filterRE.test(name) && (activeTab === ALL || type === TAB_TO_TYPE_MAP[activeTab]));
|
||||
|
||||
this.setState({ filter: value, filteredList: value ? filtered : resources, currentIndex: 0 });
|
||||
};
|
||||
|
||||
static getDerivedStateFromProps(nextProps, prevState) {
|
||||
const { filteredList } = prevState;
|
||||
if (nextProps.timelinePointer) {
|
||||
const activeItem = filteredList.find((r) => r.time >= nextProps.timelinePointer.time);
|
||||
return {
|
||||
currentIndex: activeItem ? filteredList.indexOf(activeItem) : filteredList.length - 1,
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
const {
|
||||
location,
|
||||
resources,
|
||||
domContentLoadedTime,
|
||||
loadTime,
|
||||
domBuildingTime,
|
||||
fetchPresented,
|
||||
// time,
|
||||
playing,
|
||||
} = this.props;
|
||||
const { filter, activeTab, currentIndex, filteredList } = this.state;
|
||||
// const filterRE = getRE(filter, 'i');
|
||||
// let filtered = resources.filter(({ type, name }) =>
|
||||
// filterRE.test(name) && (activeTab === ALL || type === TAB_TO_TYPE_MAP[ activeTab ]));
|
||||
const resourcesSize = filteredList.reduce((sum, { decodedBodySize }) => sum + (decodedBodySize || 0), 0);
|
||||
const transferredSize = filteredList.reduce((sum, { headerSize, encodedBodySize }) => sum + (headerSize || 0) + (encodedBodySize || 0), 0);
|
||||
|
||||
return (
|
||||
<React.Fragment>
|
||||
<NetworkContent
|
||||
// time = { time }
|
||||
location={location}
|
||||
resources={filteredList}
|
||||
domContentLoadedTime={domContentLoadedTime}
|
||||
loadTime={loadTime}
|
||||
domBuildingTime={domBuildingTime}
|
||||
fetchPresented={fetchPresented}
|
||||
resourcesSize={resourcesSize}
|
||||
transferredSize={transferredSize}
|
||||
onRowClick={this.onRowClick}
|
||||
currentIndex={currentIndex}
|
||||
/>
|
||||
</React.Fragment>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@ export default (props: Props) => {
|
|||
const {
|
||||
icon = '',
|
||||
className = '',
|
||||
variant = 'default',
|
||||
variant = 'default', // 'default|primary|text|text-primary|text-red|outline',
|
||||
type = 'button',
|
||||
size = '',
|
||||
disabled = false,
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@ interface Props {
|
|||
disabled?: boolean
|
||||
arrow?: boolean
|
||||
open?: boolean
|
||||
style?: any
|
||||
[x:string]: any;
|
||||
}
|
||||
export default ({
|
||||
|
|
@ -22,6 +23,7 @@ export default ({
|
|||
disabled = false,
|
||||
arrow = true,
|
||||
theme = 'dark',
|
||||
style = {},
|
||||
...props
|
||||
}: Props) => (
|
||||
<Tooltip
|
||||
|
|
@ -35,6 +37,7 @@ export default ({
|
|||
hideOnClick={true}
|
||||
hideOnScroll={true}
|
||||
theme={theme}
|
||||
style={style}
|
||||
>
|
||||
{ props.children }
|
||||
</Tooltip>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue