chore(frontend): add no-antd-barrel lint rule

conf/example.yaml

@@ -341,7 +341,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

@@ -3552,79 +3552,6 @@ components:
         hide:
           type: boolean
       type: object
-    DashboardtypesHeatmapAxes:
-      properties:
-        yScale:
-          $ref: '#/components/schemas/DashboardtypesHeatmapYScale'
-      type: object
-    DashboardtypesHeatmapChartAppearance:
-      properties:
-        colors:
-          $ref: '#/components/schemas/DashboardtypesHeatmapColors'
-      type: object
-    DashboardtypesHeatmapColorMode:
-      enum:
-      - palette
-      - opacity
-      type: string
-    DashboardtypesHeatmapColorScale:
-      enum:
-      - log
-      - sqrt
-      - linear
-      type: string
-    DashboardtypesHeatmapColors:
-      properties:
-        fill:
-          type: string
-        maxCount:
-          nullable: true
-          type: number
-        minCount:
-          nullable: true
-          type: number
-        mode:
-          $ref: '#/components/schemas/DashboardtypesHeatmapColorMode'
-        palette:
-          $ref: '#/components/schemas/DashboardtypesHeatmapPalette'
-        scale:
-          $ref: '#/components/schemas/DashboardtypesHeatmapColorScale'
-        steps:
-          type: integer
-      type: object
-    DashboardtypesHeatmapPalette:
-      enum:
-      - ice
-      - moss
-      - rust
-      - graphite
-      - ember
-      - lagoon
-      - orchid
-      - verdant
-      - lava
-      - beacon
-      type: string
-    DashboardtypesHeatmapPanelSpec:
-      properties:
-        axes:
-          $ref: '#/components/schemas/DashboardtypesHeatmapAxes'
-        chartAppearance:
-          $ref: '#/components/schemas/DashboardtypesHeatmapChartAppearance'
-        formatting:
-          $ref: '#/components/schemas/DashboardtypesPanelFormatting'
-        legend:
-          $ref: '#/components/schemas/DashboardtypesLegend'
-        visualization:
-          $ref: '#/components/schemas/DashboardtypesBasicVisualization'
-      type: object
-    DashboardtypesHeatmapYScale:
-      enum:
-      - auto
-      - linear
-      - log
-      - symlog
-      type: string
     DashboardtypesHistogramBuckets:
       properties:
         bucketCount:
@@ -3977,7 +3904,6 @@ components:
       discriminator:
         mapping:
           signoz/BarChartPanel: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesBarChartPanelSpec'
-          signoz/HeatmapPanel: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesHeatmapPanelSpec'
           signoz/HistogramPanel: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesHistogramPanelSpec'
           signoz/ListPanel: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesListPanelSpec'
           signoz/NumberPanel: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesNumberPanelSpec'
@@ -3995,7 +3921,6 @@ components:
       - $ref: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesHistogramPanelSpec'
       - $ref: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesListPanelSpec'
       - $ref: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTextPanelSpec'
-      - $ref: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesHeatmapPanelSpec'
       type: object
     DashboardtypesPanelPluginKind:
       enum:
@@ -4007,7 +3932,6 @@ components:
       - signoz/HistogramPanel
       - signoz/ListPanel
       - signoz/TextPanel
-      - signoz/HeatmapPanel
       type: string
     DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesBarChartPanelSpec:
       properties:
@@ -4021,18 +3945,6 @@ components:
       - kind
       - spec
       type: object
-    DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesHeatmapPanelSpec:
-      properties:
-        kind:
-          enum:
-          - signoz/HeatmapPanel
-          type: string
-        spec:
-          $ref: '#/components/schemas/DashboardtypesHeatmapPanelSpec'
-      required:
-      - kind
-      - spec
-      type: object
     DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesHistogramPanelSpec:
       properties:
         kind:

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()
 		})
 	}
 }

frontend/.oxlintrc.json

@@ -291,6 +291,11 @@
     // Prevents the usage of specific antd components in favor of our lib
     "signoz/no-signozhq-ui-barrel": "error",
     // Forces subpath imports (@signozhq/ui/<component>) instead of the eagerly-loaded barrel
+    "signoz/no-antd-barrel": "off",
+    // Off until someone runs `oxlint --fix --rules signoz/no-antd-barrel` over
+    // src: 626 files still import the barrel and the autofix has not been
+    // reviewed against the production bundle. Same rationale as
+    // no-signozhq-ui-barrel above; the barrel is ~536 modules.
     "signoz/no-css-module-bracket-access": "warn",
     // Prevents bracket access on CSS modules (styles['kebab-case']) which fails with camelCaseOnly config
     "signoz/no-dashboard-fetch-outside-root": "error",

frontend/__mocks__/uplotMock.ts

@@ -2,8 +2,6 @@
 
 // Mock for uplot library used in tests
 export interface MockUPlotInstance {
-	/** Consumers read `root.parentElement` to detect a re-mounted container. */
-	root: HTMLDivElement;
 	setData: jest.Mock;
 	setSize: jest.Mock;
 	destroy: jest.Mock;
@@ -19,20 +17,13 @@ export interface MockUPlotPaths {
 }
 
 // Create mock instance methods
-const createMockUPlotInstance = (target?: HTMLElement): MockUPlotInstance => {
-	const root = document.createElement('div');
-	// Real uPlot mounts its root inside the target; without it a re-render reads
-	// `root.parentElement` off undefined and throws.
-	target?.appendChild(root);
-	return {
-		root,
-		setData: jest.fn(),
-		setSize: jest.fn(),
-		destroy: jest.fn(),
-		redraw: jest.fn(),
-		setSeries: jest.fn(),
-	};
-};
+const createMockUPlotInstance = (): MockUPlotInstance => ({
+	setData: jest.fn(),
+	setSize: jest.fn(),
+	destroy: jest.fn(),
+	redraw: jest.fn(),
+	setSeries: jest.fn(),
+});
 
 // Path builder: (self, seriesIdx, idx0, idx1) => paths or null
 const createMockPathBuilder = (name: string): jest.Mock =>
@@ -62,16 +53,14 @@ const mockTzDate = jest.fn(
 function MockUPlot(
 	_options: unknown,
 	_data: unknown,
-	target: HTMLElement,
+	_target: HTMLElement,
 ): MockUPlotInstance {
-	return createMockUPlotInstance(target);
+	return createMockUPlotInstance();
 }
 
 // Add static methods to the constructor
 MockUPlot.tzDate = mockTzDate;
 MockUPlot.paths = mockPaths;
-// Pinned so canvas-space maths in draw hooks is deterministic under jsdom.
-MockUPlot.pxRatio = 1;
 
 // Export the constructor as default
 export default MockUPlot;

frontend/jest.config.ts

@@ -13,6 +13,9 @@ const config: Config.InitialOptions = {
 	moduleFileExtensions: ['ts', 'tsx', 'js', 'json'],
 	modulePathIgnorePatterns: ['dist'],
 	moduleNameMapper: {
+		'^antd/es/(.*)$': 'antd/lib/$1',
+		'^lodash-es$': 'lodash',
+		'^lodash-es/(.*)$': 'lodash/$1',
 		'\\.(png|jpg|jpeg|gif|svg|webp|avif|ico|bmp|tiff)$':
 			'<rootDir>/__mocks__/fileMock.ts',
 		// The icon glob module uses `import.meta.glob` (Vite-only); jest can't parse

frontend/plugins/rules/no-antd-barrel.mjs

@@ -0,0 +1,98 @@
+/**
+ * Rule: no-antd-barrel
+ *
+ * Forbids importing from the `antd` barrel and requires the matching
+ * `antd/es/<component>` subpath instead.
+ *
+ * This rule catches:
+ *   import { Tooltip } from 'antd'
+ *   import { Button, Modal } from 'antd'
+ *   import { theme as antdTheme } from 'antd'
+ *
+ * And expects:
+ *   import Tooltip from 'antd/es/tooltip'
+ *   import Button from 'antd/es/button'
+ *   import antdTheme from 'antd/es/theme'
+ *
+ * Why: `antd/es/index.js` re-exports every component, and a re-export cannot be
+ * erased by type elision the way an unused named import can, so one `Tooltip`
+ * import loads all ~536 antd modules. Measured on the jest suite, five files on
+ * the `tests/test-utils` path were responsible for the whole antd subtree;
+ * converting just those cut per-file import cost 33%.
+ *
+ * Type-only imports are exempt: `import type { ThemeConfig } from 'antd'` is
+ * erased before the module is ever requested.
+ */
+
+const SUBPATH_OVERRIDES = {
+	theme: 'theme',
+	message: 'message',
+	notification: 'notification',
+	ConfigProvider: 'config-provider',
+	FloatButton: 'float-button',
+	AutoComplete: 'auto-complete',
+	BackTop: 'back-top',
+	ColorPicker: 'color-picker',
+	DatePicker: 'date-picker',
+	InputNumber: 'input-number',
+	TimePicker: 'time-picker',
+	TreeSelect: 'tree-select',
+	QRCode: 'qr-code',
+};
+
+function toSubpath(name) {
+	if (SUBPATH_OVERRIDES[name]) return SUBPATH_OVERRIDES[name];
+	// Components are PascalCase and live at the kebab-case path.
+	if (!/^[A-Z]/.test(name)) return null;
+	return name
+		.replace(/([a-z0-9])([A-Z])/g, '$1-$2')
+		.replace(/([A-Z]+)([A-Z][a-z])/g, '$1-$2')
+		.toLowerCase();
+}
+
+function buildReplacement(node) {
+	const quote = node.source.raw?.[0] === '"' ? '"' : "'";
+	const lines = [];
+
+	for (const spec of node.specifiers) {
+		if (spec.type !== 'ImportSpecifier') return null;
+		if (spec.imported?.type !== 'Identifier') return null;
+
+		const subpath = toSubpath(spec.imported.name);
+		if (!subpath) return null;
+
+		// An inline `type` specifier keeps its name; it is erased either way.
+		const keyword = spec.importKind === 'type' ? 'import type' : 'import';
+		lines.push(
+			`${keyword} ${spec.local.name} from ${quote}antd/es/${subpath}${quote};`,
+		);
+	}
+
+	return lines.length ? lines.join('\n') : null;
+}
+
+export default {
+	meta: {
+		fixable: 'code',
+	},
+	create(context) {
+		return {
+			ImportDeclaration(node) {
+				if (node.source.value !== 'antd') return;
+				if (node.importKind === 'type') return;
+				if (node.specifiers.length === 0) return;
+
+				const replacement = buildReplacement(node);
+				const report = {
+					node: node.source,
+					message:
+						"Do not import from the 'antd' barrel. Use the matching subpath instead (e.g. 'antd/es/tooltip', 'antd/es/button'). The barrel re-exports every component, so one named import loads all ~536 antd modules and slows every test that reaches this file.",
+				};
+				if (replacement) {
+					report.fix = (fixer) => fixer.replaceText(node, replacement);
+				}
+				context.report(report);
+			},
+		};
+	},
+};

frontend/plugins/signoz.mjs

@@ -11,6 +11,7 @@ import noUnsupportedAssetPattern from './rules/no-unsupported-asset-pattern.mjs'
 import noRawAbsolutePath from './rules/no-raw-absolute-path.mjs';
 import noAntdComponents from './rules/no-antd-components.mjs';
 import noSignozhqUiBarrel from './rules/no-signozhq-ui-barrel.mjs';
+import noAntdBarrel from './rules/no-antd-barrel.mjs';
 import noCssModuleBracketAccess from './rules/no-css-module-bracket-access.mjs';
 import noDashboardFetchOutsideRoot from './rules/no-dashboard-fetch-outside-root.mjs';
 import noConditionalTextNodesWithSiblings from './rules/no-conditional-text-nodes-with-siblings.mjs';
@@ -27,6 +28,7 @@ export default {
 		'no-raw-absolute-path': noRawAbsolutePath,
 		'no-antd-components': noAntdComponents,
 		'no-signozhq-ui-barrel': noSignozhqUiBarrel,
+		'no-antd-barrel': noAntdBarrel,
 		'no-css-module-bracket-access': noCssModuleBracketAccess,
 		'no-dashboard-fetch-outside-root': noDashboardFetchOutsideRoot,
 		'no-conditional-text-nodes-with-siblings': noConditionalTextNodesWithSiblings,

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

@@ -5072,83 +5072,6 @@ export interface DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDa
 	spec: DashboardtypesTextPanelSpecDTO;
 }
 
-export enum DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesHeatmapPanelSpecDTOKind {
-	'signoz/HeatmapPanel' = 'signoz/HeatmapPanel',
-}
-export enum DashboardtypesHeatmapYScaleDTO {
-	auto = 'auto',
-	linear = 'linear',
-	log = 'log',
-	symlog = 'symlog',
-}
-export interface DashboardtypesHeatmapAxesDTO {
-	yScale?: DashboardtypesHeatmapYScaleDTO;
-}
-
-export enum DashboardtypesHeatmapColorModeDTO {
-	palette = 'palette',
-	opacity = 'opacity',
-}
-export enum DashboardtypesHeatmapPaletteDTO {
-	ice = 'ice',
-	moss = 'moss',
-	rust = 'rust',
-	graphite = 'graphite',
-	ember = 'ember',
-	lagoon = 'lagoon',
-	orchid = 'orchid',
-	verdant = 'verdant',
-	lava = 'lava',
-	beacon = 'beacon',
-}
-export enum DashboardtypesHeatmapColorScaleDTO {
-	log = 'log',
-	sqrt = 'sqrt',
-	linear = 'linear',
-}
-export interface DashboardtypesHeatmapColorsDTO {
-	/**
-	 * @type string
-	 */
-	fill?: string;
-	/**
-	 * @type number,null
-	 */
-	maxCount?: number | null;
-	/**
-	 * @type number,null
-	 */
-	minCount?: number | null;
-	mode?: DashboardtypesHeatmapColorModeDTO;
-	palette?: DashboardtypesHeatmapPaletteDTO;
-	scale?: DashboardtypesHeatmapColorScaleDTO;
-	/**
-	 * @type integer
-	 */
-	steps?: number;
-}
-
-export interface DashboardtypesHeatmapChartAppearanceDTO {
-	colors?: DashboardtypesHeatmapColorsDTO;
-}
-
-export interface DashboardtypesHeatmapPanelSpecDTO {
-	axes?: DashboardtypesHeatmapAxesDTO;
-	chartAppearance?: DashboardtypesHeatmapChartAppearanceDTO;
-	formatting?: DashboardtypesPanelFormattingDTO;
-	legend?: DashboardtypesLegendDTO;
-	visualization?: DashboardtypesBasicVisualizationDTO;
-}
-
-export interface DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesHeatmapPanelSpecDTO {
-	/**
-	 * @enum signoz/HeatmapPanel
-	 * @type string
-	 */
-	kind: DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesHeatmapPanelSpecDTOKind;
-	spec: DashboardtypesHeatmapPanelSpecDTO;
-}
-
 export type DashboardtypesPanelPluginDTO =
 	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTimeSeriesPanelSpecDTO
 	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesBarChartPanelSpecDTO
@@ -5157,8 +5080,7 @@ export type DashboardtypesPanelPluginDTO =
 	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTablePanelSpecDTO
 	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesHistogramPanelSpecDTO
 	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesListPanelSpecDTO
-	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTextPanelSpecDTO
-	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesHeatmapPanelSpecDTO;
+	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTextPanelSpecDTO;
 
 export enum Querybuildertypesv5RequestTypeDTO {
 	scalar = 'scalar',
@@ -6083,7 +6005,6 @@ export enum DashboardtypesPanelPluginKindDTO {
 	'signoz/HistogramPanel' = 'signoz/HistogramPanel',
 	'signoz/ListPanel' = 'signoz/ListPanel',
 	'signoz/TextPanel' = 'signoz/TextPanel',
-	'signoz/HeatmapPanel' = 'signoz/HeatmapPanel',
 }
 /**
  * @nullable

frontend/src/api/v5/queryRange/prepareQueryRangePayloadV5.ts

@@ -198,10 +198,6 @@ function createBaseSpec(
 				: undefined,
 		legend: isEmpty(queryData.legend) ? undefined : queryData.legend,
 		having: normalizeHaving(queryData.having),
-		// Heatmap only. Every other request type rejects an axis, and
-		// `panelTypeDataSourceFormValuesMap` is what keeps one from being carried onto a
-		// query the panel type switched away from.
-		bucketOptions: queryData.bucketOptions,
 		functions: isEmpty(queryData.functions)
 			? undefined
 			: queryData.functions.map((func: QueryFunction): QueryFunction => {

frontend/src/components/CeleryTask/CeleryTaskGraph/CeleryTaskBar.tsx

@@ -12,7 +12,7 @@ import { useIsDarkMode } from 'hooks/useDarkMode';
 import useUrlQuery from 'hooks/useUrlQuery';
 import { isEmpty } from 'lodash-es';
 import { getStartAndEndTimesInMilliseconds } from 'pages/MessagingQueues/MessagingQueuesUtils';
-import { UpdateTimeInterval } from 'store/actions';
+import { UpdateTimeInterval } from 'store/actions/global';
 import { AppState } from 'store/reducers';
 import { Widgets } from 'types/api/widgets/widget';
 import { GlobalReducer } from 'types/reducer/globalTime';

frontend/src/components/CeleryTask/CeleryTaskGraph/CeleryTaskGraph.tsx

@@ -12,7 +12,7 @@ import { useIsDarkMode } from 'hooks/useDarkMode';
 import useUrlQuery from 'hooks/useUrlQuery';
 import { RowData } from 'lib/query/createTableColumnsFromQuery';
 import { getStartAndEndTimesInMilliseconds } from 'pages/MessagingQueues/MessagingQueuesUtils';
-import { UpdateTimeInterval } from 'store/actions';
+import { UpdateTimeInterval } from 'store/actions/global';
 import { Widgets } from 'types/api/widgets/widget';
 import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
 

frontend/src/components/CeleryTask/CeleryTaskGraph/CeleryTaskLatencyGraph.tsx

@@ -15,7 +15,7 @@ import { useIsDarkMode } from 'hooks/useDarkMode';
 import useUrlQuery from 'hooks/useUrlQuery';
 import { OnClickPluginOpts } from 'lib/uPlotLib/plugins/onClickPlugin';
 import { getStartAndEndTimesInMilliseconds } from 'pages/MessagingQueues/MessagingQueuesUtils';
-import { UpdateTimeInterval } from 'store/actions';
+import { UpdateTimeInterval } from 'store/actions/global';
 import { AppState } from 'store/reducers';
 import { DataSource } from 'types/common/queryBuilder';
 import { GlobalReducer } from 'types/reducer/globalTime';

frontend/src/components/ErrorModal/ErrorModal.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Color } from '@signozhq/design-tokens';
-import { Button, Modal } from 'antd';
+import Button from 'antd/es/button';
+import Modal from 'antd/es/modal';
 import { CircleAlert, X } from '@signozhq/icons';
 import KeyValueLabel from 'periscope/components/KeyValueLabel';
 import { useAppContext } from 'providers/App/App';

frontend/src/components/ErrorModal/components/ErrorContent.tsx

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
 import { Color } from '@signozhq/design-tokens';
-import { Button } from 'antd';
+import Button from 'antd/es/button';
 import ErrorIcon from 'assets/Error';
 import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
 import { BookOpenText, ChevronsDown } from '@signozhq/icons';

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/BucketOptions/BucketOptions.module.scss

@@ -1,144 +0,0 @@
-/**
- * Borrows the query builder's control metrics rather than the component defaults the
- * toggle group and number input ship with: 36px tall, 2px radius, and the
- * `--query-builder-v2-*` surface the selects above this row already paint on.
- */
-.bucketOptions {
-	--toggle-group-radius: var(--radius-1);
-	--toggle-group-item-size: 36px;
-	--toggle-group-item-font-size: 13px;
-	--toggle-group-item-padding-left: var(--spacing-6);
-	--toggle-group-item-padding-right: var(--spacing-6);
-
-	// Repeated from `.query-add-ons` rather than inherited: the section also renders on a
-	// formula, which has no add-ons ancestor to pick the toggle palette up from.
-	--toggle-group-secondary-bg: var(
-		--query-builder-v2-toggle-group-background-color,
-		var(--l1-background-hover)
-	);
-	--toggle-group-secondary-border: var(
-		--query-builder-v2-toggle-group-border-color,
-		var(--l2-border)
-	);
-	--toggle-group-secondary-active-bg: var(
-		--query-builder-v2-toggle-group-active-background-color,
-		var(--l1-background)
-	);
-	--toggle-group-secondary-bg-hover: var(
-		--query-builder-v2-toggle-group-background-color-hover,
-		var(--l2-background)
-	);
-
-	--input-height: 36px;
-	--input-font-size: 13px;
-	--input-border-radius: var(--radius-1);
-	--input-border-color: var(--query-builder-v2-border-color, var(--l2-border));
-	--input-background: var(
-		--query-builder-v2-background-color,
-		var(--l2-background)
-	);
-	--input-foreground: var(--query-builder-v2-color, var(--l2-foreground));
-
-	display: flex;
-	flex-direction: column;
-	gap: var(--spacing-6);
-
-	padding: var(--spacing-4);
-	box-sizing: border-box;
-	border: 1px solid var(--query-builder-v2-border-color, var(--l2-border));
-	border-radius: var(--radius-1);
-	background: var(--query-builder-v2-background-color, var(--l2-background));
-}
-
-.controls {
-	display: flex;
-	flex-wrap: wrap;
-	align-items: center;
-	gap: var(--spacing-8);
-}
-
-/** One label paired with its control, at the same 10px rhythm as the aggregate rows. */
-.field {
-	display: flex;
-	align-items: center;
-	gap: var(--spacing-5);
-}
-
-.bounds {
-	display: flex;
-	flex-wrap: wrap;
-	align-items: center;
-	gap: var(--spacing-4);
-}
-
-.label {
-	color: var(--l3-foreground);
-	font-family: 'Geist Mono';
-	font-size: 12px;
-	font-weight: var(--font-weight-medium);
-	line-height: 18px;
-	letter-spacing: 0.48px;
-	text-transform: uppercase;
-	white-space: nowrap;
-}
-
-/**
- * The toggle group exposes a font-size token but no family, so each item's label carries
- * the query builder's value type itself.
- */
-.toggleLabel {
-	font-family: 'Geist Mono';
-	font-size: 13px;
-	font-weight: var(--font-weight-normal);
-	letter-spacing: -0.07px;
-}
-
-/** Surface and metrics come from the `--input-*` tokens above; only the family has none. */
-.numberInput {
-	width: 104px;
-
-	font-family: 'Geist Mono';
-	letter-spacing: -0.07px;
-}
-
-/** Bounds read as a sequence of values, so they take the value type in a flat pill. */
-.bound {
-	padding: var(--spacing-1) var(--spacing-3);
-	border-radius: var(--radius-1);
-
-	font-family: 'Geist Mono';
-	font-size: 13px;
-	line-height: 20px;
-	letter-spacing: -0.07px;
-
-	color: var(--query-builder-v2-color, var(--l2-foreground));
-	background: var(--l3-background);
-}
-
-.overflowBound {
-	background: transparent;
-	color: var(--l3-foreground);
-}
-
-.muted {
-	font-family: 'Geist Mono';
-	font-size: 13px;
-	line-height: 20px;
-	color: var(--l3-foreground);
-}
-
-.hint {
-	margin: 0;
-	max-width: 72ch;
-
-	font-family: 'Geist Mono';
-	font-size: 12px;
-	line-height: 18px;
-	color: var(--l3-foreground);
-}
-
-.closeBtn {
-	margin-left: auto;
-	width: 36px;
-	height: 36px;
-}

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

@@ -1,268 +0,0 @@
-import { useCallback, useMemo, useState } from 'react';
-import { Button } from 'antd';
-import cx from 'classnames';
-import { InputNumber } from '@signozhq/ui/input-number';
-import { ToggleGroupSimple } from '@signozhq/ui/toggle-group';
-import { ChevronUp } from '@signozhq/icons';
-import { Querybuildertypesv5BucketOptionsDTO } from 'api/generated/services/sigNoz.schemas';
-
-import {
-	BUCKET_KIND_HINTS,
-	BUCKET_KIND_OPTIONS,
-	DEFAULT_NUM_BUCKETS,
-	LOG_BANDS_OPTIONS,
-	MAX_NUM_BUCKETS,
-} from './constants';
-import {
-	bandsPerDoublingFromScale,
-	BucketKindOption,
-	formatUpperBound,
-	hasBoundsBeyondPreview,
-	isLinearBuckets,
-	kindOptionOf,
-	linearBuckets,
-	logBuckets,
-	logScaleOf,
-	previewUpperBounds,
-	scaleFromBandsPerDoubling,
-} from './utils';
-
-import styles from './BucketOptions.module.scss';
-
-function BucketOptions({
-	bucketOptions,
-	unit,
-	onChange,
-	onClose,
-}: {
-	bucketOptions?: Querybuildertypesv5BucketOptionsDTO;
-	/** The panel's y-axis unit, so the previewed bounds read the way the axis will. */
-	unit?: string;
-	onChange: (next: Querybuildertypesv5BucketOptionsDTO | undefined) => void;
-	/** Omitted where the section isn't dismissable, as on a formula. */
-	onClose?: () => void;
-}): JSX.Element {
-	// A linear axis has no bounds to describe until it has a max value, so the picked
-	// kind is held here rather than read back off the emitted options: it has to survive
-	// the gap between choosing Linear and filling the field in.
-	const [kind, setKind] = useState<BucketKindOption>(
-		kindOptionOf(bucketOptions),
-	);
-	const linearSpec =
-		bucketOptions && isLinearBuckets(bucketOptions)
-			? bucketOptions.spec
-			: undefined;
-	const [logScale, setLogScale] = useState<number>(logScaleOf(bucketOptions));
-	const [maxValue, setMaxValue] = useState<number | null>(
-		linearSpec?.maxValue ?? null,
-	);
-	const [numBuckets, setNumBuckets] = useState<number | null>(
-		linearSpec?.numBuckets ?? null,
-	);
-
-	const emitLinear = useCallback(
-		(nextMaxValue: number | null, nextNumBuckets: number | null): void => {
-			// An incomplete linear axis is sent as no axis at all rather than as a spec the
-			// request would reject.
-			if (nextMaxValue === null || nextMaxValue <= 0) {
-				onChange(undefined);
-				return;
-			}
-
-			onChange(linearBuckets(nextMaxValue, nextNumBuckets));
-		},
-		[onChange],
-	);
-
-	const handleKindChange = useCallback(
-		(value: string): void => {
-			// Radix clears the value when the active item is clicked again; a bucket axis is
-			// always one of the three, so keep the current pick instead.
-			if (!value) {
-				return;
-			}
-
-			const nextKind = value as BucketKindOption;
-			setKind(nextKind);
-
-			if (nextKind === 'auto') {
-				onChange(undefined);
-			} else if (nextKind === 'log') {
-				onChange(logBuckets(logScale));
-			} else {
-				emitLinear(maxValue, numBuckets);
-			}
-		},
-		[emitLinear, logScale, maxValue, numBuckets, onChange],
-	);
-
-	const handleBandsChange = useCallback(
-		(value: string): void => {
-			if (!value) {
-				return;
-			}
-
-			const nextScale = scaleFromBandsPerDoubling(Number(value));
-			setLogScale(nextScale);
-			onChange(logBuckets(nextScale));
-		},
-		[onChange],
-	);
-
-	const handleMaxValueChange = useCallback(
-		(value: number | string | null): void => {
-			const next = value === null || value === '' ? null : Number(value);
-			setMaxValue(next);
-			emitLinear(next, numBuckets);
-		},
-		[emitLinear, numBuckets],
-	);
-
-	const handleNumBucketsChange = useCallback(
-		(value: number | string | null): void => {
-			const next = value === null || value === '' ? null : Number(value);
-			setNumBuckets(next);
-			emitLinear(maxValue, next);
-		},
-		[emitLinear, maxValue],
-	);
-
-	// The toggle group takes a ReactNode label, which is how each item picks up the
-	// query builder's value type — the component exposes no font-family token.
-	const kindItems = useMemo(
-		() =>
-			BUCKET_KIND_OPTIONS.map(({ value, label }) => ({
-				value,
-				label: <span className={styles.toggleLabel}>{label}</span>,
-				'aria-label': label,
-			})),
-		[],
-	);
-
-	const bandItems = useMemo(
-		() =>
-			LOG_BANDS_OPTIONS.map(({ value, label }) => ({
-				value,
-				label: <span className={styles.toggleLabel}>{label}</span>,
-				'aria-label': label,
-			})),
-		[],
-	);
-
-	// The kind toggle can be ahead of what has been emitted, so the preview describes
-	// the picked kind rather than the emitted options.
-	const previewedOptions = useMemo(():
-		| Querybuildertypesv5BucketOptionsDTO
-		| undefined => {
-		if (kind === 'log') {
-			return logBuckets(logScale);
-		}
-		if (kind === 'linear' && maxValue !== null) {
-			return linearBuckets(maxValue, numBuckets);
-		}
-		return undefined;
-	}, [kind, logScale, maxValue, numBuckets]);
-
-	const bounds =
-		kind === 'linear' && !previewedOptions
-			? undefined
-			: previewUpperBounds(previewedOptions);
-
-	return (
-		<div className={styles.bucketOptions} data-testid="bucket-options">
-			<div className={styles.controls}>
-				<div className={styles.field}>
-					<span className={styles.label}>Bucket by</span>
-					<ToggleGroupSimple
-						type="single"
-						value={kind}
-						items={kindItems}
-						onChange={handleKindChange}
-						testId="bucket-options-kind"
-					/>
-				</div>
-
-				{kind === 'log' && (
-					<div className={styles.field}>
-						<span className={styles.label}>Bands per doubling</span>
-						<ToggleGroupSimple
-							type="single"
-							value={String(bandsPerDoublingFromScale(logScale))}
-							items={bandItems}
-							onChange={handleBandsChange}
-							testId="bucket-options-bands"
-						/>
-					</div>
-				)}
-
-				{kind === 'linear' && (
-					<>
-						<div className={styles.field}>
-							<span className={styles.label}>Max value</span>
-							<InputNumber
-								className={styles.numberInput}
-								min={0}
-								value={maxValue}
-								onChange={handleMaxValueChange}
-								placeholder="Required"
-								status={maxValue !== null && maxValue <= 0 ? 'error' : undefined}
-								data-testid="bucket-options-max-value"
-							/>
-						</div>
-						<div className={styles.field}>
-							<span className={styles.label}>Buckets</span>
-							<InputNumber
-								className={styles.numberInput}
-								min={1}
-								max={MAX_NUM_BUCKETS}
-								precision={0}
-								value={numBuckets}
-								onChange={handleNumBucketsChange}
-								placeholder={String(DEFAULT_NUM_BUCKETS)}
-								data-testid="bucket-options-num-buckets"
-							/>
-						</div>
-					</>
-				)}
-
-				{onClose && (
-					<Button
-						className={cx('periscope-btn', 'ghost', styles.closeBtn)}
-						icon={<ChevronUp size={16} />}
-						onClick={onClose}
-						data-testid="bucket-options-close"
-					/>
-				)}
-			</div>
-
-			<div className={styles.bounds} data-testid="bucket-options-bounds">
-				<span className={styles.label}>Bounds</span>
-				{bounds ? (
-					<>
-						{bounds.map((bound) => (
-							<span className={styles.bound} key={bound}>
-								{formatUpperBound(bound, unit)}
-							</span>
-						))}
-						{hasBoundsBeyondPreview(previewedOptions) && (
-							<span className={styles.muted}>…</span>
-						)}
-						<span className={cx(styles.bound, styles.overflowBound)}>+Inf</span>
-					</>
-				) : (
-					<span className={styles.muted}>Set a max value to see the bounds</span>
-				)}
-			</div>
-
-			<p className={styles.hint}>{BUCKET_KIND_HINTS[kind]}</p>
-		</div>
-	);
-}
-
-BucketOptions.defaultProps = {
-	bucketOptions: undefined,
-	unit: undefined,
-	onClose: undefined,
-};
-
-export default BucketOptions;

frontend/src/components/QueryBuilderV2/QueryV2/QueryAddOns/BucketOptions/__tests__/utils.test.ts

@@ -1,89 +0,0 @@
-import { MAX_LOG_SCALE } from '../constants';
-import {
-	bandsPerDoublingFromScale,
-	formatUpperBound,
-	hasBoundsBeyondPreview,
-	kindOptionOf,
-	linearBuckets,
-	logBuckets,
-	previewUpperBounds,
-	scaleFromBandsPerDoubling,
-} from '../utils';
-
-describe('bucket option scales', () => {
-	it.each([
-		[0, 1],
-		[1, 2],
-		[2, 4],
-		[3, 8],
-		[4, 16],
-	])('scale %i is %i bands per doubling', (scale, bands) => {
-		expect(bandsPerDoublingFromScale(scale)).toBe(bands);
-		expect(scaleFromBandsPerDoubling(bands)).toBe(scale);
-	});
-});
-
-describe('kindOptionOf', () => {
-	it('reads no options as auto', () => {
-		expect(kindOptionOf(undefined)).toBe('auto');
-	});
-
-	it('reads the kind off the options', () => {
-		expect(kindOptionOf(logBuckets(MAX_LOG_SCALE))).toBe('log');
-		expect(kindOptionOf(linearBuckets(10, null))).toBe('linear');
-	});
-});
-
-describe('previewUpperBounds', () => {
-	it('doubles at one band per doubling', () => {
-		expect(previewUpperBounds(logBuckets(0))).toStrictEqual([
-			1, 2, 4, 8, 16, 32, 64, 128,
-		]);
-	});
-
-	it('falls back to the finest log axis when no options are set', () => {
-		const bounds = previewUpperBounds(undefined);
-
-		expect(bounds).toHaveLength(8);
-		// 16 bands per doubling: the eighth bound is 2^(7/16), still short of the first doubling.
-		expect(bounds?.[7]).toBeCloseTo(2 ** (7 / 16));
-	});
-
-	it('spaces a linear axis evenly by bucket width', () => {
-		expect(previewUpperBounds(linearBuckets(100, 10))).toStrictEqual(
-			[10, 20, 30, 40, 50, 60, 70, 80, 90, 100].slice(0, 8),
-		);
-	});
-
-	it('stops at the last bucket when the axis has fewer than the preview shows', () => {
-		expect(previewUpperBounds(linearBuckets(9, 3))).toStrictEqual([3, 6, 9]);
-	});
-
-	it('has no bounds to preview for a linear axis without a usable max value', () => {
-		expect(previewUpperBounds(linearBuckets(0, null))).toBeUndefined();
-		expect(previewUpperBounds(linearBuckets(-1, null))).toBeUndefined();
-	});
-});
-
-describe('hasBoundsBeyondPreview', () => {
-	it('is always true for a log axis, which has no top', () => {
-		expect(hasBoundsBeyondPreview(logBuckets(0))).toBe(true);
-		expect(hasBoundsBeyondPreview(undefined)).toBe(true);
-	});
-
-	it('tracks whether a linear axis runs past the preview', () => {
-		expect(hasBoundsBeyondPreview(linearBuckets(100, 4))).toBe(false);
-		expect(hasBoundsBeyondPreview(linearBuckets(100, 20))).toBe(true);
-	});
-});
-
-describe('formatUpperBound', () => {
-	it('reads a bound in the panel unit when one is set', () => {
-		expect(formatUpperBound(1, 'ms')).toContain('ms');
-	});
-
-	it('keeps three significant digits when unitless', () => {
-		expect(formatUpperBound(128, undefined)).toBe('128');
-		expect(formatUpperBound(2 ** (1 / 16), undefined)).toBe('1.04');
-	});
-});

frontend/src/components/QueryBuilderV2/QueryV2/QueryAddOns/BucketOptions/constants.ts

@@ -1,46 +0,0 @@
-/**
- * Mirrors the limits `querybuildertypesv5` validates `bucketOptions` against. The
- * builder keeps its own copy so an out-of-range axis is refused before the request
- * rather than after it.
- */
-
-/**
- * A log axis spaces bounds at 2^scale bands per doubling. MaxLogScale is the
- * resolution ClickHouse buckets at, so it is both the finest available and what an
- * absent `bucketOptions` resolves to.
- */
-export const MAX_LOG_SCALE = 4;
-
-export const MAX_NUM_BUCKETS = 512;
-
-export const DEFAULT_NUM_BUCKETS = 60;
-
-/**
- * The bands-per-doubling the toggle offers, coarsest first. Each is 2^scale for a
- * scale in [0, MAX_LOG_SCALE]: a negative scale is a whole number of doublings per
- * band instead, which has no bands-per-doubling label.
- */
-export const LOG_BANDS_PER_DOUBLING = [1, 2, 4, 8, 16] as const;
-
-/** How many leading upper bounds the bounds strip previews before eliding. */
-export const PREVIEW_BOUND_COUNT = 8;
-
-/** The kind toggle's options. `auto` sends no options and lets the server choose. */
-export const BUCKET_KIND_OPTIONS = [
-	{ value: 'auto', label: 'Auto' },
-	{ value: 'log', label: 'Log' },
-	{ value: 'linear', label: 'Linear' },
-];
-
-export const LOG_BANDS_OPTIONS = LOG_BANDS_PER_DOUBLING.map((bands) => ({
-	value: String(bands),
-	label: String(bands),
-}));
-
-export const BUCKET_KIND_HINTS = {
-	auto:
-		'Bounds are picked for you: a log axis at 16 bands per doubling, the finest the query can return.',
-	log: 'Bounds are spaced evenly on a log axis, so every band is the same height on screen and the tail stays readable. Fewer bands per doubling means fewer, coarser bands.',
-	linear:
-		'Bounds are spaced evenly from 0 up to the max value, so a band covers the same width wherever it sits. Everything above the max value lands in a single overflow band.',
-};

frontend/src/components/QueryBuilderV2/QueryV2/QueryAddOns/BucketOptions/utils.ts

@@ -1,130 +0,0 @@
-import {
-	Querybuildertypesv5BucketOptionsDTO,
-	Querybuildertypesv5BucketOptionsLinearDTO,
-	Querybuildertypesv5BucketOptionsLinearDTOKind,
-	Querybuildertypesv5BucketOptionsLogDTO,
-	Querybuildertypesv5BucketOptionsLogDTOKind,
-} from 'api/generated/services/sigNoz.schemas';
-import { getYAxisFormattedValue } from 'components/Graph/yAxisConfig';
-
-import {
-	DEFAULT_NUM_BUCKETS,
-	MAX_LOG_SCALE,
-	PREVIEW_BOUND_COUNT,
-} from './constants';
-
-/**
- * The toggle's own vocabulary: the two kinds the request takes, plus `auto` for
- * sending no options at all and letting the server pick the axis.
- */
-export type BucketKindOption = 'auto' | 'log' | 'linear';
-
-export const isLinearBuckets = (
-	bucketOptions: Querybuildertypesv5BucketOptionsDTO,
-): bucketOptions is Querybuildertypesv5BucketOptionsLinearDTO =>
-	bucketOptions.kind === Querybuildertypesv5BucketOptionsLinearDTOKind.linear;
-
-export const linearBuckets = (
-	maxValue: number,
-	numBuckets: number | null,
-): Querybuildertypesv5BucketOptionsLinearDTO => ({
-	kind: Querybuildertypesv5BucketOptionsLinearDTOKind.linear,
-	spec: { maxValue, ...(numBuckets ? { numBuckets } : {}) },
-});
-
-export const logBuckets = (
-	scale: number,
-): Querybuildertypesv5BucketOptionsLogDTO => ({
-	kind: Querybuildertypesv5BucketOptionsLogDTOKind.log,
-	spec: { scale },
-});
-
-/**
- * The log spec's scale, defaulted the way the server defaults it. A linear axis has
- * no scale, so it reads as the default too.
- */
-export const logScaleOf = (
-	bucketOptions: Querybuildertypesv5BucketOptionsDTO | undefined,
-): number =>
-	bucketOptions && !isLinearBuckets(bucketOptions)
-		? (bucketOptions.spec.scale ?? MAX_LOG_SCALE)
-		: MAX_LOG_SCALE;
-
-export const bandsPerDoublingFromScale = (scale: number): number => 2 ** scale;
-
-export const scaleFromBandsPerDoubling = (bands: number): number =>
-	Math.round(Math.log2(bands));
-
-export const kindOptionOf = (
-	bucketOptions: Querybuildertypesv5BucketOptionsDTO | undefined,
-): BucketKindOption => {
-	if (!bucketOptions) {
-		return 'auto';
-	}
-
-	return isLinearBuckets(bucketOptions) ? 'linear' : 'log';
-};
-
-/**
- * The leading upper bounds the axis will carry. A log axis is anchored at 1 — band
- * index 0's boundary — and a linear one at the top of its first band; both continue
- * past what the strip shows, and everything above the last one lands in the overflow
- * band the UI labels separately.
- *
- * `undefined` for a linear axis with no max value yet: without a top there is nothing
- * to divide.
- */
-export function previewUpperBounds(
-	bucketOptions: Querybuildertypesv5BucketOptionsDTO | undefined,
-): number[] | undefined {
-	if (bucketOptions && isLinearBuckets(bucketOptions)) {
-		const { maxValue, numBuckets = DEFAULT_NUM_BUCKETS } = bucketOptions.spec;
-
-		if (!Number.isFinite(maxValue) || maxValue <= 0 || numBuckets <= 0) {
-			return undefined;
-		}
-
-		const width = maxValue / numBuckets;
-
-		return Array.from(
-			{ length: Math.min(numBuckets, PREVIEW_BOUND_COUNT) },
-			(_, index) => (index + 1) * width,
-		);
-	}
-
-	const bands = bandsPerDoublingFromScale(logScaleOf(bucketOptions));
-
-	return Array.from(
-		{ length: PREVIEW_BOUND_COUNT },
-		(_, index) => 2 ** (index / bands),
-	);
-}
-
-/**
- * Whether the strip elides bounds after the ones it shows. A linear axis with no more
- * buckets than the strip holds ends where the strip does.
- */
-export function hasBoundsBeyondPreview(
-	bucketOptions: Querybuildertypesv5BucketOptionsDTO | undefined,
-): boolean {
-	if (!bucketOptions || !isLinearBuckets(bucketOptions)) {
-		return true;
-	}
-
-	return (
-		(bucketOptions.spec.numBuckets ?? DEFAULT_NUM_BUCKETS) > PREVIEW_BOUND_COUNT
-	);
-}
-
-/**
- * A bound is a value on the panel's own axis, so it reads in the panel's unit when one
- * is set. Unitless, three significant digits keep the tightly spaced bounds of a fine
- * log axis distinguishable without printing the float in full.
- */
-export function formatUpperBound(bound: number, unit?: string): string {
-	if (unit) {
-		return getYAxisFormattedValue(String(bound), unit);
-	}
-
-	return Number(bound.toPrecision(3)).toString();
-}

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,38 +1,19 @@
-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 { ATTRIBUTE_TYPES, PANEL_TYPES } from 'constants/queryBuilder';
+import { PANEL_TYPES } from 'constants/queryBuilder';
 import { GroupByFilter } from 'container/QueryBuilder/filters/GroupByFilter/GroupByFilter';
 import { OrderByFilter } from 'container/QueryBuilder/filters/OrderByFilter/OrderByFilter';
 import { ReduceToFilter } from 'container/QueryBuilder/filters/ReduceToFilter/ReduceToFilter';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useQueryOperations } from 'hooks/queryBuilder/useQueryBuilderOperations';
 import { get, isEmpty } from 'lodash-es';
-import {
-	BarChart,
-	ChevronUp,
-	ExternalLink,
-	Grid3X3,
-	ScrollText,
-} from '@signozhq/icons';
-import { Querybuildertypesv5BucketOptionsDTO } from 'api/generated/services/sigNoz.schemas';
+import { BarChart, ChevronUp, ExternalLink, ScrollText } from '@signozhq/icons';
 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 BucketOptions from './BucketOptions/BucketOptions';
 import HavingFilter from './HavingFilter/HavingFilter';
 import { buildDefaultLegendFromGroupBy } from './utils';
 
@@ -41,38 +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',
-	[QueryBuilderField.BucketOptions]: 'bucketOptions',
+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',
@@ -80,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:
@@ -89,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:
@@ -98,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:
@@ -107,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:
@@ -115,32 +92,16 @@ 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:
 		'https://signoz.io/docs/userguide/query-builder-v5/#result-manipulation',
 };
 
-// Offered only by a heatmap over metrics: the bucket axis is what a heatmap plots
-// against, and no other panel type sends one. A histogram brings its own buckets.
-const HISTOGRAM_ATTRIBUTE_TYPES = new Set<string>([
-	ATTRIBUTE_TYPES.HISTOGRAM,
-	ATTRIBUTE_TYPES.EXPONENTIAL_HISTOGRAM,
-]);
-
-const BUCKET_OPTIONS: AddOn = {
-	icon: <Grid3X3 size={14} />,
-	label: 'Bucket by',
-	key: QueryBuilderField.BucketOptions,
-	description:
-		'Choose how the bucket axis is spaced — logarithmically, so every band is the same height and the tail stays readable, or linearly up to a max value. Left to Auto, the query picks the finest log axis it can return.',
-	docLink: 'https://signoz.io/docs/userguide/query-builder-v5/',
-};
-
 const hasValue = (value: unknown): boolean =>
 	value != null && value !== '' && !(Array.isArray(value) && value.length === 0);
 
@@ -193,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,
@@ -221,81 +182,42 @@ function QueryAddOns({
 		isForTraceOperator,
 	});
 
-	const { handleSetQueryData, currentQuery } = useQueryBuilder();
+	const { handleSetQueryData } = useQueryBuilder();
 
-	const supportedAddOns = useMemo((): AddOn[] => {
-		let addOns: AddOn[];
+	useEffect(() => {
+		if (isListViewPanel) {
+			setAddOns([]);
 
+			setSelectedViews([
+				ADD_ONS.find((addOn) => addOn.key === ADD_ONS_KEYS.ORDER_BY) as AddOn,
+			]);
+
+			return;
+		}
+
+		let filteredAddOns: AddOn[];
 		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);
+			// Filter out all add-ons except legend format
+			filteredAddOns = ADD_ONS.filter(
+				(addOn) => addOn.key === ADD_ONS_KEYS.LEGEND_FORMAT,
+			);
 		} else {
-			addOns = [...ADD_ONS];
+			filteredAddOns = Object.values(ADD_ONS);
+
+			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,
+				);
+			}
 		}
 
 		if (showReduceTo) {
-			addOns = [...addOns, REDUCE_TO];
+			filteredAddOns = [...filteredAddOns, REDUCE_TO];
 		}
+		setAddOns(filteredAddOns);
 
-		if (
-			panelType === PANEL_TYPES.HEATMAP &&
-			query.dataSource === DataSource.METRICS &&
-			!HISTOGRAM_ATTRIBUTE_TYPES.has(query.aggregateAttribute?.type ?? '')
-		) {
-			addOns = [...addOns, BUCKET_OPTIONS];
-		}
-
-		return addOns;
-	}, [
-		panelType,
-		query.dataSource,
-		query.aggregateAttribute?.type,
-		showReduceTo,
-	]);
-
-	const resolvedFields = useMemo(
-		() =>
-			resolveQueryBuilderFields(
-				supportedAddOns.map((addOn) => addOn.key),
-				mergeQueryBuilderFieldsConfig(
-					isRawQuery ? RAW_QUERY_FIELDS : undefined,
-					fieldsConfig,
-				),
-			),
-		[supportedAddOns, fieldsConfig, isRawQuery],
-	);
-
-	const offeredAddOns = useMemo(
-		() =>
-			supportedAddOns.filter((addOn) => !resolvedFields.get(addOn.key)?.hidden),
-		[supportedAddOns, resolvedFields],
-	);
-
-	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 &&
@@ -309,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,
 		);
@@ -355,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
@@ -400,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) => {
@@ -434,18 +337,11 @@ function QueryAddOns({
 		[handleChangeQueryData],
 	);
 
-	const handleChangeBucketOptions = useCallback(
-		(value: Querybuildertypesv5BucketOptionsDTO | undefined) => {
-			handleChangeQueryData('bucketOptions', value);
-		},
-		[handleChangeQueryData],
-	);
-
 	return (
 		<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
@@ -473,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
@@ -503,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}
 									/>
@@ -511,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"
@@ -519,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
@@ -547,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">
@@ -585,42 +487,31 @@ 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>
 					)}
-
-					{selectedViews.find(
-						(view) => view.key === QueryBuilderField.BucketOptions,
-					) && (
-						<div className="add-on-content" data-testid="bucket-options-content">
-							<BucketOptions
-								bucketOptions={query.bucketOptions}
-								unit={currentQuery.unit}
-								onChange={handleChangeBucketOptions}
-								onClose={(): void => handleRemoveView(QueryBuilderField.BucketOptions)}
-							/>
-						</div>
-					)}
 				</div>
 			)}
 
@@ -629,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

@@ -1,4 +1,4 @@
-import { ATTRIBUTE_TYPES, PANEL_TYPES } from 'constants/queryBuilder';
+import { PANEL_TYPES } from 'constants/queryBuilder';
 import {
 	fireEvent,
 	render,
@@ -26,10 +26,8 @@ jest.mock('hooks/queryBuilder/useQueryBuilderOperations', () => ({
 jest.mock('hooks/queryBuilder/useQueryBuilder', () => ({
 	useQueryBuilder: (): {
 		handleSetQueryData: typeof mockHandleSetQueryData;
-		currentQuery: { unit: string | undefined };
 	} => ({
 		handleSetQueryData: mockHandleSetQueryData,
-		currentQuery: { unit: undefined },
 	}),
 }));
 
@@ -97,7 +95,7 @@ describe('QueryAddOns', () => {
 			<QueryAddOns
 				query={baseQuery()}
 				version="v5"
-				isRawQuery={false}
+				isListViewPanel={false}
 				showReduceTo
 				panelType={PANEL_TYPES.VALUE}
 				index={0}
@@ -121,7 +119,7 @@ describe('QueryAddOns', () => {
 					groupBy: ['service.name'],
 				})}
 				version="v5"
-				isRawQuery={false}
+				isListViewPanel={false}
 				showReduceTo={false}
 				panelType={PANEL_TYPES.TIME_SERIES}
 				index={0}
@@ -137,7 +135,7 @@ describe('QueryAddOns', () => {
 			<QueryAddOns
 				query={baseQuery()}
 				version="v5"
-				isRawQuery
+				isListViewPanel
 				showReduceTo={false}
 				panelType={PANEL_TYPES.LIST}
 				index={0}
@@ -153,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}
@@ -178,7 +176,7 @@ describe('QueryAddOns', () => {
 			<QueryAddOns
 				query={query}
 				version="v5"
-				isRawQuery={false}
+				isListViewPanel={false}
 				showReduceTo={false}
 				panelType={PANEL_TYPES.TIME_SERIES}
 				index={0}
@@ -197,7 +195,7 @@ describe('QueryAddOns', () => {
 			<QueryAddOns
 				query={baseQuery()}
 				version="v5"
-				isRawQuery={false}
+				isListViewPanel={false}
 				showReduceTo
 				panelType={PANEL_TYPES.TIME_SERIES}
 				index={0}
@@ -213,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}
@@ -236,7 +234,7 @@ describe('QueryAddOns', () => {
 			<QueryAddOns
 				query={query}
 				version="v5"
-				isRawQuery={false}
+				isListViewPanel={false}
 				showReduceTo
 				panelType={PANEL_TYPES.TIME_SERIES}
 				index={0}
@@ -288,7 +286,7 @@ describe('QueryAddOns', () => {
 			<QueryAddOns
 				query={query}
 				version="v5"
-				isRawQuery={false}
+				isListViewPanel={false}
 				showReduceTo={false}
 				panelType={PANEL_TYPES.TIME_SERIES}
 				index={0}
@@ -316,7 +314,7 @@ describe('QueryAddOns', () => {
 			<QueryAddOns
 				query={query}
 				version="v5"
-				isRawQuery={false}
+				isListViewPanel={false}
 				showReduceTo={false}
 				panelType={PANEL_TYPES.TIME_SERIES}
 				index={0}
@@ -332,158 +330,4 @@ describe('QueryAddOns', () => {
 			expect.anything(),
 		);
 	});
-	describe('bucket options', () => {
-		function renderHeatmap(overrides: Partial<any> = {}): void {
-			render(
-				<QueryAddOns
-					query={baseQuery({ dataSource: DataSource.METRICS, ...overrides })}
-					version="v5"
-					isRawQuery={false}
-					showReduceTo={false}
-					panelType={PANEL_TYPES.HEATMAP}
-					index={0}
-					isForTraceOperator={false}
-				/>,
-			);
-		}
-
-		it('is offered on a metrics heatmap only', () => {
-			renderHeatmap();
-
-			expect(
-				screen.getByTestId('query-add-on-bucket_options'),
-			).toBeInTheDocument();
-		});
-
-		it('is not offered on other panel types', () => {
-			render(
-				<QueryAddOns
-					query={baseQuery({ dataSource: DataSource.METRICS })}
-					version="v5"
-					isRawQuery={false}
-					showReduceTo={false}
-					panelType={PANEL_TYPES.TIME_SERIES}
-					index={0}
-					isForTraceOperator={false}
-				/>,
-			);
-
-			expect(
-				screen.queryByTestId('query-add-on-bucket_options'),
-			).not.toBeInTheDocument();
-		});
-
-		it('is not offered on a heatmap over another signal', () => {
-			render(
-				<QueryAddOns
-					query={baseQuery({ dataSource: DataSource.LOGS })}
-					version="v5"
-					isRawQuery={false}
-					showReduceTo={false}
-					panelType={PANEL_TYPES.HEATMAP}
-					index={0}
-					isForTraceOperator={false}
-				/>,
-			);
-
-			expect(
-				screen.queryByTestId('query-add-on-bucket_options'),
-			).not.toBeInTheDocument();
-		});
-
-		it.each([ATTRIBUTE_TYPES.HISTOGRAM, ATTRIBUTE_TYPES.EXPONENTIAL_HISTOGRAM])(
-			'is not offered for a %s metric, which carries its own buckets',
-			(type) => {
-				renderHeatmap({
-					aggregateAttribute: { key: 'http_duration_bucket', type },
-				});
-
-				expect(
-					screen.queryByTestId('query-add-on-bucket_options'),
-				).not.toBeInTheDocument();
-			},
-		);
-
-		it("auto-opens on the query's own kind", () => {
-			renderHeatmap({ bucketOptions: { kind: 'log', spec: { scale: 0 } } });
-
-			expect(screen.getByTestId('bucket-options-content')).toBeInTheDocument();
-			expect(screen.getByRole('radio', { name: 'Log' })).toBeChecked();
-			expect(screen.getByRole('radio', { name: '1' })).toBeChecked();
-		});
-
-		it('sends no options for Auto', async () => {
-			const user = userEvent.setup();
-			renderHeatmap({ bucketOptions: { kind: 'log', spec: { scale: 0 } } });
-
-			await user.click(screen.getByRole('radio', { name: 'Auto' }));
-
-			expect(mockHandleChangeQueryData).toHaveBeenCalledWith(
-				'bucketOptions',
-				undefined,
-			);
-		});
-
-		it('sends the scale the picked bands per doubling resolve to', async () => {
-			const user = userEvent.setup();
-			renderHeatmap({ bucketOptions: { kind: 'log', spec: { scale: 4 } } });
-
-			await user.click(screen.getByRole('radio', { name: '1' }));
-
-			expect(mockHandleChangeQueryData).toHaveBeenCalledWith('bucketOptions', {
-				kind: 'log',
-				spec: { scale: 0 },
-			});
-		});
-
-		it('previews the bounds the picked axis will carry', () => {
-			renderHeatmap({ bucketOptions: { kind: 'log', spec: { scale: 0 } } });
-
-			const bounds = within(screen.getByTestId('bucket-options-bounds'));
-			['1', '2', '4', '8', '16', '32', '64', '128', '+Inf'].forEach((bound) => {
-				expect(bounds.getByText(bound)).toBeInTheDocument();
-			});
-		});
-
-		it('sends nothing for a linear axis until it has a max value', async () => {
-			const user = userEvent.setup();
-			renderHeatmap({ bucketOptions: { kind: 'log', spec: { scale: 0 } } });
-
-			await user.click(screen.getByRole('radio', { name: 'Linear' }));
-
-			expect(mockHandleChangeQueryData).toHaveBeenLastCalledWith(
-				'bucketOptions',
-				undefined,
-			);
-			expect(
-				screen.getByText('Set a max value to see the bounds'),
-			).toBeInTheDocument();
-		});
-
-		it('sends the linear axis once a max value is filled in', async () => {
-			const user = userEvent.setup();
-			renderHeatmap({ bucketOptions: { kind: 'log', spec: { scale: 0 } } });
-
-			await user.click(screen.getByRole('radio', { name: 'Linear' }));
-			await user.type(screen.getByTestId('bucket-options-max-value'), '500');
-
-			await waitFor(() => {
-				expect(mockHandleChangeQueryData).toHaveBeenLastCalledWith(
-					'bucketOptions',
-					{ kind: 'linear', spec: { maxValue: 500 } },
-				);
-			});
-		});
-
-		it('closes back to the toggle bar', async () => {
-			const user = userEvent.setup();
-			renderHeatmap({ bucketOptions: { kind: 'log', spec: { scale: 0 } } });
-
-			await user.click(screen.getByTestId('bucket-options-close'));
-
-			expect(
-				screen.queryByTestId('bucket-options-content'),
-			).not.toBeInTheDocument();
-		});
-	});
 });

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,37 +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',
-	BucketOptions = 'bucket_options',
-	// 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,93 +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.BucketOptions]: { 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/constants/panelTypes.ts

@@ -31,8 +31,6 @@ export const getComponentForPanelType = (
 		[PANEL_TYPES.BAR]: Uplot,
 		[PANEL_TYPES.PIE]: null,
 		[PANEL_TYPES.HISTOGRAM]: Uplot,
-		// V2-only kind; it renders through the V2 panel registry.
-		[PANEL_TYPES.HEATMAP]: null,
 		// Dashboards v2 renders this kind; nothing reaches the V1 chart map for it.
 		[PANEL_TYPES.TEXT]: null,
 		[PANEL_TYPES.EMPTY_WIDGET]: null,

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' },
@@ -338,7 +376,6 @@ export enum PANEL_TYPES {
 	BAR = 'bar',
 	PIE = 'pie',
 	HISTOGRAM = 'histogram',
-	HEATMAP = 'heatmap',
 	TEXT = 'text',
 	EMPTY_WIDGET = 'EMPTY_WIDGET',
 }

frontend/src/constants/queryBuilderOperators.ts

@@ -527,21 +527,6 @@ export const metricsHistogramSpaceAggregateOperatorOptions: SelectOption<
 	},
 ];
 
-/**
- * A heatmap's Y axis is the `le` labels themselves, so every percentile draws the grid a
- * count already draws. Sum is also what the statement builder forces on a histogram
- * heatmap whatever is asked for, so it is the only honest option to offer.
- */
-export const metricsHeatmapHistogramSpaceAggregateOperatorOptions: SelectOption<
-	string,
-	string
->[] = [
-	{
-		value: MetricAggregateOperator.COUNT,
-		label: 'Count',
-	},
-];
-
 export const metricsEmptyTimeAggregateOperatorOptions: SelectOption<
 	string,
 	string

frontend/src/container/AlertHistory/Timeline/Graph/Graph.tsx

@@ -12,7 +12,7 @@ import heatmapPlugin from 'lib/uPlotLib/plugins/heatmapPlugin';
 import timelinePlugin from 'lib/uPlotLib/plugins/timelinePlugin';
 import { uPlotXAxisValuesFormat } from 'lib/uPlotLib/utils/constants';
 import { useTimezone } from 'providers/Timezone';
-import { UpdateTimeInterval } from 'store/actions';
+import { UpdateTimeInterval } from 'store/actions/global';
 import { AlertRuleTimelineGraphResponse } from 'types/api/alerts/def';
 import uPlot, { AlignedData } from 'uplot';
 

frontend/src/container/CreateAlertV2/Footer/__tests__/utils.test.ts

@@ -467,7 +467,6 @@ describe('Footer utils', () => {
 											timeAggregation: 'avg',
 										},
 									],
-									bucketOptions: undefined,
 									disabled: false,
 									filter: {
 										expression: '',

frontend/src/container/FormAlertRules/ChartPreview/index.tsx

@@ -34,7 +34,7 @@ import { LegendPosition } from 'lib/uPlotV2/components/types';
 import { isEmpty } from 'lodash-es';
 import { useAppContext } from 'providers/App/App';
 import { useTimezone } from 'providers/Timezone';
-import { UpdateTimeInterval } from 'store/actions';
+import { UpdateTimeInterval } from 'store/actions/global';
 import { AppState } from 'store/reducers';
 import { Warning } from 'types/api';
 import { AlertDef } from 'types/api/alerts/def';

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/LogsExplorerChart/index.tsx

@@ -12,7 +12,7 @@ import GetMinMax from 'lib/getMinMax';
 import { LegendPosition } from 'lib/uPlotV2/components/types';
 import { StackMode } from 'lib/uPlotV2/config/types';
 import { useTimezone } from 'providers/Timezone';
-import { UpdateTimeInterval } from 'store/actions';
+import { UpdateTimeInterval } from 'store/actions/global';
 import { AppState } from 'store/reducers';
 import { GlobalReducer } from 'types/reducer/globalTime';
 

frontend/src/container/LogsExplorerViews/tests/LogsExplorerPagination.test.tsx

@@ -33,8 +33,8 @@ let mockGlobalTimeState: {
 } | null = null;
 
 // Mock UpdateTimeInterval to update the mock state that useSelector will use
-jest.mock('store/actions', () => {
-	const originalModule = jest.requireActual('store/actions');
+jest.mock('store/actions/global', () => {
+	const originalModule = jest.requireActual('store/actions/global');
 	const GetMinMax = jest.requireActual('lib/getMinMax').default;
 
 	return {

frontend/src/container/MeterExplorer/Breakdown/BreakDown.tsx

@@ -16,7 +16,7 @@ import dayjs from 'dayjs';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
 import useUrlQuery from 'hooks/useUrlQuery';
-import { UpdateTimeInterval } from 'store/actions';
+import { UpdateTimeInterval } from 'store/actions/global';
 import { AppState } from 'store/reducers';
 import { Widgets } from 'types/api/widgets/widget';
 import { GlobalReducer } from 'types/reducer/globalTime';

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

@@ -12,6 +12,7 @@ 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';
@@ -119,6 +120,11 @@ function Explorer(): JSX.Element {
 		});
 	}, []);
 
+	const queryComponents = useMemo(
+		(): QueryBuilderProps['queryComponents'] => ({}),
+		[],
+	);
+
 	return (
 		<Sentry.ErrorBoundary fallback={<ErrorBoundaryFallback />}>
 			<div
@@ -175,6 +181,7 @@ function Explorer(): JSX.Element {
 								signalSource: 'meter',
 							}}
 							panelType={PANEL_TYPES.TIME_SERIES}
+							queryComponents={queryComponents}
 							showFunctions={false}
 							version="v3"
 						/>

frontend/src/container/MeterExplorer/Explorer/useTimeSeriesTimeManagement.ts

@@ -11,7 +11,7 @@ import useUrlQuery from 'hooks/useUrlQuery';
 import GetMinMax from 'lib/getMinMax';
 import getTimeString from 'lib/getTimeString';
 import history from 'lib/history';
-import { UpdateTimeInterval } from 'store/actions';
+import { UpdateTimeInterval } from 'store/actions/global';
 import { getTimeRange } from 'utils/getTimeRange';
 
 interface UseTimeSeriesTimeManagementProps {

frontend/src/container/MetricsApplication/Tabs/DBCall.tsx

@@ -23,7 +23,7 @@ import useUrlQuery from 'hooks/useUrlQuery';
 import getStep from 'lib/getStep';
 import history from 'lib/history';
 import store from 'store';
-import { UpdateTimeInterval } from 'store/actions';
+import { UpdateTimeInterval } from 'store/actions/global';
 import { TagFilterItem } from 'types/api/queryBuilder/queryBuilderData';
 import { EQueryType } from 'types/common/dashboard';
 import { v4 as uuid } from 'uuid';

frontend/src/container/MetricsApplication/Tabs/External.tsx

@@ -25,7 +25,7 @@ import useUrlQuery from 'hooks/useUrlQuery';
 import getStep from 'lib/getStep';
 import history from 'lib/history';
 import store from 'store';
-import { UpdateTimeInterval } from 'store/actions';
+import { UpdateTimeInterval } from 'store/actions/global';
 import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { EQueryType } from 'types/common/dashboard';
 import { v4 as uuid } from 'uuid';

frontend/src/container/MetricsApplication/Tabs/Overview.tsx

@@ -26,7 +26,7 @@ import history from 'lib/history';
 import { OnClickPluginOpts } from 'lib/uPlotLib/plugins/onClickPlugin';
 import { defaultTo } from 'lodash-es';
 import { useAppContext } from 'providers/App/App';
-import { UpdateTimeInterval } from 'store/actions';
+import { UpdateTimeInterval } from 'store/actions/global';
 import { AppState } from 'store/reducers';
 import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';

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/DataSourceDropdown/__tests__/DataSourceDropdown.test.tsx

@@ -1,79 +0,0 @@
-import { TelemetrytypesSignalDTO } from 'api/generated/services/sigNoz.schemas';
-import { render, screen, userEvent } from 'tests/test-utils';
-import { DataSource } from 'types/common/queryBuilder';
-
-import { DataSourceDropdown } from '../DataSourceDropdown';
-
-const TEST_ID = 'query-data-source-selector';
-
-async function openDropdown(): Promise<void> {
-	const user = userEvent.setup();
-	const trigger = screen.getByTestId(TEST_ID);
-	await user.click(trigger.querySelector('.ant-select-selector') as HTMLElement);
-}
-
-describe('DataSourceDropdown', () => {
-	// antd's virtual list renders only the first couple of options into jsdom, so
-	// each case asserts what the restriction admits and excludes, not the full list.
-	it('offers the signals beyond the current one when nothing restricts it', async () => {
-		render(
-			<DataSourceDropdown
-				data-testid={TEST_ID}
-				value={DataSource.METRICS}
-				onChange={jest.fn()}
-			/>,
-		);
-		await openDropdown();
-
-		await expect(
-			screen.findByRole('option', { name: 'Logs' }),
-		).resolves.toBeInTheDocument();
-		expect(screen.getByRole('option', { name: 'Metrics' })).toBeInTheDocument();
-	});
-
-	it('offers only the signals the caller can visualize', async () => {
-		render(
-			<DataSourceDropdown
-				data-testid={TEST_ID}
-				value={DataSource.METRICS}
-				allowedDataSources={[TelemetrytypesSignalDTO.metrics]}
-				onChange={jest.fn()}
-			/>,
-		);
-		await openDropdown();
-
-		await expect(
-			screen.findByRole('option', { name: 'Metrics' }),
-		).resolves.toBeInTheDocument();
-		expect(
-			screen.queryByRole('option', { name: 'Logs' }),
-		).not.toBeInTheDocument();
-		expect(
-			screen.queryByRole('option', { name: 'Traces' }),
-		).not.toBeInTheDocument();
-	});
-
-	it('drops a signal that is not a data source a query can be built against', async () => {
-		render(
-			<DataSourceDropdown
-				data-testid={TEST_ID}
-				value={DataSource.LOGS}
-				allowedDataSources={[
-					TelemetrytypesSignalDTO.logs,
-					TelemetrytypesSignalDTO.traces,
-					TelemetrytypesSignalDTO[''],
-				]}
-				onChange={jest.fn()}
-			/>,
-		);
-		await openDropdown();
-
-		await expect(
-			screen.findByRole('option', { name: 'Logs' }),
-		).resolves.toBeInTheDocument();
-		expect(screen.getByRole('option', { name: 'Traces' })).toBeInTheDocument();
-		expect(
-			screen.queryByRole('option', { name: 'Metrics' }),
-		).not.toBeInTheDocument();
-	});
-});

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

@@ -1,9 +1,12 @@
 import { ChangeEvent, useCallback, useMemo, useState } from 'react';
 import { Col, Input, Row, Select } from 'antd';
 import InputWithLabel from 'components/InputWithLabel/InputWithLabel';
-import BucketOptions from 'components/QueryBuilderV2/QueryV2/QueryAddOns/BucketOptions/BucketOptions';
 import { LEGEND } from 'constants/global';
-import { PANEL_TYPES } from 'constants/queryBuilder';
+// ** 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';
@@ -14,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';
@@ -23,22 +27,22 @@ import './Formula.styles.scss';
 export function Formula({
 	index,
 	formula,
+	filterConfigs,
 	query,
+	isAdditionalFilterEnable,
 	isQBV2,
 }: FormulaProps): JSX.Element {
-	const {
-		removeQueryBuilderEntityByIndex,
-		handleSetFormulaData,
-		panelType,
-		currentQuery,
-	} = useQueryBuilder();
+	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);
 
@@ -79,9 +83,16 @@ export function Formula({
 		[handleChangeFormulaData],
 	);
 
-	const handleChangeBucketOptions = useCallback(
-		(value: IBuilderFormula['bucketOptions']) => {
-			handleChangeFormulaData('bucketOptions', value);
+	const handleChangeHavingFilter = useCallback(
+		(value: IBuilderFormula['having']) => {
+			handleChangeFormulaData('having', value);
+		},
+		[handleChangeFormulaData],
+	);
+
+	const handleChangeOrderByFilter = useCallback(
+		(value: IBuilderFormula['orderBy']) => {
+			handleChangeFormulaData('orderBy', value);
 		},
 		[handleChangeFormulaData],
 	);
@@ -111,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
@@ -147,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">
@@ -176,17 +246,6 @@ export function Formula({
 							</div>
 						</Col>
 					)}
-					{/* A heatmap draws its one enabled query, which is the formula when its
-					    inputs are disabled — so the formula states its own bucket axis. */}
-					{isQBV2 && panelType === PANEL_TYPES.HEATMAP && (
-						<Col span={24}>
-							<BucketOptions
-								bucketOptions={formula.bucketOptions}
-								unit={currentQuery.unit}
-								onChange={handleChangeBucketOptions}
-							/>
-						</Col>
-					)}
 				</Row>
 			)}
 		</Row>

frontend/src/container/QueryBuilder/components/Formula/__tests__/Formula.bucketOptions.test.tsx

@@ -1,91 +0,0 @@
-import { PANEL_TYPES } from 'constants/queryBuilder';
-import { render, screen, userEvent } from 'tests/test-utils';
-import type { IBuilderFormula } from 'types/api/queryBuilder/queryBuilderData';
-
-import { Formula } from '../Formula';
-
-const mockHandleChangeFormulaData = jest.fn();
-let mockPanelType: PANEL_TYPES = PANEL_TYPES.HEATMAP;
-
-jest.mock('hooks/queryBuilder/useQueryBuilder', () => ({
-	useQueryBuilder: (): Record<string, unknown> => ({
-		removeQueryBuilderEntityByIndex: jest.fn(),
-		handleSetFormulaData: jest.fn(),
-		panelType: mockPanelType,
-		currentQuery: { unit: undefined },
-	}),
-}));
-
-jest.mock('hooks/queryBuilder/useQueryBuilderOperations', () => ({
-	useQueryOperations: (): Record<string, unknown> => ({
-		handleChangeFormulaData: mockHandleChangeFormulaData,
-	}),
-}));
-
-jest.mock('../../QBEntityOptions/QBEntityOptions', () => ({
-	__esModule: true,
-	default: (): JSX.Element => <div data-testid="qb-entity-options" />,
-}));
-
-function formula(overrides: Partial<IBuilderFormula> = {}): IBuilderFormula {
-	return {
-		queryName: 'F1',
-		expression: 'A',
-		legend: '',
-		disabled: false,
-		...overrides,
-	};
-}
-
-function renderFormula(overrides: Partial<IBuilderFormula> = {}): void {
-	render(
-		<Formula index={0} formula={formula(overrides)} query={{} as never} isQBV2 />,
-	);
-}
-
-describe('Formula bucket options', () => {
-	beforeEach(() => {
-		jest.clearAllMocks();
-		mockPanelType = PANEL_TYPES.HEATMAP;
-	});
-
-	it('offers a bucket axis on a heatmap', () => {
-		renderFormula();
-
-		expect(screen.getByTestId('bucket-options')).toBeInTheDocument();
-	});
-
-	it('is not dismissable — a formula has no add-on toggle bar to collapse into', () => {
-		renderFormula();
-
-		expect(screen.queryByTestId('bucket-options-close')).not.toBeInTheDocument();
-	});
-
-	it('offers no bucket axis on other panel types', () => {
-		mockPanelType = PANEL_TYPES.TIME_SERIES;
-		renderFormula();
-
-		expect(screen.queryByTestId('bucket-options')).not.toBeInTheDocument();
-	});
-
-	it('opens on the axis the formula already carries', () => {
-		renderFormula({
-			bucketOptions: { kind: 'log', spec: { scale: 0 } } as never,
-		});
-
-		expect(screen.getByRole('radio', { name: 'Log' })).toBeChecked();
-		expect(screen.getByRole('radio', { name: '1' })).toBeChecked();
-	});
-
-	it('writes the picked axis onto the formula', async () => {
-		const user = userEvent.setup();
-		renderFormula();
-
-		await user.click(screen.getByRole('radio', { name: 'Log' }));
-
-		expect(mockHandleChangeFormulaData).toHaveBeenCalledWith('bucketOptions', {
-			kind: 'log',
-			spec: { scale: 4 },
-		});
-	});
-});

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

@@ -36,7 +36,7 @@ import { getUPlotChartOptions } from 'lib/uPlotLib/getUplotChartOptions';
 import { getUPlotChartData } from 'lib/uPlotLib/utils/getUplotChartData';
 import { isEmpty } from 'lodash-es';
 import { useTimezone } from 'providers/Timezone';
-import { UpdateTimeInterval } from 'store/actions';
+import { UpdateTimeInterval } from 'store/actions/global';
 import { AppState } from 'store/reducers';
 import { SuccessResponse, Warning } from 'types/api';
 import { LegendPosition } from 'types/api/widgets/widget';

frontend/src/container/TopNav/DateTimeSelectionV2/index.tsx

@@ -28,7 +28,7 @@ import { useTimezone } from 'providers/Timezone';
 // eslint-disable-next-line no-restricted-imports
 import { bindActionCreators, Dispatch } from 'redux';
 import { ThunkDispatch } from 'redux-thunk';
-import { GlobalTimeLoading, UpdateTimeInterval } from 'store/actions';
+import { GlobalTimeLoading, UpdateTimeInterval } from 'store/actions/global';
 import { AppState } from 'store/reducers';
 import AppActions from 'types/actions';
 import { GlobalReducer } from 'types/reducer/globalTime';

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/contants.ts

@@ -29,7 +29,6 @@ export const PANEL_TYPES_VS_FULL_VIEW_TABLE: PanelTypeAndGraphManagerVisibilityP
 		BAR: true,
 		PIE: false,
 		HISTOGRAM: false,
-		HEATMAP: false,
 		TEXT: false,
 		EMPTY_WIDGET: false,
 	};

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/container/WidgetCard/Card/index.tsx

@@ -14,7 +14,7 @@ import { GetQueryResultsProps } from 'lib/dashboard/getQueryResults';
 import getTimeString from 'lib/getTimeString';
 import { isEqual } from 'lodash-es';
 import isEmpty from 'lodash-es/isEmpty';
-import { UpdateTimeInterval } from 'store/actions';
+import { UpdateTimeInterval } from 'store/actions/global';
 import { AppState } from 'store/reducers';
 import APIError from 'types/api/error';
 import { DataSource } from 'types/common/queryBuilder';

frontend/src/container/WidgetCard/Panels/constants.ts

@@ -20,6 +20,4 @@ export const PanelTypeVsPanelWrapper = {
 	[PANEL_TYPES.PIE]: PiePanelWrapper,
 	[PANEL_TYPES.BAR]: BarPanel,
 	[PANEL_TYPES.HISTOGRAM]: HistogramPanel,
-	// V2-only kind; it renders through the V2 panel registry.
-	[PANEL_TYPES.HEATMAP]: null,
 };

frontend/src/hooks/queryBuilder/__tests__/useQueryBuilderOperations.test.ts

@@ -62,14 +62,14 @@ describe('useQueryBuilderOperations - Empty Aggregate Attribute Type', () => {
 		legend: '',
 	};
 
-	const setupMockQueryBuilder = (panelType = 'time_series'): void => {
+	const setupMockQueryBuilder = (): void => {
 		(useQueryBuilder as jest.Mock).mockReturnValue({
 			handleSetQueryData: mockHandleSetQueryData,
 			handleSetFormulaData: mockHandleSetFormulaData,
 			removeQueryBuilderEntityByIndex: mockRemoveQueryBuilderEntityByIndex,
 			setLastUsedQuery: mockSetLastUsedQuery,
 			redirectWithQueryBuilderData: mockRedirectWithQueryBuilderData,
-			panelType,
+			panelType: 'time_series',
 			currentQuery: {
 				builder: {
 					queryData: [defaultMockQuery, defaultMockQuery],
@@ -332,105 +332,4 @@ describe('useQueryBuilderOperations - Empty Aggregate Attribute Type', () => {
 			);
 		});
 	});
-
-	describe('spaceAggregationOptions for a histogram metric', () => {
-		const histogramQuery: IBuilderQuery = {
-			...defaultMockQuery,
-			aggregateAttribute: {
-				key: 'signoz_latency',
-				dataType: DataTypes.Float64,
-				type: ATTRIBUTE_TYPES.HISTOGRAM,
-			} as BaseAutocompleteData,
-		};
-
-		it('offers the percentiles on a time series panel', () => {
-			const result = renderHookWithProps({ query: histogramQuery });
-
-			expect(
-				result.current.spaceAggregationOptions.map((o) => o.value),
-			).toStrictEqual([
-				MetricAggregateOperator.P50,
-				MetricAggregateOperator.P75,
-				MetricAggregateOperator.P90,
-				MetricAggregateOperator.P95,
-				MetricAggregateOperator.P99,
-			]);
-		});
-
-		it('offers count alone on a heatmap panel, whose Y axis is the `le` labels', () => {
-			setupMockQueryBuilder('heatmap');
-
-			const result = renderHookWithProps({ query: histogramQuery });
-
-			expect(
-				result.current.spaceAggregationOptions.map((o) => o.value),
-			).toStrictEqual([MetricAggregateOperator.COUNT]);
-		});
-	});
-
-	describe('picking a histogram metric', () => {
-		const histogramAttribute: BaseAutocompleteData = {
-			key: 'http.client.duration.bucket',
-			dataType: DataTypes.Float64,
-			type: ATTRIBUTE_TYPES.HISTOGRAM,
-		};
-
-		it('defaults the spatial aggregation to p90 on a time series panel', () => {
-			const result = renderHookWithProps({ entityVersion: ENTITY_VERSION_V5 });
-			act(() => {
-				result.current.handleChangeAggregatorAttribute(histogramAttribute);
-			});
-
-			expect(mockHandleSetQueryData).toHaveBeenLastCalledWith(
-				0,
-				expect.objectContaining({
-					aggregations: [
-						expect.objectContaining({
-							spaceAggregation: MetricAggregateOperator.P90,
-						}),
-					],
-				}),
-			);
-		});
-
-		it('defaults it to count on a heatmap panel, which offers nothing else', () => {
-			setupMockQueryBuilder('heatmap');
-
-			const result = renderHookWithProps({ entityVersion: ENTITY_VERSION_V5 });
-			act(() => {
-				result.current.handleChangeAggregatorAttribute(histogramAttribute);
-			});
-
-			expect(mockHandleSetQueryData).toHaveBeenLastCalledWith(
-				0,
-				expect.objectContaining({
-					aggregations: [
-						expect.objectContaining({
-							spaceAggregation: MetricAggregateOperator.COUNT,
-						}),
-					],
-				}),
-			);
-		});
-
-		it('drops the bucket axis a gauge had chosen, since `le` is the axis now', () => {
-			setupMockQueryBuilder('heatmap');
-
-			const result = renderHookWithProps({
-				entityVersion: ENTITY_VERSION_V5,
-				query: {
-					...defaultMockQuery,
-					bucketOptions: { kind: 'log', spec: { scale: 2 } },
-				},
-			});
-			act(() => {
-				result.current.handleChangeAggregatorAttribute(histogramAttribute);
-			});
-
-			expect(mockHandleSetQueryData).toHaveBeenLastCalledWith(
-				0,
-				expect.objectContaining({ bucketOptions: undefined }),
-			);
-		});
-	});
 });

frontend/src/hooks/queryBuilder/__tests__/useSyncTimeOnStagedQueryChange.test.ts

@@ -1,7 +1,7 @@
 import { renderHook } from '@testing-library/react';
 // eslint-disable-next-line no-restricted-imports
 import { useSelector } from 'react-redux';
-import { UpdateTimeInterval } from 'store/actions';
+import { UpdateTimeInterval } from 'store/actions/global';
 
 import { useSyncTimeOnStagedQueryChange } from '../useSyncTimeOnStagedQueryChange';
 
@@ -12,7 +12,7 @@ jest.mock('react-redux', () => ({
 	useSelector: jest.fn(),
 }));
 
-jest.mock('store/actions', () => ({
+jest.mock('store/actions/global', () => ({
 	UpdateTimeInterval: jest.fn((time: string) => ({
 		type: 'UPDATE_TIME_INTERVAL_THUNK',
 		payload: time,

frontend/src/hooks/queryBuilder/useQueryBuilderOperations.ts

@@ -14,11 +14,12 @@ import {
 	initialQueryBuilderFormValuesMap,
 	listViewInitialLogQuery,
 	listViewInitialTraceQuery,
+	mapOfFormulaToFilters,
+	mapOfQueryFilters,
 	PANEL_TYPES,
 } from 'constants/queryBuilder';
 import {
 	metricsGaugeSpaceAggregateOperatorOptions,
-	metricsHeatmapHistogramSpaceAggregateOperatorOptions,
 	metricsHistogramSpaceAggregateOperatorOptions,
 	metricsSumSpaceAggregateOperatorOptions,
 	metricsUnknownSpaceAggregateOperatorOptions,
@@ -58,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,
@@ -103,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 => {
@@ -177,11 +218,6 @@ export const useQueryOperations: UseQueryOperations = ({
 							(aggregateAttribute?.type as ATTRIBUTE_TYPES) || ATTRIBUTE_TYPES.GAUGE,
 					});
 
-			const histogramSpaceAggregationOptions =
-				panelType === PANEL_TYPES.HEATMAP
-					? metricsHeatmapHistogramSpaceAggregateOperatorOptions
-					: metricsHistogramSpaceAggregateOperatorOptions;
-
 			switch (aggregateAttribute?.type) {
 				case ATTRIBUTE_TYPES.SUM:
 					setSpaceAggregationOptions(metricsSumSpaceAggregateOperatorOptions);
@@ -191,11 +227,11 @@ export const useQueryOperations: UseQueryOperations = ({
 					break;
 
 				case ATTRIBUTE_TYPES.HISTOGRAM:
-					setSpaceAggregationOptions(histogramSpaceAggregationOptions);
+					setSpaceAggregationOptions(metricsHistogramSpaceAggregateOperatorOptions);
 					break;
 
 				case ATTRIBUTE_TYPES.EXPONENTIAL_HISTOGRAM:
-					setSpaceAggregationOptions(histogramSpaceAggregationOptions);
+					setSpaceAggregationOptions(metricsHistogramSpaceAggregateOperatorOptions);
 					break;
 				default:
 					setSpaceAggregationOptions(metricsUnknownSpaceAggregateOperatorOptions);
@@ -304,17 +340,10 @@ export const useQueryOperations: UseQueryOperations = ({
 									timeAggregation: '',
 									metricName: newQuery.aggregateAttribute?.key || '',
 									temporality: '',
-									// A heatmap cell holds a count of observations per `le` band, which is
-									// the one option the kind offers — a percentile default would sit in the
-									// selector with nothing behind it.
-									spaceAggregation:
-										panelType === PANEL_TYPES.HEATMAP
-											? MetricAggregateOperator.COUNT
-											: MetricAggregateOperator.P90,
+									spaceAggregation: MetricAggregateOperator.P90,
 									reduceTo: ReduceOperators.AVG,
 								},
 							];
-							newQuery.bucketOptions = undefined;
 						} else {
 							newQuery.aggregations = [
 								{
@@ -401,7 +430,6 @@ export const useQueryOperations: UseQueryOperations = ({
 			index,
 			handleMetricAggregateAtributeTypes,
 			previousMetricInfo,
-			panelType,
 		],
 	);
 
@@ -432,7 +460,7 @@ export const useQueryOperations: UseQueryOperations = ({
 				removeKeyFromPreviousQuery(newKey);
 			}
 
-			if (isRawQuery) {
+			if (isListViewPanel) {
 				let listPanelQuery: Query | null = null;
 
 				if (nextSource === DataSource.LOGS) {
@@ -478,7 +506,7 @@ export const useQueryOperations: UseQueryOperations = ({
 			handleSetQueryData(index, newQueryData);
 		},
 		[
-			isRawQuery,
+			isListViewPanel,
 			panelType,
 			query,
 			handleSetQueryData,
@@ -597,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/hooks/queryBuilder/useSyncTimeOnStagedQueryChange.ts

@@ -1,7 +1,7 @@
 import { useEffect, useRef } from 'react';
 // eslint-disable-next-line no-restricted-imports
 import { useDispatch, useSelector } from 'react-redux';
-import { UpdateTimeInterval } from 'store/actions';
+import { UpdateTimeInterval } from 'store/actions/global';
 import { AppState } from 'store/reducers';
 import { GlobalReducer } from 'types/reducer/globalTime';
 

frontend/src/hooks/useDarkMode/index.tsx

@@ -11,7 +11,8 @@ import {
 	useMemo,
 	useState,
 } from 'react';
-import { theme as antdTheme, ThemeConfig } from 'antd';
+import type { ThemeConfig } from 'antd/es/config-provider';
+import antdTheme from 'antd/es/theme';
 import get from 'api/browser/localstorage/get';
 import set from 'api/browser/localstorage/set';
 import { LOCALSTORAGE } from 'constants/localStorage';

frontend/src/hooks/useGetYAxisUnit.test.ts

@@ -222,31 +222,6 @@ describe('useGetYAxisUnit', () => {
 		expect(result.current.isError).toBe(false);
 	});
 
-	it('resolves the unit on the first render, without a settling pass', () => {
-		// The real `useGetMetrics` rebuilds its array on every render; a hook that
-		// stored the unit would need an extra render to settle, and would schedule one
-		// after every render of the panel editor.
-		mockUseGetMetrics.mockImplementation(() => ({
-			isLoading: false,
-			isError: false,
-			metrics: [MOCK_METRIC_1],
-		}));
-
-		let renderCount = 0;
-		const { result, rerender } = renderHook(() => {
-			renderCount += 1;
-			return useGetYAxisUnit();
-		});
-
-		expect(result.current.yAxisUnit).toBe(UniversalYAxisUnit.BYTES);
-		expect(renderCount).toBe(1);
-
-		rerender();
-
-		expect(result.current.yAxisUnit).toBe(UniversalYAxisUnit.BYTES);
-		expect(renderCount).toBe(2);
-	});
-
 	it('should return undefined when metrics have different units', async () => {
 		mockUseGetMetrics.mockReturnValueOnce({
 			isLoading: false,