diff --git a/frontend/src/container/TracesExplorer/ListView/index.tsx b/frontend/src/container/TracesExplorer/ListView/index.tsx index e59906c075..1c8209f709 100644 --- a/frontend/src/container/TracesExplorer/ListView/index.tsx +++ b/frontend/src/container/TracesExplorer/ListView/index.tsx @@ -7,10 +7,12 @@ import { REACT_QUERY_KEY } from 'constants/reactQueryKeys'; import EmptyLogsSearch from 'container/EmptyLogsSearch/EmptyLogsSearch'; import NoLogs from 'container/NoLogs/NoLogs'; import { useOptionsMenu } from 'container/OptionsMenu'; +import { CustomTimeType } from 'container/TopNav/DateTimeSelectionV2/config'; import TraceExplorerControls from 'container/TracesExplorer/Controls'; import { useGetQueryRange } from 'hooks/queryBuilder/useGetQueryRange'; import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder'; import { Pagination } from 'hooks/queryPagination'; +import { getDefaultPaginationConfig } from 'hooks/queryPagination/utils'; import useDragColumns from 'hooks/useDragColumns'; import { getDraggedColumns } from 'hooks/useDragColumns/utils'; import useUrlQueryData from 'hooks/useUrlQueryData'; @@ -32,12 +34,19 @@ interface ListViewProps { } function ListView({ isFilterApplied }: ListViewProps): JSX.Element { - const { stagedQuery, panelType } = useQueryBuilder(); + const { + stagedQuery, + panelType: panelTypeFromQueryBuilder, + } = useQueryBuilder(); - const { selectedTime: globalSelectedTime, maxTime, minTime } = useSelector< - AppState, - GlobalReducer - >((state) => state.globalTime); + const panelType = panelTypeFromQueryBuilder || PANEL_TYPES.LIST; + + const { + selectedTime: globalSelectedTime, + maxTime, + minTime, + loading: timeRangeUpdateLoading, + } = useSelector((state) => state.globalTime); const { options, config } = useOptionsMenu({ storageKey: LOCALSTORAGE.TRACES_LIST_OPTIONS, @@ -55,34 +64,51 @@ function ListView({ isFilterApplied }: ListViewProps): JSX.Element { const { queryData: paginationQueryData } = useUrlQueryData( QueryParams.pagination, ); + const paginationConfig = + paginationQueryData ?? getDefaultPaginationConfig(PER_PAGE_OPTIONS); + + const queryKey = useMemo( + () => [ + REACT_QUERY_KEY.GET_QUERY_RANGE, + globalSelectedTime, + maxTime, + minTime, + stagedQuery, + panelType, + paginationConfig, + options?.selectColumns, + ], + [ + stagedQuery, + panelType, + globalSelectedTime, + paginationConfig, + options?.selectColumns, + maxTime, + minTime, + ], + ); const { data, isFetching, isLoading, isError } = useGetQueryRange( { query: stagedQuery || initialQueriesMap.traces, - graphType: panelType || PANEL_TYPES.LIST, - selectedTime: 'GLOBAL_TIME', - globalSelectedInterval: globalSelectedTime, + graphType: panelType, + selectedTime: 'GLOBAL_TIME' as const, + globalSelectedInterval: globalSelectedTime as CustomTimeType, params: { dataSource: 'traces', }, tableParams: { - pagination: paginationQueryData, + pagination: paginationConfig, selectColumns: options?.selectColumns, }, }, DEFAULT_ENTITY_VERSION, { - queryKey: [ - REACT_QUERY_KEY.GET_QUERY_RANGE, - globalSelectedTime, - maxTime, - minTime, - stagedQuery, - panelType, - paginationQueryData, - options?.selectColumns, - ], + queryKey, enabled: + // don't make api call while the time range state in redux is loading + !timeRangeUpdateLoading && !!stagedQuery && panelType === PANEL_TYPES.LIST && !!options?.selectColumns?.length, diff --git a/frontend/src/pages/TracesExplorer/Filter/Filter.tsx b/frontend/src/pages/TracesExplorer/Filter/Filter.tsx index 27c3b65950..c4ee2dba5a 100644 --- a/frontend/src/pages/TracesExplorer/Filter/Filter.tsx +++ b/frontend/src/pages/TracesExplorer/Filter/Filter.tsx @@ -203,6 +203,10 @@ export function Filter(props: FilterProps): JSX.Element { selectedFilters, }); } + + if (isEqual(currentQuery, preparedQuery) && !props?.resetAll) { + return; + } redirectWithQueryBuilderData(preparedQuery); }, [currentQuery, redirectWithQueryBuilderData, selectedFilters], diff --git a/frontend/src/pages/TracesExplorer/__test__/TracesExplorer.test.tsx b/frontend/src/pages/TracesExplorer/__test__/TracesExplorer.test.tsx index c4fdf588de..d5e89feb20 100644 --- a/frontend/src/pages/TracesExplorer/__test__/TracesExplorer.test.tsx +++ b/frontend/src/pages/TracesExplorer/__test__/TracesExplorer.test.tsx @@ -109,6 +109,13 @@ jest.mock('container/OptionsMenu/useOptionsMenu', () => ({ default: (): any => optionMenuReturn, })); +jest.mock('react-redux', () => ({ + ...jest.requireActual('react-redux'), + useSelector: (): any => ({ + loading: false, + }), +})); + describe('TracesExplorer - Filters', () => { // Initial filter panel rendering // Test the initial state like which filters section are opened, default state of duration slider, etc. diff --git a/frontend/src/providers/QueryBuilder.tsx b/frontend/src/providers/QueryBuilder.tsx index b79538cb45..9db10d2767 100644 --- a/frontend/src/providers/QueryBuilder.tsx +++ b/frontend/src/providers/QueryBuilder.tsx @@ -95,7 +95,8 @@ export function QueryBuilderProvider({ const urlQuery = useUrlQuery(); const history = useHistory(); const location = useLocation(); - const currentPathnameRef = useRef(null); + + const currentPathnameRef = useRef(location.pathname); const { maxTime, minTime } = useSelector( (state) => state.globalTime, @@ -814,14 +815,14 @@ export function QueryBuilderProvider({ }; useEffect(() => { - if (stagedQuery && location.pathname !== currentPathnameRef.current) { + if (location.pathname !== currentPathnameRef.current) { currentPathnameRef.current = location.pathname; setStagedQuery(null); // reset the last used query to 0 when navigating away from the page setLastUsedQuery(0); } - }, [location, stagedQuery, currentQuery]); + }, [location.pathname]); const handleOnUnitsChange = useCallback( (unit: string) => {