diff --git a/frontend/app/components/Session_/Console/Console.js b/frontend/app/components/Session_/Console/Console.js index 823df7118..5f9d9a55a 100644 --- a/frontend/app/components/Session_/Console/Console.js +++ b/frontend/app/components/Session_/Console/Console.js @@ -1,125 +1,16 @@ -import React from 'react'; -// import cn from 'classnames'; -// import { getRE } from 'App/utils'; -// import { Icon, NoContent, Tabs, Input } from 'UI'; import { connectPlayer, jump } from 'Player'; -// import { LEVEL } from 'Types/session/log'; -// import Autoscroll from '../Autoscroll'; -// import BottomBlock from '../BottomBlock'; -// import stl from './console.module.css'; import ConsoleContent from './ConsoleContent'; - -// const ALL = 'ALL'; -// const INFO = 'INFO'; -// const WARNINGS = 'WARNINGS'; -// const ERRORS = 'ERRORS'; - -// const LEVEL_TAB = { -// [ LEVEL.INFO ]: INFO, -// [ LEVEL.LOG ]: INFO, -// [ LEVEL.WARNING ]: WARNINGS, -// [ LEVEL.ERROR ]: ERRORS, -// [ LEVEL.EXCEPTION ]: ERRORS, -// }; - -// const TABS = [ ALL, INFO, WARNINGS, ERRORS ].map(tab => ({ text: tab, key: tab })); - -// // eslint-disable-next-line complexity -// const getIconProps = (level) => { -// switch (level) { -// case LEVEL.INFO: -// case LEVEL.LOG: -// return { -// name: 'console/info', -// color: 'blue2', -// }; -// case LEVEL.WARNING: -// return { -// name: 'console/warning', -// color: 'red2', -// }; -// case LEVEL.ERROR: -// return { -// name: 'console/error', -// color: 'red', -// }; -// } -// return null; -// }; - -// function renderWithNL(s = '') { -// if (typeof s !== 'string') return ''; -// return s.split('\n').map((line, i) =>
{ line }
) -// } - @connectPlayer(state => ({ logs: state.logList, time: state.time, livePlay: state.livePlay, })) export default class Console extends React.PureComponent { - // state = { - // filter: '', - // activeTab: ALL, - // } - // onTabClick = activeTab => this.setState({ activeTab }) - // onFilterChange = (e, { value }) => this.setState({ filter: value }) - render() { const { logs, time } = this.props; - // const { filter, activeTab, currentError } = this.state; - // const filterRE = getRE(filter, 'i'); - // const filtered = logs.filter(({ level, value }) => activeTab === ALL - // ? filterRE.test(value) - // : (filterRE.test(value) && LEVEL_TAB[ level ] === activeTab) - // ); return ( - <> - {/* - - - - - - - - { filtered.map(l => ( -
jump(l.time) } - > - -
{ renderWithNL(l.value) }
-
- ))} - - - - */} - ); } -} \ No newline at end of file +} diff --git a/frontend/app/components/Session_/Console/ConsoleContent.js b/frontend/app/components/Session_/Console/ConsoleContent.js index 34151fce9..880f660e7 100644 --- a/frontend/app/components/Session_/Console/ConsoleContent.js +++ b/frontend/app/components/Session_/Console/ConsoleContent.js @@ -22,7 +22,7 @@ const LEVEL_TAB = { [ LEVEL.EXCEPTION ]: ERRORS, }; -const TABS = [ ALL, INFO, WARNINGS, ERRORS ].map(tab => ({ text: tab, key: tab })); +const TABS = [ ALL, ERRORS, WARNINGS, INFO, ].map(tab => ({ text: tab, key: tab })); // eslint-disable-next-line complexity const getIconProps = (level) => { @@ -77,15 +77,18 @@ export default class ConsoleContent extends React.PureComponent { <> - +
+ Console + +
); } -} \ No newline at end of file +} diff --git a/frontend/app/components/Session_/Network/NetworkContent.js b/frontend/app/components/Session_/Network/NetworkContent.js index 136790769..751bea726 100644 --- a/frontend/app/components/Session_/Network/NetworkContent.js +++ b/frontend/app/components/Session_/Network/NetworkContent.js @@ -189,13 +189,16 @@ export default class NetworkContent extends React.PureComponent { - +
+ Network + +
- - - {/* */} - - = 1000 - ? `${ connBandwidth / 1000 } Mbps` - : `${ connBandwidth } Kbps` - } - display={ connBandwidth != null } - /> - +
+ Performance + + + {/* */} + + = 1000 + ? `${ connBandwidth / 1000 } Mbps` + : `${ connBandwidth } Kbps` + } + display={ connBandwidth != null } + /> + +
{ fps && diff --git a/frontend/app/components/Session_/Player/Player.js b/frontend/app/components/Session_/Player/Player.js index d6b6a0ece..084542902 100644 --- a/frontend/app/components/Session_/Player/Player.js +++ b/frontend/app/components/Session_/Player/Player.js @@ -5,11 +5,40 @@ import cn from 'classnames'; import { EscapeButton } from 'UI'; import { hide as hideTargetDefiner } from 'Duck/components/targetDefiner'; import { fullscreenOff } from 'Duck/components/player'; -import { attach as attachPlayer, Controls as PlayerControls, connectPlayer } from 'Player'; +import { + NONE, + CONSOLE, + NETWORK, + STACKEVENTS, + STORAGE, + PROFILER, + PERFORMANCE, + GRAPHQL, + FETCH, + EXCEPTIONS, + LONGTASKS, + INSPECTOR, +} from 'Duck/components/player'; +import Network from '../Network'; +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'; +import { + attach as attachPlayer, + Controls as PlayerControls, + scale as scalePlayerScreen, + connectPlayer, +} from 'Player'; import Controls from './Controls'; import Overlay from './Overlay'; import stl from './player.module.css'; -import EventsToggleButton from '../../Session/EventsToggleButton'; import { updateLastPlayedSession } from 'Duck/sessions'; @connectPlayer(state => ({ @@ -31,6 +60,13 @@ import { updateLastPlayedSession } from 'Duck/sessions'; 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) { + scalePlayerScreen(); + } + } + componentDidMount() { this.props.updateLastPlayedSession(this.props.sessionId); if (this.props.closedLive) return; @@ -48,6 +84,7 @@ export default class Player extends React.PureComponent { nextId, live, closedLive, + bottomBlock, } = this.props; return ( @@ -63,6 +100,43 @@ export default class Player extends React.PureComponent { ref={ this.screenWrapper } /> + { !fullscreen && !!bottomBlock && +
+ { bottomBlock === CONSOLE && + + } + { bottomBlock === NETWORK && + + } + { bottomBlock === STACKEVENTS && + + } + { bottomBlock === STORAGE && + + } + { bottomBlock === PROFILER && + + } + { bottomBlock === PERFORMANCE && + + } + { bottomBlock === GRAPHQL && + + } + { bottomBlock === FETCH && + + } + { bottomBlock === EXCEPTIONS && + + } + { bottomBlock === LONGTASKS && + + } + { bottomBlock === INSPECTOR && + + } +
+ } diff --git a/frontend/app/components/Session_/Player/player.module.css b/frontend/app/components/Session_/Player/player.module.css index 8e1c3d1e0..0ee3ccd57 100644 --- a/frontend/app/components/Session_/Player/player.module.css +++ b/frontend/app/components/Session_/Player/player.module.css @@ -15,7 +15,8 @@ /* border: solid thin $gray-light; */ /* border-radius: 3px; */ overflow: hidden; - background: $gray-lightest; + background: repeating-conic-gradient($gray-lightest 0% 25%, transparent 0% 50%) + 50% / 10px 10px; } .disconnected { diff --git a/frontend/app/components/Session_/PlayerBlock.js b/frontend/app/components/Session_/PlayerBlock.js index 1f5bd6c59..af7143c64 100644 --- a/frontend/app/components/Session_/PlayerBlock.js +++ b/frontend/app/components/Session_/PlayerBlock.js @@ -1,33 +1,11 @@ import React from 'react'; import cn from "classnames"; import { connect } from 'react-redux'; -import { scale as scalePlayerScreen } from 'Player'; +import { } from 'Player'; import { NONE, - CONSOLE, - NETWORK, - STACKEVENTS, - STORAGE, - PROFILER, - PERFORMANCE, - GRAPHQL, - FETCH, - EXCEPTIONS, - LONGTASKS, - INSPECTOR, } from 'Duck/components/player'; import Player from './Player'; -import Network from './Network'; -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'; import SubHeader from './Subheader'; import styles from './playerBlock.css'; @@ -39,13 +17,6 @@ import styles from './playerBlock.css'; disabled: state.getIn([ 'components', 'targetDefiner', 'inspectorMode' ]), })) export default class PlayerBlock extends React.PureComponent { - componentDidUpdate(prevProps) { - if ([ prevProps.bottomBlock, this.props.bottomBlock ].includes(NONE) || - prevProps.fullscreen !== this.props.fullscreen) { - scalePlayerScreen(); - } - } - render() { const { fullscreen, bottomBlock, sessionId, disabled, previousId, nextId, setAutoplayValues } = this.props; @@ -58,44 +29,9 @@ export default class PlayerBlock extends React.PureComponent { - { !fullscreen && !!bottomBlock && -
- { bottomBlock === CONSOLE && - - } - { bottomBlock === NETWORK && - - } - { bottomBlock === STACKEVENTS && - - } - { bottomBlock === STORAGE && - - } - { bottomBlock === PROFILER && - - } - { bottomBlock === PERFORMANCE && - - } - { bottomBlock === GRAPHQL && - - } - { bottomBlock === FETCH && - - } - { bottomBlock === EXCEPTIONS && - - } - { bottomBlock === LONGTASKS && - - } - { bottomBlock === INSPECTOR && - - } -
- } ); } diff --git a/frontend/app/components/Session_/PlayerBlockHeader.js b/frontend/app/components/Session_/PlayerBlockHeader.js index d68f9a21b..aecfbbb8b 100644 --- a/frontend/app/components/Session_/PlayerBlockHeader.js +++ b/frontend/app/components/Session_/PlayerBlockHeader.js @@ -106,7 +106,7 @@ export default class PlayerBlockHeader extends React.PureComponent {
- +
- +
+ Events + +
); } -} \ No newline at end of file +}