test(query-builder): add CodeMirror+MSW behavior specs for suggestion flows

.github/workflows/integrationci.yaml

@@ -54,7 +54,6 @@ jobs:
           - querierscalar
           - queriercommon
           - rawexportdata
-          - querierauthz
           - role
           - rootuser
           - serviceaccount

conf/example.yaml

@@ -9,11 +9,6 @@ global:
   # the path component (e.g. /signoz in https://example.com/signoz) is used
   # as the base path for all HTTP routes (both API and web frontend).
   external_url: <unset>
-  # origins (scheme://host[:port], no path) allowed as login redirect targets. include
-  # the origin the signoz ui is served on. when not configured, redirect targets are
-  # not validated.
-  # allowed_origins:
-  #   - https://signoz.example.com
   # the url where the SigNoz backend receives telemetry data (traces, metrics, logs) from instrumented applications.
   ingestion_url: <unset>
   # the url of the SigNoz MCP server. when unset, the MCP settings page is hidden in the frontend.

docs/api/openapi.yml

@@ -2596,6 +2596,19 @@ components:
         repeatVariable:
           type: string
       type: object
+    DashboardLink:
+      properties:
+        name:
+          type: string
+        renderVariables:
+          type: boolean
+        targetBlank:
+          type: boolean
+        tooltip:
+          type: string
+        url:
+          type: string
+      type: object
     DashboardtypesAxes:
       properties:
         isLogScale:
@@ -2734,7 +2747,6 @@ components:
         datasources:
           additionalProperties:
             $ref: '#/components/schemas/DashboardtypesDatasourceSpec'
-          nullable: true
           type: object
         display:
           $ref: '#/components/schemas/DashboardtypesDisplay'
@@ -2746,8 +2758,7 @@ components:
           type: array
         links:
           items:
-            $ref: '#/components/schemas/DashboardtypesLink'
-          nullable: true
+            $ref: '#/components/schemas/DashboardLink'
           type: array
         panels:
           additionalProperties:
@@ -3018,19 +3029,6 @@ components:
       - solid
       - dashed
       type: string
-    DashboardtypesLink:
-      properties:
-        name:
-          type: string
-        renderVariables:
-          type: boolean
-        targetBlank:
-          type: boolean
-        tooltip:
-          type: string
-        url:
-          type: string
-      type: object
     DashboardtypesListOrder:
       enum:
       - asc
@@ -3041,7 +3039,6 @@ components:
         selectFields:
           items:
             $ref: '#/components/schemas/TelemetrytypesTelemetryFieldKey'
-          nullable: true
           type: array
       type: object
     DashboardtypesListSort:
@@ -3391,8 +3388,7 @@ components:
           $ref: '#/components/schemas/DashboardtypesDisplay'
         links:
           items:
-            $ref: '#/components/schemas/DashboardtypesLink'
-          nullable: true
+            $ref: '#/components/schemas/DashboardLink'
           type: array
         plugin:
           $ref: '#/components/schemas/DashboardtypesPanelPlugin'
@@ -6337,7 +6333,6 @@ components:
       - delta
       - cumulative
       - unspecified
-      - ""
       type: string
     MetrictypesTimeAggregation:
       enum:
@@ -6350,7 +6345,6 @@ components:
       - count_distinct
       - rate
       - increase
-      - ""
       type: string
     MetrictypesType:
       enum:
@@ -6558,7 +6552,6 @@ components:
         args:
           items:
             $ref: '#/components/schemas/Querybuildertypesv5FunctionArg'
-          nullable: true
           type: array
         name:
           $ref: '#/components/schemas/Querybuildertypesv5FunctionName'
@@ -6729,7 +6722,6 @@ components:
         functions:
           items:
             $ref: '#/components/schemas/Querybuildertypesv5Function'
-          nullable: true
           type: array
         having:
           $ref: '#/components/schemas/Querybuildertypesv5Having'
@@ -6742,7 +6734,6 @@ components:
         order:
           items:
             $ref: '#/components/schemas/Querybuildertypesv5OrderBy'
-          nullable: true
           type: array
       type: object
     Querybuildertypesv5QueryBuilderQueryGithubComSigNozSignozPkgTypesQuerybuildertypesQuerybuildertypesv5LogAggregation:
@@ -6750,7 +6741,6 @@ components:
         aggregations:
           items:
             $ref: '#/components/schemas/Querybuildertypesv5LogAggregation'
-          nullable: true
           type: array
         cursor:
           type: string
@@ -6761,12 +6751,10 @@ components:
         functions:
           items:
             $ref: '#/components/schemas/Querybuildertypesv5Function'
-          nullable: true
           type: array
         groupBy:
           items:
             $ref: '#/components/schemas/Querybuildertypesv5GroupByKey'
-          nullable: true
           type: array
         having:
           $ref: '#/components/schemas/Querybuildertypesv5Having'
@@ -6783,17 +6771,14 @@ components:
         order:
           items:
             $ref: '#/components/schemas/Querybuildertypesv5OrderBy'
-          nullable: true
           type: array
         secondaryAggregations:
           items:
             $ref: '#/components/schemas/Querybuildertypesv5SecondaryAggregation'
-          nullable: true
           type: array
         selectFields:
           items:
             $ref: '#/components/schemas/TelemetrytypesTelemetryFieldKey'
-          nullable: true
           type: array
         signal:
           enum:
@@ -6811,7 +6796,6 @@ components:
         aggregations:
           items:
             $ref: '#/components/schemas/Querybuildertypesv5MetricAggregation'
-          nullable: true
           type: array
         cursor:
           type: string
@@ -6822,12 +6806,10 @@ components:
         functions:
           items:
             $ref: '#/components/schemas/Querybuildertypesv5Function'
-          nullable: true
           type: array
         groupBy:
           items:
             $ref: '#/components/schemas/Querybuildertypesv5GroupByKey'
-          nullable: true
           type: array
         having:
           $ref: '#/components/schemas/Querybuildertypesv5Having'
@@ -6844,17 +6826,14 @@ components:
         order:
           items:
             $ref: '#/components/schemas/Querybuildertypesv5OrderBy'
-          nullable: true
           type: array
         secondaryAggregations:
           items:
             $ref: '#/components/schemas/Querybuildertypesv5SecondaryAggregation'
-          nullable: true
           type: array
         selectFields:
           items:
             $ref: '#/components/schemas/TelemetrytypesTelemetryFieldKey'
-          nullable: true
           type: array
         signal:
           enum:
@@ -6872,7 +6851,6 @@ components:
         aggregations:
           items:
             $ref: '#/components/schemas/Querybuildertypesv5TraceAggregation'
-          nullable: true
           type: array
         cursor:
           type: string
@@ -6883,12 +6861,10 @@ components:
         functions:
           items:
             $ref: '#/components/schemas/Querybuildertypesv5Function'
-          nullable: true
           type: array
         groupBy:
           items:
             $ref: '#/components/schemas/Querybuildertypesv5GroupByKey'
-          nullable: true
           type: array
         having:
           $ref: '#/components/schemas/Querybuildertypesv5Having'
@@ -6905,17 +6881,14 @@ components:
         order:
           items:
             $ref: '#/components/schemas/Querybuildertypesv5OrderBy'
-          nullable: true
           type: array
         secondaryAggregations:
           items:
             $ref: '#/components/schemas/Querybuildertypesv5SecondaryAggregation'
-          nullable: true
           type: array
         selectFields:
           items:
             $ref: '#/components/schemas/TelemetrytypesTelemetryFieldKey'
-          nullable: true
           type: array
         signal:
           enum:
@@ -6933,7 +6906,6 @@ components:
         aggregations:
           items:
             $ref: '#/components/schemas/Querybuildertypesv5TraceAggregation'
-          nullable: true
           type: array
         cursor:
           type: string
@@ -6946,12 +6918,10 @@ components:
         functions:
           items:
             $ref: '#/components/schemas/Querybuildertypesv5Function'
-          nullable: true
           type: array
         groupBy:
           items:
             $ref: '#/components/schemas/Querybuildertypesv5GroupByKey'
-          nullable: true
           type: array
         having:
           $ref: '#/components/schemas/Querybuildertypesv5Having'
@@ -6966,14 +6936,12 @@ components:
         order:
           items:
             $ref: '#/components/schemas/Querybuildertypesv5OrderBy'
-          nullable: true
           type: array
         returnSpansFrom:
           type: string
         selectFields:
           items:
             $ref: '#/components/schemas/TelemetrytypesTelemetryFieldKey'
-          nullable: true
           type: array
         stepInterval:
           $ref: '#/components/schemas/Querybuildertypesv5Step'
@@ -7213,7 +7181,6 @@ components:
         groupBy:
           items:
             $ref: '#/components/schemas/Querybuildertypesv5GroupByKey'
-          nullable: true
           type: array
         limit:
           type: integer
@@ -7222,7 +7189,6 @@ components:
         order:
           items:
             $ref: '#/components/schemas/Querybuildertypesv5OrderBy'
-          nullable: true
           type: array
         stepInterval:
           $ref: '#/components/schemas/Querybuildertypesv5Step'
@@ -8558,7 +8524,6 @@ components:
       - resource
       - attribute
       - body
-      - ""
       type: string
     TelemetrytypesFieldDataType:
       enum:
@@ -8567,7 +8532,6 @@ components:
       - float64
       - int64
       - number
-      - ""
       type: string
     TelemetrytypesGettableFieldKeys:
       properties:
@@ -8599,12 +8563,10 @@ components:
       - traces
       - logs
       - metrics
-      - ""
       type: string
     TelemetrytypesSource:
       enum:
       - meter
-      - ""
       type: string
     TelemetrytypesTelemetryFieldKey:
       properties:
@@ -24504,17 +24466,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - logs:read
-        - traces:read
-        - metrics:read
-        - audit-logs:read
-        - meter-metrics:read
+        - VIEWER
       - tokenizer:
-        - logs:read
-        - traces:read
-        - metrics:read
-        - audit-logs:read
-        - meter-metrics:read
+        - VIEWER
       summary: Query range
       tags:
       - querier
@@ -24581,17 +24535,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - logs:read
-        - traces:read
-        - metrics:read
-        - audit-logs:read
-        - meter-metrics:read
+        - VIEWER
       - tokenizer:
-        - logs:read
-        - traces:read
-        - metrics:read
-        - audit-logs:read
-        - meter-metrics:read
+        - VIEWER
       summary: Query range preview
       tags:
       - querier

ee/authz/openfgaauthz/provider.go

@@ -223,12 +223,17 @@ func (provider *provider) Update(ctx context.Context, orgID valuer.UUID, updated
 		return err
 	}
 
-	desiredTuples, err := authtypes.NewTuplesFromTransactionGroups(existingRole.Name, orgID, updatedRole.TransactionGroups)
+	existingGroups := authtypes.MustNewTransactionGroupsFromTuples(existingTuples)
+	additions, deletions := existingGroups.Diff(updatedRole.TransactionGroups)
+	additionTuples, err := authtypes.NewTuplesFromTransactionGroups(existingRole.Name, orgID, additions)
 	if err != nil {
 		return err
 	}
 
-	additionTuples, deletionTuples := authtypes.DiffTuples(existingTuples, desiredTuples)
+	deletionTuples, err := authtypes.NewTuplesFromTransactionGroups(existingRole.Name, orgID, deletions)
+	if err != nil {
+		return err
+	}
 
 	err = provider.Write(ctx, additionTuples, deletionTuples)
 	if err != nil {

ee/query-service/rules/manager_test.go

@@ -240,17 +240,17 @@ func TestManager_TestNotification_SendUnmatched_PromRule(t *testing.T) {
 					mock := mockStore.Mock()
 
 					// Mock the fingerprint query (for Prometheus label matching)
-					// args: $1=metric_name (the __name__ matcher maps onto the column)
 					mock.ExpectQuery("SELECT fingerprint, any").
-						WithArgs("test_metric").
+						WithArgs("test_metric", "__name__", "test_metric").
 						WillReturnRows(fingerprintRows)
 
 					// Mock the samples query (for Prometheus metric data)
-					// args: metric_name IN (discovered names), subquery metric_name, start, end
 					mock.ExpectQuery("SELECT metric_name, fingerprint, unix_milli").
 						WithArgs(
 							"test_metric",
 							"test_metric",
+							"__name__",
+							"test_metric",
 							queryStart,
 							queryEnd,
 						).

frontend/public/locales/en-GB/titles.json

@@ -62,7 +62,7 @@
 	"TRACES_FUNNELS_DETAIL": "SigNoz | Funnel",
 	"INTEGRATIONS_DETAIL": "SigNoz | Integration",
 	"PUBLIC_DASHBOARD": "SigNoz | Dashboard",
-	"AI_OBSERVABILITY_OVERVIEW": "SigNoz | AI Observability Overview",
-	"AI_OBSERVABILITY_CONFIGURATION": "SigNoz | AI Observability Configuration",
-	"AI_OBSERVABILITY_ATTRIBUTE_MAPPING": "SigNoz | AI Observability Attribute Mapping"
+	"LLM_OBSERVABILITY_OVERVIEW": "SigNoz | LLM Observability Overview",
+	"LLM_OBSERVABILITY_CONFIGURATION": "SigNoz | LLM Observability Configuration",
+	"LLM_OBSERVABILITY_ATTRIBUTE_MAPPING": "SigNoz | LLM Observability Attribute Mapping"
 }

frontend/public/locales/en/titles.json

@@ -87,7 +87,7 @@
 	"TRACES_FUNNELS_DETAIL": "SigNoz | Funnel",
 	"INTEGRATIONS_DETAIL": "SigNoz | Integration",
 	"PUBLIC_DASHBOARD": "SigNoz | Dashboard",
-	"AI_OBSERVABILITY_OVERVIEW": "SigNoz | AI Observability Overview",
-	"AI_OBSERVABILITY_CONFIGURATION": "SigNoz | AI Observability Configuration",
-	"AI_OBSERVABILITY_ATTRIBUTE_MAPPING": "SigNoz | AI Observability Attribute Mapping"
+	"LLM_OBSERVABILITY_OVERVIEW": "SigNoz | LLM Observability Overview",
+	"LLM_OBSERVABILITY_CONFIGURATION": "SigNoz | LLM Observability Configuration",
+	"LLM_OBSERVABILITY_ATTRIBUTE_MAPPING": "SigNoz | LLM Observability Attribute Mapping"
 }

frontend/src/AppRoutes/Private.tsx

@@ -134,8 +134,8 @@ function PrivateRoute({ children }: PrivateRouteProps): JSX.Element {
 	}
 
 	if (
-		(pathname.startsWith(`${ROUTES.AI_OBSERVABILITY_BASE}/`) ||
-			pathname === ROUTES.AI_OBSERVABILITY_BASE) &&
+		(pathname.startsWith(`${ROUTES.LLM_OBSERVABILITY_BASE}/`) ||
+			pathname === ROUTES.LLM_OBSERVABILITY_BASE) &&
 		!isAIObservabilityEnabled
 	) {
 		return <Redirect to={ROUTES.HOME} />;

frontend/src/AppRoutes/routes.ts

@@ -514,24 +514,24 @@ const routes: AppRoutes[] = [
 		isPrivate: true,
 	},
 	{
-		path: ROUTES.AI_OBSERVABILITY_ATTRIBUTE_MAPPING,
+		path: ROUTES.LLM_OBSERVABILITY_ATTRIBUTE_MAPPING,
 		exact: true,
 		component: LLMObservabilityPage,
-		key: 'AI_OBSERVABILITY_ATTRIBUTE_MAPPING',
+		key: 'LLM_OBSERVABILITY_ATTRIBUTE_MAPPING',
 		isPrivate: true,
 	},
 	{
-		path: ROUTES.AI_OBSERVABILITY_OVERVIEW,
+		path: ROUTES.LLM_OBSERVABILITY_OVERVIEW,
 		exact: true,
 		component: LLMObservabilityPage,
-		key: 'AI_OBSERVABILITY_OVERVIEW',
+		key: 'LLM_OBSERVABILITY_OVERVIEW',
 		isPrivate: true,
 	},
 	{
-		path: ROUTES.AI_OBSERVABILITY_CONFIGURATION,
+		path: ROUTES.LLM_OBSERVABILITY_CONFIGURATION,
 		exact: true,
 		component: LLMObservabilityPage,
-		key: 'AI_OBSERVABILITY_CONFIGURATION',
+		key: 'LLM_OBSERVABILITY_CONFIGURATION',
 		isPrivate: true,
 	},
 ];

frontend/src/api/ErrorResponseHandlerForGeneratedAPIs.ts

@@ -2,29 +2,6 @@ import { RenderErrorResponseDTO } from 'api/generated/services/sigNoz.schemas';
 import { AxiosError } from 'axios';
 import APIError from 'types/api/error';
 
-// The wire shape these handlers can actually rely on. The generated
-// RenderErrorResponseDTO marks code/message/url/errors as required, but the
-// server omits any of them even on valid errors (e.g. a 400 with just a
-// message), so a present `error` object is all the guard can guarantee.
-type ErrorEnvelope = {
-	error: {
-		code?: string;
-		message?: string;
-		url?: string;
-		errors?: { message?: string }[];
-	};
-};
-
-function isErrorEnvelope(data: unknown): data is ErrorEnvelope {
-	return (
-		typeof data === 'object' &&
-		data !== null &&
-		'error' in data &&
-		typeof (data as ErrorEnvelope).error === 'object' &&
-		(data as ErrorEnvelope).error !== null
-	);
-}
-
 // @deprecated Use convertToApiError instead
 export function ErrorResponseHandlerForGeneratedAPIs(
 	error: AxiosError<RenderErrorResponseDTO>,
@@ -33,29 +10,15 @@ export function ErrorResponseHandlerForGeneratedAPIs(
 	// The request was made and the server responded with a status code
 	// that falls out of the range of 2xx
 	if (response) {
-		// The body isn't guaranteed to be an error envelope — e.g. a gateway 5xx
-		// with an HTML/empty body during a deploy. Verify the shape before reading
-		// it; otherwise synthesize a consistent error from the status.
-		const data: unknown = response.data;
-		if (isErrorEnvelope(data)) {
-			const { code, message, url, errors } = data.error;
-			throw new APIError({
-				httpStatusCode: response.status || 500,
-				error: {
-					code: code ?? '',
-					message: message ?? '',
-					url: url ?? '',
-					errors: (errors ?? []).map((e) => ({ message: e.message ?? '' })),
-				},
-			});
-		}
 		throw new APIError({
 			httpStatusCode: response.status || 500,
 			error: {
-				code: 'UPSTREAM_UNAVAILABLE',
-				message: error.message || 'Something went wrong',
-				url: '',
-				errors: [],
+				code: response.data.error.code,
+				message: response.data.error.message,
+				url: response.data.error.url ?? '',
+				errors: (response.data.error.errors ?? []).map((e) => ({
+					message: e.message ?? '',
+				})),
 			},
 		});
 	}
@@ -99,7 +62,9 @@ export function convertToApiError(
 	return new APIError({
 		httpStatusCode: response?.status || error.status || 500,
 		error: {
-			code: errorData?.code || 'UPSTREAM_UNAVAILABLE',
+			code:
+				errorData?.code ||
+				String(response?.status || error.code || 'unknown_error'),
 			message:
 				errorData?.message ||
 				response?.statusText ||

frontend/src/api/ErrorResponseHandlerV2.ts

@@ -2,38 +2,19 @@ import { AxiosError } from 'axios';
 import { ErrorV2Resp } from 'types/api';
 import APIError from 'types/api/error';
 
-function isErrorV2Resp(data: unknown): data is ErrorV2Resp {
-	return (
-		typeof data === 'object' &&
-		data !== null &&
-		'error' in data &&
-		typeof (data as ErrorV2Resp).error?.code === 'string'
-	);
-}
-
 // reference - https://axios-http.com/docs/handling_errors
 export function ErrorResponseHandlerV2(error: AxiosError<ErrorV2Resp>): never {
 	const { response, request } = error;
 	// The request was made and the server responded with a status code
 	// that falls out of the range of 2xx
 	if (response) {
-		// response.data isn't guaranteed to be a V2 envelope (e.g. a gateway 5xx
-		// with an HTML/empty body during a deploy), so verify the shape first.
-		const data: unknown = response.data;
-		if (isErrorV2Resp(data)) {
-			const { code, message, url, errors } = data.error;
-			throw new APIError({
-				httpStatusCode: response.status || 500,
-				error: { code, message, url, errors },
-			});
-		}
 		throw new APIError({
 			httpStatusCode: response.status || 500,
 			error: {
-				code: 'UPSTREAM_UNAVAILABLE',
-				message: error.message || 'Something went wrong',
-				url: '',
-				errors: [],
+				code: response.data.error.code,
+				message: response.data.error.message,
+				url: response.data.error.url,
+				errors: response.data.error.errors,
 			},
 		});
 	}

frontend/src/api/__tests__/ErrorResponseHandlerV2.test.ts

@@ -1,126 +0,0 @@
-import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
-import { AxiosError } from 'axios';
-import { ErrorV2Resp } from 'types/api';
-import APIError from 'types/api/error';
-
-function asAxiosError(partial: Partial<AxiosError>): AxiosError<ErrorV2Resp> {
-	return partial as AxiosError<ErrorV2Resp>;
-}
-
-// ErrorResponseHandlerV2 always throws — capture the APIError so assertions stay
-// unconditional.
-function runHandler(error: AxiosError<ErrorV2Resp>): APIError {
-	try {
-		ErrorResponseHandlerV2(error);
-	} catch (thrown) {
-		return thrown as APIError;
-	}
-	throw new Error('expected ErrorResponseHandlerV2 to throw');
-}
-
-type ExpectedError = {
-	httpStatusCode: number;
-	code: string;
-	message: string;
-	errors: { message: string }[];
-};
-
-// One row per response shape the handler must normalize. New shapes (with
-// different bodies) can be added here without a new test block.
-const cases: {
-	name: string;
-	error: AxiosError<ErrorV2Resp>;
-	expected: ExpectedError;
-}[] = [
-	{
-		name: 'well-formed V2 error envelope',
-		error: asAxiosError({
-			message: 'Request failed with status code 400',
-			response: {
-				status: 400,
-				data: {
-					error: {
-						code: 'bad_request',
-						message: 'Invalid dashboard payload',
-						url: 'https://signoz.io/docs',
-						errors: [{ message: 'name is required' }, { message: 'name too long' }],
-					},
-				},
-			} as AxiosError['response'],
-		}),
-		expected: {
-			httpStatusCode: 400,
-			code: 'bad_request',
-			message: 'Invalid dashboard payload',
-			errors: [{ message: 'name is required' }, { message: 'name too long' }],
-		},
-	},
-	{
-		// Regression: during a deployment the gateway returns a 5xx with a
-		// non-envelope body. Reading response.data.error.code used to throw a
-		// TypeError from inside the handler itself. See engineering-pod#5760.
-		name: '5xx with a non-envelope HTML body',
-		error: asAxiosError({
-			message: 'Request failed with status code 503',
-			response: {
-				status: 503,
-				data: '<html><body>503 Service Temporarily Unavailable</body></html>',
-			} as AxiosError['response'],
-		}),
-		expected: {
-			httpStatusCode: 503,
-			code: 'UPSTREAM_UNAVAILABLE',
-			message: 'Request failed with status code 503',
-			errors: [],
-		},
-	},
-	{
-		name: '5xx with an empty body',
-		error: asAxiosError({
-			message: 'Request failed with status code 502',
-			response: {
-				status: 502,
-				data: undefined,
-			} as AxiosError['response'],
-		}),
-		expected: {
-			httpStatusCode: 502,
-			code: 'UPSTREAM_UNAVAILABLE',
-			message: 'Request failed with status code 502',
-			errors: [],
-		},
-	},
-	{
-		name: 'no response received (network error)',
-		error: asAxiosError({
-			message: 'Network Error',
-			code: 'ERR_NETWORK',
-			name: 'AxiosError',
-			request: {},
-		}),
-		expected: {
-			httpStatusCode: 500,
-			code: 'ERR_NETWORK',
-			message: 'Network Error',
-			errors: [],
-		},
-	},
-];
-
-describe('ErrorResponseHandlerV2', () => {
-	it.each(cases)(
-		'normalizes $name into a consistent APIError',
-		({ error, expected }) => {
-			const apiError = runHandler(error);
-
-			expect(apiError).toBeInstanceOf(APIError);
-			expect(apiError.getHttpStatusCode()).toBe(expected.httpStatusCode);
-			expect(apiError.getErrorCode()).toBe(expected.code);
-			expect(apiError.getErrorMessage()).toBe(expected.message);
-			// The sub-error messages feed several parts of the UI, so assert them.
-			expect(apiError.getErrorDetails().error.errors).toStrictEqual(
-				expected.errors,
-			);
-		},
-	);
-});

frontend/src/api/generated/services/sigNoz.schemas.ts

@@ -3300,6 +3300,29 @@ export interface DashboardGridLayoutSpecDTO {
 	repeatVariable?: string;
 }
 
+export interface DashboardLinkDTO {
+	/**
+	 * @type string
+	 */
+	name?: string;
+	/**
+	 * @type boolean
+	 */
+	renderVariables?: boolean;
+	/**
+	 * @type boolean
+	 */
+	targetBlank?: boolean;
+	/**
+	 * @type string
+	 */
+	tooltip?: string;
+	/**
+	 * @type string
+	 */
+	url?: string;
+}
+
 export interface DashboardtypesAxesDTO {
 	/**
 	 * @type boolean
@@ -3466,9 +3489,9 @@ export enum Querybuildertypesv5FunctionNameDTO {
 }
 export interface Querybuildertypesv5FunctionDTO {
 	/**
-	 * @type array,null
+	 * @type array
 	 */
-	args?: Querybuildertypesv5FunctionArgDTO[] | null;
+	args?: Querybuildertypesv5FunctionArgDTO[];
 	name?: Querybuildertypesv5FunctionNameDTO;
 }
 
@@ -3479,7 +3502,6 @@ export enum TelemetrytypesFieldContextDTO {
 	resource = 'resource',
 	attribute = 'attribute',
 	body = 'body',
-	'' = '',
 }
 export enum TelemetrytypesFieldDataTypeDTO {
 	string = 'string',
@@ -3487,13 +3509,11 @@ export enum TelemetrytypesFieldDataTypeDTO {
 	float64 = 'float64',
 	int64 = 'int64',
 	number = 'number',
-	'' = '',
 }
 export enum TelemetrytypesSignalDTO {
 	traces = 'traces',
 	logs = 'logs',
 	metrics = 'metrics',
-	'' = '',
 }
 export interface Querybuildertypesv5GroupByKeyDTO {
 	/**
@@ -3573,18 +3593,18 @@ export interface Querybuildertypesv5SecondaryAggregationDTO {
 	 */
 	expression?: string;
 	/**
-	 * @type array,null
+	 * @type array
 	 */
-	groupBy?: Querybuildertypesv5GroupByKeyDTO[] | null;
+	groupBy?: Querybuildertypesv5GroupByKeyDTO[];
 	/**
 	 * @type integer
 	 */
 	limit?: number;
 	limitBy?: Querybuildertypesv5LimitByDTO;
 	/**
-	 * @type array,null
+	 * @type array
 	 */
-	order?: Querybuildertypesv5OrderByDTO[] | null;
+	order?: Querybuildertypesv5OrderByDTO[];
 	stepInterval?: Querybuildertypesv5StepDTO;
 }
 
@@ -3611,13 +3631,12 @@ export enum Querybuildertypesv5QueryBuilderQueryGithubComSigNozSignozPkgTypesQue
 }
 export enum TelemetrytypesSourceDTO {
 	meter = 'meter',
-	'' = '',
 }
 export interface Querybuildertypesv5QueryBuilderQueryGithubComSigNozSignozPkgTypesQuerybuildertypesQuerybuildertypesv5LogAggregationDTO {
 	/**
-	 * @type array,null
+	 * @type array
 	 */
-	aggregations?: Querybuildertypesv5LogAggregationDTO[] | null;
+	aggregations?: Querybuildertypesv5LogAggregationDTO[];
 	/**
 	 * @type string
 	 */
@@ -3628,13 +3647,13 @@ export interface Querybuildertypesv5QueryBuilderQueryGithubComSigNozSignozPkgTyp
 	disabled?: boolean;
 	filter?: Querybuildertypesv5FilterDTO;
 	/**
-	 * @type array,null
+	 * @type array
 	 */
-	functions?: Querybuildertypesv5FunctionDTO[] | null;
+	functions?: Querybuildertypesv5FunctionDTO[];
 	/**
-	 * @type array,null
+	 * @type array
 	 */
-	groupBy?: Querybuildertypesv5GroupByKeyDTO[] | null;
+	groupBy?: Querybuildertypesv5GroupByKeyDTO[];
 	having?: Querybuildertypesv5HavingDTO;
 	/**
 	 * @type string
@@ -3654,17 +3673,17 @@ export interface Querybuildertypesv5QueryBuilderQueryGithubComSigNozSignozPkgTyp
 	 */
 	offset?: number;
 	/**
-	 * @type array,null
+	 * @type array
 	 */
-	order?: Querybuildertypesv5OrderByDTO[] | null;
+	order?: Querybuildertypesv5OrderByDTO[];
 	/**
-	 * @type array,null
+	 * @type array
 	 */
-	secondaryAggregations?: Querybuildertypesv5SecondaryAggregationDTO[] | null;
+	secondaryAggregations?: Querybuildertypesv5SecondaryAggregationDTO[];
 	/**
-	 * @type array,null
+	 * @type array
 	 */
-	selectFields?: TelemetrytypesTelemetryFieldKeyDTO[] | null;
+	selectFields?: TelemetrytypesTelemetryFieldKeyDTO[];
 	/**
 	 * @enum logs
 	 * @type string
@@ -3711,7 +3730,6 @@ export enum MetrictypesTemporalityDTO {
 	delta = 'delta',
 	cumulative = 'cumulative',
 	unspecified = 'unspecified',
-	'' = '',
 }
 export enum MetrictypesTimeAggregationDTO {
 	latest = 'latest',
@@ -3723,7 +3741,6 @@ export enum MetrictypesTimeAggregationDTO {
 	count_distinct = 'count_distinct',
 	rate = 'rate',
 	increase = 'increase',
-	'' = '',
 }
 export interface Querybuildertypesv5MetricAggregationDTO {
 	comparisonSpaceAggregationParam?: MetrictypesComparisonSpaceAggregationParamDTO;
@@ -3742,9 +3759,9 @@ export enum Querybuildertypesv5QueryBuilderQueryGithubComSigNozSignozPkgTypesQue
 }
 export interface Querybuildertypesv5QueryBuilderQueryGithubComSigNozSignozPkgTypesQuerybuildertypesQuerybuildertypesv5MetricAggregationDTO {
 	/**
-	 * @type array,null
+	 * @type array
 	 */
-	aggregations?: Querybuildertypesv5MetricAggregationDTO[] | null;
+	aggregations?: Querybuildertypesv5MetricAggregationDTO[];
 	/**
 	 * @type string
 	 */
@@ -3755,13 +3772,13 @@ export interface Querybuildertypesv5QueryBuilderQueryGithubComSigNozSignozPkgTyp
 	disabled?: boolean;
 	filter?: Querybuildertypesv5FilterDTO;
 	/**
-	 * @type array,null
+	 * @type array
 	 */
-	functions?: Querybuildertypesv5FunctionDTO[] | null;
+	functions?: Querybuildertypesv5FunctionDTO[];
 	/**
-	 * @type array,null
+	 * @type array
 	 */
-	groupBy?: Querybuildertypesv5GroupByKeyDTO[] | null;
+	groupBy?: Querybuildertypesv5GroupByKeyDTO[];
 	having?: Querybuildertypesv5HavingDTO;
 	/**
 	 * @type string
@@ -3781,17 +3798,17 @@ export interface Querybuildertypesv5QueryBuilderQueryGithubComSigNozSignozPkgTyp
 	 */
 	offset?: number;
 	/**
-	 * @type array,null
+	 * @type array
 	 */
-	order?: Querybuildertypesv5OrderByDTO[] | null;
+	order?: Querybuildertypesv5OrderByDTO[];
 	/**
-	 * @type array,null
+	 * @type array
 	 */
-	secondaryAggregations?: Querybuildertypesv5SecondaryAggregationDTO[] | null;
+	secondaryAggregations?: Querybuildertypesv5SecondaryAggregationDTO[];
 	/**
-	 * @type array,null
+	 * @type array
 	 */
-	selectFields?: TelemetrytypesTelemetryFieldKeyDTO[] | null;
+	selectFields?: TelemetrytypesTelemetryFieldKeyDTO[];
 	/**
 	 * @enum metrics
 	 * @type string
@@ -3817,9 +3834,9 @@ export enum Querybuildertypesv5QueryBuilderQueryGithubComSigNozSignozPkgTypesQue
 }
 export interface Querybuildertypesv5QueryBuilderQueryGithubComSigNozSignozPkgTypesQuerybuildertypesQuerybuildertypesv5TraceAggregationDTO {
 	/**
-	 * @type array,null
+	 * @type array
 	 */
-	aggregations?: Querybuildertypesv5TraceAggregationDTO[] | null;
+	aggregations?: Querybuildertypesv5TraceAggregationDTO[];
 	/**
 	 * @type string
 	 */
@@ -3830,13 +3847,13 @@ export interface Querybuildertypesv5QueryBuilderQueryGithubComSigNozSignozPkgTyp
 	disabled?: boolean;
 	filter?: Querybuildertypesv5FilterDTO;
 	/**
-	 * @type array,null
+	 * @type array
 	 */
-	functions?: Querybuildertypesv5FunctionDTO[] | null;
+	functions?: Querybuildertypesv5FunctionDTO[];
 	/**
-	 * @type array,null
+	 * @type array
 	 */
-	groupBy?: Querybuildertypesv5GroupByKeyDTO[] | null;
+	groupBy?: Querybuildertypesv5GroupByKeyDTO[];
 	having?: Querybuildertypesv5HavingDTO;
 	/**
 	 * @type string
@@ -3856,17 +3873,17 @@ export interface Querybuildertypesv5QueryBuilderQueryGithubComSigNozSignozPkgTyp
 	 */
 	offset?: number;
 	/**
-	 * @type array,null
+	 * @type array
 	 */
-	order?: Querybuildertypesv5OrderByDTO[] | null;
+	order?: Querybuildertypesv5OrderByDTO[];
 	/**
-	 * @type array,null
+	 * @type array
 	 */
-	secondaryAggregations?: Querybuildertypesv5SecondaryAggregationDTO[] | null;
+	secondaryAggregations?: Querybuildertypesv5SecondaryAggregationDTO[];
 	/**
-	 * @type array,null
+	 * @type array
 	 */
-	selectFields?: TelemetrytypesTelemetryFieldKeyDTO[] | null;
+	selectFields?: TelemetrytypesTelemetryFieldKeyDTO[];
 	/**
 	 * @enum traces
 	 * @type string
@@ -4017,16 +4034,10 @@ export interface DashboardtypesDatasourceSpecDTO {
 	plugin?: DashboardtypesDatasourcePluginDTO;
 }
 
-export type DashboardtypesDashboardSpecDTODatasourcesAnyOf = {
+export type DashboardtypesDashboardSpecDTODatasources = {
 	[key: string]: DashboardtypesDatasourceSpecDTO;
 };
 
-/**
- * @nullable
- */
-export type DashboardtypesDashboardSpecDTODatasources =
-	DashboardtypesDashboardSpecDTODatasourcesAnyOf | null;
-
 export enum DashboardtypesPanelKindDTO {
 	Panel = 'Panel',
 }
@@ -4041,29 +4052,6 @@ export interface DashboardtypesDisplayDTO {
 	name: string;
 }
 
-export interface DashboardtypesLinkDTO {
-	/**
-	 * @type string
-	 */
-	name?: string;
-	/**
-	 * @type boolean
-	 */
-	renderVariables?: boolean;
-	/**
-	 * @type boolean
-	 */
-	targetBlank?: boolean;
-	/**
-	 * @type string
-	 */
-	tooltip?: string;
-	/**
-	 * @type string
-	 */
-	url?: string;
-}
-
 export enum DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTimeSeriesPanelSpecDTOKind {
 	'signoz/TimeSeriesPanel' = 'signoz/TimeSeriesPanel',
 }
@@ -4284,9 +4272,9 @@ export enum DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboa
 }
 export interface DashboardtypesListPanelSpecDTO {
 	/**
-	 * @type array,null
+	 * @type array
 	 */
-	selectFields?: TelemetrytypesTelemetryFieldKeyDTO[] | null;
+	selectFields?: TelemetrytypesTelemetryFieldKeyDTO[];
 }
 
 export interface DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesListPanelSpecDTO {
@@ -4356,9 +4344,9 @@ export interface Querybuildertypesv5QueryBuilderFormulaDTO {
 	 */
 	expression?: string;
 	/**
-	 * @type array,null
+	 * @type array
 	 */
-	functions?: Querybuildertypesv5FunctionDTO[] | null;
+	functions?: Querybuildertypesv5FunctionDTO[];
 	having?: Querybuildertypesv5HavingDTO;
 	/**
 	 * @type string
@@ -4373,9 +4361,9 @@ export interface Querybuildertypesv5QueryBuilderFormulaDTO {
 	 */
 	name?: string;
 	/**
-	 * @type array,null
+	 * @type array
 	 */
-	order?: Querybuildertypesv5OrderByDTO[] | null;
+	order?: Querybuildertypesv5OrderByDTO[];
 }
 
 export enum Querybuildertypesv5QueryEnvelopeFormulaDTOType {
@@ -4392,9 +4380,9 @@ export interface Querybuildertypesv5QueryEnvelopeFormulaDTO {
 
 export interface Querybuildertypesv5QueryBuilderTraceOperatorDTO {
 	/**
-	 * @type array,null
+	 * @type array
 	 */
-	aggregations?: Querybuildertypesv5TraceAggregationDTO[] | null;
+	aggregations?: Querybuildertypesv5TraceAggregationDTO[];
 	/**
 	 * @type string
 	 */
@@ -4409,13 +4397,13 @@ export interface Querybuildertypesv5QueryBuilderTraceOperatorDTO {
 	expression?: string;
 	filter?: Querybuildertypesv5FilterDTO;
 	/**
-	 * @type array,null
+	 * @type array
 	 */
-	functions?: Querybuildertypesv5FunctionDTO[] | null;
+	functions?: Querybuildertypesv5FunctionDTO[];
 	/**
-	 * @type array,null
+	 * @type array
 	 */
-	groupBy?: Querybuildertypesv5GroupByKeyDTO[] | null;
+	groupBy?: Querybuildertypesv5GroupByKeyDTO[];
 	having?: Querybuildertypesv5HavingDTO;
 	/**
 	 * @type string
@@ -4434,17 +4422,17 @@ export interface Querybuildertypesv5QueryBuilderTraceOperatorDTO {
 	 */
 	offset?: number;
 	/**
-	 * @type array,null
+	 * @type array
 	 */
-	order?: Querybuildertypesv5OrderByDTO[] | null;
+	order?: Querybuildertypesv5OrderByDTO[];
 	/**
 	 * @type string
 	 */
 	returnSpansFrom?: string;
 	/**
-	 * @type array,null
+	 * @type array
 	 */
-	selectFields?: TelemetrytypesTelemetryFieldKeyDTO[] | null;
+	selectFields?: TelemetrytypesTelemetryFieldKeyDTO[];
 	stepInterval?: Querybuildertypesv5StepDTO;
 }
 
@@ -4625,9 +4613,9 @@ export interface DashboardtypesQueryDTO {
 export interface DashboardtypesPanelSpecDTO {
 	display: DashboardtypesDisplayDTO;
 	/**
-	 * @type array,null
+	 * @type array
 	 */
-	links?: DashboardtypesLinkDTO[] | null;
+	links?: DashboardLinkDTO[];
 	plugin: DashboardtypesPanelPluginDTO;
 	/**
 	 * @type array
@@ -4801,7 +4789,7 @@ export type DashboardtypesVariableDTO =
 
 export interface DashboardtypesDashboardSpecDTO {
 	/**
-	 * @type object,null
+	 * @type object
 	 */
 	datasources?: DashboardtypesDashboardSpecDTODatasources;
 	display: DashboardtypesDisplayDTO;
@@ -4814,9 +4802,9 @@ export interface DashboardtypesDashboardSpecDTO {
 	 */
 	layouts: DashboardtypesLayoutDTO[];
 	/**
-	 * @type array,null
+	 * @type array
 	 */
-	links?: DashboardtypesLinkDTO[] | null;
+	links?: DashboardLinkDTO[];
 	/**
 	 * @type object
 	 */

frontend/src/components/HeaderRightSection/HeaderRightSection.tsx

@@ -20,7 +20,7 @@ import { Globe, Inbox, SquarePen } from '@signozhq/icons';
 
 import AnnouncementsModal from './AnnouncementsModal';
 import FeedbackModal from './FeedbackModal';
-import ShareURLModal, { type ShareURLExtraOption } from './ShareURLModal';
+import ShareURLModal from './ShareURLModal';
 
 import './HeaderRightSection.styles.scss';
 import { Typography } from '@signozhq/ui/typography';
@@ -29,15 +29,12 @@ interface HeaderRightSectionProps {
 	enableAnnouncements: boolean;
 	enableShare: boolean;
 	enableFeedback: boolean;
-	/** Optional page-specific toggle for the share dialog (e.g. "Include variables"). */
-	shareModalExtraOption?: ShareURLExtraOption;
 }
 
 function HeaderRightSection({
 	enableAnnouncements,
 	enableShare,
 	enableFeedback,
-	shareModalExtraOption,
 }: HeaderRightSectionProps): JSX.Element | null {
 	const location = useLocation();
 
@@ -188,7 +185,7 @@ function HeaderRightSection({
 					rootClassName="header-section-popover-root"
 					className="shareable-link-popover"
 					placement="bottomRight"
-					content={<ShareURLModal extraOption={shareModalExtraOption} />}
+					content={<ShareURLModal />}
 					open={openShareURLModal}
 					destroyTooltipOnHide
 					arrow={false}

frontend/src/components/HeaderRightSection/ShareURLModal.tsx

@@ -24,22 +24,7 @@ const routesToBeSharedWithTime = [
 	ROUTES.METER_EXPLORER,
 ];
 
-/**
- * An optional, page-specific toggle in the share dialog (e.g. a dashboard's
- * "Include variables"). When enabled, `apply` mutates the URL params that go into
- * the shared link. Keeps this shared modal generic — the page owns what it adds.
- */
-export interface ShareURLExtraOption {
-	label: string;
-	defaultEnabled?: boolean;
-	apply: (params: URLSearchParams) => void;
-}
-
-interface ShareURLModalProps {
-	extraOption?: ShareURLExtraOption;
-}
-
-function ShareURLModal({ extraOption }: ShareURLModalProps): JSX.Element {
+function ShareURLModal(): JSX.Element {
 	const urlQuery = useUrlQuery();
 	const location = useLocation();
 	const { selectedTime } = useSelector<AppState, GlobalReducer>(
@@ -49,9 +34,6 @@ function ShareURLModal({ extraOption }: ShareURLModalProps): JSX.Element {
 	const [enableAbsoluteTime, setEnableAbsoluteTime] = useState(
 		selectedTime !== 'custom',
 	);
-	const [enableExtraOption, setEnableExtraOption] = useState(
-		extraOption?.defaultEnabled ?? false,
-	);
 
 	const startTime = urlQuery.get(QueryParams.startTime);
 	const endTime = urlQuery.get(QueryParams.endTime);
@@ -111,11 +93,6 @@ function ShareURLModal({ extraOption }: ShareURLModalProps): JSX.Element {
 			}
 		}
 
-		if (extraOption && enableExtraOption) {
-			extraOption.apply(urlQuery);
-			currentUrl = getAbsoluteUrl(`${location.pathname}?${urlQuery.toString()}`);
-		}
-
 		return currentUrl;
 	};
 
@@ -166,20 +143,6 @@ function ShareURLModal({ extraOption }: ShareURLModalProps): JSX.Element {
 				</>
 			)}
 
-			{extraOption && (
-				<div className="absolute-relative-time-toggler-container">
-					<Typography.Text className="absolute-relative-time-toggler-label">
-						{extraOption.label}
-					</Typography.Text>
-					<div className="absolute-relative-time-toggler">
-						<Switch
-							value={enableExtraOption}
-							onChange={(): void => setEnableExtraOption((prev) => !prev)}
-						/>
-					</div>
-				</div>
-			)}
-
 			<div className="share-link">
 				<div className="url-share-container">
 					<div className="url-share-container-header">

frontend/src/components/QueryBuilderV2/QueryV2/QueryAddOns/QueryAddOns.styles.scss

@@ -247,6 +247,11 @@
 						var(--l2-background)
 					) !important;
 
+					&,
+					.ͼ1a {
+						color: var(--query-builder-v2-color, var(--l2-foreground));
+					}
+
 					::-moz-selection {
 						background: var(
 							--query-builder-v2-selection-background-color,

frontend/src/components/QueryBuilderV2/QueryV2/QuerySearch/QuerySearch.styles.scss

@@ -293,6 +293,11 @@ $max-recents-shown: 5;
 				var(--l2-background)
 			) !important;
 
+			&,
+			.ͼ1a {
+				color: var(--query-builder-v2-color, var(--l2-foreground));
+			}
+
 			::-moz-selection {
 				background: var(
 					--query-builder-v2-selection-background-color,

frontend/src/components/QueryBuilderV2/QueryV2/QuerySearch/QuerySearch.tsx

@@ -52,6 +52,8 @@ import type { SignalType } from 'types/api/v5/queryRange';
 import { queryExamples, SUGGESTIONS_SECTION } from './constants';
 import {
 	combineInitialAndUserExpression,
+	dedupeOptionsByLabel,
+	getFieldContextPrefix,
 	getRecentOptions,
 	renderRecentDeleteButton,
 } from './utils';
@@ -222,6 +224,12 @@ function QuerySearch({
 		QueryKeyDataSuggestionsProps[] | null
 	>(null);
 
+	// dedupe keySuggestions by label/name
+	const dedupedKeySuggestions = useMemo(
+		() => dedupeOptionsByLabel(keySuggestions || []),
+		[keySuggestions],
+	);
+
 	const [showExamples] = useState(false);
 
 	const [cursorPos, setCursorPos] = useState({ line: 0, ch: 0 });
@@ -246,9 +254,11 @@ function QuerySearch({
 		[key: string]: QueryKeyDataSuggestionsProps[];
 	}): any[] =>
 		Object.values(keys).flatMap((items: QueryKeyDataSuggestionsProps[]) =>
-			items.map(({ name, fieldDataType }) => ({
+			items.map(({ name, fieldDataType, fieldContext }) => ({
 				label: name,
 				type: fieldDataType === 'string' ? 'keyword' : fieldDataType,
+				fieldContext,
+				fieldDataType,
 				info: '',
 				details: '',
 			})),
@@ -307,13 +317,17 @@ function QuerySearch({
 			if (response.data.data) {
 				const { keys } = response.data.data;
 				const options = generateOptions(keys);
-				// Use a Map to deduplicate by label and preserve order: new options take precedence
+				// Deduplicate by full variant identity (name + context + data type), NOT by
+				// label. deduping by label removes varient which is not expected. If we need
+				// to dedupe by label use dedupedKeySuggestions not dedupe the source itself
+				const variantId = (opt: QueryKeyDataSuggestionsProps): string =>
+					`${opt.label}|${opt.fieldContext ?? ''}|${opt.fieldDataType ?? ''}`;
 				const merged = new Map<string, QueryKeyDataSuggestionsProps>();
-				options.forEach((opt) => merged.set(opt.label, opt));
+				options.forEach((opt) => merged.set(variantId(opt), opt));
 				if (searchText && lastKeyRef.current !== searchText) {
 					(keySuggestions || []).forEach((opt) => {
-						if (!merged.has(opt.label)) {
-							merged.set(opt.label, opt);
+						if (!merged.has(variantId(opt))) {
+							merged.set(variantId(opt), opt);
 						}
 					});
 				}
@@ -919,8 +933,55 @@ function QuerySearch({
 
 		if (queryContext.isInKey) {
 			const searchText = word?.text.toLowerCase().trim() ?? '';
+			const fieldContextMatch = getFieldContextPrefix(searchText);
 
-			options = (keySuggestions || []).filter((option) =>
+			if (fieldContextMatch) {
+				const { context: fieldContext, remainder } = fieldContextMatch;
+
+				// Fetch the context's page when the prefix is typed exactly eg.("attribute.")
+				if (remainder === '' && lastFetchedKeyRef.current !== searchText) {
+					debouncedFetchKeySuggestions(searchText);
+				}
+
+				//suggestions that actually do start with <fieldContext>.
+				const nameMatches = (keySuggestions || [])
+					.filter((option) => option.label.toLowerCase().includes(searchText))
+					.map((option) => ({ ...option, boost: 100 }));
+
+				//suggestions which do not start with the prefix but qualifies for suggestion
+				const contextQualified = (keySuggestions || [])
+					.filter(
+						(option) =>
+							option.fieldContext === fieldContext &&
+							option.label.toLowerCase().includes(remainder),
+					)
+					.map((option) => ({
+						...option,
+						label: `${fieldContext}.${option.label}`,
+						boost: 0,
+					}));
+
+				const contextOptions = dedupeOptionsByLabel([
+					...nameMatches,
+					...contextQualified,
+				]);
+
+				// If contextOptions is empty fetch again.
+				if (
+					contextOptions.length === 0 &&
+					lastFetchedKeyRef.current !== searchText
+				) {
+					debouncedFetchKeySuggestions(searchText);
+				}
+
+				return {
+					from: word?.from ?? 0,
+					to: word?.to ?? cursorPos.ch,
+					options: addSpaceToOptions(contextOptions),
+				};
+			}
+
+			options = dedupedKeySuggestions.filter((option) =>
 				option.label.toLowerCase().includes(searchText),
 			);
 
@@ -969,9 +1030,26 @@ function QuerySearch({
 
 			// If we have a key context, add that info to the operator suggestions
 			if (keyName) {
-				// Find the key details from suggestions
-				const keyDetails = (keySuggestions || []).find((k) => k.label === keyName);
-				const keyType = keyDetails?.type || '';
+				const keyContextMatch = getFieldContextPrefix(keyName);
+				// key-suggestion can contain multiple variants of a single key
+				// In variants we capture ones that match the label to typed keyName exactly or,
+				// if it has a prefix fieldContext remove it and then match.
+				const variants = (keySuggestions || []).filter(
+					(k) =>
+						k.label === keyName ||
+						(keyContextMatch !== null &&
+							k.fieldContext === keyContextMatch.context &&
+							k.label === keyContextMatch.remainder),
+				);
+				const variantTypes = new Set(
+					variants
+						.map((k) =>
+							k.type === 'keyword' ? QUERY_BUILDER_KEY_TYPES.STRING : k.type,
+						)
+						.filter(Boolean),
+				);
+				//if there are multi-variant, show all suggestions else just the one
+				const keyType = variantTypes.size === 1 ? [...variantTypes][0] : '';
 
 				// Filter operators based on key type
 				if (keyType) {
@@ -1214,7 +1292,7 @@ function QuerySearch({
 				if (curChar === '(') {
 					// In expression context, suggest keys, functions, or nested parentheses
 					options = [
-						...(keySuggestions || []),
+						...dedupedKeySuggestions,
 						{ label: '(', type: 'parenthesis', info: 'Open nested group' },
 						{ label: 'NOT', type: 'operator', info: 'Negate expression' },
 						...options.filter((opt) => opt.type === 'function'),

frontend/src/components/QueryBuilderV2/QueryV2/QuerySearch/__tests__/utils.test.ts

@@ -0,0 +1,120 @@
+import {
+	combineInitialAndUserExpression,
+	dedupeOptionsByLabel,
+	getFieldContextPrefix,
+	getUserExpressionFromCombined,
+} from '../utils';
+
+describe('entityLogsExpression', () => {
+	describe('combineInitialAndUserExpression', () => {
+		it('returns user when initial is empty', () => {
+			expect(combineInitialAndUserExpression('', 'body contains error')).toBe(
+				'body contains error',
+			);
+		});
+
+		it('returns initial when user is empty', () => {
+			expect(combineInitialAndUserExpression('k8s.pod.name = "x"', '')).toBe(
+				'k8s.pod.name = "x"',
+			);
+		});
+
+		it('wraps user in parentheses with AND', () => {
+			expect(
+				combineInitialAndUserExpression('k8s.pod.name = "x"', 'body = "a"'),
+			).toBe('k8s.pod.name = "x" AND (body = "a")');
+		});
+	});
+
+	describe('getUserExpressionFromCombined', () => {
+		it('returns empty when combined equals initial', () => {
+			expect(
+				getUserExpressionFromCombined('k8s.pod.name = "x"', 'k8s.pod.name = "x"'),
+			).toBe('');
+		});
+
+		it('extracts user from wrapped form', () => {
+			expect(
+				getUserExpressionFromCombined(
+					'k8s.pod.name = "x"',
+					'k8s.pod.name = "x" AND (body = "a")',
+				),
+			).toBe('body = "a"');
+		});
+
+		it('extracts user from legacy AND without parens', () => {
+			expect(
+				getUserExpressionFromCombined(
+					'k8s.pod.name = "x"',
+					'k8s.pod.name = "x" AND body = "a"',
+				),
+			).toBe('body = "a"');
+		});
+
+		it('returns full combined when initial is empty', () => {
+			expect(getUserExpressionFromCombined('', 'service.name = "a"')).toBe(
+				'service.name = "a"',
+			);
+		});
+	});
+});
+
+describe('getFieldContextPrefix', () => {
+	it('matches a complete context prefix with a remainder', () => {
+		expect(getFieldContextPrefix('attribute.status')).toStrictEqual({
+			context: 'attribute',
+			remainder: 'status',
+		});
+	});
+
+	it('matches a bare context prefix with empty remainder', () => {
+		expect(getFieldContextPrefix('resource.')).toStrictEqual({
+			context: 'resource',
+			remainder: '',
+		});
+	});
+
+	it('matches every backend field context', () => {
+		['attribute', 'resource', 'span', 'body', 'log', 'metric'].forEach((ctx) => {
+			expect(getFieldContextPrefix(`${ctx}.x`)).toStrictEqual({
+				context: ctx,
+				remainder: 'x',
+			});
+		});
+	});
+
+	it('does not match a partial context name', () => {
+		expect(getFieldContextPrefix('attr')).toBeNull();
+		expect(getFieldContextPrefix('attribute')).toBeNull();
+	});
+
+	it('does not match a non-context key with dots', () => {
+		expect(getFieldContextPrefix('status.code')).toBeNull();
+	});
+
+	it('matches context case-insensitively but keeps remainder casing', () => {
+		expect(getFieldContextPrefix('Attribute.Status')).toStrictEqual({
+			context: 'attribute',
+			remainder: 'Status',
+		});
+	});
+});
+
+describe('dedupeOptionsByLabel', () => {
+	it('keeps the first occurrence per label, preserving order', () => {
+		expect(
+			dedupeOptionsByLabel([
+				{ label: 'status.code', type: 'keyword' },
+				{ label: 'status.code', type: 'number' },
+				{ label: 'duration', type: 'number' },
+			]),
+		).toStrictEqual([
+			{ label: 'status.code', type: 'keyword' },
+			{ label: 'duration', type: 'number' },
+		]);
+	});
+
+	it('returns an empty array for empty input', () => {
+		expect(dedupeOptionsByLabel([])).toStrictEqual([]);
+	});
+});

frontend/src/components/QueryBuilderV2/QueryV2/QuerySearch/__tests__/utils.ts

@@ -1,58 +0,0 @@
-import {
-	combineInitialAndUserExpression,
-	getUserExpressionFromCombined,
-} from '../utils';
-
-describe('entityLogsExpression', () => {
-	describe('combineInitialAndUserExpression', () => {
-		it('returns user when initial is empty', () => {
-			expect(combineInitialAndUserExpression('', 'body contains error')).toBe(
-				'body contains error',
-			);
-		});
-
-		it('returns initial when user is empty', () => {
-			expect(combineInitialAndUserExpression('k8s.pod.name = "x"', '')).toBe(
-				'k8s.pod.name = "x"',
-			);
-		});
-
-		it('wraps user in parentheses with AND', () => {
-			expect(
-				combineInitialAndUserExpression('k8s.pod.name = "x"', 'body = "a"'),
-			).toBe('k8s.pod.name = "x" AND (body = "a")');
-		});
-	});
-
-	describe('getUserExpressionFromCombined', () => {
-		it('returns empty when combined equals initial', () => {
-			expect(
-				getUserExpressionFromCombined('k8s.pod.name = "x"', 'k8s.pod.name = "x"'),
-			).toBe('');
-		});
-
-		it('extracts user from wrapped form', () => {
-			expect(
-				getUserExpressionFromCombined(
-					'k8s.pod.name = "x"',
-					'k8s.pod.name = "x" AND (body = "a")',
-				),
-			).toBe('body = "a"');
-		});
-
-		it('extracts user from legacy AND without parens', () => {
-			expect(
-				getUserExpressionFromCombined(
-					'k8s.pod.name = "x"',
-					'k8s.pod.name = "x" AND body = "a"',
-				),
-			).toBe('body = "a"');
-		});
-
-		it('returns full combined when initial is empty', () => {
-			expect(getUserExpressionFromCombined('', 'service.name = "a"')).toBe(
-				'service.name = "a"',
-			);
-		});
-	});
-});

frontend/src/components/QueryBuilderV2/QueryV2/QuerySearch/constants.ts

@@ -1,6 +1,16 @@
 export const RECENTS_SECTION = { name: 'Recent searches', rank: 1 } as const;
 export const SUGGESTIONS_SECTION = { name: 'Suggestions', rank: 2 } as const;
 
+// TODO: move to using TelemetrytypesFieldContextDTO when we migrate getKeySuggestions API (Part of https://github.com/SigNoz/engineering-pod/issues/5289)
+export const FIELD_CONTEXTS = [
+	'attribute',
+	'resource',
+	'span',
+	'body',
+	'log',
+	'metric',
+] as const;
+
 // Custom CodeMirror Completion.type for recent-query entries. Used to discriminate
 // recents from regular autocomplete completions in renderers and event handlers.
 export const RECENT_COMPLETION_TYPE = 'recent';

frontend/src/components/QueryBuilderV2/QueryV2/QuerySearch/utils.ts

@@ -9,11 +9,45 @@ import type { SignalType } from 'types/api/v5/queryRange';
 import 'utils/timeUtils';
 
 import {
+	FIELD_CONTEXTS,
 	RECENT_COMPLETION_TYPE,
 	RECENTS_DISPLAY_CAP,
 	RECENTS_SECTION,
 } from './constants';
 
+export interface FieldContextPrefixMatch {
+	context: string;
+	remainder: string;
+}
+
+// This function checks if the text(query key) starts with a fieldContext
+// This util strictly checks that and returns context and remainder back.
+// This helps differentiate if the typed key was prefixed with a context or
+// was it an actual queryKey like (attribute.abc)
+export function getFieldContextPrefix(
+	text: string,
+): FieldContextPrefixMatch | null {
+	const lower = text.toLowerCase();
+	const context = FIELD_CONTEXTS.find((ctx) => lower.startsWith(`${ctx}.`));
+	return context ? { context, remainder: text.slice(context.length + 1) } : null;
+}
+
+// Keeps the first occurrence per label, preserving order. Key suggestions hold
+// one entry per (name, fieldContext, fieldDataType) variant; This means query builder
+// could show multiple labels and this avoids that.
+export function dedupeOptionsByLabel<T extends { label: string }>(
+	options: T[],
+): T[] {
+	const seen = new Set<string>();
+	return options.filter((option) => {
+		if (seen.has(option.label)) {
+			return false;
+		}
+		seen.add(option.label);
+		return true;
+	});
+}
+
 export function combineInitialAndUserExpression(
 	initial: string,
 	user: string,

frontend/src/components/QueryBuilderV2/QueryV2/__tests__/QuerySearch.contextSuggestions.test.tsx

@@ -0,0 +1,217 @@
+import { initialQueriesMap } from 'constants/queryBuilder';
+import { rest, server } from 'mocks-server/server';
+import { render, userEvent, waitFor } from 'tests/test-utils';
+import { DataSource } from 'types/common/queryBuilder';
+
+import QuerySearch from '../QuerySearch/QuerySearch';
+import { mockCodeMirrorDomApis } from './codemirrorDomMocks';
+
+const CM_EDITOR_SELECTOR = '.cm-editor .cm-content';
+const CM_OPTION_SELECTOR = '.cm-tooltip-autocomplete .cm-completionLabel';
+
+beforeAll(() => {
+	mockCodeMirrorDomApis();
+});
+
+jest.mock('hooks/useDarkMode', () => ({
+	useIsDarkMode: (): boolean => false,
+}));
+
+jest.mock('providers/Dashboard/store/useDashboardStore', () => ({
+	useDashboardStore: (): { dashboardData: undefined } => ({
+		dashboardData: undefined,
+	}),
+}));
+
+jest.mock('hooks/queryBuilder/useQueryBuilder', () => {
+	const handleRunQuery = jest.fn();
+	return {
+		__esModule: true,
+		useQueryBuilder: (): { handleRunQuery: () => void } => ({ handleRunQuery }),
+		handleRunQuery,
+	};
+});
+
+// Keys fixture: status.code exists as 3 variants (attribute string/number +
+// resource string); attribute.a.b.c is a key literally named with the prefix.
+const KEYS_FIXTURE = {
+	'status.code': [
+		{
+			name: 'status.code',
+			fieldContext: 'attribute',
+			fieldDataType: 'string',
+			signal: 'logs',
+		},
+		{
+			name: 'status.code',
+			fieldContext: 'attribute',
+			fieldDataType: 'number',
+			signal: 'logs',
+		},
+		{
+			name: 'status.code',
+			fieldContext: 'resource',
+			fieldDataType: 'string',
+			signal: 'logs',
+		},
+	],
+	'attribute.a.b.c': [
+		{
+			name: 'attribute.a.b.c',
+			fieldContext: 'attribute',
+			fieldDataType: 'string',
+			signal: 'logs',
+		},
+	],
+	'duration.nano': [
+		{
+			name: 'duration.nano',
+			fieldContext: 'span',
+			fieldDataType: 'number',
+			signal: 'logs',
+		},
+	],
+};
+
+const fetchedSearchTexts: string[] = [];
+
+beforeEach(() => {
+	fetchedSearchTexts.length = 0;
+	server.use(
+		rest.get('http://localhost/api/v1/fields/keys', (req, res, ctx) => {
+			fetchedSearchTexts.push(req.url.searchParams.get('searchText') ?? '');
+			return res(
+				ctx.status(200),
+				ctx.json({
+					status: 'success',
+					data: { complete: true, keys: KEYS_FIXTURE },
+				}),
+			);
+		}),
+		rest.get('http://localhost/api/v1/fields/values', (_req, res, ctx) =>
+			res(
+				ctx.status(200),
+				ctx.json({
+					status: 'success',
+					data: { values: { stringValues: [], numberValues: [] } },
+				}),
+			),
+		),
+	);
+});
+
+async function renderAndType(text: string): Promise<HTMLElement> {
+	render(
+		<QuerySearch
+			onChange={jest.fn() as jest.MockedFunction<(v: string) => void>}
+			queryData={initialQueriesMap.logs.builder.queryData[0]}
+			dataSource={DataSource.LOGS}
+		/>,
+	);
+
+	await waitFor(() => {
+		expect(document.querySelector(CM_EDITOR_SELECTOR)).toBeInTheDocument();
+	});
+
+	const editor = document.querySelector(CM_EDITOR_SELECTOR) as HTMLElement;
+	await userEvent.click(editor);
+	await userEvent.type(editor, text);
+	return editor;
+}
+
+// Types a key, waits for its suggestion to render (proving the debounced key
+// fetch resolved into state), then types a space to enter operator context.
+async function typeKeyThenEnterOperatorContext(
+	key: string,
+	expectedKeyLabel: string,
+): Promise<void> {
+	const editor = await renderAndType(key);
+
+	await waitFor(() => {
+		expect(visibleOptionLabels()).toContain(expectedKeyLabel);
+	});
+
+	// skipClick: a click would reset the caret to position 0 under the mocked
+	// DOM rects; we need the space appended at the end of the typed key.
+	await userEvent.type(editor, ' ', { skipClick: true });
+
+	await waitFor(() => {
+		expect(visibleOptionLabels()).toContain('=');
+	});
+}
+
+function visibleOptionLabels(): string[] {
+	return Array.from(document.querySelectorAll(CM_OPTION_SELECTOR)).map(
+		(el) => el.textContent ?? '',
+	);
+}
+
+describe('QuerySearch context-prefixed key suggestions', () => {
+	it('shows one deduped suggestion per key name in normal mode', async () => {
+		await renderAndType('statu');
+
+		await waitFor(() => {
+			expect(visibleOptionLabels()).toContain('status.code');
+		});
+
+		const statusOptions = visibleOptionLabels().filter(
+			(label) => label === 'status.code',
+		);
+		expect(statusOptions).toHaveLength(1);
+	});
+
+	it('shows context-scoped suggestions for a complete context prefix', async () => {
+		await renderAndType('attribute.');
+
+		await waitFor(() => {
+			expect(visibleOptionLabels()).toContain('attribute.status.code');
+		});
+
+		const labels = visibleOptionLabels();
+		// Literal key name match ranks first
+		expect(labels[0]).toBe('attribute.a.b.c');
+		// Context-qualified form of the literal key is also present
+		expect(labels).toContain('attribute.attribute.a.b.c');
+		// span-only key is not suggested under attribute.
+		expect(labels).not.toContain('attribute.duration.nano');
+	});
+
+	it('fetches the context page when the prefix is typed exactly', async () => {
+		await renderAndType('attribute.');
+
+		await waitFor(() => {
+			expect(fetchedSearchTexts).toContain('attribute.');
+		});
+	});
+});
+
+describe('QuerySearch operator suggestions by key type', () => {
+	it('shows all operators for a key with ambiguous types', async () => {
+		// status.code is string + number across variants → no type filtering
+		await typeKeyThenEnterOperatorContext('status.code', 'status.code');
+
+		const labels = visibleOptionLabels();
+		expect(labels).toContain('>');
+		expect(labels).toContain('LIKE');
+	});
+
+	it('shows numeric operators for a single-type number key', async () => {
+		await typeKeyThenEnterOperatorContext('duration.nano', 'duration.nano');
+
+		const labels = visibleOptionLabels();
+		expect(labels).toContain('>');
+		expect(labels).not.toContain('LIKE');
+	});
+
+	it('narrows operators when a context prefix disambiguates the type', async () => {
+		// status.code is ambiguous globally, but resource.status.code is string-only
+		await typeKeyThenEnterOperatorContext(
+			'resource.status.code',
+			'resource.status.code',
+		);
+
+		const labels = visibleOptionLabels();
+		expect(labels).toContain('LIKE');
+		expect(labels).not.toContain('>');
+	});
+});

frontend/src/components/QueryBuilderV2/QueryV2/__tests__/QuerySearch.test.tsx

@@ -8,78 +8,13 @@ import type { QueryKeyDataSuggestionsProps } from 'types/api/querySuggestions/ty
 import { DataSource } from 'types/common/queryBuilder';
 
 import QuerySearch from '../QuerySearch/QuerySearch';
+import { mockCodeMirrorDomApis } from './codemirrorDomMocks';
 
 const CM_EDITOR_SELECTOR = '.cm-editor .cm-content';
 
 // Mock DOM APIs that CodeMirror needs
 beforeAll(() => {
-	// Mock getClientRects and getBoundingClientRect for Range objects
-	const mockRect: DOMRect = {
-		width: 100,
-		height: 20,
-		top: 0,
-		left: 0,
-		right: 100,
-		bottom: 20,
-		x: 0,
-		y: 0,
-		toJSON: (): DOMRect => mockRect,
-	} as DOMRect;
-
-	// Create a minimal Range mock with only what CodeMirror actually uses
-	const createMockRange = (): Range => {
-		let startContainer: Node = document.createTextNode('');
-		let endContainer: Node = document.createTextNode('');
-		let startOffset = 0;
-		let endOffset = 0;
-
-		const mockRange = {
-			// CodeMirror uses these for text measurement
-			getClientRects: (): DOMRectList =>
-				({
-					length: 1,
-					item: (index: number): DOMRect | null => (index === 0 ? mockRect : null),
-					0: mockRect,
-					*[Symbol.iterator](): Generator<DOMRect> {
-						yield mockRect;
-					},
-				}) as unknown as DOMRectList,
-			getBoundingClientRect: (): DOMRect => mockRect,
-			// CodeMirror calls these to set up text ranges
-			setStart: (node: Node, offset: number): void => {
-				startContainer = node;
-				startOffset = offset;
-			},
-			setEnd: (node: Node, offset: number): void => {
-				endContainer = node;
-				endOffset = offset;
-			},
-			// Minimal Range properties (TypeScript requires these)
-			get startContainer(): Node {
-				return startContainer;
-			},
-			get endContainer(): Node {
-				return endContainer;
-			},
-			get startOffset(): number {
-				return startOffset;
-			},
-			get endOffset(): number {
-				return endOffset;
-			},
-			get collapsed(): boolean {
-				return startContainer === endContainer && startOffset === endOffset;
-			},
-			commonAncestorContainer: document.body,
-		};
-		return mockRange as unknown as Range;
-	};
-
-	// Mock document.createRange to return a new Range instance each time
-	document.createRange = (): Range => createMockRange();
-
-	// Mock getBoundingClientRect for elements
-	Element.prototype.getBoundingClientRect = (): DOMRect => mockRect;
+	mockCodeMirrorDomApis();
 });
 
 jest.mock('hooks/useDarkMode', () => ({

frontend/src/components/QueryBuilderV2/QueryV2/__tests__/codemirrorDomMocks.ts

@@ -0,0 +1,71 @@
+// Mocks the DOM measurement APIs CodeMirror needs to render in jsdom
+// (Range client rects + element bounding rects). Call from a beforeAll in
+// specs that render the real CodeMirror editor.
+export function mockCodeMirrorDomApis(): void {
+	const mockRect: DOMRect = {
+		width: 100,
+		height: 20,
+		top: 0,
+		left: 0,
+		right: 100,
+		bottom: 20,
+		x: 0,
+		y: 0,
+		toJSON: (): DOMRect => mockRect,
+	} as DOMRect;
+
+	// Create a minimal Range mock with only what CodeMirror actually uses
+	const createMockRange = (): Range => {
+		let startContainer: Node = document.createTextNode('');
+		let endContainer: Node = document.createTextNode('');
+		let startOffset = 0;
+		let endOffset = 0;
+
+		const mockRange = {
+			// CodeMirror uses these for text measurement
+			getClientRects: (): DOMRectList =>
+				({
+					length: 1,
+					item: (index: number): DOMRect | null => (index === 0 ? mockRect : null),
+					0: mockRect,
+					*[Symbol.iterator](): Generator<DOMRect> {
+						yield mockRect;
+					},
+				}) as unknown as DOMRectList,
+			getBoundingClientRect: (): DOMRect => mockRect,
+			// CodeMirror calls these to set up text ranges
+			setStart: (node: Node, offset: number): void => {
+				startContainer = node;
+				startOffset = offset;
+			},
+			setEnd: (node: Node, offset: number): void => {
+				endContainer = node;
+				endOffset = offset;
+			},
+			// Minimal Range properties (TypeScript requires these)
+			get startContainer(): Node {
+				return startContainer;
+			},
+			get endContainer(): Node {
+				return endContainer;
+			},
+			get startOffset(): number {
+				return startOffset;
+			},
+			get endOffset(): number {
+				return endOffset;
+			},
+			get collapsed(): boolean {
+				return startContainer === endContainer && startOffset === endOffset;
+			},
+			commonAncestorContainer: document.body,
+		};
+		return mockRange as unknown as Range;
+	};
+
+	// Mock document.createRange to return a new Range instance each time
+	document.createRange = (): Range => createMockRange();
+
+	// Mock getBoundingClientRect for elements
+	Element.prototype.getBoundingClientRect = (): DOMRect => mockRect;
+}

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/checkboxFilterQuery.ts

@@ -11,8 +11,6 @@ import { Query, TagFilterItem } from 'types/api/queryBuilder/queryBuilderData';
 import { v4 as uuid } from 'uuid';
 
 import { isKeyMatch } from './utils';
-import { CheckedState } from '../../types';
-import { SectionType } from './v2/itemRules';
 
 export const SELECTED_OPERATORS = [OPERATORS['='], 'in'];
 export const NON_SELECTED_OPERATORS = [OPERATORS['!='], 'not in', 'nin'];
@@ -150,8 +148,6 @@ export function applyCheckboxToggle({
 	value,
 	checked,
 	isOnlyOrAllClicked,
-	previousState,
-	sectionType,
 }: {
 	currentQuery: Query;
 	activeQueryIndex: number;
@@ -161,8 +157,6 @@ export function applyCheckboxToggle({
 	value: string;
 	checked: boolean;
 	isOnlyOrAllClicked: boolean;
-	previousState?: CheckedState;
-	sectionType?: SectionType;
 }): Query {
 	const activeItems =
 		currentQuery.builder.queryData?.[activeQueryIndex]?.filters?.items;
@@ -222,7 +216,6 @@ export function applyCheckboxToggle({
 			);
 			if (currentFilter) {
 				const runningOperator = currentFilter?.op;
-
 				switch (runningOperator) {
 					case 'in':
 						if (checked) {
@@ -253,29 +246,9 @@ export function applyCheckboxToggle({
 								});
 							}
 						} else if (!checked) {
-							// Related section: clicking to exclude creates NOT_IN for just this value
-							if (sectionType === SectionType.RELATED) {
-								const newFilter: TagFilterItem = {
-									id: uuid(),
-									op: getNotInOperator(source),
-									key: filter.attributeKey,
-									value,
-								};
-								query.filters.items = query.filters.items.map((item) => {
-									if (isKeyMatch(item.key?.key, filter.attributeKey.key)) {
-										return newFilter;
-									}
-									return item;
-								});
-								if (query.filter?.expression) {
-									query.filter.expression = removeKeysFromExpression(
-										query.filter.expression,
-										[filter.attributeKey.key],
-									);
-								}
-							} else if (isArray(currentFilter.value)) {
-								// if we are removing some value when the running operator is IN we filter.
-								// example - key IN [value1,currentSelectedValue] becomes key IN [value1] in case of array
+							// if we are removing some value when the running operator is IN we filter.
+							// example - key IN [value1,currentSelectedValue] becomes key IN [value1] in case of array
+							if (isArray(currentFilter.value)) {
 								const newFilter = {
 									...currentFilter,
 									value: currentFilter.value.filter((val) => val !== value),
@@ -302,38 +275,11 @@ export function applyCheckboxToggle({
 						}
 						break;
 					case 'nin':
-					case 'not in': {
-						// NOT IN means "exclude these values"
-						// Check if value is currently in the exclusion list
-						const isValueInFilter = isArray(currentFilter.value)
-							? currentFilter.value.includes(value)
-							: currentFilter.value === value;
-
-						// When clicking unchecked "Other" item, user wants to SELECT it
-						// Replace NOT IN filter with IN [value]
-						if (previousState === 'unchecked' && checked) {
-							const newFilter: TagFilterItem = {
-								id: uuid(),
-								op: getOperatorValue(OPERATORS.IN),
-								key: filter.attributeKey,
-								value,
-							};
-							query.filters.items = query.filters.items.map((item) => {
-								if (isKeyMatch(item.key?.key, filter.attributeKey.key)) {
-									return newFilter;
-								}
-								return item;
-							});
-							if (query.filter?.expression) {
-								query.filter.expression = removeKeysFromExpression(
-									query.filter.expression,
-									[filter.attributeKey.key],
-								);
-							}
-						} else if (!checked || !isValueInFilter) {
-							// Add to NOT IN when:
-							// - checked=false (user explicitly unchecked to exclude)
-							// - checked=true but value not in filter (clicking "other" value to exclude)
+					case 'not in':
+						// if the current running operator is NIN then when unchecking the value it gets
+						// added to the clause like key NIN [value1 , currentUnselectedValue]
+						if (!checked) {
+							// in case of array add the currentUnselectedValue to the list.
 							if (isArray(currentFilter.value)) {
 								const newFilter = {
 									...currentFilter,
@@ -346,6 +292,7 @@ export function applyCheckboxToggle({
 									return item;
 								});
 							} else {
+								// in case of not an array make it one!
 								const newFilter = {
 									...currentFilter,
 									value: [currentFilter.value as string, value],
@@ -357,9 +304,8 @@ export function applyCheckboxToggle({
 									return item;
 								});
 							}
-						} else {
-							// Remove from NOT IN when value IS in filter and checked=true
-							// (user wants to include this value back)
+						} else if (checked) {
+							// opposite of above!
 							if (isArray(currentFilter.value)) {
 								const newFilter = {
 									...currentFilter,
@@ -400,7 +346,6 @@ export function applyCheckboxToggle({
 							}
 						}
 						break;
-					}
 					case '=':
 						if (checked) {
 							const newFilter = {
@@ -444,11 +389,10 @@ export function applyCheckboxToggle({
 				}
 			}
 		} else {
-			// No filter for this key - all are visually selected.
-			// checked=true → user wants to select (IN), checked=false → exclude (NOT IN)
+			// case  - when there is no filter for the current key that means all are selected right now.
 			const newFilterItem: TagFilterItem = {
 				id: uuid(),
-				op: checked ? getOperatorValue(OPERATORS.IN) : getNotInOperator(source),
+				op: getNotInOperator(source),
 				key: filter.attributeKey,
 				value,
 			};

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/useCheckboxFilterActions.ts

@@ -10,8 +10,6 @@ import {
 	applyCheckboxToggle,
 	clearFilterFromQuery,
 } from './checkboxFilterQuery';
-import { CheckedState } from '../../types';
-import { SectionType } from './v2/itemRules';
 
 interface UseCheckboxFilterActionsProps {
 	filter: IQuickFiltersConfig;
@@ -26,8 +24,6 @@ interface UseCheckboxFilterActionsReturn {
 		value: string,
 		checked: boolean,
 		isOnlyOrAllClicked: boolean,
-		previousState?: CheckedState,
-		sectionType?: SectionType,
 	) => void;
 	onClear: () => void;
 }
@@ -57,8 +53,6 @@ function useCheckboxFilterActions({
 		value: string,
 		checked: boolean,
 		isOnlyOrAllClicked: boolean,
-		previousState?: CheckedState,
-		sectionType?: SectionType,
 	): void => {
 		dispatch(
 			applyCheckboxToggle({
@@ -70,8 +64,6 @@ function useCheckboxFilterActions({
 				value,
 				checked,
 				isOnlyOrAllClicked,
-				previousState,
-				sectionType,
 			}),
 		);
 	};

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/v2/CheckboxFilterV2.module.scss

@@ -1,103 +0,0 @@
-.checkboxFilter {
-	display: flex;
-	flex-direction: column;
-	padding: var(--spacing-6);
-	gap: var(--spacing-6);
-	border-bottom: 1px solid var(--l1-border);
-}
-
-.search {
-	--input-background: var(--l2-background);
-	--input-hover-background: var(--l2-background);
-	--input-focus-background: var(--l2-background);
-	--input-border-color: var(--l2-border);
-	--input-focus-border-color: var(--l2-border);
-}
-
-.searchSpinner {
-	color: var(--l2-foreground);
-	animation: spin 0.8s linear infinite;
-}
-
-@keyframes spin {
-	from {
-		transform: rotate(0deg);
-	}
-
-	to {
-		transform: rotate(360deg);
-	}
-}
-
-.values {
-	display: flex;
-	flex-direction: column;
-}
-
-.sectionValues {
-	display: flex;
-	flex-direction: column;
-	gap: var(--spacing-4);
-}
-
-.loadingValues {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	padding: var(--spacing-6) 0;
-}
-
-.loadingMore {
-	align-self: center;
-}
-
-.noData {
-	align-self: center;
-}
-
-.showMore {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-}
-
-.showMoreText {
-	color: var(--accent-primary);
-	cursor: pointer;
-}
-
-.goToDocs {
-	display: flex;
-	flex-direction: column;
-	gap: 44px;
-}
-
-.goToDocsContainer {
-	display: flex;
-	flex-direction: column;
-	gap: var(--spacing-2);
-	margin-top: var(--spacing-2);
-}
-
-.goToDocsMessage {
-	color: var(--l2-foreground);
-	font-size: 14px;
-	line-height: 20px;
-	letter-spacing: -0.07px;
-}
-
-.goToDocsButton {
-	display: flex;
-	align-items: center;
-	gap: var(--spacing-2);
-	cursor: pointer;
-	margin: 0 0 var(--spacing-2);
-	padding: 0;
-}
-
-.goToDocsButtonText {
-	color: var(--bg-robin-400);
-	font-size: 14px;
-	line-height: 20px;
-	letter-spacing: -0.07px;
-}

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/v2/CheckboxFilterV2.testUtils.tsx

@@ -1,126 +0,0 @@
-import { render, RenderResult } from 'tests/test-utils';
-import { server, rest } from 'mocks-server/server';
-import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
-import { DataSource } from 'types/common/queryBuilder';
-import { Query, TagFilterItem } from 'types/api/queryBuilder/queryBuilderData';
-
-import {
-	FiltersType,
-	IQuickFiltersConfig,
-	QuickFilterCheckboxUseFieldApis,
-	QuickFiltersSource,
-} from '../../../types';
-import CheckboxFilterV2 from './CheckboxFilterV2';
-
-export const DEFAULT_FILTER: IQuickFiltersConfig = {
-	type: FiltersType.CHECKBOX,
-	title: 'Environment',
-	attributeKey: {
-		key: 'deployment.environment',
-		dataType: DataTypes.String,
-		type: 'tag',
-	},
-	dataSource: DataSource.TRACES,
-	defaultOpen: true,
-};
-
-export const DEFAULT_USE_FIELD_APIS: QuickFilterCheckboxUseFieldApis = {
-	startUnixMilli: 1700000000000,
-	endUnixMilli: 1700003600000,
-	existingQuery: null,
-};
-
-export function mockFieldsValuesAPI(response: {
-	relatedValues?: (string | null)[];
-	stringValues?: (string | null)[];
-	numberValues?: (number | null)[];
-}): void {
-	server.use(
-		rest.get('http://localhost/api/v1/fields/values', (_, res, ctx) =>
-			res(
-				ctx.status(200),
-				ctx.json({
-					status: 'success',
-					data: {
-						values: {
-							relatedValues: response.relatedValues ?? [],
-							stringValues: response.stringValues ?? [],
-							numberValues: response.numberValues ?? [],
-						},
-					},
-				}),
-			),
-		),
-	);
-}
-
-export function mockFieldsValuesAPILoading(): void {
-	server.use(
-		rest.get('http://localhost/api/v1/fields/values', (_, res, ctx) =>
-			res(ctx.delay(10000)),
-		),
-	);
-}
-
-export function setupServer(): void {
-	beforeAll(() => server.listen({ onUnhandledRequest: 'bypass' }));
-	afterEach(() => server.resetHandlers());
-	afterAll(() => server.close());
-}
-
-export interface FilterItemConfig {
-	op: string;
-	value: string | string[];
-}
-
-export function renderWithFilter(
-	onFilterChange: jest.Mock,
-	filterItem?: FilterItemConfig,
-): RenderResult {
-	const items: TagFilterItem[] = filterItem
-		? [
-				{
-					key: { key: 'deployment.environment' },
-					op: filterItem.op,
-					value: filterItem.value,
-				} as TagFilterItem,
-			]
-		: [];
-
-	return render(
-		<CheckboxFilterV2
-			filter={DEFAULT_FILTER}
-			source={QuickFiltersSource.TRACES_EXPLORER}
-			useFieldApis={{
-				...DEFAULT_USE_FIELD_APIS,
-				existingQuery: 'service.name = "api"',
-			}}
-			onFilterChange={onFilterChange}
-		/>,
-		undefined,
-		{
-			queryBuilderOverrides: {
-				currentQuery: {
-					builder: {
-						queryData: [
-							{
-								filters: { items, op: 'AND' },
-								filter: { expression: 'service.name = "api"' },
-							},
-						],
-					},
-				},
-			} as never,
-		},
-	);
-}
-
-export function getFilterFromCall(
-	onFilterChange: jest.Mock,
-	callIndex = 0,
-): TagFilterItem | undefined {
-	const query = onFilterChange.mock.calls[callIndex]?.[0] as Query | undefined;
-	return query?.builder.queryData[0]?.filters?.items?.find(
-		(item) => item.key?.key === 'deployment.environment',
-	);
-}

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/v2/CheckboxFilterV2.tsx

@@ -1,241 +0,0 @@
-import { useEffect, useMemo, useRef, useState } from 'react';
-import { Input } from '@signozhq/ui/input';
-import { Skeleton } from 'antd';
-import { Typography } from '@signozhq/ui/typography';
-import { LoaderCircle } from '@signozhq/icons';
-import {
-	IQuickFiltersConfig,
-	QuickFilterCheckboxUseFieldApis,
-	QuickFiltersSource,
-} from 'components/QuickFilters/types';
-import { DEBOUNCE_DELAY } from 'constants/queryBuilderFilterConfig';
-import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
-import useDebouncedFn from 'hooks/useDebouncedFunction';
-import { Query } from 'types/api/queryBuilder/queryBuilderData';
-
-import { NON_SELECTED_OPERATORS } from '../checkboxFilterQuery';
-import useActiveQueryIndex from '../useActiveQueryIndex';
-import useCheckboxDisclosure from '../useCheckboxDisclosure';
-import useCheckboxFilterActions from '../useCheckboxFilterActions';
-import useCheckboxFilterState from '../useCheckboxFilterState';
-import { useFieldValues } from './useFieldValues';
-import { useExistingQuery } from './useExistingQuery';
-import { isKeyMatch } from '../utils';
-
-import { CheckboxFilterV2Header } from './CheckboxFilterV2Header';
-import { CheckboxFilterV2Section } from './CheckboxFilterV2Section';
-import { buildSelectedSet, useSectionedValues } from './useSectionedValues';
-import { useStaleRelatedExclusions } from './useStaleRelatedExclusions';
-
-import styles from './CheckboxFilterV2.module.scss';
-
-interface CheckboxFilterV2Props {
-	filter: IQuickFiltersConfig;
-	source: QuickFiltersSource;
-	onFilterChange?: (query: Query) => void;
-	useFieldApis: QuickFilterCheckboxUseFieldApis;
-}
-
-export default function CheckboxFilterV2(
-	props: CheckboxFilterV2Props,
-): JSX.Element {
-	const { source, filter, onFilterChange, useFieldApis } = props;
-	const [searchText, setSearchText] = useState<string>('');
-	const [userToggleState, setUserToggleState] = useState<boolean | null>(null);
-
-	const { currentQuery } = useQueryBuilder();
-	const activeQueryIndex = useActiveQueryIndex(source);
-
-	const {
-		isOpen,
-		isSomeFilterPresentForCurrentAttribute,
-		visibleItemsCount,
-		onToggleOpen,
-		onShowMore,
-	} = useCheckboxDisclosure({ filter, activeQueryIndex });
-
-	// Auto-preserve open state when filter is present
-	useEffect(() => {
-		if (isSomeFilterPresentForCurrentAttribute && userToggleState === null) {
-			setUserToggleState(true);
-		}
-	}, [isSomeFilterPresentForCurrentAttribute, userToggleState]);
-
-	const { existingQuery, hasExistingQuery } = useExistingQuery({
-		useFieldApis,
-		activeQueryIndex,
-	});
-
-	const { relatedValues, allValues, isLoading, isFetching } = useFieldValues({
-		filter,
-		searchText,
-		existingQuery,
-		metricNamespace: useFieldApis.metricNamespace,
-		startUnixMilli: useFieldApis.startUnixMilli,
-		endUnixMilli: useFieldApis.endUnixMilli,
-		enabled: isOpen,
-	});
-
-	// Track if initial load completed (don't show skeleton after first load)
-	// Must track if loading ever started, otherwise hasLoadedOnce gets set
-	// immediately on first render when query is disabled (isLoading=false)
-	const hasLoadedOnce = useRef(false);
-	const wasLoading = useRef(false);
-	if (isLoading) {
-		wasLoading.current = true;
-	}
-	if (!isLoading && wasLoading.current && !hasLoadedOnce.current) {
-		hasLoadedOnce.current = true;
-	}
-
-	// Combine for state derivation
-	const attributeValues = useMemo(() => {
-		const combined = [...relatedValues, ...allValues];
-		return [...new Set(combined)];
-	}, [relatedValues, allValues]);
-
-	const { currentFilterState, isFilterDisabled, isMultipleValuesTrueForTheKey } =
-		useCheckboxFilterState({ filter, attributeValues, activeQueryIndex });
-
-	const { onChange, onClear } = useCheckboxFilterActions({
-		filter,
-		source,
-		attributeValues,
-		activeQueryIndex,
-		onFilterChange,
-	});
-
-	const setSearchTextDebounced = useDebouncedFn((...args) => {
-		setSearchText(args[0] as string);
-	}, DEBOUNCE_DELAY);
-
-	const currentFilterOp = useMemo(() => {
-		const filterSync = currentQuery?.builder.queryData?.[
-			activeQueryIndex
-		]?.filters?.items.find((item) =>
-			isKeyMatch(item.key?.key, filter.attributeKey.key),
-		);
-		return filterSync?.op;
-	}, [
-		currentQuery?.builder.queryData,
-		activeQueryIndex,
-		filter.attributeKey.key,
-	]);
-
-	const isNotInOperator = NON_SELECTED_OPERATORS.includes(currentFilterOp || '');
-
-	const selectedValues = useMemo(
-		() => [
-			...buildSelectedSet(
-				currentFilterState,
-				isSomeFilterPresentForCurrentAttribute,
-				isNotInOperator,
-			),
-		],
-		[currentFilterState, isSomeFilterPresentForCurrentAttribute, isNotInOperator],
-	);
-
-	const isRefreshing = isFetching && !isLoading && searchText === '';
-	const relatedExclusions = useStaleRelatedExclusions({
-		selectedValues,
-		isFetching,
-		isRefreshing,
-	});
-
-	const { sections, totalCount } = useSectionedValues({
-		relatedValues,
-		allValues,
-		currentFilterState,
-		isSomeFilterPresentForCurrentAttribute,
-		isNotInOperator,
-		hasExistingQuery,
-		visibleItemsCount,
-		relatedExclusions,
-	});
-
-	return (
-		<div className={styles.checkboxFilter} data-testid="checkbox-filter-v2">
-			<CheckboxFilterV2Header
-				title={filter.title}
-				isOpen={isOpen}
-				showClearAll={!!attributeValues.length}
-				onToggleOpen={onToggleOpen}
-				onClear={onClear}
-				isSomeFilterPresentForCurrentAttribute={
-					isSomeFilterPresentForCurrentAttribute
-				}
-			/>
-			{isOpen && isLoading && !hasLoadedOnce.current && (
-				<section>
-					<Skeleton paragraph={{ rows: 4 }} />
-				</section>
-			)}
-			{isOpen && (!isLoading || hasLoadedOnce.current) && (
-				<>
-					<section className={styles.search}>
-						<Input
-							placeholder="Filter values"
-							onChange={(e): void => setSearchTextDebounced(e.target.value)}
-							disabled={isFilterDisabled}
-							data-testid="checkbox-filter-search"
-							suffix={
-								isFetching ? (
-									<LoaderCircle
-										size={14}
-										className={styles.searchSpinner}
-										data-testid="checkbox-filter-search-loading"
-									/>
-								) : null
-							}
-						/>
-					</section>
-
-					{totalCount > 0 && (
-						<section className={styles.values}>
-							{sections.map((section, index) => (
-								<CheckboxFilterV2Section
-									key={section.type}
-									section={section}
-									index={index}
-									isFilterDisabled={isFilterDisabled}
-									filter={filter}
-									isSomeFilterPresentForCurrentAttribute={
-										isSomeFilterPresentForCurrentAttribute
-									}
-									isMultipleValuesTrueForTheKey={isMultipleValuesTrueForTheKey}
-									onChange={onChange}
-								/>
-							))}
-						</section>
-					)}
-
-					{totalCount === 0 && hasLoadedOnce.current && !isFetching && (
-						<section
-							className={styles.noData}
-							data-testid={
-								searchText
-									? 'checkbox-filter-no-search-results'
-									: 'checkbox-filter-empty'
-							}
-						>
-							<Typography.Text>No values found</Typography.Text>
-						</section>
-					)}
-
-					{visibleItemsCount < totalCount &&
-						!(searchText && (isLoading || isFetching)) && (
-							<section className={styles.showMore}>
-								<Typography.Text
-									className={styles.showMoreText}
-									onClick={onShowMore}
-									data-testid="checkbox-filter-show-more"
-								>
-									Show More...
-								</Typography.Text>
-							</section>
-						)}
-				</>
-			)}
-		</div>
-	);
-}

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/v2/CheckboxFilterV2Header.module.scss

@@ -1,33 +0,0 @@
-.header {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	cursor: pointer;
-}
-
-.leftAction {
-	display: flex;
-	align-items: center;
-	gap: var(--spacing-3);
-}
-
-.title {
-	color: var(--l2-foreground);
-	font-size: 14px;
-	font-weight: 400;
-	line-height: 18px;
-	letter-spacing: -0.07px;
-	text-transform: capitalize;
-}
-
-.rightAction {
-	display: flex;
-	align-items: center;
-	min-width: 48px;
-}
-
-.clearAll {
-	font-size: 12px;
-	color: var(--accent-primary);
-	cursor: pointer;
-}

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/v2/CheckboxFilterV2Header.tsx

@@ -1,62 +0,0 @@
-import { Typography } from '@signozhq/ui/typography';
-import { ChevronDown, ChevronRight } from '@signozhq/icons';
-
-import styles from './CheckboxFilterV2Header.module.scss';
-
-interface CheckboxFilterHeaderProps {
-	title: string;
-	isOpen: boolean;
-	showClearAll: boolean;
-	onToggleOpen: () => void;
-	onClear: () => void;
-	isSomeFilterPresentForCurrentAttribute: boolean;
-}
-
-export function CheckboxFilterV2Header({
-	title,
-	isOpen,
-	showClearAll,
-	onToggleOpen,
-	onClear,
-	isSomeFilterPresentForCurrentAttribute,
-}: CheckboxFilterHeaderProps): JSX.Element {
-	return (
-		<section
-			role="button"
-			tabIndex={0}
-			className={styles.header}
-			onClick={onToggleOpen}
-			onKeyDown={(e): void => {
-				if (e.key === 'Enter' || e.key === ' ') {
-					onToggleOpen();
-				}
-			}}
-			data-testid="checkbox-filter-header"
-			data-state={isOpen ? 'open' : 'closed'}
-		>
-			<section className={styles.leftAction}>
-				{isOpen ? (
-					<ChevronDown size={13} cursor="pointer" />
-				) : (
-					<ChevronRight size={13} cursor="pointer" />
-				)}
-				<Typography.Text className={styles.title}>{title}</Typography.Text>
-			</section>
-			<section className={styles.rightAction}>
-				{isOpen && showClearAll && isSomeFilterPresentForCurrentAttribute && (
-					<Typography.Text
-						className={styles.clearAll}
-						onClick={(e): void => {
-							e.stopPropagation();
-							e.preventDefault();
-							onClear();
-						}}
-						data-testid="checkbox-filter-clear-all"
-					>
-						Clear
-					</Typography.Text>
-				)}
-			</section>
-		</section>
-	);
-}

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/v2/CheckboxFilterV2Section.tsx

@@ -1,106 +0,0 @@
-import {
-	IQuickFiltersConfig,
-	CheckedState,
-} from 'components/QuickFilters/types';
-
-import { CheckboxFilterV2ValueRow } from './CheckboxFilterV2ValueRow';
-import { SectionDivider } from './SectionDivider';
-import { Section } from './useSectionedValues';
-import { SectionType } from './itemRules';
-
-import styles from './CheckboxFilterV2.module.scss';
-
-interface SectionConfig {
-	label: string;
-	tooltip?: string;
-}
-
-function getSectionConfig(type: SectionType): SectionConfig | null {
-	switch (type) {
-		case SectionType.SELECTED:
-			return { label: 'Selected' };
-		case SectionType.RELATED:
-			return {
-				label: 'Related',
-				tooltip: 'Values that are filtered by your current selection.',
-			};
-		case SectionType.ALL_VALUES:
-			return { label: 'All values' };
-		default:
-			return null;
-	}
-}
-
-interface CheckboxFilterV2SectionProps {
-	section: Section;
-	index: number;
-	isFilterDisabled: boolean;
-	filter: IQuickFiltersConfig;
-	isSomeFilterPresentForCurrentAttribute: boolean;
-	isMultipleValuesTrueForTheKey: boolean;
-	onChange: (
-		value: string,
-		checked: boolean,
-		isOnly: boolean,
-		previousState?: CheckedState,
-		sectionType?: SectionType,
-	) => void;
-}
-
-export function CheckboxFilterV2Section(
-	props: CheckboxFilterV2SectionProps,
-): JSX.Element | null {
-	const {
-		section,
-		index,
-		isFilterDisabled,
-		filter,
-		isSomeFilterPresentForCurrentAttribute,
-		isMultipleValuesTrueForTheKey,
-		onChange,
-	} = props;
-
-	if (section.items.length === 0) {
-		return null;
-	}
-
-	const config = getSectionConfig(section.type);
-
-	// Show divider for all sections except first SELECTED section
-	const showDivider =
-		config !== null && (index > 0 || section.type !== SectionType.SELECTED);
-
-	return (
-		<div data-testid={`section-${section.type}`} className={styles.sectionValues}>
-			{showDivider && config && (
-				<SectionDivider label={config.label} tooltip={config.tooltip} />
-			)}
-			{section.items.map(({ value, badge, checkedState }) => {
-				const isChecked = checkedState === 'checked';
-
-				return (
-					<CheckboxFilterV2ValueRow
-						key={value}
-						value={value}
-						checkedState={checkedState}
-						disabled={isFilterDisabled}
-						title={filter.title}
-						badge={badge}
-						onlyButtonLabel={
-							isSomeFilterPresentForCurrentAttribute
-								? isChecked && !isMultipleValuesTrueForTheKey
-									? 'All'
-									: 'Only'
-								: 'Only'
-						}
-						customRendererForValue={filter.customRendererForValue}
-						onCheckboxChange={(checked, previousState): void =>
-							onChange(value, checked, false, previousState, section.type)
-						}
-						onOnlyOrAllClick={(): void => onChange(value, isChecked, true)}
-					/>
-				);
-			})}
-		</div>
-	);
-}

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/v2/CheckboxFilterV2ValueRow.module.scss

@@ -1,164 +0,0 @@
-.valueRow {
-	display: flex;
-	align-items: center;
-	gap: var(--spacing-4);
-	min-height: 24px;
-}
-
-.checkbox {
-	display: inline-flex;
-	align-items: center;
-}
-
-.valueButton {
-	display: grid;
-	grid-template-columns: minmax(0, 1fr) auto;
-	align-items: center;
-	gap: var(--spacing-2);
-	width: calc(100% - 24px);
-	cursor: pointer;
-}
-
-.content {
-	display: flex;
-	align-items: center;
-	gap: var(--spacing-2);
-	min-width: 0;
-}
-
-.valueLabel {
-	text-overflow: ellipsis;
-	white-space: nowrap;
-	overflow: hidden;
-}
-
-.actions {
-	display: grid;
-	align-items: center;
-	justify-items: end;
-
-	// Stack badge / only / toggle in a single cell so the crossfade overlaps
-	// instead of laying them side-by-side mid-transition.
-	> * {
-		grid-area: 1 / 1;
-	}
-}
-
-.badge {
-	opacity: 1;
-	transition:
-		opacity 0.16s ease,
-		display 0.16s allow-discrete;
-}
-
-.onlyButton {
-	display: none;
-	align-items: center;
-	justify-content: center;
-	opacity: 0;
-	transform: translateX(4px);
-	transition:
-		opacity 0.16s ease,
-		transform 0.16s ease,
-		display 0.16s allow-discrete;
-	--button-height: 21px;
-	--button-padding: var(--spacing-5);
-
-	&:hover {
-		background-color: unset;
-	}
-}
-
-.toggleButton {
-	display: none;
-	align-items: center;
-	justify-content: center;
-	opacity: 0;
-	transform: translateX(4px);
-	transition:
-		opacity 0.16s ease,
-		transform 0.16s ease,
-		display 0.16s allow-discrete;
-	--button-height: 21px;
-	--button-padding: var(--spacing-5);
-
-	&:hover {
-		background-color: unset;
-	}
-}
-
-.isDisabled {
-	cursor: not-allowed;
-
-	.valueLabel {
-		color: var(--l3-foreground);
-	}
-
-	.onlyButton {
-		cursor: not-allowed;
-		color: var(--l3-foreground);
-	}
-
-	.toggleButton {
-		cursor: not-allowed;
-		color: var(--l3-foreground);
-	}
-}
-
-.valueButton:hover {
-	.onlyButton {
-		display: flex;
-		opacity: 1;
-		transform: translateX(0);
-
-		@starting-style {
-			opacity: 0;
-			transform: translateX(4px);
-		}
-	}
-
-	.badge {
-		display: none;
-		opacity: 0;
-	}
-}
-
-.checkbox:hover ~ .valueButton {
-	.toggleButton {
-		display: flex;
-		opacity: 1;
-		transform: translateX(0);
-
-		@starting-style {
-			opacity: 0;
-			transform: translateX(4px);
-		}
-	}
-
-	.badge {
-		display: none;
-		opacity: 0;
-	}
-}
-
-@media (prefers-reduced-motion: reduce) {
-	.badge,
-	.onlyButton,
-	.toggleButton {
-		transition: none;
-	}
-}
-
-.indicatorFalse {
-	width: 2px;
-	height: 11px;
-	border-radius: 2px;
-	background: var(--danger-background);
-}
-
-.indicatorTrue {
-	width: 2px;
-	height: 11px;
-	border-radius: 2px;
-	background: var(--bg-forest-500);
-}

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/v2/CheckboxFilterV2ValueRow.tsx

@@ -1,118 +0,0 @@
-import { Badge } from '@signozhq/ui/badge';
-import { Button } from '@signozhq/ui/button';
-import { Checkbox } from '@signozhq/ui/checkbox';
-import { Typography } from '@signozhq/ui/typography';
-import cx from 'classnames';
-
-import { BadgeConfig } from './itemRules';
-import { CheckedState } from '../../../types';
-import styles from './CheckboxFilterV2ValueRow.module.scss';
-
-interface ValueRowProps {
-	value: string;
-	checkedState: CheckedState;
-	disabled: boolean;
-	title: string;
-	onlyButtonLabel: string;
-	customRendererForValue?: (value: string) => JSX.Element;
-	onCheckboxChange: (checked: boolean, previousState: CheckedState) => void;
-	onOnlyOrAllClick: () => void;
-	badge: BadgeConfig | null;
-}
-
-function toCheckboxValue(state: CheckedState): boolean | 'indeterminate' {
-	if (state === 'indeterminate') {
-		return 'indeterminate';
-	}
-	return state === 'checked';
-}
-
-const INDICATOR_CLASS_MAP = {
-	false: styles.indicatorFalse,
-	true: styles.indicatorTrue,
-} as Record<string, string>;
-
-export function CheckboxFilterV2ValueRow({
-	value,
-	checkedState,
-	disabled,
-	title,
-	onlyButtonLabel,
-	customRendererForValue,
-	onCheckboxChange,
-	onOnlyOrAllClick,
-	badge,
-}: ValueRowProps): JSX.Element {
-	const indicatorClass = INDICATOR_CLASS_MAP[value];
-
-	return (
-		<div
-			className={styles.valueRow}
-			data-testid={`checkbox-value-row-${value}`}
-			data-state={checkedState}
-			data-disabled={disabled}
-		>
-			<div className={styles.checkbox}>
-				<Checkbox
-					onChange={(isChecked): void =>
-						onCheckboxChange(isChecked === true, checkedState)
-					}
-					value={toCheckboxValue(checkedState)}
-					disabled={disabled}
-					color="primary"
-					testId={`checkbox-${title}-${value}`}
-				/>
-			</div>
-
-			<div
-				role="button"
-				tabIndex={disabled ? -1 : 0}
-				className={cx(styles.valueButton, disabled && styles.isDisabled)}
-				onClick={(): void => {
-					if (disabled) {
-						return;
-					}
-					onOnlyOrAllClick();
-				}}
-				onKeyDown={(e): void => {
-					if (disabled) {
-						return;
-					}
-					if (e.key === 'Enter' || e.key === ' ') {
-						onOnlyOrAllClick();
-					}
-				}}
-			>
-				<div className={styles.content}>
-					{indicatorClass && <div className={indicatorClass} />}
-					{customRendererForValue ? (
-						customRendererForValue(value)
-					) : (
-						<Typography.Text title={value} className={styles.valueLabel}>
-							{value}
-						</Typography.Text>
-					)}
-				</div>
-
-				<div className={styles.actions}>
-					{badge && (
-						<Badge
-							variant="outline"
-							color={badge.color}
-							className={styles.badge}
-							testId={`badge-${badge.key}`}
-						>
-							{badge.label}
-						</Badge>
-					)}
-					<Button variant="ghost" color="secondary" className={styles.onlyButton}>
-						{onlyButtonLabel}
-					</Button>
-					<Button variant="ghost" color="secondary" className={styles.toggleButton}>
-						Toggle
-					</Button>
-				</div>
-			</div>
-		</div>
-	);
-}

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/v2/SectionDivider.module.scss

@@ -1,29 +0,0 @@
-.divider {
-	display: flex;
-	align-items: center;
-	gap: var(--spacing-4);
-	padding: var(--spacing-2) 0;
-
-	margin-bottom: calc(-1 * var(--spacing-4));
-}
-
-.line {
-	flex: 1;
-	height: 1px;
-	background: var(--l1-border);
-}
-
-.label {
-	font-size: var(--periscope-font-size-small);
-	font-weight: var(--font-weight-semibold);
-	text-transform: uppercase;
-	letter-spacing: 0.5px;
-	color: var(--l3-foreground);
-	white-space: nowrap;
-}
-
-.infoIcon {
-	color: var(--l3-foreground);
-	cursor: help;
-	flex-shrink: 0;
-}

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/v2/SectionDivider.tsx

@@ -1,33 +0,0 @@
-import { Tooltip } from 'antd';
-import { Typography } from '@signozhq/ui/typography';
-import { Info } from '@signozhq/icons';
-
-import styles from './SectionDivider.module.scss';
-
-interface SectionDividerProps {
-	label: string;
-	tooltip?: string;
-}
-
-export function SectionDivider({
-	label,
-	tooltip,
-}: SectionDividerProps): JSX.Element {
-	const testId = label.toLowerCase().replace(/\s+/g, '-');
-	return (
-		<div className={styles.divider} data-testid={`section-divider-${testId}`}>
-			<div className={styles.line} />
-			<Typography.Text className={styles.label}>{label}</Typography.Text>
-			{tooltip && (
-				<Tooltip title={tooltip}>
-					<Info
-						size={12}
-						className={styles.infoIcon}
-						data-testid="section-divider-info"
-					/>
-				</Tooltip>
-			)}
-			<div className={styles.line} />
-		</div>
-	);
-}

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/v2/__tests__/CheckboxFilterV2.existingQuery.test.tsx

@@ -1,302 +0,0 @@
-import { screen } from '@testing-library/react';
-import { server, rest } from 'mocks-server/server';
-import { render } from 'tests/test-utils';
-
-import { QuickFiltersSource } from '../../../../types';
-
-import CheckboxFilterV2 from '../CheckboxFilterV2';
-import {
-	DEFAULT_FILTER,
-	DEFAULT_USE_FIELD_APIS,
-	setupServer,
-} from '../CheckboxFilterV2.testUtils';
-
-const USE_FIELD_APIS_AUTO_DERIVE = {
-	...DEFAULT_USE_FIELD_APIS,
-	existingQuery: undefined,
-};
-
-setupServer();
-
-describe('CheckboxFilterV2 - existingQuery calculation', () => {
-	const captureExistingQuery = (): Promise<string | null> =>
-		new Promise((resolve) => {
-			server.use(
-				rest.get('http://localhost/api/v1/fields/values', (req, res, ctx) => {
-					const existingQuery = req.url.searchParams.get('existingQuery');
-					resolve(existingQuery);
-					return res(
-						ctx.status(200),
-						ctx.json({
-							status: 'success',
-							data: {
-								values: {
-									relatedValues: [],
-									stringValues: ['test'],
-									numberValues: [],
-								},
-							},
-						}),
-					);
-				}),
-			);
-		});
-
-	describe('useFieldApis.existingQuery takes precedence', () => {
-		it('uses useFieldApis.existingQuery when provided', async () => {
-			const queryPromise = captureExistingQuery();
-
-			render(
-				<CheckboxFilterV2
-					filter={DEFAULT_FILTER}
-					source={QuickFiltersSource.TRACES_EXPLORER}
-					useFieldApis={{
-						...DEFAULT_USE_FIELD_APIS,
-						existingQuery: 'custom.query = "value"',
-					}}
-				/>,
-				undefined,
-				{
-					queryBuilderOverrides: {
-						currentQuery: {
-							builder: {
-								queryData: [
-									{
-										filters: { items: [], op: 'AND' },
-										filter: { expression: 'should.be.ignored = "yes"' },
-									},
-								],
-							},
-						},
-					} as never,
-				},
-			);
-
-			await screen.findByTestId('checkbox-value-row-test');
-			const capturedQuery = await queryPromise;
-			expect(capturedQuery).toBe('custom.query = "value"');
-		});
-
-		it('returns undefined when useFieldApis.existingQuery is null', async () => {
-			const queryPromise = captureExistingQuery();
-
-			render(
-				<CheckboxFilterV2
-					filter={DEFAULT_FILTER}
-					source={QuickFiltersSource.TRACES_EXPLORER}
-					useFieldApis={{
-						...DEFAULT_USE_FIELD_APIS,
-						existingQuery: null,
-					}}
-				/>,
-				undefined,
-				{
-					queryBuilderOverrides: {
-						currentQuery: {
-							builder: {
-								queryData: [
-									{
-										filters: { items: [], op: 'AND' },
-										filter: { expression: 'should.be.ignored = "yes"' },
-									},
-								],
-							},
-						},
-					} as never,
-				},
-			);
-
-			await screen.findByTestId('checkbox-value-row-test');
-			const capturedQuery = await queryPromise;
-			expect(capturedQuery).toBeNull();
-		});
-	});
-
-	describe('V5 filter.expression preferred over V3 filters.items', () => {
-		it('uses V5 filter.expression when both exist', async () => {
-			const queryPromise = captureExistingQuery();
-
-			render(
-				<CheckboxFilterV2
-					filter={DEFAULT_FILTER}
-					source={QuickFiltersSource.TRACES_EXPLORER}
-					useFieldApis={USE_FIELD_APIS_AUTO_DERIVE}
-				/>,
-				undefined,
-				{
-					queryBuilderOverrides: {
-						currentQuery: {
-							builder: {
-								queryData: [
-									{
-										filters: {
-											items: [
-												{
-													key: { key: 'service.name', dataType: 'string', type: 'tag' },
-													op: '=',
-													value: 'from-v3-items',
-												},
-											],
-											op: 'AND',
-										},
-										filter: { expression: 'v5.expression = "preferred"' },
-									},
-								],
-							},
-						},
-					} as never,
-				},
-			);
-
-			await screen.findByTestId('checkbox-value-row-test');
-			const capturedQuery = await queryPromise;
-			expect(capturedQuery).toBe('v5.expression = "preferred"');
-		});
-
-		it('uses V5 filter.expression when no V3 items exist', async () => {
-			const queryPromise = captureExistingQuery();
-
-			render(
-				<CheckboxFilterV2
-					filter={DEFAULT_FILTER}
-					source={QuickFiltersSource.TRACES_EXPLORER}
-					useFieldApis={USE_FIELD_APIS_AUTO_DERIVE}
-				/>,
-				undefined,
-				{
-					queryBuilderOverrides: {
-						currentQuery: {
-							builder: {
-								queryData: [
-									{
-										filters: { items: [], op: 'AND' },
-										filter: { expression: 'only.v5 = "expression"' },
-									},
-								],
-							},
-						},
-					} as never,
-				},
-			);
-
-			await screen.findByTestId('checkbox-value-row-test');
-			const capturedQuery = await queryPromise;
-			expect(capturedQuery).toBe('only.v5 = "expression"');
-		});
-	});
-
-	describe('V3 filters.items fallback', () => {
-		it('converts V3 filters.items to expression when no V5 expression exists', async () => {
-			const queryPromise = captureExistingQuery();
-
-			render(
-				<CheckboxFilterV2
-					filter={DEFAULT_FILTER}
-					source={QuickFiltersSource.TRACES_EXPLORER}
-					useFieldApis={USE_FIELD_APIS_AUTO_DERIVE}
-				/>,
-				undefined,
-				{
-					queryBuilderOverrides: {
-						currentQuery: {
-							builder: {
-								queryData: [
-									{
-										filters: {
-											items: [
-												{
-													key: { key: 'service.name', dataType: 'string', type: 'tag' },
-													op: '=',
-													value: 'api-service',
-												},
-											],
-											op: 'AND',
-										},
-									},
-								],
-							},
-						},
-					} as never,
-				},
-			);
-
-			await screen.findByTestId('checkbox-value-row-test');
-			const capturedQuery = await queryPromise;
-			expect(capturedQuery).toBe("service.name = 'api-service'");
-		});
-
-		it('converts multiple V3 filters.items with AND operator', async () => {
-			const queryPromise = captureExistingQuery();
-
-			render(
-				<CheckboxFilterV2
-					filter={DEFAULT_FILTER}
-					source={QuickFiltersSource.TRACES_EXPLORER}
-					useFieldApis={USE_FIELD_APIS_AUTO_DERIVE}
-				/>,
-				undefined,
-				{
-					queryBuilderOverrides: {
-						currentQuery: {
-							builder: {
-								queryData: [
-									{
-										filters: {
-											items: [
-												{
-													key: { key: 'service.name', dataType: 'string', type: 'tag' },
-													op: '=',
-													value: 'api',
-												},
-												{
-													key: { key: 'env', dataType: 'string', type: 'tag' },
-													op: '=',
-													value: 'prod',
-												},
-											],
-											op: 'AND',
-										},
-									},
-								],
-							},
-						},
-					} as never,
-				},
-			);
-
-			await screen.findByTestId('checkbox-value-row-test');
-			const capturedQuery = await queryPromise;
-			expect(capturedQuery).toBe("service.name = 'api' AND env = 'prod'");
-		});
-
-		it('returns undefined when no filters exist', async () => {
-			const queryPromise = captureExistingQuery();
-
-			render(
-				<CheckboxFilterV2
-					filter={DEFAULT_FILTER}
-					source={QuickFiltersSource.TRACES_EXPLORER}
-					useFieldApis={USE_FIELD_APIS_AUTO_DERIVE}
-				/>,
-				undefined,
-				{
-					queryBuilderOverrides: {
-						currentQuery: {
-							builder: {
-								queryData: [
-									{
-										filters: { items: [], op: 'AND' },
-									},
-								],
-							},
-						},
-					} as never,
-				},
-			);
-
-			await screen.findByTestId('checkbox-value-row-test');
-			const capturedQuery = await queryPromise;
-			expect(capturedQuery).toBeNull();
-		});
-	});
-});

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/v2/__tests__/CheckboxFilterV2.interactions.test.tsx

@@ -1,768 +0,0 @@
-import { screen, waitFor, within } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { server, rest } from 'mocks-server/server';
-import { render } from 'tests/test-utils';
-
-import { QuickFiltersSource } from '../../../../types';
-
-import CheckboxFilterV2 from '../CheckboxFilterV2';
-import {
-	DEFAULT_FILTER,
-	DEFAULT_USE_FIELD_APIS,
-	getFilterFromCall,
-	mockFieldsValuesAPI,
-	renderWithFilter,
-	setupServer,
-} from '../CheckboxFilterV2.testUtils';
-
-setupServer();
-
-describe('CheckboxFilterV2 - interactions', () => {
-	describe('search functionality', () => {
-		it('filters values based on search text', async () => {
-			const user = userEvent.setup();
-
-			let searchTextReceived = '';
-			server.use(
-				rest.get('http://localhost/api/v1/fields/values', (req, res, ctx) => {
-					searchTextReceived = req.url.searchParams.get('searchText') || '';
-
-					const values =
-						searchTextReceived === ''
-							? ['production', 'staging', 'development']
-							: ['production'];
-
-					return res(
-						ctx.status(200),
-						ctx.json({
-							status: 'success',
-							data: {
-								values: {
-									relatedValues: [],
-									stringValues: values,
-									numberValues: [],
-								},
-							},
-						}),
-					);
-				}),
-			);
-
-			render(
-				<CheckboxFilterV2
-					filter={DEFAULT_FILTER}
-					source={QuickFiltersSource.TRACES_EXPLORER}
-					useFieldApis={DEFAULT_USE_FIELD_APIS}
-				/>,
-			);
-
-			await screen.findByTestId('checkbox-value-row-production');
-			expect(screen.getByTestId('checkbox-value-row-staging')).toBeInTheDocument();
-
-			const searchInput = screen.getByTestId('checkbox-filter-search');
-			await user.type(searchInput, 'prod');
-
-			await waitFor(() => {
-				expect(searchTextReceived).toBe('prod');
-			});
-
-			await waitFor(() => {
-				expect(
-					screen.queryByTestId('checkbox-value-row-staging'),
-				).not.toBeInTheDocument();
-			});
-		});
-
-		it('filters values via search while preserving existingQuery context', async () => {
-			const user = userEvent.setup();
-
-			let requestCount = 0;
-			server.use(
-				rest.get('http://localhost/api/v1/fields/values', (req, res, ctx) => {
-					requestCount += 1;
-					const searchText = req.url.searchParams.get('searchText') || '';
-
-					if (requestCount === 1) {
-						return res(
-							ctx.status(200),
-							ctx.json({
-								status: 'success',
-								data: {
-									values: {
-										relatedValues: ['production'],
-										stringValues: ['staging', 'development'],
-										numberValues: [],
-									},
-								},
-							}),
-						);
-					}
-
-					return res(
-						ctx.status(200),
-						ctx.json({
-							status: 'success',
-							data: {
-								values: {
-									relatedValues: searchText === 'prod' ? ['production'] : [],
-									stringValues: searchText === 'prod' ? ['production'] : ['staging'],
-									numberValues: [],
-								},
-							},
-						}),
-					);
-				}),
-			);
-
-			render(
-				<CheckboxFilterV2
-					filter={DEFAULT_FILTER}
-					source={QuickFiltersSource.TRACES_EXPLORER}
-					useFieldApis={{
-						...DEFAULT_USE_FIELD_APIS,
-						existingQuery: 'service.name = "api"',
-					}}
-				/>,
-				undefined,
-				{
-					queryBuilderOverrides: {
-						currentQuery: {
-							builder: {
-								queryData: [
-									{
-										filters: { items: [], op: 'AND' },
-										filter: { expression: 'service.name = "api"' },
-									},
-								],
-							},
-						},
-					} as never,
-				},
-			);
-
-			await screen.findByTestId('checkbox-value-row-production');
-			// Related values now appear in "Related" section (no badge, uses divider instead)
-			expect(screen.getByTestId('section-divider-related')).toBeInTheDocument();
-
-			const searchInput = screen.getByTestId('checkbox-filter-search');
-			await user.type(searchInput, 'prod');
-
-			await waitFor(() => {
-				expect(
-					screen.queryByTestId('checkbox-value-row-staging'),
-				).not.toBeInTheDocument();
-				expect(
-					screen.getByTestId('checkbox-value-row-production'),
-				).toBeInTheDocument();
-			});
-		});
-
-		it('shows filtered results in all_values section when searching with existingQuery', async () => {
-			const user = userEvent.setup();
-
-			server.use(
-				rest.get('http://localhost/api/v1/fields/values', (req, res, ctx) => {
-					const searchText = req.url.searchParams.get('searchText') || '';
-
-					return res(
-						ctx.status(200),
-						ctx.json({
-							status: 'success',
-							data: {
-								values: {
-									relatedValues: [],
-									stringValues: searchText === '' ? ['prod', 'staging'] : ['prod-match'],
-									numberValues: [],
-								},
-							},
-						}),
-					);
-				}),
-			);
-
-			render(
-				<CheckboxFilterV2
-					filter={DEFAULT_FILTER}
-					source={QuickFiltersSource.TRACES_EXPLORER}
-					useFieldApis={{
-						...DEFAULT_USE_FIELD_APIS,
-						existingQuery: 'service.name = "api"',
-					}}
-				/>,
-			);
-
-			await screen.findByTestId('checkbox-value-row-prod');
-
-			const searchInput = screen.getByTestId('checkbox-filter-search');
-			await user.type(searchInput, 'prod');
-
-			await waitFor(() => {
-				expect(screen.getByTestId('section-all_values')).toBeInTheDocument();
-				expect(
-					screen.getByTestId('checkbox-value-row-prod-match'),
-				).toBeInTheDocument();
-			});
-		});
-
-		it('shows empty search results message when no matches found', async () => {
-			const user = userEvent.setup();
-
-			server.use(
-				rest.get('http://localhost/api/v1/fields/values', (req, res, ctx) => {
-					const searchText = req.url.searchParams.get('searchText') || '';
-
-					return res(
-						ctx.status(200),
-						ctx.json({
-							status: 'success',
-							data: {
-								values: {
-									relatedValues: [],
-									stringValues: searchText === '' ? ['prod', 'staging'] : [],
-									numberValues: [],
-								},
-							},
-						}),
-					);
-				}),
-			);
-
-			render(
-				<CheckboxFilterV2
-					filter={DEFAULT_FILTER}
-					source={QuickFiltersSource.TRACES_EXPLORER}
-					useFieldApis={DEFAULT_USE_FIELD_APIS}
-				/>,
-			);
-
-			await screen.findByTestId('checkbox-value-row-prod');
-
-			const searchInput = screen.getByTestId('checkbox-filter-search');
-			await user.type(searchInput, 'xyz-no-match');
-
-			await waitFor(() => {
-				expect(
-					screen.getByTestId('checkbox-filter-no-search-results'),
-				).toBeInTheDocument();
-			});
-		});
-
-		it('shows both RELATED and ALL_VALUES sections with non-overlapping values', async () => {
-			// This tests the bug fix where different pod names in relatedValues vs stringValues
-			// caused all items to go to ALL_VALUES instead of showing RELATED section
-			server.use(
-				rest.get('http://localhost/api/v1/fields/values', (req, res, ctx) =>
-					res(
-						ctx.status(200),
-						ctx.json({
-							status: 'success',
-							data: {
-								values: {
-									// Non-overlapping: different pod instances
-									relatedValues: ['pod-a-instance-1', 'pod-b-instance-1'],
-									stringValues: ['pod-a-instance-2', 'pod-b-instance-2'],
-									numberValues: [],
-								},
-							},
-						}),
-					),
-				),
-			);
-
-			render(
-				<CheckboxFilterV2
-					filter={DEFAULT_FILTER}
-					source={QuickFiltersSource.TRACES_EXPLORER}
-					useFieldApis={{
-						...DEFAULT_USE_FIELD_APIS,
-						existingQuery: 'service.name = "api"',
-					}}
-				/>,
-			);
-
-			// Wait for values to load
-			await screen.findByTestId('checkbox-value-row-pod-a-instance-1');
-
-			// RELATED section should exist with relatedValues
-			expect(screen.getByTestId('section-related')).toBeInTheDocument();
-			expect(
-				screen.getByTestId('checkbox-value-row-pod-a-instance-1'),
-			).toBeInTheDocument();
-			expect(
-				screen.getByTestId('checkbox-value-row-pod-b-instance-1'),
-			).toBeInTheDocument();
-
-			// ALL_VALUES section should exist with stringValues
-			expect(screen.getByTestId('section-all_values')).toBeInTheDocument();
-			expect(
-				screen.getByTestId('checkbox-value-row-pod-a-instance-2'),
-			).toBeInTheDocument();
-			expect(
-				screen.getByTestId('checkbox-value-row-pod-b-instance-2'),
-			).toBeInTheDocument();
-		});
-
-		it('shows both sections during search with filtered non-overlapping values', async () => {
-			const user = userEvent.setup();
-
-			server.use(
-				rest.get('http://localhost/api/v1/fields/values', (req, res, ctx) => {
-					const searchText = req.url.searchParams.get('searchText') || '';
-
-					// Simulate API filtering - both arrays filtered but remain non-overlapping
-					const relatedValues =
-						searchText === '' ? ['pod-a-v1', 'pod-b-v1', 'pod-c-v1'] : ['pod-a-v1']; // filtered to match 'pod-a'
-					const stringValues =
-						searchText === '' ? ['pod-a-v2', 'pod-b-v2', 'pod-c-v2'] : ['pod-a-v2']; // filtered to match 'pod-a'
-
-					return res(
-						ctx.status(200),
-						ctx.json({
-							status: 'success',
-							data: {
-								values: {
-									relatedValues,
-									stringValues,
-									numberValues: [],
-								},
-							},
-						}),
-					);
-				}),
-			);
-
-			render(
-				<CheckboxFilterV2
-					filter={DEFAULT_FILTER}
-					source={QuickFiltersSource.TRACES_EXPLORER}
-					useFieldApis={{
-						...DEFAULT_USE_FIELD_APIS,
-						existingQuery: 'service.name = "api"',
-					}}
-				/>,
-			);
-
-			await screen.findByTestId('checkbox-value-row-pod-a-v1');
-
-			const searchInput = screen.getByTestId('checkbox-filter-search');
-			await user.type(searchInput, 'pod-a');
-
-			// After search, both sections should still appear with filtered results
-			await waitFor(() => {
-				// RELATED section with filtered relatedValues
-				expect(screen.getByTestId('section-related')).toBeInTheDocument();
-				expect(
-					screen.getByTestId('checkbox-value-row-pod-a-v1'),
-				).toBeInTheDocument();
-
-				// ALL_VALUES section with filtered stringValues
-				expect(screen.getByTestId('section-all_values')).toBeInTheDocument();
-				expect(
-					screen.getByTestId('checkbox-value-row-pod-a-v2'),
-				).toBeInTheDocument();
-
-				// Other values should be filtered out
-				expect(
-					screen.queryByTestId('checkbox-value-row-pod-b-v1'),
-				).not.toBeInTheDocument();
-			});
-		});
-	});
-
-	describe('header interactions', () => {
-		it('collapses when header clicked on open filter', async () => {
-			const user = userEvent.setup();
-
-			mockFieldsValuesAPI({
-				stringValues: ['production'],
-			});
-
-			render(
-				<CheckboxFilterV2
-					filter={DEFAULT_FILTER}
-					source={QuickFiltersSource.TRACES_EXPLORER}
-					useFieldApis={DEFAULT_USE_FIELD_APIS}
-				/>,
-			);
-
-			await screen.findByTestId('checkbox-value-row-production');
-
-			const header = screen.getByTestId('checkbox-filter-header');
-			expect(header).toHaveAttribute('data-state', 'open');
-
-			await user.click(header);
-
-			expect(header).toHaveAttribute('data-state', 'closed');
-			expect(
-				screen.queryByTestId('checkbox-value-row-production'),
-			).not.toBeInTheDocument();
-		});
-
-		it('expands when header clicked on closed filter', async () => {
-			const user = userEvent.setup();
-
-			mockFieldsValuesAPI({
-				stringValues: ['production'],
-			});
-
-			render(
-				<CheckboxFilterV2
-					filter={{ ...DEFAULT_FILTER, defaultOpen: false }}
-					source={QuickFiltersSource.TRACES_EXPLORER}
-					useFieldApis={DEFAULT_USE_FIELD_APIS}
-				/>,
-			);
-
-			const header = screen.getByTestId('checkbox-filter-header');
-			expect(header).toHaveAttribute('data-state', 'closed');
-
-			await user.click(header);
-
-			expect(header).toHaveAttribute('data-state', 'open');
-			await screen.findByTestId('checkbox-value-row-production');
-		});
-	});
-
-	describe('show more functionality', () => {
-		it('shows "Show More..." when more than 10 values', async () => {
-			const values = Array.from(
-				{ length: 15 },
-				(_, i) => `value-${String(i).padStart(2, '0')}`,
-			);
-			mockFieldsValuesAPI({ stringValues: values });
-
-			render(
-				<CheckboxFilterV2
-					filter={DEFAULT_FILTER}
-					source={QuickFiltersSource.TRACES_EXPLORER}
-					useFieldApis={DEFAULT_USE_FIELD_APIS}
-				/>,
-			);
-
-			await screen.findByTestId('checkbox-value-row-value-00');
-
-			expect(screen.getByTestId('checkbox-filter-show-more')).toBeInTheDocument();
-
-			expect(
-				screen.queryByTestId('checkbox-value-row-value-10'),
-			).not.toBeInTheDocument();
-		});
-
-		it('loads more values when "Show More..." clicked', async () => {
-			const user = userEvent.setup();
-
-			const values = Array.from(
-				{ length: 15 },
-				(_, i) => `value-${String(i).padStart(2, '0')}`,
-			);
-			mockFieldsValuesAPI({ stringValues: values });
-
-			render(
-				<CheckboxFilterV2
-					filter={DEFAULT_FILTER}
-					source={QuickFiltersSource.TRACES_EXPLORER}
-					useFieldApis={DEFAULT_USE_FIELD_APIS}
-				/>,
-			);
-
-			await screen.findByTestId('checkbox-value-row-value-00');
-
-			await user.click(screen.getByTestId('checkbox-filter-show-more'));
-
-			await screen.findByTestId('checkbox-value-row-value-10');
-			expect(
-				screen.getByTestId('checkbox-value-row-value-14'),
-			).toBeInTheDocument();
-		});
-	});
-
-	describe('clear functionality', () => {
-		it('shows clear button when filter is open and has filter applied', async () => {
-			mockFieldsValuesAPI({
-				stringValues: ['production'],
-			});
-
-			render(
-				<CheckboxFilterV2
-					filter={DEFAULT_FILTER}
-					source={QuickFiltersSource.TRACES_EXPLORER}
-					useFieldApis={DEFAULT_USE_FIELD_APIS}
-				/>,
-				undefined,
-				{
-					queryBuilderOverrides: {
-						currentQuery: {
-							builder: {
-								queryData: [
-									{
-										filters: {
-											items: [
-												{
-													key: { key: 'deployment.environment' },
-													op: 'in',
-													value: ['production'],
-												},
-											],
-											op: 'AND',
-										},
-									},
-								],
-							},
-						},
-					} as never,
-				},
-			);
-
-			await screen.findByTestId('checkbox-value-row-production');
-
-			expect(screen.getByTestId('checkbox-filter-clear-all')).toBeInTheDocument();
-		});
-
-		it('hides clear button when no filter applied for attribute', async () => {
-			mockFieldsValuesAPI({
-				stringValues: ['production'],
-			});
-
-			render(
-				<CheckboxFilterV2
-					filter={DEFAULT_FILTER}
-					source={QuickFiltersSource.TRACES_EXPLORER}
-					useFieldApis={DEFAULT_USE_FIELD_APIS}
-				/>,
-			);
-
-			await screen.findByTestId('checkbox-value-row-production');
-
-			expect(
-				screen.queryByTestId('checkbox-filter-clear-all'),
-			).not.toBeInTheDocument();
-		});
-
-		it('calls onFilterChange when clear clicked', async () => {
-			const user = userEvent.setup();
-			const onFilterChange = jest.fn();
-
-			mockFieldsValuesAPI({
-				stringValues: ['production'],
-			});
-
-			render(
-				<CheckboxFilterV2
-					filter={DEFAULT_FILTER}
-					source={QuickFiltersSource.TRACES_EXPLORER}
-					useFieldApis={DEFAULT_USE_FIELD_APIS}
-					onFilterChange={onFilterChange}
-				/>,
-				undefined,
-				{
-					queryBuilderOverrides: {
-						currentQuery: {
-							builder: {
-								queryData: [
-									{
-										filters: {
-											items: [
-												{
-													key: { key: 'deployment.environment' },
-													op: 'in',
-													value: ['production'],
-												},
-											],
-											op: 'AND',
-										},
-									},
-								],
-							},
-						},
-					} as never,
-				},
-			);
-
-			await screen.findByTestId('checkbox-value-row-production');
-
-			await user.click(screen.getByTestId('checkbox-filter-clear-all'));
-
-			expect(onFilterChange).toHaveBeenCalled();
-		});
-	});
-
-	describe('value row interactions', () => {
-		it('calls onFilterChange when checkbox value clicked', async () => {
-			const user = userEvent.setup();
-			const onFilterChange = jest.fn();
-
-			mockFieldsValuesAPI({
-				stringValues: ['production', 'staging'],
-			});
-
-			render(
-				<CheckboxFilterV2
-					filter={DEFAULT_FILTER}
-					source={QuickFiltersSource.TRACES_EXPLORER}
-					useFieldApis={DEFAULT_USE_FIELD_APIS}
-					onFilterChange={onFilterChange}
-				/>,
-			);
-
-			const productionRow = await screen.findByTestId(
-				'checkbox-value-row-production',
-			);
-
-			await user.click(within(productionRow).getByText('production'));
-
-			expect(onFilterChange).toHaveBeenCalled();
-		});
-
-		it('creates NOT IN filter when unchecking related item with no existing filter', async () => {
-			const user = userEvent.setup();
-			const onFilterChange = jest.fn();
-
-			mockFieldsValuesAPI({
-				relatedValues: ['valueA'],
-				stringValues: ['valueB'],
-			});
-
-			// Start with no filter, related items show as checked
-			// Clicking unchecks them → creates NOT IN filter to exclude
-			renderWithFilter(onFilterChange);
-
-			const rowA = await screen.findByTestId('checkbox-value-row-valueA');
-			expect(rowA).toHaveAttribute('data-state', 'checked');
-
-			await user.click(within(rowA).getByRole('checkbox'));
-
-			expect(onFilterChange).toHaveBeenCalledTimes(1);
-			const filter = getFilterFromCall(onFilterChange);
-			expect(filter?.op).toBe('not in');
-			expect(filter?.value).toBe('valueA');
-		});
-
-		it('converts NOT IN to IN when toggling unchecked (other) item', async () => {
-			const user = userEvent.setup();
-			const onFilterChange = jest.fn();
-
-			mockFieldsValuesAPI({
-				relatedValues: ['valueA'],
-				stringValues: ['valueB'],
-			});
-
-			// Clicking unchecked "Other" item with NOT IN filter should convert to IN [B]
-			renderWithFilter(onFilterChange, { op: 'not in', value: ['valueA'] });
-
-			const rowB = await screen.findByTestId('checkbox-value-row-valueB');
-			expect(rowB).toHaveAttribute('data-state', 'unchecked');
-
-			await user.click(within(rowB).getByRole('checkbox'));
-
-			expect(onFilterChange).toHaveBeenCalledTimes(1);
-			const filter = getFilterFromCall(onFilterChange);
-			expect(filter?.op).toBe('in');
-			expect(filter?.value).toBe('valueB');
-		});
-
-		it('accumulates both values in IN when toggling checked (related) then unchecked (other)', async () => {
-			const user = userEvent.setup();
-			const onFilterChange = jest.fn();
-
-			mockFieldsValuesAPI({
-				relatedValues: ['valueA'],
-				stringValues: ['valueB'],
-			});
-
-			// Start with IN filter for valueA
-			renderWithFilter(onFilterChange, { op: 'in', value: ['valueA'] });
-
-			const rowA = await screen.findByTestId('checkbox-value-row-valueA');
-			expect(rowA).toHaveAttribute('data-state', 'checked');
-
-			const rowB = screen.getByTestId('checkbox-value-row-valueB');
-			expect(rowB).toHaveAttribute('data-state', 'unchecked');
-
-			// Toggle B (unchecked -> should add to IN)
-			await user.click(within(rowB).getByRole('checkbox'));
-
-			expect(onFilterChange).toHaveBeenCalledTimes(1);
-			const filter = getFilterFromCall(onFilterChange);
-			expect(filter?.op).toBe('in');
-			expect(filter?.value).toStrictEqual(['valueA', 'valueB']);
-		});
-
-		it('adds to NOT IN when toggling checked (related) with existing NOT IN filter', async () => {
-			const user = userEvent.setup();
-			const onFilterChange = jest.fn();
-
-			mockFieldsValuesAPI({
-				relatedValues: ['valueA'],
-				stringValues: ['valueB'],
-			});
-
-			// Start with NOT IN filter for valueB
-			renderWithFilter(onFilterChange, { op: 'not in', value: ['valueB'] });
-
-			const rowA = await screen.findByTestId('checkbox-value-row-valueA');
-			// Related values show as checked
-			expect(rowA).toHaveAttribute('data-state', 'checked');
-
-			// Toggle A (checked -> should add to NOT IN)
-			await user.click(within(rowA).getByRole('checkbox'));
-
-			expect(onFilterChange).toHaveBeenCalledTimes(1);
-			const filter = getFilterFromCall(onFilterChange);
-			expect(filter?.op).toBe('not in');
-			expect(filter?.value).toStrictEqual(['valueB', 'valueA']);
-		});
-
-		it('creates NOT IN for single value when toggling related item with existing IN filter', async () => {
-			const user = userEvent.setup();
-			const onFilterChange = jest.fn();
-
-			mockFieldsValuesAPI({
-				relatedValues: ['relatedValue'],
-				stringValues: ['otherValue'],
-			});
-
-			// Start with IN filter for otherValue (Selected section)
-			// relatedValue is in Related section (checked visually)
-			renderWithFilter(onFilterChange, { op: 'in', value: ['otherValue'] });
-
-			const selectedRow = await screen.findByTestId(
-				'checkbox-value-row-otherValue',
-			);
-			expect(selectedRow).toHaveAttribute('data-state', 'checked');
-
-			const relatedRow = screen.getByTestId('checkbox-value-row-relatedValue');
-			expect(relatedRow).toHaveAttribute('data-state', 'checked');
-
-			// Toggle related item (checked -> should create NOT IN with just this value)
-			await user.click(within(relatedRow).getByRole('checkbox'));
-
-			expect(onFilterChange).toHaveBeenCalledTimes(1);
-			const filter = getFilterFromCall(onFilterChange);
-			expect(filter?.op).toBe('not in');
-			expect(filter?.value).toBe('relatedValue');
-		});
-	});
-
-	describe('custom renderer', () => {
-		it('uses customRendererForValue when provided', async () => {
-			mockFieldsValuesAPI({
-				stringValues: ['production'],
-			});
-
-			const customRenderer = (value: string): JSX.Element => (
-				<span data-testid="custom-rendered">{`ENV: ${value}`}</span>
-			);
-
-			render(
-				<CheckboxFilterV2
-					filter={{ ...DEFAULT_FILTER, customRendererForValue: customRenderer }}
-					source={QuickFiltersSource.TRACES_EXPLORER}
-					useFieldApis={DEFAULT_USE_FIELD_APIS}
-				/>,
-			);
-
-			await screen.findByTestId('custom-rendered');
-			expect(screen.getByText('ENV: production')).toBeInTheDocument();
-		});
-	});
-});

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/v2/__tests__/CheckboxFilterV2.itemRules.test.tsx

@@ -1,499 +0,0 @@
-import { screen, within } from '@testing-library/react';
-import { render } from 'tests/test-utils';
-
-import { QuickFiltersSource } from '../../../../types';
-
-import CheckboxFilterV2 from '../CheckboxFilterV2';
-import {
-	DEFAULT_FILTER,
-	DEFAULT_USE_FIELD_APIS,
-	mockFieldsValuesAPI,
-	setupServer,
-} from '../CheckboxFilterV2.testUtils';
-
-setupServer();
-
-describe('CheckboxFilterV2 - item rules', () => {
-	describe('no existing query', () => {
-		it('all values show as checked with no badge when no query exists', async () => {
-			mockFieldsValuesAPI({
-				stringValues: ['production', 'staging'],
-			});
-
-			render(
-				<CheckboxFilterV2
-					filter={DEFAULT_FILTER}
-					source={QuickFiltersSource.TRACES_EXPLORER}
-					useFieldApis={DEFAULT_USE_FIELD_APIS}
-				/>,
-			);
-
-			const productionRow = await screen.findByTestId(
-				'checkbox-value-row-production',
-			);
-			expect(within(productionRow).getByText('production')).toBeInTheDocument();
-			const stagingRow = screen.getByTestId('checkbox-value-row-staging');
-
-			expect(productionRow).toHaveAttribute('data-state', 'checked');
-			expect(stagingRow).toHaveAttribute('data-state', 'checked');
-
-			// No section dividers when no existing query (all in "selected" section)
-			expect(
-				screen.queryByTestId('section-divider-related'),
-			).not.toBeInTheDocument();
-			expect(
-				screen.queryByTestId('section-divider-all-values'),
-			).not.toBeInTheDocument();
-		});
-	});
-
-	describe('with existing query (related values)', () => {
-		it('shows related values in "Related" section with checked state', async () => {
-			mockFieldsValuesAPI({
-				relatedValues: ['production'],
-				stringValues: ['staging', 'development'],
-			});
-
-			render(
-				<CheckboxFilterV2
-					filter={DEFAULT_FILTER}
-					source={QuickFiltersSource.TRACES_EXPLORER}
-					useFieldApis={{
-						...DEFAULT_USE_FIELD_APIS,
-						existingQuery: 'service.name = "api"',
-					}}
-				/>,
-				undefined,
-				{
-					queryBuilderOverrides: {
-						currentQuery: {
-							builder: {
-								queryData: [
-									{
-										filters: { items: [], op: 'AND' },
-										filter: { expression: 'service.name = "api"' },
-									},
-								],
-							},
-						},
-					} as never,
-				},
-			);
-
-			const productionRow = await screen.findByTestId(
-				'checkbox-value-row-production',
-			);
-			expect(within(productionRow).getByText('production')).toBeInTheDocument();
-
-			// Related values show as checked in "Related" section
-			expect(screen.getByTestId('section-divider-related')).toBeInTheDocument();
-			expect(productionRow).toHaveAttribute('data-state', 'checked');
-
-			// Other values show as unchecked in "All values" section
-			expect(screen.getByTestId('section-divider-all-values')).toBeInTheDocument();
-			const stagingRow = screen.getByTestId('checkbox-value-row-staging');
-			expect(stagingRow).toHaveAttribute('data-state', 'unchecked');
-		});
-
-		it('shows no badge for values not in relatedValues (unchecked state in All values section)', async () => {
-			mockFieldsValuesAPI({
-				relatedValues: ['production'],
-				stringValues: ['staging'],
-			});
-
-			render(
-				<CheckboxFilterV2
-					filter={DEFAULT_FILTER}
-					source={QuickFiltersSource.TRACES_EXPLORER}
-					useFieldApis={{
-						...DEFAULT_USE_FIELD_APIS,
-						existingQuery: 'service.name = "api"',
-					}}
-				/>,
-				undefined,
-				{
-					queryBuilderOverrides: {
-						currentQuery: {
-							builder: {
-								queryData: [
-									{
-										filters: { items: [], op: 'AND' },
-										filter: { expression: 'service.name = "api"' },
-									},
-								],
-							},
-						},
-					} as never,
-				},
-			);
-
-			const stagingRow = await screen.findByTestId('checkbox-value-row-staging');
-			expect(within(stagingRow).getByText('staging')).toBeInTheDocument();
-			expect(stagingRow).toHaveAttribute('data-state', 'unchecked');
-			expect(within(stagingRow).queryByTestId(/^badge-/)).not.toBeInTheDocument();
-		});
-
-		it('shows related values as checked when hasFilterForThisKey=true and isInRelatedValues=true', async () => {
-			mockFieldsValuesAPI({
-				relatedValues: ['production', 'staging'],
-				stringValues: ['development'],
-			});
-
-			render(
-				<CheckboxFilterV2
-					filter={DEFAULT_FILTER}
-					source={QuickFiltersSource.TRACES_EXPLORER}
-					useFieldApis={{
-						...DEFAULT_USE_FIELD_APIS,
-						existingQuery: 'service.name = "api"',
-					}}
-				/>,
-				undefined,
-				{
-					queryBuilderOverrides: {
-						currentQuery: {
-							builder: {
-								queryData: [
-									{
-										filters: {
-											items: [
-												{
-													key: { key: 'deployment.environment' },
-													op: 'in',
-													value: ['production'],
-												},
-											],
-											op: 'AND',
-										},
-										filter: { expression: 'service.name = "api"' },
-									},
-								],
-							},
-						},
-					} as never,
-				},
-			);
-
-			// production is selected - in selected section
-			const productionRow = await screen.findByTestId(
-				'checkbox-value-row-production',
-			);
-			expect(productionRow).toHaveAttribute('data-state', 'checked');
-
-			// staging is related - in related section with checked state
-			const stagingRow = screen.getByTestId('checkbox-value-row-staging');
-			expect(stagingRow).toHaveAttribute('data-state', 'checked');
-			expect(screen.getByTestId('section-divider-related')).toBeInTheDocument();
-		});
-	});
-
-	describe('selected values with IN operator', () => {
-		it('shows checked state with no badge for IN-selected values', async () => {
-			mockFieldsValuesAPI({
-				stringValues: ['production', 'staging'],
-			});
-
-			render(
-				<CheckboxFilterV2
-					filter={DEFAULT_FILTER}
-					source={QuickFiltersSource.TRACES_EXPLORER}
-					useFieldApis={DEFAULT_USE_FIELD_APIS}
-				/>,
-				undefined,
-				{
-					queryBuilderOverrides: {
-						currentQuery: {
-							builder: {
-								queryData: [
-									{
-										filters: {
-											items: [
-												{
-													key: { key: 'deployment.environment' },
-													op: 'in',
-													value: ['production'],
-												},
-											],
-											op: 'AND',
-										},
-									},
-								],
-							},
-						},
-					} as never,
-				},
-			);
-
-			const productionRow = await screen.findByTestId(
-				'checkbox-value-row-production',
-			);
-			expect(productionRow).toHaveAttribute('data-state', 'checked');
-			expect(
-				within(productionRow).queryByTestId(/^badge-/),
-			).not.toBeInTheDocument();
-
-			const stagingRow = screen.getByTestId('checkbox-value-row-staging');
-			expect(stagingRow).toHaveAttribute('data-state', 'unchecked');
-		});
-	});
-
-	describe('selected values with NOT IN operator', () => {
-		it('shows unchecked state with no badge for NOT_IN-selected values', async () => {
-			mockFieldsValuesAPI({
-				stringValues: ['production', 'staging'],
-			});
-
-			render(
-				<CheckboxFilterV2
-					filter={DEFAULT_FILTER}
-					source={QuickFiltersSource.TRACES_EXPLORER}
-					useFieldApis={DEFAULT_USE_FIELD_APIS}
-				/>,
-				undefined,
-				{
-					queryBuilderOverrides: {
-						currentQuery: {
-							builder: {
-								queryData: [
-									{
-										filters: {
-											items: [
-												{
-													key: { key: 'deployment.environment' },
-													op: 'not in',
-													value: ['production'],
-												},
-											],
-											op: 'AND',
-										},
-									},
-								],
-							},
-						},
-					} as never,
-				},
-			);
-
-			const productionRow = await screen.findByTestId(
-				'checkbox-value-row-production',
-			);
-			expect(productionRow).toHaveAttribute('data-state', 'unchecked');
-			expect(
-				within(productionRow).queryByTestId(/^badge-/),
-			).not.toBeInTheDocument();
-
-			const stagingRow = screen.getByTestId('checkbox-value-row-staging');
-			expect(stagingRow).toHaveAttribute('data-state', 'unchecked');
-			expect(within(stagingRow).queryByTestId(/^badge-/)).not.toBeInTheDocument();
-		});
-	});
-
-	describe('section ordering', () => {
-		it('orders selected section before related section before other section', async () => {
-			mockFieldsValuesAPI({
-				relatedValues: ['related-value'],
-				stringValues: ['other-value', 'selected-value'],
-			});
-
-			render(
-				<CheckboxFilterV2
-					filter={DEFAULT_FILTER}
-					source={QuickFiltersSource.TRACES_EXPLORER}
-					useFieldApis={{
-						...DEFAULT_USE_FIELD_APIS,
-						existingQuery: 'service.name = "api"',
-					}}
-				/>,
-				undefined,
-				{
-					queryBuilderOverrides: {
-						currentQuery: {
-							builder: {
-								queryData: [
-									{
-										filters: {
-											items: [
-												{
-													key: { key: 'deployment.environment' },
-													op: 'in',
-													value: ['selected-value'],
-												},
-											],
-											op: 'AND',
-										},
-										filter: { expression: 'service.name = "api"' },
-									},
-								],
-							},
-						},
-					} as never,
-				},
-			);
-
-			await screen.findByTestId('checkbox-value-row-selected-value');
-
-			const allRows = screen.getAllByTestId(/^checkbox-value-row-/);
-			const values = allRows.map((row) =>
-				row.getAttribute('data-testid')?.replace('checkbox-value-row-', ''),
-			);
-
-			expect(values[0]).toBe('selected-value');
-			expect(values[1]).toBe('related-value');
-			expect(values[2]).toBe('other-value');
-		});
-
-		it('sorts alphabetically within same section', async () => {
-			mockFieldsValuesAPI({
-				relatedValues: ['zebra', 'alpha', 'mike'],
-				stringValues: [],
-			});
-
-			render(
-				<CheckboxFilterV2
-					filter={DEFAULT_FILTER}
-					source={QuickFiltersSource.TRACES_EXPLORER}
-					useFieldApis={{
-						...DEFAULT_USE_FIELD_APIS,
-						existingQuery: 'service.name = "api"',
-					}}
-				/>,
-				undefined,
-				{
-					queryBuilderOverrides: {
-						currentQuery: {
-							builder: {
-								queryData: [
-									{
-										filters: { items: [], op: 'AND' },
-										filter: { expression: 'service.name = "api"' },
-									},
-								],
-							},
-						},
-					} as never,
-				},
-			);
-
-			await screen.findByTestId('checkbox-value-row-alpha');
-
-			const allRows = screen.getAllByTestId(/^checkbox-value-row-/);
-			const values = allRows.map((row) =>
-				row.getAttribute('data-testid')?.replace('checkbox-value-row-', ''),
-			);
-
-			expect(values).toStrictEqual(['alpha', 'mike', 'zebra']);
-		});
-	});
-
-	describe('mixed state scenarios', () => {
-		it('handles mixed state: IN-selected + related + other in same list', async () => {
-			mockFieldsValuesAPI({
-				relatedValues: ['related-env'],
-				stringValues: ['other-env', 'selected-env'],
-			});
-
-			render(
-				<CheckboxFilterV2
-					filter={DEFAULT_FILTER}
-					source={QuickFiltersSource.TRACES_EXPLORER}
-					useFieldApis={{
-						...DEFAULT_USE_FIELD_APIS,
-						existingQuery: 'service.name = "api"',
-					}}
-				/>,
-				undefined,
-				{
-					queryBuilderOverrides: {
-						currentQuery: {
-							builder: {
-								queryData: [
-									{
-										filters: {
-											items: [
-												{
-													key: { key: 'deployment.environment' },
-													op: 'in',
-													value: ['selected-env'],
-												},
-											],
-											op: 'AND',
-										},
-										filter: { expression: 'service.name = "api"' },
-									},
-								],
-							},
-						},
-					} as never,
-				},
-			);
-
-			const selectedRow = await screen.findByTestId(
-				'checkbox-value-row-selected-env',
-			);
-			expect(selectedRow).toHaveAttribute('data-state', 'checked');
-			expect(within(selectedRow).queryByTestId(/^badge-/)).not.toBeInTheDocument();
-
-			// Related values now show as checked
-			const relatedRow = screen.getByTestId('checkbox-value-row-related-env');
-			expect(relatedRow).toHaveAttribute('data-state', 'checked');
-			expect(screen.getByTestId('section-divider-related')).toBeInTheDocument();
-
-			const otherRow = screen.getByTestId('checkbox-value-row-other-env');
-			expect(otherRow).toHaveAttribute('data-state', 'unchecked');
-			expect(within(otherRow).queryByTestId(/^badge-/)).not.toBeInTheDocument();
-		});
-
-		it('handles NOT_IN-selected alongside related values', async () => {
-			mockFieldsValuesAPI({
-				relatedValues: ['related-env'],
-				stringValues: ['other-env', 'excluded-env'],
-			});
-
-			render(
-				<CheckboxFilterV2
-					filter={DEFAULT_FILTER}
-					source={QuickFiltersSource.TRACES_EXPLORER}
-					useFieldApis={{
-						...DEFAULT_USE_FIELD_APIS,
-						existingQuery: 'service.name = "api"',
-					}}
-				/>,
-				undefined,
-				{
-					queryBuilderOverrides: {
-						currentQuery: {
-							builder: {
-								queryData: [
-									{
-										filters: {
-											items: [
-												{
-													key: { key: 'deployment.environment' },
-													op: 'not in',
-													value: ['excluded-env'],
-												},
-											],
-											op: 'AND',
-										},
-										filter: { expression: 'service.name = "api"' },
-									},
-								],
-							},
-						},
-					} as never,
-				},
-			);
-
-			const excludedRow = await screen.findByTestId(
-				'checkbox-value-row-excluded-env',
-			);
-			expect(excludedRow).toHaveAttribute('data-state', 'unchecked');
-			expect(within(excludedRow).queryByTestId(/^badge-/)).not.toBeInTheDocument();
-
-			// Related values show as checked
-			const relatedRow = screen.getByTestId('checkbox-value-row-related-env');
-			expect(relatedRow).toHaveAttribute('data-state', 'checked');
-			expect(screen.getByTestId('section-divider-related')).toBeInTheDocument();
-		});
-	});
-});

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/v2/__tests__/CheckboxFilterV2.states.test.tsx

@@ -1,207 +0,0 @@
-import { screen, waitFor, within } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { server, rest } from 'mocks-server/server';
-import { render } from 'tests/test-utils';
-
-import { QuickFiltersSource } from '../../../../types';
-
-import CheckboxFilterV2 from '../CheckboxFilterV2';
-import {
-	DEFAULT_FILTER,
-	DEFAULT_USE_FIELD_APIS,
-	mockFieldsValuesAPI,
-	mockFieldsValuesAPILoading,
-	setupServer,
-} from '../CheckboxFilterV2.testUtils';
-
-setupServer();
-
-describe('CheckboxFilterV2 - states', () => {
-	describe('loading states', () => {
-		it('shows skeleton while loading initial data', async () => {
-			mockFieldsValuesAPILoading();
-
-			render(
-				<CheckboxFilterV2
-					filter={DEFAULT_FILTER}
-					source={QuickFiltersSource.TRACES_EXPLORER}
-					useFieldApis={DEFAULT_USE_FIELD_APIS}
-				/>,
-			);
-
-			expect(screen.getByTestId('checkbox-filter-v2')).toBeInTheDocument();
-			await waitFor(() => {
-				expect(
-					screen.getByTestId('checkbox-filter-v2').querySelector('.ant-skeleton'),
-				).toBeInTheDocument();
-			});
-		});
-
-		it('shows skeleton when initially closed filter is opened for the first time', async () => {
-			const user = userEvent.setup();
-			mockFieldsValuesAPILoading();
-
-			const closedFilter = { ...DEFAULT_FILTER, defaultOpen: false };
-
-			render(
-				<CheckboxFilterV2
-					filter={closedFilter}
-					source={QuickFiltersSource.TRACES_EXPLORER}
-					useFieldApis={DEFAULT_USE_FIELD_APIS}
-				/>,
-			);
-
-			// Filter starts closed - no skeleton, no content
-			expect(
-				screen.getByTestId('checkbox-filter-v2').querySelector('.ant-skeleton'),
-			).not.toBeInTheDocument();
-			expect(
-				screen.queryByTestId('checkbox-filter-empty'),
-			).not.toBeInTheDocument();
-
-			// Click header to open
-			const header = screen.getByTestId('checkbox-filter-header');
-			await user.click(header);
-
-			// Should show skeleton while loading, NOT "No values found"
-			await waitFor(() => {
-				expect(
-					screen.getByTestId('checkbox-filter-v2').querySelector('.ant-skeleton'),
-				).toBeInTheDocument();
-			});
-			expect(
-				screen.queryByTestId('checkbox-filter-empty'),
-			).not.toBeInTheDocument();
-		});
-
-		it('shows search spinner when fetching after initial load', async () => {
-			const user = userEvent.setup();
-
-			let requestCount = 0;
-			server.use(
-				rest.get('http://localhost/api/v1/fields/values', (req, res, ctx) => {
-					requestCount += 1;
-					if (requestCount === 1) {
-						return res(
-							ctx.status(200),
-							ctx.json({
-								status: 'success',
-								data: {
-									values: {
-										relatedValues: [],
-										stringValues: ['production', 'staging'],
-										numberValues: [],
-									},
-								},
-							}),
-						);
-					}
-					return res(ctx.delay(10000));
-				}),
-			);
-
-			render(
-				<CheckboxFilterV2
-					filter={DEFAULT_FILTER}
-					source={QuickFiltersSource.TRACES_EXPLORER}
-					useFieldApis={DEFAULT_USE_FIELD_APIS}
-				/>,
-			);
-
-			await screen.findByTestId('checkbox-value-row-production');
-
-			const searchInput = screen.getByTestId('checkbox-filter-search');
-			await user.type(searchInput, 'prod');
-
-			await waitFor(() => {
-				expect(
-					screen.getByTestId('checkbox-filter-search-loading'),
-				).toBeInTheDocument();
-			});
-		});
-	});
-
-	describe('empty states', () => {
-		it('shows "No values found" when API returns empty arrays', async () => {
-			mockFieldsValuesAPI({
-				relatedValues: [],
-				stringValues: [],
-				numberValues: [],
-			});
-
-			render(
-				<CheckboxFilterV2
-					filter={DEFAULT_FILTER}
-					source={QuickFiltersSource.TRACES_EXPLORER}
-					useFieldApis={DEFAULT_USE_FIELD_APIS}
-				/>,
-			);
-
-			const emptySection = await screen.findByTestId('checkbox-filter-empty');
-			expect(emptySection).toBeInTheDocument();
-		});
-	});
-
-	describe('value rendering', () => {
-		it('renders values from API response', async () => {
-			mockFieldsValuesAPI({
-				stringValues: ['production', 'staging', 'development'],
-			});
-
-			render(
-				<CheckboxFilterV2
-					filter={DEFAULT_FILTER}
-					source={QuickFiltersSource.TRACES_EXPLORER}
-					useFieldApis={DEFAULT_USE_FIELD_APIS}
-				/>,
-			);
-
-			await screen.findByTestId('checkbox-value-row-production');
-			expect(screen.getByTestId('checkbox-value-row-staging')).toBeInTheDocument();
-			expect(
-				screen.getByTestId('checkbox-value-row-development'),
-			).toBeInTheDocument();
-		});
-
-		it('renders number values converted to strings', async () => {
-			mockFieldsValuesAPI({
-				numberValues: [200, 404, 500],
-			});
-
-			render(
-				<CheckboxFilterV2
-					filter={DEFAULT_FILTER}
-					source={QuickFiltersSource.TRACES_EXPLORER}
-					useFieldApis={DEFAULT_USE_FIELD_APIS}
-				/>,
-			);
-
-			const row200 = await screen.findByTestId('checkbox-value-row-200');
-			expect(within(row200).getByText('200')).toBeInTheDocument();
-			expect(
-				within(screen.getByTestId('checkbox-value-row-404')).getByText('404'),
-			).toBeInTheDocument();
-			expect(
-				within(screen.getByTestId('checkbox-value-row-500')).getByText('500'),
-			).toBeInTheDocument();
-		});
-
-		it('filters null/undefined values from response', async () => {
-			mockFieldsValuesAPI({
-				stringValues: ['valid', null, '', undefined as unknown as string],
-			});
-
-			render(
-				<CheckboxFilterV2
-					filter={DEFAULT_FILTER}
-					source={QuickFiltersSource.TRACES_EXPLORER}
-					useFieldApis={DEFAULT_USE_FIELD_APIS}
-				/>,
-			);
-
-			const validRow = await screen.findByTestId('checkbox-value-row-valid');
-			expect(within(validRow).getByText('valid')).toBeInTheDocument();
-			expect(screen.queryAllByTestId(/^checkbox-value-row-/)).toHaveLength(1);
-		});
-	});
-});

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/v2/__tests__/CheckboxFilterV2Header.test.tsx

@@ -1,156 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-
-import { CheckboxFilterV2Header } from '../CheckboxFilterV2Header';
-
-describe('CheckboxFilterV2Header', () => {
-	const defaultProps = {
-		title: 'Environment',
-		isOpen: false,
-		showClearAll: true,
-		isSomeFilterPresentForCurrentAttribute: true,
-		onToggleOpen: jest.fn(),
-		onClear: jest.fn(),
-	};
-
-	beforeEach(() => {
-		jest.clearAllMocks();
-	});
-
-	describe('collapsed state', () => {
-		it('renders title', () => {
-			render(<CheckboxFilterV2Header {...defaultProps} isOpen={false} />);
-
-			expect(screen.getByText('Environment')).toBeInTheDocument();
-		});
-
-		it('sets data-state="closed" when collapsed', () => {
-			render(<CheckboxFilterV2Header {...defaultProps} isOpen={false} />);
-
-			const header = screen.getByTestId('checkbox-filter-header');
-			expect(header).toHaveAttribute('data-state', 'closed');
-		});
-
-		it('does not show clear button when collapsed', () => {
-			render(
-				<CheckboxFilterV2Header {...defaultProps} isOpen={false} showClearAll />,
-			);
-
-			expect(
-				screen.queryByTestId('checkbox-filter-clear-all'),
-			).not.toBeInTheDocument();
-		});
-	});
-
-	describe('expanded state', () => {
-		it('sets data-state="open" when expanded', () => {
-			render(<CheckboxFilterV2Header {...defaultProps} isOpen />);
-
-			const header = screen.getByTestId('checkbox-filter-header');
-			expect(header).toHaveAttribute('data-state', 'open');
-		});
-
-		it('shows clear button when expanded + showClearAll=true', () => {
-			render(<CheckboxFilterV2Header {...defaultProps} isOpen showClearAll />);
-
-			expect(screen.getByTestId('checkbox-filter-clear-all')).toBeInTheDocument();
-			expect(screen.getByText('Clear')).toBeInTheDocument();
-		});
-
-		it('hides clear button when showClearAll=false', () => {
-			render(
-				<CheckboxFilterV2Header {...defaultProps} isOpen showClearAll={false} />,
-			);
-
-			expect(
-				screen.queryByTestId('checkbox-filter-clear-all'),
-			).not.toBeInTheDocument();
-		});
-
-		it('hides clear button when no filter present for attribute', () => {
-			render(
-				<CheckboxFilterV2Header
-					{...defaultProps}
-					isOpen
-					showClearAll
-					isSomeFilterPresentForCurrentAttribute={false}
-				/>,
-			);
-
-			expect(
-				screen.queryByTestId('checkbox-filter-clear-all'),
-			).not.toBeInTheDocument();
-		});
-	});
-
-	describe('interactions', () => {
-		it('calls onToggleOpen on header click', async () => {
-			const user = userEvent.setup();
-			const onToggleOpen = jest.fn();
-			render(
-				<CheckboxFilterV2Header {...defaultProps} onToggleOpen={onToggleOpen} />,
-			);
-
-			await user.click(screen.getByTestId('checkbox-filter-header'));
-
-			expect(onToggleOpen).toHaveBeenCalledTimes(1);
-		});
-
-		it('calls onToggleOpen on Enter key', async () => {
-			const user = userEvent.setup();
-			const onToggleOpen = jest.fn();
-			render(
-				<CheckboxFilterV2Header {...defaultProps} onToggleOpen={onToggleOpen} />,
-			);
-
-			screen.getByTestId('checkbox-filter-header').focus();
-			await user.keyboard('{Enter}');
-
-			expect(onToggleOpen).toHaveBeenCalledTimes(1);
-		});
-
-		it('calls onToggleOpen on Space key', async () => {
-			const user = userEvent.setup();
-			const onToggleOpen = jest.fn();
-			render(
-				<CheckboxFilterV2Header {...defaultProps} onToggleOpen={onToggleOpen} />,
-			);
-
-			screen.getByTestId('checkbox-filter-header').focus();
-			await user.keyboard(' ');
-
-			expect(onToggleOpen).toHaveBeenCalledTimes(1);
-		});
-
-		it('calls onClear on clear button click', async () => {
-			const user = userEvent.setup();
-			const onClear = jest.fn();
-			render(
-				<CheckboxFilterV2Header {...defaultProps} isOpen onClear={onClear} />,
-			);
-
-			await user.click(screen.getByTestId('checkbox-filter-clear-all'));
-
-			expect(onClear).toHaveBeenCalledTimes(1);
-		});
-
-		it('clear button click does not trigger onToggleOpen', async () => {
-			const user = userEvent.setup();
-			const onToggleOpen = jest.fn();
-			const onClear = jest.fn();
-			render(
-				<CheckboxFilterV2Header
-					{...defaultProps}
-					isOpen
-					onToggleOpen={onToggleOpen}
-					onClear={onClear}
-				/>,
-			);
-
-			await user.click(screen.getByTestId('checkbox-filter-clear-all'));
-
-			expect(onClear).toHaveBeenCalledTimes(1);
-			expect(onToggleOpen).not.toHaveBeenCalled();
-		});
-	});
-});

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/v2/__tests__/CheckboxFilterV2ValueRow.test.tsx

@@ -1,297 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-
-import { BadgeConfig } from '../itemRules';
-import { CheckedState } from '../../../../types';
-import { CheckboxFilterV2ValueRow } from '../CheckboxFilterV2ValueRow';
-
-describe('CheckboxFilterV2ValueRow', () => {
-	const defaultProps = {
-		value: 'production',
-		checkedState: 'unchecked' as CheckedState,
-		disabled: false,
-		title: 'Environment',
-		onlyButtonLabel: 'Only',
-		onCheckboxChange: jest.fn(),
-		onOnlyOrAllClick: jest.fn(),
-		badge: null as BadgeConfig | null,
-	};
-
-	beforeEach(() => {
-		jest.clearAllMocks();
-	});
-
-	describe('checked states', () => {
-		it('sets data-state="unchecked" for unchecked state', () => {
-			render(
-				<CheckboxFilterV2ValueRow {...defaultProps} checkedState="unchecked" />,
-			);
-
-			const row = screen.getByTestId('checkbox-value-row-production');
-			expect(row).toHaveAttribute('data-state', 'unchecked');
-		});
-
-		it('sets data-state="checked" for checked state', () => {
-			render(
-				<CheckboxFilterV2ValueRow {...defaultProps} checkedState="checked" />,
-			);
-
-			const row = screen.getByTestId('checkbox-value-row-production');
-			expect(row).toHaveAttribute('data-state', 'checked');
-		});
-	});
-
-	describe('badge variations', () => {
-		it('renders no badge when badge=null', () => {
-			render(<CheckboxFilterV2ValueRow {...defaultProps} badge={null} />);
-
-			expect(screen.queryByTestId(/^badge-/)).not.toBeInTheDocument();
-		});
-
-		it('renders "Not in" warning badge', () => {
-			render(
-				<CheckboxFilterV2ValueRow
-					{...defaultProps}
-					badge={{ key: 'not_in', label: 'Not in', color: 'warning' }}
-				/>,
-			);
-
-			expect(screen.getByTestId('badge-not_in')).toBeInTheDocument();
-			expect(screen.getByText('Not in')).toBeInTheDocument();
-		});
-
-		it('renders "Related" robin badge', () => {
-			render(
-				<CheckboxFilterV2ValueRow
-					{...defaultProps}
-					badge={{ key: 'related', label: 'Related', color: 'robin' }}
-				/>,
-			);
-
-			expect(screen.getByTestId('badge-related')).toBeInTheDocument();
-			expect(screen.getByText('Related')).toBeInTheDocument();
-		});
-
-		it('renders "Other" secondary badge', () => {
-			render(
-				<CheckboxFilterV2ValueRow
-					{...defaultProps}
-					badge={{ key: 'other', label: 'Other', color: 'secondary' }}
-				/>,
-			);
-
-			expect(screen.getByTestId('badge-other')).toBeInTheDocument();
-			expect(screen.getByText('Other')).toBeInTheDocument();
-		});
-	});
-
-	describe('only/all button label', () => {
-		it('shows "Only" label by default', () => {
-			render(
-				<CheckboxFilterV2ValueRow {...defaultProps} onlyButtonLabel="Only" />,
-			);
-
-			expect(screen.getByText('Only')).toBeInTheDocument();
-		});
-
-		it('shows "All" label when appropriate', () => {
-			render(<CheckboxFilterV2ValueRow {...defaultProps} onlyButtonLabel="All" />);
-
-			expect(screen.getByText('All')).toBeInTheDocument();
-		});
-	});
-
-	describe('disabled state', () => {
-		it('sets data-disabled=true when disabled', () => {
-			render(<CheckboxFilterV2ValueRow {...defaultProps} disabled />);
-
-			const row = screen.getByTestId('checkbox-value-row-production');
-			expect(row).toHaveAttribute('data-disabled', 'true');
-		});
-
-		it('does not call onOnlyOrAllClick when disabled + clicked', async () => {
-			const user = userEvent.setup();
-			const onOnlyOrAllClick = jest.fn();
-			render(
-				<CheckboxFilterV2ValueRow
-					{...defaultProps}
-					disabled
-					onOnlyOrAllClick={onOnlyOrAllClick}
-				/>,
-			);
-
-			await user.click(screen.getByText('production'));
-
-			expect(onOnlyOrAllClick).not.toHaveBeenCalled();
-		});
-
-		it('does not call onOnlyOrAllClick on keydown when disabled', async () => {
-			const user = userEvent.setup();
-			const onOnlyOrAllClick = jest.fn();
-			render(
-				<CheckboxFilterV2ValueRow
-					{...defaultProps}
-					disabled
-					onOnlyOrAllClick={onOnlyOrAllClick}
-				/>,
-			);
-
-			screen.getByText('production').focus();
-			await user.keyboard('{Enter}');
-
-			expect(onOnlyOrAllClick).not.toHaveBeenCalled();
-		});
-	});
-
-	describe('special value indicators', () => {
-		it('renders row for "true" value', () => {
-			render(<CheckboxFilterV2ValueRow {...defaultProps} value="true" />);
-
-			expect(screen.getByTestId('checkbox-value-row-true')).toBeInTheDocument();
-			expect(screen.getByText('true')).toBeInTheDocument();
-		});
-
-		it('renders row for "false" value', () => {
-			render(<CheckboxFilterV2ValueRow {...defaultProps} value="false" />);
-
-			expect(screen.getByTestId('checkbox-value-row-false')).toBeInTheDocument();
-			expect(screen.getByText('false')).toBeInTheDocument();
-		});
-
-		it('renders row for regular values', () => {
-			render(<CheckboxFilterV2ValueRow {...defaultProps} value="production" />);
-
-			expect(
-				screen.getByTestId('checkbox-value-row-production'),
-			).toBeInTheDocument();
-			expect(screen.getByText('production')).toBeInTheDocument();
-		});
-	});
-
-	describe('interactions', () => {
-		it('renders checkbox with correct testId', () => {
-			render(
-				<CheckboxFilterV2ValueRow {...defaultProps} checkedState="unchecked" />,
-			);
-
-			expect(
-				screen.getByTestId('checkbox-Environment-production'),
-			).toBeInTheDocument();
-		});
-
-		it('calls onOnlyOrAllClick on value text click', async () => {
-			const user = userEvent.setup();
-			const onOnlyOrAllClick = jest.fn();
-			render(
-				<CheckboxFilterV2ValueRow
-					{...defaultProps}
-					onOnlyOrAllClick={onOnlyOrAllClick}
-				/>,
-			);
-
-			await user.click(screen.getByText('production'));
-
-			expect(onOnlyOrAllClick).toHaveBeenCalledTimes(1);
-		});
-
-		it('calls onOnlyOrAllClick on Enter key', async () => {
-			const user = userEvent.setup();
-			const onOnlyOrAllClick = jest.fn();
-			render(
-				<CheckboxFilterV2ValueRow
-					{...defaultProps}
-					onOnlyOrAllClick={onOnlyOrAllClick}
-				/>,
-			);
-
-			const valueButton = screen
-				.getByText('production')
-				.closest('[role="button"]');
-			await user.tab();
-			await user.tab();
-			if (valueButton && document.activeElement === valueButton) {
-				await user.keyboard('{Enter}');
-			}
-
-			expect(onOnlyOrAllClick).toHaveBeenCalled();
-		});
-
-		it('calls onOnlyOrAllClick on Space key', async () => {
-			const user = userEvent.setup();
-			const onOnlyOrAllClick = jest.fn();
-			render(
-				<CheckboxFilterV2ValueRow
-					{...defaultProps}
-					onOnlyOrAllClick={onOnlyOrAllClick}
-				/>,
-			);
-
-			const valueButton = screen
-				.getByText('production')
-				.closest('[role="button"]');
-			await user.tab();
-			await user.tab();
-			if (valueButton && document.activeElement === valueButton) {
-				await user.keyboard(' ');
-			}
-
-			expect(onOnlyOrAllClick).toHaveBeenCalled();
-		});
-
-		it('shows Toggle button', () => {
-			render(<CheckboxFilterV2ValueRow {...defaultProps} />);
-
-			expect(screen.getByText('Toggle')).toBeInTheDocument();
-		});
-	});
-
-	describe('custom renderer', () => {
-		it('uses customRendererForValue when provided', () => {
-			const customRenderer = (value: string): JSX.Element => (
-				<span data-testid="custom-render">{`Custom: ${value}`}</span>
-			);
-
-			render(
-				<CheckboxFilterV2ValueRow
-					{...defaultProps}
-					customRendererForValue={customRenderer}
-				/>,
-			);
-
-			expect(screen.getByTestId('custom-render')).toBeInTheDocument();
-			expect(screen.getByText('Custom: production')).toBeInTheDocument();
-		});
-
-		it('shows default value text when no custom renderer', () => {
-			render(<CheckboxFilterV2ValueRow {...defaultProps} />);
-
-			expect(screen.getByText('production')).toBeInTheDocument();
-		});
-	});
-
-	describe('state combinations', () => {
-		it('checked + not_in badge', () => {
-			render(
-				<CheckboxFilterV2ValueRow
-					{...defaultProps}
-					checkedState="unchecked"
-					badge={{ key: 'not_in', label: 'Not in', color: 'warning' }}
-				/>,
-			);
-
-			expect(screen.getByTestId('badge-not_in')).toBeInTheDocument();
-		});
-
-		it('disabled + badge still shows badge', () => {
-			render(
-				<CheckboxFilterV2ValueRow
-					{...defaultProps}
-					disabled
-					badge={{ key: 'other', label: 'Other', color: 'secondary' }}
-				/>,
-			);
-
-			expect(screen.getByTestId('badge-other')).toBeInTheDocument();
-		});
-	});
-});

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/v2/__tests__/itemRules.test.ts

@@ -1,131 +0,0 @@
-import { deriveItemConfig, ItemContext, SectionType } from '../itemRules';
-
-describe('itemRules', () => {
-	describe('deriveItemConfig', () => {
-		it('no query at all → section selected, no badge', () => {
-			const ctx: ItemContext = {
-				isSelectedOnFilter: false,
-				isInRelatedValues: true,
-				isNotInOperator: false,
-				hasExistingQuery: false,
-				hasFilterForThisKey: false,
-			};
-
-			const result = deriveItemConfig(ctx);
-
-			expect(result.section).toBe(SectionType.SELECTED);
-			expect(result.badge).toBeNull();
-		});
-
-		it('selected + IN operator → section selected, no badge', () => {
-			const ctx: ItemContext = {
-				isSelectedOnFilter: true,
-				isInRelatedValues: true,
-				isNotInOperator: false,
-				hasExistingQuery: true,
-				hasFilterForThisKey: true,
-			};
-
-			const result = deriveItemConfig(ctx);
-
-			expect(result.section).toBe(SectionType.SELECTED);
-			expect(result.badge).toBeNull();
-		});
-
-		it('selected + NOT IN operator → section selected, no badge, unchecked', () => {
-			const ctx: ItemContext = {
-				isSelectedOnFilter: true,
-				isInRelatedValues: false,
-				isNotInOperator: true,
-				hasExistingQuery: true,
-				hasFilterForThisKey: true,
-			};
-
-			const result = deriveItemConfig(ctx);
-
-			expect(result.section).toBe(SectionType.SELECTED);
-			expect(result.badge).toBeNull();
-			expect(result.checkedState).toBe('unchecked');
-		});
-
-		it('has query, not selected, in related → section related, checked', () => {
-			const ctx: ItemContext = {
-				isSelectedOnFilter: false,
-				isInRelatedValues: true,
-				isNotInOperator: false,
-				hasExistingQuery: true,
-				hasFilterForThisKey: false,
-			};
-
-			const result = deriveItemConfig(ctx);
-
-			expect(result.section).toBe(SectionType.RELATED);
-			expect(result.badge).toBeNull();
-			expect(result.checkedState).toBe('checked');
-		});
-
-		it('has query, has filter for this key, in related → section related, checked', () => {
-			const ctx: ItemContext = {
-				isSelectedOnFilter: false,
-				isInRelatedValues: true,
-				isNotInOperator: false,
-				hasExistingQuery: true,
-				hasFilterForThisKey: true,
-			};
-
-			const result = deriveItemConfig(ctx);
-
-			expect(result.section).toBe(SectionType.RELATED);
-			expect(result.badge).toBeNull();
-			expect(result.checkedState).toBe('checked');
-		});
-
-		it('has query, not in related → section all_values, unchecked', () => {
-			const ctx: ItemContext = {
-				isSelectedOnFilter: false,
-				isInRelatedValues: false,
-				isNotInOperator: false,
-				hasExistingQuery: true,
-				hasFilterForThisKey: false,
-			};
-
-			const result = deriveItemConfig(ctx);
-
-			expect(result.section).toBe(SectionType.ALL_VALUES);
-			expect(result.badge).toBeNull();
-			expect(result.checkedState).toBe('unchecked');
-		});
-
-		it('has query + filter for key, not selected, not in related → section all_values, unchecked', () => {
-			const ctx: ItemContext = {
-				isSelectedOnFilter: false,
-				isInRelatedValues: false,
-				isNotInOperator: false,
-				hasExistingQuery: true,
-				hasFilterForThisKey: true,
-			};
-
-			const result = deriveItemConfig(ctx);
-
-			expect(result.section).toBe(SectionType.ALL_VALUES);
-			expect(result.badge).toBeNull();
-			expect(result.checkedState).toBe('unchecked');
-		});
-
-		it('no query but has filter for key, not selected → fallback to checked (DEFAULT_CONFIG)', () => {
-			const ctx: ItemContext = {
-				isSelectedOnFilter: false,
-				isInRelatedValues: false,
-				isNotInOperator: false,
-				hasExistingQuery: false,
-				hasFilterForThisKey: true,
-			};
-
-			const result = deriveItemConfig(ctx);
-
-			expect(result.section).toBe(SectionType.SELECTED);
-			expect(result.badge).toBeNull();
-			expect(result.checkedState).toBe('checked');
-		});
-	});
-});

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/v2/__tests__/useSectionedValues.test.ts

@@ -1,382 +0,0 @@
-import { renderHook } from '@testing-library/react';
-
-import { SectionType } from '../itemRules';
-import { useSectionedValues, SectionedItem } from '../useSectionedValues';
-
-function flattenSections(
-	sections: { type: SectionType; items: SectionedItem[] }[],
-): SectionedItem[] {
-	return sections.flatMap((s) => s.items);
-}
-
-describe('useSectionedValues', () => {
-	const baseInput = {
-		relatedValues: ['val1', 'val2'],
-		allValues: ['val1', 'val2', 'val3'],
-		currentFilterState: {},
-		isSomeFilterPresentForCurrentAttribute: false,
-		isNotInOperator: false,
-		hasExistingQuery: false,
-		visibleItemsCount: 10,
-		relatedExclusions: [] as string[],
-	};
-
-	it('no query at all → all items in selected section, no badges', () => {
-		const { result } = renderHook(() =>
-			useSectionedValues({
-				...baseInput,
-				hasExistingQuery: false,
-				isSomeFilterPresentForCurrentAttribute: false,
-			}),
-		);
-
-		expect(result.current.sections).toHaveLength(1);
-		expect(result.current.sections[0].type).toBe(SectionType.SELECTED);
-		expect(result.current.sections[0].items).toHaveLength(3);
-		result.current.sections[0].items.forEach((item) => {
-			expect(item.badge).toBeNull();
-		});
-	});
-
-	it('has query, no filter for key → related and all_values sections', () => {
-		const { result } = renderHook(() =>
-			useSectionedValues({
-				...baseInput,
-				hasExistingQuery: true,
-				isSomeFilterPresentForCurrentAttribute: false,
-			}),
-		);
-
-		const allItems = flattenSections(result.current.sections);
-		const relatedItems = allItems.filter(
-			(item) => item.value === 'val1' || item.value === 'val2',
-		);
-		const otherItems = allItems.filter((item) => item.value === 'val3');
-
-		// Related values should be in related section, checked
-		relatedItems.forEach((item) => {
-			expect(item.section).toBe(SectionType.RELATED);
-			expect(item.checkedState).toBe('checked');
-		});
-
-		// Other values should be in all_values section, unchecked
-		otherItems.forEach((item) => {
-			expect(item.section).toBe(SectionType.ALL_VALUES);
-			expect(item.checkedState).toBe('unchecked');
-		});
-	});
-
-	it('has query + filter for key, selected value → in selected section', () => {
-		const { result } = renderHook(() =>
-			useSectionedValues({
-				...baseInput,
-				hasExistingQuery: true,
-				isSomeFilterPresentForCurrentAttribute: true,
-				currentFilterState: { val1: true, val2: false, val3: false },
-			}),
-		);
-
-		const allItems = flattenSections(result.current.sections);
-		const selectedItem = allItems.find((item) => item.value === 'val1');
-
-		expect(selectedItem?.section).toBe(SectionType.SELECTED);
-		expect(selectedItem?.badge).toBeNull();
-	});
-
-	it('has query + filter for key, NOT IN operator → excluded values in selected section, no badge', () => {
-		const { result } = renderHook(() =>
-			useSectionedValues({
-				...baseInput,
-				hasExistingQuery: true,
-				isSomeFilterPresentForCurrentAttribute: true,
-				isNotInOperator: true,
-				currentFilterState: { val1: false, val2: true, val3: true },
-			}),
-		);
-
-		const allItems = flattenSections(result.current.sections);
-		// val1 is unchecked + NOT IN = excluded
-		const excludedItem = allItems.find((item) => item.value === 'val1');
-
-		expect(excludedItem?.section).toBe(SectionType.SELECTED);
-		expect(excludedItem?.badge).toBeNull();
-		expect(excludedItem?.checkedState).toBe('unchecked');
-	});
-
-	it('items within same section sorted alphabetically', () => {
-		const { result } = renderHook(() =>
-			useSectionedValues({
-				...baseInput,
-				relatedValues: ['zebra', 'apple', 'mango'],
-				allValues: ['zebra', 'apple', 'mango'],
-				hasExistingQuery: false,
-				isSomeFilterPresentForCurrentAttribute: false,
-			}),
-		);
-
-		// All items have section selected, should be sorted alphabetically
-		const allItems = flattenSections(result.current.sections);
-		const values = allItems.map((item) => item.value);
-		expect(values).toStrictEqual(['apple', 'mango', 'zebra']);
-	});
-
-	describe('filtered results from API', () => {
-		it('keeps items in their natural sections with filtered API results', () => {
-			const { result } = renderHook(() =>
-				useSectionedValues({
-					...baseInput,
-					hasExistingQuery: true,
-					isSomeFilterPresentForCurrentAttribute: true,
-					currentFilterState: { val1: true },
-				}),
-			);
-
-			const sectionTypes = result.current.sections.map((s) => s.type);
-			expect(sectionTypes).toContain(SectionType.SELECTED);
-			expect(sectionTypes).toContain(SectionType.RELATED);
-		});
-
-		it('returns empty sections array when no values', () => {
-			const { result } = renderHook(() =>
-				useSectionedValues({
-					...baseInput,
-					relatedValues: [],
-					allValues: [],
-					hasExistingQuery: true,
-					isSomeFilterPresentForCurrentAttribute: false,
-					currentFilterState: {},
-				}),
-			);
-
-			expect(result.current.sections).toHaveLength(0);
-			expect(result.current.totalCount).toBe(0);
-		});
-
-		it('non-related items go to ALL_VALUES section', () => {
-			const { result } = renderHook(() =>
-				useSectionedValues({
-					...baseInput,
-					relatedValues: [],
-					allValues: ['other1', 'other2', 'other3'],
-					hasExistingQuery: true,
-					isSomeFilterPresentForCurrentAttribute: false,
-				}),
-			);
-
-			const allValuesSection = result.current.sections.find(
-				(s) => s.type === SectionType.ALL_VALUES,
-			);
-			expect(allValuesSection?.items).toHaveLength(3);
-		});
-
-		it('handles non-overlapping relatedValues and allValues correctly', () => {
-			// This tests the bug where different pod names in relatedValues vs allValues
-			// caused all items to go to ALL_VALUES instead of RELATED
-			const { result } = renderHook(() =>
-				useSectionedValues({
-					...baseInput,
-					relatedValues: ['pod-a-1', 'pod-b-1', 'pod-c-1'],
-					allValues: ['pod-a-2', 'pod-b-2', 'pod-c-2'],
-					hasExistingQuery: true,
-					isSomeFilterPresentForCurrentAttribute: false,
-				}),
-			);
-
-			const sectionTypes = result.current.sections.map((s) => s.type);
-
-			// RELATED section should exist with relatedValues items
-			expect(sectionTypes).toContain(SectionType.RELATED);
-			const relatedSection = result.current.sections.find(
-				(s) => s.type === SectionType.RELATED,
-			);
-			expect(relatedSection?.items).toHaveLength(3);
-			expect(relatedSection?.items.map((i) => i.value)).toStrictEqual(
-				expect.arrayContaining(['pod-a-1', 'pod-b-1', 'pod-c-1']),
-			);
-
-			// ALL_VALUES section should exist with allValues items
-			expect(sectionTypes).toContain(SectionType.ALL_VALUES);
-			const allValuesSection = result.current.sections.find(
-				(s) => s.type === SectionType.ALL_VALUES,
-			);
-			expect(allValuesSection?.items).toHaveLength(3);
-			expect(allValuesSection?.items.map((i) => i.value)).toStrictEqual(
-				expect.arrayContaining(['pod-a-2', 'pod-b-2', 'pod-c-2']),
-			);
-		});
-	});
-
-	describe('stale related values during refresh (relatedExclusions)', () => {
-		// Scenario: key A selected (existing query) + key B had value "oldSelected".
-		// User selects a different value on key B -> "oldSelected" is de-selected.
-		// keepPreviousData keeps the stale response where "oldSelected" is still in
-		// relatedValues, so it would wrongly render as "related". It is excluded.
-		it('subtracts only the excluded value from the RELATED section', () => {
-			const { result } = renderHook(() =>
-				useSectionedValues({
-					...baseInput,
-					currentFilterState: { newValue: true },
-					isSomeFilterPresentForCurrentAttribute: true,
-					hasExistingQuery: true,
-					// stale API data kept via keepPreviousData
-					relatedValues: ['oldSelected', 'otherRelated'],
-					allValues: ['newValue'],
-					relatedExclusions: ['oldSelected'],
-				}),
-			);
-
-			const allItems = flattenSections(result.current.sections);
-
-			// oldSelected must NOT render as related (dropped entirely - not in
-			// allValues nor selected)
-			expect(
-				allItems.find((item) => item.value === 'oldSelected'),
-			).toBeUndefined();
-
-			// other related values are kept
-			expect(allItems.find((item) => item.value === 'otherRelated')?.section).toBe(
-				SectionType.RELATED,
-			);
-		});
-
-		it('preserves every related value that is not the excluded (previously selected) one', () => {
-			const { result } = renderHook(() =>
-				useSectionedValues({
-					...baseInput,
-					currentFilterState: { newValue: true },
-					isSomeFilterPresentForCurrentAttribute: true,
-					hasExistingQuery: true,
-					// oldSelected was just de-selected; the rest are genuinely related
-					relatedValues: ['oldSelected', 'relatedA', 'relatedB', 'relatedC'],
-					allValues: ['newValue'],
-					relatedExclusions: ['oldSelected'],
-				}),
-			);
-
-			const relatedSection = result.current.sections.find(
-				(s) => s.type === SectionType.RELATED,
-			);
-			const relatedValues = relatedSection?.items.map((i) => i.value) ?? [];
-
-			// all non-excluded related values are kept
-			expect(relatedValues).toStrictEqual(['relatedA', 'relatedB', 'relatedC']);
-			// and they stay checked
-			relatedSection?.items.forEach((item) => {
-				expect(item.checkedState).toBe('checked');
-			});
-			// the excluded value is gone
-			expect(relatedValues).not.toContain('oldSelected');
-		});
-
-		it('keeps the RELATED section when other related values remain', () => {
-			const { result } = renderHook(() =>
-				useSectionedValues({
-					...baseInput,
-					currentFilterState: { newValue: true },
-					isSomeFilterPresentForCurrentAttribute: true,
-					hasExistingQuery: true,
-					relatedValues: ['oldSelected', 'otherRelated'],
-					allValues: ['newValue'],
-					relatedExclusions: ['oldSelected'],
-				}),
-			);
-
-			const sectionTypes = result.current.sections.map((s) => s.type);
-			expect(sectionTypes).toContain(SectionType.RELATED);
-			expect(sectionTypes).toContain(SectionType.SELECTED);
-		});
-
-		it('shows the excluded value normally when exclusions are empty', () => {
-			const { result } = renderHook(() =>
-				useSectionedValues({
-					...baseInput,
-					currentFilterState: { newValue: true },
-					isSomeFilterPresentForCurrentAttribute: true,
-					hasExistingQuery: true,
-					relatedValues: ['oldSelected', 'otherRelated'],
-					allValues: ['newValue'],
-					relatedExclusions: [],
-				}),
-			);
-
-			const allItems = flattenSections(result.current.sections);
-			expect(allItems.find((item) => item.value === 'oldSelected')?.section).toBe(
-				SectionType.RELATED,
-			);
-		});
-	});
-
-	describe('section ordering', () => {
-		it('sections appear in order: SELECTED → RELATED → ALL_VALUES', () => {
-			const { result } = renderHook(() =>
-				useSectionedValues({
-					...baseInput,
-					relatedValues: ['related1'],
-					allValues: ['all1'],
-					hasExistingQuery: true,
-					isSomeFilterPresentForCurrentAttribute: true,
-					currentFilterState: { selected1: true },
-				}),
-			);
-
-			const sectionTypes = result.current.sections.map((s) => s.type);
-
-			// Verify order
-			const selectedIdx = sectionTypes.indexOf(SectionType.SELECTED);
-			const relatedIdx = sectionTypes.indexOf(SectionType.RELATED);
-			const allValuesIdx = sectionTypes.indexOf(SectionType.ALL_VALUES);
-
-			expect(selectedIdx).toBeLessThan(relatedIdx);
-			expect(relatedIdx).toBeLessThan(allValuesIdx);
-		});
-
-		it('RELATED section appears before ALL_VALUES even with many items', () => {
-			const { result } = renderHook(() =>
-				useSectionedValues({
-					...baseInput,
-					relatedValues: ['r1', 'r2', 'r3', 'r4', 'r5'],
-					allValues: ['a1', 'a2', 'a3', 'a4', 'a5'],
-					hasExistingQuery: true,
-					isSomeFilterPresentForCurrentAttribute: false,
-					visibleItemsCount: 100,
-				}),
-			);
-
-			const sectionTypes = result.current.sections.map((s) => s.type);
-
-			expect(sectionTypes[0]).toBe(SectionType.RELATED);
-			expect(sectionTypes[1]).toBe(SectionType.ALL_VALUES);
-		});
-
-		it('visibleItemsCount limits total items across sections', () => {
-			const { result } = renderHook(() =>
-				useSectionedValues({
-					...baseInput,
-					relatedValues: ['r1', 'r2', 'r3'],
-					allValues: ['a1', 'a2', 'a3'],
-					hasExistingQuery: true,
-					isSomeFilterPresentForCurrentAttribute: false,
-					visibleItemsCount: 4,
-				}),
-			);
-
-			const totalItems = result.current.sections.reduce(
-				(sum, s) => sum + s.items.length,
-				0,
-			);
-			expect(totalItems).toBe(4);
-
-			// RELATED section should get priority (3 items)
-			const relatedSection = result.current.sections.find(
-				(s) => s.type === SectionType.RELATED,
-			);
-			expect(relatedSection?.items).toHaveLength(3);
-
-			// ALL_VALUES gets remaining (1 item)
-			const allValuesSection = result.current.sections.find(
-				(s) => s.type === SectionType.ALL_VALUES,
-			);
-			expect(allValuesSection?.items).toHaveLength(1);
-		});
-	});
-});

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/v2/itemRules.ts

@@ -1,118 +0,0 @@
-import { CheckedState } from '../../../types';
-
-export enum SectionType {
-	SELECTED = 'selected',
-	RELATED = 'related',
-	ALL_VALUES = 'all_values',
-}
-
-export interface BadgeConfig {
-	key: string;
-	label: string;
-	color: 'robin' | 'warning' | 'secondary';
-}
-
-export interface ItemConfig {
-	section: SectionType;
-	badge: BadgeConfig | null;
-	checkedState: CheckedState;
-}
-
-export interface ItemContext {
-	isSelectedOnFilter: boolean;
-	isInRelatedValues: boolean;
-	isNotInOperator: boolean;
-	hasExistingQuery: boolean;
-	hasFilterForThisKey: boolean;
-}
-
-export interface DerivedItem extends ItemConfig {
-	value: string;
-}
-
-interface ItemRule {
-	condition: (ctx: ItemContext) => boolean;
-	config: ItemConfig;
-}
-
-const ITEM_RULES: ItemRule[] = [
-	// No existing query and no filter → all checked (selected section)
-	{
-		condition: (ctx): boolean =>
-			!ctx.hasExistingQuery && !ctx.hasFilterForThisKey,
-		config: {
-			section: SectionType.SELECTED,
-			badge: null,
-			checkedState: 'checked',
-		},
-	},
-	// Selected with NOT IN operator → unchecked, no badge
-	{
-		condition: (ctx): boolean => ctx.isSelectedOnFilter && ctx.isNotInOperator,
-		config: {
-			section: SectionType.SELECTED,
-			badge: null,
-			checkedState: 'unchecked',
-		},
-	},
-	// Selected with IN operator → checked
-	{
-		condition: (ctx): boolean => ctx.isSelectedOnFilter && !ctx.isNotInOperator,
-		config: {
-			section: SectionType.SELECTED,
-			badge: null,
-			checkedState: 'checked',
-		},
-	},
-	// Related values (from existing query) → checked
-	{
-		condition: (ctx): boolean => ctx.hasExistingQuery && ctx.isInRelatedValues,
-		config: {
-			section: SectionType.RELATED,
-			badge: null,
-			checkedState: 'checked',
-		},
-	},
-	// All values (has existing query but not related) → unchecked
-	{
-		condition: (ctx): boolean => ctx.hasExistingQuery,
-		config: {
-			section: SectionType.ALL_VALUES,
-			badge: null,
-			checkedState: 'unchecked',
-		},
-	},
-];
-
-// Fallback when no rule matches
-const DEFAULT_CONFIG: ItemConfig = {
-	section: SectionType.SELECTED,
-	badge: null,
-	checkedState: 'checked',
-};
-
-export function deriveItemConfig(ctx: ItemContext): ItemConfig {
-	for (const rule of ITEM_RULES) {
-		if (rule.condition(ctx)) {
-			return rule.config;
-		}
-	}
-	return DEFAULT_CONFIG;
-}
-
-export function deriveItems(
-	values: string[],
-	relatedSet: Set<string>,
-	selectedOnFilterSet: Set<string>,
-	ctx: Omit<ItemContext, 'isSelectedOnFilter' | 'isInRelatedValues'>,
-): DerivedItem[] {
-	return values.map((value) => {
-		const itemCtx: ItemContext = {
-			...ctx,
-			isSelectedOnFilter: selectedOnFilterSet.has(value),
-			isInRelatedValues: relatedSet.has(value),
-		};
-		const config = deriveItemConfig(itemCtx);
-		return { value, ...config };
-	});
-}

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/v2/useExistingQuery.tsx

@@ -1,61 +0,0 @@
-import { useMemo } from 'react';
-import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
-import { convertFiltersToExpression } from 'components/QueryBuilderV2/utils';
-import { QuickFilterCheckboxUseFieldApis } from 'components/QuickFilters/types';
-
-interface UseExistingQueryParams {
-	useFieldApis: QuickFilterCheckboxUseFieldApis;
-	activeQueryIndex: number;
-}
-
-interface UseExistingQueryResult {
-	existingQuery: string | undefined;
-	hasExistingQuery: boolean;
-}
-
-export function useExistingQuery({
-	useFieldApis,
-	activeQueryIndex,
-}: UseExistingQueryParams): UseExistingQueryResult {
-	const { currentQuery } = useQueryBuilder();
-
-	const existingQuery = useMemo(() => {
-		if (useFieldApis.existingQuery === null) {
-			return undefined;
-		}
-
-		if (useFieldApis.existingQuery) {
-			return useFieldApis.existingQuery;
-		}
-
-		const queryData = currentQuery.builder.queryData?.[activeQueryIndex];
-
-		// Prefer V5 filter.expression
-		if (queryData?.filter?.expression) {
-			return queryData.filter.expression;
-		}
-
-		// Fall back to V3 filters.items
-		if (queryData?.filters?.items?.length) {
-			return convertFiltersToExpression(queryData.filters).expression;
-		}
-
-		return undefined;
-	}, [
-		useFieldApis.existingQuery,
-		currentQuery.builder.queryData,
-		activeQueryIndex,
-	]);
-
-	// Check if ANY filters exist in query (V3 items or V5 expression)
-	// This is separate from existingQuery because existingQuery can be explicitly
-	// disabled (null) while filters still exist in the query for UI purposes
-	const hasExistingQuery = useMemo(() => {
-		const queryData = currentQuery.builder.queryData?.[activeQueryIndex];
-		const hasV3Items = (queryData?.filters?.items?.length ?? 0) > 0;
-		const hasV5Expression = !!queryData?.filter?.expression;
-		return hasV3Items || hasV5Expression || !!existingQuery;
-	}, [currentQuery.builder.queryData, activeQueryIndex, existingQuery]);
-
-	return { existingQuery, hasExistingQuery };
-}

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/v2/useFieldValues.tsx

@@ -1,97 +0,0 @@
-import { useMemo } from 'react';
-import { useGetFieldsValues } from 'api/generated/services/fields';
-import { TelemetrytypesSignalDTO } from 'api/generated/services/sigNoz.schemas';
-import { IQuickFiltersConfig } from 'components/QuickFilters/types';
-import { DataSource } from 'types/common/queryBuilder';
-import { FIELD_API_CACHE_TIME } from 'constants/queryCacheTime';
-
-interface UseFieldValuesProps {
-	filter: IQuickFiltersConfig;
-	searchText: string;
-	existingQuery?: string;
-	metricNamespace?: string;
-	startUnixMilli?: number;
-	endUnixMilli?: number;
-	enabled: boolean;
-}
-
-interface UseFieldValuesReturn {
-	relatedValues: string[];
-	allValues: string[];
-	isLoading: boolean;
-	isFetching: boolean;
-}
-
-const DATA_SOURCE_TO_SIGNAL: Record<DataSource, TelemetrytypesSignalDTO> = {
-	[DataSource.METRICS]: TelemetrytypesSignalDTO.metrics,
-	[DataSource.TRACES]: TelemetrytypesSignalDTO.traces,
-	[DataSource.LOGS]: TelemetrytypesSignalDTO.logs,
-};
-
-export function useFieldValues({
-	filter,
-	searchText,
-	existingQuery,
-	metricNamespace,
-	startUnixMilli,
-	endUnixMilli,
-	enabled,
-}: UseFieldValuesProps): UseFieldValuesReturn {
-	const { data, isLoading, isFetching } = useGetFieldsValues(
-		{
-			signal: filter.dataSource
-				? DATA_SOURCE_TO_SIGNAL[filter.dataSource]
-				: undefined,
-			name: filter.attributeKey.key,
-			searchText,
-			existingQuery,
-			metricNamespace,
-			startUnixMilli,
-			// This field does not affect the backend but I wanted to keep it here
-			// in case we add the support in the future
-			endUnixMilli,
-		},
-		{
-			query: {
-				enabled,
-				cacheTime: FIELD_API_CACHE_TIME,
-				keepPreviousData: true,
-			},
-		},
-	);
-
-	const relatedValues: string[] = useMemo(() => {
-		const values = data?.data?.values;
-		if (!values) {
-			return [];
-		}
-
-		return (
-			values.relatedValues?.filter(
-				(value): value is string =>
-					value !== null && value !== undefined && value !== '',
-			) || []
-		);
-	}, [data]);
-
-	const allValues: string[] = useMemo(() => {
-		const values = data?.data?.values;
-		if (!values) {
-			return [];
-		}
-
-		const stringValues =
-			values.stringValues?.filter(
-				(value): value is string =>
-					value !== null && value !== undefined && value !== '',
-			) || [];
-		const numberValues =
-			values.numberValues
-				?.filter((value): value is number => value !== null && value !== undefined)
-				.map((value) => value.toString()) || [];
-
-		return [...stringValues, ...numberValues];
-	}, [data]);
-
-	return { relatedValues, allValues, isLoading, isFetching };
-}

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/v2/useSectionedValues.ts

@@ -1,152 +0,0 @@
-import { useMemo } from 'react';
-
-import { BadgeConfig, deriveItems, SectionType } from './itemRules';
-import { CheckedState } from '../../../types';
-
-interface SectionedValuesInput {
-	relatedValues: string[];
-	allValues: string[];
-	currentFilterState: Record<string, boolean>;
-	isSomeFilterPresentForCurrentAttribute: boolean;
-	isNotInOperator: boolean;
-	hasExistingQuery: boolean;
-	visibleItemsCount: number;
-	relatedExclusions: string[];
-}
-
-export interface SectionedItem {
-	value: string;
-	section: SectionType;
-	badge: BadgeConfig | null;
-	checkedState: CheckedState;
-}
-
-export interface Section {
-	type: SectionType;
-	items: SectionedItem[];
-}
-
-interface SectionedValuesOutput {
-	sections: Section[];
-	totalCount: number;
-}
-
-const SECTION_ORDER: SectionType[] = [
-	SectionType.SELECTED,
-	SectionType.RELATED,
-	SectionType.ALL_VALUES,
-];
-
-export function buildSelectedSet(
-	currentFilterState: Record<string, boolean>,
-	isSomeFilterPresentForCurrentAttribute: boolean,
-	isNotInOperator: boolean,
-): Set<string> {
-	const selectedSet = new Set<string>();
-	if (!isSomeFilterPresentForCurrentAttribute) {
-		return selectedSet;
-	}
-
-	for (const [val, isChecked] of Object.entries(currentFilterState)) {
-		// NOT IN: unchecked = explicitly excluded
-		// IN: checked = explicitly selected
-		const shouldAdd = isNotInOperator ? !isChecked : isChecked;
-		if (shouldAdd) {
-			selectedSet.add(val);
-		}
-	}
-	return selectedSet;
-}
-
-export function useSectionedValues({
-	relatedValues,
-	allValues,
-	currentFilterState,
-	isSomeFilterPresentForCurrentAttribute,
-	isNotInOperator,
-	hasExistingQuery,
-	visibleItemsCount,
-	relatedExclusions,
-}: SectionedValuesInput): SectionedValuesOutput {
-	const items = useMemo(() => {
-		const selectedSet = buildSelectedSet(
-			currentFilterState,
-			isSomeFilterPresentForCurrentAttribute,
-			isNotInOperator,
-		);
-
-		const exclusionSet = new Set(relatedExclusions);
-		const effectiveRelatedValues = relatedValues.filter(
-			(value) => !exclusionSet.has(value),
-		);
-
-		// Combine all values - API already filters both arrays by searchText
-		const allUniqueValues = Array.from(
-			new Set([...effectiveRelatedValues, ...allValues]),
-		);
-
-		// Include selected values at top - may not be in API response
-		const finalValues = [
-			...new Set([...Array.from(selectedSet), ...allUniqueValues]),
-		];
-		const relatedSet = new Set(effectiveRelatedValues);
-
-		return deriveItems(finalValues, relatedSet, selectedSet, {
-			isNotInOperator,
-			hasExistingQuery,
-			hasFilterForThisKey: isSomeFilterPresentForCurrentAttribute,
-		});
-	}, [
-		relatedValues,
-		allValues,
-		currentFilterState,
-		isSomeFilterPresentForCurrentAttribute,
-		isNotInOperator,
-		hasExistingQuery,
-		relatedExclusions,
-	]);
-
-	const sections = useMemo(() => {
-		// Group items by section
-		const sectionMap = new Map<SectionType, SectionedItem[]>();
-		for (const sectionType of SECTION_ORDER) {
-			sectionMap.set(sectionType, []);
-		}
-
-		for (const item of items) {
-			sectionMap.get(item.section)?.push(item);
-		}
-
-		// Sort items within each section alphabetically
-		for (const sectionItems of sectionMap.values()) {
-			sectionItems.sort((a, b) => a.value.localeCompare(b.value));
-		}
-
-		// Apply visibleItemsCount across all sections
-		let remaining = visibleItemsCount;
-		const result: Section[] = [];
-
-		for (const sectionType of SECTION_ORDER) {
-			const sectionItems = sectionMap.get(sectionType) || [];
-
-			if (sectionItems.length === 0) {
-				continue;
-			}
-
-			const itemsToTake = Math.min(sectionItems.length, remaining);
-			if (itemsToTake === 0) {
-				break;
-			}
-
-			result.push({
-				type: sectionType,
-				items: sectionItems.slice(0, itemsToTake),
-			});
-			remaining -= itemsToTake;
-		}
-
-		return result;
-	}, [items, visibleItemsCount]);
-
-	return { sections, totalCount: items.length };
-}

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/v2/useStaleRelatedExclusions.ts

@@ -1,36 +0,0 @@
-import { useEffect, useMemo, useRef } from 'react';
-
-const EMPTY: string[] = [];
-
-interface UseStaleRelatedExclusionsParams {
-	selectedValues: string[];
-	isFetching: boolean;
-	isRefreshing: boolean;
-}
-
-export function useStaleRelatedExclusions({
-	selectedValues,
-	isFetching,
-	isRefreshing,
-}: UseStaleRelatedExclusionsParams): string[] {
-	const selectionAtLastFetchRef = useRef<string[]>(selectedValues);
-
-	useEffect(() => {
-		if (!isFetching) {
-			selectionAtLastFetchRef.current = selectedValues;
-		}
-	}, [isFetching, selectedValues]);
-
-	return useMemo(() => {
-		if (!isRefreshing) {
-			return EMPTY;
-		}
-
-		const current = new Set(selectedValues);
-		const removed = selectionAtLastFetchRef.current.filter(
-			(value) => !current.has(value),
-		);
-
-		return removed.length ? removed : EMPTY;
-	}, [isRefreshing, selectedValues]);
-}

frontend/src/components/QuickFilters/QuickFilters.tsx

@@ -32,7 +32,6 @@ import { Query } from 'types/api/queryBuilder/queryBuilderData';
 import { USER_ROLES } from 'types/roles';
 
 import Checkbox from './FilterRenderers/Checkbox/Checkbox';
-import CheckboxV2 from './FilterRenderers/Checkbox/v2/CheckboxFilterV2';
 import Duration from './FilterRenderers/Duration/Duration';
 import Slider from './FilterRenderers/Slider/Slider';
 import useFilterConfig from './hooks/useFilterConfig';
@@ -52,7 +51,6 @@ export default function QuickFilters(props: IQuickFiltersProps): JSX.Element {
 		signal,
 		showFilterCollapse = true,
 		showQueryName = true,
-		useFieldApis,
 	} = props;
 	const { user } = useAppContext();
 	const [isSettingsOpen, setIsSettingsOpen] = useState(false);
@@ -299,45 +297,21 @@ export default function QuickFilters(props: IQuickFiltersProps): JSX.Element {
 				{filterConfig.map((filter) => {
 					switch (filter.type) {
 						case FiltersType.CHECKBOX:
-							return useFieldApis ? (
-								<CheckboxV2
-									key={filter.attributeKey.key}
-									source={source}
-									filter={filter}
-									onFilterChange={onFilterChange}
-									useFieldApis={useFieldApis}
-								/>
-							) : (
+							return (
 								<Checkbox
-									key={filter.attributeKey.key}
 									source={source}
 									filter={filter}
 									onFilterChange={onFilterChange}
 								/>
 							);
 						case FiltersType.DURATION:
-							return (
-								<Duration
-									key={filter.attributeKey.key}
-									filter={filter}
-									onFilterChange={onFilterChange}
-								/>
-							);
+							return <Duration filter={filter} onFilterChange={onFilterChange} />;
 						case FiltersType.SLIDER:
-							return <Slider key={filter.attributeKey.key} />;
+							return <Slider />;
 						// eslint-disable-next-line sonarjs/no-duplicated-branches
 						default:
-							return useFieldApis ? (
-								<CheckboxV2
-									key={filter.attributeKey.key}
-									source={source}
-									filter={filter}
-									onFilterChange={onFilterChange}
-									useFieldApis={useFieldApis}
-								/>
-							) : (
+							return (
 								<Checkbox
-									key={filter.attributeKey.key}
 									source={source}
 									filter={filter}
 									onFilterChange={onFilterChange}
@@ -407,5 +381,4 @@ QuickFilters.defaultProps = {
 	config: [],
 	showFilterCollapse: true,
 	showQueryName: true,
-	useFieldApis: undefined,
 };

frontend/src/components/QuickFilters/types.ts

@@ -26,11 +26,6 @@ export enum SignalType {
 	METER_EXPLORER = 'meter',
 }
 
-/**
- * Missing export from signozhq/ui/checkbox, TODO(H4ad): Add and remove this type definition
- */
-export type CheckedState = 'checked' | 'unchecked' | 'indeterminate';
-
 export interface IQuickFiltersConfig {
 	type: FiltersType;
 	title: string;
@@ -51,7 +46,6 @@ export interface IQuickFiltersProps {
 	className?: string;
 	showFilterCollapse?: boolean;
 	showQueryName?: boolean;
-	useFieldApis?: QuickFilterCheckboxUseFieldApis;
 }
 
 export enum QuickFiltersSource {
@@ -62,19 +56,3 @@ export enum QuickFiltersSource {
 	EXCEPTIONS = 'exceptions',
 	METER_EXPLORER = 'meter',
 }
-
-/**
- * Opt-in: fetch values from the /v1/fields/values API instead of /v3/autocomplete/attribute_values
- */
-export type QuickFilterCheckboxUseFieldApis = {
-	startUnixMilli: number;
-	endUnixMilli: number;
-	/**
-	 * If you didn't specify a string, we automatically try to extract this from the currentQuery,
-	 * from the filter.expression or filter.items.
-	 *
-	 * Use null to ignore/disable this behavior.
-	 */
-	existingQuery?: string | null;
-	metricNamespace?: string;
-};

frontend/src/constants/query.ts

@@ -57,7 +57,4 @@ export enum QueryParams {
 	isTestAlert = 'isTestAlert',
 	yAxisUnit = 'yAxisUnit',
 	ruleName = 'ruleName',
-	matchType = 'matchType',
-	compareOp = 'compareOp',
-	evaluationWindowPreset = 'evaluationWindowPreset',
 }

frontend/src/constants/queryCacheTime.ts

@@ -1,5 +1,3 @@
 export const DASHBOARD_CACHE_TIME = 30_000;
 // keep it low or zero, otherwise, when enabled auto-refresh, this causes OOM due to accumulated queries in cache
 export const DASHBOARD_CACHE_TIME_ON_REFRESH_ENABLED = 0;
-
-export const FIELD_API_CACHE_TIME = 60_000;

frontend/src/constants/routes.ts

@@ -89,10 +89,10 @@ const ROUTES = {
 	AI_ASSISTANT_BASE: '/ai-assistant',
 	AI_ASSISTANT_ICON_PREVIEW: '/ai-assistant-icon-preview',
 	MCP_SERVER: '/settings/mcp-server',
-	AI_OBSERVABILITY_ATTRIBUTE_MAPPING: '/ai-observability/attribute-mapping',
-	AI_OBSERVABILITY_BASE: '/ai-observability',
-	AI_OBSERVABILITY_OVERVIEW: '/ai-observability/overview',
-	AI_OBSERVABILITY_CONFIGURATION: '/ai-observability/configuration',
+	LLM_OBSERVABILITY_ATTRIBUTE_MAPPING: '/llm-observability/attribute-mapping',
+	LLM_OBSERVABILITY_BASE: '/llm-observability',
+	LLM_OBSERVABILITY_OVERVIEW: '/llm-observability/overview',
+	LLM_OBSERVABILITY_CONFIGURATION: '/llm-observability/configuration',
 } as const;
 
 export default ROUTES;

frontend/src/container/CreateAlertV2/context/__tests__/CreateAlertProvider.prefill.test.tsx

@@ -1,110 +0,0 @@
-import { QueryClient, QueryClientProvider } from 'react-query';
-import { MemoryRouter } from 'react-router-dom';
-import { render, screen } from '@testing-library/react';
-import { AlertTypes } from 'types/api/alerts/alertTypes';
-
-import { CreateAlertProvider, useCreateAlertState } from '../index';
-
-// The provider only needs a query with a unit + empty builder for these assertions.
-jest.mock('hooks/queryBuilder/useQueryBuilder', () => ({
-	useQueryBuilder: (): unknown => ({
-		currentQuery: {
-			unit: 'bytes',
-			builder: { queryData: [], queryFormulas: [] },
-		},
-		redirectWithQueryBuilderData: jest.fn(),
-	}),
-}));
-
-const mutation = { mutate: jest.fn(), isLoading: false };
-jest.mock('api/generated/services/rules', () => ({
-	useCreateRule: (): unknown => mutation,
-	useTestRule: (): unknown => mutation,
-	useUpdateRuleByID: (): unknown => mutation,
-}));
-
-function Probe(): JSX.Element {
-	const { thresholdState, evaluationWindow } = useCreateAlertState();
-	return (
-		<div>
-			<span data-testid="match-type">{thresholdState.matchType}</span>
-			<span data-testid="operator">{thresholdState.operator}</span>
-			<span data-testid="threshold-count">{thresholdState.thresholds.length}</span>
-			<span data-testid="threshold-value">
-				{thresholdState.thresholds[0]?.thresholdValue}
-			</span>
-			<span data-testid="window-type">{evaluationWindow.windowType}</span>
-		</div>
-	);
-}
-
-function renderWithSearch(search: string): void {
-	const queryClient = new QueryClient({
-		defaultOptions: { queries: { retry: false } },
-	});
-	render(
-		<MemoryRouter initialEntries={[`/alerts/new${search}`]}>
-			<QueryClientProvider client={queryClient}>
-				<CreateAlertProvider initialAlertType={AlertTypes.METRICS_BASED_ALERT}>
-					<Probe />
-				</CreateAlertProvider>
-			</QueryClientProvider>
-		</MemoryRouter>,
-	);
-}
-
-function serializeThreshold(thresholdValue: number): string {
-	return encodeURIComponent(
-		JSON.stringify([
-			{
-				id: 't1',
-				label: 'critical',
-				thresholdValue,
-				recoveryThresholdValue: null,
-				unit: 'bytes',
-				channels: [],
-				color: '#F1575F',
-			},
-		]),
-	);
-}
-
-describe('CreateAlertProvider — URL-declared prefill (issue #5291)', () => {
-	it('applies matchType, operator, and thresholds without the meter window', () => {
-		// Dashboard-style prefill: no evaluationWindowPreset → default window.
-		renderWithSearch(
-			`?matchType=on_average&compareOp=below&thresholds=${serializeThreshold(90)}`,
-		);
-
-		expect(screen.getByTestId('match-type')).toHaveTextContent('on_average');
-		expect(screen.getByTestId('operator')).toHaveTextContent('below');
-		expect(screen.getByTestId('threshold-count')).toHaveTextContent('1');
-		expect(screen.getByTestId('threshold-value')).toHaveTextContent('90');
-		// The meter evaluation-window preset must NOT fire.
-		expect(screen.getByTestId('window-type')).toHaveTextContent('rolling');
-	});
-
-	it('adjusts only the occurrence type when no thresholds are supplied', () => {
-		renderWithSearch(`?matchType=in_total`);
-
-		expect(screen.getByTestId('match-type')).toHaveTextContent('in_total');
-		// The default single critical threshold and operator are retained.
-		expect(screen.getByTestId('threshold-count')).toHaveTextContent('1');
-		expect(screen.getByTestId('threshold-value')).toHaveTextContent('0');
-		expect(screen.getByTestId('operator')).toHaveTextContent('above');
-		expect(screen.getByTestId('window-type')).toHaveTextContent('rolling');
-	});
-
-	it('applies the meter evaluation window when the preset is declared', () => {
-		// Ingestion-style prefill: explicit in_total + meter preset.
-		renderWithSearch(
-			`?matchType=in_total&evaluationWindowPreset=meter&thresholds=${serializeThreshold(
-				500,
-			)}`,
-		);
-
-		expect(screen.getByTestId('match-type')).toHaveTextContent('in_total');
-		expect(screen.getByTestId('threshold-value')).toHaveTextContent('500');
-		expect(screen.getByTestId('window-type')).toHaveTextContent('cumulative');
-	});
-});

frontend/src/container/CreateAlertV2/context/__tests__/resolveUrlAlertPrefill.test.ts

@@ -1,71 +0,0 @@
-import { AlertThresholdMatchType, AlertThresholdOperator } from '../types';
-import {
-	EvaluationWindowPreset,
-	resolveUrlAlertPrefill,
-} from '../resolveUrlAlertPrefill';
-
-function resolve(search: string): ReturnType<typeof resolveUrlAlertPrefill> {
-	return resolveUrlAlertPrefill(new URLSearchParams(search));
-}
-
-describe('resolveUrlAlertPrefill', () => {
-	it('returns an empty plan when no params are present', () => {
-		expect(resolve('')).toStrictEqual({
-			thresholds: undefined,
-			matchType: undefined,
-			operator: undefined,
-			evaluationWindowPreset: undefined,
-		});
-	});
-
-	it('parses a thresholds array', () => {
-		const thresholds = [{ id: 't1', thresholdValue: 90 }];
-		const { thresholds: parsed } = resolve(
-			`thresholds=${encodeURIComponent(JSON.stringify(thresholds))}`,
-		);
-		expect(parsed).toStrictEqual(thresholds);
-	});
-
-	it('ignores malformed or non-array thresholds without throwing', () => {
-		const consoleError = jest
-			.spyOn(console, 'error')
-			.mockImplementation(() => undefined);
-
-		expect(resolve('thresholds=not-json').thresholds).toBeUndefined();
-		expect(
-			resolve(`thresholds=${encodeURIComponent('{"a":1}')}`).thresholds,
-		).toBeUndefined();
-
-		consoleError.mockRestore();
-	});
-
-	it('normalizes matchType aliases', () => {
-		expect(resolve('matchType=on_average').matchType).toBe(
-			AlertThresholdMatchType.ON_AVERAGE,
-		);
-		expect(resolve('matchType=sum').matchType).toBe(
-			AlertThresholdMatchType.IN_TOTAL,
-		);
-		expect(resolve('matchType=nonsense').matchType).toBeUndefined();
-	});
-
-	it('normalizes operator aliases', () => {
-		expect(resolve('compareOp=above').operator).toBe(
-			AlertThresholdOperator.IS_ABOVE,
-		);
-		expect(resolve('compareOp=%3E').operator).toBe(
-			AlertThresholdOperator.IS_ABOVE,
-		);
-		expect(resolve('compareOp=nonsense').operator).toBeUndefined();
-	});
-
-	it('recognizes the meter evaluation-window preset only', () => {
-		expect(resolve('evaluationWindowPreset=meter').evaluationWindowPreset).toBe(
-			EvaluationWindowPreset.METER,
-		);
-		expect(
-			resolve('evaluationWindowPreset=rolling').evaluationWindowPreset,
-		).toBeUndefined();
-		expect(resolve('').evaluationWindowPreset).toBeUndefined();
-	});
-});

frontend/src/container/CreateAlertV2/context/conditionNormalizers.ts

@@ -1,63 +0,0 @@
-import { AlertThresholdMatchType, AlertThresholdOperator } from './types';
-
-// Mirrors the backend's CompareOperator.Normalize() in
-// pkg/types/ruletypes/compare.go. Maps any accepted alias to the enum value
-// the dropdown understands. Returns undefined for aliases the UI does not
-// expose (e.g. above_or_equal, below_or_equal) so callers can keep the raw
-// value on screen instead of silently rewriting it.
-export function normalizeOperator(
-	raw: string | undefined,
-): AlertThresholdOperator | undefined {
-	switch (raw) {
-		case '1':
-		case 'above':
-		case '>':
-			return AlertThresholdOperator.IS_ABOVE;
-		case '2':
-		case 'below':
-		case '<':
-			return AlertThresholdOperator.IS_BELOW;
-		case '3':
-		case 'equal':
-		case 'eq':
-		case '=':
-			return AlertThresholdOperator.IS_EQUAL_TO;
-		case '4':
-		case 'not_equal':
-		case 'not_eq':
-		case '!=':
-			return AlertThresholdOperator.IS_NOT_EQUAL_TO;
-		case '7':
-		case 'outside_bounds':
-			return AlertThresholdOperator.ABOVE_BELOW;
-		default:
-			return undefined;
-	}
-}
-
-// Mirrors the backend's MatchType.Normalize() in pkg/types/ruletypes/match.go.
-export function normalizeMatchType(
-	raw: string | undefined,
-): AlertThresholdMatchType | undefined {
-	switch (raw) {
-		case '1':
-		case 'at_least_once':
-			return AlertThresholdMatchType.AT_LEAST_ONCE;
-		case '2':
-		case 'all_the_times':
-			return AlertThresholdMatchType.ALL_THE_TIME;
-		case '3':
-		case 'on_average':
-		case 'avg':
-			return AlertThresholdMatchType.ON_AVERAGE;
-		case '4':
-		case 'in_total':
-		case 'sum':
-			return AlertThresholdMatchType.IN_TOTAL;
-		case '5':
-		case 'last':
-			return AlertThresholdMatchType.LAST;
-		default:
-			return undefined;
-	}
-}

frontend/src/container/CreateAlertV2/context/index.tsx

@@ -23,13 +23,10 @@ import { mapQueryDataFromApi } from 'lib/newQueryBuilder/queryBuilderMappers/map
 import { AlertTypes } from 'types/api/alerts/alertTypes';
 
 import { INITIAL_CREATE_ALERT_STATE } from './constants';
-import {
-	EvaluationWindowPreset,
-	resolveUrlAlertPrefill,
-} from './resolveUrlAlertPrefill';
 import {
 	AdvancedOptionsAction,
 	AlertThresholdAction,
+	AlertThresholdMatchType,
 	CreateAlertAction,
 	CreateAlertSlice,
 	EvaluationWindowAction,
@@ -126,13 +123,9 @@ export function CreateAlertProvider(
 
 	const location = useLocation();
 	const queryParams = new URLSearchParams(location.search);
+	const thresholdsFromURL = queryParams.get(QueryParams.thresholds);
 	const ruleNameFromURL = queryParams.get(QueryParams.ruleName);
 	const yAxisUnitFromURL = queryParams.get(QueryParams.yAxisUnit);
-	// Prefill declared in the URL; applied verbatim, agnostic of the producer.
-	const urlPrefill = useMemo(
-		() => resolveUrlAlertPrefill(new URLSearchParams(location.search)),
-		[location.search],
-	);
 
 	const [alertType, setAlertType] = useState<AlertTypes>(() => {
 		if (isEditMode) {
@@ -175,43 +168,34 @@ export function CreateAlertProvider(
 			},
 		});
 
-		if (urlPrefill.thresholds) {
-			setCreateAlertState({
-				slice: CreateAlertSlice.THRESHOLD,
-				action: {
-					type: 'SET_THRESHOLDS',
-					payload: urlPrefill.thresholds,
-				},
-			});
-		}
+		if (thresholdsFromURL) {
+			try {
+				const thresholds = JSON.parse(thresholdsFromURL);
+				setCreateAlertState({
+					slice: CreateAlertSlice.THRESHOLD,
+					action: {
+						type: 'SET_THRESHOLDS',
+						payload: thresholds,
+					},
+				});
+			} catch (error) {
+				console.error('Error parsing thresholds from URL:', error);
+			}
 
-		if (urlPrefill.matchType) {
-			setCreateAlertState({
-				slice: CreateAlertSlice.THRESHOLD,
-				action: {
-					type: 'SET_MATCH_TYPE',
-					payload: urlPrefill.matchType,
-				},
-			});
-		}
-
-		if (urlPrefill.operator) {
-			setCreateAlertState({
-				slice: CreateAlertSlice.THRESHOLD,
-				action: {
-					type: 'SET_OPERATOR',
-					payload: urlPrefill.operator,
-				},
-			});
-		}
-
-		if (urlPrefill.evaluationWindowPreset === EvaluationWindowPreset.METER) {
 			setCreateAlertState({
 				slice: CreateAlertSlice.EVALUATION_WINDOW,
 				action: {
 					type: 'SET_INITIAL_STATE_FOR_METER',
 				},
 			});
+
+			setCreateAlertState({
+				slice: CreateAlertSlice.THRESHOLD,
+				action: {
+					type: 'SET_MATCH_TYPE',
+					payload: AlertThresholdMatchType.IN_TOTAL,
+				},
+			});
 		}
 
 		if (ruleNameFromURL && !ruleNameAppliedRef.current) {
@@ -235,7 +219,7 @@ export function CreateAlertProvider(
 				},
 			});
 		}
-	}, [alertType, urlPrefill, ruleNameFromURL, yAxisUnitFromURL]);
+	}, [alertType, thresholdsFromURL, ruleNameFromURL, yAxisUnitFromURL]);
 
 	useEffect(() => {
 		if (isEditMode && initialAlertState) {

frontend/src/container/CreateAlertV2/context/resolveUrlAlertPrefill.ts

@@ -1,54 +0,0 @@
-import { QueryParams } from 'constants/query';
-
-import { normalizeMatchType, normalizeOperator } from './conditionNormalizers';
-import {
-	AlertThresholdMatchType,
-	AlertThresholdOperator,
-	Threshold,
-} from './types';
-
-export enum EvaluationWindowPreset {
-	METER = 'meter',
-}
-
-export interface ResolvedAlertPrefill {
-	thresholds?: Threshold[];
-	matchType?: AlertThresholdMatchType;
-	operator?: AlertThresholdOperator;
-	evaluationWindowPreset?: EvaluationWindowPreset;
-}
-
-function parseThresholds(raw: string | null): Threshold[] | undefined {
-	if (!raw) {
-		return undefined;
-	}
-	try {
-		const parsed = JSON.parse(raw);
-		return Array.isArray(parsed) ? (parsed as Threshold[]) : undefined;
-	} catch (error) {
-		console.error('Error parsing thresholds from URL:', error);
-		return undefined;
-	}
-}
-
-function parseEvaluationWindowPreset(
-	raw: string | null,
-): EvaluationWindowPreset | undefined {
-	return raw === EvaluationWindowPreset.METER
-		? EvaluationWindowPreset.METER
-		: undefined;
-}
-
-/** URL → declarative prefill plan; the consumer applies it without knowing the producer. */
-export function resolveUrlAlertPrefill(
-	params: URLSearchParams,
-): ResolvedAlertPrefill {
-	return {
-		thresholds: parseThresholds(params.get(QueryParams.thresholds)),
-		matchType: normalizeMatchType(params.get(QueryParams.matchType) ?? undefined),
-		operator: normalizeOperator(params.get(QueryParams.compareOp) ?? undefined),
-		evaluationWindowPreset: parseEvaluationWindowPreset(
-			params.get(QueryParams.evaluationWindowPreset),
-		),
-	};
-}

frontend/src/container/CreateAlertV2/utils.tsx

@@ -238,12 +238,67 @@ export function getAdvancedOptionsStateFromAlertDef(
 	};
 }
 
-// Condition-alias normalizers live in a leaf module (they depend only on the
-// enums) so `context/index` can consume them without an index↔utils cycle.
-export {
-	normalizeOperator,
-	normalizeMatchType,
-} from './context/conditionNormalizers';
+// Mirrors the backend's CompareOperator.Normalize() in
+// pkg/types/ruletypes/compare.go. Maps any accepted alias to the enum value
+// the dropdown understands. Returns undefined for aliases the UI does not
+// expose (e.g. above_or_equal, below_or_equal) so callers can keep the raw
+// value on screen instead of silently rewriting it.
+export function normalizeOperator(
+	raw: string | undefined,
+): AlertThresholdOperator | undefined {
+	switch (raw) {
+		case '1':
+		case 'above':
+		case '>':
+			return AlertThresholdOperator.IS_ABOVE;
+		case '2':
+		case 'below':
+		case '<':
+			return AlertThresholdOperator.IS_BELOW;
+		case '3':
+		case 'equal':
+		case 'eq':
+		case '=':
+			return AlertThresholdOperator.IS_EQUAL_TO;
+		case '4':
+		case 'not_equal':
+		case 'not_eq':
+		case '!=':
+			return AlertThresholdOperator.IS_NOT_EQUAL_TO;
+		case '7':
+		case 'outside_bounds':
+			return AlertThresholdOperator.ABOVE_BELOW;
+		default:
+			return undefined;
+	}
+}
+
+// Mirrors the backend's MatchType.Normalize() in pkg/types/ruletypes/match.go.
+export function normalizeMatchType(
+	raw: string | undefined,
+): AlertThresholdMatchType | undefined {
+	switch (raw) {
+		case '1':
+		case 'at_least_once':
+			return AlertThresholdMatchType.AT_LEAST_ONCE;
+		case '2':
+		case 'all_the_times':
+			return AlertThresholdMatchType.ALL_THE_TIME;
+		case '3':
+		case 'on_average':
+		case 'avg':
+			return AlertThresholdMatchType.ON_AVERAGE;
+		case '4':
+		case 'in_total':
+		case 'sum':
+			return AlertThresholdMatchType.IN_TOTAL;
+		case '5':
+		case 'last':
+			return AlertThresholdMatchType.LAST;
+		default:
+			return undefined;
+	}
+}
 
 export function getThresholdStateFromAlertDef(
 	alertDef: PostableAlertRuleV2,

frontend/src/container/InfraMonitoringHostsV2/Hosts.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { Button, Tooltip } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
@@ -23,10 +23,7 @@ import K8sBaseDetails, {
 import { K8sBaseList } from 'container/InfraMonitoringK8sV2/Base/K8sBaseList';
 import StatusFilter from 'container/InfraMonitoringHostsV2/StatusFilter';
 import { K8sBaseFilters } from 'container/InfraMonitoringK8sV2/Base/types';
-import {
-	InfraMonitoringEntity,
-	METRIC_NAMESPACE_BY_ENTITY,
-} from 'container/InfraMonitoringK8sV2/constants';
+import { InfraMonitoringEntity } from 'container/InfraMonitoringK8sV2/constants';
 import { useGetCompositeQueryParam } from 'hooks/queryBuilder/useGetCompositeQueryParam';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useAppContext } from 'providers/App/App';
@@ -50,7 +47,6 @@ import { getHostsQuickFiltersConfig } from './utils';
 
 import styles from './InfraMonitoringHosts.module.scss';
 import { ArrowUpToLine, Filter } from '@signozhq/icons';
-import { NANO_SECOND_MULTIPLIER, useGlobalTimeStore } from 'store/globalTime';
 
 function Hosts(): JSX.Element {
 	const [showFilters, setShowFilters] = useState(true);
@@ -59,17 +55,6 @@ function Hosts(): JSX.Element {
 	const { redirectWithQueryBuilderData } = useQueryBuilder();
 	const isInitialized = useRef(false);
 
-	const selectedTime = useGlobalTimeStore((state) => state.selectedTime);
-	const getMinMaxTime = useGlobalTimeStore((state) => state.getMinMaxTime);
-	const { startUnixMilli, endUnixMilli } = useMemo(() => {
-		const { minTime, maxTime } = getMinMaxTime();
-		return {
-			startUnixMilli: Math.floor(minTime / NANO_SECOND_MULTIPLIER),
-			endUnixMilli: Math.floor(maxTime / NANO_SECOND_MULTIPLIER),
-		};
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [selectedTime, getMinMaxTime]);
-
 	useEffect(() => {
 		if (isInitialized.current) {
 			return;
@@ -225,12 +210,6 @@ function Hosts(): JSX.Element {
 								source={QuickFiltersSource.INFRA_MONITORING}
 								config={getHostsQuickFiltersConfig(dotMetricsEnabled)}
 								handleFilterVisibilityChange={handleFilterVisibilityChange}
-								useFieldApis={{
-									metricNamespace:
-										METRIC_NAMESPACE_BY_ENTITY[InfraMonitoringEntity.HOSTS],
-									startUnixMilli,
-									endUnixMilli,
-								}}
 							/>
 						</div>
 					)}

frontend/src/container/InfraMonitoringK8sV2/InfraMonitoringK8s.tsx

@@ -3,10 +3,7 @@ import * as Sentry from '@sentry/react';
 import { Button, Tooltip } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import QuickFilters from 'components/QuickFilters/QuickFilters';
-import {
-	QuickFilterCheckboxUseFieldApis,
-	QuickFiltersSource,
-} from 'components/QuickFilters/types';
+import { QuickFiltersSource } from 'components/QuickFilters/types';
 import { initialQueriesMap } from 'constants/queryBuilder';
 import { useGetCompositeQueryParam } from 'hooks/queryBuilder/useGetCompositeQueryParam';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
@@ -39,9 +36,7 @@ import {
 	GetPodsQuickFiltersConfig,
 	GetStatefulsetsQuickFiltersConfig,
 	GetVolumesQuickFiltersConfig,
-	InfraMonitoringEntity,
 	K8sCategories,
-	METRIC_NAMESPACE_BY_ENTITY,
 } from './constants';
 import K8sDaemonSetsList from './DaemonSets/K8sDaemonSetsList';
 import K8sDeploymentsList from './Deployments/K8sDeploymentsList';
@@ -61,7 +56,6 @@ import K8sVolumesList from './Volumes/K8sVolumesList';
 import styles from './InfraMonitoringK8s.module.scss';
 import { InfraMonitoringEvents } from 'constants/events';
 import logEvent from 'api/common/logEvent';
-import { NANO_SECOND_MULTIPLIER, useGlobalTimeStore } from 'store/globalTime';
 
 export default function InfraMonitoringK8s(): JSX.Element {
 	const [showFilters, setShowFilters] = useState(true);
@@ -75,31 +69,6 @@ export default function InfraMonitoringK8s(): JSX.Element {
 	const { currentQuery, redirectWithQueryBuilderData } = useQueryBuilder();
 	const isInitialized = useRef(false);
 
-	const selectedTime = useGlobalTimeStore((state) => state.selectedTime);
-	const getMinMaxTime = useGlobalTimeStore((state) => state.getMinMaxTime);
-	const { startUnixMilli, endUnixMilli } = useMemo(() => {
-		const { minTime, maxTime } = getMinMaxTime();
-		return {
-			startUnixMilli: Math.floor(minTime / NANO_SECOND_MULTIPLIER),
-			endUnixMilli: Math.floor(maxTime / NANO_SECOND_MULTIPLIER),
-		};
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [selectedTime, getMinMaxTime]);
-
-	const getUseFieldApis = useCallback(
-		(entity: InfraMonitoringEntity): QuickFilterCheckboxUseFieldApis => ({
-			metricNamespace: METRIC_NAMESPACE_BY_ENTITY[entity],
-			startUnixMilli,
-			endUnixMilli,
-		}),
-		[startUnixMilli, endUnixMilli],
-	);
-
-	const selectedCategoryUseFieldApis = useMemo(
-		() => getUseFieldApis(selectedCategory as InfraMonitoringEntity),
-		[getUseFieldApis, selectedCategory],
-	);
-
 	useEffect(() => {
 		if (isInitialized.current) {
 			return;
@@ -300,7 +269,6 @@ export default function InfraMonitoringK8s(): JSX.Element {
 										source={QuickFiltersSource.INFRA_MONITORING}
 										config={selectedCategoryConfig}
 										handleFilterVisibilityChange={handleFilterVisibilityChange}
-										useFieldApis={selectedCategoryUseFieldApis}
 									/>
 								)}
 							</div>

frontend/src/container/IngestionSettings/MultiIngestionSettings.tsx

@@ -48,8 +48,6 @@ import { QueryParams } from 'constants/query';
 import { initialQueryMeterWithType } from 'constants/queryBuilder';
 import ROUTES from 'constants/routes';
 import { INITIAL_ALERT_THRESHOLD_STATE } from 'container/CreateAlertV2/context/constants';
-import { EvaluationWindowPreset } from 'container/CreateAlertV2/context/resolveUrlAlertPrefill';
-import { AlertThresholdMatchType } from 'container/CreateAlertV2/context/types';
 import dayjs from 'dayjs';
 import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
 import { useGetGlobalConfig } from 'api/generated/services/global';
@@ -909,7 +907,6 @@ function MultiIngestionSettings(): JSX.Element {
 			? `[ingestion][${signal.signal}] ${keyName} has exceeded daily ingestion limit`
 			: `[ingestion][${signal.signal}] ${signal.signal} has exceeded daily ingestion limit`;
 
-		// Declare the metering prefill explicitly: "in total" + the meter window.
 		const URL = `${ROUTES.ALERTS_NEW}?${
 			QueryParams.compositeQuery
 		}=${encodeURIComponent(stringifiedQuery)}&${
@@ -918,9 +915,7 @@ function MultiIngestionSettings(): JSX.Element {
 			QueryParams.ruleName
 		}=${encodeURIComponent(ruleName)}&${
 			QueryParams.yAxisUnit
-		}=${encodeURIComponent(yAxisUnit)}&${QueryParams.matchType}=${
-			AlertThresholdMatchType.IN_TOTAL
-		}&${QueryParams.evaluationWindowPreset}=${EvaluationWindowPreset.METER}`;
+		}=${encodeURIComponent(yAxisUnit)}`;
 
 		history.push(URL);
 	};

frontend/src/container/LLMObservability/Overview/Overview.module.scss

@@ -9,4 +9,6 @@
 	:global([class*='dashboardPageHeader']) {
 		display: none;
 	}
+	// remove margin added by the hidden header to avoid extra whitespace at the top of the page
+	margin-top: calc(var(--spacing-8) * -1);
 }

frontend/src/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/components/ModelCostDrawer/ModelCostDrawer.module.scss

@@ -18,7 +18,7 @@
 	--dialog-footer-padding: var(--spacing-8) var(--spacing-12);
 
 	display: flex;
-	overflow: hidden;
+	overflow-y: auto;
 
 	// The drawer body — children render inside [data-slot='drawer-description']
 	// (this is the @signozhq drawer, not antd, so .ant-drawer-body was a no-op).
@@ -27,8 +27,6 @@
 		flex-direction: column;
 		gap: var(--spacing-12);
 		padding: var(--spacing-10) var(--spacing-12);
-		min-height: 0;
-		overflow-y: auto;
 	}
 
 	[data-slot='select-content'] {

frontend/src/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/components/ModelCostDrawer/components/ExtraPricingBuckets/ExtraPricingBuckets.module.scss

@@ -51,6 +51,7 @@
 	gap: var(--spacing-5);
 	padding: var(--spacing-6);
 	border-radius: 6px;
+	background: var(--l2-background);
 	border: 1px solid var(--l2-border);
 }
 

frontend/src/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/components/ModelCostDrawer/components/PatternEditor/PatternEditor.module.scss

@@ -9,6 +9,7 @@
 .patternBox {
 	display: flex;
 	flex-direction: column;
+	gap: var(--spacing-6);
 	padding: var(--spacing-6);
 	border-radius: 6px;
 	border: 1px solid var(--l2-border);
@@ -17,14 +18,14 @@
 .patternChips {
 	display: flex;
 	flex-wrap: wrap;
-	gap: var(--spacing-0) var(--spacing-3);
+	gap: var(--spacing-3);
+	min-height: 28px;
 }
 
 .patternChip {
 	display: inline-flex;
 	align-items: center;
 	gap: var(--spacing-2);
-	margin-bottom: var(--spacing-4);
 }
 
 .patternChipRemove {

frontend/src/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/components/ModelCostDrawer/components/SourceSelector/SourceSelector.module.scss

@@ -30,6 +30,7 @@
 		padding: var(--spacing-5) var(--spacing-6);
 		border-radius: var(--radius-2);
 		border: 1px solid transparent;
+		background: var(--l3-background);
 		margin: 0;
 		width: 100%;
 		// Include padding + border in the 100% width so the card fits inside
@@ -66,11 +67,16 @@
 
 		// Radix RadioGroupItem renders <button data-state="checked|unchecked">.
 		// Use :has() to highlight the wrapper card when its inner button is checked.
-		&:has(button[data-state='checked']) {
+		&.sourceRadioAuto:has(button[data-state='checked']) {
 			background: color-mix(in srgb, var(--accent-primary) 10%, transparent);
 			border-color: color-mix(in srgb, var(--accent-primary) 30%, transparent);
 		}
 
+		&.sourceRadioOverride:has(button[data-state='checked']) {
+			background: color-mix(in srgb, var(--accent-amber) 10%, transparent);
+			border-color: color-mix(in srgb, var(--accent-amber) 30%, transparent);
+		}
+
 		&:hover {
 			background: var(--l3-background-hover);
 		}

frontend/src/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/components/ModelCostDrawer/components/SourceSelector/SourceSelector.tsx

@@ -60,7 +60,7 @@ function SourceSelector({
 			>
 				<RadioGroupItem
 					value="auto"
-					containerClassName={styles.sourceRadio}
+					containerClassName={cx(styles.sourceRadio, styles.sourceRadioAuto)}
 					testId="drawer-source-auto"
 					disabled={disableAuto}
 				>
@@ -73,7 +73,7 @@ function SourceSelector({
 				</RadioGroupItem>
 				<RadioGroupItem
 					value="override"
-					containerClassName={styles.sourceRadio}
+					containerClassName={cx(styles.sourceRadio, styles.sourceRadioOverride)}
 					testId="drawer-source-override"
 				>
 					<div className={styles.sourceRadioTitle}>User override</div>

frontend/src/container/LLMObservability/Settings/ModelPricing/UnpricedModelsTab/UnpricedModelsTab.module.scss

@@ -13,7 +13,6 @@
 	border: 1px solid color-mix(in srgb, var(--bg-amber-400) 30%, transparent);
 	background: color-mix(in srgb, var(--bg-amber-400) 8%, transparent);
 	color: var(--bg-amber-300, var(--bg-amber-400));
-	margin-top: var(--spacing-4);
 }
 
 .bannerIcon {

frontend/src/container/LLMObservability/__tests__/LLMObservability.test.tsx

@@ -37,7 +37,7 @@ describe('LLMObservability (integration)', () => {
 
 	it('renders the overview panel and the tab bar on the overview route', () => {
 		render(<LLMObservability />, undefined, {
-			initialRoute: ROUTES.AI_OBSERVABILITY_OVERVIEW,
+			initialRoute: ROUTES.LLM_OBSERVABILITY_OVERVIEW,
 		});
 
 		expect(screen.getByTestId('llm-observability-tabs')).toBeInTheDocument();
@@ -55,32 +55,32 @@ describe('LLMObservability (integration)', () => {
 	it('navigates to the configuration route when the Model pricing tab is clicked', async () => {
 		const user = userEvent.setup({ pointerEventsCheck: 0 });
 		render(<LLMObservability />, undefined, {
-			initialRoute: ROUTES.AI_OBSERVABILITY_OVERVIEW,
+			initialRoute: ROUTES.LLM_OBSERVABILITY_OVERVIEW,
 		});
 
 		await user.click(screen.getByRole('tab', { name: 'Model pricing' }));
 
 		expect(safeNavigateMock).toHaveBeenCalledWith(
-			ROUTES.AI_OBSERVABILITY_CONFIGURATION,
+			ROUTES.LLM_OBSERVABILITY_CONFIGURATION,
 		);
 	});
 
 	it('navigates to the attribute mapping route when that tab is clicked', async () => {
 		const user = userEvent.setup({ pointerEventsCheck: 0 });
 		render(<LLMObservability />, undefined, {
-			initialRoute: ROUTES.AI_OBSERVABILITY_OVERVIEW,
+			initialRoute: ROUTES.LLM_OBSERVABILITY_OVERVIEW,
 		});
 
 		await user.click(screen.getByRole('tab', { name: 'Attribute Mapping' }));
 
 		expect(safeNavigateMock).toHaveBeenCalledWith(
-			ROUTES.AI_OBSERVABILITY_ATTRIBUTE_MAPPING,
+			ROUTES.LLM_OBSERVABILITY_ATTRIBUTE_MAPPING,
 		);
 	});
 
 	it('renders the attribute mapping page on the attribute mapping route', () => {
 		render(<LLMObservability />, undefined, {
-			initialRoute: ROUTES.AI_OBSERVABILITY_ATTRIBUTE_MAPPING,
+			initialRoute: ROUTES.LLM_OBSERVABILITY_ATTRIBUTE_MAPPING,
 		});
 
 		expect(
@@ -91,7 +91,7 @@ describe('LLMObservability (integration)', () => {
 	it('renders the model-pricing page on the configuration route', async () => {
 		setupList();
 		render(<LLMObservability />, undefined, {
-			initialRoute: ROUTES.AI_OBSERVABILITY_CONFIGURATION,
+			initialRoute: ROUTES.LLM_OBSERVABILITY_CONFIGURATION,
 		});
 
 		await waitFor(() =>

frontend/src/container/LLMObservability/hooks/useLLMObservabilityTabs.tsx

@@ -8,9 +8,9 @@ import LLMObservabilityAttributeMapping from '../AttributeMapping/LLMObservabili
 import Overview from '../Overview/Overview';
 import LLMObservabilityModelPricing from '../Settings/ModelPricing/LLMObservabilityModelPricing';
 
-const OVERVIEW_KEY = ROUTES.AI_OBSERVABILITY_OVERVIEW;
-const CONFIGURATION_KEY = ROUTES.AI_OBSERVABILITY_CONFIGURATION;
-const ATTRIBUTE_MAPPING_KEY = ROUTES.AI_OBSERVABILITY_ATTRIBUTE_MAPPING;
+const OVERVIEW_KEY = ROUTES.LLM_OBSERVABILITY_OVERVIEW;
+const CONFIGURATION_KEY = ROUTES.LLM_OBSERVABILITY_CONFIGURATION;
+const ATTRIBUTE_MAPPING_KEY = ROUTES.LLM_OBSERVABILITY_ATTRIBUTE_MAPPING;
 
 interface UseLLMObservabilityTabsResult {
 	items: TabItemProps[];

frontend/src/container/LogDetailedView/TableView.styles.scss

@@ -20,7 +20,6 @@
 		.ant-table-cell {
 			border: 1px solid var(--l1-border);
 			background: var(--l2-background);
-			vertical-align: top;
 		}
 
 		.attribute-name {
@@ -34,12 +33,12 @@
 		.attribute-pin {
 			cursor: pointer;
 
-			padding: 14px 8px 8px;
-			vertical-align: top;
+			padding: 0;
+			vertical-align: middle;
 			text-align: center;
 
 			.log-attribute-pin {
-				padding: 0;
+				padding: 8px;
 
 				display: flex;
 				justify-content: center;

frontend/src/container/LogDetailedView/TableView/TableViewActions.styles.scss

@@ -15,13 +15,11 @@
 	.ant-tree-node-content-wrapper {
 		user-select: text !important;
 		cursor: text !important;
-		min-width: 0;
 	}
 
 	.ant-tree-title {
 		user-select: text !important;
 		cursor: text !important;
-		overflow-wrap: anywhere;
 	}
 }
 

frontend/src/container/LogsExplorerViews/LogsExplorerViews.styles.scss

@@ -182,14 +182,6 @@
 				flex: 1;
 				min-height: 0;
 				overflow-y: visible;
-
-				.table-view-container-header {
-					display: flex;
-					justify-content: flex-end;
-					align-items: center;
-					padding: 12px;
-					flex-shrink: 0;
-				}
 			}
 
 			.time-series-view-container {

frontend/src/container/LogsExplorerViews/index.tsx

@@ -18,18 +18,13 @@ import { ENTITY_VERSION_V5 } from 'constants/app';
 import { LOCALSTORAGE } from 'constants/localStorage';
 import { AVAILABLE_EXPORT_PANEL_TYPES } from 'constants/panelTypes';
 import { QueryParams } from 'constants/query';
-import {
-	initialFilters,
-	initialQueriesMap,
-	PANEL_TYPES,
-} from 'constants/queryBuilder';
+import { initialFilters, PANEL_TYPES } from 'constants/queryBuilder';
 import { DEFAULT_PER_PAGE_VALUE } from 'container/Controls/config';
 import ExplorerOptionWrapper from 'container/ExplorerOptions/ExplorerOptionWrapper';
 import { ChangeViewFunctionType } from 'container/ExplorerOptions/types';
 import GoToTop from 'container/GoToTop';
 import LogsExplorerChart from 'container/LogsExplorerChart';
 import LogsExplorerList from 'container/LogsExplorerList';
-import ExportMenu from 'components/ExportMenu/ExportMenu';
 import LogsExplorerTable from 'container/LogsExplorerTable';
 import {
 	getExportQueryData,
@@ -489,16 +484,6 @@ function LogsExplorerViewsContainer({
 					)}
 					{selectedPanelType === PANEL_TYPES.TABLE && !showLiveLogs && (
 						<div className="table-view-container">
-							{data && !isError && (
-								<div className="table-view-container-header">
-									<ExportMenu
-										dataSource={DataSource.LOGS}
-										data={data}
-										query={stagedQuery || initialQueriesMap.metrics}
-										fileName="logs-table"
-									/>
-								</div>
-							)}
 							<LogsExplorerTable
 								data={
 									(data?.payload?.data?.newResult?.data?.result ||

frontend/src/container/OnboardingV2Container/onboarding-configs/onboarding-config-with-links.ts

@@ -5262,24 +5262,6 @@ const onboardingConfigWithLinks = [
 			],
 		},
 	},
-	{
-		dataSource: 'temporal-cloud-metrics',
-		label: 'Temporal Cloud Metrics',
-		imgUrl: temporalUrl,
-		tags: ['metrics'],
-		module: 'metrics',
-		relatedSearchKeywords: [
-			'metrics',
-			'integrations',
-			'temporal',
-			'temporal cloud',
-			'temporal cloud metrics',
-			'temporal metrics',
-			'openmetrics',
-			'prometheus',
-		],
-		link: '/docs/integrations/temporal-cloud-metrics/',
-	},
 	{
 		dataSource: 'temporal',
 		label: 'Temporal',
@@ -5291,6 +5273,9 @@ const onboardingConfigWithLinks = [
 			'application performance monitoring',
 			'integrations',
 			'temporal',
+			'temporal cloud',
+			'temporal logs',
+			'temporal metrics',
 			'temporal traces',
 			'traces',
 			'tracing',
@@ -5299,6 +5284,12 @@ const onboardingConfigWithLinks = [
 			desc: 'What are you using ?',
 			type: 'select',
 			options: [
+				{
+					key: 'temporal-cloud',
+					label: 'Cloud Metrics',
+					imgUrl: temporalUrl,
+					link: '/docs/integrations/temporal-cloud-metrics/',
+				},
 				{
 					key: 'temporal-golang',
 					label: 'Go',

frontend/src/container/QueryBuilder/filters/AggregatorFilter/AggregatorFilter.tsx

@@ -22,7 +22,7 @@ import {
 import { MetricAggregation } from 'types/api/v5/queryRange';
 import { DataSource } from 'types/common/queryBuilder';
 import { ExtendedSelectOption } from 'types/common/select';
-import { useSelectPopupContainer } from 'utils/selectPopupContainer';
+import { popupContainer } from 'utils/selectPopupContainer';
 
 import { selectStyle } from '../QueryBuilderSearch/config';
 import OptionRenderer from '../QueryBuilderSearch/OptionRenderer';
@@ -39,7 +39,6 @@ export const AggregatorFilter = memo(function AggregatorFilter({
 	signalSource,
 	setAttributeKeys,
 }: AgregatorFilterProps): JSX.Element {
-	const getPopupContainer = useSelectPopupContainer();
 	const queryClient = useQueryClient();
 	const [optionsData, setOptionsData] = useState<ExtendedSelectOption[]>([]);
 
@@ -290,7 +289,7 @@ export const AggregatorFilter = memo(function AggregatorFilter({
 
 	return (
 		<AutoComplete
-			getPopupContainer={getPopupContainer}
+			getPopupContainer={popupContainer}
 			placeholder={getPlaceholder()}
 			style={selectStyle}
 			filterOption={false}

frontend/src/container/QueryBuilder/filters/BuilderUnitsFilter/BuilderUnits.tsx

@@ -2,7 +2,7 @@ import { Select, SelectProps, Space } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import { getCategorySelectOptionByName } from 'container/NewWidget/RightContainer/alertFomatCategories';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
-import { useSelectPopupContainer } from 'utils/selectPopupContainer';
+import { popupContainer } from 'utils/selectPopupContainer';
 
 import { categoryToSupport } from './config';
 import { selectStyles } from './styles';
@@ -13,7 +13,6 @@ function BuilderUnitsFilter({
 	onChange,
 	yAxisUnit,
 }: IBuilderUnitsFilterProps): JSX.Element {
-	const getPopupContainer = useSelectPopupContainer();
 	const { currentQuery, handleOnUnitsChange } = useQueryBuilder();
 
 	const selectedValue = yAxisUnit || currentQuery?.unit;
@@ -37,7 +36,7 @@ function BuilderUnitsFilter({
 				Y-axis unit
 			</Typography.Text>
 			<Select
-				getPopupContainer={getPopupContainer}
+				getPopupContainer={popupContainer}
 				style={selectStyles}
 				onChange={onChangeHandler}
 				value={selectedValue}

frontend/src/container/QueryBuilder/filters/Formula/Having/HavingFilter.tsx

@@ -9,13 +9,12 @@ import {
 } from 'lib/query/transformQueryBuilderData';
 import { Having, HavingForm } from 'types/api/queryBuilder/queryBuilderData';
 import { SelectOption } from 'types/common/select';
-import { useSelectPopupContainer } from 'utils/selectPopupContainer';
+import { popupContainer } from 'utils/selectPopupContainer';
 
 import { getHavingObject, isValidHavingValue } from '../../utils';
 import { HavingFilterProps, HavingTagRenderProps } from './types';
 
 function HavingFilter({ formula, onChange }: HavingFilterProps): JSX.Element {
-	const getPopupContainer = useSelectPopupContainer();
 	const { having } = formula;
 	const [searchText, setSearchText] = useState<string>('');
 	const [localValues, setLocalValues] = useState<string[]>([]);
@@ -172,7 +171,7 @@ function HavingFilter({ formula, onChange }: HavingFilterProps): JSX.Element {
 
 	return (
 		<Select
-			getPopupContainer={getPopupContainer}
+			getPopupContainer={popupContainer}
 			autoClearSearchValue={false}
 			mode="multiple"
 			onSearch={handleSearch}

frontend/src/container/QueryBuilder/filters/Formula/OrderBy/OrderByFilter.tsx

@@ -2,7 +2,7 @@ import { useMemo } from 'react';
 import { Select, Spin } from 'antd';
 import { useGetAggregateKeys } from 'hooks/queryBuilder/useGetAggregateKeys';
 import { MetricAggregateOperator } from 'types/common/queryBuilder';
-import { useSelectPopupContainer } from 'utils/selectPopupContainer';
+import { popupContainer } from 'utils/selectPopupContainer';
 
 import { selectStyle } from '../../QueryBuilderSearch/config';
 import { OrderByProps } from './types';
@@ -13,7 +13,6 @@ function OrderByFilter({
 	onChange,
 	query,
 }: OrderByProps): JSX.Element {
-	const getPopupContainer = useSelectPopupContainer();
 	const {
 		debouncedSearchText,
 		createOptions,
@@ -65,7 +64,7 @@ function OrderByFilter({
 
 	return (
 		<Select
-			getPopupContainer={getPopupContainer}
+			getPopupContainer={popupContainer}
 			mode="tags"
 			style={selectStyle}
 			onSearch={handleSearchKeys}

frontend/src/container/QueryBuilder/filters/GroupByFilter/GroupByFilter.tsx

@@ -21,7 +21,7 @@ import { isEqual, uniqWith } from 'lodash-es';
 import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { DataSource } from 'types/common/queryBuilder';
 import { SelectOption } from 'types/common/select';
-import { useSelectPopupContainer } from 'utils/selectPopupContainer';
+import { popupContainer } from 'utils/selectPopupContainer';
 
 import { selectStyle } from '../QueryBuilderSearch/config';
 import OptionRenderer from '../QueryBuilderSearch/OptionRenderer';
@@ -33,7 +33,6 @@ export const GroupByFilter = memo(function GroupByFilter({
 	disabled,
 	signalSource,
 }: GroupByFilterProps): JSX.Element {
-	const getPopupContainer = useSelectPopupContainer();
 	const queryClient = useQueryClient();
 	const [searchText, setSearchText] = useState<string>('');
 	const [optionsData, setOptionsData] = useState<
@@ -175,7 +174,7 @@ export const GroupByFilter = memo(function GroupByFilter({
 
 	return (
 		<Select
-			getPopupContainer={getPopupContainer}
+			getPopupContainer={popupContainer}
 			mode="tags"
 			style={selectStyle}
 			onSearch={handleSearchKeys}

frontend/src/container/QueryBuilder/filters/HavingFilter/HavingFilter.tsx

@@ -16,7 +16,7 @@ import {
 import { Having, HavingForm } from 'types/api/queryBuilder/queryBuilderData';
 import { DataSource } from 'types/common/queryBuilder';
 import { SelectOption } from 'types/common/select';
-import { useSelectPopupContainer } from 'utils/selectPopupContainer';
+import { popupContainer } from 'utils/selectPopupContainer';
 
 import { getHavingObject, isValidHavingValue } from '../utils';
 // ** Types
@@ -27,7 +27,6 @@ export function HavingFilter({
 	query,
 	onChange,
 }: HavingFilterProps): JSX.Element {
-	const getPopupContainer = useSelectPopupContainer();
 	const { having } = query;
 	const [searchText, setSearchText] = useState<string>('');
 	const [options, setOptions] = useState<SelectOption<string, string>[]>([]);
@@ -232,7 +231,7 @@ export function HavingFilter({
 	return (
 		<>
 			<Select
-				getPopupContainer={getPopupContainer}
+				getPopupContainer={popupContainer}
 				autoClearSearchValue={false}
 				mode="multiple"
 				onSearch={handleSearch}

frontend/src/container/QueryBuilder/filters/MetricNameSelector/MetricNameSelector.tsx

@@ -14,7 +14,7 @@ import {
 import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
 import { MetricAggregation } from 'types/api/v5/queryRange';
 import { ExtendedSelectOption } from 'types/common/select';
-import { useSelectPopupContainer } from 'utils/selectPopupContainer';
+import { popupContainer } from 'utils/selectPopupContainer';
 
 import { selectStyle } from '../QueryBuilderSearch/config';
 import OptionRenderer from '../QueryBuilderSearch/OptionRenderer';
@@ -85,7 +85,6 @@ export const MetricNameSelector = memo(function MetricNameSelector({
 	signalSource,
 	'data-testid': dataTestId,
 }: MetricNameSelectorProps): JSX.Element {
-	const getPopupContainer = useSelectPopupContainer();
 	const currentMetricName =
 		(query.aggregations?.[0] as MetricAggregation)?.metricName ||
 		query.aggregateAttribute?.key ||
@@ -273,7 +272,7 @@ export const MetricNameSelector = memo(function MetricNameSelector({
 	return (
 		<AutoComplete
 			className="metric-name-selector"
-			getPopupContainer={getPopupContainer}
+			getPopupContainer={popupContainer}
 			style={selectStyle}
 			filterOption={false}
 			placeholder={placeholder}

frontend/src/container/QueryBuilder/filters/OrderByFilter/OrderByFilter.tsx

@@ -3,7 +3,7 @@ import { Select, Spin } from 'antd';
 import { useGetAggregateKeys } from 'hooks/queryBuilder/useGetAggregateKeys';
 import { DataSource, MetricAggregateOperator } from 'types/common/queryBuilder';
 import { getParsedAggregationOptionsForOrderBy } from 'utils/aggregationConverter';
-import { useSelectPopupContainer } from 'utils/selectPopupContainer';
+import { popupContainer } from 'utils/selectPopupContainer';
 
 import { selectStyle } from '../QueryBuilderSearch/config';
 import { OrderByFilterProps } from './OrderByFilter.interfaces';
@@ -16,7 +16,6 @@ export function OrderByFilter({
 	entityVersion,
 	isNewQueryV2 = false,
 }: OrderByFilterProps): JSX.Element {
-	const getPopupContainer = useSelectPopupContainer();
 	const {
 		debouncedSearchText,
 		selectedValue,
@@ -79,7 +78,7 @@ export function OrderByFilter({
 
 	return (
 		<Select
-			getPopupContainer={getPopupContainer}
+			getPopupContainer={popupContainer}
 			mode="tags"
 			style={selectStyle}
 			onSearch={handleSearchKeys}

frontend/src/container/QueryBuilder/filters/QueryBuilderSearch/index.tsx

@@ -50,7 +50,7 @@ import {
 } from 'types/api/queryBuilder/queryBuilderData';
 import { DataSource } from 'types/common/queryBuilder';
 import { getUserOperatingSystem, UserOperatingSystem } from 'utils/getUserOS';
-import { useSelectPopupContainer } from 'utils/selectPopupContainer';
+import { popupContainer } from 'utils/selectPopupContainer';
 import { v4 as uuid } from 'uuid';
 
 import { FeatureKeys } from '../../../../constants/features';
@@ -95,7 +95,6 @@ function QueryBuilderSearch({
 	disableNavigationShortcuts,
 	entity,
 }: QueryBuilderSearchProps): JSX.Element {
-	const getPopupContainer = useSelectPopupContainer();
 	const { pathname } = useLocation();
 	const isLogsExplorerPage = useMemo(
 		() => pathname === ROUTES.LOGS_EXPLORER,
@@ -398,7 +397,7 @@ function QueryBuilderSearch({
 			<Select
 				data-testid={'qb-search-select'}
 				ref={selectRef}
-				getPopupContainer={getPopupContainer}
+				getPopupContainer={popupContainer}
 				transitionName=""
 				choiceTransitionName=""
 				virtual={false}

frontend/src/container/QueryBuilder/filters/QueryBuilderSearchV2/QueryBuilderSearchV2.tsx

@@ -50,7 +50,7 @@ import {
 	TagFilter,
 } from 'types/api/queryBuilder/queryBuilderData';
 import { DataSource } from 'types/common/queryBuilder';
-import { useSelectPopupContainer } from 'utils/selectPopupContainer';
+import { popupContainer } from 'utils/selectPopupContainer';
 import { v4 as uuid } from 'uuid';
 
 import { selectStyle } from '../QueryBuilderSearch/config';
@@ -157,8 +157,6 @@ function QueryBuilderSearchV2(
 		selectProps,
 	} = props;
 
-	const getPopupContainer = useSelectPopupContainer();
-
 	const { registerShortcut, deregisterShortcut } = useKeyboardHotkeys();
 
 	const { handleRunQuery, currentQuery } = useQueryBuilder();
@@ -991,7 +989,7 @@ function QueryBuilderSearchV2(
 				{...selectProps}
 				data-testid={'qb-search-select'}
 				ref={selectRef}
-				{...(hasPopupContainer ? { getPopupContainer } : {})}
+				{...(hasPopupContainer ? { getPopupContainer: popupContainer } : {})}
 				{...(maxTagCount ? { maxTagCount } : {})}
 				key={queryTags.join('.')}
 				virtual={false}

frontend/src/container/SideNav/SideNav.tsx

@@ -47,7 +47,6 @@ import { useKeyboardHotkeys } from 'hooks/hotkeys/useKeyboardHotkeys';
 import useComponentPermission from 'hooks/useComponentPermission';
 import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
 import { useIsAIAssistantEnabled } from 'hooks/useIsAIAssistantEnabled';
-import { useIsAIObservabilityEnabled } from 'hooks/useIsAIObservabilityEnabled';
 import { useNotifications } from 'hooks/useNotifications';
 import history from 'lib/history';
 import { isArray } from 'lodash-es';
@@ -254,7 +253,6 @@ function SideNav({ isPinned }: { isPinned: boolean }): JSX.Element {
 	const isAdmin = user.role === USER_ROLES.ADMIN;
 	const isEditor = user.role === USER_ROLES.EDITOR;
 	const isAIAssistantEnabled = useIsAIAssistantEnabled();
-	const isAIObservabilityEnabled = useIsAIObservabilityEnabled();
 	const aiAssistantActiveConversationId = useAIAssistantStore(
 		(s) => s.activeConversationId,
 	);
@@ -290,22 +288,15 @@ function SideNav({ isPinned }: { isPinned: boolean }): JSX.Element {
 		const shouldShowIntegrationsValue =
 			(isCloudUser || isEnterpriseSelfHostedUser) && (isAdmin || isEditor);
 
-		const isEnabledForItem = (item: SidebarItem): boolean | undefined => {
-			if (item.key === ROUTES.INTEGRATIONS) {
-				return shouldShowIntegrationsValue;
-			}
-			if (item.key === ROUTES.AI_OBSERVABILITY_OVERVIEW) {
-				return isAIObservabilityEnabled;
-			}
-			return item.isEnabled;
-		};
-
 		return defaultMoreMenuItems.map((item) => ({
 			...item,
 			isPinned: computedPinnedMenuItems.some(
 				(pinned) => pinned.itemKey === item.itemKey,
 			),
-			isEnabled: isEnabledForItem(item),
+			isEnabled:
+				item.key === ROUTES.INTEGRATIONS
+					? shouldShowIntegrationsValue
+					: item.isEnabled,
 		}));
 	}, [
 		computedPinnedMenuItems,
@@ -313,7 +304,6 @@ function SideNav({ isPinned }: { isPinned: boolean }): JSX.Element {
 		isEnterpriseSelfHostedUser,
 		isAdmin,
 		isEditor,
-		isAIObservabilityEnabled,
 	]);
 
 	// Track if we've done the initial sync (to avoid overwriting user actions during session)

frontend/src/container/SideNav/menuItems.tsx

@@ -36,7 +36,6 @@ import {
 	UserPlus,
 	Users,
 	Binoculars,
-	Brain,
 } from '@signozhq/icons';
 
 import {
@@ -289,16 +288,6 @@ export const defaultMoreMenuItems: SidebarItem[] = [
 		isEnabled: true,
 		itemKey: 'external-apis',
 	},
-	{
-		key: ROUTES.AI_OBSERVABILITY_OVERVIEW,
-		label: 'AI Observability',
-		icon: <Brain size={16} />,
-		isNew: true,
-		// Gated behind the `enable_ai_observability` feature flag in
-		// SideNav's `computedSecondaryMenuItems`; disabled by default.
-		isEnabled: false,
-		itemKey: 'ai-observability',
-	},
 	{
 		key: ROUTES.METER,
 		label: 'Cost Meter',
@@ -564,9 +553,7 @@ export const getUserSettingsDropdownMenuItems = ({
 		},
 	].filter(Boolean);
 
-/** Mapping of some newly added routes and their corresponding active sidebar menu key
-    This is used to highlight the correct menu item when the user navigates to a new route
-**/
+/** Mapping of some newly added routes and their corresponding active sidebar menu key */
 export const NEW_ROUTES_MENU_ITEM_KEY_MAP: Record<string, string> = {
 	[ROUTES.TRACE]: ROUTES.TRACES_EXPLORER,
 	[ROUTES.TRACE_EXPLORER]: ROUTES.TRACES_EXPLORER,
@@ -576,7 +563,6 @@ export const NEW_ROUTES_MENU_ITEM_KEY_MAP: Record<string, string> = {
 		ROUTES.INFRASTRUCTURE_MONITORING_HOSTS,
 	[ROUTES.API_MONITORING_BASE]: ROUTES.API_MONITORING,
 	[ROUTES.MESSAGING_QUEUES_BASE]: ROUTES.MESSAGING_QUEUES_OVERVIEW,
-	[ROUTES.AI_OBSERVABILITY_BASE]: ROUTES.AI_OBSERVABILITY_OVERVIEW,
 	// `getActiveMenuKeyFromPath` strips the URL down to its first segment;
 	// `/ai-assistant/<id>` reduces to `/ai-assistant`, which we point back
 	// to the AI Assistant menu item's concrete key.

frontend/src/container/TimeSeriesView/TimeSeriesView.tsx

@@ -48,7 +48,7 @@ import { GlobalReducer } from 'types/reducer/globalTime';
 import uPlot from 'uplot';
 import { getTimeRange } from 'utils/getTimeRange';
 
-import ExportMenu from 'components/ExportMenu/ExportMenu';
+import TimeseriesExportMenu from './TimeseriesExportMenu';
 
 import './TimeSeriesView.styles.scss';
 
@@ -265,11 +265,12 @@ function TimeSeriesView({
 						)}
 					</div>
 					{showExport && data?.rawV5Response && (
-						<ExportMenu
+						<TimeseriesExportMenu
 							dataSource={dataSource}
 							yAxisUnit={yAxisUnit}
-							data={data}
+							queryResponse={data.rawV5Response}
 							query={currentQuery}
+							legendMap={data.legendMap}
 							fileName={`${dataSource}-timeseries`}
 						/>
 					)}

frontend/src/container/TimeSeriesView/TimeseriesExportMenu.styles.scss

@@ -1,4 +1,4 @@
-.export-menu-popover {
+.timeseries-export-popover {
 	width: 240px;
 	padding: 0 12px 12px 12px;
 

frontend/src/container/TimeSeriesView/TimeseriesExportMenu.tsx

@@ -4,43 +4,42 @@ import { Popover, PopoverContent, PopoverTrigger } from '@signozhq/ui/popover';
 import { RadioGroup, RadioGroupItem } from '@signozhq/ui/radio-group';
 import { TooltipSimple } from '@signozhq/ui/tooltip';
 import { Typography } from '@signozhq/ui/typography';
-import {
-	ClientExportData,
-	useClientExport,
-} from 'hooks/useExportData/useClientExport';
+import { useClientExport } from 'hooks/useExportData/useClientExport';
 import { ExportFormat } from 'lib/exportData/types';
 import { useCallback, useState } from 'react';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';
+import { QueryRangeResponseV5 } from 'types/api/v5/queryRange';
 import { DataSource } from 'types/common/queryBuilder';
 
-import './ExportMenu.styles.scss';
+import './TimeseriesExportMenu.styles.scss';
 
-interface ExportMenuProps {
+interface TimeseriesExportMenuProps {
 	dataSource: DataSource;
-	// The queryRange response object the view holds — the hook picks the
-	// serializer (timeseries / table) from what it carries.
-	data: ClientExportData;
+	queryResponse: QueryRangeResponseV5;
 	query?: Query;
 	yAxisUnit?: string;
+	legendMap?: Record<string, string>;
 	fileName?: string;
 }
 
-// Download menu for in-memory query results (client-side serialization).
+// Download menu for in-memory timeseries data (client-side serialization).
 // The raw/list backend export keeps its own menu in DownloadOptionsMenu.
-export default function ExportMenu({
+export default function TimeseriesExportMenu({
 	dataSource,
-	data,
+	queryResponse,
 	query,
 	yAxisUnit,
+	legendMap,
 	fileName,
-}: ExportMenuProps): JSX.Element {
+}: TimeseriesExportMenuProps): JSX.Element {
 	const [exportFormat, setExportFormat] = useState<string>(ExportFormat.Csv);
 	const [isPopoverOpen, setIsPopoverOpen] = useState<boolean>(false);
 
 	const { isExporting, handleExport: handleClientExport } = useClientExport({
-		data,
+		response: queryResponse,
 		query,
 		yAxisUnit,
+		legendMap,
 		fileName,
 	});
 
@@ -58,7 +57,7 @@ export default function ExportMenu({
 						color="secondary"
 						size="icon"
 						aria-label="Download"
-						data-testid={`export-menu-${dataSource}`}
+						data-testid={`timeseries-export-${dataSource}`}
 						disabled={isExporting}
 						loading={isExporting}
 					>
@@ -66,7 +65,7 @@ export default function ExportMenu({
 					</Button>
 				</PopoverTrigger>
 			</TooltipSimple>
-			<PopoverContent align="end" className="export-menu-popover">
+			<PopoverContent align="end" className="timeseries-export-popover">
 				<div className="export-format">
 					<Typography.Text className="title">FORMAT</Typography.Text>
 					<RadioGroup value={exportFormat} onChange={setExportFormat}>

frontend/src/container/TimeSeriesView/__tests__/TimeSeriesView.test.tsx

@@ -13,7 +13,7 @@ jest.mock('components/Uplot', () => ({
 	default: (): JSX.Element => <div data-testid="uplot-chart" />,
 }));
 
-jest.mock('components/ExportMenu/ExportMenu', () => ({
+jest.mock('../TimeseriesExportMenu', () => ({
 	__esModule: true,
 	default: (): JSX.Element => <div data-testid="timeseries-export-menu" />,
 }));

frontend/src/container/TimeSeriesView/__tests__/TimeseriesExportMenu.test.tsx

@@ -1,8 +1,8 @@
-import { MetricQueryRangeSuccessResponse } from 'types/api/metrics/getQueryRange';
 import { fireEvent, render, screen } from 'tests/test-utils';
+import { QueryRangeResponseV5 } from 'types/api/v5/queryRange';
 import { DataSource } from 'types/common/queryBuilder';
 
-import ExportMenu from '../ExportMenu';
+import TimeseriesExportMenu from '../TimeseriesExportMenu';
 
 const mockHandleExport = jest.fn();
 let mockIsExporting = false;
@@ -14,26 +14,25 @@ jest.mock('hooks/useExportData/useClientExport', () => ({
 	}),
 }));
 
-const data = {
-	statusCode: 200,
-	error: null,
-	message: '',
-	payload: { data: { result: [], resultType: 'time_series' } },
-} as unknown as MetricQueryRangeSuccessResponse;
+const response = {
+	type: 'time_series',
+	data: { results: [] },
+	meta: {},
+} as unknown as QueryRangeResponseV5;
 
-const TEST_ID = `export-menu-${DataSource.LOGS}`;
+const TEST_ID = `timeseries-export-${DataSource.LOGS}`;
 
 function renderMenu(): void {
 	render(
-		<ExportMenu
+		<TimeseriesExportMenu
 			dataSource={DataSource.LOGS}
-			data={data}
+			queryResponse={response}
 			fileName="logs-timeseries"
 		/>,
 	);
 }
 
-describe('ExportMenu', () => {
+describe('TimeseriesExportMenu', () => {
 	beforeEach(() => {
 		mockHandleExport.mockReset();
 		mockIsExporting = false;

frontend/src/container/TopNav/DateTimeSelectionV2/constants.ts

@@ -203,9 +203,9 @@ export const routesToSkip = [
 	ROUTES.METER_EXPLORER_VIEWS,
 	ROUTES.METRICS_EXPLORER_VOLUME_CONTROL,
 	ROUTES.SOMETHING_WENT_WRONG,
-	ROUTES.AI_OBSERVABILITY_OVERVIEW,
-	ROUTES.AI_OBSERVABILITY_CONFIGURATION,
-	ROUTES.AI_OBSERVABILITY_ATTRIBUTE_MAPPING,
+	ROUTES.LLM_OBSERVABILITY_OVERVIEW,
+	ROUTES.LLM_OBSERVABILITY_CONFIGURATION,
+	ROUTES.LLM_OBSERVABILITY_ATTRIBUTE_MAPPING,
 ];
 
 export const routesToDisable = [ROUTES.LOGS_EXPLORER, ROUTES.LIVE_LOGS];

frontend/src/container/TracesExplorer/TableView/TableView.styles.scss

@@ -1,7 +0,0 @@
-.traces-table-view-header {
-	display: flex;
-	justify-content: flex-end;
-	align-items: center;
-	padding: 12px;
-	flex-shrink: 0;
-}

frontend/src/container/TracesExplorer/TableView/index.tsx

@@ -10,7 +10,6 @@ import {
 import { useSelector } from 'react-redux';
 import { Space } from 'antd';
 import ErrorInPlace from 'components/ErrorInPlace/ErrorInPlace';
-import ExportMenu from 'components/ExportMenu/ExportMenu';
 import { ENTITY_VERSION_V5 } from 'constants/app';
 import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
@@ -21,11 +20,8 @@ import { AppState } from 'store/reducers';
 import { Warning } from 'types/api';
 import APIError from 'types/api/error';
 import { QueryDataV3 } from 'types/api/widgets/getQuery';
-import { DataSource } from 'types/common/queryBuilder';
 import { GlobalReducer } from 'types/reducer/globalTime';
 
-import './TableView.styles.scss';
-
 function TableView({
 	setWarning,
 	setIsLoadingQueries,
@@ -101,16 +97,6 @@ function TableView({
 	return (
 		<Space.Compact block direction="vertical">
 			{isError && error && <ErrorInPlace error={error as APIError} />}
-			{!isError && data && (
-				<div className="traces-table-view-header">
-					<ExportMenu
-						dataSource={DataSource.TRACES}
-						data={data}
-						query={stagedQuery || initialQueriesMap.traces}
-						fileName="traces-table"
-					/>
-				</div>
-			)}
 			{!isError && (
 				<QueryTable
 					query={stagedQuery || initialQueriesMap.traces}

frontend/src/hooks/useExportData/__tests__/useClientExport.test.ts

@@ -4,8 +4,7 @@ import {
 	getTimestampedFileName,
 } from 'lib/exportData/downloadFile';
 import { ExportFormat } from 'lib/exportData/types';
-import { MetricQueryRangeSuccessResponse } from 'types/api/metrics/getQueryRange';
-import { Query } from 'types/api/queryBuilder/queryBuilderData';
+import { QueryRangeResponseV5 } from 'types/api/v5/queryRange';
 
 import { useClientExport } from '../useClientExport';
 
@@ -25,87 +24,31 @@ jest.mock('antd', () => {
 
 const mockDownloadFile = downloadFile as jest.Mock;
 
-const query = {
-	queryType: 'builder',
-	builder: {
-		queryData: [
-			{
-				queryName: 'A',
-				dataSource: 'logs',
-				aggregations: [{ expression: 'count()' }],
-				groupBy: [],
-				legend: '',
-			},
-		],
-		queryFormulas: [],
-	},
-} as unknown as Query;
-
-function timeSeriesData(): MetricQueryRangeSuccessResponse {
+function timeSeriesResponse(): QueryRangeResponseV5 {
 	return {
-		statusCode: 200,
-		error: null,
-		message: '',
-		payload: { data: { result: [], resultType: 'time_series' } },
-		legendMap: { A: '{{service}}' },
-		rawV5Response: {
-			type: 'time_series',
-			data: {
-				results: [
-					{
-						queryName: 'A',
-						aggregations: [
-							{
-								index: 0,
-								alias: '',
-								meta: {},
-								series: [
-									{
-										labels: [{ key: { name: 'service' }, value: 'a' }],
-										values: [{ timestamp: 1000, value: 12 }],
-									},
-								],
-							},
-						],
-					},
-				],
-			},
-			meta: {},
-		},
-	} as unknown as MetricQueryRangeSuccessResponse;
-}
-
-function scalarData(): MetricQueryRangeSuccessResponse {
-	return {
-		statusCode: 200,
-		error: null,
-		message: '',
-		payload: {
-			data: {
-				resultType: 'scalar',
-				result: [
-					{
-						queryName: 'A',
-						legend: '',
-						series: null,
-						list: null,
-						table: {
-							columns: [
+		type: 'time_series',
+		data: {
+			results: [
+				{
+					queryName: 'A',
+					aggregations: [
+						{
+							index: 0,
+							alias: '',
+							meta: {},
+							series: [
 								{
-									name: 'service.name',
-									id: 'service.name',
-									queryName: 'A',
-									isValueColumn: false,
+									labels: [{ key: { name: 'service' }, value: 'a' }],
+									values: [{ timestamp: 1000, value: 12 }],
 								},
-								{ name: 'count()', id: 'A', queryName: 'A', isValueColumn: true },
 							],
-							rows: [{ data: { 'service.name': 'frontend', A: 120 } }],
 						},
-					},
-				],
-			},
+					],
+				},
+			],
 		},
-	} as unknown as MetricQueryRangeSuccessResponse;
+		meta: {},
+	} as unknown as QueryRangeResponseV5;
 }
 
 describe('useClientExport', () => {
@@ -121,9 +64,13 @@ describe('useClientExport', () => {
 		jest.useRealTimers();
 	});
 
-	it('dispatches timeseries data to the timeseries serializer (csv)', () => {
+	it('exports time_series as CSV to a timestamped <fileName>.csv', () => {
 		const { result } = renderHook(() =>
-			useClientExport({ data: timeSeriesData(), query, fileName: 'chart' }),
+			useClientExport({
+				response: timeSeriesResponse(),
+				fileName: 'chart',
+				legendMap: { A: '{{service}}' },
+			}),
 		);
 
 		act(() => {
@@ -136,28 +83,12 @@ describe('useClientExport', () => {
 		expect(name).toBe(getTimestampedFileName('chart', 'csv'));
 		expect(mime).toContain('text/csv');
 		expect(content).toContain('service');
+		expect(content).toContain('a');
 	});
 
-	it('dispatches scalar (table) data to the table serializer', () => {
+	it('exports as JSONL to a timestamped <fileName>.jsonl with the ndjson mime', () => {
 		const { result } = renderHook(() =>
-			useClientExport({ data: scalarData(), query, fileName: 'table' }),
-		);
-
-		act(() => {
-			result.current.handleExport({ format: ExportFormat.Csv });
-		});
-
-		expect(mockDownloadFile).toHaveBeenCalledTimes(1);
-		const [content, name] = mockDownloadFile.mock.calls[0];
-		expect(name).toBe(getTimestampedFileName('table', 'csv'));
-		expect(content).toContain('service.name');
-		expect(content).toContain('frontend');
-		expect(content).toContain('120');
-	});
-
-	it('exports as JSONL with the ndjson mime', () => {
-		const { result } = renderHook(() =>
-			useClientExport({ data: timeSeriesData(), query }),
+			useClientExport({ response: timeSeriesResponse() }),
 		);
 
 		act(() => {
@@ -170,8 +101,8 @@ describe('useClientExport', () => {
 		expect(content).toContain('"series"');
 	});
 
-	it('does nothing when there is no data', () => {
-		const { result } = renderHook(() => useClientExport({ query }));
+	it('does nothing when there is no response', () => {
+		const { result } = renderHook(() => useClientExport({}));
 
 		act(() => {
 			result.current.handleExport({ format: ExportFormat.Csv });
@@ -181,14 +112,13 @@ describe('useClientExport', () => {
 		expect(mockMessageError).not.toHaveBeenCalled();
 	});
 
-	it('shows an error for unsupported result types', () => {
+	it('shows an error and does not download for unsupported result types', () => {
 		const raw = {
-			statusCode: 200,
-			error: null,
-			message: '',
-			payload: { data: { result: [], resultType: '' } },
-		} as unknown as MetricQueryRangeSuccessResponse;
-		const { result } = renderHook(() => useClientExport({ data: raw, query }));
+			type: 'raw',
+			data: { results: [] },
+			meta: {},
+		} as unknown as QueryRangeResponseV5;
+		const { result } = renderHook(() => useClientExport({ response: raw }));
 
 		act(() => {
 			result.current.handleExport({ format: ExportFormat.Csv });

frontend/src/hooks/useExportData/useClientExport.ts

@@ -4,14 +4,11 @@ import {
 	downloadFile,
 	getTimestampedFileName,
 } from 'lib/exportData/downloadFile';
-import { exportScalarData } from 'lib/exportData/exportScalarData';
 import { exportTimeseriesData } from 'lib/exportData/exportTimeseriesData';
 import { toCsv } from 'lib/exportData/toCsv';
 import { toJsonl } from 'lib/exportData/toJsonl';
 import { ExportFormat, SerializedTable } from 'lib/exportData/types';
 import { useCallback, useState } from 'react';
-import { SuccessResponse } from 'types/api';
-import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';
 import { QueryRangeResponseV5, TimeSeriesData } from 'types/api/v5/queryRange';
 
@@ -23,44 +20,33 @@ const FORMAT_META: Record<ExportFormat, { mime: string; extension: string }> = {
 	},
 };
 
-/** The queryRange response object views hold — structural (params left
- * unconstrained) so both explorer variants assign cleanly. */
-export type ClientExportData = SuccessResponse<MetricRangePayloadProps> & {
-	rawV5Response?: QueryRangeResponseV5;
-	legendMap?: Record<string, string>;
-};
-
-// Picks the serializer from what the queryRange response carries: timeseries
-// queries surface the raw V5 tree (rawV5Response); table queries carry the
-// formatForWeb webTables payload (resultType 'scalar'). raw/trace stay
-// server-exported via useServerExport.
+// Picks the serializer for the response's request type. Narrows the results
+// union via the response discriminant. scalar lands with #5591; raw/trace are
+// server-exported, distribution is never emitted.
 function serialize(
-	data: ClientExportData,
+	response: QueryRangeResponseV5,
 	yAxisUnit?: string,
+	legendMap?: Record<string, string>,
 	query?: Query,
 ): SerializedTable {
-	if (data.rawV5Response?.type === REQUEST_TYPES.TIME_SERIES) {
+	if (response.type === REQUEST_TYPES.TIME_SERIES) {
 		return exportTimeseriesData({
-			data: data.rawV5Response.data.results as TimeSeriesData[],
+			data: response.data.results as TimeSeriesData[],
 			yAxisUnit,
-			legendMap: data.legendMap,
+			legendMap,
 			query,
 		});
 	}
 
-	if (data.payload?.data?.resultType === 'scalar' && query) {
-		return exportScalarData({ data, query });
-	}
-
-	throw new Error('Export is not supported for this result type');
+	throw new Error(`Export is not supported for "${response.type}" results`);
 }
 
 interface UseClientExportProps {
-	// currently supports only qb v5 responses. Can extend to support future responses.
-	data?: ClientExportData;
+	response?: QueryRangeResponseV5;
 	query?: Query;
 	yAxisUnit?: string;
 	fileName?: string;
+	legendMap?: Record<string, string>;
 }
 
 interface ClientExportOptions {
@@ -73,22 +59,23 @@ interface UseClientExportReturn {
 }
 
 export function useClientExport({
-	data,
+	response, // currently supports only qb v5 response. Can extend to support future responses.
 	query,
 	yAxisUnit,
 	fileName = 'export',
+	legendMap,
 }: UseClientExportProps): UseClientExportReturn {
 	const [isExporting, setIsExporting] = useState<boolean>(false);
 
 	const handleExport = useCallback(
 		({ format }: ClientExportOptions): void => {
-			if (!data) {
+			if (!response) {
 				return;
 			}
 
 			setIsExporting(true);
 			try {
-				const table = serialize(data, yAxisUnit, query);
+				const table = serialize(response, yAxisUnit, legendMap, query);
 				const content =
 					format === ExportFormat.Jsonl ? toJsonl(table) : toCsv(table);
 				const { mime, extension } = FORMAT_META[format];
@@ -99,7 +86,7 @@ export function useClientExport({
 				setIsExporting(false);
 			}
 		},
-		[data, query, yAxisUnit, fileName],
+		[response, query, yAxisUnit, fileName, legendMap],
 	);
 
 	return { isExporting, handleExport };