fix: minor fix for changelog popup to show only when preference is available (#8663)

* fix: uPlot logarithmic scale range error

* fix: removed sanitzation of data

.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)
+	}
+}

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/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/package.json

@@ -36,6 +36,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",
@@ -235,7 +236,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 +259,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/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/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/LogDetail/index.tsx

@@ -2,7 +2,6 @@
 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';
@@ -17,12 +16,10 @@ import JSONView from 'container/LogDetailedView/JsonView';
 import Overview from 'container/LogDetailedView/Overview';
 import {
 	aggregateAttributesResourcesToString,
-	escapeHtml,
+	getSanitizedLogBody,
 	removeEscapeCharacters,
-	unescapeString,
 } from 'container/LogDetailedView/utils';
 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';
@@ -46,14 +43,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';
 
-const convert = new Convert();
-
 function LogDetail({
 	log,
 	onClose,
@@ -118,11 +112,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],
 	);

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/constants/changelog.ts

@@ -0,0 +1 @@
+export const MIN_ACCOUNT_AGE_FOR_CHANGELOG = 14;

frontend/src/constants/query.ts

@@ -47,4 +47,5 @@ export enum QueryParams {
 	destination = 'destination',
 	kindString = 'kindString',
 	tab = 'tab',
+	thresholds = 'thresholds',
 }

frontend/src/constants/queryBuilder.ts

@@ -333,6 +333,8 @@ export const OPERATORS = {
 	'<': '<',
 	HAS: 'HAS',
 	NHAS: 'NHAS',
+	ILIKE: 'ILIKE',
+	NOTILIKE: 'NOT_ILIKE',
 };
 
 export const QUERY_BUILDER_OPERATORS_BY_TYPES = {
@@ -349,6 +351,8 @@ export const QUERY_BUILDER_OPERATORS_BY_TYPES = {
 		OPERATORS.NOT_EXISTS,
 		OPERATORS.REGEX,
 		OPERATORS.NREGEX,
+		OPERATORS.ILIKE,
+		OPERATORS.NOTILIKE,
 	],
 	int64: [
 		OPERATORS['='],
@@ -389,6 +393,8 @@ export const QUERY_BUILDER_OPERATORS_BY_TYPES = {
 		OPERATORS.NOT_EXISTS,
 		OPERATORS.LIKE,
 		OPERATORS.NLIKE,
+		OPERATORS.ILIKE,
+		OPERATORS.NOTILIKE,
 		OPERATORS['>='],
 		OPERATORS['>'],
 		OPERATORS['<='],

frontend/src/container/AppLayout/index.tsx

@@ -17,6 +17,7 @@ import ChangelogModal from 'components/ChangelogModal/ChangelogModal';
 import ChatSupportGateway from 'components/ChatSupportGateway/ChatSupportGateway';
 import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
 import RefreshPaymentStatus from 'components/RefreshPaymentStatus/RefreshPaymentStatus';
+import { MIN_ACCOUNT_AGE_FOR_CHANGELOG } from 'constants/changelog';
 import { Events } from 'constants/events';
 import { FeatureKeys } from 'constants/features';
 import { LOCALSTORAGE } from 'constants/localStorage';
@@ -111,6 +112,34 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 		(state) => state.app,
 	);
 
+	const isWorkspaceAccessRestricted = useMemo(() => {
+		if (!activeLicense) {
+			return false;
+		}
+
+		const isTerminated = activeLicense.state === LicenseState.TERMINATED;
+		const isExpired = activeLicense.state === LicenseState.EXPIRED;
+		const isCancelled = activeLicense.state === LicenseState.CANCELLED;
+		const isDefaulted = activeLicense.state === LicenseState.DEFAULTED;
+		const isEvaluationExpired =
+			activeLicense.state === LicenseState.EVALUATION_EXPIRED;
+
+		return (
+			isTerminated ||
+			isExpired ||
+			isCancelled ||
+			isDefaulted ||
+			isEvaluationExpired
+		);
+	}, [activeLicense]);
+
+	const daysSinceAccountCreation = useMemo(() => {
+		const userCreationDate = dayjs(user.createdAt);
+		const currentDate = dayjs();
+
+		return Math.abs(currentDate.diff(userCreationDate, 'day'));
+	}, [user.createdAt]);
+
 	const handleBillingOnSuccess = (
 		data: SuccessResponseV2<CheckoutSuccessPayloadProps>,
 	): void => {
@@ -183,7 +212,13 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 
 	useEffect(() => {
 		// refetch the changelog only when the current tab becomes active + there isn't an active request
-		if (!getChangelogByVersionResponse.isLoading && isVisible) {
+		if (
+			isVisible &&
+			!changelog &&
+			!getChangelogByVersionResponse.isLoading &&
+			isLoggedIn &&
+			Boolean(latestVersion)
+		) {
 			getChangelogByVersionResponse.refetch();
 		}
 		// eslint-disable-next-line react-hooks/exhaustive-deps
@@ -194,7 +229,10 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 		if (
 			isCloudUserVal &&
 			Boolean(latestVersion) &&
-			latestVersion !== seenChangelogVersion
+			seenChangelogVersion != null &&
+			latestVersion !== seenChangelogVersion &&
+			daysSinceAccountCreation > MIN_ACCOUNT_AGE_FOR_CHANGELOG && // Show to only users older than 2 weeks
+			!isWorkspaceAccessRestricted
 		) {
 			// Automatically open the changelog modal for cloud users after 1s, if they've not seen this version before.
 			timer = setTimeout(() => {
@@ -205,11 +243,13 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 		return (): void => {
 			clearInterval(timer);
 		};
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [
 		isCloudUserVal,
 		latestVersion,
 		seenChangelogVersion,
 		toggleChangelogModal,
+		isWorkspaceAccessRestricted,
 	]);
 
 	useEffect(() => {
@@ -364,20 +404,6 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 
 	useEffect(() => {
 		if (!isFetchingActiveLicense && activeLicense) {
-			const isTerminated = activeLicense.state === LicenseState.TERMINATED;
-			const isExpired = activeLicense.state === LicenseState.EXPIRED;
-			const isCancelled = activeLicense.state === LicenseState.CANCELLED;
-			const isDefaulted = activeLicense.state === LicenseState.DEFAULTED;
-			const isEvaluationExpired =
-				activeLicense.state === LicenseState.EVALUATION_EXPIRED;
-
-			const isWorkspaceAccessRestricted =
-				isTerminated ||
-				isExpired ||
-				isCancelled ||
-				isDefaulted ||
-				isEvaluationExpired;
-
 			const { platform } = activeLicense;
 
 			if (
@@ -387,7 +413,7 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 				setShowWorkspaceRestricted(true);
 			}
 		}
-	}, [isFetchingActiveLicense, activeLicense]);
+	}, [isFetchingActiveLicense, activeLicense, isWorkspaceAccessRestricted]);
 
 	useEffect(() => {
 		if (

frontend/src/container/CreateAlertRule/AlertRuleDocumentationRedirection.test.tsx

@@ -1,4 +1,5 @@
 import ROUTES from 'constants/routes';
+import * as usePrefillAlertConditions from 'container/FormAlertRules/usePrefillAlertConditions';
 import CreateAlertPage from 'pages/CreateAlert';
 import { MemoryRouter, Route } from 'react-router-dom';
 import { act, fireEvent, render } from 'tests/test-utils';
@@ -33,6 +34,15 @@ jest.mock('hooks/useSafeNavigate', () => ({
 	}),
 }));
 
+jest
+	.spyOn(usePrefillAlertConditions, 'usePrefillAlertConditions')
+	.mockReturnValue({
+		matchType: '3',
+		op: '1',
+		target: 100,
+		targetUnit: 'rpm',
+	});
+
 let mockWindowOpen: jest.Mock;
 
 window.ResizeObserver =

frontend/src/container/CreateAlertRule/AnomalyAlertDocumentationRedirection.test.tsx

@@ -1,4 +1,5 @@
 import ROUTES from 'constants/routes';
+import * as usePrefillAlertConditions from 'container/FormAlertRules/usePrefillAlertConditions';
 import CreateAlertPage from 'pages/CreateAlert';
 import { MemoryRouter, Route } from 'react-router-dom';
 import { act, fireEvent, render } from 'tests/test-utils';
@@ -41,6 +42,15 @@ jest.mock('hooks/useSafeNavigate', () => ({
 		safeNavigate: jest.fn(),
 	}),
 }));
+jest
+	.spyOn(usePrefillAlertConditions, 'usePrefillAlertConditions')
+	.mockReturnValue({
+		matchType: '3',
+		op: '1',
+		target: 100,
+		targetUnit: 'rpm',
+	});
+
 describe('Anomaly Alert Documentation Redirection', () => {
 	let mockWindowOpen: jest.Mock;
 

frontend/src/container/CreateAlertRule/index.tsx

@@ -3,6 +3,7 @@ import logEvent from 'api/common/logEvent';
 import { ENTITY_VERSION_V4 } from 'constants/app';
 import { QueryParams } from 'constants/query';
 import FormAlertRules, { AlertDetectionTypes } from 'container/FormAlertRules';
+import { ThresholdProps } from 'container/NewWidget/RightContainer/Threshold/types';
 import { useGetCompositeQueryParam } from 'hooks/queryBuilder/useGetCompositeQueryParam';
 import history from 'lib/history';
 import { useEffect, useState } from 'react';
@@ -32,6 +33,12 @@ function CreateRules(): JSX.Element {
 			? AlertTypes.ANOMALY_BASED_ALERT
 			: queryParams.get(QueryParams.alertType);
 
+	const { thresholds } = (location.state as {
+		thresholds: ThresholdProps[];
+	}) || {
+		thresholds: null,
+	};
+
 	const compositeQuery = useGetCompositeQueryParam();
 	function getAlertTypeFromDataSource(): AlertTypes | null {
 		if (!compositeQuery) {
@@ -96,7 +103,9 @@ function CreateRules(): JSX.Element {
 		}
 
 		const generatedUrl = `${location.pathname}?${queryParams.toString()}`;
-		history.replace(generatedUrl);
+		history.replace(generatedUrl, {
+			thresholds,
+		});
 	};
 
 	useEffect(() => {

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

@@ -48,8 +48,8 @@ function ChannelSelect({
 
 	if (hasError) {
 		notifications.error({
-			message: error.getErrorCode(),
-			description: error.getErrorMessage(),
+			message: error?.getErrorCode?.() || 'Error',
+			description: error?.getErrorMessage?.() || 'Something went wrong',
 		});
 	}
 

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

@@ -21,6 +21,24 @@
 	}
 }
 
+.form-alert-rules-container {
+	&.create-mode {
+		padding: 16px;
+	}
+}
+
+.triggered-alerts-container {
+	padding: 8px;
+}
+
+.alert-rules-list-container {
+	padding: 8px;
+}
+
+.planned-downtime-container {
+	padding: 8px;
+}
+
 .steps-container {
 	width: 80%;
 }

frontend/src/container/FormAlertRules/RuleOptions.tsx

@@ -390,7 +390,7 @@ function RuleOptions({
 				<Space direction="vertical" size="large">
 					{ruleType !== AlertDetectionTypes.ANOMALY_DETECTION_ALERT && (
 						<Space direction="horizontal" align="center">
-							<Form.Item noStyle name={['condition', 'target']}>
+							<Form.Item noStyle>
 								<InputNumber
 									addonBefore={t('field_threshold')}
 									value={alertDef?.condition?.target}

frontend/src/container/FormAlertRules/__tests__/usePrefillAlertConditions.test.ts

@@ -0,0 +1,125 @@
+import { renderHook } from '@testing-library/react';
+
+import { usePrefillAlertConditions } from '../usePrefillAlertConditions';
+
+const TEST_MAPPINGS = {
+	op: {
+		'>': '1',
+		'<': '2',
+		'=': '3',
+	},
+	matchType: {
+		avg: '3',
+		sum: '4',
+	},
+};
+
+jest.mock('react-router-dom-v5-compat', () => {
+	const mockThreshold1 = {
+		index: '0d11f426-a02e-48da-867c-b79c6ef1ff06',
+		isEditEnabled: false,
+		keyIndex: 1,
+		selectedGraph: 'graph',
+		thresholdColor: 'Orange',
+		thresholdFormat: 'Text',
+		thresholdLabel: 'Caution',
+		thresholdOperator: '>',
+		thresholdTableOptions: 'A',
+		thresholdUnit: 'rpm',
+		thresholdValue: 800,
+	};
+	const mockThreshold2 = {
+		index: 'edbe8ef2-fa54-4cb9-b343-7afe883bb714',
+		isEditEnabled: false,
+		keyIndex: 0,
+		selectedGraph: 'graph',
+		thresholdColor: 'Red',
+		thresholdFormat: 'Text',
+		thresholdLabel: 'Danger',
+		thresholdOperator: '<',
+		thresholdTableOptions: 'A',
+		thresholdUnit: 'rpm',
+		thresholdValue: 900,
+	};
+	return {
+		...jest.requireActual('react-router-dom-v5-compat'),
+		useLocation: jest.fn().mockReturnValue({
+			state: {
+				thresholds: [mockThreshold1, mockThreshold2],
+			},
+		}),
+	};
+});
+
+const mockStagedQuery = {
+	builder: {
+		queryData: [
+			{
+				reduceTo: 'avg',
+			},
+		],
+	},
+};
+
+describe('usePrefillAlertConditions', () => {
+	it('returns the correct matchType for a single query', () => {
+		const { result } = renderHook(() =>
+			usePrefillAlertConditions(mockStagedQuery as any),
+		);
+		expect(result.current.matchType).toBe(TEST_MAPPINGS.matchType.avg);
+	});
+
+	it('returns null matchType for a single query with unsupported time aggregation', () => {
+		const { result } = renderHook(() =>
+			usePrefillAlertConditions({
+				builder: { queryData: [{ reduceTo: 'p90' }] },
+			} as any),
+		);
+		expect(result.current.matchType).toBe(null);
+	});
+
+	it('returns the correct matchType for multiple queries with same time aggregation', () => {
+		const { result } = renderHook(() =>
+			usePrefillAlertConditions({
+				builder: {
+					queryData: [
+						{
+							reduceTo: 'avg',
+						},
+						{
+							reduceTo: 'avg',
+						},
+					],
+				},
+			} as any),
+		);
+		expect(result.current.matchType).toBe(TEST_MAPPINGS.matchType.avg);
+	});
+
+	it('returns null matchType for multiple queries with different time aggregation', () => {
+		const { result } = renderHook(() =>
+			usePrefillAlertConditions({
+				builder: {
+					queryData: [
+						{
+							reduceTo: 'avg',
+						},
+						{
+							reduceTo: 'sum',
+						},
+					],
+				},
+			} as any),
+		);
+		expect(result.current.matchType).toBe(null);
+	});
+
+	it('returns the correct op, target, targetUnit from the higher priority threshold for multiple thresholds', () => {
+		const { result } = renderHook(() =>
+			usePrefillAlertConditions(mockStagedQuery as any),
+		);
+		expect(result.current.op).toBe(TEST_MAPPINGS.op['<']);
+		expect(result.current.target).toBe(900);
+		expect(result.current.targetUnit).toBe('rpm');
+	});
+});

frontend/src/container/FormAlertRules/index.tsx

@@ -57,6 +57,7 @@ import {
 	StepContainer,
 	StepHeading,
 } from './styles';
+import { usePrefillAlertConditions } from './usePrefillAlertConditions';
 import { getSelectedQueryOptions } from './utils';
 
 export enum AlertDetectionTypes {
@@ -113,6 +114,9 @@ function FormAlertRules({
 		handleSetConfig,
 		redirectWithQueryBuilderData,
 	} = useQueryBuilder();
+	const { matchType, op, target, targetUnit } = usePrefillAlertConditions(
+		stagedQuery,
+	);
 
 	useEffect(() => {
 		handleSetConfig(panelType || PANEL_TYPES.TIME_SERIES, dataSource);
@@ -266,6 +270,13 @@ function FormAlertRules({
 			...initialValue,
 			broadcastToAll: !broadcastToSpecificChannels,
 			ruleType,
+			condition: {
+				...initialValue.condition,
+				matchType: initialValue.condition.matchType ?? matchType ?? '',
+				op: initialValue.condition.op ?? op ?? '',
+				target: initialValue.condition.target ?? target ?? 0,
+				targetUnit: initialValue.condition.targetUnit ?? targetUnit ?? '',
+			},
 		});
 
 		setDetectionMethod(ruleType);
@@ -755,7 +766,12 @@ function FormAlertRules({
 		<>
 			{Element}
 
-			<div id="top">
+			<div
+				id="top"
+				className={`form-alert-rules-container ${
+					isRuleCreated ? 'create-mode' : 'edit-mode'
+				}`}
+			>
 				<div className="overview-header">
 					<div className="alert-type-container">
 						{isNewRule && (

frontend/src/container/FormAlertRules/usePrefillAlertConditions.ts

@@ -0,0 +1,87 @@
+import { ThresholdProps } from 'container/NewWidget/RightContainer/Threshold/types';
+import { useMemo } from 'react';
+import { useLocation } from 'react-router-dom-v5-compat';
+import { Query } from 'types/api/queryBuilder/queryBuilderData';
+
+const THRESHOLD_COLORS_SORTING_ORDER = ['Red', 'Orange', 'Green', 'Blue'];
+
+export const usePrefillAlertConditions = (
+	stagedQuery: Query | null,
+): {
+	matchType: string | null;
+	op: string | null;
+	target: number | undefined;
+	targetUnit: string | undefined;
+} => {
+	const location = useLocation();
+
+	// Extract and set match type
+	const reduceTo = useMemo(() => {
+		if (!stagedQuery) return null;
+		const isSameTimeAggregation = stagedQuery.builder.queryData.every(
+			(queryData) =>
+				queryData.reduceTo === stagedQuery.builder.queryData[0].reduceTo,
+		);
+		return isSameTimeAggregation
+			? stagedQuery.builder.queryData[0].reduceTo
+			: null;
+	}, [stagedQuery]);
+
+	const matchType = useMemo(() => {
+		switch (reduceTo) {
+			case 'avg':
+				return '3';
+			case 'sum':
+				return '4';
+			default:
+				return null;
+		}
+	}, [reduceTo]);
+
+	// Extract and set threshold operator, value and unit
+	const threshold = useMemo(() => {
+		const { thresholds } = (location.state as {
+			thresholds: ThresholdProps[];
+		}) || {
+			thresholds: null,
+		};
+		if (!thresholds || thresholds.length === 0) return null;
+		const sortedThresholds = thresholds.sort((a, b) => {
+			const aIndex = THRESHOLD_COLORS_SORTING_ORDER.indexOf(
+				a.thresholdColor || '',
+			);
+			const bIndex = THRESHOLD_COLORS_SORTING_ORDER.indexOf(
+				b.thresholdColor || '',
+			);
+			return aIndex - bIndex;
+		});
+		return sortedThresholds[0];
+	}, [location.state]);
+
+	const thresholdOperator = useMemo(() => {
+		const op = threshold?.thresholdOperator;
+		switch (op) {
+			case '>':
+			case '>=':
+				return '1';
+			case '<':
+			case '<=':
+				return '2';
+			case '=':
+				return '3';
+			default:
+				return null;
+		}
+	}, [threshold]);
+
+	const thresholdUnit = useMemo(() => threshold?.thresholdUnit, [threshold]);
+
+	const thresholdValue = useMemo(() => threshold?.thresholdValue, [threshold]);
+
+	return {
+		matchType,
+		op: thresholdOperator,
+		target: thresholdValue,
+		targetUnit: thresholdUnit,
+	};
+};

frontend/src/container/InfraMonitoringK8s/commonUtils.tsx

@@ -285,9 +285,13 @@ export const getFiltersFromParams = (
 ): IBuilderQuery['filters'] | null => {
 	const filtersFromParams = searchParams.get(queryKey);
 	if (filtersFromParams) {
-		const decoded = decodeURIComponent(filtersFromParams);
-		const parsed = JSON.parse(decoded);
-		return parsed as IBuilderQuery['filters'];
+		try {
+			const decoded = decodeURIComponent(filtersFromParams);
+			const parsed = JSON.parse(decoded);
+			return parsed as IBuilderQuery['filters'];
+		} catch (error) {
+			return null;
+		}
 	}
 	return null;
 };

frontend/src/container/ListAlertRules/ListAlert.tsx

@@ -105,7 +105,7 @@ function ListAlert({ allAlertRules, refetch }: ListAlertProps): JSX.Element {
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, []);
 
-	const onEditHandler = (record: GettableAlert) => (): void => {
+	const onEditHandler = (record: GettableAlert, openInNewTab: boolean): void => {
 		const compositeQuery = mapQueryDataFromApi(record.condition.compositeQuery);
 		params.set(
 			QueryParams.compositeQuery,
@@ -117,7 +117,12 @@ function ListAlert({ allAlertRules, refetch }: ListAlertProps): JSX.Element {
 		params.set(QueryParams.ruleId, record.id.toString());
 
 		setEditLoader(false);
-		history.push(`${ROUTES.ALERT_OVERVIEW}?${params.toString()}`);
+
+		if (openInNewTab) {
+			window.open(`${ROUTES.ALERT_OVERVIEW}?${params.toString()}`, '_blank');
+		} else {
+			history.push(`${ROUTES.ALERT_OVERVIEW}?${params.toString()}`);
+		}
 	};
 
 	const onCloneHandler = (
@@ -250,9 +255,15 @@ function ListAlert({ allAlertRules, refetch }: ListAlertProps): JSX.Element {
 				}
 				return 0;
 			},
-			render: (value, record): JSX.Element => (
-				<Typography.Link onClick={onEditHandler(record)}>{value}</Typography.Link>
-			),
+			render: (value, record): JSX.Element => {
+				const onClickHandler = (e: React.MouseEvent<HTMLElement>): void => {
+					e.stopPropagation();
+					e.preventDefault();
+					onEditHandler(record, e.metaKey || e.ctrlKey);
+				};
+
+				return <Typography.Link onClick={onClickHandler}>{value}</Typography.Link>;
+			},
 			sortOrder: sortedInfo.columnKey === 'name' ? sortedInfo.order : null,
 		},
 		{
@@ -311,12 +322,20 @@ function ListAlert({ allAlertRules, refetch }: ListAlertProps): JSX.Element {
 						/>,
 						<ColumnButton
 							key="2"
-							onClick={onEditHandler(record)}
+							onClick={(): void => onEditHandler(record, false)}
 							type="link"
 							loading={editLoader}
 						>
 							Edit
 						</ColumnButton>,
+						<ColumnButton
+							key="3"
+							onClick={(): void => onEditHandler(record, true)}
+							type="link"
+							loading={editLoader}
+						>
+							Edit in New Tab
+						</ColumnButton>,
 						<ColumnButton
 							key="3"
 							onClick={onCloneHandler(record)}
@@ -341,7 +360,7 @@ function ListAlert({ allAlertRules, refetch }: ListAlertProps): JSX.Element {
 		defaultCurrent: Number(paginationParam) || 1,
 	};
 	return (
-		<>
+		<div className="alert-rules-list-container">
 			<SearchContainer>
 				<Search
 					placeholder="Search by Alert Name, Severity and Labels"
@@ -378,7 +397,7 @@ function ListAlert({ allAlertRules, refetch }: ListAlertProps): JSX.Element {
 				onChange={handleChange}
 				pagination={paginationConfig}
 			/>
-		</>
+		</div>
 	);
 }
 

frontend/src/container/ListOfDashboard/DashboardsList.tsx

@@ -57,6 +57,7 @@ import {
 	Radius,
 	RotateCw,
 	Search,
+	SquareArrowOutUpRight,
 } from 'lucide-react';
 // #TODO: lucide will be removing brand icons like Github in future, in that case we can use simple icons
 // see more: https://github.com/lucide-icons/lucide/issues/94
@@ -440,13 +441,7 @@ function DashboardsList(): JSX.Element {
 									placement="left"
 									overlayClassName="title-toolip"
 								>
-									<div
-										className="title-link"
-										onClick={(e): void => {
-											e.stopPropagation();
-											safeNavigate(getLink());
-										}}
-									>
+									<div className="title-link" onClick={onClickHandler}>
 										<img
 											src={dashboard?.image || Base64Icons[0]}
 											alt="dashboard-image"
@@ -494,6 +489,18 @@ function DashboardsList(): JSX.Element {
 												>
 													View
 												</Button>
+												<Button
+													type="text"
+													className="action-btn"
+													icon={<SquareArrowOutUpRight size={12} />}
+													onClick={(e): void => {
+														e.stopPropagation();
+														e.preventDefault();
+														window.open(getLink(), '_blank');
+													}}
+												>
+													Open in New Tab
+												</Button>
 												<Button
 													type="text"
 													className="action-btn"

frontend/src/container/ListOfDashboard/RequestDashboardBtn.tsx

@@ -65,7 +65,7 @@ export function RequestDashboardBtn(): JSX.Element {
 				>
 					Browse dashboard templates
 				</a>{' '}
-				or Request new template →
+				or request a new template →
 			</Typography.Text>
 
 			<div className="form-section">

frontend/src/container/LogDetailedView/TableView/TableViewActions.tsx

@@ -2,7 +2,6 @@
 import './TableViewActions.styles.scss';
 
 import { Color } from '@signozhq/design-tokens';
-import Convert from 'ansi-to-html';
 import { Button, Popover, Spin, Tooltip, Tree } from 'antd';
 import GroupByIcon from 'assets/CustomIcons/GroupByIcon';
 import cx from 'classnames';
@@ -12,22 +11,19 @@ import { OPERATORS } from 'constants/queryBuilder';
 import ROUTES from 'constants/routes';
 import { RESTRICTED_SELECTED_FIELDS } from 'container/LogsFilters/config';
 import { MetricsType } from 'container/MetricsApplication/constant';
-import dompurify from 'dompurify';
 import { ArrowDownToDot, ArrowUpFromDot, Ellipsis } from 'lucide-react';
 import { useTimezone } from 'providers/Timezone';
 import React, { useCallback, useMemo, useState } from 'react';
 import { useLocation } from 'react-router-dom';
 import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
-import { FORBID_DOM_PURIFY_TAGS } from 'utils/app';
 
 import { DataType } from '../TableView';
 import {
-	escapeHtml,
 	filterKeyForField,
 	getFieldAttributes,
+	getSanitizedLogBody,
 	parseFieldValue,
 	removeEscapeCharacters,
-	unescapeString,
 } from '../utils';
 import useAsyncJSONProcessing from './useAsyncJSONProcessing';
 
@@ -51,8 +47,6 @@ interface ITableViewActionsProps {
 	) => () => void;
 }
 
-const convert = new Convert();
-
 // Memoized Tree Component
 const MemoizedTree = React.memo<{ treeData: any[] }>(({ treeData }) => (
 	<Tree
@@ -146,11 +140,7 @@ export default function TableViewActions(
 		if (record.field !== 'body') return { __html: '' };
 
 		return {
-			__html: convert.toHtml(
-				dompurify.sanitize(unescapeString(escapeHtml(record.value)), {
-					FORBID_TAGS: [...FORBID_DOM_PURIFY_TAGS],
-				}),
-			),
+			__html: getSanitizedLogBody(record.value, { shouldEscapeHtml: true }),
 		};
 	}, [record.field, record.value]);
 

frontend/src/container/LogDetailedView/TableView/useAsyncJSONProcessing.ts

@@ -4,6 +4,8 @@ import { useEffect, useRef, useState } from 'react';
 
 import { jsonToDataNodes, recursiveParseJSON } from '../utils';
 
+const MAX_BODY_BYTES = 100 * 1024; // 100 KB
+
 // Hook for async JSON processing
 const useAsyncJSONProcessing = (
 	value: string,
@@ -31,6 +33,12 @@ const useAsyncJSONProcessing = (
 			return (): void => {};
 		}
 
+		// Avoid processing if the json is too large
+		const byteSize = new Blob([value]).size;
+		if (byteSize > MAX_BODY_BYTES) {
+			return (): void => {};
+		}
+
 		processingRef.current = true;
 		setJsonState({ isLoading: true, treeData: null, error: null });
 

frontend/src/container/LogDetailedView/util.test.ts

@@ -1,6 +1,11 @@
 import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
 
-import { flattenObject, getDataTypes, recursiveParseJSON } from './utils';
+import {
+	flattenObject,
+	getDataTypes,
+	getSanitizedLogBody,
+	recursiveParseJSON,
+} from './utils';
 
 describe('recursiveParseJSON', () => {
 	it('should return an empty object if the input is not valid JSON', () => {
@@ -185,3 +190,146 @@ describe('Get Data Types utils', () => {
 		expect(getDataTypes([2.5, 3, 1])).toBe(DataTypes.ArrayFloat64);
 	});
 });
+
+describe('getSanitizedLogBody', () => {
+	it('should return sanitized HTML with default options (shouldEscapeHtml: false)', () => {
+		const input = '<script>alert("xss")</script>Hello World';
+		const result = getSanitizedLogBody(input);
+
+		// Should remove script tags and return sanitized HTML
+		expect(result).not.toContain('<script>');
+		expect(result).toContain('Hello World');
+	});
+
+	it('should escape HTML when shouldEscapeHtml is true', () => {
+		const input = '<script>alert("xss")</script>Hello World';
+		const result = getSanitizedLogBody(input, { shouldEscapeHtml: true });
+
+		// Should escape HTML entities
+		expect(result).toContain('&lt;script&gt;');
+		expect(result).toContain('&lt;/script&gt;');
+		expect(result).toContain('Hello World');
+	});
+
+	it('should handle ANSI color codes correctly', () => {
+		const input = '\x1b[32mHello\x1b[0m World';
+		const result = getSanitizedLogBody(input);
+
+		// Should convert ANSI codes to HTML spans
+		expect(result).toContain('<span');
+		expect(result).toContain('Hello');
+		expect(result).toContain('World');
+	});
+
+	it('should handle unescaped strings correctly', () => {
+		const input = 'Hello\\nWorld\\tTab';
+		const result = getSanitizedLogBody(input);
+
+		// Should unescape the string
+		expect(result).toContain('Hello');
+		expect(result).toContain('World');
+	});
+
+	it('should handle empty string input', () => {
+		const result = getSanitizedLogBody('');
+		expect(result).toBe('');
+	});
+
+	it('should handle null/undefined input gracefully', () => {
+		const result1 = getSanitizedLogBody(null as any);
+		const result2 = getSanitizedLogBody(undefined as any);
+
+		expect(result1).toBe('');
+		expect(result2).toBe('');
+	});
+
+	it('should handle special characters and entities', () => {
+		const input = '& < > " \' &amp; &lt; &gt;';
+		const result = getSanitizedLogBody(input, { shouldEscapeHtml: true });
+
+		// Should escape HTML entities
+		expect(result).toContain('&amp;');
+		expect(result).toContain('&lt;');
+		expect(result).toContain('&gt;');
+		expect(result).toContain('&quot;');
+	});
+
+	it('should handle complex HTML with mixed content', () => {
+		const input =
+			'<div><p>Hello <strong>World</strong></p><script>alert("xss")</script></div>';
+		const result = getSanitizedLogBody(input);
+
+		// Should keep safe HTML but remove script tags
+		expect(result).toContain('<div>');
+		expect(result).toContain('<p>');
+		expect(result).toContain('<strong>');
+		expect(result).toContain('Hello');
+		expect(result).toContain('World');
+		expect(result).not.toContain('<script>');
+	});
+
+	it('should handle JSON-like strings', () => {
+		const input = '{"key": "value", "nested": {"inner": "data"}}';
+		const result = getSanitizedLogBody(input);
+
+		// Should preserve JSON structure
+		expect(result).toContain('{');
+		expect(result).toContain('}');
+		expect(result).toContain('key');
+		expect(result).toContain('value');
+	});
+
+	it('should handle URLs and links', () => {
+		const input = 'Visit https://example.com for more info';
+		const result = getSanitizedLogBody(input);
+
+		// Should preserve the URL text
+		expect(result).toContain('https://example.com');
+		expect(result).toContain('Visit');
+		expect(result).toContain('info');
+	});
+
+	it('should handle error cases and return fallback', () => {
+		// Mock console.error to avoid noise in tests
+		const originalConsoleError = console.error;
+		console.error = jest.fn();
+
+		// Create a scenario that might cause an error
+		const input = 'Normal text';
+		const result = getSanitizedLogBody(input);
+
+		// Should return the processed text normally
+		expect(result).toContain('Normal text');
+
+		// Restore console.error
+		console.error = originalConsoleError;
+	});
+
+	it('should handle different escape scenarios correctly', () => {
+		const input1 = '<div>Hello</div>';
+		const result1 = getSanitizedLogBody(input1, { shouldEscapeHtml: false });
+		const result2 = getSanitizedLogBody(input1, { shouldEscapeHtml: true });
+
+		// Without escaping, should keep HTML structure
+		expect(result1).toContain('<div>');
+		expect(result1).toContain('</div>');
+
+		// With escaping, should escape HTML entities
+		expect(result2).toContain('&lt;div&gt;');
+		expect(result2).toContain('&lt;/div&gt;');
+	});
+
+	it('should handle ANSI codes with HTML escaping', () => {
+		const input = '\x1b[32mHello\x1b[0m <script>World</script>';
+		const result = getSanitizedLogBody(input, { shouldEscapeHtml: true });
+
+		// Should handle both ANSI codes and HTML escaping
+		expect(result).toContain('<span');
+		expect(result).toContain('Hello');
+		expect(result).toContain('&lt;script&gt;');
+		expect(result).toContain('World');
+		expect(result).toContain('&lt;/script&gt;');
+	});
+});
+
+//

frontend/src/container/LogDetailedView/utils.tsx

@@ -1,13 +1,18 @@
+import Convert from 'ansi-to-html';
 import { DataNode } from 'antd/es/tree';
 import { MetricsType } from 'container/MetricsApplication/constant';
+import dompurify from 'dompurify';
 import { uniqueId } from 'lodash-es';
 import { ILog, ILogAggregateAttributesResources } from 'types/api/logs/log';
 import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
+import { FORBID_DOM_PURIFY_TAGS } from 'utils/app';
 
 import BodyTitleRenderer from './BodyTitleRenderer';
 import { typeToArrayTypeMapper } from './config';
 import { AnyObject, IFieldAttributes } from './LogDetailedView.types';
 
+const convertInstance = new Convert();
+
 export const recursiveParseJSON = (obj: string): Record<string, unknown> => {
 	try {
 		const value = JSON.parse(obj);
@@ -336,3 +341,21 @@ export function findKeyPath(
 	});
 	return finalPath;
 }
+
+export const getSanitizedLogBody = (
+	text: string,
+	options: { shouldEscapeHtml?: boolean } = {},
+): string => {
+	const { shouldEscapeHtml = false } = options;
+	const escapedText = shouldEscapeHtml ? escapeHtml(text) : text;
+	try {
+		return convertInstance.toHtml(
+			dompurify.sanitize(unescapeString(escapedText), {
+				FORBID_TAGS: [...FORBID_DOM_PURIFY_TAGS],
+			}),
+		);
+	} catch (error) {
+		console.error('Error sanitizing text', error, text);
+		return '{}';
+	}
+};

frontend/src/container/LogsExplorerChart/index.tsx

@@ -8,9 +8,11 @@ import getChartData, { GetChartDataProps } from 'lib/getChartData';
 import GetMinMax from 'lib/getMinMax';
 import { colors } from 'lib/getRandomColor';
 import { memo, useCallback, useMemo } from 'react';
-import { useDispatch } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import { useLocation } from 'react-router-dom';
 import { UpdateTimeInterval } from 'store/actions';
+import { AppState } from 'store/reducers';
+import { GlobalReducer } from 'types/reducer/globalTime';
 
 import { LogsExplorerChartProps } from './LogsExplorerChart.interfaces';
 import { CardStyled } from './LogsExplorerChart.styled';
@@ -27,6 +29,11 @@ function LogsExplorerChart({
 	const urlQuery = useUrlQuery();
 	const location = useLocation();
 	const { safeNavigate } = useSafeNavigate();
+
+	// Access global time state for min/max range
+	const { minTime, maxTime } = useSelector<AppState, GlobalReducer>(
+		(state) => state.globalTime,
+	);
 	const handleCreateDatasets: Required<GetChartDataProps>['createDataset'] = useCallback(
 		(element, index, allLabels) => ({
 			data: element,
@@ -83,6 +90,15 @@ function LogsExplorerChart({
 		[data, handleCreateDatasets],
 	);
 
+	// Convert nanosecond timestamps to milliseconds for Chart.js
+	const { chartMinTime, chartMaxTime } = useMemo(
+		() => ({
+			chartMinTime: minTime ? Math.floor(minTime / 1e6) : undefined,
+			chartMaxTime: maxTime ? Math.floor(maxTime / 1e6) : undefined,
+		}),
+		[minTime, maxTime],
+	);
+
 	return (
 		<CardStyled className={className}>
 			{isLoading ? (
@@ -95,6 +111,8 @@ function LogsExplorerChart({
 					type="bar"
 					animate
 					onDragSelect={onDragSelect}
+					minTime={chartMinTime}
+					maxTime={chartMaxTime}
 				/>
 			)}
 		</CardStyled>

frontend/src/container/LogsExplorerList/InfinityTableView/TableRow.tsx

@@ -23,6 +23,7 @@ interface TableRowProps {
 	index: number;
 	log: Record<string, unknown>;
 	handleSetActiveContextLog: (log: ILog) => void;
+	onShowLogDetails: (log: ILog) => void;
 	logs: ILog[];
 	hasActions: boolean;
 	fontSize: FontSize;
@@ -33,6 +34,7 @@ export default function TableRow({
 	index,
 	log,
 	handleSetActiveContextLog,
+	onShowLogDetails,
 	logs,
 	hasActions,
 	fontSize,
@@ -57,6 +59,11 @@ export default function TableRow({
 		[currentLog, handleSetActiveContextLog],
 	);
 
+	const handleShowLogDetails = useCallback(() => {
+		if (!onShowLogDetails || !currentLog) return;
+		onShowLogDetails(currentLog);
+	}, [currentLog, onShowLogDetails]);
+
 	const hasSingleColumn =
 		tableColumns.filter((column) => column.key !== 'state-indicator').length ===
 		1;
@@ -89,6 +96,7 @@ export default function TableRow({
 						key={column.key}
 						fontSize={fontSize}
 						columnKey={column.key as string}
+						onClick={handleShowLogDetails}
 					>
 						{cloneElement(children, props)}
 					</TableCellStyled>

frontend/src/container/LogsExplorerList/InfinityTableView/index.tsx

@@ -108,6 +108,7 @@ const InfinityTable = forwardRef<TableVirtuosoHandle, InfinityTableProps>(
 					logs={tableViewProps.logs}
 					hasActions
 					fontSize={tableViewProps.fontSize}
+					onShowLogDetails={onSetActiveLog}
 				/>
 			),
 			[
@@ -115,6 +116,7 @@ const InfinityTable = forwardRef<TableVirtuosoHandle, InfinityTableProps>(
 				tableColumns,
 				tableViewProps.fontSize,
 				tableViewProps.logs,
+				onSetActiveLog,
 			],
 		);
 
@@ -146,12 +148,6 @@ const InfinityTable = forwardRef<TableVirtuosoHandle, InfinityTableProps>(
 			[tableColumns, isDarkMode, tableViewProps?.fontSize],
 		);
 
-		const handleClickExpand = (index: number): void => {
-			if (!onSetActiveLog) return;
-
-			onSetActiveLog(tableViewProps.logs[index]);
-		};
-
 		return (
 			<>
 				<TableVirtuoso
@@ -183,9 +179,6 @@ const InfinityTable = forwardRef<TableVirtuosoHandle, InfinityTableProps>(
 					{...(infitiyTableProps?.onEndReached
 						? { endReached: infitiyTableProps.onEndReached }
 						: {})}
-					onClick={(event: any): void => {
-						handleClickExpand(event.target.parentElement.parentElement.dataset.index);
-					}}
 				/>
 
 				{activeContextLog && (

frontend/src/container/LogsExplorerList/InfinityTableView/styles.ts

@@ -91,7 +91,7 @@ export const TableHeaderCellStyled = styled.th<TableHeaderCellStyledProps>`
 	line-height: 18px;
 	letter-spacing: -0.07px;
 	background: ${(props): string => (props.$isDarkMode ? '#0b0c0d' : '#fdfdfd')};
-	${({ $isDragColumn }): string => ($isDragColumn ? 'cursor: col-resize;' : '')}
+	${({ $isDragColumn }): string => ($isDragColumn ? 'cursor: grab;' : '')}
 
 	${({ fontSize }): string =>
 		fontSize === FontSize.SMALL

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

@@ -1,4 +1,6 @@
+import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
 import ROUTES from 'constants/routes';
+import { noop } from 'lodash-es';
 import {
 	logsPaginationQueryRangeSuccessResponse,
 	PAGE_SIZE,
@@ -6,6 +8,7 @@ import {
 import { server } from 'mocks-server/server';
 import { rest } from 'msw';
 import LogsExplorer from 'pages/LogsExplorer';
+import { QueryBuilderContext } from 'providers/QueryBuilder';
 import React from 'react';
 import { I18nextProvider } from 'react-i18next';
 import { VirtuosoMockContext } from 'react-virtuoso';
@@ -19,10 +22,68 @@ import {
 	waitFor,
 } from 'tests/test-utils';
 import { QueryRangePayload } from 'types/api/metrics/getQueryRange';
-import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
+import { IBuilderQuery, Query } from 'types/api/queryBuilder/queryBuilderData';
+import { v4 as uuid } from 'uuid';
 
 const API_ENDPOINT = 'http://localhost/api/v4/query_range';
 
+// State to track when UpdateTimeInterval has been called and what the updated times should be
+let mockGlobalTimeState: {
+	minTime: number;
+	maxTime: number;
+	selectedTime: any;
+} | null = null;
+
+// Mock UpdateTimeInterval to update the mock state that useSelector will use
+jest.mock('store/actions', () => {
+	const originalModule = jest.requireActual('store/actions');
+	const GetMinMax = jest.requireActual('lib/getMinMax').default;
+
+	return {
+		...originalModule,
+		UpdateTimeInterval: (
+			interval: any,
+			dateTimeRange: [number, number] = [0, 0],
+		): ((dispatch: any) => void) => (): void => {
+			// Get the original min and max times
+			const { maxTime: originalMaxTime, minTime: originalMinTime } = GetMinMax(
+				interval,
+				dateTimeRange,
+			);
+
+			// Add 5 minutes to both times to ensure they are different
+			const fiveMinutesInNanoseconds = 5 * 60 * 1000 * 1000000;
+			const maxTime = originalMaxTime + fiveMinutesInNanoseconds;
+			const minTime = originalMinTime + fiveMinutesInNanoseconds;
+
+			// Update the mock state
+			mockGlobalTimeState = { minTime, maxTime, selectedTime: interval };
+		},
+	};
+});
+
+// Mock the Redux store's getState method to return updated global time
+const store = jest.requireActual('store').default;
+const originalGetState = store.getState;
+const getStateSpy = jest.spyOn(store, 'getState');
+
+getStateSpy.mockImplementation(() => {
+	const originalState = originalGetState();
+
+	// If we have mock global time state, update the globalTime in the store state
+	if (mockGlobalTimeState) {
+		return {
+			...originalState,
+			globalTime: {
+				...originalState.globalTime,
+				...mockGlobalTimeState,
+			},
+		};
+	}
+
+	return originalState;
+});
+
 jest.mock('uplot', () => {
 	const paths = {
 		spline: jest.fn(),
@@ -66,6 +127,7 @@ jest.mock(
 			return <div>MockLogsExplorerChart</div>;
 		},
 );
+
 jest.mock(
 	'container/QueryBuilder/filters/QueryBuilderSearchV2/QueryBuilderSearchV2',
 	() =>
@@ -169,24 +231,28 @@ export const verifyFiltersAndOrderBy = (queryData: IBuilderQuery): void => {
 	}
 };
 
+let capturedPayloads: QueryRangePayload[];
 describe.skip('LogsExplorerViews Pagination', () => {
 	// Array to store captured API request payloads
-	let capturedPayloads: QueryRangePayload[];
 
 	beforeEach(() => {
 		// Use real timers for test setup, especially for server delays
 		jest.useRealTimers();
 		// Reset captured payloads array before each test
 		capturedPayloads = [];
+		// Reset mock call count for consistent test behavior
+		mockGlobalTimeState = null; // Reset mock state
 		// Setup the mock server to intercept and capture requests
 		setupServer(capturedPayloads);
 	});
 
-	afterAll(() => {
+	afterAll((): void => {
 		// Use fake timers after the tests are done.
 		jest.useFakeTimers();
 		// Explicitly set the fake system time if needed by other tests
 		jest.setSystemTime(new Date('2023-10-20'));
+		// Clean up mock state completely
+		mockGlobalTimeState = null;
 	});
 
 	it('should fetch next page with correct payload when scrolled to end', async () => {
@@ -299,3 +365,179 @@ describe.skip('LogsExplorerViews Pagination', () => {
 		verifyFiltersAndOrderBy(thirdQueryData);
 	});
 });
+
+interface LogsExplorerWithMockContextProps {
+	initialStagedQuery: Query;
+	initialCurrentQuery: Query;
+	onStateChange?: (stagedQuery: Query, currentQuery: Query) => void;
+}
+
+function LogsExplorerWithMockContext({
+	initialStagedQuery,
+	initialCurrentQuery,
+	onStateChange,
+}: LogsExplorerWithMockContextProps): JSX.Element {
+	const [stagedQuery, setStagedQuery] = React.useState(initialStagedQuery);
+	const [currentQuery, setCurrentQuery] = React.useState(initialCurrentQuery);
+
+	// Notify parent component when state changes
+	React.useEffect(() => {
+		if (onStateChange) {
+			onStateChange(stagedQuery, currentQuery);
+		}
+	}, [stagedQuery, currentQuery, onStateChange]);
+
+	const handleRunQuery = React.useCallback((): void => {
+		// Generate new IDs for both queries
+		const newStagedQueryId = uuid();
+		const newCurrentQueryId = uuid();
+
+		// Update the queries with new IDs
+		const updatedStagedQuery = {
+			...stagedQuery,
+			id: newStagedQueryId,
+		};
+		const updatedCurrentQuery = {
+			...currentQuery,
+			id: newCurrentQueryId,
+		};
+
+		setStagedQuery(updatedStagedQuery);
+		setCurrentQuery(updatedCurrentQuery);
+	}, [stagedQuery, currentQuery]);
+
+	const contextValue = React.useMemo(
+		() => ({
+			isDefaultQuery: (): boolean => false,
+			currentQuery,
+			stagedQuery,
+			setSupersetQuery: jest.fn(),
+			supersetQuery: initialQueriesMap.logs,
+			initialDataSource: null,
+			panelType: PANEL_TYPES.LIST,
+			lastUsedQuery: 0,
+			setLastUsedQuery: noop,
+			handleSetQueryData: noop,
+			handleSetFormulaData: noop,
+			handleSetQueryItemData: noop,
+			removeQueryBuilderEntityByIndex: noop,
+			removeQueryTypeItemByIndex: noop,
+			addNewBuilderQuery: noop,
+			cloneQuery: noop,
+			addNewFormula: noop,
+			addNewQueryItem: noop,
+			handleRunQuery,
+			resetQuery: noop,
+			updateAllQueriesOperators: (): Query => initialQueriesMap.logs,
+			updateQueriesData: (): Query => initialQueriesMap.logs,
+			initQueryBuilderData: noop,
+			handleOnUnitsChange: noop,
+			isStagedQueryUpdated: (): boolean => false,
+		}),
+		[currentQuery, stagedQuery, handleRunQuery],
+	);
+
+	const virtuosoContextValue = React.useMemo(
+		() => ({
+			viewportHeight: 500,
+			itemHeight: 100,
+		}),
+		[],
+	);
+
+	return (
+		<QueryBuilderContext.Provider value={contextValue as any}>
+			<VirtuosoMockContext.Provider value={virtuosoContextValue}>
+				<LogsExplorer />
+			</VirtuosoMockContext.Provider>
+		</QueryBuilderContext.Provider>
+	);
+}
+
+LogsExplorerWithMockContext.defaultProps = {
+	onStateChange: undefined,
+};
+
+describe('Logs Explorer -> stage and run query', () => {
+	let mockStagedQuery: Query;
+	let mockCurrentQuery: Query;
+
+	beforeEach(() => {
+		// Use real timers for test setup, especially for server delays
+		jest.useRealTimers();
+		// Reset captured payloads array before each test
+		capturedPayloads = [];
+		// Reset mock call count for consistent test behavior
+		mockGlobalTimeState = null; // Reset mock state
+
+		// Setup the mock server to intercept and capture requests
+		setupServer(capturedPayloads);
+
+		// Initialize mock queries with initial IDs
+		mockStagedQuery = {
+			...initialQueriesMap.logs,
+			id: uuid(),
+		};
+		mockCurrentQuery = {
+			...initialQueriesMap.logs,
+			id: uuid(),
+		};
+	});
+
+	it('should recalculate the start and end timestamps for list and graph queries in logs explorer', async () => {
+		// Setup the mock server to intercept and capture requests
+
+		// Store initial IDs for comparison
+		const initialStagedQueryId = mockStagedQuery.id;
+		const initialCurrentQueryId = mockCurrentQuery.id;
+
+		let currentStagedQuery = mockStagedQuery;
+		let currentCurrentQuery = mockCurrentQuery;
+
+		const handleStateChange = (stagedQuery: Query, currentQuery: Query): void => {
+			currentStagedQuery = stagedQuery;
+			currentCurrentQuery = currentQuery;
+		};
+
+		render(
+			<LogsExplorerWithMockContext
+				initialStagedQuery={mockStagedQuery}
+				initialCurrentQuery={mockCurrentQuery}
+				onStateChange={handleStateChange}
+			/>,
+		);
+
+		await waitFor(() => {
+			expect(
+				screen.queryByText('pending_data_placeholder'),
+			).not.toBeInTheDocument();
+		});
+
+		// check for no data state to not be present
+		await waitFor(() => {
+			expect(screen.queryByText(/No logs yet/)).not.toBeInTheDocument();
+		});
+
+		await act(async () => {
+			fireEvent.click(
+				screen.getByRole('button', {
+					name: /stage & run query/i,
+				}),
+			);
+		});
+
+		await waitFor(() => {
+			expect(capturedPayloads.length).toBe(2);
+		});
+
+		// Verify that the IDs have changed
+		expect(currentStagedQuery.id).not.toBe(initialStagedQueryId);
+		expect(currentCurrentQuery.id).not.toBe(initialCurrentQueryId);
+
+		const firstPayload = capturedPayloads[0];
+		const secondPayload = capturedPayloads[1];
+
+		expect(firstPayload.start).not.toEqual(secondPayload.start);
+		expect(firstPayload.end).not.toEqual(secondPayload.end);
+	});
+});

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

@@ -36,7 +36,7 @@ function ColumnWithLink({
 		],
 	});
 
-	const handleOnClick = (operation: string) => (): void => {
+	const handleOnClick = (operation: string, openInNewTab: boolean): void => {
 		navigateToTrace({
 			servicename,
 			operation,
@@ -45,12 +45,17 @@ function ColumnWithLink({
 			selectedTraceTags,
 			apmToTraceQuery,
 			safeNavigate,
+			openInNewTab,
 		});
 	};
 
 	return (
 		<Tooltip placement="topLeft" title={text}>
-			<Typography.Link onClick={handleOnClick(text)}>{text}</Typography.Link>
+			<Typography.Link
+				onClick={(e): void => handleOnClick(text, e.metaKey || e.ctrlKey)}
+			>
+				{text}
+			</Typography.Link>
 		</Tooltip>
 	);
 }

frontend/src/container/MetricsApplication/TopOperationsTable.tsx

@@ -50,7 +50,7 @@ function TopOperationsTable({
 
 	const params = useParams<{ servicename: string }>();
 
-	const handleOnClick = (operation: string): void => {
+	const handleOnClick = (operation: string, openInNewTab: boolean): void => {
 		const { servicename: encodedServiceName } = params;
 		const servicename = decodeURIComponent(encodedServiceName);
 
@@ -92,6 +92,7 @@ function TopOperationsTable({
 			selectedTraceTags,
 			apmToTraceQuery: preparedQuery,
 			safeNavigate,
+			openInNewTab,
 		});
 	};
 
@@ -110,7 +111,18 @@ function TopOperationsTable({
 		},
 		render: (text: string): JSX.Element => (
 			<Tooltip placement="topLeft" title={text}>
-				<Typography.Link onClick={(): void => handleOnClick(text)}>
+				<Typography.Link
+					onClick={(e): void => {
+						e.stopPropagation();
+						e.preventDefault();
+
+						if (e.metaKey || e.ctrlKey) {
+							handleOnClick(text, true); // open in new tab
+						} else {
+							handleOnClick(text, false); // open in current tab
+						}
+					}}
+				>
 					{text}
 				</Typography.Link>
 			</Tooltip>

frontend/src/container/MetricsApplication/types.ts

@@ -22,6 +22,7 @@ export interface NavigateToTraceProps {
 	selectedTraceTags: string;
 	apmToTraceQuery: Query;
 	safeNavigate: (path: string) => void;
+	openInNewTab: boolean;
 }
 
 export interface DatabaseCallsRPSProps extends DatabaseCallProps {

frontend/src/container/MetricsApplication/utils.ts

@@ -19,6 +19,7 @@ export const navigateToTrace = ({
 	selectedTraceTags,
 	apmToTraceQuery,
 	safeNavigate,
+	openInNewTab = false,
 }: NavigateToTraceProps): void => {
 	const urlParams = new URLSearchParams();
 	urlParams.set(
@@ -35,7 +36,11 @@ export const navigateToTrace = ({
 		QueryParams.compositeQuery
 	}=${JSONCompositeQuery}`;
 
-	safeNavigate(newTraceExplorerPath);
+	if (openInNewTab) {
+		window.open(newTraceExplorerPath, '_blank');
+	} else {
+		safeNavigate(newTraceExplorerPath);
+	}
 };
 
 export const getNearestHighestBucketValue = (

frontend/src/container/MySettings/TimezoneAdaptation/TimezoneAdaptation.tsx

@@ -52,6 +52,7 @@ function TimezoneAdaptation(): JSX.Element {
 					checked={isAdaptationEnabled}
 					onChange={handleSwitchChange}
 					style={getSwitchStyles()}
+					data-testid="timezone-adaptation-switch"
 				/>
 			</div>
 

frontend/src/container/MySettings/index.tsx

@@ -200,6 +200,7 @@ function MySettings(): JSX.Element {
 								checked={sideNavPinned}
 								onChange={handleSideNavPinnedChange}
 								loading={isUpdatingUserPreference}
+								data-testid="side-nav-pinned-switch"
 							/>
 						</div>
 

frontend/src/container/NewWidget/RightContainer/index.tsx

@@ -130,7 +130,11 @@ function RightContainer({
 	const selectedGraphType =
 		GraphTypes.find((e) => e.name === selectedGraph)?.display || '';
 
-	const onCreateAlertsHandler = useCreateAlerts(selectedWidget, 'panelView');
+	const onCreateAlertsHandler = useCreateAlerts(
+		selectedWidget,
+		'panelView',
+		thresholds,
+	);
 
 	const allowThreshold = panelTypeVsThreshold[selectedGraph];
 	const allowSoftMinMax = panelTypeVsSoftMinMax[selectedGraph];

frontend/src/container/OrganizationSettings/Members/index.tsx

@@ -115,12 +115,23 @@ function UserFunction({
 				role,
 			});
 			onUpdateDetailsHandler();
-			notifications.success({
-				message: t('success', {
-					ns: 'common',
-				}),
-			});
+
+			if (role !== accessLevel) {
+				notifications.success({
+					message: 'User details updated successfully',
+					description:
+						'The user details have been updated successfully. Please request the user to logout and login again to access the platform with updated privileges.',
+				});
+			} else {
+				notifications.success({
+					message: t('success', {
+						ns: 'common',
+					}),
+				});
+			}
+
 			setIsUpdateLoading(false);
+			setIsModalVisible(false);
 		} catch (error) {
 			notifications.error({
 				message: (error as APIError).getErrorCode(),

frontend/src/container/PipelinePage/PipelineListsView/utils.tsx

@@ -1,6 +1,7 @@
 import { ColumnType } from 'antd/lib/table/interface';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
 import dayjs from 'dayjs';
+import { cloneDeep } from 'lodash-es';
 import update from 'react-addons-update';
 import { ProcessorData } from 'types/api/pipeline/def';
 
@@ -81,7 +82,7 @@ export function getProcessorUpdatedRow<T extends ProcessorData>(
 	dragIndex: number,
 	hoverIndex: number,
 ): Array<T> {
-	const data = processorData;
+	const data = cloneDeep(processorData);
 	const item = data.splice(dragIndex, 1)[0];
 	data.splice(hoverIndex, 0, item);
 	data.forEach((item, index) => {

frontend/src/container/PlannedDowntime/PlannedDowntime.styles.scss

@@ -151,7 +151,6 @@
 }
 
 .planned-downtime-container {
-	margin-top: 70px;
 	display: flex;
 	justify-content: center;
 	width: 100%;

frontend/src/container/QueryBuilder/filters/QueryBuilderSearch/utils.ts

@@ -7,7 +7,7 @@ import { TagFilter } from 'types/api/queryBuilder/queryBuilderData';
 import { orderByValueDelimiter } from '../OrderByFilter/utils';
 
 // eslint-disable-next-line no-useless-escape
-export const tagRegexp = /^\s*(.*?)\s*(\bIN\b|\bNOT_IN\b|\bLIKE\b|\bNOT_LIKE\b|\bREGEX\b|\bNOT_REGEX\b|=|!=|\bEXISTS\b|\bNOT_EXISTS\b|\bCONTAINS\b|\bNOT_CONTAINS\b|>=|>|<=|<|\bHAS\b|\bNHAS\b)\s*(.*)$/gi;
+export const tagRegexp = /^\s*(.*?)\s*(\bIN\b|\bNOT_IN\b|\bLIKE\b|\bNOT_LIKE\b|\bILIKE\b|\bNOT_ILIKE\b|\bREGEX\b|\bNOT_REGEX\b|=|!=|\bEXISTS\b|\bNOT_EXISTS\b|\bCONTAINS\b|\bNOT_CONTAINS\b|>=|>|<=|<|\bHAS\b|\bNHAS\b)\s*(.*)$/gi;
 
 export function isInNInOperator(value: string): boolean {
 	return value === OPERATORS.IN || value === OPERATORS.NIN;
@@ -79,6 +79,10 @@ export function getOperatorValue(op: string): string {
 			return 'contains';
 		case 'NOT_CONTAINS':
 			return 'ncontains';
+		case 'ILIKE':
+			return 'ilike';
+		case 'NOT_ILIKE':
+			return 'notilike';
 		default:
 			return op;
 	}

frontend/src/container/SideNav/NavItem/NavItem.tsx

@@ -16,6 +16,7 @@ export default function NavItem({
 	onTogglePin,
 	isPinned,
 	showIcon,
+	dataTestId,
 }: {
 	item: SidebarItem;
 	isActive: boolean;
@@ -24,6 +25,7 @@ export default function NavItem({
 	onTogglePin?: (item: SidebarItem) => void;
 	isPinned?: boolean;
 	showIcon?: boolean;
+	dataTestId?: string;
 }): JSX.Element {
 	const { label, icon, isBeta, isNew } = item;
 
@@ -47,6 +49,7 @@ export default function NavItem({
 				}
 				onClick(event);
 			}}
+			data-testid={dataTestId}
 		>
 			{showIcon && <div className="nav-item-active-marker" />}
 			<div className={cx('nav-item-data', isBeta ? 'beta-tag' : '')}>
@@ -96,4 +99,5 @@ NavItem.defaultProps = {
 	onTogglePin: undefined,
 	isPinned: false,
 	showIcon: false,
+	dataTestId: undefined,
 };

frontend/src/container/SideNav/SideNav.styles.scss

@@ -830,7 +830,7 @@
 
 	& span {
 		display: block;
-		max-width: 170px;
+		max-width: 286px;
 		white-space: nowrap; /* Prevents line breaks */
 		overflow: hidden; /* Hides overflowing content */
 		text-overflow: ellipsis;
@@ -841,7 +841,7 @@
 	.ant-dropdown-menu {
 		margin-left: 8px !important;
 		padding: 0px !important;
-		width: 216px !important;
+		width: 360px !important;
 		border-radius: 3px !important;
 
 		// Glass blur

frontend/src/container/SideNav/SideNav.tsx

@@ -465,22 +465,26 @@ function SideNav({ isPinned }: { isPinned: boolean }): JSX.Element {
 						</div>
 					),
 					disabled: true,
+					dataTestId: 'logged-in-as-nav-item',
 				},
 				{ type: 'divider' as const },
 				{
 					key: 'account',
 					label: 'Account Settings',
+					dataTestId: 'account-settings-nav-item',
 				},
 				{
 					key: 'workspace',
 					label: 'Workspace Settings',
 					disabled: isWorkspaceBlocked,
+					dataTestId: 'workspace-settings-nav-item',
 				},
 				...(isEnterpriseSelfHostedUser || isCommunityEnterpriseUser
 					? [
 							{
 								key: 'license',
 								label: 'Manage License',
+								dataTestId: 'manage-license-nav-item',
 							},
 					  ]
 					: []),
@@ -490,6 +494,7 @@ function SideNav({ isPinned }: { isPinned: boolean }): JSX.Element {
 					label: (
 						<span className="user-settings-dropdown-logout-section">Sign out</span>
 					),
+					dataTestId: 'logout-nav-item',
 				},
 			].filter(Boolean),
 		[
@@ -561,6 +566,9 @@ function SideNav({ isPinned }: { isPinned: boolean }): JSX.Element {
 				if (dropdownItems.length === 0) {
 					return [
 						...prevState,
+						{
+							type: 'divider',
+						},
 						{
 							key: changelogKey,
 							label: (
@@ -571,12 +579,17 @@ function SideNav({ isPinned }: { isPinned: boolean }): JSX.Element {
 							),
 							icon: <ScrollText size={14} />,
 							itemKey: changelogKey,
+							isExternal: true,
+							url: 'https://signoz.io/changelog/',
 						},
 					];
 				}
 
 				return [
 					...prevState,
+					{
+						type: 'divider',
+					},
 					{
 						type: 'group',
 						label: "WHAT's NEW",
@@ -592,6 +605,8 @@ function SideNav({ isPinned }: { isPinned: boolean }): JSX.Element {
 						),
 						icon: <ScrollText size={14} />,
 						itemKey: changelogKey,
+						isExternal: true,
+						url: 'https://signoz.io/changelog/',
 					},
 				];
 			});
@@ -764,7 +779,6 @@ function SideNav({ isPinned }: { isPinned: boolean }): JSX.Element {
 					break;
 				case 'changelog-1':
 				case 'changelog-2':
-				case CHANGELOG_LABEL.toLowerCase().replace(' ', '-'):
 					toggleChangelogModal();
 					break;
 				default:
@@ -1035,7 +1049,7 @@ function SideNav({ isPinned }: { isPinned: boolean }): JSX.Element {
 									trigger={['click']}
 								>
 									<div className="nav-item">
-										<div className="nav-item-data">
+										<div className="nav-item-data" data-testid="help-support-nav-item">
 											<div className="nav-item-icon">{helpSupportMenuItem.icon}</div>
 
 											<div className="nav-item-label">{helpSupportMenuItem.label}</div>
@@ -1055,7 +1069,7 @@ function SideNav({ isPinned }: { isPinned: boolean }): JSX.Element {
 									trigger={['click']}
 								>
 									<div className="nav-item">
-										<div className="nav-item-data">
+										<div className="nav-item-data" data-testid="settings-nav-item">
 											<div className="nav-item-icon">{userSettingsMenuItem.icon}</div>
 
 											<div className="nav-item-label">{userSettingsMenuItem.label}</div>

frontend/src/container/SideNav/menuItems.tsx

@@ -1,6 +1,7 @@
 import { RocketOutlined } from '@ant-design/icons';
 import ROUTES from 'constants/routes';
 import {
+	ArrowUpRight,
 	BarChart2,
 	BellDot,
 	Binoculars,
@@ -355,7 +356,12 @@ export const settingsMenuItems: SidebarItem[] = [
 export const helpSupportDropdownMenuItems: SidebarItem[] = [
 	{
 		key: 'documentation',
-		label: 'Documentation',
+		label: (
+			<div className="nav-item-label-container">
+				<span>Documentation</span>
+				<ArrowUpRight size={14} />
+			</div>
+		),
 		icon: <Book size={14} />,
 		isExternal: true,
 		url: 'https://signoz.io/docs',
@@ -363,7 +369,13 @@ export const helpSupportDropdownMenuItems: SidebarItem[] = [
 	},
 	{
 		key: 'github',
-		label: 'GitHub',
+		label: (
+			<div className="nav-item-label-container">
+				<span>GitHub</span>
+				<ArrowUpRight size={14} />
+			</div>
+		),
+
 		icon: <Github size={14} />,
 		isExternal: true,
 		url: 'https://github.com/signoz/signoz',
@@ -371,7 +383,12 @@ export const helpSupportDropdownMenuItems: SidebarItem[] = [
 	},
 	{
 		key: 'slack',
-		label: 'Community Slack',
+		label: (
+			<div className="nav-item-label-container">
+				<span>Community Slack</span>
+				<ArrowUpRight size={14} />
+			</div>
+		),
 		icon: <Slack size={14} />,
 		isExternal: true,
 		url: 'https://signoz.io/slack',

frontend/src/container/TriggeredAlerts/index.tsx

@@ -69,13 +69,15 @@ function TriggeredAlerts(): JSX.Element {
 	}
 
 	return (
-		<TriggerComponent
-			allAlerts={alertsResponse?.data?.payload || []}
-			selectedFilter={selectedFilter}
-			selectedGroup={selectedGroup}
-			onSelectedFilterChange={handleSelectedFilterChange}
-			onSelectedGroupChange={handleSelectedGroupChange}
-		/>
+		<div className="triggered-alerts-container">
+			<TriggerComponent
+				allAlerts={alertsResponse?.data?.payload || []}
+				selectedFilter={selectedFilter}
+				selectedGroup={selectedGroup}
+				onSelectedFilterChange={handleSelectedFilterChange}
+				onSelectedGroupChange={handleSelectedGroupChange}
+			/>
+		</div>
 	);
 }
 

frontend/src/hooks/queryBuilder/useCreateAlerts.tsx

@@ -5,6 +5,7 @@ import { DEFAULT_ENTITY_VERSION } from 'constants/app';
 import { QueryParams } from 'constants/query';
 import ROUTES from 'constants/routes';
 import { MenuItemKeys } from 'container/GridCardLayout/WidgetHeader/contants';
+import { ThresholdProps } from 'container/NewWidget/RightContainer/Threshold/types';
 import { useNotifications } from 'hooks/useNotifications';
 import { getDashboardVariables } from 'lib/dashbaordVariables/getDashboardVariables';
 import { prepareQueryRangePayload } from 'lib/dashboard/prepareQueryRangePayload';
@@ -19,7 +20,11 @@ import { Widgets } from 'types/api/dashboard/getAll';
 import { GlobalReducer } from 'types/reducer/globalTime';
 import { getGraphType } from 'utils/getGraphType';
 
-const useCreateAlerts = (widget?: Widgets, caller?: string): VoidFunction => {
+const useCreateAlerts = (
+	widget?: Widgets,
+	caller?: string,
+	thresholds?: ThresholdProps[],
+): VoidFunction => {
 	const queryRangeMutation = useMutation(getQueryRangeFormat);
 
 	const { selectedTime: globalSelectedInterval } = useSelector<
@@ -66,13 +71,17 @@ const useCreateAlerts = (widget?: Widgets, caller?: string): VoidFunction => {
 					widget?.query,
 				);
 
-				history.push(
-					`${ROUTES.ALERTS_NEW}?${QueryParams.compositeQuery}=${encodeURIComponent(
-						JSON.stringify(updatedQuery),
-					)}&${QueryParams.panelTypes}=${widget.panelTypes}&version=${
-						selectedDashboard?.data.version || DEFAULT_ENTITY_VERSION
-					}`,
-				);
+				const url = `${ROUTES.ALERTS_NEW}?${
+					QueryParams.compositeQuery
+				}=${encodeURIComponent(JSON.stringify(updatedQuery))}&${
+					QueryParams.panelTypes
+				}=${widget.panelTypes}&version=${
+					selectedDashboard?.data.version || DEFAULT_ENTITY_VERSION
+				}`;
+
+				history.push(url, {
+					thresholds,
+				});
 			},
 			onError: () => {
 				notifications.error({

frontend/src/hooks/queryBuilder/useOperatorType.ts

@@ -17,6 +17,8 @@ export const operatorTypeMapper: Record<string, OperatorType> = {
 	[OPERATORS['>']]: 'SINGLE_VALUE',
 	[OPERATORS.LIKE]: 'SINGLE_VALUE',
 	[OPERATORS.NLIKE]: 'SINGLE_VALUE',
+	[OPERATORS.ILIKE]: 'SINGLE_VALUE',
+	[OPERATORS.NOTILIKE]: 'SINGLE_VALUE',
 	[OPERATORS.REGEX]: 'SINGLE_VALUE',
 	[OPERATORS.NREGEX]: 'SINGLE_VALUE',
 	[OPERATORS.CONTAINS]: 'SINGLE_VALUE',