feat(infra-monitoring): pod status and restart counts. (#11885)

* chore: added types and open api spec changes

* chore: added method to calculate reason

* chore: per group pod status counts with req metric checks method added

* chore: wired up pod status counts

* chore: pod restarts type added

* chore: added restart counts for the group

* chore: bug in query fix

* chore: onboarding API changes

* chore: integration tests added

* chore: added podcountsbyphase in other entities

* chore: added pod status counts for other entities

* chore: added integration tests for other entities

* chore: added checks api changes for other entities

* chore: rearrangement

* chore: removed succeeded status and mark it as completed

* chore: query beautified

* chore: corrected metrics list for metadata lookup

* chore: removed dead constants

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:
@@ -7541,6 +7551,13 @@ components:
       enum:
       - basic
       type: string
+    ServiceaccounttypesDeprecatedPostableServiceAccountRole:
+      properties:
+        id:
+          type: string
+      required:
+      - id
+      type: object
     ServiceaccounttypesGettableFactorAPIKey:
       properties:
         createdAt:
@@ -7597,10 +7614,13 @@ components:
       type: object
     ServiceaccounttypesPostableServiceAccountRole:
       properties:
-        id:
+        roleId:
+          type: string
+        serviceAccountId:
           type: string
       required:
-      - id
+      - serviceAccountId
+      - roleId
       type: object
     ServiceaccounttypesServiceAccount:
       properties:
@@ -12363,6 +12383,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
@@ -12932,9 +13134,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
@@ -12945,7 +13147,7 @@ paths:
         content:
           application/json:
             schema:
-              $ref: '#/components/schemas/ServiceaccounttypesPostableServiceAccountRole'
+              $ref: '#/components/schemas/ServiceaccounttypesDeprecatedPostableServiceAccountRole'
       responses:
         "201":
           content:
@@ -12997,9 +13199,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
@@ -22101,6 +22303,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
@@ -22554,7 +22934,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:
@@ -22605,7 +22985,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

docs/contributing/go/authz.md

@@ -0,0 +1,149 @@
+# Authz
+
+SigNoz uses [OpenFGA](https://openfga.dev/), a relationship-based access control (ReBAC) system, to authorize every request. Transactions are never attached to users directly — they are attached to **roles** (as relationship tuples in OpenFGA), and users or service accounts (principals) are made **assignees** of those roles. The central interface is `AuthZ` in [pkg/authz/authz.go](/pkg/authz/authz.go), backed by an embedded OpenFGA server in [pkg/authz/openfgaserver](/pkg/authz/openfgaserver/server.go).
+
+As a feature author, you will rarely touch OpenFGA directly. You interact with two layers:
+
+1. **The registries** in [pkg/types/coretypes](/pkg/types/coretypes) — where every resource, verb, and managed-role permission is declared in code.
+2. **The route wiring** in [pkg/apiserver/signozapiserver](/pkg/apiserver/signozapiserver) — where each route declares what resource it touches and which verb it needs, and the middleware turns that into a check.
+
+## What are the building blocks?
+
+### Type
+
+A `Type` is the coarse FGA type of a resource. The set is finite and defined in [pkg/types/coretypes/registry_type.go](/pkg/types/coretypes/registry_type.go): `user`, `serviceaccount`, `anonymous`, `role`, `organization`, `metaresource`, and `telemetryresource`. Each type carries a selector regex (what a valid ID looks like) and the verbs allowed on it.
+
+Almost every feature resource is a `metaresource` (dashboards, rules, pipelines, ...) or a `telemetryresource` (logs, traces, metrics). You should almost never need a new type.
+
+### Verb
+
+A `Verb` is the action being authorized. All verbs are defined in [pkg/types/coretypes/registry_verb.go](/pkg/types/coretypes/registry_verb.go): `create`, `read`, `update`, `delete`, `list`, `assignee`, `attach`, and `detach`.
+
+- `assignee` is special: it is the membership relation between a subject and a role ("user X is an assignee of role Y"), not an action a route checks for.
+- `attach`/`detach` authorize linking two resources together (e.g. assigning a role to a service account).
+
+### Kind
+
+A `Kind` is the fine-grained name of your resource — `dashboard`, `rule`, `quick-filter`. Kinds are registered in [pkg/types/coretypes/registry_kind.go](/pkg/types/coretypes/registry_kind.go). A kind rides on top of an existing type, so adding one does **not** require any OpenFGA schema change.
+
+### Resource
+
+A `Resource` ties a type and a kind together and knows how to render itself as an FGA object string. The interface lives in [pkg/types/coretypes/resource.go](/pkg/types/coretypes/resource.go):
+
+```go
+type Resource interface {
+    Type() Type
+    Kind() Kind
+    Prefix(orgId valuer.UUID) string      // metaresource:organization/<orgID>/dashboard
+    Object(orgId valuer.UUID, selector string) string
+    Scope(verb Verb) string               // dashboard:read
+    AllowedVerbs() []Verb
+}
+```
+
+All resources are registered in [pkg/types/coretypes/registry_resource.go](/pkg/types/coretypes/registry_resource.go) using constructors like `NewResourceMetaResource(KindDashboard)` or `NewResourceTelemetryResource(KindLogs)`.
+
+### Selector
+
+A `Selector` identifies *which* instance(s) of a resource a check is about — a UUID, a role name, or the wildcard `*`. A `SelectorFunc` maps the extracted resource ID to selectors at request time. Two prebuilt ones cover most routes ([pkg/types/coretypes/selector.go](/pkg/types/coretypes/selector.go)):
+
+- `WildcardSelector` — the check is against all instances of the resource (`create`, `list`).
+- `IDSelector` — the check is against the specific instance *or* the wildcard (`read`, `update`, `delete` of one object). A subject authorized on `*` is authorized on every instance.
+
+When the ID in the request is not what FGA needs (e.g. routes receive a role UUID but FGA objects use role names), write a custom `SelectorFunc` — see `roleSelector` in [pkg/apiserver/signozapiserver/serviceaccount.go](/pkg/apiserver/signozapiserver/serviceaccount.go).
+
+### Roles, transactions, and tuples
+
+SigNoz ships four managed roles, declared in [pkg/types/coretypes/registry_managed_role.go](/pkg/types/coretypes/registry_managed_role.go): `signoz-admin`, `signoz-editor`, `signoz-viewer`, and `signoz-anonymous`. Their permissions are declared in code as `Transaction`s (a verb on an object) in `ManagedRoleToTransactions` — this map is the single source of truth for what each managed role can do.
+
+At organization bootstrap, `CreateManagedRoles` and `CreateManagedUserRoleTransactions` (see [pkg/authz/authz.go](/pkg/authz/authz.go)) persist the role rows and write one OpenFGA tuple per transaction, linking `role:organization/<orgID>/role/<name>#assignee` to each permitted object. Users and service accounts are then granted roles via `Grant`/`Revoke`, which writes `assignee` tuples. Custom roles (enterprise) are managed through the roles API in [pkg/authz/signozauthzapi/handler.go](/pkg/authz/signozauthzapi/handler.go).
+
+### Schema
+
+The OpenFGA authorization model is a hand-written DSL, embedded at build time: [pkg/authz/openfgaschema/base.fga](/pkg/authz/openfgaschema/base.fga) for community and [ee/authz/openfgaschema/base.fga](/ee/authz/openfgaschema/base.fga) for enterprise. The community model only supports role assignment; the enterprise model defines per-verb relations on every type, enabling genuine per-resource checks. This split is why `CheckWithTupleCreation` behaves differently per edition (see [How does a check work at runtime?](#how-does-a-check-work-at-runtime)). You only touch these files when introducing a brand-new **type** — never for a new kind.
+
+## How do I add authz to my feature?
+
+### 1. Register the kind
+
+Add your kind in [pkg/types/coretypes/registry_kind.go](/pkg/types/coretypes/registry_kind.go) and append it to `Kinds`:
+
+```go
+KindThing = MustNewKind("thing")
+```
+
+### 2. Register the resource
+
+Add the resource in [pkg/types/coretypes/registry_resource.go](/pkg/types/coretypes/registry_resource.go) and append it to `Resources`:
+
+```go
+ResourceMetaResourceThing = NewResourceMetaResource(KindThing)
+```
+
+Pass an explicit verb list to `NewResourceMetaResource` only if your resource supports fewer verbs than the type default.
+
+### 3. Grant permissions to managed roles
+
+Decide what each managed role can do with your resource and add the transactions in [pkg/types/coretypes/registry_managed_role.go](/pkg/types/coretypes/registry_managed_role.go):
+
+```go
+// thing — editors manage, viewers read
+{Verb: VerbCreate, Object: *MustNewObject(ResourceRef{Type: TypeMetaResource, Kind: KindThing}, WildCardSelectorString)},
+```
+
+The convention so far: admin gets everything, editor gets CRUD on day-to-day observability resources, viewer gets `read`/`list`, anonymous gets nothing (except public dashboards).
+
+### 4. Wire the route
+
+Register the route in [pkg/apiserver/signozapiserver](/pkg/apiserver/signozapiserver), wrapping your handler with `CheckResources` and declaring what the route touches via a `ResourceDef` ([pkg/http/handler/resourcedef.go](/pkg/http/handler/resourcedef.go)). A complete example from [pkg/apiserver/signozapiserver/serviceaccount.go](/pkg/apiserver/signozapiserver/serviceaccount.go):
+
+```go
+router.Handle("/api/v1/service_accounts", handler.New(
+    provider.authzMiddleware.CheckResources(provider.serviceAccountHandler.Create, authtypes.SigNozAdminRoleName),
+    handler.OpenAPIDef{
+        ID: "CreateServiceAccount",
+        // ...
+        SecuritySchemes: newScopedSecuritySchemes([]string{coretypes.ResourceServiceAccount.Scope(coretypes.VerbCreate)}),
+    },
+    handler.WithResourceDefs(handler.BasicResourceDef{
+        Resource: coretypes.ResourceServiceAccount,
+        Verb:     coretypes.VerbCreate,
+        Category: coretypes.ActionCategoryAccessControl,
+        ID:       coretypes.ResponseJSONPath("data.id"),
+        Selector: coretypes.WildcardSelector,
+    }),
+)).Methods(http.MethodPost)
+```
+
+The pieces:
+
+- **`CheckResources(handlerFn, roles...)`** — the resource-aware authorization wrapper from [pkg/http/middleware/authz.go](/pkg/http/middleware/authz.go). The role list is the community-edition fallback: which managed roles may call this route when per-resource checks are unavailable.
+- **`ResourceDef`** — declares the resource, verb, audit category, how to extract the instance ID, and how to turn that ID into selectors. ID extractors live in [pkg/types/coretypes/extractor.go](/pkg/types/coretypes/extractor.go): `PathParam("id")`, `BodyJSONPath("data.id")`, `BodyJSONArray("ids")`, and `ResponseJSONPath("data.id")` for IDs only known after the handler runs (e.g. `create`).
+- **`SecuritySchemes`** — advertises the required scope (`resource.Scope(verb)`, e.g. `serviceaccount:create`) in the OpenAPI spec.
+
+For routes that link two resources, use `AttachDetachSiblingResourceDef` (both sides are authz-checked, e.g. attaching a role to a service account requires `attach` on **both** the service account and the role). For parent-child routes (e.g. creating an API key under a service account), both sides are checked too, but with different verbs: declare a `BasicResourceDef` checking the child with `create`/`delete`, alongside an `AttachDetachParentChildResourceDef` checking the parent with `attach`/`detach` (within that def the child is only recorded for audit) — see the `/api/v1/service_accounts/{id}/keys` route in [pkg/apiserver/signozapiserver/serviceaccount.go](/pkg/apiserver/signozapiserver/serviceaccount.go).
+
+Prefer `CheckResources` with a `ResourceDef` for anything resource-shaped. The older coarse gates `ViewAccess`/`EditAccess`/`AdminAccess` only check "does the caller hold one of these roles" and give up per-resource granularity; `OpenAccess` performs no authorization (authentication still applies); `CheckWithoutClaims` serves anonymous routes such as public dashboards.
+
+### 5. Backfill existing organizations (only if needed)
+
+Managed-role tuples are written from the registry at organization creation, so **new resources need no migration for new organizations**. If existing organizations must get the new permissions, add a migration in [pkg/sqlmigration](/pkg/sqlmigration) that inserts the tuples — see [083_add_role_crud_tuples.go](/pkg/sqlmigration/083_add_role_crud_tuples.go) for the pattern.
+
+## How does a check work at runtime?
+
+1. The resource middleware ([pkg/http/middleware/resource.go](/pkg/http/middleware/resource.go)) runs on every request. It reads the matched handler's `ResourceDef`s, extracts the resource IDs from path/body, and stores the resolved resources in the request context.
+2. `CheckResources` reads them back, runs each `SelectorFunc`, and calls `AuthZ.CheckWithTupleCreation(ctx, claims, orgID, relation, resource, selectors, roleSelectors)`.
+3. What happens next depends on the edition:
+   - **Community** ([pkg/authz/openfgaserver/server.go](/pkg/authz/openfgaserver/server.go)) ignores the resource and selectors and only checks whether the subject is an `assignee` of one of the allowed roles — a plain role gate.
+   - **Enterprise** ([ee/authz/openfgaserver/server.go](/ee/authz/openfgaserver/server.go)) builds tuples via `authtypes.NewTuples` — subject `user:organization/<orgID>/user/<userID>`, relation `create`, object `serviceaccount:organization/<orgID>/serviceaccount/*` — and batch-checks them against OpenFGA: genuine per-resource authorization, including custom roles.
+
+Because both paths go through the same middleware and the same `ResourceDef` declarations, a route wired once works correctly in both editions.
+
+## What should I remember?
+
+- Declare authz in the registries ([pkg/types/coretypes](/pkg/types/coretypes)), not in migrations — tuples for new organizations are derived from code at bootstrap.
+- A new kind never needs an OpenFGA schema change; only a new type does, and then **both** [pkg/authz/openfgaschema/base.fga](/pkg/authz/openfgaschema/base.fga) and [ee/authz/openfgaschema/base.fga](/ee/authz/openfgaschema/base.fga) must be updated together.
+- Prefer `CheckResources` + `ResourceDef` over the coarse `ViewAccess`/`EditAccess`/`AdminAccess` gates for new routes.
+- Use `WildcardSelector` for `create`/`list`, `IDSelector` for instance operations, and a custom `SelectorFunc` when the request ID is not the FGA selector.
+- Linking routes check **both** sides: peers via `AttachDetachSiblingResourceDef` (same verb on both), parent-child via a `BasicResourceDef` on the child (`create`/`delete`) paired with an `AttachDetachParentChildResourceDef` on the parent (`attach`/`detach`).
+- Changing `ManagedRoleToTransactions` only affects organizations created afterwards — add a [pkg/sqlmigration](/pkg/sqlmigration) migration to backfill existing ones.

docs/contributing/go/readme.md

@@ -11,6 +11,7 @@ We adhere to three primary style guides as our foundation:
 We **recommend** (almost enforce) reviewing these guides before contributing to the codebase. They provide valuable insights into writing idiomatic Go code and will help you understand our approach to backend development. In addition, we have a few additional rules that make certain areas stricter than the above which can be found in area-specific files in this package:
 
 - [Abstractions](abstractions.md) - When to introduce new types and intermediate representations
+- [Authz](authz.md) - Authorization, roles, and access control
 - [Errors](errors.md) - Structured error handling
 - [Endpoint](endpoint.md) - HTTP endpoint patterns
 - [Flagger](flagger.md) - Feature flag patterns

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 {
@@ -8618,6 +8629,13 @@ export interface RuletypesRuleDTO {
 export enum RuletypesThresholdKindDTO {
 	basic = 'basic',
 }
+export interface ServiceaccounttypesDeprecatedPostableServiceAccountRoleDTO {
+	/**
+	 * @type string
+	 */
+	id: string;
+}
+
 export interface ServiceaccounttypesGettableFactorAPIKeyDTO {
 	/**
 	 * @type string
@@ -8687,7 +8705,11 @@ export interface ServiceaccounttypesPostableServiceAccountRoleDTO {
 	/**
 	 * @type string
 	 */
-	id: string;
+	roleId: string;
+	/**
+	 * @type string
+	 */
+	serviceAccountId: string;
 }
 
 export interface ServiceaccounttypesServiceAccountDTO {
@@ -10453,6 +10475,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
@@ -10536,10 +10580,10 @@ export type GetServiceAccountRoles200 = {
 	status: string;
 };
 
-export type CreateServiceAccountRolePathParameters = {
+export type CreateServiceAccountRoleDeprecatedPathParameters = {
 	id: string;
 };
-export type CreateServiceAccountRole201 = {
+export type CreateServiceAccountRoleDeprecated201 = {
 	data: TypesIdentifiableDTO;
 	/**
 	 * @type string
@@ -10547,7 +10591,7 @@ export type CreateServiceAccountRole201 = {
 	status: string;
 };
 
-export type DeleteServiceAccountRolePathParameters = {
+export type DeleteServiceAccountRoleDeprecatedPathParameters = {
 	id: string;
 	rid: string;
 };
@@ -11707,6 +11751,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/assets/Logos/cassandra.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="#1287b1" viewBox="0 0 24 24"><title>Apache Cassandra</title><path d="M10.374 10.53a3 3 0 0 1-.428-.222l.555.143c0 .02-.01.036-.01.055l-.117.025zm-.283 1.506-.315.253.852-1.079-1.078.391c.002.017.009.033.009.05a.57.57 0 0 1-.184.42q.154.327.375.616a3.2 3.2 0 0 1 .34-.651zm.717-2.347-.652-.82a.43.43 0 0 1-.506.162c-.054.073-.083.162-.13.24l1.258.463zm-1.666.444c-.07.314-.087.637-.05.956a.57.57 0 0 1 .451.475l.946-.606c-.067-.022-.126-.06-.191-.088l-1.119-.08.64-.14a3.2 3.2 0 0 1-.668-.554zM20.1 11.648c-.164.202.833 1.022.833 1.022s-1.654-1.022-2.234-.72c-.278.144.574.811 1.175 1.242-.428-.274-.982-.571-1.175-.408-.328.277 1.565 2.549 1.565 2.549s-2.145-2.322-2.36-2.209c-.214.114.593 1.224.593 1.224s-1.06-1.16-1.35-.959c-.29.202 1.514 3.218 1.514 3.218s-1.956-3.091-2.763-2.574c1.268 2.782.795 3.18.795 3.18s-.162-2.839-1.742-2.764c-.795.038.379 2.12.379 2.12s-1.08-1.902-1.8-1.864c1.326 2.51.854 3.53.854 3.53s.219-2.143-1.58-3.336c.682.606-.427 3.336-.427 3.336s.976-4.023-.719-3.256c-.268.121-.019 2.007-.019 2.007s-.34-2.158-.851-2.045c-.298.066-1.893 2.99-1.893 2.99s1.306-3.16.908-3.027c-.29.096-.833 1.4-.833 1.4s.265-1.287 0-1.363c-.264-.075-1.74 1.363-1.74 1.363s1.097-1.287.908-1.552c-.287-.402-.623-.42-1.022-.265-.581.226-1.363 1.287-1.363 1.287s.78-1.074.643-1.476c-.219-.647-2.46 1.249-2.46 1.249s1.325-1.25 1.022-1.514c-.303-.265-1.947-.183-2.46-.185-1.515-.004-2.039-.36-2.498-.724 1.987.997 3.803-.151 6.094.494l.21.06c-1.3-.558-2.144-1.378-2.226-2.354-.036-.416.074-.827.297-1.222.619-.4 1.29-.773 2.06-1.095a4 4 0 0 0-.064.698c0 2.44 2.203 4.417 4.92 4.417s4.92-1.977 4.92-4.417c0-.45-.083-.881-.223-1.29 1.431.404 2.45.968 3.132 1.335.022.092.045.184.053.279.024.274-.018.547-.11.814.095-.147.198-.288.28-.445.367-.997 1.855.227 1.855.227s-1.085-.454-1.06-.24c.026.215 1.628.96 1.628.96s-1.45-.455-1.362-.114c.088.34 1.817 1.703 1.817 1.703s-1.956-1.489-2.12-1.287zm-7.268 2.65.042-.008-.06.01zM9.256 9.753c.12.13.26.234.396.343l.927-.029-1.064-.788c-.093.154-.195.303-.26.474Zm10.62 3.44c.3.215.54.373.54.373s-.24-.181-.54-.374zM7.507 8.617c-.14.229-.214.492-.215.76a3.99 3.99 0 0 0 2.358 3.64q0-.008.003-.014a3.2 3.2 0 0 1-.58-.788c-.648.099-.926-.794-.336-1.08a3.2 3.2 0 0 1 .138-1.388 3.16 3.16 0 0 1-.52-1.36q-.444.105-.848.23m1.488.82q.163-.36.402-.661a.435.435 0 0 1 .568-.557c.077-.059.166-.099.248-.15a16 16 0 0 0-1.727.284c.114.388.272.76.509 1.084m2.285 3.928c1.4 0 2.633-.723 3.344-1.816a3.4 3.4 0 0 0-1.265-.539l-.297-.023.916.9-1.197-.467.704 1.078-1.074-.832-.012.006.347 1.278-.596-1.134-.098 1.33-.401-1.326-.472 1.261.114-1.359-.015-.008-.814 1.154.286-1.067c-.34.322-.605.713-.781 1.146q.143.153.303.29.484.126 1.008.128m10.145-4.434c.971-.567 1.716-1.955 1.716-1.955s-1.893 1.955-3.205 1.665c1.186-.934 1.766-2.549 1.766-2.549s-1.506 2.325-2.448 2.423c1.086-.959 1.54-2.322 1.54-2.322s-1.237 1.817-2.196 1.944c1.287-1.161 1.338-1.893 1.338-1.893s-1.781 2.302-2.499 1.943c.858-.934 1.439-2.12 1.439-2.12s-1.489 2.019-1.893 1.69c-.277-.05.454-.958.454-.958s-.908.807-1.16.606c.454-.278 1.236-1.64 1.236-1.64S16 7.505 15.621 7.304l.731-1.483s-.73 1.483-1.715 1.23c.454-.58.63-1.112.63-1.112s-.756 1.213-1.69.885c-.22-.077.273-.635.273-.635s-.626.61-1.055.534c-.43-.076.025-.858.025-.858s-.757 1.186-.908 1.136.075-.833.075-.833-.555.908-.858.858 0-.934 0-.934-.328.984-.58.909c-.252-.076-.303-.656-.303-.656s-.068.788-.429.858c-2.725.53-5.728 1.69-9.489 5.45C3.887 10.738 5.3 7.91 11.962 7.659c5.044-.191 7.399 2.137 8.177 2.17C22.51 9.93 24 7.633 24 7.633s-1.489 1.716-2.574 1.3zm-7.74.872-.608.464v.001l.054.003a3.4 3.4 0 0 0 .554-.468m1.583-.426c0-.536-.237-.929-.594-1.217a3.2 3.2 0 0 1-.165.825.393.393 0 0 1-.328.681c-.154.233-.34.445-.549.63l.661.034-.995.237c-.025.018-.045.041-.07.058a3.2 3.2 0 0 1 1.536.691c.32-.574.504-1.235.504-1.94zM10.99 7.996a3.5 3.5 0 0 0-.785.46.43.43 0 0 1-.013.357l.885.643.023-.016-.36-1.262.627 1.12c.018-.006.04-.006.058-.011l-.02-1.251.398 1.163.477-1.15.016 1.268.012.007.713-1.005-.363 1.218.009.01 1.04-.69-.759 1.05.002.005.95-.34.041-.045a.395.395 0 0 1 .394-.632 3.4 3.4 0 0 0 .27-.784 14 14 0 0 0-2.798-.168c-.286.011-.55.033-.817.053"/></svg>

frontend/src/assets/Logos/fluxcd.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="48 -2.25 262.5 364"><defs><style>.cls-1{fill:#326ce5}.cls-3{fill:none}</style></defs><path d="M59.724 97.778a10.183 10.183 0 0 1 0-17.073l114.07-74.16a10.18 10.18 0 0 1 11.1 0l114.07 74.16a10.183 10.183 0 0 1 0 17.073l-114.07 74.16a10.18 10.18 0 0 1-11.1 0z" class="cls-1"/><path fill="#c1d2f7" d="M197.356 110.866h7.912a6.003 6.003 0 0 0 5.2-9.005l-25.924-44.902a6.004 6.004 0 0 0-10.399 0l-25.924 44.902a6.003 6.003 0 0 0 5.2 9.005h7.912a6.003 6.003 0 0 1 6.004 6.003v51.257l5.31 3.452a12.29 12.29 0 0 0 13.395 0l5.31-3.452v-51.257a6.003 6.003 0 0 1 6.004-6.003"/><path d="M173.793 353.271a10.1 10.1 0 0 0 3.457 1.402 119 119 0 0 0-6.623-3.46zm-6.456-161.195-11.316 7.356a111 111 0 0 0 11.316 6.6zm24.015 23.716c9.739 3.115 19.813 5.648 30.11 8.186 10.92 2.692 21.973 5.427 32.818 9.009l-35.416-23.025a216 216 0 0 1-27.512-9.41zm0 62.191v.586c0 2.57-2.688 4.652-6.003 4.652H173.34c-3.315 0-6.003-2.083-6.003-4.652v-6.605c-24.906-6.402-49.873-14.485-70.86-33.82l-14.529 9.445c22.468 22.05 50.28 28.933 79.715 36.189 27.178 6.698 55.18 13.651 78.685 33.442l14.68-9.544c-18.532-16.504-40.41-23.687-63.676-29.693M93.315 300.95l38.908 25.295c20.064 5.113 40.2 11.248 58.31 23.36l14.901-9.687c-19.752-13.672-42.55-19.313-66.419-25.197-15.287-3.767-30.835-7.616-45.7-13.771m74.022-82.254a124.3 124.3 0 0 1-21.534-12.62l-14.805 9.625a124.5 124.5 0 0 0 36.339 18.708zm51.41 16.294c-9.106-2.245-18.304-4.524-27.395-7.299v13.682q5.051 1.286 10.177 2.538c29.934 7.379 60.888 15.01 85.708 39.829.61.61 1.162 1.24 1.752 1.857l9.974-6.484a10.1 10.1 0 0 0 3.475-3.8 101 101 0 0 0-3.289-3.486c-22.585-22.585-50.669-29.508-80.402-36.837m-19.933 19.933q-3.722-.918-7.462-1.855v13.21c25.817 6.561 51.803 14.688 73.455 35.04l14.521-9.44-.11-.118c-22.586-22.585-50.67-29.509-80.404-36.837m-31.477-8.587c-16.28-5.278-32.118-12.397-46.344-24.131l-14.682 9.545c17.87 15.557 38.784 22.673 61.026 28.5z" class="cls-3"/><path d="M73.24 254.96c-.348-.348-.658-.71-1-1.06l-12.514 8.136a10 10 0 0 0-1.644 1.397c1.053 1.157 2.115 2.31 3.245 3.44 22.585 22.585 50.67 29.509 80.403 36.837 25.343 6.247 51.401 12.717 73.865 29.603l14.806-9.626c-20.865-16.42-45.53-22.509-71.453-28.898-29.934-7.379-60.888-15.01-85.708-39.83" class="cls-3"/><path d="m218.864 209.962-27.512-17.886v8.476a216 216 0 0 0 27.512 9.41m-27.512 5.83v11.9c9.091 2.774 18.289 5.053 27.395 7.298 29.733 7.329 57.817 14.252 80.402 36.837a101 101 0 0 1 3.29 3.486 10.193 10.193 0 0 0-3.476-13.277l-44.683-29.05c-10.845-3.58-21.898-6.316-32.818-9.008-10.297-2.538-20.371-5.071-30.11-8.186m-24.015-9.76a111 111 0 0 1-11.316-6.6l-10.218 6.644a124.3 124.3 0 0 0 21.534 12.62zm34.192 37.88q-5.125-1.264-10.177-2.539v11.695q3.737.938 7.462 1.855c29.733 7.328 57.818 14.252 80.403 36.837.039.039.073.079.111.118l9.66-6.28c-.589-.618-1.142-1.248-1.751-1.858-24.82-24.82-55.774-32.45-85.708-39.829m-34.192-9.503a124.5 124.5 0 0 1-36.34-18.708l-10.004 6.504c14.226 11.734 30.064 18.853 46.344 24.13zm0 25.842c-22.242-5.828-43.156-12.944-61.026-28.5l-9.834 6.392c20.987 19.336 45.954 27.42 70.86 33.821zm24.015 17.732c23.266 6.006 45.144 13.19 63.675 29.693l9.78-6.358c-21.652-20.352-47.638-28.479-73.455-35.04zM81.948 247.59l-9.707 6.311c.341.35.652.712 1 1.06 24.82 24.82 55.773 32.45 85.707 39.829 25.922 6.39 50.588 12.478 71.452 28.898l9.948-6.467c-23.505-19.791-51.507-26.744-78.685-33.442-29.436-7.256-57.247-14.138-79.715-36.189m-20.621 19.284c-1.13-1.13-2.192-2.283-3.245-3.44a10.154 10.154 0 0 0 1.644 15.68l33.589 21.837c14.865 6.155 30.413 10.004 45.7 13.771 23.869 5.884 46.667 11.525 66.419 25.197l10.16-6.605c-22.463-16.886-48.521-23.356-73.864-29.603-29.733-7.328-57.818-14.252-80.403-36.837m109.3 84.34a119 119 0 0 1 6.623 3.46 10.16 10.16 0 0 0 7.645-1.402l5.639-3.666c-18.11-12.112-38.247-18.247-58.311-23.36z" class="cls-1"/></svg>

frontend/src/assets/Logos/planetscale.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24"><title>PlanetScale</title><path d="M0 12C0 5.373 5.373 0 12 0c4.873 0 9.067 2.904 10.947 7.077l-15.87 15.87a12 12 0 0 1-1.935-1.099L14.99 12H12l-8.485 8.485A11.96 11.96 0 0 1 0 12m12.004 12L24 12.004C23.998 18.628 18.628 23.998 12.004 24"/></svg>

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/AIAssistant/ConversationView/ConversationView.tsx

@@ -177,7 +177,13 @@ export default function ConversationView({
 				conversationId={conversationId}
 				messages={messages}
 				isStreaming={isStreamingHere}
-				onSendSuggestedPrompt={(text): void => handleSend(text)}
+				onSendSuggestedPrompt={(text): void => {
+					handleSend(
+						text,
+						undefined,
+						autoContexts.length > 0 ? autoContexts : undefined,
+					);
+				}}
 			/>
 			{showDisclaimer && (
 				<div className={disclaimerClass} role="note" aria-live="polite">

frontend/src/container/AIAssistant/ConversationView/__tests__/ConversationView.test.tsx

@@ -0,0 +1,142 @@
+import { MemoryRouter } from 'react-router-dom';
+// eslint-disable-next-line no-restricted-imports
+import { fireEvent, render } from '@testing-library/react';
+import { MessageContext } from 'api/ai-assistant/chat';
+import { useAIAssistantStore } from 'container/AIAssistant/store/useAIAssistantStore';
+import { VariantContext } from 'container/AIAssistant/VariantContext';
+
+const CHIP_ID = 'recent-errors';
+const CHIP_TEXT = 'Show me recent errors';
+
+// Auto-derived page context that a normal (typed) send would attach. The chip
+// send must forward the exact same array.
+const mockAutoContexts: MessageContext[] = [
+	{
+		source: 'auto',
+		type: 'dashboard',
+		resourceId: 'dashboard-123',
+		resourceName: 'Checkout dashboard',
+	},
+];
+
+jest.mock('api/common/logEvent', () => ({
+	__esModule: true,
+	default: jest.fn(),
+}));
+
+jest.mock('container/AIAssistant/getAutoContexts', () => ({
+	getAutoContexts: jest.fn(() => mockAutoContexts),
+}));
+
+jest.mock('container/AIAssistant/hooks/useAIAssistantAnalyticsContext', () => ({
+	normalizePage: (page: string): string => page,
+	useAIAssistantAnalyticsContext: (): unknown => ({ threadId: 'thread-1' }),
+}));
+
+// ChatInput is heavy and irrelevant here — the chip path lives entirely in the
+// empty state. Provide a lightweight stub plus the `autoContextKey` named export
+// ConversationView imports for its dismissed-context filter.
+jest.mock('container/AIAssistant/components/ChatInput', () => ({
+	__esModule: true,
+	default: (): JSX.Element => <div data-testid="chat-input" />,
+	autoContextKey: (): string => '',
+}));
+
+jest.mock('container/AIAssistant/components/ConversationSkeleton', () => ({
+	__esModule: true,
+	default: (): JSX.Element => <div data-testid="skeleton" />,
+}));
+
+// VirtualizedMessages renders the real empty-state chips; stub only its
+// never-rendered-in-empty-state children and the virtual list.
+jest.mock('components/Noz/Noz', () => ({
+	__esModule: true,
+	default: (): JSX.Element => <div data-testid="noz" />,
+}));
+
+jest.mock('container/AIAssistant/components/MessageBubble', () => ({
+	__esModule: true,
+	default: (): null => null,
+}));
+
+jest.mock('container/AIAssistant/components/StreamingMessage', () => ({
+	__esModule: true,
+	default: (): null => null,
+}));
+
+jest.mock('react-virtuoso', () => ({
+	__esModule: true,
+	Virtuoso: (): null => null,
+}));
+
+jest.mock(
+	'container/AIAssistant/components/VirtualizedMessages/useEmptyStateChips',
+	() => ({
+		useEmptyStateChips: (): { chips: { id: string; text: string }[] } => ({
+			chips: [{ id: CHIP_ID, text: CHIP_TEXT }],
+		}),
+	}),
+);
+
+// eslint-disable-next-line import/first
+import ConversationView from '../ConversationView';
+
+const CONVERSATION_ID = 'conv-1';
+
+function renderView(variant: 'panel' | 'page' | 'modal'): {
+	getByTestId: (id: string) => HTMLElement;
+} {
+	return render(
+		<MemoryRouter initialEntries={['/dashboard/dashboard-123']}>
+			<VariantContext.Provider value={variant}>
+				<ConversationView conversationId={CONVERSATION_ID} />
+			</VariantContext.Provider>
+		</MemoryRouter>,
+	);
+}
+
+describe('ConversationView — empty-state chip context', () => {
+	let sendMessage: jest.Mock;
+
+	beforeEach(() => {
+		jest.clearAllMocks();
+		sendMessage = jest.fn();
+		useAIAssistantStore.setState({
+			conversations: {
+				[CONVERSATION_ID]: {
+					id: CONVERSATION_ID,
+					messages: [],
+					createdAt: 1,
+					updatedAt: 1,
+				},
+			},
+			streams: {},
+			activeConversationId: CONVERSATION_ID,
+			isLoadingThread: false,
+			sendMessage,
+		} as unknown as Partial<ReturnType<typeof useAIAssistantStore.getState>>);
+	});
+
+	it('forwards the page auto-contexts when a chip is clicked (embedded variant)', () => {
+		const { getByTestId } = renderView('panel');
+
+		fireEvent.click(getByTestId(`empty-state-chip-${CHIP_ID}`));
+
+		// The chip send must carry the same auto-contexts a typed message would.
+		expect(sendMessage).toHaveBeenCalledTimes(1);
+		expect(sendMessage).toHaveBeenCalledWith(
+			CHIP_TEXT,
+			undefined,
+			mockAutoContexts,
+		);
+	});
+
+	it('sends undefined contexts on the standalone page (no page context to attach)', () => {
+		const { getByTestId } = renderView('page');
+
+		fireEvent.click(getByTestId(`empty-state-chip-${CHIP_ID}`));
+
+		expect(sendMessage).toHaveBeenCalledTimes(1);
+		expect(sendMessage).toHaveBeenCalledWith(CHIP_TEXT, undefined, undefined);
+	});
+});

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/container/LogDetailedView/InfraMetrics/constants.ts

@@ -1625,6 +1625,9 @@ export const getHostQueryPayload = (
 	const diskPendingKey = dotMetricsEnabled
 		? 'system.disk.pending_operations'
 		: 'system_disk_pending_operations';
+	const fsUsageKey = dotMetricsEnabled
+		? 'system.filesystem.usage'
+		: 'system_filesystem_usage';
 
 	return [
 		{
@@ -2657,6 +2660,155 @@ export const getHostQueryPayload = (
 			start,
 			end,
 		},
+		{
+			selectedTime: 'GLOBAL_TIME',
+			graphType: PANEL_TYPES.TIME_SERIES,
+			query: {
+				builder: {
+					queryData: [
+						{
+							aggregateAttribute: {
+								dataType: DataTypes.Float64,
+								id: 'system_filesystem_usage--float64--Gauge--true',
+
+								key: fsUsageKey,
+								type: 'Gauge',
+							},
+							aggregateOperator: 'avg',
+							dataSource: DataSource.METRICS,
+							disabled: true,
+							expression: 'A',
+							filters: {
+								items: [
+									{
+										id: 'fs_f1',
+										key: {
+											dataType: DataTypes.String,
+											id: 'host_name--string--tag--false',
+
+											key: hostNameKey,
+											type: 'tag',
+										},
+										op: '=',
+										value: hostName,
+									},
+									{
+										id: 'fs_f2',
+										key: {
+											dataType: DataTypes.String,
+											id: 'state--string--tag--false',
+
+											key: 'state',
+											type: 'tag',
+										},
+										op: '=',
+										value: 'used',
+									},
+								],
+								op: 'AND',
+							},
+							functions: [],
+							groupBy: [
+								{
+									dataType: DataTypes.String,
+									id: 'mountpoint--string--tag--false',
+
+									key: 'mountpoint',
+									type: 'tag',
+								},
+							],
+							having: [
+								{
+									columnName: `SUM(${fsUsageKey})`,
+									op: '>',
+									value: 0,
+								},
+							],
+							legend: '{{mountpoint}}',
+							limit: null,
+							orderBy: [],
+							queryName: 'A',
+							reduceTo: ReduceOperators.AVG,
+							spaceAggregation: 'sum',
+							stepInterval: 60,
+							timeAggregation: 'avg',
+						},
+						{
+							aggregateAttribute: {
+								dataType: DataTypes.Float64,
+								id: 'system_filesystem_usage--float64--Gauge--true',
+
+								key: fsUsageKey,
+								type: 'Gauge',
+							},
+							aggregateOperator: 'avg',
+							dataSource: DataSource.METRICS,
+							disabled: true,
+							expression: 'B',
+							filters: {
+								items: [
+									{
+										id: 'fs_f3',
+										key: {
+											dataType: DataTypes.String,
+											id: 'host_name--string--tag--false',
+
+											key: hostNameKey,
+											type: 'tag',
+										},
+										op: '=',
+										value: hostName,
+									},
+								],
+								op: 'AND',
+							},
+							functions: [],
+							groupBy: [
+								{
+									dataType: DataTypes.String,
+									id: 'mountpoint--string--tag--false',
+
+									key: 'mountpoint',
+									type: 'tag',
+								},
+							],
+							having: [
+								{
+									columnName: `SUM(${fsUsageKey})`,
+									op: '>',
+									value: 0,
+								},
+							],
+							legend: '{{mountpoint}}',
+							limit: null,
+							orderBy: [],
+							queryName: 'B',
+							reduceTo: ReduceOperators.AVG,
+							spaceAggregation: 'sum',
+							stepInterval: 60,
+							timeAggregation: 'avg',
+						},
+					],
+					queryFormulas: [
+						{
+							disabled: false,
+							expression: 'A/B',
+							legend: '{{mountpoint}}',
+							queryName: 'F1',
+						},
+					],
+					queryTraceOperator: [],
+				},
+				clickhouse_sql: [{ disabled: false, legend: '', name: 'A', query: '' }],
+				id: 'a1b2c3d4-e5f6-7890-abcd-ef1234567890',
+				promql: [{ disabled: false, legend: '', name: 'A', query: '' }],
+				queryType: EQueryType.QUERY_BUILDER,
+			},
+			variables: {},
+			formatForWeb: false,
+			start,
+			end,
+		},
 	];
 };
 
@@ -2732,4 +2884,5 @@ export const hostWidgetInfo = [
 	{ title: 'System disk operations/s', yAxisUnit: 'short' },
 	{ title: 'Queue size', yAxisUnit: 'short' },
 	{ title: 'System disk operation time/s', yAxisUnit: 's' },
+	{ title: 'Disk Usage (%) by mountpoint', yAxisUnit: 'percentunit' },
 ];

frontend/src/container/OnboardingV2Container/onboarding-configs/onboarding-config-with-links.ts

@@ -20,6 +20,7 @@ import azureOpenaiUrl from '@/assets/Logos/azure-openai.svg';
 import azureSqlDatabaseMetricsUrl from '@/assets/Logos/azure-sql-database-metrics.svg';
 import azureVmUrl from '@/assets/Logos/azure-vm.svg';
 import basetenUrl from '@/assets/Logos/baseten.svg';
+import cassandraUrl from '@/assets/Logos/cassandra.svg';
 import celeryUrl from '@/assets/Logos/celery.svg';
 import certManagerUrl from '@/assets/Logos/cert-manager.svg';
 import claudeCodeUrl from '@/assets/Logos/claude-code.svg';
@@ -51,6 +52,7 @@ import externalApiMonitoringUrl from '@/assets/Logos/external-api-monitoring.svg
 import fluentbitUrl from '@/assets/Logos/fluentbit.svg';
 import fluentdUrl from '@/assets/Logos/fluentd.svg';
 import flutterMonitoringUrl from '@/assets/Logos/flutter-monitoring.svg';
+import fluxcdUrl from '@/assets/Logos/fluxcd.svg';
 import flyIoUrl from '@/assets/Logos/fly-io.svg';
 import fromLogFileUrl from '@/assets/Logos/from-log-file.svg';
 import gcpAppEngineUrl from '@/assets/Logos/gcp-app-engine.svg';
@@ -94,6 +96,7 @@ import langtraceUrl from '@/assets/Logos/langtrace.svg';
 import litellmUrl from '@/assets/Logos/litellm.svg';
 import livekitUrl from '@/assets/Logos/livekit.svg';
 import llamaindexUrl from '@/assets/Logos/llamaindex.svg';
+import llmMonitoringUrl from '@/assets/Logos/llm-monitoring.svg';
 import logrusUrl from '@/assets/Logos/logrus.svg';
 import logsUrl from '@/assets/Logos/logs.svg';
 import logstashUrl from '@/assets/Logos/logstash.svg';
@@ -120,6 +123,7 @@ import opentelemetryUrl from '@/assets/Logos/opentelemetry.svg';
 import phpUrl from '@/assets/Logos/php.svg';
 import pinoUrl from '@/assets/Logos/pino.svg';
 import pipecatUrl from '@/assets/Logos/pipecat.svg';
+import planetscaleUrl from '@/assets/Logos/planetscale.svg';
 import postgresqlUrl from '@/assets/Logos/postgresql.svg';
 import prometheusUrl from '@/assets/Logos/prometheus.svg';
 import pydanticAiUrl from '@/assets/Logos/pydantic-ai.svg';
@@ -1526,6 +1530,28 @@ const onboardingConfigWithLinks = [
 		id: 'nginx-tracing',
 		link: '/docs/instrumentation/opentelemetry-nginx/',
 	},
+	{
+		dataSource: 'nginx-ingress-controller',
+		label: 'NGINX Ingress Controller',
+		imgUrl: nginxUrl,
+		tags: ['infrastructure monitoring'],
+		module: 'metrics',
+		relatedSearchKeywords: [
+			'ingress',
+			'ingress controller',
+			'kubernetes ingress',
+			'monitoring',
+			'nginx ingress',
+			'nginx ingress controller',
+			'nginx ingress metrics',
+			'nginx ingress monitoring',
+			'nginx ingress observability',
+			'observability',
+			'opentelemetry nginx ingress',
+		],
+		id: 'nginx-ingress-controller',
+		link: '/docs/metrics-management/nginx-ingress-controller/',
+	},
 	{
 		dataSource: 'opentelemetry-cloudflare',
 		label: 'Cloudflare Tracing',
@@ -1586,6 +1612,119 @@ const onboardingConfigWithLinks = [
 		id: 'opentelemetry-cloudflare-logs',
 		link: '/docs/logs-management/send-logs/cloudflare-logs/',
 	},
+	{
+		dataSource: 'cloudflare-workers',
+		label: 'Cloudflare Workers',
+		imgUrl: cloudflareUrl,
+		tags: ['apm/traces'],
+		module: 'apm',
+		relatedSearchKeywords: [
+			'cloudflare',
+			'cloudflare workers',
+			'cloudflare workers monitoring',
+			'cloudflare workers observability',
+			'cloudflare workers otlp',
+			'edge computing monitoring',
+			'monitor cloudflare workers',
+			'monitoring',
+			'observability',
+			'opentelemetry cloudflare workers',
+			'otlp',
+			'serverless monitoring',
+		],
+		id: 'cloudflare-workers',
+		link: '/docs/integrations/outposts/cloudflare-workers/',
+	},
+	{
+		dataSource: 'opentelemetry-cassandra',
+		label: 'Cassandra',
+		imgUrl: cassandraUrl,
+		tags: ['database'],
+		module: 'apm',
+		relatedSearchKeywords: [
+			'apache cassandra',
+			'cassandra',
+			'cassandra database',
+			'cassandra logs',
+			'cassandra metrics',
+			'cassandra monitoring',
+			'cassandra observability',
+			'database',
+			'monitoring',
+			'nosql',
+			'observability',
+			'opentelemetry cassandra',
+		],
+		id: 'opentelemetry-cassandra',
+		link: '/docs/integrations/opentelemetry-cassandra/',
+	},
+	{
+		dataSource: 'fluxcd',
+		label: 'FluxCD',
+		imgUrl: fluxcdUrl,
+		tags: ['infrastructure monitoring'],
+		module: 'metrics',
+		relatedSearchKeywords: [
+			'continuous delivery',
+			'flux',
+			'fluxcd',
+			'fluxcd dashboard',
+			'fluxcd metrics',
+			'fluxcd monitoring',
+			'fluxcd observability',
+			'gitops',
+			'kubernetes',
+			'monitoring',
+			'observability',
+			'opentelemetry fluxcd',
+		],
+		id: 'fluxcd',
+		link: '/docs/metrics-management/fluxcd-metrics/',
+	},
+	{
+		dataSource: 'planetscale',
+		label: 'PlanetScale',
+		imgUrl: planetscaleUrl,
+		tags: ['database'],
+		module: 'apm',
+		relatedSearchKeywords: [
+			'database',
+			'monitoring',
+			'mysql',
+			'observability',
+			'opentelemetry planetscale',
+			'planetscale',
+			'planetscale database',
+			'planetscale metrics',
+			'planetscale monitoring',
+			'planetscale observability',
+			'serverless database',
+		],
+		id: 'planetscale',
+		link: '/docs/metrics-management/opentelemetry-planetscale/',
+	},
+	{
+		dataSource: 'hermes-agent',
+		label: 'Hermes Agent',
+		imgUrl: llmMonitoringUrl,
+		tags: ['LLM Monitoring'],
+		module: 'apm',
+		relatedSearchKeywords: [
+			'ai agent monitoring',
+			'hermes',
+			'hermes agent',
+			'hermes agent monitoring',
+			'hermes agent observability',
+			'hermes monitoring',
+			'llm monitoring',
+			'monitoring',
+			'nous research',
+			'observability',
+			'opentelemetry hermes',
+		],
+		id: 'hermes-agent',
+		link: '/docs/hermes-monitoring/',
+	},
 	{
 		dataSource: 'convex-logs',
 		label: 'Convex Logs',

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/AIAssistantPage/AIAssistantPage.tsx

@@ -26,8 +26,8 @@ export default function AIAssistantPage(): JSX.Element {
 
 	// Skip the mount-time Opened fire when the user expanded an already-open
 	// drawer/modal — that surface already emitted Opened with the right source.
-	// Router state (vs a module flag) survives StrictMode double-mount and
-	// aborted navigations.
+	// Router state (vs a module flag) survives page remounts and aborted
+	// navigations.
 	const fromInApp = location.state?.fromInApp === true;
 	useEffect(() => {
 		if (fromInApp) {
@@ -52,18 +52,34 @@ export default function AIAssistantPage(): JSX.Element {
 		(s) => s.startNewConversation,
 	);
 
-	// Keep a ref so the effect can read latest conversations without re-firing
-	// when startNewConversation mutates the store mid-effect.
+	// Keep refs so the effect can read the latest store state without re-firing
+	// when it mutates the store mid-effect (it only depends on the URL param).
 	const conversationsRef = useRef(conversations);
 	conversationsRef.current = conversations;
+	const activeConversationIdRef = useRef(activeConversationId);
+	activeConversationIdRef.current = activeConversationId;
 
 	useEffect(() => {
-		if (conversationsRef.current[conversationId]) {
+		// URL points at a known conversation → just activate it.
+		if (conversationId && conversationsRef.current[conversationId]) {
 			setActiveConversation(conversationId);
-		} else {
-			const newId = startNewConversation();
-			history.replace(ROUTES.AI_ASSISTANT.replace(':conversationId', newId));
+			return;
 		}
+
+		// The URL has no usable conversation id (bare `/ai-assistant`, or a stale
+		// param). Prefer resuming the active conversation — including the
+		// rehydrating placeholder for the persisted thread — over minting a new
+		// one. This is what stops a throwaway blank chat from flashing as a
+		// second thread during load, and stops a duplicate when the page
+		// remounts during startup route churn (the active id is already set, so
+		// we resume instead of create). Starting fresh is the last resort, only
+		// when there is genuinely nothing to resume.
+		const activeId = activeConversationIdRef.current;
+		const resumeId =
+			activeId && conversationsRef.current[activeId]
+				? activeId
+				: startNewConversation();
+		history.replace(ROUTES.AI_ASSISTANT.replace(':conversationId', resumeId));
 		// Only re-run when the URL param changes, not when conversations mutates.
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [conversationId]);

frontend/src/pages/AIAssistantPage/__tests__/AIAssistantPage.test.tsx

@@ -0,0 +1,181 @@
+import { MemoryRouter, Route } from 'react-router-dom';
+// eslint-disable-next-line no-restricted-imports
+import { render } from '@testing-library/react';
+import ROUTES from 'constants/routes';
+import { useAIAssistantStore } from 'container/AIAssistant/store/useAIAssistantStore';
+
+jest.mock('api/common/logEvent', () => ({
+	__esModule: true,
+	default: jest.fn(),
+}));
+
+jest.mock('container/AIAssistant/ConversationView', () => ({
+	__esModule: true,
+	default: (): JSX.Element => <div data-testid="conversation-view" />,
+}));
+
+jest.mock('container/AIAssistant/components/ConversationsList', () => ({
+	__esModule: true,
+	default: (): JSX.Element => <div data-testid="conversations-list" />,
+}));
+
+jest.mock('components/Noz/Noz', () => ({
+	__esModule: true,
+	default: (): JSX.Element => <div data-testid="noz" />,
+}));
+
+jest.mock('container/AIAssistant/hooks/useAIAssistantAnalyticsContext', () => ({
+	normalizePage: (page: string): string => page,
+	useAIAssistantAnalyticsContext: (): unknown => ({ mode: 'page' }),
+}));
+
+// eslint-disable-next-line import/first
+import AIAssistantPage from '../AIAssistantPage';
+
+function renderAt(entry: string): { unmount: () => void } {
+	return render(
+		<MemoryRouter initialEntries={[entry]}>
+			<Route
+				exact
+				path={[ROUTES.AI_ASSISTANT_BASE, ROUTES.AI_ASSISTANT]}
+				component={AIAssistantPage}
+			/>
+		</MemoryRouter>,
+	);
+}
+
+function renderAtBase(): { unmount: () => void } {
+	return renderAt(ROUTES.AI_ASSISTANT_BASE);
+}
+
+function conversationCount(): number {
+	return Object.keys(useAIAssistantStore.getState().conversations).length;
+}
+
+function conversationIds(): string[] {
+	return Object.keys(useAIAssistantStore.getState().conversations);
+}
+
+function activeId(): string | null {
+	return useAIAssistantStore.getState().activeConversationId;
+}
+
+describe('AIAssistantPage', () => {
+	beforeEach(() => {
+		useAIAssistantStore.setState({
+			conversations: {},
+			streams: {},
+			activeConversationId: null,
+		});
+	});
+
+	it('opens exactly one conversation when navigating to /ai-assistant', () => {
+		const { unmount } = renderAtBase();
+
+		expect(conversationCount()).toBe(1);
+
+		unmount();
+	});
+
+	it('does not stack a second conversation when the page remounts at the bare URL (route churn)', () => {
+		// First mount at `/ai-assistant` creates one blank conversation and
+		// redirects to `/ai-assistant/:id`.
+		const { unmount } = renderAtBase();
+		expect(conversationCount()).toBe(1);
+		const firstId = conversationIds()[0];
+
+		// Startup route-list churn unmounts and remounts the page while the URL
+		// is momentarily back at the bare `/ai-assistant`. This previously
+		// created a second blank conversation — now it reuses the first.
+		unmount();
+		const { unmount: unmount2 } = renderAtBase();
+
+		expect(conversationCount()).toBe(1);
+		// The surviving conversation is the original one, resumed — not a fresh mint.
+		expect(conversationIds()).toStrictEqual([firstId]);
+		expect(activeId()).toBe(firstId);
+
+		unmount2();
+	});
+
+	it('activates the conversation named in the URL without creating a new one', () => {
+		useAIAssistantStore.setState({
+			conversations: {
+				existing: {
+					id: 'existing',
+					messages: [],
+					createdAt: 1,
+					updatedAt: 1,
+				},
+			},
+			streams: {},
+			activeConversationId: null,
+		});
+
+		const { unmount } = renderAt(
+			ROUTES.AI_ASSISTANT.replace(':conversationId', 'existing'),
+		);
+
+		expect(conversationCount()).toBe(1);
+		expect(activeId()).toBe('existing');
+
+		unmount();
+	});
+
+	it('resumes the active conversation on /ai-assistant/new instead of minting a new one', () => {
+		// The sidenav only routes to `/ai-assistant/new` as a fallback, but if an
+		// active conversation exists the page must resume it rather than spawn a
+		// throwaway blank thread for the unknown "new" param.
+		useAIAssistantStore.setState({
+			conversations: {
+				active: {
+					id: 'active',
+					messages: [],
+					createdAt: 1,
+					updatedAt: 1,
+				},
+			},
+			streams: {},
+			activeConversationId: 'active',
+		});
+
+		const { unmount } = renderAt(
+			ROUTES.AI_ASSISTANT.replace(':conversationId', 'new'),
+		);
+
+		expect(conversationCount()).toBe(1);
+		expect(conversationIds()).toStrictEqual(['active']);
+		expect(activeId()).toBe('active');
+
+		unmount();
+	});
+
+	it('resumes the persisted (hydrating) conversation during load instead of creating a second', () => {
+		// Simulates `onRehydrateStorage` priming the persisted active
+		// conversation as a hydrating placeholder before `fetchThreads` resolves.
+		useAIAssistantStore.setState({
+			conversations: {
+				persisted: {
+					id: 'persisted',
+					messages: [],
+					createdAt: 1,
+					updatedAt: 1,
+					isHydrating: true,
+				},
+			},
+			streams: {},
+			activeConversationId: 'persisted',
+		});
+
+		const { unmount } = renderAtBase();
+
+		// Opening the bare URL must resume the persisted conversation, not mint a
+		// throwaway blank alongside it (which flashed as a 2nd thread during load).
+		expect(conversationCount()).toBe(1);
+		expect(
+			Object.keys(useAIAssistantStore.getState().conversations),
+		).toStrictEqual(['persisted']);
+
+		unmount();
+	});
+});

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;