Merge branch 'main' into nv/v2-dashboard-update

* feat: lock, unlock, create public, update public v2 dashboard APIs

* feat: delete dashboard v2 API and hard delete cron job

* feat: patch dashboard api

* chore: update api specs

* chore: update api specs

* chore: update api specs

* chore: remove delete related work

* fix: add examples of structs for value param in param description

* test: unit test fixes

* fix: use new pattern of checking for admin permission

* fix: remove soft delete reference

* test: key value tags in test

* fix: build error in patch module method

* fix: build error in Apply method

* fix: use sync tags method in update

* fix: fix build errors

* fix: fix all patch application tests

* chore: add more mapper methods

conf/example.yaml

@@ -445,12 +445,7 @@ authz:
 
 ##################### Meter Reporter #####################
 meterreporter:
-  # The interval between collection ticks. Minimum 10m, maximum 24h.
+  # The interval between collection ticks. Minimum 5m.
   interval: 6h
   # Whether to backfill sealed days from the license creation day.
   backfill: true
-  # Random jitter applied to the first collect and to every subsequent cycle.
-  # The first collect fires at a random time in [0, jitter); each cycle then takes
-  # interval - random(0, jitter). Must be between 10m and interval. Defaults to
-  # min(interval, 2h) when unset.
-  jitter: 2h

docs/api/openapi.yml

@@ -2645,6 +2645,42 @@ components:
         legend:
           $ref: '#/components/schemas/DashboardtypesLegend'
       type: object
+    DashboardtypesJSONPatchDocument:
+      items:
+        $ref: '#/components/schemas/DashboardtypesJSONPatchOperation'
+      nullable: true
+      type: array
+    DashboardtypesJSONPatchOperation:
+      properties:
+        from:
+          description: Source JSON Pointer for move/copy ops; ignored for other ops.
+          type: string
+        op:
+          enum:
+          - add
+          - remove
+          - replace
+          - move
+          - copy
+          - test
+          type: string
+        path:
+          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/-.
+          type: string
+        value:
+          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.'
+      required:
+      - op
+      - path
+      type: object
     DashboardtypesLayout:
       oneOf:
       - $ref: '#/components/schemas/DashboardtypesLayoutEnvelopeGithubComPersesPersesPkgModelApiV1DashboardGridLayoutSpec'
@@ -12769,6 +12805,212 @@ paths:
       summary: Get dashboard (v2)
       tags:
       - dashboard
+    patch:
+      deprecated: false
+      description: 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.
+      operationId: PatchDashboardV2
+      parameters:
+      - in: path
+        name: id
+        required: true
+        schema:
+          type: string
+      requestBody:
+        content:
+          application/json:
+            schema:
+              $ref: '#/components/schemas/DashboardtypesJSONPatchDocument'
+      responses:
+        "200":
+          content:
+            application/json:
+              schema:
+                properties:
+                  data:
+                    $ref: '#/components/schemas/DashboardtypesGettableDashboardV2'
+                  status:
+                    type: string
+                required:
+                - status
+                - data
+                type: object
+          description: OK
+        "401":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Unauthorized
+        "403":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Forbidden
+        "500":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Internal Server Error
+      security:
+      - api_key:
+        - EDITOR
+      - tokenizer:
+        - EDITOR
+      summary: Patch dashboard (v2)
+      tags:
+      - dashboard
+    put:
+      deprecated: false
+      description: This endpoint updates a v2-shape dashboard's metadata, data, and
+        tag set. Locked dashboards are rejected.
+      operationId: UpdateDashboardV2
+      parameters:
+      - in: path
+        name: id
+        required: true
+        schema:
+          type: string
+      requestBody:
+        content:
+          application/json:
+            schema:
+              $ref: '#/components/schemas/DashboardtypesPostableDashboardV2'
+      responses:
+        "200":
+          content:
+            application/json:
+              schema:
+                properties:
+                  data:
+                    $ref: '#/components/schemas/DashboardtypesGettableDashboardV2'
+                  status:
+                    type: string
+                required:
+                - status
+                - data
+                type: object
+          description: OK
+        "401":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Unauthorized
+        "403":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Forbidden
+        "500":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Internal Server Error
+      security:
+      - api_key:
+        - EDITOR
+      - tokenizer:
+        - EDITOR
+      summary: Update dashboard (v2)
+      tags:
+      - dashboard
+  /api/v2/dashboards/{id}/lock:
+    delete:
+      deprecated: false
+      description: This endpoint unlocks a v2-shape dashboard. Only the dashboard's
+        creator or an org admin may lock or unlock.
+      operationId: UnlockDashboardV2
+      parameters:
+      - in: path
+        name: id
+        required: true
+        schema:
+          type: string
+      responses:
+        "204":
+          content:
+            application/json:
+              schema:
+                type: string
+          description: No Content
+        "401":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Unauthorized
+        "403":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Forbidden
+        "500":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Internal Server Error
+      security:
+      - api_key:
+        - EDITOR
+      - tokenizer:
+        - EDITOR
+      summary: Unlock dashboard (v2)
+      tags:
+      - dashboard
+    put:
+      deprecated: false
+      description: This endpoint locks a v2-shape dashboard. Only the dashboard's
+        creator or an org admin may lock or unlock.
+      operationId: LockDashboardV2
+      parameters:
+      - in: path
+        name: id
+        required: true
+        schema:
+          type: string
+      responses:
+        "204":
+          content:
+            application/json:
+              schema:
+                type: string
+          description: No Content
+        "401":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Unauthorized
+        "403":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Forbidden
+        "500":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Internal Server Error
+      security:
+      - api_key:
+        - EDITOR
+      - tokenizer:
+        - EDITOR
+      summary: Lock dashboard (v2)
+      tags:
+      - dashboard
   /api/v2/factor_password/forgot:
     post:
       deprecated: false

ee/modules/dashboard/impldashboard/module.go

@@ -221,6 +221,18 @@ func (module *module) GetV2(ctx context.Context, orgID valuer.UUID, id valuer.UU
 	return module.pkgDashboardModule.GetV2(ctx, orgID, id)
 }
 
+func (module *module) UpdateV2(ctx context.Context, orgID valuer.UUID, id valuer.UUID, updatedBy string, updateable dashboardtypes.UpdateableDashboardV2) (*dashboardtypes.DashboardV2, error) {
+	return module.pkgDashboardModule.UpdateV2(ctx, orgID, id, updatedBy, updateable)
+}
+
+func (module *module) PatchV2(ctx context.Context, orgID valuer.UUID, id valuer.UUID, updatedBy string, patch dashboardtypes.PatchableDashboardV2) (*dashboardtypes.DashboardV2, error) {
+	return module.pkgDashboardModule.PatchV2(ctx, orgID, id, updatedBy, patch)
+}
+
+func (module *module) LockUnlockV2(ctx context.Context, orgID valuer.UUID, id valuer.UUID, updatedBy string, isAdmin bool, lock bool) error {
+	return module.pkgDashboardModule.LockUnlockV2(ctx, orgID, id, updatedBy, isAdmin, lock)
+}
+
 func (module *module) Get(ctx context.Context, orgID valuer.UUID, id valuer.UUID) (*dashboardtypes.Dashboard, error) {
 	return module.pkgDashboardModule.Get(ctx, orgID, id)
 }

frontend/plugins/rules/no-antd-components.mjs

@@ -17,14 +17,9 @@ const BANNED_COMPONENTS = {
 	Typography:
 		'Use @signozhq/ui/typography Typography instead of antd Typography.',
 	Switch: 'Use @signozhq/ui/switch Switch instead of antd Switch.',
-	Dropdown:
-		'Use @signozhq/ui DropdownMenuSimple (or the composable DropdownMenu primitives) from @signozhq/ui/dropdown-menu instead of antd Dropdown.',
 	Badge: 'Use @signozhq/ui/badge instead of antd Badge.',
-	Radio:
-		'Use @signozhq/ui/radio-group RadioGroup (dots) or @signozhq/ui/toggle-group ToggleGroup (segmented buttons) instead of antd Radio.',
 	Progress: 'Use @signozhq/ui/progress instead of antd Progress.',
 	Avatar: 'Use @signozhq/ui/avatar instead of antd Avatar.',
-	Divider: 'Use @signozhq/ui/divider Divider instead of antd Divider.',
 };
 
 export default {

frontend/src/api/generated/services/dashboard/index.ts

@@ -21,6 +21,7 @@ import type {
 	CreateDashboardV2201,
 	CreatePublicDashboard201,
 	CreatePublicDashboardPathParameters,
+	DashboardtypesJSONPatchDocumentDTO,
 	DashboardtypesPostableDashboardV2DTO,
 	DashboardtypesPostablePublicDashboardDTO,
 	DashboardtypesUpdatablePublicDashboardDTO,
@@ -33,7 +34,13 @@ import type {
 	GetPublicDashboardPathParameters,
 	GetPublicDashboardWidgetQueryRange200,
 	GetPublicDashboardWidgetQueryRangePathParameters,
+	LockDashboardV2PathParameters,
+	PatchDashboardV2200,
+	PatchDashboardV2PathParameters,
 	RenderErrorResponseDTO,
+	UnlockDashboardV2PathParameters,
+	UpdateDashboardV2200,
+	UpdateDashboardV2PathParameters,
 	UpdatePublicDashboardPathParameters,
 } from '../sigNoz.schemas';
 
@@ -816,3 +823,360 @@ 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));
+};

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

@@ -4636,6 +4636,43 @@ 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 enum DashboardtypesPanelPluginKindDTO {
 	'signoz/TimeSeriesPanel' = 'signoz/TimeSeriesPanel',
 	'signoz/BarChartPanel' = 'signoz/BarChartPanel',
@@ -9408,6 +9445,34 @@ 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 GetFeatures200 = {
 	/**
 	 * @type array

frontend/src/components/AlertBreadcrumb/AlertBreadcrumb.tsx

@@ -1,5 +1,4 @@
-import { Breadcrumb } from 'antd';
-import { Divider } from '@signozhq/ui/divider';
+import { Breadcrumb, Divider } from 'antd';
 
 import styles from './AlertBreadcrumb.module.scss';
 import BreadcrumbItem, { BreadcrumbItemConfig } from './BreadcrumbItem';

frontend/src/components/CeleryTask/CeleryTaskDetail/CeleryTaskDetail.tsx

@@ -1,7 +1,6 @@
 import { useState } from 'react';
 import { Color, Spacing } from '@signozhq/design-tokens';
-import { Drawer } from 'antd';
-import { Divider } from '@signozhq/ui/divider';
+import { Divider, Drawer } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import logEvent from 'api/common/logEvent';
 import { PANEL_TYPES } from 'constants/queryBuilder';

frontend/src/components/DownloadOptionsMenu/DownloadOptionsMenu.tsx

@@ -1,6 +1,5 @@
 import { useCallback, useMemo, useState } from 'react';
-import { Button, Popover, Tooltip } from 'antd';
-import { RadioGroup, RadioGroupItem } from '@signozhq/ui/radio-group';
+import { Button, Popover, Radio, Tooltip } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import { TelemetryFieldKey } from 'api/v5/v5';
 import { useExportRawData } from 'hooks/useDownloadOptionsMenu/useDownloadOptionsMenu';
@@ -64,30 +63,27 @@ export default function DownloadOptionsMenu({
 			>
 				<div className="export-format">
 					<Typography.Text className="title">FORMAT</Typography.Text>
-					<RadioGroup value={exportFormat} onChange={setExportFormat}>
-						<RadioGroupItem value={DownloadFormats.CSV}>csv</RadioGroupItem>
-						<RadioGroupItem value={DownloadFormats.JSONL}>jsonl</RadioGroupItem>
-					</RadioGroup>
+					<Radio.Group
+						value={exportFormat}
+						onChange={(e): void => setExportFormat(e.target.value)}
+					>
+						<Radio value={DownloadFormats.CSV}>csv</Radio>
+						<Radio value={DownloadFormats.JSONL}>jsonl</Radio>
+					</Radio.Group>
 				</div>
 
 				<div className="horizontal-line" />
 
 				<div className="row-limit">
 					<Typography.Text className="title">Number of Rows</Typography.Text>
-					<RadioGroup
-						value={String(rowLimit)}
-						onChange={(value): void => setRowLimit(Number(value))}
+					<Radio.Group
+						value={rowLimit}
+						onChange={(e): void => setRowLimit(e.target.value)}
 					>
-						<RadioGroupItem value={String(DownloadRowCounts.TEN_K)}>
-							10k
-						</RadioGroupItem>
-						<RadioGroupItem value={String(DownloadRowCounts.THIRTY_K)}>
-							30k
-						</RadioGroupItem>
-						<RadioGroupItem value={String(DownloadRowCounts.FIFTY_K)}>
-							50k
-						</RadioGroupItem>
-					</RadioGroup>
+						<Radio value={DownloadRowCounts.TEN_K}>10k</Radio>
+						<Radio value={DownloadRowCounts.THIRTY_K}>30k</Radio>
+						<Radio value={DownloadRowCounts.FIFTY_K}>50k</Radio>
+					</Radio.Group>
 				</div>
 
 				{dataSource !== DataSource.TRACES && (
@@ -96,12 +92,13 @@ export default function DownloadOptionsMenu({
 
 						<div className="columns-scope">
 							<Typography.Text className="title">Columns</Typography.Text>
-							<RadioGroup value={columnsScope} onChange={setColumnsScope}>
-								<RadioGroupItem value={DownloadColumnsScopes.ALL}>All</RadioGroupItem>
-								<RadioGroupItem value={DownloadColumnsScopes.SELECTED}>
-									Selected
-								</RadioGroupItem>
-							</RadioGroup>
+							<Radio.Group
+								value={columnsScope}
+								onChange={(e): void => setColumnsScope(e.target.value)}
+							>
+								<Radio value={DownloadColumnsScopes.ALL}>All</Radio>
+								<Radio value={DownloadColumnsScopes.SELECTED}>Selected</Radio>
+							</Radio.Group>
 						</div>
 					</>
 				)}

frontend/src/components/DropDown/DropDown.styles.scss

@@ -0,0 +1,7 @@
+.dropdown-button {
+	color: var(--l1-foreground);
+}
+
+.dropdown-icon {
+	font-size: 1.2rem;
+}

frontend/src/components/DropDown/DropDown.tsx

@@ -0,0 +1,51 @@
+import { useState } from 'react';
+import { Ellipsis } from '@signozhq/icons';
+import { Button, Dropdown, MenuProps } from 'antd';
+
+import './DropDown.styles.scss';
+
+function DropDown({
+	element,
+	onDropDownItemClick,
+}: {
+	element: JSX.Element[];
+	onDropDownItemClick?: MenuProps['onClick'];
+}): JSX.Element {
+	const items: MenuProps['items'] = element.map(
+		(e: JSX.Element, index: number) => ({
+			label: e,
+			key: index,
+		}),
+	);
+
+	const [isDdOpen, setDdOpen] = useState<boolean>(false);
+
+	return (
+		<Dropdown
+			menu={{
+				items,
+				onMouseEnter: (): void => setDdOpen(true),
+				onMouseLeave: (): void => setDdOpen(false),
+				onClick: (item): void => onDropDownItemClick?.(item),
+			}}
+			open={isDdOpen}
+		>
+			<Button
+				type="link"
+				className={`dropdown-button`}
+				onClick={(e): void => {
+					e.preventDefault();
+					setDdOpen(true);
+				}}
+			>
+				<Ellipsis className="dropdown-icon" size={16} />
+			</Button>
+		</Dropdown>
+	);
+}
+
+DropDown.defaultProps = {
+	onDropDownItemClick: (): void => {},
+};
+
+export default DropDown;

frontend/src/components/ExplorerCard/ExplorerCard.tsx

@@ -1,7 +1,15 @@
 import { useState } from 'react';
 import { useCopyToClipboard } from 'react-use';
-import { Button, Col, Popover, Row, Select, Space } from 'antd';
-import { DropdownMenuSimple, type MenuProps } from '@signozhq/ui/dropdown-menu';
+import {
+	Button,
+	Col,
+	Dropdown,
+	MenuProps,
+	Popover,
+	Row,
+	Select,
+	Space,
+} from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import axios from 'axios';
 import TextToolTip from 'components/TextToolTip';
@@ -233,9 +241,9 @@ function ExplorerCard({
 								</Popover>
 								<Share2 onClick={onCopyUrlHandler} size="md" />
 								{viewKey && (
-									<DropdownMenuSimple menu={moreOptionMenu}>
-										<Button type="text" size="small" icon={<Ellipsis size="md" />} />
-									</DropdownMenuSimple>
+									<Dropdown trigger={['click']} menu={moreOptionMenu}>
+										<Ellipsis size="md" />
+									</Dropdown>
 								)}
 							</Space>
 						</OffSetCol>

frontend/src/components/HeaderRightSection/FeedbackModal.tsx

@@ -1,8 +1,7 @@
 import { useCallback, useEffect, useState } from 'react';
 import { useLocation } from 'react-router-dom';
 import { toast } from '@signozhq/ui/sonner';
-import { Button, Input } from 'antd';
-import { ToggleGroupSimple } from '@signozhq/ui/toggle-group';
+import { Button, Input, Radio, RadioChangeEvent } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import logEvent from 'api/common/logEvent';
 import { handleContactSupport } from 'container/Integrations/utils';
@@ -102,12 +101,13 @@ function FeedbackModal({ onClose }: { onClose: () => void }): JSX.Element {
 	return (
 		<div className="feedback-modal-container">
 			<div className="feedback-modal-header">
-				<ToggleGroupSimple
-					type="single"
+				<Radio.Group
 					value={activeTab}
+					defaultValue={activeTab}
+					optionType="button"
 					className="feedback-modal-tabs"
-					onChange={setActiveTab}
-					items={items}
+					options={items}
+					onChange={(e: RadioChangeEvent): void => setActiveTab(e.target.value)}
 				/>
 			</div>
 			<div className="feedback-modal-content">

frontend/src/components/LogDetail/LogDetails.styles.scss

@@ -158,23 +158,23 @@
 			font-weight: var(--font-weight-normal);
 		}
 
-		> button {
+		.tab {
 			border: 1px solid var(--l1-border);
 			width: 114px;
+		}
 
-			&::before {
-				background: var(--l1-border);
-			}
+		.tab::before {
+			background: var(--l1-border);
+		}
 
-			&[data-state='on'] {
-				background: var(--l3-background);
-				color: var(--l1-foreground);
-				border: 1px solid var(--l1-border);
+		.selected_view {
+			background: var(--l3-background);
+			color: var(--l1-foreground);
+			border: 1px solid var(--l1-border);
+		}
 
-				&::before {
-					background: var(--l1-border);
-				}
-			}
+		.selected_view::before {
+			background: var(--l1-border);
 		}
 	}
 

frontend/src/components/LogDetail/index.tsx

@@ -4,10 +4,9 @@ import { useSelector } from 'react-redux'; // old code, TODO: fix this correctly
 import { useCopyToClipboard, useLocation } from 'react-use';
 import { Color, Spacing } from '@signozhq/design-tokens';
 import { Button } from '@signozhq/ui/button';
-import { Drawer, Tooltip } from 'antd';
-import { ToggleGroupSimple } from '@signozhq/ui/toggle-group';
-import { Divider } from '@signozhq/ui/divider';
+import { Divider, Drawer, Radio, Tooltip } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
+import type { RadioChangeEvent } from 'antd/lib';
 import cx from 'classnames';
 import { LogType } from 'components/Logs/LogStateIndicator/LogStateIndicator';
 import QuerySearch from 'components/QueryBuilderV2/QueryV2/QuerySearch/QuerySearch';
@@ -198,8 +197,8 @@ function LogDetailInner({
 
 	const LogJsonData = log ? aggregateAttributesResourcesToString(log) : '';
 
-	const handleModeChange = (value: string): void => {
-		setSelectedView(value as VIEWS);
+	const handleModeChange = (e: RadioChangeEvent): void => {
+		setSelectedView(e.target.value);
 		setIsEdit(false);
 		setIsFilterVisible(false);
 	};
@@ -453,50 +452,56 @@ function LogDetailInner({
 				</div>
 
 				<div className="tabs-and-search">
-					<ToggleGroupSimple
-						type="single"
+					<Radio.Group
 						className="views-tabs"
 						onChange={handleModeChange}
 						value={selectedView}
-						items={[
-							{
-								value: VIEW_TYPES.OVERVIEW,
-								label: (
-									<div className="view-title">
-										<Table size={14} />
-										Overview
-									</div>
-								),
-							},
-							{
-								value: VIEW_TYPES.JSON,
-								label: (
-									<div className="view-title">
-										<Braces size={14} />
-										JSON
-									</div>
-								),
-							},
-							{
-								value: VIEW_TYPES.CONTEXT,
-								label: (
-									<div className="view-title">
-										<TextSelect size={14} />
-										Context
-									</div>
-								),
-							},
-							{
-								value: VIEW_TYPES.INFRAMETRICS,
-								label: (
-									<div className="view-title">
-										<Histogram size="md" />
-										Metrics
-									</div>
-								),
-							},
-						]}
-					/>
+					>
+						<Radio.Button
+							className={
+								selectedView === VIEW_TYPES.OVERVIEW ? 'selected_view tab' : 'tab'
+							}
+							value={VIEW_TYPES.OVERVIEW}
+						>
+							<div className="view-title">
+								<Table size={14} />
+								Overview
+							</div>
+						</Radio.Button>
+						<Radio.Button
+							className={
+								selectedView === VIEW_TYPES.JSON ? 'selected_view tab' : 'tab'
+							}
+							value={VIEW_TYPES.JSON}
+						>
+							<div className="view-title">
+								<Braces size={14} />
+								JSON
+							</div>
+						</Radio.Button>
+						<Radio.Button
+							className={
+								selectedView === VIEW_TYPES.CONTEXT ? 'selected_view tab' : 'tab'
+							}
+							value={VIEW_TYPES.CONTEXT}
+						>
+							<div className="view-title">
+								<TextSelect size={14} />
+								Context
+							</div>
+						</Radio.Button>
+						<Radio.Button
+							className={
+								selectedView === VIEW_TYPES.INFRAMETRICS ? 'selected_view tab' : 'tab'
+							}
+							value={VIEW_TYPES.INFRAMETRICS}
+						>
+							<div className="view-title">
+								<Histogram size="md" />
+								Metrics
+							</div>
+						</Radio.Button>
+					</Radio.Group>
 
 					<div className="log-detail-drawer__actions">
 						{selectedView === VIEW_TYPES.CONTEXT && (

frontend/src/components/NewSelect/CustomMultiSelect.tsx

@@ -18,8 +18,7 @@ import {
 	RefreshCw,
 } from '@signozhq/icons';
 import { Color } from '@signozhq/design-tokens';
-import { Button, Select } from 'antd';
-import { Checkbox } from '@signozhq/ui/checkbox';
+import { Button, Checkbox, Select } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import cx from 'classnames';
 import TextToolTip from 'components/TextToolTip/TextToolTip';
@@ -750,7 +749,7 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 					tabIndex={isActive ? 0 : -1}
 				>
 					<Checkbox
-						value={isSelected}
+						checked={isSelected}
 						className="option-checkbox"
 						onClick={(e): void => {
 							e.stopPropagation();
@@ -1585,7 +1584,7 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 							}}
 						>
 							<div style={{ display: 'flex', alignItems: 'center', width: '100%' }}>
-								<Checkbox value={allOptionsSelected} className="option-checkbox">
+								<Checkbox checked={allOptionsSelected} className="option-checkbox">
 									<div className="option-content">
 										<div className="all-option-text">ALL</div>
 									</div>

frontend/src/components/QueryBuilderV2/QueryV2/QueryAddOns/QueryAddOns.styles.scss

@@ -2,13 +2,6 @@
 
 .query-add-ons {
 	width: 100%;
-
-	.add-on-tab-title {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		gap: var(--margin-2);
-	}
 }
 
 .add-ons-list {
@@ -32,7 +25,7 @@
 			color: var(--l2-foreground);
 		}
 
-		> button {
+		.tab {
 			border: 1px solid var(--l1-border);
 			border-left: none;
 			min-width: 120px;
@@ -42,21 +35,21 @@
 			&:first-child {
 				border-left: 1px solid var(--l1-border);
 			}
+		}
 
-			&::before {
-				background: var(--l1-border);
-			}
+		.tab::before {
+			background: var(--l1-border);
+		}
 
-			&[data-state='on'] {
-				color: var(--text-robin-500);
-				border: 1px solid var(--l1-border);
+		.selected-view {
+			color: var(--text-robin-500);
+			border: 1px solid var(--l1-border);
 
-				display: none;
+			display: none;
+		}
 
-				&::before {
-					background: var(--l1-border);
-				}
-			}
+		.selected-view::before {
+			background: var(--l1-border);
 		}
 	}
 

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

@@ -1,6 +1,5 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
-import { Button, Tooltip } from 'antd';
-import { ToggleGroupSimple } from '@signozhq/ui/toggle-group';
+import { Button, Radio, RadioChangeEvent, Tooltip } from 'antd';
 import InputWithLabel from 'components/InputWithLabel/InputWithLabel';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import { GroupByFilter } from 'container/QueryBuilder/filters/GroupByFilter/GroupByFilter';
@@ -251,7 +250,8 @@ function QueryAddOns({
 		);
 	}, [panelType, isListViewPanel, query, showReduceTo]);
 
-	const handleOptionClick = (clickedAddOn: AddOn): void => {
+	const handleOptionClick = (e: RadioChangeEvent): void => {
+		const clickedAddOn = e.target.value as AddOn;
 		const isAlreadySelected = selectedViews.some(
 			(view) => view.key === clickedAddOn.key,
 		);
@@ -515,27 +515,15 @@ function QueryAddOns({
 				</div>
 			)}
 
-			<ToggleGroupSimple
-				type="multiple"
-				className="add-ons-tabs"
-				value={selectedViews.map((view) => view.key)}
-				onChange={(newKeys: string[]): void => {
-					const oldKeys = selectedViews.map((view) => view.key);
-					const toggledKey =
-						newKeys.find((k) => !oldKeys.includes(k)) ??
-						oldKeys.find((k) => !newKeys.includes(k));
-					if (!toggledKey) {
-						return;
-					}
-					const clickedAddOn = addOns.find((a) => a.key === toggledKey);
-					if (clickedAddOn) {
-						handleOptionClick(clickedAddOn);
-					}
-				}}
-				items={addOns.map((addOn) => ({
-					value: addOn.key,
-					label: (
+			<div className="add-ons-list">
+				<Radio.Group
+					className="add-ons-tabs"
+					onChange={handleOptionClick}
+					value={selectedViews}
+				>
+					{addOns.map((addOn) => (
 						<Tooltip
+							key={addOn.key}
 							title={
 								<TooltipContent
 									label={addOn.label}
@@ -546,17 +534,26 @@ function QueryAddOns({
 							placement="top"
 							mouseEnterDelay={0.5}
 						>
-							<span
-								className="add-on-tab-title"
-								data-testid={`query-add-on-${addOn.key}`}
+							<Radio.Button
+								className={
+									selectedViews.find((view) => view.key === addOn.key)
+										? 'selected-view tab'
+										: 'tab'
+								}
+								value={addOn}
 							>
-								{addOn.icon}
-								{addOn.label}
-							</span>
+								<div
+									className="add-on-tab-title"
+									data-testid={`query-add-on-${addOn.key}`}
+								>
+									{addOn.icon}
+									{addOn.label}
+								</div>
+							</Radio.Button>
 						</Tooltip>
-					),
-				}))}
-			/>
+					))}
+				</Radio.Group>
+			</div>
 		</div>
 	);
 }

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

@@ -6,12 +6,12 @@ import {
 	useMemo,
 	useState,
 } from 'react';
-import { DropdownMenuSimple } from '@signozhq/ui/dropdown-menu';
+import { Dropdown } from 'antd';
 import cx from 'classnames';
 import { ENTITY_VERSION_V4, ENTITY_VERSION_V5 } from 'constants/app';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import QBEntityOptions from 'container/QueryBuilder/components/QBEntityOptions/QBEntityOptions';
-import { QueryProps } from 'container/QueryBuilder/type';
+import { QueryProps } from 'container/QueryBuilder/components/Query/Query.interfaces';
 import SpanScopeSelector from 'container/QueryBuilder/filters/QueryBuilderSearchV2/SpanScopeSelector';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useQueryOperations } from 'hooks/queryBuilder/useQueryBuilderOperations';
@@ -195,7 +195,7 @@ export const QueryV2 = forwardRef(function QueryV2(
 							)}
 
 							{isMultiQueryAllowed && (
-								<DropdownMenuSimple
+								<Dropdown
 									className="query-actions-dropdown"
 									menu={{
 										items: [
@@ -217,10 +217,10 @@ export const QueryV2 = forwardRef(function QueryV2(
 												: []),
 										],
 									}}
-									align="end"
+									placement="bottomRight"
 								>
 									<Ellipsis size={16} />
-								</DropdownMenuSimple>
+								</Dropdown>
 							)}
 						</div>
 					</div>

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/Checkbox.styles.scss

@@ -55,7 +55,6 @@
 			display: flex;
 			align-items: center;
 			gap: 8px;
-			min-height: 24px;
 
 			.checkbox-value-section {
 				display: flex;

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/Checkbox.tsx

@@ -1,7 +1,6 @@
 /* eslint-disable sonarjs/no-identical-functions */
 import { Fragment, useMemo, useState } from 'react';
-import { Button, Input, Skeleton } from 'antd';
-import { Checkbox } from '@signozhq/ui/checkbox';
+import { Button, Checkbox, Input, Skeleton } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import cx from 'classnames';
 import { removeKeysFromExpression } from 'components/QueryBuilderV2/utils';
@@ -635,12 +634,10 @@ export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
 									)}
 									<div className="value">
 										<Checkbox
-											onChange={(checked): void =>
-												onChange(value, checked === true, false)
-											}
-											value={currentFilterState[value]}
+											onChange={(e): void => onChange(value, e.target.checked, false)}
+											checked={currentFilterState[value]}
 											disabled={isFilterDisabled}
-											className="check-box"
+											rootClassName="check-box"
 										/>
 
 										<div

frontend/src/components/ResizeTable/DynamicColumnTable.tsx

@@ -4,14 +4,14 @@ import type {
 	TableColumnsType as ColumnsType,
 	TableColumnType as ColumnType,
 } from 'antd';
-import { Button, Flex } from 'antd';
-import { DropdownMenuSimple, type MenuItem } from '@signozhq/ui/dropdown-menu';
+import { Button, Dropdown, Flex, MenuProps } from 'antd';
 import { Switch } from '@signozhq/ui/switch';
 import logEvent from 'api/common/logEvent';
 import LaunchChatSupport from 'components/LaunchChatSupport/LaunchChatSupport';
 import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import useUrlQuery from 'hooks/useUrlQuery';
 import { SlidersHorizontal } from '@signozhq/icons';
+import { popupContainer } from 'utils/selectPopupContainer';
 
 import ResizeTable from './ResizeTable';
 import { DynamicColumnTableProps } from './types';
@@ -84,9 +84,8 @@ function DynamicColumnTable({
 			);
 		};
 
-	const items: MenuItem[] =
+	const items: MenuProps['items'] =
 		dynamicColumns?.map((column, index) => ({
-			key: String(index),
 			label: (
 				<div
 					className="dynamicColumnsTable-items"
@@ -100,6 +99,8 @@ function DynamicColumnTable({
 					/>
 				</div>
 			),
+			key: index,
+			type: 'checkbox',
 		})) || [];
 
 	// Get current page from URL or default to 1
@@ -128,14 +129,18 @@ function DynamicColumnTable({
 			<Flex justify="flex-end" align="center" gap={8}>
 				{facingIssueBtn && <LaunchChatSupport {...facingIssueBtn} />}
 				{dynamicColumns && (
-					<DropdownMenuSimple menu={{ items }}>
+					<Dropdown
+						getPopupContainer={popupContainer}
+						menu={{ items }}
+						trigger={['click']}
+					>
 						<Button
 							className="dynamicColumnTable-button filter-btn"
 							size="middle"
 							icon={<SlidersHorizontal size={14} />}
 							data-testid="additional-filters-button"
 						/>
-					</DropdownMenuSimple>
+					</Dropdown>
 				)}
 			</Flex>
 

frontend/src/components/RolesSelect/RolesSelect.tsx

@@ -1,6 +1,5 @@
 import { CircleAlert, RefreshCw } from '@signozhq/icons';
-import { Select } from 'antd';
-import { Checkbox } from '@signozhq/ui/checkbox';
+import { Checkbox, Select } from 'antd';
 import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
 import { useListRoles } from 'api/generated/services/role';
 import type { AuthtypesRoleDTO } from 'api/generated/services/sigNoz.schemas';
@@ -147,11 +146,12 @@ function RolesSelect(props: RolesSelectProps): JSX.Element {
 				options={options}
 				optionFilterProp="label"
 				optionRender={(option): JSX.Element => (
-					<div style={{ pointerEvents: 'none' }}>
-						<Checkbox value={value.includes(option.value as string)}>
-							{option.label}
-						</Checkbox>
-					</div>
+					<Checkbox
+						checked={value.includes(option.value as string)}
+						style={{ pointerEvents: 'none' }}
+					>
+						{option.label}
+					</Checkbox>
 				)}
 				getPopupContainer={getPopupContainer}
 				disabled={disabled}

frontend/src/components/ServiceAccountDrawer/AddKeyModal/KeyFormPhase.tsx

@@ -2,7 +2,7 @@ import type { Control, UseFormRegister } from 'react-hook-form';
 import { Controller } from 'react-hook-form';
 import { Button } from '@signozhq/ui/button';
 import { Input } from '@signozhq/ui/input';
-import { ToggleGroupSimple } from '@signozhq/ui/toggle-group';
+import { ToggleGroup, ToggleGroupItem } from '@signozhq/ui/toggle-group';
 import { DatePicker } from 'antd';
 import AuthZTooltip from 'components/AuthZTooltip/AuthZTooltip';
 import {
@@ -60,21 +60,30 @@ function KeyFormPhase({
 						name="expiryMode"
 						control={control}
 						render={({ field }): JSX.Element => (
-							<ToggleGroupSimple
+							<ToggleGroup
 								type="single"
 								value={field.value}
-								onChange={(val: string): void => {
+								onChange={(val): void => {
 									if (val) {
 										field.onChange(val);
 									}
 								}}
 								size="sm"
 								className="add-key-modal__expiry-toggle"
-								items={[
-									{ value: ExpiryMode.NONE, label: 'No Expiration' },
-									{ value: ExpiryMode.DATE, label: 'Set Expiration Date' },
-								]}
-							/>
+							>
+								<ToggleGroupItem
+									value={ExpiryMode.NONE}
+									className="add-key-modal__expiry-toggle-btn"
+								>
+									No Expiration
+								</ToggleGroupItem>
+								<ToggleGroupItem
+									value={ExpiryMode.DATE}
+									className="add-key-modal__expiry-toggle-btn"
+								>
+									Set Expiration Date
+								</ToggleGroupItem>
+							</ToggleGroup>
 						)}
 					/>
 				</div>

frontend/src/components/ServiceAccountDrawer/EditKeyModal/EditKeyForm.tsx

@@ -4,7 +4,7 @@ import { LockKeyhole, Trash2, X } from '@signozhq/icons';
 import { Badge } from '@signozhq/ui/badge';
 import { Button } from '@signozhq/ui/button';
 import { Input } from '@signozhq/ui/input';
-import { ToggleGroupSimple } from '@signozhq/ui/toggle-group';
+import { ToggleGroup, ToggleGroupItem } from '@signozhq/ui/toggle-group';
 import { DatePicker } from 'antd';
 import type { ServiceaccounttypesGettableFactorAPIKeyDTO } from 'api/generated/services/sigNoz.schemas';
 import AuthZTooltip from 'components/AuthZTooltip/AuthZTooltip';
@@ -101,22 +101,31 @@ function EditKeyForm({
 						name="expiryMode"
 						control={control}
 						render={({ field }): JSX.Element => (
-							<ToggleGroupSimple
+							<ToggleGroup
 								type="single"
 								value={field.value}
-								onChange={(val: string): void => {
+								onChange={(val): void => {
 									if (val && canUpdate) {
 										field.onChange(val);
 									}
 								}}
-								size="sm"
-								disabled={!canUpdate}
 								className="edit-key-modal__expiry-toggle"
-								items={[
-									{ value: ExpiryMode.NONE, label: 'No Expiration' },
-									{ value: ExpiryMode.DATE, label: 'Set Expiration Date' },
-								]}
-							/>
+							>
+								<ToggleGroupItem
+									value={ExpiryMode.NONE}
+									disabled={!canUpdate}
+									className="edit-key-modal__expiry-toggle-btn"
+								>
+									No Expiration
+								</ToggleGroupItem>
+								<ToggleGroupItem
+									value={ExpiryMode.DATE}
+									disabled={!canUpdate}
+									className="edit-key-modal__expiry-toggle-btn"
+								>
+									Set Expiration Date
+								</ToggleGroupItem>
+							</ToggleGroup>
 						)}
 					/>
 				</div>

frontend/src/components/ServiceAccountDrawer/ServiceAccountDrawer.tsx

@@ -4,7 +4,7 @@ import { Key, LayoutGrid, Plus, Trash2, X } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
 import { DrawerWrapper } from '@signozhq/ui/drawer';
 import { toast } from '@signozhq/ui/sonner';
-import { ToggleGroupSimple } from '@signozhq/ui/toggle-group';
+import { ToggleGroup, ToggleGroupItem } from '@signozhq/ui/toggle-group';
 import { Pagination, Skeleton } from 'antd';
 import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
 import {
@@ -395,11 +395,11 @@ function ServiceAccountDrawer({
 	const drawerContent = (
 		<div className="sa-drawer__layout">
 			<div className="sa-drawer__tabs">
-				<ToggleGroupSimple
+				<ToggleGroup
 					type="single"
 					value={activeTab}
 					size="sm"
-					onChange={(val: string): void => {
+					onChange={(val): void => {
 						if (val) {
 							void setActiveTab(val as ServiceAccountDrawerTab);
 							if (val !== ServiceAccountDrawerTab.Keys) {
@@ -409,30 +409,25 @@ function ServiceAccountDrawer({
 						}
 					}}
 					className="sa-drawer__tab-group"
-					items={[
-						{
-							value: ServiceAccountDrawerTab.Overview,
-							label: (
-								<>
-									<LayoutGrid size={14} />
-									Overview
-								</>
-							),
-						},
-						{
-							value: ServiceAccountDrawerTab.Keys,
-							label: (
-								<>
-									<Key size={14} />
-									Keys
-									{keys.length > 0 && (
-										<span className="sa-drawer__tab-count">{keys.length}</span>
-									)}
-								</>
-							),
-						},
-					]}
-				/>
+				>
+					<ToggleGroupItem
+						value={ServiceAccountDrawerTab.Overview}
+						className="sa-drawer__tab"
+					>
+						<LayoutGrid size={14} />
+						Overview
+					</ToggleGroupItem>
+					<ToggleGroupItem
+						value={ServiceAccountDrawerTab.Keys}
+						className="sa-drawer__tab"
+					>
+						<Key size={14} />
+						Keys
+						{keys.length > 0 && (
+							<span className="sa-drawer__tab-count">{keys.length}</span>
+						)}
+					</ToggleGroupItem>
+				</ToggleGroup>
 				{activeTab === ServiceAccountDrawerTab.Keys && (
 					<AuthZTooltip
 						checks={[

frontend/src/components/SignozRadioGroup/SignozRadioGroup.styles.scss

@@ -1,6 +1,12 @@
-.signoz-radio-group {
+.signoz-radio-group.ant-radio-group {
 	color: var(--l2-foreground);
 
+	&.ant-radio-group-disabled {
+		opacity: 0.5;
+		pointer-events: none;
+		cursor: not-allowed;
+	}
+
 	.view-title {
 		display: flex;
 		gap: var(--margin-2);
@@ -24,41 +30,43 @@
 		}
 	}
 
-	> button {
+	.tab {
 		border: 1px solid var(--l1-border);
 		background: var(--l1-background);
-
 		&:hover {
 			color: var(--l1-foreground);
 		}
 		&::before {
 			background: var(--l1-border);
 		}
+	}
 
-		&[data-state='on'] {
-			&,
-			&:hover {
-				background: var(--l3-background);
-				color: var(--l1-foreground);
-				border: 1px solid var(--l1-border);
-			}
-			&::before {
-				background: var(--l3-background);
-				border-left: 1px solid var(--l1-border);
-			}
+	.selected_view {
+		&,
+		&:hover {
+			background: var(--l3-background);
+			color: var(--l1-foreground);
+			border: 1px solid var(--l1-border);
 		}
+		&::before {
+			background: var(--l3-background);
+			border-left: 1px solid var(--l1-border);
+		}
+	}
 
-		&[disabled],
-		&[data-disabled] {
+	&.ant-radio-group-disabled {
+		.tab,
+		.selected_view {
 			background: var(--l2-background) !important;
 			border-color: var(--l1-border) !important;
 			color: var(--l1-foreground) !important;
+		}
 
-			&:hover {
-				background: var(--l2-background) !important;
-				border-color: var(--l1-border) !important;
-				color: var(--l1-foreground) !important;
-			}
+		.tab:hover,
+		.selected_view:hover {
+			background: var(--l2-background) !important;
+			border-color: var(--l1-border) !important;
+			color: var(--l1-foreground) !important;
 		}
 	}
 }

frontend/src/components/SignozRadioGroup/SignozRadioGroup.tsx

@@ -1,4 +1,4 @@
-import { ToggleGroupSimple } from '@signozhq/ui/toggle-group';
+import { Radio, RadioChangeEvent } from 'antd';
 
 import './SignozRadioGroup.styles.scss';
 
@@ -11,7 +11,7 @@ interface Option {
 interface SignozRadioGroupProps {
 	value: string;
 	options: Option[];
-	onChange: (value: string) => void;
+	onChange: (e: RadioChangeEvent) => void;
 	className?: string;
 	disabled?: boolean;
 }
@@ -24,22 +24,26 @@ function SignozRadioGroup({
 	disabled = false,
 }: SignozRadioGroupProps): JSX.Element {
 	return (
-		<ToggleGroupSimple
-			type="single"
+		<Radio.Group
 			value={value}
+			buttonStyle="solid"
 			className={`signoz-radio-group ${className}`}
 			onChange={onChange}
 			disabled={disabled}
-			items={options.map((option) => ({
-				value: option.value,
-				label: (
+		>
+			{options.map((option) => (
+				<Radio.Button
+					key={option.value}
+					value={option.value}
+					className={value === option.value ? 'selected_view tab' : 'tab'}
+				>
 					<div className="view-title-container">
 						{option.icon && <div className="icon-container">{option.icon}</div>}
 						{option.label}
 					</div>
-				),
-			}))}
-		/>
+				</Radio.Button>
+			))}
+		</Radio.Group>
 	);
 }
 

frontend/src/components/Styled/index.ts

@@ -4,10 +4,13 @@ import {
 	ButtonProps,
 	Col,
 	ColProps,
+	Divider,
+	DividerProps,
 	Row,
 	RowProps,
 	Space,
 	SpaceProps,
+	TabsProps,
 } from 'antd';
 import {
 	Typography,
@@ -31,11 +34,21 @@ const StyledRow = styled(Row)<TStyledRow>`
 	${styledClass}
 `;
 
+type TStyledDivider = DividerProps & IStyledClass;
+const StyledDivider = styled(Divider)<TStyledDivider>`
+	${styledClass}
+`;
+
 type TStyledSpace = SpaceProps & IStyledClass;
 const StyledSpace = styled(Space)<TStyledSpace>`
 	${styledClass}
 `;
 
+type TStyledTabs = TabsProps & IStyledClass;
+const StyledTabs = styled(Divider)<TStyledTabs>`
+	${styledClass}
+`;
+
 type TStyledButton = ButtonProps & IStyledClass;
 const StyledButton = styled(Button)<TStyledButton>`
 	${styledClass}
@@ -66,7 +79,9 @@ export {
 	StyledButton,
 	StyledCol,
 	StyledDiv,
+	StyledDivider,
 	StyledRow,
 	StyledSpace,
+	StyledTabs,
 	StyledTypography,
 };

frontend/src/components/TimePreferenceDropDown/index.tsx

@@ -1,7 +1,6 @@
 import { Dispatch, SetStateAction, useCallback, useMemo } from 'react';
 import { ChevronDown, Globe } from '@signozhq/icons';
-import { DropdownMenuSimple } from '@signozhq/ui/dropdown-menu';
-import { Button } from 'antd';
+import { Button, Dropdown } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import TimeItems, {
 	timePreferance,
@@ -28,17 +27,20 @@ function TimePreference({
 
 	const menu = useMemo(
 		() => ({
-			items: menuItems.map((item) => ({
-				...item,
-				onClick: timeMenuItemOnChangeHandler,
-			})),
+			items: menuItems,
+			onClick: timeMenuItemOnChangeHandler,
 		}),
 		[timeMenuItemOnChangeHandler],
 	);
 
 	return (
-		<DropdownMenuSimple menu={menu} className="time-selection-menu">
-			<Button className="time-selection-target">
+		<Dropdown
+			menu={menu}
+			rootClassName="time-selection-menu"
+			className="time-selection-target"
+			trigger={['click']}
+		>
+			<Button>
 				<div className="button-selected-text">
 					<Globe size={14} />
 					<Typography.Text className="selected-value">
@@ -47,7 +49,7 @@ function TimePreference({
 				</div>
 				<ChevronDown size="md" />
 			</Button>
-		</DropdownMenuSimple>
+		</Dropdown>
 	);
 }
 

frontend/src/container/AIAssistant/components/ApprovalCard/ApprovalCard.tsx

@@ -10,7 +10,7 @@ import {
 	DialogSubtitle,
 	DialogTitle,
 } from '@signozhq/ui/dialog';
-import { ToggleGroupSimple } from '@signozhq/ui/toggle-group';
+import { ToggleGroup, ToggleGroupItem } from '@signozhq/ui/toggle-group';
 import { TooltipSimple } from '@signozhq/ui/tooltip';
 import type {
 	ApprovalEventDTO,
@@ -132,43 +132,45 @@ export default function ApprovalCard({
 					<div className={styles.diffModalBody}>
 						<p className={styles.diffModalSummary}>{approval.summary}</p>
 						<div className={styles.diffToolbarRow}>
-							<ToggleGroupSimple
+							<ToggleGroup
 								type="single"
 								size="sm"
 								value={viewMode}
-								onChange={(next: string): void => {
-									// Radix `single` group can emit '' when the active item
-									// is clicked again — preserve the current mode.
+								onChange={(next): void => {
+									// Radix `single` group can emit '' when the active item is clicked again.
 									if (next === 'split' || next === 'unified') {
 										setViewMode(next);
 									}
 								}}
-								items={[
-									{
-										value: 'split',
-										'aria-label': 'Split view',
-										label: <Columns2 size={12} />,
-									},
-									{
-										value: 'unified',
-										'aria-label': 'Unified view',
-										label: <List size={12} />,
-									},
-								]}
-							/>
-							<ToggleGroupSimple
+							>
+								<TooltipSimple title="Split view">
+									<ToggleGroupItem value="split" aria-label="Split view">
+										<Columns2 size={12} />
+									</ToggleGroupItem>
+								</TooltipSimple>
+								<TooltipSimple title="Unified view">
+									<ToggleGroupItem value="unified" aria-label="Unified view">
+										<List size={12} />
+									</ToggleGroupItem>
+								</TooltipSimple>
+							</ToggleGroup>
+							<ToggleGroup
 								type="multiple"
 								size="sm"
 								value={wrapText ? ['wrap'] : []}
-								onChange={(next: string[]): void => setWrapText(next.includes('wrap'))}
-								items={[
-									{
-										value: 'wrap',
-										'aria-label': wrapText ? 'Disable text wrap' : 'Wrap long lines',
-										label: <WrapText size={12} />,
-									},
-								]}
-							/>
+								onChange={(next): void => setWrapText(next.includes('wrap'))}
+							>
+								<TooltipSimple
+									title={wrapText ? 'Disable text wrap' : 'Wrap long lines'}
+								>
+									<ToggleGroupItem
+										value="wrap"
+										aria-label={wrapText ? 'Disable text wrap' : 'Wrap long lines'}
+									>
+										<WrapText size={12} />
+									</ToggleGroupItem>
+								</TooltipSimple>
+							</ToggleGroup>
 						</div>
 						{approval.diff && (
 							<DiffView

frontend/src/container/AIAssistant/components/blocks/InteractiveQuestion/InteractiveQuestion.tsx

@@ -2,8 +2,7 @@ import { useState } from 'react';
 import cx from 'classnames';
 import { Button } from '@signozhq/ui/button';
 import logEvent from 'api/common/logEvent';
-import { Checkbox } from '@signozhq/ui/checkbox';
-import { RadioGroup, RadioGroupItem } from '@signozhq/ui/radio-group';
+import { Checkbox, Radio } from 'antd';
 
 import { AIAssistantEvents } from '../../../events';
 import { useAIAssistantAnalyticsContext } from '../../../hooks/useAIAssistantAnalyticsContext';
@@ -82,43 +81,31 @@ export default function InteractiveQuestion({
 			{question && <p className={blockStyles.title}>{question}</p>}
 
 			{type === 'radio' ? (
-				<RadioGroup
+				<Radio.Group
 					className={styles.options}
-					onChange={(value): void => {
-						setSelected([value]);
-						handleSubmit([value]);
+					onChange={(e): void => {
+						setSelected([e.target.value]);
+						handleSubmit([e.target.value]);
 					}}
 				>
 					{normalized.map((opt) => (
-						<RadioGroupItem
-							key={opt.value}
-							value={opt.value}
-							className={styles.option}
-						>
+						<Radio key={opt.value} value={opt.value} className={styles.option}>
 							{opt.label}
-						</RadioGroupItem>
+						</Radio>
 					))}
-				</RadioGroup>
+				</Radio.Group>
 			) : (
 				<>
-					<div className={cx(styles.options, styles.checkbox)}>
+					<Checkbox.Group
+						className={cx(styles.options, styles.checkbox)}
+						onChange={(vals): void => setSelected(vals as string[])}
+					>
 						{normalized.map((opt) => (
-							<Checkbox
-								key={opt.value}
-								value={selected.includes(opt.value)}
-								onChange={(checked): void => {
-									setSelected((prev) =>
-										checked === true
-											? [...prev, opt.value]
-											: prev.filter((v) => v !== opt.value),
-									);
-								}}
-								className={styles.option}
-							>
+							<Checkbox key={opt.value} value={opt.value} className={styles.option}>
 								{opt.label}
 							</Checkbox>
 						))}
-					</div>
+					</Checkbox.Group>
 					<Button
 						variant="solid"
 						size="sm"

frontend/src/container/AnomalyAlertEvaluationView/AnomalyAlertEvaluationView.tsx

@@ -1,6 +1,5 @@
 import { useEffect, useRef, useState } from 'react';
-import { Input } from 'antd';
-import { Checkbox } from '@signozhq/ui/checkbox';
+import { Checkbox, Input } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import useDebouncedFn from 'hooks/useDebouncedFunction';
@@ -321,8 +320,10 @@ function AnomalyAlertEvaluationView({
 								{filteredSeriesKeys.length > 0 && (
 									<Checkbox
 										className="anomaly-alert-evaluation-view-series-list-item"
+										type="checkbox"
 										name="series"
-										value={selectedSeries === null}
+										value="all"
+										checked={selectedSeries === null}
 										onChange={(): void => handleSeriesChange(null)}
 									>
 										Show All
@@ -334,8 +335,10 @@ function AnomalyAlertEvaluationView({
 										<Checkbox
 											className="anomaly-alert-evaluation-view-series-list-item"
 											key={seriesKey}
+											type="checkbox"
 											name="series"
-											value={selectedSeries === seriesKey}
+											value={seriesKey}
+											checked={selectedSeries === seriesKey}
 											onChange={(): void => handleSeriesChange(seriesKey)}
 										>
 											<div

frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/DomainDetails.styles.scss

@@ -161,6 +161,41 @@
 		justify-content: space-between;
 		align-items: center;
 		border-bottom: 1px solid var(--l1-border);
+
+		.views-tabs {
+			color: var(--l2-foreground);
+
+			.view-title {
+				display: flex;
+				gap: var(--margin-2);
+				align-items: center;
+				justify-content: center;
+				font-size: 14px;
+				font-style: normal;
+				font-weight: var(--font-weight-normal);
+			}
+
+			.tab {
+				padding: 0 32px;
+				background: var(--l3-background);
+				border: 1px solid var(--l1-border);
+				width: auto;
+			}
+
+			.tab::before {
+				background: var(--l1-border);
+			}
+
+			.selected_view {
+				background: none;
+				border: 1px solid var(--l1-border);
+				border-bottom: none;
+			}
+
+			.selected_view::before {
+				background: var(--l1-border);
+			}
+		}
 	}
 }
 
@@ -664,6 +699,40 @@
 		left: 50%;
 		transform: translate(-50%, -50%);
 	}
+
+	.views-tabs {
+		color: var(--l2-foreground);
+
+		.ant-btn {
+			box-shadow: none;
+			position: relative;
+		}
+
+		.tab {
+			border: 1px solid var(--l1-border);
+			width: 114px;
+			z-index: 1;
+		}
+
+		.tab:hover {
+			z-index: 3;
+		}
+
+		.tab::before {
+			background: var(--l2-background);
+		}
+
+		.selected_view {
+			background: var(--l1-border);
+			color: var(--l1-foreground);
+			border: 1px solid var(--l1-border);
+			z-index: 2;
+		}
+
+		.selected_view::before {
+			background: var(--l2-background);
+		}
+	}
 }
 
 .top-services-content {

frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/DomainDetails.tsx

@@ -2,10 +2,9 @@ import { useCallback, useEffect, useMemo, useState } from 'react';
 // eslint-disable-next-line no-restricted-imports
 import { useSelector } from 'react-redux';
 import { Spacing } from '@signozhq/design-tokens';
-import { Button, Drawer } from 'antd';
-import { ToggleGroupSimple } from '@signozhq/ui/toggle-group';
-import { Divider } from '@signozhq/ui/divider';
+import { Button, Divider, Drawer, Radio } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
+import type { RadioChangeEvent } from 'antd/lib';
 import DateTimeSelectionV2 from 'container/TopNav/DateTimeSelectionV2';
 import {
 	CustomTimeType,
@@ -56,9 +55,9 @@ function DomainDetails({
 	const [initialFiltersEndPointStats, setInitialFiltersEndPointStats] =
 		useState<IBuilderQuery['filters']>(domainListFilters);
 
-	const handleTabChange = (value: string): void => {
-		setSelectedView(value as VIEWS);
-		setParams({ selectedView: value });
+	const handleTabChange = (e: RadioChangeEvent): void => {
+		setSelectedView(e.target.value);
+		setParams({ selectedView: e.target.value });
 	};
 
 	const handleEndPointChange = (name: string): void => {
@@ -225,17 +224,38 @@ function DomainDetails({
 						timeRange={modalTimeRange}
 					/>
 					<div className="views-tabs-container">
-						<ToggleGroupSimple
-							type="single"
+						<Radio.Group
+							className="views-tabs"
 							onChange={handleTabChange}
 							value={selectedView}
-							size="lg"
-							items={[
-								{ value: VIEW_TYPES.ALL_ENDPOINTS, label: 'All Endpoints' },
-								{ value: VIEW_TYPES.ENDPOINT_STATS, label: 'Endpoint(s) Stats' },
-								{ value: VIEW_TYPES.TOP_ERRORS, label: 'Top 10 Errors' },
-							]}
-						/>
+						>
+							<Radio.Button
+								className={
+									selectedView === VIEW_TYPES.ALL_ENDPOINTS ? 'selected_view tab' : 'tab'
+								}
+								value={VIEW_TYPES.ALL_ENDPOINTS}
+							>
+								<div className="view-title">All Endpoints</div>
+							</Radio.Button>
+							<Radio.Button
+								className={
+									selectedView === VIEW_TYPES.ENDPOINT_STATS
+										? 'tab selected_view'
+										: 'tab'
+								}
+								value={VIEW_TYPES.ENDPOINT_STATS}
+							>
+								<div className="view-title">Endpoint(s) Stats</div>
+							</Radio.Button>
+							<Radio.Button
+								className={
+									selectedView === VIEW_TYPES.TOP_ERRORS ? 'tab selected_view' : 'tab'
+								}
+								value={VIEW_TYPES.TOP_ERRORS}
+							>
+								<div className="view-title">Top 10 Errors</div>
+							</Radio.Button>
+						</Radio.Group>
 					</div>
 					{selectedView === VIEW_TYPES.ALL_ENDPOINTS && (
 						<AllEndPoints

frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/components/StatusCodeBarCharts.tsx

@@ -21,17 +21,14 @@ import { useResizeObserver } from 'hooks/useDimensions';
 import { useNotifications } from 'hooks/useNotifications';
 import { getUPlotChartData } from 'lib/uPlotLib/utils/getUplotChartData';
 import { LegendPosition } from 'lib/uPlotV2/components/types';
+import { getStartAndEndTimesInMilliseconds } from 'pages/MessagingQueues/MessagingQueuesUtils';
 import { useTimezone } from 'providers/Timezone';
 import { SuccessResponse } from 'types/api';
 import { Widgets } from 'types/api/dashboard/getAll';
 import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
 
 import ErrorState from './ErrorState';
-import {
-	getStepIntervalForQuery,
-	getTracesTimeRangeFromStepInterval,
-	prepareStatusCodeBarChartsConfig,
-} from './utils';
+import { prepareStatusCodeBarChartsConfig } from './utils';
 
 function StatusCodeBarCharts({
 	endPointStatusCodeBarChartsDataQuery,
@@ -138,18 +135,6 @@ function StatusCodeBarCharts({
 		[domainName, filters],
 	);
 
-	const activeApiResponse = useMemo(
-		() =>
-			currentWidgetInfoIndex === 0
-				? formattedEndPointStatusCodeBarChartsDataPayload
-				: formattedEndPointStatusCodeLatencyBarChartsDataPayload,
-		[
-			currentWidgetInfoIndex,
-			formattedEndPointStatusCodeBarChartsDataPayload,
-			formattedEndPointStatusCodeLatencyBarChartsDataPayload,
-		],
-	);
-
 	const graphClickHandler = useCallback(
 		(
 			xValue: number,
@@ -159,14 +144,11 @@ function StatusCodeBarCharts({
 			metric?: { [key: string]: string },
 			queryData?: { queryName: string; inFocusOrNot: boolean },
 		): void => {
+			const TWO_AND_HALF_MINUTES_IN_MILLISECONDS = 2.5 * 60 * 1000; // 150,000 milliseconds
 			const customFilters = getCustomFiltersForBarChart(metric);
-			const stepInterval = getStepIntervalForQuery(
-				activeApiResponse,
-				queryData?.queryName,
-			);
-			const { start, end } = getTracesTimeRangeFromStepInterval(
+			const { start, end } = getStartAndEndTimesInMilliseconds(
 				xValue,
-				stepInterval,
+				TWO_AND_HALF_MINUTES_IN_MILLISECONDS,
 			);
 
 			handleGraphClick({
@@ -189,7 +171,6 @@ function StatusCodeBarCharts({
 			});
 		},
 		[
-			activeApiResponse,
 			widget,
 			navigateToExplorerPages,
 			navigateToExplorer,

frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/components/__tests__/utils.test.ts

@@ -1,68 +0,0 @@
-import {
-	getMinStepIntervalFromApiResponse,
-	getStepIntervalForQuery,
-	getTracesTimeRangeFromStepInterval,
-} from '../utils';
-
-describe('StatusCodeBarCharts utils', () => {
-	describe('getTracesTimeRangeFromStepInterval', () => {
-		const xValue = 1609459200; // seconds
-
-		it('keeps start at click time with a minimum 5 minute end range', () => {
-			const { start, end } = getTracesTimeRangeFromStepInterval(xValue, 60);
-
-			expect(start).toBe(xValue * 1000);
-			expect(end - start).toBe(5 * 60 * 1000);
-			expect(end).toBe(xValue * 1000 + 5 * 60 * 1000);
-		});
-
-		it('extends end when step interval is larger than 5 minutes', () => {
-			const stepInterval = 600; // 10 minutes
-			const { start, end } = getTracesTimeRangeFromStepInterval(
-				xValue,
-				stepInterval,
-			);
-
-			expect(start).toBe(xValue * 1000);
-			expect(end - start).toBe(10 * 60 * 1000);
-			expect(end).toBe(xValue * 1000 + 10 * 60 * 1000);
-		});
-	});
-
-	describe('getMinStepIntervalFromApiResponse', () => {
-		it('returns 60 when step intervals are missing', () => {
-			expect(getMinStepIntervalFromApiResponse({} as any)).toBe(60);
-		});
-
-		it('returns the minimum step interval from the response', () => {
-			const apiResponse = {
-				data: {
-					newResult: {
-						meta: {
-							stepIntervals: { A: 120, B: 60 },
-						},
-					},
-				},
-			};
-
-			expect(getMinStepIntervalFromApiResponse(apiResponse as any)).toBe(60);
-		});
-	});
-
-	describe('getStepIntervalForQuery', () => {
-		it('returns query-specific step interval when available', () => {
-			const apiResponse = {
-				data: {
-					newResult: {
-						meta: {
-							stepIntervals: { A: 120, B: 60 },
-						},
-					},
-				},
-			};
-
-			expect(getStepIntervalForQuery(apiResponse as any, 'A')).toBe(120);
-			expect(getStepIntervalForQuery(apiResponse as any, 'B')).toBe(60);
-		});
-	});
-});

frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/components/utils.ts

@@ -13,65 +13,6 @@ import { Query } from 'types/api/queryBuilder/queryBuilderData';
 import { QueryData } from 'types/api/widgets/getQuery';
 import { v4 } from 'uuid';
 
-const DEFAULT_STEP_INTERVAL_SECONDS = 60;
-const MIN_TRACES_TIME_RANGE_MINUTES = 5;
-
-export function getMinStepIntervalFromApiResponse(
-	apiResponse: MetricRangePayloadProps,
-): number {
-	const stepIntervals: ExecStats['stepIntervals'] = get(
-		apiResponse,
-		'data.newResult.meta.stepIntervals',
-		{},
-	);
-	const values = Object.values(stepIntervals).filter(
-		(value): value is number =>
-			typeof value === 'number' && Number.isFinite(value),
-	);
-
-	if (values.length === 0) {
-		return DEFAULT_STEP_INTERVAL_SECONDS;
-	}
-
-	return Math.min(...values);
-}
-
-export function getStepIntervalForQuery(
-	apiResponse: MetricRangePayloadProps,
-	queryName?: string,
-): number {
-	const minStepInterval = getMinStepIntervalFromApiResponse(apiResponse);
-
-	if (!queryName) {
-		return minStepInterval;
-	}
-
-	const stepIntervals: ExecStats['stepIntervals'] = get(
-		apiResponse,
-		'data.newResult.meta.stepIntervals',
-		{},
-	);
-
-	return get(stepIntervals, queryName, minStepInterval) ?? minStepInterval;
-}
-
-export function getTracesTimeRangeFromStepInterval(
-	xValue: number,
-	stepIntervalSeconds: number,
-): { start: number; end: number } {
-	const rangeMinutes = Math.max(
-		stepIntervalSeconds / 60,
-		MIN_TRACES_TIME_RANGE_MINUTES,
-	);
-	const rangeMs = rangeMinutes * 60 * 1000;
-	const start = Math.floor(xValue * 1000);
-
-	return {
-		start,
-		end: Math.ceil(start + rangeMs),
-	};
-}
-
 export const prepareStatusCodeBarChartsConfig = ({
 	timezone,
 	isDarkMode,
@@ -100,7 +41,7 @@ export const prepareStatusCodeBarChartsConfig = ({
 		'data.newResult.meta.stepIntervals',
 		{},
 	);
-	const minStepInterval = getMinStepIntervalFromApiResponse(apiResponse);
+	const minStepInterval = Math.min(...Object.values(stepIntervals));
 
 	const config = buildBaseConfig({
 		id: v4(),

frontend/src/container/CustomDomainSettings/CustomDomainSettings.tsx

@@ -11,13 +11,8 @@ import {
 } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
 import { Callout } from '@signozhq/ui/callout';
-import {
-	DropdownMenu,
-	DropdownMenuContent,
-	DropdownMenuTrigger,
-} from '@signozhq/ui/dropdown-menu';
 import { toast } from '@signozhq/ui/sonner';
-import { Skeleton } from 'antd';
+import { Dropdown, Skeleton } from 'antd';
 import {
 	RenderErrorResponseDTO,
 	ZeustypesHostDTO,
@@ -205,15 +200,10 @@ export default function CustomDomainSettings(): JSX.Element {
 							!workspaceName ? 'workspace-name-hidden' : ''
 						}`}
 					>
-						<DropdownMenu>
-							<DropdownMenuTrigger asChild>
-								<Button variant="link" color="none" disabled={isFetchingHosts}>
-									<Link2 size={12} />
-									<span>{stripProtocol(activeHost?.url ?? '')}</span>
-									<ChevronDown size={12} />
-								</Button>
-							</DropdownMenuTrigger>
-							<DropdownMenuContent align="start">
+						<Dropdown
+							trigger={['click']}
+							disabled={isFetchingHosts}
+							dropdownRender={(): JSX.Element => (
 								<div className="workspace-url-dropdown">
 									<span className="workspace-url-dropdown-header">
 										All Workspace URLs
@@ -246,8 +236,14 @@ export default function CustomDomainSettings(): JSX.Element {
 										);
 									})}
 								</div>
-							</DropdownMenuContent>
-						</DropdownMenu>
+							)}
+						>
+							<Button variant="link" color="none">
+								<Link2 size={12} />
+								<span>{stripProtocol(activeHost?.url ?? '')}</span>
+								<ChevronDown size={12} />
+							</Button>
+						</Dropdown>
 						<span className="custom-domain-card-meta-timezone">
 							<Clock size={11} />
 							{timezone.offset}

frontend/src/container/CustomDomainSettings/__tests__/CustomDomainSettings.test.tsx

@@ -1,5 +1,4 @@
 import { GetHosts200 } from 'api/generated/services/sigNoz.schemas';
-import userEvent from '@testing-library/user-event';
 import { rest, server } from 'mocks-server/server';
 import { fireEvent, render, screen, waitFor } from 'tests/test-utils';
 
@@ -143,13 +142,12 @@ describe('CustomDomainSettings', () => {
 	});
 
 	it('shows all workspace URLs as links in the dropdown', async () => {
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
 		render(<CustomDomainSettings />);
 
 		await screen.findByText(/custom-host\.test\.cloud/i);
 
 		// Open the URL dropdown
-		await user.click(
+		fireEvent.click(
 			screen.getByRole('button', { name: /custom-host\.test\.cloud/i }),
 		);
 

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

@@ -1,7 +1,6 @@
 import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Col, Input, Select, Space, Tooltip } from 'antd';
-import { ToggleGroupSimple } from '@signozhq/ui/toggle-group';
+import { Col, Input, Radio, Select, Space, Tooltip } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import AddTags from 'container/DashboardContainer/DashboardSettings/General/AddTags';
 import { useDashboardCursorSyncMode } from 'hooks/dashboard/useDashboardCursorSyncMode';
@@ -214,18 +213,18 @@ function GeneralDashboardSettings(): JSX.Element {
 							Sync crosshair and tooltip across all the dashboard panels
 						</Typography.Text>
 					</div>
-					<ToggleGroupSimple
-						type="single"
+					<Radio.Group
 						value={cursorSyncMode}
-						onChange={(value: string): void => {
-							setCursorSyncMode(value as DashboardCursorSync);
+						onChange={(e): void => {
+							setCursorSyncMode(e.target.value as DashboardCursorSync);
 						}}
-						items={[
-							{ value: DashboardCursorSync.None, label: 'No Sync' },
-							{ value: DashboardCursorSync.Crosshair, label: 'Crosshair' },
-							{ value: DashboardCursorSync.Tooltip, label: 'Tooltip' },
-						]}
-					/>
+					>
+						<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}>
@@ -238,21 +237,21 @@ function GeneralDashboardSettings(): JSX.Element {
 								matching ones highlighted
 							</Typography.Text>
 						</div>
-						<ToggleGroupSimple
-							type="single"
+						<Radio.Group
 							value={syncTooltipFilterMode}
-							onChange={(value: string): void => {
+							onChange={(e): void => {
 								logEvent(Events.TOOLTIP_SYNC_MODE_CHANGED, {
 									path: getAbsoluteUrl(window.location.pathname),
-									mode: value,
+									mode: e.target.value,
 								});
-								setSyncTooltipFilterMode(value as SyncTooltipFilterMode);
+								setSyncTooltipFilterMode(e.target.value as SyncTooltipFilterMode);
 							}}
-							items={[
-								{ value: SyncTooltipFilterMode.All, label: 'All' },
-								{ value: SyncTooltipFilterMode.Filtered, label: 'Filtered' },
-							]}
-						/>
+						>
+							<Radio.Button value={SyncTooltipFilterMode.All}>All</Radio.Button>
+							<Radio.Button value={SyncTooltipFilterMode.Filtered}>
+								Filtered
+							</Radio.Button>
+						</Radio.Group>
 					</div>
 				)}
 			</Col>

frontend/src/container/DashboardContainer/__test__/DynamicVariableDefaultBehavior.test.tsx

@@ -395,8 +395,8 @@ describe('Dynamic Variable Default Behavior', () => {
 
 			// Check if the checkbox exists (it should be unchecked initially)
 			const checkbox = allOptionContainer?.querySelector(
-				'[role="checkbox"]',
-			) as HTMLElement;
+				'input[type="checkbox"]',
+			) as HTMLInputElement;
 			expect(checkbox).toBeInTheDocument();
 
 			// Should call onValueUpdate with all values (ALL selection)
@@ -516,10 +516,10 @@ describe('Dynamic Variable Default Behavior', () => {
 
 			// Check if the checkbox for ALL option is checked
 			const checkbox = dropdownAllOption.querySelector(
-				'[role="checkbox"]',
-			) as HTMLElement;
+				'input[type="checkbox"]',
+			) as HTMLInputElement;
 			expect(checkbox).toBeInTheDocument();
-			expect(checkbox).toHaveAttribute('data-state', 'checked');
+			expect(checkbox.checked).toBe(true);
 		});
 	});
 });

frontend/src/container/DashboardContainer/__test__/PanelManagement.test.tsx

@@ -196,10 +196,10 @@ describe('Panel Management Tests', () => {
 			expect(allOption).toHaveClass('selected');
 
 			const allCheckbox = allOption.querySelector(
-				'[role="checkbox"]',
-			) as HTMLElement;
+				'input[type="checkbox"]',
+			) as HTMLInputElement;
 			expect(allCheckbox).toBeInTheDocument();
-			expect(allCheckbox).toHaveAttribute('data-state', 'checked');
+			expect(allCheckbox.checked).toBe(true);
 		});
 	});
 

frontend/src/container/DashboardContainer/visualization/components/ChartManager/__tests__/getChartManagerColumns.test.tsx

@@ -160,8 +160,8 @@ describe('getChartManagerColumns', () => {
 		expect(renderFn).toBeDefined();
 		const { container } = render(renderFn!(null, tableDataSet[1], 1));
 
-		const checkbox = container.querySelector('[role="checkbox"]');
+		const checkbox = container.querySelector('input[type="checkbox"]');
 		expect(checkbox).toBeInTheDocument();
-		expect(checkbox).toHaveAttribute('data-state', 'checked'); // graphVisibilityState[1] is true
+		expect(checkbox).toBeChecked(); // graphVisibilityState[1] is true
 	});
 });

frontend/src/container/Download/Download.tsx

@@ -1,7 +1,6 @@
 import { useState } from 'react';
 import { CloudDownload } from '@signozhq/icons';
-import { DropdownMenuSimple, type MenuProps } from '@signozhq/ui/dropdown-menu';
-import { Button, Flex } from 'antd';
+import { Button, Dropdown, MenuProps, Flex } from 'antd';
 import { unparse } from 'papaparse';
 
 import { DownloadProps } from './Download.types';
@@ -68,7 +67,7 @@ function Download({ data, isLoading, fileName }: DownloadProps): JSX.Element {
 	};
 
 	return (
-		<DropdownMenuSimple menu={menu}>
+		<Dropdown menu={menu} trigger={['click']}>
 			<Button
 				className="download-button"
 				loading={isLoading || isDownloading}
@@ -80,7 +79,7 @@ function Download({ data, isLoading, fileName }: DownloadProps): JSX.Element {
 					Download
 				</Flex>
 			</Button>
-		</DropdownMenuSimple>
+		</Dropdown>
 	);
 }
 

frontend/src/container/ErrorDetails/index.tsx

@@ -2,8 +2,7 @@ import { useEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useQuery } from 'react-query';
 import { useLocation } from 'react-router-dom';
-import { Button, Space } from 'antd';
-import { Divider } from '@signozhq/ui/divider';
+import { Button, Divider, Space } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import logEvent from 'api/common/logEvent';
 import getNextPrevId from 'api/errors/getNextPrevId';

frontend/src/container/ExplorerOptions/ExplorerOptions.tsx

@@ -22,13 +22,13 @@ import { Color } from '@signozhq/design-tokens';
 import {
 	Button,
 	ColorPicker,
+	Divider,
 	Input,
 	Modal,
 	RefSelectProps,
 	Select,
 	Tooltip,
 } from 'antd';
-import { Divider } from '@signozhq/ui/divider';
 import { Typography } from '@signozhq/ui/typography';
 import getLocalStorageKey from 'api/browser/localstorage/get';
 import setLocalStorageKey from 'api/browser/localstorage/set';

frontend/src/container/GeneralSettings/styles.ts

@@ -1,4 +1,8 @@
-import { Col, Input as InputComponent } from 'antd';
+import {
+	Col,
+	Dropdown as DropDownComponent,
+	Input as InputComponent,
+} from 'antd';
 import { Typography as TypographyComponent } from '@signozhq/ui/typography';
 import styled from 'styled-components';
 
@@ -30,6 +34,16 @@ export const ButtonContainer = styled.div`
 	}
 `;
 
+export const Dropdown = styled(DropDownComponent)`
+	&&& {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		max-width: 150px;
+		min-width: 150px;
+	}
+`;
+
 export const TextContainer = styled.div`
 	&&& {
 		min-width: 100px;

frontend/src/container/GridCardLayout/GridCard/FullView/TableRender/CustomCheckBox.tsx

@@ -1,6 +1,6 @@
 import { grey } from '@ant-design/colors';
-import { Checkbox } from '@signozhq/ui/checkbox';
-import { CSSProperties } from 'react';
+import { Checkbox, ConfigProvider } from 'antd';
+import type { CheckboxChangeEvent } from 'antd/es/checkbox';
 
 import { CheckBoxProps } from '../types';
 
@@ -11,22 +11,30 @@ function CustomCheckBox({
 	checkBoxOnChangeHandler,
 	disabled = false,
 }: CheckBoxProps): JSX.Element {
+	const onChangeHandler = (e: CheckboxChangeEvent): void => {
+		checkBoxOnChangeHandler(e, index);
+	};
+
 	const color = data[index]?.stroke?.toString() || grey[0];
+
 	const isChecked = graphVisibilityState[index] || false;
 
-	const colorStyle = {
-		'--checkbox-checked-background': color,
-		'--checkbox-border-color': color,
-	} as CSSProperties;
-
 	return (
-		<span style={colorStyle}>
+		<ConfigProvider
+			theme={{
+				token: {
+					colorPrimary: color,
+					colorBorder: color,
+					colorBgContainer: color,
+				},
+			}}
+		>
 			<Checkbox
-				onChange={(checked): void => checkBoxOnChangeHandler(checked, index)}
-				value={isChecked}
+				onChange={onChangeHandler}
+				checked={isChecked}
 				disabled={disabled}
 			/>
-		</span>
+		</ConfigProvider>
 	);
 }
 

frontend/src/container/GridCardLayout/GridCard/FullView/types.ts

@@ -1,4 +1,5 @@
 import { Dispatch, MutableRefObject, RefObject, SetStateAction } from 'react';
+import type { CheckboxChangeEvent } from 'antd/es/checkbox';
 import { ToggleGraphProps } from 'components/Graph/types';
 import { UplotProps } from 'components/Uplot/Uplot';
 import { PANEL_TYPES } from 'constants/queryBuilder';
@@ -76,10 +77,7 @@ export interface CheckBoxProps {
 	data: ExtendedChartDataset[];
 	index: number;
 	graphVisibilityState: boolean[];
-	checkBoxOnChangeHandler: (
-		checked: boolean | 'indeterminate',
-		index: number,
-	) => void;
+	checkBoxOnChangeHandler: (e: CheckboxChangeEvent, index: number) => void;
 	disabled?: boolean;
 }
 

frontend/src/container/GridCardLayout/GridCard/WidgetGraphComponent.test.tsx

@@ -1,7 +1,6 @@
 // eslint-disable-next-line no-restricted-imports
 import { Provider } from 'react-redux';
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
+import { fireEvent, render, screen } from '@testing-library/react';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import ROUTES from 'constants/routes';
 import { AppProvider } from 'providers/App/App';
@@ -177,7 +176,6 @@ jest.mock('providers/Dashboard/store/useDashboardStore', () => ({
 
 describe('WidgetGraphComponent', () => {
 	it('should show correct menu items when hovering over more options while loading', async () => {
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
 		const { getByTestId, findByRole, getByText, container } = render(
 			<MockQueryClientProvider>
 				<ErrorModalProvider>
@@ -210,7 +208,7 @@ describe('WidgetGraphComponent', () => {
 		expect(skeleton).toBeInTheDocument();
 
 		const moreOptionsButton = getByTestId('widget-header-options');
-		await user.click(moreOptionsButton);
+		fireEvent.mouseEnter(moreOptionsButton);
 
 		const menu = await findByRole('menu');
 		expect(menu).toBeInTheDocument();

frontend/src/container/GridCardLayout/WidgetHeader/WidgetHeader.styles.scss

@@ -54,17 +54,6 @@
 	visibility: visible;
 }
 
-// currently the width of the dropdown menu is set to 100% of the parent container,
-// which is not desired. This is a workaround to unset that width and allow the dropdown menu to size based on its content.
-// This is necessary because the dropdown menu can contain items with varying widths, and setting it to 100% can cause layout issues and make the menu look unbalanced.
-// we should idealy fix this in the dropdown menu component itself, but for now this is a quick fix to ensure the dropdown menu looks correct in the widget header.
-
-[data-radix-popper-content-wrapper]
-	[data-slot='dropdown-menu-content'].widget-header-dropdown
-	[data-slot='dropdown-menu-item'] {
-	width: unset !important;
-}
-
 .widget-api-actions {
 	padding-right: 0.25rem;
 }

frontend/src/container/GridCardLayout/WidgetHeader/__tests__/WidgetHeader.test.tsx

@@ -467,7 +467,6 @@ describe('WidgetHeader', () => {
 
 	describe('Create Alerts Menu Item', () => {
 		it('renders Create Alerts menu item with external link icon when included in headerMenuList', async () => {
-			const user = userEvent.setup({ pointerEventsCheck: 0 });
 			render(
 				<WidgetHeader
 					title={TEST_WIDGET_TITLE}
@@ -484,7 +483,7 @@ describe('WidgetHeader', () => {
 
 			const moreOptionsIcon = await screen.findByTestId(WIDGET_HEADER_OPTIONS_ID);
 			expect(moreOptionsIcon).toBeInTheDocument();
-			await user.click(moreOptionsIcon);
+			await userEvent.hover(moreOptionsIcon);
 
 			await screen.findByText(CREATE_ALERTS_TEXT);
 
@@ -495,7 +494,6 @@ describe('WidgetHeader', () => {
 		});
 
 		it('Create Alerts menu item is enabled and clickable', async () => {
-			const user = userEvent.setup({ pointerEventsCheck: 0 });
 			const mockCreateAlertsHandler = jest.fn();
 			const useCreateAlerts = jest.requireMock(
 				'hooks/queryBuilder/useCreateAlerts',
@@ -519,12 +517,12 @@ describe('WidgetHeader', () => {
 			expect(useCreateAlerts).toHaveBeenCalledWith(mockWidget, 'dashboardView');
 
 			const moreOptionsIcon = await screen.findByTestId(WIDGET_HEADER_OPTIONS_ID);
-			await user.click(moreOptionsIcon);
+			await userEvent.hover(moreOptionsIcon);
 
 			const createAlertsMenuItem = await screen.findByText(CREATE_ALERTS_TEXT);
 
 			// Verify the menu item is clickable by actually clicking it
-			await user.click(createAlertsMenuItem);
+			await userEvent.click(createAlertsMenuItem);
 			expect(mockCreateAlertsHandler).toHaveBeenCalledTimes(1);
 		});
 	});

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

@@ -15,8 +15,7 @@ import {
 	X,
 } from '@signozhq/icons';
 import { Color } from '@signozhq/design-tokens';
-import { Button, Input, Tooltip } from 'antd';
-import { DropdownMenuSimple } from '@signozhq/ui/dropdown-menu';
+import { Button, Dropdown, Input, MenuProps, Tooltip } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import ErrorContent from 'components/ErrorModal/components/ErrorContent';
 import ErrorPopover from 'components/ErrorPopover/ErrorPopover';
@@ -129,7 +128,7 @@ function WidgetHeader({
 		],
 	);
 
-	const onMenuItemSelectHandler = useCallback(
+	const onMenuItemSelectHandler: MenuProps['onClick'] = useCallback(
 		({ key }: { key: string }): void => {
 			if (isTWidgetOptions(key)) {
 				const functionToCall = keyMethodMapping[key];
@@ -189,8 +188,18 @@ function WidgetHeader({
 			{
 				key: MenuItemKeys.CreateAlerts,
 				icon: <Bell size="md" />,
-				label: MENUITEM_KEYS_VS_LABELS[MenuItemKeys.CreateAlerts],
-				rightIcon: <SquareArrowOutUpRight size="lg" />,
+				label: (
+					<span
+						style={{
+							display: 'flex',
+							alignItems: 'baseline',
+							justifyContent: 'space-between',
+						}}
+					>
+						{MENUITEM_KEYS_VS_LABELS[MenuItemKeys.CreateAlerts]}
+						<SquareArrowOutUpRight size={10} />
+					</span>
+				),
 				isVisible: headerMenuList?.includes(MenuItemKeys.CreateAlerts) || false,
 				disabled: false,
 			},
@@ -212,10 +221,8 @@ function WidgetHeader({
 
 	const menu = useMemo(
 		() => ({
-			items: updatedMenuList.map((item) => ({
-				...item,
-				onClick: onMenuItemSelectHandler,
-			})),
+			items: updatedMenuList,
+			onClick: onMenuItemSelectHandler,
 		}),
 		[updatedMenuList, onMenuItemSelectHandler],
 	);
@@ -314,12 +321,7 @@ function WidgetHeader({
 							/>
 						)}
 						{menu && Array.isArray(menu.items) && menu.items.length > 0 && (
-							<DropdownMenuSimple
-								menu={menu}
-								side="bottom"
-								align="end"
-								className="widget-header-dropdown"
-							>
+							<Dropdown menu={menu} trigger={['hover']} placement="bottomRight">
 								<Button
 									data-testid="widget-header-options"
 									className={`widget-header-more-options ${
@@ -327,7 +329,7 @@ function WidgetHeader({
 									}`}
 									icon={<EllipsisVertical size="md" />}
 								/>
-							</DropdownMenuSimple>
+							</Dropdown>
 						)}
 					</div>
 				</>

frontend/src/container/GridCardLayout/WidgetHeader/types.ts

@@ -6,7 +6,6 @@ export interface MenuItem {
 	key: MenuItemKeys;
 	icon: ReactNode;
 	label: ReactNode;
-	rightIcon?: ReactNode;
 	isVisible: boolean;
 	disabled: boolean;
 	danger?: boolean;

frontend/src/container/GridCardLayout/WidgetHeader/utils.ts

@@ -1,9 +1,9 @@
-import type { MenuItem as DropdownMenuItem } from '@signozhq/ui/dropdown-menu';
+import type { MenuItemType } from 'antd/es/menu/hooks/useItems';
 
 import { MenuItemKeys } from './contants';
 import { MenuItem } from './types';
 
-export const generateMenuList = (actions: MenuItem[]): DropdownMenuItem[] =>
+export const generateMenuList = (actions: MenuItem[]): MenuItemType[] =>
 	actions
 		.filter((action: MenuItem) => action.isVisible)
 		.map(({ key, icon: Icon, label, disabled, ...rest }) => ({

frontend/src/container/InfraMonitoringK8s/Base/K8sBaseDetails.tsx

@@ -8,10 +8,9 @@ import React, {
 import { useQuery } from 'react-query';
 // eslint-disable-next-line no-restricted-imports
 import { Color, Spacing } from '@signozhq/design-tokens';
-import { Button, Drawer, Tooltip } from 'antd';
-import { ToggleGroupSimple } from '@signozhq/ui/toggle-group';
-import { Divider } from '@signozhq/ui/divider';
+import { Button, Divider, Drawer, Radio, Tooltip } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
+import type { RadioChangeEvent } from 'antd/lib';
 import logEvent from 'api/common/logEvent';
 import { combineInitialAndUserExpression } from 'components/QueryBuilderV2/QueryV2/QuerySearch/utils';
 import { convertFiltersToExpression } from 'components/QueryBuilderV2/utils';
@@ -331,8 +330,8 @@ export default function K8sBaseDetails<T>({
 		}
 	}, [getMinMaxTime, selectedTime]);
 
-	const handleTabChange = (value: string): void => {
-		setSelectedView(value);
+	const handleTabChange = (e: RadioChangeEvent): void => {
+		setSelectedView(e.target.value);
 		setLogFiltersParam(null);
 		setTracesFiltersParam(null);
 		setEventsFiltersParam(null);
@@ -340,7 +339,7 @@ export default function K8sBaseDetails<T>({
 			entity: InfraMonitoringEvents.K8sEntity,
 			page: InfraMonitoringEvents.DetailedPage,
 			category: eventCategory,
-			view: value,
+			view: e.target.value,
 		});
 	};
 
@@ -521,101 +520,102 @@ export default function K8sBaseDetails<T>({
 
 					{!hideDetailViewTabs && (
 						<div className="views-tabs-container">
-							<ToggleGroupSimple
-								type="single"
+							<Radio.Group
 								className="views-tabs"
 								onChange={handleTabChange}
 								value={selectedView}
-								items={[
-									...(tabVisibility.showMetrics
-										? [
-												{
-													value: VIEW_TYPES.METRICS,
-													label: (
-														<div className="view-title">
-															<BarChart size={14} />
-															Metrics
-														</div>
-													),
-												},
-											]
-										: []),
-									...(tabVisibility.showLogs
-										? [
-												{
-													value: VIEW_TYPES.LOGS,
-													label: (
-														<div className="view-title">
-															<ScrollText size={14} />
-															Logs
-														</div>
-													),
-												},
-											]
-										: []),
-									...(tabVisibility.showTraces
-										? [
-												{
-													value: VIEW_TYPES.TRACES,
-													label: (
-														<div className="view-title">
-															<DraftingCompass size={14} />
-															Traces
-														</div>
-													),
-												},
-											]
-										: []),
-									...(tabVisibility.showEvents
-										? [
-												{
-													value: VIEW_TYPES.EVENTS,
-													label: (
-														<div className="view-title">
-															<ChevronsLeftRight size={14} />
-															Events
-														</div>
-													),
-												},
-											]
-										: []),
-									...(tabVisibility.showContainers
-										? [
-												{
-													value: VIEW_TYPES.CONTAINERS,
-													label: (
-														<div className="view-title">
-															<Package2 size={14} />
-															Containers
-														</div>
-													),
-												},
-											]
-										: []),
-									...(tabVisibility.showProcesses
-										? [
-												{
-													value: VIEW_TYPES.PROCESSES,
-													label: (
-														<div className="view-title">
-															<ChevronsLeftRight size={14} />
-															Processes
-														</div>
-													),
-												},
-											]
-										: []),
-									...(customTabs?.map((tab) => ({
-										value: tab.key,
-										label: (
-											<div className="view-title">
-												{tab.icon}
-												{tab.label}
-											</div>
-										),
-									})) ?? []),
-								]}
-							/>
+							>
+								{tabVisibility.showMetrics && (
+									<Radio.Button
+										className={
+											selectedView === VIEW_TYPES.METRICS ? 'selected_view tab' : 'tab'
+										}
+										value={VIEW_TYPES.METRICS}
+									>
+										<div className="view-title">
+											<BarChart size={14} />
+											Metrics
+										</div>
+									</Radio.Button>
+								)}
+								{tabVisibility.showLogs && (
+									<Radio.Button
+										className={
+											selectedView === VIEW_TYPES.LOGS ? 'selected_view tab' : 'tab'
+										}
+										value={VIEW_TYPES.LOGS}
+									>
+										<div className="view-title">
+											<ScrollText size={14} />
+											Logs
+										</div>
+									</Radio.Button>
+								)}
+								{tabVisibility.showTraces && (
+									<Radio.Button
+										className={
+											selectedView === VIEW_TYPES.TRACES ? 'selected_view tab' : 'tab'
+										}
+										value={VIEW_TYPES.TRACES}
+									>
+										<div className="view-title">
+											<DraftingCompass size={14} />
+											Traces
+										</div>
+									</Radio.Button>
+								)}
+								{tabVisibility.showEvents && (
+									<Radio.Button
+										className={
+											selectedView === VIEW_TYPES.EVENTS ? 'selected_view tab' : 'tab'
+										}
+										value={VIEW_TYPES.EVENTS}
+									>
+										<div className="view-title">
+											<ChevronsLeftRight size={14} />
+											Events
+										</div>
+									</Radio.Button>
+								)}
+								{tabVisibility.showContainers && (
+									<Radio.Button
+										className={
+											selectedView === VIEW_TYPES.CONTAINERS ? 'selected_view tab' : 'tab'
+										}
+										value={VIEW_TYPES.CONTAINERS}
+									>
+										<div className="view-title">
+											<Package2 size={14} />
+											Containers
+										</div>
+									</Radio.Button>
+								)}
+								{tabVisibility.showProcesses && (
+									<Radio.Button
+										className={
+											selectedView === VIEW_TYPES.PROCESSES ? 'selected_view tab' : 'tab'
+										}
+										value={VIEW_TYPES.PROCESSES}
+									>
+										<div className="view-title">
+											<ChevronsLeftRight size={14} />
+											Processes
+										</div>
+									</Radio.Button>
+								)}
+								{customTabs?.map((tab) => (
+									<Radio.Button
+										key={tab.key}
+										className={selectedView === tab.key ? 'selected_view tab' : 'tab'}
+										value={tab.key}
+									>
+										<div className="view-title">
+											{tab.icon}
+											{tab.label}
+										</div>
+									</Radio.Button>
+								))}
+							</Radio.Group>
 
 							{selectedView === VIEW_TYPES.LOGS && (
 								<Tooltip title="Go to Logs Explorer" placement="left">

frontend/src/container/InfraMonitoringK8s/EntityDetailsUtils/entityDetails.styles.scss

@@ -152,23 +152,23 @@
 				font-weight: var(--font-weight-normal);
 			}
 
-			> button {
+			.tab {
 				border: 1px solid var(--l1-border);
 				width: 114px;
+			}
 
-				&::before {
-					background: var(--l1-border);
-				}
+			.tab::before {
+				background: var(--l1-border);
+			}
 
-				&[data-state='on'] {
-					background: var(--l1-border);
-					color: var(--l1-foreground);
-					border: 1px solid var(--l1-border);
+			.selected_view {
+				background: var(--l1-border);
+				color: var(--l1-foreground);
+				border: 1px solid var(--l1-border);
+			}
 
-					&::before {
-						background: var(--l1-border);
-					}
-				}
+			.selected_view::before {
+				background: var(--l1-border);
 			}
 		}
 

frontend/src/container/Integrations/CloudIntegration/AmazonWebServices/RegionForm/RegionSelector.tsx

@@ -1,5 +1,5 @@
 import { Dispatch, SetStateAction } from 'react';
-import { Checkbox } from '@signozhq/ui/checkbox';
+import { Checkbox } from 'antd';
 import { useRegionSelection } from 'hooks/integration/aws/useRegionSelection';
 import { regions } from 'utils/regions';
 
@@ -21,18 +21,18 @@ export function RegionSelector({
 			setIncludeAllRegions,
 		});
 
-	const allSelected =
-		allRegionIds.length > 0 &&
-		allRegionIds.every((regionId) => selectedRegions.includes(regionId));
-	const someSelected =
-		selectedRegions.length > 0 && selectedRegions.length < allRegionIds.length;
-
 	return (
 		<div className="region-selector">
 			<div className="select-all">
 				<Checkbox
-					value={allSelected ? true : someSelected ? 'indeterminate' : false}
-					onChange={(checked): void => handleSelectAll(checked === true)}
+					checked={
+						allRegionIds.length > 0 &&
+						allRegionIds.every((regionId) => selectedRegions.includes(regionId))
+					}
+					indeterminate={
+						selectedRegions.length > 0 && selectedRegions.length < allRegionIds.length
+					}
+					onChange={(e): void => handleSelectAll(e.target.checked)}
 				>
 					Select All Regions
 				</Checkbox>
@@ -45,7 +45,7 @@ export function RegionSelector({
 						{region.subRegions.map((subRegion) => (
 							<Checkbox
 								key={subRegion.id}
-								value={selectedRegions.includes(subRegion.id)}
+								checked={selectedRegions.includes(subRegion.id)}
 								onChange={(): void => handleRegionSelect(subRegion.id)}
 							>
 								{subRegion.name}

frontend/src/container/ListAlertRules/AlertsEmptyState/AlertsEmptyState.tsx

@@ -1,7 +1,6 @@
 import React, { useCallback, useState } from 'react';
 import { Plus } from '@signozhq/icons';
-import { Button, Flex } from 'antd';
-import { Divider } from '@signozhq/ui/divider';
+import { Button, Divider, Flex } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import logEvent from 'api/common/logEvent';
 import ROUTES from 'constants/routes';

frontend/src/container/ListAlertRules/ListAlert.tsx

@@ -3,8 +3,7 @@ import { useTranslation } from 'react-i18next';
 import { UseQueryResult } from 'react-query';
 import { Button, Flex, Input } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
-import { Ellipsis, Plus } from '@signozhq/icons';
-import { DropdownMenuSimple } from '@signozhq/ui/dropdown-menu';
+import { Plus } from '@signozhq/icons';
 import type { ColumnsType } from 'antd/es/table/interface';
 import logEvent from 'api/common/logEvent';
 import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
@@ -16,6 +15,7 @@ import type {
 } from 'api/generated/services/sigNoz.schemas';
 import type { ErrorType } from 'api/generatedAPIInstance';
 import { AxiosError } from 'axios';
+import DropDown from 'components/DropDown/DropDown';
 import {
 	DynamicColumnsKey,
 	TableDataSource,
@@ -323,67 +323,55 @@ function ListAlert({ allAlertRules, refetch }: ListAlertProps): JSX.Element {
 			dataIndex: 'id',
 			key: 'action',
 			width: 10,
-			render: (id: RuletypesRuleDTO['id'], record): JSX.Element => {
-				const actionItems = [
-					<ToggleAlertState
-						key="1"
-						disabled={record.disabled ?? false}
-						setData={setData}
-						id={id ?? ''}
-					/>,
-					<ColumnButton
-						key="2"
-						onClick={(e: React.MouseEvent): void =>
-							onEditHandler(record, { newTab: isModifierKeyPressed(e) })
+			render: (id: RuletypesRuleDTO['id'], record): JSX.Element => (
+				<div data-testid="alert-actions">
+					<DropDown
+						onDropDownItemClick={(item): void =>
+							alertActionLogEvent(item.key, record)
 						}
-						type="link"
-						loading={editLoader}
-					>
-						Edit
-					</ColumnButton>,
-					<ColumnButton
-						key="3-new-tab"
-						onClick={(): void => onEditHandler(record, { newTab: true })}
-						type="link"
-						loading={editLoader}
-					>
-						Edit in New Tab
-					</ColumnButton>,
-					<ColumnButton
-						key="3-clone"
-						onClick={onCloneHandler(record)}
-						type="link"
-						loading={cloneLoader}
-					>
-						Clone
-					</ColumnButton>,
-					<DeleteAlert
-						key="4"
-						notifications={notificationsApi}
-						setData={setData}
-						id={id ?? ''}
-					/>,
-				];
-				return (
-					<div data-testid="alert-actions">
-						<DropdownMenuSimple
-							menu={{
-								items: actionItems.map((element, index) => ({
-									key: String(index),
-									label: element,
-									onClick: ({ key }): void => alertActionLogEvent(key, record),
-								})),
-							}}
-						>
-							<Button
+						element={[
+							<ToggleAlertState
+								key="1"
+								disabled={record.disabled ?? false}
+								setData={setData}
+								id={id ?? ''}
+							/>,
+							<ColumnButton
+								key="2"
+								onClick={(e: React.MouseEvent): void =>
+									onEditHandler(record, { newTab: isModifierKeyPressed(e) })
+								}
 								type="link"
-								style={{ color: 'var(--l1-foreground)' }}
-								icon={<Ellipsis size={16} />}
-							/>
-						</DropdownMenuSimple>
-					</div>
-				);
-			},
+								loading={editLoader}
+							>
+								Edit
+							</ColumnButton>,
+							<ColumnButton
+								key="3"
+								onClick={(): void => onEditHandler(record, { newTab: true })}
+								type="link"
+								loading={editLoader}
+							>
+								Edit in New Tab
+							</ColumnButton>,
+							<ColumnButton
+								key="3"
+								onClick={onCloneHandler(record)}
+								type="link"
+								loading={cloneLoader}
+							>
+								Clone
+							</ColumnButton>,
+							<DeleteAlert
+								key="4"
+								notifications={notificationsApi}
+								setData={setData}
+								id={id ?? ''}
+							/>,
+						]}
+					/>
+				</div>
+			),
 		});
 	}
 

frontend/src/container/ListOfDashboard/DashboardsList.tsx

@@ -12,11 +12,12 @@ import { useTranslation } from 'react-i18next';
 import { generatePath } from 'react-router-dom';
 import { useCopyToClipboard } from 'react-use';
 import { Color } from '@signozhq/design-tokens';
-import { DropdownMenuSimple, type MenuItem } from '@signozhq/ui/dropdown-menu';
 import {
 	Button,
+	Dropdown,
 	Flex,
 	Input,
+	MenuProps,
 	Modal,
 	Popover,
 	Skeleton,
@@ -552,7 +553,7 @@ function DashboardsList(): JSX.Element {
 	];
 
 	const getCreateDashboardItems = useMemo(() => {
-		const menuItems: MenuItem[] = [
+		const menuItems: MenuProps['items'] = [
 			{
 				label: (
 					<div
@@ -710,11 +711,11 @@ function DashboardsList(): JSX.Element {
 
 						{createNewDashboard && (
 							<section className="actions">
-								<DropdownMenuSimple
-									className="new-dashboard-menu"
+								<Dropdown
+									overlayClassName="new-dashboard-menu"
 									menu={{ items: getCreateDashboardItems }}
-									side="bottom"
-									align="end"
+									placement="bottomRight"
+									trigger={['click']}
 								>
 									<Button
 										type="text"
@@ -726,7 +727,7 @@ function DashboardsList(): JSX.Element {
 									>
 										New Dashboard
 									</Button>
-								</DropdownMenuSimple>
+								</Dropdown>
 								<Button
 									type="text"
 									className="learn-more"
@@ -755,11 +756,11 @@ function DashboardsList(): JSX.Element {
 								onChange={handleSearch}
 							/>
 							{createNewDashboard && (
-								<DropdownMenuSimple
-									className="new-dashboard-menu"
+								<Dropdown
+									overlayClassName="new-dashboard-menu"
 									menu={{ items: getCreateDashboardItems }}
-									side="bottom"
-									align="end"
+									placement="bottomRight"
+									trigger={['click']}
 								>
 									<Button
 										type="primary"
@@ -772,7 +773,7 @@ function DashboardsList(): JSX.Element {
 									>
 										New dashboard
 									</Button>
-								</DropdownMenuSimple>
+								</Dropdown>
 							)}
 						</div>
 

frontend/src/container/LogControls/index.tsx

@@ -1,8 +1,7 @@
 import { memo, useMemo } from 'react';
 // eslint-disable-next-line no-restricted-imports
 import { useDispatch, useSelector } from 'react-redux';
-import { Button, Flex } from 'antd';
-import { Divider } from '@signozhq/ui/divider';
+import { Button, Divider, Flex } from 'antd';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
 import Controls from 'container/Controls';
 import Download from 'container/Download/Download';

frontend/src/container/LogDetailedView/BodyTitleRenderer.tsx

@@ -2,13 +2,7 @@ import { useCallback } from 'react';
 import { useCopyToClipboard } from 'react-use';
 import { orange } from '@ant-design/colors';
 import { Settings } from '@signozhq/icons';
-import {
-	type BaseMenuItem,
-	DropdownMenu,
-	DropdownMenuContent,
-	DropdownMenuItem,
-	DropdownMenuTrigger,
-} from '@signozhq/ui/dropdown-menu';
+import { Dropdown, MenuProps } from 'antd';
 import {
 	negateOperator,
 	OPERATORS,
@@ -141,38 +135,41 @@ function BodyTitleRenderer({
 		viewName,
 	]);
 
-	const onClickHandler = (key: string): void => {
+	const onClickHandler: MenuProps['onClick'] = (props): void => {
 		const mapper = {
 			[DROPDOWN_KEY.FILTER_IN]: filterHandler(true),
 			[DROPDOWN_KEY.FILTER_OUT]: filterHandler(false),
 			[DROPDOWN_KEY.GROUP_BY]: groupByHandler,
 		};
 
-		const handler = mapper[key];
+		const handler = mapper[props.key];
 
 		if (handler) {
 			handler();
 		}
 	};
 
-	const menuItems: BaseMenuItem[] = [
-		{
-			key: DROPDOWN_KEY.FILTER_IN,
-			label: `Filter for ${value}`,
-		},
-		{
-			key: DROPDOWN_KEY.FILTER_OUT,
-			label: `Filter out ${value}`,
-		},
-		...(isGroupBySupported
-			? [
-					{
-						key: DROPDOWN_KEY.GROUP_BY,
-						label: `Group by ${nodeKey}`,
-					},
-				]
-			: []),
-	];
+	const menu: MenuProps = {
+		items: [
+			{
+				key: DROPDOWN_KEY.FILTER_IN,
+				label: `Filter for ${value}`,
+			},
+			{
+				key: DROPDOWN_KEY.FILTER_OUT,
+				label: `Filter out ${value}`,
+			},
+			...(isGroupBySupported
+				? [
+						{
+							key: DROPDOWN_KEY.GROUP_BY,
+							label: `Group by ${nodeKey}`,
+						},
+					]
+				: []),
+		],
+		onClick: onClickHandler,
+	};
 
 	const handleNodeClick = useCallback(
 		(e: React.MouseEvent): void => {
@@ -221,23 +218,15 @@ function BodyTitleRenderer({
 					}}
 					onMouseDown={(e): void => e.preventDefault()}
 				>
-					<DropdownMenu>
-						<DropdownMenuTrigger asChild>
-							<Settings style={{ marginRight: 8 }} className="hover-reveal" />
-						</DropdownMenuTrigger>
-						<DropdownMenuContent>
-							<div data-log-detail-ignore="true">
-								{menuItems.map((item) => (
-									<DropdownMenuItem
-										key={item.key}
-										onSelect={(): void => onClickHandler(item.key as string)}
-									>
-										{item.label}
-									</DropdownMenuItem>
-								))}
-							</div>
-						</DropdownMenuContent>
-					</DropdownMenu>
+					<Dropdown
+						menu={menu}
+						trigger={['click']}
+						dropdownRender={(originNode): React.ReactNode => (
+							<div data-log-detail-ignore="true">{originNode}</div>
+						)}
+					>
+						<Settings style={{ marginRight: 8 }} className="hover-reveal" />
+					</Dropdown>
 				</span>
 			)}
 			{title.toString()}{' '}

frontend/src/container/LogDetailedView/FieldRenderer.tsx

@@ -1,4 +1,4 @@
-import { Divider } from '@signozhq/ui/divider';
+import { Divider } from 'antd';
 import { TooltipSimple } from '@signozhq/ui/tooltip';
 import { Typography } from '@signozhq/ui/typography';
 

frontend/src/container/LogDetailedView/InfraMetrics/InfraMetrics.tsx

@@ -1,5 +1,6 @@
 import { useMemo, useState } from 'react';
 import { Empty } from 'antd';
+import type { RadioChangeEvent } from 'antd/lib';
 import SignozRadioGroup from 'components/SignozRadioGroup/SignozRadioGroup';
 import { History, Table } from '@signozhq/icons';
 import { DataSource } from 'types/common/queryBuilder';
@@ -59,8 +60,8 @@ function InfraMetrics({
 		return options;
 	}, [podName]);
 
-	const handleModeChange = (value: string): void => {
-		setSelectedView(value);
+	const handleModeChange = (e: RadioChangeEvent): void => {
+		setSelectedView(e.target.value);
 	};
 
 	if (!podName && !nodeName && !hostName) {

frontend/src/container/LogDetailedView/Overview.tsx

@@ -3,8 +3,7 @@ import MEditor, { EditorProps, Monaco } from '@monaco-editor/react';
 import { Color } from '@signozhq/design-tokens';
 import { Button } from '@signozhq/ui/button';
 import { Switch } from '@signozhq/ui/switch';
-import { Collapse, Input, Tag } from 'antd';
-import { Divider } from '@signozhq/ui/divider';
+import { Collapse, Divider, Input, Tag } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import { AddToQueryHOCProps } from 'components/Logs/AddToQueryHOC';
 import { ChangeViewFunctionType } from 'container/ExplorerOptions/types';

frontend/src/container/MembersSettings/MembersSettings.tsx

@@ -2,8 +2,9 @@ import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useHistory } from 'react-router-dom';
 import { Check, ChevronDown, Plus } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
-import { DropdownMenuSimple, type MenuItem } from '@signozhq/ui/dropdown-menu';
 import { Input } from '@signozhq/ui/input';
+import type { MenuProps } from 'antd';
+import { Dropdown } from 'antd';
 import { useListUsers } from 'api/generated/services/users';
 import EditMemberDrawer from 'components/EditMemberDrawer/EditMemberDrawer';
 import InviteMembersModal from 'components/InviteMembersModal/InviteMembersModal';
@@ -94,7 +95,7 @@ function MembersSettings(): JSX.Element {
 	).length;
 	const totalCount = allMembers.length;
 
-	const filterMenuItems: MenuItem[] = [
+	const filterMenuItems: MenuProps['items'] = [
 		{
 			key: FilterMode.All,
 			label: (
@@ -170,9 +171,10 @@ function MembersSettings(): JSX.Element {
 				</div>
 
 				<div className="members-settings__controls">
-					<DropdownMenuSimple
+					<Dropdown
 						menu={{ items: filterMenuItems }}
-						className="members-filter-dropdown"
+						trigger={['click']}
+						overlayClassName="members-filter-dropdown"
 					>
 						<Button
 							variant="solid"
@@ -182,7 +184,7 @@ function MembersSettings(): JSX.Element {
 							<span>{filterLabel}</span>
 							<ChevronDown size={12} className="members-filter-trigger__chevron" />
 						</Button>
-					</DropdownMenuSimple>
+					</Dropdown>
 
 					<div className="members-settings__search">
 						<Input

frontend/src/container/MembersSettings/__tests__/MembersSettings.integration.test.tsx

@@ -1,5 +1,4 @@
 import type { TypesUserDTO } from 'api/generated/services/sigNoz.schemas';
-import userEvent from '@testing-library/user-event';
 import { rest, server } from 'mocks-server/server';
 import { fireEvent, render, screen } from 'tests/test-utils';
 
@@ -77,15 +76,14 @@ describe('MembersSettings (integration)', () => {
 	});
 
 	it('filters to pending invites via the filter dropdown', async () => {
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
 		render(<MembersSettings />);
 
 		await screen.findByText('Alice Smith');
 
-		await user.click(screen.getByRole('button', { name: /all members/i }));
+		fireEvent.click(screen.getByRole('button', { name: /all members/i }));
 
 		const pendingOption = await screen.findByText(/pending invites/i);
-		await user.click(pendingOption);
+		fireEvent.click(pendingOption);
 
 		await screen.findByText('charlie@signoz.io');
 		expect(screen.queryByText('Alice Smith')).not.toBeInTheDocument();

frontend/src/container/MetricsExplorer/MetricDetails/DashboardsAndAlertsPopover.tsx

@@ -1,8 +1,7 @@
 import { useMemo } from 'react';
 import { generatePath } from 'react-router-dom';
 import { Color } from '@signozhq/design-tokens';
-import { DropdownMenuSimple } from '@signozhq/ui/dropdown-menu';
-import { Skeleton } from 'antd';
+import { Dropdown, Skeleton } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import {
 	useGetMetricAlerts,
@@ -127,11 +126,12 @@ function DashboardsAndAlertsPopover({
 	return (
 		<div className="dashboards-and-alerts-popover-container">
 			{dashboardsPopoverContent && (
-				<DropdownMenuSimple
+				<Dropdown
 					menu={{
 						items: dashboardsPopoverContent,
 					}}
-					align="start"
+					placement="bottomLeft"
+					trigger={['click']}
 				>
 					<div
 						className="dashboards-and-alerts-popover dashboards-popover"
@@ -142,14 +142,15 @@ function DashboardsAndAlertsPopover({
 							{pluralize(dashboards.length, 'dashboard')}
 						</Typography.Text>
 					</div>
-				</DropdownMenuSimple>
+				</Dropdown>
 			)}
 			{alertsPopoverContent && (
-				<DropdownMenuSimple
+				<Dropdown
 					menu={{
 						items: alertsPopoverContent,
 					}}
-					align="start"
+					placement="bottomLeft"
+					trigger={['click']}
 				>
 					<div
 						className="dashboards-and-alerts-popover alerts-popover"
@@ -160,7 +161,7 @@ function DashboardsAndAlertsPopover({
 							{pluralize(alerts.length, 'alert rule')}
 						</Typography.Text>
 					</div>
-				</DropdownMenuSimple>
+				</Dropdown>
 			)}
 		</div>
 	);

frontend/src/container/MetricsExplorer/MetricDetails/MetricDetails.tsx

@@ -2,8 +2,7 @@ import { useCallback, useEffect, useMemo } from 'react';
 // eslint-disable-next-line no-restricted-imports
 import { useSelector } from 'react-redux';
 import { Color } from '@signozhq/design-tokens';
-import { Button, Drawer } from 'antd';
-import { Divider } from '@signozhq/ui/divider';
+import { Button, Divider, Drawer } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import logEvent from 'api/common/logEvent';
 import { useGetMetricMetadata } from 'api/generated/services/metrics';

frontend/src/container/MySettings/__tests__/MySettings.test.tsx

@@ -119,17 +119,17 @@ describe('MySettings Flows', () => {
 
 		it('Should have Dark theme selected by default', async () => {
 			const themeSelector = screen.getByTestId(THEME_SELECTOR_TEST_ID);
-			const darkOption = within(themeSelector).getByRole('radio', {
-				name: /Dark/,
-			});
+			const darkOption = themeSelector.querySelector(
+				'input[value="dark"]',
+			) as HTMLInputElement;
 			expect(darkOption).toBeChecked();
 		});
 
 		it('Should switch theme and log event when Light theme is selected', async () => {
 			const themeSelector = screen.getByTestId(THEME_SELECTOR_TEST_ID);
-			const lightOption = within(themeSelector).getByRole('radio', {
-				name: /Light/,
-			});
+			const lightOption = themeSelector.querySelector(
+				'input[value="light"]',
+			) as HTMLInputElement;
 
 			fireEvent.click(lightOption);
 

frontend/src/container/MySettings/index.tsx

@@ -1,8 +1,7 @@
 import { useEffect, useState } from 'react';
 import { useMutation } from 'react-query';
-import { Tag } from 'antd';
+import { Radio, RadioChangeEvent, Tag } from 'antd';
 import { Switch } from '@signozhq/ui/switch';
-import { ToggleGroupSimple } from '@signozhq/ui/toggle-group';
 import setLocalStorageApi from 'api/browser/localstorage/set';
 import logEvent from 'api/common/logEvent';
 import updateUserPreference from 'api/v1/user/preferences/name/update';
@@ -89,7 +88,7 @@ function MySettings(): JSX.Element {
 		return isDarkMode ? 'dark' : 'light';
 	});
 
-	const handleThemeChange = (value: string): void => {
+	const handleThemeChange = ({ target: { value } }: RadioChangeEvent): void => {
 		logEvent('Account Settings: Theme Changed', {
 			theme: value,
 		});
@@ -188,12 +187,14 @@ function MySettings(): JSX.Element {
 					<div className="user-preference-section-content-item theme-selector">
 						<div className="user-preference-section-content-item-title-action">
 							Select your theme
-							<ToggleGroupSimple
-								type="single"
+							<Radio.Group
+								options={themeOptions}
 								onChange={handleThemeChange}
 								value={theme}
+								optionType="button"
+								buttonStyle="solid"
 								data-testid="theme-selector"
-								items={themeOptions}
+								size="middle"
 							/>
 						</div>
 

frontend/src/container/NewWidget/LeftContainer/ExplorerAttributeColumns.tsx

@@ -1,5 +1,4 @@
-import { Empty } from 'antd';
-import { Checkbox } from '@signozhq/ui/checkbox';
+import { Checkbox, Empty } from 'antd';
 import { AxiosResponse } from 'axios';
 import Spinner from 'components/Spinner';
 import { EXCLUDED_COLUMNS } from 'container/OptionsMenu/constants';
@@ -51,8 +50,9 @@ function ExplorerAttributeColumns({
 		<div className="attribute-columns">
 			{filteredAttributeKeys.map((attributeKey: any) => (
 				<Checkbox
-					value={isAttributeKeySelected(attributeKey.name)}
+					checked={isAttributeKeySelected(attributeKey.name)}
 					onChange={(): void => handleCheckboxChange(attributeKey.name)}
+					style={{ padding: 0 }}
 					key={attributeKey.name}
 				>
 					{attributeKey.name}

frontend/src/container/NewWidget/LeftContainer/ExplorerColumnsRenderer.styles.scss

@@ -104,33 +104,38 @@
 	height: 200px;
 	background-color: var(--l1-border);
 	overflow: hidden !important;
+	.ant-dropdown-menu {
+		padding: 0;
 
-	padding: 4px;
-	.ant-checkbox-wrapper {
-		padding: 2px 8px !important;
-	}
+		.ant-dropdown-menu-item {
+			padding: 4px;
+			.ant-checkbox-wrapper {
+				padding: 2px 8px !important;
+			}
 
-	.attribute-columns {
-		display: flex;
-		flex-direction: column;
-		height: 160px;
-		overflow: scroll;
-	}
+			.attribute-columns {
+				display: flex;
+				flex-direction: column;
+				height: 160px;
+				overflow: scroll;
+			}
 
-	.attribute-columns::-webkit-scrollbar {
-		width: 3px; /* Width of the scrollbar */
-	}
+			.attribute-columns::-webkit-scrollbar {
+				width: 3px; /* Width of the scrollbar */
+			}
 
-	.attribute-columns::-webkit-scrollbar-track {
-		background: var(--l1-border); /* Color of the track */
-	}
+			.attribute-columns::-webkit-scrollbar-track {
+				background: var(--l1-border); /* Color of the track */
+			}
 
-	.attribute-columns::-webkit-scrollbar-thumb {
-		background: var(--l2-foreground); /* Color of the thumb */
-		border-radius: 4px; /* Roundness of the thumb */
-	}
+			.attribute-columns::-webkit-scrollbar-thumb {
+				background: var(--l2-foreground); /* Color of the thumb */
+				border-radius: 4px; /* Roundness of the thumb */
+			}
 
-	.attribute-columns::-webkit-scrollbar-thumb:hover {
-		background: var(--l1-border); /* Color of the thumb on hover */
+			.attribute-columns::-webkit-scrollbar-thumb:hover {
+				background: var(--l1-border); /* Color of the thumb on hover */
+			}
+		}
 	}
 }

frontend/src/container/NewWidget/LeftContainer/ExplorerColumnsRenderer.tsx

@@ -7,13 +7,7 @@ import {
 	DropResult,
 } from 'react-beautiful-dnd';
 import { Color } from '@signozhq/design-tokens';
-import { Button, Input, Tooltip } from 'antd';
-import {
-	DropdownMenu,
-	DropdownMenuContent,
-	DropdownMenuTrigger,
-} from '@signozhq/ui/dropdown-menu';
-import { Divider } from '@signozhq/ui/divider';
+import { Button, Divider, Dropdown, Input, MenuProps, Tooltip } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import { FieldDataType } from 'api/v5/v5';
 import { SOMETHING_WENT_WRONG } from 'constants/api';
@@ -165,12 +159,34 @@ function ExplorerColumnsRenderer({
 		debouncedSetQuerySearchText(e.target.value);
 	};
 
-	const handleOpenChange = (nextOpen: boolean): void => {
-		setOpen(nextOpen);
-		if (nextOpen) {
-			setSearchText('');
-		}
-	};
+	const items: MenuProps['items'] = [
+		{
+			key: 'search',
+			label: (
+				<Input
+					type="text"
+					placeholder="Search"
+					className="explorer-columns-search"
+					value={searchText}
+					onChange={handleSearchChange}
+					prefix={<Search size={16} style={{ padding: '6px' }} />}
+				/>
+			),
+		},
+		{
+			key: 'columns',
+			label: (
+				<ExplorerAttributeColumns
+					isLoading={isLoading}
+					data={data}
+					searchText={searchText}
+					isAttributeKeySelected={isAttributeKeySelected}
+					handleCheckboxChange={handleCheckboxChange}
+					dataSource={initialDataSource}
+				/>
+			),
+		},
+	];
 
 	const removeSelectedLogField = (name: string): void => {
 		if (
@@ -222,6 +238,13 @@ function ExplorerColumnsRenderer({
 		}
 	};
 
+	const toggleDropdown = (): void => {
+		setOpen(!open);
+		if (!open) {
+			setSearchText('');
+		}
+	};
+
 	const isDarkMode = useIsDarkMode();
 
 	return (
@@ -304,38 +327,25 @@ function ExplorerColumnsRenderer({
 						</Droppable>
 					</DragDropContext>
 					<div>
-						<DropdownMenu open={open} onOpenChange={handleOpenChange}>
-							<DropdownMenuTrigger asChild>
-								<Button
-									className="action-btn"
-									data-testid="add-columns-button"
-									icon={
-										<CirclePlus
-											size={16}
-											color={isDarkMode ? Color.BG_INK_400 : Color.BG_VANILLA_100}
-										/>
-									}
-								/>
-							</DropdownMenuTrigger>
-							<DropdownMenuContent side="top" className="explorer-columns-dropdown">
-								<Input
-									type="text"
-									placeholder="Search"
-									className="explorer-columns-search"
-									value={searchText}
-									onChange={handleSearchChange}
-									prefix={<Search size={16} style={{ padding: '6px' }} />}
-								/>
-								<ExplorerAttributeColumns
-									isLoading={isLoading}
-									data={data}
-									searchText={searchText}
-									isAttributeKeySelected={isAttributeKeySelected}
-									handleCheckboxChange={handleCheckboxChange}
-									dataSource={initialDataSource}
-								/>
-							</DropdownMenuContent>
-						</DropdownMenu>
+						<Dropdown
+							menu={{ items }}
+							arrow
+							placement="top"
+							open={open}
+							overlayClassName="explorer-columns-dropdown"
+						>
+							<Button
+								className="action-btn"
+								data-testid="add-columns-button"
+								icon={
+									<CirclePlus
+										size={16}
+										color={isDarkMode ? Color.BG_INK_400 : Color.BG_VANILLA_100}
+									/>
+								}
+								onClick={toggleDropdown}
+							/>
+						</Dropdown>
 					</div>
 				</div>
 			)}

frontend/src/container/NewWidget/LeftContainer/__test__/ExplorerColumnsRenderer.test.tsx

@@ -146,7 +146,6 @@ describe('ExplorerColumnsRenderer', () => {
 	});
 
 	it('opens and closes the dropdown', async () => {
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
 		render(
 			<Wrapper>
 				<ExplorerColumnsRenderer
@@ -159,12 +158,12 @@ describe('ExplorerColumnsRenderer', () => {
 		);
 
 		const addButton = screen.getByTestId('add-columns-button');
-		await user.click(addButton);
+		await userEvent.click(addButton);
 
 		expect(screen.getByPlaceholderText('Search')).toBeInTheDocument();
 		expect(screen.getByText('attribute1')).toBeInTheDocument();
 
-		await user.click(addButton);
+		await userEvent.click(addButton);
 		await waitFor(() => {
 			expect(screen.queryByRole('menu')).not.toBeInTheDocument();
 		});

frontend/src/container/NewWidget/RightContainer/ContextLinks/UpdateContextLinks.tsx

@@ -13,7 +13,7 @@ import { Plus, Trash2 } from '@signozhq/icons';
 import { ContextLinkProps, Widgets } from 'types/api/dashboard/getAll';
 import { getBaseUrl } from 'utils/basePath';
 
-import VariablesPopover from './VariablesPopover';
+import VariablesDropdown from './VariablesDropdown';
 
 import './UpdateContextLinks.styles.scss';
 
@@ -71,7 +71,7 @@ function UpdateContextLinks({
 		customVariables: fieldVariables,
 	});
 
-	// Transform variables into the format expected by VariablesPopover
+	// Transform variables into the format expected by VariablesDropdown
 	const transformedVariables = useMemo(
 		() => transformContextVariables(variables),
 		[variables],
@@ -224,9 +224,7 @@ function UpdateContextLinks({
 							},
 						]}
 					>
-						{/* TODO: replace with AutoComplete with options for variables and
-						previously used URLs for better UX */}
-						<VariablesPopover
+						<VariablesDropdown
 							onVariableSelect={handleVariableSelect}
 							variables={transformedVariables}
 						>
@@ -254,7 +252,7 @@ function UpdateContextLinks({
 									/>
 								</div>
 							)}
-						</VariablesPopover>
+						</VariablesDropdown>
 					</Form.Item>
 
 					{/* Remove the separate variables section */}
@@ -284,7 +282,7 @@ function UpdateContextLinks({
 										/>
 									</Col>
 									<Col span={16}>
-										<VariablesPopover
+										<VariablesDropdown
 											onVariableSelect={(variableName, cursorPosition): void =>
 												handleParamVariableSelect(index, variableName, cursorPosition)
 											}
@@ -313,7 +311,7 @@ function UpdateContextLinks({
 													}
 												/>
 											)}
-										</VariablesPopover>
+										</VariablesDropdown>
 									</Col>
 									<Col span={2}>
 										<Button

frontend/src/container/NewWidget/RightContainer/ContextLinks/VariablesDropdown.styles.scss

@@ -0,0 +1,26 @@
+.variables-dropdown-container {
+	.url-input-trigger {
+		width: 100%;
+
+		.url-input-field {
+			width: 100%;
+		}
+	}
+
+	// Override Ant Design dropdown styles
+	.ant-dropdown-menu {
+		max-height: 300px;
+		overflow-y: auto;
+		padding: 8px 0;
+	}
+}
+
+.variable-row {
+	display: flex;
+	justify-content: space-between;
+
+	.variable-source {
+		color: #666;
+		font-size: 12px;
+	}
+}

frontend/src/container/NewWidget/RightContainer/ContextLinks/VariablesDropdown.tsx

@@ -0,0 +1,93 @@
+import { ReactNode, useEffect, useMemo, useRef, useState } from 'react';
+import { Dropdown } from 'antd';
+import { Typography } from '@signozhq/ui/typography';
+
+import './VariablesDropdown.styles.scss';
+
+interface VariablesDropdownProps {
+	onVariableSelect: (variableName: string, cursorPosition?: number) => void;
+	variables: VariableItem[];
+	children: (props: {
+		onVariableSelect: (variableName: string, cursorPosition?: number) => void;
+		isOpen: boolean;
+		setIsOpen: (open: boolean) => void;
+		cursorPosition: number | null;
+		setCursorPosition: (position: number | null) => void;
+	}) => ReactNode;
+}
+
+interface VariableItem {
+	name: string;
+	source: string;
+}
+
+function VariablesDropdown({
+	onVariableSelect,
+	variables,
+	children,
+}: VariablesDropdownProps): JSX.Element {
+	const [isOpen, setIsOpen] = useState(false);
+	const [cursorPosition, setCursorPosition] = useState<number | null>(null);
+	const wrapperRef = useRef<HTMLDivElement>(null);
+
+	// Click outside handler
+	useEffect(() => {
+		function handleClickOutside(event: MouseEvent): void {
+			if (
+				wrapperRef.current &&
+				!wrapperRef.current.contains(event.target as Node)
+			) {
+				setIsOpen(false);
+			}
+		}
+		if (isOpen) {
+			document.addEventListener('mousedown', handleClickOutside);
+		}
+		return (): void => {
+			document.removeEventListener('mousedown', handleClickOutside);
+		};
+	}, [isOpen]);
+
+	const dropdownItems = useMemo(
+		() =>
+			variables.map((v) => ({
+				key: v.name,
+				label: (
+					<div className="variable-row">
+						<Typography.Text className="variable-name">{`{{${v.name}}}`}</Typography.Text>
+						<Typography.Text className="variable-source">{v.source}</Typography.Text>
+					</div>
+				),
+			})),
+		[variables],
+	);
+
+	return (
+		<div className="variables-dropdown-container" ref={wrapperRef}>
+			<Dropdown
+				menu={{
+					items: dropdownItems,
+					onClick: ({ key }): void => {
+						const variableName = key as string;
+						onVariableSelect(`{{${variableName}}}`, cursorPosition || undefined);
+						setIsOpen(false);
+					},
+				}}
+				open={isOpen}
+				placement="bottomLeft"
+				trigger={['click']}
+				getPopupContainer={(): HTMLElement => wrapperRef.current || document.body}
+			>
+				{children({
+					onVariableSelect,
+					isOpen,
+					setIsOpen,
+					cursorPosition,
+					setCursorPosition,
+				})}
+			</Dropdown>
+		</div>
+	);
+}
+
+export default VariablesDropdown;

frontend/src/container/NewWidget/RightContainer/ContextLinks/VariablesPopover.styles.scss

@@ -1,74 +0,0 @@
-.variables-popover-container {
-	.url-input-trigger {
-		width: 100%;
-
-		.url-input-field {
-			width: 100%;
-		}
-	}
-
-	.variables-popover-anchor-wrap {
-		width: 100%;
-	}
-}
-
-.variables-popover-content {
-	// antd Modal uses z-index ~1000; popover must sit above it.
-	z-index: 1100;
-	padding: 4px 0;
-	max-height: 300px;
-	overflow-y: auto;
-	overflow-x: hidden;
-	min-width: var(--radix-popover-trigger-width);
-}
-
-.variables-popover-empty {
-	padding: 8px 12px;
-	color: var(--l3-foreground, #999);
-	font-size: 12px;
-	font-style: italic;
-}
-
-.variables-popover-item {
-	all: unset;
-	display: block;
-	box-sizing: border-box;
-	width: 100%;
-	padding: 8px 12px;
-	cursor: pointer;
-	color: var(--l1-foreground);
-	font-size: 13px;
-	line-height: 1.4;
-	overflow: hidden;
-
-	&:hover,
-	&:focus {
-		background-color: var(--l1-background-hover);
-	}
-}
-
-.variable-row {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	gap: 8px;
-	min-width: 0;
-
-	.variable-name,
-	.variable-source {
-		min-width: 0;
-		overflow: hidden;
-		text-overflow: ellipsis;
-		white-space: nowrap;
-	}
-
-	.variable-name {
-		flex: 1 1 auto;
-	}
-
-	.variable-source {
-		color: #666;
-		font-size: 12px;
-		flex: 0 1 auto;
-	}
-}

frontend/src/container/NewWidget/RightContainer/ContextLinks/VariablesPopover.tsx

@@ -1,111 +0,0 @@
-// Uses Popover (not DropdownMenu like the rest of the antd-dropdown migration):
-// DropdownMenuTrigger preventDefaults pointerdown, breaking input focus and
-// dismissing on every keystroke. PopoverAnchor is a passive positioning element.
-import { ReactNode, useRef, useState } from 'react';
-import { Popover, PopoverAnchor, PopoverContent } from '@signozhq/ui/popover';
-import { Typography } from '@signozhq/ui/typography';
-
-import './VariablesPopover.styles.scss';
-
-interface VariablesPopoverProps {
-	onVariableSelect: (variableName: string, cursorPosition?: number) => void;
-	variables: VariableItem[];
-	children: (props: {
-		onVariableSelect: (variableName: string, cursorPosition?: number) => void;
-		isOpen: boolean;
-		setIsOpen: (open: boolean) => void;
-		cursorPosition: number | null;
-		setCursorPosition: (position: number | null) => void;
-	}) => ReactNode;
-}
-
-interface VariableItem {
-	name: string;
-	source: string;
-}
-
-function VariablesPopover({
-	onVariableSelect,
-	variables,
-	children,
-}: VariablesPopoverProps): JSX.Element {
-	const [isOpen, setIsOpen] = useState(false);
-	const [cursorPosition, setCursorPosition] = useState<number | null>(null);
-	const anchorRef = useRef<HTMLDivElement>(null);
-
-	const handleOpenChange = (open: boolean): void => {
-		// Accept "close" events from the popover (outside-click, Esc) but ignore
-		// opens — opening is driven by the input's onFocus in the consumer.
-		if (!open) {
-			setIsOpen(false);
-		}
-	};
-
-	return (
-		<div className="variables-popover-container">
-			<Popover open={isOpen} onOpenChange={handleOpenChange} modal={false}>
-				<PopoverAnchor asChild>
-					<div className="variables-popover-anchor-wrap" ref={anchorRef}>
-						{children({
-							onVariableSelect,
-							isOpen,
-							setIsOpen,
-							cursorPosition,
-							setCursorPosition,
-						})}
-					</div>
-				</PopoverAnchor>
-				<PopoverContent
-					align="start"
-					sideOffset={4}
-					className="variables-popover-content"
-					onOpenAutoFocus={(e): void => e.preventDefault()}
-					onCloseAutoFocus={(e): void => e.preventDefault()}
-					onInteractOutside={(e): void => {
-						// Keep the popover open while interacting with the anchor (the input),
-						// otherwise typing/clicking the input would close it immediately.
-						const target = e.target as Node | null;
-						if (target && anchorRef.current?.contains(target)) {
-							e.preventDefault();
-						}
-					}}
-					onFocusOutside={(e): void => {
-						const target = e.target as Node | null;
-						if (target && anchorRef.current?.contains(target)) {
-							e.preventDefault();
-						}
-					}}
-				>
-					{variables.length === 0 ? (
-						<div className="variables-popover-empty">No variables available</div>
-					) : (
-						variables.map((v) => (
-							<button
-								key={v.name}
-								type="button"
-								className="variables-popover-item"
-								onMouseDown={(e): void => {
-									// Prevent the input from losing focus when clicking an item.
-									e.preventDefault();
-								}}
-								onClick={(): void => {
-									onVariableSelect(`{{${v.name}}}`, cursorPosition || undefined);
-									setIsOpen(false);
-								}}
-							>
-								<div className="variable-row">
-									<Typography.Text className="variable-name">{`{{${v.name}}}`}</Typography.Text>
-									<Typography.Text className="variable-source">
-										{v.source}
-									</Typography.Text>
-								</div>
-							</button>
-						))
-					)}
-				</PopoverContent>
-			</Popover>
-		</div>
-	);
-}
-
-export default VariablesPopover;

frontend/src/container/NewWidget/RightContainer/ContextLinks/utils.tsx

@@ -204,7 +204,7 @@ const processContextLinks = (
 };
 
 /**
- * Transforms context variables into the format expected by VariablesPopover
+ * Transforms context variables into the format expected by VariablesDropdown
  * @param variables - Array of context variables from useContextVariables
  * @returns Array of transformed variables with proper source descriptions
  */

frontend/src/container/NewWidget/RightContainer/Threshold/ColorSelector.tsx

@@ -1,7 +1,6 @@
 import { Dispatch, SetStateAction, useEffect, useState } from 'react';
 import { ChevronDown } from '@signozhq/icons';
-import { DropdownMenuSimple, type MenuItem } from '@signozhq/ui/dropdown-menu';
-import { Button, ColorPicker, Space } from 'antd';
+import { Button, ColorPicker, Dropdown, MenuProps, Space } from 'antd';
 import type { Color } from 'antd/es/color-picker';
 import useDebounce from 'hooks/useDebounce';
 
@@ -27,7 +26,7 @@ function ColorSelector({
 		setColorFromPicker(hex);
 	};
 
-	const items: MenuItem[] = [
+	const items: MenuProps['items'] = [
 		{
 			key: 'Red',
 			label: <CustomColor color="Red" />,
@@ -63,7 +62,7 @@ function ColorSelector({
 	];
 
 	return (
-		<DropdownMenuSimple menu={{ items }}>
+		<Dropdown menu={{ items }} trigger={['click']}>
 			<Button
 				onClick={(e): void => e.preventDefault()}
 				className="color-selector-button"
@@ -73,7 +72,7 @@ function ColorSelector({
 					<ChevronDown size="md" />
 				</Space>
 			</Button>
-		</DropdownMenuSimple>
+		</Dropdown>
 	);
 }
 

frontend/src/container/NewWidget/RightContainer/components/DisconnectValuesSelector/DisconnectValuesModeToggle.tsx

@@ -1,4 +1,4 @@
-import { ToggleGroupSimple } from '@signozhq/ui/toggle-group';
+import { ToggleGroup, ToggleGroupItem } from '@signozhq/ui/toggle-group';
 import { Typography } from '@signozhq/ui/typography';
 import { DisconnectedValuesMode } from 'lib/uPlotV2/config/types';
 
@@ -12,33 +12,27 @@ export default function DisconnectValuesModeToggle({
 	onChange,
 }: DisconnectValuesModeToggleProps): JSX.Element {
 	return (
-		<ToggleGroupSimple
+		<ToggleGroup
 			type="single"
 			value={value}
 			size="lg"
-			onChange={(newValue: string): void => {
+			onChange={(newValue): void => {
 				if (newValue) {
 					onChange(newValue as DisconnectedValuesMode);
 				}
 			}}
-			items={[
-				{
-					value: DisconnectedValuesMode.Never,
-					'aria-label': 'Never',
-					label: (
-						<Typography.Text className="section-heading-small">Never</Typography.Text>
-					),
-				},
-				{
-					value: DisconnectedValuesMode.Threshold,
-					'aria-label': 'Threshold',
-					label: (
-						<Typography.Text className="section-heading-small">
-							Threshold
-						</Typography.Text>
-					),
-				},
-			]}
-		/>
+		>
+			<ToggleGroupItem value={DisconnectedValuesMode.Never} aria-label="Never">
+				<Typography.Text className="section-heading-small">Never</Typography.Text>
+			</ToggleGroupItem>
+			<ToggleGroupItem
+				value={DisconnectedValuesMode.Threshold}
+				aria-label="Threshold"
+			>
+				<Typography.Text className="section-heading-small">
+					Threshold
+				</Typography.Text>
+			</ToggleGroupItem>
+		</ToggleGroup>
 	);
 }

frontend/src/container/NewWidget/RightContainer/components/FillModeSelector/FillModeSelector.tsx

@@ -1,4 +1,4 @@
-import { ToggleGroupSimple } from '@signozhq/ui/toggle-group';
+import { ToggleGroup, ToggleGroupItem } from '@signozhq/ui/toggle-group';
 import { Typography } from '@signozhq/ui/typography';
 import { FillMode } from 'lib/uPlotV2/config/types';
 
@@ -16,97 +16,74 @@ export default function FillModeSelector({
 	return (
 		<section className="fill-mode-selector control-container">
 			<Typography.Text className="section-heading">Fill mode</Typography.Text>
-			<ToggleGroupSimple
+			<ToggleGroup
 				type="single"
 				value={value}
 				size="lg"
-				onChange={(newValue: string): void => {
+				onChange={(newValue): void => {
 					if (newValue) {
 						onChange(newValue as FillMode);
 					}
 				}}
-				items={[
-					{
-						value: FillMode.None,
-						'aria-label': 'None',
-						label: (
-							<>
-								<svg
-									className="fill-mode-icon"
-									viewBox="0 0 48 48"
-									fill="none"
-									stroke="#888"
-									strokeWidth="2"
-									strokeLinecap="round"
-									strokeLinejoin="round"
-								>
-									<rect x="8" y="16" width="32" height="16" stroke="#888" fill="none" />
-								</svg>
-								<Typography.Text className="section-heading-small">
-									None
-								</Typography.Text>
-							</>
-						),
-					},
-					{
-						value: FillMode.Solid,
-						'aria-label': 'Solid',
-						label: (
-							<>
-								<svg
-									className="fill-mode-icon"
-									viewBox="0 0 48 48"
-									fill="none"
-									stroke="#888"
-									strokeWidth="2"
-									strokeLinecap="round"
-									strokeLinejoin="round"
-								>
-									<rect x="8" y="16" width="32" height="16" fill="#888" />
-								</svg>
-								<Typography.Text className="section-heading-small">
-									Solid
-								</Typography.Text>
-							</>
-						),
-					},
-					{
-						value: FillMode.Gradient,
-						'aria-label': 'Gradient',
-						label: (
-							<>
-								<svg
-									className="fill-mode-icon"
-									viewBox="0 0 48 48"
-									fill="none"
-									stroke="#888"
-									strokeWidth="2"
-									strokeLinecap="round"
-									strokeLinejoin="round"
-								>
-									<defs>
-										<linearGradient id="fill-gradient" x1="0" y1="0" x2="1" y2="0">
-											<stop offset="0%" stopColor="#888" stopOpacity="0.2" />
-											<stop offset="100%" stopColor="#888" stopOpacity="0.8" />
-										</linearGradient>
-									</defs>
-									<rect
-										x="8"
-										y="16"
-										width="32"
-										height="16"
-										fill="url(#fill-gradient)"
-										stroke="#888"
-									/>
-								</svg>
-								<Typography.Text className="section-heading-small">
-									Gradient
-								</Typography.Text>
-							</>
-						),
-					},
-				]}
-			/>
+			>
+				<ToggleGroupItem value={FillMode.None} aria-label="None">
+					<svg
+						className="fill-mode-icon"
+						viewBox="0 0 48 48"
+						fill="none"
+						stroke="#888"
+						strokeWidth="2"
+						strokeLinecap="round"
+						strokeLinejoin="round"
+					>
+						<rect x="8" y="16" width="32" height="16" stroke="#888" fill="none" />
+					</svg>
+					<Typography.Text className="section-heading-small">None</Typography.Text>
+				</ToggleGroupItem>
+				<ToggleGroupItem value={FillMode.Solid} aria-label="Solid">
+					<svg
+						className="fill-mode-icon"
+						viewBox="0 0 48 48"
+						fill="none"
+						stroke="#888"
+						strokeWidth="2"
+						strokeLinecap="round"
+						strokeLinejoin="round"
+					>
+						<rect x="8" y="16" width="32" height="16" fill="#888" />
+					</svg>
+					<Typography.Text className="section-heading-small">Solid</Typography.Text>
+				</ToggleGroupItem>
+				<ToggleGroupItem value={FillMode.Gradient} aria-label="Gradient">
+					<svg
+						className="fill-mode-icon"
+						viewBox="0 0 48 48"
+						fill="none"
+						stroke="#888"
+						strokeWidth="2"
+						strokeLinecap="round"
+						strokeLinejoin="round"
+					>
+						<defs>
+							<linearGradient id="fill-gradient" x1="0" y1="0" x2="1" y2="0">
+								<stop offset="0%" stopColor="#888" stopOpacity="0.2" />
+								<stop offset="100%" stopColor="#888" stopOpacity="0.8" />
+							</linearGradient>
+						</defs>
+						<rect
+							x="8"
+							y="16"
+							width="32"
+							height="16"
+							fill="url(#fill-gradient)"
+							stroke="#888"
+						/>
+					</svg>
+					<Typography.Text className="section-heading-small">
+						Gradient
+					</Typography.Text>
+				</ToggleGroupItem>
+			</ToggleGroup>
 		</section>
 	);
 }

frontend/src/container/NewWidget/RightContainer/components/LineInterpolationSelector/LineInterpolationSelector.tsx

@@ -1,4 +1,4 @@
-import { ToggleGroupSimple } from '@signozhq/ui/toggle-group';
+import { ToggleGroup, ToggleGroupItem } from '@signozhq/ui/toggle-group';
 import { Typography } from '@signozhq/ui/typography';
 import { LineInterpolation } from 'lib/uPlotV2/config/types';
 
@@ -18,98 +18,88 @@ export default function LineInterpolationSelector({
 			<Typography.Text className="section-heading">
 				Line interpolation
 			</Typography.Text>
-			<ToggleGroupSimple
+			<ToggleGroup
 				type="single"
 				value={value}
 				size="lg"
-				onChange={(newValue: string): void => {
+				onChange={(newValue): void => {
 					if (newValue) {
 						onChange(newValue as LineInterpolation);
 					}
 				}}
-				items={[
-					{
-						value: LineInterpolation.Linear,
-						'aria-label': 'Linear',
-						label: (
-							<svg
-								className="line-interpolation-icon"
-								viewBox="0 0 48 48"
-								fill="none"
-								stroke="#888"
-								strokeWidth="2"
-								strokeLinecap="round"
-								strokeLinejoin="round"
-							>
-								<circle cx="8" cy="32" r="3" fill="#888" />
-								<circle cx="24" cy="16" r="3" fill="#888" />
-								<circle cx="40" cy="32" r="3" fill="#888" />
-								<path d="M8 32 L24 16 L40 32" stroke="#888" />
-							</svg>
-						),
-					},
-					{
-						value: LineInterpolation.Spline,
-						'aria-label': 'Spline',
-						label: (
-							<svg
-								className="line-interpolation-icon"
-								viewBox="0 0 48 48"
-								fill="none"
-								stroke="#888"
-								strokeWidth="2"
-								strokeLinecap="round"
-								strokeLinejoin="round"
-							>
-								<circle cx="8" cy="32" r="3" fill="#888" />
-								<circle cx="24" cy="16" r="3" fill="#888" />
-								<circle cx="40" cy="32" r="3" fill="#888" />
-								<path d="M8 32 C16 8, 32 8, 40 32" />
-							</svg>
-						),
-					},
-					{
-						value: LineInterpolation.StepAfter,
-						'aria-label': 'Step After',
-						label: (
-							<svg
-								className="line-interpolation-icon"
-								viewBox="0 0 48 48"
-								fill="none"
-								stroke="#888"
-								strokeWidth="2"
-								strokeLinecap="round"
-								strokeLinejoin="round"
-							>
-								<circle cx="8" cy="32" r="3" fill="#888" />
-								<circle cx="24" cy="16" r="3" fill="#888" />
-								<circle cx="40" cy="32" r="3" fill="#888" />
-								<path d="M8 32 V16 H24 V32 H40" />
-							</svg>
-						),
-					},
-					{
-						value: LineInterpolation.StepBefore,
-						'aria-label': 'Step Before',
-						label: (
-							<svg
-								className="line-interpolation-icon"
-								viewBox="0 0 48 48"
-								fill="none"
-								stroke="#888"
-								strokeWidth="2"
-								strokeLinecap="round"
-								strokeLinejoin="round"
-							>
-								<circle cx="8" cy="32" r="3" fill="#888" />
-								<circle cx="24" cy="16" r="3" fill="#888" />
-								<circle cx="40" cy="32" r="3" fill="#888" />
-								<path d="M8 32 H24 V16 H40 V32" />
-							</svg>
-						),
-					},
-				]}
-			/>
+			>
+				<ToggleGroupItem value={LineInterpolation.Linear} aria-label="Linear">
+					<svg
+						className="line-interpolation-icon"
+						viewBox="0 0 48 48"
+						fill="none"
+						stroke="#888"
+						strokeWidth="2"
+						strokeLinecap="round"
+						strokeLinejoin="round"
+					>
+						<circle cx="8" cy="32" r="3" fill="#888" />
+						<circle cx="24" cy="16" r="3" fill="#888" />
+						<circle cx="40" cy="32" r="3" fill="#888" />
+						<path d="M8 32 L24 16 L40 32" stroke="#888" />
+					</svg>
+				</ToggleGroupItem>
+				<ToggleGroupItem value={LineInterpolation.Spline} aria-label="Spline">
+					<svg
+						className="line-interpolation-icon"
+						viewBox="0 0 48 48"
+						fill="none"
+						stroke="#888"
+						strokeWidth="2"
+						strokeLinecap="round"
+						strokeLinejoin="round"
+					>
+						<circle cx="8" cy="32" r="3" fill="#888" />
+						<circle cx="24" cy="16" r="3" fill="#888" />
+						<circle cx="40" cy="32" r="3" fill="#888" />
+						<path d="M8 32 C16 8, 32 8, 40 32" />
+					</svg>
+				</ToggleGroupItem>
+				<ToggleGroupItem
+					value={LineInterpolation.StepAfter}
+					aria-label="Step After"
+				>
+					<svg
+						className="line-interpolation-icon"
+						viewBox="0 0 48 48"
+						fill="none"
+						stroke="#888"
+						strokeWidth="2"
+						strokeLinecap="round"
+						strokeLinejoin="round"
+					>
+						<circle cx="8" cy="32" r="3" fill="#888" />
+						<circle cx="24" cy="16" r="3" fill="#888" />
+						<circle cx="40" cy="32" r="3" fill="#888" />
+						<path d="M8 32 V16 H24 V32 H40" />
+					</svg>
+				</ToggleGroupItem>
+
+				<ToggleGroupItem
+					value={LineInterpolation.StepBefore}
+					aria-label="Step Before"
+				>
+					<svg
+						className="line-interpolation-icon"
+						viewBox="0 0 48 48"
+						fill="none"
+						stroke="#888"
+						strokeWidth="2"
+						strokeLinecap="round"
+						strokeLinejoin="round"
+					>
+						<circle cx="8" cy="32" r="3" fill="#888" />
+						<circle cx="24" cy="16" r="3" fill="#888" />
+						<circle cx="40" cy="32" r="3" fill="#888" />
+						<path d="M8 32 H24 V16 H40 V32" />
+					</svg>
+				</ToggleGroupItem>
+			</ToggleGroup>
 		</section>
 	);
 }

frontend/src/container/NewWidget/RightContainer/components/LineStyleSelector/LineStyleSelector.tsx

@@ -1,4 +1,4 @@
-import { ToggleGroupSimple } from '@signozhq/ui/toggle-group';
+import { ToggleGroup, ToggleGroupItem } from '@signozhq/ui/toggle-group';
 import { Typography } from '@signozhq/ui/typography';
 import { LineStyle } from 'lib/uPlotV2/config/types';
 
@@ -16,63 +16,46 @@ export default function LineStyleSelector({
 	return (
 		<section className="line-style-selector control-container">
 			<Typography.Text className="section-heading">Line style</Typography.Text>
-			<ToggleGroupSimple
+			<ToggleGroup
 				type="single"
 				value={value}
 				size="lg"
-				onChange={(newValue: string): void => {
+				onChange={(newValue): void => {
 					if (newValue) {
 						onChange(newValue as LineStyle);
 					}
 				}}
-				items={[
-					{
-						value: LineStyle.Solid,
-						'aria-label': 'Solid',
-						label: (
-							<>
-								<svg
-									className="line-style-icon"
-									viewBox="0 0 48 48"
-									fill="none"
-									stroke="#888"
-									strokeWidth="2"
-									strokeLinecap="round"
-									strokeLinejoin="round"
-								>
-									<path d="M8 24 L40 24" />
-								</svg>
-								<Typography.Text className="section-heading-small">
-									Solid
-								</Typography.Text>
-							</>
-						),
-					},
-					{
-						value: LineStyle.Dashed,
-						'aria-label': 'Dashed',
-						label: (
-							<>
-								<svg
-									className="line-style-icon"
-									viewBox="0 0 48 48"
-									fill="none"
-									stroke="#888"
-									strokeWidth="2"
-									strokeLinecap="round"
-									strokeLinejoin="round"
-									strokeDasharray="6 4"
-								>
-									<path d="M8 24 L40 24" />
-								</svg>
-								<Typography.Text className="section-heading-small">
-									Dashed
-								</Typography.Text>
-							</>
-						),
-					},
-				]}
-			/>
+			>
+				<ToggleGroupItem value={LineStyle.Solid} aria-label="Solid">
+					<svg
+						className="line-style-icon"
+						viewBox="0 0 48 48"
+						fill="none"
+						stroke="#888"
+						strokeWidth="2"
+						strokeLinecap="round"
+						strokeLinejoin="round"
+					>
+						<path d="M8 24 L40 24" />
+					</svg>
+					<Typography.Text className="section-heading-small">Solid</Typography.Text>
+				</ToggleGroupItem>
+				<ToggleGroupItem value={LineStyle.Dashed} aria-label="Dashed">
+					<svg
+						className="line-style-icon"
+						viewBox="0 0 48 48"
+						fill="none"
+						stroke="#888"
+						strokeWidth="2"
+						strokeLinecap="round"
+						strokeLinejoin="round"
+						strokeDasharray="6 4"
+					>
+						<path d="M8 24 L40 24" />
+					</svg>
+					<Typography.Text className="section-heading-small">Dashed</Typography.Text>
+				</ToggleGroupItem>
+			</ToggleGroup>
 		</section>
 	);
 }

frontend/src/container/OnboardingContainer/Steps/SelectMethod/SelectMethod.tsx

@@ -1,6 +1,5 @@
 import { useState } from 'react';
-import { Space } from 'antd';
-import { RadioGroup, RadioGroupItem } from '@signozhq/ui/radio-group';
+import { Radio, RadioChangeEvent, Space } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import {
 	OnboardingMethods,
@@ -11,29 +10,29 @@ export default function SelectMethod(): JSX.Element {
 	const { selectedMethod, updateSelectedMethod } = useOnboardingContext();
 	const [value, setValue] = useState(selectedMethod);
 
-	const onChange = (next: string): void => {
-		setValue(next);
-		updateSelectedMethod(next);
+	const onChange = (e: RadioChangeEvent): void => {
+		setValue(e.target.value);
+		updateSelectedMethod(e.target.value);
 	};
 
 	return (
 		<div>
-			<RadioGroup onChange={onChange} value={value}>
+			<Radio.Group onChange={onChange} value={value}>
 				<Space direction="vertical">
-					<RadioGroupItem value={OnboardingMethods.QUICK_START}>
+					<Radio value={OnboardingMethods.QUICK_START}>
 						<Typography.Text> Quick Start </Typography.Text> <br />
 						<small>Send data to SigNoz directly from OpenTelemetry SDK.</small>
-					</RadioGroupItem>
+					</Radio>
 
-					<RadioGroupItem value={OnboardingMethods.RECOMMENDED_STEPS}>
+					<Radio value={OnboardingMethods.RECOMMENDED_STEPS}>
 						<Typography.Text> Use Recommended Steps </Typography.Text> <br />
 						<small>
 							Send data to SigNoz via OpenTelemetry Collector (better control on data
 							you send to SigNoz, collect host metrics & logs).
 						</small>
-					</RadioGroupItem>
+					</Radio>
 				</Space>
-			</RadioGroup>
+			</Radio.Group>
 		</div>
 	);
 }

frontend/src/container/OptionsMenu/FormatField/FormatField.styles.scss

@@ -1,9 +0,0 @@
-.format-field-toggle-group {
-	display: flex;
-	text-align: center;
-
-	> button {
-		font-size: 0.75rem;
-		flex: 1;
-	}
-}

frontend/src/container/OptionsMenu/FormatField/index.tsx

@@ -1,24 +1,21 @@
-import './FormatField.styles.scss';
-
 import { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
-import { ToggleGroupSimple } from '@signozhq/ui/toggle-group';
-import { LogViewMode } from 'container/LogsTable';
+import { RadioChangeEvent } from 'antd';
 
 import { FieldTitle } from '../styles';
 import { OptionsMenuConfig } from '../types';
-import { FormatFieldWrapper } from './styles';
+import { FormatFieldWrapper, RadioButton, RadioGroup } from './styles';
 
 function FormatField({ config }: FormatFieldProps): JSX.Element | null {
 	const { t } = useTranslation(['trace']);
 
 	const onChange = useCallback(
-		(value: string) => {
+		(event: RadioChangeEvent) => {
 			if (!config) {
 				return;
 			}
 
-			config.onChange(value as LogViewMode);
+			config.onChange(event.target.value);
 		},
 		[config],
 	);
@@ -30,18 +27,16 @@ function FormatField({ config }: FormatFieldProps): JSX.Element | null {
 	return (
 		<FormatFieldWrapper direction="vertical">
 			<FieldTitle>{t('options_menu.format')}</FieldTitle>
-			<ToggleGroupSimple
-				type="single"
-				size="sm"
+			<RadioGroup
+				size="small"
+				buttonStyle="solid"
 				value={config.value}
 				onChange={onChange}
-				className="format-field-toggle-group"
-				items={[
-					{ value: 'raw', label: t('options_menu.raw') },
-					{ value: 'list', label: t('options_menu.default') },
-					{ value: 'table', label: t('options_menu.column') },
-				]}
-			/>
+			>
+				<RadioButton value="raw">{t('options_menu.raw')}</RadioButton>
+				<RadioButton value="list">{t('options_menu.default')}</RadioButton>
+				<RadioButton value="table">{t('options_menu.column')}</RadioButton>
+			</RadioGroup>
 		</FormatFieldWrapper>
 	);
 }

frontend/src/container/OptionsMenu/FormatField/styles.ts

@@ -1,7 +1,17 @@
-import { Space } from 'antd';
+import { Radio, Space } from 'antd';
 import styled from 'styled-components';
 
 export const FormatFieldWrapper = styled(Space)`
 	width: 100%;
 	margin-bottom: 1.125rem;
 `;
+
+export const RadioGroup = styled(Radio.Group)`
+	display: flex;
+	text-align: center;
+`;
+
+export const RadioButton = styled(Radio.Button)`
+	font-size: 0.75rem;
+	flex: 1;
+`;

frontend/src/container/PipelinePage/PipelineListsView/TableComponents/PipelineActions/components/PreviewAction.tsx

@@ -1,7 +1,6 @@
 import { useState } from 'react';
 import { EyeOpen } from '@signozhq/icons';
-import { Modal } from 'antd';
-import { Divider } from '@signozhq/ui/divider';
+import { Divider, Modal } from 'antd';
 import logEvent from 'api/common/logEvent';
 import PipelineProcessingPreview from 'container/PipelinePage/PipelineListsView/Preview/PipelineProcessingPreview';
 import { PipelineData } from 'types/api/pipeline/def';

frontend/src/container/PlannedDowntime/PlannedDowntimeForm.tsx

@@ -8,6 +8,7 @@ import {
 	FormInstance,
 	Input,
 	Modal,
+	Radio,
 	Select,
 	SelectProps,
 	Spin,
@@ -54,8 +55,6 @@ import {
 } from './PlannedDowntimeutils';
 
 import './PlannedDowntime.styles.scss';
-import { RadioGroupItem } from '@signozhq/ui/radio-group';
-import { RadioGroup } from '@signozhq/ui/radio-group';
 
 dayjs.locale('en');
 dayjs.extend(utc);
@@ -471,10 +470,10 @@ export function PlannedDowntimeForm(
 						initialValue="specific"
 						className="alert-rule-scope"
 					>
-						<RadioGroup>
-							<RadioGroupItem value="all">All alert rules</RadioGroupItem>
-							<RadioGroupItem value="specific">Specific alert rules</RadioGroupItem>
-						</RadioGroup>
+						<Radio.Group>
+							<Radio value="all">All alert rules</Radio>
+							<Radio value="specific">Specific alert rules</Radio>
+						</Radio.Group>
 					</Form.Item>
 					{alertRuleScope === 'specific' && (
 						<>

frontend/src/container/QueryBuilder/components/Query/Query.interfaces.ts

@@ -0,0 +1,18 @@
+import { QueryBuilderProps } from 'container/QueryBuilder/QueryBuilder.interfaces';
+import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
+
+export type QueryProps = {
+	index: number;
+	isAvailableToDisable: boolean;
+	query: IBuilderQuery;
+	queryVariant?: 'static' | 'dropdown';
+	isListViewPanel?: boolean;
+	showFunctions?: boolean;
+	version: string;
+	showSpanScopeSelector?: boolean;
+	showOnlyWhereClause?: boolean;
+	showTraceOperator?: boolean;
+	hasTraceOperator?: boolean;
+	signalSource?: string;
+	isMultiQueryAllowed?: boolean;
+} & Pick<QueryBuilderProps, 'filterConfigs' | 'queryComponents'>;

frontend/src/container/QueryBuilder/components/Query/Query.styles.scss

@@ -0,0 +1,8 @@
+.qb-search-container {
+	display: block;
+	position: relative;
+}
+
+.qb-container {
+	padding: 0 24px;
+}

frontend/src/container/QueryBuilder/components/Query/Query.tsx

@@ -0,0 +1,628 @@
+/* eslint-disable sonarjs/cognitive-complexity */
+// ** Hooks
+import {
+	ChangeEvent,
+	memo,
+	ReactNode,
+	useCallback,
+	useMemo,
+	useState,
+} from 'react';
+import { useLocation } from 'react-use';
+import { Col, Input, Row, Tooltip } from 'antd';
+import { Typography } from '@signozhq/ui/typography';
+import { ENTITY_VERSION_V4 } from 'constants/app';
+// ** Constants
+import { ATTRIBUTE_TYPES, PANEL_TYPES } from 'constants/queryBuilder';
+import ROUTES from 'constants/routes';
+// ** Components
+import {
+	AdditionalFiltersToggler,
+	DataSourceDropdown,
+	FilterLabel,
+} from 'container/QueryBuilder/components';
+import {
+	AggregatorFilter,
+	GroupByFilter,
+	HavingFilter,
+	MetricNameSelector,
+	OperatorsSelect,
+	OrderByFilter,
+	ReduceToFilter,
+} from 'container/QueryBuilder/filters';
+import AggregateEveryFilter from 'container/QueryBuilder/filters/AggregateEveryFilter';
+import LimitFilter from 'container/QueryBuilder/filters/LimitFilter/LimitFilter';
+import QueryBuilderSearch from 'container/QueryBuilder/filters/QueryBuilderSearch';
+import QueryBuilderSearchV2 from 'container/QueryBuilder/filters/QueryBuilderSearchV2/QueryBuilderSearchV2';
+import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
+import { useQueryOperations } from 'hooks/queryBuilder/useQueryBuilderOperations';
+import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
+import { DataSource } from 'types/common/queryBuilder';
+import { transformToUpperCase } from 'utils/transformToUpperCase';
+
+import QBEntityOptions from '../QBEntityOptions/QBEntityOptions';
+import SpaceAggregationOptions from '../SpaceAggregationOptions/SpaceAggregationOptions';
+// ** Types
+import { QueryProps } from './Query.interfaces';
+
+import './Query.styles.scss';
+
+export const Query = memo(function Query({
+	index,
+	queryVariant,
+	query,
+	filterConfigs,
+	queryComponents,
+	isListViewPanel = false,
+	showFunctions = false,
+	version,
+}: QueryProps): JSX.Element {
+	const { panelType, currentQuery, cloneQuery } = useQueryBuilder();
+	const { pathname } = useLocation();
+
+	const [isCollapse, setIsCollapsed] = useState(false);
+
+	const {
+		operators,
+		spaceAggregationOptions,
+		isMetricsDataSource,
+		isTracePanelType,
+		listOfAdditionalFilters,
+		handleChangeAggregatorAttribute,
+		handleChangeQueryData,
+		handleChangeDataSource,
+		handleChangeOperator,
+		handleSpaceAggregationChange,
+		handleDeleteQuery,
+		handleQueryFunctionsUpdates,
+	} = useQueryOperations({
+		index,
+		query,
+		filterConfigs,
+		isListViewPanel,
+		entityVersion: version,
+	});
+
+	const handleChangeAggregateEvery = useCallback(
+		(value: IBuilderQuery['stepInterval']) => {
+			handleChangeQueryData('stepInterval', value);
+		},
+		[handleChangeQueryData],
+	);
+
+	const handleChangeLimit = useCallback(
+		(value: IBuilderQuery['limit']) => {
+			handleChangeQueryData('limit', value);
+		},
+		[handleChangeQueryData],
+	);
+
+	const handleChangeHavingFilter = useCallback(
+		(value: IBuilderQuery['having']) => {
+			handleChangeQueryData('having', value);
+		},
+		[handleChangeQueryData],
+	);
+
+	const handleChangeOrderByKeys = useCallback(
+		(value: IBuilderQuery['orderBy']) => {
+			handleChangeQueryData('orderBy', value);
+		},
+		[handleChangeQueryData],
+	);
+
+	const handleToggleDisableQuery = useCallback(() => {
+		handleChangeQueryData('disabled', !query.disabled);
+	}, [handleChangeQueryData, query]);
+
+	const handleChangeTagFilters = useCallback(
+		(value: IBuilderQuery['filters']) => {
+			handleChangeQueryData('filters', value);
+		},
+		[handleChangeQueryData],
+	);
+
+	const handleChangeReduceTo = useCallback(
+		(value: IBuilderQuery['reduceTo']) => {
+			handleChangeQueryData('reduceTo', value);
+		},
+		[handleChangeQueryData],
+	);
+
+	const handleChangeGroupByKeys = useCallback(
+		(value: IBuilderQuery['groupBy']) => {
+			handleChangeQueryData('groupBy', value);
+		},
+		[handleChangeQueryData],
+	);
+
+	const handleChangeQueryLegend = useCallback(
+		(event: ChangeEvent<HTMLInputElement>) => {
+			handleChangeQueryData('legend', event.target.value);
+		},
+		[handleChangeQueryData],
+	);
+
+	const handleToggleCollapsQuery = (): void => {
+		setIsCollapsed(!isCollapse);
+	};
+
+	const renderOrderByFilter = useCallback((): ReactNode => {
+		if (queryComponents?.renderOrderBy) {
+			return queryComponents.renderOrderBy({
+				query,
+				onChange: handleChangeOrderByKeys,
+			});
+		}
+
+		return (
+			<OrderByFilter
+				entityVersion={version}
+				query={query}
+				onChange={handleChangeOrderByKeys}
+				isListViewPanel={isListViewPanel}
+			/>
+		);
+	}, [
+		queryComponents,
+		query,
+		version,
+		handleChangeOrderByKeys,
+		isListViewPanel,
+	]);
+
+	const renderAggregateEveryFilter = useCallback(
+		(): JSX.Element | null =>
+			!filterConfigs?.stepInterval?.isHidden ? (
+				<Row gutter={[11, 5]}>
+					<Col flex="5.93rem">
+						<FilterLabel label="Aggregate Every" />
+					</Col>
+					<Col flex="1 1 6rem">
+						<AggregateEveryFilter
+							query={query}
+							disabled={filterConfigs?.stepInterval?.isDisabled || false}
+							onChange={handleChangeAggregateEvery}
+						/>
+					</Col>
+				</Row>
+			) : null,
+		[
+			filterConfigs?.stepInterval?.isHidden,
+			filterConfigs?.stepInterval?.isDisabled,
+			query,
+			handleChangeAggregateEvery,
+		],
+	);
+
+	const isExplorerPage = useMemo(
+		() =>
+			pathname === ROUTES.LOGS_EXPLORER || pathname === ROUTES.TRACES_EXPLORER,
+		[pathname],
+	);
+
+	const renderAdditionalFilters = useCallback((): ReactNode => {
+		switch (panelType) {
+			case PANEL_TYPES.TIME_SERIES: {
+				return (
+					<>
+						<Col span={11}>
+							<Row gutter={[11, 5]}>
+								<Col flex="5.93rem">
+									<FilterLabel label="Limit" />
+								</Col>
+								<Col flex="1 1 12.5rem">
+									<LimitFilter query={query} onChange={handleChangeLimit} />
+								</Col>
+							</Row>
+						</Col>
+						<Col span={24}>
+							<Row gutter={[11, 5]}>
+								<Col flex="5.93rem">
+									<FilterLabel label="HAVING" />
+								</Col>
+								<Col flex="1 1 12.5rem">
+									<HavingFilter
+										entityVersion={version}
+										onChange={handleChangeHavingFilter}
+										query={query}
+									/>
+								</Col>
+							</Row>
+						</Col>
+						<Col span={11}>
+							<Row gutter={[11, 5]}>
+								<Col flex="5.93rem">
+									<FilterLabel label="Order by" />
+								</Col>
+								<Col flex="1 1 12.5rem">{renderOrderByFilter()}</Col>
+							</Row>
+						</Col>
+
+						<Col span={11}>{renderAggregateEveryFilter()}</Col>
+					</>
+				);
+			}
+
+			case PANEL_TYPES.VALUE: {
+				return (
+					<>
+						<Col span={11}>
+							<Row gutter={[11, 5]}>
+								<Col flex="5.93rem">
+									<FilterLabel label="HAVING" />
+								</Col>
+								<Col flex="1 1 12.5rem">
+									<HavingFilter
+										onChange={handleChangeHavingFilter}
+										entityVersion={version}
+										query={query}
+									/>
+								</Col>
+							</Row>
+						</Col>
+						<Col span={11}>{renderAggregateEveryFilter()}</Col>
+					</>
+				);
+			}
+
+			default: {
+				return (
+					<>
+						{!filterConfigs?.limit?.isHidden && (
+							<Col span={11}>
+								<Row gutter={[11, 5]}>
+									<Col flex="5.93rem">
+										<FilterLabel label="Limit" />
+									</Col>
+									<Col flex="1 1 12.5rem">
+										<LimitFilter query={query} onChange={handleChangeLimit} />
+									</Col>
+								</Row>
+							</Col>
+						)}
+
+						{!filterConfigs?.having?.isHidden && (
+							<Col span={11}>
+								<Row gutter={[11, 5]}>
+									<Col flex="5.93rem">
+										<FilterLabel label="HAVING" />
+									</Col>
+									<Col flex="1 1 12.5rem">
+										<HavingFilter
+											entityVersion={version}
+											onChange={handleChangeHavingFilter}
+											query={query}
+										/>
+									</Col>
+								</Row>
+							</Col>
+						)}
+						<Col span={11}>
+							<Row gutter={[11, 5]}>
+								<Col flex="5.93rem">
+									<FilterLabel label="Order by" />
+								</Col>
+								<Col flex="1 1 12.5rem">{renderOrderByFilter()}</Col>
+							</Row>
+						</Col>
+
+						<Col span={11}>{renderAggregateEveryFilter()}</Col>
+					</>
+				);
+			}
+		}
+	}, [
+		panelType,
+		query,
+		handleChangeLimit,
+		version,
+		handleChangeHavingFilter,
+		renderOrderByFilter,
+		renderAggregateEveryFilter,
+		filterConfigs?.limit?.isHidden,
+		filterConfigs?.having?.isHidden,
+	]);
+
+	const disableOperatorSelector =
+		!query?.aggregateAttribute?.key || query?.aggregateAttribute?.key === '';
+
+	const isVersionV4 = version && version === ENTITY_VERSION_V4;
+
+	return (
+		<Row gutter={[0, 12]} className={`query-builder-${version}`}>
+			<QBEntityOptions
+				isMetricsDataSource={isMetricsDataSource}
+				showFunctions={
+					(version && version === ENTITY_VERSION_V4) ||
+					query.dataSource === DataSource.LOGS ||
+					showFunctions ||
+					false
+				}
+				isCollapsed={isCollapse}
+				entityType="query"
+				entityData={query}
+				onToggleVisibility={handleToggleDisableQuery}
+				onDelete={handleDeleteQuery}
+				onCloneQuery={cloneQuery}
+				onCollapseEntity={handleToggleCollapsQuery}
+				query={query}
+				onQueryFunctionsUpdates={handleQueryFunctionsUpdates}
+				showDeleteButton={currentQuery.builder.queryData.length > 1}
+				isListViewPanel={isListViewPanel}
+				index={index}
+				queryVariant={queryVariant}
+			/>
+
+			{!isCollapse && (
+				<Row gutter={[0, 12]} className="qb-container">
+					<Col span={24}>
+						<Row align="middle" gutter={[5, 11]}>
+							{!isExplorerPage && (
+								<Col>
+									{queryVariant === 'dropdown' ? (
+										<DataSourceDropdown
+											onChange={handleChangeDataSource}
+											value={query.dataSource}
+											style={{ minWidth: '5.625rem' }}
+											isListViewPanel={isListViewPanel}
+										/>
+									) : (
+										<FilterLabel label={transformToUpperCase(query.dataSource)} />
+									)}
+								</Col>
+							)}
+
+							{isMetricsDataSource && (
+								<Col span={12}>
+									<Row gutter={[11, 5]}>
+										{version && version === 'v3' && (
+											<Col flex="5.93rem">
+												<Tooltip
+													title={
+														<div style={{ textAlign: 'center' }}>
+															Select Aggregate Operator
+															<Typography.Link
+																className="learn-more"
+																href="https://signoz.io/docs/userguide/query-builder/?utm_source=product&utm_medium=query-builder#aggregation"
+																target="_blank"
+																style={{ textDecoration: 'underline' }}
+															>
+																{' '}
+																<br />
+																Learn more
+															</Typography.Link>
+														</div>
+													}
+												>
+													<OperatorsSelect
+														value={query.aggregateOperator || ''}
+														onChange={handleChangeOperator}
+														operators={operators}
+													/>
+												</Tooltip>
+											</Col>
+										)}
+
+										<Col flex="auto">
+											<MetricNameSelector
+												onChange={handleChangeAggregatorAttribute}
+												query={query}
+											/>
+										</Col>
+
+										{version &&
+											version === ENTITY_VERSION_V4 &&
+											operators &&
+											Array.isArray(operators) &&
+											operators.length > 0 && (
+												<Col flex="5.93rem">
+													<Tooltip
+														title={
+															<div style={{ textAlign: 'center' }}>
+																Select Aggregate Operator
+																<Typography.Link
+																	className="learn-more"
+																	href="https://signoz.io/docs/metrics-management/types-and-aggregation/?utm_source=product&utm_medium=query-builder#aggregation"
+																	target="_blank"
+																	style={{ textDecoration: 'underline' }}
+																>
+																	{' '}
+																	<br />
+																	Learn more
+																</Typography.Link>
+															</div>
+														}
+													>
+														<OperatorsSelect
+															value={query.aggregateOperator || ''}
+															onChange={handleChangeOperator}
+															operators={operators}
+															disabled={disableOperatorSelector}
+														/>
+													</Tooltip>
+												</Col>
+											)}
+									</Row>
+								</Col>
+							)}
+
+							<Col flex="1 1 40rem">
+								<Row gutter={[11, 5]}>
+									{isMetricsDataSource && (
+										<Col>
+											<FilterLabel label="WHERE" />
+										</Col>
+									)}
+									<Col flex="1" className="qb-search-container">
+										{[DataSource.LOGS, DataSource.TRACES].includes(query.dataSource) ? (
+											<QueryBuilderSearchV2
+												query={query}
+												onChange={handleChangeTagFilters}
+												whereClauseConfig={filterConfigs?.filters}
+												hideSpanScopeSelector={query.dataSource !== DataSource.TRACES}
+											/>
+										) : (
+											<QueryBuilderSearch
+												query={query}
+												onChange={handleChangeTagFilters}
+												whereClauseConfig={filterConfigs?.filters}
+											/>
+										)}
+									</Col>
+								</Row>
+							</Col>
+						</Row>
+					</Col>
+					{!isMetricsDataSource && !isListViewPanel && (
+						<Col span={11}>
+							<Row gutter={[11, 5]}>
+								<Col flex="5.93rem">
+									<Tooltip
+										title={
+											<div style={{ textAlign: 'center' }}>
+												Select Aggregate Operator
+												<Typography.Link
+													href="https://signoz.io/docs/userguide/query-builder/?utm_source=product&utm_medium=query-builder#aggregation"
+													target="_blank"
+													style={{ textDecoration: 'underline' }}
+												>
+													{' '}
+													<br />
+													Learn more
+												</Typography.Link>
+											</div>
+										}
+									>
+										<OperatorsSelect
+											value={query.aggregateOperator || ''}
+											onChange={handleChangeOperator}
+											operators={operators}
+										/>
+									</Tooltip>
+								</Col>
+								<Col flex="1 1 12.5rem">
+									<AggregatorFilter
+										query={query}
+										onChange={handleChangeAggregatorAttribute}
+										disabled={
+											panelType === PANEL_TYPES.LIST || panelType === PANEL_TYPES.TRACE
+										}
+									/>
+								</Col>
+							</Row>
+						</Col>
+					)}
+					{!isListViewPanel && (
+						<Col span={24}>
+							<Row gutter={[11, 5]}>
+								<Col flex="5.93rem">
+									{isVersionV4 && isMetricsDataSource ? (
+										<SpaceAggregationOptions
+											panelType={panelType}
+											key={`${panelType}${query.spaceAggregation}${query.timeAggregation}`}
+											aggregatorAttributeType={
+												query?.aggregateAttribute?.type as ATTRIBUTE_TYPES
+											}
+											selectedValue={query.spaceAggregation}
+											disabled={disableOperatorSelector}
+											onSelect={handleSpaceAggregationChange}
+											operators={spaceAggregationOptions}
+										/>
+									) : (
+										<FilterLabel
+											label={panelType === PANEL_TYPES.VALUE ? 'Reduce to' : 'Group by'}
+										/>
+									)}
+								</Col>
+
+								<Col flex="1 1 12.5rem">
+									{panelType === PANEL_TYPES.VALUE ? (
+										<Row>
+											{isVersionV4 && isMetricsDataSource && (
+												<Col span={4}>
+													<FilterLabel label="Reduce to" />
+												</Col>
+											)}
+											<Col span={isVersionV4 && isMetricsDataSource ? 20 : 24}>
+												<ReduceToFilter query={query} onChange={handleChangeReduceTo} />
+											</Col>
+										</Row>
+									) : (
+										<GroupByFilter
+											disabled={isMetricsDataSource && !query.aggregateAttribute?.key}
+											query={query}
+											onChange={handleChangeGroupByKeys}
+										/>
+									)}
+								</Col>
+
+								{isVersionV4 &&
+									isMetricsDataSource &&
+									(panelType === PANEL_TYPES.TABLE || panelType === PANEL_TYPES.PIE) && (
+										<Col flex="1 1 12.5rem">
+											<Row>
+												<Col span={6}>
+													<FilterLabel label="Reduce to" />
+												</Col>
+
+												<Col span={18}>
+													<ReduceToFilter query={query} onChange={handleChangeReduceTo} />
+												</Col>
+											</Row>
+										</Col>
+									)}
+							</Row>
+						</Col>
+					)}
+					{!isTracePanelType && !isListViewPanel && (
+						<Col span={24}>
+							<AdditionalFiltersToggler
+								listOfAdditionalFilter={listOfAdditionalFilters}
+							>
+								<Row gutter={[0, 11]} justify="space-between">
+									{renderAdditionalFilters()}
+								</Row>
+							</AdditionalFiltersToggler>
+						</Col>
+					)}
+					{isListViewPanel && (
+						<Col span={24}>
+							<Row gutter={[0, 11]} justify="space-between">
+								{renderAdditionalFilters()}
+							</Row>
+						</Col>
+					)}
+					{panelType !== PANEL_TYPES.LIST && panelType !== PANEL_TYPES.TRACE && (
+						<Row style={{ width: '100%' }}>
+							<Tooltip
+								placement="right"
+								title={
+									<div style={{ textAlign: 'center' }}>
+										Name of legend
+										<Typography.Link
+											style={{ textDecoration: 'underline' }}
+											href="https://signoz.io/docs/userguide/query-builder/?utm_source=product&utm_medium=query-builder#legend-format"
+											target="_blank"
+										>
+											{' '}
+											<br />
+											Learn more
+										</Typography.Link>
+									</div>
+								}
+							>
+								<Input
+									onChange={handleChangeQueryLegend}
+									size="middle"
+									value={query.legend}
+									addonBefore="Legend Format"
+								/>
+							</Tooltip>
+						</Row>
+					)}
+				</Row>
+			)}
+		</Row>
+	);
+});

frontend/src/container/QueryBuilder/components/Query/index.ts

@@ -0,0 +1 @@
+export { Query } from './Query';

frontend/src/container/QueryBuilder/components/index.ts

@@ -5,3 +5,4 @@ export { Formula } from './Formula';
 export { HavingFilterTag } from './HavingFilterTag';
 export { ListItemWrapper } from './ListItemWrapper';
 export { ListMarker } from './ListMarker';
+export { Query } from './Query';

frontend/src/container/QueryBuilder/type.ts

@@ -1,6 +1,4 @@
 import { IQueryBuilderState } from 'constants/queryBuilder';
-import { QueryBuilderProps } from 'container/QueryBuilder/QueryBuilder.interfaces';
-import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
 
 export interface InitialStateI {
 	search: string;
@@ -20,19 +18,3 @@ export type Option = {
 	isIndexed?: boolean;
 	type?: string;
 };
-
-export type QueryProps = {
-	index: number;
-	isAvailableToDisable: boolean;
-	query: IBuilderQuery;
-	queryVariant?: 'static' | 'dropdown';
-	isListViewPanel?: boolean;
-	showFunctions?: boolean;
-	version: string;
-	showSpanScopeSelector?: boolean;
-	showOnlyWhereClause?: boolean;
-	showTraceOperator?: boolean;
-	hasTraceOperator?: boolean;
-	signalSource?: string;
-	isMultiQueryAllowed?: boolean;
-} & Pick<QueryBuilderProps, 'filterConfigs' | 'queryComponents'>;