Revert "feat: added variable in url and made dashboard sync around that and sharable (#7944)"

This reverts commit 1d1557e79a.

.devenv/docker/clickhouse/compose.yaml

@@ -24,7 +24,7 @@ services:
     depends_on:
       - zookeeper
   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 +40,7 @@ services:
       timeout: 5s
       retries: 3
   schema-migrator-sync:
-    image: signoz/signoz-schema-migrator:v0.128.2
+    image: signoz/signoz-schema-migrator:v0.129.0
     container_name: schema-migrator-sync
     command:
       - sync
@@ -53,7 +53,7 @@ services:
         condition: service_healthy
     restart: on-failure
   schema-migrator-async:
-    image: signoz/signoz-schema-migrator:v0.128.2
+    image: signoz/signoz-schema-migrator:v0.129.0
     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/workflows/integrationci.yaml

@@ -15,6 +15,8 @@ jobs:
       matrix:
         src:
           - bootstrap
+          - auth
+          - querier
         sqlstore-provider:
           - postgres
           - sqlite

.github/workflows/run-e2e.yaml

@@ -0,0 +1,62 @@
+name: e2eci
+
+on:
+  workflow_dispatch:
+    inputs:
+      userRole:
+        description: "Role of the user (ADMIN, EDITOR, VIEWER)"
+        required: true
+        type: choice
+        options:
+          - ADMIN
+          - EDITOR
+          - VIEWER
+
+jobs:
+  test:
+    name: Run Playwright Tests
+    runs-on: ubuntu-latest
+    timeout-minutes: 60
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: lts/*
+
+      - name: Mask secrets and input
+        run: |
+          echo "::add-mask::${{ secrets.BASE_URL }}"
+          echo "::add-mask::${{ secrets.LOGIN_USERNAME }}"
+          echo "::add-mask::${{ secrets.LOGIN_PASSWORD }}"
+          echo "::add-mask::${{ github.event.inputs.userRole }}"
+
+      - name: Install dependencies
+        working-directory: frontend
+        run: |
+          npm install -g yarn
+          yarn
+
+      - name: Install Playwright Browsers
+        working-directory: frontend
+        run: yarn playwright install --with-deps
+
+      - name: Run Playwright Tests
+        working-directory: frontend
+        run: |
+          BASE_URL="${{ secrets.BASE_URL }}" \
+          LOGIN_USERNAME="${{ secrets.LOGIN_USERNAME }}" \
+          LOGIN_PASSWORD="${{ secrets.LOGIN_PASSWORD }}" \
+          USER_ROLE="${{ github.event.inputs.userRole }}" \
+          yarn playwright test
+
+      - name: Upload Playwright Report
+        uses: actions/upload-artifact@v4
+        if: always()
+        with:
+          name: playwright-report
+          path: frontend/playwright-report/
+          retention-days: 30

ADVOCATE.md

@@ -0,0 +1,62 @@
+# SigNoz Community Advocate Program
+
+Our community is filled with passionate developers who love SigNoz and have been helping spread the word about observability across the world. The SigNoz Community Advocate Program is our way of recognizing these incredible community members and creating deeper collaboration opportunities.
+
+## What is the SigNoz Community Advocate Program?
+
+The SigNoz Community Advocate Program celebrates and supports community members who are already passionate about observability and helping fellow developers. If you're someone who loves discussing SigNoz, helping others with their implementations, or sharing knowledge about observability practices, this program is designed with you in mind.
+
+Our advocates are the heart of the SigNoz community, helping other developers succeed with observability and providing valuable insights that help us build better products.
+
+## What Do Advocates Do?
+
+1. **Community Support**
+
+    - Help fellow developers in our Slack community and GitHub Discussions
+    - Answer questions and share solutions
+    - Guide newcomers through SigNoz self-host implementations
+
+2. **Knowledge Sharing**
+
+    - Spread awareness about observability best practices on developer forums
+    - Create content like blog posts, social media posts, and videos
+    - Host local meetups and events in their regions
+
+3. **Product Collaboration**
+
+    - Provide insights on features, changes, and improvements the community needs
+    - Beta test new features and provide early feedback
+    - Help us understand real-world use cases and pain points
+
+## What's In It For You?
+
+**Recognition & Swag**
+
+- Official recognition as a SigNoz advocate
+- Welcome hamper upon joining
+- Exclusive swag box within your first 3 months
+- Feature on our website (with your permission)
+
+**Early Access**
+
+- First look at new features and updates
+- Direct line to the SigNoz team for feedback and suggestions
+- Opportunity to influence product roadmap
+
+**Community Impact**
+
+- Help shape the observability landscape
+- Build your reputation in the developer community
+- Connect with like-minded developers globally
+
+## How Does It Work?
+
+Currently, the SigNoz Community Advocate Program is **invite-only**. We're starting with a small group of passionate community members who have already been making a difference.
+
+We'll be working closely with our first advocates to shape the program details, benefits, and structure based on what works best for everyone involved.
+
+If you're interested in learning more about the program or want to get more involved in the SigNoz community, join our [Slack community](https://signoz-community.slack.com/) and let us know!
+
+---
+
+*The SigNoz Community Advocate Program recognizes and celebrates the amazing community members who are already passionate about helping fellow developers succeed with observability.*

CONTRIBUTING.md

@@ -78,3 +78,4 @@ 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. 

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
 ##############################################################
@@ -92,7 +103,7 @@ go-run-community: ## Runs the community go backend server
 	SIGNOZ_TELEMETRYSTORE_PROVIDER=clickhouse \
 	SIGNOZ_TELEMETRYSTORE_CLICKHOUSE_DSN=tcp://127.0.0.1:9000 \
 	go run -race \
-		$(GO_BUILD_CONTEXT_COMMUNITY)/*.go \
+		$(GO_BUILD_CONTEXT_COMMUNITY)/*.go server \
 		--config ./conf/prometheus.yml \
 		--cluster cluster
 

cmd/community/.goreleaser.yaml

@@ -11,7 +11,7 @@ before:
 builds:
   - id: signoz
     binary: bin/signoz
-    main: cmd/community
+    main: ./cmd/community
     env:
       - CGO_ENABLED=1
       - >-

cmd/enterprise/.goreleaser.yaml

@@ -11,7 +11,7 @@ before:
 builds:
   - id: signoz
     binary: bin/signoz
-    main: cmd/enterprise
+    main: ./cmd/enterprise
     env:
       - CGO_ENABLED=1
       - >-

cmd/enterprise/Dockerfile.integration

@@ -1,3 +1,10 @@
+FROM node:18-bullseye AS build
+
+WORKDIR /opt/
+COPY ./frontend/ ./
+RUN CI=1 yarn install
+RUN CI=1 yarn build
+
 FROM golang:1.23-bullseye
 
 ARG OS="linux"
@@ -32,6 +39,8 @@ COPY Makefile Makefile
 RUN TARGET_DIR=/root ARCHS=${TARGETARCH} ZEUS_URL=${ZEUSURL} LICENSE_URL=${ZEUSURL}/api/v1 make go-build-enterprise-race
 RUN mv /root/linux-${TARGETARCH}/signoz /root/signoz
 
+COPY --from=build /opt/build ./web/
+
 RUN chmod 755 /root /root/signoz
 
 ENTRYPOINT ["/root/signoz", "server"]

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:

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

@@ -39,7 +39,7 @@ x-clickhouse-defaults: &clickhouse-defaults
       hard: 262144
 x-zookeeper-defaults: &zookeeper-defaults
   !!merge <<: *common
-  image: bitnami/zookeeper:3.7.1
+  image: signoz/zookeeper:3.7.1
   user: root
   deploy:
     labels:
@@ -174,7 +174,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:v0.90.1
+    image: signoz/signoz:v0.92.1
     command:
       - --config=/root/config/prometheus.yml
     ports:
@@ -207,7 +207,7 @@ services:
       retries: 3
   otel-collector:
     !!merge <<: *db-depend
-    image: signoz/signoz-otel-collector:v0.128.2
+    image: signoz/signoz-otel-collector:v0.129.0
     command:
       - --config=/etc/otel-collector-config.yaml
       - --manager-config=/etc/manager-config.yaml
@@ -231,7 +231,7 @@ services:
       - signoz
   schema-migrator:
     !!merge <<: *common
-    image: signoz/signoz-schema-migrator:v0.128.2
+    image: signoz/signoz-schema-migrator:v0.129.0
     deploy:
       restart_policy:
         condition: on-failure

deploy/docker-swarm/docker-compose.yaml

@@ -38,7 +38,7 @@ x-clickhouse-defaults: &clickhouse-defaults
       hard: 262144
 x-zookeeper-defaults: &zookeeper-defaults
   !!merge <<: *common
-  image: bitnami/zookeeper:3.7.1
+  image: signoz/zookeeper:3.7.1
   user: root
   deploy:
     labels:
@@ -115,7 +115,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:v0.90.1
+    image: signoz/signoz:v0.92.1
     command:
       - --config=/root/config/prometheus.yml
     ports:
@@ -148,7 +148,7 @@ services:
       retries: 3
   otel-collector:
     !!merge <<: *db-depend
-    image: signoz/signoz-otel-collector:v0.128.2
+    image: signoz/signoz-otel-collector:v0.129.0
     command:
       - --config=/etc/otel-collector-config.yaml
       - --manager-config=/etc/manager-config.yaml
@@ -174,7 +174,7 @@ services:
       - signoz
   schema-migrator:
     !!merge <<: *common
-    image: signoz/signoz-schema-migrator:v0.128.2
+    image: signoz/signoz-schema-migrator:v0.129.0
     deploy:
       restart_policy:
         condition: on-failure

deploy/docker/docker-compose.ha.yaml

@@ -42,7 +42,7 @@ x-clickhouse-defaults: &clickhouse-defaults
       hard: 262144
 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"
@@ -177,7 +177,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:${VERSION:-v0.90.1}
+    image: signoz/signoz:${VERSION:-v0.92.1}
     container_name: signoz
     command:
       - --config=/root/config/prometheus.yml
@@ -211,7 +211,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.0}
     container_name: signoz-otel-collector
     command:
       - --config=/etc/otel-collector-config.yaml
@@ -237,7 +237,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.0}
     container_name: schema-migrator-sync
     command:
       - sync
@@ -248,7 +248,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.0}
     container_name: schema-migrator-async
     command:
       - async

deploy/docker/docker-compose.yaml

@@ -38,7 +38,7 @@ x-clickhouse-defaults: &clickhouse-defaults
       hard: 262144
 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"
@@ -110,7 +110,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:${VERSION:-v0.90.1}
+    image: signoz/signoz:${VERSION:-v0.92.1}
     container_name: signoz
     command:
       - --config=/root/config/prometheus.yml
@@ -143,7 +143,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.0}
     container_name: signoz-otel-collector
     command:
       - --config=/etc/otel-collector-config.yaml
@@ -165,7 +165,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.0}
     container_name: schema-migrator-sync
     command:
       - sync
@@ -177,7 +177,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.0}
     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"}]}]}]}'
+```

ee/anomaly/daily.go

@@ -0,0 +1,34 @@
+package anomaly
+
+import (
+	"context"
+
+	"github.com/SigNoz/signoz/pkg/valuer"
+)
+
+type DailyProvider struct {
+	BaseSeasonalProvider
+}
+
+var _ BaseProvider = (*DailyProvider)(nil)
+
+func (dp *DailyProvider) GetBaseSeasonalProvider() *BaseSeasonalProvider {
+	return &dp.BaseSeasonalProvider
+}
+
+func NewDailyProvider(opts ...GenericProviderOption[*DailyProvider]) *DailyProvider {
+	dp := &DailyProvider{
+		BaseSeasonalProvider: BaseSeasonalProvider{},
+	}
+
+	for _, opt := range opts {
+		opt(dp)
+	}
+
+	return dp
+}
+
+func (p *DailyProvider) GetAnomalies(ctx context.Context, orgID valuer.UUID, req *AnomaliesRequest) (*AnomaliesResponse, error) {
+	req.Seasonality = SeasonalityDaily
+	return p.getAnomalies(ctx, orgID, req)
+}

ee/anomaly/hourly.go

@@ -0,0 +1,35 @@
+package anomaly
+
+import (
+	"context"
+
+	"github.com/SigNoz/signoz/pkg/valuer"
+)
+
+type HourlyProvider struct {
+	BaseSeasonalProvider
+}
+
+var _ BaseProvider = (*HourlyProvider)(nil)
+
+func (hp *HourlyProvider) GetBaseSeasonalProvider() *BaseSeasonalProvider {
+	return &hp.BaseSeasonalProvider
+}
+
+// NewHourlyProvider now uses the generic option type
+func NewHourlyProvider(opts ...GenericProviderOption[*HourlyProvider]) *HourlyProvider {
+	hp := &HourlyProvider{
+		BaseSeasonalProvider: BaseSeasonalProvider{},
+	}
+
+	for _, opt := range opts {
+		opt(hp)
+	}
+
+	return hp
+}
+
+func (p *HourlyProvider) GetAnomalies(ctx context.Context, orgID valuer.UUID, req *AnomaliesRequest) (*AnomaliesResponse, error) {
+	req.Seasonality = SeasonalityHourly
+	return p.getAnomalies(ctx, orgID, req)
+}

ee/anomaly/params.go

@@ -0,0 +1,223 @@
+package anomaly
+
+import (
+	"time"
+
+	qbtypes "github.com/SigNoz/signoz/pkg/types/querybuildertypes/querybuildertypesv5"
+	"github.com/SigNoz/signoz/pkg/valuer"
+)
+
+type Seasonality struct{ valuer.String }
+
+var (
+	SeasonalityHourly = Seasonality{valuer.NewString("hourly")}
+	SeasonalityDaily  = Seasonality{valuer.NewString("daily")}
+	SeasonalityWeekly = Seasonality{valuer.NewString("weekly")}
+)
+
+var (
+	oneWeekOffset = uint64(24 * 7 * time.Hour.Milliseconds())
+	oneDayOffset  = uint64(24 * time.Hour.Milliseconds())
+	oneHourOffset = uint64(time.Hour.Milliseconds())
+	fiveMinOffset = uint64(5 * time.Minute.Milliseconds())
+)
+
+func (s Seasonality) IsValid() bool {
+	switch s {
+	case SeasonalityHourly, SeasonalityDaily, SeasonalityWeekly:
+		return true
+	default:
+		return false
+	}
+}
+
+type AnomaliesRequest struct {
+	Params      qbtypes.QueryRangeRequest
+	Seasonality Seasonality
+}
+
+type AnomaliesResponse struct {
+	Results []*qbtypes.TimeSeriesData
+}
+
+// anomalyParams is the params for anomaly detection
+// prediction = avg(past_period_query) + avg(current_season_query) - mean(past_season_query, past2_season_query, past3_season_query)
+//
+//	                  ^                                  ^
+//		              |                                  |
+//			(rounded value for past peiod)    +      (seasonal growth)
+//
+// score = abs(value - prediction) / stddev (current_season_query)
+type anomalyQueryParams struct {
+	// CurrentPeriodQuery is the query range params for period user is looking at or eval window
+	// Example: (now-5m, now), (now-30m, now), (now-1h, now)
+	// The results obtained from this query are used to compare with predicted values
+	// and to detect anomalies
+	CurrentPeriodQuery qbtypes.QueryRangeRequest
+	// PastPeriodQuery is the query range params for past period of seasonality
+	// Example: For weekly seasonality, (now-1w-5m, now-1w)
+	//        : For daily seasonality, (now-1d-5m, now-1d)
+	//        : For hourly seasonality, (now-1h-5m, now-1h)
+	PastPeriodQuery qbtypes.QueryRangeRequest
+	// CurrentSeasonQuery is the query range params for current period (seasonal)
+	// Example: For weekly seasonality, this is the query range params for the (now-1w-5m, now)
+	//        : For daily seasonality, this is the query range params for the (now-1d-5m, now)
+	//        : For hourly seasonality, this is the query range params for the (now-1h-5m, now)
+	CurrentSeasonQuery qbtypes.QueryRangeRequest
+	// PastSeasonQuery is the query range params for past seasonal period to the current season
+	// Example: For weekly seasonality, this is the query range params for the (now-2w-5m, now-1w)
+	//        : For daily seasonality, this is the query range params for the (now-2d-5m, now-1d)
+	//        : For hourly seasonality, this is the query range params for the (now-2h-5m, now-1h)
+	PastSeasonQuery qbtypes.QueryRangeRequest
+	// Past2SeasonQuery is the query range params for past 2 seasonal period to the current season
+	// Example: For weekly seasonality, this is the query range params for the (now-3w-5m, now-2w)
+	//        : For daily seasonality, this is the query range params for the (now-3d-5m, now-2d)
+	//        : For hourly seasonality, this is the query range params for the (now-3h-5m, now-2h)
+	Past2SeasonQuery qbtypes.QueryRangeRequest
+	// Past3SeasonQuery is the query range params for past 3 seasonal period to the current season
+	// Example: For weekly seasonality, this is the query range params for the (now-4w-5m, now-3w)
+	//        : For daily seasonality, this is the query range params for the (now-4d-5m, now-3d)
+	//        : For hourly seasonality, this is the query range params for the (now-4h-5m, now-3h)
+	Past3SeasonQuery qbtypes.QueryRangeRequest
+}
+
+func prepareAnomalyQueryParams(req qbtypes.QueryRangeRequest, seasonality Seasonality) *anomalyQueryParams {
+	start := req.Start
+	end := req.End
+
+	currentPeriodQuery := qbtypes.QueryRangeRequest{
+		Start:          start,
+		End:            end,
+		RequestType:    qbtypes.RequestTypeTimeSeries,
+		CompositeQuery: req.CompositeQuery,
+		NoCache:        false,
+	}
+
+	var pastPeriodStart, pastPeriodEnd uint64
+
+	switch seasonality {
+	// for one week period, we fetch the data from the past week with 5 min offset
+	case SeasonalityWeekly:
+		pastPeriodStart = start - oneWeekOffset - fiveMinOffset
+		pastPeriodEnd = end - oneWeekOffset
+	// for one day period, we fetch the data from the past day with 5 min offset
+	case SeasonalityDaily:
+		pastPeriodStart = start - oneDayOffset - fiveMinOffset
+		pastPeriodEnd = end - oneDayOffset
+	// for one hour period, we fetch the data from the past hour with 5 min offset
+	case SeasonalityHourly:
+		pastPeriodStart = start - oneHourOffset - fiveMinOffset
+		pastPeriodEnd = end - oneHourOffset
+	}
+
+	pastPeriodQuery := qbtypes.QueryRangeRequest{
+		Start:          pastPeriodStart,
+		End:            pastPeriodEnd,
+		RequestType:    qbtypes.RequestTypeTimeSeries,
+		CompositeQuery: req.CompositeQuery,
+		NoCache:        false,
+	}
+
+	// seasonality growth trend
+	var currentGrowthPeriodStart, currentGrowthPeriodEnd uint64
+	switch seasonality {
+	case SeasonalityWeekly:
+		currentGrowthPeriodStart = start - oneWeekOffset
+		currentGrowthPeriodEnd = start
+	case SeasonalityDaily:
+		currentGrowthPeriodStart = start - oneDayOffset
+		currentGrowthPeriodEnd = start
+	case SeasonalityHourly:
+		currentGrowthPeriodStart = start - oneHourOffset
+		currentGrowthPeriodEnd = start
+	}
+
+	currentGrowthQuery := qbtypes.QueryRangeRequest{
+		Start:          currentGrowthPeriodStart,
+		End:            currentGrowthPeriodEnd,
+		RequestType:    qbtypes.RequestTypeTimeSeries,
+		CompositeQuery: req.CompositeQuery,
+		NoCache:        false,
+	}
+
+	var pastGrowthPeriodStart, pastGrowthPeriodEnd uint64
+	switch seasonality {
+	case SeasonalityWeekly:
+		pastGrowthPeriodStart = start - 2*oneWeekOffset
+		pastGrowthPeriodEnd = start - 1*oneWeekOffset
+	case SeasonalityDaily:
+		pastGrowthPeriodStart = start - 2*oneDayOffset
+		pastGrowthPeriodEnd = start - 1*oneDayOffset
+	case SeasonalityHourly:
+		pastGrowthPeriodStart = start - 2*oneHourOffset
+		pastGrowthPeriodEnd = start - 1*oneHourOffset
+	}
+
+	pastGrowthQuery := qbtypes.QueryRangeRequest{
+		Start:          pastGrowthPeriodStart,
+		End:            pastGrowthPeriodEnd,
+		RequestType:    qbtypes.RequestTypeTimeSeries,
+		CompositeQuery: req.CompositeQuery,
+		NoCache:        false,
+	}
+
+	var past2GrowthPeriodStart, past2GrowthPeriodEnd uint64
+	switch seasonality {
+	case SeasonalityWeekly:
+		past2GrowthPeriodStart = start - 3*oneWeekOffset
+		past2GrowthPeriodEnd = start - 2*oneWeekOffset
+	case SeasonalityDaily:
+		past2GrowthPeriodStart = start - 3*oneDayOffset
+		past2GrowthPeriodEnd = start - 2*oneDayOffset
+	case SeasonalityHourly:
+		past2GrowthPeriodStart = start - 3*oneHourOffset
+		past2GrowthPeriodEnd = start - 2*oneHourOffset
+	}
+
+	past2GrowthQuery := qbtypes.QueryRangeRequest{
+		Start:          past2GrowthPeriodStart,
+		End:            past2GrowthPeriodEnd,
+		RequestType:    qbtypes.RequestTypeTimeSeries,
+		CompositeQuery: req.CompositeQuery,
+		NoCache:        false,
+	}
+
+	var past3GrowthPeriodStart, past3GrowthPeriodEnd uint64
+	switch seasonality {
+	case SeasonalityWeekly:
+		past3GrowthPeriodStart = start - 4*oneWeekOffset
+		past3GrowthPeriodEnd = start - 3*oneWeekOffset
+	case SeasonalityDaily:
+		past3GrowthPeriodStart = start - 4*oneDayOffset
+		past3GrowthPeriodEnd = start - 3*oneDayOffset
+	case SeasonalityHourly:
+		past3GrowthPeriodStart = start - 4*oneHourOffset
+		past3GrowthPeriodEnd = start - 3*oneHourOffset
+	}
+
+	past3GrowthQuery := qbtypes.QueryRangeRequest{
+		Start:          past3GrowthPeriodStart,
+		End:            past3GrowthPeriodEnd,
+		RequestType:    qbtypes.RequestTypeTimeSeries,
+		CompositeQuery: req.CompositeQuery,
+		NoCache:        false,
+	}
+
+	return &anomalyQueryParams{
+		CurrentPeriodQuery: currentPeriodQuery,
+		PastPeriodQuery:    pastPeriodQuery,
+		CurrentSeasonQuery: currentGrowthQuery,
+		PastSeasonQuery:    pastGrowthQuery,
+		Past2SeasonQuery:   past2GrowthQuery,
+		Past3SeasonQuery:   past3GrowthQuery,
+	}
+}
+
+type anomalyQueryResults struct {
+	CurrentPeriodResults []*qbtypes.TimeSeriesData
+	PastPeriodResults    []*qbtypes.TimeSeriesData
+	CurrentSeasonResults []*qbtypes.TimeSeriesData
+	PastSeasonResults    []*qbtypes.TimeSeriesData
+	Past2SeasonResults   []*qbtypes.TimeSeriesData
+	Past3SeasonResults   []*qbtypes.TimeSeriesData
+}

ee/anomaly/provider.go

@@ -0,0 +1,11 @@
+package anomaly
+
+import (
+	"context"
+
+	"github.com/SigNoz/signoz/pkg/valuer"
+)
+
+type Provider interface {
+	GetAnomalies(ctx context.Context, orgID valuer.UUID, req *AnomaliesRequest) (*AnomaliesResponse, error)
+}

ee/anomaly/seasonal.go

@@ -0,0 +1,463 @@
+package anomaly
+
+import (
+	"context"
+	"log/slog"
+	"math"
+
+	"github.com/SigNoz/signoz/pkg/querier"
+	"github.com/SigNoz/signoz/pkg/valuer"
+
+	qbtypes "github.com/SigNoz/signoz/pkg/types/querybuildertypes/querybuildertypesv5"
+)
+
+var (
+	// TODO(srikanthccv): make this configurable?
+	movingAvgWindowSize = 7
+)
+
+// BaseProvider is an interface that includes common methods for all provider types
+type BaseProvider interface {
+	GetBaseSeasonalProvider() *BaseSeasonalProvider
+}
+
+// GenericProviderOption is a generic type for provider options
+type GenericProviderOption[T BaseProvider] func(T)
+
+func WithQuerier[T BaseProvider](querier querier.Querier) GenericProviderOption[T] {
+	return func(p T) {
+		p.GetBaseSeasonalProvider().querier = querier
+	}
+}
+
+func WithLogger[T BaseProvider](logger *slog.Logger) GenericProviderOption[T] {
+	return func(p T) {
+		p.GetBaseSeasonalProvider().logger = logger
+	}
+}
+
+type BaseSeasonalProvider struct {
+	querier querier.Querier
+	logger  *slog.Logger
+}
+
+func (p *BaseSeasonalProvider) getQueryParams(req *AnomaliesRequest) *anomalyQueryParams {
+	if !req.Seasonality.IsValid() {
+		req.Seasonality = SeasonalityDaily
+	}
+	return prepareAnomalyQueryParams(req.Params, req.Seasonality)
+}
+
+func (p *BaseSeasonalProvider) toTSResults(ctx context.Context, resp *qbtypes.QueryRangeResponse) []*qbtypes.TimeSeriesData {
+
+	tsData := []*qbtypes.TimeSeriesData{}
+
+	if resp == nil {
+		p.logger.InfoContext(ctx, "nil response from query range")
+		return tsData
+	}
+
+	for _, item := range resp.Data.Results {
+		if resultData, ok := item.(*qbtypes.TimeSeriesData); ok {
+			tsData = append(tsData, resultData)
+		}
+	}
+
+	return tsData
+}
+
+func (p *BaseSeasonalProvider) getResults(ctx context.Context, orgID valuer.UUID, params *anomalyQueryParams) (*anomalyQueryResults, error) {
+	// TODO(srikanthccv): parallelize this?
+	p.logger.InfoContext(ctx, "fetching results for current period", "anomaly_current_period_query", params.CurrentPeriodQuery)
+	currentPeriodResults, err := p.querier.QueryRange(ctx, orgID, &params.CurrentPeriodQuery)
+	if err != nil {
+		return nil, err
+	}
+
+	p.logger.InfoContext(ctx, "fetching results for past period", "anomaly_past_period_query", params.PastPeriodQuery)
+	pastPeriodResults, err := p.querier.QueryRange(ctx, orgID, &params.PastPeriodQuery)
+	if err != nil {
+		return nil, err
+	}
+
+	p.logger.InfoContext(ctx, "fetching results for current season", "anomaly_current_season_query", params.CurrentSeasonQuery)
+	currentSeasonResults, err := p.querier.QueryRange(ctx, orgID, &params.CurrentSeasonQuery)
+	if err != nil {
+		return nil, err
+	}
+
+	p.logger.InfoContext(ctx, "fetching results for past season", "anomaly_past_season_query", params.PastSeasonQuery)
+	pastSeasonResults, err := p.querier.QueryRange(ctx, orgID, &params.PastSeasonQuery)
+	if err != nil {
+		return nil, err
+	}
+
+	p.logger.InfoContext(ctx, "fetching results for past 2 season", "anomaly_past_2season_query", params.Past2SeasonQuery)
+	past2SeasonResults, err := p.querier.QueryRange(ctx, orgID, &params.Past2SeasonQuery)
+	if err != nil {
+		return nil, err
+	}
+
+	p.logger.InfoContext(ctx, "fetching results for past 3 season", "anomaly_past_3season_query", params.Past3SeasonQuery)
+	past3SeasonResults, err := p.querier.QueryRange(ctx, orgID, &params.Past3SeasonQuery)
+	if err != nil {
+		return nil, err
+	}
+
+	return &anomalyQueryResults{
+		CurrentPeriodResults: p.toTSResults(ctx, currentPeriodResults),
+		PastPeriodResults:    p.toTSResults(ctx, pastPeriodResults),
+		CurrentSeasonResults: p.toTSResults(ctx, currentSeasonResults),
+		PastSeasonResults:    p.toTSResults(ctx, pastSeasonResults),
+		Past2SeasonResults:   p.toTSResults(ctx, past2SeasonResults),
+		Past3SeasonResults:   p.toTSResults(ctx, past3SeasonResults),
+	}, nil
+}
+
+// getMatchingSeries gets the matching series from the query result
+// for the given series
+func (p *BaseSeasonalProvider) getMatchingSeries(_ context.Context, queryResult *qbtypes.TimeSeriesData, series *qbtypes.TimeSeries) *qbtypes.TimeSeries {
+	if queryResult == nil || len(queryResult.Aggregations) == 0 || len(queryResult.Aggregations[0].Series) == 0 {
+		return nil
+	}
+
+	for _, curr := range queryResult.Aggregations[0].Series {
+		currLabelsKey := qbtypes.GetUniqueSeriesKey(curr.Labels)
+		seriesLabelsKey := qbtypes.GetUniqueSeriesKey(series.Labels)
+		if currLabelsKey == seriesLabelsKey {
+			return curr
+		}
+	}
+	return nil
+}
+
+func (p *BaseSeasonalProvider) getAvg(series *qbtypes.TimeSeries) float64 {
+	if series == nil || len(series.Values) == 0 {
+		return 0
+	}
+	var sum float64
+	for _, smpl := range series.Values {
+		sum += smpl.Value
+	}
+	return sum / float64(len(series.Values))
+}
+
+func (p *BaseSeasonalProvider) getStdDev(series *qbtypes.TimeSeries) float64 {
+	if series == nil || len(series.Values) == 0 {
+		return 0
+	}
+	avg := p.getAvg(series)
+	var sum float64
+	for _, smpl := range series.Values {
+		sum += math.Pow(smpl.Value-avg, 2)
+	}
+	return math.Sqrt(sum / float64(len(series.Values)))
+}
+
+// getMovingAvg gets the moving average for the given series
+// for the given window size and start index
+func (p *BaseSeasonalProvider) getMovingAvg(series *qbtypes.TimeSeries, movingAvgWindowSize, startIdx int) float64 {
+	if series == nil || len(series.Values) == 0 {
+		return 0
+	}
+	if startIdx >= len(series.Values)-movingAvgWindowSize {
+		startIdx = int(math.Max(0, float64(len(series.Values)-movingAvgWindowSize)))
+	}
+	var sum float64
+	points := series.Values[startIdx:]
+	windowSize := int(math.Min(float64(movingAvgWindowSize), float64(len(points))))
+	for i := 0; i < windowSize; i++ {
+		sum += points[i].Value
+	}
+	avg := sum / float64(windowSize)
+	return avg
+}
+
+func (p *BaseSeasonalProvider) getMean(floats ...float64) float64 {
+	if len(floats) == 0 {
+		return 0
+	}
+	var sum float64
+	for _, f := range floats {
+		sum += f
+	}
+	return sum / float64(len(floats))
+}
+
+func (p *BaseSeasonalProvider) getPredictedSeries(
+	ctx context.Context,
+	series, prevSeries, currentSeasonSeries, pastSeasonSeries, past2SeasonSeries, past3SeasonSeries *qbtypes.TimeSeries,
+) *qbtypes.TimeSeries {
+	predictedSeries := &qbtypes.TimeSeries{
+		Labels: series.Labels,
+		Values: make([]*qbtypes.TimeSeriesValue, 0),
+	}
+
+	// for each point in the series, get the predicted value
+	// the predicted value is the moving average (with window size = 7) of the previous period series
+	// plus the average of the current season series
+	// minus the mean of the past season series, past2 season series and past3 season series
+	for idx, curr := range series.Values {
+		movingAvg := p.getMovingAvg(prevSeries, movingAvgWindowSize, idx)
+		avg := p.getAvg(currentSeasonSeries)
+		mean := p.getMean(p.getAvg(pastSeasonSeries), p.getAvg(past2SeasonSeries), p.getAvg(past3SeasonSeries))
+		predictedValue := movingAvg + avg - mean
+
+		if predictedValue < 0 {
+			// this should not happen (except when the data has extreme outliers)
+			// we will use the moving avg of the previous period series in this case
+			p.logger.WarnContext(ctx, "predicted value is less than 0 for series", "anomaly_predicted_value", predictedValue, "anomaly_labels", series.Labels)
+			predictedValue = p.getMovingAvg(prevSeries, movingAvgWindowSize, idx)
+		}
+
+		p.logger.DebugContext(ctx, "predicted value for series",
+			"anomaly_moving_avg", movingAvg,
+			"anomaly_avg", avg,
+			"anomaly_mean", mean,
+			"anomaly_labels", series.Labels,
+			"anomaly_predicted_value", predictedValue,
+			"anomaly_curr", curr.Value,
+		)
+		predictedSeries.Values = append(predictedSeries.Values, &qbtypes.TimeSeriesValue{
+			Timestamp: curr.Timestamp,
+			Value:     predictedValue,
+		})
+	}
+
+	return predictedSeries
+}
+
+// getBounds gets the upper and lower bounds for the given series
+// for the given z score threshold
+// moving avg of the previous period series + z score threshold * std dev of the series
+// moving avg of the previous period series - z score threshold * std dev of the series
+func (p *BaseSeasonalProvider) getBounds(
+	series, predictedSeries *qbtypes.TimeSeries,
+	zScoreThreshold float64,
+) (*qbtypes.TimeSeries, *qbtypes.TimeSeries) {
+	upperBoundSeries := &qbtypes.TimeSeries{
+		Labels: series.Labels,
+		Values: make([]*qbtypes.TimeSeriesValue, 0),
+	}
+
+	lowerBoundSeries := &qbtypes.TimeSeries{
+		Labels: series.Labels,
+		Values: make([]*qbtypes.TimeSeriesValue, 0),
+	}
+
+	for idx, curr := range series.Values {
+		upperBound := p.getMovingAvg(predictedSeries, movingAvgWindowSize, idx) + zScoreThreshold*p.getStdDev(series)
+		lowerBound := p.getMovingAvg(predictedSeries, movingAvgWindowSize, idx) - zScoreThreshold*p.getStdDev(series)
+		upperBoundSeries.Values = append(upperBoundSeries.Values, &qbtypes.TimeSeriesValue{
+			Timestamp: curr.Timestamp,
+			Value:     upperBound,
+		})
+		lowerBoundSeries.Values = append(lowerBoundSeries.Values, &qbtypes.TimeSeriesValue{
+			Timestamp: curr.Timestamp,
+			Value:     math.Max(lowerBound, 0),
+		})
+	}
+
+	return upperBoundSeries, lowerBoundSeries
+}
+
+// getExpectedValue gets the expected value for the given series
+// for the given index
+// prevSeriesAvg + currentSeasonSeriesAvg - mean of past season series, past2 season series and past3 season series
+func (p *BaseSeasonalProvider) getExpectedValue(
+	_, prevSeries, currentSeasonSeries, pastSeasonSeries, past2SeasonSeries, past3SeasonSeries *qbtypes.TimeSeries, idx int,
+) float64 {
+	prevSeriesAvg := p.getMovingAvg(prevSeries, movingAvgWindowSize, idx)
+	currentSeasonSeriesAvg := p.getAvg(currentSeasonSeries)
+	pastSeasonSeriesAvg := p.getAvg(pastSeasonSeries)
+	past2SeasonSeriesAvg := p.getAvg(past2SeasonSeries)
+	past3SeasonSeriesAvg := p.getAvg(past3SeasonSeries)
+	return prevSeriesAvg + currentSeasonSeriesAvg - p.getMean(pastSeasonSeriesAvg, past2SeasonSeriesAvg, past3SeasonSeriesAvg)
+}
+
+// getScore gets the anomaly score for the given series
+// for the given index
+// (value - expectedValue) / std dev of the series
+func (p *BaseSeasonalProvider) getScore(
+	series, prevSeries, weekSeries, weekPrevSeries, past2SeasonSeries, past3SeasonSeries *qbtypes.TimeSeries, value float64, idx int,
+) float64 {
+	expectedValue := p.getExpectedValue(series, prevSeries, weekSeries, weekPrevSeries, past2SeasonSeries, past3SeasonSeries, idx)
+	if expectedValue < 0 {
+		expectedValue = p.getMovingAvg(prevSeries, movingAvgWindowSize, idx)
+	}
+	return (value - expectedValue) / p.getStdDev(weekSeries)
+}
+
+// getAnomalyScores gets the anomaly scores for the given series
+// for the given index
+// (value - expectedValue) / std dev of the series
+func (p *BaseSeasonalProvider) getAnomalyScores(
+	series, prevSeries, currentSeasonSeries, pastSeasonSeries, past2SeasonSeries, past3SeasonSeries *qbtypes.TimeSeries,
+) *qbtypes.TimeSeries {
+	anomalyScoreSeries := &qbtypes.TimeSeries{
+		Labels: series.Labels,
+		Values: make([]*qbtypes.TimeSeriesValue, 0),
+	}
+
+	for idx, curr := range series.Values {
+		anomalyScore := p.getScore(series, prevSeries, currentSeasonSeries, pastSeasonSeries, past2SeasonSeries, past3SeasonSeries, curr.Value, idx)
+		anomalyScoreSeries.Values = append(anomalyScoreSeries.Values, &qbtypes.TimeSeriesValue{
+			Timestamp: curr.Timestamp,
+			Value:     anomalyScore,
+		})
+	}
+
+	return anomalyScoreSeries
+}
+
+func (p *BaseSeasonalProvider) getAnomalies(ctx context.Context, orgID valuer.UUID, req *AnomaliesRequest) (*AnomaliesResponse, error) {
+	anomalyParams := p.getQueryParams(req)
+	anomalyQueryResults, err := p.getResults(ctx, orgID, anomalyParams)
+	if err != nil {
+		return nil, err
+	}
+
+	currentPeriodResults := make(map[string]*qbtypes.TimeSeriesData)
+	for _, result := range anomalyQueryResults.CurrentPeriodResults {
+		currentPeriodResults[result.QueryName] = result
+	}
+
+	pastPeriodResults := make(map[string]*qbtypes.TimeSeriesData)
+	for _, result := range anomalyQueryResults.PastPeriodResults {
+		pastPeriodResults[result.QueryName] = result
+	}
+
+	currentSeasonResults := make(map[string]*qbtypes.TimeSeriesData)
+	for _, result := range anomalyQueryResults.CurrentSeasonResults {
+		currentSeasonResults[result.QueryName] = result
+	}
+
+	pastSeasonResults := make(map[string]*qbtypes.TimeSeriesData)
+	for _, result := range anomalyQueryResults.PastSeasonResults {
+		pastSeasonResults[result.QueryName] = result
+	}
+
+	past2SeasonResults := make(map[string]*qbtypes.TimeSeriesData)
+	for _, result := range anomalyQueryResults.Past2SeasonResults {
+		past2SeasonResults[result.QueryName] = result
+	}
+
+	past3SeasonResults := make(map[string]*qbtypes.TimeSeriesData)
+	for _, result := range anomalyQueryResults.Past3SeasonResults {
+		past3SeasonResults[result.QueryName] = result
+	}
+
+	for _, result := range currentPeriodResults {
+		funcs := req.Params.FuncsForQuery(result.QueryName)
+
+		var zScoreThreshold float64
+		for _, f := range funcs {
+			if f.Name == qbtypes.FunctionNameAnomaly {
+				for _, arg := range f.Args {
+					if arg.Name != "z_score_threshold" {
+						continue
+					}
+					value, ok := arg.Value.(float64)
+					if ok {
+						zScoreThreshold = value
+					} else {
+						p.logger.InfoContext(ctx, "z_score_threshold not provided, defaulting")
+						zScoreThreshold = 3
+					}
+					break
+				}
+			}
+		}
+
+		pastPeriodResult, ok := pastPeriodResults[result.QueryName]
+		if !ok {
+			continue
+		}
+		currentSeasonResult, ok := currentSeasonResults[result.QueryName]
+		if !ok {
+			continue
+		}
+		pastSeasonResult, ok := pastSeasonResults[result.QueryName]
+		if !ok {
+			continue
+		}
+		past2SeasonResult, ok := past2SeasonResults[result.QueryName]
+		if !ok {
+			continue
+		}
+		past3SeasonResult, ok := past3SeasonResults[result.QueryName]
+		if !ok {
+			continue
+		}
+
+		// no data;
+		if len(result.Aggregations) == 0 {
+			continue
+		}
+
+		aggOfInterest := result.Aggregations[0]
+
+		for _, series := range aggOfInterest.Series {
+			stdDev := p.getStdDev(series)
+			p.logger.InfoContext(ctx, "calculated standard deviation for series", "anomaly_std_dev", stdDev, "anomaly_labels", series.Labels)
+
+			pastPeriodSeries := p.getMatchingSeries(ctx, pastPeriodResult, series)
+			currentSeasonSeries := p.getMatchingSeries(ctx, currentSeasonResult, series)
+			pastSeasonSeries := p.getMatchingSeries(ctx, pastSeasonResult, series)
+			past2SeasonSeries := p.getMatchingSeries(ctx, past2SeasonResult, series)
+			past3SeasonSeries := p.getMatchingSeries(ctx, past3SeasonResult, series)
+
+			prevSeriesAvg := p.getAvg(pastPeriodSeries)
+			currentSeasonSeriesAvg := p.getAvg(currentSeasonSeries)
+			pastSeasonSeriesAvg := p.getAvg(pastSeasonSeries)
+			past2SeasonSeriesAvg := p.getAvg(past2SeasonSeries)
+			past3SeasonSeriesAvg := p.getAvg(past3SeasonSeries)
+			p.logger.InfoContext(ctx, "calculated mean for series",
+				"anomaly_prev_series_avg", prevSeriesAvg,
+				"anomaly_current_season_series_avg", currentSeasonSeriesAvg,
+				"anomaly_past_season_series_avg", pastSeasonSeriesAvg,
+				"anomaly_past_2season_series_avg", past2SeasonSeriesAvg,
+				"anomaly_past_3season_series_avg", past3SeasonSeriesAvg,
+				"anomaly_labels", series.Labels,
+			)
+
+			predictedSeries := p.getPredictedSeries(
+				ctx,
+				series,
+				pastPeriodSeries,
+				currentSeasonSeries,
+				pastSeasonSeries,
+				past2SeasonSeries,
+				past3SeasonSeries,
+			)
+			aggOfInterest.PredictedSeries = append(aggOfInterest.PredictedSeries, predictedSeries)
+
+			upperBoundSeries, lowerBoundSeries := p.getBounds(
+				series,
+				predictedSeries,
+				zScoreThreshold,
+			)
+			aggOfInterest.UpperBoundSeries = append(aggOfInterest.UpperBoundSeries, upperBoundSeries)
+			aggOfInterest.LowerBoundSeries = append(aggOfInterest.LowerBoundSeries, lowerBoundSeries)
+
+			anomalyScoreSeries := p.getAnomalyScores(
+				series,
+				pastPeriodSeries,
+				currentSeasonSeries,
+				pastSeasonSeries,
+				past2SeasonSeries,
+				past3SeasonSeries,
+			)
+			aggOfInterest.AnomalyScores = append(aggOfInterest.AnomalyScores, anomalyScoreSeries)
+		}
+	}
+
+	results := make([]*qbtypes.TimeSeriesData, 0, len(currentPeriodResults))
+	for _, result := range currentPeriodResults {
+		results = append(results, result)
+	}
+
+	return &AnomaliesResponse{
+		Results: results,
+	}, nil
+}

ee/anomaly/weekly.go

@@ -0,0 +1,34 @@
+package anomaly
+
+import (
+	"context"
+
+	"github.com/SigNoz/signoz/pkg/valuer"
+)
+
+type WeeklyProvider struct {
+	BaseSeasonalProvider
+}
+
+var _ BaseProvider = (*WeeklyProvider)(nil)
+
+func (wp *WeeklyProvider) GetBaseSeasonalProvider() *BaseSeasonalProvider {
+	return &wp.BaseSeasonalProvider
+}
+
+func NewWeeklyProvider(opts ...GenericProviderOption[*WeeklyProvider]) *WeeklyProvider {
+	wp := &WeeklyProvider{
+		BaseSeasonalProvider: BaseSeasonalProvider{},
+	}
+
+	for _, opt := range opts {
+		opt(wp)
+	}
+
+	return wp
+}
+
+func (p *WeeklyProvider) GetAnomalies(ctx context.Context, orgID valuer.UUID, req *AnomaliesRequest) (*AnomaliesResponse, error) {
+	req.Seasonality = SeasonalityWeekly
+	return p.getAnomalies(ctx, orgID, req)
+}

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

@@ -59,7 +59,7 @@ func NewAPIHandler(opts APIHandlerOptions, signoz *signoz.SigNoz) (*APIHandler,
 		LicensingAPI:                  httplicensing.NewLicensingAPI(signoz.Licensing),
 		FieldsAPI:                     fields.NewAPI(signoz.Instrumentation.ToProviderSettings(), signoz.TelemetryStore),
 		Signoz:                        signoz,
-		QuerierAPI:                    querierAPI.NewAPI(signoz.Instrumentation.ToProviderSettings(), signoz.Querier),
+		QuerierAPI:                    querierAPI.NewAPI(signoz.Instrumentation.ToProviderSettings(), signoz.Querier, signoz.Analytics),
 	})
 
 	if err != nil {
@@ -110,6 +110,11 @@ func (ah *APIHandler) RegisterRoutes(router *mux.Router, am *middleware.AuthZ) {
 	// v4
 	router.HandleFunc("/api/v4/query_range", am.ViewAccess(ah.queryRangeV4)).Methods(http.MethodPost)
 
+	// 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/queryrange.go

@@ -2,11 +2,16 @@ package api
 
 import (
 	"bytes"
+	"context"
+	"encoding/json"
 	"fmt"
 	"io"
 	"net/http"
+	"runtime/debug"
 
+	anomalyV2 "github.com/SigNoz/signoz/ee/anomaly"
 	"github.com/SigNoz/signoz/ee/query-service/anomaly"
+	"github.com/SigNoz/signoz/pkg/errors"
 	"github.com/SigNoz/signoz/pkg/http/render"
 	baseapp "github.com/SigNoz/signoz/pkg/query-service/app"
 	"github.com/SigNoz/signoz/pkg/query-service/app/queryBuilder"
@@ -15,6 +20,8 @@ import (
 	"github.com/SigNoz/signoz/pkg/types/authtypes"
 	"github.com/SigNoz/signoz/pkg/valuer"
 	"go.uber.org/zap"
+
+	qbtypes "github.com/SigNoz/signoz/pkg/types/querybuildertypes/querybuildertypesv5"
 )
 
 func (aH *APIHandler) queryRangeV4(w http.ResponseWriter, r *http.Request) {
@@ -136,3 +143,139 @@ func (aH *APIHandler) queryRangeV4(w http.ResponseWriter, r *http.Request) {
 		aH.QueryRangeV4(w, r)
 	}
 }
+
+func extractSeasonality(anomalyQuery *qbtypes.QueryBuilderQuery[qbtypes.MetricAggregation]) anomalyV2.Seasonality {
+	for _, fn := range anomalyQuery.Functions {
+		if fn.Name == qbtypes.FunctionNameAnomaly {
+			for _, arg := range fn.Args {
+				if arg.Name == "seasonality" {
+					if seasonalityStr, ok := arg.Value.(string); ok {
+						switch seasonalityStr {
+						case "weekly":
+							return anomalyV2.SeasonalityWeekly
+						case "hourly":
+							return anomalyV2.SeasonalityHourly
+						}
+					}
+				}
+			}
+		}
+	}
+	return anomalyV2.SeasonalityDaily // default
+}
+
+func createAnomalyProvider(aH *APIHandler, seasonality anomalyV2.Seasonality) anomalyV2.Provider {
+	switch seasonality {
+	case anomalyV2.SeasonalityWeekly:
+		return anomalyV2.NewWeeklyProvider(
+			anomalyV2.WithQuerier[*anomalyV2.WeeklyProvider](aH.Signoz.Querier),
+			anomalyV2.WithLogger[*anomalyV2.WeeklyProvider](aH.Signoz.Instrumentation.Logger()),
+		)
+	case anomalyV2.SeasonalityHourly:
+		return anomalyV2.NewHourlyProvider(
+			anomalyV2.WithQuerier[*anomalyV2.HourlyProvider](aH.Signoz.Querier),
+			anomalyV2.WithLogger[*anomalyV2.HourlyProvider](aH.Signoz.Instrumentation.Logger()),
+		)
+	default:
+		return anomalyV2.NewDailyProvider(
+			anomalyV2.WithQuerier[*anomalyV2.DailyProvider](aH.Signoz.Querier),
+			anomalyV2.WithLogger[*anomalyV2.DailyProvider](aH.Signoz.Instrumentation.Logger()),
+		)
+	}
+}
+
+func (aH *APIHandler) handleAnomalyQuery(ctx context.Context, orgID valuer.UUID, anomalyQuery *qbtypes.QueryBuilderQuery[qbtypes.MetricAggregation], queryRangeRequest qbtypes.QueryRangeRequest) (*anomalyV2.AnomaliesResponse, error) {
+	seasonality := extractSeasonality(anomalyQuery)
+	provider := createAnomalyProvider(aH, seasonality)
+
+	return provider.GetAnomalies(ctx, orgID, &anomalyV2.AnomaliesRequest{Params: queryRangeRequest})
+}
+
+func (aH *APIHandler) queryRangeV5(rw http.ResponseWriter, req *http.Request) {
+
+	bodyBytes, err := io.ReadAll(req.Body)
+	if err != nil {
+		render.Error(rw, errors.NewInvalidInputf(errors.CodeInvalidInput, "failed to read request body: %v", err))
+		return
+	}
+	req.Body = io.NopCloser(bytes.NewBuffer(bodyBytes))
+
+	ctx := req.Context()
+
+	claims, err := authtypes.ClaimsFromContext(ctx)
+	if err != nil {
+		render.Error(rw, err)
+		return
+	}
+
+	var queryRangeRequest qbtypes.QueryRangeRequest
+	if err := json.NewDecoder(req.Body).Decode(&queryRangeRequest); err != nil {
+		render.Error(rw, errors.NewInvalidInputf(errors.CodeInvalidInput, "failed to decode request body: %v", err))
+		return
+	}
+
+	defer func() {
+		if r := recover(); r != nil {
+			stackTrace := string(debug.Stack())
+
+			queryJSON, _ := json.Marshal(queryRangeRequest)
+
+			aH.Signoz.Instrumentation.Logger().ErrorContext(ctx, "panic in QueryRange",
+				"error", r,
+				"user", claims.UserID,
+				"payload", string(queryJSON),
+				"stacktrace", stackTrace,
+			)
+
+			render.Error(rw, errors.NewInternalf(
+				errors.CodeInternal,
+				"Something went wrong on our end. It's not you, it's us. Our team is notified about it. Reach out to support if issue persists.",
+			))
+		}
+	}()
+
+	if err := queryRangeRequest.Validate(); err != nil {
+		render.Error(rw, err)
+		return
+	}
+
+	orgID, err := valuer.NewUUID(claims.OrgID)
+	if err != nil {
+		render.Error(rw, err)
+		return
+	}
+
+	if anomalyQuery, ok := queryRangeRequest.IsAnomalyRequest(); ok {
+		anomalies, err := aH.handleAnomalyQuery(ctx, orgID, anomalyQuery, queryRangeRequest)
+		if err != nil {
+			render.Error(rw, errors.NewInternalf(errors.CodeInternal, "failed to get anomalies: %v", err))
+			return
+		}
+
+		results := []any{}
+		for _, item := range anomalies.Results {
+			results = append(results, item)
+		}
+
+		finalResp := &qbtypes.QueryRangeResponse{
+			Type: queryRangeRequest.RequestType,
+			Data: struct {
+				Results []any `json:"results"`
+			}{
+				Results: results,
+			},
+			Meta: struct {
+				RowsScanned  uint64 `json:"rowsScanned"`
+				BytesScanned uint64 `json:"bytesScanned"`
+				DurationMS   uint64 `json:"durationMs"`
+			}{},
+		}
+
+		render.Success(rw, http.StatusOK, finalResp)
+		return
+	} else {
+		// regular query range request, let the querier handle it
+		req.Body = io.NopCloser(bytes.NewBuffer(bodyBytes))
+		aH.QuerierAPI.QueryRange(rw, req)
+	}
+}

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"
@@ -104,6 +106,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 {
@@ -253,6 +257,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)
@@ -421,6 +426,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 +436,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/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,6 +30,11 @@ import (
 
 	baserules "github.com/SigNoz/signoz/pkg/query-service/rules"
 
+	querierV5 "github.com/SigNoz/signoz/pkg/querier"
+
+	anomalyV2 "github.com/SigNoz/signoz/ee/anomaly"
+
+	qbtypes "github.com/SigNoz/signoz/pkg/types/querybuildertypes/querybuildertypesv5"
 	yaml "gopkg.in/yaml.v2"
 )
 
@@ -47,7 +52,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 +69,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 +104,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 +133,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,9 +161,11 @@ 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()
@@ -156,13 +195,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,7 +250,50 @@ 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)
+		}
+	}
+	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 {
 		smpl, shouldAlert := r.ShouldAlert(*series)
@@ -206,8 +309,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 +338,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 +359,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 +388,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 +406,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 +429,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

ee/query-service/rules/manager.go

@@ -27,6 +27,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),
 		)
@@ -47,7 +49,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),
@@ -69,6 +71,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),
@@ -126,6 +130,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 +149,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 +168,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/.eslintrc.js

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

frontend/.gitignore

@@ -2,3 +2,30 @@
 # Sentry Config File
 .env.sentry-build-plugin
 .qodo
+
+# Playwright
+node_modules/
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/
+/playwright/test-results/
+/playwright/blob-report/
+/playwright/playwright-report/
+
+e2e/test-plan/alerts/
+e2e/test-plan/dashboards/
+e2e/test-plan/exceptions/
+e2e/test-plan/external-apis/
+e2e/test-plan/help-support/
+e2e/test-plan/infrastructure/
+e2e/test-plan/logs/
+e2e/test-plan/messaging-queues/
+e2e/test-plan/metrics/
+e2e/test-plan/navigation/
+e2e/test-plan/onboarding/
+e2e/test-plan/saved-views/
+e2e/test-plan/service-map/
+e2e/test-plan/services/
+e2e/test-plan/traces/
+e2e/test-plan/user-preferences/

frontend/.prettierignore

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

frontend/e2e/test-plan/README.md

@@ -0,0 +1,29 @@
+# SigNoz E2E Test Plan
+
+This directory contains the structured test plan for the SigNoz application. Each subfolder corresponds to a main module or feature area, and contains scenario files for all user journeys, edge cases, and cross-module flows. These documents serve as the basis for generating Playwright MCP-driven E2E tests.
+
+## Structure
+
+- Each main module (e.g., logs, traces, dashboards, alerts, settings, etc.) has its own folder or markdown file.
+- Each file contains detailed scenario templates, including preconditions, step-by-step actions, and expected outcomes.
+- Use these documents to write, review, and update test cases as the application evolves.
+
+## Folders & Files
+
+- `logs/` — Logs module scenarios
+- `traces/` — Traces module scenarios
+- `metrics/` — Metrics module scenarios
+- `dashboards/` — Dashboards module scenarios
+- `alerts/` — Alerts module scenarios
+- `services/` — Services module scenarios
+- `settings/` — Settings and all sub-settings scenarios
+- `onboarding/` — Onboarding and signup flows
+- `navigation/` — Navigation, sidebar, and cross-module flows
+- `exceptions/` — Exception and error handling scenarios
+- `external-apis/` — External API monitoring scenarios
+- `messaging-queues/` — Messaging queue scenarios
+- `infrastructure/` — Infrastructure monitoring scenarios
+- `help-support/` — Help & support scenarios
+- `user-preferences/` — User preferences and personalization scenarios
+- `service-map/` — Service map scenarios
+- `saved-views/` — Saved views scenarios

frontend/e2e/test-plan/settings/README.md

@@ -0,0 +1,16 @@
+# Settings Module Test Plan
+
+This folder contains E2E test scenarios for the Settings module and all sub-settings.
+
+## Scenario Categories
+
+- General settings (org/workspace, branding, version info)
+- Billing settings
+- Members & SSO
+- Custom domain
+- Integrations
+- Notification channels
+- API keys
+- Ingestion
+- Account settings (profile, password, preferences)
+- Keyboard shortcuts

frontend/e2e/test-plan/settings/account-settings.md

@@ -0,0 +1,43 @@
+# Account Settings E2E Scenarios (Updated)
+
+## 1. Update Name
+
+- **Precondition:** User is logged in
+- **Steps:**
+  1. Click 'Update name' button
+  2. Edit name field in the modal/dialog
+  3. Save changes
+- **Expected:** Name is updated in the UI
+
+## 2. Update Email
+
+- **Note:** The email field is not editable in the current UI.
+
+## 3. Reset Password
+
+- **Precondition:** User is logged in
+- **Steps:**
+  1. Click 'Reset password' button
+  2. Complete reset flow (modal/dialog or external flow)
+- **Expected:** Password is reset
+
+## 4. Toggle 'Adapt to my timezone'
+
+- **Precondition:** User is logged in
+- **Steps:**
+  1. Toggle 'Adapt to my timezone' switch
+- **Expected:** Timezone adapts accordingly (UI feedback/confirmation should be checked)
+
+## 5. Toggle Theme (Dark/Light)
+
+- **Precondition:** User is logged in
+- **Steps:**
+  1. Toggle theme radio buttons ('Dark', 'Light Beta')
+- **Expected:** Theme changes
+
+## 6. Toggle Sidebar Always Open
+
+- **Precondition:** User is logged in
+- **Steps:**
+  1. Toggle 'Keep the primary sidebar always open' switch
+- **Expected:** Sidebar remains open/closed as per toggle

frontend/e2e/test-plan/settings/api-keys.md

@@ -0,0 +1,26 @@
+# API Keys E2E Scenarios (Updated)
+
+## 1. Create a New API Key
+
+- **Precondition:** User is admin
+- **Steps:**
+  1. Click 'New Key' button
+  2. Enter details in the modal/dialog
+  3. Click 'Save'
+- **Expected:** API key is created and listed in the table
+
+## 2. Revoke an API Key
+
+- **Precondition:** API key exists
+- **Steps:**
+  1. In the table, locate the API key row
+  2. Click the revoke/delete button (icon button in the Action column)
+  3. Confirm if prompted
+- **Expected:** API key is revoked/removed from the table
+
+## 3. View API Key Usage
+
+- **Precondition:** API key exists
+- **Steps:**
+  1. View the 'Last used' and 'Expired' columns in the table
+- **Expected:** Usage data is displayed for each API key

frontend/e2e/test-plan/settings/billing.md

@@ -0,0 +1,17 @@
+# Billing Settings E2E Scenarios (Updated)
+
+## 1. View Billing Information
+
+- **Precondition:** User is admin
+- **Steps:**
+  1. Navigate to Billing Settings
+  2. Wait for the billing chart/data to finish loading
+- **Expected:**
+  - Billing heading and subheading are displayed
+  - Usage/cost table is visible with columns: Unit, Data Ingested, Price per Unit, Cost (Billing period to date)
+  - "Download CSV" and "Manage Billing" buttons are present and enabled after loading
+  - Test clicking "Download CSV" and "Manage Billing" for expected behavior (e.g., file download, navigation, or modal)
+
+> Note: If these features are expected to trigger specific flows, document the observed behavior for each button.
+
+

frontend/e2e/test-plan/settings/custom-domain.md

@@ -0,0 +1,18 @@
+# Custom Domain E2E Scenarios (Updated)
+
+## 1. Add or Update Custom Domain
+
+- **Precondition:** User is admin
+- **Steps:**
+  1. Click 'Customize team’s URL' button
+  2. In the 'Customize your team’s URL' dialog, enter the preferred subdomain
+  3. Click 'Apply Changes'
+- **Expected:** Domain is set/updated for the team (UI feedback/confirmation should be checked)
+
+## 2. Verify Domain Ownership
+
+- **Note:** No explicit 'Verify' button or flow is present in the current UI. If verification is required, it may be handled automatically or via support.
+
+## 3. Remove a Custom Domain
+
+- **Note:** No explicit 'Remove' button or flow is present in the current UI. The only available action is to update the subdomain.

frontend/e2e/test-plan/settings/general.md

@@ -0,0 +1,31 @@
+# General Settings E2E Scenarios
+
+## 1. View General Settings
+
+- **Precondition:** User is logged in
+- **Steps:**
+  1. Navigate to General Settings
+- **Expected:** General settings are displayed
+
+## 2. Update Organization/Workspace Name
+
+- **Precondition:** User is admin
+- **Steps:**
+  1. Edit organization/workspace name
+  2. Save changes
+- **Expected:** Name is updated and visible
+
+## 3. Update Logo or Branding
+
+- **Precondition:** User is admin
+- **Steps:**
+  1. Upload new logo/branding
+  2. Save changes
+- **Expected:** Branding is updated
+
+## 4. View Version/Build Info
+
+- **Precondition:** User is logged in
+- **Steps:**
+  1. View version/build info section
+- **Expected:** Version/build info is displayed

frontend/e2e/test-plan/settings/ingestion.md

@@ -0,0 +1,20 @@
+# Ingestion E2E Scenarios (Updated)
+
+## 1. View Ingestion Sources
+
+- **Precondition:** User is admin
+- **Steps:**
+  1. Navigate to the Integrations page
+- **Expected:** List of available data sources/integrations is displayed
+
+## 2. Configure Ingestion Sources
+
+- **Precondition:** User is admin
+- **Steps:**
+  1. Click 'Configure' for a data source/integration
+  2. Complete the configuration flow (modal or page, as available)
+- **Expected:** Source is configured (UI feedback/confirmation should be checked)
+
+## 3. Disable/Enable Ingestion
+
+- **Note:** No visible enable/disable toggle for ingestion sources in the current UI. Ingestion is managed via the Integrations configuration flows.

frontend/e2e/test-plan/settings/integrations.md

@@ -0,0 +1,51 @@
+# Integrations E2E Scenarios (Updated)
+
+## 1. View List of Available Integrations
+
+- **Precondition:** User is logged in
+- **Steps:**
+  1. Navigate to Integrations
+- **Expected:** List of integrations is displayed, each with a name, description, and 'Configure' button
+
+## 2. Search Integrations by Name/Type
+
+- **Precondition:** Integrations exist
+- **Steps:**
+  1. Enter search/filter criteria in the 'Search for an integration...' box
+- **Expected:** Only matching integrations are shown
+
+## 3. Connect a New Integration
+
+- **Precondition:** User is admin
+- **Steps:**
+  1. Click 'Configure' for an integration
+  2. Complete the configuration flow (modal or page, as available)
+- **Expected:** Integration is connected/configured (UI feedback/confirmation should be checked)
+
+## 4. Disconnect an Integration
+
+- **Note:** No visible 'Disconnect' button in the main list. This may be available in the configuration flow for a connected integration.
+
+## 5. Configure Integration Settings
+
+- **Note:** Configuration is handled in the flow after clicking 'Configure' for an integration.
+
+## 6. Test Integration Connection
+
+- **Note:** No visible 'Test Connection' button in the main list. This may be available in the configuration flow.
+
+## 7. View Integration Status/Logs
+
+- **Note:** No visible status/logs section in the main list. This may be available in the configuration flow.
+
+## 8. Filter Integrations by Category
+
+- **Note:** No explicit category filter in the current UI, only a search box.
+
+## 9. View Integration Documentation/Help
+
+- **Note:** No visible 'Help/Docs' button in the main list. This may be available in the configuration flow.
+
+## 10. Update Integration Configuration
+
+- **Note:** Configuration is handled in the flow after clicking 'Configure' for an integration.

frontend/e2e/test-plan/settings/keyboard-shortcuts.md

@@ -0,0 +1,19 @@
+# Keyboard Shortcuts E2E Scenarios (Updated)
+
+## 1. View Keyboard Shortcuts
+
+- **Precondition:** User is logged in
+- **Steps:**
+  1. Navigate to Keyboard Shortcuts
+- **Expected:** Shortcuts are displayed in categorized tables (Global, Logs Explorer, Query Builder, Dashboard)
+
+## 2. Customize Keyboard Shortcuts (if supported)
+
+- **Note:** Customization is not available in the current UI. Shortcuts are view-only.
+
+## 3. Use Keyboard Shortcuts for Navigation/Actions
+
+- **Precondition:** User is logged in
+- **Steps:**
+  1. Use shortcut for navigation/action (e.g., shift+s for Services, cmd+enter for running query)
+- **Expected:** Navigation/action is performed as per shortcut

frontend/e2e/test-plan/settings/members-sso.md

@@ -0,0 +1,49 @@
+# Members & SSO E2E Scenarios (Updated)
+
+## 1. Invite a New Member
+
+- **Precondition:** User is admin
+- **Steps:**
+  1. Click 'Invite Members' button
+  2. In the 'Invite team members' dialog, enter email address, name (optional), and select role
+  3. (Optional) Click 'Add another team member' to invite more
+  4. Click 'Invite team members' to send invite(s)
+- **Expected:** Pending invite appears in the 'Pending Invites' table
+
+## 2. Remove a Member
+
+- **Precondition:** User is admin, member exists
+- **Steps:**
+  1. In the 'Members' table, locate the member row
+  2. Click 'Delete' in the Action column
+  3. Confirm removal if prompted
+- **Expected:** Member is removed from the table
+
+## 3. Update Member Roles
+
+- **Precondition:** User is admin, member exists
+- **Steps:**
+  1. In the 'Members' table, locate the member row
+  2. Click 'Edit' in the Action column
+  3. Change role in the edit dialog/modal
+  4. Save changes
+- **Expected:** Member role is updated in the table
+
+## 4. Configure SSO
+
+- **Precondition:** User is admin
+- **Steps:**
+  1. In the 'Authenticated Domains' section, locate the domain row
+  2. Click 'Configure SSO' or 'Edit Google Auth' as available
+  3. Complete SSO provider configuration in the modal/dialog
+  4. Save settings
+- **Expected:** SSO is configured for the domain
+
+## 5. Login via SSO
+
+- **Precondition:** SSO is configured
+- **Steps:**
+  1. Log out from the app
+  2. On the login page, click 'Login with SSO'
+  3. Complete SSO login flow
+- **Expected:** User is logged in via SSO

frontend/e2e/test-plan/settings/notification-channels.md

@@ -0,0 +1,39 @@
+# Notification Channels E2E Scenarios (Updated)
+
+## 1. Add a New Notification Channel
+
+- **Precondition:** User is admin
+- **Steps:**
+  1. Click 'New Alert Channel' button
+  2. In the 'New Notification Channel' form, fill in required fields (Name, Type, Webhook URL, etc.)
+  3. (Optional) Toggle 'Send resolved alerts'
+  4. (Optional) Click 'Test' to send a test notification
+  5. Click 'Save' to add the channel
+- **Expected:** Channel is added and listed in the table
+
+## 2. Test Notification Channel
+
+- **Precondition:** Channel is being created or edited
+- **Steps:**
+  1. In the 'New Notification Channel' or 'Edit Notification Channel' form, click 'Test'
+- **Expected:** Test notification is sent (UI feedback/confirmation should be checked)
+
+## 3. Remove a Notification Channel
+
+- **Precondition:** Channel is added
+- **Steps:**
+  1. In the table, locate the channel row
+  2. Click 'Delete' in the Action column
+  3. Confirm removal if prompted
+- **Expected:** Channel is removed from the table
+
+## 4. Update Notification Channel Settings
+
+- **Precondition:** Channel is added
+- **Steps:**
+  1. In the table, locate the channel row
+  2. Click 'Edit' in the Action column
+  3. In the 'Edit Notification Channel' form, update fields as needed
+  4. (Optional) Click 'Test' to send a test notification
+  5. Click 'Save' to update the channel
+- **Expected:** Settings are updated

frontend/e2e/test-plan/validation-report.md

@@ -0,0 +1,199 @@
+# SigNoz Test Plan Validation Report
+
+This report documents the validation of the E2E test plan against the current live application using Playwright MCP. Each module is reviewed for coverage, gaps, and required updates.
+
+---
+
+## Home Module
+
+- **Coverage:**
+  - Widgets for logs, traces, metrics, dashboards, alerts, services, saved views, onboarding checklist
+  - Quick access buttons: Explore Logs, Create dashboard, Create an alert
+- **Gaps/Updates:**
+  - Add scenarios for checklist interactions (e.g., “I’ll do this later”, progress tracking)
+  - Add scenarios for Saved Views and cross-module links
+  - Add scenario for onboarding checklist completion
+
+---
+
+## Logs Module
+
+- **Coverage:**
+  - Explorer, Pipelines, Views tabs
+  - Filtering by service, environment, severity, host, k8s, etc.
+  - Search, save view, create alert, add to dashboard, export, view mode switching
+- **Gaps/Updates:**
+  - Add scenario for quick filter customization
+  - Add scenario for “Old Explorer” button
+  - Add scenario for frequency chart toggle
+  - Add scenario for “Stage & Run Query” workflow
+
+---
+
+## Traces Module
+
+- **Coverage:**
+  - Tabs: Explorer, Funnels, Views
+  - Filtering by name, error status, duration, environment, function, service, RPC, status code, HTTP, trace ID, etc.
+  - Search, save view, create alert, add to dashboard, export, view mode switching (List, Traces, Time Series, Table)
+  - Pagination, quick filter customization, group by, aggregation
+- **Gaps/Updates:**
+  - Add scenario for quick filter customization
+  - Add scenario for “Stage & Run Query” workflow
+  - Add scenario for all view modes (List, Traces, Time Series, Table)
+  - Add scenario for group by/aggregation
+  - Add scenario for trace detail navigation (clicking on trace row)
+  - Add scenario for Funnels tab (create/edit/delete funnel)
+  - Add scenario for Views tab (manage saved views)
+
+---
+
+## Metrics Module
+
+- **Coverage:**
+  - Tabs: Summary, Explorer, Views
+  - Filtering by metric, type, unit, etc.
+  - Search, save view, add to dashboard, export, view mode switching (chart, table, proportion view)
+  - Pagination, group by, aggregation, custom queries
+- **Gaps/Updates:**
+  - Add scenario for Proportion View in Summary
+  - Add scenario for all view modes (chart, table, proportion)
+  - Add scenario for group by/aggregation
+  - Add scenario for custom queries in Explorer
+  - Add scenario for Views tab (manage saved views)
+
+---
+
+## Dashboards Module
+
+- **Coverage:**
+  - List, search, and filter dashboards
+  - Create new dashboard (button and template link)
+  - Edit, delete, and view dashboard details
+  - Add/edit/delete widgets (implied by dashboard detail)
+  - Pagination through dashboards
+- **Gaps/Updates:**
+  - Add scenario for browsing dashboard templates (external link)
+  - Add scenario for requesting new template
+  - Add scenario for dashboard owner and creation info
+  - Add scenario for dashboard tags and filtering by tags
+  - Add scenario for dashboard sharing (if available)
+  - Add scenario for dashboard image/preview
+
+---
+
+## Messaging Queues Module
+
+- **Coverage:**
+  - Overview tab: queue metrics, filters (Service Name, Span Name, Msg System, Destination, Kind)
+  - Search across all columns
+  - Pagination of queue data
+  - Sync and Share buttons
+  - Tabs for Kafka and Celery
+- **Gaps/Updates:**
+  - Add scenario for Kafka tab (detailed metrics, actions)
+  - Add scenario for Celery tab (detailed metrics, actions)
+  - Add scenario for filter combinations and edge cases
+  - Add scenario for sharing queue data
+  - Add scenario for time range selection
+
+---
+
+## External APIs Module
+
+- **Coverage:**
+  - Accessed via side navigation under MORE
+  - Explorer tab: domain, endpoints, last used, rate, error %, avg. latency
+  - Filters: Deployment Environment, Service Name, Rpc Method, Show IP addresses
+  - Table pagination
+  - Share and Stage & Run Query buttons
+- **Gaps/Updates:**
+  - Add scenario for customizing quick filters
+  - Add scenario for running and staging queries
+  - Add scenario for sharing API data
+  - Add scenario for edge cases in filters and table data
+
+---
+
+## Alerts Module
+
+- **Coverage:**
+  - Alert Rules tab: list, search, create (New Alert), edit, delete, enable/disable, severity, labels, actions
+  - Triggered Alerts tab (visible in tablist)
+  - Configuration tab (visible in tablist)
+  - Table pagination
+- **Gaps/Updates:**
+  - Add scenario for triggered alerts (view, acknowledge, resolve)
+  - Add scenario for alert configuration (settings, integrations)
+  - Add scenario for edge cases in alert creation and management
+  - Add scenario for searching and filtering alerts
+
+---
+
+## Integrations Module
+
+- **Coverage:**
+  - Integrations tab: list, search, configure (e.g., AWS), request new integration
+  - One-click setup for AWS monitoring
+  - Request more integrations (form)
+- **Gaps/Updates:**
+  - Add scenario for configuring integrations (step-by-step)
+  - Add scenario for searching and filtering integrations
+  - Add scenario for requesting new integrations
+  - Add scenario for edge cases (e.g., failed configuration)
+
+---
+
+## Exceptions Module
+
+- **Coverage:**
+  - All Exceptions: list, search, filter (Deployment Environment, Service Name, Host Name, K8s Cluster/Deployment/Namespace, Net Peer Name)
+  - Table: Exception Type, Error Message, Count, Last Seen, First Seen, Application
+  - Pagination
+  - Exception detail links
+  - Share and Stage & Run Query buttons
+- **Gaps/Updates:**
+  - Add scenario for exception detail view
+  - Add scenario for advanced filtering and edge cases
+  - Add scenario for sharing and running queries
+  - Add scenario for error grouping and navigation
+
+---
+
+## Service Map Module
+
+- **Coverage:**
+  - Service Map visualization (main graph)
+  - Filters: environment, resource attributes
+  - Time range selection
+  - Sync and Share buttons
+- **Gaps/Updates:**
+  - Add scenario for interacting with the map (zoom, pan, select service)
+  - Add scenario for filtering and edge cases
+  - Add scenario for sharing the map
+  - Add scenario for time range and environment combinations
+
+---
+
+## Billing Module
+
+- **Coverage:**
+  - Billing overview: cost monitoring, invoices, CSV download (disabled), manage billing (disabled)
+  - Teams Cloud section
+  - Billing table: Unit, Data Ingested, Price per Unit, Cost (Billing period to date)
+- **Gaps/Updates:**
+  - Add scenario for invoice download and management (when enabled)
+  - Add scenario for cost monitoring and edge cases
+  - Add scenario for billing table data validation
+  - Add scenario for permissions and access control
+
+---
+
+## Usage Explorer Module
+
+- **Status:**
+  - Not accessible in the current environment. Removing from test plan flows.
+
+---
+
+## [Next modules will be filled as validation proceeds]

frontend/e2e/tests/settings/account-settings/account-settings-settings.spec.ts

@@ -0,0 +1,42 @@
+import { expect, test } from '@playwright/test';
+
+import { ensureLoggedIn } from '../../../utils/login.util';
+
+test('Account Settings - View and Assert Static Controls', async ({ page }) => {
+	await ensureLoggedIn(page);
+
+	// 1. Open the sidebar settings menu using data-testid
+	await page.getByTestId('settings-nav-item').click();
+
+	// 2. Click Account Settings in the dropdown (by role/name or data-testid if available)
+	await page.getByRole('menuitem', { name: 'Account Settings' }).click();
+
+	// Assert the main tabpanel/heading (confirmed by DOM)
+	await expect(page.getByTestId('settings-page-title')).toBeVisible();
+
+	// Assert General section and controls (confirmed by DOM)
+	await expect(
+		page.getByLabel('My Settings').getByText('General'),
+	).toBeVisible();
+	await expect(page.getByText('Manage your account settings.')).toBeVisible();
+	await expect(page.getByRole('button', { name: 'Update name' })).toBeVisible();
+	await expect(
+		page.getByRole('button', { name: 'Reset password' }),
+	).toBeVisible();
+
+	// Assert User Preferences section and controls (confirmed by DOM)
+	await expect(page.getByText('User Preferences')).toBeVisible();
+	await expect(
+		page.getByText('Tailor the SigNoz console to work according to your needs.'),
+	).toBeVisible();
+	await expect(page.getByText('Select your theme')).toBeVisible();
+
+	const themeSelector = page.getByTestId('theme-selector');
+
+	await expect(themeSelector.getByText('Dark')).toBeVisible();
+	await expect(themeSelector.getByText('Light')).toBeVisible();
+	await expect(themeSelector.getByText('System')).toBeVisible();
+
+	await expect(page.getByTestId('timezone-adaptation-switch')).toBeVisible();
+	await expect(page.getByTestId('side-nav-pinned-switch')).toBeVisible();
+});

frontend/e2e/tests/settings/api-keys/api-keys-settings.spec.ts

@@ -0,0 +1,42 @@
+import { expect, test } from '@playwright/test';
+
+import { ensureLoggedIn } from '../../../utils/login.util';
+
+test('API Keys Settings - View and Interact', async ({ page }) => {
+	await ensureLoggedIn(page);
+
+	// 1. Open the sidebar settings menu using data-testid
+	await page.getByTestId('settings-nav-item').click();
+
+	// 2. Click Account Settings in the dropdown (by role/name or data-testid if available)
+	await page.getByRole('menuitem', { name: 'Account Settings' }).click();
+
+	// Assert the main tabpanel/heading (confirmed by DOM)
+	await expect(page.getByTestId('settings-page-title')).toBeVisible();
+
+	// Focus on the settings page sidenav
+	await page.getByTestId('settings-page-sidenav').focus();
+
+	// Click API Keys tab in the settings sidebar (by data-testid)
+	await page.getByTestId('api-keys').click();
+
+	// Assert heading and subheading
+	await expect(page.getByRole('heading', { name: 'API Keys' })).toBeVisible();
+	await expect(
+		page.getByText('Create and manage API keys for the SigNoz API'),
+	).toBeVisible();
+
+	// Assert presence of New Key button
+	const newKeyBtn = page.getByRole('button', { name: 'New Key' });
+	await expect(newKeyBtn).toBeVisible();
+
+	// Assert table columns
+	await expect(page.getByText('Last used').first()).toBeVisible();
+	await expect(page.getByText('Expired').first()).toBeVisible();
+
+	// Assert at least one API key row with action buttons
+	// Select the first action cell's first button (icon button)
+	const firstActionCell = page.locator('table tr').nth(1).locator('td').last();
+	const deleteBtn = firstActionCell.locator('button').first();
+	await expect(deleteBtn).toBeVisible();
+});

frontend/e2e/tests/settings/billing/billing-settings.spec.ts

@@ -0,0 +1,71 @@
+import { expect, test } from '@playwright/test';
+
+import { ensureLoggedIn } from '../../../utils/login.util';
+
+// E2E: Billing Settings - View Billing Information and Button Actions
+
+test('View Billing Information and Button Actions', async ({
+	page,
+	context,
+}) => {
+	// Ensure user is logged in
+	await ensureLoggedIn(page);
+
+	// 1. Open the sidebar settings menu using data-testid
+	await page.getByTestId('settings-nav-item').click();
+
+	// 2. Click Account Settings in the dropdown (by role/name or data-testid if available)
+	await page.getByRole('menuitem', { name: 'Account Settings' }).click();
+
+	// Assert the main tabpanel/heading (confirmed by DOM)
+	await expect(page.getByTestId('settings-page-title')).toBeVisible();
+
+	// Focus on the settings page sidenav
+	await page.getByTestId('settings-page-sidenav').focus();
+
+	// Click Billing tab in the settings sidebar (by data-testid)
+	await page.getByTestId('billing').click();
+
+	// Wait for billing chart/data to finish loading
+	await page.getByText('loading').first().waitFor({ state: 'hidden' });
+
+	// Assert visibility of subheading (unique)
+	await expect(
+		page.getByText(
+			'Manage your billing information, invoices, and monitor costs.',
+		),
+	).toBeVisible();
+	// Assert visibility of Teams Cloud heading
+	await expect(page.getByRole('heading', { name: 'Teams Cloud' })).toBeVisible();
+
+	// Assert presence of summary and detailed tables
+	await expect(page.getByText('TOTAL SPENT')).toBeVisible();
+	await expect(page.getByText('Data Ingested')).toBeVisible();
+	await expect(page.getByText('Price per Unit')).toBeVisible();
+	await expect(page.getByText('Cost (Billing period to date)')).toBeVisible();
+
+	// Assert presence of alert and note
+	await expect(
+		page.getByText('Your current billing period is from', { exact: false }),
+	).toBeVisible();
+	await expect(
+		page.getByText('Billing metrics are updated once every 24 hours.'),
+	).toBeVisible();
+
+	// Test Download CSV button
+	const [download] = await Promise.all([
+		page.waitForEvent('download'),
+		page.getByRole('button', { name: 'cloud-download Download CSV' }).click(),
+	]);
+	// Optionally, check download file name
+	expect(download.suggestedFilename()).toContain('billing_usage');
+
+	// Test Manage Billing button (opens Stripe in new tab)
+	const [newPage] = await Promise.all([
+		context.waitForEvent('page'),
+		page.getByTestId('header-billing-button').click(),
+	]);
+	await newPage.waitForLoadState();
+	expect(newPage.url()).toContain('stripe.com');
+	await newPage.close();
+});

frontend/e2e/tests/settings/custom-domain/custom-domain-settings.spec.ts

@@ -0,0 +1,52 @@
+import { expect, test } from '@playwright/test';
+
+import { ensureLoggedIn } from '../../../utils/login.util';
+
+test('Custom Domain Settings - View and Interact', async ({ page }) => {
+	await ensureLoggedIn(page);
+
+	// 1. Open the sidebar settings menu using data-testid
+	await page.getByTestId('settings-nav-item').click();
+
+	// 2. Click Account Settings in the dropdown (by role/name or data-testid if available)
+	await page.getByRole('menuitem', { name: 'Account Settings' }).click();
+
+	// Assert the main tabpanel/heading (confirmed by DOM)
+	await expect(page.getByTestId('settings-page-title')).toBeVisible();
+
+	// Focus on the settings page sidenav
+	await page.getByTestId('settings-page-sidenav').focus();
+
+	// Click Custom Domain tab in the settings sidebar (by data-testid)
+	await page.getByTestId('custom-domain').click();
+
+	// Wait for custom domain chart/data to finish loading
+	await page.getByText('loading').first().waitFor({ state: 'hidden' });
+
+	// Assert heading and subheading
+	await expect(
+		page.getByRole('heading', { name: 'Custom Domain Settings' }),
+	).toBeVisible();
+	await expect(
+		page.getByText('Personalize your workspace domain effortlessly.'),
+	).toBeVisible();
+
+	// Assert presence of Customize team’s URL button
+	const customizeBtn = page.getByRole('button', {
+		name: 'Customize team’s URL',
+	});
+	await expect(customizeBtn).toBeVisible();
+	await customizeBtn.click();
+
+	// Assert modal/dialog fields and buttons
+	await expect(
+		page.getByRole('dialog', { name: 'Customize your team’s URL' }),
+	).toBeVisible();
+	await expect(page.getByLabel('Team’s URL subdomain')).toBeVisible();
+	await expect(
+		page.getByRole('button', { name: 'Apply Changes' }),
+	).toBeVisible();
+	await expect(page.getByRole('button', { name: 'Close' })).toBeVisible();
+	// Close the modal
+	await page.getByRole('button', { name: 'Close' }).click();
+});

frontend/e2e/tests/settings/general/general-settings.spec.ts

@@ -0,0 +1,32 @@
+import { expect, test } from '@playwright/test';
+
+import { ensureLoggedIn } from '../../../utils/login.util';
+
+test('View General Settings', async ({ page }) => {
+	await ensureLoggedIn(page);
+
+	// 1. Open the sidebar settings menu using data-testid
+	await page.getByTestId('settings-nav-item').click();
+
+	// 2. Click Account Settings in the dropdown (by role/name or data-testid if available)
+	await page.getByRole('menuitem', { name: 'Account Settings' }).click();
+
+	// Assert the main tabpanel/heading (confirmed by DOM)
+	await expect(page.getByTestId('settings-page-title')).toBeVisible();
+
+	// Focus on the settings page sidenav
+	await page.getByTestId('settings-page-sidenav').focus();
+
+	// Click General tab in the settings sidebar (by data-testid)
+	await page.getByTestId('general').click();
+
+	// Wait for General tab to be visible
+	await page.getByRole('tabpanel', { name: 'General' }).waitFor();
+
+	// Assert visibility of definitive/static elements
+	await expect(page.getByRole('heading', { name: 'Metrics' })).toBeVisible();
+	await expect(page.getByRole('heading', { name: 'Traces' })).toBeVisible();
+	await expect(page.getByRole('heading', { name: 'Logs' })).toBeVisible();
+	await expect(page.getByText('Please')).toBeVisible();
+	await expect(page.getByRole('link', { name: 'email us' })).toBeVisible();
+});

frontend/e2e/tests/settings/ingestion/ingestion-settings.spec.ts

@@ -0,0 +1,48 @@
+import { expect, test } from '@playwright/test';
+
+import { ensureLoggedIn } from '../../../utils/login.util';
+
+test('Ingestion Settings - View and Interact', async ({ page }) => {
+	await ensureLoggedIn(page);
+
+	// 1. Open the sidebar settings menu using data-testid
+	await page.getByTestId('settings-nav-item').click();
+
+	// 2. Click Account Settings in the dropdown (by role/name or data-testid if available)
+	await page.getByRole('menuitem', { name: 'Account Settings' }).click();
+
+	// Assert the main tabpanel/heading (confirmed by DOM)
+	await expect(page.getByTestId('settings-page-title')).toBeVisible();
+
+	// Focus on the settings page sidenav
+	await page.getByTestId('settings-page-sidenav').focus();
+
+	// Click Ingestion tab in the settings sidebar (by data-testid)
+	await page.getByTestId('ingestion').click();
+
+	// Assert heading and subheading (Integrations page)
+	await expect(
+		page.getByRole('heading', { name: 'Integrations' }),
+	).toBeVisible();
+	await expect(
+		page.getByText('Manage Integrations for this workspace'),
+	).toBeVisible();
+
+	// Assert presence of search box
+	await expect(
+		page.getByPlaceholder('Search for an integration...'),
+	).toBeVisible();
+
+	// Assert at least one data source with Configure button
+	const configureBtn = page.getByRole('button', { name: 'Configure' }).first();
+	await expect(configureBtn).toBeVisible();
+
+	// Assert Request more integrations section
+	await expect(
+		page.getByText(
+			"Can't find what you’re looking for? Request more integrations",
+		),
+	).toBeVisible();
+	await expect(page.getByPlaceholder('Enter integration name...')).toBeVisible();
+	await expect(page.getByRole('button', { name: 'Submit' })).toBeVisible();
+});

frontend/e2e/tests/settings/integrations/integrations-settings.spec.ts

@@ -0,0 +1,48 @@
+import { expect, test } from '@playwright/test';
+
+import { ensureLoggedIn } from '../../../utils/login.util';
+
+test('Integrations Settings - View and Interact', async ({ page }) => {
+	await ensureLoggedIn(page);
+
+	// 1. Open the sidebar settings menu using data-testid
+	await page.getByTestId('settings-nav-item').click();
+
+	// 2. Click Account Settings in the dropdown (by role/name or data-testid if available)
+	await page.getByRole('menuitem', { name: 'Account Settings' }).click();
+
+	// Assert the main tabpanel/heading (confirmed by DOM)
+	await expect(page.getByTestId('settings-page-title')).toBeVisible();
+
+	// Focus on the settings page sidenav
+	await page.getByTestId('settings-page-sidenav').focus();
+
+	// Click Integrations tab in the settings sidebar (by data-testid)
+	await page.getByTestId('integrations').click();
+
+	// Assert heading and subheading
+	await expect(
+		page.getByRole('heading', { name: 'Integrations' }),
+	).toBeVisible();
+	await expect(
+		page.getByText('Manage Integrations for this workspace'),
+	).toBeVisible();
+
+	// Assert presence of search box
+	await expect(
+		page.getByPlaceholder('Search for an integration...'),
+	).toBeVisible();
+
+	// Assert at least one integration with Configure button
+	const configureBtn = page.getByRole('button', { name: 'Configure' }).first();
+	await expect(configureBtn).toBeVisible();
+
+	// Assert Request more integrations section
+	await expect(
+		page.getByText(
+			"Can't find what you’re looking for? Request more integrations",
+		),
+	).toBeVisible();
+	await expect(page.getByPlaceholder('Enter integration name...')).toBeVisible();
+	await expect(page.getByRole('button', { name: 'Submit' })).toBeVisible();
+});

frontend/e2e/tests/settings/members-sso/members-sso-settings.spec.ts

@@ -0,0 +1,56 @@
+import { expect, test } from '@playwright/test';
+
+import { ensureLoggedIn } from '../../../utils/login.util';
+
+test('Members & SSO Settings - View and Interact', async ({ page }) => {
+	await ensureLoggedIn(page);
+
+	// 1. Open the sidebar settings menu using data-testid
+	await page.getByTestId('settings-nav-item').click();
+
+	// 2. Click Account Settings in the dropdown (by role/name or data-testid if available)
+	await page.getByRole('menuitem', { name: 'Account Settings' }).click();
+
+	// Assert the main tabpanel/heading (confirmed by DOM)
+	await expect(page.getByTestId('settings-page-title')).toBeVisible();
+
+	// Focus on the settings page sidenav
+	await page.getByTestId('settings-page-sidenav').focus();
+
+	// Click Members & SSO tab in the settings sidebar (by data-testid)
+	await page.getByTestId('members-sso').click();
+
+	// Assert headings and tables
+	await expect(
+		page.getByRole('heading', { name: /Members \(\d+\)/ }),
+	).toBeVisible();
+	await expect(
+		page.getByRole('heading', { name: /Pending Invites \(\d+\)/ }),
+	).toBeVisible();
+	await expect(
+		page.getByRole('heading', { name: 'Authenticated Domains' }),
+	).toBeVisible();
+
+	// Assert Invite Members button is visible and clickable
+	const inviteBtn = page.getByRole('button', { name: /Invite Members/ });
+	await expect(inviteBtn).toBeVisible();
+	await inviteBtn.click();
+	// Assert Invite Members modal/dialog appears (modal title is unique)
+	await expect(page.getByText('Invite team members').first()).toBeVisible();
+	// Close the modal (use unique 'Close' button)
+	await page.getByRole('button', { name: 'Close' }).click();
+
+	// Assert Edit and Delete buttons are present for at least one member
+	const editBtn = page.getByRole('button', { name: /Edit/ }).first();
+	const deleteBtn = page.getByRole('button', { name: /Delete/ }).first();
+	await expect(editBtn).toBeVisible();
+	await expect(deleteBtn).toBeVisible();
+
+	// Assert Add Domains button is visible
+	await expect(page.getByRole('button', { name: /Add Domains/ })).toBeVisible();
+	// Assert Configure SSO or Edit Google Auth button is visible for at least one domain
+	const ssoBtn = page
+		.getByRole('button', { name: /Configure SSO|Edit Google Auth/ })
+		.first();
+	await expect(ssoBtn).toBeVisible();
+});

frontend/e2e/tests/settings/notification-channels/notification-channels-settings.spec.ts

@@ -0,0 +1,57 @@
+import { expect, test } from '@playwright/test';
+
+import { ensureLoggedIn } from '../../../utils/login.util';
+
+test('Notification Channels Settings - View and Interact', async ({ page }) => {
+	await ensureLoggedIn(page);
+
+	// 1. Open the sidebar settings menu using data-testid
+	await page.getByTestId('settings-nav-item').click();
+
+	// 2. Click Account Settings in the dropdown (by role/name or data-testid if available)
+	await page.getByRole('menuitem', { name: 'Account Settings' }).click();
+
+	// Assert the main tabpanel/heading (confirmed by DOM)
+	await expect(page.getByTestId('settings-page-title')).toBeVisible();
+
+	// Focus on the settings page sidenav
+	await page.getByTestId('settings-page-sidenav').focus();
+
+	// Click Notification Channels tab in the settings sidebar (by data-testid)
+	await page.getByTestId('notification-channels').click();
+
+	// Wait for loading to finish
+	await page.getByText('loading').first().waitFor({ state: 'hidden' });
+
+	// Assert presence of New Alert Channel button
+	const newChannelBtn = page.getByRole('button', { name: /New Alert Channel/ });
+	await expect(newChannelBtn).toBeVisible();
+
+	// Assert table columns
+	await expect(page.getByText('Name')).toBeVisible();
+	await expect(page.getByText('Type')).toBeVisible();
+	await expect(page.getByText('Action')).toBeVisible();
+
+	// Click New Alert Channel and assert modal fields/buttons
+	await newChannelBtn.click();
+	await expect(
+		page.getByRole('heading', { name: 'New Notification Channel' }),
+	).toBeVisible();
+	await expect(page.getByLabel('Name')).toBeVisible();
+	await expect(page.getByLabel('Type')).toBeVisible();
+	await expect(page.getByLabel('Webhook URL')).toBeVisible();
+	await expect(
+		page.getByRole('switch', { name: 'Send resolved alerts' }),
+	).toBeVisible();
+	await expect(page.getByRole('button', { name: 'Save' })).toBeVisible();
+	await expect(page.getByRole('button', { name: 'Test' })).toBeVisible();
+	await expect(page.getByRole('button', { name: 'Back' })).toBeVisible();
+	// Close modal
+	await page.getByRole('button', { name: 'Back' }).click();
+
+	// Assert Edit and Delete buttons for at least one channel
+	const editBtn = page.getByRole('button', { name: 'Edit' }).first();
+	const deleteBtn = page.getByRole('button', { name: 'Delete' }).first();
+	await expect(editBtn).toBeVisible();
+	await expect(deleteBtn).toBeVisible();
+});

frontend/e2e/utils/login.util.ts

@@ -0,0 +1,35 @@
+import { Page } from '@playwright/test';
+
+// Read credentials from environment variables
+const username = process.env.LOGIN_USERNAME;
+const password = process.env.LOGIN_PASSWORD;
+const baseURL = process.env.BASE_URL;
+
+/**
+ * Ensures the user is logged in. If not, performs the login steps.
+ * Follows the MCP process step-by-step.
+ */
+export async function ensureLoggedIn(page: Page): Promise<void> {
+	// if already in home page, return
+	if (await page.url().includes('/home')) {
+		return;
+	}
+
+	if (!username || !password) {
+		throw new Error(
+			'E2E_EMAIL and E2E_PASSWORD environment variables must be set.',
+		);
+	}
+
+	await page.goto(`${baseURL}/login`);
+	await page.getByTestId('email').click();
+	await page.getByTestId('email').fill(username);
+	await page.getByTestId('initiate_login').click();
+	await page.getByTestId('password').click();
+	await page.getByTestId('password').fill(password);
+	await page.getByRole('button', { name: 'Login' }).click();
+
+	await page
+		.getByText('Hello there, Welcome to your')
+		.waitFor({ state: 'visible' });
+}

frontend/jest.config.ts

@@ -25,7 +25,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|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",
@@ -36,6 +38,7 @@
 		"@mdx-js/loader": "2.3.0",
 		"@mdx-js/react": "2.3.0",
 		"@monaco-editor/react": "^4.3.1",
+		"@playwright/test": "1.54.1",
 		"@radix-ui/react-tabs": "1.0.4",
 		"@radix-ui/react-tooltip": "1.0.7",
 		"@sentry/react": "8.41.0",
@@ -43,6 +46,9 @@
 		"@signozhq/design-tokens": "1.1.4",
 		"@tanstack/react-table": "8.20.6",
 		"@tanstack/react-virtual": "3.11.2",
+		"@uiw/codemirror-theme-github": "4.24.1",
+		"@uiw/codemirror-theme-copilot": "4.23.11",
+		"@uiw/react-codemirror": "4.23.10",
 		"@uiw/react-md-editor": "3.23.5",
 		"@visx/group": "3.3.0",
 		"@visx/hierarchy": "3.12.0",
@@ -52,6 +58,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",
@@ -235,7 +242,7 @@
 		"sharp": "^0.33.4",
 		"ts-jest": "^27.1.5",
 		"ts-node": "^10.2.1",
-		"typescript-plugin-css-modules": "5.0.1",
+		"typescript-plugin-css-modules": "5.2.0",
 		"webpack-bundle-analyzer": "^4.5.0",
 		"webpack-cli": "^5.1.4"
 	},
@@ -258,6 +265,7 @@
 		"cookie": "^0.7.1",
 		"serialize-javascript": "6.0.2",
 		"prismjs": "1.30.0",
-		"got": "11.8.5"
+		"got": "11.8.5",
+		"form-data": "4.0.4"
 	}
 }

frontend/playwright.config.ts

@@ -0,0 +1,95 @@
+import { defineConfig, devices } from '@playwright/test';
+import dotenv from 'dotenv';
+import path from 'path';
+
+// Read from ".env" file.
+dotenv.config({ path: path.resolve(__dirname, '.env') });
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// import dotenv from 'dotenv';
+// import path from 'path';
+// dotenv.config({ path: path.resolve(__dirname, '.env') });
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+	testDir: './e2e/tests',
+	/* Run tests in files in parallel */
+	fullyParallel: true,
+	/* Fail the build on CI if you accidentally left test.only in the source code. */
+	forbidOnly: !!process.env.CI,
+	/* Retry on CI only */
+	retries: process.env.CI ? 2 : 0,
+	/* Run tests in parallel even in CI - optimized for GitHub Actions free tier */
+	workers: process.env.CI ? 2 : undefined,
+	/* Reporter to use. See https://playwright.dev/docs/test-reporters */
+	reporter: 'html',
+	/* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+	use: {
+		/* Base URL to use in actions like `await page.goto('/')`. */
+		baseURL:
+			process.env.SIGNOZ_E2E_BASE_URL || 'https://app.us.staging.signoz.cloud',
+
+		/* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+		trace: 'on-first-retry',
+		colorScheme: 'dark',
+		locale: 'en-US',
+		viewport: { width: 1280, height: 720 },
+	},
+
+	/* Configure projects for major browsers */
+	projects: [
+		{
+			name: 'chromium',
+			use: {
+				launchOptions: { args: ['--start-maximized'] },
+				viewport: null,
+				colorScheme: 'dark',
+				locale: 'en-US',
+				baseURL: 'https://app.us.staging.signoz.cloud',
+				trace: 'on-first-retry',
+			},
+		},
+
+		{
+			name: 'firefox',
+			use: { ...devices['Desktop Firefox'] },
+		},
+
+		{
+			name: 'webkit',
+			use: { ...devices['Desktop Safari'] },
+		},
+
+		/* Test against mobile viewports. */
+		// {
+		//   name: 'Mobile Chrome',
+		//   use: { ...devices['Pixel 5'] },
+		// },
+		// {
+		//   name: 'Mobile Safari',
+		//   use: { ...devices['iPhone 12'] },
+		// },
+
+		/* Test against branded browsers. */
+		// {
+		//   name: 'Microsoft Edge',
+		//   use: { ...devices['Desktop Edge'], channel: 'msedge' },
+		// },
+		// {
+		//   name: 'Google Chrome',
+		//   use: { ...devices['Desktop Chrome'], channel: 'chrome' },
+		// },
+	],
+
+	/* Run your local dev server before starting the tests */
+	// webServer: {
+	//   command: 'npm run start',
+	//   url: 'http://localhost:3000',
+	//   reuseExistingServer: !process.env.CI,
+	// },
+});

frontend/prompts/generate-e2e-test.md

@@ -0,0 +1,16 @@
+RULE: All test code for this repo must be generated by following the step-by-step Playwright MCP process as described below.
+
+- You are a playwright test generator.
+- You are given a scenario and you need to generate a playwright test for it.
+- Use login util if not logged in.
+- DO NOT generate test code based on the scenario alone.
+- DO run steps one by one using the tools provided by the Playwright MCP.
+- Only after all steps are completed, emit a Playwright TypeScript test that uses @playwright/test based on message history
+- Gather correct selectors before writing the test
+- DO NOT valiate for dynamic content in the tests, only validate for the correctness with meta data
+- Always inspect the DOM at each navigation or interaction step to determine the correct selector for the next action. Do not assume selectors, confirm via inspection before proceeding.
+- Assert visibility of definitive/static elements in the UI (such as labels, headings, or section titles) rather than dynamic values or content that may change between runs.
+- Save generated test file in the tests directory
+- Execute the test file and iterate until the test passes
+
+

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

@@ -0,0 +1,34 @@
+import { ApiBaseInstance } from 'api';
+import { ErrorResponse, SuccessResponse } 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<SuccessResponse<FieldKeyResponse> | ErrorResponse> => {
+	const params: Record<string, string> = {};
+
+	if (signal) {
+		params.signal = signal;
+	}
+
+	if (name) {
+		params.name = name;
+	}
+
+	const response = await ApiBaseInstance.get('/fields/keys', { params });
+
+	return {
+		statusCode: 200,
+		error: null,
+		message: response.data.status,
+		payload: response.data.data,
+	};
+};
+
+export default getFieldKeys;

frontend/src/api/dynamicVariables/getFieldValues.ts

@@ -0,0 +1,63 @@
+import { ApiBaseInstance } from 'api';
+import { ErrorResponse, SuccessResponse } 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
+ */
+export const getFieldValues = async (
+	signal?: 'traces' | 'logs' | 'metrics',
+	name?: string,
+	value?: string,
+	startUnixMilli?: number,
+	endUnixMilli?: number,
+): Promise<SuccessResponse<FieldValueResponse> | ErrorResponse> => {
+	const params: Record<string, string> = {};
+
+	if (signal) {
+		params.signal = signal;
+	}
+
+	if (name) {
+		params.name = name;
+	}
+
+	if (value) {
+		params.value = value;
+	}
+
+	if (startUnixMilli) {
+		params.startUnixMilli = Math.floor(startUnixMilli / 1000000).toString();
+	}
+
+	if (endUnixMilli) {
+		params.endUnixMilli = Math.floor(endUnixMilli / 1000000).toString();
+	}
+
+	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.values(response.data.data.values).forEach((valueArray: any) => {
+			if (Array.isArray(valueArray)) {
+				allValues.push(...valueArray.map(String));
+			}
+		});
+
+		// Add a normalized values array to the response
+		response.data.data.normalizedValues = allValues;
+	}
+
+	return {
+		statusCode: 200,
+		error: null,
+		message: response.data.status,
+		payload: response.data.data,
+	};
+};
+
+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/v5/queryRange/constants.ts

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

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

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

@@ -0,0 +1,450 @@
+/* eslint-disable sonarjs/cognitive-complexity */
+import { PANEL_TYPES } from 'constants/queryBuilder';
+import { GetQueryResultsProps } from 'lib/dashboard/getQueryResults';
+import getStartEndRangeTime from 'lib/getStartEndRangeTime';
+import { mapQueryDataToApi } from 'lib/newQueryBuilder/queryBuilderMappers/mapQueryDataToApi';
+import { isEmpty } from 'lodash-es';
+import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
+import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
+import {
+	BaseBuilderQuery,
+	FieldContext,
+	FieldDataType,
+	FunctionName,
+	GroupByKey,
+	Having,
+	LogAggregation,
+	MetricAggregation,
+	OrderBy,
+	QueryEnvelope,
+	QueryFunction,
+	QueryRangePayloadV5,
+	QueryType,
+	RequestType,
+	TelemetryFieldKey,
+	TraceAggregation,
+	VariableItem,
+} from 'types/api/v5/queryRange';
+import { EQueryType } from 'types/common/dashboard';
+import { DataSource } from 'types/common/queryBuilder';
+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';
+}
+
+/**
+ * Creates base spec for builder queries
+ */
+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 || undefined,
+		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 => ({
+						name: column.name ?? column.key,
+						fieldDataType:
+							column?.fieldDataType ?? (column?.dataType as FieldDataType),
+						fieldContext: column?.fieldContext ?? (column?.type as FieldContext),
+						signal: column?.signal ?? undefined,
+					}),
+			  ),
+	};
+}
+// Utility to parse aggregation expressions with optional alias
+export function parseAggregations(
+	expression: string,
+): { expression: string; alias?: string }[] {
+	const result: { expression: string; alias?: string }[] = [];
+	// 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];
+		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 isEmpty(parseAggregations(queryData.aggregations?.[0].expression))
+			? [{ expression: 'count()' }]
+			: parseAggregations(queryData.aggregations?.[0].expression);
+	}
+
+	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,
+			};
+		},
+	);
+}
+
+/**
+ * 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,
+}: GetQueryResultsProps): PrepareQueryRangePayloadV5Result => {
+	let legendMap: Record<string, string> = {};
+	const requestType = mapPanelTypeToRequestType(graphType);
+	let queries: QueryEnvelope[] = [];
+
+	switch (query.queryType) {
+		case EQueryType.QUERY_BUILDER: {
+			const { queryData: data, queryFormulas } = query.builder;
+			const currentQueryData = mapQueryDataToApi(data, 'queryName', tableParams);
+			const currentFormulas = mapQueryDataToApi(queryFormulas, 'queryName');
+
+			// Combine legend maps
+			legendMap = {
+				...currentQueryData.newLegendMap,
+				...currentFormulas.newLegendMap,
+			};
+
+			// Convert builder queries
+			const builderQueries = convertBuilderQueriesToV5(
+				currentQueryData.data,
+				requestType,
+				graphType,
+			);
+
+			// Convert formulas as separate query type
+			const formulaQueries = 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,
+							}),
+						),
+					},
+				}),
+			);
+
+			// Combine both types
+			queries = [...builderQueries, ...formulaQueries];
+			break;
+		}
+		case EQueryType.PROM: {
+			const promQueries = reduceQueriesToObject(query[query.queryType]);
+			queries = convertPromQueriesToV5(promQueries.queries);
+			legendMap = promQueries.legends;
+			break;
+		}
+		case EQueryType.CLICKHOUSE: {
+			const chQueries = reduceQueriesToObject(query[query.queryType]);
+			queries = convertClickHouseQueriesToV5(chQueries.queries);
+			legendMap = chQueries.legends;
+			break;
+		}
+		default:
+			break;
+	}
+
+	// Calculate time range
+	const { start, end } = getStartEndRangeTime({
+		type: selectedTime,
+		interval: globalSelectedInterval,
+	});
+
+	// Create V5 payload
+	const queryPayload: QueryRangePayloadV5 = {
+		schemaVersion: 'v1',
+		start: startTime ? startTime * 1e3 : parseInt(start, 10) * 1e3,
+		end: endTime ? endTime * 1e3 : parseInt(end, 10) * 1e3,
+		requestType,
+		compositeQuery: {
+			queries,
+		},
+		formatOptions: {
+			formatTableResultForUI:
+				!!formatForWeb ||
+				(originalGraphType
+					? originalGraphType === PANEL_TYPES.TABLE
+					: graphType === PANEL_TYPES.TABLE),
+			fillGaps: fillGaps || false,
+		},
+		variables: Object.entries(variables).reduce((acc, [key, value]) => {
+			acc[key] = { value };
+			return acc;
+		}, {} as Record<string, VariableItem>),
+	};
+
+	return { legendMap, queryPayload };
+};

frontend/src/api/v5/v5.ts

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

frontend/src/components/CeleryTask/CeleryUtils.ts

@@ -64,7 +64,8 @@ export function applyCeleryFilterOnWidgetData(
 								...queryItem,
 								filters: {
 									...queryItem.filters,
-									items: [...queryItem.filters.items, ...filters],
+									items: [...(queryItem.filters?.items || []), ...filters],
+									op: queryItem.filters?.op || 'AND',
 								},
 						  }
 						: queryItem,

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

@@ -118,12 +118,6 @@ function ChangelogModal({ changelog, onClose }: Props): JSX.Element {
 				<div
 					className={cx('changelog-modal-footer', hasScroll && 'scroll-available')}
 				>
-					{changelog?.features && changelog.features.length > 0 && (
-						<span className="changelog-modal-footer-label">
-							{changelog.features.length} new&nbsp;
-							{changelog.features.length > 1 ? 'features' : 'feature'}
-						</span>
-					)}
 					{!isCloudUser && (
 						<div className="changelog-modal-footer-ctas">
 							<Button type="default" icon={<CloseOutlined />} onClick={onClose}>

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

@@ -137,5 +137,11 @@
 		h6 {
 			color: var(--text-ink-500);
 		}
+
+		code {
+			background-color: var(--bg-vanilla-300);
+			border: 1px solid var(--bg-vanilla-300);
+			color: var(--text-ink-500);
+		}
 	}
 }

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

@@ -94,6 +94,8 @@ const Graph = forwardRef<ToggleGraphProps | undefined, GraphProps>(
 			containerHeight,
 			onDragSelect,
 			dragSelectColor,
+			minTime,
+			maxTime,
 		},
 		ref,
 		// eslint-disable-next-line sonarjs/cognitive-complexity
@@ -105,7 +107,7 @@ const Graph = forwardRef<ToggleGraphProps | undefined, GraphProps>(
 		const { timezone } = useTimezone();
 
 		const currentTheme = isDarkMode ? 'dark' : 'light';
-		const xAxisTimeUnit = useXAxisTimeUnit(data); // Computes the relevant time unit for x axis by analyzing the time stamp data
+		const xAxisTimeUnit = useXAxisTimeUnit(data, minTime, maxTime); // Computes the relevant time unit for x axis based on data or provided time range
 
 		const lineChartRef = useRef<Chart>();
 
@@ -167,6 +169,8 @@ const Graph = forwardRef<ToggleGraphProps | undefined, GraphProps>(
 					onClickHandler,
 					data,
 					timezone,
+					minTime,
+					maxTime,
 				);
 
 				const chartHasData = hasData(data);
@@ -202,6 +206,8 @@ const Graph = forwardRef<ToggleGraphProps | undefined, GraphProps>(
 			onClickHandler,
 			data,
 			timezone,
+			minTime,
+			maxTime,
 			name,
 			type,
 		]);
@@ -236,6 +242,8 @@ Graph.defaultProps = {
 	containerHeight: '90%',
 	onDragSelect: undefined,
 	dragSelectColor: undefined,
+	minTime: undefined,
+	maxTime: undefined,
 };
 
 Graph.displayName = 'Graph';

frontend/src/components/Graph/types.ts

@@ -59,6 +59,8 @@ export interface GraphProps {
 	containerHeight?: string | number;
 	onDragSelect?: (start: number, end: number) => void;
 	dragSelectColor?: string;
+	minTime?: number;
+	maxTime?: number;
 	ref?: ForwardedRef<ToggleGraphProps | undefined>;
 }
 

frontend/src/components/Graph/utils.ts

@@ -53,6 +53,8 @@ export const getGraphOptions = (
 	onClickHandler: GraphOnClickHandler | undefined,
 	data: ChartData,
 	timezone: Timezone,
+	minTime?: number,
+	maxTime?: number,
 	// eslint-disable-next-line sonarjs/cognitive-complexity
 ): CustomChartOptions => ({
 	animation: {
@@ -62,33 +64,35 @@ export const getGraphOptions = (
 	maintainAspectRatio: false,
 	interaction: {
 		mode: 'index',
-		intersect: false,
+		intersect: true,
 	},
 	plugins: {
-		annotation: staticLine
+		...(staticLine
 			? {
-					annotations: [
-						{
-							type: 'line',
-							yMin: staticLine.yMin,
-							yMax: staticLine.yMax,
-							borderColor: staticLine.borderColor,
-							borderWidth: staticLine.borderWidth,
-							label: {
-								content: staticLine.lineText,
-								enabled: true,
-								font: {
-									size: 10,
+					annotation: {
+						annotations: [
+							{
+								type: 'line',
+								yMin: staticLine.yMin,
+								yMax: staticLine.yMax,
+								borderColor: staticLine.borderColor,
+								borderWidth: staticLine.borderWidth,
+								label: {
+									content: staticLine.lineText,
+									enabled: true,
+									font: {
+										size: 10,
+									},
+									borderWidth: 0,
+									position: 'start',
+									backgroundColor: 'transparent',
+									color: staticLine.textColor,
 								},
-								borderWidth: 0,
-								position: 'start',
-								backgroundColor: 'transparent',
-								color: staticLine.textColor,
 							},
-						},
-					],
+						],
+					},
 			  }
-			: undefined,
+			: {}),
 		title: {
 			display: title !== undefined,
 			text: title,
@@ -169,6 +173,12 @@ export const getGraphOptions = (
 			},
 			type: 'time',
 			ticks: { color: getAxisLabelColor(currentTheme) },
+			...(minTime && {
+				min: dayjs(minTime).tz(timezone.value).format(),
+			}),
+			...(maxTime && {
+				max: dayjs(maxTime).tz(timezone.value).format(),
+			}),
 		},
 		y: {
 			stacked: isStacked,
@@ -225,3 +235,9 @@ export const getGraphOptions = (
 		}
 	},
 });
+
+declare module 'chart.js' {
+	interface TooltipPositionerMap {
+		custom: TooltipPositionerFunction<ChartType>;
+	}
+}

frontend/src/components/Graph/xAxisConfig.ts

@@ -88,12 +88,16 @@ export const convertTimeRange = (
 /**
  * Accepts Chart.js data's data-structure and returns the relevant time unit for the axis based on the range of the data.
  */
-export const useXAxisTimeUnit = (data: Chart['data']): IAxisTimeConfig => {
+export const useXAxisTimeUnit = (
+	data: Chart['data'],
+	minTime?: number,
+	maxTime?: number,
+): IAxisTimeConfig => {
 	// Local time is the time range inferred from the input chart data.
 	let localTime: ITimeRange | null;
 	try {
-		let minTime = Number.POSITIVE_INFINITY;
-		let maxTime = Number.NEGATIVE_INFINITY;
+		let minTimeLocal = Number.POSITIVE_INFINITY;
+		let maxTimeLocal = Number.NEGATIVE_INFINITY;
 		data?.labels?.forEach((timeStamp: unknown): void => {
 			const getTimeStamp = (time: Date | number): Date | number | string => {
 				if (time instanceof Date) {
@@ -104,13 +108,13 @@ export const useXAxisTimeUnit = (data: Chart['data']): IAxisTimeConfig => {
 			};
 			const time = getTimeStamp(timeStamp as Date | number);
 
-			minTime = Math.min(parseInt(time.toString(), 10), minTime);
-			maxTime = Math.max(parseInt(time.toString(), 10), maxTime);
+			minTimeLocal = Math.min(parseInt(time.toString(), 10), minTimeLocal);
+			maxTimeLocal = Math.max(parseInt(time.toString(), 10), maxTimeLocal);
 		});
 
 		localTime = {
-			minTime: minTime === Number.POSITIVE_INFINITY ? null : minTime,
-			maxTime: maxTime === Number.NEGATIVE_INFINITY ? null : maxTime,
+			minTime: minTimeLocal === Number.POSITIVE_INFINITY ? null : minTimeLocal,
+			maxTime: maxTimeLocal === Number.NEGATIVE_INFINITY ? null : maxTimeLocal,
 		};
 	} catch (error) {
 		localTime = null;
@@ -122,19 +126,27 @@ export const useXAxisTimeUnit = (data: Chart['data']): IAxisTimeConfig => {
 		(state) => state.globalTime,
 	);
 
-	// Use local time if valid else use the global time range
-	const { maxTime, minTime } = useMemo(() => {
+	// Use explicit minTime/maxTime if provided and valid, otherwise use local time if valid, else use global time range
+	const { maxTime: finalMaxTime, minTime: finalMinTime } = useMemo(() => {
+		// If both minTime and maxTime are explicitly provided and valid, use them
+		if (minTime !== undefined && maxTime !== undefined && minTime <= maxTime) {
+			return { minTime, maxTime };
+		}
+
+		// Otherwise, use local time if valid
 		if (localTime && localTime.maxTime && localTime.minTime) {
 			return {
 				minTime: localTime.minTime,
 				maxTime: localTime.maxTime,
 			};
 		}
+
+		// Fall back to global time range
 		return {
 			minTime: globalTime.minTime / 1e6,
 			maxTime: globalTime.maxTime / 1e6,
 		};
-	}, [globalTime, localTime]);
+	}, [globalTime, localTime, minTime, maxTime]);
 
-	return convertTimeRange(minTime, maxTime);
+	return convertTimeRange(finalMinTime, finalMaxTime);
 };

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

@@ -216,15 +216,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 +238,7 @@ function HostMetricsDetails({
 					op: 'AND',
 					items: [
 						hostNameFilter,
-						...newFilters,
+						...(newFilters || []),
 						...(paginationFilter ? [paginationFilter] : []),
 					].filter((item): item is TagFilterItem => item !== undefined),
 				};
@@ -258,11 +260,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 +276,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 +313,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/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';
@@ -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/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,74 @@
+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;
+	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()}
+			/>
+			{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/LogDetail/LogDetail.interfaces.ts

@@ -20,3 +20,7 @@ export type LogDetailProps = {
 } & Pick<AddToQueryHOCProps, 'onAddToQuery'> &
 	Partial<Pick<ActionItemProps, 'onClickActionItem'>> &
 	Pick<DrawerProps, 'onClose'>;
+
+export type LogDetailInnerProps = LogDetailProps & {
+	log: NonNullable<LogDetailProps['log']>;
+};

frontend/src/components/LogDetail/LogDetails.styles.scss

@@ -62,6 +62,10 @@
 		box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
 	}
 
+	&-query-container {
+		margin-bottom: 16px;
+	}
+
 	.log-detail-drawer__log {
 		width: 100%;
 		display: flex;

frontend/src/components/LogDetail/index.tsx

@@ -2,11 +2,12 @@
 import './LogDetails.styles.scss';
 
 import { Color, Spacing } from '@signozhq/design-tokens';
-import Convert from 'ansi-to-html';
 import { Button, Divider, Drawer, Radio, Tooltip, Typography } from 'antd';
 import { RadioChangeEvent } from 'antd/lib';
 import cx from 'classnames';
 import { LogType } from 'components/Logs/LogStateIndicator/LogStateIndicator';
+import QuerySearch from 'components/QueryBuilderV2/QueryV2/QuerySearch/QuerySearch';
+import { convertExpressionToFilters } from 'components/QueryBuilderV2/utils';
 import { LOCALSTORAGE } from 'constants/localStorage';
 import { QueryParams } from 'constants/query';
 import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
@@ -17,24 +18,23 @@ import JSONView from 'container/LogDetailedView/JsonView';
 import Overview from 'container/LogDetailedView/Overview';
 import {
 	aggregateAttributesResourcesToString,
-	escapeHtml,
+	getSanitizedLogBody,
 	removeEscapeCharacters,
-	unescapeString,
 } from 'container/LogDetailedView/utils';
+import useInitialQuery from 'container/LogsExplorerContext/useInitialQuery';
 import { useOptionsMenu } from 'container/OptionsMenu';
-import dompurify from 'dompurify';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { useNotifications } from 'hooks/useNotifications';
 import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import createQueryParams from 'lib/createQueryParams';
+import { cloneDeep } from 'lodash-es';
 import {
 	BarChart2,
 	Braces,
 	Compass,
 	Copy,
 	Filter,
-	HardHat,
 	Table,
 	TextSelect,
 	X,
@@ -46,15 +46,11 @@ import { AppState } from 'store/reducers';
 import { Query, TagFilter } from 'types/api/queryBuilder/queryBuilderData';
 import { DataSource, StringOperators } from 'types/common/queryBuilder';
 import { GlobalReducer } from 'types/reducer/globalTime';
-import { FORBID_DOM_PURIFY_TAGS } from 'utils/app';
 
 import { RESOURCE_KEYS, VIEW_TYPES, VIEWS } from './constants';
-import { LogDetailProps } from './LogDetail.interfaces';
-import QueryBuilderSearchWrapper from './QueryBuilderSearchWrapper';
+import { LogDetailInnerProps, LogDetailProps } from './LogDetail.interfaces';
 
-const convert = new Convert();
-
-function LogDetail({
+function LogDetailInner({
 	log,
 	onClose,
 	onAddToQuery,
@@ -63,13 +59,16 @@ function LogDetail({
 	selectedTab,
 	isListViewPanel = false,
 	listViewPanelSelectedFields,
-}: LogDetailProps): JSX.Element {
+}: LogDetailInnerProps): JSX.Element {
+	const initialContextQuery = useInitialQuery(log);
+	const [contextQuery, setContextQuery] = useState<Query | undefined>(
+		initialContextQuery,
+	);
 	const [, copyToClipboard] = useCopyToClipboard();
 	const [selectedView, setSelectedView] = useState<VIEWS>(selectedTab);
 
-	const [isFilterVisibile, setIsFilterVisible] = useState<boolean>(false);
+	const [isFilterVisible, setIsFilterVisible] = useState<boolean>(false);
 
-	const [contextQuery, setContextQuery] = useState<Query | undefined>();
 	const [filters, setFilters] = useState<TagFilter | null>(null);
 	const [isEdit, setIsEdit] = useState<boolean>(false);
 	const { stagedQuery, updateAllQueriesOperators } = useQueryBuilder();
@@ -104,7 +103,7 @@ function LogDetail({
 	};
 
 	const handleFilterVisible = (): void => {
-		setIsFilterVisible(!isFilterVisibile);
+		setIsFilterVisible(!isFilterVisible);
 		setIsEdit(!isEdit);
 	};
 
@@ -118,11 +117,7 @@ function LogDetail({
 
 	const htmlBody = useMemo(
 		() => ({
-			__html: convert.toHtml(
-				dompurify.sanitize(unescapeString(escapeHtml(log?.body || '')), {
-					FORBID_TAGS: [...FORBID_DOM_PURIFY_TAGS],
-				}),
-			),
+			__html: getSanitizedLogBody(log?.body || '', { shouldEscapeHtml: true }),
 		}),
 		[log?.body],
 	);
@@ -151,6 +146,44 @@ function LogDetail({
 		safeNavigate(`${ROUTES.LOGS_EXPLORER}?${createQueryParams(queryParams)}`);
 	};
 
+	const handleRunQuery = (expression: string): void => {
+		let updatedContextQuery = cloneDeep(contextQuery);
+
+		if (!updatedContextQuery || !updatedContextQuery.builder) {
+			return;
+		}
+
+		const newFilters: TagFilter = {
+			items: expression ? convertExpressionToFilters(expression) : [],
+			op: 'AND',
+		};
+
+		updatedContextQuery = {
+			...updatedContextQuery,
+			builder: {
+				...updatedContextQuery?.builder,
+				queryData: updatedContextQuery?.builder.queryData.map((queryData) => ({
+					...queryData,
+					filter: {
+						...queryData.filter,
+						expression,
+					},
+					filters: {
+						...queryData.filters,
+						...newFilters,
+						op: queryData.filters?.op ?? 'AND',
+					},
+				})),
+			},
+		};
+
+		setContextQuery(updatedContextQuery);
+
+		if (newFilters) {
+			setFilters(newFilters);
+		}
+	};
+
 	// Only show when opened from infra monitoring page
 	const showOpenInExplorerBtn = useMemo(
 		() => location.pathname?.includes('/infrastructure-monitoring'),
@@ -158,11 +191,6 @@ function LogDetail({
 		[],
 	);
 
-	if (!log) {
-		// eslint-disable-next-line react/jsx-no-useless-fragment
-		return <></>;
-	}
-
 	const logType = log?.attributes_string?.log_level || LogType.INFO;
 
 	return (
@@ -278,18 +306,16 @@ function LogDetail({
 					/>
 				)}
 			</div>
-
-			<QueryBuilderSearchWrapper
-				isEdit={isEdit}
-				log={log}
-				filters={filters}
-				setContextQuery={setContextQuery}
-				setFilters={setFilters}
-				contextQuery={contextQuery}
-				suffixIcon={
-					<HardHat size={12} style={{ paddingRight: Spacing.PADDING_2 }} />
-				}
-			/>
+			{isFilterVisible && contextQuery?.builder.queryData[0] && (
+				<div className="log-detail-drawer-query-container">
+					<QuerySearch
+						onChange={(): void => {}}
+						dataSource={DataSource.LOGS}
+						queryData={contextQuery?.builder.queryData[0]}
+						onRun={handleRunQuery}
+					/>
+				</div>
+			)}
 
 			{selectedView === VIEW_TYPES.OVERVIEW && (
 				<Overview
@@ -325,4 +351,15 @@ function LogDetail({
 	);
 }
 
+function LogDetail(props: LogDetailProps): JSX.Element {
+	const { log } = props;
+	if (!log) {
+		// eslint-disable-next-line react/jsx-no-useless-fragment
+		return <></>;
+	}
+
+	// eslint-disable-next-line react/jsx-props-no-spreading
+	return <LogDetailInner {...(props as LogDetailInnerProps)} />;
+}
+
 export default LogDetail;