feat: light-mode styles

frontend/src/api/dynamicVariables/__tests__/getFieldKeys.test.ts

@@ -0,0 +1,114 @@
+/* eslint-disable sonarjs/no-duplicate-string */
+import { ApiBaseInstance } from 'api';
+
+import { getFieldKeys } from '../getFieldKeys';
+
+// Mock the API instance
+jest.mock('api', () => ({
+	ApiBaseInstance: {
+		get: jest.fn(),
+	},
+}));
+
+describe('getFieldKeys API', () => {
+	beforeEach(() => {
+		jest.clearAllMocks();
+	});
+
+	const mockSuccessResponse = {
+		data: {
+			status: 'success',
+			data: {
+				keys: {
+					'service.name': [],
+					'http.status_code': [],
+				},
+				complete: true,
+			},
+		},
+	};
+
+	it('should call API with correct parameters when no args provided', async () => {
+		// Mock successful API response
+		(ApiBaseInstance.get as jest.Mock).mockResolvedValueOnce(mockSuccessResponse);
+
+		// Call function with no parameters
+		await getFieldKeys();
+
+		// Verify API was called correctly with empty params object
+		expect(ApiBaseInstance.get).toHaveBeenCalledWith('/fields/keys', {
+			params: {},
+		});
+	});
+
+	it('should call API with signal parameter when provided', async () => {
+		// Mock successful API response
+		(ApiBaseInstance.get as jest.Mock).mockResolvedValueOnce(mockSuccessResponse);
+
+		// Call function with signal parameter
+		await getFieldKeys('traces');
+
+		// Verify API was called with signal parameter
+		expect(ApiBaseInstance.get).toHaveBeenCalledWith('/fields/keys', {
+			params: { signal: 'traces' },
+		});
+	});
+
+	it('should call API with name parameter when provided', async () => {
+		// Mock successful API response
+		(ApiBaseInstance.get as jest.Mock).mockResolvedValueOnce({
+			data: {
+				status: 'success',
+				data: {
+					keys: { service: [] },
+					complete: false,
+				},
+			},
+		});
+
+		// Call function with name parameter
+		await getFieldKeys(undefined, 'service');
+
+		// Verify API was called with name parameter
+		expect(ApiBaseInstance.get).toHaveBeenCalledWith('/fields/keys', {
+			params: { name: 'service' },
+		});
+	});
+
+	it('should call API with both signal and name when provided', async () => {
+		// Mock successful API response
+		(ApiBaseInstance.get as jest.Mock).mockResolvedValueOnce({
+			data: {
+				status: 'success',
+				data: {
+					keys: { service: [] },
+					complete: false,
+				},
+			},
+		});
+
+		// Call function with both parameters
+		await getFieldKeys('logs', 'service');
+
+		// Verify API was called with both parameters
+		expect(ApiBaseInstance.get).toHaveBeenCalledWith('/fields/keys', {
+			params: { signal: 'logs', name: 'service' },
+		});
+	});
+
+	it('should return properly formatted response', async () => {
+		// Mock API to return our response
+		(ApiBaseInstance.get as jest.Mock).mockResolvedValueOnce(mockSuccessResponse);
+
+		// Call the function
+		const result = await getFieldKeys('traces');
+
+		// Verify the returned structure matches our expected format
+		expect(result).toEqual({
+			statusCode: 200,
+			error: null,
+			message: 'success',
+			payload: mockSuccessResponse.data.data,
+		});
+	});
+});

frontend/src/api/dynamicVariables/__tests__/getFieldValues.test.ts

@@ -0,0 +1,209 @@
+/* eslint-disable sonarjs/no-duplicate-string */
+import { ApiBaseInstance } from 'api';
+
+import { getFieldValues } from '../getFieldValues';
+
+// Mock the API instance
+jest.mock('api', () => ({
+	ApiBaseInstance: {
+		get: jest.fn(),
+	},
+}));
+
+describe('getFieldValues API', () => {
+	beforeEach(() => {
+		jest.clearAllMocks();
+	});
+
+	it('should call the API with correct parameters (no options)', async () => {
+		// Mock API response
+		(ApiBaseInstance.get as jest.Mock).mockResolvedValueOnce({
+			data: {
+				status: 'success',
+				data: {
+					values: {
+						stringValues: ['frontend', 'backend'],
+					},
+					complete: true,
+				},
+			},
+		});
+
+		// Call function without parameters
+		await getFieldValues();
+
+		// Verify API was called correctly with empty params
+		expect(ApiBaseInstance.get).toHaveBeenCalledWith('/fields/values', {
+			params: {},
+		});
+	});
+
+	it('should call the API with signal parameter', async () => {
+		// Mock API response
+		(ApiBaseInstance.get as jest.Mock).mockResolvedValueOnce({
+			data: {
+				status: 'success',
+				data: {
+					values: {
+						stringValues: ['frontend', 'backend'],
+					},
+					complete: true,
+				},
+			},
+		});
+
+		// Call function with signal parameter
+		await getFieldValues('traces');
+
+		// Verify API was called with signal parameter
+		expect(ApiBaseInstance.get).toHaveBeenCalledWith('/fields/values', {
+			params: { signal: 'traces' },
+		});
+	});
+
+	it('should call the API with name parameter', async () => {
+		// Mock API response
+		(ApiBaseInstance.get as jest.Mock).mockResolvedValueOnce({
+			data: {
+				status: 'success',
+				data: {
+					values: {
+						stringValues: ['frontend', 'backend'],
+					},
+					complete: true,
+				},
+			},
+		});
+
+		// Call function with name parameter
+		await getFieldValues(undefined, 'service.name');
+
+		// Verify API was called with name parameter
+		expect(ApiBaseInstance.get).toHaveBeenCalledWith('/fields/values', {
+			params: { name: 'service.name' },
+		});
+	});
+
+	it('should call the API with value parameter', async () => {
+		// Mock API response
+		(ApiBaseInstance.get as jest.Mock).mockResolvedValueOnce({
+			data: {
+				status: 'success',
+				data: {
+					values: {
+						stringValues: ['frontend'],
+					},
+					complete: false,
+				},
+			},
+		});
+
+		// Call function with value parameter
+		await getFieldValues(undefined, 'service.name', 'front');
+
+		// Verify API was called with value parameter
+		expect(ApiBaseInstance.get).toHaveBeenCalledWith('/fields/values', {
+			params: { name: 'service.name', value: 'front' },
+		});
+	});
+
+	it('should call the API with time range parameters', async () => {
+		// Mock API response
+		(ApiBaseInstance.get as jest.Mock).mockResolvedValueOnce({
+			data: {
+				status: 'success',
+				data: {
+					values: {
+						stringValues: ['frontend', 'backend'],
+					},
+					complete: true,
+				},
+			},
+		});
+
+		// Call function with time range parameters
+		const startUnixMilli = 1625097600000000; // Note: nanoseconds
+		const endUnixMilli = 1625184000000000;
+		await getFieldValues(
+			'logs',
+			'service.name',
+			undefined,
+			startUnixMilli,
+			endUnixMilli,
+		);
+
+		// Verify API was called with time range parameters (converted to milliseconds)
+		expect(ApiBaseInstance.get).toHaveBeenCalledWith('/fields/values', {
+			params: {
+				signal: 'logs',
+				name: 'service.name',
+				startUnixMilli: '1625097600', // Should be converted to seconds (divided by 1000000)
+				endUnixMilli: '1625184000', // Should be converted to seconds (divided by 1000000)
+			},
+		});
+	});
+
+	it('should normalize the response values', async () => {
+		// Mock API response with multiple value types
+		const mockResponse = {
+			data: {
+				status: 'success',
+				data: {
+					values: {
+						stringValues: ['frontend', 'backend'],
+						numberValues: [200, 404],
+						boolValues: [true, false],
+					},
+					complete: true,
+				},
+			},
+		};
+
+		(ApiBaseInstance.get as jest.Mock).mockResolvedValueOnce(mockResponse);
+
+		// Call the function
+		const result = await getFieldValues('traces', 'mixed.values');
+
+		// Verify the response has normalized values array
+		expect(result.payload?.normalizedValues).toContain('frontend');
+		expect(result.payload?.normalizedValues).toContain('backend');
+		expect(result.payload?.normalizedValues).toContain('200');
+		expect(result.payload?.normalizedValues).toContain('404');
+		expect(result.payload?.normalizedValues).toContain('true');
+		expect(result.payload?.normalizedValues).toContain('false');
+		expect(result.payload?.normalizedValues?.length).toBe(6);
+	});
+
+	it('should return a properly formatted success response', async () => {
+		// Create mock response
+		const mockApiResponse = {
+			data: {
+				status: 'success',
+				data: {
+					values: {
+						stringValues: ['frontend', 'backend'],
+					},
+					complete: true,
+				},
+			},
+		};
+
+		// Mock API to return our response
+		(ApiBaseInstance.get as jest.Mock).mockResolvedValueOnce(mockApiResponse);
+
+		// Call the function
+		const result = await getFieldValues('traces', 'service.name');
+
+		// Verify the returned structure
+		expect(result).toEqual({
+			statusCode: 200,
+			error: null,
+			message: 'success',
+			payload: expect.objectContaining({
+				values: expect.any(Object),
+				normalizedValues: expect.any(Array),
+				complete: true,
+			}),
+		});
+	});
+});

frontend/src/components/NewSelect/CustomMultiSelect.tsx

@@ -65,6 +65,7 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 	maxTagTextLength,
 	onDropdownVisibleChange,
 	showIncompleteDataMessage = false,
+	showLabels = false,
 	...rest
 }) => {
 	// ===== State & Refs =====
@@ -1709,7 +1710,11 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 	// Custom Tag Render (needs significant updates)
 	const tagRender = useCallback(
 		(props: CustomTagProps): React.ReactElement => {
-			const { label, value, closable, onClose } = props;
+			const { label: labelProp, value, closable, onClose } = props;
+
+			const label = showLabels
+				? options.find((option) => option.value === value)?.label || labelProp
+				: labelProp;
 
 			// If the display value is the special ALL value, render the ALL tag
 			if (allOptionShown) {

frontend/src/components/NewSelect/types.ts

@@ -60,4 +60,5 @@ export interface CustomMultiSelectProps
 	onRetry?: () => void;
 	maxTagTextLength?: number;
 	showIncompleteDataMessage?: boolean;
+	showLabels?: boolean;
 }

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

@@ -3,6 +3,8 @@ import { DEFAULT_ENTITY_VERSION } from 'constants/app';
 import { QueryParams } from 'constants/query';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import { CustomTimeType } from 'container/TopNav/DateTimeSelectionV2/config';
+import { useGetDynamicVariables } from 'hooks/dashboard/useGetDynamicVariables';
+import { createDynamicVariableToWidgetsMap } from 'hooks/dashboard/utils';
 import { useGetQueryRange } from 'hooks/queryBuilder/useGetQueryRange';
 import { useIntersectionObserver } from 'hooks/useIntersectionObserver';
 import { getDashboardVariables } from 'lib/dashbaordVariables/getDashboardVariables';
@@ -11,7 +13,7 @@ import getTimeString from 'lib/getTimeString';
 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 { memo, useEffect, useMemo, useRef, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { UpdateTimeInterval } from 'store/actions';
 import { AppState } from 'store/reducers';
@@ -66,6 +68,12 @@ function GridCardGraph({
 		GlobalReducer
 	>((state) => state.globalTime);
 
+	const { dynamicVariables } = useGetDynamicVariables();
+	const dynamicVariableToWidgetsMap = useMemo(
+		() => createDynamicVariableToWidgetsMap(dynamicVariables, [widget]),
+		[dynamicVariables, widget],
+	);
+
 	const handleBackNavigation = (): void => {
 		const searchParams = new URLSearchParams(window.location.search);
 		const startTime = searchParams.get(QueryParams.startTime);
@@ -197,20 +205,22 @@ function GridCardGraph({
 				maxTime,
 				minTime,
 				globalSelectedInterval,
-				variables,
 				widget?.query,
 				widget?.panelTypes,
 				widget.timePreferance,
 				widget.fillSpans,
 				requestData,
 				variables
-					? Object.entries(variables).reduce(
-							(acc, [id, variable]) => ({
-								...acc,
-								[id]: variable.selectedValue,
-							}),
-							{},
-					  )
+					? Object.entries(variables).reduce((acc, [id, variable]) => {
+							if (
+								variable.type !== 'DYNAMIC' ||
+								(dynamicVariableToWidgetsMap?.[id] &&
+									dynamicVariableToWidgetsMap?.[id].includes(widget.id))
+							) {
+								return { ...acc, [id]: variable.selectedValue };
+							}
+							return acc;
+					  }, {})
 					: {},
 				...(customTimeRange && customTimeRange.startTime && customTimeRange.endTime
 					? [customTimeRange.startTime, customTimeRange.endTime]

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

@@ -70,6 +70,17 @@
 				gap: 3px;
 				color: red;
 			}
+
+			.apply-to-all-button {
+				width: min-content;
+				height: 22px;
+				border-radius: 2px;
+				display: flex;
+				padding: 0px 6px;
+				align-items: center;
+				gap: 3px;
+				background: var(--bg-slate-400);
+			}
 		}
 	}
 
@@ -112,6 +123,10 @@
 				.edit-variable-button {
 					background: var(--bg-vanilla-300);
 				}
+
+				.apply-to-all-button {
+					background: var(--bg-vanilla-300);
+				}
 			}
 		}
 

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

@@ -213,6 +213,22 @@
 			}
 		}
 
+		.dynamic-variable-section {
+			justify-content: space-between;
+			margin-bottom: 0;
+
+			.typography-variables {
+				color: var(--bg-vanilla-400);
+				font-family: Inter;
+				font-size: 14px;
+				font-style: normal;
+				font-weight: 400;
+				line-height: 20px; /* 142.857% */
+				letter-spacing: -0.07px;
+				width: 339px;
+			}
+		}
+
 		.variable-textbox-section {
 			justify-content: space-between;
 			margin-bottom: 0;
@@ -460,6 +476,18 @@
 				}
 			}
 
+			.default-value-section {
+				.default-value-description {
+					color: var(--bg-ink-400);
+				}
+			}
+
+			.dynamic-variable-section {
+				.typography-variables {
+					color: var(--bg-ink-400);
+				}
+			}
+
 			.variable-textbox-section {
 				.typography-variables {
 					color: var(--bg-ink-400);

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

@@ -38,6 +38,7 @@ import { variablePropsToPayloadVariables } from '../../../utils';
 import { TVariableMode } from '../types';
 import DynamicVariable from './DynamicVariable/DynamicVariable';
 import { LabelContainer, VariableItemRow } from './styles';
+import { WidgetSelector } from './WidgetSelector';
 
 const { Option } = Select;
 
@@ -135,6 +136,14 @@ function VariableItem({
 		endUnixMilli: maxTime,
 	});
 
+	const [selectedWidgets, setSelectedWidgets] = useState<string[]>([]);
+
+	useEffect(() => {
+		if (queryType === 'DYNAMIC') {
+			setSelectedWidgets(variableData?.dynamicVariablesWidgetIds || []);
+		}
+	}, [queryType, variableData?.dynamicVariablesWidgetIds]);
+
 	useEffect(() => {
 		if (queryType === 'CUSTOM') {
 			setPreviewValues(
@@ -203,6 +212,10 @@ function VariableItem({
 				dynamicVariablesAttribute: dynamicVariablesSelectedValue?.name,
 				dynamicVariablesSource: dynamicVariablesSelectedValue?.value,
 			}),
+			...(queryType === 'DYNAMIC' && {
+				dynamicVariablesWidgetIds:
+					selectedWidgets?.length > 0 ? selectedWidgets : [],
+			}),
 		};
 
 		onSave(mode, variable);
@@ -563,6 +576,19 @@ function VariableItem({
 							</VariableItemRow>
 						</>
 					)}
+					{queryType === 'DYNAMIC' && (
+						<VariableItemRow className="dynamic-variable-section">
+							<LabelContainer>
+								<Typography className="typography-variables">
+									Select Panels to apply this variable
+								</Typography>
+							</LabelContainer>
+							<WidgetSelector
+								selectedWidgets={selectedWidgets}
+								setSelectedWidgets={setSelectedWidgets}
+							/>
+						</VariableItemRow>
+					)}
 				</div>
 			</div>
 			<div className="variable-item-footer">

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

@@ -0,0 +1,44 @@
+import { CustomMultiSelect } from 'components/NewSelect';
+import { generateGridTitle } from 'container/GridPanelSwitch/utils';
+import { useDashboard } from 'providers/Dashboard/Dashboard';
+
+export function WidgetSelector({
+	selectedWidgets,
+	setSelectedWidgets,
+}: {
+	selectedWidgets: string[];
+	setSelectedWidgets: (widgets: string[]) => void;
+}): JSX.Element {
+	const { selectedDashboard } = useDashboard();
+
+	// Get layout IDs for cross-referencing
+	const layoutIds = new Set(
+		(selectedDashboard?.data?.layout || []).map((item) => item.i),
+	);
+
+	// Filter and deduplicate widgets by ID, keeping only those with layout entries
+	const widgets = Object.values(
+		(selectedDashboard?.data?.widgets || []).reduce(
+			(acc: Record<string, any>, widget) => {
+				if (widget.id && layoutIds.has(widget.id)) {
+					acc[widget.id] = widget;
+				}
+				return acc;
+			},
+			{},
+		),
+	);
+
+	return (
+		<CustomMultiSelect
+			placeholder="Select Panels"
+			options={widgets.map((widget) => ({
+				label: generateGridTitle(widget.title),
+				value: widget.id,
+			}))}
+			value={selectedWidgets}
+			onChange={(value): void => setSelectedWidgets(value as string[])}
+			showLabels
+		/>
+	);
+}

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

@@ -0,0 +1,181 @@
+/* eslint-disable sonarjs/cognitive-complexity */
+import { cloneDeep, isArray, isEmpty } from 'lodash-es';
+import { Dashboard, Widgets } from 'types/api/dashboard/getAll';
+import {
+	IBuilderQuery,
+	TagFilterItem,
+} from 'types/api/queryBuilder/queryBuilderData';
+
+/**
+ * Updates the query filters in a builder query by appending new tag filters
+ */
+const updateQueryFilters = (
+	queryData: IBuilderQuery,
+	filter: TagFilterItem,
+): IBuilderQuery => {
+	const existingFilters = queryData.filters?.items || [];
+
+	// addition | update
+	const currentFilterKey = filter.key?.key;
+	const valueToAdd = filter.value.toString();
+	const newItems: TagFilterItem[] = [];
+
+	existingFilters.forEach((existingFilter) => {
+		const newFilter = cloneDeep(existingFilter);
+		if (
+			newFilter.key?.key === currentFilterKey &&
+			!(isArray(newFilter.value) && newFilter.value.includes(valueToAdd)) &&
+			newFilter.value !== valueToAdd
+		) {
+			if (isEmpty(newFilter.value)) {
+				newFilter.value = valueToAdd;
+				newFilter.op = 'IN';
+			} else {
+				newFilter.value = (isArray(newFilter.value)
+					? [...newFilter.value, valueToAdd]
+					: [newFilter.value, valueToAdd]) as string[] | string;
+
+				newFilter.op = 'IN';
+			}
+		}
+
+		newItems.push(newFilter);
+	});
+
+	// if yet the filter key doesn't get added then add it
+	if (!newItems.find((item) => item.key?.key === currentFilterKey)) {
+		newItems.push(filter);
+	}
+
+	return {
+		...queryData,
+		filters: {
+			...queryData.filters,
+			items: newItems,
+		},
+	};
+};
+
+/**
+ * Updates a single widget by adding filters to its query
+ */
+const updateSingleWidget = (
+	widget: Widgets,
+	filter: TagFilterItem,
+): Widgets => {
+	if (!widget.query?.builder?.queryData || isEmpty(filter)) {
+		return widget;
+	}
+
+	return {
+		...widget,
+		query: {
+			...widget.query,
+			builder: {
+				...widget.query.builder,
+				queryData: widget.query.builder.queryData.map(
+					(queryData) => updateQueryFilters(queryData, filter), // todo - Sagar: check for multiple query or not
+				),
+			},
+		},
+	};
+};
+
+const removeIfPresent = (
+	queryData: IBuilderQuery,
+	filter: TagFilterItem,
+): IBuilderQuery => {
+	const existingFilters = queryData.filters?.items || [];
+
+	// addition | update
+	const currentFilterKey = filter.key?.key;
+	const valueToAdd = filter.value.toString();
+	const newItems: TagFilterItem[] = [];
+
+	existingFilters.forEach((existingFilter) => {
+		const newFilter = cloneDeep(existingFilter);
+		if (newFilter.key?.key === currentFilterKey) {
+			if (isArray(newFilter.value) && newFilter.value.includes(valueToAdd)) {
+				newFilter.value = newFilter.value.filter((value) => value !== valueToAdd);
+			} else if (newFilter.value === valueToAdd) {
+				return;
+			}
+		}
+
+		newItems.push(newFilter);
+	});
+
+	return {
+		...queryData,
+		filters: {
+			...queryData.filters,
+			items: newItems,
+		},
+	};
+};
+
+const updateAfterRemoval = (
+	widget: Widgets,
+	filter: TagFilterItem,
+): Widgets => {
+	if (!widget.query?.builder?.queryData || isEmpty(filter)) {
+		return widget;
+	}
+
+	// remove the filters where the current filter is available as value as this widget is not selected anymore, hence removal
+	return {
+		...widget,
+		query: {
+			...widget.query,
+			builder: {
+				...widget.query.builder,
+				queryData: widget.query.builder.queryData.map(
+					(queryData) => removeIfPresent(queryData, filter), // todo - Sagar: check for multiple query or not
+				),
+			},
+		},
+	};
+};
+
+/**
+ * A function that takes a dashboard configuration and a list of tag filters
+ * and returns an updated dashboard with the filters appended to widget queries.
+ *
+ * @param dashboard The dashboard configuration
+ * @param filters Array of tag filters to apply to widgets
+ * @param widgetIds Optional array of widget IDs to filter which widgets get updated
+ * @returns Updated dashboard configuration with filters applied
+ */
+export const addTagFiltersToDashboard = (
+	dashboard: Dashboard | undefined,
+	filter: TagFilterItem,
+	widgetIds?: string[],
+	applyToAll?: boolean,
+): Dashboard | undefined => {
+	if (!dashboard || isEmpty(filter)) {
+		return dashboard;
+	}
+
+	// Create a deep copy to avoid mutating the original dashboard
+	const updatedDashboard = cloneDeep(dashboard);
+
+	// Process each widget to add filters
+	if (updatedDashboard.data.widgets) {
+		updatedDashboard.data.widgets = updatedDashboard.data.widgets.map(
+			(widget) => {
+				// Only apply to widgets with 'query' property
+				if ('query' in widget) {
+					// If widgetIds is provided, only update widgets with matching IDs
+					if (!applyToAll && widgetIds && !widgetIds.includes(widget.id)) {
+						// removal if needed
+						return updateAfterRemoval(widget as Widgets, filter);
+					}
+					return updateSingleWidget(widget as Widgets, filter);
+				}
+				return widget;
+			},
+		);
+	}
+
+	return updatedDashboard;
+};

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

@@ -15,13 +15,20 @@ import { CSS } from '@dnd-kit/utilities';
 import { Button, Modal, Row, Space, Table, Typography } from 'antd';
 import { RowProps } from 'antd/lib';
 import { convertVariablesToDbFormat } from 'container/NewDashboard/DashboardVariablesSelection/util';
+import { useAddDynamicVariableToPanels } from 'hooks/dashboard/useAddDynamicVariableToPanels';
+import { useGetDynamicVariables } from 'hooks/dashboard/useGetDynamicVariables';
 import { useUpdateDashboard } from 'hooks/dashboard/useUpdateDashboard';
+import { createDynamicVariableToWidgetsMap } from 'hooks/dashboard/utils';
 import { useNotifications } from 'hooks/useNotifications';
 import { PenLine, Trash2 } from 'lucide-react';
 import { useDashboard } from 'providers/Dashboard/Dashboard';
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Dashboard, IDashboardVariable } from 'types/api/dashboard/getAll';
+import {
+	Dashboard,
+	IDashboardVariable,
+	Widgets,
+} from 'types/api/dashboard/getAll';
 
 import { TVariableMode } from './types';
 import VariableItem from './VariableItem/VariableItem';
@@ -88,7 +95,7 @@ function VariablesSetting({
 
 	const { notifications } = useNotifications();
 
-	const { variables = {} } = selectedDashboard?.data || {};
+	const { variables = {}, widgets = [] } = selectedDashboard?.data || {};
 
 	const [variablesTableData, setVariablesTableData] = useState<any>([]);
 	const [variblesOrderArr, setVariablesOrderArr] = useState<number[]>([]);
@@ -162,18 +169,60 @@ function VariablesSetting({
 		setExistingVariableNamesMap(variableNamesMap);
 	}, [variables]);
 
+	const addDynamicVariableToPanels = useAddDynamicVariableToPanels();
+
+	const { dynamicVariables } = useGetDynamicVariables();
+
+	const dynamicVariableToWidgetsMap = useMemo(
+		() =>
+			createDynamicVariableToWidgetsMap(
+				dynamicVariables,
+				(widgets as Widgets[]) || [],
+			),
+		[dynamicVariables, widgets],
+	);
+
+	// initialize and adjust dynamicVariablesWidgetIds values for all variables
+	useEffect(() => {
+		const newVariablesArr = Object.values(variables).map(
+			(variable: IDashboardVariable) => {
+				if (variable.type === 'DYNAMIC') {
+					return {
+						...variable,
+						dynamicVariablesWidgetIds: dynamicVariableToWidgetsMap[variable.id] || [],
+					};
+				}
+
+				return variable;
+			},
+		);
+
+		setVariablesTableData(newVariablesArr);
+	}, [variables, dynamicVariableToWidgetsMap]);
+
 	const updateVariables = (
 		updatedVariablesData: Dashboard['data']['variables'],
+		currentRequestedId?: string,
+		applyToAll?: boolean,
 	): void => {
 		if (!selectedDashboard) {
 			return;
 		}
 
+		const newDashboard =
+			(currentRequestedId &&
+				addDynamicVariableToPanels(
+					selectedDashboard,
+					updatedVariablesData[currentRequestedId || ''],
+					applyToAll,
+				)) ||
+			selectedDashboard;
+
 		updateMutation.mutateAsync(
 			{
-				...selectedDashboard,
+				...newDashboard,
 				data: {
-					...selectedDashboard.data,
+					...newDashboard.data,
 					variables: updatedVariablesData,
 				},
 			},
@@ -206,6 +255,7 @@ function VariablesSetting({
 	const onVariableSaveHandler = (
 		mode: TVariableMode,
 		variableData: IDashboardVariable,
+		applyToAll?: boolean,
 	): void => {
 		const updatedVariableData = {
 			...variableData,
@@ -229,7 +279,7 @@ function VariablesSetting({
 		const variables = convertVariablesToDbFormat(newVariablesArr);
 
 		setVariablesTableData(newVariablesArr);
-		updateVariables(variables);
+		updateVariables(variables, variableData?.id, applyToAll);
 		onDoneVariableViewMode();
 	};
 
@@ -275,6 +325,18 @@ function VariablesSetting({
 						{variable.description}
 					</Typography.Text>
 					<Space className="actions-btns">
+						{variable.type === 'DYNAMIC' && (
+							<Button
+								type="text"
+								onClick={(): void =>
+									onVariableSaveHandler(variableViewMode || 'EDIT', variable, true)
+								}
+								className="apply-to-all-button"
+								loading={updateMutation.isLoading}
+							>
+								<Typography.Text>Apply to all</Typography.Text>
+							</Button>
+						)}
 						<Button
 							type="text"
 							onClick={(): void => onVariableViewModeEnter('EDIT', variable)}

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

@@ -2,6 +2,7 @@
 /* eslint-disable no-nested-ternary */
 import './DashboardVariableSelection.styles.scss';
 
+import { InfoCircleOutlined } from '@ant-design/icons';
 import { Tooltip, Typography } from 'antd';
 import { getFieldValues } from 'api/dynamicVariables/getFieldValues';
 import { CustomMultiSelect, CustomSelect } from 'components/NewSelect';
@@ -296,6 +297,11 @@ function DynamicVariableSelection({
 		<div className="variable-item">
 			<Typography.Text className="variable-name" ellipsis>
 				${variableData.name}
+				{variableData.description && (
+					<Tooltip title={variableData.description}>
+						<InfoCircleOutlined className="info-icon" />
+					</Tooltip>
+				)}
 			</Typography.Text>
 			<div className="variable-value">
 				{variableData.multiSelect ? (

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

@@ -162,7 +162,7 @@ describe('VariableItem', () => {
 			</MockQueryClientProvider>,
 		);
 
-		expect(screen.getByTitle('ALL')).toBeInTheDocument();
+		expect(screen.getByText('ALL')).toBeInTheDocument();
 	});
 
 	test('calls useEffect when the component mounts', () => {

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

@@ -12,6 +12,7 @@ import {
 } from 'constants/queryBuilder';
 import { DEBOUNCE_DELAY } from 'constants/queryBuilderFilterConfig';
 import { LogsExplorerShortcuts } from 'constants/shortcuts/logsExplorerShortcuts';
+import { useGetDynamicVariables } from 'hooks/dashboard/useGetDynamicVariables';
 import { useKeyboardHotkeys } from 'hooks/hotkeys/useKeyboardHotkeys';
 import { WhereClauseConfig } from 'hooks/queryBuilder/useAutoComplete';
 import { useGetAggregateKeys } from 'hooks/queryBuilder/useGetAggregateKeys';
@@ -241,6 +242,8 @@ function QueryBuilderSearchV2(
 		return false;
 	}, [currentState, query.aggregateAttribute.dataType, query.dataSource]);
 
+	const { dynamicVariables } = useGetDynamicVariables();
+
 	const { data, isFetching } = useGetAggregateKeys(
 		{
 			searchText: searchValue?.split(' ')[0],
@@ -795,6 +798,19 @@ function QueryBuilderSearchV2(
 				const dataType = currentFilterItem?.key?.dataType || DataTypes.String;
 				const key = DATA_TYPE_VS_ATTRIBUTE_VALUES_KEY[dataType];
 				values.push(...(attributeValues?.payload?.[key] || []));
+
+				// here we want to suggest the variable name matching with the key here, we will go over the dynamic variables for the keys
+				const variableName = dynamicVariables.find(
+					(variable) =>
+						variable?.dynamicVariablesAttribute === currentFilterItem?.key?.key,
+				)?.name;
+
+				if (variableName) {
+					const variableValue = `$${variableName}`;
+					if (!values.includes(variableValue)) {
+						values.unshift(variableValue);
+					}
+				}
 			}
 
 			setDropdownOptions(
@@ -814,6 +830,8 @@ function QueryBuilderSearchV2(
 		searchValue,
 		suggestionsData?.payload?.attributes,
 		operatorConfigKey,
+		currentFilterItem?.key?.key,
+		dynamicVariables,
 	]);
 
 	// keep the query in sync with the selected tags in logs explorer page

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

@@ -1,3 +1,4 @@
+/* eslint-disable sonarjs/no-duplicate-string */
 /* eslint-disable react/jsx-props-no-spreading */
 import {
 	act,
@@ -90,6 +91,11 @@ const renderWithContext = (props = {}): RenderResult => {
 	);
 };
 
+// Constants to fix linter errors
+const TYPE_TAG = 'tag';
+const IS_COLUMN_FALSE = false;
+const IS_JSON_FALSE = false;
+
 const mockAggregateKeysData = {
 	payload: {
 		attributeKeys: [
@@ -97,11 +103,19 @@ const mockAggregateKeysData = {
 				// eslint-disable-next-line sonarjs/no-duplicate-string
 				key: 'http.status',
 				dataType: DataTypes.String,
-				type: 'tag',
-				isColumn: false,
-				isJSON: false,
+				type: TYPE_TAG,
+				isColumn: IS_COLUMN_FALSE,
+				isJSON: IS_JSON_FALSE,
 				id: 'http.status--string--tag--false',
 			},
+			{
+				key: 'service.name',
+				dataType: DataTypes.String,
+				type: TYPE_TAG,
+				isColumn: IS_COLUMN_FALSE,
+				isJSON: IS_JSON_FALSE,
+				id: 'service.name--string--tag--false',
+			},
 		],
 	},
 };
@@ -127,6 +141,34 @@ jest.mock('hooks/queryBuilder/useGetAggregateValues', () => ({
 	})),
 }));
 
+// Mock the dynamic variables hook to test variable suggestion feature
+const mockDynamicVariables = [
+	{
+		id: 'var1',
+		name: 'service',
+		type: 'DYNAMIC',
+		dynamicVariablesAttribute: 'service.name',
+		dynamicVariablesSource: 'Traces',
+		selectedValue: 'frontend',
+		multiSelect: false,
+		showALLOption: false,
+		allSelected: false,
+		description: '',
+		sort: 'DISABLED',
+		dashboardName: 'Test Dashboard',
+		dashboardId: 'dashboard-123',
+	},
+];
+
+jest.mock('hooks/dashboard/useGetDynamicVariables', () => ({
+	useGetDynamicVariables: jest.fn(() => ({
+		dynamicVariables: mockDynamicVariables,
+		isLoading: false,
+		isError: false,
+		refetch: jest.fn(),
+	})),
+}));
+
 jest.mock('hooks/useSafeNavigate', () => ({
 	useSafeNavigate: (): any => ({
 		safeNavigate: jest.fn(),
@@ -195,3 +237,66 @@ describe('Suggestion Key -> Operator -> Value Flow', () => {
 		);
 	});
 });
+
+describe('Dynamic Variable Suggestions', () => {
+	beforeEach(() => {
+		jest.clearAllMocks();
+	});
+
+	it('should suggest dynamic variable when key matches a variable attribute', async () => {
+		const { container } = renderWithContext();
+
+		// Get the combobox input
+		const combobox = container.querySelector(
+			'.query-builder-search-v2 .ant-select-selection-search-input',
+		) as HTMLInputElement;
+
+		// Focus and type to trigger key suggestions for service.name
+		await act(async () => {
+			fireEvent.focus(combobox);
+			fireEvent.change(combobox, { target: { value: 'service.' } });
+		});
+
+		// Wait for dropdown to appear
+		await screen.findByRole('listbox');
+
+		// Select service.name key from suggestions
+		const serviceNameOption = await screen.findByText('service.name');
+		await act(async () => {
+			fireEvent.click(serviceNameOption);
+		});
+
+		// Select equals operator
+		await act(async () => {
+			const equalsOption = screen.getByText('=');
+			fireEvent.click(equalsOption);
+		});
+
+		// Should show value suggestions including the dynamic variable
+		// For 'service.name', we expect to see '$service' as the first suggestion
+		const variableSuggestion = await screen.findByText('$service');
+		expect(variableSuggestion).toBeInTheDocument();
+
+		// Regular values should still be shown
+		expect(screen.getByText('200')).toBeInTheDocument();
+		expect(screen.getByText('404')).toBeInTheDocument();
+
+		// Select the variable suggestion
+		await act(async () => {
+			fireEvent.click(variableSuggestion);
+		});
+
+		// Verify the query was updated with the variable as value
+		expect(mockOnChange).toHaveBeenCalledWith(
+			expect.objectContaining({
+				items: expect.arrayContaining([
+					expect.objectContaining({
+						key: expect.objectContaining({ key: 'service.name' }),
+						op: '=',
+						value: '$service',
+					}),
+				]),
+			}),
+		);
+	});
+});

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

@@ -0,0 +1,224 @@
+import { renderHook, waitFor } from '@testing-library/react';
+import { useDashboard } from 'providers/Dashboard/Dashboard';
+import { ReactNode } from 'react';
+import { QueryClient, QueryClientProvider, useQuery } from 'react-query';
+
+import { useGetDynamicVariables } from '../useGetDynamicVariables';
+
+// Mock the dependencies
+jest.mock('react-query', () => ({
+	...jest.requireActual('react-query'),
+	useQuery: jest.fn(),
+}));
+
+jest.mock('providers/Dashboard/Dashboard', () => ({
+	useDashboard: jest.fn(),
+}));
+
+// Sample dashboard data with variables
+const mockDashboardData = {
+	data: {
+		title: 'Test Dashboard',
+		variables: {
+			var1: {
+				id: 'var1',
+				name: 'service',
+				type: 'DYNAMIC',
+				dynamicVariablesAttribute: 'service.name',
+				dynamicVariablesSource: 'Traces',
+				selectedValue: 'frontend',
+				multiSelect: false,
+				showALLOption: false,
+				allSelected: false,
+				description: '',
+				sort: 'DISABLED',
+			},
+			var2: {
+				id: 'var2',
+				name: 'status',
+				type: 'DYNAMIC',
+				dynamicVariablesAttribute: 'http.status_code',
+				dynamicVariablesSource: 'Traces',
+				selectedValue: '200',
+				multiSelect: false,
+				showALLOption: false,
+				allSelected: false,
+				description: '',
+				sort: 'DISABLED',
+			},
+			var3: {
+				id: 'var3',
+				name: 'interval',
+				type: 'CUSTOM', // Not DYNAMIC - should be filtered out
+				customValue: '5m',
+				multiSelect: false,
+				showALLOption: false,
+				allSelected: false,
+				description: '',
+				sort: 'DISABLED',
+			},
+		},
+	},
+	uuid: 'dashboard-123',
+	loading: false,
+	error: null,
+};
+
+// Mock refetch function
+const mockRefetch = jest.fn();
+
+// Constants
+const DASHBOARD_ID = 'dashboard-123';
+
+// Create a wrapper for the renderHook function with the QueryClientProvider
+const createWrapper = (): React.FC<{ children: ReactNode }> => {
+	const queryClient = new QueryClient({
+		defaultOptions: {
+			queries: {
+				retry: false,
+			},
+		},
+	});
+
+	// Define as function declaration to fix linter error
+	function Wrapper({ children }: { children: ReactNode }): JSX.Element {
+		return (
+			<QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+		);
+	}
+
+	return Wrapper;
+};
+
+describe('useGetDynamicVariables', () => {
+	beforeEach(() => {
+		jest.clearAllMocks();
+
+		// Mock the useDashboard hook
+		(useDashboard as jest.Mock).mockReturnValue({
+			dashboardId: DASHBOARD_ID,
+		});
+
+		// Mock the useQuery hook for successful response
+		(useQuery as jest.Mock).mockReturnValue({
+			data: mockDashboardData,
+			isLoading: false,
+			isError: false,
+			refetch: mockRefetch,
+		});
+	});
+
+	it('should return dynamic variables from the dashboard', async () => {
+		const { result } = renderHook(() => useGetDynamicVariables(), {
+			wrapper: createWrapper(),
+		});
+
+		await waitFor(() => {
+			expect(result.current.dynamicVariables).toHaveLength(2); // Only DYNAMIC type variables
+			expect(result.current.dynamicVariables[0].name).toBe('service');
+			expect(result.current.dynamicVariables[1].name).toBe('status');
+			expect(result.current.isLoading).toBe(false);
+			expect(result.current.isError).toBe(false);
+		});
+
+		// Verify each dynamic variable has dashboard info
+		expect(result.current.dynamicVariables[0].dashboardName).toBe(
+			'Test Dashboard',
+		);
+		expect(result.current.dynamicVariables[0].dashboardId).toBe(DASHBOARD_ID);
+	});
+
+	it('should use dashboardId from props if provided', async () => {
+		const customDashboardId = 'custom-dashboard-id';
+		renderHook(() => useGetDynamicVariables({ dashboardId: customDashboardId }), {
+			wrapper: createWrapper(),
+		});
+
+		// Check that useQuery was called with the custom dashboardId
+		expect(useQuery).toHaveBeenCalledWith(
+			expect.objectContaining({
+				queryKey: expect.arrayContaining(['DASHBOARD_BY_ID', customDashboardId]),
+			}),
+		);
+	});
+
+	it('should return empty array when dashboard has no variables', async () => {
+		// Mock no variables in dashboard
+		(useQuery as jest.Mock).mockReturnValue({
+			data: {
+				data: { title: 'Empty Dashboard' },
+				uuid: 'dashboard-empty',
+				loading: false,
+				error: null,
+			},
+			isLoading: false,
+			isError: false,
+			refetch: mockRefetch,
+		});
+
+		const { result } = renderHook(() => useGetDynamicVariables(), {
+			wrapper: createWrapper(),
+		});
+
+		expect(result.current.dynamicVariables).toHaveLength(0);
+	});
+
+	it('should return empty array when dashboard is null', async () => {
+		// Mock null dashboard data
+		(useQuery as jest.Mock).mockReturnValue({
+			data: null,
+			isLoading: false,
+			isError: false,
+			refetch: mockRefetch,
+		});
+
+		const { result } = renderHook(() => useGetDynamicVariables(), {
+			wrapper: createWrapper(),
+		});
+
+		expect(result.current.dynamicVariables).toHaveLength(0);
+	});
+
+	it('should handle loading state', async () => {
+		// Mock loading state
+		(useQuery as jest.Mock).mockReturnValue({
+			data: null,
+			isLoading: true,
+			isError: false,
+			refetch: mockRefetch,
+		});
+
+		const { result } = renderHook(() => useGetDynamicVariables(), {
+			wrapper: createWrapper(),
+		});
+
+		expect(result.current.isLoading).toBe(true);
+		expect(result.current.dynamicVariables).toHaveLength(0);
+	});
+
+	it('should handle error state', async () => {
+		// Mock error state
+		(useQuery as jest.Mock).mockReturnValue({
+			data: null,
+			isLoading: false,
+			isError: true,
+			refetch: mockRefetch,
+		});
+
+		const { result } = renderHook(() => useGetDynamicVariables(), {
+			wrapper: createWrapper(),
+		});
+
+		expect(result.current.isError).toBe(true);
+		expect(result.current.dynamicVariables).toHaveLength(0);
+	});
+
+	it('should call refetch when returned function is called', async () => {
+		const { result } = renderHook(() => useGetDynamicVariables(), {
+			wrapper: createWrapper(),
+		});
+
+		result.current.refetch();
+		expect(mockRefetch).toHaveBeenCalledTimes(1);
+	});
+});

frontend/src/hooks/dashboard/useAddDynamicVariableToPanels.tsx

@@ -0,0 +1,49 @@
+import { addTagFiltersToDashboard } from 'container/NewDashboard/DashboardSettings/Variables/addTagFiltersToDashboard';
+import { useCallback } from 'react';
+import { Dashboard, IDashboardVariable } from 'types/api/dashboard/getAll';
+import { TagFilterItem } from 'types/api/queryBuilder/queryBuilderData';
+
+import { getFiltersFromKeyValue } from './utils';
+
+/**
+ * A hook that returns a function to add dynamic variables to dashboard panels as tag filters.
+ *
+ * @returns A function that, when given a dashboard and variable config, returns the updated dashboard.
+ */
+export const useAddDynamicVariableToPanels = (): ((
+	dashboard: Dashboard | undefined,
+	variableConfig: IDashboardVariable,
+	applyToAll?: boolean,
+) => Dashboard | undefined) =>
+	useCallback(
+		(
+			dashboard: Dashboard | undefined,
+			variableConfig: IDashboardVariable,
+			applyToAll?: boolean,
+		): Dashboard | undefined => {
+			if (!variableConfig) return dashboard;
+
+			const {
+				dynamicVariablesAttribute,
+				name,
+				dynamicVariablesWidgetIds,
+			} = variableConfig;
+
+			const tagFilters: TagFilterItem = getFiltersFromKeyValue(
+				dynamicVariablesAttribute || '',
+				`$${name}`,
+				'',
+				'IN',
+			); // todo - Sagar: make a logic to have correct type and other details
+
+			return addTagFiltersToDashboard(
+				dashboard,
+				tagFilters,
+				dynamicVariablesWidgetIds,
+				applyToAll,
+			);
+		},
+		[],
+	);
+
+export default useAddDynamicVariableToPanels;

frontend/src/hooks/dashboard/useGetDynamicVariables.tsx

@@ -0,0 +1,55 @@
+import getDashboard from 'api/dashboard/get';
+import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
+import { useDashboard } from 'providers/Dashboard/Dashboard';
+import { useMemo } from 'react';
+import { useQuery } from 'react-query';
+import { IDashboardVariable } from 'types/api/dashboard/getAll';
+
+export interface DynamicVariable extends IDashboardVariable {
+	dashboardName: string;
+	dashboardId: string;
+}
+
+interface UseGetDynamicVariablesProps {
+	dashboardId?: string;
+}
+
+export const useGetDynamicVariables = (
+	props?: UseGetDynamicVariablesProps,
+): {
+	dynamicVariables: DynamicVariable[];
+	isLoading: boolean;
+	isError: boolean;
+	refetch: () => void;
+} => {
+	const { dashboardId: dashboardIdFromProps } = props || {};
+
+	const { dashboardId: dashboardIdFromDashboard } = useDashboard();
+
+	const dashboardId = dashboardIdFromProps || dashboardIdFromDashboard;
+
+	const { data: dashboard, isLoading, isError, refetch } = useQuery({
+		queryFn: () => getDashboard({ uuid: dashboardId }),
+		queryKey: [REACT_QUERY_KEY.DASHBOARD_BY_ID, dashboardId],
+	});
+
+	const dynamicVariables = useMemo(() => {
+		if (!dashboard?.data?.variables) return [];
+
+		const variables: DynamicVariable[] = [];
+
+		Object.entries(dashboard.data.variables).forEach(([, variable]) => {
+			if (variable.type === 'DYNAMIC') {
+				variables.push({
+					...variable,
+					dashboardName: dashboard.data.title,
+					dashboardId: dashboard.uuid,
+				});
+			}
+		});
+
+		return variables;
+	}, [dashboard]);
+
+	return { dynamicVariables, isLoading, isError, refetch };
+};

frontend/src/hooks/dashboard/useGetResolvedText.tsx

@@ -85,7 +85,7 @@ function useGetResolvedText({
 		const variablePatterns = [
 			`\\{\\{\\s*?\\.([^\\s}]+)\\s*?\\}\\}`, // {{.var}}
 			`\\{\\{\\s*([^\\s}]+)\\s*\\}\\}`, // {{var}}
-			`${escapedMatcher}([\\w.]+)`, // matcher + var.name
+			`${escapedMatcher}([^\\s]+)`, // matcher + var.name
 			`\\[\\[\\s*([^\\s\\]]+)\\s*\\]\\]`, // [[var]]
 		];
 		return new RegExp(variablePatterns.join('|'), 'g');

frontend/src/hooks/dashboard/utils.ts

@@ -1,9 +1,20 @@
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import { convertKeysToColumnFields } from 'container/LogsExplorerList/utils';
 import { placeWidgetAtBottom } from 'container/NewWidget/utils';
-import { Dashboard } from 'types/api/dashboard/getAll';
-import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
-import { Query } from 'types/api/queryBuilder/queryBuilderData';
+import { isArray } from 'lodash-es';
+import { Dashboard, Widgets } from 'types/api/dashboard/getAll';
+import {
+	BaseAutocompleteData,
+	DataTypes,
+} from 'types/api/queryBuilder/queryAutocompleteResponse';
+import {
+	IBuilderQuery,
+	Query,
+	TagFilterItem,
+} from 'types/api/queryBuilder/queryBuilderData';
+import { v4 as uuidv4 } from 'uuid';
+
+import { DynamicVariable } from './useGetDynamicVariables';
 
 const baseLogsSelectedColumns = {
 	dataType: 'string',
@@ -56,3 +67,65 @@ export const addEmptyWidgetInDashboardJSONWithQuery = (
 		},
 	};
 };
+
+export const getFiltersFromKeyValue = (
+	key: string,
+	value: string | number,
+	type?: string,
+	op?: string,
+	dataType?: DataTypes,
+): TagFilterItem => ({
+	id: uuidv4(),
+	key: {
+		key,
+		dataType: dataType || DataTypes.String,
+		type: type || '',
+		isColumn: false,
+		isJSON: false,
+		id: `${key}--${dataType || DataTypes.String}--${type || ''}--false`,
+	},
+	op: op || '=',
+	value: value.toString(),
+});
+
+export const createDynamicVariableToWidgetsMap = (
+	dynamicVariables: DynamicVariable[],
+	widgets: Widgets[],
+	// eslint-disable-next-line sonarjs/cognitive-complexity
+): Record<string, string[]> => {
+	const dynamicVariableToWidgetsMap: Record<string, string[]> = {};
+
+	// Initialize map with empty arrays for each variable
+	dynamicVariables.forEach((variable) => {
+		if (variable.id) {
+			dynamicVariableToWidgetsMap[variable.id] = [];
+		}
+	});
+
+	// Check each widget for usage of dynamic variables
+	if (Array.isArray(widgets)) {
+		widgets.forEach((widget) => {
+			if (widget.query?.builder?.queryData) {
+				widget.query.builder.queryData.forEach((queryData: IBuilderQuery) => {
+					queryData.filters?.items?.forEach((filter: TagFilterItem) => {
+						// For each filter, check if it uses any dynamic variable
+						dynamicVariables.forEach((variable) => {
+							if (
+								variable.dynamicVariablesAttribute &&
+								filter.key?.key === variable.dynamicVariablesAttribute &&
+								((isArray(filter.value) &&
+									filter.value.includes(`$${variable.name}`)) ||
+									filter.value === `$${variable.name}`) &&
+								!dynamicVariableToWidgetsMap[variable.id].includes(widget.id)
+							) {
+								dynamicVariableToWidgetsMap[variable.id].push(widget.id);
+							}
+						});
+					});
+				});
+			}
+		});
+	}
+
+	return dynamicVariableToWidgetsMap;
+};

frontend/src/hooks/queryBuilder/useOptions.ts

@@ -3,6 +3,7 @@ import {
 	getTagToken,
 } from 'container/QueryBuilder/filters/QueryBuilderSearch/utils';
 import { Option } from 'container/QueryBuilder/type';
+import { useGetDynamicVariables } from 'hooks/dashboard/useGetDynamicVariables';
 import { transformStringWithPrefix } from 'lib/query/transformStringWithPrefix';
 import { isEmpty } from 'lodash-es';
 import { useCallback, useEffect, useMemo, useState } from 'react';
@@ -25,10 +26,19 @@ export const useOptions = (
 	result: string[],
 	isFetching: boolean,
 	whereClauseConfig?: WhereClauseConfig,
+	// eslint-disable-next-line sonarjs/cognitive-complexity
 ): Option[] => {
 	const [options, setOptions] = useState<Option[]>([]);
 	const operators = useOperators(key, keys);
 
+	// get matching dynamic variables to suggest
+	const { dynamicVariables } = useGetDynamicVariables();
+	const variableName = dynamicVariables.find(
+		(variable) => variable?.dynamicVariablesAttribute === key,
+	)?.name;
+
+	const variableAsValue = variableName ? `$${variableName}` : '';
+
 	const getLabel = useCallback(
 		(data: BaseAutocompleteData): Option['label'] =>
 			transformStringWithPrefix({
@@ -63,7 +73,13 @@ export const useOptions = (
 	const getOptionsWithValidOperator = useCallback(
 		(key: string, results: string[], searchValue: string) => {
 			const hasAllResults = results.every((value) => result.includes(value));
-			const values = getKeyOpValue(results);
+
+			let newResults = results;
+			if (!isEmpty(variableAsValue)) {
+				newResults = [variableAsValue, ...newResults];
+			}
+
+			const values = getKeyOpValue(newResults);
 
 			return hasAllResults
 				? [
@@ -80,7 +96,7 @@ export const useOptions = (
 						...values,
 				  ];
 		},
-		[getKeyOpValue, result],
+		[getKeyOpValue, result, variableAsValue],
 	);
 
 	const getKeyOperatorOptions = useCallback(
@@ -128,7 +144,10 @@ export const useOptions = (
 			newOptions = getKeyOperatorOptions(key);
 		} else if (key && operator) {
 			if (isMulti) {
-				newOptions = results.map((item) => ({
+				const resultsWithVariable = isEmpty(variableAsValue)
+					? results
+					: [variableAsValue, ...results];
+				newOptions = resultsWithVariable.map((item) => ({
 					label: checkCommaInValue(String(item)),
 					value: String(item),
 				}));
@@ -161,6 +180,7 @@ export const useOptions = (
 		getKeyOperatorOptions,
 		getOptionsWithValidOperator,
 		isFetching,
+		variableAsValue,
 	]);
 
 	return useMemo(

frontend/src/lib/dashbaordVariables/getDashboardVariables.ts

@@ -26,6 +26,8 @@ export const getDashboardVariables = (
 				variablesTuple[value.name] =
 					value?.type === 'DYNAMIC' &&
 					value?.allSelected &&
+					value?.showALLOption &&
+					value?.multiSelect &&
 					!value?.haveCustomValuesSelected
 						? '__all__'
 						: value?.selectedValue;

frontend/src/types/api/dashboard/getAll.ts

@@ -52,6 +52,7 @@ export interface IDashboardVariable {
 	dynamicVariablesAttribute?: string;
 	dynamicVariablesSource?: string;
 	haveCustomValuesSelected?: boolean;
+	dynamicVariablesWidgetIds?: string[];
 }
 export interface Dashboard {
 	id: number;