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

fix(ui) - search url to wait for metadata to load (#1172)

Browse source
This commit is contained in:
Shekar Siri 2023-04-17 11:59:29 +02:00 • committed by GitHub
parent 50ca8538af
commit ad2ecc167c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 18 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
frontend/app/components/shared/SessionSearch/SessionSearch.tsx
View file

@ -21,11 +21,11 @@ interface Props {
updateFilter: typeof updateFilter;
}
function SessionSearch(props: Props) {
const { appliedFilter, saveRequestPayloads = false, metaLoading } = props;
const { appliedFilter, saveRequestPayloads = false, metaLoading = false } = props;
const hasEvents = appliedFilter.filters.filter((i: any) => i.isEvent).size > 0;
const hasFilters = appliedFilter.filters.filter((i: any) => !i.isEvent).size > 0;
useSessionSearchQueryHandler({ appliedFilter, applyFilter: props.updateFilter });
useSessionSearchQueryHandler({ appliedFilter, applyFilter: props.fetchSessions, loading: metaLoading });
useEffect(() => {
debounceFetch = debounce(() => props.fetchSessions(), 500);
@ -89,11 +89,9 @@ function SessionSearch(props: Props) {
<div className="border-t px-5 py-1 flex items-center -mx-2">
<div>
<FilterSelection filter={undefined} onFilterClick={onAddFilter}>
{/* <IconButton primaryText label="ADD STEP" icon="plus" /> */}
<Button
variant="text-primary"
className="mr-2"
// onClick={() => setshowModal(true)}
icon="plus"
>
ADD STEP

19
frontend/app/hooks/useSessionSearchQueryHandler.ts
View file

@ -5,29 +5,34 @@ import { createUrlQuery, getFiltersFromQuery } from 'App/utils/search';
interface Props {
appliedFilter: any;
applyFilter: any;
loading: boolean;
}
const useSessionSearchQueryHandler = (props: Props) => {
const { appliedFilter, applyFilter } = props;
const { appliedFilter, applyFilter, loading } = props;
const history = useHistory();
useEffect(() => {
const applyFilterFromQuery = () => {
const filter = getFiltersFromQuery(history.location.search, appliedFilter);
applyFilter(filter, true, false);
if (!loading) {
const filter = getFiltersFromQuery(history.location.search, appliedFilter);
applyFilter(filter, true, false);
}
};
applyFilterFromQuery();
}, []);
}, [loading]);
useEffect(() => {
const generateUrlQuery = () => {
const search: any = createUrlQuery(appliedFilter);
history.replace({ search });
if (!loading) {
const search: any = createUrlQuery(appliedFilter);
history.replace({ search });
}
};
generateUrlQuery();
}, [appliedFilter]);
}, [appliedFilter, loading]);
return null;
};

8
frontend/app/utils/search.ts
View file

@ -1,7 +1,7 @@
import { getFilterKeyTypeByKey, setQueryParamKeyFromFilterkey } from 'Types/filter/filterType';
import Period, { LAST_24_HOURS, LAST_7_DAYS, LAST_30_DAYS, CUSTOM_RANGE } from 'Types/app/period';
import Period, { CUSTOM_RANGE } from 'Types/app/period';
import Filter from 'Types/filter/filter';
import { filtersMap } from 'App/types/filter/newFilter';
import { filtersMap } from 'Types/filter/newFilter';
export const createUrlQuery = (filter: any) => {
const query = [];
@ -83,13 +83,13 @@ const getFiltersFromEntries = (entires: any) => {
filter.operator = operator;
if (filter.icon === "filters/metadata") {
filter.source = filter.type;
filter.type = 'METADATA';
filter.type = 'MULTIPLE';
} else {
filter.source = sourceArr && sourceArr.length > 0 ? sourceArr : null;
filter.sourceOperator = !!sourceOperator ? decodeURI(sourceOperator) : null;
}
if (!filter.filters || filter.filters.size === 0) {
if (!filter.filters || filter.filters.size === 0) { // TODO support subfilters in url
filters.push(filter);
}
});