chore: add justification for unreachable code

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

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

docs/api/openapi.yml

@@ -309,10 +309,6 @@ components:
       properties:
         duration:
           type: string
-        endTime:
-          format: date-time
-          nullable: true
-          type: string
         repeatOn:
           items:
             $ref: '#/components/schemas/AlertmanagertypesRepeatOn'
@@ -320,11 +316,7 @@ components:
           type: array
         repeatType:
           $ref: '#/components/schemas/AlertmanagertypesRepeatType'
-        startTime:
-          format: date-time
-          type: string
       required:
-      - startTime
       - duration
       - repeatType
       type: object
@@ -358,6 +350,7 @@ components:
           type: string
       required:
       - timezone
+      - startTime
       type: object
     AuthtypesAttributeMapping:
       properties:

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));
-};

frontend/src/api/generated/services/sigNoz.schemas.ts

@@ -162,21 +162,11 @@ export interface AlertmanagertypesRecurrenceDTO {
 	 * @type string
 	 */
 	duration: string;
-	/**
-	 * @type string,null
-	 * @format date-time
-	 */
-	endTime?: string | null;
 	/**
 	 * @type array,null
 	 */
 	repeatOn?: AlertmanagertypesRepeatOnDTO[] | null;
 	repeatType: AlertmanagertypesRepeatTypeDTO;
-	/**
-	 * @type string
-	 * @format date-time
-	 */
-	startTime: string;
 }
 
 export interface AlertmanagertypesScheduleDTO {
@@ -190,7 +180,7 @@ export interface AlertmanagertypesScheduleDTO {
 	 * @type string
 	 * @format date-time
 	 */
-	startTime?: string;
+	startTime: string;
 	/**
 	 * @type string
 	 */
@@ -4616,61 +4606,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 +4626,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',
@@ -9493,42 +9379,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 +9398,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

frontend/src/components/RouteTab/RouteTab.styles.scss

@@ -0,0 +1,12 @@
+.route-tab-header {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 8px;
+	padding: 4px;
+}
+
+.route-tab-extra {
+	display: flex;
+	align-items: center;
+}

frontend/src/components/RouteTab/RouteTab.test.tsx

@@ -70,7 +70,7 @@ describe('RouteTab component', () => {
 			</Router>,
 		);
 		expect(history.location.pathname).toBe('/');
-		fireEvent.click(screen.getByRole('tab', { name: 'Tab2' }));
+		fireEvent.mouseDown(screen.getByRole('tab', { name: 'Tab2' }));
 		expect(history.location.pathname).toBe('/tab2');
 	});
 
@@ -87,7 +87,7 @@ describe('RouteTab component', () => {
 				/>
 			</Router>,
 		);
-		fireEvent.click(screen.getByRole('tab', { name: 'Tab2' }));
+		fireEvent.mouseDown(screen.getByRole('tab', { name: 'Tab2' }));
 		expect(onChangeHandler).toHaveBeenCalled();
 	});
 });

frontend/src/components/RouteTab/index.tsx

@@ -1,10 +1,17 @@
+import './RouteTab.styles.scss';
+
 import {
 	generatePath,
 	matchPath,
 	useLocation,
 	useParams,
 } from 'react-router-dom';
-import { Tabs, TabsProps } from 'antd';
+import {
+	TabsContent,
+	TabsList,
+	TabsRoot,
+	TabsTrigger,
+} from '@signozhq/ui/tabs';
 import HeaderRightSection from 'components/HeaderRightSection/HeaderRightSection';
 
 import { RouteTabProps } from './types';
@@ -16,11 +23,13 @@ interface Params {
 function RouteTab({
 	routes,
 	activeKey,
+	defaultActiveKey,
 	onChangeHandler,
 	history,
-	showRightSection,
-	...rest
-}: RouteTabProps & TabsProps): JSX.Element {
+	showRightSection = true,
+	tabBarExtraContent,
+	hideTabBar = false,
+}: RouteTabProps): JSX.Element {
 	const params = useParams<Params>();
 	const location = useLocation();
 
@@ -46,38 +55,38 @@ function RouteTab({
 		}
 	};
 
-	const items = routes.map(({ Component, name, route, key }) => ({
-		label: name,
-		key,
-		tabKey: route,
-		children: <Component />,
-	}));
+	const resolvedActiveKey = currentRoute?.key || activeKey;
+	const extraContent =
+		tabBarExtraContent ??
+		(showRightSection && (
+			<HeaderRightSection enableAnnouncements={false} enableShare enableFeedback />
+		));
 
 	return (
-		<Tabs
-			onChange={onChange}
-			destroyInactiveTabPane
-			activeKey={currentRoute?.key || activeKey}
-			defaultActiveKey={currentRoute?.key || activeKey}
-			animated
-			items={items}
-			tabBarExtraContent={
-				showRightSection && (
-					<HeaderRightSection
-						enableAnnouncements={false}
-						enableShare
-						enableFeedback
-					/>
-				)
-			}
-			{...rest}
-		/>
+		<TabsRoot
+			value={resolvedActiveKey}
+			defaultValue={defaultActiveKey ?? resolvedActiveKey}
+			onValueChange={onChange}
+		>
+			{!hideTabBar && (
+				<div className="route-tab-header">
+					<TabsList>
+						{routes.map(({ name, key }) => (
+							<TabsTrigger key={key} value={key}>
+								{name}
+							</TabsTrigger>
+						))}
+					</TabsList>
+					{extraContent && <div className="route-tab-extra">{extraContent}</div>}
+				</div>
+			)}
+			{routes.map(({ key, Component }) => (
+				<TabsContent key={key} value={key}>
+					<Component />
+				</TabsContent>
+			))}
+		</TabsRoot>
 	);
 }
 
-RouteTab.defaultProps = {
-	onChangeHandler: undefined,
-	showRightSection: true,
-};
-
 export default RouteTab;

frontend/src/components/RouteTab/types.ts

@@ -1,5 +1,5 @@
-import { TabsProps } from 'antd';
 import { History } from 'history';
+import { ReactNode } from 'react';
 
 export type TabRoutes = {
 	name: React.ReactNode;
@@ -10,8 +10,11 @@ export type TabRoutes = {
 
 export interface RouteTabProps {
 	routes: TabRoutes[];
-	activeKey: TabsProps['activeKey'];
+	activeKey: string | undefined;
+	defaultActiveKey?: string;
 	onChangeHandler?: (key: string) => void;
 	history: History<unknown>;
-	showRightSection: boolean;
+	showRightSection?: boolean;
+	tabBarExtraContent?: ReactNode;
+	hideTabBar?: boolean;
 }

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',
 }

frontend/src/container/DashboardContainer/DashboardSettings/DashboardSettingsContent.styles.scss

@@ -1,70 +0,0 @@
-.settings-tabs {
-	.ant-tabs-nav-list {
-		height: 32px;
-		flex-shrink: 0;
-		border-radius: 2px;
-		border: 1px solid var(--l1-border);
-		background: var(--l2-background);
-		box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
-		transition: opacity 0.1s !important;
-
-		.ant-tabs-tab + .ant-tabs-tab {
-			margin: 0px;
-		}
-
-		.ant-tabs-tab:not(:last-child) {
-			border-right: 1px solid var(--l1-border) !important;
-		}
-
-		.overview-btn {
-			width: 114px;
-			display: flex;
-			align-items: center;
-			justify-content: center;
-		}
-
-		.variables-btn {
-			width: 114px;
-			display: flex;
-			align-items: center;
-			justify-content: center;
-		}
-
-		.public-dashboard-btn {
-			width: 150px;
-			display: flex;
-			align-items: center;
-			justify-content: center;
-
-			&.disabled-btn {
-				opacity: 0.5;
-				cursor: not-allowed;
-			}
-		}
-
-		.ant-tabs-ink-bar {
-			display: none;
-		}
-
-		.ant-tabs-tab-active {
-			.overview-btn {
-				border-radius: 2px 0px 0px 2px;
-				background: var(--l1-border);
-			}
-
-			.variables-btn {
-				border-radius: 2px 0px 0px 2px;
-				background: var(--l1-border);
-			}
-
-			.public-dashboard-btn {
-				border-radius: 2px 0px 0px 2px;
-				background: var(--l1-border);
-			}
-		}
-	}
-
-	.ant-tabs-nav::before {
-		border-bottom: none;
-	}
-}

frontend/src/container/DashboardContainer/DashboardSettings/index.tsx

@@ -1,4 +1,4 @@
-import { Button, Tabs, Tooltip } from 'antd';
+import { Tabs, TabItemProps } from '@signozhq/ui/tabs';
 import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
 import { Braces, Globe, Table } from '@signozhq/icons';
 import { useAppContext } from 'providers/App/App';
@@ -9,8 +9,6 @@ import DashboardVariableSettings from './DashboardVariableSettings';
 import GeneralDashboardSettings from './General';
 import PublicDashboardSetting from './PublicDashboard';
 
-import './DashboardSettingsContent.styles.scss';
-
 function DashboardSettings({
 	variablesSettingsTabHandle,
 }: {
@@ -21,49 +19,26 @@ function DashboardSettings({
 
 	const enablePublicDashboard = isCloudUser || isEnterpriseSelfHostedUser;
 
-	const publicDashboardItem = {
-		label: (
-			<Tooltip
-				title={
-					user?.role !== USER_ROLES.ADMIN
-						? 'Only admins can publish / manage public dashboards'
-						: ''
-				}
-				placement="right"
-			>
-				<Button
-					type="text"
-					icon={<Globe size={14} />}
-					className={`public-dashboard-btn ${
-						user?.role !== USER_ROLES.ADMIN ? 'disabled-btn' : ''
-					}`}
-				>
-					Publish
-				</Button>
-			</Tooltip>
-		),
+	const publicDashboardItem: TabItemProps = {
 		key: 'public-dashboard',
+		label: 'Publish',
+		prefixIcon: <Globe size={14} />,
 		children: <PublicDashboardSetting />,
 		disabled: user?.role !== USER_ROLES.ADMIN,
+		disabledReason: 'Only admins can publish / manage public dashboards',
 	};
 
-	const items = [
+	const items: TabItemProps[] = [
 		{
-			label: (
-				<Button type="text" icon={<Table size={14} />} className="overview-btn">
-					Overview
-				</Button>
-			),
 			key: 'general',
+			label: 'Overview',
+			prefixIcon: <Table size={14} />,
 			children: <GeneralDashboardSettings />,
 		},
 		{
-			label: (
-				<Button type="text" icon={<Braces size={14} />} className="variables-btn">
-					Variables
-				</Button>
-			),
 			key: 'variables',
+			label: 'Variables',
+			prefixIcon: <Braces size={14} />,
 			children: (
 				<DashboardVariableSettings
 					variablesSettingsTabHandle={variablesSettingsTabHandle}
@@ -73,7 +48,7 @@ function DashboardSettings({
 		...(enablePublicDashboard ? [publicDashboardItem] : []),
 	];
 
-	return <Tabs items={items} animated className="settings-tabs" />;
+	return <Tabs items={items} />;
 }
 
 export default DashboardSettings;

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;
-			}
-		}
-	}
-}

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);

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;

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;
-}

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;

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;
-	}
-`;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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';
-}

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;

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' },
-];

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;

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;
-}

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;

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;
-}

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;
-}

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 };
-}

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],
-	);
-}

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 ?? []);
-}

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);
-}

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]);
-}

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;

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;

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;

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;

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
-	}
-}

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: {} });
-		},
-	}),
-);

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__';

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);
-}

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);
-}

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;

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;

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;

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;
-	}
-}

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;

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;
-}

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);

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;

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\//, '');
-}

frontend/src/container/Integrations/IntegrationDetailPage/IntegrationDetailContent.tsx

@@ -1,5 +1,4 @@
-import { Button, Tabs, TabsProps } from 'antd';
-import { Typography } from '@signozhq/ui/typography';
+import { Tabs, TabItemProps } from '@signozhq/ui/tabs';
 import ConfigureIcon from 'assets/Integrations/ConfigureIcon';
 import { CableCar, Group } from '@signozhq/icons';
 import { IntegrationDetailedProps } from 'types/api/integrations/types';
@@ -22,18 +21,11 @@ function IntegrationDetailContent(
 ): JSX.Element {
 	const { activeDetailTab, integrationData, integrationId, setActiveDetailTab } =
 		props;
-	const items: TabsProps['items'] = [
+	const items: TabItemProps[] = [
 		{
 			key: 'overview',
-			label: (
-				<Button
-					type="text"
-					className="integration-tab-btns"
-					icon={<CableCar size={14} />}
-				>
-					<Typography.Text className="typography">Overview</Typography.Text>
-				</Button>
-			),
+			label: 'Overview',
+			prefixIcon: <CableCar size={14} />,
 			children: (
 				<Overview
 					categories={integrationData.categories}
@@ -44,15 +36,8 @@ function IntegrationDetailContent(
 		},
 		{
 			key: 'configuration',
-			label: (
-				<Button
-					type="text"
-					className="integration-tab-btns"
-					icon={<ConfigureIcon />}
-				>
-					<Typography.Text className="typography">Configure</Typography.Text>
-				</Button>
-			),
+			label: 'Configure',
+			prefixIcon: <ConfigureIcon />,
 			children: (
 				<Configure
 					configuration={integrationData.configuration}
@@ -62,15 +47,8 @@ function IntegrationDetailContent(
 		},
 		{
 			key: 'dataCollected',
-			label: (
-				<Button
-					type="text"
-					className="integration-tab-btns"
-					icon={<Group size={14} />}
-				>
-					<Typography.Text className="typography">Data Collected</Typography.Text>
-				</Button>
-			),
+			label: 'Data Collected',
+			prefixIcon: <Group size={14} />,
 			children: (
 				<DataCollected
 					logsData={integrationData.data_collected.logs}
@@ -81,11 +59,7 @@ function IntegrationDetailContent(
 	];
 	return (
 		<div className="integration-detail-container">
-			<Tabs
-				activeKey={activeDetailTab}
-				items={items}
-				onChange={setActiveDetailTab}
-			/>
+			<Tabs value={activeDetailTab} items={items} onChange={setActiveDetailTab} />
 		</div>
 	);
 }

frontend/src/container/Integrations/IntegrationDetailPage/IntegrationDetailPage.styles.scss

@@ -168,45 +168,6 @@
 			padding: 10px 16px;
 			border: 1px solid var(--l1-border);
 			background: var(--l1-background);
-
-			.integration-tab-btns {
-				display: flex;
-				align-items: center;
-				justify-content: center;
-				padding: 8px 8px 18px 8px !important;
-
-				.typography {
-					color: var(--l1-foreground);
-					font-family: Inter;
-					font-size: 14px;
-					font-style: normal;
-					font-weight: 400;
-					line-height: 20px; /* 142.857% */
-					letter-spacing: -0.07px;
-				}
-			}
-
-			.integration-tab-btns:hover {
-				&.ant-btn-text {
-					background-color: unset !important;
-				}
-			}
-
-			.ant-tabs-nav-list {
-				gap: 24px;
-			}
-
-			.ant-tabs-nav {
-				padding: 0px !important;
-			}
-
-			.ant-tabs-tab {
-				padding: 0 !important;
-			}
-
-			.ant-tabs-tab + .ant-tabs-tab {
-				margin: 0px !important;
-			}
 		}
 
 		.uninstall-integration-bar {

frontend/src/container/PlannedDowntime/PlannedDowntimeForm.tsx

@@ -152,6 +152,11 @@ export function PlannedDowntimeForm(
 
 	const saveHandler = useCallback(
 		async (values: PlannedDowntimeFormData) => {
+			const { startTime, timezone } = values;
+			if (!startTime || !timezone) {
+				// unreachable: required fields should always be present on submitting.
+				return;
+			}
 			const data: AlertmanagertypesPostablePlannedMaintenanceDTO = {
 				alertIds:
 					values.alertRuleScope === 'all'
@@ -162,9 +167,9 @@ export function PlannedDowntimeForm(
 				name: values.name,
 				scope: values.scope,
 				schedule: {
-					startTime: values.startTime?.format(),
+					startTime: startTime.format(),
 					endTime: values.endTime?.format(),
-					timezone: values.timezone!,
+					timezone,
 					recurrence: values.recurrence,
 				},
 			};
@@ -201,25 +206,17 @@ export function PlannedDowntimeForm(
 		],
 	);
 	const onFinish = async (values: PlannedDowntimeFormData): Promise<void> => {
-		const { recurrence } = values;
-		const recurrenceData =
-			!recurrence ||
-			recurrence.repeatType === recurrenceOptions.doesNotRepeat.value
-				? undefined
-				: {
-						duration: recurrence.duration
-							? `${recurrence.duration}${durationUnit}`
-							: '',
-						startTime: values.startTime!.format(),
-						endTime: values.endTime?.format(),
-						repeatOn: recurrence.repeatOn,
-						repeatType: recurrence.repeatType,
-					};
+		const rec = values.recurrence;
+		const recurrence =
+			rec && rec.repeatType !== recurrenceOptions.doesNotRepeat.value
+				? {
+						duration: `${rec.duration}${durationUnit}`,
+						repeatOn: rec.repeatOn,
+						repeatType: rec.repeatType,
+					}
+				: undefined;
 
-		await saveHandler({
-			...values,
-			recurrence: recurrenceData,
-		});
+		await saveHandler({ ...values, recurrence });
 	};
 
 	const handleFormData = (data: Partial<PlannedDowntimeFormData>): void => {
@@ -276,9 +273,6 @@ export function PlannedDowntimeForm(
 
 	const formattedInitialValues = useMemo((): PlannedDowntimeFormData => {
 		const { schedule } = initialValues;
-		const startTime = schedule?.recurrence?.startTime || schedule?.startTime;
-		const endTime = schedule?.recurrence?.endTime || schedule?.endTime;
-
 		const initialAlertIds = initialValues.alertIds || [];
 
 		return {
@@ -286,8 +280,12 @@ export function PlannedDowntimeForm(
 			alertRuleScope:
 				isEditMode && initialAlertIds.length === 0 ? 'all' : 'specific',
 			alertRules: getAlertOptionsFromIds(initialAlertIds, alertOptions),
-			startTime: startTime ? dayjs(startTime).tz(schedule.timezone) : null,
-			endTime: endTime ? dayjs(endTime).tz(schedule.timezone) : null,
+			startTime: schedule?.startTime
+				? dayjs(schedule.startTime).tz(schedule.timezone)
+				: null,
+			endTime: schedule?.endTime
+				? dayjs(schedule.endTime).tz(schedule.timezone)
+				: null,
 			recurrence: {
 				...schedule?.recurrence,
 				repeatType: !isScheduleRecurring(schedule)

frontend/src/container/PlannedDowntime/PlannedDowntimeList.tsx

@@ -142,7 +142,6 @@ export function CollapseListContent({
 	updated_by_name?: string;
 	alertOptions?: DefaultOptionType[];
 }): JSX.Element {
-	const repeats = schedule?.recurrence;
 	const renderItems = (title: string, value: ReactNode): JSX.Element => (
 		<div className="render-item-collapse-list">
 			<Typography>{title}</Typography>
@@ -193,10 +192,7 @@ export function CollapseListContent({
 				'Timezone',
 				<Typography>{schedule?.timezone || '-'}</Typography>,
 			)}
-			{renderItems(
-				'Repeats',
-				<Typography>{recurrenceInfo(repeats, schedule?.timezone)}</Typography>,
-			)}
+			{renderItems('Repeats', <Typography>{recurrenceInfo(schedule)}</Typography>)}
 			{renderItems(
 				'Alerts silenced',
 				alertOptions?.length ? (

frontend/src/container/PlannedDowntime/PlannedDowntimeutils.ts

@@ -6,7 +6,7 @@ import type {
 	DeleteDowntimeScheduleByIDPathParameters,
 	RenderErrorResponseDTO,
 	AlertmanagertypesPlannedMaintenanceDTO,
-	AlertmanagertypesRecurrenceDTO,
+	AlertmanagertypesScheduleDTO,
 } from 'api/generated/services/sigNoz.schemas';
 import type { ErrorType } from 'api/generatedAPIInstance';
 import { AxiosError } from 'axios';
@@ -66,14 +66,17 @@ export const getAlertOptionsFromIds = (
 	);
 
 export const recurrenceInfo = (
-	recurrence?: AlertmanagertypesRecurrenceDTO | null,
-	timezone?: string,
+	schedule?: AlertmanagertypesScheduleDTO | null,
 ): string => {
+	if (!schedule) {
+		return 'No';
+	}
+	const { startTime, endTime, timezone, recurrence } = schedule;
 	if (!recurrence) {
 		return 'No';
 	}
 
-	const { startTime, duration, repeatOn, repeatType, endTime } = recurrence;
+	const { duration, repeatOn, repeatType } = recurrence;
 
 	const formattedStartTime = startTime
 		? formatDateTime(startTime, timezone)
@@ -95,7 +98,7 @@ export const defaultInitialValues: Partial<AlertmanagertypesPlannedMaintenanceDT
 			timezone: '',
 			endTime: undefined,
 			recurrence: undefined,
-			startTime: undefined,
+			startTime: '',
 		},
 		alertIds: [],
 		createdAt: undefined,

frontend/src/container/PlannedDowntime/__test__/testUtils.ts

@@ -11,7 +11,7 @@ export const buildSchedule = (
 	schedule: Partial<AlertmanagertypesScheduleDTO>,
 ): AlertmanagertypesScheduleDTO => ({
 	timezone: schedule?.timezone ?? '',
-	startTime: schedule?.startTime,
+	startTime: schedule?.startTime ?? '',
 	endTime: schedule?.endTime,
 	recurrence: schedule?.recurrence,
 });

frontend/src/hooks/useIsDashboardV2.ts

@@ -1,10 +0,0 @@
-import { FeatureKeys } from 'constants/features';
-import { useAppContext } from 'providers/App/App';
-
-export function useIsDashboardV2(): boolean {
-	const { featureFlags } = useAppContext();
-	return Boolean(
-		featureFlags?.find((flag) => flag.name === FeatureKeys.USE_DASHBOARD_V2)
-			?.active,
-	);
-}

frontend/src/pages/DashboardPage/index.tsx

@@ -7,20 +7,10 @@ import NotFound from 'components/NotFound';
 import Spinner from 'components/Spinner';
 import DashboardContainer from 'container/DashboardContainer';
 import { useDashboardBootstrap } from 'hooks/dashboard/useDashboardBootstrap';
-import { useIsDashboardV2 } from 'hooks/useIsDashboardV2';
-import DashboardPageV2 from 'pages/DashboardPageV2';
 import { useDashboardStore } from 'providers/Dashboard/store/useDashboardStore';
 import { ErrorType } from 'types/common';
 
 function DashboardPage(): JSX.Element {
-	const isV2 = useIsDashboardV2();
-	if (isV2) {
-		return <DashboardPageV2 />;
-	}
-	return <DashboardPageV1 />;
-}
-
-function DashboardPageV1(): JSX.Element {
 	const { dashboardId } = useParams<{ dashboardId: string }>();
 
 	const [onModal, Content] = Modal.useModal();

frontend/src/pages/DashboardPageV2/DashboardPageV2.tsx

@@ -1,47 +0,0 @@
-import { useEffect } from 'react';
-import { useParams } from 'react-router-dom';
-import { Typography } from '@signozhq/ui/typography';
-import { useGetDashboardV2 } from 'api/generated/services/dashboard';
-import Spinner from 'components/Spinner';
-import DashboardContainerV2 from 'container/DashboardContainerV2';
-
-function DashboardPageV2(): JSX.Element {
-	const { dashboardId } = useParams<{ dashboardId: string }>();
-
-	const { data, isLoading, isError, error, refetch } = useGetDashboardV2({
-		id: dashboardId,
-	});
-
-	const dashboard = data?.data;
-	const name = dashboard?.spec?.display?.name;
-
-	useEffect(() => {
-		if (name) {
-			document.title = name;
-		}
-	}, [name]);
-
-	if (isLoading) {
-		return <Spinner tip="Loading dashboard..." />;
-	}
-
-	if (isError) {
-		return (
-			<div style={{ padding: 24 }}>
-				<Typography.Title>Failed to load dashboard</Typography.Title>
-				<Typography.Text>{(error as Error)?.message}</Typography.Text>
-			</div>
-		);
-	}
-
-	return (
-		<DashboardContainerV2
-			dashboard={dashboard}
-			onRefetch={(): void => {
-				refetch();
-			}}
-		/>
-	);
-}
-
-export default DashboardPageV2;

frontend/src/pages/DashboardPageV2/index.tsx

@@ -1,3 +1,8 @@
-import DashboardPageV2 from './DashboardPageV2';
-
+function DashboardPageV2(): JSX.Element {
+	return (
+		<div>
+			<h1>Dashboard Page V2</h1>
+		</div>
+	);
+}
 export default DashboardPageV2;

frontend/src/pages/DashboardsListPage/index.tsx

@@ -1,13 +1,3 @@
-import { useIsDashboardV2 } from 'hooks/useIsDashboardV2';
-import DashboardsListPageV2 from 'pages/DashboardsListPageV2';
 import DashboardsListPage from './DashboardsListPage';
 
-function DashboardsListPageEntry(): JSX.Element {
-	const isV2 = useIsDashboardV2();
-	if (isV2) {
-		return <DashboardsListPageV2 />;
-	}
-	return <DashboardsListPage />;
-}
-
-export default DashboardsListPageEntry;
+export default DashboardsListPage;

frontend/src/pages/DashboardsListPageV2/DashboardsListPageV2.module.scss

@@ -1,35 +0,0 @@
-.page {
-	display: flex;
-	flex-direction: column;
-	gap: 16px;
-	width: 100%;
-}
-
-.header {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	padding: 0 8px;
-	gap: 8px;
-	height: 48px;
-}
-
-.headerLeft {
-	display: flex;
-	align-items: center;
-	gap: 8px;
-}
-
-.icon {
-	color: var(--l2-foreground);
-}
-
-.text {
-	color: var(--muted-foreground);
-	font-family: Inter;
-	font-size: var(--font-size-sm);
-	font-style: normal;
-	font-weight: var(--font-weight-normal);
-	line-height: 20px;
-	letter-spacing: -0.07px;
-}

frontend/src/pages/DashboardsListPageV2/DashboardsListPageV2.tsx

@@ -1,41 +0,0 @@
-import { useState } from 'react';
-import { AnnouncementBanner } from '@signozhq/ui/announcement-banner';
-import { Typography } from '@signozhq/ui/typography';
-import { LayoutGrid } from '@signozhq/icons';
-
-import HeaderRightSection from 'components/HeaderRightSection/HeaderRightSection';
-import DashboardsList from './components/DashboardsList';
-
-import styles from './DashboardsListPageV2.module.scss';
-
-function DashboardsListPageV2(): JSX.Element {
-	const [showBanner, setShowBanner] = useState(true);
-
-	return (
-		<div className={styles.page}>
-			{showBanner && (
-				<AnnouncementBanner
-					type="warning"
-					onClose={(): void => setShowBanner(false)}
-				>
-					You&apos;re on the V2 dashboards page. If you landed here unintentionally,
-					please reach out to Ashwin.
-				</AnnouncementBanner>
-			)}
-			<div className={styles.header}>
-				<div className={styles.headerLeft}>
-					<LayoutGrid size={14} className={styles.icon} />
-					<Typography.Text className={styles.text}>Dashboards</Typography.Text>
-				</div>
-				<HeaderRightSection
-					enableAnnouncements={false}
-					enableShare
-					enableFeedback
-				/>
-			</div>
-			<DashboardsList />
-		</div>
-	);
-}
-
-export default DashboardsListPageV2;

frontend/src/pages/DashboardsListPageV2/components/ActionsPopover/ActionsPopover.module.scss

@@ -1,28 +0,0 @@
-.content {
-	display: flex;
-	flex-direction: column;
-}
-
-// Make signoz ghost-Button rows fill the popover and left-align their label.
-.menuItem {
-	width: 100%;
-	justify-content: flex-start;
-}
-
-:global(.dashboardActionsPopover) {
-	:global(.ant-popover-inner) {
-		width: 200px;
-		height: auto;
-		flex-shrink: 0;
-		border-radius: 4px;
-		border: 1px solid var(--l1-border);
-		background: linear-gradient(
-			139deg,
-			color-mix(in srgb, var(--card) 80%, transparent) 0%,
-			color-mix(in srgb, var(--card) 90%, transparent) 98.68%
-		);
-		box-shadow: 4px 10px 16px 2px rgba(0, 0, 0, 0.2);
-		backdrop-filter: blur(20px);
-		padding: 0px;
-	}
-}

frontend/src/pages/DashboardsListPageV2/components/ActionsPopover/ActionsPopover.tsx

@@ -1,103 +0,0 @@
-import { Popover } from 'antd';
-import { Button } from '@signozhq/ui/button';
-import {
-	Expand,
-	EllipsisVertical,
-	Link2,
-	SquareArrowOutUpRight,
-} from '@signozhq/icons';
-import { useCopyToClipboard } from 'react-use';
-import { getAbsoluteUrl } from 'utils/basePath';
-import { openInNewTab } from 'utils/navigation';
-
-import DeleteActionItem from './DeleteActionItem';
-import styles from './ActionsPopover.module.scss';
-
-interface Props {
-	link: string;
-	dashboardId: string;
-	dashboardName: string;
-	createdBy: string;
-	isLocked: boolean;
-	onView: (event: React.MouseEvent<HTMLElement>) => void;
-}
-
-function ActionsPopover({
-	link,
-	dashboardId,
-	dashboardName,
-	createdBy,
-	isLocked,
-	onView,
-}: Props): JSX.Element {
-	const [, setCopy] = useCopyToClipboard();
-
-	return (
-		<Popover
-			content={
-				<div className={styles.content}>
-					<Button
-						color="secondary"
-						className={styles.menuItem}
-						prefix={<Expand size={14} />}
-						onClick={onView}
-						testId="dashboard-action-view"
-					>
-						View
-					</Button>
-					<Button
-						color="secondary"
-						className={styles.menuItem}
-						prefix={<SquareArrowOutUpRight size={14} />}
-						onClick={(e): void => {
-							e.stopPropagation();
-							e.preventDefault();
-							openInNewTab(link);
-						}}
-						testId="dashboard-action-open-new-tab"
-					>
-						Open in New Tab
-					</Button>
-					<Button
-						color="secondary"
-						className={styles.menuItem}
-						prefix={<Link2 size={14} />}
-						onClick={(e): void => {
-							e.stopPropagation();
-							e.preventDefault();
-							setCopy(getAbsoluteUrl(link));
-						}}
-						testId="dashboard-action-copy-link"
-					>
-						Copy Link
-					</Button>
-					<DeleteActionItem
-						dashboardId={dashboardId}
-						dashboardName={dashboardName}
-						createdBy={createdBy}
-						isLocked={isLocked}
-					/>
-				</div>
-			}
-			placement="bottomRight"
-			arrow={false}
-			rootClassName="dashboardActionsPopover"
-			trigger="click"
-		>
-			<Button
-				size="icon"
-				variant="ghost"
-				color="secondary"
-				testId="dashboard-action-icon"
-				onClick={(e): void => {
-					e.stopPropagation();
-					e.preventDefault();
-				}}
-			>
-				<EllipsisVertical size={14} />
-			</Button>
-		</Popover>
-	);
-}
-
-export default ActionsPopover;

frontend/src/pages/DashboardsListPageV2/components/ActionsPopover/DeleteActionItem.tsx

@@ -1,122 +0,0 @@
-import { useCallback } from 'react';
-import { useTranslation } from 'react-i18next';
-import { useMutation, useQueryClient } from 'react-query';
-import { Modal, Tooltip } from 'antd';
-import { Button } from '@signozhq/ui/button';
-import { CircleAlert, Trash2 } from '@signozhq/icons';
-import { toast } from '@signozhq/ui/sonner';
-import { Divider } from '@signozhq/ui/divider';
-import { Typography } from '@signozhq/ui/typography';
-import deleteDashboard from 'api/v1/dashboards/id/delete';
-import { invalidateListDashboardsV2 } from 'api/generated/services/dashboard';
-import { useAppContext } from 'providers/App/App';
-import { useErrorModal } from 'providers/ErrorModalProvider';
-import APIError from 'types/api/error';
-import { USER_ROLES } from 'types/roles';
-
-import styles from './ActionsPopover.module.scss';
-
-interface Props {
-	dashboardId: string;
-	dashboardName: string;
-	createdBy: string;
-	isLocked: boolean;
-}
-
-function DeleteActionItem({
-	dashboardId,
-	dashboardName,
-	createdBy,
-	isLocked,
-}: Props): JSX.Element {
-	const { t } = useTranslation(['dashboard']);
-	const { user } = useAppContext();
-	const { showErrorModal } = useErrorModal();
-	const queryClient = useQueryClient();
-	const [modal, contextHolder] = Modal.useModal();
-
-	const isAuthor = user?.email === createdBy;
-	const isDisabled = isLocked || (user.role === USER_ROLES.VIEWER && !isAuthor);
-
-	const { mutate: runDelete } = useMutation({
-		mutationFn: () => deleteDashboard({ id: dashboardId }),
-		onSuccess: async () => {
-			toast.success(
-				t('dashboard:delete_dashboard_success', { name: dashboardName }),
-			);
-			await invalidateListDashboardsV2(queryClient);
-		},
-		onError: (error: APIError) => {
-			showErrorModal(error);
-		},
-	});
-
-	const openConfirm = useCallback((): void => {
-		const { destroy } = modal.confirm({
-			title: (
-				<Typography.Title level={5}>
-					Are you sure you want to delete the
-					<span style={{ color: 'var(--danger-background)', fontWeight: 500 }}>
-						{' '}
-						{dashboardName}{' '}
-					</span>
-					dashboard?
-				</Typography.Title>
-			),
-			icon: (
-				<CircleAlert
-					style={{ color: 'var(--danger-background)', marginInlineEnd: '12px' }}
-					size="3xl"
-				/>
-			),
-			okText: 'Delete',
-			okButtonProps: {
-				danger: true,
-				onClick: (e): void => {
-					e.preventDefault();
-					e.stopPropagation();
-					runDelete(undefined, { onSettled: () => destroy() });
-				},
-			},
-			centered: true,
-		});
-	}, [modal, dashboardName, runDelete]);
-
-	const tooltip = ((): string => {
-		if (!isLocked) {
-			return '';
-		}
-		if (user.role === USER_ROLES.ADMIN || isAuthor) {
-			return t('dashboard:locked_dashboard_delete_tooltip_admin_author');
-		}
-		return t('dashboard:locked_dashboard_delete_tooltip_editor');
-	})();
-
-	return (
-		<>
-			<Divider />
-			<Tooltip placement="left" title={tooltip}>
-				<Button
-					variant="ghost"
-					color="destructive"
-					className={styles.menuItem}
-					prefix={<Trash2 size={14} />}
-					disabled={isDisabled}
-					onClick={(e): void => {
-						e.preventDefault();
-						e.stopPropagation();
-						if (!isDisabled) {
-							openConfirm();
-						}
-					}}
-					testId="dashboard-action-delete"
-				>
-					Delete Dashboard
-				</Button>
-			</Tooltip>
-			{contextHolder}
-		</>
-	);
-}
-
-export default DeleteActionItem;

frontend/src/pages/DashboardsListPageV2/components/ConfigureMetadataModal/ConfigureMetadataModal.module.scss

@@ -1,164 +0,0 @@
-.content {
-	display: flex;
-	flex-direction: column;
-	gap: 14px;
-}
-
-.preview {
-	display: flex;
-	padding: 12px 14.634px;
-	flex-direction: column;
-	align-items: flex-start;
-	gap: 7.317px;
-	border-radius: 4px;
-	border: 0.915px solid var(--l1-border);
-	background: var(--l2-background);
-}
-
-.previewHeader {
-	display: flex;
-	gap: 10px;
-	align-items: center;
-}
-
-.previewIcon {
-	height: 14px;
-	width: 14px;
-}
-
-.previewTitle {
-	color: var(--l1-foreground);
-	font-family: Inter;
-	font-size: 12.805px;
-	font-style: normal;
-	font-weight: var(--font-weight-medium);
-	line-height: 18.293px;
-	letter-spacing: -0.064px;
-}
-
-.previewDetails {
-	display: flex;
-	flex-direction: column;
-	gap: 8px;
-	width: 100%;
-}
-
-.previewRow {
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-}
-
-.formattedTime {
-	display: inline-flex;
-	gap: 8px;
-	align-items: center;
-	color: var(--l2-foreground);
-}
-
-.formattedTimeText {
-	font-family: Inter;
-	font-size: 12.805px;
-	font-style: normal;
-	font-weight: var(--font-weight-normal);
-	line-height: 16.463px;
-	letter-spacing: -0.064px;
-	color: var(--l2-foreground);
-}
-
-.user {
-	display: flex;
-	align-items: center;
-	gap: 8px;
-}
-
-.userTag {
-	width: 12px;
-	height: 12px;
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	color: var(--l2-foreground);
-	font-size: 8px;
-	font-style: normal;
-	font-weight: var(--font-weight-normal);
-	line-height: normal;
-	letter-spacing: -0.05px;
-	border-radius: 12.805px;
-	background-color: var(--l1-background);
-}
-
-.userLabel {
-	color: var(--l2-foreground);
-	font-family: Inter;
-	font-size: 12.805px;
-	font-weight: var(--font-weight-normal);
-	line-height: 16.463px;
-	letter-spacing: -0.064px;
-}
-
-.action {
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-	padding: 0px 0px 0px 14.634px;
-}
-
-.actionLeft {
-	display: flex;
-	gap: 10px;
-	align-items: center;
-}
-
-.connectionLine {
-	border-top: 1px dashed var(--l1-border);
-	min-width: 20px;
-	flex-grow: 1;
-	margin: 0px 8px;
-}
-
-.actionRight {
-	display: flex;
-	align-items: center;
-}
-
-.saveChanges {
-	display: flex;
-	width: 100%;
-	height: 32px;
-	padding: 8px 16px;
-	justify-content: center;
-	align-items: center;
-	flex-shrink: 0;
-	border-radius: 2px;
-	border: 1px solid var(--l1-border);
-	background: var(--l1-border);
-}
-
-:global(.configureMetadataModalRoot) {
-	:global(.ant-modal-content) {
-		width: 500px;
-		flex-shrink: 0;
-		border-radius: 4px;
-		border: 1px solid var(--l1-border);
-		background: var(--card);
-		box-shadow: 0px -4px 16px 2px rgba(0, 0, 0, 0.2);
-		padding: 0px;
-	}
-
-	:global(.ant-modal-header) {
-		background: var(--card);
-		padding: 16px;
-		border-bottom: 1px solid var(--l1-border);
-		margin-bottom: 0px;
-	}
-
-	:global(.ant-modal-body) {
-		padding: 14px 16px;
-	}
-
-	:global(.ant-modal-footer) {
-		margin-top: 0px;
-		padding: 4px 16px 16px 16px;
-	}
-}

frontend/src/pages/DashboardsListPageV2/components/ConfigureMetadataModal/ConfigureMetadataModal.tsx

@@ -1,218 +0,0 @@
-import { useEffect, useState } from 'react';
-import { Button, Modal } from 'antd';
-import { Typography } from '@signozhq/ui/typography';
-import { Switch } from '@signozhq/ui/switch';
-import { CalendarClock, Check, Clock4 } from '@signozhq/icons';
-import { get } from 'lodash-es';
-import { Base64Icons } from 'container/DashboardContainer/DashboardSettings/General/utils';
-import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
-import { useTimezone } from 'providers/Timezone';
-
-import { lastUpdatedLabel, type DashboardListItem } from '../../utils';
-import {
-	DynamicColumns,
-	useDashboardsListVisibleColumnsStore,
-	type DashboardDynamicColumns,
-} from './useDynamicColumns';
-
-import styles from './ConfigureMetadataModal.module.scss';
-
-interface Props {
-	open: boolean;
-	previewDashboard: DashboardListItem | undefined;
-	onClose: () => void;
-}
-
-function ConfigureMetadataModal({
-	open,
-	previewDashboard,
-	onClose,
-}: Props): JSX.Element {
-	const { formatTimezoneAdjustedTimestamp } = useTimezone();
-
-	const storedColumns = useDashboardsListVisibleColumnsStore(
-		(s) => s.visibleColumns,
-	);
-	const setStoredColumns = useDashboardsListVisibleColumnsStore(
-		(s) => s.setVisibleColumns,
-	);
-	const [draftColumns, setDraftColumns] =
-		useState<DashboardDynamicColumns>(storedColumns);
-
-	useEffect(() => {
-		if (open) {
-			setDraftColumns(storedColumns);
-		}
-	}, [open, storedColumns]);
-
-	const handleSave = (): void => {
-		setStoredColumns(draftColumns);
-		onClose();
-	};
-
-	const previewImage = previewDashboard?.image || Base64Icons[0];
-	const previewName = previewDashboard?.spec?.display?.name;
-	const previewCreatedBy = previewDashboard?.createdBy;
-	const previewUpdatedBy = previewDashboard?.updatedBy;
-	const previewUpdatedAt = previewDashboard?.updatedAt;
-
-	const formattedCreatedAt = previewDashboard
-		? formatTimezoneAdjustedTimestamp(
-				get(previewDashboard, 'createdAt', '') as string,
-				DATE_TIME_FORMATS.DASH_DATETIME_UTC,
-			)
-		: '';
-
-	return (
-		<Modal
-			open={open}
-			onCancel={onClose}
-			title="Configure Metadata"
-			footer={
-				<Button
-					type="text"
-					icon={<Check size={14} />}
-					className={styles.saveChanges}
-					onClick={handleSave}
-				>
-					Save Changes
-				</Button>
-			}
-			rootClassName="configureMetadataModalRoot"
-		>
-			<div className={styles.content}>
-				<div className={styles.preview}>
-					<section className={styles.previewHeader}>
-						<img
-							src={previewImage}
-							alt="dashboard-image"
-							className={styles.previewIcon}
-						/>
-						<Typography.Text className={styles.previewTitle}>
-							{previewName}
-						</Typography.Text>
-					</section>
-					<section className={styles.previewDetails}>
-						<section className={styles.previewRow}>
-							{draftColumns.createdAt && (
-								<span className={styles.formattedTime}>
-									<CalendarClock size={14} />
-									<Typography.Text className={styles.formattedTimeText}>
-										{formattedCreatedAt}
-									</Typography.Text>
-								</span>
-							)}
-							{draftColumns.createdBy && (
-								<div className={styles.user}>
-									<Typography.Text className={styles.userTag}>
-										{previewCreatedBy?.substring(0, 1).toUpperCase()}
-									</Typography.Text>
-									<Typography.Text className={styles.userLabel}>
-										{previewCreatedBy}
-									</Typography.Text>
-								</div>
-							)}
-						</section>
-						<section className={styles.previewRow}>
-							{draftColumns.updatedAt && (
-								<span className={styles.formattedTime}>
-									<CalendarClock size={14} />
-									<Typography.Text className={styles.formattedTimeText}>
-										{lastUpdatedLabel(previewUpdatedAt)}
-									</Typography.Text>
-								</span>
-							)}
-							{draftColumns.updatedBy && (
-								<div className={styles.user}>
-									<Typography.Text className={styles.userTag}>
-										{previewUpdatedBy?.substring(0, 1).toUpperCase()}
-									</Typography.Text>
-									<Typography.Text className={styles.userLabel}>
-										{previewUpdatedBy}
-									</Typography.Text>
-								</div>
-							)}
-						</section>
-					</section>
-				</div>
-
-				<div className={styles.action}>
-					<div className={styles.actionLeft}>
-						<CalendarClock size={14} />
-						<Typography.Text>Created at</Typography.Text>
-					</div>
-					<div className={styles.connectionLine} />
-					<div className={styles.actionRight}>
-						<Switch
-							value
-							disabled
-							onChange={(check): void =>
-								setDraftColumns((prev) => ({
-									...prev,
-									[DynamicColumns.CREATED_AT]: check,
-								}))
-							}
-						/>
-					</div>
-				</div>
-				<div className={styles.action}>
-					<div className={styles.actionLeft}>
-						<CalendarClock size={14} />
-						<Typography.Text>Created by</Typography.Text>
-					</div>
-					<div className={styles.connectionLine} />
-					<div className={styles.actionRight}>
-						<Switch
-							value
-							disabled
-							onChange={(check): void =>
-								setDraftColumns((prev) => ({
-									...prev,
-									[DynamicColumns.CREATED_BY]: check,
-								}))
-							}
-						/>
-					</div>
-				</div>
-				<div className={styles.action}>
-					<div className={styles.actionLeft}>
-						<Clock4 size={14} />
-						<Typography.Text>Updated at</Typography.Text>
-					</div>
-					<div className={styles.connectionLine} />
-					<div className={styles.actionRight}>
-						<Switch
-							value={draftColumns.updatedAt}
-							onChange={(check): void =>
-								setDraftColumns((prev) => ({
-									...prev,
-									[DynamicColumns.UPDATED_AT]: check,
-								}))
-							}
-						/>
-					</div>
-				</div>
-				<div className={styles.action}>
-					<div className={styles.actionLeft}>
-						<Clock4 size={14} />
-						<Typography.Text>Updated by</Typography.Text>
-					</div>
-					<div className={styles.connectionLine} />
-					<div className={styles.actionRight}>
-						<Switch
-							value={draftColumns.updatedBy}
-							onChange={(check): void =>
-								setDraftColumns((prev) => ({
-									...prev,
-									[DynamicColumns.UPDATED_BY]: check,
-								}))
-							}
-						/>
-					</div>
-				</div>
-			</div>
-		</Modal>
-	);
-}
-
-export default ConfigureMetadataModal;

frontend/src/pages/DashboardsListPageV2/components/ConfigureMetadataModal/useDynamicColumns.ts

@@ -1,52 +0,0 @@
-import { create } from 'zustand';
-import { persist } from 'zustand/middleware';
-import { LOCALSTORAGE } from 'constants/localStorage';
-
-export interface DashboardDynamicColumns {
-	createdAt: boolean;
-	createdBy: boolean;
-	updatedAt: boolean;
-	updatedBy: boolean;
-}
-
-export enum DynamicColumns {
-	CREATED_AT = 'createdAt',
-	CREATED_BY = 'createdBy',
-	UPDATED_AT = 'updatedAt',
-	UPDATED_BY = 'updatedBy',
-}
-
-const DEFAULT_COLUMNS: DashboardDynamicColumns = {
-	createdAt: true,
-	createdBy: true,
-	updatedAt: false,
-	updatedBy: false,
-};
-
-interface DashboardsListVisibleColumnsState {
-	visibleColumns: DashboardDynamicColumns;
-	setVisibleColumns: (next: DashboardDynamicColumns) => void;
-}
-
-export const useDashboardsListVisibleColumnsStore =
-	create<DashboardsListVisibleColumnsState>()(
-		persist(
-			(set) => ({
-				visibleColumns: DEFAULT_COLUMNS,
-				setVisibleColumns: (next): void => {
-					set({ visibleColumns: next });
-				},
-			}),
-			{
-				name: LOCALSTORAGE.DASHBOARDS_LIST_VISIBLE_COLUMNS,
-				merge: (persisted, current) => ({
-					...current,
-					visibleColumns: {
-						...DEFAULT_COLUMNS,
-						...((persisted as Partial<DashboardsListVisibleColumnsState>)
-							?.visibleColumns ?? {}),
-					},
-				}),
-			},
-		),
-	);

frontend/src/pages/DashboardsListPageV2/components/CreateDashboardDropdown/CreateDashboardDropdown.module.scss

@@ -1,34 +0,0 @@
-.menuItem {
-	display: flex;
-	align-items: center;
-	gap: 8px;
-}
-
-.templatesItem {
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-	gap: 8px;
-	width: 100%;
-}
-
-.primaryButton {
-	padding: 6px 12px;
-}
-
-.textButton {
-	display: flex;
-	width: 153px;
-	align-items: center;
-	height: 32px;
-	padding: 6px 12px;
-	justify-content: center;
-	gap: 6px;
-	border-radius: 2px;
-	background: var(--primary-background);
-	color: var(--l1-foreground);
-}
-
-:global(.createDashboardMenuOverlay) {
-	width: 200px;
-}

frontend/src/pages/DashboardsListPageV2/components/CreateDashboardDropdown/CreateDashboardDropdown.tsx

@@ -1,119 +0,0 @@
-import { useMemo } from 'react';
-// eslint-disable-next-line signoz/no-antd-components -- TODO: migrate Dropdown to @signozhq/ui/dropdown-menu
-import { Button, Dropdown, MenuProps } from 'antd';
-import cx from 'classnames';
-import logEvent from 'api/common/logEvent';
-import {
-	ExternalLink,
-	Github,
-	LayoutGrid,
-	Plus,
-	Radius,
-} from '@signozhq/icons';
-
-import styles from './CreateDashboardDropdown.module.scss';
-
-interface Props {
-	canCreate: boolean;
-	onCreate: () => void;
-	onImportJSON: () => void;
-	variant?: 'primary' | 'text';
-}
-
-const TEMPLATES_HREF =
-	'https://signoz.io/docs/dashboards/dashboard-templates/overview/';
-
-function CreateDashboardDropdown({
-	canCreate,
-	onCreate,
-	onImportJSON,
-	variant = 'primary',
-}: Props): JSX.Element {
-	const items: MenuProps['items'] = useMemo(() => {
-		const menuItems: MenuProps['items'] = [
-			{
-				key: 'import-json',
-				label: (
-					<div
-						className={styles.menuItem}
-						data-testid="import-json-menu-cta"
-						onClick={onImportJSON}
-					>
-						<Radius size={14} /> Import JSON
-					</div>
-				),
-			},
-			{
-				key: 'view-templates',
-				label: (
-					<a
-						href={TEMPLATES_HREF}
-						target="_blank"
-						rel="noopener noreferrer"
-						data-testid="view-templates-menu-cta"
-					>
-						<div className={styles.templatesItem}>
-							<div className={styles.menuItem}>
-								<Github size={14} /> View templates
-							</div>
-							<ExternalLink size={14} />
-						</div>
-					</a>
-				),
-			},
-		];
-
-		if (canCreate) {
-			menuItems.unshift({
-				key: 'create-dashboard',
-				label: (
-					<div
-						className={styles.menuItem}
-						data-testid="create-dashboard-menu-cta"
-						onClick={onCreate}
-					>
-						<LayoutGrid size={14} /> Create dashboard
-					</div>
-				),
-			});
-		}
-
-		return menuItems;
-	}, [canCreate, onCreate, onImportJSON]);
-
-	return (
-		<Dropdown
-			overlayClassName="createDashboardMenuOverlay"
-			menu={{ items }}
-			placement="bottomRight"
-			trigger={['click']}
-		>
-			{variant === 'primary' ? (
-				<Button
-					type="primary"
-					className={cx('periscope-btn primary', styles.primaryButton)}
-					icon={<Plus size={14} />}
-					data-testid="new-dashboard-cta"
-					onClick={(): void => {
-						logEvent('Dashboard List: New dashboard clicked', {});
-					}}
-				>
-					New dashboard
-				</Button>
-			) : (
-				<Button
-					type="text"
-					className={styles.textButton}
-					icon={<Plus size={14} />}
-					onClick={(): void => {
-						logEvent('Dashboard List: New dashboard clicked', {});
-					}}
-				>
-					New Dashboard
-				</Button>
-			)}
-		</Dropdown>
-	);
-}
-
-export default CreateDashboardDropdown;

frontend/src/pages/DashboardsListPageV2/components/DashboardRow/DashboardRow.module.scss

@@ -1,152 +0,0 @@
-.row {
-	padding: 12px 16px 16px 16px;
-	border: 1px solid var(--l1-border);
-	border-top: none;
-	background: var(--l2-background);
-	cursor: pointer;
-}
-
-.titleWithAction {
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-	gap: 8px;
-	min-height: 24px;
-}
-
-.titleBlock {
-	display: flex;
-	align-items: center;
-	gap: 6px;
-	line-height: 20px;
-	flex: 1 1 auto;
-	min-width: 0;
-}
-
-.titleLink {
-	display: flex;
-	align-items: center;
-	gap: 8px;
-}
-
-.icon {
-	display: inline-block;
-	line-height: 20px;
-	height: 14px;
-	width: 14px;
-}
-
-.title {
-	color: var(--l1-foreground);
-	font-size: var(--font-size-sm);
-	font-style: normal;
-	font-weight: var(--font-weight-medium);
-	line-height: 20px;
-	letter-spacing: -0.07px;
-	display: -webkit-box;
-	-webkit-line-clamp: 3;
-	-webkit-box-orient: vertical;
-	overflow: hidden;
-}
-
-.tagsWithActions {
-	display: flex;
-	align-items: center;
-	flex: 0 1 auto;
-	min-width: 0;
-	justify-content: flex-end;
-}
-
-.tags {
-	display: flex;
-	flex-wrap: wrap;
-	gap: 8px;
-	justify-content: flex-end;
-}
-
-.tag {
-	display: flex;
-	padding: 4px 8px;
-	justify-content: center;
-	align-items: center;
-	gap: 4px;
-	height: 28px;
-	border-radius: 20px;
-	border: 1px solid color-mix(in srgb, var(--bg-sienna-500) 20%, transparent);
-	background: color-mix(in srgb, var(--bg-sienna-500) 10%, transparent);
-	color: var(--bg-sienna-400);
-	text-align: center;
-	font-family: Inter;
-	font-size: var(--font-size-sm);
-	font-style: normal;
-	font-weight: var(--font-weight-normal);
-	line-height: 20px;
-	letter-spacing: -0.07px;
-	margin-inline-end: 0px;
-}
-
-.details {
-	margin-top: 12px;
-	display: flex;
-	align-items: center;
-	flex-wrap: wrap;
-	gap: 12px 24px;
-}
-
-.createdAt {
-	display: flex;
-	align-items: center;
-	gap: 6px;
-	color: var(--l2-foreground);
-	font-family: Inter;
-	font-size: var(--font-size-xs);
-	font-weight: var(--font-weight-normal);
-	line-height: 18px;
-	letter-spacing: -0.07px;
-}
-
-.createdBy {
-	display: flex;
-	align-items: center;
-	gap: 8px;
-}
-
-.avatar {
-	width: 14px;
-	height: 14px;
-	border-radius: 50px;
-	background: var(--l1-border);
-	display: flex;
-	justify-content: center;
-	align-items: center;
-}
-
-.avatarText {
-	color: var(--l2-foreground);
-	font-size: 8px;
-	font-weight: var(--font-weight-normal);
-	line-height: normal;
-	letter-spacing: -0.05px;
-}
-
-.byLabel {
-	color: var(--l2-foreground);
-	font-family: Inter;
-	font-size: var(--font-size-xs);
-	font-weight: var(--font-weight-normal);
-	line-height: 18px;
-	letter-spacing: -0.07px;
-}
-
-.updatedBy {
-	display: flex;
-	align-items: center;
-	gap: 6px;
-}
-
-:global(.titleTooltipOverlay) {
-	:global(.ant-tooltip-content) :global(.ant-tooltip-inner) {
-		max-height: 400px;
-		overflow: auto;
-	}
-}

frontend/src/pages/DashboardsListPageV2/components/DashboardRow/DashboardRow.tsx

@@ -1,154 +0,0 @@
-import { Tooltip } from 'antd';
-import { Typography } from '@signozhq/ui/typography';
-import { Badge } from '@signozhq/ui/badge';
-import { CalendarClock } from '@signozhq/icons';
-import logEvent from 'api/common/logEvent';
-import { generatePath } from 'react-router-dom';
-import { Base64Icons } from 'container/DashboardContainer/DashboardSettings/General/utils';
-import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
-import ROUTES from 'constants/routes';
-import { useSafeNavigate } from 'hooks/useSafeNavigate';
-import { useTimezone } from 'providers/Timezone';
-import { isModifierKeyPressed } from 'utils/app';
-
-import type { DashboardListItem } from '../../utils';
-import { lastUpdatedLabel, tagsToStrings } from '../../utils';
-import ActionsPopover from '../ActionsPopover/ActionsPopover';
-
-import styles from './DashboardRow.module.scss';
-
-interface Props {
-	dashboard: DashboardListItem;
-	index: number;
-	canAct: boolean;
-	showUpdatedAt: boolean;
-	showUpdatedBy: boolean;
-}
-
-function DashboardRow({
-	dashboard,
-	index,
-	canAct,
-	showUpdatedAt,
-	showUpdatedBy,
-}: Props): JSX.Element {
-	const { safeNavigate } = useSafeNavigate();
-	const { formatTimezoneAdjustedTimestamp } = useTimezone();
-
-	const id = dashboard.id;
-	const name = dashboard.spec?.display?.name ?? '';
-	const image = dashboard.image || Base64Icons[0];
-	const createdBy = dashboard.createdBy ?? '';
-	const updatedBy = dashboard.updatedBy ?? '';
-	const createdAt = dashboard.createdAt ?? '';
-	const updatedAt = dashboard.updatedAt ?? '';
-	const isLocked = !!dashboard.locked;
-	const tags = tagsToStrings(dashboard.tags);
-
-	const link = generatePath(ROUTES.DASHBOARD, { dashboardId: id });
-	const formattedCreatedAt = formatTimezoneAdjustedTimestamp(
-		createdAt,
-		DATE_TIME_FORMATS.DASH_DATETIME_UTC,
-	);
-
-	const onClickHandler = (event: React.MouseEvent<HTMLElement>): void => {
-		event.stopPropagation();
-		safeNavigate(link, { newTab: isModifierKeyPressed(event) });
-		logEvent('Dashboard List: Clicked on dashboard', {
-			dashboardId: id,
-			dashboardName: name,
-		});
-	};
-
-	return (
-		<div className={styles.row} onClick={onClickHandler}>
-			<div className={styles.titleWithAction}>
-				<div className={styles.titleBlock}>
-					<Tooltip
-						title={name.length > 50 ? name : ''}
-						placement="left"
-						overlayClassName="titleTooltipOverlay"
-					>
-						<div className={styles.titleLink} onClick={onClickHandler}>
-							<img src={image} alt="dashboard-image" className={styles.icon} />
-							<Typography.Text
-								data-testid={`dashboard-title-${index}`}
-								className={styles.title}
-							>
-								{name}
-							</Typography.Text>
-						</div>
-					</Tooltip>
-				</div>
-
-				<div className={styles.tagsWithActions}>
-					{tags.length > 0 && (
-						<div className={styles.tags}>
-							{tags.slice(0, 3).map((tag) => (
-								<Badge className={styles.tag} key={tag}>
-									{tag}
-								</Badge>
-							))}
-							{tags.length > 3 && (
-								<Badge className={styles.tag} key={tags[3]}>
-									+ <span> {tags.length - 3} </span>
-								</Badge>
-							)}
-						</div>
-					)}
-				</div>
-
-				{canAct && (
-					<ActionsPopover
-						link={link}
-						dashboardId={id}
-						dashboardName={name}
-						createdBy={createdBy}
-						isLocked={isLocked}
-						onView={onClickHandler}
-					/>
-				)}
-			</div>
-			<div className={styles.details}>
-				<div className={styles.createdAt}>
-					<CalendarClock size={14} />
-					<Typography.Text>{formattedCreatedAt}</Typography.Text>
-				</div>
-
-				{createdBy && (
-					<div className={styles.createdBy}>
-						<div className={styles.avatar}>
-							<Typography.Text className={styles.avatarText}>
-								{createdBy.substring(0, 1).toUpperCase()}
-							</Typography.Text>
-						</div>
-						<Typography.Text className={styles.byLabel}>{createdBy}</Typography.Text>
-					</div>
-				)}
-
-				{showUpdatedAt && (
-					<div className={styles.createdAt}>
-						<CalendarClock size={14} />
-						<Typography.Text>{lastUpdatedLabel(updatedAt)}</Typography.Text>
-					</div>
-				)}
-
-				{updatedBy && showUpdatedBy && (
-					<div className={styles.updatedBy}>
-						<Typography.Text className={styles.byLabel}>
-							Last Updated By -
-						</Typography.Text>
-						<div className={styles.avatar}>
-							<Typography.Text className={styles.avatarText}>
-								{updatedBy.substring(0, 1).toUpperCase()}
-							</Typography.Text>
-						</div>
-						<Typography.Text className={styles.byLabel}>{updatedBy}</Typography.Text>
-					</div>
-				)}
-			</div>
-		</div>
-	);
-}
-
-export default DashboardRow;

frontend/src/pages/DashboardsListPageV2/components/DashboardsList/DashboardsList.module.scss

@@ -1,96 +0,0 @@
-.container {
-	margin-top: 30px;
-	margin-bottom: 30px;
-	display: flex;
-	justify-content: center;
-	width: 100%;
-}
-
-.viewContent {
-	width: calc(100% - 30px);
-	max-width: 836px;
-
-	:global(.ant-table-wrapper) :global(.ant-table-cell) {
-		padding: 0 !important;
-		border: none !important;
-		background: var(--l1-background) !important;
-	}
-
-	:global(.ant-table-wrapper)
-		:global(.ant-table-tbody)
-		:global(.ant-table-row)
-		:global(.ant-table-cell)
-		> div {
-		// Row content is the only child of the td; it carries the borders.
-	}
-
-	:global(.ant-table-wrapper)
-		:global(.ant-table-tbody)
-		:global(.ant-table-row:last-child)
-		:global(.ant-table-cell)
-		> div {
-		border-radius: 0 0 6px 6px;
-	}
-
-	:global(.ant-pagination-item) {
-		display: flex;
-		justify-content: center;
-		align-items: center;
-	}
-
-	:global(.ant-pagination-item) > a {
-		color: var(--l2-foreground);
-		font-size: var(--font-size-sm);
-		font-weight: var(--font-weight-normal);
-		line-height: 20px;
-	}
-
-	:global(.ant-pagination-item-active) {
-		background-color: var(--primary-background);
-	}
-
-	:global(.ant-pagination-item-active) > a {
-		color: var(--foreground) !important;
-		font-weight: var(--font-weight-medium);
-	}
-}
-
-.titleContainer {
-	display: flex;
-	flex-direction: column;
-	gap: 4px;
-}
-
-.title {
-	color: var(--l1-foreground);
-	font-size: var(--font-size-lg);
-	font-style: normal;
-	font-weight: var(--font-weight-normal);
-	line-height: 28px;
-	letter-spacing: -0.09px;
-}
-
-.subtitle {
-	color: var(--l2-foreground);
-	font-size: var(--font-size-sm);
-	font-style: normal;
-	font-weight: var(--font-weight-normal);
-	line-height: 20px;
-	letter-spacing: -0.07px;
-}
-
-.integrationsContainer {
-	margin: 16px 0;
-}
-
-.integrationsContent {
-	max-width: 100%;
-	width: 100%;
-}
-
-.toolbar {
-	display: flex;
-	align-items: center;
-	gap: 8px;
-	margin: 16px 0;
-}

frontend/src/pages/DashboardsListPageV2/components/DashboardsList/DashboardsList.tsx

@@ -1,277 +0,0 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { generatePath } from 'react-router-dom';
-import { useTranslation } from 'react-i18next';
-import { Typography } from '@signozhq/ui/typography';
-import { AxiosError } from 'axios';
-import logEvent from 'api/common/logEvent';
-import {
-	createDashboardV2,
-	useListDashboardsV2,
-} from 'api/generated/services/dashboard';
-import ROUTES from 'constants/routes';
-import { RequestDashboardBtn } from 'container/ListOfDashboard/RequestDashboardBtn';
-import useComponentPermission from 'hooks/useComponentPermission';
-import { toast } from '@signozhq/ui/sonner';
-import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
-import { useSafeNavigate } from 'hooks/useSafeNavigate';
-import { useAppContext } from 'providers/App/App';
-import { useErrorModal } from 'providers/ErrorModalProvider';
-import APIError from 'types/api/error';
-import { toAPIError } from 'utils/errorUtils';
-
-import {
-	usePage,
-	useSearch,
-	useSortColumn,
-	useSortOrder,
-	type SortColumn,
-	type SortOrder,
-} from '../../hooks/useDashboardsListQueryParams';
-import type { DashboardListItem } from '../../utils';
-import ConfigureMetadataModal from '../ConfigureMetadataModal/ConfigureMetadataModal';
-import { useDashboardsListVisibleColumnsStore } from '../ConfigureMetadataModal/useDynamicColumns';
-import CreateDashboardDropdown from '../CreateDashboardDropdown/CreateDashboardDropdown';
-import ImportJSONModal from '../ImportJSONModal/ImportJSONModal';
-import ListHeader from '../ListHeader/ListHeader';
-import EmptyState from '../states/EmptyState/EmptyState';
-import ErrorState from '../states/ErrorState/ErrorState';
-import LoadingState from '../states/LoadingState/LoadingState';
-import NoResultsState from '../states/NoResultsState/NoResultsState';
-import SearchBar from '../SearchBar/SearchBar';
-import DashboardsListContent from './DashboardsListContent';
-
-import styles from './DashboardsList.module.scss';
-
-const PAGE_SIZE = 20;
-
-function DashboardsList(): JSX.Element {
-	const { safeNavigate } = useSafeNavigate();
-	const { t } = useTranslation('dashboard');
-	const { showErrorModal } = useErrorModal();
-	const { isCloudUser } = useGetTenantLicense();
-
-	const { user } = useAppContext();
-	const [action, canCreateNewDashboard] = useComponentPermission(
-		['action', 'create_new_dashboards'],
-		user.role,
-	);
-
-	const [searchString, setSearchString] = useSearch();
-	const [sortColumn, setSortColumn] = useSortColumn();
-	const [sortOrder, setSortOrder] = useSortOrder();
-	const [page, setPage] = usePage();
-
-	const [searchInput, setSearchInput] = useState(searchString);
-
-	// Keep the local input in sync with external searchString changes
-	// (browser back/forward, deep link). User typing only mutates
-	// searchInput, so this won't fight with in-flight edits.
-	useEffect(() => {
-		setSearchInput(searchString);
-	}, [searchString]);
-
-	const handleSubmitSearch = useCallback((): void => {
-		const next = searchInput.trim();
-		if (next === searchString) {
-			return;
-		}
-		void setSearchString(next);
-		void setPage(1);
-	}, [searchInput, searchString, setSearchString, setPage]);
-
-	const listParams = useMemo(
-		() => ({
-			query: searchString.trim() || undefined,
-			sort: sortColumn,
-			order: sortOrder,
-			limit: PAGE_SIZE,
-			offset: (page - 1) * PAGE_SIZE,
-		}),
-		[searchString, sortColumn, sortOrder, page],
-	);
-
-	const {
-		data: response,
-		isLoading,
-		isFetching,
-		error,
-		refetch,
-	} = useListDashboardsV2(listParams, { query: { keepPreviousData: true } });
-
-	const apiError = useMemo(
-		() => (error ? toAPIError(error) : undefined),
-		[error],
-	);
-	const errorHttpStatus = apiError?.getHttpStatusCode();
-	const errorMessage = apiError?.getErrorMessage();
-
-	const dashboards = useMemo<DashboardListItem[]>(
-		() => response?.data?.dashboards ?? [],
-		[response],
-	);
-	const total = response?.data?.total ?? 0;
-
-	const [isImportOpen, setIsImportOpen] = useState(false);
-	const [isConfigureOpen, setIsConfigureOpen] = useState(false);
-	const visibleColumns = useDashboardsListVisibleColumnsStore(
-		(s) => s.visibleColumns,
-	);
-
-	const [creating, setCreating] = useState(false);
-
-	const handleCreateNew = useCallback(async (): Promise<void> => {
-		try {
-			logEvent('Dashboard List: Create dashboard clicked', {});
-			setCreating(true);
-			const created = await createDashboardV2({
-				schemaVersion: 'v6',
-				// Backend requires `name` (immutable, server-side identifier);
-				// asking it to generate one keeps the UI's "new dashboard" flow.
-				generateName: true,
-				tags: null,
-				spec: {
-					display: { name: t('new_dashboard_title', { ns: 'dashboard' }) },
-				},
-			});
-			safeNavigate(
-				generatePath(ROUTES.DASHBOARD, { dashboardId: created.data.id }),
-			);
-		} catch (e) {
-			showErrorModal(e as APIError);
-			toast.error((e as AxiosError).toString() || 'Failed to create dashboard');
-		} finally {
-			setCreating(false);
-		}
-	}, [safeNavigate, showErrorModal, t]);
-
-	const handleImportToggle = useCallback((): void => {
-		logEvent('Dashboard List V2: Import JSON clicked', {});
-		setIsImportOpen((s) => !s);
-	}, []);
-
-	const onSortChange = useCallback(
-		(column: SortColumn): void => {
-			void setSortColumn(column);
-			void setPage(1);
-		},
-		[setSortColumn, setPage],
-	);
-
-	const onOrderChange = useCallback(
-		(order: SortOrder): void => {
-			void setSortOrder(order);
-			void setPage(1);
-		},
-		[setSortOrder, setPage],
-	);
-
-	const visitLoggedRef = useRef(false);
-	useEffect(() => {
-		if (!visitLoggedRef.current && !isLoading && response !== undefined) {
-			logEvent('Dashboard List V2: Page visited', { number: dashboards.length });
-			visitLoggedRef.current = true;
-		}
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [isLoading]);
-
-	return (
-		<div className={styles.container}>
-			<div className={styles.viewContent}>
-				<div className={styles.titleContainer}>
-					<Typography.Title className={styles.title}>Dashboards</Typography.Title>
-					<Typography.Text className={styles.subtitle}>
-						Create and manage dashboards for your workspace.
-					</Typography.Text>
-					{isCloudUser && (
-						<div className={styles.integrationsContainer}>
-							<div className={styles.integrationsContent}>
-								<RequestDashboardBtn />
-							</div>
-						</div>
-					)}
-				</div>
-
-				{isLoading ? (
-					<LoadingState />
-				) : !error && dashboards.length === 0 && !searchString && page === 1 ? (
-					<EmptyState
-						createDropdown={
-							canCreateNewDashboard ? (
-								<CreateDashboardDropdown
-									canCreate={!!canCreateNewDashboard}
-									onCreate={handleCreateNew}
-									onImportJSON={handleImportToggle}
-									variant="text"
-								/>
-							) : null
-						}
-					/>
-				) : (
-					<>
-						<div className={styles.toolbar}>
-							<SearchBar
-								value={searchInput}
-								onChange={setSearchInput}
-								onSubmit={handleSubmitSearch}
-							/>
-							{canCreateNewDashboard && (
-								<CreateDashboardDropdown
-									canCreate={!!canCreateNewDashboard}
-									onCreate={handleCreateNew}
-									onImportJSON={handleImportToggle}
-								/>
-							)}
-						</div>
-
-						{error ? (
-							<ErrorState
-								isCloudUser={!!isCloudUser}
-								onRetry={(): void => {
-									refetch();
-								}}
-								httpStatus={errorHttpStatus}
-								errorMessage={errorMessage}
-							/>
-						) : dashboards.length === 0 ? (
-							<NoResultsState searchString={searchInput} />
-						) : (
-							<>
-								<ListHeader
-									sortColumn={sortColumn}
-									onSortChange={onSortChange}
-									sortOrder={sortOrder}
-									onOrderChange={onOrderChange}
-									onConfigureMetadata={(): void => setIsConfigureOpen(true)}
-								/>
-								<DashboardsListContent
-									dashboards={dashboards}
-									page={page}
-									pageSize={PAGE_SIZE}
-									total={total}
-									onPageChange={setPage}
-									canAct={!!action}
-									showUpdatedAt={visibleColumns.updatedAt}
-									showUpdatedBy={visibleColumns.updatedBy}
-									loading={creating || isFetching}
-								/>
-							</>
-						)}
-					</>
-				)}
-
-				<ImportJSONModal
-					open={isImportOpen}
-					onClose={(): void => setIsImportOpen(false)}
-				/>
-
-				<ConfigureMetadataModal
-					open={isConfigureOpen}
-					previewDashboard={dashboards[0]}
-					onClose={(): void => setIsConfigureOpen(false)}
-				/>
-			</div>
-		</div>
-	);
-}
-
-export default DashboardsList;

frontend/src/pages/DashboardsListPageV2/components/DashboardsList/DashboardsListContent.tsx

@@ -1,71 +0,0 @@
-import { useMemo } from 'react';
-import { Table } from 'antd';
-import type { TableProps } from 'antd/lib';
-
-import type { DashboardListItem } from '../../utils';
-import DashboardRow from '../DashboardRow/DashboardRow';
-
-interface Props {
-	dashboards: DashboardListItem[];
-	page: number;
-	pageSize: number;
-	total: number;
-	onPageChange: (page: number) => void;
-	canAct: boolean;
-	showUpdatedAt: boolean;
-	showUpdatedBy: boolean;
-	loading: boolean;
-}
-
-function DashboardsListContent({
-	dashboards,
-	page,
-	pageSize,
-	total,
-	onPageChange,
-	canAct,
-	showUpdatedAt,
-	showUpdatedBy,
-	loading,
-}: Props): JSX.Element {
-	const columns: TableProps<DashboardListItem>['columns'] = useMemo(
-		() => [
-			{
-				title: 'Dashboards',
-				key: 'dashboard',
-				render: (_, dashboard, index): JSX.Element => (
-					<DashboardRow
-						dashboard={dashboard}
-						index={index}
-						canAct={canAct}
-						showUpdatedAt={showUpdatedAt}
-						showUpdatedBy={showUpdatedBy}
-					/>
-				),
-			},
-		],
-		[canAct, showUpdatedAt, showUpdatedBy],
-	);
-
-	const paginationConfig = total > pageSize && {
-		pageSize,
-		showSizeChanger: false,
-		onChange: onPageChange,
-		current: page,
-		total,
-		hideOnSinglePage: true,
-	};
-
-	return (
-		<Table
-			columns={columns}
-			dataSource={dashboards.map((d) => ({ ...d, key: d.id }))}
-			showSorterTooltip
-			loading={loading}
-			showHeader={false}
-			pagination={paginationConfig}
-		/>
-	);
-}
-
-export default DashboardsListContent;

frontend/src/pages/DashboardsListPageV2/components/DashboardsList/index.tsx

@@ -1,3 +0,0 @@
-import DashboardsList from './DashboardsList';
-
-export default DashboardsList;

frontend/src/pages/DashboardsListPageV2/components/ImportJSONModal/ImportJSONModal.module.scss

@@ -1,73 +0,0 @@
-.contentContainer {
-	display: flex;
-	flex-direction: column;
-}
-
-.contentHeader {
-	padding: 16px;
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	border-bottom: 1px solid var(--l1-border);
-}
-
-.footer {
-	display: flex;
-	flex-direction: column;
-	gap: 8px;
-}
-
-.jsonError {
-	display: flex;
-	align-items: center;
-	gap: 8px;
-}
-
-.errorText {
-	color: var(--warning-background);
-}
-
-.actions {
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-}
-
-:global(.importJsonModalWrapper) {
-	:global(.ant-modal-content) {
-		border-radius: 4px;
-		border: 1px solid var(--l1-border);
-		background: linear-gradient(
-			139deg,
-			color-mix(in srgb, var(--card) 80%, transparent) 0%,
-			color-mix(in srgb, var(--card) 90%, transparent) 98.68%
-		);
-		box-shadow: 4px 10px 16px 2px rgba(0, 0, 0, 0.2);
-		backdrop-filter: blur(20px);
-		padding: 0;
-	}
-
-	:global(.margin) {
-		background: linear-gradient(
-			139deg,
-			color-mix(in srgb, var(--card) 80%, transparent) 0%,
-			color-mix(in srgb, var(--card) 90%, transparent) 98.68%
-		);
-		backdrop-filter: blur(20px);
-	}
-
-	:global(.view-lines) {
-		background: linear-gradient(
-			139deg,
-			color-mix(in srgb, var(--card) 80%, transparent) 0%,
-			color-mix(in srgb, var(--card) 90%, transparent) 98.68%
-		);
-		backdrop-filter: blur(20px);
-	}
-
-	:global(.ant-modal-footer) {
-		margin-top: 0;
-		padding: 16px;
-		border-top: 1px solid var(--l1-border);
-	}
-}

frontend/src/pages/DashboardsListPageV2/components/ImportJSONModal/ImportJSONModal.tsx

@@ -1,223 +0,0 @@
-import { useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { generatePath } from 'react-router-dom';
-import { red } from '@ant-design/colors';
-import MEditor, { Monaco } from '@monaco-editor/react';
-import { Color } from '@signozhq/design-tokens';
-import { Button, Flex, Modal, Upload, UploadProps } from 'antd';
-import { toast } from '@signozhq/ui/sonner';
-import { Typography } from '@signozhq/ui/typography';
-import {
-	CircleAlert,
-	ExternalLink,
-	Github,
-	MonitorDot,
-	MoveRight,
-	Sparkles,
-} from '@signozhq/icons';
-import logEvent from 'api/common/logEvent';
-import { createDashboardV2 } from 'api/generated/services/dashboard';
-import ROUTES from 'constants/routes';
-import { useIsDarkMode } from 'hooks/useDarkMode';
-import { useSafeNavigate } from 'hooks/useSafeNavigate';
-import { useErrorModal } from 'providers/ErrorModalProvider';
-import APIError from 'types/api/error';
-
-import sampleDashboard from './sampleDashboard.json';
-
-import styles from './ImportJSONModal.module.scss';
-import { normalizeToPostable } from './ImportJSONModalUtils';
-
-interface Props {
-	open: boolean;
-	onClose: () => void;
-}
-
-function ImportJSONModal({ open, onClose }: Props): JSX.Element {
-	const { safeNavigate } = useSafeNavigate();
-	const { t } = useTranslation(['dashboard', 'common']);
-	const [isUploadError, setIsUploadError] = useState(false);
-	const [isCreateError, setIsCreateError] = useState(false);
-	const [isCreating, setIsCreating] = useState(false);
-	const [editorValue, setEditorValue] = useState('');
-
-	const { showErrorModal } = useErrorModal();
-	const isDarkMode = useIsDarkMode();
-
-	const handleUpload: UploadProps['onChange'] = (info) => {
-		const lastFile = info.fileList[info.fileList.length - 1];
-		if (!lastFile?.originFileObj) {
-			return;
-		}
-		const reader = new FileReader();
-		reader.onload = (event): void => {
-			try {
-				const target = event.target?.result;
-				if (!target) {
-					return;
-				}
-				const parsed = JSON.parse(target.toString());
-				setEditorValue(JSON.stringify(parsed, null, 2));
-				setIsUploadError(false);
-			} catch {
-				setIsUploadError(true);
-			}
-		};
-		reader.readAsText(lastFile.originFileObj);
-	};
-
-	const handleImport = async (): Promise<void> => {
-		try {
-			setIsCreating(true);
-			logEvent('Dashboard List V2: Import and next clicked', {});
-			const parsed = JSON.parse(editorValue) as Record<string, unknown>;
-			const payload = normalizeToPostable(parsed);
-			const response = await createDashboardV2(payload);
-			safeNavigate(
-				generatePath(ROUTES.DASHBOARD, { dashboardId: response.data.id }),
-			);
-			logEvent('Dashboard List V2: New dashboard imported successfully', {
-				dashboardId: response.data?.id,
-			});
-		} catch (error) {
-			showErrorModal(error as APIError);
-			setIsCreateError(true);
-			toast.error(
-				error instanceof Error ? error.message : t('error_loading_json'),
-			);
-		} finally {
-			setIsCreating(false);
-		}
-	};
-
-	const handleClose = (): void => {
-		setIsUploadError(false);
-		setIsCreateError(false);
-		onClose();
-	};
-
-	const setEditorTheme = (monaco: Monaco): void => {
-		monaco.editor.defineTheme('my-theme', {
-			base: 'vs-dark',
-			inherit: true,
-			rules: [
-				{ token: 'string.key.json', foreground: Color.BG_VANILLA_400 },
-				{ token: 'string.value.json', foreground: Color.BG_ROBIN_400 },
-			],
-			colors: { 'editor.background': Color.BG_INK_300 },
-		});
-	};
-
-	const renderError = (msg: string): JSX.Element => (
-		<div className={styles.jsonError}>
-			<CircleAlert size="md" color={red[7]} />
-			<Typography className={styles.errorText}>{msg}</Typography>
-		</div>
-	);
-
-	return (
-		<Modal
-			wrapClassName="importJsonModalWrapper"
-			open={open}
-			centered
-			closable
-			keyboard
-			maskClosable
-			onCancel={handleClose}
-			destroyOnClose
-			width="60vw"
-			footer={
-				<div className={styles.footer}>
-					{isCreateError && renderError(t('error_loading_json'))}
-					{isUploadError && renderError(t('error_upload_json'))}
-
-					<div className={styles.actions}>
-						<Flex gap="small">
-							<Upload
-								accept=".json"
-								showUploadList={false}
-								multiple={false}
-								onChange={handleUpload}
-								beforeUpload={(): boolean => false}
-								action="none"
-							>
-								<Button
-									type="default"
-									className="periscope-btn"
-									icon={<MonitorDot size={14} />}
-									onClick={(): void => {
-										logEvent('Dashboard List V2: Upload JSON file clicked', {});
-									}}
-								>
-									{t('upload_json_file')}
-								</Button>
-							</Upload>
-							<Button
-								type="default"
-								className="periscope-btn"
-								icon={<Sparkles size={14} />}
-								onClick={(): void => {
-									setEditorValue(JSON.stringify(sampleDashboard, null, 2));
-									setIsUploadError(false);
-									logEvent('Dashboard List V2: Load sample clicked', {});
-								}}
-							>
-								Load sample
-							</Button>
-							<a
-								href="https://signoz.io/docs/dashboards/dashboard-templates/overview/"
-								target="_blank"
-								rel="noopener noreferrer"
-							>
-								<Button
-									type="default"
-									className="periscope-btn"
-									icon={<Github size={14} />}
-								>
-									{t('view_template')}&nbsp;
-									<ExternalLink size={14} />
-								</Button>
-							</a>
-						</Flex>
-
-						<Button
-							onClick={handleImport}
-							loading={isCreating}
-							className="periscope-btn primary"
-							type="primary"
-						>
-							{t('import_and_next')} &nbsp; <MoveRight size={14} />
-						</Button>
-					</div>
-				</div>
-			}
-		>
-			<div className={styles.contentContainer}>
-				<div className={styles.contentHeader}>
-					<Typography.Text>{t('import_json')}</Typography.Text>
-				</div>
-				<MEditor
-					language="json"
-					height="40vh"
-					onChange={(newValue): void => setEditorValue(newValue || '')}
-					value={editorValue}
-					options={{
-						scrollbar: { alwaysConsumeMouseWheel: false },
-						minimap: { enabled: false },
-						fontSize: 14,
-						fontFamily: 'Space Mono',
-					}}
-					theme={isDarkMode ? 'my-theme' : 'light'}
-					onMount={(_, monaco): void => {
-						document.fonts.ready.then(() => {
-							monaco.editor.remeasureFonts();
-						});
-					}}
-					beforeMount={setEditorTheme}
-				/>
-			</div>
-		</Modal>
-	);
-}
-
-export default ImportJSONModal;

frontend/src/pages/DashboardsListPageV2/components/ImportJSONModal/ImportJSONModalUtils.ts

@@ -1,50 +0,0 @@
-import {
-	DashboardtypesDashboardSpecDTO,
-	DashboardtypesPostableDashboardV2DTO,
-	TagtypesPostableTagDTO,
-} from 'api/generated/services/sigNoz.schemas';
-
-// Accept either a complete PostableDashboardV2 (flat shape with `spec` and
-// top-level `name` / `image` / `tags` / `schemaVersion`) or a bare spec — wrap
-// the latter with defaults so users can paste either shape that exists in the
-// wild (e.g. testdata/perses.json is a bare spec). The legacy nested
-// `{ metadata: { ... }, spec }` shape is also accepted and flattened.
-//
-// The backend requires `name` (immutable identifier); if the payload doesn't
-// carry one, fall back to `generateName: true` so the server assigns one.
-export function normalizeToPostable(
-	parsed: Record<string, unknown>,
-): DashboardtypesPostableDashboardV2DTO {
-	const hasSpec = 'spec' in parsed;
-	const legacyMeta = parsed.metadata as
-		| {
-				schemaVersion?: string;
-				name?: string;
-				image?: string;
-				tags?: TagtypesPostableTagDTO[] | null;
-		  }
-		| undefined;
-
-	const resolvedName = (parsed.name as string | undefined) ?? legacyMeta?.name;
-
-	if (hasSpec) {
-		return {
-			schemaVersion:
-				(parsed.schemaVersion as string) || legacyMeta?.schemaVersion || 'v6',
-			...(resolvedName ? { name: resolvedName } : { generateName: true }),
-			image: (parsed.image as string) ?? legacyMeta?.image,
-			tags:
-				(parsed.tags as TagtypesPostableTagDTO[] | null) ??
-				legacyMeta?.tags ??
-				null,
-			spec: parsed.spec as DashboardtypesDashboardSpecDTO,
-		};
-	}
-
-	return {
-		schemaVersion: 'v6',
-		generateName: true,
-		tags: null,
-		spec: parsed as unknown as DashboardtypesDashboardSpecDTO,
-	};
-}

frontend/src/pages/DashboardsListPageV2/components/ImportJSONModal/sampleDashboard.json

@@ -1,154 +0,0 @@
-{
-    "display": {
-        "name": "NV dashboard with sections",
-        "description": ""
-    },
-    "datasources": {
-        "SigNozDatasource": {
-            "default": true,
-            "plugin": {
-                "kind": "signoz/Datasource",
-                "spec": {}
-            }
-        }
-    },
-    "panels": {
-        "b424e23b": {
-            "kind": "Panel",
-            "spec": {
-                "display": {
-                    "name": ""
-                },
-                "plugin": {
-                    "kind": "signoz/NumberPanel",
-                    "spec": {
-                        "formatting": {
-                            "unit": "s",
-                            "decimalPrecision": "2"
-                        }
-                    }
-                },
-                "queries": [
-                    {
-                        "kind": "TimeSeriesQuery",
-                        "spec": {
-                            "plugin": {
-                                "kind": "signoz/BuilderQuery",
-                                "spec": {
-                                    "name": "A",
-                                    "signal": "metrics",
-                                    "aggregations": [
-                                        {
-                                            "metricName": "container.cpu.time",
-                                            "reduceTo": "sum",
-                                            "spaceAggregation": "sum",
-                                            "timeAggregation": "rate"
-                                        }
-                                    ],
-                                    "filter": {
-                                        "expression": ""
-                                    }
-                                }
-                            }
-                        }
-                    }
-                ]
-            }
-        },
-        "251df4d5": {
-            "kind": "Panel",
-            "spec": {
-                "display": {
-                    "name": ""
-                },
-                "plugin": {
-                    "kind": "signoz/TimeSeriesPanel",
-                    "spec": {
-                        "visualization": {
-                            "fillSpans": false
-                        },
-                        "formatting": {
-                            "unit": "recommendations",
-                            "decimalPrecision": "2"
-                        },
-                        "chartAppearance": {
-                            "lineInterpolation": "spline",
-                            "showPoints": false,
-                            "lineStyle": "solid",
-                            "fillMode": "none",
-                            "spanGaps": {"fillOnlyBelow": true}
-                        },
-                        "legend": {
-                            "position": "bottom"
-                        }
-                    }
-                },
-                "queries": [
-                    {
-                        "kind": "TimeSeriesQuery",
-                        "spec": {
-                            "plugin": {
-                                "kind": "signoz/BuilderQuery",
-                                "spec": {
-                                    "name": "A",
-                                    "signal": "metrics",
-                                    "aggregations": [
-                                        {
-                                            "metricName": "app_recommendations_counter",
-                                            "reduceTo": "sum",
-                                            "spaceAggregation": "sum",
-                                            "timeAggregation": "rate"
-                                        }
-                                    ],
-                                    "filter": {
-                                        "expression": ""
-                                    }
-                                }
-                            }
-                        }
-                    }
-                ]
-            }
-        }
-    },
-    "layouts": [
-        {
-            "kind": "Grid",
-            "spec": {
-                "display": {
-                    "title": "Bravo"
-                },
-                "items": [
-                    {
-                        "x": 0,
-                        "y": 0,
-                        "width": 6,
-                        "height": 6,
-                        "content": {
-                            "$ref": "#/spec/panels/b424e23b"
-                        }
-                    }
-                ]
-            }
-        },
-        {
-            "kind": "Grid",
-            "spec": {
-                "display": {
-                    "title": "Alpha"
-                },
-                "items": [
-                    {
-                        "x": 0,
-                        "y": 0,
-                        "width": 6,
-                        "height": 6,
-                        "content": {
-                            "$ref": "#/spec/panels/251df4d5"
-                        }
-                    }
-                ]
-            }
-        }
-    ]
-}

frontend/src/pages/DashboardsListPageV2/components/ListHeader/ListHeader.module.scss

@@ -1,182 +0,0 @@
-.wrapper {
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-	padding: 16px;
-	height: 44px;
-	flex-shrink: 0;
-	border-radius: 6px 6px 0px 0px;
-	border: 1px solid var(--l1-border);
-	background: var(--l2-background);
-	box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.1);
-}
-
-.label {
-	color: var(--l2-foreground);
-	font-family: Inter;
-	font-size: var(--font-size-sm);
-	font-style: normal;
-	font-weight: var(--font-weight-normal);
-	line-height: 20px;
-	letter-spacing: -0.07px;
-}
-
-.rightActions {
-	display: flex;
-	gap: 4px;
-	color: white;
-}
-
-/* Shared trigger button for the sort + configure-group icons in the right
-   actions cluster. Provides a square hover/active background so users know
-   which icon they are targeting. */
-.iconTrigger {
-	display: inline-flex;
-	align-items: center;
-	justify-content: center;
-	width: 28px;
-	height: 28px;
-	padding: 0;
-	background: transparent;
-	border: none;
-	border-radius: 4px;
-	color: inherit;
-	cursor: pointer;
-	transition: background 120ms ease;
-
-	&:hover,
-	&:focus-visible {
-		background: color-mix(in srgb, var(--l1-foreground) 12%, transparent);
-		outline: none;
-	}
-
-	&:active,
-	&[aria-expanded='true'] {
-		background: color-mix(in srgb, var(--l1-foreground) 20%, transparent);
-	}
-}
-
-.sortContent {
-	display: flex;
-	flex-direction: column;
-	align-items: flex-start;
-	width: 140px;
-}
-
-.sortHeading {
-	color: var(--l3-foreground);
-	font-family: Inter;
-	font-size: 11px;
-	font-style: normal;
-	font-weight: var(--font-weight-semibold);
-	line-height: 18px;
-	letter-spacing: 0.88px;
-	text-transform: uppercase;
-	padding: 12px 18px 6px 14px;
-}
-
-.sortDivider {
-	width: 100%;
-	height: 1px;
-	background: var(--l1-border);
-	margin: 4px 0;
-}
-
-.sortButton {
-	text-align: start;
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-	width: 100%;
-	color: var(--l2-foreground);
-	font-family: Inter;
-	font-size: var(--font-size-sm);
-	font-style: normal;
-	font-weight: var(--font-weight-normal);
-	line-height: normal;
-	letter-spacing: 0.14px;
-	padding: 12px 18px 12px 14px;
-	height: auto;
-}
-
-.configureContent {
-	display: flex;
-	flex-direction: column;
-	align-items: flex-start;
-	padding: 4px;
-}
-
-.configureItem {
-	display: flex;
-	align-items: center;
-	gap: 10px;
-	width: 100%;
-	padding: 8px 12px;
-	background: transparent;
-	border: none;
-	border-radius: 4px;
-	color: var(--l2-foreground);
-	font-family: Inter;
-	font-size: var(--font-size-sm);
-	font-weight: var(--font-weight-normal);
-	line-height: normal;
-	letter-spacing: 0.14px;
-	text-align: left;
-	cursor: pointer;
-	transition: background 120ms ease;
-
-	&:hover,
-	&:focus-visible {
-		background: color-mix(in srgb, var(--l1-foreground) 10%, transparent);
-		outline: none;
-	}
-
-	&:active {
-		background: color-mix(in srgb, var(--l1-foreground) 18%, transparent);
-	}
-}
-
-.configureIcon {
-	display: inline-flex;
-	width: 16px;
-	height: 16px;
-	flex: 0 0 16px;
-	align-items: center;
-	justify-content: center;
-}
-
-:global(.sortDashboardsPopover) {
-	:global(.ant-popover-inner) {
-		display: flex;
-		padding: 0px;
-		align-items: center;
-		border-radius: 4px;
-		border: 1px solid var(--l1-border);
-		background: linear-gradient(
-			139deg,
-			color-mix(in srgb, var(--card) 80%, transparent) 0%,
-			color-mix(in srgb, var(--card) 90%, transparent) 98.68%
-		);
-		box-shadow: 4px 10px 16px 2px rgba(0, 0, 0, 0.2);
-		backdrop-filter: blur(20px);
-		gap: 16px;
-	}
-}
-
-:global(.configureGroupPopover) {
-	:global(.ant-popover-inner) {
-		display: flex;
-		align-items: center;
-		border-radius: 4px;
-		padding: 0px;
-		border: 1px solid var(--l1-border);
-		background: linear-gradient(
-			139deg,
-			color-mix(in srgb, var(--card) 80%, transparent) 0%,
-			color-mix(in srgb, var(--card) 90%, transparent) 98.68%
-		);
-		box-shadow: 4px 10px 16px 2px rgba(0, 0, 0, 0.2);
-		backdrop-filter: blur(20px);
-		gap: 16px;
-	}
-}