chore(release): bump to v0.84.0 (#7995)

#### Summary
 - Release SigNoz v0.84.0

deploy/docker-swarm/docker-compose.ha.yaml

@@ -174,7 +174,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:v0.83.0
+    image: signoz/signoz:v0.84.0
     command:
       - --config=/root/config/prometheus.yml
     ports:

deploy/docker-swarm/docker-compose.yaml

@@ -110,7 +110,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:v0.83.0
+    image: signoz/signoz:v0.84.0
     command:
       - --config=/root/config/prometheus.yml
     ports:

deploy/docker/docker-compose.ha.yaml

@@ -177,7 +177,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:${VERSION:-v0.83.0}
+    image: signoz/signoz:${VERSION:-v0.84.0}
     container_name: signoz
     command:
       - --config=/root/config/prometheus.yml

deploy/docker/docker-compose.yaml

@@ -110,7 +110,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:${VERSION:-v0.83.0}
+    image: signoz/signoz:${VERSION:-v0.84.0}
     container_name: signoz
     command:
       - --config=/root/config/prometheus.yml

frontend/package.json

@@ -31,6 +31,7 @@
 		"@dnd-kit/core": "6.1.0",
 		"@dnd-kit/modifiers": "7.0.0",
 		"@dnd-kit/sortable": "8.0.0",
+		"@dnd-kit/utilities": "3.2.2",
 		"@grafana/data": "^11.2.3",
 		"@mdx-js/loader": "2.3.0",
 		"@mdx-js/react": "2.3.0",

frontend/public/locales/en/titles.json

@@ -69,5 +69,5 @@
 	"METRICS_EXPLORER": "SigNoz | Metrics Explorer",
 	"METRICS_EXPLORER_EXPLORER": "SigNoz | Metrics Explorer",
 	"METRICS_EXPLORER_VIEWS": "SigNoz | Metrics Explorer",
-	"API_MONITORING": "SigNoz | Third Party API"
+	"API_MONITORING": "SigNoz | External APIs"
 }

frontend/src/api/dynamicVariables/getFieldKeys.ts

@@ -1,34 +0,0 @@
-import { ApiBaseInstance } from 'api';
-import { ErrorResponse, SuccessResponse } from 'types/api';
-import { FieldKeyResponse } from 'types/api/dynamicVariables/getFieldKeys';
-
-/**
- * Get field keys for a given signal type
- * @param signal Type of signal (traces, logs, metrics)
- * @param name Optional search text
- */
-export const getFieldKeys = async (
-	signal?: 'traces' | 'logs' | 'metrics',
-	name?: string,
-): Promise<SuccessResponse<FieldKeyResponse> | ErrorResponse> => {
-	const params: Record<string, string> = {};
-
-	if (signal) {
-		params.signal = signal;
-	}
-
-	if (name) {
-		params.name = name;
-	}
-
-	const response = await ApiBaseInstance.get('/fields/keys', { params });
-
-	return {
-		statusCode: 200,
-		error: null,
-		message: response.data.status,
-		payload: response.data.data,
-	};
-};
-
-export default getFieldKeys;

frontend/src/api/dynamicVariables/getFieldValues.ts

@@ -1,63 +0,0 @@
-import { ApiBaseInstance } from 'api';
-import { ErrorResponse, SuccessResponse } from 'types/api';
-import { FieldValueResponse } from 'types/api/dynamicVariables/getFieldValues';
-
-/**
- * Get field values for a given signal type and field name
- * @param signal Type of signal (traces, logs, metrics)
- * @param name Name of the attribute for which values are being fetched
- * @param value Optional search text
- */
-export const getFieldValues = async (
-	signal?: 'traces' | 'logs' | 'metrics',
-	name?: string,
-	value?: string,
-	startUnixMilli?: number,
-	endUnixMilli?: number,
-): Promise<SuccessResponse<FieldValueResponse> | ErrorResponse> => {
-	const params: Record<string, string> = {};
-
-	if (signal) {
-		params.signal = signal;
-	}
-
-	if (name) {
-		params.name = name;
-	}
-
-	if (value) {
-		params.value = value;
-	}
-
-	if (startUnixMilli) {
-		params.startUnixMilli = Math.floor(startUnixMilli / 1000000).toString();
-	}
-
-	if (endUnixMilli) {
-		params.endUnixMilli = Math.floor(endUnixMilli / 1000000).toString();
-	}
-
-	const response = await ApiBaseInstance.get('/fields/values', { params });
-
-	// Normalize values from different types (stringValues, boolValues, etc.)
-	if (response.data?.data?.values) {
-		const allValues: string[] = [];
-		Object.values(response.data.data.values).forEach((valueArray: any) => {
-			if (Array.isArray(valueArray)) {
-				allValues.push(...valueArray.map(String));
-			}
-		});
-
-		// Add a normalized values array to the response
-		response.data.data.normalizedValues = allValues;
-	}
-
-	return {
-		statusCode: 200,
-		error: null,
-		message: response.data.status,
-		payload: response.data.data,
-	};
-};
-
-export default getFieldValues;

frontend/src/api/metrics/ApDex/getApDexSettings.ts

@@ -1,8 +0,0 @@
-import axios from 'api';
-import { AxiosResponse } from 'axios';
-import { ApDexPayloadAndSettingsProps } from 'types/api/metrics/getApDex';
-
-export const getApDexSettings = (
-	servicename: string,
-): Promise<AxiosResponse<ApDexPayloadAndSettingsProps[]>> =>
-	axios.get(`/settings/apdex?services=${servicename}`);

frontend/src/api/quickFilters/getCustomFilters.ts

@@ -0,0 +1,25 @@
+import { ApiBaseInstance } 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 ApiBaseInstance.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 { ApiBaseInstance } 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> =>
+	ApiBaseInstance.put(`orgs/me/filters`, {
+		...props.data,
+	});
+
+export default updateCustomFiltersAPI;

frontend/src/api/traceFunnels/index.ts

@@ -22,7 +22,7 @@ export const createFunnel = async (
 		statusCode: 200,
 		error: null,
 		message: 'Funnel created successfully',
-		payload: response.data,
+		payload: response.data.data,
 	};
 };
 
@@ -196,7 +196,9 @@ export interface FunnelOverviewResponse {
 			avg_rate: number;
 			conversion_rate: number | null;
 			errors: number;
+			// TODO(shaheer): remove p99_latency once we have support for latency
 			p99_latency: number;
+			latency: number;
 		};
 	}>;
 }
@@ -222,13 +224,6 @@ export const getFunnelOverview = async (
 	};
 };
 
-export interface SlowTracesPayload {
-	start_time: number;
-	end_time: number;
-	step_a_order: number;
-	step_b_order: number;
-}
-
 export interface SlowTraceData {
 	status: string;
 	data: Array<{
@@ -243,7 +238,7 @@ export interface SlowTraceData {
 
 export const getFunnelSlowTraces = async (
 	funnelId: string,
-	payload: SlowTracesPayload,
+	payload: FunnelOverviewPayload,
 	signal?: AbortSignal,
 ): Promise<SuccessResponse<SlowTraceData> | ErrorResponse> => {
 	const response = await axios.post(
@@ -261,12 +256,6 @@ export const getFunnelSlowTraces = async (
 		payload: response.data,
 	};
 };
-export interface ErrorTracesPayload {
-	start_time: number;
-	end_time: number;
-	step_a_order: number;
-	step_b_order: number;
-}
 
 export interface ErrorTraceData {
 	status: string;
@@ -282,7 +271,7 @@ export interface ErrorTraceData {
 
 export const getFunnelErrorTraces = async (
 	funnelId: string,
-	payload: ErrorTracesPayload,
+	payload: FunnelOverviewPayload,
 	signal?: AbortSignal,
 ): Promise<SuccessResponse<ErrorTraceData> | ErrorResponse> => {
 	const response: AxiosResponse = await axios.post(
@@ -337,3 +326,37 @@ export const getFunnelSteps = async (
 		payload: response.data,
 	};
 };
+
+export interface FunnelStepsOverviewPayload {
+	start_time: number;
+	end_time: number;
+	step_start?: number;
+	step_end?: number;
+}
+
+export interface FunnelStepsOverviewResponse {
+	status: string;
+	data: Array<{
+		timestamp: string;
+		data: Record<string, number>;
+	}>;
+}
+
+export const getFunnelStepsOverview = async (
+	funnelId: string,
+	payload: FunnelStepsOverviewPayload,
+	signal?: AbortSignal,
+): Promise<SuccessResponse<FunnelStepsOverviewResponse> | ErrorResponse> => {
+	const response = await axios.post(
+		`${FUNNELS_BASE_PATH}/${funnelId}/analytics/steps/overview`,
+		payload,
+		{ signal },
+	);
+
+	return {
+		statusCode: 200,
+		error: null,
+		message: '',
+		payload: response.data,
+	};
+};

frontend/src/api/utils.ts

@@ -12,7 +12,7 @@ export const Logout = (): void => {
 	deleteLocalStorageKey(LOCALSTORAGE.LOGGED_IN_USER_NAME);
 	deleteLocalStorageKey(LOCALSTORAGE.CHAT_SUPPORT);
 	deleteLocalStorageKey(LOCALSTORAGE.USER_ID);
-
+	deleteLocalStorageKey(LOCALSTORAGE.QUICK_FILTERS_SETTINGS_ANNOUNCEMENT);
 	window.dispatchEvent(new CustomEvent('LOGOUT'));
 
 	// eslint-disable-next-line @typescript-eslint/ban-ts-comment

frontend/src/api/v1/settings/apdex/services/get.ts

@@ -0,0 +1,26 @@
+import axios from 'api';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
+import { AxiosError } from 'axios';
+import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
+import {
+	ApDexPayloadAndSettingsProps,
+	PayloadProps,
+} from 'types/api/metrics/getApDex';
+
+const getApDexSettings = async (
+	servicename: string,
+): Promise<SuccessResponseV2<ApDexPayloadAndSettingsProps[]>> => {
+	try {
+		const response = await axios.get<PayloadProps>(
+			`/settings/apdex?services=${servicename}`,
+		);
+		return {
+			httpStatusCode: response.status,
+			data: response.data.data,
+		};
+	} catch (error) {
+		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
+	}
+};
+
+export default getApDexSettings;

frontend/src/components/NewSelect/CustomMultiSelect.tsx

@@ -27,9 +27,7 @@ import { popupContainer } from 'utils/selectPopupContainer';
 
 import { CustomMultiSelectProps, CustomTagProps, OptionData } from './types';
 import {
-	ALL_SELECTED_VALUE,
 	filterOptionsBySearch,
-	handleScrollToBottom,
 	prioritizeOrAddOptionForMultiSelect,
 	SPACEKEY,
 } from './utils';
@@ -39,6 +37,8 @@ enum ToggleTagValue {
 	All = 'All',
 }
 
+const ALL_SELECTED_VALUE = '__all__'; // Constant for the special value
+
 const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 	placeholder = 'Search...',
 	className,
@@ -62,8 +62,6 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 	allowClear = false,
 	onRetry,
 	maxTagTextLength,
-	onDropdownVisibleChange,
-	showIncompleteDataMessage = false,
 	...rest
 }) => {
 	// ===== State & Refs =====
@@ -80,8 +78,6 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 	const optionRefs = useRef<Record<number, HTMLDivElement | null>>({});
 	const [visibleOptions, setVisibleOptions] = useState<OptionData[]>([]);
 	const isClickInsideDropdownRef = useRef(false);
-	const justOpenedRef = useRef<boolean>(false);
-	const [isScrolledToBottom, setIsScrolledToBottom] = useState(false);
 
 	// Convert single string value to array for consistency
 	const selectedValues = useMemo(
@@ -128,12 +124,6 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 		return allAvailableValues.every((val) => selectedValues.includes(val));
 	}, [selectedValues, allAvailableValues, enableAllSelection]);
 
-	// Define allOptionShown earlier in the code
-	const allOptionShown = useMemo(
-		() => value === ALL_SELECTED_VALUE || value === 'ALL',
-		[value],
-	);
-
 	// Value passed to the underlying Ant Select component
 	const displayValue = useMemo(
 		() => (isAllSelected ? [ALL_SELECTED_VALUE] : selectedValues),
@@ -142,18 +132,10 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 
 	// ===== Internal onChange Handler =====
 	const handleInternalChange = useCallback(
-		(newValue: string | string[], directCaller?: boolean): void => {
+		(newValue: string | string[]): void => {
 			// Ensure newValue is an array
 			const currentNewValue = Array.isArray(newValue) ? newValue : [];
 
-			if (
-				(allOptionShown || isAllSelected) &&
-				!directCaller &&
-				currentNewValue.length === 0
-			) {
-				return;
-			}
-
 			if (!onChange) return;
 
 			// Case 1: Cleared (empty array or undefined)
@@ -162,7 +144,7 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 				return;
 			}
 
-			// Case 2: "__ALL__" is selected (means select all actual values)
+			// Case 2: "__all__" is selected (means select all actual values)
 			if (currentNewValue.includes(ALL_SELECTED_VALUE)) {
 				const allActualOptions = allAvailableValues.map(
 					(v) => options.flat().find((o) => o.value === v) || { label: v, value: v },
@@ -193,14 +175,7 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 				}
 			}
 		},
-		[
-			allOptionShown,
-			isAllSelected,
-			onChange,
-			allAvailableValues,
-			options,
-			enableAllSelection,
-		],
+		[onChange, allAvailableValues, options, enableAllSelection],
 	);
 
 	// ===== Existing Callbacks (potentially needing adjustment later) =====
@@ -535,19 +510,11 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 			}
 
 			// Normal single value handling
-			const trimmedValue = value.trim();
-			setSearchText(trimmedValue);
+			setSearchText(value.trim());
 			if (!isOpen) {
 				setIsOpen(true);
-				justOpenedRef.current = true;
 			}
-
-			// Reset active index when search changes if dropdown is open
-			if (isOpen && trimmedValue) {
-				setActiveIndex(0);
-			}
-
-			if (onSearch) onSearch(trimmedValue);
+			if (onSearch) onSearch(value.trim());
 		},
 		[onSearch, isOpen, selectedValues, onChange],
 	);
@@ -561,34 +528,28 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 		(text: string, searchQuery: string): React.ReactNode => {
 			if (!searchQuery || !highlightSearch) return text;
 
-			try {
-				const parts = text.split(
-					new RegExp(
-						`(${searchQuery.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&')})`,
-						'gi',
-					),
-				);
-				return (
-					<>
-						{parts.map((part, i) => {
-							// Create a unique key that doesn't rely on array index
-							const uniqueKey = `${text.substring(0, 3)}-${part.substring(0, 3)}-${i}`;
+			const parts = text.split(
+				new RegExp(
+					`(${searchQuery.replace(/[.*+?^${}()|[\\]\\]/g, '\\$&')})`,
+					'gi',
+				),
+			);
+			return (
+				<>
+					{parts.map((part, i) => {
+						// Create a unique key that doesn't rely on array index
+						const uniqueKey = `${text.substring(0, 3)}-${part.substring(0, 3)}-${i}`;
 
-							return part.toLowerCase() === searchQuery.toLowerCase() ? (
-								<span key={uniqueKey} className="highlight-text">
-									{part}
-								</span>
-							) : (
-								part
-							);
-						})}
-					</>
-				);
-			} catch (error) {
-				// If regex fails, return the original text without highlighting
-				console.error('Error in text highlighting:', error);
-				return text;
-			}
+						return part.toLowerCase() === searchQuery.toLowerCase() ? (
+							<span key={uniqueKey} className="highlight-text">
+								{part}
+							</span>
+						) : (
+							part
+						);
+					})}
+				</>
+			);
 		},
 		[highlightSearch],
 	);
@@ -599,10 +560,10 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 
 		if (isAllSelected) {
 			// If all are selected, deselect all
-			handleInternalChange([], true);
+			handleInternalChange([]);
 		} else {
 			// Otherwise, select all
-			handleInternalChange([ALL_SELECTED_VALUE], true);
+			handleInternalChange([ALL_SELECTED_VALUE]);
 		}
 	}, [options, isAllSelected, handleInternalChange]);
 
@@ -777,26 +738,6 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 	// Enhanced keyboard navigation with support for maxTagCount
 	const handleKeyDown = useCallback(
 		(e: React.KeyboardEvent<HTMLElement>): void => {
-			// Simple early return if ALL is selected - block all possible keyboard interactions
-			// that could remove the ALL tag, but still allow dropdown navigation and search
-			if (
-				(allOptionShown || isAllSelected) &&
-				(e.key === 'Backspace' || e.key === 'Delete')
-			) {
-				// Only prevent default if the input is empty or cursor is at start position
-				const activeElement = document.activeElement as HTMLInputElement;
-				const isInputActive = activeElement?.tagName === 'INPUT';
-				const isInputEmpty = isInputActive && !activeElement?.value;
-				const isCursorAtStart =
-					isInputActive && activeElement?.selectionStart === 0;
-
-				if (isInputEmpty || isCursorAtStart) {
-					e.preventDefault();
-					e.stopPropagation();
-					return;
-				}
-			}
-
 			// Get flattened list of all selectable options
 			const getFlatOptions = (): OptionData[] => {
 				if (!visibleOptions) return [];
@@ -811,7 +752,7 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 				if (hasAll) {
 					flatList.push({
 						label: 'ALL',
-						value: ALL_SELECTED_VALUE, // Special value for the ALL option
+						value: '__all__', // Special value for the ALL option
 						type: 'defined',
 					});
 				}
@@ -843,17 +784,6 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 
 			const flatOptions = getFlatOptions();
 
-			// If we just opened the dropdown and have options, set first option as active
-			if (justOpenedRef.current && flatOptions.length > 0) {
-				setActiveIndex(0);
-				justOpenedRef.current = false;
-			}
-
-			// If no option is active but we have options and dropdown is open, activate the first one
-			if (isOpen && activeIndex === -1 && flatOptions.length > 0) {
-				setActiveIndex(0);
-			}
-
 			// Get the active input element to check cursor position
 			const activeElement = document.activeElement as HTMLInputElement;
 			const isInputActive = activeElement?.tagName === 'INPUT';
@@ -1199,7 +1129,7 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 						// If there's an active option in the dropdown, prioritize selecting it
 						if (activeIndex >= 0 && activeIndex < flatOptions.length) {
 							const selectedOption = flatOptions[activeIndex];
-							if (selectedOption.value === ALL_SELECTED_VALUE) {
+							if (selectedOption.value === '__all__') {
 								handleSelectAll();
 							} else if (selectedOption.value && onChange) {
 								const newValues = selectedValues.includes(selectedOption.value)
@@ -1229,10 +1159,6 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 						e.preventDefault();
 						setIsOpen(false);
 						setActiveIndex(-1);
-						// Call onDropdownVisibleChange when Escape is pressed to close dropdown
-						if (onDropdownVisibleChange) {
-							onDropdownVisibleChange(false);
-						}
 						break;
 
 					case SPACEKEY:
@@ -1242,7 +1168,7 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 							const selectedOption = flatOptions[activeIndex];
 
 							// Check if it's the ALL option
-							if (selectedOption.value === ALL_SELECTED_VALUE) {
+							if (selectedOption.value === '__all__') {
 								handleSelectAll();
 							} else if (selectedOption.value && onChange) {
 								const newValues = selectedValues.includes(selectedOption.value)
@@ -1288,7 +1214,7 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 						e.stopPropagation();
 						e.preventDefault();
 						setIsOpen(true);
-						justOpenedRef.current = true; // Set flag to initialize active option on next render
+						setActiveIndex(0);
 						setActiveChipIndex(-1);
 						break;
 
@@ -1334,14 +1260,9 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 			}
 		},
 		[
-			allOptionShown,
-			isAllSelected,
-			isOpen,
-			activeIndex,
-			getVisibleChipIndices,
-			getLastVisibleChipIndex,
 			selectedChips,
 			isSelectionMode,
+			isOpen,
 			activeChipIndex,
 			selectedValues,
 			visibleOptions,
@@ -1357,8 +1278,10 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 			startSelection,
 			selectionEnd,
 			extendSelection,
-			onDropdownVisibleChange,
+			activeIndex,
 			handleSelectAll,
+			getVisibleChipIndices,
+			getLastVisibleChipIndex,
 		],
 	);
 
@@ -1383,14 +1306,6 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 		setIsOpen(false);
 	}, []);
 
-	// Add a scroll handler for the dropdown
-	const handleDropdownScroll = useCallback(
-		(e: React.UIEvent<HTMLDivElement>): void => {
-			setIsScrolledToBottom(handleScrollToBottom(e));
-		},
-		[],
-	);
-
 	// Custom dropdown render with sections support
 	const customDropdownRender = useCallback((): React.ReactElement => {
 		// Process options based on current search
@@ -1467,7 +1382,6 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 				onMouseDown={handleDropdownMouseDown}
 				onClick={handleDropdownClick}
 				onKeyDown={handleKeyDown}
-				onScroll={handleDropdownScroll}
 				onBlur={handleBlur}
 				role="listbox"
 				aria-multiselectable="true"
@@ -1546,18 +1460,15 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 
 				{/* Navigation help footer */}
 				<div className="navigation-footer" role="note">
-					{!loading &&
-						!errorMessage &&
-						!noDataMessage &&
-						!(showIncompleteDataMessage && isScrolledToBottom) && (
-							<section className="navigate">
-								<ArrowDown size={8} className="icons" />
-								<ArrowUp size={8} className="icons" />
-								<ArrowLeft size={8} className="icons" />
-								<ArrowRight size={8} className="icons" />
-								<span className="keyboard-text">to navigate</span>
-							</section>
-						)}
+					{!loading && !errorMessage && !noDataMessage && (
+						<section className="navigate">
+							<ArrowDown size={8} className="icons" />
+							<ArrowUp size={8} className="icons" />
+							<ArrowLeft size={8} className="icons" />
+							<ArrowRight size={8} className="icons" />
+							<span className="keyboard-text">to navigate</span>
+						</section>
+					)}
 					{loading && (
 						<div className="navigation-loading">
 							<div className="navigation-icons">
@@ -1583,19 +1494,9 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 						</div>
 					)}
 
-					{showIncompleteDataMessage &&
-						isScrolledToBottom &&
-						!loading &&
-						!errorMessage && (
-							<div className="navigation-text-incomplete">
-								Use search for more options
-							</div>
-						)}
-
-					{noDataMessage &&
-						!loading &&
-						!(showIncompleteDataMessage && isScrolledToBottom) &&
-						!errorMessage && <div className="navigation-text">{noDataMessage}</div>}
+					{noDataMessage && !loading && (
+						<div className="navigation-text">{noDataMessage}</div>
+					)}
 				</div>
 			</div>
 		);
@@ -1612,7 +1513,6 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 		handleDropdownMouseDown,
 		handleDropdownClick,
 		handleKeyDown,
-		handleDropdownScroll,
 		handleBlur,
 		activeIndex,
 		loading,
@@ -1622,31 +1522,8 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 		renderOptionWithIndex,
 		handleSelectAll,
 		onRetry,
-		showIncompleteDataMessage,
-		isScrolledToBottom,
 	]);
 
-	// Custom handler for dropdown visibility changes
-	const handleDropdownVisibleChange = useCallback(
-		(visible: boolean): void => {
-			setIsOpen(visible);
-			if (visible) {
-				justOpenedRef.current = true;
-				setActiveIndex(0);
-				setActiveChipIndex(-1);
-			} else {
-				setSearchText('');
-				setActiveIndex(-1);
-				// Don't clear activeChipIndex when dropdown closes to maintain tag focus
-			}
-			// Pass through to the parent component's handler if provided
-			if (onDropdownVisibleChange) {
-				onDropdownVisibleChange(visible);
-			}
-		},
-		[onDropdownVisibleChange],
-	);
-
 	// ===== Side Effects =====
 
 	// Clear search when dropdown closes
@@ -1711,9 +1588,52 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 			const { label, value, closable, onClose } = props;
 
 			// If the display value is the special ALL value, render the ALL tag
-			if (allOptionShown) {
-				// Don't render a visible tag - will be shown as placeholder
-				return <div style={{ display: 'none' }} />;
+			if (value === ALL_SELECTED_VALUE && isAllSelected) {
+				const handleAllTagClose = (
+					e: React.MouseEvent | React.KeyboardEvent,
+				): void => {
+					e.stopPropagation();
+					e.preventDefault();
+					handleInternalChange([]); // Clear selection when ALL tag is closed
+				};
+
+				const handleAllTagKeyDown = (e: React.KeyboardEvent): void => {
+					if (e.key === 'Enter' || e.key === SPACEKEY) {
+						handleAllTagClose(e);
+					}
+					// Prevent Backspace/Delete propagation if needed, handle in main keydown handler
+				};
+
+				return (
+					<div
+						className={cx('ant-select-selection-item', {
+							'ant-select-selection-item-active': activeChipIndex === 0, // Treat ALL tag as index 0 when active
+							'ant-select-selection-item-selected': selectedChips.includes(0),
+						})}
+						style={
+							activeChipIndex === 0 || selectedChips.includes(0)
+								? {
+										borderColor: Color.BG_ROBIN_500,
+										backgroundColor: Color.BG_SLATE_400,
+								  }
+								: undefined
+						}
+					>
+						<span className="ant-select-selection-item-content">ALL</span>
+						{closable && (
+							<span
+								className="ant-select-selection-item-remove"
+								onClick={handleAllTagClose}
+								onKeyDown={handleAllTagKeyDown}
+								role="button"
+								tabIndex={0}
+								aria-label="Remove ALL tag (deselect all)"
+							>
+								×
+							</span>
+						)}
+					</div>
+				);
 			}
 
 			// If not isAllSelected, render individual tags using previous logic
@@ -1793,70 +1713,52 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 			// Fallback for safety, should not be reached
 			return <div />;
 		},
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-		[isAllSelected, activeChipIndex, selectedChips, selectedValues, maxTagCount],
+		[
+			isAllSelected,
+			handleInternalChange,
+			activeChipIndex,
+			selectedChips,
+			selectedValues,
+			maxTagCount,
+		],
 	);
 
-	// Simple onClear handler to prevent clearing ALL
-	const onClearHandler = useCallback((): void => {
-		// Skip clearing if ALL is selected
-		if (allOptionShown || isAllSelected) {
-			return;
-		}
-
-		// Normal clear behavior
-		handleInternalChange([], true);
-		if (onClear) onClear();
-	}, [onClear, handleInternalChange, allOptionShown, isAllSelected]);
-
 	// ===== Component Rendering =====
 	return (
-		<div
-			className={cx('custom-multiselect-wrapper', {
-				'all-selected': allOptionShown || isAllSelected,
+		<Select
+			ref={selectRef}
+			className={cx('custom-multiselect', className, {
+				'has-selection': selectedChips.length > 0 && !isAllSelected,
+				'is-all-selected': isAllSelected,
 			})}
-		>
-			{(allOptionShown || isAllSelected) && !searchText && (
-				<div className="all-text">ALL</div>
-			)}
-			<Select
-				ref={selectRef}
-				className={cx('custom-multiselect', className, {
-					'has-selection': selectedChips.length > 0 && !isAllSelected,
-					'is-all-selected': isAllSelected,
-				})}
-				placeholder={placeholder}
-				mode="multiple"
-				showSearch
-				filterOption={false}
-				onSearch={handleSearch}
-				value={displayValue}
-				onChange={(newValue): void => {
-					console.log('newValue', newValue);
-					handleInternalChange(newValue, false);
-				}}
-				onClear={onClearHandler}
-				onDropdownVisibleChange={handleDropdownVisibleChange}
-				open={isOpen}
-				defaultActiveFirstOption={defaultActiveFirstOption}
-				popupMatchSelectWidth={dropdownMatchSelectWidth}
-				allowClear={allowClear}
-				getPopupContainer={getPopupContainer ?? popupContainer}
-				suffixIcon={<DownOutlined style={{ cursor: 'default' }} />}
-				dropdownRender={customDropdownRender}
-				menuItemSelectedIcon={null}
-				popupClassName={cx('custom-multiselect-dropdown-container', popupClassName)}
-				notFoundContent={<div className="empty-message">{noDataMessage}</div>}
-				onKeyDown={handleKeyDown}
-				tagRender={tagRender as any}
-				placement={placement}
-				listHeight={300}
-				searchValue={searchText}
-				maxTagTextLength={maxTagTextLength}
-				maxTagCount={isAllSelected ? undefined : maxTagCount}
-				{...rest}
-			/>
-		</div>
+			placeholder={placeholder}
+			mode="multiple"
+			showSearch
+			filterOption={false}
+			onSearch={handleSearch}
+			value={displayValue}
+			onChange={handleInternalChange}
+			onClear={(): void => handleInternalChange([])}
+			onDropdownVisibleChange={setIsOpen}
+			open={isOpen}
+			defaultActiveFirstOption={defaultActiveFirstOption}
+			popupMatchSelectWidth={dropdownMatchSelectWidth}
+			allowClear={allowClear}
+			getPopupContainer={getPopupContainer ?? popupContainer}
+			suffixIcon={<DownOutlined style={{ cursor: 'default' }} />}
+			dropdownRender={customDropdownRender}
+			menuItemSelectedIcon={null}
+			popupClassName={cx('custom-multiselect-dropdown-container', popupClassName)}
+			notFoundContent={<div className="empty-message">{noDataMessage}</div>}
+			onKeyDown={handleKeyDown}
+			tagRender={tagRender as any}
+			placement={placement}
+			listHeight={300}
+			searchValue={searchText}
+			maxTagTextLength={maxTagTextLength}
+			maxTagCount={isAllSelected ? 1 : maxTagCount}
+			{...rest}
+		/>
 	);
 };
 

frontend/src/components/NewSelect/CustomSelect.tsx

@@ -29,7 +29,6 @@ import { popupContainer } from 'utils/selectPopupContainer';
 import { CustomSelectProps, OptionData } from './types';
 import {
 	filterOptionsBySearch,
-	handleScrollToBottom,
 	prioritizeOrAddOptionForSingleSelect,
 	SPACEKEY,
 } from './utils';
@@ -58,29 +57,17 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 	errorMessage,
 	allowClear = false,
 	onRetry,
-	showIncompleteDataMessage = false,
 	...rest
 }) => {
 	// ===== State & Refs =====
 	const [isOpen, setIsOpen] = useState(false);
 	const [searchText, setSearchText] = useState('');
 	const [activeOptionIndex, setActiveOptionIndex] = useState<number>(-1);
-	const [isScrolledToBottom, setIsScrolledToBottom] = useState(false);
 
 	// Refs for element access and scroll behavior
 	const selectRef = useRef<BaseSelectRef>(null);
 	const dropdownRef = useRef<HTMLDivElement>(null);
 	const optionRefs = useRef<Record<number, HTMLDivElement | null>>({});
-	// Flag to track if dropdown just opened
-	const justOpenedRef = useRef<boolean>(false);
-
-	// Add a scroll handler for the dropdown
-	const handleDropdownScroll = useCallback(
-		(e: React.UIEvent<HTMLDivElement>): void => {
-			setIsScrolledToBottom(handleScrollToBottom(e));
-		},
-		[],
-	);
 
 	// ===== Option Filtering & Processing Utilities =====
 
@@ -143,33 +130,23 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 		(text: string, searchQuery: string): React.ReactNode => {
 			if (!searchQuery || !highlightSearch) return text;
 
-			try {
-				const parts = text.split(
-					new RegExp(
-						`(${searchQuery.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&')})`,
-						'gi',
-					),
-				);
-				return (
-					<>
-						{parts.map((part, i) => {
-							// Create a deterministic but unique key
-							const uniqueKey = `${text.substring(0, 3)}-${part.substring(0, 3)}-${i}`;
+			const parts = text.split(new RegExp(`(${searchQuery})`, 'gi'));
+			return (
+				<>
+					{parts.map((part, i) => {
+						// Create a deterministic but unique key
+						const uniqueKey = `${text.substring(0, 3)}-${part.substring(0, 3)}-${i}`;
 
-							return part.toLowerCase() === searchQuery.toLowerCase() ? (
-								<span key={uniqueKey} className="highlight-text">
-									{part}
-								</span>
-							) : (
-								part
-							);
-						})}
-					</>
-				);
-			} catch (error) {
-				console.error('Error in text highlighting:', error);
-				return text;
-			}
+						return part.toLowerCase() === searchQuery.toLowerCase() ? (
+							<span key={uniqueKey} className="highlight-text">
+								{part}
+							</span>
+						) : (
+							part
+						);
+					})}
+				</>
+			);
 		},
 		[highlightSearch],
 	);
@@ -269,14 +246,9 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 			const trimmedValue = value.trim();
 			setSearchText(trimmedValue);
 
-			// Reset active option index when search changes
-			if (isOpen) {
-				setActiveOptionIndex(0);
-			}
-
 			if (onSearch) onSearch(trimmedValue);
 		},
-		[onSearch, isOpen],
+		[onSearch],
 	);
 
 	/**
@@ -300,23 +272,14 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 					const flatList: OptionData[] = [];
 
 					// Process options
-					let processedOptions = isEmpty(value)
-						? filteredOptions
-						: prioritizeOrAddOptionForSingleSelect(filteredOptions, value);
-
-					if (!isEmpty(searchText)) {
-						processedOptions = filterOptionsBySearch(processedOptions, searchText);
-					}
-
 					const { sectionOptions, nonSectionOptions } = splitOptions(
-						processedOptions,
+						isEmpty(value)
+							? filteredOptions
+							: prioritizeOrAddOptionForSingleSelect(filteredOptions, value),
 					);
 
 					// Add custom option if needed
-					if (
-						!isEmpty(searchText) &&
-						!isLabelPresent(processedOptions, searchText)
-					) {
+					if (!isEmpty(searchText) && !isLabelPresent(filteredOptions, searchText)) {
 						flatList.push({
 							label: searchText,
 							value: searchText,
@@ -337,52 +300,33 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 
 				const options = getFlatOptions();
 
-				// If we just opened the dropdown and have options, set first option as active
-				if (justOpenedRef.current && options.length > 0) {
-					setActiveOptionIndex(0);
-					justOpenedRef.current = false;
-				}
-
-				// If no option is active but we have options, activate the first one
-				if (activeOptionIndex === -1 && options.length > 0) {
-					setActiveOptionIndex(0);
-				}
-
 				switch (e.key) {
 					case 'ArrowDown':
 						e.preventDefault();
-						if (options.length > 0) {
-							setActiveOptionIndex((prev) =>
-								prev < options.length - 1 ? prev + 1 : 0,
-							);
-						}
+						setActiveOptionIndex((prev) =>
+							prev < options.length - 1 ? prev + 1 : 0,
+						);
 						break;
 
 					case 'ArrowUp':
 						e.preventDefault();
-						if (options.length > 0) {
-							setActiveOptionIndex((prev) =>
-								prev > 0 ? prev - 1 : options.length - 1,
-							);
-						}
+						setActiveOptionIndex((prev) =>
+							prev > 0 ? prev - 1 : options.length - 1,
+						);
 						break;
 
 					case 'Tab':
 						// Tab navigation with Shift key support
 						if (e.shiftKey) {
 							e.preventDefault();
-							if (options.length > 0) {
-								setActiveOptionIndex((prev) =>
-									prev > 0 ? prev - 1 : options.length - 1,
-								);
-							}
+							setActiveOptionIndex((prev) =>
+								prev > 0 ? prev - 1 : options.length - 1,
+							);
 						} else {
 							e.preventDefault();
-							if (options.length > 0) {
-								setActiveOptionIndex((prev) =>
-									prev < options.length - 1 ? prev + 1 : 0,
-								);
-							}
+							setActiveOptionIndex((prev) =>
+								prev < options.length - 1 ? prev + 1 : 0,
+							);
 						}
 						break;
 
@@ -395,7 +339,6 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 								onChange(selectedOption.value, selectedOption);
 								setIsOpen(false);
 								setActiveOptionIndex(-1);
-								setSearchText('');
 							}
 						} else if (!isEmpty(searchText)) {
 							// Add custom value when no option is focused
@@ -408,7 +351,6 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 								onChange(customOption.value, customOption);
 								setIsOpen(false);
 								setActiveOptionIndex(-1);
-								setSearchText('');
 							}
 						}
 						break;
@@ -417,7 +359,6 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 						e.preventDefault();
 						setIsOpen(false);
 						setActiveOptionIndex(-1);
-						setSearchText('');
 						break;
 
 					case ' ': // Space key
@@ -428,7 +369,6 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 								onChange(selectedOption.value, selectedOption);
 								setIsOpen(false);
 								setActiveOptionIndex(-1);
-								setSearchText('');
 							}
 						}
 						break;
@@ -439,7 +379,7 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 				// Open dropdown when Down or Tab is pressed while closed
 				e.preventDefault();
 				setIsOpen(true);
-				justOpenedRef.current = true; // Set flag to initialize active option on next render
+				setActiveOptionIndex(0);
 			}
 		},
 		[
@@ -504,7 +444,6 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 				className="custom-select-dropdown"
 				onClick={handleDropdownClick}
 				onKeyDown={handleKeyDown}
-				onScroll={handleDropdownScroll}
 				role="listbox"
 				tabIndex={-1}
 				aria-activedescendant={
@@ -515,6 +454,7 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 				<div className="no-section-options">
 					{nonSectionOptions.length > 0 && mapOptions(nonSectionOptions)}
 				</div>
+
 				{/* Section options */}
 				{sectionOptions.length > 0 &&
 					sectionOptions.map((section) =>
@@ -532,16 +472,13 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 
 				{/* Navigation help footer */}
 				<div className="navigation-footer" role="note">
-					{!loading &&
-						!errorMessage &&
-						!noDataMessage &&
-						!(showIncompleteDataMessage && isScrolledToBottom) && (
-							<section className="navigate">
-								<ArrowDown size={8} className="icons" />
-								<ArrowUp size={8} className="icons" />
-								<span className="keyboard-text">to navigate</span>
-							</section>
-						)}
+					{!loading && !errorMessage && !noDataMessage && (
+						<section className="navigate">
+							<ArrowDown size={8} className="icons" />
+							<ArrowUp size={8} className="icons" />
+							<span className="keyboard-text">to navigate</span>
+						</section>
+					)}
 					{loading && (
 						<div className="navigation-loading">
 							<div className="navigation-icons">
@@ -567,19 +504,9 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 						</div>
 					)}
 
-					{showIncompleteDataMessage &&
-						isScrolledToBottom &&
-						!loading &&
-						!errorMessage && (
-							<div className="navigation-text-incomplete">
-								Use search for more options
-							</div>
-						)}
-
-					{noDataMessage &&
-						!loading &&
-						!(showIncompleteDataMessage && isScrolledToBottom) &&
-						!errorMessage && <div className="navigation-text">{noDataMessage}</div>}
+					{noDataMessage && !loading && (
+						<div className="navigation-text">{noDataMessage}</div>
+					)}
 				</div>
 			</div>
 		);
@@ -593,7 +520,6 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 		isLabelPresent,
 		handleDropdownClick,
 		handleKeyDown,
-		handleDropdownScroll,
 		activeOptionIndex,
 		loading,
 		errorMessage,
@@ -601,22 +527,8 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 		dropdownRender,
 		renderOptionWithIndex,
 		onRetry,
-		showIncompleteDataMessage,
-		isScrolledToBottom,
 	]);
 
-	// Handle dropdown visibility changes
-	const handleDropdownVisibleChange = useCallback((visible: boolean): void => {
-		setIsOpen(visible);
-		if (visible) {
-			justOpenedRef.current = true;
-			setActiveOptionIndex(0);
-		} else {
-			setSearchText('');
-			setActiveOptionIndex(-1);
-		}
-	}, []);
-
 	// ===== Side Effects =====
 
 	// Clear search text when dropdown closes
@@ -670,7 +582,7 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 			onSearch={handleSearch}
 			value={value}
 			onChange={onChange}
-			onDropdownVisibleChange={handleDropdownVisibleChange}
+			onDropdownVisibleChange={setIsOpen}
 			open={isOpen}
 			options={optionsWithHighlight}
 			defaultActiveFirstOption={defaultActiveFirstOption}

frontend/src/components/NewSelect/styles.scss

@@ -35,43 +35,6 @@ $custom-border-color: #2c3044;
 	width: 100%;
 	position: relative;
 
-	&.is-all-selected {
-		.ant-select-selection-search-input {
-			caret-color: transparent;
-		}
-
-		.ant-select-selection-placeholder {
-			opacity: 1 !important;
-			color: var(--bg-vanilla-400) !important;
-			font-weight: 500;
-			visibility: visible !important;
-			pointer-events: none;
-			z-index: 2;
-
-			.lightMode & {
-				color: rgba(0, 0, 0, 0.85) !important;
-			}
-		}
-
-		&.ant-select-focused .ant-select-selection-placeholder {
-			opacity: 0.45 !important;
-		}
-	}
-
-	.all-selected-text {
-		position: absolute;
-		left: 12px;
-		top: 50%;
-		transform: translateY(-50%);
-		color: var(--bg-vanilla-400);
-		z-index: 1;
-		pointer-events: none;
-
-		.lightMode & {
-			color: rgba(0, 0, 0, 0.85);
-		}
-	}
-
 	.ant-select-selector {
 		max-height: 200px;
 		overflow: auto;
@@ -195,7 +158,7 @@ $custom-border-color: #2c3044;
 // Custom dropdown styles for single select
 .custom-select-dropdown {
 	padding: 8px 0 0 0;
-	max-height: 300px;
+	max-height: 500px;
 	overflow-y: auto;
 	overflow-x: hidden;
 	scrollbar-width: thin;
@@ -313,10 +276,6 @@ $custom-border-color: #2c3044;
 		font-size: 12px;
 	}
 
-	.navigation-text-incomplete {
-		color: var(--bg-amber-600) !important;
-	}
-
 	.navigation-error {
 		.navigation-text,
 		.navigation-icons {
@@ -363,7 +322,7 @@ $custom-border-color: #2c3044;
 // Custom dropdown styles for multi-select
 .custom-multiselect-dropdown {
 	padding: 8px 0 0 0;
-	max-height: 350px;
+	max-height: 500px;
 	overflow-y: auto;
 	overflow-x: hidden;
 	scrollbar-width: thin;
@@ -697,10 +656,6 @@ $custom-border-color: #2c3044;
 			border: 1px solid #e8e8e8;
 			color: rgba(0, 0, 0, 0.85);
 
-			font-size: 12px !important;
-			height: 20px;
-			line-height: 18px;
-
 			.ant-select-selection-item-content {
 				color: rgba(0, 0, 0, 0.85);
 			}
@@ -881,38 +836,3 @@ $custom-border-color: #2c3044;
 		}
 	}
 }
-
-.custom-multiselect-wrapper {
-	position: relative;
-	width: 100%;
-
-	&.all-selected {
-		.all-text {
-			position: absolute;
-			left: 12px;
-			top: 50%;
-			transform: translateY(-50%);
-			color: var(--bg-vanilla-400);
-			font-weight: 500;
-			z-index: 2;
-			pointer-events: none;
-			transition: opacity 0.2s ease, visibility 0.2s ease;
-
-			.lightMode & {
-				color: rgba(0, 0, 0, 0.85);
-			}
-		}
-
-		&:focus-within .all-text {
-			opacity: 0.45;
-		}
-
-		.ant-select-selection-search-input {
-			caret-color: auto;
-		}
-
-		.ant-select-selection-placeholder {
-			display: none;
-		}
-	}
-}

frontend/src/components/NewSelect/types.ts

@@ -24,10 +24,9 @@ export interface CustomSelectProps extends Omit<SelectProps, 'options'> {
 	highlightSearch?: boolean;
 	placement?: 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight';
 	popupMatchSelectWidth?: boolean;
-	errorMessage?: string | null;
+	errorMessage?: string;
 	allowClear?: SelectProps['allowClear'];
 	onRetry?: () => void;
-	showIncompleteDataMessage?: boolean;
 }
 
 export interface CustomTagProps {
@@ -52,12 +51,10 @@ export interface CustomMultiSelectProps
 	getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;
 	dropdownRender?: (menu: React.ReactElement) => React.ReactElement;
 	highlightSearch?: boolean;
-	errorMessage?: string | null;
+	errorMessage?: string;
 	popupClassName?: string;
 	placement?: 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight';
 	maxTagCount?: number;
 	allowClear?: SelectProps['allowClear'];
 	onRetry?: () => void;
-	maxTagTextLength?: number;
-	showIncompleteDataMessage?: boolean;
 }

frontend/src/components/NewSelect/utils.ts

@@ -3,8 +3,6 @@ import { OptionData } from './types';
 
 export const SPACEKEY = ' ';
 
-export const ALL_SELECTED_VALUE = '__ALL__'; // Constant for the special value
-
 export const prioritizeOrAddOptionForSingleSelect = (
 	options: OptionData[],
 	value: string,
@@ -135,15 +133,3 @@ export const filterOptionsBySearch = (
 		})
 		.filter(Boolean) as OptionData[];
 };
-
-/**
- * Utility function to handle dropdown scroll and detect when scrolled to bottom
- * Returns true when scrolled to within 20px of the bottom
- */
-export const handleScrollToBottom = (
-	e: React.UIEvent<HTMLDivElement>,
-): boolean => {
-	const { scrollTop, scrollHeight, clientHeight } = e.currentTarget;
-	// Consider "scrolled to bottom" when within 20px of the bottom or at the bottom
-	return scrollHeight - scrollTop - clientHeight < 20;
-};

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

@@ -19,7 +19,7 @@ import { getOperatorValue } from 'container/QueryBuilder/filters/QueryBuilderSea
 import { useGetAggregateValues } from 'hooks/queryBuilder/useGetAggregateValues';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import useDebouncedFn from 'hooks/useDebouncedFunction';
-import { cloneDeep, isArray, isEmpty, isEqual, isFunction } from 'lodash-es';
+import { cloneDeep, isArray, isEqual, isFunction } from 'lodash-es';
 import { ChevronDown, ChevronRight } from 'lucide-react';
 import { useMemo, useState } from 'react';
 import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
@@ -82,7 +82,9 @@ export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
 	const attributeValues: string[] = useMemo(() => {
 		const dataType = filter.attributeKey.dataType || DataTypes.String;
 		const key = DATA_TYPE_VS_ATTRIBUTE_VALUES_KEY[dataType];
-		return (data?.payload?.[key] || []).filter((val) => !isEmpty(val));
+		return (data?.payload?.[key] || []).filter(
+			(val) => val !== undefined && val !== null,
+		);
 	}, [data?.payload, filter.attributeKey.dataType]);
 
 	const currentAttributeKeys = attributeValues.slice(0, visibleItemsCount);

frontend/src/components/QuickFilters/QuickFilters.styles.scss

@@ -1,7 +1,16 @@
+.quick-filters-container {
+	display: flex;
+	height: 100%;
+	.quick-filters-settings-container {
+		position: relative;
+	}
+}
+
 .quick-filters {
 	display: flex;
 	flex-direction: column;
 	height: 100%;
+	width: 100%;
 	border-right: 1px solid var(--bg-slate-400);
 	color: var(--bg-vanilla-100);
 
@@ -44,7 +53,7 @@
 				font-size: 14px;
 				font-style: normal;
 				font-weight: 400;
-				line-height: 18px; /* 128.571% */
+				line-height: 18px;
 				text-transform: uppercase;
 			}
 		}
@@ -52,7 +61,7 @@
 		.right-actions {
 			display: flex;
 			align-items: center;
-			gap: 12px;
+			gap: 10px;
 			width: 100%;
 			justify-content: flex-end;
 
@@ -63,10 +72,34 @@
 			}
 
 			.sync-icon {
-				background-color: var(--bg-ink-500);
 				border: 0;
 				box-shadow: none;
 			}
+
+			.right-action-icon-container {
+				position: relative;
+				display: flex;
+				padding: 2px;
+				background-color: var(--bg-ink-500);
+
+				.settings-icon {
+					height: 14px;
+					width: 14px;
+					cursor: pointer;
+				}
+
+				&.active,
+				&:hover {
+					background: var(--bg-slate-500);
+				}
+			}
+		}
+	}
+
+	.quick-filters-skeleton {
+		.ant-skeleton-input {
+			width: 236px;
+			margin: 8px 12px;
 		}
 	}
 }
@@ -90,8 +123,12 @@
 				}
 			}
 			.right-actions {
-				.sync-icon {
+				.right-action-icon-container {
 					background-color: var(--bg-vanilla-100);
+					&.active,
+					&:hover {
+						background-color: var(--bg-vanilla-200);
+					}
 				}
 			}
 		}

frontend/src/components/QuickFilters/QuickFilters.tsx

@@ -5,18 +5,43 @@ import {
 	SyncOutlined,
 	VerticalAlignTopOutlined,
 } from '@ant-design/icons';
-import { Tooltip, Typography } from 'antd';
-import TypicalOverlayScrollbar from 'components/TypicalOverlayScrollbar/TypicalOverlayScrollbar';
+import { Skeleton, Tooltip, Typography } from 'antd';
+import getLocalStorageKey from 'api/browser/localstorage/get';
+import setLocalStorageKey from 'api/browser/localstorage/set';
+import classNames from 'classnames';
+import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
+import { LOCALSTORAGE } from 'constants/localStorage';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
-import { cloneDeep, isFunction } from 'lodash-es';
+import { cloneDeep, isFunction, isNull } from 'lodash-es';
+import { Settings2 as SettingsIcon } from 'lucide-react';
+import { useMemo, useState } from 'react';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';
 
 import Checkbox from './FilterRenderers/Checkbox/Checkbox';
 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';
 
 export default function QuickFilters(props: IQuickFiltersProps): JSX.Element {
-	const { config, handleFilterVisibilityChange, source, onFilterChange } = props;
+	const {
+		className,
+		config,
+		handleFilterVisibilityChange,
+		source,
+		onFilterChange,
+		signal,
+	} = props;
+	const [isSettingsOpen, setIsSettingsOpen] = useState(false);
+
+	const {
+		filterConfig,
+		isDynamicFilters,
+		customFilters,
+		setIsStale,
+		isCustomFiltersLoading,
+	} = useFilterConfig({ signal, config });
 
 	const {
 		currentQuery,
@@ -24,6 +49,16 @@ export default function QuickFilters(props: IQuickFiltersProps): JSX.Element {
 		redirectWithQueryBuilderData,
 	} = useQueryBuilder();
 
+	const showAnnouncementTooltip = useMemo(() => {
+		const localStorageValue = getLocalStorageKey(
+			LOCALSTORAGE.QUICK_FILTERS_SETTINGS_ANNOUNCEMENT,
+		);
+		if (!isNull(localStorageValue)) {
+			return !(localStorageValue === 'false');
+		}
+		return true;
+	}, []);
+
 	// clear all the filters for the query which is in sync with filters
 	const handleReset = (): void => {
 		const updatedQuery = cloneDeep(
@@ -63,68 +98,141 @@ export default function QuickFilters(props: IQuickFiltersProps): JSX.Element {
 		currentQuery.builder.queryData?.[lastUsedQuery || 0]?.queryName;
 
 	return (
-		<div className="quick-filters">
-			{source !== QuickFiltersSource.INFRA_MONITORING &&
-				source !== QuickFiltersSource.API_MONITORING && (
-					<section className="header">
-						<section className="left-actions">
-							<FilterOutlined />
-							<Typography.Text className="text">
-								{lastQueryName ? 'Filters for' : 'Filters'}
-							</Typography.Text>
-							{lastQueryName && (
-								<Tooltip title={`Filter currently in sync with query ${lastQueryName}`}>
-									<Typography.Text className="sync-tag">{lastQueryName}</Typography.Text>
+		<div className="quick-filters-container">
+			<div className="quick-filters">
+				{source !== QuickFiltersSource.INFRA_MONITORING &&
+					source !== QuickFiltersSource.API_MONITORING && (
+						<section className="header">
+							<section className="left-actions">
+								<FilterOutlined />
+								<Typography.Text className="text">
+									{lastQueryName ? 'Filters for' : 'Filters'}
+								</Typography.Text>
+								{lastQueryName && (
+									<Tooltip
+										title={`Filter currently in sync with query ${lastQueryName}`}
+									>
+										<Typography.Text className="sync-tag">
+											{lastQueryName}
+										</Typography.Text>
+									</Tooltip>
+								)}
+							</section>
+
+							<section className="right-actions">
+								<Tooltip title="Reset All">
+									<div className="right-action-icon-container">
+										<SyncOutlined className="sync-icon" onClick={handleReset} />
+									</div>
 								</Tooltip>
-							)}
+								<Tooltip title="Collapse Filters">
+									<div className="right-action-icon-container">
+										<VerticalAlignTopOutlined
+											rotate={270}
+											onClick={handleFilterVisibilityChange}
+										/>
+									</div>
+								</Tooltip>
+								{isDynamicFilters && (
+									<Tooltip title="Settings">
+										<div
+											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>
+								)}
+							</section>
 						</section>
+					)}
 
-						<section className="right-actions">
-							<Tooltip title="Reset All">
-								<SyncOutlined className="sync-icon" onClick={handleReset} />
-							</Tooltip>
-							<div className="divider-filter" />
-							<Tooltip title="Collapse Filters">
-								<VerticalAlignTopOutlined
-									rotate={270}
-									onClick={handleFilterVisibilityChange}
-								/>
-							</Tooltip>
+				{isCustomFiltersLoading ? (
+					<div className="quick-filters-skeleton">
+						{Array.from({ length: 5 }).map((_, index) => (
+							<Skeleton.Input
+								active
+								size="small"
+								// eslint-disable-next-line react/no-array-index-key
+								key={index}
+							/>
+						))}
+					</div>
+				) : (
+					<OverlayScrollbar>
+						<section className="filters">
+							{filterConfig.map((filter) => {
+								switch (filter.type) {
+									case FiltersType.CHECKBOX:
+										return (
+											<Checkbox
+												source={source}
+												filter={filter}
+												onFilterChange={onFilterChange}
+											/>
+										);
+									case FiltersType.SLIDER:
+										return <Slider filter={filter} />;
+									// eslint-disable-next-line sonarjs/no-duplicated-branches
+									default:
+										return (
+											<Checkbox
+												source={source}
+												filter={filter}
+												onFilterChange={onFilterChange}
+											/>
+										);
+								}
+							})}
 						</section>
-					</section>
+					</OverlayScrollbar>
 				)}
-
-			<TypicalOverlayScrollbar>
-				<section className="filters">
-					{config.map((filter) => {
-						switch (filter.type) {
-							case FiltersType.CHECKBOX:
-								return (
-									<Checkbox
-										source={source}
-										filter={filter}
-										onFilterChange={onFilterChange}
-									/>
-								);
-							case FiltersType.SLIDER:
-								return <Slider filter={filter} />;
-							// eslint-disable-next-line sonarjs/no-duplicated-branches
-							default:
-								return (
-									<Checkbox
-										source={source}
-										filter={filter}
-										onFilterChange={onFilterChange}
-									/>
-								);
-						}
-					})}
-				</section>
-			</TypicalOverlayScrollbar>
+			</div>
+			<div className="quick-filters-settings-container">
+				<div
+					className={classNames(
+						'quick-filters-settings',
+						{
+							hidden: !isSettingsOpen,
+						},
+						className,
+					)}
+				>
+					{isSettingsOpen && (
+						<QuickFiltersSettings
+							signal={signal}
+							setIsSettingsOpen={setIsSettingsOpen}
+							customFilters={customFilters}
+							setIsStale={setIsStale}
+						/>
+					)}
+				</div>
+			</div>
 		</div>
 	);
 }
 
 QuickFilters.defaultProps = {
 	onFilterChange: null,
+	signal: '',
+	config: [],
 };

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

@@ -0,0 +1,147 @@
+/* eslint-disable react/jsx-props-no-spreading */
+import {
+	closestCenter,
+	DndContext,
+	DragEndEvent,
+	PointerSensor,
+	useSensor,
+	useSensors,
+} from '@dnd-kit/core';
+import {
+	arrayMove,
+	SortableContext,
+	useSortable,
+	verticalListSortingStrategy,
+} from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import { Button } from 'antd';
+import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
+import { GripVertical } from 'lucide-react';
+import { useMemo } from 'react';
+import { Filter as FilterType } from 'types/api/quickFilters/getCustomFilters';
+
+function SortableFilter({
+	filter,
+	onRemove,
+	allowDrag,
+	allowRemove,
+}: {
+	filter: FilterType;
+	onRemove: (filter: FilterType) => void;
+	allowDrag: boolean;
+	allowRemove: boolean;
+}): JSX.Element {
+	const {
+		attributes,
+		listeners,
+		setNodeRef,
+		transform,
+		transition,
+	} = useSortable({ id: filter.key });
+
+	const style = {
+		transform: CSS.Transform.toString(transform),
+		transition,
+	};
+
+	return (
+		<div
+			ref={setNodeRef}
+			style={style}
+			className={`qf-filter-item ${allowDrag ? 'drag-enabled' : 'drag-disabled'}`}
+		>
+			<div {...attributes} {...listeners} className="drag-handle">
+				{allowDrag && <GripVertical size={16} />}
+				{filter.key}
+			</div>
+			{allowRemove && (
+				<Button
+					className="remove-filter-btn periscope-btn"
+					size="small"
+					onClick={(): void => {
+						onRemove(filter as FilterType);
+					}}
+				>
+					Remove
+				</Button>
+			)}
+		</div>
+	);
+}
+
+function AddedFilters({
+	inputValue,
+	addedFilters,
+	setAddedFilters,
+}: {
+	inputValue: string;
+	addedFilters: FilterType[];
+	setAddedFilters: React.Dispatch<React.SetStateAction<FilterType[]>>;
+}): JSX.Element {
+	const sensors = useSensors(useSensor(PointerSensor));
+
+	const handleDragEnd = (event: DragEndEvent): void => {
+		const { active, over } = event;
+
+		if (over && active.id !== over.id) {
+			setAddedFilters((items) => {
+				const oldIndex = items.findIndex((item) => item.key === active.id);
+				const newIndex = items.findIndex((item) => item.key === over.id);
+
+				return arrayMove(items, oldIndex, newIndex);
+			});
+		}
+	};
+
+	const filteredAddedFilters = useMemo(
+		() =>
+			addedFilters.filter((filter) =>
+				filter.key.toLowerCase().includes(inputValue.toLowerCase()),
+			),
+		[addedFilters, inputValue],
+	);
+
+	const handleRemoveFilter = (filter: FilterType): void => {
+		setAddedFilters((prev) => prev.filter((f) => f.key !== filter.key));
+	};
+
+	const allowDrag = inputValue.length === 0;
+	const allowRemove = addedFilters.length > 1;
+
+	return (
+		<div className="qf-filters added-filters">
+			<div className="qf-filters-header">ADDED FILTERS</div>
+			<div className="qf-added-filters-list">
+				<OverlayScrollbar>
+					<DndContext
+						sensors={sensors}
+						collisionDetection={closestCenter}
+						onDragEnd={handleDragEnd}
+					>
+						{filteredAddedFilters.length === 0 ? (
+							<div className="no-values-found">No values found</div>
+						) : (
+							<SortableContext
+								items={addedFilters.map((f) => f.key)}
+								strategy={verticalListSortingStrategy}
+								disabled={!allowDrag}
+							>
+								{filteredAddedFilters.map((filter) => (
+									<SortableFilter
+										key={filter.key}
+										filter={filter}
+										onRemove={handleRemoveFilter}
+										allowDrag={allowDrag}
+										allowRemove={allowRemove}
+									/>
+								))}
+							</SortableContext>
+						)}
+					</DndContext>
+				</OverlayScrollbar>
+			</div>
+		</div>
+	);
+}
+
+export default AddedFilters;

frontend/src/components/QuickFilters/QuickFiltersSettings/AnnouncementTooltip/AnnouncementTooltip.styles.scss

@@ -0,0 +1,56 @@
+.announcement-tooltip {
+	&__dot {
+		position: absolute;
+		width: 8px;
+		height: 8px;
+		border-radius: 50%;
+		background-color: var(--bg-robin-500);
+		z-index: 1000;
+	}
+
+	&__title {
+		font-weight: 500;
+		font-size: 15px;
+	}
+
+	&__container {
+		position: absolute;
+		width: 320px;
+		background-color: var(--bg-robin-500);
+		color: var(--text-white);
+		border-radius: 8px;
+		padding: 16px;
+		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+		z-index: 1000;
+	}
+
+	&__header {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+	}
+
+	&__close-icon {
+		cursor: pointer;
+		color: var(--text-white);
+	}
+
+	&__message {
+		margin: 12px 0;
+		line-height: 20px;
+	}
+
+	&__footer {
+		display: flex;
+		justify-content: flex-end;
+	}
+
+	&__button {
+		background: var(--bg-vanilla-100);
+		color: var(--bg-robin-500);
+		border: none;
+		padding: 6px 12px;
+		border-radius: 4px;
+		cursor: pointer;
+	}
+}

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

@@ -0,0 +1,79 @@
+import './AnnouncementTooltip.styles.scss';
+
+import { Button, Typography } from 'antd';
+import classNames from 'classnames';
+import { X } from 'lucide-react';
+import { useState } from 'react';
+
+type AnnouncementTooltipProps = {
+	position: { top: number; left: number };
+	title: string;
+	message: string;
+	show?: boolean;
+	className?: string;
+	onClose?: () => void;
+};
+
+// TEMPORARY HACK FOR ANNOUNCEMENTS: To be removed once proper system in place.
+function AnnouncementTooltip({
+	position,
+	show,
+	title,
+	message,
+	className,
+	onClose,
+}: AnnouncementTooltipProps): JSX.Element | null {
+	const [visible, setVisible] = useState(show);
+
+	const closeTooltip = (): void => {
+		setVisible(false);
+		onClose?.();
+	};
+
+	return visible ? (
+		<>
+			{/* Dot */}
+			<div
+				className={classNames('announcement-tooltip__dot', className)}
+				style={{
+					top: position.top,
+					left: position.left,
+				}}
+			/>
+
+			{/* Tooltip box */}
+			<div
+				className={classNames('announcement-tooltip__container', className)}
+				style={{
+					top: position.top,
+					left: position.left + 30,
+				}}
+			>
+				<div className="announcement-tooltip__header">
+					<Typography.Text className="announcement-tooltip__title">
+						{title}
+					</Typography.Text>
+					<X
+						size={18}
+						onClick={closeTooltip}
+						className="announcement-tooltip__close-icon"
+					/>
+				</div>
+				<p className="announcement-tooltip__message">{message}</p>
+				<div className="announcement-tooltip__footer">
+					<Button onClick={closeTooltip} className="announcement-tooltip__button">
+						Okay
+					</Button>
+				</div>
+			</div>
+		</>
+	) : null;
+}
+
+AnnouncementTooltip.defaultProps = {
+	show: false,
+	className: '',
+	onClose: (): void => {},
+};
+
+export default AnnouncementTooltip;

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

@@ -0,0 +1,104 @@
+import { Button, Skeleton } from 'antd';
+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 { useGetAttributeSuggestions } from 'hooks/queryBuilder/useGetAttributeSuggestions';
+import { useMemo } from 'react';
+import { TagFilter } from 'types/api/queryBuilder/queryBuilderData';
+import { Filter as FilterType } from 'types/api/quickFilters/getCustomFilters';
+
+function OtherFiltersSkeleton(): JSX.Element {
+	return (
+		<>
+			{Array.from({ length: 5 }).map((_, index) => (
+				<Skeleton.Input
+					active
+					size="small"
+					// eslint-disable-next-line react/no-array-index-key
+					key={index}
+				/>
+			))}
+		</>
+	);
+}
+
+function OtherFilters({
+	signal,
+	inputValue,
+	addedFilters,
+	setAddedFilters,
+}: {
+	signal: SignalType | undefined;
+	inputValue: string;
+	addedFilters: FilterType[];
+	setAddedFilters: React.Dispatch<React.SetStateAction<FilterType[]>>;
+}): JSX.Element {
+	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,
+		},
+	);
+
+	const otherFilters = useMemo(
+		() =>
+			suggestionsData?.payload?.attributes?.filter(
+				(attr) => !addedFilters.some((filter) => filter.key === attr.key),
+			),
+		[suggestionsData, addedFilters],
+	);
+
+	const handleAddFilter = (filter: FilterType): void => {
+		setAddedFilters((prev) => [
+			...prev,
+			{
+				key: filter.key,
+				dataType: filter.dataType,
+				isColumn: filter.isColumn,
+				isJSON: filter.isJSON,
+				type: filter.type,
+			},
+		]);
+	};
+
+	const renderFilters = (): React.ReactNode => {
+		if (isFetchingSuggestions) return <OtherFiltersSkeleton />;
+		if (!otherFilters?.length)
+			return <div className="no-values-found">No values found</div>;
+
+		return otherFilters.map((filter) => (
+			<div key={filter.key} className="qf-filter-item other-filters-item">
+				<div className="qf-filter-key">{filter.key}</div>
+				<Button
+					className="add-filter-btn periscope-btn"
+					size="small"
+					onClick={(): void => handleAddFilter(filter as FilterType)}
+				>
+					Add
+				</Button>
+			</div>
+		));
+	};
+
+	return (
+		<div className="qf-filters other-filters">
+			<div className="qf-filters-header">OTHER FILTERS</div>
+			<div className="qf-other-filters-list">
+				<OverlayScrollbar>
+					<>{renderFilters()}</>
+				</OverlayScrollbar>
+			</div>
+		</div>
+	);
+}
+
+export default OtherFilters;

frontend/src/components/QuickFilters/QuickFiltersSettings/QuickFiltersSettings.styles.scss

@@ -0,0 +1,190 @@
+.quick-filters-settings {
+	display: flex;
+	flex-direction: column;
+	position: absolute;
+	z-index: 999;
+	width: 342px;
+	background: var(--bg-slate-500);
+	transition: width 0.05s ease-in-out;
+	overflow: hidden;
+
+	&.qf-logs-explorer {
+		height: calc(100vh - 45px);
+	}
+
+	&.qf-exceptions {
+		height: 100vh;
+	}
+
+	&.hidden {
+		width: 0;
+	}
+	.qf-header {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: 10.5px;
+
+		.qf-title {
+			display: flex;
+			align-items: center;
+			gap: 12px;
+		}
+
+		.qf-header-icon {
+			width: 16px;
+			height: 16px;
+			cursor: pointer;
+		}
+	}
+
+	.qf-filters {
+		&.added-filters {
+			max-height: 40%;
+		}
+		&.other-filters {
+			flex: 1;
+			display: flex;
+			flex-direction: column;
+			min-height: 0;
+		}
+	}
+
+	.search {
+		.ant-input {
+			background-color: var(--bg-slate-500);
+			height: 46px;
+			border-radius: 0;
+		}
+	}
+
+	.qf-other-filters-list {
+		.ant-skeleton-input {
+			width: 300px;
+			margin: 8px 12px;
+		}
+	}
+
+	.qf-footer {
+		display: flex;
+		gap: 12px;
+		padding: 12px;
+		border-top: 1px solid var(--bg-slate-400);
+		button {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			width: 50%;
+
+			.ant-btn-icon {
+				margin: 3px !important;
+			}
+		}
+	}
+}
+
+//ADDED FILTERS AND OTHER FILTERS COMMON STYLES
+.qf-filters {
+	display: flex;
+	flex-direction: column;
+	.qf-filters-header {
+		color: var(--bg-slate-50);
+		font-family: Inter;
+		font-size: 11px;
+		font-style: normal;
+		font-weight: 500;
+		line-height: 18px;
+		letter-spacing: 0.88px;
+		text-transform: uppercase;
+		padding: 8px 12px;
+	}
+}
+
+.no-values-found {
+	padding: 8px;
+	text-align: center;
+}
+
+.qf-added-filters-list {
+	margin-bottom: 12px;
+	overflow: hidden;
+}
+
+.qf-other-filters-list {
+	margin-bottom: 12px;
+	overflow: hidden;
+}
+
+.qf-filter-item {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding: 8px;
+	border-radius: 4px;
+	user-select: none;
+	transition: background-color 0.2s ease-in-out;
+
+	.drag-handle {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+		flex-grow: 1;
+	}
+
+	.qf-filter-content {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+	}
+
+	&.other-filters-item {
+		padding: 8px 12px;
+		height: 32px;
+	}
+
+	&.drag-enabled {
+		cursor: grab;
+		&:active {
+			cursor: grabbing;
+		}
+	}
+
+	&.drag-disabled {
+		padding: 8px 12px;
+	}
+
+	.remove-filter-btn,
+	.add-filter-btn {
+		padding: 6px 12px;
+		opacity: 0;
+		transition: opacity 0.2s ease-in-out;
+	}
+
+	&:hover {
+		background-color: var(--bg-slate-400);
+		.remove-filter-btn,
+		.add-filter-btn {
+			opacity: 1;
+		}
+	}
+}
+
+.lightMode {
+	.quick-filters-settings {
+		background: var(--bg-vanilla-100);
+		.search {
+			.ant-input {
+				background-color: var(--bg-vanilla-100);
+			}
+		}
+		.qf-footer {
+			border-top: 1px solid var(--bg-vanilla-300);
+		}
+	}
+
+	.qf-filter-item {
+		&:hover {
+			background-color: var(--bg-vanilla-200);
+		}
+	}
+}

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

@@ -0,0 +1,109 @@
+import './QuickFiltersSettings.styles.scss';
+
+import { Button, Input } from 'antd';
+import { CheckIcon, TableColumnsSplit, XIcon } from 'lucide-react';
+import { useMemo } from 'react';
+import { Filter as FilterType } from 'types/api/quickFilters/getCustomFilters';
+
+import { SignalType } from '../types';
+import AddedFilters from './AddedFilters';
+import useQuickFilterSettings from './hooks/useQuickFilterSettings';
+import OtherFilters from './OtherFilters';
+
+function QuickFiltersSettings({
+	signal,
+	setIsSettingsOpen,
+	customFilters,
+	setIsStale,
+}: {
+	signal: SignalType | undefined;
+	setIsSettingsOpen: (isSettingsOpen: boolean) => void;
+	customFilters: FilterType[];
+	setIsStale: (isStale: boolean) => void;
+}): JSX.Element {
+	const {
+		handleSettingsClose,
+		handleDiscardChanges,
+		addedFilters,
+		setAddedFilters,
+		handleSaveChanges,
+		isUpdatingCustomFilters,
+		inputValue,
+		handleInputChange,
+		debouncedInputValue,
+	} = useQuickFilterSettings({
+		setIsSettingsOpen,
+		customFilters,
+		setIsStale,
+		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">
+				<div className="qf-title">
+					<TableColumnsSplit width={16} height={16} />
+					Edit quick filters
+				</div>
+				<XIcon
+					className="qf-header-icon"
+					width={16}
+					height={16}
+					onClick={handleSettingsClose}
+				/>
+			</div>
+			<section className="search">
+				<Input
+					type="text"
+					value={inputValue}
+					placeholder="Search for a filter..."
+					onChange={handleInputChange}
+				/>
+			</section>
+			<AddedFilters
+				inputValue={inputValue}
+				addedFilters={addedFilters}
+				setAddedFilters={setAddedFilters}
+			/>
+			<OtherFilters
+				signal={signal}
+				inputValue={debouncedInputValue}
+				addedFilters={addedFilters}
+				setAddedFilters={setAddedFilters}
+			/>
+			{hasUnsavedChanges && (
+				<div className="qf-footer">
+					<Button
+						type="default"
+						onClick={handleDiscardChanges}
+						icon={<XIcon width={16} height={16} />}
+					>
+						Discard
+					</Button>
+					<Button
+						type="primary"
+						onClick={handleSaveChanges}
+						icon={<CheckIcon width={16} height={16} />}
+						loading={isUpdatingCustomFilters}
+					>
+						Save changes
+					</Button>
+				</div>
+			)}
+		</>
+	);
+}
+
+export default QuickFiltersSettings;

frontend/src/components/QuickFilters/QuickFiltersSettings/constants.ts

@@ -0,0 +1,9 @@
+import { SignalType } from 'components/QuickFilters/types';
+import { DataSource } from 'types/common/queryBuilder';
+
+export const SIGNAL_DATA_SOURCE_MAP = {
+	[SignalType.LOGS]: DataSource.LOGS,
+	[SignalType.TRACES]: DataSource.TRACES,
+	[SignalType.EXCEPTIONS]: DataSource.TRACES,
+	[SignalType.API_MONITORING]: DataSource.TRACES,
+};

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

@@ -0,0 +1,111 @@
+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 useDebouncedFn from 'hooks/useDebouncedFunction';
+import { useNotifications } from 'hooks/useNotifications';
+import { useCallback, useState } from 'react';
+import { useMutation } from 'react-query';
+import { Filter as FilterType } from 'types/api/quickFilters/getCustomFilters';
+
+interface UseQuickFilterSettingsProps {
+	setIsSettingsOpen: (isSettingsOpen: boolean) => void;
+	customFilters: FilterType[];
+	setIsStale: (isStale: boolean) => void;
+	signal?: SignalType;
+}
+
+interface UseQuickFilterSettingsReturn {
+	addedFilters: FilterType[];
+	setAddedFilters: React.Dispatch<React.SetStateAction<FilterType[]>>;
+	handleSettingsClose: () => void;
+	handleDiscardChanges: () => void;
+	handleSaveChanges: () => void;
+	isUpdatingCustomFilters: boolean;
+	inputValue: string;
+	setInputValue: React.Dispatch<React.SetStateAction<string>>;
+	debouncedInputValue: string;
+	handleInputChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+}
+
+const useQuickFilterSettings = ({
+	customFilters,
+	setIsSettingsOpen,
+	setIsStale,
+	signal,
+}: UseQuickFilterSettingsProps): UseQuickFilterSettingsReturn => {
+	const [inputValue, setInputValue] = useState<string>('');
+	const [debouncedInputValue, setDebouncedInputValue] = useState<string>('');
+	const [addedFilters, setAddedFilters] = useState<FilterType[]>(customFilters);
+	const { notifications } = useNotifications();
+
+	const {
+		mutate: updateCustomFilters,
+		isLoading: isUpdatingCustomFilters,
+	} = useMutation(updateCustomFiltersAPI, {
+		onSuccess: () => {
+			setIsSettingsOpen(false);
+			setIsStale(true);
+			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) => {
+		setDebouncedInputValue(value as string);
+	}, 400);
+
+	const handleInputChange = useCallback(
+		(e: React.ChangeEvent<HTMLInputElement>): void => {
+			const value = e.target.value.trim().toLowerCase();
+			setInputValue(value);
+			debouncedUpdate(value);
+		},
+		[debouncedUpdate],
+	);
+
+	const handleSettingsClose = useCallback((): void => {
+		setIsSettingsOpen(false);
+	}, [setIsSettingsOpen]);
+
+	const handleDiscardChanges = useCallback((): void => {
+		setAddedFilters(customFilters);
+	}, [customFilters, setAddedFilters]);
+
+	const handleSaveChanges = useCallback((): void => {
+		if (signal) {
+			updateCustomFilters({
+				data: {
+					filters: addedFilters.map((filter) => ({
+						key: filter.key,
+						datatype: filter.dataType,
+						type: filter.type,
+					})),
+					signal,
+				},
+			});
+		}
+	}, [addedFilters, signal, updateCustomFilters]);
+
+	return {
+		handleSettingsClose,
+		handleDiscardChanges,
+		addedFilters,
+		setAddedFilters,
+		handleSaveChanges,
+		isUpdatingCustomFilters,
+		inputValue,
+		setInputValue,
+		debouncedInputValue,
+		handleInputChange,
+	};
+};
+
+export default useQuickFilterSettings;

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

@@ -0,0 +1,67 @@
+import getCustomFilters from 'api/quickFilters/getCustomFilters';
+import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
+import { useMemo, useState } from 'react';
+import { useQuery } from 'react-query';
+import { ErrorResponse, SuccessResponse } from 'types/api';
+import {
+	Filter as FilterType,
+	PayloadProps,
+} from 'types/api/quickFilters/getCustomFilters';
+
+import { IQuickFiltersConfig, SignalType } from '../types';
+import { getFilterConfig } from '../utils';
+
+interface UseFilterConfigProps {
+	signal?: SignalType;
+	config: IQuickFiltersConfig[];
+}
+interface UseFilterConfigReturn {
+	filterConfig: IQuickFiltersConfig[];
+	customFilters: FilterType[];
+	setCustomFilters: React.Dispatch<React.SetStateAction<FilterType[]>>;
+	isCustomFiltersLoading: boolean;
+	isDynamicFilters: boolean;
+	setIsStale: React.Dispatch<React.SetStateAction<boolean>>;
+}
+
+const useFilterConfig = ({
+	signal,
+	config,
+}: UseFilterConfigProps): UseFilterConfigReturn => {
+	const [customFilters, setCustomFilters] = useState<FilterType[]>([]);
+	const [isStale, setIsStale] = useState(true);
+	const isDynamicFilters = useMemo(() => customFilters.length > 0, [
+		customFilters,
+	]);
+	const { isLoading: isCustomFiltersLoading } = useQuery<
+		SuccessResponse<PayloadProps> | ErrorResponse,
+		Error
+	>(
+		[REACT_QUERY_KEY.GET_CUSTOM_FILTERS, signal],
+		() => getCustomFilters({ signal: signal || '' }),
+		{
+			onSuccess: (data) => {
+				if ('payload' in data && data.payload?.filters) {
+					setCustomFilters(data.payload.filters || ([] as FilterType[]));
+				}
+				setIsStale(false);
+			},
+			enabled: !!signal && isStale,
+		},
+	);
+	const filterConfig = useMemo(() => getFilterConfig(customFilters, config), [
+		config,
+		customFilters,
+	]);
+
+	return {
+		filterConfig,
+		customFilters,
+		setCustomFilters,
+		isCustomFiltersLoading,
+		isDynamicFilters,
+		setIsStale,
+	};
+};
+
+export default useFilterConfig;

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

@@ -1,111 +1,288 @@
 import '@testing-library/jest-dom';
 
-import { fireEvent, render, screen } from '@testing-library/react';
-import { useGetAggregateValues } from 'hooks/queryBuilder/useGetAggregateValues';
+import {
+	cleanup,
+	fireEvent,
+	render,
+	screen,
+	waitFor,
+} from '@testing-library/react';
+import { ENVIRONMENT } from 'constants/env';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
+import {
+	otherFiltersResponse,
+	quickFiltersAttributeValuesResponse,
+	quickFiltersListResponse,
+} from 'mocks-server/__mockdata__/customQuickFilters';
+import { server } from 'mocks-server/server';
+import { rest } from 'msw';
 import MockQueryClientProvider from 'providers/test/MockQueryClientProvider';
 
 import QuickFilters from '../QuickFilters';
-import { QuickFiltersSource } from '../types';
+import { IQuickFiltersConfig, QuickFiltersSource, SignalType } from '../types';
 import { QuickFiltersConfig } from './constants';
 
-// Mock the useQueryBuilder hook
 jest.mock('hooks/queryBuilder/useQueryBuilder', () => ({
 	useQueryBuilder: jest.fn(),
 }));
-// Mock the useGetAggregateValues hook
-jest.mock('hooks/queryBuilder/useGetAggregateValues', () => ({
-	useGetAggregateValues: jest.fn(),
-}));
 
 const handleFilterVisibilityChange = jest.fn();
 const redirectWithQueryBuilderData = jest.fn();
+const putHandler = jest.fn();
 
-function TestQuickFilters(): JSX.Element {
+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 quickFiltersAttributeValuesURL = `${BASE_URL}/api/v3/autocomplete/attribute_values`;
+
+const FILTER_OS_DESCRIPTION = 'os.description';
+const FILTER_K8S_DEPLOYMENT_NAME = 'k8s.deployment.name';
+const ADDED_FILTERS_LABEL = /ADDED FILTERS/i;
+const OTHER_FILTERS_LABEL = /OTHER FILTERS/i;
+const SAVE_CHANGES_TEXT = 'Save changes';
+const DISCARD_TEXT = 'Discard';
+const FILTER_SERVICE_NAME = 'Service Name';
+const SETTINGS_ICON_TEST_ID = 'settings-icon';
+const QUERY_NAME = 'Test Query';
+
+const setupServer = (): void => {
+	server.use(
+		rest.get(quickFiltersListURL, (_, res, ctx) =>
+			res(ctx.status(200), ctx.json(quickFiltersListResponse)),
+		),
+		rest.get(quickFiltersSuggestionsURL, (_, res, ctx) =>
+			res(ctx.status(200), ctx.json(otherFiltersResponse)),
+		),
+		rest.put(saveQuickFiltersURL, async (req, res, ctx) => {
+			putHandler(await req.json());
+			return res(ctx.status(200), ctx.json({}));
+		}),
+		rest.get(quickFiltersAttributeValuesURL, (_, res, ctx) =>
+			res(ctx.status(200), ctx.json(quickFiltersAttributeValuesResponse)),
+		),
+	);
+};
+
+function TestQuickFilters({
+	signal = SignalType.LOGS,
+	config = QuickFiltersConfig,
+}: {
+	signal?: SignalType;
+	config?: IQuickFiltersConfig[];
+}): JSX.Element {
 	return (
 		<MockQueryClientProvider>
 			<QuickFilters
 				source={QuickFiltersSource.EXCEPTIONS}
-				config={QuickFiltersConfig}
+				config={config}
 				handleFilterVisibilityChange={handleFilterVisibilityChange}
+				signal={signal}
 			/>
 		</MockQueryClientProvider>
 	);
 }
 
-describe('Quick Filters', () => {
-	beforeEach(() => {
-		// Provide a mock implementation for useQueryBuilder
-		(useQueryBuilder as jest.Mock).mockReturnValue({
-			currentQuery: {
-				builder: {
-					queryData: [
-						{
-							queryName: 'Test Query',
-							filters: { items: [{ key: 'test', value: 'value' }] },
-						},
-					],
-				},
+TestQuickFilters.defaultProps = {
+	signal: '',
+	config: QuickFiltersConfig,
+};
+
+beforeAll(() => {
+	server.listen();
+});
+
+afterEach(() => {
+	server.resetHandlers();
+});
+
+afterAll(() => {
+	server.close();
+	cleanup();
+});
+
+beforeEach(() => {
+	(useQueryBuilder as jest.Mock).mockReturnValue({
+		currentQuery: {
+			builder: {
+				queryData: [
+					{
+						queryName: QUERY_NAME,
+						filters: { items: [{ key: 'test', value: 'value' }] },
+					},
+				],
 			},
-			lastUsedQuery: 0,
-			redirectWithQueryBuilderData,
-		});
-
-		// Provide a mock implementation for useGetAggregateValues
-		(useGetAggregateValues as jest.Mock).mockReturnValue({
-			data: {
-				statusCode: 200,
-				error: null,
-				message: 'success',
-				payload: {
-					stringAttributeValues: [
-						'mq-kafka',
-						'otel-demo',
-						'otlp-python',
-						'sample-flask',
-					],
-					numberAttributeValues: null,
-					boolAttributeValues: null,
-				},
-			}, // Mocked API response
-			isLoading: false,
-		});
-	});
-
-	it('renders correctly with default props', () => {
-		const { container } = render(<TestQuickFilters />);
-		expect(container).toMatchSnapshot();
+		},
+		lastUsedQuery: 0,
+		redirectWithQueryBuilderData,
 	});
+	setupServer();
+});
 
+describe('Quick Filters', () => {
 	it('displays the correct query name in the header', () => {
 		render(<TestQuickFilters />);
 		expect(screen.getByText('Filters for')).toBeInTheDocument();
-		expect(screen.getByText('Test Query')).toBeInTheDocument();
+		expect(screen.getByText(QUERY_NAME)).toBeInTheDocument();
 	});
 
-	it('should add filter data to query when checkbox is clicked', () => {
+	it('should add filter data to query when checkbox is clicked', async () => {
 		render(<TestQuickFilters />);
 		const checkbox = screen.getByText('mq-kafka');
 		fireEvent.click(checkbox);
-		expect(redirectWithQueryBuilderData).toHaveBeenCalledWith(
-			expect.objectContaining({
-				builder: {
-					queryData: expect.arrayContaining([
-						expect.objectContaining({
-							filters: expect.objectContaining({
-								items: expect.arrayContaining([
-									expect.objectContaining({
-										key: expect.objectContaining({
-											key: 'deployment.environment',
+
+		await waitFor(() => {
+			expect(redirectWithQueryBuilderData).toHaveBeenCalledWith(
+				expect.objectContaining({
+					builder: {
+						queryData: expect.arrayContaining([
+							expect.objectContaining({
+								filters: expect.objectContaining({
+									items: expect.arrayContaining([
+										expect.objectContaining({
+											key: expect.objectContaining({
+												key: 'deployment.environment',
+											}),
+											value: 'mq-kafka',
 										}),
-										value: 'mq-kafka',
-									}),
-								]),
+									]),
+								}),
 							}),
-						}),
-					]),
-				},
-			}),
-		); // sets composite query param
+						]),
+					},
+				}),
+			);
+		});
+	});
+});
+
+describe('Quick Filters with custom filters', () => {
+	it('loads the custom filters correctly', async () => {
+		render(<TestQuickFilters signal={SIGNAL} />);
+		expect(screen.getByText('Filters for')).toBeInTheDocument();
+		expect(screen.getByText(QUERY_NAME)).toBeInTheDocument();
+		await screen.findByText(FILTER_SERVICE_NAME);
+		await screen.findByText('otel-demo');
+
+		const icon = await screen.findByTestId(SETTINGS_ICON_TEST_ID);
+		fireEvent.click(icon);
+
+		expect(await screen.findByText('Edit quick filters')).toBeInTheDocument();
+
+		const addedSection = screen.getByText(ADDED_FILTERS_LABEL).parentElement!;
+		expect(addedSection).toContainElement(
+			await screen.findByText(FILTER_OS_DESCRIPTION),
+		);
+
+		const otherSection = screen.getByText(OTHER_FILTERS_LABEL).parentElement!;
+		expect(otherSection).toContainElement(
+			await screen.findByText(FILTER_K8S_DEPLOYMENT_NAME),
+		);
+	});
+
+	it('adds a filter from OTHER FILTERS to ADDED FILTERS when clicked', async () => {
+		render(<TestQuickFilters signal={SIGNAL} />);
+		await screen.findByText(FILTER_SERVICE_NAME);
+
+		const icon = await screen.findByTestId(SETTINGS_ICON_TEST_ID);
+		fireEvent.click(icon);
+
+		const otherFilterItem = await screen.findByText(FILTER_K8S_DEPLOYMENT_NAME);
+		const addButton = otherFilterItem.parentElement?.querySelector('button');
+		expect(addButton).not.toBeNull();
+		fireEvent.click(addButton as HTMLButtonElement);
+
+		const addedSection = screen.getByText(ADDED_FILTERS_LABEL).parentElement!;
+		await waitFor(() => {
+			expect(addedSection).toHaveTextContent(FILTER_K8S_DEPLOYMENT_NAME);
+		});
+	});
+
+	it('removes a filter from ADDED FILTERS and moves it to OTHER FILTERS', async () => {
+		render(<TestQuickFilters signal={SIGNAL} />);
+		await screen.findByText(FILTER_SERVICE_NAME);
+
+		const icon = await screen.findByTestId(SETTINGS_ICON_TEST_ID);
+		fireEvent.click(icon);
+
+		const addedSection = screen.getByText(ADDED_FILTERS_LABEL).parentElement!;
+		const target = await screen.findByText(FILTER_OS_DESCRIPTION);
+		const removeBtn = target.parentElement?.querySelector('button');
+		expect(removeBtn).not.toBeNull();
+		fireEvent.click(removeBtn as HTMLButtonElement);
+
+		await waitFor(() => {
+			expect(addedSection).not.toContainElement(
+				screen.getByText(FILTER_OS_DESCRIPTION),
+			);
+		});
+
+		const otherSection = screen.getByText(OTHER_FILTERS_LABEL).parentElement!;
+		expect(otherSection).toContainElement(
+			screen.getByText(FILTER_OS_DESCRIPTION),
+		);
+	});
+
+	it('restores original filter state on Discard', async () => {
+		render(<TestQuickFilters signal={SIGNAL} />);
+		await screen.findByText(FILTER_SERVICE_NAME);
+
+		const icon = await screen.findByTestId(SETTINGS_ICON_TEST_ID);
+		fireEvent.click(icon);
+
+		const addedSection = screen.getByText(ADDED_FILTERS_LABEL).parentElement!;
+		const target = await screen.findByText(FILTER_OS_DESCRIPTION);
+		const removeBtn = target.parentElement?.querySelector('button');
+		expect(removeBtn).not.toBeNull();
+		fireEvent.click(removeBtn as HTMLButtonElement);
+
+		const otherSection = screen.getByText(OTHER_FILTERS_LABEL).parentElement!;
+		await waitFor(() => {
+			expect(addedSection).not.toContainElement(
+				screen.getByText(FILTER_OS_DESCRIPTION),
+			);
+			expect(otherSection).toContainElement(
+				screen.getByText(FILTER_OS_DESCRIPTION),
+			);
+		});
+
+		fireEvent.click(screen.getByText(DISCARD_TEXT));
+
+		await waitFor(() => {
+			expect(addedSection).toContainElement(
+				screen.getByText(FILTER_OS_DESCRIPTION),
+			);
+			expect(otherSection).not.toContainElement(
+				screen.getByText(FILTER_OS_DESCRIPTION),
+			);
+		});
+	});
+
+	it('saves the updated filters by calling PUT with correct payload', async () => {
+		render(<TestQuickFilters signal={SIGNAL} />);
+		await screen.findByText(FILTER_SERVICE_NAME);
+
+		const icon = await screen.findByTestId(SETTINGS_ICON_TEST_ID);
+		fireEvent.click(icon);
+
+		const target = await screen.findByText(FILTER_OS_DESCRIPTION);
+		const removeBtn = target.parentElement?.querySelector('button');
+		expect(removeBtn).not.toBeNull();
+		fireEvent.click(removeBtn as HTMLButtonElement);
+
+		fireEvent.click(screen.getByText(SAVE_CHANGES_TEXT));
+
+		await waitFor(() => {
+			expect(putHandler).toHaveBeenCalled();
+		});
+
+		const requestBody = putHandler.mock.calls[0][0];
+		expect(requestBody.filters).toEqual(
+			expect.arrayContaining([
+				expect.not.objectContaining({ key: FILTER_OS_DESCRIPTION }),
+			]),
+		);
+		expect(requestBody.signal).toBe(SIGNAL);
 	});
 });

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

@@ -1,384 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Quick Filters renders correctly with default props 1`] = `
-<div>
-  <div
-    class="quick-filters"
-  >
-    <section
-      class="header"
-    >
-      <section
-        class="left-actions"
-      >
-        <span
-          aria-label="filter"
-          class="anticon anticon-filter"
-          role="img"
-        >
-          <svg
-            aria-hidden="true"
-            data-icon="filter"
-            fill="currentColor"
-            focusable="false"
-            height="1em"
-            viewBox="64 64 896 896"
-            width="1em"
-          >
-            <path
-              d="M880.1 154H143.9c-24.5 0-39.8 26.7-27.5 48L349 597.4V838c0 17.7 14.2 32 31.8 32h262.4c17.6 0 31.8-14.3 31.8-32V597.4L907.7 202c12.2-21.3-3.1-48-27.6-48zM603.4 798H420.6V642h182.9v156zm9.6-236.6l-9.5 16.6h-183l-9.5-16.6L212.7 226h598.6L613 561.4z"
-            />
-          </svg>
-        </span>
-        <span
-          class="ant-typography text css-dev-only-do-not-override-2i2tap"
-        >
-          Filters for
-        </span>
-        <span
-          class="ant-typography sync-tag css-dev-only-do-not-override-2i2tap"
-        >
-          Test Query
-        </span>
-      </section>
-      <section
-        class="right-actions"
-      >
-        <span
-          aria-label="sync"
-          class="anticon anticon-sync sync-icon"
-          role="img"
-          tabindex="-1"
-        >
-          <svg
-            aria-hidden="true"
-            data-icon="sync"
-            fill="currentColor"
-            focusable="false"
-            height="1em"
-            viewBox="64 64 896 896"
-            width="1em"
-          >
-            <path
-              d="M168 504.2c1-43.7 10-86.1 26.9-126 17.3-41 42.1-77.7 73.7-109.4S337 212.3 378 195c42.4-17.9 87.4-27 133.9-27s91.5 9.1 133.8 27A341.5 341.5 0 01755 268.8c9.9 9.9 19.2 20.4 27.8 31.4l-60.2 47a8 8 0 003 14.1l175.7 43c5 1.2 9.9-2.6 9.9-7.7l.8-180.9c0-6.7-7.7-10.5-12.9-6.3l-56.4 44.1C765.8 155.1 646.2 92 511.8 92 282.7 92 96.3 275.6 92 503.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8zm756 7.8h-60c-4.4 0-7.9 3.5-8 7.8-1 43.7-10 86.1-26.9 126-17.3 41-42.1 77.8-73.7 109.4A342.45 342.45 0 01512.1 856a342.24 342.24 0 01-243.2-100.8c-9.9-9.9-19.2-20.4-27.8-31.4l60.2-47a8 8 0 00-3-14.1l-175.7-43c-5-1.2-9.9 2.6-9.9 7.7l-.7 181c0 6.7 7.7 10.5 12.9 6.3l56.4-44.1C258.2 868.9 377.8 932 512.2 932c229.2 0 415.5-183.7 419.8-411.8a8 8 0 00-8-8.2z"
-            />
-          </svg>
-        </span>
-        <div
-          class="divider-filter"
-        />
-        <span
-          aria-label="vertical-align-top"
-          class="anticon anticon-vertical-align-top"
-          role="img"
-          tabindex="-1"
-        >
-          <svg
-            aria-hidden="true"
-            data-icon="vertical-align-top"
-            fill="currentColor"
-            focusable="false"
-            height="1em"
-            style="transform: rotate(270deg);"
-            viewBox="64 64 896 896"
-            width="1em"
-          >
-            <path
-              d="M859.9 168H164.1c-4.5 0-8.1 3.6-8.1 8v60c0 4.4 3.6 8 8.1 8h695.8c4.5 0 8.1-3.6 8.1-8v-60c0-4.4-3.6-8-8.1-8zM518.3 355a8 8 0 00-12.6 0l-112 141.7a7.98 7.98 0 006.3 12.9h73.9V848c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V509.7H624c6.7 0 10.4-7.7 6.3-12.9L518.3 355z"
-            />
-          </svg>
-        </span>
-      </section>
-    </section>
-    <div
-      class="overlay-scrollbar"
-      data-overlayscrollbars-initialize="true"
-    >
-      <div
-        data-overlayscrollbars-contents=""
-      >
-        <section
-          class="filters"
-        >
-          <div
-            class="checkbox-filter"
-          >
-            <section
-              class="filter-header-checkbox"
-            >
-              <section
-                class="left-action"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="lucide lucide-chevron-down"
-                  cursor="pointer"
-                  fill="none"
-                  height="13"
-                  stroke="currentColor"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="2"
-                  viewBox="0 0 24 24"
-                  width="13"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="m6 9 6 6 6-6"
-                  />
-                </svg>
-                <span
-                  class="ant-typography title css-dev-only-do-not-override-2i2tap"
-                >
-                  Environment
-                </span>
-              </section>
-              <section
-                class="right-action"
-              >
-                <span
-                  class="ant-typography clear-all css-dev-only-do-not-override-2i2tap"
-                >
-                  Clear All
-                </span>
-              </section>
-            </section>
-            <section
-              class="search"
-            >
-              <input
-                class="ant-input css-dev-only-do-not-override-2i2tap"
-                placeholder="Filter values"
-                type="text"
-                value=""
-              />
-            </section>
-            <section
-              class="values"
-            >
-              <div
-                class="value"
-              >
-                <label
-                  class="ant-checkbox-wrapper ant-checkbox-wrapper-checked check-box css-dev-only-do-not-override-2i2tap"
-                >
-                  <span
-                    class="ant-checkbox ant-wave-target css-dev-only-do-not-override-2i2tap ant-checkbox-checked"
-                  >
-                    <input
-                      checked=""
-                      class="ant-checkbox-input"
-                      type="checkbox"
-                    />
-                    <span
-                      class="ant-checkbox-inner"
-                    />
-                  </span>
-                </label>
-                <div
-                  class="checkbox-value-section"
-                >
-                  <span
-                    class="ant-typography ant-typography-ellipsis ant-typography-single-line ant-typography-ellipsis-single-line value-string css-dev-only-do-not-override-2i2tap"
-                  >
-                    mq-kafka
-                  </span>
-                  <button
-                    class="ant-btn css-dev-only-do-not-override-2i2tap ant-btn-text only-btn"
-                    type="button"
-                  >
-                    <span>
-                      Only
-                    </span>
-                  </button>
-                  <button
-                    class="ant-btn css-dev-only-do-not-override-2i2tap ant-btn-text toggle-btn"
-                    type="button"
-                  >
-                    <span>
-                      Toggle
-                    </span>
-                  </button>
-                </div>
-              </div>
-              <div
-                class="value"
-              >
-                <label
-                  class="ant-checkbox-wrapper ant-checkbox-wrapper-checked check-box css-dev-only-do-not-override-2i2tap"
-                >
-                  <span
-                    class="ant-checkbox ant-wave-target css-dev-only-do-not-override-2i2tap ant-checkbox-checked"
-                  >
-                    <input
-                      checked=""
-                      class="ant-checkbox-input"
-                      type="checkbox"
-                    />
-                    <span
-                      class="ant-checkbox-inner"
-                    />
-                  </span>
-                </label>
-                <div
-                  class="checkbox-value-section"
-                >
-                  <span
-                    class="ant-typography ant-typography-ellipsis ant-typography-single-line ant-typography-ellipsis-single-line value-string css-dev-only-do-not-override-2i2tap"
-                  >
-                    otel-demo
-                  </span>
-                  <button
-                    class="ant-btn css-dev-only-do-not-override-2i2tap ant-btn-text only-btn"
-                    type="button"
-                  >
-                    <span>
-                      Only
-                    </span>
-                  </button>
-                  <button
-                    class="ant-btn css-dev-only-do-not-override-2i2tap ant-btn-text toggle-btn"
-                    type="button"
-                  >
-                    <span>
-                      Toggle
-                    </span>
-                  </button>
-                </div>
-              </div>
-              <div
-                class="value"
-              >
-                <label
-                  class="ant-checkbox-wrapper ant-checkbox-wrapper-checked check-box css-dev-only-do-not-override-2i2tap"
-                >
-                  <span
-                    class="ant-checkbox ant-wave-target css-dev-only-do-not-override-2i2tap ant-checkbox-checked"
-                  >
-                    <input
-                      checked=""
-                      class="ant-checkbox-input"
-                      type="checkbox"
-                    />
-                    <span
-                      class="ant-checkbox-inner"
-                    />
-                  </span>
-                </label>
-                <div
-                  class="checkbox-value-section"
-                >
-                  <span
-                    class="ant-typography ant-typography-ellipsis ant-typography-single-line ant-typography-ellipsis-single-line value-string css-dev-only-do-not-override-2i2tap"
-                  >
-                    otlp-python
-                  </span>
-                  <button
-                    class="ant-btn css-dev-only-do-not-override-2i2tap ant-btn-text only-btn"
-                    type="button"
-                  >
-                    <span>
-                      Only
-                    </span>
-                  </button>
-                  <button
-                    class="ant-btn css-dev-only-do-not-override-2i2tap ant-btn-text toggle-btn"
-                    type="button"
-                  >
-                    <span>
-                      Toggle
-                    </span>
-                  </button>
-                </div>
-              </div>
-              <div
-                class="value"
-              >
-                <label
-                  class="ant-checkbox-wrapper ant-checkbox-wrapper-checked check-box css-dev-only-do-not-override-2i2tap"
-                >
-                  <span
-                    class="ant-checkbox ant-wave-target css-dev-only-do-not-override-2i2tap ant-checkbox-checked"
-                  >
-                    <input
-                      checked=""
-                      class="ant-checkbox-input"
-                      type="checkbox"
-                    />
-                    <span
-                      class="ant-checkbox-inner"
-                    />
-                  </span>
-                </label>
-                <div
-                  class="checkbox-value-section"
-                >
-                  <span
-                    class="ant-typography ant-typography-ellipsis ant-typography-single-line ant-typography-ellipsis-single-line value-string css-dev-only-do-not-override-2i2tap"
-                  >
-                    sample-flask
-                  </span>
-                  <button
-                    class="ant-btn css-dev-only-do-not-override-2i2tap ant-btn-text only-btn"
-                    type="button"
-                  >
-                    <span>
-                      Only
-                    </span>
-                  </button>
-                  <button
-                    class="ant-btn css-dev-only-do-not-override-2i2tap ant-btn-text toggle-btn"
-                    type="button"
-                  >
-                    <span>
-                      Toggle
-                    </span>
-                  </button>
-                </div>
-              </div>
-            </section>
-          </div>
-          <div
-            class="checkbox-filter"
-          >
-            <section
-              class="filter-header-checkbox"
-            >
-              <section
-                class="left-action"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="lucide lucide-chevron-right"
-                  cursor="pointer"
-                  fill="none"
-                  height="13"
-                  stroke="currentColor"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="2"
-                  viewBox="0 0 24 24"
-                  width="13"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="m9 18 6-6-6-6"
-                  />
-                </svg>
-                <span
-                  class="ant-typography title css-dev-only-do-not-override-2i2tap"
-                >
-                  Service Name
-                </span>
-              </section>
-              <section
-                class="right-action"
-              />
-            </section>
-          </div>
-        </section>
-      </div>
-    </div>
-  </div>
-</div>
-`;

frontend/src/components/QuickFilters/types.ts

@@ -17,6 +17,13 @@ export enum SpecficFilterOperations {
 	ONLY = 'ONLY',
 }
 
+export enum SignalType {
+	TRACES = 'traces',
+	LOGS = 'logs',
+	API_MONITORING = 'api_monitoring',
+	EXCEPTIONS = 'exceptions',
+}
+
 export interface IQuickFiltersConfig {
 	type: FiltersType;
 	title: string;
@@ -33,6 +40,8 @@ export interface IQuickFiltersProps {
 	handleFilterVisibilityChange: () => void;
 	source: QuickFiltersSource;
 	onFilterChange?: (query: Query) => void;
+	signal?: SignalType;
+	className?: string;
 }
 
 export enum QuickFiltersSource {

frontend/src/components/QuickFilters/utils.tsx

@@ -0,0 +1,39 @@
+import { Filter as FilterType } from 'types/api/quickFilters/getCustomFilters';
+
+import { FiltersType, IQuickFiltersConfig } from './types';
+
+const getFilterName = (str: string): string =>
+	// replace . and _ with space
+	// capitalize the first letter of each word
+	str
+		.replace(/\./g, ' ')
+		.replace(/_/g, ' ')
+		.split(' ')
+		.map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+		.join(' ');
+
+export const getFilterConfig = (
+	customFilters?: FilterType[],
+	config?: IQuickFiltersConfig[],
+): IQuickFiltersConfig[] => {
+	if (!customFilters?.length) {
+		return config || [];
+	}
+
+	return customFilters.map(
+		(att, index) =>
+			({
+				type: FiltersType.CHECKBOX,
+				title: getFilterName(att.key),
+				attributeKey: {
+					id: att.key,
+					key: att.key,
+					dataType: att.dataType,
+					type: att.type,
+					isColumn: att.isColumn,
+					isJSON: att.isJSON,
+				},
+				defaultOpen: index === 0,
+			} as IQuickFiltersConfig),
+	);
+};

frontend/src/constants/localStorage.ts

@@ -28,4 +28,7 @@ export enum LOCALSTORAGE {
 	DONT_SHOW_SLOW_API_WARNING = 'DONT_SHOW_SLOW_API_WARNING',
 	METRICS_LIST_OPTIONS = 'METRICS_LIST_OPTIONS',
 	SHOW_EXCEPTIONS_QUICK_FILTERS = 'SHOW_EXCEPTIONS_QUICK_FILTERS',
+	BANNER_DISMISSED = 'BANNER_DISMISSED',
+	QUICK_FILTERS_SETTINGS_ANNOUNCEMENT = 'QUICK_FILTERS_SETTINGS_ANNOUNCEMENT',
+	UNEXECUTED_FUNNELS = 'UNEXECUTED_FUNNELS',
 }

frontend/src/constants/query.ts

@@ -46,5 +46,4 @@ export enum QueryParams {
 	msgSystem = 'msgSystem',
 	destination = 'destination',
 	kindString = 'kindString',
-	variables = 'variables',
 }

frontend/src/constants/reactQueryKeys.ts

@@ -75,7 +75,12 @@ export const REACT_QUERY_KEY = {
 	VALIDATE_FUNNEL_STEPS: 'VALIDATE_FUNNEL_STEPS',
 	UPDATE_FUNNEL_STEP_DETAILS: 'UPDATE_FUNNEL_STEP_DETAILS',
 	GET_FUNNEL_OVERVIEW: 'GET_FUNNEL_OVERVIEW',
+	GET_FUNNEL_STEPS_OVERVIEW: 'GET_FUNNEL_STEPS_OVERVIEW',
 	GET_FUNNEL_SLOW_TRACES: 'GET_FUNNEL_SLOW_TRACES',
 	GET_FUNNEL_ERROR_TRACES: 'GET_FUNNEL_ERROR_TRACES',
 	GET_FUNNEL_STEPS_GRAPH_DATA: 'GET_FUNNEL_STEPS_GRAPH_DATA',
+
+	// Quick Filters Query Keys
+	GET_CUSTOM_FILTERS: 'GET_CUSTOM_FILTERS',
+	GET_OTHER_FILTERS: 'GET_OTHER_FILTERS',
 } as const;

frontend/src/container/CloudIntegrationPage/CloudIntegrationPage.tsx

@@ -1,3 +1,8 @@
+import {
+	IntegrationType,
+	RequestIntegrationBtn,
+} from 'pages/Integrations/RequestIntegrationBtn';
+
 import Header from './Header/Header';
 import HeroSection from './HeroSection/HeroSection';
 import ServicesTabs from './ServicesSection/ServicesTabs';
@@ -7,6 +12,10 @@ function CloudIntegrationPage(): JSX.Element {
 		<div>
 			<Header />
 			<HeroSection />
+			<RequestIntegrationBtn
+				type={IntegrationType.AWS_SERVICES}
+				message="Cannot find the AWS service you're looking for? Request more integrations"
+			/>
 			<ServicesTabs />
 		</div>
 	);

frontend/src/container/CloudIntegrationPage/Header/Header.styles.scss

@@ -33,13 +33,16 @@
 		border: 1px solid var(--bg-slate-400);
 		background: var(--bg-ink-300);
 		border-radius: 2px;
-		color: var(--bg-vanilla-400);
 		font-size: 12px;
-		line-height: 10px; /* 83.333% */
+		line-height: 10px;
 		letter-spacing: 0.12px;
 		width: 113px;
 		height: 32px;
 		cursor: pointer;
+		&,
+		&:hover {
+			color: var(--bg-vanilla-400);
+		}
 	}
 }
 

frontend/src/container/CloudIntegrationPage/Header/Header.tsx

@@ -33,10 +33,15 @@ function Header(): JSX.Element {
 				/>
 			</div>
 			<div className="cloud-header__actions">
-				<button className="cloud-header__help" type="button">
+				<a
+					href="https://signoz.io/blog/native-aws-integrations-with-autodiscovery/"
+					target="_blank"
+					rel="noopener noreferrer"
+					className="cloud-header__help"
+				>
 					<LifeBuoy size={12} />
 					Get Help
-				</button>
+				</a>
 			</div>
 		</div>
 	);

frontend/src/container/CloudIntegrationPage/HeroSection/components/AccountSettingsModal.tsx

@@ -58,6 +58,23 @@ function AccountSettingsModal({
 		});
 	};
 
+	const handleRegionDeselect = useCallback(
+		(item: string): void => {
+			if (selectedRegions.includes(item)) {
+				setSelectedRegions(selectedRegions.filter((region) => region !== item));
+				if (includeAllRegions) {
+					setIncludeAllRegions(false);
+				}
+			}
+		},
+		[
+			selectedRegions,
+			includeAllRegions,
+			setSelectedRegions,
+			setIncludeAllRegions,
+		],
+	);
+
 	const renderRegionSelector = useCallback(() => {
 		if (isRegionSelectOpen) {
 			return (
@@ -93,17 +110,19 @@ function AccountSettingsModal({
 					maxTagCount={3}
 					value={getRegionPreviewText(selectedRegions)}
 					open={false}
+					onDeselect={handleRegionDeselect}
 				/>
 			</>
 		);
 	}, [
 		isRegionSelectOpen,
-		selectedRegions,
 		includeAllRegions,
 		handleIncludeAllRegionsChange,
-		setIsRegionSelectOpen,
+		selectedRegions,
+		handleRegionDeselect,
 		setSelectedRegions,
 		setIncludeAllRegions,
+		setIsRegionSelectOpen,
 	]);
 
 	const renderAccountDetails = useCallback(

frontend/src/container/CloudIntegrationPage/ServicesSection/ConfigureServiceModal.tsx

@@ -8,12 +8,14 @@ import {
 	SupportedSignals,
 } from 'container/CloudIntegrationPage/ServicesSection/types';
 import { useUpdateServiceConfig } from 'hooks/integration/aws/useUpdateServiceConfig';
+import { isEqual } from 'lodash-es';
 import { useCallback, useMemo, useState } from 'react';
 import { useQueryClient } from 'react-query';
 
 import logEvent from '../../../api/common/logEvent';
+import S3BucketsSelector from './S3BucketsSelector';
 
-interface IConfigureServiceModalProps {
+export interface IConfigureServiceModalProps {
 	isOpen: boolean;
 	onClose: () => void;
 	serviceName: string;
@@ -36,18 +38,34 @@ function ConfigureServiceModal({
 	const [isLoading, setIsLoading] = useState(false);
 
 	// Track current form values
-	const initialValues = {
-		metrics: initialConfig?.metrics?.enabled || false,
-		logs: initialConfig?.logs?.enabled || false,
-	};
+	const initialValues = useMemo(
+		() => ({
+			metrics: initialConfig?.metrics?.enabled || false,
+			logs: initialConfig?.logs?.enabled || false,
+			s3Buckets: initialConfig?.logs?.s3_buckets || {},
+		}),
+		[initialConfig],
+	);
 	const [currentValues, setCurrentValues] = useState(initialValues);
 
 	const isSaveDisabled = useMemo(
 		() =>
 			// disable only if current values are same as the initial config
 			currentValues.metrics === initialValues.metrics &&
-			currentValues.logs === initialValues.logs,
-		[currentValues, initialValues.metrics, initialValues.logs],
+			currentValues.logs === initialValues.logs &&
+			isEqual(currentValues.s3Buckets, initialValues.s3Buckets),
+		[currentValues, initialValues],
+	);
+
+	const handleS3BucketsChange = useCallback(
+		(bucketsByRegion: Record<string, string[]>) => {
+			setCurrentValues((prev) => ({
+				...prev,
+				s3Buckets: bucketsByRegion,
+			}));
+			form.setFieldsValue({ s3Buckets: bucketsByRegion });
+		},
+		[form],
 	);
 
 	const {
@@ -70,6 +88,7 @@ function ConfigureServiceModal({
 						config: {
 							logs: {
 								enabled: values.logs,
+								s3_buckets: values.s3Buckets,
 							},
 							metrics: {
 								enabled: values.metrics,
@@ -144,6 +163,7 @@ function ConfigureServiceModal({
 				initialValues={{
 					metrics: initialConfig?.metrics?.enabled || false,
 					logs: initialConfig?.logs?.enabled || false,
+					s3Buckets: initialConfig?.logs?.s3_buckets || {},
 				}}
 			>
 				<div className=" configure-service-modal__body">
@@ -174,27 +194,38 @@ function ConfigureServiceModal({
 					)}
 
 					{supportedSignals.logs && (
-						<Form.Item
-							name="logs"
-							valuePropName="checked"
-							className="configure-service-modal__body-form-item"
-						>
-							<div className="configure-service-modal__body-regions-switch-switch">
-								<Switch
-									checked={currentValues.logs}
-									onChange={(checked): void => {
-										setCurrentValues((prev) => ({ ...prev, logs: checked }));
-										form.setFieldsValue({ logs: checked });
-									}}
-								/>
-								<span className="configure-service-modal__body-regions-switch-switch-label">
-									Log Collection
-								</span>
-							</div>
-							<div className="configure-service-modal__body-switch-description">
-								To ingest logs from your AWS services, you must complete several steps
-							</div>
-						</Form.Item>
+						<>
+							<Form.Item
+								name="logs"
+								valuePropName="checked"
+								className="configure-service-modal__body-form-item"
+							>
+								<div className="configure-service-modal__body-regions-switch-switch">
+									<Switch
+										checked={currentValues.logs}
+										onChange={(checked): void => {
+											setCurrentValues((prev) => ({ ...prev, logs: checked }));
+											form.setFieldsValue({ logs: checked });
+										}}
+									/>
+									<span className="configure-service-modal__body-regions-switch-switch-label">
+										Log Collection
+									</span>
+								</div>
+								<div className="configure-service-modal__body-switch-description">
+									To ingest logs from your AWS services, you must complete several steps
+								</div>
+							</Form.Item>
+
+							{currentValues.logs && serviceId === 's3sync' && (
+								<Form.Item name="s3Buckets" noStyle>
+									<S3BucketsSelector
+										initialBucketsByRegion={currentValues.s3Buckets}
+										onChange={handleS3BucketsChange}
+									/>
+								</Form.Item>
+							)}
+						</>
 					)}
 				</div>
 			</Form>

frontend/src/container/CloudIntegrationPage/ServicesSection/S3BucketsSelector.tsx

@@ -0,0 +1,123 @@
+import { Form, Select, Skeleton, Typography } from 'antd';
+import { useAwsAccounts } from 'hooks/integration/aws/useAwsAccounts';
+import useUrlQuery from 'hooks/useUrlQuery';
+import { useCallback, useMemo, useState } from 'react';
+
+const { Title } = Typography;
+
+interface S3BucketsSelectorProps {
+	onChange?: (bucketsByRegion: Record<string, string[]>) => void;
+	initialBucketsByRegion?: Record<string, string[]>;
+}
+
+/**
+ * Component for selecting S3 buckets by AWS region
+ * Displays a multi-select input for each region in the active AWS account
+ */
+function S3BucketsSelector({
+	onChange,
+	initialBucketsByRegion = {},
+}: S3BucketsSelectorProps): JSX.Element {
+	const cloudAccountId = useUrlQuery().get('cloudAccountId');
+	const { data: accounts, isLoading } = useAwsAccounts();
+	const [bucketsByRegion, setBucketsByRegion] = useState<
+		Record<string, string[]>
+	>(initialBucketsByRegion);
+
+	// Find the active AWS account based on the URL query parameter
+	const activeAccount = useMemo(
+		() =>
+			accounts?.find((account) => account.cloud_account_id === cloudAccountId),
+		[accounts, cloudAccountId],
+	);
+
+	// Get all regions to display (union of account regions and initialBucketsByRegion regions)
+	const allRegions = useMemo(() => {
+		if (!activeAccount) return [];
+
+		// Get unique regions from both sources
+		const initialRegions = Object.keys(initialBucketsByRegion);
+		const accountRegions = activeAccount.config.regions;
+
+		// Create a Set to get unique values
+		const uniqueRegions = new Set([...accountRegions, ...initialRegions]);
+
+		return Array.from(uniqueRegions);
+	}, [activeAccount, initialBucketsByRegion]);
+
+	// Check if a region is disabled (not in account's regions)
+	const isRegionDisabled = useCallback(
+		(region: string) => !activeAccount?.config.regions.includes(region),
+		[activeAccount],
+	);
+
+	// Handle changes to bucket selections for a specific region
+	const handleRegionBucketsChange = useCallback(
+		(region: string, buckets: string[]): void => {
+			setBucketsByRegion((prevBuckets) => {
+				const updatedBuckets = { ...prevBuckets };
+
+				if (buckets.length === 0) {
+					// Remove empty bucket arrays
+					delete updatedBuckets[region];
+				} else {
+					updatedBuckets[region] = buckets;
+				}
+
+				// Notify parent component of changes
+				onChange?.(updatedBuckets);
+				return updatedBuckets;
+			});
+		},
+		[onChange],
+	);
+
+	// Show loading state while fetching account data
+	if (isLoading || !activeAccount) {
+		return <Skeleton active />;
+	}
+
+	return (
+		<div className="s3-buckets-selector">
+			<Title level={5}>Select S3 Buckets by Region</Title>
+
+			{allRegions.map((region) => {
+				const disabled = isRegionDisabled(region);
+
+				return (
+					<Form.Item
+						key={region}
+						label={region}
+						// eslint-disable-next-line react/jsx-props-no-spreading
+						{...(disabled && {
+							help:
+								'Region disabled in account settings; S3 buckets here will not be synced.',
+							validateStatus: 'warning',
+						})}
+					>
+						<Select
+							mode="tags"
+							placeholder={`Enter S3 bucket names for ${region}`}
+							value={bucketsByRegion[region] || []}
+							onChange={(value): void => handleRegionBucketsChange(region, value)}
+							tokenSeparators={[',']}
+							allowClear
+							disabled={disabled}
+							suffixIcon={null}
+							notFoundContent={null}
+							filterOption={false}
+							showSearch
+						/>
+					</Form.Item>
+				);
+			})}
+		</div>
+	);
+}
+
+S3BucketsSelector.defaultProps = {
+	onChange: undefined,
+	initialBucketsByRegion: undefined,
+};
+
+export default S3BucketsSelector;

frontend/src/container/CloudIntegrationPage/ServicesSection/__tests__/ConfigureServiceModalS3Sync.test.tsx

@@ -0,0 +1,162 @@
+import { act, fireEvent, screen, waitFor } from '@testing-library/react';
+import { server } from 'mocks-server/server';
+import { rest, RestRequest } from 'msw'; // Import RestRequest for req.json() typing
+
+import { UpdateServiceConfigPayload } from '../types';
+import { accountsResponse, CLOUD_ACCOUNT_ID, initialBuckets } from './mockData';
+import {
+	assertGenericModalElements,
+	assertS3SyncSpecificElements,
+	renderModal,
+} from './utils';
+
+// --- MOCKS ---
+jest.mock('hooks/useUrlQuery', () => ({
+	__esModule: true,
+	default: jest.fn(() => ({
+		get: jest.fn((paramName: string) => {
+			if (paramName === 'cloudAccountId') {
+				return CLOUD_ACCOUNT_ID;
+			}
+			return null;
+		}),
+	})),
+}));
+
+// --- TEST SUITE ---
+describe('ConfigureServiceModal for S3 Sync service', () => {
+	jest.setTimeout(10000);
+	beforeEach(() => {
+		server.use(
+			rest.get(
+				'http://localhost/api/v1/cloud-integrations/aws/accounts',
+				(req, res, ctx) => res(ctx.json(accountsResponse)),
+			),
+		);
+	});
+
+	it('should render with logs collection switch and bucket selectors (no buckets initially selected)', async () => {
+		act(() => {
+			renderModal({}); // No initial S3 buckets, defaults to 's3sync' serviceId
+		});
+		await assertGenericModalElements(); // Use new generic assertion
+		await assertS3SyncSpecificElements({}); // Use new S3-specific assertion
+	});
+
+	it('should render with logs collection switch and bucket selectors (some buckets initially selected)', async () => {
+		act(() => {
+			renderModal(initialBuckets); // Defaults to 's3sync' serviceId
+		});
+		await assertGenericModalElements(); // Use new generic assertion
+		await assertS3SyncSpecificElements(initialBuckets); // Use new S3-specific assertion
+	});
+
+	it('should enable save button after adding a new bucket via combobox', async () => {
+		act(() => {
+			renderModal(initialBuckets); // Defaults to 's3sync' serviceId
+		});
+		await assertGenericModalElements();
+		await assertS3SyncSpecificElements(initialBuckets);
+
+		expect(screen.getByRole('button', { name: /save/i })).toBeDisabled();
+
+		const targetCombobox = screen.getAllByRole('combobox')[0];
+		const newBucketName = 'a-newly-added-bucket';
+
+		act(() => {
+			fireEvent.change(targetCombobox, { target: { value: newBucketName } });
+			fireEvent.keyDown(targetCombobox, {
+				key: 'Enter',
+				code: 'Enter',
+				keyCode: 13,
+			});
+		});
+
+		await waitFor(() => {
+			expect(screen.getByLabelText(newBucketName)).toBeInTheDocument();
+			expect(screen.getByRole('button', { name: /save/i })).toBeEnabled();
+		});
+	});
+
+	it('should send updated bucket configuration on save', async () => {
+		let capturedPayload: UpdateServiceConfigPayload | null = null;
+		const mockUpdateConfigUrl =
+			'http://localhost/api/v1/cloud-integrations/aws/services/s3sync/config';
+
+		// Override POST handler specifically for this test to capture payload
+		server.use(
+			rest.post(mockUpdateConfigUrl, async (req: RestRequest, res, ctx) => {
+				capturedPayload = await req.json();
+				return res(ctx.status(200), ctx.json({ message: 'Config updated' }));
+			}),
+		);
+		act(() => {
+			renderModal(initialBuckets); // Defaults to 's3sync' serviceId
+		});
+		await assertGenericModalElements();
+		await assertS3SyncSpecificElements(initialBuckets);
+
+		expect(screen.getByRole('button', { name: /save/i })).toBeDisabled();
+
+		const newBucketName = 'another-new-bucket';
+		// As before, targeting the first combobox, assumed to be for 'ap-south-1'.
+		const targetCombobox = screen.getAllByRole('combobox')[0];
+
+		// eslint-disable-next-line sonarjs/no-identical-functions
+		act(() => {
+			fireEvent.change(targetCombobox, { target: { value: newBucketName } });
+			fireEvent.keyDown(targetCombobox, {
+				key: 'Enter',
+				code: 'Enter',
+				keyCode: 13,
+			});
+		});
+
+		await waitFor(() => {
+			expect(screen.getByLabelText(newBucketName)).toBeInTheDocument();
+			expect(screen.getByRole('button', { name: /save/i })).toBeEnabled();
+			act(() => {
+				fireEvent.click(screen.getByRole('button', { name: /save/i }));
+			});
+		});
+
+		await waitFor(() => {
+			expect(capturedPayload).not.toBeNull();
+		});
+
+		expect(capturedPayload).toEqual({
+			cloud_account_id: CLOUD_ACCOUNT_ID,
+			config: {
+				logs: {
+					enabled: true,
+					s3_buckets: {
+						'us-east-2': ['first-bucket', 'second-bucket'], // Existing buckets
+						'ap-south-1': [newBucketName], // Newly added bucket for the first region
+					},
+				},
+				metrics: {},
+			},
+		});
+	});
+
+	it('should not render S3 bucket region selector UI for services other than s3sync', async () => {
+		const otherServiceId = 'cloudwatch';
+		act(() => {
+			renderModal({}, otherServiceId);
+		});
+		await assertGenericModalElements();
+
+		await waitFor(() => {
+			expect(
+				screen.queryByRole('heading', { name: /select s3 buckets by region/i }),
+			).not.toBeInTheDocument();
+
+			const regions = accountsResponse.data.accounts[0]?.config?.regions || [];
+			regions.forEach((region) => {
+				expect(
+					screen.queryByText(`Enter S3 bucket names for ${region}`),
+				).not.toBeInTheDocument();
+			});
+		});
+	});
+});

frontend/src/container/CloudIntegrationPage/ServicesSection/__tests__/mockData.ts

@@ -0,0 +1,44 @@
+import { IConfigureServiceModalProps } from '../ConfigureServiceModal';
+
+const CLOUD_ACCOUNT_ID = '123456789012';
+
+const initialBuckets = { 'us-east-2': ['first-bucket', 'second-bucket'] };
+
+const accountsResponse = {
+	status: 'success',
+	data: {
+		accounts: [
+			{
+				id: 'a1b2c3d4-e5f6-7890-1234-567890abcdef',
+				cloud_account_id: CLOUD_ACCOUNT_ID,
+				config: {
+					regions: ['ap-south-1', 'ap-south-2', 'us-east-1', 'us-east-2'],
+				},
+				status: {
+					integration: {
+						last_heartbeat_ts_ms: 1747114366214,
+					},
+				},
+			},
+		],
+	},
+};
+
+const defaultModalProps: Omit<IConfigureServiceModalProps, 'initialConfig'> = {
+	isOpen: true,
+	onClose: jest.fn(),
+	serviceName: 'S3 Sync',
+	serviceId: 's3sync',
+	cloudAccountId: CLOUD_ACCOUNT_ID,
+	supportedSignals: {
+		logs: true,
+		metrics: false,
+	},
+};
+
+export {
+	accountsResponse,
+	CLOUD_ACCOUNT_ID,
+	defaultModalProps,
+	initialBuckets,
+};

frontend/src/container/CloudIntegrationPage/ServicesSection/__tests__/utils.tsx

@@ -0,0 +1,79 @@
+import { render, RenderResult, screen, waitFor } from '@testing-library/react';
+import MockQueryClientProvider from 'providers/test/MockQueryClientProvider';
+
+import ConfigureServiceModal from '../ConfigureServiceModal';
+import { accountsResponse, defaultModalProps } from './mockData';
+
+/**
+ * Renders the ConfigureServiceModal with specified S3 bucket initial configurations.
+ */
+const renderModal = (
+	initialConfigLogsS3Buckets: Record<string, string[]> = {},
+	serviceId = 's3sync',
+): RenderResult => {
+	const initialConfig = {
+		logs: { enabled: true, s3_buckets: initialConfigLogsS3Buckets },
+		metrics: { enabled: false },
+	};
+
+	return render(
+		<MockQueryClientProvider>
+			<ConfigureServiceModal
+				// eslint-disable-next-line react/jsx-props-no-spreading
+				{...defaultModalProps}
+				serviceId={serviceId}
+				initialConfig={initialConfig}
+			/>
+		</MockQueryClientProvider>,
+	);
+};
+
+/**
+ * Asserts that generic UI elements of the modal are present.
+ */
+const assertGenericModalElements = async (): Promise<void> => {
+	await waitFor(() => {
+		expect(screen.getByRole('switch')).toBeInTheDocument();
+		expect(screen.getByText(/log collection/i)).toBeInTheDocument();
+		expect(
+			screen.getByText(
+				/to ingest logs from your aws services, you must complete several steps/i,
+			),
+		).toBeInTheDocument();
+	});
+};
+
+/**
+ * Asserts the state of S3 bucket selectors for each region, specific to S3 Sync.
+ */
+const assertS3SyncSpecificElements = async (
+	expectedBucketsByRegion: Record<string, string[]> = {},
+): Promise<void> => {
+	const regions = accountsResponse.data.accounts[0]?.config?.regions || [];
+
+	await waitFor(() => {
+		expect(
+			screen.getByRole('heading', { name: /select s3 buckets by region/i }),
+		).toBeInTheDocument();
+
+		regions.forEach((region) => {
+			expect(screen.getByText(region)).toBeInTheDocument();
+			const bucketsForRegion = expectedBucketsByRegion[region] || [];
+			if (bucketsForRegion.length > 0) {
+				bucketsForRegion.forEach((bucket) => {
+					expect(screen.getByText(bucket)).toBeInTheDocument();
+				});
+			} else {
+				expect(
+					screen.getByText(`Enter S3 bucket names for ${region}`),
+				).toBeInTheDocument();
+			}
+		});
+	});
+};
+
+export {
+	assertGenericModalElements,
+	assertS3SyncSpecificElements,
+	renderModal,
+};

frontend/src/container/CloudIntegrationPage/ServicesSection/types.ts

@@ -34,9 +34,18 @@ interface DataStatus {
 	last_received_from: string;
 }
 
+interface S3BucketsByRegion {
+	[region: string]: string[];
+}
+
+interface LogsConfig extends ConfigStatus {
+	s3_buckets?: S3BucketsByRegion;
+}
+
 interface ServiceConfig {
-	logs: ConfigStatus;
+	logs: LogsConfig;
 	metrics: ConfigStatus;
+	s3_sync?: LogsConfig;
 }
 
 interface IServiceStatus {
@@ -99,6 +108,7 @@ interface UpdateServiceConfigPayload {
 	config: {
 		logs: {
 			enabled: boolean;
+			s3_buckets?: S3BucketsByRegion;
 		};
 		metrics: {
 			enabled: boolean;
@@ -113,6 +123,7 @@ interface UpdateServiceConfigResponse {
 		config: {
 			logs: {
 				enabled: boolean;
+				s3_buckets?: S3BucketsByRegion;
 			};
 			metrics: {
 				enabled: boolean;
@@ -125,6 +136,7 @@ export type {
 	CloudAccount,
 	CloudAccountsData,
 	IServiceStatus,
+	S3BucketsByRegion,
 	Service,
 	ServiceConfig,
 	ServiceData,

frontend/src/container/CloudIntegrationPage/__tests__/RequestIntegration.test.tsx

@@ -0,0 +1,63 @@
+import { act, fireEvent, render, screen } from '@testing-library/react';
+import { server } from 'mocks-server/server';
+import { rest } from 'msw';
+import {
+	IntegrationType,
+	RequestIntegrationBtn,
+} from 'pages/Integrations/RequestIntegrationBtn';
+import { I18nextProvider } from 'react-i18next';
+import i18n from 'ReactI18';
+
+describe('Request AWS integration', () => {
+	it('should render the request integration button', async () => {
+		let capturedPayload: any;
+		server.use(
+			rest.post('http://localhost/api/v1/event', async (req, res, ctx) => {
+				capturedPayload = await req.json();
+				return res(
+					ctx.status(200),
+					ctx.json({
+						statusCode: 200,
+						error: null,
+						payload: 'Event Processed Successfully',
+					}),
+				);
+			}),
+		);
+		act(() => {
+			render(
+				<I18nextProvider i18n={i18n}>
+					<RequestIntegrationBtn type={IntegrationType.AWS_SERVICES} />{' '}
+				</I18nextProvider>,
+			);
+		});
+
+		expect(
+			screen.getByText(
+				/cannot find what you’re looking for\? request more integrations/i,
+			),
+		).toBeInTheDocument();
+
+		await act(() => {
+			fireEvent.change(screen.getByPlaceholderText(/Enter integration name/i), {
+				target: { value: 's3 sync' },
+			});
+
+			const submitButton = screen.getByRole('button', { name: /submit/i });
+
+			expect(submitButton).toBeEnabled();
+
+			fireEvent.click(submitButton);
+		});
+
+		expect(capturedPayload.eventName).toBeDefined();
+		expect(capturedPayload.attributes).toBeDefined();
+
+		expect(capturedPayload.eventName).toBe('AWS service integration requested');
+		expect(capturedPayload.attributes).toEqual({
+			screen: 'AWS integration details',
+			integration: 's3 sync',
+			tenant_url: 'localhost',
+		});
+	});
+});

frontend/src/container/GridCardLayout/GridCard/index.tsx

@@ -12,6 +12,7 @@ import { isEqual } from 'lodash-es';
 import isEmpty from 'lodash-es/isEmpty';
 import { useDashboard } from 'providers/Dashboard/Dashboard';
 import { memo, useEffect, useRef, useState } from 'react';
+import { useQueryClient } from 'react-query';
 import { useDispatch, useSelector } from 'react-redux';
 import { UpdateTimeInterval } from 'store/actions';
 import { AppState } from 'store/reducers';
@@ -26,7 +27,6 @@ import { GridCardGraphProps } from './types';
 import { isDataAvailableByPanelType } from './utils';
 import WidgetGraphComponent from './WidgetGraphComponent';
 
-// eslint-disable-next-line sonarjs/cognitive-complexity
 function GridCardGraph({
 	widget,
 	headerMenuList = [MenuItemKeys.View],
@@ -59,12 +59,14 @@ function GridCardGraph({
 	const {
 		toScrollWidgetId,
 		setToScrollWidgetId,
+		variablesToGetUpdated,
 		setDashboardQueryRangeCalled,
 	} = useDashboard();
 	const { minTime, maxTime, selectedTime: globalSelectedInterval } = useSelector<
 		AppState,
 		GlobalReducer
 	>((state) => state.globalTime);
+	const queryClient = useQueryClient();
 
 	const handleBackNavigation = (): void => {
 		const searchParams = new URLSearchParams(window.location.search);
@@ -115,7 +117,11 @@ function GridCardGraph({
 	const isEmptyWidget =
 		widget?.id === PANEL_TYPES.EMPTY_WIDGET || isEmpty(widget);
 
-	const queryEnabledCondition = isVisible && !isEmptyWidget && isQueryEnabled;
+	const queryEnabledCondition =
+		isVisible &&
+		!isEmptyWidget &&
+		isQueryEnabled &&
+		isEmpty(variablesToGetUpdated);
 
 	const [requestData, setRequestData] = useState<GetQueryResultsProps>(() => {
 		if (widget.panelTypes !== PANEL_TYPES.LIST) {
@@ -155,22 +161,22 @@ function GridCardGraph({
 
 	// TODO [vikrantgupta25] remove this useEffect with refactor as this is prone to race condition
 	// this is added to tackle the case of async communication between VariableItem.tsx and GridCard.tsx
-	// useEffect(() => {
-	// 	if (variablesToGetUpdated.length > 0) {
-	// 		queryClient.cancelQueries([
-	// 			maxTime,
-	// 			minTime,
-	// 			globalSelectedInterval,
-	// 			variables,
-	// 			widget?.query,
-	// 			widget?.panelTypes,
-	// 			widget.timePreferance,
-	// 			widget.fillSpans,
-	// 			requestData,
-	// 		]);
-	// 	}
-	// 	// eslint-disable-next-line react-hooks/exhaustive-deps
-	// }, [variablesToGetUpdated]);
+	useEffect(() => {
+		if (variablesToGetUpdated.length > 0) {
+			queryClient.cancelQueries([
+				maxTime,
+				minTime,
+				globalSelectedInterval,
+				variables,
+				widget?.query,
+				widget?.panelTypes,
+				widget.timePreferance,
+				widget.fillSpans,
+				requestData,
+			]);
+		}
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [variablesToGetUpdated]);
 
 	useEffect(() => {
 		if (!isEqual(updatedQuery, requestData.query)) {
@@ -203,15 +209,6 @@ function GridCardGraph({
 				widget.timePreferance,
 				widget.fillSpans,
 				requestData,
-				variables
-					? Object.entries(variables).reduce(
-							(acc, [id, variable]) => ({
-								...acc,
-								[id]: variable.selectedValue,
-							}),
-							{},
-					  )
-					: {},
 				...(customTimeRange && customTimeRange.startTime && customTimeRange.endTime
 					? [customTimeRange.startTime, customTimeRange.endTime]
 					: []),

frontend/src/container/Home/Home.styles.scss

@@ -25,6 +25,51 @@
 		background: var(--bg-slate-500);
 	}
 
+	.home-container-banner {
+		position: relative;
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		justify-content: center;
+		padding: 8px 12px;
+		width: 100%;
+		background-color: var(--bg-robin-500);
+
+		.home-container-banner-close {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			cursor: pointer;
+			color: var(--bg-vanilla-100);
+
+			position: absolute;
+			right: 12px;
+		}
+
+		.home-container-banner-content {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			gap: 4px;
+			color: var(--bg-vanilla-100);
+			font-family: Inter;
+			font-size: 12px;
+			font-style: normal;
+			font-weight: 400;
+			line-height: 20px;
+
+			.home-container-banner-link {
+				color: var(--bg-vanilla-100);
+				font-size: 12px;
+				font-style: normal;
+				font-weight: 400;
+				line-height: 20px;
+				letter-spacing: -0.07px;
+				text-decoration: underline;
+			}
+		}
+	}
+
 	.home-header-left {
 		display: flex;
 		align-items: center;

frontend/src/container/Home/Home.tsx

@@ -10,6 +10,7 @@ import getAllUserPreferences from 'api/preferences/getAllUserPreference';
 import updateUserPreferenceAPI from 'api/preferences/updateUserPreference';
 import Header from 'components/Header/Header';
 import { DEFAULT_ENTITY_VERSION } from 'constants/app';
+import { LOCALSTORAGE } from 'constants/localStorage';
 import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import ROUTES from 'constants/routes';
@@ -20,7 +21,7 @@ import { useGetK8sPodsList } from 'hooks/infraMonitoring/useGetK8sPodsList';
 import { useGetQueryRange } from 'hooks/queryBuilder/useGetQueryRange';
 import history from 'lib/history';
 import cloneDeep from 'lodash-es/cloneDeep';
-import { CompassIcon, DotIcon, HomeIcon, Plus, Wrench } from 'lucide-react';
+import { CompassIcon, DotIcon, HomeIcon, Plus, Wrench, X } from 'lucide-react';
 import { AnimatePresence } from 'motion/react';
 import * as motion from 'motion/react-client';
 import Card from 'periscope/components/Card/Card';
@@ -61,6 +62,13 @@ export default function Home(): JSX.Element {
 		false,
 	);
 
+	const [isBannerDismissed, setIsBannerDismissed] = useState(false);
+
+	useEffect(() => {
+		const bannerDismissed = localStorage.getItem(LOCALSTORAGE.BANNER_DISMISSED);
+		setIsBannerDismissed(bannerDismissed === 'true');
+	}, []);
+
 	useEffect(() => {
 		const now = new Date();
 		const startTime = new Date(now.getTime() - homeInterval);
@@ -310,9 +318,35 @@ export default function Home(): JSX.Element {
 		logEvent('Homepage: Visited', {});
 	}, []);
 
+	const hideBanner = (): void => {
+		localStorage.setItem(LOCALSTORAGE.BANNER_DISMISSED, 'true');
+		setIsBannerDismissed(true);
+	};
+
 	return (
 		<div className="home-container">
 			<div className="sticky-header">
+				{!isBannerDismissed && (
+					<div className="home-container-banner">
+						<div className="home-container-banner-content">
+							Big news: SigNoz Cloud Teams plan now starting at just $49/Month -
+							<a
+								href="https://signoz.io/blog/cloud-teams-plan-now-at-49usd/"
+								target="_blank"
+								rel="noreferrer"
+								className="home-container-banner-link"
+							>
+								<i>read more</i>
+							</a>
+							🥳🎉
+						</div>
+
+						<div className="home-container-banner-close">
+							<X size={16} onClick={hideBanner} />
+						</div>
+					</div>
+				)}
+
 				<Header
 					leftComponent={
 						<div className="home-header-left">

frontend/src/container/InfraMonitoringK8s/commonUtils.tsx

@@ -5,9 +5,9 @@
 /* eslint-disable prefer-destructuring */
 
 import { Color } from '@signozhq/design-tokens';
-import { Tooltip, Typography } from 'antd';
-import Table, { ColumnsType } from 'antd/es/table';
+import { Table, Tooltip, Typography } from 'antd';
 import { Progress } from 'antd/lib';
+import { ColumnsType } from 'antd/lib/table';
 import { ResizeTable } from 'components/ResizeTable';
 import FieldRenderer from 'container/LogDetailedView/FieldRenderer';
 import { DataType } from 'container/LogDetailedView/TableView';

frontend/src/container/MetricsApplication/Tabs/Overview/ApDex/index.tsx

@@ -1,8 +1,8 @@
 import Spinner from 'components/Spinner';
 import { Card, GraphContainer } from 'container/MetricsApplication/styles';
 import { useGetApDexSettings } from 'hooks/apDex/useGetApDexSettings';
-import useErrorNotification from 'hooks/useErrorNotification';
-import { memo } from 'react';
+import { useNotifications } from 'hooks/useNotifications';
+import { memo, useEffect } from 'react';
 import { useParams } from 'react-router-dom';
 
 import { IServiceName } from '../../types';
@@ -17,11 +17,20 @@ function ApDexApplication({
 }: ApDexApplicationProps): JSX.Element {
 	const { servicename: encodedServiceName } = useParams<IServiceName>();
 	const servicename = decodeURIComponent(encodedServiceName);
+	const { notifications } = useNotifications();
 
 	const { data, isLoading, error, isRefetching } = useGetApDexSettings(
 		servicename,
 	);
-	useErrorNotification(error);
+
+	useEffect(() => {
+		if (error) {
+			notifications.error({
+				message: error.getErrorCode(),
+				description: error.getErrorMessage(),
+			});
+		}
+	}, [error, notifications]);
 
 	if (isLoading || isRefetching) {
 		return (

frontend/src/container/MetricsApplication/Tabs/Overview/GraphControlsPanel/GraphControlsPanel.tsx

@@ -47,7 +47,7 @@ function GraphControlsPanel({
 					onClick={onViewAPIMonitoringClick}
 					style={{ color: Color.BG_VANILLA_100 }}
 				>
-					View Third Party API
+					View External APIs
 				</Button>
 			)}
 		</div>

frontend/src/container/MetricsExplorer/Summary/MetricNameSearch.tsx

@@ -15,8 +15,11 @@ import { useQueryOperations } from 'hooks/queryBuilder/useQueryBuilderOperations
 import useDebouncedFn from 'hooks/useDebouncedFunction';
 import { Search } from 'lucide-react';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useSearchParams } from 'react-router-dom-v5-compat';
 import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
 
+import { COMPOSITE_QUERY_KEY } from './constants';
+
 function MetricNameSearch(): JSX.Element {
 	const { currentQuery } = useQueryBuilder();
 	const { handleChangeQueryData } = useQueryOperations({
@@ -24,6 +27,7 @@ function MetricNameSearch(): JSX.Element {
 		query: currentQuery.builder.queryData[0],
 		entityVersion: '',
 	});
+	const [, setSearchParams] = useSearchParams();
 
 	const [isPopoverOpen, setIsPopoverOpen] = useState<boolean>(false);
 	const [searchString, setSearchString] = useState<string>('');
@@ -66,7 +70,7 @@ function MetricNameSearch(): JSX.Element {
 
 	const handleSelect = useCallback(
 		(selectedMetricName: string): void => {
-			handleChangeQueryData('filters', {
+			const newFilter = {
 				items: [
 					...currentQuery.builder.queryData[0].filters.items,
 					{
@@ -81,10 +85,26 @@ function MetricNameSearch(): JSX.Element {
 					},
 				],
 				op: 'AND',
+			};
+			const compositeQuery = {
+				...currentQuery,
+				builder: {
+					...currentQuery.builder,
+					queryData: [
+						{
+							...currentQuery.builder.queryData[0],
+							filters: newFilter,
+						},
+					],
+				},
+			};
+			handleChangeQueryData('filters', newFilter);
+			setSearchParams({
+				[COMPOSITE_QUERY_KEY]: JSON.stringify(compositeQuery),
 			});
 			setIsPopoverOpen(false);
 		},
-		[currentQuery.builder.queryData, handleChangeQueryData],
+		[currentQuery, handleChangeQueryData, setSearchParams],
 	);
 
 	const metricNameFilterValues = useMemo(

frontend/src/container/MetricsExplorer/Summary/MetricTypeSearch.tsx

@@ -4,8 +4,13 @@ import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useQueryOperations } from 'hooks/queryBuilder/useQueryBuilderOperations';
 import { Search } from 'lucide-react';
 import { useCallback, useMemo, useState } from 'react';
+import { useSearchParams } from 'react-router-dom-v5-compat';
 
-import { METRIC_TYPE_LABEL_MAP, METRIC_TYPE_VALUES_MAP } from './constants';
+import {
+	COMPOSITE_QUERY_KEY,
+	METRIC_TYPE_LABEL_MAP,
+	METRIC_TYPE_VALUES_MAP,
+} from './constants';
 
 function MetricTypeSearch(): JSX.Element {
 	const { currentQuery } = useQueryBuilder();
@@ -15,6 +20,7 @@ function MetricTypeSearch(): JSX.Element {
 		entityVersion: '',
 	});
 
+	const [, setSearchParams] = useSearchParams();
 	const [isPopoverOpen, setIsPopoverOpen] = useState<boolean>(false);
 
 	const menuItems = useMemo(
@@ -34,7 +40,7 @@ function MetricTypeSearch(): JSX.Element {
 	const handleSelect = useCallback(
 		(selectedMetricType: string): void => {
 			if (selectedMetricType !== 'all') {
-				handleChangeQueryData('filters', {
+				const newFilter = {
 					items: [
 						...currentQuery.builder.queryData[0].filters.items,
 						{
@@ -49,18 +55,50 @@ function MetricTypeSearch(): JSX.Element {
 						},
 					],
 					op: 'AND',
+				};
+				const compositeQuery = {
+					...currentQuery,
+					builder: {
+						...currentQuery.builder,
+						queryData: [
+							{
+								...currentQuery.builder.queryData[0],
+								filters: newFilter,
+							},
+						],
+					},
+				};
+				handleChangeQueryData('filters', newFilter);
+				setSearchParams({
+					[COMPOSITE_QUERY_KEY]: JSON.stringify(compositeQuery),
 				});
 			} else {
-				handleChangeQueryData('filters', {
+				const newFilter = {
 					items: currentQuery.builder.queryData[0].filters.items.filter(
 						(item) => item.id !== 'metric_type',
 					),
 					op: 'AND',
+				};
+				const compositeQuery = {
+					...currentQuery,
+					builder: {
+						...currentQuery.builder,
+						queryData: [
+							{
+								...currentQuery.builder.queryData[0],
+								filters: newFilter,
+							},
+						],
+					},
+				};
+				handleChangeQueryData('filters', newFilter);
+				setSearchParams({
+					[COMPOSITE_QUERY_KEY]: JSON.stringify(compositeQuery),
 				});
 			}
 			setIsPopoverOpen(false);
 		},
-		[currentQuery.builder.queryData, handleChangeQueryData],
+		[currentQuery, handleChangeQueryData, setSearchParams],
 	);
 
 	const menu = (

frontend/src/container/MetricsExplorer/Summary/MetricsSearch.tsx

@@ -1,32 +1,13 @@
-import { Select, Tooltip } from 'antd';
+import { Tooltip } from 'antd';
 import QueryBuilderSearch from 'container/QueryBuilder/filters/QueryBuilderSearch';
 import DateTimeSelectionV2 from 'container/TopNav/DateTimeSelectionV2';
 import { HardHat, Info } from 'lucide-react';
 
-import { TREEMAP_VIEW_OPTIONS } from './constants';
 import { MetricsSearchProps } from './types';
 
-function MetricsSearch({
-	query,
-	onChange,
-	heatmapView,
-	setHeatmapView,
-}: MetricsSearchProps): JSX.Element {
+function MetricsSearch({ query, onChange }: MetricsSearchProps): JSX.Element {
 	return (
 		<div className="metrics-search-container">
-			<div className="metrics-search-options">
-				<Select
-					style={{ width: 140 }}
-					options={TREEMAP_VIEW_OPTIONS}
-					value={heatmapView}
-					onChange={setHeatmapView}
-				/>
-				<DateTimeSelectionV2
-					showAutoRefresh={false}
-					showRefreshText={false}
-					hideShareModal
-				/>
-			</div>
 			<div className="qb-search-container">
 				<Tooltip
 					title="Use filters to refine metrics based on attributes. Example: service_name=api - Shows all metrics associated with the API service"
@@ -41,6 +22,13 @@ function MetricsSearch({
 					isMetricsExplorer
 				/>
 			</div>
+			<div className="metrics-search-options">
+				<DateTimeSelectionV2
+					showAutoRefresh={false}
+					showRefreshText={false}
+					hideShareModal
+				/>
+			</div>
 		</div>
 	);
 }

frontend/src/container/MetricsExplorer/Summary/MetricsTreemap.tsx

@@ -1,6 +1,6 @@
 import { Group } from '@visx/group';
 import { Treemap } from '@visx/hierarchy';
-import { Empty, Skeleton, Tooltip, Typography } from 'antd';
+import { Empty, Select, Skeleton, Tooltip, Typography } from 'antd';
 import { stratify, treemapBinary } from 'd3-hierarchy';
 import { Info } from 'lucide-react';
 import { useMemo } from 'react';
@@ -10,6 +10,7 @@ import {
 	TREEMAP_HEIGHT,
 	TREEMAP_MARGINS,
 	TREEMAP_SQUARE_PADDING,
+	TREEMAP_VIEW_OPTIONS,
 } from './constants';
 import { MetricsTreemapProps, TreemapTile, TreemapViewType } from './types';
 import {
@@ -24,6 +25,7 @@ function MetricsTreemap({
 	isLoading,
 	isError,
 	openMetricDetails,
+	setHeatmapView,
 }: MetricsTreemapProps): JSX.Element {
 	const { width: windowWidth } = useWindowSize();
 
@@ -55,7 +57,10 @@ function MetricsTreemap({
 	if (isLoading) {
 		return (
 			<div data-testid="metrics-treemap-loading-state">
-				<Skeleton style={{ width: treemapWidth, height: TREEMAP_HEIGHT }} active />
+				<Skeleton
+					style={{ width: treemapWidth, height: TREEMAP_HEIGHT + 55 }}
+					active
+				/>
 			</div>
 		);
 	}
@@ -90,13 +95,20 @@ function MetricsTreemap({
 			data-testid="metrics-treemap-container"
 		>
 			<div className="metrics-treemap-title">
-				<Typography.Title level={4}>Proportion View</Typography.Title>
-				<Tooltip
-					title="The treemap displays the proportion of samples/timeseries in the selected time range. Each tile represents a unique metric, and its size indicates the percentage of samples/timeseries it contributes to the total."
-					placement="right"
-				>
-					<Info size={16} />
-				</Tooltip>
+				<div className="metrics-treemap-title-left">
+					<Typography.Title level={4}>Proportion View</Typography.Title>
+					<Tooltip
+						title="The treemap displays the proportion of samples/timeseries in the selected time range. Each tile represents a unique metric, and its size indicates the percentage of samples/timeseries it contributes to the total."
+						placement="right"
+					>
+						<Info size={16} />
+					</Tooltip>
+				</div>
+				<Select
+					options={TREEMAP_VIEW_OPTIONS}
+					value={viewType}
+					onChange={setHeatmapView}
+				/>
 			</div>
 			<svg
 				width={treemapWidth}

frontend/src/container/MetricsExplorer/Summary/Summary.styles.scss

@@ -21,9 +21,22 @@
 		}
 	}
 
+	.metrics-treemap-title {
+		justify-content: space-between;
+
+		.metrics-treemap-title-left {
+			display: flex;
+			align-items: center;
+			gap: 8px;
+		}
+
+		.ant-select {
+			width: 140px;
+		}
+	}
+
 	.metrics-search-container {
 		display: flex;
-		flex-direction: column;
 		gap: 16px;
 
 		.metrics-search-options {
@@ -35,6 +48,7 @@
 			display: flex;
 			align-items: center;
 			gap: 8px;
+			flex: 1;
 
 			.lucide-info {
 				cursor: pointer;

frontend/src/container/MetricsExplorer/Summary/Summary.tsx

@@ -11,6 +11,7 @@ import { useShareBuilderUrl } from 'hooks/queryBuilder/useShareBuilderUrl';
 import ErrorBoundaryFallback from 'pages/ErrorBoundaryFallback/ErrorBoundaryFallback';
 import { useCallback, useMemo, useState } from 'react';
 import { useSelector } from 'react-redux';
+import { useSearchParams } from 'react-router-dom-v5-compat';
 import { AppState } from 'store/reducers';
 import { TagFilter } from 'types/api/queryBuilder/queryBuilderData';
 import { DataSource } from 'types/common/queryBuilder';
@@ -18,6 +19,12 @@ import { GlobalReducer } from 'types/reducer/globalTime';
 
 import InspectModal from '../Inspect';
 import MetricDetails from '../MetricDetails';
+import {
+	COMPOSITE_QUERY_KEY,
+	IS_INSPECT_MODAL_OPEN_KEY,
+	IS_METRIC_DETAILS_OPEN_KEY,
+	SELECTED_METRIC_NAME_KEY,
+} from './constants';
 import MetricsSearch from './MetricsSearch';
 import MetricsTable from './MetricsTable';
 import MetricsTreemap from './MetricsTreemap';
@@ -40,10 +47,16 @@ function Summary(): JSX.Element {
 	const [heatmapView, setHeatmapView] = useState<TreemapViewType>(
 		TreemapViewType.TIMESERIES,
 	);
-	const [isMetricDetailsOpen, setIsMetricDetailsOpen] = useState(false);
-	const [isInspectModalOpen, setIsInspectModalOpen] = useState(false);
-	const [selectedMetricName, setSelectedMetricName] = useState<string | null>(
-		null,
+
+	const [searchParams, setSearchParams] = useSearchParams();
+	const [isMetricDetailsOpen, setIsMetricDetailsOpen] = useState(
+		() => searchParams.get(IS_METRIC_DETAILS_OPEN_KEY) === 'true' || false,
+	);
+	const [isInspectModalOpen, setIsInspectModalOpen] = useState(
+		() => searchParams.get(IS_INSPECT_MODAL_OPEN_KEY) === 'true' || false,
+	);
+	const [selectedMetricName, setSelectedMetricName] = useState(
+		() => searchParams.get(SELECTED_METRIC_NAME_KEY) || null,
 	);
 
 	const { maxTime, minTime } = useSelector<AppState, GlobalReducer>(
@@ -75,13 +88,25 @@ function Summary(): JSX.Element {
 
 	useShareBuilderUrl(defaultQuery);
 
+	// This is used to avoid the filters from being serialized with the id
+	const currentQueryFiltersString = useMemo(() => {
+		const filters = currentQuery?.builder?.queryData[0]?.filters;
+		if (!filters) return '';
+		const filtersWithoutId = {
+			...filters,
+			items: filters.items.map(({ id, ...rest }) => rest),
+		};
+		return JSON.stringify(filtersWithoutId);
+	}, [currentQuery]);
+
 	const queryFilters = useMemo(
 		() =>
 			currentQuery?.builder?.queryData[0]?.filters || {
 				items: [],
 				op: 'and',
 			},
-		[currentQuery],
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+		[currentQueryFiltersString],
 	);
 
 	const { handleChangeQueryData } = useQueryOperations({
@@ -145,9 +170,24 @@ function Summary(): JSX.Element {
 	const handleFilterChange = useCallback(
 		(value: TagFilter) => {
 			handleChangeQueryData('filters', value);
+			const compositeQuery = {
+				...currentQuery,
+				builder: {
+					...currentQuery.builder,
+					queryData: [
+						{
+							...currentQuery.builder.queryData[0],
+							filters: value,
+						},
+					],
+				},
+			};
+			setSearchParams({
+				[COMPOSITE_QUERY_KEY]: JSON.stringify(compositeQuery),
+			});
 			setCurrentPage(1);
 		},
-		[handleChangeQueryData],
+		[handleChangeQueryData, currentQuery, setSearchParams],
 	);
 
 	const updatedCurrentQuery = useMemo(
@@ -184,17 +224,29 @@ function Summary(): JSX.Element {
 	const openMetricDetails = (metricName: string): void => {
 		setSelectedMetricName(metricName);
 		setIsMetricDetailsOpen(true);
+		setSearchParams({
+			[IS_METRIC_DETAILS_OPEN_KEY]: 'true',
+			[SELECTED_METRIC_NAME_KEY]: metricName,
+		});
 	};
 
 	const closeMetricDetails = (): void => {
 		setSelectedMetricName(null);
 		setIsMetricDetailsOpen(false);
+		setSearchParams({
+			[IS_METRIC_DETAILS_OPEN_KEY]: 'false',
+			[SELECTED_METRIC_NAME_KEY]: '',
+		});
 	};
 
 	const openInspectModal = (metricName: string): void => {
 		setSelectedMetricName(metricName);
 		setIsInspectModalOpen(true);
 		setIsMetricDetailsOpen(false);
+		setSearchParams({
+			[IS_INSPECT_MODAL_OPEN_KEY]: 'true',
+			[SELECTED_METRIC_NAME_KEY]: metricName,
+		});
 	};
 
 	const closeInspectModal = (): void => {
@@ -204,23 +256,23 @@ function Summary(): JSX.Element {
 		});
 		setIsInspectModalOpen(false);
 		setSelectedMetricName(null);
+		setSearchParams({
+			[IS_INSPECT_MODAL_OPEN_KEY]: 'false',
+			[SELECTED_METRIC_NAME_KEY]: '',
+		});
 	};
 
 	return (
 		<Sentry.ErrorBoundary fallback={<ErrorBoundaryFallback />}>
 			<div className="metrics-explorer-summary-tab">
-				<MetricsSearch
-					query={searchQuery}
-					onChange={handleFilterChange}
-					heatmapView={heatmapView}
-					setHeatmapView={setHeatmapView}
-				/>
+				<MetricsSearch query={searchQuery} onChange={handleFilterChange} />
 				<MetricsTreemap
 					data={treeMapData?.payload}
 					isLoading={isTreeMapLoading || isTreeMapFetching}
 					isError={isProportionViewError}
 					viewType={heatmapView}
 					openMetricDetails={openMetricDetails}
+					setHeatmapView={setHeatmapView}
 				/>
 				<MetricsTable
 					isLoading={isMetricsLoading || isMetricsFetching}

frontend/src/container/MetricsExplorer/Summary/__tests__/MetricsTable.test.tsx

@@ -1,5 +1,6 @@
 import { fireEvent, render, screen } from '@testing-library/react';
 import * as useGetMetricsListFilterValues from 'hooks/metricsExplorer/useGetMetricsListFilterValues';
+import * as useQueryBuilderOperationsHooks from 'hooks/queryBuilder/useQueryBuilderOperations';
 import { Provider } from 'react-redux';
 import { MemoryRouter } from 'react-router-dom';
 import store from 'store';
@@ -28,7 +29,23 @@ const mockData: MetricsListItemRowData[] = [
 	},
 ];
 
+jest.mock('react-router-dom-v5-compat', () => {
+	const actual = jest.requireActual('react-router-dom-v5-compat');
+	return {
+		...actual,
+		useSearchParams: jest.fn().mockReturnValue([{}, jest.fn()]),
+		useNavigationType: (): any => 'PUSH',
+	};
+});
 describe('MetricsTable', () => {
+	beforeEach(() => {
+		jest
+			.spyOn(useQueryBuilderOperationsHooks, 'useQueryOperations')
+			.mockReturnValue({
+				handleChangeQueryData: jest.fn(),
+			} as any);
+	});
+
 	jest
 		.spyOn(useGetMetricsListFilterValues, 'useGetMetricsListFilterValues')
 		.mockReturnValue({

frontend/src/container/MetricsExplorer/Summary/__tests__/MetricsTreemap.test.tsx

@@ -55,6 +55,7 @@ describe('MetricsTreemap', () => {
 						}}
 						openMetricDetails={jest.fn()}
 						viewType={TreemapViewType.SAMPLES}
+						setHeatmapView={jest.fn()}
 					/>
 				</Provider>
 			</MemoryRouter>,
@@ -79,6 +80,7 @@ describe('MetricsTreemap', () => {
 						}}
 						openMetricDetails={jest.fn()}
 						viewType={TreemapViewType.SAMPLES}
+						setHeatmapView={jest.fn()}
 					/>
 				</Provider>
 			</MemoryRouter>,
@@ -105,6 +107,7 @@ describe('MetricsTreemap', () => {
 						}}
 						openMetricDetails={jest.fn()}
 						viewType={TreemapViewType.SAMPLES}
+						setHeatmapView={jest.fn()}
 					/>
 				</Provider>
 			</MemoryRouter>,
@@ -128,6 +131,7 @@ describe('MetricsTreemap', () => {
 						data={null}
 						openMetricDetails={jest.fn()}
 						viewType={TreemapViewType.SAMPLES}
+						setHeatmapView={jest.fn()}
 					/>
 				</Provider>
 			</MemoryRouter>,

frontend/src/container/MetricsExplorer/Summary/__tests__/Summary.test.tsx

@@ -0,0 +1,150 @@
+import { render, screen } from '@testing-library/react';
+import { MetricType } from 'api/metricsExplorer/getMetricsList';
+import ROUTES from 'constants/routes';
+import * as useGetMetricsListHooks from 'hooks/metricsExplorer/useGetMetricsList';
+import * as useGetMetricsTreeMapHooks from 'hooks/metricsExplorer/useGetMetricsTreeMap';
+import { QueryClient, QueryClientProvider } from 'react-query';
+import { Provider } from 'react-redux';
+import { useSearchParams } from 'react-router-dom-v5-compat';
+import store from 'store';
+
+import Summary from '../Summary';
+import { TreemapViewType } from '../types';
+
+jest.mock('uplot', () => {
+	const paths = {
+		spline: jest.fn(),
+		bars: jest.fn(),
+	};
+	const uplotMock = jest.fn(() => ({
+		paths,
+	}));
+	return {
+		paths,
+		default: uplotMock,
+	};
+});
+jest.mock('d3-hierarchy', () => ({
+	stratify: jest.fn().mockReturnValue({
+		id: jest.fn().mockReturnValue({
+			parentId: jest.fn().mockReturnValue(
+				jest.fn().mockReturnValue({
+					sum: jest.fn().mockReturnValue({
+						descendants: jest.fn().mockReturnValue([]),
+						eachBefore: jest.fn().mockReturnValue([]),
+					}),
+				}),
+			),
+		}),
+	}),
+	treemapBinary: jest.fn(),
+}));
+jest.mock('react-use', () => ({
+	useWindowSize: jest.fn().mockReturnValue({ width: 1000, height: 1000 }),
+}));
+jest.mock('react-router-dom-v5-compat', () => {
+	const actual = jest.requireActual('react-router-dom-v5-compat');
+	return {
+		...actual,
+		useSearchParams: jest.fn(),
+		useNavigationType: (): any => 'PUSH',
+	};
+});
+jest.mock('react-router-dom', () => ({
+	...jest.requireActual('react-router-dom'),
+	useLocation: (): { pathname: string } => ({
+		pathname: `${ROUTES.METRICS_EXPLORER_BASE}`,
+	}),
+}));
+
+const queryClient = new QueryClient();
+const mockMetricName = 'test-metric';
+jest.spyOn(useGetMetricsListHooks, 'useGetMetricsList').mockReturnValue({
+	data: {
+		payload: {
+			status: 'success',
+			data: {
+				metrics: [
+					{
+						metric_name: mockMetricName,
+						description: 'description for a test metric',
+						type: MetricType.GAUGE,
+						unit: 'count',
+						lastReceived: '1715702400',
+						[TreemapViewType.TIMESERIES]: 100,
+						[TreemapViewType.SAMPLES]: 100,
+					},
+				],
+			},
+		},
+	},
+	isError: false,
+	isLoading: false,
+} as any);
+jest.spyOn(useGetMetricsTreeMapHooks, 'useGetMetricsTreeMap').mockReturnValue({
+	data: {
+		payload: {
+			status: 'success',
+			data: {
+				[TreemapViewType.TIMESERIES]: [
+					{
+						metric_name: mockMetricName,
+						percentage: 100,
+						total_value: 100,
+					},
+				],
+				[TreemapViewType.SAMPLES]: [
+					{
+						metric_name: mockMetricName,
+						percentage: 100,
+					},
+				],
+			},
+		},
+	},
+	isError: false,
+	isLoading: false,
+} as any);
+const mockSetSearchParams = jest.fn();
+
+describe('Summary', () => {
+	it('persists inspect modal open state across page refresh', () => {
+		(useSearchParams as jest.Mock).mockReturnValue([
+			new URLSearchParams({
+				isInspectModalOpen: 'true',
+				selectedMetricName: 'test-metric',
+			}),
+			mockSetSearchParams,
+		]);
+
+		render(
+			<QueryClientProvider client={queryClient}>
+				<Provider store={store}>
+					<Summary />
+				</Provider>
+			</QueryClientProvider>,
+		);
+
+		expect(screen.queryByText('Proportion View')).not.toBeInTheDocument();
+	});
+
+	it('persists metric details modal state across page refresh', () => {
+		(useSearchParams as jest.Mock).mockReturnValue([
+			new URLSearchParams({
+				isMetricDetailsOpen: 'true',
+				selectedMetricName: mockMetricName,
+			}),
+			mockSetSearchParams,
+		]);
+
+		render(
+			<QueryClientProvider client={queryClient}>
+				<Provider store={store}>
+					<Summary />
+				</Provider>
+			</QueryClientProvider>,
+		);
+
+		expect(screen.queryByText('Proportion View')).not.toBeInTheDocument();
+	});
+});

frontend/src/container/MetricsExplorer/Summary/constants.ts

@@ -32,3 +32,8 @@ export const METRIC_TYPE_VALUES_MAP = {
 	[MetricType.SUMMARY]: 'Summary',
 	[MetricType.EXPONENTIAL_HISTOGRAM]: 'ExponentialHistogram',
 };
+
+export const IS_METRIC_DETAILS_OPEN_KEY = 'isMetricDetailsOpen';
+export const IS_INSPECT_MODAL_OPEN_KEY = 'isInspectModalOpen';
+export const SELECTED_METRIC_NAME_KEY = 'selectedMetricName';
+export const COMPOSITE_QUERY_KEY = 'compositeQuery';

frontend/src/container/MetricsExplorer/Summary/types.ts

@@ -20,8 +20,6 @@ export interface MetricsTableProps {
 export interface MetricsSearchProps {
 	query: IBuilderQuery;
 	onChange: (value: TagFilter) => void;
-	heatmapView: TreemapViewType;
-	setHeatmapView: (value: TreemapViewType) => void;
 }
 
 export interface MetricsTreemapProps {
@@ -30,6 +28,7 @@ export interface MetricsTreemapProps {
 	isError: boolean;
 	viewType: TreemapViewType;
 	openMetricDetails: (metricName: string) => void;
+	setHeatmapView: (value: TreemapViewType) => void;
 }
 
 export interface OrderByPayload {

frontend/src/container/NewDashboard/DashboardSettings/Variables/VariableItem/DynamicVariable/DynamicVariable.styles.scss

@@ -1,42 +0,0 @@
-.dynamic-variable-container {
-	display: grid;
-	grid-template-columns: 1fr 32px 200px;
-	gap: 32px;
-	align-items: center;
-	width: 100%;
-	margin: 24px 0;
-
-	.ant-select {
-		.ant-select-selector {
-			border-radius: 4px;
-			border: 1px solid var(--bg-slate-400);
-		}
-	}
-
-	.ant-input {
-		border-radius: 4px;
-		border: 1px solid var(--bg-slate-400);
-		max-width: 300px;
-	}
-
-	.dynamic-variable-from-text {
-		font-family: 'Space Mono';
-		font-size: 13px;
-		font-weight: 500;
-		white-space: nowrap;
-	}
-}
-
-.lightMode {
-	.dynamic-variable-container {
-		.ant-select {
-			.ant-select-selector {
-				border: 1px solid var(--bg-vanilla-300);
-			}
-		}
-
-		.ant-input {
-			border: 1px solid var(--bg-vanilla-300);
-		}
-	}
-}

frontend/src/container/NewDashboard/DashboardSettings/Variables/VariableItem/DynamicVariable/DynamicVariable.tsx

@@ -1,179 +0,0 @@
-import './DynamicVariable.styles.scss';
-
-import { Select, Typography } from 'antd';
-import CustomSelect from 'components/NewSelect/CustomSelect';
-import { DEBOUNCE_DELAY } from 'constants/queryBuilderFilterConfig';
-import { useGetFieldKeys } from 'hooks/dynamicVariables/useGetFieldKeys';
-import useDebounce from 'hooks/useDebounce';
-import {
-	Dispatch,
-	SetStateAction,
-	useCallback,
-	useEffect,
-	useMemo,
-	useState,
-} from 'react';
-import { FieldKey } from 'types/api/dynamicVariables/getFieldKeys';
-
-enum AttributeSource {
-	ALL_SOURCES = 'All Sources',
-	LOGS = 'Logs',
-	METRICS = 'Metrics',
-	TRACES = 'Traces',
-}
-
-function DynamicVariable({
-	setDynamicVariablesSelectedValue,
-	dynamicVariablesSelectedValue,
-}: {
-	setDynamicVariablesSelectedValue: Dispatch<
-		SetStateAction<
-			| {
-					name: string;
-					value: string;
-			  }
-			| undefined
-		>
-	>;
-	dynamicVariablesSelectedValue:
-		| {
-				name: string;
-				value: string;
-		  }
-		| undefined;
-}): JSX.Element {
-	const sources = [
-		AttributeSource.ALL_SOURCES,
-		AttributeSource.LOGS,
-		AttributeSource.TRACES,
-		AttributeSource.METRICS,
-	];
-
-	const [attributeSource, setAttributeSource] = useState<AttributeSource>();
-	const [attributes, setAttributes] = useState<Record<string, FieldKey[]>>({});
-	const [selectedAttribute, setSelectedAttribute] = useState<string>();
-	const [apiSearchText, setApiSearchText] = useState<string>('');
-
-	const debouncedApiSearchText = useDebounce(apiSearchText, DEBOUNCE_DELAY);
-
-	const [filteredAttributes, setFilteredAttributes] = useState<
-		Record<string, FieldKey[]>
-	>({});
-
-	useEffect(() => {
-		if (dynamicVariablesSelectedValue?.name) {
-			setSelectedAttribute(dynamicVariablesSelectedValue.name);
-		}
-
-		if (dynamicVariablesSelectedValue?.value) {
-			setAttributeSource(dynamicVariablesSelectedValue.value as AttributeSource);
-		}
-	}, [
-		dynamicVariablesSelectedValue?.name,
-		dynamicVariablesSelectedValue?.value,
-	]);
-
-	const { data, error, isLoading, refetch } = useGetFieldKeys({
-		signal:
-			attributeSource === AttributeSource.ALL_SOURCES
-				? undefined
-				: (attributeSource?.toLowerCase() as 'traces' | 'logs' | 'metrics'),
-		name: debouncedApiSearchText,
-	});
-
-	const isComplete = useMemo(() => data?.payload?.complete === true, [data]);
-
-	useEffect(() => {
-		if (data) {
-			const newAttributes = data.payload?.keys ?? {};
-			setAttributes(newAttributes);
-			setFilteredAttributes(newAttributes);
-		}
-	}, [data]);
-
-	// refetch when attributeSource changes
-	useEffect(() => {
-		if (attributeSource) {
-			refetch();
-		}
-	}, [attributeSource, refetch, debouncedApiSearchText]);
-
-	// Handle search based on whether we have complete data or not
-	const handleSearch = useCallback(
-		(text: string) => {
-			if (isComplete) {
-				// If complete is true, do client-side filtering
-				if (!text) {
-					setFilteredAttributes(attributes);
-					return;
-				}
-
-				const filtered: Record<string, FieldKey[]> = {};
-				Object.keys(attributes).forEach((key) => {
-					if (key.toLowerCase().includes(text.toLowerCase())) {
-						filtered[key] = attributes[key];
-					}
-				});
-				setFilteredAttributes(filtered);
-			} else {
-				// If complete is false, debounce the API call
-				setApiSearchText(text);
-			}
-		},
-		[attributes, isComplete],
-	);
-
-	// update setDynamicVariablesSelectedValue with debounce when attribute and source is selected
-	useEffect(() => {
-		if (selectedAttribute || attributeSource) {
-			setDynamicVariablesSelectedValue({
-				name: selectedAttribute || dynamicVariablesSelectedValue?.name || '',
-				value:
-					attributeSource ||
-					dynamicVariablesSelectedValue?.value ||
-					AttributeSource.ALL_SOURCES,
-			});
-		}
-	}, [
-		selectedAttribute,
-		attributeSource,
-		setDynamicVariablesSelectedValue,
-		dynamicVariablesSelectedValue?.name,
-		dynamicVariablesSelectedValue?.value,
-	]);
-
-	const errorMessage = (error as any)?.message;
-	return (
-		<div className="dynamic-variable-container">
-			<CustomSelect
-				placeholder="Select an Attribute"
-				options={Object.keys(filteredAttributes).map((key) => ({
-					label: key,
-					value: key,
-				}))}
-				loading={isLoading}
-				status={errorMessage ? 'error' : undefined}
-				onChange={(value): void => {
-					setSelectedAttribute(value);
-				}}
-				showSearch
-				errorMessage={errorMessage as any}
-				value={selectedAttribute || dynamicVariablesSelectedValue?.name}
-				onSearch={handleSearch}
-				onRetry={(): void => {
-					refetch();
-				}}
-			/>
-			<Typography className="dynamic-variable-from-text">from</Typography>
-			<Select
-				placeholder="Source"
-				defaultValue={AttributeSource.ALL_SOURCES}
-				options={sources.map((source) => ({ label: source, value: source }))}
-				onChange={(value): void => setAttributeSource(value as AttributeSource)}
-				value={attributeSource || dynamicVariablesSelectedValue?.value}
-			/>
-		</div>
-	);
-}
-
-export default DynamicVariable;

frontend/src/container/NewDashboard/DashboardSettings/Variables/VariableItem/DynamicVariable/__test__/DynamicVariable.test.tsx

@@ -1,376 +0,0 @@
-/* eslint-disable react/jsx-props-no-spreading */
-/* eslint-disable sonarjs/no-duplicate-string */
-import { fireEvent, render, screen, waitFor } from '@testing-library/react';
-import { useGetFieldKeys } from 'hooks/dynamicVariables/useGetFieldKeys';
-
-import DynamicVariable from '../DynamicVariable';
-
-// Mock scrollIntoView since it's not available in JSDOM
-window.HTMLElement.prototype.scrollIntoView = jest.fn();
-
-// Mock dependencies
-jest.mock('hooks/dynamicVariables/useGetFieldKeys', () => ({
-	useGetFieldKeys: jest.fn(),
-}));
-
-jest.mock('hooks/useDebounce', () => ({
-	__esModule: true,
-	default: (value: any): any => value, // Return the same value without debouncing for testing
-}));
-
-describe('DynamicVariable Component', () => {
-	const mockSetDynamicVariablesSelectedValue = jest.fn();
-	const ATTRIBUTE_PLACEHOLDER = 'Select an Attribute';
-	const LOADING_TEXT = 'We are updating the values...';
-	const DEFAULT_PROPS = {
-		setDynamicVariablesSelectedValue: mockSetDynamicVariablesSelectedValue,
-		dynamicVariablesSelectedValue: undefined,
-	};
-
-	const mockFieldKeysResponse = {
-		payload: {
-			keys: {
-				'service.name': [],
-				'http.status_code': [],
-				duration: [],
-			},
-			complete: true,
-		},
-		statusCode: 200,
-	};
-
-	beforeEach(() => {
-		jest.clearAllMocks();
-
-		// Default mock implementation
-		(useGetFieldKeys as jest.Mock).mockReturnValue({
-			data: mockFieldKeysResponse,
-			error: null,
-			isLoading: false,
-			refetch: jest.fn(),
-		});
-	});
-
-	// Helper function to get the attribute select element
-	const getAttributeSelect = (): HTMLElement =>
-		screen.getAllByRole('combobox')[0];
-
-	// Helper function to get the source select element
-	const getSourceSelect = (): HTMLElement => screen.getAllByRole('combobox')[1];
-
-	it('renders with default state', () => {
-		render(<DynamicVariable {...DEFAULT_PROPS} />);
-
-		// Check for main components
-		expect(screen.getByText(ATTRIBUTE_PLACEHOLDER)).toBeInTheDocument();
-		expect(screen.getByText('All Sources')).toBeInTheDocument();
-		expect(screen.getByText('from')).toBeInTheDocument();
-	});
-
-	it('uses existing values from dynamicVariablesSelectedValue prop', () => {
-		const selectedValue = {
-			name: 'service.name',
-			value: 'Logs',
-		};
-
-		render(
-			<DynamicVariable
-				setDynamicVariablesSelectedValue={mockSetDynamicVariablesSelectedValue}
-				dynamicVariablesSelectedValue={selectedValue}
-			/>,
-		);
-
-		// Verify values are set
-		expect(screen.getByText('service.name')).toBeInTheDocument();
-		expect(screen.getByText('Logs')).toBeInTheDocument();
-	});
-
-	it('shows loading state when fetching data', () => {
-		(useGetFieldKeys as jest.Mock).mockReturnValue({
-			data: null,
-			error: null,
-			isLoading: true,
-			refetch: jest.fn(),
-		});
-
-		render(<DynamicVariable {...DEFAULT_PROPS} />);
-
-		// Open the CustomSelect dropdown
-		const attributeSelectElement = getAttributeSelect();
-		fireEvent.mouseDown(attributeSelectElement);
-
-		// Should show loading state
-		expect(screen.getByText(LOADING_TEXT)).toBeInTheDocument();
-	});
-
-	it('shows error message when API fails', () => {
-		const errorMessage = 'Failed to fetch field keys';
-
-		(useGetFieldKeys as jest.Mock).mockReturnValue({
-			data: null,
-			error: { message: errorMessage },
-			isLoading: false,
-			refetch: jest.fn(),
-		});
-
-		render(<DynamicVariable {...DEFAULT_PROPS} />);
-
-		// Open the CustomSelect dropdown
-		const attributeSelectElement = getAttributeSelect();
-		fireEvent.mouseDown(attributeSelectElement);
-
-		// Should show error message
-		expect(screen.getByText(errorMessage)).toBeInTheDocument();
-	});
-
-	it('updates filteredAttributes when data is loaded', async () => {
-		render(<DynamicVariable {...DEFAULT_PROPS} />);
-
-		// Open the CustomSelect dropdown
-		const attributeSelectElement = getAttributeSelect();
-		fireEvent.mouseDown(attributeSelectElement);
-
-		// Wait for options to appear in the dropdown
-		await waitFor(() => {
-			// Looking for option-content elements inside the CustomSelect dropdown
-			const options = document.querySelectorAll('.option-content');
-			expect(options.length).toBeGreaterThan(0);
-
-			// Check if all expected options are present
-			let foundServiceName = false;
-			let foundHttpStatusCode = false;
-			let foundDuration = false;
-
-			options.forEach((option) => {
-				const text = option.textContent?.trim();
-				if (text === 'service.name') foundServiceName = true;
-				if (text === 'http.status_code') foundHttpStatusCode = true;
-				if (text === 'duration') foundDuration = true;
-			});
-
-			expect(foundServiceName).toBe(true);
-			expect(foundHttpStatusCode).toBe(true);
-			expect(foundDuration).toBe(true);
-		});
-	});
-
-	it('calls setDynamicVariablesSelectedValue when attribute is selected', async () => {
-		render(<DynamicVariable {...DEFAULT_PROPS} />);
-
-		// Open the attribute dropdown
-		const attributeSelectElement = getAttributeSelect();
-		fireEvent.mouseDown(attributeSelectElement);
-
-		// Wait for options to appear, then click on service.name
-		await waitFor(() => {
-			// Need to find the option-item containing service.name
-			const serviceNameOption = screen.getByText('service.name');
-			expect(serviceNameOption).not.toBeNull();
-			expect(serviceNameOption?.textContent).toBe('service.name');
-
-			// Click on the option-item that contains service.name
-			const optionElement = serviceNameOption?.closest('.option-item');
-			if (optionElement) {
-				fireEvent.click(optionElement);
-			}
-		});
-
-		// Check if the setter was called with the correct value
-		expect(mockSetDynamicVariablesSelectedValue).toHaveBeenCalledWith({
-			name: 'service.name',
-			value: 'All Sources',
-		});
-	});
-
-	it('calls setDynamicVariablesSelectedValue when source is selected', () => {
-		const mockRefetch = jest.fn();
-
-		(useGetFieldKeys as jest.Mock).mockReturnValue({
-			data: mockFieldKeysResponse,
-			error: null,
-			isLoading: false,
-			refetch: mockRefetch,
-		});
-
-		render(<DynamicVariable {...DEFAULT_PROPS} />);
-
-		// Get the Select component
-		const select = screen
-			.getByText('All Sources')
-			.closest('div[class*="ant-select"]');
-		expect(select).toBeInTheDocument();
-
-		// Directly call the onChange handler by simulating the Select's onChange
-		// Find the props.onChange of the Select component and call it directly
-		fireEvent.mouseDown(select as HTMLElement);
-
-		// Use a more specific selector to find the "Logs" option
-		const optionsContainer = document.querySelector(
-			'.rc-virtual-list-holder-inner',
-		);
-		expect(optionsContainer).not.toBeNull();
-
-		// Find the option with Logs text content
-		const logsOption = Array.from(
-			optionsContainer?.querySelectorAll('.ant-select-item-option-content') || [],
-		)
-			.find((element) => element.textContent === 'Logs')
-			?.closest('.ant-select-item-option');
-
-		expect(logsOption).not.toBeNull();
-
-		// Click on it
-		if (logsOption) {
-			fireEvent.click(logsOption);
-		}
-
-		// Check if the setter was called with the correct value
-		expect(mockSetDynamicVariablesSelectedValue).toHaveBeenCalledWith(
-			expect.objectContaining({
-				value: 'Logs',
-			}),
-		);
-	});
-
-	it('filters attributes locally when complete is true', async () => {
-		render(<DynamicVariable {...DEFAULT_PROPS} />);
-
-		// Open the attribute dropdown
-		const attributeSelectElement = getAttributeSelect();
-		fireEvent.mouseDown(attributeSelectElement);
-
-		// Mock the filter function behavior
-		const attributeKeys = Object.keys(mockFieldKeysResponse.payload.keys);
-
-		// Only "http.status_code" should match the filter
-		const expectedFilteredKeys = attributeKeys.filter((key) =>
-			key.includes('http'),
-		);
-
-		// Verify our expected filtering logic
-		expect(expectedFilteredKeys).toContain('http.status_code');
-		expect(expectedFilteredKeys).not.toContain('service.name');
-		expect(expectedFilteredKeys).not.toContain('duration');
-
-		// Now verify the component's filtering ability by inputting the search text
-		const inputElement = screen
-			.getAllByRole('combobox')[0]
-			.querySelector('input');
-		if (inputElement) {
-			fireEvent.change(inputElement, { target: { value: 'http' } });
-		}
-	});
-
-	it('triggers API call when complete is false and search text changes', async () => {
-		const mockRefetch = jest.fn();
-
-		// Set up the mock to indicate that data is not complete
-		// and needs to be fetched from the server
-		(useGetFieldKeys as jest.Mock).mockReturnValue({
-			data: {
-				payload: {
-					keys: {
-						'http.status_code': [],
-					},
-					complete: false, // This indicates server-side filtering is needed
-				},
-			},
-			error: null,
-			isLoading: false,
-			refetch: mockRefetch,
-		});
-
-		// Render with Logs as the initial source
-		render(
-			<DynamicVariable
-				{...DEFAULT_PROPS}
-				dynamicVariablesSelectedValue={{
-					name: '',
-					value: 'Logs',
-				}}
-			/>,
-		);
-
-		// Clear any initial calls
-		mockRefetch.mockClear();
-
-		// Now test the search functionality
-		const attributeSelectElement = getAttributeSelect();
-		fireEvent.mouseDown(attributeSelectElement);
-
-		// Find the input element and simulate typing
-		const inputElement = document.querySelector(
-			'.ant-select-selection-search-input',
-		);
-
-		if (inputElement) {
-			// Simulate typing in the search input
-			fireEvent.change(inputElement, { target: { value: 'http' } });
-
-			// Verify that the input has the correct value
-			expect((inputElement as HTMLInputElement).value).toBe('http');
-
-			// Wait for the effect to run and verify refetch was called
-			await waitFor(
-				() => {
-					expect(mockRefetch).toHaveBeenCalled();
-				},
-				{ timeout: 3000 },
-			); // Increase timeout to give more time for the effect to run
-		}
-	});
-
-	it('triggers refetch when attributeSource changes', async () => {
-		const mockRefetch = jest.fn();
-
-		(useGetFieldKeys as jest.Mock).mockReturnValue({
-			data: mockFieldKeysResponse,
-			error: null,
-			isLoading: false,
-			refetch: mockRefetch,
-		});
-
-		render(<DynamicVariable {...DEFAULT_PROPS} />);
-
-		// Clear any initial calls
-		mockRefetch.mockClear();
-
-		// Find and click on the source select to open dropdown
-		const sourceSelectElement = getSourceSelect();
-		fireEvent.mouseDown(sourceSelectElement);
-
-		// Find and click on the "Metrics" option
-		const metricsOption = screen.getByText('Metrics');
-		fireEvent.click(metricsOption);
-
-		// Wait for the effect to run
-		await waitFor(() => {
-			// Verify that refetch was called after source selection
-			expect(mockRefetch).toHaveBeenCalled();
-		});
-	});
-
-	it('shows retry button when error occurs', () => {
-		const mockRefetch = jest.fn();
-
-		(useGetFieldKeys as jest.Mock).mockReturnValue({
-			data: null,
-			error: { message: 'Failed to fetch field keys' },
-			isLoading: false,
-			refetch: mockRefetch,
-		});
-
-		render(<DynamicVariable {...DEFAULT_PROPS} />);
-
-		// Open the attribute dropdown
-		const attributeSelectElement = getAttributeSelect();
-		fireEvent.mouseDown(attributeSelectElement);
-
-		// Find and click reload icon (retry button)
-		const reloadIcon = screen.getByLabelText('reload');
-		fireEvent.click(reloadIcon);
-
-		// Should trigger refetch
-		expect(mockRefetch).toHaveBeenCalled();
-	});
-});

frontend/src/container/NewDashboard/DashboardSettings/Variables/VariableItem/VariableItem.styles.scss

@@ -100,6 +100,7 @@
 
 			.variable-type-btn-group {
 				display: flex;
+				width: 342px;
 				height: 32px;
 				flex-shrink: 0;
 				border-radius: 2px;
@@ -198,21 +199,6 @@
 			}
 		}
 
-		.default-value-section {
-			display: grid;
-			grid-template-columns: max-content 1fr;
-
-			.default-value-description {
-				color: var(--bg-vanilla-400);
-				font-family: Inter;
-				font-size: 11px;
-				font-style: normal;
-				font-weight: 400;
-				line-height: 18px;
-				letter-spacing: -0.06px;
-			}
-		}
-
 		.variable-textbox-section {
 			justify-content: space-between;
 			margin-bottom: 0;

frontend/src/container/NewDashboard/DashboardSettings/Variables/VariableItem/VariableItem.test.tsx

@@ -0,0 +1,474 @@
+import { QueryClient, QueryClientProvider } from 'react-query';
+import { fireEvent, render, screen, waitFor } from 'tests/test-utils';
+import {
+	IDashboardVariable,
+	TSortVariableValuesType,
+	VariableSortTypeArr,
+} from 'types/api/dashboard/getAll';
+
+import VariableItem from './VariableItem';
+
+// Mock modules
+jest.mock('api/dashboard/variables/dashboardVariablesQuery', () => ({
+	__esModule: true,
+	default: jest.fn().mockResolvedValue({
+		payload: {
+			variableValues: ['value1', 'value2', 'value3'],
+		},
+	}),
+}));
+
+jest.mock('uuid', () => ({
+	v4: jest.fn().mockReturnValue('test-uuid'),
+}));
+
+// Mock functions
+const onCancel = jest.fn();
+const onSave = jest.fn();
+const validateName = jest.fn(() => true);
+
+// Mode constant
+const VARIABLE_MODE = 'ADD';
+
+// Common text constants
+const TEXT = {
+	INCLUDE_ALL_VALUES: 'Include an option for ALL values',
+	ENABLE_MULTI_VALUES: 'Enable multiple values to be checked',
+	VARIABLE_EXISTS: 'Variable name already exists',
+	SORT_VALUES: 'Sort Values',
+	DEFAULT_VALUE: 'Default Value',
+	ALL_VARIABLES: 'All variables',
+	DISCARD: 'Discard',
+	OPTIONS: 'Options',
+	QUERY: 'Query',
+	TEXTBOX: 'Textbox',
+	CUSTOM: 'Custom',
+};
+
+// Common test constants
+const VARIABLE_DEFAULTS = {
+	sort: VariableSortTypeArr[0] as TSortVariableValuesType,
+	multiSelect: false,
+	showALLOption: false,
+};
+
+// Common variable properties
+const TEST_VAR_NAMES = {
+	VAR1: 'variable1',
+	VAR2: 'variable2',
+	VAR3: 'variable3',
+};
+
+const TEST_VAR_IDS = {
+	VAR1: 'var1',
+	VAR2: 'var2',
+	VAR3: 'var3',
+};
+
+const TEST_VAR_DESCRIPTIONS = {
+	VAR1: 'Variable 1',
+	VAR2: 'Variable 2',
+	VAR3: 'Variable 3',
+};
+
+// Common UI elements
+const SAVE_BUTTON_TEXT = 'Save Variable';
+const UNIQUE_NAME_PLACEHOLDER = 'Unique name of the variable';
+
+// Create QueryClient for wrapping the component
+const createTestQueryClient = (): QueryClient =>
+	new QueryClient({
+		defaultOptions: {
+			queries: {
+				retry: false,
+			},
+		},
+	});
+
+// Wrapper component with QueryClientProvider
+const wrapper = ({ children }: { children: React.ReactNode }): JSX.Element => (
+	<QueryClientProvider client={createTestQueryClient()}>
+		{children}
+	</QueryClientProvider>
+);
+
+// Basic variable data for testing
+const basicVariableData: IDashboardVariable = {
+	id: TEST_VAR_IDS.VAR1,
+	name: TEST_VAR_NAMES.VAR1,
+	description: 'Test Variable 1',
+	type: 'QUERY',
+	queryValue: 'SELECT * FROM test',
+	...VARIABLE_DEFAULTS,
+	order: 0,
+};
+
+// Helper function to render VariableItem with common props
+const renderVariableItem = (
+	variableData: IDashboardVariable = basicVariableData,
+	existingVariables: Record<string, IDashboardVariable> = {},
+	validateNameFn = validateName,
+): void => {
+	render(
+		<VariableItem
+			variableData={variableData}
+			existingVariables={existingVariables}
+			onCancel={onCancel}
+			onSave={onSave}
+			validateName={validateNameFn}
+			mode={VARIABLE_MODE}
+		/>,
+		{ wrapper } as any,
+	);
+};
+
+// Helper function to find button by text within its span
+const findButtonByText = (text: string): HTMLElement | null => {
+	const buttons = screen.getAllByRole('button');
+	return buttons.find((button) => button.textContent?.includes(text)) || null;
+};
+
+describe('VariableItem Component', () => {
+	// Test SQL query patterns
+	const SQL_PATTERN_DOT = 'SELECT * FROM test WHERE env = {{.variable2}}';
+	const SQL_PATTERN_DOLLAR = 'SELECT * FROM test WHERE env = $variable2';
+	const SQL_PATTERN_BRACKET = 'SELECT * FROM test WHERE service = [[variable3]]';
+	const SQL_PATTERN_BRACES = 'SELECT * FROM test WHERE app = {{variable1}}';
+	const SQL_PATTERN_NO_VARS = 'SELECT * FROM test WHERE env = "prod"';
+	const SQL_PATTERN_DOT_VAR1 =
+		'SELECT * FROM test WHERE service = {{.variable1}}';
+
+	// Error message text constant
+	const CIRCULAR_DEPENDENCY_ERROR = /Cannot save: Circular dependency detected/;
+
+	// Test functions and utilities
+	const createVariable = (
+		id: string,
+		name: string,
+		description: string,
+		queryValue: string,
+		order: number,
+	): IDashboardVariable => ({
+		id,
+		name,
+		description,
+		type: 'QUERY',
+		queryValue,
+		...VARIABLE_DEFAULTS,
+		order,
+	});
+
+	beforeEach(() => {
+		jest.clearAllMocks();
+	});
+
+	test('renders without crashing', () => {
+		renderVariableItem();
+
+		expect(screen.getByText(TEXT.ALL_VARIABLES)).toBeInTheDocument();
+		expect(screen.getByText('Name')).toBeInTheDocument();
+		expect(screen.getByText('Description')).toBeInTheDocument();
+		expect(screen.getByText('Variable Type')).toBeInTheDocument();
+	});
+
+	describe('Variable Name Validation', () => {
+		test('shows error when variable name already exists', () => {
+			// Set validateName to return false (name exists)
+			const mockValidateName = jest.fn().mockReturnValue(false);
+
+			renderVariableItem({ ...basicVariableData, name: '' }, {}, mockValidateName);
+
+			// Enter a name that already exists
+			const nameInput = screen.getByPlaceholderText(UNIQUE_NAME_PLACEHOLDER);
+			fireEvent.change(nameInput, { target: { value: 'existingVariable' } });
+
+			// Error message should be displayed
+			expect(screen.getByText(TEXT.VARIABLE_EXISTS)).toBeInTheDocument();
+
+			// We won't check for button disabled state as it might be inconsistent in tests
+		});
+
+		test('allows save when current variable name is used', () => {
+			// Mock validate to return false for all other names but true for own name
+			const mockValidateName = jest
+				.fn()
+				.mockImplementation((name) => name === TEST_VAR_NAMES.VAR1);
+
+			renderVariableItem(basicVariableData, {}, mockValidateName);
+
+			// Enter the current variable name
+			const nameInput = screen.getByPlaceholderText(UNIQUE_NAME_PLACEHOLDER);
+			fireEvent.change(nameInput, { target: { value: TEST_VAR_NAMES.VAR1 } });
+
+			// Error should not be visible
+			expect(screen.queryByText(TEXT.VARIABLE_EXISTS)).not.toBeInTheDocument();
+		});
+	});
+
+	describe('Variable Type Switching', () => {
+		test('switches to CUSTOM variable type correctly', () => {
+			renderVariableItem();
+
+			// Find the Query button
+			const queryButton = findButtonByText(TEXT.QUERY);
+			expect(queryButton).toBeInTheDocument();
+			expect(queryButton).toHaveClass('selected');
+
+			// Find and click Custom button
+			const customButton = findButtonByText(TEXT.CUSTOM);
+			expect(customButton).toBeInTheDocument();
+
+			if (customButton) {
+				fireEvent.click(customButton);
+			}
+
+			// Custom button should now be selected
+			expect(customButton).toHaveClass('selected');
+			expect(queryButton).not.toHaveClass('selected');
+
+			// Custom options input should appear
+			expect(screen.getByText(TEXT.OPTIONS)).toBeInTheDocument();
+		});
+
+		test('switches to TEXTBOX variable type correctly', () => {
+			renderVariableItem();
+
+			// Find and click Textbox button
+			const textboxButton = findButtonByText(TEXT.TEXTBOX);
+			expect(textboxButton).toBeInTheDocument();
+
+			if (textboxButton) {
+				fireEvent.click(textboxButton);
+			}
+
+			// Textbox button should now be selected
+			expect(textboxButton).toHaveClass('selected');
+
+			// Default Value input should appear
+			expect(screen.getByText(TEXT.DEFAULT_VALUE)).toBeInTheDocument();
+			expect(
+				screen.getByPlaceholderText('Enter a default value (if any)...'),
+			).toBeInTheDocument();
+		});
+	});
+
+	describe('MultiSelect and ALL Option', () => {
+		test('enables ALL option only when multiSelect is enabled', async () => {
+			renderVariableItem();
+
+			// Initially, ALL option should not be visible
+			expect(screen.queryByText(TEXT.INCLUDE_ALL_VALUES)).not.toBeInTheDocument();
+
+			// Enable multiple values
+			const multipleValuesSwitch = screen
+				.getByText(TEXT.ENABLE_MULTI_VALUES)
+				.closest('.multiple-values-section')
+				?.querySelector('button');
+
+			expect(multipleValuesSwitch).toBeInTheDocument();
+			if (multipleValuesSwitch) {
+				fireEvent.click(multipleValuesSwitch);
+			}
+
+			// Now ALL option should be visible
+			await waitFor(() => {
+				expect(screen.getByText(TEXT.INCLUDE_ALL_VALUES)).toBeInTheDocument();
+			});
+
+			// Disable multiple values
+			if (multipleValuesSwitch) {
+				fireEvent.click(multipleValuesSwitch);
+			}
+
+			// ALL option should be hidden again
+			await waitFor(() => {
+				expect(screen.queryByText(TEXT.INCLUDE_ALL_VALUES)).not.toBeInTheDocument();
+			});
+		});
+
+		test('disables ALL option when multiSelect is disabled', async () => {
+			// Create variable with multiSelect and showALLOption both enabled
+			const variable: IDashboardVariable = {
+				...basicVariableData,
+				multiSelect: true,
+				showALLOption: true,
+			};
+
+			renderVariableItem(variable);
+
+			// ALL option should be visible initially
+			expect(screen.getByText(TEXT.INCLUDE_ALL_VALUES)).toBeInTheDocument();
+
+			// Disable multiple values
+			const multipleValuesSwitch = screen
+				.getByText(TEXT.ENABLE_MULTI_VALUES)
+				.closest('.multiple-values-section')
+				?.querySelector('button');
+
+			if (multipleValuesSwitch) {
+				fireEvent.click(multipleValuesSwitch);
+			}
+
+			// ALL option should be hidden
+			await waitFor(() => {
+				expect(screen.queryByText(TEXT.INCLUDE_ALL_VALUES)).not.toBeInTheDocument();
+			});
+
+			// Check that when saving, showALLOption is set to false
+			const saveButton = screen.getByText(SAVE_BUTTON_TEXT);
+			fireEvent.click(saveButton);
+
+			expect(onSave).toHaveBeenCalledWith(
+				expect.anything(),
+				expect.objectContaining({
+					multiSelect: false,
+					showALLOption: false,
+				}),
+			);
+		});
+	});
+
+	describe('Cancel and Navigation', () => {
+		test('calls onCancel when clicking All Variables button', () => {
+			renderVariableItem();
+
+			// Click All variables button
+			const allVariablesButton = screen.getByText(TEXT.ALL_VARIABLES);
+			fireEvent.click(allVariablesButton);
+
+			expect(onCancel).toHaveBeenCalledTimes(1);
+		});
+
+		test('calls onCancel when clicking Discard button', () => {
+			renderVariableItem();
+
+			// Click Discard button
+			const discardButton = screen.getByText(TEXT.DISCARD);
+			fireEvent.click(discardButton);
+
+			expect(onCancel).toHaveBeenCalledTimes(1);
+		});
+	});
+
+	describe('Cyclic Dependency Detection', () => {
+		// Common function to render the component with variables and click save
+		const renderAndSave = async (
+			variableData: IDashboardVariable,
+			existingVariables: Record<string, IDashboardVariable>,
+		): Promise<void> => {
+			renderVariableItem(variableData, existingVariables);
+
+			// Fill in the variable name if it's not already populated
+			const nameInput = screen.getByPlaceholderText(UNIQUE_NAME_PLACEHOLDER);
+			if (nameInput.getAttribute('value') === '') {
+				fireEvent.change(nameInput, { target: { value: variableData.name || '' } });
+			}
+
+			// Click save button to trigger the dependency check
+			const saveButton = screen.getByText(SAVE_BUTTON_TEXT);
+			fireEvent.click(saveButton);
+		};
+
+		// Common expectations for finding circular dependency error
+		const expectCircularDependencyError = async (): Promise<void> => {
+			await waitFor(() => {
+				expect(screen.getByText(CIRCULAR_DEPENDENCY_ERROR)).toBeInTheDocument();
+				expect(onSave).not.toHaveBeenCalled();
+			});
+		};
+
+		// Test for cyclic dependency detection
+		test('detects circular dependency and shows error message', async () => {
+			// Create variables with circular dependency
+			const variable1 = createVariable(
+				TEST_VAR_IDS.VAR1,
+				TEST_VAR_NAMES.VAR1,
+				TEST_VAR_DESCRIPTIONS.VAR1,
+				SQL_PATTERN_DOT,
+				0,
+			);
+
+			const variable2 = createVariable(
+				TEST_VAR_IDS.VAR2,
+				TEST_VAR_NAMES.VAR2,
+				TEST_VAR_DESCRIPTIONS.VAR2,
+				SQL_PATTERN_DOT_VAR1,
+				1,
+			);
+
+			const existingVariables = {
+				[TEST_VAR_IDS.VAR2]: variable2,
+			};
+
+			await renderAndSave(variable1, existingVariables);
+			await expectCircularDependencyError();
+		});
+
+		// Test for saving with no circular dependency
+		test('allows saving when no circular dependency exists', async () => {
+			// Create variables without circular dependency
+			const variable1 = createVariable(
+				TEST_VAR_IDS.VAR1,
+				TEST_VAR_NAMES.VAR1,
+				TEST_VAR_DESCRIPTIONS.VAR1,
+				SQL_PATTERN_NO_VARS,
+				0,
+			);
+
+			const variable2 = createVariable(
+				TEST_VAR_IDS.VAR2,
+				TEST_VAR_NAMES.VAR2,
+				TEST_VAR_DESCRIPTIONS.VAR2,
+				SQL_PATTERN_DOT_VAR1,
+				1,
+			);
+
+			const existingVariables = {
+				[TEST_VAR_IDS.VAR2]: variable2,
+			};
+
+			await renderAndSave(variable1, existingVariables);
+
+			// Verify the onSave function was called
+			await waitFor(() => {
+				expect(onSave).toHaveBeenCalled();
+			});
+		});
+
+		// Test with multiple variable formats in query
+		test('detects circular dependency with different variable formats', async () => {
+			// Create variables with circular dependency using different formats
+			const variable1 = createVariable(
+				TEST_VAR_IDS.VAR1,
+				TEST_VAR_NAMES.VAR1,
+				TEST_VAR_DESCRIPTIONS.VAR1,
+				SQL_PATTERN_DOLLAR,
+				0,
+			);
+
+			const variable2 = createVariable(
+				TEST_VAR_IDS.VAR2,
+				TEST_VAR_NAMES.VAR2,
+				TEST_VAR_DESCRIPTIONS.VAR2,
+				SQL_PATTERN_BRACKET,
+				1,
+			);
+
+			const variable3 = createVariable(
+				TEST_VAR_IDS.VAR3,
+				TEST_VAR_NAMES.VAR3,
+				TEST_VAR_DESCRIPTIONS.VAR3,
+				SQL_PATTERN_BRACES,
+				2,
+			);
+
+			const existingVariables = {
+				[TEST_VAR_IDS.VAR2]: variable2,
+				[TEST_VAR_IDS.VAR3]: variable3,
+			};
+
+			await renderAndSave(variable1, existingVariables);
+			await expectCircularDependencyError();
+		});
+	});
+});

frontend/src/container/NewDashboard/DashboardSettings/Variables/VariableItem/VariableItem.tsx

@@ -6,9 +6,7 @@ import { Button, Collapse, Input, Select, Switch, Tag, Typography } from 'antd';
 import dashboardVariablesQuery from 'api/dashboard/variables/dashboardVariablesQuery';
 import cx from 'classnames';
 import Editor from 'components/Editor';
-import { CustomSelect } from 'components/NewSelect';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
-import { useGetFieldValues } from 'hooks/dynamicVariables/useGetFieldValues';
 import { commaValuesParser } from 'lib/dashbaordVariables/customCommaValuesParser';
 import sortValues from 'lib/dashbaordVariables/sortVariableValues';
 import { map } from 'lodash-es';
@@ -18,25 +16,24 @@ import {
 	ClipboardType,
 	DatabaseZap,
 	LayoutList,
-	Pyramid,
 	X,
 } from 'lucide-react';
 import { useCallback, useEffect, useState } from 'react';
 import { useQuery } from 'react-query';
-import { useSelector } from 'react-redux';
-import { AppState } from 'store/reducers';
 import {
 	IDashboardVariable,
 	TSortVariableValuesType,
 	TVariableQueryType,
 	VariableSortTypeArr,
 } from 'types/api/dashboard/getAll';
-import { GlobalReducer } from 'types/reducer/globalTime';
 import { v4 as generateUUID } from 'uuid';
 
+import {
+	buildDependencies,
+	buildDependencyGraph,
+} from '../../../DashboardVariablesSelection/util';
 import { variablePropsToPayloadVariables } from '../../../utils';
 import { TVariableMode } from '../types';
-import DynamicVariable from './DynamicVariable/DynamicVariable';
 import { LabelContainer, VariableItemRow } from './styles';
 
 const { Option } = Select;
@@ -64,7 +61,7 @@ function VariableItem({
 		variableData.description || '',
 	);
 	const [queryType, setQueryType] = useState<TVariableQueryType>(
-		variableData.type || 'DYNAMIC',
+		variableData.type || 'QUERY',
 	);
 	const [variableQueryValue, setVariableQueryValue] = useState<string>(
 		variableData.queryValue || '',
@@ -88,53 +85,11 @@ function VariableItem({
 		variableData.showALLOption || false,
 	);
 	const [previewValues, setPreviewValues] = useState<string[]>([]);
-	const [variableDefaultValue, setVariableDefaultValue] = useState<string>(
-		(variableData.defaultValue as string) || '',
-	);
 
-	const [
-		dynamicVariablesSelectedValue,
-		setDynamicVariablesSelectedValue,
-	] = useState<{ name: string; value: string }>();
-
-	useEffect(() => {
-		if (
-			variableData.dynamicVariablesAttribute &&
-			variableData.dynamicVariablesSource
-		) {
-			setDynamicVariablesSelectedValue({
-				name: variableData.dynamicVariablesAttribute,
-				value: variableData.dynamicVariablesSource,
-			});
-		}
-	}, [
-		variableData.dynamicVariablesAttribute,
-		variableData.dynamicVariablesSource,
-	]);
 	// Error messages
 	const [errorName, setErrorName] = useState<boolean>(false);
 	const [errorPreview, setErrorPreview] = useState<string | null>(null);
 
-	const { maxTime, minTime } = useSelector<AppState, GlobalReducer>(
-		(state) => state.globalTime,
-	);
-
-	const { data: fieldValues } = useGetFieldValues({
-		signal:
-			dynamicVariablesSelectedValue?.value === 'All Sources'
-				? undefined
-				: (dynamicVariablesSelectedValue?.value?.toLowerCase() as
-						| 'traces'
-						| 'logs'
-						| 'metrics'),
-		name: dynamicVariablesSelectedValue?.name || '',
-		enabled:
-			!!dynamicVariablesSelectedValue?.name &&
-			!!dynamicVariablesSelectedValue?.value,
-		startUnixMilli: minTime,
-		endUnixMilli: maxTime,
-	});
-
 	useEffect(() => {
 		if (queryType === 'CUSTOM') {
 			setPreviewValues(
@@ -155,31 +110,9 @@ function VariableItem({
 		variableSortType,
 	]);
 
-	useEffect(() => {
-		if (
-			queryType === 'DYNAMIC' &&
-			fieldValues &&
-			dynamicVariablesSelectedValue?.name &&
-			dynamicVariablesSelectedValue?.value
-		) {
-			setPreviewValues(
-				sortValues(
-					fieldValues.payload?.normalizedValues || [],
-					variableSortType,
-				) as never,
-			);
-		}
-	}, [
-		fieldValues,
-		variableSortType,
-		queryType,
-		dynamicVariablesSelectedValue?.name,
-		dynamicVariablesSelectedValue?.value,
-		dynamicVariablesSelectedValue,
-	]);
-
 	const handleSave = (): void => {
-		const variable: IDashboardVariable = {
+		// Check for cyclic dependencies
+		const newVariable = {
 			name: variableName,
 			description: variableDescription,
 			type: queryType,
@@ -193,19 +126,26 @@ function VariableItem({
 				selectedValue: (variableData.selectedValue ||
 					variableTextboxValue) as never,
 			}),
-			...(queryType !== 'TEXTBOX' && {
-				defaultValue: variableDefaultValue as never,
-			}),
 			modificationUUID: generateUUID(),
 			id: variableData.id || generateUUID(),
 			order: variableData.order,
-			...(queryType === 'DYNAMIC' && {
-				dynamicVariablesAttribute: dynamicVariablesSelectedValue?.name,
-				dynamicVariablesSource: dynamicVariablesSelectedValue?.value,
-			}),
 		};
 
-		onSave(mode, variable);
+		const allVariables = [...Object.values(existingVariables), newVariable];
+
+		const dependencies = buildDependencies(allVariables);
+		const { hasCycle, cycleNodes } = buildDependencyGraph(dependencies);
+
+		if (hasCycle) {
+			setErrorPreview(
+				`Cannot save: Circular dependency detected between variables: ${cycleNodes?.join(
+					' → ',
+				)}`,
+			);
+			return;
+		}
+
+		onSave(mode, newVariable);
 	};
 
 	// Fetches the preview values for the SQL variable query
@@ -318,18 +258,18 @@ function VariableItem({
 						<div className="variable-type-btn-group">
 							<Button
 								type="text"
-								icon={<Pyramid size={14} />}
+								icon={<DatabaseZap size={14} />}
 								className={cx(
 									// eslint-disable-next-line sonarjs/no-duplicate-string
 									'variable-type-btn',
-									queryType === 'DYNAMIC' ? 'selected' : '',
+									queryType === 'QUERY' ? 'selected' : '',
 								)}
 								onClick={(): void => {
-									setQueryType('DYNAMIC');
+									setQueryType('QUERY');
 									setPreviewValues([]);
 								}}
 							>
-								Dynamic
+								Query
 							</Button>
 							<Button
 								type="text"
@@ -359,31 +299,8 @@ function VariableItem({
 							>
 								Custom
 							</Button>
-							<Button
-								type="text"
-								icon={<DatabaseZap size={14} />}
-								className={cx(
-									// eslint-disable-next-line sonarjs/no-duplicate-string
-									'variable-type-btn',
-									queryType === 'QUERY' ? 'selected' : '',
-								)}
-								onClick={(): void => {
-									setQueryType('QUERY');
-									setPreviewValues([]);
-								}}
-							>
-								Query
-							</Button>
 						</div>
 					</VariableItemRow>
-					{queryType === 'DYNAMIC' && (
-						<div className="variable-dynamic-section">
-							<DynamicVariable
-								setDynamicVariablesSelectedValue={setDynamicVariablesSelectedValue}
-								dynamicVariablesSelectedValue={dynamicVariablesSelectedValue}
-							/>
-						</div>
-					)}
 					{queryType === 'QUERY' && (
 						<div className="query-container">
 							<LabelContainer>
@@ -471,9 +388,7 @@ function VariableItem({
 							/>
 						</VariableItemRow>
 					)}
-					{(queryType === 'QUERY' ||
-						queryType === 'CUSTOM' ||
-						queryType === 'DYNAMIC') && (
+					{(queryType === 'QUERY' || queryType === 'CUSTOM') && (
 						<>
 							<VariableItemRow className="variables-preview-section">
 								<LabelContainer style={{ width: '100%' }}>
@@ -542,25 +457,6 @@ function VariableItem({
 									/>
 								</VariableItemRow>
 							)}
-							<VariableItemRow className="default-value-section">
-								<LabelContainer>
-									<Typography className="typography-variables">Default Value</Typography>
-									<Typography className="default-value-description">
-										{queryType === 'QUERY'
-											? 'Click Test Run Query to see the values or add custom value'
-											: 'Select a value from the preview values or add custom value'}
-									</Typography>
-								</LabelContainer>
-								<CustomSelect
-									placeholder="Select a default value"
-									value={variableDefaultValue}
-									onChange={(value): void => setVariableDefaultValue(value)}
-									options={previewValues.map((value) => ({
-										label: value,
-										value,
-									}))}
-								/>
-							</VariableItemRow>
 						</>
 					)}
 				</div>

frontend/src/container/NewDashboard/DashboardVariablesSelection/DashboardVariableSelection.styles.scss

@@ -106,3 +106,9 @@
 		}
 	}
 }
+
+.cycle-error-alert {
+	margin-bottom: 12px;
+	padding: 4px 12px;
+	font-size: 12px;
+}

frontend/src/container/NewDashboard/DashboardVariablesSelection/DashboardVariableSelection.tsx

@@ -1,16 +1,14 @@
-import { Row } from 'antd';
-import { ALL_SELECTED_VALUE } from 'components/NewSelect/utils';
-import useVariablesFromUrl from 'hooks/dashboard/useVariablesFromUrl';
+import './DashboardVariableSelection.styles.scss';
+
+import { Alert, Row } from 'antd';
 import { isEmpty } from 'lodash-es';
 import { useDashboard } from 'providers/Dashboard/Dashboard';
-import { initializeDefaultVariables } from 'providers/Dashboard/initializeDefaultVariables';
 import { memo, useEffect, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { AppState } from 'store/reducers';
 import { IDashboardVariable } from 'types/api/dashboard/getAll';
 import { GlobalReducer } from 'types/reducer/globalTime';
 
-import DynamicVariableSelection from './DynamicVariableSelection';
 import {
 	buildDependencies,
 	buildDependencyGraph,
@@ -29,8 +27,6 @@ function DashboardVariableSelection(): JSX.Element | null {
 		setVariablesToGetUpdated,
 	} = useDashboard();
 
-	const { updateUrlVariable, getUrlVariables } = useVariablesFromUrl();
-
 	const { data } = selectedDashboard || {};
 
 	const { variables } = data || {};
@@ -64,16 +60,13 @@ function DashboardVariableSelection(): JSX.Element | null {
 			tableRowData.sort((a, b) => a.order - b.order);
 
 			setVariablesTableData(tableRowData);
-
-			// Initialize variables with default values if not in URL
-			initializeDefaultVariables(variables, getUrlVariables, updateUrlVariable);
 		}
-	}, [getUrlVariables, updateUrlVariable, variables]);
+	}, [variables]);
 
 	useEffect(() => {
 		if (variablesTableData.length > 0) {
 			const depGrp = buildDependencies(variablesTableData);
-			const { order, graph } = buildDependencyGraph(depGrp);
+			const { order, graph, hasCycle, cycleNodes } = buildDependencyGraph(depGrp);
 			const parentDependencyGraph = buildParentDependencyGraph(graph);
 
 			// cleanup order to only include variables that are of type 'QUERY'
@@ -88,6 +81,8 @@ function DashboardVariableSelection(): JSX.Element | null {
 				order: cleanedOrder,
 				graph,
 				parentDependencyGraph,
+				hasCycle,
+				cycleNodes,
 			});
 		}
 	}, [setVariablesToGetUpdated, variables, variablesTableData]);
@@ -109,18 +104,12 @@ function DashboardVariableSelection(): JSX.Element | null {
 		id: string,
 		value: IDashboardVariable['selectedValue'],
 		allSelected: boolean,
-		haveCustomValuesSelected?: boolean,
+		// isMountedCall?: boolean,
 		// eslint-disable-next-line sonarjs/cognitive-complexity
 	): void => {
 		if (id) {
 			updateLocalStorageDashboardVariables(name, value, allSelected);
 
-			if (allSelected) {
-				updateUrlVariable(name || id, ALL_SELECTED_VALUE);
-			} else {
-				updateUrlVariable(name || id, value);
-			}
-
 			if (selectedDashboard) {
 				setSelectedDashboard((prev) => {
 					if (prev) {
@@ -132,7 +121,6 @@ function DashboardVariableSelection(): JSX.Element | null {
 								...oldVariables[id],
 								selectedValue: value,
 								allSelected,
-								haveCustomValuesSelected,
 							};
 						}
 						if (oldVariables[name]) {
@@ -140,7 +128,6 @@ function DashboardVariableSelection(): JSX.Element | null {
 								...oldVariables[name],
 								selectedValue: value,
 								allSelected,
-								haveCustomValuesSelected,
 							};
 						}
 						return {
@@ -183,22 +170,22 @@ function DashboardVariableSelection(): JSX.Element | null {
 	);
 
 	return (
-		<Row style={{ display: 'flex', gap: '12px' }}>
-			{orderBasedSortedVariables &&
-				Array.isArray(orderBasedSortedVariables) &&
-				orderBasedSortedVariables.length > 0 &&
-				orderBasedSortedVariables.map((variable) =>
-					variable.type === 'DYNAMIC' ? (
-						<DynamicVariableSelection
-							key={`${variable.name}${variable.id}}${variable.order}`}
-							existingVariables={variables}
-							variableData={{
-								name: variable.name,
-								...variable,
-							}}
-							onValueUpdate={onValueUpdate}
-						/>
-					) : (
+		<>
+			{dependencyData?.hasCycle && (
+				<Alert
+					message={`Circular dependency detected: ${dependencyData?.cycleNodes?.join(
+						' → ',
+					)}`}
+					type="error"
+					showIcon
+					className="cycle-error-alert"
+				/>
+			)}
+			<Row style={{ display: 'flex', gap: '12px' }}>
+				{orderBasedSortedVariables &&
+					Array.isArray(orderBasedSortedVariables) &&
+					orderBasedSortedVariables.length > 0 &&
+					orderBasedSortedVariables.map((variable) => (
 						<VariableItem
 							key={`${variable.name}${variable.id}}${variable.order}`}
 							existingVariables={variables}
@@ -211,9 +198,9 @@ function DashboardVariableSelection(): JSX.Element | null {
 							setVariablesToGetUpdated={setVariablesToGetUpdated}
 							dependencyData={dependencyData}
 						/>
-					),
-				)}
-		</Row>
+					))}
+			</Row>
+		</>
 	);
 }
 

frontend/src/container/NewDashboard/DashboardVariablesSelection/DynamicVariableSelection.tsx

@@ -1,385 +0,0 @@
-/* eslint-disable sonarjs/cognitive-complexity */
-/* eslint-disable no-nested-ternary */
-import './DashboardVariableSelection.styles.scss';
-
-import { Tooltip, Typography } from 'antd';
-import { getFieldValues } from 'api/dynamicVariables/getFieldValues';
-import { CustomMultiSelect, CustomSelect } from 'components/NewSelect';
-import { SOMETHING_WENT_WRONG } from 'constants/api';
-import { DEBOUNCE_DELAY } from 'constants/queryBuilderFilterConfig';
-import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
-import useDebounce from 'hooks/useDebounce';
-import { isEmpty, isUndefined } from 'lodash-es';
-import { useCallback, useEffect, useMemo, useState } from 'react';
-import { useQuery } from 'react-query';
-import { useSelector } from 'react-redux';
-import { AppState } from 'store/reducers';
-import { IDashboardVariable } from 'types/api/dashboard/getAll';
-import { GlobalReducer } from 'types/reducer/globalTime';
-import { popupContainer } from 'utils/selectPopupContainer';
-
-import { ALL_SELECT_VALUE } from '../utils';
-import { SelectItemStyle } from './styles';
-import { areArraysEqual } from './util';
-import { getSelectValue } from './VariableItem';
-
-interface DynamicVariableSelectionProps {
-	variableData: IDashboardVariable;
-	existingVariables: Record<string, IDashboardVariable>;
-	onValueUpdate: (
-		name: string,
-		id: string,
-		arg1: IDashboardVariable['selectedValue'],
-		allSelected: boolean,
-		haveCustomValuesSelected?: boolean,
-	) => void;
-}
-
-function DynamicVariableSelection({
-	variableData,
-	onValueUpdate,
-	existingVariables,
-}: DynamicVariableSelectionProps): JSX.Element {
-	const [optionsData, setOptionsData] = useState<(string | number | boolean)[]>(
-		[],
-	);
-
-	const [errorMessage, setErrorMessage] = useState<null | string>(null);
-
-	const [isComplete, setIsComplete] = useState<boolean>(false);
-
-	const [filteredOptionsData, setFilteredOptionsData] = useState<
-		(string | number | boolean)[]
-	>([]);
-
-	const [tempSelection, setTempSelection] = useState<
-		string | string[] | undefined
-	>(undefined);
-
-	// Create a dependency key from all dynamic variables
-	const dynamicVariablesKey = useMemo(() => {
-		if (!existingVariables) return 'no_variables';
-
-		const dynamicVars = Object.values(existingVariables)
-			.filter((v) => v.type === 'DYNAMIC')
-			.map(
-				(v) => `${v.name || 'unnamed'}:${JSON.stringify(v.selectedValue || null)}`,
-			)
-			.join('|');
-
-		return dynamicVars || 'no_dynamic_variables';
-	}, [existingVariables]);
-
-	const [apiSearchText, setApiSearchText] = useState<string>('');
-
-	const debouncedApiSearchText = useDebounce(apiSearchText, DEBOUNCE_DELAY);
-
-	const { maxTime, minTime } = useSelector<AppState, GlobalReducer>(
-		(state) => state.globalTime,
-	);
-
-	const { isLoading, refetch } = useQuery(
-		[
-			REACT_QUERY_KEY.DASHBOARD_BY_ID,
-			variableData.name || `variable_${variableData.id}`,
-			dynamicVariablesKey,
-			minTime,
-			maxTime,
-		],
-		{
-			enabled: variableData.type === 'DYNAMIC',
-			queryFn: () =>
-				getFieldValues(
-					variableData.dynamicVariablesSource?.toLowerCase() === 'all sources'
-						? undefined
-						: (variableData.dynamicVariablesSource?.toLowerCase() as
-								| 'traces'
-								| 'logs'
-								| 'metrics'),
-					variableData.dynamicVariablesAttribute,
-					debouncedApiSearchText,
-					minTime,
-					maxTime,
-				),
-			onSuccess: (data) => {
-				setOptionsData(data.payload?.normalizedValues || []);
-				setIsComplete(data.payload?.complete || false);
-				setFilteredOptionsData(data.payload?.normalizedValues || []);
-			},
-			onError: (error: any) => {
-				if (error) {
-					let message = SOMETHING_WENT_WRONG;
-					if (error?.message) {
-						message = error?.message;
-					} else {
-						message =
-							'Please make sure configuration is valid and you have required setup and permissions';
-					}
-					setErrorMessage(message);
-				}
-			},
-		},
-	);
-
-	const handleChange = useCallback(
-		(inputValue: string | string[]): void => {
-			const value = variableData.multiSelect && !inputValue ? [] : inputValue;
-
-			if (
-				value === variableData.selectedValue ||
-				(Array.isArray(value) &&
-					Array.isArray(variableData.selectedValue) &&
-					areArraysEqual(value, variableData.selectedValue))
-			) {
-				return;
-			}
-
-			if (variableData.name) {
-				if (
-					value === ALL_SELECT_VALUE ||
-					(Array.isArray(value) && value.includes(ALL_SELECT_VALUE))
-				) {
-					onValueUpdate(variableData.name, variableData.id, optionsData, true);
-				} else {
-					onValueUpdate(
-						variableData.name,
-						variableData.id,
-						value,
-						optionsData.every((v) => value.includes(v.toString())),
-						Array.isArray(value) &&
-							!value.every((v) => optionsData.includes(v.toString())),
-					);
-				}
-			}
-		},
-		[variableData, onValueUpdate, optionsData],
-	);
-
-	useEffect(() => {
-		if (
-			variableData.dynamicVariablesSource &&
-			variableData.dynamicVariablesAttribute
-		) {
-			refetch();
-		}
-	}, [
-		refetch,
-		variableData.dynamicVariablesSource,
-		variableData.dynamicVariablesAttribute,
-		debouncedApiSearchText,
-	]);
-
-	const handleSearch = useCallback(
-		(text: string) => {
-			if (isComplete) {
-				if (!text) {
-					setFilteredOptionsData(optionsData);
-					return;
-				}
-
-				const localFilteredOptionsData: (string | number | boolean)[] = [];
-				optionsData.forEach((option) => {
-					if (option.toString().toLowerCase().includes(text.toLowerCase())) {
-						localFilteredOptionsData.push(option);
-					}
-				});
-				setFilteredOptionsData(localFilteredOptionsData);
-			} else {
-				setApiSearchText(text);
-			}
-		},
-		[isComplete, optionsData],
-	);
-
-	const { selectedValue } = variableData;
-	const selectedValueStringified = useMemo(
-		() => getSelectValue(selectedValue, variableData),
-		[selectedValue, variableData],
-	);
-
-	const enableSelectAll = variableData.multiSelect && variableData.showALLOption;
-
-	const selectValue =
-		variableData.allSelected && enableSelectAll
-			? ALL_SELECT_VALUE
-			: selectedValueStringified;
-
-	// Add a handler for tracking temporary selection changes
-	const handleTempChange = (inputValue: string | string[]): void => {
-		// Store the selection in temporary state while dropdown is open
-		const value = variableData.multiSelect && !inputValue ? [] : inputValue;
-		setTempSelection(value);
-	};
-
-	// Handle dropdown visibility changes
-	const handleDropdownVisibleChange = (visible: boolean): void => {
-		// Initialize temp selection when opening dropdown
-		if (visible) {
-			if (isUndefined(tempSelection) && selectValue === ALL_SELECT_VALUE) {
-				// set all options from the optionsData and the selectedValue, make sure to remove duplicates
-				const allOptions = [
-					...new Set([
-						...optionsData.map((option) => option.toString()),
-						...(variableData.selectedValue
-							? Array.isArray(variableData.selectedValue)
-								? variableData.selectedValue.map((v) => v.toString())
-								: [variableData.selectedValue.toString()]
-							: []),
-					]),
-				];
-				setTempSelection(allOptions);
-			} else {
-				setTempSelection(getSelectValue(variableData.selectedValue, variableData));
-			}
-		}
-		// Apply changes when closing dropdown
-		else if (!visible && tempSelection !== undefined) {
-			// Call handleChange with the temporarily stored selection
-			handleChange(tempSelection);
-			setTempSelection(undefined);
-		}
-	};
-
-	// eslint-disable-next-line sonarjs/cognitive-complexity
-	const finalSelectedValues = useMemo(() => {
-		if (variableData.multiSelect) {
-			let value = tempSelection || selectedValue;
-			if (isEmpty(value)) {
-				if (variableData.showALLOption) {
-					if (variableData.defaultValue) {
-						value = variableData.defaultValue;
-					} else {
-						value = optionsData;
-					}
-				} else if (variableData.defaultValue) {
-					value = variableData.defaultValue;
-				} else {
-					value = optionsData?.[0];
-				}
-			}
-
-			return value;
-		}
-		if (isEmpty(selectedValue)) {
-			if (variableData.defaultValue) {
-				return variableData.defaultValue;
-			}
-			return optionsData[0]?.toString();
-		}
-
-		return selectedValue;
-	}, [
-		variableData.multiSelect,
-		variableData.showALLOption,
-		variableData.defaultValue,
-		selectedValue,
-		tempSelection,
-		optionsData,
-	]);
-
-	useEffect(() => {
-		if (
-			(variableData.multiSelect && !(tempSelection || selectValue)) ||
-			isEmpty(selectValue)
-		) {
-			handleChange(finalSelectedValues as string[] | string);
-		}
-	}, [
-		finalSelectedValues,
-		handleChange,
-		selectValue,
-		tempSelection,
-		variableData.multiSelect,
-	]);
-
-	return (
-		<div className="variable-item">
-			<Typography.Text className="variable-name" ellipsis>
-				${variableData.name}
-			</Typography.Text>
-			<div className="variable-value">
-				{variableData.multiSelect ? (
-					<CustomMultiSelect
-						key={
-							selectValue && Array.isArray(selectValue)
-								? selectValue.join(' ')
-								: selectValue || variableData.id
-						}
-						options={filteredOptionsData.map((option) => ({
-							label: option.toString(),
-							value: option.toString(),
-						}))}
-						defaultValue={variableData.defaultValue}
-						onChange={handleTempChange}
-						bordered={false}
-						placeholder="Select value"
-						placement="bottomLeft"
-						style={SelectItemStyle}
-						loading={isLoading}
-						showSearch
-						data-testid="variable-select"
-						className="variable-select"
-						popupClassName="dropdown-styles"
-						maxTagCount={2}
-						getPopupContainer={popupContainer}
-						value={
-							(tempSelection || selectValue) === ALL_SELECT_VALUE
-								? 'ALL'
-								: tempSelection || selectValue
-						}
-						onDropdownVisibleChange={handleDropdownVisibleChange}
-						errorMessage={errorMessage}
-						// eslint-disable-next-line react/no-unstable-nested-components
-						maxTagPlaceholder={(omittedValues): JSX.Element => (
-							<Tooltip title={omittedValues.map(({ value }) => value).join(', ')}>
-								<span>+ {omittedValues.length} </span>
-							</Tooltip>
-						)}
-						onClear={(): void => {
-							handleChange([]);
-						}}
-						enableAllSelection={enableSelectAll}
-						maxTagTextLength={30}
-						onSearch={handleSearch}
-						onRetry={(): void => {
-							refetch();
-						}}
-						showIncompleteDataMessage={!isComplete && filteredOptionsData.length > 0}
-					/>
-				) : (
-					<CustomSelect
-						key={
-							selectValue && Array.isArray(selectValue)
-								? selectValue.join(' ')
-								: selectValue || variableData.id
-						}
-						onChange={handleChange}
-						bordered={false}
-						placeholder="Select value"
-						style={SelectItemStyle}
-						loading={isLoading}
-						showSearch
-						data-testid="variable-select"
-						className="variable-select"
-						popupClassName="dropdown-styles"
-						getPopupContainer={popupContainer}
-						options={filteredOptionsData.map((option) => ({
-							label: option.toString(),
-							value: option.toString(),
-						}))}
-						value={selectValue}
-						defaultValue={variableData.defaultValue}
-						errorMessage={errorMessage}
-						onSearch={handleSearch}
-						onRetry={(): void => {
-							refetch();
-						}}
-						showIncompleteDataMessage={!isComplete && filteredOptionsData.length > 0}
-					/>
-				)}
-			</div>
-		</div>
-	);
-}
-
-export default DynamicVariableSelection;

frontend/src/container/NewDashboard/DashboardVariablesSelection/VariableItem.test.tsx

@@ -53,6 +53,7 @@ describe('VariableItem', () => {
 						order: [],
 						graph: {},
 						parentDependencyGraph: {},
+						hasCycle: false,
 					}}
 				/>
 			</MockQueryClientProvider>,
@@ -74,6 +75,7 @@ describe('VariableItem', () => {
 						order: [],
 						graph: {},
 						parentDependencyGraph: {},
+						hasCycle: false,
 					}}
 				/>
 			</MockQueryClientProvider>,
@@ -94,6 +96,7 @@ describe('VariableItem', () => {
 						order: [],
 						graph: {},
 						parentDependencyGraph: {},
+						hasCycle: false,
 					}}
 				/>
 			</MockQueryClientProvider>,
@@ -128,6 +131,7 @@ describe('VariableItem', () => {
 						order: [],
 						graph: {},
 						parentDependencyGraph: {},
+						hasCycle: false,
 					}}
 				/>
 			</MockQueryClientProvider>,
@@ -157,6 +161,7 @@ describe('VariableItem', () => {
 						order: [],
 						graph: {},
 						parentDependencyGraph: {},
+						hasCycle: false,
 					}}
 				/>
 			</MockQueryClientProvider>,
@@ -178,6 +183,7 @@ describe('VariableItem', () => {
 						order: [],
 						graph: {},
 						parentDependencyGraph: {},
+						hasCycle: false,
 					}}
 				/>
 			</MockQueryClientProvider>,

frontend/src/container/NewDashboard/DashboardVariablesSelection/VariableItem.tsx

@@ -8,14 +8,23 @@ import './DashboardVariableSelection.styles.scss';
 
 import { orange } from '@ant-design/colors';
 import { InfoCircleOutlined, WarningOutlined } from '@ant-design/icons';
-import { Input, Popover, Tooltip, Typography } from 'antd';
+import {
+	Checkbox,
+	Input,
+	Popover,
+	Select,
+	Tag,
+	Tooltip,
+	Typography,
+} from 'antd';
+import { CheckboxChangeEvent } from 'antd/es/checkbox';
 import dashboardVariablesQuery from 'api/dashboard/variables/dashboardVariablesQuery';
-import { CustomMultiSelect, CustomSelect } from 'components/NewSelect';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import { commaValuesParser } from 'lib/dashbaordVariables/customCommaValuesParser';
 import sortValues from 'lib/dashbaordVariables/sortVariableValues';
-import { debounce, isArray, isEmpty, isString } from 'lodash-es';
-import { memo, useCallback, useEffect, useMemo, useState } from 'react';
+import { debounce, isArray, isString } from 'lodash-es';
+import map from 'lodash-es/map';
+import { ChangeEvent, memo, useEffect, useMemo, useState } from 'react';
 import { useQuery } from 'react-query';
 import { useSelector } from 'react-redux';
 import { AppState } from 'store/reducers';
@@ -24,10 +33,17 @@ import { VariableResponseProps } from 'types/api/dashboard/variables/query';
 import { GlobalReducer } from 'types/reducer/globalTime';
 import { popupContainer } from 'utils/selectPopupContainer';
 
-import { ALL_SELECT_VALUE, variablePropsToPayloadVariables } from '../utils';
+import { variablePropsToPayloadVariables } from '../utils';
 import { SelectItemStyle } from './styles';
 import { areArraysEqual, checkAPIInvocation, IDependencyData } from './util';
 
+const ALL_SELECT_VALUE = '__ALL__';
+
+enum ToggleTagValue {
+	Only = 'Only',
+	All = 'All',
+}
+
 interface VariableItemProps {
 	variableData: IDashboardVariable;
 	existingVariables: Record<string, IDashboardVariable>;
@@ -42,7 +58,7 @@ interface VariableItemProps {
 	dependencyData: IDependencyData | null;
 }
 
-export const getSelectValue = (
+const getSelectValue = (
 	selectedValue: IDashboardVariable['selectedValue'],
 	variableData: IDashboardVariable,
 ): string | string[] | undefined => {
@@ -67,9 +83,6 @@ function VariableItem({
 	const [optionsData, setOptionsData] = useState<(string | number | boolean)[]>(
 		[],
 	);
-	const [tempSelection, setTempSelection] = useState<
-		string | string[] | undefined
-	>(undefined);
 
 	const { maxTime, minTime } = useSelector<AppState, GlobalReducer>(
 		(state) => state.globalTime,
@@ -133,10 +146,18 @@ function VariableItem({
 							variableData.name &&
 							(validVariableUpdate() || valueNotInList || variableData.allSelected)
 						) {
-							const value = variableData.selectedValue;
+							let value = variableData.selectedValue;
 							let allSelected = false;
-
-							if (variableData.multiSelect) {
+							// The default value for multi-select is ALL and first value for
+							// single select
+							if (valueNotInList) {
+								if (variableData.multiSelect) {
+									value = newOptionsData;
+									allSelected = true;
+								} else {
+									[value] = newOptionsData;
+								}
+							} else if (variableData.multiSelect) {
 								const { selectedValue } = variableData;
 								allSelected =
 									newOptionsData.length > 0 &&
@@ -221,57 +242,26 @@ function VariableItem({
 		},
 	);
 
-	const handleChange = useCallback(
-		(inputValue: string | string[]): void => {
-			const value = variableData.multiSelect && !inputValue ? [] : inputValue;
-
-			if (
-				value === variableData.selectedValue ||
-				(Array.isArray(value) &&
-					Array.isArray(variableData.selectedValue) &&
-					areArraysEqual(value, variableData.selectedValue))
-			) {
-				return;
-			}
-			if (variableData.name) {
-				if (
-					value === ALL_SELECT_VALUE ||
-					(Array.isArray(value) && value.includes(ALL_SELECT_VALUE))
-				) {
-					onValueUpdate(variableData.name, variableData.id, optionsData, true);
-				} else {
-					onValueUpdate(variableData.name, variableData.id, value, false);
-				}
-			}
-		},
-		[
-			variableData.multiSelect,
-			variableData.selectedValue,
-			variableData.name,
-			variableData.id,
-			onValueUpdate,
-			optionsData,
-		],
-	);
-
-	// Add a handler for tracking temporary selection changes
-	const handleTempChange = (inputValue: string | string[]): void => {
-		// Store the selection in temporary state while dropdown is open
+	const handleChange = (inputValue: string | string[]): void => {
 		const value = variableData.multiSelect && !inputValue ? [] : inputValue;
-		setTempSelection(value);
-	};
 
-	// Handle dropdown visibility changes
-	const handleDropdownVisibleChange = (visible: boolean): void => {
-		// Initialize temp selection when opening dropdown
-		if (visible) {
-			setTempSelection(getSelectValue(variableData.selectedValue, variableData));
+		if (
+			value === variableData.selectedValue ||
+			(Array.isArray(value) &&
+				Array.isArray(variableData.selectedValue) &&
+				areArraysEqual(value, variableData.selectedValue))
+		) {
+			return;
 		}
-		// Apply changes when closing dropdown
-		else if (!visible && tempSelection !== undefined) {
-			// Call handleChange with the temporarily stored selection
-			handleChange(tempSelection);
-			setTempSelection(undefined);
+		if (variableData.name) {
+			if (
+				value === ALL_SELECT_VALUE ||
+				(Array.isArray(value) && value.includes(ALL_SELECT_VALUE))
+			) {
+				onValueUpdate(variableData.name, variableData.id, optionsData, true);
+			} else {
+				onValueUpdate(variableData.name, variableData.id, value, false);
+			}
 		}
 	};
 
@@ -291,58 +281,10 @@ function VariableItem({
 			? 'ALL'
 			: selectedValueStringified;
 
-	// Apply default value on first render if no selection exists
-	// eslint-disable-next-line sonarjs/cognitive-complexity
-	const finalSelectedValues = useMemo(() => {
-		if (variableData.multiSelect) {
-			let value = tempSelection || selectedValue;
-			if (isEmpty(value)) {
-				if (variableData.showALLOption) {
-					if (variableData.defaultValue) {
-						value = variableData.defaultValue;
-					} else {
-						value = optionsData;
-					}
-				} else if (variableData.defaultValue) {
-					value = variableData.defaultValue;
-				} else {
-					value = optionsData?.[0];
-				}
-			}
-
-			return value;
-		}
-		if (isEmpty(selectedValue)) {
-			if (variableData.defaultValue) {
-				return variableData.defaultValue;
-			}
-			return optionsData[0]?.toString();
-		}
-
-		return selectedValue;
-	}, [
-		variableData.multiSelect,
-		variableData.showALLOption,
-		variableData.defaultValue,
-		selectedValue,
-		tempSelection,
-		optionsData,
-	]);
-
-	useEffect(() => {
-		if (
-			(variableData.multiSelect && !(tempSelection || selectValue)) ||
-			isEmpty(selectValue)
-		) {
-			handleChange(finalSelectedValues as string[] | string);
-		}
-	}, [
-		finalSelectedValues,
-		handleChange,
-		selectValue,
-		tempSelection,
-		variableData.multiSelect,
-	]);
+	const mode: 'multiple' | undefined =
+		variableData.multiSelect && !variableData.allSelected
+			? 'multiple'
+			: undefined;
 
 	useEffect(() => {
 		// Fetch options for CUSTOM Type
@@ -352,6 +294,113 @@ function VariableItem({
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [variableData.type, variableData.customValue]);
 
+	const checkAll = (e: MouseEvent): void => {
+		e.stopPropagation();
+		e.preventDefault();
+		const isChecked =
+			variableData.allSelected || selectValue?.includes(ALL_SELECT_VALUE);
+
+		if (isChecked) {
+			handleChange([]);
+		} else {
+			handleChange(ALL_SELECT_VALUE);
+		}
+	};
+
+	const handleOptionSelect = (
+		e: CheckboxChangeEvent,
+		option: string | number | boolean,
+	): void => {
+		const newSelectedValue = Array.isArray(selectedValue)
+			? ((selectedValue.filter(
+					(val) => val.toString() !== option.toString(),
+			  ) as unknown) as string[])
+			: [];
+
+		if (
+			!e.target.checked &&
+			Array.isArray(selectedValueStringified) &&
+			selectedValueStringified.includes(option.toString())
+		) {
+			if (newSelectedValue.length === 1) {
+				handleChange(newSelectedValue[0].toString());
+				return;
+			}
+			handleChange(newSelectedValue);
+		} else if (!e.target.checked && selectedValue === option.toString()) {
+			handleChange(ALL_SELECT_VALUE);
+		} else if (newSelectedValue.length === optionsData.length - 1) {
+			handleChange(ALL_SELECT_VALUE);
+		}
+	};
+
+	const [optionState, setOptionState] = useState({
+		tag: '',
+		visible: false,
+	});
+
+	function currentToggleTagValue({
+		option,
+	}: {
+		option: string;
+	}): ToggleTagValue {
+		if (
+			option.toString() === selectValue ||
+			(Array.isArray(selectValue) &&
+				selectValue?.includes(option.toString()) &&
+				selectValue.length === 1)
+		) {
+			return ToggleTagValue.All;
+		}
+		return ToggleTagValue.Only;
+	}
+
+	function handleToggle(e: ChangeEvent, option: string): void {
+		e.stopPropagation();
+		const mode = currentToggleTagValue({ option: option as string });
+		const isChecked =
+			variableData.allSelected ||
+			option.toString() === selectValue ||
+			(Array.isArray(selectValue) && selectValue?.includes(option.toString()));
+
+		if (isChecked) {
+			if (mode === ToggleTagValue.Only && variableData.multiSelect) {
+				handleChange([option.toString()]);
+			} else if (!variableData.multiSelect) {
+				handleChange(option.toString());
+			} else {
+				handleChange(ALL_SELECT_VALUE);
+			}
+		} else {
+			handleChange(option.toString());
+		}
+	}
+
+	function retProps(
+		option: string,
+	): {
+		onMouseOver: () => void;
+		onMouseOut: () => void;
+	} {
+		return {
+			onMouseOver: (): void =>
+				setOptionState({
+					tag: option.toString(),
+					visible: true,
+				}),
+			onMouseOut: (): void =>
+				setOptionState({
+					tag: option.toString(),
+					visible: false,
+				}),
+		};
+	}
+
+	const ensureValidOption = (option: string): boolean =>
+		!(
+			currentToggleTagValue({ option }) === ToggleTagValue.All && !enableSelectAll
+		);
+
 	return (
 		<div className="variable-item">
 			<Typography.Text className="variable-name" ellipsis>
@@ -379,73 +428,105 @@ function VariableItem({
 						}}
 					/>
 				) : (
-					optionsData &&
-					(variableData.multiSelect ? (
-						<CustomMultiSelect
+					!errorMessage &&
+					optionsData && (
+						<Select
 							key={
 								selectValue && Array.isArray(selectValue)
 									? selectValue.join(' ')
 									: selectValue || variableData.id
 							}
-							options={optionsData.map((option) => ({
-								label: option.toString(),
-								value: option.toString(),
-							}))}
-							defaultValue={variableData.defaultValue || selectValue}
-							onChange={handleTempChange}
+							defaultValue={selectValue}
+							onChange={handleChange}
 							bordered={false}
 							placeholder="Select value"
 							placement="bottomLeft"
+							mode={mode}
 							style={SelectItemStyle}
 							loading={isLoading}
 							showSearch
 							data-testid="variable-select"
 							className="variable-select"
 							popupClassName="dropdown-styles"
-							maxTagCount={2}
+							maxTagCount={4}
 							getPopupContainer={popupContainer}
-							value={tempSelection || selectValue}
-							onDropdownVisibleChange={handleDropdownVisibleChange}
-							errorMessage={errorMessage}
+							// eslint-disable-next-line react/no-unstable-nested-components
+							tagRender={(props): JSX.Element => (
+								<Tag closable onClose={props.onClose}>
+									{props.value}
+								</Tag>
+							)}
 							// eslint-disable-next-line react/no-unstable-nested-components
 							maxTagPlaceholder={(omittedValues): JSX.Element => (
 								<Tooltip title={omittedValues.map(({ value }) => value).join(', ')}>
 									<span>+ {omittedValues.length} </span>
 								</Tooltip>
 							)}
-							onClear={(): void => {
-								handleChange([]);
-							}}
-							enableAllSelection={enableSelectAll}
-							maxTagTextLength={30}
 							allowClear={selectValue !== ALL_SELECT_VALUE && selectValue !== 'ALL'}
-						/>
-					) : (
-						<CustomSelect
-							key={
-								selectValue && Array.isArray(selectValue)
-									? selectValue.join(' ')
-									: selectValue || variableData.id
-							}
-							defaultValue={variableData.defaultValue || selectValue}
-							onChange={handleChange}
-							bordered={false}
-							placeholder="Select value"
-							style={SelectItemStyle}
-							loading={isLoading}
-							showSearch
-							data-testid="variable-select"
-							className="variable-select"
-							popupClassName="dropdown-styles"
-							getPopupContainer={popupContainer}
-							options={optionsData.map((option) => ({
-								label: option.toString(),
-								value: option.toString(),
-							}))}
-							value={selectValue}
-							errorMessage={errorMessage}
-						/>
-					))
+						>
+							{enableSelectAll && (
+								<Select.Option data-testid="option-ALL" value={ALL_SELECT_VALUE}>
+									<div className="all-label" onClick={(e): void => checkAll(e as any)}>
+										<Checkbox checked={variableData.allSelected} />
+										ALL
+									</div>
+								</Select.Option>
+							)}
+							{map(optionsData, (option) => (
+								<Select.Option
+									data-testid={`option-${option}`}
+									key={option.toString()}
+									value={option}
+								>
+									<div
+										className={variableData.multiSelect ? 'dropdown-checkbox-label' : ''}
+									>
+										{variableData.multiSelect && (
+											<Checkbox
+												onChange={(e): void => {
+													e.stopPropagation();
+													e.preventDefault();
+													handleOptionSelect(e, option);
+												}}
+												checked={
+													variableData.allSelected ||
+													option.toString() === selectValue ||
+													(Array.isArray(selectValue) &&
+														selectValue?.includes(option.toString()))
+												}
+											/>
+										)}
+										<div
+											className="dropdown-value"
+											{...retProps(option as string)}
+											onClick={(e): void => handleToggle(e as any, option as string)}
+										>
+											<Typography.Text
+												ellipsis={{
+													tooltip: {
+														placement: variableData.multiSelect ? 'top' : 'right',
+														autoAdjustOverflow: true,
+													},
+												}}
+												className="option-text"
+											>
+												{option.toString()}
+											</Typography.Text>
+
+											{variableData.multiSelect &&
+												optionState.tag === option.toString() &&
+												optionState.visible &&
+												ensureValidOption(option as string) && (
+													<Typography.Text className="toggle-tag-label">
+														{currentToggleTagValue({ option: option as string })}
+													</Typography.Text>
+												)}
+										</div>
+									</div>
+								</Select.Option>
+							))}
+						</Select>
+					)
 				)}
 				{variableData.type !== 'TEXTBOX' && errorMessage && (
 					<span style={{ margin: '0 0.5rem' }}>

frontend/src/container/NewDashboard/DashboardVariablesSelection/__test__/DynamicVariableSelection.test.tsx

@@ -1,274 +0,0 @@
-/* eslint-disable react/jsx-props-no-spreading */
-/* eslint-disable sonarjs/no-duplicate-string */
-import { fireEvent, render, screen } from '@testing-library/react';
-import * as ReactQuery from 'react-query';
-import * as ReactRedux from 'react-redux';
-import { IDashboardVariable } from 'types/api/dashboard/getAll';
-
-import DynamicVariableSelection from '../DynamicVariableSelection';
-
-// Don't mock the components - use real ones
-
-// Mock for useQuery
-const mockQueryResult = {
-	data: undefined,
-	error: null,
-	isError: false,
-	isIdle: false,
-	isLoading: false,
-	isPreviousData: false,
-	isSuccess: true,
-	status: 'success',
-	isFetched: true,
-	isFetchingNextPage: false,
-	isFetchingPreviousPage: false,
-	isPlaceholderData: false,
-	isPaused: false,
-	isRefetchError: false,
-	isRefetching: false,
-	isStale: false,
-	isLoadingError: false,
-	isFetching: false,
-	isFetchedAfterMount: true,
-	dataUpdatedAt: 0,
-	errorUpdatedAt: 0,
-	failureCount: 0,
-	refetch: jest.fn(),
-	remove: jest.fn(),
-	fetchNextPage: jest.fn(),
-	fetchPreviousPage: jest.fn(),
-	hasNextPage: false,
-	hasPreviousPage: false,
-	// eslint-disable-next-line @typescript-eslint/no-explicit-any
-} as any;
-
-// Sample data for testing
-const mockApiResponse = {
-	payload: {
-		normalizedValues: ['frontend', 'backend', 'database'],
-		complete: true,
-	},
-	statusCode: 200,
-};
-
-// Mock scrollIntoView since it's not available in JSDOM
-window.HTMLElement.prototype.scrollIntoView = jest.fn();
-
-describe('DynamicVariableSelection Component', () => {
-	const mockOnValueUpdate = jest.fn();
-
-	const mockDynamicVariableData: IDashboardVariable = {
-		id: 'var1',
-		name: 'service',
-		type: 'DYNAMIC',
-		dynamicVariablesAttribute: 'service.name',
-		dynamicVariablesSource: 'Traces',
-		selectedValue: 'frontend',
-		multiSelect: false,
-		showALLOption: false,
-		allSelected: false,
-		description: '',
-		sort: 'DISABLED',
-	};
-
-	const mockMultiSelectDynamicVariableData: IDashboardVariable = {
-		...mockDynamicVariableData,
-		id: 'var2',
-		name: 'services',
-		multiSelect: true,
-		selectedValue: ['frontend', 'backend'],
-		showALLOption: true,
-	};
-
-	const mockExistingVariables: Record<string, IDashboardVariable> = {
-		var1: mockDynamicVariableData,
-		var2: mockMultiSelectDynamicVariableData,
-	};
-
-	beforeEach(() => {
-		jest.clearAllMocks();
-		mockOnValueUpdate.mockClear();
-
-		// Mock useSelector
-		const useSelectorSpy = jest.spyOn(ReactRedux, 'useSelector');
-		useSelectorSpy.mockReturnValue({
-			minTime: '2023-01-01T00:00:00Z',
-			maxTime: '2023-01-02T00:00:00Z',
-		});
-
-		// Mock useQuery with success state
-		const useQuerySpy = jest.spyOn(ReactQuery, 'useQuery');
-		useQuerySpy.mockReturnValue({
-			...mockQueryResult,
-			data: mockApiResponse,
-			isLoading: false,
-			error: null,
-		});
-	});
-
-	it('renders with single select variable correctly', () => {
-		render(
-			<DynamicVariableSelection
-				variableData={mockDynamicVariableData}
-				existingVariables={mockExistingVariables}
-				onValueUpdate={mockOnValueUpdate}
-			/>,
-		);
-
-		// Verify component renders correctly
-		expect(
-			screen.getByText(`$${mockDynamicVariableData.name}`),
-		).toBeInTheDocument();
-
-		// Verify the selected value is displayed
-		const selectedItem = screen.getByRole('combobox');
-		expect(selectedItem).toBeInTheDocument();
-
-		// CustomSelect doesn't use the 'mode' attribute for single select
-		expect(selectedItem).not.toHaveAttribute('mode');
-	});
-
-	it('renders with multi select variable correctly', () => {
-		// First set up allSelected to true to properly test the ALL display
-		const multiSelectWithAllSelected = {
-			...mockMultiSelectDynamicVariableData,
-			allSelected: true,
-		};
-
-		render(
-			<DynamicVariableSelection
-				variableData={multiSelectWithAllSelected}
-				existingVariables={mockExistingVariables}
-				onValueUpdate={mockOnValueUpdate}
-			/>,
-		);
-
-		// Verify variable name is rendered
-		expect(
-			screen.getByText(`$${multiSelectWithAllSelected.name}`),
-		).toBeInTheDocument();
-
-		// In ALL selected mode, there should be an "ALL" text element
-		expect(screen.getByText('ALL')).toBeInTheDocument();
-	});
-
-	it('shows loading state correctly', () => {
-		// Mock loading state
-		jest.spyOn(ReactQuery, 'useQuery').mockReturnValue({
-			...mockQueryResult,
-			data: null,
-			isLoading: true,
-			isFetching: true,
-			isSuccess: false,
-			status: 'loading',
-		});
-
-		render(
-			<DynamicVariableSelection
-				variableData={mockDynamicVariableData}
-				existingVariables={mockExistingVariables}
-				onValueUpdate={mockOnValueUpdate}
-			/>,
-		);
-
-		// Verify component renders in loading state
-		expect(
-			screen.getByText(`$${mockDynamicVariableData.name}`),
-		).toBeInTheDocument();
-
-		// Open dropdown to see loading text
-		const selectElement = screen.getByRole('combobox');
-		fireEvent.mouseDown(selectElement);
-
-		// The loading text should appear in the dropdown
-		expect(screen.getByText('We are updating the values...')).toBeInTheDocument();
-	});
-
-	it('handles error state correctly', () => {
-		const errorMessage = 'Failed to fetch data';
-
-		// Mock error state
-		jest.spyOn(ReactQuery, 'useQuery').mockReturnValue({
-			...mockQueryResult,
-			data: null,
-			isLoading: false,
-			isSuccess: false,
-			isError: true,
-			status: 'error',
-			error: { message: errorMessage },
-		});
-
-		render(
-			<DynamicVariableSelection
-				variableData={mockDynamicVariableData}
-				existingVariables={mockExistingVariables}
-				onValueUpdate={mockOnValueUpdate}
-			/>,
-		);
-
-		// Verify the component renders
-		expect(
-			screen.getByText(`$${mockDynamicVariableData.name}`),
-		).toBeInTheDocument();
-
-		// For error states, we should check that error handling is in place
-		// Without opening the dropdown as the error message might be handled differently
-		expect(ReactQuery.useQuery).toHaveBeenCalled();
-		// We don't need to check refetch as it might be called during component initialization
-	});
-
-	it('makes API call to fetch variable values', () => {
-		render(
-			<DynamicVariableSelection
-				variableData={mockDynamicVariableData}
-				existingVariables={mockExistingVariables}
-				onValueUpdate={mockOnValueUpdate}
-			/>,
-		);
-
-		// Verify the useQuery hook was called with expected parameters
-		expect(ReactQuery.useQuery).toHaveBeenCalledWith(
-			[
-				'DASHBOARD_BY_ID',
-				mockDynamicVariableData.name,
-				'service:"frontend"|services:["frontend","backend"]', // The actual dynamicVariablesKey
-				'2023-01-01T00:00:00Z', // minTime from useSelector mock
-				'2023-01-02T00:00:00Z', // maxTime from useSelector mock
-			],
-			expect.objectContaining({
-				enabled: true, // Type is 'DYNAMIC'
-				queryFn: expect.any(Function),
-				onSuccess: expect.any(Function),
-				onError: expect.any(Function),
-			}),
-		);
-	});
-
-	it('has the correct selected value', () => {
-		// Use a different variable configuration to test different behavior
-		const customVariable = {
-			...mockDynamicVariableData,
-			id: 'custom1',
-			name: 'customService',
-			selectedValue: 'backend',
-		};
-
-		render(
-			<DynamicVariableSelection
-				variableData={customVariable}
-				existingVariables={{ ...mockExistingVariables, custom1: customVariable }}
-				onValueUpdate={mockOnValueUpdate}
-			/>,
-		);
-
-		// Verify the component correctly displays the selected value
-		expect(screen.getByText(`$${customVariable.name}`)).toBeInTheDocument();
-
-		// Find the selection item in the component using data-testid
-		const selectElement = screen.getByTestId('variable-select');
-		expect(selectElement).toBeInTheDocument();
-
-		// Check that the selected value is displayed in the select element
-		expect(selectElement).toHaveTextContent('backend');
-	});
-});

frontend/src/container/NewDashboard/DashboardVariablesSelection/__test__/dashboardVariables.test.tsx

@@ -191,16 +191,6 @@ describe('dashboardVariables - utilities and processors', () => {
 		describe('buildDependencyGraph', () => {
 			it('should build complete dependency graph with correct structure and order', () => {
 				const expected = {
-					graph: {
-						deployment_environment: ['service_name', 'endpoint'],
-						service_name: ['endpoint'],
-						endpoint: ['http_status_code'],
-						http_status_code: [],
-						k8s_cluster_name: ['k8s_node_name', 'k8s_namespace_name'],
-						k8s_node_name: ['k8s_namespace_name'],
-						k8s_namespace_name: [],
-						environment: [],
-					},
 					order: [
 						'deployment_environment',
 						'k8s_cluster_name',
@@ -211,6 +201,28 @@ describe('dashboardVariables - utilities and processors', () => {
 						'k8s_namespace_name',
 						'http_status_code',
 					],
+					graph: {
+						deployment_environment: ['service_name', 'endpoint'],
+						service_name: ['endpoint'],
+						endpoint: ['http_status_code'],
+						http_status_code: [],
+						k8s_cluster_name: ['k8s_node_name', 'k8s_namespace_name'],
+						k8s_node_name: ['k8s_namespace_name'],
+						k8s_namespace_name: [],
+						environment: [],
+					},
+					parentDependencyGraph: {
+						deployment_environment: [],
+						service_name: ['deployment_environment'],
+						endpoint: ['deployment_environment', 'service_name'],
+						http_status_code: ['endpoint'],
+						k8s_cluster_name: [],
+						k8s_node_name: ['k8s_cluster_name'],
+						k8s_namespace_name: ['k8s_cluster_name', 'k8s_node_name'],
+						environment: [],
+					},
+					hasCycle: false,
+					cycleNodes: undefined,
 				};
 
 				expect(buildDependencyGraph(graph)).toEqual(expected);

frontend/src/container/NewDashboard/DashboardVariablesSelection/util.ts

@@ -95,10 +95,96 @@ export const buildDependencies = (
 	return graph;
 };
 
-// Function to build the dependency graph
+export interface IDependencyData {
+	order: string[];
+	graph: VariableGraph;
+	parentDependencyGraph: VariableGraph;
+	hasCycle: boolean;
+	cycleNodes?: string[];
+}
+
+export const buildParentDependencyGraph = (
+	graph: VariableGraph,
+): VariableGraph => {
+	const parentGraph: VariableGraph = {};
+
+	// Initialize empty arrays for all nodes
+	Object.keys(graph).forEach((node) => {
+		parentGraph[node] = [];
+	});
+
+	// For each node and its children in the original graph
+	Object.entries(graph).forEach(([node, children]) => {
+		// For each child, add the current node as its parent
+		children.forEach((child) => {
+			parentGraph[child].push(node);
+		});
+	});
+
+	return parentGraph;
+};
+
+const collectCyclePath = (
+	graph: VariableGraph,
+	start: string,
+	end: string,
+): string[] => {
+	const path: string[] = [];
+	let current = start;
+
+	const findParent = (node: string): string | undefined =>
+		Object.keys(graph).find((key) => graph[key]?.includes(node));
+
+	while (current !== end) {
+		const parent = findParent(current);
+		if (!parent) break;
+		path.push(parent);
+		current = parent;
+	}
+
+	return [start, ...path];
+};
+
+const detectCycle = (
+	graph: VariableGraph,
+	node: string,
+	visited: Set<string>,
+	recStack: Set<string>,
+): string[] | null => {
+	if (!visited.has(node)) {
+		visited.add(node);
+		recStack.add(node);
+
+		const neighbors = graph[node] || [];
+		let cycleNodes: string[] | null = null;
+
+		neighbors.some((neighbor) => {
+			if (!visited.has(neighbor)) {
+				const foundCycle = detectCycle(graph, neighbor, visited, recStack);
+				if (foundCycle) {
+					cycleNodes = foundCycle;
+					return true;
+				}
+			} else if (recStack.has(neighbor)) {
+				// Found a cycle, collect the cycle nodes
+				cycleNodes = collectCyclePath(graph, node, neighbor);
+				return true;
+			}
+			return false;
+		});
+
+		if (cycleNodes) {
+			return cycleNodes;
+		}
+	}
+	recStack.delete(node);
+	return null;
+};
+
 export const buildDependencyGraph = (
 	dependencies: VariableGraph,
-): { order: string[]; graph: VariableGraph } => {
+	// eslint-disable-next-line sonarjs/cognitive-complexity
+): IDependencyData => {
 	const inDegree: Record<string, number> = {};
 	const adjList: VariableGraph = {};
 
@@ -113,6 +199,22 @@ export const buildDependencyGraph = (
 		});
 	});
 
+	// Detect cycles
+	const visited = new Set<string>();
+	const recStack = new Set<string>();
+	let cycleNodes: string[] | undefined;
+
+	Object.keys(dependencies).some((node) => {
+		if (!visited.has(node)) {
+			const foundCycle = detectCycle(dependencies, node, visited, recStack);
+			if (foundCycle) {
+				cycleNodes = foundCycle;
+				return true;
+			}
+		}
+		return false;
+	});
+
 	// Topological sort using Kahn's Algorithm
 	const queue: string[] = Object.keys(inDegree).filter(
 		(node) => inDegree[node] === 0,
@@ -132,11 +234,15 @@ export const buildDependencyGraph = (
 		});
 	}
 
-	if (topologicalOrder.length !== Object.keys(dependencies)?.length) {
-		console.error('Cycle detected in the dependency graph!');
-	}
+	const hasCycle = topologicalOrder.length !== Object.keys(dependencies)?.length;
 
-	return { order: topologicalOrder, graph: adjList };
+	return {
+		order: topologicalOrder,
+		graph: adjList,
+		parentDependencyGraph: buildParentDependencyGraph(adjList),
+		hasCycle,
+		cycleNodes,
+	};
 };
 
 export const onUpdateVariableNode = (
@@ -159,27 +265,6 @@ export const onUpdateVariableNode = (
 	});
 };
 
-export const buildParentDependencyGraph = (
-	graph: VariableGraph,
-): VariableGraph => {
-	const parentGraph: VariableGraph = {};
-
-	// Initialize empty arrays for all nodes
-	Object.keys(graph).forEach((node) => {
-		parentGraph[node] = [];
-	});
-
-	// For each node and its children in the original graph
-	Object.entries(graph).forEach(([node, children]) => {
-		// For each child, add the current node as its parent
-		children.forEach((child) => {
-			parentGraph[child].push(node);
-		});
-	});
-
-	return parentGraph;
-};
-
 export const checkAPIInvocation = (
 	variablesToGetUpdated: string[],
 	variableData: IDashboardVariable,
@@ -206,9 +291,3 @@ export const checkAPIInvocation = (
 		variablesToGetUpdated[0] === variableData.name
 	);
 };
-
-export interface IDependencyData {
-	order: string[];
-	graph: VariableGraph;
-	parentDependencyGraph: VariableGraph;
-}

frontend/src/container/NewDashboard/utils.ts

@@ -14,5 +14,3 @@ export function variablePropsToPayloadVariables(
 
 	return payloadVariables;
 }
-
-export const ALL_SELECT_VALUE = '__ALL__';

frontend/src/container/SideNav/menuItems.tsx

@@ -125,7 +125,7 @@ const menuItems: SidebarItem[] = [
 	},
 	{
 		key: ROUTES.API_MONITORING,
-		label: 'Third Party API',
+		label: 'External APIs',
 		icon: <Binoculars size={16} />,
 		isNew: true,
 	},

frontend/src/hooks/TracesFunnels/useFunnelConfiguration.tsx

@@ -43,8 +43,7 @@ export default function useFunnelConfiguration({
 	const {
 		steps,
 		initialSteps,
-		setHasIncompleteStepFields,
-		setHasAllEmptyStepFields,
+		hasIncompleteStepFields,
 		handleRestoreSteps,
 	} = useFunnelContext();
 
@@ -74,14 +73,16 @@ export default function useFunnelConfiguration({
 		return !isEqual(normalizedDebouncedSteps, normalizedLastSavedSteps);
 	}, [debouncedSteps]);
 
-	const hasStepServiceOrSpanNameChanged = useCallback(
+	const hasFunnelStepDefinitionsChanged = useCallback(
 		(prevSteps: FunnelStepData[], nextSteps: FunnelStepData[]): boolean => {
 			if (prevSteps.length !== nextSteps.length) return true;
 			return prevSteps.some((step, index) => {
 				const nextStep = nextSteps[index];
 				return (
 					step.service_name !== nextStep.service_name ||
-					step.span_name !== nextStep.span_name
+					step.span_name !== nextStep.span_name ||
+					!isEqual(step.filters, nextStep.filters) ||
+					step.has_errors !== nextStep.has_errors
 				);
 			});
 		},
@@ -106,12 +107,7 @@ export default function useFunnelConfiguration({
 		[funnel.funnel_id, selectedTime],
 	);
 	useEffect(() => {
-		// Check if all steps have both service_name and span_name defined
-		const shouldUpdate = debouncedSteps.every(
-			(step) => step.service_name !== '' && step.span_name !== '',
-		);
-
-		if (hasStepsChanged() && shouldUpdate) {
+		if (hasStepsChanged() && !hasIncompleteStepFields) {
 			updateStepsMutation.mutate(getUpdatePayload(), {
 				onSuccess: (data) => {
 					const updatedFunnelSteps = data?.payload?.steps;
@@ -135,17 +131,10 @@ export default function useFunnelConfiguration({
 						(step) => step.service_name === '' || step.span_name === '',
 					);
 
-					const hasAllEmptyStepsData = updatedFunnelSteps.every(
-						(step) => step.service_name === '' && step.span_name === '',
-					);
-
-					setHasIncompleteStepFields(hasIncompleteStepFields);
-					setHasAllEmptyStepFields(hasAllEmptyStepsData);
-
 					// Only validate if service_name or span_name changed
 					if (
 						!hasIncompleteStepFields &&
-						hasStepServiceOrSpanNameChanged(lastValidatedSteps, debouncedSteps)
+						hasFunnelStepDefinitionsChanged(lastValidatedSteps, debouncedSteps)
 					) {
 						queryClient.refetchQueries(validateStepsQueryKey);
 						setLastValidatedSteps(debouncedSteps);
@@ -171,7 +160,7 @@ export default function useFunnelConfiguration({
 	}, [
 		debouncedSteps,
 		getUpdatePayload,
-		hasStepServiceOrSpanNameChanged,
+		hasFunnelStepDefinitionsChanged,
 		hasStepsChanged,
 		lastValidatedSteps,
 		queryClient,

frontend/src/hooks/TracesFunnels/useFunnelMetrics.ts

@@ -2,8 +2,9 @@ import { getYAxisFormattedValue } from 'components/Graph/yAxisConfig';
 import { MetricItem } from 'pages/TracesFunnelDetails/components/FunnelResults/FunnelMetricsTable';
 import { useFunnelContext } from 'pages/TracesFunnels/FunnelContext';
 import { useMemo } from 'react';
+import { LatencyOptions } from 'types/api/traceFunnels';
 
-import { useFunnelOverview } from './useFunnels';
+import { useFunnelOverview, useFunnelStepsOverview } from './useFunnels';
 
 interface FunnelMetricsParams {
 	funnelId: string;
@@ -13,8 +14,6 @@ interface FunnelMetricsParams {
 
 export function useFunnelMetrics({
 	funnelId,
-	stepStart,
-	stepEnd,
 }: FunnelMetricsParams): {
 	isLoading: boolean;
 	isError: boolean;
@@ -25,8 +24,6 @@ export function useFunnelMetrics({
 	const payload = {
 		start_time: startTime,
 		end_time: endTime,
-		...(stepStart !== undefined && { step_start: stepStart }),
-		...(stepEnd !== undefined && { step_end: stepEnd }),
 	};
 
 	const {
@@ -48,14 +45,18 @@ export function useFunnelMetrics({
 			{ title: 'Errors', value: sourceData.errors },
 			{
 				title: 'Avg. Duration',
-				value: getYAxisFormattedValue(sourceData.avg_duration.toString(), 'ns'),
+				value: getYAxisFormattedValue(sourceData.avg_duration.toString(), 'ms'),
 			},
 			{
-				title: 'P99 Latency',
-				value: getYAxisFormattedValue(sourceData.p99_latency.toString(), 'ns'),
+				title: `P99 Latency`,
+				value: getYAxisFormattedValue(
+					// TODO(shaheer): remove p99_latency once we have support for latency
+					(sourceData.latency ?? sourceData.p99_latency).toString(),
+					'ms',
+				),
 			},
 		];
-	}, [overviewData]);
+	}, [overviewData?.payload?.data]);
 
 	const conversionRate =
 		overviewData?.payload?.data?.[0]?.data?.conversion_rate ?? 0;
@@ -67,3 +68,72 @@ export function useFunnelMetrics({
 		conversionRate,
 	};
 }
+export function useFunnelStepsMetrics({
+	funnelId,
+	stepStart,
+	stepEnd,
+}: FunnelMetricsParams): {
+	isLoading: boolean;
+	isError: boolean;
+	metricsData: MetricItem[];
+	conversionRate: number;
+} {
+	const { startTime, endTime, steps } = useFunnelContext();
+
+	const payload = {
+		start_time: startTime,
+		end_time: endTime,
+		step_start: stepStart,
+		step_end: stepEnd,
+	};
+
+	const {
+		data: stepsOverviewData,
+		isLoading,
+		isFetching,
+		isError,
+	} = useFunnelStepsOverview(funnelId, payload);
+
+	const latencyType = useMemo(
+		() => (stepStart ? steps[stepStart]?.latency_type : LatencyOptions.P99),
+		[stepStart, steps],
+	);
+
+	const metricsData = useMemo(() => {
+		const sourceData = stepsOverviewData?.payload?.data?.[0]?.data;
+		if (!sourceData) return [];
+
+		return [
+			{
+				title: 'Avg. Rate',
+				value: `${Number(sourceData.avg_rate.toFixed(2))} req/s`,
+			},
+			{ title: 'Errors', value: sourceData.errors },
+			{
+				title: 'Avg. Duration',
+				value: getYAxisFormattedValue(
+					(sourceData.avg_duration * 1_000_000).toString(),
+					'ns',
+				),
+			},
+			{
+				title: `${latencyType?.toUpperCase()} Latency`,
+				value: getYAxisFormattedValue(
+					// TODO(shaheer): remove p99_latency once we have support for latency
+					((sourceData.latency ?? sourceData.p99_latency) * 1_000_000).toString(),
+					'ns',
+				),
+			},
+		];
+	}, [stepsOverviewData, latencyType]);
+
+	const conversionRate =
+		stepsOverviewData?.payload?.data?.[0]?.data?.conversion_rate ?? 0;
+
+	return {
+		isLoading: isLoading || isFetching,
+		isError,
+		metricsData,
+		conversionRate,
+	};
+}

frontend/src/hooks/TracesFunnels/useFunnels.tsx

@@ -3,9 +3,10 @@ import {
 	createFunnel,
 	deleteFunnel,
 	ErrorTraceData,
-	ErrorTracesPayload,
 	FunnelOverviewPayload,
 	FunnelOverviewResponse,
+	FunnelStepsOverviewPayload,
+	FunnelStepsOverviewResponse,
 	FunnelStepsResponse,
 	getFunnelById,
 	getFunnelErrorTraces,
@@ -13,11 +14,11 @@ import {
 	getFunnelsList,
 	getFunnelSlowTraces,
 	getFunnelSteps,
+	getFunnelStepsOverview,
 	renameFunnel,
 	RenameFunnelPayload,
 	saveFunnelDescription,
 	SlowTraceData,
-	SlowTracesPayload,
 	updateFunnelSteps,
 	UpdateFunnelStepsPayload,
 	ValidateFunnelResponse,
@@ -115,11 +116,13 @@ export const useValidateFunnelSteps = ({
 	selectedTime,
 	startTime,
 	endTime,
+	enabled,
 }: {
 	funnelId: string;
 	selectedTime: string;
 	startTime: number;
 	endTime: number;
+	enabled: boolean;
 }): UseQueryResult<
 	SuccessResponse<ValidateFunnelResponse> | ErrorResponse,
 	Error
@@ -132,8 +135,8 @@ export const useValidateFunnelSteps = ({
 				signal,
 			),
 		queryKey: [REACT_QUERY_KEY.VALIDATE_FUNNEL_STEPS, funnelId, selectedTime],
-		enabled: !!funnelId && !!selectedTime && !!startTime && !!endTime,
-		staleTime: 1000 * 60 * 5,
+		enabled,
+		staleTime: 0,
 	});
 
 interface SaveFunnelDescriptionPayload {
@@ -157,7 +160,11 @@ export const useFunnelOverview = (
 	SuccessResponse<FunnelOverviewResponse> | ErrorResponse,
 	Error
 > => {
-	const { selectedTime, validTracesCount } = useFunnelContext();
+	const {
+		selectedTime,
+		validTracesCount,
+		hasFunnelBeenExecuted,
+	} = useFunnelContext();
 	return useQuery({
 		queryFn: ({ signal }) => getFunnelOverview(funnelId, payload, signal),
 		queryKey: [
@@ -167,31 +174,51 @@ export const useFunnelOverview = (
 			payload.step_start ?? '',
 			payload.step_end ?? '',
 		],
-		enabled: !!funnelId && validTracesCount > 0,
+		enabled: !!funnelId && validTracesCount > 0 && hasFunnelBeenExecuted,
 	});
 };
 
 export const useFunnelSlowTraces = (
 	funnelId: string,
-	payload: SlowTracesPayload,
+	payload: FunnelOverviewPayload,
 ): UseQueryResult<SuccessResponse<SlowTraceData> | ErrorResponse, Error> => {
-	const { selectedTime, validTracesCount } = useFunnelContext();
+	const {
+		selectedTime,
+		validTracesCount,
+		hasFunnelBeenExecuted,
+	} = useFunnelContext();
 	return useQuery<SuccessResponse<SlowTraceData> | ErrorResponse, Error>({
 		queryFn: ({ signal }) => getFunnelSlowTraces(funnelId, payload, signal),
-		queryKey: [REACT_QUERY_KEY.GET_FUNNEL_SLOW_TRACES, funnelId, selectedTime],
-		enabled: !!funnelId && validTracesCount > 0,
+		queryKey: [
+			REACT_QUERY_KEY.GET_FUNNEL_SLOW_TRACES,
+			funnelId,
+			selectedTime,
+			payload.step_start ?? '',
+			payload.step_end ?? '',
+		],
+		enabled: !!funnelId && validTracesCount > 0 && hasFunnelBeenExecuted,
 	});
 };
 
 export const useFunnelErrorTraces = (
 	funnelId: string,
-	payload: ErrorTracesPayload,
+	payload: FunnelOverviewPayload,
 ): UseQueryResult<SuccessResponse<ErrorTraceData> | ErrorResponse, Error> => {
-	const { selectedTime, validTracesCount } = useFunnelContext();
+	const {
+		selectedTime,
+		validTracesCount,
+		hasFunnelBeenExecuted,
+	} = useFunnelContext();
 	return useQuery({
 		queryFn: ({ signal }) => getFunnelErrorTraces(funnelId, payload, signal),
-		queryKey: [REACT_QUERY_KEY.GET_FUNNEL_ERROR_TRACES, funnelId, selectedTime],
-		enabled: !!funnelId && validTracesCount > 0,
+		queryKey: [
+			REACT_QUERY_KEY.GET_FUNNEL_ERROR_TRACES,
+			funnelId,
+			selectedTime,
+			payload.step_start ?? '',
+			payload.step_end ?? '',
+		],
+		enabled: !!funnelId && validTracesCount > 0 && hasFunnelBeenExecuted,
 	});
 };
 
@@ -203,6 +230,7 @@ export function useFunnelStepsGraphData(
 		endTime,
 		selectedTime,
 		validTracesCount,
+		hasFunnelBeenExecuted,
 	} = useFunnelContext();
 
 	return useQuery({
@@ -217,6 +245,31 @@ export function useFunnelStepsGraphData(
 			funnelId,
 			selectedTime,
 		],
-		enabled: !!funnelId && validTracesCount > 0,
+		enabled: !!funnelId && validTracesCount > 0 && hasFunnelBeenExecuted,
 	});
 }
+
+export const useFunnelStepsOverview = (
+	funnelId: string,
+	payload: FunnelStepsOverviewPayload,
+): UseQueryResult<
+	SuccessResponse<FunnelStepsOverviewResponse> | ErrorResponse,
+	Error
+> => {
+	const {
+		selectedTime,
+		validTracesCount,
+		hasFunnelBeenExecuted,
+	} = useFunnelContext();
+	return useQuery({
+		queryFn: ({ signal }) => getFunnelStepsOverview(funnelId, payload, signal),
+		queryKey: [
+			REACT_QUERY_KEY.GET_FUNNEL_STEPS_OVERVIEW,
+			funnelId,
+			selectedTime,
+			payload.step_start ?? '',
+			payload.step_end ?? '',
+		],
+		enabled: !!funnelId && validTracesCount > 0 && hasFunnelBeenExecuted,
+	});
+};

frontend/src/hooks/apDex/useGetApDexSettings.ts

@@ -1,12 +1,16 @@
-import { getApDexSettings } from 'api/metrics/ApDex/getApDexSettings';
-import { AxiosError, AxiosResponse } from 'axios';
+import getApDexSettings from 'api/v1/settings/apdex/services/get';
 import { useQuery, UseQueryResult } from 'react-query';
+import { SuccessResponseV2 } from 'types/api';
+import APIError from 'types/api/error';
 import { ApDexPayloadAndSettingsProps } from 'types/api/metrics/getApDex';
 
 export const useGetApDexSettings = (
 	servicename: string,
-): UseQueryResult<AxiosResponse<ApDexPayloadAndSettingsProps[]>, AxiosError> =>
-	useQuery<AxiosResponse<ApDexPayloadAndSettingsProps[]>, AxiosError>({
+): UseQueryResult<
+	SuccessResponseV2<ApDexPayloadAndSettingsProps[]>,
+	APIError
+> =>
+	useQuery<SuccessResponseV2<ApDexPayloadAndSettingsProps[]>, APIError>({
 		queryKey: [{ servicename }],
 		queryFn: async () => getApDexSettings(servicename),
 	});

frontend/src/hooks/dashboard/__test__/useGetResolvedText.test.tsx

@@ -73,18 +73,20 @@ describe('useGetResolvedText', () => {
 	});
 
 	it('should handle different variable formats', () => {
-		const text = 'Logs in $service.name, {{service.name}}, [[service.name]]';
+		const text =
+			'Logs in $service.name, {{service.name}}, [[service.name]] - $dyn-service.name';
 		const variables = {
 			'service.name': SERVICE_VAR,
+			'$dyn-service.name': 'dyn-1, dyn-2',
 		};
 
 		const { result } = renderHookWithProps({ text, variables });
 
 		expect(result.current.truncatedText).toBe(
-			'Logs in test, app +2, test, app +2, test, app +2',
+			'Logs in test, app +2, test, app +2, test, app +2 - dyn-1, dyn-2',
 		);
 		expect(result.current.fullText).toBe(
-			'Logs in test, app, frontend, env, test, app, frontend, env, test, app, frontend, env',
+			'Logs in test, app, frontend, env, test, app, frontend, env, test, app, frontend, env - dyn-1, dyn-2',
 		);
 	});
 

frontend/src/hooks/dashboard/__test__/useVariablesFromUrl.test.tsx

@@ -1,169 +0,0 @@
-import { act, renderHook } from '@testing-library/react';
-import { QueryParams } from 'constants/query';
-import { createMemoryHistory } from 'history';
-import { Router } from 'react-router-dom';
-import { IDashboardVariable } from 'types/api/dashboard/getAll';
-
-import useVariablesFromUrl from '../useVariablesFromUrl';
-
-describe('useVariablesFromUrl', () => {
-	it('should initialize with empty variables when no URL params exist', () => {
-		const history = createMemoryHistory({
-			initialEntries: ['/'],
-		});
-
-		const { result } = renderHook(() => useVariablesFromUrl(), {
-			wrapper: ({ children }: { children: React.ReactNode }) => (
-				<Router history={history}>{children}</Router>
-			),
-		});
-
-		expect(result.current.getUrlVariables()).toEqual({});
-	});
-
-	it('should correctly parse variables from URL', () => {
-		const mockVariables = {
-			var1: { selectedValue: 'value1', allSelected: false },
-			var2: { selectedValue: ['value2', 'value3'], allSelected: true },
-		};
-
-		const encodedVariables = encodeURIComponent(JSON.stringify(mockVariables));
-		const history = createMemoryHistory({
-			initialEntries: [`/?${QueryParams.variableConfigs}=${encodedVariables}`],
-		});
-
-		const { result } = renderHook(() => useVariablesFromUrl(), {
-			wrapper: ({ children }: { children: React.ReactNode }) => (
-				<Router history={history}>{children}</Router>
-			),
-		});
-
-		expect(result.current.getUrlVariables()).toEqual(mockVariables);
-	});
-
-	it('should handle malformed URL parameters gracefully', () => {
-		const history = createMemoryHistory({
-			initialEntries: [`/?${QueryParams.variableConfigs}=invalid-json`],
-		});
-
-		const { result } = renderHook(() => useVariablesFromUrl(), {
-			wrapper: ({ children }: { children: React.ReactNode }) => (
-				<Router history={history}>{children}</Router>
-			),
-		});
-
-		// Should return empty object when JSON parsing fails
-		expect(result.current.getUrlVariables()).toEqual({});
-	});
-
-	it('should set variables to URL correctly', () => {
-		const history = createMemoryHistory({
-			initialEntries: ['/'],
-		});
-
-		const { result } = renderHook(() => useVariablesFromUrl(), {
-			wrapper: ({ children }: { children: React.ReactNode }) => (
-				<Router history={history}>{children}</Router>
-			),
-		});
-
-		const mockVariables = {
-			var1: { selectedValue: 'value1', allSelected: false },
-		};
-
-		act(() => {
-			result.current.setUrlVariables(mockVariables);
-		});
-
-		// Check if the URL was updated correctly
-		const searchParams = new URLSearchParams(history.location.search);
-		const urlVariables = searchParams.get(QueryParams.variableConfigs);
-
-		expect(urlVariables).toBeTruthy();
-		expect(JSON.parse(decodeURIComponent(urlVariables || ''))).toEqual(
-			mockVariables,
-		);
-	});
-
-	it('should remove variables param from URL when empty object is provided', () => {
-		const mockVariables = {
-			var1: { selectedValue: 'value1', allSelected: false },
-		};
-
-		const encodedVariables = encodeURIComponent(JSON.stringify(mockVariables));
-		const history = createMemoryHistory({
-			initialEntries: [`/?${QueryParams.variableConfigs}=${encodedVariables}`],
-		});
-
-		const { result } = renderHook(() => useVariablesFromUrl(), {
-			wrapper: ({ children }: { children: React.ReactNode }) => (
-				<Router history={history}>{children}</Router>
-			),
-		});
-
-		act(() => {
-			result.current.setUrlVariables({});
-		});
-
-		// Check if the URL param was removed
-		const searchParams = new URLSearchParams(history.location.search);
-		expect(searchParams.has(QueryParams.variableConfigs)).toBe(false);
-	});
-
-	it('should update a specific variable correctly', () => {
-		const initialVariables = {
-			var1: { selectedValue: 'value1', allSelected: false },
-			var2: { selectedValue: ['value2'], allSelected: true },
-		};
-
-		const encodedVariables = encodeURIComponent(JSON.stringify(initialVariables));
-		const history = createMemoryHistory({
-			initialEntries: [`/?${QueryParams.variableConfigs}=${encodedVariables}`],
-		});
-
-		const { result } = renderHook(() => useVariablesFromUrl(), {
-			wrapper: ({ children }: { children: React.ReactNode }) => (
-				<Router history={history}>{children}</Router>
-			),
-		});
-
-		const newValue: IDashboardVariable['selectedValue'] = 'updated-value';
-
-		act(() => {
-			result.current.updateUrlVariable('var1', newValue, true);
-		});
-
-		// Check if only the specified variable was updated
-		const updatedVariables = result.current.getUrlVariables();
-		expect(updatedVariables.var1).toEqual({
-			selectedValue: newValue,
-			allSelected: true,
-		});
-		expect(updatedVariables.var2).toEqual(initialVariables.var2);
-	});
-
-	it('should preserve other URL parameters when updating variables', () => {
-		const history = createMemoryHistory({
-			initialEntries: ['/?otherParam=value'],
-		});
-
-		const { result } = renderHook(() => useVariablesFromUrl(), {
-			wrapper: ({ children }: { children: React.ReactNode }) => (
-				<Router history={history}>{children}</Router>
-			),
-		});
-
-		const mockVariables = {
-			var1: { selectedValue: 'value1', allSelected: false },
-		};
-
-		act(() => {
-			result.current.setUrlVariables(mockVariables);
-		});
-
-		// Check if other params are preserved
-		const searchParams = new URLSearchParams(history.location.search);
-		expect(searchParams.get('otherParam')).toBe('value');
-		expect(searchParams.has(QueryParams.variableConfigs)).toBe(true);
-	});
-});

frontend/src/hooks/dashboard/useGetResolvedText.tsx

@@ -82,11 +82,12 @@ function useGetResolvedText({
 
 	const combinedPattern = useMemo(() => {
 		const escapedMatcher = matcher.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+		const varNamePattern = '[a-zA-Z_\\-][a-zA-Z0-9_.\\-]*';
 		const variablePatterns = [
-			`\\{\\{\\s*?\\.([^\\s}]+)\\s*?\\}\\}`, // {{.var}}
-			`\\{\\{\\s*([^\\s}]+)\\s*\\}\\}`, // {{var}}
-			`${escapedMatcher}([\\w.]+)`, // matcher + var.name
-			`\\[\\[\\s*([^\\s\\]]+)\\s*\\]\\]`, // [[var]]
+			`\\{\\{\\s*?\\.(${varNamePattern})\\s*?\\}\\}`, // {{.var}}
+			`\\{\\{\\s*(${varNamePattern})\\s*\\}\\}`, // {{var}}
+			`${escapedMatcher}(${varNamePattern})`, // matcher + var.name
+			`\\[\\[\\s*(${varNamePattern})\\s*\\]\\]`, // [[var]]
 		];
 		return new RegExp(variablePatterns.join('|'), 'g');
 	}, [matcher]);
@@ -94,20 +95,38 @@ function useGetResolvedText({
 	const extractVarName = useCallback(
 		(match: string): string => {
 			// Extract variable name from different formats
+			const varNamePattern = '[a-zA-Z_\\-][a-zA-Z0-9_.\\-]*';
 			if (match.startsWith('{{')) {
-				const dotMatch = match.match(/\{\{\s*\.([^}]+)\}\}/);
+				const dotMatch = match.match(
+					new RegExp(`\\{\\{\\s*\\.(${varNamePattern})\\s*\\}\\}`),
+				);
 				if (dotMatch) return dotMatch[1].trim();
-				const normalMatch = match.match(/\{\{\s*([^}]+)\}\}/);
+				const normalMatch = match.match(
+					new RegExp(`\\{\\{\\s*(${varNamePattern})\\s*\\}\\}`),
+				);
 				if (normalMatch) return normalMatch[1].trim();
 			} else if (match.startsWith('[[')) {
-				const bracketMatch = match.match(/\[\[\s*([^\]]+)\]\]/);
+				const bracketMatch = match.match(
+					new RegExp(`\\[\\[\\s*(${varNamePattern})\\s*\\]\\]`),
+				);
 				if (bracketMatch) return bracketMatch[1].trim();
 			} else if (match.startsWith(matcher)) {
-				return match.substring(matcher.length);
+				// For $ variables, we always want to strip the prefix
+				// unless the full match exists in processedVariables
+				const withoutPrefix = match.substring(matcher.length).trim();
+				const fullMatch = match.trim();
+
+				// If the full match (with prefix) exists, use it
+				if (processedVariables[fullMatch] !== undefined) {
+					return fullMatch;
+				}
+
+				// Otherwise return without prefix
+				return withoutPrefix;
 			}
 			return match;
 		},
-		[matcher],
+		[matcher, processedVariables],
 	);
 
 	const fullText = useMemo(() => {

frontend/src/hooks/dashboard/useVariablesFromUrl.tsx

@@ -1,96 +0,0 @@
-import { QueryParams } from 'constants/query';
-import useUrlQuery from 'hooks/useUrlQuery';
-import { useCallback } from 'react';
-import { useHistory } from 'react-router-dom';
-import { IDashboardVariable } from 'types/api/dashboard/getAll';
-
-interface LocalStoreDashboardVariables {
-	[name: string]:
-		| IDashboardVariable['selectedValue'][]
-		| IDashboardVariable['selectedValue'];
-}
-
-interface UseVariablesFromUrlReturn {
-	getUrlVariables: () => LocalStoreDashboardVariables;
-	setUrlVariables: (variables: LocalStoreDashboardVariables) => void;
-	updateUrlVariable: (
-		name: string,
-		selectedValue: IDashboardVariable['selectedValue'],
-	) => void;
-	clearUrlVariables: () => void;
-}
-
-const useVariablesFromUrl = (): UseVariablesFromUrlReturn => {
-	const urlQuery = useUrlQuery();
-	const history = useHistory();
-
-	const getUrlVariables = useCallback((): LocalStoreDashboardVariables => {
-		const variablesParam = urlQuery.get(QueryParams.variables);
-
-		if (!variablesParam) {
-			return {};
-		}
-
-		try {
-			return JSON.parse(decodeURIComponent(variablesParam));
-		} catch (error) {
-			console.error('Failed to parse variables from URL:', error);
-			return {};
-		}
-	}, [urlQuery]);
-
-	const setUrlVariables = useCallback(
-		(variables: LocalStoreDashboardVariables): void => {
-			const params = new URLSearchParams(urlQuery.toString());
-
-			if (Object.keys(variables).length === 0) {
-				params.delete(QueryParams.variables);
-			} else {
-				try {
-					const encodedVariables = encodeURIComponent(JSON.stringify(variables));
-					params.set(QueryParams.variables, encodedVariables);
-				} catch (error) {
-					console.error('Failed to serialize variables for URL:', error);
-				}
-			}
-
-			history.replace({
-				search: params.toString(),
-			});
-		},
-		[history, urlQuery],
-	);
-
-	const clearUrlVariables = useCallback((): void => {
-		const params = new URLSearchParams(urlQuery.toString());
-		params.delete(QueryParams.variables);
-		params.delete('options');
-
-		history.replace({
-			search: params.toString(),
-		});
-	}, [history, urlQuery]);
-
-	const updateUrlVariable = useCallback(
-		(name: string, selectedValue: IDashboardVariable['selectedValue']): void => {
-			const currentVariables = getUrlVariables();
-
-			const updatedVariables = {
-				...currentVariables,
-				[name]: selectedValue,
-			};
-
-			setUrlVariables(updatedVariables as LocalStoreDashboardVariables);
-		},
-		[getUrlVariables, setUrlVariables],
-	);
-
-	return {
-		getUrlVariables,
-		setUrlVariables,
-		updateUrlVariable,
-		clearUrlVariables,
-	};
-};
-
-export default useVariablesFromUrl;

frontend/src/hooks/dynamicVariables/useGetFieldKeys.ts

@@ -1,35 +0,0 @@
-import { getFieldKeys } from 'api/dynamicVariables/getFieldKeys';
-import { useQuery, UseQueryResult } from 'react-query';
-import { ErrorResponse, SuccessResponse } from 'types/api';
-import { FieldKeyResponse } from 'types/api/dynamicVariables/getFieldKeys';
-
-interface UseGetFieldKeysProps {
-	/** Type of signal (traces, logs, metrics) */
-	signal?: 'traces' | 'logs' | 'metrics';
-	/** Optional search text */
-	name?: string;
-	/** Whether the query should be enabled */
-	enabled?: boolean;
-}
-
-/**
- * Hook to fetch field keys for a given signal type
- *
- * If 'complete' in the response is true:
- * - All subsequent searches should be local (client has complete list)
- *
- * If 'complete' is false:
- * - All subsequent searches should use the API (passing the name param)
- */
-export const useGetFieldKeys = ({
-	signal,
-	name,
-	enabled = true,
-}: UseGetFieldKeysProps): UseQueryResult<
-	SuccessResponse<FieldKeyResponse> | ErrorResponse
-> =>
-	useQuery<SuccessResponse<FieldKeyResponse> | ErrorResponse>({
-		queryKey: ['fieldKeys', signal, name],
-		queryFn: () => getFieldKeys(signal, name),
-		enabled,
-	});

frontend/src/hooks/dynamicVariables/useGetFieldValues.ts

@@ -1,45 +0,0 @@
-import { getFieldValues } from 'api/dynamicVariables/getFieldValues';
-import { useQuery, UseQueryResult } from 'react-query';
-import { ErrorResponse, SuccessResponse } from 'types/api';
-import { FieldValueResponse } from 'types/api/dynamicVariables/getFieldValues';
-
-interface UseGetFieldValuesProps {
-	/** Type of signal (traces, logs, metrics) */
-	signal?: 'traces' | 'logs' | 'metrics';
-	/** Name of the attribute for which values are being fetched */
-	name: string;
-	/** Optional search text */
-	value?: string;
-	/** Whether the query should be enabled */
-	enabled?: boolean;
-	/** Start Unix Milli */
-	startUnixMilli?: number;
-	/** End Unix Milli */
-	endUnixMilli?: number;
-}
-
-/**
- * Hook to fetch field values for a given signal type and field name
- *
- * If 'complete' in the response is true:
- * - All subsequent searches should be local (client has complete list)
- *
- * If 'complete' is false:
- * - All subsequent searches should use the API (passing the value param)
- */
-export const useGetFieldValues = ({
-	signal,
-	name,
-	value,
-	startUnixMilli,
-	endUnixMilli,
-	enabled = true,
-}: UseGetFieldValuesProps): UseQueryResult<
-	SuccessResponse<FieldValueResponse> | ErrorResponse
-> =>
-	useQuery<SuccessResponse<FieldValueResponse> | ErrorResponse>({
-		queryKey: ['fieldValues', signal, name, value, startUnixMilli, endUnixMilli],
-		queryFn: () =>
-			getFieldValues(signal, name, value, startUnixMilli, endUnixMilli),
-		enabled,
-	});

frontend/src/hooks/integration/aws/useUpdateServiceConfig.ts

@@ -1,4 +1,5 @@
 import { updateServiceConfig } from 'api/integration/aws';
+import { S3BucketsByRegion } from 'container/CloudIntegrationPage/ServicesSection/types';
 import { useMutation, UseMutationResult } from 'react-query';
 
 interface UpdateServiceConfigPayload {
@@ -6,6 +7,7 @@ interface UpdateServiceConfigPayload {
 	config: {
 		logs: {
 			enabled: boolean;
+			s3_buckets?: S3BucketsByRegion;
 		};
 		metrics: {
 			enabled: boolean;

frontend/src/hooks/useLocalStorage.ts

@@ -0,0 +1,83 @@
+import { useCallback, useEffect, useState } from 'react';
+
+/**
+ * A React hook for interacting with localStorage.
+ * It allows getting, setting, and removing items from localStorage.
+ *
+ * @template T The type of the value to be stored.
+ * @param {string} key The localStorage key.
+ * @param {T | (() => T)} initialValue The initial value to use if no value is found in localStorage,
+ * @returns {[T, (value: T | ((prevState: T) => T)) => void, () => void]}
+ * A tuple containing:
+ * - The current value from state (and localStorage).
+ * - A function to set the value (updates state and localStorage).
+ * - A function to remove the value from localStorage and reset state to initialValue.
+ */
+export function useLocalStorage<T>(
+	key: string,
+	initialValue: T | (() => T),
+): [T, (value: T | ((prevState: T) => T)) => void, () => void] {
+	// This function resolves the initialValue if it's a function,
+	// and handles potential errors during localStorage access or JSON parsing.
+	const readValueFromStorage = useCallback((): T => {
+		const resolvedInitialValue =
+			initialValue instanceof Function ? initialValue() : initialValue;
+
+		try {
+			const item = window.localStorage.getItem(key);
+			// If item exists, parse it, otherwise return the resolved initial value.
+			if (item) {
+				return JSON.parse(item) as T;
+			}
+		} catch (error) {
+			// Log error and fall back to initial value if reading/parsing fails.
+			console.warn(`Error reading localStorage key "${key}":`, error);
+		}
+		return resolvedInitialValue;
+	}, [key, initialValue]);
+
+	// Initialize state by reading from localStorage.
+	const [storedValue, setStoredValue] = useState<T>(readValueFromStorage);
+
+	// This function updates both localStorage and the React state.
+	const setValue = useCallback(
+		(value: T | ((prevState: T) => T)) => {
+			try {
+				// If a function is passed to setValue, it receives the latest value from storage.
+				const latestValueFromStorage = readValueFromStorage();
+				const valueToStore =
+					value instanceof Function ? value(latestValueFromStorage) : value;
+
+				// Save to localStorage.
+				window.localStorage.setItem(key, JSON.stringify(valueToStore));
+				// Update React state.
+				setStoredValue(valueToStore);
+			} catch (error) {
+				console.warn(`Error setting localStorage key "${key}":`, error);
+			}
+		},
+		[key, readValueFromStorage],
+	);
+
+	// This function removes the item from localStorage and resets the React state.
+	const removeValue = useCallback(() => {
+		try {
+			window.localStorage.removeItem(key);
+			// Reset state to the (potentially resolved) initialValue.
+			setStoredValue(
+				initialValue instanceof Function ? initialValue() : initialValue,
+			);
+		} catch (error) {
+			console.warn(`Error removing localStorage key "${key}":`, error);
+		}
+	}, [key, initialValue]);
+
+	// useEffect to update the storedValue if the key changes,
+	// or if the initialValue prop changes causing readValueFromStorage to change.
+	// This ensures the hook reflects the correct localStorage item if its key prop dynamically changes.
+	useEffect(() => {
+		setStoredValue(readValueFromStorage());
+	}, [key, readValueFromStorage]); // Re-run if key or the read function changes.
+
+	return [storedValue, setValue, removeValue];
+}

frontend/src/lib/dashbaordVariables/getDashboardVariables.ts

@@ -23,12 +23,7 @@ export const getDashboardVariables = (
 
 		Object.entries(variables).forEach(([, value]) => {
 			if (value?.name) {
-				variablesTuple[value.name] =
-					value?.type === 'DYNAMIC' &&
-					value?.allSelected &&
-					!value?.haveCustomValuesSelected
-						? '__all__'
-						: value?.selectedValue;
+				variablesTuple[value.name] = value?.selectedValue;
 			}
 		});
 

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

@@ -46,7 +46,7 @@ export const billingSuccessResponse = {
 					],
 				},
 			],
-			baseFee: 199,
+			baseFee: 49,
 			billTotal: 1278.3,
 		},
 		discount: 0,

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

@@ -0,0 +1,163 @@
+export const quickFiltersListResponse = {
+	status: 'success',
+	data: {
+		signal: 'logs',
+		filters: [
+			{
+				key: 'os.description',
+				dataType: 'string',
+				type: 'resource',
+				isColumn: false,
+				isJSON: false,
+			},
+			{
+				key: 'service.name',
+				dataType: 'string',
+				type: 'resource',
+				isColumn: false,
+				isJSON: false,
+			},
+			{
+				key: 'quantity',
+				dataType: 'float64',
+				type: 'tag',
+				isColumn: false,
+				isJSON: false,
+			},
+			{
+				key: 'body',
+				dataType: 'string',
+				type: '',
+				isColumn: false,
+				isJSON: false,
+			},
+			{
+				key: 'deployment.environment',
+				dataType: 'string',
+				type: 'resource',
+				isColumn: false,
+				isJSON: false,
+			},
+			{
+				key: 'service.namespace',
+				dataType: 'string',
+				type: 'resource',
+				isColumn: false,
+				isJSON: false,
+			},
+			{
+				key: 'k8s.namespace.name',
+				dataType: 'string',
+				type: 'resource',
+				isColumn: false,
+				isJSON: false,
+			},
+			{
+				key: 'service.instance.id',
+				dataType: 'string',
+				type: 'resource',
+				isColumn: false,
+				isJSON: false,
+			},
+			{
+				key: 'k8s.pod.name',
+				dataType: 'string',
+				type: 'resource',
+				isColumn: false,
+				isJSON: false,
+			},
+			{
+				key: 'process.owner',
+				dataType: 'string',
+				type: 'resource',
+				isColumn: false,
+				isJSON: false,
+			},
+		],
+	},
+};
+
+export const otherFiltersResponse = {
+	status: 'success',
+	data: {
+		attributes: [
+			{
+				key: 'service.name',
+				dataType: 'string',
+				type: 'resource',
+				isColumn: false,
+				isJSON: false,
+			},
+			{
+				key: 'k8s.deployment.name',
+				dataType: 'string',
+				type: 'resource',
+				isColumn: false,
+				isJSON: false,
+			},
+			{
+				key: 'deployment.environment',
+				dataType: 'string',
+				type: 'resource',
+				isColumn: false,
+				isJSON: false,
+			},
+			{
+				key: 'service.namespace',
+				dataType: 'string',
+				type: 'resource',
+				isColumn: false,
+				isJSON: false,
+			},
+			{
+				key: 'k8s.namespace.name',
+				dataType: 'string',
+				type: 'resource',
+				isColumn: false,
+				isJSON: false,
+			},
+			{
+				key: 'service.instance.id',
+				dataType: 'string',
+				type: 'resource',
+				isColumn: false,
+				isJSON: false,
+			},
+			{
+				key: 'k8s.pod.name',
+				dataType: 'string',
+				type: 'resource',
+				isColumn: false,
+				isJSON: false,
+			},
+			{
+				key: 'k8s.pod.uid',
+				dataType: 'string',
+				type: 'resource',
+				isColumn: false,
+				isJSON: false,
+			},
+			{
+				key: 'os.description',
+				dataType: 'string',
+				type: 'resource',
+				isColumn: false,
+				isJSON: false,
+			},
+		],
+	},
+};
+
+export const quickFiltersAttributeValuesResponse = {
+	status: 'success',
+	data: {
+		stringAttributeValues: [
+			'mq-kafka',
+			'otel-demo',
+			'otlp-python',
+			'sample-flask',
+		],
+		numberAttributeValues: null,
+		boolAttributeValues: null,
+	},
+};

frontend/src/pages/Integrations/Integrations.styles.scss

@@ -180,22 +180,21 @@
 				}
 			}
 		}
-
-		.request-entity-container {
-			display: flex;
-			flex-direction: row;
-			justify-content: space-between;
-			align-items: center;
-
-			border-radius: 4px;
-			border: 0.5px solid rgba(78, 116, 248, 0.2);
-			background: rgba(69, 104, 220, 0.1);
-			padding: 12px;
-			margin: 24px 0;
-			margin-bottom: 80px;
-		}
 	}
 }
+.request-entity-container {
+	display: flex;
+	flex-direction: row;
+	justify-content: space-between;
+	align-items: center;
+
+	border-radius: 4px;
+	border: 0.5px solid rgba(78, 116, 248, 0.2);
+	background: rgba(69, 104, 220, 0.1);
+	padding: 12px;
+	margin: 24px 0;
+	margin-bottom: 80px;
+}
 
 .lightMode {
 	.integrations-container {

frontend/src/pages/Integrations/RequestIntegrationBtn.tsx

@@ -8,7 +8,20 @@ import { Check } from 'lucide-react';
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
-export function RequestIntegrationBtn(): JSX.Element {
+export enum IntegrationType {
+	AWS_SERVICES = 'aws-services',
+	INTEGRATIONS_LIST = 'integrations-list',
+}
+
+interface RequestIntegrationBtnProps {
+	type?: IntegrationType;
+	message?: string;
+}
+
+export function RequestIntegrationBtn({
+	type,
+	message,
+}: RequestIntegrationBtnProps): JSX.Element {
 	const [
 		isSubmittingRequestForIntegration,
 		setIsSubmittingRequestForIntegration,
@@ -22,8 +35,17 @@ export function RequestIntegrationBtn(): JSX.Element {
 	const handleRequestIntegrationSubmit = async (): Promise<void> => {
 		try {
 			setIsSubmittingRequestForIntegration(true);
-			const response = await logEvent('Integration Requested', {
-				screen: 'Integration list page',
+			const eventName =
+				type === IntegrationType.AWS_SERVICES
+					? 'AWS service integration requested'
+					: 'Integration requested';
+			const screenName =
+				type === IntegrationType.AWS_SERVICES
+					? 'AWS integration details'
+					: 'Integration list page';
+
+			const response = await logEvent(eventName, {
+				screen: screenName,
 				integration: requestedIntegrationName,
 			});
 
@@ -57,9 +79,7 @@ export function RequestIntegrationBtn(): JSX.Element {
 
 	return (
 		<div className="request-entity-container">
-			<Typography.Text>
-				Cannot find what you’re looking for? Request more integrations
-			</Typography.Text>
+			<Typography.Text>{message}</Typography.Text>
 
 			<div className="form-section">
 				<Space.Compact style={{ width: '100%' }}>
@@ -93,3 +113,8 @@ export function RequestIntegrationBtn(): JSX.Element {
 		</div>
 	);
 }
+
+RequestIntegrationBtn.defaultProps = {
+	type: IntegrationType.INTEGRATIONS_LIST,
+	message: 'Cannot find what you’re looking for? Request more integrations',
+};

frontend/src/pages/IntegrationsModulePage/IntegrationsModulePage.styles.scss

@@ -14,6 +14,11 @@
 		align-items: center;
 		gap: 8px;
 	}
+	.request-entity-container {
+		margin: 0;
+		border-right: none;
+		border-left: none;
+	}
 }
 
 .lightMode {