feat: add count badges to all SpanDetailsDrawer tabs

For the requestType: Trace, we don't care about the timestamp in the rawRow. 

- Handling Zero timestamp values in the rawData response
- simplify RawRow `map[string]*any` to `map[string]any` and eliminate unnecessary pointer indirection.

.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

@@ -92,7 +92,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"]

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

@@ -174,7 +174,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:v0.90.1
+    image: signoz/signoz:v0.91.0
     command:
       - --config=/root/config/prometheus.yml
     ports:

deploy/docker-swarm/docker-compose.yaml

@@ -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.91.0
     command:
       - --config=/root/config/prometheus.yml
     ports:

deploy/docker/docker-compose.ha.yaml

@@ -177,7 +177,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:${VERSION:-v0.90.1}
+    image: signoz/signoz:${VERSION:-v0.91.0}
     container_name: signoz
     command:
       - --config=/root/config/prometheus.yml

deploy/docker/docker-compose.yaml

@@ -110,7 +110,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:${VERSION:-v0.90.1}
+    image: signoz/signoz:${VERSION:-v0.91.0}
     container_name: signoz
     command:
       - --config=/root/config/prometheus.yml

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 {
+
+	if resp == nil || resp.Data == nil {
+		p.logger.InfoContext(ctx, "nil response from query range")
+	}
+
+	data, ok := resp.Data.(struct {
+		Results  []any    `json:"results"`
+		Warnings []string `json:"warnings"`
+	})
+	if !ok {
+		return nil
+	}
+	tsData := []*qbtypes.TimeSeriesData{}
+	for _, item := range data.Results {
+		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
+		}
+
+		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,9 @@ 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)
+
 	// 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,141 @@ 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"`
+				Warnings []string `json:"warnings"`
+			}{
+				Results:  results,
+				Warnings: make([]string, 0), // TODO(srikanthccv): will there be any warnings here?
+			},
+			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 {
@@ -421,6 +425,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 +435,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,33 @@ 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,
+	}
+	copy(r.Condition().CompositeQuery.Queries, req.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 +249,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 +308,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 +337,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 +358,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 +387,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 +405,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 +428,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,
@@ -54,7 +55,6 @@ module.exports = {
 			},
 		],
 		'react/prop-types': 'off',
-		'react/require-default-props': 'off',
 		'@typescript-eslint/explicit-function-return-type': 'error',
 		'@typescript-eslint/no-var-requires': 'error',
 		'react/no-array-index-key': 'error',

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

@@ -12,7 +12,6 @@ import { LOCALSTORAGE } from 'constants/localStorage';
 import ROUTES from 'constants/routes';
 import AppLayout from 'container/AppLayout';
 import { KeyboardHotkeysProvider } from 'hooks/hotkeys/useKeyboardHotkeys';
-import { useAppRoutes } from 'hooks/useAppRoutes';
 import { useThemeConfig } from 'hooks/useDarkMode';
 import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
 import { NotificationProvider } from 'hooks/useNotifications';
@@ -28,15 +27,19 @@ import { DashboardProvider } from 'providers/Dashboard/Dashboard';
 import { ErrorModalProvider } from 'providers/ErrorModalProvider';
 import { QueryBuilderProvider } from 'providers/QueryBuilder';
 import { Suspense, useCallback, useEffect, useState } from 'react';
-import { Router } from 'react-router-dom';
-import { CompatRouter, Route, Routes } from 'react-router-dom-v5-compat';
+import { Route, Router, Switch } from 'react-router-dom';
+import { CompatRouter } from 'react-router-dom-v5-compat';
 import { LicenseStatus } from 'types/api/licensesV3/getActive';
 import { Userpilot } from 'userpilot';
 import { extractDomain } from 'utils/app';
 
 import { Home } from './pageComponents';
 import PrivateRoute from './Private';
-import { AppRoutes, LIST_LICENSES, SUPPORT_ROUTE } from './routes';
+import defaultRoutes, {
+	AppRoutes,
+	LIST_LICENSES,
+	SUPPORT_ROUTE,
+} from './routes';
 
 function App(): JSX.Element {
 	const themeConfig = useThemeConfig();
@@ -54,7 +57,6 @@ function App(): JSX.Element {
 		featureFlags,
 		org,
 	} = useAppContext();
-	const { routes: defaultRoutes } = useAppRoutes();
 	const [routes, setRoutes] = useState<AppRoutes[]>(defaultRoutes);
 
 	const { hostname, pathname } = window.location;
@@ -211,7 +213,6 @@ function App(): JSX.Element {
 			}
 			setRoutes(updatedRoutes);
 		}
-		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [
 		isLoggedInState,
 		user,
@@ -362,17 +363,6 @@ function App(): JSX.Element {
 		}
 	}
 
-	const renderRoutes = (routes: AppRoutes[]): JSX.Element[] | null => {
-		if (!routes || routes.length === 0) {
-			return null;
-		}
-		return routes.map(({ path, element: Component, children }: AppRoutes) => (
-			<Route key={`${path}`} path={path as string} element={<Component />}>
-				{children && renderRoutes(children)}
-			</Route>
-		));
-	};
-
 	return (
 		<Sentry.ErrorBoundary fallback={<ErrorBoundaryFallback />}>
 			<ConfigProvider theme={themeConfig}>
@@ -389,11 +379,18 @@ function App(): JSX.Element {
 													<AlertRuleProvider>
 														<AppLayout>
 															<Suspense fallback={<Spinner size="large" tip="Loading..." />}>
-																<Routes>
-																	{routes && renderRoutes(routes)}
-																	<Route path="/" element={<Home />} />
-																	<Route path="*" element={<NotFound />} />
-																</Routes>
+																<Switch>
+																	{routes.map(({ path, component, exact }) => (
+																		<Route
+																			key={`${path}`}
+																			exact={exact}
+																			path={path}
+																			component={component}
+																		/>
+																	))}
+																	<Route exact path="/" component={Home} />
+																	<Route path="*" component={NotFound} />
+																</Switch>
 															</Suspense>
 														</AppLayout>
 													</AlertRuleProvider>

frontend/src/AppRoutes/pageComponents.ts

@@ -128,23 +128,11 @@ export const AlertOverview = Loadable(
 );
 
 export const CreateAlertChannelAlerts = Loadable(
-	() =>
-		import(/* webpackChunkName: "Create Channels" */ 'pages/CreateAlertChannels'),
+	() => import(/* webpackChunkName: "Create Channels" */ 'pages/Settings'),
 );
 
-export const AllAlertChannelsPage = Loadable(
-	() =>
-		import(
-			/* webpackChunkName: "All Alert Channels" */ 'pages/AllAlertChannelsSettings'
-		),
-);
-
-export const ChannelsEditPage = Loadable(
-	() =>
-		import(
-			/* webpackChunkName: "Channels Edit Page" */
-			'pages/ChannelsEdit'
-		),
+export const AllAlertChannels = Loadable(
+	() => import(/* webpackChunkName: "All Channels" */ 'pages/Settings'),
 );
 
 export const AllErrors = Loadable(
@@ -159,40 +147,25 @@ export const StatusPage = Loadable(
 	() => import(/* webpackChunkName: "All Status" */ 'pages/Status'),
 );
 
-export const OrganizationSettingsPage = Loadable(
-	() =>
-		import(
-			/* webpackChunkName: "Organization Settings" */ 'pages/OrganizationSettings'
-		),
+export const OrganizationSettings = Loadable(
+	() => import(/* webpackChunkName: "All Settings" */ 'pages/Settings'),
 );
 
 export const IngestionSettings = Loadable(
-	() =>
-		import(
-			/* webpackChunkName: "Ingestion Settings" */ 'pages/IngestionSettings'
-		),
+	() => import(/* webpackChunkName: "Ingestion Settings" */ 'pages/Settings'),
 );
 
 export const APIKeys = Loadable(
-	() => import(/* webpackChunkName: "API Keys Settings" */ 'pages/APIKeys'),
+	() => import(/* webpackChunkName: "All Settings" */ 'pages/Settings'),
 );
 
 export const MySettings = Loadable(
-	() => import(/* webpackChunkName: "All MySettings" */ 'pages/MySettings'),
-);
-
-export const GeneralSettings = Loadable(
-	() =>
-		import(
-			/* webpackChunkName: "General MySettings" */ 'pages/Settings/GeneralSettings'
-		),
+	() => import(/* webpackChunkName: "All MySettings" */ 'pages/Settings'),
 );
 
 export const CustomDomainSettings = Loadable(
 	() =>
-		import(
-			/* webpackChunkName: "Custom Domain Settings" */ 'pages/CustomDomainSettings'
-		),
+		import(/* webpackChunkName: "Custom Domain Settings" */ 'pages/Settings'),
 );
 
 export const Logs = Loadable(
@@ -244,7 +217,7 @@ export const LogsIndexToFields = Loadable(
 );
 
 export const BillingPage = Loadable(
-	() => import(/* webpackChunkName: "BillingPage" */ 'pages/Billing'),
+	() => import(/* webpackChunkName: "BillingPage" */ 'pages/Settings'),
 );
 
 export const SupportPage = Loadable(
@@ -271,7 +244,7 @@ export const WorkspaceAccessRestricted = Loadable(
 );
 
 export const ShortcutsPage = Loadable(
-	() => import(/* webpackChunkName: "ShortcutsPage" */ 'pages/Shortcuts'),
+	() => import(/* webpackChunkName: "ShortcutsPage" */ 'pages/Settings'),
 );
 
 export const InstalledIntegrations = Loadable(

frontend/src/AppRoutes/routes.ts

@@ -1,28 +1,21 @@
 import ROUTES from 'constants/routes';
 import MessagingQueues from 'pages/MessagingQueues';
-import React from 'react';
-import { RouteProps } from 'react-router-dom-v5-compat';
+import { RouteProps } from 'react-router-dom';
 
 import {
 	AlertHistory,
 	AlertOverview,
-	AllAlertChannelsPage,
+	AllAlertChannels,
 	AllErrors,
-	APIKeys,
 	ApiMonitoring,
-	BillingPage,
-	ChannelsEditPage,
 	CreateAlertChannelAlerts,
 	CreateNewAlerts,
-	CustomDomainSettings,
 	DashboardPage,
 	DashboardWidget,
 	EditRulesPage,
 	ErrorDetails,
-	GeneralSettings,
 	Home,
 	InfrastructureMonitoring,
-	IngestionSettings,
 	InstalledIntegrations,
 	LicensePage,
 	ListAllALertsPage,
@@ -33,12 +26,10 @@ import {
 	LogsIndexToFields,
 	LogsSaveViews,
 	MetricsExplorer,
-	MySettings,
 	NewDashboardPage,
 	OldLogsExplorer,
 	Onboarding,
 	OnboardingV2,
-	OrganizationSettingsPage,
 	OrgOnboarding,
 	PasswordReset,
 	PipelinePage,
@@ -47,7 +38,6 @@ import {
 	ServicesTablePage,
 	ServiceTopLevelOperationsPage,
 	SettingsPage,
-	ShortcutsPage,
 	SignupPage,
 	SomethingWentWrong,
 	StatusPage,
@@ -67,388 +57,387 @@ import {
 
 const routes: AppRoutes[] = [
 	{
-		element: SignupPage,
+		component: SignupPage,
 		path: ROUTES.SIGN_UP,
+		exact: true,
 		isPrivate: false,
 		key: 'SIGN_UP',
 	},
 	{
 		path: ROUTES.GET_STARTED,
-		element: Onboarding,
+		exact: false,
+		component: Onboarding,
 		isPrivate: true,
 		key: 'GET_STARTED',
 	},
 	{
 		path: ROUTES.GET_STARTED_WITH_CLOUD,
-		element: OnboardingV2,
+		exact: false,
+		component: OnboardingV2,
 		isPrivate: true,
 		key: 'GET_STARTED_WITH_CLOUD',
 	},
 	{
 		path: ROUTES.HOME,
-		element: Home,
+		exact: true,
+		component: Home,
 		isPrivate: true,
 		key: 'HOME',
 	},
 	{
 		path: ROUTES.ONBOARDING,
-		element: OrgOnboarding,
+		exact: false,
+		component: OrgOnboarding,
 		isPrivate: true,
 		key: 'ONBOARDING',
 	},
 	{
-		element: LogsIndexToFields,
+		component: LogsIndexToFields,
 		path: ROUTES.LOGS_INDEX_FIELDS,
+		exact: true,
 		isPrivate: true,
 		key: 'LOGS_INDEX_FIELDS',
 	},
 	{
-		element: ServicesTablePage,
+		component: ServicesTablePage,
 		path: ROUTES.APPLICATION,
+		exact: true,
 		isPrivate: true,
 		key: 'APPLICATION',
 	},
 	{
 		path: ROUTES.SERVICE_METRICS,
-		element: ServiceMetricsPage,
+		exact: true,
+		component: ServiceMetricsPage,
 		isPrivate: true,
 		key: 'SERVICE_METRICS',
 	},
 	{
 		path: ROUTES.SERVICE_TOP_LEVEL_OPERATIONS,
-		element: ServiceTopLevelOperationsPage,
+		exact: true,
+		component: ServiceTopLevelOperationsPage,
 		isPrivate: true,
 		key: 'SERVICE_TOP_LEVEL_OPERATIONS',
 	},
 	{
 		path: ROUTES.SERVICE_MAP,
-		element: ServiceMapPage,
+		component: ServiceMapPage,
 		isPrivate: true,
+		exact: true,
 		key: 'SERVICE_MAP',
 	},
 	{
 		path: ROUTES.LOGS_SAVE_VIEWS,
-		element: LogsSaveViews,
+		component: LogsSaveViews,
 		isPrivate: true,
+		exact: true,
 		key: 'LOGS_SAVE_VIEWS',
 	},
 	{
 		path: ROUTES.TRACE_DETAIL,
-		element: TraceDetail,
+		exact: true,
+		component: TraceDetail,
 		isPrivate: true,
 		key: 'TRACE_DETAIL',
 	},
 	{
 		path: ROUTES.SETTINGS,
-		element: SettingsPage,
+		exact: false,
+		component: SettingsPage,
 		isPrivate: true,
 		key: 'SETTINGS',
-		children: [
-			{
-				path: '', // Route for /settings
-				element: GeneralSettings,
-				isPrivate: true,
-				key: 'SETTINGS',
-			},
-			{
-				path: 'my-settings',
-				element: MySettings,
-				isPrivate: true,
-				key: 'MY_SETTINGS',
-			},
-			{
-				path: 'custom-domain-settings',
-				element: CustomDomainSettings,
-				isPrivate: true,
-				key: 'CUSTOM_DOMAIN_SETTINGS',
-			},
-			{
-				path: 'org-settings',
-				element: OrganizationSettingsPage,
-				isPrivate: true,
-				key: 'ORG_SETTINGS',
-			},
-			{
-				path: 'channels',
-				element: AllAlertChannelsPage,
-				isPrivate: true,
-				key: 'ALL_CHANNELS',
-			},
-			{
-				path: 'ingestion-settings',
-				element: IngestionSettings,
-				isPrivate: true,
-				key: 'INGESTION_SETTINGS',
-			},
-			{
-				path: 'api-keys',
-				element: APIKeys,
-				isPrivate: true,
-				key: 'API_KEYS',
-			},
-			{
-				path: 'billing',
-				element: BillingPage,
-				isPrivate: true,
-				key: 'BILLING',
-			},
-			{
-				path: 'shortcuts',
-				element: ShortcutsPage,
-				isPrivate: true,
-				key: 'SHORTCUTS',
-			},
-			{
-				path: 'channels/new',
-				element: CreateAlertChannelAlerts,
-				isPrivate: true,
-				key: 'CHANNELS_NEW',
-			},
-			{
-				path: 'channels/edit/:channelId',
-				element: ChannelsEditPage,
-				isPrivate: true,
-				key: 'CHANNELS_EDIT',
-			},
-		],
 	},
 	{
 		path: ROUTES.USAGE_EXPLORER,
-		element: UsageExplorerPage,
+		exact: true,
+		component: UsageExplorerPage,
 		isPrivate: true,
 		key: 'USAGE_EXPLORER',
 	},
 	{
 		path: ROUTES.ALL_DASHBOARD,
-		element: DashboardPage,
+		exact: true,
+		component: DashboardPage,
 		isPrivate: true,
 		key: 'ALL_DASHBOARD',
 	},
 	{
 		path: ROUTES.DASHBOARD,
-		element: NewDashboardPage,
+		exact: true,
+		component: NewDashboardPage,
 		isPrivate: true,
 		key: 'DASHBOARD',
 	},
 	{
 		path: ROUTES.DASHBOARD_WIDGET,
-		element: DashboardWidget,
+		exact: true,
+		component: DashboardWidget,
 		isPrivate: true,
 		key: 'DASHBOARD_WIDGET',
 	},
 	{
 		path: ROUTES.EDIT_ALERTS,
-		element: EditRulesPage,
+		exact: true,
+		component: EditRulesPage,
 		isPrivate: true,
 		key: 'EDIT_ALERTS',
 	},
 	{
 		path: ROUTES.LIST_ALL_ALERT,
-		element: ListAllALertsPage,
+		exact: true,
+		component: ListAllALertsPage,
 		isPrivate: true,
 		key: 'LIST_ALL_ALERT',
 	},
 	{
 		path: ROUTES.ALERTS_NEW,
-		element: CreateNewAlerts,
+		exact: true,
+		component: CreateNewAlerts,
 		isPrivate: true,
 		key: 'ALERTS_NEW',
 	},
 	{
 		path: ROUTES.ALERT_HISTORY,
-		element: AlertHistory,
+		exact: true,
+		component: AlertHistory,
 		isPrivate: true,
 		key: 'ALERT_HISTORY',
 	},
 	{
 		path: ROUTES.ALERT_OVERVIEW,
-		element: AlertOverview,
+		exact: true,
+		component: AlertOverview,
 		isPrivate: true,
 		key: 'ALERT_OVERVIEW',
 	},
 	{
 		path: ROUTES.TRACE,
-		element: TraceFilter,
+		exact: true,
+		component: TraceFilter,
 		isPrivate: true,
 		key: 'TRACE',
 	},
 	{
 		path: ROUTES.TRACES_EXPLORER,
-		element: TracesExplorer,
+		exact: true,
+		component: TracesExplorer,
 		isPrivate: true,
 		key: 'TRACES_EXPLORER',
 	},
 	{
 		path: ROUTES.TRACES_SAVE_VIEWS,
-		element: TracesSaveViews,
+		exact: true,
+		component: TracesSaveViews,
 		isPrivate: true,
 		key: 'TRACES_SAVE_VIEWS',
 	},
 	{
 		path: ROUTES.TRACES_FUNNELS,
-		element: TracesFunnels,
+		exact: true,
+		component: TracesFunnels,
 		isPrivate: true,
 		key: 'TRACES_FUNNELS',
 	},
 	{
 		path: ROUTES.TRACES_FUNNELS_DETAIL,
-		element: TracesFunnelDetails,
+		exact: true,
+		component: TracesFunnelDetails,
 		isPrivate: true,
 		key: 'TRACES_FUNNELS_DETAIL',
 	},
 	{
-		path: ROUTES.ALL_ERROR,
+		path: ROUTES.CHANNELS_NEW,
+		exact: true,
+		component: CreateAlertChannelAlerts,
 		isPrivate: true,
-		element: AllErrors,
+		key: 'CHANNELS_NEW',
+	},
+	{
+		path: ROUTES.ALL_CHANNELS,
+		exact: true,
+		component: AllAlertChannels,
+		isPrivate: true,
+		key: 'ALL_CHANNELS',
+	},
+	{
+		path: ROUTES.ALL_ERROR,
+		exact: true,
+		isPrivate: true,
+		component: AllErrors,
 		key: 'ALL_ERROR',
 	},
 	{
 		path: ROUTES.ERROR_DETAIL,
-		element: ErrorDetails,
+		exact: true,
+		component: ErrorDetails,
 		isPrivate: true,
 		key: 'ERROR_DETAIL',
 	},
 	{
 		path: ROUTES.VERSION,
-		element: StatusPage,
+		exact: true,
+		component: StatusPage,
 		isPrivate: true,
 		key: 'VERSION',
 	},
 	{
 		path: ROUTES.LOGS,
-		element: Logs,
+		exact: true,
+		component: Logs,
 		key: 'LOGS',
 		isPrivate: true,
 	},
 	{
 		path: ROUTES.LOGS_EXPLORER,
-		element: LogsExplorer,
+		exact: true,
+		component: LogsExplorer,
 		key: 'LOGS_EXPLORER',
 		isPrivate: true,
 	},
 	{
 		path: ROUTES.OLD_LOGS_EXPLORER,
-		element: OldLogsExplorer,
+		exact: true,
+		component: OldLogsExplorer,
 		key: 'OLD_LOGS_EXPLORER',
 		isPrivate: true,
 	},
 	{
 		path: ROUTES.LIVE_LOGS,
-		element: LiveLogs,
+		exact: true,
+		component: LiveLogs,
 		key: 'LIVE_LOGS',
 		isPrivate: true,
 	},
 	{
 		path: ROUTES.LOGS_PIPELINES,
-		element: PipelinePage,
+		exact: true,
+		component: PipelinePage,
 		key: 'LOGS_PIPELINES',
 		isPrivate: true,
 	},
 	{
 		path: ROUTES.LOGIN,
-		element: Login,
+		exact: true,
+		component: Login,
 		isPrivate: false,
 		key: 'LOGIN',
 	},
 	{
 		path: ROUTES.UN_AUTHORIZED,
-		element: UnAuthorized,
+		exact: true,
+		component: UnAuthorized,
 		key: 'UN_AUTHORIZED',
 		isPrivate: true,
 	},
 	{
 		path: ROUTES.PASSWORD_RESET,
-		element: PasswordReset,
+		exact: true,
+		component: PasswordReset,
 		key: 'PASSWORD_RESET',
 		isPrivate: false,
 	},
 	{
 		path: ROUTES.SOMETHING_WENT_WRONG,
-		element: SomethingWentWrong,
+		exact: true,
+		component: SomethingWentWrong,
 		key: 'SOMETHING_WENT_WRONG',
 		isPrivate: false,
 	},
 	{
 		path: ROUTES.WORKSPACE_LOCKED,
-		element: WorkspaceBlocked,
+		exact: true,
+		component: WorkspaceBlocked,
 		isPrivate: true,
 		key: 'WORKSPACE_LOCKED',
 	},
 	{
 		path: ROUTES.WORKSPACE_SUSPENDED,
-		element: WorkspaceSuspended,
+		exact: true,
+		component: WorkspaceSuspended,
 		isPrivate: true,
 		key: 'WORKSPACE_SUSPENDED',
 	},
 	{
 		path: ROUTES.WORKSPACE_ACCESS_RESTRICTED,
-		element: WorkspaceAccessRestricted,
+		exact: true,
+		component: WorkspaceAccessRestricted,
 		isPrivate: true,
 		key: 'WORKSPACE_ACCESS_RESTRICTED',
 	},
 	{
 		path: ROUTES.INTEGRATIONS,
-		element: InstalledIntegrations,
+		exact: true,
+		component: InstalledIntegrations,
 		isPrivate: true,
 		key: 'INTEGRATIONS',
 	},
 	{
 		path: ROUTES.MESSAGING_QUEUES_KAFKA,
-		element: MessagingQueues,
+		exact: true,
+		component: MessagingQueues,
 		key: 'MESSAGING_QUEUES_KAFKA',
 		isPrivate: true,
 	},
 	{
 		path: ROUTES.MESSAGING_QUEUES_CELERY_TASK,
-		element: MessagingQueues,
+		exact: true,
+		component: MessagingQueues,
 		key: 'MESSAGING_QUEUES_CELERY_TASK',
 		isPrivate: true,
 	},
 	{
 		path: ROUTES.MESSAGING_QUEUES_OVERVIEW,
-		element: MessagingQueues,
+		exact: true,
+		component: MessagingQueues,
 		key: 'MESSAGING_QUEUES_OVERVIEW',
 		isPrivate: true,
 	},
 	{
 		path: ROUTES.MESSAGING_QUEUES_KAFKA_DETAIL,
-		element: MessagingQueues,
+		exact: true,
+		component: MessagingQueues,
 		key: 'MESSAGING_QUEUES_KAFKA_DETAIL',
 		isPrivate: true,
 	},
 	{
 		path: ROUTES.INFRASTRUCTURE_MONITORING_HOSTS,
-		element: InfrastructureMonitoring,
+		exact: true,
+		component: InfrastructureMonitoring,
 		key: 'INFRASTRUCTURE_MONITORING_HOSTS',
 		isPrivate: true,
 	},
 	{
 		path: ROUTES.INFRASTRUCTURE_MONITORING_KUBERNETES,
-		element: InfrastructureMonitoring,
+		exact: true,
+		component: InfrastructureMonitoring,
 		key: 'INFRASTRUCTURE_MONITORING_KUBERNETES',
 		isPrivate: true,
 	},
 	{
 		path: ROUTES.METRICS_EXPLORER,
-		element: MetricsExplorer,
+		exact: true,
+		component: MetricsExplorer,
 		key: 'METRICS_EXPLORER',
 		isPrivate: true,
 	},
 	{
 		path: ROUTES.METRICS_EXPLORER_EXPLORER,
-		element: MetricsExplorer,
+		exact: true,
+		component: MetricsExplorer,
 		key: 'METRICS_EXPLORER_EXPLORER',
 		isPrivate: true,
 	},
 	{
 		path: ROUTES.METRICS_EXPLORER_VIEWS,
-		element: MetricsExplorer,
+		exact: true,
+		component: MetricsExplorer,
 		key: 'METRICS_EXPLORER_VIEWS',
 		isPrivate: true,
 	},
 	{
 		path: ROUTES.API_MONITORING,
-		element: ApiMonitoring,
+		exact: true,
+		component: ApiMonitoring,
 		key: 'API_MONITORING',
 		isPrivate: true,
 	},
@@ -456,14 +445,16 @@ const routes: AppRoutes[] = [
 
 export const SUPPORT_ROUTE: AppRoutes = {
 	path: ROUTES.SUPPORT,
-	element: SupportPage,
+	exact: true,
+	component: SupportPage,
 	key: 'SUPPORT',
 	isPrivate: true,
 };
 
 export const LIST_LICENSES: AppRoutes = {
 	path: ROUTES.LIST_LICENSES,
-	element: LicensePage,
+	exact: true,
+	component: LicensePage,
 	isPrivate: true,
 	key: 'LIST_LICENSES',
 };
@@ -496,13 +487,11 @@ export const ROUTES_NOT_TO_BE_OVERRIDEN: string[] = [
 ];
 
 export interface AppRoutes {
-	element:
-		| React.ComponentType<any>
-		| React.LazyExoticComponent<React.ComponentType<any>>;
+	component: RouteProps['component'];
 	path: RouteProps['path'];
+	exact: RouteProps['exact'];
 	isPrivate: boolean;
 	key: keyof typeof ROUTES;
-	children?: AppRoutes[];
 }
 
 export default routes;

frontend/src/api/apiV1.ts

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

frontend/src/api/index.ts

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

frontend/src/api/querySuggestions/getKeySuggestions.ts

@@ -0,0 +1,28 @@
+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 = '',
+	} = props;
+
+	const encodedSignal = encodeURIComponent(signal);
+	const encodedSearchText = encodeURIComponent(searchText);
+	const encodedMetricName = encodeURIComponent(metricName);
+	const encodedFieldContext = encodeURIComponent(fieldContext);
+	const encodedFieldDataType = encodeURIComponent(fieldDataType);
+
+	return axios.get(
+		`/fields/keys?signal=${encodedSignal}&searchText=${encodedSearchText}&metricName=${encodedMetricName}&fieldContext=${encodedFieldContext}&fieldDataType=${encodedFieldDataType}`,
+	);
+};

frontend/src/api/querySuggestions/getValueSuggestion.ts

@@ -0,0 +1,20 @@
+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 } = props;
+
+	const encodedSignal = encodeURIComponent(signal);
+	const encodedKey = encodeURIComponent(key);
+	const encodedSearchText = encodeURIComponent(searchText);
+
+	return axios.get(
+		`/fields/values?signal=${encodedSignal}&name=${encodedKey}&searchText=${encodedSearchText}`,
+	);
+};

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,423 @@
+import { cloneDeep, isEmpty } from 'lodash-es';
+import { SuccessResponse } 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;
+
+	// Single aggregation: Priority is alias > legend > expression
+	if (isSingleAggregation) {
+		return alias || legend || expression;
+	}
+
+	// Multiple aggregations: Each follows single rules BUT never shows legend
+	// Priority: alias > expression (legend is ignored for multiple aggregations)
+	return alias || expression;
+}
+
+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 || '';
+	return `${col.queryName}.${expression}`;
+}
+
+/**
+ * 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> {
+	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,
+				},
+			},
+		};
+	}
+
+	// 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,
+		},
+	};
+
+	// 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,447 @@
+/* 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,
+	QueryFunctionProps,
+} 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';
+
+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: QueryFunctionProps): QueryFunction => ({
+						name: func.name as FunctionName,
+						args: isEmpty(func.namedArgs)
+							? func.args.map((arg) => ({
+									value: arg,
+							  }))
+							: 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,
+						...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

@@ -41,7 +41,8 @@ export function useNavigateToExplorer(): (
 						aggregateOperator: MetricAggregateOperator.NOOP,
 						filters: {
 							...item.filters,
-							items: selectedFilters,
+							items: [...(item.filters?.items || []), ...selectedFilters],
+							op: item.filters?.op || 'AND',
 						},
 						groupBy: [],
 						disabled: false,

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/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/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;

frontend/src/components/Logs/ListLogView/index.tsx

@@ -1,15 +1,13 @@
 import './ListLogView.styles.scss';
 
 import { blue } from '@ant-design/colors';
-import Convert from 'ansi-to-html';
 import { Typography } from 'antd';
 import cx from 'classnames';
 import LogDetail from 'components/LogDetail';
 import { VIEW_TYPES } from 'components/LogDetail/constants';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
-import { escapeHtml, unescapeString } from 'container/LogDetailedView/utils';
+import { getSanitizedLogBody } from 'container/LogDetailedView/utils';
 import { FontSize } from 'container/OptionsMenu/types';
-import dompurify from 'dompurify';
 import { useActiveLog } from 'hooks/logs/useActiveLog';
 import { useCopyLogLink } from 'hooks/logs/useCopyLogLink';
 import { useIsDarkMode } from 'hooks/useDarkMode';
@@ -20,7 +18,6 @@ import { useCallback, useMemo, useState } from 'react';
 // interfaces
 import { IField } from 'types/api/logs/fields';
 import { ILog } from 'types/api/logs/log';
-import { FORBID_DOM_PURIFY_TAGS } from 'utils/app';
 
 // components
 import AddToQueryHOC, { AddToQueryHOCProps } from '../AddToQueryHOC';
@@ -37,8 +34,6 @@ import {
 } from './styles';
 import { isValidLogField } from './util';
 
-const convert = new Convert();
-
 interface LogFieldProps {
 	fieldKey: string;
 	fieldValue: string;
@@ -57,11 +52,7 @@ function LogGeneralField({
 }: LogFieldProps): JSX.Element {
 	const html = useMemo(
 		() => ({
-			__html: convert.toHtml(
-				dompurify.sanitize(unescapeString(escapeHtml(fieldValue)), {
-					FORBID_TAGS: [...FORBID_DOM_PURIFY_TAGS],
-				}),
-			),
+			__html: getSanitizedLogBody(fieldValue, { shouldEscapeHtml: true }),
 		}),
 		[fieldValue],
 	);

frontend/src/components/Logs/RawLogView/index.tsx

@@ -1,13 +1,11 @@
 import './RawLogView.styles.scss';
 
-import Convert from 'ansi-to-html';
 import { DrawerProps } from 'antd';
 import LogDetail from 'components/LogDetail';
 import { VIEW_TYPES, VIEWS } from 'components/LogDetail/constants';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
-import { escapeHtml, unescapeString } from 'container/LogDetailedView/utils';
+import { getSanitizedLogBody } from 'container/LogDetailedView/utils';
 import LogsExplorerContext from 'container/LogsExplorerContext';
-import dompurify from 'dompurify';
 import { useActiveLog } from 'hooks/logs/useActiveLog';
 import { useCopyLogLink } from 'hooks/logs/useCopyLogLink';
 // hooks
@@ -23,7 +21,6 @@ import {
 	useMemo,
 	useState,
 } from 'react';
-import { FORBID_DOM_PURIFY_TAGS } from 'utils/app';
 
 import LogLinesActionButtons from '../LogLinesActionButtons/LogLinesActionButtons';
 import LogStateIndicator from '../LogStateIndicator/LogStateIndicator';
@@ -32,8 +29,6 @@ import { getLogIndicatorType } from '../LogStateIndicator/utils';
 import { RawLogContent, RawLogViewContainer } from './styles';
 import { RawLogViewProps } from './types';
 
-const convert = new Convert();
-
 function RawLogView({
 	isActiveLog,
 	isReadOnly,
@@ -176,11 +171,7 @@ function RawLogView({
 
 	const html = useMemo(
 		() => ({
-			__html: convert.toHtml(
-				dompurify.sanitize(unescapeString(escapeHtml(text)), {
-					FORBID_TAGS: [...FORBID_DOM_PURIFY_TAGS],
-				}),
-			),
+			__html: getSanitizedLogBody(text, { shouldEscapeHtml: true }),
 		}),
 		[text],
 	);

frontend/src/components/Logs/TableView/useTableView.tsx

@@ -1,17 +1,14 @@
 import './useTableView.styles.scss';
 
-import Convert from 'ansi-to-html';
 import { Typography } from 'antd';
 import { ColumnsType } from 'antd/es/table';
 import cx from 'classnames';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
-import { unescapeString } from 'container/LogDetailedView/utils';
-import dompurify from 'dompurify';
+import { getSanitizedLogBody } from 'container/LogDetailedView/utils';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { FlatLogData } from 'lib/logs/flatLogData';
 import { useTimezone } from 'providers/Timezone';
 import { useMemo } from 'react';
-import { FORBID_DOM_PURIFY_TAGS } from 'utils/app';
 
 import LogStateIndicator from '../LogStateIndicator/LogStateIndicator';
 import { getLogIndicatorTypeForTable } from '../LogStateIndicator/utils';
@@ -27,8 +24,6 @@ import {
 	UseTableViewResult,
 } from './types';
 
-const convert = new Convert();
-
 export const useTableView = (props: UseTableViewProps): UseTableViewResult => {
 	const {
 		logs,
@@ -149,11 +144,7 @@ export const useTableView = (props: UseTableViewProps): UseTableViewResult => {
 								children: (
 									<TableBodyContent
 										dangerouslySetInnerHTML={{
-											__html: convert.toHtml(
-												dompurify.sanitize(unescapeString(field as string), {
-													FORBID_TAGS: [...FORBID_DOM_PURIFY_TAGS],
-												}),
-											),
+											__html: getSanitizedLogBody(field as string),
 										}}
 										fontSize={fontSize}
 										linesPerRow={linesPerRow}

frontend/src/components/LogsFormatOptionsMenu/LogsFormatOptionsMenu.tsx

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

frontend/src/components/OrderBy/ListViewOrderBy.styles.scss

@@ -0,0 +1,7 @@
+.order-by-loading-container {
+	padding: 4px;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+}

frontend/src/components/OrderBy/ListViewOrderBy.tsx

@@ -0,0 +1,115 @@
+import './ListViewOrderBy.styles.scss';
+
+import { Select, Spin } from 'antd';
+import { getKeySuggestions } from 'api/querySuggestions/getKeySuggestions';
+import { useEffect, useRef, useState } from 'react';
+import { useQuery } from 'react-query';
+import { QueryKeyDataSuggestionsProps } from 'types/api/querySuggestions/types';
+import { DataSource } from 'types/common/queryBuilder';
+
+interface ListViewOrderByProps {
+	value: string;
+	onChange: (value: string) => void;
+	dataSource: DataSource;
+}
+
+// Loader component for the dropdown when loading or no results
+function Loader({ isLoading }: { isLoading: boolean }): JSX.Element {
+	return (
+		<div className="order-by-loading-container">
+			{isLoading ? <Spin size="default" /> : 'No results found'}
+		</div>
+	);
+}
+
+function ListViewOrderBy({
+	value,
+	onChange,
+	dataSource,
+}: ListViewOrderByProps): JSX.Element {
+	const [searchInput, setSearchInput] = useState('');
+	const [debouncedInput, setDebouncedInput] = useState('');
+	const [selectOptions, setSelectOptions] = useState<
+		{ label: string; value: string }[]
+	>([]);
+	const debounceTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+	// Fetch key suggestions based on debounced input
+	const { data, isLoading } = useQuery({
+		queryKey: ['orderByKeySuggestions', dataSource, debouncedInput],
+		queryFn: async () => {
+			const response = await getKeySuggestions({
+				signal: dataSource,
+				searchText: debouncedInput,
+			});
+			return response.data;
+		},
+	});
+
+	useEffect(
+		() => (): void => {
+			if (debounceTimer.current) {
+				clearTimeout(debounceTimer.current);
+			}
+		},
+		[],
+	);
+
+	// Update options when API data changes
+	useEffect(() => {
+		const rawKeys: QueryKeyDataSuggestionsProps[] = data?.data?.keys
+			? Object.values(data.data?.keys).flat()
+			: [];
+
+		const keyNames = rawKeys.map((key) => key.name);
+		const uniqueKeys = [
+			...new Set(searchInput ? keyNames : ['timestamp', ...keyNames]),
+		];
+
+		const updatedOptions = uniqueKeys.flatMap((key) => [
+			{ label: `${key} (desc)`, value: `${key}:desc` },
+			{ label: `${key} (asc)`, value: `${key}:asc` },
+		]);
+
+		setSelectOptions(updatedOptions);
+	}, [data, searchInput]);
+
+	// Handle search input with debounce
+	const handleSearch = (input: string): void => {
+		setSearchInput(input);
+
+		// Filter current options for instant client-side match
+		const filteredOptions = selectOptions.filter((option) =>
+			option.value.toLowerCase().includes(input.trim().toLowerCase()),
+		);
+
+		// If no match found or input is empty, trigger debounced fetch
+		if (filteredOptions.length === 0 || input === '') {
+			if (debounceTimer.current) {
+				clearTimeout(debounceTimer.current);
+			}
+
+			debounceTimer.current = setTimeout(() => {
+				setDebouncedInput(input);
+			}, 100);
+		}
+	};
+
+	return (
+		<Select
+			showSearch
+			value={value}
+			onChange={onChange}
+			onSearch={handleSearch}
+			notFoundContent={<Loader isLoading={isLoading} />}
+			placeholder="Select an attribute"
+			style={{ width: 200 }}
+			options={selectOptions}
+			filterOption={(input, option): boolean =>
+				(option?.value ?? '').toLowerCase().includes(input.trim().toLowerCase())
+			}
+		/>
+	);
+}
+
+export default ListViewOrderBy;

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

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

frontend/src/components/QueryBuilderV2/QueryBuilderV2.tsx

@@ -0,0 +1,186 @@
+import './QueryBuilderV2.styles.scss';
+
+import { OPERATORS, PANEL_TYPES } from 'constants/queryBuilder';
+import { Formula } from 'container/QueryBuilder/components/Formula';
+import { QueryBuilderProps } from 'container/QueryBuilder/QueryBuilder.interfaces';
+import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
+import { memo, useEffect, useMemo, useRef } from 'react';
+import { DataSource } from 'types/common/queryBuilder';
+
+import { QueryBuilderV2Provider } from './QueryBuilderV2Context';
+import QueryFooter from './QueryV2/QueryFooter/QueryFooter';
+import { QueryV2 } from './QueryV2/QueryV2';
+
+export const QueryBuilderV2 = memo(function QueryBuilderV2({
+	config,
+	panelType: newPanelType,
+	filterConfigs = {},
+	queryComponents,
+	isListViewPanel = false,
+	showOnlyWhereClause = false,
+	version,
+}: QueryBuilderProps): JSX.Element {
+	const {
+		currentQuery,
+		addNewBuilderQuery,
+		addNewFormula,
+		handleSetConfig,
+		panelType,
+		initialDataSource,
+	} = useQueryBuilder();
+
+	const containerRef = useRef(null);
+
+	const currentDataSource = useMemo(
+		() =>
+			(config && config.queryVariant === 'static' && config.initialDataSource) ||
+			null,
+		[config],
+	);
+
+	useEffect(() => {
+		if (currentDataSource !== initialDataSource || newPanelType !== panelType) {
+			if (newPanelType === PANEL_TYPES.BAR) {
+				handleSetConfig(PANEL_TYPES.BAR, DataSource.METRICS);
+				return;
+			}
+			handleSetConfig(newPanelType, currentDataSource);
+		}
+	}, [
+		handleSetConfig,
+		panelType,
+		initialDataSource,
+		currentDataSource,
+		newPanelType,
+	]);
+
+	const listViewLogFilterConfigs: QueryBuilderProps['filterConfigs'] = useMemo(() => {
+		const config: QueryBuilderProps['filterConfigs'] = {
+			stepInterval: { isHidden: true, isDisabled: true },
+			having: { isHidden: true, isDisabled: true },
+			filters: {
+				customKey: 'body',
+				customOp: OPERATORS.CONTAINS,
+			},
+		};
+
+		return config;
+	}, []);
+
+	const listViewTracesFilterConfigs: QueryBuilderProps['filterConfigs'] = useMemo(() => {
+		const config: QueryBuilderProps['filterConfigs'] = {
+			stepInterval: { isHidden: true, isDisabled: true },
+			having: { isHidden: true, isDisabled: true },
+			limit: { isHidden: true, isDisabled: true },
+			filters: {
+				customKey: 'body',
+				customOp: OPERATORS.CONTAINS,
+			},
+		};
+
+		return config;
+	}, []);
+
+	const queryFilterConfigs = useMemo(() => {
+		if (isListViewPanel) {
+			return currentQuery.builder.queryData[0].dataSource === DataSource.TRACES
+				? listViewTracesFilterConfigs
+				: listViewLogFilterConfigs;
+		}
+
+		return filterConfigs;
+	}, [
+		isListViewPanel,
+		filterConfigs,
+		currentQuery.builder.queryData,
+		listViewLogFilterConfigs,
+		listViewTracesFilterConfigs,
+	]);
+
+	return (
+		<QueryBuilderV2Provider>
+			<div className="query-builder-v2">
+				<div className="qb-content-container">
+					{isListViewPanel && (
+						<QueryV2
+							ref={containerRef}
+							key={currentQuery.builder.queryData[0].queryName}
+							index={0}
+							query={currentQuery.builder.queryData[0]}
+							filterConfigs={queryFilterConfigs}
+							queryComponents={queryComponents}
+							version={version}
+							isAvailableToDisable={false}
+							queryVariant={config?.queryVariant || 'dropdown'}
+							showOnlyWhereClause={showOnlyWhereClause}
+							isListViewPanel={isListViewPanel}
+						/>
+					)}
+
+					{!isListViewPanel &&
+						currentQuery.builder.queryData.map((query, index) => (
+							<QueryV2
+								ref={containerRef}
+								key={query.queryName}
+								index={index}
+								query={query}
+								filterConfigs={queryFilterConfigs}
+								queryComponents={queryComponents}
+								version={version}
+								isAvailableToDisable={false}
+								queryVariant={config?.queryVariant || 'dropdown'}
+								showOnlyWhereClause={showOnlyWhereClause}
+								isListViewPanel={isListViewPanel}
+							/>
+						))}
+
+					{!showOnlyWhereClause && currentQuery.builder.queryFormulas.length > 0 && (
+						<div className="qb-formulas-container">
+							{currentQuery.builder.queryFormulas.map((formula, index) => {
+								const query =
+									currentQuery.builder.queryData[index] ||
+									currentQuery.builder.queryData[0];
+
+								return (
+									<div key={formula.queryName} className="qb-formula">
+										<Formula
+											filterConfigs={filterConfigs}
+											query={query}
+											formula={formula}
+											index={index}
+											isAdditionalFilterEnable={false}
+											isQBV2
+										/>
+									</div>
+								);
+							})}
+						</div>
+					)}
+
+					{!showOnlyWhereClause && !isListViewPanel && (
+						<QueryFooter
+							addNewBuilderQuery={addNewBuilderQuery}
+							addNewFormula={addNewFormula}
+						/>
+					)}
+				</div>
+
+				{!showOnlyWhereClause && !isListViewPanel && (
+					<div className="query-names-section">
+						{currentQuery.builder.queryData.map((query) => (
+							<div key={query.queryName} className="query-name">
+								{query.queryName}
+							</div>
+						))}
+
+						{currentQuery.builder.queryFormulas.map((formula) => (
+							<div key={formula.queryName} className="formula-name">
+								{formula.queryName}
+							</div>
+						))}
+					</div>
+				)}
+			</div>
+		</QueryBuilderV2Provider>
+	);
+});

frontend/src/components/QueryBuilderV2/QueryBuilderV2Context.tsx

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

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

@@ -0,0 +1,175 @@
+.metrics-aggregate-section {
+	display: flex;
+	flex-direction: column;
+	gap: 16px;
+	margin: 4px 0;
+
+	.metrics-time-aggregation-section {
+		display: flex;
+		flex-direction: column;
+		gap: 12px;
+	}
+
+	.non-histogram-container {
+		display: flex;
+		flex-direction: column;
+		gap: 16px;
+	}
+
+	&:not(.is-histogram) {
+		.metrics-time-aggregation-section,
+		.metrics-space-aggregation-section {
+			display: flex;
+			flex-direction: row;
+			align-items: center;
+
+			.metrics-aggregation-section-content {
+				flex-wrap: nowrap;
+			}
+		}
+	}
+
+	.metrics-space-aggregation-section {
+		display: flex;
+		flex-direction: column;
+		gap: 4px;
+
+		.metrics-space-aggregation-section-title {
+			display: flex;
+			align-items: center;
+			gap: 6px;
+
+			color: var(--Slate-50, #62687c);
+			font-family: 'Geist Mono';
+			font-size: 12px;
+			font-style: normal;
+			font-weight: 500;
+			line-height: 18px; /* 150% */
+			letter-spacing: 0.48px;
+		}
+	}
+
+	.metrics-aggregation-section-content {
+		display: flex;
+		flex-direction: row;
+		flex-wrap: wrap;
+		gap: 8px;
+
+		.group-by-filter-container {
+			min-width: 340px !important;
+		}
+
+		.metrics-aggregation-section-content-item {
+			display: flex;
+			align-items: center;
+			gap: 10px;
+
+			.metrics-aggregation-section-content-item-label {
+				color: var(--Vanilla-400, #c0c1c3);
+				font-family: 'Geist Mono';
+				font-size: 13px;
+				font-style: normal;
+				font-weight: 400;
+				line-height: 20px; /* 142.857% */
+				letter-spacing: -0.07px;
+
+				&.main-label {
+					color: var(--Slate-50, #62687c);
+					font-family: 'Geist Mono';
+					font-size: 12px;
+					font-style: normal;
+					font-weight: 500;
+					line-height: 18px; /* 150% */
+					letter-spacing: 0.48px;
+					display: flex;
+					align-items: center;
+					gap: 6px;
+				}
+			}
+
+			.metrics-aggregation-section-content-item-value {
+				min-width: 140px;
+
+				.ant-select {
+					width: 100%;
+				}
+
+				.ant-select-selector {
+					border-radius: 2px;
+					border: 1.005px solid var(--Slate-400, #1d212d);
+					background: var(--Ink-300, #16181d);
+				}
+
+				.input-with-label {
+					.label {
+						min-width: 80px;
+					}
+
+					.input {
+						flex: initial;
+						width: 100px !important;
+					}
+				}
+			}
+		}
+	}
+
+	&.is-histogram {
+		.group-by-filter-container {
+			width: 420px;
+		}
+
+		.histogram-every-input {
+			.input {
+				flex: initial;
+				width: 100px !important;
+			}
+
+			.label {
+				min-width: 80px;
+			}
+		}
+	}
+}
+
+.metrics-operators-select {
+	border-radius: 2px;
+	border: 1.005px solid var(--Slate-400, #1d212d);
+	background: var(--Ink-300, #16181d);
+
+	color: var(--Vanilla-400, #c0c1c3);
+	font-family: 'Geist Mono';
+	font-size: 13px;
+	font-style: normal;
+	font-weight: 400;
+	line-height: 20px; /* 142.857% */
+	letter-spacing: -0.07px;
+}
+
+.lightMode {
+	.metrics-aggregate-section {
+		.metrics-aggregation-section-content {
+			.metrics-aggregation-section-content-item {
+				.metrics-aggregation-section-content-item-label {
+					color: var(--text-ink-200);
+
+					&.main-label {
+						color: var(--text-slate-100);
+					}
+				}
+
+				.metrics-aggregation-section-content-item-value {
+					.ant-select-selector {
+						border: 1px solid var(--bg-vanilla-300) !important;
+						background: var(--bg-vanilla-100) !important;
+					}
+				}
+			}
+		}
+	}
+	.metrics-operators-select {
+		border: 1px solid var(--bg-vanilla-300) !important;
+		background: var(--bg-vanilla-100) !important;
+		color: var(--text-ink-100);
+	}
+}

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

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

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

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

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

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

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

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

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

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

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

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