change(ui) - merge fetch calls with network
This commit is contained in:
Shekar Siri
parent
a6227c7265
commit
c2e295e738
3 changed files with 77 additions and 41 deletions
|
|
@ -40,6 +40,12 @@ const TABS: any = [ALL, XHR, JS, CSS, IMG, MEDIA, OTHER].map((tab) => ({
|
|||
const DOM_LOADED_TIME_COLOR = 'teal';
|
||||
const LOAD_TIME_COLOR = 'red';
|
||||
|
||||
function compare(a: any, b: any, key: string) {
|
||||
if (a[key] > b[key]) return 1;
|
||||
if (a[key] < b[key]) return -1;
|
||||
return 0;
|
||||
}
|
||||
|
||||
export function renderType(r) {
|
||||
return (
|
||||
<Popup style={{ width: '100%' }} content={<div>{r.type}</div>}>
|
||||
|
|
@ -153,13 +159,11 @@ export function renderDuration(r: any) {
|
|||
interface Props {
|
||||
location: any;
|
||||
resources: any;
|
||||
fetchList: any;
|
||||
domContentLoadedTime: any;
|
||||
loadTime: any;
|
||||
playing: boolean;
|
||||
domBuildingTime: any;
|
||||
fetchPresented: boolean;
|
||||
listNow: any;
|
||||
|
||||
currentIndex: any;
|
||||
time: any;
|
||||
}
|
||||
|
|
@ -172,16 +176,17 @@ function NetworkPanel(props: Props) {
|
|||
loadTime,
|
||||
playing,
|
||||
domBuildingTime,
|
||||
fetchPresented,
|
||||
listNow,
|
||||
fetchList,
|
||||
} = props;
|
||||
const { showModal, hideModal } = useModal();
|
||||
const [activeTab, setActiveTab] = useState(ALL);
|
||||
const [sortBy, setSortBy] = useState('time');
|
||||
const [filter, setFilter] = useState('');
|
||||
const [showOnlyErrors, setShowOnlyErrors] = useState(false);
|
||||
const onTabClick = (activeTab: any) => setActiveTab(activeTab);
|
||||
const onFilterChange = ({ target: { value } }: any) => setFilter(value);
|
||||
const additionalHeight = 0;
|
||||
const fetchPresented = fetchList.length > 0;
|
||||
|
||||
const resourcesSize = resources.reduce(
|
||||
(sum: any, { decodedBodySize }: any) => sum + (decodedBodySize || 0),
|
||||
|
|
@ -195,11 +200,23 @@ function NetworkPanel(props: Props) {
|
|||
);
|
||||
|
||||
const filterRE = getRE(filter, 'i');
|
||||
let filtered = resources.filter(
|
||||
({ type, name }: any) =>
|
||||
filterRE.test(name) && (activeTab === ALL || type === TAB_TO_TYPE_MAP[activeTab])
|
||||
let filtered = resources;
|
||||
fetchList.forEach(
|
||||
(fetchCall: any) => filtered = filtered.filter((networkCall: any) => networkCall.url !== fetchCall.url)
|
||||
);
|
||||
const lastIndex = currentIndex || filtered.filter((item: any) => item.time <= time).length - 1;
|
||||
filtered = filtered.concat(fetchList);
|
||||
filtered = filtered.sort((a: any, b: any) => {
|
||||
return compare(a, b, sortBy);
|
||||
});
|
||||
|
||||
filtered = filtered.filter(
|
||||
({ type, name, status }: any) =>
|
||||
(!!filter ? filterRE.test(status) || filterRE.test(name) || filterRE.test(type) : true) &&
|
||||
(activeTab === ALL || type === TAB_TO_TYPE_MAP[activeTab]) &&
|
||||
(showOnlyErrors ? parseInt(status) >= 400 : true)
|
||||
);
|
||||
|
||||
// const lastIndex = currentIndex || filtered.filter((item: any) => item.time <= time).length - 1;
|
||||
const referenceLines = [];
|
||||
if (domContentLoadedTime != null) {
|
||||
referenceLines.push({
|
||||
|
|
@ -215,8 +232,8 @@ function NetworkPanel(props: Props) {
|
|||
}
|
||||
|
||||
const onRowClick = (row: any) => {
|
||||
showModal(<FetchDetailsModal resource={row} />, { right: true })
|
||||
}
|
||||
showModal(<FetchDetailsModal resource={row} fetchPresented={fetchPresented} />, { right: true });
|
||||
};
|
||||
|
||||
return (
|
||||
<React.Fragment>
|
||||
|
|
@ -234,18 +251,24 @@ function NetworkPanel(props: Props) {
|
|||
</div>
|
||||
<Input
|
||||
className="input-small"
|
||||
placeholder="Filter by name"
|
||||
placeholder="Filter by name, type or value"
|
||||
icon="search"
|
||||
iconPosition="left"
|
||||
name="filter"
|
||||
onChange={onFilterChange}
|
||||
height={28}
|
||||
width={230}
|
||||
/>
|
||||
</BottomBlock.Header>
|
||||
<BottomBlock.Content>
|
||||
<div className="flex items-center justify-between px-4">
|
||||
<div>
|
||||
<Toggler checked={showOnlyErrors} name="test" onChange={() => setShowOnlyErrors(!showOnlyErrors)} label="4xx-5xx Only" />
|
||||
<Toggler
|
||||
checked={showOnlyErrors}
|
||||
name="test"
|
||||
onChange={() => setShowOnlyErrors(!showOnlyErrors)}
|
||||
label="4xx-5xx Only"
|
||||
/>
|
||||
</div>
|
||||
<InfoLine>
|
||||
<InfoLine.Point label={filtered.length} value=" requests" />
|
||||
|
|
@ -295,7 +318,7 @@ function NetworkPanel(props: Props) {
|
|||
// navigation
|
||||
onRowClick={onRowClick}
|
||||
additionalHeight={additionalHeight}
|
||||
activeIndex={lastIndex}
|
||||
// activeIndex={lastIndex}
|
||||
>
|
||||
{[
|
||||
// {
|
||||
|
|
@ -341,11 +364,10 @@ function NetworkPanel(props: Props) {
|
|||
export default connectPlayer((state: any) => ({
|
||||
location: state.location,
|
||||
resources: state.resourceList,
|
||||
fetchList: state.fetchList,
|
||||
domContentLoadedTime: state.domContentLoadedTime,
|
||||
loadTime: state.loadTime,
|
||||
// time: state.time,
|
||||
playing: state.playing,
|
||||
domBuildingTime: state.domBuildingTime,
|
||||
fetchPresented: state.fetchList.length > 0,
|
||||
listNow: state.resourceListNow,
|
||||
}))(NetworkPanel);
|
||||
|
|
|
|||
|
|
@ -1,9 +1,10 @@
|
|||
import React from 'react';
|
||||
import { JSONTree, NoContent, Button, Tabs } from 'UI';
|
||||
import { JSONTree, NoContent, Button, Tabs, Icon } from 'UI';
|
||||
import cn from 'classnames';
|
||||
import stl from './fetchDetails.module.css';
|
||||
import Headers from './components/Headers';
|
||||
import AnimatedSVG, { ICONS } from 'Shared/AnimatedSVG/AnimatedSVG';
|
||||
import { TYPES } from 'Types/session/resource';
|
||||
|
||||
const HEADERS = 'HEADERS';
|
||||
const REQUEST = 'REQUEST';
|
||||
|
|
@ -128,11 +129,10 @@ export default class FetchDetailsModal extends React.PureComponent {
|
|||
}
|
||||
|
||||
render() {
|
||||
const { resource, nextClick, prevClick, first = false, last = false } = this.props;
|
||||
const { resource, fetchPresented, nextClick, prevClick, first = false, last = false } = this.props;
|
||||
const { method, url, duration } = resource;
|
||||
const { activeTab, tabs } = this.state;
|
||||
const _duration = parseInt(duration);
|
||||
console.log('_duration', resource);
|
||||
|
||||
return (
|
||||
<div className="bg-white p-5 h-screen overflow-y-auto" style={{ width: '500px' }}>
|
||||
|
|
@ -164,7 +164,9 @@ export default class FetchDetailsModal extends React.PureComponent {
|
|||
<div className="flex items-center py-1">
|
||||
<div className="font-medium">Status</div>
|
||||
<div className="rounded bg-active-blue px-2 py-1 ml-2 whitespace-nowrap overflow-hidden text-clip flex items-center">
|
||||
{resource.status === '200' && <div className="w-4 h-4 bg-green rounded-full mr-2"></div>}
|
||||
{resource.status === '200' && (
|
||||
<div className="w-4 h-4 bg-green rounded-full mr-2"></div>
|
||||
)}
|
||||
{resource.status}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -179,29 +181,40 @@ export default class FetchDetailsModal extends React.PureComponent {
|
|||
</div>
|
||||
)}
|
||||
|
||||
{/* <div className={cn(stl.url, 'color-gray-darkest')}>{url}</div> */}
|
||||
<div className="flex items-start mt-4">
|
||||
{/* {method && (
|
||||
<div className="w-4/12">
|
||||
<div className="font-medium mb-2">Method</div>
|
||||
<div>{method}</div>
|
||||
{resource.type === TYPES.XHR && (
|
||||
<div className="bg-active-blue rounded p-3 mt-4">
|
||||
<div className="mb-2 flex items-center">
|
||||
<Icon name="lightbulb" size="18" />
|
||||
<span className="ml-2 font-medium">Get more out of network requests</span>
|
||||
</div>
|
||||
)}
|
||||
{!!_duration && (
|
||||
<div className="w-4/12">
|
||||
<div className="font-medium mb-2">Duration</div>
|
||||
<div>{_duration } ms</div>
|
||||
</div>
|
||||
)} */}
|
||||
</div>
|
||||
<ul className="list-disc ml-5">
|
||||
<li>
|
||||
Integrate{' '}
|
||||
<a href="" className="link">
|
||||
Fetch plugin
|
||||
</a>{' '}
|
||||
to capture fetch payloads.
|
||||
</li>
|
||||
<li>
|
||||
Find a detailed{' '}
|
||||
<a href="" className="link">
|
||||
video tutorial
|
||||
</a>{' '}
|
||||
to understand practical example of how to use fetch plugin.
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="mt-6">
|
||||
<div>
|
||||
<Tabs tabs={tabs} active={activeTab} onClick={this.onTabClick} border={true} />
|
||||
<div style={{ height: 'calc(100vh - 314px)', overflowY: 'auto' }}>
|
||||
{this.renderActiveTab(activeTab)}
|
||||
{resource.type === TYPES.FETCH && (
|
||||
<div>
|
||||
<Tabs tabs={tabs} active={activeTab} onClick={this.onTabClick} border={true} />
|
||||
<div style={{ height: 'calc(100vh - 314px)', overflowY: 'auto' }}>
|
||||
{this.renderActiveTab(activeTab)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* <div className="flex justify-between absolute bottom-0 left-0 right-0 p-3 border-t bg-white">
|
||||
<Button variant="outline" onClick={prevClick} disabled={first}>
|
||||
|
|
|
|||
|
|
@ -10,10 +10,11 @@ interface Props {
|
|||
type?: string;
|
||||
rows?: number;
|
||||
height?: number;
|
||||
width?: number;
|
||||
[x: string]: any;
|
||||
}
|
||||
const Input = React.forwardRef((props: Props, ref: any) => {
|
||||
const { height = 36, className = '', leadingButton = '', wrapperClassName = '', icon = '', type = 'text', rows = 4, ...rest } = props;
|
||||
const { height = 36, width = 0, className = '', leadingButton = '', wrapperClassName = '', icon = '', type = 'text', rows = 4, ...rest } = props;
|
||||
return (
|
||||
<div className={cn({ relative: icon || leadingButton }, wrapperClassName)}>
|
||||
{icon && <Icon name={icon} className="absolute top-0 bottom-0 my-auto ml-4" size="14" />}
|
||||
|
|
@ -30,7 +31,7 @@ const Input = React.forwardRef((props: Props, ref: any) => {
|
|||
<input
|
||||
ref={ref}
|
||||
type={type}
|
||||
style={{ height: `${height}px` }}
|
||||
style={{ height: `${height}px`, width: width? `${width}px` : 'unset' }}
|
||||
className={cn('p-2 border border-gray-light bg-white w-full rounded', className, { 'pl-10': icon })}
|
||||
{...rest}
|
||||
/>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue