fix: prevent sending order by id with traces query (#8250)

* fix: prevent sending order by id with traces query

* test: write tests for preventing sending order by id with traces query

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(
+			!firstQueryData?.filters.items.some((filter) => filter.key?.key === 'id') &&
-				(filter) => filter.key?.key === 'id',
+			firstQueryData?.orderBy[0].columnName === 'timestamp';
-			) &&
-			requestData.query.builder?.queryData[0].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,
 							},
 						],
 					},

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(
+			<QueryBuilderContext.Provider
+				value={{
+					...qbProviderValue,
+					stagedQuery: {
+						...qbProviderValue.stagedQuery,
+						builder: {
+							...qbProviderValue.stagedQuery.builder,
+							queryData: [
+								{
+									...qbProviderValue.stagedQuery.builder.queryData[0],
+									orderBy: [{ columnName: 'timestamp', order: 'desc' }],
+								},
+							],
+						},
+					},
+				}}
+			>
+				<TracesExplorer />
+			</QueryBuilderContext.Provider>,
+		);
+
+		await waitFor(() => {
+			expect(capturedPayload).toBeDefined();
+		});
+
+		expect(capturedPayload.compositeQuery.builderQueries?.A.orderBy).toEqual([
+			{ columnName: 'timestamp', order: 'desc' },
+		]);
+	});
 
 	it('trace explorer - table view', async () => {
 		server.use(