Merge branch 'main' into issue-5535

* refactor(authz): drop create guarded route component

* refactor(authz): drop guarded authz component

* refactor(authz): support list of permissions on denied callout

* refactor(authz): support list of permissions on denied page

* feat(authz): add guard authz button

* feat(authz): add guard authz with page/content variants

* feat(authz): add withAuthZ HOC component to guard pages/components

* feat(authz): add docs for authz + agents update

.github/workflows/integrationci.yaml

@@ -56,6 +56,8 @@ jobs:
           - querier_json_body
           - querier_skip_resource_fingerprint
           - ttl
+          - clickhousecluster
+          - metricreduction
         sqlstore-provider:
           - postgres
           - sqlite

docs/api/openapi.yml

@@ -515,6 +515,13 @@ components:
         url:
           type: string
       type: object
+    AuthtypesDeprecatedPostableUserRole:
+      properties:
+        id:
+          type: string
+      required:
+      - id
+      type: object
     AuthtypesGettableAuthDomain:
       properties:
         authNProviderInfo:
@@ -660,17 +667,20 @@ components:
           type: string
         userRoles:
           items:
-            $ref: '#/components/schemas/AuthtypesPostableUserRole'
+            $ref: '#/components/schemas/AuthtypesDeprecatedPostableUserRole'
           type: array
       required:
       - email
       type: object
     AuthtypesPostableUserRole:
       properties:
-        id:
+        roleId:
+          type: string
+        userId:
           type: string
       required:
-      - id
+      - userId
+      - roleId
       type: object
     AuthtypesRelation:
       enum:
@@ -7430,6 +7440,13 @@ components:
       enum:
       - basic
       type: string
+    ServiceaccounttypesDeprecatedPostableServiceAccountRole:
+      properties:
+        id:
+          type: string
+      required:
+      - id
+      type: object
     ServiceaccounttypesGettableFactorAPIKey:
       properties:
         createdAt:
@@ -7486,10 +7503,13 @@ components:
       type: object
     ServiceaccounttypesPostableServiceAccountRole:
       properties:
-        id:
+        roleId:
+          type: string
+        serviceAccountId:
           type: string
       required:
-      - id
+      - serviceAccountId
+      - roleId
       type: object
     ServiceaccounttypesServiceAccount:
       properties:
@@ -12252,6 +12272,188 @@ paths:
       summary: Update route policy
       tags:
       - routepolicies
+  /api/v1/service_account_roles:
+    post:
+      deprecated: false
+      description: This endpoint assigns a role to a service account
+      operationId: CreateServiceAccountRole
+      requestBody:
+        content:
+          application/json:
+            schema:
+              $ref: '#/components/schemas/ServiceaccounttypesPostableServiceAccountRole'
+      responses:
+        "201":
+          content:
+            application/json:
+              schema:
+                properties:
+                  data:
+                    $ref: '#/components/schemas/TypesIdentifiable'
+                  status:
+                    type: string
+                required:
+                - status
+                - data
+                type: object
+          description: Created
+        "400":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Bad Request
+        "401":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Unauthorized
+        "403":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Forbidden
+        "404":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Not Found
+        "500":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Internal Server Error
+      security:
+      - api_key:
+        - serviceaccount:attach
+        - role:attach
+      - tokenizer:
+        - serviceaccount:attach
+        - role:attach
+      summary: Create service account role
+      tags:
+      - serviceaccount
+  /api/v1/service_account_roles/{id}:
+    delete:
+      deprecated: false
+      description: This endpoint revokes a role from a service account
+      operationId: DeleteServiceAccountRole
+      parameters:
+      - in: path
+        name: id
+        required: true
+        schema:
+          type: string
+      responses:
+        "204":
+          description: No Content
+        "400":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Bad Request
+        "401":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Unauthorized
+        "403":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Forbidden
+        "404":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Not Found
+        "500":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Internal Server Error
+      security:
+      - api_key:
+        - serviceaccount:detach
+        - role:detach
+      - tokenizer:
+        - serviceaccount:detach
+        - role:detach
+      summary: Delete service account role
+      tags:
+      - serviceaccount
+    get:
+      deprecated: false
+      description: This endpoint gets an existing service account role
+      operationId: GetServiceAccountRole
+      parameters:
+      - in: path
+        name: id
+        required: true
+        schema:
+          type: string
+      responses:
+        "200":
+          content:
+            application/json:
+              schema:
+                properties:
+                  data:
+                    $ref: '#/components/schemas/ServiceaccounttypesServiceAccountRole'
+                  status:
+                    type: string
+                required:
+                - status
+                - data
+                type: object
+          description: OK
+        "400":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Bad Request
+        "401":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Unauthorized
+        "403":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Forbidden
+        "404":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Not Found
+        "500":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Internal Server Error
+      security:
+      - api_key:
+        - serviceaccount:read
+      - tokenizer:
+        - serviceaccount:read
+      summary: Get service account role
+      tags:
+      - serviceaccount
   /api/v1/service_accounts:
     get:
       deprecated: false
@@ -12821,9 +13023,9 @@ paths:
       tags:
       - serviceaccount
     post:
-      deprecated: false
+      deprecated: true
       description: This endpoint assigns a role to a service account
-      operationId: CreateServiceAccountRole
+      operationId: CreateServiceAccountRoleDeprecated
       parameters:
       - in: path
         name: id
@@ -12834,7 +13036,7 @@ paths:
         content:
           application/json:
             schema:
-              $ref: '#/components/schemas/ServiceaccounttypesPostableServiceAccountRole'
+              $ref: '#/components/schemas/ServiceaccounttypesDeprecatedPostableServiceAccountRole'
       responses:
         "201":
           content:
@@ -12886,9 +13088,9 @@ paths:
       - serviceaccount
   /api/v1/service_accounts/{id}/roles/{rid}:
     delete:
-      deprecated: false
+      deprecated: true
       description: This endpoint revokes a role from service account
-      operationId: DeleteServiceAccountRole
+      operationId: DeleteServiceAccountRoleDeprecated
       parameters:
       - in: path
         name: id
@@ -21990,6 +22192,184 @@ paths:
       summary: Rotate session
       tags:
       - sessions
+  /api/v2/user_roles:
+    post:
+      deprecated: false
+      description: This endpoint assigns a role to a user
+      operationId: CreateUserRole
+      requestBody:
+        content:
+          application/json:
+            schema:
+              $ref: '#/components/schemas/AuthtypesPostableUserRole'
+      responses:
+        "201":
+          content:
+            application/json:
+              schema:
+                properties:
+                  data:
+                    $ref: '#/components/schemas/TypesIdentifiable'
+                  status:
+                    type: string
+                required:
+                - status
+                - data
+                type: object
+          description: Created
+        "400":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Bad Request
+        "401":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Unauthorized
+        "403":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Forbidden
+        "404":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Not Found
+        "500":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Internal Server Error
+      security:
+      - api_key:
+        - ADMIN
+      - tokenizer:
+        - ADMIN
+      summary: Create user role
+      tags:
+      - users
+  /api/v2/user_roles/{id}:
+    delete:
+      deprecated: false
+      description: This endpoint revokes a role from a user
+      operationId: DeleteUserRole
+      parameters:
+      - in: path
+        name: id
+        required: true
+        schema:
+          type: string
+      responses:
+        "204":
+          description: No Content
+        "400":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Bad Request
+        "401":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Unauthorized
+        "403":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Forbidden
+        "404":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Not Found
+        "500":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Internal Server Error
+      security:
+      - api_key:
+        - ADMIN
+      - tokenizer:
+        - ADMIN
+      summary: Delete user role
+      tags:
+      - users
+    get:
+      deprecated: false
+      description: This endpoint gets an existing user role
+      operationId: GetUserRole
+      parameters:
+      - in: path
+        name: id
+        required: true
+        schema:
+          type: string
+      responses:
+        "200":
+          content:
+            application/json:
+              schema:
+                properties:
+                  data:
+                    $ref: '#/components/schemas/AuthtypesUserRole'
+                  status:
+                    type: string
+                required:
+                - status
+                - data
+                type: object
+          description: OK
+        "400":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Bad Request
+        "401":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Unauthorized
+        "403":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Forbidden
+        "404":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Not Found
+        "500":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Internal Server Error
+      security:
+      - api_key:
+        - ADMIN
+      - tokenizer:
+        - ADMIN
+      summary: Get user role
+      tags:
+      - users
   /api/v2/users:
     get:
       deprecated: false
@@ -22443,7 +22823,7 @@ paths:
       tags:
       - users
     post:
-      deprecated: false
+      deprecated: true
       description: This endpoint assigns the role to the user roles by user id
       operationId: SetRoleByUserID
       parameters:
@@ -22494,7 +22874,7 @@ paths:
       - users
   /api/v2/users/{id}/roles/{roleId}:
     delete:
-      deprecated: false
+      deprecated: true
       description: This endpoint removes a role from the user by user id and role
         id
       operationId: RemoveUserRoleByUserIDAndRoleID

ee/modules/cloudintegration/implcloudintegration/module.go

@@ -519,7 +519,7 @@ func (module *module) getOrCreateAPIKey(ctx context.Context, orgID valuer.UUID,
 	if err != nil {
 		return "", err
 	}
-	err = module.serviceAccount.SetRoleByName(ctx, orgID, serviceAccount.ID, authtypes.SigNozViewerRoleName)
+	_, err = module.serviceAccount.SetRoleByName(ctx, orgID, serviceAccount.ID, authtypes.SigNozViewerRoleName)
 	if err != nil {
 		return "", err
 	}

ee/query-service/app/api/cloudIntegrations.go

@@ -141,7 +141,7 @@ func (ah *APIHandler) getOrCreateCloudIntegrationServiceAccount(ctx context.Cont
 	if err != nil {
 		return nil, basemodel.InternalError(fmt.Errorf("couldn't create cloud integration service account: %w", err))
 	}
-	err = ah.Signoz.Modules.ServiceAccount.SetRoleByName(ctx, orgId, cloudIntegrationServiceAccount.ID, authtypes.SigNozViewerRoleName)
+	_, err = ah.Signoz.Modules.ServiceAccount.SetRoleByName(ctx, orgId, cloudIntegrationServiceAccount.ID, authtypes.SigNozViewerRoleName)
 	if err != nil {
 		return nil, basemodel.InternalError(fmt.Errorf("couldn't create cloud integration service account: %w", err))
 	}

frontend/AGENTS.md

@@ -25,6 +25,7 @@ You are operating within a constrained context window and strict system prompts.
 - Never create barrel files.
 - When writing new css, prefer CSS Modules
   - Use ./docs/css-modules-guide.md as reference on how to write good CSS Modules.
+- When writing code that could need authorization checks, read ./src/lib/authz/README.md
 
 3. FORCED VERIFICATION: Your internal tools mark file writes as successful even if the code does not compile. You are FORBIDDEN from reporting a task as complete until you have:
 - Run `pnpm tsgo --noEmit`

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

@@ -22,12 +22,16 @@ import type {
 	CreateServiceAccountKey201,
 	CreateServiceAccountKeyPathParameters,
 	CreateServiceAccountRole201,
-	CreateServiceAccountRolePathParameters,
+	CreateServiceAccountRoleDeprecated201,
+	CreateServiceAccountRoleDeprecatedPathParameters,
 	DeleteServiceAccountPathParameters,
+	DeleteServiceAccountRoleDeprecatedPathParameters,
 	DeleteServiceAccountRolePathParameters,
 	GetMyServiceAccount200,
 	GetServiceAccount200,
 	GetServiceAccountPathParameters,
+	GetServiceAccountRole200,
+	GetServiceAccountRolePathParameters,
 	GetServiceAccountRoles200,
 	GetServiceAccountRolesPathParameters,
 	ListServiceAccountKeys200,
@@ -35,6 +39,7 @@ import type {
 	ListServiceAccounts200,
 	RenderErrorResponseDTO,
 	RevokeServiceAccountKeyPathParameters,
+	ServiceaccounttypesDeprecatedPostableServiceAccountRoleDTO,
 	ServiceaccounttypesPostableFactorAPIKeyDTO,
 	ServiceaccounttypesPostableServiceAccountDTO,
 	ServiceaccounttypesPostableServiceAccountRoleDTO,
@@ -46,6 +51,272 @@ import type {
 import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
 import type { ErrorType, BodyType } from '../../../generatedAPIInstance';
 
+/**
+ * This endpoint assigns a role to a service account
+ * @summary Create service account role
+ */
+export const createServiceAccountRole = (
+	serviceaccounttypesPostableServiceAccountRoleDTO?: BodyType<ServiceaccounttypesPostableServiceAccountRoleDTO>,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<CreateServiceAccountRole201>({
+		url: `/api/v1/service_account_roles`,
+		method: 'POST',
+		headers: { 'Content-Type': 'application/json' },
+		data: serviceaccounttypesPostableServiceAccountRoleDTO,
+		signal,
+	});
+};
+
+export const getCreateServiceAccountRoleMutationOptions = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof createServiceAccountRole>>,
+		TError,
+		{ data?: BodyType<ServiceaccounttypesPostableServiceAccountRoleDTO> },
+		TContext
+	>;
+}): UseMutationOptions<
+	Awaited<ReturnType<typeof createServiceAccountRole>>,
+	TError,
+	{ data?: BodyType<ServiceaccounttypesPostableServiceAccountRoleDTO> },
+	TContext
+> => {
+	const mutationKey = ['createServiceAccountRole'];
+	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 createServiceAccountRole>>,
+		{ data?: BodyType<ServiceaccounttypesPostableServiceAccountRoleDTO> }
+	> = (props) => {
+		const { data } = props ?? {};
+
+		return createServiceAccountRole(data);
+	};
+
+	return { mutationFn, ...mutationOptions };
+};
+
+export type CreateServiceAccountRoleMutationResult = NonNullable<
+	Awaited<ReturnType<typeof createServiceAccountRole>>
+>;
+export type CreateServiceAccountRoleMutationBody =
+	| BodyType<ServiceaccounttypesPostableServiceAccountRoleDTO>
+	| undefined;
+export type CreateServiceAccountRoleMutationError =
+	ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary Create service account role
+ */
+export const useCreateServiceAccountRole = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof createServiceAccountRole>>,
+		TError,
+		{ data?: BodyType<ServiceaccounttypesPostableServiceAccountRoleDTO> },
+		TContext
+	>;
+}): UseMutationResult<
+	Awaited<ReturnType<typeof createServiceAccountRole>>,
+	TError,
+	{ data?: BodyType<ServiceaccounttypesPostableServiceAccountRoleDTO> },
+	TContext
+> => {
+	return useMutation(getCreateServiceAccountRoleMutationOptions(options));
+};
+/**
+ * This endpoint revokes a role from a service account
+ * @summary Delete service account role
+ */
+export const deleteServiceAccountRole = (
+	{ id }: DeleteServiceAccountRolePathParameters,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<void>({
+		url: `/api/v1/service_account_roles/${id}`,
+		method: 'DELETE',
+		signal,
+	});
+};
+
+export const getDeleteServiceAccountRoleMutationOptions = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof deleteServiceAccountRole>>,
+		TError,
+		{ pathParams: DeleteServiceAccountRolePathParameters },
+		TContext
+	>;
+}): UseMutationOptions<
+	Awaited<ReturnType<typeof deleteServiceAccountRole>>,
+	TError,
+	{ pathParams: DeleteServiceAccountRolePathParameters },
+	TContext
+> => {
+	const mutationKey = ['deleteServiceAccountRole'];
+	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 deleteServiceAccountRole>>,
+		{ pathParams: DeleteServiceAccountRolePathParameters }
+	> = (props) => {
+		const { pathParams } = props ?? {};
+
+		return deleteServiceAccountRole(pathParams);
+	};
+
+	return { mutationFn, ...mutationOptions };
+};
+
+export type DeleteServiceAccountRoleMutationResult = NonNullable<
+	Awaited<ReturnType<typeof deleteServiceAccountRole>>
+>;
+
+export type DeleteServiceAccountRoleMutationError =
+	ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary Delete service account role
+ */
+export const useDeleteServiceAccountRole = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof deleteServiceAccountRole>>,
+		TError,
+		{ pathParams: DeleteServiceAccountRolePathParameters },
+		TContext
+	>;
+}): UseMutationResult<
+	Awaited<ReturnType<typeof deleteServiceAccountRole>>,
+	TError,
+	{ pathParams: DeleteServiceAccountRolePathParameters },
+	TContext
+> => {
+	return useMutation(getDeleteServiceAccountRoleMutationOptions(options));
+};
+/**
+ * This endpoint gets an existing service account role
+ * @summary Get service account role
+ */
+export const getServiceAccountRole = (
+	{ id }: GetServiceAccountRolePathParameters,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<GetServiceAccountRole200>({
+		url: `/api/v1/service_account_roles/${id}`,
+		method: 'GET',
+		signal,
+	});
+};
+
+export const getGetServiceAccountRoleQueryKey = ({
+	id,
+}: GetServiceAccountRolePathParameters) => {
+	return [`/api/v1/service_account_roles/${id}`] as const;
+};
+
+export const getGetServiceAccountRoleQueryOptions = <
+	TData = Awaited<ReturnType<typeof getServiceAccountRole>>,
+	TError = ErrorType<RenderErrorResponseDTO>,
+>(
+	{ id }: GetServiceAccountRolePathParameters,
+	options?: {
+		query?: UseQueryOptions<
+			Awaited<ReturnType<typeof getServiceAccountRole>>,
+			TError,
+			TData
+		>;
+	},
+) => {
+	const { query: queryOptions } = options ?? {};
+
+	const queryKey =
+		queryOptions?.queryKey ?? getGetServiceAccountRoleQueryKey({ id });
+
+	const queryFn: QueryFunction<
+		Awaited<ReturnType<typeof getServiceAccountRole>>
+	> = ({ signal }) => getServiceAccountRole({ id }, signal);
+
+	return {
+		queryKey,
+		queryFn,
+		enabled: !!id,
+		...queryOptions,
+	} as UseQueryOptions<
+		Awaited<ReturnType<typeof getServiceAccountRole>>,
+		TError,
+		TData
+	> & { queryKey: QueryKey };
+};
+
+export type GetServiceAccountRoleQueryResult = NonNullable<
+	Awaited<ReturnType<typeof getServiceAccountRole>>
+>;
+export type GetServiceAccountRoleQueryError = ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary Get service account role
+ */
+
+export function useGetServiceAccountRole<
+	TData = Awaited<ReturnType<typeof getServiceAccountRole>>,
+	TError = ErrorType<RenderErrorResponseDTO>,
+>(
+	{ id }: GetServiceAccountRolePathParameters,
+	options?: {
+		query?: UseQueryOptions<
+			Awaited<ReturnType<typeof getServiceAccountRole>>,
+			TError,
+			TData
+		>;
+	},
+): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
+	const queryOptions = getGetServiceAccountRoleQueryOptions({ id }, options);
+
+	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
+		queryKey: QueryKey;
+	};
+
+	return { ...query, queryKey: queryOptions.queryKey };
+}
+
+/**
+ * @summary Get service account role
+ */
+export const invalidateGetServiceAccountRole = async (
+	queryClient: QueryClient,
+	{ id }: GetServiceAccountRolePathParameters,
+	options?: InvalidateOptions,
+): Promise<QueryClient> => {
+	await queryClient.invalidateQueries(
+		{ queryKey: getGetServiceAccountRoleQueryKey({ id }) },
+		options,
+	);
+
+	return queryClient;
+};
+
 /**
  * This endpoint lists the service accounts for an organisation
  * @summary List service accounts
@@ -984,45 +1255,46 @@ export const invalidateGetServiceAccountRoles = async (
 
 /**
  * This endpoint assigns a role to a service account
+ * @deprecated
  * @summary Create service account role
  */
-export const createServiceAccountRole = (
-	{ id }: CreateServiceAccountRolePathParameters,
-	serviceaccounttypesPostableServiceAccountRoleDTO?: BodyType<ServiceaccounttypesPostableServiceAccountRoleDTO>,
+export const createServiceAccountRoleDeprecated = (
+	{ id }: CreateServiceAccountRoleDeprecatedPathParameters,
+	serviceaccounttypesDeprecatedPostableServiceAccountRoleDTO?: BodyType<ServiceaccounttypesDeprecatedPostableServiceAccountRoleDTO>,
 	signal?: AbortSignal,
 ) => {
-	return GeneratedAPIInstance<CreateServiceAccountRole201>({
+	return GeneratedAPIInstance<CreateServiceAccountRoleDeprecated201>({
 		url: `/api/v1/service_accounts/${id}/roles`,
 		method: 'POST',
 		headers: { 'Content-Type': 'application/json' },
-		data: serviceaccounttypesPostableServiceAccountRoleDTO,
+		data: serviceaccounttypesDeprecatedPostableServiceAccountRoleDTO,
 		signal,
 	});
 };
 
-export const getCreateServiceAccountRoleMutationOptions = <
+export const getCreateServiceAccountRoleDeprecatedMutationOptions = <
 	TError = ErrorType<RenderErrorResponseDTO>,
 	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof createServiceAccountRole>>,
+		Awaited<ReturnType<typeof createServiceAccountRoleDeprecated>>,
 		TError,
 		{
-			pathParams: CreateServiceAccountRolePathParameters;
-			data?: BodyType<ServiceaccounttypesPostableServiceAccountRoleDTO>;
+			pathParams: CreateServiceAccountRoleDeprecatedPathParameters;
+			data?: BodyType<ServiceaccounttypesDeprecatedPostableServiceAccountRoleDTO>;
 		},
 		TContext
 	>;
 }): UseMutationOptions<
-	Awaited<ReturnType<typeof createServiceAccountRole>>,
+	Awaited<ReturnType<typeof createServiceAccountRoleDeprecated>>,
 	TError,
 	{
-		pathParams: CreateServiceAccountRolePathParameters;
-		data?: BodyType<ServiceaccounttypesPostableServiceAccountRoleDTO>;
+		pathParams: CreateServiceAccountRoleDeprecatedPathParameters;
+		data?: BodyType<ServiceaccounttypesDeprecatedPostableServiceAccountRoleDTO>;
 	},
 	TContext
 > => {
-	const mutationKey = ['createServiceAccountRole'];
+	const mutationKey = ['createServiceAccountRoleDeprecated'];
 	const { mutation: mutationOptions } = options
 		? options.mutation &&
 			'mutationKey' in options.mutation &&
@@ -1032,62 +1304,66 @@ export const getCreateServiceAccountRoleMutationOptions = <
 		: { mutation: { mutationKey } };
 
 	const mutationFn: MutationFunction<
-		Awaited<ReturnType<typeof createServiceAccountRole>>,
+		Awaited<ReturnType<typeof createServiceAccountRoleDeprecated>>,
 		{
-			pathParams: CreateServiceAccountRolePathParameters;
-			data?: BodyType<ServiceaccounttypesPostableServiceAccountRoleDTO>;
+			pathParams: CreateServiceAccountRoleDeprecatedPathParameters;
+			data?: BodyType<ServiceaccounttypesDeprecatedPostableServiceAccountRoleDTO>;
 		}
 	> = (props) => {
 		const { pathParams, data } = props ?? {};
 
-		return createServiceAccountRole(pathParams, data);
+		return createServiceAccountRoleDeprecated(pathParams, data);
 	};
 
 	return { mutationFn, ...mutationOptions };
 };
 
-export type CreateServiceAccountRoleMutationResult = NonNullable<
-	Awaited<ReturnType<typeof createServiceAccountRole>>
+export type CreateServiceAccountRoleDeprecatedMutationResult = NonNullable<
+	Awaited<ReturnType<typeof createServiceAccountRoleDeprecated>>
 >;
-export type CreateServiceAccountRoleMutationBody =
-	| BodyType<ServiceaccounttypesPostableServiceAccountRoleDTO>
+export type CreateServiceAccountRoleDeprecatedMutationBody =
+	| BodyType<ServiceaccounttypesDeprecatedPostableServiceAccountRoleDTO>
 	| undefined;
-export type CreateServiceAccountRoleMutationError =
+export type CreateServiceAccountRoleDeprecatedMutationError =
 	ErrorType<RenderErrorResponseDTO>;
 
 /**
+ * @deprecated
  * @summary Create service account role
  */
-export const useCreateServiceAccountRole = <
+export const useCreateServiceAccountRoleDeprecated = <
 	TError = ErrorType<RenderErrorResponseDTO>,
 	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof createServiceAccountRole>>,
+		Awaited<ReturnType<typeof createServiceAccountRoleDeprecated>>,
 		TError,
 		{
-			pathParams: CreateServiceAccountRolePathParameters;
-			data?: BodyType<ServiceaccounttypesPostableServiceAccountRoleDTO>;
+			pathParams: CreateServiceAccountRoleDeprecatedPathParameters;
+			data?: BodyType<ServiceaccounttypesDeprecatedPostableServiceAccountRoleDTO>;
 		},
 		TContext
 	>;
 }): UseMutationResult<
-	Awaited<ReturnType<typeof createServiceAccountRole>>,
+	Awaited<ReturnType<typeof createServiceAccountRoleDeprecated>>,
 	TError,
 	{
-		pathParams: CreateServiceAccountRolePathParameters;
-		data?: BodyType<ServiceaccounttypesPostableServiceAccountRoleDTO>;
+		pathParams: CreateServiceAccountRoleDeprecatedPathParameters;
+		data?: BodyType<ServiceaccounttypesDeprecatedPostableServiceAccountRoleDTO>;
 	},
 	TContext
 > => {
-	return useMutation(getCreateServiceAccountRoleMutationOptions(options));
+	return useMutation(
+		getCreateServiceAccountRoleDeprecatedMutationOptions(options),
+	);
 };
 /**
  * This endpoint revokes a role from service account
+ * @deprecated
  * @summary Delete service account role
  */
-export const deleteServiceAccountRole = (
-	{ id, rid }: DeleteServiceAccountRolePathParameters,
+export const deleteServiceAccountRoleDeprecated = (
+	{ id, rid }: DeleteServiceAccountRoleDeprecatedPathParameters,
 	signal?: AbortSignal,
 ) => {
 	return GeneratedAPIInstance<void>({
@@ -1097,23 +1373,23 @@ export const deleteServiceAccountRole = (
 	});
 };
 
-export const getDeleteServiceAccountRoleMutationOptions = <
+export const getDeleteServiceAccountRoleDeprecatedMutationOptions = <
 	TError = ErrorType<RenderErrorResponseDTO>,
 	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof deleteServiceAccountRole>>,
+		Awaited<ReturnType<typeof deleteServiceAccountRoleDeprecated>>,
 		TError,
-		{ pathParams: DeleteServiceAccountRolePathParameters },
+		{ pathParams: DeleteServiceAccountRoleDeprecatedPathParameters },
 		TContext
 	>;
 }): UseMutationOptions<
-	Awaited<ReturnType<typeof deleteServiceAccountRole>>,
+	Awaited<ReturnType<typeof deleteServiceAccountRoleDeprecated>>,
 	TError,
-	{ pathParams: DeleteServiceAccountRolePathParameters },
+	{ pathParams: DeleteServiceAccountRoleDeprecatedPathParameters },
 	TContext
 > => {
-	const mutationKey = ['deleteServiceAccountRole'];
+	const mutationKey = ['deleteServiceAccountRoleDeprecated'];
 	const { mutation: mutationOptions } = options
 		? options.mutation &&
 			'mutationKey' in options.mutation &&
@@ -1123,44 +1399,47 @@ export const getDeleteServiceAccountRoleMutationOptions = <
 		: { mutation: { mutationKey } };
 
 	const mutationFn: MutationFunction<
-		Awaited<ReturnType<typeof deleteServiceAccountRole>>,
-		{ pathParams: DeleteServiceAccountRolePathParameters }
+		Awaited<ReturnType<typeof deleteServiceAccountRoleDeprecated>>,
+		{ pathParams: DeleteServiceAccountRoleDeprecatedPathParameters }
 	> = (props) => {
 		const { pathParams } = props ?? {};
 
-		return deleteServiceAccountRole(pathParams);
+		return deleteServiceAccountRoleDeprecated(pathParams);
 	};
 
 	return { mutationFn, ...mutationOptions };
 };
 
-export type DeleteServiceAccountRoleMutationResult = NonNullable<
-	Awaited<ReturnType<typeof deleteServiceAccountRole>>
+export type DeleteServiceAccountRoleDeprecatedMutationResult = NonNullable<
+	Awaited<ReturnType<typeof deleteServiceAccountRoleDeprecated>>
 >;
 
-export type DeleteServiceAccountRoleMutationError =
+export type DeleteServiceAccountRoleDeprecatedMutationError =
 	ErrorType<RenderErrorResponseDTO>;
 
 /**
+ * @deprecated
  * @summary Delete service account role
  */
-export const useDeleteServiceAccountRole = <
+export const useDeleteServiceAccountRoleDeprecated = <
 	TError = ErrorType<RenderErrorResponseDTO>,
 	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof deleteServiceAccountRole>>,
+		Awaited<ReturnType<typeof deleteServiceAccountRoleDeprecated>>,
 		TError,
-		{ pathParams: DeleteServiceAccountRolePathParameters },
+		{ pathParams: DeleteServiceAccountRoleDeprecatedPathParameters },
 		TContext
 	>;
 }): UseMutationResult<
-	Awaited<ReturnType<typeof deleteServiceAccountRole>>,
+	Awaited<ReturnType<typeof deleteServiceAccountRoleDeprecated>>,
 	TError,
-	{ pathParams: DeleteServiceAccountRolePathParameters },
+	{ pathParams: DeleteServiceAccountRoleDeprecatedPathParameters },
 	TContext
 > => {
-	return useMutation(getDeleteServiceAccountRoleMutationOptions(options));
+	return useMutation(
+		getDeleteServiceAccountRoleDeprecatedMutationOptions(options),
+	);
 };
 /**
  * This endpoint gets my service account

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

@@ -2048,6 +2048,13 @@ export interface AuthtypesAuthNSupportDTO {
 	password?: AuthtypesPasswordAuthNSupportDTO[] | null;
 }
 
+export interface AuthtypesDeprecatedPostableUserRoleDTO {
+	/**
+	 * @type string
+	 */
+	id: string;
+}
+
 export interface AuthtypesGettableAuthDomainDTO {
 	authNProviderInfo?: AuthtypesAuthNProviderInfoDTO;
 	config?: AuthtypesAuthDomainConfigDTO;
@@ -2287,13 +2294,6 @@ export interface AuthtypesPostableRotateTokenDTO {
 	refreshToken?: string;
 }
 
-export interface AuthtypesPostableUserRoleDTO {
-	/**
-	 * @type string
-	 */
-	id: string;
-}
-
 export interface AuthtypesPostableUserDTO {
 	/**
 	 * @type string
@@ -2310,7 +2310,18 @@ export interface AuthtypesPostableUserDTO {
 	/**
 	 * @type array
 	 */
-	userRoles?: AuthtypesPostableUserRoleDTO[];
+	userRoles?: AuthtypesDeprecatedPostableUserRoleDTO[];
+}
+
+export interface AuthtypesPostableUserRoleDTO {
+	/**
+	 * @type string
+	 */
+	roleId: string;
+	/**
+	 * @type string
+	 */
+	userId: string;
 }
 
 export interface AuthtypesRoleDTO {
@@ -8508,6 +8519,13 @@ export interface RuletypesRuleDTO {
 export enum RuletypesThresholdKindDTO {
 	basic = 'basic',
 }
+export interface ServiceaccounttypesDeprecatedPostableServiceAccountRoleDTO {
+	/**
+	 * @type string
+	 */
+	id: string;
+}
+
 export interface ServiceaccounttypesGettableFactorAPIKeyDTO {
 	/**
 	 * @type string
@@ -8577,7 +8595,11 @@ export interface ServiceaccounttypesPostableServiceAccountRoleDTO {
 	/**
 	 * @type string
 	 */
-	id: string;
+	roleId: string;
+	/**
+	 * @type string
+	 */
+	serviceAccountId: string;
 }
 
 export interface ServiceaccounttypesServiceAccountDTO {
@@ -10343,6 +10365,28 @@ export type UpdateRoutePolicy200 = {
 	status: string;
 };
 
+export type CreateServiceAccountRole201 = {
+	data: TypesIdentifiableDTO;
+	/**
+	 * @type string
+	 */
+	status: string;
+};
+
+export type DeleteServiceAccountRolePathParameters = {
+	id: string;
+};
+export type GetServiceAccountRolePathParameters = {
+	id: string;
+};
+export type GetServiceAccountRole200 = {
+	data: ServiceaccounttypesServiceAccountRoleDTO;
+	/**
+	 * @type string
+	 */
+	status: string;
+};
+
 export type ListServiceAccounts200 = {
 	/**
 	 * @type array
@@ -10426,10 +10470,10 @@ export type GetServiceAccountRoles200 = {
 	status: string;
 };
 
-export type CreateServiceAccountRolePathParameters = {
+export type CreateServiceAccountRoleDeprecatedPathParameters = {
 	id: string;
 };
-export type CreateServiceAccountRole201 = {
+export type CreateServiceAccountRoleDeprecated201 = {
 	data: TypesIdentifiableDTO;
 	/**
 	 * @type string
@@ -10437,7 +10481,7 @@ export type CreateServiceAccountRole201 = {
 	status: string;
 };
 
-export type DeleteServiceAccountRolePathParameters = {
+export type DeleteServiceAccountRoleDeprecatedPathParameters = {
 	id: string;
 	rid: string;
 };
@@ -11597,6 +11641,28 @@ export type RotateSession200 = {
 	status: string;
 };
 
+export type CreateUserRole201 = {
+	data: TypesIdentifiableDTO;
+	/**
+	 * @type string
+	 */
+	status: string;
+};
+
+export type DeleteUserRolePathParameters = {
+	id: string;
+};
+export type GetUserRolePathParameters = {
+	id: string;
+};
+export type GetUserRole200 = {
+	data: AuthtypesUserRoleDTO;
+	/**
+	 * @type string
+	 */
+	status: string;
+};
+
 export type ListUsers200 = {
 	/**
 	 * @type array

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

@@ -19,12 +19,15 @@ import type {
 
 import type {
 	AuthtypesPostableUserDTO,
+	AuthtypesPostableUserRoleDTO,
 	CreateInvite201,
 	CreateResetPasswordToken201,
 	CreateResetPasswordTokenPathParameters,
 	CreateUser201,
+	CreateUserRole201,
 	DeleteUserDeprecatedPathParameters,
 	DeleteUserPathParameters,
+	DeleteUserRolePathParameters,
 	GetMyUser200,
 	GetMyUserDeprecated200,
 	GetResetPasswordToken200,
@@ -37,6 +40,8 @@ import type {
 	GetUserDeprecated200,
 	GetUserDeprecatedPathParameters,
 	GetUserPathParameters,
+	GetUserRole200,
+	GetUserRolePathParameters,
 	GetUsersByRoleID200,
 	GetUsersByRoleIDPathParameters,
 	ListUsers200,
@@ -1154,6 +1159,267 @@ export const invalidateGetUsersByRoleID = async (
 	return queryClient;
 };
 
+/**
+ * This endpoint assigns a role to a user
+ * @summary Create user role
+ */
+export const createUserRole = (
+	authtypesPostableUserRoleDTO?: BodyType<AuthtypesPostableUserRoleDTO>,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<CreateUserRole201>({
+		url: `/api/v2/user_roles`,
+		method: 'POST',
+		headers: { 'Content-Type': 'application/json' },
+		data: authtypesPostableUserRoleDTO,
+		signal,
+	});
+};
+
+export const getCreateUserRoleMutationOptions = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof createUserRole>>,
+		TError,
+		{ data?: BodyType<AuthtypesPostableUserRoleDTO> },
+		TContext
+	>;
+}): UseMutationOptions<
+	Awaited<ReturnType<typeof createUserRole>>,
+	TError,
+	{ data?: BodyType<AuthtypesPostableUserRoleDTO> },
+	TContext
+> => {
+	const mutationKey = ['createUserRole'];
+	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 createUserRole>>,
+		{ data?: BodyType<AuthtypesPostableUserRoleDTO> }
+	> = (props) => {
+		const { data } = props ?? {};
+
+		return createUserRole(data);
+	};
+
+	return { mutationFn, ...mutationOptions };
+};
+
+export type CreateUserRoleMutationResult = NonNullable<
+	Awaited<ReturnType<typeof createUserRole>>
+>;
+export type CreateUserRoleMutationBody =
+	| BodyType<AuthtypesPostableUserRoleDTO>
+	| undefined;
+export type CreateUserRoleMutationError = ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary Create user role
+ */
+export const useCreateUserRole = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof createUserRole>>,
+		TError,
+		{ data?: BodyType<AuthtypesPostableUserRoleDTO> },
+		TContext
+	>;
+}): UseMutationResult<
+	Awaited<ReturnType<typeof createUserRole>>,
+	TError,
+	{ data?: BodyType<AuthtypesPostableUserRoleDTO> },
+	TContext
+> => {
+	return useMutation(getCreateUserRoleMutationOptions(options));
+};
+/**
+ * This endpoint revokes a role from a user
+ * @summary Delete user role
+ */
+export const deleteUserRole = (
+	{ id }: DeleteUserRolePathParameters,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<void>({
+		url: `/api/v2/user_roles/${id}`,
+		method: 'DELETE',
+		signal,
+	});
+};
+
+export const getDeleteUserRoleMutationOptions = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof deleteUserRole>>,
+		TError,
+		{ pathParams: DeleteUserRolePathParameters },
+		TContext
+	>;
+}): UseMutationOptions<
+	Awaited<ReturnType<typeof deleteUserRole>>,
+	TError,
+	{ pathParams: DeleteUserRolePathParameters },
+	TContext
+> => {
+	const mutationKey = ['deleteUserRole'];
+	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 deleteUserRole>>,
+		{ pathParams: DeleteUserRolePathParameters }
+	> = (props) => {
+		const { pathParams } = props ?? {};
+
+		return deleteUserRole(pathParams);
+	};
+
+	return { mutationFn, ...mutationOptions };
+};
+
+export type DeleteUserRoleMutationResult = NonNullable<
+	Awaited<ReturnType<typeof deleteUserRole>>
+>;
+
+export type DeleteUserRoleMutationError = ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary Delete user role
+ */
+export const useDeleteUserRole = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof deleteUserRole>>,
+		TError,
+		{ pathParams: DeleteUserRolePathParameters },
+		TContext
+	>;
+}): UseMutationResult<
+	Awaited<ReturnType<typeof deleteUserRole>>,
+	TError,
+	{ pathParams: DeleteUserRolePathParameters },
+	TContext
+> => {
+	return useMutation(getDeleteUserRoleMutationOptions(options));
+};
+/**
+ * This endpoint gets an existing user role
+ * @summary Get user role
+ */
+export const getUserRole = (
+	{ id }: GetUserRolePathParameters,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<GetUserRole200>({
+		url: `/api/v2/user_roles/${id}`,
+		method: 'GET',
+		signal,
+	});
+};
+
+export const getGetUserRoleQueryKey = ({ id }: GetUserRolePathParameters) => {
+	return [`/api/v2/user_roles/${id}`] as const;
+};
+
+export const getGetUserRoleQueryOptions = <
+	TData = Awaited<ReturnType<typeof getUserRole>>,
+	TError = ErrorType<RenderErrorResponseDTO>,
+>(
+	{ id }: GetUserRolePathParameters,
+	options?: {
+		query?: UseQueryOptions<
+			Awaited<ReturnType<typeof getUserRole>>,
+			TError,
+			TData
+		>;
+	},
+) => {
+	const { query: queryOptions } = options ?? {};
+
+	const queryKey = queryOptions?.queryKey ?? getGetUserRoleQueryKey({ id });
+
+	const queryFn: QueryFunction<Awaited<ReturnType<typeof getUserRole>>> = ({
+		signal,
+	}) => getUserRole({ id }, signal);
+
+	return {
+		queryKey,
+		queryFn,
+		enabled: !!id,
+		...queryOptions,
+	} as UseQueryOptions<
+		Awaited<ReturnType<typeof getUserRole>>,
+		TError,
+		TData
+	> & { queryKey: QueryKey };
+};
+
+export type GetUserRoleQueryResult = NonNullable<
+	Awaited<ReturnType<typeof getUserRole>>
+>;
+export type GetUserRoleQueryError = ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary Get user role
+ */
+
+export function useGetUserRole<
+	TData = Awaited<ReturnType<typeof getUserRole>>,
+	TError = ErrorType<RenderErrorResponseDTO>,
+>(
+	{ id }: GetUserRolePathParameters,
+	options?: {
+		query?: UseQueryOptions<
+			Awaited<ReturnType<typeof getUserRole>>,
+			TError,
+			TData
+		>;
+	},
+): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
+	const queryOptions = getGetUserRoleQueryOptions({ id }, options);
+
+	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
+		queryKey: QueryKey;
+	};
+
+	return { ...query, queryKey: queryOptions.queryKey };
+}
+
+/**
+ * @summary Get user role
+ */
+export const invalidateGetUserRole = async (
+	queryClient: QueryClient,
+	{ id }: GetUserRolePathParameters,
+	options?: InvalidateOptions,
+): Promise<QueryClient> => {
+	await queryClient.invalidateQueries(
+		{ queryKey: getGetUserRoleQueryKey({ id }) },
+		options,
+	);
+
+	return queryClient;
+};
+
 /**
  * This endpoint lists all users for the organization
  * @summary List users v2
@@ -1865,6 +2131,7 @@ export const invalidateGetRolesByUserID = async (
 
 /**
  * This endpoint assigns the role to the user roles by user id
+ * @deprecated
  * @summary Set user roles
  */
 export const setRoleByUserID = (
@@ -1936,6 +2203,7 @@ export type SetRoleByUserIDMutationBody =
 export type SetRoleByUserIDMutationError = ErrorType<RenderErrorResponseDTO>;
 
 /**
+ * @deprecated
  * @summary Set user roles
  */
 export const useSetRoleByUserID = <
@@ -1964,6 +2232,7 @@ export const useSetRoleByUserID = <
 };
 /**
  * This endpoint removes a role from the user by user id and role id
+ * @deprecated
  * @summary Remove a role from user
  */
 export const removeUserRoleByUserIDAndRoleID = (
@@ -2022,6 +2291,7 @@ export type RemoveUserRoleByUserIDAndRoleIDMutationError =
 	ErrorType<RenderErrorResponseDTO>;
 
 /**
+ * @deprecated
  * @summary Remove a role from user
  */
 export const useRemoveUserRoleByUserIDAndRoleID = <

frontend/src/components/RouteTab/types.ts

@@ -1,10 +1,11 @@
+import { ComponentType } from 'react';
 import { TabsProps } from 'antd';
 import { History } from 'history';
 
 export type TabRoutes = {
 	name: React.ReactNode;
 	route: string;
-	Component: () => JSX.Element;
+	Component: ComponentType;
 	key: string;
 };
 

frontend/src/components/TagBadge/TagBadge.tsx

@@ -0,0 +1,34 @@
+import { type MouseEvent, type ReactNode } from 'react';
+import { Badge } from '@signozhq/ui/badge';
+
+interface TagBadgeProps {
+	children: ReactNode;
+	// Show a remove button (editable contexts: create modal, settings drawer).
+	closable?: boolean;
+	onClose?: (event: MouseEvent<HTMLButtonElement>) => void;
+	className?: string;
+}
+
+// The single sienna tag chip used everywhere dashboards render tags — list rows,
+// the details header, and the tag editors. Kept as one component so the tag
+// styling stays identical across all of them.
+function TagBadge({
+	children,
+	closable,
+	onClose,
+	className,
+}: TagBadgeProps): JSX.Element {
+	return (
+		<Badge
+			color="sienna"
+			variant="outline"
+			className={className}
+			closable={closable}
+			onClose={onClose}
+		>
+			{children}
+		</Badge>
+	);
+}
+
+export default TagBadge;

frontend/src/components/TagKeyValueInput/TagKeyValueInput.module.scss

@@ -15,59 +15,28 @@
 	border: 1px solid var(--l2-border);
 }
 
-// Sienna chip — matches the dashboard list-row tag badge.
+// Sienna chip via the @signozhq Badge; this only constrains its width.
 .tag {
-	display: inline-flex;
-	align-items: center;
-	gap: 4px;
 	max-width: 240px;
-	height: 24px;
-	padding: 2px 4px 2px 8px;
-	border-radius: 50px;
-	border: 1px solid color-mix(in srgb, var(--bg-sienna-500) 20%, transparent);
-	background: color-mix(in srgb, var(--bg-sienna-500) 10%, transparent);
-	color: var(--bg-sienna-400);
-	font-size: 13px;
-	font-weight: var(--font-weight-normal);
-	line-height: 20px;
-	cursor: text;
 }
 
+// The tag label is a bare, chrome-less button inside the Badge (double-click to
+// edit); strip its Button styling and let it ellipsize.
 .tagLabel {
 	--button-height: auto;
 	--button-padding: 0;
 	--button-gap: 0;
 	--button-variant-ghost-background-color: transparent;
 	--button-variant-ghost-hover-background-color: transparent;
-	--button-variant-ghost-color: inherit;
-	--button-variant-ghost-hover-color: inherit;
+	--button-variant-ghost-color: currentColor;
+	--button-variant-ghost-hover-color: currentColor;
 	overflow: hidden;
 	max-width: 200px;
-	font-size: 13px;
-	font-weight: var(--font-weight-normal);
 	text-overflow: ellipsis;
 	white-space: nowrap;
 	cursor: text;
 }
 
-.remove {
-	// Size overrides to fit the chip, plus a sienna-tinted hover — the Button's
-	// default ghost hover is a grey that clashes with the chip. Resting color is
-	// left at the Button default.
-	--button-height: 16px;
-	--button-padding: 0;
-	--button-border-radius: 50%;
-	--button-variant-ghost-hover-background-color: color-mix(
-		in srgb,
-		var(--bg-sienna-500) 22%,
-		transparent
-	);
-	--button-variant-ghost-hover-color: var(--bg-sienna-400);
-	width: 16px;
-	min-width: 16px;
-	flex: none;
-}
-
 .input {
 	flex: 1;
 	min-width: 120px;

frontend/src/components/TagKeyValueInput/TagKeyValueInput.tsx

@@ -2,9 +2,9 @@ import { type ChangeEvent, type KeyboardEvent, useState } from 'react';
 import { Button } from '@signozhq/ui/button';
 import { Input } from '@signozhq/ui/input';
 import { Typography } from '@signozhq/ui/typography';
-import { X } from '@signozhq/icons';
 import cx from 'classnames';
 
+import TagBadge from '../TagBadge/TagBadge';
 import { parseKeyValueTag } from './utils';
 
 import styles from './TagKeyValueInput.module.scss';
@@ -120,27 +120,23 @@ function TagKeyValueInput({
 							onBlur={commitEdit}
 						/>
 					) : (
-						<div key={tag} className={styles.tag} data-testid={`${testId}-chip`}>
+						<TagBadge
+							key={tag}
+							className={styles.tag}
+							closable
+							onClose={(): void => removeTag(tag)}
+						>
 							<Button
 								variant="ghost"
 								color="secondary"
 								className={styles.tagLabel}
 								title="Double-click to edit"
+								testId={`${testId}-chip`}
 								onDoubleClick={(): void => startEdit(index)}
 							>
 								{tag}
 							</Button>
-							<Button
-								variant="ghost"
-								color="secondary"
-								size="icon"
-								className={styles.remove}
-								aria-label={`Remove ${tag}`}
-								onClick={(): void => removeTag(tag)}
-							>
-								<X size={12} />
-							</Button>
-						</div>
+						</TagBadge>
 					),
 				)}
 				<Input

frontend/src/container/DashboardContainer/visualization/charts/Pie/PieArc.tsx

@@ -1,3 +1,4 @@
+import type { MouseEvent as ReactMouseEvent } from 'react';
 import type { PrecisionOption } from 'components/Graph/types';
 import { getYAxisFormattedValue } from 'components/Graph/yAxisConfig';
 
@@ -27,7 +28,7 @@ interface PieArcProps {
 	fill: string;
 	onEnter: (slice: PieSlice, centroidX: number, centroidY: number) => void;
 	onLeave: () => void;
-	onClick?: (slice: PieSlice) => void;
+	onClick?: (slice: PieSlice, event: ReactMouseEvent) => void;
 }
 
 /**
@@ -72,7 +73,7 @@ export default function PieArc({
 		<g
 			onMouseEnter={(): void => onEnter(slice, centroidX, centroidY)}
 			onMouseLeave={onLeave}
-			onClick={(): void => onClick?.(slice)}
+			onClick={(event): void => onClick?.(slice, event)}
 		>
 			<path d={arcPath} fill={fill} />
 			{shouldShowLabel && (

frontend/src/container/DashboardContainer/visualization/charts/Pie/__tests__/PieArc.test.tsx

@@ -80,6 +80,7 @@ describe('PieArc', () => {
 		expect(onLeave).toHaveBeenCalledTimes(1);
 
 		fireEvent.click(g);
-		expect(onClick).toHaveBeenCalledWith(SLICE);
+		// onClick now also receives the DOM event (for drill-down popover positioning).
+		expect(onClick).toHaveBeenCalledWith(SLICE, expect.anything());
 	});
 });

frontend/src/container/DashboardContainer/visualization/charts/types.ts

@@ -1,3 +1,4 @@
+import type { MouseEvent as ReactMouseEvent } from 'react';
 import { Timezone } from 'components/CustomTimePicker/timezoneUtils';
 import { PrecisionOption } from 'components/Graph/types';
 import {
@@ -79,6 +80,10 @@ export interface PieSlice {
 	label: string;
 	value: number;
 	color: string;
+	/** Source query of the slice's value column — the drill-down target (present for V2 panels). */
+	queryName?: string;
+	/** Group-by key→value of the slice's source row, used to build drill-down filters. */
+	labels?: Record<string, string>;
 }
 
 /**
@@ -99,7 +104,7 @@ export interface PieChartProps {
 	 * (shared GRAPH_VISIBILITY_STATES, keyed by label). Omit to disable persistence.
 	 */
 	id?: string;
-	/** Fired when a slice (or its legend entry) is clicked. */
-	onSliceClick?: (slice: PieSlice) => void;
+	/** Fired when a slice's arc is clicked; carries the DOM event for popover positioning. */
+	onSliceClick?: (slice: PieSlice, event: ReactMouseEvent) => void;
 	'data-testid'?: string;
 }

frontend/src/container/DashboardContainer/visualization/layout/ChartLayout/ChartLayout.styles.scss

@@ -2,7 +2,7 @@
 	position: relative;
 	display: flex;
 	width: 100%;
-	height: 100%;
+	height: auto;
 	flex-direction: column;
 
 	// Stacked children (the FullView / standalone graph-manager) sit below the chart

frontend/src/container/InfraMonitoringK8s/InfraMonitoringK8s.module.scss

@@ -66,20 +66,6 @@
 		background: colox-mix(var(--accent-primary), var(--bg-vanilla-100), 20%);
 	}
 
-	:global(.ant-collapse-header) {
-		border-bottom: 1px solid var(--l1-border);
-		padding: 12px 8px;
-	}
-
-	:global(.ant-collapse-content-box) {
-		padding: 0 !important;
-		padding-block: 0 !important;
-
-		:global(.quick-filters .checkbox-filter) {
-			padding-left: 18px;
-		}
-	}
-
 	:global(.quick-filters) {
 		overflow-y: auto;
 		overflow-x: hidden;
@@ -111,22 +97,6 @@
 	justify-content: space-between;
 }
 
-.quickFiltersCategoryLabel {
-	display: flex;
-	align-items: center;
-	gap: 4px;
-}
-
-.quickFiltersCategoryLabelIcon {
-	margin-right: 8px;
-}
-
-.quickFiltersCategoryLabelContainer {
-	display: flex;
-	align-items: center;
-	gap: 4px;
-}
-
 .listContainer {
 	flex: 1;
 	min-width: 0;
@@ -160,3 +130,106 @@
 .listContainerFiltersVisible {
 	max-width: calc(100% - 280px);
 }
+
+.categorySelectorSection {
+	padding: var(--spacing-4);
+}
+
+.sectionHeader {
+	display: flex;
+	align-items: center;
+	gap: var(--spacing-4);
+	margin-bottom: var(--spacing-4);
+
+	&[data-type='filter'] {
+		padding: 0 var(--spacing-4);
+	}
+}
+
+.sectionLabel {
+	font-size: var(--periscope-font-size-small);
+	font-weight: var(--font-weight-semibold);
+	text-transform: uppercase;
+	letter-spacing: 0.5px;
+	color: var(--l3-foreground);
+	white-space: nowrap;
+}
+
+.sectionLine {
+	flex: 1;
+	height: 1px;
+	background: var(--l1-border);
+}
+
+.categoryCard {
+	background: var(--l2-background);
+	border: 1px solid var(--l2-border);
+	border-radius: var(--spacing-3);
+	padding: var(--spacing-2);
+}
+
+.categoryList {
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-1);
+}
+
+.categoryItem {
+	display: flex;
+	align-items: center;
+	gap: var(--spacing-5);
+	padding: var(--spacing-3) var(--spacing-4);
+	border: none;
+	border-radius: var(--spacing-2);
+	background: transparent;
+	cursor: pointer;
+	width: 100%;
+	text-align: left;
+	transition:
+		background-color 0.2s ease,
+		color 0.2s ease;
+	color: var(--l2-foreground);
+	font-size: var(--periscope-font-size-base);
+	--typography-color: var(--l1-foreground);
+
+	&:hover:not(.categoryItemSelected) {
+		background: var(--l2-background-hover);
+	}
+
+	svg {
+		color: var(--l3-foreground);
+		flex-shrink: 0;
+		transition: color 0.2s ease;
+	}
+
+	&.categoryItemSelected {
+		background: var(--accent-primary);
+		color: var(--l1-background);
+		font-weight: 600;
+
+		&:hover {
+			background: var(--accent-primary-hover, var(--accent-primary));
+		}
+
+		svg {
+			color: var(--l1-foreground);
+		}
+	}
+}
+
+.quickFiltersSection {
+	flex: 1;
+	overflow-y: auto;
+
+	&::-webkit-scrollbar {
+		width: 0.1rem;
+	}
+
+	&::-webkit-scrollbar-track {
+		background: transparent;
+	}
+
+	&::-webkit-scrollbar-thumb {
+		background: var(--accent-primary);
+	}
+}

frontend/src/container/InfraMonitoringK8s/InfraMonitoringK8s.tsx

@@ -1,7 +1,6 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import * as Sentry from '@sentry/react';
-import { Button, CollapseProps } from 'antd';
-import { Collapse, Tooltip } from 'antd';
+import { Button, Tooltip } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import logEvent from 'api/common/logEvent';
 import QuickFilters from 'components/QuickFilters/QuickFilters';
@@ -113,192 +112,74 @@ export default function InfraMonitoringK8s(): JSX.Element {
 		});
 	};
 
-	const renderCategoryLabel = (
-		icon: JSX.Element,
-		label: string,
-	): JSX.Element => (
-		<div className={styles.quickFiltersCategoryLabel}>
-			<div className={styles.quickFiltersCategoryLabelContainer}>
-				{icon}
-				<Typography.Text>{label}</Typography.Text>
-			</div>
-		</div>
+	const categories = useMemo(
+		() => [
+			{
+				key: K8sCategories.PODS,
+				label: 'Pods',
+				icon: <Container size={14} />,
+				config: GetPodsQuickFiltersConfig(dotMetricsEnabled),
+			},
+			{
+				key: K8sCategories.NODES,
+				label: 'Nodes',
+				icon: <Workflow size={14} />,
+				config: GetNodesQuickFiltersConfig(dotMetricsEnabled),
+			},
+			{
+				key: K8sCategories.NAMESPACES,
+				label: 'Namespaces',
+				icon: <FilePenLine size={14} />,
+				config: GetNamespaceQuickFiltersConfig(dotMetricsEnabled),
+			},
+			{
+				key: K8sCategories.CLUSTERS,
+				label: 'Clusters',
+				icon: <Boxes size={14} />,
+				config: GetClustersQuickFiltersConfig(dotMetricsEnabled),
+			},
+			{
+				key: K8sCategories.DEPLOYMENTS,
+				label: 'Deployments',
+				icon: <Computer size={14} />,
+				config: GetDeploymentsQuickFiltersConfig(dotMetricsEnabled),
+			},
+			{
+				key: K8sCategories.JOBS,
+				label: 'Jobs',
+				icon: <Bolt size={14} />,
+				config: GetJobsQuickFiltersConfig(dotMetricsEnabled),
+			},
+			{
+				key: K8sCategories.DAEMONSETS,
+				label: 'DaemonSets',
+				icon: <Group size={14} />,
+				config: GetDaemonsetsQuickFiltersConfig(dotMetricsEnabled),
+			},
+			{
+				key: K8sCategories.STATEFULSETS,
+				label: 'StatefulSets',
+				icon: <ArrowUpDown size={14} />,
+				config: GetStatefulsetsQuickFiltersConfig(dotMetricsEnabled),
+			},
+			{
+				key: K8sCategories.VOLUMES,
+				label: 'Volumes',
+				icon: <HardDrive size={14} />,
+				config: GetVolumesQuickFiltersConfig(dotMetricsEnabled),
+			},
+		],
+		[dotMetricsEnabled],
 	);
 
-	const items: CollapseProps['items'] = [
-		{
-			label: renderCategoryLabel(
-				<Container size={14} className={styles.quickFiltersCategoryLabelIcon} />,
-				'Pods',
-			),
-			key: K8sCategories.PODS,
-			showArrow: false,
-			children: (
-				<QuickFilters
-					source={QuickFiltersSource.INFRA_MONITORING}
-					config={GetPodsQuickFiltersConfig(dotMetricsEnabled)}
-					handleFilterVisibilityChange={handleFilterVisibilityChange}
-					onFilterChange={handleFilterChange}
-				/>
-			),
-		},
-		{
-			label: renderCategoryLabel(
-				<Workflow size={14} className={styles.quickFiltersCategoryLabelIcon} />,
-				'Nodes',
-			),
-			key: K8sCategories.NODES,
-			showArrow: false,
-			children: (
-				<QuickFilters
-					source={QuickFiltersSource.INFRA_MONITORING}
-					config={GetNodesQuickFiltersConfig(dotMetricsEnabled)}
-					handleFilterVisibilityChange={handleFilterVisibilityChange}
-					onFilterChange={handleFilterChange}
-				/>
-			),
-		},
-		{
-			label: renderCategoryLabel(
-				<FilePenLine size={14} className={styles.quickFiltersCategoryLabelIcon} />,
-				'Namespaces',
-			),
-			key: K8sCategories.NAMESPACES,
-			showArrow: false,
-			children: (
-				<QuickFilters
-					source={QuickFiltersSource.INFRA_MONITORING}
-					config={GetNamespaceQuickFiltersConfig(dotMetricsEnabled)}
-					handleFilterVisibilityChange={handleFilterVisibilityChange}
-					onFilterChange={handleFilterChange}
-				/>
-			),
-		},
-		{
-			label: renderCategoryLabel(
-				<Boxes size={14} className={styles.quickFiltersCategoryLabelIcon} />,
-				'Clusters',
-			),
-			key: K8sCategories.CLUSTERS,
-			showArrow: false,
-			children: (
-				<QuickFilters
-					source={QuickFiltersSource.INFRA_MONITORING}
-					config={GetClustersQuickFiltersConfig(dotMetricsEnabled)}
-					handleFilterVisibilityChange={handleFilterVisibilityChange}
-					onFilterChange={handleFilterChange}
-				/>
-			),
-		},
-		{
-			label: renderCategoryLabel(
-				<Computer size={14} className={styles.quickFiltersCategoryLabelIcon} />,
-				'Deployments',
-			),
-			key: K8sCategories.DEPLOYMENTS,
-			showArrow: false,
-			children: (
-				<QuickFilters
-					source={QuickFiltersSource.INFRA_MONITORING}
-					config={GetDeploymentsQuickFiltersConfig(dotMetricsEnabled)}
-					handleFilterVisibilityChange={handleFilterVisibilityChange}
-					onFilterChange={handleFilterChange}
-				/>
-			),
-		},
-		{
-			label: renderCategoryLabel(
-				<Bolt size={14} className={styles.quickFiltersCategoryLabelIcon} />,
-				'Jobs',
-			),
-			key: K8sCategories.JOBS,
-			showArrow: false,
-			children: (
-				<QuickFilters
-					source={QuickFiltersSource.INFRA_MONITORING}
-					config={GetJobsQuickFiltersConfig(dotMetricsEnabled)}
-					handleFilterVisibilityChange={handleFilterVisibilityChange}
-					onFilterChange={handleFilterChange}
-				/>
-			),
-		},
-		{
-			label: renderCategoryLabel(
-				<Group size={14} className={styles.quickFiltersCategoryLabelIcon} />,
-				'DaemonSets',
-			),
-			key: K8sCategories.DAEMONSETS,
-			showArrow: false,
-			children: (
-				<QuickFilters
-					source={QuickFiltersSource.INFRA_MONITORING}
-					config={GetDaemonsetsQuickFiltersConfig(dotMetricsEnabled)}
-					handleFilterVisibilityChange={handleFilterVisibilityChange}
-					onFilterChange={handleFilterChange}
-				/>
-			),
-		},
-		{
-			label: renderCategoryLabel(
-				<ArrowUpDown size={14} className={styles.quickFiltersCategoryLabelIcon} />,
-				'StatefulSets',
-			),
-			key: K8sCategories.STATEFULSETS,
-			showArrow: false,
-			children: (
-				<QuickFilters
-					source={QuickFiltersSource.INFRA_MONITORING}
-					config={GetStatefulsetsQuickFiltersConfig(dotMetricsEnabled)}
-					handleFilterVisibilityChange={handleFilterVisibilityChange}
-					onFilterChange={handleFilterChange}
-				/>
-			),
-		},
-		{
-			label: renderCategoryLabel(
-				<HardDrive size={14} className={styles.quickFiltersCategoryLabelIcon} />,
-				'Volumes',
-			),
-			key: K8sCategories.VOLUMES,
-			showArrow: false,
-			children: (
-				<QuickFilters
-					source={QuickFiltersSource.INFRA_MONITORING}
-					config={GetVolumesQuickFiltersConfig(dotMetricsEnabled)}
-					handleFilterVisibilityChange={handleFilterVisibilityChange}
-					onFilterChange={handleFilterChange}
-				/>
-			),
-		},
-		// TODO: Enable once we have implemented containers.
-		// {
-		// 	label: (
-		// 		<div className="k8s-quick-filters-category-label">
-		// 			<div className="k8s-quick-filters-category-label-container">
-		// 				<PackageOpen
-		// 					size={14}
-		// 					className="k8s-quick-filters-category-label-icon"
-		// 				/>
-		// 				<Typography.Text>Containers</Typography.Text>
-		// 			</div>
-		// 		</div>
-		// 	),
-		// 	key: K8sCategories.CONTAINERS,
-		// 	showArrow: false,
-		// 	children: (
-		// 		<QuickFilters
-		// 			source={QuickFiltersSource.INFRA_MONITORING}
-		// 			config={ContainersQuickFiltersConfig}
-		// 			handleFilterVisibilityChange={handleFilterVisibilityChange}
-		// 			onFilterChange={handleFilterChange}
-		// 		/>
-		// 	),
-		// },
-	];
+	const selectedCategoryConfig = useMemo(
+		() => categories.find((cat) => cat.key === selectedCategory)?.config,
+		[categories, selectedCategory],
+	);
 
-	const handleCategoryChange = (key: string | string[]): void => {
-		if (Array.isArray(key) && key.length > 0) {
-			setSelectedCategory(key[0] as string);
+	const handleCategorySelect = (key: string): void => {
+		if (key !== selectedCategory) {
+			setSelectedCategory(key);
 			// Reset filters
 			setUrlFilters(null);
 			setOrderBy(null);
@@ -332,26 +213,58 @@ export default function InfraMonitoringK8s(): JSX.Element {
 				<div className={styles.infraContentRow}>
 					{showFilters && (
 						<div className={styles.quickFiltersContainer}>
-							<div className={styles.quickFiltersContainerHeader}>
-								<Typography.Text>Filters</Typography.Text>
-
-								<Tooltip title="Collapse Filters">
-									<ArrowUpToLine
-										style={{ transform: 'rotate(270deg)' }}
-										onClick={handleFilterVisibilityChange}
-										size="md"
-									/>
-								</Tooltip>
+							<div className={styles.categorySelectorSection}>
+								<div className={styles.sectionHeader} data-type="resource">
+									<Typography.Text className={styles.sectionLabel}>
+										Viewing · Resource
+									</Typography.Text>
+									<div className={styles.sectionLine} />
+									<Tooltip title="Collapse Filters">
+										<ArrowUpToLine
+											style={{ transform: 'rotate(270deg)' }}
+											onClick={handleFilterVisibilityChange}
+											size="md"
+										/>
+									</Tooltip>
+								</div>
+								<div className={styles.categoryCard}>
+									<div className={styles.categoryList}>
+										{categories.map((category) => (
+											<button
+												key={category.key}
+												type="button"
+												className={`${styles.categoryItem} ${
+													selectedCategory === category.key
+														? styles.categoryItemSelected
+														: ''
+												}`}
+												onClick={(): void => handleCategorySelect(category.key)}
+												data-testid={`category-${category.key}`}
+											>
+												{category.icon}
+												<Typography.Text>{category.label}</Typography.Text>
+											</button>
+										))}
+									</div>
+								</div>
+							</div>
+
+							<div className={styles.quickFiltersSection}>
+								<div className={styles.sectionHeader} data-type="filter">
+									<Typography.Text className={styles.sectionLabel}>
+										Filter by
+									</Typography.Text>
+									<div className={styles.sectionLine} />
+								</div>
+								{selectedCategoryConfig && (
+									<QuickFilters
+										source={QuickFiltersSource.INFRA_MONITORING}
+										config={selectedCategoryConfig}
+										handleFilterVisibilityChange={handleFilterVisibilityChange}
+										onFilterChange={handleFilterChange}
+									/>
+								)}
 							</div>
-							<Collapse
-								onChange={handleCategoryChange}
-								items={items}
-								defaultActiveKey={[selectedCategory]}
-								activeKey={[selectedCategory]}
-								accordion
-								bordered={false}
-								ghost
-							/>
 						</div>
 					)}
 

frontend/src/hooks/serviceAccount/useServiceAccountRoleManager.ts

@@ -2,8 +2,8 @@ import { useCallback, useMemo } from 'react';
 import { useQueryClient } from 'react-query';
 import {
 	getGetServiceAccountRolesQueryKey,
-	useCreateServiceAccountRole,
-	useDeleteServiceAccountRole,
+	useCreateServiceAccountRoleDeprecated,
+	useDeleteServiceAccountRoleDeprecated,
 	useGetServiceAccountRoles,
 } from 'api/generated/services/serviceaccount';
 import type { AuthtypesRoleDTO } from 'api/generated/services/sigNoz.schemas';
@@ -46,10 +46,10 @@ export function useServiceAccountRoleManager(
 	);
 
 	// the retry for these mutations is safe due to being idempotent on backend
-	const { mutateAsync: createRole } = useCreateServiceAccountRole({
+	const { mutateAsync: createRole } = useCreateServiceAccountRoleDeprecated({
 		mutation: { retry: retryOn429 },
 	});
-	const { mutateAsync: deleteRole } = useDeleteServiceAccountRole({
+	const { mutateAsync: deleteRole } = useDeleteServiceAccountRoleDeprecated({
 		mutation: { retry: retryOn429 },
 	});
 

frontend/src/lib/authz/README.md

@@ -0,0 +1,21 @@
+# AuthZ
+
+Permission-based authorization system for SigNoz frontend.
+
+## Supported Resources
+
+See [hooks/useAuthZ/permissions.type.ts](./hooks/useAuthZ/permissions.type.ts) for available resources and verbs.
+
+If your page/content represents a resource not listed there, skip authz implementation — the backend doesn't enforce it yet.
+
+## UI Gating
+
+Need to gate UI based on permissions? See [components/README.md](./components/README.md).
+
+Covers: AuthZButton, AuthZTooltip, withAuthZ*, AuthZGuard*, when to use each.
+
+## Testing
+
+Need to test authz behavior? See [utils/README.md](./utils/README.md).
+
+Covers: MSW handlers, mock hooks, test patterns.

frontend/src/lib/authz/components/AuthZButton/AuthZButton.authz.test.tsx

@@ -0,0 +1,81 @@
+import { ReactElement } from 'react';
+import { render, screen } from 'tests/test-utils';
+import AuthZTooltip from 'lib/authz/components/AuthZTooltip/AuthZTooltip';
+import type { AuthZObject } from 'lib/authz/hooks/useAuthZ/types';
+import { buildPermission } from 'lib/authz/hooks/useAuthZ/utils';
+
+import AuthZButton from './AuthZButton';
+
+// AuthZButton is a thin composition over AuthZTooltip + Button. The denial
+// tooltip / disabled-on-deny UX is owned and tested by AuthZTooltip; here we
+// assert AuthZButton forwards the right props and renders a Button child.
+jest.mock('lib/authz/components/AuthZTooltip/AuthZTooltip');
+const mockTooltip = AuthZTooltip as unknown as jest.Mock;
+
+const createPerm = buildPermission(
+	'create',
+	'serviceaccount:*' as AuthZObject<'create'>,
+);
+
+describe('AuthZButton', () => {
+	beforeEach(() => {
+		mockTooltip.mockImplementation(
+			({ children }: { children: ReactElement }) => children,
+		);
+	});
+
+	afterEach(() => {
+		mockTooltip.mockReset();
+	});
+
+	it('renders a Button child with forwarded props', () => {
+		render(
+			<AuthZButton checks={[createPerm]} testId="create-btn">
+				Create
+			</AuthZButton>,
+		);
+
+		expect(screen.getByTestId('create-btn')).toBeInTheDocument();
+		expect(screen.getByTestId('create-btn').tagName).toBe('BUTTON');
+	});
+
+	it('forwards checks and enables the check by default', () => {
+		render(
+			<AuthZButton checks={[createPerm]} testId="create-btn">
+				Create
+			</AuthZButton>,
+		);
+
+		expect(mockTooltip).toHaveBeenCalledTimes(1);
+		expect(mockTooltip.mock.calls[0][0]).toMatchObject({
+			checks: [createPerm],
+			enabled: true,
+		});
+	});
+
+	it('forwards a custom tooltipMessage', () => {
+		render(
+			<AuthZButton
+				checks={[createPerm]}
+				tooltipMessage="Ask an admin"
+				testId="create-btn"
+			>
+				Create
+			</AuthZButton>,
+		);
+
+		expect(mockTooltip.mock.calls[0][0]).toMatchObject({
+			tooltipMessage: 'Ask an admin',
+		});
+	});
+
+	it('passes authZEnabled through as the tooltip enabled flag', () => {
+		render(
+			<AuthZButton checks={[createPerm]} authZEnabled={false} testId="create-btn">
+				Create
+			</AuthZButton>,
+		);
+
+		expect(mockTooltip.mock.calls[0][0]).toMatchObject({ enabled: false });
+	});
+});

frontend/src/lib/authz/components/AuthZButton/AuthZButton.tsx

@@ -0,0 +1,37 @@
+import { Button, ButtonProps } from '@signozhq/ui/button';
+import AuthZTooltip from 'lib/authz/components/AuthZTooltip/AuthZTooltip';
+import type { BrandedPermission } from 'lib/authz/hooks/useAuthZ/types';
+
+export type AuthZButtonProps = ButtonProps & {
+	/**
+	 * Permissions required to enable the button (AND semantics).
+	 */
+	checks: BrandedPermission[];
+	/**
+	 * Override the default denial tooltip message.
+	 */
+	tooltipMessage?: string;
+	/**
+	 * Gate the permission check itself. When false, renders a plain button.
+	 */
+	authZEnabled?: boolean;
+};
+
+function AuthZButton({
+	checks,
+	tooltipMessage,
+	authZEnabled = true,
+	...buttonProps
+}: AuthZButtonProps): JSX.Element {
+	return (
+		<AuthZTooltip
+			checks={checks}
+			enabled={authZEnabled}
+			tooltipMessage={tooltipMessage}
+		>
+			<Button {...buttonProps} />
+		</AuthZTooltip>
+	);
+}
+
+export default AuthZButton;

frontend/src/lib/authz/components/AuthZGuard/AuthZGuard.authz.test.tsx

@@ -0,0 +1,202 @@
+import { render, screen, waitFor } from 'tests/test-utils';
+import { server } from 'mocks-server/server';
+import { rest } from 'msw';
+import {
+	AUTHZ_CHECK_URL,
+	setupAuthzAllow,
+	setupAuthzDeny,
+} from 'lib/authz/utils/authz-test-utils';
+import type { AuthZObject } from 'lib/authz/hooks/useAuthZ/types';
+import { buildPermission } from 'lib/authz/hooks/useAuthZ/utils';
+
+import { AuthZGuard } from './AuthZGuard';
+import { AuthZGuardContent } from './AuthZGuardContent';
+import { AuthZGuardPage } from './AuthZGuardPage';
+
+const readPerm = buildPermission('read', 'role:*' as AuthZObject<'read'>);
+
+const Protected = (): JSX.Element => <div>Protected content</div>;
+
+describe('AuthZGuard', () => {
+	it('renders children when allowed', async () => {
+		server.use(setupAuthzAllow(readPerm));
+
+		render(
+			<AuthZGuard checks={[readPerm]}>
+				<Protected />
+			</AuthZGuard>,
+		);
+
+		await waitFor(() => {
+			expect(screen.getByText('Protected content')).toBeInTheDocument();
+		});
+	});
+
+	it('renders the fallback when denied', async () => {
+		server.use(setupAuthzDeny(readPerm));
+
+		render(
+			<AuthZGuard checks={[readPerm]} fallback={<div>No access</div>}>
+				<Protected />
+			</AuthZGuard>,
+		);
+
+		await waitFor(() => {
+			expect(screen.getByText('No access')).toBeInTheDocument();
+		});
+		expect(screen.queryByText('Protected content')).not.toBeInTheDocument();
+	});
+
+	it('passes denied permissions to a function fallback', async () => {
+		server.use(setupAuthzDeny(readPerm));
+
+		render(
+			<AuthZGuard
+				checks={[readPerm]}
+				fallback={({ deniedPermissions }): JSX.Element => (
+					<div>denied: {deniedPermissions.length}</div>
+				)}
+			>
+				<Protected />
+			</AuthZGuard>,
+		);
+
+		await waitFor(() => {
+			expect(screen.getByText('denied: 1')).toBeInTheDocument();
+		});
+	});
+
+	it('renders nothing for a denied check with no fallback', async () => {
+		server.use(setupAuthzDeny(readPerm));
+
+		const { container } = render(
+			<AuthZGuard checks={[readPerm]}>
+				<Protected />
+			</AuthZGuard>,
+		);
+
+		await waitFor(() => {
+			expect(screen.queryByText('Protected content')).not.toBeInTheDocument();
+		});
+		expect(container).toBeEmptyDOMElement();
+	});
+
+	it('renders the loading fallback while checking', () => {
+		server.use(setupAuthzAllow(readPerm));
+
+		render(
+			<AuthZGuard checks={[readPerm]} fallbackOnLoading={<div>Loading…</div>}>
+				<Protected />
+			</AuthZGuard>,
+		);
+
+		expect(screen.getByText('Loading…')).toBeInTheDocument();
+	});
+
+	it('fails open on error by default (renders children)', async () => {
+		server.use(
+			rest.post(AUTHZ_CHECK_URL, (_req, res, ctx) =>
+				res(ctx.status(500), ctx.json({ error: 'boom' })),
+			),
+		);
+
+		render(
+			<AuthZGuard checks={[readPerm]} fallback={<div>No access</div>}>
+				<Protected />
+			</AuthZGuard>,
+		);
+
+		await waitFor(() => {
+			expect(screen.getByText('Protected content')).toBeInTheDocument();
+		});
+	});
+
+	it('renders the fallback on error when failOpenOnError is false', async () => {
+		server.use(
+			rest.post(AUTHZ_CHECK_URL, (_req, res, ctx) =>
+				res(ctx.status(500), ctx.json({ error: 'boom' })),
+			),
+		);
+
+		render(
+			<AuthZGuard
+				checks={[readPerm]}
+				onFailRenderContent={false}
+				fallback={<div>No access</div>}
+			>
+				<Protected />
+			</AuthZGuard>,
+		);
+
+		await waitFor(() => {
+			expect(screen.getByText('No access')).toBeInTheDocument();
+		});
+		expect(screen.queryByText('Protected content')).not.toBeInTheDocument();
+	});
+});
+
+describe('AuthZGuardPage', () => {
+	it('renders the full-page denied screen when denied', async () => {
+		server.use(setupAuthzDeny(readPerm));
+
+		render(
+			<AuthZGuardPage checks={[readPerm]}>
+				<Protected />
+			</AuthZGuardPage>,
+		);
+
+		await waitFor(() => {
+			expect(
+				screen.getByText('Uh-oh! You are not authorized'),
+			).toBeInTheDocument();
+		});
+		expect(screen.getByText('read:role:*')).toBeInTheDocument();
+	});
+
+	it('renders the app loader while checking', () => {
+		server.use(setupAuthzDeny(readPerm));
+
+		render(
+			<AuthZGuardPage checks={[readPerm]}>
+				<Protected />
+			</AuthZGuardPage>,
+		);
+
+		expect(
+			screen.getByText(
+				'OpenTelemetry-Native Logs, Metrics and Traces in a single pane',
+			),
+		).toBeInTheDocument();
+	});
+});
+
+describe('AuthZGuardContent', () => {
+	it('renders the denied callout when denied', async () => {
+		server.use(setupAuthzDeny(readPerm));
+
+		render(
+			<AuthZGuardContent checks={[readPerm]}>
+				<Protected />
+			</AuthZGuardContent>,
+		);
+
+		await waitFor(() => {
+			expect(screen.getByText('read:role:*')).toBeInTheDocument();
+		});
+		expect(screen.queryByText('Protected content')).not.toBeInTheDocument();
+	});
+
+	it('renders children when allowed', async () => {
+		server.use(setupAuthzAllow(readPerm));
+
+		render(
+			<AuthZGuardContent checks={[readPerm]}>
+				<Protected />
+			</AuthZGuardContent>,
+		);
+
+		await waitFor(() => {
+			expect(screen.getByText('Protected content')).toBeInTheDocument();
+		});
+	});
+});

frontend/src/lib/authz/components/AuthZGuard/AuthZGuard.tsx

@@ -0,0 +1,82 @@
+import { ReactElement, ReactNode, useMemo } from 'react';
+import type { BrandedPermission } from 'lib/authz/hooks/useAuthZ/types';
+import { useAuthZ } from 'lib/authz/hooks/useAuthZ/useAuthZ';
+
+export type AuthZGuardFallback =
+	| ReactNode
+	| ((info: { deniedPermissions: BrandedPermission[] }) => ReactNode);
+
+export type AuthZGuardProps = {
+	/**
+	 * Permissions required to render `children` (AND semantics).
+	 */
+	checks: BrandedPermission[];
+	children: ReactElement;
+	/**
+	 * Rendered when denied. A function receives the denied permissions.
+	 */
+	fallback?: AuthZGuardFallback;
+	fallbackOnLoading?: ReactNode;
+	/**
+	 * By default, we don't expect the check API request to fail, in those cases, we prefer to show the content and then let the API fail (during list/create).
+	 *
+	 * In case you want to have a different behavior when request fail, set to false.
+	 *
+	 * @default true
+	 */
+	onFailRenderContent?: boolean;
+};
+
+function resolveFallback(
+	fallback: AuthZGuardFallback | undefined,
+	deniedPermissions: BrandedPermission[],
+): ReactNode {
+	if (typeof fallback === 'function') {
+		return fallback({ deniedPermissions });
+	}
+	return fallback ?? null;
+}
+
+export function AuthZGuard({
+	checks,
+	children,
+	fallback,
+	fallbackOnLoading,
+	onFailRenderContent = true,
+}: AuthZGuardProps): JSX.Element | null {
+	const { isLoading, error, permissions } = useAuthZ(checks);
+
+	// TODO(authz): Use allowed/deniedPermissions from useAuthZ after devtools PR merges
+	const { allowed, deniedPermissions } = useMemo(() => {
+		if (!permissions) {
+			return { allowed: false, deniedPermissions: [] as BrandedPermission[] };
+		}
+
+		const denied = Object.entries(permissions)
+			.filter(([, { isGranted }]) => !isGranted)
+			.map(([perm]) => perm as BrandedPermission);
+
+		return {
+			allowed: denied.length === 0,
+			deniedPermissions: denied,
+		};
+	}, [permissions]);
+
+	if (isLoading) {
+		return <>{fallbackOnLoading ?? null}</>;
+	}
+
+	if (error) {
+		return onFailRenderContent ? (
+			children
+		) : (
+			<>{resolveFallback(fallback, deniedPermissions)}</>
+		);
+	}
+
+	if (!allowed) {
+		return <>{resolveFallback(fallback, deniedPermissions)}</>;
+	}
+
+	return children;
+}

frontend/src/lib/authz/components/AuthZGuard/AuthZGuardContent.tsx

@@ -0,0 +1,21 @@
+import { ReactElement } from 'react';
+import PermissionDeniedCallout from 'lib/authz/components/PermissionDeniedCallout/PermissionDeniedCallout';
+
+import { AuthZGuard, AuthZGuardProps } from './AuthZGuard';
+
+export function AuthZGuardContent({
+	fallback,
+	...rest
+}: AuthZGuardProps): JSX.Element | null {
+	return (
+		<AuthZGuard
+			{...rest}
+			fallback={
+				fallback ??
+				(({ deniedPermissions }): ReactElement => (
+					<PermissionDeniedCallout deniedPermissions={deniedPermissions} />
+				))
+			}
+		/>
+	);
+}

frontend/src/lib/authz/components/AuthZGuard/AuthZGuardPage.tsx

@@ -0,0 +1,24 @@
+import { ReactElement } from 'react';
+import AppLoading from 'components/AppLoading/AppLoading';
+import PermissionDeniedFullPage from 'lib/authz/components/PermissionDeniedFullPage/PermissionDeniedFullPage';
+
+import { AuthZGuard, AuthZGuardProps } from './AuthZGuard';
+
+export function AuthZGuardPage({
+	fallback,
+	fallbackOnLoading,
+	...rest
+}: AuthZGuardProps): JSX.Element | null {
+	return (
+		<AuthZGuard
+			{...rest}
+			fallbackOnLoading={fallbackOnLoading ?? <AppLoading />}
+			fallback={
+				fallback ??
+				(({ deniedPermissions }): ReactElement => (
+					<PermissionDeniedFullPage deniedPermissions={deniedPermissions} />
+				))
+			}
+		/>
+	);
+}

frontend/src/lib/authz/components/AuthZTooltip/AuthZTooltip.authz.test.tsx

@@ -16,6 +16,8 @@ const noPermissions = {
 	isFetching: false,
 	error: null,
 	permissions: null,
+	allowed: false,
+	deniedPermissions: [] as BrandedPermission[],
 	refetchPermissions: jest.fn(),
 };
 
@@ -160,11 +162,11 @@ describe('AuthZTooltip — multi-check (checks array)', () => {
 			</AuthZTooltip>,
 		);
 
-		expect(screen.getByRole('button', { name: 'Action' })).toBeDisabled();
+		const button = screen.getByRole('button', { name: 'Action' });
+		expect(button).toBeDisabled();
 
-		const wrapper = screen.getByRole('button', { name: 'Action' }).parentElement;
-		expect(wrapper?.getAttribute('data-denied-permissions')).toContain(sa);
-		expect(wrapper?.getAttribute('data-denied-permissions')).toContain(
+		expect(button.getAttribute('data-denied-permissions')).toContain(sa);
+		expect(button.getAttribute('data-denied-permissions')).toContain(
 			attachRolePerm,
 		);
 	});

frontend/src/lib/authz/components/AuthZTooltip/AuthZTooltip.module.scss

@@ -1,7 +1,3 @@
-.wrapper {
-	cursor: not-allowed;
-}
-
 .errorContent {
 	background: var(--callout-error-background) !important;
 	border-color: var(--callout-error-border) !important;

frontend/src/lib/authz/components/AuthZTooltip/AuthZTooltip.tsx

@@ -1,4 +1,4 @@
-import { ReactElement, cloneElement, useMemo } from 'react';
+import { CSSProperties, ReactElement, cloneElement, useMemo } from 'react';
 import {
 	TooltipRoot,
 	TooltipContent,
@@ -11,6 +11,13 @@ import { formatPermission } from 'lib/authz/hooks/useAuthZ/utils';
 import { useAppContext } from 'providers/App/App';
 import styles from './AuthZTooltip.module.scss';
 
+const DISABLED_STYLE: CSSProperties = {
+	pointerEvents: 'all',
+	cursor: 'not-allowed',
+};
+
+const noOp = (): void => {};
+
 interface AuthZTooltipProps {
 	checks: BrandedPermission[];
 	children: ReactElement;
@@ -49,11 +56,13 @@ function AuthZTooltip({
 	}, [checks, permissions]);
 
 	if (shouldCheck && isLoading) {
-		return (
-			<span className={styles.wrapper}>
-				{cloneElement(children, { disabled: true })}
-			</span>
-		);
+		return cloneElement(children, {
+			disabled: true,
+			style: DISABLED_STYLE,
+			onClick: noOp,
+			onMouseDown: noOp,
+			onPointerDown: noOp,
+		});
 	}
 
 	if (!shouldCheck || deniedPermissions.length === 0) {
@@ -64,12 +73,14 @@ function AuthZTooltip({
 		<TooltipProvider>
 			<TooltipRoot>
 				<TooltipTrigger asChild>
-					<span
-						className={styles.wrapper}
-						data-denied-permissions={deniedPermissions.join(',')}
-					>
-						{cloneElement(children, { disabled: true })}
-					</span>
+					{cloneElement(children, {
+						disabled: true,
+						style: DISABLED_STYLE,
+						onClick: noOp,
+						onMouseDown: noOp,
+						onPointerDown: noOp,
+						'data-denied-permissions': deniedPermissions.join(','),
+					})}
 				</TooltipTrigger>
 				<TooltipContent className={styles.errorContent}>
 					{formatDeniedMessage(deniedPermissions, user.id, tooltipMessage)}

frontend/src/lib/authz/components/GuardAuthZ/GuardAuthZ.authz.test.tsx

@@ -1,263 +0,0 @@
-import { ReactElement } from 'react';
-import { BrandedPermission } from 'lib/authz/hooks/useAuthZ/types';
-import { buildPermission } from 'lib/authz/hooks/useAuthZ/utils';
-import { server } from 'mocks-server/server';
-import { rest } from 'msw';
-import { render, screen, waitFor } from 'tests/test-utils';
-import {
-	AUTHZ_CHECK_URL,
-	authzMockResponse,
-} from 'lib/authz/utils/authz-test-utils';
-
-import { GuardAuthZ } from './GuardAuthZ';
-
-describe('GuardAuthZ', () => {
-	const TestChild = (): ReactElement => <div>Protected Content</div>;
-	const LoadingFallback = (): ReactElement => <div>Loading...</div>;
-	const NoPermissionFallback = (_response: {
-		requiredPermissionName: BrandedPermission;
-	}): ReactElement => <div>Access denied</div>;
-	const NoPermissionFallbackWithSuggestions = (response: {
-		requiredPermissionName: BrandedPermission;
-	}): ReactElement => (
-		<div>
-			Access denied. Required permission: {response.requiredPermissionName}
-		</div>
-	);
-
-	it('should render children when permission is granted', async () => {
-		server.use(
-			rest.post(AUTHZ_CHECK_URL, async (req, res, ctx) => {
-				const payload = await req.json();
-				return res(ctx.status(200), ctx.json(authzMockResponse(payload, [true])));
-			}),
-		);
-
-		render(
-			<GuardAuthZ relation="read" object="role:*">
-				<TestChild />
-			</GuardAuthZ>,
-		);
-
-		await waitFor(() => {
-			expect(screen.getByText('Protected Content')).toBeInTheDocument();
-		});
-	});
-
-	it('should render fallbackOnLoading when loading', () => {
-		server.use(
-			rest.post(AUTHZ_CHECK_URL, async (_req, res, ctx) => {
-				return res(
-					ctx.delay('infinite'),
-					ctx.status(200),
-					ctx.json({ data: [], status: 'success' }),
-				);
-			}),
-		);
-
-		render(
-			<GuardAuthZ
-				relation="read"
-				object="role:*"
-				fallbackOnLoading={<LoadingFallback />}
-			>
-				<TestChild />
-			</GuardAuthZ>,
-		);
-
-		expect(screen.getByText('Loading...')).toBeInTheDocument();
-		expect(screen.queryByText('Protected Content')).not.toBeInTheDocument();
-	});
-
-	it('should render null when loading and no fallbackOnLoading provided', () => {
-		server.use(
-			rest.post(AUTHZ_CHECK_URL, async (_req, res, ctx) => {
-				return res(
-					ctx.delay('infinite'),
-					ctx.status(200),
-					ctx.json({ data: [], status: 'success' }),
-				);
-			}),
-		);
-
-		const { container } = render(
-			<GuardAuthZ relation="read" object="role:*">
-				<TestChild />
-			</GuardAuthZ>,
-		);
-
-		expect(container.firstChild).toBeNull();
-		expect(screen.queryByText('Protected Content')).not.toBeInTheDocument();
-	});
-
-	it('should render children when API error occurs and no fallbackOnError provided (fail open)', async () => {
-		server.use(
-			rest.post(AUTHZ_CHECK_URL, (_req, res, ctx) => {
-				return res(ctx.status(500), ctx.json({ error: 'Internal Server Error' }));
-			}),
-		);
-
-		render(
-			<GuardAuthZ relation="read" object="role:*">
-				<TestChild />
-			</GuardAuthZ>,
-		);
-
-		await waitFor(() => {
-			expect(screen.getByText('Protected Content')).toBeInTheDocument();
-		});
-	});
-
-	it('should render fallbackOnError when API error occurs and fallbackOnError is provided', async () => {
-		server.use(
-			rest.post(AUTHZ_CHECK_URL, (_req, res, ctx) => {
-				return res(ctx.status(500), ctx.json({ error: 'Internal Server Error' }));
-			}),
-		);
-
-		render(
-			<GuardAuthZ
-				relation="read"
-				object="role:*"
-				fallbackOnError={<div>Custom error fallback</div>}
-			>
-				<TestChild />
-			</GuardAuthZ>,
-		);
-
-		await waitFor(() => {
-			expect(screen.getByText('Custom error fallback')).toBeInTheDocument();
-		});
-
-		expect(screen.queryByText('Protected Content')).not.toBeInTheDocument();
-	});
-
-	it('should render fallbackOnNoPermissions when permission is denied', async () => {
-		server.use(
-			rest.post(AUTHZ_CHECK_URL, async (req, res, ctx) => {
-				const payload = await req.json();
-				return res(ctx.status(200), ctx.json(authzMockResponse(payload, [false])));
-			}),
-		);
-
-		render(
-			<GuardAuthZ
-				relation="update"
-				object="role:123"
-				fallbackOnNoPermissions={NoPermissionFallback}
-			>
-				<TestChild />
-			</GuardAuthZ>,
-		);
-
-		await waitFor(() => {
-			expect(screen.getByText('Access denied')).toBeInTheDocument();
-		});
-
-		expect(screen.queryByText('Protected Content')).not.toBeInTheDocument();
-	});
-
-	it('should render null when permission is denied and no fallbackOnNoPermissions provided', async () => {
-		server.use(
-			rest.post(AUTHZ_CHECK_URL, async (req, res, ctx) => {
-				const payload = await req.json();
-				return res(ctx.status(200), ctx.json(authzMockResponse(payload, [false])));
-			}),
-		);
-
-		const { container } = render(
-			<GuardAuthZ relation="update" object="role:123">
-				<TestChild />
-			</GuardAuthZ>,
-		);
-
-		await waitFor(() => {
-			expect(container.firstChild).toBeNull();
-		});
-
-		expect(screen.queryByText('Protected Content')).not.toBeInTheDocument();
-	});
-
-	it('should render null when permissions object is null', async () => {
-		server.use(
-			rest.post(AUTHZ_CHECK_URL, (_req, res, ctx) => {
-				return res(ctx.status(200), ctx.json({ data: [], status: 'success' }));
-			}),
-		);
-
-		const { container } = render(
-			<GuardAuthZ relation="read" object="role:*">
-				<TestChild />
-			</GuardAuthZ>,
-		);
-
-		await waitFor(() => {
-			expect(container.firstChild).toBeNull();
-		});
-
-		expect(screen.queryByText('Protected Content')).not.toBeInTheDocument();
-	});
-
-	it('should pass requiredPermissionName to fallbackOnNoPermissions', async () => {
-		const permission = buildPermission('update', 'role:123');
-
-		server.use(
-			rest.post(AUTHZ_CHECK_URL, async (req, res, ctx) => {
-				const payload = await req.json();
-				return res(ctx.status(200), ctx.json(authzMockResponse(payload, [false])));
-			}),
-		);
-
-		render(
-			<GuardAuthZ
-				relation="update"
-				object="role:123"
-				fallbackOnNoPermissions={NoPermissionFallbackWithSuggestions}
-			>
-				<TestChild />
-			</GuardAuthZ>,
-		);
-
-		await waitFor(() => {
-			expect(
-				screen.getByText(/Access denied. Required permission:/),
-			).toBeInTheDocument();
-		});
-
-		expect(
-			screen.getAllByText(
-				new RegExp(permission.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')),
-			).length,
-		).toBeGreaterThan(0);
-		expect(screen.queryByText('Protected Content')).not.toBeInTheDocument();
-	});
-
-	it('should handle different relation and object combinations', async () => {
-		server.use(
-			rest.post(AUTHZ_CHECK_URL, async (req, res, ctx) => {
-				const payload = await req.json();
-				return res(ctx.status(200), ctx.json(authzMockResponse(payload, [true])));
-			}),
-		);
-
-		const { rerender } = render(
-			<GuardAuthZ relation="read" object="role:*">
-				<TestChild />
-			</GuardAuthZ>,
-		);
-
-		await waitFor(() => {
-			expect(screen.getByText('Protected Content')).toBeInTheDocument();
-		});
-
-		rerender(
-			<GuardAuthZ relation="delete" object="role:456">
-				<TestChild />
-			</GuardAuthZ>,
-		);
-
-		await waitFor(() => {
-			expect(screen.getByText('Protected Content')).toBeInTheDocument();
-		});
-	});
-});

frontend/src/lib/authz/components/GuardAuthZ/GuardAuthZ.tsx

@@ -1,50 +0,0 @@
-import { ReactElement } from 'react';
-import {
-	AuthZObject,
-	AuthZRelation,
-	BrandedPermission,
-} from 'lib/authz/hooks/useAuthZ/types';
-import { useAuthZ } from 'lib/authz/hooks/useAuthZ/useAuthZ';
-import { buildPermission } from 'lib/authz/hooks/useAuthZ/utils';
-
-export type GuardAuthZProps<R extends AuthZRelation> = {
-	children: ReactElement;
-	relation: R;
-	object: AuthZObject<R>;
-	fallbackOnLoading?: JSX.Element;
-	fallbackOnError?: JSX.Element;
-	fallbackOnNoPermissions?: (response: {
-		requiredPermissionName: BrandedPermission;
-	}) => JSX.Element;
-};
-
-export function GuardAuthZ<R extends AuthZRelation>({
-	children,
-	relation,
-	object,
-	fallbackOnLoading,
-	fallbackOnError,
-	fallbackOnNoPermissions,
-}: GuardAuthZProps<R>): JSX.Element | null {
-	const permission = buildPermission<R>(relation, object);
-
-	const { permissions, isLoading, error } = useAuthZ([permission]);
-
-	if (isLoading) {
-		return fallbackOnLoading ?? null;
-	}
-
-	if (error) {
-		return fallbackOnError ?? children;
-	}
-
-	if (!permissions?.[permission]?.isGranted) {
-		return (
-			fallbackOnNoPermissions?.({
-				requiredPermissionName: permission,
-			}) ?? null
-		);
-	}
-
-	return children;
-}

frontend/src/lib/authz/components/PermissionDeniedCallout/PermissionDeniedCallout.test.tsx

@@ -1,18 +1,39 @@
 import { render, screen } from 'tests/test-utils';
 import PermissionDeniedCallout from './PermissionDeniedCallout';
+import {
+	buildPermission,
+	buildObjectString,
+} from 'lib/authz/hooks/useAuthZ/utils';
 
 describe('PermissionDeniedCallout', () => {
 	it('renders the permission name in the callout message', () => {
-		render(<PermissionDeniedCallout permissionName="serviceaccount:attach" />);
+		const deniedPermissions = [
+			buildPermission('read', buildObjectString('serviceaccount', '*')),
+		];
+		render(<PermissionDeniedCallout deniedPermissions={deniedPermissions} />);
 
 		expect(screen.getByText(/is not authorized/)).toBeInTheDocument();
-		expect(screen.getByText(/serviceaccount:attach/)).toBeInTheDocument();
+		expect(screen.getByText(/read:serviceaccount:\*/)).toBeInTheDocument();
+	});
+
+	it('renders multiple denied permissions', () => {
+		const deniedPermissions = [
+			buildPermission('read', buildObjectString('serviceaccount', '*')),
+			buildPermission('update', buildObjectString('role', 'admin')),
+		];
+		render(<PermissionDeniedCallout deniedPermissions={deniedPermissions} />);
+
+		expect(screen.getByText(/read:serviceaccount:\*/)).toBeInTheDocument();
+		expect(screen.getByText(/update:role:admin/)).toBeInTheDocument();
 	});
 
 	it('accepts an optional className', () => {
+		const deniedPermissions = [
+			buildPermission('read', buildObjectString('serviceaccount', '*')),
+		];
 		const { container } = render(
 			<PermissionDeniedCallout
-				permissionName="serviceaccount:read"
+				deniedPermissions={deniedPermissions}
 				className="custom-class"
 			/>,
 		);

frontend/src/lib/authz/components/PermissionDeniedCallout/PermissionDeniedCallout.tsx

@@ -3,18 +3,32 @@ import cx from 'classnames';
 import styles from './PermissionDeniedCallout.module.scss';
 import { useAppContext } from 'providers/App/App';
 import { Typography } from '@signozhq/ui/typography';
+import { BrandedPermission } from 'lib/authz/hooks/useAuthZ/types';
+import { formatPermission } from 'lib/authz/hooks/useAuthZ/utils';
 
-interface PermissionDeniedCalloutProps {
-	permissionName: string;
+export interface PermissionDeniedCalloutProps {
+	/**
+	 * @deprecated Use `deniedPermissions` instead. Will be removed after authz devtools PR merges.
+	 */
+	permissionName?: string;
+	deniedPermissions?: BrandedPermission[];
 	className?: string;
 }
 
 function PermissionDeniedCallout({
 	permissionName,
+	deniedPermissions,
 	className,
 }: PermissionDeniedCalloutProps): JSX.Element {
 	const { user } = useAppContext();
 
+	// TODO(authz): Remove permissionName support after devtools PR merges
+	const formattedPermissions = deniedPermissions
+		? deniedPermissions.map(formatPermission)
+		: permissionName
+			? [permissionName]
+			: [];
+
 	return (
 		<Callout
 			type="error"
@@ -25,7 +39,12 @@ function PermissionDeniedCallout({
 			<Typography.Text className={styles.permission}>
 				<code className={styles.permissionCode}>user/{user.id}</code> is not
 				authorized to perform{' '}
-				<code className={styles.permissionCode}>{permissionName}</code>
+				{formattedPermissions.map((perm, idx) => (
+					<span key={perm}>
+						<code className={styles.permissionCode}>{perm}</code>
+						{idx < formattedPermissions.length - 1 && ', '}
+					</span>
+				))}
 			</Typography.Text>
 		</Callout>
 	);

frontend/src/lib/authz/components/PermissionDeniedFullPage/PermissionDeniedFullPage.test.tsx

@@ -1,17 +1,29 @@
 import { render, screen } from 'tests/test-utils';
 import PermissionDeniedFullPage from './PermissionDeniedFullPage';
+import {
+	buildPermission,
+	buildObjectString,
+} from 'lib/authz/hooks/useAuthZ/utils';
 
 describe('PermissionDeniedFullPage', () => {
 	it('renders the title and subtitle with the permissionName interpolated', () => {
-		render(<PermissionDeniedFullPage permissionName="serviceaccount:list" />);
+		const deniedPermissions = [
+			buildPermission('read', buildObjectString('serviceaccount', '*')),
+		];
+		render(<PermissionDeniedFullPage deniedPermissions={deniedPermissions} />);
 
 		expect(screen.getByText('Uh-oh! You are not authorized')).toBeInTheDocument();
-		expect(screen.getByText(/serviceaccount:list/)).toBeInTheDocument();
+		expect(screen.getByText(/read:serviceaccount:\*/)).toBeInTheDocument();
 		expect(screen.getByText(/is not authorized to perform/)).toBeInTheDocument();
 	});
 
-	it('renders with a different permissionName', () => {
-		render(<PermissionDeniedFullPage permissionName="role:read" />);
-		expect(screen.getByText(/role:read/)).toBeInTheDocument();
+	it('renders with multiple denied permissions', () => {
+		const deniedPermissions = [
+			buildPermission('read', buildObjectString('role', 'admin')),
+			buildPermission('update', buildObjectString('role', 'admin')),
+		];
+		render(<PermissionDeniedFullPage deniedPermissions={deniedPermissions} />);
+		expect(screen.getByText(/read:role:admin/)).toBeInTheDocument();
+		expect(screen.getByText(/update:role:admin/)).toBeInTheDocument();
 	});
 });

frontend/src/lib/authz/components/PermissionDeniedFullPage/PermissionDeniedFullPage.tsx

@@ -3,16 +3,30 @@ import { CircleSlash2 } from '@signozhq/icons';
 import styles from './PermissionDeniedFullPage.module.scss';
 import { Style } from '@signozhq/design-tokens';
 import { useAppContext } from 'providers/App/App';
+import { BrandedPermission } from 'lib/authz/hooks/useAuthZ/types';
+import { formatPermission } from 'lib/authz/hooks/useAuthZ/utils';
 
-interface PermissionDeniedFullPageProps {
-	permissionName: string;
+export interface PermissionDeniedFullPageProps {
+	/**
+	 * @deprecated Use `deniedPermissions` instead. Will be removed after authz devtools PR merges.
+	 */
+	permissionName?: string;
+	deniedPermissions?: BrandedPermission[];
 }
 
 function PermissionDeniedFullPage({
 	permissionName,
+	deniedPermissions,
 }: PermissionDeniedFullPageProps): JSX.Element {
 	const { user } = useAppContext();
 
+	// TODO(authz): Remove permissionName support after devtools PR merges
+	const formattedPermissions = deniedPermissions
+		? deniedPermissions.map(formatPermission)
+		: permissionName
+			? [permissionName]
+			: [];
+
 	return (
 		<div className={styles.container}>
 			<div className={styles.content}>
@@ -22,7 +36,13 @@ function PermissionDeniedFullPage({
 				<p className={styles.title}>Uh-oh! You are not authorized</p>
 				<p className={styles.subtitle}>
 					<code className={styles.permission}>user/{user.id}</code> is not authorized
-					to perform <code className={styles.permission}>{permissionName}</code>
+					to perform{' '}
+					{formattedPermissions.map((perm, idx) => (
+						<span key={perm}>
+							<code className={styles.permission}>{perm}</code>
+							{idx < formattedPermissions.length - 1 && ', '}
+						</span>
+					))}
 				</p>
 			</div>
 		</div>

frontend/src/lib/authz/components/README.md

@@ -0,0 +1,185 @@
+# AuthZ Components
+
+Quick reference for permission-gating UI. All components use AND semantics: user needs ALL permissions in `checks` array.
+
+## Decision Tree
+
+```
+Need to gate...
+├── A button? → AuthZButton
+├── Any element with tooltip on deny? → AuthZTooltip
+├── A section inside a page? → withAuthZContent (preferred)
+│   └── Need JSX wrapper? → AuthZGuardContent
+├── An entire page/route? → withAuthZPage (preferred)
+│   └── Need JSX wrapper? → AuthZGuardPage
+├── Need full control over fallback? → withAuthZ / AuthZGuard
+└── None of above fit?
+    ├── Can create wrapper component? → Create it (like AuthZButton)
+    └── Last resort → useAuthZ hook directly
+```
+
+## Building Permissions
+
+Use `buildPermission`, `buildObjectString` or pre-built constants. Never cast with `as BrandedPermission`.
+
+```tsx
+import { buildPermission, buildObjectString } from 'lib/authz/hooks/useAuthZ/utils';
+import { 
+  RoleCreatePermission,
+  buildRoleReadPermission 
+} from 'lib/authz/hooks/useAuthZ/permissions/role.permissions';
+
+// Static permission (pre-built)
+const checks = [RoleCreatePermission];
+
+// Dynamic permission (builder fn)
+const checks = [buildRoleReadPermission(roleId)];
+
+// Custom permission (buildPermission + buildObjectString)
+const checks = [buildPermission('read', buildObjectString('dashboard', dashboardId))];
+```
+
+## Creating Permission Helpers
+
+When adding authz to a new resource, create a permissions file under `lib/authz/hooks/useAuthZ/permissions/`.
+
+```tsx
+// lib/authz/hooks/useAuthZ/permissions/dashboard.permissions.ts
+import { buildPermission } from '../utils';
+import type { BrandedPermission } from '../types';
+
+// Collection-level — wildcard, no specific id needed
+export const DashboardCreatePermission = buildPermission('create', 'dashboard:*');
+export const DashboardListPermission = buildPermission('list', 'dashboard:*');
+
+// Resource-level — require specific id
+export const buildDashboardReadPermission = (id: string): BrandedPermission =>
+  buildPermission('read', `dashboard:${id}`);
+export const buildDashboardUpdatePermission = (id: string): BrandedPermission =>
+  buildPermission('update', `dashboard:${id}`);
+export const buildDashboardDeletePermission = (id: string): BrandedPermission =>
+  buildPermission('delete', `dashboard:${id}`);
+```
+
+Pattern:
+- `<Resource><Action>Permission` → collection-level const (wildcard `*`)
+- `build<Resource><Action>Permission(id)` → resource-level fn (specific id)
+
+## Components
+
+### AuthZButton
+
+Button that disables + shows tooltip when denied.
+
+```tsx
+import { SACreatePermission } from 'lib/authz/hooks/useAuthZ/permissions/service-account.permissions';
+
+<AuthZButton checks={[SACreatePermission]} onClick={handleCreate}>
+  Create
+</AuthZButton>
+```
+
+### AuthZTooltip
+
+Wraps any element. Disables child + shows denial tooltip.
+
+```tsx
+import { buildSADeletePermission } from 'lib/authz/hooks/useAuthZ/permissions/service-account.permissions';
+
+<AuthZTooltip checks={[buildSADeletePermission(accountId)]}>
+  <IconButton icon={<Trash />} onClick={handleDelete} />
+</AuthZTooltip>
+```
+
+### withAuthZPage (preferred for pages)
+
+HOC for route-level gating. Wrap at export. Shows `PermissionDeniedFullPage` + `AppLoading`.
+
+```tsx
+import { RoleListPermission } from 'lib/authz/hooks/useAuthZ/permissions/role.permissions';
+
+function RolesPage(): JSX.Element {
+  return <div>...</div>;
+}
+
+export default withAuthZPage(RolesPage, {
+  checks: [RoleListPermission],
+});
+```
+
+### withAuthZContent (preferred for sections)
+
+HOC for inline sections. Shows `PermissionDeniedCallout` on deny.
+
+```tsx
+import { buildRoleReadPermission } from 'lib/authz/hooks/useAuthZ/permissions/role.permissions';
+
+function RoleEditor(): JSX.Element {
+  return <div>...</div>;
+}
+
+// Dynamic checks from route params
+export default withAuthZContent(RoleEditor, {
+  checks: (_props, ctx) => [buildRoleReadPermission(ctx.params.roleId)],
+});
+```
+
+### withAuthZ
+
+HOC base. No default fallback. Use when you need custom fallback.
+
+```tsx
+import { buildPermission } from 'lib/authz/hooks/useAuthZ/utils';
+
+export default withAuthZ(SecretPanel, {
+  checks: [buildPermission('write', 'settings:org')],
+  fallback: <p>No access</p>,
+});
+```
+
+### AuthZGuardPage
+
+JSX variant of `withAuthZPage`. Use when HOC not possible (conditional rendering).
+
+```tsx
+import { RoleListPermission } from 'lib/authz/hooks/useAuthZ/permissions/role.permissions';
+
+<AuthZGuardPage checks={[RoleListPermission]}>
+  <RolesPage />
+</AuthZGuardPage>
+```
+
+### AuthZGuardContent
+
+JSX variant of `withAuthZContent`. Use when HOC not possible.
+
+```tsx
+import { RoleCreatePermission } from 'lib/authz/hooks/useAuthZ/permissions/role.permissions';
+
+<AuthZGuardContent checks={[RoleCreatePermission]}>
+  <RoleEditor />
+</AuthZGuardContent>
+```
+
+### AuthZGuard
+
+JSX base guard. No default fallback. Use when you need custom fallback in JSX.
+
+```tsx
+import { buildPermission } from 'lib/authz/hooks/useAuthZ/utils';
+
+<AuthZGuard
+  checks={[buildPermission('write', 'settings:org')]}
+  fallback={<p>No access</p>}
+  fallbackOnLoading={<Spinner />}
+>
+  <SecretContent />
+</AuthZGuard>
+```
+
+## Fallback Components
+
+Don't use these components directly, always prefer using via `withAuthZ` and their variants.
+
+- PermissionDeniedCallout: inline error callout. Shows `user/{id} is not authorized to perform {permissions}`.
+- PermissionDeniedFullPage: full-page centered error. Same message, bigger presentation.

frontend/src/lib/authz/components/createGuardedRoute/createGuardedRoute.authz.test.tsx

@@ -1,440 +0,0 @@
-import { ReactElement } from 'react';
-import type { RouteComponentProps } from 'react-router-dom';
-import type {
-	AuthtypesGettableTransactionDTO,
-	AuthtypesTransactionDTO,
-} from 'api/generated/services/sigNoz.schemas';
-import { server } from 'mocks-server/server';
-import { rest } from 'msw';
-import { render, screen, waitFor } from 'tests/test-utils';
-import {
-	AUTHZ_CHECK_URL,
-	authzMockResponse,
-} from 'lib/authz/utils/authz-test-utils';
-
-import { createGuardedRoute } from './createGuardedRoute';
-
-describe('createGuardedRoute', () => {
-	const TestComponent = ({ testProp }: { testProp: string }): ReactElement => (
-		<div>Test Component: {testProp}</div>
-	);
-
-	it('should render component when permission is granted', async () => {
-		server.use(
-			rest.post(AUTHZ_CHECK_URL, async (req, res, ctx) => {
-				const payload = await req.json();
-				return res(ctx.status(200), ctx.json(authzMockResponse(payload, [true])));
-			}),
-		);
-
-		const GuardedComponent = createGuardedRoute(TestComponent, 'read', 'role:*');
-
-		const mockMatch = {
-			params: {},
-			isExact: true,
-			path: '/dashboard',
-			url: '/dashboard',
-		};
-
-		const props = {
-			testProp: 'test-value',
-			match: mockMatch,
-			location: {} as unknown as RouteComponentProps['location'],
-			history: {} as unknown as RouteComponentProps['history'],
-		};
-
-		render(<GuardedComponent {...props} />);
-
-		await waitFor(() => {
-			expect(screen.getByText('Test Component: test-value')).toBeInTheDocument();
-		});
-	});
-
-	it('should substitute route parameters in object string', async () => {
-		server.use(
-			rest.post(AUTHZ_CHECK_URL, async (req, res, ctx) => {
-				const payload = await req.json();
-				return res(ctx.status(200), ctx.json(authzMockResponse(payload, [true])));
-			}),
-		);
-
-		const GuardedComponent = createGuardedRoute(
-			TestComponent,
-			'read',
-			'role:{id}',
-		);
-
-		const mockMatch = {
-			params: { id: '123' },
-			isExact: true,
-			path: '/dashboard/:id',
-			url: '/dashboard/123',
-		};
-
-		const props = {
-			testProp: 'test-value',
-			match: mockMatch,
-			location: {} as unknown as RouteComponentProps['location'],
-			history: {} as unknown as RouteComponentProps['history'],
-		};
-
-		render(<GuardedComponent {...props} />);
-
-		await waitFor(() => {
-			expect(screen.getByText('Test Component: test-value')).toBeInTheDocument();
-		});
-	});
-
-	it('should handle multiple route parameters', async () => {
-		server.use(
-			rest.post(AUTHZ_CHECK_URL, async (req, res, ctx) => {
-				const payload = (await req.json()) as AuthtypesTransactionDTO[];
-				const txn = payload[0];
-				const responseData: AuthtypesGettableTransactionDTO[] = [
-					{
-						relation: txn.relation,
-						object: {
-							resource: {
-								kind: txn.object.resource.kind,
-								type: txn.object.resource.type,
-							},
-							selector: '123:456',
-						},
-						authorized: true,
-					},
-				];
-				return res(
-					ctx.status(200),
-					ctx.json({ data: responseData, status: 'success' }),
-				);
-			}),
-		);
-
-		const GuardedComponent = createGuardedRoute(
-			TestComponent,
-			'update',
-			'role:{id}:{version}',
-		);
-
-		const mockMatch = {
-			params: { id: '123', version: '456' },
-			isExact: true,
-			path: '/dashboard/:id/:version',
-			url: '/dashboard/123/456',
-		};
-
-		const props = {
-			testProp: 'test-value',
-			match: mockMatch,
-			location: {} as unknown as RouteComponentProps['location'],
-			history: {} as unknown as RouteComponentProps['history'],
-		};
-
-		render(<GuardedComponent {...props} />);
-
-		await waitFor(() => {
-			expect(screen.getByText('Test Component: test-value')).toBeInTheDocument();
-		});
-	});
-
-	it('should keep placeholder when route parameter is missing', async () => {
-		server.use(
-			rest.post(AUTHZ_CHECK_URL, async (req, res, ctx) => {
-				const payload = await req.json();
-				return res(ctx.status(200), ctx.json(authzMockResponse(payload, [true])));
-			}),
-		);
-
-		const GuardedComponent = createGuardedRoute(
-			TestComponent,
-			'read',
-			'role:{id}',
-		);
-
-		const mockMatch = {
-			params: {},
-			isExact: true,
-			path: '/dashboard',
-			url: '/dashboard',
-		};
-
-		const props = {
-			testProp: 'test-value',
-			match: mockMatch,
-			location: {} as unknown as RouteComponentProps['location'],
-			history: {} as unknown as RouteComponentProps['history'],
-		};
-
-		render(<GuardedComponent {...props} />);
-
-		await waitFor(() => {
-			expect(screen.getByText('Test Component: test-value')).toBeInTheDocument();
-		});
-	});
-
-	it('should render loading fallback when loading', () => {
-		server.use(
-			rest.post(AUTHZ_CHECK_URL, async (_req, res, ctx) => {
-				return res(
-					ctx.delay('infinite'),
-					ctx.status(200),
-					ctx.json({ data: [], status: 'success' }),
-				);
-			}),
-		);
-
-		const GuardedComponent = createGuardedRoute(TestComponent, 'read', 'role:*');
-
-		const mockMatch = {
-			params: {},
-			isExact: true,
-			path: '/dashboard',
-			url: '/dashboard',
-		};
-
-		const props = {
-			testProp: 'test-value',
-			match: mockMatch,
-			location: {} as unknown as RouteComponentProps['location'],
-			history: {} as unknown as RouteComponentProps['history'],
-		};
-
-		render(<GuardedComponent {...props} />);
-
-		expect(screen.getByText('SigNoz')).toBeInTheDocument();
-		expect(
-			screen.queryByText('Test Component: test-value'),
-		).not.toBeInTheDocument();
-	});
-
-	it('should render the component when API error occurs (fail open)', async () => {
-		server.use(
-			rest.post(AUTHZ_CHECK_URL, (_req, res, ctx) => {
-				return res(ctx.status(500), ctx.json({ error: 'Internal Server Error' }));
-			}),
-		);
-
-		const GuardedComponent = createGuardedRoute(TestComponent, 'read', 'role:*');
-
-		const mockMatch = {
-			params: {},
-			isExact: true,
-			path: '/dashboard',
-			url: '/dashboard',
-		};
-
-		const props = {
-			testProp: 'test-value',
-			match: mockMatch,
-			location: {} as unknown as RouteComponentProps['location'],
-			history: {} as unknown as RouteComponentProps['history'],
-		};
-
-		render(<GuardedComponent {...props} />);
-
-		await waitFor(() => {
-			expect(screen.getByText('Test Component: test-value')).toBeInTheDocument();
-		});
-	});
-
-	it('should render no permissions fallback when permission is denied', async () => {
-		server.use(
-			rest.post(AUTHZ_CHECK_URL, async (req, res, ctx) => {
-				const payload = await req.json();
-				return res(ctx.status(200), ctx.json(authzMockResponse(payload, [false])));
-			}),
-		);
-
-		const GuardedComponent = createGuardedRoute(
-			TestComponent,
-			'update',
-			'role:{id}',
-		);
-
-		const mockMatch = {
-			params: { id: '123' },
-			isExact: true,
-			path: '/dashboard/:id',
-			url: '/dashboard/123',
-		};
-
-		const props = {
-			testProp: 'test-value',
-			match: mockMatch,
-			location: {} as unknown as RouteComponentProps['location'],
-			history: {} as unknown as RouteComponentProps['history'],
-		};
-
-		render(<GuardedComponent {...props} />);
-
-		await waitFor(() => {
-			const heading = document.querySelector('h3');
-			expect(heading).toBeInTheDocument();
-			expect(heading?.textContent).toMatch(/not authorized/i);
-		});
-
-		expect(screen.getByText(/update:role:123/)).toBeInTheDocument();
-		expect(
-			screen.queryByText('Test Component: test-value'),
-		).not.toBeInTheDocument();
-	});
-
-	it('should pass all props to wrapped component', async () => {
-		server.use(
-			rest.post(AUTHZ_CHECK_URL, async (req, res, ctx) => {
-				const payload = await req.json();
-				return res(ctx.status(200), ctx.json(authzMockResponse(payload, [true])));
-			}),
-		);
-
-		const ComponentWithMultipleProps = ({
-			prop1,
-			prop2,
-			prop3,
-		}: {
-			prop1: string;
-			prop2: number;
-			prop3: boolean;
-		}): ReactElement => (
-			<div>
-				{prop1} - {prop2} - {prop3.toString()}
-			</div>
-		);
-
-		const GuardedComponent = createGuardedRoute(
-			ComponentWithMultipleProps,
-			'read',
-			'role:*',
-		);
-
-		const mockMatch = {
-			params: {},
-			isExact: true,
-			path: '/dashboard',
-			url: '/dashboard',
-		};
-
-		const props = {
-			prop1: 'value1',
-			prop2: 42,
-			prop3: true,
-			match: mockMatch,
-			location: {} as unknown as RouteComponentProps['location'],
-			history: {} as unknown as RouteComponentProps['history'],
-		};
-
-		render(<GuardedComponent {...props} />);
-
-		await waitFor(() => {
-			expect(screen.getByText('value1 - 42 - true')).toBeInTheDocument();
-		});
-	});
-
-	it('should memoize resolved object based on route params', async () => {
-		let requestCount = 0;
-		const requestedObjects: string[] = [];
-
-		server.use(
-			rest.post(AUTHZ_CHECK_URL, async (req, res, ctx) => {
-				requestCount++;
-				const payload = (await req.json()) as AuthtypesTransactionDTO[];
-				const obj = payload[0]?.object;
-				const kind = obj?.resource?.kind;
-				const selector = obj?.selector ?? '*';
-				const objectStr = `${kind}:${selector}`;
-				requestedObjects.push(objectStr ?? '');
-
-				return res(ctx.status(200), ctx.json(authzMockResponse(payload, [true])));
-			}),
-		);
-
-		const GuardedComponent = createGuardedRoute(
-			TestComponent,
-			'read',
-			'role:{id}',
-		);
-
-		const mockMatch1 = {
-			params: { id: '123' },
-			isExact: true,
-			path: '/dashboard/:id',
-			url: '/dashboard/123',
-		};
-
-		const props1 = {
-			testProp: 'test-value-1',
-			match: mockMatch1,
-			location: {} as unknown as RouteComponentProps['location'],
-			history: {} as unknown as RouteComponentProps['history'],
-		};
-
-		const { unmount } = render(<GuardedComponent {...props1} />);
-
-		await waitFor(() => {
-			expect(screen.getByText('Test Component: test-value-1')).toBeInTheDocument();
-		});
-
-		expect(requestCount).toBe(1);
-		expect(requestedObjects).toContain('role:123');
-
-		unmount();
-
-		const mockMatch2 = {
-			params: { id: '456' },
-			isExact: true,
-			path: '/dashboard/:id',
-			url: '/dashboard/456',
-		};
-
-		const props2 = {
-			testProp: 'test-value-2',
-			match: mockMatch2,
-			location: {} as unknown as RouteComponentProps['location'],
-			history: {} as unknown as RouteComponentProps['history'],
-		};
-
-		render(<GuardedComponent {...props2} />);
-
-		await waitFor(() => {
-			expect(screen.getByText('Test Component: test-value-2')).toBeInTheDocument();
-		});
-
-		expect(requestCount).toBe(2);
-		expect(requestedObjects).toContain('role:456');
-	});
-
-	it('should handle different relation types', async () => {
-		server.use(
-			rest.post(AUTHZ_CHECK_URL, async (req, res, ctx) => {
-				const payload = await req.json();
-				return res(ctx.status(200), ctx.json(authzMockResponse(payload, [true])));
-			}),
-		);
-
-		const GuardedComponent = createGuardedRoute(
-			TestComponent,
-			'delete',
-			'role:{id}',
-		);
-
-		const mockMatch = {
-			params: { id: '789' },
-			isExact: true,
-			path: '/dashboard/:id',
-			url: '/dashboard/789',
-		};
-
-		const props = {
-			testProp: 'test-value',
-			match: mockMatch,
-			location: {} as unknown as RouteComponentProps['location'],
-			history: {} as unknown as RouteComponentProps['history'],
-		};
-
-		render(<GuardedComponent {...props} />);
-
-		await waitFor(() => {
-			expect(screen.getByText('Test Component: test-value')).toBeInTheDocument();
-		});
-	});
-});

frontend/src/lib/authz/components/createGuardedRoute/createGuardedRoute.styles.scss

@@ -1,41 +0,0 @@
-.guard-authz-error-no-authz {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-
-	width: 100%;
-	height: 100%;
-
-	padding: 24px;
-
-	.guard-authz-error-no-authz-content {
-		display: flex;
-		flex-direction: column;
-		justify-content: flex-start;
-		gap: 8px;
-		max-width: 500px;
-	}
-
-	img {
-		width: 32px;
-		height: 32px;
-	}
-
-	h3 {
-		font-size: 18px;
-		color: var(--l1-foreground);
-		line-height: 18px;
-	}
-
-	p {
-		font-size: 14px;
-		color: var(--l3-foreground);
-		line-height: 18px;
-
-		span {
-			background-color: var(--l3-background);
-			white-space: nowrap;
-			padding: 0 2px;
-		}
-	}
-}

frontend/src/lib/authz/components/createGuardedRoute/createGuardedRoute.tsx

@@ -1,67 +0,0 @@
-import { ComponentType, ReactElement, useMemo } from 'react';
-import { RouteComponentProps } from 'react-router-dom';
-import {
-	AuthZObject,
-	AuthZRelation,
-	BrandedPermission,
-} from 'lib/authz/hooks/useAuthZ/types';
-import { formatPermission } from 'lib/authz/hooks/useAuthZ/utils';
-import { useAppContext } from 'providers/App/App';
-
-import noDataUrl from 'assets/Icons/no-data.svg';
-
-import AppLoading from '../../../../components/AppLoading/AppLoading';
-import { GuardAuthZ } from '../GuardAuthZ/GuardAuthZ';
-
-import './createGuardedRoute.styles.scss';
-
-function OnNoPermissionsFallback(response: {
-	requiredPermissionName: BrandedPermission;
-}): ReactElement {
-	const { user } = useAppContext();
-
-	return (
-		<div className="guard-authz-error-no-authz">
-			<div className="guard-authz-error-no-authz-content">
-				<img src={noDataUrl} alt="No permission" />
-				<h3>Uh-oh! You are not authorized</h3>
-				<p>
-					<code>user/{user.id}</code> is not authorized to perform{' '}
-					<code>{formatPermission(response.requiredPermissionName)}</code>
-				</p>
-			</div>
-		</div>
-	);
-}
-
-// eslint-disable-next-line @typescript-eslint/ban-types
-export function createGuardedRoute<P extends object, R extends AuthZRelation>(
-	Component: ComponentType<P>,
-	relation: R,
-	object: AuthZObject<R>,
-): ComponentType<P & RouteComponentProps<Record<string, string>>> {
-	return function GuardedRouteComponent(
-		props: P & RouteComponentProps<Record<string, string>>,
-	): ReactElement {
-		const resolvedObject = useMemo(() => {
-			const paramPattern = /\{([^}]+)\}/g;
-			return object.replace(paramPattern, (match, paramName) => {
-				const paramValue = props.match?.params?.[paramName];
-				return paramValue !== undefined ? paramValue : match;
-			}) as AuthZObject<R>;
-		}, [props.match?.params]);
-
-		return (
-			<GuardAuthZ
-				relation={relation}
-				object={resolvedObject}
-				fallbackOnLoading={<AppLoading />}
-				fallbackOnNoPermissions={(response): ReactElement => (
-					<OnNoPermissionsFallback {...response} />
-				)}
-			>
-				<Component {...props} />
-			</GuardAuthZ>
-		);
-	};
-}

frontend/src/lib/authz/components/withAuthZ/withAuthZ.authz.test.tsx

@@ -0,0 +1,578 @@
+import React from 'react';
+import { render, screen, waitFor, act } from 'tests/test-utils';
+import { useQueryClient } from 'react-query';
+import { server } from 'mocks-server/server';
+import { rest } from 'msw';
+import {
+	AUTHZ_CHECK_URL,
+	authzMockResponse,
+	setupAuthzAllow,
+	setupAuthzDeny,
+	setupAuthzGrantByPrefix,
+} from 'lib/authz/utils/authz-test-utils';
+import type { AuthZObject } from 'lib/authz/hooks/useAuthZ/types';
+import {
+	buildObjectString,
+	buildPermission,
+} from 'lib/authz/hooks/useAuthZ/utils';
+
+import { withAuthZ, RouterContext } from './withAuthZ';
+import { withAuthZContent } from './withAuthZContent';
+import { withAuthZPage } from './withAuthZPage';
+
+const mockUseParams = jest.fn();
+const mockUseLocation = jest.fn();
+
+jest.mock('react-router-dom', () => ({
+	...jest.requireActual('react-router-dom'),
+	useParams: (): Record<string, string> => mockUseParams(),
+	useLocation: (): { pathname: string; search: string } => mockUseLocation(),
+}));
+
+const readPerm = buildPermission('read', 'role:*' as AuthZObject<'read'>);
+
+function Base(): JSX.Element {
+	return <div>Base component</div>;
+}
+
+beforeEach(() => {
+	mockUseParams.mockReturnValue({});
+	mockUseLocation.mockReturnValue({ pathname: '/', search: '' });
+});
+
+describe('withAuthZ', () => {
+	it('renders the wrapped component when allowed', async () => {
+		server.use(setupAuthzAllow(readPerm));
+		const Guarded = withAuthZ(Base, { checks: [readPerm] });
+
+		render(<Guarded />);
+
+		await waitFor(() => {
+			expect(screen.getByText('Base component')).toBeInTheDocument();
+		});
+	});
+
+	it('renders nothing when denied without a fallback', async () => {
+		server.use(setupAuthzDeny(readPerm));
+		const Guarded = withAuthZ(Base, { checks: [readPerm] });
+
+		render(<Guarded />);
+
+		await waitFor(() => {
+			expect(screen.queryByText('Base component')).not.toBeInTheDocument();
+		});
+	});
+
+	it('renders the provided fallback when denied', async () => {
+		server.use(setupAuthzDeny(readPerm));
+		const Guarded = withAuthZ(Base, {
+			checks: [readPerm],
+			fallback: <div>No access</div>,
+		});
+
+		render(<Guarded />);
+
+		await waitFor(() => {
+			expect(screen.getByText('No access')).toBeInTheDocument();
+		});
+	});
+
+	it('resolves checks from props via the selector form', async () => {
+		type Props = { roleId: string };
+		const RoleView = ({ roleId }: Props): JSX.Element => <div>role {roleId}</div>;
+		const deniedPerm = buildPermission(
+			'read',
+			buildObjectString<'read'>('role', 'r-1'),
+		);
+		server.use(setupAuthzDeny(deniedPerm));
+
+		const Guarded = withAuthZ<Props>(RoleView, {
+			checks: ({ roleId }) => [
+				buildPermission('read', buildObjectString<'read'>('role', roleId)),
+			],
+			fallback: <div>denied selector</div>,
+		});
+
+		render(<Guarded roleId="r-1" />);
+
+		await waitFor(() => {
+			expect(screen.getByText('denied selector')).toBeInTheDocument();
+		});
+		expect(screen.queryByText('role r-1')).not.toBeInTheDocument();
+	});
+
+	it('sets a descriptive displayName', () => {
+		const Guarded = withAuthZ(Base, { checks: [readPerm] });
+		expect(Guarded.displayName).toBe('withAuthZ(Base)');
+	});
+});
+
+describe('withAuthZPage', () => {
+	it('renders the full-page denied screen when denied', async () => {
+		server.use(setupAuthzDeny(readPerm));
+		const Guarded = withAuthZPage(Base, { checks: [readPerm] });
+
+		render(<Guarded />);
+
+		await waitFor(() => {
+			expect(
+				screen.getByText('Uh-oh! You are not authorized'),
+			).toBeInTheDocument();
+		});
+	});
+});
+
+describe('withAuthZContent', () => {
+	it('renders the denied callout when denied', async () => {
+		server.use(setupAuthzDeny(readPerm));
+		const Guarded = withAuthZContent(Base, { checks: [readPerm] });
+
+		render(<Guarded />);
+
+		await waitFor(() => {
+			expect(screen.getByText('read:role:*')).toBeInTheDocument();
+		});
+		expect(screen.queryByText('Base component')).not.toBeInTheDocument();
+	});
+});
+
+describe('withAuthZ router context', () => {
+	it('extracts checks from route params via router.params', async () => {
+		mockUseParams.mockReturnValue({ roleId: 'r-123' });
+
+		const rolePerm = buildPermission(
+			'read',
+			buildObjectString<'read'>('role', 'r-123'),
+		);
+		server.use(setupAuthzAllow(rolePerm));
+
+		const RoleView = (): JSX.Element => <div>role view</div>;
+		const Guarded = withAuthZ(RoleView, {
+			checks: (_props, router: RouterContext) => [
+				buildPermission(
+					'read',
+					buildObjectString<'read'>('role', router.params.roleId ?? ''),
+				),
+			],
+		});
+
+		render(<Guarded />);
+
+		await waitFor(() => {
+			expect(screen.getByText('role view')).toBeInTheDocument();
+		});
+	});
+
+	it('extracts checks from query params via router.searchParams', async () => {
+		mockUseLocation.mockReturnValue({
+			pathname: '/roles',
+			search: '?roleId=r-456',
+		});
+
+		const rolePerm = buildPermission(
+			'read',
+			buildObjectString<'read'>('role', 'r-456'),
+		);
+		server.use(setupAuthzAllow(rolePerm));
+
+		const RoleListView = (): JSX.Element => <div>role list view</div>;
+		const Guarded = withAuthZ(RoleListView, {
+			checks: (_props, router: RouterContext) => [
+				buildPermission(
+					'read',
+					buildObjectString<'read'>('role', router.searchParams.get('roleId') ?? ''),
+				),
+			],
+		});
+
+		render(<Guarded />);
+
+		await waitFor(() => {
+			expect(screen.getByText('role list view')).toBeInTheDocument();
+		});
+	});
+
+	it('extracts checks from pathname via router.matchPath', async () => {
+		mockUseLocation.mockReturnValue({
+			pathname: '/settings/roles/r-789/edit',
+			search: '',
+		});
+
+		const rolePerm = buildPermission(
+			'update',
+			buildObjectString<'update'>('role', 'r-789'),
+		);
+		server.use(setupAuthzAllow(rolePerm));
+
+		const EditRoleView = (): JSX.Element => <div>edit role</div>;
+		const Guarded = withAuthZ(EditRoleView, {
+			checks: (_props, router: RouterContext) => {
+				const match = router.matchPath<{ roleId: string }>(
+					'/settings/roles/:roleId/edit',
+				);
+				return match
+					? [
+							buildPermission(
+								'update',
+								buildObjectString<'update'>('role', match.roleId),
+							),
+						]
+					: [];
+			},
+		});
+
+		render(<Guarded />);
+
+		await waitFor(() => {
+			expect(screen.getByText('edit role')).toBeInTheDocument();
+		});
+	});
+
+	it('denies when router-derived permission is not allowed', async () => {
+		mockUseParams.mockReturnValue({ roleId: 'r-denied' });
+
+		const deniedPerm = buildPermission(
+			'read',
+			buildObjectString<'read'>('role', 'r-denied'),
+		);
+		server.use(setupAuthzDeny(deniedPerm));
+
+		const RoleView = (): JSX.Element => <div>role view</div>;
+		const Guarded = withAuthZ(RoleView, {
+			checks: (_props, router: RouterContext) => [
+				buildPermission(
+					'read',
+					buildObjectString<'read'>('role', router.params.roleId ?? ''),
+				),
+			],
+			fallback: <div>access denied</div>,
+		});
+
+		render(<Guarded />);
+
+		await waitFor(() => {
+			expect(screen.getByText('access denied')).toBeInTheDocument();
+		});
+		expect(screen.queryByText('role view')).not.toBeInTheDocument();
+	});
+});
+
+describe('withAuthZ router context stability', () => {
+	let renderCount = 0;
+
+	function RenderCounter(): JSX.Element {
+		renderCount += 1;
+		return <div data-testid="render-count">{renderCount}</div>;
+	}
+
+	beforeEach(() => {
+		renderCount = 0;
+		server.use(setupAuthzGrantByPrefix('read||__||role'));
+	});
+
+	it('does not re-render when useParams returns new object with same values', async () => {
+		mockUseParams.mockReturnValue({ roleId: 'r-1' });
+		mockUseLocation.mockReturnValue({ pathname: '/', search: '' });
+
+		const Guarded = withAuthZ(RenderCounter, {
+			checks: (_props, router: RouterContext) => [
+				buildPermission(
+					'read',
+					buildObjectString<'read'>('role', router.params.roleId ?? '*'),
+				),
+			],
+		});
+
+		const { rerender } = render(<Guarded />);
+
+		await waitFor(() => {
+			expect(screen.getByTestId('render-count')).toBeInTheDocument();
+		});
+
+		const initialCount = renderCount;
+
+		// Return NEW object with SAME values — should not cause re-render
+		mockUseParams.mockReturnValue({ roleId: 'r-1' });
+		rerender(<Guarded />);
+
+		// Allow any pending effects to flush
+		await waitFor(() => {
+			expect(renderCount).toBe(initialCount);
+		});
+	});
+
+	it('does not re-render when useLocation returns new object with same pathname', async () => {
+		mockUseParams.mockReturnValue({});
+		mockUseLocation.mockReturnValue({ pathname: '/roles', search: '' });
+
+		const Guarded = withAuthZ(RenderCounter, {
+			checks: (_props, router: RouterContext) => {
+				const match = router.matchPath<{ id: string }>('/roles/:id');
+				return match
+					? [buildPermission('read', buildObjectString<'read'>('role', match.id))]
+					: [readPerm];
+			},
+		});
+
+		const { rerender } = render(<Guarded />);
+
+		await waitFor(() => {
+			expect(screen.getByTestId('render-count')).toBeInTheDocument();
+		});
+
+		const initialCount = renderCount;
+
+		// Return NEW object with SAME pathname — should not cause re-render
+		mockUseLocation.mockReturnValue({ pathname: '/roles', search: '' });
+		rerender(<Guarded />);
+
+		await waitFor(() => {
+			expect(renderCount).toBe(initialCount);
+		});
+	});
+
+	it('does not re-render when useLocation returns new object with same search params', async () => {
+		mockUseParams.mockReturnValue({});
+		mockUseLocation.mockReturnValue({ pathname: '/', search: '?tab=keys' });
+
+		const Guarded = withAuthZ(RenderCounter, {
+			checks: (_props, router: RouterContext) => {
+				// Access searchParams to ensure it's part of the dependency chain
+				void router.searchParams.get('tab');
+				return [readPerm];
+			},
+		});
+
+		const { rerender } = render(<Guarded />);
+
+		await waitFor(() => {
+			expect(screen.getByTestId('render-count')).toBeInTheDocument();
+		});
+
+		const initialCount = renderCount;
+
+		// Return NEW object with SAME search — should not cause re-render
+		mockUseLocation.mockReturnValue({ pathname: '/', search: '?tab=keys' });
+		rerender(<Guarded />);
+
+		await waitFor(() => {
+			expect(renderCount).toBe(initialCount);
+		});
+	});
+
+	it('re-renders when params values actually change', async () => {
+		mockUseParams.mockReturnValue({ roleId: 'r-1' });
+		mockUseLocation.mockReturnValue({ pathname: '/', search: '' });
+
+		const Guarded = withAuthZ(RenderCounter, {
+			checks: (_props, router: RouterContext) => [
+				buildPermission(
+					'read',
+					buildObjectString<'read'>('role', router.params.roleId ?? '*'),
+				),
+			],
+		});
+
+		const { unmount } = render(<Guarded />);
+
+		await waitFor(() => {
+			expect(screen.getByTestId('render-count')).toBeInTheDocument();
+		});
+
+		const initialCount = renderCount;
+		unmount();
+
+		// Return DIFFERENT values — re-mount with new mock values
+		mockUseParams.mockReturnValue({ roleId: 'r-2' });
+		render(<Guarded />);
+
+		await waitFor(() => {
+			expect(renderCount).toBeGreaterThan(initialCount);
+		});
+	});
+
+	it('re-renders when pathname actually changes', async () => {
+		mockUseParams.mockReturnValue({});
+		mockUseLocation.mockReturnValue({ pathname: '/roles', search: '' });
+
+		const Guarded = withAuthZ(RenderCounter, {
+			checks: [readPerm],
+		});
+
+		const { unmount } = render(<Guarded />);
+
+		await waitFor(() => {
+			expect(screen.getByTestId('render-count')).toBeInTheDocument();
+		});
+
+		const initialCount = renderCount;
+		unmount();
+
+		// DIFFERENT pathname — re-mount with new mock values
+		mockUseLocation.mockReturnValue({ pathname: '/users', search: '' });
+		render(<Guarded />);
+
+		await waitFor(() => {
+			expect(renderCount).toBeGreaterThan(initialCount);
+		});
+	});
+
+	it('re-renders when search params actually change', async () => {
+		mockUseParams.mockReturnValue({});
+		mockUseLocation.mockReturnValue({ pathname: '/', search: '?tab=keys' });
+
+		const Guarded = withAuthZ(RenderCounter, {
+			checks: [readPerm],
+		});
+
+		const { unmount } = render(<Guarded />);
+
+		await waitFor(() => {
+			expect(screen.getByTestId('render-count')).toBeInTheDocument();
+		});
+
+		const initialCount = renderCount;
+		unmount();
+
+		// DIFFERENT search — re-mount with new mock values
+		mockUseLocation.mockReturnValue({ pathname: '/', search: '?tab=details' });
+		render(<Guarded />);
+
+		await waitFor(() => {
+			expect(renderCount).toBeGreaterThan(initialCount);
+		});
+	});
+});
+
+describe('withAuthZContent cache invalidation', () => {
+	const testPerm = buildPermission(
+		'read',
+		'role:test-invalidation' as AuthZObject<'read'>,
+	);
+	// Callout displays permission as "relation:object" format
+	const displayedPerm = 'read:role:test-invalidation';
+
+	function ContentComponent(): JSX.Element {
+		return <div data-testid="protected-content">Protected Content</div>;
+	}
+
+	function InvalidationTrigger({
+		permission,
+		onReady,
+	}: {
+		permission: string;
+		onReady: (invalidate: () => Promise<void>) => void;
+	}): null {
+		const queryClient = useQueryClient();
+
+		React.useEffect(() => {
+			onReady(async () => {
+				// Reset query to initial state and trigger refetch (matches devtools behavior)
+				await queryClient.resetQueries(['authz', permission]);
+			});
+		}, [queryClient, permission, onReady]);
+
+		return null;
+	}
+
+	it('re-renders from allowed to denied when cache is invalidated', async () => {
+		let shouldGrant = true;
+		let invalidateFn: (() => Promise<void>) | null = null;
+
+		server.use(
+			rest.post(AUTHZ_CHECK_URL, async (req, res, ctx) => {
+				const payload = await req.json();
+				return res(
+					ctx.status(200),
+					ctx.json(authzMockResponse(payload, [shouldGrant])),
+				);
+			}),
+		);
+
+		const Guarded = withAuthZContent(ContentComponent, { checks: [testPerm] });
+
+		render(
+			<>
+				<Guarded />
+				<InvalidationTrigger
+					permission={testPerm}
+					onReady={(fn): void => {
+						invalidateFn = fn;
+					}}
+				/>
+			</>,
+		);
+
+		// Initially allowed - should show content
+		await waitFor(() => {
+			expect(screen.getByTestId('protected-content')).toBeInTheDocument();
+		});
+
+		// Change server response to deny
+		shouldGrant = false;
+
+		// Invalidate cache
+		await act(async () => {
+			await invalidateFn?.();
+		});
+
+		// Should now show denied callout
+		await waitFor(() => {
+			expect(screen.queryByTestId('protected-content')).not.toBeInTheDocument();
+		});
+
+		// Callout should show the denied permission
+		expect(screen.getByRole('alert')).toBeInTheDocument();
+		expect(screen.getByText(displayedPerm)).toBeInTheDocument();
+	});
+
+	it('re-renders from denied to allowed when cache is invalidated', async () => {
+		let shouldGrant = false;
+		let invalidateFn: (() => Promise<void>) | null = null;
+
+		server.use(
+			rest.post(AUTHZ_CHECK_URL, async (req, res, ctx) => {
+				const payload = await req.json();
+				return res(
+					ctx.status(200),
+					ctx.json(authzMockResponse(payload, [shouldGrant])),
+				);
+			}),
+		);
+
+		const Guarded = withAuthZContent(ContentComponent, { checks: [testPerm] });
+
+		render(
+			<>
+				<Guarded />
+				<InvalidationTrigger
+					permission={testPerm}
+					onReady={(fn): void => {
+						invalidateFn = fn;
+					}}
+				/>
+			</>,
+		);
+
+		// Initially denied - should show callout
+		await waitFor(() => {
+			expect(screen.getByRole('alert')).toBeInTheDocument();
+		});
+		expect(screen.queryByTestId('protected-content')).not.toBeInTheDocument();
+
+		// Change server response to allow
+		shouldGrant = true;
+
+		// Invalidate cache
+		await act(async () => {
+			await invalidateFn?.();
+		});
+
+		// Should now show protected content
+		await waitFor(() => {
+			expect(screen.getByTestId('protected-content')).toBeInTheDocument();
+		});
+
+		expect(screen.queryByRole('alert')).not.toBeInTheDocument();
+	});
+});

frontend/src/lib/authz/components/withAuthZ/withAuthZ.tsx

@@ -0,0 +1,13 @@
+import { ComponentType } from 'react';
+import { AuthZGuard } from 'lib/authz/components/AuthZGuard/AuthZGuard';
+
+import { createAuthZHOC, WithAuthZOptions } from './withAuthZ.utils';
+
+export type { RouterContext, WithAuthZOptions } from './withAuthZ.utils';
+
+export function withAuthZ<P extends object>(
+	Component: ComponentType<P>,
+	opts: WithAuthZOptions<P>,
+): ComponentType<P> {
+	return createAuthZHOC(AuthZGuard, 'withAuthZ', Component, opts);
+}

frontend/src/lib/authz/components/withAuthZ/withAuthZ.utils.tsx

@@ -0,0 +1,108 @@
+import { ComponentType, ReactElement, createElement, useMemo } from 'react';
+import {
+	matchPath as reactRouterMatchPath,
+	useLocation,
+	useParams,
+} from 'react-router-dom';
+import type { AuthZGuardProps } from 'lib/authz/components/AuthZGuard/AuthZGuard';
+import type { BrandedPermission } from 'lib/authz/hooks/useAuthZ/types';
+
+export type RouterContext = {
+	/**
+	 * Route params from useParams (e.g. `/roles/:roleId` → `{ roleId: "r-1" }`)
+	 */
+	params: Record<string, string | undefined>;
+	pathname: string;
+	/**
+	 * Query params as URLSearchParams (use `.get('key')` to read)
+	 */
+	searchParams: URLSearchParams;
+	/**
+	 * Extract params from pathname using a route pattern.
+	 * Returns null if pattern doesn't match.
+	 * @example router.matchPath<{ id: string }>('/edit/:id')?.id
+	 */
+	matchPath: <Params extends Record<string, string>>(
+		pattern: string,
+	) => Params | null;
+};
+
+export type WithAuthZOptions<P> = {
+	/**
+	 * Static checks, or a selector deriving them from props and router context.
+	 * Use router context to extract dynamic values from route params, pathname, or query params.
+	 * @example
+	 * // From route params
+	 * checks: (props, router) => [buildPermission('read', `role:${router.params.roleId}`)]
+	 * // From query params
+	 * checks: (props, router) => [buildPermission('read', `dashboard:${router.searchParams.get('id')}`)]
+	 * // From pathname matching
+	 * checks: (props, router) => {
+	 *   const match = router.matchPath<{ id: string }>('/edit/:id');
+	 *   return match ? [buildPermission('update', `role:${match.id}`)] : [];
+	 * }
+	 */
+	checks:
+		| BrandedPermission[]
+		| ((props: P, router: RouterContext) => BrandedPermission[]);
+	fallback?: AuthZGuardProps['fallback'];
+	fallbackOnLoading?: AuthZGuardProps['fallbackOnLoading'];
+	failOpenOnError?: AuthZGuardProps['onFailRenderContent'];
+};
+
+function useStableParams(): Record<string, string | undefined> {
+	const params = useParams();
+	const paramsJson = JSON.stringify(params);
+	return useMemo(() => JSON.parse(paramsJson), [paramsJson]);
+}
+
+function useRouterContext(): RouterContext {
+	const params = useStableParams();
+	const { pathname, search } = useLocation();
+	const searchParams = useMemo(() => new URLSearchParams(search), [search]);
+
+	return useMemo(
+		(): RouterContext => ({
+			params,
+			pathname,
+			searchParams,
+			matchPath: <Params extends Record<string, string>>(
+				pattern: string,
+			): Params | null => {
+				const match = reactRouterMatchPath<Params>(pathname, {
+					path: pattern,
+					exact: false,
+				});
+				return match?.params ?? null;
+			},
+		}),
+		[params, pathname, searchParams],
+	);
+}
+
+export function createAuthZHOC<P extends object>(
+	Guard: ComponentType<AuthZGuardProps>,
+	hocName: string,
+	Component: ComponentType<P>,
+	opts: WithAuthZOptions<P>,
+): ComponentType<P> {
+	const { checks, ...guardProps } = opts;
+
+	function Wrapped(props: P): ReactElement | null {
+		const router = useRouterContext();
+		const resolvedChecks =
+			typeof checks === 'function' ? checks(props, router) : checks;
+
+		return (
+			<Guard checks={resolvedChecks} {...guardProps}>
+				{createElement(Component, props)}
+			</Guard>
+		);
+	}
+
+	Wrapped.displayName = `${hocName}(${
+		Component.displayName || Component.name || 'Component'
+	})`;
+
+	return Wrapped;
+}

frontend/src/lib/authz/components/withAuthZ/withAuthZContent.tsx

@@ -0,0 +1,11 @@
+import { ComponentType } from 'react';
+import { AuthZGuardContent } from 'lib/authz/components/AuthZGuard/AuthZGuardContent';
+
+import { createAuthZHOC, WithAuthZOptions } from './withAuthZ.utils';
+
+export function withAuthZContent<P extends object>(
+	Component: ComponentType<P>,
+	opts: WithAuthZOptions<P>,
+): ComponentType<P> {
+	return createAuthZHOC(AuthZGuardContent, 'withAuthZContent', Component, opts);
+}

frontend/src/lib/authz/components/withAuthZ/withAuthZPage.tsx

@@ -0,0 +1,11 @@
+import { ComponentType } from 'react';
+import { AuthZGuardPage } from 'lib/authz/components/AuthZGuard/AuthZGuardPage';
+
+import { createAuthZHOC, WithAuthZOptions } from './withAuthZ.utils';
+
+export function withAuthZPage<P extends object>(
+	Component: ComponentType<P>,
+	opts: WithAuthZOptions<P>,
+): ComponentType<P> {
+	return createAuthZHOC(AuthZGuardPage, 'withAuthZPage', Component, opts);
+}

frontend/src/lib/authz/utils/README.md

@@ -0,0 +1,125 @@
+# AuthZ Test Utilities
+
+Helpers for testing permission-gated components.
+
+## File Naming
+
+AuthZ tests live in `*.authz.test.tsx` files alongside other test files:
+
+```
+ComponentName/
+├── ComponentName.tsx
+├── __tests__/
+│   ├── ComponentName.test.tsx        # functional tests
+│   └── ComponentName.authz.test.tsx  # permission tests
+```
+
+## Test Structure
+
+```tsx
+import { server } from 'mocks-server/server';
+import { setupAuthzAdmin, setupAuthzDenyAll } from 'lib/authz/utils/authz-test-utils';
+import { render, screen, waitFor } from 'tests/test-utils';
+
+describe('ComponentName - AuthZ', () => {
+  afterEach(() => {
+    jest.restoreAllMocks();
+    server.resetHandlers();  // reset MSW handlers after each test
+  });
+
+  describe('permission denied', () => {
+    it('shows permission denied when read denied', async () => {
+      server.use(setupAuthzDenyAll());
+
+      render(<ComponentName />);
+
+      await expect(
+        screen.findByText(/not authorized/i),
+      ).resolves.toBeInTheDocument();
+    });
+  });
+
+  describe('permission granted', () => {
+    it('renders content when permitted', async () => {
+      server.use(setupAuthzAdmin());
+
+      render(<ComponentName />);
+
+      await waitFor(() => {
+        expect(screen.getByTestId('protected-content')).toBeInTheDocument();
+      });
+    });
+  });
+});
+```
+
+Key points:
+- Use `server.use()` at start of each test (not `beforeEach`) for explicit setup
+- Call `server.resetHandlers()` in `afterEach` to avoid test pollution
+- Use `waitFor` or `findBy*` queries since authz checks are async
+- Group tests by permission scenario: denied, granted, partial, loading
+
+## MSW Handlers
+
+Mock `/api/v1/authz/check` endpoint responses.
+
+```tsx
+import { server } from 'mocks-server/server';
+import {
+  setupAuthzAdmin,
+  setupAuthzDenyAll,
+  setupAuthzDeny,
+  setupAuthzAllow,
+  setupAuthzGrantByPrefix,
+} from 'lib/authz/utils/authz-test-utils';
+
+// Grant all permissions
+server.use(setupAuthzAdmin());
+
+// Deny all permissions
+server.use(setupAuthzDenyAll());
+
+// Grant all except specific permissions
+server.use(setupAuthzDeny(RoleCreatePermission, RoleDeletePermission));
+
+// Deny all except specific permissions
+server.use(setupAuthzAllow(RoleListPermission));
+
+// Grant by relation prefix (e.g., grant read/delete, deny update)
+server.use(setupAuthzGrantByPrefix('read', 'delete'));
+```
+
+## Custom Mock Response
+
+For fine-grained control over responses.
+
+```tsx
+import { rest } from 'msw';
+import { AUTHZ_CHECK_URL, authzMockResponse } from 'lib/authz/utils/authz-test-utils';
+
+server.use(
+  rest.post(AUTHZ_CHECK_URL, async (req, res, ctx) => {
+    const payload = await req.json();
+    // [true, false] = first permission granted, second denied
+    return res(ctx.status(200), ctx.json(authzMockResponse(payload, [true, false])));
+  }),
+);
+```
+
+## Testing Loading State
+
+Use `ctx.delay('infinite')` to hold response indefinitely:
+
+```tsx
+it('shows skeleton while checking permissions', () => {
+  server.use(
+    rest.post(AUTHZ_CHECK_URL, (_req, res, ctx) =>
+      res(ctx.delay('infinite')),
+    ),
+  );
+
+  render(<ComponentName />);
+
+  expect(document.querySelector('.ant-skeleton')).toBeInTheDocument();
+});
+```

frontend/src/lib/authz/utils/authz-test-utils.ts

@@ -104,6 +104,25 @@ export function setupAuthzAllow(
 	});
 }
 
+/** Grants permissions that start with any of the given prefixes. */
+export function setupAuthzGrantByPrefix(...prefixes: string[]): RestHandler {
+	return rest.post(AUTHZ_CHECK_URL, async (req, res, ctx) => {
+		const payload = (await req.json()) as AuthtypesTransactionDTO[];
+		return res(
+			ctx.status(200),
+			ctx.json(
+				authzMockResponse(
+					payload,
+					payload.map((txn) => {
+						const perm = gettableTransactionToPermission(txn);
+						return prefixes.some((prefix) => perm.startsWith(prefix));
+					}),
+				),
+			),
+		);
+	});
+}
+
 export function buildLicense(
 	overrides?: Partial<LicenseResModel>,
 ): LicenseResModel {

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardPageToolbar/DashboardInfo/DashboardInfo.tsx

@@ -7,7 +7,7 @@ import {
 	SolidInfoCircle,
 	X,
 } from '@signozhq/icons';
-import { Badge } from '@signozhq/ui/badge';
+import TagBadge from 'components/TagBadge/TagBadge';
 import { Button } from '@signozhq/ui/button';
 import { Input } from '@signozhq/ui/input';
 import { TooltipSimple } from '@signozhq/ui/tooltip';
@@ -203,19 +203,13 @@ function DashboardInfo({
 						data-testid="dashboard-tags"
 					>
 						{visibleTags.map((tag) => (
-							<Badge key={tag} color="sienna" variant="outline">
-								{tag}
-							</Badge>
+							<TagBadge key={tag}>{tag}</TagBadge>
 						))}
 						{remainingTags.length > 0 && (
 							<TooltipSimple title={remainingTags.join(', ')}>
-								<Badge
-									color="sienna"
-									variant="outline"
-									data-testid="dashboard-tags-overflow"
-								>
-									+{remainingTags.length}
-								</Badge>
+								<span data-testid="dashboard-tags-overflow">
+									<TagBadge>+{remainingTags.length}</TagBadge>
+								</span>
 							</TooltipSimple>
 						)}
 					</div>

frontend/src/pages/DashboardPageV2/DashboardContainer/DashboardSettings/Overview/utils.ts

@@ -3,10 +3,10 @@ import type { TagtypesPostableTagDTO } from 'api/generated/services/sigNoz.schem
 export { Base64Icons } from 'container/DashboardContainer/DashboardSettings/General/utils';
 export { parseKeyValueTag } from 'components/TagKeyValueInput/utils';
 
-// tag UX, a string with no ':' is round-tripped as `{key: x, value: x}` and
-// collapsed back to just `x` for display.
+// The tag editor is strictly key:value, so always render both sides — a
+// `key:key` tag stays `key:key` rather than collapsing to a bare `key`.
 export function tagsToStrings(tags: TagtypesPostableTagDTO[]): string[] {
-	return tags.map((t) => (t.key === t.value ? t.key : `${t.key}:${t.value}`));
+	return tags.map((t) => `${t.key}:${t.value}`);
 }
 
 export function stringsToTags(tagStrings: string[]): TagtypesPostableTagDTO[] {

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/BarChartPanel/Renderer.tsx

@@ -14,8 +14,6 @@ import {
 } from 'pages/DashboardPageV2/DashboardContainer/queryV5/v5ResponseData';
 import { prepareAlignedData } from 'pages/DashboardPageV2/DashboardContainer/queryV5/uplotData';
 import { useTimezone } from 'providers/Timezone';
-import type { QueryRangeRequestV5 } from 'types/api/v5/queryRange';
-import { getTimeRangeFromQueryRangeRequest } from 'utils/getTimeRange';
 
 import NoData from '../../components/NoData/NoData';
 import { useGroupByPerQuery } from '../../hooks/useGroupByPerQuery';
@@ -25,7 +23,10 @@ import {
 	resolveDecimalPrecision,
 	resolveLegendPosition,
 } from '../../utils/chartAppearance/resolvers';
+import { stepClickTimeRange } from '../../utils/drilldown/chartClickTimeRange';
+import { enrichChartClick } from '../../utils/drilldown/enrichChartClick';
 import { getBuilderQueries } from '../../utils/getBuilderQueries';
+import { getPanelTimeRange } from '../../utils/getPanelTimeRange';
 
 import { buildBarChartConfig } from './utils/buildConfig';
 import { ChartClickData } from 'lib/uPlotV2/plugins/TooltipPlugin/types';
@@ -40,6 +41,7 @@ function BarPanelRenderer({
 	dashboardPreference,
 	panelMode,
 	onCloseStandaloneView,
+	enableDrillDown,
 }: PanelRendererProps<'signoz/BarChartPanel'>): JSX.Element {
 	const graphRef = useRef<HTMLDivElement>(null);
 	const containerDimensions = useResizeObserver(graphRef);
@@ -56,12 +58,10 @@ function BarPanelRenderer({
 		[panel.spec.queries],
 	);
 
-	// X-scale clamps come from the request that produced the data. The generated
-	// request DTO is structurally the V5 request; the cast is the boundary.
+	// X-scale clamps come from the request that produced the data, so each panel
+	// pins to the window it fetched.
 	const { minTimeScale, maxTimeScale } = useMemo(() => {
-		const { startTime, endTime } = getTimeRangeFromQueryRangeRequest(
-			data.requestPayload as unknown as QueryRangeRequestV5 | undefined,
-		);
+		const { startTime, endTime } = getPanelTimeRange(data.requestPayload);
 		return { minTimeScale: startTime, maxTimeScale: endTime };
 	}, [data.requestPayload]);
 
@@ -155,10 +155,29 @@ function BarPanelRenderer({
 	const key = `${dashboardPreference?.syncMode}-${dashboardPreference?.syncFilterMode}`;
 
 	const handleChartClick = useCallback(
-		(args: ChartClickData) => {
-			onClick?.(args);
+		(args: ChartClickData): void => {
+			if (!onClick) {
+				return;
+			}
+			const payload = enrichChartClick({
+				clickData: args,
+				series: flatSeries,
+				builderQueries,
+			});
+			if (!payload) {
+				return;
+			}
+			const timeRange = stepClickTimeRange({
+				clickedDataTimestamp: args.clickedDataTimestamp,
+				queryName: payload.context.queryName,
+				builderQueries,
+				stepInterval: getExecStats(data.response)?.stepIntervals?.[
+					payload.context.queryName
+				],
+			});
+			onClick({ ...payload, context: { ...payload.context, timeRange } });
 		},
-		[onClick],
+		[onClick, flatSeries, builderQueries, data.response],
 	);
 
 	return (
@@ -188,7 +207,7 @@ function BarPanelRenderer({
 						syncFilterMode={dashboardPreference?.syncFilterMode}
 						isStackedBarChart={spec.visualization?.stackedBarChart ?? false}
 						renderTooltipFooter={renderTooltipFooter}
-						onClick={handleChartClick}
+						onClick={enableDrillDown ? handleChartClick : undefined}
 					/>
 				)}
 		</div>

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/BarChartPanel/definition.ts

@@ -27,5 +27,6 @@ export const definition: PanelDefinition<'signoz/BarChartPanel'> = {
 		download: false,
 		createAlert: true,
 		search: false,
+		drilldown: true,
 	},
 };

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/HistogramPanel/Renderer.tsx

@@ -20,7 +20,6 @@ import { getBuilderQueries } from '../../utils/getBuilderQueries';
 
 import { buildHistogramConfig } from './utils/buildConfig';
 import { prepareHistogramData } from './prepareData';
-import { ChartClickData } from 'lib/uPlotV2/plugins/TooltipPlugin/types';
 
 function HistogramPanelRenderer({
 	panelId,
@@ -28,7 +27,6 @@ function HistogramPanelRenderer({
 	data,
 	refetch,
 	panelMode,
-	onClick,
 }: PanelRendererProps<'signoz/HistogramPanel'>): JSX.Element {
 	const graphRef = useRef<HTMLDivElement>(null);
 	const containerDimensions = useResizeObserver(graphRef);
@@ -100,13 +98,6 @@ function HistogramPanelRenderer({
 
 	const isQueriesMerged = spec.histogramBuckets?.mergeAllActiveQueries ?? false;
 
-	const handleChartClick = useCallback(
-		(args: ChartClickData) => {
-			onClick?.(args);
-		},
-		[onClick],
-	);
-
 	return (
 		<div
 			ref={graphRef}
@@ -127,7 +118,6 @@ function HistogramPanelRenderer({
 						width={containerDimensions.width}
 						height={containerDimensions.height}
 						renderTooltipFooter={renderTooltipFooter}
-						onClick={handleChartClick}
 					/>
 				)}
 		</div>

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/HistogramPanel/definition.ts

@@ -27,5 +27,6 @@ export const definition: PanelDefinition<'signoz/HistogramPanel'> = {
 		download: false,
 		createAlert: true,
 		search: false,
+		drilldown: false,
 	},
 };

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/ListPanel/definition.ts

@@ -37,5 +37,6 @@ export const definition: PanelDefinition<'signoz/ListPanel'> = {
 		download: false,
 		createAlert: false,
 		search: true,
+		drilldown: false,
 	},
 };

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/NumberPanel/Renderer.tsx

@@ -1,4 +1,9 @@
-import { useMemo } from 'react';
+import {
+	useCallback,
+	useMemo,
+	type KeyboardEvent as ReactKeyboardEvent,
+	type MouseEvent as ReactMouseEvent,
+} from 'react';
 import type { DashboardtypesNumberPanelSpecDTO } from 'api/generated/services/sigNoz.schemas';
 import { prepareScalarTables } from 'pages/DashboardPageV2/DashboardContainer/queryV5/prepareScalarTables';
 import { getScalarResults } from 'pages/DashboardPageV2/DashboardContainer/queryV5/v5ResponseData';
@@ -8,6 +13,9 @@ import PanelStyles from '../../panel.module.scss';
 import { PanelRendererProps } from '../../types/rendererProps';
 import { formatPanelValue } from '../../utils/formatPanelValue';
 import { resolveDecimalPrecision } from '../../utils/chartAppearance/resolvers';
+import { enrichNumberClick } from '../../utils/drilldown/enrichNumberClick';
+import { getBuilderQueries } from '../../utils/getBuilderQueries';
+import { getPanelTimeRange } from '../../utils/getPanelTimeRange';
 
 import { prepareNumberData } from './prepareData';
 import { mapNumberThresholds } from './utils';
@@ -17,24 +25,31 @@ function NumberPanelRenderer({
 	panel,
 	data,
 	refetch,
+	onClick,
+	enableDrillDown,
 }: PanelRendererProps<'signoz/NumberPanel'>): JSX.Element {
 	const spec = useMemo<DashboardtypesNumberPanelSpecDTO>(
 		() => panel.spec.plugin.spec,
 		[panel.spec.plugin.spec],
 	);
 
-	const value = useMemo(
+	const builderQueries = useMemo(
+		() => getBuilderQueries(panel.spec.queries || []),
+		[panel.spec.queries],
+	);
+
+	const tables = useMemo(
 		() =>
-			prepareNumberData(
-				prepareScalarTables({
-					results: getScalarResults(data.response),
-					legendMap: data.legendMap ?? {},
-					requestPayload: data.requestPayload,
-				}),
-			),
+			prepareScalarTables({
+				results: getScalarResults(data.response),
+				legendMap: data.legendMap ?? {},
+				requestPayload: data.requestPayload,
+			}),
 		[data.response, data.legendMap, data.requestPayload],
 	);
 
+	const value = useMemo(() => prepareNumberData(tables), [tables]);
+
 	const thresholds = useMemo(
 		() => mapNumberThresholds(spec.thresholds),
 		[spec.thresholds],
@@ -54,10 +69,60 @@ function NumberPanelRenderer({
 		[value, unit, decimalPrecision],
 	);
 
+	const openDrilldown = useCallback(
+		(coordinates: { x: number; y: number }): void => {
+			if (!onClick) {
+				return;
+			}
+			const payload = enrichNumberClick({
+				tables,
+				builderQueries,
+				coordinates,
+				timeRange: getPanelTimeRange(data.requestPayload),
+			});
+			if (payload) {
+				onClick(payload);
+			}
+		},
+		[onClick, tables, data.requestPayload, builderQueries],
+	);
+
+	const handleClick = useCallback(
+		(event: ReactMouseEvent<HTMLDivElement>): void =>
+			openDrilldown({ x: event.clientX, y: event.clientY }),
+		[openDrilldown],
+	);
+
+	const handleKeyDown = useCallback(
+		(event: ReactKeyboardEvent<HTMLDivElement>): void => {
+			if (event.key === 'Enter' || event.key === ' ') {
+				event.preventDefault();
+				const rect = event.currentTarget.getBoundingClientRect();
+				openDrilldown({
+					x: rect.left + rect.width / 2,
+					y: rect.top + rect.height / 2,
+				});
+			}
+		},
+		[openDrilldown],
+	);
+
+	// The whole panel is the value, so the container itself is the drill-down target.
+	const isClickable = enableDrillDown && !!onClick && value !== null;
+
 	return (
 		<div
 			data-testid="number-panel-renderer"
 			className={PanelStyles.panelContainer}
+			{...(isClickable
+				? {
+						role: 'button',
+						tabIndex: 0,
+						onClick: handleClick,
+						onKeyDown: handleKeyDown,
+						style: { cursor: 'pointer' },
+					}
+				: {})}
 		>
 			{value === null ? (
 				<NoData data-testid="number-panel-no-data" onRetry={refetch} />

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/NumberPanel/definition.ts

@@ -27,5 +27,6 @@ export const definition: PanelDefinition<'signoz/NumberPanel'> = {
 		download: false,
 		createAlert: true,
 		search: false,
+		drilldown: true,
 	},
 };

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/PieChartPanel/Renderer.tsx

@@ -1,4 +1,8 @@
-import { useCallback, useMemo } from 'react';
+import {
+	useCallback,
+	useMemo,
+	type MouseEvent as ReactMouseEvent,
+} from 'react';
 import type { DashboardtypesPieChartPanelSpecDTO } from 'api/generated/services/sigNoz.schemas';
 import Pie from 'container/DashboardContainer/visualization/charts/Pie/Pie';
 import type { PieSlice } from 'container/DashboardContainer/visualization/charts/types';
@@ -13,6 +17,9 @@ import {
 	resolveDecimalPrecision,
 	resolveLegendPosition,
 } from '../../utils/chartAppearance/resolvers';
+import { enrichPieClick } from '../../utils/drilldown/enrichPieClick';
+import { getBuilderQueries } from '../../utils/getBuilderQueries';
+import { getPanelTimeRange } from '../../utils/getPanelTimeRange';
 
 import { preparePieData } from './prepareData';
 
@@ -22,6 +29,7 @@ function PiePanelRenderer({
 	data,
 	refetch,
 	onClick,
+	enableDrillDown,
 }: PanelRendererProps<'signoz/PieChartPanel'>): JSX.Element {
 	const isDarkMode = useIsDarkMode();
 
@@ -30,6 +38,11 @@ function PiePanelRenderer({
 		[panel.spec.plugin.spec],
 	);
 
+	const builderQueries = useMemo(
+		() => getBuilderQueries(panel.spec.queries || []),
+		[panel.spec.queries],
+	);
+
 	const slices = useMemo(
 		() =>
 			preparePieData({
@@ -61,10 +74,21 @@ function PiePanelRenderer({
 	);
 
 	const handleSliceClick = useCallback(
-		(slice: PieSlice) => {
-			onClick?.({ label: slice.label, value: slice.value });
+		(slice: PieSlice, event: ReactMouseEvent): void => {
+			if (!onClick) {
+				return;
+			}
+			const payload = enrichPieClick({
+				slice,
+				builderQueries,
+				coordinates: { x: event.clientX, y: event.clientY },
+				timeRange: getPanelTimeRange(data.requestPayload),
+			});
+			if (payload) {
+				onClick(payload);
+			}
 		},
-		[onClick],
+		[onClick, builderQueries, data.requestPayload],
 	);
 
 	return (
@@ -79,7 +103,7 @@ function PiePanelRenderer({
 					isDarkMode={isDarkMode}
 					position={legendPosition}
 					id={panelId}
-					onSliceClick={handleSliceClick}
+					onSliceClick={enableDrillDown ? handleSliceClick : undefined}
 					data-testid="pie-chart"
 				/>
 			)}

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/PieChartPanel/definition.ts

@@ -23,5 +23,6 @@ export const definition: PanelDefinition<'signoz/PieChartPanel'> = {
 		download: false,
 		createAlert: false,
 		search: false,
+		drilldown: true,
 	},
 };

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/TablePanel/Renderer.tsx

@@ -1,4 +1,11 @@
-import { useEffect, useMemo, useRef, useState } from 'react';
+import {
+	useCallback,
+	useEffect,
+	useMemo,
+	useRef,
+	useState,
+	type MouseEvent as ReactMouseEvent,
+} from 'react';
 import { Table } from 'antd';
 import type { DashboardtypesTablePanelSpecDTO } from 'api/generated/services/sigNoz.schemas';
 import { useResizeObserver } from 'hooks/useDimensions';
@@ -8,6 +15,9 @@ import { getScalarResults } from 'pages/DashboardPageV2/DashboardContainer/query
 import PanelStyles from '../../panel.module.scss';
 import { PanelRendererProps } from '../../types/rendererProps';
 import { resolveDecimalPrecision } from '../../utils/chartAppearance/resolvers';
+import { enrichTableClick } from '../../utils/drilldown/enrichTableClick';
+import { getBuilderQueries } from '../../utils/getBuilderQueries';
+import { getPanelTimeRange } from '../../utils/getPanelTimeRange';
 import { useResizableColumns } from '../../hooks/useResizableColumns';
 import NoData from '../../components/NoData/NoData';
 
@@ -27,6 +37,8 @@ function TablePanelRenderer({
 	data,
 	refetch,
 	searchTerm = '',
+	onClick,
+	enableDrillDown,
 }: PanelRendererProps<'signoz/TablePanel'>): JSX.Element {
 	// Measure the panel so each page roughly fills it (min 10 rows) with a pinned header.
 	const containerRef = useRef<HTMLDivElement>(null);
@@ -42,6 +54,11 @@ function TablePanelRenderer({
 		[panel.spec.plugin.spec],
 	);
 
+	const builderQueries = useMemo(
+		() => getBuilderQueries(panel.spec.queries || []),
+		[panel.spec.queries],
+	);
+
 	// V5 joins every query into a single scalar result, so the first non-empty
 	// table is the whole panel.
 	const table = useMemo(
@@ -64,6 +81,34 @@ function TablePanelRenderer({
 		[spec.thresholds],
 	);
 
+	const handleCellClick = useCallback(
+		({
+			columnId,
+			record,
+			event,
+		}: {
+			columnId: string;
+			record: TableRowData;
+			event: ReactMouseEvent<HTMLElement>;
+		}): void => {
+			if (!onClick || !table) {
+				return;
+			}
+			const payload = enrichTableClick({
+				record,
+				columnId,
+				table,
+				builderQueries,
+				coordinates: { x: event.clientX, y: event.clientY },
+				timeRange: getPanelTimeRange(data.requestPayload),
+			});
+			if (payload) {
+				onClick(payload);
+			}
+		},
+		[onClick, table, builderQueries, data.requestPayload],
+	);
+
 	const columns = useMemo(
 		() =>
 			table
@@ -72,9 +117,17 @@ function TablePanelRenderer({
 						columnUnits: spec.formatting?.columnUnits ?? {},
 						decimalPrecision,
 						thresholdsByColumn,
+						onCellClick: enableDrillDown ? handleCellClick : undefined,
 					})
 				: [],
-		[table, spec.formatting?.columnUnits, decimalPrecision, thresholdsByColumn],
+		[
+			table,
+			spec.formatting?.columnUnits,
+			decimalPrecision,
+			thresholdsByColumn,
+			enableDrillDown,
+			handleCellClick,
+		],
 	);
 
 	// User-resizable columns, persisted per panel to localStorage.

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/TablePanel/definition.ts

@@ -25,5 +25,6 @@ export const definition: PanelDefinition<'signoz/TablePanel'> = {
 		createAlert: false,
 		// V1 parity: only tables (and lists) expose the header search box.
 		search: true,
+		drilldown: true,
 	},
 };

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/TablePanel/tableColumns.tsx

@@ -52,6 +52,12 @@ export interface BuildTableColumnsArgs {
 	decimalPrecision?: PrecisionOption;
 	/** Thresholds grouped by column name (see `mapTableThresholds`). */
 	thresholdsByColumn: Record<string, PanelThreshold[]>;
+	/** When set, every body cell becomes a drill-down target (keyed by its column id). */
+	onCellClick?: (args: {
+		columnId: string;
+		record: TableRowData;
+		event: React.MouseEvent<HTMLElement>;
+	}) => void;
 }
 
 /**
@@ -65,6 +71,7 @@ export function buildTableColumns({
 	columnUnits,
 	decimalPrecision,
 	thresholdsByColumn,
+	onCellClick,
 }: BuildTableColumnsArgs): TableProps<TableRowData>['columns'] {
 	return table.columns.map((col) => {
 		// Column key = query identifier for value columns, group name otherwise. Units
@@ -97,19 +104,26 @@ export function buildTableColumns({
 				}
 				return text;
 			},
-			onCell: (record: TableRowData): { style?: React.CSSProperties } => {
-				if (!col.isValueColumn || colThresholds.length === 0) {
-					return {};
+			onCell: (record: TableRowData): React.HTMLAttributes<HTMLElement> => {
+				const cellProps: React.HTMLAttributes<HTMLElement> = {};
+
+				if (col.isValueColumn && colThresholds.length > 0) {
+					const num = Number(record[key]);
+					if (Number.isFinite(num)) {
+						const { threshold } = resolveActiveThreshold(colThresholds, num, unit);
+						if (threshold?.format === 'background') {
+							cellProps.style = { backgroundColor: threshold.color };
+						}
+					}
 				}
-				const num = Number(record[key]);
-				if (!Number.isFinite(num)) {
-					return {};
+
+				if (onCellClick) {
+					cellProps.onClick = (event): void =>
+						onCellClick({ columnId: key, record, event });
+					cellProps.style = { ...cellProps.style, cursor: 'pointer' };
 				}
-				const { threshold } = resolveActiveThreshold(colThresholds, num, unit);
-				if (threshold?.format === 'background') {
-					return { style: { backgroundColor: threshold.color } };
-				}
-				return {};
+
+				return cellProps;
 			},
 		};
 	});

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/TimeSeriesPanel/Renderer.tsx

@@ -14,8 +14,6 @@ import {
 } from 'pages/DashboardPageV2/DashboardContainer/queryV5/v5ResponseData';
 import { prepareAlignedData } from 'pages/DashboardPageV2/DashboardContainer/queryV5/uplotData';
 import { useTimezone } from 'providers/Timezone';
-import type { QueryRangeRequestV5 } from 'types/api/v5/queryRange';
-import { getTimeRangeFromQueryRangeRequest } from 'utils/getTimeRange';
 
 import NoData from '../../components/NoData/NoData';
 import { useGroupByPerQuery } from '../../hooks/useGroupByPerQuery';
@@ -25,7 +23,10 @@ import {
 	resolveDecimalPrecision,
 	resolveLegendPosition,
 } from '../../utils/chartAppearance/resolvers';
+import { stepClickTimeRange } from '../../utils/drilldown/chartClickTimeRange';
+import { enrichChartClick } from '../../utils/drilldown/enrichChartClick';
 import { getBuilderQueries } from '../../utils/getBuilderQueries';
+import { getPanelTimeRange } from '../../utils/getPanelTimeRange';
 
 import { buildTimeSeriesConfig } from './utils/buildConfig';
 import { ChartClickData } from 'lib/uPlotV2/plugins/TooltipPlugin/types';
@@ -40,6 +41,7 @@ function TimeSeriesPanelRenderer({
 	dashboardPreference,
 	panelMode,
 	onCloseStandaloneView,
+	enableDrillDown,
 }: PanelRendererProps<'signoz/TimeSeriesPanel'>): JSX.Element {
 	const graphRef = useRef<HTMLDivElement>(null);
 	const containerDimensions = useResizeObserver(graphRef);
@@ -58,11 +60,9 @@ function TimeSeriesPanelRenderer({
 
 	// X-scale clamps come from the request that produced the data, so each panel
 	// pins to the window it fetched — matters during drag-zoom transitions before
-	// new data arrives. The generated request DTO is structurally the V5 request.
+	// new data arrives.
 	const { minTimeScale, maxTimeScale } = useMemo(() => {
-		const { startTime, endTime } = getTimeRangeFromQueryRangeRequest(
-			data.requestPayload as unknown as QueryRangeRequestV5 | undefined,
-		);
+		const { startTime, endTime } = getPanelTimeRange(data.requestPayload);
 		return { minTimeScale: startTime, maxTimeScale: endTime };
 	}, [data.requestPayload]);
 
@@ -156,10 +156,29 @@ function TimeSeriesPanelRenderer({
 	const key = `${dashboardPreference?.syncMode}-${dashboardPreference?.syncFilterMode}`;
 
 	const handleChartClick = useCallback(
-		(args: ChartClickData) => {
-			onClick?.(args);
+		(args: ChartClickData): void => {
+			if (!onClick) {
+				return;
+			}
+			const payload = enrichChartClick({
+				clickData: args,
+				series: flatSeries,
+				builderQueries,
+			});
+			if (!payload) {
+				return;
+			}
+			const timeRange = stepClickTimeRange({
+				clickedDataTimestamp: args.clickedDataTimestamp,
+				queryName: payload.context.queryName,
+				builderQueries,
+				stepInterval: getExecStats(data.response)?.stepIntervals?.[
+					payload.context.queryName
+				],
+			});
+			onClick({ ...payload, context: { ...payload.context, timeRange } });
 		},
-		[onClick],
+		[onClick, flatSeries, builderQueries, data.response],
 	);
 
 	return (
@@ -188,7 +207,7 @@ function TimeSeriesPanelRenderer({
 						syncMode={dashboardPreference?.syncMode}
 						syncFilterMode={dashboardPreference?.syncFilterMode}
 						renderTooltipFooter={renderTooltipFooter}
-						onClick={handleChartClick}
+						onClick={enableDrillDown ? handleChartClick : undefined}
 					/>
 				)}
 		</div>

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/TimeSeriesPanel/definition.ts

@@ -27,5 +27,6 @@ export const definition: PanelDefinition<'signoz/TimeSeriesPanel'> = {
 		download: false,
 		createAlert: true,
 		search: false,
+		drilldown: true,
 	},
 };

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/types/drilldown.ts

@@ -0,0 +1,36 @@
+import type { TelemetrytypesSignalDTO } from 'api/generated/services/sigNoz.schemas';
+import type { FilterData } from 'container/QueryTable/Drilldown/drilldownUtils';
+
+// Drilldown is the click-to-context-menu feature ported from V1. Every renderer turns its native
+// click into one `DrilldownClickPayload`; the kind-agnostic orchestration layer consumes only that.
+// `FilterData` is imported read-only from the V1 util so the payload feeds `buildDrilldownUrl`
+// directly, with no intermediate translation.
+
+/** The clicked point's drilldown context, derived from the flattened series/columns the renderer holds. */
+export interface DrilldownContext {
+	/** The clicked series'/column's query. Drives query selection in `getViewQuery`. */
+	queryName: string;
+	/** Telemetry signal of the clicked query — picks the explorer the drilldown navigates to. */
+	signal: TelemetrytypesSignalDTO;
+	/** Key/value/op filters from the clicked point's group-by labels (empty when ungrouped). */
+	filters: FilterData[];
+	/** Explorer time window. Charts use the clicked bucket ±step; scalar panels use the fetched window. */
+	timeRange?: { startTime: number; endTime: number };
+	/** Series/slice display name, shown as the menu header's second line. */
+	label?: string;
+	/** Series/slice colour; tints the menu header label and item icons (charts/pie only). */
+	seriesColor?: string;
+	/** Tables only: a value column opens the aggregate menu; a group column opens filter-by-value. */
+	columnKind?: 'aggregate' | 'group';
+	/** Group-column click only: the clicked column's key, for the filter-by-value menu. */
+	clickedKey?: string;
+	/** Group-column click only: the clicked cell's value, for the filter-by-value menu. */
+	clickedValue?: string | number;
+}
+
+/** What each renderer's `onClick` emits: where to anchor the popover plus the drilldown context. */
+export interface DrilldownClickPayload {
+	/** Absolute viewport coordinates for the popover anchor. */
+	coordinates: { x: number; y: number };
+	context: DrilldownContext;
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/types/interactions.ts

@@ -1,24 +1,5 @@
-import type { ChartClickData } from 'lib/uPlotV2/plugins/TooltipPlugin/types';
-
 import type { PanelKind } from './panelKind';
-
-/** Source-tagged click events; each non-chart kind carries its own drill-down context. */
-export type ChartClickEvent = ChartClickData;
-export type TableClickEvent = {
-	rowData: Record<string, unknown>;
-	columnId?: string;
-};
-export type ListClickEvent = {
-	rowData: Record<string, unknown>;
-};
-export type PieClickEvent = { label: string; value: number };
-
-/** Union of every panel click event — switched on by `source` at the boundary. */
-export type PanelClickEvent =
-	| ChartClickEvent
-	| TableClickEvent
-	| ListClickEvent
-	| PieClickEvent;
+import type { DrilldownClickPayload } from './drilldown';
 
 type DragSelect = (start: number, end: number) => void;
 
@@ -29,23 +10,27 @@ type CloseStandaloneView = () => void;
  * Per-kind interaction props — each kind exposes only the gestures it supports.
  * Keyed by `PanelKind`; `PanelRendererProps<K>` indexes this, so a missing kind
  * is a compile error there.
+ *
+ * Every interactive kind's `onClick` receives the unified `DrilldownClickPayload`
+ * its renderer enriches from the native click. Number/Value drills down on its
+ * single value. Histogram and List are omitted (V1 has no drill-down for either):
+ * they inherit the empty `object` base, so their renderers get only base props
+ * with no click gesture.
  */
 export type PanelInteractionMap = Record<PanelKind, object> & {
 	'signoz/TimeSeriesPanel': {
-		onClick?: (event: ChartClickEvent) => void;
+		onClick?: (event: DrilldownClickPayload) => void;
 		onDragSelect?: DragSelect;
 		onCloseStandaloneView?: CloseStandaloneView;
 	};
 	'signoz/BarChartPanel': {
-		onClick?: (event: ChartClickEvent) => void;
+		onClick?: (event: DrilldownClickPayload) => void;
 		onDragSelect?: DragSelect;
 		onCloseStandaloneView?: CloseStandaloneView;
 	};
-	'signoz/HistogramPanel': { onClick?: (event: ChartClickEvent) => void };
-	'signoz/TablePanel': { onClick?: (event: TableClickEvent) => void };
-	'signoz/ListPanel': { onClick?: (event: ListClickEvent) => void };
-	'signoz/PieChartPanel': { onClick?: (event: PieClickEvent) => void };
-	'signoz/NumberPanel': Record<string, never>;
+	'signoz/TablePanel': { onClick?: (event: DrilldownClickPayload) => void };
+	'signoz/PieChartPanel': { onClick?: (event: DrilldownClickPayload) => void };
+	'signoz/NumberPanel': { onClick?: (event: DrilldownClickPayload) => void };
 };
 
 /**
@@ -53,7 +38,7 @@ export type PanelInteractionMap = Record<PanelKind, object> & {
  * registry render boundary). The supertype the per-kind shapes are cast to once.
  */
 export interface AnyPanelInteractionProps {
-	onClick?: (event: PanelClickEvent) => void;
+	onClick?: (event: DrilldownClickPayload) => void;
 	onDragSelect?: DragSelect;
 	onCloseStandaloneView?: CloseStandaloneView;
 }

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/types/panelDefinition.ts

@@ -30,6 +30,11 @@ export interface PanelActionCapabilities {
 	 * tabular kinds). Not a menu action — the renderer must consume `searchTerm`.
 	 */
 	search: boolean;
+	/**
+	 * Kind supports click-to-drilldown (context menu + View/Breakout). V1 parity: charts + scalar
+	 * Pie/Value/Table; Histogram/List opt out. AND-ed with "has a builder query" in `useDrilldown`.
+	 */
+	drilldown: boolean;
 }
 
 export interface PanelDefinition<K extends PanelKind = PanelKind> {

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/utils/__tests__/getPanelTimeRange.test.ts

@@ -0,0 +1,46 @@
+import type { Querybuildertypesv5QueryRangeRequestDTO } from 'api/generated/services/sigNoz.schemas';
+
+import { getPanelTimeRange } from '../getPanelTimeRange';
+
+// Fallback path reads the redux global-time selection; stub both so the no-payload branch
+// is deterministic.
+jest.mock('store', () => ({
+	__esModule: true,
+	default: { getState: (): unknown => ({ globalTime: { selectedTime: '5m' } }) },
+}));
+jest.mock('lib/getStartEndRangeTime', () => ({
+	__esModule: true,
+	default: (): { start: string; end: string } => ({
+		start: '1700',
+		end: '1800',
+	}),
+}));
+
+const request = (
+	start?: number,
+	end?: number,
+): Querybuildertypesv5QueryRangeRequestDTO =>
+	({ start, end }) as Querybuildertypesv5QueryRangeRequestDTO;
+
+describe('getPanelTimeRange', () => {
+	it('converts the request start/end from ms to seconds', () => {
+		expect(getPanelTimeRange(request(5_000, 9_000))).toStrictEqual({
+			startTime: 5,
+			endTime: 9,
+		});
+	});
+
+	it('falls back to the global-time window when there is no request', () => {
+		expect(getPanelTimeRange(undefined)).toStrictEqual({
+			startTime: 1700,
+			endTime: 1800,
+		});
+	});
+
+	it('falls back when the request is missing an endpoint', () => {
+		expect(getPanelTimeRange(request(5_000, undefined))).toStrictEqual({
+			startTime: 1700,
+			endTime: 1800,
+		});
+	});
+});

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/utils/drilldown/__tests__/drilldown.test.ts

@@ -0,0 +1,483 @@
+import { TelemetrytypesSignalDTO } from 'api/generated/services/sigNoz.schemas';
+import type { ChartClickData } from 'lib/uPlotV2/plugins/TooltipPlugin/types';
+import type {
+	PanelSeries,
+	PanelTable,
+} from 'pages/DashboardPageV2/DashboardContainer/queryV5/types';
+import type { BuilderQuery } from 'types/api/v5/queryRange';
+
+import type { DrilldownContext } from '../../../types/drilldown';
+import { buildAggregateData } from '../buildAggregateData';
+import { stepClickTimeRange } from '../chartClickTimeRange';
+import { enrichChartClick } from '../enrichChartClick';
+import { enrichNumberClick } from '../enrichNumberClick';
+import { enrichPieClick } from '../enrichPieClick';
+import { enrichTableClick } from '../enrichTableClick';
+import { getDataLinks } from '../getDataLinks';
+import { resolvePanelContextLinks } from '../resolvePanelContextLinks';
+import { resolveDrilldownSignal } from '../signal';
+
+// The v5 BuilderQuery union is too verbose to construct field-typed inline; cast at the boundary.
+function builderQuery(spec: Record<string, unknown>): BuilderQuery {
+	return spec as unknown as BuilderQuery;
+}
+
+function panelSeries(overrides: Partial<PanelSeries> = {}): PanelSeries {
+	return {
+		queryName: 'A',
+		legend: '',
+		labels: { 'service.name': 'frontend' },
+		kind: 'series',
+		values: [],
+		aggregation: { index: 0, alias: '' },
+		...overrides,
+	};
+}
+
+function chartClick(
+	focusedSeries: ChartClickData['focusedSeries'],
+): ChartClickData {
+	return {
+		xValue: 0,
+		yValue: 0,
+		focusedSeries,
+		clickedDataTimestamp: 1_700_000_000,
+		mouseX: 10,
+		mouseY: 20,
+		absoluteMouseX: 110,
+		absoluteMouseY: 220,
+	};
+}
+
+function focused(seriesIndex: number): ChartClickData['focusedSeries'] {
+	return { seriesIndex, seriesName: 'frontend', value: 1, color: '#fff' };
+}
+
+describe('resolveDrilldownSignal', () => {
+	it('maps logs/traces directly', () => {
+		expect(resolveDrilldownSignal(builderQuery({ signal: 'logs' }))).toBe('logs');
+		expect(resolveDrilldownSignal(builderQuery({ signal: 'traces' }))).toBe(
+			'traces',
+		);
+	});
+
+	it('falls back to metrics for metrics, meter and unknown/missing signals', () => {
+		expect(resolveDrilldownSignal(builderQuery({ signal: 'metrics' }))).toBe(
+			'metrics',
+		);
+		expect(resolveDrilldownSignal(builderQuery({ signal: 'meter' }))).toBe(
+			'metrics',
+		);
+		expect(resolveDrilldownSignal(undefined)).toBe('metrics');
+	});
+});
+
+describe('enrichChartClick', () => {
+	const series = [
+		panelSeries({ queryName: 'A', labels: { 'service.name': 'frontend' } }),
+		panelSeries({ queryName: 'B', labels: { 'service.name': 'cart' } }),
+	];
+
+	it('maps the uPlot series index to the (index - 1) flattened series', () => {
+		// uPlot series[0] is the x-axis, so data series start at 1.
+		const payload = enrichChartClick({
+			clickData: chartClick(focused(2)),
+			series,
+			builderQueries: [
+				builderQuery({
+					name: 'A',
+					signal: 'metrics',
+					groupBy: [{ name: 'service.name' }],
+				}),
+				builderQuery({
+					name: 'B',
+					signal: 'logs',
+					groupBy: [{ name: 'service.name' }],
+				}),
+			],
+		});
+
+		expect(payload?.context.queryName).toBe('B');
+		expect(payload?.context.signal).toBe('logs');
+		expect(payload?.context.filters).toStrictEqual([
+			expect.objectContaining({ filterKey: 'service.name', filterValue: 'cart' }),
+		]);
+		expect(payload?.context.seriesColor).toBe('#fff');
+		expect(payload?.coordinates).toStrictEqual({ x: 110, y: 220 });
+	});
+
+	it('passes through the caller-computed time range and resolves the signal', () => {
+		const payload = enrichChartClick({
+			clickData: chartClick(focused(1)),
+			series,
+			builderQueries: [builderQuery({ name: 'A', signal: 'traces' })],
+			timeRange: { startTime: 100, endTime: 200 },
+		});
+
+		expect(payload?.context.signal).toBe('traces');
+		expect(payload?.context.timeRange).toStrictEqual({
+			startTime: 100,
+			endTime: 200,
+		});
+	});
+
+	it('returns null when there is no focused series', () => {
+		expect(
+			enrichChartClick({
+				clickData: chartClick(null),
+				series,
+				builderQueries: [],
+			}),
+		).toBeNull();
+	});
+
+	it('returns null when the series index maps to no series', () => {
+		expect(
+			enrichChartClick({
+				clickData: chartClick(focused(99)),
+				series,
+				builderQueries: [],
+			}),
+		).toBeNull();
+	});
+
+	it('returns null for formula queries (queryName starts with F)', () => {
+		expect(
+			enrichChartClick({
+				clickData: chartClick(focused(1)),
+				series: [panelSeries({ queryName: 'F1' })],
+				builderQueries: [],
+			}),
+		).toBeNull();
+	});
+
+	it('emits empty filters for an ungrouped series (drops the legend backfill label)', () => {
+		const payload = enrichChartClick({
+			clickData: chartClick(focused(1)),
+			series: [panelSeries({ queryName: 'A', labels: { A: 'A' } })],
+			builderQueries: [builderQuery({ name: 'A', signal: 'metrics' })],
+		});
+
+		expect(payload?.context.filters).toStrictEqual([]);
+		expect(payload?.context.queryName).toBe('A');
+	});
+
+	it('drops labels that are not group-by dimensions', () => {
+		const payload = enrichChartClick({
+			clickData: chartClick(focused(1)),
+			series: [
+				panelSeries({
+					queryName: 'A',
+					labels: { 'service.name': 'frontend', __name__: 'http_requests' },
+				}),
+			],
+			builderQueries: [
+				builderQuery({
+					name: 'A',
+					signal: 'metrics',
+					groupBy: [{ name: 'service.name' }],
+				}),
+			],
+		});
+
+		expect(payload?.context.filters).toStrictEqual([
+			{ filterKey: 'service.name', filterValue: 'frontend', operator: '=' },
+		]);
+	});
+});
+
+describe('buildAggregateData', () => {
+	it('projects the drilldown context onto the V1 AggregateData shape', () => {
+		const context: DrilldownContext = {
+			queryName: 'A',
+			signal: TelemetrytypesSignalDTO.logs,
+			filters: [{ filterKey: 'k', filterValue: 'v', operator: '=' }],
+			timeRange: { startTime: 1, endTime: 2 },
+			label: 'frontend',
+			seriesColor: '#abc',
+			columnKind: 'aggregate',
+		};
+
+		expect(buildAggregateData(context)).toStrictEqual({
+			queryName: 'A',
+			filters: [{ filterKey: 'k', filterValue: 'v', operator: '=' }],
+			timeRange: { startTime: 1, endTime: 2 },
+			label: 'frontend',
+			seriesColor: '#abc',
+		});
+	});
+});
+
+describe('enrichNumberClick', () => {
+	const numberTable = (queryName: string): PanelTable => ({
+		queryName,
+		legend: '',
+		columns: [{ name: 'value', queryName, isValueColumn: true, id: queryName }],
+		rows: [{ data: { [queryName]: 42 } }],
+	});
+
+	it('drills down on the displayed value column with empty filters and no label', () => {
+		const payload = enrichNumberClick({
+			tables: [numberTable('A')],
+			builderQueries: [builderQuery({ name: 'A', signal: 'logs' })],
+			coordinates: { x: 5, y: 6 },
+			timeRange: { startTime: 1, endTime: 2 },
+		});
+
+		// No label: the menu header falls back to the aggregation expression (V1 parity).
+		expect(payload?.context).toStrictEqual({
+			queryName: 'A',
+			signal: 'logs',
+			filters: [],
+			timeRange: { startTime: 1, endTime: 2 },
+		});
+		expect(payload?.coordinates).toStrictEqual({ x: 5, y: 6 });
+	});
+
+	it('drills into the displayed value column, not the first builder query', () => {
+		// Panel shows query B's value column; drilldown must target B, not A.
+		const payload = enrichNumberClick({
+			tables: [numberTable('B')],
+			builderQueries: [
+				builderQuery({ name: 'A', signal: 'logs' }),
+				builderQuery({ name: 'B', signal: 'traces' }),
+			],
+			coordinates: { x: 0, y: 0 },
+		});
+
+		expect(payload?.context.queryName).toBe('B');
+		expect(payload?.context.signal).toBe('traces');
+	});
+
+	it('returns null when there is no drillable query', () => {
+		expect(
+			enrichNumberClick({
+				tables: [],
+				builderQueries: [],
+				coordinates: { x: 0, y: 0 },
+			}),
+		).toBeNull();
+	});
+
+	it('returns null for a formula query', () => {
+		expect(
+			enrichNumberClick({
+				tables: [numberTable('F1')],
+				builderQueries: [],
+				coordinates: { x: 0, y: 0 },
+			}),
+		).toBeNull();
+	});
+});
+
+describe('enrichTableClick', () => {
+	const table: PanelTable = {
+		queryName: 'A',
+		legend: '',
+		columns: [
+			{
+				name: 'service.name',
+				queryName: 'A',
+				isValueColumn: false,
+				id: 'service.name',
+			},
+			{ name: 'p99', queryName: 'A', isValueColumn: true, id: 'A' },
+		],
+		rows: [{ data: { 'service.name': 'frontend', A: 42 } }],
+	};
+	const record = { 'service.name': 'frontend', A: 42 };
+	const builderQueries = [builderQuery({ name: 'A', signal: 'traces' })];
+
+	it('builds equality filters from the row group cells for a value-column click', () => {
+		const payload = enrichTableClick({
+			record,
+			columnId: 'A',
+			table,
+			builderQueries,
+			coordinates: { x: 1, y: 2 },
+			timeRange: { startTime: 10, endTime: 20 },
+		});
+
+		expect(payload?.context.queryName).toBe('A');
+		expect(payload?.context.signal).toBe('traces');
+		expect(payload?.context.columnKind).toBe('aggregate');
+		expect(payload?.context.clickedKey).toBeUndefined();
+		// No label: the aggregate menu header falls back to the aggregation expression,
+		// not the value column name (V1 parity).
+		expect(payload?.context.label).toBeUndefined();
+		expect(payload?.context.filters).toStrictEqual([
+			{ filterKey: 'service.name', filterValue: 'frontend', operator: '=' },
+		]);
+	});
+
+	it('falls back to the row value column and carries the clicked cell for a group click', () => {
+		const payload = enrichTableClick({
+			record,
+			columnId: 'service.name',
+			table,
+			builderQueries,
+			coordinates: { x: 1, y: 2 },
+		});
+
+		expect(payload?.context.queryName).toBe('A');
+		expect(payload?.context.columnKind).toBe('group');
+		expect(payload?.context.clickedKey).toBe('service.name');
+		expect(payload?.context.clickedValue).toBe('frontend');
+	});
+
+	it('returns null when the table has no value column', () => {
+		const groupOnly: PanelTable = {
+			queryName: 'A',
+			legend: '',
+			columns: [
+				{
+					name: 'service.name',
+					queryName: 'A',
+					isValueColumn: false,
+					id: 'service.name',
+				},
+			],
+			rows: [{ data: { 'service.name': 'frontend' } }],
+		};
+		expect(
+			enrichTableClick({
+				record,
+				columnId: 'service.name',
+				table: groupOnly,
+				builderQueries,
+				coordinates: { x: 1, y: 2 },
+			}),
+		).toBeNull();
+	});
+});
+
+describe('enrichPieClick', () => {
+	it('builds filters from the slice labels and resolves the signal', () => {
+		const payload = enrichPieClick({
+			slice: {
+				label: 'frontend',
+				value: 12,
+				color: '#abc',
+				queryName: 'A',
+				labels: { 'service.name': 'frontend' },
+			},
+			builderQueries: [
+				builderQuery({
+					name: 'A',
+					signal: 'traces',
+					groupBy: [{ name: 'service.name' }],
+				}),
+			],
+			coordinates: { x: 7, y: 8 },
+			timeRange: { startTime: 1, endTime: 2 },
+		});
+
+		expect(payload?.context.queryName).toBe('A');
+		expect(payload?.context.signal).toBe('traces');
+		expect(payload?.context.filters).toStrictEqual([
+			{ filterKey: 'service.name', filterValue: 'frontend', operator: '=' },
+		]);
+	});
+
+	it('returns null for a slice with no source query', () => {
+		expect(
+			enrichPieClick({
+				slice: { label: 'x', value: 1, color: '#000' },
+				builderQueries: [],
+				coordinates: { x: 0, y: 0 },
+			}),
+		).toBeNull();
+	});
+});
+
+describe('resolvePanelContextLinks', () => {
+	it('substitutes the clicked field value (_-prefixed) into the label and URL', () => {
+		const resolved = resolvePanelContextLinks(
+			[
+				{
+					name: 'Runbook for {{_service.name}}',
+					url: 'https://wiki/{{_service.name}}',
+				},
+			],
+			{ '_service.name': 'frontend' },
+		);
+
+		expect(resolved).toHaveLength(1);
+		expect(resolved[0].label).toBe('Runbook for frontend');
+		expect(resolved[0].url).toBe('https://wiki/frontend');
+	});
+
+	it('drops links without a URL', () => {
+		expect(resolvePanelContextLinks([{ name: 'No URL' }], {})).toStrictEqual([]);
+		expect(resolvePanelContextLinks(undefined, {})).toStrictEqual([]);
+	});
+
+	it('keeps the raw URL when renderVariables is false', () => {
+		const resolved = resolvePanelContextLinks(
+			[
+				{
+					name: 'Literal',
+					url: 'https://wiki/{{_service.name}}',
+					renderVariables: false,
+				},
+			],
+			{ '_service.name': 'frontend' },
+		);
+
+		expect(resolved[0].url).toBe('https://wiki/{{_service.name}}');
+	});
+});
+
+describe('stepClickTimeRange', () => {
+	it('returns [clickedTs, clickedTs + step] for a non-APM query', () => {
+		expect(
+			stepClickTimeRange({
+				clickedDataTimestamp: 1000,
+				queryName: 'A',
+				builderQueries: [builderQuery({ name: 'A', signal: 'logs' })],
+				stepInterval: 30,
+			}),
+		).toStrictEqual({ startTime: 1000, endTime: 1030 });
+	});
+
+	it('falls back to a 60s step when no interval is provided', () => {
+		expect(
+			stepClickTimeRange({
+				clickedDataTimestamp: 1000,
+				queryName: 'A',
+				builderQueries: [
+					builderQuery({
+						name: 'A',
+						signal: 'metrics',
+						aggregations: [{ metricName: 'custom_metric' }],
+					}),
+				],
+			}),
+		).toStrictEqual({ startTime: 1000, endTime: 1060 });
+	});
+});
+
+describe('getDataLinks', () => {
+	it('adds a "View Trace Details" link when the filters carry a trace_id', () => {
+		expect(
+			getDataLinks([
+				{ filterKey: 'service.name', filterValue: 'frontend', operator: '=' },
+				{ filterKey: 'trace_id', filterValue: 'abc123', operator: '=' },
+			]),
+		).toStrictEqual([
+			{
+				id: 'view-trace-details',
+				label: 'View Trace Details',
+				url: '/trace/abc123',
+			},
+		]);
+	});
+
+	it('returns no links when there is no trace_id', () => {
+		expect(
+			getDataLinks([
+				{ filterKey: 'service.name', filterValue: 'frontend', operator: '=' },
+			]),
+		).toStrictEqual([]);
+	});
+});

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/utils/drilldown/buildAggregateData.ts

@@ -0,0 +1,18 @@
+import type { AggregateData } from 'container/QueryTable/Drilldown/useAggregateDrilldown';
+
+import type { DrilldownContext } from '../../types/drilldown';
+
+/**
+ * Adapts a V2 `DrilldownContext` to the V1 `AggregateData` that `buildDrilldownUrl`/the drilldown
+ * navigate hook consume. The single boundary between the V2 click payload and the reused V1
+ * navigation machinery.
+ */
+export function buildAggregateData(context: DrilldownContext): AggregateData {
+	return {
+		queryName: context.queryName,
+		filters: context.filters,
+		timeRange: context.timeRange,
+		label: context.label,
+		seriesColor: context.seriesColor,
+	};
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/utils/drilldown/chartClickTimeRange.ts

@@ -0,0 +1,38 @@
+import {
+	getTimeRangeFromStepInterval,
+	isApmMetric,
+} from 'container/PanelWrapper/utils';
+import type { BuilderQuery, MetricAggregation } from 'types/api/v5/queryRange';
+
+/** Fallback step (seconds) when the response carries no per-query step interval (V1 parity). */
+const DEFAULT_STEP_INTERVAL = 60;
+
+interface StepClickTimeRangeArgs {
+	/** Clicked bucket timestamp, in the chart's x-unit (epoch seconds). */
+	clickedDataTimestamp: number;
+	/** The clicked series' query — used to detect APM metrics. */
+	queryName: string;
+	builderQueries: BuilderQuery[];
+	/** Clicked series' step (seconds); falls back to DEFAULT_STEP_INTERVAL. */
+	stepInterval?: number;
+}
+
+/**
+ * Time window for a time-axis chart click: the clicked bucket plus one step (V1 parity). APM-metric
+ * panels widen the window one step to the left. Shared by the TimeSeries and Bar renderers; the
+ * matching field remapping happens later inside `getViewQuery`.
+ */
+export function stepClickTimeRange({
+	clickedDataTimestamp,
+	queryName,
+	builderQueries,
+	stepInterval = DEFAULT_STEP_INTERVAL,
+}: StepClickTimeRangeArgs): { startTime: number; endTime: number } {
+	const builderQuery = builderQueries.find((query) => query.name === queryName);
+	const isApm =
+		builderQuery?.signal === 'metrics' &&
+		isApmMetric(
+			(builderQuery?.aggregations?.[0] as MetricAggregation)?.metricName ?? '',
+		);
+	return getTimeRangeFromStepInterval(stepInterval, clickedDataTimestamp, isApm);
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/utils/drilldown/enrichChartClick.ts

@@ -0,0 +1,62 @@
+import { isValidQueryName } from 'container/QueryTable/Drilldown/drilldownUtils';
+import type { ChartClickData } from 'lib/uPlotV2/plugins/TooltipPlugin/types';
+import type { PanelSeries } from 'pages/DashboardPageV2/DashboardContainer/queryV5/types';
+import type { BuilderQuery } from 'types/api/v5/queryRange';
+
+import type { DrilldownClickPayload } from '../../types/drilldown';
+
+import { getGroupByFilters } from './getGroupByFilters';
+import { resolveDrilldownSignal } from './signal';
+
+interface EnrichChartClickArgs {
+	clickData: ChartClickData;
+	/** Flattened series in the same order they were added to uPlot (see `prepareAlignedData`/`addSeries`). */
+	series: PanelSeries[];
+	/** The panel's builder queries, for resolving the clicked series' signal by `queryName`. */
+	builderQueries: BuilderQuery[];
+	/** Explorer time window; the caller computes it (clicked bucket ±step for time charts, panel window for histograms). */
+	timeRange?: { startTime: number; endTime: number };
+}
+
+/**
+ * Turns a uPlot click (time-series or bar) into a drilldown payload. Resolves the clicked series via
+ * uPlot's series index (index 0 is the x-axis, so data series start at 1 → `series[seriesIndex - 1]`)
+ * and builds equality filters from its group-by label values. Returns `null` when the click can't be
+ * attributed to a drillable series (no focused series, unmapped index, or a formula query).
+ */
+export function enrichChartClick({
+	clickData,
+	series,
+	builderQueries,
+	timeRange,
+}: EnrichChartClickArgs): DrilldownClickPayload | null {
+	const { focusedSeries } = clickData;
+	if (!focusedSeries) {
+		return null;
+	}
+
+	const panelSeries = series[focusedSeries.seriesIndex - 1];
+	if (!panelSeries || !isValidQueryName(panelSeries.queryName)) {
+		return null;
+	}
+
+	const builderQuery = builderQueries.find(
+		(query) => query.name === panelSeries.queryName,
+	);
+
+	const filters = builderQuery
+		? getGroupByFilters(panelSeries.labels, builderQuery)
+		: [];
+
+	return {
+		coordinates: { x: clickData.absoluteMouseX, y: clickData.absoluteMouseY },
+		context: {
+			queryName: panelSeries.queryName,
+			signal: resolveDrilldownSignal(builderQuery),
+			filters,
+			timeRange,
+			label: focusedSeries.seriesName,
+			seriesColor: focusedSeries.color,
+		},
+	};
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/utils/drilldown/enrichNumberClick.ts

@@ -0,0 +1,49 @@
+import { isValidQueryName } from 'container/QueryTable/Drilldown/drilldownUtils';
+import type { PanelTable } from 'pages/DashboardPageV2/DashboardContainer/queryV5/types';
+import type { BuilderQuery } from 'types/api/v5/queryRange';
+
+import type { DrilldownClickPayload } from '../../types/drilldown';
+
+import { resolveDrilldownSignal } from './signal';
+
+interface EnrichNumberClickArgs {
+	/** The panel's scalar tables — the displayed value's column selects the drilldown query. */
+	tables: PanelTable[];
+	/** The panel's builder queries; resolves the clicked query's signal by name. */
+	builderQueries: BuilderQuery[];
+	coordinates: { x: number; y: number };
+	/** Explorer time window — the panel's fetched window (the value has no clicked bucket). */
+	timeRange?: { startTime: number; endTime: number };
+}
+
+/**
+ * Turns a Number/Value click into a drilldown payload. Drills into the query the panel actually
+ * displays — the first table-with-rows' value column (mirrors `prepareNumberData`), not blindly
+ * `builderQueries[0]` (they diverge for multi-query panels). Returns `null` when that query isn't
+ * drillable (promql/formula).
+ */
+export function enrichNumberClick({
+	tables,
+	builderQueries,
+	coordinates,
+	timeRange,
+}: EnrichNumberClickArgs): DrilldownClickPayload | null {
+	const valueColumn = tables
+		.find((table) => table.rows.length > 0)
+		?.columns.find((column) => column.isValueColumn);
+	const queryName = valueColumn?.queryName ?? builderQueries[0]?.name ?? '';
+	if (!isValidQueryName(queryName)) {
+		return null;
+	}
+
+	const builderQuery = builderQueries.find((query) => query.name === queryName);
+	return {
+		coordinates,
+		context: {
+			queryName,
+			signal: resolveDrilldownSignal(builderQuery),
+			filters: [],
+			timeRange,
+		},
+	};
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/utils/drilldown/enrichPieClick.ts

@@ -0,0 +1,50 @@
+import type { PieSlice } from 'container/DashboardContainer/visualization/charts/types';
+import { isValidQueryName } from 'container/QueryTable/Drilldown/drilldownUtils';
+import type { BuilderQuery } from 'types/api/v5/queryRange';
+
+import type { DrilldownClickPayload } from '../../types/drilldown';
+
+import { getGroupByFilters } from './getGroupByFilters';
+import { resolveDrilldownSignal } from './signal';
+
+interface EnrichPieClickArgs {
+	slice: PieSlice;
+	builderQueries: BuilderQuery[];
+	coordinates: { x: number; y: number };
+	/** Explorer time window — the panel's fetched window (pie slices have no clicked bucket). */
+	timeRange?: { startTime: number; endTime: number };
+}
+
+/**
+ * Turns a pie-slice click into a drilldown payload, using the slice's source-row group-by label
+ * values (carried by `preparePieData`) as equality filters. Returns `null` when the slice has no
+ * drillable query.
+ */
+export function enrichPieClick({
+	slice,
+	builderQueries,
+	coordinates,
+	timeRange,
+}: EnrichPieClickArgs): DrilldownClickPayload | null {
+	const queryName = slice.queryName ?? '';
+	if (!isValidQueryName(queryName)) {
+		return null;
+	}
+
+	const builderQuery = builderQueries.find((query) => query.name === queryName);
+
+	const filters = builderQuery
+		? getGroupByFilters(slice.labels ?? {}, builderQuery)
+		: [];
+	return {
+		coordinates,
+		context: {
+			queryName,
+			signal: resolveDrilldownSignal(builderQuery),
+			filters: filters,
+			timeRange,
+			label: slice.label,
+			seriesColor: slice.color,
+		},
+	};
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/utils/drilldown/enrichTableClick.ts

@@ -0,0 +1,91 @@
+import { OPERATORS } from 'constants/queryBuilder';
+import {
+	type FilterData,
+	isValidQueryName,
+} from 'container/QueryTable/Drilldown/drilldownUtils';
+import type { PanelTable } from 'pages/DashboardPageV2/DashboardContainer/queryV5/types';
+import type { BuilderQuery } from 'types/api/v5/queryRange';
+
+import type { DrilldownClickPayload } from '../../types/drilldown';
+
+import { resolveDrilldownSignal } from './signal';
+
+interface EnrichTableClickArgs {
+	/** The clicked row's data, keyed by column id (see `prepareScalarTables`). */
+	record: Record<string, unknown>;
+	/** The clicked column's key (`column.id || column.name`). */
+	columnId: string;
+	table: PanelTable;
+	builderQueries: BuilderQuery[];
+	coordinates: { x: number; y: number };
+	/** Explorer time window — the panel's fetched window (scalar tables have no clicked bucket). */
+	timeRange?: { startTime: number; endTime: number };
+}
+
+/**
+ * Turns a table cell click into a drilldown payload. The clicked value column (or the row's first
+ * value column) selects the aggregate query, and the row's group-by cells become equality filters
+ * (V1 `getFiltersToAddToView` parity). `columnKind` records whether a value or group column was
+ * clicked, for the future filter-by-value menu. Returns `null` when the row has no drillable
+ * aggregate query.
+ */
+export function enrichTableClick({
+	record,
+	columnId,
+	table,
+	builderQueries,
+	coordinates,
+	timeRange,
+}: EnrichTableClickArgs): DrilldownClickPayload | null {
+	const clickedColumn = table.columns.find(
+		(col) => (col.id || col.name) === columnId,
+	);
+	const valueColumn = clickedColumn?.isValueColumn
+		? clickedColumn
+		: table.columns.find((col) => col.isValueColumn);
+	if (!valueColumn || !isValidQueryName(valueColumn.queryName)) {
+		return null;
+	}
+
+	const filters = table.columns.reduce<FilterData[]>((acc, col) => {
+		if (col.isValueColumn) {
+			return acc;
+		}
+		const value = record[col.id || col.name];
+		if (value != null) {
+			// Group cell value → equality filter. Cast at the boundary: row data is `unknown`,
+			// group cells hold scalar label values.
+			acc.push({
+				filterKey: col.name,
+				filterValue: value as string | number,
+				operator: OPERATORS['='],
+			});
+		}
+		return acc;
+	}, []);
+
+	const builderQuery = builderQueries.find(
+		(query) => query.name === valueColumn.queryName,
+	);
+
+	// A group-column click filters by that single cell (V1 filter-by-value); a value-column click
+	// opens the aggregate menu scoped by the whole row.
+	const isGroupColumn = clickedColumn != null && !clickedColumn.isValueColumn;
+
+	return {
+		coordinates,
+		context: {
+			queryName: valueColumn.queryName,
+			signal: resolveDrilldownSignal(builderQuery),
+			filters,
+			timeRange,
+			// No `label`: like Number/Value, the aggregate menu header falls back to the
+			// aggregation expression (e.g. `sum(signoz_calls_total)`), not the column name (V1 parity).
+			columnKind: isGroupColumn ? 'group' : 'aggregate',
+			clickedKey: isGroupColumn ? clickedColumn?.name : undefined,
+			clickedValue: isGroupColumn
+				? (record[columnId] as string | number)
+				: undefined,
+		},
+	};
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/utils/drilldown/getDataLinks.ts

@@ -0,0 +1,29 @@
+import type { FilterData } from 'container/QueryTable/Drilldown/drilldownUtils';
+
+/** An auto-generated drilldown link (label + destination URL). */
+export interface DrilldownDataLink {
+	id: string;
+	label: string;
+	url: string;
+}
+
+/**
+ * Links derived automatically from the clicked point's filters — the V2 port of V1's `getDataLinks`.
+ * Currently a single "View Trace Details" link when the clicked row carries a `trace_id`.
+ */
+export function getDataLinks(filters: FilterData[]): DrilldownDataLink[] {
+	const links: DrilldownDataLink[] = [];
+
+	const traceId = filters.find(
+		(filter) => filter.filterKey === 'trace_id',
+	)?.filterValue;
+	if (traceId) {
+		links.push({
+			id: 'view-trace-details',
+			label: 'View Trace Details',
+			url: `/trace/${traceId}`,
+		});
+	}
+
+	return links;
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/utils/drilldown/getGroupByFilters.ts

@@ -0,0 +1,26 @@
+import {
+	type FilterData,
+	getFiltersFromMetric,
+} from 'container/QueryTable/Drilldown/drilldownUtils';
+import type { BuilderQuery } from 'types/api/v5/queryRange';
+
+/**
+ * Equality filters for the clicked series/slice, restricted to the query's group-by dimensions.
+ * `labels` also carry a display-only legend backfill (`{queryName: queryName}` when ungrouped, see
+ * `resolveLegendAndLabels`); intersecting with group-by drops it so `filters` stays empty when
+ * ungrouped, matching V1.
+ */
+export function getGroupByFilters(
+	labels: Record<string, string>,
+	builderQuery: BuilderQuery,
+): FilterData[] {
+	const groupByKeys = new Set(
+		(builderQuery.groupBy ?? []).map((group) => group.name),
+	);
+	if (groupByKeys.size === 0) {
+		return [];
+	}
+	return getFiltersFromMetric(labels).filter((filter) =>
+		groupByKeys.has(filter.filterKey),
+	);
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/utils/drilldown/resolvePanelContextLinks.ts

@@ -0,0 +1,50 @@
+import type { DashboardLinkDTO } from 'api/generated/services/sigNoz.schemas';
+import { processContextLinks } from 'container/NewWidget/RightContainer/ContextLinks/utils';
+import type { ContextLinkProps } from 'types/api/dashboard/getAll';
+
+/** A panel context link with its label and URL templates resolved, ready to render. */
+export interface ResolvedDrilldownLink {
+	id: string;
+	label: string;
+	url: string;
+}
+
+/**
+ * Resolves a panel's context links for the drilldown menu. Adapts each `DashboardLinkDTO` to the V1
+ * `ContextLinkProps` the shared `processContextLinks` resolver expects, substitutes variables in the
+ * label + URL, and drops links without a URL. Links with `renderVariables === false` keep their raw
+ * label/URL (no substitution).
+ */
+export function resolvePanelContextLinks(
+	links: DashboardLinkDTO[] | undefined,
+	processedVariables: Record<string, string>,
+): ResolvedDrilldownLink[] {
+	const usable = (links ?? []).filter((link) => !!link.url);
+	if (usable.length === 0) {
+		return [];
+	}
+
+	const adapted: ContextLinkProps[] = usable.map((link, index) => ({
+		id: String(index),
+		label: link.name || link.url || '',
+		url: link.url ?? '',
+	}));
+
+	const resolved = processContextLinks(adapted, processedVariables, 50);
+
+	return usable.map((link, index) => {
+		// `renderVariables` defaults to on; only an explicit `false` opts out of substitution.
+		if (link.renderVariables === false) {
+			return {
+				id: String(index),
+				label: link.name || link.url || '',
+				url: link.url ?? '',
+			};
+		}
+		return {
+			id: resolved[index].id,
+			label: resolved[index].label,
+			url: resolved[index].url,
+		};
+	});
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/utils/drilldown/signal.ts

@@ -0,0 +1,19 @@
+import { TelemetrytypesSignalDTO } from 'api/generated/services/sigNoz.schemas';
+import type { BuilderQuery } from 'types/api/v5/queryRange';
+
+/**
+ * Maps a V5 builder query's `signal` to the drilldown signal. Meter and unknown signals fall back to
+ * `metrics` so the drilldown always targets a real explorer.
+ */
+export function resolveDrilldownSignal(
+	query: BuilderQuery | undefined,
+): TelemetrytypesSignalDTO {
+	switch (query?.signal) {
+		case 'logs':
+			return TelemetrytypesSignalDTO.logs;
+		case 'traces':
+			return TelemetrytypesSignalDTO.traces;
+		default:
+			return TelemetrytypesSignalDTO.metrics;
+	}
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/utils/getPanelTimeRange.ts

@@ -0,0 +1,28 @@
+import type { Querybuildertypesv5QueryRangeRequestDTO } from 'api/generated/services/sigNoz.schemas';
+import getStartEndRangeTime from 'lib/getStartEndRangeTime';
+import store from 'store';
+
+/** Panel time window in epoch SECONDS (uPlot X-scale + drilldown explorer window). */
+interface PanelTimeRange {
+	startTime: number;
+	endTime: number;
+}
+
+/**
+ * Time window a panel's data was fetched over, read off the request's `start`/`end` (ms → s).
+ * Falls back to the dashboard global-time window when the panel hasn't fetched yet.
+ */
+export function getPanelTimeRange(
+	request: Querybuildertypesv5QueryRangeRequestDTO | undefined,
+): PanelTimeRange {
+	if (request?.start && request?.end) {
+		return { startTime: request.start / 1000, endTime: request.end / 1000 };
+	}
+
+	const { globalTime } = store.getState();
+	const { start, end } = getStartEndRangeTime({
+		type: 'GLOBAL_TIME',
+		interval: globalTime.selectedTime,
+	});
+	return { startTime: parseInt(start, 10), endTime: parseInt(end, 10) };
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/DrilldownMenu/DrilldownAggregateMenu.module.scss

@@ -0,0 +1,10 @@
+.signal {
+	text-transform: capitalize;
+}
+
+.label {
+	overflow: hidden;
+	font-weight: normal;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/DrilldownMenu/DrilldownAggregateMenu.tsx

@@ -0,0 +1,165 @@
+import { useMemo } from 'react';
+import {
+	Braces,
+	ChartBar,
+	DraftingCompass,
+	Link,
+	Loader,
+	ScrollText,
+} from '@signozhq/icons';
+import type { DashboardLinkDTO } from 'api/generated/services/sigNoz.schemas';
+import { getAggregateColumnHeader } from 'container/QueryTable/Drilldown/drilldownUtils';
+import ContextMenu from 'periscope/components/ContextMenu';
+import type { DrilldownContext } from 'pages/DashboardPageV2/DashboardContainer/Panels/types/drilldown';
+import { getDataLinks } from 'pages/DashboardPageV2/DashboardContainer/Panels/utils/drilldown/getDataLinks';
+import { resolvePanelContextLinks } from 'pages/DashboardPageV2/DashboardContainer/Panels/utils/drilldown/resolvePanelContextLinks';
+import type { Query } from 'types/api/queryBuilder/queryBuilderData';
+import { openInNewTab } from 'utils/navigation';
+
+import { useDrilldownContextVariables } from '../hooks/useDrilldownContextVariables';
+
+import styles from './DrilldownAggregateMenu.module.scss';
+
+interface DrilldownAggregateMenuProps {
+	context: DrilldownContext;
+	/** Panel's V5→V1 query — supplies the aggregation-expression header fallback. */
+	query: Query;
+	/** While dashboard variables resolve, the actions show a spinner and are disabled. */
+	isResolving?: boolean;
+	/** Panel's context links; resolved against the clicked point + variables here. */
+	links: DashboardLinkDTO[] | undefined;
+	/** Whether the clicked point exposes group-by fields to bind to dashboard variables. */
+	canSetDashboardVariables: boolean;
+	onViewLogs: () => void;
+	onViewTraces: () => void;
+	onBreakout: () => void;
+	/** Open the Dashboard Variables submenu (set/unset/create from the clicked value). */
+	onSetDashboardVariables: () => void;
+	/** Close the popover (context-link clicks). */
+	onClose: () => void;
+}
+
+/**
+ * The base aggregate drill-down menu: tinted header + View in Logs/Traces, Breakout, and the
+ * panel's context links. Mounted only while open, so the variable/link resolution runs only then.
+ * Metrics is omitted — V1 surfaces only Logs/Traces.
+ */
+function DrilldownAggregateMenu({
+	context,
+	query,
+	isResolving = false,
+	links,
+	canSetDashboardVariables,
+	onViewLogs,
+	onViewTraces,
+	onBreakout,
+	onSetDashboardVariables,
+	onClose,
+}: DrilldownAggregateMenuProps): JSX.Element {
+	const aggregations = useMemo(
+		() => getAggregateColumnHeader(query, context.queryName).aggregations,
+		[query, context.queryName],
+	);
+
+	const processedVariables = useDrilldownContextVariables(context);
+	const contextLinks = useMemo(
+		() => resolvePanelContextLinks(links, processedVariables),
+		[links, processedVariables],
+	);
+	// Auto links derived from the clicked point itself (e.g. "View Trace Details" for a trace_id).
+	const dataLinks = useMemo(
+		() => getDataLinks(context.filters),
+		[context.filters],
+	);
+
+	return (
+		<>
+			<ContextMenu.Header>
+				<div className={styles.signal}>{context.signal}</div>
+				<div className={styles.label} style={{ color: context.seriesColor }}>
+					{context.label || aggregations}
+				</div>
+			</ContextMenu.Header>
+			{canSetDashboardVariables && (
+				<ContextMenu.Item
+					icon={
+						<span style={{ color: context.seriesColor }}>
+							<Braces size={16} />
+						</span>
+					}
+					onClick={onSetDashboardVariables}
+				>
+					<span data-testid="drilldown-dashboard-variables">
+						Dashboard Variables
+					</span>
+				</ContextMenu.Item>
+			)}
+			<ContextMenu.Item
+				icon={
+					isResolving ? (
+						<Loader className="animate-spin" size={16} color={context.seriesColor} />
+					) : (
+						<span style={{ color: context.seriesColor }}>
+							<ScrollText size={16} />
+						</span>
+					)
+				}
+				onClick={onViewLogs}
+				disabled={isResolving}
+			>
+				<span data-testid="drilldown-view-logs">View in Logs</span>
+			</ContextMenu.Item>
+			<ContextMenu.Item
+				icon={
+					isResolving ? (
+						<Loader className="animate-spin" color={context.seriesColor} size={16} />
+					) : (
+						<span style={{ color: context.seriesColor }}>
+							<DraftingCompass size={16} />
+						</span>
+					)
+				}
+				onClick={onViewTraces}
+				disabled={isResolving}
+			>
+				<span data-testid="drilldown-view-traces">View in Traces</span>
+			</ContextMenu.Item>
+			<ContextMenu.Item
+				icon={
+					<span style={{ color: context.seriesColor }}>
+						<ChartBar size={16} />
+					</span>
+				}
+				onClick={onBreakout}
+			>
+				<span data-testid="drilldown-breakout">Breakout by ..</span>
+			</ContextMenu.Item>
+			{dataLinks.map((link) => (
+				<ContextMenu.Item
+					key={link.id}
+					icon={<Link size={16} color={context.seriesColor} />}
+					onClick={(): void => {
+						openInNewTab(link.url);
+						onClose();
+					}}
+				>
+					<span data-testid="drilldown-data-link">{link.label}</span>
+				</ContextMenu.Item>
+			))}
+			{contextLinks.map((link) => (
+				<ContextMenu.Item
+					key={link.id}
+					icon={<Link size={16} color={context.seriesColor} />}
+					onClick={(): void => {
+						openInNewTab(link.url);
+						onClose();
+					}}
+				>
+					<span data-testid="drilldown-context-link">{link.label}</span>
+				</ContextMenu.Item>
+			))}
+		</>
+	);
+}
+
+export default DrilldownAggregateMenu;

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/DrilldownMenu/DrilldownBreakoutMenu.module.scss

@@ -0,0 +1,9 @@
+.header {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+}
+
+.backArrow {
+	cursor: pointer;
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/DrilldownMenu/DrilldownBreakoutMenu.tsx

@@ -0,0 +1,45 @@
+import { ArrowLeft } from '@signozhq/icons';
+import BreakoutOptions from 'container/QueryTable/Drilldown/BreakoutOptions';
+import type { BreakoutAttributeType } from 'container/QueryTable/Drilldown/types';
+import ContextMenu from 'periscope/components/ContextMenu';
+import type { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
+
+import styles from './DrilldownBreakoutMenu.module.scss';
+
+interface DrilldownBreakoutMenuProps {
+	/** The clicked query's builder data — supplies the picker's available attributes. */
+	queryData: IBuilderQuery;
+	/** Regroup the clicked query by the picked attribute. */
+	onBreakout: (groupBy: BreakoutAttributeType) => void;
+	/** Return to the base aggregate menu. */
+	onBack: () => void;
+}
+
+/**
+ * The "Breakout by .." submenu — a back header + V1's read-only `BreakoutOptions` attribute picker,
+ * wired to `onBreakout`.
+ */
+function DrilldownBreakoutMenu({
+	queryData,
+	onBreakout,
+	onBack,
+}: DrilldownBreakoutMenuProps): JSX.Element {
+	return (
+		<>
+			<ContextMenu.Header>
+				<div className={styles.header}>
+					<ArrowLeft
+						size={14}
+						className={styles.backArrow}
+						onClick={onBack}
+						data-testid="drilldown-breakout-back"
+					/>
+					<span>Breakout by</span>
+				</div>
+			</ContextMenu.Header>
+			<BreakoutOptions queryData={queryData} onColumnClick={onBreakout} />
+		</>
+	);
+}
+
+export default DrilldownBreakoutMenu;

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/DrilldownMenu/DrilldownDashboardVariablesMenu.module.scss

@@ -0,0 +1,9 @@
+.header {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+}
+
+.backArrow {
+	cursor: pointer;
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/DrilldownMenu/DrilldownDashboardVariablesMenu.tsx

@@ -0,0 +1,79 @@
+import { ArrowLeft, Plus, Settings, X } from '@signozhq/icons';
+import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
+import {
+	type DrilldownVariableAction,
+	DrilldownVariableActionKind,
+} from 'pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/hooks/useDrilldownDashboardVariables';
+import ContextMenu from 'periscope/components/ContextMenu';
+
+import styles from './DrilldownDashboardVariablesMenu.module.scss';
+
+interface DrilldownDashboardVariablesMenuProps {
+	/** Resolved entries from `useDrilldownDashboardVariables`. */
+	actions: DrilldownVariableAction[];
+	/** Return to the base aggregate menu. */
+	onBack: () => void;
+}
+
+const ICON_BY_KIND: Record<DrilldownVariableActionKind, JSX.Element> = {
+	[DrilldownVariableActionKind.Set]: <Settings size={16} />,
+	[DrilldownVariableActionKind.Unset]: <X size={16} />,
+	[DrilldownVariableActionKind.Create]: <Plus size={16} />,
+};
+
+/**
+ * The "Dashboard Variables" drilldown submenu — renders the entries resolved by
+ * `useDrilldownDashboardVariables` (Set/Unset an existing dynamic variable, or Create one).
+ */
+function DrilldownDashboardVariablesMenu({
+	actions,
+	onBack,
+}: DrilldownDashboardVariablesMenuProps): JSX.Element {
+	return (
+		<>
+			<ContextMenu.Header>
+				<div className={styles.header}>
+					<ArrowLeft
+						size={14}
+						className={styles.backArrow}
+						onClick={onBack}
+						data-testid="drilldown-var-back"
+					/>
+					<span>Dashboard Variables</span>
+				</div>
+			</ContextMenu.Header>
+			<OverlayScrollbar
+				style={{ maxHeight: '200px' }}
+				options={{ overflow: { x: 'hidden' } }}
+			>
+				<>
+					{actions.map(({ fieldName, fieldValue, kind, onClick }) => (
+						<ContextMenu.Item
+							key={fieldName}
+							icon={ICON_BY_KIND[kind]}
+							onClick={onClick}
+						>
+							{kind === DrilldownVariableActionKind.Unset && (
+								<span data-testid="drilldown-var-unset">
+									Unset <strong>${fieldName}</strong>
+								</span>
+							)}
+							{kind === DrilldownVariableActionKind.Set && (
+								<span data-testid="drilldown-var-set">
+									Set <strong>${fieldName}</strong> to <strong>{fieldValue}</strong>
+								</span>
+							)}
+							{kind === DrilldownVariableActionKind.Create && (
+								<span data-testid="drilldown-var-create">
+									Create var <strong>${fieldName}</strong>:<strong>{fieldValue}</strong>
+								</span>
+							)}
+						</ContextMenu.Item>
+					))}
+				</>
+			</OverlayScrollbar>
+		</>
+	);
+}
+
+export default DrilldownDashboardVariablesMenu;

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/DrilldownMenu/DrilldownFilterMenu.tsx

@@ -0,0 +1,40 @@
+import { PANEL_TYPES } from 'constants/queryBuilder';
+import { getGroupContextMenuConfig } from 'container/QueryTable/Drilldown/contextConfig';
+import type { ClickedData } from 'periscope/components/ContextMenu';
+import type { Query } from 'types/api/queryBuilder/queryBuilderData';
+
+interface DrilldownFilterMenuProps {
+	/** The panel's V5→V1 query the operator menu builds filters against. */
+	v1Query: Query;
+	/** The clicked group column's key. */
+	clickedKey: string;
+	/** Apply the chosen operator (adds the filter and opens the View modal). */
+	onFilter: (operator: string) => void;
+}
+
+/**
+ * The group-column "filter by value" submenu — the operator list from V1's read-only
+ * `getGroupContextMenuConfig`, wired to `onFilter`.
+ */
+function DrilldownFilterMenu({
+	v1Query,
+	clickedKey,
+	onFilter,
+}: DrilldownFilterMenuProps): JSX.Element {
+	const clickedData: ClickedData = {
+		column: { dataIndex: clickedKey },
+		record: { key: clickedKey, timestamp: 0 },
+	};
+	return (
+		<>
+			{getGroupContextMenuConfig({
+				query: v1Query,
+				clickedData,
+				panelType: PANEL_TYPES.TABLE,
+				onColumnClick: onFilter,
+			}).items ?? null}
+		</>
+	);
+}
+
+export default DrilldownFilterMenu;

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/Panel.tsx

@@ -3,11 +3,13 @@ import type {
 	DashboardtypesPanelDTO,
 	DashboardtypesTimePreferenceDTO,
 } from 'api/generated/services/sigNoz.schemas';
+import ContextMenu from 'periscope/components/ContextMenu';
 import { getPanelDefinition } from 'pages/DashboardPageV2/DashboardContainer/Panels/registry';
 import { panelTimePreferenceLabel } from 'pages/DashboardPageV2/DashboardContainer/hooks/resolvePanelTimeWindow';
 import { usePanelQuery } from 'pages/DashboardPageV2/DashboardContainer/hooks/usePanelQuery';
 
 import type { DashboardSection } from '../../utils';
+import { useDrilldown } from './hooks/useDrilldown';
 import { usePanelInteractions } from './hooks/usePanelInteractions';
 import PanelBody from './PanelBody/PanelBody';
 import PanelHeader from './PanelHeader/PanelHeader';
@@ -68,6 +70,7 @@ function Panel({
 		});
 
 	const { onDragSelect, dashboardPreference } = usePanelInteractions();
+	const drilldown = useDrilldown(panel, panelId);
 
 	return (
 		<div
@@ -100,8 +103,11 @@ function Panel({
 					dashboardPreference={dashboardPreference}
 					searchTerm={searchable ? searchTerm : undefined}
 					pagination={pagination}
+					onClick={drilldown.onPanelClick}
+					enableDrillDown={drilldown.enableDrillDown}
 				/>
 			)}
+			<ContextMenu {...drilldown.contextMenuProps} />
 		</div>
 	);
 }

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/PanelActionsMenu/__tests__/usePanelActionItems.test.tsx

@@ -294,4 +294,13 @@ describe('usePanelActionItems', () => {
 		(createAlert as { onClick: () => void }).onClick();
 		expect(mockCreateAlert).toHaveBeenCalledWith(mockPanel, 'panel-1');
 	});
+
+	it('create-alert seeds an alert from this panel', () => {
+		const { result } = renderHook(() => usePanelActionItems(baseArgs));
+		const createAlert = result.current.items.find(
+			(i) => 'key' in i && i.key === 'create-alert',
+		);
+		(createAlert as { onClick: () => void }).onClick();
+		expect(mockCreateAlert).toHaveBeenCalledWith(mockPanel, 'panel-1');
+	});
 });

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/PanelActionsMenu/panelActionMeta.ts

@@ -3,12 +3,13 @@ import type { ComponentTypes } from 'utils/permission';
 
 /**
  * Every action the panel menu can offer: per-kind gated capabilities (minus
- * `search`, a header control) plus the chrome actions every kind gets. The
- * `Record<PanelActionId, …>` below forces a meta entry per id, so adding an
- * action without declaring its gates is a compile error.
+ * `search` and `drilldown`, which are renderer-wired controls, not menu items)
+ * plus the chrome actions every kind gets. The `Record<PanelActionId, …>` below
+ * forces a meta entry per id, so adding an action without declaring its gates is
+ * a compile error.
  */
 export type PanelActionId =
-	| Exclude<keyof PanelActionCapabilities, 'search'>
+	| Exclude<keyof PanelActionCapabilities, 'search' | 'drilldown'>
 	| 'move'
 	| 'delete';
 

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/PanelBody/PanelBody.tsx

@@ -3,6 +3,7 @@ import { Loader, RotateCw, SquarePlus, TriangleAlert } from '@signozhq/icons';
 import type { DashboardtypesPanelDTO } from 'api/generated/services/sigNoz.schemas';
 import { PanelMode } from 'container/DashboardContainer/visualization/panels/types';
 import PanelMessage from 'pages/DashboardPageV2/DashboardContainer/Panels/components/PanelMessage/PanelMessage';
+import type { AnyPanelInteractionProps } from 'pages/DashboardPageV2/DashboardContainer/Panels/types/interactions';
 import type { RenderablePanelDefinition } from 'pages/DashboardPageV2/DashboardContainer/Panels/types/panelDefinition';
 import type { DashboardPreference } from 'pages/DashboardPageV2/DashboardContainer/Panels/types/rendererProps';
 import { hasRunnableQueries } from 'pages/DashboardPageV2/DashboardContainer/queryV5/buildQueryRangeRequest';
@@ -37,6 +38,10 @@ interface PanelBodyProps {
 	pagination?: PanelPagination;
 	/** Close the standalone View modal — only consumed by the time-series/bar graph manager. */
 	onCloseStandaloneView?: () => void;
+	/** Opens the drill-down context menu; threaded to interactive renderers. */
+	onClick?: AnyPanelInteractionProps['onClick'];
+	/** Gate for the drill-down menu — kind supported and the panel has a builder query. */
+	enableDrillDown?: boolean;
 }
 
 /**
@@ -58,6 +63,8 @@ function PanelBody({
 	searchTerm,
 	pagination,
 	onCloseStandaloneView,
+	onClick,
+	enableDrillDown = false,
 }: PanelBodyProps): JSX.Element {
 	// A retained response (keepPreviousData) counts as data only if its type matches the current
 	// request — else a prior panel kind's response (time_series → raw) flashes NoData on switch.
@@ -120,7 +127,8 @@ function PanelBody({
 				refetch={refetch}
 				onDragSelect={onDragSelect}
 				panelMode={panelMode}
-				enableDrillDown={false}
+				enableDrillDown={enableDrillDown}
+				onClick={onClick}
 				dashboardPreference={dashboardPreference}
 				searchTerm={searchTerm}
 				pagination={pagination}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/ViewPanelModal/ViewPanelQueryBuilder.tsx

@@ -0,0 +1,64 @@
+import { type KeyboardEvent, useCallback } from 'react';
+import { QueryBuilderV2 } from 'components/QueryBuilderV2/QueryBuilderV2';
+import { PANEL_TYPES } from 'constants/queryBuilder';
+import RightToolbarActions from 'container/QueryBuilder/components/ToolbarActions/RightToolbarActions';
+
+import styles from './ViewPanelModal.module.scss';
+
+interface ViewPanelQueryBuilderProps {
+	panelType: PANEL_TYPES;
+	/** Preview fetch in flight — drives the Run/Cancel button state. */
+	isLoadingQueries: boolean;
+	/** Run the current query (Run Query button / ⌘↵). */
+	onStageRunQuery: () => void;
+	/** Abort the in-flight preview fetch. */
+	onCancelQuery: () => void;
+}
+
+/**
+ * Drilldown query editor for the View modal. Mirrors V1's FullView: the query builder
+ * rows + a "Run Query" button, with NO query-type tabs (ClickHouse/PromQL) — drilldown
+ * is query-builder only, exactly as V1.
+ */
+function ViewPanelQueryBuilder({
+	panelType,
+	isLoadingQueries,
+	onStageRunQuery,
+	onCancelQuery,
+}: ViewPanelQueryBuilderProps): JSX.Element {
+	const handleKeyDownCapture = useCallback(
+		(event: KeyboardEvent<HTMLDivElement>): void => {
+			if ((event.metaKey || event.ctrlKey) && event.key === 'Enter') {
+				event.preventDefault();
+				event.stopPropagation();
+				onStageRunQuery();
+			}
+		},
+		[onStageRunQuery],
+	);
+
+	return (
+		<div
+			className={styles.queryBuilder}
+			data-testid="view-panel-query-builder"
+			onKeyDownCapture={handleKeyDownCapture}
+			role="presentation"
+		>
+			<QueryBuilderV2
+				panelType={panelType}
+				version="v3"
+				isListViewPanel={panelType === PANEL_TYPES.LIST}
+				signalSourceChangeEnabled
+			/>
+			<div className={styles.queryBuilderToolbar}>
+				<RightToolbarActions
+					handleCancelQuery={onCancelQuery}
+					onStageRunQuery={onStageRunQuery}
+					isLoadingQueries={isLoadingQueries}
+				/>
+			</div>
+		</div>
+	);
+}
+
+export default ViewPanelQueryBuilder;

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/__tests__/DrilldownDashboardVariablesMenu.test.tsx

@@ -0,0 +1,74 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import DrilldownDashboardVariablesMenu from '../DrilldownMenu/DrilldownDashboardVariablesMenu';
+import {
+	type DrilldownVariableAction,
+	DrilldownVariableActionKind,
+} from '../hooks/useDrilldownDashboardVariables';
+
+jest.mock('components/OverlayScrollbar/OverlayScrollbar', () => ({
+	__esModule: true,
+	default: ({ children }: { children: React.ReactNode }): JSX.Element => (
+		<div>{children}</div>
+	),
+}));
+
+function action(
+	overrides: Partial<DrilldownVariableAction> = {},
+): DrilldownVariableAction {
+	return {
+		fieldName: 'service.name',
+		fieldValue: 'frontend',
+		kind: DrilldownVariableActionKind.Set,
+		onClick: jest.fn(),
+		...overrides,
+	};
+}
+
+describe('DrilldownDashboardVariablesMenu', () => {
+	it('renders each kind with its own label and fires its onClick', async () => {
+		const onSet = jest.fn();
+		const onUnset = jest.fn();
+		const onCreate = jest.fn();
+		render(
+			<DrilldownDashboardVariablesMenu
+				onBack={jest.fn()}
+				actions={[
+					action({
+						fieldName: 'a',
+						kind: DrilldownVariableActionKind.Set,
+						onClick: onSet,
+					}),
+					action({
+						fieldName: 'b',
+						kind: DrilldownVariableActionKind.Unset,
+						onClick: onUnset,
+					}),
+					action({
+						fieldName: 'c',
+						kind: DrilldownVariableActionKind.Create,
+						onClick: onCreate,
+					}),
+				]}
+			/>,
+		);
+
+		expect(screen.getByTestId('drilldown-var-set')).toBeInTheDocument();
+		expect(screen.getByTestId('drilldown-var-unset')).toBeInTheDocument();
+		expect(screen.getByTestId('drilldown-var-create')).toBeInTheDocument();
+
+		await userEvent.click(screen.getByTestId('drilldown-var-set'));
+		expect(onSet).toHaveBeenCalledTimes(1);
+	});
+
+	it('returns to the base menu when the back arrow is clicked', async () => {
+		const onBack = jest.fn();
+		render(
+			<DrilldownDashboardVariablesMenu onBack={onBack} actions={[action()]} />,
+		);
+
+		await userEvent.click(screen.getByTestId('drilldown-var-back'));
+		expect(onBack).toHaveBeenCalledTimes(1);
+	});
+});

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/__tests__/useDrilldown.test.tsx

@@ -0,0 +1,299 @@
+import { act, render, renderHook, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import {
+	type DashboardtypesPanelDTO,
+	TelemetrytypesSignalDTO,
+} from 'api/generated/services/sigNoz.schemas';
+import { PANEL_TYPES } from 'constants/queryBuilder';
+import type { DrilldownContext } from 'pages/DashboardPageV2/DashboardContainer/Panels/types/drilldown';
+
+import { useDrilldown } from '../hooks/useDrilldown';
+
+const mockOpenViewWithQuery = jest.fn();
+const mockNavigate = jest.fn();
+const mockGetBuilderQueries = jest.fn();
+let mockResolved = { resolvedQuery: 'RESOLVED_QUERY', isResolving: false };
+let mockDashboardVariables: {
+	hasFieldVariables: boolean;
+	actions: unknown[];
+} = {
+	hasFieldVariables: true,
+	actions: [],
+};
+
+// Boundaries tested elsewhere / needing external context — mocked so this suite isolates
+// useDrilldown's orchestration (gating, which menu shows, the View-modal handoff).
+jest.mock('../hooks/useViewPanel', () => ({
+	useViewPanel: (): unknown => ({ openViewWithQuery: mockOpenViewWithQuery }),
+}));
+// Variable-substitution boundary (redux/store/react-query) — its own logic is out of scope here.
+jest.mock('../hooks/useResolvedDrilldownQuery', () => ({
+	useResolvedDrilldownQuery: (): unknown => mockResolved,
+}));
+jest.mock('../hooks/useDrilldownBreakout', () => ({
+	useDrilldownBreakout: (): unknown => ({
+		queryData: { queryName: 'A' },
+		onBreakout: jest.fn(),
+	}),
+}));
+jest.mock('../DrilldownMenu/DrilldownBreakoutMenu', () => ({
+	__esModule: true,
+	default: (): JSX.Element => <div data-testid="breakout-submenu" />,
+}));
+jest.mock('../hooks/useDrilldownDashboardVariables', () => ({
+	useDrilldownDashboardVariables: (): unknown => mockDashboardVariables,
+}));
+jest.mock('../DrilldownMenu/DrilldownDashboardVariablesMenu', () => ({
+	__esModule: true,
+	default: (): JSX.Element => <div data-testid="dashboard-variables-submenu" />,
+}));
+// Context-link variable map (redux global time + store) — out of scope for this suite.
+jest.mock('../hooks/useDrilldownContextVariables', () => ({
+	useDrilldownContextVariables: (): unknown => ({}),
+}));
+jest.mock('container/QueryTable/Drilldown/useBaseDrilldownNavigate', () => ({
+	__esModule: true,
+	default: (): unknown => mockNavigate,
+}));
+jest.mock('container/QueryTable/Drilldown/contextConfig', () => ({
+	getGroupContextMenuConfig: ({
+		onColumnClick,
+	}: {
+		onColumnClick: (op: string) => void;
+	}): unknown => ({
+		items: (
+			<button
+				type="button"
+				data-testid="filter-op"
+				onClick={(): void => onColumnClick('=')}
+			>
+				Is this
+			</button>
+		),
+	}),
+}));
+jest.mock('container/QueryTable/Drilldown/drilldownUtils', () => ({
+	addFilterToQuery: jest.fn(() => 'REFINED_QUERY'),
+	getAggregateColumnHeader: (): unknown => ({
+		aggregations: 'sum(x)',
+		dataSource: 'metrics',
+	}),
+	getBaseMeta: (): unknown => undefined,
+	isNumberDataType: (): boolean => false,
+}));
+jest.mock(
+	'pages/DashboardPageV2/DashboardContainer/queryV5/persesQueryAdapters',
+	() => ({
+		fromPerses: (): string => 'V1_QUERY',
+		toPerses: jest.fn(() => [{ kind: 'REFINED' }]),
+	}),
+);
+jest.mock(
+	'pages/DashboardPageV2/DashboardContainer/Panels/utils/getBuilderQueries',
+	() => ({
+		getBuilderQueries: (...args: unknown[]): unknown =>
+			mockGetBuilderQueries(...args),
+	}),
+);
+// Capability lookup mocked (its per-kind values are data in the definitions); avoids
+// importing the whole renderer registry into the test.
+jest.mock('pages/DashboardPageV2/DashboardContainer/Panels/registry', () => ({
+	getPanelDefinition: (kind: string): unknown => ({
+		actions: { drilldown: kind !== 'signoz/ListPanel' },
+	}),
+}));
+
+function panelOfKind(kind: string): DashboardtypesPanelDTO {
+	return {
+		spec: { plugin: { kind, spec: {} }, queries: [{ x: 1 }] },
+		display: { name: 'P' },
+	} as unknown as DashboardtypesPanelDTO;
+}
+
+const tsPanel = panelOfKind('signoz/TimeSeriesPanel');
+
+const aggregateContext: DrilldownContext = {
+	queryName: 'A',
+	signal: TelemetrytypesSignalDTO.metrics,
+	filters: [],
+	label: 'frontend',
+	seriesColor: '#fff',
+};
+
+const groupContext: DrilldownContext = {
+	queryName: 'A',
+	signal: TelemetrytypesSignalDTO.metrics,
+	filters: [],
+	columnKind: 'group',
+	clickedKey: 'service.name',
+	clickedValue: 'frontend',
+};
+
+describe('useDrilldown', () => {
+	beforeEach(() => {
+		jest.clearAllMocks();
+		mockGetBuilderQueries.mockReturnValue([{ name: 'A' }]);
+		mockResolved = { resolvedQuery: 'RESOLVED_QUERY', isResolving: false };
+		mockDashboardVariables = {
+			hasFieldVariables: true,
+			actions: [],
+		};
+	});
+
+	describe('enableDrillDown', () => {
+		it('is true when the kind declares drilldown and has a builder query', () => {
+			const { result } = renderHook(() => useDrilldown(tsPanel, 'p1'));
+			expect(result.current.enableDrillDown).toBe(true);
+		});
+
+		it('is false when there is no builder query', () => {
+			mockGetBuilderQueries.mockReturnValue([]);
+			const { result } = renderHook(() => useDrilldown(tsPanel, 'p1'));
+			expect(result.current.enableDrillDown).toBe(false);
+		});
+
+		it('is false for a kind that opts out of drilldown', () => {
+			const { result } = renderHook(() =>
+				useDrilldown(panelOfKind('signoz/ListPanel'), 'p1'),
+			);
+			expect(result.current.enableDrillDown).toBe(false);
+		});
+	});
+
+	describe('aggregate menu', () => {
+		it('shows View in Logs/Traces + Breakout on an aggregate click', () => {
+			const { result } = renderHook(() => useDrilldown(tsPanel, 'p1'));
+			act(() =>
+				result.current.onPanelClick({
+					coordinates: { x: 1, y: 1 },
+					context: aggregateContext,
+				}),
+			);
+			render(<div>{result.current.contextMenuProps.items}</div>);
+
+			expect(screen.getByTestId('drilldown-view-logs')).toBeInTheDocument();
+			expect(screen.getByTestId('drilldown-view-traces')).toBeInTheDocument();
+			expect(screen.getByTestId('drilldown-breakout')).toBeInTheDocument();
+		});
+
+		it('navigates to logs when View in Logs is clicked', async () => {
+			const user = userEvent.setup();
+			const { result } = renderHook(() => useDrilldown(tsPanel, 'p1'));
+			act(() =>
+				result.current.onPanelClick({
+					coordinates: { x: 1, y: 1 },
+					context: aggregateContext,
+				}),
+			);
+			render(<div>{result.current.contextMenuProps.items}</div>);
+
+			await user.click(screen.getByTestId('drilldown-view-logs'));
+			expect(mockNavigate).toHaveBeenCalledWith('view_logs');
+		});
+
+		it('disables navigation while dashboard variables resolve', async () => {
+			mockResolved = { resolvedQuery: 'RESOLVED_QUERY', isResolving: true };
+			const user = userEvent.setup();
+			const { result } = renderHook(() => useDrilldown(tsPanel, 'p1'));
+			act(() =>
+				result.current.onPanelClick({
+					coordinates: { x: 1, y: 1 },
+					context: aggregateContext,
+				}),
+			);
+			render(<div>{result.current.contextMenuProps.items}</div>);
+
+			await user.click(screen.getByTestId('drilldown-view-logs'));
+			expect(mockNavigate).not.toHaveBeenCalled();
+		});
+
+		it('swaps to the breakout submenu when "Breakout by .." is clicked', async () => {
+			const user = userEvent.setup();
+			const { result } = renderHook(() => useDrilldown(tsPanel, 'p1'));
+			act(() =>
+				result.current.onPanelClick({
+					coordinates: { x: 1, y: 1 },
+					context: aggregateContext,
+				}),
+			);
+			const view = render(<div>{result.current.contextMenuProps.items}</div>);
+
+			await user.click(screen.getByTestId('drilldown-breakout'));
+			view.rerender(<div>{result.current.contextMenuProps.items}</div>);
+
+			expect(screen.getByTestId('breakout-submenu')).toBeInTheDocument();
+		});
+
+		it('shows the Dashboard Variables entry when the click has group-by fields', () => {
+			const { result } = renderHook(() => useDrilldown(tsPanel, 'p1'));
+			act(() =>
+				result.current.onPanelClick({
+					coordinates: { x: 1, y: 1 },
+					context: aggregateContext,
+				}),
+			);
+			render(<div>{result.current.contextMenuProps.items}</div>);
+
+			expect(
+				screen.getByTestId('drilldown-dashboard-variables'),
+			).toBeInTheDocument();
+		});
+
+		it('hides the Dashboard Variables entry when there are no group-by fields', () => {
+			mockDashboardVariables = { hasFieldVariables: false, actions: [] };
+			const { result } = renderHook(() => useDrilldown(tsPanel, 'p1'));
+			act(() =>
+				result.current.onPanelClick({
+					coordinates: { x: 1, y: 1 },
+					context: aggregateContext,
+				}),
+			);
+			render(<div>{result.current.contextMenuProps.items}</div>);
+
+			expect(
+				screen.queryByTestId('drilldown-dashboard-variables'),
+			).not.toBeInTheDocument();
+		});
+
+		it('swaps to the Dashboard Variables submenu when clicked', async () => {
+			const user = userEvent.setup();
+			const { result } = renderHook(() => useDrilldown(tsPanel, 'p1'));
+			act(() =>
+				result.current.onPanelClick({
+					coordinates: { x: 1, y: 1 },
+					context: aggregateContext,
+				}),
+			);
+			const view = render(<div>{result.current.contextMenuProps.items}</div>);
+
+			await user.click(screen.getByTestId('drilldown-dashboard-variables'));
+			view.rerender(<div>{result.current.contextMenuProps.items}</div>);
+
+			expect(
+				screen.getByTestId('dashboard-variables-submenu'),
+			).toBeInTheDocument();
+		});
+	});
+
+	describe('filter-by-value', () => {
+		it('opens the View modal with the refined query on a group-column filter', async () => {
+			const user = userEvent.setup();
+			const { result } = renderHook(() => useDrilldown(tsPanel, 'p1'));
+			act(() =>
+				result.current.onPanelClick({
+					coordinates: { x: 1, y: 1 },
+					context: groupContext,
+				}),
+			);
+			render(<div>{result.current.contextMenuProps.items}</div>);
+
+			await user.click(screen.getByTestId('filter-op'));
+			// Opens the View modal on the refined query at the panel's kind — persisted in the URL.
+			expect(mockOpenViewWithQuery).toHaveBeenCalledWith(
+				'p1',
+				'REFINED_QUERY',
+				PANEL_TYPES.TIME_SERIES,
+			);
+		});
+	});
+});

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/__tests__/useDrilldownDashboardVariables.test.tsx

@@ -0,0 +1,213 @@
+import { render, renderHook, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { TelemetrytypesSignalDTO } from 'api/generated/services/sigNoz.schemas';
+import type { FilterData } from 'container/QueryTable/Drilldown/drilldownUtils';
+
+import DrilldownDashboardVariablesMenu from '../DrilldownMenu/DrilldownDashboardVariablesMenu';
+import { useDrilldownDashboardVariables } from '../hooks/useDrilldownDashboardVariables';
+
+// Fake dashboard variables + runtime selection, mutated per test. `dtoToFormModel` is mocked to
+// derive `type` from the plugin kind (like the real adapter), so these DTOs carry the plugin
+// discriminant plus the flat form-model fields the hook reads.
+let mockVariables: Array<{
+	name: string;
+	dynamicAttribute?: string;
+	multiSelect?: boolean;
+	spec: { plugin: { kind: string } };
+}> = [];
+let mockSelectionMap: Record<string, { value: unknown; allSelected: boolean }> =
+	{};
+
+const mockSetVariableValue = jest.fn();
+const mockSetUrlValues = jest.fn();
+const mockPatchAsync = jest.fn().mockResolvedValue(undefined);
+
+const DYNAMIC_KIND = 'signoz/DynamicVariable';
+const QUERY_KIND = 'signoz/QueryVariable';
+
+jest.mock('api/generated/services/dashboard', () => ({
+	useGetDashboardV2: (): unknown => ({
+		data: { data: { spec: { variables: mockVariables } } },
+	}),
+}));
+jest.mock(
+	'pages/DashboardPageV2/DashboardContainer/hooks/useOptimisticPatch',
+	() => ({
+		useOptimisticPatch: (): unknown => ({ patchAsync: mockPatchAsync }),
+	}),
+);
+jest.mock(
+	'pages/DashboardPageV2/DashboardContainer/store/useDashboardStore',
+	() => ({
+		useDashboardStore: (selector: (state: unknown) => unknown): unknown =>
+			selector({
+				dashboardId: 'd1',
+				variableValues: { d1: mockSelectionMap },
+				setVariableValue: mockSetVariableValue,
+			}),
+	}),
+);
+jest.mock(
+	'pages/DashboardPageV2/DashboardContainer/DashboardSettings/Variables/variableAdapters',
+	() => ({
+		dtoToFormModel: (dto: {
+			spec?: { plugin?: { kind?: string } };
+		}): unknown => ({
+			...dto,
+			type:
+				dto.spec?.plugin?.kind === 'signoz/DynamicVariable' ? 'DYNAMIC' : 'QUERY',
+		}),
+		formModelToDto: (model: { name: string }): unknown => ({ dto: model.name }),
+	}),
+);
+jest.mock(
+	'pages/DashboardPageV2/DashboardContainer/DashboardSettings/Variables/variableFormModel',
+	() => ({
+		emptyVariableFormModel: (): unknown => ({}),
+		DYNAMIC_SIGNAL_ALL: 'all',
+	}),
+);
+jest.mock(
+	'pages/DashboardPageV2/DashboardContainer/VariablesBar/useVariableSelection',
+	() => ({
+		ALL_SELECTED: '__ALL__',
+		variablesUrlParser: { withOptions: (): unknown => ({}) },
+	}),
+);
+jest.mock('nuqs', () => ({
+	useQueryState: (): unknown => [null, mockSetUrlValues],
+}));
+jest.mock('components/OverlayScrollbar/OverlayScrollbar', () => ({
+	__esModule: true,
+	default: ({ children }: { children: React.ReactNode }): JSX.Element => (
+		<div>{children}</div>
+	),
+}));
+jest.mock('@signozhq/ui/sonner', () => ({
+	toast: { success: jest.fn(), error: jest.fn() },
+}));
+
+const filters: FilterData[] = [
+	{ filterKey: 'service.name', filterValue: 'frontend', operator: '=' },
+];
+
+function renderItems(): void {
+	const { result } = renderHook(() =>
+		useDrilldownDashboardVariables({
+			filters,
+			signal: TelemetrytypesSignalDTO.metrics,
+			onClose: jest.fn(),
+		}),
+	);
+	render(
+		<DrilldownDashboardVariablesMenu
+			actions={result.current.actions}
+			onBack={jest.fn()}
+		/>,
+	);
+}
+
+describe('useDrilldownDashboardVariables', () => {
+	beforeEach(() => {
+		jest.clearAllMocks();
+		mockVariables = [];
+		mockSelectionMap = {};
+	});
+
+	it('hasFieldVariables reflects the clicked point group-by fields', () => {
+		const withFields = renderHook(() =>
+			useDrilldownDashboardVariables({ filters, onClose: jest.fn() }),
+		);
+		expect(withFields.result.current.hasFieldVariables).toBe(true);
+
+		const noFields = renderHook(() =>
+			useDrilldownDashboardVariables({ filters: [], onClose: jest.fn() }),
+		);
+		expect(noFields.result.current.hasFieldVariables).toBe(false);
+	});
+
+	it('offers Set — writing an array for a multi-select var so the selector shows it', async () => {
+		mockVariables = [
+			{
+				name: 'svc',
+				dynamicAttribute: 'service.name',
+				multiSelect: true,
+				spec: { plugin: { kind: DYNAMIC_KIND } },
+			},
+		];
+		mockSelectionMap = { svc: { value: ['backend'], allSelected: false } };
+		renderItems();
+
+		await userEvent.click(screen.getByTestId('drilldown-var-set'));
+		expect(mockSetVariableValue).toHaveBeenCalledWith('d1', 'svc', {
+			value: ['frontend'],
+			allSelected: false,
+		});
+	});
+
+	it('offers Set — writing a scalar for a single-select var', async () => {
+		mockVariables = [
+			{
+				name: 'svc',
+				dynamicAttribute: 'service.name',
+				multiSelect: false,
+				spec: { plugin: { kind: DYNAMIC_KIND } },
+			},
+		];
+		mockSelectionMap = { svc: { value: 'backend', allSelected: false } };
+		renderItems();
+
+		await userEvent.click(screen.getByTestId('drilldown-var-set'));
+		expect(mockSetVariableValue).toHaveBeenCalledWith('d1', 'svc', {
+			value: 'frontend',
+			allSelected: false,
+		});
+	});
+
+	it('offers Unset when the matching dynamic var already holds the clicked value', async () => {
+		mockVariables = [
+			{
+				name: 'svc',
+				dynamicAttribute: 'service.name',
+				multiSelect: true,
+				spec: { plugin: { kind: DYNAMIC_KIND } },
+			},
+		];
+		mockSelectionMap = { svc: { value: ['frontend'], allSelected: false } };
+		renderItems();
+
+		await userEvent.click(screen.getByTestId('drilldown-var-unset'));
+		expect(mockSetVariableValue).toHaveBeenCalledWith('d1', 'svc', {
+			value: [],
+			allSelected: false,
+		});
+	});
+
+	it('offers Create and persists a new dynamic variable when none matches', async () => {
+		mockVariables = [];
+		renderItems();
+
+		await userEvent.click(screen.getByTestId('drilldown-var-create'));
+		// Persisted to the spec via the optimistic patch...
+		expect(mockPatchAsync).toHaveBeenCalledTimes(1);
+		// ...and seeded (as an array — the created var is multi-select) with the clicked value.
+		expect(mockSetVariableValue).toHaveBeenCalledWith('d1', 'service.name', {
+			value: ['frontend'],
+			allSelected: false,
+		});
+	});
+
+	it('ignores a non-dynamic variable with the same attribute (still offers Create)', () => {
+		mockVariables = [
+			{
+				name: 'svc',
+				dynamicAttribute: 'service.name',
+				spec: { plugin: { kind: QUERY_KIND } },
+			},
+		];
+		renderItems();
+
+		expect(screen.getByTestId('drilldown-var-create')).toBeInTheDocument();
+		expect(screen.queryByTestId('drilldown-var-set')).not.toBeInTheDocument();
+	});
+});

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/hooks/useDrilldown.tsx

@@ -0,0 +1,243 @@
+import { useCallback, useMemo, useState } from 'react';
+import type { ReactNode } from 'react';
+import type { DashboardtypesPanelDTO } from 'api/generated/services/sigNoz.schemas';
+import type { FilterData } from 'container/QueryTable/Drilldown/drilldownUtils';
+import useBaseDrilldownNavigate from 'container/QueryTable/Drilldown/useBaseDrilldownNavigate';
+import type {
+	Coordinates,
+	PopoverPosition,
+} from 'periscope/components/ContextMenu';
+import type {
+	DrilldownClickPayload,
+	DrilldownContext,
+} from 'pages/DashboardPageV2/DashboardContainer/Panels/types/drilldown';
+import { PANEL_KIND_TO_PANEL_TYPE } from 'pages/DashboardPageV2/DashboardContainer/Panels/types/panelKind';
+import { getPanelDefinition } from 'pages/DashboardPageV2/DashboardContainer/Panels/registry';
+import { buildAggregateData } from 'pages/DashboardPageV2/DashboardContainer/Panels/utils/drilldown/buildAggregateData';
+import { getBuilderQueries } from 'pages/DashboardPageV2/DashboardContainer/Panels/utils/getBuilderQueries';
+import { fromPerses } from 'pages/DashboardPageV2/DashboardContainer/queryV5/persesQueryAdapters';
+
+import DrilldownAggregateMenu from '../DrilldownMenu/DrilldownAggregateMenu';
+import DrilldownBreakoutMenu from '../DrilldownMenu/DrilldownBreakoutMenu';
+import DrilldownDashboardVariablesMenu from '../DrilldownMenu/DrilldownDashboardVariablesMenu';
+import DrilldownFilterMenu from '../DrilldownMenu/DrilldownFilterMenu';
+import { useDrilldownBreakout } from './useDrilldownBreakout';
+import { useDrilldownCoordinates } from './useDrilldownCoordinates';
+import { useDrilldownDashboardVariables } from './useDrilldownDashboardVariables';
+import { useDrilldownFilter } from './useDrilldownFilter';
+import { useResolvedDrilldownQuery } from './useResolvedDrilldownQuery';
+import { useViewPanel } from './useViewPanel';
+
+/** Which menu the popover shows; extend as submenus are added (e.g. dashboard variables). */
+enum DrilldownSubMenu {
+	Base = 'base',
+	Breakout = 'breakout',
+	DashboardVariables = 'dashboardVariables',
+}
+
+/** Stable empty-filters ref so the dashboard-variables hook doesn't re-run on every no-click render. */
+const EMPTY_FILTERS: FilterData[] = [];
+
+/** Props the panel shell spreads onto `<ContextMenu>`. */
+export interface DrilldownContextMenuProps {
+	coordinates: Coordinates | null;
+	popoverPosition: PopoverPosition | null;
+	items: ReactNode;
+	onClose: () => void;
+}
+
+export interface UseDrilldownResult {
+	/** Whether interactive renderers should arm the drill-down click. */
+	enableDrillDown: boolean;
+	/** Renderer `onClick` handler — opens the menu at the clicked point. */
+	onPanelClick: (payload: DrilldownClickPayload) => void;
+	contextMenuProps: DrilldownContextMenuProps;
+}
+
+/**
+ * Orchestrates panel drill-down: owns the popover + which submenu is open, and routes the clicked
+ * point to the base aggregate menu (View in Logs/Traces), the group filter menu, or the breakout picker.
+ */
+export function useDrilldown(
+	panel: DashboardtypesPanelDTO,
+	panelId: string,
+): UseDrilldownResult {
+	const kind = panel.spec.plugin.kind;
+	const panelType = PANEL_KIND_TO_PANEL_TYPE[kind];
+	const queries = panel.spec.queries;
+
+	// Kind must opt in via its capability AND have a builder query to drill into.
+	const enableDrillDown = useMemo(
+		() =>
+			getPanelDefinition(kind).actions.drilldown &&
+			getBuilderQueries(queries).length > 0,
+		[kind, queries],
+	);
+
+	const v1Query = useMemo(
+		() => fromPerses(queries, panelType),
+		[queries, panelType],
+	);
+
+	const {
+		coordinates,
+		popoverPosition,
+		clickedData: context,
+		onClick,
+		onClose,
+	} = useDrilldownCoordinates<DrilldownContext>();
+
+	const aggregateData = useMemo(
+		() => (context ? buildAggregateData(context) : null),
+		[context],
+	);
+
+	// A fresh click and any close reset to the base menu.
+	const [subMenu, setSubMenu] = useState<DrilldownSubMenu>(
+		DrilldownSubMenu.Base,
+	);
+	const openBreakout = useCallback(
+		(): void => setSubMenu(DrilldownSubMenu.Breakout),
+		[],
+	);
+	const backToBase = useCallback(
+		(): void => setSubMenu(DrilldownSubMenu.Base),
+		[],
+	);
+	const openDashboardVariables = useCallback(
+		(): void => setSubMenu(DrilldownSubMenu.DashboardVariables),
+		[],
+	);
+
+	const onPanelClick = useCallback(
+		(payload: DrilldownClickPayload): void => {
+			setSubMenu(DrilldownSubMenu.Base);
+			onClick(payload.coordinates, payload.context);
+		},
+		[onClick],
+	);
+
+	const handleClose = useCallback((): void => {
+		setSubMenu(DrilldownSubMenu.Base);
+		onClose();
+	}, [onClose]);
+
+	const { openViewWithQuery } = useViewPanel();
+
+	const breakout = useDrilldownBreakout({
+		panelId,
+		v1Query,
+		panelType,
+		aggregateData,
+		openViewWithQuery,
+		onClose: handleClose,
+	});
+
+	const filter = useDrilldownFilter({
+		context,
+		v1Query,
+		panelId,
+		panelType,
+		openViewWithQuery,
+		onClose: handleClose,
+	});
+
+	const dashboardVariables = useDrilldownDashboardVariables({
+		filters: context?.filters ?? EMPTY_FILTERS,
+		signal: context?.signal,
+		onClose: handleClose,
+	});
+
+	// The aggregate menu (View in Logs/Traces) shows for a non-group click on the base menu; the
+	// group click routes to filter-by-value instead. Only that menu resolves variables —
+	// filter/breakout open the View modal, which resolves at query-run time.
+	const showAggregateMenu =
+		subMenu === DrilldownSubMenu.Base && !!context && !filter.isGroupColumnClick;
+
+	const { resolvedQuery, isResolving } = useResolvedDrilldownQuery({
+		queries,
+		panelType,
+		v1Query,
+		enabled: showAggregateMenu,
+	});
+
+	const navigate = useBaseDrilldownNavigate({
+		resolvedQuery,
+		aggregateData,
+		callback: handleClose,
+	});
+
+	const items = useMemo<ReactNode>(() => {
+		if (subMenu === DrilldownSubMenu.Breakout) {
+			return breakout.queryData ? (
+				<DrilldownBreakoutMenu
+					queryData={breakout.queryData}
+					onBreakout={breakout.onBreakout}
+					onBack={backToBase}
+				/>
+			) : null;
+		}
+		if (subMenu === DrilldownSubMenu.DashboardVariables) {
+			return (
+				<DrilldownDashboardVariablesMenu
+					actions={dashboardVariables.actions}
+					onBack={backToBase}
+				/>
+			);
+		}
+		if (filter.isGroupColumnClick && context?.clickedKey) {
+			return (
+				<DrilldownFilterMenu
+					v1Query={v1Query}
+					clickedKey={context.clickedKey}
+					onFilter={filter.onFilter}
+				/>
+			);
+		}
+		if (!context) {
+			return null;
+		}
+		return (
+			<DrilldownAggregateMenu
+				context={context}
+				query={v1Query}
+				isResolving={isResolving}
+				links={panel.spec.links}
+				canSetDashboardVariables={dashboardVariables.hasFieldVariables}
+				onViewLogs={(): void => navigate('view_logs')}
+				onViewTraces={(): void => navigate('view_traces')}
+				onBreakout={openBreakout}
+				onSetDashboardVariables={openDashboardVariables}
+				onClose={handleClose}
+			/>
+		);
+	}, [
+		subMenu,
+		breakout.queryData,
+		breakout.onBreakout,
+		dashboardVariables.actions,
+		dashboardVariables.hasFieldVariables,
+		filter.isGroupColumnClick,
+		filter.onFilter,
+		context,
+		v1Query,
+		isResolving,
+		panel.spec.links,
+		navigate,
+		openBreakout,
+		openDashboardVariables,
+		backToBase,
+		handleClose,
+	]);
+
+	return {
+		enableDrillDown,
+		onPanelClick,
+		contextMenuProps: {
+			coordinates,
+			popoverPosition,
+			items,
+			onClose: handleClose,
+		},
+	};
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/hooks/useDrilldownBreakout.tsx

@@ -0,0 +1,76 @@
+import { useCallback, useMemo } from 'react';
+import type { PANEL_TYPES } from 'constants/queryBuilder';
+import { getQueryData } from 'container/QueryTable/Drilldown/drilldownUtils';
+import {
+	getBreakoutPanelType,
+	getBreakoutQuery,
+} from 'container/QueryTable/Drilldown/tableDrilldownUtils';
+import type { BreakoutAttributeType } from 'container/QueryTable/Drilldown/types';
+import type { AggregateData } from 'container/QueryTable/Drilldown/useAggregateDrilldown';
+import type {
+	IBuilderQuery,
+	Query,
+} from 'types/api/queryBuilder/queryBuilderData';
+
+interface UseDrilldownBreakoutArgs {
+	panelId: string;
+	/** The panel's V5→V1 query; the breakout regroups the clicked query within it. */
+	v1Query: Query;
+	/** The panel's current V1 panel type — drives the breakout target type. */
+	panelType: PANEL_TYPES;
+	aggregateData: AggregateData | null;
+	/** Opens the View modal on the breakout query (at the breakout's target kind), persisting it in the URL. */
+	openViewWithQuery: (
+		panelId: string,
+		query: Query,
+		panelType: PANEL_TYPES,
+	) => void;
+	/** Close the popover after navigating to the View modal. */
+	onClose: () => void;
+}
+
+export interface UseDrilldownBreakoutApi {
+	/** The clicked query's builder data for the attribute picker; `undefined` when there's no aggregate to break out. */
+	queryData: IBuilderQuery | undefined;
+	/** Regroup the clicked query by the picked attribute and open the result in the View modal. */
+	onBreakout: (groupBy: BreakoutAttributeType) => void;
+}
+
+/**
+ * The "Breakout by .." submenu logic: regroup the clicked query by a picked attribute and open the
+ * result in the View modal. Reuses V1's read-only `getBreakoutQuery`/`getBreakoutPanelType`; the
+ * caller renders `DrilldownBreakoutMenu` (V1's `BreakoutOptions` picker) from this hook's return.
+ */
+export function useDrilldownBreakout({
+	panelId,
+	v1Query,
+	panelType,
+	aggregateData,
+	openViewWithQuery,
+	onClose,
+}: UseDrilldownBreakoutArgs): UseDrilldownBreakoutApi {
+	const onBreakout = useCallback(
+		(groupBy: BreakoutAttributeType): void => {
+			if (!aggregateData) {
+				return;
+			}
+			const breakoutQuery = getBreakoutQuery(
+				v1Query,
+				aggregateData,
+				groupBy,
+				aggregateData.filters ?? [],
+			);
+			openViewWithQuery(panelId, breakoutQuery, getBreakoutPanelType(panelType));
+			onClose();
+		},
+		[aggregateData, v1Query, panelType, panelId, openViewWithQuery, onClose],
+	);
+
+	const queryData = useMemo(
+		() =>
+			aggregateData ? getQueryData(v1Query, aggregateData.queryName) : undefined,
+		[aggregateData, v1Query],
+	);
+
+	return { queryData, onBreakout };
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/hooks/useDrilldownContextVariables.ts

@@ -0,0 +1,58 @@
+import { useMemo } from 'react';
+// eslint-disable-next-line no-restricted-imports -- context links resolve global-time variables off redux (V1 parity)
+import { useSelector } from 'react-redux';
+import type { DrilldownContext } from 'pages/DashboardPageV2/DashboardContainer/Panels/types/drilldown';
+import { useDashboardStore } from 'pages/DashboardPageV2/DashboardContainer/store/useDashboardStore';
+import type { AppState } from 'store/reducers';
+import type { GlobalReducer } from 'types/reducer/globalTime';
+
+/**
+ * Builds the variable map that resolves context-link templates, mirroring V1's `useContextVariables`
+ * but sourced from V2 state: dashboard variable selections (by name), the global time window
+ * (`timestamp_start`/`timestamp_end`, ms), and the clicked point's field values (`_`-prefixed, the
+ * V1 convention that keeps them from clashing with dashboard variable names).
+ */
+export function useDrilldownContextVariables(
+	context: DrilldownContext | null,
+): Record<string, string> {
+	// dashboardId from the store's edit context (set once by DashboardContainer), the same
+	// source the rest of V2 uses — not react-router params.
+	const dashboardId = useDashboardStore((state) => state.dashboardId);
+	// Select the stable top-level map (not `state.variableValues[id] ?? {}`, whose fresh `{}` each
+	// render makes useSyncExternalStore loop); index by dashboard inside the memo.
+	const variableValuesByDashboard = useDashboardStore(
+		(state) => state.variableValues,
+	);
+	const globalTime = useSelector<AppState, GlobalReducer>(
+		(state) => state.globalTime,
+	);
+
+	return useMemo(() => {
+		const result: Record<string, string> = {};
+
+		const variableValues = variableValuesByDashboard[dashboardId] ?? {};
+		Object.entries(variableValues).forEach(([name, selection]) => {
+			const { value } = selection;
+			if (value == null) {
+				return;
+			}
+			result[name] = Array.isArray(value) ? value.join(', ') : String(value);
+		});
+
+		// Global time window, ns → ms (V1 parity).
+		result.timestamp_start = String(Math.floor(globalTime.minTime / 1e6));
+		result.timestamp_end = String(Math.floor(globalTime.maxTime / 1e6));
+
+		context?.filters.forEach(({ filterKey, filterValue }) => {
+			result[`_${filterKey}`] = String(filterValue);
+		});
+
+		return result;
+	}, [
+		variableValuesByDashboard,
+		dashboardId,
+		globalTime.minTime,
+		globalTime.maxTime,
+		context,
+	]);
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/hooks/useDrilldownCoordinates.ts

@@ -0,0 +1,44 @@
+import { useCallback, useState } from 'react';
+import type {
+	Coordinates,
+	PopoverPosition,
+} from 'periscope/components/ContextMenu';
+
+import { calculatePopoverPosition } from '../utils/calculatePopoverPosition';
+
+/**
+ * Popover state for the drill-down context menu. V2's strongly-typed counterpart to V1's
+ * `useCoordinates` (whose `clickedData` is `any`): the caller pins `TData` to the click payload,
+ * so it flows through without a cast. `null` fields mean the menu is closed.
+ */
+export interface UseDrilldownCoordinatesResult<TData> {
+	coordinates: Coordinates | null;
+	popoverPosition: PopoverPosition | null;
+	clickedData: TData | null;
+	onClick: (coordinates: Coordinates, data: TData) => void;
+	onClose: () => void;
+}
+
+export function useDrilldownCoordinates<
+	TData,
+>(): UseDrilldownCoordinatesResult<TData> {
+	const [coordinates, setCoordinates] = useState<Coordinates | null>(null);
+	const [popoverPosition, setPopoverPosition] = useState<PopoverPosition | null>(
+		null,
+	);
+	const [clickedData, setClickedData] = useState<TData | null>(null);
+
+	const onClick = useCallback((coords: Coordinates, data: TData): void => {
+		setClickedData(data);
+		setCoordinates(coords);
+		setPopoverPosition(calculatePopoverPosition(coords));
+	}, []);
+
+	const onClose = useCallback((): void => {
+		setCoordinates(null);
+		setPopoverPosition(null);
+		setClickedData(null);
+	}, []);
+
+	return { coordinates, popoverPosition, clickedData, onClick, onClose };
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/hooks/useDrilldownDashboardVariables.tsx

@@ -0,0 +1,191 @@
+import { useCallback, useMemo } from 'react';
+import { toast } from '@signozhq/ui/sonner';
+import type { TelemetrytypesSignalDTO } from 'api/generated/services/sigNoz.schemas';
+import type { FilterData } from 'container/QueryTable/Drilldown/drilldownUtils';
+import { useQueryState } from 'nuqs';
+import {
+	dtoToFormModel,
+	formModelToDto,
+} from 'pages/DashboardPageV2/DashboardContainer/DashboardSettings/Variables/variableAdapters';
+import {
+	DYNAMIC_SIGNAL_ALL,
+	emptyVariableFormModel,
+	type VariableFormModel,
+} from 'pages/DashboardPageV2/DashboardContainer/DashboardSettings/Variables/variableFormModel';
+import { buildVariablesPatch } from 'pages/DashboardPageV2/DashboardContainer/DashboardSettings/Variables/variablePatchOps';
+import { useDashboardFetchRequired } from 'pages/DashboardPageV2/DashboardContainer/hooks/useDashboardFetchRequired';
+import { useOptimisticPatch } from 'pages/DashboardPageV2/DashboardContainer/hooks/useOptimisticPatch';
+import { selectVariableValues } from 'pages/DashboardPageV2/DashboardContainer/store/slices/variableSelectionSlice';
+import { useDashboardStore } from 'pages/DashboardPageV2/DashboardContainer/store/useDashboardStore';
+import type { VariableSelection } from 'pages/DashboardPageV2/DashboardContainer/VariablesBar/selectionTypes';
+import {
+	ALL_SELECTED,
+	variablesUrlParser,
+} from 'pages/DashboardPageV2/DashboardContainer/VariablesBar/useVariableSelection';
+
+interface UseDrilldownDashboardVariablesArgs {
+	/** Group-by field filters from the clicked point (empty when the click has no group-by). */
+	filters: FilterData[];
+	/** Clicked query's telemetry signal — seeds a created variable's `dynamicSignal`. */
+	signal?: TelemetrytypesSignalDTO;
+	/** Close the popover after an action. */
+	onClose: () => void;
+}
+
+/** Set/Unset a matching dynamic variable's value, or Create one when none matches. */
+export enum DrilldownVariableActionKind {
+	Set = 'set',
+	Unset = 'unset',
+	Create = 'create',
+}
+
+/** A resolved "Dashboard Variables" menu entry; the caller renders it. */
+export interface DrilldownVariableAction {
+	fieldName: string;
+	fieldValue: string | number;
+	kind: DrilldownVariableActionKind;
+	/** Applies the action and closes the popover. */
+	onClick: () => void;
+}
+
+export interface UseDrilldownDashboardVariablesApi {
+	/** Whether the clicked point exposes any field to bind to a variable (gates the base-menu entry). */
+	hasFieldVariables: boolean;
+	/** Resolved menu entries, one per group-by field on the clicked point. */
+	actions: DrilldownVariableAction[];
+}
+
+/**
+ * "Dashboard Variables" submenu logic (V1 `useDashboardVarConfig` parity). Set/Unset are runtime-only
+ * (store + URL — V2 selections don't persist); Create is the one path that patches `spec.variables`.
+ */
+export function useDrilldownDashboardVariables({
+	filters,
+	signal,
+	onClose,
+}: UseDrilldownDashboardVariablesArgs): UseDrilldownDashboardVariablesApi {
+	const dashboardId = useDashboardStore((state) => state.dashboardId);
+	const { variables } = useDashboardFetchRequired();
+
+	const dynamicVariables = useMemo(
+		() => variables.map(dtoToFormModel).filter((v) => v.type === 'DYNAMIC'),
+		[variables],
+	);
+	const existingNames = useMemo(
+		() => new Set(variables.map((v) => dtoToFormModel(v).name)),
+		[variables],
+	);
+
+	const selection = useDashboardStore(selectVariableValues(dashboardId));
+	const setVariableValue = useDashboardStore((state) => state.setVariableValue);
+	const [, setUrlValues] = useQueryState(
+		'variables',
+		variablesUrlParser.withOptions({ history: 'replace' }),
+	);
+	const { patchAsync } = useOptimisticPatch();
+
+	const fieldVariables = useMemo<[string, string | number][]>(
+		() =>
+			filters
+				.filter(
+					(f) => f.filterKey && f.filterValue !== undefined && f.filterValue !== '',
+				)
+				.map((f) => [f.filterKey, f.filterValue]),
+		[filters],
+	);
+
+	// Runtime-only write (store + URL), never the spec — mirrors VariablesBar's setSelection.
+	const setSelection = useCallback(
+		(name: string, next: VariableSelection): void => {
+			setVariableValue(dashboardId, name, next);
+			void setUrlValues((prev) => ({
+				...(prev ?? {}),
+				[name]: next.allSelected ? ALL_SELECTED : next.value,
+			}));
+		},
+		[dashboardId, setVariableValue, setUrlValues],
+	);
+
+	const handleCreate = useCallback(
+		async (fieldName: string, fieldValue: string | number): Promise<void> => {
+			if (existingNames.has(fieldName)) {
+				toast.error(`Variable "${fieldName}" already exists`);
+				return;
+			}
+			const model: VariableFormModel = {
+				...emptyVariableFormModel(),
+				name: fieldName,
+				description: `Created from panel drilldown (field: ${fieldName})`,
+				type: 'DYNAMIC',
+				multiSelect: true,
+				dynamicAttribute: fieldName,
+				dynamicSignal: signal ?? DYNAMIC_SIGNAL_ALL,
+			};
+			try {
+				await patchAsync(
+					buildVariablesPatch([...variables, formModelToDto(model)]),
+				);
+				// Multi-select var → seed the value as an array (the selector renders scalars as empty).
+				setSelection(fieldName, { value: [fieldValue], allSelected: false });
+				toast.success(`Created variable "${fieldName}"`);
+			} catch {
+				toast.error('Failed to create variable');
+			}
+			onClose();
+		},
+		[existingNames, signal, variables, patchAsync, setSelection, onClose],
+	);
+
+	const actions = useMemo<DrilldownVariableAction[]>(
+		() =>
+			fieldVariables.map(([fieldName, fieldValue]) => {
+				const existing = dynamicVariables.find(
+					(v) => v.dynamicAttribute === fieldName,
+				);
+				if (!existing) {
+					return {
+						fieldName,
+						fieldValue,
+						kind: DrilldownVariableActionKind.Create,
+						onClick: (): void => {
+							void handleCreate(fieldName, fieldValue);
+						},
+					};
+				}
+
+				const current = selection[existing.name]?.value;
+				const isSame = Array.isArray(current)
+					? current.length === 1 && current[0] === fieldValue
+					: current === fieldValue;
+
+				// Multi-select values must be arrays (a scalar renders as empty in the selector).
+				const cleared = existing.multiSelect ? [] : '';
+				const assigned = existing.multiSelect ? [fieldValue] : fieldValue;
+
+				return {
+					fieldName,
+					fieldValue,
+					kind: isSame
+						? DrilldownVariableActionKind.Unset
+						: DrilldownVariableActionKind.Set,
+					onClick: (): void => {
+						setSelection(existing.name, {
+							value: isSame ? cleared : assigned,
+							allSelected: false,
+						});
+						onClose();
+					},
+				};
+			}),
+		[
+			fieldVariables,
+			dynamicVariables,
+			selection,
+			setSelection,
+			handleCreate,
+			onClose,
+		],
+	);
+
+	return { hasFieldVariables: fieldVariables.length > 0, actions };
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/hooks/useDrilldownFilter.ts

@@ -0,0 +1,72 @@
+import { useCallback } from 'react';
+import { PANEL_TYPES } from 'constants/queryBuilder';
+import {
+	addFilterToQuery,
+	getBaseMeta,
+	isNumberDataType,
+} from 'container/QueryTable/Drilldown/drilldownUtils';
+import type { DrilldownContext } from 'pages/DashboardPageV2/DashboardContainer/Panels/types/drilldown';
+import type { Query } from 'types/api/queryBuilder/queryBuilderData';
+
+interface UseDrilldownFilterArgs {
+	/** The clicked point's context; the filter menu only appears for a group-column click. */
+	context: DrilldownContext | null;
+	/** The panel's V5→V1 query the filter is added to. */
+	v1Query: Query;
+	panelId: string;
+	/** Panel's V1 type — the kind the refined query opens the View modal as. */
+	panelType: PANEL_TYPES;
+	/** Opens the View modal on the refined query, persisting it in the URL. */
+	openViewWithQuery: (
+		panelId: string,
+		query: Query,
+		panelType: PANEL_TYPES,
+	) => void;
+	/** Close the popover after opening the View modal. */
+	onClose: () => void;
+}
+
+export interface UseDrilldownFilterApi {
+	/** True for a group-column click — the caller renders the filter-by-value menu. */
+	isGroupColumnClick: boolean;
+	/** Apply the chosen operator: add `key <op> value` and open the refined result in the View modal. */
+	onFilter: (operator: string) => void;
+}
+
+/**
+ * The group-column "filter by value" drill-down (V1 parity): adds `key <op> value` to the panel's
+ * query and opens the refined result in the View modal. The caller renders `DrilldownFilterMenu`
+ * (V1's read-only `getGroupContextMenuConfig`) from this hook's return.
+ */
+export function useDrilldownFilter({
+	context,
+	v1Query,
+	panelId,
+	panelType,
+	openViewWithQuery,
+	onClose,
+}: UseDrilldownFilterArgs): UseDrilldownFilterApi {
+	const onFilter = useCallback(
+		(operator: string): void => {
+			if (!context?.clickedKey) {
+				return;
+			}
+			let filterValue: string | number = context.clickedValue ?? '';
+			const baseMeta = getBaseMeta(v1Query, context.clickedKey);
+			if (baseMeta && isNumberDataType(baseMeta.dataType) && filterValue !== '') {
+				filterValue = Number(filterValue);
+			}
+			const refinedQuery = addFilterToQuery(v1Query, [
+				{ filterKey: context.clickedKey, filterValue, operator },
+			]);
+			openViewWithQuery(panelId, refinedQuery, panelType);
+			onClose();
+		},
+		[context, v1Query, panelType, panelId, openViewWithQuery, onClose],
+	);
+
+	const isGroupColumnClick =
+		!!context && context.columnKind === 'group' && !!context.clickedKey;
+
+	return { isGroupColumnClick, onFilter };
+}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/hooks/useResolvedDrilldownQuery.ts

@@ -0,0 +1,88 @@
+import { useEffect, useMemo } from 'react';
+// eslint-disable-next-line no-restricted-imports -- global time still lives in redux
+import { useSelector } from 'react-redux';
+import { useReplaceVariables } from 'api/generated/services/querier';
+import type { DashboardtypesQueryDTO } from 'api/generated/services/sigNoz.schemas';
+import { PANEL_TYPES } from 'constants/queryBuilder';
+import { buildQueryRangeRequest } from 'pages/DashboardPageV2/DashboardContainer/queryV5/buildQueryRangeRequest';
+import { envelopesToQuery } from 'pages/DashboardPageV2/DashboardContainer/queryV5/persesQueryAdapters';
+import { selectResolvedVariables } from 'pages/DashboardPageV2/DashboardContainer/store/slices/variableSelectionSlice';
+import { useDashboardStore } from 'pages/DashboardPageV2/DashboardContainer/store/useDashboardStore';
+import { AppState } from 'store/reducers';
+import { Query } from 'types/api/queryBuilder/queryBuilderData';
+import { GlobalReducer } from 'types/reducer/globalTime';
+
+interface UseResolvedDrilldownQueryArgs {
+	/** Panel's perses queries — the substitution source (carries the `$var` refs). */
+	queries: DashboardtypesQueryDTO[];
+	panelType: PANEL_TYPES;
+	/** The raw V5→V1 query; the fallback until substitution resolves / when no vars exist. */
+	v1Query: Query;
+	/** Resolve only while the aggregate menu is open (V1 parity: fires when it appears). */
+	enabled: boolean;
+}
+
+interface UseResolvedDrilldownQueryResult {
+	/** The variable-substituted query for View-in-X navigation. */
+	resolvedQuery: Query;
+	/** True while the round-trip is in flight — View-in-X shows a spinner and is disabled. */
+	isResolving: boolean;
+}
+
+/**
+ * Resolves the panel's dashboard-variable references (`$var`) into concrete values before
+ * View in Logs/Traces builds the explorer URL — V1 parity (`useBaseAggregateOptions` runs the
+ * same `/substitute_vars` round-trip). Skipped when the dashboard has no selections: the raw
+ * query already carries the refs verbatim and the round-trip would be a no-op. Mirrors the
+ * V2-native path in {@link useCreateAlertFromPanel}.
+ */
+export function useResolvedDrilldownQuery({
+	queries,
+	panelType,
+	v1Query,
+	enabled,
+}: UseResolvedDrilldownQueryArgs): UseResolvedDrilldownQueryResult {
+	const dashboardId = useDashboardStore((s) => s.dashboardId);
+	const variables = useDashboardStore(selectResolvedVariables(dashboardId));
+	const { maxTime, minTime } = useSelector<AppState, GlobalReducer>(
+		(state) => state.globalTime,
+	);
+	const { mutate: substituteVars, data, isLoading } = useReplaceVariables();
+
+	const hasVariables = Object.keys(variables).length > 0;
+
+	useEffect(() => {
+		if (!enabled || !hasVariables) {
+			return;
+		}
+		// Redux global time is nanoseconds; the request DTO takes integer epoch ms — the
+		// backend rejects fractional bounds, so floor after the ns→ms divide.
+		substituteVars({
+			data: buildQueryRangeRequest({
+				queries,
+				panelType,
+				startMs: Math.floor(minTime / 1e6),
+				endMs: Math.floor(maxTime / 1e6),
+				variables,
+			}),
+		});
+	}, [
+		enabled,
+		hasVariables,
+		queries,
+		panelType,
+		minTime,
+		maxTime,
+		variables,
+		substituteVars,
+	]);
+
+	const resolvedQuery = useMemo(() => {
+		if (!hasVariables || !data) {
+			return v1Query;
+		}
+		return envelopesToQuery(data.data.compositeQuery?.queries ?? [], panelType);
+	}, [hasVariables, data, v1Query, panelType]);
+
+	return { resolvedQuery, isResolving: enabled && hasVariables && isLoading };
+}