change(ui) - merge fetch calls with network

2022-10-11 15:20:33 +02:00 · 2022-10-11 15:20:33 +02:00 · 3684ab7be5
commit 3684ab7be5
parent c2e295e738
5 changed files with 88 additions and 93 deletions
--- 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}
--- 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>
    );
  }
--- 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,
--- 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>
    );
  };
--- 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' }}>