feat: upgraded the ingestion gateway apis

2026-02-05 17:32:17 +00:00 · 2026-02-05 17:41:33 +05:30
38 changed files with 698 additions and 1138 deletions
--- a/frontend/src/api/generated/services/gateway/index.ts
+++ b/frontend/src/api/generated/services/gateway/index.ts
@@ -28,8 +28,10 @@ import type {
 	GatewaytypesPostableIngestionKeyLimitDTO,
 	GatewaytypesUpdatableIngestionKeyLimitDTO,
 	GetIngestionKeys200,
+	GetIngestionKeysParams,
 	RenderErrorResponseDTO,
 	SearchIngestionKeys200,
+	SearchIngestionKeysParams,
 	UpdateIngestionKeyLimitPathParameters,
 	UpdateIngestionKeyPathParameters,
 } from '../sigNoz.schemas';
@@ -42,35 +44,44 @@ type Awaited<O> = O extends AwaitedInput<infer T> ? T : never;
 * This endpoint returns the ingestion keys for a workspace
 * @summary Get ingestion keys for workspace
 */
-export const getIngestionKeys = (signal?: AbortSignal) => {
+export const getIngestionKeys = (
+	params?: GetIngestionKeysParams,
+	signal?: AbortSignal,
+) => {
 	return GeneratedAPIInstance<GetIngestionKeys200>({
 		url: `/api/v2/gateway/ingestion_keys`,
 		method: 'GET',
+		params,
 		signal,
 	});
 };

-export const getGetIngestionKeysQueryKey = () => {
-	return ['getIngestionKeys'] as const;
+export const getGetIngestionKeysQueryKey = (
+	params?: GetIngestionKeysParams,
+) => {
+	return ['getIngestionKeys', ...(params ? [params] : [])] as const;
 };

 export const getGetIngestionKeysQueryOptions = <
 	TData = Awaited<ReturnType<typeof getIngestionKeys>>,
 	TError = RenderErrorResponseDTO
->(options?: {
-	query?: UseQueryOptions<
-		Awaited<ReturnType<typeof getIngestionKeys>>,
-		TError,
-		TData
-	>;
-}) => {
+>(
+	params?: GetIngestionKeysParams,
+	options?: {
+		query?: UseQueryOptions<
+			Awaited<ReturnType<typeof getIngestionKeys>>,
+			TError,
+			TData
+		>;
+	},
+) => {
 	const { query: queryOptions } = options ?? {};

-	const queryKey = queryOptions?.queryKey ?? getGetIngestionKeysQueryKey();
+	const queryKey = queryOptions?.queryKey ?? getGetIngestionKeysQueryKey(params);

 	const queryFn: QueryFunction<Awaited<ReturnType<typeof getIngestionKeys>>> = ({
 		signal,
-	}) => getIngestionKeys(signal);
+	}) => getIngestionKeys(params, signal);

 	return { queryKey, queryFn, ...queryOptions } as UseQueryOptions<
 		Awaited<ReturnType<typeof getIngestionKeys>>,
@@ -91,14 +102,17 @@ export type GetIngestionKeysQueryError = RenderErrorResponseDTO;
 export function useGetIngestionKeys<
 	TData = Awaited<ReturnType<typeof getIngestionKeys>>,
 	TError = RenderErrorResponseDTO
->(options?: {
-	query?: UseQueryOptions<
-		Awaited<ReturnType<typeof getIngestionKeys>>,
-		TError,
-		TData
-	>;
-}): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
-	const queryOptions = getGetIngestionKeysQueryOptions(options);
+>(
+	params?: GetIngestionKeysParams,
+	options?: {
+		query?: UseQueryOptions<
+			Awaited<ReturnType<typeof getIngestionKeys>>,
+			TError,
+			TData
+		>;
+	},
+): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
+	const queryOptions = getGetIngestionKeysQueryOptions(params, options);

 	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
 		queryKey: QueryKey;
@@ -114,10 +128,11 @@ export function useGetIngestionKeys<
 */
 export const invalidateGetIngestionKeys = async (
 	queryClient: QueryClient,
+	params?: GetIngestionKeysParams,
 	options?: InvalidateOptions,
 ): Promise<QueryClient> => {
 	await queryClient.invalidateQueries(
-		{ queryKey: getGetIngestionKeysQueryKey() },
+		{ queryKey: getGetIngestionKeysQueryKey(params) },
 		options,
 	);

@@ -662,35 +677,45 @@ export const useUpdateIngestionKeyLimit = <
 * This endpoint returns the ingestion keys for a workspace
 * @summary Search ingestion keys for workspace
 */
-export const searchIngestionKeys = (signal?: AbortSignal) => {
+export const searchIngestionKeys = (
+	params?: SearchIngestionKeysParams,
+	signal?: AbortSignal,
+) => {
 	return GeneratedAPIInstance<SearchIngestionKeys200>({
 		url: `/api/v2/gateway/ingestion_keys/search`,
 		method: 'GET',
+		params,
 		signal,
 	});
 };

-export const getSearchIngestionKeysQueryKey = () => {
-	return ['searchIngestionKeys'] as const;
+export const getSearchIngestionKeysQueryKey = (
+	params?: SearchIngestionKeysParams,
+) => {
+	return ['searchIngestionKeys', ...(params ? [params] : [])] as const;
 };

 export const getSearchIngestionKeysQueryOptions = <
 	TData = Awaited<ReturnType<typeof searchIngestionKeys>>,
 	TError = RenderErrorResponseDTO
->(options?: {
-	query?: UseQueryOptions<
-		Awaited<ReturnType<typeof searchIngestionKeys>>,
-		TError,
-		TData
-	>;
-}) => {
+>(
+	params?: SearchIngestionKeysParams,
+	options?: {
+		query?: UseQueryOptions<
+			Awaited<ReturnType<typeof searchIngestionKeys>>,
+			TError,
+			TData
+		>;
+	},
+) => {
 	const { query: queryOptions } = options ?? {};

-	const queryKey = queryOptions?.queryKey ?? getSearchIngestionKeysQueryKey();
+	const queryKey =
+		queryOptions?.queryKey ?? getSearchIngestionKeysQueryKey(params);

 	const queryFn: QueryFunction<
 		Awaited<ReturnType<typeof searchIngestionKeys>>
-	> = ({ signal }) => searchIngestionKeys(signal);
+	> = ({ signal }) => searchIngestionKeys(params, signal);

 	return { queryKey, queryFn, ...queryOptions } as UseQueryOptions<
 		Awaited<ReturnType<typeof searchIngestionKeys>>,
@@ -711,14 +736,17 @@ export type SearchIngestionKeysQueryError = RenderErrorResponseDTO;
 export function useSearchIngestionKeys<
 	TData = Awaited<ReturnType<typeof searchIngestionKeys>>,
 	TError = RenderErrorResponseDTO
->(options?: {
-	query?: UseQueryOptions<
-		Awaited<ReturnType<typeof searchIngestionKeys>>,
-		TError,
-		TData
-	>;
-}): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
-	const queryOptions = getSearchIngestionKeysQueryOptions(options);
+>(
+	params?: SearchIngestionKeysParams,
+	options?: {
+		query?: UseQueryOptions<
+			Awaited<ReturnType<typeof searchIngestionKeys>>,
+			TError,
+			TData
+		>;
+	},
+): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
+	const queryOptions = getSearchIngestionKeysQueryOptions(params, options);

 	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
 		queryKey: QueryKey;
@@ -734,10 +762,11 @@ export function useSearchIngestionKeys<
 */
 export const invalidateSearchIngestionKeys = async (
 	queryClient: QueryClient,
+	params?: SearchIngestionKeysParams,
 	options?: InvalidateOptions,
 ): Promise<QueryClient> => {
 	await queryClient.invalidateQueries(
-		{ queryKey: getSearchIngestionKeysQueryKey() },
+		{ queryKey: getSearchIngestionKeysQueryKey(params) },
 		options,
 	);

--- a/frontend/src/api/generated/services/sigNoz.schemas.ts
+++ b/frontend/src/api/generated/services/sigNoz.schemas.ts
@@ -1851,6 +1851,19 @@ export type GetFeatures200 = {
 	status?: string;
 };

+export type GetIngestionKeysParams = {
+	/**
+	 * @type integer
+	 * @description undefined
+	 */
+	page?: number;
+	/**
+	 * @type integer
+	 * @description undefined
+	 */
+	per_page?: number;
+};
+
 export type GetIngestionKeys200 = {
 	data?: GatewaytypesGettableIngestionKeysDTO;
 	/**
@@ -1890,6 +1903,24 @@ export type DeleteIngestionKeyLimitPathParameters = {
 export type UpdateIngestionKeyLimitPathParameters = {
 	limitId: string;
 };
+export type SearchIngestionKeysParams = {
+	/**
+	 * @type string
+	 * @description undefined
+	 */
+	name?: string;
+	/**
+	 * @type integer
+	 * @description undefined
+	 */
+	page?: number;
+	/**
+	 * @type integer
+	 * @description undefined
+	 */
+	per_page?: number;
+};
+
 export type SearchIngestionKeys200 = {
 	data?: GatewaytypesGettableIngestionKeysDTO;
 	/**
--- a/frontend/src/components/QueryBuilderV2/QueryV2/tests/QueryV2.test.tsx
+++ b/frontend/src/components/QueryBuilderV2/QueryV2/tests/QueryV2.test.tsx
@@ -11,14 +11,9 @@ import {
 	IBuilderQuery,
 	Query,
 } from 'types/api/queryBuilder/queryBuilderData';
-import { QueryFunction } from 'types/api/v5/queryRange';
 import { EQueryType } from 'types/common/dashboard';
 import { UseQueryOperations } from 'types/common/operations.types';
-import {
-	DataSource,
-	QueryBuilderContextType,
-	QueryFunctionsTypes,
-} from 'types/common/queryBuilder';
+import { DataSource, QueryBuilderContextType } from 'types/common/queryBuilder';

 import '@testing-library/jest-dom';

@@ -50,17 +45,12 @@ const mockedUseQueryOperations = jest.mocked(

 describe('QueryBuilderV2 + QueryV2 - base render', () => {
 	let handleRunQueryMock: jest.MockedFunction<() => void>;
-	let handleQueryFunctionsUpdatesMock: jest.MockedFunction<() => void>;
-	let baseQBContext: QueryBuilderContextType;

 	beforeEach(() => {
 		const mockCloneQuery = jest.fn() as jest.MockedFunction<
 			(type: string, q: IBuilderQuery) => void
 		>;
 		handleRunQueryMock = jest.fn() as jest.MockedFunction<() => void>;
-		handleQueryFunctionsUpdatesMock = jest.fn() as jest.MockedFunction<
-			() => void
-		>;
 		const baseQuery: IBuilderQuery = {
 			queryName: 'A',
 			dataSource: DataSource.LOGS,
@@ -101,7 +91,7 @@ describe('QueryBuilderV2 + QueryV2 - base render', () => {
 		const updateQueriesData: QueryBuilderContextType['updateQueriesData'] = (q) =>
 			q;

-		const baseContext = ({
+		mockedUseQueryBuilder.mockReturnValue(({
 			currentQuery: currentQueryObj,
 			stagedQuery: null,
 			lastUsedQuery: null,
@@ -134,10 +124,7 @@ describe('QueryBuilderV2 + QueryV2 - base render', () => {
 			initQueryBuilderData: jest.fn(),
 			isStagedQueryUpdated: jest.fn(() => false),
 			isDefaultQuery: jest.fn(() => false),
-		} as unknown) as QueryBuilderContextType;
-
-		baseQBContext = baseContext;
-		mockedUseQueryBuilder.mockReturnValue(baseQBContext);
+		} as unknown) as QueryBuilderContextType);

 		mockedUseQueryOperations.mockReturnValue({
 			isTracePanelType: false,
@@ -152,7 +139,7 @@ describe('QueryBuilderV2 + QueryV2 - base render', () => {
 			handleDeleteQuery: jest.fn(),
 			handleChangeQueryData: (jest.fn() as unknown) as ReturnType<UseQueryOperations>['handleChangeQueryData'],
 			handleChangeFormulaData: jest.fn(),
-			handleQueryFunctionsUpdates: handleQueryFunctionsUpdatesMock,
+			handleQueryFunctionsUpdates: jest.fn(),
 			listOfAdditionalFormulaFilters: [],
 		});
 	});
@@ -212,56 +199,4 @@ describe('QueryBuilderV2 + QueryV2 - base render', () => {

 		expect(handleRunQueryMock).toHaveBeenCalled();
 	});
-
-	it('fx button is disabled when functions already exist', () => {
-		const currentQueryBase = baseQBContext.currentQuery as Query;
-		const supersetQueryBase = baseQBContext.supersetQuery as Query;
-
-		mockedUseQueryBuilder.mockReturnValueOnce({
-			...baseQBContext,
-			currentQuery: {
-				...currentQueryBase,
-				builder: {
-					...currentQueryBase.builder,
-					queryData: [
-						{
-							...currentQueryBase.builder.queryData[0],
-							functions: [
-								{ name: QueryFunctionsTypes.TIME_SHIFT, args: [] } as QueryFunction,
-							],
-						},
-					],
-				},
-			},
-			supersetQuery: {
-				...supersetQueryBase,
-				builder: {
-					...supersetQueryBase.builder,
-					queryData: [
-						{
-							...supersetQueryBase.builder.queryData[0],
-							functions: [
-								{ name: QueryFunctionsTypes.TIME_SHIFT, args: [] } as QueryFunction,
-							],
-						},
-					],
-				},
-			},
-		});
-
-		render(<QueryBuilderV2 panelType={PANEL_TYPES.TABLE} version="v4" />);
-
-		const fxButton = document.querySelector('.function-btn') as HTMLButtonElement;
-		expect(fxButton).toBeInTheDocument();
-		expect(fxButton).toBeDisabled();
-
-		const deleteButton = document.querySelector(
-			'.query-function-delete-btn',
-		) as HTMLButtonElement;
-		expect(deleteButton).toBeInTheDocument();
-		userEvent.click(deleteButton);
-		waitFor(() => {
-			expect(fxButton).not.toBeDisabled();
-		});
-	});
 });
--- a/frontend/src/container/CreateAlertV2/tests/utils.test.tsx
+++ b/frontend/src/container/CreateAlertV2/tests/utils.test.tsx
@@ -338,7 +338,7 @@ describe('CreateAlertV2 utils', () => {
 			const props = getCreateAlertLocalStateFromAlertDef(args);
 			expect(props).toBeDefined();
 			expect(props).toMatchObject({
-				basic: {
+				basicAlertState: {
 					...INITIAL_ALERT_STATE,
 					name: 'test-alert',
 					labels: {
@@ -348,10 +348,10 @@ describe('CreateAlertV2 utils', () => {
 					yAxisUnit: UniversalYAxisUnit.MINUTES,
 				},
 				// as we have already verified these utils in their respective tests
-				threshold: expect.any(Object),
-				advancedOptions: expect.any(Object),
-				evaluationWindow: expect.any(Object),
-				notificationSettings: expect.any(Object),
+				thresholdState: expect.any(Object),
+				advancedOptionsState: expect.any(Object),
+				evaluationWindowState: expect.any(Object),
+				notificationSettingsState: expect.any(Object),
 			});
 		});
 	});
--- a/frontend/src/container/CreateAlertV2/context/constants.ts
+++ b/frontend/src/container/CreateAlertV2/context/constants.ts
@@ -196,11 +196,3 @@ export const INITIAL_NOTIFICATION_SETTINGS_STATE: NotificationSettingsState = {
 	description: NOTIFICATION_MESSAGE_PLACEHOLDER,
 	routingPolicies: false,
 };
-
-export const INITIAL_CREATE_ALERT_STATE = {
-	basic: INITIAL_ALERT_STATE,
-	threshold: INITIAL_ALERT_THRESHOLD_STATE,
-	advancedOptions: INITIAL_ADVANCED_OPTIONS_STATE,
-	evaluationWindow: INITIAL_EVALUATION_WINDOW_STATE,
-	notificationSettings: INITIAL_NOTIFICATION_SETTINGS_STATE,
-};
--- a/frontend/src/container/CreateAlertV2/context/index.tsx
+++ b/frontend/src/container/CreateAlertV2/context/index.tsx
@@ -17,22 +17,26 @@ import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { mapQueryDataFromApi } from 'lib/newQueryBuilder/queryBuilderMappers/mapQueryDataFromApi';
 import { AlertTypes } from 'types/api/alerts/alertTypes';

-import { INITIAL_CREATE_ALERT_STATE } from './constants';
 import {
-	AdvancedOptionsAction,
-	AlertThresholdAction,
+	INITIAL_ADVANCED_OPTIONS_STATE,
+	INITIAL_ALERT_STATE,
+	INITIAL_ALERT_THRESHOLD_STATE,
+	INITIAL_EVALUATION_WINDOW_STATE,
+	INITIAL_NOTIFICATION_SETTINGS_STATE,
+} from './constants';
+import {
 	AlertThresholdMatchType,
-	CreateAlertAction,
-	CreateAlertSlice,
-	EvaluationWindowAction,
 	ICreateAlertContextProps,
 	ICreateAlertProviderProps,
-	NotificationSettingsAction,
 } from './types';
 import {
+	advancedOptionsReducer,
+	alertCreationReducer,
+	alertThresholdReducer,
 	buildInitialAlertDef,
-	createAlertReducer,
+	evaluationWindowReducer,
 	getInitialAlertTypeFromURL,
+	notificationSettingsReducer,
 } from './utils';

 const CreateAlertContext = createContext<ICreateAlertContextProps | null>(null);
@@ -61,65 +65,10 @@ export function CreateAlertProvider(

 	const { currentQuery, redirectWithQueryBuilderData } = useQueryBuilder();

-	const [createAlertState, setCreateAlertState] = useReducer(
-		createAlertReducer,
-		{
-			...INITIAL_CREATE_ALERT_STATE,
-			basic: {
-				...INITIAL_CREATE_ALERT_STATE.basic,
-				yAxisUnit: currentQuery.unit,
-			},
-		},
-	);
-
-	const setAlertState = useCallback(
-		(action: CreateAlertAction) => {
-			setCreateAlertState({
-				slice: CreateAlertSlice.BASIC,
-				action,
-			});
-		},
-		[setCreateAlertState],
-	);
-
-	const setThresholdState = useCallback(
-		(action: AlertThresholdAction) => {
-			setCreateAlertState({
-				slice: CreateAlertSlice.THRESHOLD,
-				action,
-			});
-		},
-		[setCreateAlertState],
-	);
-
-	const setEvaluationWindow = useCallback(
-		(action: EvaluationWindowAction) => {
-			setCreateAlertState({
-				slice: CreateAlertSlice.EVALUATION_WINDOW,
-				action,
-			});
-		},
-		[setCreateAlertState],
-	);
-
-	const setAdvancedOptions = useCallback(
-		(action: AdvancedOptionsAction) => {
-			setCreateAlertState({
-				slice: CreateAlertSlice.ADVANCED_OPTIONS,
-				action,
-			});
-		},
-		[setCreateAlertState],
-	);
-	const setNotificationSettings = useCallback(
-		(action: NotificationSettingsAction) => {
-			setCreateAlertState({
-				slice: CreateAlertSlice.NOTIFICATION_SETTINGS,
-				action,
-			});
-		},
-		[setCreateAlertState],
-	);
+	const [alertState, setAlertState] = useReducer(alertCreationReducer, {
+		...INITIAL_ALERT_STATE,
+		yAxisUnit: currentQuery.unit,
+	});

 	const location = useLocation();
 	const queryParams = new URLSearchParams(location.search);
@@ -155,56 +104,92 @@ export function CreateAlertProvider(
 		[redirectWithQueryBuilderData],
 	);

+	const [thresholdState, setThresholdState] = useReducer(
+		alertThresholdReducer,
+		INITIAL_ALERT_THRESHOLD_STATE,
+	);
+
+	const [evaluationWindow, setEvaluationWindow] = useReducer(
+		evaluationWindowReducer,
+		INITIAL_EVALUATION_WINDOW_STATE,
+	);
+
+	const [advancedOptions, setAdvancedOptions] = useReducer(
+		advancedOptionsReducer,
+		INITIAL_ADVANCED_OPTIONS_STATE,
+	);
+
+	const [notificationSettings, setNotificationSettings] = useReducer(
+		notificationSettingsReducer,
+		INITIAL_NOTIFICATION_SETTINGS_STATE,
+	);
+
 	useEffect(() => {
-		setCreateAlertState({
-			slice: CreateAlertSlice.THRESHOLD,
-			action: {
-				type: 'RESET',
-			},
+		setThresholdState({
+			type: 'RESET',
 		});

 		if (thresholdsFromURL) {
 			try {
 				const thresholds = JSON.parse(thresholdsFromURL);
-				setCreateAlertState({
-					slice: CreateAlertSlice.THRESHOLD,
-					action: {
-						type: 'SET_THRESHOLDS',
-						payload: thresholds,
-					},
+				setThresholdState({
+					type: 'SET_THRESHOLDS',
+					payload: thresholds,
 				});
 			} catch (error) {
 				console.error('Error parsing thresholds from URL:', error);
 			}

-			setCreateAlertState({
-				slice: CreateAlertSlice.EVALUATION_WINDOW,
-				action: {
-					type: 'SET_INITIAL_STATE_FOR_METER',
-				},
+			setEvaluationWindow({
+				type: 'SET_INITIAL_STATE_FOR_METER',
 			});

-			setCreateAlertState({
-				slice: CreateAlertSlice.THRESHOLD,
-				action: {
-					type: 'SET_MATCH_TYPE',
-					payload: AlertThresholdMatchType.IN_TOTAL,
-				},
+			setThresholdState({
+				type: 'SET_MATCH_TYPE',
+				payload: AlertThresholdMatchType.IN_TOTAL,
 			});
 		}
 	}, [alertType, thresholdsFromURL]);

 	useEffect(() => {
 		if (isEditMode && initialAlertState) {
-			setCreateAlertState({
+			setAlertState({
 				type: 'SET_INITIAL_STATE',
-				payload: initialAlertState,
+				payload: initialAlertState.basicAlertState,
+			});
+			setThresholdState({
+				type: 'SET_INITIAL_STATE',
+				payload: initialAlertState.thresholdState,
+			});
+			setEvaluationWindow({
+				type: 'SET_INITIAL_STATE',
+				payload: initialAlertState.evaluationWindowState,
+			});
+			setAdvancedOptions({
+				type: 'SET_INITIAL_STATE',
+				payload: initialAlertState.advancedOptionsState,
+			});
+			setNotificationSettings({
+				type: 'SET_INITIAL_STATE',
+				payload: initialAlertState.notificationSettingsState,
 			});
 		}
 	}, [initialAlertState, isEditMode]);

 	const discardAlertRule = useCallback(() => {
-		setCreateAlertState({
+		setAlertState({
+			type: 'RESET',
+		});
+		setThresholdState({
+			type: 'RESET',
+		});
+		setEvaluationWindow({
+			type: 'RESET',
+		});
+		setAdvancedOptions({
+			type: 'RESET',
+		});
+		setNotificationSettings({
 			type: 'RESET',
 		});
 		handleAlertTypeChange(AlertTypes.METRICS_BASED_ALERT);
@@ -227,17 +212,17 @@ export function CreateAlertProvider(

 	const contextValue: ICreateAlertContextProps = useMemo(
 		() => ({
-			alertState: createAlertState.basic,
+			alertState,
 			setAlertState,
 			alertType,
 			setAlertType: handleAlertTypeChange,
-			thresholdState: createAlertState.threshold,
+			thresholdState,
 			setThresholdState,
-			evaluationWindow: createAlertState.evaluationWindow,
+			evaluationWindow,
 			setEvaluationWindow,
-			advancedOptions: createAlertState.advancedOptions,
+			advancedOptions,
 			setAdvancedOptions,
-			notificationSettings: createAlertState.notificationSettings,
+			notificationSettings,
 			setNotificationSettings,
 			discardAlertRule,
 			createAlertRule,
@@ -249,14 +234,13 @@ export function CreateAlertProvider(
 			isEditMode: isEditMode || false,
 		}),
 		[
-			createAlertState,
-			setAlertState,
-			setThresholdState,
-			setEvaluationWindow,
-			setAdvancedOptions,
-			setNotificationSettings,
+			alertState,
 			alertType,
 			handleAlertTypeChange,
+			thresholdState,
+			evaluationWindow,
+			advancedOptions,
+			notificationSettings,
 			discardAlertRule,
 			createAlertRule,
 			isCreatingAlertRule,
--- a/frontend/src/container/CreateAlertV2/context/types.ts
+++ b/frontend/src/container/CreateAlertV2/context/types.ts
@@ -9,6 +9,8 @@ import { AlertTypes } from 'types/api/alerts/alertTypes';
 import { PostableAlertRuleV2 } from 'types/api/alerts/alertTypesV2';
 import { Labels } from 'types/api/alerts/def';

+import { GetCreateAlertLocalStateFromAlertDefReturn } from '../types';
+
 export interface ICreateAlertContextProps {
 	alertState: AlertState;
 	setAlertState: Dispatch<CreateAlertAction>;
@@ -50,7 +52,7 @@ export interface ICreateAlertContextProps {
 export interface ICreateAlertProviderProps {
 	children: React.ReactNode;
 	initialAlertType: AlertTypes;
-	initialAlertState?: CreateAlertState;
+	initialAlertState?: GetCreateAlertLocalStateFromAlertDefReturn;
 	isEditMode?: boolean;
 	ruleId?: string;
 }
@@ -270,31 +272,3 @@ export type NotificationSettingsAction =
 	| { type: 'SET_ROUTING_POLICIES'; payload: boolean }
 	| { type: 'SET_INITIAL_STATE'; payload: NotificationSettingsState }
 	| { type: 'RESET' };
-
-export type CreateAlertState = {
-	basic: AlertState;
-	threshold: AlertThresholdState;
-	advancedOptions: AdvancedOptionsState;
-	evaluationWindow: EvaluationWindowState;
-	notificationSettings: NotificationSettingsState;
-};
-
-export enum CreateAlertSlice {
-	BASIC = 'basic',
-	THRESHOLD = 'threshold',
-	ADVANCED_OPTIONS = 'advancedOptions',
-	EVALUATION_WINDOW = 'evaluationWindow',
-	NOTIFICATION_SETTINGS = 'notificationSettings',
-}
-
-export type CreateAlertReducerAction =
-	| { slice: CreateAlertSlice.BASIC; action: CreateAlertAction }
-	| { slice: CreateAlertSlice.THRESHOLD; action: AlertThresholdAction }
-	| { slice: CreateAlertSlice.ADVANCED_OPTIONS; action: AdvancedOptionsAction }
-	| { slice: CreateAlertSlice.EVALUATION_WINDOW; action: EvaluationWindowAction }
-	| {
-			slice: CreateAlertSlice.NOTIFICATION_SETTINGS;
-			action: NotificationSettingsAction;
-	  }
-	| { type: 'RESET' }
-	| { type: 'SET_INITIAL_STATE'; payload: CreateAlertState };
--- a/frontend/src/container/CreateAlertV2/context/utils.tsx
+++ b/frontend/src/container/CreateAlertV2/context/utils.tsx
@@ -18,7 +18,6 @@ import {
 	INITIAL_ADVANCED_OPTIONS_STATE,
 	INITIAL_ALERT_STATE,
 	INITIAL_ALERT_THRESHOLD_STATE,
-	INITIAL_CREATE_ALERT_STATE,
 	INITIAL_EVALUATION_WINDOW_STATE,
 	INITIAL_NOTIFICATION_SETTINGS_STATE,
 } from './constants';
@@ -29,9 +28,6 @@ import {
 	AlertThresholdAction,
 	AlertThresholdState,
 	CreateAlertAction,
-	CreateAlertReducerAction,
-	CreateAlertSlice,
-	CreateAlertState,
 	EvaluationWindowAction,
 	EvaluationWindowState,
 	NotificationSettingsAction,
@@ -255,57 +251,3 @@ export const notificationSettingsReducer = (
 			return state;
 	}
 };
-
-export const createAlertReducer = (
-	state: CreateAlertState,
-	action: CreateAlertReducerAction,
-): CreateAlertState => {
-	// Global actions
-	if ('type' in action) {
-		switch (action.type) {
-			case 'RESET':
-				return INITIAL_CREATE_ALERT_STATE;
-			case 'SET_INITIAL_STATE':
-				return action.payload;
-			default:
-				return state;
-		}
-	}
-
-	// Slice actions
-	switch (action.slice) {
-		case CreateAlertSlice.BASIC:
-			return { ...state, basic: alertCreationReducer(state.basic, action.action) };
-		case CreateAlertSlice.THRESHOLD:
-			return {
-				...state,
-				threshold: alertThresholdReducer(state.threshold, action.action),
-			};
-		case CreateAlertSlice.ADVANCED_OPTIONS:
-			return {
-				...state,
-				advancedOptions: advancedOptionsReducer(
-					state.advancedOptions,
-					action.action,
-				),
-			};
-		case CreateAlertSlice.EVALUATION_WINDOW:
-			return {
-				...state,
-				evaluationWindow: evaluationWindowReducer(
-					state.evaluationWindow,
-					action.action,
-				),
-			};
-		case CreateAlertSlice.NOTIFICATION_SETTINGS:
-			return {
-				...state,
-				notificationSettings: notificationSettingsReducer(
-					state.notificationSettings,
-					action.action,
-				),
-			};
-		default:
-			return state;
-	}
-};
--- a/frontend/src/container/CreateAlertV2/utils.tsx
+++ b/frontend/src/container/CreateAlertV2/utils.tsx
@@ -21,11 +21,11 @@ import {
 	AlertThresholdMatchType,
 	AlertThresholdOperator,
 	AlertThresholdState,
-	CreateAlertState,
 	EvaluationWindowState,
 	NotificationSettingsState,
 } from './context/types';
 import { EVALUATION_WINDOW_TIMEFRAME } from './EvaluationSettings/constants';
+import { GetCreateAlertLocalStateFromAlertDefReturn } from './types';

 export function Spinner(): JSX.Element | null {
 	const { isCreatingAlertRule, isUpdatingAlertRule } = useCreateAlertState();
@@ -265,14 +265,14 @@ export function getThresholdStateFromAlertDef(

 export function getCreateAlertLocalStateFromAlertDef(
 	alertDef: PostableAlertRuleV2 | undefined,
-): CreateAlertState {
+): GetCreateAlertLocalStateFromAlertDefReturn {
 	if (!alertDef) {
 		return {
-			basic: INITIAL_ALERT_STATE,
-			threshold: INITIAL_ALERT_THRESHOLD_STATE,
-			advancedOptions: INITIAL_ADVANCED_OPTIONS_STATE,
-			evaluationWindow: INITIAL_EVALUATION_WINDOW_STATE,
-			notificationSettings: INITIAL_NOTIFICATION_SETTINGS_STATE,
+			basicAlertState: INITIAL_ALERT_STATE,
+			thresholdState: INITIAL_ALERT_THRESHOLD_STATE,
+			advancedOptionsState: INITIAL_ADVANCED_OPTIONS_STATE,
+			evaluationWindowState: INITIAL_EVALUATION_WINDOW_STATE,
+			notificationSettingsState: INITIAL_NOTIFICATION_SETTINGS_STATE,
 		};
 	}
 	// Basic alert state
@@ -294,10 +294,10 @@ export function getCreateAlertLocalStateFromAlertDef(
 	);

 	return {
-		basic: basicAlertState,
-		threshold: thresholdState,
-		advancedOptions: advancedOptionsState,
-		evaluationWindow: evaluationWindowState,
-		notificationSettings: notificationSettingsState,
+		basicAlertState,
+		thresholdState,
+		advancedOptionsState,
+		evaluationWindowState,
+		notificationSettingsState,
 	};
 }
--- a/frontend/src/container/DashboardContainer/DashboardSettings/DashboardVariableSettings/index.tsx
+++ b/frontend/src/container/DashboardContainer/DashboardSettings/DashboardVariableSettings/index.tsx
@@ -22,7 +22,7 @@ import { useUpdateDashboard } from 'hooks/dashboard/useUpdateDashboard';
 import { useNotifications } from 'hooks/useNotifications';
 import { PenLine, Trash2 } from 'lucide-react';
 import { useDashboard } from 'providers/Dashboard/Dashboard';
-import { IDashboardVariables } from 'providers/Dashboard/store/dashboardVariables/dashboardVariablesStoreTypes';
+import { IDashboardVariables } from 'providers/Dashboard/store/dashboardVariablesStore';
 import { IDashboardVariable } from 'types/api/dashboard/getAll';

 import { TVariableMode } from './types';
--- a/frontend/src/container/DashboardContainer/DashboardVariablesSelection/DashboardVariableSelection.tsx
+++ b/frontend/src/container/DashboardContainer/DashboardVariablesSelection/DashboardVariableSelection.tsx
@@ -1,11 +1,8 @@
-import { memo, useEffect } from 'react';
+import { memo, useEffect, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { Row } from 'antd';
 import { ALL_SELECTED_VALUE } from 'components/NewSelect/utils';
-import {
-	useDashboardVariables,
-	useDashboardVariablesSelector,
-} from 'hooks/dashboard/useDashboardVariables';
+import { useDashboardVariables } from 'hooks/dashboard/useDashboardVariables';
 import useVariablesFromUrl from 'hooks/dashboard/useVariablesFromUrl';
 import { isEmpty } from 'lodash-es';
 import { useDashboard } from 'providers/Dashboard/Dashboard';
@@ -15,7 +12,13 @@ import { IDashboardVariable } from 'types/api/dashboard/getAll';
 import { GlobalReducer } from 'types/reducer/globalTime';

 import DynamicVariableSelection from './DynamicVariableSelection';
-import { onUpdateVariableNode } from './util';
+import {
+	buildDependencies,
+	buildDependencyGraph,
+	buildParentDependencyGraph,
+	IDependencyData,
+	onUpdateVariableNode,
+} from './util';
 import VariableItem from './VariableItem';

 import './DashboardVariableSelection.styles.scss';
@@ -32,11 +35,11 @@ function DashboardVariableSelection(): JSX.Element | null {
 	const { updateUrlVariable, getUrlVariables } = useVariablesFromUrl();

 	const { dashboardVariables } = useDashboardVariables();
-	const sortedVariablesArray = useDashboardVariablesSelector(
-		(state) => state.sortedVariablesArray,
-	);
-	const dependencyData = useDashboardVariablesSelector(
-		(state) => state.dependencyData,
+
+	const [variablesTableData, setVariablesTableData] = useState<any>([]);
+
+	const [dependencyData, setDependencyData] = useState<IDependencyData | null>(
+		null,
 	);

 	const { maxTime, minTime } = useSelector<AppState, GlobalReducer>(
@@ -44,6 +47,24 @@ function DashboardVariableSelection(): JSX.Element | null {
 	);

 	useEffect(() => {
+		const tableRowData = [];
+
+		// eslint-disable-next-line no-restricted-syntax
+		for (const [key, value] of Object.entries(dashboardVariables)) {
+			const { id } = value;
+
+			tableRowData.push({
+				key,
+				name: key,
+				...dashboardVariables[key],
+				id,
+			});
+		}
+
+		tableRowData.sort((a, b) => a.order - b.order);
+
+		setVariablesTableData(tableRowData);
+
 		// Initialize variables with default values if not in URL
 		initializeDefaultVariables(
 			dashboardVariables,
@@ -52,6 +73,30 @@ function DashboardVariableSelection(): JSX.Element | null {
 		);
 	}, [getUrlVariables, updateUrlVariable, dashboardVariables]);

+	useEffect(() => {
+		if (variablesTableData.length > 0) {
+			const depGrp = buildDependencies(variablesTableData);
+			const { order, graph, hasCycle, cycleNodes } = buildDependencyGraph(depGrp);
+			const parentDependencyGraph = buildParentDependencyGraph(graph);
+
+			// cleanup order to only include variables that are of type 'QUERY'
+			const cleanedOrder = order.filter((variable) => {
+				const variableData = variablesTableData.find(
+					(v: IDashboardVariable) => v.name === variable,
+				);
+				return variableData?.type === 'QUERY';
+			});
+
+			setDependencyData({
+				order: cleanedOrder,
+				graph,
+				parentDependencyGraph,
+				hasCycle,
+				cycleNodes,
+			});
+		}
+	}, [dashboardVariables, variablesTableData]);
+
 	// this handles the case where the dependency order changes i.e. variable list updated via creation or deletion etc. and we need to refetch the variables
 	// also trigger when the global time changes
 	useEffect(
@@ -141,30 +186,45 @@ function DashboardVariableSelection(): JSX.Element | null {
 		}
 	};

+	if (!dashboardVariables) {
+		return null;
+	}
+
+	const orderBasedSortedVariables = variablesTableData.sort(
+		(a: { order: number }, b: { order: number }) => a.order - b.order,
+	);
+
 	return (
 		<Row style={{ display: 'flex', gap: '12px' }}>
-			{sortedVariablesArray.map((variable) => {
-				const key = `${variable.name}${variable.id}${variable.order}`;
-
-				return variable.type === 'DYNAMIC' ? (
-					<DynamicVariableSelection
-						key={key}
-						existingVariables={dashboardVariables}
-						variableData={variable}
-						onValueUpdate={onValueUpdate}
-					/>
-				) : (
-					<VariableItem
-						key={key}
-						existingVariables={dashboardVariables}
-						variableData={variable}
-						onValueUpdate={onValueUpdate}
-						variablesToGetUpdated={variablesToGetUpdated}
-						setVariablesToGetUpdated={setVariablesToGetUpdated}
-						dependencyData={dependencyData}
-					/>
-				);
-			})}
+			{orderBasedSortedVariables &&
+				Array.isArray(orderBasedSortedVariables) &&
+				orderBasedSortedVariables.length > 0 &&
+				orderBasedSortedVariables.map((variable) =>
+					variable.type === 'DYNAMIC' ? (
+						<DynamicVariableSelection
+							key={`${variable.name}${variable.id}${variable.order}`}
+							existingVariables={dashboardVariables}
+							variableData={{
+								name: variable.name,
+								...variable,
+							}}
+							onValueUpdate={onValueUpdate}
+						/>
+					) : (
+						<VariableItem
+							key={`${variable.name}${variable.id}}${variable.order}`}
+							existingVariables={dashboardVariables}
+							variableData={{
+								name: variable.name,
+								...variable,
+							}}
+							onValueUpdate={onValueUpdate}
+							variablesToGetUpdated={variablesToGetUpdated}
+							setVariablesToGetUpdated={setVariablesToGetUpdated}
+							dependencyData={dependencyData}
+						/>
+					),
+				)}
 		</Row>
 	);
 }
--- a/frontend/src/container/DashboardContainer/DashboardVariablesSelection/VariableItem.tsx
+++ b/frontend/src/container/DashboardContainer/DashboardVariablesSelection/VariableItem.tsx
@@ -16,7 +16,6 @@ import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import { commaValuesParser } from 'lib/dashbaordVariables/customCommaValuesParser';
 import sortValues from 'lib/dashbaordVariables/sortVariableValues';
 import { debounce, isArray, isEmpty, isString } from 'lodash-es';
-import { IDependencyData } from 'providers/Dashboard/store/dashboardVariables/dashboardVariablesStoreTypes';
 import { AppState } from 'store/reducers';
 import { IDashboardVariable } from 'types/api/dashboard/getAll';
 import { VariableResponseProps } from 'types/api/dashboard/variables/query';
@@ -25,7 +24,7 @@ import { popupContainer } from 'utils/selectPopupContainer';

 import { ALL_SELECT_VALUE, variablePropsToPayloadVariables } from '../utils';
 import { SelectItemStyle } from './styles';
-import { areArraysEqual, checkAPIInvocation } from './util';
+import { areArraysEqual, checkAPIInvocation, IDependencyData } from './util';

 import './DashboardVariableSelection.styles.scss';

--- a/frontend/src/container/DashboardContainer/DashboardVariablesSelection/useDashboardVariableUpdate.ts
+++ b/frontend/src/container/DashboardContainer/DashboardVariablesSelection/useDashboardVariableUpdate.ts
@@ -3,7 +3,7 @@ import { useCallback } from 'react';
 import { useAddDynamicVariableToPanels } from 'hooks/dashboard/useAddDynamicVariableToPanels';
 import { useUpdateDashboard } from 'hooks/dashboard/useUpdateDashboard';
 import { useDashboard } from 'providers/Dashboard/Dashboard';
-import { IDashboardVariables } from 'providers/Dashboard/store/dashboardVariables/dashboardVariablesStoreTypes';
+import { IDashboardVariables } from 'providers/Dashboard/store/dashboardVariablesStore';
 import { IDashboardVariable } from 'types/api/dashboard/getAll';
 import { v4 as uuidv4 } from 'uuid';

--- a/frontend/src/container/DashboardContainer/DashboardVariablesSelection/util.ts
+++ b/frontend/src/container/DashboardContainer/DashboardVariablesSelection/util.ts
@@ -1,9 +1,6 @@
 import { OptionData } from 'components/NewSelect/types';
 import { isEmpty, isNull } from 'lodash-es';
-import {
-	IDashboardVariables,
-	IDependencyData,
-} from 'providers/Dashboard/store/dashboardVariables/dashboardVariablesStoreTypes';
+import { IDashboardVariables } from 'providers/Dashboard/store/dashboardVariablesStore';
 import { IDashboardVariable } from 'types/api/dashboard/getAll';

 export function areArraysEqual(
@@ -100,6 +97,14 @@ export const buildDependencies = (
 	return graph;
 };

+export interface IDependencyData {
+	order: string[];
+	graph: VariableGraph;
+	parentDependencyGraph: VariableGraph;
+	hasCycle: boolean;
+	cycleNodes?: string[];
+}
+
 export const buildParentDependencyGraph = (
 	graph: VariableGraph,
 ): VariableGraph => {
--- a/frontend/src/container/DashboardContainer/visualization/charts/TimeSeries/TimeSeries.tsx
+++ b/frontend/src/container/DashboardContainer/visualization/charts/TimeSeries/TimeSeries.tsx
@@ -1,104 +0,0 @@
-import { useCallback, useRef } from 'react';
-import ChartLayout from 'container/DashboardContainer/visualization/layout/ChartLayout/ChartLayout';
-import Legend from 'lib/uPlotV2/components/Legend/Legend';
-import Tooltip from 'lib/uPlotV2/components/Tooltip/Tooltip';
-import {
-	LegendPosition,
-	TooltipRenderArgs,
-} from 'lib/uPlotV2/components/types';
-import UPlotChart from 'lib/uPlotV2/components/UPlotChart';
-import { PlotContextProvider } from 'lib/uPlotV2/context/PlotContext';
-import TooltipPlugin from 'lib/uPlotV2/plugins/TooltipPlugin/TooltipPlugin';
-import _noop from 'lodash-es/noop';
-import uPlot from 'uplot';
-
-import { ChartProps } from '../types';
-
-const TOOLTIP_WIDTH_PADDING = 60;
-const TOOLTIP_MIN_WIDTH = 200;
-
-export default function TimeSeries({
-	legendConfig = { position: LegendPosition.BOTTOM },
-	config,
-	data,
-	width: containerWidth,
-	height: containerHeight,
-	disableTooltip = false,
-	canPinTooltip = false,
-	timezone,
-	yAxisUnit,
-	decimalPrecision,
-	syncMode,
-	syncKey,
-	onDestroy = _noop,
-	children,
-	layoutChildren,
-	'data-testid': testId,
-}: ChartProps): JSX.Element {
-	const plotInstanceRef = useRef<uPlot | null>(null);
-
-	const legendComponent = useCallback(
-		(averageLegendWidth: number): React.ReactNode => {
-			return (
-				<Legend
-					config={config}
-					position={legendConfig.position}
-					averageLegendWidth={averageLegendWidth}
-				/>
-			);
-		},
-		[config, legendConfig.position],
-	);
-
-	return (
-		<PlotContextProvider>
-			<ChartLayout
-				config={config}
-				containerWidth={containerWidth}
-				containerHeight={containerHeight}
-				legendConfig={legendConfig}
-				legendComponent={legendComponent}
-				layoutChildren={layoutChildren}
-			>
-				{({ chartWidth, chartHeight, averageLegendWidth }): JSX.Element => (
-					<UPlotChart
-						config={config}
-						data={data}
-						width={chartWidth}
-						height={chartHeight}
-						plotRef={(plot): void => {
-							plotInstanceRef.current = plot;
-						}}
-						onDestroy={(plot: uPlot): void => {
-							plotInstanceRef.current = null;
-							onDestroy(plot);
-						}}
-						data-testid={testId}
-					>
-						{children}
-						{!disableTooltip && (
-							<TooltipPlugin
-								config={config}
-								canPinTooltip={canPinTooltip}
-								syncMode={syncMode}
-								maxWidth={Math.max(
-									TOOLTIP_MIN_WIDTH,
-									averageLegendWidth + TOOLTIP_WIDTH_PADDING,
-								)}
-								syncKey={syncKey}
-								render={(props: TooltipRenderArgs): React.ReactNode => (
-									<Tooltip
-										{...props}
-										timezone={timezone}
-										yAxisUnit={yAxisUnit}
-										decimalPrecision={decimalPrecision}
-									/>
-								)}
-							/>
-						)}
-					</UPlotChart>
-				)}
-			</ChartLayout>
-		</PlotContextProvider>
-	);
-}
--- a/frontend/src/container/DashboardContainer/visualization/charts/types.ts
+++ b/frontend/src/container/DashboardContainer/visualization/charts/types.ts
@@ -1,29 +0,0 @@
-import { PrecisionOption } from 'components/Graph/types';
-import { LegendConfig } from 'lib/uPlotV2/components/types';
-import { UPlotConfigBuilder } from 'lib/uPlotV2/config/UPlotConfigBuilder';
-import { DashboardCursorSync } from 'lib/uPlotV2/plugins/TooltipPlugin/types';
-
-interface BaseChartProps {
-	width: number;
-	height: number;
-	disableTooltip?: boolean;
-	timezone: string;
-	syncMode?: DashboardCursorSync;
-	syncKey?: string;
-	canPinTooltip?: boolean;
-	yAxisUnit?: string;
-	decimalPrecision?: PrecisionOption;
-}
-
-interface TimeSeriesChartProps extends BaseChartProps {
-	config: UPlotConfigBuilder;
-	legendConfig: LegendConfig;
-	data: uPlot.AlignedData;
-	plotRef?: (plot: uPlot | null) => void;
-	onDestroy?: (plot: uPlot) => void;
-	children?: React.ReactNode;
-	layoutChildren?: React.ReactNode;
-	'data-testid'?: string;
-}
-
-export type ChartProps = TimeSeriesChartProps;
--- a/frontend/src/container/DashboardContainer/visualization/charts/utils.ts
+++ b/frontend/src/container/DashboardContainer/visualization/charts/utils.ts
@@ -5,32 +5,25 @@ export interface ChartDimensions {
 	height: number;
 	legendWidth: number;
 	legendHeight: number;
-	averageLegendWidth: number;
+	legendsPerSet: number;
 }

 const AVG_CHAR_WIDTH = 8;
-const LEGEND_WIDTH_PERCENTILE = 0.85;
 const DEFAULT_AVG_LABEL_LENGTH = 15;
-const BASE_LEGEND_WIDTH = 16;
+const LEGEND_GAP = 16;
 const LEGEND_PADDING = 12;
-const LEGEND_LINE_HEIGHT = 28;
+const LEGEND_LINE_HEIGHT = 36;

 /**
- * Calculates the average width of the legend items based on the labels of the series.
- * @param legends - The labels of the series.
- * @returns The average width of the legend items.
+ * Average text width from series labels (for legendsPerSet).
 */
 export function calculateAverageLegendWidth(legends: string[]): number {
 	if (legends.length === 0) {
-		return DEFAULT_AVG_LABEL_LENGTH * AVG_CHAR_WIDTH;
+		return DEFAULT_AVG_LABEL_LENGTH;
 	}
-
-	const lengths = legends.map((l) => l.length).sort((a, b) => a - b);
-
-	const index = Math.ceil(LEGEND_WIDTH_PERCENTILE * lengths.length) - 1;
-	const percentileLength = lengths[Math.max(0, index)];
-
-	return BASE_LEGEND_WIDTH + percentileLength * AVG_CHAR_WIDTH;
+	const averageLabelLength =
+		legends.reduce((sum, l) => sum + l.length, 0) / legends.length;
+	return averageLabelLength * AVG_CHAR_WIDTH;
 }

 /**
@@ -71,7 +64,7 @@ export function calculateChartDimensions({
 			height: 0,
 			legendWidth: 0,
 			legendHeight: 0,
-			averageLegendWidth: 0,
+			legendsPerSet: 0,
 		};
 	}

@@ -92,15 +85,13 @@ export function calculateChartDimensions({
 			legendWidth: rightLegendWidth,
 			legendHeight: containerHeight,
 			// Single vertical list on the right.
-			averageLegendWidth: rightLegendWidth,
+			legendsPerSet: 1,
 		};
 	}

 	const legendRowHeight = LEGEND_LINE_HEIGHT + LEGEND_PADDING;

-	const legendItemWidth = Math.ceil(
-		Math.min(approxLegendItemWidth, MAX_LEGEND_WIDTH),
-	);
+	const legendItemWidth = Math.min(approxLegendItemWidth, 400);
 	const legendItemsPerRow = Math.max(
 		1,
 		Math.floor((containerWidth - LEGEND_PADDING * 2) / legendItemWidth),
@@ -123,11 +114,17 @@ export function calculateChartDimensions({
 		maxAllowedLegendHeight,
 	);

+	// How many legend items per row in the Legend component.
+	const legendsPerSet = Math.ceil(
+		(containerWidth + LEGEND_GAP) /
+			(Math.min(MAX_LEGEND_WIDTH, approxLegendItemWidth) + LEGEND_GAP),
+	);
+
 	return {
 		width: containerWidth,
 		height: Math.max(0, containerHeight - bottomLegendHeight),
 		legendWidth: containerWidth,
 		legendHeight: bottomLegendHeight,
-		averageLegendWidth: legendItemWidth,
+		legendsPerSet,
 	};
 }
--- a/frontend/src/container/DashboardContainer/visualization/layout/ChartLayout/ChartLayout.tsx
+++ b/frontend/src/container/DashboardContainer/visualization/layout/ChartLayout/ChartLayout.tsx
@@ -11,7 +11,6 @@ export interface ChartLayoutProps {
 	children: (props: {
 		chartWidth: number;
 		chartHeight: number;
-		averageLegendWidth: number;
 	}) => React.ReactNode;
 	layoutChildren?: React.ReactNode;
 	containerWidth: number;
@@ -57,7 +56,6 @@ export default function ChartLayout({
 					{children({
 						chartWidth: chartDimensions.width,
 						chartHeight: chartDimensions.height,
-						averageLegendWidth: chartDimensions.averageLegendWidth,
 					})}
 				</div>
 				<div
@@ -67,7 +65,7 @@ export default function ChartLayout({
 						width: chartDimensions.legendWidth,
 					}}
 				>
-					{legendComponent(chartDimensions.averageLegendWidth)}
+					{legendComponent(chartDimensions.legendsPerSet)}
 				</div>
 			</div>
 			{layoutChildren}
--- a/frontend/src/container/GridCardLayout/GridCard/types.ts
+++ b/frontend/src/container/GridCardLayout/GridCard/types.ts
@@ -4,7 +4,7 @@ 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 { IDashboardVariables } from 'providers/Dashboard/store/dashboardVariablesStore';
 import { SuccessResponse } from 'types/api';
 import { Widgets } from 'types/api/dashboard/getAll';
 import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
--- a/frontend/src/container/IngestionSettings/MultiIngestionSettings.tsx
+++ b/frontend/src/container/IngestionSettings/MultiIngestionSettings.tsx
@@ -2,7 +2,6 @@
 /* eslint-disable jsx-a11y/click-events-have-key-events */
 import { ChangeEvent, useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useMutation } from 'react-query';
 import { useHistory } from 'react-router-dom';
 import { useCopyToClipboard } from 'react-use';
 import { Color } from '@signozhq/design-tokens';
@@ -27,12 +26,20 @@ import {
 } from 'antd';
 import { NotificationInstance } from 'antd/es/notification/interface';
 import { CollapseProps } from 'antd/lib';
-import createIngestionKeyApi from 'api/IngestionKeys/createIngestionKey';
-import deleteIngestionKey from 'api/IngestionKeys/deleteIngestionKey';
-import createLimitForIngestionKeyApi from 'api/IngestionKeys/limits/createLimitsForKey';
-import deleteLimitsForIngestionKey from 'api/IngestionKeys/limits/deleteLimitsForIngestionKey';
-import updateLimitForIngestionKeyApi from 'api/IngestionKeys/limits/updateLimitsForIngestionKey';
-import updateIngestionKey from 'api/IngestionKeys/updateIngestionKey';
+import {
+	useCreateIngestionKey,
+	useCreateIngestionKeyLimit,
+	useDeleteIngestionKey,
+	useDeleteIngestionKeyLimit,
+	useGetIngestionKeys,
+	useSearchIngestionKeys,
+	useUpdateIngestionKey,
+	useUpdateIngestionKeyLimit,
+} from 'api/generated/services/gateway';
+import {
+	GatewaytypesIngestionKeyDTO,
+	RenderErrorResponseDTO,
+} from 'api/generated/services/sigNoz.schemas';
 import { AxiosError } from 'axios';
 import { getYAxisFormattedValue } from 'components/Graph/yAxisConfig';
 import Tags from 'components/Tags/Tags';
@@ -44,7 +51,6 @@ import ROUTES from 'constants/routes';
 import { INITIAL_ALERT_THRESHOLD_STATE } from 'container/CreateAlertV2/context/constants';
 import dayjs from 'dayjs';
 import { useGetGlobalConfig } from 'hooks/globalConfig/useGetGlobalConfig';
-import { useGetAllIngestionsKeys } from 'hooks/IngestionKeys/useGetAllIngestionKeys';
 import useDebouncedFn from 'hooks/useDebouncedFunction';
 import { useNotifications } from 'hooks/useNotifications';
 import { cloneDeep, isNil, isUndefined } from 'lodash-es';
@@ -66,16 +72,12 @@ import {
 } from 'lucide-react';
 import { useAppContext } from 'providers/App/App';
 import { useTimezone } from 'providers/Timezone';
-import { ErrorResponse } from 'types/api';
 import {
 	AddLimitProps,
 	LimitProps,
 	UpdateLimitProps,
 } from 'types/api/ingestionKeys/limits/types';
-import {
-	IngestionKeyProps,
-	PaginationProps,
-} from 'types/api/ingestionKeys/types';
+import { PaginationProps } from 'types/api/ingestionKeys/types';
 import { MeterAggregateOperator } from 'types/common/queryBuilder';
 import { USER_ROLES } from 'types/roles';
 import { getDaysUntilExpiry } from 'utils/timeUtils';
@@ -111,6 +113,8 @@ export const showErrorNotification = (
 ): void => {
 	notifications.error({
 		message: err.message || SOMETHING_WENT_WRONG,
+		description: (err as AxiosError<RenderErrorResponseDTO>).response?.data?.error
+			?.message,
 	});
 };

@@ -163,12 +167,17 @@ function MultiIngestionSettings(): JSX.Element {
 	const [updatedTags, setUpdatedTags] = useState<string[]>([]);
 	const [isEditModalOpen, setIsEditModalOpen] = useState(false);
 	const [isEditAddLimitOpen, setIsEditAddLimitOpen] = useState(false);
-	const [activeAPIKey, setActiveAPIKey] = useState<IngestionKeyProps | null>();
+	const [
+		activeAPIKey,
+		setActiveAPIKey,
+	] = useState<GatewaytypesIngestionKeyDTO | null>();
 	const [activeSignal, setActiveSignal] = useState<LimitProps | null>(null);

 	const [searchValue, setSearchValue] = useState<string>('');
 	const [searchText, setSearchText] = useState<string>('');
-	const [dataSource, setDataSource] = useState<IngestionKeyProps[]>([]);
+	const [dataSource, setDataSource] = useState<GatewaytypesIngestionKeyDTO[]>(
+		[],
+	);
 	const [paginationParams, setPaginationParams] = useState<PaginationProps>({
 		page: 1,
 		per_page: 10,
@@ -186,7 +195,7 @@ function MultiIngestionSettings(): JSX.Element {
 	const [
 		createLimitForIngestionKeyError,
 		setCreateLimitForIngestionKeyError,
-	] = useState<ErrorResponse | null>(null);
+	] = useState<string | null>(null);

 	const [
 		hasUpdateLimitForIngestionKeyError,
@@ -196,7 +205,7 @@ function MultiIngestionSettings(): JSX.Element {
 	const [
 		updateLimitForIngestionKeyError,
 		setUpdateLimitForIngestionKeyError,
-	] = useState<ErrorResponse | null>(null);
+	] = useState<string | null>(null);

 	const { t } = useTranslation(['ingestionKeys']);

@@ -216,7 +225,7 @@ function MultiIngestionSettings(): JSX.Element {
 		handleFormReset();
 	};

-	const showDeleteModal = (apiKey: IngestionKeyProps): void => {
+	const showDeleteModal = (apiKey: GatewaytypesIngestionKeyDTO): void => {
 		setActiveAPIKey(apiKey);
 		setIsDeleteModalOpen(true);
 	};
@@ -233,7 +242,7 @@ function MultiIngestionSettings(): JSX.Element {
 		setIsAddModalOpen(false);
 	};

-	const showEditModal = (apiKey: IngestionKeyProps): void => {
+	const showEditModal = (apiKey: GatewaytypesIngestionKeyDTO): void => {
 		setActiveAPIKey(apiKey);
 		handleFormReset();
 		setUpdatedTags(apiKey.tags || []);
@@ -258,25 +267,63 @@ function MultiIngestionSettings(): JSX.Element {
 		setActiveSignal(null);
 	};

+	// Use search API when searchText is present, otherwise use normal get API
+	const isSearching = searchText.length > 0;
+
 	const {
-		data: IngestionKeys,
-		isLoading,
-		isRefetching,
-		refetch: refetchAPIKeys,
-		error,
-		isError,
-	} = useGetAllIngestionsKeys({
-		search: searchText,
-		...paginationParams,
-	});
+		data: getIngestionKeysData,
+		isLoading: isLoadingGet,
+		isRefetching: isRefetchingGet,
+		refetch: refetchGetAPIKeys,
+		error: getError,
+		isError: isGetError,
+	} = useGetIngestionKeys(
+		{
+			...paginationParams,
+		},
+		{
+			query: {
+				enabled: !isSearching,
+			},
+		},
+	);
+
+	const {
+		data: searchIngestionKeysData,
+		isLoading: isLoadingSearch,
+		isRefetching: isRefetchingSearch,
+		refetch: refetchSearchAPIKeys,
+		error: searchError,
+		isError: isSearchError,
+	} = useSearchIngestionKeys(
+		{
+			...paginationParams,
+			name: searchText,
+		},
+		{
+			query: {
+				enabled: isSearching,
+			},
+		},
+	);
+
+	// Use the appropriate data based on which API is active
+	const IngestionKeys = isSearching
+		? searchIngestionKeysData
+		: getIngestionKeysData;
+	const isLoading = isSearching ? isLoadingSearch : isLoadingGet;
+	const isRefetching = isSearching ? isRefetchingSearch : isRefetchingGet;
+	const refetchAPIKeys = isSearching ? refetchSearchAPIKeys : refetchGetAPIKeys;
+	const error = isSearching ? searchError : getError;
+	const isError = isSearching ? isSearchError : isGetError;

 	useEffect(() => {
-		setActiveAPIKey(IngestionKeys?.data.data[0]);
+		setActiveAPIKey(IngestionKeys?.data.data?.keys?.[0]);
 	}, [IngestionKeys]);

 	useEffect(() => {
-		setDataSource(IngestionKeys?.data.data || []);
-		setTotalIngestionKeys(IngestionKeys?.data?._pagination?.total || 0);
+		setDataSource(IngestionKeys?.data.data?.keys || []);
+		setTotalIngestionKeys(IngestionKeys?.data?.data?._pagination?.total || 0);
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [IngestionKeys?.data?.data]);

@@ -297,6 +344,7 @@ function MultiIngestionSettings(): JSX.Element {

 	const clearSearch = (): void => {
 		setSearchValue('');
+		setSearchText('');
 	};

 	const {
@@ -309,21 +357,27 @@ function MultiIngestionSettings(): JSX.Element {
 	const {
 		mutate: createIngestionKey,
 		isLoading: isLoadingCreateAPIKey,
-	} = useMutation(createIngestionKeyApi, {
-		onSuccess: (data) => {
-			setActiveAPIKey(data.payload);
-			setUpdatedTags([]);
-			hideAddViewModal();
-			refetchAPIKeys();
-		},
-		onError: (error) => {
-			showErrorNotification(notifications, error as AxiosError);
+	} = useCreateIngestionKey({
+		mutation: {
+			onSuccess: (_data) => {
+				// The new API returns GatewaytypesGettableCreatedIngestionKeyDTO with only id and value
+				// We rely on refetchAPIKeys to get the full key object
+				setActiveAPIKey(null);
+				setUpdatedTags([]);
+				hideAddViewModal();
+				refetchAPIKeys();
+			},
+			onError: (error) => {
+				showErrorNotification(notifications, error as AxiosError);
+			},
 		},
 	});

-	const { mutate: updateAPIKey, isLoading: isLoadingUpdateAPIKey } = useMutation(
-		updateIngestionKey,
-		{
+	const {
+		mutate: updateAPIKey,
+		isLoading: isLoadingUpdateAPIKey,
+	} = useUpdateIngestionKey({
+		mutation: {
 			onSuccess: () => {
 				refetchAPIKeys();
 				setIsEditModalOpen(false);
@@ -332,11 +386,13 @@ function MultiIngestionSettings(): JSX.Element {
 				showErrorNotification(notifications, error as AxiosError);
 			},
 		},
-	);
+	});

-	const { mutate: deleteAPIKey, isLoading: isDeleteingAPIKey } = useMutation(
-		deleteIngestionKey,
-		{
+	const {
+		mutate: deleteAPIKey,
+		isLoading: isDeleteingAPIKey,
+	} = useDeleteIngestionKey({
+		mutation: {
 			onSuccess: () => {
 				refetchAPIKeys();
 				setIsDeleteModalOpen(false);
@@ -345,49 +401,59 @@ function MultiIngestionSettings(): JSX.Element {
 				showErrorNotification(notifications, error as AxiosError);
 			},
 		},
-	);
+	});

 	const {
 		mutate: createLimitForIngestionKey,
 		isLoading: isLoadingLimitForKey,
-	} = useMutation(createLimitForIngestionKeyApi, {
-		onSuccess: () => {
-			setActiveSignal(null);
-			setActiveAPIKey(null);
-			setIsEditAddLimitOpen(false);
-			setUpdatedTags([]);
-			hideAddViewModal();
-			refetchAPIKeys();
-			setHasCreateLimitForIngestionKeyError(false);
-		},
-		onError: (error: ErrorResponse) => {
-			setHasCreateLimitForIngestionKeyError(true);
-			setCreateLimitForIngestionKeyError(error);
+	} = useCreateIngestionKeyLimit({
+		mutation: {
+			onSuccess: () => {
+				setActiveSignal(null);
+				setActiveAPIKey(null);
+				setIsEditAddLimitOpen(false);
+				setUpdatedTags([]);
+				hideAddViewModal();
+				refetchAPIKeys();
+				setHasCreateLimitForIngestionKeyError(false);
+			},
+			onError: (error: AxiosError<RenderErrorResponseDTO>) => {
+				setHasCreateLimitForIngestionKeyError(true);
+				setCreateLimitForIngestionKeyError(
+					error.response?.data?.error?.message || 'Failed to create limit',
+				);
+			},
 		},
 	});

 	const {
 		mutate: updateLimitForIngestionKey,
 		isLoading: isLoadingUpdatedLimitForKey,
-	} = useMutation(updateLimitForIngestionKeyApi, {
-		onSuccess: () => {
-			setActiveSignal(null);
-			setActiveAPIKey(null);
-			setIsEditAddLimitOpen(false);
-			setUpdatedTags([]);
-			hideAddViewModal();
-			refetchAPIKeys();
-			setHasUpdateLimitForIngestionKeyError(false);
-		},
-		onError: (error: ErrorResponse) => {
-			setHasUpdateLimitForIngestionKeyError(true);
-			setUpdateLimitForIngestionKeyError(error);
+	} = useUpdateIngestionKeyLimit({
+		mutation: {
+			onSuccess: () => {
+				setActiveSignal(null);
+				setActiveAPIKey(null);
+				setIsEditAddLimitOpen(false);
+				setUpdatedTags([]);
+				hideAddViewModal();
+				refetchAPIKeys();
+				setHasUpdateLimitForIngestionKeyError(false);
+			},
+			onError: (error: AxiosError<RenderErrorResponseDTO>) => {
+				setHasUpdateLimitForIngestionKeyError(true);
+				setUpdateLimitForIngestionKeyError(
+					error.response?.data?.error?.message || 'Failed to update limit',
+				);
+			},
 		},
 	});

-	const { mutate: deleteLimitForKey, isLoading: isDeletingLimit } = useMutation(
-		deleteLimitsForIngestionKey,
-		{
+	const {
+		mutate: deleteLimitForKey,
+		isLoading: isDeletingLimit,
+	} = useDeleteIngestionKeyLimit({
+		mutation: {
 			onSuccess: () => {
 				setIsDeleteModalOpen(false);
 				setIsDeleteLimitModalOpen(false);
@@ -397,13 +463,15 @@ function MultiIngestionSettings(): JSX.Element {
 				showErrorNotification(notifications, error as AxiosError);
 			},
 		},
-	);
+	});

 	const onDeleteHandler = (): void => {
 		clearSearch();

-		if (activeAPIKey) {
-			deleteAPIKey(activeAPIKey.id);
+		if (activeAPIKey && activeAPIKey.id) {
+			deleteAPIKey({
+				pathParams: { keyId: activeAPIKey.id },
+			});
 		}
 	};

@@ -411,13 +479,15 @@ function MultiIngestionSettings(): JSX.Element {
 		editForm
 			.validateFields()
 			.then((values) => {
-				if (activeAPIKey) {
+				if (activeAPIKey && activeAPIKey.id) {
 					updateAPIKey({
-						id: activeAPIKey.id,
+						pathParams: { keyId: activeAPIKey.id },
 						data: {
 							name: values.name,
 							tags: updatedTags,
-							expires_at: dayjs(values.expires_at).endOf('day').toISOString(),
+							expires_at: new Date(
+								dayjs(values.expires_at).endOf('day').toISOString(),
+							),
 						},
 					});
 				}
@@ -433,12 +503,14 @@ function MultiIngestionSettings(): JSX.Element {
 			.then((values) => {
 				if (user) {
 					const requestPayload = {
-						name: values.name,
+						name: '',
 						tags: updatedTags,
-						expires_at: dayjs(values.expires_at).endOf('day').toISOString(),
+						expires_at: new Date(dayjs(values.expires_at).endOf('day').toISOString()),
 					};

-					createIngestionKey(requestPayload);
+					createIngestionKey({
+						data: requestPayload,
+					});
 				}
 			})
 			.catch((errorInfo) => {
@@ -465,7 +537,7 @@ function MultiIngestionSettings(): JSX.Element {
 		formatTimezoneAdjustedTimestamp(date, DATE_TIME_FORMATS.UTC_MONTH_COMPACT);

 	const showDeleteLimitModal = (
-		APIKey: IngestionKeyProps,
+		APIKey: GatewaytypesIngestionKeyDTO,
 		limit: LimitProps,
 	): void => {
 		setActiveAPIKey(APIKey);
@@ -489,7 +561,7 @@ function MultiIngestionSettings(): JSX.Element {

 	/* eslint-disable sonarjs/cognitive-complexity */
 	const handleAddLimit = (
-		APIKey: IngestionKeyProps,
+		APIKey: GatewaytypesIngestionKeyDTO,
 		signalName: string,
 	): void => {
 		const {
@@ -502,7 +574,7 @@ function MultiIngestionSettings(): JSX.Element {
 		} = addEditLimitForm.getFieldsValue();

 		const payload: AddLimitProps = {
-			keyID: APIKey.id,
+			keyID: APIKey.id || '',
 			signal: signalName,
 			config: {},
 		};
@@ -576,11 +648,17 @@ function MultiIngestionSettings(): JSX.Element {
 			return;
 		}

-		createLimitForIngestionKey(payload);
+		createLimitForIngestionKey({
+			pathParams: { keyId: payload.keyID },
+			data: {
+				signal: payload.signal,
+				config: payload.config,
+			},
+		});
 	};

 	const handleUpdateLimit = (
-		APIKey: IngestionKeyProps,
+		APIKey: GatewaytypesIngestionKeyDTO,
 		signal: LimitProps,
 	): void => {
 		const {
@@ -644,7 +722,12 @@ function MultiIngestionSettings(): JSX.Element {
 			}
 		}

-		updateLimitForIngestionKey(payload);
+		updateLimitForIngestionKey({
+			pathParams: { limitId: payload.limitID },
+			data: {
+				config: payload.config,
+			},
+		});
 	};
 	/* eslint-enable sonarjs/cognitive-complexity */

@@ -656,7 +739,7 @@ function MultiIngestionSettings(): JSX.Element {
 	};

 	const enableEditLimitMode = (
-		APIKey: IngestionKeyProps,
+		APIKey: GatewaytypesIngestionKeyDTO,
 		signal: LimitProps,
 	): void => {
 		const dayCount = signal?.config?.day?.count;
@@ -703,14 +786,16 @@ function MultiIngestionSettings(): JSX.Element {

 	const onDeleteLimitHandler = (): void => {
 		if (activeSignal && activeSignal.id) {
-			deleteLimitForKey(activeSignal.id);
+			deleteLimitForKey({
+				pathParams: { limitId: activeSignal.id },
+			});
 		}
 	};

 	const { formatTimezoneAdjustedTimestamp } = useTimezone();

 	const handleCreateAlert = (
-		APIKey: IngestionKeyProps,
+		APIKey: GatewaytypesIngestionKeyDTO,
 		signal: LimitProps,
 	): void => {
 		let metricName = '';
@@ -771,31 +856,41 @@ function MultiIngestionSettings(): JSX.Element {
 		history.push(URL);
 	};

-	const columns: AntDTableProps<IngestionKeyProps>['columns'] = [
+	const columns: AntDTableProps<GatewaytypesIngestionKeyDTO>['columns'] = [
 		{
 			title: 'Ingestion Key',
 			key: 'ingestion-key',
 			// eslint-disable-next-line sonarjs/cognitive-complexity
-			render: (APIKey: IngestionKeyProps): JSX.Element => {
-				const createdOn = getFormattedTime(
-					APIKey.created_at,
-					formatTimezoneAdjustedTimestamp,
-				);
+			render: (APIKey: GatewaytypesIngestionKeyDTO): JSX.Element => {
+				const createdOn = APIKey?.created_at
+					? getFormattedTime(
+							dayjs(APIKey.created_at).toISOString(),
+							formatTimezoneAdjustedTimestamp,
+					  )
+					: '';

 				const expiresOn =
-					!APIKey?.expires_at || APIKey?.expires_at === '0001-01-01T00:00:00Z'
+					!APIKey?.expires_at ||
+					dayjs(APIKey?.expires_at).toISOString() === '0001-01-01T00:00:00.000Z'
 						? 'No Expiry'
-						: getFormattedTime(APIKey?.expires_at, formatTimezoneAdjustedTimestamp);
+						: getFormattedTime(
+								dayjs(APIKey?.expires_at).toISOString(),
+								formatTimezoneAdjustedTimestamp,
+						  );

-				const updatedOn = getFormattedTime(
-					APIKey?.updated_at,
-					formatTimezoneAdjustedTimestamp,
-				);
+				const updatedOn = APIKey?.updated_at
+					? getFormattedTime(
+							dayjs(APIKey.updated_at).toISOString(),
+							formatTimezoneAdjustedTimestamp,
+					  )
+					: '';

 				// Convert array of limits to a dictionary for quick access
 				const limitsDict: Record<string, LimitProps> = {};
-				APIKey.limits?.forEach((limitItem: LimitProps) => {
-					limitsDict[limitItem.signal] = limitItem;
+				APIKey.limits?.forEach((limitItem) => {
+					if (limitItem.signal && limitItem.id) {
+						limitsDict[limitItem.signal] = limitItem as LimitProps;
+					}
 				});

 				const hasLimits = (signalName: string): boolean => !!limitsDict[signalName];
@@ -812,8 +907,10 @@ function MultiIngestionSettings(): JSX.Element {

 									<div className="ingestion-key-value">
 										<Typography.Text>
-											{APIKey?.value.substring(0, 2)}********
-											{APIKey?.value.substring(APIKey.value.length - 2).trim()}
+											{APIKey?.value?.substring(0, 2)}********
+											{APIKey?.value
+												?.substring(APIKey?.value?.length ? APIKey.value.length - 2 : 0)
+												.trim()}
 										</Typography.Text>

 										<Copy
@@ -822,7 +919,9 @@ function MultiIngestionSettings(): JSX.Element {
 											onClick={(e): void => {
 												e.stopPropagation();
 												e.preventDefault();
-												handleCopyKey(APIKey.value);
+												if (APIKey?.value) {
+													handleCopyKey(APIKey.value);
+												}
 											}}
 										/>
 									</div>
@@ -854,7 +953,7 @@ function MultiIngestionSettings(): JSX.Element {
 								<Row>
 									<Col span={6}> ID </Col>
 									<Col span={12}>
-										<Typography.Text>{APIKey.id}</Typography.Text>
+										<Typography.Text>{APIKey?.id}</Typography.Text>
 									</Col>
 								</Row>

@@ -916,7 +1015,9 @@ function MultiIngestionSettings(): JSX.Element {
 																		<Button
 																			className="periscope-btn ghost"
 																			icon={<PenLine size={14} />}
-																			disabled={!!(activeAPIKey?.id === APIKey.id && activeSignal)}
+																			disabled={
+																				!!(activeAPIKey?.id === APIKey?.id && activeSignal)
+																			}
 																			onClick={(e): void => {
 																				e.stopPropagation();
 																				e.preventDefault();
@@ -926,7 +1027,9 @@ function MultiIngestionSettings(): JSX.Element {
 																		<Button
 																			className="periscope-btn ghost"
 																			icon={<Trash2 color={Color.BG_CHERRY_500} size={14} />}
-																			disabled={!!(activeAPIKey?.id === APIKey.id && activeSignal)}
+																			disabled={
+																				!!(activeAPIKey?.id === APIKey?.id && activeSignal)
+																			}
 																			onClick={(e): void => {
 																				e.stopPropagation();
 																				e.preventDefault();
@@ -940,7 +1043,7 @@ function MultiIngestionSettings(): JSX.Element {
 																		size="small"
 																		shape="round"
 																		icon={<PlusIcon size={14} />}
-																		disabled={!!(activeAPIKey?.id === APIKey.id && activeSignal)}
+																		disabled={!!(activeAPIKey?.id === APIKey?.id && activeSignal)}
 																		onClick={(e): void => {
 																			e.stopPropagation();
 																			e.preventDefault();
@@ -958,7 +1061,7 @@ function MultiIngestionSettings(): JSX.Element {
 														</div>

 														<div className="signal-limit-values">
-															{activeAPIKey?.id === APIKey.id &&
+															{activeAPIKey?.id === APIKey?.id &&
 															activeSignal?.signal === signalName &&
 															isEditAddLimitOpen ? (
 																<Form
@@ -1154,27 +1257,27 @@ function MultiIngestionSettings(): JSX.Element {
 																		</div>
 																	</div>

-																	{activeAPIKey?.id === APIKey.id &&
+																	{activeAPIKey?.id === APIKey?.id &&
 																		activeSignal.signal === signalName &&
 																		!isLoadingLimitForKey &&
 																		hasCreateLimitForIngestionKeyError &&
-																		createLimitForIngestionKeyError?.error && (
+																		createLimitForIngestionKeyError && (
 																			<div className="error">
-																				{createLimitForIngestionKeyError?.error}
+																				{createLimitForIngestionKeyError}
 																			</div>
 																		)}

-																	{activeAPIKey?.id === APIKey.id &&
+																	{activeAPIKey?.id === APIKey?.id &&
 																		activeSignal.signal === signalName &&
 																		!isLoadingLimitForKey &&
 																		hasUpdateLimitForIngestionKeyError &&
-																		updateLimitForIngestionKeyError?.error && (
+																		updateLimitForIngestionKeyError && (
 																			<div className="error">
-																				{updateLimitForIngestionKeyError?.error}
+																				{updateLimitForIngestionKeyError}
 																			</div>
 																		)}

-																	{activeAPIKey?.id === APIKey.id &&
+																	{activeAPIKey?.id === APIKey?.id &&
 																		activeSignal.signal === signalName &&
 																		isEditAddLimitOpen && (
 																			<div className="signal-limit-save-discard">
--- a/frontend/src/container/OnboardingV2Container/IngestionDetails/IngestionDetails.tsx
+++ b/frontend/src/container/OnboardingV2Container/IngestionDetails/IngestionDetails.tsx
@@ -2,13 +2,16 @@ import { useEffect, useState } from 'react';
 import { useCopyToClipboard } from 'react-use';
 import { Button, Skeleton, Tooltip, Typography } from 'antd';
 import logEvent from 'api/common/logEvent';
+import { useGetIngestionKeys } from 'api/generated/services/gateway';
+import {
+	GatewaytypesIngestionKeyDTO,
+	RenderErrorResponseDTO,
+} from 'api/generated/services/sigNoz.schemas';
 import { AxiosError } from 'axios';
 import { DOCS_BASE_URL } from 'constants/app';
 import { useGetGlobalConfig } from 'hooks/globalConfig/useGetGlobalConfig';
-import { useGetAllIngestionsKeys } from 'hooks/IngestionKeys/useGetAllIngestionKeys';
 import { useNotifications } from 'hooks/useNotifications';
 import { ArrowUpRight, Copy, Info, Key, TriangleAlert } from 'lucide-react';
-import { IngestionKeyProps } from 'types/api/ingestionKeys/types';

 import './IngestionDetails.styles.scss';

@@ -39,17 +42,17 @@ export default function OnboardingIngestionDetails(): JSX.Element {
 	const { notifications } = useNotifications();
 	const [, handleCopyToClipboard] = useCopyToClipboard();

-	const [firstIngestionKey, setFirstIngestionKey] = useState<IngestionKeyProps>(
-		{} as IngestionKeyProps,
-	);
+	const [
+		firstIngestionKey,
+		setFirstIngestionKey,
+	] = useState<GatewaytypesIngestionKeyDTO>({} as GatewaytypesIngestionKeyDTO);

 	const {
 		data: ingestionKeys,
 		isLoading: isIngestionKeysLoading,
 		error,
 		isError,
-	} = useGetAllIngestionsKeys({
-		search: '',
+	} = useGetIngestionKeys({
 		page: 1,
 		per_page: 10,
 	});
@@ -69,8 +72,11 @@ export default function OnboardingIngestionDetails(): JSX.Element {
 	};

 	useEffect(() => {
-		if (ingestionKeys?.data.data && ingestionKeys?.data.data.length > 0) {
-			setFirstIngestionKey(ingestionKeys?.data.data[0]);
+		if (
+			ingestionKeys?.data?.data?.keys &&
+			ingestionKeys?.data.data.keys.length > 0
+		) {
+			setFirstIngestionKey(ingestionKeys?.data.data.keys[0]);
 		}
 	}, [ingestionKeys]);

@@ -80,7 +86,8 @@ export default function OnboardingIngestionDetails(): JSX.Element {
 				<div className="ingestion-endpoint-section-error-container">
 					<Typography.Text className="ingestion-endpoint-section-error-text error">
 						<TriangleAlert size={14} />{' '}
-						{(error as AxiosError)?.message || 'Something went wrong'}
+						{(error as AxiosError<RenderErrorResponseDTO>)?.response?.data?.error
+							?.message || 'Something went wrong'}
 					</Typography.Text>

 					<div className="ingestion-setup-details-links">
@@ -176,7 +183,7 @@ export default function OnboardingIngestionDetails(): JSX.Element {
 										</Typography.Text>

 										<Typography.Text className="ingestion-key-value-copy">
-											{maskKey(firstIngestionKey?.value)}
+											{maskKey(firstIngestionKey?.value || '')}

 											<Copy
 												size={14}
@@ -186,7 +193,7 @@ export default function OnboardingIngestionDetails(): JSX.Element {
 														`${ONBOARDING_V3_ANALYTICS_EVENTS_MAP?.BASE}: ${ONBOARDING_V3_ANALYTICS_EVENTS_MAP?.INGESTION_KEY_COPIED}`,
 														{},
 													);
-													handleCopyKey(firstIngestionKey?.value);
+													handleCopyKey(firstIngestionKey?.value || '');
 												}}
 											/>
 										</Typography.Text>
--- a/frontend/src/container/QueryBuilder/components/QBEntityOptions/QBEntityOptions.styles.scss
+++ b/frontend/src/container/QueryBuilder/components/QBEntityOptions/QBEntityOptions.styles.scss
@@ -40,7 +40,6 @@
 			font-size: 12px;
 			font-style: normal;
 			font-weight: 400;
-			pointer-events: none;
 			// line-height: 18px;

 			color: var(--bg-sakura-400) !important;
--- a/frontend/src/container/QueryBuilder/components/QueryFunctions/QueryFunctions.tsx
+++ b/frontend/src/container/QueryBuilder/components/QueryFunctions/QueryFunctions.tsx
@@ -96,7 +96,6 @@ export default function QueryFunctions({
 	const isDarkMode = useIsDarkMode();

 	const hasAnomalyFunction = functions.some((func) => func.name === 'anomaly');
-	const hasFunctions = functions.length > 0;

 	const handleAddNewFunction = (): void => {
 		const defaultFunctionStruct =
@@ -181,14 +180,10 @@ export default function QueryFunctions({
 		<div
 			className={cx(
 				'query-functions-container',
-				hasFunctions ? 'hasFunctions' : '',
+				functions && functions.length > 0 ? 'hasFunctions' : '',
 			)}
 		>
-			<Button
-				className="periscope-btn function-btn"
-				disabled={hasFunctions}
-				onClick={handleAddNewFunction}
-			>
+			<Button className="periscope-btn function-btn">
 				<FunctionIcon
 					className="function-icon"
 					fillColor={!isDarkMode ? '#0B0C0E' : 'white'}
--- a/frontend/src/container/QueryBuilder/filters/QueryBuilderSearchV2/test/QueryBuilderSearchV2.test.tsx
+++ b/frontend/src/container/QueryBuilder/filters/QueryBuilderSearchV2/test/QueryBuilderSearchV2.test.tsx
@@ -12,7 +12,7 @@ import {
 	initialQueriesMap,
 	initialQueryBuilderFormValues,
 } from 'constants/queryBuilder';
-import { IUseDashboardVariablesReturn } from 'providers/Dashboard/store/dashboardVariables/dashboardVariablesStoreTypes';
+import { IUseDashboardVariablesReturn } from 'hooks/dashboard/useDashboardVariables';
 import { QueryBuilderContext } from 'providers/QueryBuilder';
 import { IDashboardVariable } from 'types/api/dashboard/getAll';
 import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
--- a/frontend/src/hooks/dashboard/test/useGetResolvedText.test.tsx
+++ b/frontend/src/hooks/dashboard/test/useGetResolvedText.test.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { renderHook } from '@testing-library/react';
-import { IDashboardVariables } from 'providers/Dashboard/store/dashboardVariables/dashboardVariablesStoreTypes';
+import { IDashboardVariables } from 'providers/Dashboard/store/dashboardVariablesStore';

 import useGetResolvedText from '../useGetResolvedText';

--- a/frontend/src/hooks/dashboard/useDashboardVariables.ts
+++ b/frontend/src/hooks/dashboard/useDashboardVariables.ts
@@ -1,40 +1,21 @@
-import { useCallback, useRef, useSyncExternalStore } from 'react';
-import { dashboardVariablesStore } from 'providers/Dashboard/store/dashboardVariables/dashboardVariablesStore';
+import { useSyncExternalStore } from 'react';
+
 import {
-	IDashboardVariablesStoreState,
-	IUseDashboardVariablesReturn,
-} from 'providers/Dashboard/store/dashboardVariables/dashboardVariablesStoreTypes';
+	dashboardVariablesStore,
+	IDashboardVariables,
+} from '../../providers/Dashboard/store/dashboardVariablesStore';

-/**
- * 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 interface IUseDashboardVariablesReturn {
+	dashboardVariables: IDashboardVariables;
+}

 export const useDashboardVariables = (): IUseDashboardVariablesReturn => {
-	const dashboardVariables = useDashboardVariablesSelector((s) => s.variables);
+	const dashboardVariables = useSyncExternalStore(
+		dashboardVariablesStore.subscribe,
+		dashboardVariablesStore.getSnapshot,
+	);

-	return { dashboardVariables };
+	return {
+		dashboardVariables,
+	};
 };
--- a/frontend/src/lib/dashbaordVariables/getDashboardVariables.ts
+++ b/frontend/src/lib/dashbaordVariables/getDashboardVariables.ts
@@ -1,5 +1,5 @@
 import getStartEndRangeTime from 'lib/getStartEndRangeTime';
-import { IDashboardVariables } from 'providers/Dashboard/store/dashboardVariables/dashboardVariablesStoreTypes';
+import { IDashboardVariables } from 'providers/Dashboard/store/dashboardVariablesStore';
 import store from 'store';

 export const getDashboardVariables = (
--- a/frontend/src/lib/uPlotV2/components/Legend/Legend.styles.scss
+++ b/frontend/src/lib/uPlotV2/components/Legend/Legend.styles.scss
@@ -1,18 +1,7 @@
-.legend-search-container {
-	flex-shrink: 0;
-	width: 100%;
-	padding-right: 8px;
-
-	.legend-search-input {
-		font-size: 12px;
-	}
-}
-
 .legend-container {
 	display: flex;
 	flex-direction: column;
 	align-items: center;
-	gap: 12px;
 	height: 100%;
 	width: 100%;

@@ -28,38 +17,6 @@
 		height: 100%;
 		width: 100%;

-		.virtuoso-grid-list {
-			min-width: 0;
-			display: grid;
-			grid-auto-flow: row;
-			grid-template-columns: repeat(
-				auto-fill,
-				minmax(var(--legend-average-width, 240px), 1fr)
-			);
-			row-gap: 4px;
-			column-gap: 12px;
-		}
-
-		.virtuoso-grid-item {
-			min-width: 0;
-		}
-
-		&.legend-virtuoso-container-right {
-			.virtuoso-grid-list {
-				grid-template-columns: 1fr;
-			}
-		}
-
-		&.legend-virtuoso-container-single-row {
-			.virtuoso-grid-list {
-				grid-template-columns: repeat(
-					auto-fit,
-					minmax(var(--legend-average-width, 240px), max-content)
-				);
-				justify-content: center;
-			}
-		}
-
 		&::-webkit-scrollbar {
 			width: 0.3rem;
 		}
@@ -101,15 +58,9 @@
 	align-items: center;
 	gap: 6px;
 	padding: 4px 8px;
-	max-width: 100%;
-	overflow: hidden;
 	border-radius: 4px;
 	cursor: pointer;

-	&.legend-item-right {
-		width: 100%;
-	}
-
 	&.legend-item-off {
 		opacity: 0.3;
 		text-decoration: line-through;
--- a/frontend/src/lib/uPlotV2/components/Legend/Legend.tsx
+++ b/frontend/src/lib/uPlotV2/components/Legend/Legend.tsx
@@ -1,21 +1,23 @@
-import { useCallback, useMemo, useRef, useState } from 'react';
-import { VirtuosoGrid } from 'react-virtuoso';
-import { Input, Tooltip as AntdTooltip } from 'antd';
+import { useCallback, useMemo, useRef } from 'react';
+import { Virtuoso } from 'react-virtuoso';
+import { Tooltip as AntdTooltip } from 'antd';
 import cx from 'classnames';
 import { LegendItem } from 'lib/uPlotV2/config/types';
 import useLegendsSync from 'lib/uPlotV2/hooks/useLegendsSync';
+import { LegendPosition } from 'types/api/dashboard/getAll';

-import { LegendPosition, LegendProps } from '../types';
+import { LegendProps } from '../types';
 import { useLegendActions } from './useLegendActions';

 import './Legend.styles.scss';

-export const MAX_LEGEND_WIDTH = 240;
+export const MAX_LEGEND_WIDTH = 320;
+const LEGENDS_PER_SET_DEFAULT = 5;

 export default function Legend({
 	position = LegendPosition.BOTTOM,
 	config,
-	averageLegendWidth = MAX_LEGEND_WIDTH,
+	legendsPerSet = LEGENDS_PER_SET_DEFAULT,
 }: LegendProps): JSX.Element {
 	const {
 		legendItemsMap,
@@ -31,54 +33,54 @@ export default function Legend({
 		focusedSeriesIndex,
 	});
 	const legendContainerRef = useRef<HTMLDivElement | null>(null);
-	const [legendSearchQuery, setLegendSearchQuery] = useState('');

-	const legendItems = useMemo(() => Object.values(legendItemsMap), [
-		legendItemsMap,
-	]);
+	// Chunk legend items into rows of LEGENDS_PER_ROW items each
+	const legendRows = useMemo(() => {
+		const legendItems = Object.values(legendItemsMap);

-	const isSingleRow = useMemo(() => {
-		if (!legendContainerRef.current || position !== LegendPosition.BOTTOM) {
-			return false;
-		}
-		const containerWidth = legendContainerRef.current.clientWidth;
+		return legendItems.reduce((acc: LegendItem[][], curr, i) => {
+			if (i % legendsPerSet === 0) {
+				acc.push([]);
+			}
+			acc[acc.length - 1].push(curr);
+			return acc;
+		}, [] as LegendItem[][]);
+	}, [legendItemsMap, legendsPerSet]);

-		const totalLegendWidth = legendItems.length * (averageLegendWidth + 16);
-		const totalRows = Math.ceil(totalLegendWidth / containerWidth);
-		return totalRows <= 1;
-	}, [averageLegendWidth, legendContainerRef, legendItems.length, position]);
-
-	const visibleLegendItems = useMemo(() => {
-		if (position !== LegendPosition.RIGHT || !legendSearchQuery.trim()) {
-			return legendItems;
-		}
-
-		const query = legendSearchQuery.trim().toLowerCase();
-		return legendItems.filter((item) =>
-			item.label?.toLowerCase().includes(query),
-		);
-	}, [position, legendSearchQuery, legendItems]);
-
-	const renderLegendItem = useCallback(
-		(item: LegendItem): JSX.Element => (
-			<AntdTooltip key={item.seriesIndex} title={item.label}>
-				<div
-					data-legend-item-id={item.seriesIndex}
-					className={cx('legend-item', `legend-item-${position.toLowerCase()}`, {
-						'legend-item-off': !item.show,
-						'legend-item-focused': focusedSeriesIndex === item.seriesIndex,
-					})}
-				>
-					<div
-						className="legend-marker"
-						style={{ borderColor: String(item.color) }}
-						data-is-legend-marker={true}
-					/>
-					<span className="legend-label">{item.label}</span>
-				</div>
-			</AntdTooltip>
+	const renderLegendRow = useCallback(
+		(rowIndex: number, row: LegendItem[]): JSX.Element => (
+			<div
+				key={rowIndex}
+				className={cx(
+					'legend-row',
+					`legend-row-${position.toLowerCase()}`,
+					legendRows.length === 1 && position === LegendPosition.BOTTOM
+						? 'legend-single-row'
+						: '',
+				)}
+			>
+				{row.map((item) => (
+					<AntdTooltip key={item.seriesIndex} title={item.label}>
+						<div
+							data-legend-item-id={item.seriesIndex}
+							className={cx('legend-item', {
+								'legend-item-off': !item.show,
+								'legend-item-focused': focusedSeriesIndex === item.seriesIndex,
+							})}
+							style={{ maxWidth: `min(${MAX_LEGEND_WIDTH}px, 100%)` }}
+						>
+							<div
+								className="legend-marker"
+								style={{ borderColor: String(item.color) }}
+								data-is-legend-marker={true}
+							/>
+							<span className="legend-label">{item.label}</span>
+						</div>
+					</AntdTooltip>
+				))}
+			</div>
 		),
-		[focusedSeriesIndex, position],
+		[focusedSeriesIndex, position, legendRows],
 	);

 	return (
@@ -88,29 +90,11 @@ export default function Legend({
 			onClick={onLegendClick}
 			onMouseMove={onLegendMouseMove}
 			onMouseLeave={onLegendMouseLeave}
-			style={{
-				['--legend-average-width' as string]: `${averageLegendWidth + 16}px`, // 16px is the marker width
-			}}
 		>
-			{position === LegendPosition.RIGHT && (
-				<div className="legend-search-container">
-					<Input
-						allowClear
-						placeholder="Search..."
-						value={legendSearchQuery}
-						onChange={(e): void => setLegendSearchQuery(e.target.value)}
-						className="legend-search-input"
-					/>
-				</div>
-			)}
-			<VirtuosoGrid
-				className={cx(
-					'legend-virtuoso-container',
-					`legend-virtuoso-container-${position.toLowerCase()}`,
-					{ 'legend-virtuoso-container-single-row': isSingleRow },
-				)}
-				data={visibleLegendItems}
-				itemContent={(_, item): JSX.Element => renderLegendItem(item)}
+			<Virtuoso
+				className="legend-virtuoso-container"
+				data={legendRows}
+				itemContent={(index, row): JSX.Element => renderLegendRow(index, row)}
 			/>
 		</div>
 	);
--- a/frontend/src/lib/uPlotV2/components/Tooltip/Tooltip.styles.scss
+++ b/frontend/src/lib/uPlotV2/components/Tooltip/Tooltip.styles.scss
@@ -5,7 +5,7 @@
 	-webkit-font-smoothing: antialiased;
 	color: var(--bg-vanilla-100);
 	border-radius: 6px;
-	padding: 1rem 0.5rem 0.5rem 1rem;
+	padding: 1rem 1rem 0.5rem 1rem;
 	border: 1px solid var(--bg-ink-100);
 	display: flex;
 	flex-direction: column;
@@ -15,12 +15,6 @@
 		background: var(--bg-vanilla-100);
 		color: var(--bg-ink-500);
 		border: 1px solid var(--bg-vanilla-300);
-
-		.uplot-tooltip-list {
-			&::-webkit-scrollbar-thumb {
-				background: var(--bg-vanilla-400);
-			}
-		}
 	}

 	.uplot-tooltip-header {
@@ -28,18 +22,18 @@
 		font-weight: 500;
 	}

-	.uplot-tooltip-list {
-		&::-webkit-scrollbar {
-			width: 0.3rem;
-		}
-
-		&::-webkit-scrollbar-track {
-			background: transparent;
-		}
-
-		&::-webkit-scrollbar-thumb {
-			background: var(--bg-slate-100);
-			border-radius: 0.5rem;
+	.uplot-tooltip-list-container {
+		height: 100%;
+		.uplot-tooltip-list {
+			&::-webkit-scrollbar {
+				width: 0.3rem;
+			}
+			&::-webkit-scrollbar-corner {
+				background: transparent;
+			}
+			&::-webkit-scrollbar-thumb {
+				background: rgb(136, 136, 136);
+			}
 		}
 	}

--- a/frontend/src/lib/uPlotV2/components/types.ts
+++ b/frontend/src/lib/uPlotV2/components/types.ts
@@ -75,7 +75,7 @@ export interface LegendConfig {
 export interface LegendProps {
 	position?: LegendPosition;
 	config: UPlotConfigBuilder;
-	averageLegendWidth?: number;
+	legendsPerSet?: number;
 }

 export interface TooltipContentItem {
--- a/frontend/src/providers/Dashboard/Dashboard.tsx
+++ b/frontend/src/providers/Dashboard/Dashboard.tsx
@@ -45,11 +45,8 @@ import APIError from 'types/api/error';
 import { GlobalReducer } from 'types/reducer/globalTime';
 import { v4 as generateUUID } from 'uuid';

-import { useDashboardVariablesSelector } from '../../hooks/dashboard/useDashboardVariables';
-import {
-	setDashboardVariablesStore,
-	updateDashboardVariablesStore,
-} from './store/dashboardVariables/dashboardVariablesStore';
+import { useDashboardVariables } from '../../hooks/dashboard/useDashboardVariables';
+import { setDashboardVariablesStore } from './store/dashboardVariablesStore';
 import {
 	DashboardSortOrder,
 	IDashboardContext,
@@ -201,23 +198,14 @@ export function DashboardProvider({
 			: isDashboardWidgetPage?.params.dashboardId) || '';

 	const [selectedDashboard, setSelectedDashboard] = useState<Dashboard>();
-	const dashboardVariables = useDashboardVariablesSelector((s) => s.variables);
-	const savedDashboardId = useDashboardVariablesSelector((s) => s.dashboardId);
+	const dashboardVariables = useDashboardVariables();

 	useEffect(() => {
 		const existingVariables = dashboardVariables;
 		const updatedVariables = selectedDashboard?.data.variables || {};

-		if (savedDashboardId !== dashboardId) {
-			setDashboardVariablesStore({
-				dashboardId,
-				variables: updatedVariables,
-			});
-		} else if (!isEqual(existingVariables, updatedVariables)) {
-			updateDashboardVariablesStore({
-				dashboardId,
-				variables: updatedVariables,
-			});
+		if (!isEqual(existingVariables, updatedVariables)) {
+			setDashboardVariablesStore(updatedVariables);
 		}
 	}, [selectedDashboard]);

--- a/frontend/src/providers/Dashboard/store/dashboardVariables/dashboardVariablesStore.ts
+++ b/frontend/src/providers/Dashboard/store/dashboardVariables/dashboardVariablesStore.ts
@@ -1,57 +0,0 @@
-import createStore from '../store';
-import { IDashboardVariablesStoreState } from './dashboardVariablesStoreTypes';
-import {
-	computeDerivedValues,
-	updateDerivedValues,
-} from './dashboardVariablesStoreUtils';
-
-const initialState: IDashboardVariablesStoreState = {
-	dashboardId: '',
-	variables: {},
-	sortedVariablesArray: [],
-	dependencyData: null,
-};
-
-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);
-	});
-}
--- a/frontend/src/providers/Dashboard/store/dashboardVariables/dashboardVariablesStoreTypes.ts
+++ b/frontend/src/providers/Dashboard/store/dashboardVariables/dashboardVariablesStoreTypes.ts
@@ -1,31 +0,0 @@
-import { IDashboardVariable } from 'types/api/dashboard/getAll';
-
-export type VariableGraph = Record<string, string[]>;
-
-export interface IDependencyData {
-	order: string[];
-	graph: VariableGraph;
-	parentDependencyGraph: 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;
-}
-
-export interface IUseDashboardVariablesReturn {
-	dashboardVariables: IDashboardVariablesStoreState['variables'];
-}
--- a/frontend/src/providers/Dashboard/store/dashboardVariables/dashboardVariablesStoreUtils.ts
+++ b/frontend/src/providers/Dashboard/store/dashboardVariables/dashboardVariablesStoreUtils.ts
@@ -1,89 +0,0 @@
-import {
-	buildDependencies,
-	buildDependencyGraph,
-} from 'container/DashboardContainer/DashboardVariablesSelection/util';
-import { IDashboardVariable } from 'types/api/dashboard/getAll';
-
-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 - b.order);
-
-	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,
-		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,
-		hasCycle,
-		cycleNodes,
-	};
-}
-
-/**
- * Compute derived values from variables
- * This is a composition of buildSortedVariablesArray and buildDependencyData
- */
-export function computeDerivedValues(
-	variables: IDashboardVariablesStoreState['variables'],
-): Pick<
-	IDashboardVariablesStoreState,
-	'sortedVariablesArray' | 'dependencyData'
-> {
-	const sortedVariablesArray = buildSortedVariablesArray(variables);
-	const dependencyData = buildDependencyData(sortedVariablesArray);
-
-	return { sortedVariablesArray, dependencyData };
-}
-
-/**
- * Update derived values in the store state (for use with immer)
- */
-export function updateDerivedValues(
-	draft: IDashboardVariablesStoreState,
-): void {
-	draft.sortedVariablesArray = buildSortedVariablesArray(draft.variables);
-	draft.dependencyData = buildDependencyData(draft.sortedVariablesArray);
-}
--- a/frontend/src/providers/Dashboard/store/dashboardVariablesStore.ts
+++ b/frontend/src/providers/Dashboard/store/dashboardVariablesStore.ts
@@ -0,0 +1,14 @@
+import { IDashboardVariable } from 'types/api/dashboard/getAll';
+
+import createStore from './store';
+
+// export type IDashboardVariables = DashboardData['variables'];
+export type IDashboardVariables = Record<string, IDashboardVariable>;
+
+export const dashboardVariablesStore = createStore<IDashboardVariables>({});
+
+export function setDashboardVariablesStore(
+	variables: Partial<IDashboardVariables>,
+): void {
+	dashboardVariablesStore.set(() => ({ ...variables }));
+}
--- a/pkg/alertmanager/alertmanagerserver/dispatcher.go
+++ b/pkg/alertmanager/alertmanagerserver/dispatcher.go
@@ -569,8 +569,8 @@ func (d *Dispatcher) getOrCreateRoute(receiver string) *dispatch.Route {
 	route := &dispatch.Route{
 		RouteOpts: dispatch.RouteOpts{
 			Receiver:      receiver,
-			GroupWait:     d.route.RouteOpts.GroupWait,
-			GroupInterval: d.route.RouteOpts.GroupInterval,
+			GroupWait:     30 * time.Second,
+			GroupInterval: 5 * time.Minute,
 			GroupByAll:    false,
 		},
 		Matchers: labels.Matchers{{
--- a/pkg/alertmanager/alertmanagerserver/distpatcher_test.go
+++ b/pkg/alertmanager/alertmanagerserver/distpatcher_test.go
@@ -1183,8 +1183,8 @@ func TestDispatcherRaceOnFirstAlertNotDeliveredWhenGroupWaitIsZero(t *testing.T)

 route:
  group_by: ['alertname']
-  group_wait: 30s
-  group_interval: 5m
+  group_wait: 1h
+  group_interval: 1h
  receiver: 'slack'`
 	conf, err := config.Load(confData)
 	if err != nil {
@@ -1308,95 +1308,3 @@ func TestDispatcher_DoMaintenance(t *testing.T) {
 	require.False(t, isMuted)
 	require.Empty(t, mutedBy)
 }
-
-func TestDispatcher_GetOrCreateRoute(t *testing.T) {
-	testCases := []struct {
-		name                  string
-		confData              string
-		expectedReceiver      string
-		expectedGroupWait     time.Duration
-		expectedGroupInterval time.Duration
-		expectedGroupByAll    bool
-		expectedMatchersLen   int
-		expectedMatcherName   string
-		expectedMatcherValue  string
-	}{
-		{
-			name: "create route for slack receiver",
-			confData: `receivers:
- name: 'slack'
- name: 'email'
- name: 'pagerduty'
-
-route:
-  group_by: ['alertname']
-  group_wait: 1m
-  group_interval: 1m
-  receiver: 'slack'`,
-			expectedReceiver:      "slack",
-			expectedGroupWait:     1 * time.Minute,
-			expectedGroupInterval: 1 * time.Minute,
-			expectedGroupByAll:    false,
-			expectedMatchersLen:   1,
-			expectedMatcherName:   "__receiver__",
-			expectedMatcherValue:  "slack",
-		},
-		{
-			name: "no group_wait and group_interval use default values",
-			confData: `receivers:
- name: 'slack'
-
-route:
-  group_by: ['alertname']
-  receiver: 'slack'`,
-			expectedReceiver:      "slack",
-			expectedGroupWait:     30 * time.Second,
-			expectedGroupInterval: 5 * time.Minute,
-			expectedGroupByAll:    false,
-			expectedMatchersLen:   1,
-			expectedMatcherName:   "__receiver__",
-			expectedMatcherValue:  "slack",
-		},
-	}
-
-	for _, tc := range testCases {
-		t.Run(tc.name, func(t *testing.T) {
-			conf, err := config.Load(tc.confData)
-			if err != nil {
-				t.Fatal(err)
-			}
-
-			providerSettings := createTestProviderSettings()
-			logger := providerSettings.Logger
-			route := dispatch.NewRoute(conf.Route, nil)
-			marker := alertmanagertypes.NewMarker(prometheus.NewRegistry())
-			alerts, err := mem.NewAlerts(context.Background(), marker, time.Hour, nil, logger, nil)
-			if err != nil {
-				t.Fatal(err)
-			}
-			defer alerts.Close()
-
-			timeout := func(d time.Duration) time.Duration { return time.Duration(0) }
-			recorder := &recordStage{alerts: make(map[string]map[model.Fingerprint]*alertmanagertypes.Alert)}
-			metrics := NewDispatcherMetrics(false, prometheus.NewRegistry())
-			store := nfroutingstoretest.NewMockSQLRouteStore()
-			store.MatchExpectationsInOrder(false)
-			nfManager, err := rulebasednotification.New(context.Background(), providerSettings, nfmanager.Config{}, store)
-			if err != nil {
-				t.Fatal(err)
-			}
-			d := NewDispatcher(alerts, route, recorder, marker, timeout, nil, logger, metrics, nfManager, "test-org")
-			// setup the dispatcher for tests
-			d.receiverRoutes = map[string]*dispatch.Route{}
-
-			newRoute := d.getOrCreateRoute(tc.expectedReceiver)
-			require.Equal(t, tc.expectedReceiver, newRoute.RouteOpts.Receiver)
-			require.Equal(t, tc.expectedGroupWait, newRoute.RouteOpts.GroupWait)
-			require.Equal(t, tc.expectedGroupInterval, newRoute.RouteOpts.GroupInterval)
-			require.Equal(t, tc.expectedGroupByAll, newRoute.RouteOpts.GroupByAll)
-			require.Equal(t, tc.expectedMatchersLen, len(newRoute.Matchers))
-			require.Equal(t, tc.expectedMatcherName, newRoute.Matchers[0].Name)
-			require.Equal(t, tc.expectedMatcherValue, newRoute.Matchers[0].Value)
-		})
-	}
-}