fix(ui) - dev tools - sync with timeline
This commit is contained in:
Shekar Siri
parent
2beb53c13d
commit
80ae669ed1
8 changed files with 554 additions and 637 deletions
|
|
@ -4,85 +4,82 @@ import cn from 'classnames';
|
|||
import stl from './autoscroll.module.css';
|
||||
|
||||
export default class Autoscroll extends React.PureComponent {
|
||||
static defaultProps = {
|
||||
bottomOffset: 10,
|
||||
}
|
||||
state = {
|
||||
autoScroll: true,
|
||||
}
|
||||
static defaultProps = {
|
||||
bottomOffset: 10,
|
||||
};
|
||||
state = {
|
||||
autoScroll: true,
|
||||
};
|
||||
|
||||
componentDidMount() {
|
||||
if (!this.scrollableElement) return; // is necessary ?
|
||||
this.scrollableElement.addEventListener('scroll', this.scrollHandler);
|
||||
this.scrollableElement.scrollTop = this.scrollableElement.scrollHeight;
|
||||
}
|
||||
|
||||
componentDidUpdate() {
|
||||
if (!this.scrollableElement) return; // is necessary ?
|
||||
if (this.state.autoScroll) {
|
||||
this.scrollableElement.scrollTop = this.scrollableElement.scrollHeight;
|
||||
componentDidMount() {
|
||||
if (!this.scrollableElement) return; // is necessary ?
|
||||
this.scrollableElement.addEventListener('scroll', this.scrollHandler);
|
||||
this.scrollableElement.scrollTop = this.scrollableElement.scrollHeight;
|
||||
}
|
||||
}
|
||||
|
||||
scrollHandler = (e) => {
|
||||
if (!this.scrollableElement) return;
|
||||
this.setState({
|
||||
autoScroll: this.scrollableElement.scrollHeight
|
||||
- this.scrollableElement.clientHeight
|
||||
- this.scrollableElement.scrollTop < this.props.bottomOffset,
|
||||
});
|
||||
}
|
||||
|
||||
onPrevClick = () => {
|
||||
if (!this.scrollableElement) return;
|
||||
const scEl = this.scrollableElement;
|
||||
let prevItem;
|
||||
for (let i = scEl.children.length - 1; i >= 0; i--) {
|
||||
const child = scEl.children[ i ];
|
||||
const isScrollable = child.getAttribute("data-scroll-item") === "true";
|
||||
if (isScrollable && child.offsetTop < scEl.scrollTop) {
|
||||
prevItem = child;
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (!prevItem) return;
|
||||
scEl.scrollTop = prevItem.offsetTop;
|
||||
}
|
||||
|
||||
onNextClick = () => {
|
||||
if (!this.scrollableElement) return;
|
||||
const scEl = this.scrollableElement;
|
||||
let nextItem;
|
||||
for (let i = 0; i < scEl.children.length; i++) {
|
||||
const child = scEl.children[ i ];
|
||||
const isScrollable = child.getAttribute("data-scroll-item") === "true";
|
||||
if (isScrollable && child.offsetTop > scEl.scrollTop + 20) { // ?
|
||||
nextItem = child;
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (!nextItem) return;
|
||||
scEl.scrollTop = nextItem.offsetTop;
|
||||
}
|
||||
|
||||
render() {
|
||||
const { className, navigation=false, children, ...props } = this.props;
|
||||
return (
|
||||
<div className={ cn("relative w-full h-full", stl.wrapper) } >
|
||||
<div
|
||||
{ ...props }
|
||||
className={ cn("relative scroll-y h-full", className) }
|
||||
ref={ ref => this.scrollableElement = ref }
|
||||
>
|
||||
{ children }
|
||||
</div>
|
||||
{ navigation &&
|
||||
<div className={ stl.navButtons } >
|
||||
<IconButton size="small" icon="chevron-up" onClick={this.onPrevClick} />
|
||||
<IconButton size="small" icon="chevron-down" onClick={this.onNextClick} className="mt-5" />
|
||||
</div>
|
||||
componentDidUpdate() {
|
||||
if (!this.scrollableElement) return; // is necessary ?
|
||||
if (this.state.autoScroll) {
|
||||
this.scrollableElement.scrollTop = this.scrollableElement.scrollHeight;
|
||||
}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
scrollHandler = (e) => {
|
||||
if (!this.scrollableElement) return;
|
||||
this.setState({
|
||||
autoScroll:
|
||||
this.scrollableElement.scrollHeight - this.scrollableElement.clientHeight - this.scrollableElement.scrollTop <
|
||||
this.props.bottomOffset,
|
||||
});
|
||||
};
|
||||
|
||||
onPrevClick = () => {
|
||||
if (!this.scrollableElement) return;
|
||||
const scEl = this.scrollableElement;
|
||||
let prevItem;
|
||||
for (let i = scEl.children.length - 1; i >= 0; i--) {
|
||||
const child = scEl.children[i];
|
||||
const isScrollable = child.getAttribute('data-scroll-item') === 'true';
|
||||
if (isScrollable && child.offsetTop < scEl.scrollTop) {
|
||||
prevItem = child;
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (!prevItem) return;
|
||||
scEl.scrollTop = prevItem.offsetTop;
|
||||
};
|
||||
|
||||
onNextClick = () => {
|
||||
if (!this.scrollableElement) return;
|
||||
const scEl = this.scrollableElement;
|
||||
let nextItem;
|
||||
for (let i = 0; i < scEl.children.length; i++) {
|
||||
const child = scEl.children[i];
|
||||
const isScrollable = child.getAttribute('data-scroll-item') === 'true';
|
||||
if (isScrollable && child.offsetTop > scEl.scrollTop + 20) {
|
||||
// ?
|
||||
nextItem = child;
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (!nextItem) return;
|
||||
scEl.scrollTop = nextItem.offsetTop;
|
||||
};
|
||||
|
||||
render() {
|
||||
const { className, navigation = false, children, ...props } = this.props;
|
||||
return (
|
||||
<div className={cn('relative w-full h-full', stl.wrapper)}>
|
||||
<div {...props} className={cn('relative scroll-y h-full', className)} ref={(ref) => (this.scrollableElement = ref)}>
|
||||
{children}
|
||||
</div>
|
||||
{navigation && (
|
||||
<div className={stl.navButtons}>
|
||||
<IconButton size="small" icon="chevron-up" onClick={this.onPrevClick} />
|
||||
<IconButton size="small" icon="chevron-down" onClick={this.onNextClick} className="mt-5" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,14 +4,15 @@ import ConsoleContent from './ConsoleContent';
|
|||
|
||||
@connectPlayer(state => ({
|
||||
logs: state.logList,
|
||||
time: state.time,
|
||||
// time: state.time,
|
||||
livePlay: state.livePlay,
|
||||
listNow: state.logListNow,
|
||||
}))
|
||||
export default class Console extends React.PureComponent {
|
||||
render() {
|
||||
const { logs, time } = this.props;
|
||||
const { logs, time, listNow } = this.props;
|
||||
return (
|
||||
<ConsoleContent jump={!this.props.livePlay && jump} logs={logs} time={time} />
|
||||
<ConsoleContent jump={!this.props.livePlay && jump} logs={logs} lastIndex={listNow.length - 1} />
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,126 +3,113 @@ import cn from 'classnames';
|
|||
import { getRE } from 'App/utils';
|
||||
import { Icon, NoContent, Tabs, Input } from 'UI';
|
||||
import { jump } from 'Player';
|
||||
import { LEVEL } from 'Types/session/log';
|
||||
import { LEVEL } from 'Types/session/log';
|
||||
import Autoscroll from '../Autoscroll';
|
||||
import BottomBlock from '../BottomBlock';
|
||||
import stl from './console.module.css';
|
||||
|
||||
|
||||
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,
|
||||
[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 }));
|
||||
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) => <div className={ cn({ "ml-20": i !== 0 }) }>{ line }</div>)
|
||||
if (typeof s !== 'string') return '';
|
||||
return s.split('\n').map((line, i) => <div className={cn({ 'ml-20': i !== 0 })}>{line}</div>);
|
||||
}
|
||||
|
||||
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, 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)
|
||||
);
|
||||
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
|
||||
);
|
||||
|
||||
const lastIndex = filtered.filter(item => item.time <= time).length - 1;
|
||||
|
||||
return (
|
||||
<>
|
||||
<BottomBlock style={{ height: 300 + additionalHeight + 'px' }}>
|
||||
<BottomBlock.Header showClose={!isResult}>
|
||||
<div className="flex items-center">
|
||||
<span className="font-semibold color-gray-medium mr-4">Console</span>
|
||||
<Tabs
|
||||
tabs={ TABS }
|
||||
active={ activeTab }
|
||||
onClick={ this.onTabClick }
|
||||
border={ false }
|
||||
/>
|
||||
</div>
|
||||
<Input
|
||||
className="input-small"
|
||||
placeholder="Filter by keyword"
|
||||
icon="search"
|
||||
iconPosition="left"
|
||||
name="filter"
|
||||
onChange={ this.onFilterChange }
|
||||
/>
|
||||
</BottomBlock.Header>
|
||||
<BottomBlock.Content>
|
||||
<NoContent
|
||||
size="small"
|
||||
show={ filtered.length === 0 }
|
||||
>
|
||||
<Autoscroll>
|
||||
{ filtered.map((l, index) => (
|
||||
<div
|
||||
key={ l.key }
|
||||
className={ cn(stl.line, {
|
||||
"info": !l.isYellow() && !l.isRed(),
|
||||
"warn": l.isYellow(),
|
||||
"error": l.isRed(),
|
||||
"cursor-pointer": !isResult,
|
||||
[stl.activeRow] : lastIndex === index
|
||||
}) }
|
||||
data-scroll-item={ l.isRed() }
|
||||
onClick={ () => !isResult && 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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<>
|
||||
<BottomBlock style={{ height: 300 + additionalHeight + 'px' }}>
|
||||
<BottomBlock.Header showClose={!isResult}>
|
||||
<div className="flex items-center">
|
||||
<span className="font-semibold color-gray-medium mr-4">Console</span>
|
||||
<Tabs tabs={TABS} active={activeTab} onClick={this.onTabClick} border={false} />
|
||||
</div>
|
||||
<Input
|
||||
className="input-small"
|
||||
placeholder="Filter by keyword"
|
||||
icon="search"
|
||||
iconPosition="left"
|
||||
name="filter"
|
||||
onChange={this.onFilterChange}
|
||||
/>
|
||||
</BottomBlock.Header>
|
||||
<BottomBlock.Content>
|
||||
<NoContent size="small" show={filtered.length === 0}>
|
||||
<Autoscroll>
|
||||
{filtered.map((l, index) => (
|
||||
<div
|
||||
key={l.key}
|
||||
className={cn(stl.line, {
|
||||
info: !l.isYellow() && !l.isRed(),
|
||||
warn: l.isYellow(),
|
||||
error: l.isRed(),
|
||||
'cursor-pointer': !isResult,
|
||||
[stl.activeRow]: lastIndex === index,
|
||||
})}
|
||||
data-scroll-item={l.isRed()}
|
||||
onClick={() => !isResult && 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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,170 +10,154 @@ import { renderName, renderDuration } from '../Network';
|
|||
import { connect } from 'react-redux';
|
||||
import { setTimelinePointer } from 'Duck/sessions';
|
||||
|
||||
@connectPlayer(state => ({
|
||||
list: state.fetchList,
|
||||
livePlay: state.livePlay,
|
||||
@connectPlayer((state) => ({
|
||||
list: state.fetchList,
|
||||
listNow: state.fetchListNow,
|
||||
livePlay: state.livePlay,
|
||||
}))
|
||||
@connect(state => ({
|
||||
timelinePointer: state.getIn(['sessions', 'timelinePointer']),
|
||||
}), { setTimelinePointer })
|
||||
@connect(
|
||||
(state) => ({
|
||||
timelinePointer: state.getIn(['sessions', 'timelinePointer']),
|
||||
}),
|
||||
{ setTimelinePointer }
|
||||
)
|
||||
export default class Fetch extends React.PureComponent {
|
||||
state = {
|
||||
filter: "",
|
||||
filteredList: this.props.list,
|
||||
current: null,
|
||||
currentIndex: 0,
|
||||
showFetchDetails: false,
|
||||
hasNextError: false,
|
||||
hasPreviousError: false,
|
||||
}
|
||||
|
||||
onFilterChange = ({ target: { value } }) => {
|
||||
const { list } = this.props;
|
||||
const filterRE = getRE(value, 'i');
|
||||
const filtered = list
|
||||
.filter((r) => filterRE.test(r.name) || filterRE.test(r.url) || filterRE.test(r.method) || filterRE.test(r.status));
|
||||
this.setState({ filter: value, filteredList: value ? filtered : list, currentIndex: 0 });
|
||||
}
|
||||
state = {
|
||||
filter: '',
|
||||
filteredList: this.props.list,
|
||||
current: null,
|
||||
currentIndex: 0,
|
||||
showFetchDetails: false,
|
||||
hasNextError: false,
|
||||
hasPreviousError: false,
|
||||
};
|
||||
|
||||
setCurrent = (item, index) => {
|
||||
if (!this.props.livePlay) {
|
||||
pause();
|
||||
jump(item.time)
|
||||
onFilterChange = ({ target: { value } }) => {
|
||||
const { list } = this.props;
|
||||
const filterRE = getRE(value, 'i');
|
||||
const filtered = list.filter((r) => filterRE.test(r.name) || filterRE.test(r.url) || filterRE.test(r.method) || filterRE.test(r.status));
|
||||
this.setState({ filter: value, filteredList: value ? filtered : list, currentIndex: 0 });
|
||||
};
|
||||
|
||||
setCurrent = (item, index) => {
|
||||
if (!this.props.livePlay) {
|
||||
pause();
|
||||
jump(item.time);
|
||||
}
|
||||
this.setState({ current: item, currentIndex: index });
|
||||
};
|
||||
|
||||
onRowClick = (item, index) => {
|
||||
if (!this.props.livePlay) {
|
||||
pause();
|
||||
}
|
||||
this.setState({ current: item, currentIndex: index, showFetchDetails: true });
|
||||
this.props.setTimelinePointer(null);
|
||||
};
|
||||
|
||||
closeModal = () => this.setState({ current: null, showFetchDetails: false });
|
||||
|
||||
nextClickHander = () => {
|
||||
// const { list } = this.props;
|
||||
const { currentIndex, filteredList } = this.state;
|
||||
|
||||
if (currentIndex === filteredList.length - 1) return;
|
||||
const newIndex = currentIndex + 1;
|
||||
this.setCurrent(filteredList[newIndex], newIndex);
|
||||
this.setState({ showFetchDetails: true });
|
||||
};
|
||||
|
||||
prevClickHander = () => {
|
||||
// const { list } = this.props;
|
||||
const { currentIndex, filteredList } = this.state;
|
||||
|
||||
if (currentIndex === 0) return;
|
||||
const newIndex = currentIndex - 1;
|
||||
this.setCurrent(filteredList[newIndex], newIndex);
|
||||
this.setState({ showFetchDetails: true });
|
||||
};
|
||||
|
||||
render() {
|
||||
const { listNow } = this.props;
|
||||
const { current, currentIndex, showFetchDetails, filteredList } = this.state;
|
||||
return (
|
||||
<React.Fragment>
|
||||
<SlideModal
|
||||
right
|
||||
size="middle"
|
||||
title={
|
||||
<div className="flex justify-between">
|
||||
<h1>Fetch Request</h1>
|
||||
<div className="flex items-center">
|
||||
<div className="flex items-center">
|
||||
<span className="mr-2 color-gray-medium uppercase text-base">Status</span>
|
||||
<Label data-red={current && current.status >= 400} data-green={current && current.status < 400}>
|
||||
<div className="uppercase w-16 justify-center code-font text-lg">{current && current.status}</div>
|
||||
</Label>
|
||||
</div>
|
||||
<CloseButton onClick={this.closeModal} size="18" className="ml-2" />
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
isDisplayed={current != null && showFetchDetails}
|
||||
content={
|
||||
current &&
|
||||
showFetchDetails && (
|
||||
<FetchDetails
|
||||
resource={current}
|
||||
nextClick={this.nextClickHander}
|
||||
prevClick={this.prevClickHander}
|
||||
first={currentIndex === 0}
|
||||
last={currentIndex === filteredList.length - 1}
|
||||
/>
|
||||
)
|
||||
}
|
||||
onClose={this.closeModal}
|
||||
/>
|
||||
<BottomBlock>
|
||||
<BottomBlock.Header>
|
||||
<h4 className="text-lg">Fetch</h4>
|
||||
<div className="flex items-center">
|
||||
<Input
|
||||
className="input-small"
|
||||
placeholder="Filter"
|
||||
icon="search"
|
||||
iconPosition="left"
|
||||
name="filter"
|
||||
onChange={this.onFilterChange}
|
||||
/>
|
||||
</div>
|
||||
</BottomBlock.Header>
|
||||
<BottomBlock.Content>
|
||||
<NoContent size="small" show={filteredList.length === 0}>
|
||||
<TimeTable rows={filteredList} onRowClick={this.onRowClick} hoverable navigation activeIndex={listNow.length - 1}>
|
||||
{[
|
||||
{
|
||||
label: 'Status',
|
||||
dataKey: 'status',
|
||||
width: 70,
|
||||
},
|
||||
{
|
||||
label: 'Method',
|
||||
dataKey: 'method',
|
||||
width: 60,
|
||||
},
|
||||
{
|
||||
label: 'Name',
|
||||
width: 240,
|
||||
render: renderName,
|
||||
},
|
||||
{
|
||||
label: 'Time',
|
||||
width: 80,
|
||||
render: renderDuration,
|
||||
},
|
||||
]}
|
||||
</TimeTable>
|
||||
</NoContent>
|
||||
</BottomBlock.Content>
|
||||
</BottomBlock>
|
||||
</React.Fragment>
|
||||
);
|
||||
}
|
||||
this.setState({ current: item, currentIndex: index });
|
||||
}
|
||||
|
||||
onRowClick = (item, index) => {
|
||||
if (!this.props.livePlay) {
|
||||
pause();
|
||||
}
|
||||
this.setState({ current: item, currentIndex: index, showFetchDetails: true });
|
||||
this.props.setTimelinePointer(null);
|
||||
}
|
||||
|
||||
closeModal = () => this.setState({ current: null, showFetchDetails: false });
|
||||
|
||||
nextClickHander = () => {
|
||||
// const { list } = this.props;
|
||||
const { currentIndex, filteredList } = this.state;
|
||||
|
||||
if (currentIndex === filteredList.length - 1) return;
|
||||
const newIndex = currentIndex + 1;
|
||||
this.setCurrent(filteredList[newIndex], newIndex);
|
||||
this.setState({ showFetchDetails: true });
|
||||
}
|
||||
|
||||
prevClickHander = () => {
|
||||
// const { list } = this.props;
|
||||
const { currentIndex, filteredList } = this.state;
|
||||
|
||||
if (currentIndex === 0) return;
|
||||
const newIndex = currentIndex - 1;
|
||||
this.setCurrent(filteredList[newIndex], newIndex);
|
||||
this.setState({ showFetchDetails: true });
|
||||
}
|
||||
|
||||
static getDerivedStateFromProps(nextProps, prevState) {
|
||||
const { filteredList } = prevState;
|
||||
if (nextProps.timelinePointer) {
|
||||
let activeItem = filteredList.find((r) => r.time >= nextProps.timelinePointer.time);
|
||||
activeItem = activeItem || filteredList[filteredList.length - 1];
|
||||
return {
|
||||
current: activeItem,
|
||||
currentIndex: filteredList.indexOf(activeItem),
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
// const { list } = this.props;
|
||||
const { current, currentIndex, showFetchDetails, filteredList } = this.state;
|
||||
return (
|
||||
<React.Fragment>
|
||||
<SlideModal
|
||||
right
|
||||
size="middle"
|
||||
title={
|
||||
<div className="flex justify-between">
|
||||
<h1>Fetch Request</h1>
|
||||
<div className="flex items-center">
|
||||
<div className="flex items-center">
|
||||
<span className="mr-2 color-gray-medium uppercase text-base">Status</span>
|
||||
<Label
|
||||
data-red={current && current.status >= 400}
|
||||
data-green={current && current.status < 400}
|
||||
>
|
||||
<div className="uppercase w-16 justify-center code-font text-lg">{current && current.status}</div>
|
||||
</Label>
|
||||
</div>
|
||||
<CloseButton onClick={ this.closeModal } size="18" className="ml-2" />
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
isDisplayed={ current != null && showFetchDetails }
|
||||
content={ current && showFetchDetails &&
|
||||
<FetchDetails
|
||||
resource={ current }
|
||||
nextClick={this.nextClickHander}
|
||||
prevClick={this.prevClickHander}
|
||||
first={currentIndex === 0}
|
||||
last={currentIndex === filteredList.length - 1}
|
||||
/>
|
||||
}
|
||||
onClose={ this.closeModal }
|
||||
/>
|
||||
<BottomBlock>
|
||||
<BottomBlock.Header>
|
||||
<h4 className="text-lg">Fetch</h4>
|
||||
<div className="flex items-center">
|
||||
<Input
|
||||
className="input-small"
|
||||
placeholder="Filter"
|
||||
icon="search"
|
||||
iconPosition="left"
|
||||
name="filter"
|
||||
onChange={ this.onFilterChange }
|
||||
/>
|
||||
</div>
|
||||
</BottomBlock.Header>
|
||||
<BottomBlock.Content>
|
||||
<NoContent
|
||||
size="small"
|
||||
show={ filteredList.length === 0}
|
||||
>
|
||||
<TimeTable
|
||||
rows={ filteredList }
|
||||
onRowClick={ this.onRowClick }
|
||||
hoverable
|
||||
navigation
|
||||
activeIndex={currentIndex}
|
||||
>
|
||||
{[
|
||||
{
|
||||
label: "Status",
|
||||
dataKey: 'status',
|
||||
width: 70,
|
||||
}, {
|
||||
label: "Method",
|
||||
dataKey: "method",
|
||||
width: 60,
|
||||
}, {
|
||||
label: "Name",
|
||||
width: 240,
|
||||
render: renderName,
|
||||
},
|
||||
{
|
||||
label: "Time",
|
||||
width: 80,
|
||||
render: renderDuration,
|
||||
}
|
||||
]}
|
||||
</TimeTable>
|
||||
</NoContent>
|
||||
</BottomBlock.Content>
|
||||
</BottomBlock>
|
||||
</React.Fragment>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -78,6 +78,7 @@ export function renderDuration(r) {
|
|||
playing: state.playing,
|
||||
domBuildingTime: state.domBuildingTime,
|
||||
fetchPresented: state.fetchList.length > 0,
|
||||
listNow: state.resourceListNow,
|
||||
}))
|
||||
@connect(
|
||||
(state) => ({
|
||||
|
|
@ -110,31 +111,16 @@ export default class Network extends React.PureComponent {
|
|||
this.setState({ filter: value, filteredList: value ? filtered : resources, currentIndex: 0 });
|
||||
};
|
||||
|
||||
static getDerivedStateFromProps(nextProps, prevState) {
|
||||
const { filteredList } = prevState;
|
||||
if (nextProps.timelinePointer) {
|
||||
const activeItem = filteredList.find((r) => r.time >= nextProps.timelinePointer.time);
|
||||
return {
|
||||
currentIndex: activeItem ? filteredList.indexOf(activeItem) : filteredList.length - 1,
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
const {
|
||||
location,
|
||||
resources,
|
||||
domContentLoadedTime,
|
||||
loadTime,
|
||||
domBuildingTime,
|
||||
fetchPresented,
|
||||
// time,
|
||||
playing,
|
||||
listNow,
|
||||
} = this.props;
|
||||
const { filter, activeTab, currentIndex, filteredList } = this.state;
|
||||
// const filterRE = getRE(filter, 'i');
|
||||
// let filtered = resources.filter(({ type, name }) =>
|
||||
// filterRE.test(name) && (activeTab === ALL || type === TAB_TO_TYPE_MAP[ activeTab ]));
|
||||
const { filteredList } = this.state;
|
||||
const resourcesSize = filteredList.reduce((sum, { decodedBodySize }) => sum + (decodedBodySize || 0), 0);
|
||||
const transferredSize = filteredList.reduce((sum, { headerSize, encodedBodySize }) => sum + (headerSize || 0) + (encodedBodySize || 0), 0);
|
||||
|
||||
|
|
@ -151,7 +137,7 @@ export default class Network extends React.PureComponent {
|
|||
resourcesSize={resourcesSize}
|
||||
transferredSize={transferredSize}
|
||||
onRowClick={this.onRowClick}
|
||||
currentIndex={currentIndex}
|
||||
currentIndex={listNow.length - 0}
|
||||
/>
|
||||
</React.Fragment>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import React from 'react';
|
||||
import { List, AutoSizer } from "react-virtualized";
|
||||
import { List, AutoSizer } from 'react-virtualized';
|
||||
import cn from 'classnames';
|
||||
import { NoContent, IconButton } from 'UI';
|
||||
import { NoContent, IconButton, Button } from 'UI';
|
||||
import { percentOf } from 'App/utils';
|
||||
import { formatMs } from 'App/date';
|
||||
|
||||
|
|
@ -10,58 +10,58 @@ import stl from './timeTable.module.css';
|
|||
|
||||
import autoscrollStl from '../autoscroll.module.css'; //aaa
|
||||
|
||||
|
||||
type Timed = {
|
||||
time: number,
|
||||
}
|
||||
time: number;
|
||||
};
|
||||
|
||||
type Durationed = {
|
||||
duration: number,
|
||||
}
|
||||
duration: number;
|
||||
};
|
||||
|
||||
type CanBeRed = {
|
||||
//+isRed: boolean,
|
||||
isRed: () => boolean,
|
||||
}
|
||||
//+isRed: boolean,
|
||||
isRed: () => boolean;
|
||||
};
|
||||
|
||||
type Row = Timed & Durationed & CanBeRed
|
||||
type Row = Timed & Durationed & CanBeRed;
|
||||
|
||||
type Line = {
|
||||
color: string, // Maybe use typescript?
|
||||
hint?: string,
|
||||
onClick?: any,
|
||||
} & Timed
|
||||
color: string; // Maybe use typescript?
|
||||
hint?: string;
|
||||
onClick?: any;
|
||||
} & Timed;
|
||||
|
||||
type Column = {
|
||||
label: string,
|
||||
width: number,
|
||||
referenceLines?: Array<Line>,
|
||||
style?: Object,
|
||||
} & RenderOrKey
|
||||
label: string;
|
||||
width: number;
|
||||
referenceLines?: Array<Line>;
|
||||
style?: Object;
|
||||
} & RenderOrKey;
|
||||
|
||||
// type RenderOrKey = { // Disjoint?
|
||||
// render: Row => React.Node
|
||||
// render: Row => React.Node
|
||||
// } | {
|
||||
// dataKey: string,
|
||||
// }
|
||||
type RenderOrKey = {
|
||||
render?: (row: Row) => React.ReactNode,
|
||||
key?: string,
|
||||
} | {
|
||||
dataKey: string,
|
||||
}
|
||||
|
||||
type RenderOrKey =
|
||||
| {
|
||||
render?: (row: Row) => React.ReactNode;
|
||||
key?: string;
|
||||
}
|
||||
| {
|
||||
dataKey: string;
|
||||
};
|
||||
|
||||
type Props = {
|
||||
className?: string,
|
||||
rows: Array<Row>,
|
||||
children: Array<Column>
|
||||
}
|
||||
className?: string;
|
||||
rows: Array<Row>;
|
||||
children: Array<Column>;
|
||||
};
|
||||
|
||||
type TimeLineInfo = {
|
||||
timestart: number,
|
||||
timewidth: number,
|
||||
}
|
||||
timestart: number;
|
||||
timewidth: number;
|
||||
};
|
||||
|
||||
type State = TimeLineInfo & typeof initialState;
|
||||
|
||||
|
|
@ -73,266 +73,228 @@ const ROW_HEIGHT = 32;
|
|||
const TIME_SECTIONS_COUNT = 8;
|
||||
const ZERO_TIMEWIDTH = 1000;
|
||||
function formatTime(ms) {
|
||||
if(ms < 0) return "";
|
||||
return formatMs(ms);
|
||||
if (ms < 0) return '';
|
||||
return formatMs(ms);
|
||||
}
|
||||
|
||||
function computeTimeLine(rows: Array<Row>, firstVisibleRowIndex: number, visibleCount): TimeLineInfo {
|
||||
const visibleRows = rows.slice(firstVisibleRowIndex, firstVisibleRowIndex + visibleCount + _additionalHeight);
|
||||
let timestart = visibleRows.length > 0
|
||||
? Math.min(...visibleRows.map(r => r.time))
|
||||
: 0;
|
||||
const timeend = visibleRows.length > 0
|
||||
? Math.max(...visibleRows.map(r => r.time + r.duration))
|
||||
: 0;
|
||||
let timewidth = timeend - timestart;
|
||||
const offset = timewidth / 70;
|
||||
if (timestart >= offset) {
|
||||
timestart -= offset;
|
||||
}
|
||||
timewidth *= 1.5; // += offset;
|
||||
if (timewidth === 0) {
|
||||
timewidth = ZERO_TIMEWIDTH;
|
||||
}
|
||||
return {
|
||||
timestart,
|
||||
timewidth,
|
||||
};
|
||||
const visibleRows = rows.slice(firstVisibleRowIndex, firstVisibleRowIndex + visibleCount + _additionalHeight);
|
||||
let timestart = visibleRows.length > 0 ? Math.min(...visibleRows.map((r) => r.time)) : 0;
|
||||
const timeend = visibleRows.length > 0 ? Math.max(...visibleRows.map((r) => r.time + r.duration)) : 0;
|
||||
let timewidth = timeend - timestart;
|
||||
const offset = timewidth / 70;
|
||||
if (timestart >= offset) {
|
||||
timestart -= offset;
|
||||
}
|
||||
timewidth *= 1.5; // += offset;
|
||||
if (timewidth === 0) {
|
||||
timewidth = ZERO_TIMEWIDTH;
|
||||
}
|
||||
return {
|
||||
timestart,
|
||||
timewidth,
|
||||
};
|
||||
}
|
||||
|
||||
const initialState = {
|
||||
firstVisibleRowIndex: 0,
|
||||
}
|
||||
firstVisibleRowIndex: 0,
|
||||
};
|
||||
|
||||
export default class TimeTable extends React.PureComponent<Props, State> {
|
||||
state = {
|
||||
...computeTimeLine(this.props.rows, initialState.firstVisibleRowIndex, this.visibleCount),
|
||||
...initialState,
|
||||
}
|
||||
state = {
|
||||
...computeTimeLine(this.props.rows, initialState.firstVisibleRowIndex, this.visibleCount),
|
||||
...initialState,
|
||||
};
|
||||
|
||||
get tableHeight() {
|
||||
return this.props.tableHeight || 195;
|
||||
}
|
||||
|
||||
get visibleCount() {
|
||||
return Math.ceil(this.tableHeight/ROW_HEIGHT);
|
||||
}
|
||||
|
||||
scroller = React.createRef();
|
||||
autoScroll = true;
|
||||
|
||||
// componentDidMount() {
|
||||
// if (this.scroller.current != null) {
|
||||
// this.scroller.current.scrollToRow(this.props.rows.length - 1);
|
||||
// }
|
||||
// }
|
||||
|
||||
componentDidUpdate(prevProps: any, prevState: any) {
|
||||
// if (prevProps.rows.length !== this.props.rows.length &&
|
||||
// this.autoScroll &&
|
||||
// this.scroller.current != null) {
|
||||
// this.scroller.current.scrollToRow(this.props.rows.length);
|
||||
// }
|
||||
if (prevState.firstVisibleRowIndex !== this.state.firstVisibleRowIndex ||
|
||||
(this.props.rows.length <= (this.visibleCount + _additionalHeight) && prevProps.rows.length !== this.props.rows.length)) {
|
||||
this.setState({
|
||||
...computeTimeLine(this.props.rows, this.state.firstVisibleRowIndex, this.visibleCount),
|
||||
});
|
||||
}
|
||||
if (this.props.activeIndex >= 0 && prevProps.activeIndex !== this.props.activeIndex && this.scroller.current != null) {
|
||||
this.scroller.current.scrollToRow(this.props.activeIndex);
|
||||
}
|
||||
}
|
||||
|
||||
onScroll = ({ scrollTop, scrollHeight, clientHeight }:
|
||||
{ scrollTop: number, scrollHeight: number, clientHeight: number }):void => {
|
||||
const firstVisibleRowIndex = Math.floor(scrollTop / ROW_HEIGHT + 0.33);
|
||||
|
||||
if (this.state.firstVisibleRowIndex !== firstVisibleRowIndex) {
|
||||
this.autoScroll = (scrollHeight - clientHeight - scrollTop) < ROW_HEIGHT / 2;
|
||||
this.setState({ firstVisibleRowIndex });
|
||||
}
|
||||
}
|
||||
|
||||
renderRow = ({ index, key, style: rowStyle }: any) => {
|
||||
const { activeIndex } = this.props;
|
||||
const {
|
||||
children: columns,
|
||||
rows,
|
||||
renderPopup,
|
||||
hoverable,
|
||||
onRowClick,
|
||||
} = this.props;
|
||||
const {
|
||||
timestart,
|
||||
timewidth,
|
||||
} = this.state;
|
||||
const row = rows[ index ];
|
||||
return (
|
||||
<div
|
||||
style={ rowStyle }
|
||||
key={ key }
|
||||
className={ cn('border-b border-color-gray-light-shade', stl.row, { [ stl.hoverable ]: hoverable, "error color-red": !!row.isRed && row.isRed(), 'cursor-pointer' : typeof onRowClick === "function", [stl.activeRow] : activeIndex === index }) }
|
||||
onClick={ typeof onRowClick === "function" ? () => onRowClick(row, index) : null }
|
||||
id="table-row"
|
||||
>
|
||||
{ columns.map(({ dataKey, render, width }) => (
|
||||
<div className={ stl.cell } style={{ width: `${width}px`}}>
|
||||
{ render ? render(row) : (row[ dataKey ] || <i className="color-gray-light">{"empty"}</i>) }
|
||||
</div>
|
||||
))}
|
||||
<div className={ cn("relative flex-1 flex", stl.timeBarWrapper)}>
|
||||
<BarRow
|
||||
resource={ row }
|
||||
timestart={ timestart }
|
||||
timewidth={ timewidth }
|
||||
popup={ renderPopup }
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
onPrevClick = () => {
|
||||
let prevRedIndex = -1;
|
||||
for (let i = this.state.firstVisibleRowIndex-1; i >= 0; i--) {
|
||||
if (this.props.rows[ i ].isRed()) {
|
||||
prevRedIndex = i;
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (this.scroller.current != null) {
|
||||
this.scroller.current.scrollToRow(prevRedIndex);
|
||||
}
|
||||
}
|
||||
|
||||
onNextClick = () => {
|
||||
let prevRedIndex = -1;
|
||||
for (let i = this.state.firstVisibleRowIndex+1; i < this.props.rows.length; i++) {
|
||||
if (this.props.rows[ i ].isRed()) {
|
||||
prevRedIndex = i;
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (this.scroller.current != null) {
|
||||
this.scroller.current.scrollToRow(prevRedIndex);
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
const {
|
||||
className,
|
||||
rows,
|
||||
children: columns,
|
||||
navigation=false,
|
||||
referenceLines = [],
|
||||
additionalHeight = 0,
|
||||
activeIndex,
|
||||
} = this.props;
|
||||
const {
|
||||
timewidth,
|
||||
timestart,
|
||||
} = this.state;
|
||||
|
||||
_additionalHeight = additionalHeight;
|
||||
|
||||
const sectionDuration = Math.round(timewidth / TIME_SECTIONS_COUNT);
|
||||
const timeColumns = [];
|
||||
if (timewidth > 0) {
|
||||
for (let i = 0; i < TIME_SECTIONS_COUNT; i++) {
|
||||
timeColumns.push(timestart + i * sectionDuration);
|
||||
}
|
||||
get tableHeight() {
|
||||
return this.props.tableHeight || 195;
|
||||
}
|
||||
|
||||
const visibleRefLines = referenceLines.filter(({ time }) => time > timestart && time < timestart + timewidth);
|
||||
get visibleCount() {
|
||||
return Math.ceil(this.tableHeight / ROW_HEIGHT);
|
||||
}
|
||||
|
||||
const columnsSumWidth = columns.reduce((sum, { width }) => sum + width, 0);
|
||||
scroller = React.createRef();
|
||||
autoScroll = true;
|
||||
|
||||
return (
|
||||
<div className={ cn(className, "relative") }>
|
||||
{ navigation &&
|
||||
<div className={ cn(autoscrollStl.navButtons, "flex items-center") } >
|
||||
<IconButton
|
||||
componentDidMount() {
|
||||
this.scroller.current.scrollToRow(this.props.activeIndex);
|
||||
}
|
||||
|
||||
componentDidUpdate(prevProps: any, prevState: any) {
|
||||
// if (prevProps.rows.length !== this.props.rows.length &&
|
||||
// this.autoScroll &&
|
||||
// this.scroller.current != null) {
|
||||
// this.scroller.current.scrollToRow(this.props.rows.length);
|
||||
// }
|
||||
if (
|
||||
prevState.firstVisibleRowIndex !== this.state.firstVisibleRowIndex ||
|
||||
(this.props.rows.length <= this.visibleCount + _additionalHeight && prevProps.rows.length !== this.props.rows.length)
|
||||
) {
|
||||
this.setState({
|
||||
...computeTimeLine(this.props.rows, this.state.firstVisibleRowIndex, this.visibleCount),
|
||||
});
|
||||
}
|
||||
if (this.props.activeIndex >= 0 && prevProps.activeIndex !== this.props.activeIndex) {
|
||||
this.scroller.current.scrollToRow(this.props.activeIndex);
|
||||
}
|
||||
}
|
||||
|
||||
onScroll = ({ scrollTop, scrollHeight, clientHeight }: { scrollTop: number; scrollHeight: number; clientHeight: number }): void => {
|
||||
const firstVisibleRowIndex = Math.floor(scrollTop / ROW_HEIGHT + 0.33);
|
||||
|
||||
if (this.state.firstVisibleRowIndex !== firstVisibleRowIndex) {
|
||||
this.autoScroll = scrollHeight - clientHeight - scrollTop < ROW_HEIGHT / 2;
|
||||
this.setState({ firstVisibleRowIndex });
|
||||
}
|
||||
};
|
||||
|
||||
renderRow = ({ index, key, style: rowStyle }: any) => {
|
||||
const { activeIndex } = this.props;
|
||||
const { children: columns, rows, renderPopup, hoverable, onRowClick } = this.props;
|
||||
const { timestart, timewidth } = this.state;
|
||||
const row = rows[index];
|
||||
return (
|
||||
<div
|
||||
style={rowStyle}
|
||||
key={key}
|
||||
className={cn('border-b border-color-gray-light-shade', stl.row, {
|
||||
[stl.hoverable]: hoverable,
|
||||
'error color-red': !!row.isRed && row.isRed(),
|
||||
'cursor-pointer': typeof onRowClick === 'function',
|
||||
[stl.activeRow]: activeIndex === index,
|
||||
})}
|
||||
onClick={typeof onRowClick === 'function' ? () => onRowClick(row, index) : null}
|
||||
id="table-row"
|
||||
>
|
||||
{columns.map(({ dataKey, render, width }) => (
|
||||
<div className={stl.cell} style={{ width: `${width}px` }}>
|
||||
{render ? render(row) : row[dataKey] || <i className="color-gray-light">{'empty'}</i>}
|
||||
</div>
|
||||
))}
|
||||
<div className={cn('relative flex-1 flex', stl.timeBarWrapper)}>
|
||||
<BarRow resource={row} timestart={timestart} timewidth={timewidth} popup={renderPopup} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
onPrevClick = () => {
|
||||
let prevRedIndex = -1;
|
||||
for (let i = this.state.firstVisibleRowIndex - 1; i >= 0; i--) {
|
||||
if (this.props.rows[i].isRed()) {
|
||||
prevRedIndex = i;
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (this.scroller.current != null) {
|
||||
this.scroller.current.scrollToRow(prevRedIndex);
|
||||
}
|
||||
};
|
||||
|
||||
onNextClick = () => {
|
||||
let prevRedIndex = -1;
|
||||
for (let i = this.state.firstVisibleRowIndex + 1; i < this.props.rows.length; i++) {
|
||||
if (this.props.rows[i].isRed()) {
|
||||
prevRedIndex = i;
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (this.scroller.current != null) {
|
||||
this.scroller.current.scrollToRow(prevRedIndex);
|
||||
}
|
||||
};
|
||||
|
||||
render() {
|
||||
const { className, rows, children: columns, navigation = false, referenceLines = [], additionalHeight = 0, activeIndex } = this.props;
|
||||
const { timewidth, timestart } = this.state;
|
||||
|
||||
_additionalHeight = additionalHeight;
|
||||
|
||||
const sectionDuration = Math.round(timewidth / TIME_SECTIONS_COUNT);
|
||||
const timeColumns = [];
|
||||
if (timewidth > 0) {
|
||||
for (let i = 0; i < TIME_SECTIONS_COUNT; i++) {
|
||||
timeColumns.push(timestart + i * sectionDuration);
|
||||
}
|
||||
}
|
||||
|
||||
const visibleRefLines = referenceLines.filter(({ time }) => time > timestart && time < timestart + timewidth);
|
||||
|
||||
const columnsSumWidth = columns.reduce((sum, { width }) => sum + width, 0);
|
||||
|
||||
return (
|
||||
<div className={cn(className, 'relative')}>
|
||||
{navigation && (
|
||||
<div className={cn(autoscrollStl.navButtons, 'flex items-center')}>
|
||||
<Button variant="text-primary" icon="chevron-up" onClick={this.onPrevClick} />
|
||||
<Button variant="text-primary" icon="chevron-down" onClick={this.onNextClick} />
|
||||
{/* <IconButton
|
||||
size="small"
|
||||
icon="chevron-up"
|
||||
onClick={this.onPrevClick}
|
||||
/>
|
||||
<IconButton
|
||||
/> */}
|
||||
{/* <IconButton
|
||||
size="small"
|
||||
icon="chevron-down"
|
||||
onClick={this.onNextClick}
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
<div className={ stl.headers }>
|
||||
<div className={ stl.infoHeaders }>
|
||||
{ columns.map(({ label, width }) => (
|
||||
<div
|
||||
className={ stl.headerCell }
|
||||
style={{ width: `${width}px`
|
||||
}}>
|
||||
{ label }
|
||||
</div>
|
||||
)) }
|
||||
</div>
|
||||
<div className={ stl.waterfallHeaders } >
|
||||
{ timeColumns.map((time, i) => (
|
||||
<div
|
||||
className={ stl.timeCell }
|
||||
key={ `tc-${ i }` }
|
||||
>
|
||||
{ formatTime(time) }
|
||||
/> */}
|
||||
</div>
|
||||
)}
|
||||
<div className={stl.headers}>
|
||||
<div className={stl.infoHeaders}>
|
||||
{columns.map(({ label, width }) => (
|
||||
<div className={stl.headerCell} style={{ width: `${width}px` }}>
|
||||
{label}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className={stl.waterfallHeaders}>
|
||||
{timeColumns.map((time, i) => (
|
||||
<div className={stl.timeCell} key={`tc-${i}`}>
|
||||
{formatTime(time)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<NoContent
|
||||
size="small"
|
||||
show={ rows.length === 0 }
|
||||
>
|
||||
<div className="relative">
|
||||
<div className={ stl.timePart } style={{ left: `${ columnsSumWidth }px` }}>
|
||||
{ timeColumns.map((_, index) => (
|
||||
<div
|
||||
key={ `tc-${ index }` }
|
||||
className={ stl.timeCell }
|
||||
/>
|
||||
))
|
||||
}
|
||||
{ visibleRefLines.map(({ time, color, onClick }) => (
|
||||
<div
|
||||
className={cn(stl.refLine, `bg-${color}`)}
|
||||
style={{
|
||||
left: `${ percentOf(time - timestart, timewidth) }%`,
|
||||
cursor: typeof onClick === "function" ? "click" : "auto",
|
||||
}}
|
||||
onClick={ onClick }
|
||||
/>
|
||||
))}
|
||||
<NoContent size="small" show={rows.length === 0}>
|
||||
<div className="relative">
|
||||
<div className={stl.timePart} style={{ left: `${columnsSumWidth}px` }}>
|
||||
{timeColumns.map((_, index) => (
|
||||
<div key={`tc-${index}`} className={stl.timeCell} />
|
||||
))}
|
||||
{visibleRefLines.map(({ time, color, onClick }) => (
|
||||
<div
|
||||
className={cn(stl.refLine, `bg-${color}`)}
|
||||
style={{
|
||||
left: `${percentOf(time - timestart, timewidth)}%`,
|
||||
cursor: typeof onClick === 'function' ? 'click' : 'auto',
|
||||
}}
|
||||
onClick={onClick}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
<AutoSizer disableHeight>
|
||||
{({ width }) => (
|
||||
<List
|
||||
ref={this.scroller}
|
||||
className={stl.list}
|
||||
height={this.tableHeight + additionalHeight}
|
||||
width={width}
|
||||
overscanRowCount={20}
|
||||
rowCount={rows.length}
|
||||
rowHeight={ROW_HEIGHT}
|
||||
rowRenderer={this.renderRow}
|
||||
onScroll={this.onScroll}
|
||||
scrollToAlignment="start"
|
||||
forceUpdateProp={timestart | timewidth | activeIndex}
|
||||
/>
|
||||
)}
|
||||
</AutoSizer>
|
||||
</div>
|
||||
</NoContent>
|
||||
</div>
|
||||
<AutoSizer disableHeight>
|
||||
{({ width }) => (
|
||||
<List
|
||||
ref={ this.scroller }
|
||||
className={ stl.list }
|
||||
height={this.tableHeight + additionalHeight}
|
||||
width={width}
|
||||
overscanRowCount={20}
|
||||
rowCount={rows.length}
|
||||
rowHeight={ROW_HEIGHT}
|
||||
rowRenderer={this.renderRow}
|
||||
onScroll={ this.onScroll }
|
||||
scrollToAlignment="start"
|
||||
forceUpdateProp={ timestart | timewidth | activeIndex }
|
||||
/>
|
||||
)}
|
||||
</AutoSizer>
|
||||
</div>
|
||||
</NoContent>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
.navButtons {
|
||||
position: absolute;
|
||||
right: 260px;
|
||||
top: -34px;
|
||||
top: -39px;
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ import { CircularLoader, Icon } from 'UI';
|
|||
|
||||
interface Props {
|
||||
className?: string;
|
||||
children: React.ReactNode;
|
||||
children?: React.ReactNode;
|
||||
onClick?: () => void;
|
||||
disabled?: boolean;
|
||||
type?: 'button' | 'submit' | 'reset';
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue