feat(quick-filters): fetch values from fields/values (CheckboxV2) on all pages

Signal pages (logs, traces, exceptions, api monitoring, meter) now render
CheckboxV2 so quick filter values come from fields/values instead of the old v3
attribute_values. Added a shared useSignalFieldApis hook for the time range;
related values stay off (infra only). Meter's source is derived from the quick
filter source inside CheckboxV2. Bool fields synthesize true/false since the api
returns empty for them.

frontend/src/api/quickFilters/getCustomFilters.ts

@@ -1,25 +0,0 @@
-import axios from 'api';
-import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
-import { AxiosError } from 'axios';
-import { ErrorResponse, SuccessResponse } from 'types/api';
-import { PayloadProps, Props } from 'types/api/quickFilters/getCustomFilters';
-
-const getCustomFilters = async (
-	props: Props,
-): Promise<SuccessResponse<PayloadProps> | ErrorResponse> => {
-	const { signal } = props;
-	try {
-		const response = await axios.get(`/orgs/me/filters/${signal}`);
-
-		return {
-			statusCode: 200,
-			error: null,
-			message: 'Success',
-			payload: response.data.data,
-		};
-	} catch (error) {
-		return ErrorResponseHandler(error as AxiosError);
-	}
-};
-
-export default getCustomFilters;

frontend/src/api/quickFilters/updateCustomFilters.ts

@@ -1,13 +0,0 @@
-import axios from 'api';
-import { AxiosError } from 'axios';
-import { SuccessResponse } from 'types/api';
-import { UpdateCustomFiltersProps } from 'types/api/quickFilters/updateCustomFilters';
-
-const updateCustomFiltersAPI = async (
-	props: UpdateCustomFiltersProps,
-): Promise<SuccessResponse<void> | AxiosError> =>
-	axios.put(`/orgs/me/filters`, {
-		...props.data,
-	});
-
-export default updateCustomFiltersAPI;

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

@@ -3,6 +3,7 @@ import { Input } from '@signozhq/ui/input';
 import { Skeleton } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import { LoaderCircle } from '@signozhq/icons';
+import { TelemetrytypesSourceDTO } from 'api/generated/services/sigNoz.schemas';
 import {
 	IQuickFiltersConfig,
 	QuickFilterChangeEventData,
@@ -74,6 +75,10 @@ export default function CheckboxFilterV2(
 		searchText,
 		existingQuery,
 		metricNamespace: useFieldApis.metricNamespace,
+		source:
+			source === QuickFiltersSource.METER_EXPLORER
+				? TelemetrytypesSourceDTO.meter
+				: undefined,
 		startUnixMilli: useFieldApis.startUnixMilli,
 		endUnixMilli: useFieldApis.endUnixMilli,
 		enabled: isOpen,

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

@@ -1,7 +1,11 @@
 import { useMemo } from 'react';
 import { useGetFieldsValues } from 'api/generated/services/fields';
-import { TelemetrytypesSignalDTO } from 'api/generated/services/sigNoz.schemas';
+import {
+	TelemetrytypesSignalDTO,
+	TelemetrytypesSourceDTO,
+} from 'api/generated/services/sigNoz.schemas';
 import { IQuickFiltersConfig } from 'components/QuickFilters/types';
+import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { DataSource } from 'types/common/queryBuilder';
 import { FIELD_API_CACHE_TIME } from 'constants/queryCacheTime';
 
@@ -10,6 +14,7 @@ interface UseFieldValuesProps {
 	searchText: string;
 	existingQuery?: string;
 	metricNamespace?: string;
+	source?: TelemetrytypesSourceDTO;
 	startUnixMilli?: number;
 	endUnixMilli?: number;
 	enabled: boolean;
@@ -33,6 +38,7 @@ export function useFieldValues({
 	searchText,
 	existingQuery,
 	metricNamespace,
+	source,
 	startUnixMilli,
 	endUnixMilli,
 	enabled,
@@ -46,6 +52,7 @@ export function useFieldValues({
 			searchText,
 			existingQuery,
 			metricNamespace,
+			source,
 			startUnixMilli,
 			// This field does not affect the backend but I wanted to keep it here
 			// in case we add the support in the future
@@ -75,6 +82,12 @@ export function useFieldValues({
 	}, [data]);
 
 	const allValues: string[] = useMemo(() => {
+		// Bool fields should always offer true/false.
+		// The values api returns nothing for them.
+		if (filter.attributeKey.dataType === DataTypes.bool) {
+			return ['true', 'false'];
+		}
+
 		const values = data?.data?.values;
 		if (!values) {
 			return [];
@@ -91,7 +104,7 @@ export function useFieldValues({
 				.map((value) => value.toString()) || [];
 
 		return [...stringValues, ...numberValues];
-	}, [data]);
+	}, [data, filter.attributeKey.dataType]);
 
 	return { relatedValues, allValues, isLoading, isFetching };
 }

frontend/src/components/QuickFilters/QuickFiltersSettings/AddedFilters.tsx

@@ -17,7 +17,7 @@ import { CSS } from '@dnd-kit/utilities';
 import { Button } from 'antd';
 import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
 import { GripVertical } from '@signozhq/icons';
-import { Filter as FilterType } from 'types/api/quickFilters/getCustomFilters';
+import { TelemetryFieldKey } from 'types/api/v5/queryRange';
 
 function SortableFilter({
 	filter,
@@ -25,13 +25,13 @@ function SortableFilter({
 	allowDrag,
 	allowRemove,
 }: {
-	filter: FilterType;
-	onRemove: (filter: FilterType) => void;
+	filter: TelemetryFieldKey;
+	onRemove: (filter: TelemetryFieldKey) => void;
 	allowDrag: boolean;
 	allowRemove: boolean;
 }): JSX.Element {
 	const { attributes, listeners, setNodeRef, transform, transition } =
-		useSortable({ id: filter.key });
+		useSortable({ id: filter.key as string });
 
 	const style = {
 		transform: CSS.Transform.toString(transform),
@@ -46,14 +46,14 @@ function SortableFilter({
 		>
 			<div {...attributes} {...listeners} className="drag-handle">
 				{allowDrag && <GripVertical size={16} />}
-				{filter.key}
+				{filter.name}
 			</div>
 			{allowRemove && (
 				<Button
 					className="remove-filter-btn periscope-btn"
 					size="small"
 					onClick={(): void => {
-						onRemove(filter as FilterType);
+						onRemove(filter);
 					}}
 				>
 					Remove
@@ -69,8 +69,8 @@ function AddedFilters({
 	setAddedFilters,
 }: {
 	inputValue: string;
-	addedFilters: FilterType[];
-	setAddedFilters: React.Dispatch<React.SetStateAction<FilterType[]>>;
+	addedFilters: TelemetryFieldKey[];
+	setAddedFilters: React.Dispatch<React.SetStateAction<TelemetryFieldKey[]>>;
 }): JSX.Element {
 	const sensors = useSensors(useSensor(PointerSensor));
 
@@ -90,12 +90,12 @@ function AddedFilters({
 	const filteredAddedFilters = useMemo(
 		() =>
 			addedFilters.filter((filter) =>
-				filter.key.toLowerCase().includes(inputValue.toLowerCase()),
+				filter.name.toLowerCase().includes(inputValue.toLowerCase()),
 			),
 		[addedFilters, inputValue],
 	);
 
-	const handleRemoveFilter = (filter: FilterType): void => {
+	const handleRemoveFilter = (filter: TelemetryFieldKey): void => {
 		setAddedFilters((prev) => prev.filter((f) => f.key !== filter.key));
 	};
 
@@ -116,7 +116,7 @@ function AddedFilters({
 							<div className="no-values-found">No values found</div>
 						) : (
 							<SortableContext
-								items={addedFilters.map((f) => f.key)}
+								items={addedFilters.map((f) => f.key as string)}
 								strategy={verticalListSortingStrategy}
 								disabled={!allowDrag}
 							>

frontend/src/components/QuickFilters/QuickFiltersSettings/OtherFilters.tsx

@@ -4,14 +4,9 @@ import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
 import { SIGNAL_DATA_SOURCE_MAP } from 'components/QuickFilters/QuickFiltersSettings/constants';
 import { SignalType } from 'components/QuickFilters/types';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
-import { useGetAggregateKeys } from 'hooks/queryBuilder/useGetAggregateKeys';
-import { useGetAttributeSuggestions } from 'hooks/queryBuilder/useGetAttributeSuggestions';
+import { buildCompositeKey } from 'container/OptionsMenu/utils';
 import { useGetQueryKeySuggestions } from 'hooks/querySuggestions/useGetQueryKeySuggestions';
-import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
-import { TagFilter } from 'types/api/queryBuilder/queryBuilderData';
-import { QueryKeyDataSuggestionsProps } from 'types/api/querySuggestions/types';
-import { Filter as FilterType } from 'types/api/quickFilters/getCustomFilters';
-import { DataSource } from 'types/common/queryBuilder';
+import { FieldContext, TelemetryFieldKey } from 'types/api/v5/queryRange';
 
 function OtherFiltersSkeleton(): JSX.Element {
 	return (
@@ -37,106 +32,49 @@ function OtherFilters({
 }: {
 	signal: SignalType | undefined;
 	inputValue: string;
-	addedFilters: FilterType[];
-	setAddedFilters: React.Dispatch<React.SetStateAction<FilterType[]>>;
+	addedFilters: TelemetryFieldKey[];
+	setAddedFilters: React.Dispatch<React.SetStateAction<TelemetryFieldKey[]>>;
 }): JSX.Element {
-	const isLogDataSource = useMemo(
-		() => SIGNAL_DATA_SOURCE_MAP[signal as SignalType] === DataSource.LOGS,
-		[signal],
-	);
-	const isMeterDataSource = useMemo(
-		() => signal && signal === SignalType.METER_EXPLORER,
-		[signal],
+	const isMeterDataSource = signal === SignalType.METER_EXPLORER;
+
+	const { data, isFetching } = useGetQueryKeySuggestions(
+		{
+			searchText: inputValue,
+			signal: SIGNAL_DATA_SOURCE_MAP[signal as SignalType],
+			signalSource: isMeterDataSource ? 'meter' : '',
+		},
+		{
+			queryKey: [REACT_QUERY_KEY.GET_OTHER_FILTERS, signal, inputValue],
+			enabled: !!signal,
+		},
 	);
 
-	const { data: suggestionsData, isFetching: isFetchingSuggestions } =
-		useGetAttributeSuggestions(
-			{
-				searchText: inputValue,
-				dataSource: SIGNAL_DATA_SOURCE_MAP[signal as SignalType],
-				filters: {} as TagFilter,
-			},
-			{
-				queryKey: [REACT_QUERY_KEY.GET_OTHER_FILTERS, inputValue],
-				enabled: !!signal && isLogDataSource,
-			},
-		);
+	const otherFilters = useMemo<TelemetryFieldKey[]>(() => {
+		const rawSuggestions = Object.values(data?.data?.data?.keys || {}).flat();
+		// Normalize: synthesize the composite `key` once so downstream reads (dedupe,
+		// add, render) can trust it.
+		const suggestions: TelemetryFieldKey[] = rawSuggestions.map((attr) => ({
+			name: attr.name,
+			signal: attr.signal,
+			fieldContext: attr.fieldContext as FieldContext,
+			fieldDataType: attr.fieldDataType,
+			key: buildCompositeKey(attr.name, attr.fieldContext, attr.fieldDataType),
+		}));
 
-	const { data: aggregateKeysData, isFetching: isFetchingAggregateKeys } =
-		useGetAggregateKeys(
-			{
-				searchText: inputValue,
-				dataSource: SIGNAL_DATA_SOURCE_MAP[signal as SignalType],
-				aggregateOperator: 'noop',
-				aggregateAttribute: '',
-				tagType: '',
-			},
-			{
-				queryKey: [REACT_QUERY_KEY.GET_OTHER_FILTERS, inputValue],
-				enabled: !!signal && !isLogDataSource && !isMeterDataSource,
-			},
+		const addedKeys = new Set(
+			addedFilters.map((filter) =>
+				buildCompositeKey(filter.name, filter.fieldContext, filter.fieldDataType),
+			),
 		);
+		return suggestions.filter((attr) => !addedKeys.has(attr.key as string));
+	}, [data, addedFilters]);
 
-	const { data: fieldKeysData, isLoading: isLoadingFieldKeys } =
-		useGetQueryKeySuggestions(
-			{
-				searchText: inputValue,
-				signal: SIGNAL_DATA_SOURCE_MAP[signal as SignalType],
-				signalSource: 'meter',
-			},
-			{
-				queryKey: [REACT_QUERY_KEY.GET_OTHER_FILTERS, inputValue],
-				enabled: !!signal && isMeterDataSource,
-			},
-		);
-
-	const otherFilters = useMemo(() => {
-		let filterAttributes;
-		if (isLogDataSource) {
-			filterAttributes = suggestionsData?.payload?.attributes || [];
-		} else if (isMeterDataSource) {
-			const fieldKeys: QueryKeyDataSuggestionsProps[] = Object.values(
-				fieldKeysData?.data?.data?.keys || {},
-			)?.flat();
-			filterAttributes = fieldKeys.map(
-				(attr) =>
-					({
-						key: attr.name,
-						dataType: attr.fieldDataType,
-						type: attr.fieldContext,
-						signal: attr.signal,
-					}) as BaseAutocompleteData,
-			);
-		} else {
-			filterAttributes = aggregateKeysData?.payload?.attributeKeys || [];
-		}
-		return filterAttributes?.filter(
-			(attr) => !addedFilters.some((filter) => filter.key === attr.key),
-		);
-	}, [
-		suggestionsData,
-		aggregateKeysData,
-		addedFilters,
-		isLogDataSource,
-		fieldKeysData,
-		isMeterDataSource,
-	]);
-
-	const handleAddFilter = (filter: FilterType): void => {
-		setAddedFilters((prev) => [
-			...prev,
-			{
-				key: filter.key,
-				dataType: filter.dataType,
-				type: filter.type,
-			},
-		]);
+	const handleAddFilter = (filter: TelemetryFieldKey): void => {
+		setAddedFilters((prev) => [...prev, filter]);
 	};
 
 	const renderFilters = (): React.ReactNode => {
-		const isLoading =
-			isFetchingSuggestions || isFetchingAggregateKeys || isLoadingFieldKeys;
-		if (isLoading) {
+		if (isFetching) {
 			return <OtherFiltersSkeleton />;
 		}
 		if (!otherFilters?.length) {
@@ -145,11 +83,11 @@ function OtherFilters({
 
 		return otherFilters.map((filter) => (
 			<div key={filter.key} className="qf-filter-item other-filters-item">
-				<div className="qf-filter-key">{filter.key}</div>
+				<div className="qf-filter-key">{filter.name}</div>
 				<Button
 					className="add-filter-btn periscope-btn"
 					size="small"
-					onClick={(): void => handleAddFilter(filter as FilterType)}
+					onClick={(): void => handleAddFilter(filter)}
 				>
 					Add
 				</Button>

frontend/src/components/QuickFilters/QuickFiltersSettings/QuickFiltersSettings.tsx

@@ -1,8 +1,7 @@
-import { useMemo } from 'react';
 import { Input } from '@signozhq/ui/input';
 import { Button } from 'antd';
 import { Check, TableColumnsSplit, X } from '@signozhq/icons';
-import { Filter as FilterType } from 'types/api/quickFilters/getCustomFilters';
+import { TelemetryFieldKey } from 'types/api/v5/queryRange';
 
 import { SignalType } from '../types';
 import AddedFilters from './AddedFilters';
@@ -19,7 +18,7 @@ function QuickFiltersSettings({
 }: {
 	signal: SignalType | undefined;
 	setIsSettingsOpen: (isSettingsOpen: boolean) => void;
-	customFilters: FilterType[];
+	customFilters: TelemetryFieldKey[];
 	refetchCustomFilters: () => void;
 }): JSX.Element {
 	const {
@@ -28,6 +27,7 @@ function QuickFiltersSettings({
 		addedFilters,
 		setAddedFilters,
 		handleSaveChanges,
+		hasUnsavedChanges,
 		isUpdatingCustomFilters,
 		inputValue,
 		handleInputChange,
@@ -39,18 +39,6 @@ function QuickFiltersSettings({
 		signal,
 	});
 
-	const hasUnsavedChanges = useMemo(
-		() =>
-			// check if both arrays have the same length and same order of elements
-			!(
-				addedFilters.length === customFilters.length &&
-				addedFilters.every(
-					(filter, index) => filter.key === customFilters[index].key,
-				)
-			),
-		[addedFilters, customFilters],
-	);
-
 	return (
 		<>
 			<div className="qf-header">

frontend/src/components/QuickFilters/QuickFiltersSettings/hooks/useQuickFilterSettings.tsx

@@ -1,27 +1,31 @@
-import { useCallback, useState } from 'react';
-import { useMutation } from 'react-query';
+import { useCallback, useMemo, useState } from 'react';
+import { useUpdateQuickFilters } from 'api/generated/services/quick-filter';
 import logEvent from 'api/common/logEvent';
-import updateCustomFiltersAPI from 'api/quickFilters/updateCustomFilters';
-import axios, { AxiosError } from 'axios';
+import {
+	TelemetrytypesFieldContextDTO,
+	TelemetrytypesFieldDataTypeDTO,
+} from 'api/generated/services/sigNoz.schemas';
 import { SignalType } from 'components/QuickFilters/types';
 import { SOMETHING_WENT_WRONG } from 'constants/api';
+import { buildCompositeKey } from 'container/OptionsMenu/utils';
 import useDebouncedFn from 'hooks/useDebouncedFunction';
 import { useNotifications } from 'hooks/useNotifications';
-import { Filter as FilterType } from 'types/api/quickFilters/getCustomFilters';
+import { TelemetryFieldKey } from 'types/api/v5/queryRange';
 
 interface UseQuickFilterSettingsProps {
 	setIsSettingsOpen: (isSettingsOpen: boolean) => void;
-	customFilters: FilterType[];
+	customFilters: TelemetryFieldKey[];
 	refetchCustomFilters: () => void;
 	signal?: SignalType;
 }
 
 interface UseQuickFilterSettingsReturn {
-	addedFilters: FilterType[];
-	setAddedFilters: React.Dispatch<React.SetStateAction<FilterType[]>>;
+	addedFilters: TelemetryFieldKey[];
+	setAddedFilters: React.Dispatch<React.SetStateAction<TelemetryFieldKey[]>>;
 	handleSettingsClose: () => void;
 	handleDiscardChanges: () => void;
 	handleSaveChanges: () => void;
+	hasUnsavedChanges: boolean;
 	isUpdatingCustomFilters: boolean;
 	inputValue: string;
 	setInputValue: React.Dispatch<React.SetStateAction<string>>;
@@ -37,27 +41,43 @@ const useQuickFilterSettings = ({
 }: UseQuickFilterSettingsProps): UseQuickFilterSettingsReturn => {
 	const [inputValue, setInputValue] = useState<string>('');
 	const [debouncedInputValue, setDebouncedInputValue] = useState<string>('');
-	const [addedFilters, setAddedFilters] = useState<FilterType[]>(customFilters);
+	const normalizedCustomFilters = useMemo<TelemetryFieldKey[]>(
+		() =>
+			customFilters.map((filter) => ({
+				...filter,
+				key: buildCompositeKey(
+					filter.name,
+					filter.fieldContext,
+					filter.fieldDataType,
+				),
+			})),
+		[customFilters],
+	);
+	const [addedFilters, setAddedFilters] = useState<TelemetryFieldKey[]>(
+		normalizedCustomFilters,
+	);
 	const { notifications } = useNotifications();
 
 	const { mutate: updateCustomFilters, isLoading: isUpdatingCustomFilters } =
-		useMutation(updateCustomFiltersAPI, {
-			onSuccess: () => {
-				setIsSettingsOpen(false);
-				refetchCustomFilters();
-				logEvent('Quick Filters Settings: changes saved', {
-					addedFilters,
-				});
-				notifications.success({
-					message: 'Quick filters updated successfully',
-					placement: 'bottomRight',
-				});
-			},
-			onError: (error: AxiosError) => {
-				notifications.error({
-					message: axios.isAxiosError(error) ? error.message : SOMETHING_WENT_WRONG,
-					placement: 'bottomRight',
-				});
+		useUpdateQuickFilters({
+			mutation: {
+				onSuccess: () => {
+					setIsSettingsOpen(false);
+					refetchCustomFilters();
+					void logEvent('Quick Filters Settings: changes saved', {
+						addedFilters,
+					});
+					notifications.success({
+						message: 'Quick filters updated successfully',
+						placement: 'bottomRight',
+					});
+				},
+				onError: (error) => {
+					notifications.error({
+						message: error.message || SOMETHING_WENT_WRONG,
+						placement: 'bottomRight',
+					});
+				},
 			},
 		});
 	const debouncedUpdate = useDebouncedFn((value) => {
@@ -78,17 +98,30 @@ const useQuickFilterSettings = ({
 	}, [setIsSettingsOpen]);
 
 	const handleDiscardChanges = useCallback((): void => {
-		setAddedFilters(customFilters);
-	}, [customFilters, setAddedFilters]);
+		setAddedFilters(normalizedCustomFilters);
+	}, [normalizedCustomFilters, setAddedFilters]);
+
+	const hasUnsavedChanges = useMemo(
+		() =>
+			!(
+				addedFilters.length === normalizedCustomFilters.length &&
+				addedFilters.every(
+					(filter, index) => filter.key === normalizedCustomFilters[index].key,
+				)
+			),
+		[addedFilters, normalizedCustomFilters],
+	);
 
 	const handleSaveChanges = useCallback((): void => {
 		if (signal) {
 			updateCustomFilters({
 				data: {
+					// Send only the stored TelemetryFieldKey fields; the composite `key`
+					// is UI-only.
 					filters: addedFilters.map((filter) => ({
-						key: filter.key,
-						datatype: filter.dataType,
-						type: filter.type,
+						name: filter.name,
+						fieldContext: filter.fieldContext as TelemetrytypesFieldContextDTO,
+						fieldDataType: filter.fieldDataType as TelemetrytypesFieldDataTypeDTO,
 					})),
 					signal,
 				},
@@ -102,6 +135,7 @@ const useQuickFilterSettings = ({
 		addedFilters,
 		setAddedFilters,
 		handleSaveChanges,
+		hasUnsavedChanges,
 		isUpdatingCustomFilters,
 		inputValue,
 		setInputValue,

frontend/src/components/QuickFilters/hooks/useFilterConfig.tsx

@@ -1,8 +1,6 @@
 import { useMemo } from 'react';
-import { useQuery } from 'react-query';
-import getCustomFilters from 'api/quickFilters/getCustomFilters';
-import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
-import { Filter as FilterType } from 'types/api/quickFilters/getCustomFilters';
+import { useGetQuickFilters } from 'api/generated/services/quick-filter';
+import { TelemetryFieldKey } from 'types/api/v5/queryRange';
 
 import { IQuickFiltersConfig, SignalType } from '../types';
 import { getFilterConfig } from '../utils';
@@ -13,7 +11,7 @@ interface UseFilterConfigProps {
 }
 interface UseFilterConfigReturn {
 	filterConfig: IQuickFiltersConfig[];
-	customFilters: FilterType[];
+	customFilters: TelemetryFieldKey[];
 	isCustomFiltersLoading: boolean;
 	isDynamicFilters: boolean;
 	refetchCustomFilters: () => void;
@@ -25,17 +23,16 @@ const useFilterConfig = ({
 }: UseFilterConfigProps): UseFilterConfigReturn => {
 	const {
 		isFetching: isCustomFiltersLoading,
-		data: customFilters = [],
+		data,
 		refetch,
-	} = useQuery<FilterType[], Error>(
-		[REACT_QUERY_KEY.GET_CUSTOM_FILTERS, signal],
-		async () => {
-			const res = await getCustomFilters({ signal: signal || '' });
-			return 'payload' in res && res.payload?.filters ? res.payload.filters : [];
-		},
-		{
-			enabled: !!signal,
-		},
+	} = useGetQuickFilters(
+		{ signalName: signal ?? '' },
+		{ query: { enabled: !!signal } },
+	);
+
+	const customFilters = useMemo<TelemetryFieldKey[]>(
+		() => (data?.data?.filters ?? []) as TelemetryFieldKey[],
+		[data],
 	);
 
 	const isDynamicFilters = useMemo(

frontend/src/components/QuickFilters/hooks/useSignalFieldApis.ts

@@ -0,0 +1,24 @@
+import { useMemo } from 'react';
+import {
+	NANO_SECOND_MULTIPLIER,
+	useLastComputedMinMax,
+} from 'store/globalTime';
+
+import { QuickFilterCheckboxUseFieldApis } from '../types';
+
+/**
+ * Builds the `useFieldApis` config for a signal quick-filter page.
+ * if existingQuery is sent null, related values are not fetched
+ */
+export function useSignalFieldApis(): QuickFilterCheckboxUseFieldApis {
+	const { minTime, maxTime } = useLastComputedMinMax();
+
+	return useMemo(
+		() => ({
+			startUnixMilli: Math.floor(minTime / NANO_SECOND_MULTIPLIER),
+			endUnixMilli: Math.floor(maxTime / NANO_SECOND_MULTIPLIER),
+			existingQuery: null,
+		}),
+		[minTime, maxTime],
+	);
+}

frontend/src/components/QuickFilters/tests/QuickFilters.test.tsx

@@ -11,7 +11,7 @@ import {
 } from 'mocks-server/__mockdata__/customQuickFilters';
 import { server } from 'mocks-server/server';
 import { rest } from 'msw';
-import { render, screen, userEvent, waitFor } from 'tests/test-utils';
+import { render, screen, userEvent, waitFor, within } from 'tests/test-utils';
 
 import '@testing-library/jest-dom';
 
@@ -34,9 +34,9 @@ const mockUseApiMonitoringParams = jest.mocked(useApiMonitoringParams);
 
 const BASE_URL = ENVIRONMENT.baseURL;
 const SIGNAL = SignalType.LOGS;
-const quickFiltersListURL = `${BASE_URL}/api/v1/orgs/me/filters/${SIGNAL}`;
-const saveQuickFiltersURL = `${BASE_URL}/api/v1/orgs/me/filters`;
-const quickFiltersSuggestionsURL = `${BASE_URL}/api/v3/filter_suggestions`;
+const quickFiltersListURL = `${BASE_URL}/api/v2/quick_filters/${SIGNAL}`;
+const saveQuickFiltersURL = `${BASE_URL}/api/v2/quick_filters`;
+const quickFiltersSuggestionsURL = `${BASE_URL}/api/v1/fields/keys`;
 const quickFiltersAttributeValuesURL = `${BASE_URL}/api/v3/autocomplete/attribute_values`;
 const fieldsValuesURL = `${BASE_URL}/api/v1/fields/values`;
 
@@ -338,6 +338,63 @@ describe('Quick Filters with custom filters', () => {
 		);
 	});
 
+	it('keeps same-name fields with different context as distinct entries', async () => {
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+		server.use(
+			rest.get(quickFiltersSuggestionsURL, (_req, res, ctx) =>
+				res(
+					ctx.status(200),
+					ctx.json({
+						status: 'success',
+						data: {
+							complete: true,
+							keys: {
+								level: [
+									{
+										name: 'level',
+										fieldContext: 'attribute',
+										fieldDataType: 'string',
+										signal: 'logs',
+									},
+									{
+										name: 'level',
+										fieldContext: 'span',
+										fieldDataType: 'string',
+										signal: 'logs',
+									},
+								],
+							},
+						},
+					}),
+				),
+			),
+		);
+
+		render(<TestQuickFilters signal={SIGNAL} />);
+		await screen.findByText(FILTER_SERVICE_NAME);
+
+		const icon = await screen.findByTestId(SETTINGS_ICON_TEST_ID);
+		const settingsButton = icon.closest('button') ?? icon;
+		await user.click(settingsButton);
+
+		const otherSection = screen.getByText(OTHER_FILTERS_LABEL).parentElement!;
+		// Both `level` variants are shown despite sharing a name.
+		await waitFor(() =>
+			expect(within(otherSection).getAllByText('level')).toHaveLength(2),
+		);
+
+		// Adding one variant removes only that one; the other stays.
+		const firstLevel = within(otherSection).getAllByText('level')[0];
+		const addButton = firstLevel.parentElement?.querySelector('button');
+		await user.click(addButton as HTMLButtonElement);
+
+		const addedSection = screen.getByText(ADDED_FILTERS_LABEL).parentElement!;
+		await waitFor(() => {
+			expect(within(addedSection).getAllByText('level')).toHaveLength(1);
+			expect(within(otherSection).getAllByText('level')).toHaveLength(1);
+		});
+	});
+
 	it('adds a filter from OTHER FILTERS to ADDED FILTERS when clicked', async () => {
 		const user = userEvent.setup({ pointerEventsCheck: 0 });
 
@@ -458,7 +515,7 @@ describe('Quick Filters with custom filters', () => {
 		const requestBody = putHandler.mock.calls[0][0];
 		expect(requestBody.filters).toStrictEqual(
 			expect.arrayContaining([
-				expect.not.objectContaining({ key: FILTER_OS_DESCRIPTION }),
+				expect.not.objectContaining({ name: FILTER_OS_DESCRIPTION }),
 			]),
 		);
 		expect(requestBody.signal).toBe(SIGNAL);
@@ -612,9 +669,9 @@ describe('Quick Filters refetch behavior', () => {
 				filters: [
 					...(quickFiltersListResponse.data.filters ?? []),
 					{
-						key: 'new.custom.filter',
-						dataType: 'string',
-						type: 'resource',
+						name: 'new.custom.filter',
+						fieldDataType: 'string',
+						fieldContext: 'resource',
 					} as const,
 				],
 			},

frontend/src/components/QuickFilters/utils.tsx

@@ -1,5 +1,10 @@
+import {
+	TelemetrytypesFieldContextDTO,
+	TelemetrytypesFieldDataTypeDTO,
+} from 'api/generated/services/sigNoz.schemas';
 import { SIGNAL_DATA_SOURCE_MAP } from 'components/QuickFilters/QuickFiltersSettings/constants';
-import { Filter as FilterType } from 'types/api/quickFilters/getCustomFilters';
+import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
+import { TelemetryFieldKey } from 'types/api/v5/queryRange';
 
 import { FiltersType, IQuickFiltersConfig, SignalType } from './types';
 
@@ -12,6 +17,39 @@ const FILTER_TYPE_MAP: Record<string, FiltersType> = {
 	duration_nano: FiltersType.DURATION,
 };
 
+// Both maps below (and mapFieldDataType/mapFieldContext) exist only for the old
+// v3 attribute-values fetch in useCheckboxFilterValues, which is the sole reader
+// of attributeKey.dataType/type. Query/list endpoints don't consume them (v5 and
+// the API-monitoring/exceptions/infra paths all send a name-based expression).
+// Once the values fetch moves to fields/values (by name) in Phase A, this whole
+// mapping can be removed and attributeKey reduced to { id, key }.
+
+// The new field data types are rendered down to the v3 spellings the
+// attribute-values call expects, matching the backend's legacy conversion
+// (number -> float64).
+const FIELD_DATA_TYPE_TO_DATA_TYPE: Record<string, DataTypes> = {
+	[TelemetrytypesFieldDataTypeDTO.string]: DataTypes.String,
+	[TelemetrytypesFieldDataTypeDTO.bool]: DataTypes.bool,
+	[TelemetrytypesFieldDataTypeDTO.float64]: DataTypes.Float64,
+	[TelemetrytypesFieldDataTypeDTO.int64]: DataTypes.Int64,
+	[TelemetrytypesFieldDataTypeDTO.number]: DataTypes.Float64,
+};
+
+// Only tag and resource exist in the v3 attribute-type enum; other contexts
+// render as empty so the still-live v3 values path never sees a spelling it
+// can't use, matching the backend's legacy conversion.
+const FIELD_CONTEXT_TO_ATTRIBUTE_TYPE: Record<string, string> = {
+	[TelemetrytypesFieldContextDTO.attribute]: 'tag',
+	[TelemetrytypesFieldContextDTO.resource]: 'resource',
+};
+
+const mapFieldDataType = (fieldDataType?: string): DataTypes =>
+	(fieldDataType && FIELD_DATA_TYPE_TO_DATA_TYPE[fieldDataType]) ||
+	DataTypes.EMPTY;
+
+const mapFieldContext = (fieldContext?: string): string =>
+	(fieldContext && FIELD_CONTEXT_TO_ATTRIBUTE_TYPE[fieldContext]) || '';
+
 const getFilterName = (str: string): string => {
 	if (FILTER_TITLE_MAP[str]) {
 		return FILTER_TITLE_MAP[str];
@@ -26,16 +64,16 @@ const getFilterName = (str: string): string => {
 		.join(' ');
 };
 
-const getFilterType = (att: FilterType): FiltersType => {
-	if (FILTER_TYPE_MAP[att.key]) {
-		return FILTER_TYPE_MAP[att.key];
+const getFilterType = (att: TelemetryFieldKey): FiltersType => {
+	if (FILTER_TYPE_MAP[att.name]) {
+		return FILTER_TYPE_MAP[att.name];
 	}
 	return FiltersType.CHECKBOX;
 };
 
 export const getFilterConfig = (
 	signal?: SignalType,
-	customFilters?: FilterType[],
+	customFilters?: TelemetryFieldKey[],
 	config?: IQuickFiltersConfig[],
 ): IQuickFiltersConfig[] => {
 	if (!customFilters?.length || !signal) {
@@ -46,13 +84,13 @@ export const getFilterConfig = (
 		(att, index) =>
 			({
 				type: getFilterType(att),
-				title: getFilterName(att.key),
+				title: getFilterName(att.name),
 				dataSource: SIGNAL_DATA_SOURCE_MAP[signal],
 				attributeKey: {
-					id: att.key,
-					key: att.key,
-					dataType: att.dataType,
-					type: att.type,
+					id: att.name,
+					key: att.name,
+					dataType: mapFieldDataType(att.fieldDataType),
+					type: mapFieldContext(att.fieldContext),
 				},
 				defaultOpen: index < 2,
 			}) as IQuickFiltersConfig,

frontend/src/container/ApiMonitoring/Explorer/Explorer.tsx

@@ -3,6 +3,7 @@ import * as Sentry from '@sentry/react';
 import logEvent from 'api/common/logEvent';
 import cx from 'classnames';
 import QuickFilters from 'components/QuickFilters/QuickFilters';
+import { useSignalFieldApis } from 'components/QuickFilters/hooks/useSignalFieldApis';
 import { QuickFiltersSource, SignalType } from 'components/QuickFilters/types';
 import ErrorBoundaryFallback from 'pages/ErrorBoundaryFallback/ErrorBoundaryFallback';
 
@@ -11,6 +12,8 @@ import DomainList from './Domains/DomainList';
 import './Explorer.styles.scss';
 
 function Explorer(): JSX.Element {
+	const quickFilterFieldApis = useSignalFieldApis();
+
 	useEffect(() => {
 		logEvent('API Monitoring: Landing page visited', {});
 	}, []);
@@ -26,6 +29,7 @@ function Explorer(): JSX.Element {
 						showFilterCollapse={false}
 						showQueryName={false}
 						handleFilterVisibilityChange={(): void => {}}
+						useFieldApis={quickFilterFieldApis}
 					/>
 				</section>
 				<DomainList />

frontend/src/container/MeterExplorer/Explorer/Explorer.tsx

@@ -6,6 +6,7 @@ import logEvent from 'api/common/logEvent';
 import cx from 'classnames';
 import { QueryBuilderV2 } from 'components/QueryBuilderV2/QueryBuilderV2';
 import QuickFilters from 'components/QuickFilters/QuickFilters';
+import { useSignalFieldApis } from 'components/QuickFilters/hooks/useSignalFieldApis';
 import { QuickFiltersSource, SignalType } from 'components/QuickFilters/types';
 import { initialQueryMeterWithType, PANEL_TYPES } from 'constants/queryBuilder';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
@@ -31,6 +32,7 @@ import { splitQueryIntoOneChartPerQuery } from './utils';
 import './Explorer.styles.scss';
 
 function Explorer(): JSX.Element {
+	const quickFilterFieldApis = useSignalFieldApis();
 	const {
 		handleRunQuery,
 		stagedQuery,
@@ -141,6 +143,7 @@ function Explorer(): JSX.Element {
 						handleFilterVisibilityChange={(): void => {
 							setShowQuickFilters(!showQuickFilters);
 						}}
+						useFieldApis={quickFilterFieldApis}
 					/>
 				</div>
 

frontend/src/mocks-server/__mockdata__/customQuickFilters.ts

@@ -4,114 +4,85 @@ export const quickFiltersListResponse = {
 		signal: 'logs',
 		filters: [
 			{
-				key: 'os.description',
-				dataType: 'string',
-				type: 'resource',
+				name: 'os.description',
+				fieldDataType: 'string',
+				fieldContext: 'resource',
 			},
 			{
-				key: 'service.name',
-				dataType: 'string',
-				type: 'resource',
+				name: 'service.name',
+				fieldDataType: 'string',
+				fieldContext: 'resource',
 			},
 			{
-				key: 'duration_nano',
-				dataType: 'float64',
-				type: 'tag',
+				name: 'duration_nano',
+				fieldDataType: 'float64',
+				fieldContext: 'attribute',
 			},
 			{
-				key: 'quantity',
-				dataType: 'float64',
-				type: 'tag',
+				name: 'quantity',
+				fieldDataType: 'float64',
+				fieldContext: 'attribute',
 			},
 			{
-				key: 'body',
-				dataType: 'string',
-				type: '',
+				name: 'body',
+				fieldDataType: 'string',
+				fieldContext: '',
 			},
 			{
-				key: 'deployment.environment',
-				dataType: 'string',
-				type: 'resource',
+				name: 'deployment.environment',
+				fieldDataType: 'string',
+				fieldContext: 'resource',
 			},
 			{
-				key: 'service.namespace',
-				dataType: 'string',
-				type: 'resource',
+				name: 'service.namespace',
+				fieldDataType: 'string',
+				fieldContext: 'resource',
 			},
 			{
-				key: 'k8s.namespace.name',
-				dataType: 'string',
-				type: 'resource',
+				name: 'k8s.namespace.name',
+				fieldDataType: 'string',
+				fieldContext: 'resource',
 			},
 			{
-				key: 'service.instance.id',
-				dataType: 'string',
-				type: 'resource',
+				name: 'service.instance.id',
+				fieldDataType: 'string',
+				fieldContext: 'resource',
 			},
 			{
-				key: 'k8s.pod.name',
-				dataType: 'string',
-				type: 'resource',
+				name: 'k8s.pod.name',
+				fieldDataType: 'string',
+				fieldContext: 'resource',
 			},
 			{
-				key: 'process.owner',
-				dataType: 'string',
-				type: 'resource',
+				name: 'process.owner',
+				fieldDataType: 'string',
+				fieldContext: 'resource',
 			},
 		],
 	},
 };
 
+const otherFilterName = (name: string): { [k: string]: unknown[] } => ({
+	[name]: [
+		{ name, fieldContext: 'resource', fieldDataType: 'string', signal: 'logs' },
+	],
+});
+
 export const otherFiltersResponse = {
 	status: 'success',
 	data: {
-		attributes: [
-			{
-				key: 'service.name',
-				dataType: 'string',
-				type: 'resource',
-			},
-			{
-				key: 'k8s.deployment.name',
-				dataType: 'string',
-				type: 'resource',
-			},
-			{
-				key: 'deployment.environment',
-				dataType: 'string',
-				type: 'resource',
-			},
-			{
-				key: 'service.namespace',
-				dataType: 'string',
-				type: 'resource',
-			},
-			{
-				key: 'k8s.namespace.name',
-				dataType: 'string',
-				type: 'resource',
-			},
-			{
-				key: 'service.instance.id',
-				dataType: 'string',
-				type: 'resource',
-			},
-			{
-				key: 'k8s.pod.name',
-				dataType: 'string',
-				type: 'resource',
-			},
-			{
-				key: 'k8s.pod.uid',
-				dataType: 'string',
-				type: 'resource',
-			},
-			{
-				key: 'os.description',
-				dataType: 'string',
-				type: 'resource',
-			},
-		],
+		complete: true,
+		keys: {
+			...otherFilterName('service.name'),
+			...otherFilterName('k8s.deployment.name'),
+			...otherFilterName('deployment.environment'),
+			...otherFilterName('service.namespace'),
+			...otherFilterName('k8s.namespace.name'),
+			...otherFilterName('service.instance.id'),
+			...otherFilterName('k8s.pod.name'),
+			...otherFilterName('k8s.pod.uid'),
+			...otherFilterName('os.description'),
+		},
 	},
 };
 

frontend/src/pages/AllErrors/index.tsx

@@ -8,6 +8,7 @@ import setLocalStorageApi from 'api/browser/localstorage/set';
 import cx from 'classnames';
 import HeaderRightSection from 'components/HeaderRightSection/HeaderRightSection';
 import QuickFilters from 'components/QuickFilters/QuickFilters';
+import { useSignalFieldApis } from 'components/QuickFilters/hooks/useSignalFieldApis';
 import { QuickFiltersSource, SignalType } from 'components/QuickFilters/types';
 import RouteTab from 'components/RouteTab';
 import TypicalOverlayScrollbar from 'components/TypicalOverlayScrollbar/TypicalOverlayScrollbar';
@@ -55,6 +56,8 @@ function AllErrors(): JSX.Element {
 		setShowFilters((prev) => !prev);
 	};
 
+	const quickFilterFieldApis = useSignalFieldApis();
+
 	return (
 		<div className={cx('all-errors-page', showFilters ? 'filter-visible' : '')}>
 			{showFilters && (
@@ -64,6 +67,7 @@ function AllErrors(): JSX.Element {
 						source={QuickFiltersSource.EXCEPTIONS}
 						signal={SignalType.EXCEPTIONS}
 						handleFilterVisibilityChange={handleFilterVisibilityChange}
+						useFieldApis={quickFilterFieldApis}
 					/>
 				</section>
 			)}

frontend/src/pages/LogsExplorer/index.tsx

@@ -7,6 +7,7 @@ import cx from 'classnames';
 import ExplorerCard from 'components/ExplorerCard/ExplorerCard';
 import QueryCancelledPlaceholder from 'components/QueryCancelledPlaceholder';
 import QuickFilters from 'components/QuickFilters/QuickFilters';
+import { useSignalFieldApis } from 'components/QuickFilters/hooks/useSignalFieldApis';
 import { QuickFiltersSource, SignalType } from 'components/QuickFilters/types';
 import WarningPopover from 'components/WarningPopover/WarningPopover';
 import { LOCALSTORAGE } from 'constants/localStorage';
@@ -74,6 +75,8 @@ function LogsExplorer(): JSX.Element {
 
 	const { handleExplorerTabChange } = useHandleExplorerTabChange();
 
+	const quickFilterFieldApis = useSignalFieldApis();
+
 	const isAIAssistantEnabled = useIsAIAssistantEnabled();
 
 	const listQueryKeyRef = useRef<any>();
@@ -232,6 +235,7 @@ function LogsExplorer(): JSX.Element {
 								signal={SignalType.LOGS}
 								source={QuickFiltersSource.LOGS_EXPLORER}
 								handleFilterVisibilityChange={handleFilterVisibilityChange}
+								useFieldApis={quickFilterFieldApis}
 							/>
 						</section>
 					)}

frontend/src/pages/TracesExplorer/__test__/TracesExplorer.test.tsx

@@ -504,7 +504,7 @@ jest.mock('hooks/useHandleExplorerTabChange', () => ({
 let capturedPayload: QueryRangePayloadV5;
 
 describe('TracesExplorer -', () => {
-	const quickFiltersListURL = `${BASE_URL}/api/v1/orgs/me/filters/traces`;
+	const quickFiltersListURL = `${BASE_URL}/api/v2/quick_filters/traces`;
 
 	const setupServer = (): void => {
 		server.use(

frontend/src/pages/TracesExplorer/index.tsx

@@ -8,6 +8,7 @@ import cx from 'classnames';
 import ExplorerCard from 'components/ExplorerCard/ExplorerCard';
 import QueryCancelledPlaceholder from 'components/QueryCancelledPlaceholder';
 import QuickFilters from 'components/QuickFilters/QuickFilters';
+import { useSignalFieldApis } from 'components/QuickFilters/hooks/useSignalFieldApis';
 import { QuickFiltersSource, SignalType } from 'components/QuickFilters/types';
 import WarningPopover from 'components/WarningPopover/WarningPopover';
 import { LOCALSTORAGE } from 'constants/localStorage';
@@ -128,6 +129,8 @@ function TracesExplorer(): JSX.Element {
 	);
 
 	const { handleExplorerTabChange } = useHandleExplorerTabChange();
+
+	const quickFilterFieldApis = useSignalFieldApis();
 	const { safeNavigate } = useSafeNavigate();
 	const getExportToDashboardLink = useGetExportToDashboardLink();
 
@@ -267,6 +270,7 @@ function TracesExplorer(): JSX.Element {
 						handleFilterVisibilityChange={(): void => {
 							setOpen(!isOpen);
 						}}
+						useFieldApis={quickFilterFieldApis}
 					/>
 				</Card>
 				<div

frontend/src/types/api/quickFilters/getCustomFilters.ts

@@ -1,14 +0,0 @@
-export interface Filter {
-	key: string;
-	dataType: string;
-	type: string;
-}
-
-export interface Props {
-	signal: string;
-}
-
-export type PayloadProps = {
-	filters: Filter[];
-	signal: string;
-};

frontend/src/types/api/quickFilters/updateCustomFilters.ts

@@ -1,14 +0,0 @@
-import { SignalType } from 'components/QuickFilters/types';
-
-interface FilterType {
-	key: string;
-	datatype: string;
-	type: string;
-}
-
-export interface UpdateCustomFiltersProps {
-	data: {
-		filters: FilterType[];
-		signal: SignalType;
-	};
-}