Merge branch 'main' into nv/layout-validations

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

@@ -11,7 +11,6 @@ import { Query, TagFilterItem } from 'types/api/queryBuilder/queryBuilderData';
 import { v4 as uuid } from 'uuid';
 
 import { isKeyMatch } from './utils';
-import { CheckedState } from '../../types';
 
 export const SELECTED_OPERATORS = [OPERATORS['='], 'in'];
 export const NON_SELECTED_OPERATORS = [OPERATORS['!='], 'not in', 'nin'];
@@ -149,7 +148,6 @@ export function applyCheckboxToggle({
 	value,
 	checked,
 	isOnlyOrAllClicked,
-	previousState,
 }: {
 	currentQuery: Query;
 	activeQueryIndex: number;
@@ -159,7 +157,6 @@ export function applyCheckboxToggle({
 	value: string;
 	checked: boolean;
 	isOnlyOrAllClicked: boolean;
-	previousState?: CheckedState;
 }): Query {
 	const activeItems =
 		currentQuery.builder.queryData?.[activeQueryIndex]?.filters?.items;
@@ -219,119 +216,49 @@ export function applyCheckboxToggle({
 			);
 			if (currentFilter) {
 				const runningOperator = currentFilter?.op;
-
-				// Indeterminate items get added to the existing operator (in or not in)
-				if (previousState === 'indeterminate') {
-					if (isArray(currentFilter.value)) {
-						const newFilter = {
-							...currentFilter,
-							value: [...currentFilter.value, value],
-						};
-						query.filters.items = query.filters.items.map((item) => {
-							if (isKeyMatch(item.key?.key, filter.attributeKey.key)) {
-								return newFilter;
-							}
-							return item;
-						});
-					} else {
-						const newFilter = {
-							...currentFilter,
-							value: [currentFilter.value as string, value],
-						};
-						query.filters.items = query.filters.items.map((item) => {
-							if (isKeyMatch(item.key?.key, filter.attributeKey.key)) {
-								return newFilter;
-							}
-							return item;
-						});
-					}
-				} else {
-					switch (runningOperator) {
-						case 'in':
-							if (checked) {
-								// if it's an IN operator then if we are checking another value it get's added to the
-								// filter clause. example -  key IN [value1, currentSelectedValue]
-								if (isArray(currentFilter.value)) {
-									const newFilter = {
-										...currentFilter,
-										value: [...currentFilter.value, value],
-									};
-									query.filters.items = query.filters.items.map((item) => {
-										if (isKeyMatch(item.key?.key, filter.attributeKey.key)) {
-											return newFilter;
-										}
-										return item;
-									});
-								} else {
-									// if the current state wasn't an array we make it one and add our value
-									const newFilter = {
-										...currentFilter,
-										value: [currentFilter.value as string, value],
-									};
-									query.filters.items = query.filters.items.map((item) => {
-										if (isKeyMatch(item.key?.key, filter.attributeKey.key)) {
-											return newFilter;
-										}
-										return item;
-									});
-								}
-							} else if (!checked) {
-								// 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),
-									};
-
-									if (newFilter.value.length === 0) {
-										query.filters.items = query.filters.items.filter(
-											(item) => !isKeyMatch(item.key?.key, filter.attributeKey.key),
-										);
-									} else {
-										query.filters.items = query.filters.items.map((item) => {
-											if (isKeyMatch(item.key?.key, filter.attributeKey.key)) {
-												return newFilter;
-											}
-											return item;
-										});
+				switch (runningOperator) {
+					case 'in':
+						if (checked) {
+							// if it's an IN operator then if we are checking another value it get's added to the
+							// filter clause. example -  key IN [value1, currentSelectedValue]
+							if (isArray(currentFilter.value)) {
+								const newFilter = {
+									...currentFilter,
+									value: [...currentFilter.value, value],
+								};
+								query.filters.items = query.filters.items.map((item) => {
+									if (isKeyMatch(item.key?.key, filter.attributeKey.key)) {
+										return newFilter;
 									}
-								} else {
-									// if not an array remove the whole thing altogether!
+									return item;
+								});
+							} else {
+								// if the current state wasn't an array we make it one and add our value
+								const newFilter = {
+									...currentFilter,
+									value: [currentFilter.value as string, value],
+								};
+								query.filters.items = query.filters.items.map((item) => {
+									if (isKeyMatch(item.key?.key, filter.attributeKey.key)) {
+										return newFilter;
+									}
+									return item;
+								});
+							}
+						} else if (!checked) {
+							// 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),
+								};
+
+								if (newFilter.value.length === 0) {
 									query.filters.items = query.filters.items.filter(
 										(item) => !isKeyMatch(item.key?.key, filter.attributeKey.key),
 									);
-								}
-							}
-							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;
-
-							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)
-								if (isArray(currentFilter.value)) {
-									const newFilter = {
-										...currentFilter,
-										value: [...currentFilter.value, value],
-									};
-									query.filters.items = query.filters.items.map((item) => {
-										if (isKeyMatch(item.key?.key, filter.attributeKey.key)) {
-											return newFilter;
-										}
-										return item;
-									});
 								} else {
-									const newFilter = {
-										...currentFilter,
-										value: [currentFilter.value as string, value],
-									};
 									query.filters.items = query.filters.items.map((item) => {
 										if (isKeyMatch(item.key?.key, filter.attributeKey.key)) {
 											return newFilter;
@@ -340,90 +267,125 @@ export function applyCheckboxToggle({
 									});
 								}
 							} else {
-								// Remove from NOT IN when value IS in filter and checked=true
-								// (user wants to include this value back)
-								if (isArray(currentFilter.value)) {
-									const newFilter = {
-										...currentFilter,
-										value: currentFilter.value.filter((val) => val !== value),
-									};
-									if (newFilter.value.length === 0) {
-										query.filters.items = query.filters.items.filter(
-											(item) => !isKeyMatch(item.key?.key, filter.attributeKey.key),
-										);
-										if (query.filter?.expression) {
-											query.filter.expression = removeKeysFromExpression(
-												query.filter.expression,
-												[filter.attributeKey.key],
-											);
-										}
-									} else {
-										query.filters.items = query.filters.items.map((item) => {
-											if (isKeyMatch(item.key?.key, filter.attributeKey.key)) {
-												return newFilter;
-											}
-											return item;
-										});
+								// if not an array remove the whole thing altogether!
+								query.filters.items = query.filters.items.filter(
+									(item) => !isKeyMatch(item.key?.key, filter.attributeKey.key),
+								);
+							}
+						}
+						break;
+					case 'nin':
+					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,
+									value: [...currentFilter.value, value],
+								};
+								query.filters.items = query.filters.items.map((item) => {
+									if (isKeyMatch(item.key?.key, filter.attributeKey.key)) {
+										return newFilter;
 									}
-								} else {
-									const newFilter = {
-										...currentFilter,
-										value: currentFilter.value === value ? null : currentFilter.value,
-									};
-									if (newFilter.value === null && query.filter?.expression) {
+									return item;
+								});
+							} else {
+								// in case of not an array make it one!
+								const newFilter = {
+									...currentFilter,
+									value: [currentFilter.value as string, value],
+								};
+								query.filters.items = query.filters.items.map((item) => {
+									if (isKeyMatch(item.key?.key, filter.attributeKey.key)) {
+										return newFilter;
+									}
+									return item;
+								});
+							}
+						} else if (checked) {
+							// opposite of above!
+							if (isArray(currentFilter.value)) {
+								const newFilter = {
+									...currentFilter,
+									value: currentFilter.value.filter((val) => val !== value),
+								};
+								if (newFilter.value.length === 0) {
+									query.filters.items = query.filters.items.filter(
+										(item) => !isKeyMatch(item.key?.key, filter.attributeKey.key),
+									);
+									if (query.filter?.expression) {
 										query.filter.expression = removeKeysFromExpression(
 											query.filter.expression,
 											[filter.attributeKey.key],
 										);
 									}
-									query.filters.items = query.filters.items.filter(
-										(item) => !isKeyMatch(item.key?.key, filter.attributeKey.key),
+								} else {
+									query.filters.items = query.filters.items.map((item) => {
+										if (isKeyMatch(item.key?.key, filter.attributeKey.key)) {
+											return newFilter;
+										}
+										return item;
+									});
+								}
+							} else {
+								const newFilter = {
+									...currentFilter,
+									value: currentFilter.value === value ? null : currentFilter.value,
+								};
+								if (newFilter.value === null && query.filter?.expression) {
+									query.filter.expression = removeKeysFromExpression(
+										query.filter.expression,
+										[filter.attributeKey.key],
 									);
 								}
+								query.filters.items = query.filters.items.filter(
+									(item) => !isKeyMatch(item.key?.key, filter.attributeKey.key),
+								);
 							}
-							break;
 						}
-						case '=':
-							if (checked) {
-								const newFilter = {
-									...currentFilter,
-									op: getOperatorValue(OPERATORS.IN),
-									value: [currentFilter.value as string, value],
-								};
-								query.filters.items = query.filters.items.map((item) => {
-									if (isKeyMatch(item.key?.key, filter.attributeKey.key)) {
-										return newFilter;
-									}
-									return item;
-								});
-							} else if (!checked) {
-								query.filters.items = query.filters.items.filter(
-									(item) => !isKeyMatch(item.key?.key, filter.attributeKey.key),
-								);
-							}
-							break;
-						case '!=':
-							if (!checked) {
-								const newFilter = {
-									...currentFilter,
-									op: getNotInOperator(source),
-									value: [currentFilter.value as string, value],
-								};
-								query.filters.items = query.filters.items.map((item) => {
-									if (isKeyMatch(item.key?.key, filter.attributeKey.key)) {
-										return newFilter;
-									}
-									return item;
-								});
-							} else if (checked) {
-								query.filters.items = query.filters.items.filter(
-									(item) => !isKeyMatch(item.key?.key, filter.attributeKey.key),
-								);
-							}
-							break;
-						default:
-							break;
-					}
+						break;
+					case '=':
+						if (checked) {
+							const newFilter = {
+								...currentFilter,
+								op: getOperatorValue(OPERATORS.IN),
+								value: [currentFilter.value as string, value],
+							};
+							query.filters.items = query.filters.items.map((item) => {
+								if (isKeyMatch(item.key?.key, filter.attributeKey.key)) {
+									return newFilter;
+								}
+								return item;
+							});
+						} else if (!checked) {
+							query.filters.items = query.filters.items.filter(
+								(item) => !isKeyMatch(item.key?.key, filter.attributeKey.key),
+							);
+						}
+						break;
+					case '!=':
+						if (!checked) {
+							const newFilter = {
+								...currentFilter,
+								op: getNotInOperator(source),
+								value: [currentFilter.value as string, value],
+							};
+							query.filters.items = query.filters.items.map((item) => {
+								if (isKeyMatch(item.key?.key, filter.attributeKey.key)) {
+									return newFilter;
+								}
+								return item;
+							});
+						} else if (checked) {
+							query.filters.items = query.filters.items.filter(
+								(item) => !isKeyMatch(item.key?.key, filter.attributeKey.key),
+							);
+						}
+						break;
+					default:
+						break;
 				}
 			}
 		} else {

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

@@ -10,7 +10,6 @@ import {
 	applyCheckboxToggle,
 	clearFilterFromQuery,
 } from './checkboxFilterQuery';
-import { CheckedState } from '../../types';
 
 interface UseCheckboxFilterActionsProps {
 	filter: IQuickFiltersConfig;
@@ -25,7 +24,6 @@ interface UseCheckboxFilterActionsReturn {
 		value: string,
 		checked: boolean,
 		isOnlyOrAllClicked: boolean,
-		previousState?: CheckedState,
 	) => void;
 	onClear: () => void;
 }
@@ -55,7 +53,6 @@ function useCheckboxFilterActions({
 		value: string,
 		checked: boolean,
 		isOnlyOrAllClicked: boolean,
-		previousState?: CheckedState,
 	): void => {
 		dispatch(
 			applyCheckboxToggle({
@@ -67,7 +64,6 @@ function useCheckboxFilterActions({
 				value,
 				checked,
 				isOnlyOrAllClicked,
-				previousState,
 			}),
 		);
 	};

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/v2/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/CheckboxFilterV2.interactions.test.tsx

@@ -1,494 +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');
-			expect(screen.getByTestId('badge-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();
-		});
-	});
-
-	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('accumulates both values in NOT IN when toggling indeterminate (related) then unchecked (other)', async () => {
-			const user = userEvent.setup();
-			const onFilterChange = jest.fn();
-
-			mockFieldsValuesAPI({
-				relatedValues: ['valueA'],
-				stringValues: ['valueB'],
-			});
-
-			// Step 1: Start with no filter, toggle indeterminate A
-			const { unmount } = renderWithFilter(onFilterChange);
-
-			const rowA = await screen.findByTestId('checkbox-value-row-valueA');
-			expect(rowA).toHaveAttribute('data-state', 'indeterminate');
-
-			await user.click(within(rowA).getByRole('checkbox'));
-
-			expect(onFilterChange).toHaveBeenCalledTimes(1);
-			const firstFilter = getFilterFromCall(onFilterChange);
-			expect(firstFilter?.op).toBe('not in');
-			expect(firstFilter?.value).toBe('valueA');
-
-			unmount();
-
-			// Step 2: Re-render with updated query (NOT IN valueA), toggle unchecked B
-			onFilterChange.mockClear();
-			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 secondFilter = getFilterFromCall(onFilterChange);
-			expect(secondFilter?.op).toBe('not in');
-			expect(secondFilter?.value).toStrictEqual(['valueA', 'valueB']);
-		});
-
-		it('accumulates both values in IN when toggling indeterminate (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']);
-		});
-	});
-
-	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/CheckboxFilterV2.itemRules.test.tsx

@@ -1,485 +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');
-
-			expect(screen.queryByTestId('badge-related')).not.toBeInTheDocument();
-			expect(screen.queryByTestId('badge-other')).not.toBeInTheDocument();
-		});
-	});
-
-	describe('with existing query (related values)', () => {
-		it('shows "Related" badge with indeterminate state for values in relatedValues', 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();
-
-			expect(screen.getByTestId('badge-related')).toBeInTheDocument();
-			expect(productionRow).toHaveAttribute('data-state', 'indeterminate');
-
-			const stagingRow = screen.getByTestId('checkbox-value-row-staging');
-			expect(stagingRow).toHaveAttribute('data-state', 'unchecked');
-		});
-
-		it('shows "Other" badge for values not in relatedValues', 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(screen.getByTestId('badge-other')).toBeInTheDocument();
-		});
-
-		it('shows "Related" badge with indeterminate when hasFilterForThisKey=true and isInRelatedValues=true (Rule 5)', 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,
-				},
-			);
-
-			const productionRow = await screen.findByTestId(
-				'checkbox-value-row-production',
-			);
-			expect(productionRow).toHaveAttribute('data-state', 'checked');
-
-			const stagingRow = screen.getByTestId('checkbox-value-row-staging');
-			expect(stagingRow).toHaveAttribute('data-state', 'indeterminate');
-			expect(within(stagingRow).getByTestId('badge-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 "Not in" badge with unchecked state 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(screen.getByTestId('badge-not_in')).toBeInTheDocument();
-
-			const stagingRow = screen.getByTestId('checkbox-value-row-staging');
-			expect(stagingRow).toHaveAttribute('data-state', 'unchecked');
-			expect(within(stagingRow).getByTestId('badge-other')).toBeInTheDocument();
-		});
-	});
-
-	describe('ordering by orderIndex', () => {
-		it('orders selected values (orderIndex 0) before related (orderIndex 1) before other (orderIndex 2)', 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 orderIndex', 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();
-
-			const relatedRow = screen.getByTestId('checkbox-value-row-related-env');
-			expect(relatedRow).toHaveAttribute('data-state', 'indeterminate');
-			expect(within(relatedRow).getByTestId('badge-related')).toBeInTheDocument();
-
-			const otherRow = screen.getByTestId('checkbox-value-row-other-env');
-			expect(otherRow).toHaveAttribute('data-state', 'unchecked');
-			expect(within(otherRow).getByTestId('badge-other')).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).getByTestId('badge-not_in')).toBeInTheDocument();
-
-			const relatedRow = screen.getByTestId('checkbox-value-row-related-env');
-			expect(relatedRow).toHaveAttribute('data-state', 'indeterminate');
-			expect(within(relatedRow).getByTestId('badge-related')).toBeInTheDocument();
-		});
-	});
-});

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

@@ -1,91 +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;
-	gap: var(--spacing-4);
-}
-
-.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.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/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,226 +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 { CheckboxFilterV2ValueRow } from './CheckboxFilterV2ValueRow';
-import { useSectionedValues } from './useSectionedValues';
-
-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 { sectionedItems, totalCount } = useSectionedValues({
-		relatedValues,
-		allValues,
-		currentFilterState,
-		isSomeFilterPresentForCurrentAttribute,
-		isNotInOperator,
-		hasExistingQuery,
-		searchText,
-		visibleItemsCount,
-	});
-
-	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}>
-							{sectionedItems.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)
-										}
-										onOnlyOrAllClick={(): void => onChange(value, isChecked, true)}
-									/>
-								);
-							})}
-						</section>
-					)}
-
-					{totalCount === 0 && hasLoadedOnce.current && (
-						<section className={styles.noData} data-testid="checkbox-filter-empty">
-							<Typography.Text>No values found</Typography.Text>
-						</section>
-					)}
-
-					{visibleItemsCount < totalCount && (
-						<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.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/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/CheckboxFilterV2ValueRow.module.scss

@@ -1,166 +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 {
-	display: inline-flex;
-	align-items: center;
-	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.test.tsx

@@ -1,318 +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');
-		});
-
-		it('sets data-state="indeterminate" for indeterminate state', () => {
-			render(
-				<CheckboxFilterV2ValueRow {...defaultProps} checkedState="indeterminate" />,
-			);
-
-			const row = screen.getByTestId('checkbox-value-row-production');
-			expect(row).toHaveAttribute('data-state', 'indeterminate');
-		});
-	});
-
-	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('indeterminate + related badge', () => {
-			render(
-				<CheckboxFilterV2ValueRow
-					{...defaultProps}
-					checkedState="indeterminate"
-					badge={{ key: 'related', label: 'Related', color: 'robin' }}
-				/>,
-			);
-
-			expect(screen.getByTestId('badge-related')).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/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/itemRules.test.ts

@@ -1,146 +0,0 @@
-import { deriveItemConfig, ItemContext } from './itemRules';
-
-describe('itemRules', () => {
-	describe('deriveItemConfig', () => {
-		it('no query at all → orderIndex 0, no badge', () => {
-			const ctx: ItemContext = {
-				isSelectedOnFilter: false,
-				isInRelatedValues: true,
-				isNotInOperator: false,
-				hasExistingQuery: false,
-				hasFilterForThisKey: false,
-			};
-
-			const result = deriveItemConfig(ctx);
-
-			expect(result.orderIndex).toBe(0);
-			expect(result.badge).toBeNull();
-		});
-
-		it('selected + IN operator → orderIndex 0, no badge', () => {
-			const ctx: ItemContext = {
-				isSelectedOnFilter: true,
-				isInRelatedValues: true,
-				isNotInOperator: false,
-				hasExistingQuery: true,
-				hasFilterForThisKey: true,
-			};
-
-			const result = deriveItemConfig(ctx);
-
-			expect(result.orderIndex).toBe(0);
-			expect(result.badge).toBeNull();
-		});
-
-		it('selected + NOT IN operator → orderIndex 0, not_in badge', () => {
-			const ctx: ItemContext = {
-				isSelectedOnFilter: true,
-				isInRelatedValues: false,
-				isNotInOperator: true,
-				hasExistingQuery: true,
-				hasFilterForThisKey: true,
-			};
-
-			const result = deriveItemConfig(ctx);
-
-			expect(result.orderIndex).toBe(0);
-			expect(result.badge).toStrictEqual({
-				key: 'not_in',
-				label: 'Not in',
-				color: 'warning',
-			});
-		});
-
-		it('has query, no filter for this key, in related → orderIndex 1, related badge', () => {
-			const ctx: ItemContext = {
-				isSelectedOnFilter: false,
-				isInRelatedValues: true,
-				isNotInOperator: false,
-				hasExistingQuery: true,
-				hasFilterForThisKey: false,
-			};
-
-			const result = deriveItemConfig(ctx);
-
-			expect(result.orderIndex).toBe(1);
-			expect(result.badge).toStrictEqual({
-				key: 'related',
-				label: 'Related',
-				color: 'robin',
-			});
-		});
-
-		it('has query, has filter for this key, in related → orderIndex 1, related badge', () => {
-			const ctx: ItemContext = {
-				isSelectedOnFilter: false,
-				isInRelatedValues: true,
-				isNotInOperator: false,
-				hasExistingQuery: true,
-				hasFilterForThisKey: true,
-			};
-
-			const result = deriveItemConfig(ctx);
-
-			expect(result.orderIndex).toBe(1);
-			expect(result.badge).toStrictEqual({
-				key: 'related',
-				label: 'Related',
-				color: 'robin',
-			});
-		});
-
-		it('has query, not in related → orderIndex 2, other badge', () => {
-			const ctx: ItemContext = {
-				isSelectedOnFilter: false,
-				isInRelatedValues: false,
-				isNotInOperator: false,
-				hasExistingQuery: true,
-				hasFilterForThisKey: false,
-			};
-
-			const result = deriveItemConfig(ctx);
-
-			expect(result.orderIndex).toBe(2);
-			expect(result.badge).toStrictEqual({
-				key: 'other',
-				label: 'Other',
-				color: 'secondary',
-			});
-		});
-
-		it('has query + filter for key, not selected, not in related → orderIndex 2, other badge', () => {
-			const ctx: ItemContext = {
-				isSelectedOnFilter: false,
-				isInRelatedValues: false,
-				isNotInOperator: false,
-				hasExistingQuery: true,
-				hasFilterForThisKey: true,
-			};
-
-			const result = deriveItemConfig(ctx);
-
-			expect(result.orderIndex).toBe(2);
-			expect(result.badge).toStrictEqual({
-				key: 'other',
-				label: 'Other',
-				color: 'secondary',
-			});
-		});
-
-		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.orderIndex).toBe(0);
-			expect(result.badge).toBeNull();
-			expect(result.checkedState).toBe('checked');
-		});
-	});
-});

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

@@ -1,109 +0,0 @@
-import { CheckedState } from '../../../types';
-
-export interface BadgeConfig {
-	key: string;
-	label: string;
-	color: 'robin' | 'warning' | 'secondary';
-}
-
-export interface ItemConfig {
-	orderIndex: number;
-	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[] = [
-	{
-		condition: (ctx): boolean =>
-			!ctx.hasExistingQuery && !ctx.hasFilterForThisKey,
-		config: { orderIndex: 0, badge: null, checkedState: 'checked' },
-	},
-	{
-		condition: (ctx): boolean => ctx.isSelectedOnFilter && ctx.isNotInOperator,
-		config: {
-			orderIndex: 0,
-			badge: { key: 'not_in', label: 'Not in', color: 'warning' },
-			checkedState: 'unchecked',
-		},
-	},
-	{
-		condition: (ctx): boolean => ctx.isSelectedOnFilter && !ctx.isNotInOperator,
-		config: { orderIndex: 0, badge: null, checkedState: 'checked' },
-	},
-	{
-		condition: (ctx): boolean =>
-			ctx.hasExistingQuery && !ctx.hasFilterForThisKey && ctx.isInRelatedValues,
-		config: {
-			orderIndex: 1,
-			badge: { key: 'related', label: 'Related', color: 'robin' },
-			checkedState: 'indeterminate',
-		},
-	},
-	{
-		condition: (ctx): boolean =>
-			ctx.hasExistingQuery && ctx.hasFilterForThisKey && ctx.isInRelatedValues,
-		config: {
-			orderIndex: 1,
-			badge: { key: 'related', label: 'Related', color: 'robin' },
-			checkedState: 'indeterminate',
-		},
-	},
-	{
-		condition: (ctx): boolean => ctx.hasExistingQuery,
-		config: {
-			orderIndex: 2,
-			badge: { key: 'other', label: 'Other', color: 'secondary' },
-			checkedState: 'unchecked',
-		},
-	},
-];
-
-// Fallback when no rule matches
-const DEFAULT_CONFIG: ItemConfig = {
-	orderIndex: 0,
-	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.test.ts

@@ -1,115 +0,0 @@
-import { renderHook } from '@testing-library/react';
-
-import { useSectionedValues } from './useSectionedValues';
-
-describe('useSectionedValues', () => {
-	const baseInput = {
-		relatedValues: ['val1', 'val2'],
-		allValues: ['val1', 'val2', 'val3'],
-		currentFilterState: {},
-		isSomeFilterPresentForCurrentAttribute: false,
-		isNotInOperator: false,
-		hasExistingQuery: false,
-		searchText: '',
-		visibleItemsCount: 10,
-	};
-
-	it('no query at all → all items orderIndex 0, no badges', () => {
-		const { result } = renderHook(() =>
-			useSectionedValues({
-				...baseInput,
-				hasExistingQuery: false,
-				isSomeFilterPresentForCurrentAttribute: false,
-			}),
-		);
-
-		expect(result.current.sectionedItems).toHaveLength(3);
-		result.current.sectionedItems.forEach((item) => {
-			expect(item.orderIndex).toBe(0);
-			expect(item.badge).toBeNull();
-		});
-	});
-
-	it('has query, no filter for key → related values get related badge', () => {
-		const { result } = renderHook(() =>
-			useSectionedValues({
-				...baseInput,
-				hasExistingQuery: true,
-				isSomeFilterPresentForCurrentAttribute: false,
-			}),
-		);
-
-		const relatedItems = result.current.sectionedItems.filter(
-			(item) => item.value === 'val1' || item.value === 'val2',
-		);
-		const otherItems = result.current.sectionedItems.filter(
-			(item) => item.value === 'val3',
-		);
-
-		// Related values should have related badge
-		relatedItems.forEach((item) => {
-			expect(item.orderIndex).toBe(1);
-			expect(item.badge?.key).toBe('related');
-		});
-
-		// Other values should have other badge
-		otherItems.forEach((item) => {
-			expect(item.orderIndex).toBe(2);
-			expect(item.badge?.key).toBe('other');
-		});
-	});
-
-	it('has query + filter for key, selected value → selected at top, no badge', () => {
-		const { result } = renderHook(() =>
-			useSectionedValues({
-				...baseInput,
-				hasExistingQuery: true,
-				isSomeFilterPresentForCurrentAttribute: true,
-				currentFilterState: { val1: true, val2: false, val3: false },
-			}),
-		);
-
-		const selectedItem = result.current.sectionedItems.find(
-			(item) => item.value === 'val1',
-		);
-
-		expect(selectedItem?.orderIndex).toBe(0);
-		expect(selectedItem?.badge).toBeNull();
-	});
-
-	it('has query + filter for key, NOT IN operator → not_in values get badge', () => {
-		const { result } = renderHook(() =>
-			useSectionedValues({
-				...baseInput,
-				hasExistingQuery: true,
-				isSomeFilterPresentForCurrentAttribute: true,
-				isNotInOperator: true,
-				currentFilterState: { val1: false, val2: true, val3: true },
-			}),
-		);
-
-		// val1 is unchecked + NOT IN = excluded
-		const excludedItem = result.current.sectionedItems.find(
-			(item) => item.value === 'val1',
-		);
-
-		expect(excludedItem?.orderIndex).toBe(0);
-		expect(excludedItem?.badge?.key).toBe('not_in');
-	});
-
-	it('items with same orderIndex sorted alphabetically', () => {
-		const { result } = renderHook(() =>
-			useSectionedValues({
-				...baseInput,
-				relatedValues: ['zebra', 'apple', 'mango'],
-				allValues: ['zebra', 'apple', 'mango'],
-				hasExistingQuery: false,
-				isSomeFilterPresentForCurrentAttribute: false,
-			}),
-		);
-
-		// All items have orderIndex 0, should be sorted alphabetically
-		const values = result.current.sectionedItems.map((item) => item.value);
-		expect(values).toStrictEqual(['apple', 'mango', 'zebra']);
-	});
-});

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

@@ -1,97 +0,0 @@
-import { useMemo } from 'react';
-
-import { BadgeConfig, deriveItems } from './itemRules';
-import { CheckedState } from '../../../types';
-
-interface SectionedValuesInput {
-	relatedValues: string[];
-	allValues: string[];
-	currentFilterState: Record<string, boolean>;
-	isSomeFilterPresentForCurrentAttribute: boolean;
-	isNotInOperator: boolean;
-	hasExistingQuery: boolean;
-	searchText: string;
-	visibleItemsCount: number;
-}
-
-export interface SectionedItem {
-	value: string;
-	orderIndex: number;
-	badge: BadgeConfig | null;
-	checkedState: CheckedState;
-}
-
-interface SectionedValuesOutput {
-	sectionedItems: SectionedItem[];
-	totalCount: number;
-}
-
-export function useSectionedValues({
-	relatedValues,
-	allValues,
-	currentFilterState,
-	isSomeFilterPresentForCurrentAttribute,
-	isNotInOperator,
-	hasExistingQuery,
-	searchText,
-	visibleItemsCount,
-}: SectionedValuesInput): SectionedValuesOutput {
-	const items = useMemo(() => {
-		const allUniqueValues = Array.from(new Set([...relatedValues, ...allValues]));
-
-		// When searching, only use allValues (API filtered)
-		const valuesToProcess = searchText ? allValues : allUniqueValues;
-
-		// Build selected set based on operator
-		// Only populate when filter exists for this key
-		const selectedSet = new Set<string>();
-		if (isSomeFilterPresentForCurrentAttribute) {
-			for (const [val, isChecked] of Object.entries(currentFilterState)) {
-				if (isNotInOperator) {
-					// NOT IN: unchecked = explicitly excluded
-					if (!isChecked) {
-						selectedSet.add(val);
-					}
-				} else {
-					// IN: checked = explicitly selected
-					if (isChecked) {
-						selectedSet.add(val);
-					}
-				}
-			}
-		}
-
-		// Always include selected values at top - they may not be in API response
-		// (e.g., NOT IN filter excludes them from results)
-		const finalValues = [
-			...new Set([...Array.from(selectedSet), ...valuesToProcess]),
-		];
-
-		const relatedSet = new Set(relatedValues);
-
-		const derived = deriveItems(finalValues, relatedSet, selectedSet, {
-			isNotInOperator,
-			hasExistingQuery,
-			hasFilterForThisKey: isSomeFilterPresentForCurrentAttribute,
-		});
-
-		return derived.sort(
-			(a, b) => a.orderIndex - b.orderIndex || a.value.localeCompare(b.value),
-		);
-	}, [
-		relatedValues,
-		allValues,
-		currentFilterState,
-		isSomeFilterPresentForCurrentAttribute,
-		isNotInOperator,
-		hasExistingQuery,
-		searchText,
-	]);
-
-	const sectionedItems = useMemo(
-		() => items.slice(0, visibleItemsCount),
-		[items, visibleItemsCount],
-	);
-
-	return { sectionedItems, totalCount: items.length };
-}

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/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/container/InfraMonitoringHosts/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 logEvent from 'api/common/logEvent';
@@ -9,10 +9,7 @@ import { FeatureKeys } from 'constants/features';
 import K8sBaseDetails from 'container/InfraMonitoringK8s/Base/K8sBaseDetails';
 import { K8sBaseList } from 'container/InfraMonitoringK8s/Base/K8sBaseList';
 import { K8sBaseFilters } from 'container/InfraMonitoringK8s/Base/types';
-import {
-	InfraMonitoringEntity,
-	METRIC_NAMESPACE_BY_ENTITY,
-} from 'container/InfraMonitoringK8s/constants';
+import { InfraMonitoringEntity } from 'container/InfraMonitoringK8s/constants';
 import {
 	useInfraMonitoringFiltersK8s,
 	useInfraMonitoringPageListing,
@@ -20,8 +17,6 @@ import {
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useQueryOperations } from 'hooks/queryBuilder/useQueryBuilderOperations';
 import { useAppContext } from 'providers/App/App';
-import { useGlobalTimeStore } from 'store/globalTime';
-import { NANO_SECOND_MULTIPLIER } from 'store/globalTime/utils';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';
 
 import {
@@ -62,17 +57,6 @@ function Hosts(): JSX.Element {
 		entityVersion: '',
 	});
 
-	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]);
-
 	// Track previous urlFilters to only sync when the value actually changes
 	// (not when handleChangeQueryData changes due to query updates)
 	const prevUrlFiltersRef = useRef<string | null>(null);
@@ -171,12 +155,6 @@ function Hosts(): JSX.Element {
 								config={getHostsQuickFiltersConfig(dotMetricsEnabled)}
 								handleFilterVisibilityChange={handleFilterVisibilityChange}
 								onFilterChange={handleQuickFiltersChange}
-								useFieldApis={{
-									metricNamespace:
-										METRIC_NAMESPACE_BY_ENTITY[InfraMonitoringEntity.HOSTS],
-									startUnixMilli,
-									endUnixMilli,
-								}}
 							/>
 						</div>
 					)}

frontend/src/container/InfraMonitoringK8s/InfraMonitoringK8s.tsx

@@ -1,13 +1,11 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import * as Sentry from '@sentry/react';
-import { Button, Collapse, CollapseProps, Tooltip } from 'antd';
+import { Button, CollapseProps } from 'antd';
+import { Collapse, Tooltip } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import logEvent from 'api/common/logEvent';
 import QuickFilters from 'components/QuickFilters/QuickFilters';
-import {
-	QuickFilterCheckboxUseFieldApis,
-	QuickFiltersSource,
-} from 'components/QuickFilters/types';
+import { QuickFiltersSource } from 'components/QuickFilters/types';
 import { InfraMonitoringEvents } from 'constants/events';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useQueryOperations } from 'hooks/queryBuilder/useQueryBuilderOperations';
@@ -25,8 +23,6 @@ import {
 	Workflow,
 } from '@signozhq/icons';
 import ErrorBoundaryFallback from 'pages/ErrorBoundaryFallback/ErrorBoundaryFallback';
-import { useGlobalTimeStore } from 'store/globalTime';
-import { NANO_SECOND_MULTIPLIER } from 'store/globalTime/utils';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';
 
 import { FeatureKeys } from '../../constants/features';
@@ -42,9 +38,7 @@ import {
 	GetPodsQuickFiltersConfig,
 	GetStatefulsetsQuickFiltersConfig,
 	GetVolumesQuickFiltersConfig,
-	InfraMonitoringEntity,
 	K8sCategories,
-	METRIC_NAMESPACE_BY_ENTITY,
 } from './constants';
 import K8sDaemonSetsList from './DaemonSets/K8sDaemonSetsList';
 import K8sDeploymentsList from './Deployments/K8sDeploymentsList';
@@ -104,26 +98,6 @@ export default function InfraMonitoringK8s(): JSX.Element {
 		featureFlags?.find((flag) => flag.name === FeatureKeys.DOT_METRICS_ENABLED)
 			?.active || 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 handleFilterChange = (query: Query): void => {
 		// update the current query with the new filters
 		// in infra monitoring k8s, we are using only one query, hence updating the 0th index of queryData
@@ -165,7 +139,6 @@ export default function InfraMonitoringK8s(): JSX.Element {
 					config={GetPodsQuickFiltersConfig(dotMetricsEnabled)}
 					handleFilterVisibilityChange={handleFilterVisibilityChange}
 					onFilterChange={handleFilterChange}
-					useFieldApis={getUseFieldApis(InfraMonitoringEntity.PODS)}
 				/>
 			),
 		},
@@ -182,7 +155,6 @@ export default function InfraMonitoringK8s(): JSX.Element {
 					config={GetNodesQuickFiltersConfig(dotMetricsEnabled)}
 					handleFilterVisibilityChange={handleFilterVisibilityChange}
 					onFilterChange={handleFilterChange}
-					useFieldApis={getUseFieldApis(InfraMonitoringEntity.NODES)}
 				/>
 			),
 		},
@@ -199,7 +171,6 @@ export default function InfraMonitoringK8s(): JSX.Element {
 					config={GetNamespaceQuickFiltersConfig(dotMetricsEnabled)}
 					handleFilterVisibilityChange={handleFilterVisibilityChange}
 					onFilterChange={handleFilterChange}
-					useFieldApis={getUseFieldApis(InfraMonitoringEntity.NAMESPACES)}
 				/>
 			),
 		},
@@ -216,7 +187,6 @@ export default function InfraMonitoringK8s(): JSX.Element {
 					config={GetClustersQuickFiltersConfig(dotMetricsEnabled)}
 					handleFilterVisibilityChange={handleFilterVisibilityChange}
 					onFilterChange={handleFilterChange}
-					useFieldApis={getUseFieldApis(InfraMonitoringEntity.CLUSTERS)}
 				/>
 			),
 		},
@@ -233,7 +203,6 @@ export default function InfraMonitoringK8s(): JSX.Element {
 					config={GetDeploymentsQuickFiltersConfig(dotMetricsEnabled)}
 					handleFilterVisibilityChange={handleFilterVisibilityChange}
 					onFilterChange={handleFilterChange}
-					useFieldApis={getUseFieldApis(InfraMonitoringEntity.DEPLOYMENTS)}
 				/>
 			),
 		},
@@ -250,7 +219,6 @@ export default function InfraMonitoringK8s(): JSX.Element {
 					config={GetJobsQuickFiltersConfig(dotMetricsEnabled)}
 					handleFilterVisibilityChange={handleFilterVisibilityChange}
 					onFilterChange={handleFilterChange}
-					useFieldApis={getUseFieldApis(InfraMonitoringEntity.JOBS)}
 				/>
 			),
 		},
@@ -267,7 +235,6 @@ export default function InfraMonitoringK8s(): JSX.Element {
 					config={GetDaemonsetsQuickFiltersConfig(dotMetricsEnabled)}
 					handleFilterVisibilityChange={handleFilterVisibilityChange}
 					onFilterChange={handleFilterChange}
-					useFieldApis={getUseFieldApis(InfraMonitoringEntity.DAEMONSETS)}
 				/>
 			),
 		},
@@ -284,7 +251,6 @@ export default function InfraMonitoringK8s(): JSX.Element {
 					config={GetStatefulsetsQuickFiltersConfig(dotMetricsEnabled)}
 					handleFilterVisibilityChange={handleFilterVisibilityChange}
 					onFilterChange={handleFilterChange}
-					useFieldApis={getUseFieldApis(InfraMonitoringEntity.STATEFULSETS)}
 				/>
 			),
 		},
@@ -301,7 +267,6 @@ export default function InfraMonitoringK8s(): JSX.Element {
 					config={GetVolumesQuickFiltersConfig(dotMetricsEnabled)}
 					handleFilterVisibilityChange={handleFilterVisibilityChange}
 					onFilterChange={handleFilterChange}
-					useFieldApis={getUseFieldApis(InfraMonitoringEntity.VOLUMES)}
 				/>
 			),
 		},

frontend/src/container/InfraMonitoringK8s/constants.ts

@@ -21,21 +21,6 @@ export enum InfraMonitoringEntity {
 	VOLUMES = 'volumes',
 }
 
-export const METRIC_NAMESPACE_BY_ENTITY: Record<InfraMonitoringEntity, string> =
-	{
-		[InfraMonitoringEntity.HOSTS]: 'system.',
-		[InfraMonitoringEntity.PODS]: 'k8s.pod.',
-		[InfraMonitoringEntity.NODES]: 'k8s.node.',
-		[InfraMonitoringEntity.NAMESPACES]: 'k8s.pod.',
-		[InfraMonitoringEntity.CLUSTERS]: 'k8s.node.',
-		[InfraMonitoringEntity.DEPLOYMENTS]: 'k8s.',
-		[InfraMonitoringEntity.STATEFULSETS]: 'k8s.',
-		[InfraMonitoringEntity.DAEMONSETS]: 'k8s.',
-		[InfraMonitoringEntity.CONTAINERS]: 'k8s.pod.',
-		[InfraMonitoringEntity.JOBS]: 'k8s.',
-		[InfraMonitoringEntity.VOLUMES]: 'k8s.volume.',
-	};
-
 export enum VIEWS {
 	METRICS = 'metrics',
 	LOGS = 'logs',

frontend/src/pages/DashboardPageV2/DashboardContainer/hooks/__tests__/useResolvedVariables.test.tsx

@@ -1,67 +0,0 @@
-import { renderHook } from '@testing-library/react';
-import type {
-	DashboardtypesGettableDashboardV2DTO,
-	DashboardtypesVariableDTO,
-} from 'api/generated/services/sigNoz.schemas';
-
-import { selectResolvedVariables } from '../../store/slices/variableSelectionSlice';
-import { useDashboardStore } from '../../store/useDashboardStore';
-import { useResolvedVariables } from '../useResolvedVariables';
-
-// A text variable is the simplest envelope (no list plugin); the builder's full
-// type/value matrix is covered in buildVariablesPayload.test.ts. The envelope is
-// cast at the boundary — its kind discriminant is the literal 'TextVariable'.
-function textVariable(name: string, value: string): DashboardtypesVariableDTO {
-	return {
-		kind: 'TextVariable',
-		spec: { name, value, display: { name } },
-	} as unknown as DashboardtypesVariableDTO;
-}
-
-function dashboard(
-	id: string,
-	variables: DashboardtypesVariableDTO[],
-): DashboardtypesGettableDashboardV2DTO {
-	return {
-		id,
-		spec: { variables },
-	} as unknown as DashboardtypesGettableDashboardV2DTO;
-}
-
-describe('useResolvedVariables', () => {
-	afterEach(() => {
-		useDashboardStore.setState({ variableValues: {}, resolvedVariables: {} });
-	});
-
-	it('publishes the resolved V5 payload for the dashboard to the store', () => {
-		renderHook(() =>
-			useResolvedVariables(dashboard('d1', [textVariable('env', 'prod')])),
-		);
-
-		expect(
-			selectResolvedVariables('d1')(useDashboardStore.getState()),
-		).toStrictEqual({ env: { type: 'text', value: 'prod' } });
-	});
-
-	it('reflects the runtime selection over the configured default', () => {
-		useDashboardStore
-			.getState()
-			.setVariableValues('d2', { env: { value: 'staging', allSelected: false } });
-
-		renderHook(() =>
-			useResolvedVariables(dashboard('d2', [textVariable('env', 'prod')])),
-		);
-
-		expect(
-			selectResolvedVariables('d2')(useDashboardStore.getState()),
-		).toStrictEqual({ env: { type: 'text', value: 'staging' } });
-	});
-
-	it('publishes an empty payload when the dashboard has no variables', () => {
-		renderHook(() => useResolvedVariables(dashboard('d3', [])));
-
-		expect(
-			selectResolvedVariables('d3')(useDashboardStore.getState()),
-		).toStrictEqual({});
-	});
-});

frontend/src/pages/DashboardPageV2/DashboardContainer/hooks/usePanelQuery.ts

@@ -17,8 +17,6 @@ import type { PanelPagination, PanelQueryData } from '../queryV5/types';
 import { getRawResults } from '../queryV5/v5ResponseData';
 import { getBuilderQueries } from '../Panels/utils/getBuilderQueries';
 import { PANEL_KIND_TO_PANEL_TYPE } from '../Panels/types/panelKind';
-import { selectResolvedVariables } from '../store/slices/variableSelectionSlice';
-import { useDashboardStore } from '../store/useDashboardStore';
 import { resolvePanelTimeWindow } from './resolvePanelTimeWindow';
 import { useGetQueryRangeV5 } from './useGetQueryRangeV5';
 
@@ -67,9 +65,8 @@ export interface UsePanelQueryResult {
 /**
  * Fetches query-range data for a V2 panel over the pure-V5 contract: builds the request DTO
  * from the panel's perses queries (no V1 `Query` intermediary), reads global time from Redux,
- * substitutes the dashboard's resolved variable values (published to the store by
- * `useResolvedVariables`), and posts via `useGetQueryRangeV5`. Renderers consume the raw
- * response through the `queryV5` prep utils.
+ * and posts via `useGetQueryRangeV5`. Variable substitution is deferred until V2 has its own
+ * variable plumbing. Renderers consume the raw response through the `queryV5` prep utils.
  */
 export function usePanelQuery({
 	panel,
@@ -108,11 +105,6 @@ export function usePanelQuery({
 		minTime,
 	} = useSelector<AppState, GlobalReducer>((state) => state.globalTime);
 
-	// Resolved variable values for this dashboard, published by useResolvedVariables.
-	// Substituted into the request and keyed into the cache so a selection change refetches.
-	const dashboardId = useDashboardStore((s) => s.dashboardId);
-	const variables = useDashboardStore(selectResolvedVariables(dashboardId));
-
 	// `visualization` exists only on variants that declare it — read via `in` narrowing over the
 	// generated union (no cast). `fillSpans` (TimeSeries/Bar only) → formatOptions.fillGaps.
 	const pluginSpec = panel.spec.plugin.spec;
@@ -149,19 +141,8 @@ export function usePanelQuery({
 				endMs,
 				fillGaps,
 				pagination: isPaginated ? { offset, limit: pageSize } : undefined,
-				variables,
 			}),
-		[
-			queries,
-			panelType,
-			startMs,
-			endMs,
-			fillGaps,
-			isPaginated,
-			offset,
-			pageSize,
-			variables,
-		],
+		[queries, panelType, startMs, endMs, fillGaps, isPaginated, offset, pageSize],
 	);
 
 	const legendMap = useMemo(() => extractLegendMap(queries), [queries]);
@@ -186,8 +167,6 @@ export function usePanelQuery({
 			// Each page is its own cache entry (0/default for non-paged kinds).
 			offset,
 			pageSize,
-			// Variable selection changes the request, so it must re-key the cache (refetch).
-			variables,
 		],
 		[
 			panelId,
@@ -203,7 +182,6 @@ export function usePanelQuery({
 			queries,
 			offset,
 			pageSize,
-			variables,
 		],
 	);
 

frontend/src/pages/DashboardPageV2/DashboardContainer/hooks/useResolvedVariables.ts

@@ -1,42 +0,0 @@
-import { useEffect, useMemo } from 'react';
-import type { DashboardtypesGettableDashboardV2DTO } from 'api/generated/services/sigNoz.schemas';
-
-import { dtoToFormModel } from '../DashboardSettings/Variables/variableAdapters';
-import { buildVariablesPayload } from '../queryV5/buildVariablesPayload';
-import { selectVariableValues } from '../store/slices/variableSelectionSlice';
-import { useDashboardStore } from '../store/useDashboardStore';
-
-/**
- * Resolves the dashboard's variable selection into the V5 query payload and
- * publishes it to the store, so `usePanelQuery` reads it by dashboardId without
- * the spec being threaded through the panel tree (the `setEditContext` pattern).
- *
- * Definitions come from the spec; values come from the runtime selection (seeded
- * by the variable bar). Re-publishes whenever either changes, which re-keys the
- * panel queries and triggers a refetch with the new values.
- */
-export function useResolvedVariables(
-	dashboard: DashboardtypesGettableDashboardV2DTO,
-): void {
-	const dashboardId = dashboard.id ?? '';
-
-	const definitions = useMemo(
-		() => (dashboard.spec?.variables ?? []).map(dtoToFormModel),
-		[dashboard.spec?.variables],
-	);
-
-	const selection = useDashboardStore(selectVariableValues(dashboardId));
-	const setResolvedVariables = useDashboardStore((s) => s.setResolvedVariables);
-
-	const resolved = useMemo(
-		() => buildVariablesPayload(definitions, selection),
-		[definitions, selection],
-	);
-
-	useEffect(() => {
-		if (!dashboardId) {
-			return;
-		}
-		setResolvedVariables(dashboardId, resolved);
-	}, [dashboardId, resolved, setResolvedVariables]);
-}

frontend/src/pages/DashboardPageV2/DashboardContainer/index.tsx

@@ -7,7 +7,6 @@ import { useAppContext } from 'providers/App/App';
 
 import DashboardPageToolbar from './DashboardPageToolbar';
 import PanelsAndSectionsLayout from './PanelsAndSectionsLayout';
-import { useResolvedVariables } from './hooks/useResolvedVariables';
 import { useDashboardStore } from './store/useDashboardStore';
 import styles from './DashboardContainer.module.scss';
 import DashboardPageHeader from './components/DashboardPageHeader/DashboardPageHeader';
@@ -51,10 +50,6 @@ function DashboardContainer({
 		setEditContext,
 	]);
 
-	// Resolve the variable selection into the V5 query payload and publish it to
-	// the store, so each panel's query substitutes the bar's selected values.
-	useResolvedVariables(dashboard);
-
 	const spec = dashboard.spec;
 	const image = dashboard.image || Base64Icons[0];
 	const name = spec.display.name;

frontend/src/pages/DashboardPageV2/DashboardContainer/queryV5/__tests__/buildVariablesPayload.test.ts

@@ -1,103 +0,0 @@
-import {
-	emptyVariableFormModel,
-	type VariableFormModel,
-	type VariableType,
-} from '../../DashboardSettings/Variables/variableFormModel';
-import type { VariableSelectionMap } from '../../VariablesBar/selectionTypes';
-import { buildVariablesPayload } from '../buildVariablesPayload';
-
-function variable(
-	name: string,
-	type: VariableType,
-	overrides: Partial<VariableFormModel> = {},
-): VariableFormModel {
-	return { ...emptyVariableFormModel(), name, type, ...overrides };
-}
-
-describe('buildVariablesPayload', () => {
-	it('returns an empty map when there are no definitions', () => {
-		expect(buildVariablesPayload([], {})).toStrictEqual({});
-	});
-
-	it('maps each UI variable type to its V5 wire type', () => {
-		const definitions = [
-			variable('q', 'QUERY'),
-			variable('c', 'CUSTOM'),
-			variable('t', 'TEXT'),
-			variable('d', 'DYNAMIC'),
-		];
-		const selection: VariableSelectionMap = {
-			q: { value: 'a', allSelected: false },
-			c: { value: 'b', allSelected: false },
-			t: { value: 'c', allSelected: false },
-			d: { value: 'e', allSelected: false },
-		};
-		expect(buildVariablesPayload(definitions, selection)).toStrictEqual({
-			q: { type: 'query', value: 'a' },
-			c: { type: 'custom', value: 'b' },
-			t: { type: 'text', value: 'c' },
-			d: { type: 'dynamic', value: 'e' },
-		});
-	});
-
-	it('passes a multi-select array value through verbatim', () => {
-		const definitions = [variable('svc', 'QUERY', { multiSelect: true })];
-		const selection: VariableSelectionMap = {
-			svc: { value: ['a', 'b'], allSelected: false },
-		};
-		expect(buildVariablesPayload(definitions, selection)).toStrictEqual({
-			svc: { type: 'query', value: ['a', 'b'] },
-		});
-	});
-
-	it('collapses a multi-select dynamic ALL selection to the __all__ sentinel', () => {
-		const definitions = [variable('pod', 'DYNAMIC', { multiSelect: true })];
-		const selection: VariableSelectionMap = {
-			pod: { value: null, allSelected: true },
-		};
-		expect(buildVariablesPayload(definitions, selection)).toStrictEqual({
-			pod: { type: 'dynamic', value: '__all__' },
-		});
-	});
-
-	it('does NOT collapse a query ALL selection — it sends the full value array', () => {
-		const definitions = [variable('svc', 'QUERY', { multiSelect: true })];
-		const selection: VariableSelectionMap = {
-			svc: { value: ['a', 'b'], allSelected: true },
-		};
-		expect(buildVariablesPayload(definitions, selection)).toStrictEqual({
-			svc: { type: 'query', value: ['a', 'b'] },
-		});
-	});
-
-	it('falls back to a text variable configured value when unselected', () => {
-		const definitions = [variable('env', 'TEXT', { textValue: 'prod' })];
-		expect(buildVariablesPayload(definitions, {})).toStrictEqual({
-			env: { type: 'text', value: 'prod' },
-		});
-	});
-
-	it('falls back to a list variable configured default when unselected', () => {
-		const definitions = [
-			variable('region', 'QUERY', {
-				defaultValue: { value: 'us-east' },
-			} as unknown as Partial<VariableFormModel>),
-		];
-		expect(buildVariablesPayload(definitions, {})).toStrictEqual({
-			region: { type: 'query', value: 'us-east' },
-		});
-	});
-
-	it('omits a variable with no selection and no default', () => {
-		const definitions = [variable('q', 'QUERY')];
-		expect(buildVariablesPayload(definitions, {})).toStrictEqual({});
-	});
-
-	it('omits an unnamed variable', () => {
-		const definitions = [variable('', 'QUERY')];
-		const selection: VariableSelectionMap = {
-			'': { value: 'x', allSelected: false },
-		};
-		expect(buildVariablesPayload(definitions, selection)).toStrictEqual({});
-	});
-});

frontend/src/pages/DashboardPageV2/DashboardContainer/queryV5/buildQueryRangeRequest.ts

@@ -6,7 +6,6 @@ import type {
 	Querybuildertypesv5PromQueryDTO,
 	Querybuildertypesv5QueryEnvelopeDTO,
 	Querybuildertypesv5QueryRangeRequestDTO,
-	Querybuildertypesv5QueryRangeRequestDTOVariables,
 } from 'api/generated/services/sigNoz.schemas';
 import {
 	Querybuildertypesv5QueryEnvelopeBuilderDTOType,
@@ -203,13 +202,11 @@ export interface BuildQueryRangeRequestArgs {
 	fillGaps?: boolean;
 	/** Server-side paging for raw/list panels, written onto the builder queries' `offset`/`limit`. */
 	pagination?: { offset: number; limit: number };
-	/** Runtime variable values (name → {type,value}) substituted server-side; built by `buildVariablesPayload`. */
-	variables?: Querybuildertypesv5QueryRangeRequestDTOVariables;
 }
 
 /**
  * Builds the V5 query-range request DTO directly from the panel's perses queries (no V1 `Query`
- * intermediary). `variables` carries the runtime selection (empty when the dashboard has none).
+ * intermediary). Variables are absent (`variables: {}`) until V2 grows its own variable plumbing.
  */
 export function buildQueryRangeRequest({
 	queries,
@@ -218,7 +215,6 @@ export function buildQueryRangeRequest({
 	endMs,
 	fillGaps = false,
 	pagination,
-	variables = {},
 }: BuildQueryRangeRequestArgs): Querybuildertypesv5QueryRangeRequestDTO {
 	let envelopes = toQueryEnvelopes(queries);
 	if (panelType === PANEL_TYPES.BAR) {
@@ -238,7 +234,7 @@ export function buildQueryRangeRequest({
 			formatTableResultForUI: panelType === PANEL_TYPES.TABLE,
 			fillGaps,
 		},
-		variables,
+		variables: {},
 	};
 }
 

frontend/src/pages/DashboardPageV2/DashboardContainer/queryV5/buildVariablesPayload.ts

@@ -1,105 +0,0 @@
-import type {
-	Querybuildertypesv5QueryRangeRequestDTOVariables,
-	Querybuildertypesv5VariableItemDTOValue,
-} from 'api/generated/services/sigNoz.schemas';
-import { Querybuildertypesv5VariableTypeDTO } from 'api/generated/services/sigNoz.schemas';
-
-import type {
-	VariableFormModel,
-	VariableType,
-} from '../DashboardSettings/Variables/variableFormModel';
-import type {
-	SelectedVariableValue,
-	VariableSelection,
-	VariableSelectionMap,
-} from '../VariablesBar/selectionTypes';
-
-/**
- * Backend sentinel for "every value selected" on a multi-select dynamic variable.
- * V1 parity (`getDashboardVariables`): only dynamic vars collapse to `__all__`;
- * query/custom multi-selects send the full value array instead. Lowercase — the
- * URL/store `__ALL__` sentinel is a separate serialization concern.
- */
-const ALL_VALUES_SENTINEL = '__all__';
-
-/** UI variable grouping → the V5 wire `variables[].type`. */
-const VARIABLE_TYPE_TO_DTO: Record<
-	VariableType,
-	Querybuildertypesv5VariableTypeDTO
-> = {
-	QUERY: Querybuildertypesv5VariableTypeDTO.query,
-	CUSTOM: Querybuildertypesv5VariableTypeDTO.custom,
-	TEXT: Querybuildertypesv5VariableTypeDTO.text,
-	DYNAMIC: Querybuildertypesv5VariableTypeDTO.dynamic,
-};
-
-/** The variable's configured default, used when nothing is selected yet. */
-function configuredDefault(
-	definition: VariableFormModel,
-): SelectedVariableValue | undefined {
-	if (definition.type === 'TEXT') {
-		return definition.textValue || undefined;
-	}
-	return (
-		definition.defaultValue as { value?: SelectedVariableValue } | undefined
-	)?.value;
-}
-
-/**
- * Resolves the wire value for one variable: the dynamic "ALL" sentinel, else the
- * user's selection, else the configured default. Returns `undefined` when there
- * is nothing meaningful to send (the variable is then omitted from the payload).
- */
-function resolveValue(
-	definition: VariableFormModel,
-	selection: VariableSelection | undefined,
-): Querybuildertypesv5VariableItemDTOValue | undefined {
-	if (
-		definition.type === 'DYNAMIC' &&
-		definition.multiSelect &&
-		selection?.allSelected
-	) {
-		return ALL_VALUES_SENTINEL;
-	}
-
-	const selected = selection?.value;
-	const hasSelection =
-		selected !== null &&
-		selected !== undefined &&
-		!(typeof selected === 'string' && selected === '');
-	if (hasSelection) {
-		return selected as Querybuildertypesv5VariableItemDTOValue;
-	}
-
-	const fallback = configuredDefault(definition);
-	return fallback == null
-		? undefined
-		: (fallback as Querybuildertypesv5VariableItemDTOValue);
-}
-
-/**
- * Builds the V5 `variables` map from the dashboard's variable definitions and the
- * runtime selection, so a panel query substitutes the values the user picked in
- * the variable bar (V1 parity with `getDashboardVariables` + the V5 prep). The
- * definition list supplies the wire `type` (the selection map carries only values).
- */
-export function buildVariablesPayload(
-	definitions: VariableFormModel[],
-	selection: VariableSelectionMap,
-): Querybuildertypesv5QueryRangeRequestDTOVariables {
-	const payload: Querybuildertypesv5QueryRangeRequestDTOVariables = {};
-	definitions.forEach((definition) => {
-		if (!definition.name) {
-			return;
-		}
-		const value = resolveValue(definition, selection[definition.name]);
-		if (value === undefined) {
-			return;
-		}
-		payload[definition.name] = {
-			type: VARIABLE_TYPE_TO_DTO[definition.type],
-			value,
-		};
-	});
-	return payload;
-}

frontend/src/pages/DashboardPageV2/DashboardContainer/store/slices/variableSelectionSlice.ts

@@ -1,4 +1,3 @@
-import type { Querybuildertypesv5QueryRangeRequestDTOVariables } from 'api/generated/services/sigNoz.schemas';
 import type { StateCreator } from 'zustand';
 
 import type {
@@ -13,19 +12,9 @@ import type { DashboardStore } from '../useDashboardStore';
  * localStorage (mirrored to the URL by the bar for shareable links); it is
  * deliberately NOT part of the dashboard spec, so selecting a value never
  * patches the dashboard.
- *
- * `resolvedVariables` is the same selection resolved into the V5 query payload
- * shape (`{ name: { type, value } }`), published by `useResolvedVariables` so
- * `usePanelQuery` reads it without threading the dashboard spec down the tree
- * (the edit-context publish pattern). Transient — not persisted (it is derived
- * from `variableValues` + the spec on every load).
  */
 export interface VariableSelectionSlice {
 	variableValues: Record<string, VariableSelectionMap>;
-	resolvedVariables: Record<
-		string,
-		Querybuildertypesv5QueryRangeRequestDTOVariables
-	>;
 	setVariableValue: (
 		dashboardId: string,
 		name: string,
@@ -33,11 +22,6 @@ export interface VariableSelectionSlice {
 	) => void;
 	/** Bulk set (used to seed from URL/localStorage/defaults on load). */
 	setVariableValues: (dashboardId: string, values: VariableSelectionMap) => void;
-	/** Publish the resolved V5 variables payload for a dashboard. */
-	setResolvedVariables: (
-		dashboardId: string,
-		variables: Querybuildertypesv5QueryRangeRequestDTOVariables,
-	) => void;
 }
 
 export const createVariableSelectionSlice: StateCreator<
@@ -47,7 +31,6 @@ export const createVariableSelectionSlice: StateCreator<
 	VariableSelectionSlice
 > = (set, get) => ({
 	variableValues: {},
-	resolvedVariables: {},
 	setVariableValue: (dashboardId, name, selection): void => {
 		const { variableValues } = get();
 		set({
@@ -63,12 +46,6 @@ export const createVariableSelectionSlice: StateCreator<
 			variableValues: { ...variableValues, [dashboardId]: values },
 		});
 	},
-	setResolvedVariables: (dashboardId, variables): void => {
-		const { resolvedVariables } = get();
-		set({
-			resolvedVariables: { ...resolvedVariables, [dashboardId]: variables },
-		});
-	},
 });
 
 /**
@@ -83,13 +60,3 @@ export const selectVariableValues =
 	(dashboardId: string) =>
 	(state: DashboardStore): VariableSelectionMap =>
 		state.variableValues[dashboardId] ?? EMPTY_SELECTION_MAP;
-
-/** Stable empty payload — same rationale as {@link EMPTY_SELECTION_MAP}. */
-const EMPTY_RESOLVED_VARIABLES: Querybuildertypesv5QueryRangeRequestDTOVariables =
-	{};
-
-/** Selector: the resolved V5 variables payload for a dashboard (empty if none). */
-export const selectResolvedVariables =
-	(dashboardId: string) =>
-	(state: DashboardStore): Querybuildertypesv5QueryRangeRequestDTOVariables =>
-		state.resolvedVariables[dashboardId] ?? EMPTY_RESOLVED_VARIABLES;

pkg/types/dashboardtypes/perses_dashboard_data.go

@@ -138,14 +138,33 @@ func validateQueryAllowedForPanel(plugin QueryPlugin, allowed []QueryPluginKind,
 	return nil
 }
 
-// validateLayouts rejects grid items referencing a panel that doesn't exist.
+const maxLayoutsPerDashboard = 500
+
+// validateLayouts validates the dashboard's layouts: bounded section count,
+// per-item geometry, resolvable panel references, and no panel placed twice.
+// Geometry (validateGridLayoutGeometry) needs only each layout's own data but
+// runs here so its errors can name the layout by index.
 func (d *DashboardSpec) validateLayouts() error {
+	if len(d.Layouts) > maxLayoutsPerDashboard {
+		return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "spec.layouts: dashboard has %d layouts; maximum is %d", len(d.Layouts), maxLayoutsPerDashboard)
+	}
+
+	// Could enforce this but skipping for now: panels in no grid item (orphans)
+	// are allowed.
+
+	// The frontend keys each grid item by its panel id, so placing one panel in
+	// two grid items collides; reject duplicate references dashboard-wide. Maps
+	// each referenced panel key to the path of the item that first placed it.
+	referencedPanels := make(map[string]string, len(d.Panels))
 	for li, layout := range d.Layouts {
 		grid, ok := layout.Spec.(*dashboard.GridLayoutSpec)
 		if !ok {
 			// Unreachable via UnmarshalJSON; reaching here means a Go caller broke the Kind/Spec pairing.
 			return errors.NewInternalf(errors.CodeInternal, "spec.layouts[%d].spec: unexpected layout spec type %T", li, layout.Spec)
 		}
+		if err := validateGridLayoutGeometry(grid, li); err != nil {
+			return err
+		}
 		for ii, item := range grid.Items {
 			path := fmt.Sprintf("spec.layouts[%d].spec.items[%d].content", li, ii)
 			if item.Content == nil {
@@ -158,6 +177,10 @@ func (d *DashboardSpec) validateLayouts() error {
 			if _, ok := d.Panels[key]; !ok {
 				return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "%s: references unknown panel %q", path, key)
 			}
+			if firstPath, dup := referencedPanels[key]; dup {
+				return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "%s: panel %q is already placed by %s", path, key, firstPath)
+			}
+			referencedPanels[key] = path
 		}
 	}
 	return nil

pkg/types/dashboardtypes/perses_dashboard_patch_test.go

@@ -299,19 +299,22 @@ func TestPatchableDashboardV2_Apply(t *testing.T) {
 	// Layout edits
 	// ─────────────────────────────────────────────────────────────────
 
-	t.Run("move panel by editing layout x coordinate", func(t *testing.T) {
-		out, err := decode(t, `[{"op": "replace", "path": "/spec/layouts/0/spec/items/0/x", "value": 6}]`).Apply(base)
+	t.Run("move panel by editing layout y coordinate", func(t *testing.T) {
+		// p2 fills the right half of row 0, so p1 can only move to a fresh row
+		// without tripping overlap validation.
+		out, err := decode(t, `[{"op": "replace", "path": "/spec/layouts/0/spec/items/0/y", "value": 6}]`).Apply(base)
 		require.NoError(t, err)
 		raw := jsonOf(t, out)
-		// The first item used to live at x=0, now lives at x=6.
-		assert.Contains(t, raw, `"x":6,"y":0,"width":6,"height":6,"content":{"$ref":"#/spec/panels/p1"}`)
+		// The first item used to live at y=0, now lives at y=6.
+		assert.Contains(t, raw, `"x":0,"y":6,"width":6,"height":6,"content":{"$ref":"#/spec/panels/p1"}`)
 	})
 
 	t.Run("resize panel by editing layout width", func(t *testing.T) {
-		out, err := decode(t, `[{"op": "replace", "path": "/spec/layouts/0/spec/items/0/width", "value": 12}]`).Apply(base)
+		// p2 sits at x=6, so p1 (at x=0) can only shrink; widening it would overlap.
+		out, err := decode(t, `[{"op": "replace", "path": "/spec/layouts/0/spec/items/0/width", "value": 3}]`).Apply(base)
 		require.NoError(t, err)
 		raw := jsonOf(t, out)
-		assert.Contains(t, raw, `"width":12`)
+		assert.Contains(t, raw, `"width":3`)
 	})
 
 	t.Run("rename layout row title", func(t *testing.T) {
@@ -321,11 +324,12 @@ func TestPatchableDashboardV2_Apply(t *testing.T) {
 	})
 
 	t.Run("append layout item", func(t *testing.T) {
-		out, err := decode(t, `[{
-			"op": "add",
-			"path": "/spec/layouts/0/spec/items/-",
-			"value": {"x": 0, "y": 6, "width": 12, "height": 6, "content": {"$ref": "#/spec/panels/p1"}}
-		}]`).Apply(base)
+		// Appending needs a not-yet-placed panel, so add one in the same patch;
+		// re-placing p1 or p2 would be a duplicate reference.
+		out, err := decode(t, `[
+			{"op": "add", "path": "/spec/panels/p3", "value": {"kind": "Panel", "spec": {"plugin": {"kind": "signoz/TablePanel", "spec": {}}, "queries": [{"kind": "time_series", "spec": {"plugin": {"kind": "signoz/BuilderQuery", "spec": {"name": "A", "signal": "logs", "aggregations": [{"expression": "count()"}]}}}}]}}},
+			{"op": "add", "path": "/spec/layouts/0/spec/items/-", "value": {"x": 0, "y": 6, "width": 12, "height": 6, "content": {"$ref": "#/spec/panels/p3"}}}
+		]`).Apply(base)
 		require.NoError(t, err)
 		// Item count went 2 → 3.
 		raw := jsonOf(t, out)

pkg/types/dashboardtypes/perses_dashboard_test.go

@@ -8,6 +8,7 @@ import (
 	"time"
 
 	"github.com/SigNoz/signoz/pkg/errors"
+	"github.com/perses/spec/go/dashboard"
 	"github.com/stretchr/testify/assert"
 	"github.com/stretchr/testify/require"
 	"k8s.io/apimachinery/pkg/util/validation"
@@ -1442,3 +1443,123 @@ func TestPanelTypeQueryTypeCompatibility(t *testing.T) {
 		})
 	}
 }
+
+func TestValidateGridGeometry(t *testing.T) {
+	tests := []struct {
+		scenario         string
+		items            []dashboard.GridItem
+		expectErrContain string
+	}{
+		{
+			scenario:         "valid side-by-side items",
+			items:            []dashboard.GridItem{{X: 0, Y: 0, Width: 6, Height: 6}, {X: 6, Y: 0, Width: 6, Height: 6}},
+			expectErrContain: "",
+		},
+		{
+			scenario:         "valid full-width item",
+			items:            []dashboard.GridItem{{X: 0, Y: 0, Width: 12, Height: 6}},
+			expectErrContain: "",
+		},
+		{
+			scenario:         "stacked items do not overlap",
+			items:            []dashboard.GridItem{{X: 0, Y: 0, Width: 6, Height: 6}, {X: 0, Y: 6, Width: 6, Height: 6}},
+			expectErrContain: "",
+		},
+		{
+			scenario:         "zero width",
+			items:            []dashboard.GridItem{{X: 0, Y: 0, Width: 0, Height: 6}},
+			expectErrContain: "width must be at least 1",
+		},
+		{
+			scenario:         "zero height",
+			items:            []dashboard.GridItem{{X: 0, Y: 0, Width: 6, Height: 0}},
+			expectErrContain: "height must be at least 1",
+		},
+		{
+			scenario:         "negative x",
+			items:            []dashboard.GridItem{{X: -1, Y: 0, Width: 6, Height: 6}},
+			expectErrContain: "x must not be negative",
+		},
+		{
+			scenario:         "negative y",
+			items:            []dashboard.GridItem{{X: 0, Y: -1, Width: 6, Height: 6}},
+			expectErrContain: "y must not be negative",
+		},
+		{
+			scenario:         "width wider than grid",
+			items:            []dashboard.GridItem{{X: 0, Y: 0, Width: 13, Height: 6}},
+			expectErrContain: "width (13) exceeds grid width 12",
+		},
+		{
+			scenario:         "x at grid width",
+			items:            []dashboard.GridItem{{X: 12, Y: 0, Width: 1, Height: 6}},
+			expectErrContain: "x (12) must be less than grid width 12",
+		},
+		{
+			scenario:         "x plus width overflows grid",
+			items:            []dashboard.GridItem{{X: 8, Y: 0, Width: 6, Height: 6}},
+			expectErrContain: "x (8) + width (6) exceeds grid width 12",
+		},
+		{
+			scenario:         "overlapping items",
+			items:            []dashboard.GridItem{{X: 0, Y: 0, Width: 6, Height: 6}, {X: 3, Y: 3, Width: 6, Height: 6}},
+			expectErrContain: "items[0] and items[1] overlap",
+		},
+	}
+	for _, test := range tests {
+		t.Run(test.scenario, func(t *testing.T) {
+			err := validateGridLayoutGeometry(&dashboard.GridLayoutSpec{Items: test.items}, 0)
+			if test.expectErrContain == "" {
+				require.NoError(t, err)
+				return
+			}
+			require.Error(t, err)
+			require.Contains(t, err.Error(), test.expectErrContain)
+		})
+	}
+}
+
+func TestValidateGridItemLimit(t *testing.T) {
+	err := validateGridLayoutGeometry(&dashboard.GridLayoutSpec{Items: make([]dashboard.GridItem, maxItemsPerGridLayout+1)}, 0)
+	require.Error(t, err)
+	require.Contains(t, err.Error(), "maximum is")
+}
+
+// Both panel refs are valid, so this errors only if geometry validation runs on
+// the unmarshal path — it does, via DashboardSpec.Validate -> validateLayouts.
+func TestInvalidateLayoutOverlapViaUnmarshal(t *testing.T) {
+	data := []byte(`{
+		"panels": {
+			"p1": {"kind": "Panel", "spec": {"plugin": {"kind": "signoz/TablePanel", "spec": {}}, "queries": [{"kind": "time_series", "spec": {"plugin": {"kind": "signoz/BuilderQuery", "spec": {"name": "A", "signal": "logs", "aggregations": [{"expression": "count()"}]}}}}]}},
+			"p2": {"kind": "Panel", "spec": {"plugin": {"kind": "signoz/TablePanel", "spec": {}}, "queries": [{"kind": "time_series", "spec": {"plugin": {"kind": "signoz/BuilderQuery", "spec": {"name": "A", "signal": "logs", "aggregations": [{"expression": "count()"}]}}}}]}}
+		},
+		"layouts": [{"kind": "Grid", "spec": {"items": [
+			{"x": 0, "y": 0, "width": 6, "height": 6, "content": {"$ref": "#/spec/panels/p1"}},
+			{"x": 3, "y": 3, "width": 6, "height": 6, "content": {"$ref": "#/spec/panels/p2"}}
+		]}}]
+	}`)
+	_, err := unmarshalDashboard(data)
+	require.Error(t, err)
+	require.Contains(t, err.Error(), "overlap")
+}
+
+// The frontend keys each grid item by its panel id, so the same panel placed by
+// two grid items crashes the section; the backend rejects it dashboard-wide. The
+// two items are side by side so they clear the overlap check first.
+func TestInvalidateDuplicatePanelReference(t *testing.T) {
+	data := []byte(`{
+		"panels": {
+			"p1": {"kind": "Panel", "spec": {"plugin": {"kind": "signoz/TablePanel", "spec": {}}, "queries": [{"kind": "time_series", "spec": {"plugin": {"kind": "signoz/BuilderQuery", "spec": {"name": "A", "signal": "logs", "aggregations": [{"expression": "count()"}]}}}}]}}
+		},
+		"layouts": [{"kind": "Grid", "spec": {"items": [
+			{"x": 0, "y": 0, "width": 6, "height": 6, "content": {"$ref": "#/spec/panels/p1"}},
+			{"x": 6, "y": 0, "width": 6, "height": 6, "content": {"$ref": "#/spec/panels/p1"}}
+		]}}]
+	}`)
+	_, err := unmarshalDashboard(data)
+	require.Error(t, err)
+	require.Contains(t, err.Error(), "already placed")
+	// Both offending grid items are named.
+	require.Contains(t, err.Error(), "spec.layouts[0].spec.items[0].content")
+	require.Contains(t, err.Error(), "spec.layouts[0].spec.items[1].content")
+}

pkg/types/dashboardtypes/perses_replicas.go

@@ -322,6 +322,55 @@ func (l *Layout) UnmarshalJSON(data []byte) error {
 	return nil
 }
 
+const (
+	gridColumnCount       = 12
+	maxItemsPerGridLayout = 100
+)
+
+// validateGridLayoutGeometry checks a single grid layout's item geometry (size,
+// position, and intra-section overlap), which Perses does not. It reads only the
+// layout's own items; layoutIndex is supplied by the caller (validateLayouts)
+// solely to name the layout in error paths.
+func validateGridLayoutGeometry(spec *dashboard.GridLayoutSpec, layoutIndex int) error {
+	if len(spec.Items) > maxItemsPerGridLayout {
+		return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "spec.layouts[%d].spec.items: has %d items; maximum is %d", layoutIndex, len(spec.Items), maxItemsPerGridLayout)
+	}
+	for i, item := range spec.Items {
+		// The width/x bounds keep x+width small enough not to overflow.
+		switch {
+		case item.Width < 1:
+			return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "spec.layouts[%d].spec.items[%d]: width must be at least 1, got %d", layoutIndex, i, item.Width)
+		case item.Height < 1:
+			return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "spec.layouts[%d].spec.items[%d]: height must be at least 1, got %d", layoutIndex, i, item.Height)
+		case item.X < 0:
+			return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "spec.layouts[%d].spec.items[%d]: x must not be negative, got %d", layoutIndex, i, item.X)
+		case item.Y < 0:
+			return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "spec.layouts[%d].spec.items[%d]: y must not be negative, got %d", layoutIndex, i, item.Y)
+		case item.Width > gridColumnCount:
+			return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "spec.layouts[%d].spec.items[%d]: width (%d) exceeds grid width %d", layoutIndex, i, item.Width, gridColumnCount)
+		case item.X >= gridColumnCount:
+			return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "spec.layouts[%d].spec.items[%d]: x (%d) must be less than grid width %d", layoutIndex, i, item.X, gridColumnCount)
+		case item.X+item.Width > gridColumnCount:
+			return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "spec.layouts[%d].spec.items[%d]: x (%d) + width (%d) exceeds grid width %d", layoutIndex, i, item.X, item.Width, gridColumnCount)
+		}
+		// Could cap y/height but skipping for now: the grid grows vertically
+		// without limit (frontend autoSize), so "too big" has no natural bound.
+	}
+	// Two items overlap iff their rectangles intersect on both axes.
+	overlap := func(a, b dashboard.GridItem) bool {
+		return a.X < b.X+b.Width && b.X < a.X+a.Width &&
+			a.Y < b.Y+b.Height && b.Y < a.Y+a.Height
+	}
+	for i := 0; i < len(spec.Items); i++ {
+		for j := i + 1; j < len(spec.Items); j++ {
+			if overlap(spec.Items[i], spec.Items[j]) {
+				return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "spec.layouts[%d].spec.items[%d] and items[%d] overlap", layoutIndex, i, j)
+			}
+		}
+	}
+	return nil
+}
+
 func (Layout) JSONSchemaOneOf() []any {
 	return []any{
 		LayoutEnvelope[dashboard.GridLayoutSpec]{Kind: string(dashboard.KindGridLayout)},

tests/integration/tests/dashboard/03_v2_dashboard.py

@@ -173,6 +173,125 @@ def test_create_rejects_too_many_tags(
     assert response.json()["error"]["code"] == "dashboard_invalid_input"
 
 
+def test_create_rejects_invalid_grid_layout(
+    signoz: SigNoz,
+    create_user_admin: Operation,  # pylint: disable=unused-argument
+    get_token: Callable[[str, str], str],
+):
+    token = get_token(USER_ADMIN_EMAIL, USER_ADMIN_PASSWORD)
+
+    def panel(name: str) -> dict:
+        return {
+            "kind": "Panel",
+            "spec": {
+                "display": {"name": name},
+                "plugin": {"kind": "signoz/TablePanel", "spec": {}},
+                "queries": [
+                    {
+                        "kind": "time_series",
+                        "spec": {
+                            "plugin": {
+                                "kind": "signoz/BuilderQuery",
+                                "spec": {
+                                    "name": "A",
+                                    "signal": "logs",
+                                    "aggregations": [{"expression": "count()"}],
+                                },
+                            }
+                        },
+                    }
+                ],
+            },
+        }
+
+    # Two grid items reference valid, distinct panels but share cells, so the
+    # overlap is the only violation.
+    response = requests.post(
+        signoz.self.host_configs["8080"].get(BASE_URL),
+        json={
+            "schemaVersion": "v6",
+            "name": "rejects-overlap",
+            "spec": {
+                "display": {"name": "Rejects Overlap"},
+                "panels": {"p1": panel("P1"), "p2": panel("P2")},
+                "layouts": [
+                    {
+                        "kind": "Grid",
+                        "spec": {
+                            "items": [
+                                {"x": 0, "y": 0, "width": 6, "height": 6, "content": {"$ref": "#/spec/panels/p1"}},
+                                {"x": 3, "y": 3, "width": 6, "height": 6, "content": {"$ref": "#/spec/panels/p2"}},
+                            ]
+                        },
+                    }
+                ],
+            },
+            "tags": [],
+        },
+        headers={"Authorization": f"Bearer {token}"},
+        timeout=5,
+    )
+    assert response.status_code == HTTPStatus.BAD_REQUEST
+    assert response.json()["error"]["code"] == "dashboard_invalid_input"
+    assert "overlap" in response.json()["error"]["message"]
+
+    # One panel placed by two grid items (side by side, so they clear the overlap
+    # check first). The frontend keys grid items by panel id, so this is rejected.
+    response = requests.post(
+        signoz.self.host_configs["8080"].get(BASE_URL),
+        json={
+            "schemaVersion": "v6",
+            "name": "rejects-multiref",
+            "spec": {
+                "display": {"name": "Rejects Multiref"},
+                "panels": {"p1": panel("P1")},
+                "layouts": [
+                    {
+                        "kind": "Grid",
+                        "spec": {
+                            "items": [
+                                {"x": 0, "y": 0, "width": 6, "height": 6, "content": {"$ref": "#/spec/panels/p1"}},
+                                {"x": 6, "y": 0, "width": 6, "height": 6, "content": {"$ref": "#/spec/panels/p1"}},
+                            ]
+                        },
+                    }
+                ],
+            },
+            "tags": [],
+        },
+        headers={"Authorization": f"Bearer {token}"},
+        timeout=5,
+    )
+    assert response.status_code == HTTPStatus.BAD_REQUEST
+    assert response.json()["error"]["code"] == "dashboard_invalid_input"
+    assert "already placed" in response.json()["error"]["message"]
+
+    # More grid items than allowed. The item-count check runs before the
+    # panel-ref check, so content-less items suffice here.
+    response = requests.post(
+        signoz.self.host_configs["8080"].get(BASE_URL),
+        json={
+            "schemaVersion": "v6",
+            "name": "rejects-too-many-items",
+            "spec": {
+                "display": {"name": "Rejects Too Many"},
+                "layouts": [
+                    {
+                        "kind": "Grid",
+                        "spec": {"items": [{"x": 0, "y": 0, "width": 1, "height": 1} for _ in range(101)]},
+                    }
+                ],
+            },
+            "tags": [],
+        },
+        headers={"Authorization": f"Bearer {token}"},
+        timeout=5,
+    )
+    assert response.status_code == HTTPStatus.BAD_REQUEST
+    assert response.json()["error"]["code"] == "dashboard_invalid_input"
+    assert "maximum" in response.json()["error"]["message"]
+
+
 @pytest.mark.parametrize(
     "params",
     [