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

feat(ui) - timeline overview - wip

Browse source
This commit is contained in:
Shekar Siri 2022-07-20 18:16:02 +02:00
parent 44d9565fd9
commit fbbd69732e
11 changed files with 206 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
frontend/app/components/Session_/BottomBlock/BottomBlock.js
View file

@ -3,9 +3,9 @@ import cn from 'classnames';
import stl from './bottomBlock.module.css';
const BottomBlock = ({
children,
className,
additionalHeight,
children = null,
className = '',
additionalHeight = 0,
...props
}) => (
<div className={ cn(stl.wrapper, "flex flex-col mb-2") } { ...props } >

116
frontend/app/components/Session_/OverviewPanel/OverviewPanel.tsx Normal file
View file

@ -0,0 +1,116 @@
import { connectPlayer } from 'App/player';
import React from 'react';
import BottomBlock from '../BottomBlock';
import EventRow from './components/EventRow';
import { TYPES } from 'Types/session/event';
import { Icon } from 'UI';
import { Tooltip } from 'react-tippy';
import stl from './overviewPanel.module.css';
interface Props {
resourceList: any[];
exceptionsList: any[];
eventsList: any[];
endTime: number;
}
function OverviewPanel(props: Props) {
const { resourceList, exceptionsList, eventsList, endTime } = props;
const clickRageList = React.useMemo(() => {
return eventsList.filter((item: any) => item.type === TYPES.CLICKRAGE);
}, [eventsList]);
const containerRef = React.useRef<HTMLDivElement>(null);
const innerRef = React.createRef<HTMLDivElement>();
const scale = 100 / endTime;
let width = 100;
const SPEED = 5;
const onWheel = (e: React.UIEvent<HTMLDivElement>) => {
e.preventDefault();
e.stopPropagation();
const delta = e.deltaY;
if (delta > 0) {
width += SPEED;
} else {
width -= SPEED;
}
if (width < 100) {
width = 100;
}
if (innerRef.current) {
innerRef.current.style.width = width + '%';
if (containerRef.current) {
containerRef.current.style.left = (100 - width) / 2 + '%';
}
}
};
const renderNetworkElement = (item: any) => {
return <div className="h-2 w-2 rounded-full bg-red" />;
};
const renderClickRageElement = (item: any) => {
return (
<div className="">
<Icon className="bg-white" name="funnel/emoji-angry" color="red" size="16" />
</div>
);
};
const renderExceptionElement = (item: any) => {
// console.log('item', item);
return (
<Tooltip
html={
<div className={stl.popup}>
<b>{'Exception'}</b>
<br />
<span>{item.message}</span>
</div>
}
delay={0}
position="top"
>
<Icon className="rounded-full bg-white" name="funnel/exclamation-circle-fill" color="red" size="16" />
</Tooltip>
);
};
return (
<BottomBlock style={{ height: '300px' }}>
<BottomBlock.Header>
<div className="flex items-center">
<span className="font-semibold color-gray-medium mr-4">Overview</span>
</div>
</BottomBlock.Header>
<BottomBlock.Content>
<div className="overflow-x-auto overflow-y-hidden bg-gray-lightest px-4" ref={containerRef}>
<div style={{ width: '100%' }} ref={innerRef} className="transition relative">
<VerticalPointerLine />
<EventRow title="Network" className="" list={resourceList} scale={scale} renderElement={renderNetworkElement} />
<div className="bg-white border-t border-b -mx-4 px-4">
<EventRow title="Click Rage" className="" list={clickRageList} scale={scale} renderElement={renderClickRageElement} />
</div>
<EventRow title="Errors & Issues" className="" list={exceptionsList} scale={scale} renderElement={renderExceptionElement} />
</div>
</div>
</BottomBlock.Content>
</BottomBlock>
);
}
export default connectPlayer((state: any) => ({
resourceList: state.resourceList,
exceptionsList: state.exceptionsList,
eventsList: state.eventList,
endTime: state.endTime,
}))(OverviewPanel);
const VerticalPointerLine = connectPlayer((state: any) => ({
time: state.time,
scale: 100 / state.endTime,
}))(({ time, scale }: any) => {
const left = time * scale;
return <div className="absolute border-r border-red border-dotted z-10" style={{ left: `${left}%`, height: '250px', width: '1px' }} />;
});

39
frontend/app/components/Session_/OverviewPanel/components/EventRow/EventRow.tsx Normal file
View file

@ -0,0 +1,39 @@
import React from 'react';
import cn from 'classnames'
import { getTimelinePosition } from 'App/utils';
interface Props {
list?: any[];
scale?: number;
title: string;
className?: string;
renderElement?: (item: any) => React.ReactNode;
}
function EventRow(props: Props) {
const { title, className, list = [], scale = 0 } = props;
const _list = React.useMemo(() => {
return list.map((item: any, _index: number) => {
return {
...item.toJS(),
left: getTimelinePosition(item.time, scale),
}
})
}, [list]);
return (
<div className={cn('h-20 w-full flex flex-col py-2', className)}>
<div className="uppercase color-gray-medium">{title}</div>
<div className="relative w-full py-3">
{_list.map((item: any, index: number) => {
return (
<div key={index} className="absolute" style={{ left: item.left + '%'}} >
{props.renderElement ? props.renderElement(item) : null}
</div>
)
}
)}
</div>
</div>
);
}
export default EventRow;

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

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

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

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

13
frontend/app/components/Session_/OverviewPanel/overviewPanel.module.css Normal file
View file

@ -0,0 +1,13 @@
.popup {
max-width: 300px !important;
/* max-height: 300px !important; */
overflow: hidden;
text-overflow: ellipsis;
& span {
display: block;
max-height: 200px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}

12
frontend/app/components/Session_/Player/Controls/Controls.js
View file

@ -15,6 +15,7 @@ import {
fullscreenOn,
fullscreenOff,
toggleBottomBlock,
OVERVIEW,
CONSOLE,
NETWORK,
STACKEVENTS,
@ -377,6 +378,17 @@ export default class Controls extends React.Component {
containerClassName="mx-2"
/>
)} */}
<ControlButton
// disabled={ disabled && !inspectorMode }
onClick={ () => toggleBottomTools(OVERVIEW) }
active={ bottomBlock === OVERVIEW && !inspectorMode}
label="OVERVIEW"
noIcon
labelClassName="!text-base font-semibold"
// count={ logCount }
// hasErrors={ logRedCount > 0 }
containerClassName="mx-2"
/>
<ControlButton
disabled={ disabled && !inspectorMode }
onClick={ () => toggleBottomTools(CONSOLE) }

5
frontend/app/components/Session_/Player/Player.js
View file

@ -18,6 +18,7 @@ import {
EXCEPTIONS,
LONGTASKS,
INSPECTOR,
OVERVIEW,
} from 'Duck/components/player';
import Network from '../Network';
import Console from '../Console/Console';
@ -40,6 +41,7 @@ import Controls from './Controls';
import Overlay from './Overlay';
import stl from './player.module.css';
import { updateLastPlayedSession } from 'Duck/sessions';
import OverviewPanel from '../OverviewPanel';
@connectPlayer(state => ({
live: state.live,
@ -104,6 +106,9 @@ export default class Player extends React.PureComponent {
</div>
{ !fullscreen && !!bottomBlock &&
<div style={{ maxWidth, width: '100%' }}>
{ //bottomBlock === OVERVIEW &&
<OverviewPanel />
}
{ bottomBlock === CONSOLE &&
<Console />
}

7
frontend/app/components/Session_/PlayerBlock.js
View file

@ -3,7 +3,7 @@ import cn from "classnames";
import { connect } from 'react-redux';
import { } from 'Player';
import {
NONE,
NONE, OVERVIEW,
} from 'Duck/components/player';
import Player from './Player';
import SubHeader from './Subheader';
@ -37,8 +37,9 @@ export default class PlayerBlock extends React.PureComponent {
/>}
<Player
className="flex-1"
bottomBlockIsActive={ !fullscreen && bottomBlock !== NONE }
bottomBlock={bottomBlock}
// bottomBlockIsActive={ !fullscreen && bottomBlock !== NONE }
bottomBlockIsActive={ true }
bottomBlock={OVERVIEW}
fullscreen={fullscreen}
activeTab={activeTab}
/>

1
frontend/app/duck/components/player.js
View file

@ -12,6 +12,7 @@ export const FETCH = 8;
export const EXCEPTIONS = 9;
export const LONGTASKS = 10;
export const INSPECTOR = 11;
export const OVERVIEW = 12;
const TOGGLE_FULLSCREEN = 'player/TOGGLE_FS';
const TOGGLE_BOTTOM_BLOCK = 'player/SET_BOTTOM_BLOCK';

13
frontend/app/utils.ts
View file

@ -324,8 +324,12 @@ export const fetchErrorCheck = async (response: any) => {
export const cleanSessionFilters = (data: any) => {
const { filters, ...rest } = data;
const _fitlers = filters.filter((f: any) => {
if (f.operator === 'isAny' || f.operator === 'onAny') { return true } // ignore filter with isAny/onAny operator
if (Array.isArray(f.filters) && f.filters.length > 0) { return true } // ignore subfilters
if (f.operator === 'isAny' || f.operator === 'onAny') {
return true;
} // ignore filter with isAny/onAny operator
if (Array.isArray(f.filters) && f.filters.length > 0) {
return true;
} // ignore subfilters
return f.value !== '' && Array.isArray(f.value) && f.value.length > 0;
});
@ -343,3 +347,8 @@ export const setSessionFilter = (filter: any) => {
export const compareJsonObjects = (obj1: any, obj2: any) => {
return JSON.stringify(obj1) === JSON.stringify(obj2);
};
export function getTimelinePosition(value: any, scale: any) {
const pos = value * scale;
return pos > 100 ? 100 : pos;
}