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

ui: support payload for events search

Browse source
This commit is contained in:
nick-delirium 2024-09-25 13:23:47 +02:00
parent 3393c045f6
commit 71caeb8ac0
No known key found for this signature in database
GPG key ID: 93ABD695DF5FDBA0
1 changed files with 13 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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>
);
}
});