feat(quick-filters): gate quick filters on quick-filter read and update

Filters content is behind read, settings gear behind read + update,
replacing the admin role check. Header actions moved to the ui Button so
AuthZTooltip can actually disable the gear. Dropped the old quick filters
settings announcement from the gear.

cmd/authz.go

@@ -102,6 +102,7 @@ func runGenerateAuthz(_ context.Context) error {
 		coretypes.NewResourceRef(coretypes.ResourceTelemetryResourceTraces).String():       true,
 		coretypes.NewResourceRef(coretypes.ResourceTelemetryResourceMetrics).String():      true,
 		coretypes.NewResourceRef(coretypes.ResourceTelemetryResourceMeterMetrics).String(): true,
+		coretypes.NewResourceRef(coretypes.ResourceMetaResourceQuickFilter).String():       true,
 	}
 
 	allowedTypes := map[string]bool{}

conf/example.yaml

@@ -397,6 +397,7 @@ identn:
     # headers to use for tokenizer identN resolver
     headers:
       - Authorization
+      - Sec-WebSocket-Protocol
   apikey:
     # toggle apikey identN
     enabled: true

ee/query-service/app/server.go

@@ -184,6 +184,7 @@ func (s *Server) createPublicServer(apiHandler *api.APIHandler, web web.Web) (*h
 	apiHandler.RegisterIntegrationRoutes(r, am)
 	apiHandler.RegisterQueryRangeV3Routes(r, am)
 	apiHandler.RegisterQueryRangeV4Routes(r, am)
+	apiHandler.RegisterWebSocketPaths(r, am)
 	apiHandler.RegisterMessagingQueuesRoutes(r, am)
 	apiHandler.RegisterThirdPartyApiRoutes(r, am)
 	apiHandler.RegisterTraceFunnelsRoutes(r, am)
@@ -196,7 +197,7 @@ func (s *Server) createPublicServer(apiHandler *api.APIHandler, web web.Web) (*h
 	c := cors.New(cors.Options{
 		AllowedOrigins: []string{"*"},
 		AllowedMethods: []string{"GET", "DELETE", "POST", "PUT", "PATCH", "OPTIONS"},
-		AllowedHeaders: []string{"Accept", "Authorization", "Content-Type", "cache-control"},
+		AllowedHeaders: []string{"Accept", "Authorization", "Content-Type", "cache-control", "X-SIGNOZ-QUERY-ID", "Sec-WebSocket-Protocol"},
 	})
 
 	handler := c.Handler(r)

frontend/src/api/quickFilters/getCustomFilters.ts

@@ -0,0 +1,25 @@
+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

@@ -0,0 +1,13 @@
+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/useFieldValues.tsx

@@ -22,10 +22,7 @@ interface UseFieldValuesReturn {
 	isFetching: boolean;
 }
 
-export const DATA_SOURCE_TO_SIGNAL: Record<
-	DataSource,
-	TelemetrytypesSignalDTO
-> = {
+const DATA_SOURCE_TO_SIGNAL: Record<DataSource, TelemetrytypesSignalDTO> = {
 	[DataSource.METRICS]: TelemetrytypesSignalDTO.metrics,
 	[DataSource.TRACES]: TelemetrytypesSignalDTO.traces,
 	[DataSource.LOGS]: TelemetrytypesSignalDTO.logs,

frontend/src/components/QuickFilters/QuickFilters.tsx

@@ -15,28 +15,30 @@ import {
 	ComboboxTrigger,
 } from '@signozhq/ui/combobox';
 import { Skeleton, Tooltip } from 'antd';
+import { Button } from '@signozhq/ui/button';
 import { Switch } from '@signozhq/ui/switch';
 import { Typography } from '@signozhq/ui/typography';
-import getLocalStorageKey from 'api/browser/localstorage/get';
-import setLocalStorageKey from 'api/browser/localstorage/set';
 import logEvent from 'api/common/logEvent';
 import classNames from 'classnames';
 import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
-import { LOCALSTORAGE } from 'constants/localStorage';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import { useApiMonitoringParams } from 'container/ApiMonitoring/queryParams';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
-import { isFunction, isNull } from 'lodash-es';
-import { useAppContext } from 'providers/App/App';
+import { AuthZGuardContent } from 'lib/authz/components/AuthZGuard/AuthZGuardContent';
+import AuthZTooltip from 'lib/authz/components/AuthZTooltip/AuthZTooltip';
+import { useAuthZ } from 'lib/authz/hooks/useAuthZ/useAuthZ';
+import {
+	QuickFilterManagePermissions,
+	QuickFilterReadPermission,
+} from 'lib/authz/hooks/useAuthZ/permissions/quick-filter.permissions';
+import { isFunction } from 'lodash-es';
 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';
-import AnnouncementTooltip from './QuickFiltersSettings/AnnouncementTooltip';
 import QuickFiltersSettings from './QuickFiltersSettings/QuickFiltersSettings';
 import { FiltersType, IQuickFiltersProps, QuickFiltersSource } from './types';
 
@@ -55,9 +57,7 @@ export default function QuickFilters(props: IQuickFiltersProps): JSX.Element {
 		showQueryName = true,
 		useFieldApis,
 	} = props;
-	const { user } = useAppContext();
 	const [isSettingsOpen, setIsSettingsOpen] = useState(false);
-	const isAdmin = user.role === USER_ROLES.ADMIN;
 	const [params, setParams] = useApiMonitoringParams();
 	const showIP = params.showIP ?? true;
 
@@ -68,6 +68,12 @@ export default function QuickFilters(props: IQuickFiltersProps): JSX.Element {
 		refetchCustomFilters,
 		isCustomFiltersLoading,
 	} = useFilterConfig({ signal, config });
+	const {
+		deniedPermissions: deniedSettingsPermissions,
+		isLoading: isSettingsChecking,
+	} = useAuthZ(QuickFilterManagePermissions, { enabled: isDynamicFilters });
+	const isSettingsDisabled =
+		isSettingsChecking || deniedSettingsPermissions.length > 0;
 
 	const {
 		currentQuery,
@@ -107,16 +113,6 @@ export default function QuickFilters(props: IQuickFiltersProps): JSX.Element {
 	const shouldShowDropdownInListView =
 		isListView && source === QuickFiltersSource.TRACES_EXPLORER;
 
-	const showAnnouncementTooltip = useMemo(() => {
-		const localStorageValue = getLocalStorageKey(
-			LOCALSTORAGE.QUICK_FILTERS_SETTINGS_ANNOUNCEMENT,
-		);
-		if (!isNull(localStorageValue)) {
-			return !(localStorageValue === 'false');
-		}
-		return true;
-	}, []);
-
 	const activeQueryIndex = useMemo(() => {
 		if (isListView) {
 			return source === QuickFiltersSource.TRACES_EXPLORER
@@ -232,49 +228,50 @@ export default function QuickFilters(props: IQuickFiltersProps): JSX.Element {
 	const renderRightActions = (): JSX.Element => (
 		<section className="right-actions">
 			<Tooltip title="Reset All">
-				<div className="right-action-icon-container">
-					<RefreshCw className="sync-icon" size="md" onClick={handleReset} />
-				</div>
+				<Button
+					variant="link"
+					color="secondary"
+					aria-label="Reset All"
+					className="right-action-icon-container"
+					onClick={handleReset}
+					prefix={<RefreshCw className="sync-icon" size="md" />}
+				/>
 			</Tooltip>
 			{showFilterCollapse && (
 				<Tooltip title="Collapse Filters">
-					<div className="right-action-icon-container">
-						<ArrowUpToLine
-							style={{ rotate: '270deg', cursor: 'pointer' }}
-							size="md"
-							onClick={handleFilterVisibilityChange}
-						/>
-					</div>
+					<Button
+						variant="link"
+						color="secondary"
+						aria-label="Collapse Filters"
+						className="right-action-icon-container"
+						onClick={handleFilterVisibilityChange}
+						prefix={<ArrowUpToLine style={{ rotate: '270deg' }} size="md" />}
+					/>
 				</Tooltip>
 			)}
-			{isDynamicFilters && isAdmin && (
-				<Tooltip title="Settings">
-					<div
+			{isDynamicFilters && (
+				<AuthZTooltip checks={QuickFilterManagePermissions}>
+					<Button
+						variant="link"
+						color="secondary"
+						aria-label="Settings"
 						className={classNames('right-action-icon-container', {
 							active: isSettingsOpen,
 						})}
-					>
-						<SettingsIcon
-							className="settings-icon"
-							data-testid="settings-icon"
-							width={14}
-							height={14}
-							onClick={(): void => setIsSettingsOpen(true)}
-						/>
-						<AnnouncementTooltip
-							show={showAnnouncementTooltip}
-							position={{ top: -5, left: 15 }}
-							title="Edit your quick filters"
-							message="You can now customize and re-arrange your quick filters panel. Select the quick filters you’d need and hide away the rest for faster exploration."
-							onClose={(): void => {
-								setLocalStorageKey(
-									LOCALSTORAGE.QUICK_FILTERS_SETTINGS_ANNOUNCEMENT,
-									'false',
-								);
-							}}
-						/>
-					</div>
-				</Tooltip>
+						onClick={(): void => setIsSettingsOpen(true)}
+						testId="settings-icon-container"
+						prefix={
+							<Tooltip title="Settings" open={isSettingsDisabled ? false : undefined}>
+								<SettingsIcon
+									className="settings-icon"
+									data-testid="settings-icon"
+									width={14}
+									height={14}
+								/>
+							</Tooltip>
+						}
+					/>
+				</AuthZTooltip>
 			)}
 		</section>
 	);
@@ -361,6 +358,21 @@ export default function QuickFilters(props: IQuickFiltersProps): JSX.Element {
 		</>
 	);
 
+	const filtersSkeleton = (
+		<div className="quick-filters-skeleton">
+			{Array.from({ length: 5 }).map((_, index) => (
+				// eslint-disable-next-line react/no-array-index-key
+				<Skeleton.Input active size="small" key={index} />
+			))}
+		</div>
+	);
+
+	const filtersContent = isCustomFiltersLoading ? (
+		filtersSkeleton
+	) : (
+		<OverlayScrollbar>{renderContent()}</OverlayScrollbar>
+	);
+
 	return (
 		<div className="quick-filters-container">
 			<div className="quick-filters">
@@ -371,15 +383,15 @@ export default function QuickFilters(props: IQuickFiltersProps): JSX.Element {
 					</section>
 				)}
 
-				{isCustomFiltersLoading ? (
-					<div className="quick-filters-skeleton">
-						{Array.from({ length: 5 }).map((_, index) => (
-							// eslint-disable-next-line react/no-array-index-key
-							<Skeleton.Input active size="small" key={index} />
-						))}
-					</div>
+				{signal ? (
+					<AuthZGuardContent
+						checks={[QuickFilterReadPermission]}
+						fallbackOnLoading={filtersSkeleton}
+					>
+						{filtersContent}
+					</AuthZGuardContent>
 				) : (
-					<OverlayScrollbar>{renderContent()}</OverlayScrollbar>
+					filtersContent
 				)}
 			</div>
 			<div className="quick-filters-settings-container">

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

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

@@ -1,17 +1,17 @@
 import { useMemo } from 'react';
 import { Button, Skeleton } from 'antd';
-import { useGetFieldsKeys } from 'api/generated/services/fields';
-import { TelemetrytypesSourceDTO } from 'api/generated/services/sigNoz.schemas';
 import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
-import { DATA_SOURCE_TO_SIGNAL } from 'components/QuickFilters/FilterRenderers/Checkbox/v2/useFieldValues';
 import { SIGNAL_DATA_SOURCE_MAP } from 'components/QuickFilters/QuickFiltersSettings/constants';
 import { SignalType } from 'components/QuickFilters/types';
-import { buildCompositeKey } from 'container/OptionsMenu/utils';
-import {
-	FieldContext,
-	FieldDataType,
-	TelemetryFieldKey,
-} from 'types/api/v5/queryRange';
+import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
+import { useGetAggregateKeys } from 'hooks/queryBuilder/useGetAggregateKeys';
+import { useGetAttributeSuggestions } from 'hooks/queryBuilder/useGetAttributeSuggestions';
+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';
 
 function OtherFiltersSkeleton(): JSX.Element {
 	return (
@@ -37,48 +37,106 @@ function OtherFilters({
 }: {
 	signal: SignalType | undefined;
 	inputValue: string;
-	addedFilters: TelemetryFieldKey[];
-	setAddedFilters: React.Dispatch<React.SetStateAction<TelemetryFieldKey[]>>;
+	addedFilters: FilterType[];
+	setAddedFilters: React.Dispatch<React.SetStateAction<FilterType[]>>;
 }): JSX.Element {
-	const isMeterDataSource = signal === SignalType.METER_EXPLORER;
-
-	const { data, isFetching } = useGetFieldsKeys(
-		{
-			searchText: inputValue,
-			signal: signal
-				? DATA_SOURCE_TO_SIGNAL[SIGNAL_DATA_SOURCE_MAP[signal]]
-				: undefined,
-			source: isMeterDataSource ? TelemetrytypesSourceDTO.meter : undefined,
-		},
-		{ query: { enabled: !!signal } },
+	const isLogDataSource = useMemo(
+		() => SIGNAL_DATA_SOURCE_MAP[signal as SignalType] === DataSource.LOGS,
+		[signal],
+	);
+	const isMeterDataSource = useMemo(
+		() => signal && signal === SignalType.METER_EXPLORER,
+		[signal],
 	);
 
-	const otherFilters = useMemo<TelemetryFieldKey[]>(() => {
-		const rawSuggestions = Object.values(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 as TelemetryFieldKey['signal'],
-			fieldContext: attr.fieldContext as FieldContext,
-			fieldDataType: attr.fieldDataType as FieldDataType,
-			key: buildCompositeKey(attr.name, attr.fieldContext, attr.fieldDataType),
-		}));
-
-		const addedKeys = new Set(
-			addedFilters.map((filter) =>
-				buildCompositeKey(filter.name, filter.fieldContext, filter.fieldDataType),
-			),
+	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,
+			},
 		);
-		return suggestions.filter((attr) => !addedKeys.has(attr.key as string));
-	}, [data, addedFilters]);
 
-	const handleAddFilter = (filter: TelemetryFieldKey): void => {
-		setAddedFilters((prev) => [...prev, filter]);
+	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 { 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 renderFilters = (): React.ReactNode => {
-		if (isFetching) {
+		const isLoading =
+			isFetchingSuggestions || isFetchingAggregateKeys || isLoadingFieldKeys;
+		if (isLoading) {
 			return <OtherFiltersSkeleton />;
 		}
 		if (!otherFilters?.length) {
@@ -87,11 +145,11 @@ function OtherFilters({
 
 		return otherFilters.map((filter) => (
 			<div key={filter.key} className="qf-filter-item other-filters-item">
-				<div className="qf-filter-key">{filter.name}</div>
+				<div className="qf-filter-key">{filter.key}</div>
 				<Button
 					className="add-filter-btn periscope-btn"
 					size="small"
-					onClick={(): void => handleAddFilter(filter)}
+					onClick={(): void => handleAddFilter(filter as FilterType)}
 				>
 					Add
 				</Button>

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

@@ -1,7 +1,8 @@
+import { useMemo } from 'react';
 import { Input } from '@signozhq/ui/input';
 import { Button } from 'antd';
 import { Check, TableColumnsSplit, X } from '@signozhq/icons';
-import { TelemetryFieldKey } from 'types/api/v5/queryRange';
+import { Filter as FilterType } from 'types/api/quickFilters/getCustomFilters';
 
 import { SignalType } from '../types';
 import AddedFilters from './AddedFilters';
@@ -18,7 +19,7 @@ function QuickFiltersSettings({
 }: {
 	signal: SignalType | undefined;
 	setIsSettingsOpen: (isSettingsOpen: boolean) => void;
-	customFilters: TelemetryFieldKey[];
+	customFilters: FilterType[];
 	refetchCustomFilters: () => void;
 }): JSX.Element {
 	const {
@@ -27,7 +28,6 @@ function QuickFiltersSettings({
 		addedFilters,
 		setAddedFilters,
 		handleSaveChanges,
-		hasUnsavedChanges,
 		isUpdatingCustomFilters,
 		inputValue,
 		handleInputChange,
@@ -39,6 +39,18 @@ 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,31 +1,27 @@
-import { useCallback, useMemo, useState } from 'react';
-import { useUpdateQuickFilters } from 'api/generated/services/quick-filter';
+import { useCallback, useState } from 'react';
+import { useMutation } from 'react-query';
 import logEvent from 'api/common/logEvent';
-import {
-	TelemetrytypesFieldContextDTO,
-	TelemetrytypesFieldDataTypeDTO,
-} from 'api/generated/services/sigNoz.schemas';
+import updateCustomFiltersAPI from 'api/quickFilters/updateCustomFilters';
+import axios, { AxiosError } from 'axios';
 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 { TelemetryFieldKey } from 'types/api/v5/queryRange';
+import { Filter as FilterType } from 'types/api/quickFilters/getCustomFilters';
 
 interface UseQuickFilterSettingsProps {
 	setIsSettingsOpen: (isSettingsOpen: boolean) => void;
-	customFilters: TelemetryFieldKey[];
+	customFilters: FilterType[];
 	refetchCustomFilters: () => void;
 	signal?: SignalType;
 }
 
 interface UseQuickFilterSettingsReturn {
-	addedFilters: TelemetryFieldKey[];
-	setAddedFilters: React.Dispatch<React.SetStateAction<TelemetryFieldKey[]>>;
+	addedFilters: FilterType[];
+	setAddedFilters: React.Dispatch<React.SetStateAction<FilterType[]>>;
 	handleSettingsClose: () => void;
 	handleDiscardChanges: () => void;
 	handleSaveChanges: () => void;
-	hasUnsavedChanges: boolean;
 	isUpdatingCustomFilters: boolean;
 	inputValue: string;
 	setInputValue: React.Dispatch<React.SetStateAction<string>>;
@@ -41,43 +37,27 @@ const useQuickFilterSettings = ({
 }: UseQuickFilterSettingsProps): UseQuickFilterSettingsReturn => {
 	const [inputValue, setInputValue] = useState<string>('');
 	const [debouncedInputValue, setDebouncedInputValue] = useState<string>('');
-	const normalizedCustomFilters = useMemo<TelemetryFieldKey[]>(
-		() =>
-			customFilters.map((filter) => ({
-				...filter,
-				key: buildCompositeKey(
-					filter.name,
-					filter.fieldContext,
-					filter.fieldDataType,
-				),
-			})),
-		[customFilters],
-	);
-	const [addedFilters, setAddedFilters] = useState<TelemetryFieldKey[]>(
-		normalizedCustomFilters,
-	);
+	const [addedFilters, setAddedFilters] = useState<FilterType[]>(customFilters);
 	const { notifications } = useNotifications();
 
 	const { mutate: updateCustomFilters, isLoading: isUpdatingCustomFilters } =
-		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',
-					});
-				},
+		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',
+				});
 			},
 		});
 	const debouncedUpdate = useDebouncedFn((value) => {
@@ -98,32 +78,19 @@ const useQuickFilterSettings = ({
 	}, [setIsSettingsOpen]);
 
 	const handleDiscardChanges = useCallback((): void => {
-		setAddedFilters(normalizedCustomFilters);
-	}, [normalizedCustomFilters, setAddedFilters]);
-
-	const hasUnsavedChanges = useMemo(
-		() =>
-			!(
-				addedFilters.length === normalizedCustomFilters.length &&
-				addedFilters.every(
-					(filter, index) => filter.key === normalizedCustomFilters[index].key,
-				)
-			),
-		[addedFilters, normalizedCustomFilters],
-	);
+		setAddedFilters(customFilters);
+	}, [customFilters, setAddedFilters]);
 
 	const handleSaveChanges = useCallback((): void => {
 		if (signal) {
 			updateCustomFilters({
-				pathParams: { source: signal },
 				data: {
-					// Send only the stored TelemetryFieldKey fields; the composite `key`
-					// is UI-only.
 					filters: addedFilters.map((filter) => ({
-						name: filter.name,
-						fieldContext: filter.fieldContext as TelemetrytypesFieldContextDTO,
-						fieldDataType: filter.fieldDataType as TelemetrytypesFieldDataTypeDTO,
+						key: filter.key,
+						datatype: filter.dataType,
+						type: filter.type,
 					})),
+					signal,
 				},
 			});
 		}
@@ -135,7 +102,6 @@ const useQuickFilterSettings = ({
 		addedFilters,
 		setAddedFilters,
 		handleSaveChanges,
-		hasUnsavedChanges,
 		isUpdatingCustomFilters,
 		inputValue,
 		setInputValue,

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

@@ -1,6 +1,8 @@
 import { useMemo } from 'react';
-import { useGetQuickFilters } from 'api/generated/services/quick-filter';
-import { TelemetryFieldKey } from 'types/api/v5/queryRange';
+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 { IQuickFiltersConfig, SignalType } from '../types';
 import { getFilterConfig } from '../utils';
@@ -11,7 +13,7 @@ interface UseFilterConfigProps {
 }
 interface UseFilterConfigReturn {
 	filterConfig: IQuickFiltersConfig[];
-	customFilters: TelemetryFieldKey[];
+	customFilters: FilterType[];
 	isCustomFiltersLoading: boolean;
 	isDynamicFilters: boolean;
 	refetchCustomFilters: () => void;
@@ -23,16 +25,17 @@ const useFilterConfig = ({
 }: UseFilterConfigProps): UseFilterConfigReturn => {
 	const {
 		isFetching: isCustomFiltersLoading,
-		data,
+		data: customFilters = [],
 		refetch,
-	} = useGetQuickFilters(
-		{ source: signal ?? '' },
-		{ query: { enabled: !!signal } },
-	);
-
-	const customFilters = useMemo<TelemetryFieldKey[]>(
-		() => (data?.data?.filters ?? []) as TelemetryFieldKey[],
-		[data],
+	} = 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,
+		},
 	);
 
 	const isDynamicFilters = useMemo(

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

@@ -0,0 +1,202 @@
+import { ENVIRONMENT } from 'constants/env';
+import {
+	ApiMonitoringParams,
+	useApiMonitoringParams,
+} from 'container/ApiMonitoring/queryParams';
+import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
+import {
+	QuickFilterReadPermission,
+	QuickFilterUpdatePermission,
+} from 'lib/authz/hooks/useAuthZ/permissions/quick-filter.permissions';
+import {
+	AUTHZ_CHECK_URL,
+	setupAuthzAdmin,
+	setupAuthzDeny,
+	setupAuthzDenyAll,
+} from 'lib/authz/utils/authz-test-utils';
+import {
+	otherFiltersResponse,
+	quickFiltersAttributeValuesResponse,
+	quickFiltersListResponse,
+} 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 QuickFilters from '../QuickFilters';
+import { QuickFiltersSource, SignalType } from '../types';
+import { QuickFiltersConfig } from './constants';
+
+jest.mock('hooks/queryBuilder/useQueryBuilder', () => ({
+	useQueryBuilder: jest.fn(),
+}));
+jest.mock('container/ApiMonitoring/queryParams');
+
+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 fieldsKeysURL = `${BASE_URL}/api/v3/filter_suggestions`;
+const attributeValuesURL = `${BASE_URL}/api/v3/autocomplete/attribute_values`;
+const fieldsValuesURL = `${BASE_URL}/api/v1/fields/values`;
+
+const NOT_AUTHORIZED_TEXT = /is not authorized to perform/i;
+const FILTER_SERVICE_NAME = 'Service Name';
+const SETTINGS_CONTAINER_TEST_ID = 'settings-icon-container';
+
+beforeEach(() => {
+	(useQueryBuilder as jest.Mock).mockReturnValue({
+		currentQuery: {
+			builder: {
+				queryData: [
+					{
+						queryName: 'Test Query',
+						filters: { items: [] },
+					},
+				],
+			},
+		},
+		lastUsedQuery: 0,
+		redirectWithQueryBuilderData: jest.fn(),
+	});
+	mockUseApiMonitoringParams.mockReturnValue([
+		{ showIP: true } as ApiMonitoringParams,
+		jest.fn(),
+	]);
+	server.use(
+		rest.get(quickFiltersListURL, (_req, res, ctx) =>
+			res(ctx.status(200), ctx.json(quickFiltersListResponse)),
+		),
+		rest.get(fieldsKeysURL, (_req, res, ctx) =>
+			res(ctx.status(200), ctx.json(otherFiltersResponse)),
+		),
+		rest.get(attributeValuesURL, (_req, res, ctx) =>
+			res(ctx.status(200), ctx.json(quickFiltersAttributeValuesResponse)),
+		),
+		rest.get(fieldsValuesURL, (_req, res, ctx) =>
+			res(ctx.status(200), ctx.json(quickFiltersAttributeValuesResponse)),
+		),
+	);
+});
+
+afterEach(() => {
+	server.resetHandlers();
+	jest.clearAllMocks();
+});
+
+function renderWithSignal(): void {
+	render(
+		<QuickFilters
+			source={QuickFiltersSource.LOGS_EXPLORER}
+			signal={SIGNAL}
+			handleFilterVisibilityChange={jest.fn()}
+		/>,
+	);
+}
+
+function renderStaticConfig(): void {
+	render(
+		<QuickFilters
+			source={QuickFiltersSource.EXCEPTIONS}
+			config={QuickFiltersConfig}
+			handleFilterVisibilityChange={jest.fn()}
+		/>,
+	);
+}
+
+describe('QuickFilters - AuthZ', () => {
+	describe('read denied', () => {
+		it('shows the inline denial instead of the filters, header stays', async () => {
+			server.use(setupAuthzDeny(QuickFilterReadPermission));
+
+			renderWithSignal();
+
+			await expect(
+				screen.findByText(NOT_AUTHORIZED_TEXT),
+			).resolves.toBeInTheDocument();
+
+			expect(screen.queryByText(FILTER_SERVICE_NAME)).not.toBeInTheDocument();
+			expect(screen.getByText('Filters for')).toBeInTheDocument();
+		});
+	});
+
+	describe('update denied', () => {
+		it('renders the filters but disables the settings trigger', async () => {
+			server.use(setupAuthzDeny(QuickFilterUpdatePermission));
+
+			renderWithSignal();
+
+			await expect(
+				screen.findByText(FILTER_SERVICE_NAME),
+			).resolves.toBeInTheDocument();
+
+			const settingsTrigger = await screen.findByTestId(
+				SETTINGS_CONTAINER_TEST_ID,
+			);
+			await waitFor(() =>
+				expect(settingsTrigger).toHaveAttribute(
+					'data-denied-permissions',
+					expect.stringContaining('update'),
+				),
+			);
+
+			await userEvent.click(settingsTrigger);
+			expect(screen.queryByText(/ADDED FILTERS/i)).not.toBeInTheDocument();
+		});
+	});
+
+	describe('all permissions granted', () => {
+		it('renders the filters and opens settings from the trigger', async () => {
+			server.use(setupAuthzAdmin());
+
+			renderWithSignal();
+
+			await expect(
+				screen.findByText(FILTER_SERVICE_NAME),
+			).resolves.toBeInTheDocument();
+
+			const settingsTrigger = await screen.findByTestId(
+				SETTINGS_CONTAINER_TEST_ID,
+			);
+			expect(settingsTrigger).not.toHaveAttribute('data-denied-permissions');
+
+			await userEvent.click(settingsTrigger);
+			await expect(
+				screen.findByText(/ADDED FILTERS/i),
+			).resolves.toBeInTheDocument();
+		});
+	});
+
+	describe('static config pages (no signal)', () => {
+		it('is not gated even when every permission is denied', async () => {
+			server.use(setupAuthzDenyAll());
+
+			renderStaticConfig();
+
+			await expect(
+				screen.findByText(FILTER_SERVICE_NAME),
+			).resolves.toBeInTheDocument();
+			expect(screen.queryByText(NOT_AUTHORIZED_TEXT)).not.toBeInTheDocument();
+		});
+	});
+
+	describe('permission check loading', () => {
+		it('shows the skeleton, not the filters or a denial', async () => {
+			server.use(
+				rest.post(AUTHZ_CHECK_URL, (_req, res, ctx) => res(ctx.delay('infinite'))),
+			);
+
+			renderWithSignal();
+
+			await waitFor(() =>
+				// eslint-disable-next-line testing-library/no-node-access
+				expect(
+					document.querySelector('.quick-filters-skeleton'),
+				).toBeInTheDocument(),
+			);
+			expect(screen.queryByText(NOT_AUTHORIZED_TEXT)).not.toBeInTheDocument();
+			expect(screen.queryByText(FILTER_SERVICE_NAME)).not.toBeInTheDocument();
+		});
+	});
+});

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, within } from 'tests/test-utils';
+import { render, screen, userEvent, waitFor } 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/v2/quick_filters/${SIGNAL}`;
-const saveQuickFiltersURL = `${BASE_URL}/api/v2/quick_filters/${SIGNAL}`;
-const quickFiltersSuggestionsURL = `${BASE_URL}/api/v1/fields/keys`;
+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 quickFiltersAttributeValuesURL = `${BASE_URL}/api/v3/autocomplete/attribute_values`;
 const fieldsValuesURL = `${BASE_URL}/api/v1/fields/values`;
 
@@ -338,63 +338,6 @@ 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 });
 
@@ -513,10 +456,12 @@ describe('Quick Filters with custom filters', () => {
 		});
 
 		const requestBody = putHandler.mock.calls[0][0];
-		expect(requestBody.filters).not.toContainEqual(
-			expect.objectContaining({ name: FILTER_OS_DESCRIPTION }),
+		expect(requestBody.filters).toStrictEqual(
+			expect.arrayContaining([
+				expect.not.objectContaining({ key: FILTER_OS_DESCRIPTION }),
+			]),
 		);
-		expect(requestBody.filters).toHaveLength(10);
+		expect(requestBody.signal).toBe(SIGNAL);
 	});
 
 	it('should render duration slider for duration_nono filter', async () => {
@@ -667,9 +612,9 @@ describe('Quick Filters refetch behavior', () => {
 				filters: [
 					...(quickFiltersListResponse.data.filters ?? []),
 					{
-						name: 'new.custom.filter',
-						fieldDataType: 'string',
-						fieldContext: 'resource',
+						key: 'new.custom.filter',
+						dataType: 'string',
+						type: 'resource',
 					} as const,
 				],
 			},

frontend/src/components/QuickFilters/utils.tsx

@@ -1,7 +1,5 @@
-import { TelemetrytypesFieldContextDTO } from 'api/generated/services/sigNoz.schemas';
 import { SIGNAL_DATA_SOURCE_MAP } from 'components/QuickFilters/QuickFiltersSettings/constants';
-import { TelemetryFieldKey } from 'types/api/v5/queryRange';
-import { fieldDataTypeToDataType } from 'utils/fieldDataType';
+import { Filter as FilterType } from 'types/api/quickFilters/getCustomFilters';
 
 import { FiltersType, IQuickFiltersConfig, SignalType } from './types';
 
@@ -14,19 +12,6 @@ const FILTER_TYPE_MAP: Record<string, FiltersType> = {
 	duration_nano: FiltersType.DURATION,
 };
 
-// The map below exists only for the old v3 attribute-values fetch
-// (useCheckboxFilterValues), the sole reader of attributeKey.dataType/type.
-// Once the values fetch moves to fields/values, remove this and reduce
-// attributeKey to { id, key }.
-
-const FIELD_CONTEXT_TO_ATTRIBUTE_TYPE: Record<string, string> = {
-	[TelemetrytypesFieldContextDTO.attribute]: 'tag',
-	[TelemetrytypesFieldContextDTO.resource]: 'resource',
-};
-
-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];
@@ -41,16 +26,16 @@ const getFilterName = (str: string): string => {
 		.join(' ');
 };
 
-const getFilterType = (att: TelemetryFieldKey): FiltersType => {
-	if (FILTER_TYPE_MAP[att.name]) {
-		return FILTER_TYPE_MAP[att.name];
+const getFilterType = (att: FilterType): FiltersType => {
+	if (FILTER_TYPE_MAP[att.key]) {
+		return FILTER_TYPE_MAP[att.key];
 	}
 	return FiltersType.CHECKBOX;
 };
 
 export const getFilterConfig = (
 	signal?: SignalType,
-	customFilters?: TelemetryFieldKey[],
+	customFilters?: FilterType[],
 	config?: IQuickFiltersConfig[],
 ): IQuickFiltersConfig[] => {
 	if (!customFilters?.length || !signal) {
@@ -61,13 +46,13 @@ export const getFilterConfig = (
 		(att, index) =>
 			({
 				type: getFilterType(att),
-				title: getFilterName(att.name),
+				title: getFilterName(att.key),
 				dataSource: SIGNAL_DATA_SOURCE_MAP[signal],
 				attributeKey: {
-					id: att.name,
-					key: att.name,
-					dataType: fieldDataTypeToDataType(att.fieldDataType),
-					type: mapFieldContext(att.fieldContext),
+					id: att.key,
+					key: att.key,
+					dataType: att.dataType,
+					type: att.type,
 				},
 				defaultOpen: index < 2,
 			}) as IQuickFiltersConfig,

frontend/src/container/AppLayout/AppLayout.styles.scss

@@ -184,11 +184,6 @@
 		text-decoration-thickness: 2px;
 		text-underline-offset: 2px;
 	}
-
-	&[disabled] {
-		opacity: 0.6;
-		text-decoration: none;
-	}
 }
 
 .workspace-restricted-banner,

frontend/src/container/AppLayout/index.tsx

@@ -16,6 +16,7 @@ import * as Sentry from '@sentry/react';
 import { Toaster } from '@signozhq/ui/sonner';
 import { TooltipProvider } from '@signozhq/ui/tooltip';
 import { Flex } from 'antd';
+import { Button } from '@signozhq/ui/button';
 import getLocalStorageApi from 'api/browser/localstorage/get';
 import setLocalStorageApi from 'api/browser/localstorage/set';
 import getChangelogByVersion from 'api/changelog/getChangelogByVersion';
@@ -819,9 +820,14 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 									{' '}
 									Please{' '}
 									<AuthZTooltip checks={SubscriptionManagePermissions}>
-										<a className="upgrade-link" onClick={handleFailedPayment}>
+										<Button
+											variant="link"
+											color="none"
+											className="upgrade-link"
+											onClick={handleFailedPayment}
+										>
 											pay the bill
-										</a>
+										</Button>
 									</AuthZTooltip>
 									to continue using SigNoz features.
 									<span className="refresh-payment-status">

frontend/src/container/BillingContainer/BillingContainer.module.scss

@@ -60,10 +60,6 @@
 		margin: var(--spacing-12) var(--spacing-4);
 	}
 
-	.usageDenied {
-		margin-bottom: var(--spacing-4);
-	}
-
 	.billingDetails {
 		margin: var(--spacing-4) 0;
 		border: 1px solid var(--l1-border);

frontend/src/container/BillingContainer/BillingContainer.tsx

@@ -37,7 +37,6 @@ import { isEmpty, pick } from 'lodash-es';
 import AuthZButton from 'lib/authz/components/AuthZButton/AuthZButton';
 import AuthZTooltip from 'lib/authz/components/AuthZTooltip/AuthZTooltip';
 import { AuthZGuardContent } from 'lib/authz/components/AuthZGuard/AuthZGuardContent';
-import PermissionDeniedCallout from 'lib/authz/components/PermissionDeniedCallout/PermissionDeniedCallout';
 import {
 	SubscriptionCreatePermission,
 	SubscriptionManagePermissions,
@@ -510,15 +509,7 @@ export default function BillingContainer(): JSX.Element {
 					))}
 			</Card>
 
-			<AuthZGuardContent
-				checks={[SubscriptionReadPermission]}
-				fallback={({ deniedPermissions }): JSX.Element => (
-					<PermissionDeniedCallout
-						deniedPermissions={deniedPermissions}
-						className={styles.usageDenied}
-					/>
-				)}
-			>
+			<AuthZGuardContent checks={[SubscriptionReadPermission]}>
 				<>
 					<div className={styles.billingGraphSection}>
 						{!isLoading && !isFetchingBillingData ? (

frontend/src/container/LogsExplorerViews/index.tsx

@@ -108,6 +108,7 @@ function LogsExplorerViewsContainer({
 	const [page, setPage] = useState<number>(1);
 	const [logs, setLogs] = useState<ILog[]>([]);
 	const [requestData, setRequestData] = useState<Query | null>(null);
+	const [queryId, setQueryId] = useState<string>(v4());
 	const [listChartQuery, setListChartQuery] = useState<Query | null>(null);
 
 	const [orderBy, setOrderBy] = useState<string>('timestamp:desc');
@@ -179,7 +180,12 @@ function LogsExplorerViewsContainer({
 			},
 			undefined,
 			listQueryKeyRef,
-			undefined,
+			{
+				...(!isEmpty(queryId) &&
+					selectedPanelType !== PANEL_TYPES.LIST && {
+						'X-SIGNOZ-QUERY-ID': queryId,
+					}),
+			},
 			// custom selected time interval to prevent recalculating the start and end timestamps before fetching next pages
 			'custom',
 		);
@@ -244,6 +250,10 @@ function LogsExplorerViewsContainer({
 		setRequestData(newRequestData);
 	}, [isLimit, logs, listQuery, pageSize, stagedQuery, getRequestData, page]);
 
+	useEffect(() => {
+		setQueryId(v4());
+	}, [data]);
+
 	const logEventCalledRef = useRef(false);
 	useEffect(() => {
 		if (!logEventCalledRef.current && !isUndefined(data?.payload)) {

frontend/src/container/RolesSettings/hooks/__tests__/useRolePermissions.test.ts

@@ -329,13 +329,14 @@ describe('transformTransactionGroupsToResourcePermissions', () => {
 	it('returns all resources from RESOURCE_ORDER even with empty transaction groups', () => {
 		const result = transformTransactionGroupsToResourcePermissions([]);
 
-		expect(result).toHaveLength(9);
+		expect(result).toHaveLength(10);
 		expect(result.map((r) => r.resourceKind)).toStrictEqual([
 			'factor-api-key',
 			'license',
 			'logs',
 			'meter-metrics',
 			'metrics',
+			'quick-filter',
 			'role',
 			'serviceaccount',
 			'subscription',
@@ -420,13 +421,14 @@ describe('createEmptyRolePermissions', () => {
 	it('creates permissions for all resources in RESOURCE_ORDER', () => {
 		const result = createEmptyRolePermissions();
 
-		expect(result).toHaveLength(9);
+		expect(result).toHaveLength(10);
 		expect(result.map((r) => r.resourceKind)).toStrictEqual([
 			'factor-api-key',
 			'license',
 			'logs',
 			'meter-metrics',
 			'metrics',
+			'quick-filter',
 			'role',
 			'serviceaccount',
 			'subscription',

frontend/src/container/RolesSettings/permissions.config.ts

@@ -5,6 +5,7 @@ import {
 	FileKey,
 	Gauge,
 	Key,
+	ListFilter,
 	Logs,
 	Receipt,
 	Shield,
@@ -77,6 +78,14 @@ export const RESOURCE_PANELS: Record<AuthZResource, ResourcePanelConfig> = {
 		selectorPlaceholder: 'Type * to cover the workspace subscription',
 		docsAnchor: 'subscription',
 	},
+	'quick-filter': {
+		label: 'Quick Filters',
+		description: 'Quick filters shown in the logs, traces, and other explorers.',
+		icon: ListFilter,
+		selectorPlaceholder:
+			'Type quick filter ID, separate multiple with comma or space',
+		docsAnchor: 'quick-filter',
+	},
 	logs: {
 		label: 'Logs',
 		description: 'Log data collected across the workspace.',

frontend/src/lib/authz/hooks/useAuthZ/permissions.type.ts

@@ -13,6 +13,11 @@ export default {
 				type: 'metaresource',
 				allowedVerbs: ['create', 'delete', 'list', 'read', 'update'],
 			},
+			{
+				kind: 'quick-filter',
+				type: 'metaresource',
+				allowedVerbs: ['list', 'read', 'update'],
+			},
 			{
 				kind: 'subscription',
 				type: 'metaresource',

frontend/src/lib/authz/hooks/useAuthZ/permissions/quick-filter.permissions.ts

@@ -0,0 +1,16 @@
+import { buildPermission } from '../utils';
+
+export const QuickFilterReadPermission = buildPermission(
+	'read',
+	'quick-filter:*',
+);
+export const QuickFilterUpdatePermission = buildPermission(
+	'update',
+	'quick-filter:*',
+);
+
+// Editing quick filters needs read as well as update
+export const QuickFilterManagePermissions = [
+	QuickFilterReadPermission,
+	QuickFilterUpdatePermission,
+];

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

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

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/v2/quick_filters/traces`;
+	const quickFiltersListURL = `${BASE_URL}/api/v1/orgs/me/filters/traces`;
 
 	const setupServer = (): void => {
 		server.use(

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

@@ -0,0 +1,14 @@
+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

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

go.mod

@@ -31,6 +31,7 @@ require (
 	github.com/google/uuid v1.6.0
 	github.com/gorilla/handlers v1.5.1
 	github.com/gorilla/mux v1.8.1
+	github.com/gorilla/websocket v1.5.4-0.20250319132907-e064f32e3674
 	github.com/huandu/go-sqlbuilder v1.39.1
 	github.com/jackc/pgx/v5 v5.9.2
 	github.com/json-iterator/go v1.1.13-0.20220915233716-71ac16282d12
@@ -133,7 +134,6 @@ require (
 	github.com/go-playground/universal-translator v0.18.1 // indirect
 	github.com/goccy/go-yaml v1.19.2 // indirect
 	github.com/google/go-cmp v0.7.0 // indirect
-	github.com/gorilla/websocket v1.5.4-0.20250319132907-e064f32e3674 // indirect
 	github.com/hashicorp/go-metrics v0.5.4 // indirect
 	github.com/huandu/go-clone v1.7.3 // indirect
 	github.com/leodido/go-urn v1.4.0 // indirect

pkg/identn/config.go

@@ -45,7 +45,7 @@ func newConfig() factory.Config {
 	return &Config{
 		Tokenizer: TokenizerConfig{
 			Enabled: true,
-			Headers: []string{"Authorization"},
+			Headers: []string{"Authorization", "Sec-WebSocket-Protocol"},
 		},
 		APIKeyConfig: APIKeyConfig{
 			Enabled: true,

pkg/query-service/app/clickhouseReader/query_progress/inmemory_tracker.go

@@ -0,0 +1,243 @@
+package queryprogress
+
+import (
+	"fmt"
+	"log/slog"
+	"sync"
+
+	"github.com/ClickHouse/clickhouse-go/v2"
+	"github.com/SigNoz/signoz/pkg/query-service/model"
+	"github.com/google/uuid"
+	"golang.org/x/exp/maps"
+)
+
+// tracks progress and manages subscriptions for all queries
+type inMemoryQueryProgressTracker struct {
+	logger  *slog.Logger
+	queries map[string]*queryTracker
+	lock    sync.RWMutex
+}
+
+func (tracker *inMemoryQueryProgressTracker) ReportQueryStarted(
+	queryId string,
+) (postQueryCleanup func(), apiErr *model.ApiError) {
+	tracker.lock.Lock()
+	defer tracker.lock.Unlock()
+
+	_, exists := tracker.queries[queryId]
+	if exists {
+		return nil, model.BadRequest(fmt.Errorf(
+			"query %s already started", queryId,
+		))
+	}
+
+	tracker.queries[queryId] = newQueryTracker(tracker.logger, queryId)
+
+	return func() {
+		tracker.onQueryFinished(queryId)
+	}, nil
+}
+
+func (tracker *inMemoryQueryProgressTracker) ReportQueryProgress(
+	queryId string, chProgress *clickhouse.Progress,
+) *model.ApiError {
+	queryTracker, err := tracker.getQueryTracker(queryId)
+	if err != nil {
+		return err
+	}
+
+	queryTracker.handleProgressUpdate(chProgress)
+	return nil
+}
+
+func (tracker *inMemoryQueryProgressTracker) SubscribeToQueryProgress(
+	queryId string,
+) (<-chan model.QueryProgress, func(), *model.ApiError) {
+	queryTracker, err := tracker.getQueryTracker(queryId)
+	if err != nil {
+		return nil, nil, err
+	}
+
+	return queryTracker.subscribe()
+}
+
+func (tracker *inMemoryQueryProgressTracker) onQueryFinished(
+	queryId string,
+) {
+	tracker.lock.Lock()
+	queryTracker := tracker.queries[queryId]
+	if queryTracker != nil {
+		delete(tracker.queries, queryId)
+	}
+	tracker.lock.Unlock()
+
+	if queryTracker != nil {
+		queryTracker.onFinished()
+	}
+}
+
+func (tracker *inMemoryQueryProgressTracker) getQueryTracker(
+	queryId string,
+) (*queryTracker, *model.ApiError) {
+	tracker.lock.RLock()
+	defer tracker.lock.RUnlock()
+
+	queryTracker := tracker.queries[queryId]
+	if queryTracker == nil {
+		return nil, model.NotFoundError(fmt.Errorf(
+			"query %s doesn't exist", queryId,
+		))
+	}
+
+	return queryTracker, nil
+}
+
+// Tracks progress and manages subscriptions for a single query
+type queryTracker struct {
+	logger     *slog.Logger
+	queryId    string
+	isFinished bool
+
+	progress      *model.QueryProgress
+	subscriptions map[string]*queryProgressSubscription
+
+	lock sync.Mutex
+}
+
+func newQueryTracker(logger *slog.Logger, queryId string) *queryTracker {
+	return &queryTracker{
+		logger:        logger,
+		queryId:       queryId,
+		subscriptions: map[string]*queryProgressSubscription{},
+	}
+}
+
+func (qt *queryTracker) handleProgressUpdate(p *clickhouse.Progress) {
+	qt.lock.Lock()
+	defer qt.lock.Unlock()
+
+	if qt.isFinished {
+		qt.logger.Warn("received clickhouse progress update for finished query", "queryId", qt.queryId, "progress", p)
+		return
+	}
+
+	if qt.progress == nil {
+		// This is the first update
+		qt.progress = &model.QueryProgress{}
+	}
+	updateQueryProgress(qt.progress, p)
+
+	// broadcast latest state to all subscribers.
+	for _, sub := range maps.Values(qt.subscriptions) {
+		sub.send(*qt.progress)
+	}
+}
+
+func (qt *queryTracker) subscribe() (
+	<-chan model.QueryProgress, func(), *model.ApiError,
+) {
+	qt.lock.Lock()
+	defer qt.lock.Unlock()
+
+	if qt.isFinished {
+		return nil, nil, model.NotFoundError(fmt.Errorf(
+			"query %s already finished", qt.queryId,
+		))
+	}
+
+	subscriberId := uuid.NewString()
+	subscription := newQueryProgressSubscription(qt.logger)
+	qt.subscriptions[subscriberId] = subscription
+
+	if qt.progress != nil {
+		subscription.send(*qt.progress)
+	}
+
+	return subscription.ch, func() {
+		qt.unsubscribe(subscriberId)
+	}, nil
+}
+
+func (qt *queryTracker) unsubscribe(subscriberId string) {
+	qt.lock.Lock()
+	defer qt.lock.Unlock()
+
+	if qt.isFinished {
+		qt.logger.Debug("received unsubscribe request after query finished", "subscriber", subscriberId, "queryId", qt.queryId)
+		return
+	}
+
+	subscription := qt.subscriptions[subscriberId]
+	if subscription != nil {
+		subscription.close()
+		delete(qt.subscriptions, subscriberId)
+	}
+}
+
+func (qt *queryTracker) onFinished() {
+	qt.lock.Lock()
+	defer qt.lock.Unlock()
+
+	if qt.isFinished {
+		qt.logger.Warn("receiver query finish report after query finished", "queryId", qt.queryId)
+		return
+	}
+
+	for subId, sub := range qt.subscriptions {
+		sub.close()
+		delete(qt.subscriptions, subId)
+	}
+
+	qt.isFinished = true
+}
+
+type queryProgressSubscription struct {
+	logger   *slog.Logger
+	ch       chan model.QueryProgress
+	isClosed bool
+	lock     sync.Mutex
+}
+
+func newQueryProgressSubscription(logger *slog.Logger) *queryProgressSubscription {
+	ch := make(chan model.QueryProgress, 1000)
+	return &queryProgressSubscription{
+		logger: logger,
+		ch:     ch,
+	}
+}
+
+// Must not block or panic in any scenario
+func (ch *queryProgressSubscription) send(progress model.QueryProgress) {
+	ch.lock.Lock()
+	defer ch.lock.Unlock()
+
+	if ch.isClosed {
+		ch.logger.Error("can't send query progress: channel already closed.", "progress", progress)
+		return
+	}
+
+	// subscription channels are expected to have big enough buffers to ensure
+	// blocking while sending doesn't happen in the happy path
+	select {
+	case ch.ch <- progress:
+		ch.logger.Debug("published query progress", "progress", progress)
+	default:
+		ch.logger.Error("couldn't publish query progress. dropping update.", "progress", progress)
+	}
+}
+
+func (ch *queryProgressSubscription) close() {
+	ch.lock.Lock()
+	defer ch.lock.Unlock()
+
+	if !ch.isClosed {
+		close(ch.ch)
+		ch.isClosed = true
+	}
+}
+
+func updateQueryProgress(qp *model.QueryProgress, chProgress *clickhouse.Progress) {
+	qp.ReadRows += chProgress.Rows
+	qp.ReadBytes += chProgress.Bytes
+	qp.ElapsedMs += uint64(chProgress.Elapsed.Milliseconds())
+}

pkg/query-service/app/clickhouseReader/query_progress/tracker.go

@@ -0,0 +1,33 @@
+package queryprogress
+
+import (
+	"log/slog"
+
+	"github.com/ClickHouse/clickhouse-go/v2"
+	"github.com/SigNoz/signoz/pkg/query-service/model"
+)
+
+type QueryProgressTracker interface {
+	// Tells the tracker that query with id `queryId` has started.
+	// Progress can only be reported for and tracked for a query that is in progress.
+	// Returns a cleanup function that must be called after the query finishes.
+	ReportQueryStarted(queryId string) (postQueryCleanup func(), apiErr *model.ApiError)
+
+	// Report progress stats received from clickhouse for `queryId`
+	ReportQueryProgress(queryId string, chProgress *clickhouse.Progress) *model.ApiError
+
+	// Subscribe to progress updates for `queryId`
+	// The returned channel will produce `QueryProgress` instances representing
+	// the latest state of query progress stats. Also returns a function that
+	// can be called to unsubscribe before the query finishes, if needed.
+	SubscribeToQueryProgress(queryId string) (ch <-chan model.QueryProgress, unsubscribe func(), apiErr *model.ApiError)
+}
+
+func NewQueryProgressTracker(logger *slog.Logger) QueryProgressTracker {
+	// InMemory tracker is useful only for single replica query service setups.
+	// Multi replica setups must use a centralized store for tracking and subscribing to query progress
+	return &inMemoryQueryProgressTracker{
+		logger:  logger,
+		queries: map[string]*queryTracker{},
+	}
+}

pkg/query-service/app/clickhouseReader/query_progress/tracker_test.go

@@ -0,0 +1,102 @@
+package queryprogress
+
+import (
+	"log/slog"
+	"testing"
+	"time"
+
+	"github.com/ClickHouse/clickhouse-go/v2"
+	"github.com/SigNoz/signoz/pkg/query-service/model"
+	"github.com/stretchr/testify/require"
+)
+
+func TestQueryProgressTracking(t *testing.T) {
+	require := require.New(t)
+
+	tracker := NewQueryProgressTracker(slog.Default())
+
+	testQueryId := "test-query"
+
+	testProgress := &clickhouse.Progress{}
+	err := tracker.ReportQueryProgress(testQueryId, testProgress)
+	require.NotNil(err, "shouldn't be able to report query progress before query has been started")
+	require.Equal(err.Type(), model.ErrorNotFound)
+
+	ch, unsubscribe, err := tracker.SubscribeToQueryProgress(testQueryId)
+	require.NotNil(err, "shouldn't be able to subscribe for progress updates before query has been started")
+	require.Equal(err.Type(), model.ErrorNotFound)
+	require.Nil(ch)
+	require.Nil(unsubscribe)
+
+	reportQueryFinished, err := tracker.ReportQueryStarted(testQueryId)
+	require.Nil(err, "should be able to report start of a query to be tracked")
+
+	testProgress1 := &clickhouse.Progress{
+		Rows:      10,
+		Bytes:     20,
+		TotalRows: 100,
+		Elapsed:   20 * time.Millisecond,
+	}
+	err = tracker.ReportQueryProgress(testQueryId, testProgress1)
+	require.Nil(err, "should be able to report progress after query has started")
+
+	ch, unsubscribe, err = tracker.SubscribeToQueryProgress(testQueryId)
+	require.Nil(err, "should be able to subscribe to query progress updates after query started")
+	require.NotNil(ch)
+	require.NotNil(unsubscribe)
+
+	expectedProgress := model.QueryProgress{}
+	updateQueryProgress(&expectedProgress, testProgress1)
+	require.Equal(expectedProgress.ReadRows, testProgress1.Rows)
+	select {
+	case qp := <-ch:
+		require.Equal(qp, expectedProgress)
+	default:
+		require.Fail("should receive latest query progress state immediately after subscription")
+	}
+	select {
+	case _ = <-ch:
+		require.Fail("should have had only one pending update at this point")
+	default:
+	}
+
+	testProgress2 := &clickhouse.Progress{
+		Rows:      20,
+		Bytes:     40,
+		TotalRows: 100,
+		Elapsed:   40 * time.Millisecond,
+	}
+	err = tracker.ReportQueryProgress(testQueryId, testProgress2)
+	require.Nil(err, "should be able to report progress multiple times while query is in progress")
+
+	updateQueryProgress(&expectedProgress, testProgress2)
+	select {
+	case qp := <-ch:
+		require.Equal(qp, expectedProgress)
+	default:
+		require.Fail("should receive updates whenever new progress updates get reported to tracker")
+	}
+	select {
+	case _ = <-ch:
+		require.Fail("should have had only one pending update at this point")
+	default:
+	}
+
+	reportQueryFinished()
+	select {
+	case _, isSubscriptionChannelOpen := <-ch:
+		require.False(isSubscriptionChannelOpen, "subscription channels should get closed after query finishes")
+	default:
+		require.Fail("subscription channels should get closed after query finishes")
+	}
+
+	err = tracker.ReportQueryProgress(testQueryId, testProgress)
+	require.NotNil(err, "shouldn't be able to report query progress after query has finished")
+	require.Equal(err.Type(), model.ErrorNotFound)
+
+	ch, unsubscribe, err = tracker.SubscribeToQueryProgress(testQueryId)
+	require.NotNil(err, "shouldn't be able to subscribe for progress updates after query has finished")
+	require.Equal(err.Type(), model.ErrorNotFound)
+	require.Nil(ch)
+	require.Nil(unsubscribe)
+}

pkg/query-service/app/clickhouseReader/reader.go

@@ -44,6 +44,7 @@ import (
 
 	"log/slog"
 
+	queryprogress "github.com/SigNoz/signoz/pkg/query-service/app/clickhouseReader/query_progress"
 	"github.com/SigNoz/signoz/pkg/query-service/app/resource"
 	"github.com/SigNoz/signoz/pkg/query-service/app/services"
 	"github.com/SigNoz/signoz/pkg/query-service/app/traces/smart"
@@ -144,6 +145,7 @@ type ClickHouseReader struct {
 	logsResourceKeys        string
 	logsTagAttributeTableV2 string
 	logger                  *slog.Logger
+	queryProgressTracker    queryprogress.QueryProgressTracker
 
 	logsTableV2              string
 	logsLocalTableV2         string
@@ -212,6 +214,7 @@ func NewReader(
 		logsTagAttributeTableV2:  options.primary.LogsTagAttributeTableV2,
 		liveTailRefreshSeconds:   options.primary.LiveTailRefreshSeconds,
 		cluster:                  cluster,
+		queryProgressTracker:     queryprogress.NewQueryProgressTracker(logger),
 		logsTableV2:              options.primary.LogsTableV2,
 		logsLocalTableV2:         options.primary.LogsLocalTableV2,
 		logsResourceTableV2:      options.primary.LogsResourceTableV2,
@@ -4021,6 +4024,27 @@ func (r *ClickHouseReader) GetTimeSeriesResultV3(ctx context.Context, query stri
 		instrumentationtypes.CodeNamespace:    "clickhouse-reader",
 		instrumentationtypes.CodeFunctionName: "GetTimeSeriesResultV3",
 	})
+	// Hook up query progress reporting if requested.
+	queryId := ctx.Value("queryId")
+	if queryId != nil {
+		qid, ok := queryId.(string)
+		if !ok {
+			r.logger.Error("GetTimeSeriesResultV3: queryId in ctx not a string as expected", "queryId", queryId)
+
+		} else {
+			ctx = clickhouse.Context(ctx, clickhouse.WithProgress(
+				func(p *clickhouse.Progress) {
+					go func() {
+						err := r.queryProgressTracker.ReportQueryProgress(qid, p)
+						if err != nil {
+							r.logger.Error("Couldn't report query progress", "queryId", qid, errorsV2.Attr(err))
+						}
+					}()
+				},
+			))
+		}
+	}
+
 	rows, err := r.db.Query(ctx, query)
 
 	if err != nil {
@@ -4981,6 +5005,18 @@ func (r *ClickHouseReader) GetMinAndMaxTimestampForTraceID(ctx context.Context,
 	return minTime.UnixNano(), maxTime.UnixNano(), nil
 }
 
+func (r *ClickHouseReader) ReportQueryStartForProgressTracking(
+	queryId string,
+) (func(), *model.ApiError) {
+	return r.queryProgressTracker.ReportQueryStarted(queryId)
+}
+
+func (r *ClickHouseReader) SubscribeToQueryProgress(
+	queryId string,
+) (<-chan model.QueryProgress, func(), *model.ApiError) {
+	return r.queryProgressTracker.SubscribeToQueryProgress(queryId)
+}
+
 func (r *ClickHouseReader) UpdateMetricsMetadata(ctx context.Context, orgID valuer.UUID, req *model.UpdateMetricsMetadata) *model.ApiError {
 	ctx = ctxtypes.NewContextWithCommentVals(ctx, map[string]string{
 		instrumentationtypes.TelemetrySignal:  telemetrytypes.SignalMetrics.StringValue(),

pkg/query-service/app/http_handler.go

@@ -36,6 +36,7 @@ import (
 	"github.com/SigNoz/signoz/pkg/valuer"
 
 	"github.com/gorilla/mux"
+	"github.com/gorilla/websocket"
 	jsoniter "github.com/json-iterator/go"
 	_ "modernc.org/sqlite"
 
@@ -114,6 +115,9 @@ type APIHandler struct {
 	// is registers.
 	SetupCompleted bool
 
+	// Websocket connection upgrader
+	Upgrader *websocket.Upgrader
+
 	QueryParserAPI *queryparser.API
 
 	Signoz *signoz.SigNoz
@@ -203,6 +207,12 @@ func NewAPIHandler(opts APIHandlerOpts, config signoz.Config) (*APIHandler, erro
 		aH.SetupCompleted = true
 	}
 
+	aH.Upgrader = &websocket.Upgrader{
+		CheckOrigin: func(r *http.Request) bool {
+			return true
+		},
+	}
+
 	return aH, nil
 }
 
@@ -344,10 +354,18 @@ func (aH *APIHandler) RegisterQueryRangeV3Routes(router *mux.Router, am *middlew
 
 	subRouter.HandleFunc("/filter_suggestions", am.ViewAccess(aH.getQueryBuilderSuggestions)).Methods(http.MethodGet)
 
+	// TODO(Raj): Remove this handler after /ws based path has been completely rolled out.
+	subRouter.HandleFunc("/query_progress", am.ViewAccess(aH.GetQueryProgressUpdates)).Methods(http.MethodGet)
+
 	// live logs
 	subRouter.HandleFunc("/logs/livetail", am.ViewAccess(aH.Signoz.Handlers.QuerierHandler.QueryRawStream)).Methods(http.MethodGet)
 }
 
+func (aH *APIHandler) RegisterWebSocketPaths(router *mux.Router, am *middleware.AuthZ) {
+	subRouter := router.PathPrefix("/ws").Subrouter()
+	subRouter.HandleFunc("/query_progress", am.ViewAccess(aH.GetQueryProgressUpdates)).Methods(http.MethodGet)
+}
+
 func (aH *APIHandler) RegisterQueryRangeV4Routes(router *mux.Router, am *middleware.AuthZ) {
 	subRouter := router.PathPrefix("/api/v4").Subrouter()
 	subRouter.HandleFunc("/query_range", am.ViewAccess(aH.QueryRangeV4)).Methods(http.MethodPost)
@@ -3527,6 +3545,27 @@ func (aH *APIHandler) queryRangeV3(ctx context.Context, queryRangeParams *v3.Que
 		}
 	}
 
+	// Hook up query progress tracking if requested
+	queryIdHeader := r.Header.Get("X-SIGNOZ-QUERY-ID")
+	if len(queryIdHeader) > 0 {
+		onQueryFinished, apiErr := aH.reader.ReportQueryStartForProgressTracking(queryIdHeader)
+
+		if apiErr != nil {
+			aH.logger.ErrorContext(ctx, "failed to report query start for progress tracking",
+				"query_id", queryIdHeader, errors.Attr(apiErr),
+			)
+
+		} else {
+			// Adding queryId to the context signals clickhouse queries to report progress
+			//lint:ignore SA1029 ignore for now
+			ctx = context.WithValue(ctx, "queryId", queryIdHeader)
+
+			defer func() {
+				go onQueryFinished()
+			}()
+		}
+	}
+
 	ctx = ctxtypes.NewContextWithCommentVals(ctx, map[string]string{
 		instrumentationtypes.CodeNamespace:    "app",
 		instrumentationtypes.CodeFunctionName: "QueryRange",
@@ -3708,6 +3747,73 @@ func (aH *APIHandler) QueryRangeV3(w http.ResponseWriter, r *http.Request) {
 	aH.queryRangeV3(r.Context(), queryRangeParams, w, r)
 }
 
+func (aH *APIHandler) GetQueryProgressUpdates(w http.ResponseWriter, r *http.Request) {
+	// Upgrade connection to websocket, sending back the requested protocol
+	// value for sec-websocket-protocol
+	//
+	// Since js websocket API doesn't allow setting headers, this header is often
+	// used for passing auth tokens. As per websocket spec the connection will only
+	// succeed if the requested `Sec-Websocket-Protocol` is sent back as a header
+	// in the upgrade response (signifying that the protocol is supported by the server).
+	upgradeResponseHeaders := http.Header{}
+	requestedProtocol := r.Header.Get("Sec-WebSocket-Protocol")
+	if len(requestedProtocol) > 0 {
+		upgradeResponseHeaders.Add("Sec-WebSocket-Protocol", requestedProtocol)
+	}
+
+	c, err := aH.Upgrader.Upgrade(w, r, upgradeResponseHeaders)
+	if err != nil {
+		RespondError(w, model.InternalError(fmt.Errorf(
+			"couldn't upgrade connection: %w", err,
+		)), nil)
+		return
+	}
+	defer c.Close()
+
+	// Websocket upgrade complete. Subscribe to query progress and send updates to client
+	//
+	// Note: we handle any subscription problems (queryId query param missing or query already complete etc)
+	// after the websocket connection upgrade by closing the channel.
+	// The other option would be to handle the errors before websocket upgrade by sending an
+	// error response instead of the upgrade response, but that leads to a generic websocket
+	// connection failure on the client.
+
+	queryId := r.URL.Query().Get("q")
+
+	progressCh, unsubscribe, apiErr := aH.reader.SubscribeToQueryProgress(queryId)
+	if apiErr != nil {
+		// Shouldn't happen unless query progress requested after query finished
+		aH.logger.WarnContext(r.Context(), "failed to subscribe to query progress",
+			"query_id", queryId, errors.Attr(apiErr),
+		)
+		return
+	}
+	defer func() { go unsubscribe() }()
+
+	for queryProgress := range progressCh {
+		msg, err := json.Marshal(queryProgress)
+		if err != nil {
+			aH.logger.ErrorContext(r.Context(), "failed to serialize progress message",
+				"query_id", queryId, "progress", queryProgress, errors.Attr(err),
+			)
+			continue
+		}
+
+		err = c.WriteMessage(websocket.TextMessage, msg)
+		if err != nil {
+			aH.logger.ErrorContext(r.Context(), "failed to write progress message to websocket",
+				"query_id", queryId, "msg", string(msg), errors.Attr(err),
+			)
+			break
+
+		} else {
+			aH.logger.DebugContext(r.Context(), "wrote progress message to websocket",
+				"query_id", queryId, "msg", string(msg),
+			)
+		}
+	}
+}
+
 func (aH *APIHandler) getMetricMetadata(w http.ResponseWriter, r *http.Request) {
 	claims, err := authtypes.ClaimsFromContext(r.Context())
 	if err != nil {

pkg/query-service/app/server.go

@@ -164,6 +164,7 @@ func (s *Server) createPublicServer(api *APIHandler, web web.Web) (*http.Server,
 	api.RegisterLogsRoutes(r, am)
 	api.RegisterIntegrationRoutes(r, am)
 	api.RegisterQueryRangeV3Routes(r, am)
+	api.RegisterWebSocketPaths(r, am)
 	api.RegisterQueryRangeV4Routes(r, am)
 	api.RegisterMessagingQueuesRoutes(r, am)
 	api.RegisterThirdPartyApiRoutes(r, am)
@@ -177,7 +178,7 @@ func (s *Server) createPublicServer(api *APIHandler, web web.Web) (*http.Server,
 	c := cors.New(cors.Options{
 		AllowedOrigins: []string{"*"},
 		AllowedMethods: []string{"GET", "DELETE", "POST", "PUT", "PATCH", "OPTIONS"},
-		AllowedHeaders: []string{"Accept", "Authorization", "Content-Type", "cache-control"},
+		AllowedHeaders: []string{"Accept", "Authorization", "Content-Type", "cache-control", "X-SIGNOZ-QUERY-ID", "Sec-WebSocket-Protocol"},
 	})
 
 	handler := c.Handler(r)

pkg/query-service/interfaces/interface.go

@@ -91,6 +91,10 @@ type Reader interface {
 
 	GetMinAndMaxTimestampForTraceID(ctx context.Context, traceID []string) (int64, int64, error)
 
+	// Query Progress tracking helpers.
+	ReportQueryStartForProgressTracking(queryId string) (reportQueryFinished func(), apiErr *model.ApiError)
+	SubscribeToQueryProgress(queryId string) (<-chan model.QueryProgress, func(), *model.ApiError)
+
 	//trace
 	GetTraceFields(ctx context.Context) (*model.GetFieldsResponse, *model.ApiError)
 	UpdateTraceField(ctx context.Context, field *model.UpdateField) *model.ApiError

pkg/query-service/model/logs.go

@@ -7,6 +7,14 @@ import (
 	v3 "github.com/SigNoz/signoz/pkg/query-service/model/v3"
 )
 
+type QueryProgress struct {
+	ReadRows uint64 `json:"read_rows"`
+
+	ReadBytes uint64 `json:"read_bytes"`
+
+	ElapsedMs uint64 `json:"elapsed_ms"`
+}
+
 func GetLogFieldsV3(ctx context.Context, queryRangeParams *v3.QueryRangeParamsV3, fields *GetFieldsResponse) map[string]v3.AttributeKey {
 	data := map[string]v3.AttributeKey{}
 	for _, query := range queryRangeParams.CompositeQuery.BuilderQueries {

scripts/promqltestcorpus/go.mod

@@ -70,9 +70,9 @@ require (
 	github.com/x448/float16 v0.8.4 // indirect
 	go.opentelemetry.io/auto/sdk v1.2.1 // indirect
 	go.opentelemetry.io/contrib/instrumentation/net/http/otelhttp v0.67.0 // indirect
-	go.opentelemetry.io/otel v1.44.0 // indirect
-	go.opentelemetry.io/otel/metric v1.44.0 // indirect
-	go.opentelemetry.io/otel/trace v1.44.0 // indirect
+	go.opentelemetry.io/otel v1.43.0 // indirect
+	go.opentelemetry.io/otel/metric v1.43.0 // indirect
+	go.opentelemetry.io/otel/trace v1.43.0 // indirect
 	go.uber.org/atomic v1.11.0 // indirect
 	go.uber.org/goleak v1.3.0 // indirect
 	go.yaml.in/yaml/v2 v2.4.4 // indirect
@@ -86,8 +86,8 @@ require (
 	golang.org/x/text v0.37.0 // indirect
 	golang.org/x/time v0.15.0 // indirect
 	google.golang.org/api v0.272.0 // indirect
-	google.golang.org/genproto/googleapis/rpc v0.0.0-20260526163538-3dc84a4a5aaa // indirect
-	google.golang.org/grpc v1.83.1 // indirect
+	google.golang.org/genproto/googleapis/rpc v0.0.0-20260414002931-afd174a4e478 // indirect
+	google.golang.org/grpc v1.82.1 // indirect
 	google.golang.org/protobuf v1.36.11 // indirect
 	gopkg.in/inf.v0 v0.9.1 // indirect
 	gopkg.in/yaml.v3 v3.0.1 // indirect

scripts/promqltestcorpus/go.sum

@@ -355,16 +355,16 @@ go.opentelemetry.io/contrib/instrumentation/net/http/httptrace/otelhttptrace v0.
 go.opentelemetry.io/contrib/instrumentation/net/http/httptrace/otelhttptrace v0.67.0/go.mod h1:gO9smoZe9KnZcJCqcB0lMmQ4Z5VEifYmjMTpnwtTSuQ=
 go.opentelemetry.io/contrib/instrumentation/net/http/otelhttp v0.67.0 h1:OyrsyzuttWTSur2qN/Lm0m2a8yqyIjUVBZcxFPuXq2o=
 go.opentelemetry.io/contrib/instrumentation/net/http/otelhttp v0.67.0/go.mod h1:C2NGBr+kAB4bk3xtMXfZ94gqFDtg/GkI7e9zqGh5Beg=
-go.opentelemetry.io/otel v1.44.0 h1:JjwHmHpA4iZ3wBxluu2fbbE7j4kqlE8jXyAyPXH7HqU=
-go.opentelemetry.io/otel v1.44.0/go.mod h1:BMgjTHL9WPRlRjL2oZCBTL4whCGtXch2H4BhOPIAyYc=
-go.opentelemetry.io/otel/metric v1.44.0 h1:1w0gILTcHdr3YI+ixLyjemwrVnsMURbTZFrSYCdDdmc=
-go.opentelemetry.io/otel/metric v1.44.0/go.mod h1:8O7hanEPBNgEMmybD3s2VBKcgWOCsA6tzHBPODAiquo=
-go.opentelemetry.io/otel/sdk v1.44.0 h1:nHYwb9lK+fJPU/dnT6s7W7Z8itMWyqrnVfbheVYrZ58=
-go.opentelemetry.io/otel/sdk v1.44.0/go.mod h1:Osuydd3Se74nqjAKxid74N5eC+jfEqfTegHRnq58oK0=
-go.opentelemetry.io/otel/sdk/metric v1.44.0 h1:3LlKgI+VjbVsjNRFZJZAJ30WjXC5VkNRks6si09iEfI=
-go.opentelemetry.io/otel/sdk/metric v1.44.0/go.mod h1:5B5pMARnXxKhltooO4xUuCBorl65a4EpnTalObqOigA=
-go.opentelemetry.io/otel/trace v1.44.0 h1:jxF5CsGYCe74MCRx2X4g7WsY/VBKRqqpNvXlX/6gtIk=
-go.opentelemetry.io/otel/trace v1.44.0/go.mod h1:oLl1jrMQAVo6v3GAggN+1VH9VIz9iUSvW53sW1Q8PIE=
+go.opentelemetry.io/otel v1.43.0 h1:mYIM03dnh5zfN7HautFE4ieIig9amkNANT+xcVxAj9I=
+go.opentelemetry.io/otel v1.43.0/go.mod h1:JuG+u74mvjvcm8vj8pI5XiHy1zDeoCS2LB1spIq7Ay0=
+go.opentelemetry.io/otel/metric v1.43.0 h1:d7638QeInOnuwOONPp4JAOGfbCEpYb+K6DVWvdxGzgM=
+go.opentelemetry.io/otel/metric v1.43.0/go.mod h1:RDnPtIxvqlgO8GRW18W6Z/4P462ldprJtfxHxyKd2PY=
+go.opentelemetry.io/otel/sdk v1.43.0 h1:pi5mE86i5rTeLXqoF/hhiBtUNcrAGHLKQdhg4h4V9Dg=
+go.opentelemetry.io/otel/sdk v1.43.0/go.mod h1:P+IkVU3iWukmiit/Yf9AWvpyRDlUeBaRg6Y+C58QHzg=
+go.opentelemetry.io/otel/sdk/metric v1.43.0 h1:S88dyqXjJkuBNLeMcVPRFXpRw2fuwdvfCGLEo89fDkw=
+go.opentelemetry.io/otel/sdk/metric v1.43.0/go.mod h1:C/RJtwSEJ5hzTiUz5pXF1kILHStzb9zFlIEe85bhj6A=
+go.opentelemetry.io/otel/trace v1.43.0 h1:BkNrHpup+4k4w+ZZ86CZoHHEkohws8AY+WTX09nk+3A=
+go.opentelemetry.io/otel/trace v1.43.0/go.mod h1:/QJhyVBUUswCphDVxq+8mld+AvhXZLhe+8WVFxiFff0=
 go.uber.org/atomic v1.11.0 h1:ZvwS0R+56ePWxUNi+Atn9dWONBPp/AUETXlHW0DxSjE=
 go.uber.org/atomic v1.11.0/go.mod h1:LUxbIzbOniOlMKjJjyPfpl4v+PKK2cNJn91OQbhoJI0=
 go.uber.org/goleak v1.3.0 h1:2K3zAYmnTNqV73imy9J1T3WC+gmCePx2hEGkimedGto=
@@ -405,12 +405,12 @@ gonum.org/v1/gonum v0.17.0/go.mod h1:El3tOrEuMpv2UdMrbNlKEh9vd86bmQ6vqIcDwxEOc1E
 google.golang.org/api v0.272.0 h1:eLUQZGnAS3OHn31URRf9sAmRk3w2JjMx37d2k8AjJmA=
 google.golang.org/api v0.272.0/go.mod h1:wKjowi5LNJc5qarNvDCvNQBn3rVK8nSy6jg2SwRwzIA=
 google.golang.org/genproto v0.0.0-20260217215200-42d3e9bedb6d h1:vsOm753cOAMkt76efriTCDKjpCbK18XGHMJHo0JUKhc=
-google.golang.org/genproto/googleapis/api v0.0.0-20260526163538-3dc84a4a5aaa h1:Kjn0N0tCrDgiAFW+lGO4JZ3ck44CehvJQMAwj9QF0G8=
-google.golang.org/genproto/googleapis/api v0.0.0-20260526163538-3dc84a4a5aaa/go.mod h1:q4lMZS6kskjT5HvCPrnnypcDPVJqT/f4nfxmkE7gryY=
-google.golang.org/genproto/googleapis/rpc v0.0.0-20260526163538-3dc84a4a5aaa h1:mZHHdPZl0dbGHCflZgAq/Q468DWVFcU2whhB2KAo8fk=
-google.golang.org/genproto/googleapis/rpc v0.0.0-20260526163538-3dc84a4a5aaa/go.mod h1:4Hqkh8ycfw05ld/3BWL7rJOSfebL2Q+DVDeRgYgxUU8=
-google.golang.org/grpc v1.83.1 h1:HIO0+BEtBP6soyqvqC8sNUjZ7bTs+0hFQuFF+RAy++Y=
-google.golang.org/grpc v1.83.1/go.mod h1:kDyl6SKsiHKt0uylY5gtn5cEjkrIOhQOGDgIc4JGwzQ=
+google.golang.org/genproto/googleapis/api v0.0.0-20260414002931-afd174a4e478 h1:yQugLulqltosq0B/f8l4w9VryjV+N/5gcW0jQ3N8Qec=
+google.golang.org/genproto/googleapis/api v0.0.0-20260414002931-afd174a4e478/go.mod h1:C6ADNqOxbgdUUeRTU+LCHDPB9ttAMCTff6auwCVa4uc=
+google.golang.org/genproto/googleapis/rpc v0.0.0-20260414002931-afd174a4e478 h1:RmoJA1ujG+/lRGNfUnOMfhCy5EipVMyvUE+KNbPbTlw=
+google.golang.org/genproto/googleapis/rpc v0.0.0-20260414002931-afd174a4e478/go.mod h1:4Hqkh8ycfw05ld/3BWL7rJOSfebL2Q+DVDeRgYgxUU8=
+google.golang.org/grpc v1.82.1 h1:NnAxzGRA0677vCa4BUkOAnO5+FfQqVl9iUXeD0IqcGE=
+google.golang.org/grpc v1.82.1/go.mod h1:yzTZ1TB1Z3SG+LIYaI+WiE8D5+PZ3ArnrSp8zF3+/ZA=
 google.golang.org/protobuf v1.36.11 h1:fV6ZwhNocDyBLK0dj+fg8ektcVegBBuEolpbTQyBNVE=
 google.golang.org/protobuf v1.36.11/go.mod h1:HTf+CrKn2C3g5S8VImy6tdcUvCska2kB7j23XfzDpco=
 gopkg.in/check.v1 v0.0.0-20161208181325-20d25e280405/go.mod h1:Co6ibVJAznAaIkqp8huTwlJQCZ016jof/cbN4VW5Yz0=