jan/openreplay
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(ui) - overview - events and errors wip

Browse source
This commit is contained in:
Shekar Siri 2022-08-10 18:18:06 +02:00
parent f3efb31776
commit f3bf7be8cc
7 changed files with 304 additions and 234 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
frontend/app/components/Session_/OverviewPanel/OverviewPanel.tsx
View file

@ -1,5 +1,5 @@
import { connectPlayer } from 'App/player';
import { toggleBottomBlock, NETWORK, EXCEPTIONS } from 'Duck/components/player';
import { toggleBottomBlock } from 'Duck/components/player';
import React from 'react';
import BottomBlock from '../BottomBlock';
import EventRow from './components/EventRow';
@ -15,16 +15,25 @@ interface Props {
resourceList: any[];
exceptionsList: any[];
eventsList: any[];
endTime: number;
toggleBottomBlock: any;
stackEventList: any[];
issuesList: any[];
}
function OverviewPanel(props: Props) {
const { resourceList, exceptionsList, eventsList, endTime } = props;
const { resourceList, exceptionsList, eventsList, stackEventList, issuesList } = props;
const clickRageList = React.useMemo(() => {
return eventsList.filter((item: any) => item.type === TYPES.CLICKRAGE);
}, [eventsList]);
const scale = 100 / endTime;
const [selectedFeatures, setSelectedFeatures] = React.useState(['NETWORK', 'ERRORS', 'EVENTS']);
// const scale = 100 / endTime;
const [selectedFeatures, setSelectedFeatures] = React.useState(['PERFORMANCE', 'ERRORS', 'EVENTS']);
const resources: any = {
NETWORK: resourceList,
ERRORS: exceptionsList,
EVENTS: stackEventList,
CLICKRAGE: clickRageList,
PERFORMANCE: issuesList,
};
return (
<BottomBlock style={{ height: '260px' }}>
@ -40,12 +49,11 @@ function OverviewPanel(props: Props) {
<div style={{ width: '100%' }} className="transition relative">
<VerticalPointerLine />
{selectedFeatures.map((feature: any, index: number) => (
<div className={cn("-mx-4 px-4", { 'bg-white border-t border-b' : index % 2})}>
<div className={cn('', { 'bg-white border-t border-b': index % 2 })}>
<EventRow
key={feature}
title={feature}
list={resourceList}
scale={scale}
list={resources[feature]}
renderElement={(pointer: any) => <TimelinePointer pointer={pointer} type={feature} />}
/>
</div>
@ -57,13 +65,15 @@ function OverviewPanel(props: Props) {
);
}
export default connect(null, {
export default connect((state: any) => ({
issuesList: state.getIn(['sessions', 'current', 'issues']),
}), {
toggleBottomBlock,
})(
connectPlayer((state: any) => ({
resourceList: state.resourceList.filter((r: any) => r.isRed() || r.isYellow()),
exceptionsList: state.exceptionsList,
eventsList: state.eventList,
endTime: state.endTime,
stackEventList: state.stackList,
}))(OverviewPanel)
);

10
frontend/app/components/Session_/OverviewPanel/components/EventRow/EventRow.tsx
View file

@ -1,16 +1,18 @@
import React from 'react';
import cn from 'classnames'
import { getTimelinePosition } from 'App/utils';
import { connectPlayer } from 'App/player';
interface Props {
list?: any[];
scale?: number;
title: string;
className?: string;
endTime?: number;
renderElement?: (item: any) => React.ReactNode;
}
function EventRow(props: Props) {
const { title, className, list = [], scale = 0 } = props;
const { title, className, list = [], endTime = 0 } = props;
const scale = 100 / endTime;
const _list = React.useMemo(() => {
return list.map((item: any, _index: number) => {
return {
@ -36,4 +38,6 @@ function EventRow(props: Props) {
);
}
export default EventRow;
export default connectPlayer((state: any) => ({
endTime: state.endTime,
}))(EventRow);

2
frontend/app/components/Session_/OverviewPanel/components/FeatureSelection/FeatureSelection.tsx
View file

@ -4,7 +4,7 @@ import { Checkbox } from 'UI';
const NETWORK = 'NETWORK';
const ERRORS = 'ERRORS';
const EVENTS = 'EVENTS';
const CLICKRAGE = 'CLICK RAGE';
const CLICKRAGE = 'CLICKRAGE';
const PERFORMANCE = 'PERFORMANCE';
interface Props {

14
frontend/app/components/Session_/OverviewPanel/components/StackEventModal/StackEventModal.tsx Normal file
View file

@ -0,0 +1,14 @@
import React from 'react';
interface Props {
event: any;
}
function StackEventModal(props: Props) {
return (
<div className="bg-white h-screen overflow-y-auto" style={{ width: '350px' }}>
Content
</div>
);
}
export default StackEventModal;

1
frontend/app/components/Session_/OverviewPanel/components/StackEventModal/index.ts Normal file
View file

@ -0,0 +1 @@
export { default } from './StackEventModal';

61
frontend/app/components/Session_/OverviewPanel/components/TimelinePointer/TimelinePointer.tsx
View file

@ -1,17 +1,18 @@
import React from 'react';
import { connectPlayer, Controls } from 'App/player';
import { toggleBottomBlock, NETWORK, EXCEPTIONS } from 'Duck/components/player';
import { toggleBottomBlock, NETWORK, EXCEPTIONS, PERFORMANCE } from 'Duck/components/player';
import { useModal } from 'App/components/Modal';
import { Icon, ErrorDetails } from 'UI';
import { Tooltip } from 'react-tippy';
import { TYPES as EVENT_TYPES } from 'Types/session/event';
import StackEventModal from '../StackEventModal';
interface Props {
pointer: any;
type: any;
}
function TimelinePointer(props: Props) {
const { showModal } = useModal();
const { showModal, hideModal } = useModal();
const createEventClickHandler = (pointer: any, type: any) => (e: any) => {
e.stopPropagation();
Controls.jump(pointer.time);
@ -19,9 +20,13 @@ function TimelinePointer(props: Props) {
return;
}
if (type === EXCEPTIONS) {
if (type === 'EXCEPTIONS') {
showModal(<ErrorDetails error={pointer} />, { right: true });
}
if (type === 'EVENT') {
showModal(<StackEventModal event={pointer} />, { right: true });
}
// props.toggleBottomBlock(type);
};
@ -63,6 +68,43 @@ function TimelinePointer(props: Props) {
);
};
const renderStackEventElement = (item: any) => {
return (
<Tooltip
html={
<div className="">
<b>{'Stack Event'}</b>
</div>
}
delay={0}
position="top"
>
<div onClick={createEventClickHandler(item, 'EVENT')} className="cursor-pointer w-1 h-4 bg-red">
{/* <Icon className="rounded-full bg-white" name="funnel/exclamation-circle-fill" color="red" size="16" /> */}
</div>
</Tooltip>
);
};
const renderPerformanceElement = (item: any) => {
console.log('item', item)
return (
<Tooltip
html={
<div className="">
<b>{item.name}</b>
</div>
}
delay={0}
position="top"
>
<div onClick={createEventClickHandler(item, EXCEPTIONS)} className="cursor-pointer w-1 h-4 bg-red">
{/* <Icon className="rounded-full bg-white" name="funnel/exclamation-circle-fill" color="red" size="16" /> */}
</div>
</Tooltip>
);
};
const renderExceptionElement = (item: any) => {
return (
<Tooltip
@ -85,15 +127,22 @@ function TimelinePointer(props: Props) {
const render = () => {
const { pointer, type } = props;
if (type === NETWORK) {
if (type === 'NETWORK') {
return renderNetworkElement(pointer);
}
if (type === EVENT_TYPES.CLICKRAGE) {
if (type === 'CLICKRAGE') {
return renderClickRageElement(pointer);
}
if (type === EXCEPTIONS) {
if (type === 'ERRORS') {
return renderExceptionElement(pointer);
}
if (type === 'EVENTS') {
return renderStackEventElement(pointer);
}
if (type === 'PERFORMANCE') {
return renderPerformanceElement(pointer);
}
};
return <div>{render()}</div>;
}

420
frontend/app/components/Session_/Player/Controls/Timeline.js
View file

@ -12,206 +12,199 @@ import CustomDragLayer from './CustomDragLayer';
import { debounce } from 'App/utils';
import { Tooltip } from 'react-tippy';
const BOUNDRY = 15
const BOUNDRY = 15;
function getTimelinePosition(value, scale) {
const pos = value * scale;
const pos = value * scale;
return pos > 100 ? 100 : pos;
return pos > 100 ? 100 : 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';
// 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';
}
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;
@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,
@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,
}))
@connect(state => ({
issues: state.getIn([ 'sessions', 'current', 'issues' ]),
clickRageTime: state.getIn([ 'sessions', 'current', 'clickRage' ]) &&
state.getIn([ 'sessions', 'current', 'clickRageTime' ]),
returningLocationTime: state.getIn([ 'sessions', 'current', 'returningLocation' ]) &&
state.getIn([ 'sessions', 'current', 'returningLocationTime' ]),
}), { setTimelinePointer })
@connect(
(state) => ({
issues: state.getIn(['sessions', 'current', 'issues']),
clickRageTime: state.getIn(['sessions', 'current', 'clickRage']) && state.getIn(['sessions', 'current', 'clickRageTime']),
returningLocationTime:
state.getIn(['sessions', 'current', 'returningLocation']) && state.getIn(['sessions', 'current', 'returningLocationTime']),
}),
{ setTimelinePointer }
)
export default class Timeline extends React.PureComponent {
progressRef = React.createRef()
wasPlaying = false
progressRef = React.createRef();
wasPlaying = false;
seekProgress = (e) => {
const { endTime } = this.props;
const p = e.nativeEvent.offsetX / e.target.offsetWidth;
const time = Math.max(Math.round(p * endTime), 0);
this.props.jump(time);
}
seekProgress = (e) => {
const { endTime } = this.props;
const p = e.nativeEvent.offsetX / e.target.offsetWidth;
const time = Math.max(Math.round(p * endTime), 0);
this.props.jump(time);
};
createEventClickHandler = pointer => (e) => {
e.stopPropagation();
this.props.jump(pointer.time);
this.props.setTimelinePointer(pointer);
}
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);
componentDidMount() {
const { issues } = this.props;
const skipToIssue = Controls.updateSkipToIssue();
const firstIssue = issues.get(0);
deboucneJump = debounce(this.props.jump, 500);
if (firstIssue && skipToIssue) {
this.props.jump(firstIssue.time);
if (firstIssue && skipToIssue) {
this.props.jump(firstIssue.time);
}
}
}
onDragEnd = () => {
if (this.wasPlaying) {
this.props.togglePlay();
}
}
onDragEnd = () => {
if (this.wasPlaying) {
this.props.togglePlay();
}
};
onDrag = (offset) => {
const { endTime } = this.props;
onDrag = (offset) => {
const { endTime } = this.props;
const p = (offset.x - BOUNDRY) / this.progressRef.current.offsetWidth;
const time = Math.max(Math.round(p * endTime), 0);
deboucneJump(time);
if (this.props.playing) {
this.wasPlaying = true;
this.props.pause();
}
}
const p = (offset.x - BOUNDRY) / this.progressRef.current.offsetWidth;
const time = Math.max(Math.round(p * endTime), 0);
deboucneJump(time);
if (this.props.playing) {
this.wasPlaying = true;
this.props.pause();
}
};
render() {
const {
events,
skip,
skipIntervals,
disabled,
endTime,
live,
logList,
exceptionsList,
resourceList,
clickRageTime,
stackList,
fetchList,
issues,
} = this.props;
render() {
const {
events,
skip,
skipIntervals,
disabled,
endTime,
live,
logList,
exceptionsList,
resourceList,
clickRageTime,
stackList,
fetchList,
issues,
} = this.props;
const scale = 100 / endTime;
const scale = 100 / endTime;
return (
<div
className="flex items-center absolute w-full"
style={{ top: '-4px', zIndex: 100, padding: `0 ${BOUNDRY}px`}}
>
<div
className={ stl.progress }
onClick={ disabled ? null : this.seekProgress }
ref={ this.progressRef }
role="button"
>
<DraggableCircle left={this.props.time * scale} onDrop={this.onDragEnd} />
<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 }/>
{ 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 => (
return (
<div className="flex items-center absolute w-full" style={{ top: '-4px', zIndex: 100, padding: `0 ${BOUNDRY}px` }}>
<div className={stl.progress} onClick={disabled ? null : this.seekProgress} ref={this.progressRef} role="button">
<DraggableCircle left={this.props.time * scale} onDrop={this.onDragEnd} />
<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} />
{/* {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) }%`,
@ -234,8 +227,8 @@ export default class Timeline extends React.PureComponent {
<Icon className="bg-white" name={getPointerIcon('click_rage')} color="red" size="16" />
</Tooltip>
</div>
))}
{typeof clickRageTime === 'number' &&
))} */}
{/* {typeof clickRageTime === 'number' &&
<div
style={{
left: `${ getTimelinePosition(clickRageTime, scale) }%`,
@ -256,8 +249,8 @@ export default class Timeline extends React.PureComponent {
<Icon className="rounded-full bg-white" name={getPointerIcon('click_rage')} color="red" size="16" />
</Tooltip>
</div>
}
{ exceptionsList
} */}
{/* { exceptionsList
.map(e => (
<div
key={ e.key }
@ -280,8 +273,8 @@ export default class Timeline extends React.PureComponent {
</Tooltip>
</div>
))
}
{ resourceList
} */}
{/* { resourceList
.filter(r => r.isRed() || r.isYellow())
.map(r => (
<div
@ -308,8 +301,8 @@ export default class Timeline extends React.PureComponent {
</Tooltip>
</div>
))
}
{ fetchList
} */}
{/* { fetchList
.filter(e => e.isRed())
.map(e => (
<div
@ -333,34 +326,33 @@ export default class Timeline extends React.PureComponent {
</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>
} */}
{/* {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>
</div>
);
}
</div>
);
}
}