test(e2e): cover alert edit-page threshold persistence (#12227)

* test(e2e): cover alert edit-page threshold persistence

Adds an E2E test that seeds a notification channel + v2 threshold alert
(target 245) via API, opens the alert overview/edit page, and asserts the
condition editor shows the persisted threshold value once loaded.

New helper tests/e2e/helpers/alerts.ts (channel/alert seed + delete +
navigate) mirrors the existing dashboards seeding pattern; the test lives
alongside the existing tabs test in tests/e2e/tests/alerts/alerts.spec.ts.

Verified against a local --with-web stack (passes with the loaded value,
fails when the edit page resets it).

* chore: pr review fixes

.devenv/docker/clickhouse/compose.yaml

@@ -1,6 +1,6 @@
 services:
   init-clickhouse:
-    image: clickhouse/clickhouse-server:25.5.6
+    image: clickhouse/clickhouse-server:25.12.5
     container_name: init-clickhouse
     command:
       - bash
@@ -18,7 +18,7 @@ services:
     volumes:
       - ${PWD}/fs/tmp/var/lib/clickhouse/user_scripts/:/var/lib/clickhouse/user_scripts/
   clickhouse:
-    image: clickhouse/clickhouse-server:25.5.6
+    image: clickhouse/clickhouse-server:25.12.5
     container_name: clickhouse
     volumes:
       - ${PWD}/fs/etc/clickhouse-server/config.d/config.xml:/etc/clickhouse-server/config.d/config.xml
@@ -67,7 +67,7 @@ services:
       timeout: 5s
       retries: 3
   telemetrystore-migrator:
-    image: signoz/signoz-otel-collector:v0.142.0
+    image: signoz/signoz-otel-collector:v0.144.6
     container_name: telemetrystore-migrator
     environment:
       - SIGNOZ_OTEL_COLLECTOR_CLICKHOUSE_DSN=tcp://clickhouse:9000

.github/CODEOWNERS

@@ -189,7 +189,9 @@ go.mod @therealpandey
 ## Infrastructure Monitoring
 /frontend/src/pages/InfrastructureMonitoring/ @SigNoz/pulse-frontend
 /frontend/src/container/InfraMonitoringHosts/ @SigNoz/pulse-frontend
+/frontend/src/container/InfraMonitoringHostsV2/ @SigNoz/pulse-frontend
 /frontend/src/container/InfraMonitoringK8s/ @SigNoz/pulse-frontend
+/frontend/src/container/InfraMonitoringK8sV2/ @SigNoz/pulse-frontend
 
 ## Alerts
 /frontend/src/pages/AlertList/ @SigNoz/pulse-frontend

.github/workflows/e2eci.yaml

@@ -45,15 +45,9 @@ jobs:
       (github.event_name == 'pull_request_target' && contains(github.event.pull_request.labels.*.name, 'safe-to-test'))) && contains(github.event.pull_request.labels.*.name, 'safe-to-e2e')
     runs-on: ubuntu-latest
     timeout-minutes: 30
-    env:
-      SIGNOZ_BUILDX_GHA_SCOPE: signoz-e2e
     steps:
       - name: checkout
         uses: actions/checkout@v4
-      - name: setup-buildx
-        uses: docker/setup-buildx-action@v3
-      - name: expose-gha-runtime
-        uses: crazy-max/ghaction-github-runtime@04d248b84655b509d8c44dc1d6f990c879747487
       - name: python
         uses: actions/setup-python@v5
         with:

.github/workflows/integrationci.yaml

@@ -54,37 +54,34 @@ jobs:
           - querierscalar
           - queriercommon
           - rawexportdata
+          - querierauthz
           - role
           - rootuser
           - serviceaccount
+          - spanmapper
           - querier_json_body
           - querier_skip_resource_fingerprint
           - ttl
+          - clickhousecluster
+          - metricreduction
         sqlstore-provider:
           - postgres
           - sqlite
         sqlite-mode:
           - wal
         clickhouse-version:
-          - 25.5.6
           - 25.12.5
         schema-migrator-version:
-          - v0.144.3
+          - v0.144.6
         postgres-version:
           - 15
     if: |
       ((github.event_name == 'pull_request' && ! github.event.pull_request.head.repo.fork && github.event.pull_request.user.login != 'dependabot[bot]' && ! contains(github.event.pull_request.labels.*.name, 'safe-to-test')) ||
       (github.event_name == 'pull_request_target' && contains(github.event.pull_request.labels.*.name, 'safe-to-test'))) && contains(github.event.pull_request.labels.*.name, 'safe-to-integrate')
     runs-on: ubuntu-latest
-    env:
-      SIGNOZ_BUILDX_GHA_SCOPE: signoz-integration
     steps:
       - name: checkout
         uses: actions/checkout@v4
-      - name: setup-buildx
-        uses: docker/setup-buildx-action@v3
-      - name: expose-gha-runtime
-        uses: crazy-max/ghaction-github-runtime@04d248b84655b509d8c44dc1d6f990c879747487
       - name: python
         uses: actions/setup-python@v5
         with:

Makefile

@@ -34,8 +34,6 @@ DOCKER_BUILD_ARCHS_ENTERPRISE 	= $(addprefix docker-build-enterprise-,$(ARCHS))
 DOCKERFILE_ENTERPRISE 			= $(SRC)/cmd/enterprise/Dockerfile
 DOCKER_REGISTRY_ENTERPRISE 		?= docker.io/signoz/signoz
 JS_BUILD_CONTEXT 				= $(SRC)/frontend
-DOCKER_BUILDX_PRUNE_FLAGS 		?= --force
-SIGNOZ_INTEGRATION_BUILD_CACHE_DIR 	?= /tmp/signoz-integration-buildx-cache
 
 ##############################################################
 # directories
@@ -212,7 +210,7 @@ py-lint: ## Run ruff check across the shared tests project
 
 .PHONY: py-test-setup
 py-test-setup: ## Bring up the shared SigNoz backend used by integration and e2e tests
-	@cd tests && SIGNOZ_INTEGRATION_BUILD_CACHE_DIR=$(SIGNOZ_INTEGRATION_BUILD_CACHE_DIR) uv run pytest --basetemp=./tmp/ -vv --reuse --capture=no integration/bootstrap/setup.py::test_setup
+	@cd tests && uv run pytest --basetemp=./tmp/ -vv --reuse --capture=no integration/bootstrap/setup.py::test_setup
 
 .PHONY: py-test-teardown
 py-test-teardown: ## Tear down the shared SigNoz backend
@@ -231,21 +229,6 @@ py-clean: ## Clear all pycache and pytest cache from tests directory recursively
 	@find tests -type f -name "*.pyo" -delete 2>/dev/null || true
 	@echo ">> python cache cleaned"
 
-.PHONY: py-docker-clean
-py-docker-clean: ## Remove Docker image and build caches used by python integration tests
-	@echo ">> removing SigNoz integration test image"
-	@docker image rm -f signoz:integration 2>/dev/null || true
-	@echo ">> removing local integration buildx cache directories"
-	@rm -rf $(SIGNOZ_INTEGRATION_BUILD_CACHE_DIR) $(SIGNOZ_INTEGRATION_BUILD_CACHE_DIR)-next
-	@echo ">> pruning docker buildx cache with flags: $(DOCKER_BUILDX_PRUNE_FLAGS)"
-	@docker buildx prune $(DOCKER_BUILDX_PRUNE_FLAGS)
-
-.PHONY: py-test-clean
-py-test-clean: ## Tear down python test stack and remove python/Docker test caches
-	@$(MAKE) py-test-teardown || true
-	@$(MAKE) py-clean
-	@$(MAKE) py-docker-clean
-
 
 ##############################################################
 # generate commands

cmd/enterprise/Dockerfile.integration

@@ -1,5 +1,3 @@
-# syntax=docker/dockerfile:1.13
-
 FROM golang:1.25-bookworm
 
 ARG OS="linux"
@@ -23,8 +21,7 @@ RUN set -eux; \
 
 COPY go.mod go.sum ./
 
-RUN --mount=type=cache,target=/go/pkg/mod \
-	go mod download
+RUN go mod download
 
 COPY ./cmd/ ./cmd/
 COPY ./ee/ ./ee/
@@ -32,9 +29,7 @@ COPY ./pkg/ ./pkg/
 COPY ./templates /root/templates
 
 COPY Makefile Makefile
-RUN --mount=type=cache,target=/go/pkg/mod \
-	--mount=type=cache,target=/root/.cache/go-build \
-	TARGET_DIR=/root ARCHS=${TARGETARCH} ZEUS_URL=${ZEUSURL} LICENSE_URL=${ZEUSURL}/api/v1 make go-build-enterprise-race
+RUN TARGET_DIR=/root ARCHS=${TARGETARCH} ZEUS_URL=${ZEUSURL} LICENSE_URL=${ZEUSURL}/api/v1 make go-build-enterprise-race
 RUN mv /root/linux-${TARGETARCH}/signoz /root/signoz
 
 RUN chmod 755 /root /root/signoz

cmd/enterprise/Dockerfile.with-web.integration

@@ -1,5 +1,3 @@
-# syntax=docker/dockerfile:1.13
-
 FROM node:22-bookworm AS build
 
 WORKDIR /opt/
@@ -32,8 +30,7 @@ RUN set -eux; \
 
 COPY go.mod go.sum ./
 
-RUN --mount=type=cache,target=/go/pkg/mod \
-	go mod download
+RUN go mod download
 
 COPY ./cmd/ ./cmd/
 COPY ./ee/ ./ee/
@@ -41,9 +38,7 @@ COPY ./pkg/ ./pkg/
 COPY ./templates /root/templates
 
 COPY Makefile Makefile
-RUN --mount=type=cache,target=/go/pkg/mod \
-	--mount=type=cache,target=/root/.cache/go-build \
-	TARGET_DIR=/root ARCHS=${TARGETARCH} ZEUS_URL=${ZEUSURL} LICENSE_URL=${ZEUSURL}/api/v1 make go-build-enterprise-race
+RUN TARGET_DIR=/root ARCHS=${TARGETARCH} ZEUS_URL=${ZEUSURL} LICENSE_URL=${ZEUSURL}/api/v1 make go-build-enterprise-race
 RUN mv /root/linux-${TARGETARCH}/signoz /root/signoz
 
 COPY --from=build /opt/build ./web/

conf/example.yaml

@@ -9,6 +9,11 @@ global:
   # the path component (e.g. /signoz in https://example.com/signoz) is used
   # as the base path for all HTTP routes (both API and web frontend).
   external_url: <unset>
+  # origins (scheme://host[:port], no path) allowed as login redirect targets. include
+  # the origin the signoz ui is served on. when not configured, redirect targets are
+  # not validated.
+  # allowed_origins:
+  #   - https://signoz.example.com
   # the url where the SigNoz backend receives telemetry data (traces, metrics, logs) from instrumented applications.
   ingestion_url: <unset>
   # the url of the SigNoz MCP server. when unset, the MCP settings page is hidden in the frontend.
@@ -129,7 +134,7 @@ sqlstore:
     # The timeout for the sqlite database to wait for a lock.
     busy_timeout: 10s
     # The default transaction locking behavior. Supported values: deferred, immediate, exclusive.
-    transaction_mode: deferred
+    transaction_mode: immediate
 
 ##################### APIServer #####################
 apiserver:

docs/api/openapi.yml

@@ -543,6 +543,31 @@ components:
       required:
       - id
       type: object
+    AuthtypesGettableRole:
+      properties:
+        createdAt:
+          format: date-time
+          type: string
+        description:
+          type: string
+        id:
+          type: string
+        name:
+          type: string
+        orgId:
+          type: string
+        type:
+          type: string
+        updatedAt:
+          format: date-time
+          type: string
+      required:
+      - id
+      - name
+      - description
+      - type
+      - orgId
+      type: object
     AuthtypesGettableToken:
       properties:
         accessToken:
@@ -694,43 +719,6 @@ components:
       - detach
       type: string
     AuthtypesRole:
-      properties:
-        createdAt:
-          format: date-time
-          type: string
-        description:
-          type: string
-        id:
-          type: string
-        name:
-          type: string
-        orgId:
-          type: string
-        type:
-          type: string
-        updatedAt:
-          format: date-time
-          type: string
-      required:
-      - id
-      - name
-      - description
-      - type
-      - orgId
-      type: object
-    AuthtypesRoleMapping:
-      properties:
-        defaultRole:
-          type: string
-        groupMappings:
-          additionalProperties:
-            type: string
-          nullable: true
-          type: object
-        useRoleAttribute:
-          type: boolean
-      type: object
-    AuthtypesRoleWithTransactionGroups:
       properties:
         createdAt:
           format: date-time
@@ -758,6 +746,18 @@ components:
       - orgId
       - transactionGroups
       type: object
+    AuthtypesRoleMapping:
+      properties:
+        defaultRole:
+          type: string
+        groupMappings:
+          additionalProperties:
+            type: string
+          nullable: true
+          type: object
+        useRoleAttribute:
+          type: boolean
+      type: object
     AuthtypesSamlConfig:
       properties:
         attributeMapping:
@@ -1494,7 +1494,8 @@ components:
       - cosmosdb
       - cassandradb
       - redis
-      - cloudsql
+      - cloudsql_postgres
+      - memorystore_redis
       type: string
     CloudintegrationtypesServiceMetadata:
       properties:
@@ -2596,19 +2597,6 @@ components:
         repeatVariable:
           type: string
       type: object
-    DashboardLink:
-      properties:
-        name:
-          type: string
-        renderVariables:
-          type: boolean
-        targetBlank:
-          type: boolean
-        tooltip:
-          type: string
-        url:
-          type: string
-      type: object
     DashboardtypesAxes:
       properties:
         isLogScale:
@@ -2747,6 +2735,7 @@ components:
         datasources:
           additionalProperties:
             $ref: '#/components/schemas/DashboardtypesDatasourceSpec'
+          nullable: true
           type: object
         display:
           $ref: '#/components/schemas/DashboardtypesDisplay'
@@ -2758,7 +2747,8 @@ components:
           type: array
         links:
           items:
-            $ref: '#/components/schemas/DashboardLink'
+            $ref: '#/components/schemas/DashboardtypesLink'
+          nullable: true
           type: array
         panels:
           additionalProperties:
@@ -3029,6 +3019,19 @@ components:
       - solid
       - dashed
       type: string
+    DashboardtypesLink:
+      properties:
+        name:
+          type: string
+        renderVariables:
+          type: boolean
+        targetBlank:
+          type: boolean
+        tooltip:
+          type: string
+        url:
+          type: string
+      type: object
     DashboardtypesListOrder:
       enum:
       - asc
@@ -3039,6 +3042,7 @@ components:
         selectFields:
           items:
             $ref: '#/components/schemas/TelemetrytypesTelemetryFieldKey'
+          nullable: true
           type: array
       type: object
     DashboardtypesListSort:
@@ -3148,6 +3152,8 @@ components:
           type: string
         image:
           type: string
+        legacy:
+          type: boolean
         locked:
           type: boolean
         name:
@@ -3180,6 +3186,7 @@ components:
       - name
       - tags
       - spec
+      - legacy
       - pinned
       type: object
     DashboardtypesListedDashboardV2:
@@ -3193,6 +3200,8 @@ components:
           type: string
         image:
           type: string
+        legacy:
+          type: boolean
         locked:
           type: boolean
         name:
@@ -3223,6 +3232,7 @@ components:
       - name
       - tags
       - spec
+      - legacy
       type: object
     DashboardtypesListedDashboardV2Spec:
       properties:
@@ -3382,7 +3392,8 @@ components:
           $ref: '#/components/schemas/DashboardtypesDisplay'
         links:
           items:
-            $ref: '#/components/schemas/DashboardLink'
+            $ref: '#/components/schemas/DashboardtypesLink'
+          nullable: true
           type: array
         plugin:
           $ref: '#/components/schemas/DashboardtypesPanelPlugin'
@@ -4253,6 +4264,34 @@ components:
           type: number
         clusterName:
           type: string
+        counts:
+          properties:
+            daemonSets:
+              format: int64
+              type: integer
+            deployments:
+              format: int64
+              type: integer
+            jobs:
+              format: int64
+              type: integer
+            namespaces:
+              format: int64
+              type: integer
+            nodes:
+              format: int64
+              type: integer
+            statefulSets:
+              format: int64
+              type: integer
+          required:
+          - nodes
+          - namespaces
+          - deployments
+          - daemonSets
+          - jobs
+          - statefulSets
+          type: object
         meta:
           additionalProperties:
             type: string
@@ -4273,6 +4312,7 @@ components:
       - nodeCountsByReadiness
       - podCountsByPhase
       - podCountsByStatus
+      - counts
       - meta
       type: object
     InframonitoringtypesClusters:
@@ -4478,10 +4518,14 @@ components:
             type: string
           nullable: true
           type: object
+        misscheduledNodes:
+          type: integer
         podCountsByPhase:
           $ref: '#/components/schemas/InframonitoringtypesPodCountsByPhase'
         podCountsByStatus:
           $ref: '#/components/schemas/InframonitoringtypesPodCountsByStatus'
+        readyNodes:
+          type: integer
       required:
       - daemonSetName
       - daemonSetCPU
@@ -4492,6 +4536,8 @@ components:
       - daemonSetMemoryLimit
       - desiredNodes
       - currentNodes
+      - readyNodes
+      - misscheduledNodes
       - podCountsByPhase
       - podCountsByStatus
       - meta
@@ -4788,6 +4834,26 @@ components:
       type: object
     InframonitoringtypesNamespaceRecord:
       properties:
+        counts:
+          properties:
+            daemonSets:
+              format: int64
+              type: integer
+            deployments:
+              format: int64
+              type: integer
+            jobs:
+              format: int64
+              type: integer
+            statefulSets:
+              format: int64
+              type: integer
+          required:
+          - deployments
+          - daemonSets
+          - jobs
+          - statefulSets
+          type: object
         meta:
           additionalProperties:
             type: string
@@ -4811,6 +4877,7 @@ components:
       - namespaceMemory
       - podCountsByPhase
       - podCountsByStatus
+      - counts
       - meta
       type: object
     InframonitoringtypesNamespaces:
@@ -6271,6 +6338,7 @@ components:
       - delta
       - cumulative
       - unspecified
+      - ""
       type: string
     MetrictypesTimeAggregation:
       enum:
@@ -6283,6 +6351,7 @@ components:
       - count_distinct
       - rate
       - increase
+      - ""
       type: string
     MetrictypesType:
       enum:
@@ -6490,6 +6559,7 @@ components:
         args:
           items:
             $ref: '#/components/schemas/Querybuildertypesv5FunctionArg'
+          nullable: true
           type: array
         name:
           $ref: '#/components/schemas/Querybuildertypesv5FunctionName'
@@ -6660,6 +6730,7 @@ components:
         functions:
           items:
             $ref: '#/components/schemas/Querybuildertypesv5Function'
+          nullable: true
           type: array
         having:
           $ref: '#/components/schemas/Querybuildertypesv5Having'
@@ -6672,6 +6743,7 @@ components:
         order:
           items:
             $ref: '#/components/schemas/Querybuildertypesv5OrderBy'
+          nullable: true
           type: array
       type: object
     Querybuildertypesv5QueryBuilderQueryGithubComSigNozSignozPkgTypesQuerybuildertypesQuerybuildertypesv5LogAggregation:
@@ -6679,6 +6751,7 @@ components:
         aggregations:
           items:
             $ref: '#/components/schemas/Querybuildertypesv5LogAggregation'
+          nullable: true
           type: array
         cursor:
           type: string
@@ -6689,10 +6762,12 @@ components:
         functions:
           items:
             $ref: '#/components/schemas/Querybuildertypesv5Function'
+          nullable: true
           type: array
         groupBy:
           items:
             $ref: '#/components/schemas/Querybuildertypesv5GroupByKey'
+          nullable: true
           type: array
         having:
           $ref: '#/components/schemas/Querybuildertypesv5Having'
@@ -6709,14 +6784,17 @@ components:
         order:
           items:
             $ref: '#/components/schemas/Querybuildertypesv5OrderBy'
+          nullable: true
           type: array
         secondaryAggregations:
           items:
             $ref: '#/components/schemas/Querybuildertypesv5SecondaryAggregation'
+          nullable: true
           type: array
         selectFields:
           items:
             $ref: '#/components/schemas/TelemetrytypesTelemetryFieldKey'
+          nullable: true
           type: array
         signal:
           enum:
@@ -6734,6 +6812,7 @@ components:
         aggregations:
           items:
             $ref: '#/components/schemas/Querybuildertypesv5MetricAggregation'
+          nullable: true
           type: array
         cursor:
           type: string
@@ -6744,10 +6823,12 @@ components:
         functions:
           items:
             $ref: '#/components/schemas/Querybuildertypesv5Function'
+          nullable: true
           type: array
         groupBy:
           items:
             $ref: '#/components/schemas/Querybuildertypesv5GroupByKey'
+          nullable: true
           type: array
         having:
           $ref: '#/components/schemas/Querybuildertypesv5Having'
@@ -6764,14 +6845,17 @@ components:
         order:
           items:
             $ref: '#/components/schemas/Querybuildertypesv5OrderBy'
+          nullable: true
           type: array
         secondaryAggregations:
           items:
             $ref: '#/components/schemas/Querybuildertypesv5SecondaryAggregation'
+          nullable: true
           type: array
         selectFields:
           items:
             $ref: '#/components/schemas/TelemetrytypesTelemetryFieldKey'
+          nullable: true
           type: array
         signal:
           enum:
@@ -6789,6 +6873,7 @@ components:
         aggregations:
           items:
             $ref: '#/components/schemas/Querybuildertypesv5TraceAggregation'
+          nullable: true
           type: array
         cursor:
           type: string
@@ -6799,10 +6884,12 @@ components:
         functions:
           items:
             $ref: '#/components/schemas/Querybuildertypesv5Function'
+          nullable: true
           type: array
         groupBy:
           items:
             $ref: '#/components/schemas/Querybuildertypesv5GroupByKey'
+          nullable: true
           type: array
         having:
           $ref: '#/components/schemas/Querybuildertypesv5Having'
@@ -6819,14 +6906,17 @@ components:
         order:
           items:
             $ref: '#/components/schemas/Querybuildertypesv5OrderBy'
+          nullable: true
           type: array
         secondaryAggregations:
           items:
             $ref: '#/components/schemas/Querybuildertypesv5SecondaryAggregation'
+          nullable: true
           type: array
         selectFields:
           items:
             $ref: '#/components/schemas/TelemetrytypesTelemetryFieldKey'
+          nullable: true
           type: array
         signal:
           enum:
@@ -6844,6 +6934,7 @@ components:
         aggregations:
           items:
             $ref: '#/components/schemas/Querybuildertypesv5TraceAggregation'
+          nullable: true
           type: array
         cursor:
           type: string
@@ -6856,10 +6947,12 @@ components:
         functions:
           items:
             $ref: '#/components/schemas/Querybuildertypesv5Function'
+          nullable: true
           type: array
         groupBy:
           items:
             $ref: '#/components/schemas/Querybuildertypesv5GroupByKey'
+          nullable: true
           type: array
         having:
           $ref: '#/components/schemas/Querybuildertypesv5Having'
@@ -6874,12 +6967,14 @@ components:
         order:
           items:
             $ref: '#/components/schemas/Querybuildertypesv5OrderBy'
+          nullable: true
           type: array
         returnSpansFrom:
           type: string
         selectFields:
           items:
             $ref: '#/components/schemas/TelemetrytypesTelemetryFieldKey'
+          nullable: true
           type: array
         stepInterval:
           $ref: '#/components/schemas/Querybuildertypesv5Step'
@@ -7119,6 +7214,7 @@ components:
         groupBy:
           items:
             $ref: '#/components/schemas/Querybuildertypesv5GroupByKey'
+          nullable: true
           type: array
         limit:
           type: integer
@@ -7127,6 +7223,7 @@ components:
         order:
           items:
             $ref: '#/components/schemas/Querybuildertypesv5OrderBy'
+          nullable: true
           type: array
         stepInterval:
           $ref: '#/components/schemas/Querybuildertypesv5Step'
@@ -7394,9 +7491,11 @@ components:
         op:
           $ref: '#/components/schemas/RuletypesCompareOperator'
         recoveryTarget:
+          format: double
           nullable: true
           type: number
         target:
+          format: double
           nullable: true
           type: number
         targetUnit:
@@ -7507,6 +7606,7 @@ components:
         groupBy:
           items:
             type: string
+          nullable: true
           type: array
         newGroupEvalDelay:
           type: string
@@ -7578,6 +7678,7 @@ components:
         alertStates:
           items:
             $ref: '#/components/schemas/RuletypesAlertState'
+          nullable: true
           type: array
         enabled:
           type: boolean
@@ -7680,6 +7781,7 @@ components:
         selectedQueryName:
           type: string
         target:
+          format: double
           nullable: true
           type: number
         targetUnit:
@@ -7983,6 +8085,28 @@ components:
       required:
       - items
       type: object
+    SpantypesGettableSpanMapperTest:
+      properties:
+        collectorLogs:
+          items:
+            type: string
+          nullable: true
+          type: array
+        spans:
+          items:
+            $ref: '#/components/schemas/SpantypesSpanMapperTestSpan'
+          nullable: true
+          type: array
+      type: object
+    SpantypesGettableSpanMappers:
+      properties:
+        items:
+          items:
+            $ref: '#/components/schemas/SpantypesSpanMapper'
+          type: array
+      required:
+      - items
+      type: object
     SpantypesGettableTraceAggregations:
       properties:
         aggregations:
@@ -8070,6 +8194,39 @@ components:
       - name
       - condition
       type: object
+    SpantypesPostableSpanMapperTest:
+      properties:
+        groups:
+          items:
+            $ref: '#/components/schemas/SpantypesPostableSpanMapperTestGroup'
+          nullable: true
+          type: array
+        spans:
+          items:
+            $ref: '#/components/schemas/SpantypesSpanMapperTestSpan'
+          nullable: true
+          type: array
+      required:
+      - spans
+      - groups
+      type: object
+    SpantypesPostableSpanMapperTestGroup:
+      properties:
+        condition:
+          $ref: '#/components/schemas/SpantypesSpanMapperGroupCondition'
+        enabled:
+          type: boolean
+        mappers:
+          items:
+            $ref: '#/components/schemas/SpantypesPostableSpanMapper'
+          nullable: true
+          type: array
+        name:
+          type: string
+      required:
+      - name
+      - condition
+      type: object
     SpantypesPostableTraceAggregations:
       properties:
         aggregations:
@@ -8135,7 +8292,7 @@ components:
           type: boolean
         fieldContext:
           $ref: '#/components/schemas/SpantypesFieldContext'
-        group_id:
+        groupId:
           type: string
         id:
           type: string
@@ -8148,7 +8305,7 @@ components:
           type: string
       required:
       - id
-      - group_id
+      - groupId
       - name
       - fieldContext
       - config
@@ -8231,6 +8388,17 @@ components:
       - operation
       - priority
       type: object
+    SpantypesSpanMapperTestSpan:
+      properties:
+        attributes:
+          additionalProperties: {}
+          nullable: true
+          type: object
+        resource:
+          additionalProperties: {}
+          nullable: true
+          type: object
+      type: object
     SpantypesUpdatableSpanMapper:
       properties:
         config:
@@ -8448,6 +8616,7 @@ components:
       - resource
       - attribute
       - body
+      - ""
       type: string
     TelemetrytypesFieldDataType:
       enum:
@@ -8456,6 +8625,7 @@ components:
       - float64
       - int64
       - number
+      - ""
       type: string
     TelemetrytypesGettableFieldKeys:
       properties:
@@ -8487,10 +8657,12 @@ components:
       - traces
       - logs
       - metrics
+      - ""
       type: string
     TelemetrytypesSource:
       enum:
       - meter
+      - ""
       type: string
     TelemetrytypesTelemetryFieldKey:
       properties:
@@ -12007,7 +12179,7 @@ paths:
                 properties:
                   data:
                     items:
-                      $ref: '#/components/schemas/AuthtypesRole'
+                      $ref: '#/components/schemas/AuthtypesGettableRole'
                     type: array
                   status:
                     type: string
@@ -12191,7 +12363,7 @@ paths:
               schema:
                 properties:
                   data:
-                    $ref: '#/components/schemas/AuthtypesRoleWithTransactionGroups'
+                    $ref: '#/components/schemas/AuthtypesRole'
                   status:
                     type: string
                 required:
@@ -13727,7 +13899,7 @@ paths:
               schema:
                 properties:
                   data:
-                    $ref: '#/components/schemas/SpantypesGettableSpanMapperGroups'
+                    $ref: '#/components/schemas/SpantypesGettableSpanMappers'
                   status:
                     type: string
                 required:
@@ -13960,6 +14132,69 @@ paths:
       summary: Update a span mapper
       tags:
       - spanmapper
+  /api/v1/span_mapper_groups/test:
+    post:
+      deprecated: false
+      description: Tests how span mappers would transform sample spans
+      operationId: TestSpanMappers
+      requestBody:
+        content:
+          application/json:
+            schema:
+              $ref: '#/components/schemas/SpantypesPostableSpanMapperTest'
+      responses:
+        "200":
+          content:
+            application/json:
+              schema:
+                properties:
+                  data:
+                    $ref: '#/components/schemas/SpantypesGettableSpanMapperTest'
+                  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:
+        - VIEWER
+      - tokenizer:
+        - VIEWER
+      summary: Test span mappers against sample spans
+      tags:
+      - spanmapper
   /api/v1/stats:
     get:
       deprecated: false
@@ -15990,21 +16225,24 @@ paths:
         daemonSetCPULimit, daemonSetMemoryRequest, daemonSetMemoryLimit). Each row
         also reports the latest known node-level counters from kube-state-metrics:
         desiredNodes (k8s.daemonset.desired_scheduled_nodes, the number of nodes the
-        daemonset wants to run on) and currentNodes (k8s.daemonset.current_scheduled_nodes,
-        the number of nodes the daemonset currently runs on) — note these are node
-        counts, not pod counts. It also reports per-group podCountsByPhase ({ pending,
-        running, succeeded, failed, unknown } from each pod''s latest k8s.pod.phase
-        value). Each daemonset includes metadata attributes (k8s.daemonset.name, k8s.namespace.name,
-        k8s.cluster.name). The response type is ''list'' for the default k8s.daemonset.name
-        grouping or ''grouped_list'' for custom groupBy keys; in both modes every
-        row aggregates pods owned by daemonsets in the group. Supports filtering via
-        a filter expression, custom groupBy, ordering by cpu / cpu_request / cpu_limit
-        / memory / memory_request / memory_limit / desired_nodes / current_nodes,
+        daemonset wants to run on), currentNodes (k8s.daemonset.current_scheduled_nodes,
+        the number of nodes the daemonset currently runs on), readyNodes (k8s.daemonset.ready_nodes,
+        the number of nodes running at least one ready daemon pod) and misscheduledNodes
+        (k8s.daemonset.misscheduled_nodes, the number of nodes running the daemon
+        pod but not supposed to) — note these are node counts, not pod counts. It
+        also reports per-group podCountsByPhase ({ pending, running, succeeded, failed,
+        unknown } from each pod''s latest k8s.pod.phase value). Each daemonset includes
+        metadata attributes (k8s.daemonset.name, k8s.namespace.name, k8s.cluster.name).
+        The response type is ''list'' for the default k8s.daemonset.name grouping
+        or ''grouped_list'' for custom groupBy keys; in both modes every row aggregates
+        pods owned by daemonsets in the group. Supports filtering via a filter expression,
+        custom groupBy, ordering by cpu / cpu_request / cpu_limit / memory / memory_request
+        / memory_limit / desired_nodes / current_nodes / ready_nodes / misscheduled_nodes,
         and pagination via offset/limit. Also reports whether the requested time range
         falls before the data retention boundary. Numeric metric fields (daemonSetCPU,
         daemonSetCPURequest, daemonSetCPULimit, daemonSetMemory, daemonSetMemoryRequest,
-        daemonSetMemoryLimit, desiredNodes, currentNodes) return -1 as a sentinel
-        when no data is available for that field.'
+        daemonSetMemoryLimit, desiredNodes, currentNodes, readyNodes, misscheduledNodes)
+        return -1 as a sentinel when no data is available for that field.'
       operationId: ListDaemonSets
       requestBody:
         content:
@@ -18168,6 +18406,16 @@ paths:
         public dashboard. The panel is addressed by its key in spec.panels.
       operationId: GetPublicDashboardPanelQueryRangeV2
       parameters:
+      - in: query
+        name: startTime
+        required: false
+        schema:
+          type: string
+      - in: query
+        name: endTime
+        required: false
+        schema:
+          type: string
       - in: path
         name: id
         required: true
@@ -24377,9 +24625,17 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - VIEWER
+        - logs:read
+        - traces:read
+        - metrics:read
+        - audit-logs:read
+        - meter-metrics:read
       - tokenizer:
-        - VIEWER
+        - logs:read
+        - traces:read
+        - metrics:read
+        - audit-logs:read
+        - meter-metrics:read
       summary: Query range
       tags:
       - querier
@@ -24446,9 +24702,17 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - VIEWER
+        - logs:read
+        - traces:read
+        - metrics:read
+        - audit-logs:read
+        - meter-metrics:read
       - tokenizer:
-        - VIEWER
+        - logs:read
+        - traces:read
+        - metrics:read
+        - audit-logs:read
+        - meter-metrics:read
       summary: Query range preview
       tags:
       - querier

ee/authz/openfgaauthz/provider.go

@@ -119,10 +119,6 @@ func (provider *provider) CheckTransactions(ctx context.Context, subject string,
 	return results, nil
 }
 
-func (provider *provider) ListObjects(ctx context.Context, subject string, relation authtypes.Relation, objectType coretypes.Type) ([]*coretypes.Object, error) {
-	return provider.openfgaServer.ListObjects(ctx, subject, relation, objectType)
-}
-
 func (provider *provider) Write(ctx context.Context, additions []*openfgav1.TupleKey, deletions []*openfgav1.TupleKey) error {
 	return provider.openfgaServer.Write(ctx, additions, deletions)
 }
@@ -131,10 +127,6 @@ func (provider *provider) ReadTuples(ctx context.Context, tupleKey *openfgav1.Re
 	return provider.openfgaServer.ReadTuples(ctx, tupleKey)
 }
 
-func (provider *provider) Get(ctx context.Context, orgID valuer.UUID, id valuer.UUID) (*authtypes.Role, error) {
-	return provider.pkgAuthzService.Get(ctx, orgID, id)
-}
-
 func (provider *provider) GetByOrgIDAndName(ctx context.Context, orgID valuer.UUID, name string) (*authtypes.Role, error) {
 	return provider.pkgAuthzService.GetByOrgIDAndName(ctx, orgID, name)
 }
@@ -183,7 +175,7 @@ func (provider *provider) CreateManagedUserRoleTransactions(ctx context.Context,
 	return provider.Write(ctx, tuples, nil)
 }
 
-func (provider *provider) Create(ctx context.Context, orgID valuer.UUID, role *authtypes.RoleWithTransactionGroups) error {
+func (provider *provider) Create(ctx context.Context, orgID valuer.UUID, role *authtypes.Role) error {
 	_, err := provider.licensing.GetActive(ctx, orgID)
 	if err != nil {
 		return errors.New(errors.TypeLicenseUnavailable, errors.CodeLicenseUnavailable, "a valid license is not available").WithAdditional("this feature requires a valid license").WithAdditional(err.Error())
@@ -208,86 +200,42 @@ func (provider *provider) Create(ctx context.Context, orgID valuer.UUID, role *a
 		return err
 	}
 
-	if err := provider.store.Create(ctx, role.Role); err != nil {
-		return err
-	}
-
-	return nil
+	return provider.store.Create(ctx, role)
 }
 
-func (provider *provider) GetOrCreate(ctx context.Context, orgID valuer.UUID, role *authtypes.Role) (*authtypes.Role, error) {
-	_, err := provider.licensing.GetActive(ctx, orgID)
-	if err != nil {
-		return nil, errors.New(errors.TypeLicenseUnavailable, errors.CodeLicenseUnavailable, "a valid license is not available").WithAdditional("this feature requires a valid license").WithAdditional(err.Error())
-	}
-
-	existingRole, err := provider.store.GetByOrgIDAndName(ctx, role.OrgID, role.Name)
-	if err != nil {
-		if !errors.Ast(err, errors.TypeNotFound) {
-			return nil, err
-		}
-	}
-
-	if existingRole != nil {
-		return existingRole, nil
-	}
-
-	err = provider.store.Create(ctx, role)
-	if err != nil {
-		return nil, err
-	}
-
-	return role, nil
+func (provider *provider) Get(ctx context.Context, orgID valuer.UUID, id valuer.UUID) (*authtypes.Role, error) {
+	return provider.store.Get(ctx, orgID, id)
 }
 
-func (provider *provider) GetWithTransactionGroups(ctx context.Context, orgID valuer.UUID, id valuer.UUID) (*authtypes.RoleWithTransactionGroups, error) {
-	_, err := provider.licensing.GetActive(ctx, orgID)
-	if err != nil {
-		return nil, errors.New(errors.TypeLicenseUnavailable, errors.CodeLicenseUnavailable, "a valid license is not available").WithAdditional("this feature requires a valid license").WithAdditional(err.Error())
-	}
-
-	role, err := provider.store.Get(ctx, orgID, id)
-	if err != nil {
-		return nil, err
-	}
-
-	tuples, err := provider.readAllTuplesForRole(ctx, role.Name, orgID)
-	if err != nil {
-		return nil, err
-	}
-
-	transactionGroups := authtypes.MustNewTransactionGroupsFromTuples(tuples)
-	return authtypes.MakeRoleWithTransactionGroups(role, transactionGroups), nil
-}
-
-func (provider *provider) Update(ctx context.Context, orgID valuer.UUID, updatedRole *authtypes.RoleWithTransactionGroups) error {
+func (provider *provider) Update(ctx context.Context, orgID valuer.UUID, updatedRole *authtypes.Role) error {
 	_, err := provider.licensing.GetActive(ctx, orgID)
 	if err != nil {
 		return errors.New(errors.TypeLicenseUnavailable, errors.CodeLicenseUnavailable, "a valid license is not available").WithAdditional("this feature requires a valid license").WithAdditional(err.Error())
 	}
 
-	existingRole, err := provider.GetWithTransactionGroups(ctx, orgID, updatedRole.ID)
+	existingRole, err := provider.Get(ctx, orgID, updatedRole.ID)
 	if err != nil {
 		return err
 	}
 
-	additions, deletions := existingRole.TransactionGroups.Diff(updatedRole.TransactionGroups)
-	additionTuples, err := authtypes.NewTuplesFromTransactionGroups(existingRole.Name, orgID, additions)
+	existingTuples, err := provider.readAllTuplesForRole(ctx, existingRole.Name, orgID)
 	if err != nil {
 		return err
 	}
 
-	deletionTuples, err := authtypes.NewTuplesFromTransactionGroups(existingRole.Name, orgID, deletions)
+	desiredTuples, err := authtypes.NewTuplesFromTransactionGroups(existingRole.Name, orgID, updatedRole.TransactionGroups)
 	if err != nil {
 		return err
 	}
 
+	additionTuples, deletionTuples := authtypes.DiffTuples(existingTuples, desiredTuples)
+
 	err = provider.Write(ctx, additionTuples, deletionTuples)
 	if err != nil {
 		return err
 	}
 
-	return provider.store.Update(ctx, orgID, updatedRole.Role)
+	return provider.store.Update(ctx, orgID, updatedRole)
 }
 
 func (provider *provider) Delete(ctx context.Context, orgID valuer.UUID, id valuer.UUID) error {
@@ -296,7 +244,7 @@ func (provider *provider) Delete(ctx context.Context, orgID valuer.UUID, id valu
 		return errors.New(errors.TypeLicenseUnavailable, errors.CodeLicenseUnavailable, "a valid license is not available").WithAdditional("this feature requires a valid license").WithAdditional(err.Error())
 	}
 
-	role, err := provider.GetWithTransactionGroups(ctx, orgID, id)
+	role, err := provider.Get(ctx, orgID, id)
 	if err != nil {
 		return err
 	}
@@ -312,7 +260,7 @@ func (provider *provider) Delete(ctx context.Context, orgID valuer.UUID, id valu
 		}
 	}
 
-	tuples, err := authtypes.NewTuplesFromTransactionGroups(role.Name, orgID, role.TransactionGroups)
+	tuples, err := provider.readAllTuplesForRole(ctx, role.Name, orgID)
 	if err != nil {
 		return err
 	}
@@ -324,6 +272,24 @@ func (provider *provider) Delete(ctx context.Context, orgID valuer.UUID, id valu
 	return provider.store.Delete(ctx, orgID, id)
 }
 
+func (provider *provider) readAllTuplesForRole(ctx context.Context, roleName string, orgID valuer.UUID) ([]*openfgav1.TupleKey, error) {
+	subject := authtypes.MustNewSubject(coretypes.NewResourceRole(), roleName, orgID, &coretypes.VerbAssignee)
+
+	tuples := make([]*openfgav1.TupleKey, 0)
+	for _, objectType := range provider.registry.Types() {
+		typeTuples, err := provider.openfgaServer.ReadTuples(ctx, &openfgav1.ReadRequestTupleKey{
+			User:   subject,
+			Object: objectType.StringValue() + ":",
+		})
+		if err != nil {
+			return nil, err
+		}
+		tuples = append(tuples, typeTuples...)
+	}
+
+	return tuples, nil
+}
+
 func (provider *provider) getManagedRoleGrantTuples(orgID valuer.UUID, userID valuer.UUID) []*openfgav1.TupleKey {
 	tuples := []*openfgav1.TupleKey{}
 
@@ -375,21 +341,3 @@ func (provider *provider) getManagedRoleTransactionTuples(orgID valuer.UUID) []*
 
 	return tuples
 }
-
-func (provider *provider) readAllTuplesForRole(ctx context.Context, roleName string, orgID valuer.UUID) ([]*openfgav1.TupleKey, error) {
-	subject := authtypes.MustNewSubject(coretypes.NewResourceRole(), roleName, orgID, &coretypes.VerbAssignee)
-
-	tuples := make([]*openfgav1.TupleKey, 0)
-	for _, objectType := range provider.registry.Types() {
-		typeTuples, err := provider.ReadTuples(ctx, &openfgav1.ReadRequestTupleKey{
-			User:   subject,
-			Object: objectType.StringValue() + ":",
-		})
-		if err != nil {
-			return nil, err
-		}
-		tuples = append(tuples, typeTuples...)
-	}
-
-	return tuples, nil
-}

ee/authz/openfgaserver/server.go

@@ -105,10 +105,6 @@ func (server *Server) BatchCheck(ctx context.Context, tupleReq map[string]*openf
 	return server.pkgAuthzService.BatchCheck(ctx, tupleReq)
 }
 
-func (server *Server) ListObjects(ctx context.Context, subject string, relation authtypes.Relation, objectType coretypes.Type) ([]*coretypes.Object, error) {
-	return server.pkgAuthzService.ListObjects(ctx, subject, relation, objectType)
-}
-
 func (server *Server) Write(ctx context.Context, additions []*openfgav1.TupleKey, deletions []*openfgav1.TupleKey) error {
 	return server.pkgAuthzService.Write(ctx, additions, deletions)
 }

ee/query-service/rules/manager_test.go

@@ -240,17 +240,17 @@ func TestManager_TestNotification_SendUnmatched_PromRule(t *testing.T) {
 					mock := mockStore.Mock()
 
 					// Mock the fingerprint query (for Prometheus label matching)
+					// args: $1=metric_name (the __name__ matcher maps onto the column)
 					mock.ExpectQuery("SELECT fingerprint, any").
-						WithArgs("test_metric", "__name__", "test_metric").
+						WithArgs("test_metric").
 						WillReturnRows(fingerprintRows)
 
 					// Mock the samples query (for Prometheus metric data)
+					// args: metric_name IN (discovered names), subquery metric_name, start, end
 					mock.ExpectQuery("SELECT metric_name, fingerprint, unix_milli").
 						WithArgs(
 							"test_metric",
 							"test_metric",
-							"__name__",
-							"test_metric",
 							queryStart,
 							queryEnd,
 						).

ee/sqlschema/postgressqlschema/provider.go

@@ -3,6 +3,7 @@ package postgressqlschema
 import (
 	"context"
 	"database/sql"
+	"log/slog"
 
 	"github.com/uptrace/bun"
 
@@ -214,6 +215,20 @@ WHERE
 }
 
 func (provider *provider) GetIndices(ctx context.Context, name sqlschema.TableName) ([]sqlschema.Index, error) {
+	// A key is one entry an index is built on: a column (plain) or an expression
+	// like lower(x) (functional). Returns one row per key of each non-constraint-
+	// backed index on the table, ordered by position. Keys are enumerated with
+	// generate_series over indnkeyatts (count of key columns, excluding non-key
+	// INCLUDE columns), so expression keys are covered too. Reconstruction uses:
+	//
+	//   index_name    | index the key belongs to
+	//   is_expression | true if the key is an expression, not a plain column
+	//   key_def       | rendered key text, e.g. org_id or lower(key)
+	//   column_name   | column name for plain keys; NULL for expression keys
+	//   predicate     | partial-index WHERE; NULL if not partial (same every row)
+	//
+	// table_name/unique/primary/column_position are carried over from the prior
+	// query (unique gates the loop, column_position orders the keys).
 	rows, err := provider.
 		sqlstore.
 		BunDB().
@@ -224,19 +239,21 @@ SELECT
     i.indisunique AS unique,
     i.indisprimary AS primary,
     a.attname AS column_name,
-    array_position(i.indkey, a.attnum) AS column_position,
+    n AS column_position,
+	(i.indkey[n - 1] = 0) AS is_expression,
+    pg_get_indexdef(i.indexrelid, n, true) AS key_def,
     pg_get_expr(i.indpred, i.indrelid) AS predicate
 FROM
     pg_index i
     LEFT JOIN pg_class ct ON ct.oid = i.indrelid
     LEFT JOIN pg_class ci ON ci.oid = i.indexrelid
-    LEFT JOIN pg_attribute a ON a.attrelid = ct.oid
     LEFT JOIN pg_constraint con ON con.conindid = i.indexrelid
+    CROSS JOIN generate_series(1, i.indnkeyatts) AS n
+    LEFT JOIN pg_attribute a ON a.attrelid = ct.oid AND a.attnum = i.indkey[n - 1]
 WHERE
-    a.attnum = ANY(i.indkey)
-    AND con.oid IS NULL
+    ct.relname = ?
     AND ct.relkind = 'r'
-    AND ct.relname = ?
+    AND con.oid IS NULL
 ORDER BY index_name, column_position`, string(name))
 	if err != nil {
 		return nil, provider.sqlstore.WrapNotFoundErrf(err, errors.CodeNotFound, "no indices for table (%s) found", name)
@@ -251,6 +268,10 @@ ORDER BY index_name, column_position`, string(name))
 	type indexEntry struct {
 		columns   []sqlschema.ColumnName
 		predicate *string
+		// keyDefs holds every key rendered by pg_get_indexdef, in key order; used
+		// for functional indexes where a key may be an expression like lower(x).
+		keyDefs       []string
+		hasExpression bool
 	}
 
 	uniqueIndicesMap := make(map[string]*indexEntry)
@@ -260,30 +281,45 @@ ORDER BY index_name, column_position`, string(name))
 			indexName  string
 			unique     bool
 			primary    bool
-			columnName string
-			// starts from 0 and is unused in this function, this is to ensure that the column names are in the correct order
+			columnName *string
+			// starts from 1 and is unused in this function, this is to ensure that the column names are in the correct order
 			columnPosition int
+			isExpression   bool
+			keyDef         string
 			predicate      *string
 		)
 
-		if err := rows.Scan(&tableName, &indexName, &unique, &primary, &columnName, &columnPosition, &predicate); err != nil {
+		if err := rows.Scan(&tableName, &indexName, &unique, &primary, &columnName, &columnPosition, &isExpression, &keyDef, &predicate); err != nil {
 			return nil, err
 		}
 
-		if unique {
-			if _, ok := uniqueIndicesMap[indexName]; !ok {
-				uniqueIndicesMap[indexName] = &indexEntry{
-					columns:   []sqlschema.ColumnName{sqlschema.ColumnName(columnName)},
-					predicate: predicate,
-				}
-			} else {
-				uniqueIndicesMap[indexName].columns = append(uniqueIndicesMap[indexName].columns, sqlschema.ColumnName(columnName))
-			}
+		if !unique {
+			continue
+		}
+
+		entry, ok := uniqueIndicesMap[indexName]
+		if !ok {
+			entry = &indexEntry{predicate: predicate}
+			uniqueIndicesMap[indexName] = entry
+		}
+
+		entry.keyDefs = append(entry.keyDefs, keyDef)
+		if isExpression {
+			entry.hasExpression = true
+		} else if columnName != nil {
+			entry.columns = append(entry.columns, sqlschema.ColumnName(*columnName))
 		}
 	}
 
 	indices := make([]sqlschema.Index, 0)
 	for indexName, entry := range uniqueIndicesMap {
+		// functional partial indexes aren't representable (PartialUniqueIndex has no
+		// expressions); skip rather than misrepresent.
+		if entry.hasExpression && entry.predicate != nil {
+			provider.settings.Logger().WarnContext(ctx, "skipping functional partial unique index; not representable by sqlschema", slog.String("index", indexName), slog.String("table", string(name)))
+			continue
+		}
+
 		if entry.predicate != nil {
 			index := &sqlschema.PartialUniqueIndex{
 				TableName:   name,
@@ -291,6 +327,17 @@ ORDER BY index_name, column_position`, string(name))
 				Where:       *entry.predicate,
 			}
 
+			if index.Name() == indexName {
+				indices = append(indices, index)
+			} else {
+				indices = append(indices, index.Named(indexName))
+			}
+		} else if entry.hasExpression {
+			index := &sqlschema.UniqueIndexWithExpressions{
+				TableName:   name,
+				Expressions: entry.keyDefs,
+			}
+
 			if index.Name() == indexName {
 				indices = append(indices, index)
 			} else {

ee/sqlschema/postgressqlschema/provider_test.go

@@ -0,0 +1,116 @@
+package postgressqlschema
+
+import (
+	"context"
+	"database/sql/driver"
+	"testing"
+
+	"github.com/DATA-DOG/go-sqlmock"
+	"github.com/SigNoz/signoz/pkg/instrumentation/instrumentationtest"
+	"github.com/SigNoz/signoz/pkg/sqlschema"
+	"github.com/SigNoz/signoz/pkg/sqlstore"
+	"github.com/SigNoz/signoz/pkg/sqlstore/sqlstoretest"
+	"github.com/stretchr/testify/assert"
+	"github.com/stretchr/testify/require"
+)
+
+// TestGetIndices feeds GetIndices the exact rows the catalog query returns for a
+// real table (captured from devenv postgres) and checks each unique-index shape
+// is reconstructed: expression keys, partial (predicate), and plain columns.
+func TestGetIndices(t *testing.T) {
+	// column order must match the SELECT in GetIndices.
+	columns := []string{"table_name", "index_name", "unique", "primary", "column_name", "column_position", "is_expression", "key_def", "predicate"}
+
+	testCases := []struct {
+		name  string
+		table sqlschema.TableName
+		rows  [][]driver.Value
+		want  []sqlschema.Index
+	}{
+		{
+			name:  "UniqueIndexWithExpressions",
+			table: "tag",
+			rows: [][]driver.Value{
+				{"tag", "uq_tag_a36c51df", true, false, "org_id", 1, false, "org_id", nil},
+				{"tag", "uq_tag_a36c51df", true, false, "kind", 2, false, "kind", nil},
+				{"tag", "uq_tag_a36c51df", true, false, nil, 3, true, "lower(key)", nil},
+				{"tag", "uq_tag_a36c51df", true, false, nil, 4, true, "lower(value)", nil},
+			},
+			want: []sqlschema.Index{
+				&sqlschema.UniqueIndexWithExpressions{
+					TableName:   "tag",
+					Expressions: []string{"org_id", "kind", "lower(key)", "lower(value)"},
+				},
+			},
+		},
+		{
+			name:  "PartialUniqueIndexes",
+			table: "service_account",
+			rows: [][]driver.Value{
+				{"service_account", "puq_service_account_email_org_id_471d6134", true, false, "email", 1, false, "email", "(status <> 'deleted'::text)"},
+				{"service_account", "puq_service_account_email_org_id_471d6134", true, false, "org_id", 2, false, "org_id", "(status <> 'deleted'::text)"},
+				{"service_account", "puq_service_account_name_org_id_471d6134", true, false, "name", 1, false, "name", "(status <> 'deleted'::text)"},
+				{"service_account", "puq_service_account_name_org_id_471d6134", true, false, "org_id", 2, false, "org_id", "(status <> 'deleted'::text)"},
+			},
+			want: []sqlschema.Index{
+				(&sqlschema.PartialUniqueIndex{
+					TableName:   "service_account",
+					ColumnNames: []sqlschema.ColumnName{"email", "org_id"},
+					Where:       "(status <> 'deleted'::text)",
+				}).Named("puq_service_account_email_org_id_471d6134"),
+				(&sqlschema.PartialUniqueIndex{
+					TableName:   "service_account",
+					ColumnNames: []sqlschema.ColumnName{"name", "org_id"},
+					Where:       "(status <> 'deleted'::text)",
+				}).Named("puq_service_account_name_org_id_471d6134"),
+			},
+		},
+		{
+			name:  "PlainUniqueIndex",
+			table: "tag_relation",
+			rows: [][]driver.Value{
+				{"tag_relation", "uq_tag_relation_kind_resource_id_tag_id", true, false, "kind", 1, false, "kind", nil},
+				{"tag_relation", "uq_tag_relation_kind_resource_id_tag_id", true, false, "resource_id", 2, false, "resource_id", nil},
+				{"tag_relation", "uq_tag_relation_kind_resource_id_tag_id", true, false, "tag_id", 3, false, "tag_id", nil},
+			},
+			want: []sqlschema.Index{
+				&sqlschema.UniqueIndex{
+					TableName:   "tag_relation",
+					ColumnNames: []sqlschema.ColumnName{"kind", "resource_id", "tag_id"},
+				},
+			},
+		},
+	}
+
+	for _, testCase := range testCases {
+		t.Run(testCase.name, func(t *testing.T) {
+			store := sqlstoretest.New(sqlstore.Config{Provider: "postgres"}, sqlmock.QueryMatcherRegexp)
+			rows := sqlmock.NewRows(columns)
+			for _, row := range testCase.rows {
+				rows.AddRow(row...)
+			}
+			store.Mock().ExpectQuery("pg_index").WillReturnRows(rows)
+
+			schema, err := New(context.Background(), instrumentationtest.New().ToProviderSettings(), sqlschema.Config{}, store)
+			require.NoError(t, err)
+
+			indices, err := schema.GetIndices(context.Background(), testCase.table)
+			require.NoError(t, err)
+			assert.Len(t, indices, len(testCase.want))
+
+			// GetIndices iterates a map, so match by name rather than slice order.
+			got := make(map[string]sqlschema.Index, len(indices))
+			for _, index := range indices {
+				got[index.Name()] = index
+			}
+			for _, want := range testCase.want {
+				actual, ok := got[want.Name()]
+				if !assert.True(t, ok, "expected index %s not returned", want.Name()) {
+					// so that other items in the for loop can also be checked.
+					continue
+				}
+				assert.True(t, want.Equals(actual), "index %s reconstructed differently", want.Name())
+			}
+		})
+	}
+}

frontend/__mocks__/motionMock.tsx

@@ -0,0 +1,88 @@
+// oxlint-disable-next-line no-restricted-imports
+import * as React from 'react';
+
+// In jsdom, AnimatePresence from motion/react keeps children in DOM during exit
+// animations (awaiting rAF-driven completion that never fully runs in jsdom).
+// This mock makes AnimatePresence render children immediately and makes motion.*
+// elements render as their plain HTML equivalents without animation side-effects.
+//
+// IMPORTANT: motion component references are cached so React sees a stable
+// component identity across re-renders and does not enter an infinite remount loop.
+
+const MOTION_PROPS_TO_STRIP = new Set([
+	'initial',
+	'animate',
+	'exit',
+	'variants',
+	'transition',
+	'whileHover',
+	'whileTap',
+	'whileFocus',
+	'whileInView',
+	'layout',
+	'layoutId',
+	'onAnimationStart',
+	'onAnimationComplete',
+]);
+
+const cache = new Map<string, React.ComponentType>();
+
+function getMotionComponent(tag: string): React.ComponentType {
+	if (!cache.has(tag)) {
+		const Component = React.forwardRef<HTMLElement, Record<string, unknown>>(
+			(props, ref) => {
+				const domProps: Record<string, unknown> = {};
+				for (const [k, v] of Object.entries(props)) {
+					if (!MOTION_PROPS_TO_STRIP.has(k)) {
+						domProps[k] = v;
+					}
+				}
+				return React.createElement(tag, { ...domProps, ref });
+			},
+		);
+		Component.displayName = `motion.${tag}`;
+		cache.set(tag, Component as unknown as React.ComponentType);
+	}
+	return cache.get(tag) as React.ComponentType;
+}
+
+const motionHandler: ProxyHandler<Record<string, React.ComponentType>> = {
+	get(_target, prop: string) {
+		return getMotionComponent(prop);
+	},
+};
+
+export const AnimatePresence: React.FC<{
+	children?: React.ReactNode;
+	mode?: string;
+}> = ({ children }) => React.createElement(React.Fragment, null, children);
+
+export const motion = new Proxy(
+	{} as Record<string, React.ComponentType>,
+	motionHandler,
+);
+
+export const useAnimation = (): Record<string, unknown> => ({
+	start: (): unknown => Promise.resolve(),
+	stop: (): unknown => undefined,
+	set: (): unknown => undefined,
+});
+
+export const useMotionValue = (
+	initial: unknown,
+): { get: () => unknown; set: () => void } => ({
+	get: (): unknown => initial,
+	set: (): unknown => undefined,
+});
+
+export const useTransform = (): { get: () => number } => ({
+	get: (): number => 0,
+});
+
+export const useSpring = (v: unknown): unknown => v;
+
+export const useScroll = (): { scrollY: { get: () => number } } => ({
+	scrollY: { get: (): number => 0 },
+});
+
+export default { motion, AnimatePresence };

frontend/__mocks__/resizableMock.tsx

@@ -1,29 +0,0 @@
-import { PropsWithChildren } from 'react';
-
-type CommonProps = PropsWithChildren<{
-	className?: string;
-	minSize?: number;
-	maxSize?: number;
-	defaultSize?: number;
-	direction?: 'horizontal' | 'vertical';
-	autoSaveId?: string;
-	withHandle?: boolean;
-}>;
-
-export function ResizablePanelGroup({
-	children,
-	className,
-}: CommonProps): JSX.Element {
-	return <div className={className}>{children}</div>;
-}
-
-export function ResizablePanel({
-	children,
-	className,
-}: CommonProps): JSX.Element {
-	return <div className={className}>{children}</div>;
-}
-
-export function ResizableHandle({ className }: CommonProps): JSX.Element {
-	return <div className={className} />;
-}

frontend/jest.config.ts

@@ -20,7 +20,7 @@ const config: Config.InitialOptions = {
 		'\\.module\\.mjs$': '<rootDir>/__mocks__/cssMock.ts',
 		'\\.md$': '<rootDir>/__mocks__/cssMock.ts',
 		'^uplot$': '<rootDir>/__mocks__/uplotMock.ts',
-		'^@signozhq/resizable$': '<rootDir>/__mocks__/resizableMock.tsx',
+		'^motion/react$': '<rootDir>/__mocks__/motionMock.tsx',
 		'^hooks/useSafeNavigate$': USE_SAFE_NAVIGATE_MOCK_PATH,
 		'^src/hooks/useSafeNavigate$': USE_SAFE_NAVIGATE_MOCK_PATH,
 		'^.*/useSafeNavigate$': USE_SAFE_NAVIGATE_MOCK_PATH,

frontend/package.json

@@ -49,7 +49,6 @@
     "@sentry/vite-plugin": "5.3.0",
     "@signozhq/design-tokens": "2.1.4",
     "@signozhq/icons": "0.4.0",
-    "@signozhq/resizable": "0.0.2",
     "@signozhq/ui": "0.0.23",
     "@tanstack/react-table": "8.21.3",
     "@tanstack/react-virtual": "3.13.22",
@@ -75,7 +74,7 @@
     "crypto-js": "4.2.0",
     "d3-hierarchy": "3.1.2",
     "dayjs": "^1.10.7",
-    "dompurify": "3.4.0",
+    "dompurify": "3.4.11",
     "event-source-polyfill": "1.0.31",
     "eventemitter3": "5.0.1",
     "history": "4.10.1",
@@ -90,7 +89,7 @@
     "lodash-es": "^4.17.21",
     "motion": "12.4.13",
     "nuqs": "2.8.8",
-    "overlayscrollbars": "^2.8.1",
+    "overlayscrollbars": "^2.16.0",
     "overlayscrollbars-react": "^0.5.6",
     "papaparse": "5.4.1",
     "posthog-js": "1.298.0",
@@ -128,7 +127,7 @@
     "timestamp-nano": "^1.0.0",
     "typescript": "5.9.3",
     "uplot": "1.6.31",
-    "uuid": "^8.3.2",
+    "uuid": "14.0.1",
     "vite": "npm:rolldown-vite@7.3.1",
     "vite-plugin-html": "3.2.2",
     "zod": "4.3.6",
@@ -223,25 +222,17 @@
       "stylelint"
     ]
   },
-  "resolutions": {
-    "@types/react": "18.0.26",
-    "@types/react-dom": "18.0.10",
-    "debug": "4.3.4",
-    "semver": "7.5.4",
-    "xml2js": "0.5.0",
-    "phin": "^3.7.1",
-    "body-parser": "1.20.3",
-    "http-proxy-middleware": "4.1.1",
-    "cross-spawn": "7.0.5",
-    "cookie": "^0.7.1",
-    "serialize-javascript": "6.0.2",
-    "prismjs": "1.30.0",
-    "got": "11.8.5",
-    "form-data": "4.0.6",
-    "brace-expansion": "^2.0.2",
-    "on-headers": "^1.1.0",
-    "js-cookie": "^3.0.7",
-    "tmp": "0.2.7",
-    "vite": "npm:rolldown-vite@7.3.1"
+  "overrides": {
+    "@babel/core@<=7.29.0": ">=7.29.6 <8",
+    "@istanbuljs/load-nyc-config>js-yaml": ">=4.2.0 <5",
+    "cookie@<0.7.0": ">=0.7.1 <1",
+    "dompurify@<=3.4.10": ">=3.4.11 <4",
+    "esbuild@>=0.27.3 <0.28.1": ">=0.28.1 <0.29.0",
+    "js-cookie@<=3.0.5": ">=3.0.7 <4",
+    "js-yaml@>=4.0.0 <=4.1.1": ">=4.2.0 <5",
+    "prismjs@<1.30.0": ">=1.30.0 <2",
+    "react-router@>=6.7.0 <6.30.4": ">=6.30.4 <7",
+    "tmp@<0.2.6": ">=0.2.6 <0.3.0",
+    "yaml@>=1.0.0 <1.10.3": ">=1.10.3 <2"
   }
-}
+}

frontend/pnpm-workspace.yaml

@@ -1,6 +1,53 @@
-trustPolicy: no-downgrade
+blockExoticSubdeps: true
 minimumReleaseAge: 2880 # 2d
-minimumReleaseAgeStrict: true
 minimumReleaseAgeExclude:
  - '@signozhq/*'
-blockExoticSubdeps: true
+minimumReleaseAgeStrict: true
+# Security floors for vulnerable transitive deps. Where possible, targets are
+# capped to avoid crossing breaking versions (major; and minor for 0.x).
+# Some entries may still force a breaking bump when no safe release exists
+# within the consumer’s constraint—see per-entry notes.
+overrides:
+ # via: direct devDep @babel/core ^7.22.11 (+ babel plugin peers)
+ # remove: bump @babel/core in package.json to ^7.29.6
+ '@babel/core@<=7.29.0': '>=7.29.6 <8'
+ # via: jest > babel-plugin-istanbul > @istanbuljs/load-nyc-config@1.1.0 (js-yaml ^3.13.1)
+ # remove: blocked — 1.1.0 is latest and still depends on js-yaml 3.x
+ '@istanbuljs/load-nyc-config>js-yaml': '>=4.2.0 <5'
+ # via: msw@1.3.2 (devDep) > cookie ^0.4.2
+ # remove: upgrade msw to >=2 (ships cookie ^1). Do NOT open the cap: cookie >=1 is
+ # ESM-only and breaks msw under jest's CJS sandbox (kills every test suite)
+ cookie@<0.7.0: '>=0.7.1 <1'
+ # via: direct dep dompurify 3.4.0; @grafana/data@11.6.15 (3.4.0/3.2.4 exact);
+ #      @monaco-editor/react > monaco-editor@0.55.1 (3.2.7 exact)
+ # remove: bump direct dep to 3.4.11; @grafana/data (latest 13.1.0) and
+ #         monaco-editor (latest 0.55.1) still pin vulnerable versions — blocked
+ dompurify@<=3.4.10: '>=3.4.11 <4'
+ # via: rolldown-vite@7.3.1 (esbuild ^0.27.0); orval@8.9.1 (^0.27.4); ts-jest@29.4.9 (~0.27.4)
+ # remove: blocked on rolldown-vite (7.3.1 is latest, still ^0.27.0);
+ #         orval >=8.20.0 and ts-jest >=29.4.11 already fixed on their side
+ esbuild@>=0.27.3 <0.28.1: '>=0.28.1 <0.29.0'
+ # via: react-use@17.5.1 (direct, js-cookie ^2.2.1); @grafana/data > react-use@17.6.0
+ # remove: bump react-use to >=17.6.1 (js-cookie ^3); @grafana/data side blocked
+ js-cookie@<=3.0.5: '>=3.0.7 <4'
+ # via: @orval/core@8.9.1 (devDep, js-yaml 4.1.1 EXACT pin — not deletable);
+ #      json-schema-to-typescript@15 > @apidevtools/json-schema-ref-parser (^4.1.0)
+ # remove: upgrade orval to >=8.20.0 (drops js-yaml dependency entirely)
+ js-yaml@>=4.0.0 <=4.1.1: '>=4.2.0 <5'
+ # via: react-syntax-highlighter@15.5.0 (prismjs ^1.27.0 + refractor@3 ~1.27.0 tilde-pinned)
+ # remove: bump react-syntax-highlighter to >=16.1.1 (prismjs ^1.30.0, refractor@5)
+ prismjs@<1.30.0: '>=1.30.0 <2'
+ # via: direct dep react-router-dom-v5-compat@6.30.3 (react-router 6.30.3 exact)
+ # remove: bump react-router-dom-v5-compat to 6.30.4. Do NOT open the cap:
+ # react-router >=7 requires React 19 and breaks the app-wide CompatRouter
+ react-router@>=6.7.0 <6.30.4: '>=6.30.4 <7'
+ # via: msw@1.3.2 (devDep) > inquirer@8 > external-editor@3.1.0 (tmp ^0.0.33)
+ # remove: upgrade msw to >=2 (drops the inquirer/external-editor chain)
+ tmp@<0.2.6: '>=0.2.6 <0.3.0'
+ # via: jest > babel-plugin-macros > cosmiconfig@7 (yaml ^1.10.0);
+ #      typescript-plugin-css-modules > postcss-load-config@3 (^1.10.2)
+ # remove: blocked — babel-plugin-macros 3.1.0 (latest) still uses cosmiconfig@7
+ yaml@>=1.0.0 <1.10.3: '>=1.10.3 <2'
+trustPolicy: no-downgrade
+trustPolicyExclude:
+ - 'semver@6.3.1 || 5.7.2'

frontend/public/locales/en-GB/titles.json

@@ -62,6 +62,7 @@
 	"TRACES_FUNNELS_DETAIL": "SigNoz | Funnel",
 	"INTEGRATIONS_DETAIL": "SigNoz | Integration",
 	"PUBLIC_DASHBOARD": "SigNoz | Dashboard",
-	"LLM_OBSERVABILITY_OVERVIEW": "SigNoz | LLM Observability Overview",
-	"LLM_OBSERVABILITY_CONFIGURATION": "SigNoz | LLM Observability Configuration"
+	"AI_OBSERVABILITY_OVERVIEW": "SigNoz | AI Observability Overview",
+	"AI_OBSERVABILITY_CONFIGURATION": "SigNoz | AI Observability Configuration",
+	"AI_OBSERVABILITY_ATTRIBUTE_MAPPING": "SigNoz | AI Observability Attribute Mapping"
 }

frontend/public/locales/en/titles.json

@@ -87,6 +87,7 @@
 	"TRACES_FUNNELS_DETAIL": "SigNoz | Funnel",
 	"INTEGRATIONS_DETAIL": "SigNoz | Integration",
 	"PUBLIC_DASHBOARD": "SigNoz | Dashboard",
-	"LLM_OBSERVABILITY_OVERVIEW": "SigNoz | LLM Observability Overview",
-	"LLM_OBSERVABILITY_CONFIGURATION": "SigNoz | LLM Observability Configuration"
+	"AI_OBSERVABILITY_OVERVIEW": "SigNoz | AI Observability Overview",
+	"AI_OBSERVABILITY_CONFIGURATION": "SigNoz | AI Observability Configuration",
+	"AI_OBSERVABILITY_ATTRIBUTE_MAPPING": "SigNoz | AI Observability Attribute Mapping"
 }

frontend/src/AppRoutes/Private.tsx

@@ -134,8 +134,8 @@ function PrivateRoute({ children }: PrivateRouteProps): JSX.Element {
 	}
 
 	if (
-		(pathname.startsWith(`${ROUTES.LLM_OBSERVABILITY_BASE}/`) ||
-			pathname === ROUTES.LLM_OBSERVABILITY_BASE) &&
+		(pathname.startsWith(`${ROUTES.AI_OBSERVABILITY_BASE}/`) ||
+			pathname === ROUTES.AI_OBSERVABILITY_BASE) &&
 		!isAIObservabilityEnabled
 	) {
 		return <Redirect to={ROUTES.HOME} />;

frontend/src/AppRoutes/routes.ts

@@ -514,24 +514,24 @@ const routes: AppRoutes[] = [
 		isPrivate: true,
 	},
 	{
-		path: ROUTES.LLM_OBSERVABILITY_ATTRIBUTE_MAPPING,
+		path: ROUTES.AI_OBSERVABILITY_ATTRIBUTE_MAPPING,
 		exact: true,
 		component: LLMObservabilityPage,
-		key: 'LLM_OBSERVABILITY_ATTRIBUTE_MAPPING',
+		key: 'AI_OBSERVABILITY_ATTRIBUTE_MAPPING',
 		isPrivate: true,
 	},
 	{
-		path: ROUTES.LLM_OBSERVABILITY_OVERVIEW,
+		path: ROUTES.AI_OBSERVABILITY_OVERVIEW,
 		exact: true,
 		component: LLMObservabilityPage,
-		key: 'LLM_OBSERVABILITY_OVERVIEW',
+		key: 'AI_OBSERVABILITY_OVERVIEW',
 		isPrivate: true,
 	},
 	{
-		path: ROUTES.LLM_OBSERVABILITY_CONFIGURATION,
+		path: ROUTES.AI_OBSERVABILITY_CONFIGURATION,
 		exact: true,
 		component: LLMObservabilityPage,
-		key: 'LLM_OBSERVABILITY_CONFIGURATION',
+		key: 'AI_OBSERVABILITY_CONFIGURATION',
 		isPrivate: true,
 	},
 ];

frontend/src/__tests__/fields_api.util.ts

@@ -0,0 +1,20 @@
+import { ENVIRONMENT } from 'constants/env';
+import { server } from 'mocks-server/server';
+import { rest } from 'msw';
+
+export function mockFieldsAPIsWithEmptyResponse(): void {
+	server.use(
+		rest.get(`${ENVIRONMENT.baseURL}/api/v1/fields/keys`, (_, res, ctx) =>
+			res(
+				ctx.status(200),
+				ctx.json({ status: 'success', data: { keys: {}, complete: true } }),
+			),
+		),
+		rest.get(`${ENVIRONMENT.baseURL}/api/v1/fields/values`, (_, res, ctx) =>
+			res(
+				ctx.status(200),
+				ctx.json({ status: 'success', data: { values: {}, complete: true } }),
+			),
+		),
+	);
+}

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

@@ -41,6 +41,7 @@ import type {
 	GetPublicDashboardDataV2200,
 	GetPublicDashboardDataV2PathParameters,
 	GetPublicDashboardPanelQueryRangeV2200,
+	GetPublicDashboardPanelQueryRangeV2Params,
 	GetPublicDashboardPanelQueryRangeV2PathParameters,
 	GetPublicDashboardPathParameters,
 	GetPublicDashboardWidgetQueryRange200,
@@ -1912,20 +1913,25 @@ export const invalidateGetPublicDashboardDataV2 = async (
  */
 export const getPublicDashboardPanelQueryRangeV2 = (
 	{ id, key }: GetPublicDashboardPanelQueryRangeV2PathParameters,
+	params?: GetPublicDashboardPanelQueryRangeV2Params,
 	signal?: AbortSignal,
 ) => {
 	return GeneratedAPIInstance<GetPublicDashboardPanelQueryRangeV2200>({
 		url: `/api/v2/public/dashboards/${id}/panels/${key}/query_range`,
 		method: 'GET',
+		params,
 		signal,
 	});
 };
 
-export const getGetPublicDashboardPanelQueryRangeV2QueryKey = ({
-	id,
-	key,
-}: GetPublicDashboardPanelQueryRangeV2PathParameters) => {
-	return [`/api/v2/public/dashboards/${id}/panels/${key}/query_range`] as const;
+export const getGetPublicDashboardPanelQueryRangeV2QueryKey = (
+	{ id, key }: GetPublicDashboardPanelQueryRangeV2PathParameters,
+	params?: GetPublicDashboardPanelQueryRangeV2Params,
+) => {
+	return [
+		`/api/v2/public/dashboards/${id}/panels/${key}/query_range`,
+		...(params ? [params] : []),
+	] as const;
 };
 
 export const getGetPublicDashboardPanelQueryRangeV2QueryOptions = <
@@ -1933,6 +1939,7 @@ export const getGetPublicDashboardPanelQueryRangeV2QueryOptions = <
 	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	{ id, key }: GetPublicDashboardPanelQueryRangeV2PathParameters,
+	params?: GetPublicDashboardPanelQueryRangeV2Params,
 	options?: {
 		query?: UseQueryOptions<
 			Awaited<ReturnType<typeof getPublicDashboardPanelQueryRangeV2>>,
@@ -1945,11 +1952,12 @@ export const getGetPublicDashboardPanelQueryRangeV2QueryOptions = <
 
 	const queryKey =
 		queryOptions?.queryKey ??
-		getGetPublicDashboardPanelQueryRangeV2QueryKey({ id, key });
+		getGetPublicDashboardPanelQueryRangeV2QueryKey({ id, key }, params);
 
 	const queryFn: QueryFunction<
 		Awaited<ReturnType<typeof getPublicDashboardPanelQueryRangeV2>>
-	> = ({ signal }) => getPublicDashboardPanelQueryRangeV2({ id, key }, signal);
+	> = ({ signal }) =>
+		getPublicDashboardPanelQueryRangeV2({ id, key }, params, signal);
 
 	return {
 		queryKey,
@@ -1978,6 +1986,7 @@ export function useGetPublicDashboardPanelQueryRangeV2<
 	TError = ErrorType<RenderErrorResponseDTO>,
 >(
 	{ id, key }: GetPublicDashboardPanelQueryRangeV2PathParameters,
+	params?: GetPublicDashboardPanelQueryRangeV2Params,
 	options?: {
 		query?: UseQueryOptions<
 			Awaited<ReturnType<typeof getPublicDashboardPanelQueryRangeV2>>,
@@ -1988,6 +1997,7 @@ export function useGetPublicDashboardPanelQueryRangeV2<
 ): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
 	const queryOptions = getGetPublicDashboardPanelQueryRangeV2QueryOptions(
 		{ id, key },
+		params,
 		options,
 	);
 
@@ -2004,10 +2014,16 @@ export function useGetPublicDashboardPanelQueryRangeV2<
 export const invalidateGetPublicDashboardPanelQueryRangeV2 = async (
 	queryClient: QueryClient,
 	{ id, key }: GetPublicDashboardPanelQueryRangeV2PathParameters,
+	params?: GetPublicDashboardPanelQueryRangeV2Params,
 	options?: InvalidateOptions,
 ): Promise<QueryClient> => {
 	await queryClient.invalidateQueries(
-		{ queryKey: getGetPublicDashboardPanelQueryRangeV2QueryKey({ id, key }) },
+		{
+			queryKey: getGetPublicDashboardPanelQueryRangeV2QueryKey(
+				{ id, key },
+				params,
+			),
+		},
 		options,
 	);
 

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

@@ -219,7 +219,7 @@ export const useListClusters = <
 	return useMutation(getListClustersMutationOptions(options));
 };
 /**
- * Returns a paginated list of Kubernetes DaemonSets with key aggregated pod metrics: CPU usage and memory working set summed across pods owned by the daemonset, plus average CPU/memory request and limit utilization (daemonSetCPURequest, daemonSetCPULimit, daemonSetMemoryRequest, daemonSetMemoryLimit). Each row also reports the latest known node-level counters from kube-state-metrics: desiredNodes (k8s.daemonset.desired_scheduled_nodes, the number of nodes the daemonset wants to run on) and currentNodes (k8s.daemonset.current_scheduled_nodes, the number of nodes the daemonset currently runs on) — note these are node counts, not pod counts. It also reports per-group podCountsByPhase ({ pending, running, succeeded, failed, unknown } from each pod's latest k8s.pod.phase value). Each daemonset includes metadata attributes (k8s.daemonset.name, k8s.namespace.name, k8s.cluster.name). The response type is 'list' for the default k8s.daemonset.name grouping or 'grouped_list' for custom groupBy keys; in both modes every row aggregates pods owned by daemonsets in the group. Supports filtering via a filter expression, custom groupBy, ordering by cpu / cpu_request / cpu_limit / memory / memory_request / memory_limit / desired_nodes / current_nodes, and pagination via offset/limit. Also reports whether the requested time range falls before the data retention boundary. Numeric metric fields (daemonSetCPU, daemonSetCPURequest, daemonSetCPULimit, daemonSetMemory, daemonSetMemoryRequest, daemonSetMemoryLimit, desiredNodes, currentNodes) return -1 as a sentinel when no data is available for that field.
+ * Returns a paginated list of Kubernetes DaemonSets with key aggregated pod metrics: CPU usage and memory working set summed across pods owned by the daemonset, plus average CPU/memory request and limit utilization (daemonSetCPURequest, daemonSetCPULimit, daemonSetMemoryRequest, daemonSetMemoryLimit). Each row also reports the latest known node-level counters from kube-state-metrics: desiredNodes (k8s.daemonset.desired_scheduled_nodes, the number of nodes the daemonset wants to run on), currentNodes (k8s.daemonset.current_scheduled_nodes, the number of nodes the daemonset currently runs on), readyNodes (k8s.daemonset.ready_nodes, the number of nodes running at least one ready daemon pod) and misscheduledNodes (k8s.daemonset.misscheduled_nodes, the number of nodes running the daemon pod but not supposed to) — note these are node counts, not pod counts. It also reports per-group podCountsByPhase ({ pending, running, succeeded, failed, unknown } from each pod's latest k8s.pod.phase value). Each daemonset includes metadata attributes (k8s.daemonset.name, k8s.namespace.name, k8s.cluster.name). The response type is 'list' for the default k8s.daemonset.name grouping or 'grouped_list' for custom groupBy keys; in both modes every row aggregates pods owned by daemonsets in the group. Supports filtering via a filter expression, custom groupBy, ordering by cpu / cpu_request / cpu_limit / memory / memory_request / memory_limit / desired_nodes / current_nodes / ready_nodes / misscheduled_nodes, and pagination via offset/limit. Also reports whether the requested time range falls before the data retention boundary. Numeric metric fields (daemonSetCPU, daemonSetCPURequest, daemonSetCPULimit, daemonSetMemory, daemonSetMemoryRequest, daemonSetMemoryLimit, desiredNodes, currentNodes, readyNodes, misscheduledNodes) return -1 as a sentinel when no data is available for that field.
  * @summary List DaemonSets for Infra Monitoring
  */
 export const listDaemonSets = (

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

@@ -2082,6 +2082,39 @@ export interface AuthtypesGettableAuthDomainDTO {
 	updatedAt?: string;
 }
 
+export interface AuthtypesGettableRoleDTO {
+	/**
+	 * @type string
+	 * @format date-time
+	 */
+	createdAt?: string;
+	/**
+	 * @type string
+	 */
+	description: string;
+	/**
+	 * @type string
+	 */
+	id: string;
+	/**
+	 * @type string
+	 */
+	name: string;
+	/**
+	 * @type string
+	 */
+	orgId: string;
+	/**
+	 * @type string
+	 */
+	type: string;
+	/**
+	 * @type string
+	 * @format date-time
+	 */
+	updatedAt?: string;
+}
+
 export interface AuthtypesGettableTokenDTO {
 	/**
 	 * @type string
@@ -2325,39 +2358,6 @@ export interface AuthtypesPostableUserRoleDTO {
 }
 
 export interface AuthtypesRoleDTO {
-	/**
-	 * @type string
-	 * @format date-time
-	 */
-	createdAt?: string;
-	/**
-	 * @type string
-	 */
-	description: string;
-	/**
-	 * @type string
-	 */
-	id: string;
-	/**
-	 * @type string
-	 */
-	name: string;
-	/**
-	 * @type string
-	 */
-	orgId: string;
-	/**
-	 * @type string
-	 */
-	type: string;
-	/**
-	 * @type string
-	 * @format date-time
-	 */
-	updatedAt?: string;
-}
-
-export interface AuthtypesRoleWithTransactionGroupsDTO {
 	/**
 	 * @type string
 	 * @format date-time
@@ -2813,7 +2813,8 @@ export enum CloudintegrationtypesServiceIDDTO {
 	cosmosdb = 'cosmosdb',
 	cassandradb = 'cassandradb',
 	redis = 'redis',
-	cloudsql = 'cloudsql',
+	cloudsql_postgres = 'cloudsql_postgres',
+	memorystore_redis = 'memorystore_redis',
 }
 export type CloudintegrationtypesCloudIntegrationServiceDTOAnyOf = {
 	/**
@@ -3300,29 +3301,6 @@ export interface DashboardGridLayoutSpecDTO {
 	repeatVariable?: string;
 }
 
-export interface DashboardLinkDTO {
-	/**
-	 * @type string
-	 */
-	name?: string;
-	/**
-	 * @type boolean
-	 */
-	renderVariables?: boolean;
-	/**
-	 * @type boolean
-	 */
-	targetBlank?: boolean;
-	/**
-	 * @type string
-	 */
-	tooltip?: string;
-	/**
-	 * @type string
-	 */
-	url?: string;
-}
-
 export interface DashboardtypesAxesDTO {
 	/**
 	 * @type boolean
@@ -3489,9 +3467,9 @@ export enum Querybuildertypesv5FunctionNameDTO {
 }
 export interface Querybuildertypesv5FunctionDTO {
 	/**
-	 * @type array
+	 * @type array,null
 	 */
-	args?: Querybuildertypesv5FunctionArgDTO[];
+	args?: Querybuildertypesv5FunctionArgDTO[] | null;
 	name?: Querybuildertypesv5FunctionNameDTO;
 }
 
@@ -3502,6 +3480,7 @@ export enum TelemetrytypesFieldContextDTO {
 	resource = 'resource',
 	attribute = 'attribute',
 	body = 'body',
+	'' = '',
 }
 export enum TelemetrytypesFieldDataTypeDTO {
 	string = 'string',
@@ -3509,11 +3488,13 @@ export enum TelemetrytypesFieldDataTypeDTO {
 	float64 = 'float64',
 	int64 = 'int64',
 	number = 'number',
+	'' = '',
 }
 export enum TelemetrytypesSignalDTO {
 	traces = 'traces',
 	logs = 'logs',
 	metrics = 'metrics',
+	'' = '',
 }
 export interface Querybuildertypesv5GroupByKeyDTO {
 	/**
@@ -3593,18 +3574,18 @@ export interface Querybuildertypesv5SecondaryAggregationDTO {
 	 */
 	expression?: string;
 	/**
-	 * @type array
+	 * @type array,null
 	 */
-	groupBy?: Querybuildertypesv5GroupByKeyDTO[];
+	groupBy?: Querybuildertypesv5GroupByKeyDTO[] | null;
 	/**
 	 * @type integer
 	 */
 	limit?: number;
 	limitBy?: Querybuildertypesv5LimitByDTO;
 	/**
-	 * @type array
+	 * @type array,null
 	 */
-	order?: Querybuildertypesv5OrderByDTO[];
+	order?: Querybuildertypesv5OrderByDTO[] | null;
 	stepInterval?: Querybuildertypesv5StepDTO;
 }
 
@@ -3631,12 +3612,13 @@ export enum Querybuildertypesv5QueryBuilderQueryGithubComSigNozSignozPkgTypesQue
 }
 export enum TelemetrytypesSourceDTO {
 	meter = 'meter',
+	'' = '',
 }
 export interface Querybuildertypesv5QueryBuilderQueryGithubComSigNozSignozPkgTypesQuerybuildertypesQuerybuildertypesv5LogAggregationDTO {
 	/**
-	 * @type array
+	 * @type array,null
 	 */
-	aggregations?: Querybuildertypesv5LogAggregationDTO[];
+	aggregations?: Querybuildertypesv5LogAggregationDTO[] | null;
 	/**
 	 * @type string
 	 */
@@ -3647,13 +3629,13 @@ export interface Querybuildertypesv5QueryBuilderQueryGithubComSigNozSignozPkgTyp
 	disabled?: boolean;
 	filter?: Querybuildertypesv5FilterDTO;
 	/**
-	 * @type array
+	 * @type array,null
 	 */
-	functions?: Querybuildertypesv5FunctionDTO[];
+	functions?: Querybuildertypesv5FunctionDTO[] | null;
 	/**
-	 * @type array
+	 * @type array,null
 	 */
-	groupBy?: Querybuildertypesv5GroupByKeyDTO[];
+	groupBy?: Querybuildertypesv5GroupByKeyDTO[] | null;
 	having?: Querybuildertypesv5HavingDTO;
 	/**
 	 * @type string
@@ -3673,17 +3655,17 @@ export interface Querybuildertypesv5QueryBuilderQueryGithubComSigNozSignozPkgTyp
 	 */
 	offset?: number;
 	/**
-	 * @type array
+	 * @type array,null
 	 */
-	order?: Querybuildertypesv5OrderByDTO[];
+	order?: Querybuildertypesv5OrderByDTO[] | null;
 	/**
-	 * @type array
+	 * @type array,null
 	 */
-	secondaryAggregations?: Querybuildertypesv5SecondaryAggregationDTO[];
+	secondaryAggregations?: Querybuildertypesv5SecondaryAggregationDTO[] | null;
 	/**
-	 * @type array
+	 * @type array,null
 	 */
-	selectFields?: TelemetrytypesTelemetryFieldKeyDTO[];
+	selectFields?: TelemetrytypesTelemetryFieldKeyDTO[] | null;
 	/**
 	 * @enum logs
 	 * @type string
@@ -3730,6 +3712,7 @@ export enum MetrictypesTemporalityDTO {
 	delta = 'delta',
 	cumulative = 'cumulative',
 	unspecified = 'unspecified',
+	'' = '',
 }
 export enum MetrictypesTimeAggregationDTO {
 	latest = 'latest',
@@ -3741,6 +3724,7 @@ export enum MetrictypesTimeAggregationDTO {
 	count_distinct = 'count_distinct',
 	rate = 'rate',
 	increase = 'increase',
+	'' = '',
 }
 export interface Querybuildertypesv5MetricAggregationDTO {
 	comparisonSpaceAggregationParam?: MetrictypesComparisonSpaceAggregationParamDTO;
@@ -3759,9 +3743,9 @@ export enum Querybuildertypesv5QueryBuilderQueryGithubComSigNozSignozPkgTypesQue
 }
 export interface Querybuildertypesv5QueryBuilderQueryGithubComSigNozSignozPkgTypesQuerybuildertypesQuerybuildertypesv5MetricAggregationDTO {
 	/**
-	 * @type array
+	 * @type array,null
 	 */
-	aggregations?: Querybuildertypesv5MetricAggregationDTO[];
+	aggregations?: Querybuildertypesv5MetricAggregationDTO[] | null;
 	/**
 	 * @type string
 	 */
@@ -3772,13 +3756,13 @@ export interface Querybuildertypesv5QueryBuilderQueryGithubComSigNozSignozPkgTyp
 	disabled?: boolean;
 	filter?: Querybuildertypesv5FilterDTO;
 	/**
-	 * @type array
+	 * @type array,null
 	 */
-	functions?: Querybuildertypesv5FunctionDTO[];
+	functions?: Querybuildertypesv5FunctionDTO[] | null;
 	/**
-	 * @type array
+	 * @type array,null
 	 */
-	groupBy?: Querybuildertypesv5GroupByKeyDTO[];
+	groupBy?: Querybuildertypesv5GroupByKeyDTO[] | null;
 	having?: Querybuildertypesv5HavingDTO;
 	/**
 	 * @type string
@@ -3798,17 +3782,17 @@ export interface Querybuildertypesv5QueryBuilderQueryGithubComSigNozSignozPkgTyp
 	 */
 	offset?: number;
 	/**
-	 * @type array
+	 * @type array,null
 	 */
-	order?: Querybuildertypesv5OrderByDTO[];
+	order?: Querybuildertypesv5OrderByDTO[] | null;
 	/**
-	 * @type array
+	 * @type array,null
 	 */
-	secondaryAggregations?: Querybuildertypesv5SecondaryAggregationDTO[];
+	secondaryAggregations?: Querybuildertypesv5SecondaryAggregationDTO[] | null;
 	/**
-	 * @type array
+	 * @type array,null
 	 */
-	selectFields?: TelemetrytypesTelemetryFieldKeyDTO[];
+	selectFields?: TelemetrytypesTelemetryFieldKeyDTO[] | null;
 	/**
 	 * @enum metrics
 	 * @type string
@@ -3834,9 +3818,9 @@ export enum Querybuildertypesv5QueryBuilderQueryGithubComSigNozSignozPkgTypesQue
 }
 export interface Querybuildertypesv5QueryBuilderQueryGithubComSigNozSignozPkgTypesQuerybuildertypesQuerybuildertypesv5TraceAggregationDTO {
 	/**
-	 * @type array
+	 * @type array,null
 	 */
-	aggregations?: Querybuildertypesv5TraceAggregationDTO[];
+	aggregations?: Querybuildertypesv5TraceAggregationDTO[] | null;
 	/**
 	 * @type string
 	 */
@@ -3847,13 +3831,13 @@ export interface Querybuildertypesv5QueryBuilderQueryGithubComSigNozSignozPkgTyp
 	disabled?: boolean;
 	filter?: Querybuildertypesv5FilterDTO;
 	/**
-	 * @type array
+	 * @type array,null
 	 */
-	functions?: Querybuildertypesv5FunctionDTO[];
+	functions?: Querybuildertypesv5FunctionDTO[] | null;
 	/**
-	 * @type array
+	 * @type array,null
 	 */
-	groupBy?: Querybuildertypesv5GroupByKeyDTO[];
+	groupBy?: Querybuildertypesv5GroupByKeyDTO[] | null;
 	having?: Querybuildertypesv5HavingDTO;
 	/**
 	 * @type string
@@ -3873,17 +3857,17 @@ export interface Querybuildertypesv5QueryBuilderQueryGithubComSigNozSignozPkgTyp
 	 */
 	offset?: number;
 	/**
-	 * @type array
+	 * @type array,null
 	 */
-	order?: Querybuildertypesv5OrderByDTO[];
+	order?: Querybuildertypesv5OrderByDTO[] | null;
 	/**
-	 * @type array
+	 * @type array,null
 	 */
-	secondaryAggregations?: Querybuildertypesv5SecondaryAggregationDTO[];
+	secondaryAggregations?: Querybuildertypesv5SecondaryAggregationDTO[] | null;
 	/**
-	 * @type array
+	 * @type array,null
 	 */
-	selectFields?: TelemetrytypesTelemetryFieldKeyDTO[];
+	selectFields?: TelemetrytypesTelemetryFieldKeyDTO[] | null;
 	/**
 	 * @enum traces
 	 * @type string
@@ -4034,10 +4018,16 @@ export interface DashboardtypesDatasourceSpecDTO {
 	plugin?: DashboardtypesDatasourcePluginDTO;
 }
 
-export type DashboardtypesDashboardSpecDTODatasources = {
+export type DashboardtypesDashboardSpecDTODatasourcesAnyOf = {
 	[key: string]: DashboardtypesDatasourceSpecDTO;
 };
 
+/**
+ * @nullable
+ */
+export type DashboardtypesDashboardSpecDTODatasources =
+	DashboardtypesDashboardSpecDTODatasourcesAnyOf | null;
+
 export enum DashboardtypesPanelKindDTO {
 	Panel = 'Panel',
 }
@@ -4052,6 +4042,29 @@ export interface DashboardtypesDisplayDTO {
 	name: string;
 }
 
+export interface DashboardtypesLinkDTO {
+	/**
+	 * @type string
+	 */
+	name?: string;
+	/**
+	 * @type boolean
+	 */
+	renderVariables?: boolean;
+	/**
+	 * @type boolean
+	 */
+	targetBlank?: boolean;
+	/**
+	 * @type string
+	 */
+	tooltip?: string;
+	/**
+	 * @type string
+	 */
+	url?: string;
+}
+
 export enum DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTimeSeriesPanelSpecDTOKind {
 	'signoz/TimeSeriesPanel' = 'signoz/TimeSeriesPanel',
 }
@@ -4272,9 +4285,9 @@ export enum DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboa
 }
 export interface DashboardtypesListPanelSpecDTO {
 	/**
-	 * @type array
+	 * @type array,null
 	 */
-	selectFields?: TelemetrytypesTelemetryFieldKeyDTO[];
+	selectFields?: TelemetrytypesTelemetryFieldKeyDTO[] | null;
 }
 
 export interface DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesListPanelSpecDTO {
@@ -4344,9 +4357,9 @@ export interface Querybuildertypesv5QueryBuilderFormulaDTO {
 	 */
 	expression?: string;
 	/**
-	 * @type array
+	 * @type array,null
 	 */
-	functions?: Querybuildertypesv5FunctionDTO[];
+	functions?: Querybuildertypesv5FunctionDTO[] | null;
 	having?: Querybuildertypesv5HavingDTO;
 	/**
 	 * @type string
@@ -4361,9 +4374,9 @@ export interface Querybuildertypesv5QueryBuilderFormulaDTO {
 	 */
 	name?: string;
 	/**
-	 * @type array
+	 * @type array,null
 	 */
-	order?: Querybuildertypesv5OrderByDTO[];
+	order?: Querybuildertypesv5OrderByDTO[] | null;
 }
 
 export enum Querybuildertypesv5QueryEnvelopeFormulaDTOType {
@@ -4380,9 +4393,9 @@ export interface Querybuildertypesv5QueryEnvelopeFormulaDTO {
 
 export interface Querybuildertypesv5QueryBuilderTraceOperatorDTO {
 	/**
-	 * @type array
+	 * @type array,null
 	 */
-	aggregations?: Querybuildertypesv5TraceAggregationDTO[];
+	aggregations?: Querybuildertypesv5TraceAggregationDTO[] | null;
 	/**
 	 * @type string
 	 */
@@ -4397,13 +4410,13 @@ export interface Querybuildertypesv5QueryBuilderTraceOperatorDTO {
 	expression?: string;
 	filter?: Querybuildertypesv5FilterDTO;
 	/**
-	 * @type array
+	 * @type array,null
 	 */
-	functions?: Querybuildertypesv5FunctionDTO[];
+	functions?: Querybuildertypesv5FunctionDTO[] | null;
 	/**
-	 * @type array
+	 * @type array,null
 	 */
-	groupBy?: Querybuildertypesv5GroupByKeyDTO[];
+	groupBy?: Querybuildertypesv5GroupByKeyDTO[] | null;
 	having?: Querybuildertypesv5HavingDTO;
 	/**
 	 * @type string
@@ -4422,17 +4435,17 @@ export interface Querybuildertypesv5QueryBuilderTraceOperatorDTO {
 	 */
 	offset?: number;
 	/**
-	 * @type array
+	 * @type array,null
 	 */
-	order?: Querybuildertypesv5OrderByDTO[];
+	order?: Querybuildertypesv5OrderByDTO[] | null;
 	/**
 	 * @type string
 	 */
 	returnSpansFrom?: string;
 	/**
-	 * @type array
+	 * @type array,null
 	 */
-	selectFields?: TelemetrytypesTelemetryFieldKeyDTO[];
+	selectFields?: TelemetrytypesTelemetryFieldKeyDTO[] | null;
 	stepInterval?: Querybuildertypesv5StepDTO;
 }
 
@@ -4613,9 +4626,9 @@ export interface DashboardtypesQueryDTO {
 export interface DashboardtypesPanelSpecDTO {
 	display: DashboardtypesDisplayDTO;
 	/**
-	 * @type array
+	 * @type array,null
 	 */
-	links?: DashboardLinkDTO[];
+	links?: DashboardtypesLinkDTO[] | null;
 	plugin: DashboardtypesPanelPluginDTO;
 	/**
 	 * @type array
@@ -4789,7 +4802,7 @@ export type DashboardtypesVariableDTO =
 
 export interface DashboardtypesDashboardSpecDTO {
 	/**
-	 * @type object
+	 * @type object,null
 	 */
 	datasources?: DashboardtypesDashboardSpecDTODatasources;
 	display: DashboardtypesDisplayDTO;
@@ -4802,9 +4815,9 @@ export interface DashboardtypesDashboardSpecDTO {
 	 */
 	layouts: DashboardtypesLayoutDTO[];
 	/**
-	 * @type array
+	 * @type array,null
 	 */
-	links?: DashboardLinkDTO[];
+	links?: DashboardtypesLinkDTO[] | null;
 	/**
 	 * @type object
 	 */
@@ -5005,6 +5018,10 @@ export interface DashboardtypesListedDashboardForUserV2DTO {
 	 * @type string
 	 */
 	image?: string;
+	/**
+	 * @type boolean
+	 */
+	legacy: boolean;
 	/**
 	 * @type boolean
 	 */
@@ -5080,6 +5097,10 @@ export interface DashboardtypesListedDashboardV2DTO {
 	 * @type string
 	 */
 	image?: string;
+	/**
+	 * @type boolean
+	 */
+	legacy: boolean;
 	/**
 	 * @type boolean
 	 */
@@ -5661,6 +5682,39 @@ export interface InframonitoringtypesChecksDTO {
 	type: InframonitoringtypesCheckTypeDTO;
 }
 
+export type InframonitoringtypesClusterRecordDTOCounts = {
+	/**
+	 * @type integer
+	 * @format int64
+	 */
+	daemonSets: number;
+	/**
+	 * @type integer
+	 * @format int64
+	 */
+	deployments: number;
+	/**
+	 * @type integer
+	 * @format int64
+	 */
+	jobs: number;
+	/**
+	 * @type integer
+	 * @format int64
+	 */
+	namespaces: number;
+	/**
+	 * @type integer
+	 * @format int64
+	 */
+	nodes: number;
+	/**
+	 * @type integer
+	 * @format int64
+	 */
+	statefulSets: number;
+};
+
 export type InframonitoringtypesClusterRecordDTOMetaAnyOf = {
 	[key: string]: string;
 };
@@ -5805,6 +5859,10 @@ export interface InframonitoringtypesClusterRecordDTO {
 	 * @type string
 	 */
 	clusterName: string;
+	/**
+	 * @type object
+	 */
+	counts: InframonitoringtypesClusterRecordDTOCounts;
 	/**
 	 * @type object,null
 	 */
@@ -6082,8 +6140,16 @@ export interface InframonitoringtypesDaemonSetRecordDTO {
 	 * @type object,null
 	 */
 	meta: InframonitoringtypesDaemonSetRecordDTOMeta;
+	/**
+	 * @type integer
+	 */
+	misscheduledNodes: number;
 	podCountsByPhase: InframonitoringtypesPodCountsByPhaseDTO;
 	podCountsByStatus: InframonitoringtypesPodCountsByStatusDTO;
+	/**
+	 * @type integer
+	 */
+	readyNodes: number;
 }
 
 export interface InframonitoringtypesDaemonSetsDTO {
@@ -6352,6 +6418,29 @@ export interface InframonitoringtypesJobsDTO {
 	warning?: Querybuildertypesv5QueryWarnDataDTO;
 }
 
+export type InframonitoringtypesNamespaceRecordDTOCounts = {
+	/**
+	 * @type integer
+	 * @format int64
+	 */
+	daemonSets: number;
+	/**
+	 * @type integer
+	 * @format int64
+	 */
+	deployments: number;
+	/**
+	 * @type integer
+	 * @format int64
+	 */
+	jobs: number;
+	/**
+	 * @type integer
+	 * @format int64
+	 */
+	statefulSets: number;
+};
+
 export type InframonitoringtypesNamespaceRecordDTOMetaAnyOf = {
 	[key: string]: string;
 };
@@ -6363,6 +6452,10 @@ export type InframonitoringtypesNamespaceRecordDTOMeta =
 	InframonitoringtypesNamespaceRecordDTOMetaAnyOf | null;
 
 export interface InframonitoringtypesNamespaceRecordDTO {
+	/**
+	 * @type object
+	 */
+	counts: InframonitoringtypesNamespaceRecordDTOCounts;
 	/**
 	 * @type object,null
 	 */
@@ -8480,10 +8573,12 @@ export interface RuletypesBasicRuleThresholdDTO {
 	op: RuletypesCompareOperatorDTO;
 	/**
 	 * @type number,null
+	 * @format double
 	 */
 	recoveryTarget?: number | null;
 	/**
 	 * @type number,null
+	 * @format double
 	 */
 	target: number | null;
 	/**
@@ -8593,9 +8688,9 @@ export interface RuletypesGettableTestRuleDTO {
 
 export interface RuletypesRenotifyDTO {
 	/**
-	 * @type array
+	 * @type array,null
 	 */
-	alertStates?: RuletypesAlertStateDTO[];
+	alertStates?: RuletypesAlertStateDTO[] | null;
 	/**
 	 * @type boolean
 	 */
@@ -8608,9 +8703,9 @@ export interface RuletypesRenotifyDTO {
 
 export interface RuletypesNotificationSettingsDTO {
 	/**
-	 * @type array
+	 * @type array,null
 	 */
-	groupBy?: string[];
+	groupBy?: string[] | null;
 	/**
 	 * @type string
 	 */
@@ -8677,6 +8772,7 @@ export interface RuletypesRuleConditionDTO {
 	selectedQueryName?: string;
 	/**
 	 * @type number,null
+	 * @format double
 	 */
 	target?: number | null;
 	/**
@@ -9175,6 +9271,118 @@ export interface SpantypesGettableSpanMapperGroupsDTO {
 	items: SpantypesSpanMapperGroupDTO[];
 }
 
+export type SpantypesSpanMapperTestSpanDTOAttributesAnyOf = {
+	[key: string]: unknown;
+};
+
+/**
+ * @nullable
+ */
+export type SpantypesSpanMapperTestSpanDTOAttributes =
+	SpantypesSpanMapperTestSpanDTOAttributesAnyOf | null;
+
+export type SpantypesSpanMapperTestSpanDTOResourceAnyOf = {
+	[key: string]: unknown;
+};
+
+/**
+ * @nullable
+ */
+export type SpantypesSpanMapperTestSpanDTOResource =
+	SpantypesSpanMapperTestSpanDTOResourceAnyOf | null;
+
+export interface SpantypesSpanMapperTestSpanDTO {
+	/**
+	 * @type object,null
+	 */
+	attributes?: SpantypesSpanMapperTestSpanDTOAttributes;
+	/**
+	 * @type object,null
+	 */
+	resource?: SpantypesSpanMapperTestSpanDTOResource;
+}
+
+export interface SpantypesGettableSpanMapperTestDTO {
+	/**
+	 * @type array,null
+	 */
+	collectorLogs?: string[] | null;
+	/**
+	 * @type array,null
+	 */
+	spans?: SpantypesSpanMapperTestSpanDTO[] | null;
+}
+
+export enum SpantypesSpanMapperOperationDTO {
+	move = 'move',
+	copy = 'copy',
+}
+export interface SpantypesSpanMapperSourceDTO {
+	context: SpantypesFieldContextDTO;
+	/**
+	 * @type string
+	 */
+	key: string;
+	operation: SpantypesSpanMapperOperationDTO;
+	/**
+	 * @type integer
+	 */
+	priority: number;
+}
+
+export interface SpantypesSpanMapperConfigDTO {
+	/**
+	 * @type array,null
+	 */
+	sources: SpantypesSpanMapperSourceDTO[] | null;
+}
+
+export interface SpantypesSpanMapperDTO {
+	config: SpantypesSpanMapperConfigDTO;
+	/**
+	 * @type string
+	 * @format date-time
+	 */
+	createdAt?: string;
+	/**
+	 * @type string
+	 */
+	createdBy?: string;
+	/**
+	 * @type boolean
+	 */
+	enabled: boolean;
+	fieldContext: SpantypesFieldContextDTO;
+	/**
+	 * @type string
+	 */
+	groupId: string;
+	/**
+	 * @type string
+	 */
+	id: string;
+	/**
+	 * @type string
+	 */
+	name: string;
+	/**
+	 * @type string
+	 * @format date-time
+	 */
+	updatedAt?: string;
+	/**
+	 * @type string
+	 */
+	updatedBy?: string;
+}
+
+export interface SpantypesGettableSpanMappersDTO {
+	/**
+	 * @type array
+	 */
+	items: SpantypesSpanMapperDTO[];
+}
+
 export enum SpantypesSpanAggregationTypeDTO {
 	span_count = 'span_count',
 	execution_time_percentage = 'execution_time_percentage',
@@ -9421,30 +9629,6 @@ export interface SpantypesPostableFlamegraphDTO {
 	selectedSpanId?: string;
 }
 
-export enum SpantypesSpanMapperOperationDTO {
-	move = 'move',
-	copy = 'copy',
-}
-export interface SpantypesSpanMapperSourceDTO {
-	context: SpantypesFieldContextDTO;
-	/**
-	 * @type string
-	 */
-	key: string;
-	operation: SpantypesSpanMapperOperationDTO;
-	/**
-	 * @type integer
-	 */
-	priority: number;
-}
-
-export interface SpantypesSpanMapperConfigDTO {
-	/**
-	 * @type array,null
-	 */
-	sources: SpantypesSpanMapperSourceDTO[] | null;
-}
-
 export interface SpantypesPostableSpanMapperDTO {
 	config: SpantypesSpanMapperConfigDTO;
 	/**
@@ -9470,6 +9654,33 @@ export interface SpantypesPostableSpanMapperGroupDTO {
 	name: string;
 }
 
+export interface SpantypesPostableSpanMapperTestGroupDTO {
+	condition: SpantypesSpanMapperGroupConditionDTO | null;
+	/**
+	 * @type boolean
+	 */
+	enabled?: boolean;
+	/**
+	 * @type array,null
+	 */
+	mappers?: SpantypesPostableSpanMapperDTO[] | null;
+	/**
+	 * @type string
+	 */
+	name: string;
+}
+
+export interface SpantypesPostableSpanMapperTestDTO {
+	/**
+	 * @type array,null
+	 */
+	groups: SpantypesPostableSpanMapperTestGroupDTO[] | null;
+	/**
+	 * @type array,null
+	 */
+	spans: SpantypesSpanMapperTestSpanDTO[] | null;
+}
+
 export interface SpantypesSpanAggregationDTO {
 	aggregation: SpantypesSpanAggregationTypeDTO;
 	field: TelemetrytypesTelemetryFieldKeyDTO;
@@ -9493,45 +9704,6 @@ export interface SpantypesPostableWaterfallDTO {
 	uncollapsedSpans?: string[] | null;
 }
 
-export interface SpantypesSpanMapperDTO {
-	config: SpantypesSpanMapperConfigDTO;
-	/**
-	 * @type string
-	 * @format date-time
-	 */
-	createdAt?: string;
-	/**
-	 * @type string
-	 */
-	createdBy?: string;
-	/**
-	 * @type boolean
-	 */
-	enabled: boolean;
-	fieldContext: SpantypesFieldContextDTO;
-	/**
-	 * @type string
-	 */
-	group_id: string;
-	/**
-	 * @type string
-	 */
-	id: string;
-	/**
-	 * @type string
-	 */
-	name: string;
-	/**
-	 * @type string
-	 * @format date-time
-	 */
-	updatedAt?: string;
-	/**
-	 * @type string
-	 */
-	updatedBy?: string;
-}
-
 export interface SpantypesUpdatableSpanMapperDTO {
 	config?: SpantypesSpanMapperConfigDTO;
 	/**
@@ -10595,7 +10767,7 @@ export type ListRoles200 = {
 	/**
 	 * @type array
 	 */
-	data: AuthtypesRoleDTO[];
+	data: AuthtypesGettableRoleDTO[];
 	/**
 	 * @type string
 	 */
@@ -10617,7 +10789,7 @@ export type GetRolePathParameters = {
 	id: string;
 };
 export type GetRole200 = {
-	data: AuthtypesRoleWithTransactionGroupsDTO;
+	data: AuthtypesRoleDTO;
 	/**
 	 * @type string
 	 */
@@ -10833,7 +11005,7 @@ export type ListSpanMappersPathParameters = {
 	groupId: string;
 };
 export type ListSpanMappers200 = {
-	data: SpantypesGettableSpanMapperGroupsDTO;
+	data: SpantypesGettableSpanMappersDTO;
 	/**
 	 * @type string
 	 */
@@ -10859,6 +11031,14 @@ export type UpdateSpanMapperPathParameters = {
 	groupId: string;
 	mapperId: string;
 };
+export type TestSpanMappers200 = {
+	data: SpantypesGettableSpanMapperTestDTO;
+	/**
+	 * @type string
+	 */
+	status: string;
+};
+
 export type GetStats200Data = { [key: string]: unknown };
 
 export type GetStats200 = {
@@ -11570,6 +11750,19 @@ export type GetPublicDashboardPanelQueryRangeV2PathParameters = {
 	id: string;
 	key: string;
 };
+export type GetPublicDashboardPanelQueryRangeV2Params = {
+	/**
+	 * @type string
+	 * @description undefined
+	 */
+	startTime?: string;
+	/**
+	 * @type string
+	 * @description undefined
+	 */
+	endTime?: string;
+};
+
 export type GetPublicDashboardPanelQueryRangeV2200 = {
 	data: Querybuildertypesv5QueryRangeResponseDTO;
 	/**

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

@@ -30,8 +30,10 @@ import type {
 	RenderErrorResponseDTO,
 	SpantypesPostableSpanMapperDTO,
 	SpantypesPostableSpanMapperGroupDTO,
+	SpantypesPostableSpanMapperTestDTO,
 	SpantypesUpdatableSpanMapperDTO,
 	SpantypesUpdatableSpanMapperGroupDTO,
+	TestSpanMappers200,
 	UpdateSpanMapperGroupPathParameters,
 	UpdateSpanMapperPathParameters,
 } from '../sigNoz.schemas';
@@ -780,3 +782,86 @@ export const useUpdateSpanMapper = <
 > => {
 	return useMutation(getUpdateSpanMapperMutationOptions(options));
 };
+/**
+ * Tests how span mappers would transform sample spans
+ * @summary Test span mappers against sample spans
+ */
+export const testSpanMappers = (
+	spantypesPostableSpanMapperTestDTO?: BodyType<SpantypesPostableSpanMapperTestDTO>,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<TestSpanMappers200>({
+		url: `/api/v1/span_mapper_groups/test`,
+		method: 'POST',
+		headers: { 'Content-Type': 'application/json' },
+		data: spantypesPostableSpanMapperTestDTO,
+		signal,
+	});
+};
+
+export const getTestSpanMappersMutationOptions = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof testSpanMappers>>,
+		TError,
+		{ data?: BodyType<SpantypesPostableSpanMapperTestDTO> },
+		TContext
+	>;
+}): UseMutationOptions<
+	Awaited<ReturnType<typeof testSpanMappers>>,
+	TError,
+	{ data?: BodyType<SpantypesPostableSpanMapperTestDTO> },
+	TContext
+> => {
+	const mutationKey = ['testSpanMappers'];
+	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 testSpanMappers>>,
+		{ data?: BodyType<SpantypesPostableSpanMapperTestDTO> }
+	> = (props) => {
+		const { data } = props ?? {};
+
+		return testSpanMappers(data);
+	};
+
+	return { mutationFn, ...mutationOptions };
+};
+
+export type TestSpanMappersMutationResult = NonNullable<
+	Awaited<ReturnType<typeof testSpanMappers>>
+>;
+export type TestSpanMappersMutationBody =
+	| BodyType<SpantypesPostableSpanMapperTestDTO>
+	| undefined;
+export type TestSpanMappersMutationError = ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary Test span mappers against sample spans
+ */
+export const useTestSpanMappers = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof testSpanMappers>>,
+		TError,
+		{ data?: BodyType<SpantypesPostableSpanMapperTestDTO> },
+		TContext
+	>;
+}): UseMutationResult<
+	Awaited<ReturnType<typeof testSpanMappers>>,
+	TError,
+	{ data?: BodyType<SpantypesPostableSpanMapperTestDTO> },
+	TContext
+> => {
+	return useMutation(getTestSpanMappersMutationOptions(options));
+};

frontend/src/api/querySuggestions/getKeySuggestions.ts

@@ -22,6 +22,7 @@ export const getKeySuggestions = (
 		fieldContext = '',
 		fieldDataType = '',
 		signalSource = '',
+		metricNamespace = '',
 	} = props;
 
 	const encodedSignal = encodeURIComponent(signal);
@@ -30,8 +31,9 @@ export const getKeySuggestions = (
 	const encodedFieldContext = encodeURIComponent(fieldContext);
 	const encodedFieldDataType = encodeURIComponent(fieldDataType);
 	const encodedSource = encodeURIComponent(signalSource);
+	const encodedMetricNamespace = encodeURIComponent(metricNamespace);
 
 	return axios.get(
-		`/fields/keys?signal=${encodedSignal}&searchText=${encodedSearchText}&metricName=${encodedMetricName}&fieldContext=${encodedFieldContext}&fieldDataType=${encodedFieldDataType}&source=${encodedSource}`,
+		`/fields/keys?signal=${encodedSignal}&searchText=${encodedSearchText}&metricName=${encodedMetricName}&fieldContext=${encodedFieldContext}&fieldDataType=${encodedFieldDataType}&source=${encodedSource}&metricNamespace=${encodedMetricNamespace}`,
 	);
 };

frontend/src/auto-import-registry.d.ts

@@ -12,5 +12,4 @@
 
 import '@signozhq/design-tokens';
 import '@signozhq/icons';
-import '@signozhq/resizable';
 import '@signozhq/ui';

frontend/src/components/CreateServiceAccountModal/CreateServiceAccountModal.tsx

@@ -2,7 +2,7 @@ import { Controller, useForm } from 'react-hook-form';
 import { useQueryClient } from 'react-query';
 import { X } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
-import AuthZTooltip from 'lib/authz/components/AuthZTooltip/AuthZTooltip';
+import AuthZButton from 'lib/authz/components/AuthZButton/AuthZButton';
 import { SACreatePermission } from 'lib/authz/hooks/useAuthZ/permissions/service-account.permissions';
 import { DialogFooter, DialogWrapper } from '@signozhq/ui/dialog';
 import { Input } from '@signozhq/ui/input';
@@ -92,6 +92,7 @@ function CreateServiceAccountModal(): JSX.Element {
 			width="narrow"
 			className="create-sa-modal"
 			disableOutsideClick={isErrorModalVisible}
+			testId="create-service-account-modal"
 		>
 			<div className="create-sa-modal__content">
 				<form
@@ -134,18 +135,17 @@ function CreateServiceAccountModal(): JSX.Element {
 					Cancel
 				</Button>
 
-				<AuthZTooltip checks={[SACreatePermission]}>
-					<Button
-						type="submit"
-						form="create-sa-form"
-						variant="solid"
-						color="primary"
-						loading={isSubmitting}
-						disabled={!isValid}
-					>
-						Create Service Account
-					</Button>
-				</AuthZTooltip>
+				<AuthZButton
+					checks={[SACreatePermission]}
+					type="submit"
+					form="create-sa-form"
+					variant="solid"
+					color="primary"
+					loading={isSubmitting}
+					disabled={!isValid}
+				>
+					Create Service Account
+				</AuthZButton>
 			</DialogFooter>
 		</DialogWrapper>
 	);

frontend/src/components/CreateServiceAccountModal/__tests__/CreateServiceAccountModal.test.tsx

@@ -1,13 +1,7 @@
 import { toast } from '@signozhq/ui/sonner';
 import { rest, server } from 'mocks-server/server';
 import { NuqsTestingAdapter } from 'nuqs/adapters/testing';
-import {
-	render,
-	screen,
-	userEvent,
-	waitFor,
-	waitForElementToBeRemoved,
-} from 'tests/test-utils';
+import { render, screen, userEvent, waitFor } from 'tests/test-utils';
 
 import CreateServiceAccountModal from '../CreateServiceAccountModal';
 
@@ -89,7 +83,7 @@ describe('CreateServiceAccountModal', () => {
 
 		await waitFor(() => {
 			expect(
-				screen.queryByRole('dialog', { name: /New Service Account/i }),
+				screen.queryByTestId('create-service-account-modal'),
 			).not.toBeInTheDocument();
 		});
 	});
@@ -129,7 +123,7 @@ describe('CreateServiceAccountModal', () => {
 		});
 
 		expect(
-			screen.getByRole('dialog', { name: /New Service Account/i }),
+			screen.getByTestId('create-service-account-modal'),
 		).toBeInTheDocument();
 	});
 
@@ -137,15 +131,14 @@ describe('CreateServiceAccountModal', () => {
 		const user = userEvent.setup({ pointerEventsCheck: 0 });
 		renderModal();
 
-		const dialog = await screen.findByRole('dialog', {
-			name: /New Service Account/i,
-		});
+		await screen.findByTestId('create-service-account-modal');
 		await user.click(screen.getByRole('button', { name: /Cancel/i }));
 
-		await waitForElementToBeRemoved(dialog);
-		expect(
-			screen.queryByRole('dialog', { name: /New Service Account/i }),
-		).not.toBeInTheDocument();
+		await waitFor(() => {
+			expect(
+				screen.queryByTestId('create-service-account-modal'),
+			).not.toBeInTheDocument();
+		});
 	});
 
 	it('shows "Name is required" after clearing the name field', async () => {

frontend/src/components/DownloadOptionsMenu/DownloadOptionsMenu.tsx

@@ -3,7 +3,8 @@ import { Button, Popover, Tooltip } from 'antd';
 import { RadioGroup, RadioGroupItem } from '@signozhq/ui/radio-group';
 import { Typography } from '@signozhq/ui/typography';
 import { TelemetryFieldKey } from 'api/v5/v5';
-import { useExportRawData } from 'hooks/useDownloadOptionsMenu/useDownloadOptionsMenu';
+import { PANEL_TYPES } from 'constants/queryBuilder';
+import { useExportRawData } from 'hooks/useExportData/useServerExport';
 import { Download, LoaderCircle } from '@signozhq/icons';
 import { DataSource } from 'types/common/queryBuilder';
 
@@ -18,11 +19,13 @@ import './DownloadOptionsMenu.styles.scss';
 interface DownloadOptionsMenuProps {
 	dataSource: DataSource;
 	selectedColumns?: TelemetryFieldKey[];
+	panelType?: PANEL_TYPES;
 }
 
 export default function DownloadOptionsMenu({
 	dataSource,
 	selectedColumns,
+	panelType,
 }: DownloadOptionsMenuProps): JSX.Element {
 	const [exportFormat, setExportFormat] = useState<string>(DownloadFormats.CSV);
 	const [rowLimit, setRowLimit] = useState<number>(DownloadRowCounts.TEN_K);
@@ -33,6 +36,7 @@ export default function DownloadOptionsMenu({
 
 	const { isDownloading, handleExportRawData } = useExportRawData({
 		dataSource,
+		panelType,
 	});
 
 	const handleExport = useCallback(async (): Promise<void> => {

frontend/src/components/ExportMenu/ExportMenu.styles.scss

@@ -0,0 +1,33 @@
+.export-menu-popover {
+	width: 240px;
+	padding: 0 12px 12px 12px;
+
+	.title {
+		display: flex;
+		color: var(--l1-foreground);
+		font-family: Inter;
+		font-size: var(--periscope-font-size-small);
+		font-style: normal;
+		font-weight: 500;
+		line-height: 18px;
+		letter-spacing: 0.88px;
+		text-transform: uppercase;
+		margin-bottom: 8px;
+	}
+
+	.export-format {
+		padding: 12px 4px;
+		display: flex;
+		flex-direction: column;
+
+		// radio option labels — radix popover content inherits the root font
+		// size; pin to the app's 13px base the antd popover used to impose
+		label {
+			font-size: var(--periscope-font-size-base);
+		}
+	}
+
+	.export-button {
+		width: 100%;
+	}
+}

frontend/src/components/ExportMenu/ExportMenu.tsx

@@ -0,0 +1,92 @@
+import { Download } from '@signozhq/icons';
+import { Button } from '@signozhq/ui/button';
+import { Popover, PopoverContent, PopoverTrigger } from '@signozhq/ui/popover';
+import { RadioGroup, RadioGroupItem } from '@signozhq/ui/radio-group';
+import { TooltipSimple } from '@signozhq/ui/tooltip';
+import { Typography } from '@signozhq/ui/typography';
+import {
+	ClientExportData,
+	useClientExport,
+} from 'hooks/useExportData/useClientExport';
+import { ExportFormat } from 'lib/exportData/types';
+import { useCallback, useState } from 'react';
+import { Query } from 'types/api/queryBuilder/queryBuilderData';
+import { DataSource } from 'types/common/queryBuilder';
+
+import './ExportMenu.styles.scss';
+
+interface ExportMenuProps {
+	dataSource: DataSource;
+	// The queryRange response object the view holds — the hook picks the
+	// serializer (timeseries / table) from what it carries.
+	data: ClientExportData;
+	query?: Query;
+	yAxisUnit?: string;
+	fileName?: string;
+}
+
+// Download menu for in-memory query results (client-side serialization).
+// The raw/list backend export keeps its own menu in DownloadOptionsMenu.
+export default function ExportMenu({
+	dataSource,
+	data,
+	query,
+	yAxisUnit,
+	fileName,
+}: ExportMenuProps): JSX.Element {
+	const [exportFormat, setExportFormat] = useState<string>(ExportFormat.Csv);
+	const [isPopoverOpen, setIsPopoverOpen] = useState<boolean>(false);
+
+	const { isExporting, handleExport: handleClientExport } = useClientExport({
+		data,
+		query,
+		yAxisUnit,
+		fileName,
+	});
+
+	const handleExport = useCallback((): void => {
+		setIsPopoverOpen(false);
+		handleClientExport({ format: exportFormat as ExportFormat });
+	}, [exportFormat, handleClientExport]);
+
+	return (
+		<Popover open={isPopoverOpen} onOpenChange={setIsPopoverOpen}>
+			<TooltipSimple title="Download">
+				<PopoverTrigger asChild>
+					<Button
+						variant="ghost"
+						color="secondary"
+						size="icon"
+						aria-label="Download"
+						data-testid={`export-menu-${dataSource}`}
+						disabled={isExporting}
+						loading={isExporting}
+					>
+						<Download size={14} />
+					</Button>
+				</PopoverTrigger>
+			</TooltipSimple>
+			<PopoverContent align="end" className="export-menu-popover">
+				<div className="export-format">
+					<Typography.Text className="title">FORMAT</Typography.Text>
+					<RadioGroup value={exportFormat} onChange={setExportFormat}>
+						<RadioGroupItem value={ExportFormat.Csv}>csv</RadioGroupItem>
+						<RadioGroupItem value={ExportFormat.Jsonl}>jsonl</RadioGroupItem>
+					</RadioGroup>
+				</div>
+
+				<Button
+					variant="solid"
+					color="primary"
+					className="export-button"
+					onClick={handleExport}
+					disabled={isExporting}
+					loading={isExporting}
+					prefix={<Download size={16} />}
+				>
+					Export
+				</Button>
+			</PopoverContent>
+		</Popover>
+	);
+}

frontend/src/components/ExportMenu/__tests__/ExportMenu.test.tsx

@@ -0,0 +1,85 @@
+import { MetricQueryRangeSuccessResponse } from 'types/api/metrics/getQueryRange';
+import { fireEvent, render, screen } from 'tests/test-utils';
+import { DataSource } from 'types/common/queryBuilder';
+
+import ExportMenu from '../ExportMenu';
+
+const mockHandleExport = jest.fn();
+let mockIsExporting = false;
+
+jest.mock('hooks/useExportData/useClientExport', () => ({
+	useClientExport: (): unknown => ({
+		isExporting: mockIsExporting,
+		handleExport: mockHandleExport,
+	}),
+}));
+
+const data = {
+	statusCode: 200,
+	error: null,
+	message: '',
+	payload: { data: { result: [], resultType: 'time_series' } },
+} as unknown as MetricQueryRangeSuccessResponse;
+
+const TEST_ID = `export-menu-${DataSource.LOGS}`;
+
+function renderMenu(): void {
+	render(
+		<ExportMenu
+			dataSource={DataSource.LOGS}
+			data={data}
+			fileName="logs-timeseries"
+		/>,
+	);
+}
+
+describe('ExportMenu', () => {
+	beforeEach(() => {
+		mockHandleExport.mockReset();
+		mockIsExporting = false;
+	});
+
+	it('renders the download trigger button', () => {
+		renderMenu();
+		expect(screen.getByTestId(TEST_ID)).toBeInTheDocument();
+	});
+
+	it('shows only format options — no shape, row-count, or column controls', () => {
+		renderMenu();
+		fireEvent.click(screen.getByTestId(TEST_ID));
+
+		expect(screen.getByText('FORMAT')).toBeInTheDocument();
+		expect(screen.getByRole('radio', { name: 'csv' })).toBeInTheDocument();
+		expect(screen.getByRole('radio', { name: 'jsonl' })).toBeInTheDocument();
+
+		expect(screen.queryByText('Number of Rows')).not.toBeInTheDocument();
+		expect(screen.queryByText('Columns')).not.toBeInTheDocument();
+		expect(screen.queryByRole('radio', { name: 'long' })).not.toBeInTheDocument();
+		expect(screen.queryByRole('radio', { name: 'wide' })).not.toBeInTheDocument();
+	});
+
+	it('exports as csv by default', () => {
+		renderMenu();
+		fireEvent.click(screen.getByTestId(TEST_ID));
+		fireEvent.click(screen.getByText('Export'));
+
+		expect(mockHandleExport).toHaveBeenCalledTimes(1);
+		expect(mockHandleExport).toHaveBeenCalledWith({ format: 'csv' });
+	});
+
+	it('exports as jsonl when selected', () => {
+		renderMenu();
+		fireEvent.click(screen.getByTestId(TEST_ID));
+		fireEvent.click(screen.getByRole('radio', { name: 'jsonl' }));
+		fireEvent.click(screen.getByText('Export'));
+
+		expect(mockHandleExport).toHaveBeenCalledWith({ format: 'jsonl' });
+	});
+
+	it('disables the trigger while an export is in progress', () => {
+		mockIsExporting = true;
+		renderMenu();
+
+		expect(screen.getByTestId(TEST_ID)).toBeDisabled();
+	});
+});

frontend/src/components/HeaderRightSection/HeaderRightSection.tsx

@@ -20,7 +20,7 @@ import { Globe, Inbox, SquarePen } from '@signozhq/icons';
 
 import AnnouncementsModal from './AnnouncementsModal';
 import FeedbackModal from './FeedbackModal';
-import ShareURLModal from './ShareURLModal';
+import ShareURLModal, { type ShareURLExtraOption } from './ShareURLModal';
 
 import './HeaderRightSection.styles.scss';
 import { Typography } from '@signozhq/ui/typography';
@@ -29,12 +29,15 @@ interface HeaderRightSectionProps {
 	enableAnnouncements: boolean;
 	enableShare: boolean;
 	enableFeedback: boolean;
+	/** Optional page-specific toggle for the share dialog (e.g. "Include variables"). */
+	shareModalExtraOption?: ShareURLExtraOption;
 }
 
 function HeaderRightSection({
 	enableAnnouncements,
 	enableShare,
 	enableFeedback,
+	shareModalExtraOption,
 }: HeaderRightSectionProps): JSX.Element | null {
 	const location = useLocation();
 
@@ -185,7 +188,7 @@ function HeaderRightSection({
 					rootClassName="header-section-popover-root"
 					className="shareable-link-popover"
 					placement="bottomRight"
-					content={<ShareURLModal />}
+					content={<ShareURLModal extraOption={shareModalExtraOption} />}
 					open={openShareURLModal}
 					destroyTooltipOnHide
 					arrow={false}

frontend/src/components/HeaderRightSection/ShareURLModal.tsx

@@ -24,7 +24,22 @@ const routesToBeSharedWithTime = [
 	ROUTES.METER_EXPLORER,
 ];
 
-function ShareURLModal(): JSX.Element {
+/**
+ * An optional, page-specific toggle in the share dialog (e.g. a dashboard's
+ * "Include variables"). When enabled, `apply` mutates the URL params that go into
+ * the shared link. Keeps this shared modal generic — the page owns what it adds.
+ */
+export interface ShareURLExtraOption {
+	label: string;
+	defaultEnabled?: boolean;
+	apply: (params: URLSearchParams) => void;
+}
+
+interface ShareURLModalProps {
+	extraOption?: ShareURLExtraOption;
+}
+
+function ShareURLModal({ extraOption }: ShareURLModalProps): JSX.Element {
 	const urlQuery = useUrlQuery();
 	const location = useLocation();
 	const { selectedTime } = useSelector<AppState, GlobalReducer>(
@@ -34,6 +49,9 @@ function ShareURLModal(): JSX.Element {
 	const [enableAbsoluteTime, setEnableAbsoluteTime] = useState(
 		selectedTime !== 'custom',
 	);
+	const [enableExtraOption, setEnableExtraOption] = useState(
+		extraOption?.defaultEnabled ?? false,
+	);
 
 	const startTime = urlQuery.get(QueryParams.startTime);
 	const endTime = urlQuery.get(QueryParams.endTime);
@@ -93,6 +111,11 @@ function ShareURLModal(): JSX.Element {
 			}
 		}
 
+		if (extraOption && enableExtraOption) {
+			extraOption.apply(urlQuery);
+			currentUrl = getAbsoluteUrl(`${location.pathname}?${urlQuery.toString()}`);
+		}
+
 		return currentUrl;
 	};
 
@@ -143,6 +166,20 @@ function ShareURLModal(): JSX.Element {
 				</>
 			)}
 
+			{extraOption && (
+				<div className="absolute-relative-time-toggler-container">
+					<Typography.Text className="absolute-relative-time-toggler-label">
+						{extraOption.label}
+					</Typography.Text>
+					<div className="absolute-relative-time-toggler">
+						<Switch
+							value={enableExtraOption}
+							onChange={(): void => setEnableExtraOption((prev) => !prev)}
+						/>
+					</div>
+				</div>
+			)}
+
 			<div className="share-link">
 				<div className="url-share-container">
 					<div className="url-share-container-header">

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

@@ -247,11 +247,6 @@
 						var(--l2-background)
 					) !important;
 
-					&,
-					.ͼ1a {
-						color: var(--query-builder-v2-color, var(--l2-foreground));
-					}
-
 					::-moz-selection {
 						background: var(
 							--query-builder-v2-selection-background-color,

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

@@ -293,11 +293,6 @@ $max-recents-shown: 5;
 				var(--l2-background)
 			) !important;
 
-			&,
-			.ͼ1a {
-				color: var(--query-builder-v2-color, var(--l2-foreground));
-			}
-
 			::-moz-selection {
 				background: var(
 					--query-builder-v2-selection-background-color,

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

@@ -89,6 +89,7 @@ interface QuerySearchProps {
 	onChange: (value: string) => void;
 	queryData: IBuilderQuery;
 	dataSource: DataSource;
+	metricNamespace?: string;
 	signalSource?: string;
 	hardcodedAttributeKeys?: QueryKeyDataSuggestionsProps[];
 	onRun?: (query: string) => void;
@@ -107,6 +108,7 @@ function QuerySearch({
 	hardcodedAttributeKeys,
 	showFilterSuggestionsWithoutMetric,
 	initialExpression,
+	metricNamespace,
 }: QuerySearchProps): JSX.Element {
 	const isDarkMode = useIsDarkMode();
 	const [valueSuggestions, setValueSuggestions] = useState<any[]>([]);
@@ -299,6 +301,7 @@ function QuerySearch({
 				searchText: searchText || '',
 				metricName: debouncedMetricName ?? undefined,
 				signalSource: signalSource as 'meter' | '',
+				metricNamespace,
 			});
 
 			if (response.data.data) {
@@ -331,6 +334,7 @@ function QuerySearch({
 			signalSource,
 			hardcodedAttributeKeys,
 			showFilterSuggestionsWithoutMetric,
+			metricNamespace,
 		],
 	);
 

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/checkboxFilterQuery.ts

@@ -11,6 +11,8 @@ import { Query, TagFilterItem } from 'types/api/queryBuilder/queryBuilderData';
 import { v4 as uuid } from 'uuid';
 
 import { isKeyMatch } from './utils';
+import { CheckedState } from '../../types';
+import { SectionType } from './v2/itemRules';
 
 export const SELECTED_OPERATORS = [OPERATORS['='], 'in'];
 export const NON_SELECTED_OPERATORS = [OPERATORS['!='], 'not in', 'nin'];
@@ -148,6 +150,8 @@ export function applyCheckboxToggle({
 	value,
 	checked,
 	isOnlyOrAllClicked,
+	previousState,
+	sectionType,
 }: {
 	currentQuery: Query;
 	activeQueryIndex: number;
@@ -157,6 +161,8 @@ export function applyCheckboxToggle({
 	value: string;
 	checked: boolean;
 	isOnlyOrAllClicked: boolean;
+	previousState?: CheckedState;
+	sectionType?: SectionType;
 }): Query {
 	const activeItems =
 		currentQuery.builder.queryData?.[activeQueryIndex]?.filters?.items;
@@ -216,6 +222,7 @@ export function applyCheckboxToggle({
 			);
 			if (currentFilter) {
 				const runningOperator = currentFilter?.op;
+
 				switch (runningOperator) {
 					case 'in':
 						if (checked) {
@@ -246,9 +253,29 @@ export function applyCheckboxToggle({
 								});
 							}
 						} else if (!checked) {
-							// if we are removing some value when the running operator is IN we filter.
-							// example - key IN [value1,currentSelectedValue] becomes key IN [value1] in case of array
-							if (isArray(currentFilter.value)) {
+							// Related section: clicking to exclude creates NOT_IN for just this value
+							if (sectionType === SectionType.RELATED) {
+								const newFilter: TagFilterItem = {
+									id: uuid(),
+									op: getNotInOperator(source),
+									key: filter.attributeKey,
+									value,
+								};
+								query.filters.items = query.filters.items.map((item) => {
+									if (isKeyMatch(item.key?.key, filter.attributeKey.key)) {
+										return newFilter;
+									}
+									return item;
+								});
+								if (query.filter?.expression) {
+									query.filter.expression = removeKeysFromExpression(
+										query.filter.expression,
+										[filter.attributeKey.key],
+									);
+								}
+							} else if (isArray(currentFilter.value)) {
+								// if we are removing some value when the running operator is IN we filter.
+								// example - key IN [value1,currentSelectedValue] becomes key IN [value1] in case of array
 								const newFilter = {
 									...currentFilter,
 									value: currentFilter.value.filter((val) => val !== value),
@@ -275,11 +302,38 @@ export function applyCheckboxToggle({
 						}
 						break;
 					case 'nin':
-					case 'not in':
-						// if the current running operator is NIN then when unchecking the value it gets
-						// added to the clause like key NIN [value1 , currentUnselectedValue]
-						if (!checked) {
-							// in case of array add the currentUnselectedValue to the list.
+					case 'not in': {
+						// NOT IN means "exclude these values"
+						// Check if value is currently in the exclusion list
+						const isValueInFilter = isArray(currentFilter.value)
+							? currentFilter.value.includes(value)
+							: currentFilter.value === value;
+
+						// When clicking unchecked "Other" item, user wants to SELECT it
+						// Replace NOT IN filter with IN [value]
+						if (previousState === 'unchecked' && checked) {
+							const newFilter: TagFilterItem = {
+								id: uuid(),
+								op: getOperatorValue(OPERATORS.IN),
+								key: filter.attributeKey,
+								value,
+							};
+							query.filters.items = query.filters.items.map((item) => {
+								if (isKeyMatch(item.key?.key, filter.attributeKey.key)) {
+									return newFilter;
+								}
+								return item;
+							});
+							if (query.filter?.expression) {
+								query.filter.expression = removeKeysFromExpression(
+									query.filter.expression,
+									[filter.attributeKey.key],
+								);
+							}
+						} else if (!checked || !isValueInFilter) {
+							// Add to NOT IN when:
+							// - checked=false (user explicitly unchecked to exclude)
+							// - checked=true but value not in filter (clicking "other" value to exclude)
 							if (isArray(currentFilter.value)) {
 								const newFilter = {
 									...currentFilter,
@@ -292,7 +346,6 @@ export function applyCheckboxToggle({
 									return item;
 								});
 							} else {
-								// in case of not an array make it one!
 								const newFilter = {
 									...currentFilter,
 									value: [currentFilter.value as string, value],
@@ -304,8 +357,9 @@ export function applyCheckboxToggle({
 									return item;
 								});
 							}
-						} else if (checked) {
-							// opposite of above!
+						} else {
+							// Remove from NOT IN when value IS in filter and checked=true
+							// (user wants to include this value back)
 							if (isArray(currentFilter.value)) {
 								const newFilter = {
 									...currentFilter,
@@ -346,6 +400,7 @@ export function applyCheckboxToggle({
 							}
 						}
 						break;
+					}
 					case '=':
 						if (checked) {
 							const newFilter = {
@@ -389,10 +444,11 @@ export function applyCheckboxToggle({
 				}
 			}
 		} else {
-			// case  - when there is no filter for the current key that means all are selected right now.
+			// No filter for this key - all are visually selected.
+			// checked=true → user wants to select (IN), checked=false → exclude (NOT IN)
 			const newFilterItem: TagFilterItem = {
 				id: uuid(),
-				op: getNotInOperator(source),
+				op: checked ? getOperatorValue(OPERATORS.IN) : getNotInOperator(source),
 				key: filter.attributeKey,
 				value,
 			};

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/useCheckboxFilterActions.ts

@@ -10,6 +10,8 @@ import {
 	applyCheckboxToggle,
 	clearFilterFromQuery,
 } from './checkboxFilterQuery';
+import { CheckedState } from '../../types';
+import { SectionType } from './v2/itemRules';
 
 interface UseCheckboxFilterActionsProps {
 	filter: IQuickFiltersConfig;
@@ -24,6 +26,8 @@ interface UseCheckboxFilterActionsReturn {
 		value: string,
 		checked: boolean,
 		isOnlyOrAllClicked: boolean,
+		previousState?: CheckedState,
+		sectionType?: SectionType,
 	) => void;
 	onClear: () => void;
 }
@@ -53,6 +57,8 @@ function useCheckboxFilterActions({
 		value: string,
 		checked: boolean,
 		isOnlyOrAllClicked: boolean,
+		previousState?: CheckedState,
+		sectionType?: SectionType,
 	): void => {
 		dispatch(
 			applyCheckboxToggle({
@@ -64,6 +70,8 @@ function useCheckboxFilterActions({
 				value,
 				checked,
 				isOnlyOrAllClicked,
+				previousState,
+				sectionType,
 			}),
 		);
 	};

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/v2/CheckboxFilterV2.module.scss

@@ -0,0 +1,103 @@
+.checkboxFilter {
+	display: flex;
+	flex-direction: column;
+	padding: var(--spacing-6);
+	gap: var(--spacing-6);
+	border-bottom: 1px solid var(--l1-border);
+}
+
+.search {
+	--input-background: var(--l2-background);
+	--input-hover-background: var(--l2-background);
+	--input-focus-background: var(--l2-background);
+	--input-border-color: var(--l2-border);
+	--input-focus-border-color: var(--l2-border);
+}
+
+.searchSpinner {
+	color: var(--l2-foreground);
+	animation: spin 0.8s linear infinite;
+}
+
+@keyframes spin {
+	from {
+		transform: rotate(0deg);
+	}
+
+	to {
+		transform: rotate(360deg);
+	}
+}
+
+.values {
+	display: flex;
+	flex-direction: column;
+}
+
+.sectionValues {
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-4);
+}
+
+.loadingValues {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	padding: var(--spacing-6) 0;
+}
+
+.loadingMore {
+	align-self: center;
+}
+
+.noData {
+	align-self: center;
+}
+
+.showMore {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.showMoreText {
+	color: var(--accent-primary);
+	cursor: pointer;
+}
+
+.goToDocs {
+	display: flex;
+	flex-direction: column;
+	gap: 44px;
+}
+
+.goToDocsContainer {
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-2);
+	margin-top: var(--spacing-2);
+}
+
+.goToDocsMessage {
+	color: var(--l2-foreground);
+	font-size: 14px;
+	line-height: 20px;
+	letter-spacing: -0.07px;
+}
+
+.goToDocsButton {
+	display: flex;
+	align-items: center;
+	gap: var(--spacing-2);
+	cursor: pointer;
+	margin: 0 0 var(--spacing-2);
+	padding: 0;
+}
+
+.goToDocsButtonText {
+	color: var(--bg-robin-400);
+	font-size: 14px;
+	line-height: 20px;
+	letter-spacing: -0.07px;
+}

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/v2/CheckboxFilterV2.testUtils.tsx

@@ -0,0 +1,126 @@
+import { render, RenderResult } from 'tests/test-utils';
+import { server, rest } from 'mocks-server/server';
+import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
+import { DataSource } from 'types/common/queryBuilder';
+import { Query, TagFilterItem } from 'types/api/queryBuilder/queryBuilderData';
+
+import {
+	FiltersType,
+	IQuickFiltersConfig,
+	QuickFilterCheckboxUseFieldApis,
+	QuickFiltersSource,
+} from '../../../types';
+import CheckboxFilterV2 from './CheckboxFilterV2';
+
+export const DEFAULT_FILTER: IQuickFiltersConfig = {
+	type: FiltersType.CHECKBOX,
+	title: 'Environment',
+	attributeKey: {
+		key: 'deployment.environment',
+		dataType: DataTypes.String,
+		type: 'tag',
+	},
+	dataSource: DataSource.TRACES,
+	defaultOpen: true,
+};
+
+export const DEFAULT_USE_FIELD_APIS: QuickFilterCheckboxUseFieldApis = {
+	startUnixMilli: 1700000000000,
+	endUnixMilli: 1700003600000,
+	existingQuery: null,
+};
+
+export function mockFieldsValuesAPI(response: {
+	relatedValues?: (string | null)[];
+	stringValues?: (string | null)[];
+	numberValues?: (number | null)[];
+}): void {
+	server.use(
+		rest.get('http://localhost/api/v1/fields/values', (_, res, ctx) =>
+			res(
+				ctx.status(200),
+				ctx.json({
+					status: 'success',
+					data: {
+						values: {
+							relatedValues: response.relatedValues ?? [],
+							stringValues: response.stringValues ?? [],
+							numberValues: response.numberValues ?? [],
+						},
+					},
+				}),
+			),
+		),
+	);
+}
+
+export function mockFieldsValuesAPILoading(): void {
+	server.use(
+		rest.get('http://localhost/api/v1/fields/values', (_, res, ctx) =>
+			res(ctx.delay(10000)),
+		),
+	);
+}
+
+export function setupServer(): void {
+	beforeAll(() => server.listen({ onUnhandledRequest: 'bypass' }));
+	afterEach(() => server.resetHandlers());
+	afterAll(() => server.close());
+}
+
+export interface FilterItemConfig {
+	op: string;
+	value: string | string[];
+}
+
+export function renderWithFilter(
+	onFilterChange: jest.Mock,
+	filterItem?: FilterItemConfig,
+): RenderResult {
+	const items: TagFilterItem[] = filterItem
+		? [
+				{
+					key: { key: 'deployment.environment' },
+					op: filterItem.op,
+					value: filterItem.value,
+				} as TagFilterItem,
+			]
+		: [];
+
+	return render(
+		<CheckboxFilterV2
+			filter={DEFAULT_FILTER}
+			source={QuickFiltersSource.TRACES_EXPLORER}
+			useFieldApis={{
+				...DEFAULT_USE_FIELD_APIS,
+				existingQuery: 'service.name = "api"',
+			}}
+			onFilterChange={onFilterChange}
+		/>,
+		undefined,
+		{
+			queryBuilderOverrides: {
+				currentQuery: {
+					builder: {
+						queryData: [
+							{
+								filters: { items, op: 'AND' },
+								filter: { expression: 'service.name = "api"' },
+							},
+						],
+					},
+				},
+			} as never,
+		},
+	);
+}
+
+export function getFilterFromCall(
+	onFilterChange: jest.Mock,
+	callIndex = 0,
+): TagFilterItem | undefined {
+	const query = onFilterChange.mock.calls[callIndex]?.[0] as Query | undefined;
+	return query?.builder.queryData[0]?.filters?.items?.find(
+		(item) => item.key?.key === 'deployment.environment',
+	);
+}

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

@@ -0,0 +1,241 @@
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { Input } from '@signozhq/ui/input';
+import { Skeleton } from 'antd';
+import { Typography } from '@signozhq/ui/typography';
+import { LoaderCircle } from '@signozhq/icons';
+import {
+	IQuickFiltersConfig,
+	QuickFilterCheckboxUseFieldApis,
+	QuickFiltersSource,
+} from 'components/QuickFilters/types';
+import { DEBOUNCE_DELAY } from 'constants/queryBuilderFilterConfig';
+import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
+import useDebouncedFn from 'hooks/useDebouncedFunction';
+import { Query } from 'types/api/queryBuilder/queryBuilderData';
+
+import { NON_SELECTED_OPERATORS } from '../checkboxFilterQuery';
+import useActiveQueryIndex from '../useActiveQueryIndex';
+import useCheckboxDisclosure from '../useCheckboxDisclosure';
+import useCheckboxFilterActions from '../useCheckboxFilterActions';
+import useCheckboxFilterState from '../useCheckboxFilterState';
+import { useFieldValues } from './useFieldValues';
+import { useExistingQuery } from './useExistingQuery';
+import { isKeyMatch } from '../utils';
+
+import { CheckboxFilterV2Header } from './CheckboxFilterV2Header';
+import { CheckboxFilterV2Section } from './CheckboxFilterV2Section';
+import { buildSelectedSet, useSectionedValues } from './useSectionedValues';
+import { useStaleRelatedExclusions } from './useStaleRelatedExclusions';
+
+import styles from './CheckboxFilterV2.module.scss';
+
+interface CheckboxFilterV2Props {
+	filter: IQuickFiltersConfig;
+	source: QuickFiltersSource;
+	onFilterChange?: (query: Query) => void;
+	useFieldApis: QuickFilterCheckboxUseFieldApis;
+}
+
+export default function CheckboxFilterV2(
+	props: CheckboxFilterV2Props,
+): JSX.Element {
+	const { source, filter, onFilterChange, useFieldApis } = props;
+	const [searchText, setSearchText] = useState<string>('');
+	const [userToggleState, setUserToggleState] = useState<boolean | null>(null);
+
+	const { currentQuery } = useQueryBuilder();
+	const activeQueryIndex = useActiveQueryIndex(source);
+
+	const {
+		isOpen,
+		isSomeFilterPresentForCurrentAttribute,
+		visibleItemsCount,
+		onToggleOpen,
+		onShowMore,
+	} = useCheckboxDisclosure({ filter, activeQueryIndex });
+
+	// Auto-preserve open state when filter is present
+	useEffect(() => {
+		if (isSomeFilterPresentForCurrentAttribute && userToggleState === null) {
+			setUserToggleState(true);
+		}
+	}, [isSomeFilterPresentForCurrentAttribute, userToggleState]);
+
+	const { existingQuery, hasExistingQuery } = useExistingQuery({
+		useFieldApis,
+		activeQueryIndex,
+	});
+
+	const { relatedValues, allValues, isLoading, isFetching } = useFieldValues({
+		filter,
+		searchText,
+		existingQuery,
+		metricNamespace: useFieldApis.metricNamespace,
+		startUnixMilli: useFieldApis.startUnixMilli,
+		endUnixMilli: useFieldApis.endUnixMilli,
+		enabled: isOpen,
+	});
+
+	// Track if initial load completed (don't show skeleton after first load)
+	// Must track if loading ever started, otherwise hasLoadedOnce gets set
+	// immediately on first render when query is disabled (isLoading=false)
+	const hasLoadedOnce = useRef(false);
+	const wasLoading = useRef(false);
+	if (isLoading) {
+		wasLoading.current = true;
+	}
+	if (!isLoading && wasLoading.current && !hasLoadedOnce.current) {
+		hasLoadedOnce.current = true;
+	}
+
+	// Combine for state derivation
+	const attributeValues = useMemo(() => {
+		const combined = [...relatedValues, ...allValues];
+		return [...new Set(combined)];
+	}, [relatedValues, allValues]);
+
+	const { currentFilterState, isFilterDisabled, isMultipleValuesTrueForTheKey } =
+		useCheckboxFilterState({ filter, attributeValues, activeQueryIndex });
+
+	const { onChange, onClear } = useCheckboxFilterActions({
+		filter,
+		source,
+		attributeValues,
+		activeQueryIndex,
+		onFilterChange,
+	});
+
+	const setSearchTextDebounced = useDebouncedFn((...args) => {
+		setSearchText(args[0] as string);
+	}, DEBOUNCE_DELAY);
+
+	const currentFilterOp = useMemo(() => {
+		const filterSync = currentQuery?.builder.queryData?.[
+			activeQueryIndex
+		]?.filters?.items.find((item) =>
+			isKeyMatch(item.key?.key, filter.attributeKey.key),
+		);
+		return filterSync?.op;
+	}, [
+		currentQuery?.builder.queryData,
+		activeQueryIndex,
+		filter.attributeKey.key,
+	]);
+
+	const isNotInOperator = NON_SELECTED_OPERATORS.includes(currentFilterOp || '');
+
+	const selectedValues = useMemo(
+		() => [
+			...buildSelectedSet(
+				currentFilterState,
+				isSomeFilterPresentForCurrentAttribute,
+				isNotInOperator,
+			),
+		],
+		[currentFilterState, isSomeFilterPresentForCurrentAttribute, isNotInOperator],
+	);
+
+	const isRefreshing = isFetching && !isLoading && searchText === '';
+	const relatedExclusions = useStaleRelatedExclusions({
+		selectedValues,
+		isFetching,
+		isRefreshing,
+	});
+
+	const { sections, totalCount } = useSectionedValues({
+		relatedValues,
+		allValues,
+		currentFilterState,
+		isSomeFilterPresentForCurrentAttribute,
+		isNotInOperator,
+		hasExistingQuery,
+		visibleItemsCount,
+		relatedExclusions,
+	});
+
+	return (
+		<div className={styles.checkboxFilter} data-testid="checkbox-filter-v2">
+			<CheckboxFilterV2Header
+				title={filter.title}
+				isOpen={isOpen}
+				showClearAll={!!attributeValues.length}
+				onToggleOpen={onToggleOpen}
+				onClear={onClear}
+				isSomeFilterPresentForCurrentAttribute={
+					isSomeFilterPresentForCurrentAttribute
+				}
+			/>
+			{isOpen && isLoading && !hasLoadedOnce.current && (
+				<section>
+					<Skeleton paragraph={{ rows: 4 }} />
+				</section>
+			)}
+			{isOpen && (!isLoading || hasLoadedOnce.current) && (
+				<>
+					<section className={styles.search}>
+						<Input
+							placeholder="Filter values"
+							onChange={(e): void => setSearchTextDebounced(e.target.value)}
+							disabled={isFilterDisabled}
+							data-testid="checkbox-filter-search"
+							suffix={
+								isFetching ? (
+									<LoaderCircle
+										size={14}
+										className={styles.searchSpinner}
+										data-testid="checkbox-filter-search-loading"
+									/>
+								) : null
+							}
+						/>
+					</section>
+
+					{totalCount > 0 && (
+						<section className={styles.values}>
+							{sections.map((section, index) => (
+								<CheckboxFilterV2Section
+									key={section.type}
+									section={section}
+									index={index}
+									isFilterDisabled={isFilterDisabled}
+									filter={filter}
+									isSomeFilterPresentForCurrentAttribute={
+										isSomeFilterPresentForCurrentAttribute
+									}
+									isMultipleValuesTrueForTheKey={isMultipleValuesTrueForTheKey}
+									onChange={onChange}
+								/>
+							))}
+						</section>
+					)}
+
+					{totalCount === 0 && hasLoadedOnce.current && !isFetching && (
+						<section
+							className={styles.noData}
+							data-testid={
+								searchText
+									? 'checkbox-filter-no-search-results'
+									: 'checkbox-filter-empty'
+							}
+						>
+							<Typography.Text>No values found</Typography.Text>
+						</section>
+					)}
+
+					{visibleItemsCount < totalCount &&
+						!(searchText && (isLoading || isFetching)) && (
+							<section className={styles.showMore}>
+								<Typography.Text
+									className={styles.showMoreText}
+									onClick={onShowMore}
+									data-testid="checkbox-filter-show-more"
+								>
+									Show More...
+								</Typography.Text>
+							</section>
+						)}
+				</>
+			)}
+		</div>
+	);
+}

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/v2/CheckboxFilterV2Header.module.scss

@@ -0,0 +1,33 @@
+.header {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	cursor: pointer;
+}
+
+.leftAction {
+	display: flex;
+	align-items: center;
+	gap: var(--spacing-3);
+}
+
+.title {
+	color: var(--l2-foreground);
+	font-size: 14px;
+	font-weight: 400;
+	line-height: 18px;
+	letter-spacing: -0.07px;
+	text-transform: capitalize;
+}
+
+.rightAction {
+	display: flex;
+	align-items: center;
+	min-width: 48px;
+}
+
+.clearAll {
+	font-size: 12px;
+	color: var(--accent-primary);
+	cursor: pointer;
+}

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

@@ -0,0 +1,62 @@
+import { Typography } from '@signozhq/ui/typography';
+import { ChevronDown, ChevronRight } from '@signozhq/icons';
+
+import styles from './CheckboxFilterV2Header.module.scss';
+
+interface CheckboxFilterHeaderProps {
+	title: string;
+	isOpen: boolean;
+	showClearAll: boolean;
+	onToggleOpen: () => void;
+	onClear: () => void;
+	isSomeFilterPresentForCurrentAttribute: boolean;
+}
+
+export function CheckboxFilterV2Header({
+	title,
+	isOpen,
+	showClearAll,
+	onToggleOpen,
+	onClear,
+	isSomeFilterPresentForCurrentAttribute,
+}: CheckboxFilterHeaderProps): JSX.Element {
+	return (
+		<section
+			role="button"
+			tabIndex={0}
+			className={styles.header}
+			onClick={onToggleOpen}
+			onKeyDown={(e): void => {
+				if (e.key === 'Enter' || e.key === ' ') {
+					onToggleOpen();
+				}
+			}}
+			data-testid="checkbox-filter-header"
+			data-state={isOpen ? 'open' : 'closed'}
+		>
+			<section className={styles.leftAction}>
+				{isOpen ? (
+					<ChevronDown size={13} cursor="pointer" />
+				) : (
+					<ChevronRight size={13} cursor="pointer" />
+				)}
+				<Typography.Text className={styles.title}>{title}</Typography.Text>
+			</section>
+			<section className={styles.rightAction}>
+				{isOpen && showClearAll && isSomeFilterPresentForCurrentAttribute && (
+					<Typography.Text
+						className={styles.clearAll}
+						onClick={(e): void => {
+							e.stopPropagation();
+							e.preventDefault();
+							onClear();
+						}}
+						data-testid="checkbox-filter-clear-all"
+					>
+						Clear
+					</Typography.Text>
+				)}
+			</section>
+		</section>
+	);
+}

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

@@ -0,0 +1,106 @@
+import {
+	IQuickFiltersConfig,
+	CheckedState,
+} from 'components/QuickFilters/types';
+
+import { CheckboxFilterV2ValueRow } from './CheckboxFilterV2ValueRow';
+import { SectionDivider } from './SectionDivider';
+import { Section } from './useSectionedValues';
+import { SectionType } from './itemRules';
+
+import styles from './CheckboxFilterV2.module.scss';
+
+interface SectionConfig {
+	label: string;
+	tooltip?: string;
+}
+
+function getSectionConfig(type: SectionType): SectionConfig | null {
+	switch (type) {
+		case SectionType.SELECTED:
+			return { label: 'Selected' };
+		case SectionType.RELATED:
+			return {
+				label: 'Related',
+				tooltip: 'Values that are filtered by your current selection.',
+			};
+		case SectionType.ALL_VALUES:
+			return { label: 'All values' };
+		default:
+			return null;
+	}
+}
+
+interface CheckboxFilterV2SectionProps {
+	section: Section;
+	index: number;
+	isFilterDisabled: boolean;
+	filter: IQuickFiltersConfig;
+	isSomeFilterPresentForCurrentAttribute: boolean;
+	isMultipleValuesTrueForTheKey: boolean;
+	onChange: (
+		value: string,
+		checked: boolean,
+		isOnly: boolean,
+		previousState?: CheckedState,
+		sectionType?: SectionType,
+	) => void;
+}
+
+export function CheckboxFilterV2Section(
+	props: CheckboxFilterV2SectionProps,
+): JSX.Element | null {
+	const {
+		section,
+		index,
+		isFilterDisabled,
+		filter,
+		isSomeFilterPresentForCurrentAttribute,
+		isMultipleValuesTrueForTheKey,
+		onChange,
+	} = props;
+
+	if (section.items.length === 0) {
+		return null;
+	}
+
+	const config = getSectionConfig(section.type);
+
+	// Show divider for all sections except first SELECTED section
+	const showDivider =
+		config !== null && (index > 0 || section.type !== SectionType.SELECTED);
+
+	return (
+		<div data-testid={`section-${section.type}`} className={styles.sectionValues}>
+			{showDivider && config && (
+				<SectionDivider label={config.label} tooltip={config.tooltip} />
+			)}
+			{section.items.map(({ value, badge, checkedState }) => {
+				const isChecked = checkedState === 'checked';
+
+				return (
+					<CheckboxFilterV2ValueRow
+						key={value}
+						value={value}
+						checkedState={checkedState}
+						disabled={isFilterDisabled}
+						title={filter.title}
+						badge={badge}
+						onlyButtonLabel={
+							isSomeFilterPresentForCurrentAttribute
+								? isChecked && !isMultipleValuesTrueForTheKey
+									? 'All'
+									: 'Only'
+								: 'Only'
+						}
+						customRendererForValue={filter.customRendererForValue}
+						onCheckboxChange={(checked, previousState): void =>
+							onChange(value, checked, false, previousState, section.type)
+						}
+						onOnlyOrAllClick={(): void => onChange(value, isChecked, true)}
+					/>
+				);
+			})}
+		</div>
+	);
+}

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/v2/CheckboxFilterV2ValueRow.module.scss

@@ -0,0 +1,164 @@
+.valueRow {
+	display: flex;
+	align-items: center;
+	gap: var(--spacing-4);
+	min-height: 24px;
+}
+
+.checkbox {
+	display: inline-flex;
+	align-items: center;
+}
+
+.valueButton {
+	display: grid;
+	grid-template-columns: minmax(0, 1fr) auto;
+	align-items: center;
+	gap: var(--spacing-2);
+	width: calc(100% - 24px);
+	cursor: pointer;
+}
+
+.content {
+	display: flex;
+	align-items: center;
+	gap: var(--spacing-2);
+	min-width: 0;
+}
+
+.valueLabel {
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	overflow: hidden;
+}
+
+.actions {
+	display: grid;
+	align-items: center;
+	justify-items: end;
+
+	// Stack badge / only / toggle in a single cell so the crossfade overlaps
+	// instead of laying them side-by-side mid-transition.
+	> * {
+		grid-area: 1 / 1;
+	}
+}
+
+.badge {
+	opacity: 1;
+	transition:
+		opacity 0.16s ease,
+		display 0.16s allow-discrete;
+}
+
+.onlyButton {
+	display: none;
+	align-items: center;
+	justify-content: center;
+	opacity: 0;
+	transform: translateX(4px);
+	transition:
+		opacity 0.16s ease,
+		transform 0.16s ease,
+		display 0.16s allow-discrete;
+	--button-height: 21px;
+	--button-padding: var(--spacing-5);
+
+	&:hover {
+		background-color: unset;
+	}
+}
+
+.toggleButton {
+	display: none;
+	align-items: center;
+	justify-content: center;
+	opacity: 0;
+	transform: translateX(4px);
+	transition:
+		opacity 0.16s ease,
+		transform 0.16s ease,
+		display 0.16s allow-discrete;
+	--button-height: 21px;
+	--button-padding: var(--spacing-5);
+
+	&:hover {
+		background-color: unset;
+	}
+}
+
+.isDisabled {
+	cursor: not-allowed;
+
+	.valueLabel {
+		color: var(--l3-foreground);
+	}
+
+	.onlyButton {
+		cursor: not-allowed;
+		color: var(--l3-foreground);
+	}
+
+	.toggleButton {
+		cursor: not-allowed;
+		color: var(--l3-foreground);
+	}
+}
+
+.valueButton:hover {
+	.onlyButton {
+		display: flex;
+		opacity: 1;
+		transform: translateX(0);
+
+		@starting-style {
+			opacity: 0;
+			transform: translateX(4px);
+		}
+	}
+
+	.badge {
+		display: none;
+		opacity: 0;
+	}
+}
+
+.checkbox:hover ~ .valueButton {
+	.toggleButton {
+		display: flex;
+		opacity: 1;
+		transform: translateX(0);
+
+		@starting-style {
+			opacity: 0;
+			transform: translateX(4px);
+		}
+	}
+
+	.badge {
+		display: none;
+		opacity: 0;
+	}
+}
+
+@media (prefers-reduced-motion: reduce) {
+	.badge,
+	.onlyButton,
+	.toggleButton {
+		transition: none;
+	}
+}
+
+.indicatorFalse {
+	width: 2px;
+	height: 11px;
+	border-radius: 2px;
+	background: var(--danger-background);
+}
+
+.indicatorTrue {
+	width: 2px;
+	height: 11px;
+	border-radius: 2px;
+	background: var(--bg-forest-500);
+}

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

@@ -0,0 +1,118 @@
+import { Badge } from '@signozhq/ui/badge';
+import { Button } from '@signozhq/ui/button';
+import { Checkbox } from '@signozhq/ui/checkbox';
+import { Typography } from '@signozhq/ui/typography';
+import cx from 'classnames';
+
+import { BadgeConfig } from './itemRules';
+import { CheckedState } from '../../../types';
+import styles from './CheckboxFilterV2ValueRow.module.scss';
+
+interface ValueRowProps {
+	value: string;
+	checkedState: CheckedState;
+	disabled: boolean;
+	title: string;
+	onlyButtonLabel: string;
+	customRendererForValue?: (value: string) => JSX.Element;
+	onCheckboxChange: (checked: boolean, previousState: CheckedState) => void;
+	onOnlyOrAllClick: () => void;
+	badge: BadgeConfig | null;
+}
+
+function toCheckboxValue(state: CheckedState): boolean | 'indeterminate' {
+	if (state === 'indeterminate') {
+		return 'indeterminate';
+	}
+	return state === 'checked';
+}
+
+const INDICATOR_CLASS_MAP = {
+	false: styles.indicatorFalse,
+	true: styles.indicatorTrue,
+} as Record<string, string>;
+
+export function CheckboxFilterV2ValueRow({
+	value,
+	checkedState,
+	disabled,
+	title,
+	onlyButtonLabel,
+	customRendererForValue,
+	onCheckboxChange,
+	onOnlyOrAllClick,
+	badge,
+}: ValueRowProps): JSX.Element {
+	const indicatorClass = INDICATOR_CLASS_MAP[value];
+
+	return (
+		<div
+			className={styles.valueRow}
+			data-testid={`checkbox-value-row-${value}`}
+			data-state={checkedState}
+			data-disabled={disabled}
+		>
+			<div className={styles.checkbox}>
+				<Checkbox
+					onChange={(isChecked): void =>
+						onCheckboxChange(isChecked === true, checkedState)
+					}
+					value={toCheckboxValue(checkedState)}
+					disabled={disabled}
+					color="primary"
+					testId={`checkbox-${title}-${value}`}
+				/>
+			</div>
+
+			<div
+				role="button"
+				tabIndex={disabled ? -1 : 0}
+				className={cx(styles.valueButton, disabled && styles.isDisabled)}
+				onClick={(): void => {
+					if (disabled) {
+						return;
+					}
+					onOnlyOrAllClick();
+				}}
+				onKeyDown={(e): void => {
+					if (disabled) {
+						return;
+					}
+					if (e.key === 'Enter' || e.key === ' ') {
+						onOnlyOrAllClick();
+					}
+				}}
+			>
+				<div className={styles.content}>
+					{indicatorClass && <div className={indicatorClass} />}
+					{customRendererForValue ? (
+						customRendererForValue(value)
+					) : (
+						<Typography.Text title={value} className={styles.valueLabel}>
+							{value}
+						</Typography.Text>
+					)}
+				</div>
+
+				<div className={styles.actions}>
+					{badge && (
+						<Badge
+							variant="outline"
+							color={badge.color}
+							className={styles.badge}
+							testId={`badge-${badge.key}`}
+						>
+							{badge.label}
+						</Badge>
+					)}
+					<Button variant="ghost" color="secondary" className={styles.onlyButton}>
+						{onlyButtonLabel}
+					</Button>
+					<Button variant="ghost" color="secondary" className={styles.toggleButton}>
+						Toggle
+					</Button>
+				</div>
+			</div>
+		</div>
+	);
+}

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/v2/SectionDivider.module.scss

@@ -0,0 +1,29 @@
+.divider {
+	display: flex;
+	align-items: center;
+	gap: var(--spacing-4);
+	padding: var(--spacing-2) 0;
+
+	margin-bottom: calc(-1 * var(--spacing-4));
+}
+
+.line {
+	flex: 1;
+	height: 1px;
+	background: var(--l1-border);
+}
+
+.label {
+	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;
+}
+
+.infoIcon {
+	color: var(--l3-foreground);
+	cursor: help;
+	flex-shrink: 0;
+}

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

@@ -0,0 +1,33 @@
+import { Tooltip } from 'antd';
+import { Typography } from '@signozhq/ui/typography';
+import { Info } from '@signozhq/icons';
+
+import styles from './SectionDivider.module.scss';
+
+interface SectionDividerProps {
+	label: string;
+	tooltip?: string;
+}
+
+export function SectionDivider({
+	label,
+	tooltip,
+}: SectionDividerProps): JSX.Element {
+	const testId = label.toLowerCase().replace(/\s+/g, '-');
+	return (
+		<div className={styles.divider} data-testid={`section-divider-${testId}`}>
+			<div className={styles.line} />
+			<Typography.Text className={styles.label}>{label}</Typography.Text>
+			{tooltip && (
+				<Tooltip title={tooltip}>
+					<Info
+						size={12}
+						className={styles.infoIcon}
+						data-testid="section-divider-info"
+					/>
+				</Tooltip>
+			)}
+			<div className={styles.line} />
+		</div>
+	);
+}

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/v2/__tests__/CheckboxFilterV2.existingQuery.test.tsx

@@ -0,0 +1,302 @@
+import { screen } from '@testing-library/react';
+import { server, rest } from 'mocks-server/server';
+import { render } from 'tests/test-utils';
+
+import { QuickFiltersSource } from '../../../../types';
+
+import CheckboxFilterV2 from '../CheckboxFilterV2';
+import {
+	DEFAULT_FILTER,
+	DEFAULT_USE_FIELD_APIS,
+	setupServer,
+} from '../CheckboxFilterV2.testUtils';
+
+const USE_FIELD_APIS_AUTO_DERIVE = {
+	...DEFAULT_USE_FIELD_APIS,
+	existingQuery: undefined,
+};
+
+setupServer();
+
+describe('CheckboxFilterV2 - existingQuery calculation', () => {
+	const captureExistingQuery = (): Promise<string | null> =>
+		new Promise((resolve) => {
+			server.use(
+				rest.get('http://localhost/api/v1/fields/values', (req, res, ctx) => {
+					const existingQuery = req.url.searchParams.get('existingQuery');
+					resolve(existingQuery);
+					return res(
+						ctx.status(200),
+						ctx.json({
+							status: 'success',
+							data: {
+								values: {
+									relatedValues: [],
+									stringValues: ['test'],
+									numberValues: [],
+								},
+							},
+						}),
+					);
+				}),
+			);
+		});
+
+	describe('useFieldApis.existingQuery takes precedence', () => {
+		it('uses useFieldApis.existingQuery when provided', async () => {
+			const queryPromise = captureExistingQuery();
+
+			render(
+				<CheckboxFilterV2
+					filter={DEFAULT_FILTER}
+					source={QuickFiltersSource.TRACES_EXPLORER}
+					useFieldApis={{
+						...DEFAULT_USE_FIELD_APIS,
+						existingQuery: 'custom.query = "value"',
+					}}
+				/>,
+				undefined,
+				{
+					queryBuilderOverrides: {
+						currentQuery: {
+							builder: {
+								queryData: [
+									{
+										filters: { items: [], op: 'AND' },
+										filter: { expression: 'should.be.ignored = "yes"' },
+									},
+								],
+							},
+						},
+					} as never,
+				},
+			);
+
+			await screen.findByTestId('checkbox-value-row-test');
+			const capturedQuery = await queryPromise;
+			expect(capturedQuery).toBe('custom.query = "value"');
+		});
+
+		it('returns undefined when useFieldApis.existingQuery is null', async () => {
+			const queryPromise = captureExistingQuery();
+
+			render(
+				<CheckboxFilterV2
+					filter={DEFAULT_FILTER}
+					source={QuickFiltersSource.TRACES_EXPLORER}
+					useFieldApis={{
+						...DEFAULT_USE_FIELD_APIS,
+						existingQuery: null,
+					}}
+				/>,
+				undefined,
+				{
+					queryBuilderOverrides: {
+						currentQuery: {
+							builder: {
+								queryData: [
+									{
+										filters: { items: [], op: 'AND' },
+										filter: { expression: 'should.be.ignored = "yes"' },
+									},
+								],
+							},
+						},
+					} as never,
+				},
+			);
+
+			await screen.findByTestId('checkbox-value-row-test');
+			const capturedQuery = await queryPromise;
+			expect(capturedQuery).toBeNull();
+		});
+	});
+
+	describe('V5 filter.expression preferred over V3 filters.items', () => {
+		it('uses V5 filter.expression when both exist', async () => {
+			const queryPromise = captureExistingQuery();
+
+			render(
+				<CheckboxFilterV2
+					filter={DEFAULT_FILTER}
+					source={QuickFiltersSource.TRACES_EXPLORER}
+					useFieldApis={USE_FIELD_APIS_AUTO_DERIVE}
+				/>,
+				undefined,
+				{
+					queryBuilderOverrides: {
+						currentQuery: {
+							builder: {
+								queryData: [
+									{
+										filters: {
+											items: [
+												{
+													key: { key: 'service.name', dataType: 'string', type: 'tag' },
+													op: '=',
+													value: 'from-v3-items',
+												},
+											],
+											op: 'AND',
+										},
+										filter: { expression: 'v5.expression = "preferred"' },
+									},
+								],
+							},
+						},
+					} as never,
+				},
+			);
+
+			await screen.findByTestId('checkbox-value-row-test');
+			const capturedQuery = await queryPromise;
+			expect(capturedQuery).toBe('v5.expression = "preferred"');
+		});
+
+		it('uses V5 filter.expression when no V3 items exist', async () => {
+			const queryPromise = captureExistingQuery();
+
+			render(
+				<CheckboxFilterV2
+					filter={DEFAULT_FILTER}
+					source={QuickFiltersSource.TRACES_EXPLORER}
+					useFieldApis={USE_FIELD_APIS_AUTO_DERIVE}
+				/>,
+				undefined,
+				{
+					queryBuilderOverrides: {
+						currentQuery: {
+							builder: {
+								queryData: [
+									{
+										filters: { items: [], op: 'AND' },
+										filter: { expression: 'only.v5 = "expression"' },
+									},
+								],
+							},
+						},
+					} as never,
+				},
+			);
+
+			await screen.findByTestId('checkbox-value-row-test');
+			const capturedQuery = await queryPromise;
+			expect(capturedQuery).toBe('only.v5 = "expression"');
+		});
+	});
+
+	describe('V3 filters.items fallback', () => {
+		it('converts V3 filters.items to expression when no V5 expression exists', async () => {
+			const queryPromise = captureExistingQuery();
+
+			render(
+				<CheckboxFilterV2
+					filter={DEFAULT_FILTER}
+					source={QuickFiltersSource.TRACES_EXPLORER}
+					useFieldApis={USE_FIELD_APIS_AUTO_DERIVE}
+				/>,
+				undefined,
+				{
+					queryBuilderOverrides: {
+						currentQuery: {
+							builder: {
+								queryData: [
+									{
+										filters: {
+											items: [
+												{
+													key: { key: 'service.name', dataType: 'string', type: 'tag' },
+													op: '=',
+													value: 'api-service',
+												},
+											],
+											op: 'AND',
+										},
+									},
+								],
+							},
+						},
+					} as never,
+				},
+			);
+
+			await screen.findByTestId('checkbox-value-row-test');
+			const capturedQuery = await queryPromise;
+			expect(capturedQuery).toBe("service.name = 'api-service'");
+		});
+
+		it('converts multiple V3 filters.items with AND operator', async () => {
+			const queryPromise = captureExistingQuery();
+
+			render(
+				<CheckboxFilterV2
+					filter={DEFAULT_FILTER}
+					source={QuickFiltersSource.TRACES_EXPLORER}
+					useFieldApis={USE_FIELD_APIS_AUTO_DERIVE}
+				/>,
+				undefined,
+				{
+					queryBuilderOverrides: {
+						currentQuery: {
+							builder: {
+								queryData: [
+									{
+										filters: {
+											items: [
+												{
+													key: { key: 'service.name', dataType: 'string', type: 'tag' },
+													op: '=',
+													value: 'api',
+												},
+												{
+													key: { key: 'env', dataType: 'string', type: 'tag' },
+													op: '=',
+													value: 'prod',
+												},
+											],
+											op: 'AND',
+										},
+									},
+								],
+							},
+						},
+					} as never,
+				},
+			);
+
+			await screen.findByTestId('checkbox-value-row-test');
+			const capturedQuery = await queryPromise;
+			expect(capturedQuery).toBe("service.name = 'api' AND env = 'prod'");
+		});
+
+		it('returns undefined when no filters exist', async () => {
+			const queryPromise = captureExistingQuery();
+
+			render(
+				<CheckboxFilterV2
+					filter={DEFAULT_FILTER}
+					source={QuickFiltersSource.TRACES_EXPLORER}
+					useFieldApis={USE_FIELD_APIS_AUTO_DERIVE}
+				/>,
+				undefined,
+				{
+					queryBuilderOverrides: {
+						currentQuery: {
+							builder: {
+								queryData: [
+									{
+										filters: { items: [], op: 'AND' },
+									},
+								],
+							},
+						},
+					} as never,
+				},
+			);
+
+			await screen.findByTestId('checkbox-value-row-test');
+			const capturedQuery = await queryPromise;
+			expect(capturedQuery).toBeNull();
+		});
+	});
+});

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/v2/__tests__/CheckboxFilterV2.interactions.test.tsx

@@ -0,0 +1,768 @@
+import { screen, waitFor, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { server, rest } from 'mocks-server/server';
+import { render } from 'tests/test-utils';
+
+import { QuickFiltersSource } from '../../../../types';
+
+import CheckboxFilterV2 from '../CheckboxFilterV2';
+import {
+	DEFAULT_FILTER,
+	DEFAULT_USE_FIELD_APIS,
+	getFilterFromCall,
+	mockFieldsValuesAPI,
+	renderWithFilter,
+	setupServer,
+} from '../CheckboxFilterV2.testUtils';
+
+setupServer();
+
+describe('CheckboxFilterV2 - interactions', () => {
+	describe('search functionality', () => {
+		it('filters values based on search text', async () => {
+			const user = userEvent.setup();
+
+			let searchTextReceived = '';
+			server.use(
+				rest.get('http://localhost/api/v1/fields/values', (req, res, ctx) => {
+					searchTextReceived = req.url.searchParams.get('searchText') || '';
+
+					const values =
+						searchTextReceived === ''
+							? ['production', 'staging', 'development']
+							: ['production'];
+
+					return res(
+						ctx.status(200),
+						ctx.json({
+							status: 'success',
+							data: {
+								values: {
+									relatedValues: [],
+									stringValues: values,
+									numberValues: [],
+								},
+							},
+						}),
+					);
+				}),
+			);
+
+			render(
+				<CheckboxFilterV2
+					filter={DEFAULT_FILTER}
+					source={QuickFiltersSource.TRACES_EXPLORER}
+					useFieldApis={DEFAULT_USE_FIELD_APIS}
+				/>,
+			);
+
+			await screen.findByTestId('checkbox-value-row-production');
+			expect(screen.getByTestId('checkbox-value-row-staging')).toBeInTheDocument();
+
+			const searchInput = screen.getByTestId('checkbox-filter-search');
+			await user.type(searchInput, 'prod');
+
+			await waitFor(() => {
+				expect(searchTextReceived).toBe('prod');
+			});
+
+			await waitFor(() => {
+				expect(
+					screen.queryByTestId('checkbox-value-row-staging'),
+				).not.toBeInTheDocument();
+			});
+		});
+
+		it('filters values via search while preserving existingQuery context', async () => {
+			const user = userEvent.setup();
+
+			let requestCount = 0;
+			server.use(
+				rest.get('http://localhost/api/v1/fields/values', (req, res, ctx) => {
+					requestCount += 1;
+					const searchText = req.url.searchParams.get('searchText') || '';
+
+					if (requestCount === 1) {
+						return res(
+							ctx.status(200),
+							ctx.json({
+								status: 'success',
+								data: {
+									values: {
+										relatedValues: ['production'],
+										stringValues: ['staging', 'development'],
+										numberValues: [],
+									},
+								},
+							}),
+						);
+					}
+
+					return res(
+						ctx.status(200),
+						ctx.json({
+							status: 'success',
+							data: {
+								values: {
+									relatedValues: searchText === 'prod' ? ['production'] : [],
+									stringValues: searchText === 'prod' ? ['production'] : ['staging'],
+									numberValues: [],
+								},
+							},
+						}),
+					);
+				}),
+			);
+
+			render(
+				<CheckboxFilterV2
+					filter={DEFAULT_FILTER}
+					source={QuickFiltersSource.TRACES_EXPLORER}
+					useFieldApis={{
+						...DEFAULT_USE_FIELD_APIS,
+						existingQuery: 'service.name = "api"',
+					}}
+				/>,
+				undefined,
+				{
+					queryBuilderOverrides: {
+						currentQuery: {
+							builder: {
+								queryData: [
+									{
+										filters: { items: [], op: 'AND' },
+										filter: { expression: 'service.name = "api"' },
+									},
+								],
+							},
+						},
+					} as never,
+				},
+			);
+
+			await screen.findByTestId('checkbox-value-row-production');
+			// Related values now appear in "Related" section (no badge, uses divider instead)
+			expect(screen.getByTestId('section-divider-related')).toBeInTheDocument();
+
+			const searchInput = screen.getByTestId('checkbox-filter-search');
+			await user.type(searchInput, 'prod');
+
+			await waitFor(() => {
+				expect(
+					screen.queryByTestId('checkbox-value-row-staging'),
+				).not.toBeInTheDocument();
+				expect(
+					screen.getByTestId('checkbox-value-row-production'),
+				).toBeInTheDocument();
+			});
+		});
+
+		it('shows filtered results in all_values section when searching with existingQuery', async () => {
+			const user = userEvent.setup();
+
+			server.use(
+				rest.get('http://localhost/api/v1/fields/values', (req, res, ctx) => {
+					const searchText = req.url.searchParams.get('searchText') || '';
+
+					return res(
+						ctx.status(200),
+						ctx.json({
+							status: 'success',
+							data: {
+								values: {
+									relatedValues: [],
+									stringValues: searchText === '' ? ['prod', 'staging'] : ['prod-match'],
+									numberValues: [],
+								},
+							},
+						}),
+					);
+				}),
+			);
+
+			render(
+				<CheckboxFilterV2
+					filter={DEFAULT_FILTER}
+					source={QuickFiltersSource.TRACES_EXPLORER}
+					useFieldApis={{
+						...DEFAULT_USE_FIELD_APIS,
+						existingQuery: 'service.name = "api"',
+					}}
+				/>,
+			);
+
+			await screen.findByTestId('checkbox-value-row-prod');
+
+			const searchInput = screen.getByTestId('checkbox-filter-search');
+			await user.type(searchInput, 'prod');
+
+			await waitFor(() => {
+				expect(screen.getByTestId('section-all_values')).toBeInTheDocument();
+				expect(
+					screen.getByTestId('checkbox-value-row-prod-match'),
+				).toBeInTheDocument();
+			});
+		});
+
+		it('shows empty search results message when no matches found', async () => {
+			const user = userEvent.setup();
+
+			server.use(
+				rest.get('http://localhost/api/v1/fields/values', (req, res, ctx) => {
+					const searchText = req.url.searchParams.get('searchText') || '';
+
+					return res(
+						ctx.status(200),
+						ctx.json({
+							status: 'success',
+							data: {
+								values: {
+									relatedValues: [],
+									stringValues: searchText === '' ? ['prod', 'staging'] : [],
+									numberValues: [],
+								},
+							},
+						}),
+					);
+				}),
+			);
+
+			render(
+				<CheckboxFilterV2
+					filter={DEFAULT_FILTER}
+					source={QuickFiltersSource.TRACES_EXPLORER}
+					useFieldApis={DEFAULT_USE_FIELD_APIS}
+				/>,
+			);
+
+			await screen.findByTestId('checkbox-value-row-prod');
+
+			const searchInput = screen.getByTestId('checkbox-filter-search');
+			await user.type(searchInput, 'xyz-no-match');
+
+			await waitFor(() => {
+				expect(
+					screen.getByTestId('checkbox-filter-no-search-results'),
+				).toBeInTheDocument();
+			});
+		});
+
+		it('shows both RELATED and ALL_VALUES sections with non-overlapping values', async () => {
+			// This tests the bug fix where different pod names in relatedValues vs stringValues
+			// caused all items to go to ALL_VALUES instead of showing RELATED section
+			server.use(
+				rest.get('http://localhost/api/v1/fields/values', (req, res, ctx) =>
+					res(
+						ctx.status(200),
+						ctx.json({
+							status: 'success',
+							data: {
+								values: {
+									// Non-overlapping: different pod instances
+									relatedValues: ['pod-a-instance-1', 'pod-b-instance-1'],
+									stringValues: ['pod-a-instance-2', 'pod-b-instance-2'],
+									numberValues: [],
+								},
+							},
+						}),
+					),
+				),
+			);
+
+			render(
+				<CheckboxFilterV2
+					filter={DEFAULT_FILTER}
+					source={QuickFiltersSource.TRACES_EXPLORER}
+					useFieldApis={{
+						...DEFAULT_USE_FIELD_APIS,
+						existingQuery: 'service.name = "api"',
+					}}
+				/>,
+			);
+
+			// Wait for values to load
+			await screen.findByTestId('checkbox-value-row-pod-a-instance-1');
+
+			// RELATED section should exist with relatedValues
+			expect(screen.getByTestId('section-related')).toBeInTheDocument();
+			expect(
+				screen.getByTestId('checkbox-value-row-pod-a-instance-1'),
+			).toBeInTheDocument();
+			expect(
+				screen.getByTestId('checkbox-value-row-pod-b-instance-1'),
+			).toBeInTheDocument();
+
+			// ALL_VALUES section should exist with stringValues
+			expect(screen.getByTestId('section-all_values')).toBeInTheDocument();
+			expect(
+				screen.getByTestId('checkbox-value-row-pod-a-instance-2'),
+			).toBeInTheDocument();
+			expect(
+				screen.getByTestId('checkbox-value-row-pod-b-instance-2'),
+			).toBeInTheDocument();
+		});
+
+		it('shows both sections during search with filtered non-overlapping values', async () => {
+			const user = userEvent.setup();
+
+			server.use(
+				rest.get('http://localhost/api/v1/fields/values', (req, res, ctx) => {
+					const searchText = req.url.searchParams.get('searchText') || '';
+
+					// Simulate API filtering - both arrays filtered but remain non-overlapping
+					const relatedValues =
+						searchText === '' ? ['pod-a-v1', 'pod-b-v1', 'pod-c-v1'] : ['pod-a-v1']; // filtered to match 'pod-a'
+					const stringValues =
+						searchText === '' ? ['pod-a-v2', 'pod-b-v2', 'pod-c-v2'] : ['pod-a-v2']; // filtered to match 'pod-a'
+
+					return res(
+						ctx.status(200),
+						ctx.json({
+							status: 'success',
+							data: {
+								values: {
+									relatedValues,
+									stringValues,
+									numberValues: [],
+								},
+							},
+						}),
+					);
+				}),
+			);
+
+			render(
+				<CheckboxFilterV2
+					filter={DEFAULT_FILTER}
+					source={QuickFiltersSource.TRACES_EXPLORER}
+					useFieldApis={{
+						...DEFAULT_USE_FIELD_APIS,
+						existingQuery: 'service.name = "api"',
+					}}
+				/>,
+			);
+
+			await screen.findByTestId('checkbox-value-row-pod-a-v1');
+
+			const searchInput = screen.getByTestId('checkbox-filter-search');
+			await user.type(searchInput, 'pod-a');
+
+			// After search, both sections should still appear with filtered results
+			await waitFor(() => {
+				// RELATED section with filtered relatedValues
+				expect(screen.getByTestId('section-related')).toBeInTheDocument();
+				expect(
+					screen.getByTestId('checkbox-value-row-pod-a-v1'),
+				).toBeInTheDocument();
+
+				// ALL_VALUES section with filtered stringValues
+				expect(screen.getByTestId('section-all_values')).toBeInTheDocument();
+				expect(
+					screen.getByTestId('checkbox-value-row-pod-a-v2'),
+				).toBeInTheDocument();
+
+				// Other values should be filtered out
+				expect(
+					screen.queryByTestId('checkbox-value-row-pod-b-v1'),
+				).not.toBeInTheDocument();
+			});
+		});
+	});
+
+	describe('header interactions', () => {
+		it('collapses when header clicked on open filter', async () => {
+			const user = userEvent.setup();
+
+			mockFieldsValuesAPI({
+				stringValues: ['production'],
+			});
+
+			render(
+				<CheckboxFilterV2
+					filter={DEFAULT_FILTER}
+					source={QuickFiltersSource.TRACES_EXPLORER}
+					useFieldApis={DEFAULT_USE_FIELD_APIS}
+				/>,
+			);
+
+			await screen.findByTestId('checkbox-value-row-production');
+
+			const header = screen.getByTestId('checkbox-filter-header');
+			expect(header).toHaveAttribute('data-state', 'open');
+
+			await user.click(header);
+
+			expect(header).toHaveAttribute('data-state', 'closed');
+			expect(
+				screen.queryByTestId('checkbox-value-row-production'),
+			).not.toBeInTheDocument();
+		});
+
+		it('expands when header clicked on closed filter', async () => {
+			const user = userEvent.setup();
+
+			mockFieldsValuesAPI({
+				stringValues: ['production'],
+			});
+
+			render(
+				<CheckboxFilterV2
+					filter={{ ...DEFAULT_FILTER, defaultOpen: false }}
+					source={QuickFiltersSource.TRACES_EXPLORER}
+					useFieldApis={DEFAULT_USE_FIELD_APIS}
+				/>,
+			);
+
+			const header = screen.getByTestId('checkbox-filter-header');
+			expect(header).toHaveAttribute('data-state', 'closed');
+
+			await user.click(header);
+
+			expect(header).toHaveAttribute('data-state', 'open');
+			await screen.findByTestId('checkbox-value-row-production');
+		});
+	});
+
+	describe('show more functionality', () => {
+		it('shows "Show More..." when more than 10 values', async () => {
+			const values = Array.from(
+				{ length: 15 },
+				(_, i) => `value-${String(i).padStart(2, '0')}`,
+			);
+			mockFieldsValuesAPI({ stringValues: values });
+
+			render(
+				<CheckboxFilterV2
+					filter={DEFAULT_FILTER}
+					source={QuickFiltersSource.TRACES_EXPLORER}
+					useFieldApis={DEFAULT_USE_FIELD_APIS}
+				/>,
+			);
+
+			await screen.findByTestId('checkbox-value-row-value-00');
+
+			expect(screen.getByTestId('checkbox-filter-show-more')).toBeInTheDocument();
+
+			expect(
+				screen.queryByTestId('checkbox-value-row-value-10'),
+			).not.toBeInTheDocument();
+		});
+
+		it('loads more values when "Show More..." clicked', async () => {
+			const user = userEvent.setup();
+
+			const values = Array.from(
+				{ length: 15 },
+				(_, i) => `value-${String(i).padStart(2, '0')}`,
+			);
+			mockFieldsValuesAPI({ stringValues: values });
+
+			render(
+				<CheckboxFilterV2
+					filter={DEFAULT_FILTER}
+					source={QuickFiltersSource.TRACES_EXPLORER}
+					useFieldApis={DEFAULT_USE_FIELD_APIS}
+				/>,
+			);
+
+			await screen.findByTestId('checkbox-value-row-value-00');
+
+			await user.click(screen.getByTestId('checkbox-filter-show-more'));
+
+			await screen.findByTestId('checkbox-value-row-value-10');
+			expect(
+				screen.getByTestId('checkbox-value-row-value-14'),
+			).toBeInTheDocument();
+		});
+	});
+
+	describe('clear functionality', () => {
+		it('shows clear button when filter is open and has filter applied', async () => {
+			mockFieldsValuesAPI({
+				stringValues: ['production'],
+			});
+
+			render(
+				<CheckboxFilterV2
+					filter={DEFAULT_FILTER}
+					source={QuickFiltersSource.TRACES_EXPLORER}
+					useFieldApis={DEFAULT_USE_FIELD_APIS}
+				/>,
+				undefined,
+				{
+					queryBuilderOverrides: {
+						currentQuery: {
+							builder: {
+								queryData: [
+									{
+										filters: {
+											items: [
+												{
+													key: { key: 'deployment.environment' },
+													op: 'in',
+													value: ['production'],
+												},
+											],
+											op: 'AND',
+										},
+									},
+								],
+							},
+						},
+					} as never,
+				},
+			);
+
+			await screen.findByTestId('checkbox-value-row-production');
+
+			expect(screen.getByTestId('checkbox-filter-clear-all')).toBeInTheDocument();
+		});
+
+		it('hides clear button when no filter applied for attribute', async () => {
+			mockFieldsValuesAPI({
+				stringValues: ['production'],
+			});
+
+			render(
+				<CheckboxFilterV2
+					filter={DEFAULT_FILTER}
+					source={QuickFiltersSource.TRACES_EXPLORER}
+					useFieldApis={DEFAULT_USE_FIELD_APIS}
+				/>,
+			);
+
+			await screen.findByTestId('checkbox-value-row-production');
+
+			expect(
+				screen.queryByTestId('checkbox-filter-clear-all'),
+			).not.toBeInTheDocument();
+		});
+
+		it('calls onFilterChange when clear clicked', async () => {
+			const user = userEvent.setup();
+			const onFilterChange = jest.fn();
+
+			mockFieldsValuesAPI({
+				stringValues: ['production'],
+			});
+
+			render(
+				<CheckboxFilterV2
+					filter={DEFAULT_FILTER}
+					source={QuickFiltersSource.TRACES_EXPLORER}
+					useFieldApis={DEFAULT_USE_FIELD_APIS}
+					onFilterChange={onFilterChange}
+				/>,
+				undefined,
+				{
+					queryBuilderOverrides: {
+						currentQuery: {
+							builder: {
+								queryData: [
+									{
+										filters: {
+											items: [
+												{
+													key: { key: 'deployment.environment' },
+													op: 'in',
+													value: ['production'],
+												},
+											],
+											op: 'AND',
+										},
+									},
+								],
+							},
+						},
+					} as never,
+				},
+			);
+
+			await screen.findByTestId('checkbox-value-row-production');
+
+			await user.click(screen.getByTestId('checkbox-filter-clear-all'));
+
+			expect(onFilterChange).toHaveBeenCalled();
+		});
+	});
+
+	describe('value row interactions', () => {
+		it('calls onFilterChange when checkbox value clicked', async () => {
+			const user = userEvent.setup();
+			const onFilterChange = jest.fn();
+
+			mockFieldsValuesAPI({
+				stringValues: ['production', 'staging'],
+			});
+
+			render(
+				<CheckboxFilterV2
+					filter={DEFAULT_FILTER}
+					source={QuickFiltersSource.TRACES_EXPLORER}
+					useFieldApis={DEFAULT_USE_FIELD_APIS}
+					onFilterChange={onFilterChange}
+				/>,
+			);
+
+			const productionRow = await screen.findByTestId(
+				'checkbox-value-row-production',
+			);
+
+			await user.click(within(productionRow).getByText('production'));
+
+			expect(onFilterChange).toHaveBeenCalled();
+		});
+
+		it('creates NOT IN filter when unchecking related item with no existing filter', async () => {
+			const user = userEvent.setup();
+			const onFilterChange = jest.fn();
+
+			mockFieldsValuesAPI({
+				relatedValues: ['valueA'],
+				stringValues: ['valueB'],
+			});
+
+			// Start with no filter, related items show as checked
+			// Clicking unchecks them → creates NOT IN filter to exclude
+			renderWithFilter(onFilterChange);
+
+			const rowA = await screen.findByTestId('checkbox-value-row-valueA');
+			expect(rowA).toHaveAttribute('data-state', 'checked');
+
+			await user.click(within(rowA).getByRole('checkbox'));
+
+			expect(onFilterChange).toHaveBeenCalledTimes(1);
+			const filter = getFilterFromCall(onFilterChange);
+			expect(filter?.op).toBe('not in');
+			expect(filter?.value).toBe('valueA');
+		});
+
+		it('converts NOT IN to IN when toggling unchecked (other) item', async () => {
+			const user = userEvent.setup();
+			const onFilterChange = jest.fn();
+
+			mockFieldsValuesAPI({
+				relatedValues: ['valueA'],
+				stringValues: ['valueB'],
+			});
+
+			// Clicking unchecked "Other" item with NOT IN filter should convert to IN [B]
+			renderWithFilter(onFilterChange, { op: 'not in', value: ['valueA'] });
+
+			const rowB = await screen.findByTestId('checkbox-value-row-valueB');
+			expect(rowB).toHaveAttribute('data-state', 'unchecked');
+
+			await user.click(within(rowB).getByRole('checkbox'));
+
+			expect(onFilterChange).toHaveBeenCalledTimes(1);
+			const filter = getFilterFromCall(onFilterChange);
+			expect(filter?.op).toBe('in');
+			expect(filter?.value).toBe('valueB');
+		});
+
+		it('accumulates both values in IN when toggling checked (related) then unchecked (other)', async () => {
+			const user = userEvent.setup();
+			const onFilterChange = jest.fn();
+
+			mockFieldsValuesAPI({
+				relatedValues: ['valueA'],
+				stringValues: ['valueB'],
+			});
+
+			// Start with IN filter for valueA
+			renderWithFilter(onFilterChange, { op: 'in', value: ['valueA'] });
+
+			const rowA = await screen.findByTestId('checkbox-value-row-valueA');
+			expect(rowA).toHaveAttribute('data-state', 'checked');
+
+			const rowB = screen.getByTestId('checkbox-value-row-valueB');
+			expect(rowB).toHaveAttribute('data-state', 'unchecked');
+
+			// Toggle B (unchecked -> should add to IN)
+			await user.click(within(rowB).getByRole('checkbox'));
+
+			expect(onFilterChange).toHaveBeenCalledTimes(1);
+			const filter = getFilterFromCall(onFilterChange);
+			expect(filter?.op).toBe('in');
+			expect(filter?.value).toStrictEqual(['valueA', 'valueB']);
+		});
+
+		it('adds to NOT IN when toggling checked (related) with existing NOT IN filter', async () => {
+			const user = userEvent.setup();
+			const onFilterChange = jest.fn();
+
+			mockFieldsValuesAPI({
+				relatedValues: ['valueA'],
+				stringValues: ['valueB'],
+			});
+
+			// Start with NOT IN filter for valueB
+			renderWithFilter(onFilterChange, { op: 'not in', value: ['valueB'] });
+
+			const rowA = await screen.findByTestId('checkbox-value-row-valueA');
+			// Related values show as checked
+			expect(rowA).toHaveAttribute('data-state', 'checked');
+
+			// Toggle A (checked -> should add to NOT IN)
+			await user.click(within(rowA).getByRole('checkbox'));
+
+			expect(onFilterChange).toHaveBeenCalledTimes(1);
+			const filter = getFilterFromCall(onFilterChange);
+			expect(filter?.op).toBe('not in');
+			expect(filter?.value).toStrictEqual(['valueB', 'valueA']);
+		});
+
+		it('creates NOT IN for single value when toggling related item with existing IN filter', async () => {
+			const user = userEvent.setup();
+			const onFilterChange = jest.fn();
+
+			mockFieldsValuesAPI({
+				relatedValues: ['relatedValue'],
+				stringValues: ['otherValue'],
+			});
+
+			// Start with IN filter for otherValue (Selected section)
+			// relatedValue is in Related section (checked visually)
+			renderWithFilter(onFilterChange, { op: 'in', value: ['otherValue'] });
+
+			const selectedRow = await screen.findByTestId(
+				'checkbox-value-row-otherValue',
+			);
+			expect(selectedRow).toHaveAttribute('data-state', 'checked');
+
+			const relatedRow = screen.getByTestId('checkbox-value-row-relatedValue');
+			expect(relatedRow).toHaveAttribute('data-state', 'checked');
+
+			// Toggle related item (checked -> should create NOT IN with just this value)
+			await user.click(within(relatedRow).getByRole('checkbox'));
+
+			expect(onFilterChange).toHaveBeenCalledTimes(1);
+			const filter = getFilterFromCall(onFilterChange);
+			expect(filter?.op).toBe('not in');
+			expect(filter?.value).toBe('relatedValue');
+		});
+	});
+
+	describe('custom renderer', () => {
+		it('uses customRendererForValue when provided', async () => {
+			mockFieldsValuesAPI({
+				stringValues: ['production'],
+			});
+
+			const customRenderer = (value: string): JSX.Element => (
+				<span data-testid="custom-rendered">{`ENV: ${value}`}</span>
+			);
+
+			render(
+				<CheckboxFilterV2
+					filter={{ ...DEFAULT_FILTER, customRendererForValue: customRenderer }}
+					source={QuickFiltersSource.TRACES_EXPLORER}
+					useFieldApis={DEFAULT_USE_FIELD_APIS}
+				/>,
+			);
+
+			await screen.findByTestId('custom-rendered');
+			expect(screen.getByText('ENV: production')).toBeInTheDocument();
+		});
+	});
+});

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/v2/__tests__/CheckboxFilterV2.itemRules.test.tsx

@@ -0,0 +1,499 @@
+import { screen, within } from '@testing-library/react';
+import { render } from 'tests/test-utils';
+
+import { QuickFiltersSource } from '../../../../types';
+
+import CheckboxFilterV2 from '../CheckboxFilterV2';
+import {
+	DEFAULT_FILTER,
+	DEFAULT_USE_FIELD_APIS,
+	mockFieldsValuesAPI,
+	setupServer,
+} from '../CheckboxFilterV2.testUtils';
+
+setupServer();
+
+describe('CheckboxFilterV2 - item rules', () => {
+	describe('no existing query', () => {
+		it('all values show as checked with no badge when no query exists', async () => {
+			mockFieldsValuesAPI({
+				stringValues: ['production', 'staging'],
+			});
+
+			render(
+				<CheckboxFilterV2
+					filter={DEFAULT_FILTER}
+					source={QuickFiltersSource.TRACES_EXPLORER}
+					useFieldApis={DEFAULT_USE_FIELD_APIS}
+				/>,
+			);
+
+			const productionRow = await screen.findByTestId(
+				'checkbox-value-row-production',
+			);
+			expect(within(productionRow).getByText('production')).toBeInTheDocument();
+			const stagingRow = screen.getByTestId('checkbox-value-row-staging');
+
+			expect(productionRow).toHaveAttribute('data-state', 'checked');
+			expect(stagingRow).toHaveAttribute('data-state', 'checked');
+
+			// No section dividers when no existing query (all in "selected" section)
+			expect(
+				screen.queryByTestId('section-divider-related'),
+			).not.toBeInTheDocument();
+			expect(
+				screen.queryByTestId('section-divider-all-values'),
+			).not.toBeInTheDocument();
+		});
+	});
+
+	describe('with existing query (related values)', () => {
+		it('shows related values in "Related" section with checked state', async () => {
+			mockFieldsValuesAPI({
+				relatedValues: ['production'],
+				stringValues: ['staging', 'development'],
+			});
+
+			render(
+				<CheckboxFilterV2
+					filter={DEFAULT_FILTER}
+					source={QuickFiltersSource.TRACES_EXPLORER}
+					useFieldApis={{
+						...DEFAULT_USE_FIELD_APIS,
+						existingQuery: 'service.name = "api"',
+					}}
+				/>,
+				undefined,
+				{
+					queryBuilderOverrides: {
+						currentQuery: {
+							builder: {
+								queryData: [
+									{
+										filters: { items: [], op: 'AND' },
+										filter: { expression: 'service.name = "api"' },
+									},
+								],
+							},
+						},
+					} as never,
+				},
+			);
+
+			const productionRow = await screen.findByTestId(
+				'checkbox-value-row-production',
+			);
+			expect(within(productionRow).getByText('production')).toBeInTheDocument();
+
+			// Related values show as checked in "Related" section
+			expect(screen.getByTestId('section-divider-related')).toBeInTheDocument();
+			expect(productionRow).toHaveAttribute('data-state', 'checked');
+
+			// Other values show as unchecked in "All values" section
+			expect(screen.getByTestId('section-divider-all-values')).toBeInTheDocument();
+			const stagingRow = screen.getByTestId('checkbox-value-row-staging');
+			expect(stagingRow).toHaveAttribute('data-state', 'unchecked');
+		});
+
+		it('shows no badge for values not in relatedValues (unchecked state in All values section)', async () => {
+			mockFieldsValuesAPI({
+				relatedValues: ['production'],
+				stringValues: ['staging'],
+			});
+
+			render(
+				<CheckboxFilterV2
+					filter={DEFAULT_FILTER}
+					source={QuickFiltersSource.TRACES_EXPLORER}
+					useFieldApis={{
+						...DEFAULT_USE_FIELD_APIS,
+						existingQuery: 'service.name = "api"',
+					}}
+				/>,
+				undefined,
+				{
+					queryBuilderOverrides: {
+						currentQuery: {
+							builder: {
+								queryData: [
+									{
+										filters: { items: [], op: 'AND' },
+										filter: { expression: 'service.name = "api"' },
+									},
+								],
+							},
+						},
+					} as never,
+				},
+			);
+
+			const stagingRow = await screen.findByTestId('checkbox-value-row-staging');
+			expect(within(stagingRow).getByText('staging')).toBeInTheDocument();
+			expect(stagingRow).toHaveAttribute('data-state', 'unchecked');
+			expect(within(stagingRow).queryByTestId(/^badge-/)).not.toBeInTheDocument();
+		});
+
+		it('shows related values as checked when hasFilterForThisKey=true and isInRelatedValues=true', async () => {
+			mockFieldsValuesAPI({
+				relatedValues: ['production', 'staging'],
+				stringValues: ['development'],
+			});
+
+			render(
+				<CheckboxFilterV2
+					filter={DEFAULT_FILTER}
+					source={QuickFiltersSource.TRACES_EXPLORER}
+					useFieldApis={{
+						...DEFAULT_USE_FIELD_APIS,
+						existingQuery: 'service.name = "api"',
+					}}
+				/>,
+				undefined,
+				{
+					queryBuilderOverrides: {
+						currentQuery: {
+							builder: {
+								queryData: [
+									{
+										filters: {
+											items: [
+												{
+													key: { key: 'deployment.environment' },
+													op: 'in',
+													value: ['production'],
+												},
+											],
+											op: 'AND',
+										},
+										filter: { expression: 'service.name = "api"' },
+									},
+								],
+							},
+						},
+					} as never,
+				},
+			);
+
+			// production is selected - in selected section
+			const productionRow = await screen.findByTestId(
+				'checkbox-value-row-production',
+			);
+			expect(productionRow).toHaveAttribute('data-state', 'checked');
+
+			// staging is related - in related section with checked state
+			const stagingRow = screen.getByTestId('checkbox-value-row-staging');
+			expect(stagingRow).toHaveAttribute('data-state', 'checked');
+			expect(screen.getByTestId('section-divider-related')).toBeInTheDocument();
+		});
+	});
+
+	describe('selected values with IN operator', () => {
+		it('shows checked state with no badge for IN-selected values', async () => {
+			mockFieldsValuesAPI({
+				stringValues: ['production', 'staging'],
+			});
+
+			render(
+				<CheckboxFilterV2
+					filter={DEFAULT_FILTER}
+					source={QuickFiltersSource.TRACES_EXPLORER}
+					useFieldApis={DEFAULT_USE_FIELD_APIS}
+				/>,
+				undefined,
+				{
+					queryBuilderOverrides: {
+						currentQuery: {
+							builder: {
+								queryData: [
+									{
+										filters: {
+											items: [
+												{
+													key: { key: 'deployment.environment' },
+													op: 'in',
+													value: ['production'],
+												},
+											],
+											op: 'AND',
+										},
+									},
+								],
+							},
+						},
+					} as never,
+				},
+			);
+
+			const productionRow = await screen.findByTestId(
+				'checkbox-value-row-production',
+			);
+			expect(productionRow).toHaveAttribute('data-state', 'checked');
+			expect(
+				within(productionRow).queryByTestId(/^badge-/),
+			).not.toBeInTheDocument();
+
+			const stagingRow = screen.getByTestId('checkbox-value-row-staging');
+			expect(stagingRow).toHaveAttribute('data-state', 'unchecked');
+		});
+	});
+
+	describe('selected values with NOT IN operator', () => {
+		it('shows unchecked state with no badge for NOT_IN-selected values', async () => {
+			mockFieldsValuesAPI({
+				stringValues: ['production', 'staging'],
+			});
+
+			render(
+				<CheckboxFilterV2
+					filter={DEFAULT_FILTER}
+					source={QuickFiltersSource.TRACES_EXPLORER}
+					useFieldApis={DEFAULT_USE_FIELD_APIS}
+				/>,
+				undefined,
+				{
+					queryBuilderOverrides: {
+						currentQuery: {
+							builder: {
+								queryData: [
+									{
+										filters: {
+											items: [
+												{
+													key: { key: 'deployment.environment' },
+													op: 'not in',
+													value: ['production'],
+												},
+											],
+											op: 'AND',
+										},
+									},
+								],
+							},
+						},
+					} as never,
+				},
+			);
+
+			const productionRow = await screen.findByTestId(
+				'checkbox-value-row-production',
+			);
+			expect(productionRow).toHaveAttribute('data-state', 'unchecked');
+			expect(
+				within(productionRow).queryByTestId(/^badge-/),
+			).not.toBeInTheDocument();
+
+			const stagingRow = screen.getByTestId('checkbox-value-row-staging');
+			expect(stagingRow).toHaveAttribute('data-state', 'unchecked');
+			expect(within(stagingRow).queryByTestId(/^badge-/)).not.toBeInTheDocument();
+		});
+	});
+
+	describe('section ordering', () => {
+		it('orders selected section before related section before other section', async () => {
+			mockFieldsValuesAPI({
+				relatedValues: ['related-value'],
+				stringValues: ['other-value', 'selected-value'],
+			});
+
+			render(
+				<CheckboxFilterV2
+					filter={DEFAULT_FILTER}
+					source={QuickFiltersSource.TRACES_EXPLORER}
+					useFieldApis={{
+						...DEFAULT_USE_FIELD_APIS,
+						existingQuery: 'service.name = "api"',
+					}}
+				/>,
+				undefined,
+				{
+					queryBuilderOverrides: {
+						currentQuery: {
+							builder: {
+								queryData: [
+									{
+										filters: {
+											items: [
+												{
+													key: { key: 'deployment.environment' },
+													op: 'in',
+													value: ['selected-value'],
+												},
+											],
+											op: 'AND',
+										},
+										filter: { expression: 'service.name = "api"' },
+									},
+								],
+							},
+						},
+					} as never,
+				},
+			);
+
+			await screen.findByTestId('checkbox-value-row-selected-value');
+
+			const allRows = screen.getAllByTestId(/^checkbox-value-row-/);
+			const values = allRows.map((row) =>
+				row.getAttribute('data-testid')?.replace('checkbox-value-row-', ''),
+			);
+
+			expect(values[0]).toBe('selected-value');
+			expect(values[1]).toBe('related-value');
+			expect(values[2]).toBe('other-value');
+		});
+
+		it('sorts alphabetically within same section', async () => {
+			mockFieldsValuesAPI({
+				relatedValues: ['zebra', 'alpha', 'mike'],
+				stringValues: [],
+			});
+
+			render(
+				<CheckboxFilterV2
+					filter={DEFAULT_FILTER}
+					source={QuickFiltersSource.TRACES_EXPLORER}
+					useFieldApis={{
+						...DEFAULT_USE_FIELD_APIS,
+						existingQuery: 'service.name = "api"',
+					}}
+				/>,
+				undefined,
+				{
+					queryBuilderOverrides: {
+						currentQuery: {
+							builder: {
+								queryData: [
+									{
+										filters: { items: [], op: 'AND' },
+										filter: { expression: 'service.name = "api"' },
+									},
+								],
+							},
+						},
+					} as never,
+				},
+			);
+
+			await screen.findByTestId('checkbox-value-row-alpha');
+
+			const allRows = screen.getAllByTestId(/^checkbox-value-row-/);
+			const values = allRows.map((row) =>
+				row.getAttribute('data-testid')?.replace('checkbox-value-row-', ''),
+			);
+
+			expect(values).toStrictEqual(['alpha', 'mike', 'zebra']);
+		});
+	});
+
+	describe('mixed state scenarios', () => {
+		it('handles mixed state: IN-selected + related + other in same list', async () => {
+			mockFieldsValuesAPI({
+				relatedValues: ['related-env'],
+				stringValues: ['other-env', 'selected-env'],
+			});
+
+			render(
+				<CheckboxFilterV2
+					filter={DEFAULT_FILTER}
+					source={QuickFiltersSource.TRACES_EXPLORER}
+					useFieldApis={{
+						...DEFAULT_USE_FIELD_APIS,
+						existingQuery: 'service.name = "api"',
+					}}
+				/>,
+				undefined,
+				{
+					queryBuilderOverrides: {
+						currentQuery: {
+							builder: {
+								queryData: [
+									{
+										filters: {
+											items: [
+												{
+													key: { key: 'deployment.environment' },
+													op: 'in',
+													value: ['selected-env'],
+												},
+											],
+											op: 'AND',
+										},
+										filter: { expression: 'service.name = "api"' },
+									},
+								],
+							},
+						},
+					} as never,
+				},
+			);
+
+			const selectedRow = await screen.findByTestId(
+				'checkbox-value-row-selected-env',
+			);
+			expect(selectedRow).toHaveAttribute('data-state', 'checked');
+			expect(within(selectedRow).queryByTestId(/^badge-/)).not.toBeInTheDocument();
+
+			// Related values now show as checked
+			const relatedRow = screen.getByTestId('checkbox-value-row-related-env');
+			expect(relatedRow).toHaveAttribute('data-state', 'checked');
+			expect(screen.getByTestId('section-divider-related')).toBeInTheDocument();
+
+			const otherRow = screen.getByTestId('checkbox-value-row-other-env');
+			expect(otherRow).toHaveAttribute('data-state', 'unchecked');
+			expect(within(otherRow).queryByTestId(/^badge-/)).not.toBeInTheDocument();
+		});
+
+		it('handles NOT_IN-selected alongside related values', async () => {
+			mockFieldsValuesAPI({
+				relatedValues: ['related-env'],
+				stringValues: ['other-env', 'excluded-env'],
+			});
+
+			render(
+				<CheckboxFilterV2
+					filter={DEFAULT_FILTER}
+					source={QuickFiltersSource.TRACES_EXPLORER}
+					useFieldApis={{
+						...DEFAULT_USE_FIELD_APIS,
+						existingQuery: 'service.name = "api"',
+					}}
+				/>,
+				undefined,
+				{
+					queryBuilderOverrides: {
+						currentQuery: {
+							builder: {
+								queryData: [
+									{
+										filters: {
+											items: [
+												{
+													key: { key: 'deployment.environment' },
+													op: 'not in',
+													value: ['excluded-env'],
+												},
+											],
+											op: 'AND',
+										},
+										filter: { expression: 'service.name = "api"' },
+									},
+								],
+							},
+						},
+					} as never,
+				},
+			);
+
+			const excludedRow = await screen.findByTestId(
+				'checkbox-value-row-excluded-env',
+			);
+			expect(excludedRow).toHaveAttribute('data-state', 'unchecked');
+			expect(within(excludedRow).queryByTestId(/^badge-/)).not.toBeInTheDocument();
+
+			// Related values show as checked
+			const relatedRow = screen.getByTestId('checkbox-value-row-related-env');
+			expect(relatedRow).toHaveAttribute('data-state', 'checked');
+			expect(screen.getByTestId('section-divider-related')).toBeInTheDocument();
+		});
+	});
+});

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/v2/__tests__/CheckboxFilterV2.states.test.tsx

@@ -0,0 +1,207 @@
+import { screen, waitFor, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { server, rest } from 'mocks-server/server';
+import { render } from 'tests/test-utils';
+
+import { QuickFiltersSource } from '../../../../types';
+
+import CheckboxFilterV2 from '../CheckboxFilterV2';
+import {
+	DEFAULT_FILTER,
+	DEFAULT_USE_FIELD_APIS,
+	mockFieldsValuesAPI,
+	mockFieldsValuesAPILoading,
+	setupServer,
+} from '../CheckboxFilterV2.testUtils';
+
+setupServer();
+
+describe('CheckboxFilterV2 - states', () => {
+	describe('loading states', () => {
+		it('shows skeleton while loading initial data', async () => {
+			mockFieldsValuesAPILoading();
+
+			render(
+				<CheckboxFilterV2
+					filter={DEFAULT_FILTER}
+					source={QuickFiltersSource.TRACES_EXPLORER}
+					useFieldApis={DEFAULT_USE_FIELD_APIS}
+				/>,
+			);
+
+			expect(screen.getByTestId('checkbox-filter-v2')).toBeInTheDocument();
+			await waitFor(() => {
+				expect(
+					screen.getByTestId('checkbox-filter-v2').querySelector('.ant-skeleton'),
+				).toBeInTheDocument();
+			});
+		});
+
+		it('shows skeleton when initially closed filter is opened for the first time', async () => {
+			const user = userEvent.setup();
+			mockFieldsValuesAPILoading();
+
+			const closedFilter = { ...DEFAULT_FILTER, defaultOpen: false };
+
+			render(
+				<CheckboxFilterV2
+					filter={closedFilter}
+					source={QuickFiltersSource.TRACES_EXPLORER}
+					useFieldApis={DEFAULT_USE_FIELD_APIS}
+				/>,
+			);
+
+			// Filter starts closed - no skeleton, no content
+			expect(
+				screen.getByTestId('checkbox-filter-v2').querySelector('.ant-skeleton'),
+			).not.toBeInTheDocument();
+			expect(
+				screen.queryByTestId('checkbox-filter-empty'),
+			).not.toBeInTheDocument();
+
+			// Click header to open
+			const header = screen.getByTestId('checkbox-filter-header');
+			await user.click(header);
+
+			// Should show skeleton while loading, NOT "No values found"
+			await waitFor(() => {
+				expect(
+					screen.getByTestId('checkbox-filter-v2').querySelector('.ant-skeleton'),
+				).toBeInTheDocument();
+			});
+			expect(
+				screen.queryByTestId('checkbox-filter-empty'),
+			).not.toBeInTheDocument();
+		});
+
+		it('shows search spinner when fetching after initial load', async () => {
+			const user = userEvent.setup();
+
+			let requestCount = 0;
+			server.use(
+				rest.get('http://localhost/api/v1/fields/values', (req, res, ctx) => {
+					requestCount += 1;
+					if (requestCount === 1) {
+						return res(
+							ctx.status(200),
+							ctx.json({
+								status: 'success',
+								data: {
+									values: {
+										relatedValues: [],
+										stringValues: ['production', 'staging'],
+										numberValues: [],
+									},
+								},
+							}),
+						);
+					}
+					return res(ctx.delay(10000));
+				}),
+			);
+
+			render(
+				<CheckboxFilterV2
+					filter={DEFAULT_FILTER}
+					source={QuickFiltersSource.TRACES_EXPLORER}
+					useFieldApis={DEFAULT_USE_FIELD_APIS}
+				/>,
+			);
+
+			await screen.findByTestId('checkbox-value-row-production');
+
+			const searchInput = screen.getByTestId('checkbox-filter-search');
+			await user.type(searchInput, 'prod');
+
+			await waitFor(() => {
+				expect(
+					screen.getByTestId('checkbox-filter-search-loading'),
+				).toBeInTheDocument();
+			});
+		});
+	});
+
+	describe('empty states', () => {
+		it('shows "No values found" when API returns empty arrays', async () => {
+			mockFieldsValuesAPI({
+				relatedValues: [],
+				stringValues: [],
+				numberValues: [],
+			});
+
+			render(
+				<CheckboxFilterV2
+					filter={DEFAULT_FILTER}
+					source={QuickFiltersSource.TRACES_EXPLORER}
+					useFieldApis={DEFAULT_USE_FIELD_APIS}
+				/>,
+			);
+
+			const emptySection = await screen.findByTestId('checkbox-filter-empty');
+			expect(emptySection).toBeInTheDocument();
+		});
+	});
+
+	describe('value rendering', () => {
+		it('renders values from API response', async () => {
+			mockFieldsValuesAPI({
+				stringValues: ['production', 'staging', 'development'],
+			});
+
+			render(
+				<CheckboxFilterV2
+					filter={DEFAULT_FILTER}
+					source={QuickFiltersSource.TRACES_EXPLORER}
+					useFieldApis={DEFAULT_USE_FIELD_APIS}
+				/>,
+			);
+
+			await screen.findByTestId('checkbox-value-row-production');
+			expect(screen.getByTestId('checkbox-value-row-staging')).toBeInTheDocument();
+			expect(
+				screen.getByTestId('checkbox-value-row-development'),
+			).toBeInTheDocument();
+		});
+
+		it('renders number values converted to strings', async () => {
+			mockFieldsValuesAPI({
+				numberValues: [200, 404, 500],
+			});
+
+			render(
+				<CheckboxFilterV2
+					filter={DEFAULT_FILTER}
+					source={QuickFiltersSource.TRACES_EXPLORER}
+					useFieldApis={DEFAULT_USE_FIELD_APIS}
+				/>,
+			);
+
+			const row200 = await screen.findByTestId('checkbox-value-row-200');
+			expect(within(row200).getByText('200')).toBeInTheDocument();
+			expect(
+				within(screen.getByTestId('checkbox-value-row-404')).getByText('404'),
+			).toBeInTheDocument();
+			expect(
+				within(screen.getByTestId('checkbox-value-row-500')).getByText('500'),
+			).toBeInTheDocument();
+		});
+
+		it('filters null/undefined values from response', async () => {
+			mockFieldsValuesAPI({
+				stringValues: ['valid', null, '', undefined as unknown as string],
+			});
+
+			render(
+				<CheckboxFilterV2
+					filter={DEFAULT_FILTER}
+					source={QuickFiltersSource.TRACES_EXPLORER}
+					useFieldApis={DEFAULT_USE_FIELD_APIS}
+				/>,
+			);
+
+			const validRow = await screen.findByTestId('checkbox-value-row-valid');
+			expect(within(validRow).getByText('valid')).toBeInTheDocument();
+			expect(screen.queryAllByTestId(/^checkbox-value-row-/)).toHaveLength(1);
+		});
+	});
+});

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/v2/__tests__/CheckboxFilterV2Header.test.tsx

@@ -0,0 +1,156 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import { CheckboxFilterV2Header } from '../CheckboxFilterV2Header';
+
+describe('CheckboxFilterV2Header', () => {
+	const defaultProps = {
+		title: 'Environment',
+		isOpen: false,
+		showClearAll: true,
+		isSomeFilterPresentForCurrentAttribute: true,
+		onToggleOpen: jest.fn(),
+		onClear: jest.fn(),
+	};
+
+	beforeEach(() => {
+		jest.clearAllMocks();
+	});
+
+	describe('collapsed state', () => {
+		it('renders title', () => {
+			render(<CheckboxFilterV2Header {...defaultProps} isOpen={false} />);
+
+			expect(screen.getByText('Environment')).toBeInTheDocument();
+		});
+
+		it('sets data-state="closed" when collapsed', () => {
+			render(<CheckboxFilterV2Header {...defaultProps} isOpen={false} />);
+
+			const header = screen.getByTestId('checkbox-filter-header');
+			expect(header).toHaveAttribute('data-state', 'closed');
+		});
+
+		it('does not show clear button when collapsed', () => {
+			render(
+				<CheckboxFilterV2Header {...defaultProps} isOpen={false} showClearAll />,
+			);
+
+			expect(
+				screen.queryByTestId('checkbox-filter-clear-all'),
+			).not.toBeInTheDocument();
+		});
+	});
+
+	describe('expanded state', () => {
+		it('sets data-state="open" when expanded', () => {
+			render(<CheckboxFilterV2Header {...defaultProps} isOpen />);
+
+			const header = screen.getByTestId('checkbox-filter-header');
+			expect(header).toHaveAttribute('data-state', 'open');
+		});
+
+		it('shows clear button when expanded + showClearAll=true', () => {
+			render(<CheckboxFilterV2Header {...defaultProps} isOpen showClearAll />);
+
+			expect(screen.getByTestId('checkbox-filter-clear-all')).toBeInTheDocument();
+			expect(screen.getByText('Clear')).toBeInTheDocument();
+		});
+
+		it('hides clear button when showClearAll=false', () => {
+			render(
+				<CheckboxFilterV2Header {...defaultProps} isOpen showClearAll={false} />,
+			);
+
+			expect(
+				screen.queryByTestId('checkbox-filter-clear-all'),
+			).not.toBeInTheDocument();
+		});
+
+		it('hides clear button when no filter present for attribute', () => {
+			render(
+				<CheckboxFilterV2Header
+					{...defaultProps}
+					isOpen
+					showClearAll
+					isSomeFilterPresentForCurrentAttribute={false}
+				/>,
+			);
+
+			expect(
+				screen.queryByTestId('checkbox-filter-clear-all'),
+			).not.toBeInTheDocument();
+		});
+	});
+
+	describe('interactions', () => {
+		it('calls onToggleOpen on header click', async () => {
+			const user = userEvent.setup();
+			const onToggleOpen = jest.fn();
+			render(
+				<CheckboxFilterV2Header {...defaultProps} onToggleOpen={onToggleOpen} />,
+			);
+
+			await user.click(screen.getByTestId('checkbox-filter-header'));
+
+			expect(onToggleOpen).toHaveBeenCalledTimes(1);
+		});
+
+		it('calls onToggleOpen on Enter key', async () => {
+			const user = userEvent.setup();
+			const onToggleOpen = jest.fn();
+			render(
+				<CheckboxFilterV2Header {...defaultProps} onToggleOpen={onToggleOpen} />,
+			);
+
+			screen.getByTestId('checkbox-filter-header').focus();
+			await user.keyboard('{Enter}');
+
+			expect(onToggleOpen).toHaveBeenCalledTimes(1);
+		});
+
+		it('calls onToggleOpen on Space key', async () => {
+			const user = userEvent.setup();
+			const onToggleOpen = jest.fn();
+			render(
+				<CheckboxFilterV2Header {...defaultProps} onToggleOpen={onToggleOpen} />,
+			);
+
+			screen.getByTestId('checkbox-filter-header').focus();
+			await user.keyboard(' ');
+
+			expect(onToggleOpen).toHaveBeenCalledTimes(1);
+		});
+
+		it('calls onClear on clear button click', async () => {
+			const user = userEvent.setup();
+			const onClear = jest.fn();
+			render(
+				<CheckboxFilterV2Header {...defaultProps} isOpen onClear={onClear} />,
+			);
+
+			await user.click(screen.getByTestId('checkbox-filter-clear-all'));
+
+			expect(onClear).toHaveBeenCalledTimes(1);
+		});
+
+		it('clear button click does not trigger onToggleOpen', async () => {
+			const user = userEvent.setup();
+			const onToggleOpen = jest.fn();
+			const onClear = jest.fn();
+			render(
+				<CheckboxFilterV2Header
+					{...defaultProps}
+					isOpen
+					onToggleOpen={onToggleOpen}
+					onClear={onClear}
+				/>,
+			);
+
+			await user.click(screen.getByTestId('checkbox-filter-clear-all'));
+
+			expect(onClear).toHaveBeenCalledTimes(1);
+			expect(onToggleOpen).not.toHaveBeenCalled();
+		});
+	});
+});

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/v2/__tests__/CheckboxFilterV2ValueRow.test.tsx

@@ -0,0 +1,297 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import { BadgeConfig } from '../itemRules';
+import { CheckedState } from '../../../../types';
+import { CheckboxFilterV2ValueRow } from '../CheckboxFilterV2ValueRow';
+
+describe('CheckboxFilterV2ValueRow', () => {
+	const defaultProps = {
+		value: 'production',
+		checkedState: 'unchecked' as CheckedState,
+		disabled: false,
+		title: 'Environment',
+		onlyButtonLabel: 'Only',
+		onCheckboxChange: jest.fn(),
+		onOnlyOrAllClick: jest.fn(),
+		badge: null as BadgeConfig | null,
+	};
+
+	beforeEach(() => {
+		jest.clearAllMocks();
+	});
+
+	describe('checked states', () => {
+		it('sets data-state="unchecked" for unchecked state', () => {
+			render(
+				<CheckboxFilterV2ValueRow {...defaultProps} checkedState="unchecked" />,
+			);
+
+			const row = screen.getByTestId('checkbox-value-row-production');
+			expect(row).toHaveAttribute('data-state', 'unchecked');
+		});
+
+		it('sets data-state="checked" for checked state', () => {
+			render(
+				<CheckboxFilterV2ValueRow {...defaultProps} checkedState="checked" />,
+			);
+
+			const row = screen.getByTestId('checkbox-value-row-production');
+			expect(row).toHaveAttribute('data-state', 'checked');
+		});
+	});
+
+	describe('badge variations', () => {
+		it('renders no badge when badge=null', () => {
+			render(<CheckboxFilterV2ValueRow {...defaultProps} badge={null} />);
+
+			expect(screen.queryByTestId(/^badge-/)).not.toBeInTheDocument();
+		});
+
+		it('renders "Not in" warning badge', () => {
+			render(
+				<CheckboxFilterV2ValueRow
+					{...defaultProps}
+					badge={{ key: 'not_in', label: 'Not in', color: 'warning' }}
+				/>,
+			);
+
+			expect(screen.getByTestId('badge-not_in')).toBeInTheDocument();
+			expect(screen.getByText('Not in')).toBeInTheDocument();
+		});
+
+		it('renders "Related" robin badge', () => {
+			render(
+				<CheckboxFilterV2ValueRow
+					{...defaultProps}
+					badge={{ key: 'related', label: 'Related', color: 'robin' }}
+				/>,
+			);
+
+			expect(screen.getByTestId('badge-related')).toBeInTheDocument();
+			expect(screen.getByText('Related')).toBeInTheDocument();
+		});
+
+		it('renders "Other" secondary badge', () => {
+			render(
+				<CheckboxFilterV2ValueRow
+					{...defaultProps}
+					badge={{ key: 'other', label: 'Other', color: 'secondary' }}
+				/>,
+			);
+
+			expect(screen.getByTestId('badge-other')).toBeInTheDocument();
+			expect(screen.getByText('Other')).toBeInTheDocument();
+		});
+	});
+
+	describe('only/all button label', () => {
+		it('shows "Only" label by default', () => {
+			render(
+				<CheckboxFilterV2ValueRow {...defaultProps} onlyButtonLabel="Only" />,
+			);
+
+			expect(screen.getByText('Only')).toBeInTheDocument();
+		});
+
+		it('shows "All" label when appropriate', () => {
+			render(<CheckboxFilterV2ValueRow {...defaultProps} onlyButtonLabel="All" />);
+
+			expect(screen.getByText('All')).toBeInTheDocument();
+		});
+	});
+
+	describe('disabled state', () => {
+		it('sets data-disabled=true when disabled', () => {
+			render(<CheckboxFilterV2ValueRow {...defaultProps} disabled />);
+
+			const row = screen.getByTestId('checkbox-value-row-production');
+			expect(row).toHaveAttribute('data-disabled', 'true');
+		});
+
+		it('does not call onOnlyOrAllClick when disabled + clicked', async () => {
+			const user = userEvent.setup();
+			const onOnlyOrAllClick = jest.fn();
+			render(
+				<CheckboxFilterV2ValueRow
+					{...defaultProps}
+					disabled
+					onOnlyOrAllClick={onOnlyOrAllClick}
+				/>,
+			);
+
+			await user.click(screen.getByText('production'));
+
+			expect(onOnlyOrAllClick).not.toHaveBeenCalled();
+		});
+
+		it('does not call onOnlyOrAllClick on keydown when disabled', async () => {
+			const user = userEvent.setup();
+			const onOnlyOrAllClick = jest.fn();
+			render(
+				<CheckboxFilterV2ValueRow
+					{...defaultProps}
+					disabled
+					onOnlyOrAllClick={onOnlyOrAllClick}
+				/>,
+			);
+
+			screen.getByText('production').focus();
+			await user.keyboard('{Enter}');
+
+			expect(onOnlyOrAllClick).not.toHaveBeenCalled();
+		});
+	});
+
+	describe('special value indicators', () => {
+		it('renders row for "true" value', () => {
+			render(<CheckboxFilterV2ValueRow {...defaultProps} value="true" />);
+
+			expect(screen.getByTestId('checkbox-value-row-true')).toBeInTheDocument();
+			expect(screen.getByText('true')).toBeInTheDocument();
+		});
+
+		it('renders row for "false" value', () => {
+			render(<CheckboxFilterV2ValueRow {...defaultProps} value="false" />);
+
+			expect(screen.getByTestId('checkbox-value-row-false')).toBeInTheDocument();
+			expect(screen.getByText('false')).toBeInTheDocument();
+		});
+
+		it('renders row for regular values', () => {
+			render(<CheckboxFilterV2ValueRow {...defaultProps} value="production" />);
+
+			expect(
+				screen.getByTestId('checkbox-value-row-production'),
+			).toBeInTheDocument();
+			expect(screen.getByText('production')).toBeInTheDocument();
+		});
+	});
+
+	describe('interactions', () => {
+		it('renders checkbox with correct testId', () => {
+			render(
+				<CheckboxFilterV2ValueRow {...defaultProps} checkedState="unchecked" />,
+			);
+
+			expect(
+				screen.getByTestId('checkbox-Environment-production'),
+			).toBeInTheDocument();
+		});
+
+		it('calls onOnlyOrAllClick on value text click', async () => {
+			const user = userEvent.setup();
+			const onOnlyOrAllClick = jest.fn();
+			render(
+				<CheckboxFilterV2ValueRow
+					{...defaultProps}
+					onOnlyOrAllClick={onOnlyOrAllClick}
+				/>,
+			);
+
+			await user.click(screen.getByText('production'));
+
+			expect(onOnlyOrAllClick).toHaveBeenCalledTimes(1);
+		});
+
+		it('calls onOnlyOrAllClick on Enter key', async () => {
+			const user = userEvent.setup();
+			const onOnlyOrAllClick = jest.fn();
+			render(
+				<CheckboxFilterV2ValueRow
+					{...defaultProps}
+					onOnlyOrAllClick={onOnlyOrAllClick}
+				/>,
+			);
+
+			const valueButton = screen
+				.getByText('production')
+				.closest('[role="button"]');
+			await user.tab();
+			await user.tab();
+			if (valueButton && document.activeElement === valueButton) {
+				await user.keyboard('{Enter}');
+			}
+
+			expect(onOnlyOrAllClick).toHaveBeenCalled();
+		});
+
+		it('calls onOnlyOrAllClick on Space key', async () => {
+			const user = userEvent.setup();
+			const onOnlyOrAllClick = jest.fn();
+			render(
+				<CheckboxFilterV2ValueRow
+					{...defaultProps}
+					onOnlyOrAllClick={onOnlyOrAllClick}
+				/>,
+			);
+
+			const valueButton = screen
+				.getByText('production')
+				.closest('[role="button"]');
+			await user.tab();
+			await user.tab();
+			if (valueButton && document.activeElement === valueButton) {
+				await user.keyboard(' ');
+			}
+
+			expect(onOnlyOrAllClick).toHaveBeenCalled();
+		});
+
+		it('shows Toggle button', () => {
+			render(<CheckboxFilterV2ValueRow {...defaultProps} />);
+
+			expect(screen.getByText('Toggle')).toBeInTheDocument();
+		});
+	});
+
+	describe('custom renderer', () => {
+		it('uses customRendererForValue when provided', () => {
+			const customRenderer = (value: string): JSX.Element => (
+				<span data-testid="custom-render">{`Custom: ${value}`}</span>
+			);
+
+			render(
+				<CheckboxFilterV2ValueRow
+					{...defaultProps}
+					customRendererForValue={customRenderer}
+				/>,
+			);
+
+			expect(screen.getByTestId('custom-render')).toBeInTheDocument();
+			expect(screen.getByText('Custom: production')).toBeInTheDocument();
+		});
+
+		it('shows default value text when no custom renderer', () => {
+			render(<CheckboxFilterV2ValueRow {...defaultProps} />);
+
+			expect(screen.getByText('production')).toBeInTheDocument();
+		});
+	});
+
+	describe('state combinations', () => {
+		it('checked + not_in badge', () => {
+			render(
+				<CheckboxFilterV2ValueRow
+					{...defaultProps}
+					checkedState="unchecked"
+					badge={{ key: 'not_in', label: 'Not in', color: 'warning' }}
+				/>,
+			);
+
+			expect(screen.getByTestId('badge-not_in')).toBeInTheDocument();
+		});
+
+		it('disabled + badge still shows badge', () => {
+			render(
+				<CheckboxFilterV2ValueRow
+					{...defaultProps}
+					disabled
+					badge={{ key: 'other', label: 'Other', color: 'secondary' }}
+				/>,
+			);
+
+			expect(screen.getByTestId('badge-other')).toBeInTheDocument();
+		});
+	});
+});

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/v2/__tests__/itemRules.test.ts

@@ -0,0 +1,131 @@
+import { deriveItemConfig, ItemContext, SectionType } from '../itemRules';
+
+describe('itemRules', () => {
+	describe('deriveItemConfig', () => {
+		it('no query at all → section selected, no badge', () => {
+			const ctx: ItemContext = {
+				isSelectedOnFilter: false,
+				isInRelatedValues: true,
+				isNotInOperator: false,
+				hasExistingQuery: false,
+				hasFilterForThisKey: false,
+			};
+
+			const result = deriveItemConfig(ctx);
+
+			expect(result.section).toBe(SectionType.SELECTED);
+			expect(result.badge).toBeNull();
+		});
+
+		it('selected + IN operator → section selected, no badge', () => {
+			const ctx: ItemContext = {
+				isSelectedOnFilter: true,
+				isInRelatedValues: true,
+				isNotInOperator: false,
+				hasExistingQuery: true,
+				hasFilterForThisKey: true,
+			};
+
+			const result = deriveItemConfig(ctx);
+
+			expect(result.section).toBe(SectionType.SELECTED);
+			expect(result.badge).toBeNull();
+		});
+
+		it('selected + NOT IN operator → section selected, no badge, unchecked', () => {
+			const ctx: ItemContext = {
+				isSelectedOnFilter: true,
+				isInRelatedValues: false,
+				isNotInOperator: true,
+				hasExistingQuery: true,
+				hasFilterForThisKey: true,
+			};
+
+			const result = deriveItemConfig(ctx);
+
+			expect(result.section).toBe(SectionType.SELECTED);
+			expect(result.badge).toBeNull();
+			expect(result.checkedState).toBe('unchecked');
+		});
+
+		it('has query, not selected, in related → section related, checked', () => {
+			const ctx: ItemContext = {
+				isSelectedOnFilter: false,
+				isInRelatedValues: true,
+				isNotInOperator: false,
+				hasExistingQuery: true,
+				hasFilterForThisKey: false,
+			};
+
+			const result = deriveItemConfig(ctx);
+
+			expect(result.section).toBe(SectionType.RELATED);
+			expect(result.badge).toBeNull();
+			expect(result.checkedState).toBe('checked');
+		});
+
+		it('has query, has filter for this key, in related → section related, checked', () => {
+			const ctx: ItemContext = {
+				isSelectedOnFilter: false,
+				isInRelatedValues: true,
+				isNotInOperator: false,
+				hasExistingQuery: true,
+				hasFilterForThisKey: true,
+			};
+
+			const result = deriveItemConfig(ctx);
+
+			expect(result.section).toBe(SectionType.RELATED);
+			expect(result.badge).toBeNull();
+			expect(result.checkedState).toBe('checked');
+		});
+
+		it('has query, not in related → section all_values, unchecked', () => {
+			const ctx: ItemContext = {
+				isSelectedOnFilter: false,
+				isInRelatedValues: false,
+				isNotInOperator: false,
+				hasExistingQuery: true,
+				hasFilterForThisKey: false,
+			};
+
+			const result = deriveItemConfig(ctx);
+
+			expect(result.section).toBe(SectionType.ALL_VALUES);
+			expect(result.badge).toBeNull();
+			expect(result.checkedState).toBe('unchecked');
+		});
+
+		it('has query + filter for key, not selected, not in related → section all_values, unchecked', () => {
+			const ctx: ItemContext = {
+				isSelectedOnFilter: false,
+				isInRelatedValues: false,
+				isNotInOperator: false,
+				hasExistingQuery: true,
+				hasFilterForThisKey: true,
+			};
+
+			const result = deriveItemConfig(ctx);
+
+			expect(result.section).toBe(SectionType.ALL_VALUES);
+			expect(result.badge).toBeNull();
+			expect(result.checkedState).toBe('unchecked');
+		});
+
+		it('no query but has filter for key, not selected → fallback to checked (DEFAULT_CONFIG)', () => {
+			const ctx: ItemContext = {
+				isSelectedOnFilter: false,
+				isInRelatedValues: false,
+				isNotInOperator: false,
+				hasExistingQuery: false,
+				hasFilterForThisKey: true,
+			};
+
+			const result = deriveItemConfig(ctx);
+
+			expect(result.section).toBe(SectionType.SELECTED);
+			expect(result.badge).toBeNull();
+			expect(result.checkedState).toBe('checked');
+		});
+	});
+});

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/v2/__tests__/useSectionedValues.test.ts

@@ -0,0 +1,382 @@
+import { renderHook } from '@testing-library/react';
+
+import { SectionType } from '../itemRules';
+import { useSectionedValues, SectionedItem } from '../useSectionedValues';
+
+function flattenSections(
+	sections: { type: SectionType; items: SectionedItem[] }[],
+): SectionedItem[] {
+	return sections.flatMap((s) => s.items);
+}
+
+describe('useSectionedValues', () => {
+	const baseInput = {
+		relatedValues: ['val1', 'val2'],
+		allValues: ['val1', 'val2', 'val3'],
+		currentFilterState: {},
+		isSomeFilterPresentForCurrentAttribute: false,
+		isNotInOperator: false,
+		hasExistingQuery: false,
+		visibleItemsCount: 10,
+		relatedExclusions: [] as string[],
+	};
+
+	it('no query at all → all items in selected section, no badges', () => {
+		const { result } = renderHook(() =>
+			useSectionedValues({
+				...baseInput,
+				hasExistingQuery: false,
+				isSomeFilterPresentForCurrentAttribute: false,
+			}),
+		);
+
+		expect(result.current.sections).toHaveLength(1);
+		expect(result.current.sections[0].type).toBe(SectionType.SELECTED);
+		expect(result.current.sections[0].items).toHaveLength(3);
+		result.current.sections[0].items.forEach((item) => {
+			expect(item.badge).toBeNull();
+		});
+	});
+
+	it('has query, no filter for key → related and all_values sections', () => {
+		const { result } = renderHook(() =>
+			useSectionedValues({
+				...baseInput,
+				hasExistingQuery: true,
+				isSomeFilterPresentForCurrentAttribute: false,
+			}),
+		);
+
+		const allItems = flattenSections(result.current.sections);
+		const relatedItems = allItems.filter(
+			(item) => item.value === 'val1' || item.value === 'val2',
+		);
+		const otherItems = allItems.filter((item) => item.value === 'val3');
+
+		// Related values should be in related section, checked
+		relatedItems.forEach((item) => {
+			expect(item.section).toBe(SectionType.RELATED);
+			expect(item.checkedState).toBe('checked');
+		});
+
+		// Other values should be in all_values section, unchecked
+		otherItems.forEach((item) => {
+			expect(item.section).toBe(SectionType.ALL_VALUES);
+			expect(item.checkedState).toBe('unchecked');
+		});
+	});
+
+	it('has query + filter for key, selected value → in selected section', () => {
+		const { result } = renderHook(() =>
+			useSectionedValues({
+				...baseInput,
+				hasExistingQuery: true,
+				isSomeFilterPresentForCurrentAttribute: true,
+				currentFilterState: { val1: true, val2: false, val3: false },
+			}),
+		);
+
+		const allItems = flattenSections(result.current.sections);
+		const selectedItem = allItems.find((item) => item.value === 'val1');
+
+		expect(selectedItem?.section).toBe(SectionType.SELECTED);
+		expect(selectedItem?.badge).toBeNull();
+	});
+
+	it('has query + filter for key, NOT IN operator → excluded values in selected section, no badge', () => {
+		const { result } = renderHook(() =>
+			useSectionedValues({
+				...baseInput,
+				hasExistingQuery: true,
+				isSomeFilterPresentForCurrentAttribute: true,
+				isNotInOperator: true,
+				currentFilterState: { val1: false, val2: true, val3: true },
+			}),
+		);
+
+		const allItems = flattenSections(result.current.sections);
+		// val1 is unchecked + NOT IN = excluded
+		const excludedItem = allItems.find((item) => item.value === 'val1');
+
+		expect(excludedItem?.section).toBe(SectionType.SELECTED);
+		expect(excludedItem?.badge).toBeNull();
+		expect(excludedItem?.checkedState).toBe('unchecked');
+	});
+
+	it('items within same section sorted alphabetically', () => {
+		const { result } = renderHook(() =>
+			useSectionedValues({
+				...baseInput,
+				relatedValues: ['zebra', 'apple', 'mango'],
+				allValues: ['zebra', 'apple', 'mango'],
+				hasExistingQuery: false,
+				isSomeFilterPresentForCurrentAttribute: false,
+			}),
+		);
+
+		// All items have section selected, should be sorted alphabetically
+		const allItems = flattenSections(result.current.sections);
+		const values = allItems.map((item) => item.value);
+		expect(values).toStrictEqual(['apple', 'mango', 'zebra']);
+	});
+
+	describe('filtered results from API', () => {
+		it('keeps items in their natural sections with filtered API results', () => {
+			const { result } = renderHook(() =>
+				useSectionedValues({
+					...baseInput,
+					hasExistingQuery: true,
+					isSomeFilterPresentForCurrentAttribute: true,
+					currentFilterState: { val1: true },
+				}),
+			);
+
+			const sectionTypes = result.current.sections.map((s) => s.type);
+			expect(sectionTypes).toContain(SectionType.SELECTED);
+			expect(sectionTypes).toContain(SectionType.RELATED);
+		});
+
+		it('returns empty sections array when no values', () => {
+			const { result } = renderHook(() =>
+				useSectionedValues({
+					...baseInput,
+					relatedValues: [],
+					allValues: [],
+					hasExistingQuery: true,
+					isSomeFilterPresentForCurrentAttribute: false,
+					currentFilterState: {},
+				}),
+			);
+
+			expect(result.current.sections).toHaveLength(0);
+			expect(result.current.totalCount).toBe(0);
+		});
+
+		it('non-related items go to ALL_VALUES section', () => {
+			const { result } = renderHook(() =>
+				useSectionedValues({
+					...baseInput,
+					relatedValues: [],
+					allValues: ['other1', 'other2', 'other3'],
+					hasExistingQuery: true,
+					isSomeFilterPresentForCurrentAttribute: false,
+				}),
+			);
+
+			const allValuesSection = result.current.sections.find(
+				(s) => s.type === SectionType.ALL_VALUES,
+			);
+			expect(allValuesSection?.items).toHaveLength(3);
+		});
+
+		it('handles non-overlapping relatedValues and allValues correctly', () => {
+			// This tests the bug where different pod names in relatedValues vs allValues
+			// caused all items to go to ALL_VALUES instead of RELATED
+			const { result } = renderHook(() =>
+				useSectionedValues({
+					...baseInput,
+					relatedValues: ['pod-a-1', 'pod-b-1', 'pod-c-1'],
+					allValues: ['pod-a-2', 'pod-b-2', 'pod-c-2'],
+					hasExistingQuery: true,
+					isSomeFilterPresentForCurrentAttribute: false,
+				}),
+			);
+
+			const sectionTypes = result.current.sections.map((s) => s.type);
+
+			// RELATED section should exist with relatedValues items
+			expect(sectionTypes).toContain(SectionType.RELATED);
+			const relatedSection = result.current.sections.find(
+				(s) => s.type === SectionType.RELATED,
+			);
+			expect(relatedSection?.items).toHaveLength(3);
+			expect(relatedSection?.items.map((i) => i.value)).toStrictEqual(
+				expect.arrayContaining(['pod-a-1', 'pod-b-1', 'pod-c-1']),
+			);
+
+			// ALL_VALUES section should exist with allValues items
+			expect(sectionTypes).toContain(SectionType.ALL_VALUES);
+			const allValuesSection = result.current.sections.find(
+				(s) => s.type === SectionType.ALL_VALUES,
+			);
+			expect(allValuesSection?.items).toHaveLength(3);
+			expect(allValuesSection?.items.map((i) => i.value)).toStrictEqual(
+				expect.arrayContaining(['pod-a-2', 'pod-b-2', 'pod-c-2']),
+			);
+		});
+	});
+
+	describe('stale related values during refresh (relatedExclusions)', () => {
+		// Scenario: key A selected (existing query) + key B had value "oldSelected".
+		// User selects a different value on key B -> "oldSelected" is de-selected.
+		// keepPreviousData keeps the stale response where "oldSelected" is still in
+		// relatedValues, so it would wrongly render as "related". It is excluded.
+		it('subtracts only the excluded value from the RELATED section', () => {
+			const { result } = renderHook(() =>
+				useSectionedValues({
+					...baseInput,
+					currentFilterState: { newValue: true },
+					isSomeFilterPresentForCurrentAttribute: true,
+					hasExistingQuery: true,
+					// stale API data kept via keepPreviousData
+					relatedValues: ['oldSelected', 'otherRelated'],
+					allValues: ['newValue'],
+					relatedExclusions: ['oldSelected'],
+				}),
+			);
+
+			const allItems = flattenSections(result.current.sections);
+
+			// oldSelected must NOT render as related (dropped entirely - not in
+			// allValues nor selected)
+			expect(
+				allItems.find((item) => item.value === 'oldSelected'),
+			).toBeUndefined();
+
+			// other related values are kept
+			expect(allItems.find((item) => item.value === 'otherRelated')?.section).toBe(
+				SectionType.RELATED,
+			);
+		});
+
+		it('preserves every related value that is not the excluded (previously selected) one', () => {
+			const { result } = renderHook(() =>
+				useSectionedValues({
+					...baseInput,
+					currentFilterState: { newValue: true },
+					isSomeFilterPresentForCurrentAttribute: true,
+					hasExistingQuery: true,
+					// oldSelected was just de-selected; the rest are genuinely related
+					relatedValues: ['oldSelected', 'relatedA', 'relatedB', 'relatedC'],
+					allValues: ['newValue'],
+					relatedExclusions: ['oldSelected'],
+				}),
+			);
+
+			const relatedSection = result.current.sections.find(
+				(s) => s.type === SectionType.RELATED,
+			);
+			const relatedValues = relatedSection?.items.map((i) => i.value) ?? [];
+
+			// all non-excluded related values are kept
+			expect(relatedValues).toStrictEqual(['relatedA', 'relatedB', 'relatedC']);
+			// and they stay checked
+			relatedSection?.items.forEach((item) => {
+				expect(item.checkedState).toBe('checked');
+			});
+			// the excluded value is gone
+			expect(relatedValues).not.toContain('oldSelected');
+		});
+
+		it('keeps the RELATED section when other related values remain', () => {
+			const { result } = renderHook(() =>
+				useSectionedValues({
+					...baseInput,
+					currentFilterState: { newValue: true },
+					isSomeFilterPresentForCurrentAttribute: true,
+					hasExistingQuery: true,
+					relatedValues: ['oldSelected', 'otherRelated'],
+					allValues: ['newValue'],
+					relatedExclusions: ['oldSelected'],
+				}),
+			);
+
+			const sectionTypes = result.current.sections.map((s) => s.type);
+			expect(sectionTypes).toContain(SectionType.RELATED);
+			expect(sectionTypes).toContain(SectionType.SELECTED);
+		});
+
+		it('shows the excluded value normally when exclusions are empty', () => {
+			const { result } = renderHook(() =>
+				useSectionedValues({
+					...baseInput,
+					currentFilterState: { newValue: true },
+					isSomeFilterPresentForCurrentAttribute: true,
+					hasExistingQuery: true,
+					relatedValues: ['oldSelected', 'otherRelated'],
+					allValues: ['newValue'],
+					relatedExclusions: [],
+				}),
+			);
+
+			const allItems = flattenSections(result.current.sections);
+			expect(allItems.find((item) => item.value === 'oldSelected')?.section).toBe(
+				SectionType.RELATED,
+			);
+		});
+	});
+
+	describe('section ordering', () => {
+		it('sections appear in order: SELECTED → RELATED → ALL_VALUES', () => {
+			const { result } = renderHook(() =>
+				useSectionedValues({
+					...baseInput,
+					relatedValues: ['related1'],
+					allValues: ['all1'],
+					hasExistingQuery: true,
+					isSomeFilterPresentForCurrentAttribute: true,
+					currentFilterState: { selected1: true },
+				}),
+			);
+
+			const sectionTypes = result.current.sections.map((s) => s.type);
+
+			// Verify order
+			const selectedIdx = sectionTypes.indexOf(SectionType.SELECTED);
+			const relatedIdx = sectionTypes.indexOf(SectionType.RELATED);
+			const allValuesIdx = sectionTypes.indexOf(SectionType.ALL_VALUES);
+
+			expect(selectedIdx).toBeLessThan(relatedIdx);
+			expect(relatedIdx).toBeLessThan(allValuesIdx);
+		});
+
+		it('RELATED section appears before ALL_VALUES even with many items', () => {
+			const { result } = renderHook(() =>
+				useSectionedValues({
+					...baseInput,
+					relatedValues: ['r1', 'r2', 'r3', 'r4', 'r5'],
+					allValues: ['a1', 'a2', 'a3', 'a4', 'a5'],
+					hasExistingQuery: true,
+					isSomeFilterPresentForCurrentAttribute: false,
+					visibleItemsCount: 100,
+				}),
+			);
+
+			const sectionTypes = result.current.sections.map((s) => s.type);
+
+			expect(sectionTypes[0]).toBe(SectionType.RELATED);
+			expect(sectionTypes[1]).toBe(SectionType.ALL_VALUES);
+		});
+
+		it('visibleItemsCount limits total items across sections', () => {
+			const { result } = renderHook(() =>
+				useSectionedValues({
+					...baseInput,
+					relatedValues: ['r1', 'r2', 'r3'],
+					allValues: ['a1', 'a2', 'a3'],
+					hasExistingQuery: true,
+					isSomeFilterPresentForCurrentAttribute: false,
+					visibleItemsCount: 4,
+				}),
+			);
+
+			const totalItems = result.current.sections.reduce(
+				(sum, s) => sum + s.items.length,
+				0,
+			);
+			expect(totalItems).toBe(4);
+
+			// RELATED section should get priority (3 items)
+			const relatedSection = result.current.sections.find(
+				(s) => s.type === SectionType.RELATED,
+			);
+			expect(relatedSection?.items).toHaveLength(3);
+
+			// ALL_VALUES gets remaining (1 item)
+			const allValuesSection = result.current.sections.find(
+				(s) => s.type === SectionType.ALL_VALUES,
+			);
+			expect(allValuesSection?.items).toHaveLength(1);
+		});
+	});
+});

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/v2/itemRules.ts

@@ -0,0 +1,118 @@
+import { CheckedState } from '../../../types';
+
+export enum SectionType {
+	SELECTED = 'selected',
+	RELATED = 'related',
+	ALL_VALUES = 'all_values',
+}
+
+export interface BadgeConfig {
+	key: string;
+	label: string;
+	color: 'robin' | 'warning' | 'secondary';
+}
+
+export interface ItemConfig {
+	section: SectionType;
+	badge: BadgeConfig | null;
+	checkedState: CheckedState;
+}
+
+export interface ItemContext {
+	isSelectedOnFilter: boolean;
+	isInRelatedValues: boolean;
+	isNotInOperator: boolean;
+	hasExistingQuery: boolean;
+	hasFilterForThisKey: boolean;
+}
+
+export interface DerivedItem extends ItemConfig {
+	value: string;
+}
+
+interface ItemRule {
+	condition: (ctx: ItemContext) => boolean;
+	config: ItemConfig;
+}
+
+const ITEM_RULES: ItemRule[] = [
+	// No existing query and no filter → all checked (selected section)
+	{
+		condition: (ctx): boolean =>
+			!ctx.hasExistingQuery && !ctx.hasFilterForThisKey,
+		config: {
+			section: SectionType.SELECTED,
+			badge: null,
+			checkedState: 'checked',
+		},
+	},
+	// Selected with NOT IN operator → unchecked, no badge
+	{
+		condition: (ctx): boolean => ctx.isSelectedOnFilter && ctx.isNotInOperator,
+		config: {
+			section: SectionType.SELECTED,
+			badge: null,
+			checkedState: 'unchecked',
+		},
+	},
+	// Selected with IN operator → checked
+	{
+		condition: (ctx): boolean => ctx.isSelectedOnFilter && !ctx.isNotInOperator,
+		config: {
+			section: SectionType.SELECTED,
+			badge: null,
+			checkedState: 'checked',
+		},
+	},
+	// Related values (from existing query) → checked
+	{
+		condition: (ctx): boolean => ctx.hasExistingQuery && ctx.isInRelatedValues,
+		config: {
+			section: SectionType.RELATED,
+			badge: null,
+			checkedState: 'checked',
+		},
+	},
+	// All values (has existing query but not related) → unchecked
+	{
+		condition: (ctx): boolean => ctx.hasExistingQuery,
+		config: {
+			section: SectionType.ALL_VALUES,
+			badge: null,
+			checkedState: 'unchecked',
+		},
+	},
+];
+
+// Fallback when no rule matches
+const DEFAULT_CONFIG: ItemConfig = {
+	section: SectionType.SELECTED,
+	badge: null,
+	checkedState: 'checked',
+};
+
+export function deriveItemConfig(ctx: ItemContext): ItemConfig {
+	for (const rule of ITEM_RULES) {
+		if (rule.condition(ctx)) {
+			return rule.config;
+		}
+	}
+	return DEFAULT_CONFIG;
+}
+
+export function deriveItems(
+	values: string[],
+	relatedSet: Set<string>,
+	selectedOnFilterSet: Set<string>,
+	ctx: Omit<ItemContext, 'isSelectedOnFilter' | 'isInRelatedValues'>,
+): DerivedItem[] {
+	return values.map((value) => {
+		const itemCtx: ItemContext = {
+			...ctx,
+			isSelectedOnFilter: selectedOnFilterSet.has(value),
+			isInRelatedValues: relatedSet.has(value),
+		};
+		const config = deriveItemConfig(itemCtx);
+		return { value, ...config };
+	});
+}

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

@@ -0,0 +1,61 @@
+import { useMemo } from 'react';
+import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
+import { convertFiltersToExpression } from 'components/QueryBuilderV2/utils';
+import { QuickFilterCheckboxUseFieldApis } from 'components/QuickFilters/types';
+
+interface UseExistingQueryParams {
+	useFieldApis: QuickFilterCheckboxUseFieldApis;
+	activeQueryIndex: number;
+}
+
+interface UseExistingQueryResult {
+	existingQuery: string | undefined;
+	hasExistingQuery: boolean;
+}
+
+export function useExistingQuery({
+	useFieldApis,
+	activeQueryIndex,
+}: UseExistingQueryParams): UseExistingQueryResult {
+	const { currentQuery } = useQueryBuilder();
+
+	const existingQuery = useMemo(() => {
+		if (useFieldApis.existingQuery === null) {
+			return undefined;
+		}
+
+		if (useFieldApis.existingQuery) {
+			return useFieldApis.existingQuery;
+		}
+
+		const queryData = currentQuery.builder.queryData?.[activeQueryIndex];
+
+		// Prefer V5 filter.expression
+		if (queryData?.filter?.expression) {
+			return queryData.filter.expression;
+		}
+
+		// Fall back to V3 filters.items
+		if (queryData?.filters?.items?.length) {
+			return convertFiltersToExpression(queryData.filters).expression;
+		}
+
+		return undefined;
+	}, [
+		useFieldApis.existingQuery,
+		currentQuery.builder.queryData,
+		activeQueryIndex,
+	]);
+
+	// Check if ANY filters exist in query (V3 items or V5 expression)
+	// This is separate from existingQuery because existingQuery can be explicitly
+	// disabled (null) while filters still exist in the query for UI purposes
+	const hasExistingQuery = useMemo(() => {
+		const queryData = currentQuery.builder.queryData?.[activeQueryIndex];
+		const hasV3Items = (queryData?.filters?.items?.length ?? 0) > 0;
+		const hasV5Expression = !!queryData?.filter?.expression;
+		return hasV3Items || hasV5Expression || !!existingQuery;
+	}, [currentQuery.builder.queryData, activeQueryIndex, existingQuery]);
+
+	return { existingQuery, hasExistingQuery };
+}

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

@@ -0,0 +1,97 @@
+import { useMemo } from 'react';
+import { useGetFieldsValues } from 'api/generated/services/fields';
+import { TelemetrytypesSignalDTO } from 'api/generated/services/sigNoz.schemas';
+import { IQuickFiltersConfig } from 'components/QuickFilters/types';
+import { DataSource } from 'types/common/queryBuilder';
+import { FIELD_API_CACHE_TIME } from 'constants/queryCacheTime';
+
+interface UseFieldValuesProps {
+	filter: IQuickFiltersConfig;
+	searchText: string;
+	existingQuery?: string;
+	metricNamespace?: string;
+	startUnixMilli?: number;
+	endUnixMilli?: number;
+	enabled: boolean;
+}
+
+interface UseFieldValuesReturn {
+	relatedValues: string[];
+	allValues: string[];
+	isLoading: boolean;
+	isFetching: boolean;
+}
+
+const DATA_SOURCE_TO_SIGNAL: Record<DataSource, TelemetrytypesSignalDTO> = {
+	[DataSource.METRICS]: TelemetrytypesSignalDTO.metrics,
+	[DataSource.TRACES]: TelemetrytypesSignalDTO.traces,
+	[DataSource.LOGS]: TelemetrytypesSignalDTO.logs,
+};
+
+export function useFieldValues({
+	filter,
+	searchText,
+	existingQuery,
+	metricNamespace,
+	startUnixMilli,
+	endUnixMilli,
+	enabled,
+}: UseFieldValuesProps): UseFieldValuesReturn {
+	const { data, isLoading, isFetching } = useGetFieldsValues(
+		{
+			signal: filter.dataSource
+				? DATA_SOURCE_TO_SIGNAL[filter.dataSource]
+				: undefined,
+			name: filter.attributeKey.key,
+			searchText,
+			existingQuery,
+			metricNamespace,
+			startUnixMilli,
+			// This field does not affect the backend but I wanted to keep it here
+			// in case we add the support in the future
+			endUnixMilli,
+		},
+		{
+			query: {
+				enabled,
+				cacheTime: FIELD_API_CACHE_TIME,
+				keepPreviousData: true,
+			},
+		},
+	);
+
+	const relatedValues: string[] = useMemo(() => {
+		const values = data?.data?.values;
+		if (!values) {
+			return [];
+		}
+
+		return (
+			values.relatedValues?.filter(
+				(value): value is string =>
+					value !== null && value !== undefined && value !== '',
+			) || []
+		);
+	}, [data]);
+
+	const allValues: string[] = useMemo(() => {
+		const values = data?.data?.values;
+		if (!values) {
+			return [];
+		}
+
+		const stringValues =
+			values.stringValues?.filter(
+				(value): value is string =>
+					value !== null && value !== undefined && value !== '',
+			) || [];
+		const numberValues =
+			values.numberValues
+				?.filter((value): value is number => value !== null && value !== undefined)
+				.map((value) => value.toString()) || [];
+
+		return [...stringValues, ...numberValues];
+	}, [data]);
+
+	return { relatedValues, allValues, isLoading, isFetching };
+}

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/v2/useSectionedValues.ts

@@ -0,0 +1,152 @@
+import { useMemo } from 'react';
+
+import { BadgeConfig, deriveItems, SectionType } from './itemRules';
+import { CheckedState } from '../../../types';
+
+interface SectionedValuesInput {
+	relatedValues: string[];
+	allValues: string[];
+	currentFilterState: Record<string, boolean>;
+	isSomeFilterPresentForCurrentAttribute: boolean;
+	isNotInOperator: boolean;
+	hasExistingQuery: boolean;
+	visibleItemsCount: number;
+	relatedExclusions: string[];
+}
+
+export interface SectionedItem {
+	value: string;
+	section: SectionType;
+	badge: BadgeConfig | null;
+	checkedState: CheckedState;
+}
+
+export interface Section {
+	type: SectionType;
+	items: SectionedItem[];
+}
+
+interface SectionedValuesOutput {
+	sections: Section[];
+	totalCount: number;
+}
+
+const SECTION_ORDER: SectionType[] = [
+	SectionType.SELECTED,
+	SectionType.RELATED,
+	SectionType.ALL_VALUES,
+];
+
+export function buildSelectedSet(
+	currentFilterState: Record<string, boolean>,
+	isSomeFilterPresentForCurrentAttribute: boolean,
+	isNotInOperator: boolean,
+): Set<string> {
+	const selectedSet = new Set<string>();
+	if (!isSomeFilterPresentForCurrentAttribute) {
+		return selectedSet;
+	}
+
+	for (const [val, isChecked] of Object.entries(currentFilterState)) {
+		// NOT IN: unchecked = explicitly excluded
+		// IN: checked = explicitly selected
+		const shouldAdd = isNotInOperator ? !isChecked : isChecked;
+		if (shouldAdd) {
+			selectedSet.add(val);
+		}
+	}
+	return selectedSet;
+}
+
+export function useSectionedValues({
+	relatedValues,
+	allValues,
+	currentFilterState,
+	isSomeFilterPresentForCurrentAttribute,
+	isNotInOperator,
+	hasExistingQuery,
+	visibleItemsCount,
+	relatedExclusions,
+}: SectionedValuesInput): SectionedValuesOutput {
+	const items = useMemo(() => {
+		const selectedSet = buildSelectedSet(
+			currentFilterState,
+			isSomeFilterPresentForCurrentAttribute,
+			isNotInOperator,
+		);
+
+		const exclusionSet = new Set(relatedExclusions);
+		const effectiveRelatedValues = relatedValues.filter(
+			(value) => !exclusionSet.has(value),
+		);
+
+		// Combine all values - API already filters both arrays by searchText
+		const allUniqueValues = Array.from(
+			new Set([...effectiveRelatedValues, ...allValues]),
+		);
+
+		// Include selected values at top - may not be in API response
+		const finalValues = [
+			...new Set([...Array.from(selectedSet), ...allUniqueValues]),
+		];
+		const relatedSet = new Set(effectiveRelatedValues);
+
+		return deriveItems(finalValues, relatedSet, selectedSet, {
+			isNotInOperator,
+			hasExistingQuery,
+			hasFilterForThisKey: isSomeFilterPresentForCurrentAttribute,
+		});
+	}, [
+		relatedValues,
+		allValues,
+		currentFilterState,
+		isSomeFilterPresentForCurrentAttribute,
+		isNotInOperator,
+		hasExistingQuery,
+		relatedExclusions,
+	]);
+
+	const sections = useMemo(() => {
+		// Group items by section
+		const sectionMap = new Map<SectionType, SectionedItem[]>();
+		for (const sectionType of SECTION_ORDER) {
+			sectionMap.set(sectionType, []);
+		}
+
+		for (const item of items) {
+			sectionMap.get(item.section)?.push(item);
+		}
+
+		// Sort items within each section alphabetically
+		for (const sectionItems of sectionMap.values()) {
+			sectionItems.sort((a, b) => a.value.localeCompare(b.value));
+		}
+
+		// Apply visibleItemsCount across all sections
+		let remaining = visibleItemsCount;
+		const result: Section[] = [];
+
+		for (const sectionType of SECTION_ORDER) {
+			const sectionItems = sectionMap.get(sectionType) || [];
+
+			if (sectionItems.length === 0) {
+				continue;
+			}
+
+			const itemsToTake = Math.min(sectionItems.length, remaining);
+			if (itemsToTake === 0) {
+				break;
+			}
+
+			result.push({
+				type: sectionType,
+				items: sectionItems.slice(0, itemsToTake),
+			});
+			remaining -= itemsToTake;
+		}
+
+		return result;
+	}, [items, visibleItemsCount]);
+
+	return { sections, totalCount: items.length };
+}

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/v2/useStaleRelatedExclusions.ts

@@ -0,0 +1,36 @@
+import { useEffect, useMemo, useRef } from 'react';
+
+const EMPTY: string[] = [];
+
+interface UseStaleRelatedExclusionsParams {
+	selectedValues: string[];
+	isFetching: boolean;
+	isRefreshing: boolean;
+}
+
+export function useStaleRelatedExclusions({
+	selectedValues,
+	isFetching,
+	isRefreshing,
+}: UseStaleRelatedExclusionsParams): string[] {
+	const selectionAtLastFetchRef = useRef<string[]>(selectedValues);
+
+	useEffect(() => {
+		if (!isFetching) {
+			selectionAtLastFetchRef.current = selectedValues;
+		}
+	}, [isFetching, selectedValues]);
+
+	return useMemo(() => {
+		if (!isRefreshing) {
+			return EMPTY;
+		}
+
+		const current = new Set(selectedValues);
+		const removed = selectionAtLastFetchRef.current.filter(
+			(value) => !current.has(value),
+		);
+
+		return removed.length ? removed : EMPTY;
+	}, [isRefreshing, selectedValues]);
+}

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

@@ -1,8 +1,6 @@
 .quick-filters-container {
 	display: flex;
 	flex-direction: row;
-	height: 100%;
-	min-height: 0;
 	position: relative;
 
 	.quick-filters-settings-container {

frontend/src/components/QuickFilters/QuickFilters.tsx

@@ -32,6 +32,7 @@ import { Query } from 'types/api/queryBuilder/queryBuilderData';
 import { USER_ROLES } from 'types/roles';
 
 import Checkbox from './FilterRenderers/Checkbox/Checkbox';
+import CheckboxV2 from './FilterRenderers/Checkbox/v2/CheckboxFilterV2';
 import Duration from './FilterRenderers/Duration/Duration';
 import Slider from './FilterRenderers/Slider/Slider';
 import useFilterConfig from './hooks/useFilterConfig';
@@ -51,6 +52,7 @@ export default function QuickFilters(props: IQuickFiltersProps): JSX.Element {
 		signal,
 		showFilterCollapse = true,
 		showQueryName = true,
+		useFieldApis,
 	} = props;
 	const { user } = useAppContext();
 	const [isSettingsOpen, setIsSettingsOpen] = useState(false);
@@ -297,21 +299,45 @@ export default function QuickFilters(props: IQuickFiltersProps): JSX.Element {
 				{filterConfig.map((filter) => {
 					switch (filter.type) {
 						case FiltersType.CHECKBOX:
-							return (
+							return useFieldApis ? (
+								<CheckboxV2
+									key={filter.attributeKey.key}
+									source={source}
+									filter={filter}
+									onFilterChange={onFilterChange}
+									useFieldApis={useFieldApis}
+								/>
+							) : (
 								<Checkbox
+									key={filter.attributeKey.key}
 									source={source}
 									filter={filter}
 									onFilterChange={onFilterChange}
 								/>
 							);
 						case FiltersType.DURATION:
-							return <Duration filter={filter} onFilterChange={onFilterChange} />;
+							return (
+								<Duration
+									key={filter.attributeKey.key}
+									filter={filter}
+									onFilterChange={onFilterChange}
+								/>
+							);
 						case FiltersType.SLIDER:
-							return <Slider />;
+							return <Slider key={filter.attributeKey.key} />;
 						// eslint-disable-next-line sonarjs/no-duplicated-branches
 						default:
-							return (
+							return useFieldApis ? (
+								<CheckboxV2
+									key={filter.attributeKey.key}
+									source={source}
+									filter={filter}
+									onFilterChange={onFilterChange}
+									useFieldApis={useFieldApis}
+								/>
+							) : (
 								<Checkbox
+									key={filter.attributeKey.key}
 									source={source}
 									filter={filter}
 									onFilterChange={onFilterChange}
@@ -381,4 +407,5 @@ QuickFilters.defaultProps = {
 	config: [],
 	showFilterCollapse: true,
 	showQueryName: true,
+	useFieldApis: undefined,
 };

frontend/src/components/QuickFilters/QuickFiltersSettings/OtherFilters.tsx

@@ -20,6 +20,7 @@ function OtherFiltersSkeleton(): JSX.Element {
 				<Skeleton.Input
 					active
 					size="small"
+					className="qf-other-filters-skeleton"
 					// eslint-disable-next-line react/no-array-index-key
 					key={index}
 				/>

frontend/src/components/QuickFilters/types.ts

@@ -26,6 +26,11 @@ export enum SignalType {
 	METER_EXPLORER = 'meter',
 }
 
+/**
+ * Missing export from signozhq/ui/checkbox, TODO(H4ad): Add and remove this type definition
+ */
+export type CheckedState = 'checked' | 'unchecked' | 'indeterminate';
+
 export interface IQuickFiltersConfig {
 	type: FiltersType;
 	title: string;
@@ -46,6 +51,7 @@ export interface IQuickFiltersProps {
 	className?: string;
 	showFilterCollapse?: boolean;
 	showQueryName?: boolean;
+	useFieldApis?: QuickFilterCheckboxUseFieldApis;
 }
 
 export enum QuickFiltersSource {
@@ -56,3 +62,19 @@ export enum QuickFiltersSource {
 	EXCEPTIONS = 'exceptions',
 	METER_EXPLORER = 'meter',
 }
+
+/**
+ * Opt-in: fetch values from the /v1/fields/values API instead of /v3/autocomplete/attribute_values
+ */
+export type QuickFilterCheckboxUseFieldApis = {
+	startUnixMilli: number;
+	endUnixMilli: number;
+	/**
+	 * If you didn't specify a string, we automatically try to extract this from the currentQuery,
+	 * from the filter.expression or filter.items.
+	 *
+	 * Use null to ignore/disable this behavior.
+	 */
+	existingQuery?: string | null;
+	metricNamespace?: string;
+};

frontend/src/components/RolesSelect/RolesSelect.tsx

@@ -3,7 +3,7 @@ import { Select } from 'antd';
 import { Checkbox } from '@signozhq/ui/checkbox';
 import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
 import { useListRoles } from 'api/generated/services/role';
-import type { AuthtypesRoleDTO } from 'api/generated/services/sigNoz.schemas';
+import type { AuthtypesGettableRoleDTO } from 'api/generated/services/sigNoz.schemas';
 import cx from 'classnames';
 import APIError from 'types/api/error';
 import { popupContainer } from 'utils/selectPopupContainer';
@@ -16,7 +16,7 @@ export interface RoleOption {
 }
 
 export function useRoles(): {
-	roles: AuthtypesRoleDTO[];
+	roles: AuthtypesGettableRoleDTO[];
 	isLoading: boolean;
 	isError: boolean;
 	error: APIError | undefined;
@@ -33,7 +33,7 @@ export function useRoles(): {
 }
 
 export function getRoleOptions(
-	roles: AuthtypesRoleDTO[],
+	roles: AuthtypesGettableRoleDTO[],
 	valueField: 'id' | 'name',
 ): RoleOption[] {
 	return roles.map((role) => ({
@@ -79,7 +79,7 @@ interface BaseProps {
 	placeholder?: string;
 	className?: string;
 	getPopupContainer?: (trigger: HTMLElement) => HTMLElement;
-	roles?: AuthtypesRoleDTO[];
+	roles?: AuthtypesGettableRoleDTO[];
 	loading?: boolean;
 	isError?: boolean;
 	error?: APIError;

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

@@ -4,7 +4,7 @@ import { Button } from '@signozhq/ui/button';
 import { Input } from '@signozhq/ui/input';
 import { ToggleGroupSimple } from '@signozhq/ui/toggle-group';
 import { DatePicker } from 'antd';
-import AuthZTooltip from 'lib/authz/components/AuthZTooltip/AuthZTooltip';
+import AuthZButton from 'lib/authz/components/AuthZButton/AuthZButton';
 import {
 	APIKeyCreatePermission,
 	buildSAAttachPermission,
@@ -109,24 +109,21 @@ function KeyFormPhase({
 					<Button variant="solid" color="secondary" onClick={onClose}>
 						Cancel
 					</Button>
-					<AuthZTooltip
+					<AuthZButton
 						checks={[
 							APIKeyCreatePermission,
 							buildSAAttachPermission(accountId ?? ''),
 						]}
-						enabled={!!accountId}
+						authZEnabled={!!accountId}
+						type="submit"
+						form={FORM_ID}
+						variant="solid"
+						color="primary"
+						loading={isSubmitting}
+						disabled={!isValid}
 					>
-						<Button
-							type="submit"
-							form={FORM_ID}
-							variant="solid"
-							color="primary"
-							loading={isSubmitting}
-							disabled={!isValid}
-						>
-							Create Key
-						</Button>
-					</AuthZTooltip>
+						Create Key
+					</AuthZButton>
 				</div>
 			</div>
 		</>

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

@@ -151,6 +151,7 @@ function AddKeyModal(): JSX.Element {
 			className="add-key-modal"
 			showCloseButton
 			disableOutsideClick={isErrorModalVisible}
+			testId="add-key-modal"
 		>
 			{phase === Phase.FORM && (
 				<KeyFormPhase

frontend/src/components/ServiceAccountDrawer/DeleteAccountModal.tsx

@@ -1,7 +1,7 @@
 import { useQueryClient } from 'react-query';
 import { Trash2, X } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
-import AuthZTooltip from 'lib/authz/components/AuthZTooltip/AuthZTooltip';
+import AuthZButton from 'lib/authz/components/AuthZButton/AuthZButton';
 import { buildSADeletePermission } from 'lib/authz/hooks/useAuthZ/permissions/service-account.permissions';
 import { DialogWrapper } from '@signozhq/ui/dialog';
 import { toast } from '@signozhq/ui/sonner';
@@ -84,20 +84,18 @@ function DeleteAccountModal(): JSX.Element {
 				<X size={12} />
 				Cancel
 			</Button>
-			<AuthZTooltip
+			<AuthZButton
 				checks={[buildSADeletePermission(accountId ?? '')]}
-				enabled={!!accountId}
+				authZEnabled={!!accountId}
+				variant="solid"
+				color="destructive"
+				loading={isDeleting}
+				onClick={handleConfirm}
+				data-testid="confirm-delete-btn"
 			>
-				<Button
-					variant="solid"
-					color="destructive"
-					loading={isDeleting}
-					onClick={handleConfirm}
-				>
-					<Trash2 size={12} />
-					Delete
-				</Button>
-			</AuthZTooltip>
+				<Trash2 size={12} />
+				Delete
+			</AuthZButton>
 		</div>
 	);
 
@@ -114,6 +112,7 @@ function DeleteAccountModal(): JSX.Element {
 			className="alert-dialog sa-delete-dialog"
 			showCloseButton={false}
 			disableOutsideClick={isErrorModalVisible}
+			testId="delete-service-account-modal"
 			footer={footer}
 		>
 			{content}

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

@@ -7,6 +7,7 @@ import { Input } from '@signozhq/ui/input';
 import { ToggleGroupSimple } from '@signozhq/ui/toggle-group';
 import { DatePicker } from 'antd';
 import type { ServiceaccounttypesGettableFactorAPIKeyDTO } from 'api/generated/services/sigNoz.schemas';
+import AuthZButton from 'lib/authz/components/AuthZButton/AuthZButton';
 import AuthZTooltip from 'lib/authz/components/AuthZTooltip/AuthZTooltip';
 import {
 	buildAPIKeyDeletePermission,
@@ -158,38 +159,36 @@ function EditKeyForm({
 			</form>
 
 			<div className="edit-key-modal__footer">
-				<AuthZTooltip
+				<AuthZButton
 					checks={[
 						buildAPIKeyDeletePermission(keyItem?.id ?? ''),
 						buildSADetachPermission(accountId ?? ''),
 					]}
-					enabled={!!accountId && !!keyItem?.id}
+					authZEnabled={!!accountId && !!keyItem?.id}
+					variant="link"
+					color="destructive"
+					onClick={onRevokeClick}
 				>
-					<Button variant="link" color="destructive" onClick={onRevokeClick}>
-						<Trash2 size={12} />
-						Revoke Key
-					</Button>
-				</AuthZTooltip>
+					<Trash2 size={12} />
+					Revoke Key
+				</AuthZButton>
 				<div className="edit-key-modal__footer-right">
 					<Button variant="solid" color="secondary" onClick={onClose}>
 						<X size={12} />
 						Cancel
 					</Button>
-					<AuthZTooltip
+					<AuthZButton
 						checks={[buildAPIKeyUpdatePermission(keyItem?.id ?? '')]}
-						enabled={!!accountId && !!keyItem?.id}
+						authZEnabled={!!accountId && !!keyItem?.id}
+						type="submit"
+						form={FORM_ID}
+						variant="solid"
+						color="primary"
+						loading={isSaving}
+						disabled={!isDirty}
 					>
-						<Button
-							type="submit"
-							form={FORM_ID}
-							variant="solid"
-							color="primary"
-							loading={isSaving}
-							disabled={!isDirty}
-						>
-							Save Changes
-						</Button>
-					</AuthZTooltip>
+						Save Changes
+					</AuthZButton>
 				</div>
 			</div>
 		</>

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

@@ -175,6 +175,7 @@ function EditKeyModal({ keyItem }: EditKeyModalProps): JSX.Element {
 			}
 			showCloseButton={!isRevokeConfirmOpen}
 			disableOutsideClick={isErrorModalVisible}
+			testId="edit-key-modal"
 			footer={
 				isRevokeConfirmOpen ? (
 					<RevokeKeyFooter

frontend/src/components/ServiceAccountDrawer/KeysTab.tsx

@@ -1,12 +1,13 @@
 import React, { useCallback, useMemo } from 'react';
 import { KeyRound, X } from '@signozhq/icons';
-import { Button } from '@signozhq/ui/button';
-import { Skeleton, Table, Tooltip } from 'antd';
+import { Pagination, Skeleton, Table, Tooltip } from 'antd';
 import type { ColumnsType } from 'antd/es/table/interface';
 import type { ServiceaccounttypesGettableFactorAPIKeyDTO } from 'api/generated/services/sigNoz.schemas';
-import AuthZTooltip from 'lib/authz/components/AuthZTooltip/AuthZTooltip';
+import AuthZButton from 'lib/authz/components/AuthZButton/AuthZButton';
+import { withAuthZContent } from 'lib/authz/components/withAuthZ/withAuthZContent';
 import {
 	APIKeyCreatePermission,
+	APIKeyListPermission,
 	buildAPIKeyDeletePermission,
 	buildSAAttachPermission,
 	buildSADetachPermission,
@@ -24,10 +25,10 @@ interface KeysTabProps {
 	keys: ServiceaccounttypesGettableFactorAPIKeyDTO[];
 	isLoading: boolean;
 	isDisabled?: boolean;
-	canUpdate?: boolean;
 	accountId?: string;
 	currentPage: number;
 	pageSize: number;
+	onPageChange: (page: number) => void;
 }
 
 interface BuildColumnsParams {
@@ -113,29 +114,26 @@ function buildColumns({
 			render: (_, record): JSX.Element => {
 				const tooltipTitle = isDisabled ? 'Service account disabled' : 'Revoke Key';
 				return (
-					<AuthZTooltip
-						checks={[
-							buildAPIKeyDeletePermission(record.id),
-							buildSADetachPermission(accountId),
-						]}
-						enabled={!isDisabled && !!accountId}
-					>
-						<Tooltip title={tooltipTitle}>
-							<Button
-								variant="ghost"
-								size="sm"
-								color="destructive"
-								disabled={isDisabled}
-								onClick={(e): void => {
-									e.stopPropagation();
-									onRevokeClick(record.id);
-								}}
-								className="keys-tab__revoke-btn"
-							>
-								<X size={12} />
-							</Button>
-						</Tooltip>
-					</AuthZTooltip>
+					<Tooltip title={tooltipTitle}>
+						<AuthZButton
+							checks={[
+								buildAPIKeyDeletePermission(record.id),
+								buildSADetachPermission(accountId),
+							]}
+							authZEnabled={!isDisabled && !!accountId}
+							variant="ghost"
+							size="sm"
+							color="destructive"
+							disabled={isDisabled}
+							onClick={(e): void => {
+								e.stopPropagation();
+								onRevokeClick(record.id);
+							}}
+							className="keys-tab__revoke-btn"
+						>
+							<X size={12} />
+						</AuthZButton>
+					</Tooltip>
 				);
 			},
 		},
@@ -149,6 +147,7 @@ function KeysTab({
 	accountId = '',
 	currentPage,
 	pageSize,
+	onPageChange,
 }: KeysTabProps): JSX.Element {
 	const [, setIsAddKeyOpen] = useQueryState(
 		'add-key',
@@ -212,21 +211,18 @@ function KeysTab({
 						Learn more
 					</a>
 				</p>
-				<AuthZTooltip
+				<AuthZButton
 					checks={[APIKeyCreatePermission, buildSAAttachPermission(accountId)]}
-					enabled={!isDisabled && !!accountId}
+					authZEnabled={!isDisabled && !!accountId}
+					variant="link"
+					color="primary"
+					onClick={async (): Promise<void> => {
+						await setIsAddKeyOpen(true);
+					}}
+					disabled={isDisabled}
 				>
-					<Button
-						variant="link"
-						color="primary"
-						onClick={async (): Promise<void> => {
-							await setIsAddKeyOpen(true);
-						}}
-						disabled={isDisabled}
-					>
-						+ Add your first key
-					</Button>
-				</AuthZTooltip>
+					+ Add your first key
+				</AuthZButton>
 			</div>
 		);
 	}
@@ -278,6 +274,24 @@ function KeysTab({
 				})}
 			/>
 
+			<Pagination
+				current={currentPage}
+				pageSize={pageSize}
+				total={keys.length}
+				showTotal={(total: number, range: number[]): JSX.Element => (
+					<>
+						<span className="sa-drawer__pagination-range">
+							{range[0]} &#8212; {range[1]}
+						</span>
+						<span className="sa-drawer__pagination-total"> of {total}</span>
+					</>
+				)}
+				showSizeChanger={false}
+				hideOnSinglePage
+				onChange={onPageChange}
+				className="sa-drawer__keys-pagination"
+			/>
+
 			<EditKeyModal keyItem={editKey} />
 
 			<RevokeKeyModal />
@@ -285,4 +299,7 @@ function KeysTab({
 	);
 }
 
-export default KeysTab;
+export default withAuthZContent(KeysTab, {
+	checks: [APIKeyListPermission],
+	fallbackOnLoading: <Skeleton active paragraph={{ rows: 6 }} />,
+});

frontend/src/components/ServiceAccountDrawer/OverviewTab.tsx

@@ -4,17 +4,22 @@ import { Badge } from '@signozhq/ui/badge';
 import { Button } from '@signozhq/ui/button';
 import { Input } from '@signozhq/ui/input';
 import { useCopyToClipboard } from 'react-use';
-import type { AuthtypesRoleDTO } from 'api/generated/services/sigNoz.schemas';
+import type { AuthtypesGettableRoleDTO } from 'api/generated/services/sigNoz.schemas';
 import AuthZTooltip from 'lib/authz/components/AuthZTooltip/AuthZTooltip';
+import { withAuthZContent } from 'lib/authz/components/withAuthZ/withAuthZContent';
 import RolesSelect from 'components/RolesSelect';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
 import { ServiceAccountRow } from 'container/ServiceAccountsSettings/utils';
-import { buildSAUpdatePermission } from 'lib/authz/hooks/useAuthZ/permissions/service-account.permissions';
+import {
+	buildSAReadPermission,
+	buildSAUpdatePermission,
+} from 'lib/authz/hooks/useAuthZ/permissions/service-account.permissions';
 import { useTimezone } from 'providers/Timezone';
 import APIError from 'types/api/error';
 
 import SaveErrorItem from './SaveErrorItem';
 import type { SaveError } from './utils';
+import { Skeleton } from 'antd';
 
 interface OverviewTabProps {
 	account: ServiceAccountRow;
@@ -23,8 +28,7 @@ interface OverviewTabProps {
 	localRoles: string[];
 	onRolesChange: (v: string[]) => void;
 	isDisabled: boolean;
-	canUpdate?: boolean;
-	availableRoles: AuthtypesRoleDTO[];
+	availableRoles: AuthtypesGettableRoleDTO[];
 	rolesLoading?: boolean;
 	rolesError?: boolean;
 	rolesErrorObj?: APIError | undefined;
@@ -39,7 +43,6 @@ function OverviewTab({
 	localRoles,
 	onRolesChange,
 	isDisabled,
-	canUpdate = true,
 	availableRoles,
 	rolesLoading,
 	rolesError,
@@ -86,23 +89,22 @@ function OverviewTab({
 				<label className="sa-drawer__label" htmlFor="sa-name">
 					Name
 				</label>
-				{isDisabled || !canUpdate ? (
-					<AuthZTooltip
-						checks={[buildSAUpdatePermission(account.id)]}
-						enabled={!isDisabled && !canUpdate}
-					>
+				{isDisabled ? (
+					<AuthZTooltip checks={[buildSAUpdatePermission(account.id)]}>
 						<div className="sa-drawer__input-wrapper sa-drawer__input-wrapper--disabled">
 							<span className="sa-drawer__input-text">{localName || '—'}</span>
 							<LockKeyhole size={14} className="sa-drawer__lock-icon" />
 						</div>
 					</AuthZTooltip>
 				) : (
-					<Input
-						id="sa-name"
-						value={localName}
-						onChange={(e): void => onNameChange(e.target.value)}
-						placeholder="Enter name"
-					/>
+					<AuthZTooltip checks={[buildSAUpdatePermission(account.id)]}>
+						<Input
+							id="sa-name"
+							value={localName}
+							onChange={(e): void => onNameChange(e.target.value)}
+							placeholder="Enter name"
+						/>
+					</AuthZTooltip>
 				)}
 			</div>
 
@@ -220,4 +222,9 @@ function OverviewTab({
 	);
 }
 
-export default OverviewTab;
+export default withAuthZContent(OverviewTab, {
+	checks: (props): ReturnType<typeof buildSAReadPermission>[] => [
+		buildSAReadPermission(props.account.id),
+	],
+	fallbackOnLoading: <Skeleton active paragraph={{ rows: 6 }} />,
+});

frontend/src/components/ServiceAccountDrawer/RevokeKeyModal.tsx

@@ -1,7 +1,7 @@
 import { useQueryClient } from 'react-query';
 import { Trash2, X } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
-import AuthZTooltip from 'lib/authz/components/AuthZTooltip/AuthZTooltip';
+import AuthZButton from 'lib/authz/components/AuthZButton/AuthZButton';
 import {
 	buildAPIKeyDeletePermission,
 	buildSADetachPermission,
@@ -45,23 +45,20 @@ export function RevokeKeyFooter({
 				<X size={12} />
 				Cancel
 			</Button>
-			<AuthZTooltip
+			<AuthZButton
 				checks={[
 					buildAPIKeyDeletePermission(keyId ?? ''),
 					buildSADetachPermission(accountId ?? ''),
 				]}
-				enabled={!!accountId && !!keyId}
+				authZEnabled={!!accountId && !!keyId}
+				variant="solid"
+				color="destructive"
+				loading={isRevoking}
+				onClick={onConfirm}
 			>
-				<Button
-					variant="solid"
-					color="destructive"
-					loading={isRevoking}
-					onClick={onConfirm}
-				>
-					<Trash2 size={12} />
-					Revoke Key
-				</Button>
-			</AuthZTooltip>
+				<Trash2 size={12} />
+				Revoke Key
+			</AuthZButton>
 		</>
 	);
 }
@@ -111,7 +108,7 @@ function RevokeKeyModal(): JSX.Element {
 	}
 
 	function handleCancel(): void {
-		setRevokeKeyId(null);
+		void setRevokeKeyId(null);
 	}
 
 	return (

frontend/src/components/ServiceAccountDrawer/ServiceAccountDrawer.tsx

@@ -1,11 +1,17 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import React, {
+	useCallback,
+	useEffect,
+	useMemo,
+	useRef,
+	useState,
+} from 'react';
 import { useQueryClient } from 'react-query';
 import { Key, LayoutGrid, Plus, Trash2, X } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
 import { DrawerWrapper } from '@signozhq/ui/drawer';
 import { toast } from '@signozhq/ui/sonner';
 import { ToggleGroupSimple } from '@signozhq/ui/toggle-group';
-import { Pagination, Skeleton } from 'antd';
+import { Skeleton } from 'antd';
 import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
 import {
 	getListServiceAccountsQueryKey,
@@ -16,7 +22,6 @@ import {
 import type { RenderErrorResponseDTO } from 'api/generated/services/sigNoz.schemas';
 import { AxiosError } from 'axios';
 import ErrorInPlace from 'components/ErrorInPlace/ErrorInPlace';
-import PermissionDeniedCallout from 'lib/authz/components/PermissionDeniedCallout/PermissionDeniedCallout';
 import { useRoles } from 'components/RolesSelect';
 import { SA_QUERY_PARAMS } from 'container/ServiceAccountsSettings/constants';
 import {
@@ -28,15 +33,13 @@ import {
 	RoleUpdateFailure,
 	useServiceAccountRoleManager,
 } from 'hooks/serviceAccount/useServiceAccountRoleManager';
+import AuthZButton from 'lib/authz/components/AuthZButton/AuthZButton';
 import {
 	APIKeyCreatePermission,
-	APIKeyListPermission,
 	buildSAAttachPermission,
 	buildSADeletePermission,
-	buildSAReadPermission,
 	buildSAUpdatePermission,
 } from 'lib/authz/hooks/useAuthZ/permissions/service-account.permissions';
-import { useAuthZ } from 'lib/authz/hooks/useAuthZ/useAuthZ';
 import {
 	parseAsBoolean,
 	parseAsInteger,
@@ -47,7 +50,6 @@ import {
 import APIError from 'types/api/error';
 import { toAPIError } from 'utils/errorUtils';
 
-import AuthZTooltip from 'lib/authz/components/AuthZTooltip/AuthZTooltip';
 import AddKeyModal from './AddKeyModal';
 import DeleteAccountModal from './DeleteAccountModal';
 import KeysTab from './KeysTab';
@@ -70,14 +72,12 @@ function toSaveApiError(err: unknown): APIError {
 	);
 }
 
-// eslint-disable-next-line sonarjs/cognitive-complexity
 function ServiceAccountDrawer({
 	onSuccess,
 }: ServiceAccountDrawerProps): JSX.Element {
 	const [selectedAccountId, setSelectedAccountId] = useQueryState(
 		SA_QUERY_PARAMS.ACCOUNT,
 	);
-	const open = !!selectedAccountId;
 	const [activeTab, setActiveTab] = useQueryState(
 		SA_QUERY_PARAMS.TAB,
 		parseAsStringEnum<ServiceAccountDrawerTab>(
@@ -100,28 +100,14 @@ function ServiceAccountDrawer({
 		SA_QUERY_PARAMS.DELETE_SA,
 		parseAsBoolean.withDefault(false),
 	);
+
 	const [localName, setLocalName] = useState('');
 	const [localRoles, setLocalRoles] = useState<string[]>([]);
 	const [isSaving, setIsSaving] = useState(false);
 	const [saveErrors, setSaveErrors] = useState<SaveError[]>([]);
 
 	const queryClient = useQueryClient();
-
-	const { permissions: drawerPermissions, isLoading: isAuthZLoading } = useAuthZ(
-		selectedAccountId
-			? [
-					buildSAReadPermission(selectedAccountId),
-					buildSAUpdatePermission(selectedAccountId),
-					buildSADeletePermission(selectedAccountId),
-					APIKeyListPermission,
-				]
-			: [],
-		{ enabled: !!selectedAccountId },
-	);
-
-	const canRead =
-		drawerPermissions?.[buildSAReadPermission(selectedAccountId ?? '')]
-			?.isGranted ?? false;
+	const open = !!selectedAccountId;
 
 	const {
 		data: accountData,
@@ -131,7 +117,7 @@ function ServiceAccountDrawer({
 		refetch: refetchAccount,
 	} = useGetServiceAccount(
 		{ id: selectedAccountId ?? '' },
-		{ query: { enabled: canRead && !!selectedAccountId } },
+		{ query: { enabled: !!selectedAccountId } },
 	);
 
 	const account = useMemo(
@@ -145,7 +131,7 @@ function ServiceAccountDrawer({
 		isLoading: isRolesLoading,
 		applyDiff,
 	} = useServiceAccountRoleManager(selectedAccountId ?? '', {
-		enabled: canRead && !!selectedAccountId,
+		enabled: !!selectedAccountId,
 	});
 
 	const roleSessionRef = useRef<string | null>(null);
@@ -194,16 +180,9 @@ function ServiceAccountDrawer({
 		refetch: refetchRoles,
 	} = useRoles();
 
-	const canListKeys =
-		drawerPermissions?.[APIKeyListPermission]?.isGranted ?? false;
-
-	const canUpdate =
-		drawerPermissions?.[buildSAUpdatePermission(selectedAccountId ?? '')]
-			?.isGranted ?? true;
-
 	const { data: keysData, isLoading: keysLoading } = useListServiceAccountKeys(
 		{ id: selectedAccountId ?? '' },
-		{ query: { enabled: !!selectedAccountId && canListKeys } },
+		{ query: { enabled: !!selectedAccountId } },
 	);
 	const keys = keysData?.data ?? [];
 
@@ -217,7 +196,6 @@ function ServiceAccountDrawer({
 		}
 	}, [keysLoading, keys.length, keysPage, setKeysPage]);
 
-	// the retry for this mutation is safe due to the api being idempotent on backend
 	const { mutateAsync: updateMutateAsync } = useUpdateServiceAccount();
 
 	const retryNameUpdate = useCallback(async (): Promise<void> => {
@@ -375,23 +353,71 @@ function ServiceAccountDrawer({
 	]);
 
 	const handleClose = useCallback((): void => {
-		void setIsDeleteOpen(null);
-		void setIsAddKeyOpen(null);
-		void setSelectedAccountId(null);
+		setSaveErrors([]);
 		void setActiveTab(null);
 		void setKeysPage(null);
 		void setEditKeyId(null);
-		setSaveErrors([]);
+		void setIsAddKeyOpen(null);
+		void setIsDeleteOpen(null);
+		void setSelectedAccountId(null);
 	}, [
-		setSelectedAccountId,
 		setActiveTab,
 		setKeysPage,
 		setEditKeyId,
 		setIsAddKeyOpen,
 		setIsDeleteOpen,
+		setSelectedAccountId,
 	]);
 
-	const drawerContent = (
+	const footer = useMemo(
+		() =>
+			activeTab === ServiceAccountDrawerTab.Overview && !isDeleted && open ? (
+				<div className="sa-drawer__footer">
+					<AuthZButton
+						checks={[buildSADeletePermission(selectedAccountId ?? '')]}
+						authZEnabled={!!selectedAccountId}
+						variant="link"
+						color="destructive"
+						onClick={(): void => {
+							void setIsDeleteOpen(true);
+						}}
+					>
+						<Trash2 size={12} />
+						Delete Service Account
+					</AuthZButton>
+					<div className="sa-drawer__footer-right">
+						<Button variant="outlined" color="secondary" onClick={handleClose}>
+							<X size={14} />
+							Cancel
+						</Button>
+						<AuthZButton
+							checks={[buildSAUpdatePermission(selectedAccountId ?? '')]}
+							authZEnabled={!!selectedAccountId}
+							variant="solid"
+							color="primary"
+							loading={isSaving}
+							disabled={!isDirty}
+							onClick={handleSave}
+						>
+							Save Changes
+						</AuthZButton>
+					</div>
+				</div>
+			) : null,
+		[
+			activeTab,
+			isDeleted,
+			open,
+			selectedAccountId,
+			isSaving,
+			isDirty,
+			handleClose,
+			handleSave,
+			setIsDeleteOpen,
+		],
+	);
+
+	const body = (
 		<div className="sa-drawer__layout">
 			<div className="sa-drawer__tabs">
 				<ToggleGroupSimple
@@ -433,26 +459,23 @@ function ServiceAccountDrawer({
 					]}
 				/>
 				{activeTab === ServiceAccountDrawerTab.Keys && (
-					<AuthZTooltip
+					<AuthZButton
 						checks={[
 							APIKeyCreatePermission,
 							buildSAAttachPermission(selectedAccountId ?? ''),
 						]}
-						enabled={!isDeleted && !!selectedAccountId}
+						authZEnabled={!isDeleted && !!selectedAccountId}
+						variant="outlined"
+						size="sm"
+						color="secondary"
+						disabled={isDeleted}
+						onClick={(): void => {
+							void setIsAddKeyOpen(true);
+						}}
 					>
-						<Button
-							variant="outlined"
-							size="sm"
-							color="secondary"
-							disabled={isDeleted}
-							onClick={(): void => {
-								void setIsAddKeyOpen(true);
-							}}
-						>
-							<Plus size={12} />
-							Add Key
-						</Button>
-					</AuthZTooltip>
+						<Plus size={12} />
+						Add Key
+					</AuthZButton>
 				)}
 			</div>
 
@@ -461,9 +484,7 @@ function ServiceAccountDrawer({
 					activeTab === ServiceAccountDrawerTab.Keys ? ' sa-drawer__body--keys' : ''
 				}`}
 			>
-				{(isAuthZLoading || isAccountLoading) && (
-					<Skeleton active paragraph={{ rows: 6 }} />
-				)}
+				{isAccountLoading && <Skeleton active paragraph={{ rows: 6 }} />}
 				{isAccountError && (
 					<ErrorInPlace
 						error={toAPIError(
@@ -472,141 +493,73 @@ function ServiceAccountDrawer({
 						)}
 					/>
 				)}
-				{!isAuthZLoading &&
-					!isAccountLoading &&
-					!isAccountError &&
-					selectedAccountId && (
-						<>
-							{activeTab === ServiceAccountDrawerTab.Overview &&
-								(canRead && account ? (
-									<OverviewTab
-										account={account}
-										localName={localName}
-										onNameChange={handleNameChange}
-										localRoles={localRoles}
-										onRolesChange={(roles): void => {
-											setLocalRoles(roles);
-											clearRoleErrors();
-										}}
-										isDisabled={isDeleted}
-										canUpdate={canUpdate}
-										availableRoles={availableRoles}
-										rolesLoading={rolesLoading}
-										rolesError={rolesError}
-										rolesErrorObj={rolesErrorObj}
-										onRefetchRoles={refetchRoles}
-										saveErrors={saveErrors}
-									/>
-								) : (
-									<PermissionDeniedCallout permissionName="serviceaccount:read" />
-								))}
-							{activeTab === ServiceAccountDrawerTab.Keys &&
-								(canListKeys ? (
-									<KeysTab
-										keys={keys}
-										isLoading={keysLoading}
-										isDisabled={isDeleted}
-										canUpdate={canUpdate}
-										accountId={selectedAccountId}
-										currentPage={keysPage}
-										pageSize={PAGE_SIZE}
-									/>
-								) : (
-									<PermissionDeniedCallout permissionName="factor-api-key:list" />
-								))}
-						</>
-					)}
+				{!isAccountLoading && !isAccountError && (
+					<>
+						{activeTab === ServiceAccountDrawerTab.Overview &&
+							(account ? (
+								<OverviewTab
+									account={account}
+									localName={localName}
+									onNameChange={handleNameChange}
+									localRoles={localRoles}
+									onRolesChange={(roles): void => {
+										setLocalRoles(roles);
+										clearRoleErrors();
+									}}
+									isDisabled={isDeleted}
+									availableRoles={availableRoles}
+									rolesLoading={rolesLoading}
+									rolesError={rolesError}
+									rolesErrorObj={rolesErrorObj}
+									onRefetchRoles={refetchRoles}
+									saveErrors={saveErrors}
+								/>
+							) : (
+								<Skeleton active />
+							))}
+						{activeTab === ServiceAccountDrawerTab.Keys && (
+							<KeysTab
+								keys={keys}
+								isLoading={keysLoading}
+								isDisabled={isDeleted}
+								accountId={selectedAccountId ?? ''}
+								currentPage={keysPage}
+								pageSize={PAGE_SIZE}
+								onPageChange={(page): void => {
+									void setKeysPage(page);
+								}}
+							/>
+						)}
+					</>
+				)}
 			</div>
 		</div>
 	);
 
-	const footer = (
-		<div className="sa-drawer__footer">
-			{activeTab === ServiceAccountDrawerTab.Keys ? (
-				<Pagination
-					current={keysPage}
-					pageSize={PAGE_SIZE}
-					total={keys.length}
-					showTotal={(total: number, range: number[]): JSX.Element => (
-						<>
-							<span className="sa-drawer__pagination-range">
-								{range[0]} &#8212; {range[1]}
-							</span>
-							<span className="sa-drawer__pagination-total"> of {total}</span>
-						</>
-					)}
-					showSizeChanger={false}
-					hideOnSinglePage
-					onChange={(page): void => {
-						void setKeysPage(page);
-					}}
-					className="sa-drawer__keys-pagination"
-				/>
-			) : (
+	return (
+		<DrawerWrapper
+			open={open}
+			onOpenChange={(isOpen): void => {
+				if (!isOpen) {
+					handleClose();
+				}
+			}}
+			direction="right"
+			showCloseButton
+			showOverlay={false}
+			title="Service Account Details"
+			className="sa-drawer"
+			width="wide"
+			footer={footer}
+		>
+			{open && (
 				<>
-					{!isDeleted && (
-						<AuthZTooltip
-							checks={[buildSADeletePermission(selectedAccountId ?? '')]}
-							enabled={!!selectedAccountId}
-						>
-							<Button
-								variant="link"
-								color="destructive"
-								onClick={(): void => {
-									void setIsDeleteOpen(true);
-								}}
-							>
-								<Trash2 size={12} />
-								Delete Service Account
-							</Button>
-						</AuthZTooltip>
-					)}
-					{!isDeleted && (
-						<div className="sa-drawer__footer-right">
-							<Button variant="outlined" color="secondary" onClick={handleClose}>
-								<X size={14} />
-								Cancel
-							</Button>
-							<Button
-								variant="solid"
-								color="primary"
-								loading={isSaving}
-								disabled={!isDirty}
-								onClick={handleSave}
-							>
-								Save Changes
-							</Button>
-						</div>
-					)}
+					{body}
+					<DeleteAccountModal />
+					<AddKeyModal />
 				</>
 			)}
-		</div>
-	);
-
-	return (
-		<>
-			<DrawerWrapper
-				open={open}
-				onOpenChange={(isOpen): void => {
-					if (!isOpen) {
-						handleClose();
-					}
-				}}
-				direction="right"
-				showCloseButton
-				showOverlay={false}
-				title="Service Account Details"
-				className="sa-drawer"
-				width="wide"
-				footer={footer}
-			>
-				{drawerContent}
-			</DrawerWrapper>
-
-			<DeleteAccountModal />
-
-			<AddKeyModal />
-		</>
+		</DrawerWrapper>
 	);
 }
 

frontend/src/components/ServiceAccountDrawer/__tests__/AddKeyModal.test.tsx

@@ -1,13 +1,8 @@
 import { toast } from '@signozhq/ui/sonner';
+import { setupAuthzAdmin } from 'lib/authz/utils/authz-test-utils';
 import { rest, server } from 'mocks-server/server';
 import { NuqsTestingAdapter } from 'nuqs/adapters/testing';
-import {
-	render,
-	screen,
-	userEvent,
-	waitFor,
-	waitForElementToBeRemoved,
-} from 'tests/test-utils';
+import { render, screen, userEvent, waitFor } from 'tests/test-utils';
 
 import AddKeyModal from '../AddKeyModal';
 
@@ -59,6 +54,7 @@ describe('AddKeyModal', () => {
 			rest.post(SA_KEYS_ENDPOINT, (_, res, ctx) =>
 				res(ctx.status(201), ctx.json(createdKeyResponse)),
 			),
+			setupAuthzAdmin(),
 		);
 	});
 
@@ -95,7 +91,7 @@ describe('AddKeyModal', () => {
 
 		await screen.findByText('snz_abc123xyz456secret');
 		expect(screen.getByText(/Store the key securely/i)).toBeInTheDocument();
-		await screen.findByRole('dialog', { name: /Key Created Successfully/i });
+		expect(screen.getByTestId('add-key-modal')).toBeInTheDocument();
 	});
 
 	it('copy button writes key to clipboard and shows toast.success', async () => {
@@ -131,9 +127,11 @@ describe('AddKeyModal', () => {
 		const user = userEvent.setup({ pointerEventsCheck: 0 });
 		renderModal();
 
-		const dialog = await screen.findByRole('dialog', { name: /Add a New Key/i });
+		await screen.findByTestId('add-key-modal');
 		await user.click(screen.getByRole('button', { name: /Cancel/i }));
 
-		await waitForElementToBeRemoved(dialog);
+		await waitFor(() => {
+			expect(screen.queryByTestId('add-key-modal')).not.toBeInTheDocument();
+		});
 	});
 });

frontend/src/components/ServiceAccountDrawer/__tests__/EditKeyModal.test.tsx

@@ -1,5 +1,6 @@
 import { toast } from '@signozhq/ui/sonner';
 import type { ServiceaccounttypesGettableFactorAPIKeyDTO } from 'api/generated/services/sigNoz.schemas';
+import { setupAuthzAdmin } from 'lib/authz/utils/authz-test-utils';
 import { rest, server } from 'mocks-server/server';
 import { NuqsTestingAdapter } from 'nuqs/adapters/testing';
 import { render, screen, userEvent, waitFor } from 'tests/test-utils';
@@ -61,6 +62,7 @@ describe('EditKeyModal (URL-controlled)', () => {
 			rest.delete(SA_KEY_ENDPOINT, (_, res, ctx) =>
 				res(ctx.status(200), ctx.json({ status: 'success', data: {} })),
 			),
+			setupAuthzAdmin(),
 		);
 	});
 
@@ -71,9 +73,7 @@ describe('EditKeyModal (URL-controlled)', () => {
 	it('renders nothing when edit-key param is absent', () => {
 		renderModal(null, { account: 'sa-1' });
 
-		expect(
-			screen.queryByRole('dialog', { name: /Edit Key Details/i }),
-		).not.toBeInTheDocument();
+		expect(screen.queryByTestId('edit-key-modal')).not.toBeInTheDocument();
 	});
 
 	it('renders key data from prop when edit-key param is set', async () => {
@@ -100,9 +100,7 @@ describe('EditKeyModal (URL-controlled)', () => {
 		});
 
 		await waitFor(() => {
-			expect(
-				screen.queryByRole('dialog', { name: /Edit Key Details/i }),
-			).not.toBeInTheDocument();
+			expect(screen.queryByTestId('edit-key-modal')).not.toBeInTheDocument();
 		});
 	});
 
@@ -129,9 +127,7 @@ describe('EditKeyModal (URL-controlled)', () => {
 		expect(latestUrlUpdate.queryString).not.toContain('edit-key=');
 
 		await waitFor(() => {
-			expect(
-				screen.queryByRole('dialog', { name: /Edit Key Details/i }),
-			).not.toBeInTheDocument();
+			expect(screen.queryByTestId('edit-key-modal')).not.toBeInTheDocument();
 		});
 	});
 
@@ -143,9 +139,7 @@ describe('EditKeyModal (URL-controlled)', () => {
 		await user.click(screen.getByRole('button', { name: /Revoke Key/i }));
 
 		// Same dialog, now showing revoke confirmation
-		await expect(
-			screen.findByRole('dialog', { name: /Revoke Original Key Name/i }),
-		).resolves.toBeInTheDocument();
+		expect(screen.getByTestId('edit-key-modal')).toBeInTheDocument();
 		expect(
 			screen.getByText(/Revoking this key will permanently invalidate it/i),
 		).toBeInTheDocument();
@@ -168,9 +162,7 @@ describe('EditKeyModal (URL-controlled)', () => {
 		});
 
 		await waitFor(() => {
-			expect(
-				screen.queryByRole('dialog', { name: /Edit Key Details/i }),
-			).not.toBeInTheDocument();
+			expect(screen.queryByTestId('edit-key-modal')).not.toBeInTheDocument();
 		});
 	});
 });

frontend/src/components/ServiceAccountDrawer/__tests__/KeysTab.test.tsx

@@ -1,5 +1,6 @@
 import { toast } from '@signozhq/ui/sonner';
 import { ServiceaccounttypesGettableFactorAPIKeyDTO } from 'api/generated/services/sigNoz.schemas';
+import { setupAuthzAdmin } from 'lib/authz/utils/authz-test-utils';
 import { rest, server } from 'mocks-server/server';
 import { NuqsTestingAdapter } from 'nuqs/adapters/testing';
 import { render, screen, userEvent, waitFor } from 'tests/test-utils';
@@ -35,7 +36,7 @@ const keys: ServiceaccounttypesGettableFactorAPIKeyDTO[] = [
 	{
 		id: 'key-2',
 		name: 'Staging Key',
-		expiresAt: 1924905600, // 2030-12-31
+		expiresAt: 1924948800, // 2030-12-31 12:00 UTC (noon to avoid timezone issues)
 		lastObservedAt: '2026-03-10T10:00:00Z',
 		serviceAccountId: 'sa-1',
 	},
@@ -47,6 +48,7 @@ const defaultProps = {
 	isDisabled: false,
 	currentPage: 1,
 	pageSize: 10,
+	onPageChange: jest.fn(),
 };
 
 function renderKeysTab(
@@ -67,6 +69,7 @@ describe('KeysTab', () => {
 			rest.delete(SA_KEY_ENDPOINT, (_, res, ctx) =>
 				res(ctx.status(200), ctx.json({ status: 'success', data: {} })),
 			),
+			setupAuthzAdmin(),
 		);
 	});
 
@@ -74,9 +77,12 @@ describe('KeysTab', () => {
 		server.resetHandlers();
 	});
 
-	it('renders loading state', () => {
+	it('renders loading state', async () => {
 		renderKeysTab({ isLoading: true });
-		expect(document.querySelector('.ant-skeleton')).toBeInTheDocument();
+		// Wait for authz to complete, then check for skeleton
+		await waitFor(() => {
+			expect(document.querySelector('.ant-skeleton')).toBeInTheDocument();
+		});
 	});
 
 	it('renders empty state when no keys and clicking add sets add-key param', async () => {
@@ -91,9 +97,9 @@ describe('KeysTab', () => {
 			</NuqsTestingAdapter>,
 		);
 
-		expect(
-			screen.getByText(/No keys. Start by creating one./i),
-		).toBeInTheDocument();
+		await expect(
+			screen.findByText(/No keys. Start by creating one./i),
+		).resolves.toBeInTheDocument();
 		const addBtn = screen.getByRole('button', { name: /\+ Add your first key/i });
 		await user.click(addBtn);
 		expect(onUrlUpdate).toHaveBeenCalledWith(
@@ -103,10 +109,12 @@ describe('KeysTab', () => {
 		);
 	});
 
-	it('renders table with keys', () => {
+	it('renders table with keys', async () => {
 		renderKeysTab();
 
-		expect(screen.getByText('Production Key')).toBeInTheDocument();
+		await expect(
+			screen.findByText('Production Key'),
+		).resolves.toBeInTheDocument();
 		expect(screen.getByText('Staging Key')).toBeInTheDocument();
 		expect(screen.getByText('Never')).toBeInTheDocument();
 		expect(screen.getByText('Dec 31, 2030')).toBeInTheDocument();
@@ -122,7 +130,7 @@ describe('KeysTab', () => {
 			</NuqsTestingAdapter>,
 		);
 
-		const row = screen.getByText('Production Key').closest('tr');
+		const row = (await screen.findByText('Production Key')).closest('tr');
 		if (!row) {
 			throw new Error('Row not found');
 		}
@@ -146,6 +154,8 @@ describe('KeysTab', () => {
 			</NuqsTestingAdapter>,
 		);
 
+		// Wait for authz to complete and table to render
+		await screen.findByText('Production Key');
 		const revokeBtns = screen
 			.getAllByRole('button')
 			.filter((btn) => btn.className.includes('keys-tab__revoke-btn'));
@@ -163,7 +173,8 @@ describe('KeysTab', () => {
 
 		renderKeysTab();
 
-		// Seed the keys cache so RevokeKeyModal can read the key name
+		// Wait for authz to complete and table to render
+		await screen.findByText('Production Key');
 		const revokeBtns = screen
 			.getAllByRole('button')
 			.filter((btn) => btn.className.includes('keys-tab__revoke-btn'));
@@ -177,9 +188,11 @@ describe('KeysTab', () => {
 		});
 	});
 
-	it('disables actions when isDisabled is true', () => {
+	it('disables actions when isDisabled is true', async () => {
 		renderKeysTab({ isDisabled: true });
 
+		// Wait for authz to complete and table to render
+		await screen.findByText('Production Key');
 		const revokeBtns = screen
 			.getAllByRole('button')
 			.filter((btn) => btn.className.includes('keys-tab__revoke-btn'));

frontend/src/components/ServiceAccountDrawer/__tests__/ServiceAccountDrawer.authz.test.tsx

@@ -1,4 +1,3 @@
-import type { ReactNode } from 'react';
 import { listRolesSuccessResponse } from 'mocks-server/__mockdata__/roles';
 import { rest, server } from 'mocks-server/server';
 import { NuqsTestingAdapter } from 'nuqs/adapters/testing';
@@ -32,30 +31,6 @@ const activeAccountResponse = {
 	updatedAt: '2026-01-02T00:00:00Z',
 };
 
-jest.mock('@signozhq/ui/drawer', () => ({
-	...jest.requireActual('@signozhq/ui/drawer'),
-	DrawerWrapper: ({
-		children,
-		footer,
-		open,
-	}: {
-		children?: ReactNode;
-		footer?: ReactNode;
-		open: boolean;
-	}): JSX.Element | null =>
-		open ? (
-			<div>
-				{children}
-				{footer}
-			</div>
-		) : null,
-}));
-
-jest.mock('@signozhq/ui/sonner', () => ({
-	...jest.requireActual('@signozhq/ui/sonner'),
-	toast: { success: jest.fn(), error: jest.fn() },
-}));
-
 function renderDrawer(
 	searchParams: Record<string, string> = { account: 'sa-1' },
 ): ReturnType<typeof render> {
@@ -118,7 +93,7 @@ describe('ServiceAccountDrawer — permissions', () => {
 		renderDrawer();
 
 		await waitFor(() => {
-			expect(screen.getByText(/serviceaccount:read/)).toBeInTheDocument();
+			expect(screen.getByText(/read:serviceaccount/)).toBeInTheDocument();
 		});
 	});
 
@@ -140,7 +115,7 @@ describe('ServiceAccountDrawer — permissions', () => {
 		fireEvent.click(screen.getByRole('radio', { name: /keys/i }));
 
 		await waitFor(() => {
-			expect(screen.getByText(/factor-api-key:list/)).toBeInTheDocument();
+			expect(screen.getByText(/list:factor-api-key/)).toBeInTheDocument();
 		});
 	});
 

frontend/src/components/ServiceAccountDrawer/__tests__/ServiceAccountDrawer.test.tsx

@@ -1,4 +1,3 @@
-import type { ReactNode } from 'react';
 import { listRolesSuccessResponse } from 'mocks-server/__mockdata__/roles';
 import { rest, server } from 'mocks-server/server';
 import { NuqsTestingAdapter } from 'nuqs/adapters/testing';
@@ -7,30 +6,6 @@ import { setupAuthzAdmin } from 'lib/authz/utils/authz-test-utils';
 
 import ServiceAccountDrawer from '../ServiceAccountDrawer';
 
-jest.mock('@signozhq/ui/drawer', () => ({
-	...jest.requireActual('@signozhq/ui/drawer'),
-	DrawerWrapper: ({
-		children,
-		footer,
-		open,
-	}: {
-		children?: ReactNode;
-		footer?: ReactNode;
-		open: boolean;
-	}): JSX.Element | null =>
-		open ? (
-			<div>
-				{children}
-				{footer}
-			</div>
-		) : null,
-}));
-
-jest.mock('@signozhq/ui/sonner', () => ({
-	...jest.requireActual('@signozhq/ui/sonner'),
-	toast: { success: jest.fn(), error: jest.fn() },
-}));
-
 const ROLES_ENDPOINT = '*/api/v1/roles';
 const SA_KEYS_ENDPOINT = '*/api/v1/service_accounts/:id/keys';
 const SA_ENDPOINT = '*/api/v1/service_accounts/sa-1';
@@ -247,21 +222,20 @@ describe('ServiceAccountDrawer', () => {
 			screen.getByRole('button', { name: /Delete Service Account/i }),
 		);
 
-		const dialog = await screen.findByRole('dialog', {
-			name: /Delete service account CI Bot/i,
-		});
-		expect(dialog).toBeInTheDocument();
+		await screen.findByTestId('delete-service-account-modal');
+		expect(
+			screen.getByTestId('delete-service-account-modal'),
+		).toBeInTheDocument();
 
-		const confirmBtns = screen.getAllByRole('button', { name: /^Delete$/i });
-		await user.click(confirmBtns[confirmBtns.length - 1]);
+		await user.click(screen.getByTestId('confirm-delete-btn'));
 
-		await waitFor(() => {
-			expect(deleteSpy).toHaveBeenCalled();
-		});
-
-		await waitFor(() => {
-			expect(screen.queryByDisplayValue('CI Bot')).not.toBeInTheDocument();
-		});
+		await waitFor(
+			() => {
+				expect(deleteSpy).toHaveBeenCalled();
+				expect(screen.queryByDisplayValue('CI Bot')).not.toBeInTheDocument();
+			},
+			{ timeout: 3000 },
+		);
 	});
 
 	it('deleted account shows read-only name, no Save button, no Delete button', async () => {

frontend/src/components/TagKeyValueInput/TagKeyValueInput.test.tsx

@@ -0,0 +1,112 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import TagKeyValueInput from './TagKeyValueInput';
+
+const TID = 'tag-key-value-input';
+
+type User = ReturnType<typeof userEvent.setup>;
+
+const startEditingFirstChip = async (user: User): Promise<HTMLElement> => {
+	await user.dblClick(screen.getAllByTestId(`${TID}-chip`)[0]);
+	return screen.getByTestId(`${TID}-edit`);
+};
+
+describe('TagKeyValueInput — inline chip edit', () => {
+	it('shows an error and stays in edit mode when Enter commits an invalid value', async () => {
+		const user = userEvent.setup();
+		const onTagsChange = jest.fn();
+		render(<TagKeyValueInput tags={['env:prod']} onTagsChange={onTagsChange} />);
+
+		const input = await startEditingFirstChip(user);
+		await user.clear(input);
+		await user.type(input, 'novalue{Enter}');
+
+		expect(screen.getByTestId(`${TID}-error`)).toHaveTextContent(
+			'key:value format',
+		);
+		// Still editing (input present), and no change committed.
+		expect(screen.getByTestId(`${TID}-edit`)).toBeInTheDocument();
+		expect(onTagsChange).not.toHaveBeenCalled();
+	});
+
+	it('shows a duplicate error when Enter commits an existing tag', async () => {
+		const user = userEvent.setup();
+		const onTagsChange = jest.fn();
+		render(
+			<TagKeyValueInput
+				tags={['env:prod', 'team:pulse']}
+				onTagsChange={onTagsChange}
+			/>,
+		);
+
+		const input = await startEditingFirstChip(user);
+		await user.clear(input);
+		await user.type(input, 'team:pulse{Enter}');
+
+		expect(screen.getByTestId(`${TID}-error`)).toHaveTextContent(
+			'already exists',
+		);
+		expect(onTagsChange).not.toHaveBeenCalled();
+	});
+
+	it('commits a valid edit on Enter', async () => {
+		const user = userEvent.setup();
+		const onTagsChange = jest.fn();
+		render(<TagKeyValueInput tags={['env:prod']} onTagsChange={onTagsChange} />);
+
+		const input = await startEditingFirstChip(user);
+		await user.clear(input);
+		await user.type(input, 'env:staging{Enter}');
+
+		expect(onTagsChange).toHaveBeenCalledWith(['env:staging']);
+		expect(screen.queryByTestId(`${TID}-error`)).not.toBeInTheDocument();
+	});
+
+	it('reverts silently (no error) when blurring an invalid edit', async () => {
+		const user = userEvent.setup();
+		const onTagsChange = jest.fn();
+		render(<TagKeyValueInput tags={['env:prod']} onTagsChange={onTagsChange} />);
+
+		const input = await startEditingFirstChip(user);
+		await user.clear(input);
+		await user.type(input, 'novalue');
+		await user.tab(); // blur off the edit input
+
+		expect(screen.queryByTestId(`${TID}-error`)).not.toBeInTheDocument();
+		expect(screen.queryByTestId(`${TID}-edit`)).not.toBeInTheDocument();
+		expect(onTagsChange).not.toHaveBeenCalled();
+	});
+});
+
+describe('TagKeyValueInput — backend-rule validation', () => {
+	it('rejects a key containing a space on inline edit', async () => {
+		const user = userEvent.setup();
+		const onTagsChange = jest.fn();
+		render(<TagKeyValueInput tags={['env:prod']} onTagsChange={onTagsChange} />);
+
+		const input = await startEditingFirstChip(user);
+		await user.clear(input);
+		await user.type(input, 'my key:prod{Enter}');
+
+		expect(screen.getByTestId(`${TID}-error`)).toHaveTextContent(
+			'spaces or special characters',
+		);
+		expect(screen.getByTestId(`${TID}-edit`)).toBeInTheDocument();
+		expect(onTagsChange).not.toHaveBeenCalled();
+	});
+
+	it('rejects a value containing a space in the new-tag input', async () => {
+		const user = userEvent.setup();
+		const onTagsChange = jest.fn();
+		render(<TagKeyValueInput tags={[]} onTagsChange={onTagsChange} />);
+
+		const input = screen.getByTestId(TID);
+		await user.type(input, 'env:pro d{Enter}');
+
+		expect(screen.getByTestId(`${TID}-error`)).toHaveTextContent(
+			'spaces or special characters',
+		);
+		expect(onTagsChange).not.toHaveBeenCalled();
+	});
+});

frontend/src/components/TagKeyValueInput/TagKeyValueInput.tsx

@@ -5,7 +5,7 @@ import { Typography } from '@signozhq/ui/typography';
 import cx from 'classnames';
 
 import TagBadge from '../TagBadge/TagBadge';
-import { parseKeyValueTag } from './utils';
+import { validateTag } from './utils';
 
 import styles from './TagKeyValueInput.module.scss';
 
@@ -43,16 +43,12 @@ function TagKeyValueInput({
 		if (!raw) {
 			return;
 		}
-		const normalized = parseKeyValueTag(raw);
-		if (!normalized) {
-			setError('Tags must be in key:value format (both sides required).');
+		const result = validateTag(raw, tags);
+		if ('error' in result) {
+			setError(result.error);
 			return;
 		}
-		if (tags.includes(normalized)) {
-			setError('This tag already exists.');
-			return;
-		}
-		onTagsChange([...tags, normalized]);
+		onTagsChange([...tags, result.tag]);
 		setInputValue('');
 		setError('');
 	};
@@ -82,15 +78,20 @@ function TagKeyValueInput({
 	const cancelEdit = (): void => {
 		setEditIndex(-1);
 		setEditValue('');
+		setError('');
 	};
 
-	const commitEdit = (): void => {
-		const normalized = parseKeyValueTag(editValue);
-		// Drop into a no-op (revert) on invalid or duplicate edits rather than
-		// stranding the user in an un-exitable edit box.
-		if (normalized && !tags.some((t, i) => t === normalized && i !== editIndex)) {
-			onTagsChange(tags.map((t, i) => (i === editIndex ? normalized : t)));
+	const commitEdit = (revertOnInvalid = false): void => {
+		const result = validateTag(editValue, tags, editIndex);
+		if ('error' in result) {
+			if (revertOnInvalid) {
+				cancelEdit();
+			} else {
+				setError(result.error);
+			}
+			return;
 		}
+		onTagsChange(tags.map((t, i) => (i === editIndex ? result.tag : t)));
 		cancelEdit();
 	};
 
@@ -121,11 +122,14 @@ function TagKeyValueInput({
 							value={editValue}
 							autoFocus
 							testId={`${testId}-edit`}
-							onChange={(e: ChangeEvent<HTMLInputElement>): void =>
-								setEditValue(e.target.value)
-							}
+							onChange={(e: ChangeEvent<HTMLInputElement>): void => {
+								setEditValue(e.target.value);
+								if (error) {
+									setError('');
+								}
+							}}
 							onKeyDown={handleEditKeyDown}
-							onBlur={commitEdit}
+							onBlur={(): void => commitEdit(true)}
 						/>
 					) : (
 						<TagBadge

frontend/src/components/TagKeyValueInput/utils.ts

@@ -15,3 +15,42 @@ export function parseKeyValueTag(raw: string): string | null {
 	}
 	return `${key}:${value}`;
 }
+
+const TAG_KEY_REGEX = new RegExp('^[a-zA-Z$_@{#][a-zA-Z0-9$_@#{}:/-]*$');
+const TAG_VALUE_REGEX = new RegExp('^[a-zA-Z0-9$_@#{}:.+=/-]*$');
+const MAX_TAG_LEN = 32;
+
+export type TagValidation = { tag: string } | { error: string };
+
+export function validateTag(
+	raw: string,
+	existingTags: string[],
+	excludeIndex = -1,
+): TagValidation {
+	const normalized = parseKeyValueTag(raw);
+	if (!normalized) {
+		return { error: 'Tags must be in key:value format (both sides required).' };
+	}
+	const separator = normalized.indexOf(':');
+	const key = normalized.slice(0, separator);
+	const value = normalized.slice(separator + 1);
+	if (!TAG_KEY_REGEX.test(key)) {
+		return { error: 'Tag keys cannot contain spaces or special characters.' };
+	}
+	if (!TAG_VALUE_REGEX.test(value)) {
+		return { error: 'Tag values cannot contain spaces or special characters.' };
+	}
+	if (key.length > MAX_TAG_LEN || value.length > MAX_TAG_LEN) {
+		return {
+			error: `Tag key and value must each be ${MAX_TAG_LEN} characters or fewer.`,
+		};
+	}
+	if (
+		existingTags.some(
+			(tag, index) => tag === normalized && index !== excludeIndex,
+		)
+	) {
+		return { error: 'This tag already exists.' };
+	}
+	return { tag: normalized };
+}

frontend/src/components/TanStackTableView/TanStackCustomTableRow.tsx

@@ -1,7 +1,11 @@
-import { ComponentProps, memo } from 'react';
+import { ComponentProps, memo, useCallback, useLayoutEffect } from 'react';
 import { TableComponents } from 'react-virtuoso';
 import cx from 'classnames';
 
+import {
+	chromePerformanceTanstackTableBeginHover,
+	chromePerformanceMeasureTanstackTable,
+} from './perfDevtools';
 import TanStackRowCells from './TanStackRow';
 import {
 	useClearRowHovered,
@@ -10,18 +14,20 @@ import {
 import { FlatItem, TableRowContext } from './types';
 
 import tableStyles from './TanStackTable.module.scss';
+import { chromePerformanceNow } from 'lib/chromePerformanceDevTools';
 
-type VirtuosoTableRowProps<TData> = ComponentProps<
+type VirtuosoTableRowProps<TData, TItemKey = string> = ComponentProps<
 	NonNullable<
-		TableComponents<FlatItem<TData>, TableRowContext<TData>>['TableRow']
+		TableComponents<FlatItem<TData>, TableRowContext<TData, TItemKey>>['TableRow']
 	>
 >;
 
-function TanStackCustomTableRow<TData>({
+function TanStackCustomTableRow<TData, TItemKey = string>({
 	item,
 	context,
 	...props
-}: VirtuosoTableRowProps<TData>): JSX.Element {
+}: VirtuosoTableRowProps<TData, TItemKey>): JSX.Element {
+	const renderStart = chromePerformanceNow();
 	const rowId = item.row.id;
 	const rowData = item.row.original;
 
@@ -29,6 +35,23 @@ function TanStackCustomTableRow<TData>({
 	const setHovered = useSetRowHovered(rowId);
 	const clearHovered = useClearRowHovered(rowId);
 
+	const handleMouseEnter = useCallback((): void => {
+		chromePerformanceTanstackTableBeginHover(rowId);
+		setHovered();
+	}, [rowId, setHovered]);
+
+	useLayoutEffect(() => {
+		chromePerformanceMeasureTanstackTable('Row render', renderStart, {
+			track: 'Row render',
+			color: 'secondary',
+			tooltipText: 'Row render + commit',
+			properties: [
+				['rowId', rowId],
+				['kind', item.kind],
+			],
+		});
+	});
+
 	if (item.kind === 'expansion') {
 		return (
 			<tr {...props} className={tableStyles.tableRowExpansion}>
@@ -65,7 +88,7 @@ function TanStackCustomTableRow<TData>({
 			{...props}
 			className={rowClassName}
 			style={rowStyle}
-			onMouseEnter={setHovered}
+			onMouseEnter={handleMouseEnter}
 			onMouseLeave={clearHovered}
 		>
 			<TanStackRowCells
@@ -84,9 +107,9 @@ function TanStackCustomTableRow<TData>({
 // This looks overkill but ensures the table is stable and doesn't re-render on every change
 // If you add any new prop to context, remember to update this function
 // eslint-disable-next-line sonarjs/cognitive-complexity
-function areTableRowPropsEqual<TData>(
-	prev: Readonly<VirtuosoTableRowProps<TData>>,
-	next: Readonly<VirtuosoTableRowProps<TData>>,
+function areTableRowPropsEqual<TData, TItemKey = string>(
+	prev: Readonly<VirtuosoTableRowProps<TData, TItemKey>>,
+	next: Readonly<VirtuosoTableRowProps<TData, TItemKey>>,
 ): boolean {
 	if (prev.item.row.id !== next.item.row.id) {
 		return false;
@@ -141,7 +164,9 @@ function areTableRowPropsEqual<TData>(
 	return true;
 }
 
-export default memo(
-	TanStackCustomTableRow,
-	areTableRowPropsEqual,
-) as typeof TanStackCustomTableRow;
+export default memo(TanStackCustomTableRow, areTableRowPropsEqual as any) as <
+	TData,
+	TItemKey = string,
+>(
+	props: VirtuosoTableRowProps<TData, TItemKey>,
+) => JSX.Element;

frontend/src/components/TanStackTableView/TanStackHeaderRow.module.scss

@@ -2,10 +2,22 @@
 	position: sticky;
 	top: 0;
 	z-index: 2;
-	padding: var(--tanstack-cell-padding-top, 0.3rem)
-		var(--tanstack-cell-padding-right, 0.3rem)
-		var(--tanstack-cell-padding-bottom, 0.3rem)
-		var(--tanstack-cell-padding-left, 0.3rem);
+	padding: var(
+			--tanstack-cell-header-padding-top-override,
+			var(--tanstack-cell-padding-top, 0.3rem)
+		)
+		var(
+			--tanstack-cell-header-padding-right-override,
+			var(--tanstack-cell-padding-right, 0.3rem)
+		)
+		var(
+			--tanstack-cell-header-padding-bottom-override,
+			var(--tanstack-cell-padding-bottom, 0.3rem)
+		)
+		var(
+			--tanstack-cell-header-padding-left-override,
+			var(--tanstack-cell-padding-left, 0.3rem)
+		);
 	transform: translate3d(
 		var(--tanstack-header-translate-x, 0px),
 		var(--tanstack-header-translate-y, 0px),
@@ -239,6 +251,7 @@
 	text-overflow: ellipsis;
 	white-space: nowrap;
 	min-width: 0;
+	width: var(--tanstack-table-header-label-width);
 }
 
 .tanstackSortIndicator {

frontend/src/components/TanStackTableView/TanStackHoverTooltip.tsx

@@ -0,0 +1,30 @@
+import { useLayoutEffect, type ReactNode } from 'react';
+
+import { chromePerformanceTanstackTableEndHover } from './perfDevtools';
+import { useIsRowHovered } from './TanStackTableStateContext';
+import { TooltipSimple, TooltipSimpleProps } from '@signozhq/ui/tooltip';
+
+export type HoverTooltipProps = Omit<TooltipSimpleProps, 'open'> & {
+	rowId: string;
+	children: ReactNode;
+};
+
+export function TanStackHoverTooltip({
+	rowId,
+	children,
+	...tooltipProps
+}: HoverTooltipProps): JSX.Element {
+	const isHovered = useIsRowHovered(rowId);
+
+	useLayoutEffect(() => {
+		if (isHovered) {
+			chromePerformanceTanstackTableEndHover(rowId);
+		}
+	}, [isHovered, rowId]);
+
+	if (!isHovered) {
+		return <>{children}</>;
+	}
+
+	return <TooltipSimple {...tooltipProps}>{children}</TooltipSimple>;
+}

frontend/src/components/TanStackTableView/TanStackRow.tsx

@@ -8,23 +8,23 @@ import { TableRowContext } from './types';
 
 import tableStyles from './TanStackTable.module.scss';
 
-type TanStackRowCellsProps<TData> = {
+type TanStackRowCellsProps<TData, TItemKey = string> = {
 	row: TanStackRowModel<TData>;
-	context: TableRowContext<TData> | undefined;
+	context: TableRowContext<TData, TItemKey> | undefined;
 	itemKind: 'row' | 'expansion';
 	hasSingleColumn: boolean;
 	columnOrderKey: string;
 	columnVisibilityKey: string;
 };
 
-function TanStackRowCellsInner<TData>({
+function TanStackRowCellsInner<TData, TItemKey = string>({
 	row,
 	context,
 	itemKind,
 	hasSingleColumn,
 	columnOrderKey: _columnOrderKey,
 	columnVisibilityKey: _columnVisibilityKey,
-}: TanStackRowCellsProps<TData>): JSX.Element {
+}: TanStackRowCellsProps<TData, TItemKey>): JSX.Element {
 	const hasHovered = useIsRowHovered(row.id);
 	const rowData = row.original;
 	const visibleCells = row.getVisibleCells();
@@ -40,8 +40,10 @@ function TanStackRowCellsInner<TData>({
 
 	const handleClick = useCallback(
 		(event: MouseEvent<HTMLTableCellElement>) => {
+			// Fall back to an empty key so row clicks still fire for consumers
+			// that don't provide getRowKey (e.g. Logs Explorer / Live Logs).
 			const keyData = getRowKeyData?.(rowIndex);
-			const itemKey = keyData?.itemKey ?? '';
+			const itemKey = keyData?.itemKey ?? ('' as TItemKey);
 
 			// Handle ctrl+click or cmd+click (open in new tab)
 			if ((event.ctrlKey || event.metaKey) && onRowClickNewTab) {
@@ -131,6 +133,8 @@ function areRowCellsPropsEqual<TData>(
 const TanStackRowCells = memo(
 	TanStackRowCellsInner,
 	areRowCellsPropsEqual as any,
-) as <T>(props: TanStackRowCellsProps<T>) => JSX.Element;
+) as <T, TItemKey = string>(
+	props: TanStackRowCellsProps<T, TItemKey>,
+) => JSX.Element;
 
 export default TanStackRowCells;

frontend/src/components/TanStackTableView/TanStackTable.tsx

@@ -5,6 +5,7 @@ import {
 	useCallback,
 	useEffect,
 	useImperativeHandle,
+	useLayoutEffect,
 	useMemo,
 	useRef,
 } from 'react';
@@ -44,6 +45,7 @@ import {
 	TanStackTableHandle,
 	TanStackTableProps,
 } from './types';
+import { chromePerformanceMeasureTanstackTable } from './perfDevtools';
 import { useColumnDnd } from './useColumnDnd';
 import { useColumnHandlers } from './useColumnHandlers';
 import { useColumnState } from './useColumnState';
@@ -56,6 +58,7 @@ import { VirtuosoTableColGroup } from './VirtuosoTableColGroup';
 
 import tableStyles from './TanStackTable.module.scss';
 import viewStyles from './TanStackTableView.module.scss';
+import { chromePerformanceNow } from 'lib/chromePerformanceDevTools';
 
 const COLUMN_DND_AUTO_SCROLL = {
 	layoutShiftCompensation: false as const,
@@ -67,7 +70,7 @@ const INCREASE_VIEWPORT_BY = { top: 500, bottom: 500 };
 const noopColumnVisibility = (): void => {};
 
 // eslint-disable-next-line sonarjs/cognitive-complexity
-function TanStackTableInner<TData>(
+function TanStackTableInner<TData, TItemKey = string>(
 	{
 		data,
 		columns,
@@ -107,7 +110,7 @@ function TanStackTableInner<TData>(
 		suffixPaginationContent,
 		enableAlternatingRowColors,
 		disableVirtualScroll,
-	}: TanStackTableProps<TData>,
+	}: TanStackTableProps<TData, TItemKey>,
 	forwardedRef: React.ForwardedRef<TanStackTableHandle>,
 ): JSX.Element {
 	if (disableVirtualScroll && onEndReached) {
@@ -116,6 +119,8 @@ function TanStackTableInner<TData>(
 		);
 	}
 
+	const renderStart = chromePerformanceNow();
+
 	const virtuosoRef = useRef<TableVirtuosoHandle | null>(null);
 	const isDarkMode = useIsDarkMode();
 
@@ -193,7 +198,7 @@ function TanStackTableInner<TData>(
 		skeletonRowCount,
 	});
 
-	const { rowKeyData, getRowKeyData } = useRowKeyData({
+	const { rowKeyData, getRowKeyData } = useRowKeyData<TData, TItemKey>({
 		data: effectiveData,
 		isLoading,
 		getRowKey,
@@ -229,7 +234,7 @@ function TanStackTableInner<TData>(
 	const tanstackColumns = useMemo<ColumnDef<TData>[]>(
 		() =>
 			effectiveColumns.map((colDef) =>
-				buildTanstackColumnDef(colDef, isRowActive, getRowKeyData),
+				buildTanstackColumnDef<TData, TItemKey>(colDef, isRowActive, getRowKeyData),
 			),
 		[effectiveColumns, isRowActive, getRowKeyData],
 	);
@@ -344,6 +349,19 @@ function TanStackTableInner<TData>(
 
 	const visibleColumnsCount = table.getVisibleFlatColumns().length;
 
+	useLayoutEffect(() => {
+		chromePerformanceMeasureTanstackTable('Table render', renderStart, {
+			track: 'Table render',
+			color: 'primary',
+			tooltipText: 'TanStackTable render + commit',
+			properties: [
+				['rows', String(flatItems.length)],
+				['columns', String(visibleColumnsCount)],
+				['loading', String(isLoading)],
+			],
+		});
+	});
+
 	const columnOrderKey = useMemo(() => columnIds.join(','), [columnIds]);
 	const columnVisibilityKey = useMemo(
 		() =>
@@ -356,7 +374,7 @@ function TanStackTableInner<TData>(
 		[effectiveVisibility, columnIds],
 	);
 
-	const virtuosoContext = useMemo<TableRowContext<TData>>(
+	const virtuosoContext = useMemo<TableRowContext<TData, TItemKey>>(
 		() => ({
 			getRowStyle,
 			getRowClassName,
@@ -520,13 +538,15 @@ function TanStackTableInner<TData>(
 	);
 
 	type VirtuosoTableComponentProps = ComponentProps<
-		NonNullable<TableComponents<FlatItem<TData>, TableRowContext<TData>>['Table']>
+		NonNullable<
+			TableComponents<FlatItem<TData>, TableRowContext<TData, TItemKey>>['Table']
+		>
 	>;
 
 	// Use refs in virtuosoComponents to keep the component reference stable during resize
 	// This prevents Virtuoso from re-rendering all rows when columns are resized
 	const virtuosoComponents = useMemo(
-		() => ({
+		(): TableComponents<FlatItem<TData>, TableRowContext<TData, TItemKey>> => ({
 			Table: ({ style, children }: VirtuosoTableComponentProps): JSX.Element => (
 				<table className={tableStyles.tanStackTable} style={style}>
 					<VirtuosoTableColGroup
@@ -582,7 +602,7 @@ function TanStackTableInner<TData>(
 							</table>
 						</div>
 					) : (
-						<TableVirtuoso<FlatItem<TData>, TableRowContext<TData>>
+						<TableVirtuoso<FlatItem<TData>, TableRowContext<TData, TItemKey>>
 							className={virtuosoClassName}
 							ref={virtuosoRef}
 							{...restTableScrollerProps}
@@ -660,8 +680,11 @@ function TanStackTableInner<TData>(
 	);
 }
 
-const TanStackTableForward = forwardRef(TanStackTableInner) as <TData>(
-	props: TanStackTableProps<TData> & {
+const TanStackTableForward = forwardRef(TanStackTableInner) as <
+	TData,
+	TItemKey = string,
+>(
+	props: TanStackTableProps<TData, TItemKey> & {
 		ref?: React.Ref<TanStackTableHandle>;
 	},
 ) => JSX.Element;

frontend/src/components/TanStackTableView/__tests__/TanStackRow.test.tsx

@@ -57,6 +57,39 @@ describe('TanStackRowCells', () => {
 	});
 
 	it('calls onRowClick when a cell is clicked', async () => {
+		const user = userEvent.setup();
+		const onRowClick = jest.fn();
+		const ctx: TableRowContext<Row> = {
+			colCount: 1,
+			onRowClick,
+			getRowKeyData: () => ({ finalKey: 'r1', itemKey: 'r1' }),
+			hasSingleColumn: false,
+			columnOrderKey: '',
+			columnVisibilityKey: '',
+		};
+		const row = buildMockRow([{ id: 'body' }]);
+		render(
+			<table>
+				<tbody>
+					<tr>
+						<TanStackRowCells<Row>
+							row={row as never}
+							context={ctx}
+							itemKind="row"
+							hasSingleColumn={false}
+							columnOrderKey=""
+							columnVisibilityKey=""
+						/>
+					</tr>
+				</tbody>
+			</table>,
+		);
+		await user.click(screen.getAllByRole('cell')[0]);
+		expect(onRowClick).toHaveBeenCalledWith({ id: 'r1' }, 'r1');
+	});
+
+	it('fires onRowClick with empty itemKey when getRowKeyData is not provided', async () => {
+		// Mirrors Logs Explorer / Live Logs, which set onRowClick but no getRowKey.
 		const user = userEvent.setup();
 		const onRowClick = jest.fn();
 		const ctx: TableRowContext<Row> = {
@@ -84,7 +117,6 @@ describe('TanStackRowCells', () => {
 			</table>,
 		);
 		await user.click(screen.getAllByRole('cell')[0]);
-		// onRowClick receives (rowData, itemKey) - itemKey is empty when getRowKeyData not provided
 		expect(onRowClick).toHaveBeenCalledWith({ id: 'r1' }, '');
 	});
 
@@ -97,6 +129,7 @@ describe('TanStackRowCells', () => {
 			onRowClick,
 			onRowDeactivate,
 			isRowActive: () => true,
+			getRowKeyData: () => ({ finalKey: 'r1', itemKey: 'r1' }),
 			hasSingleColumn: false,
 			columnOrderKey: '',
 			columnVisibilityKey: '',
@@ -194,6 +227,7 @@ describe('TanStackRowCells', () => {
 				colCount: 1,
 				onRowClick,
 				onRowClickNewTab,
+				getRowKeyData: () => ({ finalKey: 'r1', itemKey: 'r1' }),
 				hasSingleColumn: false,
 				columnOrderKey: '',
 				columnVisibilityKey: '',
@@ -216,7 +250,7 @@ describe('TanStackRowCells', () => {
 				</table>,
 			);
 			fireEvent.click(screen.getAllByRole('cell')[0], { ctrlKey: true });
-			expect(onRowClickNewTab).toHaveBeenCalledWith({ id: 'r1' }, '');
+			expect(onRowClickNewTab).toHaveBeenCalledWith({ id: 'r1' }, 'r1');
 			expect(onRowClick).not.toHaveBeenCalled();
 		});
 
@@ -227,6 +261,7 @@ describe('TanStackRowCells', () => {
 				colCount: 1,
 				onRowClick,
 				onRowClickNewTab,
+				getRowKeyData: () => ({ finalKey: 'r1', itemKey: 'r1' }),
 				hasSingleColumn: false,
 				columnOrderKey: '',
 				columnVisibilityKey: '',
@@ -249,7 +284,7 @@ describe('TanStackRowCells', () => {
 				</table>,
 			);
 			fireEvent.click(screen.getAllByRole('cell')[0], { metaKey: true });
-			expect(onRowClickNewTab).toHaveBeenCalledWith({ id: 'r1' }, '');
+			expect(onRowClickNewTab).toHaveBeenCalledWith({ id: 'r1' }, 'r1');
 			expect(onRowClick).not.toHaveBeenCalled();
 		});
 
@@ -260,6 +295,7 @@ describe('TanStackRowCells', () => {
 				colCount: 1,
 				onRowClick,
 				onRowClickNewTab,
+				getRowKeyData: () => ({ finalKey: 'r1', itemKey: 'r1' }),
 				hasSingleColumn: false,
 				columnOrderKey: '',
 				columnVisibilityKey: '',

frontend/src/components/TanStackTableView/__tests__/TanStackTableView.test.tsx

@@ -614,6 +614,34 @@ describe('TanStackTableView Integration', () => {
 			);
 		});
 
+		it('calls onRowClick with object itemKey when getItemKey returns object', async () => {
+			type SelectionParams = { id: string; name: string };
+			const user = userEvent.setup();
+			const onRowClick = jest.fn<void, [unknown, SelectionParams]>();
+
+			renderTanStackTable<
+				(typeof import('./testUtils').defaultData)[0],
+				SelectionParams
+			>({
+				props: {
+					onRowClick,
+					getRowKey: (row) => row.id,
+					getItemKey: (row) => ({ id: row.id, name: row.name }),
+				},
+			});
+
+			await waitFor(() => {
+				expect(screen.getByText('Item 1')).toBeInTheDocument();
+			});
+
+			await user.click(screen.getByText('Item 1'));
+
+			expect(onRowClick).toHaveBeenCalledWith(
+				expect.objectContaining({ id: '1', name: 'Item 1' }),
+				{ id: '1', name: 'Item 1' },
+			);
+		});
+
 		it('applies active class when isRowActive returns true', async () => {
 			renderTanStackTable({
 				props: {

frontend/src/components/TanStackTableView/__tests__/testUtils.tsx

@@ -42,14 +42,14 @@ export const defaultData: TestRow[] = [
 	{ id: '3', name: 'Item 3', value: 300 },
 ];
 
-export type RenderTanStackTableOptions<T> = {
-	props?: Partial<TanStackTableProps<T>>;
+export type RenderTanStackTableOptions<T, TItemKey = string> = {
+	props?: Partial<TanStackTableProps<T, TItemKey>>;
 	queryParams?: Record<string, string>;
 	onUrlUpdate?: OnUrlUpdateFunction;
 };
 
-export function renderTanStackTable<T = TestRow>(
-	options: RenderTanStackTableOptions<T> = {},
+export function renderTanStackTable<T = TestRow, TItemKey = string>(
+	options: RenderTanStackTableOptions<T, TItemKey> = {},
 ): RenderResult {
 	const { props = {}, queryParams, onUrlUpdate } = options;
 
@@ -57,7 +57,7 @@ export function renderTanStackTable<T = TestRow>(
 		data: defaultData as unknown as T[],
 		columns: defaultColumns as unknown as TableColumnDef<T>[],
 		...props,
-	} as TanStackTableProps<T>;
+	} as TanStackTableProps<T, TItemKey>;
 
 	return render(
 		<NuqsTestingAdapter searchParams={queryParams} onUrlUpdate={onUrlUpdate}>
@@ -65,7 +65,7 @@ export function renderTanStackTable<T = TestRow>(
 				value={{ viewportHeight: 500, itemHeight: 50 }}
 			>
 				<TooltipProvider>
-					<TanStackTable<T> {...mergedProps} />
+					<TanStackTable<T, TItemKey> {...mergedProps} />
 				</TooltipProvider>
 			</VirtuosoMockContext.Provider>
 		</NuqsTestingAdapter>,

frontend/src/components/TanStackTableView/index.tsx

@@ -1,6 +1,8 @@
+import { TanStackHoverTooltip } from './TanStackHoverTooltip';
 import { TanStackTableBase } from './TanStackTable';
 import TanStackTableText from './TanStackTableText';
 
+export * from './TanStackHoverTooltip';
 export * from './TanStackTableStateContext';
 export * from './types';
 export * from './useCalculatedPageSize';
@@ -123,6 +125,22 @@ export * from './useTableParams';
  * />
  * ```
  *
+ * @example Object itemKey — use generic `TItemKey` when selection needs compound keys.
+ * ```tsx
+ * type SelectionParams = { id: string; cluster: string; namespace: string };
+ *
+ * <TanStackTable<Row, SelectionParams>
+ *   data={data}
+ *   columns={columns}
+ *   getRowKey={(row) => row.uid}
+ *   getItemKey={(row) => ({ id: row.name, cluster: row.cluster, namespace: row.namespace })}
+ *   onRowClick={(row, itemKey) => {
+ *     // itemKey is typed as SelectionParams
+ *     setSelection(itemKey);
+ *   }}
+ * />
+ * ```
+ *
  * @example Expandable rows. `renderExpandedRow` receives `(row, rowKey, groupMeta?)`.
  * ```tsx
  * <TanStackTable
@@ -258,6 +276,7 @@ export * from './useTableParams';
  */
 const TanStackTable = Object.assign(TanStackTableBase, {
 	Text: TanStackTableText,
+	HoverTooltip: TanStackHoverTooltip,
 });
 
 export default TanStackTable;

frontend/src/components/TanStackTableView/perfDevtools.ts

@@ -0,0 +1,35 @@
+import {
+	createChromePerformanceInteractionTracker,
+	chromePerformanceMeasure,
+	ChromePerformanceTrackEntryOptions,
+} from 'lib/chromePerformanceDevTools';
+
+const TABLE_TRACK_GROUP = 'SigNoz Table';
+
+export function chromePerformanceMeasureTanstackTable(
+	name: string,
+	start: number,
+	{
+		track,
+		color,
+		tooltipText,
+		properties,
+	}: Omit<ChromePerformanceTrackEntryOptions, 'trackGroup'>,
+): void {
+	chromePerformanceMeasure(name, start, {
+		trackGroup: TABLE_TRACK_GROUP,
+		track,
+		color,
+		tooltipText,
+		properties,
+	});
+}
+
+const hoverTracker = createChromePerformanceInteractionTracker(
+	TABLE_TRACK_GROUP,
+	'Hover',
+	'Row hover',
+);
+
+export const chromePerformanceTanstackTableBeginHover = hoverTracker.begin;
+export const chromePerformanceTanstackTableEndHover = hoverTracker.end;

frontend/src/components/TanStackTableView/types.ts

@@ -21,20 +21,19 @@ export type TableCellContext<TData, TValue> = {
 	value: TValue;
 	isActive: boolean;
 	rowIndex: number;
+	rowId: string;
 	isExpanded: boolean;
 	canExpand: boolean;
 	toggleExpanded: () => void;
-	/** Business/selection key for the row */
-	itemKey: string;
 	/** Group metadata when row is part of a grouped view */
 	groupMeta?: Record<string, string>;
 };
 
-export type RowKeyData = {
+export type RowKeyData<TItemKey = string> = {
 	/** Final unique key (with duplicate suffix if needed) */
 	finalKey: string;
 	/** Business/selection key */
-	itemKey: string;
+	itemKey: TItemKey;
 	/** Group metadata */
 	groupMeta?: Record<string, string>;
 };
@@ -82,14 +81,14 @@ export type FlatItem<TData> =
 	| { kind: 'row'; row: TanStackRowType<TData> }
 	| { kind: 'expansion'; row: TanStackRowType<TData> };
 
-export type TableRowContext<TData> = {
+export type TableRowContext<TData, TItemKey = string> = {
 	getRowStyle?: (row: TData) => CSSProperties;
 	getRowClassName?: (row: TData) => string;
 	isRowActive?: (row: TData) => boolean;
 	renderRowActions?: (row: TData) => ReactNode;
-	onRowClick?: (row: TData, itemKey: string) => void;
+	onRowClick?: (row: TData, itemKey: TItemKey) => void;
 	/** Called when ctrl+click or cmd+click on a row */
-	onRowClickNewTab?: (row: TData, itemKey: string) => void;
+	onRowClickNewTab?: (row: TData, itemKey: TItemKey) => void;
 	onRowDeactivate?: () => void;
 	renderExpandedRow?: (
 		row: TData,
@@ -97,7 +96,7 @@ export type TableRowContext<TData> = {
 		groupMeta?: Record<string, string>,
 	) => ReactNode;
 	/** Get key data for a row by index */
-	getRowKeyData?: (index: number) => RowKeyData | undefined;
+	getRowKeyData?: (index: number) => RowKeyData<TItemKey> | undefined;
 	colCount: number;
 	isDarkMode?: boolean;
 	/** When set, primitive cell output (string/number/boolean) is wrapped with typography + line-clamp (see `plainTextCellLineClamp` on the table). */
@@ -147,7 +146,7 @@ export type TanstackTableQueryParamsConfig = {
 	expanded?: string;
 };
 
-export type TanStackTableProps<TData> = {
+export type TanStackTableProps<TData, TItemKey = string> = {
 	data: TData[];
 	columns: TableColumnDef<TData>[];
 	/** Storage key for column state persistence (visibility, sizing, ordering). When set, enables unified column management. */
@@ -172,7 +171,7 @@ export type TanStackTableProps<TData> = {
 	 * When set, enables automatic duplicate key detection and group-aware key composition. */
 	getRowKey?: (row: TData) => string;
 	/** Function to get the business/selection key. Defaults to getRowKey result. */
-	getItemKey?: (row: TData) => string;
+	getItemKey?: (row: TData) => TItemKey;
 	/** When set, enables group-aware key generation (prefixes rowKey with group values). */
 	groupBy?: Array<{ key: string }>;
 	/** Extract group metadata from a row. Required when groupBy is set. */
@@ -181,9 +180,9 @@ export type TanStackTableProps<TData> = {
 	getRowClassName?: (row: TData) => string;
 	isRowActive?: (row: TData) => boolean;
 	renderRowActions?: (row: TData) => ReactNode;
-	onRowClick?: (row: TData, itemKey: string) => void;
+	onRowClick?: (row: TData, itemKey: TItemKey) => void;
 	/** Called when ctrl+click or cmd+click on a row */
-	onRowClickNewTab?: (row: TData, itemKey: string) => void;
+	onRowClickNewTab?: (row: TData, itemKey: TItemKey) => void;
 	onRowDeactivate?: () => void;
 	activeRowIndex?: number;
 	renderExpandedRow?: (