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

feat(ui): improve session search and count functionality

Browse source 
- Replace latestList with latestSessionCount to better track new sessions
- Move debouncing logic to PrivateRoutes for improved consistency
- Fix session count checking with proper API integration
- Clean up code formatting and remove unnecessary function calls

Signed-off-by: Shekar Siri <sshekarsiri@gmail.com>
This commit is contained in:
Shekar Siri 2025-03-04 19:37:20 +01:00
parent 78ddbb9233
commit ee4c5cf45d
5 changed files with 102 additions and 99 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

36
frontend/app/PrivateRoutes.tsx
View file

@ -1,14 +1,15 @@
import withSiteIdUpdater from 'HOCs/withSiteIdUpdater';
import React, { Suspense, lazy } from 'react';
import { Redirect, Route, Switch } from 'react-router-dom';
import { observer } from 'mobx-react-lite'
import { useStore } from "./mstore";
import { observer } from 'mobx-react-lite';
import { useStore } from './mstore';
import { GLOBAL_HAS_NO_RECORDINGS } from 'App/constants/storageKeys';
import { OB_DEFAULT_TAB } from 'App/routes';
import { Loader } from 'UI';
import APIClient from './api_client';
import * as routes from './routes';
import { debounce } from '@/utils';
const components: any = {
SessionPure: lazy(() => import('Components/Session/Session')),
@ -31,7 +32,7 @@ const components: any = {
SpotsListPure: lazy(() => import('Components/Spots/SpotsList')),
SpotPure: lazy(() => import('Components/Spots/SpotPlayer')),
ScopeSetup: lazy(() => import('Components/ScopeForm')),
HighlightsPure: lazy(() => import('Components/Highlights/HighlightsList')),
HighlightsPure: lazy(() => import('Components/Highlights/HighlightsList'))
};
const enhancedComponents: any = {
@ -51,7 +52,7 @@ const enhancedComponents: any = {
SpotsList: withSiteIdUpdater(components.SpotsListPure),
Spot: components.SpotPure,
ScopeSetup: components.ScopeSetup,
Highlights: withSiteIdUpdater(components.HighlightsPure),
Highlights: withSiteIdUpdater(components.HighlightsPure)
};
const withSiteId = routes.withSiteId;
@ -97,9 +98,10 @@ const SPOT_PATH = routes.spot();
const SCOPE_SETUP = routes.scopeSetup();
const HIGHLIGHTS_PATH = routes.highlights();
let debounceSearch: any = () => {};
function PrivateRoutes() {
const { projectsStore, userStore, integrationsStore } = useStore();
const { projectsStore, userStore, integrationsStore, searchStore } = useStore();
const onboarding = userStore.onboarding;
const scope = userStore.scopeState;
const tenantId = userStore.account.tenantId;
@ -113,10 +115,20 @@ function PrivateRoutes() {
React.useEffect(() => {
if (siteId && integrationsStore.integrations.siteId !== siteId) {
integrationsStore.integrations.setSiteId(siteId)
integrationsStore.integrations.setSiteId(siteId);
void integrationsStore.integrations.fetchIntegrations(siteId);
}
}, [siteId])
}, [siteId]);
React.useEffect(() => {
debounceSearch = debounce(() => searchStore.fetchSessions(), 500);
}, []);
React.useEffect(() => {
if (!searchStore.urlParsed) return;
debounceSearch();
}, [searchStore.instance.filters, searchStore.instance.eventsOrder]);
return (
<Suspense fallback={<Loader loading={true} className="flex-1" />}>
<Switch key="content">
@ -153,13 +165,13 @@ function PrivateRoutes() {
case '/integrations/slack':
client.post('integrations/slack/add', {
code: location.search.split('=')[1],
state: tenantId,
state: tenantId
});
break;
case '/integrations/msteams':
client.post('integrations/msteams/add', {
code: location.search.split('=')[1],
state: tenantId,
state: tenantId
});
break;
}
@ -184,7 +196,7 @@ function PrivateRoutes() {
withSiteId(DASHBOARD_PATH, siteIdList),
withSiteId(DASHBOARD_SELECT_PATH, siteIdList),
withSiteId(DASHBOARD_METRIC_CREATE_PATH, siteIdList),
withSiteId(DASHBOARD_METRIC_DETAILS_PATH, siteIdList),
withSiteId(DASHBOARD_METRIC_DETAILS_PATH, siteIdList)
]}
component={enhancedComponents.Dashboard}
/>
@ -245,7 +257,7 @@ function PrivateRoutes() {
withSiteId(FFLAG_READ_PATH, siteIdList),
withSiteId(FFLAG_CREATE_PATH, siteIdList),
withSiteId(NOTES_PATH, siteIdList),
withSiteId(BOOKMARKS_PATH, siteIdList),
withSiteId(BOOKMARKS_PATH, siteIdList)
]}
component={enhancedComponents.SessionsOverview}
/>
@ -264,7 +276,7 @@ function PrivateRoutes() {
{Object.entries(routes.redirects).map(([fr, to]) => (
<Redirect key={fr} exact strict from={fr} to={to} />
))}
<Route path={"*"}>
<Route path={'*'}>
<Redirect to={withSiteId(routes.sessions(), siteId)} />
</Route>
</Switch>

10
frontend/app/components/shared/SessionFilters/SessionFilters.tsx
View file

@ -57,10 +57,6 @@ function SessionFilters() {
}
});
useEffect(() => {
debounceFetch();
}, [appliedFilter.filters]);
const onAddFilter = (filter: any) => {
filter.autoOpen = true;
searchStore.addFilter(filter);
@ -72,13 +68,13 @@ function SessionFilters() {
const onFilterMove = (newFilters: any) => {
searchStore.updateSearch({ ...appliedFilter, filters: newFilters});
debounceFetch();
// debounceFetch();
};
const onRemoveFilter = (filterIndex: any) => {
searchStore.removeFilter(filterIndex);
debounceFetch();
// debounceFetch();
};
const onChangeEventsOrder = (e: any, { value }: any) => {
@ -86,7 +82,7 @@ function SessionFilters() {
eventsOrder: value,
});
debounceFetch();
// debounceFetch();
};
return (

3
frontend/app/components/shared/SessionsTabOverview/components/LatestSessionsMessage/LatestSessionsMessage.tsx
View file

@ -6,9 +6,10 @@ import { observer } from 'mobx-react-lite';
function LatestSessionsMessage() {
const { searchStore } = useStore();
const count = searchStore.latestList.size;
const count = searchStore.latestSessionCount;
const onShowNewSessions = () => {
searchStore.updateLatestSessionCount(0);
void searchStore.updateCurrentPage(1, true);
};

12
frontend/app/components/shared/SessionsTabOverview/components/SessionList/SessionList.tsx
View file

@ -47,10 +47,10 @@ function SessionList() {
const hasNoRecordings = !activeSite || !activeSite.recorded;
const metaList = customFieldStore.list;
// useEffect(() => {
// if (!searchStore.urlParsed) return;
// void searchStore.fetchSessions(true, isBookmark);
// }, [location.pathname]);
useEffect(() => {
if (!searchStore.urlParsed) return;
void searchStore.checkForLatestSessionCount();
}, [location.pathname]);
const NO_CONTENT = React.useMemo(() => {
if (isBookmark && !isEnterprise) {
@ -110,7 +110,7 @@ function SessionList() {
useEffect(() => {
const id = setInterval(() => {
if (!document.hidden) {
searchStore.checkForLatestSessions();
void searchStore.checkForLatestSessionCount();
}
}, AUTO_REFRESH_INTERVAL);
return () => clearInterval(id);
@ -134,7 +134,7 @@ function SessionList() {
sessionTimeOut = setTimeout(function () {
if (!document.hidden) {
searchStore.checkForLatestSessions();
void searchStore.checkForLatestSessionCount();
}
}, 5000);
};

94
frontend/app/mstore/searchStore.ts
View file

@ -5,11 +5,11 @@ import {
filtersMap,
generateFilterOptions,
liveFiltersMap,
mobileConditionalFiltersMap,
mobileConditionalFiltersMap
} from 'Types/filter/newFilter';
import { List } from 'immutable';
import { makeAutoObservable, runInAction } from 'mobx';
import { searchService } from 'App/services';
import { searchService, sessionService } from 'App/services';
import Search from 'App/mstore/types/search';
import { checkFilterValue } from 'App/mstore/types/filter';
import FilterItem from 'App/mstore/types/filterItem';
@ -38,8 +38,8 @@ export const filterMap = ({
isEvent,
filters,
sort,
order,
}: any) => ({
order
}: any) => ({
value: checkValues(key, value),
custom,
type: category === FilterCategory.METADATA ? FilterKey.METADATA : key,
@ -47,7 +47,7 @@ export const filterMap = ({
source: category === FilterCategory.METADATA ? key.replace(/^_/, '') : source,
sourceOperator,
isEvent,
filters: filters ? filters.map(filterMap) : [],
filters: filters ? filters.map(filterMap) : []
});
export const TAB_MAP: any = {
@ -55,7 +55,7 @@ export const TAB_MAP: any = {
sessions: { name: 'Sessions', type: 'sessions' },
bookmarks: { name: 'Bookmarks', type: 'bookmarks' },
notes: { name: 'Notes', type: 'notes' },
recommendations: { name: 'Recommendations', type: 'recommendations' },
recommendations: { name: 'Recommendations', type: 'recommendations' }
};
class SearchStore {
@ -72,6 +72,7 @@ class SearchStore {
scrollY = 0;
sessions = List();
total: number = 0;
latestSessionCount: number = 0;
loadingFilterSearch = false;
isSaving: boolean = false;
activeTags: any[] = [];
@ -113,7 +114,7 @@ class SearchStore {
? savedSearch.filter.filters.map((i: FilterItem) =>
new FilterItem().fromJson(i)
)
: [],
: []
});
this.currentPage = 1;
}
@ -179,6 +180,10 @@ class SearchStore {
void this.fetchSessions(force);
}
updateLatestSessionCount(count: number = 0) {
this.latestSessionCount = count;
}
setActiveTab(tab: string) {
runInAction(() => {
this.activeTab = TAB_MAP[tab];
@ -228,7 +233,7 @@ class SearchStore {
rangeValue: instance.rangeValue,
startDate: instance.startDate,
endDate: instance.endDate,
filters: [],
filters: []
})
);
@ -237,49 +242,38 @@ class SearchStore {
void this.fetchSessions(true);
}
checkForLatestSessionCount() {
async checkForLatestSessionCount(): Promise<void> {
try {
const filter = this.instance.toSearch();
// Set time filter if we have the latest request time
if (this.latestRequestTime) {
const period = Period({
rangeName: CUSTOM_RANGE,
start: this.latestRequestTime,
end: Date.now(),
});
const newTimestamps: any = period.toJSON();
filter.startDate = newTimestamps.startDate;
filter.endDate = newTimestamps.endDate;
}
// TODO - dedicated API endpoint to get the count of latest sessions, or show X+ sessions
delete filter.limit;
delete filter.page;
searchService.checkLatestSessions(filter).then((response: any) => {
console.log('response', response);
// runInAction(() => {
// this.latestList = List(response);
// });
end: Date.now()
});
const timeRange: any = period.toJSON();
filter.startDate = timeRange.startDate;
filter.endDate = timeRange.endDate;
}
checkForLatestSessions() {
const filter = this.instance.toSearch();
if (this.latestRequestTime) {
const period = Period({
rangeName: CUSTOM_RANGE,
start: this.latestRequestTime,
end: Date.now(),
});
const newTimestamps: any = period.toJSON();
filter.startDate = newTimestamps.startDate;
filter.endDate = newTimestamps.endDate;
}
// TODO - dedicated API endpoint to get the count of latest sessions, or show X+ sessions
delete filter.limit;
delete filter.page;
searchService.checkLatestSessions(filter).then((response: any) => {
// Only need the total count, not actual records
filter.limit = 1;
filter.page = 1;
const response = await sessionService.getSessions(filter);
runInAction(() => {
this.latestList = List(response);
});
if (response?.total && response.total > sessionStore.total) {
this.latestSessionCount = response.total - sessionStore.total;
} else {
this.latestSessionCount = 0;
}
});
} catch (error) {
console.error('Failed to check for latest session count:', error);
}
}
addFilter(filter: any) {
@ -293,7 +287,7 @@ class SearchStore {
filter.filters = filter.filters
? filter.filters.map((subFilter: any) => ({
...subFilter,
value: checkFilterValue(subFilter.value),
value: checkFilterValue(subFilter.value)
}))
: null;
@ -301,14 +295,14 @@ class SearchStore {
const oldFilter = new FilterItem(this.instance.filters[index]);
const updatedFilter = {
...oldFilter,
value: oldFilter.value.concat(filter.value),
value: oldFilter.value.concat(filter.value)
};
oldFilter.merge(updatedFilter);
this.updateFilter(index, updatedFilter);
} else {
this.instance.filters.push(filter);
this.instance = new Search({
...this.instance.toData(),
...this.instance.toData()
});
}
@ -346,7 +340,7 @@ class SearchStore {
updateSearch = (search: Partial<Search>) => {
this.instance = Object.assign(this.instance, search);
}
};
updateFilter = (index: number, search: Partial<FilterItem>) => {
const newFilters = this.instance.filters.map((_filter: any, i: any) => {
@ -359,7 +353,7 @@ class SearchStore {
this.instance = new Search({
...this.instance.toData(),
filters: newFilters,
filters: newFilters
});
};
@ -370,7 +364,7 @@ class SearchStore {
this.instance = new Search({
...this.instance.toData(),
filters: newFilters,
filters: newFilters
});
};
@ -393,7 +387,7 @@ class SearchStore {
const tagFilter = filtersMap[FilterKey.ISSUE];
tagFilter.type = tagFilter.type.toLowerCase();
tagFilter.value = [
issues_types.find((i: any) => i.type === this.activeTags[0])?.type,
issues_types.find((i: any) => i.type === this.activeTags[0])?.type
];
delete tagFilter.operatorOptions;
delete tagFilter.options;
@ -413,7 +407,7 @@ class SearchStore {
filter.filters.push({
type: FilterKey.DURATION,
value,
operator: 'is',
operator: 'is'
});
}
}
@ -427,7 +421,7 @@ class SearchStore {
page: this.currentPage,
perPage: this.pageSize,
tab: this.activeTab.type,
bookmarked: bookmarked ? true : undefined,
bookmarked: bookmarked ? true : undefined
},
force
).finally(() => {