Merge branch 'feat/alerts_listing_page_revamp' into feat/alert_rule_views

Visit methods follow Compile; builders, extractors and operator
spelling sit below with main's section separators.

conf/example.yaml

@@ -202,6 +202,7 @@ telemetrystore:
       max_bytes_to_read: 0
       max_result_rows: 0
       ignore_data_skipping_indices: ""
+      secondary_indices_enable_bulk_filtering: false
 
 ##################### Prometheus #####################
 prometheus:
@@ -341,7 +342,7 @@ gateway:
 ##################### Tokenizer #####################
 tokenizer:
   # Specifies the tokenizer provider to use.
-  provider: opaque
+  provider: jwt
   lifetime:
     # The duration for which a user can be idle before being required to authenticate.
     idle: 168h

docs/api/openapi.yml

@@ -8810,6 +8810,98 @@ components:
         message:
           type: string
       type: object
+    RuletypesLabelPair:
+      properties:
+        key:
+          type: string
+        value:
+          type: string
+      required:
+      - key
+      - value
+      type: object
+    RuletypesListOrder:
+      enum:
+      - asc
+      - desc
+      type: string
+    RuletypesListSort:
+      enum:
+      - updated_at
+      - created_at
+      - name
+      - state
+      - severity
+      type: string
+    RuletypesListableRule:
+      properties:
+        alert:
+          type: string
+        alertType:
+          $ref: '#/components/schemas/RuletypesAlertType'
+        createdAt:
+          format: date-time
+          type: string
+        createdBy:
+          type: string
+        description:
+          type: string
+        disabled:
+          type: boolean
+        id:
+          type: string
+        labels:
+          additionalProperties:
+            type: string
+          type: object
+        ruleType:
+          $ref: '#/components/schemas/RuletypesRuleType'
+        state:
+          $ref: '#/components/schemas/RuletypesAlertState'
+        updatedAt:
+          format: date-time
+          type: string
+        updatedBy:
+          type: string
+      required:
+      - id
+      - state
+      - alert
+      - alertType
+      - ruleType
+      type: object
+    RuletypesListableRuleViews:
+      properties:
+        views:
+          items:
+            $ref: '#/components/schemas/RuletypesRuleView'
+          type: array
+      required:
+      - views
+      type: object
+    RuletypesListableRules:
+      properties:
+        labels:
+          items:
+            $ref: '#/components/schemas/RuletypesLabelPair'
+          type: array
+        reservedKeywords:
+          items:
+            type: string
+          type: array
+        rules:
+          items:
+            $ref: '#/components/schemas/RuletypesListableRule'
+          type: array
+        total:
+          format: int64
+          type: integer
+      required:
+      - rules
+      - total
+      - labels
+      - reservedKeywords
+      type: object
     RuletypesMatchType:
       enum:
       - at_least_once
@@ -8884,6 +8976,16 @@ components:
       - ruleType
       - condition
       type: object
+    RuletypesPostableRuleView:
+      properties:
+        data:
+          $ref: '#/components/schemas/RuletypesRuleViewData'
+        name:
+          type: string
+      required:
+      - name
+      - data
+      type: object
     RuletypesQueryType:
       enum:
       - builder
@@ -9022,6 +9124,45 @@ components:
       - promql_rule
       - anomaly_rule
       type: string
+    RuletypesRuleView:
+      properties:
+        createdAt:
+          format: date-time
+          type: string
+        data:
+          $ref: '#/components/schemas/RuletypesRuleViewData'
+        id:
+          type: string
+        name:
+          type: string
+        orgId:
+          type: string
+        updatedAt:
+          format: date-time
+          type: string
+      required:
+      - id
+      - name
+      - data
+      - orgId
+      type: object
+    RuletypesRuleViewData:
+      properties:
+        order:
+          $ref: '#/components/schemas/RuletypesListOrder'
+        query:
+          type: string
+        sort:
+          $ref: '#/components/schemas/RuletypesListSort'
+        states:
+          items:
+            type: string
+          type: array
+        version:
+          type: string
+      required:
+      - version
+      type: object
     RuletypesScheduleType:
       enum:
       - hourly
@@ -20821,11 +20962,237 @@ paths:
       summary: Get users by role id
       tags:
       - users
-  /api/v2/rules:
+  /api/v2/rule_views:
     get:
       deprecated: false
-      description: This endpoint lists all alert rules with their current evaluation
-        state
+      description: Returns every saved view in the calling user's org. Saved views
+        are shared org-wide.
+      operationId: ListRuleViews
+      responses:
+        "200":
+          content:
+            application/json:
+              schema:
+                properties:
+                  data:
+                    $ref: '#/components/schemas/RuletypesListableRuleViews'
+                  status:
+                    type: string
+                required:
+                - status
+                - data
+                type: object
+          description: OK
+        "401":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Unauthorized
+        "403":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Forbidden
+        "500":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Internal Server Error
+      security:
+      - api_key:
+        - VIEWER
+      - tokenizer:
+        - VIEWER
+      summary: List rule saved views
+      tags:
+      - rules
+    post:
+      deprecated: false
+      description: Persists the calling user's rule listing state (query, states,
+        sort, order) as a named, reusable view shared across the org.
+      operationId: CreateRuleView
+      requestBody:
+        content:
+          application/json:
+            schema:
+              $ref: '#/components/schemas/RuletypesPostableRuleView'
+      responses:
+        "201":
+          content:
+            application/json:
+              schema:
+                properties:
+                  data:
+                    $ref: '#/components/schemas/RuletypesRuleView'
+                  status:
+                    type: string
+                required:
+                - status
+                - data
+                type: object
+          description: Created
+        "400":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Bad Request
+        "401":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Unauthorized
+        "403":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Forbidden
+        "500":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Internal Server Error
+      security:
+      - api_key:
+        - VIEWER
+      - tokenizer:
+        - VIEWER
+      summary: Create rule saved view
+      tags:
+      - rules
+  /api/v2/rule_views/{id}:
+    delete:
+      deprecated: false
+      description: Removes a saved view. Saved views are shared org-wide. Deleting
+        a non-existent view returns 404.
+      operationId: DeleteRuleView
+      parameters:
+      - in: path
+        name: id
+        required: true
+        schema:
+          type: string
+      responses:
+        "204":
+          description: No Content
+        "400":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Bad Request
+        "401":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Unauthorized
+        "403":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Forbidden
+        "404":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Not Found
+        "500":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Internal Server Error
+      security:
+      - api_key:
+        - VIEWER
+      - tokenizer:
+        - VIEWER
+      summary: Delete rule saved view
+      tags:
+      - rules
+    put:
+      deprecated: false
+      description: Replaces a saved view's name and data. Saved views are shared org-wide.
+      operationId: UpdateRuleView
+      parameters:
+      - in: path
+        name: id
+        required: true
+        schema:
+          type: string
+      requestBody:
+        content:
+          application/json:
+            schema:
+              $ref: '#/components/schemas/RuletypesPostableRuleView'
+      responses:
+        "200":
+          content:
+            application/json:
+              schema:
+                properties:
+                  data:
+                    $ref: '#/components/schemas/RuletypesRuleView'
+                  status:
+                    type: string
+                required:
+                - status
+                - data
+                type: object
+          description: OK
+        "400":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Bad Request
+        "401":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Unauthorized
+        "403":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Forbidden
+        "404":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Not Found
+        "500":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Internal Server Error
+      security:
+      - api_key:
+        - VIEWER
+      - tokenizer:
+        - VIEWER
+      summary: Update rule saved view
+      tags:
+      - rules
+  /api/v2/rules:
+    get:
+      deprecated: true
+      description: 'This endpoint lists all alert rules with their current evaluation
+        state. Deprecated: use ListRulesV3, which supports filtering, sorting and
+        pagination.'
       operationId: ListRules
       responses:
         "200":
@@ -26607,6 +26974,90 @@ paths:
       summary: Get metric dashboards (v2)
       tags:
       - metrics
+  /api/v3/rules:
+    get:
+      deprecated: false
+      description: Returns a page of alert rules with their current evaluation state,
+        trimmed to the fields the list page renders. Supports a filter DSL (`query`),
+        a repeated `states` filter applied after the state overlay, sort (`updated_at`/`created_at`/`name`/`state`/`severity`),
+        order (`asc`/`desc`), and offset-based pagination (`limit`/`offset`). The
+        response also carries the org's label pairs and the reserved filter keys for
+        building filter suggestions.
+      operationId: ListRulesV3
+      parameters:
+      - in: query
+        name: query
+        schema:
+          type: string
+      - in: query
+        name: states
+        schema:
+          items:
+            type: string
+          type: array
+      - in: query
+        name: sort
+        schema:
+          $ref: '#/components/schemas/RuletypesListSort'
+      - in: query
+        name: order
+        schema:
+          $ref: '#/components/schemas/RuletypesListOrder'
+      - in: query
+        name: limit
+        schema:
+          type: integer
+      - in: query
+        name: offset
+        schema:
+          type: integer
+      responses:
+        "200":
+          content:
+            application/json:
+              schema:
+                properties:
+                  data:
+                    $ref: '#/components/schemas/RuletypesListableRules'
+                  status:
+                    type: string
+                required:
+                - status
+                - data
+                type: object
+          description: OK
+        "400":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Bad Request
+        "401":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Unauthorized
+        "403":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Forbidden
+        "500":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Internal Server Error
+      security:
+      - api_key:
+        - VIEWER
+      - tokenizer:
+        - VIEWER
+      summary: List alert rules (v3)
+      tags:
+      - rules
   /api/v3/traces/{traceID}/flamegraph:
     post:
       deprecated: false

docs/contributing/go/dslfilteringtosql.md

@@ -1,181 +0,0 @@
-# DSL Filtering to SQL
-
-To support search on any entity's list page (dashboards, alert rules, ...), use [pkg/parser/filterquery/sqlcompiler](/pkg/parser/filterquery/sqlcompiler/compiler.go). It compiles a filter DSL string into a WHERE clause for the relational store: `?`-placeholder SQL plus bind arguments, ready for bun on both SQLite and Postgres. This doc explains what the compiler already does and what an adopting module supplies: a `FieldResolver` that says which keys exist and what each maps to.
-
-The dashboards list is the adopter today; the alert rules list revamp is adopting it next.
-
-## What is the DSL?
-
-A few queries, from simple to full:
-
-```
-payment
-status = active AND name CONTAINS cpu
-(labels.team IN ('infra', 'platform') OR labels.env EXISTS) AND created_at > '2025-01-01T00:00:00Z'
-"name = something"
-```
-
-- `payment` is free text: a bare token with no key, matched as a substring wherever the module decides (name, description, ...).
-- `status = active AND name CONTAINS cpu` is two comparisons of the shape `key OP value`. The `AND` is optional; adjacent terms are an implicit `AND`.
-- The third query shows grouping and precedence: parentheses > `NOT` > `AND` > `OR`. Values are bare tokens or quoted strings; `IN` accepts `in(...)` and `[...]` forms.
-- `"name = something"` is quoted, so it is free text for that exact phrase instead of a `name = something` comparison. Quoting is the escape hatch for a phrase that looks like DSL.
-
-The grammar lives at [grammar/FilterQuery.g4](/grammar/FilterQuery.g4) (see its `comparison` rule for the full operator list), with the ANTLR-generated parser in [pkg/parser/filterquery/grammar](/pkg/parser/filterquery/grammar). It is the same grammar the telemetry search bars use, so the query language feels identical everywhere.
-
-## What does the framework already cover?
-
-```go
-compiled, errs := sqlcompiler.Compile(query, formatter, resolver)
-
-type Compiled struct {
-	SQL  string
-	Args []any
-}
-```
-
-`Compile` returns either a non-nil `*Compiled` or a list of human-readable errors. `Compiled.SQL` is the WHERE clause with `?` placeholders and `Compiled.Args` holds the bind arguments in placeholder order; the store passes both to bun. An empty query compiles to an empty `Compiled`; callers gate on `IsEmpty()`, not nil. The package handles:
-
-- Parsing, with syntax errors collected at line/column positions instead of failing on the first one.
-- The boolean tree: `AND`/`OR`/`NOT`, parentheses, implicit `AND`, and pruning of empty conditions.
-- Operator extraction, including inversion of `NOT LIKE`, `NOT IN`, `NOT EXISTS` and friends.
-- Typed value extraction with accumulated errors: the user sees every problem in the query at once.
-- Argument binding through go-sqlbuilder; no value is ever interpolated into the SQL text.
-
-The resolver is called once per term and builds each predicate with helpers the compiler provides (next section).
-
-## When do I write a FieldResolver?
-
-Whenever a module adopts the DSL for its list page. The resolver is the per-module policy and the only code you write:
-
-```go
-type FieldResolver interface {
-	ResolveComparison(v *Visitor, key string, operation qbtypesv5.FilterOperator, ctx *grammar.ComparisonContext) string
-	ResolveFreeText(v *Visitor, value string) string
-}
-```
-
-- `ResolveComparison` is called once per `key OP value` term. It decides whether the key exists and which column expression it maps to, and returns the SQL predicate for the term.
-- `ResolveFreeText` is called for a bare or quoted keyless token. It returns a predicate matching the token across whatever the module considers searchable (name, description, tags, ...).
-- Both report a bad key, operator or value with `v.AddError(...)` and return `""`. Never panic, never fail fast; the compile fails at the end with all accumulated errors.
-
-The `*Visitor` passed in provides everything needed to build predicates. Use these instead of hand-building SQL or managing arguments yourself:
-
-| On the `Visitor` | Use |
-| --- | --- |
-| `Sb` | the compile's root `SelectBuilder`; predicates and their arguments attach to it |
-| `Formatter` | dialect-portable column expressions (`JSONExtractString`, `LowerExpression`) valid on both SQLite and Postgres |
-| `BuildStringOperation` | `=`, `!=`, `LIKE`/`ILIKE`, `CONTAINS`, `IN` on a string column; escapes `%`/`_` for `CONTAINS`, rejects patterns ending in a dangling backslash, lowers both sides for `ILIKE` so SQLite and Postgres agree |
-| `BuildTimestampComparison` | equality, ranges and `BETWEEN` on RFC3339 timestamps |
-| `BuildBoolComparison` | `= true/false` |
-| `BuildFreeTextContains` | case-insensitive substring match, `COALESCE`d so `NOT (...)` does not drop rows where the column is NULL |
-| `ExtractSingleStringValue`, `ExtractStringValueList` | typed value extraction when building a custom predicate |
-| `AddError` | report a problem; errors accumulate |
-
-In the simplest case, keys map straight to columns and the resolver is a switch. The doc's running example, an imaginary `sample_entity` table:
-
-```go
-func (r sampleEntityFieldResolver) ResolveComparison(v *sqlcompiler.Visitor, key string, operation qbtypesv5.FilterOperator, ctx *grammar.ComparisonContext) string {
-	switch key {
-	case "created_by":
-		return v.BuildStringOperation(v.Sb, ctx, operation, "sample_entity.created_by", key)
-	case "created_at":
-		return v.BuildTimestampComparison(ctx, operation, "sample_entity.created_at")
-	case "locked":
-		return v.BuildBoolComparison(ctx, operation, "sample_entity.locked")
-	}
-	v.AddError("unknown key %q", key)
-	return ""
-}
-
-func (sampleEntityFieldResolver) ResolveFreeText(v *sqlcompiler.Visitor, value string) string {
-	return v.BuildFreeTextContains(v.Sb, "sample_entity.name", value)
-}
-```
-
-### Special cases
-
-Each entity decides its own key policy. The sections below grow the `sample_entity` resolver; the full real-world adopter to read alongside is dashboards' resolver, [pkg/modules/dashboard/impldashboard/listfilter_resolver.go](/pkg/modules/dashboard/impldashboard/listfilter_resolver.go).
-
-#### Reserved and non-reserved keys
-
-A resolver splits the key space in two:
-
-- Reserved keys are properties the entity defines for all its instances: every `sample_entity` has a `name`, `created_by`, `created_at` and `locked`, so those keys are claimed up front and always mean that property. The list API can advertise the set (dashboards and rules return `reservedKeywords`) so frontend suggestions never go stale.
-- Every other key is non-reserved: things users attach to individual instances as they want. For `sample_entity` those are labels, so `team = infra` matches only the instances a user labeled `team: infra` (built out under [Relation tables](#relation-tables)). Dashboards exposes tags the same way, and an entity is free to back this with any other per-instance construct. An entity with nothing user-attached rejects unknown keys with `v.AddError`, as the resolver above does.
-
-So the first thing `ResolveComparison` does is route the key:
-
-```go
-if allowedOperations, isReserved := ReservedOps[key]; isReserved {
-	return r.resolveReservedKey(v, ctx, operation, key, allowedOperations)
-}
-return r.buildLabelComparison(v, ctx, operation, key)
-```
-
-#### Operator allowlists
-
-Not every operator makes sense on every key, reserved or not (`name BETWEEN ...` does not). Declare what each accepts and check before building. `sample_entity` pairs each reserved key with its allowed operators:
-
-```go
-var ReservedOps = map[string]map[qbtypesv5.FilterOperator]struct{}{
-	"name":       stringSearchOps(),
-	"created_at": numericRangeOps(),
-	"locked":     boolOps(),
-}
-
-if _, allowed := allowedOperations[operation]; !allowed {
-	v.AddError("operator %s is not allowed for key %q", sqlcompiler.OperationName(operation), key)
-	return ""
-}
-```
-
-Non-reserved keys get allowlists too, usually one shared list since they are all shaped alike: a label lookup is a string match, so `created_at > '2025-01-01T00:00:00Z'` is fine but `team > infra` is rejected with an `AddError`. Dashboards' real instances of both are `ReservedOps` and `TagKeyOps` in [pkg/types/dashboardtypes](/pkg/types/dashboardtypes/list_filter.go).
-
-#### JSON columns
-
-Suppose `sample_entity` keeps `name` inside a `data` JSON column instead of a plain column. The resolver then builds the column expression with `v.Formatter.JSONExtractString`, which renders correctly on both dialects, and `name CONTAINS cpu` compiles (SQLite flavor) to:
-
-```sql
-json_extract("sample_entity"."data", '$.name') LIKE ? ESCAPE '\'
--- args: ["%cpu%"]
-```
-
-Dashboards stores name and description this way inside `dashboard.data`.
-
-#### Relation tables
-
-The label policy from above: say `sample_entity` labels live in `label`/`label_relation` join tables, so a label term becomes an `EXISTS` subquery. Build it on a fresh `sqlbuilder.SelectBuilder` and pass that builder into `BuildStringOperation`, so its arguments thread through the compile. `team = infra` compiles to:
-
-```sql
-EXISTS (SELECT 1 FROM label_relation lr JOIN label l ON l.id = lr.label_id
-	WHERE lr.entity_id = sample_entity.id
-	AND LOWER(l.key) = LOWER(?) AND l.value = ?)
--- args: ["team", "infra"]
-```
-
-For a negative operator (`team != infra`), build the positive predicate and toggle `NotExists` on the outer builder, so rows without the label at all also match. Dashboards' tags follow this exact pattern over the shared `tag`/`tag_relation` tables.
-
-## How to wire it in?
-
-Give the module a thin `Compile` wrapper that maps the error list onto the module's error code:
-
-```go
-func Compile(query string, formatter sqlstore.SQLFormatter) (*sqlcompiler.Compiled, error) {
-	compiled, errs := sqlcompiler.Compile(query, formatter, sampleEntityFieldResolver{})
-	if len(errs) > 0 {
-		return nil, errors.NewInvalidInputf(sampleentitytypes.ErrCodeSampleEntityListFilterInvalid,
-			"invalid filter query: %s", strings.Join(errs, "; "))
-	}
-	return compiled, nil
-}
-```
-
-Dashboards' real wrapper is [pkg/modules/dashboard/impldashboard/listfilter.go](/pkg/modules/dashboard/impldashboard/listfilter.go).
-
-The store then appends `compiled.SQL` with `compiled.Args` to its list query when `!compiled.IsEmpty()`.
-
-## Caveats
-
-- This compiler is for the relational store only. Telemetry filters are a different pipeline; they stay on querybuilder's ClickHouse visitor.
-- A `key REGEXP value` term parses, but no predicate builder implements it: `BuildStringOperation` rejects it with an error, since SQLite has no portable `REGEXP` (Postgres spells it `~`). A resolver may implement it itself for a dialect it controls.
-- `has(...)` function calls and `search(...)` from the telemetry grammar are not implemented; they fall through to `ResolveFreeText` as literal text.

docs/contributing/go/provider.md

@@ -17,7 +17,7 @@ For example, the [prometheus](/pkg/prometheus) provider delivers a prometheus en
 
 - `pkg/prometheus/prometheus.go` - Interface definition
 - `pkg/prometheus/config.go` - Configuration
-- `pkg/prometheus/clickhouseprometheusv2/provider.go` - Clickhouse-powered implementation
+- `pkg/prometheus/clickhouseprometheus/provider.go` - Clickhouse-powered implementation
 - `pkg/prometheus/prometheustest/provider.go` - Mock implementation
 
 ## How to wire it up?

docs/contributing/go/readme.md

@@ -21,5 +21,4 @@ We **recommend** (almost enforce) reviewing these guides before contributing to
 - [Packages](packages.md) - Naming, layout, and conventions for `pkg/` packages
 - [Service](service.md) - Managed service lifecycle with `factory.Service`
 - [SQL](sql.md) - Database and SQL patterns
-- [DSL Filtering to SQL](dslfilteringtosql.md) - Compiling the list filter DSL to relational-store WHERE clauses
 - [Types](types.md) - Domain types, request/response bodies, and storage rows in `pkg/types/`

docs/contributing/prometheus.md

@@ -9,16 +9,15 @@ change breaks an invariant, flag it and discuss it first.
 
 ---
 
-## Why the provider looks like this
+## Why a second provider
 
-The removed v1 provider served the promql engine through the remote-read
-protobuf adapter. It fetched every raw sample of a query's union window,
-serialized all of them, and gave them to the engine. The cost followed the
-ingested data, not the question. This is how a dashboard of PromQL panels
-could take an instance down. v2 replaced it after a byte-level parity
-rollout, and v1 was then deleted.
+The v1 provider (`pkg/prometheus/clickhouseprometheus`) serves the promql
+engine through the remote-read protobuf adapter. It fetches every raw sample
+of a query's union window. It serializes all of them and gives them to the
+engine. The cost follows the ingested data, not the question. This is how a
+dashboard of PromQL panels can take an instance down.
 
-Each query runs in one of two ways. The classifier decides per query:
+In v2, each query runs in one of two ways. The classifier decides per query:
 
 - **Transpiled**: ClickHouse evaluates the query. Only final (or near-final)
   per-group grid arrays come back. The statements use the
@@ -31,7 +30,7 @@ Each query runs in one of two ways. The classifier decides per query:
 lost user. A construct that cannot reproduce engine semantics exactly falls
 back. It does not approximate.** The conformance suite
 (`tests/integration/tests/promqlconformance/`) replays Prometheus' own test
-corpus against the provider. It is the arbiter. The classification golden
+corpus against both providers. It is the arbiter. The classification golden
 (`testdata/classification_golden.json`) freezes the route of each corpus
 expression. The rest of this document is the PromQL-to-SQL story. That
 mapping is where correctness is won or lost.
@@ -264,8 +263,7 @@ per-thread partials scaled memory with the thread count. The slide then
 combines each slot's at-most-W bucket partials by direct aggregation
 (`arraySum(arraySlice(...))`). Window sums are added the way the engine adds
 them. There is no prefix-sum differencing: its large-minus-large
-cancellation would drift past the conformance tolerance on counter-sized
-values.
+cancellation would drift past the shadow tolerance on counter-sized values.
 This is correct per slot because the bucket union is the exact window
 multiset, and avg/min/max/sum/count are order-insensitive on a multiset
 (sum/avg up to summation order; see the float caveat above). A slot with
@@ -335,7 +333,7 @@ can carry them.
 ## The engine path
 
 Queries that do not transpile run in the stock engine over this package's
-`storage.Querier`. Samples are fetched per
+`storage.Querier`. This is still not the v1 path. Samples are fetched per
 selector with the engine's per-selector hints, not the query-wide union
 window. So `foo / foo offset 1d` reads two narrow windows, not the widest
 one twice. Instant selectors of subquery-free queries fetch only the last
@@ -369,9 +367,9 @@ same predicates as a shard-local semi-join, not a GLOBAL broadcast of the
 matched set. The temporality filter on every samples statement is a
 semantic no-op: the matched fingerprints already come from those
 temporalities. It engages the leading samples primary-key column.
-Delta-temporality series stay invisible to PromQL here, as they were before
-v2. To make Delta visible is its own change with its own semantics to
-design. A Delta stream fed to `rate()`
+Delta-temporality series stay invisible to PromQL here, exactly as in v1.
+The rollout gate is parity with v1. To make Delta visible is its own change
+with its own semantics to design. A Delta stream fed to `rate()`
 as-if-cumulative would be wrong, not just new.
 
 ## Observability

ee/query-service/rules/manager_test.go

@@ -160,7 +160,7 @@ func TestManager_TestNotification_SendUnmatched_PromRule(t *testing.T) {
 			triggeredTestAlerts := []map[*alertmanagertypes.PostableAlert][]string{}
 
 			// Variable to store promProvider for cleanup
-			var promProvider prometheus.Prometheus
+			var promProvider *prometheustest.Provider
 
 			// Create manager using test factory with hooks
 			mgr := rules.NewTestManager(t, &rules.TestManagerOptions{
@@ -185,29 +185,76 @@ func TestManager_TestNotification_SendUnmatched_PromRule(t *testing.T) {
 				TelemetryStoreHook: func(store telemetrystore.TelemetryStore) {
 					mockStore := store.(*telemetrystoretest.Provider)
 
-					// Grid the TestNotification eval computes over (see
-					// Timestamps on base_rule); nil args match any window.
+					// Set up Prometheus-specific mock data
+					// Fingerprint columns for Prometheus queries
+					fingerprintCols := []cmock.ColumnType{
+						{Name: "fingerprint", Type: "UInt64"},
+						{Name: "any(labels)", Type: "String"},
+					}
+
+					// Samples columns for Prometheus queries
+					samplesCols := []cmock.ColumnType{
+						{Name: "metric_name", Type: "String"},
+						{Name: "fingerprint", Type: "UInt64"},
+						{Name: "unix_milli", Type: "Int64"},
+						{Name: "value", Type: "Float64"},
+						{Name: "flags", Type: "UInt32"},
+					}
+
+					// Calculate query time range similar to Prometheus rule tests
+					// TestNotification uses time.Now().UTC() for evaluation
+					// We calculate the query window based on current time to match what the actual evaluation will use
 					evalTime := baseTime
 					evalWindowMs := int64(5 * 60 * 1000) // 5 minutes in ms
-					gridEnd := (evalTime.UnixMilli() / 60000) * 60000
-					gridStart := gridEnd - evalWindowMs
+					evalTimeMs := evalTime.UnixMilli()
+					queryStart := ((evalTimeMs-2*evalWindowMs)/60000)*60000 + 1 // truncate to minute + 1ms
+					queryEnd := (evalTimeMs / 60000) * 60000                    // truncate to minute
 
-					tsList := make([]int64, 0, len(tc.Values))
-					vList := make([]float64, 0, len(tc.Values))
+					// Create fingerprint data
+					fingerprint := uint64(12345)
+					labelsJSON := `{"__name__":"test_metric"}`
+					fingerprintData := [][]interface{}{
+						{fingerprint, labelsJSON},
+					}
+					fingerprintRows := cmock.NewRows(fingerprintCols, fingerprintData)
+
+					// Create samples data from test case values, calculating timestamps relative to baseTime
+					validSamplesData := make([][]interface{}, 0)
 					for _, v := range tc.Values {
 						// Skip NaN and Inf values in the samples data
 						if math.IsNaN(v.Value) || math.IsInf(v.Value, 0) {
 							continue
 						}
-						tsList = append(tsList, baseTime.Add(v.Offset).UnixMilli())
-						vList = append(vList, v.Value)
+						// Calculate timestamp relative to baseTime
+						sampleTimestamp := baseTime.Add(v.Offset).UnixMilli()
+						validSamplesData = append(validSamplesData, []interface{}{
+							"test_metric",
+							fingerprint,
+							sampleTimestamp,
+							v.Value,
+							uint32(0), // flags - 0 means normal value
+						})
 					}
-					grid := prometheustest.LastSampleGrid(tsList, vList, gridStart, gridEnd, 60_000, 300_000)
+					samplesRows := cmock.NewRows(samplesCols, validSamplesData)
 
 					mock := mockStore.Mock()
-					mock.ExpectQuery("SELECT gkey").
-						WithArgs("test_metric", nil, nil, "test_metric", nil, nil).
-						WillReturnRows(cmock.NewRows(prometheustest.GridCols, [][]any{{`[["__name__","test_metric"]]`, grid}}))
+
+					// Mock the fingerprint query (for Prometheus label matching)
+					// args: $1=metric_name (the __name__ matcher maps onto the column)
+					mock.ExpectQuery("SELECT fingerprint, any").
+						WithArgs("test_metric").
+						WillReturnRows(fingerprintRows)
+
+					// Mock the samples query (for Prometheus metric data)
+					// args: metric_name IN (discovered names), subquery metric_name, start, end
+					mock.ExpectQuery("SELECT metric_name, fingerprint, unix_milli").
+						WithArgs(
+							"test_metric",
+							"test_metric",
+							queryStart,
+							queryEnd,
+						).
+						WillReturnRows(samplesRows)
 
 					// Create Prometheus provider for this test
 					promProvider = prometheustest.New(context.Background(), instrumentationtest.New().ToProviderSettings(), prometheus.Config{Timeout: 2 * time.Minute}, store)
@@ -242,6 +289,7 @@ func TestManager_TestNotification_SendUnmatched_PromRule(t *testing.T) {
 				assert.Empty(t, triggeredTestAlerts)
 			}
 
+			promProvider.Close()
 		})
 	}
 }

ee/sqlstore/postgressqlstore/formatter.go

@@ -23,6 +23,15 @@ func (f *formatter) JSONExtractString(column, path string) []byte {
 	return append(f.TextToJsonColumn(column), ops...)
 }
 
+func (f *formatter) JSONExtractMapValue(column, mapField, key string) []byte {
+	sql := f.TextToJsonColumn(column)
+	sql = append(sql, "->"...)
+	sql = schema.Append(f.bunf, sql, mapField)
+	sql = append(sql, "->>"...)
+	sql = schema.Append(f.bunf, sql, key)
+	return sql
+}
+
 func (f *formatter) JSONType(column, path string) []byte {
 	var sql []byte
 	sql = append(sql, "jsonb_typeof("...)

ee/sqlstore/postgressqlstore/formatter_test.go

@@ -55,6 +55,39 @@ func TestJSONExtractString(t *testing.T) {
 	}
 }
 
+func TestJSONExtractMapValue(t *testing.T) {
+	tests := []struct {
+		name     string
+		column   string
+		mapField string
+		key      string
+		expected string
+	}{
+		{
+			name:     "plain key",
+			column:   "data",
+			mapField: "labels",
+			key:      "team",
+			expected: `"data"::jsonb->'labels'->>'team'`,
+		},
+		{
+			name:     "dotted key stays one map entry",
+			column:   "data",
+			mapField: "labels",
+			key:      "k8s.cluster",
+			expected: `"data"::jsonb->'labels'->>'k8s.cluster'`,
+		},
+	}
+
+	for _, tt := range tests {
+		t.Run(tt.name, func(t *testing.T) {
+			f := newFormatter(pgdialect.New())
+			got := string(f.JSONExtractMapValue(tt.column, tt.mapField, tt.key))
+			assert.Equal(t, tt.expected, got)
+		})
+	}
+}
+
 func TestJSONType(t *testing.T) {
 	tests := []struct {
 		name     string

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

@@ -19,7 +19,9 @@ import type {
 
 import type {
 	CreateRule201,
+	CreateRuleView201,
 	DeleteRuleByIDPathParameters,
+	DeleteRuleViewPathParameters,
 	GetRuleByID200,
 	GetRuleByIDPathParameters,
 	GetRuleHistoryFilterKeys200,
@@ -40,13 +42,19 @@ import type {
 	GetRuleHistoryTopContributors200,
 	GetRuleHistoryTopContributorsParams,
 	GetRuleHistoryTopContributorsPathParameters,
+	ListRuleViews200,
 	ListRules200,
+	ListRulesV3200,
+	ListRulesV3Params,
 	PatchRuleByID200,
 	PatchRuleByIDPathParameters,
 	RenderErrorResponseDTO,
 	RuletypesPostableRuleDTO,
+	RuletypesPostableRuleViewDTO,
 	TestRule200,
 	UpdateRuleByIDPathParameters,
+	UpdateRuleView200,
+	UpdateRuleViewPathParameters,
 } from '../sigNoz.schemas';
 
 import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
@@ -73,7 +81,353 @@ const withQueryKey = <T extends object, K>(
 };
 
 /**
- * This endpoint lists all alert rules with their current evaluation state
+ * Returns every saved view in the calling user's org. Saved views are shared org-wide.
+ * @summary List rule saved views
+ */
+export const listRuleViews = (signal?: AbortSignal) => {
+	return GeneratedAPIInstance<ListRuleViews200>({
+		url: `/api/v2/rule_views`,
+		method: 'GET',
+		signal,
+	});
+};
+
+export const getListRuleViewsQueryKey = () => {
+	return [`/api/v2/rule_views`] as const;
+};
+
+export const getListRuleViewsQueryOptions = <
+	TData = Awaited<ReturnType<typeof listRuleViews>>,
+	TError = ErrorType<RenderErrorResponseDTO>,
+>(options?: {
+	query?: UseQueryOptions<
+		Awaited<ReturnType<typeof listRuleViews>>,
+		TError,
+		TData
+	>;
+}) => {
+	const { query: queryOptions } = options ?? {};
+
+	const queryKey = queryOptions?.queryKey ?? getListRuleViewsQueryKey();
+
+	const queryFn: QueryFunction<Awaited<ReturnType<typeof listRuleViews>>> = ({
+		signal,
+	}) => listRuleViews(signal);
+
+	return { queryKey, queryFn, ...queryOptions } as UseQueryOptions<
+		Awaited<ReturnType<typeof listRuleViews>>,
+		TError,
+		TData
+	> & { queryKey: QueryKey };
+};
+
+export type ListRuleViewsQueryResult = NonNullable<
+	Awaited<ReturnType<typeof listRuleViews>>
+>;
+export type ListRuleViewsQueryError = ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary List rule saved views
+ */
+
+export function useListRuleViews<
+	TData = Awaited<ReturnType<typeof listRuleViews>>,
+	TError = ErrorType<RenderErrorResponseDTO>,
+>(options?: {
+	query?: UseQueryOptions<
+		Awaited<ReturnType<typeof listRuleViews>>,
+		TError,
+		TData
+	>;
+}): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
+	const queryOptions = getListRuleViewsQueryOptions(options);
+
+	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
+		queryKey: QueryKey;
+	};
+
+	return { ...query, queryKey: queryOptions.queryKey };
+}
+
+/**
+ * @summary List rule saved views
+ */
+export const invalidateListRuleViews = async (
+	queryClient: QueryClient,
+	options?: InvalidateOptions,
+): Promise<QueryClient> => {
+	await queryClient.invalidateQueries(
+		{ queryKey: getListRuleViewsQueryKey() },
+		options,
+	);
+
+	return queryClient;
+};
+
+/**
+ * Persists the calling user's rule listing state (query, states, sort, order) as a named, reusable view shared across the org.
+ * @summary Create rule saved view
+ */
+export const createRuleView = (
+	ruletypesPostableRuleViewDTO?: BodyType<RuletypesPostableRuleViewDTO>,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<CreateRuleView201>({
+		url: `/api/v2/rule_views`,
+		method: 'POST',
+		headers: { 'Content-Type': 'application/json' },
+		data: ruletypesPostableRuleViewDTO,
+		signal,
+	});
+};
+
+export const getCreateRuleViewMutationOptions = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof createRuleView>>,
+		TError,
+		{ data?: BodyType<RuletypesPostableRuleViewDTO> },
+		TContext
+	>;
+}): UseMutationOptions<
+	Awaited<ReturnType<typeof createRuleView>>,
+	TError,
+	{ data?: BodyType<RuletypesPostableRuleViewDTO> },
+	TContext
+> => {
+	const mutationKey = ['createRuleView'];
+	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 createRuleView>>,
+		{ data?: BodyType<RuletypesPostableRuleViewDTO> }
+	> = (props) => {
+		const { data } = props ?? {};
+
+		return createRuleView(data);
+	};
+
+	return { mutationFn, ...mutationOptions };
+};
+
+export type CreateRuleViewMutationResult = NonNullable<
+	Awaited<ReturnType<typeof createRuleView>>
+>;
+export type CreateRuleViewMutationBody =
+	| BodyType<RuletypesPostableRuleViewDTO>
+	| undefined;
+export type CreateRuleViewMutationError = ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary Create rule saved view
+ */
+export const useCreateRuleView = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof createRuleView>>,
+		TError,
+		{ data?: BodyType<RuletypesPostableRuleViewDTO> },
+		TContext
+	>;
+}): UseMutationResult<
+	Awaited<ReturnType<typeof createRuleView>>,
+	TError,
+	{ data?: BodyType<RuletypesPostableRuleViewDTO> },
+	TContext
+> => {
+	return useMutation(getCreateRuleViewMutationOptions(options));
+};
+/**
+ * Removes a saved view. Saved views are shared org-wide. Deleting a non-existent view returns 404.
+ * @summary Delete rule saved view
+ */
+export const deleteRuleView = (
+	{ id }: DeleteRuleViewPathParameters,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<void>({
+		url: `/api/v2/rule_views/${id}`,
+		method: 'DELETE',
+		signal,
+	});
+};
+
+export const getDeleteRuleViewMutationOptions = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof deleteRuleView>>,
+		TError,
+		{ pathParams: DeleteRuleViewPathParameters },
+		TContext
+	>;
+}): UseMutationOptions<
+	Awaited<ReturnType<typeof deleteRuleView>>,
+	TError,
+	{ pathParams: DeleteRuleViewPathParameters },
+	TContext
+> => {
+	const mutationKey = ['deleteRuleView'];
+	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 deleteRuleView>>,
+		{ pathParams: DeleteRuleViewPathParameters }
+	> = (props) => {
+		const { pathParams } = props ?? {};
+
+		return deleteRuleView(pathParams);
+	};
+
+	return { mutationFn, ...mutationOptions };
+};
+
+export type DeleteRuleViewMutationResult = NonNullable<
+	Awaited<ReturnType<typeof deleteRuleView>>
+>;
+
+export type DeleteRuleViewMutationError = ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary Delete rule saved view
+ */
+export const useDeleteRuleView = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof deleteRuleView>>,
+		TError,
+		{ pathParams: DeleteRuleViewPathParameters },
+		TContext
+	>;
+}): UseMutationResult<
+	Awaited<ReturnType<typeof deleteRuleView>>,
+	TError,
+	{ pathParams: DeleteRuleViewPathParameters },
+	TContext
+> => {
+	return useMutation(getDeleteRuleViewMutationOptions(options));
+};
+/**
+ * Replaces a saved view's name and data. Saved views are shared org-wide.
+ * @summary Update rule saved view
+ */
+export const updateRuleView = (
+	{ id }: UpdateRuleViewPathParameters,
+	ruletypesPostableRuleViewDTO?: BodyType<RuletypesPostableRuleViewDTO>,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<UpdateRuleView200>({
+		url: `/api/v2/rule_views/${id}`,
+		method: 'PUT',
+		headers: { 'Content-Type': 'application/json' },
+		data: ruletypesPostableRuleViewDTO,
+		signal,
+	});
+};
+
+export const getUpdateRuleViewMutationOptions = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof updateRuleView>>,
+		TError,
+		{
+			pathParams: UpdateRuleViewPathParameters;
+			data?: BodyType<RuletypesPostableRuleViewDTO>;
+		},
+		TContext
+	>;
+}): UseMutationOptions<
+	Awaited<ReturnType<typeof updateRuleView>>,
+	TError,
+	{
+		pathParams: UpdateRuleViewPathParameters;
+		data?: BodyType<RuletypesPostableRuleViewDTO>;
+	},
+	TContext
+> => {
+	const mutationKey = ['updateRuleView'];
+	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 updateRuleView>>,
+		{
+			pathParams: UpdateRuleViewPathParameters;
+			data?: BodyType<RuletypesPostableRuleViewDTO>;
+		}
+	> = (props) => {
+		const { pathParams, data } = props ?? {};
+
+		return updateRuleView(pathParams, data);
+	};
+
+	return { mutationFn, ...mutationOptions };
+};
+
+export type UpdateRuleViewMutationResult = NonNullable<
+	Awaited<ReturnType<typeof updateRuleView>>
+>;
+export type UpdateRuleViewMutationBody =
+	| BodyType<RuletypesPostableRuleViewDTO>
+	| undefined;
+export type UpdateRuleViewMutationError = ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary Update rule saved view
+ */
+export const useUpdateRuleView = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof updateRuleView>>,
+		TError,
+		{
+			pathParams: UpdateRuleViewPathParameters;
+			data?: BodyType<RuletypesPostableRuleViewDTO>;
+		},
+		TContext
+	>;
+}): UseMutationResult<
+	Awaited<ReturnType<typeof updateRuleView>>,
+	TError,
+	{
+		pathParams: UpdateRuleViewPathParameters;
+		data?: BodyType<RuletypesPostableRuleViewDTO>;
+	},
+	TContext
+> => {
+	return useMutation(getUpdateRuleViewMutationOptions(options));
+};
+/**
+ * This endpoint lists all alert rules with their current evaluation state. Deprecated: use ListRulesV3, which supports filtering, sorting and pagination.
+ * @deprecated
  * @summary List alert rules
  */
 export const listRules = (signal?: AbortSignal) => {
@@ -115,6 +469,7 @@ export type ListRulesQueryResult = NonNullable<
 export type ListRulesQueryError = ErrorType<RenderErrorResponseDTO>;
 
 /**
+ * @deprecated
  * @summary List alert rules
  */
 
@@ -134,6 +489,7 @@ export function useListRules<
 }
 
 /**
+ * @deprecated
  * @summary List alert rules
  */
 export const invalidateListRules = async (
@@ -1388,3 +1744,97 @@ export const useTestRule = <
 > => {
 	return useMutation(getTestRuleMutationOptions(options));
 };
+/**
+ * Returns a page of alert rules with their current evaluation state, trimmed to the fields the list page renders. Supports a filter DSL (`query`), a repeated `states` filter applied after the state overlay, sort (`updated_at`/`created_at`/`name`/`state`/`severity`), order (`asc`/`desc`), and offset-based pagination (`limit`/`offset`). The response also carries the org's label pairs and the reserved filter keys for building filter suggestions.
+ * @summary List alert rules (v3)
+ */
+export const listRulesV3 = (
+	params?: ListRulesV3Params,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<ListRulesV3200>({
+		url: `/api/v3/rules`,
+		method: 'GET',
+		params,
+		signal,
+	});
+};
+
+export const getListRulesV3QueryKey = (params?: ListRulesV3Params) => {
+	return [`/api/v3/rules`, ...(params ? [params] : [])] as const;
+};
+
+export const getListRulesV3QueryOptions = <
+	TData = Awaited<ReturnType<typeof listRulesV3>>,
+	TError = ErrorType<RenderErrorResponseDTO>,
+>(
+	params?: ListRulesV3Params,
+	options?: {
+		query?: UseQueryOptions<
+			Awaited<ReturnType<typeof listRulesV3>>,
+			TError,
+			TData
+		>;
+	},
+) => {
+	const { query: queryOptions } = options ?? {};
+
+	const queryKey = queryOptions?.queryKey ?? getListRulesV3QueryKey(params);
+
+	const queryFn: QueryFunction<Awaited<ReturnType<typeof listRulesV3>>> = ({
+		signal,
+	}) => listRulesV3(params, signal);
+
+	return { queryKey, queryFn, ...queryOptions } as UseQueryOptions<
+		Awaited<ReturnType<typeof listRulesV3>>,
+		TError,
+		TData
+	> & { queryKey: QueryKey };
+};
+
+export type ListRulesV3QueryResult = NonNullable<
+	Awaited<ReturnType<typeof listRulesV3>>
+>;
+export type ListRulesV3QueryError = ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary List alert rules (v3)
+ */
+
+export function useListRulesV3<
+	TData = Awaited<ReturnType<typeof listRulesV3>>,
+	TError = ErrorType<RenderErrorResponseDTO>,
+>(
+	params?: ListRulesV3Params,
+	options?: {
+		query?: UseQueryOptions<
+			Awaited<ReturnType<typeof listRulesV3>>,
+			TError,
+			TData
+		>;
+	},
+): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
+	const queryOptions = getListRulesV3QueryOptions(params, options);
+
+	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
+		queryKey: QueryKey;
+	};
+
+	return { ...query, queryKey: queryOptions.queryKey };
+}
+
+/**
+ * @summary List alert rules (v3)
+ */
+export const invalidateListRulesV3 = async (
+	queryClient: QueryClient,
+	params?: ListRulesV3Params,
+	options?: InvalidateOptions,
+): Promise<QueryClient> => {
+	await queryClient.invalidateQueries(
+		{ queryKey: getListRulesV3QueryKey(params) },
+		options,
+	);
+
+	return queryClient;
+};

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

@@ -10060,6 +10060,149 @@ export interface RuletypesGettableTestRuleDTO {
 	message?: string;
 }
 
+export interface RuletypesLabelPairDTO {
+	/**
+	 * @type string
+	 */
+	key: string;
+	/**
+	 * @type string
+	 */
+	value: string;
+}
+
+export enum RuletypesListOrderDTO {
+	asc = 'asc',
+	desc = 'desc',
+}
+export enum RuletypesListSortDTO {
+	updated_at = 'updated_at',
+	created_at = 'created_at',
+	name = 'name',
+	state = 'state',
+	severity = 'severity',
+}
+export type RuletypesListableRuleDTOLabels = { [key: string]: string };
+
+export enum RuletypesRuleTypeDTO {
+	threshold_rule = 'threshold_rule',
+	promql_rule = 'promql_rule',
+	anomaly_rule = 'anomaly_rule',
+}
+export interface RuletypesListableRuleDTO {
+	/**
+	 * @type string
+	 */
+	alert: string;
+	alertType: RuletypesAlertTypeDTO;
+	/**
+	 * @type string
+	 * @format date-time
+	 */
+	createdAt?: string;
+	/**
+	 * @type string
+	 */
+	createdBy?: string;
+	/**
+	 * @type string
+	 */
+	description?: string;
+	/**
+	 * @type boolean
+	 */
+	disabled?: boolean;
+	/**
+	 * @type string
+	 */
+	id: string;
+	/**
+	 * @type object
+	 */
+	labels?: RuletypesListableRuleDTOLabels;
+	ruleType: RuletypesRuleTypeDTO;
+	state: RuletypesAlertStateDTO;
+	/**
+	 * @type string
+	 * @format date-time
+	 */
+	updatedAt?: string;
+	/**
+	 * @type string
+	 */
+	updatedBy?: string;
+}
+
+export interface RuletypesRuleViewDataDTO {
+	order?: RuletypesListOrderDTO;
+	/**
+	 * @type string
+	 */
+	query?: string;
+	sort?: RuletypesListSortDTO;
+	/**
+	 * @type array
+	 */
+	states?: string[];
+	/**
+	 * @type string
+	 */
+	version: string;
+}
+
+export interface RuletypesRuleViewDTO {
+	/**
+	 * @type string
+	 * @format date-time
+	 */
+	createdAt?: string;
+	data: RuletypesRuleViewDataDTO;
+	/**
+	 * @type string
+	 */
+	id: string;
+	/**
+	 * @type string
+	 */
+	name: string;
+	/**
+	 * @type string
+	 */
+	orgId: string;
+	/**
+	 * @type string
+	 * @format date-time
+	 */
+	updatedAt?: string;
+}
+
+export interface RuletypesListableRuleViewsDTO {
+	/**
+	 * @type array
+	 */
+	views: RuletypesRuleViewDTO[];
+}
+
+export interface RuletypesListableRulesDTO {
+	/**
+	 * @type array
+	 */
+	labels: RuletypesLabelPairDTO[];
+	/**
+	 * @type array
+	 */
+	reservedKeywords: string[];
+	/**
+	 * @type array
+	 */
+	rules: RuletypesListableRuleDTO[];
+	/**
+	 * @type integer
+	 * @format int64
+	 */
+	total: number;
+}
+
 export interface RuletypesRenotifyDTO {
 	/**
 	 * @type array,null
@@ -10156,11 +10299,6 @@ export interface RuletypesRuleConditionDTO {
 	thresholds?: RuletypesRuleThresholdDataDTO;
 }
 
-export enum RuletypesRuleTypeDTO {
-	threshold_rule = 'threshold_rule',
-	promql_rule = 'promql_rule',
-	anomaly_rule = 'anomaly_rule',
-}
 export interface RuletypesPostableRuleDTO {
 	/**
 	 * @type string
@@ -10213,6 +10351,14 @@ export interface RuletypesPostableRuleDTO {
 	version?: string;
 }
 
+export interface RuletypesPostableRuleViewDTO {
+	data: RuletypesRuleViewDataDTO;
+	/**
+	 * @type string
+	 */
+	name: string;
+}
+
 export type RuletypesRuleDTOAnnotations = { [key: string]: string };
 
 export type RuletypesRuleDTOLabels = { [key: string]: string };
@@ -13493,6 +13639,36 @@ export type GetUsersByRoleID200 = {
 	status: string;
 };
 
+export type ListRuleViews200 = {
+	data: RuletypesListableRuleViewsDTO;
+	/**
+	 * @type string
+	 */
+	status: string;
+};
+
+export type CreateRuleView201 = {
+	data: RuletypesRuleViewDTO;
+	/**
+	 * @type string
+	 */
+	status: string;
+};
+
+export type DeleteRuleViewPathParameters = {
+	id: string;
+};
+export type UpdateRuleViewPathParameters = {
+	id: string;
+};
+export type UpdateRuleView200 = {
+	data: RuletypesRuleViewDTO;
+	/**
+	 * @type string
+	 */
+	status: string;
+};
+
 export type ListRules200 = {
 	/**
 	 * @type array
@@ -14054,6 +14230,45 @@ export type GetMetricDashboardsV2200 = {
 	status: string;
 };
 
+export type ListRulesV3Params = {
+	/**
+	 * @type string
+	 * @description undefined
+	 */
+	query?: string;
+	/**
+	 * @type array
+	 * @description undefined
+	 */
+	states?: string[];
+	/**
+	 * @description undefined
+	 */
+	sort?: RuletypesListSortDTO;
+	/**
+	 * @description undefined
+	 */
+	order?: RuletypesListOrderDTO;
+	/**
+	 * @type integer
+	 * @description undefined
+	 */
+	limit?: number;
+	/**
+	 * @type integer
+	 * @description undefined
+	 */
+	offset?: number;
+};
+
+export type ListRulesV3200 = {
+	data: RuletypesListableRulesDTO;
+	/**
+	 * @type string
+	 */
+	status: string;
+};
+
 export type GetFlamegraphPathParameters = {
 	traceID: string;
 };

frontend/src/components/InputWithLabel/InputWithLabel.tsx

@@ -17,7 +17,6 @@ function InputWithLabel({
 	onChange,
 	className,
 	closeIcon,
-	disabled,
 }: {
 	label: string;
 	initialValue?: string | number | null;
@@ -28,7 +27,6 @@ function InputWithLabel({
 	onChange: (value: string) => void;
 	className?: string;
 	closeIcon?: React.ReactNode;
-	disabled?: boolean;
 }): JSX.Element {
 	const [inputValue, setInputValue] = useState<string>(
 		initialValue ? initialValue.toString() : '',
@@ -55,7 +53,6 @@ function InputWithLabel({
 				type={type}
 				value={inputValue}
 				onChange={handleChange}
-				disabled={disabled}
 				name={label.toLowerCase()}
 				data-testid={`input-${label}`}
 			/>

frontend/src/components/QueryBuilderV2/QueryBuilderV2.tsx

@@ -1,18 +1,11 @@
 import { memo, useCallback, useEffect, useMemo, useRef } from 'react';
-import { TelemetrytypesSignalDTO } from 'api/generated/services/sigNoz.schemas';
-import { PANEL_TYPES } from 'constants/queryBuilder';
+import { OPERATORS, PANEL_TYPES } from 'constants/queryBuilder';
 import { Formula } from 'container/QueryBuilder/components/Formula';
 import { QueryBuilderProps } from 'container/QueryBuilder/QueryBuilder.interfaces';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { IBuilderTraceOperator } from 'types/api/queryBuilder/queryBuilderData';
 import { DataSource } from 'types/common/queryBuilder';
 
-import { QueryBuilderField } from './queryBuilderFields.types';
-import {
-	mergeQueryBuilderFieldsConfig,
-	RAW_QUERY_FIELDS,
-	resolveQueryBuilderField,
-} from './queryBuilderFields.utils';
 import { QueryBuilderV2Provider } from './QueryBuilderV2Context';
 import { clearPreviousQuery } from './QueryV2/previousQuery.utils';
 import QueryFooter from './QueryV2/QueryFooter/QueryFooter';
@@ -21,18 +14,12 @@ import TraceOperator from './QueryV2/TraceOperator/TraceOperator';
 
 import './QueryBuilderV2.styles.scss';
 
-// Raw rows come from logs or spans; metrics only exist aggregated.
-const RAW_QUERY_SIGNALS = [
-	TelemetrytypesSignalDTO.logs,
-	TelemetrytypesSignalDTO.traces,
-];
-
 export const QueryBuilderV2 = memo(function QueryBuilderV2({
 	config,
 	panelType: newPanelType,
-	fieldsConfig,
-	allowedDataSources,
-	isRawQuery = false,
+	filterConfigs = {},
+	queryComponents,
+	isListViewPanel = false,
 	showOnlyWhereClause = false,
 	showTraceOperator = false,
 	version,
@@ -84,48 +71,55 @@ export const QueryBuilderV2 = memo(function QueryBuilderV2({
 		};
 	}, []);
 
-	const resolvedConfig = useMemo(
-		() =>
-			mergeQueryBuilderFieldsConfig(
-				isRawQuery ? RAW_QUERY_FIELDS : undefined,
-				fieldsConfig,
-			),
-		[isRawQuery, fieldsConfig],
-	);
-
-	const additionalQueries = useMemo(
-		() =>
-			resolveQueryBuilderField(
-				QueryBuilderField.AdditionalQueries,
-				resolvedConfig,
-			),
-		[resolvedConfig],
-	);
-
-	const formula = useMemo(
-		() => resolveQueryBuilderField(QueryBuilderField.Formula, resolvedConfig),
-		[resolvedConfig],
-	);
-
 	const isMultiQueryAllowed = useMemo(
-		() => !additionalQueries.hidden && (!isRawQuery || showTraceOperator),
-		[additionalQueries.hidden, showTraceOperator, isRawQuery],
+		() => !isListViewPanel || showTraceOperator,
+		[showTraceOperator, isListViewPanel],
 	);
 
-	const queryDataSources = useMemo(
-		() => allowedDataSources ?? (isRawQuery ? RAW_QUERY_SIGNALS : undefined),
-		[allowedDataSources, isRawQuery],
-	);
+	const listViewLogFilterConfigs: QueryBuilderProps['filterConfigs'] =
+		useMemo(() => {
+			const config: QueryBuilderProps['filterConfigs'] = {
+				stepInterval: { isHidden: true, isDisabled: true },
+				having: { isHidden: true, isDisabled: true },
+				filters: {
+					customKey: 'body',
+					customOp: OPERATORS.CONTAINS,
+				},
+			};
 
-	// What the editor renders. A single-query builder edits the first query alone, so
-	// the query list beside it must not advertise ones there is no way to reach.
-	const renderedQueries = useMemo(
-		() =>
-			isMultiQueryAllowed
-				? currentQuery.builder.queryData
-				: currentQuery.builder.queryData.slice(0, 1),
-		[isMultiQueryAllowed, currentQuery.builder.queryData],
-	);
+			return config;
+		}, []);
+
+	const listViewTracesFilterConfigs: QueryBuilderProps['filterConfigs'] =
+		useMemo(() => {
+			const config: QueryBuilderProps['filterConfigs'] = {
+				stepInterval: { isHidden: true, isDisabled: true },
+				having: { isHidden: true, isDisabled: true },
+				limit: { isHidden: true, isDisabled: true },
+				filters: {
+					customKey: 'body',
+					customOp: OPERATORS.CONTAINS,
+				},
+			};
+
+			return config;
+		}, []);
+
+	const queryFilterConfigs = useMemo(() => {
+		if (isListViewPanel) {
+			return currentQuery.builder.queryData[0].dataSource === DataSource.TRACES
+				? listViewTracesFilterConfigs
+				: listViewLogFilterConfigs;
+		}
+
+		return filterConfigs;
+	}, [
+		isListViewPanel,
+		filterConfigs,
+		currentQuery.builder.queryData,
+		listViewLogFilterConfigs,
+		listViewTracesFilterConfigs,
+	]);
 
 	const traceOperator = useMemo((): IBuilderTraceOperator | undefined => {
 		if (
@@ -151,46 +145,31 @@ export const QueryBuilderV2 = memo(function QueryBuilderV2({
 		[showTraceOperator, traceOperator, hasAtLeastOneTraceQuery],
 	);
 
+	const shouldShowFooter = useMemo(
+		() =>
+			(!showOnlyWhereClause && !isListViewPanel) ||
+			(currentDataSource === DataSource.TRACES && showTraceOperator),
+		[isListViewPanel, showTraceOperator, showOnlyWhereClause, currentDataSource],
+	);
+
 	const showQueryList = useMemo(
-		() => (!showOnlyWhereClause && !isRawQuery) || showTraceOperator,
-		[isRawQuery, showOnlyWhereClause, showTraceOperator],
+		() => (!showOnlyWhereClause && !isListViewPanel) || showTraceOperator,
+		[isListViewPanel, showOnlyWhereClause, showTraceOperator],
 	);
 
 	const showFormula = useMemo(() => {
-		if (formula.hidden) {
-			return false;
-		}
-
 		if (currentDataSource === DataSource.TRACES) {
-			return !isRawQuery;
+			return !isListViewPanel;
 		}
 
 		return true;
-	}, [formula.hidden, isRawQuery, currentDataSource]);
+	}, [isListViewPanel, currentDataSource]);
 
 	const showAddTraceOperator = useMemo(
 		() => showTraceOperator && !traceOperator && hasAtLeastOneTraceQuery,
 		[showTraceOperator, traceOperator, hasAtLeastOneTraceQuery],
 	);
 
-	// Nothing left to add means no footer at all, rather than an empty bar under the
-	// last query.
-	const shouldShowFooter = useMemo(
-		() =>
-			(!additionalQueries.hidden || showFormula || showAddTraceOperator) &&
-			((!showOnlyWhereClause && !isRawQuery) ||
-				(currentDataSource === DataSource.TRACES && showTraceOperator)),
-		[
-			additionalQueries.hidden,
-			showFormula,
-			showAddTraceOperator,
-			isRawQuery,
-			showTraceOperator,
-			showOnlyWhereClause,
-			currentDataSource,
-		],
-	);
-
 	const handleKeyDown = useCallback(
 		(e: React.KeyboardEvent<HTMLDivElement>): void => {
 			const target = e.target as HTMLElement | null;
@@ -220,8 +199,8 @@ export const QueryBuilderV2 = memo(function QueryBuilderV2({
 							key={currentQuery.builder.queryData[0].queryName}
 							index={0}
 							query={currentQuery.builder.queryData[0]}
-							fieldsConfig={fieldsConfig}
-							allowedDataSources={queryDataSources}
+							filterConfigs={queryFilterConfigs}
+							queryComponents={queryComponents}
 							isMultiQueryAllowed={isMultiQueryAllowed}
 							showTraceOperator={showTraceOperator}
 							hasTraceOperator={hasTraceOperator}
@@ -229,7 +208,7 @@ export const QueryBuilderV2 = memo(function QueryBuilderV2({
 							isAvailableToDisable={false}
 							queryVariant={config?.queryVariant || 'dropdown'}
 							showOnlyWhereClause={showOnlyWhereClause}
-							isRawQuery={isRawQuery}
+							isListViewPanel={isListViewPanel}
 							signalSource={currentQuery.builder.queryData[0].source as 'meter' | ''}
 							onSignalSourceChange={onSignalSourceChange || ((): void => {})}
 							signalSourceChangeEnabled={signalSourceChangeEnabled}
@@ -237,14 +216,14 @@ export const QueryBuilderV2 = memo(function QueryBuilderV2({
 							savePreviousQuery={savePreviousQuery}
 						/>
 					) : (
-						renderedQueries.map((query, index) => (
+						currentQuery.builder.queryData.map((query, index) => (
 							<QueryV2
 								ref={containerRef}
 								key={query.queryName}
 								index={index}
 								query={query}
-								fieldsConfig={fieldsConfig}
-								allowedDataSources={queryDataSources}
+								filterConfigs={queryFilterConfigs}
+								queryComponents={queryComponents}
 								version={version}
 								isMultiQueryAllowed={isMultiQueryAllowed}
 								isAvailableToDisable={false}
@@ -252,7 +231,7 @@ export const QueryBuilderV2 = memo(function QueryBuilderV2({
 								hasTraceOperator={hasTraceOperator}
 								queryVariant={config?.queryVariant || 'dropdown'}
 								showOnlyWhereClause={showOnlyWhereClause}
-								isRawQuery={isRawQuery}
+								isListViewPanel={isListViewPanel}
 								signalSource={query.source as 'meter' | ''}
 								onSignalSourceChange={onSignalSourceChange || ((): void => {})}
 								signalSourceChangeEnabled={signalSourceChangeEnabled}
@@ -272,7 +251,14 @@ export const QueryBuilderV2 = memo(function QueryBuilderV2({
 
 									return (
 										<div key={formula.queryName} className="qb-formula">
-											<Formula query={query} formula={formula} index={index} isQBV2 />
+											<Formula
+												filterConfigs={filterConfigs}
+												query={query}
+												formula={formula}
+												index={index}
+												isAdditionalFilterEnable={false}
+												isQBV2
+											/>
 										</div>
 									);
 								})}
@@ -281,13 +267,8 @@ export const QueryBuilderV2 = memo(function QueryBuilderV2({
 
 					{shouldShowFooter && (
 						<QueryFooter
-							showAddQuery={!additionalQueries.hidden}
 							showAddFormula={showFormula}
-							isAddFormulaDisabled={formula.disabled}
-							addFormulaDisabledReason={formula.reason}
 							addNewBuilderQuery={addNewBuilderQuery}
-							isAddQueryDisabled={additionalQueries.disabled}
-							addQueryDisabledReason={additionalQueries.reason}
 							addNewFormula={addNewFormula}
 							addTraceOperator={addTraceOperator}
 							showAddTraceOperator={showAddTraceOperator}
@@ -296,8 +277,7 @@ export const QueryBuilderV2 = memo(function QueryBuilderV2({
 
 					{hasTraceOperator && (
 						<TraceOperator
-							isRawQuery={isRawQuery}
-							fieldsConfig={resolvedConfig}
+							isListViewPanel={isListViewPanel}
 							traceOperator={traceOperator as IBuilderTraceOperator}
 						/>
 					)}
@@ -305,7 +285,7 @@ export const QueryBuilderV2 = memo(function QueryBuilderV2({
 
 				{showQueryList && (
 					<div className="query-names-section">
-						{renderedQueries.map((query) => (
+						{currentQuery.builder.queryData.map((query) => (
 							<div key={query.queryName} className="query-name">
 								{query.queryName}
 							</div>

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

@@ -23,11 +23,6 @@
 		align-items: center;
 		justify-content: center;
 		gap: var(--margin-2);
-
-		&--disabled {
-			opacity: 0.45;
-			cursor: not-allowed;
-		}
 	}
 }
 

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

@@ -1,6 +1,5 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { Button, Tooltip } from 'antd';
-import cx from 'classnames';
 import { ToggleGroupSimple } from '@signozhq/ui/toggle-group';
 import InputWithLabel from 'components/InputWithLabel/InputWithLabel';
 import { PANEL_TYPES } from 'constants/queryBuilder';
@@ -15,16 +14,6 @@ import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
 import { MetricAggregation } from 'types/api/v5/queryRange';
 import { DataSource, ReduceOperators } from 'types/common/queryBuilder';
 
-import {
-	QueryBuilderField,
-	QueryBuilderFieldsConfig,
-} from '../../queryBuilderFields.types';
-import {
-	mergeQueryBuilderFieldsConfig,
-	RAW_QUERY_FIELDS,
-	resolveQueryBuilderFields,
-} from '../../queryBuilderFields.utils';
-
 import HavingFilter from './HavingFilter/HavingFilter';
 import { buildDefaultLegendFromGroupBy } from './utils';
 
@@ -33,37 +22,34 @@ import './QueryAddOns.styles.scss';
 interface AddOn {
 	icon: React.ReactNode;
 	label: string;
-	key: QueryBuilderField;
+	key: string;
 	description?: string;
 	docLink?: string;
 }
 
-/** Fields the add-on bar does not own: each has its own control elsewhere in the query. */
-type NonAddOnField =
-	| QueryBuilderField.Aggregation
-	| QueryBuilderField.StepInterval
-	| QueryBuilderField.Functions
-	| QueryBuilderField.Formula
-	| QueryBuilderField.AdditionalQueries;
-
-// Omit rather than Partial, so a field added to the enum has to be placed on one side.
-const ADD_ONS_KEYS_TO_QUERY_PATH: Omit<
-	Record<QueryBuilderField, string>,
-	NonAddOnField
-> = {
-	[QueryBuilderField.GroupBy]: 'groupBy',
-	[QueryBuilderField.Having]: 'having.expression',
-	[QueryBuilderField.OrderBy]: 'orderBy',
-	[QueryBuilderField.Limit]: 'limit',
-	[QueryBuilderField.Legend]: 'legend',
-	[QueryBuilderField.ReduceTo]: 'reduceTo',
+const ADD_ONS_KEYS = {
+	GROUP_BY: 'group_by',
+	HAVING: 'having',
+	ORDER_BY: 'order_by',
+	LIMIT: 'limit',
+	LEGEND_FORMAT: 'legend_format',
+	REDUCE_TO: 'reduce_to',
 };
 
-const ADD_ONS: AddOn[] = [
+const ADD_ONS_KEYS_TO_QUERY_PATH = {
+	[ADD_ONS_KEYS.GROUP_BY]: 'groupBy',
+	[ADD_ONS_KEYS.HAVING]: 'having.expression',
+	[ADD_ONS_KEYS.ORDER_BY]: 'orderBy',
+	[ADD_ONS_KEYS.LIMIT]: 'limit',
+	[ADD_ONS_KEYS.LEGEND_FORMAT]: 'legend',
+	[ADD_ONS_KEYS.REDUCE_TO]: 'reduceTo',
+};
+
+const ADD_ONS = [
 	{
 		icon: <BarChart size={14} />,
 		label: 'Group By',
-		key: QueryBuilderField.GroupBy,
+		key: ADD_ONS_KEYS.GROUP_BY,
 		description:
 			'Break down data by attributes like service name, endpoint, status code, or region. Essential for spotting patterns and comparing performance across different segments.',
 		docLink: 'https://signoz.io/docs/querying/aggregation-grouping/#grouping',
@@ -71,7 +57,7 @@ const ADD_ONS: AddOn[] = [
 	{
 		icon: <ScrollText size={14} />,
 		label: 'Having',
-		key: QueryBuilderField.Having,
+		key: ADD_ONS_KEYS.HAVING,
 		description:
 			'Filter grouped results based on aggregate conditions. Show only groups meeting specific criteria, like error rates > 5% or p99 latency > 500',
 		docLink:
@@ -80,7 +66,7 @@ const ADD_ONS: AddOn[] = [
 	{
 		icon: <ScrollText size={14} />,
 		label: 'Order By',
-		key: QueryBuilderField.OrderBy,
+		key: ADD_ONS_KEYS.ORDER_BY,
 		description:
 			'Sort results to surface what matters most. Quickly identify slowest operations, most frequent errors, or highest resource consumers.',
 		docLink:
@@ -89,7 +75,7 @@ const ADD_ONS: AddOn[] = [
 	{
 		icon: <ScrollText size={14} />,
 		label: 'Limit',
-		key: QueryBuilderField.Limit,
+		key: ADD_ONS_KEYS.LIMIT,
 		description:
 			'Show only the top/bottom N results. Perfect for focusing on outliers, reducing noise, and improving dashboard performance.',
 		docLink:
@@ -98,7 +84,7 @@ const ADD_ONS: AddOn[] = [
 	{
 		icon: <ScrollText size={14} />,
 		label: 'Legend format',
-		key: QueryBuilderField.Legend,
+		key: ADD_ONS_KEYS.LEGEND_FORMAT,
 		description:
 			'Customize series labels using variables like {{service.name}}-{{endpoint}}. Makes charts readable at a glance during incident investigation.',
 		docLink:
@@ -106,10 +92,10 @@ const ADD_ONS: AddOn[] = [
 	},
 ];
 
-const REDUCE_TO: AddOn = {
+const REDUCE_TO = {
 	icon: <ScrollText size={14} />,
 	label: 'Reduce to',
-	key: QueryBuilderField.ReduceTo,
+	key: ADD_ONS_KEYS.REDUCE_TO,
 	description:
 		'Apply mathematical operations like sum, average, min, max, or percentiles to reduce multiple time series into a single value.',
 	docLink:
@@ -168,26 +154,26 @@ function TooltipContent({
 function QueryAddOns({
 	query,
 	version,
-	isRawQuery,
+	isListViewPanel,
 	showReduceTo,
 	panelType,
 	index,
-	fieldsConfig,
 	isForTraceOperator = false,
 }: {
 	query: IBuilderQuery;
 	version: string;
-	isRawQuery: boolean;
+	isListViewPanel: boolean;
 	showReduceTo: boolean;
 	panelType: PANEL_TYPES | null;
 	index: number;
-	fieldsConfig?: QueryBuilderFieldsConfig;
 	isForTraceOperator?: boolean;
 }): JSX.Element {
+	const [addOns, setAddOns] = useState<AddOn[]>(ADD_ONS);
+
 	const [selectedViews, setSelectedViews] = useState<AddOn[]>([]);
 
 	const initializedRef = useRef(false);
-	const prevAvailableKeysRef = useRef<Set<QueryBuilderField> | null>(null);
+	const prevAvailableKeysRef = useRef<Set<string> | null>(null);
 
 	const { handleChangeQueryData } = useQueryOperations({
 		index,
@@ -198,62 +184,40 @@ function QueryAddOns({
 
 	const { handleSetQueryData } = useQueryBuilder();
 
-	const supportedAddOns = useMemo((): AddOn[] => {
-		let addOns: AddOn[];
+	useEffect(() => {
+		if (isListViewPanel) {
+			setAddOns([]);
 
-		if (panelType === PANEL_TYPES.VALUE) {
-			addOns = ADD_ONS.filter((addOn) => addOn.key === QueryBuilderField.Legend);
-		} else if (query.dataSource === DataSource.METRICS) {
-			// Group by for metrics is offered by MetricsAggregateSection instead.
-			addOns = ADD_ONS.filter((addOn) => addOn.key !== QueryBuilderField.GroupBy);
-		} else {
-			addOns = [...ADD_ONS];
+			setSelectedViews([
+				ADD_ONS.find((addOn) => addOn.key === ADD_ONS_KEYS.ORDER_BY) as AddOn,
+			]);
+
+			return;
 		}
 
-		return showReduceTo ? [...addOns, REDUCE_TO] : addOns;
-	}, [panelType, query.dataSource, showReduceTo]);
+		let filteredAddOns: AddOn[];
+		if (panelType === PANEL_TYPES.VALUE) {
+			// Filter out all add-ons except legend format
+			filteredAddOns = ADD_ONS.filter(
+				(addOn) => addOn.key === ADD_ONS_KEYS.LEGEND_FORMAT,
+			);
+		} else {
+			filteredAddOns = Object.values(ADD_ONS);
 
-	const resolvedFields = useMemo(
-		() =>
-			resolveQueryBuilderFields(
-				supportedAddOns.map((addOn) => addOn.key),
-				mergeQueryBuilderFieldsConfig(
-					isRawQuery ? RAW_QUERY_FIELDS : undefined,
-					fieldsConfig,
-				),
-			),
-		[supportedAddOns, fieldsConfig, isRawQuery],
-	);
+			if (query.dataSource === DataSource.METRICS) {
+				// Filter out group_by for metrics data source (handled in MetricsAggregateSection)
+				filteredAddOns = filteredAddOns.filter(
+					(addOn) => addOn.key !== ADD_ONS_KEYS.GROUP_BY,
+				);
+			}
+		}
 
-	const offeredAddOns = useMemo(
-		() =>
-			supportedAddOns.filter((addOn) => !resolvedFields.get(addOn.key)?.hidden),
-		[supportedAddOns, resolvedFields],
-	);
+		if (showReduceTo) {
+			filteredAddOns = [...filteredAddOns, REDUCE_TO];
+		}
+		setAddOns(filteredAddOns);
 
-	const pinnedAddOns = useMemo(
-		() => offeredAddOns.filter((addOn) => resolvedFields.get(addOn.key)?.pinned),
-		[offeredAddOns, resolvedFields],
-	);
-
-	const togglableAddOns = useMemo(
-		() => offeredAddOns.filter((addOn) => !resolvedFields.get(addOn.key)?.pinned),
-		[offeredAddOns, resolvedFields],
-	);
-
-	const isPinned = useCallback(
-		(key: QueryBuilderField): boolean => Boolean(resolvedFields.get(key)?.pinned),
-		[resolvedFields],
-	);
-
-	const isDisabled = useCallback(
-		(key: QueryBuilderField): boolean =>
-			Boolean(resolvedFields.get(key)?.disabled),
-		[resolvedFields],
-	);
-
-	useEffect(() => {
-		const availableAddOnKeys = new Set(offeredAddOns.map((a) => a.key));
+		const availableAddOnKeys = new Set(filteredAddOns.map((a) => a.key));
 		const previousKeys = prevAvailableKeysRef.current;
 		const hasAvailabilityItemsChanged =
 			previousKeys !== null &&
@@ -267,39 +231,27 @@ function QueryAddOns({
 			const activeAddOnKeys = new Set(
 				Object.entries(ADD_ONS_KEYS_TO_QUERY_PATH)
 					.filter(([, path]) => hasValue(get(query, path)))
-					.map(([key]) => key as QueryBuilderField),
+					.map(([key]) => key),
 			);
 
-			// Initial seeding from query values on mount. A disabled field never opens.
+			// Initial seeding from query values on mount
 			setSelectedViews(
-				offeredAddOns.filter((addOn) => {
-					const resolved = resolvedFields.get(addOn.key);
-
-					return (
-						resolved?.pinned ||
-						(activeAddOnKeys.has(addOn.key) && !resolved?.disabled)
-					);
-				}),
+				filteredAddOns.filter(
+					(addOn) =>
+						activeAddOnKeys.has(addOn.key) && availableAddOnKeys.has(addOn.key),
+				),
 			);
 			return;
 		}
 
-		setSelectedViews((prev) => {
-			const kept = prev.filter((view) => availableAddOnKeys.has(view.key));
-
-			const reopenedPinned = pinnedAddOns.filter(
-				(addOn) => !kept.some((view) => view.key === addOn.key),
-			);
-
-			return [...kept, ...reopenedPinned];
-		});
-	}, [offeredAddOns, pinnedAddOns, query]);
+		setSelectedViews((prev) =>
+			prev.filter((view) =>
+				filteredAddOns.some((addOn) => addOn.key === view.key),
+			),
+		);
+	}, [panelType, isListViewPanel, query, showReduceTo]);
 
 	const handleOptionClick = (clickedAddOn: AddOn): void => {
-		if (isDisabled(clickedAddOn.key)) {
-			return;
-		}
-
 		const isAlreadySelected = selectedViews.some(
 			(view) => view.key === clickedAddOn.key,
 		);
@@ -313,7 +265,7 @@ function QueryAddOns({
 			// and existing group-by keys, prefill the legend using all group-by keys.
 			// This keeps existing custom legends intact and only helps seed a sensible default.
 			if (
-				clickedAddOn.key === QueryBuilderField.Legend &&
+				clickedAddOn.key === ADD_ONS_KEYS.LEGEND_FORMAT &&
 				isEmpty(query?.legend) &&
 				Array.isArray(query.groupBy) &&
 				query.groupBy.length > 0
@@ -358,16 +310,9 @@ function QueryAddOns({
 		[handleSetQueryData, index, query],
 	);
 
-	const handleRemoveView = useCallback(
-		(key: QueryBuilderField): void => {
-			if (isPinned(key)) {
-				return;
-			}
-
-			setSelectedViews((prev) => prev.filter((view) => view.key !== key));
-		},
-		[isPinned],
-	);
+	const handleRemoveView = useCallback((key: string): void => {
+		setSelectedViews((prev) => prev.filter((view) => view.key !== key));
+	}, []);
 
 	const handleChangeQueryLegend = useCallback(
 		(value: string) => {
@@ -396,7 +341,7 @@ function QueryAddOns({
 		<div className="query-add-ons" data-testid="query-add-ons">
 			{selectedViews.length > 0 && (
 				<div className="selected-add-ons-content">
-					{selectedViews.find((view) => view.key === QueryBuilderField.GroupBy) && (
+					{selectedViews.find((view) => view.key === 'group_by') && (
 						<div className="add-on-content" data-testid="group-by-content">
 							<div className="periscope-input-with-label">
 								<Tooltip
@@ -424,17 +369,15 @@ function QueryAddOns({
 										onChange={handleChangeGroupByKeys}
 									/>
 								</div>
-								{!isPinned(QueryBuilderField.GroupBy) && (
-									<Button
-										className="close-btn periscope-btn ghost"
-										icon={<ChevronUp size={16} />}
-										onClick={(): void => handleRemoveView(QueryBuilderField.GroupBy)}
-									/>
-								)}
+								<Button
+									className="close-btn periscope-btn ghost"
+									icon={<ChevronUp size={16} />}
+									onClick={(): void => handleRemoveView('group_by')}
+								/>
 							</div>
 						</div>
 					)}
-					{selectedViews.find((view) => view.key === QueryBuilderField.Having) && (
+					{selectedViews.find((view) => view.key === 'having') && (
 						<div className="add-on-content" data-testid="having-content">
 							<div className="periscope-input-with-label">
 								<Tooltip
@@ -454,7 +397,11 @@ function QueryAddOns({
 								</Tooltip>
 								<div className="input">
 									<HavingFilter
-										onClose={(): void => handleRemoveView(QueryBuilderField.Having)}
+										onClose={(): void => {
+											setSelectedViews((prev) =>
+												prev.filter((view) => view.key !== 'having'),
+											);
+										}}
 										onChange={handleChangeHaving}
 										queryData={query}
 									/>
@@ -462,7 +409,7 @@ function QueryAddOns({
 							</div>
 						</div>
 					)}
-					{selectedViews.find((view) => view.key === QueryBuilderField.Limit) && (
+					{selectedViews.find((view) => view.key === 'limit') && (
 						<div className="add-on-content" data-testid="limit-content">
 							<InputWithLabel
 								label="Limit"
@@ -470,12 +417,16 @@ function QueryAddOns({
 								onChange={handleChangeLimit}
 								initialValue={query?.limit ?? undefined}
 								placeholder="Enter limit"
-								onClose={(): void => handleRemoveView(QueryBuilderField.Limit)}
+								onClose={(): void => {
+									setSelectedViews((prev) =>
+										prev.filter((view) => view.key !== 'limit'),
+									);
+								}}
 								closeIcon={<ChevronUp size={16} />}
 							/>
 						</div>
 					)}
-					{selectedViews.find((view) => view.key === QueryBuilderField.OrderBy) && (
+					{selectedViews.find((view) => view.key === 'order_by') && (
 						<div className="add-on-content" data-testid="order-by-content">
 							<div className="periscope-input-with-label">
 								<Tooltip
@@ -498,22 +449,22 @@ function QueryAddOns({
 										entityVersion={version}
 										query={query}
 										onChange={handleChangeOrderByKeys}
-										isRawQuery={isRawQuery}
+										isListViewPanel={isListViewPanel}
 										isNewQueryV2
 									/>
 								</div>
-								{!isPinned(QueryBuilderField.OrderBy) && (
+								{!isListViewPanel && (
 									<Button
 										className="close-btn periscope-btn ghost"
 										icon={<ChevronUp size={16} />}
-										onClick={(): void => handleRemoveView(QueryBuilderField.OrderBy)}
+										onClick={(): void => handleRemoveView('order_by')}
 									/>
 								)}
 							</div>
 						</div>
 					)}
 
-					{selectedViews.find((view) => view.key === QueryBuilderField.ReduceTo) &&
+					{selectedViews.find((view) => view.key === 'reduce_to') &&
 						showReduceTo && (
 							<div className="add-on-content" data-testid="reduce-to-content">
 								<div className="periscope-input-with-label">
@@ -536,25 +487,27 @@ function QueryAddOns({
 										<ReduceToFilter query={query} onChange={handleChangeReduceToV5} />
 									</div>
 
-									{!isPinned(QueryBuilderField.ReduceTo) && (
-										<Button
-											className="close-btn periscope-btn ghost"
-											icon={<ChevronUp size={16} />}
-											onClick={(): void => handleRemoveView(QueryBuilderField.ReduceTo)}
-										/>
-									)}
+									<Button
+										className="close-btn periscope-btn ghost"
+										icon={<ChevronUp size={16} />}
+										onClick={(): void => handleRemoveView('reduce_to')}
+									/>
 								</div>
 							</div>
 						)}
 
-					{selectedViews.find((view) => view.key === QueryBuilderField.Legend) && (
+					{selectedViews.find((view) => view.key === 'legend_format') && (
 						<div className="add-on-content" data-testid="legend-format-content">
 							<InputWithLabel
 								label="Legend format"
 								placeholder="Write legend format"
 								onChange={handleChangeQueryLegend}
 								initialValue={isEmpty(query?.legend) ? undefined : query?.legend}
-								onClose={(): void => handleRemoveView(QueryBuilderField.Legend)}
+								onClose={(): void => {
+									setSelectedViews((prev) =>
+										prev.filter((view) => view.key !== 'legend_format'),
+									);
+								}}
 								closeIcon={<ChevronUp size={16} />}
 							/>
 						</div>
@@ -567,49 +520,42 @@ function QueryAddOns({
 				className="add-ons-tabs"
 				value={selectedViews.map((view) => view.key)}
 				onChange={(newKeys: string[]): void => {
-					const oldKeys: string[] = selectedViews.map((view) => view.key);
+					const oldKeys = selectedViews.map((view) => view.key);
 					const toggledKey =
-						newKeys.find((key) => !oldKeys.includes(key)) ??
-						oldKeys.find((key) => !newKeys.includes(key));
+						newKeys.find((k) => !oldKeys.includes(k)) ??
+						oldKeys.find((k) => !newKeys.includes(k));
 					if (!toggledKey) {
 						return;
 					}
-					const clickedAddOn = togglableAddOns.find((a) => a.key === toggledKey);
+					const clickedAddOn = addOns.find((a) => a.key === toggledKey);
 					if (clickedAddOn) {
 						handleOptionClick(clickedAddOn);
 					}
 				}}
-				items={togglableAddOns.map((addOn) => {
-					const resolved = resolvedFields.get(addOn.key);
-
-					return {
-						value: addOn.key,
-						label: (
-							<Tooltip
-								title={
-									<TooltipContent
-										label={addOn.label}
-										description={resolved?.reason ?? addOn.description}
-										docLink={resolved?.disabled ? undefined : addOn.docLink}
-									/>
-								}
-								placement="top"
-								mouseEnterDelay={0.5}
+				items={addOns.map((addOn) => ({
+					value: addOn.key,
+					label: (
+						<Tooltip
+							title={
+								<TooltipContent
+									label={addOn.label}
+									description={addOn.description}
+									docLink={addOn.docLink}
+								/>
+							}
+							placement="top"
+							mouseEnterDelay={0.5}
+						>
+							<span
+								className="add-on-tab-title"
+								data-testid={`query-add-on-${addOn.key}`}
 							>
-								<span
-									className={cx('add-on-tab-title', {
-										'add-on-tab-title--disabled': resolved?.disabled,
-									})}
-									aria-disabled={resolved?.disabled}
-									data-testid={`query-add-on-${addOn.key}`}
-								>
-									{addOn.icon}
-									{addOn.label}
-								</span>
-							</Tooltip>
-						),
-					};
-				})}
+								{addOn.icon}
+								{addOn.label}
+							</span>
+						</Tooltip>
+					),
+				}))}
 			/>
 		</div>
 	);

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

@@ -8,12 +8,6 @@ import {
 } from 'types/api/queryBuilder/queryBuilderData';
 import { DataSource } from 'types/common/queryBuilder';
 
-import {
-	QueryBuilderField,
-	QueryBuilderFieldsConfig,
-} from '../../queryBuilderFields.types';
-import { resolveQueryBuilderField } from '../../queryBuilderFields.utils';
-
 import QueryAggregationSelect from './QueryAggregationSelect';
 
 import './QueryAggregation.styles.scss';
@@ -24,32 +18,24 @@ function QueryAggregationOptions({
 	onAggregationIntervalChange,
 	onChange,
 	queryData,
-	fieldsConfig,
 }: {
 	dataSource: DataSource;
 	panelType?: string;
 	onAggregationIntervalChange: (value: number) => void;
 	onChange?: (value: string) => void;
 	queryData: IBuilderQuery | IBuilderTraceOperator;
-	fieldsConfig?: QueryBuilderFieldsConfig;
 }): JSX.Element {
-	const stepInterval = useMemo(() => {
+	const showAggregationInterval = useMemo(() => {
 		if (panelType === PANEL_TYPES.VALUE) {
-			return { hidden: true, disabled: false, reason: undefined };
+			return false;
 		}
 
-		const isNonMetricSource =
-			dataSource === DataSource.TRACES || dataSource === DataSource.LOGS;
-
-		if (
-			isNonMetricSource &&
-			(panelType === PANEL_TYPES.TABLE || panelType === PANEL_TYPES.PIE)
-		) {
-			return { hidden: true, disabled: false, reason: undefined };
+		if (dataSource === DataSource.TRACES || dataSource === DataSource.LOGS) {
+			return !(panelType === PANEL_TYPES.TABLE || panelType === PANEL_TYPES.PIE);
 		}
 
-		return resolveQueryBuilderField(QueryBuilderField.StepInterval, fieldsConfig);
-	}, [dataSource, panelType, fieldsConfig]);
+		return true;
+	}, [dataSource, panelType]);
 
 	const handleAggregationIntervalChange = (value: string): void => {
 		onAggregationIntervalChange(Number(value));
@@ -71,24 +57,22 @@ function QueryAggregationOptions({
 					}
 				/>
 
-				{!stepInterval.hidden && (
+				{showAggregationInterval && (
 					<div className="query-aggregation-interval">
 						<Tooltip
 							title={
-								stepInterval.reason ?? (
-									<div>
-										Set the time interval for aggregation
-										<br />
-										<a
-											href="https://signoz.io/docs/userguide/query-builder-v5/#temporal-aggregation-within-each-time-series"
-											target="_blank"
-											rel="noopener noreferrer"
-											style={{ color: '#1890ff', textDecoration: 'underline' }}
-										>
-											Learn about step intervals
-										</a>
-									</div>
-								)
+								<div>
+									Set the time interval for aggregation
+									<br />
+									<a
+										href="https://signoz.io/docs/userguide/query-builder-v5/#temporal-aggregation-within-each-time-series"
+										target="_blank"
+										rel="noopener noreferrer"
+										style={{ color: '#1890ff', textDecoration: 'underline' }}
+									>
+										Learn about step intervals
+									</a>
+								</div>
 							}
 							placement="top"
 						>
@@ -108,7 +92,6 @@ function QueryAggregationOptions({
 								placeholder="Auto"
 								type="number"
 								onChange={handleAggregationIntervalChange}
-								disabled={stepInterval.disabled}
 								labelAfter
 							/>
 						</div>
@@ -122,7 +105,6 @@ function QueryAggregationOptions({
 QueryAggregationOptions.defaultProps = {
 	panelType: null,
 	onChange: undefined,
-	fieldsConfig: undefined,
 };
 
 export default QueryAggregationOptions;

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

@@ -17,13 +17,13 @@ function TraceOperatorSection({
 	const { currentQuery, panelType } = useQueryBuilder();
 
 	const showTraceOperatorWarning = useMemo(() => {
-		const isRawQueryPanel =
+		const isListViewPanel =
 			panelType === PANEL_TYPES.LIST || panelType === PANEL_TYPES.TRACE;
 		const hasMultipleQueries = currentQuery.builder.queryData.length > 1;
 		const hasTraceOperator =
 			currentQuery.builder.queryTraceOperator &&
 			currentQuery.builder.queryTraceOperator.length > 0;
-		return isRawQueryPanel && hasMultipleQueries && !hasTraceOperator;
+		return isListViewPanel && hasMultipleQueries && !hasTraceOperator;
 	}, [
 		currentQuery?.builder?.queryData,
 		currentQuery?.builder?.queryTraceOperator,
@@ -77,74 +77,50 @@ export default function QueryFooter({
 	addNewBuilderQuery,
 	addNewFormula,
 	addTraceOperator,
-	showAddQuery = true,
 	showAddFormula = true,
 	showAddTraceOperator = false,
-	isAddQueryDisabled = false,
-	addQueryDisabledReason,
-	isAddFormulaDisabled = false,
-	addFormulaDisabledReason,
 }: {
 	addNewBuilderQuery: () => void;
 	addNewFormula: () => void;
 	addTraceOperator?: () => void;
 	showAddTraceOperator: boolean;
-	showAddQuery?: boolean;
 	showAddFormula?: boolean;
-	isAddQueryDisabled?: boolean;
-	addQueryDisabledReason?: string;
-	isAddFormulaDisabled?: boolean;
-	addFormulaDisabledReason?: string;
 }): JSX.Element {
 	return (
 		<div className="qb-footer">
 			<div className="qb-footer-container">
-				{showAddQuery && (
-					<div className="qb-add-new-query">
-						<Tooltip
-							title={
-								addQueryDisabledReason ?? (
-									<div style={{ textAlign: 'center' }}>Add New Query</div>
-								)
-							}
-						>
-							<Button
-								className="add-new-query-button periscope-btn "
-								data-testid="add-new-query-button"
-								icon={<Plus size={16} />}
-								onClick={addNewBuilderQuery}
-								disabled={isAddQueryDisabled}
-							/>
-						</Tooltip>
-					</div>
-				)}
+				<div className="qb-add-new-query">
+					<Tooltip title={<div style={{ textAlign: 'center' }}>Add New Query</div>}>
+						<Button
+							className="add-new-query-button periscope-btn "
+							icon={<Plus size={16} />}
+							onClick={addNewBuilderQuery}
+						/>
+					</Tooltip>
+				</div>
 
 				{showAddFormula && (
 					<div className="qb-add-formula">
 						<Tooltip
 							title={
-								addFormulaDisabledReason ?? (
-									<div style={{ textAlign: 'center' }}>
-										Add New Formula
-										<Typography.Link
-											href="https://signoz.io/docs/querying/multi-query-analysis/#advanced-comparisons"
-											target="_blank"
-											style={{ textDecoration: 'underline' }}
-										>
-											{' '}
-											<br />
-											Learn more
-										</Typography.Link>
-									</div>
-								)
+								<div style={{ textAlign: 'center' }}>
+									Add New Formula
+									<Typography.Link
+										href="https://signoz.io/docs/querying/multi-query-analysis/#advanced-comparisons"
+										target="_blank"
+										style={{ textDecoration: 'underline' }}
+									>
+										{' '}
+										<br />
+										Learn more
+									</Typography.Link>
+								</div>
 							}
 						>
 							<Button
 								className="add-formula-button periscope-btn "
-								data-testid="add-formula-button"
 								icon={<Sigma size={16} />}
 								onClick={addNewFormula}
-								disabled={isAddFormulaDisabled}
 							>
 								Add Formula
 							</Button>

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

@@ -20,13 +20,6 @@ import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
 import { HandleChangeQueryDataV5 } from 'types/common/operations.types';
 import { DataSource } from 'types/common/queryBuilder';
 
-import { QueryBuilderField } from '../queryBuilderFields.types';
-import {
-	mergeQueryBuilderFieldsConfig,
-	RAW_QUERY_FIELDS,
-	resolveQueryBuilderField,
-} from '../queryBuilderFields.utils';
-
 import MetricsAggregateSection from './MerticsAggregateSection/MetricsAggregateSection';
 import { MetricsSelect } from './MetricsSelect/MetricsSelect';
 import QueryAddOns from './QueryAddOns/QueryAddOns';
@@ -38,7 +31,8 @@ export const QueryV2 = forwardRef(function QueryV2(
 		index,
 		queryVariant,
 		query,
-		isRawQuery = false,
+		filterConfigs,
+		isListViewPanel = false,
 		showTraceOperator = false,
 		hasTraceOperator = false,
 		version,
@@ -49,8 +43,6 @@ export const QueryV2 = forwardRef(function QueryV2(
 		signalSourceChangeEnabled = false,
 		queriesCount = 1,
 		savePreviousQuery = false,
-		fieldsConfig,
-		allowedDataSources,
 	}: QueryProps & {
 		onSignalSourceChange: (value: string) => void;
 		signalSourceChangeEnabled: boolean;
@@ -61,7 +53,7 @@ export const QueryV2 = forwardRef(function QueryV2(
 ): JSX.Element {
 	const { cloneQuery, panelType } = useQueryBuilder();
 
-	const hasQueryFunctions = query?.functions?.length > 0;
+	const showFunctions = query?.functions?.length > 0;
 	const { dataSource, builderQueryType } = query;
 
 	const [isCollapsed, setIsCollapsed] = useState(false);
@@ -74,7 +66,8 @@ export const QueryV2 = forwardRef(function QueryV2(
 	} = useQueryOperations({
 		index,
 		query,
-		isRawQuery,
+		filterConfigs,
+		isListViewPanel,
 		entityVersion: version,
 		savePreviousQuery,
 	});
@@ -106,31 +99,14 @@ export const QueryV2 = forwardRef(function QueryV2(
 		[dataSource, builderQueryType],
 	);
 
-	const resolvedConfig = useMemo(
-		() =>
-			mergeQueryBuilderFieldsConfig(
-				isRawQuery ? RAW_QUERY_FIELDS : undefined,
-				fieldsConfig,
-			),
-		[isRawQuery, fieldsConfig],
-	);
-
-	const aggregation = useMemo(
-		() => resolveQueryBuilderField(QueryBuilderField.Aggregation, resolvedConfig),
-		[resolvedConfig],
-	);
-
-	const functions = useMemo(
-		() => resolveQueryBuilderField(QueryBuilderField.Functions, resolvedConfig),
-		[resolvedConfig],
-	);
-
 	const showInlineQuerySearch = useMemo(() => {
 		if (!showTraceOperator) {
 			return false;
 		}
-		return dataSource === DataSource.TRACES && (hasTraceOperator || isRawQuery);
-	}, [hasTraceOperator, isRawQuery, showTraceOperator, dataSource]);
+		return (
+			dataSource === DataSource.TRACES && (hasTraceOperator || isListViewPanel)
+		);
+	}, [hasTraceOperator, isListViewPanel, showTraceOperator, dataSource]);
 
 	const handleChangeAggregateEvery = useCallback(
 		(value: IBuilderQuery['stepInterval']) => {
@@ -173,15 +149,12 @@ export const QueryV2 = forwardRef(function QueryV2(
 									hasTraceOperator={hasTraceOperator}
 									isMetricsDataSource={dataSource === DataSource.METRICS}
 									showFunctions={
-										!functions.hidden &&
-										((version && version === ENTITY_VERSION_V4) ||
-											query.dataSource === DataSource.LOGS ||
-											query.dataSource === DataSource.METRICS ||
-											hasQueryFunctions ||
-											false)
+										(version && version === ENTITY_VERSION_V4) ||
+										query.dataSource === DataSource.LOGS ||
+										query.dataSource === DataSource.METRICS ||
+										showFunctions ||
+										false
 									}
-									areFunctionsDisabled={functions.disabled}
-									functionsDisabledReason={functions.reason}
 									isCollapsed={isCollapsed}
 									showTraceOperator={showTraceOperator}
 									entityType="query"
@@ -194,8 +167,7 @@ export const QueryV2 = forwardRef(function QueryV2(
 									onQueryFunctionsUpdates={handleQueryFunctionsUpdates}
 									showDeleteButton={false}
 									showCloneOption={false}
-									isRawQuery={isRawQuery}
-									allowedDataSources={allowedDataSources}
+									isListViewPanel={isListViewPanel}
 									index={index}
 									queryVariant={queryVariant}
 									onChangeDataSource={handleChangeDataSource}
@@ -295,7 +267,7 @@ export const QueryV2 = forwardRef(function QueryV2(
 						</div>
 
 						{!showOnlyWhereClause &&
-							!aggregation.hidden &&
+							!isListViewPanel &&
 							!(hasTraceOperator && dataSource === DataSource.TRACES) &&
 							dataSource !== DataSource.METRICS && (
 								<QueryAggregation
@@ -305,7 +277,6 @@ export const QueryV2 = forwardRef(function QueryV2(
 									onAggregationIntervalChange={handleChangeAggregateEvery}
 									onChange={handleChangeAggregation}
 									queryData={query}
-									fieldsConfig={fieldsConfig}
 								/>
 							)}
 
@@ -326,10 +297,9 @@ export const QueryV2 = forwardRef(function QueryV2(
 									index={index}
 									query={query}
 									version="v3"
-									isRawQuery={isRawQuery}
+									isListViewPanel={isListViewPanel}
 									showReduceTo={showReduceTo}
 									panelType={panelType}
-									fieldsConfig={fieldsConfig}
 								/>
 							)}
 					</div>

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

@@ -11,7 +11,6 @@ import {
 } from 'types/api/queryBuilder/queryBuilderData';
 import { DataSource } from 'types/common/queryBuilder';
 
-import { QueryBuilderFieldsConfig } from '../../queryBuilderFields.types';
 import QueryAddOns from '../QueryAddOns/QueryAddOns';
 import QueryAggregation from '../QueryAggregation/QueryAggregation';
 import TraceOperatorEditor from './TraceOperatorEditor';
@@ -20,12 +19,10 @@ import './TraceOperator.styles.scss';
 
 export default function TraceOperator({
 	traceOperator,
-	isRawQuery = false,
-	fieldsConfig,
+	isListViewPanel = false,
 }: {
 	traceOperator: IBuilderTraceOperator;
-	isRawQuery?: boolean;
-	fieldsConfig?: QueryBuilderFieldsConfig;
+	isListViewPanel?: boolean;
 }): JSX.Element {
 	const { panelType, removeTraceOperator } = useQueryBuilder();
 	const { handleChangeQueryData } = useQueryOperations({
@@ -61,12 +58,12 @@ export default function TraceOperator({
 	);
 
 	return (
-		<div className={cx('qb-trace-operator', !isRawQuery && 'non-list-view')}>
+		<div className={cx('qb-trace-operator', !isListViewPanel && 'non-list-view')}>
 			<div className="qb-trace-operator-container">
 				<div
 					className={cx(
 						'qb-trace-operator-label-with-input',
-						!isRawQuery && 'qb-trace-operator-arrow',
+						!isListViewPanel && 'qb-trace-operator-arrow',
 					)}
 				>
 					<Typography.Text className="label">Trace Operator</Typography.Text>
@@ -79,9 +76,9 @@ export default function TraceOperator({
 					</div>
 				</div>
 
-				{!isRawQuery && (
+				{!isListViewPanel && (
 					<div className="qb-trace-operator-aggregation-container">
-						<div className={cx(!isRawQuery && 'qb-trace-operator-arrow')}>
+						<div className={cx(!isListViewPanel && 'qb-trace-operator-arrow')}>
 							<QueryAggregation
 								dataSource={DataSource.TRACES}
 								key={`query-search-${traceOperator.queryName}`}
@@ -89,13 +86,12 @@ export default function TraceOperator({
 								onAggregationIntervalChange={handleChangeAggregateEvery}
 								onChange={handleChangeAggregation}
 								queryData={traceOperator}
-								fieldsConfig={fieldsConfig}
 							/>
 						</div>
 						<div
 							className={cx(
 								'qb-trace-operator-add-ons-container',
-								!isRawQuery && 'qb-trace-operator-arrow',
+								!isListViewPanel && 'qb-trace-operator-arrow',
 							)}
 						>
 							<QueryAddOns
@@ -103,10 +99,9 @@ export default function TraceOperator({
 								query={traceOperator}
 								version="v3"
 								isForTraceOperator
-								isRawQuery={false}
+								isListViewPanel={false}
 								showReduceTo={false}
 								panelType={panelType}
-								fieldsConfig={fieldsConfig}
 							/>
 						</div>
 					</div>

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

@@ -142,6 +142,7 @@ describe('QueryBuilderV2 + QueryV2 - base render', () => {
 			isMetricsDataSource: false,
 			operators: [],
 			spaceAggregationOptions: [],
+			listOfAdditionalFilters: [],
 			handleChangeOperator: jest.fn(),
 			handleSpaceAggregationChange: jest.fn(),
 			handleChangeAggregatorAttribute: jest.fn(),
@@ -151,6 +152,7 @@ describe('QueryBuilderV2 + QueryV2 - base render', () => {
 				jest.fn() as unknown as ReturnType<UseQueryOperations>['handleChangeQueryData'],
 			handleChangeFormulaData: jest.fn(),
 			handleQueryFunctionsUpdates: handleQueryFunctionsUpdatesMock,
+			listOfAdditionalFormulaFilters: [],
 		});
 	});
 

frontend/src/components/QueryBuilderV2/__tests__/QueryAddOns.test.tsx

@@ -95,7 +95,7 @@ describe('QueryAddOns', () => {
 			<QueryAddOns
 				query={baseQuery()}
 				version="v5"
-				isRawQuery={false}
+				isListViewPanel={false}
 				showReduceTo
 				panelType={PANEL_TYPES.VALUE}
 				index={0}
@@ -119,7 +119,7 @@ describe('QueryAddOns', () => {
 					groupBy: ['service.name'],
 				})}
 				version="v5"
-				isRawQuery={false}
+				isListViewPanel={false}
 				showReduceTo={false}
 				panelType={PANEL_TYPES.TIME_SERIES}
 				index={0}
@@ -135,7 +135,7 @@ describe('QueryAddOns', () => {
 			<QueryAddOns
 				query={baseQuery()}
 				version="v5"
-				isRawQuery
+				isListViewPanel
 				showReduceTo={false}
 				panelType={PANEL_TYPES.LIST}
 				index={0}
@@ -151,7 +151,7 @@ describe('QueryAddOns', () => {
 			<QueryAddOns
 				query={baseQuery({ limit: 5 })}
 				version="v5"
-				isRawQuery={false}
+				isListViewPanel={false}
 				showReduceTo={false}
 				panelType={PANEL_TYPES.TIME_SERIES}
 				index={0}
@@ -176,7 +176,7 @@ describe('QueryAddOns', () => {
 			<QueryAddOns
 				query={query}
 				version="v5"
-				isRawQuery={false}
+				isListViewPanel={false}
 				showReduceTo={false}
 				panelType={PANEL_TYPES.TIME_SERIES}
 				index={0}
@@ -195,7 +195,7 @@ describe('QueryAddOns', () => {
 			<QueryAddOns
 				query={baseQuery()}
 				version="v5"
-				isRawQuery={false}
+				isListViewPanel={false}
 				showReduceTo
 				panelType={PANEL_TYPES.TIME_SERIES}
 				index={0}
@@ -211,7 +211,7 @@ describe('QueryAddOns', () => {
 			<QueryAddOns
 				query={baseQuery({ reduceTo: ReduceOperators.SUM })}
 				version="v5"
-				isRawQuery={false}
+				isListViewPanel={false}
 				showReduceTo
 				panelType={PANEL_TYPES.TIME_SERIES}
 				index={0}
@@ -234,7 +234,7 @@ describe('QueryAddOns', () => {
 			<QueryAddOns
 				query={query}
 				version="v5"
-				isRawQuery={false}
+				isListViewPanel={false}
 				showReduceTo
 				panelType={PANEL_TYPES.TIME_SERIES}
 				index={0}
@@ -286,7 +286,7 @@ describe('QueryAddOns', () => {
 			<QueryAddOns
 				query={query}
 				version="v5"
-				isRawQuery={false}
+				isListViewPanel={false}
 				showReduceTo={false}
 				panelType={PANEL_TYPES.TIME_SERIES}
 				index={0}
@@ -314,7 +314,7 @@ describe('QueryAddOns', () => {
 			<QueryAddOns
 				query={query}
 				version="v5"
-				isRawQuery={false}
+				isListViewPanel={false}
 				showReduceTo={false}
 				panelType={PANEL_TYPES.TIME_SERIES}
 				index={0}

frontend/src/components/QueryBuilderV2/__tests__/QueryFooter.test.tsx

@@ -1,46 +0,0 @@
-import { render, screen } from 'tests/test-utils';
-
-import QueryFooter from '../QueryV2/QueryFooter/QueryFooter';
-
-jest.mock('hooks/queryBuilder/useQueryBuilder', () => ({
-	useQueryBuilder: (): {
-		currentQuery: { builder: { queryData: unknown[] } };
-		panelType: string;
-	} => ({
-		currentQuery: { builder: { queryData: [] } },
-		panelType: 'time_series',
-	}),
-}));
-
-const noop = (): void => {};
-
-describe('QueryFooter', () => {
-	it('offers both buttons by default', () => {
-		render(
-			<QueryFooter
-				addNewBuilderQuery={noop}
-				addNewFormula={noop}
-				showAddTraceOperator={false}
-			/>,
-		);
-
-		expect(screen.getByTestId('add-new-query-button')).toBeInTheDocument();
-		expect(screen.getByTestId('add-formula-button')).toBeInTheDocument();
-	});
-
-	// A kind whose request takes a single query (Heatmap) hides the button outright
-	// rather than disabling it — a query it adds is one the builder cannot render.
-	it('drops the Add New Query button when the caller withholds it', () => {
-		render(
-			<QueryFooter
-				addNewBuilderQuery={noop}
-				addNewFormula={noop}
-				showAddQuery={false}
-				showAddTraceOperator={false}
-			/>,
-		);
-
-		expect(screen.queryByTestId('add-new-query-button')).not.toBeInTheDocument();
-		expect(screen.getByTestId('add-formula-button')).toBeInTheDocument();
-	});
-});

frontend/src/components/QueryBuilderV2/__tests__/queryBuilderFields.utils.test.ts

@@ -1,140 +0,0 @@
-import { QueryBuilderField } from '../queryBuilderFields.types';
-import {
-	mergeQueryBuilderFieldsConfig,
-	RAW_QUERY_FIELDS,
-	resolveQueryBuilderField,
-	resolveQueryBuilderFields,
-} from '../queryBuilderFields.utils';
-
-const SUPPORTED = [
-	QueryBuilderField.GroupBy,
-	QueryBuilderField.Having,
-	QueryBuilderField.OrderBy,
-	QueryBuilderField.Limit,
-	QueryBuilderField.Legend,
-];
-
-describe('resolveQueryBuilderField', () => {
-	it('leaves an unconfigured field available', () => {
-		expect(resolveQueryBuilderField(QueryBuilderField.Having)).toStrictEqual({
-			hidden: false,
-			disabled: false,
-			pinned: false,
-		});
-	});
-
-	it('hides a field configured hidden', () => {
-		const resolved = resolveQueryBuilderField(QueryBuilderField.Having, {
-			[QueryBuilderField.Having]: { state: 'hidden' },
-		});
-
-		expect(resolved.hidden).toBe(true);
-		expect(resolved.disabled).toBe(false);
-	});
-
-	it('carries the reason through on a disabled field', () => {
-		const resolved = resolveQueryBuilderField(QueryBuilderField.Having, {
-			[QueryBuilderField.Having]: {
-				state: 'disabled',
-				reason: 'Having filters aggregated results.',
-			},
-		});
-
-		expect(resolved).toStrictEqual({
-			hidden: false,
-			disabled: true,
-			reason: 'Having filters aggregated results.',
-			pinned: false,
-		});
-	});
-
-	it('pins a field configured pinned', () => {
-		const resolved = resolveQueryBuilderField(QueryBuilderField.OrderBy, {
-			[QueryBuilderField.OrderBy]: { state: 'pinned' },
-		});
-
-		expect(resolved.pinned).toBe(true);
-		expect(resolved.hidden).toBe(false);
-	});
-
-	it('only ever resolves one state at a time', () => {
-		const resolved = resolveQueryBuilderField(QueryBuilderField.Limit, {
-			[QueryBuilderField.Limit]: { state: 'disabled', reason: 'why' },
-		});
-
-		expect([resolved.hidden, resolved.disabled, resolved.pinned]).toStrictEqual([
-			false,
-			true,
-			false,
-		]);
-	});
-});
-
-describe('resolveQueryBuilderFields', () => {
-	it('resolves every supported field and nothing else', () => {
-		const resolved = resolveQueryBuilderFields(SUPPORTED);
-
-		expect([...resolved.keys()]).toStrictEqual(SUPPORTED);
-	});
-
-	it('cannot widen beyond what the builder supports', () => {
-		const resolved = resolveQueryBuilderFields([QueryBuilderField.Legend], {
-			[QueryBuilderField.ReduceTo]: { state: 'pinned' },
-		});
-
-		expect(resolved.has(QueryBuilderField.ReduceTo)).toBe(false);
-	});
-});
-
-describe('mergeQueryBuilderFieldsConfig', () => {
-	it('returns the override when there is no baseline', () => {
-		const override = { [QueryBuilderField.Limit]: { state: 'hidden' } } as const;
-
-		expect(mergeQueryBuilderFieldsConfig(undefined, override)).toBe(override);
-	});
-
-	it('returns the baseline when there is no override', () => {
-		expect(mergeQueryBuilderFieldsConfig(RAW_QUERY_FIELDS, undefined)).toBe(
-			RAW_QUERY_FIELDS,
-		);
-	});
-
-	it('lets the override win per field, leaving the rest of the baseline intact', () => {
-		const merged = mergeQueryBuilderFieldsConfig(RAW_QUERY_FIELDS, {
-			[QueryBuilderField.Having]: { state: 'disabled', reason: 'no aggregation' },
-		});
-
-		expect(merged?.[QueryBuilderField.Having]).toStrictEqual({
-			state: 'disabled',
-			reason: 'no aggregation',
-		});
-		expect(merged?.[QueryBuilderField.GroupBy]).toStrictEqual({
-			state: 'hidden',
-		});
-		expect(merged?.[QueryBuilderField.OrderBy]).toStrictEqual({
-			state: 'pinned',
-		});
-	});
-});
-
-describe('RAW_QUERY_FIELDS', () => {
-	it('reduces an aggregate surface to a pinned order by', () => {
-		const resolved = resolveQueryBuilderFields(SUPPORTED, RAW_QUERY_FIELDS);
-
-		const visible = [...resolved.entries()]
-			.filter(([, field]) => !field.hidden)
-			.map(([key]) => key);
-
-		expect(visible).toStrictEqual([QueryBuilderField.OrderBy]);
-		expect(resolved.get(QueryBuilderField.OrderBy)?.pinned).toBe(true);
-	});
-
-	it('leaves additional queries alone, so trace matching still allows several', () => {
-		expect(
-			resolveQueryBuilderField(
-				QueryBuilderField.AdditionalQueries,
-				RAW_QUERY_FIELDS,
-			).hidden,
-		).toBe(false);
-	});
-});

frontend/src/components/QueryBuilderV2/queryBuilderFields.types.ts

@@ -1,36 +0,0 @@
-/**
- * Everything the query builder can surface.
- *
- * The per-query values double as the add-on identities the builder renders
- * (`data-testid="query-add-on-<value>"`), so they are part of the DOM contract and must
- * not be renamed to match the member names.
- */
-export enum QueryBuilderField {
-	// Per query
-	Aggregation = 'aggregation',
-	StepInterval = 'step_interval',
-	Functions = 'functions',
-	GroupBy = 'group_by',
-	Having = 'having',
-	OrderBy = 'order_by',
-	Limit = 'limit',
-	Legend = 'legend_format',
-	ReduceTo = 'reduce_to',
-	// Builder level
-	Formula = 'formula',
-	AdditionalQueries = 'additional_queries',
-}
-
-/** `reason` is required on `disabled`: an inert control the user can see has to explain itself. */
-export type QueryBuilderFieldRule =
-	| { state: 'hidden' }
-	| { state: 'disabled'; reason: string }
-	| { state: 'pinned' };
-
-/**
- * A caller's narrowing of the builder's surface. The builder works out which fields suit
- * the current data source and panel type first; this can only take away from that set.
- */
-export type QueryBuilderFieldsConfig = Partial<
-	Record<QueryBuilderField, QueryBuilderFieldRule>
->;

frontend/src/components/QueryBuilderV2/queryBuilderFields.utils.ts

@@ -1,92 +0,0 @@
-import {
-	QueryBuilderField,
-	QueryBuilderFieldRule,
-	QueryBuilderFieldsConfig,
-} from './queryBuilderFields.types';
-
-export interface ResolvedQueryBuilderField {
-	hidden: boolean;
-	disabled: boolean;
-	reason?: string;
-	/** Rendered open, not dismissable, and kept out of the add-on toggle bar. */
-	pinned: boolean;
-}
-
-const AVAILABLE: ResolvedQueryBuilderField = {
-	hidden: false,
-	disabled: false,
-	pinned: false,
-};
-
-function fromRule(rule: QueryBuilderFieldRule): ResolvedQueryBuilderField {
-	switch (rule.state) {
-		case 'hidden':
-			return { hidden: true, disabled: false, pinned: false };
-		case 'disabled':
-			return {
-				hidden: false,
-				disabled: true,
-				reason: rule.reason,
-				pinned: false,
-			};
-		case 'pinned':
-			return { hidden: false, disabled: false, pinned: true };
-		default:
-			return AVAILABLE;
-	}
-}
-
-export function resolveQueryBuilderField(
-	field: QueryBuilderField,
-	config?: QueryBuilderFieldsConfig,
-): ResolvedQueryBuilderField {
-	const rule = config?.[field];
-
-	return rule ? fromRule(rule) : AVAILABLE;
-}
-
-/**
- * Fields absent from `supported` are hidden whatever the config says, so a config can
- * only ever take away.
- */
-export function resolveQueryBuilderFields(
-	supported: readonly QueryBuilderField[],
-	config?: QueryBuilderFieldsConfig,
-): Map<QueryBuilderField, ResolvedQueryBuilderField> {
-	return new Map(
-		supported.map((field) => [field, resolveQueryBuilderField(field, config)]),
-	);
-}
-
-/**
- * The surface a raw-row builder starts from, layered under a caller's own config.
- * `AdditionalQueries` is deliberately absent — a raw trace builder still takes several
- * queries when trace matching is on. Omit rather than Partial, so a field added to the
- * enum has to be placed on one side.
- */
-export const RAW_QUERY_FIELDS: Omit<
-	Record<QueryBuilderField, QueryBuilderFieldRule>,
-	QueryBuilderField.AdditionalQueries
-> = {
-	[QueryBuilderField.Aggregation]: { state: 'hidden' },
-	[QueryBuilderField.StepInterval]: { state: 'hidden' },
-	[QueryBuilderField.Functions]: { state: 'hidden' },
-	[QueryBuilderField.GroupBy]: { state: 'hidden' },
-	[QueryBuilderField.Having]: { state: 'hidden' },
-	[QueryBuilderField.Limit]: { state: 'hidden' },
-	[QueryBuilderField.Legend]: { state: 'hidden' },
-	[QueryBuilderField.ReduceTo]: { state: 'hidden' },
-	[QueryBuilderField.Formula]: { state: 'hidden' },
-	[QueryBuilderField.OrderBy]: { state: 'pinned' },
-};
-
-export function mergeQueryBuilderFieldsConfig(
-	baseline: QueryBuilderFieldsConfig | undefined,
-	override: QueryBuilderFieldsConfig | undefined,
-): QueryBuilderFieldsConfig | undefined {
-	if (!baseline) {
-		return override;
-	}
-
-	return override ? { ...baseline, ...override } : baseline;
-}

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

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

frontend/src/components/QuickFilters/QuickFiltersLayout/QuickFiltersLayout.module.scss

@@ -1,33 +0,0 @@
-// The one `overflow: hidden` in the chain. Ancestors (RouteTab, AppLayout)
-// only hand height down; each pane below owns its own scroll.
-.layout {
-	display: flex;
-	flex: 1;
-	height: 100%;
-	min-height: 0;
-	overflow: hidden;
-}
-
-// Positioned so overlays (settings drawer) paint above the content pane
-// without changing this pane's layout width.
-.filters {
-	width: 280px;
-	flex-shrink: 0;
-	display: flex;
-	flex-direction: column;
-	min-height: 0;
-	position: relative;
-	overflow: visible;
-	z-index: 2;
-}
-
-// Bounded box for the OverlayScrollbar inside it (`.overlay-scrollbar` is
-// `height: 100%`), which owns the scrolling.
-.content {
-	flex: 1;
-	min-width: 0;
-	min-height: 0;
-	display: flex;
-	flex-direction: column;
-	overflow: hidden;
-}

frontend/src/components/QuickFilters/QuickFiltersLayout/QuickFiltersLayout.tsx

@@ -1,59 +0,0 @@
-import { ComponentProps, ReactNode } from 'react';
-import cx from 'classnames';
-import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
-import { PartialOptions } from 'overlayscrollbars';
-
-import QuickFilters from '../QuickFilters';
-
-import styles from './QuickFiltersLayout.module.scss';
-
-const CONTENT_SCROLLBAR_OPTIONS: PartialOptions = {
-	overflow: { x: 'hidden' },
-};
-
-// Same optionality as `<QuickFilters />` in JSX (honours its defaultProps).
-type QuickFiltersElementProps = JSX.LibraryManagedAttributes<
-	typeof QuickFilters,
-	ComponentProps<typeof QuickFilters>
->;
-
-export interface QuickFiltersLayoutProps {
-	quickFilterProps: QuickFiltersElementProps;
-	showFilters: boolean;
-	className?: string;
-	contentClassName?: string;
-	testId?: string;
-	children: ReactNode;
-}
-
-function QuickFiltersLayout({
-	quickFilterProps,
-	showFilters,
-	className,
-	contentClassName,
-	testId,
-	children,
-}: QuickFiltersLayoutProps): JSX.Element {
-	return (
-		<div className={cx(styles.layout, className)} data-testid={testId}>
-			{showFilters && (
-				<aside
-					className={styles.filters}
-					data-testid="quick-filters-layout-filters"
-				>
-					<QuickFilters {...quickFilterProps} />
-				</aside>
-			)}
-			<section
-				className={cx(styles.content, contentClassName)}
-				data-testid="quick-filters-layout-content"
-			>
-				<OverlayScrollbar options={CONTENT_SCROLLBAR_OPTIONS}>
-					<div>{children}</div>
-				</OverlayScrollbar>
-			</section>
-		</div>
-	);
-}
-
-export default QuickFiltersLayout;

frontend/src/components/QuickFilters/QuickFiltersLayout/__tests__/QuickFiltersLayout.test.tsx

@@ -1,79 +0,0 @@
-import { render, screen } from 'tests/test-utils';
-
-import { QuickFiltersSource } from '../../types';
-import QuickFiltersLayout from '../QuickFiltersLayout';
-
-jest.mock('../QuickFiltersLayout.module.scss', () => ({
-	__esModule: true,
-	default: {
-		layout: 'layout',
-		filters: 'filters',
-		content: 'content',
-	},
-}));
-
-jest.mock('../../QuickFilters', () => ({
-	__esModule: true,
-	default: ({ source }: { source: string }): JSX.Element => (
-		<div data-testid="quick-filters">{source}</div>
-	),
-}));
-
-const quickFilterProps = {
-	source: QuickFiltersSource.TRACES_EXPLORER,
-	handleFilterVisibilityChange: jest.fn(),
-};
-
-describe('QuickFiltersLayout', () => {
-	it('renders QuickFilters with the given props inside the filters pane', () => {
-		render(
-			<QuickFiltersLayout showFilters quickFilterProps={quickFilterProps}>
-				<div>content</div>
-			</QuickFiltersLayout>,
-		);
-
-		const filtersPane = screen.getByTestId('quick-filters-layout-filters');
-		expect(filtersPane).toContainElement(screen.getByTestId('quick-filters'));
-		expect(screen.getByTestId('quick-filters')).toHaveTextContent(
-			QuickFiltersSource.TRACES_EXPLORER,
-		);
-		expect(screen.getByTestId('quick-filters-layout-content')).toHaveTextContent(
-			'content',
-		);
-	});
-
-	it('does not render the filters pane when showFilters is false', () => {
-		render(
-			<QuickFiltersLayout showFilters={false} quickFilterProps={quickFilterProps}>
-				<div>content</div>
-			</QuickFiltersLayout>,
-		);
-
-		expect(
-			screen.queryByTestId('quick-filters-layout-filters'),
-		).not.toBeInTheDocument();
-		expect(screen.queryByTestId('quick-filters')).not.toBeInTheDocument();
-		expect(screen.getByText('content')).toBeInTheDocument();
-	});
-
-	it('merges classNames onto the root and content panes', () => {
-		render(
-			<QuickFiltersLayout
-				showFilters
-				quickFilterProps={quickFilterProps}
-				className="page-root"
-				contentClassName="page-content"
-				testId="page"
-			>
-				<div>content</div>
-			</QuickFiltersLayout>,
-		);
-
-		const root = screen.getByTestId('page');
-		expect(root).toHaveClass('layout', 'page-root');
-		expect(screen.getByTestId('quick-filters-layout-content')).toHaveClass(
-			'content',
-			'page-content',
-		);
-	});
-});

frontend/src/components/RouteTab/RouteTab.module.scss

@@ -1,38 +0,0 @@
-// Hands the parent's height down to the active pane and lets the pane scroll
-// its own content, so TopNav and the tab bar stay put. Child combinators only
-// (nested Tabs must not be caught).
-.routeTab {
-	flex: 1;
-	min-height: 0;
-}
-
-.routeTab > :global(.ant-tabs-content-holder) {
-	display: flex;
-	flex-direction: column;
-}
-
-.routeTab > :global(.ant-tabs-content-holder) > :global(.ant-tabs-content) {
-	flex: 1;
-	min-height: 0;
-	display: flex;
-	flex-direction: column;
-}
-
-.routeTab
-	> :global(.ant-tabs-content-holder)
-	> :global(.ant-tabs-content)
-	> :global(.ant-tabs-tabpane-active) {
-	flex: 1;
-	min-height: 0;
-	display: flex;
-	flex-direction: column;
-}
-
-.routeTab
-	> :global(.ant-tabs-content-holder)
-	> :global(.ant-tabs-content)
-	> :global(.ant-tabs-tabpane-active)
-	> :global(.overlay-scrollbar) {
-	flex: 1;
-	min-height: 0;
-}

frontend/src/components/RouteTab/RouteTab.test.tsx

@@ -5,11 +5,6 @@ import { fireEvent, render, screen } from 'tests/test-utils';
 import RouteTab from './index';
 import { RouteTabProps } from './types';
 
-jest.mock('./RouteTab.module.scss', () => ({
-	__esModule: true,
-	default: { routeTab: 'routeTab' },
-}));
-
 function DummyComponent1(): JSX.Element {
 	return <div>Dummy Component 1</div>;
 }
@@ -79,36 +74,6 @@ describe('RouteTab component', () => {
 		expect(history.location.pathname).toBe('/tab2');
 	});
 
-	it('applies the layout class alongside a custom className', () => {
-		const history = createMemoryHistory();
-		const { container } = render(
-			<Router history={history}>
-				<RouteTab
-					history={history}
-					routes={testRoutes}
-					activeKey="Tab1"
-					className="custom-tabs"
-				/>
-			</Router>,
-		);
-		expect(container.querySelector('.ant-tabs')).toHaveClass(
-			'routeTab',
-			'custom-tabs',
-		);
-	});
-
-	it('renders the active tab content inside an overlay scrollbar', () => {
-		const history = createMemoryHistory();
-		const { container } = render(
-			<Router history={history}>
-				<RouteTab history={history} routes={testRoutes} activeKey="Tab1" />
-			</Router>,
-		);
-		expect(
-			container.querySelector('.ant-tabs-tabpane-active > .overlay-scrollbar'),
-		).toHaveTextContent('Dummy Component 1');
-	});
-
 	it('calls onChangeHandler on tab change', () => {
 		const onChangeHandler = jest.fn();
 		const history = createMemoryHistory();

frontend/src/components/RouteTab/index.tsx

@@ -5,32 +5,20 @@ import {
 	useParams,
 } from 'react-router-dom';
 import { Tabs, TabsProps } from 'antd';
-import cx from 'classnames';
 import HeaderRightSection from 'components/HeaderRightSection/HeaderRightSection';
-import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
 
 import { RouteTabProps } from './types';
 
-import styles from './RouteTab.module.scss';
-
 interface Params {
 	[key: string]: string;
 }
 
-/**
- * Each pane scrolls its own content inside an OverlayScrollbar, so the tab bar
- * stays put. Mounted as the page root the pane is bounded to the viewport; inside
- * a plain block wrapper the scroller is inert and the page scrolls as usual.
- * Pane content that needs a bounded box must size itself with `height: 100%`
- * (the scroller's viewport is block flow, so `flex: 1` has no effect there).
- */
 function RouteTab({
 	routes,
 	activeKey,
 	onChangeHandler,
 	history,
 	showRightSection,
-	className,
 	...rest
 }: RouteTabProps & TabsProps): JSX.Element {
 	const params = useParams<Params>();
@@ -62,16 +50,11 @@ function RouteTab({
 		label: name,
 		key,
 		tabKey: route,
-		children: (
-			<OverlayScrollbar>
-				<Component />
-			</OverlayScrollbar>
-		),
+		children: <Component />,
 	}));
 
 	return (
 		<Tabs
-			className={cx(styles.routeTab, className)}
 			onChange={onChange}
 			destroyInactiveTabPane
 			activeKey={currentRoute?.key || activeKey}

frontend/src/constants/queryBuilder.ts

@@ -32,6 +32,7 @@ import {
 	MeterAggregateOperator,
 	MetricAggregateOperator,
 	NumberOperators,
+	QueryAdditionalFilter,
 	QueryBuilderData,
 	ReduceOperators,
 	StringOperators,
@@ -103,6 +104,43 @@ export const metricsSpaceAggregationOperatorsByType = {
 	ExponentialHistogram: metricsHistogramSpaceAggregateOperatorOptions,
 };
 
+export const mapOfQueryFilters: Record<DataSource, QueryAdditionalFilter[]> = {
+	metrics: [
+		{ text: 'Aggregation interval', field: 'stepInterval' },
+		{ text: 'Having', field: 'having' },
+	],
+	logs: [
+		{ text: 'Order by', field: 'orderBy' },
+		{ text: 'Limit', field: 'limit' },
+		{ text: 'Having', field: 'having' },
+		{ text: 'Aggregation interval', field: 'stepInterval' },
+	],
+	traces: [
+		{ text: 'Order by', field: 'orderBy' },
+		{ text: 'Limit', field: 'limit' },
+		{ text: 'Having', field: 'having' },
+		{ text: 'Aggregation interval', field: 'stepInterval' },
+	],
+};
+
+const commonFormulaFilters: QueryAdditionalFilter[] = [
+	{
+		text: 'Having',
+		field: 'having',
+	},
+	{ text: 'Order by', field: 'orderBy' },
+	{ text: 'Limit', field: 'limit' },
+];
+
+export const mapOfFormulaToFilters: Record<
+	DataSource,
+	QueryAdditionalFilter[]
+> = {
+	metrics: commonFormulaFilters,
+	logs: commonFormulaFilters,
+	traces: commonFormulaFilters,
+};
+
 export const REDUCE_TO_VALUES: SelectOption<ReduceOperators, string>[] = [
 	{ value: ReduceOperators.LAST, label: 'Latest of values in timeframe' },
 	{ value: ReduceOperators.SUM, label: 'Sum of values in timeframe' },

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

@@ -1,15 +1,23 @@
-.api-monitoring-explorer {
-	.api-quick-filters-header {
-		padding: 12px;
-		border-bottom: 1px solid var(--l1-border);
-		border-right: 1px solid var(--l1-border);
+.api-monitoring-page {
+	display: flex;
+	height: 100%;
 
-		display: flex;
-		align-items: center;
-		gap: 6px;
+	.api-quick-filter-left-section {
+		width: 0%;
+		flex-shrink: 0;
 
-		font-size: 14px;
-		line-height: 18px;
+		.api-quick-filters-header {
+			padding: 12px;
+			border-bottom: 1px solid var(--l1-border);
+			border-right: 1px solid var(--l1-border);
+
+			display: flex;
+			align-items: center;
+			gap: 6px;
+
+			font-size: 14px;
+			line-height: 18px;
+		}
 	}
 
 	.api-module-right-section {
@@ -153,6 +161,16 @@
 			}
 		}
 	}
+
+	&.filter-visible {
+		.api-quick-filter-left-section {
+			width: 260px;
+		}
+
+		.api-module-right-section {
+			width: calc(100% - 260px);
+		}
+	}
 }
 
 .no-filtered-domains-message-container {

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

@@ -1,7 +1,8 @@
 import { useEffect } from 'react';
 import * as Sentry from '@sentry/react';
 import logEvent from 'api/common/logEvent';
-import QuickFiltersLayout from 'components/QuickFilters/QuickFiltersLayout/QuickFiltersLayout';
+import cx from 'classnames';
+import QuickFilters from 'components/QuickFilters/QuickFilters';
 import { useSignalFieldApis } from 'components/QuickFilters/hooks/useSignalFieldApis';
 import { QuickFiltersSource, SignalType } from 'components/QuickFilters/types';
 import ErrorBoundaryFallback from 'pages/ErrorBoundaryFallback/ErrorBoundaryFallback';
@@ -19,21 +20,20 @@ function Explorer(): JSX.Element {
 
 	return (
 		<Sentry.ErrorBoundary fallback={<ErrorBoundaryFallback />}>
-			<QuickFiltersLayout
-				className="api-monitoring-explorer"
-				showFilters
-				quickFilterProps={{
-					className: 'qf-api-monitoring',
-					source: QuickFiltersSource.API_MONITORING,
-					signal: SignalType.API_MONITORING,
-					showFilterCollapse: false,
-					showQueryName: false,
-					handleFilterVisibilityChange: (): void => {},
-					useFieldApis: quickFilterFieldApis,
-				}}
-			>
+			<div className={cx('api-monitoring-page', 'filter-visible')}>
+				<section className="api-quick-filter-left-section">
+					<QuickFilters
+						className="qf-api-monitoring"
+						source={QuickFiltersSource.API_MONITORING}
+						signal={SignalType.API_MONITORING}
+						showFilterCollapse={false}
+						showQueryName={false}
+						handleFilterVisibilityChange={(): void => {}}
+						useFieldApis={quickFilterFieldApis}
+					/>
+				</section>
 				<DomainList />
-			</QuickFiltersLayout>
+			</div>
 		</Sentry.ErrorBoundary>
 	);
 }

frontend/src/container/LLMObservability/Explorer/Explorer.styles.scss

@@ -65,6 +65,8 @@
 }
 
 .trace-explorer-page {
+	display: flex;
+
 	// Meant to fix the query builder colors
 	--input-background: var(--l2-background);
 	--input-hover-background: var(--l2-background);
@@ -73,8 +75,32 @@
 	--input-hover-border-color: var(--internal-ant-border-color-hover);
 	--input-focus-border-color: var(--internal-ant-border-color-hover);
 
+	.filter {
+		width: 260px;
+		height: 100%;
+		min-height: 100vh;
+
+		border-right: 0px;
+		border: 1px solid var(--l1-border);
+		background-color: var(--l1-background);
+
+		> .ant-card-body {
+			padding: 0;
+			width: 258px;
+		}
+	}
+
 	.trace-explorer {
+		width: 100%;
 		background: var(--l1-background);
+
+		> .ant-card-body {
+			padding: 0;
+		}
+
 		border-color: var(--l1-border);
 	}
+	.trace-explorer.filters-expanded {
+		width: calc(100% - 260px);
+	}
 }

frontend/src/container/LLMObservability/Explorer/Explorer.tsx

@@ -2,10 +2,12 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useQueryClient } from 'react-query';
 import { useSearchParams } from 'react-router-dom-v5-compat';
 import * as Sentry from '@sentry/react';
+import { Card } from 'antd';
 import logEvent from 'api/common/logEvent';
+import cx from 'classnames';
 import ExplorerCard from 'components/ExplorerCard/ExplorerCard';
 import QueryCancelledPlaceholder from 'components/QueryCancelledPlaceholder';
-import QuickFiltersLayout from 'components/QuickFilters/QuickFiltersLayout/QuickFiltersLayout';
+import QuickFilters from 'components/QuickFilters/QuickFilters';
 import { QuickFiltersSource, SignalType } from 'components/QuickFilters/types';
 import WarningPopover from 'components/WarningPopover/WarningPopover';
 import { AVAILABLE_EXPORT_PANEL_TYPES } from 'constants/panelTypes';
@@ -251,20 +253,25 @@ function Explorer(): JSX.Element {
 
 	return (
 		<Sentry.ErrorBoundary fallback={<ErrorBoundaryFallback />}>
-			<QuickFiltersLayout
+			<div
 				className="trace-explorer-page"
-				testId="llm-observability-explorer"
-				showFilters={isOpen}
-				quickFilterProps={{
-					className: 'qf-traces-explorer',
-					source: QuickFiltersSource.TRACES_EXPLORER,
-					signal: SignalType.TRACES,
-					handleFilterVisibilityChange: (): void => {
-						setOpen(!isOpen);
-					},
-				}}
+				data-testid="llm-observability-explorer"
 			>
-				<div className="trace-explorer">
+				<Card className="filter" hidden={!isOpen}>
+					<QuickFilters
+						className="qf-traces-explorer"
+						source={QuickFiltersSource.TRACES_EXPLORER}
+						signal={SignalType.TRACES}
+						handleFilterVisibilityChange={(): void => {
+							setOpen(!isOpen);
+						}}
+					/>
+				</Card>
+				<div
+					className={cx('trace-explorer', {
+						'filters-expanded': isOpen,
+					})}
+				>
 					<div className="trace-explorer-header">
 						<Toolbar
 							showAutoRefresh
@@ -356,7 +363,7 @@ function Explorer(): JSX.Element {
 						handleChangeSelectedView={handleChangeSelectedView}
 					/>
 				</div>
-			</QuickFiltersLayout>
+			</div>
 		</Sentry.ErrorBoundary>
 	);
 }

frontend/src/container/LLMObservability/Explorer/QuerySection/QuerySection.tsx

@@ -1,23 +1,35 @@
 import { memo, useMemo } from 'react';
 import { QueryBuilderV2 } from 'components/QueryBuilderV2/QueryBuilderV2';
 import { PANEL_TYPES } from 'constants/queryBuilder';
+import { QueryBuilderProps } from 'container/QueryBuilder/QueryBuilder.interfaces';
 import { useGetPanelTypesQueryParam } from 'hooks/queryBuilder/useGetPanelTypesQueryParam';
 import { DataSource } from 'types/common/queryBuilder';
 
 function QuerySection(): JSX.Element {
 	const panelTypes = useGetPanelTypesQueryParam(PANEL_TYPES.LIST);
 
-	const isRawQuery = useMemo(
+	// Only reaches the builder for timeseries/table; list/trace panels use QueryBuilderV2's listViewTracesFilterConfigs.
+	const filterConfigs: QueryBuilderProps['filterConfigs'] = useMemo(
+		() => ({
+			stepInterval: { isHidden: false, isDisabled: false },
+			limit: { isHidden: false, isDisabled: true },
+			having: { isHidden: false, isDisabled: true },
+		}),
+		[],
+	);
+
+	const isListViewPanel = useMemo(
 		() => panelTypes === PANEL_TYPES.LIST || panelTypes === PANEL_TYPES.TRACE,
 		[panelTypes],
 	);
 
 	return (
 		<QueryBuilderV2
-			isRawQuery={isRawQuery}
+			isListViewPanel={isListViewPanel}
 			config={{ initialDataSource: DataSource.TRACES, queryVariant: 'static' }}
 			panelType={panelTypes}
-			showOnlyWhereClause={isRawQuery}
+			filterConfigs={filterConfigs}
+			showOnlyWhereClause={isListViewPanel}
 			version="v3" // setting this to v3 as we this is rendered in logs explorer
 		/>
 	);

frontend/src/container/LogExplorerQuerySection/index.tsx

@@ -1,6 +1,13 @@
-import { memo, useMemo } from 'react';
+import { memo, useCallback, useMemo } from 'react';
 import { QueryBuilderV2 } from 'components/QueryBuilderV2/QueryBuilderV2';
-import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
+import {
+	initialQueriesMap,
+	OPERATORS,
+	PANEL_TYPES,
+} from 'constants/queryBuilder';
+import ExplorerOrderBy from 'container/ExplorerOrderBy';
+import { OrderByFilterProps } from 'container/QueryBuilder/filters/OrderByFilter/OrderByFilter.interfaces';
+import { QueryBuilderProps } from 'container/QueryBuilder/QueryBuilder.interfaces';
 import { useGetPanelTypesQueryParam } from 'hooks/queryBuilder/useGetPanelTypesQueryParam';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useShareBuilderUrl } from 'hooks/queryBuilder/useShareBuilderUrl';
@@ -29,11 +36,42 @@ function LogExplorerQuerySection({
 
 	useShareBuilderUrl({ defaultValue });
 
+	const filterConfigs: QueryBuilderProps['filterConfigs'] = useMemo(() => {
+		const isTable = panelTypes === PANEL_TYPES.TABLE;
+		const isList = panelTypes === PANEL_TYPES.LIST;
+		const config: QueryBuilderProps['filterConfigs'] = {
+			stepInterval: { isHidden: isTable, isDisabled: false },
+			having: { isHidden: isList, isDisabled: true },
+			filters: {
+				customKey: 'body',
+				customOp: OPERATORS.CONTAINS,
+			},
+		};
+
+		return config;
+	}, [panelTypes]);
+
+	const renderOrderBy = useCallback(
+		({ query, onChange }: OrderByFilterProps): JSX.Element => (
+			<ExplorerOrderBy query={query} onChange={onChange} />
+		),
+		[],
+	);
+
+	const queryComponents = useMemo(
+		(): QueryBuilderProps['queryComponents'] => ({
+			...(panelTypes === PANEL_TYPES.LIST ? { renderOrderBy } : {}),
+		}),
+		[panelTypes, renderOrderBy],
+	);
+
 	return (
 		<QueryBuilderV2
-			isRawQuery={panelTypes === PANEL_TYPES.LIST}
+			isListViewPanel={panelTypes === PANEL_TYPES.LIST}
 			config={{ initialDataSource: DataSource.LOGS, queryVariant: 'static' }}
 			panelType={panelTypes}
+			filterConfigs={filterConfigs}
+			queryComponents={queryComponents}
 			showOnlyWhereClause={selectedView === ExplorerViews.LIST}
 			version="v3" // setting this to v3 as we this is rendered in logs explorer
 		/>

frontend/src/container/MeterExplorer/Explorer/Explorer.styles.scss

@@ -1,7 +1,18 @@
 .meter-explorer-container {
+	display: flex;
+	flex-direction: row;
+
+	.meter-explorer-quick-filters-section {
+		width: 280px;
+		border-right: 1px solid var(--l1-border);
+
+		&.hidden {
+			display: none;
+		}
+	}
+
 	.meter-explorer-content-section {
-		// Clearance for the fixed ExplorerOptions bar.
-		padding-bottom: 80px;
+		width: 100%;
 
 		// Meant to fix the query builder colors
 		--input-background: var(--l2-background);
@@ -72,6 +83,14 @@
 			}
 		}
 	}
+
+	&.quick-filters-open {
+		.meter-explorer-content-section {
+			width: calc(100% - 280px);
+		}
+	}
+
+	padding-bottom: 80px;
 }
 
 .dashboards-and-alerts-popover-container {

frontend/src/container/MeterExplorer/Explorer/Explorer.tsx

@@ -3,14 +3,16 @@ import { useQueryClient } from 'react-query';
 import * as Sentry from '@sentry/react';
 import { Button, Tooltip } from 'antd';
 import logEvent from 'api/common/logEvent';
+import cx from 'classnames';
 import { QueryBuilderV2 } from 'components/QueryBuilderV2/QueryBuilderV2';
-import QuickFiltersLayout from 'components/QuickFilters/QuickFiltersLayout/QuickFiltersLayout';
+import QuickFilters from 'components/QuickFilters/QuickFilters';
 import { useSignalFieldApis } from 'components/QuickFilters/hooks/useSignalFieldApis';
 import { QuickFiltersSource, SignalType } from 'components/QuickFilters/types';
 import { initialQueryMeterWithType, PANEL_TYPES } from 'constants/queryBuilder';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import ExplorerOptionWrapper from 'container/ExplorerOptions/ExplorerOptionWrapper';
 import RightToolbarActions from 'container/QueryBuilder/components/ToolbarActions/RightToolbarActions';
+import { QueryBuilderProps } from 'container/QueryBuilder/QueryBuilder.interfaces';
 import DateTimeSelector from 'container/TopNav/DateTimeSelectionV2';
 import { ExportDashboard } from 'hooks/dashboard/useExportDashboards';
 import { useGetExportToDashboardLink } from 'hooks/dashboard/useGetExportToDashboardLink';
@@ -118,23 +120,36 @@ function Explorer(): JSX.Element {
 		});
 	}, []);
 
+	const queryComponents = useMemo(
+		(): QueryBuilderProps['queryComponents'] => ({}),
+		[],
+	);
+
 	return (
 		<Sentry.ErrorBoundary fallback={<ErrorBoundaryFallback />}>
-			<QuickFiltersLayout
-				className="meter-explorer-container"
-				showFilters={showQuickFilters}
-				quickFilterProps={{
-					className: 'qf-meter-explorer',
-					source: QuickFiltersSource.METER_EXPLORER,
-					signal: SignalType.METER_EXPLORER,
-					showFilterCollapse: true,
-					showQueryName: false,
-					handleFilterVisibilityChange: (): void => {
-						setShowQuickFilters(!showQuickFilters);
-					},
-					useFieldApis: quickFilterFieldApis,
-				}}
+			<div
+				className={cx('meter-explorer-container', {
+					'quick-filters-open': showQuickFilters,
+				})}
 			>
+				<div
+					className={cx('meter-explorer-quick-filters-section', {
+						hidden: !showQuickFilters,
+					})}
+				>
+					<QuickFilters
+						className="qf-meter-explorer"
+						source={QuickFiltersSource.METER_EXPLORER}
+						signal={SignalType.METER_EXPLORER}
+						showFilterCollapse
+						showQueryName={false}
+						handleFilterVisibilityChange={(): void => {
+							setShowQuickFilters(!showQuickFilters);
+						}}
+						useFieldApis={quickFilterFieldApis}
+					/>
+				</div>
+
 				<div className="meter-explorer-content-section">
 					<div className="meter-explorer-explore-content">
 						<div className="explore-header">
@@ -166,6 +181,7 @@ function Explorer(): JSX.Element {
 								signalSource: 'meter',
 							}}
 							panelType={PANEL_TYPES.TIME_SERIES}
+							queryComponents={queryComponents}
 							showFunctions={false}
 							version="v3"
 						/>
@@ -187,7 +203,7 @@ function Explorer(): JSX.Element {
 						splitedQueries={splitedQueries}
 					/>
 				</div>
-			</QuickFiltersLayout>
+			</div>
 		</Sentry.ErrorBoundary>
 	);
 }

frontend/src/container/MetricsExplorer/Explorer/Explorer.tsx

@@ -12,6 +12,7 @@ import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import { usePageActions } from 'container/AIAssistant/pageActions/usePageActions';
 import ExplorerOptionWrapper from 'container/ExplorerOptions/ExplorerOptionWrapper';
 import RightToolbarActions from 'container/QueryBuilder/components/ToolbarActions/RightToolbarActions';
+import { QueryBuilderProps } from 'container/QueryBuilder/QueryBuilder.interfaces';
 import DateTimeSelector from 'container/TopNav/DateTimeSelectionV2';
 import { ExportDashboard } from 'hooks/dashboard/useExportDashboards';
 import { useGetExportToDashboardLink } from 'hooks/dashboard/useGetExportToDashboardLink';
@@ -322,6 +323,11 @@ function Explorer(): JSX.Element {
 		});
 	}, []);
 
+	const queryComponents = useMemo(
+		(): QueryBuilderProps['queryComponents'] => ({}),
+		[],
+	);
+
 	const [warning, setWarning] = useState<Warning | undefined>();
 
 	const oneChartPerQueryDisabledTooltip = useMemo(() => {
@@ -375,6 +381,7 @@ function Explorer(): JSX.Element {
 				<QueryBuilderV2
 					config={{ initialDataSource: DataSource.METRICS, queryVariant: 'static' }}
 					panelType={PANEL_TYPES.TIME_SERIES}
+					queryComponents={queryComponents}
 					showFunctions={false}
 					version="v3"
 				/>

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

@@ -1,9 +1,22 @@
 import { ReactNode } from 'react';
-import { TelemetrytypesSignalDTO } from 'api/generated/services/sigNoz.schemas';
-import { QueryBuilderFieldsConfig } from 'components/QueryBuilderV2/queryBuilderFields.types';
 import { PANEL_TYPES } from 'constants/queryBuilder';
+import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
 import { DataSource } from 'types/common/queryBuilder';
 
+import { OrderByFilterProps } from './filters/OrderByFilter/OrderByFilter.interfaces';
+
+export type WhereClauseConfig = {
+	customKey: string;
+	customOp: string;
+};
+
+type FilterConfigs = {
+	[Key in keyof Omit<IBuilderQuery, 'filters'>]: {
+		isHidden: boolean;
+		isDisabled: boolean;
+	};
+} & { filters: WhereClauseConfig };
+
 export type QueryBuilderConfig =
 	| {
 			queryVariant: 'static';
@@ -16,16 +29,9 @@ export type QueryBuilderProps = {
 	config?: QueryBuilderConfig;
 	panelType: PANEL_TYPES;
 	actions?: ReactNode;
-	fieldsConfig?: QueryBuilderFieldsConfig;
-	/**
-	 * The builder edits raw rows rather than an aggregation: a single query unless trace
-	 * matching is on, no formulas, data-source switches reset to the raw-query template,
-	 * and order by resolves keys without an aggregate attribute. Supplies the defaults for
-	 * `fieldsConfig` and `allowedDataSources`, which override it per field.
-	 */
-	isRawQuery?: boolean;
-	/** Defaults to every signal. */
-	allowedDataSources?: TelemetrytypesSignalDTO[];
+	filterConfigs?: Partial<FilterConfigs>;
+	queryComponents?: { renderOrderBy?: (props: OrderByFilterProps) => ReactNode };
+	isListViewPanel?: boolean;
 	showFunctions?: boolean;
 	showOnlyWhereClause?: boolean;
 	showOnlyTraceOperator?: boolean;

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

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+
+export type AdditionalFiltersProps = {
+	listOfAdditionalFilter: string[];
+	children: ReactNode;
+};

frontend/src/container/QueryBuilder/components/AdditionalFiltersToggler/AdditionalFiltersToggler.styled.ts

@@ -0,0 +1,38 @@
+import { SquareMinus, SquarePlus } from '@signozhq/icons';
+import { Color } from '@signozhq/design-tokens';
+import { Col } from 'antd';
+import { Typography } from '@signozhq/ui/typography';
+import styled, { css } from 'styled-components';
+
+const IconCss = css`
+	margin-right: 0.6875rem;
+	transition: all 0.2s ease;
+`;
+
+export const StyledIconOpen = styled(SquarePlus)`
+	${IconCss}
+`;
+
+export const StyledIconClose = styled(SquareMinus)`
+	${IconCss}
+`;
+
+export const StyledInner = styled(Col)`
+	width: fit-content;
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	margin-bottom: 0.875rem;
+	min-height: 1.375rem;
+	cursor: pointer;
+	&:hover {
+		${StyledIconOpen}, ${StyledIconClose} {
+			opacity: 0.7;
+		}
+	}
+`;
+
+export const StyledLink = styled(Typography.Link)`
+	pointer-events: none;
+	color: ${Color.BG_ROBIN_400} !important;
+`;

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

@@ -0,0 +1,15 @@
+.filter-toggler {
+	margin-right: 8px;
+}
+
+.additinal-filters-container {
+	.action-btn {
+		background: var(--primary-background);
+		width: 16px;
+		height: 16px;
+		border-radius: 3px;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+	}
+}

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

@@ -0,0 +1,66 @@
+import { Fragment, memo, ReactNode, useState } from 'react';
+import { Color } from '@signozhq/design-tokens';
+import { Col, Row } from 'antd';
+import { Typography } from '@signozhq/ui/typography';
+import { Minus, Plus } from '@signozhq/icons';
+
+// ** Types
+import { AdditionalFiltersProps } from './AdditionalFiltersToggler.interfaces';
+// ** Styles
+import { StyledInner, StyledLink } from './AdditionalFiltersToggler.styled';
+
+import './AdditionalFiltersToggler.styles.scss';
+
+export const AdditionalFiltersToggler = memo(function AdditionalFiltersToggler({
+	children,
+	listOfAdditionalFilter,
+}: AdditionalFiltersProps): JSX.Element {
+	const [isOpenedFilters, setIsOpenedFilters] = useState<boolean>(false);
+
+	const handleToggleOpenFilters = (): void => {
+		setIsOpenedFilters((prevState) => !prevState);
+	};
+
+	const filtersTexts: ReactNode = listOfAdditionalFilter?.map((str, index) => {
+		const isNextLast = index + 1 === listOfAdditionalFilter.length - 1;
+
+		if (index === listOfAdditionalFilter.length - 1) {
+			return (
+				<Fragment key={str}>
+					{listOfAdditionalFilter?.length > 1 && 'and'}{' '}
+					<StyledLink>{str.toUpperCase()}</StyledLink>
+				</Fragment>
+			);
+		}
+
+		return (
+			<span key={str}>
+				<StyledLink>{str.toUpperCase()}</StyledLink>
+				{isNextLast ? ' ' : ', '}
+			</span>
+		);
+	});
+
+	return (
+		<Row className="additinal-filters-container">
+			<Col span={24}>
+				<StyledInner onClick={handleToggleOpenFilters} style={{ marginBottom: 0 }}>
+					{isOpenedFilters ? (
+						<span className="action-btn">
+							<Minus size={14} color={Color.BG_INK_500} />
+						</span>
+					) : (
+						<span className="action-btn">
+							<Plus size={14} color={Color.BG_INK_500} />
+						</span>
+					)}
+
+					{!isOpenedFilters && (
+						<Typography>Add conditions for {filtersTexts}</Typography>
+					)}
+				</StyledInner>
+			</Col>
+			{isOpenedFilters && <Col span={24}>{children}</Col>}
+		</Row>
+	);
+});

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

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

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

@@ -1,10 +1,8 @@
 import { SelectProps } from 'antd';
-import { TelemetrytypesSignalDTO } from 'api/generated/services/sigNoz.schemas';
 import { DataSource } from 'types/common/queryBuilder';
 
 export type QueryLabelProps = {
 	onChange: (value: DataSource) => void;
-	/** Defaults to every signal. */
-	allowedDataSources?: TelemetrytypesSignalDTO[];
+	isListViewPanel?: boolean;
 	'data-testid'?: string;
 } & Omit<SelectProps, 'onChange'>;

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

@@ -1,6 +1,5 @@
 import { memo } from 'react';
 import { Select } from 'antd';
-import { TelemetrytypesSignalDTO } from 'api/generated/services/sigNoz.schemas';
 import { DataSource } from 'types/common/queryBuilder';
 import { SelectOption } from 'types/common/select';
 // ** Helpers
@@ -8,24 +7,25 @@ import { transformToUpperCase } from 'utils/transformToUpperCase';
 
 // ** Types
 import { QueryLabelProps } from './DataSourceDropdown.interfaces';
-import { signalsToDataSources } from './DataSourceDropdown.utils';
 
-const ALL_SIGNALS = [
-	TelemetrytypesSignalDTO.logs,
-	TelemetrytypesSignalDTO.metrics,
-	TelemetrytypesSignalDTO.traces,
-];
+const dataSourceMap = [DataSource.LOGS, DataSource.METRICS, DataSource.TRACES];
+
+const exploreDataSourceMap = [DataSource.LOGS, DataSource.TRACES];
 
 export const DataSourceDropdown = memo(function DataSourceDropdown(
 	props: QueryLabelProps,
 ): JSX.Element {
-	const { onChange, value, style, allowedDataSources = ALL_SIGNALS } = props;
+	const { onChange, value, style, isListViewPanel = false } = props;
 
-	const dataSourceOptions: SelectOption<DataSource, string>[] =
-		signalsToDataSources(allowedDataSources).map((source) => ({
-			label: transformToUpperCase(source),
-			value: source,
-		}));
+	const dataSourceOptions: SelectOption<DataSource, string>[] = isListViewPanel
+		? exploreDataSourceMap.map((source) => ({
+				label: transformToUpperCase(source),
+				value: source,
+			}))
+		: dataSourceMap.map((source) => ({
+				label: transformToUpperCase(source),
+				value: source,
+			}));
 
 	return (
 		<Select

frontend/src/container/QueryBuilder/components/DataSourceDropdown/DataSourceDropdown.utils.ts

@@ -1,23 +0,0 @@
-import { TelemetrytypesSignalDTO } from 'api/generated/services/sigNoz.schemas';
-import { DataSource } from 'types/common/queryBuilder';
-
-// Total, not Partial, so a signal added to the generated enum has to be mapped here
-// before it compiles.
-const SIGNAL_TO_DATA_SOURCE: Record<
-	TelemetrytypesSignalDTO,
-	DataSource | undefined
-> = {
-	[TelemetrytypesSignalDTO.logs]: DataSource.LOGS,
-	[TelemetrytypesSignalDTO.metrics]: DataSource.METRICS,
-	[TelemetrytypesSignalDTO.traces]: DataSource.TRACES,
-	// The "unset" member: not a data source a query can be built against.
-	[TelemetrytypesSignalDTO['']]: undefined,
-};
-
-export function signalsToDataSources(
-	signals: readonly TelemetrytypesSignalDTO[],
-): DataSource[] {
-	return signals
-		.map((signal) => SIGNAL_TO_DATA_SOURCE[signal])
-		.filter((dataSource): dataSource is DataSource => Boolean(dataSource));
-}

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

@@ -0,0 +1,6 @@
+import { CSSProperties } from 'react';
+
+export type FilterLabelProps = {
+	label: string;
+	style?: CSSProperties;
+};

frontend/src/container/QueryBuilder/components/FilterLabel/FilterLabel.styled.ts

@@ -0,0 +1,16 @@
+import styled from 'styled-components';
+
+interface Props {
+	isDarkMode: boolean;
+	children?: React.ReactNode;
+}
+
+export const StyledLabel = styled.div<Props>`
+	padding: 0 0.6875rem;
+	min-height: 2rem;
+	min-width: 5.625rem;
+	display: inline-flex;
+	white-space: nowrap;
+	align-items: center;
+	border-radius: 0.125rem;
+`;

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

@@ -0,0 +1,26 @@
+import { memo } from 'react';
+import { Typography } from '@signozhq/ui/typography';
+import { useIsDarkMode } from 'hooks/useDarkMode';
+
+// ** Types
+import { FilterLabelProps } from './FilterLabel.interfaces';
+// ** Styles
+import { StyledLabel } from './FilterLabel.styled';
+
+export const FilterLabel = memo(function FilterLabel({
+	label,
+}: FilterLabelProps): JSX.Element {
+	const isDarkMode = useIsDarkMode();
+
+	return (
+		<StyledLabel isDarkMode={isDarkMode}>
+			<Typography
+				style={{
+					color: 'var(--bg-vanilla-400)',
+				}}
+			>
+				{label}
+			</Typography>
+		</StyledLabel>
+	);
+});

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

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

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

@@ -1,3 +1,4 @@
+import { QueryBuilderProps } from 'container/QueryBuilder/QueryBuilder.interfaces';
 import {
 	IBuilderFormula,
 	IBuilderQuery,
@@ -7,5 +8,7 @@ export type FormulaProps = {
 	formula: IBuilderFormula;
 	index: number;
 	query: IBuilderQuery;
+	filterConfigs: Partial<QueryBuilderProps['filterConfigs']>;
+	isAdditionalFilterEnable: boolean;
 	isQBV2?: boolean;
 };

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

@@ -2,6 +2,11 @@ import { ChangeEvent, useCallback, useMemo, useState } from 'react';
 import { Col, Input, Row, Select } from 'antd';
 import InputWithLabel from 'components/InputWithLabel/InputWithLabel';
 import { LEGEND } from 'constants/global';
+// ** Components
+import { FilterLabel } from 'container/QueryBuilder/components';
+import HavingFilter from 'container/QueryBuilder/filters/Formula/Having/HavingFilter';
+import LimitFilter from 'container/QueryBuilder/filters/Formula/Limit/Limit';
+import OrderByFilter from 'container/QueryBuilder/filters/Formula/OrderBy/OrderByFilter';
 // ** Hooks
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useQueryOperations } from 'hooks/queryBuilder/useQueryBuilderOperations';
@@ -12,6 +17,7 @@ import {
 import { getFormatedLegend } from 'utils/getFormatedLegend';
 import { popupContainer } from 'utils/selectPopupContainer';
 
+import { AdditionalFiltersToggler } from '../AdditionalFiltersToggler';
 import QBEntityOptions from '../QBEntityOptions/QBEntityOptions';
 // ** Types
 import { FormulaProps } from './Formula.interfaces';
@@ -21,18 +27,22 @@ import './Formula.styles.scss';
 export function Formula({
 	index,
 	formula,
+	filterConfigs,
 	query,
+	isAdditionalFilterEnable,
 	isQBV2,
 }: FormulaProps): JSX.Element {
 	const { removeQueryBuilderEntityByIndex, handleSetFormulaData } =
 		useQueryBuilder();
 
-	const { handleChangeFormulaData } = useQueryOperations({
-		index,
-		query,
-		formula,
-		entityVersion: '',
-	});
+	const { listOfAdditionalFormulaFilters, handleChangeFormulaData } =
+		useQueryOperations({
+			index,
+			query,
+			filterConfigs,
+			formula,
+			entityVersion: '',
+		});
 
 	const [isCollapse, setIsCollapsed] = useState(false);
 
@@ -73,6 +83,20 @@ export function Formula({
 		[handleChangeFormulaData],
 	);
 
+	const handleChangeHavingFilter = useCallback(
+		(value: IBuilderFormula['having']) => {
+			handleChangeFormulaData('having', value);
+		},
+		[handleChangeFormulaData],
+	);
+
+	const handleChangeOrderByFilter = useCallback(
+		(value: IBuilderFormula['orderBy']) => {
+			handleChangeFormulaData('orderBy', value);
+		},
+		[handleChangeFormulaData],
+	);
+
 	const handleQBV2OrderByChange = useCallback(
 		(value: string) => {
 			const [columnName, order] = value.split(' ');
@@ -98,6 +122,54 @@ export function Formula({
 		[formula.orderBy],
 	);
 
+	const renderAdditionalFilters = useMemo(
+		() => (
+			<>
+				<Col span={11}>
+					<Row gutter={[11, 5]}>
+						<Col flex="5.93rem">
+							<FilterLabel label="Limit" />
+						</Col>
+						<Col flex="1 1 12.5rem">
+							<LimitFilter formula={formula} onChange={handleChangeLimit} />
+						</Col>
+					</Row>
+				</Col>
+				<Col span={11}>
+					<Row gutter={[11, 5]}>
+						<Col flex="5.93rem">
+							<FilterLabel label="HAVING" />
+						</Col>
+						<Col flex="1 1 12.5rem">
+							<HavingFilter formula={formula} onChange={handleChangeHavingFilter} />
+						</Col>
+					</Row>
+				</Col>
+				<Col span={11}>
+					<Row gutter={[11, 5]}>
+						<Col flex="5.93rem">
+							<FilterLabel label="Order by" />
+						</Col>
+						<Col flex="1 1 12.5rem">
+							<OrderByFilter
+								query={query}
+								formula={formula}
+								onChange={handleChangeOrderByFilter}
+							/>
+						</Col>
+					</Row>
+				</Col>
+			</>
+		),
+		[
+			formula,
+			handleChangeHavingFilter,
+			handleChangeLimit,
+			handleChangeOrderByFilter,
+			query,
+		],
+	);
+
 	return (
 		<Row gutter={[0, 15]}>
 			<QBEntityOptions
@@ -134,6 +206,17 @@ export function Formula({
 							addonBefore="Legend Format"
 						/>
 					</Col>
+					{isAdditionalFilterEnable && (
+						<Col span={24}>
+							<AdditionalFiltersToggler
+								listOfAdditionalFilter={listOfAdditionalFormulaFilters}
+							>
+								<Row gutter={[0, 11]} justify="space-between">
+									{renderAdditionalFilters}
+								</Row>
+							</AdditionalFiltersToggler>
+						</Col>
+					)}
 					{isQBV2 && (
 						<Col span={24}>
 							<div className="formula-qbv2-container">

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

@@ -84,14 +84,5 @@
 		.options-group {
 			max-width: 100%;
 		}
-
-		.query-functions-container--disabled {
-			opacity: 0.45;
-			cursor: not-allowed;
-
-			> * {
-				pointer-events: none;
-			}
-		}
 	}
 }

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

@@ -1,6 +1,5 @@
 import { useLocation } from 'react-router-dom';
 import { Button, Col, Tooltip } from 'antd';
-import { TelemetrytypesSignalDTO } from 'api/generated/services/sigNoz.schemas';
 import cx from 'classnames';
 import ROUTES from 'constants/routes';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
@@ -27,8 +26,6 @@ interface QBEntityOptionsProps {
 	query?: IBuilderQuery;
 	isMetricsDataSource?: boolean;
 	showFunctions?: boolean;
-	areFunctionsDisabled?: boolean;
-	functionsDisabledReason?: string;
 	isCollapsed: boolean;
 	entityType: string;
 	entityData: any;
@@ -39,8 +36,7 @@ interface QBEntityOptionsProps {
 	onQueryFunctionsUpdates?: (functions: QueryFunction[]) => void;
 	showDeleteButton?: boolean;
 	showCloneOption?: boolean;
-	isRawQuery?: boolean;
-	allowedDataSources?: TelemetrytypesSignalDTO[];
+	isListViewPanel?: boolean;
 	index?: number;
 	showTraceOperator?: boolean;
 	hasTraceOperator?: boolean;
@@ -54,15 +50,12 @@ export default function QBEntityOptions({
 	isMetricsDataSource,
 	isCollapsed,
 	showFunctions,
-	areFunctionsDisabled,
-	functionsDisabledReason,
 	entityType,
 	entityData,
 	onToggleVisibility,
 	onCollapseEntity,
 	onQueryFunctionsUpdates,
-	isRawQuery,
-	allowedDataSources,
+	isListViewPanel,
 	onDelete,
 	showDeleteButton,
 	showCloneOption,
@@ -107,7 +100,7 @@ export default function QBEntityOptions({
 									value="query-builder"
 									className="periscope-btn visibility-toggle"
 									onClick={onToggleVisibility}
-									disabled={isRawQuery && !showTraceOperator}
+									disabled={isListViewPanel && !showTraceOperator}
 								>
 									{entityData.disabled ? <EyeOff size={16} /> : <Eye size={16} />}
 								</Button>
@@ -126,7 +119,7 @@ export default function QBEntityOptions({
 									'periscope-btn',
 									entityType === 'query' ? 'query-name' : 'formula-name',
 									query?.dataSource === DataSource.TRACES &&
-										(hasTraceOperator || (showTraceOperator && isRawQuery))
+										(hasTraceOperator || (showTraceOperator && isListViewPanel))
 										? 'has-trace-operator'
 										: '',
 									isLogsExplorerPage && lastUsedQuery === index ? 'sync-btn' : '',
@@ -145,33 +138,24 @@ export default function QBEntityOptions({
 										}}
 										data-testid={`query-data-source-selector-${index}`}
 										value={query?.dataSource || DataSource.METRICS}
-										allowedDataSources={allowedDataSources}
+										isListViewPanel={isListViewPanel}
 										className="query-data-source-dropdown"
 									/>
 								</div>
 							)}
 
 							{showFunctions &&
-								!isRawQuery &&
+								!isListViewPanel &&
 								(isMetricsDataSource || isLogsDataSource) &&
 								query &&
 								onQueryFunctionsUpdates && (
-									<Tooltip title={functionsDisabledReason}>
-										<div
-											className={cx('query-functions-container', {
-												'query-functions-container--disabled': areFunctionsDisabled,
-											})}
-											aria-disabled={areFunctionsDisabled}
-										>
-											<QueryFunctions
-												query={query}
-												queryFunctions={query.functions || []}
-												key={query.functions?.toString()}
-												onChange={onQueryFunctionsUpdates}
-												maxFunctions={isLogsDataSource ? 1 : 3}
-											/>
-										</div>
-									</Tooltip>
+									<QueryFunctions
+										query={query}
+										queryFunctions={query.functions || []}
+										key={query.functions?.toString()}
+										onChange={onQueryFunctionsUpdates}
+										maxFunctions={isLogsDataSource ? 1 : 3}
+									/>
 								)}
 						</Button.Group>
 					</div>
@@ -184,7 +168,7 @@ export default function QBEntityOptions({
 					)}
 				</div>
 
-				{showDeleteButton && !isRawQuery && (
+				{showDeleteButton && !isListViewPanel && (
 					<Button className="periscope-btn ghost" onClick={onDelete}>
 						<Trash2 size={14} />
 					</Button>
@@ -195,14 +179,11 @@ export default function QBEntityOptions({
 }
 
 QBEntityOptions.defaultProps = {
-	isRawQuery: false,
-	allowedDataSources: undefined,
+	isListViewPanel: false,
 	query: undefined,
 	isMetricsDataSource: false,
 	onQueryFunctionsUpdates: undefined,
 	showFunctions: false,
-	areFunctionsDisabled: false,
-	functionsDisabledReason: undefined,
 	onCloneQuery: noop,
 	index: 0,
 	onDelete: noop,

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

@@ -1,4 +1,6 @@
+export { AdditionalFiltersToggler } from './AdditionalFiltersToggler';
 export { DataSourceDropdown } from './DataSourceDropdown';
+export { FilterLabel } from './FilterLabel';
 export { Formula } from './Formula';
 export { HavingFilterTag } from './HavingFilterTag';
 export { ListItemWrapper } from './ListItemWrapper';

frontend/src/container/QueryBuilder/filters/Formula/Having/HavingFilter.tsx

@@ -0,0 +1,198 @@
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { Select } from 'antd';
+import { HAVING_OPERATORS, initialHavingValues } from 'constants/queryBuilder';
+import { HavingFilterTag } from 'container/QueryBuilder/components';
+import { useTagValidation } from 'hooks/queryBuilder/useTagValidation';
+import {
+	transformFromStringToHaving,
+	transformHavingToStringValue,
+} from 'lib/query/transformQueryBuilderData';
+import { Having, HavingForm } from 'types/api/queryBuilder/queryBuilderData';
+import { SelectOption } from 'types/common/select';
+import { useSelectPopupContainer } from 'utils/selectPopupContainer';
+
+import { getHavingObject, isValidHavingValue } from '../../utils';
+import { HavingFilterProps, HavingTagRenderProps } from './types';
+
+function HavingFilter({ formula, onChange }: HavingFilterProps): JSX.Element {
+	const getPopupContainer = useSelectPopupContainer();
+	const { having } = formula;
+	const [searchText, setSearchText] = useState<string>('');
+	const [localValues, setLocalValues] = useState<string[]>([]);
+	const [currentFormValue, setCurrentFormValue] =
+		useState<HavingForm>(initialHavingValues);
+	const [options, setOptions] = useState<SelectOption<string, string>[]>([]);
+
+	const { isMulti } = useTagValidation(
+		currentFormValue.op,
+		currentFormValue.value,
+	);
+
+	const columnName = formula.expression.replace(/ /g, '').toUpperCase();
+
+	const aggregatorOptions: SelectOption<string, string>[] = useMemo(
+		() => [{ label: columnName, value: columnName }],
+		[columnName],
+	);
+
+	const handleUpdateTag = useCallback(
+		(value: string) => {
+			const filteredValues = localValues.filter(
+				(currentValue) => currentValue !== value,
+			);
+			const having: Having[] = filteredValues.map(transformFromStringToHaving);
+
+			onChange(having);
+			setSearchText(value);
+		},
+		[localValues, onChange],
+	);
+
+	const generateOptions = useCallback(
+		(currentString: string) => {
+			const [aggregator = '', op = '', ...restValue] = currentString.split(' ');
+			let newOptions: SelectOption<string, string>[] = [];
+
+			const isAggregatorExist = columnName
+				.toLowerCase()
+				.includes(currentString.toLowerCase());
+
+			const isAggregatorChosen = aggregator === columnName;
+
+			if (isAggregatorExist || aggregator === '') {
+				newOptions = aggregatorOptions;
+			}
+
+			if ((isAggregatorChosen && op === '') || op) {
+				const filteredOperators = HAVING_OPERATORS.filter((num) =>
+					num.toLowerCase().includes(op.toLowerCase()),
+				);
+
+				newOptions = filteredOperators.map((opt) => ({
+					label: `${columnName} ${opt} ${restValue && restValue.join(' ')}`,
+					value: `${columnName} ${opt} ${restValue && restValue.join(' ')}`,
+				}));
+			}
+
+			setOptions(newOptions);
+		},
+		[aggregatorOptions, columnName],
+	);
+
+	const parseSearchText = useCallback(
+		(text: string) => {
+			const { columnName, op, value } = getHavingObject(text);
+			setCurrentFormValue({ columnName, op, value });
+
+			generateOptions(text);
+		},
+		[generateOptions],
+	);
+
+	const tagRender = ({
+		label,
+		value,
+		closable,
+		disabled,
+		onClose,
+	}: HavingTagRenderProps): JSX.Element => {
+		const handleClose = (): void => {
+			onClose();
+			setSearchText('');
+		};
+		return (
+			<HavingFilterTag
+				label={label}
+				value={value}
+				closable={closable}
+				disabled={disabled}
+				onClose={handleClose}
+				onUpdate={handleUpdateTag}
+			/>
+		);
+	};
+
+	const handleSearch = (search: string): void => {
+		const trimmedSearch = search.replace(/\s\s+/g, ' ').trimStart();
+
+		const currentSearch = isMulti
+			? trimmedSearch
+			: trimmedSearch.split(' ').slice(0, 3).join(' ');
+
+		const isValidSearch = isValidHavingValue(currentSearch);
+
+		if (isValidSearch) {
+			setSearchText(currentSearch);
+		}
+	};
+
+	useEffect(() => {
+		setLocalValues(transformHavingToStringValue(having || []));
+	}, [having]);
+
+	useEffect(() => {
+		parseSearchText(searchText);
+	}, [searchText, parseSearchText]);
+
+	const resetChanges = (): void => {
+		setSearchText('');
+		setCurrentFormValue(initialHavingValues);
+		setOptions(aggregatorOptions);
+	};
+
+	const handleDeselect = (value: string): void => {
+		const result = localValues.filter((item) => item !== value);
+		const having: Having[] = result.map(transformFromStringToHaving);
+		onChange(having);
+		resetChanges();
+	};
+
+	const handleSelect = (currentValue: string): void => {
+		const { columnName, op, value } = getHavingObject(currentValue);
+
+		const isCompletedValue = value.every((item) => !!item);
+
+		const isClearSearch = isCompletedValue && columnName && op;
+
+		setSearchText(isClearSearch ? '' : currentValue);
+	};
+
+	const handleChange = (values: string[]): void => {
+		const having: Having[] = values.map(transformFromStringToHaving);
+
+		const isSelectable =
+			currentFormValue.value.length > 0 &&
+			currentFormValue.value.every((value) => !!value);
+
+		if (isSelectable) {
+			onChange(having);
+			resetChanges();
+		}
+	};
+
+	return (
+		<Select
+			getPopupContainer={getPopupContainer}
+			autoClearSearchValue={false}
+			mode="multiple"
+			onSearch={handleSearch}
+			searchValue={searchText}
+			data-testid="havingSelectFormula"
+			placeholder="Count(operation) > 5"
+			style={{ width: '100%' }}
+			tagRender={tagRender}
+			onDeselect={handleDeselect}
+			onSelect={handleSelect}
+			onChange={handleChange}
+			value={localValues}
+		>
+			{options.map((opt) => (
+				<Select.Option key={opt.value} value={opt.value} title="havingOption">
+					{opt.label}
+				</Select.Option>
+			))}
+		</Select>
+	);
+}
+
+export default HavingFilter;

frontend/src/container/QueryBuilder/filters/Formula/Having/types.ts

@@ -0,0 +1,12 @@
+import { HavingFilterTagProps } from 'container/QueryBuilder/components/HavingFilterTag/HavingFilterTag.interfaces';
+import {
+	Having,
+	IBuilderFormula,
+} from 'types/api/queryBuilder/queryBuilderData';
+
+export type HavingFilterProps = {
+	formula: IBuilderFormula;
+	onChange: (having: Having[]) => void;
+};
+
+export type HavingTagRenderProps = Omit<HavingFilterTagProps, 'onUpdate'>;

frontend/src/container/QueryBuilder/filters/Formula/Limit/Limit.tsx

@@ -0,0 +1,20 @@
+import { InputNumber } from 'antd';
+
+import { selectStyle } from '../../QueryBuilderSearchV2/config';
+import { handleKeyDownLimitFilter } from '../../utils';
+import { LimitFilterProps } from './types';
+
+function LimitFilter({ onChange, formula }: LimitFilterProps): JSX.Element {
+	return (
+		<InputNumber
+			min={1}
+			type="number"
+			value={formula.limit}
+			style={selectStyle}
+			onChange={onChange}
+			onKeyDown={handleKeyDownLimitFilter}
+		/>
+	);
+}
+
+export default LimitFilter;

frontend/src/container/QueryBuilder/filters/Formula/Limit/types.ts

@@ -0,0 +1,6 @@
+import { IBuilderFormula } from 'types/api/queryBuilder/queryBuilderData';
+
+export interface LimitFilterProps {
+	onChange: (values: number | null) => void;
+	formula: IBuilderFormula;
+}

frontend/src/container/QueryBuilder/filters/Formula/OrderBy/OrderByFilter.tsx

@@ -0,0 +1,85 @@
+import { useMemo } from 'react';
+import { Select, Spin } from 'antd';
+import { useGetAggregateKeys } from 'hooks/queryBuilder/useGetAggregateKeys';
+import { MetricAggregateOperator } from 'types/common/queryBuilder';
+import { useSelectPopupContainer } from 'utils/selectPopupContainer';
+
+import { selectStyle } from '../../QueryBuilderSearchV2/config';
+import { OrderByProps } from './types';
+import { useOrderByFormulaFilter } from './useOrderByFormulaFilter';
+
+function OrderByFilter({
+	formula,
+	onChange,
+	query,
+}: OrderByProps): JSX.Element {
+	const getPopupContainer = useSelectPopupContainer();
+	const {
+		debouncedSearchText,
+		createOptions,
+		aggregationOptions,
+		handleChange,
+		handleSearchKeys,
+		selectedValue,
+		generateOptions,
+	} = useOrderByFormulaFilter({
+		query,
+		onChange,
+		formula,
+	});
+
+	const { data, isFetching } = useGetAggregateKeys(
+		{
+			aggregateAttribute: query.aggregateAttribute?.key || '',
+			dataSource: query.dataSource,
+			aggregateOperator: query.aggregateOperator || '',
+			searchText: debouncedSearchText,
+		},
+		{
+			enabled: !!query.aggregateAttribute?.key,
+			keepPreviousData: true,
+		},
+	);
+
+	const optionsData = useMemo(() => {
+		const keyOptions = createOptions(data?.payload?.attributeKeys || []);
+		const groupByOptions = createOptions(query.groupBy);
+		const options =
+			query.aggregateOperator === MetricAggregateOperator.NOOP
+				? keyOptions
+				: [...groupByOptions, ...aggregationOptions];
+
+		return generateOptions(options);
+	}, [
+		aggregationOptions,
+		createOptions,
+		data?.payload?.attributeKeys,
+		generateOptions,
+		query.aggregateOperator,
+		query.groupBy,
+	]);
+
+	const isDisabledSelect =
+		!query.aggregateAttribute?.key ||
+		query.aggregateOperator === MetricAggregateOperator.NOOP;
+
+	return (
+		<Select
+			getPopupContainer={getPopupContainer}
+			mode="tags"
+			style={selectStyle}
+			onSearch={handleSearchKeys}
+			showSearch
+			disabled={isDisabledSelect}
+			showArrow={false}
+			value={selectedValue}
+			labelInValue
+			filterOption={false}
+			options={optionsData}
+			notFoundContent={isFetching ? <Spin size="small" /> : null}
+			onChange={handleChange}
+		/>
+	);
+}
+
+export default OrderByFilter;

frontend/src/container/QueryBuilder/filters/Formula/OrderBy/types.ts

@@ -0,0 +1,12 @@
+import {
+	IBuilderFormula,
+	IBuilderQuery,
+} from 'types/api/queryBuilder/queryBuilderData';
+
+export interface OrderByProps {
+	formula: IBuilderFormula;
+	query: IBuilderQuery;
+	onChange: (value: IBuilderFormula['orderBy']) => void;
+}
+
+export type IOrderByFormulaFilterProps = OrderByProps;

frontend/src/container/QueryBuilder/filters/Formula/OrderBy/useOrderByFormulaFilter.tsx

@@ -0,0 +1,129 @@
+import { useMemo, useState } from 'react';
+import { DEBOUNCE_DELAY } from 'constants/queryBuilderFilterConfig';
+import useDebounce from 'hooks/useDebounce';
+import { IOption } from 'hooks/useResourceAttribute/types';
+import isEqual from 'lodash-es/isEqual';
+import uniqWith from 'lodash-es/uniqWith';
+import { parse } from 'papaparse';
+import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
+import { OrderByPayload } from 'types/api/queryBuilder/queryBuilderData';
+
+import { ORDERBY_FILTERS } from '../../OrderByFilter/config';
+import { SIGNOZ_VALUE } from '../../OrderByFilter/constants';
+import { UseOrderByFilterResult } from '../../OrderByFilter/useOrderByFilter';
+import {
+	getLabelFromValue,
+	mapLabelValuePairs,
+	orderByValueDelimiter,
+} from '../../OrderByFilter/utils';
+import { getRemoveOrderFromValue } from '../../QueryBuilderSearchV2/utils';
+import { getUniqueOrderByValues, getValidOrderByResult } from '../../utils';
+import { IOrderByFormulaFilterProps } from './types';
+import { transformToOrderByStringValuesByFormula } from './utils';
+
+export const useOrderByFormulaFilter = ({
+	onChange,
+	formula,
+}: IOrderByFormulaFilterProps): UseOrderByFilterResult => {
+	const [searchText, setSearchText] = useState<string>('');
+
+	const debouncedSearchText = useDebounce(searchText, DEBOUNCE_DELAY);
+
+	const handleSearchKeys = (searchText: string): void =>
+		setSearchText(searchText);
+
+	const handleChange = (values: IOption[]): void => {
+		const validResult = getValidOrderByResult(values);
+		const result = getUniqueOrderByValues(validResult);
+
+		const orderByValues: OrderByPayload[] = result.map((item) => {
+			const match = parse(item.value, { delimiter: orderByValueDelimiter });
+
+			if (!match) {
+				return {
+					columnName: item.value,
+					order: ORDERBY_FILTERS.ASC,
+				};
+			}
+
+			const [columnName, order] = match.data.flat() as string[];
+
+			const columnNameValue =
+				columnName === SIGNOZ_VALUE ? SIGNOZ_VALUE : columnName;
+
+			const orderValue = order ?? ORDERBY_FILTERS.ASC;
+
+			return {
+				columnName: columnNameValue,
+				order: orderValue,
+			};
+		});
+
+		setSearchText('');
+		onChange(orderByValues);
+	};
+
+	const aggregationOptions = [
+		{
+			label: `${formula.expression} ${ORDERBY_FILTERS.ASC}`,
+			value: `${SIGNOZ_VALUE}${orderByValueDelimiter}${ORDERBY_FILTERS.ASC}`,
+		},
+		{
+			label: `${formula.expression} ${ORDERBY_FILTERS.DESC}`,
+			value: `${SIGNOZ_VALUE}${orderByValueDelimiter}${ORDERBY_FILTERS.DESC}`,
+		},
+	];
+
+	const selectedValue = transformToOrderByStringValuesByFormula(formula);
+
+	const createOptions = (data: BaseAutocompleteData[]): IOption[] =>
+		mapLabelValuePairs(data).flat();
+
+	const customValue: IOption[] = useMemo(() => {
+		if (!searchText) {
+			return [];
+		}
+
+		return [
+			{
+				label: `${searchText} ${ORDERBY_FILTERS.ASC}`,
+				value: `${searchText}${orderByValueDelimiter}${ORDERBY_FILTERS.ASC}`,
+			},
+			{
+				label: `${searchText} ${ORDERBY_FILTERS.DESC}`,
+				value: `${searchText}${orderByValueDelimiter}${ORDERBY_FILTERS.DESC}`,
+			},
+		];
+	}, [searchText]);
+
+	const generateOptions = (options: IOption[]): IOption[] => {
+		const currentCustomValue = options.find(
+			(keyOption) =>
+				getRemoveOrderFromValue(keyOption.value) === debouncedSearchText,
+		)
+			? []
+			: customValue;
+
+		const result = [...currentCustomValue, ...options];
+
+		const uniqResult = uniqWith(result, isEqual);
+
+		return uniqResult.filter(
+			(option) =>
+				!getLabelFromValue(selectedValue).includes(
+					getRemoveOrderFromValue(option.value),
+				),
+		);
+	};
+
+	return {
+		searchText,
+		debouncedSearchText,
+		selectedValue,
+		aggregationOptions,
+		createOptions,
+		handleChange,
+		handleSearchKeys,
+		generateOptions,
+	};
+};

frontend/src/container/QueryBuilder/filters/Formula/OrderBy/utils.ts

@@ -0,0 +1,26 @@
+import { IOption } from 'hooks/useResourceAttribute/types';
+import { IBuilderFormula } from 'types/api/queryBuilder/queryBuilderData';
+
+import { SIGNOZ_VALUE } from '../../OrderByFilter/constants';
+import { orderByValueDelimiter } from '../../OrderByFilter/utils';
+
+export const transformToOrderByStringValuesByFormula = (
+	formula: IBuilderFormula,
+): IOption[] => {
+	const prepareSelectedValue: IOption[] =
+		formula?.orderBy?.map((item) => {
+			if (item.columnName === SIGNOZ_VALUE) {
+				return {
+					label: `${formula.expression} ${item.order}`,
+					value: `${item.columnName}${orderByValueDelimiter}${item.order}`,
+				};
+			}
+
+			return {
+				label: `${item.columnName} ${item.order}`,
+				value: `${item.columnName}${orderByValueDelimiter}${item.order}`,
+			};
+		}) || [];
+
+	return prepareSelectedValue;
+};

frontend/src/container/QueryBuilder/filters/OrderByFilter/OrderByFilter.interfaces.ts

@@ -6,7 +6,7 @@ import {
 export type OrderByFilterProps = {
 	query: IBuilderQuery;
 	onChange: (values: OrderByPayload[]) => void;
-	isRawQuery?: boolean;
+	isListViewPanel?: boolean;
 	entityVersion?: string;
 	isNewQueryV2?: boolean;
 };

frontend/src/container/QueryBuilder/filters/OrderByFilter/OrderByFilter.tsx

@@ -12,7 +12,7 @@ import { useOrderByFilter } from './useOrderByFilter';
 export function OrderByFilter({
 	query,
 	onChange,
-	isRawQuery = false,
+	isListViewPanel = false,
 	entityVersion,
 	isNewQueryV2 = false,
 }: OrderByFilterProps): JSX.Element {
@@ -35,7 +35,7 @@ export function OrderByFilter({
 			searchText: debouncedSearchText,
 		},
 		{
-			enabled: !!query.aggregateAttribute?.key || isRawQuery,
+			enabled: !!query.aggregateAttribute?.key || isListViewPanel,
 			keepPreviousData: true,
 		},
 	);

frontend/src/container/QueryBuilder/filters/QueryBuilderSearchV2/QueryBuilderSearchV2.tsx

@@ -19,6 +19,7 @@ import {
 	QUERY_BUILDER_SEARCH_VALUES,
 } from 'constants/queryBuilder';
 import { DEBOUNCE_DELAY } from 'constants/queryBuilderFilterConfig';
+import type { WhereClauseConfig } from 'container/QueryBuilder/QueryBuilder.interfaces';
 import { LogsExplorerShortcuts } from 'constants/shortcuts/logsExplorerShortcuts';
 import { useDynamicVariableSuggestions } from 'hooks/dashboard/useDynamicVariableSuggestions';
 import { useKeyboardHotkeys } from 'hooks/hotkeys/useKeyboardHotkeys';
@@ -87,6 +88,7 @@ interface CustomTagProps {
 interface QueryBuilderSearchV2Props {
 	query: IBuilderQuery;
 	onChange: (value: TagFilter) => void;
+	whereClauseConfig?: WhereClauseConfig;
 	placeholder?: string;
 	className?: string;
 	suffixIcon?: React.ReactNode;
@@ -143,6 +145,7 @@ function QueryBuilderSearchV2(
 		placeholder,
 		className,
 		suffixIcon,
+		whereClauseConfig,
 		hardcodedAttributeKeys,
 		hasPopupContainer,
 		rootClassName,
@@ -474,7 +477,31 @@ function QueryBuilderSearchV2(
 		if (searchValue) {
 			const operatorType =
 				operatorTypeMapper[currentFilterItem?.op || ''] || 'NOT_VALID';
+			// if key is added and operator is not present then convert to body CONTAINS key
 			if (
+				currentFilterItem?.key &&
+				isEmpty(currentFilterItem?.op) &&
+				whereClauseConfig?.customKey === 'body' &&
+				whereClauseConfig?.customOp === OPERATORS.CONTAINS
+			) {
+				// eslint-disable-next-line sonarjs/no-identical-functions
+				setTags((prev) => [
+					...prev,
+					{
+						key: {
+							key: 'body',
+							dataType: DataTypes.String,
+							type: '',
+							id: 'body--string----true',
+						},
+						op: OPERATORS.CONTAINS,
+						value: currentFilterItem?.key?.key,
+					},
+				]);
+				setCurrentFilterItem(undefined);
+				setSearchValue('');
+				setCurrentState(DropdownState.ATTRIBUTE_KEY);
+			} else if (
 				currentFilterItem?.op === OPERATORS.EXISTS ||
 				currentFilterItem?.op === OPERATORS.NOT_EXISTS
 			) {
@@ -516,6 +543,8 @@ function QueryBuilderSearchV2(
 		currentFilterItem?.op,
 		currentFilterItem?.value,
 		searchValue,
+		whereClauseConfig?.customKey,
+		whereClauseConfig?.customOp,
 	]);
 
 	// this useEffect takes care of tokenisation based on the search state
@@ -1056,6 +1085,7 @@ QueryBuilderSearchV2.defaultProps = {
 	placeholder: PLACEHOLDER,
 	className: '',
 	suffixIcon: null,
+	whereClauseConfig: {},
 	hasPopupContainer: true,
 	rootClassName: '',
 	hardcodedAttributeKeys: undefined,

frontend/src/container/QueryBuilder/type.ts

@@ -26,7 +26,7 @@ export type QueryProps = {
 	isAvailableToDisable: boolean;
 	query: IBuilderQuery;
 	queryVariant?: 'static' | 'dropdown';
-	isRawQuery?: boolean;
+	isListViewPanel?: boolean;
 	showFunctions?: boolean;
 	version: string;
 	showSpanScopeSelector?: boolean;
@@ -35,4 +35,4 @@ export type QueryProps = {
 	hasTraceOperator?: boolean;
 	signalSource?: string;
 	isMultiQueryAllowed?: boolean;
-} & Pick<QueryBuilderProps, 'fieldsConfig' | 'allowedDataSources'>;
+} & Pick<QueryBuilderProps, 'filterConfigs' | 'queryComponents'>;

frontend/src/container/TracesExplorer/QuerySection/index.tsx

@@ -1,23 +1,55 @@
-import { memo, useMemo } from 'react';
+import { memo, useCallback, useMemo } from 'react';
 import { QueryBuilderV2 } from 'components/QueryBuilderV2/QueryBuilderV2';
 import { PANEL_TYPES } from 'constants/queryBuilder';
+import ExplorerOrderBy from 'container/ExplorerOrderBy';
+import { OrderByFilterProps } from 'container/QueryBuilder/filters/OrderByFilter/OrderByFilter.interfaces';
+import { QueryBuilderProps } from 'container/QueryBuilder/QueryBuilder.interfaces';
 import { useGetPanelTypesQueryParam } from 'hooks/queryBuilder/useGetPanelTypesQueryParam';
 import { DataSource } from 'types/common/queryBuilder';
 
 function QuerySection(): JSX.Element {
 	const panelTypes = useGetPanelTypesQueryParam(PANEL_TYPES.LIST);
 
-	const isRawQuery = useMemo(
+	const filterConfigs: QueryBuilderProps['filterConfigs'] = useMemo(() => {
+		const isList = panelTypes === PANEL_TYPES.LIST;
+		const config: QueryBuilderProps['filterConfigs'] = {
+			stepInterval: { isHidden: false, isDisabled: false },
+			limit: { isHidden: isList, isDisabled: true },
+			having: { isHidden: isList, isDisabled: true },
+		};
+
+		return config;
+	}, [panelTypes]);
+
+	const renderOrderBy = useCallback(
+		({ query, onChange }: OrderByFilterProps) => (
+			<ExplorerOrderBy query={query} onChange={onChange} />
+		),
+		[],
+	);
+
+	const queryComponents = useMemo((): QueryBuilderProps['queryComponents'] => {
+		const shouldRenderCustomOrderBy =
+			panelTypes === PANEL_TYPES.LIST || panelTypes === PANEL_TYPES.TRACE;
+
+		return {
+			...(shouldRenderCustomOrderBy ? { renderOrderBy } : {}),
+		};
+	}, [panelTypes, renderOrderBy]);
+
+	const isListViewPanel = useMemo(
 		() => panelTypes === PANEL_TYPES.LIST || panelTypes === PANEL_TYPES.TRACE,
 		[panelTypes],
 	);
 
 	return (
 		<QueryBuilderV2
-			isRawQuery={isRawQuery}
+			isListViewPanel={isListViewPanel}
 			showTraceOperator
 			config={{ initialDataSource: DataSource.TRACES, queryVariant: 'static' }}
+			queryComponents={queryComponents}
 			panelType={panelTypes}
+			filterConfigs={filterConfigs}
 			showOnlyWhereClause={
 				panelTypes === PANEL_TYPES.LIST || panelTypes === PANEL_TYPES.TRACE
 			}

frontend/src/container/WidgetCard/Card/FullView/index.tsx

@@ -316,7 +316,7 @@ function FullView({
 								<QueryBuilderV2
 									panelType={selectedPanelType}
 									version="v3"
-									isRawQuery={selectedPanelType === PANEL_TYPES.LIST}
+									isListViewPanel={selectedPanelType === PANEL_TYPES.LIST}
 									signalSourceChangeEnabled
 									// filterConfigs={filterConfigs}
 									// queryComponents={queryComponents}

frontend/src/hooks/queryBuilder/useQueryBuilderOperations.ts

@@ -14,6 +14,8 @@ import {
 	initialQueryBuilderFormValuesMap,
 	listViewInitialLogQuery,
 	listViewInitialTraceQuery,
+	mapOfFormulaToFilters,
+	mapOfQueryFilters,
 	PANEL_TYPES,
 } from 'constants/queryBuilder';
 import {
@@ -57,8 +59,9 @@ import { getFormatedLegend } from 'utils/getFormatedLegend';
 export const useQueryOperations: UseQueryOperations = ({
 	query,
 	index,
+	filterConfigs,
 	formula,
-	isRawQuery = false,
+	isListViewPanel = false,
 	entityVersion,
 	isForTraceOperator = false,
 	savePreviousQuery = false,
@@ -102,7 +105,46 @@ export const useQueryOperations: UseQueryOperations = ({
 		}
 	}, [query]);
 
-	const { dataSource } = query;
+	const { dataSource, aggregateOperator } = query;
+
+	const getNewListOfAdditionalFilters = useCallback(
+		(dataSource: DataSource, isQuery: boolean): string[] => {
+			const additionalFiltersKeys: (keyof Pick<
+				IBuilderQuery,
+				'orderBy' | 'limit' | 'having' | 'stepInterval'
+			>)[] = ['having', 'limit', 'orderBy', 'stepInterval'];
+
+			const mapsOfFilters = isQuery ? mapOfQueryFilters : mapOfFormulaToFilters;
+
+			const result: string[] = mapsOfFilters[dataSource]?.reduce<string[]>(
+				(acc, item) => {
+					if (
+						filterConfigs &&
+						filterConfigs[item.field as (typeof additionalFiltersKeys)[number]]
+							?.isHidden
+					) {
+						return acc;
+					}
+
+					acc.push(item.text);
+
+					return acc;
+				},
+				[],
+			);
+
+			return result;
+		},
+
+		[filterConfigs],
+	);
+
+	const [listOfAdditionalFilters, setListOfAdditionalFilters] = useState<
+		string[]
+	>(getNewListOfAdditionalFilters(dataSource, true));
+
+	const [listOfAdditionalFormulaFilters, setListOfAdditionalFormulaFilters] =
+		useState<string[]>(getNewListOfAdditionalFilters(dataSource, false));
 
 	const handleChangeOperator = useCallback(
 		(value: string): void => {
@@ -418,7 +460,7 @@ export const useQueryOperations: UseQueryOperations = ({
 				removeKeyFromPreviousQuery(newKey);
 			}
 
-			if (isRawQuery) {
+			if (isListViewPanel) {
 				let listPanelQuery: Query | null = null;
 
 				if (nextSource === DataSource.LOGS) {
@@ -464,7 +506,7 @@ export const useQueryOperations: UseQueryOperations = ({
 			handleSetQueryData(index, newQueryData);
 		},
 		[
-			isRawQuery,
+			isListViewPanel,
 			panelType,
 			query,
 			handleSetQueryData,
@@ -583,18 +625,32 @@ export const useQueryOperations: UseQueryOperations = ({
 		handleMetricAggregateAtributeTypes,
 	]);
 
+	useEffect(() => {
+		const additionalFilters = getNewListOfAdditionalFilters(dataSource, true);
+
+		setListOfAdditionalFilters(additionalFilters);
+	}, [dataSource, aggregateOperator, getNewListOfAdditionalFilters]);
+
+	useEffect(() => {
+		const additionalFilters = getNewListOfAdditionalFilters(dataSource, false);
+
+		setListOfAdditionalFormulaFilters(additionalFilters);
+	}, [dataSource, aggregateOperator, getNewListOfAdditionalFilters]);
+
 	return {
 		isTracePanelType,
 		isMetricsDataSource,
 		isLogsDataSource,
 		operators,
 		spaceAggregationOptions,
+		listOfAdditionalFilters,
 		handleChangeOperator,
 		handleSpaceAggregationChange,
 		handleChangeAggregatorAttribute,
 		handleChangeDataSource,
 		handleDeleteQuery,
 		handleChangeQueryData,
+		listOfAdditionalFormulaFilters,
 		handleChangeFormulaData,
 		handleQueryFunctionsUpdates,
 	};

frontend/src/pages/AllErrors/AllErrors.styles.scss

@@ -1,4 +1,11 @@
 .all-errors-page {
+	display: flex;
+	height: 100%;
+	.all-errors-quick-filter-section {
+		width: 0%;
+		flex-shrink: 0;
+	}
+
 	.all-errors-right-section {
 		.right-toolbar-actions-container {
 			display: flex;
@@ -11,4 +18,14 @@
 	.ant-tabs {
 		margin: 0 8px;
 	}
+
+	&.filter-visible {
+		.all-errors-quick-filter-section {
+			width: 260px;
+		}
+
+		.all-errors-right-section {
+			width: calc(100% - 260px);
+		}
+	}
 }

frontend/src/pages/AllErrors/index.tsx

@@ -5,11 +5,13 @@ import { Filter } from '@signozhq/icons';
 import { Button, Tooltip } from 'antd';
 import getLocalStorageKey from 'api/browser/localstorage/get';
 import setLocalStorageApi from 'api/browser/localstorage/set';
+import cx from 'classnames';
 import HeaderRightSection from 'components/HeaderRightSection/HeaderRightSection';
-import QuickFiltersLayout from 'components/QuickFilters/QuickFiltersLayout/QuickFiltersLayout';
+import QuickFilters from 'components/QuickFilters/QuickFilters';
 import { useSignalFieldApis } from 'components/QuickFilters/hooks/useSignalFieldApis';
 import { QuickFiltersSource, SignalType } from 'components/QuickFilters/types';
 import RouteTab from 'components/RouteTab';
+import TypicalOverlayScrollbar from 'components/TypicalOverlayScrollbar/TypicalOverlayScrollbar';
 import { LOCALSTORAGE } from 'constants/localStorage';
 import RightToolbarActions from 'container/QueryBuilder/components/ToolbarActions/RightToolbarActions';
 import ResourceAttributesFilterV2 from 'container/ResourceAttributeFilterV2/ResourceAttributesFilterV2';
@@ -57,52 +59,63 @@ function AllErrors(): JSX.Element {
 	const quickFilterFieldApis = useSignalFieldApis();
 
 	return (
-		<QuickFiltersLayout
-			className="all-errors-page"
-			contentClassName="all-errors-right-section"
-			showFilters={showFilters}
-			quickFilterProps={{
-				className: 'qf-exceptions',
-				source: QuickFiltersSource.EXCEPTIONS,
-				signal: SignalType.EXCEPTIONS,
-				handleFilterVisibilityChange,
-				useFieldApis: quickFilterFieldApis,
-			}}
-		>
-			<Toolbar
-				showAutoRefresh={false}
-				leftActions={
-					!showFilters ? (
-						<Tooltip title="Show Filters">
-							<Button onClick={handleFilterVisibilityChange} className="filter-btn">
-								<Filter size="md" />
-							</Button>
-						</Tooltip>
-					) : undefined
-				}
-				rightActions={
-					<div className="right-toolbar-actions-container">
-						<RightToolbarActions
-							onStageRunQuery={handleRunQuery}
-							isLoadingQueries={isLoadingQueries}
-							handleCancelQuery={handleCancelQuery}
+		<div className={cx('all-errors-page', showFilters ? 'filter-visible' : '')}>
+			{showFilters && (
+				<section className={cx('all-errors-quick-filter-section')}>
+					<QuickFilters
+						className="qf-exceptions"
+						source={QuickFiltersSource.EXCEPTIONS}
+						signal={SignalType.EXCEPTIONS}
+						handleFilterVisibilityChange={handleFilterVisibilityChange}
+						useFieldApis={quickFilterFieldApis}
+					/>
+				</section>
+			)}
+			<section
+				className={cx(
+					'all-errors-right-section',
+					showFilters ? 'filter-visible' : '',
+				)}
+			>
+				<TypicalOverlayScrollbar>
+					<>
+						<Toolbar
+							showAutoRefresh={false}
+							leftActions={
+								!showFilters ? (
+									<Tooltip title="Show Filters">
+										<Button onClick={handleFilterVisibilityChange} className="filter-btn">
+											<Filter size="md" />
+										</Button>
+									</Tooltip>
+								) : undefined
+							}
+							rightActions={
+								<div className="right-toolbar-actions-container">
+									<RightToolbarActions
+										onStageRunQuery={handleRunQuery}
+										isLoadingQueries={isLoadingQueries}
+										handleCancelQuery={handleCancelQuery}
+									/>
+									<HeaderRightSection
+										enableAnnouncements={false}
+										enableShare
+										enableFeedback
+									/>
+								</div>
+							}
 						/>
-						<HeaderRightSection
-							enableAnnouncements={false}
-							enableShare
-							enableFeedback
+						<ResourceAttributesFilterV2 />
+						<RouteTab
+							routes={routes}
+							activeKey={pathname}
+							history={history}
+							showRightSection={false}
 						/>
-					</div>
-				}
-			/>
-			<ResourceAttributesFilterV2 />
-			<RouteTab
-				routes={routes}
-				activeKey={pathname}
-				history={history}
-				showRightSection={false}
-			/>
-		</QuickFiltersLayout>
+					</>
+				</TypicalOverlayScrollbar>
+			</section>
+		</div>
 	);
 }
 

frontend/src/pages/ApiMonitoring/ApiMonitoringPage.styles.scss

@@ -1,4 +1,11 @@
 .api-monitoring-page {
+	flex: 1;
+	display: flex;
+
+	.ant-tabs {
+		flex: 1;
+	}
+
 	.ant-tabs-nav {
 		padding: 0 16px;
 		margin-bottom: 0px;
@@ -8,6 +15,22 @@
 		}
 	}
 
+	.ant-tabs-content-holder {
+		display: flex;
+
+		.ant-tabs-content {
+			flex: 1;
+			display: flex;
+			flex-direction: column;
+
+			.ant-tabs-tabpane {
+				flex: 1;
+				display: flex;
+				flex-direction: column;
+			}
+		}
+	}
+
 	.tab-item {
 		display: flex;
 		justify-content: center;

frontend/src/pages/ApiMonitoring/ApiMonitoringPage.tsx

@@ -13,12 +13,9 @@ function ApiMonitoringPage(): JSX.Element {
 	const routes: TabRoutes[] = [Explorer];
 
 	return (
-		<RouteTab
-			className="api-monitoring-page"
-			routes={routes}
-			activeKey={pathname}
-			history={history}
-		/>
+		<div className="api-monitoring-page">
+			<RouteTab routes={routes} activeKey={pathname} history={history} />
+		</div>
 	);
 }
 

frontend/src/pages/DashboardPage/DashboardContainer/PanelEditor/PanelEditorQueryBuilder/PanelEditorQueryBuilder.tsx

@@ -9,17 +9,19 @@ import { Atom, Terminal } from '@signozhq/icons';
 import { Tabs } from 'antd';
 import cx from 'classnames';
 import { Typography } from '@signozhq/ui/typography';
+import type { TelemetrytypesSignalDTO } from 'api/generated/services/sigNoz.schemas';
 import PromQLIcon from 'assets/Dashboard/PromQl';
 import { QueryBuilderV2 } from 'components/QueryBuilderV2/QueryBuilderV2';
 import TextToolTip from 'components/TextToolTip';
 import ClickHouseQueryContainer from 'container/QueryBuilder/rawQueryEditors/ClickHouse';
 import PromQLQueryContainer from 'container/QueryBuilder/rawQueryEditors/PromQL';
 import RunQueryBtn from 'container/QueryBuilder/components/RunQueryBtn/RunQueryBtn';
+import { QueryBuilderProps } from 'container/QueryBuilder/QueryBuilder.interfaces';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { EQueryType } from 'types/common/dashboard';
 
-import { isRawRequest } from '../../Panels/types/panelCapabilities';
+import { mergeQueryBuilderFieldRule } from '../../Panels/types/panelCapabilities';
 import type { RenderableQueryPanelDefinition } from '../../Panels/types/panelDefinition';
 import { toPanelType } from '../../Panels/types/panelKind';
 
@@ -28,6 +30,8 @@ import styles from './PanelEditorQueryBuilder.module.scss';
 interface PanelEditorQueryBuilderProps {
 	/** The edited kind's definition — drives supported query types + field visibility. */
 	panelDefinition: RenderableQueryPanelDefinition;
+	/** The panel's current signal; selects per-signal query-builder field rules. */
+	signal: TelemetrytypesSignalDTO;
 	/** Preview fetch in flight — drives the Stage & Run button's loading/cancel state. */
 	isLoadingQueries: boolean;
 	/** Run the current query (Stage & Run button / ⌘↵). Always re-runs. */
@@ -47,6 +51,7 @@ interface PanelEditorQueryBuilderProps {
  */
 function PanelEditorQueryBuilder({
 	panelDefinition,
+	signal,
 	isLoadingQueries,
 	onStageRunQuery,
 	onCancelQuery,
@@ -58,7 +63,7 @@ function PanelEditorQueryBuilder({
 	const panelType = toPanelType(panelDefinition.kind);
 	// Raw rows: the builder drops its aggregation controls, and with them the trace
 	// operator that combines aggregated trace queries (V1 parity).
-	const isRawQuery = isRawRequest(panelDefinition.queryCapabilities);
+	const isListViewPanel = panelDefinition.kind === 'signoz/ListPanel';
 	const { currentQuery, redirectWithQueryBuilderData } = useQueryBuilder();
 	const isDarkMode = useIsDarkMode();
 
@@ -86,6 +91,13 @@ function PanelEditorQueryBuilder({
 		[onStageRunQuery],
 	);
 
+	// Per-kind query-builder field rules from the guard (e.g. List hides step interval
+	// and having), passed to QueryBuilderV2 as its `filterConfigs`.
+	const filterConfigs: QueryBuilderProps['filterConfigs'] = useMemo(
+		() => mergeQueryBuilderFieldRule(panelDefinition.queryBuilderFields, signal),
+		[panelDefinition.queryBuilderFields, signal],
+	);
+
 	const items = useMemo(() => {
 		const { supportedQueryTypes } = panelDefinition;
 
@@ -97,10 +109,11 @@ function PanelEditorQueryBuilder({
 					<div className="query-builder-v2-container">
 						<QueryBuilderV2
 							panelType={panelType}
-							fieldsConfig={panelDefinition.queryBuilderFields}
-							showTraceOperator={!isRawQuery}
+							filterConfigs={filterConfigs}
+							showTraceOperator={!isListViewPanel}
 							version="v3"
-							isRawQuery={isRawQuery}
+							isListViewPanel={isListViewPanel}
+							queryComponents={{}}
 							signalSourceChangeEnabled
 							savePreviousQuery
 						/>
@@ -133,7 +146,7 @@ function PanelEditorQueryBuilder({
 			),
 			children: queryTypeComponents[queryType].component,
 		}));
-	}, [panelDefinition, panelType, isDarkMode, isRawQuery]);
+	}, [panelDefinition, panelType, filterConfigs, isDarkMode, isListViewPanel]);
 
 	return (
 		<div

frontend/src/pages/DashboardPage/DashboardContainer/PanelEditor/PanelEditorQueryBuilder/QueryBuilderEditorPane.tsx

@@ -7,6 +7,7 @@ import PanelEditorQueryBuilder from './PanelEditorQueryBuilder';
  */
 function QueryBuilderEditorPane({
 	panelDefinition,
+	signal,
 	isLoadingQueries,
 	onStageRunQuery,
 	onCancelQuery,
@@ -15,6 +16,7 @@ function QueryBuilderEditorPane({
 	return (
 		<PanelEditorQueryBuilder
 			panelDefinition={panelDefinition}
+			signal={signal}
 			isLoadingQueries={isLoadingQueries}
 			onStageRunQuery={onStageRunQuery}
 			onCancelQuery={onCancelQuery}

frontend/src/pages/DashboardPage/DashboardContainer/PanelEditor/PanelEditorQueryBuilder/__tests__/PanelEditorQueryBuilder.test.tsx

@@ -1,4 +1,6 @@
 import { render, screen } from '@testing-library/react';
+import { TelemetrytypesSignalDTO } from 'api/generated/services/sigNoz.schemas';
+import { OPERATORS } from 'constants/queryBuilder';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { EQueryType } from 'types/common/dashboard';
 
@@ -43,10 +45,14 @@ jest.mock('assets/Dashboard/PromQl', () => ({
 
 const mockUseQueryBuilder = useQueryBuilder as unknown as jest.Mock;
 
-function renderBuilder(panelKind: string): void {
+function renderBuilder(
+	panelKind: string,
+	signal: TelemetrytypesSignalDTO = TelemetrytypesSignalDTO.logs,
+): void {
 	render(
 		<PanelEditorQueryBuilder
 			panelDefinition={requireQueryPanelDefinition(panelKind as PanelKind)}
+			signal={signal}
 			isLoadingQueries={false}
 			onStageRunQuery={jest.fn()}
 			onCancelQuery={jest.fn()}
@@ -56,9 +62,9 @@ function renderBuilder(panelKind: string): void {
 
 function lastQueryBuilderProps(): {
 	panelType: string;
-	isRawQuery: boolean;
+	isListViewPanel: boolean;
 	showTraceOperator: boolean;
-	fieldsConfig: unknown;
+	filterConfigs: unknown;
 } {
 	const calls = mockQueryBuilderV2.mock.calls;
 	return calls[calls.length - 1][0];
@@ -74,7 +80,7 @@ describe('PanelEditorQueryBuilder query-type tabs (driven by the capabilities gu
 	});
 
 	it('shows only the Query Builder tab for the List kind', () => {
-		renderBuilder('signoz/ListPanel');
+		renderBuilder('signoz/ListPanel', TelemetrytypesSignalDTO.logs);
 
 		expect(screen.getByText('Query Builder')).toBeInTheDocument();
 		expect(screen.queryByText('ClickHouse Query')).not.toBeInTheDocument();
@@ -108,24 +114,40 @@ describe('PanelEditorQueryBuilder field visibility (driven by the capabilities g
 	});
 
 	it('passes empty field config + non-list flag for a non-list kind', () => {
-		renderBuilder('signoz/TimeSeriesPanel');
+		renderBuilder('signoz/TimeSeriesPanel', TelemetrytypesSignalDTO.metrics);
 
 		const props = lastQueryBuilderProps();
 		expect(props.panelType).toBe('graph');
-		expect(props.isRawQuery).toBe(false);
+		expect(props.isListViewPanel).toBe(false);
 		// The trace operator combines aggregated trace queries, so it rides along with
 		// the aggregation controls.
 		expect(props.showTraceOperator).toBe(true);
-		expect(props.fieldsConfig).toStrictEqual({});
+		expect(props.filterConfigs).toStrictEqual({});
 	});
 
-	it('marks List raw and leaves the field surface to the raw baseline', () => {
-		renderBuilder('signoz/ListPanel');
+	it('hides step interval / having and sets body-contains for List + logs', () => {
+		renderBuilder('signoz/ListPanel', TelemetrytypesSignalDTO.logs);
 
 		const props = lastQueryBuilderProps();
 		expect(props.panelType).toBe('list');
-		expect(props.isRawQuery).toBe(true);
+		expect(props.isListViewPanel).toBe(true);
 		expect(props.showTraceOperator).toBe(false);
-		expect(props.fieldsConfig).toStrictEqual({});
+		expect(props.filterConfigs).toStrictEqual({
+			stepInterval: { isHidden: true, isDisabled: true },
+			having: { isHidden: true, isDisabled: true },
+			filters: { customKey: 'body', customOp: OPERATORS.CONTAINS },
+		});
+	});
+
+	it('additionally hides limit for List + traces', () => {
+		renderBuilder('signoz/ListPanel', TelemetrytypesSignalDTO.traces);
+
+		const props = lastQueryBuilderProps();
+		expect(props.filterConfigs).toStrictEqual({
+			stepInterval: { isHidden: true, isDisabled: true },
+			having: { isHidden: true, isDisabled: true },
+			limit: { isHidden: true, isDisabled: true },
+			filters: { customKey: 'body', customOp: OPERATORS.CONTAINS },
+		});
 	});
 });

frontend/src/pages/DashboardPage/DashboardContainer/PanelEditor/__tests__/panelEditorUrlQuery.promql.test.tsx

@@ -86,6 +86,7 @@ function EditorRoute(): JSX.Element {
 	return (
 		<PanelEditorQueryBuilder
 			panelDefinition={requireQueryPanelDefinition('signoz/TimeSeriesPanel')}
+			signal={TelemetrytypesSignalDTO.metrics}
 			isLoadingQueries={false}
 			onStageRunQuery={noop}
 			onCancelQuery={noop}

frontend/src/pages/DashboardPage/DashboardContainer/Panels/__tests__/capabilities.test.ts

@@ -2,6 +2,7 @@ import {
 	Querybuildertypesv5RequestTypeDTO,
 	TelemetrytypesSignalDTO,
 } from 'api/generated/services/sigNoz.schemas';
+import { OPERATORS } from 'constants/queryBuilder';
 import { EQueryType } from 'types/common/dashboard';
 
 import { UNSUPPORTED_PANEL } from '../kinds/UnsupportedPanel/definition';
@@ -9,6 +10,7 @@ import { getPanelDefinition, isPanelKindSupported } from '../registry';
 import type { PanelQueryCapabilities } from '../types/panelCapabilities';
 import { NO_PANEL_ACTIONS } from '../types/panelDefinition';
 import {
+	getHiddenQueryBuilderFields,
 	getQueryPanelDefinition,
 	requireQueryPanelDefinition,
 	getSupportedQueryTypes,
@@ -142,6 +144,7 @@ describe('panel capabilities guard', () => {
 			expect(
 				isPanelCombinationValid({ kind: unknownKind, queryType: QUERY_BUILDER }),
 			).toBe(false);
+			expect(getHiddenQueryBuilderFields(unknownKind, logs)).toStrictEqual({});
 			expect(getPanelDefinition(unknownKind).sections).toStrictEqual([]);
 		});
 
@@ -264,4 +267,37 @@ describe('panel capabilities guard', () => {
 			expect(resolveQueryType('signoz/TablePanel', PROM)).toBe(QUERY_BUILDER);
 		});
 	});
+
+	describe('getHiddenQueryBuilderFields', () => {
+		it('returns {} for kinds that declare no field rules', () => {
+			expect(
+				getHiddenQueryBuilderFields('signoz/TimeSeriesPanel', logs),
+			).toStrictEqual({});
+			expect(getHiddenQueryBuilderFields('signoz/TablePanel', logs)).toStrictEqual(
+				{},
+			);
+		});
+
+		// Mirrors QueryBuilderV2's internal listViewLogFilterConfigs — the guard is the
+		// single source of truth for these values.
+		it('hides step interval / having and sets body-contains for List + logs', () => {
+			expect(getHiddenQueryBuilderFields('signoz/ListPanel', logs)).toStrictEqual({
+				stepInterval: { isHidden: true, isDisabled: true },
+				having: { isHidden: true, isDisabled: true },
+				filters: { customKey: 'body', customOp: OPERATORS.CONTAINS },
+			});
+		});
+
+		// Mirrors listViewTracesFilterConfigs — traces additionally hide `limit`.
+		it('additionally hides limit for List + traces', () => {
+			expect(
+				getHiddenQueryBuilderFields('signoz/ListPanel', traces),
+			).toStrictEqual({
+				stepInterval: { isHidden: true, isDisabled: true },
+				having: { isHidden: true, isDisabled: true },
+				limit: { isHidden: true, isDisabled: true },
+				filters: { customKey: 'body', customOp: OPERATORS.CONTAINS },
+			});
+		});
+	});
 });

frontend/src/pages/DashboardPage/DashboardContainer/Panels/capabilities.ts

@@ -1,15 +1,19 @@
-import { type TelemetrytypesSignalDTO } from 'api/generated/services/sigNoz.schemas';
+import type { TelemetrytypesSignalDTO } from 'api/generated/services/sigNoz.schemas';
 import { EQueryType } from 'types/common/dashboard';
 
 import { getPanelDefinition } from './registry';
+import {
+	mergeQueryBuilderFieldRule,
+	type FilterConfigsPartial,
+} from './types/panelCapabilities';
 import type { RenderableQueryPanelDefinition } from './types/panelDefinition';
 import type { PanelKind } from './types/panelKind';
 
 /**
  * The single deterministic guard for V2 dashboards. Every "what works with what"
- * question — panel kind × query type × signal — is answered here by reading each kind's
- * declared capabilities from the panel registry. Adding a new kind means declaring its
- * capabilities once in its definition;
+ * question — panel kind × query type × signal, and which query-builder fields a kind
+ * hides — is answered here by reading each kind's declared capabilities from the panel
+ * registry. Adding a new kind means declaring its capabilities once in its definition;
  * these functions then cover it automatically. Pure and side-effect free.
  */
 
@@ -118,3 +122,16 @@ export function resolveQueryType(
 	// A query-less kind has no supported types; the builder is the neutral answer.
 	return supported[0] ?? EQueryType.QUERY_BUILDER;
 }
+
+/**
+ * Query-builder field visibility for a kind + signal: the kind's `default` rule with
+ * its per-signal overrides merged over it (signal wins). `{}` when the kind hides
+ * nothing, i.e. the builder shows every field.
+ */
+export function getHiddenQueryBuilderFields(
+	kind: PanelKind,
+	signal: TelemetrytypesSignalDTO,
+): FilterConfigsPartial {
+	const rule = getQueryPanelDefinition(kind)?.queryBuilderFields ?? {};
+	return mergeQueryBuilderFieldRule(rule, signal);
+}

frontend/src/pages/DashboardPage/DashboardContainer/Panels/kinds/ListPanel/ListEditorPane.tsx

@@ -19,6 +19,7 @@ function ListEditorPane({
 	return (
 		<PanelEditorQueryBuilder
 			panelDefinition={panelDefinition}
+			signal={signal}
 			isLoadingQueries={isLoadingQueries}
 			onStageRunQuery={onStageRunQuery}
 			onCancelQuery={onCancelQuery}

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

@@ -8,6 +8,7 @@ import {
 	Querybuildertypesv5RequestTypeDTO,
 	TelemetrytypesSignalDTO,
 } from 'api/generated/services/sigNoz.schemas';
+import { OPERATORS } from 'constants/queryBuilder';
 import { EQueryType } from 'types/common/dashboard';
 
 export const definition: PanelDefinition<'signoz/ListPanel'> = {
@@ -22,9 +23,21 @@ export const definition: PanelDefinition<'signoz/ListPanel'> = {
 		TelemetrytypesSignalDTO.logs,
 		TelemetrytypesSignalDTO.traces,
 	],
+	// Raw rows have no aggregation, so step interval / having never apply, and the
+	// Where clause searches the log/span body via `body CONTAINS`. Traces additionally
+	// hide `limit` (the server paginates raw spans). Mirrors QueryBuilderV2's internal
+	// list configs — the capabilities guard is the single source for both.
 	supportedQueryTypes: [EQueryType.QUERY_BUILDER],
-	// No deviation from the baseline the raw request type below already implies.
-	queryBuilderFields: {},
+	queryBuilderFields: {
+		default: {
+			stepInterval: { isHidden: true, isDisabled: true },
+			having: { isHidden: true, isDisabled: true },
+			filters: { customKey: 'body', customOp: OPERATORS.CONTAINS },
+		},
+		[TelemetrytypesSignalDTO.traces]: {
+			limit: { isHidden: true, isDisabled: true },
+		},
+	},
 	sections,
 	// The only kind reading raw rows: they page server-side, and the sort needs a
 	// tiebreaker so a duplicated sort key can't repeat or skip a row across pages.

frontend/src/pages/DashboardPage/DashboardContainer/Panels/types/panelCapabilities.ts

@@ -1,6 +1,35 @@
-import { Querybuildertypesv5RequestTypeDTO } from 'api/generated/services/sigNoz.schemas';
+import {
+	Querybuildertypesv5RequestTypeDTO,
+	type TelemetrytypesSignalDTO,
+} from 'api/generated/services/sigNoz.schemas';
+import type { QueryBuilderProps } from 'container/QueryBuilder/QueryBuilder.interfaces';
 
-export type { QueryBuilderFieldsConfig } from 'components/QueryBuilderV2/queryBuilderFields.types';
+/**
+ * Query-builder field-visibility config a panel kind can declare, mirroring the
+ * shape `QueryBuilderV2` consumes via its `filterConfigs` prop. Derived from that
+ * prop type (the underlying `FilterConfigs` isn't exported) so the two never drift.
+ */
+export type FilterConfigsPartial = NonNullable<
+	QueryBuilderProps['filterConfigs']
+>;
+
+/**
+ * Per-signal query-builder field rules for a panel kind. `default` applies to every
+ * signal; a per-signal entry is merged over it (signal wins). The capabilities guard
+ * resolves this into a single `FilterConfigsPartial` via `getHiddenQueryBuilderFields`.
+ */
+export type QueryBuilderFieldRule = {
+	default?: FilterConfigsPartial;
+} & Partial<Record<TelemetrytypesSignalDTO, FilterConfigsPartial>>;
+
+/** The kind's `default` rule with its per-signal overrides merged over it (signal wins). */
+export function mergeQueryBuilderFieldRule(
+	rule: QueryBuilderFieldRule,
+	signal: TelemetrytypesSignalDTO,
+): FilterConfigsPartial {
+	const perSignal = signal ? rule[signal] : undefined;
+	return { ...rule.default, ...perSignal };
+}
 
 /**
  * How a kind's query-range request is shaped. Declared per-kind in
@@ -28,8 +57,3 @@ export interface PanelQueryCapabilities {
 	 */
 	serverPaginated: boolean;
 }
-
-/** Raw rows rather than an aggregated result — the single source for "is this raw?". */
-export function isRawRequest(capabilities: PanelQueryCapabilities): boolean {
-	return capabilities.requestType === Querybuildertypesv5RequestTypeDTO.raw;
-}

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

@@ -11,7 +11,7 @@ import type { AnyPanelInteractionProps } from './interactions';
 import type { PanelKind } from './panelKind';
 import type {
 	PanelQueryCapabilities,
-	QueryBuilderFieldsConfig,
+	QueryBuilderFieldRule,
 } from './panelCapabilities';
 import type {
 	BaseRendererProps,
@@ -118,7 +118,8 @@ export interface QueryPanelDefinition<
 	supportedSignals: TelemetrytypesSignalDTO[];
 	/** Query languages this kind supports (Query Builder / ClickHouse / PromQL). */
 	supportedQueryTypes: EQueryType[];
-	queryBuilderFields: QueryBuilderFieldsConfig;
+	/** Query-builder fields this kind hides/disables, optionally per signal (`{}` hides none). */
+	queryBuilderFields: QueryBuilderFieldRule;
 	/** How this kind's query-range request is shaped (request type, paging, result formatting). */
 	queryCapabilities: PanelQueryCapabilities;
 }

frontend/src/pages/InfrastructureMonitoring/InfrastructureMonitoring.styles.scss

@@ -1,4 +1,13 @@
 .infra-monitoring-module-container {
+	flex: 1;
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+
+	.ant-tabs {
+		height: 100%;
+	}
+
 	.ant-tabs-nav {
 		padding: 0 8px;
 		margin-bottom: 0px;
@@ -8,6 +17,22 @@
 		}
 	}
 
+	.ant-tabs-content-holder {
+		display: flex;
+
+		.ant-tabs-content {
+			flex: 1;
+			display: flex;
+			flex-direction: column;
+
+			.ant-tabs-tabpane {
+				flex: 1;
+				display: flex;
+				flex-direction: column;
+			}
+		}
+	}
+
 	.tab-item {
 		display: flex;
 		justify-content: center;

frontend/src/pages/InfrastructureMonitoring/InfrastructureMonitoringPage.tsx

@@ -13,11 +13,8 @@ export default function InfrastructureMonitoringPage(): JSX.Element {
 	const routes: TabRoutes[] = [Hosts, Kubernetes];
 
 	return (
-		<RouteTab
-			className="infra-monitoring-module-container"
-			routes={routes}
-			activeKey={pathname}
-			history={history}
-		/>
+		<div className="infra-monitoring-module-container">
+			<RouteTab routes={routes} activeKey={pathname} history={history} />
+		</div>
 	);
 }

frontend/src/pages/LogsModulePage/LogsModulePage.styles.scss

@@ -1,4 +1,16 @@
 .logs-module-container {
+	flex: 1;
+	min-height: 0;
+	display: flex;
+	flex-direction: column;
+
+	.ant-tabs {
+		flex: 1;
+		min-height: 0;
+		display: flex;
+		flex-direction: column;
+	}
+
 	.ant-tabs-nav {
 		padding: 0 16px;
 		margin-bottom: 0px;
@@ -8,6 +20,25 @@
 		}
 	}
 
+	.ant-tabs-content-holder {
+		display: flex;
+		min-height: 0;
+
+		.ant-tabs-content {
+			flex: 1;
+			min-height: 0;
+			display: flex;
+			flex-direction: column;
+
+			.ant-tabs-tabpane {
+				flex: 1;
+				min-height: 0;
+				display: flex;
+				flex-direction: column;
+			}
+		}
+	}
+
 	.tab-item {
 		display: flex;
 		justify-content: center;

frontend/src/pages/LogsModulePage/LogsModulePage.tsx

@@ -13,11 +13,8 @@ export default function LogsModulePage(): JSX.Element {
 	const routes: TabRoutes[] = [logsExplorer, logsPipelines, logSaveView];
 
 	return (
-		<RouteTab
-			className="logs-module-container"
-			routes={routes}
-			activeKey={pathname}
-			history={history}
-		/>
+		<div className="logs-module-container">
+			<RouteTab routes={routes} activeKey={pathname} history={history} />
+		</div>
 	);
 }

frontend/src/pages/MessagingQueues/MessagingQueuesMainPage.styles.scss

@@ -1,4 +1,13 @@
 .messaging-queues-module-container {
+	flex: 1;
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+
+	.ant-tabs {
+		height: 100%;
+	}
+
 	.ant-tabs-nav {
 		padding: 0 8px;
 		margin-bottom: 0px;
@@ -8,6 +17,22 @@
 		}
 	}
 
+	.ant-tabs-content-holder {
+		display: flex;
+
+		.ant-tabs-content {
+			flex: 1;
+			display: flex;
+			flex-direction: column;
+
+			.ant-tabs-tabpane {
+				flex: 1;
+				display: flex;
+				flex-direction: column;
+			}
+		}
+	}
+
 	.tab-item {
 		display: flex;
 		justify-content: center;

frontend/src/pages/MessagingQueues/MessagingQueuesMainPage.tsx

@@ -68,11 +68,8 @@ export default function MessagingQueuesMainPage(): JSX.Element {
 	];
 
 	return (
-		<RouteTab
-			className="messaging-queues-module-container"
-			routes={routes}
-			activeKey={pathname}
-			history={history}
-		/>
+		<div className="messaging-queues-module-container">
+			<RouteTab routes={routes} activeKey={pathname} history={history} />
+		</div>
 	);
 }

frontend/src/pages/MeterExplorer/MeterExplorerPage.tsx

@@ -14,13 +14,14 @@ function MeterExplorerPage(): JSX.Element {
 	const routes: TabRoutes[] = [Meter, Explorer, Views];
 
 	return (
-		<RouteTab
-			className="meter-explorer-page"
-			routes={routes}
-			activeKey={pathname}
-			history={history}
-			defaultActiveKey={ROUTES.METER}
-		/>
+		<div className="meter-explorer-page">
+			<RouteTab
+				routes={routes}
+				activeKey={pathname}
+				history={history}
+				defaultActiveKey={ROUTES.METER}
+			/>
+		</div>
 	);
 }
 

frontend/src/pages/MetricsExplorer/MetricsExplorerPage.styles.scss

@@ -1,4 +1,13 @@
 .metrics-explorer-page {
+	flex: 1;
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+
+	.ant-tabs {
+		height: 100%;
+	}
+
 	.ant-tabs-nav {
 		padding-left: 16px;
 		margin-bottom: 0px;
@@ -9,7 +18,20 @@
 	}
 
 	.ant-tabs-content-holder {
+		display: flex;
 		padding: 16px;
+
+		.ant-tabs-content {
+			flex: 1;
+			display: flex;
+			flex-direction: column;
+
+			.ant-tabs-tabpane {
+				flex: 1;
+				display: flex;
+				flex-direction: column;
+			}
+		}
 	}
 
 	.tab-item {

frontend/src/pages/MetricsExplorer/MetricsExplorerPage.tsx

@@ -42,12 +42,9 @@ function MetricsExplorerPage(): JSX.Element {
 	useShareBuilderUrl({ defaultValue: defaultQuery });
 
 	return (
-		<RouteTab
-			className="metrics-explorer-page"
-			routes={routes}
-			activeKey={pathname}
-			history={history}
-		/>
+		<div className="metrics-explorer-page">
+			<RouteTab routes={routes} activeKey={pathname} history={history} />
+		</div>
 	);
 }
 

frontend/src/pages/TracesExplorer/TracesExplorer.styles.scss

@@ -65,6 +65,8 @@
 }
 
 .trace-explorer-page {
+	display: flex;
+
 	// Meant to fix the query builder colors
 	--input-background: var(--l2-background);
 	--input-hover-background: var(--l2-background);
@@ -73,8 +75,32 @@
 	--input-hover-border-color: var(--internal-ant-border-color-hover);
 	--input-focus-border-color: var(--internal-ant-border-color-hover);
 
+	.filter {
+		width: 260px;
+		height: 100%;
+		min-height: 100vh;
+
+		border-right: 0px;
+		border: 1px solid var(--l1-border);
+		background-color: var(--l1-background);
+
+		> .ant-card-body {
+			padding: 0;
+			width: 258px;
+		}
+	}
+
 	.trace-explorer {
+		width: 100%;
 		background: var(--l1-background);
+
+		> .ant-card-body {
+			padding: 0;
+		}
+
 		border-color: var(--l1-border);
 	}
+	.trace-explorer.filters-expanded {
+		width: calc(100% - 260px);
+	}
 }

frontend/src/pages/TracesExplorer/index.tsx

@@ -2,10 +2,12 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useQueryClient } from 'react-query';
 import { useSearchParams } from 'react-router-dom-v5-compat';
 import * as Sentry from '@sentry/react';
+import { Card } from 'antd';
 import logEvent from 'api/common/logEvent';
+import cx from 'classnames';
 import ExplorerCard from 'components/ExplorerCard/ExplorerCard';
 import QueryCancelledPlaceholder from 'components/QueryCancelledPlaceholder';
-import QuickFiltersLayout from 'components/QuickFilters/QuickFiltersLayout/QuickFiltersLayout';
+import QuickFilters from 'components/QuickFilters/QuickFilters';
 import { useSignalFieldApis } from 'components/QuickFilters/hooks/useSignalFieldApis';
 import { QuickFiltersSource, SignalType } from 'components/QuickFilters/types';
 import WarningPopover from 'components/WarningPopover/WarningPopover';
@@ -259,20 +261,23 @@ function TracesExplorer(): JSX.Element {
 
 	return (
 		<Sentry.ErrorBoundary fallback={<ErrorBoundaryFallback />}>
-			<QuickFiltersLayout
-				className="trace-explorer-page"
-				showFilters={isOpen}
-				quickFilterProps={{
-					className: 'qf-traces-explorer',
-					source: QuickFiltersSource.TRACES_EXPLORER,
-					signal: SignalType.TRACES,
-					handleFilterVisibilityChange: (): void => {
-						setOpen(!isOpen);
-					},
-					useFieldApis: quickFilterFieldApis,
-				}}
-			>
-				<div className="trace-explorer">
+			<div className="trace-explorer-page">
+				<Card className="filter" hidden={!isOpen}>
+					<QuickFilters
+						className="qf-traces-explorer"
+						source={QuickFiltersSource.TRACES_EXPLORER}
+						signal={SignalType.TRACES}
+						handleFilterVisibilityChange={(): void => {
+							setOpen(!isOpen);
+						}}
+						useFieldApis={quickFilterFieldApis}
+					/>
+				</Card>
+				<div
+					className={cx('trace-explorer', {
+						'filters-expanded': isOpen,
+					})}
+				>
 					<div className="trace-explorer-header">
 						<Toolbar
 							showAutoRefresh
@@ -364,7 +369,7 @@ function TracesExplorer(): JSX.Element {
 						handleChangeSelectedView={handleChangeSelectedView}
 					/>
 				</div>
-			</QuickFiltersLayout>
+			</div>
 		</Sentry.ErrorBoundary>
 	);
 }