fix(authz): add missing allowed/deniedPermissions to test mocks

Update UseAuthZResult mocks to include the new `allowed` and
`deniedPermissions` fields. Also fix oxlint warnings in useAuthZ.tsx.

.github/CODEOWNERS

@@ -109,10 +109,7 @@ go.mod @therealpandey
 /pkg/modules/role/ @therealpandey
 /pkg/types/coretypes/ @therealpandey @vikrantgupta25
 
-/frontend/src/hooks/useAuthZ/ @H4ad
-/frontend/src/components/GuardAuthZ/ @H4ad
-/frontend/src/components/AuthZTooltip/ @H4ad
-/frontend/src/components/createGuardedRoute/ @H4ad
+/frontend/src/lib/authz/ @H4ad
 /frontend/src/container/RolesSettings/ @H4ad
 /frontend/src/components/RolesSelect/ @H4ad
 /frontend/src/pages/MembersSettings/ @H4ad

cmd/authz.go

@@ -12,7 +12,7 @@ import (
 	"github.com/spf13/cobra"
 )
 
-const permissionsTypePath = "frontend/src/hooks/useAuthZ/permissions.type.ts"
+const permissionsTypePath = "frontend/src/lib/authz/hooks/useAuthZ/permissions.type.ts"
 
 var permissionsTypeTemplate = template.Must(template.New("permissions").Parse(
 	`// AUTO GENERATED FILE - DO NOT EDIT - GENERATED BY cmd/enterprise/*.go generate authz

docs/api/openapi.yml

@@ -618,13 +618,6 @@ components:
         provider:
           $ref: '#/components/schemas/AuthtypesAuthNProvider'
       type: object
-    AuthtypesPatchableRole:
-      properties:
-        description:
-          type: string
-      required:
-      - description
-      type: object
     AuthtypesPostableAuthDomain:
       properties:
         config:
@@ -2536,22 +2529,6 @@ components:
       - resource
       - selectors
       type: object
-    CoretypesPatchableObjects:
-      properties:
-        additions:
-          items:
-            $ref: '#/components/schemas/CoretypesObjectGroup'
-          nullable: true
-          type: array
-        deletions:
-          items:
-            $ref: '#/components/schemas/CoretypesObjectGroup'
-          nullable: true
-          type: array
-      required:
-      - additions
-      - deletions
-      type: object
     CoretypesResourceRef:
       properties:
         kind:
@@ -2737,6 +2714,14 @@ components:
           type: string
         dashboardName:
           type: string
+        filterBy:
+          items:
+            type: string
+          type: array
+        groupBy:
+          items:
+            type: string
+          type: array
         panelId:
           type: string
         panelName:
@@ -3586,7 +3571,7 @@ components:
       - user
       - system
       - integration
-      type: object
+      type: string
     DashboardtypesSpanGaps:
       properties:
         fillLessThan:
@@ -5412,6 +5397,9 @@ components:
           type: string
         id:
           type: string
+        ingestedSamples:
+          minimum: 0
+          type: integer
         ingestedSeries:
           minimum: 0
           type: integer
@@ -5424,9 +5412,9 @@ components:
           $ref: '#/components/schemas/MetricreductionruletypesMatchType'
         metricName:
           type: string
-        reductionPercent:
-          format: double
-          type: number
+        retainedSamples:
+          minimum: 0
+          type: integer
         retainedSeries:
           minimum: 0
           type: integer
@@ -5444,7 +5432,8 @@ components:
       - active
       - ingestedSeries
       - retainedSeries
-      - reductionPercent
+      - ingestedSamples
+      - retainedSamples
       type: object
     MetricreductionruletypesGettableReductionRulePreview:
       properties:
@@ -5487,15 +5476,23 @@ components:
         estimatedMonthlySavingsUsd:
           format: double
           type: number
+        ingestedSamples:
+          minimum: 0
+          type: integer
         ingestedSeries:
           minimum: 0
           type: integer
+        retainedSamples:
+          minimum: 0
+          type: integer
         retainedSeries:
           minimum: 0
           type: integer
       required:
       - ingestedSeries
       - retainedSeries
+      - ingestedSamples
+      - retainedSamples
       - estimatedMonthlySavingsUsd
       type: object
     MetricreductionruletypesGettableReductionRules:
@@ -5561,7 +5558,6 @@ components:
       - metric
       - ingested_volume
       - reduced_volume
-      - reduction
       - last_updated
       type: string
     MetricreductionruletypesUpdatableReductionRule:
@@ -11825,68 +11821,6 @@ paths:
       summary: Get role
       tags:
       - role
-    patch:
-      deprecated: true
-      description: This endpoint patches a role
-      operationId: PatchRole
-      parameters:
-      - in: path
-        name: id
-        required: true
-        schema:
-          type: string
-      requestBody:
-        content:
-          application/json:
-            schema:
-              $ref: '#/components/schemas/AuthtypesPatchableRole'
-      responses:
-        "204":
-          description: No Content
-        "401":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Unauthorized
-        "403":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Forbidden
-        "404":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Not Found
-        "451":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Unavailable For Legal Reasons
-        "500":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Internal Server Error
-        "501":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Not Implemented
-      security:
-      - api_key:
-        - role:update
-      - tokenizer:
-        - role:update
-      summary: Patch role
-      tags:
-      - role
     put:
       deprecated: false
       description: This endpoint updates a role
@@ -11949,158 +11883,6 @@ paths:
       summary: Update role
       tags:
       - role
-  /api/v1/roles/{id}/relations/{relation}/objects:
-    get:
-      deprecated: false
-      description: Gets all objects connected to the specified role via a given relation
-        type
-      operationId: GetObjects
-      parameters:
-      - in: path
-        name: id
-        required: true
-        schema:
-          type: string
-      - in: path
-        name: relation
-        required: true
-        schema:
-          type: string
-      responses:
-        "200":
-          content:
-            application/json:
-              schema:
-                properties:
-                  data:
-                    items:
-                      $ref: '#/components/schemas/CoretypesObjectGroup'
-                    type: array
-                  status:
-                    type: string
-                required:
-                - status
-                - data
-                type: object
-          description: OK
-        "401":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Unauthorized
-        "403":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Forbidden
-        "404":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Not Found
-        "451":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Unavailable For Legal Reasons
-        "500":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Internal Server Error
-        "501":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Not Implemented
-      security:
-      - api_key:
-        - role:read
-      - tokenizer:
-        - role:read
-      summary: Get objects for a role by relation
-      tags:
-      - role
-    patch:
-      deprecated: true
-      description: Patches the objects connected to the specified role via a given
-        relation type
-      operationId: PatchObjects
-      parameters:
-      - in: path
-        name: id
-        required: true
-        schema:
-          type: string
-      - in: path
-        name: relation
-        required: true
-        schema:
-          type: string
-      requestBody:
-        content:
-          application/json:
-            schema:
-              $ref: '#/components/schemas/CoretypesPatchableObjects'
-      responses:
-        "204":
-          description: No Content
-        "400":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Bad Request
-        "401":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Unauthorized
-        "403":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Forbidden
-        "404":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Not Found
-        "451":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Unavailable For Legal Reasons
-        "500":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Internal Server Error
-        "501":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Not Implemented
-      security:
-      - api_key:
-        - role:update
-      - tokenizer:
-        - role:update
-      summary: Patch objects for a role by relation
-      tags:
-      - role
   /api/v1/route_policies:
     get:
       deprecated: false

ee/authz/openfgaauthz/provider.go

@@ -260,40 +260,6 @@ func (provider *provider) GetWithTransactionGroups(ctx context.Context, orgID va
 	return authtypes.MakeRoleWithTransactionGroups(role, transactionGroups), nil
 }
 
-func (provider *provider) GetObjects(ctx context.Context, orgID valuer.UUID, id valuer.UUID, relation authtypes.Relation) ([]*coretypes.Object, 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())
-	}
-
-	storableRole, err := provider.store.Get(ctx, orgID, id)
-	if err != nil {
-		return nil, err
-	}
-
-	objects := make([]*coretypes.Object, 0)
-	for _, objectType := range provider.registry.Types() {
-		if coretypes.ErrIfVerbNotValidForType(relation.Verb, objectType) != nil {
-			continue
-		}
-
-		resourceObjects, err := provider.
-			ListObjects(
-				ctx,
-				authtypes.MustNewSubject(coretypes.NewResourceRole(), storableRole.Name, orgID, &coretypes.VerbAssignee),
-				relation,
-				objectType,
-			)
-		if err != nil {
-			return nil, err
-		}
-
-		objects = append(objects, resourceObjects...)
-	}
-
-	return objects, nil
-}
-
 func (provider *provider) Update(ctx context.Context, orgID valuer.UUID, updatedRole *authtypes.RoleWithTransactionGroups) error {
 	_, err := provider.licensing.GetActive(ctx, orgID)
 	if err != nil {
@@ -324,39 +290,6 @@ func (provider *provider) Update(ctx context.Context, orgID valuer.UUID, updated
 	return provider.store.Update(ctx, orgID, updatedRole.Role)
 }
 
-func (provider *provider) Patch(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())
-	}
-
-	return provider.store.Update(ctx, orgID, role)
-}
-
-func (provider *provider) PatchObjects(ctx context.Context, orgID valuer.UUID, name string, relation authtypes.Relation, additions, deletions []*coretypes.Object) 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())
-	}
-
-	additionTuples, err := authtypes.GetAdditionTuples(name, orgID, relation, additions)
-	if err != nil {
-		return err
-	}
-
-	deletionTuples, err := authtypes.GetDeletionTuples(name, orgID, relation, deletions)
-	if err != nil {
-		return err
-	}
-
-	err = provider.Write(ctx, additionTuples, deletionTuples)
-	if err != nil {
-		return err
-	}
-
-	return nil
-}
-
 func (provider *provider) Delete(ctx context.Context, orgID valuer.UUID, id valuer.UUID) error {
 	_, err := provider.licensing.GetActive(ctx, orgID)
 	if err != nil {

ee/modules/dashboard/impldashboard/module.go

@@ -286,7 +286,7 @@ func (module *module) Get(ctx context.Context, orgID valuer.UUID, id valuer.UUID
 	return module.pkgDashboardModule.Get(ctx, orgID, id)
 }
 
-func (module *module) GetByMetricNames(ctx context.Context, orgID valuer.UUID, metricNames []string) (map[string][]map[string]string, error) {
+func (module *module) GetByMetricNames(ctx context.Context, orgID valuer.UUID, metricNames []string) (map[string][]dashboardtypes.DashboardPanelRef, error) {
 	return module.pkgDashboardModule.GetByMetricNames(ctx, orgID, metricNames)
 }
 

ee/modules/metricreductionrule/implmetricreductionrule/clickhouse.go

@@ -22,6 +22,8 @@ var (
 
 const timeSeriesBucketMilli = int64(time.Hour / time.Millisecond)
 
+const sampleBucketExpr = "toInt64(toUnixTimestamp(toStartOfInterval(toDateTime(intDiv(unix_milli, 1000)), toIntervalMinute(10)))) * 1000 AS bucket"
+
 type volumeRow struct {
 	MetricName string
 	Ingested   uint64
@@ -289,12 +291,9 @@ func (c *clickhouse) RankByVolume(ctx context.Context, metricNames []string, eff
 	}
 	ctx = c.withThreads(ctx)
 
-	orderExpr := "ingested"
-	switch orderBy {
-	case metricreductionruletypes.OrderByReducedVolume:
-		orderExpr = "reduced"
-	case metricreductionruletypes.OrderByReduction:
-		orderExpr = "if(ingested = 0, 0, (toFloat64(ingested) - toFloat64(reduced)) / toFloat64(ingested))"
+	orderExpr := "ifNull(i.samples, 0)"
+	if orderBy == metricreductionruletypes.OrderByReducedVolume {
+		orderExpr = "if(ifNull(d.samples, 0) = 0 OR ifNull(d.samples, 0) > ifNull(i.samples, 0), ifNull(i.samples, 0), ifNull(d.samples, 0))"
 	}
 	direction := "ASC"
 	if order == metricreductionruletypes.OrderDesc {
@@ -310,17 +309,17 @@ func (c *clickhouse) RankByVolume(ctx context.Context, metricNames []string, eff
 	sb.From("(SELECT arrayJoin(" + sb.Var(metricNames) + ") AS metric_name) AS base")
 	sb.JoinWithOption(
 		sqlbuilder.LeftJoin,
-		"(SELECT metric_name, uniq(fingerprint) AS cnt FROM "+ingestedTable+" WHERE has("+sb.Var(metricNames)+", metric_name) AND unix_milli >= "+sb.Var(startMs)+" AND unix_milli < "+sb.Var(endMs)+" AND "+strictEffectiveFrom(sb, metricNames, effectiveFrom)+" GROUP BY metric_name) AS i",
+		"(SELECT metric_name, uniq(fingerprint) AS cnt, count() AS samples FROM "+ingestedTable+" WHERE has("+sb.Var(metricNames)+", metric_name) AND unix_milli >= "+sb.Var(startMs)+" AND unix_milli < "+sb.Var(endMs)+" AND "+strictEffectiveFrom(sb, metricNames, effectiveFrom)+" GROUP BY metric_name) AS i",
 		"base.metric_name = i.metric_name",
 	)
 	// Reduced series are spread across two type-specific tables; union the per-table distinct
 	// reduced_fingerprints and sum per metric (a metric only lands in the table matching its type).
 	sb.JoinWithOption(
 		sqlbuilder.LeftJoin,
-		"(SELECT metric_name, sum(cnt) AS cnt FROM ("+
-			"SELECT metric_name, uniq(reduced_fingerprint) AS cnt FROM "+reducedLast+" WHERE has("+sb.Var(metricNames)+", metric_name) AND unix_milli >= "+sb.Var(startMs)+" AND unix_milli < "+sb.Var(endMs)+" AND "+strictEffectiveFrom(sb, metricNames, effectiveFrom)+" GROUP BY metric_name"+
+		"(SELECT metric_name, sum(cnt) AS cnt, sum(samples) AS samples FROM ("+
+			"SELECT metric_name, uniq(reduced_fingerprint) AS cnt, uniq(reduced_fingerprint, unix_milli) AS samples FROM "+reducedLast+" WHERE has("+sb.Var(metricNames)+", metric_name) AND unix_milli >= "+sb.Var(startMs)+" AND unix_milli < "+sb.Var(endMs)+" AND "+strictEffectiveFrom(sb, metricNames, effectiveFrom)+" GROUP BY metric_name"+
 			" UNION ALL "+
-			"SELECT metric_name, uniq(reduced_fingerprint) AS cnt FROM "+reducedSum+" WHERE has("+sb.Var(metricNames)+", metric_name) AND unix_milli >= "+sb.Var(startMs)+" AND unix_milli < "+sb.Var(endMs)+" AND "+strictEffectiveFrom(sb, metricNames, effectiveFrom)+" GROUP BY metric_name"+
+			"SELECT metric_name, uniq(reduced_fingerprint) AS cnt, uniq(reduced_fingerprint, unix_milli) AS samples FROM "+reducedSum+" WHERE has("+sb.Var(metricNames)+", metric_name) AND unix_milli >= "+sb.Var(startMs)+" AND unix_milli < "+sb.Var(endMs)+" AND "+strictEffectiveFrom(sb, metricNames, effectiveFrom)+" GROUP BY metric_name"+
 			") GROUP BY metric_name) AS d",
 		"base.metric_name = d.metric_name",
 	)
@@ -347,122 +346,186 @@ func (c *clickhouse) RankByVolume(ctx context.Context, metricNames []string, eff
 	return out, rows.Err()
 }
 
-func (c *clickhouse) SampleVolume(ctx context.Context, metricNames []string, effectiveFrom map[string]int64, startMs, endMs int64) (uint64, uint64, error) {
+func (c *clickhouse) SampleVolumeByMetric(ctx context.Context, metricNames []string, effectiveFrom map[string]int64, startMs, endMs int64) (map[string]volumeRow, error) {
 	if len(metricNames) == 0 {
-		return 0, 0, nil
+		return map[string]volumeRow{}, nil
 	}
 	ctx = c.withThreads(ctx)
 
-	ingested, err := c.countRawSamples(ctx, telemetrymetrics.DBName+"."+telemetrymetrics.SamplesV4BufferTableName, metricNames, effectiveFrom, startMs, endMs)
-	if err != nil {
-		return 0, 0, err
-	}
-
-	last, err := c.countReducedSamples(ctx, telemetrymetrics.DBName+"."+telemetrymetrics.SamplesV4ReducedLastTableName, metricNames, effectiveFrom, startMs, endMs)
-	if err != nil {
-		return 0, 0, err
-	}
-	sum, err := c.countReducedSamples(ctx, telemetrymetrics.DBName+"."+telemetrymetrics.SamplesV4ReducedSumTableName, metricNames, effectiveFrom, startMs, endMs)
-	if err != nil {
-		return 0, 0, err
-	}
-
-	return ingested, min(last+sum, ingested), nil
-}
-
-func (c *clickhouse) countRawSamples(ctx context.Context, table string, metricNames []string, effectiveFrom map[string]int64, startMs, endMs int64) (uint64, error) {
-	names := make([]any, len(metricNames))
-	for i, name := range metricNames {
-		names[i] = name
-	}
-
-	sb := sqlbuilder.NewSelectBuilder()
-	sb.Select("count()")
-	sb.From(table)
-	conds := []string{sb.In("metric_name", names...), sb.GE("unix_milli", startMs), sb.LT("unix_milli", endMs)}
-	if len(effectiveFrom) > 0 {
-		conds = append(conds, strictEffectiveFrom(sb, metricNames, effectiveFrom))
-	}
-	sb.Where(conds...)
-
-	query, args := sb.BuildWithFlavor(sqlbuilder.ClickHouse)
-	var count uint64
-	if err := c.telemetryStore.ClickhouseDB().QueryRow(ctx, query, args...).Scan(&count); err != nil {
-		return 0, errors.WrapInternalf(err, errors.CodeInternal, "failed to count ingested samples")
-	}
-	return count, nil
-}
-
-func (c *clickhouse) countReducedSamples(ctx context.Context, table string, metricNames []string, effectiveFrom map[string]int64, startMs, endMs int64) (uint64, error) {
-	names := make([]any, len(metricNames))
-	for i, name := range metricNames {
-		names[i] = name
-	}
-
-	sb := sqlbuilder.NewSelectBuilder()
-	// Reduced tables key the series on reduced_fingerprint (not fingerprint); dedupe ReplacingMergeTree recomputes.
-	sb.Select("uniq(reduced_fingerprint, unix_milli)")
-	sb.From(table)
-	conds := []string{sb.In("metric_name", names...), sb.GE("unix_milli", startMs), sb.LT("unix_milli", endMs)}
-	if len(effectiveFrom) > 0 {
-		conds = append(conds, strictEffectiveFrom(sb, metricNames, effectiveFrom))
-	}
-	sb.Where(conds...)
-
-	query, args := sb.BuildWithFlavor(sqlbuilder.ClickHouse)
-	var count uint64
-	if err := c.telemetryStore.ClickhouseDB().QueryRow(ctx, query, args...).Scan(&count); err != nil {
-		return 0, errors.WrapInternalf(err, errors.CodeInternal, "failed to count reduced samples")
-	}
-	return count, nil
-}
-
-// SeriesTimeseries returns ingested vs reduced series per 60s bucket from the samples tables, gated
-// to each metric's strict effective_from (see strictEffectiveFrom).
-func (c *clickhouse) SeriesTimeseries(ctx context.Context, allMetrics, reducedMetrics []string, effectiveFrom map[string]int64, startMs, endMs int64) ([]volumePoint, error) {
-	if len(allMetrics) == 0 {
-		return []volumePoint{}, nil
-	}
-	ctx = c.withThreads(ctx)
-
-	ingested, err := c.ingestedSeriesByBucket(ctx, allMetrics, effectiveFrom, startMs, endMs)
+	ingested, err := c.countSamplesByMetric(ctx, telemetrymetrics.DBName+"."+telemetrymetrics.SamplesV4BufferTableName, "count()", metricNames, effectiveFrom, startMs, endMs)
 	if err != nil {
 		return nil, err
 	}
 
-	retained := make(map[int64]uint64)
-	if len(reducedMetrics) > 0 {
-		reduced, err := c.reducedSeriesByBucket(ctx, reducedMetrics, effectiveFrom, startMs, endMs)
+	last, err := c.countSamplesByMetric(ctx, telemetrymetrics.DBName+"."+telemetrymetrics.SamplesV4ReducedLastTableName, "uniq(reduced_fingerprint, unix_milli)", metricNames, effectiveFrom, startMs, endMs)
+	if err != nil {
+		return nil, err
+	}
+	sum, err := c.countSamplesByMetric(ctx, telemetrymetrics.DBName+"."+telemetrymetrics.SamplesV4ReducedSumTableName, "uniq(reduced_fingerprint, unix_milli)", metricNames, effectiveFrom, startMs, endMs)
+	if err != nil {
+		return nil, err
+	}
+
+	out := make(map[string]volumeRow, len(metricNames))
+	for _, name := range metricNames {
+		out[name] = volumeRow{MetricName: name, Ingested: ingested[name], Reduced: last[name] + sum[name]}
+	}
+	return out, nil
+}
+
+func (c *clickhouse) countSamplesByMetric(ctx context.Context, table, countExpr string, metricNames []string, effectiveFrom map[string]int64, startMs, endMs int64) (map[string]uint64, error) {
+	names := make([]any, len(metricNames))
+	for i, name := range metricNames {
+		names[i] = name
+	}
+
+	sb := sqlbuilder.NewSelectBuilder()
+	sb.Select("metric_name", countExpr)
+	sb.From(table)
+	conds := []string{
+		sb.In("metric_name", names...),
+		sb.GE("unix_milli", startMs),
+		sb.LT("unix_milli", endMs),
+	}
+	if len(effectiveFrom) > 0 {
+		conds = append(conds, strictEffectiveFrom(sb, metricNames, effectiveFrom))
+	}
+	sb.Where(conds...)
+	sb.GroupBy("metric_name")
+
+	query, args := sb.BuildWithFlavor(sqlbuilder.ClickHouse)
+	rows, err := c.telemetryStore.ClickhouseDB().Query(ctx, query, args...)
+	if err != nil {
+		return nil, errors.WrapInternalf(err, errors.CodeInternal, "failed to count samples")
+	}
+	defer rows.Close()
+
+	out := make(map[string]uint64, len(metricNames))
+	for rows.Next() {
+		var (
+			metricName string
+			count      uint64
+		)
+		if err := rows.Scan(&metricName, &count); err != nil {
+			return nil, errors.WrapInternalf(err, errors.CodeInternal, "failed to scan series count")
+		}
+		out[metricName] = count
+	}
+	return out, rows.Err()
+}
+
+func (c *clickhouse) TotalVolume(ctx context.Context, startMs, endMs int64) (uint64, uint64, error) {
+	ctx = c.withThreads(ctx)
+
+	sb := sqlbuilder.NewSelectBuilder()
+	sb.Select("uniq(fingerprint)", "count()")
+	sb.From(telemetrymetrics.DBName + "." + telemetrymetrics.SamplesV4BufferTableName)
+	sb.Where(sb.GE("unix_milli", startMs), sb.LT("unix_milli", endMs))
+
+	query, args := sb.BuildWithFlavor(sqlbuilder.ClickHouse)
+	var series, samples uint64
+	if err := c.telemetryStore.ClickhouseDB().QueryRow(ctx, query, args...).Scan(&series, &samples); err != nil {
+		return 0, 0, errors.WrapInternalf(err, errors.CodeInternal, "failed to count total ingested volume")
+	}
+	return series, samples, nil
+}
+
+func (c *clickhouse) SampleTimeseries(ctx context.Context, ruledMetrics []string, effectiveFrom map[string]int64, startMs, endMs int64) ([]volumePoint, error) {
+	ctx = c.withThreads(ctx)
+
+	ingested, err := c.totalSamplesByBucket(ctx, startMs, endMs)
+	if err != nil {
+		return nil, err
+	}
+
+	ruledIngested := make(map[int64]uint64)
+	ruledRetained := make(map[int64]uint64)
+	if len(ruledMetrics) > 0 {
+		ruledIngested, err = c.ruledIngestedSamplesByBucket(ctx, ruledMetrics, effectiveFrom, startMs, endMs)
 		if err != nil {
 			return nil, err
 		}
-		for ts, count := range reduced {
-			retained[ts] += count
-		}
-	}
-	reducedSet := make(map[string]struct{}, len(reducedMetrics))
-	for _, name := range reducedMetrics {
-		reducedSet[name] = struct{}{}
-	}
-	nonReduced := make([]string, 0, len(allMetrics))
-	for _, name := range allMetrics {
-		if _, ok := reducedSet[name]; !ok {
-			nonReduced = append(nonReduced, name)
-		}
-	}
-	if len(nonReduced) > 0 {
-		nonReducedIngested, err := c.ingestedSeriesByBucket(ctx, nonReduced, effectiveFrom, startMs, endMs)
+		ruledRetained, err = c.ruledRetainedSamplesByBucket(ctx, ruledMetrics, effectiveFrom, startMs, endMs)
 		if err != nil {
 			return nil, err
 		}
-		for ts, count := range nonReducedIngested {
-			retained[ts] += count
+	}
+
+	retained := make(map[int64]uint64, len(ingested))
+	for ts, total := range ingested {
+		shed := uint64(0)
+		if ri := ruledIngested[ts]; ri > ruledRetained[ts] {
+			shed = ri - ruledRetained[ts]
+		}
+		if total > shed {
+			retained[ts] = total - shed
+		} else {
+			retained[ts] = 0
 		}
 	}
 
 	return mergeVolumePoints(ingested, retained), nil
 }
 
+func (c *clickhouse) totalSamplesByBucket(ctx context.Context, startMs, endMs int64) (map[int64]uint64, error) {
+	sb := sqlbuilder.NewSelectBuilder()
+	sb.Select(sampleBucketExpr, "count()")
+	sb.From(telemetrymetrics.DBName + "." + telemetrymetrics.SamplesV4BufferTableName)
+	sb.Where(sb.GE("unix_milli", startMs), sb.LT("unix_milli", endMs))
+	sb.GroupBy("bucket")
+
+	return c.scanBuckets(ctx, sb)
+}
+
+func (c *clickhouse) ruledIngestedSamplesByBucket(ctx context.Context, metricNames []string, effectiveFrom map[string]int64, startMs, endMs int64) (map[int64]uint64, error) {
+	names := make([]any, len(metricNames))
+	for i, name := range metricNames {
+		names[i] = name
+	}
+
+	sb := sqlbuilder.NewSelectBuilder()
+	sb.Select(sampleBucketExpr, "count()")
+	sb.From(telemetrymetrics.DBName + "." + telemetrymetrics.SamplesV4BufferTableName)
+	conds := []string{sb.In("metric_name", names...), sb.GE("unix_milli", startMs), sb.LT("unix_milli", endMs)}
+	if len(effectiveFrom) > 0 {
+		conds = append(conds, strictEffectiveFrom(sb, metricNames, effectiveFrom))
+	}
+	sb.Where(conds...)
+	sb.GroupBy("bucket")
+
+	return c.scanBuckets(ctx, sb)
+}
+
+// reduced 60s rows are versioned by computed_at, so count distinct buckets.
+func (c *clickhouse) ruledRetainedSamplesByBucket(ctx context.Context, metricNames []string, effectiveFrom map[string]int64, startMs, endMs int64) (map[int64]uint64, error) {
+	out := make(map[int64]uint64)
+	for _, table := range []string{telemetrymetrics.SamplesV4ReducedLastTableName, telemetrymetrics.SamplesV4ReducedSumTableName} {
+		names := make([]any, len(metricNames))
+		for i, name := range metricNames {
+			names[i] = name
+		}
+
+		sb := sqlbuilder.NewSelectBuilder()
+		sb.Select(sampleBucketExpr, "uniq(reduced_fingerprint, unix_milli)")
+		sb.From(telemetrymetrics.DBName + "." + table)
+		conds := []string{sb.In("metric_name", names...), sb.GE("unix_milli", startMs), sb.LT("unix_milli", endMs)}
+		if len(effectiveFrom) > 0 {
+			conds = append(conds, strictEffectiveFrom(sb, metricNames, effectiveFrom))
+		}
+		sb.Where(conds...)
+		sb.GroupBy("bucket")
+
+		counts, err := c.scanBuckets(ctx, sb)
+		if err != nil {
+			return nil, err
+		}
+		for ts, count := range counts {
+			out[ts] += count
+		}
+	}
+	return out, nil
+}
+
 func mergeVolumePoints(ingested, reduced map[int64]uint64) []volumePoint {
 	buckets := make(map[int64]struct{}, len(ingested))
 	for ts := range ingested {
@@ -488,60 +551,6 @@ func mergeVolumePoints(ingested, reduced map[int64]uint64) []volumePoint {
 	return points
 }
 
-// ingestedSeriesByBucket counts distinct raw fingerprints per hourly bucket from the samples buffer.
-func (c *clickhouse) ingestedSeriesByBucket(ctx context.Context, metricNames []string, effectiveFrom map[string]int64, startMs, endMs int64) (map[int64]uint64, error) {
-	names := make([]any, len(metricNames))
-	for i, name := range metricNames {
-		names[i] = name
-	}
-
-	sb := sqlbuilder.NewSelectBuilder()
-	bucketExpr := "toInt64(toUnixTimestamp(toStartOfInterval(toDateTime(intDiv(unix_milli, 1000)), toIntervalHour(1)))) * 1000 AS bucket"
-	sb.Select(bucketExpr, "uniq(fingerprint)")
-	sb.From(telemetrymetrics.DBName + "." + telemetrymetrics.SamplesV4BufferTableName)
-	conds := []string{sb.In("metric_name", names...), sb.GE("unix_milli", startMs), sb.LT("unix_milli", endMs)}
-	if len(effectiveFrom) > 0 {
-		conds = append(conds, strictEffectiveFrom(sb, metricNames, effectiveFrom))
-	}
-	sb.Where(conds...)
-	sb.GroupBy("bucket")
-
-	return c.scanBuckets(ctx, sb)
-}
-
-// reducedSeriesByBucket counts distinct reduced_fingerprints per hourly bucket, summed across the two
-// reduced sample tables (a metric only lands in the table matching its type, so per-bucket sums are
-// exact).
-func (c *clickhouse) reducedSeriesByBucket(ctx context.Context, metricNames []string, effectiveFrom map[string]int64, startMs, endMs int64) (map[int64]uint64, error) {
-	out := make(map[int64]uint64)
-	for _, table := range []string{telemetrymetrics.SamplesV4ReducedLastTableName, telemetrymetrics.SamplesV4ReducedSumTableName} {
-		names := make([]any, len(metricNames))
-		for i, name := range metricNames {
-			names[i] = name
-		}
-
-		sb := sqlbuilder.NewSelectBuilder()
-		bucketExpr := "toInt64(toUnixTimestamp(toStartOfInterval(toDateTime(intDiv(unix_milli, 1000)), toIntervalHour(1)))) * 1000 AS bucket"
-		sb.Select(bucketExpr, "uniq(reduced_fingerprint)")
-		sb.From(telemetrymetrics.DBName + "." + table)
-		conds := []string{sb.In("metric_name", names...), sb.GE("unix_milli", startMs), sb.LT("unix_milli", endMs)}
-		if len(effectiveFrom) > 0 {
-			conds = append(conds, strictEffectiveFrom(sb, metricNames, effectiveFrom))
-		}
-		sb.Where(conds...)
-		sb.GroupBy("bucket")
-
-		counts, err := c.scanBuckets(ctx, sb)
-		if err != nil {
-			return nil, err
-		}
-		for ts, count := range counts {
-			out[ts] += count
-		}
-	}
-	return out, nil
-}
-
 func (c *clickhouse) scanBuckets(ctx context.Context, sb *sqlbuilder.SelectBuilder) (map[int64]uint64, error) {
 	query, args := sb.BuildWithFlavor(sqlbuilder.ClickHouse)
 	rows, err := c.telemetryStore.ClickhouseDB().Query(ctx, query, args...)

ee/modules/metricreductionrule/implmetricreductionrule/module.go

@@ -4,7 +4,6 @@ import (
 	"context"
 	"log/slog"
 	"sort"
-	"strings"
 	"time"
 
 	"github.com/SigNoz/signoz/pkg/errors"
@@ -28,9 +27,16 @@ import (
 
 const (
 	// effectiveFromMargin delays effective_from so the collector picks up the synced rule before it
-	// goes live; it must be >= the collector's rule-refresh interval (see signoz-otel-collector#839).
-	effectiveFromMargin    = 5 * time.Minute
-	defaultPreviewLookback = 24 * time.Hour
+	// goes live; it must be >= the collector's rule-refresh interval (~2m worst case,
+	// see signoz-otel-collector#839).
+	effectiveFromMargin = 2 * time.Minute
+	// uiActivationDelay keeps a rule shown as "pending" in the UI for a while after it goes live to
+	// the collector, so the user doesn't see "active" before reduced data is actually flowing. The
+	// user-facing pending window is effectiveFromMargin + uiActivationDelay (~5m).
+	uiActivationDelay      = 3 * time.Minute
+	defaultPreviewLookback = 1 * time.Hour
+	statsLookback          = 1 * time.Hour
+	timeseriesLookback     = 6 * time.Hour
 
 	pricePerMillionSamplesUSD = 0.1
 	monthDuration             = 30 * 24 * time.Hour
@@ -80,7 +86,7 @@ func (m *module) List(ctx context.Context, orgID valuer.UUID, params *metricredu
 	}
 
 	now := time.Now()
-	startMs := now.Add(-defaultPreviewLookback).UnixMilli()
+	startMs := now.Add(-statsLookback).UnixMilli()
 	endMs := now.UnixMilli()
 
 	switch params.OrderBy {
@@ -107,10 +113,14 @@ func (m *module) listSortedByColumn(ctx context.Context, orgID valuer.UUID, para
 	if err != nil {
 		return nil, err
 	}
+	sampleVolumes, err := m.ch.SampleVolumeByMetric(ctx, metricNames, effectiveFrom, startMs, endMs)
+	if err != nil {
+		return nil, err
+	}
 
 	rules := make([]metricreductionruletypes.GettableReductionRule, 0, len(domainRules))
 	for _, rule := range domainRules {
-		rules = append(rules, withVolume(toGettableReductionRule(rule), volumes[rule.MetricName]))
+		rules = append(rules, withVolume(toGettableReductionRule(rule), volumes[rule.MetricName], sampleVolumes[rule.MetricName]))
 	}
 
 	return &metricreductionruletypes.GettableReductionRules{Rules: rules, Total: total}, nil
@@ -139,13 +149,24 @@ func (m *module) listSortedByVolume(ctx context.Context, orgID valuer.UUID, para
 		return nil, err
 	}
 
+	pageMetricNames := make([]string, 0, len(ranked))
+	for _, row := range ranked {
+		pageMetricNames = append(pageMetricNames, row.MetricName)
+	}
+
+	// TODO(srikanthccv): do we need to run this query? can we just get the same from RankByVolume?
+	sampleVolumes, err := m.ch.SampleVolumeByMetric(ctx, pageMetricNames, effectiveFrom, startMs, endMs)
+	if err != nil {
+		return nil, err
+	}
+
 	rules := make([]metricreductionruletypes.GettableReductionRule, 0, len(ranked))
 	for _, row := range ranked {
 		rule, ok := ruleByMetric[row.MetricName]
 		if !ok {
 			continue
 		}
-		rules = append(rules, withVolume(toGettableReductionRule(rule), row))
+		rules = append(rules, withVolume(toGettableReductionRule(rule), row, sampleVolumes[row.MetricName]))
 	}
 
 	return &metricreductionruletypes.GettableReductionRules{Rules: rules, Total: total}, nil
@@ -288,20 +309,17 @@ func (m *module) Stats(ctx context.Context, orgID valuer.UUID) (*metricreduction
 	}
 
 	now := time.Now()
-	startMs := now.Add(-defaultPreviewLookback).UnixMilli()
+	startMs := now.Add(-statsLookback).UnixMilli()
 	endMs := now.UnixMilli()
 
-	allRules, total, err := m.store.List(ctx, orgID, &metricreductionruletypes.ListReductionRulesParams{})
+	rules, _, err := m.store.List(ctx, orgID, &metricreductionruletypes.ListReductionRulesParams{})
 	if err != nil {
 		return nil, err
 	}
-	if total == 0 {
-		return &metricreductionruletypes.GettableReductionRuleStats{}, nil
-	}
 
-	metricNames := make([]string, len(allRules))
-	effectiveFrom := make(map[string]int64, len(allRules))
-	for i, rule := range allRules {
+	metricNames := make([]string, len(rules))
+	effectiveFrom := make(map[string]int64, len(rules))
+	for i, rule := range rules {
 		metricNames[i] = rule.MetricName
 		effectiveFrom[rule.MetricName] = rule.EffectiveFrom.UnixMilli()
 	}
@@ -310,31 +328,43 @@ func (m *module) Stats(ctx context.Context, orgID valuer.UUID) (*metricreduction
 	if err != nil {
 		return nil, err
 	}
-	var ingestedSeries, retainedSeries uint64
-	reducedMetricNames := make([]string, 0, len(volumes))
-	reducedEffectiveFrom := make(map[string]int64, len(volumes))
-	for name, volume := range volumes {
-		ingestedSeries += volume.Ingested
-		retained := effectiveRetained(volume.Ingested, volume.Reduced)
-		retainedSeries += retained
-		if retained < volume.Ingested {
-			reducedMetricNames = append(reducedMetricNames, name)
-			reducedEffectiveFrom[name] = effectiveFrom[name]
-		}
+	var ruledIngestedSeries, ruledRetainedSeries uint64
+	for _, volume := range volumes {
+		ruledIngestedSeries += volume.Ingested
+		ruledRetainedSeries += effectiveRetained(volume.Ingested, volume.Reduced)
 	}
 
-	ingestedSamples, reducedSamples, err := m.ch.SampleVolume(ctx, reducedMetricNames, reducedEffectiveFrom, startMs, endMs)
+	sampleVolumes, err := m.ch.SampleVolumeByMetric(ctx, metricNames, effectiveFrom, startMs, endMs)
+	if err != nil {
+		return nil, err
+	}
+	var ruledIngestedSamples, ruledRetainedSamples uint64
+	for _, sv := range sampleVolumes {
+		ruledIngestedSamples += sv.Ingested
+		ruledRetainedSamples += effectiveRetained(sv.Ingested, sv.Reduced)
+	}
+
+	totalSeries, totalSamples, err := m.ch.TotalVolume(ctx, startMs, endMs)
 	if err != nil {
 		return nil, err
 	}
 
 	return &metricreductionruletypes.GettableReductionRuleStats{
-		IngestedSeries:             ingestedSeries,
-		RetainedSeries:             retainedSeries,
-		EstimatedMonthlySavingsUsd: monthlySavingsUSD(ingestedSamples, reducedSamples, startMs, endMs),
+		IngestedSeries:             totalSeries,
+		RetainedSeries:             clampSub(totalSeries, ruledIngestedSeries-ruledRetainedSeries),
+		IngestedSamples:            totalSamples,
+		RetainedSamples:            clampSub(totalSamples, ruledIngestedSamples-ruledRetainedSamples),
+		EstimatedMonthlySavingsUsd: monthlySavingsUSD(ruledIngestedSamples, ruledRetainedSamples, startMs, endMs),
 	}, nil
 }
 
+func clampSub(a, b uint64) uint64 {
+	if a < b {
+		return 0
+	}
+	return a - b
+}
+
 // monthlySavingsUSD extrapolates the windowed sample reduction to a monthly figure at the per-sample
 // list price. Ingested is gated to effective_from upstream, so pre-activation hours don't inflate it.
 func monthlySavingsUSD(ingestedSamples, reducedSamples uint64, startMs, endMs int64) float64 {
@@ -352,7 +382,7 @@ func (m *module) Timeseries(ctx context.Context, orgID valuer.UUID) (*querybuild
 	}
 
 	now := time.Now()
-	startMs := now.Add(-defaultPreviewLookback).UnixMilli()
+	startMs := now.Add(-timeseriesLookback).UnixMilli()
 	endMs := now.UnixMilli()
 
 	allRules, _, err := m.store.List(ctx, orgID, &metricreductionruletypes.ListReductionRulesParams{})
@@ -366,18 +396,7 @@ func (m *module) Timeseries(ctx context.Context, orgID valuer.UUID) (*querybuild
 		effectiveFrom[rule.MetricName] = rule.EffectiveFrom.UnixMilli()
 	}
 
-	volumes, err := m.ch.VolumeByMetric(ctx, metricNames, effectiveFrom, startMs, endMs)
-	if err != nil {
-		return nil, err
-	}
-	reducedNames := make([]string, 0, len(volumes))
-	for name, volume := range volumes {
-		if effectiveRetained(volume.Ingested, volume.Reduced) < volume.Ingested {
-			reducedNames = append(reducedNames, name)
-		}
-	}
-
-	points, err := m.ch.SeriesTimeseries(ctx, metricNames, reducedNames, effectiveFrom, startMs, endMs)
+	points, err := m.ch.SampleTimeseries(ctx, metricNames, effectiveFrom, startMs, endMs)
 	if err != nil {
 		return nil, err
 	}
@@ -414,7 +433,7 @@ func buildVolumeTimeseries(points []volumePoint) *querybuildertypesv5.QueryRange
 }
 
 func (m *module) validateMetricForReduction(ctx context.Context, orgID valuer.UUID, metricName string) error {
-	lastSeen, err := m.metadataStore.FetchLastSeenInfoMulti(ctx, metricName)
+	lastSeen, err := m.metadataStore.FetchLastSeenInfoMulti(ctx, orgID, metricName)
 	if err != nil {
 		return err
 	}
@@ -447,12 +466,12 @@ func (m *module) relatedAssetImpact(ctx context.Context, orgID valuer.UUID, metr
 		m.logger.WarnContext(ctx, "failed to fetch related dashboards for reduction preview", slog.String("metric_name", metricName), errors.Attr(err))
 	} else {
 		for _, item := range dashboards[metricName] {
-			usedLabels := append(splitCSV(item["group_by"]), splitCSV(item["filter_by"])...)
+			usedLabels := append(append([]string{}, item.GroupBy...), item.FilterBy...)
 			affected = append(affected, metricreductionruletypes.AffectedAsset{
 				Type:           metricreductionruletypes.AssetTypeDashboard,
-				ID:             item["dashboard_id"],
-				Name:           item["dashboard_name"],
-				Widget:         &metricreductionruletypes.AffectedWidget{ID: item["widget_id"], Name: item["widget_name"]},
+				ID:             item.DashboardID,
+				Name:           item.DashboardName,
+				Widget:         &metricreductionruletypes.AffectedWidget{ID: item.PanelID, Name: item.PanelName},
 				ImpactedLabels: intersectLabels(usedLabels, droppedSet),
 			})
 		}
@@ -482,7 +501,7 @@ func toGettableReductionRule(rule *metricreductionruletypes.ReductionRule) metri
 		MatchType:     rule.MatchType,
 		Labels:        rule.Labels,
 		EffectiveFrom: rule.EffectiveFrom,
-		Active:        !rule.EffectiveFrom.After(time.Now()),
+		Active:        !rule.EffectiveFrom.Add(uiActivationDelay).After(time.Now()),
 	}
 }
 
@@ -493,12 +512,11 @@ func effectiveRetained(ingested, reduced uint64) uint64 {
 	return reduced
 }
 
-func withVolume(rule metricreductionruletypes.GettableReductionRule, volume volumeRow) metricreductionruletypes.GettableReductionRule {
-	rule.IngestedSeries = volume.Ingested
-	rule.RetainedSeries = effectiveRetained(volume.Ingested, volume.Reduced)
-	if volume.Ingested > 0 {
-		rule.ReductionPercent = (1 - float64(rule.RetainedSeries)/float64(volume.Ingested)) * 100
-	}
+func withVolume(rule metricreductionruletypes.GettableReductionRule, series volumeRow, samples volumeRow) metricreductionruletypes.GettableReductionRule {
+	rule.IngestedSeries = series.Ingested
+	rule.RetainedSeries = effectiveRetained(series.Ingested, series.Reduced)
+	rule.IngestedSamples = samples.Ingested
+	rule.RetainedSamples = effectiveRetained(samples.Ingested, samples.Reduced)
 	return rule
 }
 
@@ -518,13 +536,6 @@ func intersectLabels(keys []string, droppedSet map[string]struct{}) []string {
 	return out
 }
 
-func splitCSV(s string) []string {
-	if s == "" {
-		return nil
-	}
-	return strings.Split(s, ",")
-}
-
 func resolveDroppedKept(matchType metricreductionruletypes.MatchType, ruleLabels, keys []string) (dropped, kept []string) {
 	ruleSet := make(map[string]struct{}, len(ruleLabels))
 	for _, l := range ruleLabels {

ee/modules/metricreductionrule/implmetricreductionrule/store.go

@@ -35,7 +35,7 @@ func (s *store) List(ctx context.Context, orgID valuer.UUID, params *metricreduc
 		Where("org_id = ?", orgID).
 		Order(column + " " + direction)
 	if params.Search != "" {
-		query = query.Where("metric_name LIKE ?", "%"+params.Search+"%")
+		query = query.Where("metric_name LIKE ? ESCAPE '\\'", "%"+s.sqlstore.Formatter().EscapeLikePattern(params.Search)+"%")
 	}
 	if params.MetricName != "" {
 		query = query.Where("metric_name = ?", params.MetricName)

ee/query-service/app/server.go

@@ -64,6 +64,7 @@ func NewServer(config signoz.Config, signoz *signoz.SigNoz) (*Server, error) {
 		signoz.Prometheus,
 		signoz.TelemetryStore.Cluster(),
 		signoz.Cache,
+		signoz.Flagger,
 		nil,
 	)
 

frontend/__mocks__/lib/env.ts

@@ -0,0 +1,3 @@
+export const IS_DEV = false;
+export const IS_PROD = true;
+export const MODE = 'test';

frontend/jest.config.ts

@@ -29,6 +29,7 @@ const config: Config.InitialOptions = {
 		'^constants/env$': '<rootDir>/__mocks__/env.ts',
 		'^src/constants/env$': '<rootDir>/__mocks__/env.ts',
 		'^@signozhq/icons$': '<rootDir>/__mocks__/signozhqIconsMock.tsx',
+		'^lib/env$': '<rootDir>/__mocks__/lib/env.ts',
 		'^test-mocks/(.*)$': '<rootDir>/__mocks__/$1',
 		'^react-syntax-highlighter/dist/esm/(.*)$':
 			'<rootDir>/node_modules/react-syntax-highlighter/dist/cjs/$1',

frontend/pnpm-lock.yaml

@@ -432,6 +432,9 @@ importers:
       '@typescript/native-preview':
         specifier: 7.0.0-dev.20260430.1
         version: 7.0.0-dev.20260430.1
+      babel-plugin-transform-import-meta:
+        specifier: ^2.3.3
+        version: 2.3.3(@babel/core@7.29.0)
       eslint-plugin-sonarjs:
         specifier: 4.0.2
         version: 4.0.2(eslint@10.2.1(jiti@2.6.1))
@@ -4089,6 +4092,11 @@ packages:
   babel-plugin-syntax-jsx@6.18.0:
     resolution: {integrity: sha512-qrPaCSo9c8RHNRHIotaufGbuOBN8rtdC4QrrFFc43vyWCCz7Kl7GL1PGaXtMGQZUXrkCjNEgxDfmAuAabr/rlw==}
 
+  babel-plugin-transform-import-meta@2.3.3:
+    resolution: {integrity: sha512-bbh30qz1m6ZU1ybJoNOhA2zaDvmeXMnGNBMVMDOJ1Fni4+wMBoy/j7MTRVmqAUCIcy54/rEnr9VEBsfcgbpm3Q==}
+    peerDependencies:
+      '@babel/core': ^7.10.0
+
   babel-preset-current-node-syntax@1.2.0:
     resolution: {integrity: sha512-E/VlAEzRrsLEb2+dv8yp3bo4scof3l9nR4lrld+Iy5NyVqgVYUJnDAmunkhPMisRI32Qc4iRiz425d8vM++2fg==}
     peerDependencies:
@@ -12997,6 +13005,12 @@ snapshots:
 
   babel-plugin-syntax-jsx@6.18.0: {}
 
+  babel-plugin-transform-import-meta@2.3.3(@babel/core@7.29.0):
+    dependencies:
+      '@babel/core': 7.29.0
+      '@babel/template': 7.28.6
+      tslib: 2.8.1
+
   babel-preset-current-node-syntax@1.2.0(@babel/core@7.29.0):
     dependencies:
       '@babel/core': 7.29.0

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

@@ -18,19 +18,13 @@ import type {
 } from 'react-query';
 
 import type {
-	AuthtypesPatchableRoleDTO,
 	AuthtypesPostableRoleDTO,
 	AuthtypesUpdatableRoleDTO,
-	CoretypesPatchableObjectsDTO,
 	CreateRole201,
 	DeleteRolePathParameters,
-	GetObjects200,
-	GetObjectsPathParameters,
 	GetRole200,
 	GetRolePathParameters,
 	ListRoles200,
-	PatchObjectsPathParameters,
-	PatchRolePathParameters,
 	RenderErrorResponseDTO,
 	UpdateRolePathParameters,
 } from '../sigNoz.schemas';
@@ -365,107 +359,6 @@ export const invalidateGetRole = async (
 	return queryClient;
 };
 
-/**
- * This endpoint patches a role
- * @deprecated
- * @summary Patch role
- */
-export const patchRole = (
-	{ id }: PatchRolePathParameters,
-	authtypesPatchableRoleDTO?: BodyType<AuthtypesPatchableRoleDTO>,
-	signal?: AbortSignal,
-) => {
-	return GeneratedAPIInstance<void>({
-		url: `/api/v1/roles/${id}`,
-		method: 'PATCH',
-		headers: { 'Content-Type': 'application/json' },
-		data: authtypesPatchableRoleDTO,
-		signal,
-	});
-};
-
-export const getPatchRoleMutationOptions = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown,
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof patchRole>>,
-		TError,
-		{
-			pathParams: PatchRolePathParameters;
-			data?: BodyType<AuthtypesPatchableRoleDTO>;
-		},
-		TContext
-	>;
-}): UseMutationOptions<
-	Awaited<ReturnType<typeof patchRole>>,
-	TError,
-	{
-		pathParams: PatchRolePathParameters;
-		data?: BodyType<AuthtypesPatchableRoleDTO>;
-	},
-	TContext
-> => {
-	const mutationKey = ['patchRole'];
-	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 patchRole>>,
-		{
-			pathParams: PatchRolePathParameters;
-			data?: BodyType<AuthtypesPatchableRoleDTO>;
-		}
-	> = (props) => {
-		const { pathParams, data } = props ?? {};
-
-		return patchRole(pathParams, data);
-	};
-
-	return { mutationFn, ...mutationOptions };
-};
-
-export type PatchRoleMutationResult = NonNullable<
-	Awaited<ReturnType<typeof patchRole>>
->;
-export type PatchRoleMutationBody =
-	| BodyType<AuthtypesPatchableRoleDTO>
-	| undefined;
-export type PatchRoleMutationError = ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @deprecated
- * @summary Patch role
- */
-export const usePatchRole = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown,
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof patchRole>>,
-		TError,
-		{
-			pathParams: PatchRolePathParameters;
-			data?: BodyType<AuthtypesPatchableRoleDTO>;
-		},
-		TContext
-	>;
-}): UseMutationResult<
-	Awaited<ReturnType<typeof patchRole>>,
-	TError,
-	{
-		pathParams: PatchRolePathParameters;
-		data?: BodyType<AuthtypesPatchableRoleDTO>;
-	},
-	TContext
-> => {
-	return useMutation(getPatchRoleMutationOptions(options));
-};
 /**
  * This endpoint updates a role
  * @summary Update role
@@ -565,205 +458,3 @@ export const useUpdateRole = <
 > => {
 	return useMutation(getUpdateRoleMutationOptions(options));
 };
-/**
- * Gets all objects connected to the specified role via a given relation type
- * @summary Get objects for a role by relation
- */
-export const getObjects = (
-	{ id, relation }: GetObjectsPathParameters,
-	signal?: AbortSignal,
-) => {
-	return GeneratedAPIInstance<GetObjects200>({
-		url: `/api/v1/roles/${id}/relations/${relation}/objects`,
-		method: 'GET',
-		signal,
-	});
-};
-
-export const getGetObjectsQueryKey = ({
-	id,
-	relation,
-}: GetObjectsPathParameters) => {
-	return [`/api/v1/roles/${id}/relations/${relation}/objects`] as const;
-};
-
-export const getGetObjectsQueryOptions = <
-	TData = Awaited<ReturnType<typeof getObjects>>,
-	TError = ErrorType<RenderErrorResponseDTO>,
->(
-	{ id, relation }: GetObjectsPathParameters,
-	options?: {
-		query?: UseQueryOptions<
-			Awaited<ReturnType<typeof getObjects>>,
-			TError,
-			TData
-		>;
-	},
-) => {
-	const { query: queryOptions } = options ?? {};
-
-	const queryKey =
-		queryOptions?.queryKey ?? getGetObjectsQueryKey({ id, relation });
-
-	const queryFn: QueryFunction<Awaited<ReturnType<typeof getObjects>>> = ({
-		signal,
-	}) => getObjects({ id, relation }, signal);
-
-	return {
-		queryKey,
-		queryFn,
-		enabled: !!(id && relation),
-		...queryOptions,
-	} as UseQueryOptions<Awaited<ReturnType<typeof getObjects>>, TError, TData> & {
-		queryKey: QueryKey;
-	};
-};
-
-export type GetObjectsQueryResult = NonNullable<
-	Awaited<ReturnType<typeof getObjects>>
->;
-export type GetObjectsQueryError = ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary Get objects for a role by relation
- */
-
-export function useGetObjects<
-	TData = Awaited<ReturnType<typeof getObjects>>,
-	TError = ErrorType<RenderErrorResponseDTO>,
->(
-	{ id, relation }: GetObjectsPathParameters,
-	options?: {
-		query?: UseQueryOptions<
-			Awaited<ReturnType<typeof getObjects>>,
-			TError,
-			TData
-		>;
-	},
-): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
-	const queryOptions = getGetObjectsQueryOptions({ id, relation }, options);
-
-	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
-		queryKey: QueryKey;
-	};
-
-	return { ...query, queryKey: queryOptions.queryKey };
-}
-
-/**
- * @summary Get objects for a role by relation
- */
-export const invalidateGetObjects = async (
-	queryClient: QueryClient,
-	{ id, relation }: GetObjectsPathParameters,
-	options?: InvalidateOptions,
-): Promise<QueryClient> => {
-	await queryClient.invalidateQueries(
-		{ queryKey: getGetObjectsQueryKey({ id, relation }) },
-		options,
-	);
-
-	return queryClient;
-};
-
-/**
- * Patches the objects connected to the specified role via a given relation type
- * @deprecated
- * @summary Patch objects for a role by relation
- */
-export const patchObjects = (
-	{ id, relation }: PatchObjectsPathParameters,
-	coretypesPatchableObjectsDTO?: BodyType<CoretypesPatchableObjectsDTO>,
-	signal?: AbortSignal,
-) => {
-	return GeneratedAPIInstance<void>({
-		url: `/api/v1/roles/${id}/relations/${relation}/objects`,
-		method: 'PATCH',
-		headers: { 'Content-Type': 'application/json' },
-		data: coretypesPatchableObjectsDTO,
-		signal,
-	});
-};
-
-export const getPatchObjectsMutationOptions = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown,
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof patchObjects>>,
-		TError,
-		{
-			pathParams: PatchObjectsPathParameters;
-			data?: BodyType<CoretypesPatchableObjectsDTO>;
-		},
-		TContext
-	>;
-}): UseMutationOptions<
-	Awaited<ReturnType<typeof patchObjects>>,
-	TError,
-	{
-		pathParams: PatchObjectsPathParameters;
-		data?: BodyType<CoretypesPatchableObjectsDTO>;
-	},
-	TContext
-> => {
-	const mutationKey = ['patchObjects'];
-	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 patchObjects>>,
-		{
-			pathParams: PatchObjectsPathParameters;
-			data?: BodyType<CoretypesPatchableObjectsDTO>;
-		}
-	> = (props) => {
-		const { pathParams, data } = props ?? {};
-
-		return patchObjects(pathParams, data);
-	};
-
-	return { mutationFn, ...mutationOptions };
-};
-
-export type PatchObjectsMutationResult = NonNullable<
-	Awaited<ReturnType<typeof patchObjects>>
->;
-export type PatchObjectsMutationBody =
-	| BodyType<CoretypesPatchableObjectsDTO>
-	| undefined;
-export type PatchObjectsMutationError = ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @deprecated
- * @summary Patch objects for a role by relation
- */
-export const usePatchObjects = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown,
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof patchObjects>>,
-		TError,
-		{
-			pathParams: PatchObjectsPathParameters;
-			data?: BodyType<CoretypesPatchableObjectsDTO>;
-		},
-		TContext
-	>;
-}): UseMutationResult<
-	Awaited<ReturnType<typeof patchObjects>>,
-	TError,
-	{
-		pathParams: PatchObjectsPathParameters;
-		data?: BodyType<CoretypesPatchableObjectsDTO>;
-	},
-	TContext
-> => {
-	return useMutation(getPatchObjectsMutationOptions(options));
-};

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

@@ -2230,13 +2230,6 @@ export interface AuthtypesOrgSessionContextDTO {
 	warning?: ErrorsJSONDTO;
 }
 
-export interface AuthtypesPatchableRoleDTO {
-	/**
-	 * @type string
-	 */
-	description: string;
-}
-
 export interface AuthtypesPostableAuthDomainDTO {
 	config?: AuthtypesAuthDomainConfigDTO;
 	/**
@@ -3249,17 +3242,6 @@ export interface CommonJSONRefDTO {
 	$ref?: string;
 }
 
-export interface CoretypesPatchableObjectsDTO {
-	/**
-	 * @type array,null
-	 */
-	additions: CoretypesObjectGroupDTO[] | null;
-	/**
-	 * @type array,null
-	 */
-	deletions: CoretypesObjectGroupDTO[] | null;
-}
-
 export interface DashboardGridItemDTO {
 	content?: CommonJSONRefDTO;
 	/**
@@ -3995,6 +3977,14 @@ export interface DashboardtypesDashboardPanelRefDTO {
 	 * @type string
 	 */
 	dashboardName: string;
+	/**
+	 * @type array
+	 */
+	filterBy?: string[];
+	/**
+	 * @type array
+	 */
+	groupBy?: string[];
 	/**
 	 * @type string
 	 */
@@ -6919,6 +6909,11 @@ export interface MetricreductionruletypesGettableReductionRuleDTO {
 	 * @type string
 	 */
 	id: string;
+	/**
+	 * @type integer
+	 * @minimum 0
+	 */
+	ingestedSamples: number;
 	/**
 	 * @type integer
 	 * @minimum 0
@@ -6934,10 +6929,10 @@ export interface MetricreductionruletypesGettableReductionRuleDTO {
 	 */
 	metricName: string;
 	/**
-	 * @type number
-	 * @format double
+	 * @type integer
+	 * @minimum 0
 	 */
-	reductionPercent: number;
+	retainedSamples: number;
 	/**
 	 * @type integer
 	 * @minimum 0
@@ -6996,11 +6991,21 @@ export interface MetricreductionruletypesGettableReductionRuleStatsDTO {
 	 * @format double
 	 */
 	estimatedMonthlySavingsUsd: number;
+	/**
+	 * @type integer
+	 * @minimum 0
+	 */
+	ingestedSamples: number;
 	/**
 	 * @type integer
 	 * @minimum 0
 	 */
 	ingestedSeries: number;
+	/**
+	 * @type integer
+	 * @minimum 0
+	 */
+	retainedSamples: number;
 	/**
 	 * @type integer
 	 * @minimum 0
@@ -7056,7 +7061,6 @@ export enum MetricreductionruletypesReductionRuleOrderByDTO {
 	metric = 'metric',
 	ingested_volume = 'ingested_volume',
 	reduced_volume = 'reduced_volume',
-	reduction = 'reduction',
 	last_updated = 'last_updated',
 }
 export interface MetricreductionruletypesUpdatableReductionRuleDTO {
@@ -10248,31 +10252,9 @@ export type GetRole200 = {
 	status: string;
 };
 
-export type PatchRolePathParameters = {
-	id: string;
-};
 export type UpdateRolePathParameters = {
 	id: string;
 };
-export type GetObjectsPathParameters = {
-	id: string;
-	relation: string;
-};
-export type GetObjects200 = {
-	/**
-	 * @type array
-	 */
-	data: CoretypesObjectGroupDTO[];
-	/**
-	 * @type string
-	 */
-	status: string;
-};
-
-export type PatchObjectsPathParameters = {
-	id: string;
-	relation: string;
-};
 export type GetAllRoutePolicies200 = {
 	/**
 	 * @type array

frontend/src/components/CreateServiceAccountModal/CreateServiceAccountModal.tsx

@@ -2,8 +2,8 @@ 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 'components/AuthZTooltip/AuthZTooltip';
-import { SACreatePermission } from 'hooks/useAuthZ/permissions/service-account.permissions';
+import AuthZTooltip from 'lib/authz/components/AuthZTooltip/AuthZTooltip';
+import { SACreatePermission } from 'lib/authz/hooks/useAuthZ/permissions/service-account.permissions';
 import { DialogFooter, DialogWrapper } from '@signozhq/ui/dialog';
 import { Input } from '@signozhq/ui/input';
 import { toast } from '@signozhq/ui/sonner';

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

@@ -11,7 +11,7 @@ import {
 
 import CreateServiceAccountModal from '../CreateServiceAccountModal';
 
-jest.mock('components/AuthZTooltip/AuthZTooltip', () => ({
+jest.mock('lib/authz/components/AuthZTooltip/AuthZTooltip', () => ({
 	__esModule: true,
 	default: ({
 		children,

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

@@ -11,7 +11,6 @@ import { Query, TagFilterItem } from 'types/api/queryBuilder/queryBuilderData';
 import { v4 as uuid } from 'uuid';
 
 import { isKeyMatch } from './utils';
-import { CheckedState } from '../../types';
 
 export const SELECTED_OPERATORS = [OPERATORS['='], 'in'];
 export const NON_SELECTED_OPERATORS = [OPERATORS['!='], 'not in', 'nin'];
@@ -149,7 +148,6 @@ export function applyCheckboxToggle({
 	value,
 	checked,
 	isOnlyOrAllClicked,
-	previousState,
 }: {
 	currentQuery: Query;
 	activeQueryIndex: number;
@@ -159,7 +157,6 @@ export function applyCheckboxToggle({
 	value: string;
 	checked: boolean;
 	isOnlyOrAllClicked: boolean;
-	previousState?: CheckedState;
 }): Query {
 	const activeItems =
 		currentQuery.builder.queryData?.[activeQueryIndex]?.filters?.items;
@@ -219,119 +216,49 @@ export function applyCheckboxToggle({
 			);
 			if (currentFilter) {
 				const runningOperator = currentFilter?.op;
-
-				// Indeterminate items get added to the existing operator (in or not in)
-				if (previousState === 'indeterminate') {
-					if (isArray(currentFilter.value)) {
-						const newFilter = {
-							...currentFilter,
-							value: [...currentFilter.value, value],
-						};
-						query.filters.items = query.filters.items.map((item) => {
-							if (isKeyMatch(item.key?.key, filter.attributeKey.key)) {
-								return newFilter;
-							}
-							return item;
-						});
-					} else {
-						const newFilter = {
-							...currentFilter,
-							value: [currentFilter.value as string, value],
-						};
-						query.filters.items = query.filters.items.map((item) => {
-							if (isKeyMatch(item.key?.key, filter.attributeKey.key)) {
-								return newFilter;
-							}
-							return item;
-						});
-					}
-				} else {
-					switch (runningOperator) {
-						case 'in':
-							if (checked) {
-								// if it's an IN operator then if we are checking another value it get's added to the
-								// filter clause. example -  key IN [value1, currentSelectedValue]
-								if (isArray(currentFilter.value)) {
-									const newFilter = {
-										...currentFilter,
-										value: [...currentFilter.value, value],
-									};
-									query.filters.items = query.filters.items.map((item) => {
-										if (isKeyMatch(item.key?.key, filter.attributeKey.key)) {
-											return newFilter;
-										}
-										return item;
-									});
-								} else {
-									// if the current state wasn't an array we make it one and add our value
-									const newFilter = {
-										...currentFilter,
-										value: [currentFilter.value as string, value],
-									};
-									query.filters.items = query.filters.items.map((item) => {
-										if (isKeyMatch(item.key?.key, filter.attributeKey.key)) {
-											return newFilter;
-										}
-										return item;
-									});
-								}
-							} 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)) {
-									const newFilter = {
-										...currentFilter,
-										value: currentFilter.value.filter((val) => val !== value),
-									};
-
-									if (newFilter.value.length === 0) {
-										query.filters.items = query.filters.items.filter(
-											(item) => !isKeyMatch(item.key?.key, filter.attributeKey.key),
-										);
-									} else {
-										query.filters.items = query.filters.items.map((item) => {
-											if (isKeyMatch(item.key?.key, filter.attributeKey.key)) {
-												return newFilter;
-											}
-											return item;
-										});
+				switch (runningOperator) {
+					case 'in':
+						if (checked) {
+							// if it's an IN operator then if we are checking another value it get's added to the
+							// filter clause. example -  key IN [value1, currentSelectedValue]
+							if (isArray(currentFilter.value)) {
+								const newFilter = {
+									...currentFilter,
+									value: [...currentFilter.value, value],
+								};
+								query.filters.items = query.filters.items.map((item) => {
+									if (isKeyMatch(item.key?.key, filter.attributeKey.key)) {
+										return newFilter;
 									}
-								} else {
-									// if not an array remove the whole thing altogether!
+									return item;
+								});
+							} else {
+								// if the current state wasn't an array we make it one and add our value
+								const newFilter = {
+									...currentFilter,
+									value: [currentFilter.value as string, value],
+								};
+								query.filters.items = query.filters.items.map((item) => {
+									if (isKeyMatch(item.key?.key, filter.attributeKey.key)) {
+										return newFilter;
+									}
+									return item;
+								});
+							}
+						} 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)) {
+								const newFilter = {
+									...currentFilter,
+									value: currentFilter.value.filter((val) => val !== value),
+								};
+
+								if (newFilter.value.length === 0) {
 									query.filters.items = query.filters.items.filter(
 										(item) => !isKeyMatch(item.key?.key, filter.attributeKey.key),
 									);
-								}
-							}
-							break;
-						case 'nin':
-						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;
-
-							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,
-										value: [...currentFilter.value, value],
-									};
-									query.filters.items = query.filters.items.map((item) => {
-										if (isKeyMatch(item.key?.key, filter.attributeKey.key)) {
-											return newFilter;
-										}
-										return item;
-									});
 								} else {
-									const newFilter = {
-										...currentFilter,
-										value: [currentFilter.value as string, value],
-									};
 									query.filters.items = query.filters.items.map((item) => {
 										if (isKeyMatch(item.key?.key, filter.attributeKey.key)) {
 											return newFilter;
@@ -340,90 +267,125 @@ export function applyCheckboxToggle({
 									});
 								}
 							} 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,
-										value: currentFilter.value.filter((val) => val !== value),
-									};
-									if (newFilter.value.length === 0) {
-										query.filters.items = query.filters.items.filter(
-											(item) => !isKeyMatch(item.key?.key, filter.attributeKey.key),
-										);
-										if (query.filter?.expression) {
-											query.filter.expression = removeKeysFromExpression(
-												query.filter.expression,
-												[filter.attributeKey.key],
-											);
-										}
-									} else {
-										query.filters.items = query.filters.items.map((item) => {
-											if (isKeyMatch(item.key?.key, filter.attributeKey.key)) {
-												return newFilter;
-											}
-											return item;
-										});
+								// if not an array remove the whole thing altogether!
+								query.filters.items = query.filters.items.filter(
+									(item) => !isKeyMatch(item.key?.key, filter.attributeKey.key),
+								);
+							}
+						}
+						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.
+							if (isArray(currentFilter.value)) {
+								const newFilter = {
+									...currentFilter,
+									value: [...currentFilter.value, value],
+								};
+								query.filters.items = query.filters.items.map((item) => {
+									if (isKeyMatch(item.key?.key, filter.attributeKey.key)) {
+										return newFilter;
 									}
-								} else {
-									const newFilter = {
-										...currentFilter,
-										value: currentFilter.value === value ? null : currentFilter.value,
-									};
-									if (newFilter.value === null && query.filter?.expression) {
+									return item;
+								});
+							} else {
+								// in case of not an array make it one!
+								const newFilter = {
+									...currentFilter,
+									value: [currentFilter.value as string, value],
+								};
+								query.filters.items = query.filters.items.map((item) => {
+									if (isKeyMatch(item.key?.key, filter.attributeKey.key)) {
+										return newFilter;
+									}
+									return item;
+								});
+							}
+						} else if (checked) {
+							// opposite of above!
+							if (isArray(currentFilter.value)) {
+								const newFilter = {
+									...currentFilter,
+									value: currentFilter.value.filter((val) => val !== value),
+								};
+								if (newFilter.value.length === 0) {
+									query.filters.items = query.filters.items.filter(
+										(item) => !isKeyMatch(item.key?.key, filter.attributeKey.key),
+									);
+									if (query.filter?.expression) {
 										query.filter.expression = removeKeysFromExpression(
 											query.filter.expression,
 											[filter.attributeKey.key],
 										);
 									}
-									query.filters.items = query.filters.items.filter(
-										(item) => !isKeyMatch(item.key?.key, filter.attributeKey.key),
+								} else {
+									query.filters.items = query.filters.items.map((item) => {
+										if (isKeyMatch(item.key?.key, filter.attributeKey.key)) {
+											return newFilter;
+										}
+										return item;
+									});
+								}
+							} else {
+								const newFilter = {
+									...currentFilter,
+									value: currentFilter.value === value ? null : currentFilter.value,
+								};
+								if (newFilter.value === null && query.filter?.expression) {
+									query.filter.expression = removeKeysFromExpression(
+										query.filter.expression,
+										[filter.attributeKey.key],
 									);
 								}
+								query.filters.items = query.filters.items.filter(
+									(item) => !isKeyMatch(item.key?.key, filter.attributeKey.key),
+								);
 							}
-							break;
 						}
-						case '=':
-							if (checked) {
-								const newFilter = {
-									...currentFilter,
-									op: getOperatorValue(OPERATORS.IN),
-									value: [currentFilter.value as string, value],
-								};
-								query.filters.items = query.filters.items.map((item) => {
-									if (isKeyMatch(item.key?.key, filter.attributeKey.key)) {
-										return newFilter;
-									}
-									return item;
-								});
-							} else if (!checked) {
-								query.filters.items = query.filters.items.filter(
-									(item) => !isKeyMatch(item.key?.key, filter.attributeKey.key),
-								);
-							}
-							break;
-						case '!=':
-							if (!checked) {
-								const newFilter = {
-									...currentFilter,
-									op: getNotInOperator(source),
-									value: [currentFilter.value as string, value],
-								};
-								query.filters.items = query.filters.items.map((item) => {
-									if (isKeyMatch(item.key?.key, filter.attributeKey.key)) {
-										return newFilter;
-									}
-									return item;
-								});
-							} else if (checked) {
-								query.filters.items = query.filters.items.filter(
-									(item) => !isKeyMatch(item.key?.key, filter.attributeKey.key),
-								);
-							}
-							break;
-						default:
-							break;
-					}
+						break;
+					case '=':
+						if (checked) {
+							const newFilter = {
+								...currentFilter,
+								op: getOperatorValue(OPERATORS.IN),
+								value: [currentFilter.value as string, value],
+							};
+							query.filters.items = query.filters.items.map((item) => {
+								if (isKeyMatch(item.key?.key, filter.attributeKey.key)) {
+									return newFilter;
+								}
+								return item;
+							});
+						} else if (!checked) {
+							query.filters.items = query.filters.items.filter(
+								(item) => !isKeyMatch(item.key?.key, filter.attributeKey.key),
+							);
+						}
+						break;
+					case '!=':
+						if (!checked) {
+							const newFilter = {
+								...currentFilter,
+								op: getNotInOperator(source),
+								value: [currentFilter.value as string, value],
+							};
+							query.filters.items = query.filters.items.map((item) => {
+								if (isKeyMatch(item.key?.key, filter.attributeKey.key)) {
+									return newFilter;
+								}
+								return item;
+							});
+						} else if (checked) {
+							query.filters.items = query.filters.items.filter(
+								(item) => !isKeyMatch(item.key?.key, filter.attributeKey.key),
+							);
+						}
+						break;
+					default:
+						break;
 				}
 			}
 		} else {

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

@@ -10,7 +10,6 @@ import {
 	applyCheckboxToggle,
 	clearFilterFromQuery,
 } from './checkboxFilterQuery';
-import { CheckedState } from '../../types';
 
 interface UseCheckboxFilterActionsProps {
 	filter: IQuickFiltersConfig;
@@ -25,7 +24,6 @@ interface UseCheckboxFilterActionsReturn {
 		value: string,
 		checked: boolean,
 		isOnlyOrAllClicked: boolean,
-		previousState?: CheckedState,
 	) => void;
 	onClear: () => void;
 }
@@ -55,7 +53,6 @@ function useCheckboxFilterActions({
 		value: string,
 		checked: boolean,
 		isOnlyOrAllClicked: boolean,
-		previousState?: CheckedState,
 	): void => {
 		dispatch(
 			applyCheckboxToggle({
@@ -67,7 +64,6 @@ function useCheckboxFilterActions({
 				value,
 				checked,
 				isOnlyOrAllClicked,
-				previousState,
 			}),
 		);
 	};

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

@@ -1,302 +0,0 @@
-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/CheckboxFilterV2.interactions.test.tsx

@@ -1,494 +0,0 @@
-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');
-			expect(screen.getByTestId('badge-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();
-		});
-	});
-
-	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('accumulates both values in NOT IN when toggling indeterminate (related) then unchecked (other)', async () => {
-			const user = userEvent.setup();
-			const onFilterChange = jest.fn();
-
-			mockFieldsValuesAPI({
-				relatedValues: ['valueA'],
-				stringValues: ['valueB'],
-			});
-
-			// Step 1: Start with no filter, toggle indeterminate A
-			const { unmount } = renderWithFilter(onFilterChange);
-
-			const rowA = await screen.findByTestId('checkbox-value-row-valueA');
-			expect(rowA).toHaveAttribute('data-state', 'indeterminate');
-
-			await user.click(within(rowA).getByRole('checkbox'));
-
-			expect(onFilterChange).toHaveBeenCalledTimes(1);
-			const firstFilter = getFilterFromCall(onFilterChange);
-			expect(firstFilter?.op).toBe('not in');
-			expect(firstFilter?.value).toBe('valueA');
-
-			unmount();
-
-			// Step 2: Re-render with updated query (NOT IN valueA), toggle unchecked B
-			onFilterChange.mockClear();
-			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 secondFilter = getFilterFromCall(onFilterChange);
-			expect(secondFilter?.op).toBe('not in');
-			expect(secondFilter?.value).toStrictEqual(['valueA', 'valueB']);
-		});
-
-		it('accumulates both values in IN when toggling indeterminate (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']);
-		});
-	});
-
-	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/CheckboxFilterV2.itemRules.test.tsx

@@ -1,485 +0,0 @@
-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');
-
-			expect(screen.queryByTestId('badge-related')).not.toBeInTheDocument();
-			expect(screen.queryByTestId('badge-other')).not.toBeInTheDocument();
-		});
-	});
-
-	describe('with existing query (related values)', () => {
-		it('shows "Related" badge with indeterminate state for values in relatedValues', 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();
-
-			expect(screen.getByTestId('badge-related')).toBeInTheDocument();
-			expect(productionRow).toHaveAttribute('data-state', 'indeterminate');
-
-			const stagingRow = screen.getByTestId('checkbox-value-row-staging');
-			expect(stagingRow).toHaveAttribute('data-state', 'unchecked');
-		});
-
-		it('shows "Other" badge for values not in relatedValues', 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(screen.getByTestId('badge-other')).toBeInTheDocument();
-		});
-
-		it('shows "Related" badge with indeterminate when hasFilterForThisKey=true and isInRelatedValues=true (Rule 5)', 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,
-				},
-			);
-
-			const productionRow = await screen.findByTestId(
-				'checkbox-value-row-production',
-			);
-			expect(productionRow).toHaveAttribute('data-state', 'checked');
-
-			const stagingRow = screen.getByTestId('checkbox-value-row-staging');
-			expect(stagingRow).toHaveAttribute('data-state', 'indeterminate');
-			expect(within(stagingRow).getByTestId('badge-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 "Not in" badge with unchecked state 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(screen.getByTestId('badge-not_in')).toBeInTheDocument();
-
-			const stagingRow = screen.getByTestId('checkbox-value-row-staging');
-			expect(stagingRow).toHaveAttribute('data-state', 'unchecked');
-			expect(within(stagingRow).getByTestId('badge-other')).toBeInTheDocument();
-		});
-	});
-
-	describe('ordering by orderIndex', () => {
-		it('orders selected values (orderIndex 0) before related (orderIndex 1) before other (orderIndex 2)', 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 orderIndex', 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();
-
-			const relatedRow = screen.getByTestId('checkbox-value-row-related-env');
-			expect(relatedRow).toHaveAttribute('data-state', 'indeterminate');
-			expect(within(relatedRow).getByTestId('badge-related')).toBeInTheDocument();
-
-			const otherRow = screen.getByTestId('checkbox-value-row-other-env');
-			expect(otherRow).toHaveAttribute('data-state', 'unchecked');
-			expect(within(otherRow).getByTestId('badge-other')).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).getByTestId('badge-not_in')).toBeInTheDocument();
-
-			const relatedRow = screen.getByTestId('checkbox-value-row-related-env');
-			expect(relatedRow).toHaveAttribute('data-state', 'indeterminate');
-			expect(within(relatedRow).getByTestId('badge-related')).toBeInTheDocument();
-		});
-	});
-});

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

@@ -1,91 +0,0 @@
-.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;
-	gap: var(--spacing-4);
-}
-
-.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.states.test.tsx

@@ -1,207 +0,0 @@
-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/CheckboxFilterV2.testUtils.tsx

@@ -1,126 +0,0 @@
-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

@@ -1,226 +0,0 @@
-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 { CheckboxFilterV2ValueRow } from './CheckboxFilterV2ValueRow';
-import { useSectionedValues } from './useSectionedValues';
-
-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 { sectionedItems, totalCount } = useSectionedValues({
-		relatedValues,
-		allValues,
-		currentFilterState,
-		isSomeFilterPresentForCurrentAttribute,
-		isNotInOperator,
-		hasExistingQuery,
-		searchText,
-		visibleItemsCount,
-	});
-
-	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}>
-							{sectionedItems.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)
-										}
-										onOnlyOrAllClick={(): void => onChange(value, isChecked, true)}
-									/>
-								);
-							})}
-						</section>
-					)}
-
-					{totalCount === 0 && hasLoadedOnce.current && (
-						<section className={styles.noData} data-testid="checkbox-filter-empty">
-							<Typography.Text>No values found</Typography.Text>
-						</section>
-					)}
-
-					{visibleItemsCount < totalCount && (
-						<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

@@ -1,33 +0,0 @@
-.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.test.tsx

@@ -1,156 +0,0 @@
-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/CheckboxFilterV2Header.tsx

@@ -1,62 +0,0 @@
-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/CheckboxFilterV2ValueRow.module.scss

@@ -1,166 +0,0 @@
-.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 {
-	display: inline-flex;
-	align-items: center;
-	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.test.tsx

@@ -1,318 +0,0 @@
-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');
-		});
-
-		it('sets data-state="indeterminate" for indeterminate state', () => {
-			render(
-				<CheckboxFilterV2ValueRow {...defaultProps} checkedState="indeterminate" />,
-			);
-
-			const row = screen.getByTestId('checkbox-value-row-production');
-			expect(row).toHaveAttribute('data-state', 'indeterminate');
-		});
-	});
-
-	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('indeterminate + related badge', () => {
-			render(
-				<CheckboxFilterV2ValueRow
-					{...defaultProps}
-					checkedState="indeterminate"
-					badge={{ key: 'related', label: 'Related', color: 'robin' }}
-				/>,
-			);
-
-			expect(screen.getByTestId('badge-related')).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/CheckboxFilterV2ValueRow.tsx

@@ -1,118 +0,0 @@
-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/itemRules.test.ts

@@ -1,146 +0,0 @@
-import { deriveItemConfig, ItemContext } from './itemRules';
-
-describe('itemRules', () => {
-	describe('deriveItemConfig', () => {
-		it('no query at all → orderIndex 0, no badge', () => {
-			const ctx: ItemContext = {
-				isSelectedOnFilter: false,
-				isInRelatedValues: true,
-				isNotInOperator: false,
-				hasExistingQuery: false,
-				hasFilterForThisKey: false,
-			};
-
-			const result = deriveItemConfig(ctx);
-
-			expect(result.orderIndex).toBe(0);
-			expect(result.badge).toBeNull();
-		});
-
-		it('selected + IN operator → orderIndex 0, no badge', () => {
-			const ctx: ItemContext = {
-				isSelectedOnFilter: true,
-				isInRelatedValues: true,
-				isNotInOperator: false,
-				hasExistingQuery: true,
-				hasFilterForThisKey: true,
-			};
-
-			const result = deriveItemConfig(ctx);
-
-			expect(result.orderIndex).toBe(0);
-			expect(result.badge).toBeNull();
-		});
-
-		it('selected + NOT IN operator → orderIndex 0, not_in badge', () => {
-			const ctx: ItemContext = {
-				isSelectedOnFilter: true,
-				isInRelatedValues: false,
-				isNotInOperator: true,
-				hasExistingQuery: true,
-				hasFilterForThisKey: true,
-			};
-
-			const result = deriveItemConfig(ctx);
-
-			expect(result.orderIndex).toBe(0);
-			expect(result.badge).toStrictEqual({
-				key: 'not_in',
-				label: 'Not in',
-				color: 'warning',
-			});
-		});
-
-		it('has query, no filter for this key, in related → orderIndex 1, related badge', () => {
-			const ctx: ItemContext = {
-				isSelectedOnFilter: false,
-				isInRelatedValues: true,
-				isNotInOperator: false,
-				hasExistingQuery: true,
-				hasFilterForThisKey: false,
-			};
-
-			const result = deriveItemConfig(ctx);
-
-			expect(result.orderIndex).toBe(1);
-			expect(result.badge).toStrictEqual({
-				key: 'related',
-				label: 'Related',
-				color: 'robin',
-			});
-		});
-
-		it('has query, has filter for this key, in related → orderIndex 1, related badge', () => {
-			const ctx: ItemContext = {
-				isSelectedOnFilter: false,
-				isInRelatedValues: true,
-				isNotInOperator: false,
-				hasExistingQuery: true,
-				hasFilterForThisKey: true,
-			};
-
-			const result = deriveItemConfig(ctx);
-
-			expect(result.orderIndex).toBe(1);
-			expect(result.badge).toStrictEqual({
-				key: 'related',
-				label: 'Related',
-				color: 'robin',
-			});
-		});
-
-		it('has query, not in related → orderIndex 2, other badge', () => {
-			const ctx: ItemContext = {
-				isSelectedOnFilter: false,
-				isInRelatedValues: false,
-				isNotInOperator: false,
-				hasExistingQuery: true,
-				hasFilterForThisKey: false,
-			};
-
-			const result = deriveItemConfig(ctx);
-
-			expect(result.orderIndex).toBe(2);
-			expect(result.badge).toStrictEqual({
-				key: 'other',
-				label: 'Other',
-				color: 'secondary',
-			});
-		});
-
-		it('has query + filter for key, not selected, not in related → orderIndex 2, other badge', () => {
-			const ctx: ItemContext = {
-				isSelectedOnFilter: false,
-				isInRelatedValues: false,
-				isNotInOperator: false,
-				hasExistingQuery: true,
-				hasFilterForThisKey: true,
-			};
-
-			const result = deriveItemConfig(ctx);
-
-			expect(result.orderIndex).toBe(2);
-			expect(result.badge).toStrictEqual({
-				key: 'other',
-				label: 'Other',
-				color: 'secondary',
-			});
-		});
-
-		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.orderIndex).toBe(0);
-			expect(result.badge).toBeNull();
-			expect(result.checkedState).toBe('checked');
-		});
-	});
-});

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

@@ -1,109 +0,0 @@
-import { CheckedState } from '../../../types';
-
-export interface BadgeConfig {
-	key: string;
-	label: string;
-	color: 'robin' | 'warning' | 'secondary';
-}
-
-export interface ItemConfig {
-	orderIndex: number;
-	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[] = [
-	{
-		condition: (ctx): boolean =>
-			!ctx.hasExistingQuery && !ctx.hasFilterForThisKey,
-		config: { orderIndex: 0, badge: null, checkedState: 'checked' },
-	},
-	{
-		condition: (ctx): boolean => ctx.isSelectedOnFilter && ctx.isNotInOperator,
-		config: {
-			orderIndex: 0,
-			badge: { key: 'not_in', label: 'Not in', color: 'warning' },
-			checkedState: 'unchecked',
-		},
-	},
-	{
-		condition: (ctx): boolean => ctx.isSelectedOnFilter && !ctx.isNotInOperator,
-		config: { orderIndex: 0, badge: null, checkedState: 'checked' },
-	},
-	{
-		condition: (ctx): boolean =>
-			ctx.hasExistingQuery && !ctx.hasFilterForThisKey && ctx.isInRelatedValues,
-		config: {
-			orderIndex: 1,
-			badge: { key: 'related', label: 'Related', color: 'robin' },
-			checkedState: 'indeterminate',
-		},
-	},
-	{
-		condition: (ctx): boolean =>
-			ctx.hasExistingQuery && ctx.hasFilterForThisKey && ctx.isInRelatedValues,
-		config: {
-			orderIndex: 1,
-			badge: { key: 'related', label: 'Related', color: 'robin' },
-			checkedState: 'indeterminate',
-		},
-	},
-	{
-		condition: (ctx): boolean => ctx.hasExistingQuery,
-		config: {
-			orderIndex: 2,
-			badge: { key: 'other', label: 'Other', color: 'secondary' },
-			checkedState: 'unchecked',
-		},
-	},
-];
-
-// Fallback when no rule matches
-const DEFAULT_CONFIG: ItemConfig = {
-	orderIndex: 0,
-	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

@@ -1,61 +0,0 @@
-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

@@ -1,97 +0,0 @@
-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.test.ts

@@ -1,115 +0,0 @@
-import { renderHook } from '@testing-library/react';
-
-import { useSectionedValues } from './useSectionedValues';
-
-describe('useSectionedValues', () => {
-	const baseInput = {
-		relatedValues: ['val1', 'val2'],
-		allValues: ['val1', 'val2', 'val3'],
-		currentFilterState: {},
-		isSomeFilterPresentForCurrentAttribute: false,
-		isNotInOperator: false,
-		hasExistingQuery: false,
-		searchText: '',
-		visibleItemsCount: 10,
-	};
-
-	it('no query at all → all items orderIndex 0, no badges', () => {
-		const { result } = renderHook(() =>
-			useSectionedValues({
-				...baseInput,
-				hasExistingQuery: false,
-				isSomeFilterPresentForCurrentAttribute: false,
-			}),
-		);
-
-		expect(result.current.sectionedItems).toHaveLength(3);
-		result.current.sectionedItems.forEach((item) => {
-			expect(item.orderIndex).toBe(0);
-			expect(item.badge).toBeNull();
-		});
-	});
-
-	it('has query, no filter for key → related values get related badge', () => {
-		const { result } = renderHook(() =>
-			useSectionedValues({
-				...baseInput,
-				hasExistingQuery: true,
-				isSomeFilterPresentForCurrentAttribute: false,
-			}),
-		);
-
-		const relatedItems = result.current.sectionedItems.filter(
-			(item) => item.value === 'val1' || item.value === 'val2',
-		);
-		const otherItems = result.current.sectionedItems.filter(
-			(item) => item.value === 'val3',
-		);
-
-		// Related values should have related badge
-		relatedItems.forEach((item) => {
-			expect(item.orderIndex).toBe(1);
-			expect(item.badge?.key).toBe('related');
-		});
-
-		// Other values should have other badge
-		otherItems.forEach((item) => {
-			expect(item.orderIndex).toBe(2);
-			expect(item.badge?.key).toBe('other');
-		});
-	});
-
-	it('has query + filter for key, selected value → selected at top, no badge', () => {
-		const { result } = renderHook(() =>
-			useSectionedValues({
-				...baseInput,
-				hasExistingQuery: true,
-				isSomeFilterPresentForCurrentAttribute: true,
-				currentFilterState: { val1: true, val2: false, val3: false },
-			}),
-		);
-
-		const selectedItem = result.current.sectionedItems.find(
-			(item) => item.value === 'val1',
-		);
-
-		expect(selectedItem?.orderIndex).toBe(0);
-		expect(selectedItem?.badge).toBeNull();
-	});
-
-	it('has query + filter for key, NOT IN operator → not_in values get badge', () => {
-		const { result } = renderHook(() =>
-			useSectionedValues({
-				...baseInput,
-				hasExistingQuery: true,
-				isSomeFilterPresentForCurrentAttribute: true,
-				isNotInOperator: true,
-				currentFilterState: { val1: false, val2: true, val3: true },
-			}),
-		);
-
-		// val1 is unchecked + NOT IN = excluded
-		const excludedItem = result.current.sectionedItems.find(
-			(item) => item.value === 'val1',
-		);
-
-		expect(excludedItem?.orderIndex).toBe(0);
-		expect(excludedItem?.badge?.key).toBe('not_in');
-	});
-
-	it('items with same orderIndex sorted alphabetically', () => {
-		const { result } = renderHook(() =>
-			useSectionedValues({
-				...baseInput,
-				relatedValues: ['zebra', 'apple', 'mango'],
-				allValues: ['zebra', 'apple', 'mango'],
-				hasExistingQuery: false,
-				isSomeFilterPresentForCurrentAttribute: false,
-			}),
-		);
-
-		// All items have orderIndex 0, should be sorted alphabetically
-		const values = result.current.sectionedItems.map((item) => item.value);
-		expect(values).toStrictEqual(['apple', 'mango', 'zebra']);
-	});
-});

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

@@ -1,97 +0,0 @@
-import { useMemo } from 'react';
-
-import { BadgeConfig, deriveItems } from './itemRules';
-import { CheckedState } from '../../../types';
-
-interface SectionedValuesInput {
-	relatedValues: string[];
-	allValues: string[];
-	currentFilterState: Record<string, boolean>;
-	isSomeFilterPresentForCurrentAttribute: boolean;
-	isNotInOperator: boolean;
-	hasExistingQuery: boolean;
-	searchText: string;
-	visibleItemsCount: number;
-}
-
-export interface SectionedItem {
-	value: string;
-	orderIndex: number;
-	badge: BadgeConfig | null;
-	checkedState: CheckedState;
-}
-
-interface SectionedValuesOutput {
-	sectionedItems: SectionedItem[];
-	totalCount: number;
-}
-
-export function useSectionedValues({
-	relatedValues,
-	allValues,
-	currentFilterState,
-	isSomeFilterPresentForCurrentAttribute,
-	isNotInOperator,
-	hasExistingQuery,
-	searchText,
-	visibleItemsCount,
-}: SectionedValuesInput): SectionedValuesOutput {
-	const items = useMemo(() => {
-		const allUniqueValues = Array.from(new Set([...relatedValues, ...allValues]));
-
-		// When searching, only use allValues (API filtered)
-		const valuesToProcess = searchText ? allValues : allUniqueValues;
-
-		// Build selected set based on operator
-		// Only populate when filter exists for this key
-		const selectedSet = new Set<string>();
-		if (isSomeFilterPresentForCurrentAttribute) {
-			for (const [val, isChecked] of Object.entries(currentFilterState)) {
-				if (isNotInOperator) {
-					// NOT IN: unchecked = explicitly excluded
-					if (!isChecked) {
-						selectedSet.add(val);
-					}
-				} else {
-					// IN: checked = explicitly selected
-					if (isChecked) {
-						selectedSet.add(val);
-					}
-				}
-			}
-		}
-
-		// Always include selected values at top - they may not be in API response
-		// (e.g., NOT IN filter excludes them from results)
-		const finalValues = [
-			...new Set([...Array.from(selectedSet), ...valuesToProcess]),
-		];
-
-		const relatedSet = new Set(relatedValues);
-
-		const derived = deriveItems(finalValues, relatedSet, selectedSet, {
-			isNotInOperator,
-			hasExistingQuery,
-			hasFilterForThisKey: isSomeFilterPresentForCurrentAttribute,
-		});
-
-		return derived.sort(
-			(a, b) => a.orderIndex - b.orderIndex || a.value.localeCompare(b.value),
-		);
-	}, [
-		relatedValues,
-		allValues,
-		currentFilterState,
-		isSomeFilterPresentForCurrentAttribute,
-		isNotInOperator,
-		hasExistingQuery,
-		searchText,
-	]);
-
-	const sectionedItems = useMemo(
-		() => items.slice(0, visibleItemsCount),
-		[items, visibleItemsCount],
-	);
-
-	return { sectionedItems, totalCount: items.length };
-}

frontend/src/components/QuickFilters/QuickFilters.tsx

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

frontend/src/components/QuickFilters/types.ts

@@ -26,11 +26,6 @@ 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;
@@ -51,7 +46,6 @@ export interface IQuickFiltersProps {
 	className?: string;
 	showFilterCollapse?: boolean;
 	showQueryName?: boolean;
-	useFieldApis?: QuickFilterCheckboxUseFieldApis;
 }
 
 export enum QuickFiltersSource {
@@ -62,19 +56,3 @@ 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/ServiceAccountDrawer/AddKeyModal/KeyFormPhase.tsx

@@ -4,11 +4,11 @@ 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 'components/AuthZTooltip/AuthZTooltip';
+import AuthZTooltip from 'lib/authz/components/AuthZTooltip/AuthZTooltip';
 import {
 	APIKeyCreatePermission,
 	buildSAAttachPermission,
-} from 'hooks/useAuthZ/permissions/service-account.permissions';
+} from 'lib/authz/hooks/useAuthZ/permissions/service-account.permissions';
 import { popupContainer } from 'utils/selectPopupContainer';
 
 import { disabledDate } from '../utils';

frontend/src/components/ServiceAccountDrawer/DeleteAccountModal.tsx

@@ -1,8 +1,8 @@
 import { useQueryClient } from 'react-query';
 import { Trash2, X } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
-import AuthZTooltip from 'components/AuthZTooltip/AuthZTooltip';
-import { buildSADeletePermission } from 'hooks/useAuthZ/permissions/service-account.permissions';
+import AuthZTooltip from 'lib/authz/components/AuthZTooltip/AuthZTooltip';
+import { buildSADeletePermission } from 'lib/authz/hooks/useAuthZ/permissions/service-account.permissions';
 import { DialogWrapper } from '@signozhq/ui/dialog';
 import { toast } from '@signozhq/ui/sonner';
 import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';

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

@@ -7,12 +7,12 @@ 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 AuthZTooltip from 'components/AuthZTooltip/AuthZTooltip';
+import AuthZTooltip from 'lib/authz/components/AuthZTooltip/AuthZTooltip';
 import {
 	buildAPIKeyDeletePermission,
 	buildAPIKeyUpdatePermission,
 	buildSADetachPermission,
-} from 'hooks/useAuthZ/permissions/service-account.permissions';
+} from 'lib/authz/hooks/useAuthZ/permissions/service-account.permissions';
 import { popupContainer } from 'utils/selectPopupContainer';
 
 import { disabledDate, formatLastObservedAt } from '../utils';

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

@@ -16,8 +16,8 @@ import type {
 import { AxiosError } from 'axios';
 import { SA_QUERY_PARAMS } from 'container/ServiceAccountsSettings/constants';
 import dayjs from 'dayjs';
-import { buildAPIKeyUpdatePermission } from 'hooks/useAuthZ/permissions/service-account.permissions';
-import { useAuthZ } from 'hooks/useAuthZ/useAuthZ';
+import { buildAPIKeyUpdatePermission } from 'lib/authz/hooks/useAuthZ/permissions/service-account.permissions';
+import { useAuthZ } from 'lib/authz/hooks/useAuthZ/useAuthZ';
 import { parseAsString, useQueryState } from 'nuqs';
 import { useErrorModal } from 'providers/ErrorModalProvider';
 import { useTimezone } from 'providers/Timezone';

frontend/src/components/ServiceAccountDrawer/KeysTab.tsx

@@ -4,13 +4,13 @@ import { Button } from '@signozhq/ui/button';
 import { 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 'components/AuthZTooltip/AuthZTooltip';
+import AuthZTooltip from 'lib/authz/components/AuthZTooltip/AuthZTooltip';
 import {
 	APIKeyCreatePermission,
 	buildAPIKeyDeletePermission,
 	buildSAAttachPermission,
 	buildSADetachPermission,
-} from 'hooks/useAuthZ/permissions/service-account.permissions';
+} from 'lib/authz/hooks/useAuthZ/permissions/service-account.permissions';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
 import dayjs from 'dayjs';
 import { parseAsBoolean, parseAsString, useQueryState } from 'nuqs';

frontend/src/components/ServiceAccountDrawer/OverviewTab.tsx

@@ -5,11 +5,11 @@ 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 AuthZTooltip from 'components/AuthZTooltip/AuthZTooltip';
+import AuthZTooltip from 'lib/authz/components/AuthZTooltip/AuthZTooltip';
 import RolesSelect from 'components/RolesSelect';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
 import { ServiceAccountRow } from 'container/ServiceAccountsSettings/utils';
-import { buildSAUpdatePermission } from 'hooks/useAuthZ/permissions/service-account.permissions';
+import { buildSAUpdatePermission } from 'lib/authz/hooks/useAuthZ/permissions/service-account.permissions';
 import { useTimezone } from 'providers/Timezone';
 import APIError from 'types/api/error';
 

frontend/src/components/ServiceAccountDrawer/RevokeKeyModal.tsx

@@ -1,11 +1,11 @@
 import { useQueryClient } from 'react-query';
 import { Trash2, X } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
-import AuthZTooltip from 'components/AuthZTooltip/AuthZTooltip';
+import AuthZTooltip from 'lib/authz/components/AuthZTooltip/AuthZTooltip';
 import {
 	buildAPIKeyDeletePermission,
 	buildSADetachPermission,
-} from 'hooks/useAuthZ/permissions/service-account.permissions';
+} from 'lib/authz/hooks/useAuthZ/permissions/service-account.permissions';
 import { DialogWrapper } from '@signozhq/ui/dialog';
 import { toast } from '@signozhq/ui/sonner';
 import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';

frontend/src/components/ServiceAccountDrawer/ServiceAccountDrawer.tsx

@@ -16,7 +16,7 @@ import {
 import type { RenderErrorResponseDTO } from 'api/generated/services/sigNoz.schemas';
 import { AxiosError } from 'axios';
 import ErrorInPlace from 'components/ErrorInPlace/ErrorInPlace';
-import PermissionDeniedCallout from 'components/PermissionDeniedCallout/PermissionDeniedCallout';
+import PermissionDeniedCallout from 'lib/authz/components/PermissionDeniedCallout/PermissionDeniedCallout';
 import { useRoles } from 'components/RolesSelect';
 import { SA_QUERY_PARAMS } from 'container/ServiceAccountsSettings/constants';
 import {
@@ -35,8 +35,8 @@ import {
 	buildSADeletePermission,
 	buildSAReadPermission,
 	buildSAUpdatePermission,
-} from 'hooks/useAuthZ/permissions/service-account.permissions';
-import { useAuthZ } from 'hooks/useAuthZ/useAuthZ';
+} from 'lib/authz/hooks/useAuthZ/permissions/service-account.permissions';
+import { useAuthZ } from 'lib/authz/hooks/useAuthZ/useAuthZ';
 import {
 	parseAsBoolean,
 	parseAsInteger,
@@ -47,7 +47,7 @@ import {
 import APIError from 'types/api/error';
 import { toAPIError } from 'utils/errorUtils';
 
-import AuthZTooltip from 'components/AuthZTooltip/AuthZTooltip';
+import AuthZTooltip from 'lib/authz/components/AuthZTooltip/AuthZTooltip';
 import AddKeyModal from './AddKeyModal';
 import DeleteAccountModal from './DeleteAccountModal';
 import KeysTab from './KeysTab';

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

@@ -6,7 +6,7 @@ import { render, screen, userEvent, waitFor } from 'tests/test-utils';
 
 import EditKeyModal from '../EditKeyModal';
 
-jest.mock('components/AuthZTooltip/AuthZTooltip', () => ({
+jest.mock('lib/authz/components/AuthZTooltip/AuthZTooltip', () => ({
 	__esModule: true,
 	default: ({
 		children,

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

@@ -6,7 +6,7 @@ import { render, screen, userEvent, waitFor } from 'tests/test-utils';
 
 import KeysTab from '../KeysTab';
 
-jest.mock('components/AuthZTooltip/AuthZTooltip', () => ({
+jest.mock('lib/authz/components/AuthZTooltip/AuthZTooltip', () => ({
 	__esModule: true,
 	default: ({
 		children,

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

@@ -7,11 +7,11 @@ import {
 	setupAuthzAdmin,
 	setupAuthzDeny,
 	setupAuthzDenyAll,
-} from 'tests/authz-test-utils';
+} from 'lib/authz/utils/authz-test-utils';
 import {
 	APIKeyListPermission,
 	buildSADeletePermission,
-} from 'hooks/useAuthZ/permissions/service-account.permissions';
+} from 'lib/authz/hooks/useAuthZ/permissions/service-account.permissions';
 
 import ServiceAccountDrawer from '../ServiceAccountDrawer';
 

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

@@ -3,7 +3,7 @@ import { listRolesSuccessResponse } from 'mocks-server/__mockdata__/roles';
 import { rest, server } from 'mocks-server/server';
 import { NuqsTestingAdapter } from 'nuqs/adapters/testing';
 import { render, screen, userEvent, waitFor } from 'tests/test-utils';
-import { setupAuthzAdmin } from 'tests/authz-test-utils';
+import { setupAuthzAdmin } from 'lib/authz/utils/authz-test-utils';
 
 import ServiceAccountDrawer from '../ServiceAccountDrawer';
 

frontend/src/components/cmdKPalette/cmdKPalette.tsx

@@ -22,6 +22,7 @@ import {
 } from 'container/AIAssistant/store/useAIAssistantStore';
 import { useThemeMode } from 'hooks/useDarkMode';
 import { useIsAIAssistantEnabled } from 'hooks/useIsAIAssistantEnabled';
+import { IS_DEV } from 'lib/env';
 import history from 'lib/history';
 import { ROLES as UserRole } from 'types/roles';
 
@@ -30,6 +31,33 @@ import { useCmdK } from '../../providers/cmdKProvider';
 
 import './cmdKPalette.scss';
 
+const AuthZDevModal = IS_DEV
+	? React.lazy(() =>
+			import('lib/authz/devtools/AuthZDevModal/AuthZDevModal').then((m) => ({
+				default: m.AuthZDevModal,
+			})),
+		)
+	: null;
+
+const AuthZDevFloatingIndicator = IS_DEV
+	? React.lazy(() =>
+			import('lib/authz/devtools/AuthZDevFloatingIndicator/AuthZDevFloatingIndicator').then(
+				(m) => ({
+					default: m.AuthZDevFloatingIndicator,
+				}),
+			),
+		)
+	: null;
+
+const openAuthZDevModal = IS_DEV
+	? (): void => {
+			void import('lib/authz/devtools/useAuthZDevStore').then((m) => {
+				m.openAuthZDevModal();
+				return m;
+			});
+		}
+	: undefined;
+
 type CmdAction = {
 	id: string;
 	name: string;
@@ -110,6 +138,7 @@ export function CmdKPalette({
 		aiAssistant: isAIAssistantEnabled
 			? { open: handleOpenAIAssistant }
 			: undefined,
+		authzDevTools: openAuthZDevModal ? { open: openAuthZDevModal } : undefined,
 	});
 
 	// RBAC filter: show action if no roles set OR current user role is included
@@ -146,37 +175,57 @@ export function CmdKPalette({
 	};
 
 	return (
-		<CommandDialog open={open} onOpenChange={setOpen} position="top" offset={110}>
-			<CommandInput placeholder="Search…" className="cmdk-input-wrapper" />
-			<CommandList className="cmdk-list-scroll">
-				<CommandEmpty>No results</CommandEmpty>
-				{grouped.map(([section, items]) => (
-					<CommandGroup
-						key={section}
-						heading={section}
-						className="cmdk-section-heading"
-					>
-						{items.map((it) => (
-							<CommandItem
-								key={it.id}
-								onSelect={(): void => handleInvoke(it)}
-								value={it.name}
-								className={theme === 'light' ? 'cmdk-item-light' : 'cmdk-item'}
-							>
-								<span
-									className={cx('cmd-item-icon', it.id === 'ai-assistant' && 'noz-icon')}
+		<>
+			<CommandDialog
+				open={open}
+				onOpenChange={setOpen}
+				position="top"
+				offset={110}
+			>
+				<CommandInput placeholder="Search…" className="cmdk-input-wrapper" />
+				<CommandList className="cmdk-list-scroll">
+					<CommandEmpty>No results</CommandEmpty>
+					{grouped.map(([section, items]) => (
+						<CommandGroup
+							key={section}
+							heading={section}
+							className="cmdk-section-heading"
+						>
+							{items.map((it) => (
+								<CommandItem
+									key={it.id}
+									onSelect={(): void => handleInvoke(it)}
+									value={it.name}
+									className={theme === 'light' ? 'cmdk-item-light' : 'cmdk-item'}
 								>
-									{it.icon}
-								</span>
-								{it.name}
-								{it.shortcut && it.shortcut.length > 0 && (
-									<CommandShortcut>{it.shortcut.join(' • ')}</CommandShortcut>
-								)}
-							</CommandItem>
-						))}
-					</CommandGroup>
-				))}
-			</CommandList>
-		</CommandDialog>
+									<span
+										className={cx(
+											'cmd-item-icon',
+											it.id === 'ai-assistant' && 'noz-icon',
+										)}
+									>
+										{it.icon}
+									</span>
+									{it.name}
+									{it.shortcut && it.shortcut.length > 0 && (
+										<CommandShortcut>{it.shortcut.join(' • ')}</CommandShortcut>
+									)}
+								</CommandItem>
+							))}
+						</CommandGroup>
+					))}
+				</CommandList>
+			</CommandDialog>
+			{IS_DEV && AuthZDevModal && (
+				<React.Suspense fallback={null}>
+					<AuthZDevModal />
+				</React.Suspense>
+			)}
+			{IS_DEV && AuthZDevFloatingIndicator && (
+				<React.Suspense fallback={null}>
+					<AuthZDevFloatingIndicator />
+				</React.Suspense>
+			)}
+		</>
 	);
 }

frontend/src/constants/queryCacheTime.ts

@@ -1,5 +1,3 @@
 export const DASHBOARD_CACHE_TIME = 30_000;
 // keep it low or zero, otherwise, when enabled auto-refresh, this causes OOM due to accumulated queries in cache
 export const DASHBOARD_CACHE_TIME_ON_REFRESH_ENABLED = 0;
-
-export const FIELD_API_CACHE_TIME = 60_000;

frontend/src/constants/shortcutActions.tsx

@@ -43,10 +43,17 @@ type ActionDeps = {
 	aiAssistant?: {
 		open: () => void;
 	};
+	/**
+	 * Provided only in development mode. Opens the AuthZ DevTools modal
+	 * for testing permission overrides.
+	 */
+	authzDevTools?: {
+		open: () => void;
+	};
 };
 
 export function createShortcutActions(deps: ActionDeps): CmdAction[] {
-	const { navigate, handleThemeChange, aiAssistant } = deps;
+	const { navigate, handleThemeChange, aiAssistant, authzDevTools } = deps;
 
 	const actions: CmdAction[] = [
 		{
@@ -302,5 +309,17 @@ export function createShortcutActions(deps: ActionDeps): CmdAction[] {
 		});
 	}
 
+	if (authzDevTools) {
+		actions.push({
+			id: 'authz-devtools',
+			name: 'AuthZ DevTools',
+			keywords: 'authz permissions rbac debug devtools override testing',
+			section: 'Dev',
+			icon: <Settings size={14} />,
+			roles: ['ADMIN', 'EDITOR', 'VIEWER'],
+			perform: authzDevTools.open,
+		});
+	}
+
 	return actions;
 }

frontend/src/container/InfraMonitoringHosts/Hosts.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { Button, Tooltip } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import logEvent from 'api/common/logEvent';
@@ -9,10 +9,7 @@ import { FeatureKeys } from 'constants/features';
 import K8sBaseDetails from 'container/InfraMonitoringK8s/Base/K8sBaseDetails';
 import { K8sBaseList } from 'container/InfraMonitoringK8s/Base/K8sBaseList';
 import { K8sBaseFilters } from 'container/InfraMonitoringK8s/Base/types';
-import {
-	InfraMonitoringEntity,
-	METRIC_NAMESPACE_BY_ENTITY,
-} from 'container/InfraMonitoringK8s/constants';
+import { InfraMonitoringEntity } from 'container/InfraMonitoringK8s/constants';
 import {
 	useInfraMonitoringFiltersK8s,
 	useInfraMonitoringPageListing,
@@ -20,8 +17,6 @@ import {
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useQueryOperations } from 'hooks/queryBuilder/useQueryBuilderOperations';
 import { useAppContext } from 'providers/App/App';
-import { useGlobalTimeStore } from 'store/globalTime';
-import { NANO_SECOND_MULTIPLIER } from 'store/globalTime/utils';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';
 
 import {
@@ -62,17 +57,6 @@ function Hosts(): JSX.Element {
 		entityVersion: '',
 	});
 
-	const selectedTime = useGlobalTimeStore((state) => state.selectedTime);
-	const getMinMaxTime = useGlobalTimeStore((state) => state.getMinMaxTime);
-	const { startUnixMilli, endUnixMilli } = useMemo(() => {
-		const { minTime, maxTime } = getMinMaxTime();
-		return {
-			startUnixMilli: Math.floor(minTime / NANO_SECOND_MULTIPLIER),
-			endUnixMilli: Math.floor(maxTime / NANO_SECOND_MULTIPLIER),
-		};
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [selectedTime, getMinMaxTime]);
-
 	// Track previous urlFilters to only sync when the value actually changes
 	// (not when handleChangeQueryData changes due to query updates)
 	const prevUrlFiltersRef = useRef<string | null>(null);
@@ -171,12 +155,6 @@ function Hosts(): JSX.Element {
 								config={getHostsQuickFiltersConfig(dotMetricsEnabled)}
 								handleFilterVisibilityChange={handleFilterVisibilityChange}
 								onFilterChange={handleQuickFiltersChange}
-								useFieldApis={{
-									metricNamespace:
-										METRIC_NAMESPACE_BY_ENTITY[InfraMonitoringEntity.HOSTS],
-									startUnixMilli,
-									endUnixMilli,
-								}}
 							/>
 						</div>
 					)}

frontend/src/container/InfraMonitoringK8s/InfraMonitoringK8s.tsx

@@ -1,13 +1,11 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import * as Sentry from '@sentry/react';
-import { Button, Collapse, CollapseProps, Tooltip } from 'antd';
+import { Button, CollapseProps } from 'antd';
+import { Collapse, Tooltip } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import logEvent from 'api/common/logEvent';
 import QuickFilters from 'components/QuickFilters/QuickFilters';
-import {
-	QuickFilterCheckboxUseFieldApis,
-	QuickFiltersSource,
-} from 'components/QuickFilters/types';
+import { QuickFiltersSource } from 'components/QuickFilters/types';
 import { InfraMonitoringEvents } from 'constants/events';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useQueryOperations } from 'hooks/queryBuilder/useQueryBuilderOperations';
@@ -25,8 +23,6 @@ import {
 	Workflow,
 } from '@signozhq/icons';
 import ErrorBoundaryFallback from 'pages/ErrorBoundaryFallback/ErrorBoundaryFallback';
-import { useGlobalTimeStore } from 'store/globalTime';
-import { NANO_SECOND_MULTIPLIER } from 'store/globalTime/utils';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';
 
 import { FeatureKeys } from '../../constants/features';
@@ -42,9 +38,7 @@ import {
 	GetPodsQuickFiltersConfig,
 	GetStatefulsetsQuickFiltersConfig,
 	GetVolumesQuickFiltersConfig,
-	InfraMonitoringEntity,
 	K8sCategories,
-	METRIC_NAMESPACE_BY_ENTITY,
 } from './constants';
 import K8sDaemonSetsList from './DaemonSets/K8sDaemonSetsList';
 import K8sDeploymentsList from './Deployments/K8sDeploymentsList';
@@ -104,26 +98,6 @@ export default function InfraMonitoringK8s(): JSX.Element {
 		featureFlags?.find((flag) => flag.name === FeatureKeys.DOT_METRICS_ENABLED)
 			?.active || false;
 
-	const selectedTime = useGlobalTimeStore((state) => state.selectedTime);
-	const getMinMaxTime = useGlobalTimeStore((state) => state.getMinMaxTime);
-	const { startUnixMilli, endUnixMilli } = useMemo(() => {
-		const { minTime, maxTime } = getMinMaxTime();
-		return {
-			startUnixMilli: Math.floor(minTime / NANO_SECOND_MULTIPLIER),
-			endUnixMilli: Math.floor(maxTime / NANO_SECOND_MULTIPLIER),
-		};
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [selectedTime, getMinMaxTime]);
-
-	const getUseFieldApis = useCallback(
-		(entity: InfraMonitoringEntity): QuickFilterCheckboxUseFieldApis => ({
-			metricNamespace: METRIC_NAMESPACE_BY_ENTITY[entity],
-			startUnixMilli,
-			endUnixMilli,
-		}),
-		[startUnixMilli, endUnixMilli],
-	);
-
 	const handleFilterChange = (query: Query): void => {
 		// update the current query with the new filters
 		// in infra monitoring k8s, we are using only one query, hence updating the 0th index of queryData
@@ -165,7 +139,6 @@ export default function InfraMonitoringK8s(): JSX.Element {
 					config={GetPodsQuickFiltersConfig(dotMetricsEnabled)}
 					handleFilterVisibilityChange={handleFilterVisibilityChange}
 					onFilterChange={handleFilterChange}
-					useFieldApis={getUseFieldApis(InfraMonitoringEntity.PODS)}
 				/>
 			),
 		},
@@ -182,7 +155,6 @@ export default function InfraMonitoringK8s(): JSX.Element {
 					config={GetNodesQuickFiltersConfig(dotMetricsEnabled)}
 					handleFilterVisibilityChange={handleFilterVisibilityChange}
 					onFilterChange={handleFilterChange}
-					useFieldApis={getUseFieldApis(InfraMonitoringEntity.NODES)}
 				/>
 			),
 		},
@@ -199,7 +171,6 @@ export default function InfraMonitoringK8s(): JSX.Element {
 					config={GetNamespaceQuickFiltersConfig(dotMetricsEnabled)}
 					handleFilterVisibilityChange={handleFilterVisibilityChange}
 					onFilterChange={handleFilterChange}
-					useFieldApis={getUseFieldApis(InfraMonitoringEntity.NAMESPACES)}
 				/>
 			),
 		},
@@ -216,7 +187,6 @@ export default function InfraMonitoringK8s(): JSX.Element {
 					config={GetClustersQuickFiltersConfig(dotMetricsEnabled)}
 					handleFilterVisibilityChange={handleFilterVisibilityChange}
 					onFilterChange={handleFilterChange}
-					useFieldApis={getUseFieldApis(InfraMonitoringEntity.CLUSTERS)}
 				/>
 			),
 		},
@@ -233,7 +203,6 @@ export default function InfraMonitoringK8s(): JSX.Element {
 					config={GetDeploymentsQuickFiltersConfig(dotMetricsEnabled)}
 					handleFilterVisibilityChange={handleFilterVisibilityChange}
 					onFilterChange={handleFilterChange}
-					useFieldApis={getUseFieldApis(InfraMonitoringEntity.DEPLOYMENTS)}
 				/>
 			),
 		},
@@ -250,7 +219,6 @@ export default function InfraMonitoringK8s(): JSX.Element {
 					config={GetJobsQuickFiltersConfig(dotMetricsEnabled)}
 					handleFilterVisibilityChange={handleFilterVisibilityChange}
 					onFilterChange={handleFilterChange}
-					useFieldApis={getUseFieldApis(InfraMonitoringEntity.JOBS)}
 				/>
 			),
 		},
@@ -267,7 +235,6 @@ export default function InfraMonitoringK8s(): JSX.Element {
 					config={GetDaemonsetsQuickFiltersConfig(dotMetricsEnabled)}
 					handleFilterVisibilityChange={handleFilterVisibilityChange}
 					onFilterChange={handleFilterChange}
-					useFieldApis={getUseFieldApis(InfraMonitoringEntity.DAEMONSETS)}
 				/>
 			),
 		},
@@ -284,7 +251,6 @@ export default function InfraMonitoringK8s(): JSX.Element {
 					config={GetStatefulsetsQuickFiltersConfig(dotMetricsEnabled)}
 					handleFilterVisibilityChange={handleFilterVisibilityChange}
 					onFilterChange={handleFilterChange}
-					useFieldApis={getUseFieldApis(InfraMonitoringEntity.STATEFULSETS)}
 				/>
 			),
 		},
@@ -301,7 +267,6 @@ export default function InfraMonitoringK8s(): JSX.Element {
 					config={GetVolumesQuickFiltersConfig(dotMetricsEnabled)}
 					handleFilterVisibilityChange={handleFilterVisibilityChange}
 					onFilterChange={handleFilterChange}
-					useFieldApis={getUseFieldApis(InfraMonitoringEntity.VOLUMES)}
 				/>
 			),
 		},

frontend/src/container/InfraMonitoringK8s/constants.ts

@@ -21,21 +21,6 @@ export enum InfraMonitoringEntity {
 	VOLUMES = 'volumes',
 }
 
-export const METRIC_NAMESPACE_BY_ENTITY: Record<InfraMonitoringEntity, string> =
-	{
-		[InfraMonitoringEntity.HOSTS]: 'system.',
-		[InfraMonitoringEntity.PODS]: 'k8s.pod.',
-		[InfraMonitoringEntity.NODES]: 'k8s.node.',
-		[InfraMonitoringEntity.NAMESPACES]: 'k8s.pod.',
-		[InfraMonitoringEntity.CLUSTERS]: 'k8s.node.',
-		[InfraMonitoringEntity.DEPLOYMENTS]: 'k8s.',
-		[InfraMonitoringEntity.STATEFULSETS]: 'k8s.',
-		[InfraMonitoringEntity.DAEMONSETS]: 'k8s.',
-		[InfraMonitoringEntity.CONTAINERS]: 'k8s.pod.',
-		[InfraMonitoringEntity.JOBS]: 'k8s.',
-		[InfraMonitoringEntity.VOLUMES]: 'k8s.volume.',
-	};
-
 export enum VIEWS {
 	METRICS = 'metrics',
 	LOGS = 'logs',

frontend/src/container/MetricsExplorer/VolumeControl/components/VolumeControlBadge.tsx

@@ -1,4 +1,5 @@
 import { Gauge } from '@signozhq/icons';
+import { Tooltip } from 'antd';
 import { MetricreductionruletypesGettableReductionRuleDTO } from 'api/generated/services/sigNoz.schemas';
 
 import { Badge } from '@signozhq/ui/badge';
@@ -8,16 +9,26 @@ interface VolumeControlBadgeProps {
 }
 
 function VolumeControlBadge({ rule }: VolumeControlBadgeProps): JSX.Element {
-	return (
+	const badge = (
 		<Badge
 			data-testid="vc-badge-active"
 			variant="outline"
-			color={!rule.active ? 'success' : 'warning'}
+			color={rule.active ? 'success' : 'warning'}
 		>
 			<Gauge size={12} />
-			{!rule.active ? 'Active' : 'Pending'}
+			{rule.active ? 'Active' : 'Pending'}
 		</Badge>
 	);
+
+	if (rule.active) {
+		return badge;
+	}
+
+	return (
+		<Tooltip title="Takes about 5 minutes to take effect">
+			<span>{badge}</span>
+		</Tooltip>
+	);
 }
 
 export default VolumeControlBadge;

frontend/src/container/MetricsExplorer/VolumeControl/components/VolumeControlChart/VolumeControlChart.module.scss

@@ -7,6 +7,12 @@
 	padding: 12px 16px 0 16px;
 }
 
+.chartHeader {
+	display: flex;
+	flex-direction: column;
+	gap: 2px;
+}
+
 .chartTitle {
 	text-transform: uppercase;
 	letter-spacing: 0.05em;
@@ -15,3 +21,11 @@
 .chartBody {
 	height: 340px;
 }
+
+.chartStatus {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 100%;
+	height: 100%;
+}

frontend/src/container/MetricsExplorer/VolumeControl/components/VolumeControlChart/VolumeControlChart.tsx

@@ -1,5 +1,6 @@
 import { Color } from '@signozhq/design-tokens';
 import { Typography } from '@signozhq/ui/typography';
+import { Spin } from 'antd';
 import { useGetMetricReductionRuleTimeseries } from 'api/generated/services/metrics';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import BarChart from 'container/DashboardContainer/visualization/charts/BarChart/BarChart';
@@ -25,7 +26,9 @@ interface VolumeControlChartProps {
 }
 
 function VolumeControlChart({ enabled }: VolumeControlChartProps): JSX.Element {
-	const { data } = useGetMetricReductionRuleTimeseries({ query: { enabled } });
+	const { data, isLoading, isError } = useGetMetricReductionRuleTimeseries({
+		query: { enabled },
+	});
 
 	const isDarkMode = useIsDarkMode();
 	const { timezone } = useTimezone();
@@ -65,11 +68,34 @@ function VolumeControlChart({ enabled }: VolumeControlChartProps): JSX.Element {
 
 	return (
 		<div className={styles.chart} data-testid="volume-control-chart">
-			<Typography.Text className={styles.chartTitle} size={'small'}>
-				Series volume over time · ingested vs retained
-			</Typography.Text>
+			<div className={styles.chartHeader}>
+				<Typography.Text className={styles.chartTitle} size={'small'}>
+					Sample volume · ingested vs retained
+				</Typography.Text>
+				<Typography.Text size="small" color="muted">
+					Last 6 hours
+				</Typography.Text>
+			</div>
 			<div className={styles.chartBody} ref={graphRef}>
-				{dimensions.width > 0 && (
+				{isLoading && (
+					<div
+						className={styles.chartStatus}
+						data-testid="volume-control-chart-loading"
+					>
+						<Spin size="small" />
+					</div>
+				)}
+				{!isLoading && isError && (
+					<div
+						className={styles.chartStatus}
+						data-testid="volume-control-chart-error"
+					>
+						<Typography.Text size="small" color="danger">
+							Failed to load chart
+						</Typography.Text>
+					</div>
+				)}
+				{!isLoading && !isError && dimensions.width > 0 && (
 					<BarChart
 						config={config}
 						data={chartData}

frontend/src/container/MetricsExplorer/VolumeControl/components/VolumeControlConfigDrawer/ImpactPanel/ImpactPanel.module.scss

@@ -17,11 +17,27 @@
 	gap: 5px;
 }
 
+.meterLabelRow {
+	display: flex;
+	align-items: center;
+	gap: 4px;
+}
+
 .meterLabel {
 	text-transform: uppercase;
 	letter-spacing: 0.04em;
 }
 
+.meterInfo {
+	flex-shrink: 0;
+	color: var(--bg-vanilla-400, #c0c1c3);
+	line-height: 1;
+	cursor: help;
+}
+
 .meterValue {
+	display: flex;
+	align-items: baseline;
+	gap: 6px;
 	font-family: 'Geist Mono', monospace;
 }

frontend/src/container/MetricsExplorer/VolumeControl/components/VolumeControlConfigDrawer/ImpactPanel/ImpactPanel.tsx

@@ -1,6 +1,8 @@
+import { Info } from '@signozhq/icons';
 import { Typography } from '@signozhq/ui/typography';
-import { Spin } from 'antd';
+import { Spin, Tooltip } from 'antd';
 import { MetricreductionruletypesGettableReductionRulePreviewDTO } from 'api/generated/services/sigNoz.schemas';
+import { popupContainer } from 'utils/selectPopupContainer';
 
 import { formatCompact } from '../../../configUtils';
 import { RuleMode } from '../../../types';
@@ -27,6 +29,7 @@ function ImpactPanel({
 		);
 	}
 
+	const full = preview?.ingestedSeries ?? 0;
 	const current = preview?.currentRetainedSeries ?? 0;
 	const proposed = preview?.retainedSeries ?? 0;
 	const deltaPct = current > 0 ? (1 - proposed / current) * 100 : 0;
@@ -40,31 +43,59 @@ function ImpactPanel({
 			{!isLoading && preview && (
 				<div className={styles.meterGrid}>
 					<div className={styles.meter}>
-						<Typography.Text size="xs" color="muted" className={styles.meterLabel}>
-							Current series
+						<div className={styles.meterLabelRow}>
+							<Typography.Text size="xs" color="muted" className={styles.meterLabel}>
+								Full series
+							</Typography.Text>
+							<Tooltip
+								title="Total number of series for this metric before any reduction."
+								getPopupContainer={popupContainer}
+							>
+								<Info size={12} className={styles.meterInfo} />
+							</Tooltip>
+						</div>
+						<Typography.Text size="2xl" className={styles.meterValue}>
+							{formatCompact(full)}
 						</Typography.Text>
+					</div>
+					<div className={styles.meter}>
+						<div className={styles.meterLabelRow}>
+							<Typography.Text size="xs" color="muted" className={styles.meterLabel}>
+								Current retained
+							</Typography.Text>
+							<Tooltip
+								title="Series kept today under the metric's existing rule, or all of them if it has no rule yet."
+								getPopupContainer={popupContainer}
+							>
+								<Info size={12} className={styles.meterInfo} />
+							</Tooltip>
+						</div>
 						<Typography.Text size="2xl" className={styles.meterValue}>
 							{formatCompact(current)}
 						</Typography.Text>
 					</div>
 					<div className={styles.meter}>
-						<Typography.Text size="xs" color="muted" className={styles.meterLabel}>
-							Proposed series
-						</Typography.Text>
+						<div className={styles.meterLabelRow}>
+							<Typography.Text size="xs" color="muted" className={styles.meterLabel}>
+								Potential retained
+							</Typography.Text>
+							<Tooltip
+								title="Series that would be kept if you save this rule, with the reduction vs what's retained today."
+								getPopupContainer={popupContainer}
+							>
+								<Info size={12} className={styles.meterInfo} />
+							</Tooltip>
+						</div>
 						<Typography.Text size="2xl" className={styles.meterValue}>
 							{formatCompact(proposed)}
-						</Typography.Text>
-					</div>
-					<div className={styles.meter}>
-						<Typography.Text size="xs" color="muted" className={styles.meterLabel}>
-							Reduction
-						</Typography.Text>
-						<Typography.Text
-							size="2xl"
-							color={deltaPct >= 0 ? 'success' : undefined}
-							className={styles.meterValue}
-						>
-							{reductionLabel}
+							{deltaPct !== 0 && (
+								<Typography.Text
+									size="small"
+									color={deltaPct >= 0 ? 'success' : undefined}
+								>
+									{reductionLabel}
+								</Typography.Text>
+							)}
 						</Typography.Text>
 					</div>
 				</div>

frontend/src/container/MetricsExplorer/VolumeControl/components/VolumeControlConfigDrawer/ModeSelector/ModeSelector.tsx

@@ -18,12 +18,12 @@ const MODE_OPTIONS: ModeOption[] = [
 	},
 	{
 		mode: 'include',
-		title: 'Include attributes',
+		title: 'Include',
 		description: 'Allowlist: only the selected attributes stay queryable.',
 	},
 	{
 		mode: 'exclude',
-		title: 'Exclude attributes',
+		title: 'Exclude',
 		description: 'Blocklist: the selected attributes are aggregated away.',
 	},
 ];

frontend/src/container/MetricsExplorer/VolumeControl/components/VolumeControlConfigDrawer/RelatedAssetsWarning/RelatedAssetsWarning.tsx

@@ -53,12 +53,12 @@ function RelatedAssetsWarning({
 		<div className={styles.warning} data-testid="volume-control-warning">
 			<Info size={14} />
 			<div className={styles.warningBody}>
-				<Typography.Text as="div" size="small" weight="semibold" color="warning">
+				<Typography.Text as="div" size="base" weight="semibold" color="warning">
 					This rule affects {impacted.length} related asset
 					{impacted.length > 1 ? 's' : ''}.
 				</Typography.Text>
 				{impactedLabels.length > 0 && (
-					<Typography.Text as="div" size="sm" color="muted">
+					<Typography.Text as="div" size="base" color="muted">
 						{impactedLabels.join(', ')} will no longer be queryable; affected panels
 						fall back to aggregated data once the rule applies.
 					</Typography.Text>
@@ -73,7 +73,7 @@ function RelatedAssetsWarning({
 							<li key={`${asset.type}-${asset.id}-${asset.widget?.id ?? ''}`}>
 								{href ? (
 									<Typography.Link
-										size="sm"
+										size="base"
 										href={href}
 										target="_blank"
 										rel="noopener noreferrer"
@@ -81,7 +81,7 @@ function RelatedAssetsWarning({
 										{label}
 									</Typography.Link>
 								) : (
-									<Typography.Text size="sm" color="muted">
+									<Typography.Text size="base" color="muted">
 										{label}
 									</Typography.Text>
 								)}

frontend/src/container/MetricsExplorer/VolumeControl/components/VolumeControlConfigDrawer/VolumeControlConfigDrawer.tsx

@@ -42,6 +42,10 @@ function VolumeControlConfigDrawer({
 
 	const footer = (
 		<div className={styles.footer}>
+			<Typography.Text size="small" color="muted">
+				Changes take effect about 5 minutes after saving.
+			</Typography.Text>
+			<div className={styles.footerSpacer} />
 			<Button
 				variant="outlined"
 				color="secondary"
@@ -50,7 +54,6 @@ function VolumeControlConfigDrawer({
 			>
 				Cancel
 			</Button>
-			<div className={styles.footerSpacer} />
 			{hasExistingRule && (
 				<Button
 					variant="ghost"

frontend/src/container/MetricsExplorer/VolumeControl/components/VolumeControlSection/PendingActivationBanner/PendingActivationBanner.tsx

@@ -8,8 +8,8 @@ function PendingActivationBanner(): JSX.Element {
 		<div className={styles.banner} data-testid="volume-control-pending-banner">
 			<Info size={13} />
 			<Typography.Text size="sm" color="muted">
-				This metric&apos;s configuration was recently updated. Volume changes will
-				take effect within a few minutes.
+				This metric&apos;s configuration was recently updated. Volume changes take
+				effect within about 5 minutes.
 			</Typography.Text>
 		</div>
 	);

frontend/src/container/MetricsExplorer/VolumeControl/components/VolumeControlSection/VolumeControlSection.tsx

@@ -22,7 +22,7 @@ function VolumeControlSection({
 		useVolumeControlFeatureGate();
 	const [isConfigOpen, setIsConfigOpen] = useState(false);
 
-	const { data, isLoading, error } = useListMetricReductionRules(
+	const { data, isLoading, isError } = useListMetricReductionRules(
 		{ metricName },
 		{
 			query: {
@@ -37,7 +37,7 @@ function VolumeControlSection({
 	}
 
 	const rule = data?.data.rules?.[0];
-	const hasRule = !!rule && !error;
+	const hasRule = !!rule && !isError;
 
 	const openConfig = (): void => setIsConfigOpen(true);
 	const closeConfig = (): void => setIsConfigOpen(false);
@@ -53,6 +53,16 @@ function VolumeControlSection({
 
 			{isLoading && <Skeleton active title={false} paragraph={{ rows: 2 }} />}
 
+			{!isLoading && isError && (
+				<Typography.Text
+					size="small"
+					color="danger"
+					data-testid="volume-control-section-error"
+				>
+					Failed to load volume control. Please try again.
+				</Typography.Text>
+			)}
+
 			{!isLoading && hasRule && rule && !rule.active && (
 				<PendingActivationBanner />
 			)}
@@ -65,7 +75,7 @@ function VolumeControlSection({
 				/>
 			)}
 
-			{!isLoading && !hasRule && (
+			{!isLoading && !isError && !hasRule && (
 				<NoRuleEmptyState canManage={canManageVolumeControl} onSetup={openConfig} />
 			)}
 

frontend/src/container/MetricsExplorer/VolumeControl/components/VolumeControlTab/VolumeControlStats/VolumeControlStats.module.scss

@@ -1,3 +1,9 @@
+.statsSection {
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+}
+
 .stats {
 	display: flex;
 	flex-wrap: wrap;
@@ -21,11 +27,24 @@
 	background: var(--callout-success-background);
 }
 
+.statCardLabelRow {
+	display: flex;
+	align-items: center;
+	gap: 4px;
+}
+
 .statCardLabel {
 	text-transform: uppercase;
 	letter-spacing: 0.05em;
 }
 
+.statCardInfo {
+	flex-shrink: 0;
+	color: var(--bg-vanilla-400, #c0c1c3);
+	line-height: 1;
+	cursor: help;
+}
+
 .statCardValue {
 	display: flex;
 	align-items: baseline;

frontend/src/container/MetricsExplorer/VolumeControl/components/VolumeControlTab/VolumeControlStats/VolumeControlStats.tsx

@@ -1,4 +1,6 @@
+import { Info } from '@signozhq/icons';
 import { Typography } from '@signozhq/ui/typography';
+import { Skeleton, Tooltip } from 'antd';
 import cx from 'classnames';
 
 import { formatCompact, formatUsd } from '../../../configUtils';
@@ -8,12 +10,17 @@ interface VolumeControlStatsProps {
 	activeRules: number;
 	ingestedSeries: number;
 	retainedSeries: number;
+	ingestedSamples: number;
+	retainedSamples: number;
 	estimatedMonthlySavingsUsd: number;
+	isLoading?: boolean;
+	isError?: boolean;
 }
 
 interface StatItem {
 	label: string;
 	value: string;
+	tooltip: string;
 	delta?: string;
 	unit?: string;
 	highlighted?: boolean;
@@ -24,20 +31,53 @@ function VolumeControlStats({
 	activeRules,
 	ingestedSeries,
 	retainedSeries,
+	ingestedSamples,
+	retainedSamples,
 	estimatedMonthlySavingsUsd,
+	isLoading = false,
+	isError = false,
 }: VolumeControlStatsProps): JSX.Element {
 	const overallReduction =
 		ingestedSeries > 0
 			? Math.round((1 - retainedSeries / ingestedSeries) * 100)
 			: 0;
 
+	const sampleReduction =
+		ingestedSamples > 0
+			? Math.round((1 - retainedSamples / ingestedSamples) * 100)
+			: 0;
+
 	const items: StatItem[] = [
-		{ label: 'Active rules', value: String(activeRules) },
-		{ label: 'Ingested series', value: formatCompact(ingestedSeries) },
+		{
+			label: 'Configured rules',
+			value: String(activeRules),
+			tooltip: 'Volume-control rules currently configured for this workspace.',
+		},
+		{
+			label: 'Ingested series',
+			value: formatCompact(ingestedSeries),
+			tooltip:
+				'Distinct time series across all metrics in the last 1 hour, before any reduction.',
+		},
 		{
 			label: 'Retained series',
 			value: formatCompact(retainedSeries),
 			delta: overallReduction > 0 ? `−${overallReduction}%` : undefined,
+			tooltip:
+				'Distinct time series kept across all metrics in the last 1 hour; everything except what the rules reduce away. Lower than ingested means more reduction.',
+		},
+		{
+			label: 'Ingested samples',
+			value: formatCompact(ingestedSamples),
+			tooltip:
+				'Sample data points across all metrics in the last 1 hour, before any reduction.',
+		},
+		{
+			label: 'Retained samples',
+			value: formatCompact(retainedSamples),
+			delta: sampleReduction > 0 ? `−${sampleReduction}%` : undefined,
+			tooltip:
+				'Sample data points kept across all metrics in the last 1 hour; everything except what the rules reduce. Samples reduce more than series because series do not all carry the same sample volume.',
 		},
 		{
 			label: 'Est. monthly savings',
@@ -45,42 +85,73 @@ function VolumeControlStats({
 			unit: '/mo',
 			highlighted: true,
 			valueGood: true,
+			tooltip:
+				'Rough monthly estimate: the samples the rules reduced in the last 1 hour, scaled to a month at 1-month standard retention. It is extrapolated from a single rolling hour.',
 		},
 	];
 
 	return (
-		<div className={styles.stats} data-testid="volume-control-stats">
-			{items.map((item) => (
-				<div
-					key={item.label}
-					className={cx(styles.statCard, {
-						[styles.statCardHighlighted]: item.highlighted,
-					})}
-				>
-					<Typography.Text size="sm" color="muted" className={styles.statCardLabel}>
-						{item.label}
-					</Typography.Text>
-					<Typography.Text
-						as="div"
-						size="large"
-						weight="semibold"
-						color={item.valueGood ? 'success' : undefined}
-						className={styles.statCardValue}
+		<div className={styles.statsSection}>
+			<Typography.Text size="small" color="muted">
+				Last 1 hour
+			</Typography.Text>
+			<div className={styles.stats} data-testid="volume-control-stats">
+				{items.map((item) => (
+					<div
+						key={item.label}
+						className={cx(styles.statCard, {
+							[styles.statCardHighlighted]: item.highlighted,
+						})}
 					>
-						{item.value}
-						{item.delta && (
-							<Typography.Text size="small" weight="semibold" color="success">
-								{item.delta}
+						<div className={styles.statCardLabelRow}>
+							<Typography.Text
+								size="sm"
+								color="muted"
+								className={styles.statCardLabel}
+							>
+								{item.label}
+							</Typography.Text>
+							<Tooltip title={item.tooltip}>
+								<Info size={12} className={styles.statCardInfo} />
+							</Tooltip>
+						</div>
+						{isLoading && (
+							<Skeleton.Button active size="small" className={styles.statCardValue} />
+						)}
+						{!isLoading && isError && (
+							<Typography.Text
+								as="div"
+								size="small"
+								color="danger"
+								className={styles.statCardValue}
+							>
+								Failed to load
 							</Typography.Text>
 						)}
-						{item.unit && (
-							<Typography.Text size="small" weight="medium" color="muted">
-								{item.unit}
+						{!isLoading && !isError && (
+							<Typography.Text
+								as="div"
+								size="large"
+								weight="semibold"
+								color={item.valueGood ? 'success' : undefined}
+								className={styles.statCardValue}
+							>
+								{item.value}
+								{item.delta && (
+									<Typography.Text size="small" weight="semibold" color="success">
+										{item.delta}
+									</Typography.Text>
+								)}
+								{item.unit && (
+									<Typography.Text size="small" weight="medium" color="muted">
+										{item.unit}
+									</Typography.Text>
+								)}
 							</Typography.Text>
 						)}
-					</Typography.Text>
-				</div>
-			))}
+					</div>
+				))}
+			</div>
 		</div>
 	);
 }

frontend/src/container/MetricsExplorer/VolumeControl/components/VolumeControlTab/VolumeControlTab.module.scss

@@ -13,8 +13,10 @@
 	font-family: 'Geist Mono', monospace;
 }
 
-.reductionCell {
-	font-family: 'Geist Mono', monospace;
+.volumeCell {
+	display: flex;
+	flex-direction: column;
+	gap: 2px;
 }
 
 .empty {

frontend/src/container/MetricsExplorer/VolumeControl/components/VolumeControlTab/VolumeControlTab.tsx

@@ -36,7 +36,7 @@ type VolumeControlTableParams = Required<
 >;
 
 const DEFAULT_PARAMS: VolumeControlTableParams = {
-	orderBy: OrderBy.reduction,
+	orderBy: OrderBy.ingested_volume,
 	order: SortOrder.desc,
 	search: '',
 	offset: 0,
@@ -60,11 +60,20 @@ function VolumeControlTab(): JSX.Element {
 		);
 	}, [debouncedSearch]);
 
-	const { data, isLoading } = useListMetricReductionRules(params, {
+	const {
+		data,
+		isLoading,
+		isError: isListError,
+	} = useListMetricReductionRules(params, {
 		query: { enabled: isVolumeControlEnabled },
 	});
 
-	const { data: statsData } = useGetMetricReductionRuleStats({
+	const {
+		data: statsData,
+		isLoading: isStatsLoading,
+		isFetching: isStatsFetching,
+		isError: isStatsError,
+	} = useGetMetricReductionRuleStats({
 		query: { enabled: isVolumeControlEnabled },
 	});
 	const stats = statsData?.data;
@@ -111,7 +120,7 @@ function VolumeControlTab(): JSX.Element {
 				{
 					title: 'MODE',
 					key: 'mode',
-					width: 160,
+					width: 110,
 					render: (
 						_value: unknown,
 						rule: MetricreductionruletypesGettableReductionRuleDTO,
@@ -138,7 +147,14 @@ function VolumeControlTab(): JSX.Element {
 					),
 				},
 				{
-					title: 'INGESTED',
+					title: (
+						<>
+							INGESTED{' '}
+							<Typography.Text size="small" color="muted">
+								(1h)
+							</Typography.Text>
+						</>
+					),
 					key: OrderBy.ingested_volume,
 					width: 130,
 					sorter: true,
@@ -147,13 +163,28 @@ function VolumeControlTab(): JSX.Element {
 						_value: unknown,
 						rule: MetricreductionruletypesGettableReductionRuleDTO,
 					): JSX.Element => (
-						<Typography.Text size="small" color="muted">
-							{formatCompact(rule.ingestedSeries)}
-						</Typography.Text>
+						<div className={styles.volumeCell}>
+							<Typography.Text size="small">
+								{formatCompact(rule.ingestedSeries)}{' '}
+								<Typography.Text size="small" color="muted">
+									series
+								</Typography.Text>
+							</Typography.Text>
+							<Typography.Text size="small" color="muted">
+								{formatCompact(rule.ingestedSamples)} samples
+							</Typography.Text>
+						</div>
 					),
 				},
 				{
-					title: 'RETAINED',
+					title: (
+						<>
+							RETAINED{' '}
+							<Typography.Text size="small" color="muted">
+								(1h)
+							</Typography.Text>
+						</>
+					),
 					key: OrderBy.reduced_volume,
 					width: 130,
 					sorter: true,
@@ -162,22 +193,35 @@ function VolumeControlTab(): JSX.Element {
 						_value: unknown,
 						rule: MetricreductionruletypesGettableReductionRuleDTO,
 					): JSX.Element => (
-						<Typography.Text size="small">
-							{formatCompact(rule.retainedSeries)}
-						</Typography.Text>
+						<div className={styles.volumeCell}>
+							<Typography.Text size="small">
+								{formatCompact(rule.retainedSeries)}{' '}
+								<Typography.Text size="small" color="muted">
+									series
+								</Typography.Text>
+							</Typography.Text>
+							<Typography.Text size="small" color="muted">
+								{formatCompact(rule.retainedSamples)} samples
+							</Typography.Text>
+						</div>
 					),
 				},
 				{
 					title: 'CHANGE',
-					key: OrderBy.reduction,
-					width: 110,
-					sorter: true,
-					sortOrder: sortOrderFor(OrderBy.reduction),
+					width: 140,
 					render: (
 						_value: unknown,
 						rule: MetricreductionruletypesGettableReductionRuleDTO,
 					): JSX.Element => {
-						if (rule.reductionPercent <= 0) {
+						const seriesReduction =
+							rule.ingestedSeries > 0
+								? (1 - rule.retainedSeries / rule.ingestedSeries) * 100
+								: 0;
+						const samplesReduction =
+							rule.ingestedSamples > 0
+								? (1 - rule.retainedSamples / rule.ingestedSamples) * 100
+								: 0;
+						if (seriesReduction <= 0 && samplesReduction <= 0) {
 							return (
 								<Typography.Text size="small" color="muted">
 									—
@@ -185,14 +229,18 @@ function VolumeControlTab(): JSX.Element {
 							);
 						}
 						return (
-							<Typography.Text
-								size="small"
-								weight="semibold"
-								color="success"
-								className={styles.reductionCell}
-							>
-								−{Math.round(rule.reductionPercent)}%
-							</Typography.Text>
+							<div className={styles.volumeCell}>
+								<Typography.Text size="small" weight="semibold" color="success">
+									{seriesReduction > 0 ? `−${Math.round(seriesReduction)}%` : '0%'}{' '}
+									<Typography.Text size="small" color="muted">
+										series
+									</Typography.Text>
+								</Typography.Text>
+								<Typography.Text size="small" color="muted">
+									{samplesReduction > 0 ? `−${Math.round(samplesReduction)}%` : '0%'}{' '}
+									samples
+								</Typography.Text>
+							</div>
 						);
 					},
 				},
@@ -273,7 +321,11 @@ function VolumeControlTab(): JSX.Element {
 				activeRules={total}
 				ingestedSeries={stats?.ingestedSeries ?? 0}
 				retainedSeries={stats?.retainedSeries ?? 0}
+				ingestedSamples={stats?.ingestedSamples ?? 0}
+				retainedSamples={stats?.retainedSamples ?? 0}
 				estimatedMonthlySavingsUsd={stats?.estimatedMonthlySavingsUsd ?? 0}
+				isLoading={isStatsLoading || isStatsFetching}
+				isError={isStatsError}
 			/>
 
 			<VolumeControlChart enabled={isVolumeControlEnabled} />
@@ -293,7 +345,13 @@ function VolumeControlTab(): JSX.Element {
 					showSizeChanger: false,
 				}}
 				locale={{
-					emptyText: (
+					emptyText: isListError ? (
+						<div className={styles.empty} data-testid="volume-control-tab-error">
+							<Typography.Text color="danger">
+								Failed to load volume control rules. Please try again.
+							</Typography.Text>
+						</div>
+					) : (
 						<div className={styles.empty} data-testid="volume-control-tab-empty">
 							<Typography.Text color="muted">
 								No volume control rules yet. Open a metric and set one up to start

frontend/src/container/MetricsExplorer/VolumeControl/hooks/useVolumeControlConfig.ts

@@ -49,6 +49,7 @@ export interface UseVolumeControlConfigResult {
 const PREVIEW_DEBOUNCE_MS = 400;
 const SAVE_ERROR_MESSAGE = 'Failed to save volume control rule';
 const REMOVE_ERROR_MESSAGE = 'Failed to remove volume control rule';
+const PREVIEW_ERROR_MESSAGE = 'Failed to preview volume control rule';
 
 export function useVolumeControlConfig({
 	metricName,
@@ -95,11 +96,25 @@ export function useVolumeControlConfig({
 		const timer = setTimeout(() => {
 			previewMutate(
 				{ data: { metricName, matchType: matchTypeForMode(mode), labels } },
-				{ onSettled: () => setIsPreviewPending(false) },
+				{
+					onError: (error) =>
+						notifications.error({
+							message: error.response?.data?.error?.message ?? PREVIEW_ERROR_MESSAGE,
+						}),
+					onSettled: () => setIsPreviewPending(false),
+				},
 			);
 		}, PREVIEW_DEBOUNCE_MS);
 		return (): void => clearTimeout(timer);
-	}, [open, mode, labels, metricName, previewMutate, previewReset]);
+	}, [
+		open,
+		mode,
+		labels,
+		metricName,
+		previewMutate,
+		previewReset,
+		notifications,
+	]);
 
 	const createMutation = useCreateMetricReductionRule();
 	const updateMutation = useUpdateMetricReductionRuleByID();
@@ -142,7 +157,10 @@ export function useVolumeControlConfig({
 		}
 
 		const onSuccess = (): void => {
-			notifications.success({ message: 'Volume control rule saved' });
+			notifications.success({
+				message:
+					'Volume control rule saved. It takes about 5 minutes to take effect.',
+			});
 			invalidate();
 			onClose();
 		};

frontend/src/container/MetricsExplorer/VolumeControl/ruleUtils.ts

@@ -9,7 +9,7 @@ export function isKeepMode(
 export function getMatchTypeLabel(
 	matchType: MetricreductionruletypesMatchTypeDTO,
 ): string {
-	return isKeepMode(matchType) ? 'Include attributes' : 'Exclude attributes';
+	return isKeepMode(matchType) ? 'Include' : 'Exclude';
 }
 
 export function getLabelVerb(

frontend/src/container/RolesSettings/CreateEditRolePage/CreateEditRolePage.tsx

@@ -7,7 +7,7 @@ import { Input } from '@signozhq/ui/input';
 import { Typography } from '@signozhq/ui/typography';
 import { Skeleton } from 'antd';
 import ErrorInPlace from 'components/ErrorInPlace/ErrorInPlace';
-import PermissionDeniedFullPage from 'components/PermissionDeniedFullPage/PermissionDeniedFullPage';
+import PermissionDeniedFullPage from 'lib/authz/components/PermissionDeniedFullPage/PermissionDeniedFullPage';
 import ROUTES from 'constants/routes';
 import { useRolesFeatureGate } from 'hooks/useRolesFeatureGate';
 import useUrlQuery from 'hooks/useUrlQuery';

frontend/src/container/RolesSettings/CreateEditRolePage/__tests__/CreateEditRolePage.featureGate.test.tsx

@@ -1,13 +1,16 @@
 import { Route, Switch } from 'react-router-dom';
 import ROUTES from 'constants/routes';
 import { FeatureKeys } from 'constants/features';
-import { useAuthZ } from 'hooks/useAuthZ/useAuthZ';
+import { useAuthZ } from 'lib/authz/hooks/useAuthZ/useAuthZ';
 import { defaultFeatureFlags, render, screen } from 'tests/test-utils';
-import { invalidLicense, mockUseAuthZGrantAll } from 'tests/authz-test-utils';
+import {
+	invalidLicense,
+	mockUseAuthZGrantAll,
+} from 'lib/authz/utils/authz-test-utils';
 
 import CreateEditRolePage from '../CreateEditRolePage';
 
-jest.mock('hooks/useAuthZ/useAuthZ');
+jest.mock('lib/authz/hooks/useAuthZ/useAuthZ');
 const mockUseAuthZ = useAuthZ as jest.MockedFunction<typeof useAuthZ>;
 
 beforeEach(() => {

frontend/src/container/RolesSettings/CreateEditRolePage/__tests__/CreateRolePage.authz.test.tsx

@@ -1,12 +1,12 @@
 import { Route, Switch } from 'react-router-dom';
 import ROUTES from 'constants/routes';
-import { useAuthZ } from 'hooks/useAuthZ/useAuthZ';
+import { useAuthZ } from 'lib/authz/hooks/useAuthZ/useAuthZ';
 import { render, screen } from 'tests/test-utils';
-import { mockUseAuthZDenyAll } from 'tests/authz-test-utils';
+import { mockUseAuthZDenyAll } from 'lib/authz/utils/authz-test-utils';
 
 import CreateEditRolePage from '../CreateEditRolePage';
 
-jest.mock('hooks/useAuthZ/useAuthZ');
+jest.mock('lib/authz/hooks/useAuthZ/useAuthZ');
 const mockUseAuthZ = useAuthZ as jest.MockedFunction<typeof useAuthZ>;
 
 afterEach(() => {
@@ -48,6 +48,8 @@ describe('CreateRolePage - AuthZ', () => {
 				isFetching: true,
 				error: null,
 				permissions: null,
+				allowed: false,
+				deniedPermissions: [],
 				refetchPermissions: jest.fn(),
 			});
 

frontend/src/container/RolesSettings/CreateEditRolePage/__tests__/CreateRolePage.test.tsx

@@ -3,12 +3,12 @@ import ROUTES from 'constants/routes';
 import { server } from 'mocks-server/server';
 import { rest } from 'msw';
 import { render, screen, userEvent, waitFor, within } from 'tests/test-utils';
-import { useAuthZ } from 'hooks/useAuthZ/useAuthZ';
-import { mockUseAuthZGrantAll } from 'tests/authz-test-utils';
+import { useAuthZ } from 'lib/authz/hooks/useAuthZ/useAuthZ';
+import { mockUseAuthZGrantAll } from 'lib/authz/utils/authz-test-utils';
 
 import CreateEditRolePage from '../CreateEditRolePage';
 
-jest.mock('hooks/useAuthZ/useAuthZ');
+jest.mock('lib/authz/hooks/useAuthZ/useAuthZ');
 const mockUseAuthZ = useAuthZ as jest.MockedFunction<typeof useAuthZ>;
 
 const rolesApiBase = '*/api/v1/roles';

frontend/src/container/RolesSettings/CreateEditRolePage/__tests__/EditRolePage.authz.test.tsx

@@ -1,15 +1,15 @@
 import { Route, Switch } from 'react-router-dom';
 import ROUTES from 'constants/routes';
-import { useAuthZ } from 'hooks/useAuthZ/useAuthZ';
+import { useAuthZ } from 'lib/authz/hooks/useAuthZ/useAuthZ';
 import { render, screen } from 'tests/test-utils';
 import {
 	mockUseAuthZDenyAll,
 	mockUseAuthZGrantByPrefix,
-} from 'tests/authz-test-utils';
+} from 'lib/authz/utils/authz-test-utils';
 
 import CreateEditRolePage from '../CreateEditRolePage';
 
-jest.mock('hooks/useAuthZ/useAuthZ');
+jest.mock('lib/authz/hooks/useAuthZ/useAuthZ');
 const mockUseAuthZ = useAuthZ as jest.MockedFunction<typeof useAuthZ>;
 
 const EDIT_ROLE_ID = 'test-role-123';
@@ -77,6 +77,8 @@ describe('EditRolePage - AuthZ', () => {
 				isFetching: true,
 				error: null,
 				permissions: null,
+				allowed: false,
+				deniedPermissions: [],
 				refetchPermissions: jest.fn(),
 			});
 

frontend/src/container/RolesSettings/CreateEditRolePage/__tests__/EditRolePage.test.tsx

@@ -4,12 +4,12 @@ import { customRoleResponse } from 'mocks-server/__mockdata__/roles';
 import { server } from 'mocks-server/server';
 import { rest } from 'msw';
 import { render, screen, userEvent, waitFor, within } from 'tests/test-utils';
-import { useAuthZ } from 'hooks/useAuthZ/useAuthZ';
-import { mockUseAuthZGrantAll } from 'tests/authz-test-utils';
+import { useAuthZ } from 'lib/authz/hooks/useAuthZ/useAuthZ';
+import { mockUseAuthZGrantAll } from 'lib/authz/utils/authz-test-utils';
 
 import CreateEditRolePage from '../CreateEditRolePage';
 
-jest.mock('hooks/useAuthZ/useAuthZ');
+jest.mock('lib/authz/hooks/useAuthZ/useAuthZ');
 const mockUseAuthZ = useAuthZ as jest.MockedFunction<typeof useAuthZ>;
 
 const CUSTOM_ROLE_ID = '019c24aa-3333-0001-aaaa-111111111111';

frontend/src/container/RolesSettings/CreateEditRolePage/__tests__/JsonEditor.test.tsx

@@ -1,13 +1,13 @@
 import { Route, Switch } from 'react-router-dom';
 import ROUTES from 'constants/routes';
 import { render, screen, userEvent, within } from 'tests/test-utils';
-import { useAuthZ } from 'hooks/useAuthZ/useAuthZ';
-import { mockUseAuthZGrantAll } from 'tests/authz-test-utils';
+import { useAuthZ } from 'lib/authz/hooks/useAuthZ/useAuthZ';
+import { mockUseAuthZGrantAll } from 'lib/authz/utils/authz-test-utils';
 
 import CreateEditRolePage from '../CreateEditRolePage';
 import { TooltipProvider } from '@signozhq/ui/tooltip';
 
-jest.mock('hooks/useAuthZ/useAuthZ');
+jest.mock('lib/authz/hooks/useAuthZ/useAuthZ');
 const mockUseAuthZ = useAuthZ as jest.MockedFunction<typeof useAuthZ>;
 
 beforeEach(() => {

frontend/src/container/RolesSettings/CreateEditRolePage/__tests__/PermissionEditor.test.tsx

@@ -1,13 +1,13 @@
 import { Route, Switch } from 'react-router-dom';
 import ROUTES from 'constants/routes';
 import { render, screen, userEvent, waitFor, within } from 'tests/test-utils';
-import { useAuthZ } from 'hooks/useAuthZ/useAuthZ';
-import { mockUseAuthZGrantAll } from 'tests/authz-test-utils';
+import { useAuthZ } from 'lib/authz/hooks/useAuthZ/useAuthZ';
+import { mockUseAuthZGrantAll } from 'lib/authz/utils/authz-test-utils';
 import { TooltipProvider } from '@signozhq/ui/tooltip';
 
 import CreateEditRolePage from '../CreateEditRolePage';
 
-jest.mock('hooks/useAuthZ/useAuthZ');
+jest.mock('lib/authz/hooks/useAuthZ/useAuthZ');
 const mockUseAuthZ = useAuthZ as jest.MockedFunction<typeof useAuthZ>;
 
 async function expandAllCards(): Promise<void> {

frontend/src/container/RolesSettings/CreateEditRolePage/components/ActionToggle.tsx

@@ -9,7 +9,7 @@ import { getResourcePanel } from '../../permissions.config';
 import ItemInputSelector from './ItemInputSelector';
 
 import styles from './ActionToggle.module.scss';
-import { AuthZResource, AuthZVerb } from 'hooks/useAuthZ/types';
+import { AuthZResource, AuthZVerb } from 'lib/authz/hooks/useAuthZ/types';
 import { getActionLabel } from 'container/RolesSettings/ViewRolePage/components/permissionDisplay.utils';
 
 const SCOPE_LABELS: Record<PermissionScope, string> = {

frontend/src/container/RolesSettings/CreateEditRolePage/components/PermissionEditor.tsx

@@ -5,7 +5,7 @@ import { ConfirmDialog } from '@signozhq/ui/dialog';
 import { RadioGroup, RadioGroupItem } from '@signozhq/ui/radio-group';
 import { Typography } from '@signozhq/ui/typography';
 import { Skeleton } from 'antd';
-import type { AuthZResource, AuthZVerb } from 'hooks/useAuthZ/types';
+import type { AuthZResource, AuthZVerb } from 'lib/authz/hooks/useAuthZ/types';
 
 import { PermissionScope, ResourcePermissions } from '../../types';
 import type { EditorMode, JsonEditorRef } from './JsonEditor.types';

frontend/src/container/RolesSettings/CreateEditRolePage/components/ResourceCard.tsx

@@ -1,6 +1,6 @@
 import { useCallback, useMemo, useState } from 'react';
 import { ChevronDown, ChevronRight } from '@signozhq/icons';
-import type { AuthZResource, AuthZVerb } from 'hooks/useAuthZ/types';
+import type { AuthZResource, AuthZVerb } from 'lib/authz/hooks/useAuthZ/types';
 
 import { Typography } from '@signozhq/ui/typography';
 

frontend/src/container/RolesSettings/CreateEditRolePage/components/jsonSchema.config.ts

@@ -1,5 +1,5 @@
 import type { Monaco } from '@monaco-editor/react';
-import permissionsType from 'hooks/useAuthZ/permissions.type';
+import permissionsType from 'lib/authz/hooks/useAuthZ/permissions.type';
 import transactionGroupSchema from 'schemas/generated/transactionGroups.schema.json';
 
 export const TRANSACTION_GROUP_SCHEMA = transactionGroupSchema;

frontend/src/container/RolesSettings/RolesComponents/RolesListingTable.tsx

@@ -5,10 +5,10 @@ import { Pagination, Skeleton } from 'antd';
 import { useListRoles } from 'api/generated/services/role';
 import { AuthtypesRoleDTO } from 'api/generated/services/sigNoz.schemas';
 import ErrorInPlace from 'components/ErrorInPlace/ErrorInPlace';
-import PermissionDeniedFullPage from 'components/PermissionDeniedFullPage/PermissionDeniedFullPage';
+import PermissionDeniedFullPage from 'lib/authz/components/PermissionDeniedFullPage/PermissionDeniedFullPage';
 import ROUTES from 'constants/routes';
-import { RoleListPermission } from 'hooks/useAuthZ/permissions/role.permissions';
-import { useAuthZ } from 'hooks/useAuthZ/useAuthZ';
+import { RoleListPermission } from 'lib/authz/hooks/useAuthZ/permissions/role.permissions';
+import { useAuthZ } from 'lib/authz/hooks/useAuthZ/useAuthZ';
 import { useRolesFeatureGate } from 'hooks/useRolesFeatureGate';
 import useUrlQuery from 'hooks/useUrlQuery';
 import LineClampedText from 'periscope/components/LineClampedText/LineClampedText';

frontend/src/container/RolesSettings/RolesSettings.tsx

@@ -3,9 +3,9 @@ import { useHistory } from 'react-router-dom';
 import { Plus } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
 import { Input } from '@signozhq/ui/input';
-import AuthZTooltip from 'components/AuthZTooltip/AuthZTooltip';
+import AuthZTooltip from 'lib/authz/components/AuthZTooltip/AuthZTooltip';
 import ROUTES from 'constants/routes';
-import { RoleCreatePermission } from 'hooks/useAuthZ/permissions/role.permissions';
+import { RoleCreatePermission } from 'lib/authz/hooks/useAuthZ/permissions/role.permissions';
 import { useRolesFeatureGate } from 'hooks/useRolesFeatureGate';
 
 import RolesListingTable from './RolesComponents/RolesListingTable';

frontend/src/container/RolesSettings/ViewRolePage/ViewRolePage.tsx

@@ -10,7 +10,7 @@ import { Typography } from '@signozhq/ui/typography';
 import { Skeleton } from 'antd';
 import { useGetRole } from 'api/generated/services/role';
 import ErrorInPlace from 'components/ErrorInPlace/ErrorInPlace';
-import PermissionDeniedFullPage from 'components/PermissionDeniedFullPage/PermissionDeniedFullPage';
+import PermissionDeniedFullPage from 'lib/authz/components/PermissionDeniedFullPage/PermissionDeniedFullPage';
 import { useDeleteRoleModal } from 'container/RolesSettings/DeleteRoleModal/useDeleteRoleModal';
 import { useRoleAuthZ } from 'container/RolesSettings/hooks/useRoleAuthZ';
 import { transformApiToRolePermissions } from 'container/RolesSettings/hooks/useRolePermissions';

frontend/src/container/RolesSettings/ViewRolePage/__tests__/ViewRolePage.authz.test.tsx

@@ -1,7 +1,7 @@
 import { TooltipProvider } from '@signozhq/ui/tooltip';
 import userEvent from '@testing-library/user-event';
 import * as roleApi from 'api/generated/services/role';
-import * as useAuthZModule from 'hooks/useAuthZ/useAuthZ';
+import * as useAuthZModule from 'lib/authz/hooks/useAuthZ/useAuthZ';
 import {
 	customRoleResponse,
 	managedRoleResponse,
@@ -10,7 +10,7 @@ import {
 	mockUseAuthZDenyAll,
 	mockUseAuthZGrantAll,
 	mockUseAuthZGrantByPrefix,
-} from 'tests/authz-test-utils';
+} from 'lib/authz/utils/authz-test-utils';
 import { render, screen, waitFor } from 'tests/test-utils';
 
 import * as useRolePermissionsModule from '../../hooks/useRolePermissions';
@@ -409,6 +409,8 @@ describe('ViewRolePage - AuthZ', () => {
 				isFetching: true,
 				error: null,
 				permissions: null,
+				allowed: false,
+				deniedPermissions: [],
 				refetchPermissions: jest.fn(),
 			});
 

frontend/src/container/RolesSettings/ViewRolePage/__tests__/ViewRolePage.edgeCases.test.tsx

@@ -1,7 +1,7 @@
 import * as roleApi from 'api/generated/services/role';
-import * as useAuthZModule from 'hooks/useAuthZ/useAuthZ';
+import * as useAuthZModule from 'lib/authz/hooks/useAuthZ/useAuthZ';
 import { customRoleResponse } from 'mocks-server/__mockdata__/roles';
-import { mockUseAuthZGrantAll } from 'tests/authz-test-utils';
+import { mockUseAuthZGrantAll } from 'lib/authz/utils/authz-test-utils';
 import { render, screen } from 'tests/test-utils';
 
 import * as useRolePermissionsModule from '../../hooks/useRolePermissions';

frontend/src/container/RolesSettings/ViewRolePage/__tests__/ViewRolePage.error.test.tsx

@@ -1,9 +1,9 @@
 import { Route, Switch } from 'react-router-dom';
 import userEvent from '@testing-library/user-event';
 import * as roleApi from 'api/generated/services/role';
-import * as useAuthZModule from 'hooks/useAuthZ/useAuthZ';
+import * as useAuthZModule from 'lib/authz/hooks/useAuthZ/useAuthZ';
 import { customRoleResponse } from 'mocks-server/__mockdata__/roles';
-import { mockUseAuthZGrantAll } from 'tests/authz-test-utils';
+import { mockUseAuthZGrantAll } from 'lib/authz/utils/authz-test-utils';
 import { render, screen } from 'tests/test-utils';
 
 import * as useRolePermissionsModule from '../../hooks/useRolePermissions';

frontend/src/container/RolesSettings/ViewRolePage/__tests__/ViewRolePage.featureGate.test.tsx

@@ -1,8 +1,11 @@
 import * as roleApi from 'api/generated/services/role';
 import { FeatureKeys } from 'constants/features';
-import * as useAuthZModule from 'hooks/useAuthZ/useAuthZ';
+import * as useAuthZModule from 'lib/authz/hooks/useAuthZ/useAuthZ';
 import { defaultFeatureFlags, render, screen } from 'tests/test-utils';
-import { invalidLicense, mockUseAuthZGrantAll } from 'tests/authz-test-utils';
+import {
+	invalidLicense,
+	mockUseAuthZGrantAll,
+} from 'lib/authz/utils/authz-test-utils';
 
 import ViewRolePage from '../ViewRolePage';
 

frontend/src/container/RolesSettings/ViewRolePage/__tests__/ViewRolePage.loading.test.tsx

@@ -1,6 +1,6 @@
 import * as roleApi from 'api/generated/services/role';
-import * as useAuthZModule from 'hooks/useAuthZ/useAuthZ';
-import { mockUseAuthZGrantAll } from 'tests/authz-test-utils';
+import * as useAuthZModule from 'lib/authz/hooks/useAuthZ/useAuthZ';
+import { mockUseAuthZGrantAll } from 'lib/authz/utils/authz-test-utils';
 import { render } from 'tests/test-utils';
 
 import ViewRolePage from '../ViewRolePage';

frontend/src/container/RolesSettings/ViewRolePage/__tests__/ViewRolePage.permissionOverview.test.tsx

@@ -1,7 +1,7 @@
 import * as roleApi from 'api/generated/services/role';
-import * as useAuthZModule from 'hooks/useAuthZ/useAuthZ';
+import * as useAuthZModule from 'lib/authz/hooks/useAuthZ/useAuthZ';
 import { customRoleResponse } from 'mocks-server/__mockdata__/roles';
-import { mockUseAuthZGrantAll } from 'tests/authz-test-utils';
+import { mockUseAuthZGrantAll } from 'lib/authz/utils/authz-test-utils';
 import userEvent from '@testing-library/user-event';
 import { render, screen, within } from 'tests/test-utils';
 

frontend/src/container/RolesSettings/ViewRolePage/__tests__/testUtils.ts

@@ -3,12 +3,12 @@ import {
 	CoretypesTypeDTO,
 } from 'api/generated/services/sigNoz.schemas';
 import * as roleApi from 'api/generated/services/role';
-import * as useAuthZModule from 'hooks/useAuthZ/useAuthZ';
+import * as useAuthZModule from 'lib/authz/hooks/useAuthZ/useAuthZ';
 import {
 	customRoleResponse,
 	managedRoleResponse,
 } from 'mocks-server/__mockdata__/roles';
-import { mockUseAuthZGrantAll } from 'tests/authz-test-utils';
+import { mockUseAuthZGrantAll } from 'lib/authz/utils/authz-test-utils';
 
 import * as useRolePermissionsModule from '../../hooks/useRolePermissions';
 

frontend/src/container/RolesSettings/__tests__/RolesSettings.authz.test.tsx

@@ -11,12 +11,15 @@ import {
 	userEvent,
 } from 'tests/test-utils';
 import { FeatureKeys } from 'constants/features';
-import { useAuthZ } from 'hooks/useAuthZ/useAuthZ';
-import { invalidLicense, mockUseAuthZGrantAll } from 'tests/authz-test-utils';
+import { useAuthZ } from 'lib/authz/hooks/useAuthZ/useAuthZ';
+import {
+	invalidLicense,
+	mockUseAuthZGrantAll,
+} from 'lib/authz/utils/authz-test-utils';
 
 import RolesSettings from '../RolesSettings';
 
-jest.mock('hooks/useAuthZ/useAuthZ');
+jest.mock('lib/authz/hooks/useAuthZ/useAuthZ');
 const mockUseAuthZ = useAuthZ as jest.MockedFunction<typeof useAuthZ>;
 
 const rolesApiURL = 'http://localhost/api/v1/roles';

frontend/src/container/RolesSettings/hooks/__tests__/useRolePermissions.test.ts

@@ -4,7 +4,7 @@ import {
 	CoretypesKindDTO,
 	CoretypesTypeDTO,
 } from 'api/generated/services/sigNoz.schemas';
-import type { AuthZResource, AuthZVerb } from 'hooks/useAuthZ/types';
+import type { AuthZResource, AuthZVerb } from 'lib/authz/hooks/useAuthZ/types';
 
 import {
 	ActionConfig,

frontend/src/container/RolesSettings/hooks/useRoleAuthZ.ts

@@ -4,9 +4,12 @@ import {
 	buildRoleReadPermission,
 	buildRoleUpdatePermission,
 	RoleCreatePermission,
-} from 'hooks/useAuthZ/permissions/role.permissions';
-import { useAuthZ } from 'hooks/useAuthZ/useAuthZ';
-import { ParsedPermissionObject, parsePermission } from 'hooks/useAuthZ/utils';
+} from 'lib/authz/hooks/useAuthZ/permissions/role.permissions';
+import { useAuthZ } from 'lib/authz/hooks/useAuthZ/useAuthZ';
+import {
+	ParsedPermissionObject,
+	parsePermission,
+} from 'lib/authz/hooks/useAuthZ/utils';
 
 interface UseRoleAuthZResult {
 	readRolePermission: ParsedPermissionObject;

frontend/src/container/RolesSettings/hooks/useRolePermissions.ts

@@ -18,7 +18,7 @@ import {
 	useGetRole,
 	useUpdateRole,
 } from 'api/generated/services/role';
-import type { AuthZResource, AuthZVerb } from 'hooks/useAuthZ/types';
+import type { AuthZResource, AuthZVerb } from 'lib/authz/hooks/useAuthZ/types';
 
 import {
 	getResourcePanel,

frontend/src/container/RolesSettings/permissions.config.ts

@@ -1,12 +1,12 @@
 import { Bot, Key, Shield } from '@signozhq/icons';
 
-import permissionsType from 'hooks/useAuthZ/permissions.type';
+import permissionsType from 'lib/authz/hooks/useAuthZ/permissions.type';
 import {
 	AuthZResource,
 	AuthZVerb,
 	OBJECT_SCOPED_VERBS,
 	ObjectScopedVerb,
-} from 'hooks/useAuthZ/types';
+} from 'lib/authz/hooks/useAuthZ/types';
 import { CoretypesTypeDTO } from 'api/generated/services/sigNoz.schemas';
 
 /** Shared shape of the icon components exported by `@signozhq/icons`. */
@@ -84,7 +84,7 @@ export function getResourceVerbs(
 	}
 
 	// Role resource cannot have assignee verb
-	// TODO(H4ad): Remove this once we get rid of frontend/src/hooks/useAuthZ/legacy.ts
+	// TODO(H4ad): Remove this once we get rid of frontend/lib/authz/hooks/useAuthZ/legacy.ts
 	if (resource === 'role') {
 		return match.allowedVerbs.filter((verb) => verb !== 'assignee');
 	}