59 lines
1.6 KiB
JavaScript
59 lines
1.6 KiB
JavaScript
import { Loader } from 'UI';
|
|
import styles from './logTab.css';
|
|
|
|
const REQUEST = '[REQUEST]';
|
|
const RESPONSE = '[RESPONSE]';
|
|
|
|
const parse = text => text.split('\n').map((bText) => {
|
|
if (bText.indexOf(REQUEST) !== -1) {
|
|
return (
|
|
<div>
|
|
<span className={ styles.request }>{'REQUEST: '}</span>
|
|
{ bText.slice(REQUEST.length) }
|
|
</div>
|
|
);
|
|
}
|
|
if (bText.indexOf(RESPONSE) !== -1) {
|
|
return (
|
|
<div>
|
|
<span className={ styles.responce }>{'RESPONSE: '}</span>
|
|
{ bText.slice(RESPONSE.length) }
|
|
</div>
|
|
);
|
|
}
|
|
return bText;
|
|
});
|
|
|
|
export default class LogTab extends React.PureComponent {
|
|
state = {
|
|
blocks: null,
|
|
errors: null,
|
|
};
|
|
|
|
componentWillMount() {
|
|
fetch(this.props.src)
|
|
.then(responce => responce.text())
|
|
.then(parse)
|
|
.then(blocks => this.setState({ errors: null, blocks }))
|
|
.catch(errors => this.setState({ errors, blocks: null }));
|
|
}
|
|
|
|
scrollToSelected = (wrapper) => {
|
|
const { selectedIndex } = this.props;
|
|
if (!selectedIndex || !wrapper) return;
|
|
wrapper.scrollTop = wrapper.children[ selectedIndex ].offsetTop;
|
|
}
|
|
|
|
render() {
|
|
const { blocks, errors } = this.state;
|
|
const { selectedIndex, className } = this.props;
|
|
if (errors) return 'Connection error';
|
|
if (!blocks) return <Loader />;
|
|
return (
|
|
<div className={ `${ className } ${ styles.logTab }` } ref={ this.scrollToSelected }>
|
|
{ blocks.map((block, i) =>
|
|
<div className={ styles.block } data-selected={ selectedIndex === i }> { block } </div>)}
|
|
</div>
|
|
);
|
|
}
|
|
}
|