From 3684ab7be56d7e92933f3e72fa894b975f389fc9 Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Tue, 11 Oct 2022 15:20:33 +0200
Subject: [PATCH] change(ui) - merge fetch calls with network

---
 .../Session_/Player/Controls/Controls.js      |  13 --
 .../app/components/Session_/Player/Player.js  | 114 +++++++-----------
 .../DevTools/NetworkPanel/NetworkPanel.tsx    |  15 ++-
 .../shared/DevTools/TimeTable/TimeTable.tsx   |  16 ++-
 .../FetchDetailsModal/FetchDetailsModal.js    |  23 +++-
 5 files changed, 88 insertions(+), 93 deletions(-)

diff --git a/frontend/app/components/Session_/Player/Controls/Controls.js b/frontend/app/components/Session_/Player/Controls/Controls.js
index 5109bf96b..6b280e612 100644
--- a/frontend/app/components/Session_/Player/Controls/Controls.js
+++ b/frontend/app/components/Session_/Player/Controls/Controls.js
@@ -407,19 +407,6 @@ export default class Controls extends React.Component {
                   containerClassName="mx-2"
                 />
               )}
-              {showFetch && (
-                <ControlButton
-                  disabled={disabled && !inspectorMode}
-                  onClick={() => toggleBottomTools(FETCH)}
-                  active={bottomBlock === FETCH && !inspectorMode}
-                  hasErrors={fetchRedCount > 0}
-                  count={fetchCount}
-                  label="FETCH"
-                  noIcon
-                  labelClassName="!text-base font-semibold"
-                  containerClassName="mx-2"
-                />
-              )}
               {!live && showGraphql && (
                 <ControlButton
                   disabled={disabled && !inspectorMode}
diff --git a/frontend/app/components/Session_/Player/Player.js b/frontend/app/components/Session_/Player/Player.js
index b0fcf583a..c1cc17b45 100644
--- a/frontend/app/components/Session_/Player/Player.js
+++ b/frontend/app/components/Session_/Player/Player.js
@@ -14,20 +14,18 @@ import {
   PROFILER,
   PERFORMANCE,
   GRAPHQL,
-  FETCH,
   EXCEPTIONS,
   LONGTASKS,
   INSPECTOR,
   OVERVIEW,
 } from 'Duck/components/player';
-import Network from '../Network';
+import NetworkPanel from 'Shared/DevTools/NetworkPanel/NetworkPanel';
 import Console from '../Console/Console';
 import StackEvents from '../StackEvents/StackEvents';
 import Storage from '../Storage';
 import Profiler from '../Profiler';
 import { ConnectedPerformance } from '../Performance';
 import GraphQL from '../GraphQL';
-import Fetch from '../Fetch';
 import Exceptions from '../Exceptions/Exceptions';
 import LongTasks from '../LongTasks';
 import Inspector from '../Inspector';
@@ -42,30 +40,36 @@ import Overlay from './Overlay';
 import stl from './player.module.css';
 import { updateLastPlayedSession } from 'Duck/sessions';
 import OverviewPanel from '../OverviewPanel';
-import NetworkPanel from 'Shared/DevTools/NetworkPanel/NetworkPanel';
 
-@connectPlayer(state => ({
+@connectPlayer((state) => ({
   live: state.live,
 }))
-@connect(state => {
-  const isAssist = window.location.pathname.includes('/assist/');
-  return {
-    fullscreen: state.getIn([ 'components', 'player', 'fullscreen' ]),
-    nextId: state.getIn([ 'sessions', 'nextId' ]),
-    sessionId: state.getIn([ 'sessions', 'current', 'sessionId' ]),
-    closedLive: !!state.getIn([ 'sessions', 'errors' ]) || (isAssist && !state.getIn([ 'sessions', 'current', 'live' ])),
+@connect(
+  (state) => {
+    const isAssist = window.location.pathname.includes('/assist/');
+    return {
+      fullscreen: state.getIn(['components', 'player', 'fullscreen']),
+      nextId: state.getIn(['sessions', 'nextId']),
+      sessionId: state.getIn(['sessions', 'current', 'sessionId']),
+      closedLive:
+        !!state.getIn(['sessions', 'errors']) ||
+        (isAssist && !state.getIn(['sessions', 'current', 'live'])),
+    };
+  },
+  {
+    hideTargetDefiner,
+    fullscreenOff,
+    updateLastPlayedSession,
   }
-}, {
-  hideTargetDefiner,
-  fullscreenOff,
-  updateLastPlayedSession,
-})
+)
 export default class Player extends React.PureComponent {
   screenWrapper = React.createRef();
 
   componentDidUpdate(prevProps) {
-    if ([ prevProps.bottomBlock, this.props.bottomBlock ].includes(NONE) ||
-        prevProps.fullscreen !== this.props.fullscreen) {
+    if (
+      [prevProps.bottomBlock, this.props.bottomBlock].includes(NONE) ||
+      prevProps.fullscreen !== this.props.fullscreen
+    ) {
       scalePlayerScreen();
     }
   }
@@ -74,7 +78,7 @@ export default class Player extends React.PureComponent {
     this.props.updateLastPlayedSession(this.props.sessionId);
     if (this.props.closedLive) return;
 
-    const parentElement = findDOMNode(this.screenWrapper.current);  //TODO: good architecture
+    const parentElement = findDOMNode(this.screenWrapper.current); //TODO: good architecture
     attachPlayer(parentElement);
   }
 
@@ -87,67 +91,39 @@ export default class Player extends React.PureComponent {
       nextId,
       closedLive,
       bottomBlock,
-      activeTab
+      activeTab,
     } = this.props;
 
-    const maxWidth = activeTab ? 'calc(100vw - 270px)' : '100vw'
+    const maxWidth = activeTab ? 'calc(100vw - 270px)' : '100vw';
     return (
       <div
-        className={ cn(className, stl.playerBody, "flex flex-col relative", fullscreen && 'pb-2') }
-        data-bottom-block={ bottomBlockIsActive }
+        className={cn(className, stl.playerBody, 'flex flex-col relative', fullscreen && 'pb-2')}
+        data-bottom-block={bottomBlockIsActive}
       >
-        {fullscreen && <EscapeButton onClose={ fullscreenOff } />}
+        {fullscreen && <EscapeButton onClose={fullscreenOff} />}
         <div className="relative flex-1 overflow-hidden">
           <Overlay nextId={nextId} togglePlay={PlayerControls.togglePlay} closedLive={closedLive} />
-          <div
-            className={ stl.screenWrapper }
-            ref={ this.screenWrapper }
-          />
+          <div className={stl.screenWrapper} ref={this.screenWrapper} />
         </div>
-        { !fullscreen && !!bottomBlock &&
+        {!fullscreen && !!bottomBlock && (
           <div style={{ maxWidth, width: '100%' }}>
-            { bottomBlock === OVERVIEW &&
-               <OverviewPanel />
-            }
-            { bottomBlock === CONSOLE &&
-              <Console />
-            }
-            { bottomBlock === NETWORK &&
+            {bottomBlock === OVERVIEW && <OverviewPanel />}
+            {bottomBlock === CONSOLE && <Console />}
+            {bottomBlock === NETWORK && (
               // <Network />
               <NetworkPanel />
-            }
-            { bottomBlock === STACKEVENTS &&
-              <StackEvents />
-            }
-            { bottomBlock === STORAGE &&
-              <Storage />
-            }
-            { bottomBlock === PROFILER &&
-              <Profiler />
-            }
-            { bottomBlock === PERFORMANCE &&
-              <ConnectedPerformance />
-            }
-            { bottomBlock === GRAPHQL &&
-              <GraphQL />
-            }
-            { bottomBlock === FETCH &&
-              <Fetch />
-            }
-            { bottomBlock === EXCEPTIONS &&
-              <Exceptions />
-            }
-            { bottomBlock === LONGTASKS &&
-              <LongTasks />
-            }
-            { bottomBlock === INSPECTOR &&
-              <Inspector />
-            }
+            )}
+            {bottomBlock === STACKEVENTS && <StackEvents />}
+            {bottomBlock === STORAGE && <Storage />}
+            {bottomBlock === PROFILER && <Profiler />}
+            {bottomBlock === PERFORMANCE && <ConnectedPerformance />}
+            {bottomBlock === GRAPHQL && <GraphQL />}
+            {bottomBlock === EXCEPTIONS && <Exceptions />}
+            {bottomBlock === LONGTASKS && <LongTasks />}
+            {bottomBlock === INSPECTOR && <Inspector />}
           </div>
-        }
-        <Controls
-          { ...PlayerControls }
-        />
+        )}
+        <Controls {...PlayerControls} />
       </div>
     );
   }
diff --git a/frontend/app/components/shared/DevTools/NetworkPanel/NetworkPanel.tsx b/frontend/app/components/shared/DevTools/NetworkPanel/NetworkPanel.tsx
index 3ba6041ea..af8b10aa1 100644
--- a/frontend/app/components/shared/DevTools/NetworkPanel/NetworkPanel.tsx
+++ b/frontend/app/components/shared/DevTools/NetworkPanel/NetworkPanel.tsx
@@ -3,7 +3,7 @@ import cn from 'classnames';
 // import { connectPlayer } from 'Player';
 import { QuestionMarkHint, Popup, Tabs, Input, NoContent, Icon, Toggler, Button } from 'UI';
 import { getRE } from 'App/utils';
-import { TYPES } from 'Types/session/resource';
+import Resource, { TYPES } from 'Types/session/resource';
 import { formatBytes } from 'App/utils';
 import { formatMs } from 'App/date';
 
@@ -202,7 +202,8 @@ function NetworkPanel(props: Props) {
   const filterRE = getRE(filter, 'i');
   let filtered = resources;
   fetchList.forEach(
-    (fetchCall: any) => filtered = filtered.filter((networkCall: any) => networkCall.url !== fetchCall.url)
+    (fetchCall: any) =>
+      (filtered = filtered.filter((networkCall: any) => networkCall.url !== fetchCall.url))
   );
   filtered = filtered.concat(fetchList);
   filtered = filtered.sort((a: any, b: any) => {
@@ -232,7 +233,9 @@ function NetworkPanel(props: Props) {
   }
 
   const onRowClick = (row: any) => {
-    showModal(<FetchDetailsModal resource={row} fetchPresented={fetchPresented} />, { right: true });
+    showModal(<FetchDetailsModal resource={row} fetchPresented={fetchPresented} />, {
+      right: true,
+    });
   };
 
   return (
@@ -315,9 +318,9 @@ function NetworkPanel(props: Props) {
               rows={filtered}
               referenceLines={referenceLines}
               renderPopup
-              // navigation
               onRowClick={onRowClick}
               additionalHeight={additionalHeight}
+              onJump={jump}
               // activeIndex={lastIndex}
             >
               {[
@@ -344,7 +347,7 @@ function NetworkPanel(props: Props) {
                 },
                 {
                   label: 'Size',
-                  width: 60,
+                  width: 80,
                   render: renderSize,
                 },
                 {
@@ -364,7 +367,7 @@ function NetworkPanel(props: Props) {
 export default connectPlayer((state: any) => ({
   location: state.location,
   resources: state.resourceList,
-  fetchList: state.fetchList,
+  fetchList: state.fetchList.map((i: any) => Resource({ ...i.toJS(), type: TYPES.XHR })),
   domContentLoadedTime: state.domContentLoadedTime,
   loadTime: state.loadTime,
   // time: state.time,
diff --git a/frontend/app/components/shared/DevTools/TimeTable/TimeTable.tsx b/frontend/app/components/shared/DevTools/TimeTable/TimeTable.tsx
index c6e3ea716..be6a7c764 100644
--- a/frontend/app/components/shared/DevTools/TimeTable/TimeTable.tsx
+++ b/frontend/app/components/shared/DevTools/TimeTable/TimeTable.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { List, AutoSizer } from 'react-virtualized';
 import cn from 'classnames';
 import { Duration } from "luxon";
-import { NoContent, IconButton, Button } from 'UI';
+import { NoContent, Icon, Button } from 'UI';
 import { percentOf } from 'App/utils';
 
 import BarRow from './BarRow';
@@ -68,6 +68,7 @@ type Props = {
   additionalHeight?: number
   hoverable?: boolean
   onRowClick?: (row: any, index: number) => void
+  onJump?: (time: any) => void
 };
 
 type TimeLineInfo = {
@@ -160,6 +161,13 @@ export default class TimeTable extends React.PureComponent<Props, State> {
     }
   };
 
+  onJump = (e: any, index: any) => {
+    e.stopPropagation();
+    if (this.props.onJump) {
+      this.props.onJump(this.props.rows[index].time)
+    }
+  }
+
   renderRow = ({ index, key, style: rowStyle }: any) => {
     const { activeIndex } = this.props;
     const { children: columns, rows, renderPopup, hoverable, onRowClick } = this.props;
@@ -169,7 +177,7 @@ export default class TimeTable extends React.PureComponent<Props, State> {
       <div
         style={rowStyle}
         key={key}
-        className={cn('border-b border-color-gray-light-shade', stl.row, {
+        className={cn('border-b border-color-gray-light-shade group items-center', stl.row, {
           [stl.hoverable]: hoverable,
           'error color-red': !!row.isRed && row.isRed(),
           'cursor-pointer': typeof onRowClick === 'function',
@@ -187,6 +195,10 @@ export default class TimeTable extends React.PureComponent<Props, State> {
         <div className={cn('relative flex-1 flex', stl.timeBarWrapper)}>
           <BarRow resource={row} timestart={timestart} timewidth={timewidth} popup={renderPopup} />
         </div>
+        <div className="invisible group-hover:visible rounded-lg bg-active-blue text-xs flex items-center px-2 py-1 color-teal" onClick={(e) => this.onJump(e, index)}>
+          <Icon name="caret-right-fill" size="12" color="teal" />
+          <span>JUMP</span>
+        </div>
       </div>
     );
   };
diff --git a/frontend/app/components/shared/FetchDetailsModal/FetchDetailsModal.js b/frontend/app/components/shared/FetchDetailsModal/FetchDetailsModal.js
index 1f10a373c..ac4a10159 100644
--- a/frontend/app/components/shared/FetchDetailsModal/FetchDetailsModal.js
+++ b/frontend/app/components/shared/FetchDetailsModal/FetchDetailsModal.js
@@ -5,6 +5,7 @@ import stl from './fetchDetails.module.css';
 import Headers from './components/Headers';
 import AnimatedSVG, { ICONS } from 'Shared/AnimatedSVG/AnimatedSVG';
 import { TYPES } from 'Types/session/resource';
+import { formatBytes } from 'App/utils';
 
 const HEADERS = 'HEADERS';
 const REQUEST = 'REQUEST';
@@ -129,7 +130,14 @@ export default class FetchDetailsModal extends React.PureComponent {
   }
 
   render() {
-    const { resource, fetchPresented, 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);
@@ -151,6 +159,15 @@ export default class FetchDetailsModal extends React.PureComponent {
           </div>
         </div>
 
+        {!!resource.decodedBodySize && (
+          <div className="flex items-center py-1">
+            <div className="font-medium">Size</div>
+            <div className="rounded bg-active-blue px-2 py-1 ml-2 whitespace-nowrap overflow-hidden text-clip">
+              {formatBytes(resource.decodedBodySize)}
+            </div>
+          </div>
+        )}
+
         {method && (
           <div className="flex items-center py-1">
             <div className="font-medium">Request Method</div>
@@ -181,7 +198,7 @@ export default class FetchDetailsModal extends React.PureComponent {
           </div>
         )}
 
-        {resource.type === TYPES.XHR && (
+        {resource.type === TYPES.XHR && !fetchPresented && (
           <div className="bg-active-blue rounded p-3 mt-4">
             <div className="mb-2 flex items-center">
               <Icon name="lightbulb" size="18" />
@@ -207,7 +224,7 @@ export default class FetchDetailsModal extends React.PureComponent {
         )}
 
         <div className="mt-6">
-          {resource.type === TYPES.FETCH && (
+          {resource.type === TYPES.XHR && fetchPresented && (
             <div>
               <Tabs tabs={tabs} active={activeTab} onClick={this.onTabClick} border={true} />
               <div style={{ height: 'calc(100vh - 314px)', overflowY: 'auto' }}>