openreplay/frontend/app/components/Session_/Console/Console.js
2021-05-01 15:12:01 +05:30

123 lines
No EOL
3.6 KiB
JavaScript

// 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.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) => <div className={ cn({ "ml-20": i !== 0 }) }>{ line }</div>)
// }
@connectPlayer(state => ({
logs: state.logList,
time: state.time,
}))
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 (
<>
<ConsoleContent jump={jump} logs={logs} time={time} />
{/* <BottomBlock>
<BottomBlock.Header>
<Tabs
tabs={ TABS }
active={ activeTab }
onClick={ this.onTabClick }
border={ false }
/>
<Input
className="input-small"
placeholder="Filter"
icon="search"
iconPosition="left"
name="filter"
onChange={ this.onFilterChange }
/>
</BottomBlock.Header>
<BottomBlock.Content>
<NoContent
size="small"
show={ filtered.length === 0 }
>
<Autoscroll>
{ filtered.map(l => (
<div
key={ l.key }
className={ cn(stl.line, {
"info": !l.isYellow() && !l.isRed(),
"warn": l.isYellow(),
"error": l.isRed(),
}) }
data-scroll-item={ l.isRed() }
onClick={ () => jump(l.time) }
>
<Icon size="14" className={ stl.icon } { ...getIconProps(l.level) } />
<div className={ stl.message }>{ renderWithNL(l.value) }</div>
</div>
))}
</Autoscroll>
</NoContent>
</BottomBlock.Content>
</BottomBlock> */}
</>
);
}
}