Merge branch 'main' into mute-rules

fix(alerts): give mute drawer date picker a solid popup background
The DatePicker popup is portaled to <body>, so without a panel-container background the time-column cells were transparent and the drawer content bled through. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
2026-06-01 23:00:29 +01:00 · 2026-05-29 06:53:51 +05:30 · 2026-05-29 06:49:35 +05:30 · 2026-05-29 06:40:06 +05:30 · 2026-05-29 06:29:05 +05:30 · 2026-05-29 06:16:23 +05:30
207 changed files with 2180 additions and 8998 deletions
--- a/deploy/docker/docker-compose.override.yaml
+++ b/deploy/docker/docker-compose.override.yaml
@@ -1,6 +0,0 @@
-services:
- signoz:
-  environment:
-   # Enable dashboard v2 (maps to flagger.config.boolean.use_dashboard_v2: true)
-   # Double underscore is the key separator; single underscore stays part of the key.
-   - SIGNOZ_FLAGGER__CONFIG__BOOLEAN__USE_DASHBOARD_V2=true
--- a/docs/api/openapi.yml
+++ b/docs/api/openapi.yml
@@ -5945,6 +5945,22 @@ components:
      - start
      - end
      type: object
+    RuletypesActiveMute:
+      properties:
+        description:
+          type: string
+        end:
+          format: date-time
+          nullable: true
+          type: string
+        id:
+          type: string
+        name:
+          type: string
+        start:
+          format: date-time
+          type: string
+      type: object
    RuletypesAlertCompositeQuery:
      properties:
        panelType:
@@ -6226,6 +6242,11 @@ components:
          additionalProperties:
            type: string
          type: object
+        mutes:
+          items:
+            $ref: '#/components/schemas/RuletypesActiveMute'
+          nullable: true
+          type: array
        notificationSettings:
          $ref: '#/components/schemas/RuletypesNotificationSettings'
        preferredChannels:
--- a/frontend/src/api/generated/services/dashboard/index.ts
+++ b/frontend/src/api/generated/services/dashboard/index.ts
@@ -21,7 +21,6 @@ import type {
 	CreateDashboardV2201,
 	CreatePublicDashboard201,
 	CreatePublicDashboardPathParameters,
-	DashboardtypesJSONPatchDocumentDTO,
 	DashboardtypesPostableDashboardV2DTO,
 	DashboardtypesPostablePublicDashboardDTO,
 	DashboardtypesUpdatablePublicDashboardDTO,
@@ -34,17 +33,7 @@ import type {
 	GetPublicDashboardPathParameters,
 	GetPublicDashboardWidgetQueryRange200,
 	GetPublicDashboardWidgetQueryRangePathParameters,
-	ListDashboardsV2200,
-	ListDashboardsV2Params,
-	LockDashboardV2PathParameters,
-	PatchDashboardV2200,
-	PatchDashboardV2PathParameters,
-	PinDashboardV2PathParameters,
 	RenderErrorResponseDTO,
-	UnlockDashboardV2PathParameters,
-	UnpinDashboardV2PathParameters,
-	UpdateDashboardV2200,
-	UpdateDashboardV2PathParameters,
 	UpdatePublicDashboardPathParameters,
 } from '../sigNoz.schemas';

@@ -644,103 +633,6 @@ export const invalidateGetPublicDashboardWidgetQueryRange = async (
 	return queryClient;
 };

-/**
- * Returns a page of v2-shape dashboards for the calling user's org. Supports a filter DSL (`query`), sort (`updated_at`/`created_at`/`title`), order (`asc`/`desc`), and offset-based pagination (`limit`/`offset`). Pinned dashboards float to the top of each page.
- * @summary List dashboards (v2)
- */
-export const listDashboardsV2 = (
-	params?: ListDashboardsV2Params,
-	signal?: AbortSignal,
-) => {
-	return GeneratedAPIInstance<ListDashboardsV2200>({
-		url: `/api/v2/dashboards`,
-		method: 'GET',
-		params,
-		signal,
-	});
-};
-
-export const getListDashboardsV2QueryKey = (
-	params?: ListDashboardsV2Params,
-) => {
-	return [`/api/v2/dashboards`, ...(params ? [params] : [])] as const;
-};
-
-export const getListDashboardsV2QueryOptions = <
-	TData = Awaited<ReturnType<typeof listDashboardsV2>>,
-	TError = ErrorType<RenderErrorResponseDTO>,
->(
-	params?: ListDashboardsV2Params,
-	options?: {
-		query?: UseQueryOptions<
-			Awaited<ReturnType<typeof listDashboardsV2>>,
-			TError,
-			TData
-		>;
-	},
-) => {
-	const { query: queryOptions } = options ?? {};
-
-	const queryKey = queryOptions?.queryKey ?? getListDashboardsV2QueryKey(params);
-
-	const queryFn: QueryFunction<Awaited<ReturnType<typeof listDashboardsV2>>> = ({
-		signal,
-	}) => listDashboardsV2(params, signal);
-
-	return { queryKey, queryFn, ...queryOptions } as UseQueryOptions<
-		Awaited<ReturnType<typeof listDashboardsV2>>,
-		TError,
-		TData
-	> & { queryKey: QueryKey };
-};
-
-export type ListDashboardsV2QueryResult = NonNullable<
-	Awaited<ReturnType<typeof listDashboardsV2>>
->;
-export type ListDashboardsV2QueryError = ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary List dashboards (v2)
- */
-
-export function useListDashboardsV2<
-	TData = Awaited<ReturnType<typeof listDashboardsV2>>,
-	TError = ErrorType<RenderErrorResponseDTO>,
->(
-	params?: ListDashboardsV2Params,
-	options?: {
-		query?: UseQueryOptions<
-			Awaited<ReturnType<typeof listDashboardsV2>>,
-			TError,
-			TData
-		>;
-	},
-): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
-	const queryOptions = getListDashboardsV2QueryOptions(params, options);
-
-	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
-		queryKey: QueryKey;
-	};
-
-	return { ...query, queryKey: queryOptions.queryKey };
-}
-
-/**
- * @summary List dashboards (v2)
- */
-export const invalidateListDashboardsV2 = async (
-	queryClient: QueryClient,
-	params?: ListDashboardsV2Params,
-	options?: InvalidateOptions,
-): Promise<QueryClient> => {
-	await queryClient.invalidateQueries(
-		{ queryKey: getListDashboardsV2QueryKey(params) },
-		options,
-	);
-
-	return queryClient;
-};
-
 /**
 * This endpoint creates a dashboard in the v2 format that follows Perses spec.
 * @summary Create dashboard (v2)
@@ -924,518 +816,3 @@ export const invalidateGetDashboardV2 = async (

 	return queryClient;
 };
-
-/**
- * This endpoint applies an RFC 6902 JSON Patch to a v2-shape dashboard. The patch is applied against the postable view of the dashboard (metadata, data, tags), so individual panels, queries, variables, layouts, or tags can be updated without re-sending the rest of the dashboard. Locked dashboards are rejected.
- * @summary Patch dashboard (v2)
- */
-export const patchDashboardV2 = (
-	{ id }: PatchDashboardV2PathParameters,
-	dashboardtypesJSONPatchDocumentDTONull?: BodyType<DashboardtypesJSONPatchDocumentDTO | null> | null,
-	signal?: AbortSignal,
-) => {
-	return GeneratedAPIInstance<PatchDashboardV2200>({
-		url: `/api/v2/dashboards/${id}`,
-		method: 'PATCH',
-		headers: { 'Content-Type': 'application/json' },
-		data: dashboardtypesJSONPatchDocumentDTONull,
-		signal,
-	});
-};
-
-export const getPatchDashboardV2MutationOptions = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown,
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof patchDashboardV2>>,
-		TError,
-		{
-			pathParams: PatchDashboardV2PathParameters;
-			data?: BodyType<DashboardtypesJSONPatchDocumentDTO | null>;
-		},
-		TContext
-	>;
-}): UseMutationOptions<
-	Awaited<ReturnType<typeof patchDashboardV2>>,
-	TError,
-	{
-		pathParams: PatchDashboardV2PathParameters;
-		data?: BodyType<DashboardtypesJSONPatchDocumentDTO | null>;
-	},
-	TContext
-> => {
-	const mutationKey = ['patchDashboardV2'];
-	const { mutation: mutationOptions } = options
-		? options.mutation &&
-			'mutationKey' in options.mutation &&
-			options.mutation.mutationKey
-			? options
-			: { ...options, mutation: { ...options.mutation, mutationKey } }
-		: { mutation: { mutationKey } };
-
-	const mutationFn: MutationFunction<
-		Awaited<ReturnType<typeof patchDashboardV2>>,
-		{
-			pathParams: PatchDashboardV2PathParameters;
-			data?: BodyType<DashboardtypesJSONPatchDocumentDTO | null>;
-		}
-	> = (props) => {
-		const { pathParams, data } = props ?? {};
-
-		return patchDashboardV2(pathParams, data);
-	};
-
-	return { mutationFn, ...mutationOptions };
-};
-
-export type PatchDashboardV2MutationResult = NonNullable<
-	Awaited<ReturnType<typeof patchDashboardV2>>
->;
-export type PatchDashboardV2MutationBody =
-	| BodyType<DashboardtypesJSONPatchDocumentDTO | null>
-	| undefined;
-export type PatchDashboardV2MutationError = ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary Patch dashboard (v2)
- */
-export const usePatchDashboardV2 = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown,
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof patchDashboardV2>>,
-		TError,
-		{
-			pathParams: PatchDashboardV2PathParameters;
-			data?: BodyType<DashboardtypesJSONPatchDocumentDTO | null>;
-		},
-		TContext
-	>;
-}): UseMutationResult<
-	Awaited<ReturnType<typeof patchDashboardV2>>,
-	TError,
-	{
-		pathParams: PatchDashboardV2PathParameters;
-		data?: BodyType<DashboardtypesJSONPatchDocumentDTO | null>;
-	},
-	TContext
-> => {
-	return useMutation(getPatchDashboardV2MutationOptions(options));
-};
-/**
- * This endpoint updates a v2-shape dashboard's metadata, data, and tag set. Locked dashboards are rejected.
- * @summary Update dashboard (v2)
- */
-export const updateDashboardV2 = (
-	{ id }: UpdateDashboardV2PathParameters,
-	dashboardtypesPostableDashboardV2DTO?: BodyType<DashboardtypesPostableDashboardV2DTO>,
-	signal?: AbortSignal,
-) => {
-	return GeneratedAPIInstance<UpdateDashboardV2200>({
-		url: `/api/v2/dashboards/${id}`,
-		method: 'PUT',
-		headers: { 'Content-Type': 'application/json' },
-		data: dashboardtypesPostableDashboardV2DTO,
-		signal,
-	});
-};
-
-export const getUpdateDashboardV2MutationOptions = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown,
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof updateDashboardV2>>,
-		TError,
-		{
-			pathParams: UpdateDashboardV2PathParameters;
-			data?: BodyType<DashboardtypesPostableDashboardV2DTO>;
-		},
-		TContext
-	>;
-}): UseMutationOptions<
-	Awaited<ReturnType<typeof updateDashboardV2>>,
-	TError,
-	{
-		pathParams: UpdateDashboardV2PathParameters;
-		data?: BodyType<DashboardtypesPostableDashboardV2DTO>;
-	},
-	TContext
-> => {
-	const mutationKey = ['updateDashboardV2'];
-	const { mutation: mutationOptions } = options
-		? options.mutation &&
-			'mutationKey' in options.mutation &&
-			options.mutation.mutationKey
-			? options
-			: { ...options, mutation: { ...options.mutation, mutationKey } }
-		: { mutation: { mutationKey } };
-
-	const mutationFn: MutationFunction<
-		Awaited<ReturnType<typeof updateDashboardV2>>,
-		{
-			pathParams: UpdateDashboardV2PathParameters;
-			data?: BodyType<DashboardtypesPostableDashboardV2DTO>;
-		}
-	> = (props) => {
-		const { pathParams, data } = props ?? {};
-
-		return updateDashboardV2(pathParams, data);
-	};
-
-	return { mutationFn, ...mutationOptions };
-};
-
-export type UpdateDashboardV2MutationResult = NonNullable<
-	Awaited<ReturnType<typeof updateDashboardV2>>
->;
-export type UpdateDashboardV2MutationBody =
-	| BodyType<DashboardtypesPostableDashboardV2DTO>
-	| undefined;
-export type UpdateDashboardV2MutationError = ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary Update dashboard (v2)
- */
-export const useUpdateDashboardV2 = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown,
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof updateDashboardV2>>,
-		TError,
-		{
-			pathParams: UpdateDashboardV2PathParameters;
-			data?: BodyType<DashboardtypesPostableDashboardV2DTO>;
-		},
-		TContext
-	>;
-}): UseMutationResult<
-	Awaited<ReturnType<typeof updateDashboardV2>>,
-	TError,
-	{
-		pathParams: UpdateDashboardV2PathParameters;
-		data?: BodyType<DashboardtypesPostableDashboardV2DTO>;
-	},
-	TContext
-> => {
-	return useMutation(getUpdateDashboardV2MutationOptions(options));
-};
-/**
- * This endpoint unlocks a v2-shape dashboard. Only the dashboard's creator or an org admin may lock or unlock.
- * @summary Unlock dashboard (v2)
- */
-export const unlockDashboardV2 = (
-	{ id }: UnlockDashboardV2PathParameters,
-	signal?: AbortSignal,
-) => {
-	return GeneratedAPIInstance<string>({
-		url: `/api/v2/dashboards/${id}/lock`,
-		method: 'DELETE',
-		signal,
-	});
-};
-
-export const getUnlockDashboardV2MutationOptions = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown,
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof unlockDashboardV2>>,
-		TError,
-		{ pathParams: UnlockDashboardV2PathParameters },
-		TContext
-	>;
-}): UseMutationOptions<
-	Awaited<ReturnType<typeof unlockDashboardV2>>,
-	TError,
-	{ pathParams: UnlockDashboardV2PathParameters },
-	TContext
-> => {
-	const mutationKey = ['unlockDashboardV2'];
-	const { mutation: mutationOptions } = options
-		? options.mutation &&
-			'mutationKey' in options.mutation &&
-			options.mutation.mutationKey
-			? options
-			: { ...options, mutation: { ...options.mutation, mutationKey } }
-		: { mutation: { mutationKey } };
-
-	const mutationFn: MutationFunction<
-		Awaited<ReturnType<typeof unlockDashboardV2>>,
-		{ pathParams: UnlockDashboardV2PathParameters }
-	> = (props) => {
-		const { pathParams } = props ?? {};
-
-		return unlockDashboardV2(pathParams);
-	};
-
-	return { mutationFn, ...mutationOptions };
-};
-
-export type UnlockDashboardV2MutationResult = NonNullable<
-	Awaited<ReturnType<typeof unlockDashboardV2>>
->;
-
-export type UnlockDashboardV2MutationError = ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary Unlock dashboard (v2)
- */
-export const useUnlockDashboardV2 = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown,
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof unlockDashboardV2>>,
-		TError,
-		{ pathParams: UnlockDashboardV2PathParameters },
-		TContext
-	>;
-}): UseMutationResult<
-	Awaited<ReturnType<typeof unlockDashboardV2>>,
-	TError,
-	{ pathParams: UnlockDashboardV2PathParameters },
-	TContext
-> => {
-	return useMutation(getUnlockDashboardV2MutationOptions(options));
-};
-/**
- * This endpoint locks a v2-shape dashboard. Only the dashboard's creator or an org admin may lock or unlock.
- * @summary Lock dashboard (v2)
- */
-export const lockDashboardV2 = (
-	{ id }: LockDashboardV2PathParameters,
-	signal?: AbortSignal,
-) => {
-	return GeneratedAPIInstance<string>({
-		url: `/api/v2/dashboards/${id}/lock`,
-		method: 'PUT',
-		signal,
-	});
-};
-
-export const getLockDashboardV2MutationOptions = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown,
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof lockDashboardV2>>,
-		TError,
-		{ pathParams: LockDashboardV2PathParameters },
-		TContext
-	>;
-}): UseMutationOptions<
-	Awaited<ReturnType<typeof lockDashboardV2>>,
-	TError,
-	{ pathParams: LockDashboardV2PathParameters },
-	TContext
-> => {
-	const mutationKey = ['lockDashboardV2'];
-	const { mutation: mutationOptions } = options
-		? options.mutation &&
-			'mutationKey' in options.mutation &&
-			options.mutation.mutationKey
-			? options
-			: { ...options, mutation: { ...options.mutation, mutationKey } }
-		: { mutation: { mutationKey } };
-
-	const mutationFn: MutationFunction<
-		Awaited<ReturnType<typeof lockDashboardV2>>,
-		{ pathParams: LockDashboardV2PathParameters }
-	> = (props) => {
-		const { pathParams } = props ?? {};
-
-		return lockDashboardV2(pathParams);
-	};
-
-	return { mutationFn, ...mutationOptions };
-};
-
-export type LockDashboardV2MutationResult = NonNullable<
-	Awaited<ReturnType<typeof lockDashboardV2>>
->;
-
-export type LockDashboardV2MutationError = ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary Lock dashboard (v2)
- */
-export const useLockDashboardV2 = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown,
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof lockDashboardV2>>,
-		TError,
-		{ pathParams: LockDashboardV2PathParameters },
-		TContext
-	>;
-}): UseMutationResult<
-	Awaited<ReturnType<typeof lockDashboardV2>>,
-	TError,
-	{ pathParams: LockDashboardV2PathParameters },
-	TContext
-> => {
-	return useMutation(getLockDashboardV2MutationOptions(options));
-};
-/**
- * Removes the pin for the calling user. Idempotent — unpinning a dashboard that wasn't pinned still returns 204.
- * @summary Unpin a dashboard for the current user (v2)
- */
-export const unpinDashboardV2 = (
-	{ id }: UnpinDashboardV2PathParameters,
-	signal?: AbortSignal,
-) => {
-	return GeneratedAPIInstance<string>({
-		url: `/api/v2/dashboards/${id}/pins/me`,
-		method: 'DELETE',
-		signal,
-	});
-};
-
-export const getUnpinDashboardV2MutationOptions = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown,
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof unpinDashboardV2>>,
-		TError,
-		{ pathParams: UnpinDashboardV2PathParameters },
-		TContext
-	>;
-}): UseMutationOptions<
-	Awaited<ReturnType<typeof unpinDashboardV2>>,
-	TError,
-	{ pathParams: UnpinDashboardV2PathParameters },
-	TContext
-> => {
-	const mutationKey = ['unpinDashboardV2'];
-	const { mutation: mutationOptions } = options
-		? options.mutation &&
-			'mutationKey' in options.mutation &&
-			options.mutation.mutationKey
-			? options
-			: { ...options, mutation: { ...options.mutation, mutationKey } }
-		: { mutation: { mutationKey } };
-
-	const mutationFn: MutationFunction<
-		Awaited<ReturnType<typeof unpinDashboardV2>>,
-		{ pathParams: UnpinDashboardV2PathParameters }
-	> = (props) => {
-		const { pathParams } = props ?? {};
-
-		return unpinDashboardV2(pathParams);
-	};
-
-	return { mutationFn, ...mutationOptions };
-};
-
-export type UnpinDashboardV2MutationResult = NonNullable<
-	Awaited<ReturnType<typeof unpinDashboardV2>>
->;
-
-export type UnpinDashboardV2MutationError = ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary Unpin a dashboard for the current user (v2)
- */
-export const useUnpinDashboardV2 = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown,
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof unpinDashboardV2>>,
-		TError,
-		{ pathParams: UnpinDashboardV2PathParameters },
-		TContext
-	>;
-}): UseMutationResult<
-	Awaited<ReturnType<typeof unpinDashboardV2>>,
-	TError,
-	{ pathParams: UnpinDashboardV2PathParameters },
-	TContext
-> => {
-	return useMutation(getUnpinDashboardV2MutationOptions(options));
-};
-/**
- * Pins the dashboard for the calling user. A user can pin at most 10 dashboards; pinning when at the limit returns 409. Re-pinning an already-pinned dashboard is a no-op success.
- * @summary Pin a dashboard for the current user (v2)
- */
-export const pinDashboardV2 = (
-	{ id }: PinDashboardV2PathParameters,
-	signal?: AbortSignal,
-) => {
-	return GeneratedAPIInstance<string>({
-		url: `/api/v2/dashboards/${id}/pins/me`,
-		method: 'PUT',
-		signal,
-	});
-};
-
-export const getPinDashboardV2MutationOptions = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown,
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof pinDashboardV2>>,
-		TError,
-		{ pathParams: PinDashboardV2PathParameters },
-		TContext
-	>;
-}): UseMutationOptions<
-	Awaited<ReturnType<typeof pinDashboardV2>>,
-	TError,
-	{ pathParams: PinDashboardV2PathParameters },
-	TContext
-> => {
-	const mutationKey = ['pinDashboardV2'];
-	const { mutation: mutationOptions } = options
-		? options.mutation &&
-			'mutationKey' in options.mutation &&
-			options.mutation.mutationKey
-			? options
-			: { ...options, mutation: { ...options.mutation, mutationKey } }
-		: { mutation: { mutationKey } };
-
-	const mutationFn: MutationFunction<
-		Awaited<ReturnType<typeof pinDashboardV2>>,
-		{ pathParams: PinDashboardV2PathParameters }
-	> = (props) => {
-		const { pathParams } = props ?? {};
-
-		return pinDashboardV2(pathParams);
-	};
-
-	return { mutationFn, ...mutationOptions };
-};
-
-export type PinDashboardV2MutationResult = NonNullable<
-	Awaited<ReturnType<typeof pinDashboardV2>>
->;
-
-export type PinDashboardV2MutationError = ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary Pin a dashboard for the current user (v2)
- */
-export const usePinDashboardV2 = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown,
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof pinDashboardV2>>,
-		TError,
-		{ pathParams: PinDashboardV2PathParameters },
-		TContext
-	>;
-}): UseMutationResult<
-	Awaited<ReturnType<typeof pinDashboardV2>>,
-	TError,
-	{ pathParams: PinDashboardV2PathParameters },
-	TContext
-> => {
-	return useMutation(getPinDashboardV2MutationOptions(options));
-};
--- a/frontend/src/api/generated/services/sigNoz.schemas.ts
+++ b/frontend/src/api/generated/services/sigNoz.schemas.ts
@@ -4616,61 +4616,6 @@ export interface DashboardtypesGettableDashboardV2DTO {
 	updatedBy?: string;
 }

-export interface DashboardtypesGettableDashboardWithPinDTO {
-	/**
-	 * @type string
-	 * @format date-time
-	 */
-	createdAt?: string;
-	/**
-	 * @type string
-	 */
-	createdBy?: string;
-	/**
-	 * @type string
-	 */
-	id: string;
-	/**
-	 * @type string
-	 */
-	image?: string;
-	/**
-	 * @type boolean
-	 */
-	locked: boolean;
-	/**
-	 * @type string
-	 */
-	name: string;
-	/**
-	 * @type string
-	 */
-	orgId: string;
-	/**
-	 * @type boolean
-	 */
-	pinned?: boolean;
-	/**
-	 * @type string
-	 */
-	schemaVersion: string;
-	source: DashboardtypesSourceDTO;
-	spec: DashboardtypesDashboardSpecDTO;
-	/**
-	 * @type array,null
-	 */
-	tags: TagtypesPostableTagDTO[] | null;
-	/**
-	 * @type string
-	 * @format date-time
-	 */
-	updatedAt?: string;
-	/**
-	 * @type string
-	 */
-	updatedBy?: string;
-}
-
 export interface DashboardtypesGettablePublicDasbhboardDTO {
 	/**
 	 * @type string
@@ -4691,55 +4636,6 @@ export interface DashboardtypesGettablePublicDashboardDataDTO {
 	publicDashboard?: DashboardtypesGettablePublicDasbhboardDTO;
 }

-export enum DashboardtypesJSONPatchOperationDTOOp {
-	add = 'add',
-	remove = 'remove',
-	replace = 'replace',
-	move = 'move',
-	copy = 'copy',
-	test = 'test',
-}
-export interface DashboardtypesJSONPatchOperationDTO {
-	/**
-	 * @type string
-	 * @description Source JSON Pointer for move/copy ops; ignored for other ops.
-	 */
-	from?: string;
-	/**
-	 * @enum add,remove,replace,move,copy,test
-	 * @type string
-	 */
-	op: DashboardtypesJSONPatchOperationDTOOp;
-	/**
-	 * @type string
-	 * @description JSON Pointer (RFC 6901) into the dashboard's postable shape — e.g. /data/display/name, /data/panels/<id>, /data/panels/<id>/spec/queries/0, /tags/-.
-	 */
-	path: string;
-	/**
-	 * @description Value to add/replace/test against. The expected type depends on the path. Common shapes (see referenced schemas for the exact field set): /data/panels/<id> takes a DashboardtypesPanel; /data/panels/<id>/spec/queries/N (or /-) takes a DashboardtypesQuery; /data/variables/N takes a DashboardtypesVariable; /data/layouts/N takes a DashboardtypesLayout; /tags/N (or /-) takes a TagtypesPostableTag; /data/display/name and other leaf string fields take a string. Required for add/replace/test; ignored for remove/move/copy.
-	 */
-	value?: unknown;
-}
-
-/**
- * @nullable
- */
-export type DashboardtypesJSONPatchDocumentDTO =
-	| DashboardtypesJSONPatchOperationDTO[]
-	| null;
-
-export interface DashboardtypesListableDashboardV2DTO {
-	/**
-	 * @type array
-	 */
-	dashboards: DashboardtypesGettableDashboardWithPinDTO[];
-	/**
-	 * @type integer
-	 * @format int64
-	 */
-	total: number;
-}
-
 export enum DashboardtypesPanelPluginKindDTO {
 	'signoz/TimeSeriesPanel' = 'signoz/TimeSeriesPanel',
 	'signoz/BarChartPanel' = 'signoz/BarChartPanel',
@@ -7155,6 +7051,31 @@ export interface RulestatehistorytypesGettableRuleStateWindowDTO {
 	state: RuletypesAlertStateDTO;
 }

+export interface RuletypesActiveMuteDTO {
+	/**
+	 * @type string
+	 */
+	description?: string;
+	/**
+	 * @type string,null
+	 * @format date-time
+	 */
+	end?: string | null;
+	/**
+	 * @type string
+	 */
+	id?: string;
+	/**
+	 * @type string
+	 */
+	name?: string;
+	/**
+	 * @type string
+	 * @format date-time
+	 */
+	start?: string;
+}
+
 export enum RuletypesPanelTypeDTO {
 	value = 'value',
 	table = 'table',
@@ -7523,6 +7444,10 @@ export interface RuletypesRuleDTO {
 	 * @type object
 	 */
 	labels?: RuletypesRuleDTOLabels;
+	/**
+	 * @type array,null
+	 */
+	mutes?: RuletypesActiveMuteDTO[] | null;
 	notificationSettings?: RuletypesNotificationSettingsDTO;
 	/**
 	 * @type array
@@ -9493,42 +9418,6 @@ export type GetUserPreference200 = {
 export type UpdateUserPreferencePathParameters = {
 	name: string;
 };
-export type ListDashboardsV2Params = {
-	/**
-	 * @type string
-	 * @description undefined
-	 */
-	query?: string;
-	/**
-	 * @type string
-	 * @description undefined
-	 */
-	sort?: string;
-	/**
-	 * @type string
-	 * @description undefined
-	 */
-	order?: string;
-	/**
-	 * @type integer
-	 * @description undefined
-	 */
-	limit?: number;
-	/**
-	 * @type integer
-	 * @description undefined
-	 */
-	offset?: number;
-};
-
-export type ListDashboardsV2200 = {
-	data: DashboardtypesListableDashboardV2DTO;
-	/**
-	 * @type string
-	 */
-	status: string;
-};
-
 export type CreateDashboardV2201 = {
 	data: DashboardtypesGettableDashboardV2DTO;
 	/**
@@ -9548,40 +9437,6 @@ export type GetDashboardV2200 = {
 	status: string;
 };

-export type PatchDashboardV2PathParameters = {
-	id: string;
-};
-export type PatchDashboardV2200 = {
-	data: DashboardtypesGettableDashboardV2DTO;
-	/**
-	 * @type string
-	 */
-	status: string;
-};
-
-export type UpdateDashboardV2PathParameters = {
-	id: string;
-};
-export type UpdateDashboardV2200 = {
-	data: DashboardtypesGettableDashboardV2DTO;
-	/**
-	 * @type string
-	 */
-	status: string;
-};
-
-export type UnlockDashboardV2PathParameters = {
-	id: string;
-};
-export type LockDashboardV2PathParameters = {
-	id: string;
-};
-export type UnpinDashboardV2PathParameters = {
-	id: string;
-};
-export type PinDashboardV2PathParameters = {
-	id: string;
-};
 export type GetFeatures200 = {
 	/**
 	 * @type array
--- a/frontend/src/components/CustomTimePicker/TimezonePicker.styles.scss
+++ b/frontend/src/components/CustomTimePicker/TimezonePicker.styles.scss
@@ -41,22 +41,14 @@ $item-spacing: 8px;
 		width: 100%;
 		background: transparent;
 		border: none;
-		border-radius: 0;
-		box-shadow: none;
 		outline: none;
-		height: auto;
 		color: var(--l1-foreground);
 		font-size: 14px;
 		line-height: 20px;
 		letter-spacing: -0.07px;
 		padding: 0;
-
-		&:focus,
-		&:focus-visible,
-		&:hover {
-			border: none;
+		&.ant-input:focus {
 			box-shadow: none;
-			outline: none;
 		}

 		&::placeholder {
--- a/frontend/src/components/CustomTimePicker/TimezonePicker.tsx
+++ b/frontend/src/components/CustomTimePicker/TimezonePicker.tsx
@@ -6,7 +6,7 @@ import {
 	useState,
 } from 'react';
 import { Color } from '@signozhq/design-tokens';
-import { Input } from '@signozhq/ui/input';
+import { Input } from 'antd';
 import logEvent from 'api/common/logEvent';
 import cx from 'classnames';
 import { TimezonePickerShortcuts } from 'constants/shortcuts/TimezonePickerShortcuts';
--- a/frontend/src/components/ExplorerCard/SaveViewWithName.tsx
+++ b/frontend/src/components/ExplorerCard/SaveViewWithName.tsx
@@ -1,6 +1,5 @@
 import { useTranslation } from 'react-i18next';
-import { Input } from '@signozhq/ui/input';
-import { Card, Form } from 'antd';
+import { Card, Form, Input } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
--- a/frontend/src/components/InputWithLabel/InputWithLabel.tsx
+++ b/frontend/src/components/InputWithLabel/InputWithLabel.tsx
@@ -1,6 +1,5 @@
 import { useState } from 'react';
-import { Input } from '@signozhq/ui/input';
-import { Button } from 'antd';
+import { Button, Input } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import cx from 'classnames';
 import { X } from '@signozhq/icons';
--- a/frontend/src/components/LogsFormatOptionsMenu/LogsFormatOptionsMenu.tsx
+++ b/frontend/src/components/LogsFormatOptionsMenu/LogsFormatOptionsMenu.tsx
@@ -1,6 +1,5 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
-import { Input } from '@signozhq/ui/input';
-import { Button, InputNumber, Popover, Tooltip } from 'antd';
+import { Button, Input, InputNumber, Popover, Tooltip } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import type { DefaultOptionType } from 'antd/es/select';
 import cx from 'classnames';
--- a/frontend/src/components/QueryBuilderV2/QueryV2/QueryAddOns/QueryAddOns.styles.scss
+++ b/frontend/src/components/QueryBuilderV2/QueryV2/QueryAddOns/QueryAddOns.styles.scss
@@ -266,14 +266,6 @@
 			border-left: transparent;
 			border-top-left-radius: 0px;
 			border-bottom-left-radius: 0px;
-
-			&:focus:not(:focus-visible),
-			&.ant-btn:focus:not(:focus-visible) {
-				border-color: var(--l2-border);
-				border-left-color: transparent;
-				outline: none;
-				box-shadow: none;
-			}
 		}
 	}
 }
@@ -299,21 +291,5 @@
 		.cm-placeholder {
 			font-size: 12px !important;
 		}
-
-		$add-on-row-height: 38px;
-
-		.periscope-input-with-label {
-			.input {
-				.ant-select {
-					height: $add-on-row-height;
-				}
-			}
-		}
-
-		.input-with-label {
-			.input {
-				height: $add-on-row-height;
-			}
-		}
 	}
 }
--- a/frontend/src/components/QuickFilters/FilterRenderers/Checkbox/Checkbox.styles.scss
+++ b/frontend/src/components/QuickFilters/FilterRenderers/Checkbox/Checkbox.styles.scss
@@ -4,23 +4,6 @@
 	padding: 12px;
 	gap: 12px;
 	border-bottom: 1px solid var(--l1-border);
-
-	.search {
-		input {
-			--input-background: var(--l2-background);
-			--input-hover-background: var(--l2-background);
-			--input-focus-background: var(--l2-background);
-			&::placeholder {
-				color: var(--l3-foreground);
-			}
-			--input-font-size: 14px;
-			--input-border-color: var(--l1-border);
-			--input-focus-border-color: var(--primary-background);
-			--input-focus-outline-width: 0;
-			--input-focus-outline-offset: 0;
-		}
-	}
-
 	.filter-header-checkbox {
 		display: flex;
 		align-items: center;
--- a/frontend/src/components/QuickFilters/FilterRenderers/Checkbox/Checkbox.tsx
+++ b/frontend/src/components/QuickFilters/FilterRenderers/Checkbox/Checkbox.tsx
@@ -1,7 +1,6 @@
 /* eslint-disable sonarjs/no-identical-functions */
 import { Fragment, useMemo, useState } from 'react';
-import { Input } from '@signozhq/ui/input';
-import { Button, Skeleton } from 'antd';
+import { Button, Input, Skeleton } from 'antd';
 import { Checkbox } from '@signozhq/ui/checkbox';
 import { Typography } from '@signozhq/ui/typography';
 import cx from 'classnames';
--- a/frontend/src/components/QuickFilters/QuickFiltersSettings/QuickFiltersSettings.tsx
+++ b/frontend/src/components/QuickFilters/QuickFiltersSettings/QuickFiltersSettings.tsx
@@ -1,6 +1,5 @@
 import { useMemo } from 'react';
-import { Input } from '@signozhq/ui/input';
-import { Button } from 'antd';
+import { Button, Input } from 'antd';
 import { Check, TableColumnsSplit, X } from '@signozhq/icons';
 import { Filter as FilterType } from 'types/api/quickFilters/getCustomFilters';

--- a/frontend/src/constants/localStorage.ts
+++ b/frontend/src/constants/localStorage.ts
@@ -42,5 +42,4 @@ export enum LOCALSTORAGE {
 	LICENSE_KEY_CALLOUT_DISMISSED = 'LICENSE_KEY_CALLOUT_DISMISSED',
 	DASHBOARD_PREFERENCES = 'DASHBOARD_PREFERENCES',
 	ACTIVE_SIGNOZ_INSTANCE_URL = 'ACTIVE_SIGNOZ_INSTANCE_URL',
-	DASHBOARDS_LIST_VISIBLE_COLUMNS = 'DASHBOARDS_LIST_VISIBLE_COLUMNS',
 }
--- a/frontend/src/container/CreateAlertRule/index.tsx
+++ b/frontend/src/container/CreateAlertRule/index.tsx
@@ -14,7 +14,7 @@ import { useGetCompositeQueryParam } from 'hooks/queryBuilder/useGetCompositeQue
 import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import useUrlQuery from 'hooks/useUrlQuery';
 import { AlertListTabs } from 'pages/AlertList/types';
-import { GalleryVerticalEnd, Pyramid } from '@signozhq/icons';
+import { CalendarClock, GalleryVerticalEnd, Pyramid } from '@signozhq/icons';
 import { AlertTypes } from 'types/api/alerts/alertTypes';
 import { AlertDef } from 'types/api/alerts/def';

@@ -175,11 +175,21 @@ function CreateRules(): JSX.Element {
 		{
 			label: (
 				<div className="periscope-tab top-level-tab">
-					<ConfigureIcon width={14} height={14} />
-					Configuration
+					<CalendarClock size={14} />
+					Planned Downtime
 				</div>
 			),
-			key: AlertListTabs.CONFIGURATION,
+			key: AlertListTabs.PLANNED_DOWNTIME,
+			children: null,
+		},
+		{
+			label: (
+				<div className="periscope-tab top-level-tab">
+					<ConfigureIcon width={14} height={14} />
+					Routing Policies
+				</div>
+			),
+			key: AlertListTabs.ROUTING_POLICIES,
 			children: null,
 		},
 	];
--- a/frontend/src/container/CreateAlertV2/AlertCondition/ThresholdItem.tsx
+++ b/frontend/src/container/CreateAlertV2/AlertCondition/ThresholdItem.tsx
@@ -1,6 +1,5 @@
 import { useMemo, useState } from 'react';
-import { Input } from '@signozhq/ui/input';
-import { Button, Select, Tooltip } from 'antd';
+import { Button, Input, Select, Tooltip } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import { CircleX, Trash } from '@signozhq/icons';
 import { useAppContext } from 'providers/App/App';
--- a/frontend/src/container/CreateAlertV2/AlertCondition/constants.ts
+++ b/frontend/src/container/CreateAlertV2/AlertCondition/constants.ts
@@ -4,5 +4,4 @@ export const THRESHOLD_TAB_TOOLTIP =
 export const ANOMALY_TAB_TOOLTIP =
 	'An alert is triggered whenever the metric deviates from an expected pattern.';

-export const ROUTING_POLICIES_ROUTE =
-	'/alerts?tab=Configuration&subTab=routing-policies';
+export const ROUTING_POLICIES_ROUTE = '/alerts?tab=RoutingPolicies';
--- a/frontend/src/container/CreateAlertV2/EvaluationSettings/AdvancedOptions.tsx
+++ b/frontend/src/container/CreateAlertV2/EvaluationSettings/AdvancedOptions.tsx
@@ -1,5 +1,4 @@
-import { Input } from '@signozhq/ui/input';
-import { Collapse } from 'antd';
+import { Collapse, Input } from 'antd';
 import { Typography } from '@signozhq/ui/typography';

 import { useCreateAlertState } from '../context';
--- a/frontend/src/container/CreateAlertV2/EvaluationSettings/EvaluationWindowPopover/EvaluationWindowDetails.tsx
+++ b/frontend/src/container/CreateAlertV2/EvaluationSettings/EvaluationWindowPopover/EvaluationWindowDetails.tsx
@@ -1,6 +1,5 @@
 import { useMemo } from 'react';
-import { Input } from '@signozhq/ui/input';
-import { Select } from 'antd';
+import { Input, Select } from 'antd';
 import { Typography } from '@signozhq/ui/typography';

 import { ADVANCED_OPTIONS_TIME_UNIT_OPTIONS } from '../../context/constants';
--- a/frontend/src/container/CreateAlertV2/EvaluationSettings/TimeInput/TimeInput.tsx
+++ b/frontend/src/container/CreateAlertV2/EvaluationSettings/TimeInput/TimeInput.tsx
@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from 'react';
-import { Input } from '@signozhq/ui/input';
+import { Input } from 'antd';
+
 import './TimeInput.scss';

 export interface TimeInputProps {
--- a/frontend/src/container/CreateAlertV2/NotificationSettings/NotificationSettings.tsx
+++ b/frontend/src/container/CreateAlertV2/NotificationSettings/NotificationSettings.tsx
@@ -1,5 +1,4 @@
-import { Input } from '@signozhq/ui/input';
-import { Select } from 'antd';
+import { Input, Select } from 'antd';
 import { Typography } from '@signozhq/ui/typography';

 import { useCreateAlertState } from '../context';
--- a/frontend/src/container/DashboardContainer/DashboardDescription/index.tsx
+++ b/frontend/src/container/DashboardContainer/DashboardDescription/index.tsx
@@ -16,10 +16,9 @@ import {
 	Plus,
 	X,
 } from '@signozhq/icons';
-import { Button, Card, Modal, Popover, Tooltip } from 'antd';
+import { Button, Card, Input, Modal, Popover, Tooltip } from 'antd';
 import { Badge } from '@signozhq/ui/badge';
 import { Typography } from '@signozhq/ui/typography';
-import { Input } from '@signozhq/ui/input';
 import logEvent from 'api/common/logEvent';
 import ConfigureIcon from 'assets/Integrations/ConfigureIcon';
 import { PANEL_GROUP_TYPES, PANEL_TYPES } from 'constants/queryBuilder';
--- a/frontend/src/container/DashboardContainer/visualization/components/ChartManager/ChartManager.tsx
+++ b/frontend/src/container/DashboardContainer/visualization/components/ChartManager/ChartManager.tsx
@@ -1,6 +1,5 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
-import { Input } from '@signozhq/ui/input';
-import { Button } from 'antd';
+import { Button, Input } from 'antd';
 import { PrecisionOption, PrecisionOptionsEnum } from 'components/Graph/types';
 import { ResizeTable } from 'components/ResizeTable';
 import { useNotifications } from 'hooks/useNotifications';
--- a/frontend/src/container/DashboardContainerV2/DashboardDescriptionV2/SettingsDrawer/SettingsDrawer.styles.scss
+++ b/frontend/src/container/DashboardContainerV2/DashboardDescriptionV2/SettingsDrawer/SettingsDrawer.styles.scss
@@ -1,43 +0,0 @@
-.settings-container-root {
-	.ant-drawer-wrapper-body {
-		border-left: 1px solid var(--l1-border);
-		background: var(--l2-background);
-		box-shadow: -4px 10px 16px 2px rgba(0, 0, 0, 0.2);
-
-		.ant-drawer-header {
-			height: 48px;
-			border-bottom: 1px solid var(--l1-border);
-			padding: 14px 14px 14px 11px;
-
-			.ant-drawer-header-title {
-				gap: 16px;
-
-				.ant-drawer-title {
-					color: var(--l2-foreground);
-					font-family: Inter;
-					font-size: 14px;
-					font-style: normal;
-					font-weight: 400;
-					line-height: 20px; /* 142.857% */
-					letter-spacing: -0.07px;
-					padding-left: 16px;
-					border-left: 1px solid var(--l1-border);
-				}
-
-				.ant-drawer-close {
-					height: 16px;
-					width: 16px;
-					margin-inline-end: 0px !important;
-				}
-			}
-		}
-
-		.ant-drawer-body {
-			padding: 16px;
-
-			&::-webkit-scrollbar {
-				width: 0.1rem;
-			}
-		}
-	}
-}
--- a/frontend/src/container/DashboardContainerV2/DashboardDescriptionV2/SettingsDrawer/index.tsx
+++ b/frontend/src/container/DashboardContainerV2/DashboardDescriptionV2/SettingsDrawer/index.tsx
@@ -1,34 +0,0 @@
-import { memo, PropsWithChildren, ReactElement } from 'react';
-import { Drawer } from 'antd';
-import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
-
-import './SettingsDrawer.styles.scss';
-
-type SettingsDrawerProps = PropsWithChildren<{
-	drawerTitle: string;
-	isOpen: boolean;
-	onClose: () => void;
-}>;
-
-function SettingsDrawer({
-	children,
-	drawerTitle,
-	isOpen,
-	onClose,
-}: SettingsDrawerProps): JSX.Element {
-	return (
-		<Drawer
-			title={drawerTitle}
-			placement="right"
-			width="50%"
-			onClose={onClose}
-			open={isOpen}
-			rootClassName="settings-container-root"
-		>
-			{/* Need to type cast because of OverlayScrollbar type definition. We should be good once we remove it. */}
-			<OverlayScrollbar>{children as ReactElement}</OverlayScrollbar>
-		</Drawer>
-	);
-}
-
-export default memo(SettingsDrawer);
--- a/frontend/src/container/DashboardContainerV2/DashboardDescriptionV2/index.tsx
+++ b/frontend/src/container/DashboardContainerV2/DashboardDescriptionV2/index.tsx
@@ -1,407 +0,0 @@
-import { useEffect, useMemo, useState } from 'react';
-import { FullScreenHandle } from 'react-full-screen';
-import { useTranslation } from 'react-i18next';
-import { useCopyToClipboard } from 'react-use';
-import {
-	Check,
-	ClipboardCopy,
-	Ellipsis,
-	FileJson,
-	Fullscreen,
-	Globe,
-	LockKeyhole,
-	PenLine,
-	Plus,
-	X,
-} from '@signozhq/icons';
-import { Button, Card, Input, Modal, Popover, Tooltip } from 'antd';
-import { Badge } from '@signozhq/ui/badge';
-import { toast } from '@signozhq/ui/sonner';
-import { Typography } from '@signozhq/ui/typography';
-import logEvent from 'api/common/logEvent';
-import {
-	lockDashboardV2,
-	patchDashboardV2,
-	unlockDashboardV2,
-} from 'api/generated/services/dashboard';
-import type { DashboardtypesJSONPatchOperationDTO } from 'api/generated/services/sigNoz.schemas';
-import ConfigureIcon from 'assets/Integrations/ConfigureIcon';
-import { DeleteButton } from 'container/ListOfDashboard/TableComponents/DeleteButton';
-import DateTimeSelectionV2 from 'container/TopNav/DateTimeSelectionV2';
-import useComponentPermission from 'hooks/useComponentPermission';
-import { isEmpty } from 'lodash-es';
-import { useAppContext } from 'providers/App/App';
-import { useErrorModal } from 'providers/ErrorModalProvider';
-import APIError from 'types/api/error';
-import { USER_ROLES } from 'types/roles';
-
-import { Base64Icons } from '../../DashboardContainer/DashboardSettings/General/utils';
-import DashboardSettingsV2 from '../DashboardSettings';
-import DashboardHeader from '../components/DashboardHeader/DashboardHeader';
-import DashboardVariablesV2 from '../DashboardVariablesV2';
-import SettingsDrawer from './SettingsDrawer';
-
-import '../../DashboardContainer/DashboardDescription/Description.styles.scss';
-
-import type { V2Dashboard } from '../utils';
-
-interface DashboardDescriptionV2Props {
-	dashboard: V2Dashboard | undefined;
-	handle: FullScreenHandle;
-	onRefetch: () => void;
-}
-
-// eslint-disable-next-line sonarjs/cognitive-complexity
-function DashboardDescriptionV2(props: DashboardDescriptionV2Props): JSX.Element {
-	const { dashboard, handle, onRefetch } = props;
-
-	const id = dashboard?.id ?? '';
-	const isDashboardLocked = !!dashboard?.locked;
-
-	const [isSettingsDrawerOpen, setIsSettingsDrawerOpen] =
-		useState<boolean>(false);
-
-	const title = dashboard?.spec?.display?.name ?? '';
-	const description = dashboard?.spec?.display?.description ?? '';
-	const image = dashboard?.image || Base64Icons[0];
-	const tags = useMemo(
-		() =>
-			(dashboard?.tags ?? []).map((t) =>
-				t.key === t.value ? t.key : `${t.key}:${t.value}`,
-			),
-		[dashboard?.tags],
-	);
-	const dashboardVariables = dashboard?.spec?.variables ?? [];
-
-	const [updatedTitle, setUpdatedTitle] = useState<string>(title);
-
-	const { user } = useAppContext();
-	const [editDashboard] = useComponentPermission(['edit_dashboard'], user.role);
-	const [isDashboardSettingsOpen, setIsDashbordSettingsOpen] =
-		useState<boolean>(false);
-	const [isRenameDashboardOpen, setIsRenameDashboardOpen] =
-		useState<boolean>(false);
-
-	const isAuthor =
-		!!user?.email && !!dashboard?.createdBy && dashboard.createdBy === user.email;
-	const addPanelPermission = !isDashboardLocked;
-	// V2 public dashboard wiring lives separately; treat as not-public for chrome.
-	const isPublicDashboard = false;
-
-	const { showErrorModal } = useErrorModal();
-	const { t } = useTranslation(['dashboard', 'common']);
-
-	const [isRenameLoading, setIsRenameLoading] = useState<boolean>(false);
-
-	useEffect(() => {
-		if (dashboard) {setUpdatedTitle(title);}
-	}, [dashboard, title]);
-
-	const handleLockDashboardToggle = async (): Promise<void> => {
-		if (!id) {return;}
-		setIsDashbordSettingsOpen(false);
-		try {
-			if (isDashboardLocked) {
-				await unlockDashboardV2({ id });
-				toast.success('Dashboard unlocked');
-			} else {
-				await lockDashboardV2({ id });
-				toast.success('Dashboard locked');
-			}
-			onRefetch();
-		} catch (error) {
-			showErrorModal(error as APIError);
-		}
-	};
-
-	const onNameChangeHandler = async (): Promise<void> => {
-		const trimmed = updatedTitle.trim();
-		if (!id || !trimmed || trimmed === title) {
-			setIsRenameDashboardOpen(false);
-			return;
-		}
-		try {
-			setIsRenameLoading(true);
-			const patch: DashboardtypesJSONPatchOperationDTO[] = [
-				{
-					op: 'replace' as DashboardtypesJSONPatchOperationDTO['op'],
-					path: '/spec/display/name',
-					value: trimmed,
-				},
-			];
-			await patchDashboardV2({ id }, patch);
-			toast.success('Dashboard renamed successfully');
-			setIsRenameDashboardOpen(false);
-			onRefetch();
-		} catch (error) {
-			showErrorModal(error as APIError);
-			setIsRenameDashboardOpen(true);
-		} finally {
-			setIsRenameLoading(false);
-		}
-	};
-
-	const onEmptyWidgetHandler = (): void => {
-		logEvent('Dashboard Detail V2: Add new panel clicked', {
-			dashboardId: id,
-		});
-		toast.info('V2 panel editor coming next');
-	};
-
-	const [state, setCopy] = useCopyToClipboard();
-
-	useEffect(() => {
-		if (state.error) {
-			toast.error(t('something_went_wrong', { ns: 'common' }));
-		}
-		if (state.value) {
-			toast.success(t('success', { ns: 'common' }));
-		}
-	}, [state.error, state.value, t]);
-
-	const dashboardDataJSON = (): string =>
-		JSON.stringify(dashboard ?? {}, null, 2);
-
-	const exportJSON = (): void => {
-		const blob = new Blob([dashboardDataJSON()], { type: 'application/json' });
-		const url = URL.createObjectURL(blob);
-		const link = document.createElement('a');
-		link.href = url;
-		link.download = `${title || 'dashboard'}.json`;
-		document.body.appendChild(link);
-		link.click();
-		document.body.removeChild(link);
-		URL.revokeObjectURL(url);
-	};
-
-	const onConfigureClick = (): void => {
-		setIsSettingsDrawerOpen(true);
-	};
-
-	const onSettingsDrawerClose = (): void => {
-		setIsSettingsDrawerOpen(false);
-	};
-
-	return (
-		<Card className="dashboard-description-container">
-			<DashboardHeader title={title} image={image} />
-			<section className="dashboard-details">
-				<div className="left-section">
-					<img src={image} alt="dashboard-img" className="dashboard-img" />
-					<Tooltip title={title.length > 30 ? title : ''}>
-						<Typography.Text
-							className="dashboard-title"
-							data-testid="dashboard-title"
-						>
-							{title}
-						</Typography.Text>
-					</Tooltip>
-
-					{isPublicDashboard && (
-						<Tooltip title="This dashboard is publicly accessible">
-							<Globe size={14} className="public-dashboard-icon" />
-						</Tooltip>
-					)}
-
-					{isDashboardLocked && (
-						<Tooltip title="This dashboard is locked">
-							<LockKeyhole size={14} className="lock-dashboard-icon" />
-						</Tooltip>
-					)}
-				</div>
-				<div className="right-section">
-					<DateTimeSelectionV2 showAutoRefresh hideShareModal />
-					<Popover
-						open={isDashboardSettingsOpen}
-						arrow={false}
-						onOpenChange={(visible): void => setIsDashbordSettingsOpen(visible)}
-						rootClassName="dashboard-settings"
-						content={
-							<div className="menu-content">
-								<section className="section-1">
-									{(isAuthor || user.role === USER_ROLES.ADMIN) && (
-										<Tooltip
-											title={
-												dashboard?.createdBy === 'integration' &&
-												'Dashboards created by integrations cannot be unlocked'
-											}
-										>
-											<Button
-												type="text"
-												icon={<LockKeyhole size={14} />}
-												disabled={dashboard?.createdBy === 'integration'}
-												onClick={handleLockDashboardToggle}
-												data-testid="lock-unlock-dashboard"
-											>
-												{isDashboardLocked ? 'Unlock Dashboard' : 'Lock Dashboard'}
-											</Button>
-										</Tooltip>
-									)}
-
-									{!isDashboardLocked && editDashboard && (
-										<Button
-											type="text"
-											icon={<PenLine size={14} />}
-											onClick={(): void => {
-												setIsRenameDashboardOpen(true);
-												setIsDashbordSettingsOpen(false);
-											}}
-										>
-											Rename
-										</Button>
-									)}
-
-									<Button
-										type="text"
-										icon={<Fullscreen size={14} />}
-										onClick={handle.enter}
-									>
-										Full screen
-									</Button>
-								</section>
-								<section className="section-2">
-									<Button
-										type="text"
-										icon={<FileJson size={14} />}
-										onClick={(): void => {
-											exportJSON();
-											setIsDashbordSettingsOpen(false);
-										}}
-									>
-										Export JSON
-									</Button>
-									<Button
-										type="text"
-										icon={<ClipboardCopy size={14} />}
-										onClick={(): void => {
-											setCopy(dashboardDataJSON());
-											setIsDashbordSettingsOpen(false);
-										}}
-									>
-										Copy as JSON
-									</Button>
-								</section>
-								<section className="delete-dashboard">
-									<DeleteButton
-										createdBy={dashboard?.createdBy || ''}
-										name={title}
-										id={id}
-										isLocked={isDashboardLocked}
-										routeToListPage
-									/>
-								</section>
-							</div>
-						}
-						trigger="click"
-						placement="bottomRight"
-					>
-						<Button
-							icon={<Ellipsis size={14} />}
-							type="text"
-							className="icons"
-							data-testid="options"
-						/>
-					</Popover>
-					{!isDashboardLocked && editDashboard && (
-						<>
-							<Button
-								type="text"
-								className="configure-button"
-								icon={<ConfigureIcon />}
-								data-testid="show-drawer"
-								onClick={onConfigureClick}
-							>
-								Configure
-							</Button>
-							<SettingsDrawer
-								drawerTitle="Dashboard Configuration"
-								isOpen={isSettingsDrawerOpen}
-								onClose={onSettingsDrawerClose}
-							>
-								<DashboardSettingsV2
-									dashboard={dashboard}
-									onRefetch={onRefetch}
-								/>
-							</SettingsDrawer>
-						</>
-					)}
-					{!isDashboardLocked && addPanelPermission && (
-						<Button
-							className="add-panel-btn"
-							onClick={onEmptyWidgetHandler}
-							icon={<Plus size="md" />}
-							type="primary"
-							data-testid="add-panel-header"
-						>
-							New Panel
-						</Button>
-					)}
-				</div>
-			</section>
-			{tags.length > 0 && (
-				<div className="dashboard-tags">
-					{tags.map((tag) => (
-						<Badge key={tag} className="tag">
-							{tag}
-						</Badge>
-					))}
-				</div>
-			)}
-			{!isEmpty(description) && (
-				<section className="dashboard-description-section">{description}</section>
-			)}
-
-			{dashboardVariables.length > 0 && (
-				<section className="dashboard-variables">
-					<DashboardVariablesV2
-						dashboardId={id}
-						variables={dashboardVariables}
-					/>
-				</section>
-			)}
-
-			<Modal
-				open={isRenameDashboardOpen}
-				title="Rename Dashboard"
-				onOk={onNameChangeHandler}
-				onCancel={(): void => {
-					setIsRenameDashboardOpen(false);
-				}}
-				rootClassName="rename-dashboard"
-				footer={
-					<div className="dashboard-rename">
-						<Button
-							type="primary"
-							icon={<Check size={14} />}
-							className="rename-btn"
-							onClick={onNameChangeHandler}
-							disabled={isRenameLoading}
-						>
-							Rename Dashboard
-						</Button>
-						<Button
-							type="text"
-							icon={<X size={14} />}
-							className="cancel-btn"
-							onClick={(): void => setIsRenameDashboardOpen(false)}
-						>
-							Cancel
-						</Button>
-					</div>
-				}
-			>
-				<div className="dashboard-content">
-					<Typography.Text className="name-text">Enter a new name</Typography.Text>
-					<Input
-						data-testid="dashboard-name"
-						className="dashboard-name-input"
-						value={updatedTitle}
-						onChange={(e): void => setUpdatedTitle(e.target.value)}
-					/>
-				</div>
-			</Modal>
-		</Card>
-	);
-}
-
-export default DashboardDescriptionV2;
--- a/frontend/src/container/DashboardContainerV2/DashboardSettings/General/GeneralSettings.module.scss
+++ b/frontend/src/container/DashboardContainerV2/DashboardSettings/General/GeneralSettings.module.scss
@@ -1,227 +0,0 @@
-.overviewContent {
-	display: flex;
-	flex-direction: column;
-	gap: 16px;
-}
-
-.overviewSettings {
-	border-radius: 3px;
-	border: 1px solid var(--l1-border);
-	padding: 16px !important;
-}
-
-.crossPanelSyncGroup {
-	display: flex;
-	flex-direction: column;
-	gap: 16px;
-}
-
-.crossPanelSyncSectionTitle {
-	color: var(--l1-foreground);
-	font-family: Inter;
-	font-size: 14px;
-	font-weight: 500;
-	line-height: 20px;
-}
-
-.crossPanelSyncSectionHeader {
-	display: flex;
-	align-items: center;
-	gap: 6px;
-	align-self: flex-start;
-}
-
-.crossPanelSyncInfoIcon {
-	cursor: help;
-	color: var(--l3-foreground);
-}
-
-.crossPanelSyncTooltipContent {
-	display: flex;
-	flex-direction: column;
-	gap: 8px;
-	max-width: 300px;
-}
-
-.crossPanelSyncTooltipTitle {
-	font-size: 14px;
-}
-
-.crossPanelSyncTooltipDescription {
-	font-size: 12px;
-	line-height: 1.5;
-}
-
-.crossPanelSyncTooltipDocLink {
-	display: flex;
-	align-items: center;
-	gap: 4px;
-	color: var(--primary-background);
-	font-size: 12px;
-	margin-top: 4px;
-}
-
-.crossPanelSyncRow {
-	display: flex;
-	flex-direction: row;
-	justify-content: space-between;
-	align-items: center;
-	gap: 16px;
-
-	& + & {
-		padding-top: 16px;
-		border-top: 1px solid var(--l1-border);
-	}
-}
-
-.crossPanelSyncInfo {
-	display: flex;
-	flex-direction: column;
-	gap: 4px;
-}
-
-.crossPanelSyncTitle {
-	color: var(--l2-foreground);
-	font-family: Inter;
-	font-size: 14px;
-	font-weight: 400;
-	line-height: 20px;
-}
-
-.crossPanelSyncDescription {
-	color: var(--l3-foreground);
-	font-family: Inter;
-	font-size: 13px;
-	font-weight: 400;
-	line-height: 20px;
-}
-
-.nameIconInput {
-	display: flex;
-}
-
-.dashboardImageInput {
-	:global(.ant-select-selector) {
-		display: flex;
-		width: 32px;
-		height: 32px;
-		padding: 6px;
-		justify-content: center;
-		align-items: center;
-		border-radius: 2px 0px 0px 2px;
-		border: 1px solid var(--l1-border) !important;
-		background: var(--l3-background) !important;
-
-		:global(.ant-select-selection-item) {
-			display: flex;
-			align-items: center;
-		}
-	}
-
-	&:global(.ant-select-dropdown) {
-		padding: 0px !important;
-	}
-
-	:global(.ant-select-item) {
-		padding: 0px;
-		align-items: center;
-		justify-content: center;
-
-		:global(.ant-select-item-option-content) {
-			display: flex;
-			align-items: center;
-			justify-content: center;
-		}
-	}
-}
-
-.listItemImage {
-	height: 16px;
-	width: 16px;
-}
-
-.dashboardNameInput {
-	border-radius: 0px 2px 2px 0px;
-	border: 1px solid var(--l1-border);
-	background: var(--l3-background);
-}
-
-.dashboardName {
-	color: var(--l2-foreground);
-	font-family: Inter;
-	font-size: 14px;
-	font-style: normal;
-	font-weight: 400;
-	line-height: 20px;
-	margin-bottom: 0.5rem;
-}
-
-.descriptionTextArea {
-	padding: 6px 6px 6px 8px;
-	border-radius: 2px;
-	border: 1px solid var(--l1-border);
-	background: var(--l3-background);
-}
-
-.overviewSettingsFooter {
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-	width: -webkit-fill-available;
-	padding: 12px 16px 12px 0px;
-	position: fixed;
-	bottom: 0;
-	height: 32px;
-	border-top: 1px solid var(--l1-border);
-	background: var(--l2-background);
-}
-
-.unsaved {
-	display: flex;
-	align-items: center;
-	gap: 8px;
-}
-
-.unsavedDot {
-	width: 6px;
-	height: 6px;
-	border-radius: 50px;
-	background: var(--primary-background);
-	box-shadow: 0px 0px 6px 0px
-		color-mix(in srgb, var(--primary-background) 40%, transparent);
-}
-
-.unsavedChanges {
-	color: var(--bg-robin-400);
-	font-family: Inter;
-	font-size: 14px;
-	font-style: normal;
-	font-weight: 400;
-	line-height: 24px;
-	letter-spacing: -0.07px;
-}
-
-.footerActionBtns {
-	display: flex;
-	gap: 8px;
-}
-
-.discardBtn {
-	margin: '16px 0';
-	color: var(--l1-foreground);
-	font-family: Inter;
-	font-size: 12px;
-	font-style: normal;
-	font-weight: 500;
-	line-height: 24px;
-}
-
-.saveBtn {
-	margin: 0px !important;
-	color: var(--l1-foreground);
-	font-family: Inter;
-	font-size: 12px;
-	font-style: normal;
-	font-weight: 500;
-	line-height: 24px;
-}
--- a/frontend/src/container/DashboardContainerV2/DashboardSettings/General/index.tsx
+++ b/frontend/src/container/DashboardContainerV2/DashboardSettings/General/index.tsx
@@ -1,357 +0,0 @@
-import { useEffect, useMemo, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-// eslint-disable-next-line signoz/no-antd-components -- TODO: migrate Radio to @signozhq/ui/radio-group
-import { Col, Input, Radio, Select, Space, Tooltip } from 'antd';
-import { Typography } from '@signozhq/ui/typography';
-import AddTags from 'container/DashboardContainer/DashboardSettings/General/AddBadges';
-import { useDashboardCursorSyncMode } from 'hooks/dashboard/useDashboardCursorSyncMode';
-import { useSyncTooltipFilterMode } from 'hooks/dashboard/useSyncTooltipFilterMode';
-import {
-	DashboardCursorSync,
-	SyncTooltipFilterMode,
-} from 'lib/uPlotV2/plugins/TooltipPlugin/types';
-import { isEqual } from 'lodash-es';
-import { Check, ExternalLink, SolidInfoCircle, X } from '@signozhq/icons';
-import { patchDashboardV2 } from 'api/generated/services/dashboard';
-import type {
-	DashboardtypesJSONPatchOperationDTO,
-	TagtypesPostableTagDTO,
-} from 'api/generated/services/sigNoz.schemas';
-import { toast } from '@signozhq/ui/sonner';
-import { useErrorModal } from 'providers/ErrorModalProvider';
-import APIError from 'types/api/error';
-
-import styles from './GeneralSettings.module.scss';
-import { Button } from './styles';
-import { Base64Icons } from './utils';
-import logEvent from 'api/common/logEvent';
-import { Events } from 'constants/events';
-import { getAbsoluteUrl } from 'utils/basePath';
-
-import type { V2Dashboard } from '../../utils';
-
-const { Option } = Select;
-
-interface Props {
-	dashboard: V2Dashboard | undefined;
-	onRefetch: () => void;
-}
-
-// Convert V2 tags ({key, value}[]) into "key:value" strings for the V1
-// AddTags component (which expects string[]), and back on save.
-//
-// V2 tags require both `key` and `value` to be non-empty server-side
-// (returns `tag_invalid_value` otherwise). To preserve the V1 single-word
-// tag UX, a string with no ':' is round-tripped as `{key: x, value: x}` and
-// collapsed back to just `x` for display.
-function tagsToStrings(tags: TagtypesPostableTagDTO[]): string[] {
-	return tags.map((t) => (t.key === t.value ? t.key : `${t.key}:${t.value}`));
-}
-
-function stringsToTags(tagStrings: string[]): TagtypesPostableTagDTO[] {
-	return tagStrings
-		.map((s) => {
-			const trimmed = s.trim();
-			const idx = trimmed.indexOf(':');
-			if (idx === -1) {return { key: trimmed, value: trimmed };}
-			const key = trimmed.slice(0, idx).trim();
-			const value = trimmed.slice(idx + 1).trim();
-			return { key, value: value || key };
-		})
-		.filter((t) => t.key.length > 0);
-}
-
-function GeneralDashboardSettingsV2({
-	dashboard,
-	onRefetch,
-}: Props): JSX.Element {
-	const id = dashboard?.id ?? '';
-
-	const [cursorSyncMode, setCursorSyncMode] = useDashboardCursorSyncMode(id);
-	const [syncTooltipFilterMode, setSyncTooltipFilterMode] =
-		useSyncTooltipFilterMode(id);
-
-	const title = dashboard?.spec?.display?.name ?? '';
-	const description = dashboard?.spec?.display?.description ?? '';
-	const image = dashboard?.image || Base64Icons[0];
-	const tagsAsStrings = useMemo(
-		() => tagsToStrings(dashboard?.tags ?? []),
-		[dashboard?.tags],
-	);
-
-	const [updatedTitle, setUpdatedTitle] = useState<string>(title);
-	const [updatedTags, setUpdatedTags] = useState<string[]>(tagsAsStrings);
-	const [updatedDescription, setUpdatedDescription] = useState<string>(
-		description,
-	);
-	const [updatedImage, setUpdatedImage] = useState<string>(image);
-	const [isSaving, setIsSaving] = useState<boolean>(false);
-	const [numberOfUnsavedChanges, setNumberOfUnsavedChanges] = useState<number>(
-		0,
-	);
-
-	const { t } = useTranslation('common');
-	const { showErrorModal } = useErrorModal();
-
-	// Sync state when dashboard refetches after a save
-	useEffect(() => {
-		setUpdatedTitle(title);
-		setUpdatedDescription(description);
-		setUpdatedImage(image);
-		setUpdatedTags(tagsAsStrings);
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [dashboard?.updatedAt]);
-
-	const buildPatch = (): DashboardtypesJSONPatchOperationDTO[] => {
-		const ops: DashboardtypesJSONPatchOperationDTO[] = [];
-		const replace = (
-			path: string,
-			value: unknown,
-		): DashboardtypesJSONPatchOperationDTO => ({
-			op: 'replace' as DashboardtypesJSONPatchOperationDTO['op'],
-			path,
-			value,
-		});
-
-		if (updatedTitle !== title) {
-			ops.push(replace('/spec/display/name', updatedTitle));
-		}
-		if (updatedDescription !== description) {
-			ops.push(replace('/spec/display/description', updatedDescription));
-		}
-		if (updatedImage !== image) {
-			ops.push(replace('/image', updatedImage));
-		}
-		if (!isEqual(updatedTags, tagsAsStrings)) {
-			ops.push(replace('/tags', stringsToTags(updatedTags)));
-		}
-		return ops;
-	};
-
-	const onSaveHandler = async (): Promise<void> => {
-		if (!id) {return;}
-		const ops = buildPatch();
-		if (ops.length === 0) {return;}
-
-		try {
-			setIsSaving(true);
-			await patchDashboardV2({ id }, ops);
-			toast.success('Dashboard updated');
-			onRefetch();
-		} catch (error) {
-			showErrorModal(error as APIError);
-		} finally {
-			setIsSaving(false);
-		}
-	};
-
-	useEffect(() => {
-		let n = 0;
-		const initialValues = [title, description, tagsAsStrings, image];
-		const updatedValues = [
-			updatedTitle,
-			updatedDescription,
-			updatedTags,
-			updatedImage,
-		];
-		initialValues.forEach((val, index) => {
-			if (!isEqual(val, updatedValues[index])) {n += 1;}
-		});
-		setNumberOfUnsavedChanges(n);
-	}, [
-		description,
-		image,
-		tagsAsStrings,
-		title,
-		updatedDescription,
-		updatedImage,
-		updatedTags,
-		updatedTitle,
-	]);
-
-	const discardHandler = (): void => {
-		setUpdatedTitle(title);
-		setUpdatedImage(image);
-		setUpdatedTags(tagsAsStrings);
-		setUpdatedDescription(description);
-	};
-
-	return (
-		<div className={styles.overviewContent}>
-			<Col className={styles.overviewSettings}>
-				<Space
-					direction="vertical"
-					style={{
-						width: '100%',
-						display: 'flex',
-						flexDirection: 'column',
-						gap: '21px',
-					}}
-				>
-					<div>
-						<Typography className={styles.dashboardName}>Dashboard Name</Typography>
-						<section className={styles.nameIconInput}>
-							<Select
-								defaultActiveFirstOption
-								data-testid="dashboard-image"
-								suffixIcon={null}
-								rootClassName={styles.dashboardImageInput}
-								value={updatedImage}
-								onChange={(value: string): void => setUpdatedImage(value)}
-							>
-								{Base64Icons.map((icon) => (
-									<Option value={icon} key={icon}>
-										<img
-											src={icon}
-											alt="dashboard-icon"
-											className={styles.listItemImage}
-										/>
-									</Option>
-								))}
-							</Select>
-							<Input
-								data-testid="dashboard-name"
-								className={styles.dashboardNameInput}
-								value={updatedTitle}
-								onChange={(e): void => setUpdatedTitle(e.target.value)}
-							/>
-						</section>
-					</div>
-
-					<div>
-						<Typography className={styles.dashboardName}>Description</Typography>
-						<Input.TextArea
-							data-testid="dashboard-desc"
-							rows={6}
-							value={updatedDescription}
-							className={styles.descriptionTextArea}
-							onChange={(e): void => setUpdatedDescription(e.target.value)}
-						/>
-					</div>
-					<div>
-						<Typography className={styles.dashboardName}>Tags</Typography>
-						<AddTags tags={updatedTags} setTags={setUpdatedTags} />
-					</div>
-				</Space>
-			</Col>
-			<Col className={`${styles.overviewSettings} ${styles.crossPanelSyncGroup}`}>
-				<div className={styles.crossPanelSyncSectionHeader}>
-					<Typography.Text className={styles.crossPanelSyncSectionTitle}>
-						Cross-Panel Sync
-					</Typography.Text>
-					<Tooltip
-						title={
-							<div className={styles.crossPanelSyncTooltipContent}>
-								<strong className={styles.crossPanelSyncTooltipTitle}>
-									Cross-Panel Sync
-								</strong>
-								<span className={styles.crossPanelSyncTooltipDescription}>
-									Sync crosshair and tooltip across all the dashboard panels
-								</span>
-								<a
-									href="https://signoz.io/docs/dashboards/interactivity/#cross-panel-sync"
-									target="_blank"
-									rel="noopener noreferrer"
-									className={styles.crossPanelSyncTooltipDocLink}
-								>
-									Learn more
-									<ExternalLink size={12} />
-								</a>
-							</div>
-						}
-						placement="top"
-						mouseEnterDelay={0.5}
-					>
-						<SolidInfoCircle size="md" className={styles.crossPanelSyncInfoIcon} />
-					</Tooltip>
-				</div>
-				<div className={styles.crossPanelSyncRow}>
-					<div className={styles.crossPanelSyncInfo}>
-						<Typography.Text className={styles.crossPanelSyncTitle}>
-							Sync Mode
-						</Typography.Text>
-						<Typography.Text className={styles.crossPanelSyncDescription}>
-							Sync crosshair and tooltip across all the dashboard panels
-						</Typography.Text>
-					</div>
-					<Radio.Group
-						value={cursorSyncMode}
-						onChange={(e): void => {
-							setCursorSyncMode(e.target.value as DashboardCursorSync);
-						}}
-					>
-						<Radio.Button value={DashboardCursorSync.None}>No Sync</Radio.Button>
-						<Radio.Button value={DashboardCursorSync.Crosshair}>
-							Crosshair
-						</Radio.Button>
-						<Radio.Button value={DashboardCursorSync.Tooltip}>Tooltip</Radio.Button>
-					</Radio.Group>
-				</div>
-				{cursorSyncMode === DashboardCursorSync.Tooltip && (
-					<div className={styles.crossPanelSyncRow}>
-						<div className={styles.crossPanelSyncInfo}>
-							<Typography.Text className={styles.crossPanelSyncTitle}>
-								Synced Tooltip Series
-							</Typography.Text>
-							<Typography.Text className={styles.crossPanelSyncDescription}>
-								Show only series that intersect on group-by, or every series with the
-								matching ones highlighted
-							</Typography.Text>
-						</div>
-						<Radio.Group
-							value={syncTooltipFilterMode}
-							onChange={(e): void => {
-								logEvent(Events.TOOLTIP_SYNC_MODE_CHANGED, {
-									path: getAbsoluteUrl(window.location.pathname),
-									mode: e.target.value,
-								});
-								setSyncTooltipFilterMode(e.target.value as SyncTooltipFilterMode);
-							}}
-						>
-							<Radio.Button value={SyncTooltipFilterMode.All}>All</Radio.Button>
-							<Radio.Button value={SyncTooltipFilterMode.Filtered}>
-								Filtered
-							</Radio.Button>
-						</Radio.Group>
-					</div>
-				)}
-			</Col>
-			{numberOfUnsavedChanges > 0 && (
-				<div className={styles.overviewSettingsFooter}>
-					<div className={styles.unsaved}>
-						<div className={styles.unsavedDot} />
-						<Typography.Text className={styles.unsavedChanges}>
-							{numberOfUnsavedChanges} unsaved change
-							{numberOfUnsavedChanges > 1 && 's'}
-						</Typography.Text>
-					</div>
-					<div className={styles.footerActionBtns}>
-						<Button
-							disabled={isSaving}
-							icon={<X size={14} />}
-							onClick={discardHandler}
-							type="text"
-							className={styles.discardBtn}
-						>
-							Discard
-						</Button>
-						<Button
-							style={{ margin: '16px 0' }}
-							disabled={isSaving}
-							loading={isSaving}
-							icon={<Check size={14} />}
-							data-testid="save-dashboard-config"
-							onClick={onSaveHandler}
-							type="primary"
-							className={styles.saveBtn}
-						>
-							{t('save')}
-						</Button>
-					</div>
-				</div>
-			)}
-		</div>
-	);
-}
-
-export default GeneralDashboardSettingsV2;
--- a/frontend/src/container/DashboardContainerV2/DashboardSettings/General/styles.ts
+++ b/frontend/src/container/DashboardContainerV2/DashboardSettings/General/styles.ts
@@ -1,20 +0,0 @@
-import { Button as ButtonComponent, Drawer } from 'antd';
-import styled from 'styled-components';
-
-export const Container = styled.div`
-	margin-top: 0.5rem;
-`;
-
-export const Button = styled(ButtonComponent)`
-	&&& {
-		display: flex;
-		align-items: center;
-	}
-`;
-
-export const DrawerContainer = styled(Drawer)`
-	.ant-drawer-header {
-		padding: 0;
-		border: none;
-	}
-`;
--- a/frontend/src/container/DashboardContainerV2/DashboardSettings/General/utils.tsx
+++ b/frontend/src/container/DashboardContainerV2/DashboardSettings/General/utils.tsx
--- a/frontend/src/container/DashboardContainerV2/DashboardSettings/Variables/VariableItem/CustomFields.tsx
+++ b/frontend/src/container/DashboardContainerV2/DashboardSettings/Variables/VariableItem/CustomFields.tsx
@@ -1,46 +0,0 @@
-import { Collapse, Input } from 'antd';
-import { Typography } from '@signozhq/ui/typography';
-
-import { VariableItemRow } from '../../../../DashboardContainer/DashboardSettings/DashboardVariableSettings/VariableItem/styles';
-
-interface Props {
-	customValue: string;
-	onChange: (v: string) => void;
-	error?: string;
-}
-
-function CustomFields({ customValue, onChange, error }: Props): JSX.Element {
-	return (
-		<VariableItemRow className="variable-custom-section">
-			<Collapse
-				collapsible="header"
-				rootClassName="custom-collapse"
-				defaultActiveKey={['1']}
-				items={[
-					{
-						key: '1',
-						label: 'Options',
-						children: (
-							<>
-								<Input.TextArea
-									value={customValue}
-									placeholder="Enter options separated by commas."
-									rootClassName="comma-input"
-									onChange={(e): void => onChange(e.target.value)}
-									data-testid="variable-custom-value-v2"
-								/>
-								{error ? (
-									<div>
-										<Typography.Text color="warning">{error}</Typography.Text>
-									</div>
-								) : null}
-							</>
-						),
-					},
-				]}
-			/>
-		</VariableItemRow>
-	);
-}
-
-export default CustomFields;
--- a/frontend/src/container/DashboardContainerV2/DashboardSettings/Variables/VariableItem/DynamicFields.tsx
+++ b/frontend/src/container/DashboardContainerV2/DashboardSettings/Variables/VariableItem/DynamicFields.tsx
@@ -1,74 +0,0 @@
-import { useCallback, useMemo } from 'react';
-import DynamicVariable from 'container/DashboardContainer/DashboardSettings/DashboardVariableSettings/VariableItem/DynamicVariable/DynamicVariable';
-import { TelemetrytypesSignalDTO } from 'api/generated/services/sigNoz.schemas';
-
-interface Props {
-	dynamicName: string;
-	dynamicSignal: TelemetrytypesSignalDTO | undefined;
-	onNameChange: (v: string) => void;
-	onSignalChange: (v: TelemetrytypesSignalDTO | undefined) => void;
-	error?: string;
-}
-
-// V1 DynamicVariable stores the source as a UI-friendly label:
-// 'All telemetry' | 'Logs' | 'Metrics' | 'Traces'. V2 stores the API enum
-// signal value: undefined (= all) | 'metrics' | 'traces' | 'logs'. We convert
-// at this boundary so the V1 component can stay untouched.
-const ALL_TELEMETRY = 'All telemetry';
-
-function signalToV1Source(
-	signal: TelemetrytypesSignalDTO | undefined,
-): string {
-	if (signal === TelemetrytypesSignalDTO.logs) {return 'Logs';}
-	if (signal === TelemetrytypesSignalDTO.metrics) {return 'Metrics';}
-	if (signal === TelemetrytypesSignalDTO.traces) {return 'Traces';}
-	return ALL_TELEMETRY;
-}
-
-function v1SourceToSignal(
-	source: string,
-): TelemetrytypesSignalDTO | undefined {
-	if (source === 'Logs') {return TelemetrytypesSignalDTO.logs;}
-	if (source === 'Metrics') {return TelemetrytypesSignalDTO.metrics;}
-	if (source === 'Traces') {return TelemetrytypesSignalDTO.traces;}
-	return undefined;
-}
-
-function DynamicFields({
-	dynamicName,
-	dynamicSignal,
-	onNameChange,
-	onSignalChange,
-	error,
-}: Props): JSX.Element {
-	const v1Value = useMemo(
-		() => ({ name: dynamicName, value: signalToV1Source(dynamicSignal) }),
-		[dynamicName, dynamicSignal],
-	);
-
-	const setV1Value: React.Dispatch<
-		React.SetStateAction<{ name: string; value: string } | undefined>
-	> = useCallback(
-		(action) => {
-			const next =
-				typeof action === 'function' ? action(v1Value) : action;
-			if (!next) {return;}
-			if (next.name !== dynamicName) {onNameChange(next.name);}
-			const nextSignal = v1SourceToSignal(next.value);
-			if (nextSignal !== dynamicSignal) {onSignalChange(nextSignal);}
-		},
-		[v1Value, dynamicName, dynamicSignal, onNameChange, onSignalChange],
-	);
-
-	return (
-		<div className="variable-dynamic-section">
-			<DynamicVariable
-				setDynamicVariablesSelectedValue={setV1Value}
-				dynamicVariablesSelectedValue={v1Value}
-				errorAttributeKeyMessage={error}
-			/>
-		</div>
-	);
-}
-
-export default DynamicFields;
--- a/frontend/src/container/DashboardContainerV2/DashboardSettings/Variables/VariableItem/Footer.tsx
+++ b/frontend/src/container/DashboardContainerV2/DashboardSettings/Variables/VariableItem/Footer.tsx
@@ -1,43 +0,0 @@
-import { Button } from 'antd';
-import { Check, X } from '@signozhq/icons';
-
-import { VariableItemRow } from '../../../../DashboardContainer/DashboardSettings/DashboardVariableSettings/VariableItem/styles';
-
-interface Props {
-	saving: boolean;
-	canSave: boolean;
-	onSave: () => void;
-	onCancel: () => void;
-}
-
-function Footer({ saving, canSave, onSave, onCancel }: Props): JSX.Element {
-	return (
-		<div className="variable-item-footer">
-			<VariableItemRow>
-				<Button
-					type="default"
-					onClick={onCancel}
-					icon={<X size={14} />}
-					className="footer-btn-discard"
-					disabled={saving}
-					data-testid="variable-cancel-v2"
-				>
-					Discard
-				</Button>
-				<Button
-					type="primary"
-					onClick={onSave}
-					icon={<Check size={14} />}
-					className="footer-btn-save"
-					loading={saving}
-					disabled={!canSave || saving}
-					data-testid="variable-save-v2"
-				>
-					Save Variable
-				</Button>
-			</VariableItemRow>
-		</div>
-	);
-}
-
-export default Footer;
--- a/frontend/src/container/DashboardContainerV2/DashboardSettings/Variables/VariableItem/ListBasicOptions.tsx
+++ b/frontend/src/container/DashboardContainerV2/DashboardSettings/Variables/VariableItem/ListBasicOptions.tsx
@@ -1,80 +0,0 @@
-import type { V2VariableKind } from '../types';
-import AllOptionRow from './ListOptions/AllOptionRow';
-import CapturingRegexpRow from './ListOptions/CapturingRegexpRow';
-import CustomAllValueRow from './ListOptions/CustomAllValueRow';
-import DefaultValueRow from './ListOptions/DefaultValueRow';
-import MultiSelectRow from './ListOptions/MultiSelectRow';
-import SortRow from './ListOptions/SortRow';
-
-interface Props {
-	kind: V2VariableKind;
-	allowAllValue: boolean;
-	allowMultiple: boolean;
-	sort: string;
-	defaultValue: string;
-	customAllValue: string;
-	capturingRegexp: string;
-	previewValues: string[];
-	onAllowAllChange: (v: boolean) => void;
-	onAllowMultipleChange: (v: boolean) => void;
-	onSortChange: (v: string) => void;
-	onDefaultValueChange: (v: string) => void;
-	onCustomAllValueChange: (v: string) => void;
-	onCapturingRegexpChange: (v: string) => void;
-}
-
-function ListBasicOptions({
-	kind,
-	allowAllValue,
-	allowMultiple,
-	sort,
-	defaultValue,
-	customAllValue,
-	capturingRegexp,
-	previewValues,
-	onAllowAllChange,
-	onAllowMultipleChange,
-	onSortChange,
-	onDefaultValueChange,
-	onCustomAllValueChange,
-	onCapturingRegexpChange,
-}: Props): JSX.Element {
-	return (
-		<>
-			<SortRow sort={sort} onChange={onSortChange} />
-			<MultiSelectRow
-				allowMultiple={allowMultiple}
-				onChange={(v): void => {
-					onAllowMultipleChange(v);
-					if (!v) {onAllowAllChange(false);}
-				}}
-			/>
-			{allowMultiple && kind !== 'DYNAMIC' ? (
-				<AllOptionRow
-					allowAllValue={allowAllValue}
-					onChange={onAllowAllChange}
-				/>
-			) : null}
-			{allowAllValue ? (
-				<CustomAllValueRow
-					customAllValue={customAllValue}
-					onChange={onCustomAllValueChange}
-				/>
-			) : null}
-			{kind === 'QUERY' || kind === 'DYNAMIC' ? (
-				<CapturingRegexpRow
-					capturingRegexp={capturingRegexp}
-					onChange={onCapturingRegexpChange}
-				/>
-			) : null}
-			<DefaultValueRow
-				kind={kind}
-				defaultValue={defaultValue}
-				previewValues={previewValues}
-				onChange={onDefaultValueChange}
-			/>
-		</>
-	);
-}
-
-export default ListBasicOptions;
--- a/frontend/src/container/DashboardContainerV2/DashboardSettings/Variables/VariableItem/ListOptions/AllOptionRow.tsx
+++ b/frontend/src/container/DashboardContainerV2/DashboardSettings/Variables/VariableItem/ListOptions/AllOptionRow.tsx
@@ -1,29 +0,0 @@
-// eslint-disable-next-line signoz/no-antd-components -- TODO: migrate to @signozhq/ui/switch
-import { Switch } from 'antd';
-import { Typography } from '@signozhq/ui/typography';
-
-import { LabelContainer, VariableItemRow } from '../../../../../DashboardContainer/DashboardSettings/DashboardVariableSettings/VariableItem/styles';
-
-interface Props {
-	allowAllValue: boolean;
-	onChange: (v: boolean) => void;
-}
-
-function AllOptionRow({ allowAllValue, onChange }: Props): JSX.Element {
-	return (
-		<VariableItemRow className="all-option-section">
-			<LabelContainer>
-				<Typography className="typography-variables">
-					Include an option for ALL values
-				</Typography>
-			</LabelContainer>
-			<Switch
-				checked={allowAllValue}
-				onChange={onChange}
-				data-testid="variable-allow-all-v2"
-			/>
-		</VariableItemRow>
-	);
-}
-
-export default AllOptionRow;
--- a/frontend/src/container/DashboardContainerV2/DashboardSettings/Variables/VariableItem/ListOptions/CapturingRegexpRow.tsx
+++ b/frontend/src/container/DashboardContainerV2/DashboardSettings/Variables/VariableItem/ListOptions/CapturingRegexpRow.tsx
@@ -1,43 +0,0 @@
-import { Input } from 'antd';
-import { Typography } from '@signozhq/ui/typography';
-
-import { LabelContainer, VariableItemRow } from '../../../../../DashboardContainer/DashboardSettings/DashboardVariableSettings/VariableItem/styles';
-
-interface Props {
-	capturingRegexp: string;
-	onChange: (v: string) => void;
-}
-
-function CapturingRegexpRow({
-	capturingRegexp,
-	onChange,
-}: Props): JSX.Element {
-	return (
-		<VariableItemRow className="capturing-regexp-section">
-			<LabelContainer>
-				<Typography
-					className="typography-variables"
-					style={{ display: 'block' }}
-				>
-					Capturing regex
-				</Typography>
-				<Typography
-					className="default-value-description"
-					style={{ display: 'block' }}
-				>
-					Regex applied to each value; the first capture group becomes the
-					selectable option.
-				</Typography>
-			</LabelContainer>
-			<Input
-				value={capturingRegexp}
-				placeholder="e.g. env-(.*)-\\d+"
-				onChange={(e): void => onChange(e.target.value)}
-				style={{ width: 400 }}
-				data-testid="variable-capturing-regexp-v2"
-			/>
-		</VariableItemRow>
-	);
-}
-
-export default CapturingRegexpRow;
--- a/frontend/src/container/DashboardContainerV2/DashboardSettings/Variables/VariableItem/ListOptions/CustomAllValueRow.tsx
+++ b/frontend/src/container/DashboardContainerV2/DashboardSettings/Variables/VariableItem/ListOptions/CustomAllValueRow.tsx
@@ -1,42 +0,0 @@
-import { Input } from 'antd';
-import { Typography } from '@signozhq/ui/typography';
-
-import { LabelContainer, VariableItemRow } from '../../../../../DashboardContainer/DashboardSettings/DashboardVariableSettings/VariableItem/styles';
-
-interface Props {
-	customAllValue: string;
-	onChange: (v: string) => void;
-}
-
-function CustomAllValueRow({
-	customAllValue,
-	onChange,
-}: Props): JSX.Element {
-	return (
-		<VariableItemRow className="custom-all-value-section">
-			<LabelContainer>
-				<Typography
-					className="typography-variables"
-					style={{ display: 'block' }}
-				>
-					Custom &quot;ALL&quot; value
-				</Typography>
-				<Typography
-					className="default-value-description"
-					style={{ display: 'block' }}
-				>
-					Literal value emitted when the user picks ALL (e.g. * or .*).
-				</Typography>
-			</LabelContainer>
-			<Input
-				value={customAllValue}
-				placeholder="Leave blank to send the full union of values"
-				onChange={(e): void => onChange(e.target.value)}
-				style={{ width: 400 }}
-				data-testid="variable-custom-all-value-v2"
-			/>
-		</VariableItemRow>
-	);
-}
-
-export default CustomAllValueRow;
--- a/frontend/src/container/DashboardContainerV2/DashboardSettings/Variables/VariableItem/ListOptions/DefaultValueRow.tsx
+++ b/frontend/src/container/DashboardContainerV2/DashboardSettings/Variables/VariableItem/ListOptions/DefaultValueRow.tsx
@@ -1,43 +0,0 @@
-import CustomSelect from 'components/NewSelect/CustomSelect';
-import { Typography } from '@signozhq/ui/typography';
-
-import { LabelContainer, VariableItemRow } from '../../../../../DashboardContainer/DashboardSettings/DashboardVariableSettings/VariableItem/styles';
-import type { V2VariableKind } from '../../types';
-
-interface Props {
-	kind: V2VariableKind;
-	defaultValue: string;
-	previewValues: string[];
-	onChange: (v: string) => void;
-}
-
-function DefaultValueRow({
-	kind,
-	defaultValue,
-	previewValues,
-	onChange,
-}: Props): JSX.Element {
-	const description =
-		kind === 'QUERY'
-			? 'Click Test Run Query to see the values or add custom value'
-			: 'Select a value from the preview values or add custom value';
-
-	return (
-		<VariableItemRow className="default-value-section">
-			<LabelContainer>
-				<Typography className="typography-variables">Default Value</Typography>
-				<Typography className="default-value-description">
-					{description}
-				</Typography>
-			</LabelContainer>
-			<CustomSelect
-				placeholder="Select a default value"
-				value={defaultValue}
-				onChange={(v): void => onChange((v as string) ?? '')}
-				options={previewValues.map((v) => ({ label: v, value: v }))}
-			/>
-		</VariableItemRow>
-	);
-}
-
-export default DefaultValueRow;
--- a/frontend/src/container/DashboardContainerV2/DashboardSettings/Variables/VariableItem/ListOptions/MultiSelectRow.tsx
+++ b/frontend/src/container/DashboardContainerV2/DashboardSettings/Variables/VariableItem/ListOptions/MultiSelectRow.tsx
@@ -1,29 +0,0 @@
-// eslint-disable-next-line signoz/no-antd-components -- TODO: migrate to @signozhq/ui/switch
-import { Switch } from 'antd';
-import { Typography } from '@signozhq/ui/typography';
-
-import { LabelContainer, VariableItemRow } from '../../../../../DashboardContainer/DashboardSettings/DashboardVariableSettings/VariableItem/styles';
-
-interface Props {
-	allowMultiple: boolean;
-	onChange: (v: boolean) => void;
-}
-
-function MultiSelectRow({ allowMultiple, onChange }: Props): JSX.Element {
-	return (
-		<VariableItemRow className="multiple-values-section">
-			<LabelContainer>
-				<Typography className="typography-variables">
-					Enable multiple values to be checked
-				</Typography>
-			</LabelContainer>
-			<Switch
-				checked={allowMultiple}
-				onChange={onChange}
-				data-testid="variable-allow-multiple-v2"
-			/>
-		</VariableItemRow>
-	);
-}
-
-export default MultiSelectRow;
--- a/frontend/src/container/DashboardContainerV2/DashboardSettings/Variables/VariableItem/ListOptions/SortRow.tsx
+++ b/frontend/src/container/DashboardContainerV2/DashboardSettings/Variables/VariableItem/ListOptions/SortRow.tsx
@@ -1,29 +0,0 @@
-import { Select } from 'antd';
-import { Typography } from '@signozhq/ui/typography';
-
-import { LabelContainer, VariableItemRow } from '../../../../../DashboardContainer/DashboardSettings/DashboardVariableSettings/VariableItem/styles';
-import { SORT_OPTIONS } from '../../types';
-
-interface Props {
-	sort: string;
-	onChange: (v: string) => void;
-}
-
-function SortRow({ sort, onChange }: Props): JSX.Element {
-	return (
-		<VariableItemRow className="sort-values-section">
-			<LabelContainer>
-				<Typography className="typography-variables">Sort Values</Typography>
-			</LabelContainer>
-			<Select
-				value={sort}
-				onChange={onChange}
-				options={SORT_OPTIONS}
-				className="sort-input"
-				data-testid="variable-sort-v2"
-			/>
-		</VariableItemRow>
-	);
-}
-
-export default SortRow;
--- a/frontend/src/container/DashboardContainerV2/DashboardSettings/Variables/VariableItem/NameDisplay.tsx
+++ b/frontend/src/container/DashboardContainerV2/DashboardSettings/Variables/VariableItem/NameDisplay.tsx
@@ -1,59 +0,0 @@
-import { Input } from 'antd';
-import { Typography } from '@signozhq/ui/typography';
-
-import { LabelContainer, VariableItemRow } from '../../../../DashboardContainer/DashboardSettings/DashboardVariableSettings/VariableItem/styles';
-
-interface Props {
-	name: string;
-	description: string;
-	onNameChange: (v: string) => void;
-	onDescriptionChange: (v: string) => void;
-	nameError?: string;
-}
-
-function NameDisplay({
-	name,
-	description,
-	onNameChange,
-	onDescriptionChange,
-	nameError,
-}: Props): JSX.Element {
-	return (
-		<>
-			<VariableItemRow className="variable-name-section">
-				<LabelContainer>
-					<Typography className="typography-variables">Name</Typography>
-				</LabelContainer>
-				<div>
-					<Input
-						placeholder="Unique name of the variable"
-						value={name}
-						className="name-input"
-						onChange={(e): void => onNameChange(e.target.value)}
-						data-testid="variable-name-v2"
-					/>
-					{nameError ? (
-						<div>
-							<Typography.Text color="warning">{nameError}</Typography.Text>
-						</div>
-					) : null}
-				</div>
-			</VariableItemRow>
-			<VariableItemRow className="variable-description-section">
-				<LabelContainer>
-					<Typography className="typography-variables">Description</Typography>
-				</LabelContainer>
-				<Input.TextArea
-					value={description}
-					placeholder="Enter a description for the variable"
-					className="description-input"
-					rows={3}
-					onChange={(e): void => onDescriptionChange(e.target.value)}
-					data-testid="variable-description-v2"
-				/>
-			</VariableItemRow>
-		</>
-	);
-}
-
-export default NameDisplay;
--- a/frontend/src/container/DashboardContainerV2/DashboardSettings/Variables/VariableItem/PreviewValues.tsx
+++ b/frontend/src/container/DashboardContainerV2/DashboardSettings/Variables/VariableItem/PreviewValues.tsx
@@ -1,33 +0,0 @@
-import { Badge } from '@signozhq/ui/badge';
-import { Typography } from '@signozhq/ui/typography';
-import { orange } from '@ant-design/colors';
-
-import { LabelContainer, VariableItemRow } from '../../../../DashboardContainer/DashboardSettings/DashboardVariableSettings/VariableItem/styles';
-
-interface Props {
-	previewValues: string[];
-	error?: string | null;
-}
-
-function PreviewValues({ previewValues, error }: Props): JSX.Element {
-	return (
-		<VariableItemRow className="variables-preview-section">
-			<LabelContainer style={{ width: '100%' }}>
-				<Typography className="typography-variables">
-					Preview of Values
-				</Typography>
-			</LabelContainer>
-			<div className="preview-values">
-				{error ? (
-					<Typography style={{ color: orange[5] }}>{error}</Typography>
-				) : (
-					previewValues.map((v, idx) => (
-						<Badge key={`${v}${idx}`}>{v.toString()}</Badge>
-					))
-				)}
-			</div>
-		</VariableItemRow>
-	);
-}
-
-export default PreviewValues;
--- a/frontend/src/container/DashboardContainerV2/DashboardSettings/Variables/VariableItem/QueryFields.tsx
+++ b/frontend/src/container/DashboardContainerV2/DashboardSettings/Variables/VariableItem/QueryFields.tsx
@@ -1,66 +0,0 @@
-import { Button } from 'antd';
-import { Typography } from '@signozhq/ui/typography';
-import Editor from 'components/Editor';
-
-import { LabelContainer } from '../../../../DashboardContainer/DashboardSettings/DashboardVariableSettings/VariableItem/styles';
-
-interface Props {
-	queryValue: string;
-	onChange: (v: string) => void;
-	onTestRun?: () => void;
-	testRunLoading?: boolean;
-	error?: string;
-}
-
-function QueryFields({
-	queryValue,
-	onChange,
-	onTestRun,
-	testRunLoading,
-	error,
-}: Props): JSX.Element {
-	return (
-		<div className="query-container">
-			<LabelContainer>
-				<Typography>Query</Typography>
-			</LabelContainer>
-
-			<div style={{ flex: 1, position: 'relative' }}>
-				<Editor
-					language="sql"
-					value={queryValue}
-					onChange={onChange}
-					height="240px"
-					options={{
-						fontSize: 13,
-						wordWrap: 'on',
-						lineNumbers: 'off',
-						glyphMargin: false,
-						folding: false,
-						lineDecorationsWidth: 0,
-						lineNumbersMinChars: 0,
-						minimap: { enabled: false },
-					}}
-				/>
-				{onTestRun ? (
-					<Button
-						type="primary"
-						size="small"
-						onClick={onTestRun}
-						style={{ position: 'absolute', bottom: 0 }}
-						loading={testRunLoading}
-					>
-						Test Run Query
-					</Button>
-				) : null}
-				{error ? (
-					<div>
-						<Typography.Text color="warning">{error}</Typography.Text>
-					</div>
-				) : null}
-			</div>
-		</div>
-	);
-}
-
-export default QueryFields;
--- a/frontend/src/container/DashboardContainerV2/DashboardSettings/Variables/VariableItem/TextFields.tsx
+++ b/frontend/src/container/DashboardContainerV2/DashboardSettings/Variables/VariableItem/TextFields.tsx
@@ -1,37 +0,0 @@
-import { Input } from 'antd';
-import { Typography } from '@signozhq/ui/typography';
-
-import { LabelContainer, VariableItemRow } from '../../../../DashboardContainer/DashboardSettings/DashboardVariableSettings/VariableItem/styles';
-
-interface Props {
-	textValue: string;
-	onChange: (v: string) => void;
-	error?: string;
-}
-
-function TextFields({ textValue, onChange, error }: Props): JSX.Element {
-	return (
-		<VariableItemRow className="variable-textbox-section">
-			<LabelContainer>
-				<Typography className="typography-variables">Default Value</Typography>
-			</LabelContainer>
-			<div>
-				<Input
-					value={textValue}
-					className="default-input"
-					onChange={(e): void => onChange(e.target.value)}
-					placeholder="Enter a default value (if any)..."
-					style={{ width: 400 }}
-					data-testid="variable-text-value-v2"
-				/>
-				{error ? (
-					<div>
-						<Typography.Text color="warning">{error}</Typography.Text>
-					</div>
-				) : null}
-			</div>
-		</VariableItemRow>
-	);
-}
-
-export default TextFields;
--- a/frontend/src/container/DashboardContainerV2/DashboardSettings/Variables/VariableItem/TypeSelector.tsx
+++ b/frontend/src/container/DashboardContainerV2/DashboardSettings/Variables/VariableItem/TypeSelector.tsx
@@ -1,127 +0,0 @@
-import { Button } from 'antd';
-import { Badge } from '@signozhq/ui/badge';
-import { Typography } from '@signozhq/ui/typography';
-import {
-	ClipboardType,
-	DatabaseZap,
-	Info,
-	LayoutList,
-	Pyramid,
-} from '@signozhq/icons';
-import { Color } from '@signozhq/design-tokens';
-import cx from 'classnames';
-import TextToolTip from 'components/TextToolTip';
-import { useIsDarkMode } from 'hooks/useDarkMode';
-
-import { LabelContainer, VariableItemRow } from '../../../../DashboardContainer/DashboardSettings/DashboardVariableSettings/VariableItem/styles';
-import type { V2VariableKind } from '../types';
-
-import '../../../../DashboardContainer/DashboardSettings/DashboardVariableSettings/VariableItem/VariableItem.styles.scss';
-
-interface Props {
-	kind: V2VariableKind;
-	onChange: (kind: V2VariableKind) => void;
-}
-
-function TypeSelector({ kind, onChange }: Props): JSX.Element {
-	const isDarkMode = useIsDarkMode();
-
-	return (
-		<VariableItemRow className="variable-type-section">
-			<LabelContainer className="variable-type-label-container">
-				<Typography className="typography-variables">Variable Type</Typography>
-				<TextToolTip
-					text="Learn more about supported variable types"
-					url="https://signoz.io/docs/userguide/manage-variables/#supported-variable-types"
-					urlText="here"
-					useFilledIcon={false}
-					outlinedIcon={
-						<Info
-							size={14}
-							style={{
-								color: isDarkMode ? Color.BG_VANILLA_100 : Color.BG_INK_500,
-								marginTop: 1,
-							}}
-						/>
-					}
-				/>
-			</LabelContainer>
-
-			<div className="variable-type-btn-group">
-				<Button
-					type="text"
-					icon={<Pyramid size={14} />}
-					className={cx(
-						'variable-type-btn',
-						kind === 'DYNAMIC' ? 'selected' : '',
-					)}
-					onClick={(): void => onChange('DYNAMIC')}
-					data-testid="variable-type-dynamic-v2"
-				>
-					Dynamic
-					<Badge className="sidenav-beta-tag" color="robin">
-						Beta
-					</Badge>
-				</Button>
-				<Button
-					type="text"
-					icon={<ClipboardType size={14} />}
-					className={cx(
-						'variable-type-btn',
-						kind === 'TEXT' ? 'selected' : '',
-					)}
-					onClick={(): void => onChange('TEXT')}
-					data-testid="variable-type-text-v2"
-				>
-					Textbox
-				</Button>
-				<Button
-					type="text"
-					icon={<LayoutList size={14} />}
-					className={cx(
-						'variable-type-btn',
-						kind === 'CUSTOM' ? 'selected' : '',
-					)}
-					onClick={(): void => onChange('CUSTOM')}
-					data-testid="variable-type-custom-v2"
-				>
-					Custom
-				</Button>
-				<Button
-					type="text"
-					icon={<DatabaseZap size={14} />}
-					className={cx(
-						'variable-type-btn',
-						kind === 'QUERY' ? 'selected' : '',
-					)}
-					onClick={(): void => onChange('QUERY')}
-					data-testid="variable-type-query-v2"
-				>
-					Query
-					<Badge className="sidenav-beta-tag" color="warning">
-						Not Recommended
-					</Badge>
-					<div onClick={(e): void => e.stopPropagation()}>
-						<TextToolTip
-							text="Learn why we don't recommend"
-							url="https://signoz.io/docs/userguide/manage-variables/#why-avoid-clickhouse-query-variables"
-							urlText="here"
-							useFilledIcon={false}
-							outlinedIcon={
-								<Info
-									size={14}
-									style={{
-										color: isDarkMode ? Color.BG_VANILLA_100 : Color.BG_INK_500,
-										marginTop: 1,
-									}}
-								/>
-							}
-						/>
-					</div>
-				</Button>
-			</div>
-		</VariableItemRow>
-	);
-}
-
-export default TypeSelector;
--- a/frontend/src/container/DashboardContainerV2/DashboardSettings/Variables/VariableItem/index.tsx
+++ b/frontend/src/container/DashboardContainerV2/DashboardSettings/Variables/VariableItem/index.tsx
@@ -1,188 +0,0 @@
-import { useCallback, useMemo, useState } from 'react';
-import { Button } from 'antd';
-import { ArrowLeft } from '@signozhq/icons';
-import { commaValuesParser } from 'lib/dashboardVariables/customCommaValuesParser';
-
-import { draftToVariableDTO, validateDraft } from '../draft';
-import type { SaveCallback, VariableDraft, V2VariableKind } from '../types';
-import CustomFields from './CustomFields';
-import DynamicFields from './DynamicFields';
-import Footer from './Footer';
-import ListBasicOptions from './ListBasicOptions';
-import NameDisplay from './NameDisplay';
-import PreviewValues from './PreviewValues';
-import QueryFields from './QueryFields';
-import TextFields from './TextFields';
-import TypeSelector from './TypeSelector';
-
-import '../../../../DashboardContainer/DashboardSettings/DashboardVariableSettings/VariableItem/VariableItem.styles.scss';
-
-interface Props {
-	initialDraft: VariableDraft;
-	existingNames: string[];
-	saving: boolean;
-	onSave: SaveCallback;
-	onCancel: () => void;
-}
-
-/**
- * Editor for a single V2 variable.
- *
- * Type-switch contract: changing `kind` does NOT clear the per-kind fields
- * the user already typed. They remain in local state and are restored if the
- * user navigates back to the same kind. Only the fields relevant to the
- * active `kind` are written into the V2 envelope on save (see
- * `draftToVariableDTO`).
- */
-function VariableItem({
-	initialDraft,
-	existingNames,
-	saving,
-	onSave,
-	onCancel,
-}: Props): JSX.Element {
-	const [draft, setDraft] = useState<VariableDraft>(initialDraft);
-
-	const update = useCallback(
-		<K extends keyof VariableDraft>(key: K, value: VariableDraft[K]): void => {
-			setDraft((prev) => ({ ...prev, [key]: value }));
-		},
-		[],
-	);
-
-	const onKindChange = useCallback(
-		(kind: V2VariableKind): void => {
-			// Retain every other field — only the discriminator changes.
-			update('kind', kind);
-		},
-		[update],
-	);
-
-	const namesExcludingSelf = useMemo(
-		() => existingNames.filter((n) => n !== initialDraft.name),
-		[existingNames, initialDraft.name],
-	);
-	const validationError = useMemo(
-		() => validateDraft(draft, namesExcludingSelf),
-		[draft, namesExcludingSelf],
-	);
-
-	// Local preview values — currently populated only for CUSTOM (CSV parse).
-	// Query / Dynamic previews are wired in the variable execution subsystem.
-	const previewValues = useMemo<string[]>(() => {
-		if (draft.kind === 'CUSTOM') {
-			return commaValuesParser(draft.customValue).map((v) => String(v));
-		}
-		return [];
-	}, [draft.kind, draft.customValue]);
-
-	const handleSave = useCallback((): void => {
-		if (validationError) {return;}
-		onSave(draftToVariableDTO(draft));
-	}, [draft, validationError, onSave]);
-
-	const errorFor = (
-		field: NonNullable<typeof validationError>['field'],
-	): string | undefined => {
-		if (validationError && validationError.field === field) {
-			return validationError.message;
-		}
-		return undefined;
-	};
-
-	const showListOptions =
-		draft.kind === 'QUERY' || draft.kind === 'CUSTOM' || draft.kind === 'DYNAMIC';
-
-	return (
-		<>
-			<div className="variable-item-container">
-				<div className="all-variables">
-					<Button
-						type="text"
-						className="all-variables-btn"
-						icon={<ArrowLeft size={14} />}
-						onClick={onCancel}
-					>
-						All variables
-					</Button>
-				</div>
-				<div className="variable-item-content">
-					<NameDisplay
-						name={draft.name}
-						description={draft.displayName}
-						onNameChange={(v): void => update('name', v)}
-						onDescriptionChange={(v): void => update('displayName', v)}
-						nameError={errorFor('name')}
-					/>
-
-					<TypeSelector kind={draft.kind} onChange={onKindChange} />
-
-					{draft.kind === 'DYNAMIC' ? (
-						<DynamicFields
-							dynamicName={draft.dynamicName}
-							dynamicSignal={draft.dynamicSignal}
-							onNameChange={(v): void => update('dynamicName', v)}
-							onSignalChange={(v): void => update('dynamicSignal', v)}
-							error={errorFor('dynamicName')}
-						/>
-					) : null}
-					{draft.kind === 'QUERY' ? (
-						<QueryFields
-							queryValue={draft.queryValue}
-							onChange={(v): void => update('queryValue', v)}
-							error={errorFor('queryValue')}
-						/>
-					) : null}
-					{draft.kind === 'CUSTOM' ? (
-						<CustomFields
-							customValue={draft.customValue}
-							onChange={(v): void => update('customValue', v)}
-							error={errorFor('customValue')}
-						/>
-					) : null}
-					{draft.kind === 'TEXT' ? (
-						<TextFields
-							textValue={draft.textValue}
-							onChange={(v): void => update('textValue', v)}
-							error={errorFor('textValue')}
-						/>
-					) : null}
-
-					{showListOptions ? (
-						<>
-							<PreviewValues previewValues={previewValues} />
-							<ListBasicOptions
-								kind={draft.kind}
-								allowAllValue={draft.allowAllValue}
-								allowMultiple={draft.allowMultiple}
-								sort={draft.sort}
-								defaultValue={draft.defaultValue}
-								customAllValue={draft.customAllValue}
-								capturingRegexp={draft.capturingRegexp}
-								previewValues={previewValues}
-								onAllowAllChange={(v): void => update('allowAllValue', v)}
-								onAllowMultipleChange={(v): void => update('allowMultiple', v)}
-								onSortChange={(v): void => update('sort', v)}
-								onDefaultValueChange={(v): void => update('defaultValue', v)}
-								onCustomAllValueChange={(v): void =>
-									update('customAllValue', v)
-								}
-								onCapturingRegexpChange={(v): void =>
-									update('capturingRegexp', v)
-								}
-							/>
-						</>
-					) : null}
-				</div>
-			</div>
-			<Footer
-				saving={saving}
-				canSave={!validationError}
-				onSave={handleSave}
-				onCancel={onCancel}
-			/>
-		</>
-	);
-}
-
-export default VariableItem;
--- a/frontend/src/container/DashboardContainerV2/DashboardSettings/Variables/VariableList/TableRow.tsx
+++ b/frontend/src/container/DashboardContainerV2/DashboardSettings/Variables/VariableList/TableRow.tsx
@@ -1,58 +0,0 @@
-import React from 'react';
-import { CSS } from '@dnd-kit/utilities';
-import { useSortable } from '@dnd-kit/sortable';
-import type { RowProps } from 'antd';
-import { GripVertical } from '@signozhq/icons';
-
-/**
- * Sortable table row that injects a drag handle into the `name` cell —
- * matches V1's [DashboardVariableSettings/index.tsx:31](TableRow component).
- */
-function TableRow({ children, ...props }: RowProps): JSX.Element {
-	const {
-		attributes,
-		listeners,
-		setNodeRef,
-		setActivatorNodeRef,
-		transform,
-		transition,
-		isDragging,
-	} = useSortable({
-		// @ts-expect-error — antd Table's RowProps doesn't type the data-row-key it injects
-		id: props['data-row-key'],
-	});
-
-	const style: React.CSSProperties = {
-		...props.style,
-		transform: CSS.Transform.toString(transform && { ...transform, scaleY: 1 }),
-		transition,
-		...(isDragging ? { position: 'relative', zIndex: 9999 } : {}),
-	};
-
-	return (
-		<tr {...props} ref={setNodeRef} style={style} {...attributes}>
-			{React.Children.map(children, (child) => {
-				const childElement = child as React.ReactElement;
-				if (childElement.key === 'name') {
-					return React.cloneElement(childElement, {
-						key: 'name-with-drag',
-						children: (
-							<div className="variable-name-drag">
-								<GripVertical
-									ref={setActivatorNodeRef as unknown as React.Ref<SVGSVGElement>}
-									style={{ touchAction: 'none', cursor: 'move' }}
-									size="md"
-									{...listeners}
-								/>
-								{child}
-							</div>
-						),
-					});
-				}
-				return childElement;
-			})}
-		</tr>
-	);
-}
-
-export default TableRow;
--- a/frontend/src/container/DashboardContainerV2/DashboardSettings/Variables/VariableList/VariableRow.tsx
+++ b/frontend/src/container/DashboardContainerV2/DashboardSettings/Variables/VariableList/VariableRow.tsx
@@ -1,53 +0,0 @@
-import { Button, Space } from 'antd';
-import { Badge } from '@signozhq/ui/badge';
-import { Typography } from '@signozhq/ui/typography';
-import { PenLine, Trash2 } from '@signozhq/icons';
-
-interface Props {
-	description: string;
-	kindLabel: string;
-	onEdit: () => void;
-	onDelete: () => void;
-}
-
-/**
- * Right cell of the variable table — description text + edit/delete actions.
- * Variable name + kind tag render in the left cell via column config.
- */
-function VariableRow({
-	description,
-	kindLabel,
-	onEdit,
-	onDelete,
-}: Props): JSX.Element {
-	return (
-		<div className="variable-description-actions">
-			<Typography.Text className="variable-description">
-				{description}
-			</Typography.Text>
-			<Space className="actions-btns">
-				<Badge color="sienna" variant="outline">
-					{kindLabel}
-				</Badge>
-				<Button
-					type="text"
-					onClick={onEdit}
-					className="edit-variable-button"
-					data-testid="variable-edit-v2"
-				>
-					<PenLine size={14} />
-				</Button>
-				<Button
-					type="text"
-					onClick={onDelete}
-					className="delete-variable-button"
-					data-testid="variable-delete-v2"
-				>
-					<Trash2 size={14} />
-				</Button>
-			</Space>
-		</div>
-	);
-}
-
-export default VariableRow;
--- a/frontend/src/container/DashboardContainerV2/DashboardSettings/Variables/VariableList/index.tsx
+++ b/frontend/src/container/DashboardContainerV2/DashboardSettings/Variables/VariableList/index.tsx
@@ -1,119 +0,0 @@
-import { Empty, Table } from 'antd';
-import { Typography } from '@signozhq/ui/typography';
-import {
-	DndContext,
-	PointerSensor,
-	useSensor,
-	useSensors,
-	type DragEndEvent,
-} from '@dnd-kit/core';
-import { restrictToVerticalAxis } from '@dnd-kit/modifiers';
-import { arrayMove, SortableContext } from '@dnd-kit/sortable';
-import type { DashboardtypesVariableDTO } from 'api/generated/services/sigNoz.schemas';
-
-import { getVariableKindLabel, getVariableName } from '../draft';
-import TableRow from './TableRow';
-import VariableRow from './VariableRow';
-
-import '../../../../DashboardContainer/DashboardSettings/DashboardSettings.styles.scss';
-
-interface TableEntry {
-	key: string;
-	name: string;
-	description: string;
-	kindLabel: string;
-	index: number;
-}
-
-interface Props {
-	variables: DashboardtypesVariableDTO[];
-	onEdit: (index: number) => void;
-	onDelete: (index: number) => void;
-	onReorder: (next: DashboardtypesVariableDTO[]) => void;
-}
-
-function VariableList({
-	variables,
-	onEdit,
-	onDelete,
-	onReorder,
-}: Props): JSX.Element {
-	const sensors = useSensors(
-		useSensor(PointerSensor, {
-			activationConstraint: { distance: 1 },
-		}),
-	);
-
-	if (variables.length === 0) {
-		return (
-			<Empty
-				image={Empty.PRESENTED_IMAGE_SIMPLE}
-				description={
-					<Typography.Text>
-						No variables yet. Click &quot;Add variable&quot; to create one.
-					</Typography.Text>
-				}
-			/>
-		);
-	}
-
-	const dataSource: TableEntry[] = variables.map((v, idx) => ({
-		key: getVariableName(v) || String(idx),
-		name: getVariableName(v),
-		description:
-			(v.spec as { display?: { name?: string } })?.display?.name ?? '',
-		kindLabel: getVariableKindLabel(v),
-		index: idx,
-	}));
-
-	const columns = [
-		{
-			title: 'Variable',
-			dataIndex: 'name',
-			key: 'name',
-			width: '50%',
-		},
-		{
-			title: 'Description',
-			key: 'description',
-			width: '50%',
-			render: (entry: TableEntry): JSX.Element => (
-				<VariableRow
-					description={entry.description}
-					kindLabel={entry.kindLabel}
-					onEdit={(): void => onEdit(entry.index)}
-					onDelete={(): void => onDelete(entry.index)}
-				/>
-			),
-		},
-	];
-
-	const onDragEnd = ({ active, over }: DragEndEvent): void => {
-		if (!over || active.id === over.id) {return;}
-		const fromIdx = dataSource.findIndex((d) => d.key === active.id);
-		const toIdx = dataSource.findIndex((d) => d.key === over.id);
-		if (fromIdx < 0 || toIdx < 0) {return;}
-		onReorder(arrayMove(variables, fromIdx, toIdx));
-	};
-
-	return (
-		<DndContext
-			sensors={sensors}
-			modifiers={[restrictToVerticalAxis]}
-			onDragEnd={onDragEnd}
-		>
-			<SortableContext items={dataSource.map((d) => d.key)}>
-				<Table
-					components={{ body: { row: TableRow } }}
-					rowKey="key"
-					columns={columns}
-					pagination={false}
-					dataSource={dataSource}
-					className="dashboard-variable-settings-table"
-				/>
-			</SortableContext>
-		</DndContext>
-	);
-}
-
-export default VariableList;
--- a/frontend/src/container/DashboardContainerV2/DashboardSettings/Variables/draft.ts
+++ b/frontend/src/container/DashboardContainerV2/DashboardSettings/Variables/draft.ts
@@ -1,202 +0,0 @@
-import { v4 as generateUUID } from 'uuid';
-import type {
-	DashboardtypesVariableDTO,
-	DashboardtypesVariablePluginDTO,
-	DashboardtypesListVariableSpecDTO,
-	DashboardTextVariableSpecDTO,
-	TelemetrytypesSignalDTO,
-} from 'api/generated/services/sigNoz.schemas';
-
-import type { V2VariableKind, VariableDraft } from './types';
-
-export function emptyDraft(): VariableDraft {
-	return {
-		id: generateUUID(),
-		kind: 'QUERY',
-		name: '',
-		displayName: '',
-		allowAllValue: false,
-		allowMultiple: false,
-		sort: 'none',
-		defaultValue: '',
-		customAllValue: '',
-		capturingRegexp: '',
-		queryValue: '',
-		customValue: '',
-		dynamicName: '',
-		dynamicSignal: undefined,
-		textValue: '',
-	};
-}
-
-/**
- * Hydrate the relevant slot from a V2 envelope; other slots stay empty.
- */
-export function variableDTOToDraft(
-	dto: DashboardtypesVariableDTO,
-): VariableDraft {
-	const base = emptyDraft();
-	if (dto.kind === 'TextVariable') {
-		const spec = dto.spec as DashboardTextVariableSpecDTO;
-		return {
-			...base,
-			kind: 'TEXT',
-			name: spec?.name ?? '',
-			displayName: spec?.display?.name ?? '',
-			textValue: spec?.value ?? '',
-		};
-	}
-
-	// ListVariable
-	const spec = dto.spec as DashboardtypesListVariableSpecDTO;
-	const pluginKind = spec?.plugin?.kind;
-	let kind: V2VariableKind = 'QUERY';
-	if (pluginKind === 'signoz/DynamicVariable') {kind = 'DYNAMIC';}
-	else if (pluginKind === 'signoz/CustomVariable') {kind = 'CUSTOM';}
-	else if (pluginKind === 'signoz/QueryVariable') {kind = 'QUERY';}
-
-	const draft: VariableDraft = {
-		...base,
-		kind,
-		name: spec?.name ?? '',
-		displayName: spec?.display?.name ?? '',
-		allowAllValue: !!spec?.allowAllValue,
-		allowMultiple: !!spec?.allowMultiple,
-		sort: spec?.sort ?? 'none',
-		defaultValue: typeof spec?.defaultValue === 'string' ? spec.defaultValue : '',
-		customAllValue: spec?.customAllValue ?? '',
-		capturingRegexp: spec?.capturingRegexp ?? '',
-	};
-
-	const pluginSpec = spec?.plugin?.spec as Record<string, unknown> | undefined;
-	if (kind === 'QUERY') {
-		draft.queryValue = (pluginSpec?.queryValue as string) ?? '';
-	} else if (kind === 'CUSTOM') {
-		draft.customValue = (pluginSpec?.customValue as string) ?? '';
-	} else if (kind === 'DYNAMIC') {
-		draft.dynamicName = (pluginSpec?.name as string) ?? '';
-		draft.dynamicSignal = pluginSpec?.signal as TelemetrytypesSignalDTO | undefined;
-	}
-	return draft;
-}
-
-/**
- * Serialize draft to a V2 envelope, reading ONLY the fields relevant to the
- * active kind. Other fields the user touched stay in React state and are
- * silently dropped.
- */
-export function draftToVariableDTO(
-	draft: VariableDraft,
-): DashboardtypesVariableDTO {
-	const display = draft.displayName ? { name: draft.displayName } : undefined;
-
-	if (draft.kind === 'TEXT') {
-		return ({
-			kind: 'TextVariable',
-			spec: {
-				name: draft.name,
-				display,
-				value: draft.textValue,
-			},
-		} as unknown) as DashboardtypesVariableDTO;
-	}
-
-	let plugin: DashboardtypesVariablePluginDTO | undefined;
-	if (draft.kind === 'QUERY') {
-		plugin = ({
-			kind: 'signoz/QueryVariable',
-			spec: { queryValue: draft.queryValue },
-		} as unknown) as DashboardtypesVariablePluginDTO;
-	} else if (draft.kind === 'CUSTOM') {
-		plugin = ({
-			kind: 'signoz/CustomVariable',
-			spec: { customValue: draft.customValue },
-		} as unknown) as DashboardtypesVariablePluginDTO;
-	} else if (draft.kind === 'DYNAMIC') {
-		plugin = ({
-			kind: 'signoz/DynamicVariable',
-			spec: {
-				name: draft.dynamicName,
-				signal: draft.dynamicSignal,
-			},
-		} as unknown) as DashboardtypesVariablePluginDTO;
-	}
-
-	const spec: DashboardtypesListVariableSpecDTO = {
-		name: draft.name,
-		display,
-		allowAllValue: draft.allowAllValue,
-		allowMultiple: draft.allowMultiple,
-		sort: draft.sort,
-		plugin,
-		// VariableDefaultValueDTO is an open `{[key]: unknown}` shape, so a bare
-		// string isn't structurally assignable. We cast at the boundary.
-		defaultValue: draft.defaultValue
-			? ((draft.defaultValue as unknown) as DashboardtypesListVariableSpecDTO['defaultValue'])
-			: undefined,
-		customAllValue: draft.customAllValue || undefined,
-		capturingRegexp: draft.capturingRegexp || undefined,
-	};
-
-	return ({
-		kind: 'ListVariable',
-		spec,
-	} as unknown) as DashboardtypesVariableDTO;
-}
-
-export interface DraftValidationError {
-	field:
-		| 'name'
-		| 'queryValue'
-		| 'customValue'
-		| 'dynamicName'
-		| 'textValue'
-		| 'cycle';
-	message: string;
-}
-
-export function validateDraft(
-	draft: VariableDraft,
-	existingNames: string[],
-): DraftValidationError | null {
-	const trimmedName = draft.name.trim();
-	if (!trimmedName) {
-		return { field: 'name', message: 'Variable name is required' };
-	}
-	if (/\s/.test(trimmedName)) {
-		return { field: 'name', message: 'Variable name cannot contain whitespace' };
-	}
-	if (existingNames.includes(trimmedName)) {
-		return { field: 'name', message: 'Variable name already exists' };
-	}
-
-	if (draft.kind === 'QUERY' && !draft.queryValue.trim()) {
-		return { field: 'queryValue', message: 'Query is required' };
-	}
-	if (draft.kind === 'CUSTOM' && !draft.customValue.trim()) {
-		return { field: 'customValue', message: 'Custom values are required' };
-	}
-	if (draft.kind === 'DYNAMIC' && !draft.dynamicName.trim()) {
-		return { field: 'dynamicName', message: 'Attribute name is required' };
-	}
-	if (draft.kind === 'TEXT' && !draft.textValue.trim()) {
-		return { field: 'textValue', message: 'Default text value is required' };
-	}
-	return null;
-}
-
-export function getVariableName(dto: DashboardtypesVariableDTO): string {
-	if (dto.kind === 'TextVariable') {
-		return (dto.spec as DashboardTextVariableSpecDTO)?.name ?? '';
-	}
-	return (dto.spec as DashboardtypesListVariableSpecDTO)?.name ?? '';
-}
-
-export function getVariableKindLabel(dto: DashboardtypesVariableDTO): string {
-	if (dto.kind === 'TextVariable') {return 'Text';}
-	const spec = dto.spec as DashboardtypesListVariableSpecDTO;
-	const pluginKind = spec?.plugin?.kind;
-	if (pluginKind === 'signoz/DynamicVariable') {return 'Dynamic';}
-	if (pluginKind === 'signoz/CustomVariable') {return 'Custom';}
-	return 'Query';
-}
--- a/frontend/src/container/DashboardContainerV2/DashboardSettings/Variables/index.tsx
+++ b/frontend/src/container/DashboardContainerV2/DashboardSettings/Variables/index.tsx
@@ -1,155 +0,0 @@
-import { useCallback, useMemo, useState } from 'react';
-import { Button } from 'antd';
-import { Plus } from '@signozhq/icons';
-import { patchDashboardV2 } from 'api/generated/services/dashboard';
-import type {
-	DashboardtypesJSONPatchOperationDTO,
-	DashboardtypesVariableDTO,
-} from 'api/generated/services/sigNoz.schemas';
-import { toast } from '@signozhq/ui/sonner';
-import { useErrorModal } from 'providers/ErrorModalProvider';
-import APIError from 'types/api/error';
-
-import {
-	buildDependencyMap,
-	detectCycle,
-} from '../../DashboardVariablesV2/dependencyGraph';
-import type { V2Dashboard } from '../../utils';
-import {
-	emptyDraft,
-	getVariableName,
-	variableDTOToDraft,
-} from './draft';
-import type { VariableDraft } from './types';
-import VariableItem from './VariableItem';
-import VariableList from './VariableList';
-
-interface Props {
-	dashboard: V2Dashboard | undefined;
-	onRefetch: () => void;
-}
-
-type EditorState =
-	| { kind: 'closed' }
-	| { kind: 'add'; draft: VariableDraft }
-	| { kind: 'edit'; index: number; draft: VariableDraft };
-
-function VariablesSettingsV2({ dashboard, onRefetch }: Props): JSX.Element {
-	const dashboardId = dashboard?.id ?? '';
-	const variables = useMemo<DashboardtypesVariableDTO[]>(
-		() => dashboard?.spec?.variables ?? [],
-		[dashboard?.spec?.variables],
-	);
-
-	const [editor, setEditor] = useState<EditorState>({ kind: 'closed' });
-	const [saving, setSaving] = useState<boolean>(false);
-	const { showErrorModal } = useErrorModal();
-
-	const existingNames = useMemo(() => variables.map(getVariableName), [
-		variables,
-	]);
-
-	const persistVariables = useCallback(
-		async (next: DashboardtypesVariableDTO[]): Promise<void> => {
-			if (!dashboardId) {return;}
-			const cycle = detectCycle(buildDependencyMap(next));
-			if (cycle.hasCycle) {
-				toast.error(
-					`Cyclic variable dependency: ${cycle.cycle?.join(' → ')}`,
-				);
-				return;
-			}
-			setSaving(true);
-			try {
-				const patch: DashboardtypesJSONPatchOperationDTO[] = [
-					{
-						op: 'replace' as DashboardtypesJSONPatchOperationDTO['op'],
-						path: '/spec/variables',
-						value: next,
-					},
-				];
-				await patchDashboardV2({ id: dashboardId }, patch);
-				toast.success('Variables updated');
-				onRefetch();
-				setEditor({ kind: 'closed' });
-			} catch (error) {
-				showErrorModal(error as APIError);
-			} finally {
-				setSaving(false);
-			}
-		},
-		[dashboardId, onRefetch, showErrorModal],
-	);
-
-	const handleSave = useCallback(
-		async (dto: DashboardtypesVariableDTO): Promise<void> => {
-			if (editor.kind === 'add') {
-				await persistVariables([...variables, dto]);
-			} else if (editor.kind === 'edit') {
-				const next = variables.slice();
-				next[editor.index] = dto;
-				await persistVariables(next);
-			}
-		},
-		[editor, variables, persistVariables],
-	);
-
-	const handleDelete = useCallback(
-		async (index: number): Promise<void> => {
-			const next = variables.slice();
-			next.splice(index, 1);
-			await persistVariables(next);
-		},
-		[variables, persistVariables],
-	);
-
-	return (
-		<div
-			style={{
-				display: 'flex',
-				flexDirection: 'column',
-				gap: 12,
-				padding: 16,
-			}}
-		>
-			{editor.kind === 'closed' ? (
-				<>
-					<div style={{ display: 'flex', justifyContent: 'flex-end' }}>
-						<Button
-							type="primary"
-							icon={<Plus size={14} />}
-							onClick={(): void =>
-								setEditor({ kind: 'add', draft: emptyDraft() })
-							}
-							data-testid="add-variable-v2"
-						>
-							Add variable
-						</Button>
-					</div>
-					<VariableList
-						variables={variables}
-						onEdit={(index): void =>
-							setEditor({
-								kind: 'edit',
-								index,
-								draft: variableDTOToDraft(variables[index]),
-							})
-						}
-						onDelete={handleDelete}
-						onReorder={persistVariables}
-					/>
-				</>
-			) : (
-				<VariableItem
-					initialDraft={editor.draft}
-					existingNames={existingNames}
-					saving={saving}
-					onSave={handleSave}
-					onCancel={(): void => setEditor({ kind: 'closed' })}
-				/>
-			)}
-		</div>
-	);
-}
-
-export default VariablesSettingsV2;
--- a/frontend/src/container/DashboardContainerV2/DashboardSettings/Variables/types.ts
+++ b/frontend/src/container/DashboardContainerV2/DashboardSettings/Variables/types.ts
@@ -1,61 +0,0 @@
-import type {
-	DashboardtypesVariableDTO,
-	TelemetrytypesSignalDTO,
-} from 'api/generated/services/sigNoz.schemas';
-
-export type V2VariableKind = 'QUERY' | 'CUSTOM' | 'DYNAMIC' | 'TEXT';
-
-/**
- * Internal editor state. Holds every per-kind field so that switching `kind`
- * does not discard user input. Only the fields relevant to the active kind
- * are written into the resulting V2 envelope on save.
- */
-export interface VariableDraft {
-	id: string; // local identifier for list keys; not persisted to V2
-	kind: V2VariableKind;
-	name: string;
-	displayName: string;
-
-	// Shared by all List variants (QUERY / CUSTOM / DYNAMIC)
-	allowAllValue: boolean;
-	allowMultiple: boolean;
-	sort: string;
-	defaultValue: string;
-	// V2-only: literal value emitted when the user picks "ALL"
-	customAllValue: string;
-	// V2-only: regex applied to query/dynamic results to extract the actual value
-	capturingRegexp: string;
-
-	// QUERY
-	queryValue: string;
-
-	// CUSTOM
-	customValue: string;
-
-	// DYNAMIC
-	dynamicName: string;
-	dynamicSignal: TelemetrytypesSignalDTO | undefined;
-
-	// TEXT
-	textValue: string;
-}
-
-export type SaveCallback = (dto: DashboardtypesVariableDTO) => void;
-
-export const VARIABLE_KIND_LABEL: Record<V2VariableKind, string> = {
-	QUERY: 'Query',
-	CUSTOM: 'Custom',
-	DYNAMIC: 'Dynamic',
-	TEXT: 'Text',
-};
-
-// V2 supports a finer sort taxonomy than V1: separate alphabetical and
-// numerical orderings (V1 only exposed Disabled / Ascending / Descending).
-// Values match the strings used in the perses fixture and backend.
-export const SORT_OPTIONS: { label: string; value: string }[] = [
-	{ label: 'Disabled', value: 'none' },
-	{ label: 'Alphabetical ascending', value: 'alphabetical-asc' },
-	{ label: 'Alphabetical descending', value: 'alphabetical-desc' },
-	{ label: 'Numerical ascending', value: 'numerical-asc' },
-	{ label: 'Numerical descending', value: 'numerical-desc' },
-];
--- a/frontend/src/container/DashboardContainerV2/DashboardSettings/index.tsx
+++ b/frontend/src/container/DashboardContainerV2/DashboardSettings/index.tsx
@@ -1,70 +0,0 @@
-import { Button, Empty, Tabs } from 'antd';
-import { Typography } from '@signozhq/ui/typography';
-import { Braces, Globe, Table } from '@signozhq/icons';
-
-import '../../DashboardContainer/DashboardSettings/DashboardSettingsContent.styles.scss';
-
-import GeneralDashboardSettingsV2 from './General';
-import VariablesSettingsV2 from './Variables';
-import type { V2Dashboard } from '../utils';
-
-interface Props {
-	dashboard: V2Dashboard | undefined;
-	onRefetch: () => void;
-}
-
-function Placeholder({ message }: { message: string }): JSX.Element {
-	return (
-		<div style={{ padding: 24 }}>
-			<Empty
-				image={Empty.PRESENTED_IMAGE_SIMPLE}
-				description={<Typography.Text>{message}</Typography.Text>}
-			/>
-		</div>
-	);
-}
-
-function DashboardSettingsV2({ dashboard, onRefetch }: Props): JSX.Element {
-	const items = [
-		{
-			label: (
-				<Button type="text" icon={<Table size={14} />}>
-					General
-				</Button>
-			),
-			key: 'general',
-			children: (
-				<GeneralDashboardSettingsV2
-					dashboard={dashboard}
-					onRefetch={onRefetch}
-				/>
-			),
-		},
-		{
-			label: (
-				<Button type="text" icon={<Braces size={14} />}>
-					Variables
-				</Button>
-			),
-			key: 'variables',
-			children: (
-				<VariablesSettingsV2 dashboard={dashboard} onRefetch={onRefetch} />
-			),
-		},
-		{
-			label: (
-				<Button type="text" icon={<Globe size={14} />}>
-					Publish
-				</Button>
-			),
-			key: 'public-dashboard',
-			children: (
-				<Placeholder message="V2 public dashboard publishing coming next." />
-			),
-		},
-	];
-
-	return <Tabs items={items} />;
-}
-
-export default DashboardSettingsV2;
--- a/frontend/src/container/DashboardContainerV2/DashboardVariablesV2/dependencyGraph.ts
+++ b/frontend/src/container/DashboardContainerV2/DashboardVariablesV2/dependencyGraph.ts
@@ -1,135 +0,0 @@
-import type {
-	DashboardtypesListVariableSpecDTO,
-	DashboardtypesVariableDTO,
-} from 'api/generated/services/sigNoz.schemas';
-
-import { referencedVariables } from './substitution';
-
-/**
- * Extracts the strings on a variable that may contain `$var` references —
- * i.e. the dependency edges out of this variable.
- *
- * Currently only QUERY variables produce dependencies (their `queryValue`
- * may reference other variables). CUSTOM and DYNAMIC plugin specs don't
- * embed substitutable strings, and TEXT variables are leaf nodes.
- */
-function dependencyStrings(dto: DashboardtypesVariableDTO): string[] {
-	if (dto.kind !== 'ListVariable') {return [];}
-	const spec = dto.spec as DashboardtypesListVariableSpecDTO;
-	const pluginKind = spec?.plugin?.kind;
-	const pluginSpec = spec?.plugin?.spec as Record<string, unknown> | undefined;
-	if (pluginKind === 'signoz/QueryVariable') {
-		return [String(pluginSpec?.queryValue ?? '')];
-	}
-	return [];
-}
-
-function nameOf(dto: DashboardtypesVariableDTO): string {
-	return (dto.spec as { name?: string })?.name ?? '';
-}
-
-/**
- * Direct dependencies for each variable (name → set of names it references).
- */
-export function buildDependencyMap(
-	variables: DashboardtypesVariableDTO[],
-): Record<string, Set<string>> {
-	const knownNames = new Set(variables.map(nameOf).filter(Boolean));
-	const deps: Record<string, Set<string>> = {};
-	variables.forEach((v) => {
-		const name = nameOf(v);
-		if (!name) {return;}
-		const refs = new Set<string>();
-		dependencyStrings(v).forEach((s) => {
-			referencedVariables(s).forEach((ref) => {
-				if (ref !== name && knownNames.has(ref)) {refs.add(ref);}
-			});
-		});
-		deps[name] = refs;
-	});
-	return deps;
-}
-
-export interface CycleResult {
-	hasCycle: boolean;
-	cycle?: string[];
-}
-
-/**
- * Detect a cycle via DFS; returns the participating names in traversal order.
- * Used at save time and to guard re-resolution.
- */
-export function detectCycle(
-	deps: Record<string, Set<string>>,
-): CycleResult {
-	const WHITE = 0;
-	const GRAY = 1;
-	const BLACK = 2;
-	const color: Record<string, number> = {};
-	const stack: string[] = [];
-	const names = Object.keys(deps);
-	names.forEach((n) => {
-		color[n] = WHITE;
-	});
-
-	function visit(node: string): string[] | null {
-		color[node] = GRAY;
-		stack.push(node);
-		for (const next of deps[node] ?? []) {
-			if (color[next] === GRAY) {
-				const idx = stack.indexOf(next);
-				return stack.slice(idx).concat(next);
-			}
-			if (color[next] === WHITE) {
-				const found = visit(next);
-				if (found) {return found;}
-			}
-		}
-		stack.pop();
-		color[node] = BLACK;
-		return null;
-	}
-
-	for (const n of names) {
-		if (color[n] === WHITE) {
-			const cycle = visit(n);
-			if (cycle) {return { hasCycle: true, cycle };}
-		}
-	}
-	return { hasCycle: false };
-}
-
-/**
- * Kahn's algorithm — returns variable names in dependency order
- * (dependencies first). If there's a cycle the result excludes the
- * participating nodes; combine with `detectCycle` for validation.
- */
-export function topoSort(
-	deps: Record<string, Set<string>>,
-): string[] {
-	const incoming: Record<string, number> = {};
-	const downstream: Record<string, string[]> = {};
-	Object.keys(deps).forEach((n) => {
-		incoming[n] = 0;
-		downstream[n] = [];
-	});
-	Object.entries(deps).forEach(([n, refs]) => {
-		refs.forEach((ref) => {
-			incoming[n] += 1;
-			downstream[ref] = downstream[ref] ?? [];
-			downstream[ref].push(n);
-		});
-	});
-
-	const queue: string[] = Object.keys(incoming).filter((n) => incoming[n] === 0);
-	const out: string[] = [];
-	while (queue.length > 0) {
-		const n = queue.shift() as string;
-		out.push(n);
-		(downstream[n] ?? []).forEach((next) => {
-			incoming[next] -= 1;
-			if (incoming[next] === 0) {queue.push(next);}
-		});
-	}
-	return out;
-}
--- a/frontend/src/container/DashboardContainerV2/DashboardVariablesV2/index.tsx
+++ b/frontend/src/container/DashboardContainerV2/DashboardVariablesV2/index.tsx
@@ -1,81 +0,0 @@
-import { useEffect, useMemo } from 'react';
-import type {
-	DashboardtypesListVariableSpecDTO,
-	DashboardTextVariableSpecDTO,
-	DashboardtypesVariableDTO,
-} from 'api/generated/services/sigNoz.schemas';
-
-import { buildDependencyMap, detectCycle, topoSort } from './dependencyGraph';
-import VariableSelector from './selectors/VariableSelector';
-import { useVariableSelectionStore } from './state/selectionStore';
-
-import '../../DashboardContainer/DashboardVariablesSelection/DashboardVariableSelection.styles.scss';
-
-interface Props {
-	dashboardId: string;
-	variables: DashboardtypesVariableDTO[] | undefined;
-}
-
-function nameOf(v: DashboardtypesVariableDTO): string {
-	return (
-		(v.spec as DashboardtypesListVariableSpecDTO | DashboardTextVariableSpecDTO)
-			?.name ?? ''
-	);
-}
-
-function kindHint(v: DashboardtypesVariableDTO): 'list' | 'text' {
-	return v.kind === 'TextVariable' ? 'text' : 'list';
-}
-
-function DashboardVariablesV2({ dashboardId, variables }: Props): JSX.Element | null {
-	const hydrate = useVariableSelectionStore((s) => s.hydrate);
-
-	// Build hints map (variable-name → list/text) so the store can decode the URL.
-	const hints = useMemo<Record<string, 'list' | 'text'>>(() => {
-		const out: Record<string, 'list' | 'text'> = {};
-		(variables ?? []).forEach((v) => {
-			const n = nameOf(v);
-			if (n) {out[n] = kindHint(v);}
-		});
-		return out;
-	}, [variables]);
-
-	useEffect(() => {
-		if (!dashboardId) {return;}
-		hydrate(dashboardId, hints);
-	}, [dashboardId, hints, hydrate]);
-
-	// Sort variables in dependency order so dependent resolvers see fresh
-	// selections from their parents. (Render order doesn't affect the React
-	// Query cache but it does affect *visual* order.)
-	const ordered = useMemo(() => {
-		if (!variables?.length) {return [];}
-		const deps = buildDependencyMap(variables);
-		const cycle = detectCycle(deps);
-		if (cycle.hasCycle) {
-			// Render in the original order; the cycle is surfaced separately at save
-			// time via validateDraft. Resolution will still execute; it just won't
-			// converge.
-			return variables;
-		}
-		const order = topoSort(deps);
-		const byName: Record<string, DashboardtypesVariableDTO> = {};
-		variables.forEach((v) => {
-			const n = nameOf(v);
-			if (n) {byName[n] = v;}
-		});
-		return order.map((n) => byName[n]).filter(Boolean);
-	}, [variables]);
-
-	if (!variables || variables.length === 0) {return null;}
-
-	return (
-		<div className="variables-container">
-			{ordered.map((v) => (
-				<VariableSelector key={nameOf(v)} variable={v} />
-			))}
-		</div>
-	);
-}
-
-export default DashboardVariablesV2;
--- a/frontend/src/container/DashboardContainerV2/DashboardVariablesV2/resolution/capturingRegexp.ts
+++ b/frontend/src/container/DashboardContainerV2/DashboardVariablesV2/resolution/capturingRegexp.ts
@@ -1,29 +0,0 @@
-/**
- * Applies V2 `capturingRegexp` to each value: if the regex matches and has a
- * capture group, replace the value with the first capture; otherwise keep
- * the raw value. Invalid regex silently passes values through.
- *
- * Empty results (no match at all) are filtered out — they would be useless
- * as selectable options.
- */
-export function applyCapturingRegexp(
-	values: string[],
-	pattern: string | undefined | null,
-): string[] {
-	if (!pattern) {return values;}
-
-	let re: RegExp;
-	try {
-		re = new RegExp(pattern);
-	} catch {
-		return values;
-	}
-
-	const out: string[] = [];
-	values.forEach((v) => {
-		const m = re.exec(v);
-		if (!m) {return;}
-		out.push(m[1] !== undefined ? m[1] : m[0]);
-	});
-	return out;
-}
--- a/frontend/src/container/DashboardContainerV2/DashboardVariablesV2/resolution/sorting.ts
+++ b/frontend/src/container/DashboardContainerV2/DashboardVariablesV2/resolution/sorting.ts
@@ -1,37 +0,0 @@
-/**
- * Apply V2 sort modes to a resolved value list.
- *
- * Sort values come from the perses spec — `none`, `alphabetical-asc`,
- * `alphabetical-desc`, `numerical-asc`, `numerical-desc`. Numerical sort
- * falls back to string compare for values that aren't numbers so we never
- * throw away non-numeric entries.
- */
-export function applySort(
-	values: string[],
-	sort: string | null | undefined,
-): string[] {
-	if (!sort || sort === 'none' || values.length <= 1) {return values;}
-	const copy = values.slice();
-	if (sort === 'alphabetical-asc') {
-		copy.sort((a, b) => a.localeCompare(b));
-	} else if (sort === 'alphabetical-desc') {
-		copy.sort((a, b) => b.localeCompare(a));
-	} else if (sort === 'numerical-asc' || sort === 'numerical-desc') {
-		copy.sort((a, b) => {
-			const na = Number(a);
-			const nb = Number(b);
-			const aFinite = Number.isFinite(na);
-			const bFinite = Number.isFinite(nb);
-			if (aFinite && bFinite) {
-				return sort === 'numerical-asc' ? na - nb : nb - na;
-			}
-			// Mixed numeric/non-numeric: keep non-numerics at the end, sorted alpha.
-			if (aFinite) {return -1;}
-			if (bFinite) {return 1;}
-			return sort === 'numerical-asc'
-				? a.localeCompare(b)
-				: b.localeCompare(a);
-		});
-	}
-	return copy;
-}
--- a/frontend/src/container/DashboardContainerV2/DashboardVariablesV2/resolution/types.ts
+++ b/frontend/src/container/DashboardContainerV2/DashboardVariablesV2/resolution/types.ts
@@ -1,18 +0,0 @@
-/**
- * Output of resolving a single list variable. Text variables don't go
- * through resolution — their value is the literal string.
- */
-export interface ResolvedValues {
-	values: string[];
-	status: 'idle' | 'loading' | 'success' | 'error';
-	error?: string;
-}
-
-export const idle: ResolvedValues = { values: [], status: 'idle' };
-export const loading: ResolvedValues = { values: [], status: 'loading' };
-export function success(values: string[]): ResolvedValues {
-	return { values, status: 'success' };
-}
-export function failure(error: string): ResolvedValues {
-	return { values: [], status: 'error', error };
-}
--- a/frontend/src/container/DashboardContainerV2/DashboardVariablesV2/resolution/useCustomResolver.ts
+++ b/frontend/src/container/DashboardContainerV2/DashboardVariablesV2/resolution/useCustomResolver.ts
@@ -1,15 +0,0 @@
-import { useMemo } from 'react';
-import { commaValuesParser } from 'lib/dashboardVariables/customCommaValuesParser';
-
-import { success, type ResolvedValues } from './types';
-
-/**
- * CUSTOM variables: the comma-separated user input is the value list.
- * No network call, purely client-side.
- */
-export function useCustomResolver(customValue: string): ResolvedValues {
-	return useMemo(
-		() => success(commaValuesParser(customValue).map((v) => String(v))),
-		[customValue],
-	);
-}
--- a/frontend/src/container/DashboardContainerV2/DashboardVariablesV2/resolution/useDynamicResolver.ts
+++ b/frontend/src/container/DashboardContainerV2/DashboardVariablesV2/resolution/useDynamicResolver.ts
@@ -1,51 +0,0 @@
-// eslint-disable-next-line no-restricted-imports -- TODO: migrate global time selector off redux
-import { useSelector } from 'react-redux';
-import { TelemetrytypesSignalDTO } from 'api/generated/services/sigNoz.schemas';
-import { useGetFieldValues } from 'hooks/dynamicVariables/useGetFieldValues';
-import { AppState } from 'store/reducers';
-import { GlobalReducer } from 'types/reducer/globalTime';
-
-import { failure, idle, loading, success, type ResolvedValues } from './types';
-
-function signalToV1(
-	signal: TelemetrytypesSignalDTO | undefined,
-): 'traces' | 'logs' | 'metrics' | undefined {
-	if (signal === TelemetrytypesSignalDTO.traces) {return 'traces';}
-	if (signal === TelemetrytypesSignalDTO.logs) {return 'logs';}
-	if (signal === TelemetrytypesSignalDTO.metrics) {return 'metrics';}
-	return undefined;
-}
-
-/**
- * DYNAMIC variables: telemetry attribute lookup.
- * - `signal === undefined` → search across all telemetry types.
- * - Otherwise scoped to the specific signal.
- *
- * Uses the existing V1 hook directly; the API is V2-shape-agnostic.
- */
-export function useDynamicResolver(
-	attributeName: string,
-	signal: TelemetrytypesSignalDTO | undefined,
-): ResolvedValues {
-	const { maxTime, minTime } = useSelector<AppState, GlobalReducer>(
-		(state) => state.globalTime,
-	);
-
-	const enabled = !!attributeName;
-	const { data, isLoading, isError, error } = useGetFieldValues({
-		signal: signalToV1(signal),
-		name: attributeName,
-		enabled,
-		startUnixMilli: minTime,
-		endUnixMilli: maxTime,
-	});
-
-	if (!enabled) {return idle;}
-	if (isLoading) {return loading;}
-	if (isError) {
-		return failure(
-			(error as Error)?.message ?? 'Failed to resolve dynamic variable',
-		);
-	}
-	return success(data?.data?.normalizedValues ?? []);
-}
--- a/frontend/src/container/DashboardContainerV2/DashboardVariablesV2/resolution/useQueryResolver.ts
+++ b/frontend/src/container/DashboardContainerV2/DashboardVariablesV2/resolution/useQueryResolver.ts
@@ -1,78 +0,0 @@
-import { useQuery } from 'react-query';
-import dashboardVariablesQuery from 'api/dashboard/variables/dashboardVariablesQuery';
-import type { PayloadVariables } from 'types/api/dashboard/variables/query';
-
-import { substituteVariables } from '../substitution';
-import type { SelectionsByName } from '../state/types';
-import { failure, idle, loading, success, type ResolvedValues } from './types';
-
-/**
- * Reduce the user's V2 selections to the V1 `PayloadVariables` shape the
- * variables/query endpoint expects (a plain name → selected-value map).
- */
-function selectionsToPayload(
-	selections: SelectionsByName,
-): PayloadVariables {
-	const out: PayloadVariables = {};
-	Object.entries(selections).forEach(([name, sel]) => {
-		if (!sel) {return;}
-		if (sel.kind === 'text') {
-			out[name] = sel.value;
-		} else if (sel.allSelected) {
-			// Endpoint understands `__ALL__`-style markers via the substitution
-			// done client-side; leave the value out so server doesn't double up.
-			// (Callers using IN ($var) expand via substituteVariables instead.)
-		} else if (sel.values.length === 1) {
-			out[name] = sel.values[0];
-		} else {
-			out[name] = sel.values;
-		}
-	});
-	return out;
-}
-
-interface UseQueryResolverArgs {
-	variableName: string;
-	queryValue: string;
-	selections: SelectionsByName;
-	enabled: boolean;
-}
-
-/**
- * QUERY variables: substitute `$var` references using current selections,
- * then POST to `/api/v2/variables/query`. React Query caches per
- * (name, substitutedQuery) so re-render with the same inputs reuses results.
- */
-export function useQueryResolver({
-	variableName,
-	queryValue,
-	selections,
-	enabled,
-}: UseQueryResolverArgs): ResolvedValues {
-	const substituted = substituteVariables(queryValue, selections);
-
-	const { data, isLoading, isError, error } = useQuery({
-		queryKey: ['v2-variable-query', variableName, substituted],
-		queryFn: () =>
-			dashboardVariablesQuery({
-				query: substituted,
-				variables: selectionsToPayload(selections),
-			}),
-		enabled: enabled && !!substituted,
-		refetchOnWindowFocus: false,
-	});
-
-	if (!enabled || !substituted) {return idle;}
-	if (isLoading) {return loading;}
-	if (isError) {
-		return failure(
-			(error as { details?: { error?: string } })?.details?.error ??
-				(error as Error)?.message ??
-				'Variable query failed',
-		);
-	}
-	const payload = (data as { payload?: { variableValues?: unknown[] } } | undefined)
-		?.payload;
-	const values = (payload?.variableValues ?? []).map((v) => String(v));
-	return success(values);
-}
--- a/frontend/src/container/DashboardContainerV2/DashboardVariablesV2/resolution/useResolveVariable.ts
+++ b/frontend/src/container/DashboardContainerV2/DashboardVariablesV2/resolution/useResolveVariable.ts
@@ -1,74 +0,0 @@
-import { useMemo } from 'react';
-import type {
-	DashboardtypesListVariableSpecDTO,
-	DashboardtypesVariableDTO,
-	TelemetrytypesSignalDTO,
-} from 'api/generated/services/sigNoz.schemas';
-
-import { useVariableSelectionStore } from '../state/selectionStore';
-import { applyCapturingRegexp } from './capturingRegexp';
-import { applySort } from './sorting';
-import { useCustomResolver } from './useCustomResolver';
-import { useDynamicResolver } from './useDynamicResolver';
-import { useQueryResolver } from './useQueryResolver';
-import { idle, success, type ResolvedValues } from './types';
-
-interface UseResolveVariableArgs {
-	variable: DashboardtypesVariableDTO;
-}
-
-/**
- * Routes a variable to the correct resolver hook and applies the V2
- * post-processing pipeline:
- *
- *   raw values → capturingRegexp → sort → final list
- *
- * Text variables short-circuit since they don't have a value list.
- */
-export function useResolveVariable({
-	variable,
-}: UseResolveVariableArgs): ResolvedValues {
-	const selections = useVariableSelectionStore((s) => s.selections);
-
-	// Read all fields up front so the React Query / hook order is stable
-	// across renders (hooks must not be called conditionally).
-	const isText = variable.kind === 'TextVariable';
-	const listSpec = (variable.spec as DashboardtypesListVariableSpecDTO) ?? {};
-	const pluginKind = listSpec.plugin?.kind;
-	const pluginSpec = (listSpec.plugin?.spec as Record<string, unknown> | undefined) ?? {};
-
-	const name = listSpec?.name ?? '';
-	const customValue = (pluginSpec.customValue as string) ?? '';
-	const queryValue = (pluginSpec.queryValue as string) ?? '';
-	const dynName = (pluginSpec.name as string) ?? '';
-	const dynSignal = pluginSpec.signal as TelemetrytypesSignalDTO | undefined;
-
-	const customRes = useCustomResolver(
-		pluginKind === 'signoz/CustomVariable' ? customValue : '',
-	);
-	const dynRes = useDynamicResolver(
-		pluginKind === 'signoz/DynamicVariable' ? dynName : '',
-		dynSignal,
-	);
-	const queryRes = useQueryResolver({
-		variableName: name,
-		queryValue: pluginKind === 'signoz/QueryVariable' ? queryValue : '',
-		selections,
-		enabled: pluginKind === 'signoz/QueryVariable',
-	});
-
-	const raw: ResolvedValues = useMemo(() => {
-		if (isText) {return success([]);}
-		if (pluginKind === 'signoz/CustomVariable') {return customRes;}
-		if (pluginKind === 'signoz/DynamicVariable') {return dynRes;}
-		if (pluginKind === 'signoz/QueryVariable') {return queryRes;}
-		return idle;
-	}, [isText, pluginKind, customRes, dynRes, queryRes]);
-
-	return useMemo(() => {
-		if (raw.status !== 'success') {return raw;}
-		const afterRegex = applyCapturingRegexp(raw.values, listSpec.capturingRegexp);
-		const afterSort = applySort(afterRegex, listSpec.sort);
-		return success(afterSort);
-	}, [raw, listSpec.capturingRegexp, listSpec.sort]);
-}
--- a/frontend/src/container/DashboardContainerV2/DashboardVariablesV2/selectors/ListVariableSelector.tsx
+++ b/frontend/src/container/DashboardContainerV2/DashboardVariablesV2/selectors/ListVariableSelector.tsx
@@ -1,89 +0,0 @@
-import { useMemo } from 'react';
-import SelectVariableInput from 'container/DashboardContainer/DashboardVariablesSelection/SelectVariableInput';
-import { ALL_SELECT_VALUE } from 'container/DashboardContainer/utils';
-
-import type { ResolvedValues } from '../resolution/types';
-import type { VariableSelection } from '../state/types';
-
-interface Props {
-	variableId: string;
-	resolved: ResolvedValues;
-	selection: VariableSelection | undefined;
-	allowMultiple: boolean;
-	allowAllValue: boolean;
-	defaultValue: string;
-	onChange: (selection: VariableSelection) => void;
-	onClear: () => void;
-}
-
-function selectionToValue(
-	selection: VariableSelection | undefined,
-	defaultValue: string,
-	allowMultiple: boolean,
-): string | string[] | undefined {
-	if (selection && selection.kind === 'list') {
-		if (selection.allSelected) {return ALL_SELECT_VALUE;}
-		if (allowMultiple) {return selection.values;}
-		return selection.values[0];
-	}
-	if (defaultValue) {return allowMultiple ? [defaultValue] : defaultValue;}
-	return undefined;
-}
-
-/**
- * QUERY / CUSTOM / DYNAMIC variables share the same dropdown UX: a list of
- * options + an optional ALL entry + single / multi-select. Reuses V1's
- * `SelectVariableInput` so visuals match exactly.
- */
-function ListVariableSelector({
-	variableId,
-	resolved,
-	selection,
-	allowMultiple,
-	allowAllValue,
-	defaultValue,
-	onChange,
-	onClear,
-}: Props): JSX.Element {
-	const options = useMemo(
-		() => resolved.values.map((v) => ({ label: v, value: v })),
-		[resolved.values],
-	);
-
-	const value = selectionToValue(selection, defaultValue, allowMultiple);
-
-	return (
-		<SelectVariableInput
-			variableId={variableId}
-			options={options}
-			value={value}
-			enableSelectAll={allowAllValue}
-			isMultiSelect={allowMultiple}
-			loading={resolved.status === 'loading'}
-			errorMessage={resolved.error ?? null}
-			onChange={(next): void => {
-				if (Array.isArray(next)) {
-					// Multi-select. Antd's CustomMultiSelect emits the ALL sentinel
-					// when the user toggles the "Select all" row.
-					const hasAll = next.includes(ALL_SELECT_VALUE);
-					onChange({
-						kind: 'list',
-						values: hasAll ? [] : next,
-						allSelected: hasAll,
-					});
-				} else if (next === ALL_SELECT_VALUE) {
-					onChange({ kind: 'list', values: [], allSelected: true });
-				} else {
-					onChange({
-						kind: 'list',
-						values: next ? [next] : [],
-						allSelected: false,
-					});
-				}
-			}}
-			onClear={onClear}
-		/>
-	);
-}
-
-export default ListVariableSelector;
--- a/frontend/src/container/DashboardContainerV2/DashboardVariablesV2/selectors/SelectorLabel.tsx
+++ b/frontend/src/container/DashboardContainerV2/DashboardVariablesV2/selectors/SelectorLabel.tsx
@@ -1,27 +0,0 @@
-import { Tooltip } from 'antd';
-import { Typography } from '@signozhq/ui/typography';
-import { SolidInfoCircle } from '@signozhq/icons';
-
-interface Props {
-	name: string;
-	description?: string;
-}
-
-/**
- * V1-style label: `$name` + an info tooltip if a description is set.
- * Mirrors [DashboardVariablesSelection/VariableItem.tsx:34-42](V1).
- */
-function SelectorLabel({ name, description }: Props): JSX.Element {
-	return (
-		<Typography.Text className="variable-name" truncate={1}>
-			${name}
-			{description ? (
-				<Tooltip title={description}>
-					<SolidInfoCircle className="info-icon" size="md" />
-				</Tooltip>
-			) : null}
-		</Typography.Text>
-	);
-}
-
-export default SelectorLabel;
--- a/frontend/src/container/DashboardContainerV2/DashboardVariablesV2/selectors/TextVariableSelector.tsx
+++ b/frontend/src/container/DashboardContainerV2/DashboardVariablesV2/selectors/TextVariableSelector.tsx
@@ -1,37 +0,0 @@
-import { useEffect, useState } from 'react';
-import { Input } from 'antd';
-
-interface Props {
-	value: string;
-	onCommit: (v: string) => void;
-}
-
-/**
- * Text variable input — commits on blur (and on Enter), matching V1's
- * `TextboxVariableInput` UX which avoids re-fetching panels on every
- * keystroke.
- */
-function TextVariableSelector({ value, onCommit }: Props): JSX.Element {
-	const [draft, setDraft] = useState<string>(value);
-
-	useEffect(() => {
-		setDraft(value);
-	}, [value]);
-
-	const commit = (): void => {
-		if (draft !== value) {onCommit(draft);}
-	};
-
-	return (
-		<Input
-			className="variable-select"
-			value={draft}
-			onChange={(e): void => setDraft(e.target.value)}
-			onBlur={commit}
-			onPressEnter={commit}
-			data-testid="text-variable-input-v2"
-		/>
-	);
-}
-
-export default TextVariableSelector;
--- a/frontend/src/container/DashboardContainerV2/DashboardVariablesV2/selectors/VariableSelector.tsx
+++ b/frontend/src/container/DashboardContainerV2/DashboardVariablesV2/selectors/VariableSelector.tsx
@@ -1,92 +0,0 @@
-import { useCallback } from 'react';
-import type {
-	DashboardtypesListVariableSpecDTO,
-	DashboardTextVariableSpecDTO,
-	DashboardtypesVariableDTO,
-} from 'api/generated/services/sigNoz.schemas';
-
-import { useResolveVariable } from '../resolution/useResolveVariable';
-import { useVariableSelectionStore } from '../state/selectionStore';
-import type { VariableSelection } from '../state/types';
-import ListVariableSelector from './ListVariableSelector';
-import SelectorLabel from './SelectorLabel';
-import TextVariableSelector from './TextVariableSelector';
-
-interface Props {
-	variable: DashboardtypesVariableDTO;
-}
-
-/**
- * Routes one variable to its kind-specific selector. Owns the selection
- * store binding so the kind-specific components stay dumb.
- */
-function VariableSelector({ variable }: Props): JSX.Element | null {
-	const isText = variable.kind === 'TextVariable';
-	const spec = variable.spec as
-		| DashboardtypesListVariableSpecDTO
-		| DashboardTextVariableSpecDTO
-		| undefined;
-	const name = spec?.name ?? '';
-
-	const selection = useVariableSelectionStore((s) =>
-		name ? s.selections[name] : undefined,
-	);
-	const setSelection = useVariableSelectionStore((s) => s.setSelection);
-	const resolved = useResolveVariable({ variable });
-
-	const setListSelection = useCallback(
-		(next: VariableSelection): void => setSelection(name, next),
-		[name, setSelection],
-	);
-	const clearSelection = useCallback((): void => setSelection(name, undefined), [
-		name,
-		setSelection,
-	]);
-
-	if (!name) {return null;}
-
-	const description = spec?.display?.name ?? '';
-
-	if (isText) {
-		const textSpec = spec as DashboardTextVariableSpecDTO;
-		const current =
-			selection?.kind === 'text' ? selection.value : textSpec?.value ?? '';
-		return (
-			<div className="variable-item">
-				<SelectorLabel name={name} description={description} />
-				<div className="variable-value">
-					<TextVariableSelector
-						value={current}
-						onCommit={(v): void => setSelection(name, { kind: 'text', value: v })}
-					/>
-				</div>
-			</div>
-		);
-	}
-
-	const listSpec = spec as DashboardtypesListVariableSpecDTO;
-	const defaultValue =
-		typeof listSpec?.defaultValue === 'string'
-			? (listSpec.defaultValue as string)
-			: '';
-
-	return (
-		<div className="variable-item">
-			<SelectorLabel name={name} description={description} />
-			<div className="variable-value">
-				<ListVariableSelector
-					variableId={name}
-					resolved={resolved}
-					selection={selection}
-					allowMultiple={!!listSpec?.allowMultiple}
-					allowAllValue={!!listSpec?.allowAllValue}
-					defaultValue={defaultValue}
-					onChange={setListSelection}
-					onClear={clearSelection}
-				/>
-			</div>
-		</div>
-	);
-}
-
-export default VariableSelector;
--- a/frontend/src/container/DashboardContainerV2/DashboardVariablesV2/state/localStorage.ts
+++ b/frontend/src/container/DashboardContainerV2/DashboardVariablesV2/state/localStorage.ts
@@ -1,36 +0,0 @@
-import type { SelectionsByName } from './types';
-
-const STORAGE_PREFIX = 'dashboard-v2-variables';
-
-function storageKey(dashboardId: string): string {
-	return `${STORAGE_PREFIX}:${dashboardId}`;
-}
-
-export function loadSelectionsFromStorage(
-	dashboardId: string,
-): SelectionsByName {
-	if (!dashboardId) {return {};}
-	try {
-		const raw = window.localStorage.getItem(storageKey(dashboardId));
-		if (!raw) {return {};}
-		const parsed = JSON.parse(raw) as SelectionsByName;
-		return parsed && typeof parsed === 'object' ? parsed : {};
-	} catch {
-		return {};
-	}
-}
-
-export function saveSelectionsToStorage(
-	dashboardId: string,
-	selections: SelectionsByName,
-): void {
-	if (!dashboardId) {return;}
-	try {
-		window.localStorage.setItem(
-			storageKey(dashboardId),
-			JSON.stringify(selections),
-		);
-	} catch {
-		// quota / availability issues — selection still lives in memory + URL
-	}
-}
--- a/frontend/src/container/DashboardContainerV2/DashboardVariablesV2/state/selectionStore.ts
+++ b/frontend/src/container/DashboardContainerV2/DashboardVariablesV2/state/selectionStore.ts
@@ -1,63 +0,0 @@
-import { create } from 'zustand';
-
-import {
-	loadSelectionsFromStorage,
-	saveSelectionsToStorage,
-} from './localStorage';
-import type { SelectionsByName, VariableSelection } from './types';
-import { readSelectionsFromUrl, writeSelectionsToUrl } from './urlSync';
-
-interface SelectionStoreState {
-	dashboardId: string;
-	selections: SelectionsByName;
-
-	/**
-	 * Hydrate from URL → fallback to LocalStorage. Called once per dashboard
-	 * load. `hints` lets URL decoding pick list vs text encoding.
-	 */
-	hydrate: (
-		dashboardId: string,
-		hints: Record<string, 'list' | 'text'>,
-	) => void;
-
-	/**
-	 * Set / clear the selection for a single variable. Persists to both
-	 * LocalStorage and URL.
-	 */
-	setSelection: (name: string, selection: VariableSelection | undefined) => void;
-
-	reset: () => void;
-}
-
-export const useVariableSelectionStore = create<SelectionStoreState>(
-	(set, get) => ({
-		dashboardId: '',
-		selections: {},
-
-		hydrate: (dashboardId, hints): void => {
-			const fromUrl = readSelectionsFromUrl(hints);
-			const fromStorage = loadSelectionsFromStorage(dashboardId);
-			// URL wins over LocalStorage (shareable links override personal
-			// preferences).
-			const merged: SelectionsByName = { ...fromStorage, ...fromUrl };
-			set({ dashboardId, selections: merged });
-		},
-
-		setSelection: (name, selection): void => {
-			const { dashboardId, selections } = get();
-			const next: SelectionsByName = { ...selections };
-			if (selection === undefined) {
-				delete next[name];
-			} else {
-				next[name] = selection;
-			}
-			set({ selections: next });
-			saveSelectionsToStorage(dashboardId, next);
-			writeSelectionsToUrl(next);
-		},
-
-		reset: (): void => {
-			set({ dashboardId: '', selections: {} });
-		},
-	}),
-);
--- a/frontend/src/container/DashboardContainerV2/DashboardVariablesV2/state/types.ts
+++ b/frontend/src/container/DashboardContainerV2/DashboardVariablesV2/state/types.ts
@@ -1,20 +0,0 @@
-/**
- * A single variable's selected value.
- *
- * - `kind: 'list'` is used for QUERY / CUSTOM / DYNAMIC list variables.
- *   - `allSelected: true` represents the user picking "ALL"; `values` is
- *     ignored in that case.
- *   - `values` is an array even for single-select to keep the shape uniform;
- *     single-select uses index 0.
- * - `kind: 'text'` is the TextVariable case: one freeform string.
- */
-export type VariableSelection =
-	| { kind: 'list'; values: string[]; allSelected: boolean }
-	| { kind: 'text'; value: string };
-
-/**
- * Map of `variable name` → selection. Per dashboard, in memory + persisted.
- */
-export type SelectionsByName = Record<string, VariableSelection | undefined>;
-
-export const ALL_SENTINEL = '__ALL__';
--- a/frontend/src/container/DashboardContainerV2/DashboardVariablesV2/state/urlSync.ts
+++ b/frontend/src/container/DashboardContainerV2/DashboardVariablesV2/state/urlSync.ts
@@ -1,73 +0,0 @@
-import { ALL_SENTINEL, type SelectionsByName, type VariableSelection } from './types';
-
-const URL_PREFIX = 'var-';
-
-/**
- * Encodes a single selection into a URL-safe string. Compact format:
- *   - text variable      → the freeform string
- *   - list (ALL)         → "__ALL__"
- *   - list (single)      → "value"
- *   - list (multi)       → "v1,v2,v3"
- */
-function encodeSelection(sel: VariableSelection): string {
-	if (sel.kind === 'text') {return sel.value;}
-	if (sel.allSelected) {return ALL_SENTINEL;}
-	return sel.values.join(',');
-}
-
-function decodeSelection(
-	raw: string,
-	hint: 'list' | 'text',
-): VariableSelection {
-	if (hint === 'text') {return { kind: 'text', value: raw };}
-	if (raw === ALL_SENTINEL) {
-		return { kind: 'list', values: [], allSelected: true };
-	}
-	const values = raw ? raw.split(',') : [];
-	return { kind: 'list', values, allSelected: false };
-}
-
-/**
- * Reads `var-<name>=<encoded>` params off the current location.
- * `hints` tells us each variable's kind (list vs text) for decoding.
- */
-export function readSelectionsFromUrl(
-	hints: Record<string, 'list' | 'text'>,
-): SelectionsByName {
-	const out: SelectionsByName = {};
-	if (typeof window === 'undefined') {return out;}
-	const params = new URLSearchParams(window.location.search);
-	params.forEach((value, key) => {
-		if (!key.startsWith(URL_PREFIX)) {return;}
-		const name = key.slice(URL_PREFIX.length);
-		const hint = hints[name];
-		if (!hint) {return;}
-		out[name] = decodeSelection(value, hint);
-	});
-	return out;
-}
-
-/**
- * Writes the current selections into the URL, replacing any previous
- * `var-*` params. Uses `replaceState` so it doesn't pollute history.
- */
-export function writeSelectionsToUrl(selections: SelectionsByName): void {
-	if (typeof window === 'undefined') {return;}
-	const params = new URLSearchParams(window.location.search);
-	// Strip existing var-* params
-	const keysToDelete: string[] = [];
-	params.forEach((_, key) => {
-		if (key.startsWith(URL_PREFIX)) {keysToDelete.push(key);}
-	});
-	keysToDelete.forEach((k) => params.delete(k));
-
-	Object.entries(selections).forEach(([name, sel]) => {
-		if (!sel) {return;}
-		params.set(`${URL_PREFIX}${name}`, encodeSelection(sel));
-	});
-
-	const search = params.toString();
-	const querySuffix = search ? `?${search}` : '';
-	const nextUrl = `${window.location.pathname}${querySuffix}${window.location.hash}`;
-	window.history.replaceState(window.history.state, '', nextUrl);
-}
--- a/frontend/src/container/DashboardContainerV2/DashboardVariablesV2/substitution.ts
+++ b/frontend/src/container/DashboardContainerV2/DashboardVariablesV2/substitution.ts
@@ -1,56 +0,0 @@
-import { ALL_SENTINEL, type SelectionsByName } from './state/types';
-
-/**
- * Replaces `$varname` references in a string with the current selection.
- *
- * - text selection      → the freeform string
- * - list, allSelected   → ALL_SENTINEL (callers decide whether to expand to
- *                         all known values or to send the literal marker)
- * - list, single value  → that value
- * - list, multi values  → comma-joined; brackets if caller wraps with IN ()
- *
- * Variable names match `[a-zA-Z_][a-zA-Z0-9_.]*` so dotted attribute keys
- * like `$service.name` work. Substitution is non-recursive (we don't expand
- * `$other` if a value happens to contain another reference).
- */
-const VARIABLE_REF = /\$([a-zA-Z_][a-zA-Z0-9_.]*)/g;
-
-function selectionToString(
-	selection: SelectionsByName[string],
-): string | null {
-	if (!selection) {return null;}
-	if (selection.kind === 'text') {return selection.value;}
-	if (selection.allSelected) {return ALL_SENTINEL;}
-	if (selection.values.length === 0) {return '';}
-	return selection.values.join(',');
-}
-
-export function substituteVariables(
-	template: string,
-	selections: SelectionsByName,
-): string {
-	if (!template) {return template;}
-	return template.replace(VARIABLE_REF, (match, name: string) => {
-		const sel = selections[name];
-		const value = selectionToString(sel);
-		// Leave unresolved references intact so the consumer can decide how to
-		// handle them (better than producing silent partial substitutions).
-		return value === null ? match : value;
-	});
-}
-
-/**
- * Lists the variable names referenced in a string. Used by the dependency
- * graph (Phase 5).
- */
-export function referencedVariables(template: string): string[] {
-	if (!template) {return [];}
-	const out = new Set<string>();
-	let match: RegExpExecArray | null;
-	const re = new RegExp(VARIABLE_REF.source, 'g');
-	// eslint-disable-next-line no-cond-assign
-	while ((match = re.exec(template)) !== null) {
-		out.add(match[1]);
-	}
-	return Array.from(out);
-}
--- a/frontend/src/container/DashboardContainerV2/GridCardLayoutV2/PanelV2.tsx
+++ b/frontend/src/container/DashboardContainerV2/GridCardLayoutV2/PanelV2.tsx
@@ -1,98 +0,0 @@
-import { useMemo } from 'react';
-import { Tooltip } from 'antd';
-import { Badge } from '@signozhq/ui/badge';
-import { Typography } from '@signozhq/ui/typography';
-import { EllipsisVertical } from '@signozhq/icons';
-import type { DashboardtypesPanelDTO } from 'api/generated/services/sigNoz.schemas';
-
-interface Props {
-	panel: DashboardtypesPanelDTO | undefined;
-	panelId: string;
-}
-
-function PanelV2({ panel, panelId }: Props): JSX.Element {
-	const name = panel?.spec?.display?.name || `Panel ${panelId.slice(0, 6)}`;
-	const description = panel?.spec?.display?.description;
-	const kind = panel?.spec?.plugin?.kind?.replace(/^signoz\//, '') ?? 'unknown';
-	const queryCount = panel?.spec?.queries?.length ?? 0;
-
-	const headerTitle = useMemo(() => {
-		if (!description) {return name;}
-		return (
-			<Tooltip title={description}>
-				<span>{name}</span>
-			</Tooltip>
-		);
-	}, [name, description]);
-
-	return (
-		<div
-			style={{
-				display: 'flex',
-				flexDirection: 'column',
-				height: '100%',
-				width: '100%',
-				background: 'var(--bg-ink-400, #0b0c0e)',
-				border: '1px solid var(--bg-slate-400, #1d212d)',
-				borderRadius: 4,
-				overflow: 'hidden',
-			}}
-		>
-			<div
-				className="drag-handle"
-				style={{
-					display: 'flex',
-					alignItems: 'center',
-					justifyContent: 'space-between',
-					padding: '8px 12px',
-					borderBottom: '1px solid var(--bg-slate-400, #1d212d)',
-					cursor: 'grab',
-				}}
-			>
-				<div
-					style={{
-						display: 'flex',
-						alignItems: 'center',
-						gap: 8,
-						minWidth: 0,
-					}}
-				>
-					<Typography.Text
-						style={{
-							margin: 0,
-							whiteSpace: 'nowrap',
-							overflow: 'hidden',
-							textOverflow: 'ellipsis',
-						}}
-					>
-						{headerTitle}
-					</Typography.Text>
-					<Badge style={{ marginInlineEnd: 0 }}>{kind}</Badge>
-				</div>
-				<EllipsisVertical size={14} />
-			</div>
-
-			<div
-				style={{
-					flex: 1,
-					display: 'flex',
-					alignItems: 'center',
-					justifyContent: 'center',
-					padding: 12,
-					color: 'var(--bg-vanilla-400, #8993ae)',
-					fontSize: 12,
-					textAlign: 'center',
-				}}
-			>
-				<div>
-					<div style={{ marginBottom: 6 }}>{kind} panel</div>
-					<div>
-						{queryCount} {queryCount === 1 ? 'query' : 'queries'} · chart rendering coming next
-					</div>
-				</div>
-			</div>
-		</div>
-	);
-}
-
-export default PanelV2;
--- a/frontend/src/container/DashboardContainerV2/GridCardLayoutV2/Section.tsx
+++ b/frontend/src/container/DashboardContainerV2/GridCardLayoutV2/Section.tsx
@@ -1,95 +0,0 @@
-import { useMemo, useState } from 'react';
-import GridLayout, { WidthProvider, type Layout } from 'react-grid-layout';
-import { Button } from 'antd';
-import { Typography } from '@signozhq/ui/typography';
-import { ChevronDown, ChevronRight } from '@signozhq/icons';
-
-import type { DashboardSectionV2 } from '../utils';
-import PanelV2 from './PanelV2';
-
-const ResponsiveGridLayout = WidthProvider(GridLayout);
-
-interface Props {
-	section: DashboardSectionV2;
-}
-
-function SectionGrid({ items }: { items: DashboardSectionV2['items'] }): JSX.Element {
-	const rglLayout = useMemo<Layout[]>(
-		() =>
-			items.map((item) => ({
-				i: item.id,
-				x: item.x,
-				y: item.y,
-				w: item.width,
-				h: item.height,
-			})),
-		[items],
-	);
-
-	return (
-		<ResponsiveGridLayout
-			cols={12}
-			rowHeight={45}
-			autoSize
-			useCSSTransforms
-			layout={rglLayout}
-			draggableHandle=".drag-handle"
-			isDraggable={false}
-			isResizable={false}
-			margin={[8, 8]}
-		>
-			{items.map((item) => (
-				<div key={item.id}>
-					<PanelV2 panel={item.panel} panelId={item.id} />
-				</div>
-			))}
-		</ResponsiveGridLayout>
-	);
-}
-
-function Section({ section }: Props): JSX.Element {
-	// Local toggle override — initial state from layout spec; user can
-	// expand/collapse without persisting.
-	const [open, setOpen] = useState<boolean>(section.open);
-
-	if (!section.title) {
-		// Untitled section — render just the grid (no header chrome).
-		return <SectionGrid items={section.items} />;
-	}
-
-	return (
-		<div
-			style={{
-				marginBottom: 12,
-				border: '1px solid var(--bg-slate-500)',
-				borderRadius: 4,
-			}}
-			data-testid={`dashboard-section-${section.id}`}
-		>
-			<Button
-				type="text"
-				onClick={(): void => setOpen((v) => !v)}
-				icon={open ? <ChevronDown size={14} /> : <ChevronRight size={14} />}
-				style={{
-					width: '100%',
-					justifyContent: 'flex-start',
-					padding: '8px 12px',
-					borderBottom: open ? '1px solid var(--bg-slate-500)' : 'none',
-				}}
-				data-testid={`dashboard-section-toggle-${section.id}`}
-			>
-				<Typography.Text style={{ marginLeft: 4 }}>
-					{section.title}
-				</Typography.Text>
-				{section.repeatVariable ? (
-					<Typography.Text style={{ marginLeft: 8, opacity: 0.6 }}>
-						(repeats per ${section.repeatVariable})
-					</Typography.Text>
-				) : null}
-			</Button>
-			{open ? <SectionGrid items={section.items} /> : null}
-		</div>
-	);
-}
-
-export default Section;
--- a/frontend/src/container/DashboardContainerV2/GridCardLayoutV2/index.tsx
+++ b/frontend/src/container/DashboardContainerV2/GridCardLayoutV2/index.tsx
@@ -1,51 +0,0 @@
-import { useMemo } from 'react';
-
-import { Empty } from 'antd';
-import { Typography } from '@signozhq/ui/typography';
-import type {
-	DashboardtypesLayoutDTO,
-	DashboardtypesPanelDTO,
-} from 'api/generated/services/sigNoz.schemas';
-
-import { layoutsToSections } from '../utils';
-import Section from './Section';
-
-import 'react-grid-layout/css/styles.css';
-import 'react-resizable/css/styles.css';
-
-interface Props {
-	layouts: DashboardtypesLayoutDTO[] | undefined | null;
-	panels: Record<string, DashboardtypesPanelDTO | undefined> | undefined;
-}
-
-function GridCardLayoutV2({ layouts, panels }: Props): JSX.Element {
-	const sections = useMemo(() => layoutsToSections(layouts, panels), [
-		layouts,
-		panels,
-	]);
-
-	const isEmpty = sections.length === 0 || sections.every((s) => s.items.length === 0);
-
-	if (isEmpty) {
-		return (
-			<div style={{ padding: 48, textAlign: 'center' }}>
-				<Empty
-					image={Empty.PRESENTED_IMAGE_SIMPLE}
-					description={
-						<Typography.Text>No panels in this dashboard yet</Typography.Text>
-					}
-				/>
-			</div>
-		);
-	}
-
-	return (
-		<>
-			{sections.map((section) => (
-				<Section key={section.id} section={section} />
-			))}
-		</>
-	);
-}
-
-export default GridCardLayoutV2;
--- a/frontend/src/container/DashboardContainerV2/Panels/TimeSeriesPanel/Renderer.tsx
+++ b/frontend/src/container/DashboardContainerV2/Panels/TimeSeriesPanel/Renderer.tsx
@@ -1,46 +0,0 @@
-import { Typography } from '@signozhq/ui/typography';
-import type { DashboardtypesTimeSeriesPanelSpecDTO } from 'api/generated/services/sigNoz.schemas';
-
-import type { PanelRendererProps } from '../types';
-
-/** Skeleton Component for TimeSeriesPanel
- * TODO: will be replaced by actual implementation in subsequent PRs. This is to unblock the integration of the panel into the dashboard and work on other dependent features.
- */
-
-function TimeSeriesRenderer({
-	isLoading,
-	error,
-	data,
-}: PanelRendererProps<DashboardtypesTimeSeriesPanelSpecDTO>): JSX.Element {
-	let status = 'idle';
-	if (isLoading) {
-		status = 'loading';
-	} else if (error) {
-		status = `error: ${error.message}`;
-	} else if (data) {
-		status = 'data available';
-	}
-
-	return (
-		<div
-			data-testid="time-series-renderer-stub"
-			style={{
-				display: 'flex',
-				flex: 1,
-				alignItems: 'center',
-				justifyContent: 'center',
-				padding: 12,
-				color: 'var(--bg-vanilla-400, #8993ae)',
-				fontSize: 12,
-				textAlign: 'center',
-			}}
-		>
-			<div>
-				<Typography.Text>TimeSeries renderer (stub)</Typography.Text>
-				<div style={{ marginTop: 6 }}>{status}</div>
-			</div>
-		</div>
-	);
-}
-
-export default TimeSeriesRenderer;
--- a/frontend/src/container/DashboardContainerV2/Panels/TimeSeriesPanel/sections.ts
+++ b/frontend/src/container/DashboardContainerV2/Panels/TimeSeriesPanel/sections.ts
@@ -1,15 +0,0 @@
-import type { SectionConfig } from '../types';
-
-export const sections: SectionConfig[] = [
-	{
-		kind: 'formatting',
-		controls: {
-			unit: true,
-			decimals: true,
-		},
-	},
-	{ kind: 'axes', controls: { minMax: true, unit: true, logScale: true } },
-	{ kind: 'legend', controls: { position: true, mode: true } },
-	{ kind: 'thresholds', controls: { list: true } },
-	{ kind: 'chartAppearance', controls: { lineStyle: true, fillOpacity: true } },
-];
--- a/frontend/src/container/DashboardContainerV2/Panels/index.ts
+++ b/frontend/src/container/DashboardContainerV2/Panels/index.ts
@@ -1,36 +0,0 @@
-import { DataSource } from 'types/common/queryBuilder';
-import TimeSeriesRenderer from './TimeSeriesPanel/Renderer';
-import { sections as timeSeriesSections } from './TimeSeriesPanel/sections';
-import type {
-	PanelDefinition,
-	PanelKind,
-	PanelRegistry,
-	SpecForKind,
-} from './types';
-
-const TimeSeriesPanelDef: PanelDefinition<
-	SpecForKind<'signoz/TimeSeriesPanel'>
-> = {
-	kind: 'signoz/TimeSeriesPanel',
-	displayName: 'Time Series',
-	Renderer: TimeSeriesRenderer,
-	sections: timeSeriesSections,
-	supportedSignals: [DataSource.METRICS, DataSource.LOGS, DataSource.TRACES],
-};
-
-export const PANELS: PanelRegistry = {
-	'signoz/TimeSeriesPanel': TimeSeriesPanelDef,
-};
-
-// Polymorphic lookup helper. ComponentType is contravariant in props, so indexing
-// PANELS with a runtime string widens to an unusable intersection of all Renderer
-// types. This helper localizes the necessary widening cast — callers receive a
-// PanelDefinition<unknown> whose Renderer accepts any spec at the call site.
-export function getPanelDefinition(
-	kind: string | undefined,
-): PanelDefinition<unknown> | undefined {
-	if (!kind) {
-		return undefined;
-	}
-	return PANELS[kind as PanelKind] as PanelDefinition<unknown> | undefined;
-}
--- a/frontend/src/container/DashboardContainerV2/Panels/types.ts
+++ b/frontend/src/container/DashboardContainerV2/Panels/types.ts
@@ -1,132 +0,0 @@
-import type { ComponentType } from 'react';
-import {
-	BarChart,
-	Columns3,
-	Hash,
-	ListEnd,
-	Palette,
-	Ruler,
-	SlidersHorizontal,
-} from '@signozhq/icons';
-import type {
-	DashboardtypesBarChartPanelSpecDTO,
-	DashboardtypesHistogramPanelSpecDTO,
-	DashboardtypesListPanelSpecDTO,
-	DashboardtypesNumberPanelSpecDTO,
-	DashboardtypesPieChartPanelSpecDTO,
-	DashboardtypesTablePanelSpecDTO,
-	DashboardtypesTimeSeriesPanelSpecDTO,
-} from 'api/generated/services/sigNoz.schemas';
-import type { MetricQueryRangeSuccessResponse } from 'types/api/metrics/getQueryRange';
-import type { Query } from 'types/api/queryBuilder/queryBuilderData';
-import { PANEL_TYPES } from 'constants/queryBuilder';
-import { DataSource } from 'types/common/queryBuilder';
-
-export type PanelKind =
-	| 'signoz/TimeSeriesPanel'
-	| 'signoz/BarChartPanel'
-	| 'signoz/NumberPanel'
-	| 'signoz/PieChartPanel'
-	| 'signoz/TablePanel'
-	| 'signoz/HistogramPanel'
-	| 'signoz/ListPanel';
-
-// Maps each PanelKind to its concrete perses spec type. Keeping this in lockstep
-// with PanelKind is the (single) maintenance cost of the keyed registry — in
-// exchange we get cast-free registration and precise types after kind narrowing.
-export type SpecForKind<K extends PanelKind> =
-	K extends 'signoz/TimeSeriesPanel'
-		? DashboardtypesTimeSeriesPanelSpecDTO
-		: K extends 'signoz/BarChartPanel'
-			? DashboardtypesBarChartPanelSpecDTO
-			: K extends 'signoz/NumberPanel'
-				? DashboardtypesNumberPanelSpecDTO
-				: K extends 'signoz/PieChartPanel'
-					? DashboardtypesPieChartPanelSpecDTO
-					: K extends 'signoz/TablePanel'
-						? DashboardtypesTablePanelSpecDTO
-						: K extends 'signoz/HistogramPanel'
-							? DashboardtypesHistogramPanelSpecDTO
-							: K extends 'signoz/ListPanel'
-								? DashboardtypesListPanelSpecDTO
-								: never;
-
-// Derived from an actual icon component so the type stays exact (size is a
-// constrained IconSize union, not arbitrary strings) and ForwardRef-compatible.
-type SectionIcon = typeof Hash;
-
-export interface SectionMetadata {
-	title: string;
-	icon: SectionIcon;
-	description?: string;
-}
-
-// Source of truth for sections. Its keys define SectionKind; its values are the
-// runtime UI metadata (consumed by PanelEditor in 1.8). Adding a new section =
-// one entry here + one entry in SectionControls.
-export const SECTIONS = {
-	formatting: { title: 'Formatting', icon: Hash },
-	axes: { title: 'Axes', icon: Ruler },
-	legend: { title: 'Legend', icon: ListEnd },
-	thresholds: { title: 'Thresholds', icon: SlidersHorizontal },
-	chartAppearance: { title: 'Chart appearance', icon: Palette },
-	columnUnits: { title: 'Column units', icon: Columns3 },
-	buckets: { title: 'Buckets', icon: BarChart },
-} as const satisfies Record<string, SectionMetadata>;
-
-export type SectionKind = keyof typeof SECTIONS;
-
-// Per-kind control toggles (type-only — runtime metadata is in SECTIONS).
-// Section components type their controls prop via `SectionControls['axes']`.
-export type SectionControls = {
-	formatting: { unit?: boolean; decimals?: boolean };
-	axes: { minMax?: boolean; unit?: boolean; logScale?: boolean };
-	legend: { position?: boolean; mode?: boolean };
-	thresholds: { list?: boolean };
-	chartAppearance: {
-		lineStyle?: boolean;
-		fillOpacity?: boolean;
-		stacked?: boolean;
-	};
-	columnUnits: { perColumnUnit?: boolean };
-	buckets: { count?: boolean; min?: boolean; max?: boolean };
-};
-
-// Discriminated union derived from SectionControls — kept in lockstep automatically.
-export type SectionConfig = {
-	[K in SectionKind]: { kind: K; controls: SectionControls[K] };
-}[SectionKind];
-
-export interface PanelRendererProps<Spec> {
-	panelId: string;
-	spec: Spec;
-	query: Query | undefined;
-	data: MetricQueryRangeSuccessResponse | undefined;
-	isLoading: boolean;
-	error: Error | null;
-}
-
-export interface PanelDefinition<Spec> {
-	kind: PanelKind;
-	displayName: string;
-	Renderer: ComponentType<PanelRendererProps<Spec>>;
-	sections: SectionConfig[];
-	supportedSignals: DataSource[];
-}
-
-// The registry is a keyed map from PanelKind to a PanelDefinition with the
-// matching concrete spec. Looking up by a kind variable yields a discriminated
-// union of all registered definitions, each with its precise Spec.
-export type PanelRegistry = {
-	[K in PanelKind]?: PanelDefinition<SpecForKind<K>>;
-};
-
-export const PANEL_KIND_TO_PANEL_TYPE: Record<PanelKind, PANEL_TYPES> = {
-	'signoz/TimeSeriesPanel': PANEL_TYPES.TIME_SERIES,
-	'signoz/BarChartPanel': PANEL_TYPES.BAR,
-	'signoz/NumberPanel': PANEL_TYPES.VALUE,
-	'signoz/PieChartPanel': PANEL_TYPES.PIE,
-	'signoz/TablePanel': PANEL_TYPES.TABLE,
-	'signoz/HistogramPanel': PANEL_TYPES.HISTOGRAM,
-	'signoz/ListPanel': PANEL_TYPES.LIST,
-};
--- a/frontend/src/container/DashboardContainerV2/components/DashboardHeader/DashboardBreadcrumbs.styles.scss
+++ b/frontend/src/container/DashboardContainerV2/components/DashboardHeader/DashboardBreadcrumbs.styles.scss
@@ -1,63 +0,0 @@
-.dashboard-breadcrumbs {
-	width: 100%;
-	height: 48px;
-	display: flex;
-	gap: 6px;
-	align-items: center;
-	max-width: 80%;
-
-	.dashboard-btn {
-		display: flex;
-		align-items: center;
-		color: var(--l2-foreground);
-		font-family: Inter;
-		font-size: 14px;
-		font-style: normal;
-		font-weight: 400;
-		line-height: 20px; /* 142.857% */
-		letter-spacing: -0.07px;
-		padding: 0px;
-		height: 20px;
-	}
-
-	.dashboard-btn:hover {
-		background-color: unset;
-	}
-
-	.id-btn {
-		display: flex;
-		align-items: center;
-		gap: 4px;
-		padding: 0px 2px;
-		border-radius: 2px;
-		background: color-mix(in srgb, var(--bg-robin-400) 10%, transparent);
-		color: var(--bg-robin-400);
-		font-family: Inter;
-		font-size: 14px;
-		font-style: normal;
-		font-weight: 400;
-		line-height: 20px; /* 142.857% */
-		height: 20px;
-
-		max-width: calc(100% - 120px);
-
-		span {
-			white-space: nowrap;
-			overflow: hidden;
-			text-overflow: ellipsis;
-		}
-
-		.ant-btn-icon {
-			margin-inline-end: 4px;
-		}
-	}
-	.id-btn:hover {
-		background: color-mix(in srgb, var(--bg-robin-400) 10%, transparent);
-		color: var(--bg-robin-300);
-	}
-
-	.dashboard-icon-image {
-		height: 14px;
-		width: 14px;
-	}
-}
--- a/frontend/src/container/DashboardContainerV2/components/DashboardHeader/DashboardBreadcrumbs.tsx
+++ b/frontend/src/container/DashboardContainerV2/components/DashboardHeader/DashboardBreadcrumbs.tsx
@@ -1,58 +0,0 @@
-import { useCallback } from 'react';
-import { Button } from 'antd';
-import getSessionStorageApi from 'api/browser/sessionstorage/get';
-import ROUTES from 'constants/routes';
-import { DASHBOARDS_LIST_QUERY_PARAMS_STORAGE_KEY } from 'hooks/dashboard/useDashboardsListQueryParams';
-import { useSafeNavigate } from 'hooks/useSafeNavigate';
-import { LayoutGrid } from '@signozhq/icons';
-
-import { Base64Icons } from '../../../DashboardContainer/DashboardSettings/General/utils';
-
-import './DashboardBreadcrumbs.styles.scss';
-
-interface Props {
-	title: string;
-	image?: string;
-}
-
-function DashboardBreadcrumbs({ title, image }: Props): JSX.Element {
-	const { safeNavigate } = useSafeNavigate();
-
-	const goToListPage = useCallback(() => {
-		const dashboardsListQueryParamsString = getSessionStorageApi(
-			DASHBOARDS_LIST_QUERY_PARAMS_STORAGE_KEY,
-		);
-
-		if (dashboardsListQueryParamsString) {
-			safeNavigate({
-				pathname: ROUTES.ALL_DASHBOARD,
-				search: `?${dashboardsListQueryParamsString}`,
-			});
-		} else {
-			safeNavigate(ROUTES.ALL_DASHBOARD);
-		}
-	}, [safeNavigate]);
-
-	return (
-		<div className="dashboard-breadcrumbs">
-			<Button
-				type="text"
-				icon={<LayoutGrid size={14} />}
-				className="dashboard-btn"
-				onClick={goToListPage}
-			>
-				Dashboard /
-			</Button>
-			<Button type="text" className="id-btn dashboard-name-btn">
-				<img
-					src={image || Base64Icons[0]}
-					alt="dashboard-icon"
-					className="dashboard-icon-image"
-				/>
-				{title}
-			</Button>
-		</div>
-	);
-}
-
-export default DashboardBreadcrumbs;
--- a/frontend/src/container/DashboardContainerV2/components/DashboardHeader/DashboardHeader.styles.scss
+++ b/frontend/src/container/DashboardContainerV2/components/DashboardHeader/DashboardHeader.styles.scss
@@ -1,9 +0,0 @@
-.dashboard-header {
-	border-bottom: 1px solid var(--l1-border);
-	display: flex;
-	justify-content: space-between;
-	gap: 16px;
-	align-items: center;
-	padding: 0 8px;
-	box-sizing: border-box;
-}
--- a/frontend/src/container/DashboardContainerV2/components/DashboardHeader/DashboardHeader.tsx
+++ b/frontend/src/container/DashboardContainerV2/components/DashboardHeader/DashboardHeader.tsx
@@ -1,22 +0,0 @@
-import { memo } from 'react';
-import HeaderRightSection from 'components/HeaderRightSection/HeaderRightSection';
-
-import DashboardBreadcrumbs from './DashboardBreadcrumbs';
-
-import './DashboardHeader.styles.scss';
-
-interface Props {
-	title: string;
-	image?: string;
-}
-
-function DashboardHeader({ title, image }: Props): JSX.Element {
-	return (
-		<div className="dashboard-header">
-			<DashboardBreadcrumbs title={title} image={image} />
-			<HeaderRightSection enableAnnouncements={false} enableShare enableFeedback />
-		</div>
-	);
-}
-
-export default memo(DashboardHeader);
--- a/frontend/src/container/DashboardContainerV2/index.tsx
+++ b/frontend/src/container/DashboardContainerV2/index.tsx
@@ -1,35 +0,0 @@
-import { FullScreen, useFullScreenHandle } from 'react-full-screen';
-
-import DashboardDescriptionV2 from './DashboardDescriptionV2';
-import GridCardLayoutV2 from './GridCardLayoutV2';
-import type { V2Dashboard } from './utils';
-
-interface Props {
-	dashboard: V2Dashboard | undefined;
-	onRefetch: () => void;
-}
-
-function DashboardContainerV2({ dashboard, onRefetch }: Props): JSX.Element {
-	const fullScreenHandle = useFullScreenHandle();
-	const spec = dashboard?.spec;
-
-	return (
-		<FullScreen handle={fullScreenHandle}>
-			<div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
-				<DashboardDescriptionV2
-					dashboard={dashboard}
-					handle={fullScreenHandle}
-					onRefetch={onRefetch}
-				/>
-				<div style={{ flex: 1, padding: '12px 24px', overflow: 'auto' }}>
-					<GridCardLayoutV2
-						layouts={spec?.layouts}
-						panels={spec?.panels ?? undefined}
-					/>
-				</div>
-			</div>
-		</FullScreen>
-	);
-}
-
-export default DashboardContainerV2;
--- a/frontend/src/container/DashboardContainerV2/utils.ts
+++ b/frontend/src/container/DashboardContainerV2/utils.ts
@@ -1,111 +0,0 @@
-import type {
-	DashboardtypesGettableDashboardV2DTO,
-	DashboardtypesLayoutDTO,
-	DashboardtypesPanelDTO,
-} from 'api/generated/services/sigNoz.schemas';
-
-export type V2Dashboard = DashboardtypesGettableDashboardV2DTO;
-
-export interface GridItemV2 {
-	id: string;
-	x: number;
-	y: number;
-	width: number;
-	height: number;
-	panel: DashboardtypesPanelDTO | undefined;
-}
-
-const PANEL_REF_PREFIX = '#/spec/panels/';
-
-export function extractPanelIdFromRef(ref: string | undefined): string | null {
-	if (!ref) {return null;}
-	if (!ref.startsWith(PANEL_REF_PREFIX)) {return null;}
-	return ref.slice(PANEL_REF_PREFIX.length);
-}
-
-export function flattenGridLayout(
-	layouts: DashboardtypesLayoutDTO[] | undefined | null,
-	panels: Record<string, DashboardtypesPanelDTO | undefined> | undefined,
-): GridItemV2[] {
-	if (!layouts?.length) {return [];}
-
-	const items: GridItemV2[] = [];
-	layouts.forEach((layoutEnvelope) => {
-		if (layoutEnvelope?.kind !== 'Grid') {return;}
-		const gridItems = layoutEnvelope.spec?.items ?? [];
-		gridItems.forEach((item) => {
-			const id = extractPanelIdFromRef(item.content?.$ref);
-			if (!id) {return;}
-			items.push({
-				id,
-				x: item.x ?? 0,
-				y: item.y ?? 0,
-				width: item.width ?? 6,
-				height: item.height ?? 6,
-				panel: panels?.[id],
-			});
-		});
-	});
-
-	return items;
-}
-
-/**
- * A section corresponds to one entry in `spec.layouts`. If the Grid has a
- * `display.title`, it renders with a collapsible header; otherwise it is a
- * "default" untitled section (visually just the grid).
- */
-export interface DashboardSectionV2 {
-	id: string;
-	title: string | undefined;
-	open: boolean;
-	items: GridItemV2[];
-	repeatVariable: string | undefined;
-}
-
-export function layoutsToSections(
-	layouts: DashboardtypesLayoutDTO[] | undefined | null,
-	panels: Record<string, DashboardtypesPanelDTO | undefined> | undefined,
-): DashboardSectionV2[] {
-	if (!layouts?.length) {return [];}
-
-	return layouts
-		.map((layoutEnvelope, idx) => {
-			if (layoutEnvelope?.kind !== 'Grid') {return null;}
-			const spec = layoutEnvelope.spec;
-			const items: GridItemV2[] = (spec?.items ?? [])
-				.map((item) => {
-					const id = extractPanelIdFromRef(item.content?.$ref);
-					if (!id) {return null;}
-					return {
-						id,
-						x: item.x ?? 0,
-						y: item.y ?? 0,
-						width: item.width ?? 6,
-						height: item.height ?? 6,
-						panel: panels?.[id],
-					};
-				})
-				.filter((it): it is GridItemV2 => it !== null);
-
-			const title = spec?.display?.title;
-			// `open` defaults to true when no collapse field is set (the section
-			// is expanded by default).
-			const open = spec?.display?.collapse?.open !== false;
-
-			return {
-				id: `section-${idx}`,
-				title,
-				open,
-				items,
-				repeatVariable: spec?.repeatVariable,
-			};
-		})
-		.filter((s): s is DashboardSectionV2 => s !== null);
-}
-
-export function getPanelKindLabel(panel: DashboardtypesPanelDTO | undefined): string {
-	const kind = panel?.spec?.plugin?.kind;
-	if (!kind) {return 'unknown';}
-	return kind.replace(/^signoz\//, '');
-}
--- a/frontend/src/container/ExplorerOptions/ExplorerOptions.tsx
+++ b/frontend/src/container/ExplorerOptions/ExplorerOptions.tsx
@@ -22,6 +22,7 @@ import { Color } from '@signozhq/design-tokens';
 import {
 	Button,
 	ColorPicker,
+	Input,
 	Modal,
 	RefSelectProps,
 	Select,
@@ -29,7 +30,6 @@ import {
 } from 'antd';
 import { Divider } from '@signozhq/ui/divider';
 import { Typography } from '@signozhq/ui/typography';
-import { Input } from '@signozhq/ui/input';
 import getLocalStorageKey from 'api/browser/localstorage/get';
 import setLocalStorageKey from 'api/browser/localstorage/set';
 import logEvent from 'api/common/logEvent';
--- a/frontend/src/container/FormAlertChannels/Settings/Email.tsx
+++ b/frontend/src/container/FormAlertChannels/Settings/Email.tsx
@@ -1,7 +1,7 @@
 import { Dispatch, SetStateAction } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Input } from '@signozhq/ui/input';
-import { Form } from 'antd';
+import { Form, Input } from 'antd';
+
 import { EmailChannel } from '../../CreateAlertChannels/config';

 function EmailForm({ setSelectedConfig }: EmailFormProps): JSX.Element {
--- a/frontend/src/container/FormAlertChannels/Settings/Webhook.tsx
+++ b/frontend/src/container/FormAlertChannels/Settings/Webhook.tsx
@@ -1,7 +1,6 @@
 import { Dispatch, SetStateAction } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Input } from '@signozhq/ui/input';
-import { Form } from 'antd';
+import { Form, Input } from 'antd';
 import { MarkdownRenderer } from 'components/MarkdownRenderer/MarkdownRenderer';

 import { WebhookChannel } from '../../CreateAlertChannels/config';
--- a/frontend/src/container/FormAlertChannels/index.tsx
+++ b/frontend/src/container/FormAlertChannels/index.tsx
@@ -1,8 +1,7 @@
 import { Dispatch, ReactElement, SetStateAction } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Input } from '@signozhq/ui/input';
+import { Form, FormInstance, Input, Select } from 'antd';
 import { Switch } from '@signozhq/ui/switch';
-import { Form, FormInstance, Select } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import type { Store } from 'antd/lib/form/interface';
 import ROUTES from 'constants/routes';
--- a/frontend/src/container/GridCardLayout/GridCardLayout.tsx
+++ b/frontend/src/container/GridCardLayout/GridCardLayout.tsx
@@ -6,8 +6,7 @@ import { useIsFetching } from 'react-query';
 import { useDispatch } from 'react-redux';
 import { useLocation } from 'react-router-dom';
 import { Color } from '@signozhq/design-tokens';
-import { Input } from '@signozhq/ui/input';
-import { Button, Form, Modal } from 'antd';
+import { Button, Form, Input, Modal } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import logEvent from 'api/common/logEvent';
 import cx from 'classnames';
--- a/frontend/src/container/IngestionSettings/MultiIngestionSettings.tsx
+++ b/frontend/src/container/IngestionSettings/MultiIngestionSettings.tsx
@@ -5,12 +5,12 @@ import { useCopyToClipboard } from 'react-use';
 import { Color } from '@signozhq/design-tokens';
 import { Badge } from '@signozhq/ui/badge';
 import { Button } from '@signozhq/ui/button';
-import { Input } from '@signozhq/ui/input';
 import {
 	Col,
 	Collapse,
 	DatePicker,
 	Form,
+	Input,
 	InputNumber,
 	Modal,
 	Row,
--- a/frontend/src/container/Integrations/CloudIntegration/AmazonWebServices/RegionForm/RenderConnectionParams.tsx
+++ b/frontend/src/container/Integrations/CloudIntegration/AmazonWebServices/RegionForm/RenderConnectionParams.tsx
@@ -1,5 +1,4 @@
-import { Input } from '@signozhq/ui/input';
-import { Form } from 'antd';
+import { Form, Input } from 'antd';
 import { CloudintegrationtypesCredentialsDTO } from 'api/generated/services/sigNoz.schemas';

 function RenderConnectionFields({
--- a/frontend/src/container/Licenses/ApplyLicenseForm.tsx
+++ b/frontend/src/container/Licenses/ApplyLicenseForm.tsx
@@ -1,7 +1,6 @@
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Input } from '@signozhq/ui/input';
-import { Button, Form } from 'antd';
+import { Button, Form, Input } from 'antd';
 import apply from 'api/v3/licenses/post';
 import { useNotifications } from 'hooks/useNotifications';
 import APIError from 'types/api/error';
--- a/frontend/src/container/ListAlertRules/ListAlert.tsx
+++ b/frontend/src/container/ListAlertRules/ListAlert.tsx
@@ -43,6 +43,7 @@ import { isModifierKeyPressed } from 'utils/app';

 import DeleteAlert from './DeleteAlert';
 import { ColumnButton, SearchContainer } from './styles';
+import MutedBadge from './TableComponents/MutedBadge';
 import Status from './TableComponents/Status';
 import ToggleAlertState from './ToggleAlertState';
 import { alertActionLogEvent, filterAlerts } from './utils';
@@ -276,7 +277,14 @@ function ListAlert({ allAlertRules, refetch }: ListAlertProps): JSX.Element {
 					onEditHandler(record, { newTab: isModifierKeyPressed(e) });
 				};

-				return <Typography.Link onClick={onClickHandler}>{value}</Typography.Link>;
+				const isMuted = Boolean(record.mutes?.length);
+
+				return (
+					<span className="alert-list-name-cell">
+						<Typography.Link onClick={onClickHandler}>{value}</Typography.Link>
+						{isMuted && <MutedBadge muteEndTime={record.mutes![0].end} />}
+					</span>
+				);
 			},
 			sortOrder: sortedInfo.columnKey === 'name' ? sortedInfo.order : null,
 		},
--- a/frontend/src/container/ListAlertRules/TableComponents/MutedBadge.styles.scss
+++ b/frontend/src/container/ListAlertRules/TableComponents/MutedBadge.styles.scss
@@ -0,0 +1,20 @@
+.alert-list-name-cell {
+	display: inline-flex;
+	align-items: center;
+	gap: 8px;
+}
+
+.alert-list-muted-badge {
+	display: inline-flex;
+	align-items: center;
+	gap: 4px;
+	padding: 2px 7px;
+	font-size: 11px;
+	font-weight: 600;
+	letter-spacing: 0.04em;
+	text-transform: uppercase;
+	color: var(--bg-amber-500);
+	background: rgba(255, 205, 86, 0.12);
+	border: 1px solid rgba(255, 205, 86, 0.25);
+	border-radius: 4px;
+}
--- a/frontend/src/container/ListAlertRules/TableComponents/MutedBadge.tsx
+++ b/frontend/src/container/ListAlertRules/TableComponents/MutedBadge.tsx
@@ -0,0 +1,43 @@
+import { BellOff } from '@signozhq/icons';
+import dayjs from 'dayjs';
+
+import './MutedBadge.styles.scss';
+
+const formatRemaining = (endTime: string | undefined | null): string | null => {
+	if (!endTime) {
+		return null;
+	}
+	const end = dayjs(endTime);
+	const now = dayjs();
+	const diffMs = end.diff(now);
+	if (diffMs <= 0) {
+		return null;
+	}
+	const totalMinutes = Math.floor(diffMs / 60000);
+	const days = Math.floor(totalMinutes / (60 * 24));
+	const hours = Math.floor((totalMinutes % (60 * 24)) / 60);
+	const minutes = totalMinutes % 60;
+	if (days > 0) {
+		return `${days}d ${hours}h`;
+	}
+	if (hours > 0) {
+		return `${hours}h ${minutes}m`;
+	}
+	return `${minutes}m`;
+};
+
+interface MutedBadgeProps {
+	muteEndTime: string | undefined | null;
+}
+
+function MutedBadge({ muteEndTime }: MutedBadgeProps): JSX.Element | null {
+	const remaining = formatRemaining(muteEndTime);
+	return (
+		<span className="alert-list-muted-badge">
+			<BellOff size={10} />
+			<span>MUTED{remaining ? ` · ${remaining}` : ''}</span>
+		</span>
+	);
+}
+
+export default MutedBadge;
--- a/frontend/src/container/ListOfDashboard/DashboardTemplates/DashboardTemplatesModal.tsx
+++ b/frontend/src/container/ListOfDashboard/DashboardTemplates/DashboardTemplatesModal.tsx
@@ -1,7 +1,6 @@
 /* eslint-disable @typescript-eslint/explicit-function-return-type */
 import { ChangeEvent, useState } from 'react';
-import { Input } from '@signozhq/ui/input';
-import { Button, Modal } from 'antd';
+import { Button, Input, Modal } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import ApacheIcon from 'assets/CustomIcons/ApacheIcon';
 import DockerIcon from 'assets/CustomIcons/DockerIcon';
--- a/frontend/src/container/ListOfDashboard/DashboardsList.tsx
+++ b/frontend/src/container/ListOfDashboard/DashboardsList.tsx
@@ -12,9 +12,17 @@ import { useTranslation } from 'react-i18next';
 import { generatePath } from 'react-router-dom';
 import { useCopyToClipboard } from 'react-use';
 import { Color } from '@signozhq/design-tokens';
-import { Input } from '@signozhq/ui/input';
 import { DropdownMenuSimple, type MenuItem } from '@signozhq/ui/dropdown-menu';
-import { Button, Flex, Modal, Popover, Skeleton, Table, Tooltip } from 'antd';
+import {
+	Button,
+	Flex,
+	Input,
+	Modal,
+	Popover,
+	Skeleton,
+	Table,
+	Tooltip,
+} from 'antd';
 import { Badge } from '@signozhq/ui/badge';
 import { Switch } from '@signozhq/ui/switch';
 import { Typography } from '@signozhq/ui/typography';
--- a/frontend/src/container/ListOfDashboard/RequestDashboardBtn.tsx
+++ b/frontend/src/container/ListOfDashboard/RequestDashboardBtn.tsx
@@ -1,8 +1,7 @@
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { LoaderCircle, Check } from '@signozhq/icons';
-import { Input } from '@signozhq/ui/input';
-import { Button, Space } from 'antd';
+import { Button, Input, Space } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import logEvent from 'api/common/logEvent';
 import { useNotifications } from 'hooks/useNotifications';
--- a/frontend/src/container/LogDetailedView/Overview.tsx
+++ b/frontend/src/container/LogDetailedView/Overview.tsx
@@ -2,9 +2,8 @@ import { ReactNode, useState } from 'react';
 import MEditor, { EditorProps, Monaco } from '@monaco-editor/react';
 import { Color } from '@signozhq/design-tokens';
 import { Button } from '@signozhq/ui/button';
-import { Input } from '@signozhq/ui/input';
 import { Switch } from '@signozhq/ui/switch';
-import { Collapse } from 'antd';
+import { Collapse, Input } from 'antd';
 import { Divider } from '@signozhq/ui/divider';
 import { Badge } from '@signozhq/ui/badge';
 import { Typography } from '@signozhq/ui/typography';
--- a/frontend/src/container/LogsFilters/index.tsx
+++ b/frontend/src/container/LogsFilters/index.tsx
@@ -2,8 +2,7 @@ import { ChangeEvent, useCallback, useState } from 'react';
 // eslint-disable-next-line no-restricted-imports
 import { useSelector } from 'react-redux';
 import { CirclePlus, X } from '@signozhq/icons';
-import { Input } from '@signozhq/ui/input';
-import { Col } from 'antd';
+import { Col, Input } from 'antd';
 import CategoryHeading from 'components/Logs/CategoryHeading';
 import { fieldSearchFilter } from 'lib/logs/fieldSearch';
 import { AppState } from 'store/reducers';
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Jatinderjit Singh	4da4569953	Merge branch 'main' into mute-rules	2026-05-29 06:53:51 +05:30
Jatinderjit Singh	9458928efc	fix(alerts): give mute drawer date picker a solid popup background The DatePicker popup is portaled to <body>, so without a panel-container background the time-column cells were transparent and the drawer content bled through. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>	2026-05-29 06:49:35 +05:30
Jatinderjit Singh	f713254f59	fix: link to planned downtime page	2026-05-29 06:40:06 +05:30
Jatinderjit Singh	eb5f0e946a	fix(alerts): format mute times in selected timezone The backend ignores the offset in the formatted startTime/endTime and re-attaches the input timezone to the raw wall-clock time. So the formatted offset must match the timezone field, otherwise the muted window shifts. Mirror PlannedDowntimeForm by formatting in the selected timezone: the quick-duration popover formats in the guessed tz, and the custom-window drawer reinterprets the picked time via .tz(tz, true). Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>	2026-05-29 06:29:05 +05:30
Jatinderjit Singh	fdb48834da	fix: return correct upcoming status for recurring maintenances	2026-05-29 06:16:23 +05:30
Jatinderjit Singh	e46d26ff78	refactor: drop status filter, keep status badges	2026-05-29 05:56:41 +05:30
Jatinderjit Singh	503f5c3e7b	feat(planned-downtime): add status filter and badge Planned downtimes were rendered as a flat list with no visual cue for which were active, upcoming, or expired. Add an "Active & Upcoming / Expired / All" filter (defaulting to Active & Upcoming so expired noise is hidden) and a status badge on each row. Sort by status (active → upcoming → expired) then by most recently updated within each group. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>	2026-05-29 05:42:07 +05:30
Jatinderjit Singh	de2a730557	refactor(alerts): promote Planned Downtime and Routing Policies to top-level tabs Replace the nested Configuration > {Planned Downtime, Routing Policies} sub-tab structure with four flat top-level tabs on /alerts. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>	2026-05-29 05:23:48 +05:30
Jatinderjit Singh	79deebe976	fix(planned-downtime): cascade delete associated rules Deleting a planned maintenance previously failed with a foreign key error when alert rules were associated with it, forcing users to first detach every rule. Wrap the delete in a transaction that first removes rows from planned_maintenance_rule before deleting the maintenance. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>	2026-05-29 05:11:21 +05:30
Jatinderjit Singh	372cdc89e1	refactor(planned-maintenance): simplify IsActive and IsUpcoming	2026-05-29 04:59:59 +05:30
Jatinderjit Singh	bb5e68eef6	feat(planned-maintenance): support indefinite ("forever") fixed downtimes Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>	2026-05-29 04:59:07 +05:30
Jatinderjit Singh	a2f4ce934d	Merge branch 'main' into mute-rules	2026-05-27 17:39:00 +05:30
Jatinderjit Singh	c2419a8687	fix: refresh disabled-since time in DisabledBanner every 60s	2026-05-27 17:29:11 +05:30
Jatinderjit Singh	7c214be7ad	fix: hide muted banner when mute expires	2026-05-27 17:15:35 +05:30
Jatinderjit Singh	27a2a0cf21	refactor: return all active mutes	2026-05-27 16:33:16 +05:30
Jatinderjit Singh	6ec3c0b8e0	fix: handle badge and banner for indefinite mutes	2026-05-27 11:29:34 +05:30
Jatinderjit Singh	fef84df331	feat(alerts): return activeMute in rule API responses Backend computes the active mute window per rule (joining with planned maintenance schedules) in ListRules and GetRuleByID, so the frontend no longer needs a separate downtime-schedules fetch to determine mute state. - Add ActiveMuteInfo struct to Rule (id, name, description, effectiveStartTime, effectiveEndTime); computed by findActiveMuteForRule - Handlers for ListRules/GetRuleByID now fetch MaintenanceStore schedules and pass them to NewRule - Regenerate OpenAPI spec and frontend types (RuletypesActiveMuteInfoDTO) - useActiveMute: drop useListDowntimeSchedules, read activeMute from useGetRuleByID (cache-hit on detail page; one request on list page) - useMuteAlertRule: also invalidate rule queries after muting so activeMute refreshes without a separate schedules refetch - ListAlert: remove useListDowntimeSchedules + findActiveMuteForRule, read record.activeMute.effectiveEndTime directly Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-05-25 20:56:47 +05:30
Jatinderjit Singh	98813660ed	fix(alerts): send endTime as null for "Forever" mute Previously, picking Forever set endTime to now + 10 years so the schedule had a real (very distant) end. Send null instead so the backend treats the mute as truly indefinite. The generated schema narrows endTime to string, but the API accepts null — cast at the call site with a comment. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>	2026-05-25 19:51:03 +05:30
Jatinderjit Singh	cd37fbfa71	fix(alerts): drop focus after closing mute popover via Esc / outside click Pressing Escape promotes the most recent input to 'keyboard', so the trigger button (Mute) showed a :focus-visible outline once the popover closed. Blur the active element when closing via keyboard or outside click so no leftover focus ring lingers. Tab-driven focus still shows the indicator as expected. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>	2026-05-25 19:51:03 +05:30
Jatinderjit Singh	fca2da6b15	fix(alerts): close mute popover on outside click and Escape Since the Popover uses trigger={[]} (controlled-only), antd no longer attaches its own outside-click / Escape handlers. Add document-level mousedown and keydown listeners while the popover is open, deferring attachment by one tick so the click that opened it isn't counted as an outside click. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>	2026-05-25 19:51:03 +05:30
Jatinderjit Singh	4a2907ad35	fix(alerts): show firing state + muted badge separately in rule list Match the original handoff: Status column keeps showing the actual rule state (Firing/OK/Pending/Disabled), and a separate inline 'MUTED · <countdown>' badge renders next to the rule name when an active mute exists. Both signals stay visible. - Revert Status.tsx to its original simple form (no muteEndTime). - Extract the muted badge into MutedBadge.tsx and render it inline in the Alert Name column. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>	2026-05-25 19:51:03 +05:30
Jatinderjit Singh	6b04e17f64	fix(alerts): remove 'Muted/Disabled by <user>' from banners Drop the createdBy/updatedBy attribution from both the muted and disabled banners. MutedBanner keeps name + manage link; DisabledBanner keeps the relative time. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>	2026-05-25 19:51:03 +05:30
Jatinderjit Singh	95864ebe58	fix(alerts): disable Mute pill when alert rule is disabled Muting a disabled rule wouldn't change observable behavior — fires aren't recorded, so there's nothing to suppress. Disabling the Mute pill also brings cursor + hover affordances in line with the non-interactive Active pill while muted: cursor: not-allowed and no hover background (the SCSS already guards hover with :not(:disabled)). Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>	2026-05-25 19:51:03 +05:30
Jatinderjit Singh	a0b9713a4f	feat(alerts): add hover background to segmented pills Surface clickable regions more clearly: - Inactive pill hover: --bg-ink-200 background (dark) / --bg-vanilla-300 (light mode). - Active pill hovers darken slightly to their next shade — robin-600, amber-600, slate-200 — for tactile feedback without losing the state color. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>	2026-05-25 19:51:03 +05:30
Jatinderjit Singh	bded46ce95	fix(alerts): wrap segmented pill text in span for reliable color The previous attempt set color on the .pill--active-muted block but something in the cascade was leaving the bare text node light while the icon (which had its own explicit rule) went dark. Wrap each pill's label in <span class="alert-state-segmented__label"> and apply the muted color to both the icon and label classes — both children now have explicit color rules that don't depend on inheritance from the button. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>	2026-05-25 19:51:03 +05:30
Jatinderjit Singh	b38d2963b5	fix(alerts): make muted segmented pill text legible The base .alert-state-segmented__pill rule was winning over .alert-state-segmented__pill--active-muted in the cascade for some build configurations, leaving the "Mute" label rendered in var(--bg-vanilla-400) (light gray) on amber. Bump specificity by self-chaining the class (&.alert-state-segmented__pill--active-muted → .pill.pill--active-muted) so the dark text color always wins, and apply the color to the icon explicitly so it tracks the label. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>	2026-05-25 19:51:03 +05:30
Jatinderjit Singh	406800a2e5	Revert "fix(alerts): move toggle toast to per-call mutate callbacks" This reverts commit 7dacb99536ca386a9b74d101f2f84fdd39ce6864.	2026-05-25 19:51:03 +05:30
Jatinderjit Singh	b10f45a59a	Revert "fix(alerts): update rule cache directly instead of refetching" This reverts commit adc9e0ff1162d7dcc1f82ccfd54ae3b1c428cc46.	2026-05-25 19:51:03 +05:30
Jatinderjit Singh	f75d166eb6	fix(alerts): update rule cache directly instead of refetching invalidateGetRuleByID + refetchQueries caused EditRules to render its <Spinner /> (isRefetching=true), which unmounted the whole form subtree. The unmount cascade plus follow-up query resolutions (channels, event, fields/keys) caused the success toast to briefly disappear and re-enter from its animation again, visible as a flicker. Patching the rule already returns the updated rule, so write it into the query cache via setQueryData. The form sees the new state without remounting, and the toast stays put. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>	2026-05-25 19:51:03 +05:30
Jatinderjit Singh	81f7694991	fix(alerts): move toggle toast to per-call mutate callbacks Hook-level onSuccess on useMutation can re-fire when the MutationObserver re-subscribes during context-driven re-renders (each context update from setAlertRuleState re-renders all consumers of useAlertRule, including ActionButtons, which re-instantiates the mutation observer). Per-call callbacks passed to mutate() in react-query v3 are guaranteed to run exactly once per mutate() call. This was visible as the success toast appearing once per follow-up API response after enable/disable. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>	2026-05-25 19:51:03 +05:30
Jatinderjit Singh	3858e70a4c	fix(alerts): detach mute popover from segmented control anchor Popover's Trigger wrapper could intercept clicks on the inner buttons, causing the disable/enable toggle to fire twice (visible as a flickering success toast). Render the segmented control standalone and anchor the Popover to a separate invisible span positioned at the bottom-right of the wrapper. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>	2026-05-25 19:51:03 +05:30
Jatinderjit Singh	9b87348839	fix(alerts): mute popover only opens via Mute pill, not Active/Disable The Popover wrapper used trigger="click", which fired on any click in the anchor (including Active and Disable pills). Switch to trigger={[]} so the popover is controlled exclusively by the Mute handler. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>	2026-05-25 19:51:02 +05:30
Jatinderjit Singh	fda747f81e	feat(alerts): add mute action wrapping planned downtime Adds a Mute action on the alert rule page that creates a Planned Downtime entry scoped to the rule, with a quick-duration popover and full scheduler drawer. - AlertStateSegmented control replaces the Active/Disabled switch with a three-state pill (Active / Mute / Disable). Active is disabled while muted; un-mute happens via the Planned Downtimes page. - MutePopover offers quick durations (15m, 1h, 4h, 1d, 1w, Forever) plus a Name field. - MuteSchedulerDrawer exposes the full Planned Downtime form for custom windows and recurrence. - MutedBanner / DisabledBanner render an informative banner under the header for the corresponding states. - Alert rules list shows a muted badge with countdown for each rule that has an active downtime. - Lookup is frontend-only via listDowntimeSchedules + ruleId filter, with no backend changes. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>	2026-05-25 19:51:02 +05:30