change(ui): remove dead code
This commit is contained in:
sylenien
Delirium
parent
96f93aa0d4
commit
3d2107fe98
2 changed files with 197 additions and 401 deletions
|
|
@ -482,7 +482,6 @@ export default class Controls extends React.Component {
|
|||
containerClassName="mx-2"
|
||||
/>
|
||||
)}
|
||||
{/* {!live && <div className={cn('h-14 border-r bg-gray-light ml-6')} />} */}
|
||||
{!live && (
|
||||
<Tooltip title="Fullscreen" delay={0} position="top-end" className="mx-4">
|
||||
{this.controlIcon(
|
||||
|
|
|
|||
|
|
@ -12,427 +12,224 @@ import TooltipContainer from './components/TooltipContainer';
|
|||
const BOUNDRY = 0;
|
||||
|
||||
function getTimelinePosition(value, scale) {
|
||||
const pos = value * scale;
|
||||
const pos = value * scale;
|
||||
|
||||
return pos > 100 ? 99 : pos;
|
||||
return pos > 100 ? 99 : pos;
|
||||
}
|
||||
|
||||
const getPointerIcon = (type) => {
|
||||
// exception,
|
||||
switch (type) {
|
||||
case 'fetch':
|
||||
return 'funnel/file-earmark-minus-fill';
|
||||
case 'exception':
|
||||
return 'funnel/exclamation-circle-fill';
|
||||
case 'log':
|
||||
return 'funnel/exclamation-circle-fill';
|
||||
case 'stack':
|
||||
return 'funnel/patch-exclamation-fill';
|
||||
case 'resource':
|
||||
return 'funnel/file-earmark-minus-fill';
|
||||
|
||||
case 'dead_click':
|
||||
return 'funnel/dizzy';
|
||||
case 'click_rage':
|
||||
return 'funnel/dizzy';
|
||||
case 'excessive_scrolling':
|
||||
return 'funnel/mouse';
|
||||
case 'bad_request':
|
||||
return 'funnel/file-medical-alt';
|
||||
case 'missing_resource':
|
||||
return 'funnel/file-earmark-minus-fill';
|
||||
case 'memory':
|
||||
return 'funnel/sd-card';
|
||||
case 'cpu':
|
||||
return 'funnel/microchip';
|
||||
case 'slow_resource':
|
||||
return 'funnel/hourglass-top';
|
||||
case 'slow_page_load':
|
||||
return 'funnel/hourglass-top';
|
||||
case 'crash':
|
||||
return 'funnel/file-exclamation';
|
||||
case 'js_exception':
|
||||
return 'funnel/exclamation-circle-fill';
|
||||
}
|
||||
|
||||
return 'info';
|
||||
};
|
||||
|
||||
let deboucneJump = () => null;
|
||||
let debounceTooltipChange = () => null;
|
||||
@connectPlayer((state) => ({
|
||||
playing: state.playing,
|
||||
time: state.time,
|
||||
skipIntervals: state.skipIntervals,
|
||||
events: state.eventList,
|
||||
skip: state.skip,
|
||||
// not updating properly rn
|
||||
// skipToIssue: state.skipToIssue,
|
||||
disabled: state.cssLoading || state.messagesLoading || state.markedTargets,
|
||||
endTime: state.endTime,
|
||||
live: state.live,
|
||||
logList: state.logList,
|
||||
exceptionsList: state.exceptionsList,
|
||||
resourceList: state.resourceList,
|
||||
stackList: state.stackList,
|
||||
fetchList: state.fetchList,
|
||||
playing: state.playing,
|
||||
time: state.time,
|
||||
skipIntervals: state.skipIntervals,
|
||||
events: state.eventList,
|
||||
skip: state.skip,
|
||||
// not updating properly rn
|
||||
// skipToIssue: state.skipToIssue,
|
||||
disabled: state.cssLoading || state.messagesLoading || state.markedTargets,
|
||||
endTime: state.endTime,
|
||||
live: state.live,
|
||||
logList: state.logList,
|
||||
exceptionsList: state.exceptionsList,
|
||||
resourceList: state.resourceList,
|
||||
stackList: state.stackList,
|
||||
fetchList: state.fetchList,
|
||||
}))
|
||||
@connect(
|
||||
(state) => ({
|
||||
issues: state.getIn(['sessions', 'current', 'issues']),
|
||||
startedAt: state.getIn(['sessions', 'current', 'startedAt']),
|
||||
clickRageTime: state.getIn(['sessions', 'current', 'clickRage']) && state.getIn(['sessions', 'current', 'clickRageTime']),
|
||||
returningLocationTime:
|
||||
state.getIn(['sessions', 'current', 'returningLocation']) && state.getIn(['sessions', 'current', 'returningLocationTime']),
|
||||
tooltipVisible: state.getIn(['sessions', 'timeLineTooltip', 'isVisible']),
|
||||
}),
|
||||
{ setTimelinePointer, setTimelineHoverTime }
|
||||
(state) => ({
|
||||
issues: state.getIn(['sessions', 'current', 'issues']),
|
||||
startedAt: state.getIn(['sessions', 'current', 'startedAt']),
|
||||
clickRageTime:
|
||||
state.getIn(['sessions', 'current', 'clickRage']) &&
|
||||
state.getIn(['sessions', 'current', 'clickRageTime']),
|
||||
returningLocationTime:
|
||||
state.getIn(['sessions', 'current', 'returningLocation']) &&
|
||||
state.getIn(['sessions', 'current', 'returningLocationTime']),
|
||||
tooltipVisible: state.getIn(['sessions', 'timeLineTooltip', 'isVisible']),
|
||||
}),
|
||||
{ setTimelinePointer, setTimelineHoverTime }
|
||||
)
|
||||
export default class Timeline extends React.PureComponent {
|
||||
progressRef = React.createRef();
|
||||
timelineRef = React.createRef();
|
||||
wasPlaying = false;
|
||||
progressRef = React.createRef();
|
||||
timelineRef = React.createRef();
|
||||
wasPlaying = false;
|
||||
|
||||
seekProgress = (e) => {
|
||||
const time = this.getTime(e);
|
||||
this.props.jump(time);
|
||||
this.hideTimeTooltip();
|
||||
};
|
||||
seekProgress = (e) => {
|
||||
const time = this.getTime(e);
|
||||
this.props.jump(time);
|
||||
this.hideTimeTooltip();
|
||||
};
|
||||
|
||||
loadAndSeek = async (e) => {
|
||||
e.persist();
|
||||
await toggleTimetravel();
|
||||
loadAndSeek = async (e) => {
|
||||
e.persist();
|
||||
await toggleTimetravel();
|
||||
|
||||
setTimeout(() => {
|
||||
this.seekProgress(e)
|
||||
})
|
||||
setTimeout(() => {
|
||||
this.seekProgress(e);
|
||||
});
|
||||
};
|
||||
|
||||
jumpToTime = (e) => {
|
||||
if (this.props.live && !this.props.liveTimeTravel) {
|
||||
this.loadAndSeek(e);
|
||||
} else {
|
||||
this.seekProgress(e);
|
||||
}
|
||||
};
|
||||
|
||||
getTime = (e, customEndTime) => {
|
||||
const { endTime } = this.props;
|
||||
const p = e.nativeEvent.offsetX / e.target.offsetWidth;
|
||||
const targetTime = customEndTime || endTime;
|
||||
const time = Math.max(Math.round(p * targetTime), 0);
|
||||
|
||||
return time;
|
||||
};
|
||||
|
||||
createEventClickHandler = (pointer) => (e) => {
|
||||
e.stopPropagation();
|
||||
this.props.jump(pointer.time);
|
||||
this.props.setTimelinePointer(pointer);
|
||||
};
|
||||
|
||||
componentDidMount() {
|
||||
const { issues } = this.props;
|
||||
const skipToIssue = Controls.updateSkipToIssue();
|
||||
const firstIssue = issues.get(0);
|
||||
deboucneJump = debounce(this.props.jump, 500);
|
||||
debounceTooltipChange = debounce(this.props.setTimelineHoverTime, 50);
|
||||
|
||||
if (firstIssue && skipToIssue) {
|
||||
this.props.jump(firstIssue.time);
|
||||
}
|
||||
}
|
||||
|
||||
onDragEnd = () => {
|
||||
const { live, liveTimeTravel } = this.props;
|
||||
if (live && !liveTimeTravel) return;
|
||||
|
||||
if (this.wasPlaying) {
|
||||
this.props.togglePlay();
|
||||
}
|
||||
};
|
||||
|
||||
onDrag = (offset) => {
|
||||
const { endTime, live, liveTimeTravel } = this.props;
|
||||
if (live && !liveTimeTravel) return;
|
||||
|
||||
const p = (offset.x - BOUNDRY) / this.progressRef.current.offsetWidth;
|
||||
const time = Math.max(Math.round(p * endTime), 0);
|
||||
deboucneJump(time);
|
||||
this.hideTimeTooltip();
|
||||
if (this.props.playing) {
|
||||
this.wasPlaying = true;
|
||||
this.props.pause();
|
||||
}
|
||||
};
|
||||
|
||||
getLiveTime = (e) => {
|
||||
const { startedAt } = this.props;
|
||||
const duration = new Date().getTime() - startedAt;
|
||||
const p = e.nativeEvent.offsetX / e.target.offsetWidth;
|
||||
const time = Math.max(Math.round(p * duration), 0);
|
||||
|
||||
return [time, duration];
|
||||
};
|
||||
|
||||
showTimeTooltip = (e) => {
|
||||
if (e.target !== this.progressRef.current && e.target !== this.timelineRef.current) {
|
||||
return this.props.tooltipVisible && this.hideTimeTooltip();
|
||||
}
|
||||
|
||||
jumpToTime = (e) => {
|
||||
if (this.props.live && !this.props.liveTimeTravel) {
|
||||
this.loadAndSeek(e)
|
||||
} else {
|
||||
this.seekProgress(e)
|
||||
}
|
||||
const { live } = this.props;
|
||||
let timeLineTooltip;
|
||||
|
||||
if (live) {
|
||||
const [time, duration] = this.getLiveTime(e);
|
||||
timeLineTooltip = {
|
||||
time: duration - time,
|
||||
offset: e.nativeEvent.offsetX,
|
||||
isVisible: true,
|
||||
};
|
||||
} else {
|
||||
const time = this.getTime(e);
|
||||
timeLineTooltip = {
|
||||
time: time,
|
||||
offset: e.nativeEvent.offsetX,
|
||||
isVisible: true,
|
||||
};
|
||||
}
|
||||
|
||||
getTime = (e, customEndTime) => {
|
||||
const { endTime } = this.props;
|
||||
const p = e.nativeEvent.offsetX / e.target.offsetWidth;
|
||||
const targetTime = customEndTime || endTime
|
||||
const time = Math.max(Math.round(p * targetTime), 0);
|
||||
debounceTooltipChange(timeLineTooltip);
|
||||
};
|
||||
|
||||
return time;
|
||||
};
|
||||
hideTimeTooltip = () => {
|
||||
const timeLineTooltip = { isVisible: false };
|
||||
debounceTooltipChange(timeLineTooltip);
|
||||
};
|
||||
|
||||
createEventClickHandler = (pointer) => (e) => {
|
||||
e.stopPropagation();
|
||||
this.props.jump(pointer.time);
|
||||
this.props.setTimelinePointer(pointer);
|
||||
};
|
||||
render() {
|
||||
const { events, skip, skipIntervals, disabled, endTime, live } = this.props;
|
||||
|
||||
componentDidMount() {
|
||||
const { issues } = this.props;
|
||||
const skipToIssue = Controls.updateSkipToIssue();
|
||||
const firstIssue = issues.get(0);
|
||||
deboucneJump = debounce(this.props.jump, 500);
|
||||
debounceTooltipChange = debounce(this.props.setTimelineHoverTime, 50);
|
||||
const scale = 100 / endTime;
|
||||
|
||||
if (firstIssue && skipToIssue) {
|
||||
this.props.jump(firstIssue.time);
|
||||
}
|
||||
}
|
||||
return (
|
||||
<div
|
||||
className="flex items-center absolute w-full"
|
||||
style={{
|
||||
top: '-4px',
|
||||
zIndex: 100,
|
||||
padding: `0 ${BOUNDRY}px`,
|
||||
maxWidth: 'calc(100% - 1rem)',
|
||||
left: '0.5rem',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className={stl.progress}
|
||||
onClick={disabled ? null : this.jumpToTime}
|
||||
ref={this.progressRef}
|
||||
role="button"
|
||||
onMouseMoveCapture={this.showTimeTooltip}
|
||||
onMouseEnter={this.showTimeTooltip}
|
||||
onMouseLeave={this.hideTimeTooltip}
|
||||
>
|
||||
<TooltipContainer live={live} />
|
||||
{/* custo color is live */}
|
||||
<DraggableCircle
|
||||
left={this.props.time * scale}
|
||||
onDrop={this.onDragEnd}
|
||||
live={this.props.live}
|
||||
/>
|
||||
<CustomDragLayer
|
||||
onDrag={this.onDrag}
|
||||
minX={BOUNDRY}
|
||||
maxX={this.progressRef.current && this.progressRef.current.offsetWidth + BOUNDRY}
|
||||
/>
|
||||
<TimeTracker scale={scale} />
|
||||
|
||||
onDragEnd = () => {
|
||||
const { live, liveTimeTravel } = this.props;
|
||||
if (live && !liveTimeTravel) return;
|
||||
{skip &&
|
||||
skipIntervals.map((interval) => (
|
||||
<div
|
||||
key={interval.start}
|
||||
className={stl.skipInterval}
|
||||
style={{
|
||||
left: `${getTimelinePosition(interval.start, scale)}%`,
|
||||
width: `${(interval.end - interval.start) * scale}%`,
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
<div className={stl.timeline} ref={this.timelineRef} />
|
||||
|
||||
if (this.wasPlaying) {
|
||||
this.props.togglePlay();
|
||||
}
|
||||
};
|
||||
|
||||
onDrag = (offset) => {
|
||||
const { endTime, live, liveTimeTravel } = this.props;
|
||||
if (live && !liveTimeTravel) return;
|
||||
|
||||
const p = (offset.x - BOUNDRY) / this.progressRef.current.offsetWidth;
|
||||
const time = Math.max(Math.round(p * endTime), 0);
|
||||
deboucneJump(time);
|
||||
this.hideTimeTooltip();
|
||||
if (this.props.playing) {
|
||||
this.wasPlaying = true;
|
||||
this.props.pause();
|
||||
}
|
||||
};
|
||||
|
||||
getLiveTime = (e) => {
|
||||
const { startedAt } = this.props;
|
||||
const duration = new Date().getTime() - startedAt
|
||||
const p = e.nativeEvent.offsetX / e.target.offsetWidth;
|
||||
const time = Math.max(Math.round(p * duration), 0);
|
||||
|
||||
return [time, duration];
|
||||
};
|
||||
|
||||
showTimeTooltip = (e) => {
|
||||
if (e.target !== this.progressRef.current && e.target !== this.timelineRef.current) {
|
||||
return this.props.tooltipVisible && this.hideTimeTooltip();
|
||||
}
|
||||
|
||||
const { live } = this.props;
|
||||
let timeLineTooltip;
|
||||
|
||||
if (live) {
|
||||
const [time, duration] = this.getLiveTime(e);
|
||||
timeLineTooltip = {
|
||||
time: (duration - time),
|
||||
offset: e.nativeEvent.offsetX,
|
||||
isVisible: true,
|
||||
};
|
||||
} else {
|
||||
const time = this.getTime(e);
|
||||
timeLineTooltip = {
|
||||
time: time,
|
||||
offset: e.nativeEvent.offsetX,
|
||||
isVisible: true,
|
||||
}
|
||||
}
|
||||
|
||||
debounceTooltipChange(timeLineTooltip);
|
||||
};
|
||||
|
||||
hideTimeTooltip = () => {
|
||||
const timeLineTooltip = { isVisible: false };
|
||||
debounceTooltipChange(timeLineTooltip);
|
||||
};
|
||||
|
||||
render() {
|
||||
const {
|
||||
events,
|
||||
skip,
|
||||
skipIntervals,
|
||||
disabled,
|
||||
endTime,
|
||||
live,
|
||||
} = this.props;
|
||||
|
||||
const scale = 100 / endTime;
|
||||
|
||||
return (
|
||||
<div className="flex items-center absolute w-full" style={{ top: '-4px', zIndex: 100, padding: `0 ${BOUNDRY}px`, maxWidth: 'calc(100% - 1rem)', left: '0.5rem' }}>
|
||||
<div
|
||||
className={stl.progress}
|
||||
onClick={disabled ? null : this.jumpToTime}
|
||||
ref={this.progressRef}
|
||||
role="button"
|
||||
onMouseMoveCapture={this.showTimeTooltip}
|
||||
onMouseEnter={this.showTimeTooltip}
|
||||
onMouseLeave={this.hideTimeTooltip}
|
||||
>
|
||||
<TooltipContainer live={live} />
|
||||
{/* custo color is live */}
|
||||
<DraggableCircle left={this.props.time * scale} onDrop={this.onDragEnd} live={this.props.live} />
|
||||
<CustomDragLayer
|
||||
onDrag={this.onDrag}
|
||||
minX={BOUNDRY}
|
||||
maxX={this.progressRef.current && this.progressRef.current.offsetWidth + BOUNDRY}
|
||||
/>
|
||||
<TimeTracker scale={scale} />
|
||||
|
||||
{skip &&
|
||||
skipIntervals.map((interval) => (
|
||||
<div
|
||||
key={interval.start}
|
||||
className={stl.skipInterval}
|
||||
style={{
|
||||
left: `${getTimelinePosition(interval.start, scale)}%`,
|
||||
width: `${(interval.end - interval.start) * scale}%`,
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
<div className={stl.timeline} ref={this.timelineRef} />
|
||||
|
||||
{events.map((e) => (
|
||||
<div key={e.key} className={stl.event} style={{ left: `${getTimelinePosition(e.time, scale)}%` }} />
|
||||
))}
|
||||
{/* {issues.map((iss) => (
|
||||
<div
|
||||
style={{
|
||||
left: `${getTimelinePosition(iss.time, scale)}%`,
|
||||
top: '0px',
|
||||
zIndex: 11,
|
||||
width: 16,
|
||||
height: 16,
|
||||
}}
|
||||
key={iss.key}
|
||||
className={stl.clickRage}
|
||||
onClick={this.createEventClickHandler(iss)}
|
||||
>
|
||||
<Tooltip
|
||||
delay={0}
|
||||
position="top"
|
||||
html={
|
||||
<div className={stl.popup}>
|
||||
<b>{iss.name}</b>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<Icon className="rounded-full bg-white" name={iss.icon} size="16" />
|
||||
</Tooltip>
|
||||
</div>
|
||||
))}
|
||||
{events
|
||||
.filter((e) => e.type === TYPES.CLICKRAGE)
|
||||
.map((e) => (
|
||||
<div
|
||||
style={{
|
||||
left: `${getTimelinePosition(e.time, scale)}%`,
|
||||
top: '0px',
|
||||
zIndex: 11,
|
||||
width: 16,
|
||||
height: 16,
|
||||
}}
|
||||
key={e.key}
|
||||
className={stl.clickRage}
|
||||
onClick={this.createEventClickHandler(e)}
|
||||
>
|
||||
<Tooltip
|
||||
delay={0}
|
||||
position="top"
|
||||
html={
|
||||
<div className={stl.popup}>
|
||||
<b>{'Click Rage'}</b>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<Icon className="bg-white" name={getPointerIcon('click_rage')} color="red" size="16" />
|
||||
</Tooltip>
|
||||
</div>
|
||||
))}
|
||||
{typeof clickRageTime === 'number' && (
|
||||
<div
|
||||
style={{
|
||||
left: `${getTimelinePosition(clickRageTime, scale)}%`,
|
||||
top: '-0px',
|
||||
zIndex: 11,
|
||||
width: 16,
|
||||
height: 16,
|
||||
}}
|
||||
className={stl.clickRage}
|
||||
>
|
||||
<Tooltip
|
||||
delay={0}
|
||||
position="top"
|
||||
html={
|
||||
<div className={stl.popup}>
|
||||
<b>{'Click Rage'}</b>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<Icon className="rounded-full bg-white" name={getPointerIcon('click_rage')} color="red" size="16" />
|
||||
</Tooltip>
|
||||
</div>
|
||||
)}
|
||||
{exceptionsList.map((e) => (
|
||||
<div
|
||||
key={e.key}
|
||||
className={cn(stl.markup, stl.error)}
|
||||
style={{ left: `${getTimelinePosition(e.time, scale)}%`, top: '0px', zIndex: 10, width: 16, height: 16 }}
|
||||
onClick={this.createEventClickHandler(e)}
|
||||
>
|
||||
<Tooltip
|
||||
delay={0}
|
||||
position="top"
|
||||
html={
|
||||
<div className={stl.popup}>
|
||||
<b>{'Exception'}</b>
|
||||
<br />
|
||||
<span>{e.message}</span>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<Icon className=" rounded-full bg-white" name={getPointerIcon('exception')} color="red" size="16" />
|
||||
</Tooltip>
|
||||
</div>
|
||||
))}
|
||||
{resourceList
|
||||
.filter((r) => r.isRed() || r.isYellow())
|
||||
.map((r) => (
|
||||
<div
|
||||
key={r.key}
|
||||
className={cn(stl.markup, {
|
||||
[stl.error]: r.isRed(),
|
||||
[stl.warning]: r.isYellow(),
|
||||
})}
|
||||
style={{ left: `${getTimelinePosition(r.time, scale)}%`, top: '0px', zIndex: 10, width: 16, height: 16 }}
|
||||
onClick={this.createEventClickHandler(r)}
|
||||
>
|
||||
<Tooltip
|
||||
delay={0}
|
||||
position="top"
|
||||
html={
|
||||
<div className={stl.popup}>
|
||||
<b>{r.success ? 'Slow resource: ' : 'Missing resource:'}</b>
|
||||
<br />
|
||||
{r.name}
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<Icon className=" rounded-full bg-white" name={getPointerIcon('resource')} size="16" />
|
||||
</Tooltip>
|
||||
</div>
|
||||
))}
|
||||
{fetchList
|
||||
.filter((e) => e.isRed())
|
||||
.map((e) => (
|
||||
<div
|
||||
key={e.key}
|
||||
className={cn(stl.markup, stl.error)}
|
||||
style={{ left: `${getTimelinePosition(e.time, scale)}%`, top: '0px' }}
|
||||
onClick={this.createEventClickHandler(e)}
|
||||
>
|
||||
<Tooltip
|
||||
delay={0}
|
||||
position="top"
|
||||
html={
|
||||
<div className={stl.popup}>
|
||||
<b>Failed Fetch</b>
|
||||
<br />
|
||||
{e.name}
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<Icon className=" rounded-full bg-white" name={getPointerIcon('fetch')} color="red" size="16" />
|
||||
</Tooltip>
|
||||
</div>
|
||||
))}
|
||||
{stackList
|
||||
.filter((e) => e.isRed())
|
||||
.map((e) => (
|
||||
<div
|
||||
key={e.key}
|
||||
className={cn(stl.markup, stl.error)}
|
||||
style={{ left: `${getTimelinePosition(e.time, scale)}%`, top: '0px' }}
|
||||
onClick={this.createEventClickHandler(e)}
|
||||
>
|
||||
<Tooltip
|
||||
delay={0}
|
||||
position="top"
|
||||
html={
|
||||
<div className={stl.popup}>
|
||||
<b>Stack Event</b>
|
||||
<br />
|
||||
{e.name}
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<Icon className=" rounded-full bg-white" name={getPointerIcon('stack')} size="16" />
|
||||
</Tooltip>
|
||||
</div>
|
||||
))} */}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
{events.map((e) => (
|
||||
<div
|
||||
key={e.key}
|
||||
className={stl.event}
|
||||
style={{ left: `${getTimelinePosition(e.time, scale)}%` }}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue