diff --git a/frontend/src/hooks/queryBuilder/useGetQueryRange.ts b/frontend/src/hooks/queryBuilder/useGetQueryRange.ts index 2188f7a58adf..9a3950d042e3 100644 --- a/frontend/src/hooks/queryBuilder/useGetQueryRange.ts +++ b/frontend/src/hooks/queryBuilder/useGetQueryRange.ts @@ -10,6 +10,7 @@ import { useMemo } from 'react'; import { useQuery, UseQueryOptions, UseQueryResult } from 'react-query'; import { SuccessResponse } from 'types/api'; import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange'; +import { DataSource } from 'types/common/queryBuilder'; type UseGetQueryRange = ( requestData: GetQueryResultsProps, @@ -25,15 +26,13 @@ export const useGetQueryRange: UseGetQueryRange = ( headers, ) => { const newRequestData: GetQueryResultsProps = useMemo(() => { + const firstQueryData = requestData.query.builder?.queryData[0]; const isListWithSingleTimestampOrder = requestData.graphType === PANEL_TYPES.LIST && - requestData.query.builder?.queryData[0]?.orderBy?.length === 1 && + firstQueryData?.orderBy?.length === 1 && // exclude list with id filter (i.e. context logs) - !requestData.query.builder?.queryData[0].filters.items.some( - (filter) => filter.key?.key === 'id', - ) && - requestData.query.builder?.queryData[0].orderBy[0].columnName === - 'timestamp'; + !firstQueryData?.filters.items.some((filter) => filter.key?.key === 'id') && + firstQueryData?.orderBy[0].columnName === 'timestamp'; const modifiedRequestData = { ...requestData, @@ -44,17 +43,20 @@ export const useGetQueryRange: UseGetQueryRange = ( }; // If the query is a list with a single timestamp order, we need to add the id column to the order by clause - if (isListWithSingleTimestampOrder) { + if ( + isListWithSingleTimestampOrder && + firstQueryData?.dataSource === DataSource.LOGS + ) { modifiedRequestData.query.builder = { ...requestData.query.builder, queryData: [ { - ...requestData?.query?.builder?.queryData[0], + ...firstQueryData, orderBy: [ - ...(requestData?.query?.builder?.queryData[0]?.orderBy || []), + ...(firstQueryData?.orderBy || []), { columnName: 'id', - order: requestData?.query?.builder?.queryData[0]?.orderBy[0]?.order, + order: firstQueryData?.orderBy[0]?.order, }, ], }, diff --git a/frontend/src/pages/TracesExplorer/__test__/TracesExplorer.test.tsx b/frontend/src/pages/TracesExplorer/__test__/TracesExplorer.test.tsx index acce20df6a7a..fd5a0d451c7d 100644 --- a/frontend/src/pages/TracesExplorer/__test__/TracesExplorer.test.tsx +++ b/frontend/src/pages/TracesExplorer/__test__/TracesExplorer.test.tsx @@ -26,6 +26,7 @@ import { waitFor, within, } from 'tests/test-utils'; +import { QueryRangePayload } from 'types/api/metrics/getQueryRange'; import TracesExplorer from '..'; import { Filter } from '../Filter/Filter'; @@ -449,6 +450,8 @@ jest.mock('hooks/useHandleExplorerTabChange', () => ({ })), })); +let capturedPayload: QueryRangePayload; + describe('TracesExplorer - ', () => { const quickFiltersListURL = `${BASE_URL}/api/v1/orgs/me/filters/traces`; @@ -496,6 +499,45 @@ describe('TracesExplorer - ', () => { // column interaction is covered in E2E tests as its a complex interaction }); + it('should not add id to orderBy when dataSource is traces', async () => { + server.use( + rest.post(`${BASE_URL}/api/v4/query_range`, async (req, res, ctx) => { + const payload = await req.json(); + capturedPayload = payload; + return res(ctx.status(200), ctx.json(queryRangeForTableView)); + }), + ); + + render( + + + , + ); + + await waitFor(() => { + expect(capturedPayload).toBeDefined(); + }); + + expect(capturedPayload.compositeQuery.builderQueries?.A.orderBy).toEqual([ + { columnName: 'timestamp', order: 'desc' }, + ]); + }); it('trace explorer - table view', async () => { server.use(