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

fix(ui): custom issue message format and color

Browse source
This commit is contained in:
Shekar Siri 2023-06-26 16:20:34 +02:00
parent 4522947ceb
commit 282aa19847
2 changed files with 64 additions and 64 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

117
frontend/app/components/shared/DevTools/StackEventPanel/StackEventPanel.tsx
View file

@ -11,84 +11,83 @@ import StackEventRow from 'Shared/DevTools/StackEventRow';
import StackEventModal from '../StackEventModal'; import StackEventModal from '../StackEventModal';
import useAutoscroll, { getLastItemTime } from '../useAutoscroll'; import useAutoscroll, { getLastItemTime } from '../useAutoscroll';
import { useRegExListFilterMemo, useTabListFilterMemo } from '../useListFilter' import { useRegExListFilterMemo, useTabListFilterMemo } from '../useListFilter';
import useCellMeasurerCache from 'App/hooks/useCellMeasurerCache' import useCellMeasurerCache from 'App/hooks/useCellMeasurerCache';
const INDEX_KEY = 'stackEvent'; const INDEX_KEY = 'stackEvent';
const ALL = 'ALL'; const ALL = 'ALL';
const TAB_KEYS = [ ALL, ...typeList] as const const TAB_KEYS = [ALL, ...typeList] as const;
const TABS = TAB_KEYS.map((tab) => ({ text: tab, key: tab })) const TABS = TAB_KEYS.map((tab) => ({ text: tab, key: tab }));
function StackEventPanel() { function StackEventPanel() {
const { player, store } = React.useContext(PlayerContext) const { player, store } = React.useContext(PlayerContext);
const jump = (t: number) => player.jump(t) const jump = (t: number) => player.jump(t);
const { currentTab, tabStates } = store.get() const { currentTab, tabStates } = store.get();
const { stackList: list = [], stackListNow: listNow = [] } = tabStates[currentTab];
const { const {
stackList: list = [], sessionStore: { devTools }
stackListNow: listNow = [],
} = tabStates[currentTab]
const {
sessionStore: { devTools },
} = useStore(); } = useStore();
const { showModal } = useModal(); const { showModal } = useModal();
const [isDetailsModalActive, setIsDetailsModalActive] = useState(false) // TODO:embed that into useModal const [isDetailsModalActive, setIsDetailsModalActive] = useState(false); // TODO:embed that into useModal
const filter = devTools[INDEX_KEY].filter const filter = devTools[INDEX_KEY].filter;
const activeTab = devTools[INDEX_KEY].activeTab const activeTab = devTools[INDEX_KEY].activeTab;
const activeIndex = devTools[INDEX_KEY].index const activeIndex = devTools[INDEX_KEY].index;
let filteredList = useRegExListFilterMemo(list, it => it.name, filter) let filteredList = useRegExListFilterMemo(list, it => it.name, filter);
filteredList = useTabListFilterMemo(filteredList, it => it.source, ALL, activeTab) filteredList = useTabListFilterMemo(filteredList, it => it.source, ALL, activeTab);
const onTabClick = (activeTab: typeof TAB_KEYS[number]) => devTools.update(INDEX_KEY, { activeTab }) const onTabClick = (activeTab: typeof TAB_KEYS[number]) => devTools.update(INDEX_KEY, { activeTab });
const onFilterChange = ({ target: { value } }: React.ChangeEvent<HTMLInputElement>) => devTools.update(INDEX_KEY, { filter: value }) const onFilterChange = ({ target: { value } }: React.ChangeEvent<HTMLInputElement>) => devTools.update(INDEX_KEY, { filter: value });
const tabs = useMemo(() => const tabs = useMemo(() =>
TABS.filter(({ key }) => key === ALL || list.some(({ source }) => key === source)), TABS.filter(({ key }) => key === ALL || list.some(({ source }) => key === source)),
[ list.length ], [list.length]
) );
const [ const [
timeoutStartAutoscroll, timeoutStartAutoscroll,
stopAutoscroll, stopAutoscroll
] = useAutoscroll( ] = useAutoscroll(
filteredList, filteredList,
getLastItemTime(listNow), getLastItemTime(listNow),
activeIndex, activeIndex,
index => devTools.update(INDEX_KEY, { index }) index => devTools.update(INDEX_KEY, { index })
) );
const onMouseEnter = stopAutoscroll const onMouseEnter = stopAutoscroll;
const onMouseLeave = () => { const onMouseLeave = () => {
if (isDetailsModalActive) { return } if (isDetailsModalActive) {
timeoutStartAutoscroll() return;
} }
timeoutStartAutoscroll();
};
const cache = useCellMeasurerCache() const cache = useCellMeasurerCache();
const showDetails = (item: any) => { const showDetails = (item: any) => {
setIsDetailsModalActive(true) setIsDetailsModalActive(true);
showModal( showModal(
<StackEventModal event={item} />, <StackEventModal event={item} />,
{ {
right: true, right: true,
width: 500, width: 500,
onClose: () => { onClose: () => {
setIsDetailsModalActive(false) setIsDetailsModalActive(false);
timeoutStartAutoscroll() timeoutStartAutoscroll();
} }
} }
) );
devTools.update(INDEX_KEY, { index: filteredList.indexOf(item) }) devTools.update(INDEX_KEY, { index: filteredList.indexOf(item) });
stopAutoscroll() stopAutoscroll();
} };
const _list = React.useRef() const _list = React.useRef();
useEffect(() => { useEffect(() => {
if (_list.current) { if (_list.current) {
// @ts-ignore // @ts-ignore
_list.current.scrollToRow(activeIndex) _list.current.scrollToRow(activeIndex);
} }
}, [ activeIndex ]) }, [activeIndex]);
const _rowRenderer = ({ index, key, parent, style }: any) => { const _rowRenderer = ({ index, key, parent, style }: any) => {
@ -104,7 +103,7 @@ function StackEventPanel() {
key={item.key} key={item.key}
event={item} event={item}
onJump={() => { onJump={() => {
stopAutoscroll() stopAutoscroll();
devTools.update(INDEX_KEY, { index: filteredList.indexOf(item) }); devTools.update(INDEX_KEY, { index: filteredList.indexOf(item) });
jump(item.time); jump(item.time);
}} }}
@ -113,7 +112,7 @@ function StackEventPanel() {
)} )}
</CellMeasurer> </CellMeasurer>
); );
} };
return ( return (
<BottomBlock <BottomBlock
@ -122,29 +121,29 @@ function StackEventPanel() {
onMouseLeave={onMouseLeave} onMouseLeave={onMouseLeave}
> >
<BottomBlock.Header> <BottomBlock.Header>
<div className="flex items-center"> <div className='flex items-center'>
<span className="font-semibold color-gray-medium mr-4">Stack Events</span> <span className='font-semibold color-gray-medium mr-4'>Stack Events</span>
<Tabs tabs={tabs} active={activeTab} onClick={onTabClick} border={false} /> <Tabs tabs={tabs} active={activeTab} onClick={onTabClick} border={false} />
</div> </div>
<Input <Input
className="input-small h-8" className='input-small h-8'
placeholder="Filter by keyword" placeholder='Filter by keyword'
icon="search" icon='search'
name="filter" name='filter'
height={28} height={28}
onChange={onFilterChange} onChange={onFilterChange}
value={filter} value={filter}
/> />
</BottomBlock.Header> </BottomBlock.Header>
<BottomBlock.Content className="overflow-y-auto"> <BottomBlock.Content className='overflow-y-auto'>
<NoContent <NoContent
title={ title={
<div className="capitalize flex items-center mt-16"> <div className='capitalize flex items-center mt-16'>
<Icon name="info-circle" className="mr-2" size="18" /> <Icon name='info-circle' className='mr-2' size='18' />
No Data No Data
</div> </div>
} }
size="small" size='small'
show={filteredList.length === 0} show={filteredList.length === 0}
> >
<AutoSizer> <AutoSizer>
@ -158,7 +157,7 @@ function StackEventPanel() {
rowRenderer={_rowRenderer} rowRenderer={_rowRenderer}
width={width} width={width}
height={height} height={height}
scrollToAlignment="center" scrollToAlignment='center'
/> />
)} )}
</AutoSizer> </AutoSizer>
@ -168,4 +167,4 @@ function StackEventPanel() {
); );
} }
export default observer(StackEventPanel) export default observer(StackEventPanel);

11
frontend/app/components/shared/DevTools/StackEventRow/StackEventRow.tsx
View file

@ -11,9 +11,10 @@ interface Props {
isActive?: boolean; isActive?: boolean;
onClick?: any; onClick?: any;
} }
function StackEventRow(props: Props) { function StackEventRow(props: Props) {
const { event, onJump, style, isActive } = props; const { event, onJump, style, isActive } = props;
let message = event.payload[0] || ''; let message: any = Array.isArray(event.payload) ? event.payload[0] : event.payload;
message = typeof message === 'string' ? message : JSON.stringify(message); message = typeof message === 'string' ? message : JSON.stringify(message);
const iconProps: any = React.useMemo(() => { const iconProps: any = React.useMemo(() => {
@ -21,7 +22,7 @@ function StackEventRow(props: Props) {
return { return {
name: `integrations/${source}`, name: `integrations/${source}`,
size: 18, size: 18,
marginRight: source === OPENREPLAY ? 11 : 10, marginRight: source === OPENREPLAY ? 11 : 10
}; };
}, [event]); }, [event]);
@ -33,14 +34,14 @@ function StackEventRow(props: Props) {
className={cn( className={cn(
'group flex items-center py-2 px-4 border-b cursor-pointer relative', 'group flex items-center py-2 px-4 border-b cursor-pointer relative',
'hover:bg-active-blue', 'hover:bg-active-blue',
{ 'bg-teal-light': isActive } { 'bg-teal-light': isActive, 'error color-red': event.isRed }
)} )}
> >
<div className={cn('mr-auto flex items-start')}> <div className={cn('mr-auto flex items-start')}>
<Icon {...iconProps} /> <Icon {...iconProps} />
<div> <div>
<div className="capitalize font-medium mb-1">{event.name}</div> <div className='capitalize font-medium mb-1'>{event.name}</div>
<div className="code-font text-xs">{message}</div> <div className='code-font text-xs'>{message}</div>
</div> </div>
</div> </div>
<JumpButton onClick={onJump} /> <JumpButton onClick={onJump} />