diff --git a/frontend/app/components/shared/DevTools/NetworkPanel/NetworkPanel.tsx b/frontend/app/components/shared/DevTools/NetworkPanel/NetworkPanel.tsx index 0b8b3a39c..3ba6041ea 100644 --- a/frontend/app/components/shared/DevTools/NetworkPanel/NetworkPanel.tsx +++ b/frontend/app/components/shared/DevTools/NetworkPanel/NetworkPanel.tsx @@ -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 ( {r.type}}> @@ -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(, { right: true }) - } + showModal(, { right: true }); + }; return ( @@ -234,18 +251,24 @@ function NetworkPanel(props: Props) {
- setShowOnlyErrors(!showOnlyErrors)} label="4xx-5xx Only" /> + setShowOnlyErrors(!showOnlyErrors)} + label="4xx-5xx Only" + />
@@ -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); diff --git a/frontend/app/components/shared/FetchDetailsModal/FetchDetailsModal.js b/frontend/app/components/shared/FetchDetailsModal/FetchDetailsModal.js index ef29ff128..1f10a373c 100644 --- a/frontend/app/components/shared/FetchDetailsModal/FetchDetailsModal.js +++ b/frontend/app/components/shared/FetchDetailsModal/FetchDetailsModal.js @@ -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 (
@@ -164,7 +164,9 @@ export default class FetchDetailsModal extends React.PureComponent {
Status
- {resource.status === '200' &&
} + {resource.status === '200' && ( +
+ )} {resource.status}
@@ -179,29 +181,40 @@ export default class FetchDetailsModal extends React.PureComponent {
)} - {/*
{url}
*/} -
- {/* {method && ( -
-
Method
-
{method}
+ {resource.type === TYPES.XHR && ( +
+
+ + Get more out of network requests
- )} - {!!_duration && ( -
-
Duration
-
{_duration } ms
-
- )} */} -
+
    +
  • + Integrate{' '} + + Fetch plugin + {' '} + to capture fetch payloads. +
    • +
  • + Find a detailed{' '} + + video tutorial + {' '} + to understand practical example of how to use fetch plugin. +
    • +
+
+ )}
-
- -
- {this.renderActiveTab(activeTab)} + {resource.type === TYPES.FETCH && ( +
+ +
+ {this.renderActiveTab(activeTab)} +
-
+ )} {/*