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

UI path evs cons (#2608)

Browse source 
* ui: support payload for events search

* ui: assist console size and init fixes
This commit is contained in:
Delirium 2024-09-25 16:11:03 +02:00 • committed by GitHub
parent 872263624d
commit 93c605a28e
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 15 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
frontend/app/components/Session/Player/LivePlayer/LivePlayerInst.tsx
View file

@ -83,9 +83,8 @@ function Player(props: IProps) {
<div
onMouseDown={handleResize}
className={'w-full h-2 cursor-ns-resize absolute top-0 left-0 z-20'}
>
/>
<ConsolePanel isLive />
</div>
</div>
) : null}
{!fullView && !isMultiview ? <LiveControls jump={playerContext.player.jump} /> : null}

2
frontend/app/components/shared/DevTools/ConsolePanel/ConsolePanel.tsx
View file

@ -117,7 +117,7 @@ function ConsolePanel({
exceptionsList = [],
logListNow = [],
exceptionsListNow = [],
} = tabStates[currentTab];
} = tabStates[currentTab] ?? {};
const list = isLive
? (useMemo(

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

@ -25,7 +25,7 @@ const ALL = 'ALL';
const TAB_KEYS = [ALL, ...typeList] as const;
const TABS = TAB_KEYS.map((tab) => ({ text: tab, key: tab }));
type EventsList = Array<Timed & { name: string; source: string; key: string }>;
type EventsList = Array<Timed & { name: string; source: string; key: string; payload?: string[] }>;
const WebStackEventPanelComp = observer(
({
@ -95,7 +95,7 @@ export const MobileStackEventPanel = connect((state: Record<string, any>) => ({
zoomEndTs: state.getIn(['components', 'player']).timelineZoom.endTs,
}))(MobileStackEventPanelComp);
function EventsPanel({
const EventsPanel = observer(({
list,
listNow,
jump,
@ -109,7 +109,7 @@ function EventsPanel({
zoomEnabled: boolean;
zoomStartTs: number;
zoomEndTs: number;
}) {
}) => {
const {
sessionStore: { devTools },
} = useStore();
@ -126,13 +126,19 @@ function EventsPanel({
zoomEnabled ? zoomStartTs <= time && time <= zoomEndTs : true
);
let filteredList = useRegExListFilterMemo(inZoomRangeList, (it) => it.name, filter);
let filteredList = useRegExListFilterMemo(inZoomRangeList, (it) => {
const searchBy = [it.name]
if (it.payload) {
const payload = Array.isArray(it.payload) ? it.payload.join(',') : JSON.stringify(it.payload);
searchBy.push(payload);
}
return searchBy
}, filter);
filteredList = useTabListFilterMemo(filteredList, (it) => it.source, ALL, 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(
() => TABS.filter(({ key }) => key === ALL || inZoomRangeList.some(({ source }) => key === source)),
[inZoomRangeList.length]
@ -229,4 +235,4 @@ function EventsPanel({
</BottomBlock.Content>
</BottomBlock>
);
}
});