Fix: trace details bugfixes (#9116)

* fix: make the trace details sidebar scrollable

* fix: fix the long value overflowing trace details attributes

* fix: fix the layout issues in trace details v2

* Revert "fix: make the trace details sidebar scrollable"

This reverts commit 469022ed6a.

* fix: make the trace details sidebar scrollable

* fix: make the attribute value take 100% width

---------

Co-authored-by: Nityananda Gohain <nityanandagohain@gmail.com>

.devenv/docker/clickhouse/compose.yaml

@@ -1,6 +1,6 @@
 services:
   clickhouse:
-    image: clickhouse/clickhouse-server:24.1.2-alpine
+    image: clickhouse/clickhouse-server:25.5.6
     container_name: clickhouse
     volumes:
       - ${PWD}/fs/etc/clickhouse-server/config.d/config.xml:/etc/clickhouse-server/config.d/config.xml
@@ -23,8 +23,10 @@ services:
       retries: 3
     depends_on:
       - zookeeper
+    environment:
+      - CLICKHOUSE_SKIP_USER_SETUP=1
   zookeeper:
-    image: bitnami/zookeeper:3.7.1
+    image: signoz/zookeeper:3.7.1
     container_name: zookeeper
     volumes:
       - ${PWD}/fs/tmp/zookeeper:/bitnami/zookeeper
@@ -40,7 +42,7 @@ services:
       timeout: 5s
       retries: 3
   schema-migrator-sync:
-    image: signoz/signoz-schema-migrator:v0.128.2
+    image: signoz/signoz-schema-migrator:v0.129.5
     container_name: schema-migrator-sync
     command:
       - sync
@@ -53,7 +55,7 @@ services:
         condition: service_healthy
     restart: on-failure
   schema-migrator-async:
-    image: signoz/signoz-schema-migrator:v0.128.2
+    image: signoz/signoz-schema-migrator:v0.129.5
     container_name: schema-migrator-async
     command:
       - async

.devenv/docker/signoz-otel-collector/compose.yaml

@@ -0,0 +1,29 @@
+services:
+  signoz-otel-collector:
+    image: signoz/signoz-otel-collector:v0.128.2
+    container_name: signoz-otel-collector-dev
+    command:
+      - --config=/etc/otel-collector-config.yaml
+      - --feature-gates=-pkg.translator.prometheus.NormalizeName
+    volumes:
+      - ./otel-collector-config.yaml:/etc/otel-collector-config.yaml
+    environment:
+      - OTEL_RESOURCE_ATTRIBUTES=host.name=signoz-host,os.type=linux
+      - LOW_CARDINAL_EXCEPTION_GROUPING=false
+    ports:
+      - "4317:4317" # OTLP gRPC receiver
+      - "4318:4318" # OTLP HTTP receiver
+      - "13133:13133" # health check extension
+    healthcheck:
+      test:
+        - CMD
+        - wget
+        - --spider
+        - -q
+        - localhost:13133
+      interval: 30s
+      timeout: 5s
+      retries: 3
+    restart: unless-stopped
+    extra_hosts:
+      - "host.docker.internal:host-gateway"

.devenv/docker/signoz-otel-collector/otel-collector-config.yaml

@@ -0,0 +1,96 @@
+receivers:
+  otlp:
+    protocols:
+      grpc:
+        endpoint: 0.0.0.0:4317
+      http:
+        endpoint: 0.0.0.0:4318
+  prometheus:
+    config:
+      global:
+        scrape_interval: 60s
+      scrape_configs:
+        - job_name: otel-collector
+          static_configs:
+          - targets:
+              - localhost:8888
+            labels:
+              job_name: otel-collector
+
+processors:
+  batch:
+    send_batch_size: 10000
+    send_batch_max_size: 11000
+    timeout: 10s
+  resourcedetection:
+    # Using OTEL_RESOURCE_ATTRIBUTES envvar, env detector adds custom labels.
+    detectors: [env, system]
+    timeout: 2s
+  signozspanmetrics/delta:
+    metrics_exporter: 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
+    aggregation_temporality: AGGREGATION_TEMPORALITY_DELTA
+    enable_exp_histogram: true
+    dimensions:
+      - name: service.namespace
+        default: default
+      - name: deployment.environment
+        default: default
+      # This is added to ensure the uniqueness of the timeseries
+      # Otherwise, identical timeseries produced by multiple replicas of
+      # collectors result in incorrect APM metrics
+      - name: signoz.collector.id
+      - name: service.version
+      - name: browser.platform
+      - name: browser.mobile
+      - name: k8s.cluster.name
+      - name: k8s.node.name
+      - name: k8s.namespace.name
+      - name: host.name
+      - name: host.type
+      - name: container.name
+
+extensions:
+  health_check:
+    endpoint: 0.0.0.0:13133
+  pprof:
+    endpoint: 0.0.0.0:1777
+
+exporters:
+  clickhousetraces:
+    datasource: tcp://host.docker.internal:9000/signoz_traces
+    low_cardinal_exception_grouping: ${env:LOW_CARDINAL_EXCEPTION_GROUPING}
+    use_new_schema: true
+  signozclickhousemetrics:
+    dsn: tcp://host.docker.internal:9000/signoz_metrics
+  clickhouselogsexporter:
+    dsn: tcp://host.docker.internal:9000/signoz_logs
+    timeout: 10s
+    use_new_schema: true
+
+service:
+  telemetry:
+    logs:
+      encoding: json
+  extensions:
+    - health_check
+    - pprof
+  pipelines:
+    traces:
+      receivers: [otlp]
+      processors: [signozspanmetrics/delta, batch]
+      exporters: [clickhousetraces]
+    metrics:
+      receivers: [otlp]
+      processors: [batch]
+      exporters: [signozclickhousemetrics]
+    metrics/prometheus:
+      receivers: [prometheus]
+      processors: [batch]
+      exporters: [signozclickhousemetrics]
+    logs:
+      receivers: [otlp]
+      processors: [batch]
+      exporters: [clickhouselogsexporter]

.github/CODEOWNERS

@@ -5,6 +5,45 @@
 /frontend/ @SigNoz/frontend @YounixM
 /frontend/src/container/MetricsApplication @srikanthccv
 /frontend/src/container/NewWidget/RightContainer/types.ts @srikanthccv
+
+# Dashboard, Alert, Metrics, Service Map, Services
+/frontend/src/container/ListOfDashboard/ @srikanthccv
+/frontend/src/container/NewDashboard/ @srikanthccv
+/frontend/src/pages/DashboardsListPage/ @srikanthccv
+/frontend/src/pages/DashboardWidget/ @srikanthccv
+/frontend/src/pages/NewDashboard/ @srikanthccv
+/frontend/src/providers/Dashboard/ @srikanthccv
+
+# Alerts
+/frontend/src/container/AlertHistory/ @srikanthccv
+/frontend/src/container/AllAlertChannels/ @srikanthccv
+/frontend/src/container/AnomalyAlertEvaluationView/ @srikanthccv
+/frontend/src/container/CreateAlertChannels/ @srikanthccv
+/frontend/src/container/CreateAlertRule/ @srikanthccv
+/frontend/src/container/EditAlertChannels/ @srikanthccv
+/frontend/src/container/FormAlertChannels/ @srikanthccv
+/frontend/src/container/FormAlertRules/ @srikanthccv
+/frontend/src/container/ListAlertRules/ @srikanthccv
+/frontend/src/container/TriggeredAlerts/ @srikanthccv
+/frontend/src/pages/AlertChannelCreate/ @srikanthccv
+/frontend/src/pages/AlertDetails/ @srikanthccv
+/frontend/src/pages/AlertHistory/ @srikanthccv
+/frontend/src/pages/AlertList/ @srikanthccv
+/frontend/src/pages/CreateAlert/ @srikanthccv
+/frontend/src/providers/Alert.tsx @srikanthccv
+
+# Metrics
+/frontend/src/container/MetricsExplorer/ @srikanthccv
+/frontend/src/pages/MetricsApplication/ @srikanthccv
+/frontend/src/pages/MetricsExplorer/ @srikanthccv
+
+# Services and Service Map
+/frontend/src/container/ServiceApplication/ @srikanthccv
+/frontend/src/container/ServiceTable/ @srikanthccv
+/frontend/src/pages/Services/ @srikanthccv
+/frontend/src/pages/ServiceTopLevelOperations/ @srikanthccv
+/frontend/src/container/Home/Services/ @srikanthccv
+
 /deploy/ @SigNoz/devops
 .github @SigNoz/devops
 
@@ -42,3 +81,7 @@
 /pkg/telemetrymetadata/ @srikanthccv
 /pkg/telemetrymetrics/ @srikanthccv
 /pkg/telemetrytraces/ @srikanthccv
+
+# AuthN / AuthZ Owners 
+
+/pkg/authz/ @vikrantgupta25 @grandwizard28

.github/workflows/build-community.yaml

@@ -62,7 +62,7 @@ jobs:
     secrets: inherit
     with:
       PRIMUS_REF: main
-      GO_VERSION: 1.23
+      GO_VERSION: 1.24
       GO_NAME: signoz-community
       GO_INPUT_ARTIFACT_CACHE_KEY: community-jsbuild-${{ github.sha }}
       GO_INPUT_ARTIFACT_PATH: frontend/build

.github/workflows/build-enterprise.yaml

@@ -93,7 +93,7 @@ jobs:
     secrets: inherit
     with:
       PRIMUS_REF: main
-      GO_VERSION: 1.23
+      GO_VERSION: 1.24
       GO_INPUT_ARTIFACT_CACHE_KEY: enterprise-jsbuild-${{ github.sha }}
       GO_INPUT_ARTIFACT_PATH: frontend/build
       GO_BUILD_CONTEXT: ./cmd/enterprise

.github/workflows/build-staging.yaml

@@ -92,7 +92,7 @@ jobs:
     secrets: inherit
     with:
       PRIMUS_REF: main
-      GO_VERSION: 1.23
+      GO_VERSION: 1.24
       GO_INPUT_ARTIFACT_CACHE_KEY: staging-jsbuild-${{ github.sha }}
       GO_INPUT_ARTIFACT_PATH: frontend/build
       GO_BUILD_CONTEXT: ./cmd/enterprise

.github/workflows/goci.yaml

@@ -18,7 +18,7 @@ jobs:
     with:
       PRIMUS_REF: main
       GO_TEST_CONTEXT: ./...
-      GO_VERSION: 1.23
+      GO_VERSION: 1.24
   fmt:
     if: |
       (github.event_name == 'pull_request' && ! github.event.pull_request.head.repo.fork && github.event.pull_request.user.login != 'dependabot[bot]' && ! contains(github.event.pull_request.labels.*.name, 'safe-to-test')) ||
@@ -27,7 +27,7 @@ jobs:
     secrets: inherit
     with:
       PRIMUS_REF: main
-      GO_VERSION: 1.23
+      GO_VERSION: 1.24
   lint:
     if: |
       (github.event_name == 'pull_request' && ! github.event.pull_request.head.repo.fork && github.event.pull_request.user.login != 'dependabot[bot]' && ! contains(github.event.pull_request.labels.*.name, 'safe-to-test')) ||
@@ -36,7 +36,7 @@ jobs:
     secrets: inherit
     with:
       PRIMUS_REF: main
-      GO_VERSION: 1.23
+      GO_VERSION: 1.24
   deps:
     if: |
       (github.event_name == 'pull_request' && ! github.event.pull_request.head.repo.fork && github.event.pull_request.user.login != 'dependabot[bot]' && ! contains(github.event.pull_request.labels.*.name, 'safe-to-test')) ||
@@ -45,7 +45,7 @@ jobs:
     secrets: inherit
     with:
       PRIMUS_REF: main
-      GO_VERSION: 1.23
+      GO_VERSION: 1.24
   build:
     if: |
       (github.event_name == 'pull_request' && ! github.event.pull_request.head.repo.fork && github.event.pull_request.user.login != 'dependabot[bot]' && ! contains(github.event.pull_request.labels.*.name, 'safe-to-test')) ||
@@ -57,7 +57,7 @@ jobs:
       - name: go-install
         uses: actions/setup-go@v5
         with:
-          go-version: "1.23"
+          go-version: "1.24"
       - name: qemu-install
         uses: docker/setup-qemu-action@v3
       - name: aarch64-install

.github/workflows/gor-signoz-community.yaml

@@ -58,7 +58,7 @@ jobs:
       - name: setup-go
         uses: actions/setup-go@v5
         with:
-          go-version: "1.23"
+          go-version: "1.24"
       - name: cross-compilation-tools
         if: matrix.os == 'ubuntu-latest'
         run: |
@@ -122,7 +122,7 @@ jobs:
       - name: setup-go
         uses: actions/setup-go@v5
         with:
-          go-version: "1.23"
+          go-version: "1.24"
 
       # copy the caches from build
       - name: get-sha

.github/workflows/gor-signoz.yaml

@@ -72,7 +72,7 @@ jobs:
       - name: setup-go
         uses: actions/setup-go@v5
         with:
-          go-version: "1.23"
+          go-version: "1.24"
       - name: cross-compilation-tools
         if: matrix.os == 'ubuntu-latest'
         run: |
@@ -135,7 +135,7 @@ jobs:
       - name: setup-go
         uses: actions/setup-go@v5
         with:
-          go-version: "1.23"
+          go-version: "1.24"
 
       # copy the caches from build
       - name: get-sha

.gitignore

@@ -86,6 +86,8 @@ queries.active
 .devenv/**/tmp/**
 .qodo
 
+.dev
+
 ### Python ###
 # Byte-compiled / optimized / DLL files
 __pycache__/

.golangci.yml

@@ -8,6 +8,7 @@ linters:
     - depguard
     - iface
     - unparam
+    - forbidigo
 
 linters-settings:
   sloglint:
@@ -24,6 +25,10 @@ linters-settings:
         deny:
           - pkg: "go.uber.org/zap"
             desc: "Do not use zap logger. Use slog instead."
+      noerrors:
+        deny:
+          - pkg: "errors"
+            desc: "Do not use errors package. Use github.com/SigNoz/signoz/pkg/errors instead."
   iface:
     enable:
       - identical

CONTRIBUTING.md

@@ -78,4 +78,5 @@ Need assistance? Join our Slack community:
 
 - Set up your [development environment](docs/contributing/development.md)
 - Deploy and observe [SigNoz in action with OpenTelemetry Demo Application](docs/otel-demo-docs.md)
-- Explore the [SigNoz Community Advocate Program](ADVOCATE.md), which recognises contributors who support the community, share their expertise, and help shape SigNoz's future. 
+- Explore the [SigNoz Community Advocate Program](ADVOCATE.md), which recognises contributors who support the community, share their expertise, and help shape SigNoz's future.
+- Write [integration tests](docs/contributing/go/integration.md)

Makefile

@@ -61,6 +61,17 @@ devenv-postgres: ## Run postgres in devenv
 	@cd .devenv/docker/postgres; \
 	docker compose -f compose.yaml up -d
 
+.PHONY: devenv-signoz-otel-collector
+devenv-signoz-otel-collector: ## Run signoz-otel-collector in devenv (requires clickhouse to be running)
+	@cd .devenv/docker/signoz-otel-collector; \
+	docker compose -f compose.yaml up -d
+
+.PHONY: devenv-up
+devenv-up: devenv-clickhouse devenv-signoz-otel-collector ## Start both clickhouse and signoz-otel-collector for local development
+	@echo "Development environment is ready!"
+	@echo "   - ClickHouse: http://localhost:8123"
+	@echo "   - Signoz OTel Collector: grpc://localhost:4317, http://localhost:4318"
+
 ##############################################################
 # go commands
 ##############################################################

cmd/community/server.go

@@ -32,7 +32,7 @@ func registerServer(parentCmd *cobra.Command, logger *slog.Logger) {
 		Short:              "Run the SigNoz server",
 		FParseErrWhitelist: cobra.FParseErrWhitelist{UnknownFlags: true},
 		RunE: func(currCmd *cobra.Command, args []string) error {
-			config, err := cmd.NewSigNozConfig(currCmd.Context(), flags)
+			config, err := cmd.NewSigNozConfig(currCmd.Context(), logger, flags)
 			if err != nil {
 				return err
 			}

cmd/config.go

@@ -2,7 +2,6 @@ package cmd
 
 import (
 	"context"
-	"fmt"
 	"log/slog"
 	"os"
 
@@ -12,9 +11,10 @@ import (
 	"github.com/SigNoz/signoz/pkg/signoz"
 )
 
-func NewSigNozConfig(ctx context.Context, flags signoz.DeprecatedFlags) (signoz.Config, error) {
+func NewSigNozConfig(ctx context.Context, logger *slog.Logger, flags signoz.DeprecatedFlags) (signoz.Config, error) {
 	config, err := signoz.NewConfig(
 		ctx,
+		logger,
 		config.ResolverConfig{
 			Uris: []string{"env:"},
 			ProviderFactories: []config.ProviderFactory{
@@ -31,14 +31,10 @@ func NewSigNozConfig(ctx context.Context, flags signoz.DeprecatedFlags) (signoz.
 	return config, nil
 }
 
-func NewJWTSecret(_ context.Context, _ *slog.Logger) string {
+func NewJWTSecret(ctx context.Context, logger *slog.Logger) string {
 	jwtSecret := os.Getenv("SIGNOZ_JWT_SECRET")
 	if len(jwtSecret) == 0 {
-		fmt.Println("🚨 CRITICAL SECURITY ISSUE: No JWT secret key specified!")
-		fmt.Println("SIGNOZ_JWT_SECRET environment variable is not set. This has dire consequences for the security of the application.")
-		fmt.Println("Without a JWT secret, user sessions are vulnerable to tampering and unauthorized access.")
-		fmt.Println("Please set the SIGNOZ_JWT_SECRET environment variable immediately.")
-		fmt.Println("For more information, please refer to https://github.com/SigNoz/signoz/issues/8400.")
+		logger.ErrorContext(ctx, "🚨 CRITICAL SECURITY ISSUE: No JWT secret key specified!", "error", "SIGNOZ_JWT_SECRET environment variable is not set. This has dire consequences for the security of the application. Without a JWT secret, user sessions are vulnerable to tampering and unauthorized access. Please set the SIGNOZ_JWT_SECRET environment variable immediately. For more information, please refer to https://github.com/SigNoz/signoz/issues/8400.")
 	}
 
 	return jwtSecret

cmd/enterprise/Dockerfile.integration

@@ -2,10 +2,11 @@ FROM node:18-bullseye AS build
 
 WORKDIR /opt/
 COPY ./frontend/ ./
+ENV NODE_OPTIONS=--max-old-space-size=8192
 RUN CI=1 yarn install
 RUN CI=1 yarn build
 
-FROM golang:1.23-bullseye
+FROM golang:1.24-bullseye
 
 ARG OS="linux"
 ARG TARGETARCH

cmd/enterprise/server.go

@@ -35,7 +35,7 @@ func registerServer(parentCmd *cobra.Command, logger *slog.Logger) {
 		Short:              "Run the SigNoz server",
 		FParseErrWhitelist: cobra.FParseErrWhitelist{UnknownFlags: true},
 		RunE: func(currCmd *cobra.Command, args []string) error {
-			config, err := cmd.NewSigNozConfig(currCmd.Context(), flags)
+			config, err := cmd.NewSigNozConfig(currCmd.Context(), logger, flags)
 			if err != nil {
 				return err
 			}

conf/example.yaml

@@ -121,6 +121,8 @@ telemetrystore:
       timeout_before_checking_execution_speed: 0
       max_bytes_to_read: 0
       max_result_rows: 0
+      ignore_data_skipping_indices: ""
+      secondary_indices_enable_bulk_filtering: false
 
 ##################### Prometheus #####################
 prometheus:
@@ -135,10 +137,7 @@ prometheus:
 ##################### Alertmanager #####################
 alertmanager:
   # Specifies the alertmanager provider to use.
-  provider: legacy
-  legacy:
-    # The API URL (with prefix) of the legacy Alertmanager instance.
-    api_url: http://localhost:9093/api
+  provider: signoz
   signoz:
     # The poll interval for periodically syncing the alertmanager with the config in the store.
     poll_interval: 1m

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

@@ -11,7 +11,7 @@ x-common: &common
       max-file: "3"
 x-clickhouse-defaults: &clickhouse-defaults
   !!merge <<: *common
-  image: clickhouse/clickhouse-server:24.1.2-alpine
+  image: clickhouse/clickhouse-server:25.5.6
   tty: true
   deploy:
     labels:
@@ -37,9 +37,11 @@ x-clickhouse-defaults: &clickhouse-defaults
     nofile:
       soft: 262144
       hard: 262144
+  environment:
+    - CLICKHOUSE_SKIP_USER_SETUP=1
 x-zookeeper-defaults: &zookeeper-defaults
   !!merge <<: *common
-  image: bitnami/zookeeper:3.7.1
+  image: signoz/zookeeper:3.7.1
   user: root
   deploy:
     labels:
@@ -63,7 +65,7 @@ x-db-depend: &db-depend
 services:
   init-clickhouse:
     !!merge <<: *common
-    image: clickhouse/clickhouse-server:24.1.2-alpine
+    image: clickhouse/clickhouse-server:25.5.6
     command:
       - bash
       - -c
@@ -174,7 +176,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:v0.91.0
+    image: signoz/signoz:v0.95.0
     command:
       - --config=/root/config/prometheus.yml
     ports:
@@ -207,7 +209,7 @@ services:
       retries: 3
   otel-collector:
     !!merge <<: *db-depend
-    image: signoz/signoz-otel-collector:v0.128.2
+    image: signoz/signoz-otel-collector:v0.129.5
     command:
       - --config=/etc/otel-collector-config.yaml
       - --manager-config=/etc/manager-config.yaml
@@ -231,7 +233,7 @@ services:
       - signoz
   schema-migrator:
     !!merge <<: *common
-    image: signoz/signoz-schema-migrator:v0.128.2
+    image: signoz/signoz-schema-migrator:v0.129.5
     deploy:
       restart_policy:
         condition: on-failure

deploy/docker-swarm/docker-compose.yaml

@@ -11,7 +11,7 @@ x-common: &common
       max-file: "3"
 x-clickhouse-defaults: &clickhouse-defaults
   !!merge <<: *common
-  image: clickhouse/clickhouse-server:24.1.2-alpine
+  image: clickhouse/clickhouse-server:25.5.6
   tty: true
   deploy:
     labels:
@@ -36,9 +36,11 @@ x-clickhouse-defaults: &clickhouse-defaults
     nofile:
       soft: 262144
       hard: 262144
+  environment:
+    - CLICKHOUSE_SKIP_USER_SETUP=1
 x-zookeeper-defaults: &zookeeper-defaults
   !!merge <<: *common
-  image: bitnami/zookeeper:3.7.1
+  image: signoz/zookeeper:3.7.1
   user: root
   deploy:
     labels:
@@ -60,7 +62,7 @@ x-db-depend: &db-depend
 services:
   init-clickhouse:
     !!merge <<: *common
-    image: clickhouse/clickhouse-server:24.1.2-alpine
+    image: clickhouse/clickhouse-server:25.5.6
     command:
       - bash
       - -c
@@ -115,7 +117,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:v0.91.0
+    image: signoz/signoz:v0.95.0
     command:
       - --config=/root/config/prometheus.yml
     ports:
@@ -148,7 +150,7 @@ services:
       retries: 3
   otel-collector:
     !!merge <<: *db-depend
-    image: signoz/signoz-otel-collector:v0.128.2
+    image: signoz/signoz-otel-collector:v0.129.5
     command:
       - --config=/etc/otel-collector-config.yaml
       - --manager-config=/etc/manager-config.yaml
@@ -174,7 +176,7 @@ services:
       - signoz
   schema-migrator:
     !!merge <<: *common
-    image: signoz/signoz-schema-migrator:v0.128.2
+    image: signoz/signoz-schema-migrator:v0.129.5
     deploy:
       restart_policy:
         condition: on-failure

deploy/docker/docker-compose.ha.yaml

@@ -10,7 +10,7 @@ x-common: &common
 x-clickhouse-defaults: &clickhouse-defaults
   !!merge <<: *common
   # addding non LTS version due to this fix https://github.com/ClickHouse/ClickHouse/commit/32caf8716352f45c1b617274c7508c86b7d1afab
-  image: clickhouse/clickhouse-server:24.1.2-alpine
+  image: clickhouse/clickhouse-server:25.5.6
   tty: true
   labels:
     signoz.io/scrape: "true"
@@ -40,9 +40,11 @@ x-clickhouse-defaults: &clickhouse-defaults
     nofile:
       soft: 262144
       hard: 262144
+  environment:
+    - CLICKHOUSE_SKIP_USER_SETUP=1
 x-zookeeper-defaults: &zookeeper-defaults
   !!merge <<: *common
-  image: bitnami/zookeeper:3.7.1
+  image: signoz/zookeeper:3.7.1
   user: root
   labels:
     signoz.io/scrape: "true"
@@ -65,7 +67,7 @@ x-db-depend: &db-depend
 services:
   init-clickhouse:
     !!merge <<: *common
-    image: clickhouse/clickhouse-server:24.1.2-alpine
+    image: clickhouse/clickhouse-server:25.5.6
     container_name: signoz-init-clickhouse
     command:
       - bash
@@ -177,7 +179,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:${VERSION:-v0.91.0}
+    image: signoz/signoz:${VERSION:-v0.95.0}
     container_name: signoz
     command:
       - --config=/root/config/prometheus.yml
@@ -211,7 +213,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.2}
+    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-v0.129.5}
     container_name: signoz-otel-collector
     command:
       - --config=/etc/otel-collector-config.yaml
@@ -237,7 +239,7 @@ services:
         condition: service_healthy
   schema-migrator-sync:
     !!merge <<: *common
-    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-v0.128.2}
+    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-v0.129.5}
     container_name: schema-migrator-sync
     command:
       - sync
@@ -248,7 +250,7 @@ services:
         condition: service_healthy
   schema-migrator-async:
     !!merge <<: *db-depend
-    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-v0.128.2}
+    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-v0.129.5}
     container_name: schema-migrator-async
     command:
       - async

deploy/docker/docker-compose.yaml

@@ -9,8 +9,7 @@ x-common: &common
       max-file: "3"
 x-clickhouse-defaults: &clickhouse-defaults
   !!merge <<: *common
-  # addding non LTS version due to this fix https://github.com/ClickHouse/ClickHouse/commit/32caf8716352f45c1b617274c7508c86b7d1afab
-  image: clickhouse/clickhouse-server:24.1.2-alpine
+  image: clickhouse/clickhouse-server:25.5.6
   tty: true
   labels:
     signoz.io/scrape: "true"
@@ -36,9 +35,11 @@ x-clickhouse-defaults: &clickhouse-defaults
     nofile:
       soft: 262144
       hard: 262144
+  environment:
+    - CLICKHOUSE_SKIP_USER_SETUP=1
 x-zookeeper-defaults: &zookeeper-defaults
   !!merge <<: *common
-  image: bitnami/zookeeper:3.7.1
+  image: signoz/zookeeper:3.7.1
   user: root
   labels:
     signoz.io/scrape: "true"
@@ -61,7 +62,7 @@ x-db-depend: &db-depend
 services:
   init-clickhouse:
     !!merge <<: *common
-    image: clickhouse/clickhouse-server:24.1.2-alpine
+    image: clickhouse/clickhouse-server:25.5.6
     container_name: signoz-init-clickhouse
     command:
       - bash
@@ -110,7 +111,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:${VERSION:-v0.91.0}
+    image: signoz/signoz:${VERSION:-v0.95.0}
     container_name: signoz
     command:
       - --config=/root/config/prometheus.yml
@@ -143,7 +144,7 @@ services:
       retries: 3
   otel-collector:
     !!merge <<: *db-depend
-    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-v0.128.2}
+    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-v0.129.5}
     container_name: signoz-otel-collector
     command:
       - --config=/etc/otel-collector-config.yaml
@@ -165,7 +166,7 @@ services:
         condition: service_healthy
   schema-migrator-sync:
     !!merge <<: *common
-    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-v0.128.2}
+    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-v0.129.5}
     container_name: schema-migrator-sync
     command:
       - sync
@@ -177,7 +178,7 @@ services:
     restart: on-failure
   schema-migrator-async:
     !!merge <<: *db-depend
-    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-v0.128.2}
+    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-v0.129.5}
     container_name: schema-migrator-async
     command:
       - async

docs/contributing/development.md

@@ -44,20 +44,35 @@ Before diving in, make sure you have these tools installed:
 
 SigNoz has three main components: Clickhouse, Backend, and Frontend. Let's set them up one by one.
 
-### 1. Setting up Clickhouse
+### 1. Setting up ClickHouse
 
-First, we need to get Clickhouse running:
+First, we need to get ClickHouse running:
 
 ```bash
 make devenv-clickhouse
 ```
 
 This command:
-- Starts Clickhouse in a single-shard, single-replica cluster
+- Starts ClickHouse in a single-shard, single-replica cluster
 - Sets up Zookeeper
 - Runs the latest schema migrations
 
-### 2. Starting the Backend
+### 2. Setting up SigNoz OpenTelemetry Collector
+
+Next, start the OpenTelemetry Collector to receive telemetry data:
+
+```bash
+make devenv-signoz-otel-collector
+```
+
+This command:
+- Starts the SigNoz OpenTelemetry Collector
+- Listens on port 4317 (gRPC) and 4318 (HTTP) for incoming telemetry data
+- Forwards data to ClickHouse for storage
+
+> 💡 **Quick Setup**: Use `make devenv-up` to start both ClickHouse and OTel Collector together
+
+### 3. Starting the Backend
 
 1. Run the backend server:
    ```bash
@@ -73,19 +88,24 @@ This command:
 
 > 💡 **Tip**: The API server runs at `http://localhost:8080/` by default
 
-### 3. Setting up the Frontend
+### 4. Setting up the Frontend
 
-1. Install dependencies:
+1. Navigate to the frontend directory:
+   ```bash
+   cd frontend
+   ```
+
+2. Install dependencies:
    ```bash
    yarn install
    ```
 
-2. Create a `.env` file in the `frontend` directory:
+3. Create a `.env` file in this directory:
    ```env
    FRONTEND_API_ENDPOINT=http://localhost:8080
    ```
 
-3. Start the development server:
+4. Start the development server:
    ```bash
    yarn dev
    ```
@@ -93,3 +113,25 @@ This command:
 > 💡 **Tip**: `yarn dev` will automatically rebuild when you make changes to the code
 
 Now you're all set to start developing! Happy coding! 🎉
+
+## Verifying Your Setup
+To verify everything is working correctly:
+
+1. **Check ClickHouse**: `curl http://localhost:8123/ping` (should return "Ok.")
+2. **Check OTel Collector**: `curl http://localhost:13133` (should return health status)
+3. **Check Backend**: `curl http://localhost:8080/api/v1/health` (should return `{"status":"ok"}`)
+4. **Check Frontend**: Open `http://localhost:3301` in your browser
+
+## How to send test data?
+
+You can now send telemetry data to your local SigNoz instance:
+
+- **OTLP gRPC**: `localhost:4317`
+- **OTLP HTTP**: `localhost:4318`
+
+For example, using `curl` to send a test trace:
+```bash
+curl -X POST http://localhost:4318/v1/traces \
+  -H "Content-Type: application/json" \
+  -d '{"resourceSpans":[{"resource":{"attributes":[{"key":"service.name","value":{"stringValue":"test-service"}}]},"scopeSpans":[{"spans":[{"traceId":"12345678901234567890123456789012","spanId":"1234567890123456","name":"test-span","startTimeUnixNano":"1609459200000000000","endTimeUnixNano":"1609459201000000000"}]}]}]}'
+```

docs/contributing/go/integration.md

@@ -0,0 +1,213 @@
+# Integration Tests
+
+SigNoz uses integration tests to verify that different components work together correctly in a real environment. These tests run against actual services (ClickHouse, PostgreSQL, etc.) to ensure end-to-end functionality.
+
+## How to set up the integration test environment?
+
+### Prerequisites
+
+Before running integration tests, ensure you have the following installed:
+
+- Python 3.13+
+- Poetry (for dependency management)
+- Docker (for containerized services)
+
+### Initial Setup
+
+1. Navigate to the integration tests directory:
+```bash
+cd tests/integration
+```
+
+2. Install dependencies using Poetry:
+```bash
+poetry install --no-root
+```
+
+### Starting the Test Environment
+
+To spin up all the containers necessary for writing integration tests and keep them running:
+
+```bash
+poetry run pytest --basetemp=./tmp/ -vv --reuse src/bootstrap/setup.py::test_setup
+```
+
+This command will:
+- Start all required services (ClickHouse, PostgreSQL, Zookeeper, etc.)
+- Keep containers running due to the `--reuse` flag
+- Verify that the setup is working correctly
+
+### Stopping the Test Environment
+
+When you're done writing integration tests, clean up the environment:
+
+```bash
+poetry run pytest --basetemp=./tmp/ -vv --teardown -s src/bootstrap/setup.py::test_teardown
+```
+
+This will destroy the running integration test setup and clean up resources.
+
+## Understanding the Integration Test Framework
+
+Python and pytest form the foundation of the integration testing framework. Testcontainers are used to spin up disposable integration environments. Wiremock is used to spin up **test doubles** of other services.
+
+- **Why Python/pytest?** It's expressive, low-boilerplate, and has powerful fixture capabilities that make integration testing straightforward. Extensive libraries for HTTP requests, JSON handling, and data analysis (numpy) make it easier to test APIs and verify data
+- **Why testcontainers?** They let us spin up isolated dependencies that match our production environment without complex setup.
+- **Why wiremock?** Well maintained, documented and extensible.
+
+```
+.
+├── conftest.py
+├── fixtures
+│   ├── __init__.py
+│   ├── auth.py
+│   ├── clickhouse.py
+│   ├── fs.py
+│   ├── http.py
+│   ├── migrator.py
+│   ├── network.py
+│   ├── postgres.py
+│   ├── signoz.py
+│   ├── sql.py
+│   ├── sqlite.py
+│   ├── types.py
+│   └── zookeeper.py
+├── poetry.lock
+├── pyproject.toml
+└── src
+    └── bootstrap
+        ├── __init__.py
+        ├── a_database.py
+        ├── b_register.py
+        └── c_license.py
+```
+
+Each test suite follows some important principles:
+
+1. **Organization**: Test suites live under `src/` in self-contained packages. Fixtures (a pytest concept) live inside `fixtures/`.
+2. **Execution Order**: Files are prefixed with `a_`, `b_`, `c_` to ensure sequential execution.
+3. **Time Constraints**: Each suite should complete in under 10 minutes (setup takes ~4 mins).
+
+### Test Suite Design
+
+Test suites should target functional domains or subsystems within SigNoz. When designing a test suite, consider these principles:
+
+- **Functional Cohesion**: Group tests around a specific capability or service boundary
+- **Data Flow**: Follow the path of data through related components
+- **Change Patterns**: Components frequently modified together should be tested together
+
+The exact boundaries for modules are intentionally flexible, allowing teams to define logical groupings based on their specific context and knowledge of the system.
+
+Eg: The **bootstrap** integration test suite validates core system functionality:
+
+- Database initialization
+- Version check
+
+Other test suites can be **pipelines, auth, querier.**
+
+## How to write an integration test?
+
+Now start writing an integration test. Create a new file `src/bootstrap/e_version.py` and paste the following:
+
+```python
+import requests
+
+from fixtures import types
+from fixtures.logger import setup_logger
+
+logger = setup_logger(__name__)
+
+def test_version(signoz: types.SigNoz) -> None:
+    response = requests.get(signoz.self.host_config.get("/api/v1/version"), timeout=2)
+    logger.info(response)
+```
+
+We have written a simple test which calls the `version` endpoint of the container in step 1. In **order to just run this function, run the following command:**
+
+```bash
+poetry run pytest --basetemp=./tmp/ -vv --reuse src/bootstrap/e_version.py::test_version
+```
+
+> Note: The `--reuse` flag is used to reuse the environment if it is already running. Always use this flag when writing and running integration tests. If you don't use this flag, the environment will be destroyed and recreated every time you run the test.
+
+Here's another example of how to write a more comprehensive integration test:
+
+```python
+from http import HTTPStatus
+import requests
+from fixtures import types
+from fixtures.logger import setup_logger
+
+logger = setup_logger(__name__)
+
+def test_user_registration(signoz: types.SigNoz) -> None:
+    """Test user registration functionality."""
+    response = requests.post(
+        signoz.self.host_configs["8080"].get("/api/v1/register"),
+        json={
+            "name": "testuser",
+            "orgId": "",
+            "orgName": "test.org",
+            "email": "test@example.com",
+            "password": "password123Z$",
+        },
+        timeout=2,
+    )
+    
+    assert response.status_code == HTTPStatus.OK
+    assert response.json()["setupCompleted"] is True
+```
+
+## How to run integration tests?
+
+### Running All Tests
+
+```bash
+poetry run pytest --basetemp=./tmp/ -vv --reuse src/
+```
+
+### Running Specific Test Categories
+
+```bash
+poetry run pytest --basetemp=./tmp/ -vv --reuse src/<suite>
+
+# Run querier tests
+poetry run pytest --basetemp=./tmp/ -vv --reuse src/querier/
+# Run auth tests
+poetry run pytest --basetemp=./tmp/ -vv --reuse src/auth/
+```
+
+### Running Individual Tests
+
+```bash
+poetry run pytest --basetemp=./tmp/ -vv --reuse src/<suite>/<file>.py::test_name
+
+# Run test_register in file a_register.py in auth suite
+poetry run pytest --basetemp=./tmp/ -vv --reuse src/auth/a_register.py::test_register
+```
+
+## How to configure different options for integration tests?
+
+Tests can be configured using pytest options:
+
+- `--sqlstore-provider` - Choose database provider (default: postgres)
+- `--postgres-version` - PostgreSQL version (default: 15)
+- `--clickhouse-version` - ClickHouse version (default: 24.1.2-alpine)
+- `--zookeeper-version` - Zookeeper version (default: 3.7.1)
+
+Example:
+```bash
+poetry run pytest --basetemp=./tmp/ -vv --reuse --sqlstore-provider=postgres --postgres-version=14 src/auth/
+```
+
+
+## What should I remember?
+
+- **Always use the `--reuse` flag** when setting up the environment to keep containers running
+- **Use the `--teardown` flag** when cleaning up to avoid resource leaks
+- **Follow the naming convention** with alphabetical prefixes for test execution order
+- **Use proper timeouts** in HTTP requests to avoid hanging tests
+- **Clean up test data** between tests to avoid interference
+- **Use descriptive test names** that clearly indicate what is being tested
+- **Leverage fixtures** for common setup and authentication
+- **Test both success and failure scenarios** to ensure robust functionality

ee/anomaly/seasonal.go

@@ -50,19 +50,14 @@ func (p *BaseSeasonalProvider) getQueryParams(req *AnomaliesRequest) *anomalyQue
 
 func (p *BaseSeasonalProvider) toTSResults(ctx context.Context, resp *qbtypes.QueryRangeResponse) []*qbtypes.TimeSeriesData {
 
-	if resp == nil || resp.Data == nil {
+	tsData := []*qbtypes.TimeSeriesData{}
+
+	if resp == nil {
 		p.logger.InfoContext(ctx, "nil response from query range")
+		return tsData
 	}
 
-	data, ok := resp.Data.(struct {
-		Results  []any    `json:"results"`
-		Warnings []string `json:"warnings"`
-	})
-	if !ok {
-		return nil
-	}
-	tsData := []*qbtypes.TimeSeriesData{}
-	for _, item := range data.Results {
+	for _, item := range resp.Data.Results {
 		if resultData, ok := item.(*qbtypes.TimeSeriesData); ok {
 			tsData = append(tsData, resultData)
 		}
@@ -395,6 +390,11 @@ func (p *BaseSeasonalProvider) getAnomalies(ctx context.Context, orgID valuer.UU
 			continue
 		}
 
+		// no data;
+		if len(result.Aggregations) == 0 {
+			continue
+		}
+
 		aggOfInterest := result.Aggregations[0]
 
 		for _, series := range aggOfInterest.Series {

ee/query-service/app/api/api.go

@@ -113,6 +113,8 @@ func (ah *APIHandler) RegisterRoutes(router *mux.Router, am *middleware.AuthZ) {
 	// v5
 	router.HandleFunc("/api/v5/query_range", am.ViewAccess(ah.queryRangeV5)).Methods(http.MethodPost)
 
+	router.HandleFunc("/api/v5/substitute_vars", am.ViewAccess(ah.QuerierAPI.ReplaceVariables)).Methods(http.MethodPost)
+
 	// Gateway
 	router.PathPrefix(gateway.RoutePrefix).HandlerFunc(am.EditAccess(ah.ServeGatewayHTTP))
 

ee/query-service/app/api/cloudIntegrations.go

@@ -13,11 +13,11 @@ import (
 	"github.com/SigNoz/signoz/ee/query-service/constants"
 	"github.com/SigNoz/signoz/pkg/errors"
 	"github.com/SigNoz/signoz/pkg/http/render"
+	"github.com/SigNoz/signoz/pkg/modules/user"
 	basemodel "github.com/SigNoz/signoz/pkg/query-service/model"
 	"github.com/SigNoz/signoz/pkg/types"
 	"github.com/SigNoz/signoz/pkg/types/authtypes"
 	"github.com/SigNoz/signoz/pkg/valuer"
-	"github.com/google/uuid"
 	"github.com/gorilla/mux"
 	"go.uber.org/zap"
 )
@@ -192,14 +192,14 @@ func (ah *APIHandler) getOrCreateCloudIntegrationUser(
 		))
 	}
 
-	password, err := types.NewFactorPassword(uuid.NewString())
+	password := types.MustGenerateFactorPassword(newUser.ID.StringValue())
 
-	integrationUser, err := ah.Signoz.Modules.User.CreateUserWithPassword(ctx, newUser, password)
+	err = ah.Signoz.Modules.User.CreateUser(ctx, newUser, user.WithFactorPassword(password))
 	if err != nil {
 		return nil, basemodel.InternalError(fmt.Errorf("couldn't create cloud integration user: %w", err))
 	}
 
-	return integrationUser, nil
+	return newUser, nil
 }
 
 func getIngestionUrlAndSigNozAPIUrl(ctx context.Context, licenseKey string) (

ee/query-service/app/api/queryrange.go

@@ -260,11 +260,9 @@ func (aH *APIHandler) queryRangeV5(rw http.ResponseWriter, req *http.Request) {
 		finalResp := &qbtypes.QueryRangeResponse{
 			Type: queryRangeRequest.RequestType,
 			Data: struct {
-				Results  []any    `json:"results"`
-				Warnings []string `json:"warnings"`
+				Results []any `json:"results"`
 			}{
-				Results:  results,
-				Warnings: make([]string, 0), // TODO(srikanthccv): will there be any warnings here?
+				Results: results,
 			},
 			Meta: struct {
 				RowsScanned  uint64 `json:"rowsScanned"`

ee/query-service/app/server.go

@@ -3,6 +3,7 @@ package app
 import (
 	"context"
 	"fmt"
+	"log/slog"
 	"net"
 	"net/http"
 	_ "net/http/pprof" // http profiler
@@ -18,6 +19,7 @@ import (
 	"github.com/SigNoz/signoz/pkg/http/middleware"
 	"github.com/SigNoz/signoz/pkg/modules/organization"
 	"github.com/SigNoz/signoz/pkg/prometheus"
+	"github.com/SigNoz/signoz/pkg/querier"
 	"github.com/SigNoz/signoz/pkg/signoz"
 	"github.com/SigNoz/signoz/pkg/sqlstore"
 	"github.com/SigNoz/signoz/pkg/telemetrystore"
@@ -42,19 +44,6 @@ import (
 	"go.uber.org/zap"
 )
 
-type ServerOptions struct {
-	Config                     signoz.Config
-	SigNoz                     *signoz.SigNoz
-	HTTPHostPort               string
-	PrivateHostPort            string
-	PreferSpanMetrics          bool
-	FluxInterval               string
-	FluxIntervalForTraceDetail string
-	Cluster                    string
-	GatewayUrl                 string
-	Jwt                        *authtypes.JWT
-}
-
 // Server runs HTTP, Mux and a grpc server
 type Server struct {
 	config      signoz.Config
@@ -67,11 +56,6 @@ type Server struct {
 	httpServer   *http.Server
 	httpHostPort string
 
-	// private http
-	privateConn     net.Listener
-	privateHTTP     *http.Server
-	privateHostPort string
-
 	opampServer *opamp.Server
 
 	// Usage manager
@@ -104,6 +88,8 @@ func NewServer(config signoz.Config, signoz *signoz.SigNoz, jwt *authtypes.JWT)
 		signoz.TelemetryStore,
 		signoz.Prometheus,
 		signoz.Modules.OrgGetter,
+		signoz.Querier,
+		signoz.Instrumentation.Logger(),
 	)
 
 	if err != nil {
@@ -179,7 +165,6 @@ func NewServer(config signoz.Config, signoz *signoz.SigNoz, jwt *authtypes.JWT)
 		jwt:                jwt,
 		ruleManager:        rm,
 		httpHostPort:       baseconst.HTTPHostPort,
-		privateHostPort:    baseconst.PrivateHostPort,
 		unavailableChannel: make(chan healthcheck.Status),
 		usageManager:       usageManager,
 	}
@@ -192,13 +177,6 @@ func NewServer(config signoz.Config, signoz *signoz.SigNoz, jwt *authtypes.JWT)
 
 	s.httpServer = httpServer
 
-	privateServer, err := s.createPrivateServer(apiHandler)
-	if err != nil {
-		return nil, err
-	}
-
-	s.privateHTTP = privateServer
-
 	s.opampServer = opamp.InitializeServer(
 		&opAmpModel.AllAgents, agentConfMgr, signoz.Instrumentation,
 	)
@@ -211,36 +189,6 @@ func (s Server) HealthCheckStatus() chan healthcheck.Status {
 	return s.unavailableChannel
 }
 
-func (s *Server) createPrivateServer(apiHandler *api.APIHandler) (*http.Server, error) {
-	r := baseapp.NewRouter()
-
-	r.Use(middleware.NewAuth(s.jwt, []string{"Authorization", "Sec-WebSocket-Protocol"}, s.signoz.Sharder, s.signoz.Instrumentation.Logger()).Wrap)
-	r.Use(middleware.NewAPIKey(s.signoz.SQLStore, []string{"SIGNOZ-API-KEY"}, s.signoz.Instrumentation.Logger(), s.signoz.Sharder).Wrap)
-	r.Use(middleware.NewTimeout(s.signoz.Instrumentation.Logger(),
-		s.config.APIServer.Timeout.ExcludedRoutes,
-		s.config.APIServer.Timeout.Default,
-		s.config.APIServer.Timeout.Max,
-	).Wrap)
-	r.Use(middleware.NewLogging(s.signoz.Instrumentation.Logger(), s.config.APIServer.Logging.ExcludedRoutes).Wrap)
-
-	apiHandler.RegisterPrivateRoutes(r)
-
-	c := cors.New(cors.Options{
-		//todo(amol): find out a way to add exact domain or
-		// ip here for alert manager
-		AllowedOrigins: []string{"*"},
-		AllowedMethods: []string{"GET", "DELETE", "POST", "PUT", "PATCH"},
-		AllowedHeaders: []string{"Accept", "Authorization", "Content-Type", "SIGNOZ-API-KEY", "X-SIGNOZ-QUERY-ID", "Sec-WebSocket-Protocol"},
-	})
-
-	handler := c.Handler(r)
-	handler = handlers.CompressHandler(handler)
-
-	return &http.Server{
-		Handler: handler,
-	}, nil
-}
-
 func (s *Server) createPublicServer(apiHandler *api.APIHandler, web web.Web) (*http.Server, error) {
 	r := baseapp.NewRouter()
 	am := middleware.NewAuthZ(s.signoz.Instrumentation.Logger())
@@ -253,6 +201,7 @@ func (s *Server) createPublicServer(apiHandler *api.APIHandler, web web.Web) (*h
 		s.config.APIServer.Timeout.Max,
 	).Wrap)
 	r.Use(middleware.NewLogging(s.signoz.Instrumentation.Logger(), s.config.APIServer.Logging.ExcludedRoutes).Wrap)
+	r.Use(middleware.NewComment().Wrap)
 
 	apiHandler.RegisterRoutes(r, am)
 	apiHandler.RegisterLogsRoutes(r, am)
@@ -305,19 +254,6 @@ func (s *Server) initListeners() error {
 
 	zap.L().Info(fmt.Sprintf("Query server started listening on %s...", s.httpHostPort))
 
-	// listen on private port to support internal services
-	privateHostPort := s.privateHostPort
-
-	if privateHostPort == "" {
-		return fmt.Errorf("baseconst.PrivateHostPort is required")
-	}
-
-	s.privateConn, err = net.Listen("tcp", privateHostPort)
-	if err != nil {
-		return err
-	}
-	zap.L().Info(fmt.Sprintf("Query server started listening on private port %s...", s.privateHostPort))
-
 	return nil
 }
 
@@ -356,26 +292,6 @@ func (s *Server) Start(ctx context.Context) error {
 		}
 	}()
 
-	var privatePort int
-	if port, err := utils.GetPort(s.privateConn.Addr()); err == nil {
-		privatePort = port
-	}
-
-	go func() {
-		zap.L().Info("Starting Private HTTP server", zap.Int("port", privatePort), zap.String("addr", s.privateHostPort))
-
-		switch err := s.privateHTTP.Serve(s.privateConn); err {
-		case nil, http.ErrServerClosed, cmux.ErrListenerClosed:
-			// normal exit, nothing to do
-			zap.L().Info("private http server closed")
-		default:
-			zap.L().Error("Could not start private HTTP server", zap.Error(err))
-		}
-
-		s.unavailableChannel <- healthcheck.Unavailable
-
-	}()
-
 	go func() {
 		zap.L().Info("Starting OpAmp Websocket server", zap.String("addr", baseconst.OpAmpWsEndpoint))
 		err := s.opampServer.Start(baseconst.OpAmpWsEndpoint)
@@ -395,12 +311,6 @@ func (s *Server) Stop(ctx context.Context) error {
 		}
 	}
 
-	if s.privateHTTP != nil {
-		if err := s.privateHTTP.Shutdown(ctx); err != nil {
-			return err
-		}
-	}
-
 	s.opampServer.Stop()
 
 	if s.ruleManager != nil {
@@ -421,6 +331,8 @@ func makeRulesManager(
 	telemetryStore telemetrystore.TelemetryStore,
 	prometheus prometheus.Prometheus,
 	orgGetter organization.Getter,
+	querier querier.Querier,
+	logger *slog.Logger,
 ) (*baserules.Manager, error) {
 	// create manager opts
 	managerOpts := &baserules.ManagerOptions{
@@ -429,6 +341,8 @@ func makeRulesManager(
 		Context:             context.Background(),
 		Logger:              zap.L(),
 		Reader:              ch,
+		Querier:             querier,
+		SLogger:             logger,
 		Cache:               cache,
 		EvalDelay:           baseconst.GetEvalDelay(),
 		PrepareTaskFunc:     rules.PrepareTaskFunc,

ee/query-service/constants/constants.go

@@ -40,7 +40,7 @@ var IsDotMetricsEnabled = false
 var IsPreferSpanMetrics = false
 
 func init() {
-	if GetOrDefaultEnv(DotMetricsEnabled, "false") == "true" {
+	if GetOrDefaultEnv(DotMetricsEnabled, "true") == "true" {
 		IsDotMetricsEnabled = true
 	}
 

ee/query-service/model/errors.go

@@ -1,7 +1,7 @@
 package model
 
 import (
-	"fmt"
+	"errors"
 
 	basemodel "github.com/SigNoz/signoz/pkg/query-service/model"
 )
@@ -57,7 +57,7 @@ func Unauthorized(err error) *ApiError {
 func BadRequestStr(s string) *ApiError {
 	return &ApiError{
 		Typ: basemodel.ErrorBadData,
-		Err: fmt.Errorf(s),
+		Err: errors.New(s),
 	}
 }
 
@@ -73,7 +73,7 @@ func InternalError(err error) *ApiError {
 func InternalErrorStr(s string) *ApiError {
 	return &ApiError{
 		Typ: basemodel.ErrorInternal,
-		Err: fmt.Errorf(s),
+		Err: errors.New(s),
 	}
 }
 

ee/query-service/rules/anomaly.go

@@ -4,17 +4,17 @@ import (
 	"context"
 	"encoding/json"
 	"fmt"
+	"log/slog"
 	"math"
 	"strings"
 	"sync"
 	"time"
 
-	"go.uber.org/zap"
-
 	"github.com/SigNoz/signoz/ee/query-service/anomaly"
 	"github.com/SigNoz/signoz/pkg/cache"
 	"github.com/SigNoz/signoz/pkg/query-service/common"
 	"github.com/SigNoz/signoz/pkg/query-service/model"
+	"github.com/SigNoz/signoz/pkg/transition"
 	ruletypes "github.com/SigNoz/signoz/pkg/types/ruletypes"
 	"github.com/SigNoz/signoz/pkg/valuer"
 
@@ -30,7 +30,11 @@ import (
 
 	baserules "github.com/SigNoz/signoz/pkg/query-service/rules"
 
-	yaml "gopkg.in/yaml.v2"
+	querierV5 "github.com/SigNoz/signoz/pkg/querier"
+
+	anomalyV2 "github.com/SigNoz/signoz/ee/anomaly"
+
+	qbtypes "github.com/SigNoz/signoz/pkg/types/querybuildertypes/querybuildertypesv5"
 )
 
 const (
@@ -47,7 +51,14 @@ type AnomalyRule struct {
 	// querierV2 is used for alerts created after the introduction of new metrics query builder
 	querierV2 interfaces.Querier
 
-	provider anomaly.Provider
+	// querierV5 is used for alerts migrated after the introduction of new query builder
+	querierV5 querierV5.Querier
+
+	provider   anomaly.Provider
+	providerV2 anomalyV2.Provider
+
+	version string
+	logger  *slog.Logger
 
 	seasonality anomaly.Seasonality
 }
@@ -57,11 +68,15 @@ func NewAnomalyRule(
 	orgID valuer.UUID,
 	p *ruletypes.PostableRule,
 	reader interfaces.Reader,
+	querierV5 querierV5.Querier,
+	logger *slog.Logger,
 	cache cache.Cache,
 	opts ...baserules.RuleOption,
 ) (*AnomalyRule, error) {
 
-	zap.L().Info("creating new AnomalyRule", zap.String("id", id), zap.Any("opts", opts))
+	logger.Info("creating new AnomalyRule", "rule_id", id)
+
+	opts = append(opts, baserules.WithLogger(logger))
 
 	if p.RuleCondition.CompareOp == ruletypes.ValueIsBelow {
 		target := -1 * *p.RuleCondition.Target
@@ -88,7 +103,7 @@ func NewAnomalyRule(
 		t.seasonality = anomaly.SeasonalityDaily
 	}
 
-	zap.L().Info("using seasonality", zap.String("seasonality", t.seasonality.String()))
+	logger.Info("using seasonality", "seasonality", t.seasonality.String())
 
 	querierOptsV2 := querierV2.QuerierOptions{
 		Reader:       reader,
@@ -117,6 +132,27 @@ func NewAnomalyRule(
 			anomaly.WithReader[*anomaly.WeeklyProvider](reader),
 		)
 	}
+
+	if t.seasonality == anomaly.SeasonalityHourly {
+		t.providerV2 = anomalyV2.NewHourlyProvider(
+			anomalyV2.WithQuerier[*anomalyV2.HourlyProvider](querierV5),
+			anomalyV2.WithLogger[*anomalyV2.HourlyProvider](logger),
+		)
+	} else if t.seasonality == anomaly.SeasonalityDaily {
+		t.providerV2 = anomalyV2.NewDailyProvider(
+			anomalyV2.WithQuerier[*anomalyV2.DailyProvider](querierV5),
+			anomalyV2.WithLogger[*anomalyV2.DailyProvider](logger),
+		)
+	} else if t.seasonality == anomaly.SeasonalityWeekly {
+		t.providerV2 = anomalyV2.NewWeeklyProvider(
+			anomalyV2.WithQuerier[*anomalyV2.WeeklyProvider](querierV5),
+			anomalyV2.WithLogger[*anomalyV2.WeeklyProvider](logger),
+		)
+	}
+
+	t.querierV5 = querierV5
+	t.version = p.Version
+	t.logger = logger
 	return &t, nil
 }
 
@@ -124,20 +160,15 @@ func (r *AnomalyRule) Type() ruletypes.RuleType {
 	return RuleTypeAnomaly
 }
 
-func (r *AnomalyRule) prepareQueryRange(ts time.Time) (*v3.QueryRangeParamsV3, error) {
+func (r *AnomalyRule) prepareQueryRange(ctx context.Context, ts time.Time) (*v3.QueryRangeParamsV3, error) {
 
-	zap.L().Info("prepareQueryRange", zap.Int64("ts", ts.UnixMilli()), zap.Int64("evalWindow", r.EvalWindow().Milliseconds()), zap.Int64("evalDelay", r.EvalDelay().Milliseconds()))
+	r.logger.InfoContext(
+		ctx, "prepare query range request v4", "ts", ts.UnixMilli(), "eval_window", r.EvalWindow().Milliseconds(), "eval_delay", r.EvalDelay().Milliseconds(),
+	)
 
-	start := ts.Add(-time.Duration(r.EvalWindow())).UnixMilli()
-	end := ts.UnixMilli()
-
-	if r.EvalDelay() > 0 {
-		start = start - int64(r.EvalDelay().Milliseconds())
-		end = end - int64(r.EvalDelay().Milliseconds())
-	}
-	// round to minute otherwise we could potentially miss data
-	start = start - (start % (60 * 1000))
-	end = end - (end % (60 * 1000))
+	st, en := r.Timestamps(ts)
+	start := st.UnixMilli()
+	end := en.UnixMilli()
 
 	compositeQuery := r.Condition().CompositeQuery
 
@@ -156,13 +187,34 @@ func (r *AnomalyRule) prepareQueryRange(ts time.Time) (*v3.QueryRangeParamsV3, e
 	}, nil
 }
 
+func (r *AnomalyRule) prepareQueryRangeV5(ctx context.Context, ts time.Time) (*qbtypes.QueryRangeRequest, error) {
+
+	r.logger.InfoContext(ctx, "prepare query range request v5", "ts", ts.UnixMilli(), "eval_window", r.EvalWindow().Milliseconds(), "eval_delay", r.EvalDelay().Milliseconds())
+
+	startTs, endTs := r.Timestamps(ts)
+	start, end := startTs.UnixMilli(), endTs.UnixMilli()
+
+	req := &qbtypes.QueryRangeRequest{
+		Start:       uint64(start),
+		End:         uint64(end),
+		RequestType: qbtypes.RequestTypeTimeSeries,
+		CompositeQuery: qbtypes.CompositeQuery{
+			Queries: make([]qbtypes.QueryEnvelope, 0),
+		},
+		NoCache: true,
+	}
+	req.CompositeQuery.Queries = make([]qbtypes.QueryEnvelope, len(r.Condition().CompositeQuery.Queries))
+	copy(req.CompositeQuery.Queries, r.Condition().CompositeQuery.Queries)
+	return req, nil
+}
+
 func (r *AnomalyRule) GetSelectedQuery() string {
 	return r.Condition().GetSelectedQueryName()
 }
 
 func (r *AnomalyRule) buildAndRunQuery(ctx context.Context, orgID valuer.UUID, ts time.Time) (ruletypes.Vector, error) {
 
-	params, err := r.prepareQueryRange(ts)
+	params, err := r.prepareQueryRange(ctx, ts)
 	if err != nil {
 		return nil, err
 	}
@@ -190,13 +242,70 @@ func (r *AnomalyRule) buildAndRunQuery(ctx context.Context, orgID valuer.UUID, t
 	var resultVector ruletypes.Vector
 
 	scoresJSON, _ := json.Marshal(queryResult.AnomalyScores)
-	zap.L().Info("anomaly scores", zap.String("scores", string(scoresJSON)))
+	r.logger.InfoContext(ctx, "anomaly scores", "scores", string(scoresJSON))
 
 	for _, series := range queryResult.AnomalyScores {
-		smpl, shouldAlert := r.ShouldAlert(*series)
-		if shouldAlert {
-			resultVector = append(resultVector, smpl)
+		if r.Condition() != nil && r.Condition().RequireMinPoints {
+			if len(series.Points) < r.Condition().RequiredNumPoints {
+				r.logger.InfoContext(ctx, "not enough data points to evaluate series, skipping", "ruleid", r.ID(), "numPoints", len(series.Points), "requiredPoints", r.Condition().RequiredNumPoints)
+				continue
+			}
 		}
+		results, err := r.Threshold.ShouldAlert(*series)
+		if err != nil {
+			return nil, err
+		}
+		resultVector = append(resultVector, results...)
+	}
+	return resultVector, nil
+}
+
+func (r *AnomalyRule) buildAndRunQueryV5(ctx context.Context, orgID valuer.UUID, ts time.Time) (ruletypes.Vector, error) {
+
+	params, err := r.prepareQueryRangeV5(ctx, ts)
+	if err != nil {
+		return nil, err
+	}
+
+	anomalies, err := r.providerV2.GetAnomalies(ctx, orgID, &anomalyV2.AnomaliesRequest{
+		Params:      *params,
+		Seasonality: anomalyV2.Seasonality{String: valuer.NewString(r.seasonality.String())},
+	})
+	if err != nil {
+		return nil, err
+	}
+
+	var qbResult *qbtypes.TimeSeriesData
+	for _, result := range anomalies.Results {
+		if result.QueryName == r.GetSelectedQuery() {
+			qbResult = result
+			break
+		}
+	}
+
+	if qbResult == nil {
+		r.logger.WarnContext(ctx, "nil qb result", "ts", ts.UnixMilli())
+	}
+
+	queryResult := transition.ConvertV5TimeSeriesDataToV4Result(qbResult)
+
+	var resultVector ruletypes.Vector
+
+	scoresJSON, _ := json.Marshal(queryResult.AnomalyScores)
+	r.logger.InfoContext(ctx, "anomaly scores", "scores", string(scoresJSON))
+
+	for _, series := range queryResult.AnomalyScores {
+		if r.Condition().RequireMinPoints {
+			if len(series.Points) < r.Condition().RequiredNumPoints {
+				r.logger.InfoContext(ctx, "not enough data points to evaluate series, skipping", "ruleid", r.ID(), "numPoints", len(series.Points), "requiredPoints", r.Condition().RequiredNumPoints)
+				continue
+			}
+		}
+		results, err := r.Threshold.ShouldAlert(*series)
+		if err != nil {
+			return nil, err
+		}
+		resultVector = append(resultVector, results...)
 	}
 	return resultVector, nil
 }
@@ -206,8 +315,17 @@ func (r *AnomalyRule) Eval(ctx context.Context, ts time.Time) (interface{}, erro
 	prevState := r.State()
 
 	valueFormatter := formatter.FromUnit(r.Unit())
-	res, err := r.buildAndRunQuery(ctx, r.OrgID(), ts)
 
+	var res ruletypes.Vector
+	var err error
+
+	if r.version == "v5" {
+		r.logger.InfoContext(ctx, "running v5 query")
+		res, err = r.buildAndRunQueryV5(ctx, r.OrgID(), ts)
+	} else {
+		r.logger.InfoContext(ctx, "running v4 query")
+		res, err = r.buildAndRunQuery(ctx, r.OrgID(), ts)
+	}
 	if err != nil {
 		return nil, err
 	}
@@ -226,7 +344,7 @@ func (r *AnomalyRule) Eval(ctx context.Context, ts time.Time) (interface{}, erro
 
 		value := valueFormatter.Format(smpl.V, r.Unit())
 		threshold := valueFormatter.Format(r.TargetVal(), r.Unit())
-		zap.L().Debug("Alert template data for rule", zap.String("name", r.Name()), zap.String("formatter", valueFormatter.Name()), zap.String("value", value), zap.String("threshold", threshold))
+		r.logger.DebugContext(ctx, "Alert template data for rule", "rule_name", r.Name(), "formatter", valueFormatter.Name(), "value", value, "threshold", threshold)
 
 		tmplData := ruletypes.AlertTemplateData(l, value, threshold)
 		// Inject some convenience variables that are easier to remember for users
@@ -247,7 +365,7 @@ func (r *AnomalyRule) Eval(ctx context.Context, ts time.Time) (interface{}, erro
 			result, err := tmpl.Expand()
 			if err != nil {
 				result = fmt.Sprintf("<error expanding template: %s>", err)
-				zap.L().Error("Expanding alert template failed", zap.Error(err), zap.Any("data", tmplData))
+				r.logger.ErrorContext(ctx, "Expanding alert template failed", "error", err, "data", tmplData, "rule_name", r.Name())
 			}
 			return result
 		}
@@ -276,7 +394,7 @@ func (r *AnomalyRule) Eval(ctx context.Context, ts time.Time) (interface{}, erro
 		resultFPs[h] = struct{}{}
 
 		if _, ok := alerts[h]; ok {
-			zap.L().Error("the alert query returns duplicate records", zap.String("ruleid", r.ID()), zap.Any("alert", alerts[h]))
+			r.logger.ErrorContext(ctx, "the alert query returns duplicate records", "rule_id", r.ID(), "alert", alerts[h])
 			err = fmt.Errorf("duplicate alert found, vector contains metrics with the same labelset after applying alert labels")
 			return nil, err
 		}
@@ -294,7 +412,7 @@ func (r *AnomalyRule) Eval(ctx context.Context, ts time.Time) (interface{}, erro
 		}
 	}
 
-	zap.L().Info("number of alerts found", zap.String("name", r.Name()), zap.Int("count", len(alerts)))
+	r.logger.InfoContext(ctx, "number of alerts found", "rule_name", r.Name(), "alerts_count", len(alerts))
 
 	// alerts[h] is ready, add or update active list now
 	for h, a := range alerts {
@@ -317,7 +435,7 @@ func (r *AnomalyRule) Eval(ctx context.Context, ts time.Time) (interface{}, erro
 	for fp, a := range r.Active {
 		labelsJSON, err := json.Marshal(a.QueryResultLables)
 		if err != nil {
-			zap.L().Error("error marshaling labels", zap.Error(err), zap.Any("labels", a.Labels))
+			r.logger.ErrorContext(ctx, "error marshaling labels", "error", err, "labels", a.Labels)
 		}
 		if _, ok := resultFPs[fp]; !ok {
 			// If the alert was previously firing, keep it around for a given
@@ -387,7 +505,7 @@ func (r *AnomalyRule) String() string {
 		PreferredChannels: r.PreferredChannels(),
 	}
 
-	byt, err := yaml.Marshal(ar)
+	byt, err := json.Marshal(ar)
 	if err != nil {
 		return fmt.Sprintf("error marshaling alerting rule: %s", err.Error())
 	}

ee/query-service/rules/manager.go

@@ -3,8 +3,10 @@ package rules
 import (
 	"context"
 	"fmt"
+
 	"time"
 
+	"github.com/SigNoz/signoz/pkg/errors"
 	basemodel "github.com/SigNoz/signoz/pkg/query-service/model"
 	baserules "github.com/SigNoz/signoz/pkg/query-service/rules"
 	"github.com/SigNoz/signoz/pkg/query-service/utils/labels"
@@ -20,6 +22,10 @@ func PrepareTaskFunc(opts baserules.PrepareTaskOptions) (baserules.Task, error)
 	var task baserules.Task
 
 	ruleId := baserules.RuleIdFromTaskName(opts.TaskName)
+	evaluation, err := opts.Rule.Evaluation.GetEvaluation()
+	if err != nil {
+		return nil, errors.NewInvalidInputf(errors.CodeInvalidInput, "evaluation is invalid: %v", err)
+	}
 	if opts.Rule.RuleType == ruletypes.RuleTypeThreshold {
 		// create a threshold rule
 		tr, err := baserules.NewThresholdRule(
@@ -27,6 +33,8 @@ func PrepareTaskFunc(opts baserules.PrepareTaskOptions) (baserules.Task, error)
 			opts.OrgID,
 			opts.Rule,
 			opts.Reader,
+			opts.Querier,
+			opts.SLogger,
 			baserules.WithEvalDelay(opts.ManagerOpts.EvalDelay),
 			baserules.WithSQLStore(opts.SQLStore),
 		)
@@ -38,7 +46,7 @@ func PrepareTaskFunc(opts baserules.PrepareTaskOptions) (baserules.Task, error)
 		rules = append(rules, tr)
 
 		// create ch rule task for evalution
-		task = newTask(baserules.TaskTypeCh, opts.TaskName, time.Duration(opts.Rule.Frequency), rules, opts.ManagerOpts, opts.NotifyFunc, opts.MaintenanceStore, opts.OrgID)
+		task = newTask(baserules.TaskTypeCh, opts.TaskName, time.Duration(evaluation.GetFrequency()), rules, opts.ManagerOpts, opts.NotifyFunc, opts.MaintenanceStore, opts.OrgID)
 
 	} else if opts.Rule.RuleType == ruletypes.RuleTypeProm {
 
@@ -47,7 +55,7 @@ func PrepareTaskFunc(opts baserules.PrepareTaskOptions) (baserules.Task, error)
 			ruleId,
 			opts.OrgID,
 			opts.Rule,
-			opts.Logger,
+			opts.SLogger,
 			opts.Reader,
 			opts.ManagerOpts.Prometheus,
 			baserules.WithSQLStore(opts.SQLStore),
@@ -60,7 +68,7 @@ func PrepareTaskFunc(opts baserules.PrepareTaskOptions) (baserules.Task, error)
 		rules = append(rules, pr)
 
 		// create promql rule task for evalution
-		task = newTask(baserules.TaskTypeProm, opts.TaskName, time.Duration(opts.Rule.Frequency), rules, opts.ManagerOpts, opts.NotifyFunc, opts.MaintenanceStore, opts.OrgID)
+		task = newTask(baserules.TaskTypeProm, opts.TaskName, time.Duration(evaluation.GetFrequency()), rules, opts.ManagerOpts, opts.NotifyFunc, opts.MaintenanceStore, opts.OrgID)
 
 	} else if opts.Rule.RuleType == ruletypes.RuleTypeAnomaly {
 		// create anomaly rule
@@ -69,6 +77,8 @@ func PrepareTaskFunc(opts baserules.PrepareTaskOptions) (baserules.Task, error)
 			opts.OrgID,
 			opts.Rule,
 			opts.Reader,
+			opts.Querier,
+			opts.SLogger,
 			opts.Cache,
 			baserules.WithEvalDelay(opts.ManagerOpts.EvalDelay),
 			baserules.WithSQLStore(opts.SQLStore),
@@ -80,7 +90,7 @@ func PrepareTaskFunc(opts baserules.PrepareTaskOptions) (baserules.Task, error)
 		rules = append(rules, ar)
 
 		// create anomaly rule task for evalution
-		task = newTask(baserules.TaskTypeCh, opts.TaskName, time.Duration(opts.Rule.Frequency), rules, opts.ManagerOpts, opts.NotifyFunc, opts.MaintenanceStore, opts.OrgID)
+		task = newTask(baserules.TaskTypeCh, opts.TaskName, time.Duration(evaluation.GetFrequency()), rules, opts.ManagerOpts, opts.NotifyFunc, opts.MaintenanceStore, opts.OrgID)
 
 	} else {
 		return nil, fmt.Errorf("unsupported rule type %s. Supported types: %s, %s", opts.Rule.RuleType, ruletypes.RuleTypeProm, ruletypes.RuleTypeThreshold)
@@ -126,6 +136,8 @@ func TestNotification(opts baserules.PrepareTestRuleOptions) (int, *basemodel.Ap
 			opts.OrgID,
 			parsedRule,
 			opts.Reader,
+			opts.Querier,
+			opts.SLogger,
 			baserules.WithSendAlways(),
 			baserules.WithSendUnmatched(),
 			baserules.WithSQLStore(opts.SQLStore),
@@ -143,7 +155,7 @@ func TestNotification(opts baserules.PrepareTestRuleOptions) (int, *basemodel.Ap
 			alertname,
 			opts.OrgID,
 			parsedRule,
-			opts.Logger,
+			opts.SLogger,
 			opts.Reader,
 			opts.ManagerOpts.Prometheus,
 			baserules.WithSendAlways(),
@@ -162,6 +174,8 @@ func TestNotification(opts baserules.PrepareTestRuleOptions) (int, *basemodel.Ap
 			opts.OrgID,
 			parsedRule,
 			opts.Reader,
+			opts.Querier,
+			opts.SLogger,
 			opts.Cache,
 			baserules.WithSendAlways(),
 			baserules.WithSendUnmatched(),

frontend/.eslintignore

@@ -1,4 +1,5 @@
 node_modules
 build
 *.typegen.ts
-i18-generate-hash.js
+i18-generate-hash.js
+src/parser/TraceOperatorParser/**

frontend/.eslintrc.js

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

frontend/.prettierignore

@@ -8,3 +8,8 @@ public/
 
 # Ignore all JSON files:
 **/*.json
+
+# Ignore all files in parser folder:
+src/parser/**
+
+src/TraceOperator/parser/**

frontend/jest.config.ts

@@ -16,6 +16,7 @@ const config: Config.InitialOptions = {
 		'ts-jest': {
 			useESM: true,
 			isolatedModules: true,
+			tsconfig: '<rootDir>/tsconfig.jest.json',
 		},
 	},
 	testMatch: ['<rootDir>/src/**/*?(*.)(test).(ts|js)?(x)'],
@@ -25,7 +26,7 @@ const config: Config.InitialOptions = {
 		'^.+\\.(js|jsx)$': 'babel-jest',
 	},
 	transformIgnorePatterns: [
-		'node_modules/(?!(lodash-es|react-dnd|core-dnd|@react-dnd|dnd-core|react-dnd-html5-backend|axios|@signozhq/design-tokens|d3-interpolate|d3-color|api)/)',
+		'node_modules/(?!(lodash-es|react-dnd|core-dnd|@react-dnd|dnd-core|react-dnd-html5-backend|axios|@signozhq/design-tokens|@signozhq/table|@signozhq/calendar|@signozhq/input|@signozhq/popover|@signozhq/button|@signozhq/sonner|@signozhq/*|date-fns|d3-interpolate|d3-color|api|@codemirror|@lezer|@marijn)/)',
 	],
 	setupFilesAfterEnv: ['<rootDir>jest.setup.ts'],
 	testPathIgnorePatterns: ['/node_modules/', '/public/'],

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",
@@ -41,9 +43,22 @@
 		"@radix-ui/react-tooltip": "1.0.7",
 		"@sentry/react": "8.41.0",
 		"@sentry/webpack-plugin": "2.22.6",
+		"@signozhq/badge": "0.0.2",
+		"@signozhq/button": "0.0.2",
+		"@signozhq/calendar": "0.0.0",
+		"@signozhq/callout": "0.0.2",
 		"@signozhq/design-tokens": "1.1.4",
+		"@signozhq/input": "0.0.2",
+		"@signozhq/popover": "0.0.0",
+		"@signozhq/resizable": "0.0.0",
+		"@signozhq/sonner": "0.1.0",
+		"@signozhq/table": "0.3.7",
+		"@signozhq/tooltip": "0.0.2",
 		"@tanstack/react-table": "8.20.6",
 		"@tanstack/react-virtual": "3.11.2",
+		"@uiw/codemirror-theme-copilot": "4.23.11",
+		"@uiw/codemirror-theme-github": "4.24.1",
+		"@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 +68,7 @@
 		"ansi-to-html": "0.7.2",
 		"antd": "5.11.0",
 		"antd-table-saveas-excel": "2.2.1",
+		"antlr4": "4.13.2",
 		"axios": "1.8.2",
 		"babel-eslint": "^10.1.0",
 		"babel-jest": "^29.6.4",
@@ -86,6 +102,7 @@
 		"i18next-http-backend": "^1.3.2",
 		"jest": "^27.5.1",
 		"js-base64": "^3.7.2",
+		"kbar": "0.1.0-beta.48",
 		"less": "^4.1.2",
 		"less-loader": "^10.2.0",
 		"lodash-es": "^4.17.21",
@@ -260,6 +277,7 @@
 		"serialize-javascript": "6.0.2",
 		"prismjs": "1.30.0",
 		"got": "11.8.5",
-		"form-data": "4.0.4"
+		"form-data": "4.0.4",
+		"brace-expansion": "^2.0.2"
 	}
 }

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

@@ -46,5 +46,8 @@
 	"ALERT_HISTORY": "SigNoz | Alert Rule History",
 	"ALERT_OVERVIEW": "SigNoz | Alert Rule Overview",
 	"INFRASTRUCTURE_MONITORING_HOSTS": "SigNoz | Infra Monitoring",
-	"INFRASTRUCTURE_MONITORING_KUBERNETES": "SigNoz | Infra Monitoring"
+	"INFRASTRUCTURE_MONITORING_KUBERNETES": "SigNoz | Infra Monitoring",
+	"METER_EXPLORER": "SigNoz | Meter Explorer",
+	"METER_EXPLORER_VIEWS": "SigNoz | Meter Explorer Views",
+	"METER": "SigNoz | Meter"
 }

frontend/public/locales/en/titles.json

@@ -69,5 +69,8 @@
 	"METRICS_EXPLORER": "SigNoz | Metrics Explorer",
 	"METRICS_EXPLORER_EXPLORER": "SigNoz | Metrics Explorer",
 	"METRICS_EXPLORER_VIEWS": "SigNoz | Metrics Explorer",
-	"API_MONITORING": "SigNoz | External APIs"
+	"API_MONITORING": "SigNoz | External APIs",
+	"METER_EXPLORER": "SigNoz | Meter Explorer",
+	"METER_EXPLORER_VIEWS": "SigNoz | Meter Explorer Views",
+	"METER": "SigNoz | Meter"
 }

frontend/src/AppRoutes/index.tsx

@@ -4,6 +4,7 @@ import getLocalStorageApi from 'api/browser/localstorage/get';
 import setLocalStorageApi from 'api/browser/localstorage/set';
 import logEvent from 'api/common/logEvent';
 import AppLoading from 'components/AppLoading/AppLoading';
+import KBarCommandPalette from 'components/KBarCommandPalette/KBarCommandPalette';
 import NotFound from 'components/NotFound';
 import Spinner from 'components/Spinner';
 import UserpilotRouteTracker from 'components/UserpilotRouteTracker/UserpilotRouteTracker';
@@ -25,6 +26,7 @@ import { useAppContext } from 'providers/App/App';
 import { IUser } from 'providers/App/types';
 import { DashboardProvider } from 'providers/Dashboard/Dashboard';
 import { ErrorModalProvider } from 'providers/ErrorModalProvider';
+import { KBarCommandPaletteProvider } from 'providers/KBarCommandPaletteProvider';
 import { QueryBuilderProvider } from 'providers/QueryBuilder';
 import { Suspense, useCallback, useEffect, useState } from 'react';
 import { Route, Router, Switch } from 'react-router-dom';
@@ -368,39 +370,42 @@ function App(): JSX.Element {
 			<ConfigProvider theme={themeConfig}>
 				<Router history={history}>
 					<CompatRouter>
-						<UserpilotRouteTracker />
-						<NotificationProvider>
-							<ErrorModalProvider>
-								<PrivateRoute>
-									<ResourceProvider>
-										<QueryBuilderProvider>
-											<DashboardProvider>
-												<KeyboardHotkeysProvider>
-													<AlertRuleProvider>
-														<AppLayout>
-															<Suspense fallback={<Spinner size="large" tip="Loading..." />}>
-																<Switch>
-																	{routes.map(({ path, component, exact }) => (
-																		<Route
-																			key={`${path}`}
-																			exact={exact}
-																			path={path}
-																			component={component}
-																		/>
-																	))}
-																	<Route exact path="/" component={Home} />
-																	<Route path="*" component={NotFound} />
-																</Switch>
-															</Suspense>
-														</AppLayout>
-													</AlertRuleProvider>
-												</KeyboardHotkeysProvider>
-											</DashboardProvider>
-										</QueryBuilderProvider>
-									</ResourceProvider>
-								</PrivateRoute>
-							</ErrorModalProvider>
-						</NotificationProvider>
+						<KBarCommandPaletteProvider>
+							<UserpilotRouteTracker />
+							<KBarCommandPalette />
+							<NotificationProvider>
+								<ErrorModalProvider>
+									<PrivateRoute>
+										<ResourceProvider>
+											<QueryBuilderProvider>
+												<DashboardProvider>
+													<KeyboardHotkeysProvider>
+														<AlertRuleProvider>
+															<AppLayout>
+																<Suspense fallback={<Spinner size="large" tip="Loading..." />}>
+																	<Switch>
+																		{routes.map(({ path, component, exact }) => (
+																			<Route
+																				key={`${path}`}
+																				exact={exact}
+																				path={path}
+																				component={component}
+																			/>
+																		))}
+																		<Route exact path="/" component={Home} />
+																		<Route path="*" component={NotFound} />
+																	</Switch>
+																</Suspense>
+															</AppLayout>
+														</AlertRuleProvider>
+													</KeyboardHotkeysProvider>
+												</DashboardProvider>
+											</QueryBuilderProvider>
+										</ResourceProvider>
+									</PrivateRoute>
+								</ErrorModalProvider>
+							</NotificationProvider>
+						</KBarCommandPaletteProvider>
 					</CompatRouter>
 				</Router>
 			</ConfigProvider>

frontend/src/AppRoutes/routes.ts

@@ -1,5 +1,6 @@
 import ROUTES from 'constants/routes';
 import MessagingQueues from 'pages/MessagingQueues';
+import MeterExplorer from 'pages/MeterExplorer';
 import { RouteProps } from 'react-router-dom';
 
 import {
@@ -434,6 +435,28 @@ const routes: AppRoutes[] = [
 		key: 'METRICS_EXPLORER_VIEWS',
 		isPrivate: true,
 	},
+
+	{
+		path: ROUTES.METER,
+		exact: true,
+		component: MeterExplorer,
+		key: 'METER',
+		isPrivate: true,
+	},
+	{
+		path: ROUTES.METER_EXPLORER,
+		exact: true,
+		component: MeterExplorer,
+		key: 'METER_EXPLORER',
+		isPrivate: true,
+	},
+	{
+		path: ROUTES.METER_EXPLORER_VIEWS,
+		exact: true,
+		component: MeterExplorer,
+		key: 'METER_EXPLORER_VIEWS',
+		isPrivate: true,
+	},
 	{
 		path: ROUTES.API_MONITORING,
 		exact: true,

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/dashboard/substitute_vars.ts

@@ -0,0 +1,34 @@
+import { ApiV5Instance } from 'api';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
+import { QueryRangePayloadV5 } from 'api/v5/v5';
+import { AxiosError } from 'axios';
+import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
+import { ICompositeMetricQuery } from 'types/api/alerts/compositeQuery';
+
+interface ISubstituteVars {
+	compositeQuery: ICompositeMetricQuery;
+}
+
+export const getSubstituteVars = async (
+	props?: Partial<QueryRangePayloadV5>,
+	signal?: AbortSignal,
+	headers?: Record<string, string>,
+): Promise<SuccessResponseV2<ISubstituteVars>> => {
+	try {
+		const response = await ApiV5Instance.post<{ data: ISubstituteVars }>(
+			'/substitute_vars',
+			props,
+			{
+				signal,
+				headers,
+			},
+		);
+
+		return {
+			httpStatusCode: response.status,
+			data: response.data.data,
+		};
+	} catch (error) {
+		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
+	}
+};

frontend/src/api/dynamicVariables/__tests__/getFieldKeys.test.ts

@@ -0,0 +1,115 @@
+/* eslint-disable sonarjs/no-duplicate-string */
+import { ApiBaseInstance } from 'api';
+
+import { getFieldKeys } from '../getFieldKeys';
+
+// Mock the API instance
+jest.mock('api', () => ({
+	ApiBaseInstance: {
+		get: jest.fn(),
+	},
+}));
+
+describe('getFieldKeys API', () => {
+	beforeEach(() => {
+		jest.clearAllMocks();
+	});
+
+	const mockSuccessResponse = {
+		status: 200,
+		data: {
+			status: 'success',
+			data: {
+				keys: {
+					'service.name': [],
+					'http.status_code': [],
+				},
+				complete: true,
+			},
+		},
+	};
+
+	it('should call API with correct parameters when no args provided', async () => {
+		// Mock successful API response
+		(ApiBaseInstance.get as jest.Mock).mockResolvedValueOnce(mockSuccessResponse);
+
+		// Call function with no parameters
+		await getFieldKeys();
+
+		// Verify API was called correctly with empty params object
+		expect(ApiBaseInstance.get).toHaveBeenCalledWith('/fields/keys', {
+			params: {},
+		});
+	});
+
+	it('should call API with signal parameter when provided', async () => {
+		// Mock successful API response
+		(ApiBaseInstance.get as jest.Mock).mockResolvedValueOnce(mockSuccessResponse);
+
+		// Call function with signal parameter
+		await getFieldKeys('traces');
+
+		// Verify API was called with signal parameter
+		expect(ApiBaseInstance.get).toHaveBeenCalledWith('/fields/keys', {
+			params: { signal: 'traces' },
+		});
+	});
+
+	it('should call API with name parameter when provided', async () => {
+		// Mock successful API response
+		(ApiBaseInstance.get as jest.Mock).mockResolvedValueOnce({
+			status: 200,
+			data: {
+				status: 'success',
+				data: {
+					keys: { service: [] },
+					complete: false,
+				},
+			},
+		});
+
+		// Call function with name parameter
+		await getFieldKeys(undefined, 'service');
+
+		// Verify API was called with name parameter
+		expect(ApiBaseInstance.get).toHaveBeenCalledWith('/fields/keys', {
+			params: { name: 'service' },
+		});
+	});
+
+	it('should call API with both signal and name when provided', async () => {
+		// Mock successful API response
+		(ApiBaseInstance.get as jest.Mock).mockResolvedValueOnce({
+			status: 200,
+			data: {
+				status: 'success',
+				data: {
+					keys: { service: [] },
+					complete: false,
+				},
+			},
+		});
+
+		// Call function with both parameters
+		await getFieldKeys('logs', 'service');
+
+		// Verify API was called with both parameters
+		expect(ApiBaseInstance.get).toHaveBeenCalledWith('/fields/keys', {
+			params: { signal: 'logs', name: 'service' },
+		});
+	});
+
+	it('should return properly formatted response', async () => {
+		// Mock API to return our response
+		(ApiBaseInstance.get as jest.Mock).mockResolvedValueOnce(mockSuccessResponse);
+
+		// Call the function
+		const result = await getFieldKeys('traces');
+
+		// Verify the returned structure matches SuccessResponseV2 format
+		expect(result).toEqual({
+			httpStatusCode: 200,
+			data: mockSuccessResponse.data.data,
+		});
+	});
+});

frontend/src/api/dynamicVariables/__tests__/getFieldValues.test.ts

@@ -0,0 +1,214 @@
+/* eslint-disable sonarjs/no-duplicate-string */
+import { ApiBaseInstance } from 'api';
+
+import { getFieldValues } from '../getFieldValues';
+
+// Mock the API instance
+jest.mock('api', () => ({
+	ApiBaseInstance: {
+		get: jest.fn(),
+	},
+}));
+
+describe('getFieldValues API', () => {
+	beforeEach(() => {
+		jest.clearAllMocks();
+	});
+
+	it('should call the API with correct parameters (no options)', async () => {
+		// Mock API response
+		(ApiBaseInstance.get as jest.Mock).mockResolvedValueOnce({
+			status: 200,
+			data: {
+				status: 'success',
+				data: {
+					values: {
+						stringValues: ['frontend', 'backend'],
+					},
+					complete: true,
+				},
+			},
+		});
+
+		// Call function without parameters
+		await getFieldValues();
+
+		// Verify API was called correctly with empty params
+		expect(ApiBaseInstance.get).toHaveBeenCalledWith('/fields/values', {
+			params: {},
+		});
+	});
+
+	it('should call the API with signal parameter', async () => {
+		// Mock API response
+		(ApiBaseInstance.get as jest.Mock).mockResolvedValueOnce({
+			status: 200,
+			data: {
+				status: 'success',
+				data: {
+					values: {
+						stringValues: ['frontend', 'backend'],
+					},
+					complete: true,
+				},
+			},
+		});
+
+		// Call function with signal parameter
+		await getFieldValues('traces');
+
+		// Verify API was called with signal parameter
+		expect(ApiBaseInstance.get).toHaveBeenCalledWith('/fields/values', {
+			params: { signal: 'traces' },
+		});
+	});
+
+	it('should call the API with name parameter', async () => {
+		// Mock API response
+		(ApiBaseInstance.get as jest.Mock).mockResolvedValueOnce({
+			status: 200,
+			data: {
+				status: 'success',
+				data: {
+					values: {
+						stringValues: ['frontend', 'backend'],
+					},
+					complete: true,
+				},
+			},
+		});
+
+		// Call function with name parameter
+		await getFieldValues(undefined, 'service.name');
+
+		// Verify API was called with name parameter
+		expect(ApiBaseInstance.get).toHaveBeenCalledWith('/fields/values', {
+			params: { name: 'service.name' },
+		});
+	});
+
+	it('should call the API with value parameter', async () => {
+		// Mock API response
+		(ApiBaseInstance.get as jest.Mock).mockResolvedValueOnce({
+			status: 200,
+			data: {
+				status: 'success',
+				data: {
+					values: {
+						stringValues: ['frontend'],
+					},
+					complete: false,
+				},
+			},
+		});
+
+		// Call function with value parameter
+		await getFieldValues(undefined, 'service.name', 'front');
+
+		// Verify API was called with value parameter
+		expect(ApiBaseInstance.get).toHaveBeenCalledWith('/fields/values', {
+			params: { name: 'service.name', searchText: 'front' },
+		});
+	});
+
+	it('should call the API with time range parameters', async () => {
+		// Mock API response
+		(ApiBaseInstance.get as jest.Mock).mockResolvedValueOnce({
+			status: 200,
+			data: {
+				status: 'success',
+				data: {
+					values: {
+						stringValues: ['frontend', 'backend'],
+					},
+					complete: true,
+				},
+			},
+		});
+
+		// Call function with time range parameters
+		const startUnixMilli = 1625097600000000; // Note: nanoseconds
+		const endUnixMilli = 1625184000000000;
+		await getFieldValues(
+			'logs',
+			'service.name',
+			undefined,
+			startUnixMilli,
+			endUnixMilli,
+		);
+
+		// Verify API was called with time range parameters (converted to milliseconds)
+		expect(ApiBaseInstance.get).toHaveBeenCalledWith('/fields/values', {
+			params: {
+				signal: 'logs',
+				name: 'service.name',
+				startUnixMilli: '1625097600', // Should be converted to seconds (divided by 1000000)
+				endUnixMilli: '1625184000', // Should be converted to seconds (divided by 1000000)
+			},
+		});
+	});
+
+	it('should normalize the response values', async () => {
+		// Mock API response with multiple value types
+		const mockResponse = {
+			status: 200,
+			data: {
+				status: 'success',
+				data: {
+					values: {
+						stringValues: ['frontend', 'backend'],
+						numberValues: [200, 404],
+						boolValues: [true, false],
+					},
+					complete: true,
+				},
+			},
+		};
+
+		(ApiBaseInstance.get as jest.Mock).mockResolvedValueOnce(mockResponse);
+
+		// Call the function
+		const result = await getFieldValues('traces', 'mixed.values');
+
+		// Verify the response has normalized values array
+		expect(result.data?.normalizedValues).toContain('frontend');
+		expect(result.data?.normalizedValues).toContain('backend');
+		expect(result.data?.normalizedValues).toContain('200');
+		expect(result.data?.normalizedValues).toContain('404');
+		expect(result.data?.normalizedValues).toContain('true');
+		expect(result.data?.normalizedValues).toContain('false');
+		expect(result.data?.normalizedValues?.length).toBe(6);
+	});
+
+	it('should return a properly formatted success response', async () => {
+		// Create mock response
+		const mockApiResponse = {
+			status: 200,
+			data: {
+				status: 'success',
+				data: {
+					values: {
+						stringValues: ['frontend', 'backend'],
+					},
+					complete: true,
+				},
+			},
+		};
+
+		// Mock API to return our response
+		(ApiBaseInstance.get as jest.Mock).mockResolvedValueOnce(mockApiResponse);
+
+		// Call the function
+		const result = await getFieldValues('traces', 'service.name');
+
+		// Verify the returned structure matches SuccessResponseV2 format
+		expect(result).toEqual({
+			httpStatusCode: 200,
+			data: expect.objectContaining({
+				values: expect.any(Object),
+				normalizedValues: expect.any(Array),
+				complete: true,
+			}),
+		});
+	});
+});

frontend/src/api/dynamicVariables/getFieldKeys.ts

@@ -0,0 +1,38 @@
+import { ApiBaseInstance } from 'api';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
+import { AxiosError } from 'axios';
+import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
+import { FieldKeyResponse } from 'types/api/dynamicVariables/getFieldKeys';
+
+/**
+ * Get field keys for a given signal type
+ * @param signal Type of signal (traces, logs, metrics)
+ * @param name Optional search text
+ */
+export const getFieldKeys = async (
+	signal?: 'traces' | 'logs' | 'metrics',
+	name?: string,
+): Promise<SuccessResponseV2<FieldKeyResponse>> => {
+	const params: Record<string, string> = {};
+
+	if (signal) {
+		params.signal = encodeURIComponent(signal);
+	}
+
+	if (name) {
+		params.name = encodeURIComponent(name);
+	}
+
+	try {
+		const response = await ApiBaseInstance.get('/fields/keys', { params });
+
+		return {
+			httpStatusCode: response.status,
+			data: response.data.data,
+		};
+	} catch (error) {
+		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
+	}
+};
+
+export default getFieldKeys;

frontend/src/api/dynamicVariables/getFieldValues.ts

@@ -0,0 +1,87 @@
+/* eslint-disable sonarjs/cognitive-complexity */
+import { ApiBaseInstance } from 'api';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
+import { AxiosError } from 'axios';
+import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
+import { FieldValueResponse } from 'types/api/dynamicVariables/getFieldValues';
+
+/**
+ * Get field values for a given signal type and field name
+ * @param signal Type of signal (traces, logs, metrics)
+ * @param name Name of the attribute for which values are being fetched
+ * @param value Optional search text
+ * @param existingQuery Optional existing query - across all present dynamic variables
+ */
+export const getFieldValues = async (
+	signal?: 'traces' | 'logs' | 'metrics',
+	name?: string,
+	searchText?: string,
+	startUnixMilli?: number,
+	endUnixMilli?: number,
+	existingQuery?: string,
+): Promise<SuccessResponseV2<FieldValueResponse>> => {
+	const params: Record<string, string> = {};
+
+	if (signal) {
+		params.signal = encodeURIComponent(signal);
+	}
+
+	if (name) {
+		params.name = encodeURIComponent(name);
+	}
+
+	if (searchText) {
+		params.searchText = encodeURIComponent(searchText);
+	}
+
+	if (startUnixMilli) {
+		params.startUnixMilli = Math.floor(startUnixMilli / 1000000).toString();
+	}
+
+	if (endUnixMilli) {
+		params.endUnixMilli = Math.floor(endUnixMilli / 1000000).toString();
+	}
+
+	if (existingQuery) {
+		params.existingQuery = existingQuery;
+	}
+
+	try {
+		const response = await ApiBaseInstance.get('/fields/values', { params });
+
+		// Normalize values from different types (stringValues, boolValues, etc.)
+		if (response.data?.data?.values) {
+			const allValues: string[] = [];
+			Object.entries(response.data?.data?.values).forEach(
+				([key, valueArray]: [string, any]) => {
+					// Skip RelatedValues as they should be kept separate
+					if (key === 'relatedValues') {
+						return;
+					}
+
+					if (Array.isArray(valueArray)) {
+						allValues.push(...valueArray.map(String));
+					}
+				},
+			);
+
+			// Add a normalized values array to the response
+			response.data.data.normalizedValues = allValues;
+
+			// Add relatedValues to the response as per FieldValueResponse
+			if (response.data?.data?.values?.relatedValues) {
+				response.data.data.relatedValues =
+					response.data?.data?.values?.relatedValues;
+			}
+		}
+
+		return {
+			httpStatusCode: response.status,
+			data: response.data.data,
+		};
+	} catch (error) {
+		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
+	}
+};
+
+export default getFieldValues;

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/metrics/getQueryRange.ts

@@ -2,7 +2,7 @@ import { ApiV3Instance, ApiV4Instance } from 'api';
 import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
 import { AxiosError } from 'axios';
 import { ENTITY_VERSION_V4 } from 'constants/app';
-import { ErrorResponse, SuccessResponse } from 'types/api';
+import { ErrorResponse, SuccessResponse, Warning } from 'types/api';
 import {
 	MetricRangePayloadV3,
 	QueryRangePayload,
@@ -13,7 +13,9 @@ export const getMetricsQueryRange = async (
 	version: string,
 	signal: AbortSignal,
 	headers?: Record<string, string>,
-): Promise<SuccessResponse<MetricRangePayloadV3> | ErrorResponse> => {
+): Promise<
+	(SuccessResponse<MetricRangePayloadV3> & { warning?: Warning }) | ErrorResponse
+> => {
 	try {
 		if (version && version === ENTITY_VERSION_V4) {
 			const response = await ApiV4Instance.post('/query_range', props, {

frontend/src/api/queryBuilder/getAggregateAttribute.ts

@@ -17,6 +17,7 @@ export const getAggregateAttribute = async ({
 	aggregateOperator,
 	searchText,
 	dataSource,
+	source,
 }: IGetAggregateAttributePayload): Promise<
 	SuccessResponse<IQueryAutocompleteResponse> | ErrorResponse
 > => {
@@ -27,7 +28,7 @@ export const getAggregateAttribute = async ({
 			`/autocomplete/aggregate_attributes?${createQueryParams({
 				aggregateOperator,
 				searchText,
-				dataSource,
+				dataSource: source === 'meter' ? 'meter' : dataSource,
 			})}`,
 		);
 

frontend/src/api/querySuggestions/getKeySuggestions.ts

@@ -0,0 +1,30 @@
+import axios from 'api';
+import { AxiosResponse } from 'axios';
+import {
+	QueryKeyRequestProps,
+	QueryKeySuggestionsResponseProps,
+} from 'types/api/querySuggestions/types';
+
+export const getKeySuggestions = (
+	props: QueryKeyRequestProps,
+): Promise<AxiosResponse<QueryKeySuggestionsResponseProps>> => {
+	const {
+		signal = '',
+		searchText = '',
+		metricName = '',
+		fieldContext = '',
+		fieldDataType = '',
+		signalSource = '',
+	} = props;
+
+	const encodedSignal = encodeURIComponent(signal);
+	const encodedSearchText = encodeURIComponent(searchText);
+	const encodedMetricName = encodeURIComponent(metricName);
+	const encodedFieldContext = encodeURIComponent(fieldContext);
+	const encodedFieldDataType = encodeURIComponent(fieldDataType);
+	const encodedSource = encodeURIComponent(signalSource);
+
+	return axios.get(
+		`/fields/keys?signal=${encodedSignal}&searchText=${encodedSearchText}&metricName=${encodedMetricName}&fieldContext=${encodedFieldContext}&fieldDataType=${encodedFieldDataType}&source=${encodedSource}`,
+	);
+};

frontend/src/api/querySuggestions/getValueSuggestion.ts

@@ -0,0 +1,22 @@
+import axios from 'api';
+import { AxiosResponse } from 'axios';
+import {
+	QueryKeyValueRequestProps,
+	QueryKeyValueSuggestionsResponseProps,
+} from 'types/api/querySuggestions/types';
+
+export const getValueSuggestions = (
+	props: QueryKeyValueRequestProps,
+): Promise<AxiosResponse<QueryKeyValueSuggestionsResponseProps>> => {
+	const { signal, key, searchText, signalSource, metricName } = props;
+
+	const encodedSignal = encodeURIComponent(signal);
+	const encodedKey = encodeURIComponent(key);
+	const encodedMetricName = encodeURIComponent(metricName || '');
+	const encodedSearchText = encodeURIComponent(searchText);
+	const encodedSource = encodeURIComponent(signalSource || '');
+
+	return axios.get(
+		`/fields/values?signal=${encodedSignal}&name=${encodedKey}&searchText=${encodedSearchText}&metricName=${encodedMetricName}&source=${encodedSource}`,
+	);
+};

frontend/src/api/saveView/getAllViews.ts

@@ -4,6 +4,6 @@ import { AllViewsProps } from 'types/api/saveViews/types';
 import { DataSource } from 'types/common/queryBuilder';
 
 export const getAllViews = (
-	sourcepage: DataSource,
+	sourcepage: DataSource | 'meter',
 ): Promise<AxiosResponse<AllViewsProps>> =>
 	axios.get(`/explorer/views?sourcePage=${sourcepage}`);

frontend/src/api/settings/getRetentionV2.ts

@@ -0,0 +1,25 @@
+import { ApiV2Instance } from 'api';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
+import { AxiosError } from 'axios';
+import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
+import { PayloadProps } from 'types/api/settings/getRetention';
+
+// Only works for logs
+const getRetentionV2 = async (): Promise<
+	SuccessResponseV2<PayloadProps<'logs'>>
+> => {
+	try {
+		const response = await ApiV2Instance.get<PayloadProps<'logs'>>(
+			`/settings/ttl`,
+		);
+
+		return {
+			httpStatusCode: response.status,
+			data: response.data,
+		};
+	} catch (error) {
+		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
+	}
+};
+
+export default getRetentionV2;

frontend/src/api/settings/setRetention.ts

@@ -1,14 +1,14 @@
 import axios from 'api';
-import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
 import { AxiosError } from 'axios';
-import { ErrorResponse, SuccessResponse } from 'types/api';
-import { PayloadProps, Props } from 'types/api/settings/setRetention';
+import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
+import { PayloadPropsV2, Props } from 'types/api/settings/setRetention';
 
 const setRetention = async (
 	props: Props,
-): Promise<SuccessResponse<PayloadProps> | ErrorResponse> => {
+): Promise<SuccessResponseV2<PayloadPropsV2>> => {
 	try {
-		const response = await axios.post<PayloadProps>(
+		const response = await axios.post<PayloadPropsV2>(
 			`/settings/ttl?duration=${props.totalDuration}&type=${props.type}${
 				props.coldStorage
 					? `&coldStorage=${props.coldStorage}&toColdDuration=${props.toColdDuration}`
@@ -17,13 +17,11 @@ const setRetention = async (
 		);
 
 		return {
-			statusCode: 200,
-			error: null,
-			message: 'Success',
-			payload: response.data,
+			httpStatusCode: response.status,
+			data: response.data,
 		};
 	} catch (error) {
-		return ErrorResponseHandler(error as AxiosError);
+		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
 	}
 };
 

frontend/src/api/settings/setRetentionV2.ts

@@ -0,0 +1,32 @@
+import { ApiV2Instance } from 'api';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
+import { AxiosError } from 'axios';
+import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
+import { PayloadPropsV2, PropsV2 } from 'types/api/settings/setRetention';
+
+const setRetentionV2 = async ({
+	type,
+	defaultTTLDays,
+	coldStorageVolume,
+	coldStorageDuration,
+	ttlConditions,
+}: PropsV2): Promise<SuccessResponseV2<PayloadPropsV2>> => {
+	try {
+		const response = await ApiV2Instance.post<PayloadPropsV2>(`/settings/ttl`, {
+			type,
+			defaultTTLDays,
+			coldStorageVolume,
+			coldStorageDuration,
+			ttlConditions,
+		});
+
+		return {
+			httpStatusCode: response.status,
+			data: response.data,
+		};
+	} catch (error) {
+		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
+	}
+};
+
+export default setRetentionV2;

frontend/src/api/v1/download/downloadExportData.ts

@@ -0,0 +1,64 @@
+import axios from 'api';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
+import { AxiosError } from 'axios';
+import { ErrorV2Resp } from 'types/api';
+import { ExportRawDataProps } from 'types/api/exportRawData/getExportRawData';
+
+export const downloadExportData = async (
+	props: ExportRawDataProps,
+): Promise<void> => {
+	try {
+		const queryParams = new URLSearchParams();
+
+		queryParams.append('start', String(props.start));
+		queryParams.append('end', String(props.end));
+		queryParams.append('filter', props.filter);
+		props.columns.forEach((col) => {
+			queryParams.append('columns', col);
+		});
+		queryParams.append('order_by', props.orderBy);
+		queryParams.append('limit', String(props.limit));
+		queryParams.append('format', props.format);
+
+		const response = await axios.get<Blob>(`export_raw_data?${queryParams}`, {
+			responseType: 'blob', // Important: tell axios to handle response as blob
+			decompress: true, // Enable automatic decompression
+			headers: {
+				Accept: 'application/octet-stream', // Tell server we expect binary data
+			},
+			timeout: 0,
+		});
+
+		// Only proceed if the response status is 200
+		if (response.status !== 200) {
+			throw new Error(
+				`Failed to download data: server returned status ${response.status}`,
+			);
+		}
+		// Create blob URL from response data
+		const blob = new Blob([response.data], { type: 'application/octet-stream' });
+		const url = window.URL.createObjectURL(blob);
+
+		// Create and configure download link
+		const link = document.createElement('a');
+		link.href = url;
+
+		// Get filename from Content-Disposition header or generate timestamped default
+		const filename =
+			response.headers['content-disposition']
+				?.split('filename=')[1]
+				?.replace(/["']/g, '') || `exported_data.${props.format || 'txt'}`;
+
+		link.setAttribute('download', filename);
+
+		// Trigger download
+		document.body.appendChild(link);
+		link.click();
+		link.remove();
+		URL.revokeObjectURL(url);
+	} catch (error) {
+		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
+	}
+};
+
+export default downloadExportData;

frontend/src/api/v1/login/loginPrecheck.ts

@@ -2,7 +2,7 @@ import axios from 'api';
 import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
 import { AxiosError } from 'axios';
 import { ErrorResponse, SuccessResponse } from 'types/api';
-import { PayloadProps, Props } from 'types/api/user/loginPrecheck';
+import { Props, Signup as PayloadProps } from 'types/api/user/loginPrecheck';
 
 const loginPrecheck = async (
 	props: Props,

frontend/src/api/v1/register/signup.ts

@@ -1,25 +1,21 @@
 import axios from 'api';
-import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
 import { AxiosError } from 'axios';
-import { ErrorResponse, SuccessResponse } from 'types/api';
-import { PayloadProps } from 'types/api/user/loginPrecheck';
+import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
+import { PayloadProps, Signup } from 'types/api/user/loginPrecheck';
 import { Props } from 'types/api/user/signup';
 
-const signup = async (
-	props: Props,
-): Promise<SuccessResponse<null | PayloadProps> | ErrorResponse> => {
+const signup = async (props: Props): Promise<SuccessResponseV2<Signup>> => {
 	try {
-		const response = await axios.post(`/register`, {
+		const response = await axios.post<PayloadProps>(`/register`, {
 			...props,
 		});
 		return {
-			statusCode: 200,
-			error: null,
-			message: response.data.status,
-			payload: response.data?.data,
+			httpStatusCode: response.status,
+			data: response.data.data,
 		};
 	} catch (error) {
-		return ErrorResponseHandler(error as AxiosError);
+		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
 	}
 };
 

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.test.ts

@@ -0,0 +1,284 @@
+/* eslint-disable sonarjs/no-duplicate-string */
+import { SuccessResponse } from 'types/api';
+import {
+	MetricRangePayloadV5,
+	QueryBuilderFormula,
+	QueryRangeRequestV5,
+	QueryRangeResponseV5,
+	RequestType,
+	ScalarData,
+	TelemetryFieldKey,
+	TimeSeries,
+	TimeSeriesData,
+	TimeSeriesValue,
+} from 'types/api/v5/queryRange';
+
+import { convertV5ResponseToLegacy } from './convertV5Response';
+
+describe('convertV5ResponseToLegacy', () => {
+	function makeBaseSuccess<T>(
+		payload: T,
+		params: QueryRangeRequestV5,
+	): SuccessResponse<T, QueryRangeRequestV5> {
+		return {
+			statusCode: 200,
+			message: 'success',
+			payload,
+			error: null,
+			params,
+		};
+	}
+
+	function makeBaseParams(
+		requestType: RequestType,
+		queries: QueryRangeRequestV5['compositeQuery']['queries'],
+	): QueryRangeRequestV5 {
+		return {
+			schemaVersion: 'v1',
+			start: 1,
+			end: 2,
+			requestType,
+			compositeQuery: { queries },
+			variables: {},
+			formatOptions: { formatTableResultForUI: false, fillGaps: false },
+		};
+	}
+
+	it('converts time_series response into legacy series structure', () => {
+		const timeSeries: TimeSeriesData = {
+			queryName: 'A',
+			aggregations: [
+				{
+					index: 0,
+					alias: '__result_0',
+					meta: {},
+					series: [
+						({
+							labels: [
+								{
+									key: ({ name: 'service.name' } as unknown) as TelemetryFieldKey,
+									value: 'adservice',
+								},
+							],
+							values: [
+								({ timestamp: 1000, value: 10 } as unknown) as TimeSeriesValue,
+								({ timestamp: 2000, value: 12 } as unknown) as TimeSeriesValue,
+							],
+						} as unknown) as TimeSeries,
+					],
+				},
+			],
+		};
+
+		const v5Data: QueryRangeResponseV5 = {
+			type: 'time_series',
+			data: { results: [timeSeries] },
+			meta: { rowsScanned: 0, bytesScanned: 0, durationMs: 0 },
+		};
+
+		const params = makeBaseParams('time_series', [
+			{
+				type: 'builder_query',
+				spec: {
+					name: 'A',
+					signal: 'traces',
+					stepInterval: 60,
+					disabled: false,
+					aggregations: [{ expression: 'count()' }],
+				},
+			},
+		]);
+
+		const input: SuccessResponse<
+			MetricRangePayloadV5,
+			QueryRangeRequestV5
+		> = makeBaseSuccess({ data: v5Data }, params);
+
+		const legendMap = { A: '{{service.name}}' };
+		const result = convertV5ResponseToLegacy(input, legendMap, false);
+
+		expect(result.payload.data.resultType).toBe('time_series');
+		expect(result.payload.data.result).toHaveLength(1);
+		const q = result.payload.data.result[0];
+		expect(q.queryName).toBe('A');
+		expect(q.legend).toBe('{{service.name}}');
+		expect(q.series?.[0]).toEqual(
+			expect.objectContaining({
+				labels: { 'service.name': 'adservice' },
+				values: [
+					{ timestamp: 1000, value: '10' },
+					{ timestamp: 2000, value: '12' },
+				],
+				metaData: expect.objectContaining({
+					alias: '__result_0',
+					index: 0,
+					queryName: 'A',
+				}),
+			}),
+		);
+	});
+
+	it('converts scalar to legacy table (formatForWeb=false) with names/ids resolved from aggregations', () => {
+		const scalar: ScalarData = {
+			columns: [
+				// group column
+				({
+					name: 'service.name',
+					queryName: 'A',
+					aggregationIndex: 0,
+					columnType: 'group',
+				} as unknown) as ScalarData['columns'][number],
+				// aggregation 0
+				({
+					name: '__result_0',
+					queryName: 'A',
+					aggregationIndex: 0,
+					columnType: 'aggregation',
+				} as unknown) as ScalarData['columns'][number],
+				// aggregation 1
+				({
+					name: '__result_1',
+					queryName: 'A',
+					aggregationIndex: 1,
+					columnType: 'aggregation',
+				} as unknown) as ScalarData['columns'][number],
+				// formula F1
+				({
+					name: '__result',
+					queryName: 'F1',
+					aggregationIndex: 0,
+					columnType: 'aggregation',
+				} as unknown) as ScalarData['columns'][number],
+			],
+			data: [['adservice', 606, 1.452, 151.5]],
+		};
+
+		const v5Data: QueryRangeResponseV5 = {
+			type: 'scalar',
+			data: { results: [scalar] },
+			meta: { rowsScanned: 0, bytesScanned: 0, durationMs: 0 },
+		};
+
+		const params = makeBaseParams('scalar', [
+			{
+				type: 'builder_query',
+				spec: {
+					name: 'A',
+					signal: 'traces',
+					stepInterval: 60,
+					disabled: false,
+					aggregations: [
+						{ expression: 'count()' },
+						{ expression: 'avg(app.ads.count)', alias: 'avg' },
+					],
+				},
+			},
+			{
+				type: 'builder_formula',
+				spec: ({
+					name: 'F1',
+					expression: 'A * 0.25',
+				} as unknown) as QueryBuilderFormula,
+			},
+		]);
+
+		const input: SuccessResponse<
+			MetricRangePayloadV5,
+			QueryRangeRequestV5
+		> = makeBaseSuccess({ data: v5Data }, params);
+		const legendMap = { A: '{{service.name}}', F1: '' };
+		const result = convertV5ResponseToLegacy(input, legendMap, false);
+
+		expect(result.payload.data.resultType).toBe('scalar');
+		const [tableEntry] = result.payload.data.result;
+		expect(tableEntry.table?.columns).toEqual([
+			{
+				name: 'service.name',
+				queryName: 'A',
+				isValueColumn: false,
+				id: 'service.name',
+			},
+			{ name: 'count()', queryName: 'A', isValueColumn: true, id: 'A.count()' },
+			{
+				name: 'avg',
+				queryName: 'A',
+				isValueColumn: true,
+				id: 'A.avg(app.ads.count)',
+			},
+			{ name: 'F1', queryName: 'F1', isValueColumn: true, id: 'F1' },
+		]);
+		expect(tableEntry.table?.rows?.[0]).toEqual({
+			data: {
+				'service.name': 'adservice',
+				'A.count()': 606,
+				'A.avg(app.ads.count)': 1.452,
+				F1: 151.5,
+			},
+		});
+	});
+
+	it('converts scalar with formatForWeb=true to UI-friendly table', () => {
+		const scalar: ScalarData = {
+			columns: [
+				{
+					name: 'service.name',
+					queryName: 'A',
+					aggregationIndex: 0,
+					columnType: 'group',
+				} as any,
+				{
+					name: '__result_0',
+					queryName: 'A',
+					aggregationIndex: 0,
+					columnType: 'aggregation',
+				} as any,
+			],
+			data: [['adservice', 580]],
+		};
+
+		const v5Data: QueryRangeResponseV5 = {
+			type: 'scalar',
+			data: { results: [scalar] },
+			meta: { rowsScanned: 0, bytesScanned: 0, durationMs: 0 },
+		};
+
+		const params = makeBaseParams('scalar', [
+			{
+				type: 'builder_query',
+				spec: {
+					name: 'A',
+					signal: 'traces',
+					stepInterval: 60,
+					disabled: false,
+					aggregations: [{ expression: 'count()' }],
+				},
+			},
+		]);
+
+		const input: SuccessResponse<
+			MetricRangePayloadV5,
+			QueryRangeRequestV5
+		> = makeBaseSuccess({ data: v5Data }, params);
+		const legendMap = { A: '{{service.name}}' };
+		const result = convertV5ResponseToLegacy(input, legendMap, true);
+
+		expect(result.payload.data.resultType).toBe('scalar');
+		const [tableEntry] = result.payload.data.result;
+		expect(tableEntry.table?.columns).toEqual([
+			{
+				name: 'service.name',
+				queryName: 'A',
+				isValueColumn: false,
+				id: 'service.name',
+			},
+			// Single aggregation: name resolves to legend, id resolves to queryName
+			{ name: '{{service.name}}', queryName: 'A', isValueColumn: true, id: 'A' },
+		]);
+		expect(tableEntry.table?.rows?.[0]).toEqual({
+			data: {
+				'service.name': 'adservice',
+				A: 580,
+			},
+		});
+	});
+});

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

@@ -0,0 +1,439 @@
+import { cloneDeep, isEmpty } from 'lodash-es';
+import { SuccessResponse, Warning } from 'types/api';
+import { MetricRangePayloadV3 } from 'types/api/metrics/getQueryRange';
+import {
+	DistributionData,
+	MetricRangePayloadV5,
+	QueryRangeRequestV5,
+	RawData,
+	ScalarData,
+	TimeSeriesData,
+} from 'types/api/v5/queryRange';
+import { QueryDataV3 } from 'types/api/widgets/getQuery';
+
+function getColName(
+	col: ScalarData['columns'][number],
+	legendMap: Record<string, string>,
+	aggregationPerQuery: Record<string, any>,
+): string {
+	if (col.columnType === 'group') {
+		return col.name;
+	}
+
+	const aggregation =
+		aggregationPerQuery?.[col.queryName]?.[col.aggregationIndex];
+	const legend = legendMap[col.queryName];
+	const alias = aggregation?.alias;
+	const expression = aggregation?.expression || '';
+	const aggregationsCount = aggregationPerQuery[col.queryName]?.length || 0;
+	const isSingleAggregation = aggregationsCount === 1;
+
+	if (aggregationsCount > 0) {
+		// Single aggregation: Priority is alias > legend > expression
+		if (isSingleAggregation) {
+			return alias || legend || expression || col.queryName;
+		}
+
+		// Multiple aggregations: Each follows single rules BUT never shows legend
+		// Priority: alias > expression (legend is ignored for multiple aggregations)
+		return alias || expression || col.queryName;
+	}
+
+	return legend || col.queryName;
+}
+
+function getColId(
+	col: ScalarData['columns'][number],
+	aggregationPerQuery: Record<string, any>,
+): string {
+	if (col.columnType === 'group') {
+		return col.name;
+	}
+	const aggregation =
+		aggregationPerQuery?.[col.queryName]?.[col.aggregationIndex];
+	const expression = aggregation?.expression || '';
+	const aggregationsCount = aggregationPerQuery[col.queryName]?.length || 0;
+	const isMultipleAggregations = aggregationsCount > 1;
+
+	if (isMultipleAggregations && expression) {
+		return `${col.queryName}.${expression}`;
+	}
+
+	return col.queryName;
+}
+
+/**
+ * Converts V5 TimeSeriesData to legacy format
+ */
+function convertTimeSeriesData(
+	timeSeriesData: TimeSeriesData,
+	legendMap: Record<string, string>,
+): QueryDataV3 {
+	// Convert V5 time series format to legacy QueryDataV3 format
+
+	// Helper function to process series data
+	const processSeriesData = (
+		aggregations: any[],
+		seriesKey:
+			| 'series'
+			| 'predictedSeries'
+			| 'upperBoundSeries'
+			| 'lowerBoundSeries'
+			| 'anomalyScores',
+	): any[] =>
+		aggregations?.flatMap((aggregation) => {
+			const { index, alias } = aggregation;
+			const seriesData = aggregation[seriesKey];
+
+			if (!seriesData || !seriesData.length) {
+				return [];
+			}
+
+			return seriesData.map((series: any) => ({
+				labels: series.labels
+					? Object.fromEntries(
+							series.labels.map((label: any) => [label.key.name, label.value]),
+					  )
+					: {},
+				labelsArray: series.labels
+					? series.labels.map((label: any) => ({ [label.key.name]: label.value }))
+					: [],
+				values: series.values.map((value: any) => ({
+					timestamp: value.timestamp,
+					value: String(value.value),
+				})),
+				metaData: {
+					alias,
+					index,
+					queryName: timeSeriesData.queryName,
+				},
+			}));
+		});
+
+	return {
+		queryName: timeSeriesData.queryName,
+		legend: legendMap[timeSeriesData.queryName] || timeSeriesData.queryName,
+		series: processSeriesData(timeSeriesData?.aggregations, 'series'),
+		predictedSeries: processSeriesData(
+			timeSeriesData?.aggregations,
+			'predictedSeries',
+		),
+		upperBoundSeries: processSeriesData(
+			timeSeriesData?.aggregations,
+			'upperBoundSeries',
+		),
+		lowerBoundSeries: processSeriesData(
+			timeSeriesData?.aggregations,
+			'lowerBoundSeries',
+		),
+		anomalyScores: processSeriesData(
+			timeSeriesData?.aggregations,
+			'anomalyScores',
+		),
+		list: null,
+	};
+}
+
+/**
+ * Converts V5 ScalarData array to legacy format with table structure
+ */
+function convertScalarDataArrayToTable(
+	scalarDataArray: ScalarData[],
+	legendMap: Record<string, string>,
+	aggregationPerQuery: Record<string, any>,
+): 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 || '';
+
+		if ((scalarData as any)?.aggregations?.length > 0) {
+			return {
+				...convertTimeSeriesData(scalarData as any, legendMap),
+				table: {
+					columns: [],
+					rows: [],
+				},
+				list: null,
+			};
+		}
+
+		// Collect columns for this specific query
+		const columns = scalarData?.columns?.map((col) => ({
+			name: getColName(col, legendMap, aggregationPerQuery),
+			queryName: col.queryName,
+			isValueColumn: col.columnType === 'aggregation',
+			id: getColId(col, aggregationPerQuery),
+		}));
+
+		// Process rows for this specific query
+		const rows = scalarData?.data?.map((dataRow) => {
+			const rowData: Record<string, any> = {};
+
+			scalarData?.columns?.forEach((col, colIndex) => {
+				const columnName = getColName(col, legendMap, aggregationPerQuery);
+				const columnId = getColId(col, aggregationPerQuery);
+				rowData[columnId || columnName] = dataRow[colIndex];
+			});
+
+			return { data: rowData };
+		});
+
+		return {
+			queryName,
+			legend: legendMap[queryName] || '',
+			series: null,
+			list: null,
+			table: {
+				columns,
+				rows,
+			},
+		};
+	});
+}
+
+function convertScalarWithFormatForWeb(
+	scalarDataArray: ScalarData[],
+	legendMap: Record<string, string>,
+	aggregationPerQuery: Record<string, any>,
+): QueryDataV3[] {
+	if (!scalarDataArray || scalarDataArray.length === 0) {
+		return [];
+	}
+
+	return scalarDataArray.map((scalarData) => {
+		const columns =
+			scalarData.columns?.map((col) => {
+				const colName = getColName(col, legendMap, aggregationPerQuery);
+
+				return {
+					name: colName,
+					queryName: col.queryName,
+					isValueColumn: col.columnType === 'aggregation',
+					id: getColId(col, aggregationPerQuery),
+				};
+			}) || [];
+
+		const rows =
+			scalarData.data?.map((dataRow) => {
+				const rowData: Record<string, any> = {};
+				columns?.forEach((col, colIndex) => {
+					rowData[col.id || col.name] = dataRow[colIndex];
+				});
+				return { data: rowData };
+			}) || [];
+
+		const queryName = scalarData.columns?.[0]?.queryName || '';
+
+		return {
+			queryName,
+			legend: legendMap[queryName] || 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>,
+	aggregationPerQuery: Record<string, any>,
+): 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,
+				aggregationPerQuery,
+			);
+			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 'trace': {
+			const traceData = v5Data.data.results as RawData[];
+			return {
+				resultType: 'trace',
+				result: traceData.map((trace) => convertRawData(trace, 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
+ */
+// eslint-disable-next-line sonarjs/cognitive-complexity
+export function convertV5ResponseToLegacy(
+	v5Response: SuccessResponse<MetricRangePayloadV5>,
+	legendMap: Record<string, string>,
+	formatForWeb?: boolean,
+): SuccessResponse<MetricRangePayloadV3> & { warning?: Warning } {
+	const { payload, params } = v5Response;
+	const v5Data = payload?.data;
+
+	const aggregationPerQuery =
+		(params as QueryRangeRequestV5)?.compositeQuery?.queries
+			?.filter((query) => query.type === 'builder_query')
+			.reduce((acc, query) => {
+				if (
+					query.type === 'builder_query' &&
+					'aggregations' in query.spec &&
+					query.spec.name
+				) {
+					acc[query.spec.name] = query.spec.aggregations;
+				}
+				return acc;
+			}, {} as Record<string, any>) || {};
+
+	// If formatForWeb is true, return as-is (like existing logic)
+	if (formatForWeb && v5Data?.type === 'scalar') {
+		const scalarData = v5Data.data.results as ScalarData[];
+		const webTables = convertScalarWithFormatForWeb(
+			scalarData,
+			legendMap,
+			aggregationPerQuery,
+		);
+
+		return {
+			...v5Response,
+			payload: {
+				data: {
+					resultType: 'scalar',
+					result: webTables,
+					warnings: v5Data?.data?.warning || [],
+				},
+				warning: v5Data?.warning || undefined,
+			},
+			warning: v5Data?.warning || undefined,
+		};
+	}
+
+	// Convert based on V5 response type
+	const convertedData = convertV5DataByType(
+		v5Data,
+		legendMap,
+		aggregationPerQuery,
+	);
+
+	// Create legacy-compatible response structure
+	const legacyResponse: SuccessResponse<MetricRangePayloadV3> = {
+		...v5Response,
+		payload: {
+			data: convertedData,
+			warning: v5Response.payload?.data?.warning || undefined,
+		},
+	};
+
+	// 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 = cloneDeep(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,45 @@
+import { ApiV5Instance } from 'api';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
+import { AxiosError } from 'axios';
+import { ENTITY_VERSION_V5 } from 'constants/app';
+import { ErrorV2Resp, SuccessResponseV2 } 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<SuccessResponseV2<MetricRangePayloadV5>> => {
+	try {
+		if (version && version === ENTITY_VERSION_V5) {
+			const response = await ApiV5Instance.post('/query_range', props, {
+				signal,
+				headers,
+			});
+
+			return {
+				httpStatusCode: response.status,
+				data: response.data,
+			};
+		}
+
+		// Default V5 behavior
+		const response = await ApiV5Instance.post('/query_range', props, {
+			signal,
+			headers,
+		});
+
+		return {
+			httpStatusCode: response.status,
+			data: response.data.data,
+		};
+	} catch (error) {
+		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
+	}
+};
+
+export default getQueryRangeV5;

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

@@ -0,0 +1,637 @@
+/* eslint-disable sonarjs/no-duplicate-string, simple-import-sort/imports, @typescript-eslint/indent, no-mixed-spaces-and-tabs */
+import { PANEL_TYPES } from 'constants/queryBuilder';
+import {
+	IBuilderFormula,
+	IBuilderQuery,
+} from 'types/api/queryBuilder/queryBuilderData';
+import { GetQueryResultsProps } from 'lib/dashboard/getQueryResults';
+import {
+	ClickHouseQuery,
+	LogAggregation,
+	LogBuilderQuery,
+	MetricBuilderQuery,
+	PromQuery,
+	QueryBuilderFormula as V5QueryBuilderFormula,
+	QueryEnvelope,
+	QueryRangePayloadV5,
+} from 'types/api/v5/queryRange';
+import { EQueryType } from 'types/common/dashboard';
+import { DataSource } from 'types/common/queryBuilder';
+import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
+
+import { prepareQueryRangePayloadV5 } from './prepareQueryRangePayloadV5';
+
+jest.mock('lib/getStartEndRangeTime', () => ({
+	__esModule: true,
+	default: jest.fn(() => ({ start: '100', end: '200' })),
+}));
+
+describe('prepareQueryRangePayloadV5', () => {
+	const start = 1_710_000_000; // seconds
+	const end = 1_710_000_600; // seconds
+
+	const baseBuilderQuery = (
+		overrides?: Partial<IBuilderQuery>,
+	): IBuilderQuery => ({
+		queryName: 'A',
+		dataSource: DataSource.METRICS,
+		aggregations: [
+			{
+				metricName: 'cpu_usage',
+				temporality: '',
+				timeAggregation: 'sum',
+				spaceAggregation: 'avg',
+				reduceTo: 'avg',
+			},
+		],
+		timeAggregation: 'sum',
+		spaceAggregation: 'avg',
+		temporality: '',
+		functions: [
+			{
+				name: 'timeShift',
+				args: [{ value: '5m' }],
+			},
+		],
+		filter: { expression: '' },
+		filters: { items: [], op: 'AND' },
+		groupBy: [],
+		expression: 'A',
+		disabled: false,
+		having: [],
+		limit: null,
+		stepInterval: 600,
+		orderBy: [],
+		reduceTo: 'avg',
+		legend: 'Legend A',
+		...overrides,
+	});
+
+	const baseFormula = (
+		overrides?: Partial<IBuilderFormula>,
+	): IBuilderFormula => ({
+		expression: 'A + 1',
+		disabled: false,
+		queryName: 'F1',
+		legend: 'Formula Legend',
+		limit: undefined,
+		having: [],
+		stepInterval: undefined,
+		orderBy: [],
+		...overrides,
+	});
+
+	it('builds payload for builder queries with formulas and variables', () => {
+		const props: GetQueryResultsProps = {
+			query: {
+				queryType: EQueryType.QUERY_BUILDER,
+				id: 'q1',
+				unit: undefined,
+				promql: [],
+				clickhouse_sql: [],
+				builder: {
+					queryData: [baseBuilderQuery()],
+					queryFormulas: [baseFormula()],
+					queryTraceOperator: [],
+				},
+			},
+			graphType: PANEL_TYPES.TIME_SERIES,
+			selectedTime: 'GLOBAL_TIME',
+			start,
+			end,
+			variables: { svc: 'api', count: 5, flag: true },
+			fillGaps: true,
+		};
+
+		const result = prepareQueryRangePayloadV5(props);
+
+		expect(result).toEqual(
+			expect.objectContaining({
+				legendMap: { A: 'Legend A', F1: 'Formula Legend' },
+				queryPayload: expect.objectContaining({
+					compositeQuery: expect.objectContaining({
+						queries: expect.arrayContaining([
+							expect.objectContaining({
+								type: 'builder_query',
+								spec: expect.objectContaining({
+									name: 'A',
+									signal: 'metrics',
+									stepInterval: 600,
+									functions: [{ name: 'timeShift', args: [{ value: '5m' }] }],
+									aggregations: [
+										expect.objectContaining({
+											metricName: 'cpu_usage',
+											timeAggregation: 'sum',
+											spaceAggregation: 'avg',
+											reduceTo: undefined,
+										}),
+									],
+								}),
+							}),
+							expect.objectContaining({
+								type: 'builder_formula',
+								spec: expect.objectContaining({
+									name: 'F1',
+									expression: 'A + 1',
+									legend: 'Formula Legend',
+								}),
+							}),
+						]),
+					}),
+					requestType: 'time_series',
+					formatOptions: expect.objectContaining({
+						formatTableResultForUI: false,
+						fillGaps: true,
+					}),
+					start: start * 1000,
+					end: end * 1000,
+					variables: expect.objectContaining({
+						svc: { value: 'api' },
+						count: { value: 5 },
+						flag: { value: true },
+					}),
+				}),
+			}),
+		);
+
+		// Legend map combines builder and formulas
+		expect(result.legendMap).toEqual({ A: 'Legend A', F1: 'Formula Legend' });
+
+		const payload: QueryRangePayloadV5 = result.queryPayload;
+
+		expect(payload.schemaVersion).toBe('v1');
+		expect(payload.start).toBe(start * 1000);
+		expect(payload.end).toBe(end * 1000);
+		expect(payload.requestType).toBe('time_series');
+		expect(payload.formatOptions?.formatTableResultForUI).toBe(false);
+		expect(payload.formatOptions?.fillGaps).toBe(true);
+
+		// Variables mapped as { key: { value } }
+		expect(payload.variables).toEqual({
+			svc: { value: 'api' },
+			count: { value: 5 },
+			flag: { value: true },
+		});
+
+		// Queries include one builder_query and one builder_formula
+		expect(payload.compositeQuery.queries).toHaveLength(2);
+
+		const builderQuery = payload.compositeQuery.queries.find(
+			(q) => q.type === 'builder_query',
+		) as QueryEnvelope;
+		const builderSpec = builderQuery.spec as MetricBuilderQuery;
+		expect(builderSpec.name).toBe('A');
+		expect(builderSpec.signal).toBe('metrics');
+		expect(builderSpec.aggregations?.[0]).toMatchObject({
+			metricName: 'cpu_usage',
+			timeAggregation: 'sum',
+			spaceAggregation: 'avg',
+		});
+		// reduceTo should not be present for non-scalar panels
+		expect(builderSpec.aggregations?.[0].reduceTo).toBeUndefined();
+		// functions should be preserved/normalized
+		expect(builderSpec.functions?.[0]?.name).toBe('timeShift');
+
+		const formulaQuery = payload.compositeQuery.queries.find(
+			(q) => q.type === 'builder_formula',
+		) as QueryEnvelope;
+		const formulaSpec = formulaQuery.spec as V5QueryBuilderFormula;
+		expect(formulaSpec.name).toBe('F1');
+		expect(formulaSpec.expression).toBe('A + 1');
+		expect(formulaSpec.legend).toBe('Formula Legend');
+	});
+
+	it('builds payload for PromQL queries and respects originalGraphType for formatting', () => {
+		const props: GetQueryResultsProps = {
+			query: {
+				queryType: EQueryType.PROM,
+				id: 'q2',
+				unit: undefined,
+				promql: [
+					{
+						name: 'A',
+						query: 'up',
+						disabled: false,
+						legend: 'LP',
+					},
+				],
+				clickhouse_sql: [],
+				builder: { queryData: [], queryFormulas: [], queryTraceOperator: [] },
+			},
+			graphType: PANEL_TYPES.TIME_SERIES,
+			originalGraphType: PANEL_TYPES.TABLE,
+			selectedTime: 'GLOBAL_TIME',
+			start,
+			end,
+		};
+
+		const result = prepareQueryRangePayloadV5(props);
+
+		expect(result).toEqual(
+			expect.objectContaining({
+				legendMap: { A: 'LP' },
+				queryPayload: expect.objectContaining({
+					compositeQuery: expect.objectContaining({
+						queries: [
+							{
+								type: 'promql',
+								spec: expect.objectContaining({
+									name: 'A',
+									query: 'up',
+									legend: 'LP',
+									stats: false,
+								}),
+							},
+						],
+					}),
+					requestType: 'time_series',
+					formatOptions: expect.objectContaining({
+						formatTableResultForUI: true,
+						fillGaps: false,
+					}),
+					start: start * 1000,
+					end: end * 1000,
+					variables: {},
+				}),
+			}),
+		);
+
+		expect(result.legendMap).toEqual({ A: 'LP' });
+
+		const payload: QueryRangePayloadV5 = result.queryPayload;
+		expect(payload.requestType).toBe('time_series');
+		expect(payload.formatOptions?.formatTableResultForUI).toBe(true);
+		expect(payload.compositeQuery.queries).toHaveLength(1);
+
+		const prom = payload.compositeQuery.queries[0];
+		expect(prom.type).toBe('promql');
+		const promSpec = prom.spec as PromQuery;
+		expect(promSpec.name).toBe('A');
+		expect(promSpec.query).toBe('up');
+		expect(promSpec.legend).toBe('LP');
+		expect(promSpec.stats).toBe(false);
+	});
+
+	it('builds payload for ClickHouse queries and maps requestType from panel', () => {
+		const props: GetQueryResultsProps = {
+			query: {
+				queryType: EQueryType.CLICKHOUSE,
+				id: 'q3',
+				unit: undefined,
+				promql: [],
+				clickhouse_sql: [
+					{
+						name: 'Q',
+						query: 'SELECT 1',
+						disabled: false,
+						legend: 'LC',
+					},
+				],
+				builder: { queryData: [], queryFormulas: [], queryTraceOperator: [] },
+			},
+			graphType: PANEL_TYPES.TABLE,
+			selectedTime: 'GLOBAL_TIME',
+			start,
+			end,
+		};
+
+		const result = prepareQueryRangePayloadV5(props);
+
+		expect(result).toEqual(
+			expect.objectContaining({
+				legendMap: { Q: 'LC' },
+				queryPayload: expect.objectContaining({
+					compositeQuery: expect.objectContaining({
+						queries: [
+							{
+								type: 'clickhouse_sql',
+								spec: expect.objectContaining({
+									name: 'Q',
+									query: 'SELECT 1',
+									legend: 'LC',
+								}),
+							},
+						],
+					}),
+					requestType: 'scalar',
+					formatOptions: expect.objectContaining({
+						formatTableResultForUI: true,
+						fillGaps: false,
+					}),
+					start: start * 1000,
+					end: end * 1000,
+					variables: {},
+				}),
+			}),
+		);
+
+		expect(result.legendMap).toEqual({ Q: 'LC' });
+
+		const payload: QueryRangePayloadV5 = result.queryPayload;
+		expect(payload.requestType).toBe('scalar');
+		expect(payload.compositeQuery.queries).toHaveLength(1);
+		const ch = payload.compositeQuery.queries[0];
+		expect(ch.type).toBe('clickhouse_sql');
+		const chSpec = ch.spec as ClickHouseQuery;
+		expect(chSpec.name).toBe('Q');
+		expect(chSpec.query).toBe('SELECT 1');
+		expect(chSpec.legend).toBe('LC');
+	});
+
+	it('uses getStartEndRangeTime when start/end are not provided', () => {
+		const props: GetQueryResultsProps = {
+			query: {
+				queryType: EQueryType.QUERY_BUILDER,
+				id: 'q4',
+				unit: undefined,
+				promql: [],
+				clickhouse_sql: [],
+				builder: { queryData: [], queryFormulas: [], queryTraceOperator: [] },
+			},
+			graphType: PANEL_TYPES.TIME_SERIES,
+			selectedTime: 'GLOBAL_TIME',
+		};
+
+		const result = prepareQueryRangePayloadV5(props);
+
+		expect(result).toEqual(
+			expect.objectContaining({
+				legendMap: {},
+				queryPayload: expect.objectContaining({
+					compositeQuery: { queries: [] },
+					requestType: 'time_series',
+					formatOptions: expect.objectContaining({
+						formatTableResultForUI: false,
+						fillGaps: false,
+					}),
+					start: 100 * 1000,
+					end: 200 * 1000,
+					variables: {},
+				}),
+			}),
+		);
+
+		const payload: QueryRangePayloadV5 = result.queryPayload;
+		expect(payload.start).toBe(100 * 1000);
+		expect(payload.end).toBe(200 * 1000);
+	});
+
+	it('includes reduceTo for metrics in scalar panels (TABLE)', () => {
+		const props: GetQueryResultsProps = {
+			query: {
+				queryType: EQueryType.QUERY_BUILDER,
+				id: 'q5',
+				unit: undefined,
+				promql: [],
+				clickhouse_sql: [],
+				builder: {
+					queryData: [baseBuilderQuery()],
+					queryFormulas: [],
+					queryTraceOperator: [],
+				},
+			},
+			graphType: PANEL_TYPES.TABLE,
+			selectedTime: 'GLOBAL_TIME',
+			start,
+			end,
+		};
+
+		const result = prepareQueryRangePayloadV5(props);
+
+		expect(result).toEqual(
+			expect.objectContaining({
+				legendMap: { A: 'Legend A' },
+				queryPayload: expect.objectContaining({
+					compositeQuery: expect.objectContaining({
+						queries: [
+							{
+								type: 'builder_query',
+								spec: expect.objectContaining({
+									name: 'A',
+									signal: 'metrics',
+									stepInterval: 600,
+									functions: [{ name: 'timeShift', args: [{ value: '5m' }] }],
+									aggregations: [
+										expect.objectContaining({
+											metricName: 'cpu_usage',
+											timeAggregation: 'sum',
+											spaceAggregation: 'avg',
+											reduceTo: 'avg',
+											temporality: undefined,
+										}),
+									],
+								}),
+							},
+						],
+					}),
+					requestType: 'scalar',
+					formatOptions: expect.objectContaining({
+						formatTableResultForUI: true,
+						fillGaps: false,
+					}),
+					start: start * 1000,
+					end: end * 1000,
+					variables: {},
+				}),
+			}),
+		);
+
+		const payload: QueryRangePayloadV5 = result.queryPayload;
+		const builderQuery = payload.compositeQuery.queries.find(
+			(q) => q.type === 'builder_query',
+		) as QueryEnvelope;
+		const builderSpec = builderQuery.spec as MetricBuilderQuery;
+		expect(builderSpec.aggregations?.[0].reduceTo).toBe('avg');
+	});
+
+	it('omits aggregations for raw request type (LIST panel)', () => {
+		const logAgg: LogAggregation[] = [{ expression: 'count()' }];
+		const logsQuery = baseBuilderQuery({
+			dataSource: DataSource.LOGS,
+			aggregations: logAgg,
+		} as Partial<IBuilderQuery>);
+
+		const props: GetQueryResultsProps = {
+			query: {
+				queryType: EQueryType.QUERY_BUILDER,
+				id: 'q6',
+				unit: undefined,
+				promql: [],
+				clickhouse_sql: [],
+				builder: {
+					queryData: [logsQuery],
+					queryFormulas: [],
+					queryTraceOperator: [],
+				},
+			},
+			graphType: PANEL_TYPES.LIST,
+			selectedTime: 'GLOBAL_TIME',
+			start,
+			end,
+		};
+
+		const result = prepareQueryRangePayloadV5(props);
+
+		expect(result).toEqual(
+			expect.objectContaining({
+				legendMap: { A: 'Legend A' },
+				queryPayload: expect.objectContaining({
+					compositeQuery: expect.objectContaining({
+						queries: [
+							{
+								type: 'builder_query',
+								spec: expect.objectContaining({
+									name: 'A',
+									signal: 'logs',
+									stepInterval: 600,
+									functions: [{ name: 'timeShift', args: [{ value: '5m' }] }],
+									aggregations: undefined,
+								}),
+							},
+						],
+					}),
+					requestType: 'raw',
+					formatOptions: expect.objectContaining({
+						formatTableResultForUI: false,
+						fillGaps: false,
+					}),
+					start: start * 1000,
+					end: end * 1000,
+					variables: {},
+				}),
+			}),
+		);
+
+		const payload: QueryRangePayloadV5 = result.queryPayload;
+		expect(payload.requestType).toBe('raw');
+		const builderQuery = payload.compositeQuery.queries.find(
+			(q) => q.type === 'builder_query',
+		) as QueryEnvelope;
+		// For RAW request type, aggregations should be omitted
+		const logSpec = builderQuery.spec as LogBuilderQuery;
+		expect(logSpec.aggregations).toBeUndefined();
+	});
+
+	it('maps groupBy, order, having, aggregations and filter for logs builder query', () => {
+		const getStartEndRangeTime = jest.requireMock('lib/getStartEndRangeTime')
+			.default as jest.Mock;
+		getStartEndRangeTime.mockReturnValueOnce({
+			start: '1754623641',
+			end: '1754645241',
+		});
+
+		const props: GetQueryResultsProps = {
+			query: {
+				queryType: EQueryType.QUERY_BUILDER,
+				id: 'e643e387-1996-4449-97b6-9ef4498a0573',
+				unit: undefined,
+				promql: [{ name: 'A', query: '', legend: '', disabled: false }],
+				clickhouse_sql: [{ name: 'A', legend: '', disabled: false, query: '' }],
+				builder: {
+					queryData: [
+						{
+							dataSource: DataSource.LOGS,
+							queryName: 'A',
+							aggregateOperator: 'count',
+							aggregateAttribute: {
+								key: '',
+								dataType: DataTypes.EMPTY,
+								type: '',
+							},
+							timeAggregation: 'rate',
+							spaceAggregation: 'sum',
+							filter: { expression: "service.name = 'adservice'" },
+							aggregations: [
+								{ expression: 'count() as cnt avg(code.lineno) ' } as LogAggregation,
+							],
+							functions: [],
+							filters: {
+								items: [
+									{
+										id: '14c790ec-54d1-42f0-a889-3b4f0fb79852',
+										op: '=',
+										key: { id: 'service.name', key: 'service.name', type: '' },
+										value: 'adservice',
+									},
+								],
+								op: 'AND',
+							},
+							expression: 'A',
+							disabled: false,
+							stepInterval: 80,
+							having: { expression: 'count() > 0' },
+							limit: 600,
+							orderBy: [{ columnName: 'service.name', order: 'desc' }],
+							groupBy: [
+								{
+									key: 'service.name',
+									type: '',
+								},
+							],
+							legend: '{{service.name}}',
+							reduceTo: 'avg',
+							offset: 0,
+							pageSize: 100,
+						},
+					],
+					queryFormulas: [],
+					queryTraceOperator: [],
+				},
+			},
+			graphType: PANEL_TYPES.TIME_SERIES,
+			selectedTime: 'GLOBAL_TIME',
+			globalSelectedInterval: 'custom' as never,
+			variables: {},
+		};
+
+		const result = prepareQueryRangePayloadV5(props);
+
+		expect(result).toEqual(
+			expect.objectContaining({
+				legendMap: { A: '{{service.name}}' },
+				queryPayload: expect.objectContaining({
+					schemaVersion: 'v1',
+					start: 1754623641000,
+					end: 1754645241000,
+					requestType: 'time_series',
+					compositeQuery: expect.objectContaining({
+						queries: [
+							{
+								type: 'builder_query',
+								spec: expect.objectContaining({
+									name: 'A',
+									signal: 'logs',
+									stepInterval: 80,
+									disabled: false,
+									filter: { expression: "service.name = 'adservice'" },
+									groupBy: [
+										{
+											name: 'service.name',
+											fieldDataType: '',
+											fieldContext: '',
+										},
+									],
+									limit: 600,
+									order: [
+										{
+											key: { name: 'service.name' },
+											direction: 'desc',
+										},
+									],
+									legend: '{{service.name}}',
+									having: { expression: 'count() > 0' },
+									aggregations: [
+										{ expression: 'count()', alias: 'cnt' },
+										{ expression: 'avg(code.lineno)' },
+									],
+								}),
+							},
+						],
+					}),
+					formatOptions: { formatTableResultForUI: false, fillGaps: false },
+					variables: {},
+				}),
+			}),
+		);
+	});
+});

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

@@ -0,0 +1,640 @@
+/* eslint-disable sonarjs/cognitive-complexity */
+/* eslint-disable sonarjs/no-identical-functions */
+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 { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
+import {
+	IBuilderQuery,
+	IBuilderTraceOperator,
+} from 'types/api/queryBuilder/queryBuilderData';
+import {
+	BaseBuilderQuery,
+	FieldContext,
+	FieldDataType,
+	FunctionName,
+	GroupByKey,
+	Having,
+	LogAggregation,
+	MetricAggregation,
+	OrderBy,
+	QueryEnvelope,
+	QueryFunction,
+	QueryRangePayloadV5,
+	QueryType,
+	RequestType,
+	TelemetryFieldKey,
+	TraceAggregation,
+	VariableItem,
+	VariableType,
+} from 'types/api/v5/queryRange';
+import { EQueryType } from 'types/common/dashboard';
+import { DataSource } from 'types/common/queryBuilder';
+import { normalizeFunctionName } from 'utils/functionNameNormalizer';
+
+type PrepareQueryRangePayloadV5Result = {
+	queryPayload: QueryRangePayloadV5;
+	legendMap: Record<string, string>;
+};
+
+/**
+ * Maps panel types to V5 request types
+ */
+export 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:
+			return 'scalar';
+		case PANEL_TYPES.TRACE:
+			return 'trace';
+		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';
+}
+
+function isDeprecatedField(fieldName: string): boolean {
+	const deprecatedIntrinsicFields = [
+		'traceID',
+		'spanID',
+		'parentSpanID',
+		'spanKind',
+		'durationNano',
+		'statusCode',
+		'statusMessage',
+		'statusCodeString',
+	];
+
+	const deprecatedCalculatedFields = [
+		'responseStatusCode',
+		'externalHttpUrl',
+		'httpUrl',
+		'externalHttpMethod',
+		'httpMethod',
+		'httpHost',
+		'dbName',
+		'dbOperation',
+		'hasError',
+		'isRemote',
+		'serviceName',
+		'httpRoute',
+		'msgSystem',
+		'msgOperation',
+		'dbSystem',
+		'rpcSystem',
+		'rpcService',
+		'rpcMethod',
+		'peerService',
+	];
+
+	return (
+		deprecatedIntrinsicFields.includes(fieldName) ||
+		deprecatedCalculatedFields.includes(fieldName)
+	);
+}
+
+function createBaseSpec(
+	queryData: IBuilderQuery,
+	requestType: RequestType,
+	panelType?: PANEL_TYPES,
+): BaseBuilderQuery {
+	const nonEmptySelectColumns = (queryData.selectColumns as (
+		| BaseAutocompleteData
+		| TelemetryFieldKey
+	)[])?.filter((c) => ('key' in c ? c?.key : c?.name));
+
+	return {
+		stepInterval: queryData?.stepInterval || null,
+		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' || requestType === 'trace'
+				? 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.having) ? undefined : (queryData?.having as Having),
+		functions: isEmpty(queryData.functions)
+			? undefined
+			: queryData.functions.map(
+					(func: QueryFunction): QueryFunction => {
+						// Normalize function name to handle case sensitivity
+						const normalizedName = normalizeFunctionName(func?.name);
+						return {
+							name: normalizedName as FunctionName,
+							args: isEmpty(func.namedArgs)
+								? func.args?.map((arg) => ({
+										value: arg?.value,
+								  }))
+								: Object.entries(func?.namedArgs || {}).map(([name, value]) => ({
+										name,
+										value,
+								  })),
+						};
+					},
+			  ),
+		selectFields: isEmpty(nonEmptySelectColumns)
+			? undefined
+			: nonEmptySelectColumns?.map(
+					(column: any): TelemetryFieldKey => {
+						const fieldName = column.name ?? column.key;
+						const isDeprecated = isDeprecatedField(fieldName);
+
+						const fieldObj: TelemetryFieldKey = {
+							name: fieldName,
+							fieldDataType:
+								column?.fieldDataType ?? (column?.dataType as FieldDataType),
+							signal: column?.signal ?? undefined,
+						};
+
+						// Only add fieldContext if the field is NOT deprecated
+						if (!isDeprecated && fieldName !== 'name') {
+							fieldObj.fieldContext =
+								column?.fieldContext ?? (column?.type as FieldContext);
+						}
+
+						return fieldObj;
+					},
+			  ),
+	};
+}
+
+// Utility to parse aggregation expressions with optional alias
+export function parseAggregations(
+	expression: string,
+	availableAlias?: string,
+): { expression: string; alias?: string }[] {
+	const result: { expression: string; alias?: string }[] = [];
+	// Matches function calls like "count()" or "sum(field)" with optional alias like "as 'alias'"
+	// Handles quoted ('alias'), dash-separated (field-name), and unquoted values after "as" keyword
+	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];
+		let alias = match[2] || availableAlias; // Use provided alias or availableAlias if not matched
+		if (alias) {
+			// Remove quotes if present
+			alias = alias.replace(/^['"]|['"]$/g, '');
+			result.push({ expression: expr, alias });
+		} else {
+			result.push({ expression: expr });
+		}
+		match = regex.exec(expression);
+	}
+	return result;
+}
+
+export function createAggregation(
+	queryData: any,
+	panelType?: PANEL_TYPES,
+): TraceAggregation[] | LogAggregation[] | MetricAggregation[] {
+	if (!queryData) {
+		return [];
+	}
+
+	const haveReduceTo =
+		queryData.dataSource === DataSource.METRICS &&
+		panelType &&
+		(panelType === PANEL_TYPES.TABLE ||
+			panelType === PANEL_TYPES.PIE ||
+			panelType === PANEL_TYPES.VALUE);
+
+	if (queryData.dataSource === DataSource.METRICS) {
+		return [
+			{
+				metricName:
+					queryData?.aggregations?.[0]?.metricName ||
+					queryData?.aggregateAttribute?.key,
+				temporality:
+					queryData?.aggregations?.[0]?.temporality ||
+					queryData?.aggregateAttribute?.temporality,
+				timeAggregation:
+					queryData?.aggregations?.[0]?.timeAggregation ||
+					queryData?.timeAggregation,
+				spaceAggregation:
+					queryData?.aggregations?.[0]?.spaceAggregation ||
+					queryData?.spaceAggregation,
+				reduceTo: haveReduceTo
+					? queryData?.aggregations?.[0]?.reduceTo || queryData?.reduceTo
+					: undefined,
+			},
+		];
+	}
+
+	if (queryData.aggregations?.length > 0) {
+		return queryData.aggregations.flatMap(
+			(agg: { expression: string; alias?: string }) => {
+				const parsedAggregations = parseAggregations(agg.expression, agg?.alias);
+				return isEmpty(parsedAggregations)
+					? [{ expression: 'count()' }]
+					: parsedAggregations;
+			},
+		);
+	}
+
+	return [{ expression: 'count()' }];
+}
+
+/**
+ * Converts query builder data to V5 builder queries
+ */
+export 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'];
+
+			// Skip aggregation for raw request type
+			const aggregations =
+				requestType === 'raw' ? undefined : createAggregation(queryData, panelType);
+
+			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,
+						source: queryData.source || '',
+						...baseSpec,
+						aggregations: aggregations as MetricAggregation[],
+						// reduceTo: queryData.reduceTo,
+					};
+					break;
+			}
+
+			return {
+				type: 'builder_query' as QueryType,
+				spec,
+			};
+		},
+	);
+}
+
+function createTraceOperatorBaseSpec(
+	queryData: IBuilderTraceOperator,
+	requestType: RequestType,
+	panelType?: PANEL_TYPES,
+): BaseBuilderQuery {
+	const nonEmptySelectColumns = (queryData.selectColumns as (
+		| BaseAutocompleteData
+		| TelemetryFieldKey
+	)[])?.filter((c) => ('key' in c ? c?.key : c?.name));
+
+	const {
+		stepInterval,
+		groupBy,
+		limit,
+		offset,
+		legend,
+		having,
+		orderBy,
+		pageSize,
+	} = queryData;
+
+	return {
+		stepInterval: stepInterval || undefined,
+		groupBy:
+			groupBy?.length > 0
+				? 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
+				? limit || pageSize || undefined
+				: limit || undefined,
+		offset: requestType === 'raw' || requestType === 'trace' ? offset : undefined,
+		order:
+			orderBy?.length > 0
+				? orderBy.map(
+						(order: any): OrderBy => ({
+							key: {
+								name: order.columnName,
+							},
+							direction: order.order,
+						}),
+				  )
+				: undefined,
+		legend: isEmpty(legend) ? undefined : legend,
+		having: isEmpty(having) ? undefined : (having as Having),
+		selectFields: isEmpty(nonEmptySelectColumns)
+			? undefined
+			: nonEmptySelectColumns?.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,
+					}),
+			  ),
+	};
+}
+
+export function convertTraceOperatorToV5(
+	traceOperator: Record<string, IBuilderTraceOperator>,
+	requestType: RequestType,
+	panelType?: PANEL_TYPES,
+): QueryEnvelope[] {
+	return Object.entries(traceOperator).map(
+		([queryName, traceOperatorData]): QueryEnvelope => {
+			const baseSpec = createTraceOperatorBaseSpec(
+				traceOperatorData,
+				requestType,
+				panelType,
+			);
+
+			// Skip aggregation for raw request type
+			const aggregations =
+				requestType === 'raw'
+					? undefined
+					: createAggregation(traceOperatorData, panelType);
+
+			const spec: QueryEnvelope['spec'] = {
+				name: queryName,
+				...baseSpec,
+				expression: traceOperatorData.expression || '',
+				aggregations: aggregations as TraceAggregation[],
+			};
+
+			return {
+				type: 'builder_trace_operator' as QueryType,
+				spec,
+			};
+		},
+	);
+}
+
+/**
+ * Converts PromQL queries to V5 format
+ */
+export 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,
+				legend: isEmpty(queryData.legend) ? undefined : queryData.legend,
+				stats: false, // PromQL specific field
+			},
+		}),
+	);
+}
+
+/**
+ * Converts ClickHouse queries to V5 format
+ */
+export 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,
+				legend: isEmpty(queryData.legend) ? undefined : queryData.legend,
+				// ClickHouse doesn't have step or stats like PromQL
+			},
+		}),
+	);
+}
+
+/**
+ * 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,
+	originalGraphType,
+	fillGaps,
+	dynamicVariables,
+}: 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, queryTraceOperator } = query.builder;
+			const currentQueryData = mapQueryDataToApi(data, 'queryName', tableParams);
+			const currentFormulas = mapQueryDataToApi(queryFormulas, 'queryName');
+
+			const filteredTraceOperator =
+				queryTraceOperator && queryTraceOperator.length > 0
+					? queryTraceOperator.filter((traceOperator) =>
+							Boolean(traceOperator.expression.trim()),
+					  )
+					: [];
+
+			const currentTraceOperator = mapQueryDataToApi(
+				filteredTraceOperator,
+				'queryName',
+				tableParams,
+			);
+
+			// Combine legend maps
+			legendMap = {
+				...currentQueryData.newLegendMap,
+				...currentFormulas.newLegendMap,
+				...currentTraceOperator.newLegendMap,
+			};
+
+			// Convert builder queries
+			const builderQueries = convertBuilderQueriesToV5(
+				currentQueryData.data,
+				requestType,
+				graphType,
+			);
+
+			// Convert formulas as separate query type
+			const formulaQueries = Object.entries(currentFormulas.data).map(
+				([queryName, formulaData]): QueryEnvelope => ({
+					type: 'builder_formula' as const,
+					spec: {
+						name: queryName,
+						expression: formulaData.expression || '',
+						disabled: formulaData.disabled,
+						limit: formulaData.limit ?? undefined,
+						legend: isEmpty(formulaData.legend) ? undefined : formulaData.legend,
+						order: formulaData.orderBy?.map(
+							// eslint-disable-next-line sonarjs/no-identical-functions
+							(order: any): OrderBy => ({
+								key: {
+									name: order.columnName,
+								},
+								direction: order.order,
+							}),
+						),
+					},
+				}),
+			);
+
+			const traceOperatorQueries = convertTraceOperatorToV5(
+				currentTraceOperator.data,
+				requestType,
+				graphType,
+			);
+
+			// Combine all query types
+			queries = [...builderQueries, ...formulaQueries, ...traceOperatorQueries];
+			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 ||
+				(originalGraphType
+					? originalGraphType === PANEL_TYPES.TABLE
+					: graphType === PANEL_TYPES.TABLE),
+			fillGaps: fillGaps || false,
+		},
+		variables: Object.entries(variables).reduce((acc, [key, value]) => {
+			acc[key] = {
+				value,
+				type: dynamicVariables
+					?.find((v) => v.name === key)
+					?.type?.toLowerCase() as VariableType,
+			};
+			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/AppLoading/__tests__/AppLoading.test.tsx

@@ -1,14 +1,16 @@
 import { render, screen } from '@testing-library/react';
 
+import getLocal from '../../../api/browser/localstorage/get';
 import AppLoading from '../AppLoading';
 
-// Mock the localStorage API
-const mockGet = jest.fn();
-jest.mock('api/browser/localstorage/get', () => ({
+jest.mock('../../../api/browser/localstorage/get', () => ({
 	__esModule: true,
-	default: mockGet,
+	default: jest.fn(),
 }));
 
+// Access the mocked function
+const mockGet = (getLocal as unknown) as jest.Mock;
+
 describe('AppLoading', () => {
 	const SIGNOZ_TEXT = 'SigNoz';
 	const TAGLINE_TEXT =

frontend/src/components/CeleryTask/CeleryTaskGraph/CeleryTaskGraph.style.scss

@@ -20,13 +20,15 @@
 		.ant-card-body {
 			height: calc(100% - 18px);
 
-			.widget-graph-container {
-				&.bar {
-					height: calc(100% - 110px);
-				}
+			.widget-graph-component-container {
+				.widget-graph-container {
+					&.bar-panel-container {
+						height: calc(100% - 110px);
+					}
 
-				&.graph {
-					height: calc(100% - 80px);
+					&.graph-panel-container {
+						height: calc(100% - 80px);
+					}
 				}
 			}
 		}
@@ -82,9 +84,11 @@
 		.ant-card-body {
 			height: calc(100% - 18px);
 
-			.widget-graph-container {
-				&.bar {
-					height: calc(100% - 110px);
+			.widget-graph-component-container {
+				.widget-graph-container {
+					&.bar-panel-container {
+						height: calc(100% - 110px);
+					}
 				}
 			}
 		}

frontend/src/components/CeleryTask/CeleryTaskGraph/CeleryTaskGraphUtils.ts

@@ -32,8 +32,6 @@ export const celeryAllStateWidgetData = (
 					aggregateAttribute: {
 						dataType: DataTypes.String,
 						id: '------false',
-						isColumn: false,
-						isJSON: false,
 						key: '',
 						type: '',
 					},
@@ -50,8 +48,6 @@ export const celeryAllStateWidgetData = (
 						{
 							dataType: DataTypes.String,
 							id: 'celery.state--string--tag--false',
-							isColumn: false,
-							isJSON: false,
 							key: 'celery.state',
 							type: 'tag',
 						},
@@ -88,7 +84,6 @@ export const celeryRetryStateWidgetData = (
 					aggregateAttribute: {
 						dataType: DataTypes.String,
 						id: '------false',
-						isColumn: false,
 						key: '',
 						type: '',
 					},
@@ -103,8 +98,6 @@ export const celeryRetryStateWidgetData = (
 								key: {
 									dataType: DataTypes.String,
 									id: 'celery.state--string--tag--false',
-									isColumn: false,
-									isJSON: false,
 									key: 'celery.state',
 									type: 'tag',
 								},
@@ -119,8 +112,6 @@ export const celeryRetryStateWidgetData = (
 						{
 							dataType: DataTypes.String,
 							id: 'celery.hostname--string--tag--false',
-							isColumn: false,
-							isJSON: false,
 							key: 'celery.hostname',
 							type: 'tag',
 						},
@@ -153,8 +144,6 @@ export const celeryFailedStateWidgetData = (
 					aggregateAttribute: {
 						dataType: DataTypes.String,
 						id: '------false',
-						isColumn: false,
-						isJSON: false,
 						key: '',
 						type: '',
 					},
@@ -169,8 +158,6 @@ export const celeryFailedStateWidgetData = (
 								key: {
 									dataType: DataTypes.String,
 									id: 'celery.state--string--tag--false',
-									isColumn: false,
-									isJSON: false,
 									key: 'celery.state',
 									type: 'tag',
 								},
@@ -185,8 +172,6 @@ export const celeryFailedStateWidgetData = (
 						{
 							dataType: DataTypes.String,
 							id: 'celery.hostname--string--tag--false',
-							isColumn: false,
-							isJSON: false,
 							key: 'celery.hostname',
 							type: 'tag',
 						},
@@ -219,8 +204,6 @@ export const celerySuccessStateWidgetData = (
 					aggregateAttribute: {
 						dataType: DataTypes.String,
 						id: '------false',
-						isColumn: false,
-						isJSON: false,
 						key: '',
 						type: '',
 					},
@@ -235,8 +218,6 @@ export const celerySuccessStateWidgetData = (
 								key: {
 									dataType: DataTypes.String,
 									id: 'celery.state--string--tag--false',
-									isColumn: false,
-									isJSON: false,
 									key: 'celery.state',
 									type: 'tag',
 								},
@@ -251,8 +232,6 @@ export const celerySuccessStateWidgetData = (
 						{
 							dataType: DataTypes.String,
 							id: 'celery.hostname--string--tag--false',
-							isColumn: false,
-							isJSON: false,
 							key: 'celery.hostname',
 							type: 'tag',
 						},
@@ -284,7 +263,6 @@ export const celeryTasksByWorkerWidgetData = (
 					aggregateAttribute: {
 						dataType: DataTypes.String,
 						id: '------false',
-						isColumn: false,
 						key: '',
 						type: '',
 					},
@@ -301,8 +279,6 @@ export const celeryTasksByWorkerWidgetData = (
 						{
 							dataType: DataTypes.String,
 							id: 'celery.hostname--string--tag--false',
-							isColumn: false,
-							isJSON: false,
 							key: 'celery.hostname',
 							type: 'tag',
 						},
@@ -338,8 +314,6 @@ export const celeryErrorByWorkerWidgetData = (
 					aggregateAttribute: {
 						dataType: 'string',
 						id: 'span_id--string----true',
-						isColumn: true,
-						isJSON: false,
 						key: 'span_id',
 						type: '',
 					},
@@ -353,8 +327,6 @@ export const celeryErrorByWorkerWidgetData = (
 								key: {
 									dataType: DataTypes.bool,
 									id: 'has_error--bool----true',
-									isColumn: true,
-									isJSON: false,
 									key: 'has_error',
 									type: '',
 								},
@@ -373,8 +345,6 @@ export const celeryErrorByWorkerWidgetData = (
 					groupBy: [
 						{
 							dataType: DataTypes.String,
-							isColumn: false,
-							isJSON: false,
 							key: 'celery.hostname',
 							type: 'tag',
 							id: 'celery.hostname--string--tag--false',
@@ -390,8 +360,6 @@ export const celeryErrorByWorkerWidgetData = (
 					aggregateAttribute: {
 						dataType: 'string',
 						id: 'span_id--string----true',
-						isColumn: true,
-						isJSON: false,
 						key: 'span_id',
 						type: '',
 					},
@@ -411,8 +379,6 @@ export const celeryErrorByWorkerWidgetData = (
 					groupBy: [
 						{
 							dataType: DataTypes.String,
-							isColumn: false,
-							isJSON: false,
 							key: 'celery.hostname',
 							type: 'tag',
 							id: 'celery.hostname--string--tag--false',
@@ -445,8 +411,6 @@ export const celeryLatencyByWorkerWidgetData = (
 					aggregateAttribute: {
 						dataType: DataTypes.Float64,
 						id: 'duration_nano--float64----true',
-						isColumn: true,
-						isJSON: false,
 						key: 'duration_nano',
 						type: '',
 					},
@@ -463,8 +427,6 @@ export const celeryLatencyByWorkerWidgetData = (
 						{
 							dataType: DataTypes.String,
 							id: 'celery.hostname--string--tag--false',
-							isColumn: false,
-							isJSON: false,
 							key: 'celery.hostname',
 							type: 'tag',
 						},
@@ -498,8 +460,6 @@ export const celeryActiveTasksWidgetData = (
 						dataType: DataTypes.Float64,
 						id:
 							'flower_worker_number_of_currently_executing_tasks--float64--Gauge--true',
-						isColumn: true,
-						isJSON: false,
 						key: 'flower_worker_number_of_currently_executing_tasks',
 						type: 'Gauge',
 					},
@@ -516,8 +476,6 @@ export const celeryActiveTasksWidgetData = (
 						{
 							dataType: DataTypes.String,
 							id: 'worker--string--tag--false',
-							isColumn: false,
-							isJSON: false,
 							key: 'worker',
 							type: 'tag',
 						},
@@ -551,8 +509,6 @@ export const celeryTaskLatencyWidgetData = (
 					aggregateAttribute: {
 						dataType: DataTypes.Float64,
 						id: 'duration_nano--float64----true',
-						isColumn: true,
-						isJSON: false,
 						key: 'duration_nano',
 						type: '',
 					},
@@ -569,8 +525,6 @@ export const celeryTaskLatencyWidgetData = (
 						{
 							dataType: DataTypes.String,
 							id: 'celery.task_name--string--tag--false',
-							isColumn: false,
-							isJSON: false,
 							key: 'celery.task_name',
 							type: 'tag',
 						},
@@ -606,8 +560,6 @@ export const celerySlowestTasksTableWidgetData = getWidgetQueryBuilder(
 				aggregateAttribute: {
 					dataType: DataTypes.Float64,
 					id: 'duration_nano--float64----true',
-					isColumn: true,
-					isJSON: false,
 					key: 'duration_nano',
 					type: '',
 				},
@@ -624,8 +576,6 @@ export const celerySlowestTasksTableWidgetData = getWidgetQueryBuilder(
 					{
 						dataType: DataTypes.String,
 						id: 'celery.task_name--string--tag--false',
-						isColumn: false,
-						isJSON: false,
 						key: 'celery.task_name',
 						type: 'tag',
 					},
@@ -660,8 +610,6 @@ export const celeryRetryTasksTableWidgetData = getWidgetQueryBuilder(
 				aggregateAttribute: {
 					dataType: DataTypes.Float64,
 					id: 'duration_nano--float64----true',
-					isColumn: true,
-					isJSON: false,
 					key: 'duration_nano',
 					type: '',
 				},
@@ -676,8 +624,6 @@ export const celeryRetryTasksTableWidgetData = getWidgetQueryBuilder(
 							key: {
 								dataType: DataTypes.String,
 								id: 'celery.state--string--tag--false',
-								isColumn: false,
-								isJSON: false,
 								key: 'celery.state',
 								type: 'tag',
 							},
@@ -692,8 +638,6 @@ export const celeryRetryTasksTableWidgetData = getWidgetQueryBuilder(
 					{
 						dataType: DataTypes.String,
 						id: 'celery.task_name--string--tag--false',
-						isColumn: false,
-						isJSON: false,
 						key: 'celery.task_name',
 						type: 'tag',
 					},
@@ -729,8 +673,6 @@ export const celeryFailedTasksTableWidgetData = getWidgetQueryBuilder(
 				aggregateAttribute: {
 					dataType: DataTypes.Float64,
 					id: 'duration_nano--float64----true',
-					isColumn: true,
-					isJSON: false,
 					key: 'duration_nano',
 					type: '',
 				},
@@ -745,8 +687,6 @@ export const celeryFailedTasksTableWidgetData = getWidgetQueryBuilder(
 							key: {
 								dataType: DataTypes.String,
 								id: 'celery.state--string--tag--false',
-								isColumn: false,
-								isJSON: false,
 								key: 'celery.state',
 								type: 'tag',
 							},
@@ -761,8 +701,6 @@ export const celeryFailedTasksTableWidgetData = getWidgetQueryBuilder(
 					{
 						dataType: DataTypes.String,
 						id: 'celery.task_name--string--tag--false',
-						isColumn: false,
-						isJSON: false,
 						key: 'celery.task_name',
 						type: 'tag',
 					},
@@ -796,8 +734,6 @@ export const celerySuccessTasksTableWidgetData = getWidgetQueryBuilder(
 				aggregateAttribute: {
 					dataType: DataTypes.Float64,
 					id: 'duration_nano--float64----true',
-					isColumn: true,
-					isJSON: false,
 					key: 'duration_nano',
 					type: '',
 				},
@@ -812,8 +748,6 @@ export const celerySuccessTasksTableWidgetData = getWidgetQueryBuilder(
 							key: {
 								dataType: DataTypes.String,
 								id: 'celery.state--string--tag--false',
-								isColumn: false,
-								isJSON: false,
 								key: 'celery.state',
 								type: 'tag',
 							},
@@ -828,8 +762,6 @@ export const celerySuccessTasksTableWidgetData = getWidgetQueryBuilder(
 					{
 						dataType: DataTypes.String,
 						id: 'celery.task_name--string--tag--false',
-						isColumn: false,
-						isJSON: false,
 						key: 'celery.task_name',
 						type: 'tag',
 					},
@@ -869,8 +801,6 @@ export const celeryTimeSeriesTablesWidgetData = (
 					aggregateAttribute: {
 						dataType: DataTypes.Float64,
 						id: 'duration_nano--float64----true',
-						isColumn: true,
-						isJSON: false,
 						key: 'duration_nano',
 						type: '',
 					},
@@ -885,8 +815,6 @@ export const celeryTimeSeriesTablesWidgetData = (
 								key: {
 									dataType: DataTypes.String,
 									id: `${entity}--string--tag--false`,
-									isColumn: false,
-									isJSON: false,
 									key: `${entity}`,
 									type: 'tag',
 								},
@@ -901,8 +829,6 @@ export const celeryTimeSeriesTablesWidgetData = (
 						{
 							dataType: DataTypes.String,
 							id: 'celery.task_name--string--tag--false',
-							isColumn: false,
-							isJSON: false,
 							key: 'celery.task_name',
 							type: 'tag',
 						},
@@ -933,8 +859,6 @@ export const celeryAllStateCountWidgetData = getWidgetQueryBuilder(
 				aggregateAttribute: {
 					dataType: DataTypes.String,
 					id: 'span_id--string----true',
-					isColumn: true,
-					isJSON: false,
 					key: 'span_id',
 					type: '',
 				},
@@ -972,8 +896,6 @@ export const celerySuccessStateCountWidgetData = getWidgetQueryBuilder(
 				aggregateAttribute: {
 					dataType: DataTypes.String,
 					id: 'span_id--string----true',
-					isColumn: true,
-					isJSON: false,
 					key: 'span_id',
 					type: '',
 				},
@@ -988,8 +910,6 @@ export const celerySuccessStateCountWidgetData = getWidgetQueryBuilder(
 							key: {
 								dataType: DataTypes.String,
 								id: 'celery.state--string--tag--false',
-								isColumn: false,
-								isJSON: false,
 								key: 'celery.state',
 								type: 'tag',
 							},
@@ -1025,8 +945,6 @@ export const celeryFailedStateCountWidgetData = getWidgetQueryBuilder(
 				aggregateAttribute: {
 					dataType: DataTypes.String,
 					id: 'span_id--string----true',
-					isColumn: true,
-					isJSON: false,
 					key: 'span_id',
 					type: '',
 				},
@@ -1041,8 +959,6 @@ export const celeryFailedStateCountWidgetData = getWidgetQueryBuilder(
 							key: {
 								dataType: DataTypes.String,
 								id: 'celery.state--string--tag--false',
-								isColumn: false,
-								isJSON: false,
 								key: 'celery.state',
 								type: 'tag',
 							},
@@ -1078,7 +994,6 @@ export const celeryRetryStateCountWidgetData = getWidgetQueryBuilder(
 				aggregateAttribute: {
 					dataType: DataTypes.String,
 					id: 'span_id--string----true',
-					isColumn: true,
 					key: 'span_id',
 					type: '',
 				},
@@ -1093,8 +1008,6 @@ export const celeryRetryStateCountWidgetData = getWidgetQueryBuilder(
 							key: {
 								dataType: DataTypes.String,
 								id: 'celery.state--string--tag--false',
-								isColumn: false,
-								isJSON: false,
 								key: 'celery.state',
 								type: 'tag',
 							},

frontend/src/components/CeleryTask/CeleryUtils.ts

@@ -39,8 +39,6 @@ export function getFiltersFromQueryParams(
 			key,
 			dataType: DataTypes.String,
 			type: 'tag',
-			isColumn: false,
-			isJSON: false,
 			id: `${key}--string--tag--false`,
 		},
 		op: '=',
@@ -64,7 +62,8 @@ export function applyCeleryFilterOnWidgetData(
 								...queryItem,
 								filters: {
 									...queryItem.filters,
-									items: [...queryItem.filters.items, ...filters],
+									items: [...(queryItem.filters?.items || []), ...filters],
+									op: queryItem.filters?.op || 'AND',
 								},
 						  }
 						: queryItem,
@@ -99,8 +98,7 @@ export const createFiltersFromData = (
 		key: string;
 		dataType: DataTypes;
 		type: string;
-		isColumn: boolean;
-		isJSON: boolean;
+
 		id: string;
 	};
 	op: string;
@@ -118,8 +116,6 @@ export const createFiltersFromData = (
 					key,
 					dataType: DataTypes.String,
 					type: 'tag',
-					isColumn: false,
-					isJSON: false,
 					id: `${key}--string--tag--false`,
 				},
 				op: '=',

frontend/src/components/CeleryTask/useNavigateToExplorer.ts

@@ -19,6 +19,7 @@ export interface NavigateToExplorerProps {
 	endTime?: number;
 	sameTab?: boolean;
 	shouldResolveQuery?: boolean;
+	widgetQuery?: Query;
 }
 
 export function useNavigateToExplorer(): (
@@ -30,26 +31,34 @@ export function useNavigateToExplorer(): (
 	);
 
 	const prepareQuery = useCallback(
-		(selectedFilters: TagFilterItem[], dataSource: DataSource): Query => ({
-			...currentQuery,
-			builder: {
-				...currentQuery.builder,
-				queryData: currentQuery.builder.queryData
-					.map((item) => ({
-						...item,
-						dataSource,
-						aggregateOperator: MetricAggregateOperator.NOOP,
-						filters: {
-							...item.filters,
-							items: selectedFilters,
-						},
-						groupBy: [],
-						disabled: false,
-					}))
-					.slice(0, 1),
-				queryFormulas: [],
-			},
-		}),
+		(
+			selectedFilters: TagFilterItem[],
+			dataSource: DataSource,
+			query?: Query,
+		): Query => {
+			const widgetQuery = query || currentQuery;
+			return {
+				...widgetQuery,
+				builder: {
+					...widgetQuery.builder,
+					queryData: widgetQuery.builder.queryData
+						.map((item) => ({
+							...item,
+							dataSource,
+							aggregateOperator: MetricAggregateOperator.NOOP,
+							filters: {
+								...item.filters,
+								items: [...(item.filters?.items || []), ...selectedFilters],
+								op: item.filters?.op || 'AND',
+							},
+							groupBy: [],
+							disabled: false,
+						}))
+						.slice(0, 1),
+					queryFormulas: [],
+				},
+			};
+		},
 		[currentQuery],
 	);
 
@@ -66,6 +75,7 @@ export function useNavigateToExplorer(): (
 				endTime,
 				sameTab,
 				shouldResolveQuery,
+				widgetQuery,
 			} = props;
 			const urlParams = new URLSearchParams();
 			if (startTime && endTime) {
@@ -76,7 +86,7 @@ export function useNavigateToExplorer(): (
 				urlParams.set(QueryParams.endTime, (maxTime / 1000000).toString());
 			}
 
-			let preparedQuery = prepareQuery(filters, dataSource);
+			let preparedQuery = prepareQuery(filters, dataSource, widgetQuery);
 
 			if (shouldResolveQuery) {
 				await getUpdatedQuery({

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

@@ -2,10 +2,28 @@
 	position: relative;
 	padding-left: 20px;
 
+	& :is(h1, h2, h3, h4, h5, h6, p, &-section-title) {
+		margin-bottom: 12px;
+	}
+
+	&-content {
+		display: flex;
+		flex-direction: column;
+		gap: 32px;
+	}
+
+	&-section-title {
+		font-size: 14px;
+		line-height: 20px;
+		color: var(--text-vanilla-400, #c0c1c3);
+	}
+
 	.changelog-release-date {
 		font-size: 14px;
 		line-height: 20px;
 		color: var(--text-vanilla-400, #c0c1c3);
+		display: block;
+		margin-bottom: 12px;
 	}
 
 	&-list {
@@ -81,12 +99,7 @@
 		}
 	}
 
-	h1,
-	h2,
-	h3,
-	h4,
-	h5,
-	h6 {
+	& :is(h1, h2, h3, h4, h5, h6, p, &-section-title) {
 		font-weight: 600;
 		color: var(--text-vanilla-100, #fff);
 	}
@@ -96,7 +109,8 @@
 		line-height: 32px;
 	}
 
-	h2 {
+	h2,
+	&-section-title {
 		font-size: 20px;
 		line-height: 28px;
 	}
@@ -108,6 +122,7 @@
 		overflow: hidden;
 		border-radius: 4px;
 		border: 1px solid var(--bg-slate-400, #1d212d);
+		margin-bottom: 28px;
 	}
 
 	.changelog-media-video {
@@ -124,17 +139,14 @@
 		&-line {
 			background-color: var(--bg-vanilla-300);
 		}
-		li,
-		p {
+
+		& :is(h1, h2, h3, h4, h5, h6, p, li, &-section-title) {
 			color: var(--text-ink-500);
 		}
 
-		h1,
-		h2,
-		h3,
-		h4,
-		h5,
-		h6 {
+		code {
+			background-color: var(--bg-vanilla-300);
+			border: 1px solid var(--bg-vanilla-300);
 			color: var(--text-ink-500);
 		}
 	}

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

@@ -55,33 +55,35 @@ function ChangelogRenderer({ changelog }: Props): JSX.Element {
 				<div className="inner-ball" />
 			</div>
 			<span className="changelog-release-date">{formattedReleaseDate}</span>
-			{changelog.features && changelog.features.length > 0 && (
-				<div className="changelog-renderer-list">
-					{changelog.features.map((feature) => (
-						<div key={feature.id}>
-							<h2>{feature.title}</h2>
-							{feature.media && renderMedia(feature.media)}
-							<ReactMarkdown>{feature.description}</ReactMarkdown>
-						</div>
-					))}
-				</div>
-			)}
-			{changelog.bug_fixes && changelog.bug_fixes.length > 0 && (
-				<div>
-					<h2>Bug Fixes</h2>
-					{changelog.bug_fixes && (
-						<ReactMarkdown>{changelog.bug_fixes}</ReactMarkdown>
-					)}
-				</div>
-			)}
-			{changelog.maintenance && changelog.maintenance.length > 0 && (
-				<div>
-					<h2>Maintenance</h2>
-					{changelog.maintenance && (
-						<ReactMarkdown>{changelog.maintenance}</ReactMarkdown>
-					)}
-				</div>
-			)}
+			<div className="changelog-renderer-content">
+				{changelog.features && changelog.features.length > 0 && (
+					<div className="changelog-renderer-list">
+						{changelog.features.map((feature) => (
+							<div key={feature.id}>
+								<div className="changelog-renderer-section-title">{feature.title}</div>
+								{feature.media && renderMedia(feature.media)}
+								<ReactMarkdown>{feature.description}</ReactMarkdown>
+							</div>
+						))}
+					</div>
+				)}
+				{changelog.bug_fixes && changelog.bug_fixes.length > 0 && (
+					<div className="changelog-renderer-bug-fixes">
+						<div className="changelog-renderer-section-title">Bug Fixes</div>
+						{changelog.bug_fixes && (
+							<ReactMarkdown>{changelog.bug_fixes}</ReactMarkdown>
+						)}
+					</div>
+				)}
+				{changelog.maintenance && changelog.maintenance.length > 0 && (
+					<div className="changelog-renderer-maintenance">
+						<div className="changelog-renderer-section-title">Maintenance</div>
+						{changelog.maintenance && (
+							<ReactMarkdown>{changelog.maintenance}</ReactMarkdown>
+						)}
+					</div>
+				)}
+			</div>
 		</div>
 	);
 }

frontend/src/components/ClientSideQBSearch/ClientSideQBSearch.tsx

@@ -241,8 +241,6 @@ function ClientSideQBSearch(
 							key: 'body',
 							dataType: DataTypes.String,
 							type: '',
-							isColumn: true,
-							isJSON: false,
 							id: 'body--string----true',
 						},
 						op: OPERATORS.CONTAINS,

frontend/src/components/Common/Common.styles.scss

@@ -0,0 +1,33 @@
+.error-state-container {
+	height: 240px;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	flex-direction: column;
+
+	border-radius: 3px;
+
+	.error-state-container-content {
+		display: flex;
+		flex-direction: column;
+		gap: 8px;
+
+		.error-state-text {
+			font-size: 14px;
+			font-weight: 500;
+		}
+
+		.error-state-additional-messages {
+			margin-top: 8px;
+			display: flex;
+			flex-direction: column;
+			gap: 4px;
+
+			.error-state-additional-text {
+				font-size: 12px;
+				font-weight: 400;
+				margin-left: 8px;
+			}
+		}
+	}
+}

frontend/src/components/Common/ErrorStateComponent.tsx

@@ -0,0 +1,59 @@
+import './Common.styles.scss';
+
+import { Typography } from 'antd';
+
+import APIError from '../../types/api/error';
+
+interface ErrorStateComponentProps {
+	message?: string;
+	error?: APIError;
+}
+
+const defaultProps: Partial<ErrorStateComponentProps> = {
+	message: undefined,
+	error: undefined,
+};
+
+function ErrorStateComponent({
+	message,
+	error,
+}: ErrorStateComponentProps): JSX.Element {
+	// Handle API Error object
+	if (error) {
+		const mainMessage = error.getErrorMessage();
+		const additionalErrors = error.getErrorDetails().error.errors || [];
+
+		return (
+			<div className="error-state-container">
+				<div className="error-state-container-content">
+					<Typography className="error-state-text">{mainMessage}</Typography>
+					{additionalErrors.length > 0 && (
+						<div className="error-state-additional-messages">
+							{additionalErrors.map((additionalError) => (
+								<Typography
+									key={`error-${additionalError.message}`}
+									className="error-state-additional-text"
+								>
+									• {additionalError.message}
+								</Typography>
+							))}
+						</div>
+					)}
+				</div>
+			</div>
+		);
+	}
+
+	// Handle simple string message (backwards compatibility)
+	return (
+		<div className="error-state-container">
+			<div className="error-state-container-content">
+				<Typography className="error-state-text">{message}</Typography>
+			</div>
+		</div>
+	);
+}
+
+ErrorStateComponent.defaultProps = defaultProps;
+
+export default ErrorStateComponent;

frontend/src/components/CustomTimePicker/CustomTimePicker.styles.scss

@@ -1,6 +1,16 @@
 .custom-time-picker {
 	display: flex;
 	flex-direction: column;
+
+	.timeSelection-input {
+		&:hover {
+			border-color: #1d212d !important;
+		}
+	}
+
+	.time-input-suffix {
+		display: flex;
+	}
 }
 
 .time-options-container {
@@ -135,6 +145,7 @@
 		align-items: center;
 		color: var(--bg-vanilla-400);
 		gap: 6px;
+
 		.timezone {
 			display: flex;
 			align-items: center;
@@ -163,6 +174,52 @@
 	cursor: pointer;
 }
 
+.time-input-prefix {
+	.live-dot-icon {
+		width: 6px;
+		height: 6px;
+		border-radius: 50%;
+		background-color: var(--bg-forest-500);
+		animation: ripple 1s infinite;
+
+		margin-right: 4px;
+		margin-left: 4px;
+	}
+}
+
+@keyframes ripple {
+	0% {
+		box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.4);
+	}
+	70% {
+		box-shadow: 0 0 0 6px rgba(245, 158, 11, 0);
+	}
+	100% {
+		box-shadow: 0 0 0 0 rgba(245, 158, 11, 0);
+	}
+}
+
+.time-input-suffix-icon-badge {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	padding: 0 4px;
+	border-radius: 2px;
+	background: rgba(171, 189, 255, 0.04);
+	color: var(--bg-vanilla-100);
+	font-size: 12px;
+	font-weight: 400;
+	line-height: 16px;
+	letter-spacing: -0.06px;
+	cursor: pointer;
+	height: 20px;
+	width: 20px;
+
+	&:hover {
+		background: rgba(171, 189, 255, 0.08);
+	}
+}
+
 .lightMode {
 	.date-time-popover__footer {
 		border-color: var(--bg-vanilla-400);
@@ -180,8 +237,26 @@
 			}
 		}
 	}
+
+	.custom-time-picker {
+		.timeSelection-input {
+			&:hover {
+				border-color: var(--bg-vanilla-300) !important;
+			}
+		}
+	}
+
 	.timezone-badge {
 		color: var(--bg-ink-100);
 		background: rgb(179 179 179 / 15%);
 	}
+
+	.time-input-suffix-icon-badge {
+		color: var(--bg-ink-100);
+		background: rgb(179 179 179 / 15%);
+
+		&:hover {
+			background: rgb(179 179 179 / 20%);
+		}
+	}
 }

frontend/src/components/CustomTimePicker/CustomTimePicker.tsx

@@ -5,13 +5,12 @@ import './CustomTimePicker.styles.scss';
 import { Input, Popover, Tooltip, Typography } from 'antd';
 import logEvent from 'api/common/logEvent';
 import cx from 'classnames';
+import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
 import { DateTimeRangeType } from 'container/TopNav/CustomDateTimeModal';
 import {
-	CustomTimeType,
 	FixedDurationSuggestionOptions,
 	Options,
 	RelativeDurationSuggestionOptions,
-	Time,
 } from 'container/TopNav/DateTimeSelectionV2/config';
 import dayjs from 'dayjs';
 import { isValidTimeFormat } from 'lib/getMinMax';
@@ -28,7 +27,10 @@ import {
 	useMemo,
 	useState,
 } from 'react';
+import { useSelector } from 'react-redux';
 import { useLocation } from 'react-router-dom';
+import { AppState } from 'store/reducers';
+import { GlobalReducer } from 'types/reducer/globalTime';
 import { popupContainer } from 'utils/selectPopupContainer';
 
 import CustomTimePickerPopoverContent from './CustomTimePickerPopoverContent';
@@ -57,11 +59,9 @@ interface CustomTimePickerProps {
 	customDateTimeVisible?: boolean;
 	setCustomDTPickerVisible?: Dispatch<SetStateAction<boolean>>;
 	onCustomDateHandler?: (dateTimeRange: DateTimeRangeType) => void;
-	handleGoLive?: () => void;
-	onTimeChange?: (
-		interval: Time | CustomTimeType,
-		dateTimeRange?: [number, number],
-	) => void;
+	showLiveLogs?: boolean;
+	onGoLive?: () => void;
+	onExitLiveLogs?: () => void;
 }
 
 function CustomTimePicker({
@@ -78,14 +78,19 @@ function CustomTimePicker({
 	customDateTimeVisible,
 	setCustomDTPickerVisible,
 	onCustomDateHandler,
-	handleGoLive,
-	onTimeChange,
+	onGoLive,
+	onExitLiveLogs,
+	showLiveLogs,
 }: CustomTimePickerProps): JSX.Element {
 	const [
 		selectedTimePlaceholderValue,
 		setSelectedTimePlaceholderValue,
 	] = useState('Select / Enter Time Range');
 
+	const { maxTime, minTime } = useSelector<AppState, GlobalReducer>(
+		(state) => state.globalTime,
+	);
+
 	const [inputValue, setInputValue] = useState('');
 	const [inputStatus, setInputStatus] = useState<'' | 'error' | 'success'>('');
 	const [inputErrorMessage, setInputErrorMessage] = useState<string | null>(
@@ -164,9 +169,13 @@ function CustomTimePicker({
 	};
 
 	useEffect(() => {
-		const value = getSelectedTimeRangeLabel(selectedTime, selectedValue);
-		setSelectedTimePlaceholderValue(value);
-	}, [selectedTime, selectedValue]);
+		if (showLiveLogs) {
+			setSelectedTimePlaceholderValue('Live');
+		} else {
+			const value = getSelectedTimeRangeLabel(selectedTime, selectedValue);
+			setSelectedTimePlaceholderValue(value);
+		}
+	}, [selectedTime, selectedValue, showLiveLogs]);
 
 	const hide = (): void => {
 		setOpen(false);
@@ -256,6 +265,11 @@ function CustomTimePicker({
 	};
 
 	const handleSelect = (label: string, value: string): void => {
+		if (label === 'Custom') {
+			setCustomDTPickerVisible?.(true);
+			return;
+		}
+
 		onSelect(value);
 		setSelectedTimePlaceholderValue(label);
 		setInputStatus('');
@@ -318,84 +332,118 @@ function CustomTimePicker({
 		);
 	};
 
+	const getTooltipTitle = (): string => {
+		if (selectedTime === 'custom' && inputValue === '' && !open) {
+			return `${dayjs(minTime / 1000_000)
+				.tz(timezone.value)
+				.format(DATE_TIME_FORMATS.DD_MMM_YYYY_HH_MM_SS)} - ${dayjs(
+				maxTime / 1000_000,
+			)
+				.tz(timezone.value)
+				.format(DATE_TIME_FORMATS.DD_MMM_YYYY_HH_MM_SS)}`;
+		}
+
+		return '';
+	};
+
+	const getInputPrefix = (): JSX.Element => {
+		if (showLiveLogs) {
+			return (
+				<div className="time-input-prefix">
+					<div className="live-dot-icon" />
+				</div>
+			);
+		}
+
+		return (
+			<div className="time-input-prefix">
+				{inputValue && inputStatus === 'success' ? (
+					<CheckCircle size={14} color="#51E7A8" />
+				) : (
+					<Tooltip title="Enter time in format (e.g., 1m, 2h, 3d, 4w)">
+						<Clock size={14} className="cursor-pointer" />
+					</Tooltip>
+				)}
+			</div>
+		);
+	};
+
 	return (
 		<div className="custom-time-picker">
-			<Popover
-				className={cx(
-					'timeSelection-input-container',
-					selectedTime === 'custom' && inputValue === '' ? 'custom-time' : '',
-				)}
-				placement="bottomRight"
-				getPopupContainer={popupContainer}
-				rootClassName="date-time-root"
-				content={
-					newPopover ? (
-						<CustomTimePickerPopoverContent
-							setIsOpen={setOpen}
-							customDateTimeVisible={defaultTo(customDateTimeVisible, false)}
-							setCustomDTPickerVisible={defaultTo(setCustomDTPickerVisible, noop)}
-							onCustomDateHandler={defaultTo(onCustomDateHandler, noop)}
-							onSelectHandler={handleSelect}
-							handleGoLive={defaultTo(handleGoLive, noop)}
-							options={items}
-							selectedTime={selectedTime}
-							activeView={activeView}
-							setActiveView={setActiveView}
-							setIsOpenedFromFooter={setIsOpenedFromFooter}
-							isOpenedFromFooter={isOpenedFromFooter}
-							onTimeChange={onTimeChange}
-						/>
-					) : (
-						content
-					)
-				}
-				arrow={false}
-				trigger="click"
-				open={open}
-				onOpenChange={handleOpenChange}
-				style={{
-					padding: 0,
-				}}
-			>
-				<Input
-					className="timeSelection-input"
-					type="text"
-					status={inputValue && inputStatus === 'error' ? 'error' : ''}
-					placeholder={
-						isInputFocused
-							? 'Time Format (1m or 2h or 3d or 4w)'
-							: selectedTimePlaceholderValue
-					}
-					value={inputValue}
-					onFocus={handleFocus}
-					onBlur={handleBlur}
-					onChange={handleInputChange}
-					data-1p-ignore
-					prefix={
-						inputValue && inputStatus === 'success' ? (
-							<CheckCircle size={14} color="#51E7A8" />
+			<Tooltip title={getTooltipTitle()} placement="top">
+				<Popover
+					className={cx(
+						'timeSelection-input-container',
+						selectedTime === 'custom' && inputValue === '' ? 'custom-time' : '',
+					)}
+					placement="bottomRight"
+					getPopupContainer={popupContainer}
+					rootClassName="date-time-root"
+					content={
+						newPopover ? (
+							<CustomTimePickerPopoverContent
+								setIsOpen={setOpen}
+								customDateTimeVisible={defaultTo(customDateTimeVisible, false)}
+								setCustomDTPickerVisible={defaultTo(setCustomDTPickerVisible, noop)}
+								onCustomDateHandler={defaultTo(onCustomDateHandler, noop)}
+								onSelectHandler={handleSelect}
+								onGoLive={defaultTo(onGoLive, noop)}
+								onExitLiveLogs={defaultTo(onExitLiveLogs, noop)}
+								options={items}
+								selectedTime={selectedTime}
+								activeView={activeView}
+								setActiveView={setActiveView}
+								setIsOpenedFromFooter={setIsOpenedFromFooter}
+								isOpenedFromFooter={isOpenedFromFooter}
+							/>
 						) : (
-							<Tooltip title="Enter time in format (e.g., 1m, 2h, 3d, 4w)">
-								<Clock size={14} />
-							</Tooltip>
+							content
 						)
 					}
-					suffix={
-						<>
-							{!!isTimezoneOverridden && activeTimezoneOffset && (
-								<div className="timezone-badge" onClick={handleTimezoneHintClick}>
-									<span>{activeTimezoneOffset}</span>
-								</div>
-							)}
-							<ChevronDown
-								size={14}
-								onClick={(): void => handleViewChange('datetime')}
-							/>
-						</>
-					}
-				/>
-			</Popover>
-
+					arrow={false}
+					trigger="click"
+					open={open}
+					onOpenChange={handleOpenChange}
+					style={{
+						padding: 0,
+					}}
+				>
+					<Input
+						className="timeSelection-input"
+						type="text"
+						status={inputValue && inputStatus === 'error' ? 'error' : ''}
+						placeholder={
+							isInputFocused
+								? 'Time Format (1m or 2h or 3d or 4w)'
+								: selectedTimePlaceholderValue
+						}
+						value={inputValue}
+						onFocus={handleFocus}
+						onClick={handleFocus}
+						onBlur={handleBlur}
+						onChange={handleInputChange}
+						data-1p-ignore
+						prefix={getInputPrefix()}
+						suffix={
+							<div className="time-input-suffix">
+								{!!isTimezoneOverridden && activeTimezoneOffset && (
+									<div className="timezone-badge" onClick={handleTimezoneHintClick}>
+										<span>{activeTimezoneOffset}</span>
+									</div>
+								)}
+								<ChevronDown
+									size={14}
+									className="cursor-pointer time-input-suffix-icon-badge"
+									onClick={(e): void => {
+										e.stopPropagation();
+										handleViewChange('datetime');
+									}}
+								/>
+							</div>
+						}
+					/>
+				</Popover>
+			</Tooltip>
 			{inputStatus === 'error' && inputErrorMessage && (
 				<Typography.Title level={5} className="valid-format-error">
 					{inputErrorMessage}
@@ -412,7 +460,8 @@ CustomTimePicker.defaultProps = {
 	customDateTimeVisible: false,
 	setCustomDTPickerVisible: noop,
 	onCustomDateHandler: noop,
-	handleGoLive: noop,
+	onGoLive: noop,
 	onCustomTimeStatusUpdate: noop,
-	onTimeChange: undefined,
+	onExitLiveLogs: noop,
+	showLiveLogs: false,
 };

frontend/src/components/CustomTimePicker/CustomTimePickerPopoverContent.tsx

@@ -4,21 +4,30 @@ import { Color } from '@signozhq/design-tokens';
 import { Button } from 'antd';
 import logEvent from 'api/common/logEvent';
 import cx from 'classnames';
+import DatePickerV2 from 'components/DatePickerV2/DatePickerV2';
+import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
+import { QueryParams } from 'constants/query';
 import ROUTES from 'constants/routes';
 import { DateTimeRangeType } from 'container/TopNav/CustomDateTimeModal';
 import {
-	CustomTimeType,
 	LexicalContext,
 	Option,
 	RelativeDurationSuggestionOptions,
-	Time,
 } from 'container/TopNav/DateTimeSelectionV2/config';
+import dayjs from 'dayjs';
 import { Clock, PenLine } from 'lucide-react';
 import { useTimezone } from 'providers/Timezone';
-import { Dispatch, SetStateAction, useMemo } from 'react';
+import {
+	Dispatch,
+	SetStateAction,
+	useCallback,
+	useEffect,
+	useMemo,
+	useState,
+} from 'react';
 import { useLocation } from 'react-router-dom';
+import { getCustomTimeRanges } from 'utils/customTimeRangeUtils';
 
-import RangePickerModal from './RangePickerModal';
 import TimezonePicker from './TimezonePicker';
 
 interface CustomTimePickerPopoverContentProps {
@@ -31,16 +40,21 @@ interface CustomTimePickerPopoverContentProps {
 		lexicalContext?: LexicalContext,
 	) => void;
 	onSelectHandler: (label: string, value: string) => void;
-	handleGoLive: () => void;
+	onGoLive: () => void;
 	selectedTime: string;
 	activeView: 'datetime' | 'timezone';
 	setActiveView: Dispatch<SetStateAction<'datetime' | 'timezone'>>;
 	isOpenedFromFooter: boolean;
 	setIsOpenedFromFooter: Dispatch<SetStateAction<boolean>>;
-	onTimeChange?: (
-		interval: Time | CustomTimeType,
-		dateTimeRange?: [number, number],
-	) => void;
+	onExitLiveLogs: () => void;
+}
+
+interface RecentlyUsedDateTimeRange {
+	label: string;
+	value: number;
+	timestamp: number;
+	from: string;
+	to: string;
 }
 
 // eslint-disable-next-line sonarjs/cognitive-complexity
@@ -51,22 +65,68 @@ function CustomTimePickerPopoverContent({
 	setCustomDTPickerVisible,
 	onCustomDateHandler,
 	onSelectHandler,
-	handleGoLive,
+	onGoLive,
 	selectedTime,
 	activeView,
 	setActiveView,
 	isOpenedFromFooter,
 	setIsOpenedFromFooter,
-	onTimeChange,
+	onExitLiveLogs,
 }: CustomTimePickerPopoverContentProps): JSX.Element {
 	const { pathname } = useLocation();
 
 	const isLogsExplorerPage = useMemo(() => pathname === ROUTES.LOGS_EXPLORER, [
 		pathname,
 	]);
+
+	const url = new URLSearchParams(window.location.search);
+
+	let panelTypeFromURL = url.get(QueryParams.panelTypes);
+
+	try {
+		panelTypeFromURL = JSON.parse(panelTypeFromURL as string);
+	} catch {
+		// fallback → leave as-is
+	}
+
+	const isLogsListView =
+		panelTypeFromURL !== 'table' && panelTypeFromURL !== 'graph'; // we do not select list view in the url
+
 	const { timezone } = useTimezone();
 	const activeTimezoneOffset = timezone.offset;
 
+	const [recentlyUsedTimeRanges, setRecentlyUsedTimeRanges] = useState<
+		RecentlyUsedDateTimeRange[]
+	>([]);
+
+	const handleExitLiveLogs = useCallback((): void => {
+		if (isLogsExplorerPage) {
+			onExitLiveLogs();
+		}
+	}, [isLogsExplorerPage, onExitLiveLogs]);
+
+	useEffect(() => {
+		if (!customDateTimeVisible) {
+			const customTimeRanges = getCustomTimeRanges();
+
+			const formattedCustomTimeRanges: RecentlyUsedDateTimeRange[] = customTimeRanges.map(
+				(range) => ({
+					label: `${dayjs(range.from)
+						.tz(timezone.value)
+						.format(DATE_TIME_FORMATS.DD_MMM_YYYY_HH_MM_SS)} - ${dayjs(range.to)
+						.tz(timezone.value)
+						.format(DATE_TIME_FORMATS.DD_MMM_YYYY_HH_MM_SS)}`,
+					from: range.from,
+					to: range.to,
+					value: range.timestamp,
+					timestamp: range.timestamp,
+				}),
+			);
+
+			setRecentlyUsedTimeRanges(formattedCustomTimeRanges);
+		}
+	}, [customDateTimeVisible, timezone.value]);
+
 	function getTimeChips(options: Option[]): JSX.Element {
 		return (
 			<div className="relative-date-time-section">
@@ -76,6 +136,7 @@ function CustomTimePickerPopoverContent({
 						className="time-btns"
 						key={option.label + option.value}
 						onClick={(): void => {
+							handleExitLiveLogs();
 							onSelectHandler(option.label, option.value);
 						}}
 					>
@@ -109,53 +170,87 @@ function CustomTimePickerPopoverContent({
 		);
 	}
 
+	const handleGoLive = (): void => {
+		onGoLive();
+		setIsOpen(false);
+	};
+
 	return (
 		<>
 			<div className="date-time-popover">
-				<div className="date-time-options">
-					{isLogsExplorerPage && (
-						<Button className="data-time-live" type="text" onClick={handleGoLive}>
-							Live
-						</Button>
-					)}
-					{options.map((option) => (
-						<Button
-							type="text"
-							key={option.label + option.value}
-							onClick={(): void => {
-								onSelectHandler(option.label, option.value);
-							}}
-							className={cx(
-								'date-time-options-btn',
-								customDateTimeVisible
-									? option.value === 'custom' && 'active'
-									: selectedTime === option.value && 'active',
-							)}
-						>
-							{option.label}
-						</Button>
-					))}
-				</div>
+				{!customDateTimeVisible && (
+					<div className="date-time-options">
+						{isLogsExplorerPage && isLogsListView && (
+							<Button className="data-time-live" type="text" onClick={handleGoLive}>
+								Live
+							</Button>
+						)}
+						{options.map((option) => (
+							<Button
+								type="text"
+								key={option.label + option.value}
+								onClick={(): void => {
+									handleExitLiveLogs();
+									onSelectHandler(option.label, option.value);
+								}}
+								className={cx(
+									'date-time-options-btn',
+									customDateTimeVisible
+										? option.value === 'custom' && 'active'
+										: selectedTime === option.value && 'active',
+								)}
+							>
+								{option.label}
+							</Button>
+						))}
+					</div>
+				)}
 				<div
 					className={cx(
 						'relative-date-time',
-						selectedTime === 'custom' || customDateTimeVisible
-							? 'date-picker'
-							: 'relative-times',
+						customDateTimeVisible ? 'date-picker' : 'relative-times',
 					)}
 				>
-					{selectedTime === 'custom' || customDateTimeVisible ? (
-						<RangePickerModal
-							setCustomDTPickerVisible={setCustomDTPickerVisible}
+					{customDateTimeVisible ? (
+						<DatePickerV2
+							onSetCustomDTPickerVisible={setCustomDTPickerVisible}
 							setIsOpen={setIsOpen}
 							onCustomDateHandler={onCustomDateHandler}
-							selectedTime={selectedTime}
-							onTimeChange={onTimeChange}
 						/>
 					) : (
-						<div className="relative-times-container">
-							<div className="time-heading">RELATIVE TIMES</div>
-							<div>{getTimeChips(RelativeDurationSuggestionOptions)}</div>
+						<div className="time-selector-container">
+							<div className="relative-times-container">
+								<div className="time-heading">RELATIVE TIMES</div>
+								<div>{getTimeChips(RelativeDurationSuggestionOptions)}</div>
+							</div>
+
+							<div className="recently-used-container">
+								<div className="time-heading">RECENTLY USED</div>
+								<div className="recently-used-range">
+									{recentlyUsedTimeRanges.map((range: RecentlyUsedDateTimeRange) => (
+										<div
+											className="recently-used-range-item"
+											role="button"
+											tabIndex={0}
+											onKeyDown={(e): void => {
+												if (e.key === 'Enter' || e.key === ' ') {
+													handleExitLiveLogs();
+													onCustomDateHandler([dayjs(range.from), dayjs(range.to)]);
+													setIsOpen(false);
+												}
+											}}
+											key={range.value}
+											onClick={(): void => {
+												handleExitLiveLogs();
+												onCustomDateHandler([dayjs(range.from), dayjs(range.to)]);
+												setIsOpen(false);
+											}}
+										>
+											{range.label}
+										</div>
+									))}
+								</div>
+							</div>
 						</div>
 					)}
 				</div>
@@ -189,8 +284,4 @@ function CustomTimePickerPopoverContent({
 	);
 }
 
-CustomTimePickerPopoverContent.defaultProps = {
-	onTimeChange: undefined,
-};
-
 export default CustomTimePickerPopoverContent;

frontend/src/components/DatePickerV2/DatePickerV2.styles.scss

@@ -0,0 +1,114 @@
+.date-picker-v2-container {
+	display: flex;
+	flex-direction: row;
+}
+
+.custom-date-time-picker-v2 {
+	padding: 12px;
+
+	.periscope-calendar {
+		border-radius: 4px;
+		border: none !important;
+		background: none !important;
+		padding: 8px 0 !important;
+	}
+
+	.periscope-calendar-day {
+		background: none !important;
+
+		&.periscope-calendar-today {
+			&.text-accent-foreground {
+				color: var(--bg-vanilla-100) !important;
+			}
+		}
+
+		button {
+			&:hover {
+				background-color: var(--bg-robin-500) !important;
+				color: var(--bg-vanilla-100) !important;
+			}
+		}
+	}
+
+	.custom-time-selector {
+		display: flex;
+		flex-direction: row;
+		gap: 16px;
+		align-items: center;
+		justify-content: space-between;
+
+		.time-input {
+			border-radius: 4px;
+			border: none !important;
+			background: none !important;
+			padding: 8px 4px !important;
+			color: var(--bg-vanilla-100) !important;
+
+			&::-webkit-calendar-picker-indicator {
+				display: none !important;
+				-webkit-appearance: none;
+				appearance: none;
+			}
+
+			&:focus {
+				border: none !important;
+				outline: none !important;
+				box-shadow: none !important;
+			}
+
+			&:focus-visible {
+				border: none !important;
+				outline: none !important;
+				box-shadow: none !important;
+			}
+		}
+	}
+
+	.custom-date-time-picker-footer {
+		display: flex;
+		flex-direction: row;
+		gap: 8px;
+		align-items: center;
+		justify-content: flex-end;
+		margin-top: 16px;
+
+		.next-btn {
+			width: 80px;
+		}
+
+		.clear-btn {
+			width: 80px;
+		}
+	}
+}
+
+.invalid-date-range-tooltip {
+	.ant-tooltip-inner {
+		color: var(--bg-sakura-500) !important;
+	}
+}
+
+.lightMode {
+	.custom-date-time-picker-v2 {
+		.periscope-calendar-day {
+			&.periscope-calendar-today {
+				&.text-accent-foreground {
+					color: var(--bg-ink-500) !important;
+				}
+			}
+
+			button {
+				&:hover {
+					background-color: var(--bg-robin-500) !important;
+					color: var(--bg-ink-500) !important;
+				}
+			}
+		}
+
+		.custom-time-selector {
+			.time-input {
+				color: var(--bg-ink-500) !important;
+			}
+		}
+	}
+}

frontend/src/components/DatePickerV2/DatePickerV2.tsx

@@ -0,0 +1,311 @@
+import './DatePickerV2.styles.scss';
+
+import { Calendar } from '@signozhq/calendar';
+import { Input } from '@signozhq/input';
+import { Button, Tooltip } from 'antd';
+import cx from 'classnames';
+import { DateTimeRangeType } from 'container/TopNav/CustomDateTimeModal';
+import { LexicalContext } from 'container/TopNav/DateTimeSelectionV2/config';
+import dayjs, { Dayjs } from 'dayjs';
+import { CornerUpLeft, MoveRight } from 'lucide-react';
+import { useTimezone } from 'providers/Timezone';
+import { useRef, useState } from 'react';
+import { useSelector } from 'react-redux';
+import { AppState } from 'store/reducers';
+import { GlobalReducer } from 'types/reducer/globalTime';
+import { addCustomTimeRange } from 'utils/customTimeRangeUtils';
+
+function DatePickerV2({
+	onSetCustomDTPickerVisible,
+	setIsOpen,
+	onCustomDateHandler,
+}: {
+	onSetCustomDTPickerVisible: (visible: boolean) => void;
+	setIsOpen: (isOpen: boolean) => void;
+	onCustomDateHandler: (
+		dateTimeRange: DateTimeRangeType,
+		lexicalContext?: LexicalContext,
+	) => void;
+}): JSX.Element {
+	const { maxTime, minTime } = useSelector<AppState, GlobalReducer>(
+		(state) => state.globalTime,
+	);
+
+	const timeInputRef = useRef<HTMLInputElement>(null);
+
+	const { timezone } = useTimezone();
+
+	const [selectedDateTimeFor, setSelectedDateTimeFor] = useState<'to' | 'from'>(
+		'from',
+	);
+
+	const [selectedFromDateTime, setSelectedFromDateTime] = useState<Dayjs | null>(
+		dayjs(minTime / 1000_000).tz(timezone.value),
+	);
+
+	const [selectedToDateTime, setSelectedToDateTime] = useState<Dayjs | null>(
+		dayjs(maxTime / 1000_000).tz(timezone.value),
+	);
+
+	const handleNext = (): void => {
+		if (selectedDateTimeFor === 'to') {
+			onCustomDateHandler([selectedFromDateTime, selectedToDateTime]);
+
+			addCustomTimeRange([selectedFromDateTime, selectedToDateTime]);
+
+			setIsOpen(false);
+			onSetCustomDTPickerVisible(false);
+			setSelectedDateTimeFor('from');
+		} else {
+			setSelectedDateTimeFor('to');
+		}
+	};
+
+	const handleDateChange = (date: Date | undefined): void => {
+		if (!date) {
+			return;
+		}
+
+		if (selectedDateTimeFor === 'from') {
+			const prevFromDateTime = selectedFromDateTime;
+
+			const newDate = dayjs(date);
+
+			const updatedFromDateTime = prevFromDateTime
+				? prevFromDateTime
+						.year(newDate.year())
+						.month(newDate.month())
+						.date(newDate.date())
+				: dayjs(date).tz(timezone.value);
+
+			setSelectedFromDateTime(updatedFromDateTime);
+		} else {
+			// eslint-disable-next-line sonarjs/no-identical-functions
+			setSelectedToDateTime((prev) => {
+				const newDate = dayjs(date);
+
+				// Update only the date part, keeping time from existing state
+				return prev
+					? prev.year(newDate.year()).month(newDate.month()).date(newDate.date())
+					: dayjs(date).tz(timezone.value);
+			});
+		}
+
+		// focus the time input
+		timeInputRef?.current?.focus();
+	};
+
+	const handleTimeChange = (time: string): void => {
+		// time should have format HH:mm:ss
+		if (!/^\d{2}:\d{2}:\d{2}$/.test(time)) {
+			return;
+		}
+
+		if (selectedDateTimeFor === 'from') {
+			setSelectedFromDateTime((prev) => {
+				if (prev) {
+					return prev
+						.set('hour', parseInt(time.split(':')[0], 10))
+						.set('minute', parseInt(time.split(':')[1], 10))
+						.set('second', parseInt(time.split(':')[2], 10));
+				}
+
+				return prev;
+			});
+		}
+		if (selectedDateTimeFor === 'to') {
+			// eslint-disable-next-line sonarjs/no-identical-functions
+			setSelectedToDateTime((prev) => {
+				if (prev) {
+					return prev
+						.set('hour', parseInt(time.split(':')[0], 10))
+						.set('minute', parseInt(time.split(':')[1], 10))
+						.set('second', parseInt(time.split(':')[2], 10));
+				}
+
+				return prev;
+			});
+		}
+	};
+
+	const getDefaultMonth = (): Date => {
+		let defaultDate = null;
+
+		if (selectedDateTimeFor === 'from') {
+			defaultDate = selectedFromDateTime?.toDate();
+		} else if (selectedDateTimeFor === 'to') {
+			defaultDate = selectedToDateTime?.toDate();
+		}
+
+		return defaultDate ?? new Date();
+	};
+
+	const isValidRange = (): boolean => {
+		if (selectedDateTimeFor === 'to') {
+			return selectedToDateTime?.isAfter(selectedFromDateTime) ?? false;
+		}
+
+		return true;
+	};
+
+	const handleBack = (): void => {
+		setSelectedDateTimeFor('from');
+	};
+
+	const handleHideCustomDTPicker = (): void => {
+		onSetCustomDTPickerVisible(false);
+	};
+
+	const handleSelectDateTimeFor = (selectedDateTimeFor: 'to' | 'from'): void => {
+		setSelectedDateTimeFor(selectedDateTimeFor);
+	};
+
+	return (
+		<div className="date-picker-v2-container">
+			<div className="date-time-custom-options-container">
+				<div
+					className="back-btn"
+					onClick={handleHideCustomDTPicker}
+					role="button"
+					tabIndex={0}
+					onKeyDown={(e): void => {
+						if (e.key === 'Enter') {
+							handleHideCustomDTPicker();
+						}
+					}}
+				>
+					<CornerUpLeft size={16} />
+					<span>Back</span>
+				</div>
+
+				<div className="date-time-custom-options">
+					<div
+						role="button"
+						tabIndex={0}
+						onKeyDown={(e): void => {
+							if (e.key === 'Enter') {
+								handleSelectDateTimeFor('from');
+							}
+						}}
+						className={cx(
+							'date-time-custom-option-from',
+							selectedDateTimeFor === 'from' && 'active',
+						)}
+						onClick={(): void => {
+							handleSelectDateTimeFor('from');
+						}}
+					>
+						<div className="date-time-custom-option-from-title">FROM</div>
+						<div className="date-time-custom-option-from-value">
+							{selectedFromDateTime?.format('YYYY-MM-DD HH:mm:ss')}
+						</div>
+					</div>
+					<div
+						role="button"
+						tabIndex={0}
+						onKeyDown={(e): void => {
+							if (e.key === 'Enter') {
+								handleSelectDateTimeFor('to');
+							}
+						}}
+						className={cx(
+							'date-time-custom-option-to',
+							selectedDateTimeFor === 'to' && 'active',
+						)}
+						onClick={(): void => {
+							handleSelectDateTimeFor('to');
+						}}
+					>
+						<div className="date-time-custom-option-to-title">TO</div>
+						<div className="date-time-custom-option-to-value">
+							{selectedToDateTime?.format('YYYY-MM-DD HH:mm:ss')}
+						</div>
+					</div>
+				</div>
+			</div>
+			<div className="custom-date-time-picker-v2">
+				<Calendar
+					mode="single"
+					required
+					selected={
+						selectedDateTimeFor === 'from'
+							? selectedFromDateTime?.toDate()
+							: selectedToDateTime?.toDate()
+					}
+					key={selectedDateTimeFor + selectedDateTimeFor}
+					onSelect={handleDateChange}
+					defaultMonth={getDefaultMonth()}
+					disabled={(current): boolean => {
+						if (selectedDateTimeFor === 'to') {
+							// disable dates after today and before selectedFromDateTime
+							const currentDay = dayjs(current);
+							return currentDay.isAfter(dayjs()) || false;
+						}
+
+						if (selectedDateTimeFor === 'from') {
+							// disable dates after selectedToDateTime
+
+							return dayjs(current).isAfter(dayjs()) || false;
+						}
+
+						return false;
+					}}
+					className="rounded-md border"
+					navLayout="after"
+				/>
+
+				<div className="custom-time-selector">
+					<label className="text-xs font-normal block" htmlFor="time-picker">
+						Timestamp
+					</label>
+
+					<MoveRight size={16} />
+
+					<div className="time-input-container">
+						<Input
+							type="time"
+							ref={timeInputRef}
+							className="time-input"
+							value={
+								selectedDateTimeFor === 'from'
+									? selectedFromDateTime?.format('HH:mm:ss')
+									: selectedToDateTime?.format('HH:mm:ss')
+							}
+							onChange={(e): void => handleTimeChange(e.target.value)}
+							step="1"
+						/>
+					</div>
+				</div>
+
+				<div className="custom-date-time-picker-footer">
+					{selectedDateTimeFor === 'to' && (
+						<Button
+							className="periscope-btn secondary clear-btn"
+							type="default"
+							onClick={handleBack}
+						>
+							Back
+						</Button>
+					)}
+					<Tooltip
+						title={
+							!isValidRange() ? 'Invalid range: TO date should be after FROM date' : ''
+						}
+						overlayClassName="invalid-date-range-tooltip"
+					>
+						<Button
+							className="periscope-btn primary next-btn"
+							type="primary"
+							onClick={handleNext}
+							disabled={!isValidRange()}
+						>
+							{selectedDateTimeFor === 'from' ? 'Next' : 'Apply'}
+						</Button>
+					</Tooltip>
+				</div>
+			</div>
+		</div>
+	);
+}
+
+export default DatePickerV2;

frontend/src/components/ErrorInPlace/ErrorInPlace.tsx

@@ -0,0 +1,79 @@
+import ErrorContent from 'components/ErrorModal/components/ErrorContent';
+import { ReactNode } from 'react';
+import APIError from 'types/api/error';
+
+interface ErrorInPlaceProps {
+	/** The error object to display */
+	error: APIError;
+	/** Custom class name */
+	className?: string;
+	/** Custom style */
+	style?: React.CSSProperties;
+	/** Whether to show a border */
+	bordered?: boolean;
+	/** Background color */
+	background?: string;
+	/** Padding */
+	padding?: string | number;
+	/** Height - defaults to 100% to take available space */
+	height?: string | number;
+	/** Width - defaults to 100% to take available space */
+	width?: string | number;
+	/** Custom content instead of ErrorContent */
+	children?: ReactNode;
+}
+
+/**
+ * ErrorInPlace - A component that renders error content directly in the available space
+ * of its parent container. Perfect for displaying errors in widgets, cards, or any
+ * container where you want the error to take up the full available space.
+ *
+ * @example
+ * <ErrorInPlace error={error} />
+ *
+ * @example
+ * <ErrorInPlace error={error} bordered background="#f5f5f5" padding={16} />
+ */
+function ErrorInPlace({
+	error,
+	className = '',
+	style,
+	bordered = false,
+	background,
+	padding = 16,
+	height = '100%',
+	width = '100%',
+	children,
+}: ErrorInPlaceProps): JSX.Element {
+	const containerStyle: React.CSSProperties = {
+		display: 'flex',
+		flexDirection: 'column',
+		width,
+		height,
+		padding: typeof padding === 'number' ? `${padding}px` : padding,
+		backgroundColor: background,
+		border: bordered ? '1px solid var(--bg-slate-400, #374151)' : 'none',
+		borderRadius: bordered ? '4px' : '0',
+		overflow: 'auto',
+		...style,
+	};
+
+	return (
+		<div className={`error-in-place ${className}`.trim()} style={containerStyle}>
+			{children || <ErrorContent error={error} />}
+		</div>
+	);
+}
+
+ErrorInPlace.defaultProps = {
+	className: undefined,
+	style: undefined,
+	bordered: undefined,
+	background: undefined,
+	padding: undefined,
+	height: undefined,
+	width: undefined,
+	children: undefined,
+};
+
+export default ErrorInPlace;

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

@@ -18,7 +18,7 @@ function ErrorContent({ error }: ErrorContentProps): JSX.Element {
 		errors: errorMessages,
 		code: errorCode,
 		message: errorMessage,
-	} = error.error.error;
+	} = error?.error?.error || {};
 	return (
 		<section className="error-content">
 			{/* Summary Header */}

frontend/src/components/ErrorPopover/ErrorPopover.tsx

@@ -0,0 +1,33 @@
+/* eslint-disable react/jsx-props-no-spreading */
+import { Popover, PopoverProps } from 'antd';
+import { ReactNode } from 'react';
+
+interface ErrorPopoverProps extends Omit<PopoverProps, 'content'> {
+	/** Content to display in the popover */
+	content: ReactNode;
+	/** Element that triggers the popover */
+	children: ReactNode;
+}
+
+/**
+ * ErrorPopover - A clean wrapper around Ant Design's Popover
+ * that provides a simple interface for displaying content in a popover.
+ *
+ * @example
+ * <ErrorPopover content={<ErrorContent error={error} />}>
+ *   <CircleX />
+ * </ErrorPopover>
+ */
+function ErrorPopover({
+	content,
+	children,
+	...popoverProps
+}: ErrorPopoverProps): JSX.Element {
+	return (
+		<Popover content={content} {...popoverProps}>
+			{children}
+		</Popover>
+	);
+}
+
+export default ErrorPopover;

frontend/src/components/ExplorerCard/utils.ts

@@ -43,13 +43,13 @@ export const omitIdFromQuery = (query: Query | null): any => ({
 	builder: {
 		...query?.builder,
 		queryData: query?.builder.queryData.map((queryData) => {
-			const { id, ...rest } = queryData.aggregateAttribute;
+			const { id, ...rest } = queryData.aggregateAttribute || {};
 			const newAggregateAttribute = rest;
 			const newGroupByAttributes = queryData.groupBy.map((groupByAttribute) => {
 				const { id, ...rest } = groupByAttribute;
 				return rest;
 			});
-			const newItems = queryData.filters.items.map((item) => {
+			const newItems = queryData.filters?.items?.map((item) => {
 				const { id, ...newItem } = item;
 				if (item.key) {
 					const { id, ...rest } = item.key;

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

@@ -74,16 +74,16 @@ function HostMetricTraces({
 							...currentQuery.builder.queryData[0].aggregateAttribute,
 						},
 						filters: {
-							items: tracesFilters.items.filter(
-								(item) => item.key?.key !== 'host.name',
-							),
+							items:
+								tracesFilters?.items?.filter((item) => item.key?.key !== 'host.name') ||
+								[],
 							op: 'AND',
 						},
 					},
 				],
 			},
 		}),
-		[currentQuery, tracesFilters.items],
+		[currentQuery, tracesFilters?.items],
 	);
 
 	const query = updatedCurrentQuery?.builder?.queryData[0] || null;
@@ -140,7 +140,8 @@ function HostMetricTraces({
 
 	const isDataEmpty =
 		!isLoading && !isFetching && !isError && traces.length === 0;
-	const hasAdditionalFilters = tracesFilters.items.length > 1;
+	const hasAdditionalFilters =
+		tracesFilters?.items && tracesFilters?.items?.length > 1;
 
 	const totalCount =
 		data?.payload?.data?.newResult?.data?.result?.[0]?.list?.length || 0;
@@ -158,7 +159,7 @@ function HostMetricTraces({
 				<div className="filter-section">
 					{query && (
 						<QueryBuilderSearch
-							query={query}
+							query={query as IBuilderQuery}
 							onChange={(value): void =>
 								handleChangeTracesFilters(value, VIEWS.TRACES)
 							}

frontend/src/components/HostMetricsDetail/HostMetricTraces/constants.ts

@@ -55,37 +55,31 @@ export const selectedColumns: BaseAutocompleteData[] = [
 		key: 'timestamp',
 		dataType: DataTypes.String,
 		type: 'tag',
-		isColumn: true,
 	},
 	{
 		key: 'serviceName',
 		dataType: DataTypes.String,
 		type: 'tag',
-		isColumn: true,
 	},
 	{
 		key: 'name',
 		dataType: DataTypes.String,
 		type: 'tag',
-		isColumn: true,
 	},
 	{
 		key: 'durationNano',
 		dataType: DataTypes.Float64,
 		type: 'tag',
-		isColumn: true,
 	},
 	{
 		key: 'httpMethod',
 		dataType: DataTypes.String,
 		type: 'tag',
-		isColumn: true,
 	},
 	{
 		key: 'responseStatusCode',
 		dataType: DataTypes.String,
 		type: 'tag',
-		isColumn: true,
 	},
 ];
 
@@ -108,9 +102,7 @@ export const getHostTracesQueryPayload = (
 						id: '------false',
 						dataType: DataTypes.EMPTY,
 						key: '',
-						isColumn: false,
 						type: '',
-						isJSON: false,
 					},
 					timeAggregation: 'rate',
 					spaceAggregation: 'sum',
@@ -133,6 +125,7 @@ export const getHostTracesQueryPayload = (
 				},
 			],
 			queryFormulas: [],
+			queryTraceOperator: [],
 		},
 		id: '572f1d91-6ac0-46c0-b726-c21488b34434',
 		queryType: EQueryType.QUERY_BUILDER,
@@ -154,8 +147,6 @@ export const getHostTracesQueryPayload = (
 				key: 'serviceName',
 				dataType: 'string',
 				type: 'tag',
-				isColumn: true,
-				isJSON: false,
 				id: 'serviceName--string--tag--true',
 				isIndexed: false,
 			},
@@ -163,8 +154,6 @@ export const getHostTracesQueryPayload = (
 				key: 'name',
 				dataType: 'string',
 				type: 'tag',
-				isColumn: true,
-				isJSON: false,
 				id: 'name--string--tag--true',
 				isIndexed: false,
 			},
@@ -172,8 +161,6 @@ export const getHostTracesQueryPayload = (
 				key: 'durationNano',
 				dataType: 'float64',
 				type: 'tag',
-				isColumn: true,
-				isJSON: false,
 				id: 'durationNano--float64--tag--true',
 				isIndexed: false,
 			},
@@ -181,8 +168,6 @@ export const getHostTracesQueryPayload = (
 				key: 'httpMethod',
 				dataType: 'string',
 				type: 'tag',
-				isColumn: true,
-				isJSON: false,
 				id: 'httpMethod--string--tag--true',
 				isIndexed: false,
 			},
@@ -190,8 +175,6 @@ export const getHostTracesQueryPayload = (
 				key: 'responseStatusCode',
 				dataType: 'string',
 				type: 'tag',
-				isColumn: true,
-				isJSON: false,
 				id: 'responseStatusCode--string--tag--true',
 				isIndexed: false,
 			},

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

@@ -119,8 +119,6 @@ function HostMetricsDetails({
 						key: 'host.name',
 						dataType: DataTypes.String,
 						type: 'resource',
-						isColumn: false,
-						isJSON: false,
 						id: 'host.name--string--resource--false',
 					},
 					op: '=',
@@ -216,15 +214,17 @@ function HostMetricsDetails({
 	const handleChangeLogFilters = useCallback(
 		(value: IBuilderQuery['filters'], view: VIEWS) => {
 			setLogFilters((prevFilters) => {
-				const hostNameFilter = prevFilters.items.find(
+				const hostNameFilter = prevFilters?.items?.find(
 					(item) => item.key?.key === 'host.name',
 				);
-				const paginationFilter = value.items.find((item) => item.key?.key === 'id');
-				const newFilters = value.items.filter(
+				const paginationFilter = value?.items?.find(
+					(item) => item.key?.key === 'id',
+				);
+				const newFilters = value?.items?.filter(
 					(item) => item.key?.key !== 'id' && item.key?.key !== 'host.name',
 				);
 
-				if (newFilters.length > 0) {
+				if (newFilters && newFilters?.length > 0) {
 					logEvent(InfraMonitoringEvents.FilterApplied, {
 						entity: InfraMonitoringEvents.HostEntity,
 						view: InfraMonitoringEvents.LogsView,
@@ -236,7 +236,7 @@ function HostMetricsDetails({
 					op: 'AND',
 					items: [
 						hostNameFilter,
-						...newFilters,
+						...(newFilters || []),
 						...(paginationFilter ? [paginationFilter] : []),
 					].filter((item): item is TagFilterItem => item !== undefined),
 				};
@@ -258,11 +258,11 @@ function HostMetricsDetails({
 	const handleChangeTracesFilters = useCallback(
 		(value: IBuilderQuery['filters'], view: VIEWS) => {
 			setTracesFilters((prevFilters) => {
-				const hostNameFilter = prevFilters.items.find(
+				const hostNameFilter = prevFilters?.items?.find(
 					(item) => item.key?.key === 'host.name',
 				);
 
-				if (value.items.length > 0) {
+				if (value?.items && value?.items?.length > 0) {
 					logEvent(InfraMonitoringEvents.FilterApplied, {
 						entity: InfraMonitoringEvents.HostEntity,
 						view: InfraMonitoringEvents.TracesView,
@@ -274,7 +274,7 @@ function HostMetricsDetails({
 					op: 'AND',
 					items: [
 						hostNameFilter,
-						...value.items.filter((item) => item.key?.key !== 'host.name'),
+						...(value?.items?.filter((item) => item.key?.key !== 'host.name') || []),
 					].filter((item): item is TagFilterItem => item !== undefined),
 				};
 
@@ -311,7 +311,7 @@ function HostMetricsDetails({
 		if (selectedView === VIEW_TYPES.LOGS) {
 			const filtersWithoutPagination = {
 				...logFilters,
-				items: logFilters.items.filter((item) => item.key?.key !== 'id'),
+				items: logFilters?.items?.filter((item) => item.key?.key !== 'id') || [],
 			};
 
 			const compositeQuery = {

frontend/src/components/HostMetricsDetail/HostMetricsLogs/HostMetricLogsDetailedView.tsx

@@ -52,14 +52,16 @@ function HostMetricLogsDetailedView({
 							...currentQuery.builder.queryData[0].aggregateAttribute,
 						},
 						filters: {
-							items: logFilters.items.filter((item) => item.key?.key !== 'host.name'),
+							items:
+								logFilters?.items?.filter((item) => item.key?.key !== 'host.name') ||
+								[],
 							op: 'AND',
 						},
 					},
 				],
 			},
 		}),
-		[currentQuery, logFilters.items],
+		[currentQuery, logFilters?.items],
 	);
 
 	const query = updatedCurrentQuery?.builder?.queryData[0] || null;
@@ -70,7 +72,7 @@ function HostMetricLogsDetailedView({
 				<div className="filter-section">
 					{query && (
 						<QueryBuilderSearch
-							query={query}
+							query={query as IBuilderQuery}
 							onChange={(value): void => handleChangeLogFilters(value, VIEWS.LOGS)}
 							disableNavigationShortcuts
 						/>

frontend/src/components/HostMetricsDetail/HostMetricsLogs/__tests__/HostMetricsLogs.test.tsx

@@ -1,168 +0,0 @@
-import { ENVIRONMENT } from 'constants/env';
-import {
-	verifyFiltersAndOrderBy,
-	verifyPayload,
-} from 'container/LogsExplorerViews/tests/LogsExplorerPagination.test';
-import { logsPaginationQueryRangeSuccessResponse } from 'mocks-server/__mockdata__/logs_query_range';
-import { server } from 'mocks-server/server';
-import { rest } from 'msw';
-import { VirtuosoMockContext } from 'react-virtuoso';
-import {
-	act,
-	fireEvent,
-	render,
-	RenderResult,
-	waitFor,
-} from 'tests/test-utils';
-import { QueryRangePayload } from 'types/api/metrics/getQueryRange';
-import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
-
-import HostMetricsLogs from '../HostMetricsLogs';
-
-jest.mock('uplot', () => {
-	const paths = {
-		spline: jest.fn(),
-		bars: jest.fn(),
-	};
-	const uplotMock = jest.fn(() => ({
-		paths,
-	}));
-	return {
-		paths,
-		default: uplotMock,
-	};
-});
-
-jest.mock(
-	'components/OverlayScrollbar/OverlayScrollbar',
-	() =>
-		function MockOverlayScrollbar({
-			children,
-		}: {
-			children: React.ReactNode;
-		}): JSX.Element {
-			return <div>{children}</div>;
-		},
-);
-
-describe.skip('HostMetricsLogs', () => {
-	let capturedQueryRangePayloads: QueryRangePayload[] = [];
-	const itemHeight = 100;
-	beforeEach(() => {
-		server.use(
-			rest.post(
-				`${ENVIRONMENT.baseURL}/api/v3/query_range`,
-				async (req, res, ctx) => {
-					capturedQueryRangePayloads.push(await req.json());
-
-					const lastPayload =
-						capturedQueryRangePayloads[capturedQueryRangePayloads.length - 1];
-
-					const queryData = lastPayload?.compositeQuery.builderQueries
-						?.A as IBuilderQuery;
-
-					const offset = queryData?.offset ?? 0;
-
-					return res(
-						ctx.status(200),
-						ctx.json(logsPaginationQueryRangeSuccessResponse({ offset })),
-					);
-				},
-			),
-		);
-		capturedQueryRangePayloads = [];
-	});
-	it('should check if host logs pagination flows work properly', async () => {
-		let renderResult: RenderResult;
-		let scrollableElement: HTMLElement;
-
-		await act(async () => {
-			renderResult = render(
-				<VirtuosoMockContext.Provider value={{ viewportHeight: 500, itemHeight }}>
-					<HostMetricsLogs
-						timeRange={{ startTime: 0, endTime: 0 }}
-						filters={{ items: [], op: 'AND' }}
-					/>
-				</VirtuosoMockContext.Provider>,
-			);
-		});
-
-		await waitFor(() => {
-			expect(capturedQueryRangePayloads.length).toBe(1);
-		});
-
-		await waitFor(async () => {
-			// Find the Virtuoso scroller element by its data-test-id
-			scrollableElement = renderResult.container.querySelector(
-				'[data-test-id="virtuoso-scroller"]',
-			) as HTMLElement;
-
-			// Ensure the element exists
-			expect(scrollableElement).not.toBeNull();
-
-			if (scrollableElement) {
-				// Set the scrollTop property to simulate scrolling to the calculated end position
-				scrollableElement.scrollTop = 99 * itemHeight;
-
-				act(() => {
-					fireEvent.scroll(scrollableElement);
-				});
-			}
-		});
-
-		await waitFor(() => {
-			expect(capturedQueryRangePayloads.length).toBe(2);
-		});
-
-		const firstPayload = capturedQueryRangePayloads[0];
-		verifyPayload({
-			payload: firstPayload,
-			expectedOffset: 0,
-		});
-
-		// Store the time range from the first payload, which should be consistent in subsequent requests
-		const initialTimeRange = {
-			start: firstPayload.start,
-			end: firstPayload.end,
-		};
-
-		const secondPayload = capturedQueryRangePayloads[1];
-		const secondQueryData = verifyPayload({
-			payload: secondPayload,
-			expectedOffset: 100,
-			initialTimeRange,
-		});
-		verifyFiltersAndOrderBy(secondQueryData);
-
-		await waitFor(async () => {
-			// Find the Virtuoso scroller element by its data-test-id
-			scrollableElement = renderResult.container.querySelector(
-				'[data-test-id="virtuoso-scroller"]',
-			) as HTMLElement;
-
-			// Ensure the element exists
-			expect(scrollableElement).not.toBeNull();
-
-			if (scrollableElement) {
-				// Set the scrollTop property to simulate scrolling to the calculated end position
-				scrollableElement.scrollTop = 199 * itemHeight;
-
-				act(() => {
-					fireEvent.scroll(scrollableElement);
-				});
-			}
-		});
-
-		await waitFor(() => {
-			expect(capturedQueryRangePayloads.length).toBeGreaterThanOrEqual(3);
-		});
-
-		const thirdPayload = capturedQueryRangePayloads[2];
-		const thirdQueryData = verifyPayload({
-			payload: thirdPayload,
-			expectedOffset: 200,
-			initialTimeRange,
-		});
-		verifyFiltersAndOrderBy(thirdQueryData);
-	});
-});

frontend/src/components/HostMetricsDetail/HostMetricsLogs/constants.ts

@@ -26,9 +26,7 @@ export const getHostLogsQueryPayload = (
 						id: '------false',
 						dataType: DataTypes.String,
 						key: '',
-						isColumn: false,
 						type: '',
-						isJSON: false,
 					},
 					timeAggregation: 'rate',
 					spaceAggregation: 'sum',
@@ -53,6 +51,7 @@ export const getHostLogsQueryPayload = (
 				},
 			],
 			queryFormulas: [],
+			queryTraceOperator: [],
 		},
 		id: uuidv4(),
 		queryType: EQueryType.QUERY_BUILDER,

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

@@ -13,6 +13,7 @@ import {
 	CustomTimeType,
 	Time,
 } from 'container/TopNav/DateTimeSelectionV2/config';
+import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { useResizeObserver } from 'hooks/useDimensions';
 import { useMultiIntersectionObserver } from 'hooks/useMultiIntersectionObserver';
@@ -77,7 +78,7 @@ function Metrics({
 				signal,
 			}: QueryFunctionContext): Promise<
 				SuccessResponse<MetricRangePayloadProps>
-			> => GetMetricQueryRange(payload, ENTITY_VERSION_V4, signal),
+			> => GetMetricQueryRange(payload, ENTITY_VERSION_V4, undefined, signal),
 			enabled: !!payload && visibilities[index],
 			keepPreviousData: true,
 		})),
@@ -86,6 +87,7 @@ function Metrics({
 	const isDarkMode = useIsDarkMode();
 	const graphRef = useRef<HTMLDivElement>(null);
 	const dimensions = useResizeObserver(graphRef);
+	const { currentQuery } = useQueryBuilder();
 
 	const chartData = useMemo(
 		() => queries.map(({ data }) => getUPlotChartData(data?.payload)),
@@ -144,9 +146,17 @@ function Metrics({
 					minTimeScale: graphTimeIntervals[idx].start,
 					maxTimeScale: graphTimeIntervals[idx].end,
 					onDragSelect: (start, end) => onDragSelect(start, end, idx),
+					query: currentQuery,
 				}),
 			),
-		[queries, isDarkMode, dimensions, graphTimeIntervals, onDragSelect],
+		[
+			queries,
+			isDarkMode,
+			dimensions,
+			graphTimeIntervals,
+			onDragSelect,
+			currentQuery,
+		],
 	);
 
 	const renderCardContent = (

frontend/src/components/HttpStatusBadge/HttpStatusBadge.tsx

@@ -0,0 +1,50 @@
+import { Badge } from '@signozhq/badge';
+
+type BadgeColor =
+	| 'vanilla'
+	| 'robin'
+	| 'forest'
+	| 'amber'
+	| 'sienna'
+	| 'cherry'
+	| 'sakura'
+	| 'aqua';
+
+interface HttpStatusBadgeProps {
+	statusCode: string | number;
+}
+
+function getStatusCodeColor(statusCode: number): BadgeColor {
+	if (statusCode >= 200 && statusCode < 300) {
+		return 'forest'; // Success - green
+	}
+	if (statusCode >= 300 && statusCode < 400) {
+		return 'robin'; // Redirect - blue
+	}
+	if (statusCode >= 400 && statusCode < 500) {
+		return 'amber'; // Client error - amber
+	}
+	if (statusCode >= 500) {
+		return 'cherry'; // Server error - red
+	}
+	if (statusCode >= 100 && statusCode < 200) {
+		return 'vanilla'; // Informational - neutral
+	}
+	return 'robin'; // Default fallback
+}
+
+function HttpStatusBadge({
+	statusCode,
+}: HttpStatusBadgeProps): JSX.Element | null {
+	const numericStatusCode = Number(statusCode);
+
+	if (!numericStatusCode || numericStatusCode <= 0) {
+		return null;
+	}
+
+	const color = getStatusCodeColor(numericStatusCode);
+
+	return <Badge color={color}>{statusCode}</Badge>;
+}
+
+export default HttpStatusBadge;

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: 60px;
+		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,75 @@
+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,
+	closeIcon,
+}: {
+	label: string;
+	initialValue?: string | number | null;
+	placeholder: string;
+	type?: string;
+	onClose?: () => void;
+	labelAfter?: boolean;
+	onChange: (value: string) => void;
+	className?: string;
+	closeIcon?: React.ReactNode;
+}): 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()}
+				data-testid={`input-${label}`}
+			/>
+			{labelAfter && <Typography.Text className="label">{label}</Typography.Text>}
+			{onClose && (
+				<Button
+					className="periscope-btn ghost close-btn"
+					icon={closeIcon || <X size={16} />}
+					onClick={onClose}
+				/>
+			)}
+		</div>
+	);
+}
+
+InputWithLabel.defaultProps = {
+	type: 'text',
+	onClose: undefined,
+	labelAfter: false,
+	initialValue: undefined,
+	className: undefined,
+	closeIcon: undefined,
+};
+
+export default InputWithLabel;

frontend/src/components/KBarCommandPalette/KBarCommandPalette.scss

@@ -0,0 +1,152 @@
+.kbar-command-palette__positioner {
+	position: fixed;
+	inset: 0;
+	display: flex;
+	align-items: flex-start;
+	justify-content: center;
+	padding: 1rem;
+	background: rgba(0, 0, 0, 0.5);
+	backdrop-filter: blur(6px);
+	z-index: 50;
+}
+
+.kbar-command-palette__animator {
+	width: 100%;
+	max-width: 600px;
+}
+
+.kbar-command-palette__card {
+	background: var(--bg-ink-500);
+	color: var(--text-vanilla-100);
+	border-radius: 3px;
+	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
+	overflow: hidden;
+	display: flex;
+	flex-direction: column;
+}
+
+.kbar-command-palette__search {
+	padding: 12px 16px;
+	font-size: 13px;
+	border: none;
+	border-bottom: 1px solid var(--border-ink-200);
+	color: var(--text-vanilla-100);
+	outline: none;
+	background-color: var(--bg-ink-500);
+}
+
+.kbar-command-palette__section {
+	padding: 8px 16px 4px;
+	font-size: 12px;
+	font-weight: 600;
+	color: var(--text-robin-500);
+	font-family: 'Inter', sans-serif;
+	text-transform: uppercase;
+	letter-spacing: 0.02em;
+}
+
+.kbar-command-palette__item {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	padding: 10px 16px;
+	font-size: 13px;
+	cursor: pointer;
+	transition: background 0.15s ease;
+}
+
+.kbar-command-palette__item:hover,
+.kbar-command-palette__item--active {
+	background: var(--bg-ink-400);
+}
+
+.kbar-command-palette__icon {
+	flex-shrink: 0;
+	width: 18px;
+	height: 18px;
+	color: #444;
+}
+
+.kbar-command-palette__shortcut {
+	margin-left: auto;
+	display: flex;
+	gap: 4px;
+}
+
+.kbar-command-palette__key {
+	padding: 2px 6px;
+	font-size: 12px;
+	border-radius: 4px;
+	background: var(--bg-ink-300);
+	color: var(--text-vanilla-300);
+	text-transform: uppercase;
+	font-family: 'Space Mono', monospace;
+}
+
+.kbar-command-palette__results-container {
+	div {
+		&::-webkit-scrollbar {
+			width: 0.3rem;
+			height: 0.3rem;
+		}
+
+		&::-webkit-scrollbar-track {
+			background: transparent;
+		}
+
+		&::-webkit-scrollbar-thumb {
+			background: var(--bg-slate-300);
+		}
+
+		&::-webkit-scrollbar-thumb:hover {
+			background: var(--bg-slate-200);
+		}
+	}
+}
+
+.lightMode {
+	.kbar-command-palette__positioner {
+		background: rgba(0, 0, 0, 0.5);
+	}
+
+	.kbar-command-palette__card {
+		background: #fff;
+		box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
+	}
+
+	.kbar-command-palette__search {
+		border-bottom: 1px solid #e5e5e5;
+		color: var(--text-ink-500);
+		background-color: var(--bg-vanilla-100);
+	}
+
+	.kbar-command-palette__item {
+		color: var(--text-ink-500);
+	}
+
+	.kbar-command-palette__item:hover,
+	.kbar-command-palette__item--active {
+		background: #f5f5f5;
+	}
+
+	.kbar-command-palette__icon {
+		color: #444;
+	}
+
+	.kbar-command-palette__key {
+		background: #eee;
+		color: #555;
+	}
+
+	.kbar-command-palette__results-container {
+		div {
+			&::-webkit-scrollbar-thumb {
+				background: var(--bg-vanilla-300);
+			}
+
+			&::-webkit-scrollbar-thumb:hover {
+				background: var(--bg-vanilla-300);
+			}
+		}
+	}
+}

frontend/src/components/KBarCommandPalette/KBarCommandPalette.tsx

@@ -0,0 +1,69 @@
+import './KBarCommandPalette.scss';
+
+import {
+	KBarAnimator,
+	KBarPortal,
+	KBarPositioner,
+	KBarResults,
+	KBarSearch,
+	useMatches,
+} from 'kbar';
+
+function Results(): JSX.Element {
+	const { results } = useMatches();
+
+	const renderResults = ({
+		item,
+		active,
+	}: {
+		item: any;
+		active: boolean;
+	}): JSX.Element =>
+		typeof item === 'string' ? (
+			<div className="kbar-command-palette__section">{item}</div>
+		) : (
+			<div
+				className={`kbar-command-palette__item ${
+					active ? 'kbar-command-palette__item--active' : ''
+				}`}
+			>
+				{item.icon}
+				<span>{item.name}</span>
+				{item.shortcut?.length ? (
+					<span className="kbar-command-palette__shortcut">
+						{item.shortcut.map((sc: string) => (
+							<kbd key={sc} className="kbar-command-palette__key">
+								{sc}
+							</kbd>
+						))}
+					</span>
+				) : null}
+			</div>
+		);
+
+	return (
+		<div className="kbar-command-palette__results-container">
+			<KBarResults items={results} onRender={renderResults} />
+		</div>
+	);
+}
+
+function KBarCommandPalette(): JSX.Element {
+	return (
+		<KBarPortal>
+			<KBarPositioner className="kbar-command-palette__positioner">
+				<KBarAnimator className="kbar-command-palette__animator">
+					<div className="kbar-command-palette__card">
+						<KBarSearch
+							className="kbar-command-palette__search"
+							placeholder="Search or type a command..."
+						/>
+						<Results />
+					</div>
+				</KBarAnimator>
+			</KBarPositioner>
+		</KBarPortal>
+	);
+}
+
+export default KBarCommandPalette;