{ children }
{ showClose &&
}
diff --git a/frontend/app/components/Session_/BottomBlock/InfoLine.js b/frontend/app/components/Session_/BottomBlock/InfoLine.js
index 8872be906..d4607a887 100644
--- a/frontend/app/components/Session_/BottomBlock/InfoLine.js
+++ b/frontend/app/components/Session_/BottomBlock/InfoLine.js
@@ -11,7 +11,7 @@ const InfoLine = ({ children }) => (
const Point = ({ label, value, display=true, color, dotColor }) => display
?
{ dotColor != null &&
}
-
{ `${label}:` } { value }
+
{ `${label}` } { value }
: null;
diff --git a/frontend/app/components/Session_/BottomBlock/bottomBlock.module.css b/frontend/app/components/Session_/BottomBlock/bottomBlock.module.css
index 41cf7e5e1..cda4ec372 100644
--- a/frontend/app/components/Session_/BottomBlock/bottomBlock.module.css
+++ b/frontend/app/components/Session_/BottomBlock/bottomBlock.module.css
@@ -4,6 +4,4 @@
/* padding-right: 10px; */
/* border: solid thin $gray-light; */
height: 300px;
- padding-top: 2px;
- border-top: thin dashed #cccccc
}
diff --git a/frontend/app/components/Session_/BottomBlock/infoLine.module.css b/frontend/app/components/Session_/BottomBlock/infoLine.module.css
index d03a53439..b6798d1bf 100644
--- a/frontend/app/components/Session_/BottomBlock/infoLine.module.css
+++ b/frontend/app/components/Session_/BottomBlock/infoLine.module.css
@@ -11,13 +11,13 @@
align-items: center;
&:not(:last-child):after {
content: '';
- margin: 0 10px;
+ margin: 0 12px;
height: 30px;
border-right: 1px solid $gray-light-shade;
}
& .label {
font-weight: 500;
- margin-right: 3px;
+ margin-right: 6px;
}
}
}
diff --git a/frontend/app/components/Session_/Console/Console.js b/frontend/app/components/Session_/Console/Console.js
index 5534439fb..3c4a3752c 100644
--- a/frontend/app/components/Session_/Console/Console.js
+++ b/frontend/app/components/Session_/Console/Console.js
@@ -12,7 +12,7 @@ export default class Console extends React.PureComponent {
render() {
const { logs, time, listNow } = this.props;
return (
-
+
);
}
}
diff --git a/frontend/app/components/Session_/Console/ConsoleContent.js b/frontend/app/components/Session_/Console/ConsoleContent.js
index 29820de2e..012582849 100644
--- a/frontend/app/components/Session_/Console/ConsoleContent.js
+++ b/frontend/app/components/Session_/Console/ConsoleContent.js
@@ -7,6 +7,7 @@ import { LEVEL } from 'Types/session/log';
import Autoscroll from '../Autoscroll';
import BottomBlock from '../BottomBlock';
import stl from './console.module.css';
+import { Duration } from 'luxon';
const ALL = 'ALL';
const INFO = 'INFO';
@@ -14,108 +15,113 @@ const WARNINGS = 'WARNINGS';
const ERRORS = 'ERRORS';
const LEVEL_TAB = {
- [LEVEL.INFO]: INFO,
- [LEVEL.LOG]: INFO,
- [LEVEL.WARNING]: WARNINGS,
- [LEVEL.ERROR]: ERRORS,
- [LEVEL.EXCEPTION]: ERRORS,
+ [LEVEL.INFO]: INFO,
+ [LEVEL.LOG]: INFO,
+ [LEVEL.WARNING]: WARNINGS,
+ [LEVEL.ERROR]: ERRORS,
+ [LEVEL.EXCEPTION]: ERRORS,
};
const TABS = [ALL, ERRORS, WARNINGS, INFO].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.WARN:
- case LEVEL.WARNING:
- return {
- name: 'console/warning',
- color: 'red2',
- };
- case LEVEL.ERROR:
- return {
- name: 'console/error',
- color: 'red',
- };
- }
- return null;
+ switch (level) {
+ case LEVEL.INFO:
+ case LEVEL.LOG:
+ return {
+ name: 'console/info',
+ color: 'blue2',
+ };
+ case LEVEL.WARN:
+ 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}
);
+ if (typeof s !== 'string') return '';
+ return s.split('\n').map((line, i) =>
{line}
);
}
export default class ConsoleContent extends React.PureComponent {
- state = {
- filter: '',
- activeTab: ALL,
- };
- onTabClick = (activeTab) => this.setState({ activeTab });
- onFilterChange = ({ target: { value } }) => this.setState({ filter: value });
+ state = {
+ filter: '',
+ activeTab: ALL,
+ };
+ onTabClick = (activeTab) => this.setState({ activeTab });
+ onFilterChange = ({ target: { value } }) => this.setState({ filter: value });
- render() {
- const { logs, isResult, additionalHeight, lastIndex } = this.props;
- const { filter, activeTab } = 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
- );
+ render() {
+ const { logs, isResult, additionalHeight, logsNow } = this.props;
+ const time = logsNow.length > 0 ? logsNow[logsNow.length - 1].time : undefined;
+ 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 (
- <>
-
-
-
- Console
-
-
-
-
-
-
-
- No {activeTab === ALL ? 'Data' : activeTab.toLowerCase()} }
- size="small"
- show={filtered.length === 0}
- >
-
- {filtered.map((l, index) => (
- !isResult && jump(l.time)}
- >
-
-
{renderWithNL(l.value)}
-
-
-
-
-
- );
- }
+ const lastIndex = filtered.filter((item) => item.time <= time).length - 1;
+
+ return (
+ <>
+
+
+
+ Console
+
+
+
+
+
+
+
+ {filtered.map((l, index) => (
+ lastIndex,
+ 'cursor-pointer': !isResult,
+ })}
+ onClick={() => !isResult && jump(l.time)}
+ >
+
+
+
+
+ {Duration.fromMillis(l.time).toFormat('mm:ss.SSS')}
+
+
+
{renderWithNL(l.value)}
+
+
+
+ );
+ }
}
diff --git a/frontend/app/components/Session_/Console/console.module.css b/frontend/app/components/Session_/Console/console.module.css
index 55d19c7bd..66ffc32f9 100644
--- a/frontend/app/components/Session_/Console/console.module.css
+++ b/frontend/app/components/Session_/Console/console.module.css
@@ -18,11 +18,18 @@
border-bottom: solid thin $gray-light-shade;
}
+.timestamp {
+ padding: 7px 0 7px 15px;
+}
+
.activeRow {
- background-color: $teal !important;
- color: white !important;
+ background-color: rgba(54, 108, 217, 0.1) !important;
}
.icon {
padding-top: 4px;
+}
+
+.inactiveRow {
+ opacity: 0.5;
}
\ No newline at end of file
diff --git a/frontend/app/components/Session_/Exceptions/Exceptions.js b/frontend/app/components/Session_/Exceptions/Exceptions.js
index 5c5e913e7..0a30a025c 100644
--- a/frontend/app/components/Session_/Exceptions/Exceptions.js
+++ b/frontend/app/components/Session_/Exceptions/Exceptions.js
@@ -1,117 +1,154 @@
import React from 'react';
import { connect } from 'react-redux';
import { getRE } from 'App/utils';
-import { NoContent, Loader, Input, ErrorItem, SlideModal, ErrorDetails, ErrorHeader,Link, QuestionMarkHint } from 'UI';
-import { fetchErrorStackList } from 'Duck/sessions'
+import {
+ NoContent,
+ Loader,
+ Input,
+ ErrorItem,
+ SlideModal,
+ ErrorDetails,
+ ErrorHeader,
+ Link,
+ QuestionMarkHint,
+ Tabs,
+} from 'UI';
+import { fetchErrorStackList } from 'Duck/sessions';
import { connectPlayer, jump } from 'Player';
import { error as errorRoute } from 'App/routes';
import Autoscroll from '../Autoscroll';
import BottomBlock from '../BottomBlock';
-@connectPlayer(state => ({
+@connectPlayer((state) => ({
logs: state.logListNow,
- exceptions: state.exceptionsListNow,
+ exceptions: state.exceptionsList,
+ exceptionsNow: state.exceptionsListNow,
}))
-@connect(state => ({
- session: state.getIn([ 'sessions', 'current' ]),
- errorStack: state.getIn([ 'sessions', 'errorStack' ]),
- sourcemapUploaded: state.getIn([ 'sessions', 'sourcemapUploaded' ]),
- loading: state.getIn([ 'sessions', 'fetchErrorStackList', 'loading' ])
-}), { fetchErrorStackList })
+@connect(
+ (state) => ({
+ session: state.getIn(['sessions', 'current']),
+ errorStack: state.getIn(['sessions', 'errorStack']),
+ sourcemapUploaded: state.getIn(['sessions', 'sourcemapUploaded']),
+ loading: state.getIn(['sessions', 'fetchErrorStackList', 'loading']),
+ }),
+ { fetchErrorStackList }
+)
export default class Exceptions extends React.PureComponent {
state = {
filter: '',
- currentError: null
- }
+ currentError: null,
+ };
- onFilterChange = ({ target: { value } }) => this.setState({ filter: value })
+ onFilterChange = ({ target: { value } }) => this.setState({ filter: value });
setCurrentError = (err) => {
const { session } = this.props;
- this.props.fetchErrorStackList(session.sessionId, err.errorId)
- this.setState({ currentError: err})
- }
- closeModal = () => this.setState({ currentError: null})
+ this.props.fetchErrorStackList(session.sessionId, err.errorId);
+ this.setState({ currentError: err });
+ };
+ closeModal = () => this.setState({ currentError: null });
render() {
const { exceptions, loading, errorStack, sourcemapUploaded } = this.props;
const { filter, currentError } = this.state;
const filterRE = getRE(filter, 'i');
- const filtered = exceptions.filter(e => filterRE.test(e.name) || filterRE.test(e.message));
+ const filtered = exceptions.filter((e) => filterRE.test(e.name) || filterRE.test(e.message));
+
+ let lastIndex = -1;
+ filtered.forEach((item, index) => {
+ if (
+ this.props.exceptionsNow.length > 0 &&
+ item.time <= this.props.exceptionsNow[this.props.exceptionsNow.length - 1].time
+ ) {
+ lastIndex = index;
+ }
+ });
return (
<>
-
-
-
-
{currentError.name}
-
-
- {currentError.function}
-
+
+
+
+ {currentError.name}
+
+ {currentError.function}
+
+ {currentError.message}
{currentError.message}
-
+ )
}
- isDisplayed={ currentError != null }
- content={ currentError &&
-
+ isDisplayed={currentError != null}
+ content={
+ currentError && (
+
+ )
}
- onClose={ this.closeModal }
+ onClose={this.closeModal}
/>