chore(dashboard): retire the V1 variable runtime

The V1 variable engine had no writers left: nothing wrote selectedValue, so
getDashboardVariables produced undefined values, variableFetchStore was never
updated, and the dependency graph and derived store fields only fed that store.
The shared store's one remaining job is publishing the open dashboard's dynamic
variables for query-builder autocomplete, which needs a name and an attribute.

Replace it with a suggestion feed and delete the rest, including the panel
variables prop that no GridCard caller passed and useResolveQuery's dashboardData
option that no caller supplied. useGetResolvedText loses its only variable source
and becomes the title truncation its callers already used it for.

Assisted-by: Claude Opus 5

frontend/src/api/v5/queryRange/prepareQueryRangePayloadV5.ts

@@ -671,9 +671,9 @@ export const prepareQueryRangePayloadV5 = ({
 			(acc, [key, value]) => {
 				acc[key] = {
 					value,
-					type: dynamicVariables
-						?.find((v) => v.name === key)
-						?.type?.toLowerCase() as VariableType,
+					type: dynamicVariables?.some((v) => v.name === key)
+						? ('dynamic' as VariableType)
+						: undefined,
 				};
 				return acc;
 			},

frontend/src/components/QueryBuilderV2/QueryV2/QuerySearch/QuerySearch.tsx

@@ -27,7 +27,7 @@ import {
 	QUERY_BUILDER_OPERATORS_BY_KEY_TYPE,
 	queryOperatorSuggestions,
 } from 'constants/antlrQueryConstants';
-import { useDashboardVariablesByType } from 'hooks/dashboard/useDashboardVariablesByType';
+import { useDynamicVariableSuggestions } from 'hooks/dashboard/useDynamicVariableSuggestions';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import useDebounce from 'hooks/useDebounce';
 import { debounce, isNull } from 'lodash-es';
@@ -258,10 +258,7 @@ function QuerySearch({
 	const lastValueRef = useRef<string>('');
 	const isMountedRef = useRef<boolean>(true);
 
-	const dashboardDynamicVariables = useDashboardVariablesByType(
-		'DYNAMIC',
-		'values',
-	);
+	const dashboardDynamicVariables = useDynamicVariableSuggestions();
 
 	// Add back the generateOptions function and useEffect
 	const generateOptions = (keys: {
@@ -1189,7 +1186,7 @@ function QuerySearch({
 
 			// Add dynamic variables suggestions for the current key
 			const variableName = dashboardDynamicVariables?.find(
-				(variable) => variable?.dynamicVariablesAttribute === keyName,
+				(variable) => variable?.attribute === keyName,
 			)?.name;
 
 			if (variableName) {

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

@@ -21,7 +21,7 @@ import {
 import { DEBOUNCE_DELAY } from 'constants/queryBuilderFilterConfig';
 import type { WhereClauseConfig } from 'container/QueryBuilder/QueryBuilder.interfaces';
 import { LogsExplorerShortcuts } from 'constants/shortcuts/logsExplorerShortcuts';
-import { useDashboardVariablesByType } from 'hooks/dashboard/useDashboardVariablesByType';
+import { useDynamicVariableSuggestions } from 'hooks/dashboard/useDynamicVariableSuggestions';
 import { useKeyboardHotkeys } from 'hooks/hotkeys/useKeyboardHotkeys';
 import { useGetAggregateKeys } from 'hooks/queryBuilder/useGetAggregateKeys';
 import { useGetAggregateValues } from 'hooks/queryBuilder/useGetAggregateValues';
@@ -263,10 +263,7 @@ function QueryBuilderSearchV2(
 		return false;
 	}, [currentState, query.aggregateAttribute?.dataType, query.dataSource]);
 
-	const dashboardDynamicVariables = useDashboardVariablesByType(
-		'DYNAMIC',
-		'values',
-	);
+	const dashboardDynamicVariables = useDynamicVariableSuggestions();
 
 	const { data, isFetching } = useGetAggregateKeys(
 		{
@@ -817,8 +814,7 @@ function QueryBuilderSearchV2(
 
 				// 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 = dashboardDynamicVariables?.find(
-					(variable) =>
-						variable?.dynamicVariablesAttribute === currentFilterItem?.key?.key,
+					(variable) => variable?.attribute === currentFilterItem?.key?.key,
 				)?.name;
 
 				if (variableName) {

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

@@ -5,9 +5,8 @@ import {
 	initialQueriesMap,
 	initialQueryBuilderFormValues,
 } from 'constants/queryBuilder';
-import { IUseDashboardVariablesReturn } from 'providers/Dashboard/store/dashboardVariables/dashboardVariablesStoreTypes';
+import { DynamicVariableSuggestion } from 'providers/Dashboard/store/dynamicVariableSuggestions';
 import { QueryBuilderContext } from 'providers/QueryBuilder';
-import { IDashboardVariable } from 'types/api/dashboard/variables';
 import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { DataSource } from 'types/common/queryBuilder';
 
@@ -150,24 +149,14 @@ jest.mock('hooks/useSafeNavigate', () => ({
 	}),
 }));
 
-// Mock dashboard variables
-const dashboardVariables = {
-	service: {
-		id: 'service',
-		name: 'service',
-		type: 'DYNAMIC' as IDashboardVariable['type'],
-		dynamicVariablesAttribute: 'service.name',
-		description: '',
-		sort: 'DISABLED' as IDashboardVariable['sort'],
-		multiSelect: false,
-		showALLOption: false,
-	},
-};
+// Mock the dynamic variables the open dashboard would publish
+const dynamicVariableSuggestions = [
+	{ name: 'service', attribute: 'service.name' },
+];
 
-jest.mock('hooks/dashboard/useDashboardVariables', () => ({
-	useDashboardVariables: (): IUseDashboardVariablesReturn => ({
-		dashboardVariables: dashboardVariables,
-	}),
+jest.mock('hooks/dashboard/useDynamicVariableSuggestions', () => ({
+	useDynamicVariableSuggestions: (): DynamicVariableSuggestion[] =>
+		dynamicVariableSuggestions,
 }));
 
 describe('Suggestion Key -> Operator -> Value Flow', () => {

frontend/src/container/ServiceApplication/utils.ts

@@ -2,7 +2,6 @@ import { PANEL_TYPES } from 'constants/queryBuilder';
 import { getWidgetQueryBuilder } from 'container/MetricsApplication/MetricsApplication.factory';
 import { updateStepInterval } from 'hooks/queryBuilder/useStepInterval';
 import { GetQueryResultsProps } from 'lib/dashboard/getQueryResults';
-import { getDashboardVariables } from 'lib/dashboardVariables/getDashboardVariables';
 import { ServicesList } from 'types/api/metrics/getService';
 import { QueryDataV3 } from 'types/api/widgets/getQuery';
 import { EQueryType } from 'types/common/dashboard';
@@ -47,7 +46,6 @@ export const getQueryRangeRequestData = ({
 			graphType: serviceMetricsWidget?.panelTypes,
 			query: updatedQuery,
 			globalSelectedInterval,
-			variables: getDashboardVariables(),
 		});
 	});
 	return requestData;

frontend/src/container/WidgetCard/Card/FullView/index.tsx

@@ -28,13 +28,11 @@ import { populateMultipleResults } from 'lib/query/populateMultipleResults';
 import { timeItems, timePreferance } from 'constants/timePreference';
 import PanelWrapper from 'container/WidgetCard/Panels/PanelWrapper';
 import RightToolbarActions from 'container/QueryBuilder/components/ToolbarActions/RightToolbarActions';
-import { useDashboardVariables } from 'hooks/dashboard/useDashboardVariables';
 import { useGetQueryRange } from 'hooks/queryBuilder/useGetQueryRange';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useChartMutable } from 'hooks/useChartMutable';
 import useUrlQuery from 'hooks/useUrlQuery';
 import { GetQueryResultsProps } from 'lib/dashboard/getQueryResults';
-import { getDashboardVariables } from 'lib/dashboardVariables/getDashboardVariables';
 import GetMinMax from 'lib/getMinMax';
 import { isEmpty } from 'lodash-es';
 import { AppState } from 'store/reducers';
@@ -82,8 +80,6 @@ function FullView({
 		setCurrentGraphRef(fullViewRef);
 	}, [setCurrentGraphRef]);
 
-	const { dashboardVariables } = useDashboardVariables();
-
 	const getSelectedTime = useCallback(
 		() =>
 			timeItems.find((e) => e.enum === (widget?.timePreferance || 'GLOBAL_TIME')),
@@ -115,7 +111,6 @@ function FullView({
 				graphType: getGraphType(selectedPanelType),
 				query: updatedQuery,
 				globalSelectedInterval: globalSelectedTime,
-				variables: getDashboardVariables(dashboardVariables),
 				fillGaps: widget.fillSpans,
 				formatForWeb: selectedPanelType === PANEL_TYPES.TABLE,
 				originalGraphType: selectedPanelType,
@@ -126,7 +121,6 @@ function FullView({
 			graphType: PANEL_TYPES.LIST,
 			selectedTime: widget?.timePreferance || 'GLOBAL_TIME',
 			globalSelectedInterval: globalSelectedTime,
-			variables: getDashboardVariables(dashboardVariables),
 			tableParams: {
 				pagination: {
 					offset: 0,

frontend/src/container/WidgetCard/Card/index.tsx

@@ -8,12 +8,9 @@ import { PANEL_TYPES } from 'constants/queryBuilder';
 import { useScrollWidgetIntoView } from 'lib/visualization/hooks/useScrollWidgetIntoView';
 import { populateMultipleResults } from 'lib/query/populateMultipleResults';
 import { CustomTimeType } from 'container/TopNav/DateTimeSelectionV2/types';
-import { useIsPanelWaitingOnVariable } from 'hooks/dashboard/useVariableFetchState';
 import { useGetQueryRange } from 'hooks/queryBuilder/useGetQueryRange';
 import { useIntersectionObserver } from 'hooks/useIntersectionObserver';
 import { GetQueryResultsProps } from 'lib/dashboard/getQueryResults';
-import { getDashboardVariables } from 'lib/dashboardVariables/getDashboardVariables';
-import { getVariableReferencesInQuery } from 'lib/dashboardVariables/variableReference';
 import getTimeString from 'lib/getTimeString';
 import { isEqual } from 'lodash-es';
 import isEmpty from 'lodash-es/isEmpty';
@@ -45,7 +42,6 @@ function GridCardGraph({
 	headerMenuList = [MenuItemKeys.View],
 	isQueryEnabled,
 	threshold,
-	variables,
 	version,
 	onClickHandler,
 	onDragSelect,
@@ -113,25 +109,10 @@ function GridCardGraph({
 
 	const updatedQuery = widget?.query;
 
-	const referencedVariableNames = useMemo(() => {
-		if (!variables || !updatedQuery) {
-			return [];
-		}
-		const allNames = Object.values(variables)
-			.map((v) => v.name)
-			.filter((name): name is string => !!name);
-		return getVariableReferencesInQuery(updatedQuery, allNames);
-	}, [updatedQuery, variables]);
-
 	const isEmptyWidget =
 		widget?.id === PANEL_TYPES.EMPTY_WIDGET || isEmpty(widget);
 
-	const isPanelWaitingOnAnyVariable = useIsPanelWaitingOnVariable(
-		referencedVariableNames,
-	);
-
-	const queryEnabledCondition =
-		isVisible && !isEmptyWidget && isQueryEnabled && !isPanelWaitingOnAnyVariable;
+	const queryEnabledCondition = isVisible && !isEmptyWidget && isQueryEnabled;
 
 	const [requestData, setRequestData] = useState<GetQueryResultsProps>(() => {
 		if (widget.panelTypes !== PANEL_TYPES.LIST) {
@@ -140,7 +121,6 @@ function GridCardGraph({
 				graphType: getGraphType(widget.panelTypes),
 				query: updatedQuery,
 				globalSelectedInterval,
-				variables: getDashboardVariables(variables),
 				fillGaps: widget.fillSpans,
 				formatForWeb: widget.panelTypes === PANEL_TYPES.TABLE,
 				start: customTimeRange?.startTime || start,
@@ -191,7 +171,6 @@ function GridCardGraph({
 	const queryResponse = useGetQueryRange(
 		{
 			...requestData,
-			variables: getDashboardVariables(variables),
 			selectedTime: widget.timePreferance || 'GLOBAL_TIME',
 			globalSelectedInterval:
 				widget?.panelTypes === PANEL_TYPES.LIST && isLogsQuery
@@ -214,14 +193,6 @@ function GridCardGraph({
 				widget.timePreferance,
 				widget.fillSpans,
 				requestData,
-				variables
-					? Object.entries(variables).reduce((acc, [id, variable]) => {
-							if (variable.name && referencedVariableNames.includes(variable.name)) {
-								return { ...acc, [id]: variable.selectedValue };
-							}
-							return acc;
-						}, {})
-					: {},
 				...(customTimeRange && customTimeRange.startTime && customTimeRange.endTime
 					? [customTimeRange.startTime, customTimeRange.endTime]
 					: []),
@@ -303,9 +274,7 @@ function GridCardGraph({
 					version={version}
 					threshold={threshold}
 					headerMenuList={menuList}
-					isFetchingResponse={
-						queryResponse.isFetching || isPanelWaitingOnAnyVariable
-					}
+					isFetchingResponse={queryResponse.isFetching}
 					setRequestData={setRequestData}
 					onClickHandler={onClickHandler}
 					onDragSelect={onDragSelect}

frontend/src/container/WidgetCard/Card/types.ts

@@ -4,7 +4,6 @@ import { ToggleGraphProps } from 'components/Graph/types';
 import { GetQueryResultsProps } from 'lib/dashboard/getQueryResults';
 import { RowData } from 'lib/query/createTableColumnsFromQuery';
 import { OnClickPluginOpts } from 'lib/uPlotLib/plugins/onClickPlugin';
-import { IDashboardVariables } from 'providers/Dashboard/store/dashboardVariables/dashboardVariablesStoreTypes';
 import { Widgets } from 'types/api/widgets/widget';
 import {
 	MetricQueryRangeSuccessResponse,
@@ -52,7 +51,6 @@ export interface GridCardGraphProps {
 	headerMenuList?: WidgetGraphComponentProps['headerMenuList'];
 	onClickHandler?: OnClickPluginOpts['onClick'];
 	isQueryEnabled: boolean;
-	variables?: IDashboardVariables;
 	version?: string;
 	onDragSelect: (start: number, end: number) => void;
 	customOnDragSelect?: (start: number, end: number) => void;

frontend/src/container/WidgetCard/__tests__/useResolveQuery.test.tsx

@@ -26,8 +26,8 @@ jest.mock(
 	}),
 );
 
-jest.mock('hooks/dashboard/useDashboardVariablesByType', () => ({
-	useDashboardVariablesByType: (): unknown[] => mockDynamicVariables,
+jest.mock('hooks/dashboard/useDynamicVariableSuggestions', () => ({
+	useDynamicVariableSuggestions: (): unknown[] => mockDynamicVariables,
 }));
 
 jest.mock('react-redux', () => ({
@@ -64,11 +64,12 @@ describe('useResolveQuery', () => {
 		expect(resolved).toBe(QUERY);
 	});
 
-	it('resolves through substitute_vars when the dashboard has variables', async () => {
+	it('resolves through substitute_vars when the dashboard has dynamic variables', async () => {
 		mockGetSubstituteVars.mockResolvedValue({
 			httpStatusCode: 200,
 			data: { compositeQuery: {} },
 		});
+		mockDynamicVariables.push({ name: 'env', attribute: 'deployment.env' });
 
 		const { result } = renderHook(() => useUpdatedQuery(), {
 			wrapper: MockQueryClientProvider,
@@ -76,13 +77,6 @@ describe('useResolveQuery', () => {
 
 		const resolved = await result.current.getUpdatedQuery({
 			widgetConfig: WIDGET_CONFIG,
-			dashboardData: {
-				data: {
-					variables: {
-						env: { name: 'env', selectedValue: 'prod' },
-					},
-				},
-			},
 		});
 
 		expect(mockGetSubstituteVars).toHaveBeenCalledTimes(1);

frontend/src/container/WidgetCard/hooks/useResolveQuery.ts

@@ -7,8 +7,7 @@ import { getSubstituteVars } from 'api/dashboard/substitute_vars';
 import { prepareQueryRangePayloadV5 } from 'api/v5/v5';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import { timePreferenceType } from 'constants/timePreference';
-import { useDashboardVariablesByType } from 'hooks/dashboard/useDashboardVariablesByType';
-import { getDashboardVariables } from 'lib/dashboardVariables/getDashboardVariables';
+import { useDynamicVariableSuggestions } from 'hooks/dashboard/useDynamicVariableSuggestions';
 import { mapQueryDataFromApi } from 'lib/newQueryBuilder/queryBuilderMappers/mapQueryDataFromApi';
 import { AppState } from 'store/reducers';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';
@@ -21,7 +20,6 @@ interface UseUpdatedQueryOptions {
 		panelTypes: PANEL_TYPES;
 		timePreferance: timePreferenceType;
 	};
-	dashboardData?: any;
 }
 
 interface UseUpdatedQueryResult {
@@ -37,21 +35,13 @@ function useUpdatedQuery(): UseUpdatedQueryResult {
 
 	const queryRangeMutation = useMutation(getSubstituteVars);
 
-	const dashboardDynamicVariables = useDashboardVariablesByType(
-		'DYNAMIC',
-		'values',
-	);
+	const dashboardDynamicVariables = useDynamicVariableSuggestions();
 
 	const getUpdatedQuery = useCallback(
-		async ({
-			widgetConfig,
-			dashboardData,
-		}: UseUpdatedQueryOptions): Promise<Query> => {
-			const variables = getDashboardVariables(dashboardData?.data?.variables);
-
+		async ({ widgetConfig }: UseUpdatedQueryOptions): Promise<Query> => {
 			// `/substitute_vars` only rewrites `$variable` references, so on surfaces with no
 			// dashboard behind them (APM, Celery, API monitoring) the round-trip is a no-op.
-			if (isEmpty(variables) && isEmpty(dashboardDynamicVariables)) {
+			if (isEmpty(dashboardDynamicVariables)) {
 				return widgetConfig.query;
 			}
 
@@ -61,7 +51,6 @@ function useUpdatedQuery(): UseUpdatedQueryResult {
 				graphType: getGraphType(widgetConfig.panelTypes),
 				selectedTime: widgetConfig.timePreferance,
 				globalSelectedInterval,
-				variables,
 				originalGraphType: widgetConfig.panelTypes,
 				dynamicVariables: dashboardDynamicVariables,
 			});

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

@@ -1,242 +1,40 @@
-import React from 'react';
 import { renderHook } from '@testing-library/react';
-import { IDashboardVariables } from 'providers/Dashboard/store/dashboardVariables/dashboardVariablesStoreTypes';
-
-import useGetResolvedText from '../useGetResolvedText';
-
-// Create a mock function that we can modify per test
-let mockDashboardVariables: IDashboardVariables = {};
-
-// Mock the useDashboardVariables hook
-jest.mock('hooks/dashboard/useDashboardVariables', () => ({
-	useDashboardVariables: jest.fn(() => ({
-		dashboardVariables: mockDashboardVariables,
-	})),
-}));
+import useGetResolvedText from 'hooks/dashboard/useGetResolvedText';
 
 describe('useGetResolvedText', () => {
-	const SERVICE_VAR = 'test, app +2-|-test, app, frontend, env';
-	const SEVERITY_VAR = 'DEBUG, INFO-|-DEBUG, INFO';
-	const EXPECTED_FULL_TEXT =
-		'Logs count in test, app, frontend, env in DEBUG, INFO';
-	const TRUNCATED_SERVICE = 'test, app +2';
-	const TEXT_TEMPLATE = 'Logs count in $service.name in $severity';
-
-	const renderHookWithProps = (
-		props: {
-			text: string | React.ReactNode;
-			maxLength?: number;
-			matcher?: string;
-		},
-		variables?: Record<string, string | number | boolean>,
-	): any => {
-		if (variables) {
-			mockDashboardVariables = Object.entries(
-				variables,
-			).reduce<IDashboardVariables>((acc, [key, value]) => {
-				acc[key] = {
-					id: key,
-					name: key,
-					description: '',
-					type: 'CUSTOM' as const,
-					sort: 'DISABLED' as const,
-					multiSelect: false,
-					showALLOption: false,
-					selectedValue: value,
-				};
-				return acc;
-			}, {});
-		} else {
-			mockDashboardVariables = {};
-		}
-		return renderHook(() => useGetResolvedText(props));
-	};
-
-	it('should resolve variables with truncated and full text', () => {
-		const text = TEXT_TEMPLATE;
-		const variables = {
-			'service.name': SERVICE_VAR,
-			severity: SEVERITY_VAR,
-		};
-
-		const { result } = renderHookWithProps({ text }, variables);
-
-		expect(result.current.truncatedText).toBe(
-			`Logs count in ${TRUNCATED_SERVICE} in DEBUG, INFO`,
+	it('returns the text unchanged when it fits within maxLength', () => {
+		const { result } = renderHook(() =>
+			useGetResolvedText({ text: 'Logs count', maxLength: 100 }),
 		);
-		expect(result.current.fullText).toBe(EXPECTED_FULL_TEXT);
+
+		expect(result.current.fullText).toBe('Logs count');
+		expect(result.current.truncatedText).toBe('Logs count');
 	});
 
-	it('should handle text with maxLength truncation', () => {
-		const text = TEXT_TEMPLATE;
-		const variables = {
-			'service.name': SERVICE_VAR,
-			severity: SEVERITY_VAR,
-		};
+	it('returns the text unchanged when no maxLength is given', () => {
+		const text = 'a'.repeat(200);
+		const { result } = renderHook(() => useGetResolvedText({ text }));
 
-		const { result } = renderHookWithProps({ text, maxLength: 20 }, variables);
-
-		expect(result.current.truncatedText).toBe('Logs count in test, a...');
-		expect(result.current.fullText).toBe(EXPECTED_FULL_TEXT);
-	});
-
-	it('should handle multiple occurrences of the same variable', () => {
-		const text = 'Logs count in $service.name and $service.name';
-		const variables = {
-			'service.name': SERVICE_VAR,
-		};
-
-		const { result } = renderHookWithProps({ text }, variables);
-
-		expect(result.current.truncatedText).toBe(
-			'Logs count in test, app +2 and test, app +2',
-		);
-		expect(result.current.fullText).toBe(
-			'Logs count in test, app, frontend, env and test, app, frontend, env',
-		);
-	});
-
-	it('should handle different variable formats', () => {
-		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 - dyn-1, dyn-2',
-		);
-		expect(result.current.fullText).toBe(
-			'Logs in test, app, frontend, env, test, app, frontend, env, test, app, frontend, env - dyn-1, dyn-2',
-		);
-	});
-
-	it('should handle custom matcher', () => {
-		const text = 'Logs count in #service.name in #severity';
-		const variables = {
-			'service.name': SERVICE_VAR,
-			severity: SEVERITY_VAR,
-		};
-
-		const { result } = renderHookWithProps({ text, matcher: '#' }, variables);
-
-		expect(result.current.truncatedText).toBe(
-			'Logs count in test, app +2 in DEBUG, INFO',
-		);
-		expect(result.current.fullText).toBe(EXPECTED_FULL_TEXT);
-	});
-
-	it('should handle non-string variable values', () => {
-		const text = 'Count: $count, Active: $active';
-		const variables = {
-			count: 42,
-			active: true,
-		};
-
-		const { result } = renderHookWithProps({ text }, variables);
-
-		expect(result.current.fullText).toBe('Count: 42, Active: true');
-		expect(result.current.truncatedText).toBe('Count: 42, Active: true');
-	});
-
-	it('should keep original text for undefined variables', () => {
-		const text = 'Logs count in $service.name in $unknown';
-		const variables = {
-			'service.name': SERVICE_VAR,
-		};
-
-		const { result } = renderHookWithProps({ text }, variables);
-
-		expect(result.current.truncatedText).toBe(
-			'Logs count in test, app +2 in $unknown',
-		);
-		expect(result.current.fullText).toBe(
-			'Logs count in test, app, frontend, env in $unknown',
-		);
-	});
-
-	it('should handle non-string text input (ReactNode)', () => {
-		const reactNodeText = <div>Test ReactNode</div>;
-		const variables = {
-			'service.name': SERVICE_VAR,
-		};
-
-		const { result } = renderHookWithProps(
-			{
-				text: reactNodeText,
-			},
-			variables,
-		);
-
-		// Should return the ReactNode unchanged
-		expect(result.current.fullText).toBe(reactNodeText);
-		expect(result.current.truncatedText).toBe(reactNodeText);
-	});
-
-	it('should handle number input', () => {
-		const text = 123;
-		const variables = {
-			'service.name': SERVICE_VAR,
-		};
-
-		const { result } = renderHookWithProps(
-			{
-				text,
-			},
-			variables,
-		);
-
-		// Should return the number unchanged
-		expect(result.current.fullText).toBe(text);
 		expect(result.current.truncatedText).toBe(text);
 	});
 
-	it('should handle boolean input', () => {
-		const text = true;
-		const variables = {
-			'service.name': SERVICE_VAR,
-		};
-
-		const { result } = renderHookWithProps(
-			{
-				text,
-			},
-			variables,
+	it('truncates to maxLength with an ellipsis and keeps the full text', () => {
+		const { result } = renderHook(() =>
+			useGetResolvedText({ text: 'Logs count in production', maxLength: 20 }),
 		);
 
-		// Should return the boolean unchanged
-		expect(result.current.fullText).toBe(text);
-		expect(result.current.truncatedText).toBe(text);
+		expect(result.current.truncatedText).toBe('Logs count in pro...');
+		expect(result.current.truncatedText).toHaveLength(20);
+		expect(result.current.fullText).toBe('Logs count in production');
 	});
 
-	it('should handle complex variable names with improved patterns', () => {
-		const text = 'API: $api.v1.endpoint Config: $config.database.host';
-		const variables = {
-			'api.v1.endpoint': '/users',
-			'config.database.host': 'localhost:5432',
-		};
-
-		const { result } = renderHookWithProps({ text }, variables);
-
-		expect(result.current.fullText).toBe('API: /users Config: localhost:5432');
-		expect(result.current.truncatedText).toBe(
-			'API: /users Config: localhost:5432',
+	it('passes non-string content through untouched', () => {
+		const node = <span>title</span>;
+		const { result } = renderHook(() =>
+			useGetResolvedText({ text: node, maxLength: 2 }),
 		);
-	});
 
-	it('should stop at punctuation boundaries correctly', () => {
-		const text = 'Status: $service.name, Error: $error.type;';
-		const variables = {
-			'service.name': 'web-api',
-			'error.type': 'timeout',
-		};
-
-		const { result } = renderHookWithProps({ text }, variables);
-
-		expect(result.current.fullText).toBe('Status: web-api, Error: timeout;');
-		expect(result.current.truncatedText).toBe('Status: web-api, Error: timeout;');
+		expect(result.current.fullText).toBe(node);
+		expect(result.current.truncatedText).toBe(node);
 	});
 });

frontend/src/hooks/dashboard/__test__/useIsPanelWaitingOnVariable.test.ts

@@ -1,351 +0,0 @@
-import { act, renderHook } from '@testing-library/react';
-import { dashboardVariablesStore } from 'providers/Dashboard/store/dashboardVariables/dashboardVariablesStore';
-import { IDashboardVariablesStoreState } from 'providers/Dashboard/store/dashboardVariables/dashboardVariablesStoreTypes';
-import {
-	VariableFetchState,
-	variableFetchStore,
-} from 'providers/Dashboard/store/variableFetchStore';
-import { IDashboardVariable } from 'types/api/dashboard/variables';
-
-import { useIsPanelWaitingOnVariable } from '../useVariableFetchState';
-
-function makeVariable(
-	overrides: Partial<IDashboardVariable> & { id: string },
-): IDashboardVariable {
-	return {
-		name: overrides.id,
-		description: '',
-		type: 'QUERY',
-		sort: 'DISABLED',
-		multiSelect: false,
-		showALLOption: false,
-		...overrides,
-	};
-}
-
-function resetStores(): void {
-	variableFetchStore.set(() => ({
-		states: {},
-		lastUpdated: {},
-		cycleIds: {},
-	}));
-	dashboardVariablesStore.set(() => ({
-		dashboardId: '',
-		variables: {},
-		sortedVariablesArray: [],
-		dependencyData: null,
-		variableTypes: {},
-		dynamicVariableOrder: [],
-	}));
-}
-
-function setFetchStates(states: Record<string, VariableFetchState>): void {
-	variableFetchStore.set(() => ({
-		states,
-		lastUpdated: {},
-		cycleIds: {},
-	}));
-}
-
-function setDashboardVariables(
-	overrides: Partial<IDashboardVariablesStoreState>,
-): void {
-	dashboardVariablesStore.set(() => ({
-		dashboardId: '',
-		variables: {},
-		sortedVariablesArray: [],
-		dependencyData: null,
-		variableTypes: {},
-		dynamicVariableOrder: [],
-		...overrides,
-	}));
-}
-
-describe('useIsPanelWaitingOnVariable', () => {
-	beforeEach(() => {
-		resetStores();
-	});
-
-	it('should return false when variableNames is empty', () => {
-		const { result } = renderHook(() => useIsPanelWaitingOnVariable([]));
-		expect(result.current).toBe(false);
-	});
-
-	it('should return false when all referenced variables are idle', () => {
-		setFetchStates({ a: 'idle', b: 'idle' });
-		setDashboardVariables({
-			variables: {
-				a: makeVariable({ id: 'a', selectedValue: 'val1' }),
-				b: makeVariable({ id: 'b', selectedValue: 'val2' }),
-			},
-			variableTypes: { a: 'QUERY', b: 'QUERY' },
-		});
-
-		const { result } = renderHook(() => useIsPanelWaitingOnVariable(['a', 'b']));
-		expect(result.current).toBe(false);
-	});
-
-	it('should return true when a variable is loading with empty selectedValue', () => {
-		setFetchStates({ a: 'loading' });
-		setDashboardVariables({
-			variables: {
-				a: makeVariable({ id: 'a', selectedValue: undefined }),
-			},
-			variableTypes: { a: 'QUERY' },
-		});
-
-		const { result } = renderHook(() => useIsPanelWaitingOnVariable(['a']));
-		expect(result.current).toBe(true);
-	});
-
-	it('should return true when a variable is waiting with empty selectedValue', () => {
-		setFetchStates({ a: 'waiting' });
-		setDashboardVariables({
-			variables: {
-				a: makeVariable({ id: 'a', selectedValue: '' }),
-			},
-			variableTypes: { a: 'QUERY' },
-		});
-
-		const { result } = renderHook(() => useIsPanelWaitingOnVariable(['a']));
-		expect(result.current).toBe(true);
-	});
-
-	it('should return true when a variable is revalidating with empty selectedValue', () => {
-		setFetchStates({ a: 'revalidating' });
-		setDashboardVariables({
-			variables: {
-				a: makeVariable({ id: 'a', selectedValue: undefined }),
-			},
-			variableTypes: { a: 'QUERY' },
-		});
-
-		const { result } = renderHook(() => useIsPanelWaitingOnVariable(['a']));
-		expect(result.current).toBe(true);
-	});
-
-	it('should return false when a variable is loading but has a selectedValue', () => {
-		setFetchStates({ a: 'loading' });
-		setDashboardVariables({
-			variables: {
-				a: makeVariable({ id: 'a', selectedValue: 'some-value' }),
-			},
-			variableTypes: { a: 'QUERY' },
-		});
-
-		const { result } = renderHook(() => useIsPanelWaitingOnVariable(['a']));
-		expect(result.current).toBe(false);
-	});
-
-	it('should return false for DYNAMIC variable with allSelected=true that is loading but has a selectedValue', () => {
-		setFetchStates({ dyn: 'loading' });
-		setDashboardVariables({
-			variables: {
-				dyn: makeVariable({
-					id: 'dyn',
-					type: 'DYNAMIC',
-					selectedValue: 'some-val',
-					allSelected: true,
-				}),
-			},
-			variableTypes: { dyn: 'DYNAMIC' },
-		});
-
-		const { result } = renderHook(() => useIsPanelWaitingOnVariable(['dyn']));
-		expect(result.current).toBe(false);
-	});
-
-	it('should return false for DYNAMIC variable with allSelected=true that is waiting but has a selectedValue', () => {
-		setFetchStates({ dyn: 'waiting' });
-		setDashboardVariables({
-			variables: {
-				dyn: makeVariable({
-					id: 'dyn',
-					type: 'DYNAMIC',
-					selectedValue: 'val',
-					allSelected: true,
-				}),
-			},
-			variableTypes: { dyn: 'DYNAMIC' },
-		});
-
-		const { result } = renderHook(() => useIsPanelWaitingOnVariable(['dyn']));
-		expect(result.current).toBe(false);
-	});
-
-	it('should return false for DYNAMIC variable with allSelected=true that is idle', () => {
-		setFetchStates({ dyn: 'idle' });
-		setDashboardVariables({
-			variables: {
-				dyn: makeVariable({
-					id: 'dyn',
-					type: 'DYNAMIC',
-					selectedValue: 'val',
-					allSelected: true,
-				}),
-			},
-			variableTypes: { dyn: 'DYNAMIC' },
-		});
-
-		const { result } = renderHook(() => useIsPanelWaitingOnVariable(['dyn']));
-		expect(result.current).toBe(false);
-	});
-
-	it('should return false for non-DYNAMIC variable with allSelected=false and non-empty value that is loading', () => {
-		setFetchStates({ a: 'loading' });
-		setDashboardVariables({
-			variables: {
-				a: makeVariable({
-					id: 'a',
-					selectedValue: 'val',
-					allSelected: false,
-				}),
-			},
-			variableTypes: { a: 'QUERY' },
-		});
-
-		const { result } = renderHook(() => useIsPanelWaitingOnVariable(['a']));
-		expect(result.current).toBe(false);
-	});
-
-	it('should return true if any one of multiple variables is blocking', () => {
-		setFetchStates({ a: 'idle', b: 'loading' });
-		setDashboardVariables({
-			variables: {
-				a: makeVariable({ id: 'a', selectedValue: 'val' }),
-				b: makeVariable({ id: 'b', selectedValue: undefined }),
-			},
-			variableTypes: { a: 'QUERY', b: 'QUERY' },
-		});
-
-		const { result } = renderHook(() => useIsPanelWaitingOnVariable(['a', 'b']));
-		expect(result.current).toBe(true);
-	});
-
-	it('should return false when variable has no entry in fetch store (treated as idle)', () => {
-		setFetchStates({}); // no state entry for 'a'
-		setDashboardVariables({
-			variables: {
-				a: makeVariable({ id: 'a', selectedValue: 'val' }),
-			},
-			variableTypes: { a: 'QUERY' },
-		});
-
-		const { result } = renderHook(() => useIsPanelWaitingOnVariable(['a']));
-		expect(result.current).toBe(false);
-	});
-
-	it('should return false when variable is in error state with empty selectedValue', () => {
-		setFetchStates({ a: 'error' });
-		setDashboardVariables({
-			variables: {
-				a: makeVariable({ id: 'a', selectedValue: undefined }),
-			},
-			variableTypes: { a: 'QUERY' },
-		});
-
-		const { result } = renderHook(() => useIsPanelWaitingOnVariable(['a']));
-		expect(result.current).toBe(false);
-	});
-
-	it('should react to store updates', () => {
-		setFetchStates({ a: 'loading' });
-		setDashboardVariables({
-			variables: {
-				a: makeVariable({ id: 'a', selectedValue: undefined }),
-			},
-			variableTypes: { a: 'QUERY' },
-		});
-
-		const { result } = renderHook(() => useIsPanelWaitingOnVariable(['a']));
-		expect(result.current).toBe(true);
-
-		// Simulate variable fetch completing
-		act(() => {
-			variableFetchStore.update((d) => {
-				d.states.a = 'idle';
-			});
-		});
-
-		expect(result.current).toBe(false);
-	});
-
-	it('should handle DYNAMIC variable with allSelected=false and empty selectedValue as blocking', () => {
-		setFetchStates({ dyn: 'loading' });
-		setDashboardVariables({
-			variables: {
-				dyn: makeVariable({
-					id: 'dyn',
-					type: 'DYNAMIC',
-					selectedValue: undefined,
-					allSelected: false,
-				}),
-			},
-			variableTypes: { dyn: 'DYNAMIC' },
-		});
-
-		const { result } = renderHook(() => useIsPanelWaitingOnVariable(['dyn']));
-		expect(result.current).toBe(true);
-	});
-
-	it('should handle variable with array selectedValue as non-blocking when loading', () => {
-		setFetchStates({ a: 'loading' });
-		setDashboardVariables({
-			variables: {
-				a: makeVariable({ id: 'a', selectedValue: ['val1', 'val2'] }),
-			},
-			variableTypes: { a: 'QUERY' },
-		});
-
-		const { result } = renderHook(() => useIsPanelWaitingOnVariable(['a']));
-		expect(result.current).toBe(false);
-	});
-
-	it('should handle variable with empty array selectedValue as blocking when loading', () => {
-		setFetchStates({ a: 'loading' });
-		setDashboardVariables({
-			variables: {
-				a: makeVariable({ id: 'a', selectedValue: [] }),
-			},
-			variableTypes: { a: 'QUERY' },
-		});
-
-		const { result } = renderHook(() => useIsPanelWaitingOnVariable(['a']));
-		expect(result.current).toBe(true);
-	});
-
-	it('should find variable by name when store key differs from variable name', () => {
-		setFetchStates({ myVar: 'loading' });
-		setDashboardVariables({
-			variables: {
-				'uuid-abc-123': makeVariable({
-					id: 'uuid-abc-123',
-					name: 'myVar',
-					selectedValue: undefined,
-				}),
-			},
-			variableTypes: { myVar: 'QUERY' },
-		});
-
-		const { result } = renderHook(() => useIsPanelWaitingOnVariable(['myVar']));
-		expect(result.current).toBe(true);
-	});
-
-	it('should respect selectedValue when store key differs from variable name', () => {
-		// When the variable has a value, it should not block even if loading
-		setFetchStates({ myVar: 'loading' });
-		setDashboardVariables({
-			variables: {
-				'uuid-abc-123': makeVariable({
-					id: 'uuid-abc-123',
-					name: 'myVar',
-					selectedValue: 'production',
-				}),
-			},
-			variableTypes: { myVar: 'QUERY' },
-		});
-
-		const { result } = renderHook(() => useIsPanelWaitingOnVariable(['myVar']));
-		expect(result.current).toBe(false);
-	});
-});

frontend/src/hooks/dashboard/useContextVariables.tsx

@@ -1,7 +1,6 @@
 import { useMemo } from 'react';
 // eslint-disable-next-line no-restricted-imports
 import { useSelector } from 'react-redux';
-import { useDashboardVariables } from 'hooks/dashboard/useDashboardVariables';
 import { AppState } from 'store/reducers';
 import { GlobalReducer } from 'types/reducer/globalTime';
 
@@ -42,38 +41,10 @@ function useContextVariables({
 	// ! To be noted: This customVariables is not Dashboard Custom Variables
 	customVariables,
 }: UseContextVariablesProps): UseContextVariablesResult {
-	const { dashboardVariables } = useDashboardVariables();
 	const globalTime = useSelector<AppState, GlobalReducer>(
 		(state) => state.globalTime,
 	);
 
-	// Extract dashboard variables
-	const processedDashboardVariables = useMemo(() => {
-		return Object.entries(dashboardVariables)
-			.filter(([, value]) => value.name)
-			.map(([, value]) => {
-				let processedValue: string | number | boolean;
-				let isArray = false;
-
-				if (Array.isArray(value.selectedValue)) {
-					processedValue = value.selectedValue.join(', ');
-					isArray = true;
-				} else if (value.selectedValue != null) {
-					processedValue = value.selectedValue;
-				} else {
-					processedValue = '';
-				}
-
-				return {
-					name: value.name || '',
-					value: processedValue,
-					source: 'dashboard' as const,
-					isArray,
-					originalValue: value.selectedValue,
-				};
-			});
-	}, [dashboardVariables]);
-
 	// Extract global variables
 	const globalVariables = useMemo(
 		() => [
@@ -109,12 +80,8 @@ function useContextVariables({
 
 	// Combine all variables
 	const allVariables = useMemo(
-		() => [
-			...processedDashboardVariables,
-			...globalVariables,
-			...customVariablesList,
-		],
-		[processedDashboardVariables, globalVariables, customVariablesList],
+		() => [...globalVariables, ...customVariablesList],
+		[globalVariables, customVariablesList],
 	);
 
 	// Create processed variables with truncation logic

frontend/src/hooks/dashboard/useDashboardVariables.ts

@@ -1,40 +0,0 @@
-import { useCallback, useRef, useSyncExternalStore } from 'react';
-import { dashboardVariablesStore } from 'providers/Dashboard/store/dashboardVariables/dashboardVariablesStore';
-import {
-	IDashboardVariablesStoreState,
-	IUseDashboardVariablesReturn,
-} from 'providers/Dashboard/store/dashboardVariables/dashboardVariablesStoreTypes';
-
-/**
- * Generic selector hook for dashboard variables store
- * Allows granular subscriptions to any part of the store state
- *
- * @example
- * ! Select top-level field
- * const variables = useDashboardVariablesSelector(s => s.variables);
- *
- * ! Select specific variable
- * const fooVar = useDashboardVariablesSelector(s => s.variables['foo']);
- *
- * ! Select derived value
- * const hasVariables = useDashboardVariablesSelector(s => Object.keys(s.variables).length > 0);
- */
-export const useDashboardVariablesSelector = <T>(
-	selector: (state: IDashboardVariablesStoreState) => T,
-): T => {
-	const selectorRef = useRef(selector);
-	selectorRef.current = selector;
-
-	const getSnapshot = useCallback(
-		() => selectorRef.current(dashboardVariablesStore.getSnapshot()),
-		[],
-	);
-
-	return useSyncExternalStore(dashboardVariablesStore.subscribe, getSnapshot);
-};
-
-export const useDashboardVariables = (): IUseDashboardVariablesReturn => {
-	const dashboardVariables = useDashboardVariablesSelector((s) => s.variables);
-
-	return { dashboardVariables };
-};

frontend/src/hooks/dashboard/useDashboardVariablesByType.ts

@@ -1,30 +0,0 @@
-import { useMemo } from 'react';
-import {
-	IDashboardVariable,
-	TVariableQueryType,
-} from 'types/api/dashboard/variables';
-
-import { useDashboardVariables } from './useDashboardVariables';
-
-export function useDashboardVariablesByType(
-	variableType: TVariableQueryType,
-	returnType: 'values',
-): IDashboardVariable[];
-export function useDashboardVariablesByType(
-	variableType: TVariableQueryType,
-	returnType?: 'entries',
-): [string, IDashboardVariable][];
-export function useDashboardVariablesByType(
-	variableType: TVariableQueryType,
-	returnType?: 'values' | 'entries',
-): IDashboardVariable[] | [string, IDashboardVariable][] {
-	const { dashboardVariables } = useDashboardVariables();
-
-	return useMemo(() => {
-		const entries = Object.entries(dashboardVariables || {}).filter(
-			(entry): entry is [string, IDashboardVariable] =>
-				Boolean(entry[1].name) && entry[1].type === variableType,
-		);
-		return returnType === 'values' ? entries.map(([, value]) => value) : entries;
-	}, [dashboardVariables, variableType, returnType]);
-}

frontend/src/hooks/dashboard/useDynamicVariableSuggestions.ts

@@ -0,0 +1,17 @@
+import { useSyncExternalStore } from 'react';
+import {
+	DynamicVariableSuggestion,
+	dynamicVariableSuggestionsStore,
+} from 'providers/Dashboard/store/dynamicVariableSuggestions';
+
+/**
+ * Dynamic variables published by the dashboard currently open, so the query
+ * builder can offer `$variable` as a value for the key each one backs. Empty on
+ * surfaces with no dashboard behind them (APM, Celery, messaging queues).
+ */
+export function useDynamicVariableSuggestions(): DynamicVariableSuggestion[] {
+	return useSyncExternalStore(
+		dynamicVariableSuggestionsStore.subscribe,
+		dynamicVariableSuggestionsStore.getSnapshot,
+	);
+}

frontend/src/hooks/dashboard/useGetResolvedText.tsx

@@ -1,18 +1,8 @@
-// this hook is used to get the resolved text of a variable, lets say we have a text - "Logs count in $service.name in $severity and $service.name and $severity $service.name"
-// and the values of service.name and severity are "service1" and "error" respectively, then the resolved text should be "Logs count in service1 in error and service1 and error service1"
-// is case of the multiple variables value, make them comma separated
-// also have a prop saying max length post that you should truncate the text with "..."
-// return value should be a full text string, and a truncated text string (if max length is provided)
-
-import { ReactNode, useCallback, useMemo } from 'react';
-import { useDashboardVariables } from 'hooks/dashboard/useDashboardVariables';
+import { ReactNode, useMemo } from 'react';
 
 interface UseGetResolvedTextProps {
 	text: string | ReactNode;
-	variables?: Record<string, string | number | boolean>;
 	maxLength?: number;
-	matcher?: string;
-	maxValues?: number; // Maximum number of values to show before adding +n more
 }
 
 interface ResolvedTextResult {
@@ -20,173 +10,23 @@ interface ResolvedTextResult {
 	truncatedText: string | ReactNode;
 }
 
+/**
+ * Returns a panel title alongside a copy truncated to `maxLength`, so a card can
+ * show the short form and keep the full string for its tooltip. Non-string content
+ * passes through untouched.
+ */
 function useGetResolvedText({
 	text,
 	maxLength,
-	matcher = '$',
-	maxValues = 2, // Default to showing 2 values before +n more
 }: UseGetResolvedTextProps): ResolvedTextResult {
-	const { dashboardVariables } = useDashboardVariables();
-	const isString = typeof text === 'string';
-
-	const processedDashboardVariables = useMemo(() => {
-		return Object.entries(dashboardVariables).reduce<
-			Record<string, string | number | boolean>
-		>((acc, [, value]) => {
-			if (!value.name) {
-				return acc;
-			}
-
-			// Handle array values
-			if (Array.isArray(value.selectedValue)) {
-				acc[value.name] = value.selectedValue.join(', ');
-			} else if (value.selectedValue != null) {
-				acc[value.name] = value.selectedValue;
-			}
-			return acc;
-		}, {});
-	}, [dashboardVariables]);
-
-	// Process array values to add +n more notation for truncated text
-	const processedVariables = useMemo(() => {
-		const result: Record<string, string> = {};
-
-		Object.entries(processedDashboardVariables).forEach(([key, value]) => {
-			// If the value contains array data (comma-separated string), format it with +n more
-			if (
-				typeof value === 'string' &&
-				!value.includes('-|-') &&
-				value.includes(',')
-			) {
-				const values = value.split(',').map((v) => v.trim());
-				if (values.length > maxValues) {
-					const visibleValues = values.slice(0, maxValues);
-					const remainingCount = values.length - maxValues;
-					result[key] = `${visibleValues.join(
-						', ',
-					)} +${remainingCount}-|-${values.join(', ')}`;
-				} else {
-					result[key] = `${values.join(', ')}-|-${values.join(', ')}`;
-				}
-			} else {
-				// For values already formatted with -|- or non-array values
-				result[key] = String(value);
-			}
-		});
-
-		return result;
-	}, [processedDashboardVariables, maxValues]);
-
-	const combinedPattern = useMemo(() => {
-		const escapedMatcher = matcher.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
-		const variablePatterns = [
-			`\\{\\{\\s*?\\.([^\\s}]+?)\\s*?\\}\\}`, // {{.var}}
-			`\\{\\{\\s*([^\\s}]+?)\\s*\\}\\}`, // {{var}}
-			`${escapedMatcher}([^\\s.,;)\\]}>]+(?:\\.[^\\s.,;)\\]}>]+)*)`, // $var.name.path - allows dots but stops at punctuation
-			`\\[\\[\\s*([^\\s\\]]+?)\\s*\\]\\]`, // [[var]]
-		];
-		return new RegExp(variablePatterns.join('|'), 'g');
-	}, [matcher]);
-
-	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(
-					new RegExp(`\\{\\{\\s*\\.(${varNamePattern})\\s*\\}\\}`),
-				);
-				if (dotMatch) {
-					return dotMatch[1].trim();
-				}
-				const normalMatch = match.match(
-					new RegExp(`\\{\\{\\s*(${varNamePattern})\\s*\\}\\}`),
-				);
-				if (normalMatch) {
-					return normalMatch[1].trim();
-				}
-			} else if (match.startsWith('[[')) {
-				const bracketMatch = match.match(
-					new RegExp(`\\[\\[\\s*(${varNamePattern})\\s*\\]\\]`),
-				);
-				if (bracketMatch) {
-					return bracketMatch[1].trim();
-				}
-			} else if (match.startsWith(matcher)) {
-				// 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, processedVariables],
-	);
-
-	const fullText = useMemo(() => {
-		if (!isString) {
-			return text;
-		}
-
-		return (text as string)?.replace(combinedPattern, (match) => {
-			const varName = extractVarName(match);
-			const value = processedVariables[varName];
-
-			if (value != null) {
-				const parts = value.split('-|-');
-				return parts.length > 1 ? parts[1] : value;
-			}
-			return match;
-		});
-	}, [text, processedVariables, combinedPattern, extractVarName, isString]);
-
 	const truncatedText = useMemo(() => {
-		if (!isString) {
+		if (typeof text !== 'string' || !maxLength || text.length <= maxLength) {
 			return text;
 		}
+		return `${text.substring(0, maxLength - 3)}...`;
+	}, [text, maxLength]);
 
-		const result = (text as string)?.replace(combinedPattern, (match) => {
-			const varName = extractVarName(match);
-			const value = processedVariables[varName];
-
-			if (value != null) {
-				const parts = value.split('-|-');
-				return parts[0] || value;
-			}
-			return match;
-		});
-
-		if (maxLength && result.length > maxLength) {
-			// For the specific test case
-			if (maxLength === 20 && result.startsWith('Logs count in')) {
-				return 'Logs count in test, a...';
-			}
-
-			// General case
-			return `${result.substring(0, maxLength - 3)}...`;
-		}
-		return result;
-	}, [
-		text,
-		processedVariables,
-		combinedPattern,
-		maxLength,
-		extractVarName,
-		isString,
-	]);
-
-	return {
-		fullText,
-		truncatedText,
-	};
+	return { fullText: text, truncatedText };
 }
 
 export default useGetResolvedText;

frontend/src/hooks/dashboard/useVariableFetchState.ts

@@ -1,151 +0,0 @@
-import { useCallback, useMemo, useRef, useSyncExternalStore } from 'react';
-import isEmpty from 'lodash-es/isEmpty';
-import {
-	IVariableFetchStoreState,
-	VariableFetchState,
-	variableFetchStore,
-} from 'providers/Dashboard/store/variableFetchStore';
-
-import { useDashboardVariablesSelector } from './useDashboardVariables';
-
-/**
- * Generic selector hook for the variable fetch store.
- * Same pattern as useDashboardVariablesSelector.
- */
-const useVariableFetchSelector = <T>(
-	selector: (state: IVariableFetchStoreState) => T,
-): T => {
-	const selectorRef = useRef(selector);
-	selectorRef.current = selector;
-
-	const getSnapshot = useCallback(
-		() => selectorRef.current(variableFetchStore.getSnapshot()),
-		[],
-	);
-
-	return useSyncExternalStore(variableFetchStore.subscribe, getSnapshot);
-};
-
-interface UseVariableFetchStateReturn {
-	/** The current fetch state for this variable */
-	variableFetchState: VariableFetchState;
-	/** Current fetch cycle — include in react-query keys to auto-cancel stale requests */
-	variableFetchCycleId: number;
-	/** True if this variable is idle (not waiting and not fetching) */
-	isVariableSettled: boolean;
-	/** True if this variable is actively fetching (loading or revalidating) */
-	isVariableFetching: boolean;
-	/** True if this variable has completed at least one fetch cycle */
-	hasVariableFetchedOnce: boolean;
-	/** True if any parent variable hasn't settled yet */
-	isVariableWaitingForDependencies: boolean;
-	/** Message describing what this variable is waiting on, or null if not waiting */
-	variableDependencyWaitMessage?: string;
-}
-
-/**
- * Per-variable hook that exposes the fetch state of a single variable.
- * Reusable by both variable input components and panel components.
- *
- * Subscribes to both variableFetchStore (for states) and
- * dashboardVariablesStore (for parent graph) to compute derived values.
- */
-export function useVariableFetchState(
-	variableName: string,
-): UseVariableFetchStateReturn {
-	// This variable's fetch state (loading, waiting, idle, etc.)
-	const variableFetchState = useVariableFetchSelector(
-		(s) => s.states[variableName] || 'idle',
-	) as VariableFetchState;
-
-	// All variable states — needed to check if parent variables are still in-flight
-	const allStates = useVariableFetchSelector((s) => s.states);
-
-	// Parent dependency graph — maps each variable to its direct parents
-	// e.g. { "childVariable": ["parentVariable"] } means "childVariable" depends on "parentVariable"
-	const parentGraph = useDashboardVariablesSelector(
-		(s) => s.dependencyData?.parentDependencyGraph,
-	);
-
-	// Timestamp of last successful fetch — 0 means never fetched
-	const lastUpdated = useVariableFetchSelector(
-		(s) => s.lastUpdated[variableName] || 0,
-	);
-
-	// Per-variable cycle counter — used as part of react-query keys
-	// so changing it auto-cancels stale requests for this variable only
-	const variableFetchCycleId = useVariableFetchSelector(
-		(s) => s.cycleIds[variableName] || 0,
-	);
-
-	const isVariableSettled = variableFetchState === 'idle';
-
-	const isVariableFetching =
-		variableFetchState === 'loading' || variableFetchState === 'revalidating';
-	// True after at least one successful fetch — used to show stale data while revalidating
-	const hasVariableFetchedOnce = lastUpdated > 0;
-
-	// Variable type — needed to differentiate waiting messages
-	const variableType = useDashboardVariablesSelector(
-		(s) => s.variableTypes[variableName],
-	);
-
-	// Parent variable names that haven't settled yet
-	const unsettledParents = useMemo(() => {
-		const parents = parentGraph?.[variableName] || [];
-		return parents.filter((p) => (allStates[p] || 'idle') !== 'idle');
-	}, [parentGraph, variableName, allStates]);
-
-	const isVariableWaitingForDependencies = unsettledParents.length > 0;
-
-	const variableDependencyWaitMessage = useMemo(() => {
-		if (variableFetchState !== 'waiting') {
-			return;
-		}
-
-		if (variableType === 'DYNAMIC') {
-			return 'Waiting for all query variable options to load.';
-		}
-
-		if (unsettledParents.length === 0) {
-			return;
-		}
-
-		const quoted = unsettledParents.map((p) => `"${p}"`);
-		const names =
-			quoted.length > 1
-				? `${quoted.slice(0, -1).join(', ')} and ${quoted[quoted.length - 1]}`
-				: quoted[0];
-		return `Waiting for options of ${names} to load.`;
-	}, [variableFetchState, variableType, unsettledParents]);
-
-	return {
-		variableFetchState,
-		isVariableSettled,
-		isVariableWaitingForDependencies,
-		variableDependencyWaitMessage,
-		isVariableFetching,
-		hasVariableFetchedOnce,
-		variableFetchCycleId,
-	};
-}
-
-export function useIsPanelWaitingOnVariable(variableNames: string[]): boolean {
-	const states = useVariableFetchSelector((s) => s.states);
-	const dashboardVariables = useDashboardVariablesSelector((s) => s.variables);
-
-	return variableNames.some((name) => {
-		const variableFetchState = states[name];
-		const variableData = Object.values(dashboardVariables).find(
-			(v) => v.name === name,
-		);
-		const { selectedValue } = variableData || {};
-
-		const isVariableInFetchingOrWaitingState =
-			variableFetchState === 'loading' ||
-			variableFetchState === 'revalidating' ||
-			variableFetchState === 'waiting';
-
-		return isEmpty(selectedValue) ? isVariableInFetchingOrWaitingState : false;
-	});
-}

frontend/src/hooks/queryBuilder/__tests__/useCreateAlerts.test.tsx

@@ -32,12 +32,8 @@ jest.mock(
 	}),
 );
 
-jest.mock('hooks/dashboard/useDashboardVariables', () => ({
-	useDashboardVariables: (): unknown => ({ dashboardVariables: {} }),
-}));
-
-jest.mock('hooks/dashboard/useDashboardVariablesByType', () => ({
-	useDashboardVariablesByType: (): unknown => ({}),
+jest.mock('hooks/dashboard/useDynamicVariableSuggestions', () => ({
+	useDynamicVariableSuggestions: (): unknown[] => [],
 }));
 
 jest.mock('hooks/useNotifications', () => ({
@@ -46,10 +42,6 @@ jest.mock('hooks/useNotifications', () => ({
 	}),
 }));
 
-jest.mock('lib/dashboardVariables/getDashboardVariables', () => ({
-	getDashboardVariables: (): unknown => ({}),
-}));
-
 jest.mock('utils/getGraphType', () => ({
 	getGraphType: jest.fn().mockReturnValue('time_series'),
 }));

frontend/src/hooks/queryBuilder/useCreateAlerts.tsx

@@ -11,10 +11,8 @@ import { ENTITY_VERSION_V5 } from 'constants/app';
 import { QueryParams } from 'constants/query';
 import ROUTES from 'constants/routes';
 import { MenuItemKeys } from 'container/WidgetCard/Header/contants';
-import { useDashboardVariables } from 'hooks/dashboard/useDashboardVariables';
-import { useDashboardVariablesByType } from 'hooks/dashboard/useDashboardVariablesByType';
+import { useDynamicVariableSuggestions } from 'hooks/dashboard/useDynamicVariableSuggestions';
 import { useNotifications } from 'hooks/useNotifications';
-import { getDashboardVariables } from 'lib/dashboardVariables/getDashboardVariables';
 import { mapQueryDataFromApi } from 'lib/newQueryBuilder/queryBuilderMappers/mapQueryDataFromApi';
 import { isEmpty } from 'lodash-es';
 import { AppState } from 'store/reducers';
@@ -38,11 +36,7 @@ const useCreateAlerts = (widget?: Widgets, caller?: string): VoidFunction => {
 
 	const { notifications } = useNotifications();
 
-	const { dashboardVariables } = useDashboardVariables();
-	const dashboardDynamicVariables = useDashboardVariablesByType(
-		'DYNAMIC',
-		'values',
-	);
+	const dashboardDynamicVariables = useDynamicVariableSuggestions();
 
 	return useCallback(() => {
 		if (!widget) {
@@ -68,7 +62,6 @@ const useCreateAlerts = (widget?: Widgets, caller?: string): VoidFunction => {
 			globalSelectedInterval,
 			graphType: getGraphType(widget.panelTypes),
 			selectedTime: widget.timePreferance,
-			variables: getDashboardVariables(dashboardVariables),
 			originalGraphType: widget.panelTypes,
 			dynamicVariables: dashboardDynamicVariables,
 		});
@@ -107,7 +100,6 @@ const useCreateAlerts = (widget?: Widgets, caller?: string): VoidFunction => {
 		globalSelectedInterval,
 		notifications,
 		queryRangeMutation,
-		dashboardVariables,
 		dashboardDynamicVariables,
 		widget,
 	]);

frontend/src/hooks/queryBuilder/useGetQueryRange.ts

@@ -5,7 +5,7 @@ import { PANEL_TYPES } from 'constants/queryBuilder';
 import { MAX_QUERY_RETRIES } from 'constants/reactQuery';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import { updateBarStepInterval } from 'container/WidgetCard/utils';
-import { useDashboardVariablesByType } from 'hooks/dashboard/useDashboardVariablesByType';
+import { useDynamicVariableSuggestions } from 'hooks/dashboard/useDynamicVariableSuggestions';
 import {
 	GetMetricQueryRange,
 	GetQueryResultsProps,
@@ -33,10 +33,7 @@ export const useGetQueryRange: UseGetQueryRange = (
 	options,
 	headers,
 ) => {
-	const dashboardDynamicVariables = useDashboardVariablesByType(
-		'DYNAMIC',
-		'values',
-	);
+	const dashboardDynamicVariables = useDynamicVariableSuggestions();
 
 	const newRequestData: GetQueryResultsProps = useMemo(() => {
 		const firstQueryData = requestData.query.builder?.queryData[0];

frontend/src/lib/dashboard/getQueryResults.ts

@@ -17,8 +17,8 @@ import {
 import { Pagination } from 'hooks/queryPagination';
 import { convertNewDataToOld } from 'lib/newQueryBuilder/convertNewDataToOld';
 import { isEmpty } from 'lodash-es';
+import { DynamicVariableSuggestion } from 'providers/Dashboard/store/dynamicVariableSuggestions';
 import { SuccessResponseV2, Warning } from 'types/api';
-import { IDashboardVariable } from 'types/api/dashboard/variables';
 import { MetricQueryRangeSuccessResponse } from 'types/api/metrics/getQueryRange';
 import { IBuilderQuery, Query } from 'types/api/queryBuilder/queryBuilderData';
 import {
@@ -179,7 +179,7 @@ export const getLegend = (
 export async function GetMetricQueryRange(
 	props: GetQueryResultsProps,
 	version: string,
-	dynamicVariables?: IDashboardVariable[],
+	dynamicVariables?: DynamicVariableSuggestion[],
 	signal?: AbortSignal,
 	headers?: Record<string, string>,
 ): Promise<MetricQueryRangeSuccessResponse> {
@@ -364,5 +364,5 @@ export interface GetQueryResultsProps {
 	end?: number;
 	step?: number;
 	originalGraphType?: PANEL_TYPES;
-	dynamicVariables?: IDashboardVariable[];
+	dynamicVariables?: DynamicVariableSuggestion[];
 }

frontend/src/lib/dashboardVariables/dependencyGraph.ts

@@ -1,239 +0,0 @@
-import { textContainsVariableReference } from 'lib/dashboardVariables/variableReference';
-import { IDependencyData } from 'providers/Dashboard/store/dashboardVariables/dashboardVariablesStoreTypes';
-import { IDashboardVariable } from 'types/api/dashboard/variables';
-
-/**
- * Inter-variable dependency graph over the shared dashboard-variables store. A
- * QUERY variable "depends on" another when its query text references that
- * variable, so changing a value must refetch its dependents.
- *
- * Keyed on `IDashboardVariable`. The V2 editor has a parallel implementation
- * over its own flat form model in
- * `pages/DashboardPage/DashboardContainer/VariablesBar/utils/variableDependencies.ts`.
- */
-
-export type VariableGraph = Record<string, string[]>;
-
-/** Names of QUERY variables whose query references `variableName`. */
-const getDependentVariablesBasedOnVariableName = (
-	variableName: string,
-	variables: IDashboardVariable[],
-): string[] => {
-	if (!variables || !Array.isArray(variables)) {
-		return [];
-	}
-
-	return variables
-		.map((variable) => {
-			if (variable.type === 'QUERY') {
-				const queryValue = variable.queryValue || '';
-				if (textContainsVariableReference(queryValue, variableName)) {
-					return variable.name;
-				}
-			}
-			return null;
-		})
-		.filter((val): val is string => val !== null);
-};
-
-/** variable name → its direct dependents (children). */
-export const buildDependencies = (
-	variables: IDashboardVariable[],
-): VariableGraph => {
-	const graph: VariableGraph = {};
-
-	// Initialize empty arrays for all variables first
-	variables.forEach((variable) => {
-		if (variable.name) {
-			graph[variable.name] = [];
-		}
-	});
-
-	// For each QUERY variable, add it as a dependent to its referenced variables
-	variables.forEach((variable) => {
-		if (variable.name) {
-			const dependentVariables = getDependentVariablesBasedOnVariableName(
-				variable.name,
-				variables,
-			);
-
-			// For each referenced variable, add the current query as a dependent
-			graph[variable.name] = dependentVariables;
-		}
-	});
-
-	return graph;
-};
-
-/** Invert a child graph into a parent graph. */
-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) => {
-			if (!parentGraph[child]) {
-				parentGraph[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;
-};
-
-/** Topological order, parent graph, transitive descendants and cycle info. */
-export const buildDependencyGraph = (
-	dependencies: VariableGraph,
-	// eslint-disable-next-line sonarjs/cognitive-complexity
-): IDependencyData => {
-	const inDegree: Record<string, number> = {};
-	const adjList: VariableGraph = {};
-
-	// Initialize in-degree and adjacency list
-	Object.keys(dependencies).forEach((node) => {
-		if (!inDegree[node]) {
-			inDegree[node] = 0;
-		}
-		if (!adjList[node]) {
-			adjList[node] = [];
-		}
-		dependencies[node]?.forEach((child) => {
-			if (!inDegree[child]) {
-				inDegree[child] = 0;
-			}
-			inDegree[child]++;
-			adjList[node].push(child);
-		});
-	});
-
-	// 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,
-	);
-	const topologicalOrder: string[] = [];
-
-	while (queue.length > 0) {
-		const current = queue.shift();
-		if (current === undefined) {
-			break;
-		}
-		topologicalOrder.push(current);
-
-		adjList[current]?.forEach((neighbor) => {
-			inDegree[neighbor]--;
-			if (inDegree[neighbor] === 0) {
-				queue.push(neighbor);
-			}
-		});
-	}
-
-	const hasCycle = topologicalOrder.length !== Object.keys(dependencies)?.length;
-
-	// Pre-compute transitive descendants by walking topological order in reverse.
-	// Each node's transitive descendants = direct children + their transitive descendants.
-	const transitiveDescendants: VariableGraph = {};
-	for (let i = topologicalOrder.length - 1; i >= 0; i--) {
-		const node = topologicalOrder[i];
-		const desc = new Set<string>();
-		for (const child of adjList[node] || []) {
-			desc.add(child);
-			for (const d of transitiveDescendants[child] || []) {
-				desc.add(d);
-			}
-		}
-		transitiveDescendants[node] = Array.from(desc);
-	}
-
-	return {
-		order: topologicalOrder,
-		graph: adjList,
-		parentDependencyGraph: buildParentDependencyGraph(adjList),
-		transitiveDescendants,
-		hasCycle,
-		cycleNodes,
-	};
-};

frontend/src/lib/dashboardVariables/getDashboardVariables.ts

@@ -1,41 +0,0 @@
-import getStartEndRangeTime from 'lib/getStartEndRangeTime';
-import { IDashboardVariables } from 'providers/Dashboard/store/dashboardVariables/dashboardVariablesStoreTypes';
-import store from 'store';
-
-export const getDashboardVariables = (
-	variables?: IDashboardVariables,
-): Record<string, unknown> => {
-	if (!variables) {
-		return {};
-	}
-
-	try {
-		const { globalTime } = store.getState();
-		const { start, end } = getStartEndRangeTime({
-			type: 'GLOBAL_TIME',
-			interval: globalTime.selectedTime,
-		});
-
-		const variablesTuple: Record<string, unknown> = {
-			SIGNOZ_START_TIME: parseInt(start, 10) * 1e3,
-			SIGNOZ_END_TIME: parseInt(end, 10) * 1e3,
-		};
-
-		Object.entries(variables).forEach(([, value]) => {
-			if (value?.name) {
-				variablesTuple[value.name] =
-					value?.type === 'DYNAMIC' &&
-					value?.allSelected &&
-					value?.showALLOption &&
-					value?.multiSelect
-						? '__all__'
-						: value?.selectedValue;
-			}
-		});
-
-		return variablesTuple;
-	} catch (e) {
-		console.error(e);
-	}
-	return {};
-};

frontend/src/pages/DashboardPage/DashboardContainer/hooks/useSyncVariablesForSuggestions.ts

@@ -1,62 +1,37 @@
 import { useEffect, useMemo } from 'react';
+import type { DashboardtypesGettableDashboardV2DTO } from 'api/generated/services/sigNoz.schemas';
 import {
-	DashboardtypesDynamicVariableSignalDTO,
-	type DashboardtypesGettableDashboardV2DTO,
-} from 'api/generated/services/sigNoz.schemas';
-import { setDashboardVariablesStore } from 'providers/Dashboard/store/dashboardVariables/dashboardVariablesStore';
-import type {
-	IDashboardVariable,
-	TVariableQueryType,
-} from 'types/api/dashboard/variables';
+	type DynamicVariableSuggestion,
+	setDynamicVariableSuggestions,
+} from 'providers/Dashboard/store/dynamicVariableSuggestions';
 
 import { dtoToFormModel } from '../DashboardSettings/Variables/variableAdapters';
-import {
-	type VariableFormModel,
-	type VariableType,
-} from '../DashboardSettings/Variables/variableFormModel';
-
-const TYPE_TO_V1: Record<VariableType, TVariableQueryType> = {
-	QUERY: 'QUERY',
-	CUSTOM: 'CUSTOM',
-	TEXT: 'TEXTBOX',
-	DYNAMIC: 'DYNAMIC',
-};
-
-/** Minimal V1-shaped variable — only the fields the shared query builder reads. */
-function toV1Variable(model: VariableFormModel): IDashboardVariable {
-	return {
-		id: model.name,
-		name: model.name,
-		description: model.description,
-		type: TYPE_TO_V1[model.type],
-		queryValue: model.queryValue,
-		customValue: model.customValue,
-		textboxValue: model.textValue,
-		sort: 'DISABLED',
-		multiSelect: model.multiSelect,
-		showALLOption: model.showAllOption,
-		dynamicVariablesAttribute: model.dynamicAttribute,
-		dynamicVariablesSource:
-			model.dynamicSignal === DashboardtypesDynamicVariableSignalDTO.all
-				? 'all sources'
-				: model.dynamicSignal,
-	};
-}
 
 /**
- * Publishes the V2 dashboard's variables into the shared `dashboardVariablesStore`
- * that the query builder's autocomplete (`QuerySearch`) reads, so `$variable`
- * suggestions show up in the panel editor and the dashboards-page query builder.
- * Suggestion-only — the runtime engine lives in the V2 store. Clears on unmount so
- * the shared store doesn't leak into other pages.
+ * Publishes the dashboard's dynamic variables into the shared suggestion store that
+ * the query builder's autocomplete (`QuerySearch`) reads, so `$variable` is offered
+ * as a value for the attribute each one backs — in the panel editor and the
+ * dashboards-page query builder. Suggestion-only: the runtime engine lives in the
+ * dashboard store. Clears on unmount so the shared store doesn't leak into other
+ * pages.
  */
 export function useSyncVariablesForSuggestions(
 	dashboard: DashboardtypesGettableDashboardV2DTO | undefined,
 ): void {
 	const dashboardId = dashboard?.id ?? '';
 	const specVariables = dashboard?.spec?.variables;
-	const variables = useMemo(
-		() => (specVariables ?? []).map(dtoToFormModel),
+	const suggestions = useMemo<DynamicVariableSuggestion[]>(
+		() =>
+			(specVariables ?? [])
+				.map(dtoToFormModel)
+				.filter(
+					(model) =>
+						model.type === 'DYNAMIC' && !!model.name && !!model.dynamicAttribute,
+				)
+				.map((model) => ({
+					name: model.name,
+					attribute: model.dynamicAttribute,
+				})),
 		[specVariables],
 	);
 
@@ -64,14 +39,7 @@ export function useSyncVariablesForSuggestions(
 		if (!dashboardId) {
 			return undefined;
 		}
-		const record: Record<string, IDashboardVariable> = {};
-		variables.forEach((model) => {
-			if (model.name) {
-				record[model.name] = toV1Variable(model);
-			}
-		});
-		setDashboardVariablesStore({ dashboardId, variables: record });
-		return (): void =>
-			setDashboardVariablesStore({ dashboardId: '', variables: {} });
-	}, [dashboardId, variables]);
+		setDynamicVariableSuggestions(suggestions);
+		return (): void => setDynamicVariableSuggestions([]);
+	}, [dashboardId, suggestions]);
 }

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

@@ -16,9 +16,9 @@ import type {
 
 /**
  * Backend sentinel for "every value selected" on a multi-select dynamic variable.
- * V1 parity (`getDashboardVariables`): only dynamic vars collapse to `__all__`;
- * query/custom multi-selects send the full value array instead. Lowercase — the
- * URL/store `__ALL__` sentinel is a separate serialization concern.
+ * Only dynamic vars collapse to `__all__`; query/custom multi-selects send the full
+ * value array instead. Lowercase — the URL/store `__ALL__` sentinel is a separate
+ * serialization concern.
  */
 const ALL_VALUES_SENTINEL = '__all__';
 
@@ -68,8 +68,8 @@ function resolveValue(
 /**
  * Builds the V5 `variables` map from the dashboard's variable definitions and the
  * runtime selection, so a panel query substitutes the values the user picked in
- * the variable bar (V1 parity with `getDashboardVariables` + the V5 prep). The
- * definition list supplies the wire `type` (the selection map carries only values).
+ * the variable bar. The definition list supplies the wire `type` (the selection map
+ * carries only values).
  */
 export function buildVariablesPayload(
 	definitions: VariableFormModel[],

frontend/src/providers/Dashboard/store/__tests__/variableFetchStore.test.ts

@@ -1,603 +0,0 @@
-import * as dashboardVariablesStore from '../dashboardVariables/dashboardVariablesStore';
-import { IDependencyData } from '../dashboardVariables/dashboardVariablesStoreTypes';
-import {
-	enqueueDescendantsOfVariable,
-	enqueueFetchOfAllVariables,
-	initializeVariableFetchStore,
-	onVariableFetchComplete,
-	onVariableFetchFailure,
-	VariableFetchContext,
-	variableFetchStore,
-} from '../variableFetchStore';
-
-const getVariableDependencyContextSpy = jest.spyOn(
-	dashboardVariablesStore,
-	'getVariableDependencyContext',
-);
-
-function resetStore(): void {
-	variableFetchStore.set(() => ({
-		states: {},
-		lastUpdated: {},
-		cycleIds: {},
-	}));
-}
-
-function mockContext(overrides: Partial<VariableFetchContext> = {}): void {
-	getVariableDependencyContextSpy.mockReturnValue({
-		doAllQueryVariablesHaveValuesSelected: false,
-		variableTypes: {},
-		dynamicVariableOrder: [],
-		dependencyData: null,
-		...overrides,
-	});
-}
-
-/**
- * Helper to build a dependency data object for tests.
- * Only the fields used by the store actions are required.
- */
-function buildDependencyData(
-	overrides: Partial<IDependencyData> = {},
-): IDependencyData {
-	return {
-		order: [],
-		graph: {},
-		parentDependencyGraph: {},
-		transitiveDescendants: {},
-		hasCycle: false,
-		...overrides,
-	};
-}
-
-describe('variableFetchStore', () => {
-	beforeEach(() => {
-		resetStore();
-		jest.clearAllMocks();
-	});
-
-	// ==================== initializeVariableFetchStore ====================
-
-	describe('initializeVariableFetchStore', () => {
-		it('should initialize new variables to idle', () => {
-			initializeVariableFetchStore(['a', 'b', 'c']);
-
-			const storeSnapshot = variableFetchStore.getSnapshot();
-			expect(storeSnapshot.states).toStrictEqual({
-				a: 'idle',
-				b: 'idle',
-				c: 'idle',
-			});
-		});
-
-		it('should preserve existing states for known variables', () => {
-			// Pre-set a state
-			variableFetchStore.update((d) => {
-				d.states.a = 'loading';
-			});
-
-			initializeVariableFetchStore(['a', 'b']);
-
-			const storeSnapshot = variableFetchStore.getSnapshot();
-			expect(storeSnapshot.states.a).toBe('loading');
-			expect(storeSnapshot.states.b).toBe('idle');
-		});
-
-		it('should clean up stale variables that no longer exist', () => {
-			variableFetchStore.update((d) => {
-				d.states.old = 'idle';
-				d.lastUpdated.old = 100;
-				d.cycleIds.old = 3;
-			});
-
-			initializeVariableFetchStore(['a']);
-
-			const storeSnapshot = variableFetchStore.getSnapshot();
-			expect(storeSnapshot.states.old).toBeUndefined();
-			expect(storeSnapshot.lastUpdated.old).toBeUndefined();
-			expect(storeSnapshot.cycleIds.old).toBeUndefined();
-			expect(storeSnapshot.states.a).toBe('idle');
-		});
-
-		it('should handle empty variable names array', () => {
-			variableFetchStore.update((d) => {
-				d.states.a = 'idle';
-			});
-
-			initializeVariableFetchStore([]);
-
-			const storeSnapshot = variableFetchStore.getSnapshot();
-			expect(storeSnapshot.states).toStrictEqual({});
-		});
-	});
-
-	// ==================== enqueueFetchOfAllVariables ====================
-
-	describe('enqueueFetchOfAllVariables', () => {
-		it('should no-op when dependencyData is null', () => {
-			mockContext({ dependencyData: null });
-
-			initializeVariableFetchStore(['a']);
-			enqueueFetchOfAllVariables();
-
-			expect(variableFetchStore.getSnapshot().states.a).toBe('idle');
-		});
-
-		it('should set root query variables to loading and dependent ones to waiting', () => {
-			// a is root (no parents), b depends on a
-			mockContext({
-				dependencyData: buildDependencyData({
-					order: ['a', 'b'],
-					parentDependencyGraph: { a: [], b: ['a'] },
-				}),
-				variableTypes: { a: 'QUERY', b: 'QUERY' },
-			});
-
-			initializeVariableFetchStore(['a', 'b']);
-			enqueueFetchOfAllVariables();
-
-			const storeSnapshot = variableFetchStore.getSnapshot();
-			expect(storeSnapshot.states.a).toBe('loading');
-			expect(storeSnapshot.states.b).toBe('waiting');
-		});
-
-		it('should set root query variables to revalidating when previously fetched', () => {
-			mockContext({
-				dependencyData: buildDependencyData({
-					order: ['a'],
-					parentDependencyGraph: { a: [] },
-				}),
-				variableTypes: { a: 'QUERY' },
-			});
-
-			// Pre-set lastUpdated so it appears previously fetched
-			variableFetchStore.update((d) => {
-				d.lastUpdated.a = 1000;
-			});
-
-			initializeVariableFetchStore(['a']);
-			enqueueFetchOfAllVariables();
-
-			const storeSnapshot = variableFetchStore.getSnapshot();
-			expect(storeSnapshot.states.a).toBe('revalidating');
-		});
-
-		it('should bump cycle IDs for all enqueued variables', () => {
-			mockContext({
-				dependencyData: buildDependencyData({
-					order: ['a', 'b'],
-					parentDependencyGraph: { a: [], b: ['a'] },
-				}),
-				variableTypes: { a: 'QUERY', b: 'QUERY' },
-			});
-
-			initializeVariableFetchStore(['a', 'b']);
-			enqueueFetchOfAllVariables();
-
-			const storeSnapshot = variableFetchStore.getSnapshot();
-			expect(storeSnapshot.cycleIds.a).toBe(1);
-			expect(storeSnapshot.cycleIds.b).toBe(1);
-		});
-
-		it('should set dynamic variables to waiting when not all query variables have values', () => {
-			mockContext({
-				doAllQueryVariablesHaveValuesSelected: false,
-				dependencyData: buildDependencyData({ order: [] }),
-				variableTypes: { dyn1: 'DYNAMIC' },
-				dynamicVariableOrder: ['dyn1'],
-			});
-
-			initializeVariableFetchStore(['dyn1']);
-			enqueueFetchOfAllVariables();
-
-			const storeSnapshot = variableFetchStore.getSnapshot();
-			expect(storeSnapshot.states.dyn1).toBe('waiting');
-		});
-
-		it('should set dynamic variables to loading when all query variables have values', () => {
-			mockContext({
-				doAllQueryVariablesHaveValuesSelected: true,
-				dependencyData: buildDependencyData({ order: [] }),
-				variableTypes: { dyn1: 'DYNAMIC' },
-				dynamicVariableOrder: ['dyn1'],
-			});
-
-			initializeVariableFetchStore(['dyn1']);
-			enqueueFetchOfAllVariables();
-
-			const storeSnapshot = variableFetchStore.getSnapshot();
-			expect(storeSnapshot.states.dyn1).toBe('loading');
-		});
-
-		it('should not treat non-QUERY parents as query parents', () => {
-			// b has a CUSTOM parent — shouldn't cause waiting
-			mockContext({
-				dependencyData: buildDependencyData({
-					order: ['b'],
-					parentDependencyGraph: { b: ['customVar'] },
-				}),
-				variableTypes: { b: 'QUERY', customVar: 'CUSTOM' },
-			});
-
-			initializeVariableFetchStore(['b', 'customVar']);
-			enqueueFetchOfAllVariables();
-
-			const storeSnapshot = variableFetchStore.getSnapshot();
-			expect(storeSnapshot.states.b).toBe('loading');
-		});
-	});
-
-	// ==================== onVariableFetchComplete ====================
-
-	describe('onVariableFetchComplete', () => {
-		it('should set the completed variable to idle with a lastUpdated timestamp', () => {
-			mockContext();
-
-			variableFetchStore.update((d) => {
-				d.states.a = 'loading';
-			});
-
-			const before = Date.now();
-			onVariableFetchComplete('a');
-			const after = Date.now();
-
-			const storeSnapshot = variableFetchStore.getSnapshot();
-			expect(storeSnapshot.states.a).toBe('idle');
-			expect(storeSnapshot.lastUpdated.a).toBeGreaterThanOrEqual(before);
-			expect(storeSnapshot.lastUpdated.a).toBeLessThanOrEqual(after);
-		});
-
-		it('should unblock waiting query-type children', () => {
-			mockContext({
-				dependencyData: buildDependencyData({
-					graph: { a: ['b'] },
-				}),
-				variableTypes: { a: 'QUERY', b: 'QUERY' },
-			});
-
-			variableFetchStore.update((d) => {
-				d.states.a = 'loading';
-				d.states.b = 'waiting';
-			});
-
-			onVariableFetchComplete('a');
-
-			const storeSnapshot = variableFetchStore.getSnapshot();
-			expect(storeSnapshot.states.a).toBe('idle');
-			expect(storeSnapshot.states.b).toBe('loading');
-		});
-
-		it('should not unblock non-QUERY children', () => {
-			mockContext({
-				dependencyData: buildDependencyData({
-					graph: { a: ['dyn1'] },
-				}),
-				variableTypes: { a: 'QUERY', dyn1: 'DYNAMIC' },
-			});
-
-			variableFetchStore.update((d) => {
-				d.states.a = 'loading';
-				d.states.dyn1 = 'waiting';
-			});
-
-			onVariableFetchComplete('a');
-
-			const storeSnapshot = variableFetchStore.getSnapshot();
-			// dyn1 is DYNAMIC, not QUERY, so it should remain waiting
-			expect(storeSnapshot.states.dyn1).toBe('waiting');
-		});
-
-		it('should unlock waiting dynamic variables when all query variables are settled', () => {
-			mockContext({
-				dependencyData: buildDependencyData({
-					graph: { a: [] },
-				}),
-				variableTypes: { a: 'QUERY', dyn1: 'DYNAMIC' },
-				dynamicVariableOrder: ['dyn1'],
-			});
-
-			variableFetchStore.update((d) => {
-				d.states.a = 'loading';
-				d.states.dyn1 = 'waiting';
-			});
-
-			onVariableFetchComplete('a');
-
-			const storeSnapshot = variableFetchStore.getSnapshot();
-			expect(storeSnapshot.states.dyn1).toBe('loading');
-		});
-
-		it('should NOT unlock dynamic variables if a query variable is still in-flight', () => {
-			mockContext({
-				dependencyData: buildDependencyData({
-					graph: { a: ['b'] },
-				}),
-				variableTypes: { a: 'QUERY', b: 'QUERY', dyn1: 'DYNAMIC' },
-				dynamicVariableOrder: ['dyn1'],
-			});
-
-			variableFetchStore.update((d) => {
-				d.states.a = 'loading';
-				d.states.b = 'waiting';
-				d.states.dyn1 = 'waiting';
-			});
-
-			onVariableFetchComplete('a');
-
-			const storeSnapshot = variableFetchStore.getSnapshot();
-			expect(storeSnapshot.states.dyn1).toBe('waiting');
-		});
-	});
-
-	// ==================== onVariableFetchFailure ====================
-
-	describe('onVariableFetchFailure', () => {
-		it('should set the failed variable to error', () => {
-			mockContext();
-
-			variableFetchStore.update((d) => {
-				d.states.a = 'loading';
-			});
-
-			onVariableFetchFailure('a');
-
-			const storeSnapshot = variableFetchStore.getSnapshot();
-			expect(storeSnapshot.states.a).toBe('error');
-		});
-
-		it('should set query-type transitive descendants to idle', () => {
-			mockContext({
-				dependencyData: buildDependencyData({
-					transitiveDescendants: { a: ['b', 'c'] },
-				}),
-				variableTypes: { a: 'QUERY', b: 'QUERY', c: 'QUERY' },
-			});
-
-			variableFetchStore.update((d) => {
-				d.states.a = 'loading';
-				d.states.b = 'waiting';
-				d.states.c = 'waiting';
-			});
-
-			onVariableFetchFailure('a');
-
-			const storeSnapshot = variableFetchStore.getSnapshot();
-			expect(storeSnapshot.states.a).toBe('error');
-			expect(storeSnapshot.states.b).toBe('idle');
-			expect(storeSnapshot.states.c).toBe('idle');
-		});
-
-		it('should not touch non-QUERY descendants', () => {
-			mockContext({
-				dependencyData: buildDependencyData({
-					transitiveDescendants: { a: ['dyn1'] },
-				}),
-				variableTypes: { a: 'QUERY', dyn1: 'DYNAMIC' },
-			});
-
-			variableFetchStore.update((d) => {
-				d.states.a = 'loading';
-				d.states.dyn1 = 'waiting';
-			});
-
-			onVariableFetchFailure('a');
-
-			expect(variableFetchStore.getSnapshot().states.dyn1).toBe('waiting');
-		});
-
-		it('should unlock waiting dynamic variables when all query variables settle via error', () => {
-			mockContext({
-				dependencyData: buildDependencyData({
-					transitiveDescendants: {},
-				}),
-				variableTypes: { a: 'QUERY', dyn1: 'DYNAMIC' },
-				dynamicVariableOrder: ['dyn1'],
-			});
-
-			variableFetchStore.update((d) => {
-				d.states.a = 'loading';
-				d.states.dyn1 = 'waiting';
-			});
-
-			onVariableFetchFailure('a');
-
-			expect(variableFetchStore.getSnapshot().states.dyn1).toBe('loading');
-		});
-	});
-
-	// ==================== enqueueDescendantsOfVariable ====================
-
-	describe('enqueueDescendantsOfVariable', () => {
-		it('should no-op when dependencyData is null', () => {
-			mockContext({ dependencyData: null });
-
-			variableFetchStore.update((d) => {
-				d.states.a = 'idle';
-				d.states.b = 'idle';
-			});
-
-			enqueueDescendantsOfVariable('a');
-
-			expect(variableFetchStore.getSnapshot().states.b).toBe('idle');
-		});
-
-		it('should enqueue query-type descendants with all parents settled', () => {
-			mockContext({
-				dependencyData: buildDependencyData({
-					transitiveDescendants: { a: ['b'] },
-					parentDependencyGraph: { b: ['a'] },
-				}),
-				variableTypes: { a: 'QUERY', b: 'QUERY' },
-			});
-
-			variableFetchStore.update((d) => {
-				d.states.a = 'idle';
-				d.states.b = 'idle';
-			});
-
-			enqueueDescendantsOfVariable('a');
-
-			const storeSnapshot = variableFetchStore.getSnapshot();
-			expect(storeSnapshot.states.b).toBe('loading');
-			expect(storeSnapshot.cycleIds.b).toBe(1);
-		});
-
-		it('should set descendants to waiting when some parents are not settled', () => {
-			// b depends on both a and c; c is still loading
-			mockContext({
-				dependencyData: buildDependencyData({
-					transitiveDescendants: { a: ['b'] },
-					parentDependencyGraph: { b: ['a', 'c'] },
-				}),
-				variableTypes: { a: 'QUERY', b: 'QUERY', c: 'QUERY' },
-			});
-
-			variableFetchStore.update((d) => {
-				d.states.a = 'idle';
-				d.states.b = 'idle';
-				d.states.c = 'loading';
-			});
-
-			enqueueDescendantsOfVariable('a');
-
-			expect(variableFetchStore.getSnapshot().states.b).toBe('waiting');
-		});
-
-		it('should skip non-QUERY descendants', () => {
-			mockContext({
-				dependencyData: buildDependencyData({
-					transitiveDescendants: { a: ['dyn1'] },
-					parentDependencyGraph: {},
-				}),
-				variableTypes: { a: 'QUERY', dyn1: 'DYNAMIC' },
-			});
-
-			variableFetchStore.update((d) => {
-				d.states.a = 'idle';
-				d.states.dyn1 = 'idle';
-			});
-
-			enqueueDescendantsOfVariable('a');
-
-			// dyn1 is DYNAMIC, so it should not be touched
-			expect(variableFetchStore.getSnapshot().states.dyn1).toBe('idle');
-		});
-
-		it('should handle chain of descendants: a -> b -> c', () => {
-			// a -> b -> c, all QUERY
-			mockContext({
-				dependencyData: buildDependencyData({
-					transitiveDescendants: { a: ['b', 'c'] },
-					parentDependencyGraph: { b: ['a'], c: ['b'] },
-				}),
-				variableTypes: { a: 'QUERY', b: 'QUERY', c: 'QUERY' },
-			});
-
-			variableFetchStore.update((d) => {
-				d.states.a = 'idle';
-				d.states.b = 'idle';
-				d.states.c = 'idle';
-			});
-
-			enqueueDescendantsOfVariable('a');
-
-			const storeSnapshot = variableFetchStore.getSnapshot();
-			// b's parent (a) is idle/settled → loading
-			expect(storeSnapshot.states.b).toBe('loading');
-			// c's parent (b) just moved to loading (not settled) → waiting
-			expect(storeSnapshot.states.c).toBe('waiting');
-		});
-
-		it('should set descendants to revalidating when previously fetched', () => {
-			mockContext({
-				dependencyData: buildDependencyData({
-					transitiveDescendants: { a: ['b'] },
-					parentDependencyGraph: { b: ['a'] },
-				}),
-				variableTypes: { a: 'QUERY', b: 'QUERY' },
-			});
-
-			variableFetchStore.update((d) => {
-				d.states.a = 'idle';
-				d.states.b = 'idle';
-				d.lastUpdated.b = 1000;
-			});
-
-			enqueueDescendantsOfVariable('a');
-
-			expect(variableFetchStore.getSnapshot().states.b).toBe('revalidating');
-		});
-
-		it('should enqueue dynamic variables immediately when all query variables are settled', () => {
-			mockContext({
-				dependencyData: buildDependencyData({
-					transitiveDescendants: { customVar: [] },
-					parentDependencyGraph: {},
-				}),
-				variableTypes: { q1: 'QUERY', customVar: 'CUSTOM', dyn1: 'DYNAMIC' },
-				dynamicVariableOrder: ['dyn1'],
-			});
-
-			variableFetchStore.update((d) => {
-				d.states.q1 = 'idle';
-				d.states.customVar = 'idle';
-				d.states.dyn1 = 'idle';
-			});
-
-			enqueueDescendantsOfVariable('customVar');
-
-			const snapshot = variableFetchStore.getSnapshot();
-			expect(snapshot.states.dyn1).toBe('loading');
-			expect(snapshot.cycleIds.dyn1).toBe(1);
-		});
-
-		it('should set dynamic variables to waiting when query variables are not yet settled', () => {
-			// a is a query variable still loading; changing customVar should queue dyn1 as waiting
-			mockContext({
-				dependencyData: buildDependencyData({
-					transitiveDescendants: { customVar: [] },
-					parentDependencyGraph: {},
-				}),
-				variableTypes: { a: 'QUERY', customVar: 'CUSTOM', dyn1: 'DYNAMIC' },
-				dynamicVariableOrder: ['dyn1'],
-			});
-
-			variableFetchStore.update((d) => {
-				d.states.a = 'loading';
-				d.states.customVar = 'idle';
-				d.states.dyn1 = 'idle';
-			});
-
-			enqueueDescendantsOfVariable('customVar');
-
-			expect(variableFetchStore.getSnapshot().states.dyn1).toBe('waiting');
-		});
-
-		it('should set dynamic variables to waiting when a query descendant is now loading', () => {
-			// a -> b (QUERY), dyn1 (DYNAMIC). When a changes, b starts loading,
-			// so dyn1 should wait until b settles.
-			mockContext({
-				dependencyData: buildDependencyData({
-					transitiveDescendants: { a: ['b'] },
-					parentDependencyGraph: { b: ['a'] },
-				}),
-				variableTypes: { a: 'QUERY', b: 'QUERY', dyn1: 'DYNAMIC' },
-				dynamicVariableOrder: ['dyn1'],
-			});
-
-			variableFetchStore.update((d) => {
-				d.states.a = 'idle';
-				d.states.b = 'idle';
-				d.states.dyn1 = 'idle';
-			});
-
-			enqueueDescendantsOfVariable('a');
-
-			const snapshot = variableFetchStore.getSnapshot();
-			// b's parent (a) is idle → b starts loading
-			expect(snapshot.states.b).toBe('loading');
-			// dyn1 must wait because b is now loading (not settled)
-			expect(snapshot.states.dyn1).toBe('waiting');
-		});
-	});
-});

frontend/src/providers/Dashboard/store/__tests__/variableFetchStoreUtils.test.ts

@@ -1,196 +0,0 @@
-import {
-	IVariableFetchStoreState,
-	VariableFetchState,
-} from '../variableFetchStore';
-import {
-	areAllQueryVariablesSettled,
-	isSettled,
-	resolveFetchState,
-	unlockWaitingDynamicVariables,
-} from '../variableFetchStoreUtils';
-
-describe('variableFetchStoreUtils', () => {
-	describe('isSettled', () => {
-		it('should return true for idle state', () => {
-			expect(isSettled('idle')).toBe(true);
-		});
-
-		it('should return true for error state', () => {
-			expect(isSettled('error')).toBe(true);
-		});
-
-		it('should return false for loading state', () => {
-			expect(isSettled('loading')).toBe(false);
-		});
-
-		it('should return false for revalidating state', () => {
-			expect(isSettled('revalidating')).toBe(false);
-		});
-
-		it('should return false for waiting state', () => {
-			expect(isSettled('waiting')).toBe(false);
-		});
-
-		it('should return false for undefined', () => {
-			expect(isSettled(undefined)).toBe(false);
-		});
-	});
-
-	describe('resolveFetchState', () => {
-		it('should return "loading" when variable has never been fetched', () => {
-			const draft: IVariableFetchStoreState = {
-				states: {},
-				lastUpdated: {},
-				cycleIds: {},
-			};
-
-			expect(resolveFetchState(draft, 'myVar')).toBe('loading');
-		});
-
-		it('should return "loading" when lastUpdated is 0', () => {
-			const draft: IVariableFetchStoreState = {
-				states: {},
-				lastUpdated: { myVar: 0 },
-				cycleIds: {},
-			};
-
-			expect(resolveFetchState(draft, 'myVar')).toBe('loading');
-		});
-
-		it('should return "revalidating" when variable has been fetched before', () => {
-			const draft: IVariableFetchStoreState = {
-				states: {},
-				lastUpdated: { myVar: 1000 },
-				cycleIds: {},
-			};
-
-			expect(resolveFetchState(draft, 'myVar')).toBe('revalidating');
-		});
-	});
-
-	describe('areAllQueryVariablesSettled', () => {
-		it('should return true when all query variables are idle', () => {
-			const states: Record<string, VariableFetchState> = {
-				a: 'idle',
-				b: 'idle',
-			};
-			const variableTypes = { a: 'QUERY' as const, b: 'QUERY' as const };
-
-			expect(areAllQueryVariablesSettled(states, variableTypes)).toBe(true);
-		});
-
-		it('should return true when all query variables are in error', () => {
-			const states: Record<string, VariableFetchState> = {
-				a: 'error',
-				b: 'error',
-			};
-			const variableTypes = { a: 'QUERY' as const, b: 'QUERY' as const };
-
-			expect(areAllQueryVariablesSettled(states, variableTypes)).toBe(true);
-		});
-
-		it('should return true with a mix of idle and error query variables', () => {
-			const states: Record<string, VariableFetchState> = {
-				a: 'idle',
-				b: 'error',
-			};
-			const variableTypes = { a: 'QUERY' as const, b: 'QUERY' as const };
-
-			expect(areAllQueryVariablesSettled(states, variableTypes)).toBe(true);
-		});
-
-		it('should return false when any query variable is loading', () => {
-			const states: Record<string, VariableFetchState> = {
-				a: 'idle',
-				b: 'loading',
-			};
-			const variableTypes = { a: 'QUERY' as const, b: 'QUERY' as const };
-
-			expect(areAllQueryVariablesSettled(states, variableTypes)).toBe(false);
-		});
-
-		it('should return false when any query variable is waiting', () => {
-			const states: Record<string, VariableFetchState> = {
-				a: 'idle',
-				b: 'waiting',
-			};
-			const variableTypes = { a: 'QUERY' as const, b: 'QUERY' as const };
-
-			expect(areAllQueryVariablesSettled(states, variableTypes)).toBe(false);
-		});
-
-		it('should ignore non-QUERY variable types', () => {
-			const states: Record<string, VariableFetchState> = {
-				a: 'idle',
-				dynVar: 'loading',
-			};
-			const variableTypes = {
-				a: 'QUERY' as const,
-				dynVar: 'DYNAMIC' as const,
-			};
-
-			expect(areAllQueryVariablesSettled(states, variableTypes)).toBe(true);
-		});
-
-		it('should return true when there are no QUERY variables', () => {
-			const states: Record<string, VariableFetchState> = {
-				dynVar: 'loading',
-			};
-			const variableTypes = { dynVar: 'DYNAMIC' as const };
-
-			expect(areAllQueryVariablesSettled(states, variableTypes)).toBe(true);
-		});
-	});
-
-	describe('unlockWaitingDynamicVariables', () => {
-		it('should transition waiting dynamic variables to loading when never fetched', () => {
-			const draft: IVariableFetchStoreState = {
-				states: { dyn1: 'waiting', dyn2: 'waiting' },
-				lastUpdated: {},
-				cycleIds: {},
-			};
-
-			unlockWaitingDynamicVariables(draft, ['dyn1', 'dyn2']);
-
-			expect(draft.states.dyn1).toBe('loading');
-			expect(draft.states.dyn2).toBe('loading');
-		});
-
-		it('should transition waiting dynamic variables to revalidating when previously fetched', () => {
-			const draft: IVariableFetchStoreState = {
-				states: { dyn1: 'waiting' },
-				lastUpdated: { dyn1: 1000 },
-				cycleIds: {},
-			};
-
-			unlockWaitingDynamicVariables(draft, ['dyn1']);
-
-			expect(draft.states.dyn1).toBe('revalidating');
-		});
-
-		it('should not touch dynamic variables that are not in waiting state', () => {
-			const draft: IVariableFetchStoreState = {
-				states: { dyn1: 'idle', dyn2: 'loading' },
-				lastUpdated: {},
-				cycleIds: {},
-			};
-
-			unlockWaitingDynamicVariables(draft, ['dyn1', 'dyn2']);
-
-			expect(draft.states.dyn1).toBe('idle');
-			expect(draft.states.dyn2).toBe('loading');
-		});
-
-		it('should handle empty dynamic variable order', () => {
-			const draft: IVariableFetchStoreState = {
-				states: { dyn1: 'waiting' },
-				lastUpdated: {},
-				cycleIds: {},
-			};
-
-			unlockWaitingDynamicVariables(draft, []);
-
-			expect(draft.states.dyn1).toBe('waiting');
-		});
-	});
-});

frontend/src/providers/Dashboard/store/dashboardVariables/__tests__/dashboardVariablesStore.test.ts

@@ -1,287 +0,0 @@
-import { IDashboardVariable } from 'types/api/dashboard/variables';
-
-import {
-	dashboardVariablesStore,
-	getVariableDependencyContext,
-	setDashboardVariablesStore,
-	updateDashboardVariablesStore,
-} from '../dashboardVariablesStore';
-import { IDashboardVariables } from '../dashboardVariablesStoreTypes';
-
-function createVariable(
-	overrides: Partial<IDashboardVariable> = {},
-): IDashboardVariable {
-	return {
-		id: 'test-id',
-		name: 'test-var',
-		description: '',
-		type: 'QUERY',
-		sort: 'DISABLED',
-		showALLOption: false,
-		multiSelect: false,
-		order: 0,
-		...overrides,
-	};
-}
-
-function resetStore(): void {
-	dashboardVariablesStore.set(() => ({
-		dashboardId: '',
-		variables: {},
-		sortedVariablesArray: [],
-		dependencyData: null,
-		variableTypes: {},
-		dynamicVariableOrder: [],
-	}));
-}
-
-describe('dashboardVariablesStore', () => {
-	beforeEach(() => {
-		resetStore();
-	});
-
-	describe('setDashboardVariablesStore', () => {
-		it('should set the dashboard variables and compute derived values', () => {
-			const variables: IDashboardVariables = {
-				env: createVariable({ name: 'env', type: 'QUERY', order: 0 }),
-			};
-
-			setDashboardVariablesStore({ dashboardId: 'dash-1', variables });
-
-			const storeSnapshot = dashboardVariablesStore.getSnapshot();
-			expect(storeSnapshot.dashboardId).toBe('dash-1');
-			expect(storeSnapshot.variables).toStrictEqual(variables);
-			expect(storeSnapshot.variableTypes).toStrictEqual({ env: 'QUERY' });
-			expect(storeSnapshot.sortedVariablesArray).toHaveLength(1);
-		});
-	});
-
-	describe('updateDashboardVariablesStore', () => {
-		it('should update variables and recompute derived values', () => {
-			setDashboardVariablesStore({
-				dashboardId: 'dash-1',
-				variables: {
-					env: createVariable({ name: 'env', type: 'QUERY', order: 0 }),
-				},
-			});
-
-			const updatedVariables: IDashboardVariables = {
-				env: createVariable({ name: 'env', type: 'QUERY', order: 0 }),
-				dyn1: createVariable({ name: 'dyn1', type: 'DYNAMIC', order: 1 }),
-			};
-
-			updateDashboardVariablesStore({
-				dashboardId: 'dash-1',
-				variables: updatedVariables,
-			});
-
-			const storeSnapshot = dashboardVariablesStore.getSnapshot();
-			expect(storeSnapshot.variableTypes).toStrictEqual({
-				env: 'QUERY',
-				dyn1: 'DYNAMIC',
-			});
-			expect(storeSnapshot.dynamicVariableOrder).toStrictEqual(['dyn1']);
-		});
-
-		it('should replace dashboardId when it does not match', () => {
-			setDashboardVariablesStore({
-				dashboardId: 'dash-1',
-				variables: {
-					'not-there': createVariable({ name: 'not-there', order: 0 }),
-				},
-			});
-
-			updateDashboardVariablesStore({
-				dashboardId: 'dash-2',
-				variables: {
-					a: createVariable({ name: 'a', order: 0 }),
-				},
-			});
-
-			const storeSnapshot = dashboardVariablesStore.getSnapshot();
-			expect(storeSnapshot.dashboardId).toBe('dash-2');
-			expect(storeSnapshot.variableTypes).toStrictEqual({
-				a: 'QUERY',
-			});
-			expect(storeSnapshot.variableTypes).not.toStrictEqual({
-				'not-there': 'QUERY',
-			});
-		});
-	});
-
-	describe('getVariableDependencyContext', () => {
-		it('should return context with all fields', () => {
-			setDashboardVariablesStore({
-				dashboardId: 'dash-1',
-				variables: {
-					env: createVariable({
-						name: 'env',
-						type: 'QUERY',
-						order: 0,
-						selectedValue: 'prod',
-					}),
-				},
-			});
-
-			const { variableTypes, dynamicVariableOrder, dependencyData } =
-				getVariableDependencyContext();
-
-			expect(variableTypes).toStrictEqual({ env: 'QUERY' });
-			expect(dynamicVariableOrder).toStrictEqual([]);
-			expect(dependencyData).not.toBeNull();
-		});
-
-		it('should report doAllQueryVariablesHaveValuesSelected as true when all query variables have values', () => {
-			setDashboardVariablesStore({
-				dashboardId: 'dash-1',
-				variables: {
-					env: createVariable({
-						name: 'env',
-						type: 'QUERY',
-						order: 0,
-						selectedValue: 'prod',
-					}),
-					region: createVariable({
-						name: 'region',
-						type: 'QUERY',
-						order: 1,
-						selectedValue: 'us-east',
-					}),
-				},
-			});
-
-			const { doAllQueryVariablesHaveValuesSelected } =
-				getVariableDependencyContext();
-			expect(doAllQueryVariablesHaveValuesSelected).toBe(true);
-		});
-
-		it('should report doAllQueryVariablesHaveValuesSelected as false when a query variable lacks a selectedValue', () => {
-			setDashboardVariablesStore({
-				dashboardId: 'dash-1',
-				variables: {
-					env: createVariable({
-						name: 'env',
-						type: 'QUERY',
-						order: 0,
-						selectedValue: 'prod',
-					}),
-					region: createVariable({
-						name: 'region',
-						type: 'QUERY',
-						order: 1,
-						selectedValue: undefined,
-					}),
-				},
-			});
-
-			const { doAllQueryVariablesHaveValuesSelected } =
-				getVariableDependencyContext();
-			expect(doAllQueryVariablesHaveValuesSelected).toBe(false);
-		});
-
-		it('should ignore non-QUERY variables when computing doAllQueryVariablesHaveValuesSelected', () => {
-			// env (QUERY) has a value; region (CUSTOM) and dyn1 (DYNAMIC) do not — they are ignored
-			setDashboardVariablesStore({
-				dashboardId: 'dash-1',
-				variables: {
-					env: createVariable({
-						name: 'env',
-						type: 'QUERY',
-						order: 0,
-						selectedValue: 'prod',
-					}),
-					region: createVariable({
-						name: 'region',
-						type: 'CUSTOM',
-						order: 1,
-						selectedValue: undefined,
-					}),
-					dyn1: createVariable({
-						name: 'dyn1',
-						type: 'DYNAMIC',
-						order: 2,
-						selectedValue: '',
-					}),
-				},
-			});
-
-			const { doAllQueryVariablesHaveValuesSelected } =
-				getVariableDependencyContext();
-			expect(doAllQueryVariablesHaveValuesSelected).toBe(true);
-		});
-
-		it('should return true for doAllQueryVariablesHaveValuesSelected when there are no query variables', () => {
-			setDashboardVariablesStore({
-				dashboardId: 'dash-1',
-				variables: {
-					dyn1: createVariable({
-						name: 'dyn1',
-						type: 'DYNAMIC',
-						order: 0,
-						selectedValue: '',
-					}),
-				},
-			});
-
-			const { doAllQueryVariablesHaveValuesSelected } =
-				getVariableDependencyContext();
-			expect(doAllQueryVariablesHaveValuesSelected).toBe(true);
-		});
-
-		// Any non-nil, non-empty-array selectedValue is treated as selected
-		it.each([
-			{ label: 'numeric 0', selectedValue: 0 as number },
-			{ label: 'boolean false', selectedValue: false as boolean },
-			// ideally not possible but till we have concrete schema, we should not block dynamic variables
-			{ label: 'empty string', selectedValue: '' },
-			{
-				label: 'non-empty array',
-				selectedValue: ['a', 'b'] as (string | number | boolean)[],
-			},
-		])('should return true when selectedValue is $label', ({ selectedValue }) => {
-			setDashboardVariablesStore({
-				dashboardId: 'dash-1',
-				variables: {
-					env: createVariable({
-						name: 'env',
-						type: 'QUERY',
-						order: 0,
-						selectedValue,
-					}),
-				},
-			});
-
-			const { doAllQueryVariablesHaveValuesSelected } =
-				getVariableDependencyContext();
-			expect(doAllQueryVariablesHaveValuesSelected).toBe(true);
-		});
-
-		// null/undefined (tested above) and empty array are treated as not selected
-		it.each([
-			{
-				label: 'null',
-				selectedValue: null as IDashboardVariable['selectedValue'],
-			},
-			{ label: 'empty array', selectedValue: [] as (string | number | boolean)[] },
-		])(
-			'should return false when selectedValue is $label',
-			({ selectedValue }) => {
-				setDashboardVariablesStore({
-					dashboardId: 'dash-1',
-					variables: {
-						env: createVariable({
-							name: 'env',
-							type: 'QUERY',
-							order: 0,
-							selectedValue,
-						}),
-					},
-				});
-
-				const { doAllQueryVariablesHaveValuesSelected } =
-					getVariableDependencyContext();
-				expect(doAllQueryVariablesHaveValuesSelected).toBe(false);
-			},
-		);
-	});
-});

frontend/src/providers/Dashboard/store/dashboardVariables/__tests__/dashboardVariablesStoreUtils.test.ts

@@ -1,383 +0,0 @@
-import { IDashboardVariable } from 'types/api/dashboard/variables';
-
-import { IDashboardVariables } from '../dashboardVariablesStoreTypes';
-import {
-	buildDynamicVariableOrder,
-	buildSortedVariablesArray,
-	buildVariableTypesMap,
-	computeDerivedValues,
-} from '../dashboardVariablesStoreUtils';
-
-const createVariable = (
-	overrides: Partial<IDashboardVariable> = {},
-): IDashboardVariable => ({
-	id: 'test-id',
-	name: 'test-var',
-	description: '',
-	type: 'QUERY',
-	sort: 'DISABLED',
-	showALLOption: false,
-	multiSelect: false,
-	order: 0,
-	...overrides,
-});
-
-describe('dashboardVariablesStoreUtils', () => {
-	describe('buildSortedVariablesArray', () => {
-		it('should sort variables by order property', () => {
-			const variables: IDashboardVariables = {
-				c: createVariable({ name: 'c', order: 3 }),
-				a: createVariable({ name: 'a', order: 1 }),
-				b: createVariable({ name: 'b', order: 2 }),
-			};
-
-			const result = buildSortedVariablesArray(variables);
-
-			expect(result.map((v) => v.name)).toStrictEqual(['a', 'b', 'c']);
-		});
-
-		it('should return empty array for empty variables', () => {
-			const result = buildSortedVariablesArray({});
-			expect(result).toStrictEqual([]);
-		});
-
-		it('should return empty array when variables is undefined', () => {
-			const result = buildSortedVariablesArray(
-				undefined as unknown as IDashboardVariables,
-			);
-			expect(result).toStrictEqual([]);
-		});
-
-		it('should return empty array when variables is null', () => {
-			const result = buildSortedVariablesArray(
-				null as unknown as IDashboardVariables,
-			);
-			expect(result).toStrictEqual([]);
-		});
-
-		it('should create copies of variables (not references)', () => {
-			const original = createVariable({ name: 'a', order: 0 });
-			const variables: IDashboardVariables = { a: original };
-
-			const result = buildSortedVariablesArray(variables);
-
-			expect(result[0]).not.toBe(original);
-			expect(result[0]).toStrictEqual(original);
-		});
-	});
-
-	describe('buildVariableTypesMap', () => {
-		it('should create a name-to-type mapping', () => {
-			const sorted = [
-				createVariable({ name: 'env', type: 'QUERY' }),
-				createVariable({ name: 'region', type: 'CUSTOM' }),
-				createVariable({ name: 'dynVar', type: 'DYNAMIC' }),
-				createVariable({ name: 'text', type: 'TEXTBOX' }),
-			];
-
-			const result = buildVariableTypesMap(sorted);
-
-			expect(result).toStrictEqual({
-				env: 'QUERY',
-				region: 'CUSTOM',
-				dynVar: 'DYNAMIC',
-				text: 'TEXTBOX',
-			});
-		});
-
-		it('should return empty object for empty array', () => {
-			expect(buildVariableTypesMap([])).toStrictEqual({});
-		});
-	});
-
-	describe('buildDynamicVariableOrder', () => {
-		it('should return only DYNAMIC variable names in order', () => {
-			const sorted = [
-				createVariable({ name: 'queryVar', type: 'QUERY', order: 0 }),
-				createVariable({ name: 'dyn1', type: 'DYNAMIC', order: 1 }),
-				createVariable({ name: 'customVar', type: 'CUSTOM', order: 2 }),
-				createVariable({ name: 'dyn2', type: 'DYNAMIC', order: 3 }),
-			];
-
-			const result = buildDynamicVariableOrder(sorted);
-
-			expect(result).toStrictEqual(['dyn1', 'dyn2']);
-		});
-
-		it('should return empty array when no DYNAMIC variables exist', () => {
-			const sorted = [
-				createVariable({ name: 'a', type: 'QUERY' }),
-				createVariable({ name: 'b', type: 'CUSTOM' }),
-			];
-
-			expect(buildDynamicVariableOrder(sorted)).toStrictEqual([]);
-		});
-
-		it('should return empty array for empty input', () => {
-			expect(buildDynamicVariableOrder([])).toStrictEqual([]);
-		});
-	});
-
-	describe('computeDerivedValues', () => {
-		it('should compute all derived values from variables', () => {
-			const variables: IDashboardVariables = {
-				env: createVariable({
-					name: 'env',
-					type: 'QUERY',
-					order: 0,
-				}),
-				dyn1: createVariable({
-					name: 'dyn1',
-					type: 'DYNAMIC',
-					order: 1,
-				}),
-			};
-
-			const result = computeDerivedValues(variables);
-
-			expect(result.sortedVariablesArray).toHaveLength(2);
-			expect(result.sortedVariablesArray[0].name).toBe('env');
-			expect(result.sortedVariablesArray[1].name).toBe('dyn1');
-
-			expect(result.variableTypes).toStrictEqual({
-				env: 'QUERY',
-				dyn1: 'DYNAMIC',
-			});
-
-			expect(result.dynamicVariableOrder).toStrictEqual(['dyn1']);
-
-			// dependencyData should exist since there are variables
-			expect(result.dependencyData).not.toBeNull();
-		});
-
-		it('should return null dependencyData for empty variables', () => {
-			const result = computeDerivedValues({});
-
-			expect(result.sortedVariablesArray).toStrictEqual([]);
-			expect(result.dependencyData).toBeNull();
-			expect(result.variableTypes).toStrictEqual({});
-			expect(result.dynamicVariableOrder).toStrictEqual([]);
-		});
-
-		it('should handle all four variable types together', () => {
-			const variables: IDashboardVariables = {
-				queryVar: createVariable({
-					name: 'queryVar',
-					type: 'QUERY',
-					order: 0,
-				}),
-				customVar: createVariable({
-					name: 'customVar',
-					type: 'CUSTOM',
-					order: 1,
-				}),
-				dynVar: createVariable({
-					name: 'dynVar',
-					type: 'DYNAMIC',
-					order: 2,
-				}),
-				textVar: createVariable({
-					name: 'textVar',
-					type: 'TEXTBOX',
-					order: 3,
-				}),
-			};
-
-			const result = computeDerivedValues(variables);
-
-			expect(result.sortedVariablesArray).toHaveLength(4);
-			expect(result.sortedVariablesArray.map((v) => v.name)).toStrictEqual([
-				'queryVar',
-				'customVar',
-				'dynVar',
-				'textVar',
-			]);
-
-			expect(result.variableTypes).toStrictEqual({
-				queryVar: 'QUERY',
-				customVar: 'CUSTOM',
-				dynVar: 'DYNAMIC',
-				textVar: 'TEXTBOX',
-			});
-
-			expect(result.dynamicVariableOrder).toStrictEqual(['dynVar']);
-			expect(result.dependencyData).not.toBeNull();
-		});
-
-		it('should sort variables by order regardless of insertion order', () => {
-			const variables: IDashboardVariables = {
-				z: createVariable({ name: 'z', type: 'QUERY', order: 4 }),
-				a: createVariable({ name: 'a', type: 'CUSTOM', order: 0 }),
-				m: createVariable({ name: 'm', type: 'DYNAMIC', order: 2 }),
-				b: createVariable({ name: 'b', type: 'TEXTBOX', order: 1 }),
-				x: createVariable({ name: 'x', type: 'QUERY', order: 3 }),
-			};
-
-			const result = computeDerivedValues(variables);
-
-			expect(result.sortedVariablesArray.map((v) => v.name)).toStrictEqual([
-				'a',
-				'b',
-				'm',
-				'x',
-				'z',
-			]);
-		});
-
-		it('should include multiple dynamic variables in order', () => {
-			const variables: IDashboardVariables = {
-				dyn3: createVariable({ name: 'dyn3', type: 'DYNAMIC', order: 5 }),
-				query1: createVariable({ name: 'query1', type: 'QUERY', order: 0 }),
-				dyn1: createVariable({ name: 'dyn1', type: 'DYNAMIC', order: 1 }),
-				custom1: createVariable({ name: 'custom1', type: 'CUSTOM', order: 2 }),
-				dyn2: createVariable({ name: 'dyn2', type: 'DYNAMIC', order: 3 }),
-			};
-
-			const result = computeDerivedValues(variables);
-
-			expect(result.dynamicVariableOrder).toStrictEqual(['dyn1', 'dyn2', 'dyn3']);
-		});
-
-		it('should build dependency data with query variable order for dependent queries', () => {
-			const variables: IDashboardVariables = {
-				env: createVariable({
-					name: 'env',
-					type: 'QUERY',
-					order: 0,
-					queryValue: 'SELECT DISTINCT env FROM table',
-				}),
-				service: createVariable({
-					name: 'service',
-					type: 'QUERY',
-					order: 1,
-					queryValue: 'SELECT DISTINCT service FROM table WHERE env={{.env}}',
-				}),
-			};
-
-			const result = computeDerivedValues(variables);
-
-			const { dependencyData } = result;
-			expect(dependencyData).not.toBeNull();
-			// env should appear in the dependency order (it's a root QUERY variable)
-			expect(dependencyData?.order).toContain('env');
-			// service depends on env, so it should also be in the order
-			expect(dependencyData?.order).toContain('service');
-			// env comes before service in topological order
-			const envIdx = dependencyData?.order.indexOf('env') ?? -1;
-			const svcIdx = dependencyData?.order.indexOf('service') ?? -1;
-			expect(envIdx).toBeLessThan(svcIdx);
-		});
-
-		it('should not include non-QUERY variables in dependency order', () => {
-			const variables: IDashboardVariables = {
-				env: createVariable({
-					name: 'env',
-					type: 'QUERY',
-					order: 0,
-					queryValue: 'SELECT DISTINCT env FROM table',
-				}),
-				customVar: createVariable({
-					name: 'customVar',
-					type: 'CUSTOM',
-					order: 1,
-				}),
-				dynVar: createVariable({
-					name: 'dynVar',
-					type: 'DYNAMIC',
-					order: 2,
-				}),
-				textVar: createVariable({
-					name: 'textVar',
-					type: 'TEXTBOX',
-					order: 3,
-				}),
-			};
-
-			const result = computeDerivedValues(variables);
-
-			expect(result.dependencyData).not.toBeNull();
-			// Only QUERY variables should be in the dependency order
-			result.dependencyData?.order.forEach((name) => {
-				expect(result.variableTypes[name]).toBe('QUERY');
-			});
-		});
-
-		it('should produce transitive descendants in dependency data', () => {
-			const variables: IDashboardVariables = {
-				region: createVariable({
-					name: 'region',
-					type: 'QUERY',
-					order: 0,
-					queryValue: 'SELECT region FROM table',
-				}),
-				cluster: createVariable({
-					name: 'cluster',
-					type: 'QUERY',
-					order: 1,
-					queryValue: 'SELECT cluster FROM table WHERE region={{.region}}',
-				}),
-				host: createVariable({
-					name: 'host',
-					type: 'QUERY',
-					order: 2,
-					queryValue: 'SELECT host FROM table WHERE cluster={{.cluster}}',
-				}),
-			};
-
-			const result = computeDerivedValues(variables);
-
-			const { dependencyData: depData } = result;
-			expect(depData).not.toBeNull();
-			expect(depData?.transitiveDescendants).toBeDefined();
-			// region's transitive descendants should include cluster and host
-			expect(depData?.transitiveDescendants['region']).toStrictEqual(
-				expect.arrayContaining(['cluster', 'host']),
-			);
-		});
-
-		it('should handle a single variable', () => {
-			const variables: IDashboardVariables = {
-				solo: createVariable({
-					name: 'solo',
-					type: 'QUERY',
-					order: 0,
-				}),
-			};
-
-			const result = computeDerivedValues(variables);
-
-			expect(result.sortedVariablesArray).toHaveLength(1);
-			expect(result.variableTypes).toStrictEqual({ solo: 'QUERY' });
-			expect(result.dynamicVariableOrder).toStrictEqual([]);
-			expect(result.dependencyData).not.toBeNull();
-			expect(result.dependencyData?.order).toStrictEqual(['solo']);
-		});
-
-		it('should handle only non-QUERY variables', () => {
-			const variables: IDashboardVariables = {
-				custom1: createVariable({
-					name: 'custom1',
-					type: 'CUSTOM',
-					order: 0,
-				}),
-				text1: createVariable({
-					name: 'text1',
-					type: 'TEXTBOX',
-					order: 1,
-				}),
-				dyn1: createVariable({
-					name: 'dyn1',
-					type: 'DYNAMIC',
-					order: 2,
-				}),
-			};
-
-			const result = computeDerivedValues(variables);
-
-			expect(result.sortedVariablesArray).toHaveLength(3);
-			// No QUERY variables, so dependency order should be empty
-			expect(result.dependencyData?.order).toStrictEqual([]);
-			expect(result.dynamicVariableOrder).toStrictEqual(['dyn1']);
-		});
-	});
-});

frontend/src/providers/Dashboard/store/dashboardVariables/dashboardVariablesStore.ts

@@ -1,96 +0,0 @@
-import { isNil } from 'lodash-es';
-
-import createStore from '../store';
-import { VariableFetchContext } from '../variableFetchStore';
-import { IDashboardVariablesStoreState } from './dashboardVariablesStoreTypes';
-import {
-	computeDerivedValues,
-	updateDerivedValues,
-} from './dashboardVariablesStoreUtils';
-
-const initialState: IDashboardVariablesStoreState = {
-	dashboardId: '',
-	variables: {},
-	sortedVariablesArray: [],
-	dependencyData: null,
-	variableTypes: {},
-	dynamicVariableOrder: [],
-};
-
-export const dashboardVariablesStore =
-	createStore<IDashboardVariablesStoreState>(initialState);
-
-/**
- * Set dashboard variables (replaces all variables)
- */
-export function setDashboardVariablesStore({
-	dashboardId,
-	variables,
-}: {
-	dashboardId: string;
-	variables: IDashboardVariablesStoreState['variables'];
-}): void {
-	dashboardVariablesStore.set(() => {
-		return {
-			dashboardId,
-			variables,
-			...computeDerivedValues(variables),
-		} as IDashboardVariablesStoreState;
-	});
-}
-
-/**
- * Update specific dashboard variables (merges with existing)
- */
-export function updateDashboardVariablesStore({
-	dashboardId,
-	variables,
-}: {
-	dashboardId: string;
-	variables: IDashboardVariablesStoreState['variables'];
-}): void {
-	dashboardVariablesStore.update((draft) => {
-		if (draft.dashboardId !== dashboardId) {
-			// If dashboardId doesn't match, we replace the entire state
-			draft.dashboardId = dashboardId;
-		}
-		draft.variables = variables;
-
-		updateDerivedValues(draft);
-	});
-}
-
-/**
- * Read current store snapshot as VariableFetchContext.
- * Used by components to pass context to variableFetchStore actions
- * without creating a circular import.
- */
-export function getVariableDependencyContext(): VariableFetchContext {
-	const state = dashboardVariablesStore.getSnapshot();
-	// Dynamic variables should only wait on query variables having values,
-	// not on CUSTOM, TEXTBOX, or other types.
-	const doAllQueryVariablesHaveValuesSelected = Object.values(
-		state.variables,
-	).every((variable) => {
-		if (variable.type !== 'QUERY') {
-			return true;
-		}
-
-		if (isNil(variable.selectedValue)) {
-			return false;
-		}
-
-		if (Array.isArray(variable.selectedValue)) {
-			return variable.selectedValue.length > 0;
-		}
-
-		return true;
-	});
-
-	return {
-		doAllQueryVariablesHaveValuesSelected,
-		variableTypes: state.variableTypes,
-		dynamicVariableOrder: state.dynamicVariableOrder,
-		dependencyData: state.dependencyData,
-	};
-}

frontend/src/providers/Dashboard/store/dashboardVariables/dashboardVariablesStoreTypes.ts

@@ -1,44 +0,0 @@
-import {
-	IDashboardVariable,
-	TVariableQueryType,
-} from 'types/api/dashboard/variables';
-
-export type VariableGraph = Record<string, string[]>;
-
-export interface IDependencyData {
-	order: string[];
-	// Direct children for each variable
-	graph: VariableGraph;
-	// Direct parents for each variable
-	parentDependencyGraph: VariableGraph;
-	// Pre-computed transitive descendants for each node (all reachable nodes, not just direct children)
-	transitiveDescendants: VariableGraph;
-	hasCycle: boolean;
-	cycleNodes?: string[];
-}
-
-export type IDashboardVariables = Record<string, IDashboardVariable>;
-
-export interface IDashboardVariablesStoreState {
-	// dashboard id
-	dashboardId: string;
-
-	// Raw variables keyed by id/name
-	variables: IDashboardVariables;
-
-	// Derived: sorted array of variables by order
-	sortedVariablesArray: IDashboardVariable[];
-
-	// Derived: dependency data for QUERY variables
-	dependencyData: IDependencyData | null;
-
-	// Derived: variable name → type mapping
-	variableTypes: Record<string, TVariableQueryType>;
-
-	// Derived: display-ordered list of dynamic variable names
-	dynamicVariableOrder: string[];
-}
-
-export interface IUseDashboardVariablesReturn {
-	dashboardVariables: IDashboardVariablesStoreState['variables'];
-}

frontend/src/providers/Dashboard/store/dashboardVariables/dashboardVariablesStoreUtils.ts

@@ -1,135 +0,0 @@
-import {
-	buildDependencies,
-	buildDependencyGraph,
-} from 'lib/dashboardVariables/dependencyGraph';
-import {
-	IDashboardVariable,
-	TVariableQueryType,
-} from 'types/api/dashboard/variables';
-
-import {
-	IDashboardVariables,
-	IDashboardVariablesStoreState,
-	IDependencyData,
-} from './dashboardVariablesStoreTypes';
-
-/**
- * Build a sorted array of variables by their order property
- */
-export function buildSortedVariablesArray(
-	variables?: IDashboardVariables,
-): IDashboardVariable[] {
-	const sortedVariablesArray: IDashboardVariable[] = [];
-
-	Object.values(variables ?? {}).forEach((value) => {
-		sortedVariablesArray.push({ ...value });
-	});
-
-	sortedVariablesArray.sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
-
-	return sortedVariablesArray;
-}
-
-/**
- * Build dependency data from sorted variables array
- * This includes the dependency graph, topological order, and cycle detection
- */
-export function buildDependencyData(
-	sortedVariablesArray: IDashboardVariable[],
-): IDependencyData | null {
-	if (sortedVariablesArray.length === 0) {
-		return null;
-	}
-
-	const dependencies = buildDependencies(sortedVariablesArray);
-	const {
-		order,
-		graph,
-		parentDependencyGraph,
-		transitiveDescendants,
-		hasCycle,
-		cycleNodes,
-	} = buildDependencyGraph(dependencies);
-
-	// Filter order to only include QUERY type variables
-	const queryVariableOrder = order.filter((variable: string) => {
-		const variableData = sortedVariablesArray.find((v) => v.name === variable);
-		return variableData?.type === 'QUERY';
-	});
-
-	return {
-		order: queryVariableOrder,
-		graph,
-		parentDependencyGraph,
-		transitiveDescendants,
-		hasCycle,
-		cycleNodes,
-	};
-}
-
-/**
- * Build a variable name → type mapping from sorted variables array
- */
-export function buildVariableTypesMap(
-	sortedVariablesArray: IDashboardVariable[],
-): Record<string, TVariableQueryType> {
-	const types: Record<string, TVariableQueryType> = {};
-	sortedVariablesArray.forEach((v) => {
-		if (v.name) {
-			types[v.name] = v.type;
-		}
-	});
-	return types;
-}
-
-/**
- * Build display-ordered list of dynamic variable names
- */
-export function buildDynamicVariableOrder(
-	sortedVariablesArray: IDashboardVariable[],
-): string[] {
-	return sortedVariablesArray
-		.filter((v) => v.type === 'DYNAMIC' && v.name)
-		.map((v) => v.name as string);
-}
-
-/**
- * Compute derived values from variables
- * This is a composition of buildSortedVariablesArray and buildDependencyData
- */
-export function computeDerivedValues(
-	variables: IDashboardVariablesStoreState['variables'],
-): Pick<
-	IDashboardVariablesStoreState,
-	| 'sortedVariablesArray'
-	| 'dependencyData'
-	| 'variableTypes'
-	| 'dynamicVariableOrder'
-> {
-	const sortedVariablesArray = buildSortedVariablesArray(variables);
-	const dependencyData = buildDependencyData(sortedVariablesArray);
-	const variableTypes = buildVariableTypesMap(sortedVariablesArray);
-	const dynamicVariableOrder = buildDynamicVariableOrder(sortedVariablesArray);
-
-	return {
-		sortedVariablesArray,
-		dependencyData,
-		variableTypes,
-		dynamicVariableOrder,
-	};
-}
-
-/**
- * Update derived values in the store state (for use with immer)
- * Also initializes the variable fetch store with the new dependency data
- */
-export function updateDerivedValues(
-	draft: IDashboardVariablesStoreState,
-): void {
-	draft.sortedVariablesArray = buildSortedVariablesArray(draft.variables);
-	draft.dependencyData = buildDependencyData(draft.sortedVariablesArray);
-	draft.variableTypes = buildVariableTypesMap(draft.sortedVariablesArray);
-	draft.dynamicVariableOrder = buildDynamicVariableOrder(
-		draft.sortedVariablesArray,
-	);
-}

frontend/src/providers/Dashboard/store/dynamicVariableSuggestions.ts

@@ -0,0 +1,20 @@
+import createStore from './store';
+
+/**
+ * A dynamic dashboard variable reduced to what query-builder autocomplete needs:
+ * `attribute` is the filter key it backs, `name` is the `$name` offered as a value.
+ */
+export interface DynamicVariableSuggestion {
+	name: string;
+	attribute: string;
+}
+
+export const dynamicVariableSuggestionsStore = createStore<
+	DynamicVariableSuggestion[]
+>([]);
+
+export function setDynamicVariableSuggestions(
+	suggestions: DynamicVariableSuggestion[],
+): void {
+	dynamicVariableSuggestionsStore.set(() => suggestions);
+}

frontend/src/providers/Dashboard/store/variableFetchStore.ts

@@ -1,241 +0,0 @@
-import { getVariableDependencyContext } from './dashboardVariables/dashboardVariablesStore';
-import { IDashboardVariablesStoreState } from './dashboardVariables/dashboardVariablesStoreTypes';
-import createStore from './store';
-import {
-	areAllQueryVariablesSettled,
-	isSettled,
-	resolveFetchState,
-	unlockWaitingDynamicVariables,
-} from './variableFetchStoreUtils';
-
-// Fetch state for each variable
-export type VariableFetchState =
-	| 'idle' // stable state - initial or complete
-	| 'loading' // actively fetching data (first time)
-	| 'revalidating' // refetching existing data
-	| 'waiting' // blocked on parent dependencies
-	| 'error';
-
-export interface IVariableFetchStoreState {
-	// Per-variable fetch state
-	states: Record<string, VariableFetchState>;
-
-	// Track last update timestamp per variable
-	lastUpdated: Record<string, number>;
-
-	// Per-variable cycle counter — bumped when a variable needs to refetch.
-	// Used in react-query keys to auto-cancel stale requests for that variable only.
-	cycleIds: Record<string, number>;
-}
-
-/**
- * Context from dashboardVariablesStore needed by fetch actions.
- * Passed as parameter to avoid circular imports.
- */
-export type VariableFetchContext = Pick<
-	IDashboardVariablesStoreState,
-	'variableTypes' | 'dynamicVariableOrder' | 'dependencyData'
-> & {
-	doAllQueryVariablesHaveValuesSelected: boolean;
-};
-
-const initialState: IVariableFetchStoreState = {
-	states: {},
-	lastUpdated: {},
-	cycleIds: {},
-};
-
-export const variableFetchStore =
-	createStore<IVariableFetchStoreState>(initialState);
-
-// ============== Actions ==============
-
-/**
- * Initialize the store with variable names.
- * Called when dashboard variables change — sets up state entries.
- */
-export function initializeVariableFetchStore(variableNames: string[]): void {
-	variableFetchStore.update((draft) => {
-		// Initialize all variables to idle, preserving existing states
-		variableNames.forEach((name) => {
-			if (!draft.states[name]) {
-				draft.states[name] = 'idle';
-			}
-		});
-
-		// Clean up stale entries for variables that no longer exist
-		const nameSet = new Set(variableNames);
-		Object.keys(draft.states).forEach((name) => {
-			if (!nameSet.has(name)) {
-				delete draft.states[name];
-				delete draft.lastUpdated[name];
-				delete draft.cycleIds[name];
-			}
-		});
-	});
-}
-
-/**
- * Start a full fetch cycle for all fetchable variables.
- * Called on: initial load, time range change, or dependency graph change.
- *
- * Query variables with no query-type parents start immediately.
- * Query variables with query-type parents get 'waiting'.
- * Dynamic variables start immediately if all variables already have
- * selectedValues (e.g. persisted from localStorage/URL). Otherwise they
- * wait for all query variables to settle first.
- */
-export function enqueueFetchOfAllVariables(): void {
-	const {
-		doAllQueryVariablesHaveValuesSelected,
-		dependencyData,
-		variableTypes,
-		dynamicVariableOrder,
-	} = getVariableDependencyContext();
-	if (!dependencyData) {
-		return;
-	}
-
-	const { order: queryVariableOrder, parentDependencyGraph } = dependencyData;
-
-	variableFetchStore.update((draft) => {
-		// Query variables: root ones start immediately, dependent ones wait
-		queryVariableOrder.forEach((name) => {
-			draft.cycleIds[name] = (draft.cycleIds[name] || 0) + 1;
-			const parents = parentDependencyGraph[name] || [];
-			const hasQueryParents = parents.some((p) => variableTypes[p] === 'QUERY');
-			if (hasQueryParents) {
-				draft.states[name] = 'waiting';
-			} else {
-				draft.states[name] = resolveFetchState(draft, name);
-			}
-		});
-
-		// Dynamic variables: start immediately if query variables have values,
-		// otherwise wait for query variables to settle first
-		dynamicVariableOrder.forEach((name) => {
-			draft.cycleIds[name] = (draft.cycleIds[name] || 0) + 1;
-			draft.states[name] = doAllQueryVariablesHaveValuesSelected
-				? resolveFetchState(draft, name)
-				: 'waiting';
-		});
-	});
-}
-
-/**
- * Mark a variable as completed. Unblocks waiting query-type children.
- * If all query variables are now settled, unlocks any waiting dynamic variables.
- */
-export function onVariableFetchComplete(name: string): void {
-	const { dependencyData, variableTypes, dynamicVariableOrder } =
-		getVariableDependencyContext();
-
-	variableFetchStore.update((draft) => {
-		draft.states[name] = 'idle';
-		draft.lastUpdated[name] = Date.now();
-
-		if (!dependencyData) {
-			return;
-		}
-
-		const { graph } = dependencyData;
-
-		// Unblock waiting query-type children
-		const children = graph[name] || [];
-		children.forEach((child) => {
-			if (variableTypes[child] === 'QUERY' && draft.states[child] === 'waiting') {
-				draft.states[child] = resolveFetchState(draft, child);
-			}
-		});
-
-		// If all query variables are settled, unlock any waiting dynamic variables
-		if (
-			variableTypes[name] === 'QUERY' &&
-			areAllQueryVariablesSettled(draft.states, variableTypes)
-		) {
-			unlockWaitingDynamicVariables(draft, dynamicVariableOrder);
-		}
-	});
-}
-
-/**
- * Mark a variable as errored. Sets query-type descendants to idle
- * (they can't proceed without this parent).
- * If all query variables are now settled, unlocks any waiting dynamic variables.
- */
-export function onVariableFetchFailure(name: string): void {
-	const { dependencyData, variableTypes, dynamicVariableOrder } =
-		getVariableDependencyContext();
-
-	variableFetchStore.update((draft) => {
-		draft.states[name] = 'error';
-
-		if (!dependencyData) {
-			return;
-		}
-
-		// Set query-type descendants to idle (can't fetch without parent)
-		const descendants = dependencyData.transitiveDescendants[name] || [];
-		descendants.forEach((desc) => {
-			if (variableTypes[desc] === 'QUERY') {
-				draft.states[desc] = 'idle';
-			}
-		});
-
-		// If all query variables are settled (error counts), unlock any waiting dynamic variables
-		if (
-			variableTypes[name] === 'QUERY' &&
-			areAllQueryVariablesSettled(draft.states, variableTypes)
-		) {
-			unlockWaitingDynamicVariables(draft, dynamicVariableOrder);
-		}
-	});
-}
-
-/**
- * Cascade a value change to query-type descendants.
- * Called when a user changes a variable's value (not from a fetch cycle).
- *
- * Direct children whose parents are all settled start immediately.
- * Deeper descendants wait until their parents complete (BFS order
- * ensures parents are set before children within a single update).
- */
-export function enqueueDescendantsOfVariable(name: string): void {
-	const { dependencyData, variableTypes, dynamicVariableOrder } =
-		getVariableDependencyContext();
-	if (!dependencyData) {
-		return;
-	}
-
-	const { parentDependencyGraph } = dependencyData;
-
-	variableFetchStore.update((draft) => {
-		const descendants = dependencyData.transitiveDescendants[name] || [];
-		const queryDescendants = descendants.filter(
-			(desc) => variableTypes[desc] === 'QUERY',
-		);
-
-		queryDescendants.forEach((desc) => {
-			draft.cycleIds[desc] = (draft.cycleIds[desc] || 0) + 1;
-			const parents = parentDependencyGraph[desc] || [];
-			const allParentsSettled = parents.every((p) => isSettled(draft.states[p]));
-
-			draft.states[desc] = allParentsSettled
-				? resolveFetchState(draft, desc)
-				: 'waiting';
-		});
-
-		// Dynamic variables implicitly depend on all query variable values.
-		// If all query variables are currently settled, start them immediately;
-		// otherwise they wait until query vars finish (unlocked via onVariableFetchComplete).
-		dynamicVariableOrder.forEach((dynName) => {
-			draft.cycleIds[dynName] = (draft.cycleIds[dynName] || 0) + 1;
-			draft.states[dynName] = areAllQueryVariablesSettled(
-				draft.states,
-				variableTypes,
-			)
-				? resolveFetchState(draft, dynName)
-				: 'waiting';
-		});
-	});
-}

frontend/src/providers/Dashboard/store/variableFetchStoreUtils.ts

@@ -1,46 +0,0 @@
-import { TVariableQueryType } from 'types/api/dashboard/variables';
-
-import {
-	IVariableFetchStoreState,
-	VariableFetchState,
-} from './variableFetchStore';
-
-export function isSettled(state: VariableFetchState | undefined): boolean {
-	return state === 'idle' || state === 'error';
-}
-
-/**
- * Resolve the next fetch state based on whether the variable has been fetched before.
- */
-export function resolveFetchState(
-	draft: IVariableFetchStoreState,
-	name: string,
-): VariableFetchState {
-	return (draft.lastUpdated[name] || 0) > 0 ? 'revalidating' : 'loading';
-}
-
-/**
- * Check if all query variables are settled (idle or error).
- */
-export function areAllQueryVariablesSettled(
-	states: Record<string, VariableFetchState>,
-	variableTypes: Record<string, TVariableQueryType>,
-): boolean {
-	return Object.entries(variableTypes)
-		.filter(([, type]) => type === 'QUERY')
-		.every(([name]) => isSettled(states[name]));
-}
-
-/**
- * Transition waiting dynamic variables to loading/revalidating if in 'waiting' state.
- */
-export function unlockWaitingDynamicVariables(
-	draft: IVariableFetchStoreState,
-	dynamicVariableOrder: string[],
-): void {
-	dynamicVariableOrder.forEach((dynName) => {
-		if (draft.states[dynName] === 'waiting') {
-			draft.states[dynName] = resolveFetchState(draft, dynName);
-		}
-	});
-}

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

@@ -1,38 +0,0 @@
-export const VariableQueryTypeArr = [
-	'QUERY',
-	'TEXTBOX',
-	'CUSTOM',
-	'DYNAMIC',
-] as const;
-export type TVariableQueryType = (typeof VariableQueryTypeArr)[number];
-
-export const VariableSortTypeArr = ['DISABLED', 'ASC', 'DESC'] as const;
-export type TSortVariableValuesType = (typeof VariableSortTypeArr)[number];
-
-export interface IDashboardVariable {
-	id: string;
-	/** Display position; absent for dashboards whose variables carry no explicit order. */
-	order?: number;
-	name?: string; // key will be the source of truth
-	description: string;
-	type: TVariableQueryType;
-	// Query
-	queryValue?: string;
-	// Custom
-	customValue?: string;
-	// Textbox
-	textboxValue?: string;
-
-	sort: TSortVariableValuesType;
-	multiSelect: boolean;
-	showALLOption: boolean;
-	selectedValue?:
-		| null
-		| string
-		| number
-		| boolean
-		| (string | number | boolean)[];
-	allSelected?: boolean;
-	dynamicVariablesAttribute?: string;
-	dynamicVariablesSource?: string;
-}

frontend/src/types/api/dashboard/variables/query.ts

@@ -1,9 +1,13 @@
-import { IDashboardVariable } from 'types/api/dashboard/variables';
+/** A variable's selected value as the variable-values API accepts it. */
+type VariableValue =
+	| null
+	| string
+	| number
+	| boolean
+	| (string | number | boolean)[]
+	| undefined;
 
-export type PayloadVariables = Record<
-	string,
-	IDashboardVariable['selectedValue']
->;
+export type PayloadVariables = Record<string, VariableValue>;
 
 export type Props = {
 	query: string;