diff --git a/frontend/src/container/LogsContextList/utils.ts b/frontend/src/container/LogsContextList/utils.ts index 2fc832d8e9..2b1b903fa9 100644 --- a/frontend/src/container/LogsContextList/utils.ts +++ b/frontend/src/container/LogsContextList/utils.ts @@ -1,3 +1,4 @@ +import { initialFilters } from 'constants/queryBuilder'; import { getPaginationQueryData } from 'lib/newQueryBuilder/getPaginationQueryData'; import { ILog } from 'types/api/logs/log'; import { @@ -28,7 +29,7 @@ export const getRequestData = ({ if (!query) return null; const paginateData = getPaginationQueryData({ - currentStagedQueryData: stagedQueryData, + filters: stagedQueryData?.filters || initialFilters, listItemId: log ? log.id : null, orderByTimestamp, page, diff --git a/frontend/src/container/LogsExplorerViews/index.tsx b/frontend/src/container/LogsExplorerViews/index.tsx index 66915e811f..51244e7959 100644 --- a/frontend/src/container/LogsExplorerViews/index.tsx +++ b/frontend/src/container/LogsExplorerViews/index.tsx @@ -3,7 +3,9 @@ import TabLabel from 'components/TabLabel'; import { QueryParams } from 'constants/query'; import { initialAutocompleteData, + initialFilters, initialQueriesMap, + initialQueryBuilderFormValues, PANEL_TYPES, } from 'constants/queryBuilder'; import { queryParamNamesMap } from 'constants/queryBuilderQueryNames'; @@ -36,6 +38,7 @@ import { IBuilderQuery, OrderByPayload, Query, + TagFilter, } from 'types/api/queryBuilder/queryBuilderData'; import { DataSource, StringOperators } from 'types/common/queryBuilder'; import { GlobalReducer } from 'types/reducer/globalTime'; @@ -75,19 +78,19 @@ function LogsExplorerViews(): JSX.Element { const handleAxisError = useAxiosError(); - const currentStagedQueryData = useMemo(() => { - if (!stagedQuery || stagedQuery.builder.queryData.length !== 1) return null; + const listQuery = useMemo(() => { + if (!stagedQuery || stagedQuery.builder.queryData.length < 1) return null; - return stagedQuery.builder.queryData[0]; + return stagedQuery.builder.queryData.find((item) => !item.disabled) || null; }, [stagedQuery]); const orderByTimestamp: OrderByPayload | null = useMemo(() => { - const timestampOrderBy = currentStagedQueryData?.orderBy.find( + const timestampOrderBy = listQuery?.orderBy.find( (item) => item.columnName === 'timestamp', ); return timestampOrderBy || null; - }, [currentStagedQueryData]); + }, [listQuery]); const isMultipleQueries = useMemo( () => @@ -106,17 +109,17 @@ function LogsExplorerViews(): JSX.Element { }, [currentQuery]); const isLimit: boolean = useMemo(() => { - if (!currentStagedQueryData) return false; - if (!currentStagedQueryData.limit) return false; + if (!listQuery) return false; + if (!listQuery.limit) return false; - return logs.length >= currentStagedQueryData.limit; - }, [logs.length, currentStagedQueryData]); + return logs.length >= listQuery.limit; + }, [logs.length, listQuery]); const listChartQuery = useMemo(() => { - if (!stagedQuery || !currentStagedQueryData) return null; + if (!stagedQuery || !listQuery) return null; const modifiedQueryData: IBuilderQuery = { - ...currentStagedQueryData, + ...listQuery, aggregateOperator: StringOperators.COUNT, }; @@ -132,7 +135,7 @@ function LogsExplorerViews(): JSX.Element { }; return modifiedQuery; - }, [stagedQuery, currentStagedQueryData]); + }, [stagedQuery, listQuery]); const exportDefaultQuery = useMemo( () => @@ -147,6 +150,9 @@ function LogsExplorerViews(): JSX.Element { const listChartData = useGetExplorerQueryRange( listChartQuery, PANEL_TYPES.TIME_SERIES, + { + enabled: !!listChartQuery && panelType === PANEL_TYPES.LIST, + }, ); const { data, isFetching, isError } = useGetExplorerQueryRange( @@ -205,52 +211,66 @@ function LogsExplorerViews(): JSX.Element { const getRequestData = useCallback( ( query: Query | null, - params: { page: number; log: ILog | null; pageSize: number }, + params: { + page: number; + log: ILog | null; + pageSize: number; + filters: TagFilter; + }, ): Query | null => { if (!query) return null; const paginateData = getPaginationQueryData({ - currentStagedQueryData, + filters: params.filters, listItemId: params.log ? params.log.id : null, orderByTimestamp, page: params.page, pageSize: params.pageSize, }); + const queryData: IBuilderQuery[] = + query.builder.queryData.length > 1 + ? query.builder.queryData + : [ + { + ...(listQuery || initialQueryBuilderFormValues), + ...paginateData, + }, + ]; + const data: Query = { ...query, builder: { ...query.builder, - queryData: query.builder.queryData.map((item) => ({ - ...item, - ...paginateData, - pageSize: params.pageSize, - })), + queryData, }, }; return data; }, - [currentStagedQueryData, orderByTimestamp], + [orderByTimestamp, listQuery], ); const handleEndReached = useCallback( (index: number) => { + if (!listQuery) return; + if (isLimit) return; if (logs.length < pageSize) return; + const { limit, filters } = listQuery; + const lastLog = logs[index]; - const limit = currentStagedQueryData?.limit; - - const nextLogsLenth = logs.length + pageSize; + const nextLogsLength = logs.length + pageSize; const nextPageSize = - limit && nextLogsLenth >= limit ? limit - logs.length : pageSize; + limit && nextLogsLength >= limit ? limit - logs.length : pageSize; if (!stagedQuery) return; const newRequestData = getRequestData(stagedQuery, { + filters, page: page + 1, log: orderByTimestamp ? lastLog : null, pageSize: nextPageSize, @@ -263,7 +283,7 @@ function LogsExplorerViews(): JSX.Element { [ isLimit, logs, - currentStagedQueryData?.limit, + listQuery, pageSize, stagedQuery, getRequestData, @@ -367,11 +387,13 @@ function LogsExplorerViews(): JSX.Element { currentMinTimeRef.current !== minTime ) { const newRequestData = getRequestData(stagedQuery, { + filters: listQuery?.filters || initialFilters, page: 1, log: null, pageSize: timeRange?.pageSize && activeLogId ? timeRange?.pageSize : pageSize, }); + setLogs([]); setPage(1); setRequestData(newRequestData); @@ -385,11 +407,13 @@ function LogsExplorerViews(): JSX.Element { stagedQuery, requestData, getRequestData, + listQuery, pageSize, minTime, timeRange, activeLogId, onTimeRangeChange, + panelType, ]); const tabsItems: TabsProps['items'] = useMemo( @@ -407,7 +431,7 @@ function LogsExplorerViews(): JSX.Element { children: ( @@ -435,7 +459,7 @@ function LogsExplorerViews(): JSX.Element { isMultipleQueries, isGroupByExist, isFetching, - currentStagedQueryData, + listQuery, logs, handleEndReached, data, @@ -463,18 +487,14 @@ function LogsExplorerViews(): JSX.Element { (queryData) => queryData.groupBy.length > 0, ); - const firstEnabledQuery = stagedQuery.builder.queryData.find( - (item) => !item.disabled, - ); - const firstPayloadQuery = data.payload.data.result.find( - (item) => item.queryName === firstEnabledQuery?.queryName, + (item) => item.queryName === listQuery?.queryName, ); const firstPayloadQueryArray = firstPayloadQuery ? [firstPayloadQuery] : []; return isGroupByExist ? data.payload.data.result : firstPayloadQueryArray; - }, [stagedQuery, data, panelType, listChartData]); + }, [stagedQuery, panelType, data, listChartData, listQuery]); return ( <> diff --git a/frontend/src/lib/newQueryBuilder/getPaginationQueryData.ts b/frontend/src/lib/newQueryBuilder/getPaginationQueryData.ts index 4373e489a8..38e0af531d 100644 --- a/frontend/src/lib/newQueryBuilder/getPaginationQueryData.ts +++ b/frontend/src/lib/newQueryBuilder/getPaginationQueryData.ts @@ -1,4 +1,3 @@ -import { initialFilters } from 'constants/queryBuilder'; import { FILTERS } from 'container/QueryBuilder/filters/OrderByFilter/config'; import { IBuilderQuery, @@ -8,7 +7,7 @@ import { import { v4 as uuid } from 'uuid'; type SetupPaginationQueryDataParams = { - currentStagedQueryData: IBuilderQuery | null; + filters: IBuilderQuery['filters']; listItemId: string | null; orderByTimestamp: OrderByPayload | null; page: number; @@ -17,20 +16,15 @@ type SetupPaginationQueryDataParams = { type SetupPaginationQueryData = ( params: SetupPaginationQueryDataParams, -) => Pick; +) => Partial; export const getPaginationQueryData: SetupPaginationQueryData = ({ - currentStagedQueryData, + filters, listItemId, orderByTimestamp, page, pageSize, }) => { - if (!currentStagedQueryData) { - return { limit: null, filters: initialFilters }; - } - - const filters = currentStagedQueryData.filters || initialFilters; const offset = (page - 1) * pageSize; const queryProps = { @@ -69,5 +63,5 @@ export const getPaginationQueryData: SetupPaginationQueryData = ({ ...queryProps, }; - return { ...currentStagedQueryData, ...chunkOfQueryData }; + return chunkOfQueryData; };