fix(query): added fix for multi value context and in-place replacement

* feat: qb fixes

* feat: fixed handlerunquery props

* feat: fixes logs list order by

* feat: fix logs order by issue

* feat: safety check and order by correction

* feat: updated version in new create dashboards

* feat: added new formatOptions for table and fixed the pie chart plotting

* feat: keyboard shortcut overriding issue and pie ch correction in dashboard views

* feat: fixed dashboard data state management across datasource * paneltypes

* feat: fixed explorer pages data management issues

* feat: integrated new backend payload/request diff, to the UI types

* feat: fixed the collapse behaviour of QB - queries

* feat: fix order by and default aggregation to count()

.devenv/docker/clickhouse/compose.yaml

@@ -40,7 +40,7 @@ services:
       timeout: 5s
       retries: 3
   schema-migrator-sync:
-    image: signoz/signoz-schema-migrator:v0.128.0
+    image: signoz/signoz-schema-migrator:v0.111.42
     container_name: schema-migrator-sync
     command:
       - sync
@@ -53,7 +53,7 @@ services:
         condition: service_healthy
     restart: on-failure
   schema-migrator-async:
-    image: signoz/signoz-schema-migrator:v0.128.0
+    image: signoz/signoz-schema-migrator:v0.111.42
     container_name: schema-migrator-async
     command:
       - async

.github/workflows/integrationci.yaml

@@ -22,7 +22,7 @@ jobs:
           - 24.1.2-alpine
           - 24.12-alpine
         schema-migrator-version:
-          - v0.128.0
+          - v0.111.38
         postgres-version:
           - 15
     if: |

deploy/docker-swarm/docker-compose.ha.yaml

@@ -174,7 +174,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:v0.89.0
+    image: signoz/signoz:v0.87.0
     command:
       - --config=/root/config/prometheus.yml
     ports:
@@ -194,7 +194,6 @@ services:
       - TELEMETRY_ENABLED=true
       - DEPLOYMENT_TYPE=docker-swarm
       - SIGNOZ_JWT_SECRET=secret
-      - DOT_METRICS_ENABLED=true
     healthcheck:
       test:
         - CMD
@@ -207,7 +206,7 @@ services:
       retries: 3
   otel-collector:
     !!merge <<: *db-depend
-    image: signoz/signoz-otel-collector:v0.128.0
+    image: signoz/signoz-otel-collector:v0.111.42
     command:
       - --config=/etc/otel-collector-config.yaml
       - --manager-config=/etc/manager-config.yaml
@@ -231,7 +230,7 @@ services:
       - signoz
   schema-migrator:
     !!merge <<: *common
-    image: signoz/signoz-schema-migrator:v0.128.0
+    image: signoz/signoz-schema-migrator:v0.111.42
     deploy:
       restart_policy:
         condition: on-failure

deploy/docker-swarm/docker-compose.yaml

@@ -100,7 +100,7 @@ services:
     #   - "9000:9000"
     #   - "8123:8123"
     #   - "9181:9181"
-
+              
     configs:
       - source: clickhouse-config
         target: /etc/clickhouse-server/config.xml
@@ -110,12 +110,13 @@ services:
         target: /etc/clickhouse-server/custom-function.xml
       - source: clickhouse-cluster
         target: /etc/clickhouse-server/config.d/cluster.xml
+        
     volumes:
       - clickhouse:/var/lib/clickhouse/
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:v0.89.0
+    image: signoz/signoz:v0.87.0
     command:
       - --config=/root/config/prometheus.yml
     ports:
@@ -135,7 +136,6 @@ services:
       - GODEBUG=netdns=go
       - TELEMETRY_ENABLED=true
       - DEPLOYMENT_TYPE=docker-swarm
-      - DOT_METRICS_ENABLED=true
     healthcheck:
       test:
         - CMD
@@ -148,7 +148,7 @@ services:
       retries: 3
   otel-collector:
     !!merge <<: *db-depend
-    image: signoz/signoz-otel-collector:v0.128.0
+    image: signoz/signoz-otel-collector:v0.111.42
     command:
       - --config=/etc/otel-collector-config.yaml
       - --manager-config=/etc/manager-config.yaml
@@ -174,7 +174,7 @@ services:
       - signoz
   schema-migrator:
     !!merge <<: *common
-    image: signoz/signoz-schema-migrator:v0.128.0
+    image: signoz/signoz-schema-migrator:v0.111.42
     deploy:
       restart_policy:
         condition: on-failure
@@ -195,6 +195,7 @@ volumes:
     name: signoz-sqlite
   zookeeper-1:
     name: signoz-zookeeper-1
+
 configs:
   clickhouse-config:
     file: ../common/clickhouse/config.xml
@@ -204,6 +205,7 @@ configs:
     file: ../common/clickhouse/custom-function.xml
   clickhouse-cluster:
     file: ../common/clickhouse/cluster.xml
+
   signoz-prometheus-config:
     file: ../common/signoz/prometheus.yml
   # If you have multiple dashboard files, you can list them individually:

deploy/docker-swarm/otel-collector-config.yaml

@@ -26,7 +26,7 @@ processors:
     detectors: [env, system]
     timeout: 2s
   signozspanmetrics/delta:
-    metrics_exporter: signozclickhousemetrics
+    metrics_exporter: clickhousemetricswrite, signozclickhousemetrics
     metrics_flush_interval: 60s
     latency_histogram_buckets: [100us, 1ms, 2ms, 6ms, 10ms, 50ms, 100ms, 250ms, 500ms, 1000ms, 1400ms, 2000ms, 5s, 10s, 20s, 40s, 60s ]
     dimensions_cache_size: 100000
@@ -60,16 +60,27 @@ exporters:
     datasource: tcp://clickhouse:9000/signoz_traces
     low_cardinal_exception_grouping: ${env:LOW_CARDINAL_EXCEPTION_GROUPING}
     use_new_schema: true
+  clickhousemetricswrite:
+    endpoint: tcp://clickhouse:9000/signoz_metrics
+    resource_to_telemetry_conversion:
+      enabled: true
+    disable_v2: true
+  clickhousemetricswrite/prometheus:
+    endpoint: tcp://clickhouse:9000/signoz_metrics
+    disable_v2: true
   signozclickhousemetrics:
     dsn: tcp://clickhouse:9000/signoz_metrics
   clickhouselogsexporter:
     dsn: tcp://clickhouse:9000/signoz_logs
     timeout: 10s
     use_new_schema: true
+  # debug: {}
 service:
   telemetry:
     logs:
       encoding: json
+    metrics:
+      address: 0.0.0.0:8888
   extensions:
     - health_check
     - pprof
@@ -81,11 +92,11 @@ service:
     metrics:
       receivers: [otlp]
       processors: [batch]
-      exporters: [signozclickhousemetrics]
+      exporters: [clickhousemetricswrite, signozclickhousemetrics]
     metrics/prometheus:
       receivers: [prometheus]
       processors: [batch]
-      exporters: [signozclickhousemetrics]
+      exporters: [clickhousemetricswrite/prometheus, signozclickhousemetrics]
     logs:
       receivers: [otlp]
       processors: [batch]

deploy/docker/docker-compose.ha.yaml

@@ -177,7 +177,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:${VERSION:-v0.89.0}
+    image: signoz/signoz:${VERSION:-v0.87.0}
     container_name: signoz
     command:
       - --config=/root/config/prometheus.yml
@@ -197,7 +197,6 @@ services:
       - GODEBUG=netdns=go
       - TELEMETRY_ENABLED=true
       - DEPLOYMENT_TYPE=docker-standalone-amd
-      - DOT_METRICS_ENABLED=true
     healthcheck:
       test:
         - CMD
@@ -211,7 +210,7 @@ services:
   # TODO: support otel-collector multiple replicas. Nginx/Traefik for loadbalancing?
   otel-collector:
     !!merge <<: *db-depend
-    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-v0.128.0}
+    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-v0.111.42}
     container_name: signoz-otel-collector
     command:
       - --config=/etc/otel-collector-config.yaml
@@ -237,7 +236,7 @@ services:
         condition: service_healthy
   schema-migrator-sync:
     !!merge <<: *common
-    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-v0.128.0}
+    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-v0.111.42}
     container_name: schema-migrator-sync
     command:
       - sync
@@ -248,7 +247,7 @@ services:
         condition: service_healthy
   schema-migrator-async:
     !!merge <<: *db-depend
-    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-v0.128.0}
+    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-v0.111.42}
     container_name: schema-migrator-async
     command:
       - async

deploy/docker/docker-compose.yaml

@@ -110,7 +110,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:${VERSION:-v0.89.0}
+    image: signoz/signoz:${VERSION:-v0.87.0}
     container_name: signoz
     command:
       - --config=/root/config/prometheus.yml
@@ -130,7 +130,6 @@ services:
       - GODEBUG=netdns=go
       - TELEMETRY_ENABLED=true
       - DEPLOYMENT_TYPE=docker-standalone-amd
-      - DOT_METRICS_ENABLED=true
     healthcheck:
       test:
         - CMD
@@ -143,7 +142,7 @@ services:
       retries: 3
   otel-collector:
     !!merge <<: *db-depend
-    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-v0.128.0}
+    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-v0.111.42}
     container_name: signoz-otel-collector
     command:
       - --config=/etc/otel-collector-config.yaml
@@ -165,7 +164,7 @@ services:
         condition: service_healthy
   schema-migrator-sync:
     !!merge <<: *common
-    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-v0.128.0}
+    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-v0.111.42}
     container_name: schema-migrator-sync
     command:
       - sync
@@ -177,7 +176,7 @@ services:
     restart: on-failure
   schema-migrator-async:
     !!merge <<: *db-depend
-    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-v0.128.0}
+    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-v0.111.42}
     container_name: schema-migrator-async
     command:
       - async

deploy/docker/otel-collector-config.yaml

@@ -26,7 +26,7 @@ processors:
     detectors: [env, system]
     timeout: 2s
   signozspanmetrics/delta:
-    metrics_exporter: signozclickhousemetrics
+    metrics_exporter: clickhousemetricswrite, signozclickhousemetrics
     metrics_flush_interval: 60s
     latency_histogram_buckets: [100us, 1ms, 2ms, 6ms, 10ms, 50ms, 100ms, 250ms, 500ms, 1000ms, 1400ms, 2000ms, 5s, 10s, 20s, 40s, 60s ]
     dimensions_cache_size: 100000
@@ -60,16 +60,27 @@ exporters:
     datasource: tcp://clickhouse:9000/signoz_traces
     low_cardinal_exception_grouping: ${env:LOW_CARDINAL_EXCEPTION_GROUPING}
     use_new_schema: true
+  clickhousemetricswrite:
+    endpoint: tcp://clickhouse:9000/signoz_metrics
+    disable_v2: true
+    resource_to_telemetry_conversion:
+      enabled: true
+  clickhousemetricswrite/prometheus:
+    endpoint: tcp://clickhouse:9000/signoz_metrics
+    disable_v2: true
   signozclickhousemetrics:
     dsn: tcp://clickhouse:9000/signoz_metrics
   clickhouselogsexporter:
     dsn: tcp://clickhouse:9000/signoz_logs
     timeout: 10s
     use_new_schema: true
+  # debug: {}
 service:
   telemetry:
     logs:
       encoding: json
+    metrics:
+      address: 0.0.0.0:8888
   extensions:
     - health_check
     - pprof
@@ -81,11 +92,11 @@ service:
     metrics:
       receivers: [otlp]
       processors: [batch]
-      exporters: [signozclickhousemetrics]
+      exporters: [clickhousemetricswrite, signozclickhousemetrics]
     metrics/prometheus:
       receivers: [prometheus]
       processors: [batch]
-      exporters: [signozclickhousemetrics]
+      exporters: [clickhousemetricswrite/prometheus, signozclickhousemetrics]
     logs:
       receivers: [otlp]
       processors: [batch]

docs/otel-demo-docs.md

@@ -16,7 +16,7 @@ __Table of Contents__
   - [Prerequisites](#prerequisites-1)
   - [Install Helm Repo and Charts](#install-helm-repo-and-charts)
   - [Start the OpenTelemetry Demo App](#start-the-opentelemetry-demo-app-1)
-  - [Monitor with SigNoz (Kubernetes)](#monitor-with-signoz-kubernetes)
+  - [Moniitor with SigNoz (Kubernetes)](#monitor-with-signoz-kubernetes)
 - [What's next](#whats-next)
 
 

ee/query-service/app/server.go

@@ -203,6 +203,17 @@ func NewServer(config signoz.Config, signoz *signoz.SigNoz, jwt *authtypes.JWT)
 		&opAmpModel.AllAgents, agentConfMgr, signoz.Instrumentation,
 	)
 
+	orgs, err := apiHandler.Signoz.Modules.OrgGetter.ListByOwnedKeyRange(context.Background())
+	if err != nil {
+		return nil, err
+	}
+	for _, org := range orgs {
+		errorList := reader.PreloadMetricsMetadata(context.Background(), org.ID)
+		for _, er := range errorList {
+			zap.L().Error("failed to preload metrics metadata", zap.Error(er))
+		}
+	}
+
 	return s, nil
 }
 

ee/query-service/main.go

@@ -9,7 +9,6 @@ import (
 	"github.com/SigNoz/signoz/ee/licensing"
 	"github.com/SigNoz/signoz/ee/licensing/httplicensing"
 	"github.com/SigNoz/signoz/ee/query-service/app"
-	"github.com/SigNoz/signoz/ee/sqlschema/postgressqlschema"
 	"github.com/SigNoz/signoz/ee/sqlstore/postgressqlstore"
 	"github.com/SigNoz/signoz/ee/zeus"
 	"github.com/SigNoz/signoz/ee/zeus/httpzeus"
@@ -22,7 +21,6 @@ import (
 	"github.com/SigNoz/signoz/pkg/modules/organization"
 	baseconst "github.com/SigNoz/signoz/pkg/query-service/constants"
 	"github.com/SigNoz/signoz/pkg/signoz"
-	"github.com/SigNoz/signoz/pkg/sqlschema"
 	"github.com/SigNoz/signoz/pkg/sqlstore"
 	"github.com/SigNoz/signoz/pkg/sqlstore/sqlstorehook"
 	"github.com/SigNoz/signoz/pkg/types/authtypes"
@@ -147,14 +145,6 @@ func main() {
 		signoz.NewEmailingProviderFactories(),
 		signoz.NewCacheProviderFactories(),
 		signoz.NewWebProviderFactories(),
-		func(sqlstore sqlstore.SQLStore) factory.NamedMap[factory.ProviderFactory[sqlschema.SQLSchema, sqlschema.Config]] {
-			existingFactories := signoz.NewSQLSchemaProviderFactories(sqlstore)
-			if err := existingFactories.Add(postgressqlschema.NewFactory(sqlstore)); err != nil {
-				zap.L().Fatal("Failed to add postgressqlschema factory", zap.Error(err))
-			}
-
-			return existingFactories
-		},
 		sqlStoreFactories,
 		signoz.NewTelemetryStoreProviderFactories(),
 	)

ee/sqlschema/postgressqlschema/formatter.go

@@ -1,36 +0,0 @@
-package postgressqlschema
-
-import (
-	"strings"
-
-	"github.com/SigNoz/signoz/pkg/sqlschema"
-)
-
-type Formatter struct {
-	sqlschema.Formatter
-}
-
-func (formatter Formatter) SQLDataTypeOf(dataType sqlschema.DataType) string {
-	if dataType == sqlschema.DataTypeTimestamp {
-		return "TIMESTAMPTZ"
-	}
-
-	return strings.ToUpper(dataType.String())
-}
-
-func (formatter Formatter) DataTypeOf(dataType string) sqlschema.DataType {
-	switch strings.ToUpper(dataType) {
-	case "TIMESTAMPTZ", "TIMESTAMP", "TIMESTAMP WITHOUT TIME ZONE", "TIMESTAMP WITH TIME ZONE":
-		return sqlschema.DataTypeTimestamp
-	case "INT8":
-		return sqlschema.DataTypeBigInt
-	case "INT2", "INT4", "SMALLINT", "INTEGER":
-		return sqlschema.DataTypeInteger
-	case "BOOL", "BOOLEAN":
-		return sqlschema.DataTypeBoolean
-	case "VARCHAR", "CHARACTER VARYING", "CHARACTER":
-		return sqlschema.DataTypeText
-	}
-
-	return formatter.Formatter.DataTypeOf(dataType)
-}

ee/sqlschema/postgressqlschema/provider.go

@@ -1,285 +0,0 @@
-package postgressqlschema
-
-import (
-	"context"
-
-	"github.com/SigNoz/signoz/pkg/factory"
-	"github.com/SigNoz/signoz/pkg/sqlschema"
-	"github.com/SigNoz/signoz/pkg/sqlstore"
-	"github.com/uptrace/bun"
-)
-
-type provider struct {
-	settings factory.ScopedProviderSettings
-	fmter    sqlschema.SQLFormatter
-	sqlstore sqlstore.SQLStore
-	operator sqlschema.SQLOperator
-}
-
-func NewFactory(sqlstore sqlstore.SQLStore) factory.ProviderFactory[sqlschema.SQLSchema, sqlschema.Config] {
-	return factory.NewProviderFactory(factory.MustNewName("postgres"), func(ctx context.Context, providerSettings factory.ProviderSettings, config sqlschema.Config) (sqlschema.SQLSchema, error) {
-		return New(ctx, providerSettings, config, sqlstore)
-	})
-}
-
-func New(ctx context.Context, providerSettings factory.ProviderSettings, config sqlschema.Config, sqlstore sqlstore.SQLStore) (sqlschema.SQLSchema, error) {
-	settings := factory.NewScopedProviderSettings(providerSettings, "github.com/SigNoz/signoz/pkg/sqlschema/postgressqlschema")
-	fmter := Formatter{Formatter: sqlschema.NewFormatter(sqlstore.BunDB().Dialect())}
-
-	return &provider{
-		sqlstore: sqlstore,
-		fmter:    fmter,
-		settings: settings,
-		operator: sqlschema.NewOperator(fmter, sqlschema.OperatorSupport{
-			DropConstraint:          true,
-			ColumnIfNotExistsExists: true,
-			AlterColumnSetNotNull:   true,
-		}),
-	}, nil
-}
-
-func (provider *provider) Formatter() sqlschema.SQLFormatter {
-	return provider.fmter
-}
-
-func (provider *provider) Operator() sqlschema.SQLOperator {
-	return provider.operator
-}
-
-func (provider *provider) GetTable(ctx context.Context, tableName sqlschema.TableName) (*sqlschema.Table, []*sqlschema.UniqueConstraint, error) {
-	rows, err := provider.
-		sqlstore.
-		BunDB().
-		QueryContext(ctx, `
-SELECT 
-    c.column_name, 
-	c.is_nullable = 'YES', 
-	c.udt_name, 
-	c.column_default 
-FROM 
-    information_schema.columns AS c
-WHERE
-    c.table_name = ?`, string(tableName))
-	if err != nil {
-		return nil, nil, err
-	}
-
-	defer func() {
-		if err := rows.Close(); err != nil {
-			provider.settings.Logger().ErrorContext(ctx, "error closing rows", "error", err)
-		}
-	}()
-
-	columns := make([]*sqlschema.Column, 0)
-	for rows.Next() {
-		var (
-			name        string
-			sqlDataType string
-			nullable    bool
-			defaultVal  *string
-		)
-		if err := rows.Scan(&name, &nullable, &sqlDataType, &defaultVal); err != nil {
-			return nil, nil, err
-		}
-
-		columnDefault := ""
-		if defaultVal != nil {
-			columnDefault = *defaultVal
-		}
-
-		columns = append(columns, &sqlschema.Column{
-			Name:     sqlschema.ColumnName(name),
-			Nullable: nullable,
-			DataType: provider.fmter.DataTypeOf(sqlDataType),
-			Default:  columnDefault,
-		})
-	}
-
-	constraintsRows, err := provider.
-		sqlstore.
-		BunDB().
-		QueryContext(ctx, `
-SELECT 
-    c.column_name, 
-	constraint_name, 
-	constraint_type 
-FROM 
-    information_schema.table_constraints tc
-	JOIN information_schema.constraint_column_usage AS ccu USING (constraint_schema, constraint_catalog, table_name, constraint_name) 
-	JOIN information_schema.columns AS c ON c.table_schema = tc.constraint_schema AND tc.table_name = c.table_name AND ccu.column_name = c.column_name 
-WHERE
-    c.table_name = ?`, string(tableName))
-	if err != nil {
-		return nil, nil, err
-	}
-
-	defer func() {
-		if err := constraintsRows.Close(); err != nil {
-			provider.settings.Logger().ErrorContext(ctx, "error closing rows", "error", err)
-		}
-	}()
-
-	var primaryKeyConstraint *sqlschema.PrimaryKeyConstraint
-	uniqueConstraintsMap := make(map[string]*sqlschema.UniqueConstraint)
-	for constraintsRows.Next() {
-		var (
-			name           string
-			constraintName string
-			constraintType string
-		)
-
-		if err := constraintsRows.Scan(&name, &constraintName, &constraintType); err != nil {
-			return nil, nil, err
-		}
-
-		if constraintType == "PRIMARY KEY" {
-			if primaryKeyConstraint == nil {
-				primaryKeyConstraint = (&sqlschema.PrimaryKeyConstraint{
-					ColumnNames: []sqlschema.ColumnName{sqlschema.ColumnName(name)},
-				}).Named(constraintName).(*sqlschema.PrimaryKeyConstraint)
-			} else {
-				primaryKeyConstraint.ColumnNames = append(primaryKeyConstraint.ColumnNames, sqlschema.ColumnName(name))
-			}
-		}
-
-		if constraintType == "UNIQUE" {
-			if _, ok := uniqueConstraintsMap[constraintName]; !ok {
-				uniqueConstraintsMap[constraintName] = (&sqlschema.UniqueConstraint{
-					ColumnNames: []sqlschema.ColumnName{sqlschema.ColumnName(name)},
-				}).Named(constraintName).(*sqlschema.UniqueConstraint)
-			} else {
-				uniqueConstraintsMap[constraintName].ColumnNames = append(uniqueConstraintsMap[constraintName].ColumnNames, sqlschema.ColumnName(name))
-			}
-		}
-	}
-
-	foreignKeyConstraintsRows, err := provider.
-		sqlstore.
-		BunDB().
-		QueryContext(ctx, `
-SELECT 
-    tc.constraint_name, 
-	kcu.table_name AS referencing_table, 
-	kcu.column_name AS referencing_column, 
-	ccu.table_name AS referenced_table, 
-	ccu.column_name AS referenced_column 
-FROM
-    information_schema.key_column_usage kcu 
-    JOIN information_schema.table_constraints tc ON kcu.constraint_name = tc.constraint_name AND kcu.table_schema = tc.table_schema 
-    JOIN information_schema.constraint_column_usage ccu ON ccu.constraint_name = tc.constraint_name AND ccu.table_schema = tc.table_schema
-WHERE 
-    tc.constraint_type = ?
-	AND kcu.table_name = ?`, "FOREIGN KEY", string(tableName))
-	if err != nil {
-		return nil, nil, err
-	}
-
-	defer func() {
-		if err := foreignKeyConstraintsRows.Close(); err != nil {
-			provider.settings.Logger().ErrorContext(ctx, "error closing rows", "error", err)
-		}
-	}()
-
-	foreignKeyConstraints := make([]*sqlschema.ForeignKeyConstraint, 0)
-	for foreignKeyConstraintsRows.Next() {
-		var (
-			constraintName    string
-			referencingTable  string
-			referencingColumn string
-			referencedTable   string
-			referencedColumn  string
-		)
-
-		if err := foreignKeyConstraintsRows.Scan(&constraintName, &referencingTable, &referencingColumn, &referencedTable, &referencedColumn); err != nil {
-			return nil, nil, err
-		}
-
-		foreignKeyConstraints = append(foreignKeyConstraints, (&sqlschema.ForeignKeyConstraint{
-			ReferencingColumnName: sqlschema.ColumnName(referencingColumn),
-			ReferencedTableName:   sqlschema.TableName(referencedTable),
-			ReferencedColumnName:  sqlschema.ColumnName(referencedColumn),
-		}).Named(constraintName).(*sqlschema.ForeignKeyConstraint))
-	}
-
-	uniqueConstraints := make([]*sqlschema.UniqueConstraint, 0)
-	for _, uniqueConstraint := range uniqueConstraintsMap {
-		uniqueConstraints = append(uniqueConstraints, uniqueConstraint)
-	}
-
-	return &sqlschema.Table{
-		Name:                  tableName,
-		Columns:               columns,
-		PrimaryKeyConstraint:  primaryKeyConstraint,
-		ForeignKeyConstraints: foreignKeyConstraints,
-	}, uniqueConstraints, nil
-}
-
-func (provider *provider) GetIndices(ctx context.Context, name sqlschema.TableName) ([]sqlschema.Index, error) {
-	rows, err := provider.
-		sqlstore.
-		BunDB().
-		QueryContext(ctx, `
-SELECT
-    ct.relname AS table_name,
-    ci.relname AS index_name,
-    i.indisunique AS unique,
-    i.indisprimary AS primary,
-    a.attname AS column_name
-FROM
-    pg_index i
-    LEFT JOIN pg_class ct ON ct.oid = i.indrelid
-    LEFT JOIN pg_class ci ON ci.oid = i.indexrelid
-    LEFT JOIN pg_attribute a ON a.attrelid = ct.oid
-    LEFT JOIN pg_constraint con ON con.conindid = i.indexrelid
-WHERE
-    a.attnum = ANY(i.indkey)
-    AND con.oid IS NULL
-    AND ct.relkind = 'r'
-    AND ct.relname = ?`, string(name))
-	if err != nil {
-		return nil, err
-	}
-
-	defer func() {
-		if err := rows.Close(); err != nil {
-			provider.settings.Logger().ErrorContext(ctx, "error closing rows", "error", err)
-		}
-	}()
-
-	uniqueIndicesMap := make(map[string]*sqlschema.UniqueIndex)
-	for rows.Next() {
-		var (
-			tableName  string
-			indexName  string
-			unique     bool
-			primary    bool
-			columnName string
-		)
-
-		if err := rows.Scan(&tableName, &indexName, &unique, &primary, &columnName); err != nil {
-			return nil, err
-		}
-
-		if unique {
-			if _, ok := uniqueIndicesMap[indexName]; !ok {
-				uniqueIndicesMap[indexName] = &sqlschema.UniqueIndex{
-					TableName:   name,
-					ColumnNames: []sqlschema.ColumnName{sqlschema.ColumnName(columnName)},
-				}
-			} else {
-				uniqueIndicesMap[indexName].ColumnNames = append(uniqueIndicesMap[indexName].ColumnNames, sqlschema.ColumnName(columnName))
-			}
-		}
-	}
-
-	indices := make([]sqlschema.Index, 0)
-	for _, index := range uniqueIndicesMap {
-		indices = append(indices, index)
-	}
-
-	return indices, nil
-}
-
-func (provider *provider) ToggleFKEnforcement(_ context.Context, _ bun.IDB, _ bool) error {
-	return nil
-}

frontend/.eslintrc.js

@@ -1,4 +1,5 @@
 module.exports = {
+	ignorePatterns: ['src/parser/*.ts'],
 	env: {
 		browser: true,
 		es2021: true,

frontend/docs/QuerySearch.md

@@ -0,0 +1,154 @@
+# QuerySearch Component Documentation
+
+## Overview
+The QuerySearch component is a sophisticated query builder interface that allows users to construct complex search queries with real-time validation and autocomplete functionality.
+
+## Dependencies
+```typescript
+// Core UI
+import { Card, Collapse, Space, Tag, Typography } from 'antd';
+
+// Code Editor
+import {
+    autocompletion,
+    CompletionContext,
+    CompletionResult,
+    startCompletion,
+} from '@codemirror/autocomplete';
+import { javascript } from '@codemirror/lang-javascript';
+import { ViewPlugin, ViewUpdate } from '@codemirror/view';
+import { copilot } from '@uiw/codemirror-theme-copilot';
+import CodeMirror, { EditorView, Extension } from '@uiw/react-codemirror';
+
+// Custom Hooks and Utilities
+import { useGetQueryKeySuggestions } from 'hooks/querySuggestions/useGetQueryKeySuggestions';
+import { getValueSuggestions } from 'api/querySuggestions/getValueSuggestion';
+import { queryOperatorSuggestions, validateQuery } from 'utils/antlrQueryUtils';
+import { getQueryContextAtCursor } from 'utils/queryContextUtils';
+```
+
+## Key Features
+1. Real-time query validation
+2. Context-aware autocompletion
+3. Support for various query operators (=, !=, IN, LIKE, etc.)
+4. Support for complex conditions with AND/OR operators
+5. Support for functions (HAS, HASANY, HASALL)
+6. Support for parentheses and nested conditions
+7. Query examples for common use cases
+
+## State Management
+```typescript
+const [query, setQuery] = useState<string>('');
+const [valueSuggestions, setValueSuggestions] = useState<any[]>([]);
+const [activeKey, setActiveKey] = useState<string>('');
+const [isLoadingSuggestions, setIsLoadingSuggestions] = useState(false);
+const [queryContext, setQueryContext] = useState<IQueryContext | null>(null);
+const [validation, setValidation] = useState<IValidationResult>({...});
+const [editingMode, setEditingMode] = useState<'key' | 'operator' | 'value' | 'conjunction' | 'function' | 'parenthesis' | 'bracketList' | null>(null);
+```
+
+## Core Functions
+
+### 1. Autocomplete Handler
+```typescript
+function myCompletions(context: CompletionContext): CompletionResult | null {
+    // Handles autocomplete suggestions based on context
+    // Supports different contexts: key, operator, value, function, etc.
+}
+```
+
+### 2. Value Suggestions Fetcher
+```typescript
+const fetchValueSuggestions = useCallback(
+    async (key: string): Promise<void> => {
+        // Fetches value suggestions for a given key
+        // Handles loading states and error cases
+    },
+    [activeKey, isLoadingSuggestions],
+);
+```
+
+### 3. Query Change Handler
+```typescript
+const handleQueryChange = useCallback(async (newQuery: string) => {
+    // Updates query and validates it
+    // Handles validation errors
+}, []);
+```
+
+## Query Context Types
+1. Key context: When editing a field name
+2. Operator context: When selecting an operator
+3. Value context: When entering a value
+4. Conjunction context: When using AND/OR
+5. Function context: When using functions
+6. Parenthesis context: When using parentheses
+7. Bracket list context: When using IN operator
+
+## Example Queries
+```typescript
+const queryExamples = [
+    { label: 'Basic Query', query: "status = 'error'" },
+    { label: 'Multiple Conditions', query: "status = 'error' AND service = 'frontend'" },
+    { label: 'IN Operator', query: "status IN ['error', 'warning']" },
+    { label: 'Function Usage', query: "HAS(service, 'frontend')" },
+    { label: 'Numeric Comparison', query: 'duration > 1000' },
+    // ... more examples
+];
+```
+
+## Performance Optimizations
+1. Uses `useCallback` for memoized functions
+2. Tracks component mount state to prevent updates after unmount
+3. Debounces suggestion fetching
+4. Caches key suggestions
+
+## Error Handling
+```typescript
+try {
+    const validationResponse = validateQuery(newQuery);
+    setValidation(validationResponse);
+} catch (error) {
+    setValidation({
+        isValid: false,
+        message: 'Failed to process query',
+        errors: [error as IDetailedError],
+    });
+}
+```
+
+## Usage Example
+```typescript
+<QuerySearch />
+```
+
+## Styling
+- Uses SCSS for styling
+- Custom classes for different components
+- Theme integration with CodeMirror
+
+## Best Practices
+1. Always validate queries before submission
+2. Handle loading states appropriately
+3. Provide clear error messages
+4. Use appropriate operators for different data types
+5. Consider performance implications of complex queries
+
+## Common Issues and Solutions
+1. Query validation errors
+   - Check syntax and operator usage
+   - Verify data types match operator requirements
+2. Performance issues
+   - Optimize suggestion fetching
+   - Cache frequently used values
+3. UI/UX issues
+   - Ensure clear error messages
+   - Provide helpful suggestions
+   - Show appropriate loading states
+
+## Future Improvements
+1. Add more query examples
+2. Enhance error messages
+3. Improve performance for large datasets
+4. Add more operator support
+5. Enhance UI/UX features 

frontend/package.json

@@ -28,6 +28,8 @@
 	"dependencies": {
 		"@ant-design/colors": "6.0.0",
 		"@ant-design/icons": "4.8.0",
+		"@codemirror/autocomplete": "6.18.6",
+		"@codemirror/lang-javascript": "6.2.3",
 		"@dnd-kit/core": "6.1.0",
 		"@dnd-kit/modifiers": "7.0.0",
 		"@dnd-kit/sortable": "8.0.0",
@@ -43,6 +45,8 @@
 		"@signozhq/design-tokens": "1.1.4",
 		"@tanstack/react-table": "8.20.6",
 		"@tanstack/react-virtual": "3.11.2",
+		"@uiw/codemirror-theme-copilot": "4.23.11",
+		"@uiw/react-codemirror": "4.23.10",
 		"@uiw/react-md-editor": "3.23.5",
 		"@visx/group": "3.3.0",
 		"@visx/hierarchy": "3.12.0",
@@ -53,6 +57,7 @@
 		"antd": "5.11.0",
 		"antd-table-saveas-excel": "2.2.1",
 		"axios": "1.8.2",
+		"antlr4": "4.13.2",
 		"babel-eslint": "^10.1.0",
 		"babel-jest": "^29.6.4",
 		"babel-loader": "9.1.3",
@@ -213,9 +218,7 @@
 		"eslint-plugin-simple-import-sort": "^7.0.0",
 		"eslint-plugin-sonarjs": "^0.12.0",
 		"husky": "^7.0.4",
-		"image-minimizer-webpack-plugin": "^4.0.0",
-		"imagemin": "^8.0.1",
-		"imagemin-svgo": "^10.0.1",
+		"image-webpack-loader": "8.1.0",
 		"is-ci": "^3.0.1",
 		"jest-styled-components": "^7.0.8",
 		"lint-staged": "^12.5.0",
@@ -232,7 +235,6 @@
 		"redux-mock-store": "1.5.4",
 		"sass": "1.66.1",
 		"sass-loader": "13.3.2",
-		"sharp": "^0.33.4",
 		"ts-jest": "^27.1.5",
 		"ts-node": "^10.2.1",
 		"typescript-plugin-css-modules": "5.0.1",
@@ -257,7 +259,6 @@
 		"cross-spawn": "7.0.5",
 		"cookie": "^0.7.1",
 		"serialize-javascript": "6.0.2",
-		"prismjs": "1.30.0",
-		"got": "11.8.5"
+		"prismjs": "1.30.0"
 	}
 }

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

@@ -14,8 +14,8 @@
 	"remove_label_confirm": "This action will remove all the labels. Do you want to proceed?",
 	"remove_label_success": "Labels cleared",
 	"alert_form_step1": "Step 1 - Define the metric",
-	"alert_form_step2": "Step {{step}} - Define Alert Conditions",
-	"alert_form_step3": "Step {{step}} - Alert Configuration",
+	"alert_form_step2": "Step 2 - Define Alert Conditions",
+	"alert_form_step3": "Step 3 - Alert Configuration",
 	"metric_query_max_limit": "Can not create query. You can create maximum of 5 queries",
 	"confirm_save_title": "Save Changes",
 	"confirm_save_content_part1": "Your alert built with",

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

@@ -7,8 +7,8 @@
 	"remove_label_confirm": "This action will remove all the labels. Do you want to proceed?",
 	"remove_label_success": "Labels cleared",
 	"alert_form_step1": "Step 1 - Define the metric",
-	"alert_form_step2": "Step {{step}} - Define Alert Conditions",
-	"alert_form_step3": "Step {{step}} - Alert Configuration",
+	"alert_form_step2": "Step 2 - Define Alert Conditions",
+	"alert_form_step3": "Step 3 - Alert Configuration",
 	"metric_query_max_limit": "Can not create query. You can create maximum of 5 queries",
 	"confirm_save_title": "Save Changes",
 	"confirm_save_content_part1": "Your alert built with",

frontend/public/locales/en/rules.json

@@ -7,8 +7,8 @@
 	"remove_label_confirm": "This action will remove all the labels. Do you want to proceed?",
 	"remove_label_success": "Labels cleared",
 	"alert_form_step1": "Step 1 - Define the metric",
-	"alert_form_step2": "Step {{step}} - Define Alert Conditions",
-	"alert_form_step3": "Step {{step}} - Alert Configuration",
+	"alert_form_step2": "Step 2 - Define Alert Conditions",
+	"alert_form_step3": "Step 3 - Alert Configuration",
 	"metric_query_max_limit": "Can not create query. You can create maximum of 5 queries",
 	"confirm_save_title": "Save Changes",
 	"confirm_save_content_part1": "Your alert built with",

frontend/src/AppRoutes/index.tsx

@@ -191,8 +191,7 @@ function App(): JSX.Element {
 				// if the user is on basic plan then remove billing
 				if (isOnBasicPlan) {
 					updatedRoutes = updatedRoutes.filter(
-						(route) =>
-							route?.path !== ROUTES.BILLING && route?.path !== ROUTES.INTEGRATIONS,
+						(route) => route?.path !== ROUTES.BILLING,
 					);
 				}
 
@@ -205,8 +204,7 @@ function App(): JSX.Element {
 			} else {
 				// if not a cloud user then remove billing and add list licenses route
 				updatedRoutes = updatedRoutes.filter(
-					(route) =>
-						route?.path !== ROUTES.BILLING && route?.path !== ROUTES.INTEGRATIONS,
+					(route) => route?.path !== ROUTES.BILLING,
 				);
 				updatedRoutes = [...updatedRoutes, LIST_LICENSES];
 			}

frontend/src/api/apiV1.ts

@@ -3,6 +3,7 @@ const apiV1 = '/api/v1/';
 export const apiV2 = '/api/v2/';
 export const apiV3 = '/api/v3/';
 export const apiV4 = '/api/v4/';
+export const apiV5 = '/api/v5/';
 export const gatewayApiV1 = '/api/gateway/v1/';
 export const gatewayApiV2 = '/api/gateway/v2/';
 export const apiAlertManager = '/api/alertmanager/';

frontend/src/api/index.ts

@@ -19,6 +19,7 @@ import apiV1, {
 	apiV2,
 	apiV3,
 	apiV4,
+	apiV5,
 	gatewayApiV1,
 	gatewayApiV2,
 } from './apiV1';
@@ -171,6 +172,18 @@ ApiV4Instance.interceptors.response.use(
 ApiV4Instance.interceptors.request.use(interceptorsRequestResponse);
 //
 
+// axios V5
+export const ApiV5Instance = axios.create({
+	baseURL: `${ENVIRONMENT.baseURL}${apiV5}`,
+});
+
+ApiV5Instance.interceptors.response.use(
+	interceptorsResponse,
+	interceptorRejected,
+);
+ApiV5Instance.interceptors.request.use(interceptorsRequestResponse);
+//
+
 // axios Base
 export const ApiBaseInstance = axios.create({
 	baseURL: `${ENVIRONMENT.baseURL}${apiV1}`,

frontend/src/api/querySuggestions/getKeySuggestions.ts

@@ -0,0 +1,17 @@
+import axios from 'api';
+import { AxiosResponse } from 'axios';
+import {
+	QueryKeyRequestProps,
+	QueryKeySuggestionsResponseProps,
+} from 'types/api/querySuggestions/types';
+
+export const getKeySuggestions = (
+	props: QueryKeyRequestProps,
+): Promise<AxiosResponse<QueryKeySuggestionsResponseProps>> =>
+	axios.get(
+		`/fields/keys?signal=${props.signal}&searchText=${
+			props.searchText
+		}&metricName=${props.metricName ?? ''}&fieldContext=${
+			props.fieldContext ?? ''
+		}&fieldDataType=${props.fieldDataType ?? ''}`,
+	);

frontend/src/api/querySuggestions/getValueSuggestion.ts

@@ -0,0 +1,11 @@
+import axios from 'api';
+import { AxiosResponse } from 'axios';
+import {
+	QueryKeyValueRequestProps,
+	QueryKeyValueSuggestionsResponseProps,
+} from 'types/api/querySuggestions/types';
+
+export const getValueSuggestions = (
+	props: QueryKeyValueRequestProps,
+): Promise<AxiosResponse<QueryKeyValueSuggestionsResponseProps>> =>
+	axios.get(`/fields/values?signal=${props.signal}&name=${props.key}`);

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

@@ -0,0 +1,168 @@
+// V5 Query Range Constants
+
+import { ENTITY_VERSION_V5 } from 'constants/app';
+import {
+	FunctionName,
+	RequestType,
+	SignalType,
+	Step,
+} from 'types/api/v5/queryRange';
+
+// ===================== Schema and Version Constants =====================
+
+export const SCHEMA_VERSION_V5 = ENTITY_VERSION_V5;
+export const API_VERSION_V5 = 'v5';
+
+// ===================== Default Values =====================
+
+export const DEFAULT_STEP_INTERVAL: Step = '60s';
+export const DEFAULT_LIMIT = 100;
+export const DEFAULT_OFFSET = 0;
+
+// ===================== Request Type Constants =====================
+
+export const REQUEST_TYPES: Record<string, RequestType> = {
+	SCALAR: 'scalar',
+	TIME_SERIES: 'time_series',
+	RAW: 'raw',
+	DISTRIBUTION: 'distribution',
+} as const;
+
+// ===================== Signal Type Constants =====================
+
+export const SIGNAL_TYPES: Record<string, SignalType> = {
+	TRACES: 'traces',
+	LOGS: 'logs',
+	METRICS: 'metrics',
+} as const;
+
+// ===================== Common Aggregation Expressions =====================
+
+export const TRACE_AGGREGATIONS = {
+	COUNT: 'count()',
+	COUNT_DISTINCT_TRACE_ID: 'count_distinct(traceID)',
+	AVG_DURATION: 'avg(duration_nano)',
+	P50_DURATION: 'p50(duration_nano)',
+	P95_DURATION: 'p95(duration_nano)',
+	P99_DURATION: 'p99(duration_nano)',
+	MAX_DURATION: 'max(duration_nano)',
+	MIN_DURATION: 'min(duration_nano)',
+	SUM_DURATION: 'sum(duration_nano)',
+} as const;
+
+export const LOG_AGGREGATIONS = {
+	COUNT: 'count()',
+	COUNT_DISTINCT_HOST: 'count_distinct(host.name)',
+	COUNT_DISTINCT_SERVICE: 'count_distinct(service.name)',
+	COUNT_DISTINCT_CONTAINER: 'count_distinct(container.name)',
+} as const;
+
+// ===================== Common Filter Expressions =====================
+
+export const COMMON_FILTERS = {
+	// Trace filters
+	SERVER_SPANS: "kind_string = 'Server'",
+	CLIENT_SPANS: "kind_string = 'Client'",
+	INTERNAL_SPANS: "kind_string = 'Internal'",
+	ERROR_SPANS: 'http.status_code >= 400',
+	SUCCESS_SPANS: 'http.status_code < 400',
+
+	// Common service filters
+	EXCLUDE_HEALTH_CHECKS: "http.route != '/health' AND http.route != '/ping'",
+	HTTP_REQUESTS: "http.method != ''",
+
+	// Log filters
+	ERROR_LOGS: "severity_text = 'ERROR'",
+	WARN_LOGS: "severity_text = 'WARN'",
+	INFO_LOGS: "severity_text = 'INFO'",
+	DEBUG_LOGS: "severity_text = 'DEBUG'",
+} as const;
+
+// ===================== Common Group By Fields =====================
+
+export const COMMON_GROUP_BY_FIELDS = {
+	SERVICE_NAME: {
+		name: 'service.name',
+		fieldDataType: 'string' as const,
+		fieldContext: 'resource' as const,
+	},
+	HTTP_METHOD: {
+		name: 'http.method',
+		fieldDataType: 'string' as const,
+		fieldContext: 'attribute' as const,
+	},
+	HTTP_ROUTE: {
+		name: 'http.route',
+		fieldDataType: 'string' as const,
+		fieldContext: 'attribute' as const,
+	},
+	HTTP_STATUS_CODE: {
+		name: 'http.status_code',
+		fieldDataType: 'int64' as const,
+		fieldContext: 'attribute' as const,
+	},
+	HOST_NAME: {
+		name: 'host.name',
+		fieldDataType: 'string' as const,
+		fieldContext: 'resource' as const,
+	},
+	CONTAINER_NAME: {
+		name: 'container.name',
+		fieldDataType: 'string' as const,
+		fieldContext: 'resource' as const,
+	},
+} as const;
+
+// ===================== Function Names =====================
+
+export const FUNCTION_NAMES: Record<string, FunctionName> = {
+	CUT_OFF_MIN: 'cutOffMin',
+	CUT_OFF_MAX: 'cutOffMax',
+	CLAMP_MIN: 'clampMin',
+	CLAMP_MAX: 'clampMax',
+	ABSOLUTE: 'absolute',
+	RUNNING_DIFF: 'runningDiff',
+	LOG2: 'log2',
+	LOG10: 'log10',
+	CUM_SUM: 'cumSum',
+	EWMA3: 'ewma3',
+	EWMA5: 'ewma5',
+	EWMA7: 'ewma7',
+	MEDIAN3: 'median3',
+	MEDIAN5: 'median5',
+	MEDIAN7: 'median7',
+	TIME_SHIFT: 'timeShift',
+	ANOMALY: 'anomaly',
+} as const;
+
+// ===================== Common Step Intervals =====================
+
+export const STEP_INTERVALS = {
+	FIFTEEN_SECONDS: '15s',
+	THIRTY_SECONDS: '30s',
+	ONE_MINUTE: '60s',
+	FIVE_MINUTES: '300s',
+	TEN_MINUTES: '600s',
+	FIFTEEN_MINUTES: '900s',
+	THIRTY_MINUTES: '1800s',
+	ONE_HOUR: '3600s',
+	TWO_HOURS: '7200s',
+	SIX_HOURS: '21600s',
+	TWELVE_HOURS: '43200s',
+	ONE_DAY: '86400s',
+} as const;
+
+// ===================== Time Range Presets =====================
+
+export const TIME_RANGE_PRESETS = {
+	LAST_5_MINUTES: 5 * 60 * 1000,
+	LAST_15_MINUTES: 15 * 60 * 1000,
+	LAST_30_MINUTES: 30 * 60 * 1000,
+	LAST_HOUR: 60 * 60 * 1000,
+	LAST_3_HOURS: 3 * 60 * 60 * 1000,
+	LAST_6_HOURS: 6 * 60 * 60 * 1000,
+	LAST_12_HOURS: 12 * 60 * 60 * 1000,
+	LAST_24_HOURS: 24 * 60 * 60 * 1000,
+	LAST_3_DAYS: 3 * 24 * 60 * 60 * 1000,
+	LAST_7_DAYS: 7 * 24 * 60 * 60 * 1000,
+} as const;

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

@@ -0,0 +1,239 @@
+import { isEmpty } from 'lodash-es';
+import { SuccessResponse } from 'types/api';
+import { MetricRangePayloadV3 } from 'types/api/metrics/getQueryRange';
+import {
+	DistributionData,
+	MetricRangePayloadV5,
+	RawData,
+	ScalarData,
+	TimeSeriesData,
+} from 'types/api/v5/queryRange';
+import { QueryDataV3 } from 'types/api/widgets/getQuery';
+
+/**
+ * Converts V5 TimeSeriesData to legacy format
+ */
+function convertTimeSeriesData(
+	timeSeriesData: TimeSeriesData,
+	legendMap: Record<string, string>,
+): QueryDataV3 {
+	// Convert V5 time series format to legacy QueryDataV3 format
+	return {
+		queryName: timeSeriesData.queryName,
+		legend: legendMap[timeSeriesData.queryName] || timeSeriesData.queryName,
+		series: timeSeriesData?.aggregations?.flatMap((aggregation) =>
+			aggregation.series.map((series) => ({
+				labels: series.labels
+					? Object.fromEntries(
+							series.labels.map((label) => [label.key.name, label.value]),
+					  )
+					: {},
+				labelsArray: series.labels
+					? series.labels.map((label) => ({ [label.key.name]: label.value }))
+					: [],
+				values: series.values.map((value) => ({
+					timestamp: value.timestamp,
+					value: String(value.value),
+				})),
+			})),
+		),
+		list: null,
+	};
+}
+
+/**
+ * Converts V5 ScalarData array to legacy format with table structure
+ */
+function convertScalarDataArrayToTable(
+	scalarDataArray: ScalarData[],
+	legendMap: Record<string, string>,
+): QueryDataV3[] {
+	// If no scalar data, return empty structure
+
+	if (!scalarDataArray || scalarDataArray.length === 0) {
+		return [];
+	}
+
+	// Process each scalar data separately to maintain query separation
+	return scalarDataArray?.map((scalarData) => {
+		// Get query name from the first column
+		const queryName = scalarData?.columns?.[0]?.queryName || '';
+
+		// Collect columns for this specific query
+		const columns = scalarData?.columns?.map((col) => ({
+			name: col.columnType === 'aggregation' ? col.queryName : col.name,
+			queryName: col.queryName,
+			isValueColumn: col.columnType === 'aggregation',
+		}));
+
+		// Process rows for this specific query
+		const rows = scalarData?.data?.map((dataRow) => {
+			const rowData: Record<string, any> = {};
+
+			scalarData?.columns?.forEach((col, colIndex) => {
+				const columnName =
+					col.columnType === 'aggregation' ? col.queryName : col.name;
+				rowData[columnName] = dataRow[colIndex];
+			});
+
+			return { data: rowData };
+		});
+
+		return {
+			queryName,
+			legend: legendMap[queryName] || '',
+			series: null,
+			list: null,
+			table: {
+				columns,
+				rows,
+			},
+		};
+	});
+}
+
+/**
+ * Converts V5 RawData to legacy format
+ */
+function convertRawData(
+	rawData: RawData,
+	legendMap: Record<string, string>,
+): QueryDataV3 {
+	// Convert V5 raw format to legacy QueryDataV3 format
+	return {
+		queryName: rawData.queryName,
+		legend: legendMap[rawData.queryName] || rawData.queryName,
+		series: null,
+		list: rawData.rows?.map((row) => ({
+			timestamp: row.timestamp,
+			data: {
+				// Map raw data to ILog structure - spread row.data first to include all properties
+				...row.data,
+				date: row.timestamp,
+			} as any,
+		})),
+	};
+}
+
+/**
+ * Converts V5 DistributionData to legacy format
+ */
+function convertDistributionData(
+	distributionData: DistributionData,
+	legendMap: Record<string, string>,
+): any {
+	// eslint-disable-line @typescript-eslint/no-explicit-any
+	// Convert V5 distribution format to legacy histogram format
+	return {
+		...distributionData,
+		legendMap,
+	};
+}
+
+/**
+ * Helper function to convert V5 data based on type
+ */
+function convertV5DataByType(
+	v5Data: any,
+	legendMap: Record<string, string>,
+): MetricRangePayloadV3['data'] {
+	switch (v5Data?.type) {
+		case 'time_series': {
+			const timeSeriesData = v5Data.data.results as TimeSeriesData[];
+			return {
+				resultType: 'time_series',
+				result: timeSeriesData.map((timeSeries) =>
+					convertTimeSeriesData(timeSeries, legendMap),
+				),
+			};
+		}
+		case 'scalar': {
+			const scalarData = v5Data.data.results as ScalarData[];
+			// For scalar data, combine all results into separate table entries
+			const combinedTables = convertScalarDataArrayToTable(scalarData, legendMap);
+			return {
+				resultType: 'scalar',
+				result: combinedTables,
+			};
+		}
+		case 'raw': {
+			const rawData = v5Data.data.results as RawData[];
+			return {
+				resultType: 'raw',
+				result: rawData.map((raw) => convertRawData(raw, legendMap)),
+			};
+		}
+		case 'distribution': {
+			const distributionData = v5Data.data.results as DistributionData[];
+			return {
+				resultType: 'distribution',
+				result: distributionData.map((distribution) =>
+					convertDistributionData(distribution, legendMap),
+				),
+			};
+		}
+		default:
+			return {
+				resultType: '',
+				result: [],
+			};
+	}
+}
+
+/**
+ * Converts V5 API response to legacy format expected by frontend components
+ */
+export function convertV5ResponseToLegacy(
+	v5Response: SuccessResponse<MetricRangePayloadV5>,
+	legendMap: Record<string, string>,
+	// formatForWeb?: boolean,
+): SuccessResponse<MetricRangePayloadV3> {
+	const { payload } = v5Response;
+	const v5Data = payload?.data;
+
+	// todo - sagar
+	// If formatForWeb is true, return as-is (like existing logic)
+	// Exception: scalar data should always be converted to table format
+	// if (formatForWeb && v5Data?.type !== 'scalar') {
+	// 	return v5Response as any;
+	// }
+
+	// Convert based on V5 response type
+	const convertedData = convertV5DataByType(v5Data, legendMap);
+
+	// Create legacy-compatible response structure
+	const legacyResponse: SuccessResponse<MetricRangePayloadV3> = {
+		...v5Response,
+		payload: {
+			data: convertedData,
+		},
+	};
+
+	// Apply legend mapping (similar to existing logic)
+	if (legacyResponse.payload?.data?.result) {
+		legacyResponse.payload.data.result = legacyResponse.payload.data.result.map(
+			(queryData: any) => {
+				// eslint-disable-line @typescript-eslint/no-explicit-any
+				const newQueryData = queryData;
+				newQueryData.legend = legendMap[queryData.queryName];
+
+				// If metric names is an empty object
+				if (isEmpty(queryData.metric)) {
+					// If metrics list is empty && the user haven't defined a legend then add the legend equal to the name of the query.
+					if (newQueryData.legend === undefined || newQueryData.legend === null) {
+						newQueryData.legend = queryData.queryName;
+					}
+					// If name of the query and the legend if inserted is same then add the same to the metrics object.
+					if (queryData.queryName === newQueryData.legend) {
+						newQueryData.metric = newQueryData.metric || {};
+						newQueryData.metric[queryData.queryName] = queryData.queryName;
+					}
+				}
+
+				return newQueryData;
+			},
+		);
+	}
+
+	return legacyResponse;
+}

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

@@ -0,0 +1,51 @@
+import { ApiV5Instance } from 'api';
+import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
+import { AxiosError } from 'axios';
+import { ENTITY_VERSION_V5 } from 'constants/app';
+import { ErrorResponse, SuccessResponse } from 'types/api';
+import {
+	MetricRangePayloadV5,
+	QueryRangePayloadV5,
+} from 'types/api/v5/queryRange';
+
+export const getQueryRangeV5 = async (
+	props: QueryRangePayloadV5,
+	version: string,
+	signal: AbortSignal,
+	headers?: Record<string, string>,
+): Promise<SuccessResponse<MetricRangePayloadV5> | ErrorResponse> => {
+	try {
+		if (version && version === ENTITY_VERSION_V5) {
+			const response = await ApiV5Instance.post('/query_range', props, {
+				signal,
+				headers,
+			});
+
+			return {
+				statusCode: 200,
+				error: null,
+				message: response.data.status,
+				payload: response.data,
+				params: props,
+			};
+		}
+
+		// Default V5 behavior
+		const response = await ApiV5Instance.post('/query_range', props, {
+			signal,
+			headers,
+		});
+
+		return {
+			statusCode: 200,
+			error: null,
+			message: response.data.status,
+			payload: response.data,
+			params: props,
+		};
+	} catch (error) {
+		return ErrorResponseHandler(error as AxiosError);
+	}
+};
+
+export default getQueryRangeV5;

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

@@ -0,0 +1,394 @@
+/* eslint-disable sonarjs/cognitive-complexity */
+import { PANEL_TYPES } from 'constants/queryBuilder';
+import { GetQueryResultsProps } from 'lib/dashboard/getQueryResults';
+import getStartEndRangeTime from 'lib/getStartEndRangeTime';
+import { mapQueryDataToApi } from 'lib/newQueryBuilder/queryBuilderMappers/mapQueryDataToApi';
+import { isEmpty } from 'lodash-es';
+import {
+	IBuilderQuery,
+	QueryFunctionProps,
+} from 'types/api/queryBuilder/queryBuilderData';
+import {
+	BaseBuilderQuery,
+	FieldContext,
+	FieldDataType,
+	FunctionName,
+	GroupByKey,
+	LogAggregation,
+	MetricAggregation,
+	OrderBy,
+	QueryEnvelope,
+	QueryFunction,
+	QueryRangePayloadV5,
+	QueryType,
+	RequestType,
+	TelemetryFieldKey,
+	TraceAggregation,
+	VariableItem,
+} from 'types/api/v5/queryRange';
+import { EQueryType } from 'types/common/dashboard';
+import { DataSource } from 'types/common/queryBuilder';
+
+type PrepareQueryRangePayloadV5Result = {
+	queryPayload: QueryRangePayloadV5;
+	legendMap: Record<string, string>;
+};
+
+/**
+ * Maps panel types to V5 request types
+ */
+function mapPanelTypeToRequestType(panelType: PANEL_TYPES): RequestType {
+	switch (panelType) {
+		case PANEL_TYPES.TIME_SERIES:
+		case PANEL_TYPES.BAR:
+			return 'time_series';
+		case PANEL_TYPES.TABLE:
+		case PANEL_TYPES.PIE:
+		case PANEL_TYPES.VALUE:
+		case PANEL_TYPES.TRACE:
+			return 'scalar';
+		case PANEL_TYPES.LIST:
+			return 'raw';
+		case PANEL_TYPES.HISTOGRAM:
+			return 'distribution';
+		default:
+			return '';
+	}
+}
+
+/**
+ * Gets signal type from data source
+ */
+function getSignalType(dataSource: string): 'traces' | 'logs' | 'metrics' {
+	if (dataSource === 'traces') return 'traces';
+	if (dataSource === 'logs') return 'logs';
+	return 'metrics';
+}
+
+/**
+ * Creates base spec for builder queries
+ */
+function createBaseSpec(
+	queryData: IBuilderQuery,
+	requestType: RequestType,
+	panelType?: PANEL_TYPES,
+): BaseBuilderQuery {
+	return {
+		stepInterval: queryData.stepInterval,
+		disabled: queryData.disabled,
+		filter: queryData?.filter?.expression ? queryData.filter : undefined,
+		groupBy:
+			queryData.groupBy?.length > 0
+				? queryData.groupBy.map(
+						(item: any): GroupByKey => ({
+							name: item.key,
+							fieldDataType: item?.dataType,
+							fieldContext: item?.type,
+							description: item?.description,
+							unit: item?.unit,
+							signal: item?.signal,
+							materialized: item?.materialized,
+						}),
+				  )
+				: undefined,
+		limit:
+			panelType === PANEL_TYPES.TABLE || panelType === PANEL_TYPES.LIST
+				? queryData.limit || queryData.pageSize || undefined
+				: queryData.limit || undefined,
+		offset: requestType === 'raw' ? queryData.offset : undefined,
+		order:
+			queryData.orderBy.length > 0
+				? queryData.orderBy.map(
+						(order: any): OrderBy => ({
+							key: {
+								name: order.columnName,
+							},
+							direction: order.order,
+						}),
+				  )
+				: undefined,
+		// legend: isEmpty(queryData.legend) ? undefined : queryData.legend,
+		having: isEmpty(queryData.havingExpression)
+			? undefined
+			: queryData?.havingExpression,
+		functions: isEmpty(queryData.functions)
+			? undefined
+			: queryData.functions.map(
+					(func: QueryFunctionProps): QueryFunction => ({
+						name: func.name as FunctionName,
+						args: func.args.map((arg) => ({
+							// name: arg.name,
+							value: arg,
+						})),
+					}),
+			  ),
+		selectFields: isEmpty(queryData.selectColumns)
+			? undefined
+			: queryData.selectColumns?.map(
+					(column: any): TelemetryFieldKey => ({
+						name: column.name ?? column.key,
+						fieldDataType:
+							column?.fieldDataType ?? (column?.dataType as FieldDataType),
+						fieldContext: column?.fieldContext ?? (column?.type as FieldContext),
+						signal: column?.signal ?? undefined,
+					}),
+			  ),
+	};
+}
+// Utility to parse aggregation expressions with optional alias
+export function parseAggregations(
+	expression: string,
+): { expression: string; alias?: string }[] {
+	const result: { expression: string; alias?: string }[] = [];
+	const regex = /([a-zA-Z0-9_]+\([^)]*\))(?:\s*as\s+([a-zA-Z0-9_]+))?/g;
+	let match = regex.exec(expression);
+	while (match !== null) {
+		const expr = match[1];
+		const alias = match[2];
+		if (alias) {
+			result.push({ expression: expr, alias });
+		} else {
+			result.push({ expression: expr });
+		}
+		match = regex.exec(expression);
+	}
+	return result;
+}
+
+export function createAggregation(
+	queryData: any,
+): TraceAggregation[] | LogAggregation[] | MetricAggregation[] {
+	if (queryData.dataSource === DataSource.METRICS) {
+		return [
+			{
+				metricName: queryData?.aggregateAttribute?.key,
+				temporality: queryData?.aggregateAttribute?.temporality,
+				timeAggregation: queryData?.timeAggregation,
+				spaceAggregation: queryData?.spaceAggregation,
+			},
+		];
+	}
+
+	if (queryData.aggregations?.length > 0) {
+		return isEmpty(parseAggregations(queryData.aggregations?.[0].expression))
+			? [{ expression: 'count()' }]
+			: parseAggregations(queryData.aggregations?.[0].expression);
+	}
+
+	return [{ expression: 'count()' }];
+}
+
+/**
+ * Converts query builder data to V5 builder queries
+ */
+function convertBuilderQueriesToV5(
+	builderQueries: Record<string, any>, // eslint-disable-line @typescript-eslint/no-explicit-any
+	requestType: RequestType,
+	panelType?: PANEL_TYPES,
+): QueryEnvelope[] {
+	return Object.entries(builderQueries).map(
+		([queryName, queryData]): QueryEnvelope => {
+			const signal = getSignalType(queryData.dataSource);
+			const baseSpec = createBaseSpec(queryData, requestType, panelType);
+			let spec: QueryEnvelope['spec'];
+
+			const aggregations = createAggregation(queryData);
+
+			switch (signal) {
+				case 'traces':
+					spec = {
+						name: queryName,
+						signal: 'traces' as const,
+						...baseSpec,
+						aggregations: aggregations as TraceAggregation[],
+					};
+					break;
+				case 'logs':
+					spec = {
+						name: queryName,
+						signal: 'logs' as const,
+						...baseSpec,
+						aggregations: aggregations as LogAggregation[],
+					};
+					break;
+				case 'metrics':
+				default:
+					spec = {
+						name: queryName,
+						signal: 'metrics' as const,
+						...baseSpec,
+						aggregations: aggregations as MetricAggregation[],
+						// reduceTo: queryData.reduceTo,
+					};
+					break;
+			}
+
+			return {
+				type: 'builder_query' as QueryType,
+				spec,
+			};
+		},
+	);
+}
+
+/**
+ * Converts PromQL queries to V5 format
+ */
+function convertPromQueriesToV5(
+	promQueries: Record<string, any>, // eslint-disable-line @typescript-eslint/no-explicit-any
+): QueryEnvelope[] {
+	return Object.entries(promQueries).map(
+		([queryName, queryData]): QueryEnvelope => ({
+			type: 'promql' as QueryType,
+			spec: {
+				name: queryName,
+				query: queryData.query,
+				disabled: queryData.disabled || false,
+				step: queryData.stepInterval,
+				stats: false, // PromQL specific field
+			},
+		}),
+	);
+}
+
+/**
+ * Converts ClickHouse queries to V5 format
+ */
+function convertClickHouseQueriesToV5(
+	chQueries: Record<string, any>, // eslint-disable-line @typescript-eslint/no-explicit-any
+): QueryEnvelope[] {
+	return Object.entries(chQueries).map(
+		([queryName, queryData]): QueryEnvelope => ({
+			type: 'clickhouse_sql' as QueryType,
+			spec: {
+				name: queryName,
+				query: queryData.query,
+				disabled: queryData.disabled || false,
+				// ClickHouse doesn't have step or stats like PromQL
+			},
+		}),
+	);
+}
+
+/**
+ * Converts query formulas to V5 format
+ */
+function convertFormulasToV5(
+	formulas: Record<string, any>, // eslint-disable-line @typescript-eslint/no-explicit-any
+): QueryEnvelope[] {
+	return Object.entries(formulas).map(
+		([queryName, formulaData]): QueryEnvelope => ({
+			type: 'builder_formula' as QueryType,
+			spec: {
+				name: queryName,
+				expression: formulaData.expression || '',
+				functions: formulaData.functions,
+			},
+		}),
+	);
+}
+
+/**
+ * Helper function to reduce query arrays to objects
+ */
+function reduceQueriesToObject(
+	queryArray: any[], // eslint-disable-line @typescript-eslint/no-explicit-any
+): { queries: Record<string, any>; legends: Record<string, string> } {
+	// eslint-disable-line @typescript-eslint/no-explicit-any
+	const legends: Record<string, string> = {};
+	const queries = queryArray.reduce((acc, queryItem) => {
+		if (!queryItem.query) return acc;
+		acc[queryItem.name] = queryItem;
+		legends[queryItem.name] = queryItem.legend;
+		return acc;
+	}, {} as Record<string, any>); // eslint-disable-line @typescript-eslint/no-explicit-any
+
+	return { queries, legends };
+}
+
+/**
+ * Prepares V5 query range payload from GetQueryResultsProps
+ */
+export const prepareQueryRangePayloadV5 = ({
+	query,
+	globalSelectedInterval,
+	graphType,
+	selectedTime,
+	tableParams,
+	variables = {},
+	start: startTime,
+	end: endTime,
+	formatForWeb,
+}: GetQueryResultsProps): PrepareQueryRangePayloadV5Result => {
+	let legendMap: Record<string, string> = {};
+	const requestType = mapPanelTypeToRequestType(graphType);
+	let queries: QueryEnvelope[] = [];
+
+	switch (query.queryType) {
+		case EQueryType.QUERY_BUILDER: {
+			const { queryData: data, queryFormulas } = query.builder;
+			const currentQueryData = mapQueryDataToApi(data, 'queryName', tableParams);
+			const currentFormulas = mapQueryDataToApi(queryFormulas, 'queryName');
+
+			// Combine legend maps
+			legendMap = {
+				...currentQueryData.newLegendMap,
+				...currentFormulas.newLegendMap,
+			};
+
+			// Convert builder queries
+			const builderQueries = convertBuilderQueriesToV5(
+				currentQueryData.data,
+				requestType,
+				graphType,
+			);
+
+			// Convert formulas as separate query type
+			const formulaQueries = convertFormulasToV5(currentFormulas.data);
+
+			// Combine both types
+			queries = [...builderQueries, ...formulaQueries];
+			break;
+		}
+		case EQueryType.PROM: {
+			const promQueries = reduceQueriesToObject(query[query.queryType]);
+			queries = convertPromQueriesToV5(promQueries.queries);
+			legendMap = promQueries.legends;
+			break;
+		}
+		case EQueryType.CLICKHOUSE: {
+			const chQueries = reduceQueriesToObject(query[query.queryType]);
+			queries = convertClickHouseQueriesToV5(chQueries.queries);
+			legendMap = chQueries.legends;
+			break;
+		}
+		default:
+			break;
+	}
+
+	// Calculate time range
+	const { start, end } = getStartEndRangeTime({
+		type: selectedTime,
+		interval: globalSelectedInterval,
+	});
+
+	// Create V5 payload
+	const queryPayload: QueryRangePayloadV5 = {
+		schemaVersion: 'v1',
+		start: startTime ? startTime * 1e3 : parseInt(start, 10) * 1e3,
+		end: endTime ? endTime * 1e3 : parseInt(end, 10) * 1e3,
+		requestType,
+		compositeQuery: {
+			queries,
+		},
+		formatOptions: {
+			formatTableResultForUI: !!formatForWeb,
+		},
+		variables: Object.entries(variables).reduce((acc, [key, value]) => {
+			acc[key] = { value };
+			return acc;
+		}, {} as Record<string, VariableItem>),
+	};
+
+	return { legendMap, queryPayload };
+};

frontend/src/api/v5/v5.ts

@@ -0,0 +1,8 @@
+// V5 API exports
+export * from './queryRange/constants';
+export { convertV5ResponseToLegacy } from './queryRange/convertV5Response';
+export { getQueryRangeV5 } from './queryRange/getQueryRange';
+export { prepareQueryRangePayloadV5 } from './queryRange/prepareQueryRangePayloadV5';
+
+// Export types from proper location
+export * from 'types/api/v5/queryRange';

frontend/src/components/ChangelogModal/components/ChangelogRenderer.styles.scss

@@ -101,18 +101,13 @@
 		line-height: 28px;
 	}
 
-	.changelog-media-image,
-	.changelog-media-video {
+	.changelog-media-image {
 		height: auto;
 		width: 100%;
 		overflow: hidden;
 		border-radius: 4px;
 		border: 1px solid var(--bg-slate-400, #1d212d);
 	}
-
-	.changelog-media-video {
-		margin: 12px 0;
-	}
 }
 
 .lightMode {

frontend/src/components/ChangelogModal/components/ChangelogRenderer.tsx

@@ -32,7 +32,7 @@ function renderMedia(media: Media): JSX.Element | null {
 				controls
 				controlsList="nodownload noplaybackrate"
 				loop
-				className="changelog-media-video"
+				className="my-3 h-auto w-full rounded"
 			>
 				<source src={media.url} type={media.mime} />
 				<track kind="captions" src="" label="No captions available" default />
@@ -56,7 +56,7 @@ function ChangelogRenderer({ changelog }: Props): JSX.Element {
 			</div>
 			<span className="changelog-release-date">{formattedReleaseDate}</span>
 			{changelog.features && changelog.features.length > 0 && (
-				<div className="changelog-renderer-list">
+				<div className="changelog-renderer-list flex flex-col gap-7">
 					{changelog.features.map((feature) => (
 						<div key={feature.id}>
 							<h2>{feature.title}</h2>

frontend/src/components/HostMetricsDetail/HostMetricTraces/HostMetricTraces.tsx

@@ -194,7 +194,7 @@ function HostMetricTraces({
 			{!isError && traces.length > 0 && (
 				<div className="host-metric-traces-table">
 					<TraceExplorerControls
-						isLoading={isFetching && traces.length === 0}
+						isLoading={isFetching}
 						totalCount={totalCount}
 						perPageOptions={PER_PAGE_OPTIONS}
 						showSizeChanger={false}
@@ -203,7 +203,7 @@ function HostMetricTraces({
 						tableLayout="fixed"
 						pagination={false}
 						scroll={{ x: true }}
-						loading={isFetching && traces.length === 0}
+						loading={isFetching}
 						dataSource={traces}
 						columns={traceListColumns}
 						onRow={(): Record<string, unknown> => ({

frontend/src/components/HostMetricsDetail/HostMetricsDetail.styles.scss

@@ -169,6 +169,7 @@
 			box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
 		}
 	}
+
 	.ant-drawer-close {
 		padding: 0px;
 	}

frontend/src/components/HostMetricsDetail/HostMetricsDetails.tsx

@@ -37,7 +37,7 @@ import {
 	ScrollText,
 	X,
 } from 'lucide-react';
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { useSearchParams } from 'react-router-dom-v5-compat';
 import { AppState } from 'store/reducers';
@@ -86,12 +86,8 @@ function HostMetricsDetails({
 		endTime: endMs,
 	}));
 
-	const lastSelectedInterval = useRef<Time | null>(null);
-
 	const [selectedInterval, setSelectedInterval] = useState<Time>(
-		lastSelectedInterval.current
-			? lastSelectedInterval.current
-			: (selectedTime as Time),
+		selectedTime as Time,
 	);
 
 	const [selectedView, setSelectedView] = useState<VIEWS>(
@@ -154,11 +150,10 @@ function HostMetricsDetails({
 	}, [initialFilters]);
 
 	useEffect(() => {
-		const currentSelectedInterval = lastSelectedInterval.current || selectedTime;
-		setSelectedInterval(currentSelectedInterval as Time);
+		setSelectedInterval(selectedTime as Time);
 
-		if (currentSelectedInterval !== 'custom') {
-			const { maxTime, minTime } = GetMinMax(currentSelectedInterval);
+		if (selectedTime !== 'custom') {
+			const { maxTime, minTime } = GetMinMax(selectedTime);
 
 			setModalTimeRange({
 				startTime: Math.floor(minTime / 1000000000),
@@ -186,7 +181,6 @@ function HostMetricsDetails({
 
 	const handleTimeChange = useCallback(
 		(interval: Time | CustomTimeType, dateTimeRange?: [number, number]): void => {
-			lastSelectedInterval.current = interval as Time;
 			setSelectedInterval(interval as Time);
 
 			if (interval === 'custom' && dateTimeRange) {
@@ -362,7 +356,6 @@ function HostMetricsDetails({
 
 	const handleClose = (): void => {
 		setSelectedInterval(selectedTime as Time);
-		lastSelectedInterval.current = null;
 		setSearchParams({});
 
 		if (selectedTime !== 'custom') {

frontend/src/components/HostMetricsDetail/Metrics/Metrics.tsx

@@ -15,12 +15,11 @@ import {
 } from 'container/TopNav/DateTimeSelectionV2/config';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { useResizeObserver } from 'hooks/useDimensions';
-import { useMultiIntersectionObserver } from 'hooks/useMultiIntersectionObserver';
 import { GetMetricQueryRange } from 'lib/dashboard/getQueryResults';
 import { getUPlotChartOptions } from 'lib/uPlotLib/getUplotChartOptions';
 import { getUPlotChartData } from 'lib/uPlotLib/utils/getUplotChartData';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { QueryFunctionContext, useQueries, UseQueryResult } from 'react-query';
+import { useQueries, UseQueryResult } from 'react-query';
 import { SuccessResponse } from 'types/api';
 import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
 
@@ -54,11 +53,6 @@ function Metrics({
 		featureFlags?.find((flag) => flag.name === FeatureKeys.DOT_METRICS_ENABLED)
 			?.active || false;
 
-	const {
-		visibilities,
-		setElement,
-	} = useMultiIntersectionObserver(hostWidgetInfo.length, { threshold: 0.1 });
-
 	const queryPayloads = useMemo(
 		() =>
 			getHostQueryPayload(
@@ -71,15 +65,11 @@ function Metrics({
 	);
 
 	const queries = useQueries(
-		queryPayloads.map((payload, index) => ({
+		queryPayloads.map((payload) => ({
 			queryKey: ['host-metrics', payload, ENTITY_VERSION_V4, 'HOST'],
-			queryFn: ({
-				signal,
-			}: QueryFunctionContext): Promise<
-				SuccessResponse<MetricRangePayloadProps>
-			> => GetMetricQueryRange(payload, ENTITY_VERSION_V4, signal),
-			enabled: !!payload && visibilities[index],
-			keepPreviousData: true,
+			queryFn: (): Promise<SuccessResponse<MetricRangePayloadProps>> =>
+				GetMetricQueryRange(payload, ENTITY_VERSION_V4),
+			enabled: !!payload,
 		})),
 	);
 
@@ -153,7 +143,7 @@ function Metrics({
 		query: UseQueryResult<SuccessResponse<MetricRangePayloadProps>, unknown>,
 		idx: number,
 	): JSX.Element => {
-		if ((!query.data && query.isLoading) || !visibilities[idx]) {
+		if (query.isLoading) {
 			return <Skeleton />;
 		}
 
@@ -191,7 +181,7 @@ function Metrics({
 			</div>
 			<Row gutter={24} className="host-metrics-container">
 				{queries.map((query, idx) => (
-					<Col ref={setElement(idx)} span={12} key={hostWidgetInfo[idx].title}>
+					<Col span={12} key={hostWidgetInfo[idx].title}>
 						<Typography.Text>{hostWidgetInfo[idx].title}</Typography.Text>
 						<Card bordered className="host-metrics-card" ref={graphRef}>
 							{renderCardContent(query, idx)}

frontend/src/components/InputWithLabel/InputWithLabel.styles.scss

@@ -0,0 +1,101 @@
+.input-with-label {
+	display: flex;
+	flex-direction: row;
+
+	border-radius: 2px 0px 0px 2px;
+
+	.label {
+		color: var(--bg-vanilla-400);
+		font-size: 12px;
+		font-style: normal;
+		font-weight: 500;
+		line-height: 18px; /* 128.571% */
+		letter-spacing: 0.56px;
+
+		max-width: 150px;
+		min-width: 120px;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+
+		padding: 0px 8px;
+
+		border-radius: 2px 0px 0px 2px;
+		border: 1px solid var(--bg-slate-400);
+		background: var(--bg-ink-300);
+
+		display: flex;
+		justify-content: flex-start;
+		align-items: center;
+		font-weight: var(--font-weight-light);
+	}
+
+	.input {
+		flex: 1;
+		min-width: 150px;
+		font-family: 'Space Mono', monospace !important;
+
+		border-radius: 2px 0px 0px 2px;
+		border: 1px solid var(--bg-slate-400);
+		background: var(--bg-ink-300);
+
+		border-right: none;
+		border-left: none;
+		border-top-right-radius: 0px;
+		border-bottom-right-radius: 0px;
+		border-top-left-radius: 0px;
+		border-bottom-left-radius: 0px;
+	}
+
+	.close-btn {
+		border-radius: 0px 2px 2px 0px;
+		border: 1px solid var(--bg-slate-400);
+		background: var(--bg-ink-300);
+		height: 38px;
+		width: 38px;
+	}
+
+	&.labelAfter {
+		.input {
+			border-radius: 0px 2px 2px 0px;
+			border: 1px solid var(--bg-slate-400);
+			background: var(--bg-ink-300);
+			border-top-right-radius: 0px;
+			border-bottom-right-radius: 0px;
+		}
+
+		.label {
+			border-left: none;
+			border-top-left-radius: 0px;
+			border-bottom-left-radius: 0px;
+		}
+	}
+}
+
+.lightMode {
+	.input-with-label {
+		.label {
+			color: var(--bg-ink-500) !important;
+
+			border: 1px solid var(--bg-vanilla-300) !important;
+			background: var(--bg-vanilla-100) !important;
+		}
+
+		.input {
+			border: 1px solid var(--bg-vanilla-300) !important;
+			background: var(--bg-vanilla-100) !important;
+		}
+
+		.close-btn {
+			border: 1px solid var(--bg-vanilla-300) !important;
+			background: var(--bg-vanilla-100) !important;
+		}
+
+		&.labelAfter {
+			.input {
+				border: 1px solid var(--bg-vanilla-300) !important;
+				background: var(--bg-vanilla-100) !important;
+			}
+		}
+	}
+}

frontend/src/components/InputWithLabel/InputWithLabel.tsx

@@ -0,0 +1,71 @@
+import './InputWithLabel.styles.scss';
+
+import { Button, Input, Typography } from 'antd';
+import cx from 'classnames';
+import { X } from 'lucide-react';
+import { useState } from 'react';
+
+function InputWithLabel({
+	label,
+	initialValue,
+	placeholder,
+	type,
+	onClose,
+	labelAfter,
+	onChange,
+	className,
+}: {
+	label: string;
+	initialValue?: string | number;
+	placeholder: string;
+	type?: string;
+	onClose?: () => void;
+	labelAfter?: boolean;
+	onChange: (value: string) => void;
+	className?: string;
+}): JSX.Element {
+	const [inputValue, setInputValue] = useState<string>(
+		initialValue ? initialValue.toString() : '',
+	);
+
+	const handleChange = (e: React.ChangeEvent<HTMLInputElement>): void => {
+		setInputValue(e.target.value);
+		onChange?.(e.target.value);
+	};
+
+	return (
+		<div
+			className={cx('input-with-label', className, {
+				labelAfter,
+			})}
+		>
+			{!labelAfter && <Typography.Text className="label">{label}</Typography.Text>}
+			<Input
+				className="input"
+				placeholder={placeholder}
+				type={type}
+				value={inputValue}
+				onChange={handleChange}
+				name={label.toLowerCase()}
+			/>
+			{labelAfter && <Typography.Text className="label">{label}</Typography.Text>}
+			{onClose && (
+				<Button
+					className="periscope-btn ghost close-btn"
+					icon={<X size={16} />}
+					onClick={onClose}
+				/>
+			)}
+		</div>
+	);
+}
+
+InputWithLabel.defaultProps = {
+	type: 'text',
+	onClose: undefined,
+	labelAfter: false,
+	initialValue: undefined,
+	className: undefined,
+};
+
+export default InputWithLabel;

frontend/src/components/LogDetail/index.tsx

@@ -71,7 +71,7 @@ function LogDetail({
 	const [contextQuery, setContextQuery] = useState<Query | undefined>();
 	const [filters, setFilters] = useState<TagFilter | null>(null);
 	const [isEdit, setIsEdit] = useState<boolean>(false);
-	const { stagedQuery } = useQueryBuilder();
+	const { initialDataSource, stagedQuery } = useQueryBuilder();
 
 	const listQuery = useMemo(() => {
 		if (!stagedQuery || stagedQuery.builder.queryData.length < 1) return null;
@@ -81,7 +81,7 @@ function LogDetail({
 
 	const { options } = useOptionsMenu({
 		storageKey: LOCALSTORAGE.LOGS_LIST_OPTIONS,
-		dataSource: DataSource.LOGS,
+		dataSource: initialDataSource || DataSource.LOGS,
 		aggregateOperator: listQuery?.aggregateOperator || StringOperators.NOOP,
 	});
 

frontend/src/components/LogsFormatOptionsMenu/LogsFormatOptionsMenu.tsx

@@ -410,18 +410,18 @@ export default function LogsFormatOptionsMenu({
 									)}
 
 									<div className="column-format">
-										{addColumn?.value?.map(({ key, id }) => (
-											<div className="column-name" key={id}>
+										{addColumn?.value?.map(({ name }) => (
+											<div className="column-name" key={name}>
 												<div className="name">
-													<Tooltip placement="left" title={key}>
-														{key}
+													<Tooltip placement="left" title={name}>
+														{name}
 													</Tooltip>
 												</div>
 												{addColumn?.value?.length > 1 && (
 													<X
 														className="delete-btn"
 														size={14}
-														onClick={(): void => addColumn.onRemove(id as string)}
+														onClick={(): void => addColumn.onRemove(name)}
 													/>
 												)}
 											</div>

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

@@ -0,0 +1,553 @@
+.query-builder-v2 {
+	display: flex;
+	flex-direction: row;
+	gap: 4px;
+
+	width: 100%;
+
+	border-bottom: 1px solid var(--bg-slate-400);
+	border-top: 1px solid var(--bg-slate-400);
+
+	font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+		'Helvetica Neue', sans-serif;
+
+	border-right: none;
+	border-left: none;
+
+	.qb-content-container {
+		display: flex;
+		flex-direction: column;
+		width: calc(100% - 44px);
+
+		flex: 1;
+
+		position: relative;
+	}
+
+	.qb-content-section {
+		display: flex;
+		flex-direction: column;
+		gap: 8px;
+		padding: 8px;
+
+		flex: 1;
+
+		.qb-header-container {
+			display: flex;
+			flex-direction: row;
+			justify-content: space-between;
+			align-items: center;
+
+			margin-left: 32px;
+
+			.query-actions-container {
+				display: flex;
+				flex-direction: row;
+				gap: 8px;
+				justify-content: space-between;
+				align-items: center;
+				width: 100%;
+			}
+		}
+
+		.qb-elements-container {
+			display: flex;
+			flex-direction: column;
+			gap: 8px;
+
+			margin-left: 108px;
+
+			.code-mirror-where-clause,
+			.query-aggregation-container,
+			.query-add-ons,
+			.metrics-aggregation-section-content {
+				position: relative;
+
+				&::before {
+					content: '';
+					position: absolute;
+					left: -10px;
+					top: 12px;
+					width: 6px;
+					height: 6px;
+					border-left: 6px dotted #1d212d;
+				}
+
+				/* Horizontal line pointing from vertical to the item */
+				&::after {
+					content: '';
+					position: absolute;
+					left: -28px;
+					top: 15px;
+					width: 24px;
+					height: 1px;
+					background: repeating-linear-gradient(
+						to right,
+						#1d212d,
+						#1d212d 4px,
+						transparent 4px,
+						transparent 8px
+					);
+				}
+			}
+		}
+	}
+
+	.where-clause-view {
+		.qb-content-section {
+			.qb-elements-container {
+				margin-left: 0px;
+
+				.code-mirror-where-clause,
+				.query-aggregation-container,
+				.query-add-ons,
+				.metrics-aggregation-section-content {
+					&::before {
+						display: none;
+					}
+
+					&::after {
+						display: none;
+					}
+				}
+			}
+		}
+	}
+
+	.query-names-section {
+		display: flex;
+		flex-direction: column;
+		gap: 8px;
+
+		width: 44px;
+		padding: 8px;
+
+		border-left: 1px solid var(--bg-slate-400);
+
+		.query-name {
+			display: flex;
+			flex-direction: column;
+			justify-content: center;
+			align-items: center;
+			gap: 10px;
+
+			padding: 4px;
+
+			border-radius: 0px 2px 2px 0px;
+
+			border-radius: 2px;
+			border: 1px solid rgba(242, 71, 105, 0.2);
+			background: rgba(242, 71, 105, 0.1);
+
+			color: var(--Sakura-400, #f56c87);
+			font-family: 'Space Mono';
+			font-size: 12px;
+			font-style: normal;
+			font-weight: 400;
+			line-height: 16px; /* 128.571% */
+			text-transform: uppercase;
+		}
+
+		.formula-name {
+			display: flex;
+
+			flex-direction: column;
+			justify-content: center;
+			align-items: center;
+			gap: 10px;
+
+			padding: 4px;
+
+			border-radius: 0px 2px 2px 0px;
+
+			border-radius: 2px;
+			border: 1px solid rgba(173, 127, 88, 0.2);
+			background: rgba(173, 127, 88, 0.1);
+
+			color: var(--Sienna-500, #ad7f58);
+			font-family: 'Space Mono';
+			font-size: 12px;
+			font-style: normal;
+			font-weight: 400;
+			line-height: 16px; /* 128.571% */
+			text-transform: uppercase;
+		}
+	}
+
+	.qb-formulas-container {
+		display: flex;
+		flex-direction: column;
+		gap: 8px;
+
+		margin-left: 32px;
+		padding-bottom: 16px;
+		padding-left: 8px;
+
+		.qb-formula {
+			.ant-row {
+				row-gap: 0px !important;
+			}
+
+			.qb-entity-options {
+				margin-left: 8px;
+
+				padding-right: 8px;
+			}
+
+			.formula-container {
+				margin-left: 82px;
+				padding: 4px 0px;
+
+				.ant-col {
+					&::before {
+						content: '';
+						position: absolute;
+						left: -10px;
+						top: 12px;
+						width: 6px;
+						height: 6px;
+						border-left: 6px dotted #1d212d;
+					}
+
+					/* Horizontal line pointing from vertical to the item */
+					&::after {
+						content: '';
+						position: absolute;
+						left: -28px;
+						top: 15px;
+						width: 24px;
+						height: 1px;
+						background: repeating-linear-gradient(
+							to right,
+							#1d212d,
+							#1d212d 4px,
+							transparent 4px,
+							transparent 8px
+						);
+					}
+				}
+
+				.formula-expression {
+					border-bottom-left-radius: 0px !important;
+					border-bottom-right-radius: 0px !important;
+
+					font-family: 'Space Mono';
+					font-size: 12px;
+					font-style: normal;
+					font-weight: 400;
+					line-height: 16px; /* 128.571% */
+
+					resize: none;
+				}
+
+				.formula-legend {
+					border-top-left-radius: 0px !important;
+					border-top-right-radius: 0px !important;
+
+					.ant-input-group-addon {
+						border-top-left-radius: 0px !important;
+						border-top-right-radius: 0px !important;
+					}
+
+					.ant-input {
+						border-top-left-radius: 0px !important;
+						border-top-right-radius: 0px !important;
+					}
+				}
+			}
+		}
+	}
+
+	.qb-footer {
+		padding: 0 8px 16px 8px;
+
+		.qb-footer-container {
+			display: flex;
+			flex-direction: row;
+			gap: 8px;
+
+			margin-left: 32px;
+
+			.qb-add-new-query {
+				display: flex;
+				flex-direction: row;
+				gap: 8px;
+
+				&::before {
+					content: '';
+					height: calc(100% - 82px);
+					content: '';
+					position: absolute;
+					left: 56px;
+					top: 31px;
+					bottom: 0;
+					width: 1px;
+					background: repeating-linear-gradient(
+						to bottom,
+						#1d212d,
+						#1d212d 4px,
+						transparent 4px,
+						transparent 8px
+					);
+				}
+			}
+		}
+	}
+
+	.qb-entity-options {
+		display: flex;
+		flex-direction: row;
+		gap: 8px;
+
+		.options {
+			.query-name {
+				border-radius: 0px 2px 2px 0px !important;
+				border: 1px solid rgba(242, 71, 105, 0.2) !important;
+				background: rgba(242, 71, 105, 0.1) !important;
+
+				color: var(--Sakura-400, #f56c87) !important;
+				font-family: 'Space Mono';
+				font-size: 14px;
+				font-style: normal;
+				font-weight: 400;
+				line-height: 18px; /* 128.571% */
+				text-transform: uppercase;
+
+				&::before {
+					content: '';
+					height: 120px;
+					content: '';
+					position: absolute;
+					left: 0;
+					top: 31px;
+					bottom: 0;
+					width: 1px;
+					background: repeating-linear-gradient(
+						to bottom,
+						#1d212d,
+						#1d212d 4px,
+						transparent 4px,
+						transparent 8px
+					);
+					left: 15px;
+				}
+			}
+
+			.formula-name {
+				border-radius: 0px 2px 2px 0px;
+				border: 1px solid rgba(173, 127, 88, 0.2);
+				background: rgba(173, 127, 88, 0.1);
+
+				font-family: 'Space Mono';
+				font-size: 14px;
+				font-style: normal;
+				font-weight: 400;
+				line-height: 18px; /* 128.571% */
+				text-transform: uppercase;
+
+				&::before {
+					content: '';
+					height: 65px;
+					content: '';
+					position: absolute;
+					left: 0;
+					top: 31px;
+					bottom: 0;
+					width: 1px;
+					background: repeating-linear-gradient(
+						to bottom,
+						#1d212d,
+						#1d212d 4px,
+						transparent 4px,
+						transparent 8px
+					);
+					left: 15px;
+				}
+			}
+		}
+
+		.query-data-source {
+			margin-left: 8px;
+
+			.ant-select-selector {
+				min-width: 120px;
+
+				border-radius: 2px;
+				border: 1px solid var(--Slate-400, #1d212d);
+				background: var(--Ink-300, #16181d);
+				box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
+			}
+		}
+	}
+
+	.qb-search-container {
+		.metrics-select-container {
+			margin-bottom: 12px;
+		}
+	}
+
+	.qb-search-filter-container {
+		display: flex;
+		flex-direction: row;
+		align-items: flex-start;
+		gap: 8px;
+
+		flex-wrap: wrap;
+
+		.query-search-container {
+			flex: 1;
+		}
+
+		.traces-search-filter-container {
+			display: flex;
+			flex-direction: row;
+			align-items: center;
+			gap: 8px;
+
+			width: 180px;
+		}
+
+		.ant-select {
+			height: auto;
+		}
+
+		.ant-select-selector {
+			border-radius: 2px;
+			border: 1px solid var(--Slate-400, #1d212d) !important;
+			background: var(--Ink-300, #16181d) !important;
+			height: 34px !important;
+			box-sizing: border-box !important;
+		}
+
+		.ant-select-arrow {
+			color: var(--bg-vanilla-400) !important;
+		}
+	}
+
+	.query-actions-dropdown {
+		cursor: pointer;
+	}
+}
+
+.lightMode {
+	.query-builder-v2 {
+		border-bottom: 1px solid var(--bg-vanilla-300);
+		border-top: 1px solid var(--bg-vanilla-300);
+
+		.qb-content-section {
+			.qb-elements-container {
+				.code-mirror-where-clause,
+				.query-aggregation-container,
+				.query-add-ons,
+				.metrics-aggregation-section-content {
+					&::before {
+						border-left: 6px dotted var(--bg-vanilla-300);
+					}
+
+					/* Horizontal line pointing from vertical to the item */
+					&::after {
+						background: repeating-linear-gradient(
+							to right,
+							var(--bg-vanilla-300),
+							var(--bg-vanilla-300) 4px,
+							transparent 4px,
+							transparent 8px
+						);
+					}
+				}
+			}
+		}
+
+		.query-names-section {
+			border-left: 1px solid var(--bg-vanilla-300);
+		}
+
+		.qb-formulas-container {
+			.qb-formula {
+				.formula-container {
+					.ant-col {
+						&::before {
+							border-left: 6px dotted var(--bg-vanilla-300);
+						}
+
+						/* Horizontal line pointing from vertical to the item */
+						&::after {
+							background: repeating-linear-gradient(
+								to right,
+								var(--bg-vanilla-300),
+								var(--bg-vanilla-300) 4px,
+								transparent 4px,
+								transparent 8px
+							);
+						}
+					}
+				}
+			}
+		}
+
+		.qb-footer {
+			.qb-footer-container {
+				.qb-add-new-query {
+					&::before {
+						background: repeating-linear-gradient(
+							to bottom,
+							var(--bg-vanilla-300),
+							var(--bg-vanilla-300) 4px,
+							transparent 4px,
+							transparent 8px
+						);
+					}
+				}
+			}
+		}
+
+		.qb-entity-options {
+			.options {
+				.query-name {
+					&::before {
+						background: repeating-linear-gradient(
+							to bottom,
+							var(--bg-vanilla-300),
+							var(--bg-vanilla-300) 4px,
+							transparent 4px,
+							transparent 8px
+						);
+					}
+				}
+
+				.formula-name {
+					&::before {
+						background: repeating-linear-gradient(
+							to bottom,
+							var(--bg-vanilla-300),
+							var(--bg-vanilla-300) 4px,
+							transparent 4px,
+							transparent 8px
+						);
+						left: 15px;
+					}
+				}
+			}
+
+			.query-data-source {
+				.ant-select-selector {
+					border: 1px solid var(--bg-vanilla-300) !important;
+					background: var(--bg-vanilla-100) !important;
+					box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1) !important;
+				}
+			}
+		}
+
+		.qb-search-filter-container {
+			.ant-select-selector {
+				border: 1px solid var(--bg-vanilla-300) !important;
+				background: var(--bg-vanilla-100) !important;
+				box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1) !important;
+			}
+
+			.ant-select-arrow {
+				color: var(--bg-vanilla-400) !important;
+			}
+		}
+	}
+}

frontend/src/components/QueryBuilderV2/QueryBuilderV2.tsx

@@ -0,0 +1,185 @@
+import './QueryBuilderV2.styles.scss';
+
+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 { memo, useEffect, useMemo, useRef } from 'react';
+import { DataSource } from 'types/common/queryBuilder';
+
+import { QueryBuilderV2Provider } from './QueryBuilderV2Context';
+import QueryFooter from './QueryV2/QueryFooter/QueryFooter';
+import { QueryV2 } from './QueryV2/QueryV2';
+
+export const QueryBuilderV2 = memo(function QueryBuilderV2({
+	config,
+	panelType: newPanelType,
+	filterConfigs = {},
+	queryComponents,
+	isListViewPanel = false,
+	showOnlyWhereClause = false,
+	version,
+}: QueryBuilderProps): JSX.Element {
+	const {
+		currentQuery,
+		addNewBuilderQuery,
+		addNewFormula,
+		handleSetConfig,
+		panelType,
+		initialDataSource,
+	} = useQueryBuilder();
+
+	const containerRef = useRef(null);
+
+	const currentDataSource = useMemo(
+		() =>
+			(config && config.queryVariant === 'static' && config.initialDataSource) ||
+			null,
+		[config],
+	);
+
+	useEffect(() => {
+		if (currentDataSource !== initialDataSource || newPanelType !== panelType) {
+			if (newPanelType === PANEL_TYPES.BAR) {
+				handleSetConfig(PANEL_TYPES.BAR, DataSource.METRICS);
+				return;
+			}
+			handleSetConfig(newPanelType, currentDataSource);
+		}
+	}, [
+		handleSetConfig,
+		panelType,
+		initialDataSource,
+		currentDataSource,
+		newPanelType,
+	]);
+
+	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,
+			},
+		};
+
+		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,
+	]);
+
+	return (
+		<QueryBuilderV2Provider>
+			<div className="query-builder-v2">
+				<div className="qb-content-container">
+					{isListViewPanel && (
+						<QueryV2
+							ref={containerRef}
+							key={currentQuery.builder.queryData[0].queryName}
+							index={0}
+							query={currentQuery.builder.queryData[0]}
+							filterConfigs={queryFilterConfigs}
+							queryComponents={queryComponents}
+							version={version}
+							isAvailableToDisable={false}
+							queryVariant={config?.queryVariant || 'dropdown'}
+							showOnlyWhereClause={showOnlyWhereClause}
+							isListViewPanel={isListViewPanel}
+						/>
+					)}
+
+					{!isListViewPanel &&
+						currentQuery.builder.queryData.map((query, index) => (
+							<QueryV2
+								ref={containerRef}
+								key={query.queryName}
+								index={index}
+								query={query}
+								filterConfigs={queryFilterConfigs}
+								queryComponents={queryComponents}
+								version={version}
+								isAvailableToDisable={false}
+								queryVariant={config?.queryVariant || 'dropdown'}
+								showOnlyWhereClause={showOnlyWhereClause}
+								isListViewPanel={isListViewPanel}
+							/>
+						))}
+
+					{!showOnlyWhereClause && currentQuery.builder.queryFormulas.length > 0 && (
+						<div className="qb-formulas-container">
+							{currentQuery.builder.queryFormulas.map((formula, index) => {
+								const query =
+									currentQuery.builder.queryData[index] ||
+									currentQuery.builder.queryData[0];
+
+								return (
+									<div key={formula.queryName} className="qb-formula">
+										<Formula
+											filterConfigs={filterConfigs}
+											query={query}
+											formula={formula}
+											index={index}
+											isAdditionalFilterEnable={false}
+										/>
+									</div>
+								);
+							})}
+						</div>
+					)}
+
+					{!showOnlyWhereClause && !isListViewPanel && (
+						<QueryFooter
+							addNewBuilderQuery={addNewBuilderQuery}
+							addNewFormula={addNewFormula}
+						/>
+					)}
+				</div>
+
+				{!showOnlyWhereClause && !isListViewPanel && (
+					<div className="query-names-section">
+						{currentQuery.builder.queryData.map((query) => (
+							<div key={query.queryName} className="query-name">
+								{query.queryName}
+							</div>
+						))}
+
+						{currentQuery.builder.queryFormulas.map((formula) => (
+							<div key={formula.queryName} className="formula-name">
+								{formula.queryName}
+							</div>
+						))}
+					</div>
+				)}
+			</div>
+		</QueryBuilderV2Provider>
+	);
+});

frontend/src/components/QueryBuilderV2/QueryBuilderV2Context.tsx

@@ -0,0 +1,62 @@
+import { createContext, ReactNode, useContext, useMemo, useState } from 'react';
+
+// Types for the context state
+export type AggregationOption = { func: string; arg: string };
+
+interface QueryBuilderV2ContextType {
+	searchText: string;
+	setSearchText: (text: string) => void;
+	aggregationOptions: AggregationOption[];
+	setAggregationOptions: (options: AggregationOption[]) => void;
+	aggregationInterval: string;
+	setAggregationInterval: (interval: string) => void;
+	queryAddValues: any; // Replace 'any' with a more specific type if available
+	setQueryAddValues: (values: any) => void;
+}
+
+const QueryBuilderV2Context = createContext<
+	QueryBuilderV2ContextType | undefined
+>(undefined);
+
+export function QueryBuilderV2Provider({
+	children,
+}: {
+	children: ReactNode;
+}): JSX.Element {
+	const [searchText, setSearchText] = useState('');
+	const [aggregationOptions, setAggregationOptions] = useState<
+		AggregationOption[]
+	>([]);
+	const [aggregationInterval, setAggregationInterval] = useState('');
+	const [queryAddValues, setQueryAddValues] = useState<any>(null); // Replace 'any' if you have a type
+
+	return (
+		<QueryBuilderV2Context.Provider
+			value={useMemo(
+				() => ({
+					searchText,
+					setSearchText,
+					aggregationOptions,
+					setAggregationOptions,
+					aggregationInterval,
+					setAggregationInterval,
+					queryAddValues,
+					setQueryAddValues,
+				}),
+				[searchText, aggregationOptions, aggregationInterval, queryAddValues],
+			)}
+		>
+			{children}
+		</QueryBuilderV2Context.Provider>
+	);
+}
+
+export const useQueryBuilderV2Context = (): QueryBuilderV2ContextType => {
+	const context = useContext(QueryBuilderV2Context);
+	if (!context) {
+		throw new Error(
+			'useQueryBuilderV2Context must be used within a QueryBuilderV2Provider',
+		);
+	}
+	return context;
+};

frontend/src/components/QueryBuilderV2/QueryV2/MerticsAggregateSection/MetricsAggregateSection.styles.scss

@@ -0,0 +1,97 @@
+.metrics-aggregate-section {
+	display: flex;
+	flex-direction: column;
+	gap: 16px;
+	margin: 4px 0;
+
+	.metrics-time-aggregation-section {
+		display: flex;
+		flex-direction: column;
+		gap: 12px;
+
+		.metrics-time-aggregation-section-title {
+			display: flex;
+			align-items: center;
+			gap: 6px;
+
+			color: var(--Slate-50, #62687c);
+			font-family: 'Geist Mono';
+			font-size: 12px;
+			font-style: normal;
+			font-weight: 500;
+			line-height: 18px; /* 150% */
+			letter-spacing: 0.48px;
+		}
+	}
+
+	.metrics-space-aggregation-section {
+		display: flex;
+		flex-direction: column;
+		gap: 4px;
+
+		.metrics-space-aggregation-section-title {
+			display: flex;
+			align-items: center;
+			gap: 6px;
+
+			color: var(--Slate-50, #62687c);
+			font-family: 'Geist Mono';
+			font-size: 12px;
+			font-style: normal;
+			font-weight: 500;
+			line-height: 18px; /* 150% */
+			letter-spacing: 0.48px;
+		}
+	}
+
+	.metrics-aggregation-section-content {
+		display: flex;
+		flex-direction: row;
+		flex-wrap: wrap;
+		gap: 8px;
+
+		.metrics-aggregation-section-content-item {
+			display: flex;
+			align-items: center;
+			gap: 10px;
+
+			.metrics-aggregation-section-content-item-label {
+				color: var(--Vanilla-400, #c0c1c3);
+				font-family: 'Geist Mono';
+				font-size: 13px;
+				font-style: normal;
+				font-weight: 400;
+				line-height: 20px; /* 142.857% */
+				letter-spacing: -0.07px;
+			}
+
+			.metrics-aggregation-section-content-item-value {
+				min-width: 320px;
+
+				.ant-select {
+					width: 100%;
+				}
+
+				.ant-select-selector {
+					border-radius: 2px;
+					border: 1.005px solid var(--Slate-400, #1d212d);
+					background: var(--Ink-300, #16181d);
+				}
+			}
+		}
+	}
+}
+
+.metrics-operators-select {
+	border-radius: 2px;
+	border: 1.005px solid var(--Slate-400, #1d212d);
+	background: var(--Ink-300, #16181d);
+
+	color: var(--Vanilla-400, #c0c1c3);
+	font-family: 'Geist Mono';
+	font-size: 13px;
+	font-style: normal;
+	font-weight: 400;
+	line-height: 20px; /* 142.857% */
+	letter-spacing: -0.07px;
+}

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

@@ -0,0 +1,168 @@
+import './MetricsAggregateSection.styles.scss';
+
+import { Tooltip } from 'antd';
+import InputWithLabel from 'components/InputWithLabel/InputWithLabel';
+import { ATTRIBUTE_TYPES, PANEL_TYPES } from 'constants/queryBuilder';
+import SpaceAggregationOptions from 'container/QueryBuilder/components/SpaceAggregationOptions/SpaceAggregationOptions';
+import { GroupByFilter, OperatorsSelect } from 'container/QueryBuilder/filters';
+import { useQueryOperations } from 'hooks/queryBuilder/useQueryBuilderOperations';
+import { Info } from 'lucide-react';
+import { memo, useCallback, useEffect, useMemo } from 'react';
+import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
+
+import { useQueryBuilderV2Context } from '../../QueryBuilderV2Context';
+
+const MetricsAggregateSection = memo(function MetricsAggregateSection({
+	query,
+	index,
+	version,
+	panelType,
+}: {
+	query: IBuilderQuery;
+	index: number;
+	version: string;
+	panelType: PANEL_TYPES | null;
+}): JSX.Element {
+	const { setAggregationOptions } = useQueryBuilderV2Context();
+	const {
+		operators,
+		spaceAggregationOptions,
+		handleChangeQueryData,
+		handleChangeOperator,
+		handleSpaceAggregationChange,
+	} = useQueryOperations({
+		index,
+		query,
+		entityVersion: version,
+	});
+
+	useEffect(() => {
+		setAggregationOptions([
+			{
+				func: query.spaceAggregation || 'count',
+				arg: query.aggregateAttribute.key || '',
+			},
+		]);
+	}, [
+		query.spaceAggregation,
+		query.aggregateAttribute.key,
+		setAggregationOptions,
+		query,
+	]);
+
+	const handleChangeGroupByKeys = useCallback(
+		(value: IBuilderQuery['groupBy']) => {
+			handleChangeQueryData('groupBy', value);
+		},
+		[handleChangeQueryData],
+	);
+
+	const handleChangeAggregateEvery = useCallback(
+		(value: string) => {
+			handleChangeQueryData('stepInterval', Number(value));
+		},
+		[handleChangeQueryData],
+	);
+
+	const showAggregationInterval = useMemo(() => {
+		// eslint-disable-next-line sonarjs/prefer-single-boolean-return
+		if (panelType === PANEL_TYPES.VALUE) {
+			return false;
+		}
+
+		return true;
+	}, [panelType]);
+
+	const disableOperatorSelector =
+		!query?.aggregateAttribute.key || query?.aggregateAttribute.key === '';
+
+	return (
+		<div className="metrics-aggregate-section">
+			<div className="metrics-time-aggregation-section">
+				<div className="metrics-time-aggregation-section-title">
+					AGGREGATE BY TIME{' '}
+					<Tooltip title="AGGREGATE BY TIME">
+						<Info size={12} />
+					</Tooltip>
+				</div>
+
+				<div className="metrics-aggregation-section-content">
+					<div className="metrics-aggregation-section-content-item">
+						<div className="metrics-aggregation-section-content-item-label">
+							Align with
+						</div>
+
+						<div className="metrics-aggregation-section-content-item-value">
+							<OperatorsSelect
+								value={query.aggregateOperator}
+								onChange={handleChangeOperator}
+								operators={operators}
+								className="metrics-operators-select"
+							/>
+						</div>
+					</div>
+
+					{showAggregationInterval && (
+						<div className="metrics-aggregation-section-content-item">
+							<div className="metrics-aggregation-section-content-item-label">
+								aggregated every
+							</div>
+
+							<div className="metrics-aggregation-section-content-item-value">
+								<InputWithLabel
+									onChange={handleChangeAggregateEvery}
+									label="Seconds"
+									placeholder="Enter a number"
+									labelAfter
+									initialValue={query?.stepInterval ?? undefined}
+								/>
+							</div>
+						</div>
+					)}
+				</div>
+			</div>
+
+			<div className="metrics-space-aggregation-section">
+				<div className="metrics-space-aggregation-section-title">
+					AGGREGATE LABELS
+					<Tooltip title="AGGREGATE LABELS">
+						<Info size={12} />
+					</Tooltip>
+				</div>
+
+				<div className="metrics-aggregation-section-content">
+					<div className="metrics-aggregation-section-content-item">
+						<div className="metrics-aggregation-section-content-item-value space-aggregation-select">
+							<SpaceAggregationOptions
+								panelType={panelType}
+								key={`${panelType}${query.spaceAggregation}${query.timeAggregation}`}
+								aggregatorAttributeType={
+									query?.aggregateAttribute.type as ATTRIBUTE_TYPES
+								}
+								selectedValue={query.spaceAggregation}
+								disabled={disableOperatorSelector}
+								onSelect={handleSpaceAggregationChange}
+								operators={spaceAggregationOptions}
+								qbVersion="v3"
+							/>
+						</div>
+					</div>
+
+					<div className="metrics-aggregation-section-content-item">
+						<div className="metrics-aggregation-section-content-item-label">by</div>
+
+						<div className="metrics-aggregation-section-content-item-value">
+							<GroupByFilter
+								disabled={!query.aggregateAttribute.key}
+								query={query}
+								onChange={handleChangeGroupByKeys}
+							/>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	);
+});
+
+export default MetricsAggregateSection;

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

@@ -0,0 +1,42 @@
+.metrics-select-container {
+	margin-bottom: 8px;
+
+	.ant-select-selector {
+		width: 100%;
+		border-radius: 2px;
+		border: 1px solid #1d212d !important;
+		background: #16181d;
+		color: #fff;
+		font-family: 'Geist Mono';
+		font-size: 13px;
+		font-style: normal;
+		font-weight: 400;
+		line-height: 20px; /* 142.857% */
+		min-height: 36px;
+	}
+
+	.ant-select-dropdown {
+		border-radius: 4px;
+		border: 1px solid var(--bg-slate-400);
+		background: linear-gradient(
+			139deg,
+			rgba(18, 19, 23, 0.8) 0%,
+			rgba(18, 19, 23, 0.9) 98.68%
+		);
+		box-shadow: 4px 10px 16px 2px rgba(0, 0, 0, 0.2);
+		backdrop-filter: blur(20px);
+
+		.ant-select-item {
+			color: #fff;
+			font-family: 'Geist Mono';
+			font-size: 13px;
+			font-style: normal;
+			font-weight: 400;
+			line-height: 20px; /* 142.857% */
+
+			&:hover {
+				background: rgba(171, 189, 255, 0.04) !important;
+			}
+		}
+	}
+}

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

@@ -0,0 +1,28 @@
+import './MetricsSelect.styles.scss';
+
+import { AggregatorFilter } from 'container/QueryBuilder/filters';
+import { useQueryOperations } from 'hooks/queryBuilder/useQueryBuilderOperations';
+import { memo } from 'react';
+import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
+
+export const MetricsSelect = memo(function MetricsSelect({
+	query,
+	index,
+	version,
+}: {
+	query: IBuilderQuery;
+	index: number;
+	version: string;
+}): JSX.Element {
+	const { handleChangeAggregatorAttribute } = useQueryOperations({
+		index,
+		query,
+		entityVersion: version,
+	});
+
+	return (
+		<div className="metrics-select-container">
+			<AggregatorFilter onChange={handleChangeAggregatorAttribute} query={query} />
+		</div>
+	);
+});

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

@@ -0,0 +1,375 @@
+/* eslint-disable import/no-extraneous-dependencies */
+/* eslint-disable sonarjs/cognitive-complexity */
+import {
+	autocompletion,
+	closeCompletion,
+	Completion,
+	CompletionContext,
+	completionKeymap,
+	CompletionResult,
+	startCompletion,
+} from '@codemirror/autocomplete';
+import { javascript } from '@codemirror/lang-javascript';
+import { copilot } from '@uiw/codemirror-theme-copilot';
+import CodeMirror, { EditorView, keymap } from '@uiw/react-codemirror';
+import { Button } from 'antd';
+import { useQueryBuilderV2Context } from 'components/QueryBuilderV2/QueryBuilderV2Context';
+import { X } from 'lucide-react';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
+
+const havingOperators = [
+	{
+		label: '=',
+		value: '=',
+	},
+	{
+		label: '!=',
+		value: '!=',
+	},
+	{
+		label: '>',
+		value: '>',
+	},
+	{
+		label: '<',
+		value: '<',
+	},
+	{
+		label: '>=',
+		value: '>=',
+	},
+	{
+		label: '<=',
+		value: '<=',
+	},
+	{
+		label: 'IN',
+		value: 'IN',
+	},
+	{
+		label: 'NOT_IN',
+		value: 'NOT_IN',
+	},
+];
+
+const conjunctions = [
+	{ label: 'AND', value: 'AND ' },
+	{ label: 'OR', value: 'OR ' },
+];
+
+// Custom extension to stop events from propagating to global shortcuts
+const stopEventsExtension = EditorView.domEventHandlers({
+	keydown: (event) => {
+		// Stop all keyboard events from propagating to global shortcuts
+		event.stopPropagation();
+		event.stopImmediatePropagation();
+		return false; // Important for CM to know you handled it
+	},
+	input: (event) => {
+		event.stopPropagation();
+		return false;
+	},
+	focus: (event) => {
+		// Ensure focus events don't interfere with global shortcuts
+		event.stopPropagation();
+		return false;
+	},
+	blur: (event) => {
+		// Ensure blur events don't interfere with global shortcuts
+		event.stopPropagation();
+		return false;
+	},
+});
+
+function HavingFilter({
+	onClose,
+	onChange,
+	queryData,
+}: {
+	onClose: () => void;
+	onChange: (value: string) => void;
+	queryData: IBuilderQuery;
+}): JSX.Element {
+	const { aggregationOptions } = useQueryBuilderV2Context();
+	const [input, setInput] = useState(
+		queryData?.havingExpression?.expression || '',
+	);
+
+	useEffect(() => {
+		setInput(queryData?.havingExpression?.expression || '');
+	}, [queryData?.havingExpression?.expression]);
+
+	const [isFocused, setIsFocused] = useState(false);
+
+	const editorRef = useRef<EditorView | null>(null);
+
+	const [options, setOptions] = useState<{ label: string; value: string }[]>([]);
+
+	const handleChange = (value: string): void => {
+		setInput(value);
+		onChange(value);
+	};
+
+	useEffect(() => {
+		if (isFocused && editorRef.current && options.length > 0) {
+			startCompletion(editorRef.current);
+		}
+	}, [isFocused, options]);
+
+	// Update options when aggregation options change
+	useEffect(() => {
+		const newOptions = [];
+		for (let i = 0; i < aggregationOptions.length; i++) {
+			const opt = aggregationOptions[i];
+			for (let j = 0; j < havingOperators.length; j++) {
+				const operator = havingOperators[j];
+				newOptions.push({
+					label: `${opt.func}(${opt.arg}) ${operator.label}`,
+					value: `${opt.func}(${opt.arg}) ${operator.label} `,
+					apply: (
+						view: EditorView,
+						completion: { label: string; value: string },
+						from: number,
+						to: number,
+					): void => {
+						view.dispatch({
+							changes: { from, to, insert: completion.value },
+							selection: { anchor: from + completion.value.length },
+						});
+						// Trigger value suggestions immediately after operator
+						setTimeout(() => {
+							startCompletion(view);
+						}, 0);
+					},
+				});
+			}
+		}
+		setOptions(newOptions);
+	}, [aggregationOptions]);
+
+	// Helper to check if a string is a number
+	const isNumber = (token: string): boolean => /^-?\d+(\.\d+)?$/.test(token);
+
+	// Helper to check if we're after an operator
+	const isAfterOperator = (tokens: string[]): boolean => {
+		if (tokens.length === 0) return false;
+		const lastToken = tokens[tokens.length - 1];
+		// Check if the last token is exactly an operator or ends with an operator and space
+		return havingOperators.some((op) => {
+			const opWithSpace = `${op.value} `;
+			return lastToken === op.value || lastToken.endsWith(opWithSpace);
+		});
+	};
+
+	// Helper function for applying completion with space
+	const applyCompletionWithSpace = (
+		view: EditorView,
+		completion: Completion,
+		from: number,
+		to: number,
+	): void => {
+		const insertValue =
+			typeof completion.apply === 'string' ? completion.apply : completion.label;
+		const newText = `${insertValue} `;
+		const newPos = from + newText.length;
+
+		view.dispatch({
+			changes: { from, to, insert: newText },
+			selection: { anchor: newPos, head: newPos },
+			effects: EditorView.scrollIntoView(newPos),
+		});
+	};
+
+	const havingAutocomplete = useMemo(() => {
+		// Helper functions for applying completions
+		const forceCompletion = (view: EditorView): void => {
+			setTimeout(() => {
+				if (view) {
+					startCompletion(view);
+				}
+			}, 0);
+		};
+
+		const applyValueCompletion = (
+			view: EditorView,
+			completion: Completion,
+			from: number,
+			to: number,
+		): void => {
+			applyCompletionWithSpace(view, completion, from, to);
+			forceCompletion(view);
+		};
+
+		const applyOperatorCompletion = (
+			view: EditorView,
+			completion: Completion,
+			from: number,
+			to: number,
+		): void => {
+			const insertValue =
+				typeof completion.apply === 'string' ? completion.apply : completion.label;
+			const insertWithSpace = `${insertValue} `;
+			view.dispatch({
+				changes: { from, to, insert: insertWithSpace },
+				selection: { anchor: from + insertWithSpace.length },
+			});
+			forceCompletion(view);
+		};
+
+		return autocompletion({
+			override: [
+				(context: CompletionContext): CompletionResult | null => {
+					const text = context.state.sliceDoc(0, context.pos);
+					const trimmedText = text.trim();
+					const tokens = trimmedText.split(/\s+/).filter(Boolean);
+
+					// Handle empty state when no aggregation options are available
+					if (options.length === 0) {
+						return {
+							from: context.pos,
+							options: [
+								{
+									label:
+										'No aggregation functions available. Please add aggregation functions first.',
+									type: 'text',
+									apply: (): boolean => true,
+								},
+							],
+						};
+					}
+
+					// Close dropdown after operator to allow custom value entry
+					if (isAfterOperator(tokens)) {
+						return null;
+					}
+
+					// Hide suggestions while typing a value after an operator
+					if (
+						!text.endsWith(' ') &&
+						tokens.length >= 2 &&
+						havingOperators.some((op) => op.value === tokens[tokens.length - 2])
+					) {
+						return null;
+					}
+
+					// Suggest key/operator pairs and ( for grouping
+					if (
+						tokens.length === 0 ||
+						conjunctions.some((c) => tokens[tokens.length - 1] === c.value.trim()) ||
+						tokens[tokens.length - 1] === '('
+					) {
+						return {
+							from: context.pos,
+							options: options.map((opt) => ({
+								...opt,
+								apply: applyOperatorCompletion,
+							})),
+						};
+					}
+
+					// Show suggestions when typing
+					if (tokens.length > 0) {
+						const lastToken = tokens[tokens.length - 1];
+						const filteredOptions = options.filter((opt) =>
+							opt.label.toLowerCase().includes(lastToken.toLowerCase()),
+						);
+						if (filteredOptions.length > 0) {
+							return {
+								from: context.pos - lastToken.length,
+								options: filteredOptions.map((opt) => ({
+									...opt,
+									apply: applyOperatorCompletion,
+								})),
+							};
+						}
+					}
+
+					// Suggest conjunctions after a value and a space
+					if (
+						tokens.length > 0 &&
+						(isNumber(tokens[tokens.length - 1]) ||
+							tokens[tokens.length - 1] === ')') &&
+						text.endsWith(' ')
+					) {
+						return {
+							from: context.pos,
+							options: conjunctions.map((conj) => ({
+								...conj,
+								apply: applyValueCompletion,
+							})),
+						};
+					}
+
+					// Show all options if no other condition matches
+					return {
+						from: context.pos,
+						options: options.map((opt) => ({
+							...opt,
+							apply: applyOperatorCompletion,
+						})),
+					};
+				},
+			],
+			defaultKeymap: true,
+			closeOnBlur: true,
+			maxRenderedOptions: 200,
+			activateOnTyping: true,
+		});
+	}, [options]);
+
+	return (
+		<div className="having-filter-container">
+			<div className="having-filter-select-container">
+				<CodeMirror
+					value={input}
+					onChange={handleChange}
+					theme={copilot}
+					className="having-filter-select-editor"
+					width="100%"
+					extensions={[
+						havingAutocomplete,
+						javascript({ jsx: false, typescript: false }),
+						stopEventsExtension,
+						EditorView.lineWrapping,
+						keymap.of([
+							...completionKeymap,
+							{
+								key: 'Escape',
+								run: closeCompletion,
+							},
+						]),
+					]}
+					placeholder="Type Having query like count() > 10 ..."
+					basicSetup={{
+						lineNumbers: false,
+						autocompletion: true,
+						completionKeymap: true,
+					}}
+					onCreateEditor={(view: EditorView): void => {
+						editorRef.current = view;
+					}}
+					onFocus={(): void => {
+						setIsFocused(true);
+						if (editorRef.current) {
+							startCompletion(editorRef.current);
+						}
+					}}
+					onBlur={(): void => {
+						setIsFocused(false);
+						if (editorRef.current) {
+							closeCompletion(editorRef.current);
+						}
+					}}
+				/>
+				<Button
+					className="close-btn periscope-btn ghost"
+					icon={<X size={16} />}
+					onClick={onClose}
+				/>
+			</div>
+		</div>
+	);
+}
+
+export default HavingFilter;

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

@@ -0,0 +1,377 @@
+.add-ons-list {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+
+	.add-ons-tabs {
+		display: flex;
+		flex-wrap: wrap;
+
+		.add-on-tab-title {
+			display: flex;
+			gap: var(--margin-2);
+			align-items: center;
+			justify-content: center;
+			font-size: var(--font-size-xs);
+			font-style: normal;
+			font-weight: var(--font-weight-normal);
+
+			color: var(--Vanilla-400, #c0c1c3);
+		}
+
+		.tab {
+			border: 1px solid var(--bg-slate-400);
+			border-left: none;
+			min-width: 120px;
+			height: 36px;
+			line-height: 36px;
+
+			&:first-child {
+				border-left: 1px solid var(--bg-slate-400);
+			}
+		}
+
+		.tab::before {
+			background: var(--bg-slate-400);
+		}
+
+		.selected-view {
+			color: var(--text-robin-500);
+			border: 1px solid var(--bg-slate-400);
+
+			display: none;
+		}
+
+		.selected-view::before {
+			background: var(--bg-slate-400);
+		}
+	}
+
+	.compass-button {
+		width: 30px;
+		height: 30px;
+
+		border-radius: 2px;
+		border: 1px solid var(--bg-slate-400);
+		background: var(--bg-ink-300);
+		box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
+	}
+}
+
+.having-filter-container {
+	width: 100%;
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+
+	.having-filter-select-container {
+		width: 100%;
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+
+		.having-filter-select-editor {
+			border-radius: 2px;
+			flex: 1;
+			width: calc(100% - 40px);
+
+			.cm-content {
+				padding: 0;
+			}
+
+			.cm-editor {
+				border-radius: 2px;
+				background-color: transparent !important;
+				position: relative !important;
+
+				&:focus-within {
+					border-color: var(--bg-robin-500);
+				}
+
+				&.cm-focused {
+					outline: none !important;
+				}
+
+				.cm-content {
+					border-radius: 2px;
+					border: 1px solid var(--Slate-400, #1d212d);
+					border-top-right-radius: 0px;
+					border-bottom-right-radius: 0px;
+					padding: 0px !important;
+					background-color: #121317 !important;
+
+					&:focus-within {
+						border-color: var(--bg-ink-200);
+					}
+				}
+
+				.cm-tooltip-autocomplete {
+					background: var(--bg-ink-300) !important;
+					color: var(--bg-ink-500) !important;
+					border-radius: 2px !important;
+					font-size: 12px !important;
+					font-weight: 500 !important;
+					margin-top: -2px !important;
+					width: 100% !important;
+					position: absolute !important;
+					top: 38px !important;
+					left: 0px !important;
+
+					border-radius: 4px;
+					border: 1px solid var(--bg-slate-200, #1d212d);
+					border-top: none !important;
+					border-top-left-radius: 0px !important;
+					border-top-right-radius: 0px !important;
+					background: linear-gradient(
+						139deg,
+						rgba(18, 19, 23, 0.8) 0%,
+						rgba(18, 19, 23, 0.9) 98.68%
+					) !important;
+					backdrop-filter: blur(20px);
+					box-sizing: border-box;
+					font-family: 'Space Mono', monospace !important;
+
+					ul {
+						width: 100% !important;
+						max-width: 100% !important;
+						font-family: 'Space Mono', monospace !important;
+						min-height: 200px !important;
+
+						&::-webkit-scrollbar {
+							width: 0.3rem;
+						}
+						&::-webkit-scrollbar-corner {
+							background: transparent;
+						}
+						&::-webkit-scrollbar-thumb {
+							background: rgb(136, 136, 136);
+							border-radius: 0.625rem;
+						}
+						&::-webkit-scrollbar-track {
+							background: transparent;
+						}
+
+						li {
+							width: 100% !important;
+							max-width: 100% !important;
+							line-height: 36px !important;
+							height: 36px !important;
+							padding: 4px 8px !important;
+
+							display: flex !important;
+							align-items: center !important;
+							gap: 8px !important;
+							box-sizing: border-box;
+							overflow: hidden;
+
+							font-family: 'Space Mono', monospace !important;
+							color: var(--bg-vanilla-100) !important;
+
+							.cm-completionIcon {
+								display: none !important;
+							}
+
+							&[aria-selected='true'] {
+								// background-color: rgba(78, 116, 248, 0.7) !important;
+								background: rgba(171, 189, 255, 0.04) !important;
+							}
+						}
+					}
+				}
+
+				.cm-gutters {
+					display: none !important;
+				}
+
+				.cm-scroller {
+					scrollbar-width: none;
+
+					&::-webkit-scrollbar {
+						display: none;
+					}
+
+					&::-webkit-scrollbar-thumb {
+						display: none;
+					}
+
+					&::-webkit-scrollbar-track {
+						display: none;
+					}
+
+					&::-webkit-scrollbar-corner {
+						display: none;
+					}
+				}
+
+				.cm-line {
+					line-height: 36px !important;
+					font-family: 'Space Mono', monospace !important;
+					background-color: #121317 !important;
+
+					::-moz-selection {
+						background: var(--bg-ink-100) !important;
+						opacity: 0.5 !important;
+					}
+
+					::selection {
+						background: var(--bg-ink-100) !important;
+						opacity: 0.5 !important;
+					}
+
+					.cm-function {
+						color: var(--bg-robin-500) !important;
+					}
+
+					.chip-decorator {
+						background: rgba(36, 40, 52, 1) !important;
+						color: var(--bg-vanilla-100) !important;
+						border-radius: 4px;
+						padding: 2px 4px;
+						margin-right: 4px;
+					}
+				}
+
+				.cm-selectionBackground {
+					background: var(--bg-ink-100) !important;
+					opacity: 0.5 !important;
+				}
+			}
+		}
+
+		.close-btn {
+			border-radius: 0px 2px 2px 0px;
+			border: 1px solid var(--bg-slate-400);
+			background: var(--bg-ink-300);
+			height: 38px;
+			width: 38px;
+
+			border-left: transparent;
+			border-top-left-radius: 0px;
+			border-bottom-left-radius: 0px;
+		}
+	}
+}
+
+.selected-add-ons-content {
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
+	gap: 8px;
+	padding-bottom: 8px;
+	position: relative;
+
+	.add-on-content {
+		display: flex;
+		flex-direction: column;
+		gap: 8px;
+
+		max-width: 100%;
+		min-width: 100%;
+		min-width: 420px;
+
+		box-sizing: border-box;
+		position: relative;
+	}
+}
+
+.lightMode {
+	.add-ons-list {
+		.add-ons-tabs {
+			.add-on-tab-title {
+				color: var(--bg-ink-500) !important;
+			}
+
+			.tab {
+				border: 1px solid var(--bg-vanilla-300) !important;
+				background: var(--bg-vanilla-100) !important;
+
+				&:first-child {
+					border-left: 1px solid var(--bg-vanilla-300) !important;
+				}
+			}
+
+			.tab::before {
+				background: var(--bg-vanilla-300) !important;
+			}
+
+			.selected-view {
+				color: var(--bg-robin-500) !important;
+				border: 1px solid var(--bg-vanilla-300) !important;
+			}
+
+			.selected-view::before {
+				background: var(--bg-vanilla-300) !important;
+			}
+		}
+
+		.compass-button {
+			border: 1px solid var(--bg-vanilla-300) !important;
+			background: var(--bg-vanilla-100) !important;
+		}
+	}
+
+	.having-filter-container {
+		.having-filter-select-container {
+			.having-filter-select-editor {
+				.cm-editor {
+					&:focus-within {
+						border-color: var(--bg-vanilla-300) !important;
+					}
+
+					.cm-content {
+						border: 1px solid var(--bg-vanilla-300) !important;
+						background: var(--bg-vanilla-100) !important;
+
+						&:focus-within {
+							border-color: var(--bg-vanilla-300) !important;
+						}
+					}
+
+					.cm-tooltip-autocomplete {
+						background: var(--bg-vanilla-100) !important;
+						border: 1px solid var(--bg-vanilla-300) !important;
+						color: var(--bg-ink-500) !important;
+
+						ul {
+							li {
+								&:hover {
+									background: var(--bg-vanilla-300) !important;
+								}
+
+								&[aria-selected='true'] {
+									color: var(--bg-ink-500) !important;
+									background: var(--bg-vanilla-300) !important;
+								}
+							}
+						}
+					}
+
+					.cm-line {
+						background-color: var(--bg-vanilla-100) !important;
+
+						::-moz-selection {
+							background: var(--bg-vanilla-100) !important;
+						}
+
+						::selection {
+							background: var(--bg-ink-100) !important;
+						}
+
+						.chip-decorator {
+							background: var(--bg-robin-100) !important;
+							color: var(--bg-ink-400) !important;
+						}
+					}
+
+					.cm-selectionBackground {
+						background: var(--bg-vanilla-100) !important;
+					}
+				}
+			}
+
+			.close-btn {
+				border: 1px solid var(--bg-vanilla-300) !important;
+				background: var(--bg-vanilla-100) !important;
+			}
+		}
+	}
+}

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

@@ -0,0 +1,340 @@
+import './QueryAddOns.styles.scss';
+
+import { Button, Radio, RadioChangeEvent } from 'antd';
+import InputWithLabel from 'components/InputWithLabel/InputWithLabel';
+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 { useQueryOperations } from 'hooks/queryBuilder/useQueryBuilderOperations';
+import { isEmpty } from 'lodash-es';
+import { BarChart2, ScrollText, X } from 'lucide-react';
+import { useCallback, useEffect, useState } from 'react';
+import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
+import { DataSource } from 'types/common/queryBuilder';
+
+import HavingFilter from './HavingFilter/HavingFilter';
+
+interface AddOn {
+	icon: React.ReactNode;
+	label: string;
+	key: string;
+}
+
+const ADD_ONS_KEYS = {
+	GROUP_BY: 'group_by',
+	HAVING: 'having',
+	ORDER_BY: 'order_by',
+	LIMIT: 'limit',
+	LEGEND_FORMAT: 'legend_format',
+};
+
+const ADD_ONS = [
+	{
+		icon: <BarChart2 size={14} />,
+		label: 'Group By',
+		key: 'group_by',
+	},
+	{
+		icon: <ScrollText size={14} />,
+		label: 'Having',
+		key: 'having',
+	},
+	{
+		icon: <ScrollText size={14} />,
+		label: 'Order By',
+		key: 'order_by',
+	},
+	{
+		icon: <ScrollText size={14} />,
+		label: 'Limit',
+		key: 'limit',
+	},
+	{
+		icon: <ScrollText size={14} />,
+		label: 'Legend format',
+		key: 'legend_format',
+	},
+];
+
+const REDUCE_TO = {
+	icon: <ScrollText size={14} />,
+	label: 'Reduce to',
+	key: 'reduce_to',
+};
+
+function QueryAddOns({
+	query,
+	version,
+	isListViewPanel,
+	showReduceTo,
+	panelType,
+	index,
+}: {
+	query: IBuilderQuery;
+	version: string;
+	isListViewPanel: boolean;
+	showReduceTo: boolean;
+	panelType: PANEL_TYPES | null;
+	index: number;
+}): JSX.Element {
+	const [addOns, setAddOns] = useState<AddOn[]>(ADD_ONS);
+
+	const [selectedViews, setSelectedViews] = useState<AddOn[]>([]);
+
+	const { handleChangeQueryData } = useQueryOperations({
+		index,
+		query,
+		entityVersion: '',
+	});
+
+	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) {
+			// Filter out all add-ons except legend format
+			filteredAddOns = ADD_ONS.filter(
+				(addOn) => addOn.key === ADD_ONS_KEYS.LEGEND_FORMAT,
+			);
+		} else {
+			filteredAddOns = Object.values(ADD_ONS);
+
+			// Filter out group_by for metrics data source
+			if (query.dataSource === DataSource.METRICS) {
+				filteredAddOns = filteredAddOns.filter(
+					(addOn) => addOn.key !== ADD_ONS_KEYS.GROUP_BY,
+				);
+			}
+		}
+
+		// add reduce to if showReduceTo is true
+		if (showReduceTo) {
+			filteredAddOns = [...filteredAddOns, REDUCE_TO];
+		}
+
+		setAddOns(filteredAddOns);
+
+		// Filter selectedViews to only include add-ons present in filteredAddOns
+		setSelectedViews((prevSelectedViews) =>
+			prevSelectedViews.filter((view) =>
+				filteredAddOns.some((addOn) => addOn.key === view.key),
+			),
+		);
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [panelType, isListViewPanel, query.dataSource]);
+
+	const handleOptionClick = (e: RadioChangeEvent): void => {
+		if (selectedViews.find((view) => view.key === e.target.value.key)) {
+			setSelectedViews(
+				selectedViews.filter((view) => view.key !== e.target.value.key),
+			);
+		} else {
+			setSelectedViews([...selectedViews, e.target.value]);
+		}
+	};
+
+	const handleChangeGroupByKeys = useCallback(
+		(value: IBuilderQuery['groupBy']) => {
+			handleChangeQueryData('groupBy', value);
+		},
+		[handleChangeQueryData],
+	);
+
+	const handleChangeOrderByKeys = useCallback(
+		(value: IBuilderQuery['orderBy']) => {
+			handleChangeQueryData('orderBy', value);
+		},
+		[handleChangeQueryData],
+	);
+
+	const handleChangeReduceTo = useCallback(
+		(value: IBuilderQuery['reduceTo']) => {
+			handleChangeQueryData('reduceTo', value);
+		},
+		[handleChangeQueryData],
+	);
+
+	const handleRemoveView = useCallback(
+		(key: string): void => {
+			setSelectedViews(selectedViews.filter((view) => view.key !== key));
+		},
+		[selectedViews],
+	);
+
+	const handleChangeQueryLegend = useCallback(
+		(value: string) => {
+			handleChangeQueryData('legend', value);
+		},
+		[handleChangeQueryData],
+	);
+
+	const handleChangeLimit = useCallback(
+		(value: string) => {
+			handleChangeQueryData('limit', Number(value) || null);
+		},
+		[handleChangeQueryData],
+	);
+
+	const handleChangeHaving = useCallback(
+		(value: string) => {
+			handleChangeQueryData('havingExpression', {
+				expression: value,
+			});
+		},
+		[handleChangeQueryData],
+	);
+
+	return (
+		<div className="query-add-ons">
+			{selectedViews.length > 0 && (
+				<div className="selected-add-ons-content">
+					{selectedViews.find((view) => view.key === 'group_by') && (
+						<div className="add-on-content">
+							<div className="periscope-input-with-label">
+								<div className="label">Group By</div>
+								<div className="input">
+									<GroupByFilter
+										disabled={
+											query.dataSource === DataSource.METRICS &&
+											!query.aggregateAttribute.key
+										}
+										query={query}
+										onChange={handleChangeGroupByKeys}
+									/>
+								</div>
+								<Button
+									className="close-btn periscope-btn ghost"
+									icon={<X size={16} />}
+									onClick={(): void => handleRemoveView('group_by')}
+								/>
+							</div>
+						</div>
+					)}
+					{selectedViews.find((view) => view.key === 'having') && (
+						<div className="add-on-content">
+							<div className="periscope-input-with-label">
+								<div className="label">Having</div>
+								<div className="input">
+									<HavingFilter
+										onClose={(): void => {
+											setSelectedViews(
+												selectedViews.filter((view) => view.key !== 'having'),
+											);
+										}}
+										onChange={handleChangeHaving}
+										queryData={query}
+									/>
+								</div>
+							</div>
+						</div>
+					)}
+					{selectedViews.find((view) => view.key === 'limit') && (
+						<div className="add-on-content">
+							<InputWithLabel
+								label="Limit"
+								onChange={handleChangeLimit}
+								initialValue={query?.limit ?? undefined}
+								placeholder="Enter limit"
+								onClose={(): void => {
+									setSelectedViews(selectedViews.filter((view) => view.key !== 'limit'));
+								}}
+							/>
+						</div>
+					)}
+					{selectedViews.find((view) => view.key === 'order_by') && (
+						<div className="add-on-content">
+							<div className="periscope-input-with-label">
+								<div className="label">Order By</div>
+								<div className="input">
+									<OrderByFilter
+										entityVersion={version}
+										query={query}
+										onChange={handleChangeOrderByKeys}
+										isListViewPanel={isListViewPanel}
+										isNewQueryV2
+									/>
+								</div>
+								{!isListViewPanel && (
+									<Button
+										className="close-btn periscope-btn ghost"
+										icon={<X size={16} />}
+										onClick={(): void => handleRemoveView('order_by')}
+									/>
+								)}
+							</div>
+						</div>
+					)}
+
+					{selectedViews.find((view) => view.key === 'reduce_to') && showReduceTo && (
+						<div className="add-on-content">
+							<div className="periscope-input-with-label">
+								<div className="label">Reduce to</div>
+								<div className="input">
+									<ReduceToFilter query={query} onChange={handleChangeReduceTo} />
+								</div>
+
+								<Button
+									className="close-btn periscope-btn ghost"
+									icon={<X size={16} />}
+									onClick={(): void => handleRemoveView('reduce_to')}
+								/>
+							</div>
+						</div>
+					)}
+
+					{selectedViews.find((view) => view.key === 'legend_format') && (
+						<div className="add-on-content">
+							<InputWithLabel
+								label="Legend format"
+								placeholder="Write legend format"
+								onChange={handleChangeQueryLegend}
+								initialValue={isEmpty(query?.legend) ? undefined : query?.legend}
+								onClose={(): void => {
+									setSelectedViews(
+										selectedViews.filter((view) => view.key !== 'legend_format'),
+									);
+								}}
+							/>
+						</div>
+					)}
+				</div>
+			)}
+
+			<div className="add-ons-list">
+				<Radio.Group
+					className="add-ons-tabs"
+					onChange={handleOptionClick}
+					value={selectedViews}
+				>
+					{addOns.map((addOn) => (
+						<Radio.Button
+							key={addOn.label}
+							className={
+								selectedViews.find((view) => view.key === addOn.key)
+									? 'selected-view tab'
+									: 'tab'
+							}
+							value={addOn}
+						>
+							<div className="add-on-tab-title">
+								{addOn.icon}
+								{addOn.label}
+							</div>
+						</Radio.Button>
+					))}
+				</Radio.Group>
+			</div>
+		</div>
+	);
+}
+
+export default QueryAddOns;

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

@@ -0,0 +1,300 @@
+.query-aggregation-container {
+	display: block;
+	position: relative;
+
+	.aggregation-container {
+		display: flex;
+		flex-direction: row;
+		gap: 8px;
+		align-items: flex-start;
+		flex-wrap: wrap;
+
+		.query-aggregation-select-container {
+			flex: 1;
+			min-width: 400px;
+		}
+
+		.query-aggregation-options-input {
+			width: 100%;
+			height: 36px;
+			line-height: 36px;
+			border-radius: 2px;
+			border: 1px solid var(--bg-slate-400);
+			box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
+
+			font-family: 'Space Mono', monospace !important;
+
+			&::placeholder {
+				color: var(--bg-vanilla-100);
+				opacity: 0.5;
+			}
+		}
+
+		.query-aggregation-interval {
+			display: flex;
+			flex-direction: row;
+			align-items: center;
+			gap: 8px;
+			max-width: 360px;
+
+			.query-aggregation-interval-input-container {
+				.query-aggregation-interval-input {
+					input {
+						max-width: 120px;
+					}
+				}
+			}
+		}
+
+		.query-aggregation-select-container {
+			width: 100%;
+			display: flex;
+			flex-direction: row;
+			align-items: center;
+			flex: 1;
+			min-width: 400px;
+
+			.query-aggregation-select-editor {
+				border-radius: 2px;
+				flex: 1;
+				min-width: 0;
+
+				.cm-content {
+					padding: 0;
+				}
+
+				.cm-editor {
+					border-radius: 2px;
+					background-color: transparent !important;
+					position: relative !important;
+
+					&.cm-focused {
+						outline: none !important;
+					}
+
+					&:focus-within {
+						border-color: var(--bg-robin-500);
+					}
+
+					.cm-content {
+						border-radius: 2px;
+						border: 1px solid var(--Slate-400, #1d212d);
+						border-top-right-radius: 0px;
+						border-bottom-right-radius: 0px;
+						padding: 0px !important;
+						background-color: #121317 !important;
+
+						&:focus-within {
+							border-color: var(--bg-ink-200);
+						}
+					}
+
+					.cm-tooltip-autocomplete {
+						background: var(--bg-ink-300) !important;
+						border-radius: 2px !important;
+						font-size: 12px !important;
+						font-weight: 500 !important;
+						margin-top: 8px !important;
+						min-width: 400px !important;
+						position: absolute !important;
+						left: 0px !important;
+						width: 100% !important;
+
+						border-radius: 4px;
+						border: 1px solid var(--bg-slate-200, #1d212d);
+						border-top: none !important;
+						border-top-left-radius: 0px !important;
+						border-top-right-radius: 0px !important;
+						background: linear-gradient(
+							139deg,
+							rgba(18, 19, 23, 0.8) 0%,
+							rgba(18, 19, 23, 0.9) 98.68%
+						) !important;
+						backdrop-filter: blur(20px);
+						box-sizing: border-box;
+						font-family: 'Space Mono', monospace !important;
+
+						ul {
+							width: 100% !important;
+							max-width: 100% !important;
+							font-family: 'Space Mono', monospace !important;
+							min-height: 200px !important;
+
+							&::-webkit-scrollbar {
+								width: 0.3rem;
+							}
+							&::-webkit-scrollbar-corner {
+								background: transparent;
+							}
+							&::-webkit-scrollbar-thumb {
+								background: rgb(136, 136, 136);
+								border-radius: 0.625rem;
+							}
+							&::-webkit-scrollbar-track {
+								background: transparent;
+							}
+
+							li {
+								width: 100% !important;
+								max-width: 100% !important;
+								line-height: 36px !important;
+								height: 36px !important;
+								padding: 4px 8px !important;
+
+								display: flex !important;
+								align-items: center !important;
+								gap: 8px !important;
+								box-sizing: border-box;
+								overflow: hidden;
+
+								font-family: 'Space Mono', monospace !important;
+
+								.cm-completionIcon {
+									display: none !important;
+								}
+
+								&[aria-selected='true'] {
+									// background-color: rgba(78, 116, 248, 0.7) !important;
+									background: rgba(171, 189, 255, 0.04) !important;
+								}
+							}
+						}
+					}
+
+					.cm-gutters {
+						display: none !important;
+					}
+
+					.cm-line {
+						line-height: 36px !important;
+						font-family: 'Space Mono', monospace !important;
+						background-color: #121317 !important;
+
+						::-moz-selection {
+							background: var(--bg-ink-100) !important;
+							opacity: 0.5 !important;
+						}
+
+						::selection {
+							background: var(--bg-ink-100) !important;
+							opacity: 0.5 !important;
+						}
+
+						.cm-function {
+							color: var(--bg-robin-500) !important;
+						}
+
+						.chip-decorator {
+							background: rgba(36, 40, 52, 1) !important;
+							color: var(--bg-vanilla-100) !important;
+							border-radius: 4px;
+							padding: 2px 4px;
+							margin-right: 4px;
+						}
+					}
+
+					.cm-selectionBackground {
+						background: var(--bg-ink-100) !important;
+						opacity: 0.5 !important;
+					}
+				}
+			}
+
+			.close-btn {
+				border-radius: 0px 2px 2px 0px;
+				border: 1px solid var(--bg-slate-400);
+				background: var(--bg-ink-300);
+				height: 38px;
+				width: 38px;
+
+				border-left: transparent;
+				border-top-left-radius: 0px;
+				border-bottom-left-radius: 0px;
+			}
+		}
+	}
+}
+
+.lightMode {
+	.query-aggregation-container {
+		.aggregation-container {
+			.query-aggregation-options-input {
+				border-color: var(--bg-vanilla-300) !important;
+
+				&::placeholder {
+					color: var(--bg-ink-400) !important;
+					opacity: 0.5 !important;
+				}
+			}
+
+			.query-aggregation-select-container {
+				.query-aggregation-select-editor {
+					.cm-editor {
+						.cm-content {
+							border: 1px solid var(--bg-vanilla-300) !important;
+							background: var(--bg-vanilla-100) !important;
+							box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1) !important;
+
+							&:focus-within {
+								border-color: var(--bg-vanilla-300) !important;
+							}
+						}
+
+						.cm-tooltip-autocomplete {
+							background: var(--bg-vanilla-100) !important;
+							border: 1px solid var(--bg-vanilla-300) !important;
+							color: var(--bg-ink-500) !important;
+
+							ul {
+								li {
+									&:hover {
+										background-color: var(--bg-vanilla-300) !important;
+										color: var(--bg-ink-500) !important;
+									}
+
+									&[aria-selected='true'] {
+										background: var(--bg-vanilla-300) !important;
+										color: var(--bg-ink-500) !important;
+									}
+								}
+							}
+						}
+
+						.cm-line {
+							background-color: var(--bg-vanilla-100) !important;
+
+							::-moz-selection {
+								background: var(--bg-vanilla-100) !important;
+								opacity: 0.5 !important;
+							}
+
+							::selection {
+								background: var(--bg-vanilla-100) !important;
+								opacity: 0.5 !important;
+							}
+
+							.cm-function {
+								color: var(--bg-robin-500) !important;
+							}
+
+							.chip-decorator {
+								background: var(--bg-robin-500) !important;
+								color: var(--bg-ink-400) !important;
+							}
+						}
+
+						// .cm-selectionBackground {
+						// 	background: var(--bg-vanilla-100) !important;
+						// 	opacity: 0.5 !important;
+						// }
+					}
+				}
+
+				.close-btn {
+					border-color: var(--bg-vanilla-300) !important;
+					background: var(--bg-vanilla-100) !important;
+				}
+			}
+		}
+	}
+}

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

@@ -0,0 +1,75 @@
+import './QueryAggregation.styles.scss';
+
+import InputWithLabel from 'components/InputWithLabel/InputWithLabel';
+import { PANEL_TYPES } from 'constants/queryBuilder';
+import { useMemo } from 'react';
+import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
+import { DataSource } from 'types/common/queryBuilder';
+
+import QueryAggregationSelect from './QueryAggregationSelect';
+
+function QueryAggregationOptions({
+	dataSource,
+	panelType,
+	onAggregationIntervalChange,
+	onChange,
+	queryData,
+}: {
+	dataSource: DataSource;
+	panelType?: string;
+	onAggregationIntervalChange: (value: number) => void;
+	onChange?: (value: string) => void;
+	queryData: IBuilderQuery;
+}): JSX.Element {
+	const showAggregationInterval = useMemo(() => {
+		// eslint-disable-next-line sonarjs/prefer-single-boolean-return
+		if (panelType === PANEL_TYPES.VALUE) {
+			return false;
+		}
+
+		if (dataSource === DataSource.TRACES || dataSource === DataSource.LOGS) {
+			return !(panelType === PANEL_TYPES.TABLE || panelType === PANEL_TYPES.PIE);
+		}
+
+		return true;
+	}, [dataSource, panelType]);
+
+	const handleAggregationIntervalChange = (value: string): void => {
+		onAggregationIntervalChange(Number(value));
+	};
+
+	return (
+		<div className="query-aggregation-container">
+			<div className="aggregation-container">
+				<QueryAggregationSelect onChange={onChange} queryData={queryData} />
+
+				{showAggregationInterval && (
+					<div className="query-aggregation-interval">
+						<div className="query-aggregation-interval-label">every</div>
+						<div className="query-aggregation-interval-input-container">
+							<InputWithLabel
+								initialValue={
+									queryData.stepInterval ? queryData.stepInterval : undefined
+								}
+								className="query-aggregation-interval-input"
+								label="Seconds"
+								placeholder="Auto"
+								type="number"
+								onChange={handleAggregationIntervalChange}
+								labelAfter
+								onClose={(): void => {}}
+							/>
+						</div>
+					</div>
+				)}
+			</div>
+		</div>
+	);
+}
+
+QueryAggregationOptions.defaultProps = {
+	panelType: null,
+	onChange: undefined,
+};
+
+export default QueryAggregationOptions;

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

@@ -0,0 +1,530 @@
+/* eslint-disable import/no-extraneous-dependencies */
+/* eslint-disable no-cond-assign */
+/* eslint-disable no-restricted-syntax */
+/* eslint-disable class-methods-use-this */
+/* eslint-disable react/no-this-in-sfc */
+/* eslint-disable sonarjs/cognitive-complexity */
+import './QueryAggregation.styles.scss';
+
+import {
+	autocompletion,
+	closeCompletion,
+	Completion,
+	CompletionContext,
+	completionKeymap,
+	CompletionResult,
+	startCompletion,
+} from '@codemirror/autocomplete';
+import { javascript } from '@codemirror/lang-javascript';
+import { RangeSetBuilder } from '@codemirror/state';
+import { copilot } from '@uiw/codemirror-theme-copilot';
+import CodeMirror, {
+	Decoration,
+	EditorView,
+	keymap,
+	ViewPlugin,
+	ViewUpdate,
+} from '@uiw/react-codemirror';
+import { getAggregateAttribute } from 'api/queryBuilder/getAggregateAttribute';
+import { QueryBuilderKeys } from 'constants/queryBuilder';
+import { tracesAggregateOperatorOptions } from 'constants/queryBuilderOperators';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useQuery } from 'react-query';
+import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
+import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
+import { TracesAggregatorOperator } from 'types/common/queryBuilder';
+
+import { useQueryBuilderV2Context } from '../../QueryBuilderV2Context';
+
+const chipDecoration = Decoration.mark({
+	class: 'chip-decorator',
+});
+
+const operatorArgMeta: Record<
+	string,
+	{ acceptsArgs: boolean; multiple: boolean }
+> = {
+	[TracesAggregatorOperator.NOOP]: { acceptsArgs: false, multiple: false },
+	[TracesAggregatorOperator.COUNT]: { acceptsArgs: false, multiple: false },
+	[TracesAggregatorOperator.COUNT_DISTINCT]: {
+		acceptsArgs: true,
+		multiple: true,
+	},
+	[TracesAggregatorOperator.SUM]: { acceptsArgs: true, multiple: false },
+	[TracesAggregatorOperator.AVG]: { acceptsArgs: true, multiple: false },
+	[TracesAggregatorOperator.MAX]: { acceptsArgs: true, multiple: false },
+	[TracesAggregatorOperator.MIN]: { acceptsArgs: true, multiple: false },
+	[TracesAggregatorOperator.P05]: { acceptsArgs: true, multiple: false },
+	[TracesAggregatorOperator.P10]: { acceptsArgs: true, multiple: false },
+	[TracesAggregatorOperator.P20]: { acceptsArgs: true, multiple: false },
+	[TracesAggregatorOperator.P25]: { acceptsArgs: true, multiple: false },
+	[TracesAggregatorOperator.P50]: { acceptsArgs: true, multiple: false },
+	[TracesAggregatorOperator.P75]: { acceptsArgs: true, multiple: false },
+	[TracesAggregatorOperator.P90]: { acceptsArgs: true, multiple: false },
+	[TracesAggregatorOperator.P95]: { acceptsArgs: true, multiple: false },
+	[TracesAggregatorOperator.P99]: { acceptsArgs: true, multiple: false },
+	[TracesAggregatorOperator.RATE]: { acceptsArgs: true, multiple: false },
+	[TracesAggregatorOperator.RATE_SUM]: { acceptsArgs: true, multiple: false },
+	[TracesAggregatorOperator.RATE_AVG]: { acceptsArgs: true, multiple: false },
+	[TracesAggregatorOperator.RATE_MIN]: { acceptsArgs: true, multiple: false },
+	[TracesAggregatorOperator.RATE_MAX]: { acceptsArgs: true, multiple: false },
+};
+
+function getFunctionContextAtCursor(
+	text: string,
+	cursorPos: number,
+): string | null {
+	// Find the nearest function name to the left of the nearest unmatched '('
+	let openParenIndex = -1;
+	let funcName: string | null = null;
+	let parenStack = 0;
+	for (let i = cursorPos - 1; i >= 0; i--) {
+		if (text[i] === ')') parenStack++;
+		else if (text[i] === '(') {
+			if (parenStack === 0) {
+				openParenIndex = i;
+				const before = text.slice(0, i);
+				const match = before.match(/(\w+)\s*$/);
+				if (match) funcName = match[1].toLowerCase();
+				break;
+			}
+			parenStack--;
+		}
+	}
+	if (openParenIndex === -1 || !funcName) return null;
+	// Scan forwards to find the matching closing parenthesis
+	let closeParenIndex = -1;
+	let depth = 1;
+	for (let j = openParenIndex + 1; j < text.length; j++) {
+		if (text[j] === '(') depth++;
+		else if (text[j] === ')') depth--;
+		if (depth === 0) {
+			closeParenIndex = j;
+			break;
+		}
+	}
+	if (
+		cursorPos > openParenIndex &&
+		(closeParenIndex === -1 || cursorPos <= closeParenIndex)
+	) {
+		return funcName;
+	}
+	return null;
+}
+
+// Custom extension to stop events from propagating to global shortcuts
+const stopEventsExtension = EditorView.domEventHandlers({
+	keydown: (event) => {
+		// Stop all keyboard events from propagating to global shortcuts
+		event.stopPropagation();
+		event.stopImmediatePropagation();
+		return false; // Important for CM to know you handled it
+	},
+	input: (event) => {
+		event.stopPropagation();
+		return false;
+	},
+	focus: (event) => {
+		// Ensure focus events don't interfere with global shortcuts
+		event.stopPropagation();
+		return false;
+	},
+	blur: (event) => {
+		// Ensure blur events don't interfere with global shortcuts
+		event.stopPropagation();
+		return false;
+	},
+});
+
+// eslint-disable-next-line react/no-this-in-sfc
+function QueryAggregationSelect({
+	onChange,
+	queryData,
+}: {
+	onChange?: (value: string) => void;
+	queryData: IBuilderQuery;
+}): JSX.Element {
+	const { setAggregationOptions } = useQueryBuilderV2Context();
+
+	const [input, setInput] = useState(
+		queryData?.aggregations?.map((i: any) => i.expression).join(' ') || '',
+	);
+
+	useEffect(() => {
+		setInput(
+			queryData?.aggregations?.map((i: any) => i.expression).join(' ') || '',
+		);
+	}, [queryData?.aggregations]);
+
+	const [cursorPos, setCursorPos] = useState(0);
+	const [functionArgPairs, setFunctionArgPairs] = useState<
+		{ func: string; arg: string }[]
+	>([]);
+	const editorRef = useRef<EditorView | null>(null);
+	const [isFocused, setIsFocused] = useState(false);
+
+	// Helper function to safely start completion
+	const safeStartCompletion = useCallback((): void => {
+		requestAnimationFrame(() => {
+			if (editorRef.current) {
+				startCompletion(editorRef.current);
+			}
+		});
+	}, []);
+
+	// Update cursor position on every editor update
+	const handleUpdate = (update: { view: EditorView }): void => {
+		const pos = update.view.state.selection.main.from;
+		setCursorPos(pos);
+	};
+
+	// Effect to handle focus state and trigger suggestions
+	useEffect(() => {
+		if (isFocused) {
+			safeStartCompletion();
+		}
+	}, [isFocused, safeStartCompletion]);
+
+	// Extract all valid function-argument pairs from the input
+	useEffect(() => {
+		const pairs: { func: string; arg: string }[] = [];
+		const regex = /([a-zA-Z_][\w]*)\s*\(([^)]*)\)/g;
+		let match;
+		while ((match = regex.exec(input)) !== null) {
+			const func = match[1].toLowerCase();
+			const args = match[2]
+				.split(',')
+				.map((arg) => arg.trim())
+				.filter((arg) => arg.length > 0);
+
+			if (args.length === 0) {
+				// For functions with no arguments, add a pair with empty string as arg
+				pairs.push({ func, arg: '' });
+			} else {
+				args.forEach((arg) => {
+					pairs.push({ func, arg });
+				});
+			}
+		}
+		setFunctionArgPairs(pairs);
+		setAggregationOptions(pairs);
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [input]);
+
+	// Find function context for fetching suggestions
+	const functionContextForFetch = getFunctionContextAtCursor(input, cursorPos);
+
+	const { data: aggregateAttributeData, isLoading: isLoadingFields } = useQuery(
+		[
+			QueryBuilderKeys.GET_AGGREGATE_ATTRIBUTE,
+			functionContextForFetch,
+			queryData.dataSource,
+		],
+		() =>
+			getAggregateAttribute({
+				searchText: '',
+				aggregateOperator: functionContextForFetch as string,
+				dataSource: queryData.dataSource,
+			}),
+		{
+			enabled:
+				!!functionContextForFetch &&
+				!!operatorArgMeta[functionContextForFetch]?.acceptsArgs,
+		},
+	);
+
+	// Get valid function names (lowercase)
+	const validFunctions = useMemo(
+		() => tracesAggregateOperatorOptions.map((op) => op.value.toLowerCase()),
+		[],
+	);
+
+	// Memoized chipPlugin that highlights valid function calls like count(), max(arg), min(arg)
+	const chipPlugin = useMemo(
+		() =>
+			ViewPlugin.fromClass(
+				class {
+					decorations: import('@codemirror/view').DecorationSet;
+
+					constructor(view: EditorView) {
+						this.decorations = this.buildDecorations(view);
+					}
+
+					update(update: ViewUpdate): void {
+						if (update.docChanged || update.viewportChanged) {
+							this.decorations = this.buildDecorations(update.view);
+						}
+					}
+
+					buildDecorations(
+						view: EditorView,
+					): import('@codemirror/view').DecorationSet {
+						const builder = new RangeSetBuilder<Decoration>();
+						for (const { from, to } of view.visibleRanges) {
+							const text = view.state.doc.sliceString(from, to);
+
+							const regex = /\b([a-zA-Z_][\w]*)\s*\(([^)]*)\)/g;
+							let match;
+
+							while ((match = regex.exec(text)) !== null) {
+								const func = match[1].toLowerCase();
+
+								if (validFunctions.includes(func)) {
+									const start = from + match.index;
+									const end = start + match[0].length;
+									builder.add(start, end, chipDecoration);
+								}
+							}
+						}
+						return builder.finish();
+					}
+				},
+				{
+					decorations: (v: any): import('@codemirror/view').DecorationSet =>
+						v.decorations,
+				},
+			),
+		[validFunctions],
+	) as any;
+
+	const operatorCompletions: Completion[] = tracesAggregateOperatorOptions.map(
+		(op) => ({
+			label: op.value,
+			type: 'function',
+			info: op.label,
+			apply: (
+				view: EditorView,
+				completion: Completion,
+				from: number,
+				to: number,
+			): void => {
+				const acceptsArgs = operatorArgMeta[op.value]?.acceptsArgs;
+
+				let insertText: string;
+				let cursorPos: number;
+
+				if (!acceptsArgs) {
+					insertText = `${op.value}() `;
+					cursorPos = from + insertText.length; // Use insertText.length instead of hardcoded values
+				} else {
+					insertText = `${op.value}(`;
+					cursorPos = from + insertText.length; // Use insertText.length instead of hardcoded values
+				}
+
+				view.dispatch({
+					changes: { from, to, insert: insertText },
+					selection: { anchor: cursorPos },
+				});
+
+				// Trigger suggestions after a small delay
+				setTimeout(() => {
+					safeStartCompletion();
+				}, 50);
+			},
+		}),
+	);
+
+	// Memoize field suggestions from API (no filtering here)
+	const fieldSuggestions = useMemo(
+		() =>
+			aggregateAttributeData?.payload?.attributeKeys?.map(
+				(attributeKey: BaseAutocompleteData) => ({
+					label: attributeKey.key,
+					type: 'variable',
+					info: attributeKey.dataType,
+					apply: (
+						view: EditorView,
+						completion: Completion,
+						from: number,
+						to: number,
+					): void => {
+						const text = view.state.sliceDoc(0, from);
+						const funcName = getFunctionContextAtCursor(text, from);
+						const multiple = funcName ? operatorArgMeta[funcName]?.multiple : false;
+
+						// Insert the selected key followed by either a comma or closing parenthesis
+						const insertText = multiple
+							? `${completion.label},`
+							: `${completion.label}) `;
+						const cursorPos = from + insertText.length; // Use insertText.length instead of hardcoded values
+
+						view.dispatch({
+							changes: { from, to, insert: insertText },
+							selection: { anchor: cursorPos },
+						});
+
+						// Trigger next suggestions after a small delay
+						setTimeout(() => {
+							safeStartCompletion();
+						}, 50);
+					},
+				}),
+			) || [],
+		[aggregateAttributeData, safeStartCompletion],
+	);
+
+	const aggregatorAutocomplete = useMemo(
+		() =>
+			autocompletion({
+				override: [
+					(context: CompletionContext): CompletionResult | null => {
+						const text = context.state.sliceDoc(0, context.state.doc.length);
+						const cursorPos = context.pos;
+						const funcName = getFunctionContextAtCursor(text, cursorPos);
+
+						// Do not show suggestions if inside count()
+						if (
+							funcName === TracesAggregatorOperator.COUNT &&
+							cursorPos > 0 &&
+							text[cursorPos - 1] !== ')'
+						) {
+							return null;
+						}
+
+						// If inside a function that accepts args, show field suggestions
+						if (funcName && operatorArgMeta[funcName]?.acceptsArgs) {
+							if (isLoadingFields) {
+								return {
+									from: cursorPos,
+									options: [
+										{
+											label: 'Loading suggestions...',
+											type: 'text',
+											apply: (): void => {},
+										},
+									],
+								};
+							}
+
+							const doc = context.state.sliceDoc(0, cursorPos);
+							const lastOpenParen = doc.lastIndexOf('(');
+							const lastComma = doc.lastIndexOf(',', cursorPos - 1);
+							const startOfArg =
+								lastComma > lastOpenParen ? lastComma + 1 : lastOpenParen + 1;
+							const inputText = doc.slice(startOfArg, cursorPos).trim();
+
+							// Parse arguments already present in the function call (before the cursor)
+							const usedArgs = new Set<string>();
+							if (lastOpenParen !== -1) {
+								const argsString = doc.slice(lastOpenParen + 1, cursorPos);
+								argsString.split(',').forEach((arg) => {
+									const trimmed = arg.trim();
+									if (trimmed) usedArgs.add(trimmed);
+								});
+							}
+
+							// Exclude arguments already paired with this function elsewhere in the input
+							const globalUsedArgs = new Set(
+								functionArgPairs
+									.filter((pair) => pair.func === funcName)
+									.map((pair) => pair.arg),
+							);
+
+							const availableSuggestions = fieldSuggestions.filter(
+								(suggestion) =>
+									!usedArgs.has(suggestion.label) &&
+									!globalUsedArgs.has(suggestion.label),
+							);
+
+							const filteredSuggestions =
+								inputText === ''
+									? availableSuggestions
+									: availableSuggestions.filter((suggestion) =>
+											suggestion.label.toLowerCase().includes(inputText.toLowerCase()),
+									  );
+
+							return {
+								from: startOfArg,
+								options: filteredSuggestions,
+							};
+						}
+
+						// Show operator suggestions if no function context or not accepting args
+						if (!funcName || !operatorArgMeta[funcName]?.acceptsArgs) {
+							// Check if 'count(' is present in the current input (case-insensitive)
+							const hasCount = text.toLowerCase().includes('count(');
+							const availableOperators = hasCount
+								? operatorCompletions.filter((op) => op.label.toLowerCase() !== 'count')
+								: operatorCompletions;
+
+							// Get the word before cursor if any
+							const word = context.matchBefore(/[\w\d_]+/);
+
+							// Show suggestions if:
+							// 1. There's a word match
+							// 2. The input is empty (cursor at start)
+							// 3. The user explicitly triggered completion
+							if (word || cursorPos === 0 || context.explicit) {
+								return {
+									from: word ? word.from : cursorPos,
+									options: availableOperators,
+								};
+							}
+						}
+
+						return null;
+					},
+				],
+				defaultKeymap: true,
+				closeOnBlur: true,
+				maxRenderedOptions: 50,
+				activateOnTyping: true,
+			}),
+		[operatorCompletions, isLoadingFields, fieldSuggestions, functionArgPairs],
+	);
+
+	return (
+		<div className="query-aggregation-select-container">
+			<CodeMirror
+				value={input}
+				onChange={(value): void => {
+					setInput(value);
+					onChange?.(value);
+				}}
+				className="query-aggregation-select-editor"
+				theme={copilot}
+				extensions={[
+					chipPlugin,
+					aggregatorAutocomplete,
+					javascript({ jsx: false, typescript: false }),
+					EditorView.lineWrapping,
+					stopEventsExtension,
+					keymap.of([
+						...completionKeymap,
+						{
+							key: 'Escape',
+							run: closeCompletion,
+						},
+					]),
+				]}
+				placeholder="Type aggregator functions like sum(), count_distinct(...), etc."
+				basicSetup={{
+					lineNumbers: false,
+					autocompletion: true,
+					completionKeymap: true,
+				}}
+				onUpdate={handleUpdate}
+				onCreateEditor={(view: EditorView): void => {
+					editorRef.current = view;
+				}}
+				onFocus={(): void => {
+					setIsFocused(true);
+					safeStartCompletion();
+				}}
+				onBlur={(): void => {
+					setIsFocused(false);
+
+					if (editorRef.current) {
+						closeCompletion(editorRef.current);
+					}
+				}}
+			/>
+		</div>
+	);
+}
+
+QueryAggregationSelect.defaultProps = {
+	onChange: undefined,
+};
+
+export default QueryAggregationSelect;

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

@@ -0,0 +1,35 @@
+import { Button } from 'antd';
+import { Plus, Sigma } from 'lucide-react';
+
+export default function QueryFooter({
+	addNewBuilderQuery,
+	addNewFormula,
+}: {
+	addNewBuilderQuery: () => void;
+	addNewFormula: () => void;
+}): JSX.Element {
+	return (
+		<div className="qb-footer">
+			<div className="qb-footer-container">
+				<div className="qb-add-new-query">
+					<Button
+						className="add-new-query-button periscope-btn secondary"
+						type="text"
+						icon={<Plus size={16} />}
+						onClick={addNewBuilderQuery}
+					/>
+				</div>
+
+				<div className="qb-add-formula">
+					<Button
+						className="add-formula-button periscope-btn secondary"
+						icon={<Sigma size={16} />}
+						onClick={addNewFormula}
+					>
+						Add Formula
+					</Button>
+				</div>
+			</div>
+		</div>
+	);
+}

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

@@ -0,0 +1,713 @@
+.code-mirror-where-clause {
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+	font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+		'Helvetica Neue', sans-serif;
+
+	.query-where-clause-editor-container {
+		display: flex;
+		flex-direction: row;
+
+		.query-where-clause-editor {
+			flex: 1;
+			min-width: 400px;
+		}
+
+		.query-status-container {
+			width: 32px;
+
+			background-color: #121317 !important;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			border: 1px solid var(--bg-slate-200);
+			border-radius: 2px;
+			border-top-left-radius: 0px !important;
+			border-bottom-left-radius: 0px !important;
+			border-left: none !important;
+
+			&.hasErrors {
+				border-color: var(--bg-cherry-500);
+			}
+		}
+	}
+
+	.query-where-clause-editor {
+		&.hasErrors {
+			.cm-editor {
+				.cm-content {
+					border-color: var(--bg-cherry-500);
+					border-top-right-radius: 0px !important;
+					border-bottom-right-radius: 0px !important;
+				}
+			}
+		}
+	}
+
+	.cm-editor {
+		border-radius: 2px;
+		overflow: hidden;
+		background-color: transparent !important;
+
+		&:focus-within {
+			border-color: var(--bg-robin-500);
+		}
+
+		.cm-content {
+			border-radius: 2px;
+			border: 1px solid var(--Slate-400, #1d212d);
+			padding: 0px !important;
+			background-color: #121317 !important;
+
+			&:focus-within {
+				border-color: var(--bg-ink-200);
+			}
+		}
+
+		&.cm-focused {
+			outline: 1px solid var(--bg-slate-200);
+		}
+
+		.cm-tooltip-autocomplete {
+			background: var(--bg-ink-300) !important;
+			border-radius: 2px !important;
+			font-size: 12px !important;
+			font-weight: 500 !important;
+			margin-top: -2px !important;
+			min-width: 400px !important;
+			position: relative !important;
+			top: 0px !important;
+			left: 0px !important;
+
+			border-radius: 4px;
+			border: 0px;
+			background: linear-gradient(
+				139deg,
+				rgba(18, 19, 23, 0.8) 0%,
+				rgba(18, 19, 23, 0.9) 98.68%
+			) !important;
+			backdrop-filter: blur(20px);
+			box-sizing: border-box;
+			font-family: 'Space Mono', monospace !important;
+
+			ul {
+				width: 100% !important;
+				max-width: 100% !important;
+				font-family: 'Space Mono', monospace !important;
+				min-height: 200px !important;
+
+				&::-webkit-scrollbar {
+					width: 0.3rem;
+				}
+				&::-webkit-scrollbar-corner {
+					background: transparent;
+				}
+				&::-webkit-scrollbar-thumb {
+					background: rgb(136, 136, 136);
+					border-radius: 0.625rem;
+				}
+				&::-webkit-scrollbar-track {
+					background: transparent;
+				}
+
+				li {
+					width: 100% !important;
+					max-width: 100% !important;
+					line-height: 36px !important;
+					height: 36px !important;
+					padding: 4px 8px !important;
+
+					display: flex !important;
+					align-items: center !important;
+					gap: 8px !important;
+					box-sizing: border-box;
+					overflow: hidden;
+
+					font-family: 'Space Mono', monospace !important;
+
+					&:hover {
+						background: var(--bg-ink-100) !important;
+					}
+
+					.cm-completionIcon {
+						display: none !important;
+					}
+
+					&[aria-selected='true'] {
+						// background-color: rgba(78, 116, 248, 0.7) !important;
+						background: rgba(171, 189, 255, 0.04) !important;
+					}
+				}
+			}
+		}
+
+		.cm-gutters {
+			display: none !important;
+		}
+
+		.cm-line {
+			line-height: 34px !important;
+			font-family: 'Space Mono', monospace !important;
+			background-color: #121317 !important;
+
+			::-moz-selection {
+				background: var(--bg-ink-100) !important;
+				opacity: 0.5 !important;
+			}
+
+			::selection {
+				background: var(--bg-ink-100) !important;
+				opacity: 0.5 !important;
+			}
+		}
+
+		.cm-selectionBackground {
+			background: var(--bg-ink-100) !important;
+			opacity: 0.5 !important;
+		}
+	}
+
+	.cursor-position {
+		font-size: 12px;
+		color: var(--bg-ink-200);
+		padding: 6px;
+		background-color: var(--bg-vanilla-200);
+		border-radius: 4px;
+		display: inline-flex;
+		align-items: center;
+		margin-bottom: 8px;
+		margin-top: 8px;
+	}
+
+	.query-validation {
+		display: flex;
+		flex-direction: column;
+		gap: 8px;
+		margin-bottom: 8px;
+		margin-top: 16px;
+
+		.valid,
+		.invalid {
+			display: inline-flex;
+			align-items: center;
+			padding: 4px 8px;
+			border-radius: 4px;
+			font-weight: 500;
+			font-size: 12px;
+		}
+
+		.valid {
+			background-color: rgba(39, 174, 96, 0.1);
+			color: #27ae60;
+		}
+
+		.invalid {
+			background-color: rgba(235, 87, 87, 0.1);
+			color: #eb5757;
+		}
+
+		.query-validation-status {
+			display: flex;
+			align-items: center;
+			gap: 8px;
+		}
+
+		.query-validation-errors {
+			display: flex;
+			flex-direction: column;
+			gap: 8px;
+
+			.query-validation-error {
+				display: flex;
+				flex-direction: row;
+				gap: 16px;
+
+				font-size: 12px;
+				font-family: 'Space Mono', monospace !important;
+				color: var(--bg-cherry-500);
+			}
+		}
+	}
+
+	.query-context {
+		padding: 12px;
+		background-color: var(--bg-ink-400);
+		border-radius: 4px;
+		border-left: 3px solid var(--bg-robin-500);
+		color: var(--bg-ink-300) !important;
+
+		.ant-card-head {
+			color: var(--bg-vanilla-300) !important;
+		}
+
+		.context-details {
+			display: flex;
+			flex-wrap: wrap;
+			gap: 12px;
+
+			p {
+				margin: 0;
+				font-size: 13px;
+
+				strong {
+					color: var(--bg-vanilla-300);
+					margin-right: 4px;
+				}
+			}
+		}
+	}
+
+	.code-mirror-card {
+		.ant-card-body {
+			padding: 8px;
+		}
+	}
+
+	.query-text-preview-title {
+		font-size: 13px;
+		color: var(--bg-vanilla-100);
+		background-color: var(--bg-robin-500);
+		padding: 2px 6px;
+		border-radius: 2px;
+		margin-right: 4px;
+	}
+
+	.query-text-preview {
+		font-family: 'Space Mono', monospace;
+		font-size: 13px;
+		color: var(--bg-vanilla-200);
+		padding: 2px 6px;
+		font-style: italic;
+	}
+
+	.query-examples-card {
+		background-color: var(--bg-ink-400);
+		border: 1px solid var(--bg-slate-200);
+
+		.ant-card-body {
+			padding: 0;
+		}
+
+		.query-examples {
+			.ant-collapse-header {
+				padding: 8px 16px !important;
+				color: var(--bg-vanilla-300) !important;
+				font-weight: 500;
+			}
+
+			.ant-collapse-content {
+				background-color: transparent !important;
+			}
+
+			.query-examples-list {
+				display: flex;
+				flex-direction: row;
+				gap: 8px;
+				flex-wrap: wrap;
+			}
+
+			.query-example-tag {
+				display: flex;
+				flex-direction: column;
+				gap: 4px;
+				padding: 8px 12px;
+				background-color: var(--bg-ink-400);
+				border: 1px solid var(--bg-slate-200);
+				border-radius: 4px;
+				cursor: pointer;
+				transition: all 0.2s ease;
+				outline: none;
+
+				&:hover {
+					background-color: var(--bg-ink-300);
+					border-color: var(--bg-robin-500);
+				}
+
+				&:focus-visible {
+					outline: 2px solid var(--bg-robin-500);
+					outline-offset: 2px;
+				}
+
+				.query-example-content {
+					display: flex;
+					align-items: center;
+					gap: 8px;
+				}
+
+				.query-example-label {
+					font-weight: 500;
+					color: var(--bg-vanilla-300);
+					font-size: 13px;
+				}
+
+				.query-example-query {
+					font-family: 'Space Mono', monospace;
+					font-size: 12px;
+					color: var(--bg-vanilla-200);
+					background-color: var(--bg-ink-300);
+					padding: 2px 6px;
+					border-radius: 2px;
+				}
+
+				.query-example-description {
+					font-size: 12px;
+					color: var(--bg-vanilla-200);
+					opacity: 0.8;
+				}
+			}
+
+			.query-example-content {
+				display: inline-flex;
+
+				cursor: pointer;
+			}
+		}
+	}
+
+	// Context indicator styles
+	.context-indicator {
+		display: flex;
+		align-items: center;
+		flex-wrap: wrap;
+		padding: 8px 12px;
+		margin-bottom: 8px;
+		border-radius: 4px;
+		font-size: 13px;
+		background-color: #f5f5f5;
+		border-left: 4px solid #1890ff;
+
+		display: none;
+
+		.triplet-info {
+			margin-left: 16px;
+			display: inline-flex;
+			align-items: center;
+			gap: 4px;
+		}
+
+		.query-pair-info {
+			display: inline-flex;
+			align-items: center;
+			gap: 4px;
+			border-left: 1px solid rgba(0, 0, 0, 0.1);
+			padding-left: 8px;
+			background-color: rgba(0, 0, 0, 0.03);
+			padding: 4px 8px;
+			border-radius: 4px;
+		}
+
+		// Color variations based on context
+		&.context-indicator-key {
+			border-left-color: #1890ff; // blue
+			background-color: rgba(24, 144, 255, 0.1);
+		}
+
+		&.context-indicator-operator {
+			border-left-color: #722ed1; // purple
+			background-color: rgba(114, 46, 209, 0.1);
+		}
+
+		&.context-indicator-value {
+			border-left-color: #52c41a; // green
+			background-color: rgba(82, 196, 26, 0.1);
+		}
+
+		&.context-indicator-conjunction {
+			border-left-color: #fa8c16; // orange
+			background-color: rgba(250, 140, 22, 0.1);
+		}
+
+		&.context-indicator-function {
+			border-left-color: #13c2c2; // cyan
+			background-color: rgba(19, 194, 194, 0.1);
+		}
+
+		&.context-indicator-parenthesis {
+			border-left-color: #eb2f96; // magenta
+			background-color: rgba(235, 47, 150, 0.1);
+		}
+	}
+}
+
+.query-status-popover {
+	.ant-popover-arrow {
+		display: none !important;
+	}
+
+	.ant-popover-content {
+		background: linear-gradient(
+			139deg,
+			rgba(18, 19, 23, 0.8) 0%,
+			rgba(18, 19, 23, 0.9) 98.68%
+		);
+		box-shadow: 4px 10px 16px 2px rgba(0, 0, 0, 0.2);
+		backdrop-filter: blur(20px);
+
+		margin-top: -6px !important;
+	}
+}
+
+// /* Dark mode support */
+// :global(.darkMode) {
+// 	.code-mirror-where-clause {
+// 		.cm-editor {
+// 			border-color: var(--bg-slate-500);
+// 			background-color: var(--bg-ink-400);
+// 		}
+
+// 		.cursor-position {
+// 			background-color: var(--bg-ink-400);
+// 			color: var(--bg-vanilla-100);
+// 		}
+
+// 		.query-context {
+// 			background-color: var(--bg-ink-400);
+// 			color: var(--bg-vanilla-100);
+
+// 			h3 {
+// 				color: var(--bg-vanilla-100);
+// 			}
+
+// 			.context-details {
+// 				p {
+// 					strong {
+// 						color: var(--bg-vanilla-200);
+// 					}
+// 				}
+// 			}
+// 		}
+
+// 		.query-examples-card {
+// 			background-color: var(--bg-ink-400);
+// 			border-color: var(--bg-slate-500);
+
+// 			.ant-collapse-header {
+// 				color: var(--bg-vanilla-100) !important;
+// 			}
+
+// 			.query-example-tag {
+// 				background-color: var(--bg-ink-400);
+// 				border-color: var(--bg-slate-500);
+
+// 				&:hover {
+// 					background-color: var(--bg-ink-300);
+// 					border-color: var(--bg-robin-500);
+// 				}
+
+// 				.query-example-label {
+// 					color: var(--bg-vanilla-100);
+// 				}
+
+// 				.query-example-query {
+// 					color: var(--bg-vanilla-100);
+// 					background-color: var(--bg-ink-300);
+// 				}
+
+// 				.query-example-description {
+// 					color: var(--bg-vanilla-100);
+// 				}
+// 			}
+// 		}
+
+// 		.context-indicator {
+// 			background-color: var(--bg-ink-300);
+// 			color: var(--bg-vanilla-100);
+
+// 			.query-pair-info {
+// 				border-left: 1px solid rgba(255, 255, 255, 0.1);
+// 				background-color: rgba(255, 255, 255, 0.05);
+// 			}
+// 		}
+// 	}
+// }
+
+.lightMode {
+	.code-mirror-where-clause {
+		.query-where-clause-editor-container {
+			.query-status-container {
+				background-color: var(--bg-vanilla-100) !important;
+				border: 1px solid var(--bg-vanilla-300);
+
+				&.hasErrors {
+					border-color: var(--bg-cherry-500);
+				}
+			}
+		}
+
+		.query-where-clause-editor {
+			&.hasErrors {
+				.cm-editor {
+					.cm-content {
+						border-color: var(--bg-cherry-500);
+						border-top-right-radius: 0px !important;
+						border-bottom-right-radius: 0px !important;
+					}
+				}
+			}
+		}
+
+		.cm-editor {
+			&:focus-within {
+				border-color: var(--bg-robin-500);
+			}
+
+			&.cm-focused {
+				outline: 1px solid var(--bg-vanilla-300);
+			}
+
+			.cm-content {
+				border-radius: 2px;
+				border: 1px solid var(--bg-vanilla-300);
+				padding: 0px !important;
+				background-color: var(--bg-vanilla-100) !important;
+
+				&:focus-within {
+					border-color: var(--bg-vanilla-200);
+				}
+			}
+
+			.cm-tooltip-autocomplete {
+				background: var(--bg-vanilla-100) !important;
+
+				border: 0px;
+				backdrop-filter: blur(20px);
+
+				ul {
+					li {
+						background-color: var(--bg-vanilla-100) !important;
+						color: var(--bg-ink-300) !important;
+
+						&:hover {
+							background-color: var(--bg-vanilla-200) !important;
+						}
+					}
+				}
+			}
+
+			.cm-line {
+				background-color: var(--bg-vanilla-100) !important;
+
+				::-moz-selection {
+					background: var(--bg-vanilla-100) !important;
+				}
+
+				::selection {
+					background: var(--bg-vanilla-100) !important;
+				}
+			}
+
+			.cm-selectionBackground {
+				background: var(--bg-vanilla-100) !important;
+			}
+		}
+
+		.cursor-position {
+			color: var(--bg-vanilla-200);
+			background-color: var(--bg-vanilla-100);
+		}
+
+		.query-context {
+			background-color: var(--bg-vanilla-100);
+			border-left: 3px solid var(--bg-vanilla-300);
+			color: var(--bg-vanilla-300) !important;
+
+			.ant-card-head {
+				color: var(--bg-ink-300) !important;
+			}
+
+			.context-details {
+				p {
+					strong {
+						color: var(--bg-ink-300);
+					}
+				}
+			}
+		}
+
+		.query-examples-card {
+			background-color: var(--bg-vanilla-100);
+			border: 1px solid var(--bg-vanilla-300);
+
+			.query-examples {
+				.ant-collapse-header {
+					color: var(--bg-ink-300) !important;
+				}
+
+				.query-example-tag {
+					background-color: var(--bg-vanilla-100);
+					border: 1px solid var(--bg-vanilla-300);
+
+					&:hover {
+						background-color: var(--bg-vanilla-200);
+						border-color: var(--bg-vanilla-300);
+					}
+
+					.query-example-label {
+						color: var(--bg-ink-300);
+					}
+
+					.query-example-query {
+						color: var(--bg-ink-300);
+						background-color: var(--bg-vanilla-100);
+					}
+
+					.query-example-description {
+						color: var(--bg-ink-300);
+					}
+				}
+			}
+		}
+
+		.context-indicator {
+			background-color: var(--bg-vanilla-100);
+			border-left: 4px solid var(--bg-vanilla-300);
+
+			display: none;
+
+			.query-pair-info {
+				border-left: 1px solid rgba(255, 255, 255, 0.1);
+				background-color: rgba(255, 255, 255, 0.03);
+			}
+
+			// Color variations based on context
+			&.context-indicator-key {
+				border-left-color: #1890ff; // blue
+				background-color: rgba(24, 144, 255, 0.1);
+			}
+
+			&.context-indicator-operator {
+				border-left-color: #722ed1; // purple
+				background-color: rgba(114, 46, 209, 0.1);
+			}
+
+			&.context-indicator-value {
+				border-left-color: #52c41a; // green
+				background-color: rgba(82, 196, 26, 0.1);
+			}
+
+			&.context-indicator-conjunction {
+				border-left-color: #fa8c16; // orange
+				background-color: rgba(250, 140, 22, 0.1);
+			}
+
+			&.context-indicator-function {
+				border-left-color: #13c2c2; // cyan
+				background-color: rgba(19, 194, 194, 0.1);
+			}
+
+			&.context-indicator-parenthesis {
+				border-left-color: #eb2f96; // magenta
+				background-color: rgba(235, 47, 150, 0.1);
+			}
+		}
+	}
+
+	.query-status-popover {
+		.ant-popover-content {
+			background: var(--bg-vanilla-100);
+			box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
+		}
+	}
+}

frontend/src/components/QueryBuilderV2/QueryV2/QuerySearch/constants.ts

@@ -0,0 +1,79 @@
+export const queryExamples = [
+	{
+		label: 'Basic Query',
+		query: "status = 'error'",
+		description: 'Find all errors',
+	},
+	{
+		label: 'Multiple Conditions',
+		query: "status = 'error' AND service = 'frontend'",
+		description: 'Find errors from frontend service',
+	},
+	{
+		label: 'IN Operator',
+		query: "status IN ['error', 'warning']",
+		description: 'Find items with specific statuses',
+	},
+	{
+		label: 'Function Usage',
+		query: "HAS(service, 'frontend')",
+		description: 'Use HAS function',
+	},
+	{
+		label: 'Numeric Comparison',
+		query: 'duration > 1000',
+		description: 'Find items with duration greater than 1000ms',
+	},
+	{
+		label: 'Range Query',
+		query: 'duration BETWEEN 100 AND 1000',
+		description: 'Find items with duration between 100ms and 1000ms',
+	},
+	{
+		label: 'Pattern Matching',
+		query: "service LIKE 'front%'",
+		description: 'Find services starting with "front"',
+	},
+	{
+		label: 'Complex Conditions',
+		query: "(status = 'error' OR status = 'warning') AND service = 'frontend'",
+		description: 'Find errors or warnings from frontend service',
+	},
+	{
+		label: 'Multiple Functions',
+		query: "HAS(service, 'frontend') AND HAS(status, 'error')",
+		description: 'Use multiple HAS functions',
+	},
+	{
+		label: 'NOT Operator',
+		query: "NOT status = 'success'",
+		description: 'Find items that are not successful',
+	},
+	{
+		label: 'Array Contains',
+		query: "tags CONTAINS 'production'",
+		description: 'Find items with production tag',
+	},
+	{
+		label: 'Regex Pattern',
+		query: "service REGEXP '^prod-.*'",
+		description: 'Find services matching regex pattern',
+	},
+	{
+		label: 'Null Check',
+		query: 'error IS NULL',
+		description: 'Find items without errors',
+	},
+	{
+		label: 'Multiple Attributes',
+		query:
+			"service = 'frontend' AND environment = 'production' AND status = 'error'",
+		description: 'Find production frontend errors',
+	},
+	{
+		label: 'Nested Conditions',
+		query:
+			"(service = 'frontend' OR service = 'backend') AND (status = 'error' OR status = 'warning')",
+		description: 'Find errors or warnings from frontend or backend',
+	},
+];

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

@@ -0,0 +1,234 @@
+import { Dropdown } from 'antd';
+import cx from 'classnames';
+import { ENTITY_VERSION_V4 } from 'constants/app';
+import { PANEL_TYPES } from 'constants/queryBuilder';
+import QBEntityOptions from 'container/QueryBuilder/components/QBEntityOptions/QBEntityOptions';
+import { QueryProps } from 'container/QueryBuilder/components/Query/Query.interfaces';
+import SpanScopeSelector from 'container/QueryBuilder/filters/QueryBuilderSearchV2/SpanScopeSelector';
+import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
+import { useQueryOperations } from 'hooks/queryBuilder/useQueryBuilderOperations';
+import { Copy, Ellipsis, Trash } from 'lucide-react';
+import { memo, useCallback, useMemo, useState } from 'react';
+import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
+import { HandleChangeQueryDataV5 } from 'types/common/operations.types';
+import { DataSource } from 'types/common/queryBuilder';
+
+import MetricsAggregateSection from './MerticsAggregateSection/MetricsAggregateSection';
+import { MetricsSelect } from './MetricsSelect/MetricsSelect';
+import QueryAddOns from './QueryAddOns/QueryAddOns';
+import QueryAggregation from './QueryAggregation/QueryAggregation';
+import QuerySearch from './QuerySearch/QuerySearch';
+
+export const QueryV2 = memo(function QueryV2({
+	ref,
+	index,
+	queryVariant,
+	query,
+	filterConfigs,
+	isListViewPanel = false,
+	version,
+	showOnlyWhereClause = false,
+}: QueryProps & { ref: React.RefObject<HTMLDivElement> }): JSX.Element {
+	const { cloneQuery, panelType } = useQueryBuilder();
+
+	const showFunctions = query?.functions?.length > 0;
+	const { dataSource } = query;
+
+	const [isCollapsed, setIsCollapsed] = useState(false);
+
+	const {
+		handleChangeQueryData,
+		handleDeleteQuery,
+		handleQueryFunctionsUpdates,
+		handleChangeDataSource,
+	} = useQueryOperations({
+		index,
+		query,
+		filterConfigs,
+		isListViewPanel,
+		entityVersion: version,
+	});
+
+	const handleToggleDisableQuery = useCallback(() => {
+		handleChangeQueryData('disabled', !query.disabled);
+	}, [handleChangeQueryData, query]);
+
+	const handleToggleCollapsQuery = (): void => {
+		setIsCollapsed(!isCollapsed);
+	};
+
+	const handleCloneEntity = (): void => {
+		cloneQuery('query', query);
+	};
+
+	const showReduceTo = useMemo(
+		() =>
+			dataSource === DataSource.METRICS &&
+			(panelType === PANEL_TYPES.TABLE ||
+				panelType === PANEL_TYPES.PIE ||
+				panelType === PANEL_TYPES.VALUE),
+		[dataSource, panelType],
+	);
+
+	const showSpanScopeSelector = useMemo(() => dataSource === DataSource.TRACES, [
+		dataSource,
+	]);
+
+	const handleChangeAggregateEvery = useCallback(
+		(value: IBuilderQuery['stepInterval']) => {
+			handleChangeQueryData('stepInterval', value);
+		},
+		[handleChangeQueryData],
+	);
+
+	const handleSearchChange = useCallback(
+		(value: string) => {
+			(handleChangeQueryData as HandleChangeQueryDataV5)('filter', {
+				expression: value,
+			});
+		},
+		[handleChangeQueryData],
+	);
+
+	const handleChangeAggregation = useCallback(
+		(value: string) => {
+			(handleChangeQueryData as HandleChangeQueryDataV5)('aggregations', [
+				{
+					expression: value,
+				},
+			]);
+		},
+		[handleChangeQueryData],
+	);
+
+	return (
+		<div
+			className={cx('query-v2', { 'where-clause-view': showOnlyWhereClause })}
+			ref={ref}
+		>
+			<div className="qb-content-section">
+				{!showOnlyWhereClause && (
+					<div className="qb-header-container">
+						<div className="query-actions-container">
+							<div className="query-actions-left-container">
+								<QBEntityOptions
+									isMetricsDataSource={dataSource === DataSource.METRICS}
+									showFunctions={
+										(version && version === ENTITY_VERSION_V4) ||
+										query.dataSource === DataSource.LOGS ||
+										showFunctions ||
+										false
+									}
+									isCollapsed={isCollapsed}
+									entityType="query"
+									entityData={query}
+									onToggleVisibility={handleToggleDisableQuery}
+									onDelete={handleDeleteQuery}
+									onCloneQuery={cloneQuery}
+									onCollapseEntity={handleToggleCollapsQuery}
+									query={query}
+									onQueryFunctionsUpdates={handleQueryFunctionsUpdates}
+									showDeleteButton={false}
+									showCloneOption={false}
+									isListViewPanel={isListViewPanel}
+									index={index}
+									queryVariant={queryVariant}
+									onChangeDataSource={handleChangeDataSource}
+								/>
+							</div>
+
+							{!isListViewPanel && (
+								<Dropdown
+									className="query-actions-dropdown"
+									menu={{
+										items: [
+											{
+												label: 'Clone',
+												key: 'clone-query',
+												icon: <Copy size={14} />,
+												onClick: handleCloneEntity,
+											},
+											{
+												label: 'Delete',
+												key: 'delete-query',
+												icon: <Trash size={14} />,
+												onClick: handleDeleteQuery,
+											},
+										],
+									}}
+									placement="bottomRight"
+								>
+									<Ellipsis size={16} />
+								</Dropdown>
+							)}
+						</div>
+					</div>
+				)}
+
+				{!isCollapsed && (
+					<div className="qb-elements-container">
+						<div className="qb-search-container">
+							{dataSource === DataSource.METRICS && (
+								<div className="metrics-select-container">
+									<MetricsSelect query={query} index={index} version="v4" />
+								</div>
+							)}
+
+							<div className="qb-search-filter-container">
+								<div className="query-search-container">
+									<QuerySearch
+										key={`query-search-${query.queryName}-${query.dataSource}`}
+										onChange={handleSearchChange}
+										queryData={query}
+										dataSource={dataSource}
+									/>
+								</div>
+
+								{showSpanScopeSelector && (
+									<div className="traces-search-filter-container">
+										<div className="traces-search-filter-in">in</div>
+										<SpanScopeSelector query={query} />
+									</div>
+								)}
+							</div>
+						</div>
+
+						{!showOnlyWhereClause &&
+							!isListViewPanel &&
+							dataSource !== DataSource.METRICS && (
+								<QueryAggregation
+									dataSource={dataSource}
+									key={`query-search-${query.queryName}-${query.dataSource}`}
+									panelType={panelType || undefined}
+									onAggregationIntervalChange={handleChangeAggregateEvery}
+									onChange={handleChangeAggregation}
+									queryData={query}
+								/>
+							)}
+
+						{!showOnlyWhereClause && dataSource === DataSource.METRICS && (
+							<MetricsAggregateSection
+								panelType={panelType}
+								query={query}
+								index={index}
+								key={`metrics-aggregate-section-${query.queryName}-${query.dataSource}`}
+								version="v4"
+							/>
+						)}
+
+						{!showOnlyWhereClause && (
+							<QueryAddOns
+								index={index}
+								query={query}
+								version="v3"
+								isListViewPanel={isListViewPanel}
+								showReduceTo={showReduceTo}
+								panelType={panelType}
+							/>
+						)}
+					</div>
+				)}
+			</div>
+		</div>
+	);
+});

frontend/src/components/QueryBuilderV2/utils.ts

@@ -0,0 +1,185 @@
+import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
+import { Having, TagFilter } from 'types/api/queryBuilder/queryBuilderData';
+import {
+	LogAggregation,
+	MetricAggregation,
+	TraceAggregation,
+} from 'types/api/v5/queryRange';
+import { DataSource } from 'types/common/queryBuilder';
+
+/**
+ * Check if an operator requires array values (like IN, NOT IN)
+ * @param operator - The operator to check
+ * @returns True if the operator requires array values
+ */
+const isArrayOperator = (operator: string): boolean => {
+	const arrayOperators = ['in', 'nin', 'IN', 'NOT IN'];
+	return arrayOperators.includes(operator);
+};
+
+/**
+ * Format a value for the expression string
+ * @param value - The value to format
+ * @param operator - The operator being used (to determine if array is needed)
+ * @returns Formatted value string
+ */
+const formatValueForExpression = (
+	value: string[] | string | number | boolean,
+	operator?: string,
+): string => {
+	// For IN operators, ensure value is always an array
+	if (isArrayOperator(operator || '')) {
+		const arrayValue = Array.isArray(value) ? value : [value];
+		return `[${arrayValue
+			.map((v) =>
+				typeof v === 'string' ? `'${v.replace(/'/g, "\\'")}'` : String(v),
+			)
+			.join(', ')}]`;
+	}
+
+	if (Array.isArray(value)) {
+		// Handle array values (e.g., for IN operations)
+		return `[${value
+			.map((v) =>
+				typeof v === 'string' ? `'${v.replace(/'/g, "\\'")}'` : String(v),
+			)
+			.join(', ')}]`;
+	}
+
+	if (typeof value === 'string') {
+		// Add single quotes around all string values and escape internal single quotes
+		return `'${value.replace(/'/g, "\\'")}'`;
+	}
+
+	return String(value);
+};
+
+export const convertFiltersToExpression = (
+	filters: TagFilter,
+): { expression: string } => {
+	if (!filters?.items || filters.items.length === 0) {
+		return { expression: '' };
+	}
+
+	const expressions = filters.items
+		.map((filter) => {
+			const { key, op, value } = filter;
+
+			// Skip if key is not defined
+			if (!key?.key) {
+				return '';
+			}
+
+			const formattedValue = formatValueForExpression(value, op);
+			return `${key.key} ${op} ${formattedValue}`;
+		})
+		.filter((expression) => expression !== ''); // Remove empty expressions
+
+	return {
+		expression: expressions.join(' AND '),
+	};
+};
+
+/**
+ * Convert old having format to new having format
+ * @param having - Array of old having objects with columnName, op, and value
+ * @returns New having format with expression string
+ */
+export const convertHavingToExpression = (
+	having: Having[],
+): { expression: string } => {
+	if (!having || having.length === 0) {
+		return { expression: '' };
+	}
+
+	const expressions = having
+		.map((havingItem) => {
+			const { columnName, op, value } = havingItem;
+
+			// Skip if columnName is not defined
+			if (!columnName) {
+				return '';
+			}
+
+			// Format value based on its type
+			let formattedValue: string;
+			if (Array.isArray(value)) {
+				// For array values, format as [val1, val2, ...]
+				formattedValue = `[${value.join(', ')}]`;
+			} else {
+				// For single values, just convert to string
+				formattedValue = String(value);
+			}
+
+			return `${columnName} ${op} ${formattedValue}`;
+		})
+		.filter((expression) => expression !== ''); // Remove empty expressions
+
+	return {
+		expression: expressions.join(' AND '),
+	};
+};
+
+/**
+ * Convert old aggregation format to new aggregation format
+ * @param aggregateOperator - The aggregate operator (e.g., 'sum', 'count', 'avg')
+ * @param aggregateAttribute - The attribute to aggregate
+ * @param dataSource - The data source type
+ * @param timeAggregation - Time aggregation for metrics (optional)
+ * @param spaceAggregation - Space aggregation for metrics (optional)
+ * @param alias - Optional alias for the aggregation
+ * @returns New aggregation format based on data source
+ *
+ */
+export const convertAggregationToExpression = (
+	aggregateOperator: string,
+	aggregateAttribute: BaseAutocompleteData,
+	dataSource: DataSource,
+	timeAggregation?: string,
+	spaceAggregation?: string,
+	alias?: string,
+): (TraceAggregation | LogAggregation | MetricAggregation)[] | undefined => {
+	// Skip if no operator or attribute key
+	if (!aggregateOperator) {
+		return undefined;
+	}
+
+	// Replace noop with count as default
+	const normalizedOperator =
+		aggregateOperator === 'noop' ? 'count' : aggregateOperator;
+	const normalizedTimeAggregation =
+		timeAggregation === 'noop' ? 'count' : timeAggregation;
+	const normalizedSpaceAggregation =
+		spaceAggregation === 'noop' ? 'count' : spaceAggregation;
+
+	// For metrics, use the MetricAggregation format
+	if (dataSource === DataSource.METRICS) {
+		return [
+			{
+				metricName: aggregateAttribute.key,
+				timeAggregation: (normalizedTimeAggregation || normalizedOperator) as any,
+				spaceAggregation: (normalizedSpaceAggregation || normalizedOperator) as any,
+			} as MetricAggregation,
+		];
+	}
+
+	// For traces and logs, use expression format
+	const expression = `${normalizedOperator}(${aggregateAttribute.key})`;
+
+	if (dataSource === DataSource.TRACES) {
+		return [
+			{
+				expression,
+				...(alias && { alias }),
+			} as TraceAggregation,
+		];
+	}
+
+	// For logs
+	return [
+		{
+			expression,
+			...(alias && { alias }),
+		} as LogAggregation,
+	];
+};

frontend/src/components/RouteTab/index.tsx

@@ -1,10 +1,5 @@
 import { Tabs, TabsProps } from 'antd';
-import {
-	generatePath,
-	matchPath,
-	useLocation,
-	useParams,
-} from 'react-router-dom';
+import { useLocation, useParams } from 'react-router-dom';
 
 import { RouteTabProps } from './types';
 
@@ -22,13 +17,20 @@ function RouteTab({
 	const params = useParams<Params>();
 	const location = useLocation();
 
+	// Replace dynamic parameters in routes
+	const routesWithParams = routes.map((route) => ({
+		...route,
+		route: route.route.replace(
+			/:(\w+)/g,
+			(match, param) => params[param] || match,
+		),
+	}));
+
 	// Find the matching route for the current pathname
-	const currentRoute = routes.find((route) => {
-		const routePath = route.route.split('?')[0];
-		return matchPath(location.pathname, {
-			path: routePath,
-			exact: true,
-		});
+	const currentRoute = routesWithParams.find((route) => {
+		const routePattern = route.route.replace(/:(\w+)/g, '([^/]+)');
+		const regex = new RegExp(`^${routePattern}$`);
+		return regex.test(location.pathname);
 	});
 
 	const onChange = (activeRoute: string): void => {
@@ -36,15 +38,14 @@ function RouteTab({
 			onChangeHandler(activeRoute);
 		}
 
-		const selectedRoute = routes.find((e) => e.key === activeRoute);
+		const selectedRoute = routesWithParams.find((e) => e.key === activeRoute);
 
 		if (selectedRoute) {
-			const resolvedRoute = generatePath(selectedRoute.route, params);
-			history.push(resolvedRoute);
+			history.push(selectedRoute.route);
 		}
 	};
 
-	const items = routes.map(({ Component, name, route, key }) => ({
+	const items = routesWithParams.map(({ Component, name, route, key }) => ({
 		label: name,
 		key,
 		tabKey: route,

frontend/src/constants/app.ts

@@ -15,3 +15,4 @@ export const DASHBOARD_TIME_IN_DURATION = 'refreshInterval';
 
 export const DEFAULT_ENTITY_VERSION = 'v3';
 export const ENTITY_VERSION_V4 = 'v4';
+export const ENTITY_VERSION_V5 = 'v5';

frontend/src/constants/query.ts

@@ -46,5 +46,5 @@ export enum QueryParams {
 	msgSystem = 'msgSystem',
 	destination = 'destination',
 	kindString = 'kindString',
-	tab = 'tab',
+	selectedExplorerView = 'selectedExplorerView',
 }

frontend/src/constants/queryBuilder.ts

@@ -169,6 +169,9 @@ export const initialQueryBuilderFormValues: IBuilderQuery = {
 	aggregateAttribute: initialAutocompleteData,
 	timeAggregation: MetricAggregateOperator.RATE,
 	spaceAggregation: MetricAggregateOperator.SUM,
+	filter: { expression: '' },
+	aggregations: [{ expression: 'count() ' }],
+	havingExpression: { expression: '' },
 	functions: [],
 	filters: { items: [], op: 'AND' },
 	expression: createNewBuilderItemName({

frontend/src/constants/queryBuilderOperators.ts

@@ -6,10 +6,6 @@ import {
 import { SelectOption } from 'types/common/select';
 
 export const metricAggregateOperatorOptions: SelectOption<string, string>[] = [
-	{
-		value: MetricAggregateOperator.NOOP,
-		label: 'NOOP',
-	},
 	{
 		value: MetricAggregateOperator.COUNT,
 		label: 'Count',
@@ -130,10 +126,6 @@ export const metricAggregateOperatorOptions: SelectOption<string, string>[] = [
 ];
 
 export const tracesAggregateOperatorOptions: SelectOption<string, string>[] = [
-	{
-		value: TracesAggregatorOperator.NOOP,
-		label: 'NOOP',
-	},
 	{
 		value: TracesAggregatorOperator.COUNT,
 		label: 'Count',
@@ -217,10 +209,6 @@ export const tracesAggregateOperatorOptions: SelectOption<string, string>[] = [
 ];
 
 export const logsAggregateOperatorOptions: SelectOption<string, string>[] = [
-	{
-		value: LogsAggregatorOperator.NOOP,
-		label: 'NOOP',
-	},
 	{
 		value: LogsAggregatorOperator.COUNT,
 		label: 'Count',

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

@@ -54,19 +54,21 @@ function DomainList(): JSX.Element {
 
 	// initialise tab with default query.
 	useShareBuilderUrl({
-		...initialQueriesMap.traces,
-		builder: {
-			...initialQueriesMap.traces.builder,
-			queryData: [
-				{
-					...initialQueriesMap.traces.builder.queryData[0],
-					dataSource: DataSource.TRACES,
-					aggregateOperator: 'noop',
-					aggregateAttribute: {
-						...initialQueriesMap.traces.builder.queryData[0].aggregateAttribute,
+		defaultValue: {
+			...initialQueriesMap.traces,
+			builder: {
+				...initialQueriesMap.traces.builder,
+				queryData: [
+					{
+						...initialQueriesMap.traces.builder.queryData[0],
+						dataSource: DataSource.TRACES,
+						aggregateOperator: 'noop',
+						aggregateAttribute: {
+							...initialQueriesMap.traces.builder.queryData[0].aggregateAttribute,
+						},
 					},
-				},
-			],
+				],
+			},
 		},
 	});
 

frontend/src/container/AppLayout/AppLayout.styles.scss

@@ -1,7 +1,4 @@
-// Earlier we were having app-banner-container class
-// we change it to app-banner-wrapper as the adblocker was blocking the app-banner-container class
-// Keep an eye on What classnames are used in the codebase
-.app-banner-wrapper {
+.app-banner-container {
 	position: relative;
 	width: 100%;
 }

frontend/src/container/AppLayout/index.tsx

@@ -63,6 +63,7 @@ import {
 } from 'types/api/licensesV3/getActive';
 import AppReducer from 'types/reducer/app';
 import { USER_ROLES } from 'types/roles';
+import { checkVersionState } from 'utils/app';
 import { eventEmitter } from 'utils/getEventEmitter';
 import {
 	getFormattedDate,
@@ -97,11 +98,16 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 
 	const [showSlowApiWarning, setShowSlowApiWarning] = useState(false);
 	const [slowApiWarningShown, setSlowApiWarningShown] = useState(false);
+	const [shouldFetchChangelog, setShouldFetchChangelog] = useState<boolean>(
+		false,
+	);
 
-	const { latestVersion } = useSelector<AppState, AppReducer>(
+	const { currentVersion, latestVersion } = useSelector<AppState, AppReducer>(
 		(state) => state.app,
 	);
 
+	const isLatestVersion = checkVersionState(currentVersion, latestVersion);
+
 	const handleBillingOnSuccess = (
 		data: SuccessResponseV2<CheckoutSuccessPayloadProps>,
 	): void => {
@@ -157,7 +163,7 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 			queryFn: (): Promise<SuccessResponse<ChangelogSchema> | ErrorResponse> =>
 				getChangelogByVersion(latestVersion),
 			queryKey: ['getChangelogByVersion', latestVersion],
-			enabled: isLoggedIn && !isCloudUserVal && Boolean(latestVersion),
+			enabled: isLoggedIn && !isCloudUserVal && shouldFetchChangelog,
 		},
 	]);
 
@@ -217,7 +223,7 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 
 		if (
 			getUserVersionResponse.isFetched &&
-			getUserVersionResponse.isSuccess &&
+			getUserLatestVersionResponse.isSuccess &&
 			getUserVersionResponse.data &&
 			getUserVersionResponse.data.payload
 		) {
@@ -255,13 +261,18 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 		getUserVersionResponse.isLoading,
 		getUserVersionResponse.isError,
 		getUserVersionResponse.data,
-		getUserVersionResponse.isSuccess,
 		getUserLatestVersionResponse.isFetched,
 		getUserVersionResponse.isFetched,
 		getUserLatestVersionResponse.isSuccess,
 		notifications,
 	]);
 
+	useEffect(() => {
+		if (!isLatestVersion) {
+			setShouldFetchChangelog(true);
+		}
+	}, [isLatestVersion]);
+
 	useEffect(() => {
 		if (
 			getChangelogByVersionResponse.isFetched &&
@@ -602,7 +613,7 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 			</Helmet>
 
 			{isLoggedIn && (
-				<div className={cx('app-banner-wrapper')}>
+				<div className={cx('app-banner-container')}>
 					{SHOW_TRIAL_EXPIRY_BANNER && (
 						<div className="trial-expiry-banner">
 							You are in free trial period. Your free trial will end on{' '}

frontend/src/container/DownloadV2/DownloadV2.tsx

@@ -69,7 +69,7 @@ function Download({ data, isLoading, fileName }: DownloadProps): JSX.Element {
 			}
 		>
 			<Button
-				className="periscope-btn"
+				className="periscope-btn ghost"
 				loading={isLoading}
 				icon={<FileDown size={14} />}
 			/>

frontend/src/container/EmptyLogsSearch/EmptyLogsSearch.styles.scss

@@ -1,173 +1,30 @@
-.empty-logs-search {
-	&__container {
-		display: flex;
-		flex-direction: column;
-		justify-content: center;
-		align-items: center;
-		height: 240px;
-	}
-	&__content {
+.empty-logs-search-container {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	height: 240px;
+
+	.empty-logs-search-container-content {
 		display: flex;
 		flex-direction: column;
 		gap: 4px;
+
 		color: var(--text-vanilla-400);
 		font-family: Inter;
 		font-size: 14px;
 		font-style: normal;
 		font-weight: 400;
-		line-height: 18px;
+		line-height: 18px; /* 128.571% */
 		letter-spacing: -0.07px;
-		align-items: flex-start;
+
 		.empty-state-svg {
 			height: 50px;
 			width: 50px;
 		}
-	}
-	&__sub-text {
-		font-weight: 600;
-	}
 
-	&__container {
-		&--custom-message {
-			height: 445px;
-			.empty-state-svg {
-				height: 32px;
-				width: 32px;
-			}
-			.empty-logs-search {
-				&__header {
-					display: flex;
-					align-items: center;
-					gap: 4px;
-				}
-
-				&__title {
-					color: var(--bg-vanilla-100);
-					font-size: 14px;
-					font-weight: 500;
-					line-height: 20px;
-					letter-spacing: -0.07px;
-				}
-
-				&__subtitle {
-					color: var(--bg-vanilla-400);
-					font-size: 14px;
-					font-weight: 400;
-					line-height: 20px;
-					letter-spacing: -0.07px;
-				}
-
-				&__description {
-					font-size: 14px;
-					color: var(--text-vanilla-400);
-					line-height: 20px;
-				}
-
-				&__description-list {
-					margin: 0;
-					margin-top: 8px;
-					color: var(--bg-vanilla-400);
-					font-size: 14px;
-					font-weight: 400;
-					line-height: 20px;
-					letter-spacing: -0.07px;
-					display: flex;
-					flex-direction: column;
-					gap: 6px;
-					list-style: none;
-					padding: 0;
-					font-family: Inter;
-				}
-
-				&__description-list li {
-					position: relative;
-					padding-left: 20px;
-				}
-
-				&__description-list li::before {
-					content: '⎯';
-					font-family: Inter;
-					position: absolute;
-					left: 0;
-					color: var(--bg-robin-400);
-					font-weight: bold;
-					font-size: 16px;
-					line-height: 20px;
-				}
-
-				&__clear-filters-btn {
-					display: flex;
-					width: 468px;
-					font-family: Inter;
-					padding: 12px;
-					justify-content: space-between;
-					align-items: flex-start;
-					border-radius: 3px;
-					border: 1px dashed var(--bg-slate-500);
-					background: transparent;
-					color: var(--bg-vanilla-400);
-					font-size: 14px;
-					font-weight: 400;
-					line-height: 18px;
-					letter-spacing: -0.07px;
-					cursor: pointer;
-					margin-top: 12px;
-				}
-
-				&__clear-filters-btn-icon {
-					display: flex;
-					align-items: center;
-					gap: 6px;
-				}
-
-				&__row {
-					display: flex;
-					flex-direction: row;
-					align-items: flex-end;
-					max-width: 825px;
-					gap: 25px;
-					justify-content: center;
-					margin-left: 21px;
-				}
-
-				&__content {
-					display: flex;
-					flex-direction: column;
-					gap: 4px;
-					min-width: 260px;
-				}
-
-				&__resources-card {
-					background: var(--bg-ink-400);
-					border: 1px solid var(--bg-slate-500);
-					border-radius: 4px;
-					width: 332px;
-				}
-
-				&__resources-title {
-					color: var(--bg-vanilla-400);
-					font-family: Inter;
-					font-size: 11px;
-					font-weight: 600;
-					line-height: 18px;
-					letter-spacing: 0.88px;
-					text-transform: uppercase;
-					padding: 16px 16px 12px;
-					border-bottom: 1px solid var(--bg-slate-500);
-					height: 46px;
-				}
-
-				&__resources-links {
-					padding: 16px;
-					display: flex;
-					flex-direction: column;
-					gap: 16px;
-
-					.learn-more {
-						height: 18px;
-					}
-				}
-			}
+		.sub-text {
+			font-weight: 600;
 		}
 	}
 }

frontend/src/container/EmptyLogsSearch/EmptyLogsSearch.tsx

@@ -2,24 +2,16 @@ import './EmptyLogsSearch.styles.scss';
 
 import { Typography } from 'antd';
 import logEvent from 'api/common/logEvent';
-import cx from 'classnames';
-import LearnMore from 'components/LearnMore/LearnMore';
-import { EmptyLogsListConfig } from 'container/LogsExplorerList/utils';
-import { Delete } from 'lucide-react';
 import { useEffect, useRef } from 'react';
 import { DataSource, PanelTypeKeys } from 'types/common/queryBuilder';
 
-interface EmptyLogsSearchProps {
-	dataSource: DataSource;
-	panelType: PanelTypeKeys;
-	customMessage?: EmptyLogsListConfig;
-}
-
 export default function EmptyLogsSearch({
 	dataSource,
 	panelType,
-	customMessage,
-}: EmptyLogsSearchProps): JSX.Element {
+}: {
+	dataSource: DataSource;
+	panelType: PanelTypeKeys;
+}): JSX.Element {
 	const logEventCalledRef = useRef(false);
 	useEffect(() => {
 		if (!logEventCalledRef.current) {
@@ -38,80 +30,18 @@ export default function EmptyLogsSearch({
 	}, []);
 
 	return (
-		<div
-			className={cx('empty-logs-search__container', {
-				'empty-logs-search__container--custom-message': !!customMessage,
-			})}
-		>
-			<div className="empty-logs-search__row">
-				<div className="empty-logs-search__content">
-					<img
-						src="/Icons/emptyState.svg"
-						alt="thinking-emoji"
-						className="empty-state-svg"
-					/>
-					{customMessage ? (
-						<>
-							<div className="empty-logs-search__header">
-								<Typography.Text className="empty-logs-search__title">
-									{customMessage.title}
-								</Typography.Text>
-								{customMessage.subTitle && (
-									<Typography.Text className="empty-logs-search__subtitle">
-										{customMessage.subTitle}
-									</Typography.Text>
-								)}
-							</div>
-							{Array.isArray(customMessage.description) ? (
-								<ul className="empty-logs-search__description-list">
-									{customMessage.description.map((desc) => (
-										<li key={desc}>{desc}</li>
-									))}
-								</ul>
-							) : (
-								<Typography.Text className="empty-logs-search__description">
-									{customMessage.description}
-								</Typography.Text>
-							)}
-							{/* Clear filters button */}
-							{customMessage.showClearFiltersButton && (
-								<button
-									type="button"
-									className="empty-logs-search__clear-filters-btn"
-									onClick={customMessage.onClearFilters}
-								>
-									{customMessage.clearFiltersButtonText}
-									<span className="empty-logs-search__clear-filters-btn-icon">
-										<Delete size={14} />
-										Clear filters
-									</span>
-								</button>
-							)}
-						</>
-					) : (
-						<Typography.Text>
-							<span className="empty-logs-search__sub-text">
-								This query had no results.{' '}
-							</span>
-							Edit your query and try again!
-						</Typography.Text>
-					)}
-				</div>
-				{customMessage?.documentationLinks && (
-					<div className="empty-logs-search__resources-card">
-						<div className="empty-logs-search__resources-title">RESOURCES</div>
-						<div className="empty-logs-search__resources-links">
-							{customMessage.documentationLinks.map((link) => (
-								<LearnMore key={link.text} text={link.text} url={link.url} />
-							))}
-						</div>
-					</div>
-				)}
+		<div className="empty-logs-search-container">
+			<div className="empty-logs-search-container-content">
+				<img
+					src="/Icons/emptyState.svg"
+					alt="thinking-emoji"
+					className="empty-state-svg"
+				/>
+				<Typography.Text>
+					<span className="sub-text">This query had no results. </span>
+					Edit your query and try again!
+				</Typography.Text>
 			</div>
 		</div>
 	);
 }
-
-EmptyLogsSearch.defaultProps = {
-	customMessage: null,
-};

frontend/src/container/ExplorerOptions/ExplorerOptions.styles.scss

@@ -1,12 +1,14 @@
 .explorer-options-container {
 	position: fixed;
-	bottom: 24px;
+	bottom: 8px;
 	left: calc(50% + 240px);
 	transform: translate(calc(-50% - 120px), 0);
 	transition: left 0.2s linear;
 
+	border-radius: 6px;
+	background: var(--Ink-300, #16181d);
+
 	display: flex;
-	gap: 16px;
 	background-color: transparent;
 
 	.multi-alert-button,
@@ -32,19 +34,15 @@
 .explorer-update {
 	display: inline-flex;
 	align-items: center;
-	gap: 12px;
-	padding: 10px 10px;
-	border-radius: 50px;
-	border: 1px solid var(--bg-slate-400);
-	background: rgba(22, 24, 29, 0.6);
-	backdrop-filter: blur(20px);
+	gap: 4px;
+	padding: 8px;
+	background: var(--Ink-300, #16181d);
 
 	.action-icon {
 		display: flex;
 		justify-content: center;
 		align-items: center;
-		padding: 8px;
-		border-radius: 50px;
+		padding: 6px;
 		border: 1px solid var(--bg-slate-400);
 		background: var(--bg-slate-500);
 		cursor: pointer;
@@ -64,10 +62,8 @@
 
 .explorer-options {
 	padding: 10px 12px;
-	border: 1px solid var(--bg-slate-400);
-	border-radius: 50px;
-	background: rgba(22, 24, 29, 0.6);
-	backdrop-filter: blur(20px);
+	background: var(--Ink-300, #16181d);
+	border-radius: 2px;
 
 	cursor: default;
 	display: flex;
@@ -96,27 +92,6 @@
 		align-items: center;
 		gap: 8px;
 
-		button {
-			display: flex;
-			justify-content: center;
-			align-items: center;
-			border: none;
-
-			border: 1px solid #1d2023;
-
-			box-shadow: none !important;
-
-			&.ant-btn-round {
-				padding: 8px 12px 8px 10px;
-				font-weight: 500;
-			}
-
-			&.ant-btn-round:disabled {
-				background-color: rgba(209, 209, 209, 0.074);
-				color: #5f5f5f;
-			}
-		}
-
 		.ant-select-focused {
 			border-color: transparent !important;
 
@@ -257,6 +232,10 @@
 }
 
 .lightMode {
+	.explorer-options-container {
+		background: var(--bg-vanilla-100);
+	}
+
 	.explorer-options {
 		background: transparent;
 		box-shadow: none;

frontend/src/container/ExplorerOptions/ExplorerOptions.tsx

@@ -1,12 +1,10 @@
 /* eslint-disable react/jsx-props-no-spreading */
 import './ExplorerOptions.styles.scss';
 
-import { InfoCircleOutlined } from '@ant-design/icons';
 import { Color } from '@signozhq/design-tokens';
 import {
 	Button,
 	ColorPicker,
-	Divider,
 	Input,
 	Modal,
 	RefSelectProps,
@@ -15,6 +13,7 @@ import {
 	Typography,
 } from 'antd';
 import logEvent from 'api/common/logEvent';
+import { TelemetryFieldKey } from 'api/v5/v5';
 import axios from 'axios';
 import cx from 'classnames';
 import { getViewDetailsUsingViewKey } from 'components/ExplorerCard/utils';
@@ -45,14 +44,7 @@ import { useHandleExplorerTabChange } from 'hooks/useHandleExplorerTabChange';
 import { useNotifications } from 'hooks/useNotifications';
 import { mapCompositeQueryFromQuery } from 'lib/newQueryBuilder/queryBuilderMappers/mapCompositeQueryFromQuery';
 import { cloneDeep, isEqual, omit } from 'lodash-es';
-import {
-	Check,
-	ConciergeBell,
-	Disc3,
-	PanelBottomClose,
-	Plus,
-	X,
-} from 'lucide-react';
+import { Check, ConciergeBell, Disc3, Plus, X } from 'lucide-react';
 import { useAppContext } from 'providers/App/App';
 import { FormattingOptions } from 'providers/preferences/types';
 import {
@@ -67,7 +59,6 @@ import {
 } from 'react';
 import { useHistory } from 'react-router-dom';
 import { Dashboard } from 'types/api/dashboard/getAll';
-import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';
 import { ViewProps } from 'types/api/saveViews/types';
 import { DataSource, StringOperators } from 'types/common/queryBuilder';
@@ -78,10 +69,8 @@ import ExplorerOptionsHideArea from './ExplorerOptionsHideArea';
 import { PreservedViewsInLocalStorage } from './types';
 import {
 	DATASOURCE_VS_ROUTES,
-	generateRGBAFromHex,
 	getRandomColor,
 	saveNewViewHandler,
-	setExplorerToolBarVisibility,
 } from './utils';
 
 const allowedRoles = [USER_ROLES.ADMIN, USER_ROLES.AUTHOR, USER_ROLES.EDITOR];
@@ -253,12 +242,6 @@ function ExplorerOptions({
 	const extraData = viewsData?.data?.data?.find((view) => view.id === viewKey)
 		?.extraData;
 
-	const extraDataColor = extraData ? JSON.parse(extraData).color : '';
-	const rgbaColor = generateRGBAFromHex(
-		extraDataColor || Color.BG_SIENNA_500,
-		0.08,
-	);
-
 	const { options, handleOptionsChange } = useOptionsMenu({
 		storageKey:
 			sourcepage === DataSource.TRACES
@@ -270,7 +253,7 @@ function ExplorerOptions({
 
 	const getUpdatedExtraData = (
 		extraData: string | undefined,
-		newSelectedColumns: BaseAutocompleteData[],
+		newSelectedColumns: TelemetryFieldKey[],
 		formattingOptions?: FormattingOptions,
 	): string => {
 		let updatedExtraData;
@@ -354,7 +337,7 @@ function ExplorerOptions({
 	const { handleExplorerTabChange } = useHandleExplorerTabChange();
 
 	type ExtraData = {
-		selectColumns?: BaseAutocompleteData[];
+		selectColumns?: TelemetryFieldKey[];
 		version?: number;
 	};
 
@@ -589,13 +572,6 @@ function ExplorerOptions({
 		[isDarkMode],
 	);
 
-	const hideToolbar = (): void => {
-		setExplorerToolBarVisibility(false, sourcepage);
-		if (setIsExplorerOptionHidden) {
-			setIsExplorerOptionHidden(true);
-		}
-	};
-
 	const isEditDeleteSupported = allowedRoles.includes(user.role as string);
 
 	const [
@@ -647,27 +623,6 @@ function ExplorerOptions({
 		viewsData?.data?.data,
 	]);
 
-	const infoIconText = useMemo(() => {
-		if (isLogsExplorer) {
-			return 'Learn more about Logs explorer';
-		}
-		if (isMetricsExplorer) {
-			return 'Learn more about Metrics explorer';
-		}
-		return 'Learn more about Traces explorer';
-	}, [isLogsExplorer, isMetricsExplorer]);
-
-	const infoIconLink = useMemo(() => {
-		if (isLogsExplorer) {
-			return 'https://signoz.io/docs/product-features/logs-explorer/?utm_source=product&utm_medium=logs-explorer-toolbar';
-		}
-		// TODO: Add metrics explorer info icon link
-		if (isMetricsExplorer) {
-			return '';
-		}
-		return 'https://signoz.io/docs/product-features/trace-explorer/?utm_source=product&utm_medium=trace-explorer-toolbar';
-	}, [isLogsExplorer, isMetricsExplorer]);
-
 	const getQueryName = (query: Query): string => {
 		if (query.builder.queryFormulas.length > 0) {
 			return `Formula ${query.builder.queryFormulas[0].queryName}`;
@@ -680,11 +635,10 @@ function ExplorerOptions({
 			const selectLabel = (
 				<Button
 					disabled={disabled}
-					shape="round"
+					className="periscope-btn ghost"
+					shape="default"
 					icon={<ConciergeBell size={16} />}
-				>
-					Create an Alert
-				</Button>
+				/>
 			);
 			return (
 				<Select
@@ -713,12 +667,11 @@ function ExplorerOptions({
 		return (
 			<Button
 				disabled={disabled}
-				shape="round"
+				shape="default"
+				className="periscope-btn ghost"
 				onClick={(): void => onCreateAlertsHandler(query)}
 				icon={<ConciergeBell size={16} />}
-			>
-				Create an Alert
-			</Button>
+			/>
 		);
 	}, [
 		disabled,
@@ -732,14 +685,11 @@ function ExplorerOptions({
 		if (isOneChartPerQuery) {
 			const selectLabel = (
 				<Button
-					type="primary"
+					className="periscope-btn ghost"
 					disabled={disabled}
-					shape="round"
 					onClick={onAddToDashboard}
-					icon={<Plus size={16} />}
-				>
-					Add to Dashboard
-				</Button>
+					icon={<Plus size={12} />}
+				/>
 			);
 			return (
 				<Select
@@ -771,14 +721,11 @@ function ExplorerOptions({
 		}
 		return (
 			<Button
-				type="primary"
+				className="periscope-btn ghost"
 				disabled={disabled}
-				shape="round"
 				onClick={onAddToDashboard}
 				icon={<Plus size={16} />}
-			>
-				Add to Dashboard
-			</Button>
+			/>
 		);
 	}, [disabled, isOneChartPerQuery, onAddToDashboard, splitedQueries]);
 
@@ -797,41 +744,31 @@ function ExplorerOptions({
 				>
 					<Tooltip title="Clear this view" placement="top">
 						<Button
-							className="action-icon"
+							className="periscope-btn ghost"
 							onClick={handleClearSelect}
-							icon={<X size={14} />}
+							icon={<X size={16} />}
 						/>
 					</Tooltip>
 					{
 						// only show the update view option when the query is updated
 					}
 					{isQueryUpdated && (
-						<>
-							<Divider
-								type="vertical"
-								className={isEditDeleteSupported ? '' : 'hidden'}
+						<Tooltip title="Update this view" placement="top">
+							<Button
+								className={cx(
+									'periscope-btn ghost',
+									isEditDeleteSupported ? '' : 'hidden',
+								)}
+								disabled={isViewUpdating}
+								onClick={onUpdateQueryHandler}
+								icon={<Disc3 size={16} />}
 							/>
-							<Tooltip title="Update this view" placement="top">
-								<Button
-									className={cx('action-icon', isEditDeleteSupported ? ' ' : 'hidden')}
-									disabled={isViewUpdating}
-									onClick={onUpdateQueryHandler}
-									icon={<Disc3 size={14} />}
-								/>
-							</Tooltip>
-						</>
+						</Tooltip>
 					)}
 				</div>
 			)}
 			{!isExplorerOptionHidden && (
-				<div
-					className="explorer-options"
-					style={{
-						background: extraData
-							? `linear-gradient(90deg, rgba(0,0,0,0) -5%, ${rgbaColor} 9%, rgba(0,0,0,0) 30%)`
-							: 'transparent',
-					}}
-				>
+				<div className="explorer-options">
 					<div className="view-options">
 						<Select<string, { key: string; value: string }>
 							showSearch
@@ -872,49 +809,23 @@ function ExplorerOptions({
 						</Select>
 
 						<Button
-							shape="round"
+							shape="default"
+							className={cx(
+								'periscope-btn secondary',
+								isEditDeleteSupported ? '' : 'hidden',
+							)}
 							onClick={handleSaveViewModalToggle}
-							className={isEditDeleteSupported ? '' : 'hidden'}
 							disabled={viewsIsLoading || isRefetching}
-							icon={<Disc3 size={16} />}
+							icon={<Disc3 size={12} />}
 						>
 							Save this view
 						</Button>
 					</div>
 
-					<hr className={isEditDeleteSupported ? '' : 'hidden'} />
-
 					<div className={cx('actions', isEditDeleteSupported ? '' : 'hidden')}>
 						{alertButton}
 						{dashboardButton}
 					</div>
-					<div className="actions">
-						{/* Hide the info icon for metrics explorer until we get the docs link */}
-						{!isMetricsExplorer && (
-							<Tooltip
-								title={
-									<div>
-										{infoIconText}
-										<Typography.Link href={infoIconLink} target="_blank">
-											{' '}
-											here
-										</Typography.Link>{' '}
-									</div>
-								}
-							>
-								<InfoCircleOutlined className="info-icon" />
-							</Tooltip>
-						)}
-						<Tooltip title="Hide">
-							<Button
-								disabled={disabled}
-								shape="circle"
-								onClick={hideToolbar}
-								icon={<PanelBottomClose size={16} />}
-								data-testid="hide-toolbar"
-							/>
-						</Tooltip>
-					</div>
 				</div>
 			)}
 			<ExplorerOptionsHideArea

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

@@ -2,12 +2,13 @@ import './ChartPreview.styles.scss';
 
 import { InfoCircleOutlined } from '@ant-design/icons';
 import Spinner from 'components/Spinner';
-import { DEFAULT_ENTITY_VERSION } from 'constants/app';
+import { ENTITY_VERSION_V5 } from 'constants/app';
 import { FeatureKeys } from 'constants/features';
 import { QueryParams } from 'constants/query';
 import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
 import AnomalyAlertEvaluationView from 'container/AnomalyAlertEvaluationView';
 import GridPanelSwitch from 'container/GridPanelSwitch';
+import { populateMultipleResults } from 'container/NewWidget/LeftContainer/WidgetGraph/util';
 import { getFormatNameByOptionId } from 'container/NewWidget/RightContainer/alertFomatCategories';
 import { timePreferenceType } from 'container/NewWidget/RightContainer/timeItems';
 import { Time } from 'container/TopNav/DateTimeSelection/config';
@@ -144,7 +145,8 @@ function ChartPreview({
 			},
 			originalGraphType: graphType,
 		},
-		alertDef?.version || DEFAULT_ENTITY_VERSION,
+		// alertDef?.version || DEFAULT_ENTITY_VERSION,
+		ENTITY_VERSION_V5,
 		{
 			queryKey: [
 				'chartPreview',
@@ -175,6 +177,12 @@ function ChartPreview({
 		queryResponse.data.payload.data.result = sortedSeriesData;
 	}
 
+	if (queryResponse.data && graphType === PANEL_TYPES.PIE) {
+		const transformedData = populateMultipleResults(queryResponse?.data);
+		// eslint-disable-next-line no-param-reassign
+		queryResponse.data = transformedData;
+	}
+
 	const containerDimensions = useResizeObserver(graphRef);
 
 	const isDarkMode = useIsDarkMode();

frontend/src/container/FormAlertRules/QuerySection.styles.scss

@@ -1,4 +1,6 @@
 .alert-tabs {
+	padding: 0px 8px;
+
 	.ant-tabs-tab {
 		border: none !important;
 		margin-left: 0px !important;
@@ -48,6 +50,30 @@
 	}
 }
 
+.alert-query-section-container {
+	.ant-card-body {
+		padding: 0px;
+
+		.alert-tabs {
+			padding: 0px;
+
+			.ant-tabs {
+				.ant-tabs-nav {
+					padding: 8px 0;
+
+					.ant-tabs-nav-wrap {
+						padding: 0px;
+					}
+				}
+
+				.ant-tabs-extra-content {
+					padding: 0px;
+				}
+			}
+		}
+	}
+}
+
 .lightMode {
 	.alert-tabs {
 		.ant-tabs-nav-list {

frontend/src/container/FormAlertRules/QuerySection.tsx

@@ -4,11 +4,11 @@ import { Color } from '@signozhq/design-tokens';
 import { Button, Tabs, Tooltip } from 'antd';
 import logEvent from 'api/common/logEvent';
 import PromQLIcon from 'assets/Dashboard/PromQl';
+import { QueryBuilderV2 } from 'components/QueryBuilderV2/QueryBuilderV2';
 import { ALERTS_DATA_SOURCE_MAP } from 'constants/alerts';
 import { ENTITY_VERSION_V4 } from 'constants/app';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import { QBShortcuts } from 'constants/shortcuts/QBShortcuts';
-import { QueryBuilder } from 'container/QueryBuilder';
 import { useKeyboardHotkeys } from 'hooks/hotkeys/useKeyboardHotkeys';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { isEmpty } from 'lodash-es';
@@ -48,7 +48,7 @@ function QuerySection({
 	const isDarkMode = useIsDarkMode();
 
 	const renderMetricUI = (): JSX.Element => (
-		<QueryBuilder
+		<QueryBuilderV2
 			panelType={panelType}
 			config={{
 				queryVariant: 'static',
@@ -144,7 +144,7 @@ function QuerySection({
 					<div className="alert-tabs">
 						<Tabs
 							type="card"
-							style={{ width: '100%' }}
+							style={{ width: '100%', padding: '0px 8px' }}
 							defaultActiveKey={currentTab}
 							activeKey={currentTab}
 							onChange={handleQueryCategoryChange}
@@ -178,7 +178,7 @@ function QuerySection({
 					<div className="alert-tabs">
 						<Tabs
 							type="card"
-							style={{ width: '100%' }}
+							style={{ width: '100%', padding: '0px 8px' }}
 							defaultActiveKey={currentTab}
 							activeKey={currentTab}
 							onChange={handleQueryCategoryChange}
@@ -212,13 +212,10 @@ function QuerySection({
 				return null;
 		}
 	};
-
-	const step2Label = alertDef.alertType === 'METRIC_BASED_ALERT' ? '2' : '1';
-
 	return (
 		<>
-			<StepHeading> {t('alert_form_step2', { step: step2Label })}</StepHeading>
-			<FormContainer>
+			<StepHeading> {t('alert_form_step2')}</StepHeading>
+			<FormContainer className="alert-query-section-container">
 				<div>{renderTabs(alertType)}</div>
 				{renderQuerySection(currentTab)}
 			</FormContainer>

frontend/src/container/FormAlertRules/RuleOptions.tsx

@@ -371,11 +371,9 @@ function RuleOptions({
 		selectedCategory?.name,
 	);
 
-	const step3Label = alertDef.alertType === 'METRIC_BASED_ALERT' ? '3' : '2';
-
 	return (
 		<>
-			<StepHeading>{t('alert_form_step3', { step: step3Label })}</StepHeading>
+			<StepHeading>{t('alert_form_step3')}</StepHeading>
 			<FormContainer>
 				{queryCategory === EQueryType.PROM && renderPromRuleOptions()}
 				{queryCategory !== EQueryType.PROM &&

frontend/src/container/FormAlertRules/index.tsx

@@ -162,7 +162,7 @@ function FormAlertRules({
 
 	const sq = useMemo(() => mapQueryDataFromApi(initQuery), [initQuery]);
 
-	useShareBuilderUrl(sq);
+	useShareBuilderUrl({ defaultValue: sq });
 
 	const handleDetectionMethodChange = (value: string): void => {
 		setAlertDef((def) => ({
@@ -832,7 +832,7 @@ function FormAlertRules({
 							queryCategory={currentQuery.queryType}
 							setQueryCategory={onQueryCategoryChange}
 							alertType={alertType || AlertTypes.METRICS_BASED_ALERT}
-							runQuery={(): void => handleRunQuery(true)}
+							runQuery={(): void => handleRunQuery(true, true)}
 							alertDef={alertDef}
 							panelType={panelType || PANEL_TYPES.TIME_SERIES}
 							key={currentQuery.queryType}

frontend/src/container/GridCardLayout/GridCard/FullView/index.tsx

@@ -10,9 +10,10 @@ import cx from 'classnames';
 import { ToggleGraphProps } from 'components/Graph/types';
 import Spinner from 'components/Spinner';
 import TimePreference from 'components/TimePreferenceDropDown';
-import { DEFAULT_ENTITY_VERSION } from 'constants/app';
+import { ENTITY_VERSION_V5 } from 'constants/app';
 import { QueryParams } from 'constants/query';
 import { PANEL_TYPES } from 'constants/queryBuilder';
+import { populateMultipleResults } from 'container/NewWidget/LeftContainer/WidgetGraph/util';
 import {
 	timeItems,
 	timePreferance,
@@ -122,7 +123,8 @@ function FullView({
 
 	const response = useGetQueryRange(
 		requestData,
-		selectedDashboard?.data?.version || version || DEFAULT_ENTITY_VERSION,
+		// selectedDashboard?.data?.version || version || DEFAULT_ENTITY_VERSION,
+		ENTITY_VERSION_V5,
 		{
 			queryKey: [widget?.query, widget?.panelTypes, requestData, version],
 			enabled: !isDependedDataLoaded,
@@ -178,6 +180,12 @@ function FullView({
 		response.data.payload.data.result = sortedSeriesData;
 	}
 
+	if (response.data && widget.panelTypes === PANEL_TYPES.PIE) {
+		const transformedData = populateMultipleResults(response?.data);
+		// eslint-disable-next-line no-param-reassign
+		response.data = transformedData;
+	}
+
 	useEffect(() => {
 		graphsVisibilityStates?.forEach((e, i) => {
 			fullViewChartRef?.current?.toggleGraph(i, e);

frontend/src/container/GridCardLayout/GridCard/index.tsx

@@ -2,6 +2,7 @@ import logEvent from 'api/common/logEvent';
 import { DEFAULT_ENTITY_VERSION } from 'constants/app';
 import { QueryParams } from 'constants/query';
 import { PANEL_TYPES } from 'constants/queryBuilder';
+import { populateMultipleResults } from 'container/NewWidget/LeftContainer/WidgetGraph/util';
 import { CustomTimeType } from 'container/TopNav/DateTimeSelectionV2/config';
 import { useGetQueryRange } from 'hooks/queryBuilder/useGetQueryRange';
 import { useIntersectionObserver } from 'hooks/useIntersectionObserver';
@@ -271,6 +272,12 @@ function GridCardGraph({
 		queryResponse.data.payload.data.result = sortedSeriesData;
 	}
 
+	if (queryResponse.data && widget.panelTypes === PANEL_TYPES.PIE) {
+		const transformedData = populateMultipleResults(queryResponse?.data);
+		// eslint-disable-next-line no-param-reassign
+		queryResponse.data = transformedData;
+	}
+
 	const menuList =
 		widget.panelTypes === PANEL_TYPES.TABLE ||
 		widget.panelTypes === PANEL_TYPES.LIST ||

frontend/src/container/GridCardLayout/GridCardLayout.styles.scss

@@ -2,7 +2,6 @@
 	overflow: auto;
 	margin: 8px -8px;
 	margin-right: 0;
-	margin-bottom: 64px;
 
 	.react-grid-layout {
 		border: none !important;

frontend/src/container/GridCardLayout/GridCardLayout.tsx

@@ -6,6 +6,7 @@ import { Button, Form, Input, Modal, Typography } from 'antd';
 import { useForm } from 'antd/es/form/Form';
 import logEvent from 'api/common/logEvent';
 import cx from 'classnames';
+import { ENTITY_VERSION_V5 } from 'constants/app';
 import { QueryParams } from 'constants/query';
 import { PANEL_GROUP_TYPES, PANEL_TYPES } from 'constants/queryBuilder';
 import { themeColors } from 'constants/theme';
@@ -579,7 +580,8 @@ function GraphLayout(props: GraphLayoutProps): JSX.Element {
 									widget={(currentWidget as Widgets) || ({ id, query: {} } as Widgets)}
 									headerMenuList={widgetActions}
 									variables={variables}
-									version={selectedDashboard?.data?.version}
+									// version={selectedDashboard?.data?.version}
+									version={ENTITY_VERSION_V5}
 									onDragSelect={onDragSelect}
 									dataAvailable={checkIfDataExists}
 								/>

frontend/src/container/InfraMonitoringHosts/HostsList.tsx

@@ -96,41 +96,11 @@ function HostsList(): JSX.Element {
 		};
 	}, [pageSize, currentPage, filters, minTime, maxTime, orderBy]);
 
-	const queryKey = useMemo(() => {
-		if (selectedHostName) {
-			return [
-				'hostList',
-				String(pageSize),
-				String(currentPage),
-				JSON.stringify(filters),
-				JSON.stringify(orderBy),
-			];
-		}
-		return [
-			'hostList',
-			String(pageSize),
-			String(currentPage),
-			JSON.stringify(filters),
-			JSON.stringify(orderBy),
-			String(minTime),
-			String(maxTime),
-		];
-	}, [
-		pageSize,
-		currentPage,
-		filters,
-		orderBy,
-		selectedHostName,
-		minTime,
-		maxTime,
-	]);
-
 	const { data, isFetching, isLoading, isError } = useGetHostList(
 		query as HostListPayload,
 		{
-			queryKey,
+			queryKey: ['hostList', query],
 			enabled: !!query,
-			keepPreviousData: true,
 		},
 	);
 
@@ -242,7 +212,6 @@ function HostsList(): JSX.Element {
 						<HostsListControls
 							filters={filters}
 							handleFiltersChange={handleFiltersChange}
-							showAutoRefresh={!selectedHostData}
 						/>
 					</div>
 					<HostsListTable

frontend/src/container/InfraMonitoringHosts/HostsListControls.tsx

@@ -11,11 +11,9 @@ import { DataSource } from 'types/common/queryBuilder';
 function HostsListControls({
 	handleFiltersChange,
 	filters,
-	showAutoRefresh,
 }: {
 	handleFiltersChange: (value: IBuilderQuery['filters']) => void;
 	filters: IBuilderQuery['filters'];
-	showAutoRefresh: boolean;
 }): JSX.Element {
 	const currentQuery = initialQueriesMap[DataSource.METRICS];
 	const updatedCurrentQuery = useMemo(
@@ -60,7 +58,7 @@ function HostsListControls({
 
 			<div className="time-selector">
 				<DateTimeSelectionV2
-					showAutoRefresh={showAutoRefresh}
+					showAutoRefresh
 					showRefreshText={false}
 					hideShareModal
 				/>

frontend/src/container/InfraMonitoringHosts/HostsListTable.tsx

@@ -93,13 +93,9 @@ export default function HostsListTable({
 	const showHostsEmptyState =
 		!isFetching &&
 		!isLoading &&
-		formattedHostMetricsData.length === 0 &&
 		(!sentAnyHostMetricsData || isSendingIncorrectK8SAgentMetrics) &&
 		!filters.items.length;
 
-	const showTableLoadingState =
-		(isLoading || isFetching) && formattedHostMetricsData.length === 0;
-
 	if (isError) {
 		return <Typography>{data?.error || 'Something went wrong'}</Typography>;
 	}
@@ -131,7 +127,7 @@ export default function HostsListTable({
 		);
 	}
 
-	if (showTableLoadingState) {
+	if (isLoading || isFetching) {
 		return (
 			<div className="hosts-list-loading-state">
 				<Skeleton.Input
@@ -159,7 +155,7 @@ export default function HostsListTable({
 	return (
 		<Table
 			className="hosts-list-table"
-			dataSource={showTableLoadingState ? [] : formattedHostMetricsData}
+			dataSource={isLoading || isFetching ? [] : formattedHostMetricsData}
 			columns={columns}
 			pagination={{
 				current: currentPage,
@@ -174,7 +170,7 @@ export default function HostsListTable({
 			}}
 			scroll={{ x: true }}
 			loading={{
-				spinning: showTableLoadingState,
+				spinning: isFetching || isLoading,
 				indicator: <Spin indicator={<LoadingOutlined size={14} spin />} />,
 			}}
 			tableLayout="fixed"

frontend/src/container/InfraMonitoringHosts/__tests__/HostsListControl.test.tsx

@@ -28,7 +28,6 @@ describe('HostsListControls', () => {
 			<HostsListControls
 				handleFiltersChange={mockHandleFiltersChange}
 				filters={mockFilters}
-				showAutoRefresh={false}
 			/>,
 		);
 

frontend/src/container/InfraMonitoringHosts/__tests__/HostsListTable.test.tsx

@@ -59,27 +59,13 @@ describe('HostsListTable', () => {
 		setPageSize: mockSetPageSize,
 	} as any;
 
-	it('renders loading state if isLoading is true and tableData is empty', () => {
-		const { container } = render(
-			<HostsListTable
-				{...mockProps}
-				isLoading
-				hostMetricsData={[]}
-				tableData={{ payload: { data: { hosts: [] } } }}
-			/>,
-		);
+	it('renders loading state if isLoading is true', () => {
+		const { container } = render(<HostsListTable {...mockProps} isLoading />);
 		expect(container.querySelector('.hosts-list-loading-state')).toBeTruthy();
 	});
 
-	it('renders loading state if isFetching is true and tableData is empty', () => {
-		const { container } = render(
-			<HostsListTable
-				{...mockProps}
-				isFetching
-				hostMetricsData={[]}
-				tableData={{ payload: { data: { hosts: [] } } }}
-			/>,
-		);
+	it('renders loading state if isFetching is true', () => {
+		const { container } = render(<HostsListTable {...mockProps} isFetching />);
 		expect(container.querySelector('.hosts-list-loading-state')).toBeTruthy();
 	});
 
@@ -89,17 +75,7 @@ describe('HostsListTable', () => {
 	});
 
 	it('renders empty state if no hosts are found', () => {
-		const { container } = render(
-			<HostsListTable
-				{...mockProps}
-				hostMetricsData={[]}
-				tableData={{
-					payload: {
-						data: { hosts: [] },
-					},
-				}}
-			/>,
-		);
+		const { container } = render(<HostsListTable {...mockProps} />);
 		expect(container.querySelector(EMPTY_STATE_CONTAINER_CLASS)).toBeTruthy();
 	});
 
@@ -107,7 +83,6 @@ describe('HostsListTable', () => {
 		const { container } = render(
 			<HostsListTable
 				{...mockProps}
-				hostMetricsData={[]}
 				tableData={{
 					...mockTableData,
 					payload: {
@@ -115,7 +90,6 @@ describe('HostsListTable', () => {
 						data: {
 							...mockTableData.payload.data,
 							sentAnyHostMetricsData: false,
-							hosts: [],
 						},
 					},
 				}}
@@ -128,7 +102,6 @@ describe('HostsListTable', () => {
 		const { container } = render(
 			<HostsListTable
 				{...mockProps}
-				hostMetricsData={[]}
 				tableData={{
 					...mockTableData,
 					payload: {
@@ -136,7 +109,6 @@ describe('HostsListTable', () => {
 						data: {
 							...mockTableData.payload.data,
 							isSendingIncorrectK8SAgentMetrics: true,
-							hosts: [],
 						},
 					},
 				}}

frontend/src/container/InfraMonitoringK8s/Clusters/ClusterDetails/ClusterDetails.tsx

@@ -38,7 +38,7 @@ import {
 	ScrollText,
 	X,
 } from 'lucide-react';
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { useSearchParams } from 'react-router-dom-v5-compat';
 import { AppState } from 'store/reducers';
@@ -85,12 +85,8 @@ function ClusterDetails({
 		endTime: endMs,
 	}));
 
-	const lastSelectedInterval = useRef<Time | null>(null);
-
 	const [selectedInterval, setSelectedInterval] = useState<Time>(
-		lastSelectedInterval.current
-			? lastSelectedInterval.current
-			: (selectedTime as Time),
+		selectedTime as Time,
 	);
 
 	const [searchParams, setSearchParams] = useSearchParams();
@@ -199,11 +195,10 @@ function ClusterDetails({
 	}, [initialFilters, initialEventsFilters]);
 
 	useEffect(() => {
-		const currentSelectedInterval = lastSelectedInterval.current || selectedTime;
-		setSelectedInterval(currentSelectedInterval as Time);
+		setSelectedInterval(selectedTime as Time);
 
-		if (currentSelectedInterval !== 'custom') {
-			const { maxTime, minTime } = GetMinMax(currentSelectedInterval);
+		if (selectedTime !== 'custom') {
+			const { maxTime, minTime } = GetMinMax(selectedTime);
 
 			setModalTimeRange({
 				startTime: Math.floor(minTime / 1000000000),
@@ -231,7 +226,6 @@ function ClusterDetails({
 
 	const handleTimeChange = useCallback(
 		(interval: Time | CustomTimeType, dateTimeRange?: [number, number]): void => {
-			lastSelectedInterval.current = interval as Time;
 			setSelectedInterval(interval as Time);
 
 			if (interval === 'custom' && dateTimeRange) {
@@ -468,7 +462,6 @@ function ClusterDetails({
 	};
 
 	const handleClose = (): void => {
-		lastSelectedInterval.current = null;
 		setSelectedInterval(selectedTime as Time);
 
 		if (selectedTime !== 'custom') {

frontend/src/container/InfraMonitoringK8s/Clusters/ClusterDetails/constants.ts

@@ -51,8 +51,8 @@ export const getClusterMetricsQueryPayload = (
 	const getKey = (dotKey: string, underscoreKey: string): string =>
 		dotMetricsEnabled ? dotKey : underscoreKey;
 	const k8sPodCpuUtilizationKey = getKey(
-		'k8s.pod.cpu.usage',
-		'k8s_pod_cpu_usage',
+		'k8s.pod.cpu.utilization',
+		'k8s_pod_cpu_utilization',
 	);
 	const k8sNodeAllocatableCpuKey = getKey(
 		'k8s.node.allocatable_cpu',
@@ -146,7 +146,7 @@ export const getClusterMetricsQueryPayload = (
 						{
 							aggregateAttribute: {
 								dataType: DataTypes.Float64,
-								id: 'k8s_pod_cpu_usage--float64--Gauge--true',
+								id: 'k8s_pod_cpu_utilization--float64--Gauge--true',
 								isColumn: true,
 								isJSON: false,
 								key: k8sPodCpuUtilizationKey,
@@ -189,7 +189,7 @@ export const getClusterMetricsQueryPayload = (
 						{
 							aggregateAttribute: {
 								dataType: DataTypes.Float64,
-								id: 'k8s_pod_cpu_usage--float64--Gauge--true',
+								id: 'k8s_pod_cpu_utilization--float64--Gauge--true',
 								isColumn: true,
 								isJSON: false,
 								key: k8sPodCpuUtilizationKey,
@@ -232,7 +232,7 @@ export const getClusterMetricsQueryPayload = (
 						{
 							aggregateAttribute: {
 								dataType: DataTypes.Float64,
-								id: 'k8s_pod_cpu_usage--float64--Gauge--true',
+								id: 'k8s_pod_cpu_utilization--float64--Gauge--true',
 								isColumn: true,
 								isJSON: false,
 								key: k8sPodCpuUtilizationKey,
@@ -731,7 +731,7 @@ export const getClusterMetricsQueryPayload = (
 		},
 		{
 			selectedTime: 'GLOBAL_TIME',
-			graphType: PANEL_TYPES.TABLE,
+			graphType: PANEL_TYPES.TIME_SERIES,
 			query: {
 				builder: {
 					queryData: [
@@ -751,7 +751,7 @@ export const getClusterMetricsQueryPayload = (
 							filters: {
 								items: [
 									{
-										id: 'a7da59c7',
+										id: 'd7779183',
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_cluster_name--string--tag--false',
@@ -786,12 +786,12 @@ export const getClusterMetricsQueryPayload = (
 								},
 							],
 							having: [],
-							legend: 'available',
+							legend: `{{${k8sDeploymentNameKey}}} ({{${k8sNamespaceNameKey}})`,
 							limit: null,
 							orderBy: [],
 							queryName: 'A',
-							reduceTo: 'last',
-							spaceAggregation: 'sum',
+							reduceTo: 'avg',
+							spaceAggregation: 'max',
 							stepInterval: 60,
 							timeAggregation: 'latest',
 						},
@@ -804,14 +804,14 @@ export const getClusterMetricsQueryPayload = (
 								key: k8sDeploymentDesiredKey,
 								type: 'Gauge',
 							},
-							aggregateOperator: 'avg',
+							aggregateOperator: 'latest',
 							dataSource: DataSource.METRICS,
 							disabled: false,
 							expression: 'B',
 							filters: {
 								items: [
 									{
-										id: '55110885',
+										id: 'd7779183',
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_cluster_name--string--tag--false',
@@ -846,14 +846,14 @@ export const getClusterMetricsQueryPayload = (
 								},
 							],
 							having: [],
-							legend: 'desired',
+							legend: `{{${k8sDeploymentNameKey}}} ({{${k8sNamespaceNameKey}})`,
 							limit: null,
 							orderBy: [],
 							queryName: 'B',
-							reduceTo: 'last',
-							spaceAggregation: 'sum',
+							reduceTo: 'avg',
+							spaceAggregation: 'max',
 							stepInterval: 60,
-							timeAggregation: 'avg',
+							timeAggregation: 'latest',
 						},
 					],
 					queryFormulas: [],
@@ -890,13 +890,13 @@ export const getClusterMetricsQueryPayload = (
 				queryType: EQueryType.QUERY_BUILDER,
 			},
 			variables: {},
-			formatForWeb: true,
+			formatForWeb: false,
 			start,
 			end,
 		},
 		{
 			selectedTime: 'GLOBAL_TIME',
-			graphType: PANEL_TYPES.TABLE,
+			graphType: PANEL_TYPES.TIME_SERIES,
 			query: {
 				builder: {
 					queryData: [
@@ -909,14 +909,14 @@ export const getClusterMetricsQueryPayload = (
 								key: k8sStatefulsetCurrentPodsKey,
 								type: 'Gauge',
 							},
-							aggregateOperator: 'max',
+							aggregateOperator: 'latest',
 							dataSource: DataSource.METRICS,
 							disabled: false,
 							expression: 'A',
 							filters: {
 								items: [
 									{
-										id: '3c57b4d1',
+										id: 'd7779183',
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_cluster_name--string--tag--false',
@@ -951,14 +951,14 @@ export const getClusterMetricsQueryPayload = (
 								},
 							],
 							having: [],
-							legend: 'current',
+							legend: `{{${k8sStatefulsetNameKey}}} ({{${k8sNamespaceNameKey}})`,
 							limit: null,
 							orderBy: [],
 							queryName: 'A',
-							reduceTo: 'last',
-							spaceAggregation: 'sum',
+							reduceTo: 'avg',
+							spaceAggregation: 'max',
 							stepInterval: 60,
-							timeAggregation: 'max',
+							timeAggregation: 'latest',
 						},
 						{
 							aggregateAttribute: {
@@ -969,14 +969,14 @@ export const getClusterMetricsQueryPayload = (
 								key: k8sStatefulsetDesiredPodsKey,
 								type: 'Gauge',
 							},
-							aggregateOperator: 'max',
+							aggregateOperator: 'latest',
 							dataSource: DataSource.METRICS,
 							disabled: false,
 							expression: 'B',
 							filters: {
 								items: [
 									{
-										id: '0f49fe64',
+										id: 'd7779183',
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_cluster_name--string--tag--false',
@@ -1011,14 +1011,14 @@ export const getClusterMetricsQueryPayload = (
 								},
 							],
 							having: [],
-							legend: 'desired',
+							legend: `{{${k8sStatefulsetNameKey}}} ({{${k8sNamespaceNameKey}})`,
 							limit: null,
 							orderBy: [],
 							queryName: 'B',
-							reduceTo: 'last',
-							spaceAggregation: 'sum',
+							reduceTo: 'avg',
+							spaceAggregation: 'max',
 							stepInterval: 60,
-							timeAggregation: 'max',
+							timeAggregation: 'latest',
 						},
 						{
 							aggregateAttribute: {
@@ -1029,14 +1029,14 @@ export const getClusterMetricsQueryPayload = (
 								key: k8sStatefulsetReadyPodsKey,
 								type: 'Gauge',
 							},
-							aggregateOperator: 'max',
+							aggregateOperator: 'latest',
 							dataSource: DataSource.METRICS,
 							disabled: false,
 							expression: 'C',
 							filters: {
 								items: [
 									{
-										id: '0bebf625',
+										id: 'd7779183',
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_cluster_name--string--tag--false',
@@ -1071,14 +1071,14 @@ export const getClusterMetricsQueryPayload = (
 								},
 							],
 							having: [],
-							legend: 'ready',
+							legend: `{{${k8sStatefulsetNameKey}}} ({{${k8sNamespaceNameKey}})`,
 							limit: null,
 							orderBy: [],
 							queryName: 'C',
-							reduceTo: 'last',
-							spaceAggregation: 'sum',
+							reduceTo: 'avg',
+							spaceAggregation: 'max',
 							stepInterval: 60,
-							timeAggregation: 'max',
+							timeAggregation: 'latest',
 						},
 						{
 							aggregateAttribute: {
@@ -1089,14 +1089,14 @@ export const getClusterMetricsQueryPayload = (
 								key: k8sStatefulsetUpdatedPodsKey,
 								type: 'Gauge',
 							},
-							aggregateOperator: 'max',
+							aggregateOperator: 'latest',
 							dataSource: DataSource.METRICS,
 							disabled: false,
 							expression: 'D',
 							filters: {
 								items: [
 									{
-										id: '1ddacbbe',
+										id: 'd7779183',
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_cluster_name--string--tag--false',
@@ -1131,14 +1131,14 @@ export const getClusterMetricsQueryPayload = (
 								},
 							],
 							having: [],
-							legend: 'updated',
+							legend: `{{${k8sStatefulsetNameKey}}} ({{${k8sNamespaceNameKey}})`,
 							limit: null,
 							orderBy: [],
 							queryName: 'D',
-							reduceTo: 'last',
-							spaceAggregation: 'sum',
+							reduceTo: 'avg',
+							spaceAggregation: 'max',
 							stepInterval: 60,
-							timeAggregation: 'max',
+							timeAggregation: 'latest',
 						},
 					],
 					queryFormulas: [],
@@ -1199,13 +1199,13 @@ export const getClusterMetricsQueryPayload = (
 				queryType: EQueryType.QUERY_BUILDER,
 			},
 			variables: {},
-			formatForWeb: true,
+			formatForWeb: false,
 			start,
 			end,
 		},
 		{
 			selectedTime: 'GLOBAL_TIME',
-			graphType: PANEL_TYPES.TABLE,
+			graphType: PANEL_TYPES.TIME_SERIES,
 			query: {
 				builder: {
 					queryData: [
@@ -1218,14 +1218,14 @@ export const getClusterMetricsQueryPayload = (
 								key: k8sDaemonsetCurrentScheduledNodesKey,
 								type: 'Gauge',
 							},
-							aggregateOperator: 'avg',
+							aggregateOperator: 'latest',
 							dataSource: DataSource.METRICS,
 							disabled: false,
 							expression: 'A',
 							filters: {
 								items: [
 									{
-										id: 'e0bea554',
+										id: 'd7779183',
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_cluster_name--string--tag--false',
@@ -1250,16 +1250,24 @@ export const getClusterMetricsQueryPayload = (
 									key: k8sDaemonsetNameKey,
 									type: 'tag',
 								},
+								{
+									dataType: DataTypes.String,
+									id: 'k8s_namespace_name--string--tag--false',
+									isColumn: false,
+									isJSON: false,
+									key: k8sNamespaceNameKey,
+									type: 'tag',
+								},
 							],
 							having: [],
-							legend: 'current_nodes',
+							legend: `{{${k8sDaemonsetNameKey}} ({{${k8sNamespaceNameKey}})`,
 							limit: null,
 							orderBy: [],
 							queryName: 'A',
-							reduceTo: 'last',
-							spaceAggregation: 'avg',
+							reduceTo: 'avg',
+							spaceAggregation: 'max',
 							stepInterval: 60,
-							timeAggregation: 'avg',
+							timeAggregation: 'latest',
 						},
 						{
 							aggregateAttribute: {
@@ -1270,14 +1278,14 @@ export const getClusterMetricsQueryPayload = (
 								key: k8sDaemonsetDesiredScheduledNodesKey,
 								type: 'Gauge',
 							},
-							aggregateOperator: 'avg',
+							aggregateOperator: 'latest',
 							dataSource: DataSource.METRICS,
 							disabled: false,
 							expression: 'B',
 							filters: {
 								items: [
 									{
-										id: '741052f7',
+										id: 'd7779183',
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_cluster_name--string--tag--false',
@@ -1302,16 +1310,24 @@ export const getClusterMetricsQueryPayload = (
 									key: k8sDaemonsetNameKey,
 									type: 'tag',
 								},
+								{
+									dataType: DataTypes.String,
+									id: 'k8s_namespace_name--string--tag--false',
+									isColumn: false,
+									isJSON: false,
+									key: k8sNamespaceNameKey,
+									type: 'tag',
+								},
 							],
 							having: [],
-							legend: 'desired_nodes',
+							legend: `{{${k8sDaemonsetNameKey}} ({{${k8sNamespaceNameKey}})`,
 							limit: null,
 							orderBy: [],
 							queryName: 'B',
-							reduceTo: 'last',
-							spaceAggregation: 'avg',
+							reduceTo: 'avg',
+							spaceAggregation: 'max',
 							stepInterval: 60,
-							timeAggregation: 'avg',
+							timeAggregation: 'latest',
 						},
 						{
 							aggregateAttribute: {
@@ -1322,14 +1338,14 @@ export const getClusterMetricsQueryPayload = (
 								key: k8sDaemonsetReadyNodesKey,
 								type: 'Gauge',
 							},
-							aggregateOperator: 'avg',
+							aggregateOperator: 'latest',
 							dataSource: DataSource.METRICS,
 							disabled: false,
 							expression: 'C',
 							filters: {
 								items: [
 									{
-										id: 'f23759f2',
+										id: 'd7779183',
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_cluster_name--string--tag--false',
@@ -1354,16 +1370,24 @@ export const getClusterMetricsQueryPayload = (
 									key: k8sDaemonsetNameKey,
 									type: 'tag',
 								},
+								{
+									dataType: DataTypes.String,
+									id: 'k8s_namespace_name--string--tag--false',
+									isColumn: false,
+									isJSON: false,
+									key: k8sNamespaceNameKey,
+									type: 'tag',
+								},
 							],
 							having: [],
-							legend: 'ready_nodes',
+							legend: `{{${k8sDaemonsetNameKey}} ({{${k8sNamespaceNameKey}})`,
 							limit: null,
 							orderBy: [],
 							queryName: 'C',
-							reduceTo: 'last',
-							spaceAggregation: 'avg',
+							reduceTo: 'avg',
+							spaceAggregation: 'max',
 							stepInterval: 60,
-							timeAggregation: 'avg',
+							timeAggregation: 'latest',
 						},
 					],
 					queryFormulas: [],
@@ -1412,7 +1436,316 @@ export const getClusterMetricsQueryPayload = (
 				queryType: EQueryType.QUERY_BUILDER,
 			},
 			variables: {},
-			formatForWeb: true,
+			formatForWeb: false,
+			start,
+			end,
+		},
+		{
+			selectedTime: 'GLOBAL_TIME',
+			graphType: PANEL_TYPES.TIME_SERIES,
+			query: {
+				builder: {
+					queryData: [
+						{
+							aggregateAttribute: {
+								dataType: DataTypes.Float64,
+								id: 'k8s_job_active_pods--float64--Gauge--true',
+								isColumn: true,
+								isJSON: false,
+								key: k8sJobActivePodsKey,
+								type: 'Gauge',
+							},
+							aggregateOperator: 'latest',
+							dataSource: DataSource.METRICS,
+							disabled: false,
+							expression: 'A',
+							filters: {
+								items: [
+									{
+										id: 'd7779183',
+										key: {
+											dataType: DataTypes.String,
+											id: 'k8s_cluster_name--string--tag--false',
+											isColumn: false,
+											isJSON: false,
+											key: k8sClusterNameKey,
+											type: 'tag',
+										},
+										op: '=',
+										value: cluster.meta.k8s_cluster_name,
+									},
+								],
+								op: 'AND',
+							},
+							functions: [],
+							groupBy: [
+								{
+									dataType: DataTypes.String,
+									id: 'k8s_job_name--string--tag--false',
+									isColumn: false,
+									isJSON: false,
+									key: k8sJobNameKey,
+									type: 'tag',
+								},
+								{
+									dataType: DataTypes.String,
+									id: 'k8s_namespace_name--string--tag--false',
+									isColumn: false,
+									isJSON: false,
+									key: k8sNamespaceNameKey,
+									type: 'tag',
+								},
+							],
+							having: [],
+							legend: `{{${k8sJobNameKey}}} ({{${k8sNamespaceNameKey}})`,
+							limit: null,
+							orderBy: [],
+							queryName: 'A',
+							reduceTo: 'avg',
+							spaceAggregation: 'max',
+							stepInterval: 60,
+							timeAggregation: 'latest',
+						},
+						{
+							aggregateAttribute: {
+								dataType: DataTypes.Float64,
+								id: 'k8s_job_successful_pods--float64--Gauge--true',
+								isColumn: true,
+								isJSON: false,
+								key: k8sJobSuccessfulPodsKey,
+								type: 'Gauge',
+							},
+							aggregateOperator: 'latest',
+							dataSource: DataSource.METRICS,
+							disabled: false,
+							expression: 'B',
+							filters: {
+								items: [
+									{
+										id: 'd7779183',
+										key: {
+											dataType: DataTypes.String,
+											id: 'k8s_cluster_name--string--tag--false',
+											isColumn: false,
+											isJSON: false,
+											key: k8sClusterNameKey,
+											type: 'tag',
+										},
+										op: '=',
+										value: cluster.meta.k8s_cluster_name,
+									},
+								],
+								op: 'AND',
+							},
+							functions: [],
+							groupBy: [
+								{
+									dataType: DataTypes.String,
+									id: 'k8s_job_name--string--tag--false',
+									isColumn: false,
+									isJSON: false,
+									key: k8sJobNameKey,
+									type: 'tag',
+								},
+								{
+									dataType: DataTypes.String,
+									id: 'k8s_namespace_name--string--tag--false',
+									isColumn: false,
+									isJSON: false,
+									key: k8sNamespaceNameKey,
+									type: 'tag',
+								},
+							],
+							having: [],
+							legend: `{{${k8sJobNameKey}}} ({{${k8sNamespaceNameKey}})`,
+							limit: null,
+							orderBy: [],
+							queryName: 'B',
+							reduceTo: 'avg',
+							spaceAggregation: 'max',
+							stepInterval: 60,
+							timeAggregation: 'latest',
+						},
+						{
+							aggregateAttribute: {
+								dataType: DataTypes.Float64,
+								id: 'k8s_job_failed_pods--float64--Gauge--true',
+								isColumn: true,
+								isJSON: false,
+								key: k8sJobFailedPodsKey,
+								type: 'Gauge',
+							},
+							aggregateOperator: 'latest',
+							dataSource: DataSource.METRICS,
+							disabled: false,
+							expression: 'C',
+							filters: {
+								items: [
+									{
+										id: 'd7779183',
+										key: {
+											dataType: DataTypes.String,
+											id: 'k8s_cluster_name--string--tag--false',
+											isColumn: false,
+											isJSON: false,
+											key: k8sClusterNameKey,
+											type: 'tag',
+										},
+										op: '=',
+										value: cluster.meta.k8s_cluster_name,
+									},
+								],
+								op: 'AND',
+							},
+							functions: [],
+							groupBy: [
+								{
+									dataType: DataTypes.String,
+									id: 'k8s_job_name--string--tag--false',
+									isColumn: false,
+									isJSON: false,
+									key: k8sJobNameKey,
+									type: 'tag',
+								},
+								{
+									dataType: DataTypes.String,
+									id: 'k8s_namespace_name--string--tag--false',
+									isColumn: false,
+									isJSON: false,
+									key: k8sNamespaceNameKey,
+									type: 'tag',
+								},
+							],
+							having: [],
+							legend: `{{${k8sJobNameKey}}} ({{${k8sNamespaceNameKey}})`,
+							limit: null,
+							orderBy: [],
+							queryName: 'C',
+							reduceTo: 'avg',
+							spaceAggregation: 'max',
+							stepInterval: 60,
+							timeAggregation: 'latest',
+						},
+						{
+							aggregateAttribute: {
+								dataType: DataTypes.Float64,
+								id: 'k8s_job_desired_successful_pods--float64--Gauge--true',
+								isColumn: true,
+								isJSON: false,
+								key: k8sJobDesiredSuccessfulPodsKey,
+								type: 'Gauge',
+							},
+							aggregateOperator: 'latest',
+							dataSource: DataSource.METRICS,
+							disabled: false,
+							expression: 'D',
+							filters: {
+								items: [
+									{
+										id: 'd7779183',
+										key: {
+											dataType: DataTypes.String,
+											id: 'k8s_cluster_name--string--tag--false',
+											isColumn: false,
+											isJSON: false,
+											key: k8sClusterNameKey,
+											type: 'tag',
+										},
+										op: '=',
+										value: cluster.meta.k8s_cluster_name,
+									},
+								],
+								op: 'AND',
+							},
+							functions: [],
+							groupBy: [
+								{
+									dataType: DataTypes.String,
+									id: 'k8s_job_name--string--tag--false',
+									isColumn: false,
+									isJSON: false,
+									key: k8sJobNameKey,
+									type: 'tag',
+								},
+								{
+									dataType: DataTypes.String,
+									id: 'k8s_namespace_name--string--tag--false',
+									isColumn: false,
+									isJSON: false,
+									key: k8sNamespaceNameKey,
+									type: 'tag',
+								},
+							],
+							having: [],
+							legend: `{{${k8sJobNameKey}}} ({{${k8sNamespaceNameKey}})`,
+							limit: null,
+							orderBy: [],
+							queryName: 'D',
+							reduceTo: 'avg',
+							spaceAggregation: 'max',
+							stepInterval: 60,
+							timeAggregation: 'latest',
+						},
+					],
+					queryFormulas: [],
+				},
+				clickhouse_sql: [
+					{
+						disabled: false,
+						legend: '',
+						name: 'A',
+						query: '',
+					},
+					{
+						disabled: false,
+						legend: '',
+						name: 'B',
+						query: '',
+					},
+					{
+						disabled: false,
+						legend: '',
+						name: 'C',
+						query: '',
+					},
+					{
+						disabled: false,
+						legend: '',
+						name: 'D',
+						query: '',
+					},
+				],
+				id: v4(),
+				promql: [
+					{
+						disabled: false,
+						legend: '',
+						name: 'A',
+						query: '',
+					},
+					{
+						disabled: false,
+						legend: '',
+						name: 'B',
+						query: '',
+					},
+					{
+						disabled: false,
+						legend: '',
+						name: 'C',
+						query: '',
+					},
+					{
+						disabled: false,
+						legend: '',
+						name: 'D',
+						query: '',
+					},
+				],
+				queryType: EQueryType.QUERY_BUILDER,
+			},
+			variables: {},
+			formatForWeb: false,
 			start,
 			end,
 		},
@@ -1444,7 +1777,7 @@ export const getClusterMetricsQueryPayload = (
 											id: 'k8s_cluster_name--string--tag--false',
 											isColumn: false,
 											isJSON: false,
-											key: k8sClusterNameKey,
+											key: 'k8s_cluster_name',
 											type: 'tag',
 										},
 										op: '=',
@@ -1504,7 +1837,7 @@ export const getClusterMetricsQueryPayload = (
 											id: 'k8s_cluster_name--string--tag--false',
 											isColumn: false,
 											isJSON: false,
-											key: k8sClusterNameKey,
+											key: 'k8s_cluster_name',
 											type: 'tag',
 										},
 										op: '=',
@@ -1564,7 +1897,7 @@ export const getClusterMetricsQueryPayload = (
 											id: 'k8s_cluster_name--string--tag--false',
 											isColumn: false,
 											isJSON: false,
-											key: k8sClusterNameKey,
+											key: 'k8s_cluster_name',
 											type: 'tag',
 										},
 										op: '=',
@@ -1624,7 +1957,7 @@ export const getClusterMetricsQueryPayload = (
 											id: 'k8s_cluster_name--string--tag--false',
 											isColumn: false,
 											isJSON: false,
-											key: k8sClusterNameKey,
+											key: 'k8s_cluster_name',
 											type: 'tag',
 										},
 										op: '=',
@@ -1672,24 +2005,6 @@ export const getClusterMetricsQueryPayload = (
 						name: 'A',
 						query: '',
 					},
-					{
-						disabled: false,
-						legend: '',
-						name: 'B',
-						query: '',
-					},
-					{
-						disabled: false,
-						legend: '',
-						name: 'C',
-						query: '',
-					},
-					{
-						disabled: false,
-						legend: '',
-						name: 'D',
-						query: '',
-					},
 				],
 				id: v4(),
 				promql: [
@@ -1699,24 +2014,6 @@ export const getClusterMetricsQueryPayload = (
 						name: 'A',
 						query: '',
 					},
-					{
-						disabled: false,
-						legend: '',
-						name: 'B',
-						query: '',
-					},
-					{
-						disabled: false,
-						legend: '',
-						name: 'C',
-						query: '',
-					},
-					{
-						disabled: false,
-						legend: '',
-						name: 'D',
-						query: '',
-					},
 				],
 				queryType: EQueryType.QUERY_BUILDER,
 			},

frontend/src/container/InfraMonitoringK8s/Clusters/K8sClustersList.tsx

@@ -189,32 +189,6 @@ function K8sClustersList({
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [minTime, maxTime, orderBy, selectedRowData, groupBy]);
 
-	const groupedByRowDataQueryKey = useMemo(() => {
-		if (selectedClusterName) {
-			return [
-				'clusterList',
-				JSON.stringify(queryFilters),
-				JSON.stringify(orderBy),
-				JSON.stringify(selectedRowData),
-			];
-		}
-		return [
-			'clusterList',
-			JSON.stringify(queryFilters),
-			JSON.stringify(orderBy),
-			JSON.stringify(selectedRowData),
-			String(minTime),
-			String(maxTime),
-		];
-	}, [
-		queryFilters,
-		orderBy,
-		selectedClusterName,
-		minTime,
-		maxTime,
-		selectedRowData,
-	]);
-
 	const {
 		data: groupedByRowData,
 		isFetching: isFetchingGroupedByRowData,
@@ -224,7 +198,7 @@ function K8sClustersList({
 	} = useGetK8sClustersList(
 		fetchGroupedByRowDataQuery as K8sClustersListPayload,
 		{
-			queryKey: groupedByRowDataQueryKey,
+			queryKey: ['clusterList', fetchGroupedByRowDataQuery],
 			enabled: !!fetchGroupedByRowDataQuery && !!selectedRowData,
 		},
 		undefined,
@@ -280,44 +254,11 @@ function K8sClustersList({
 		return groupedByRowData?.payload?.data?.records || [];
 	}, [groupedByRowData, selectedRowData]);
 
-	const queryKey = useMemo(() => {
-		if (selectedClusterName) {
-			return [
-				'clusterList',
-				String(pageSize),
-				String(currentPage),
-				JSON.stringify(queryFilters),
-				JSON.stringify(orderBy),
-				JSON.stringify(groupBy),
-			];
-		}
-		return [
-			'clusterList',
-			String(pageSize),
-			String(currentPage),
-			JSON.stringify(queryFilters),
-			JSON.stringify(orderBy),
-			JSON.stringify(groupBy),
-			String(minTime),
-			String(maxTime),
-		];
-	}, [
-		selectedClusterName,
-		pageSize,
-		currentPage,
-		queryFilters,
-		orderBy,
-		groupBy,
-		minTime,
-		maxTime,
-	]);
-
 	const { data, isFetching, isLoading, isError } = useGetK8sClustersList(
 		query as K8sClustersListPayload,
 		{
-			queryKey,
+			queryKey: ['clusterList', query],
 			enabled: !!query,
-			keepPreviousData: true,
 		},
 		undefined,
 		dotMetricsEnabled,
@@ -642,9 +583,6 @@ function K8sClustersList({
 		});
 	};
 
-	const showTableLoadingState =
-		(isFetching || isLoading) && formattedClustersData.length === 0;
-
 	return (
 		<div className="k8s-list">
 			<K8sHeader
@@ -657,13 +595,12 @@ function K8sClustersList({
 				handleGroupByChange={handleGroupByChange}
 				selectedGroupBy={groupBy}
 				entity={K8sCategory.NODES}
-				showAutoRefresh={!selectedClusterData}
 			/>
 			{isError && <Typography>{data?.error || 'Something went wrong'}</Typography>}
 
 			<Table
 				className="k8s-list-table clusters-list-table"
-				dataSource={showTableLoadingState ? [] : formattedClustersData}
+				dataSource={isFetching || isLoading ? [] : formattedClustersData}
 				columns={columns}
 				pagination={{
 					current: currentPage,
@@ -675,25 +612,26 @@ function K8sClustersList({
 				}}
 				scroll={{ x: true }}
 				loading={{
-					spinning: showTableLoadingState,
+					spinning: isFetching || isLoading,
 					indicator: <Spin indicator={<LoadingOutlined size={14} spin />} />,
 				}}
 				locale={{
-					emptyText: showTableLoadingState ? null : (
-						<div className="no-filtered-hosts-message-container">
-							<div className="no-filtered-hosts-message-content">
-								<img
-									src="/Icons/emptyState.svg"
-									alt="thinking-emoji"
-									className="empty-state-svg"
-								/>
+					emptyText:
+						isFetching || isLoading ? null : (
+							<div className="no-filtered-hosts-message-container">
+								<div className="no-filtered-hosts-message-content">
+									<img
+										src="/Icons/emptyState.svg"
+										alt="thinking-emoji"
+										className="empty-state-svg"
+									/>
 
-								<Typography.Text className="no-filtered-hosts-message">
-									This query had no results. Edit your query and try again!
-								</Typography.Text>
+									<Typography.Text className="no-filtered-hosts-message">
+										This query had no results. Edit your query and try again!
+									</Typography.Text>
+								</div>
 							</div>
-						</div>
-					),
+						),
 				}}
 				tableLayout="fixed"
 				onChange={handleTableChange}

frontend/src/container/InfraMonitoringK8s/DaemonSets/DaemonSetDetails/DaemonSetDetails.tsx

@@ -33,7 +33,7 @@ import {
 	ScrollText,
 	X,
 } from 'lucide-react';
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { useSearchParams } from 'react-router-dom-v5-compat';
 import { AppState } from 'store/reducers';
@@ -84,12 +84,8 @@ function DaemonSetDetails({
 		endTime: endMs,
 	}));
 
-	const lastSelectedInterval = useRef<Time | null>(null);
-
 	const [selectedInterval, setSelectedInterval] = useState<Time>(
-		lastSelectedInterval.current
-			? lastSelectedInterval.current
-			: (selectedTime as Time),
+		selectedTime as Time,
 	);
 
 	const [searchParams, setSearchParams] = useSearchParams();
@@ -215,11 +211,10 @@ function DaemonSetDetails({
 	}, [initialFilters, initialEventsFilters]);
 
 	useEffect(() => {
-		const currentSelectedInterval = lastSelectedInterval.current || selectedTime;
-		setSelectedInterval(currentSelectedInterval as Time);
+		setSelectedInterval(selectedTime as Time);
 
-		if (currentSelectedInterval !== 'custom') {
-			const { maxTime, minTime } = GetMinMax(currentSelectedInterval);
+		if (selectedTime !== 'custom') {
+			const { maxTime, minTime } = GetMinMax(selectedTime);
 
 			setModalTimeRange({
 				startTime: Math.floor(minTime / 1000000000),
@@ -247,7 +242,6 @@ function DaemonSetDetails({
 
 	const handleTimeChange = useCallback(
 		(interval: Time | CustomTimeType, dateTimeRange?: [number, number]): void => {
-			lastSelectedInterval.current = interval as Time;
 			setSelectedInterval(interval as Time);
 
 			if (interval === 'custom' && dateTimeRange) {
@@ -482,7 +476,6 @@ function DaemonSetDetails({
 	};
 
 	const handleClose = (): void => {
-		lastSelectedInterval.current = null;
 		setSelectedInterval(selectedTime as Time);
 
 		if (selectedTime !== 'custom') {

frontend/src/container/InfraMonitoringK8s/DaemonSets/DaemonSetDetails/constants.ts

@@ -33,8 +33,8 @@ export const getDaemonSetMetricsQueryPayload = (
 	dotMetricsEnabled: boolean,
 ): GetQueryResultsProps[] => {
 	const k8sPodCpuUtilizationKey = dotMetricsEnabled
-		? 'k8s.pod.cpu.usage'
-		: 'k8s_pod_cpu_usage';
+		? 'k8s.pod.cpu.utilization'
+		: 'k8s_pod_cpu_utilization';
 
 	const k8sContainerCpuRequestKey = dotMetricsEnabled
 		? 'k8s.container.cpu_request'
@@ -84,7 +84,7 @@ export const getDaemonSetMetricsQueryPayload = (
 						{
 							aggregateAttribute: {
 								dataType: DataTypes.Float64,
-								id: 'k8s_pod_cpu_usage--float64--Gauge--true',
+								id: 'k8s_pod_cpu_utilization--float64--Gauge--true',
 								isColumn: true,
 								isJSON: false,
 								key: k8sPodCpuUtilizationKey,

frontend/src/container/InfraMonitoringK8s/DaemonSets/K8sDaemonSetsList.tsx

@@ -191,32 +191,6 @@ function K8sDaemonSetsList({
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [minTime, maxTime, orderBy, selectedRowData, groupBy]);
 
-	const groupedByRowDataQueryKey = useMemo(() => {
-		if (selectedDaemonSetUID) {
-			return [
-				'daemonSetList',
-				JSON.stringify(queryFilters),
-				JSON.stringify(orderBy),
-				JSON.stringify(selectedRowData),
-			];
-		}
-		return [
-			'daemonSetList',
-			JSON.stringify(queryFilters),
-			JSON.stringify(orderBy),
-			JSON.stringify(selectedRowData),
-			String(minTime),
-			String(maxTime),
-		];
-	}, [
-		queryFilters,
-		orderBy,
-		selectedDaemonSetUID,
-		minTime,
-		maxTime,
-		selectedRowData,
-	]);
-
 	const {
 		data: groupedByRowData,
 		isFetching: isFetchingGroupedByRowData,
@@ -226,7 +200,7 @@ function K8sDaemonSetsList({
 	} = useGetK8sDaemonSetsList(
 		fetchGroupedByRowDataQuery as K8sDaemonSetsListPayload,
 		{
-			queryKey: groupedByRowDataQueryKey,
+			queryKey: ['daemonSetList', fetchGroupedByRowDataQuery],
 			enabled: !!fetchGroupedByRowDataQuery && !!selectedRowData,
 		},
 		undefined,
@@ -277,44 +251,11 @@ function K8sDaemonSetsList({
 		[groupedByRowData, groupBy],
 	);
 
-	const queryKey = useMemo(() => {
-		if (selectedDaemonSetUID) {
-			return [
-				'daemonSetList',
-				String(pageSize),
-				String(currentPage),
-				JSON.stringify(queryFilters),
-				JSON.stringify(orderBy),
-				JSON.stringify(groupBy),
-			];
-		}
-		return [
-			'daemonSetList',
-			String(pageSize),
-			String(currentPage),
-			JSON.stringify(queryFilters),
-			JSON.stringify(orderBy),
-			JSON.stringify(groupBy),
-			String(minTime),
-			String(maxTime),
-		];
-	}, [
-		selectedDaemonSetUID,
-		pageSize,
-		currentPage,
-		queryFilters,
-		orderBy,
-		groupBy,
-		minTime,
-		maxTime,
-	]);
-
 	const { data, isFetching, isLoading, isError } = useGetK8sDaemonSetsList(
 		query as K8sDaemonSetsListPayload,
 		{
-			queryKey,
+			queryKey: ['daemonSetList', query],
 			enabled: !!query,
-			keepPreviousData: true,
 		},
 		undefined,
 		dotMetricsEnabled,
@@ -650,9 +591,6 @@ function K8sDaemonSetsList({
 		});
 	};
 
-	const showTableLoadingState =
-		(isFetching || isLoading) && formattedDaemonSetsData.length === 0;
-
 	return (
 		<div className="k8s-list">
 			<K8sHeader
@@ -665,7 +603,6 @@ function K8sDaemonSetsList({
 				handleGroupByChange={handleGroupByChange}
 				selectedGroupBy={groupBy}
 				entity={K8sCategory.DAEMONSETS}
-				showAutoRefresh={!selectedDaemonSetData}
 			/>
 			{isError && <Typography>{data?.error || 'Something went wrong'}</Typography>}
 
@@ -673,7 +610,7 @@ function K8sDaemonSetsList({
 				className={classNames('k8s-list-table', 'daemonSets-list-table', {
 					'expanded-daemonsets-list-table': isGroupedByAttribute,
 				})}
-				dataSource={showTableLoadingState ? [] : formattedDaemonSetsData}
+				dataSource={isFetching || isLoading ? [] : formattedDaemonSetsData}
 				columns={columns}
 				pagination={{
 					current: currentPage,
@@ -685,25 +622,26 @@ function K8sDaemonSetsList({
 				}}
 				scroll={{ x: true }}
 				loading={{
-					spinning: showTableLoadingState,
+					spinning: isFetching || isLoading,
 					indicator: <Spin indicator={<LoadingOutlined size={14} spin />} />,
 				}}
 				locale={{
-					emptyText: showTableLoadingState ? null : (
-						<div className="no-filtered-hosts-message-container">
-							<div className="no-filtered-hosts-message-content">
-								<img
-									src="/Icons/emptyState.svg"
-									alt="thinking-emoji"
-									className="empty-state-svg"
-								/>
+					emptyText:
+						isFetching || isLoading ? null : (
+							<div className="no-filtered-hosts-message-container">
+								<div className="no-filtered-hosts-message-content">
+									<img
+										src="/Icons/emptyState.svg"
+										alt="thinking-emoji"
+										className="empty-state-svg"
+									/>
 
-								<Typography.Text className="no-filtered-hosts-message">
-									This query had no results. Edit your query and try again!
-								</Typography.Text>
+									<Typography.Text className="no-filtered-hosts-message">
+										This query had no results. Edit your query and try again!
+									</Typography.Text>
+								</div>
 							</div>
-						</div>
-					),
+						),
 				}}
 				tableLayout="fixed"
 				onChange={handleTableChange}

frontend/src/container/InfraMonitoringK8s/Deployments/DeploymentDetails/DeploymentDetails.tsx

@@ -38,7 +38,7 @@ import {
 	ScrollText,
 	X,
 } from 'lucide-react';
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { useSearchParams } from 'react-router-dom-v5-compat';
 import { AppState } from 'store/reducers';
@@ -88,12 +88,8 @@ function DeploymentDetails({
 		endTime: endMs,
 	}));
 
-	const lastSelectedInterval = useRef<Time | null>(null);
-
 	const [selectedInterval, setSelectedInterval] = useState<Time>(
-		lastSelectedInterval.current
-			? lastSelectedInterval.current
-			: (selectedTime as Time),
+		selectedTime as Time,
 	);
 
 	const [searchParams, setSearchParams] = useSearchParams();
@@ -219,11 +215,10 @@ function DeploymentDetails({
 	}, [initialFilters, initialEventsFilters]);
 
 	useEffect(() => {
-		const currentSelectedInterval = lastSelectedInterval.current || selectedTime;
-		setSelectedInterval(currentSelectedInterval as Time);
+		setSelectedInterval(selectedTime as Time);
 
-		if (currentSelectedInterval !== 'custom') {
-			const { maxTime, minTime } = GetMinMax(currentSelectedInterval);
+		if (selectedTime !== 'custom') {
+			const { maxTime, minTime } = GetMinMax(selectedTime);
 
 			setModalTimeRange({
 				startTime: Math.floor(minTime / 1000000000),
@@ -251,7 +246,6 @@ function DeploymentDetails({
 
 	const handleTimeChange = useCallback(
 		(interval: Time | CustomTimeType, dateTimeRange?: [number, number]): void => {
-			lastSelectedInterval.current = interval as Time;
 			setSelectedInterval(interval as Time);
 
 			if (interval === 'custom' && dateTimeRange) {
@@ -493,7 +487,6 @@ function DeploymentDetails({
 	};
 
 	const handleClose = (): void => {
-		lastSelectedInterval.current = null;
 		setSelectedInterval(selectedTime as Time);
 
 		if (selectedTime !== 'custom') {

frontend/src/container/InfraMonitoringK8s/Deployments/DeploymentDetails/constants.ts

@@ -33,8 +33,8 @@ export const getDeploymentMetricsQueryPayload = (
 	dotMetricsEnabled: boolean,
 ): GetQueryResultsProps[] => {
 	const k8sPodCpuUtilizationKey = dotMetricsEnabled
-		? 'k8s.pod.cpu.usage'
-		: 'k8s_pod_cpu_usage';
+		? 'k8s.pod.cpu.utilization'
+		: 'k8s_pod_cpu_utilization';
 
 	const k8sContainerCpuRequestKey = dotMetricsEnabled
 		? 'k8s.container.cpu_request'
@@ -80,7 +80,7 @@ export const getDeploymentMetricsQueryPayload = (
 						{
 							aggregateAttribute: {
 								dataType: DataTypes.Float64,
-								id: 'k8s_pod_cpu_usage--float64--Gauge--true',
+								id: 'k8s_pod_cpu_utilization--float64--Gauge--true',
 								isColumn: true,
 								isJSON: false,
 								key: k8sPodCpuUtilizationKey,

frontend/src/container/InfraMonitoringK8s/Deployments/K8sDeploymentsList.tsx

@@ -192,32 +192,6 @@ function K8sDeploymentsList({
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [minTime, maxTime, orderBy, selectedRowData, groupBy]);
 
-	const groupedByRowDataQueryKey = useMemo(() => {
-		if (selectedDeploymentUID) {
-			return [
-				'deploymentList',
-				JSON.stringify(queryFilters),
-				JSON.stringify(orderBy),
-				JSON.stringify(selectedRowData),
-			];
-		}
-		return [
-			'deploymentList',
-			JSON.stringify(queryFilters),
-			JSON.stringify(orderBy),
-			JSON.stringify(selectedRowData),
-			String(minTime),
-			String(maxTime),
-		];
-	}, [
-		queryFilters,
-		orderBy,
-		selectedDeploymentUID,
-		minTime,
-		maxTime,
-		selectedRowData,
-	]);
-
 	const {
 		data: groupedByRowData,
 		isFetching: isFetchingGroupedByRowData,
@@ -227,7 +201,7 @@ function K8sDeploymentsList({
 	} = useGetK8sDeploymentsList(
 		fetchGroupedByRowDataQuery as K8sDeploymentsListPayload,
 		{
-			queryKey: groupedByRowDataQueryKey,
+			queryKey: ['deploymentList', fetchGroupedByRowDataQuery],
 			enabled: !!fetchGroupedByRowDataQuery && !!selectedRowData,
 		},
 		undefined,
@@ -278,44 +252,11 @@ function K8sDeploymentsList({
 		[groupedByRowData, groupBy],
 	);
 
-	const queryKey = useMemo(() => {
-		if (selectedDeploymentUID) {
-			return [
-				'deploymentList',
-				String(pageSize),
-				String(currentPage),
-				JSON.stringify(queryFilters),
-				JSON.stringify(orderBy),
-				JSON.stringify(groupBy),
-			];
-		}
-		return [
-			'deploymentList',
-			String(pageSize),
-			String(currentPage),
-			JSON.stringify(queryFilters),
-			JSON.stringify(orderBy),
-			JSON.stringify(groupBy),
-			String(minTime),
-			String(maxTime),
-		];
-	}, [
-		selectedDeploymentUID,
-		pageSize,
-		currentPage,
-		queryFilters,
-		orderBy,
-		groupBy,
-		minTime,
-		maxTime,
-	]);
-
 	const { data, isFetching, isLoading, isError } = useGetK8sDeploymentsList(
 		query as K8sDeploymentsListPayload,
 		{
-			queryKey,
+			queryKey: ['deploymentList', query],
 			enabled: !!query,
-			keepPreviousData: true,
 		},
 		undefined,
 		dotMetricsEnabled,
@@ -655,9 +596,6 @@ function K8sDeploymentsList({
 		});
 	};
 
-	const showTableLoadingState =
-		(isFetching || isLoading) && formattedDeploymentsData.length === 0;
-
 	return (
 		<div className="k8s-list">
 			<K8sHeader
@@ -670,7 +608,6 @@ function K8sDeploymentsList({
 				handleGroupByChange={handleGroupByChange}
 				selectedGroupBy={groupBy}
 				entity={K8sCategory.NODES}
-				showAutoRefresh={!selectedDeploymentData}
 			/>
 			{isError && <Typography>{data?.error || 'Something went wrong'}</Typography>}
 
@@ -678,7 +615,7 @@ function K8sDeploymentsList({
 				className={classNames('k8s-list-table', 'deployments-list-table', {
 					'expanded-deployments-list-table': isGroupedByAttribute,
 				})}
-				dataSource={showTableLoadingState ? [] : formattedDeploymentsData}
+				dataSource={isFetching || isLoading ? [] : formattedDeploymentsData}
 				columns={columns}
 				pagination={{
 					current: currentPage,
@@ -690,25 +627,26 @@ function K8sDeploymentsList({
 				}}
 				scroll={{ x: true }}
 				loading={{
-					spinning: showTableLoadingState,
+					spinning: isFetching || isLoading,
 					indicator: <Spin indicator={<LoadingOutlined size={14} spin />} />,
 				}}
 				locale={{
-					emptyText: showTableLoadingState ? null : (
-						<div className="no-filtered-hosts-message-container">
-							<div className="no-filtered-hosts-message-content">
-								<img
-									src="/Icons/emptyState.svg"
-									alt="thinking-emoji"
-									className="empty-state-svg"
-								/>
+					emptyText:
+						isFetching || isLoading ? null : (
+							<div className="no-filtered-hosts-message-container">
+								<div className="no-filtered-hosts-message-content">
+									<img
+										src="/Icons/emptyState.svg"
+										alt="thinking-emoji"
+										className="empty-state-svg"
+									/>
 
-								<Typography.Text className="no-filtered-hosts-message">
-									This query had no results. Edit your query and try again!
-								</Typography.Text>
+									<Typography.Text className="no-filtered-hosts-message">
+										This query had no results. Edit your query and try again!
+									</Typography.Text>
+								</div>
 							</div>
-						</div>
-					),
+						),
 				}}
 				tableLayout="fixed"
 				onChange={handleTableChange}

frontend/src/container/InfraMonitoringK8s/EntityDetailsUtils/EntityEvents/EntityEvents.tsx

@@ -270,7 +270,7 @@ export default function Events({
 				</div>
 			</div>
 
-			{isLoading && formattedEntityEvents.length === 0 && <LoadingContainer />}
+			{isLoading && <LoadingContainer />}
 
 			{!isLoading && !isError && formattedEntityEvents.length === 0 && (
 				<EntityDetailsEmptyContainer category={category} view="events" />

frontend/src/container/InfraMonitoringK8s/EntityDetailsUtils/EntityMetrics/EntityMetrics.tsx

@@ -24,13 +24,12 @@ import {
 import { getUPlotChartOptions } from 'lib/uPlotLib/getUplotChartOptions';
 import { getUPlotChartData } from 'lib/uPlotLib/utils/getUplotChartData';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { QueryFunctionContext, useQueries, UseQueryResult } from 'react-query';
+import { useQueries, UseQueryResult } from 'react-query';
 import { SuccessResponse } from 'types/api';
 import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
 import { Options } from 'uplot';
 
 import { FeatureKeys } from '../../../../constants/features';
-import { useMultiIntersectionObserver } from '../../../../hooks/useMultiIntersectionObserver';
 import { useAppContext } from '../../../../providers/App/App';
 
 interface EntityMetricsProps<T> {
@@ -74,12 +73,6 @@ function EntityMetrics<T>({
 	const dotMetricsEnabled =
 		featureFlags?.find((flag) => flag.name === FeatureKeys.DOT_METRICS_ENABLED)
 			?.active || false;
-
-	const {
-		visibilities,
-		setElement,
-	} = useMultiIntersectionObserver(entityWidgetInfo.length, { threshold: 0.1 });
-
 	const queryPayloads = useMemo(
 		() =>
 			getEntityQueryPayload(
@@ -98,15 +91,11 @@ function EntityMetrics<T>({
 	);
 
 	const queries = useQueries(
-		queryPayloads.map((payload, index) => ({
+		queryPayloads.map((payload) => ({
 			queryKey: [queryKey, payload, ENTITY_VERSION_V4, category],
-			queryFn: ({
-				signal,
-			}: QueryFunctionContext): Promise<
-				SuccessResponse<MetricRangePayloadProps>
-			> => GetMetricQueryRange(payload, ENTITY_VERSION_V4, signal),
-			enabled: !!payload && visibilities[index],
-			keepPreviousData: true,
+			queryFn: (): Promise<SuccessResponse<MetricRangePayloadProps>> =>
+				GetMetricQueryRange(payload, ENTITY_VERSION_V4),
+			enabled: !!payload,
 		})),
 	);
 
@@ -197,7 +186,7 @@ function EntityMetrics<T>({
 		query: UseQueryResult<SuccessResponse<MetricRangePayloadProps>, unknown>,
 		idx: number,
 	): JSX.Element => {
-		if ((!query.data && query.isLoading) || !visibilities[idx]) {
+		if (query.isLoading) {
 			return <Skeleton />;
 		}
 
@@ -207,7 +196,7 @@ function EntityMetrics<T>({
 			return <div>{errorMessage}</div>;
 		}
 
-		const panelType = (query.data?.params as any)?.compositeQuery?.panelType;
+		const { panelType } = (query.data?.params as any).compositeQuery;
 
 		return (
 			<div
@@ -245,7 +234,7 @@ function EntityMetrics<T>({
 			</div>
 			<Row gutter={24} className="entity-metrics-container">
 				{queries.map((query, idx) => (
-					<Col ref={setElement(idx)} span={12} key={entityWidgetInfo[idx].title}>
+					<Col span={12} key={entityWidgetInfo[idx].title}>
 						<Typography.Text>{entityWidgetInfo[idx].title}</Typography.Text>
 						<Card bordered className="entity-metrics-card" ref={graphRef}>
 							{renderCardContent(query, idx)}

frontend/src/container/InfraMonitoringK8s/EntityDetailsUtils/EntityTraces/EntityTraces.tsx

@@ -203,7 +203,7 @@ function EntityTraces({
 			{!isError && traces.length > 0 && (
 				<div className="entity-traces-table">
 					<TraceExplorerControls
-						isLoading={isFetching && traces.length === 0}
+						isLoading={isFetching}
 						totalCount={totalCount}
 						perPageOptions={PER_PAGE_OPTIONS}
 						showSizeChanger={false}
@@ -212,7 +212,7 @@ function EntityTraces({
 						tableLayout="fixed"
 						pagination={false}
 						scroll={{ x: true }}
-						loading={isFetching && traces.length === 0}
+						loading={isFetching}
 						dataSource={traces}
 						columns={traceListColumns}
 						onRow={(): Record<string, unknown> => ({

frontend/src/container/InfraMonitoringK8s/Jobs/JobDetails/JobDetails.tsx

@@ -33,7 +33,7 @@ import {
 	ScrollText,
 	X,
 } from 'lucide-react';
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { useSearchParams } from 'react-router-dom-v5-compat';
 import { AppState } from 'store/reducers';
@@ -81,12 +81,8 @@ function JobDetails({
 		endTime: endMs,
 	}));
 
-	const lastSelectedInterval = useRef<Time | null>(null);
-
 	const [selectedInterval, setSelectedInterval] = useState<Time>(
-		lastSelectedInterval.current
-			? lastSelectedInterval.current
-			: (selectedTime as Time),
+		selectedTime as Time,
 	);
 
 	const [searchParams, setSearchParams] = useSearchParams();
@@ -208,11 +204,10 @@ function JobDetails({
 	}, [initialFilters, initialEventsFilters]);
 
 	useEffect(() => {
-		const currentSelectedInterval = lastSelectedInterval.current || selectedTime;
-		setSelectedInterval(currentSelectedInterval as Time);
+		setSelectedInterval(selectedTime as Time);
 
-		if (currentSelectedInterval !== 'custom') {
-			const { maxTime, minTime } = GetMinMax(currentSelectedInterval);
+		if (selectedTime !== 'custom') {
+			const { maxTime, minTime } = GetMinMax(selectedTime);
 
 			setModalTimeRange({
 				startTime: Math.floor(minTime / 1000000000),
@@ -240,7 +235,6 @@ function JobDetails({
 
 	const handleTimeChange = useCallback(
 		(interval: Time | CustomTimeType, dateTimeRange?: [number, number]): void => {
-			lastSelectedInterval.current = interval as Time;
 			setSelectedInterval(interval as Time);
 
 			if (interval === 'custom' && dateTimeRange) {
@@ -475,7 +469,6 @@ function JobDetails({
 	};
 
 	const handleClose = (): void => {
-		lastSelectedInterval.current = null;
 		setSelectedInterval(selectedTime as Time);
 
 		if (selectedTime !== 'custom') {

frontend/src/container/InfraMonitoringK8s/Jobs/JobDetails/constants.ts

@@ -33,8 +33,8 @@ export const getJobMetricsQueryPayload = (
 	dotMetricsEnabled: boolean,
 ): GetQueryResultsProps[] => {
 	const k8sPodCpuUtilizationKey = dotMetricsEnabled
-		? 'k8s.pod.cpu.usage'
-		: 'k8s_pod_cpu_usage';
+		? 'k8s.pod.cpu.utilization'
+		: 'k8s_pod_cpu_utilization';
 	const k8sPodMemoryUsageKey = dotMetricsEnabled
 		? 'k8s.pod.memory.usage'
 		: 'k8s_pod_memory_usage';
@@ -59,7 +59,7 @@ export const getJobMetricsQueryPayload = (
 						{
 							aggregateAttribute: {
 								dataType: DataTypes.Float64,
-								id: 'k8s_pod_cpu_usage--float64--Gauge--true',
+								id: 'k8s_pod_cpu_utilization--float64--Gauge--true',
 								isColumn: true,
 								isJSON: false,
 								key: k8sPodCpuUtilizationKey,

frontend/src/container/InfraMonitoringK8s/Jobs/K8sJobsList.tsx

@@ -186,25 +186,6 @@ function K8sJobsList({
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [minTime, maxTime, orderBy, selectedRowData, groupBy]);
 
-	const groupedByRowDataQueryKey = useMemo(() => {
-		if (selectedJobUID) {
-			return [
-				'jobList',
-				JSON.stringify(queryFilters),
-				JSON.stringify(orderBy),
-				JSON.stringify(selectedRowData),
-			];
-		}
-		return [
-			'jobList',
-			JSON.stringify(queryFilters),
-			JSON.stringify(orderBy),
-			JSON.stringify(selectedRowData),
-			String(minTime),
-			String(maxTime),
-		];
-	}, [queryFilters, orderBy, selectedJobUID, minTime, maxTime, selectedRowData]);
-
 	const {
 		data: groupedByRowData,
 		isFetching: isFetchingGroupedByRowData,
@@ -214,7 +195,7 @@ function K8sJobsList({
 	} = useGetK8sJobsList(
 		fetchGroupedByRowDataQuery as K8sJobsListPayload,
 		{
-			queryKey: groupedByRowDataQueryKey,
+			queryKey: ['jobList', fetchGroupedByRowDataQuery],
 			enabled: !!fetchGroupedByRowDataQuery && !!selectedRowData,
 		},
 		undefined,
@@ -270,44 +251,11 @@ function K8sJobsList({
 		return groupedByRowData?.payload?.data?.records || [];
 	}, [groupedByRowData, selectedRowData]);
 
-	const queryKey = useMemo(() => {
-		if (selectedJobUID) {
-			return [
-				'jobList',
-				String(pageSize),
-				String(currentPage),
-				JSON.stringify(queryFilters),
-				JSON.stringify(orderBy),
-				JSON.stringify(groupBy),
-			];
-		}
-		return [
-			'jobList',
-			String(pageSize),
-			String(currentPage),
-			JSON.stringify(queryFilters),
-			JSON.stringify(orderBy),
-			JSON.stringify(groupBy),
-			String(minTime),
-			String(maxTime),
-		];
-	}, [
-		selectedJobUID,
-		pageSize,
-		currentPage,
-		queryFilters,
-		orderBy,
-		groupBy,
-		minTime,
-		maxTime,
-	]);
-
 	const { data, isFetching, isLoading, isError } = useGetK8sJobsList(
 		query as K8sJobsListPayload,
 		{
-			queryKey,
+			queryKey: ['jobList', query],
 			enabled: !!query,
-			keepPreviousData: true,
 		},
 		undefined,
 		dotMetricsEnabled,
@@ -633,7 +581,6 @@ function K8sJobsList({
 				handleGroupByChange={handleGroupByChange}
 				selectedGroupBy={groupBy}
 				entity={K8sCategory.JOBS}
-				showAutoRefresh={!selectedJobData}
 			/>
 			{isError && <Typography>{data?.error || 'Something went wrong'}</Typography>}