diff --git a/frontend/src/container/LogsExplorerViews/index.tsx b/frontend/src/container/LogsExplorerViews/index.tsx index 9901243b2f..8dc46c5a5a 100644 --- a/frontend/src/container/LogsExplorerViews/index.tsx +++ b/frontend/src/container/LogsExplorerViews/index.tsx @@ -133,6 +133,9 @@ function LogsExplorerViews({ // State const [page, setPage] = useState(1); const [logs, setLogs] = useState([]); + const [lastLogLineTimestamp, setLastLogLineTimestamp] = useState< + number | string | null + >(); const [requestData, setRequestData] = useState(null); const [showFormatMenuItems, setShowFormatMenuItems] = useState(false); const [queryId, setQueryId] = useState(v4()); @@ -270,6 +273,14 @@ function LogsExplorerViews({ start: minTime, end: maxTime, }), + // send the lastLogTimeStamp only when the panel type is list and the orderBy is timestamp and the order is desc + lastLogLineTimestamp: + panelType === PANEL_TYPES.LIST && + requestData?.builder?.queryData?.[0]?.orderBy?.[0]?.columnName === + 'timestamp' && + requestData?.builder?.queryData?.[0]?.orderBy?.[0]?.order === 'desc' + ? lastLogLineTimestamp + : undefined, }, undefined, listQueryKeyRef, @@ -347,6 +358,10 @@ function LogsExplorerViews({ pageSize: nextPageSize, }); + // initialise the last log timestamp to null as we don't have the logs. + // as soon as we scroll to the end of the logs we set the lastLogLineTimestamp to the last log timestamp. + setLastLogLineTimestamp(lastLog.timestamp); + setPage((prevPage) => prevPage + 1); setRequestData(newRequestData); @@ -539,6 +554,11 @@ function LogsExplorerViews({ // eslint-disable-next-line react-hooks/exhaustive-deps }, [data]); + useEffect(() => { + // clear the lastLogLineTimestamp when the data changes + setLastLogLineTimestamp(null); + }, [data]); + useEffect(() => { if ( requestData?.id !== stagedQuery?.id || diff --git a/frontend/src/lib/dashboard/prepareQueryRangePayload.ts b/frontend/src/lib/dashboard/prepareQueryRangePayload.ts index 181a83914b..ffc2f0477c 100644 --- a/frontend/src/lib/dashboard/prepareQueryRangePayload.ts +++ b/frontend/src/lib/dashboard/prepareQueryRangePayload.ts @@ -1,6 +1,7 @@ import getStartEndRangeTime from 'lib/getStartEndRangeTime'; import getStep from 'lib/getStep'; import { mapQueryDataToApi } from 'lib/newQueryBuilder/queryBuilderMappers/mapQueryDataToApi'; +import { isUndefined } from 'lodash-es'; import store from 'store'; import { QueryRangePayload } from 'types/api/metrics/getQueryRange'; import { EQueryType } from 'types/common/dashboard'; @@ -24,7 +25,11 @@ export const prepareQueryRangePayload = ({ fillGaps = false, }: GetQueryResultsProps): PrepareQueryRangePayload => { let legendMap: Record = {}; - const { allowSelectedIntervalForStepGen, ...restParams } = params; + const { + allowSelectedIntervalForStepGen, + lastLogLineTimestamp, + ...restParams + } = params; const compositeQuery: QueryRangePayload['compositeQuery'] = { queryType: query.queryType, @@ -90,9 +95,13 @@ export const prepareQueryRangePayload = ({ interval: globalSelectedInterval, }); + const endLogTimeStamp = !isUndefined(lastLogLineTimestamp) + ? new Date(lastLogLineTimestamp as string | number)?.getTime() || undefined + : undefined; + const queryPayload: QueryRangePayload = { start: parseInt(start, 10) * 1e3, - end: parseInt(end, 10) * 1e3, + end: endLogTimeStamp || parseInt(end, 10) * 1e3, step: getStep({ start: allowSelectedIntervalForStepGen ? start