fix: issues with like and ilike fixed in v4 qb (#6018)

* fix: added time range key for query and local storage handling

* chore: fix jest test cases

* fix: send single element array for only variable option as well

* fix: intermediate stale data should not be shown

.github/CODEOWNERS

@@ -5,6 +5,6 @@
 /frontend/ @YounixM
 /frontend/src/container/MetricsApplication @srikanthccv
 /frontend/src/container/NewWidget/RightContainer/types.ts @srikanthccv
-/deploy/ @prashant-shahi
-/sample-apps/ @prashant-shahi
-.github @prashant-shahi
+/deploy/ @SigNoz/devops
+/sample-apps/ @SigNoz/devops
+.github @SigNoz/devops

.github/ISSUE_TEMPLATE/request_dashboard.md

@@ -0,0 +1,49 @@
+---
+name: Request Dashboard
+about: Request a new dashboard for the SigNoz Dashboards repository
+title: '[Dashboard Request] '
+labels: 'dashboard-template'
+assignees: ''
+
+---
+
+<!-- Use this template to request a new dashboard for the SigNoz Dashboards repository. Providing detailed information will help us understand your needs better and speed up the dashboard creation process. -->
+
+## Dashboard Name
+
+<!-- Provide the name for the requested dashboard. Be specific (e.g., "MySQL Monitoring Dashboard"). -->
+
+## Expected Dashboard Sections and Panels
+
+(Can be tweaked (add or remove panels/sections) according to available metrics)
+
+### Section Name
+
+<!-- Brief description of what this section should display (e.g., "Resource usage metrics for MySQL database"). -->
+
+### Panel Name
+
+<!-- Description of the panel (e.g., "Displays current CPU usage, memory usage, etc."). -->
+
+<!-- - **Example:**
+  - **Section**: Resource Metrics
+    - **Panel**: CPU Usage - Displays the current CPU usage across all database instances.
+    - **Panel**: Memory Usage - Displays the total memory used by the MySQL process. -->
+
+<!-- Repeat this format for any additional sections or panels. -->
+
+## Expected Dashboard Variables
+
+<!-- List any dashboard variables that should be included in the dashboard. Examples could be `deployment.environment`, `hostname`, `region`, etc. -->
+
+## Additional Comments or Requirements
+
+<!-- Include any other details, special requirements, or specific visualizations you'd like to request for this dashboard. -->
+
+## References or Screenshots
+
+<!-- Add any references or screenshots of requested dashboard if available. -->
+
+## 📋 Notes
+
+Please review the [CONTRIBUTING.md](https://github.com/SigNoz/dashboards/blob/main/CONTRIBUTING.md) for guidelines on dashboard structure, naming conventions, and how to submit a pull request.

.github/workflows/build.yaml

@@ -8,6 +8,13 @@ on:
       - release/v*
 
 jobs:
+  check-no-ee-references:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - name: Run check
+        run: make check-no-ee-references
+
   build-frontend:
     runs-on: ubuntu-latest
     steps:
@@ -36,7 +43,6 @@ jobs:
         run: |
           echo 'INTERCOM_APP_ID="${{ secrets.INTERCOM_APP_ID }}"' > frontend/.env
           echo 'SEGMENT_ID="${{ secrets.SEGMENT_ID }}"' >> frontend/.env
-          echo 'CLARITY_PROJECT_ID="${{ secrets.CLARITY_PROJECT_ID }}"' >> frontend/.env
       - name: Install dependencies
         run: cd frontend && yarn install
       - name: Run ESLint

.github/workflows/push.yaml

@@ -9,7 +9,6 @@ on:
       - v*
 
 jobs:
-
   image-build-and-push-query-service:
     runs-on: ubuntu-latest
     steps:
@@ -151,7 +150,6 @@ jobs:
         run: |
           echo 'INTERCOM_APP_ID="${{ secrets.INTERCOM_APP_ID }}"' > frontend/.env
           echo 'SEGMENT_ID="${{ secrets.SEGMENT_ID }}"' >> frontend/.env
-          echo 'CLARITY_PROJECT_ID="${{ secrets.CLARITY_PROJECT_ID }}"' >> frontend/.env
           echo 'SENTRY_AUTH_TOKEN="${{ secrets.SENTRY_AUTH_TOKEN }}"' >> frontend/.env
           echo 'SENTRY_ORG="${{ secrets.SENTRY_ORG }}"' >> frontend/.env
           echo 'SENTRY_PROJECT_ID="${{ secrets.SENTRY_PROJECT_ID }}"' >> frontend/.env

.gitignore

@@ -67,3 +67,6 @@ e2e/.auth
 # go
 vendor/
 **/main/**
+
+# git-town
+.git-branches.toml

.scripts/commentLinesForSetup.sh

@@ -1,7 +0,0 @@
-#!/bin/sh
-
-# It Comments out the Line Query-Service & Frontend Section of deploy/docker/clickhouse-setup/docker-compose.yaml
-# Update the Line Numbers when deploy/docker/clickhouse-setup/docker-compose.yaml chnages.
-# Docs Ref.: https://github.com/SigNoz/signoz/blob/main/CONTRIBUTING.md#contribute-to-frontend-with-docker-installation-of-signoz
-
-sed -i 38,62's/.*/# &/' .././deploy/docker/clickhouse-setup/docker-compose.yaml

CONTRIBUTING.md

@@ -30,6 +30,7 @@ Also, have a look at these [good first issues label](https://github.com/SigNoz/s
     - [To run ClickHouse setup](#41-to-run-clickhouse-setup-recommended-for-local-development)
 - [Contribute to SigNoz Helm Chart](#5-contribute-to-signoz-helm-chart-)
     - [To run helm chart for local development](#51-to-run-helm-chart-for-local-development)
+- [Contribute to Dashboards](#6-contribute-to-dashboards-)
 - [Other Ways to Contribute](#other-ways-to-contribute)
 
 # 1. General Instructions 📝
@@ -369,6 +370,17 @@ curl -sL https://github.com/SigNoz/signoz/raw/develop/sample-apps/hotrod/hotrod-
  
 ---
 
+# 6. Contribute to Dashboards 📈
+
+**Need to Update: [https://github.com/SigNoz/dashboards](https://github.com/SigNoz/dashboards)**
+
+To contribute a new dashboard template for any service, follow the contribution guidelines in the [Dashboard Contributing Guide](https://github.com/SigNoz/dashboards/blob/main/CONTRIBUTING.md). In brief:
+
+1. Create a dashboard JSON file.
+2. Add a README file explaining the dashboard, the metrics ingested, and the configurations needed.
+3. Include screenshots of the dashboard in the `assets/` directory.
+4. Submit a pull request for review.
+
 ## Other Ways to Contribute
 
 There are many other ways to get involved with the community and to participate in this project:
@@ -379,7 +391,6 @@ There are many other ways to get involved with the community and to participate
 - Help answer questions on forums such as Stack Overflow and [SigNoz Community Slack Channel](https://signoz.io/slack).
 - Tell others about the project on Twitter, your blog, etc.
 
-
 Again, Feel free to ping us on [`#contributing`](https://signoz-community.slack.com/archives/C01LWQ8KS7M) or [`#contributing-frontend`](https://signoz-community.slack.com/archives/C027134DM8B) on our slack community if you need any help on this :)
 
 Thank You!

Makefile

@@ -178,6 +178,15 @@ clear-swarm-ch:
 	@docker run --rm -v "$(PWD)/$(SWARM_DIRECTORY)/data:/pwd" busybox \
 	sh -c "cd /pwd && rm -rf clickhouse*/* zookeeper-*/*"
 
+check-no-ee-references:
+	@echo "Checking for 'ee' package references in 'pkg' directory..."
+	@if grep -R --include="*.go" '.*/ee/.*' pkg/; then \
+		echo "Error: Found references to 'ee' packages in 'pkg' directory"; \
+		exit 1; \
+	else \
+		echo "No references to 'ee' packages found in 'pkg' directory"; \
+	fi
+
 test:
 	go test ./pkg/query-service/app/metrics/...
 	go test ./pkg/query-service/cache/...

deploy/docker-swarm/clickhouse-setup/clickhouse-config.xml

@@ -23,6 +23,9 @@
             [1]: https://github.com/pocoproject/poco/blob/poco-1.9.4-release/Foundation/include/Poco/Logger.h#L105-L114
         -->
         <level>information</level>
+        <formatting>
+            <type>json</type>
+        </formatting>
         <log>/var/log/clickhouse-server/clickhouse-server.log</log>
         <errorlog>/var/log/clickhouse-server/clickhouse-server.err.log</errorlog>
         <!-- Rotation policy
@@ -649,12 +652,12 @@
 
          See https://clickhouse.com/docs/en/engines/table-engines/mergetree-family/replication/#creating-replicated-tables
       -->
-    <!--
+    
     <macros>
         <shard>01</shard>
         <replica>example01-01-1</replica>
     </macros>
-    -->
+   
 
 
     <!-- Reloading interval for embedded dictionaries, in seconds. Default: 3600. -->

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

@@ -154,6 +154,8 @@ extensions:
 
 service:
   telemetry:
+    logs:
+      encoding: json
     metrics:
       address: 0.0.0.0:8888
   extensions: [health_check, zpages, pprof]

deploy/docker/clickhouse-setup/clickhouse-config.xml

@@ -23,6 +23,9 @@
             [1]: https://github.com/pocoproject/poco/blob/poco-1.9.4-release/Foundation/include/Poco/Logger.h#L105-L114
         -->
         <level>information</level>
+        <formatting>
+            <type>json</type>
+        </formatting>
         <log>/var/log/clickhouse-server/clickhouse-server.log</log>
         <errorlog>/var/log/clickhouse-server/clickhouse-server.err.log</errorlog>
         <!-- Rotation policy
@@ -649,12 +652,12 @@
 
          See https://clickhouse.com/docs/en/engines/table-engines/mergetree-family/replication/#creating-replicated-tables
       -->
-    <!--
+    
     <macros>
         <shard>01</shard>
         <replica>example01-01-1</replica>
     </macros>
-    -->
+   
 
 
     <!-- Reloading interval for embedded dictionaries, in seconds. Default: 3600. -->

deploy/docker/clickhouse-setup/otel-collector-config.yaml

@@ -158,6 +158,8 @@ exporters:
 
 service:
   telemetry:
+    logs:
+      encoding: json
     metrics:
       address: 0.0.0.0:8888
   extensions:

deploy/docker/common/nginx-config.conf

@@ -1,3 +1,8 @@
+map $http_upgrade $connection_upgrade {
+    default upgrade;
+    ''      close;
+}
+
 server {
     listen       3301;
     server_name  _;
@@ -42,6 +47,14 @@ server {
         proxy_read_timeout 600s; 
     }
 
+    location /ws {
+        proxy_pass  http://query-service:8080/ws;
+        proxy_http_version 1.1;
+        proxy_set_header Upgrade "websocket";
+        proxy_set_header Connection "upgrade";
+        proxy_read_timeout 86400;
+    }
+
     # redirect server error pages to the static page /50x.html
     #
     error_page   500 502 503 504  /50x.html;

ee/query-service/anomaly/daily.go

@@ -0,0 +1,44 @@
+package anomaly
+
+import (
+	"context"
+
+	querierV2 "go.signoz.io/signoz/pkg/query-service/app/querier/v2"
+	"go.signoz.io/signoz/pkg/query-service/app/queryBuilder"
+)
+
+type DailyProvider struct {
+	BaseSeasonalProvider
+}
+
+var _ BaseProvider = (*DailyProvider)(nil)
+
+func (dp *DailyProvider) GetBaseSeasonalProvider() *BaseSeasonalProvider {
+	return &dp.BaseSeasonalProvider
+}
+
+// NewDailyProvider uses the same generic option type
+func NewDailyProvider(opts ...GenericProviderOption[*DailyProvider]) *DailyProvider {
+	dp := &DailyProvider{
+		BaseSeasonalProvider: BaseSeasonalProvider{},
+	}
+
+	for _, opt := range opts {
+		opt(dp)
+	}
+
+	dp.querierV2 = querierV2.NewQuerier(querierV2.QuerierOptions{
+		Reader:        dp.reader,
+		Cache:         dp.cache,
+		KeyGenerator:  queryBuilder.NewKeyGenerator(),
+		FluxInterval:  dp.fluxInterval,
+		FeatureLookup: dp.ff,
+	})
+
+	return dp
+}
+
+func (p *DailyProvider) GetAnomalies(ctx context.Context, req *GetAnomaliesRequest) (*GetAnomaliesResponse, error) {
+	req.Seasonality = SeasonalityDaily
+	return p.getAnomalies(ctx, req)
+}

ee/query-service/anomaly/hourly.go

@@ -0,0 +1,44 @@
+package anomaly
+
+import (
+	"context"
+
+	querierV2 "go.signoz.io/signoz/pkg/query-service/app/querier/v2"
+	"go.signoz.io/signoz/pkg/query-service/app/queryBuilder"
+)
+
+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)
+	}
+
+	hp.querierV2 = querierV2.NewQuerier(querierV2.QuerierOptions{
+		Reader:        hp.reader,
+		Cache:         hp.cache,
+		KeyGenerator:  queryBuilder.NewKeyGenerator(),
+		FluxInterval:  hp.fluxInterval,
+		FeatureLookup: hp.ff,
+	})
+
+	return hp
+}
+
+func (p *HourlyProvider) GetAnomalies(ctx context.Context, req *GetAnomaliesRequest) (*GetAnomaliesResponse, error) {
+	req.Seasonality = SeasonalityHourly
+	return p.getAnomalies(ctx, req)
+}

ee/query-service/anomaly/params.go

@@ -0,0 +1,244 @@
+package anomaly
+
+import (
+	"math"
+	"time"
+
+	"go.signoz.io/signoz/pkg/query-service/common"
+	v3 "go.signoz.io/signoz/pkg/query-service/model/v3"
+)
+
+type Seasonality string
+
+const (
+	SeasonalityHourly Seasonality = "hourly"
+	SeasonalityDaily  Seasonality = "daily"
+	SeasonalityWeekly Seasonality = "weekly"
+)
+
+var (
+	oneWeekOffset = 24 * 7 * time.Hour.Milliseconds()
+	oneDayOffset  = 24 * time.Hour.Milliseconds()
+	oneHourOffset = time.Hour.Milliseconds()
+	fiveMinOffset = 5 * time.Minute.Milliseconds()
+)
+
+func (s Seasonality) IsValid() bool {
+	switch s {
+	case SeasonalityHourly, SeasonalityDaily, SeasonalityWeekly:
+		return true
+	default:
+		return false
+	}
+}
+
+type GetAnomaliesRequest struct {
+	Params      *v3.QueryRangeParamsV3
+	Seasonality Seasonality
+}
+
+type GetAnomaliesResponse struct {
+	Results []*v3.Result
+}
+
+// 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 *v3.QueryRangeParamsV3
+	// PastPeriodQuery is the query range params for past seasonal period
+	// 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 *v3.QueryRangeParamsV3
+	// 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 *v3.QueryRangeParamsV3
+	// 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 *v3.QueryRangeParamsV3
+
+	// 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 *v3.QueryRangeParamsV3
+	// 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 *v3.QueryRangeParamsV3
+}
+
+func updateStepInterval(req *v3.QueryRangeParamsV3) {
+	start := req.Start
+	end := req.End
+
+	req.Step = int64(math.Max(float64(common.MinAllowedStepInterval(start, end)), 60))
+	for _, q := range req.CompositeQuery.BuilderQueries {
+		// If the step interval is less than the minimum allowed step interval, set it to the minimum allowed step interval
+		if minStep := common.MinAllowedStepInterval(start, end); q.StepInterval < minStep {
+			q.StepInterval = minStep
+		}
+	}
+}
+
+func prepareAnomalyQueryParams(req *v3.QueryRangeParamsV3, seasonality Seasonality) *anomalyQueryParams {
+	start := req.Start
+	end := req.End
+
+	currentPeriodQuery := &v3.QueryRangeParamsV3{
+		Start:          start,
+		End:            end,
+		CompositeQuery: req.CompositeQuery.Clone(),
+		Variables:      make(map[string]interface{}, 0),
+		NoCache:        false,
+	}
+	updateStepInterval(currentPeriodQuery)
+
+	var pastPeriodStart, pastPeriodEnd int64
+
+	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 := &v3.QueryRangeParamsV3{
+		Start:          pastPeriodStart,
+		End:            pastPeriodEnd,
+		CompositeQuery: req.CompositeQuery.Clone(),
+		Variables:      make(map[string]interface{}, 0),
+		NoCache:        false,
+	}
+	updateStepInterval(pastPeriodQuery)
+
+	// seasonality growth trend
+	var currentGrowthPeriodStart, currentGrowthPeriodEnd int64
+	switch seasonality {
+	case SeasonalityWeekly:
+		currentGrowthPeriodStart = start - oneWeekOffset
+		currentGrowthPeriodEnd = end
+	case SeasonalityDaily:
+		currentGrowthPeriodStart = start - oneDayOffset
+		currentGrowthPeriodEnd = end
+	case SeasonalityHourly:
+		currentGrowthPeriodStart = start - oneHourOffset
+		currentGrowthPeriodEnd = end
+	}
+
+	currentGrowthQuery := &v3.QueryRangeParamsV3{
+		Start:          currentGrowthPeriodStart,
+		End:            currentGrowthPeriodEnd,
+		CompositeQuery: req.CompositeQuery.Clone(),
+		Variables:      make(map[string]interface{}, 0),
+		NoCache:        false,
+	}
+	updateStepInterval(currentGrowthQuery)
+
+	var pastGrowthPeriodStart, pastGrowthPeriodEnd int64
+	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 := &v3.QueryRangeParamsV3{
+		Start:          pastGrowthPeriodStart,
+		End:            pastGrowthPeriodEnd,
+		CompositeQuery: req.CompositeQuery.Clone(),
+		Variables:      make(map[string]interface{}, 0),
+		NoCache:        false,
+	}
+	updateStepInterval(pastGrowthQuery)
+
+	var past2GrowthPeriodStart, past2GrowthPeriodEnd int64
+	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 := &v3.QueryRangeParamsV3{
+		Start:          past2GrowthPeriodStart,
+		End:            past2GrowthPeriodEnd,
+		CompositeQuery: req.CompositeQuery.Clone(),
+		Variables:      make(map[string]interface{}, 0),
+		NoCache:        false,
+	}
+	updateStepInterval(past2GrowthQuery)
+
+	var past3GrowthPeriodStart, past3GrowthPeriodEnd int64
+	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 := &v3.QueryRangeParamsV3{
+		Start:          past3GrowthPeriodStart,
+		End:            past3GrowthPeriodEnd,
+		CompositeQuery: req.CompositeQuery.Clone(),
+		Variables:      make(map[string]interface{}, 0),
+		NoCache:        false,
+	}
+	updateStepInterval(past3GrowthQuery)
+
+	return &anomalyQueryParams{
+		CurrentPeriodQuery: currentPeriodQuery,
+		PastPeriodQuery:    pastPeriodQuery,
+		CurrentSeasonQuery: currentGrowthQuery,
+		PastSeasonQuery:    pastGrowthQuery,
+		Past2SeasonQuery:   past2GrowthQuery,
+		Past3SeasonQuery:   past3GrowthQuery,
+	}
+}
+
+type anomalyQueryResults struct {
+	CurrentPeriodResults []*v3.Result
+	PastPeriodResults    []*v3.Result
+	CurrentSeasonResults []*v3.Result
+	PastSeasonResults    []*v3.Result
+	Past2SeasonResults   []*v3.Result
+	Past3SeasonResults   []*v3.Result
+}

ee/query-service/anomaly/provider.go

@@ -0,0 +1,9 @@
+package anomaly
+
+import (
+	"context"
+)
+
+type Provider interface {
+	GetAnomalies(ctx context.Context, req *GetAnomaliesRequest) (*GetAnomaliesResponse, error)
+}

ee/query-service/anomaly/seasonal.go

@@ -0,0 +1,464 @@
+package anomaly
+
+import (
+	"context"
+	"math"
+	"time"
+
+	"go.signoz.io/signoz/pkg/query-service/cache"
+	"go.signoz.io/signoz/pkg/query-service/interfaces"
+	v3 "go.signoz.io/signoz/pkg/query-service/model/v3"
+	"go.signoz.io/signoz/pkg/query-service/postprocess"
+	"go.signoz.io/signoz/pkg/query-service/utils/labels"
+	"go.uber.org/zap"
+)
+
+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 WithCache[T BaseProvider](cache cache.Cache) GenericProviderOption[T] {
+	return func(p T) {
+		p.GetBaseSeasonalProvider().cache = cache
+	}
+}
+
+func WithKeyGenerator[T BaseProvider](keyGenerator cache.KeyGenerator) GenericProviderOption[T] {
+	return func(p T) {
+		p.GetBaseSeasonalProvider().keyGenerator = keyGenerator
+	}
+}
+
+func WithFeatureLookup[T BaseProvider](ff interfaces.FeatureLookup) GenericProviderOption[T] {
+	return func(p T) {
+		p.GetBaseSeasonalProvider().ff = ff
+	}
+}
+
+func WithReader[T BaseProvider](reader interfaces.Reader) GenericProviderOption[T] {
+	return func(p T) {
+		p.GetBaseSeasonalProvider().reader = reader
+	}
+}
+
+type BaseSeasonalProvider struct {
+	querierV2    interfaces.Querier
+	reader       interfaces.Reader
+	fluxInterval time.Duration
+	cache        cache.Cache
+	keyGenerator cache.KeyGenerator
+	ff           interfaces.FeatureLookup
+}
+
+func (p *BaseSeasonalProvider) getQueryParams(req *GetAnomaliesRequest) *anomalyQueryParams {
+	if !req.Seasonality.IsValid() {
+		req.Seasonality = SeasonalityDaily
+	}
+	return prepareAnomalyQueryParams(req.Params, req.Seasonality)
+}
+
+func (p *BaseSeasonalProvider) getResults(ctx context.Context, params *anomalyQueryParams) (*anomalyQueryResults, error) {
+	currentPeriodResults, _, err := p.querierV2.QueryRange(ctx, params.CurrentPeriodQuery)
+	if err != nil {
+		return nil, err
+	}
+
+	currentPeriodResults, err = postprocess.PostProcessResult(currentPeriodResults, params.CurrentPeriodQuery)
+	if err != nil {
+		return nil, err
+	}
+
+	pastPeriodResults, _, err := p.querierV2.QueryRange(ctx, params.PastPeriodQuery)
+	if err != nil {
+		return nil, err
+	}
+
+	pastPeriodResults, err = postprocess.PostProcessResult(pastPeriodResults, params.PastPeriodQuery)
+	if err != nil {
+		return nil, err
+	}
+
+	currentSeasonResults, _, err := p.querierV2.QueryRange(ctx, params.CurrentSeasonQuery)
+	if err != nil {
+		return nil, err
+	}
+
+	currentSeasonResults, err = postprocess.PostProcessResult(currentSeasonResults, params.CurrentSeasonQuery)
+	if err != nil {
+		return nil, err
+	}
+
+	pastSeasonResults, _, err := p.querierV2.QueryRange(ctx, params.PastSeasonQuery)
+	if err != nil {
+		return nil, err
+	}
+
+	pastSeasonResults, err = postprocess.PostProcessResult(pastSeasonResults, params.PastSeasonQuery)
+	if err != nil {
+		return nil, err
+	}
+
+	past2SeasonResults, _, err := p.querierV2.QueryRange(ctx, params.Past2SeasonQuery)
+	if err != nil {
+		return nil, err
+	}
+
+	past2SeasonResults, err = postprocess.PostProcessResult(past2SeasonResults, params.Past2SeasonQuery)
+	if err != nil {
+		return nil, err
+	}
+
+	past3SeasonResults, _, err := p.querierV2.QueryRange(ctx, params.Past3SeasonQuery)
+	if err != nil {
+		return nil, err
+	}
+
+	past3SeasonResults, err = postprocess.PostProcessResult(past3SeasonResults, params.Past3SeasonQuery)
+	if err != nil {
+		return nil, err
+	}
+
+	return &anomalyQueryResults{
+		CurrentPeriodResults: currentPeriodResults,
+		PastPeriodResults:    pastPeriodResults,
+		CurrentSeasonResults: currentSeasonResults,
+		PastSeasonResults:    pastSeasonResults,
+		Past2SeasonResults:   past2SeasonResults,
+		Past3SeasonResults:   past3SeasonResults,
+	}, nil
+}
+
+// getMatchingSeries gets the matching series from the query result
+// for the given series
+func (p *BaseSeasonalProvider) getMatchingSeries(queryResult *v3.Result, series *v3.Series) *v3.Series {
+	if queryResult == nil || len(queryResult.Series) == 0 {
+		return nil
+	}
+
+	for _, curr := range queryResult.Series {
+		currLabels := labels.FromMap(curr.Labels)
+		seriesLabels := labels.FromMap(series.Labels)
+		if currLabels.Hash() == seriesLabels.Hash() {
+			return curr
+		}
+	}
+	return nil
+}
+
+func (p *BaseSeasonalProvider) getAvg(series *v3.Series) float64 {
+	if series == nil || len(series.Points) == 0 {
+		return 0
+	}
+	var sum float64
+	for _, smpl := range series.Points {
+		sum += smpl.Value
+	}
+	return sum / float64(len(series.Points))
+}
+
+func (p *BaseSeasonalProvider) getStdDev(series *v3.Series) float64 {
+	if series == nil || len(series.Points) == 0 {
+		return 0
+	}
+	avg := p.getAvg(series)
+	var sum float64
+	for _, smpl := range series.Points {
+		sum += math.Pow(smpl.Value-avg, 2)
+	}
+	return math.Sqrt(sum / float64(len(series.Points)))
+}
+
+// getMovingAvg gets the moving average for the given series
+// for the given window size and start index
+func (p *BaseSeasonalProvider) getMovingAvg(series *v3.Series, movingAvgWindowSize, startIdx int) float64 {
+	if series == nil || len(series.Points) == 0 {
+		return 0
+	}
+	if startIdx >= len(series.Points)-movingAvgWindowSize {
+		startIdx = len(series.Points) - movingAvgWindowSize
+	}
+	var sum float64
+	points := series.Points[startIdx:]
+	for i := 0; i < movingAvgWindowSize && i < len(points); i++ {
+		sum += points[i].Value
+	}
+	avg := sum / float64(movingAvgWindowSize)
+	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(
+	series, prevSeries, currentSeasonSeries, pastSeasonSeries, past2SeasonSeries, past3SeasonSeries *v3.Series,
+) *v3.Series {
+	predictedSeries := &v3.Series{
+		Labels:      series.Labels,
+		LabelsArray: series.LabelsArray,
+		Points:      []v3.Point{},
+	}
+
+	// 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.Points {
+		predictedValue :=
+			p.getMovingAvg(prevSeries, movingAvgWindowSize, idx) +
+				p.getAvg(currentSeasonSeries) -
+				p.getMean(p.getAvg(pastSeasonSeries), p.getAvg(past2SeasonSeries), p.getAvg(past3SeasonSeries))
+
+		if predictedValue < 0 {
+			predictedValue = p.getMovingAvg(prevSeries, movingAvgWindowSize, idx)
+		}
+
+		zap.L().Info("predictedSeries",
+			zap.Float64("movingAvg", p.getMovingAvg(prevSeries, movingAvgWindowSize, idx)),
+			zap.Float64("avg", p.getAvg(currentSeasonSeries)),
+			zap.Float64("mean", p.getMean(p.getAvg(pastSeasonSeries), p.getAvg(past2SeasonSeries), p.getAvg(past3SeasonSeries))),
+			zap.Any("labels", series.Labels),
+			zap.Float64("predictedValue", predictedValue),
+		)
+		predictedSeries.Points = append(predictedSeries.Points, v3.Point{
+			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, prevSeries, _, _, _, _ *v3.Series,
+	zScoreThreshold float64,
+) (*v3.Series, *v3.Series) {
+	upperBoundSeries := &v3.Series{
+		Labels:      series.Labels,
+		LabelsArray: series.LabelsArray,
+		Points:      []v3.Point{},
+	}
+
+	lowerBoundSeries := &v3.Series{
+		Labels:      series.Labels,
+		LabelsArray: series.LabelsArray,
+		Points:      []v3.Point{},
+	}
+
+	for idx, curr := range series.Points {
+		upperBound := p.getMovingAvg(prevSeries, movingAvgWindowSize, idx) + zScoreThreshold*p.getStdDev(series)
+		lowerBound := p.getMovingAvg(prevSeries, movingAvgWindowSize, idx) - zScoreThreshold*p.getStdDev(series)
+		upperBoundSeries.Points = append(upperBoundSeries.Points, v3.Point{
+			Timestamp: curr.Timestamp,
+			Value:     upperBound,
+		})
+		lowerBoundSeries.Points = append(lowerBoundSeries.Points, v3.Point{
+			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 *v3.Series, 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 *v3.Series, value float64, idx int,
+) float64 {
+	expectedValue := p.getExpectedValue(series, prevSeries, weekSeries, weekPrevSeries, past2SeasonSeries, past3SeasonSeries, 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 *v3.Series,
+) *v3.Series {
+	anomalyScoreSeries := &v3.Series{
+		Labels:      series.Labels,
+		LabelsArray: series.LabelsArray,
+		Points:      []v3.Point{},
+	}
+
+	for idx, curr := range series.Points {
+		anomalyScore := p.getScore(series, prevSeries, currentSeasonSeries, pastSeasonSeries, past2SeasonSeries, past3SeasonSeries, curr.Value, idx)
+		anomalyScoreSeries.Points = append(anomalyScoreSeries.Points, v3.Point{
+			Timestamp: curr.Timestamp,
+			Value:     anomalyScore,
+		})
+	}
+
+	return anomalyScoreSeries
+}
+
+func (p *BaseSeasonalProvider) getAnomalies(ctx context.Context, req *GetAnomaliesRequest) (*GetAnomaliesResponse, error) {
+	anomalyParams := p.getQueryParams(req)
+	anomalyQueryResults, err := p.getResults(ctx, anomalyParams)
+	if err != nil {
+		return nil, err
+	}
+
+	currentPeriodResultsMap := make(map[string]*v3.Result)
+	for _, result := range anomalyQueryResults.CurrentPeriodResults {
+		currentPeriodResultsMap[result.QueryName] = result
+	}
+
+	pastPeriodResultsMap := make(map[string]*v3.Result)
+	for _, result := range anomalyQueryResults.PastPeriodResults {
+		pastPeriodResultsMap[result.QueryName] = result
+	}
+
+	currentSeasonResultsMap := make(map[string]*v3.Result)
+	for _, result := range anomalyQueryResults.CurrentSeasonResults {
+		currentSeasonResultsMap[result.QueryName] = result
+	}
+
+	pastSeasonResultsMap := make(map[string]*v3.Result)
+	for _, result := range anomalyQueryResults.PastSeasonResults {
+		pastSeasonResultsMap[result.QueryName] = result
+	}
+
+	past2SeasonResultsMap := make(map[string]*v3.Result)
+	for _, result := range anomalyQueryResults.Past2SeasonResults {
+		past2SeasonResultsMap[result.QueryName] = result
+	}
+
+	past3SeasonResultsMap := make(map[string]*v3.Result)
+	for _, result := range anomalyQueryResults.Past3SeasonResults {
+		past3SeasonResultsMap[result.QueryName] = result
+	}
+
+	for _, result := range currentPeriodResultsMap {
+		funcs := req.Params.CompositeQuery.BuilderQueries[result.QueryName].Functions
+
+		var zScoreThreshold float64
+		for _, f := range funcs {
+			if f.Name == v3.FunctionNameAnomaly {
+				value, ok := f.NamedArgs["z_score_threshold"]
+				if ok {
+					zScoreThreshold = value.(float64)
+				} else {
+					zScoreThreshold = 3
+				}
+				break
+			}
+		}
+
+		pastPeriodResult, ok := pastPeriodResultsMap[result.QueryName]
+		if !ok {
+			continue
+		}
+		currentSeasonResult, ok := currentSeasonResultsMap[result.QueryName]
+		if !ok {
+			continue
+		}
+		pastSeasonResult, ok := pastSeasonResultsMap[result.QueryName]
+		if !ok {
+			continue
+		}
+		past2SeasonResult, ok := past2SeasonResultsMap[result.QueryName]
+		if !ok {
+			continue
+		}
+		past3SeasonResult, ok := past3SeasonResultsMap[result.QueryName]
+		if !ok {
+			continue
+		}
+
+		for _, series := range result.Series {
+			stdDev := p.getStdDev(series)
+			zap.L().Info("stdDev", zap.Float64("stdDev", stdDev), zap.Any("labels", series.Labels))
+
+			pastPeriodSeries := p.getMatchingSeries(pastPeriodResult, series)
+			currentSeasonSeries := p.getMatchingSeries(currentSeasonResult, series)
+			pastSeasonSeries := p.getMatchingSeries(pastSeasonResult, series)
+			past2SeasonSeries := p.getMatchingSeries(past2SeasonResult, series)
+			past3SeasonSeries := p.getMatchingSeries(past3SeasonResult, series)
+
+			prevSeriesAvg := p.getAvg(pastPeriodSeries)
+			currentSeasonSeriesAvg := p.getAvg(currentSeasonSeries)
+			pastSeasonSeriesAvg := p.getAvg(pastSeasonSeries)
+			past2SeasonSeriesAvg := p.getAvg(past2SeasonSeries)
+			past3SeasonSeriesAvg := p.getAvg(past3SeasonSeries)
+			zap.L().Info("getAvg", zap.Float64("prevSeriesAvg", prevSeriesAvg), zap.Float64("currentSeasonSeriesAvg", currentSeasonSeriesAvg), zap.Float64("pastSeasonSeriesAvg", pastSeasonSeriesAvg), zap.Float64("past2SeasonSeriesAvg", past2SeasonSeriesAvg), zap.Float64("past3SeasonSeriesAvg", past3SeasonSeriesAvg), zap.Any("labels", series.Labels))
+
+			predictedSeries := p.getPredictedSeries(
+				series,
+				pastPeriodSeries,
+				currentSeasonSeries,
+				pastSeasonSeries,
+				past2SeasonSeries,
+				past3SeasonSeries,
+			)
+			result.PredictedSeries = append(result.PredictedSeries, predictedSeries)
+
+			upperBoundSeries, lowerBoundSeries := p.getBounds(
+				series,
+				pastPeriodSeries,
+				currentSeasonSeries,
+				pastSeasonSeries,
+				past2SeasonSeries,
+				past3SeasonSeries,
+				zScoreThreshold,
+			)
+			result.UpperBoundSeries = append(result.UpperBoundSeries, upperBoundSeries)
+			result.LowerBoundSeries = append(result.LowerBoundSeries, lowerBoundSeries)
+
+			anomalyScoreSeries := p.getAnomalyScores(
+				series,
+				pastPeriodSeries,
+				currentSeasonSeries,
+				pastSeasonSeries,
+				past2SeasonSeries,
+				past3SeasonSeries,
+			)
+			result.AnomalyScores = append(result.AnomalyScores, anomalyScoreSeries)
+		}
+	}
+
+	results := make([]*v3.Result, 0, len(currentPeriodResultsMap))
+	for _, result := range currentPeriodResultsMap {
+		results = append(results, result)
+	}
+
+	return &GetAnomaliesResponse{
+		Results: results,
+	}, nil
+}

ee/query-service/anomaly/weekly.go

@@ -0,0 +1,43 @@
+package anomaly
+
+import (
+	"context"
+
+	querierV2 "go.signoz.io/signoz/pkg/query-service/app/querier/v2"
+	"go.signoz.io/signoz/pkg/query-service/app/queryBuilder"
+)
+
+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)
+	}
+
+	wp.querierV2 = querierV2.NewQuerier(querierV2.QuerierOptions{
+		Reader:        wp.reader,
+		Cache:         wp.cache,
+		KeyGenerator:  queryBuilder.NewKeyGenerator(),
+		FluxInterval:  wp.fluxInterval,
+		FeatureLookup: wp.ff,
+	})
+
+	return wp
+}
+
+func (p *WeeklyProvider) GetAnomalies(ctx context.Context, req *GetAnomaliesRequest) (*GetAnomaliesResponse, error) {
+	req.Seasonality = SeasonalityWeekly
+	return p.getAnomalies(ctx, req)
+}

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

@@ -38,7 +38,8 @@ type APIHandlerOptions struct {
 	Cache                         cache.Cache
 	Gateway                       *httputil.ReverseProxy
 	// Querier Influx Interval
-	FluxInterval time.Duration
+	FluxInterval     time.Duration
+	UseLogsNewSchema bool
 }
 
 type APIHandler struct {
@@ -63,6 +64,7 @@ func NewAPIHandler(opts APIHandlerOptions) (*APIHandler, error) {
 		LogsParsingPipelineController: opts.LogsParsingPipelineController,
 		Cache:                         opts.Cache,
 		FluxInterval:                  opts.FluxInterval,
+		UseLogsNewSchema:              opts.UseLogsNewSchema,
 	})
 
 	if err != nil {

ee/query-service/app/db/metrics.go

@@ -1,401 +0,0 @@
-package db
-
-import (
-	"context"
-	"crypto/md5"
-	"encoding/json"
-	"fmt"
-	"reflect"
-	"regexp"
-	"sort"
-	"strings"
-	"time"
-
-	"go.signoz.io/signoz/ee/query-service/model"
-	baseconst "go.signoz.io/signoz/pkg/query-service/constants"
-	basemodel "go.signoz.io/signoz/pkg/query-service/model"
-	"go.signoz.io/signoz/pkg/query-service/utils"
-	"go.uber.org/zap"
-)
-
-// GetMetricResultEE runs the query and returns list of time series
-func (r *ClickhouseReader) GetMetricResultEE(ctx context.Context, query string) ([]*basemodel.Series, string, error) {
-
-	defer utils.Elapsed("GetMetricResult", nil)()
-	zap.L().Info("Executing metric result query: ", zap.String("query", query))
-
-	var hash string
-	// If getSubTreeSpans function is used in the clickhouse query
-	if strings.Contains(query, "getSubTreeSpans(") {
-		var err error
-		query, hash, err = r.getSubTreeSpansCustomFunction(ctx, query, hash)
-		if err == fmt.Errorf("no spans found for the given query") {
-			return nil, "", nil
-		}
-		if err != nil {
-			return nil, "", err
-		}
-	}
-
-	rows, err := r.conn.Query(ctx, query)
-	if err != nil {
-		zap.L().Error("Error in processing query", zap.Error(err))
-		return nil, "", fmt.Errorf("error in processing query")
-	}
-
-	var (
-		columnTypes = rows.ColumnTypes()
-		columnNames = rows.Columns()
-		vars        = make([]interface{}, len(columnTypes))
-	)
-	for i := range columnTypes {
-		vars[i] = reflect.New(columnTypes[i].ScanType()).Interface()
-	}
-	// when group by is applied, each combination of cartesian product
-	// of attributes is separate series. each item in metricPointsMap
-	// represent a unique series.
-	metricPointsMap := make(map[string][]basemodel.MetricPoint)
-	// attribute key-value pairs for each group selection
-	attributesMap := make(map[string]map[string]string)
-
-	defer rows.Close()
-	for rows.Next() {
-		if err := rows.Scan(vars...); err != nil {
-			return nil, "", err
-		}
-		var groupBy []string
-		var metricPoint basemodel.MetricPoint
-		groupAttributes := make(map[string]string)
-		// Assuming that the end result row contains a timestamp, value and option labels
-		// Label key and value are both strings.
-		for idx, v := range vars {
-			colName := columnNames[idx]
-			switch v := v.(type) {
-			case *string:
-				// special case for returning all labels
-				if colName == "fullLabels" {
-					var metric map[string]string
-					err := json.Unmarshal([]byte(*v), &metric)
-					if err != nil {
-						return nil, "", err
-					}
-					for key, val := range metric {
-						groupBy = append(groupBy, val)
-						groupAttributes[key] = val
-					}
-				} else {
-					groupBy = append(groupBy, *v)
-					groupAttributes[colName] = *v
-				}
-			case *time.Time:
-				metricPoint.Timestamp = v.UnixMilli()
-			case *float64:
-				metricPoint.Value = *v
-			case **float64:
-				// ch seems to return this type when column is derived from
-				// SELECT count(*)/ SELECT count(*)
-				floatVal := *v
-				if floatVal != nil {
-					metricPoint.Value = *floatVal
-				}
-			case *float32:
-				float32Val := float32(*v)
-				metricPoint.Value = float64(float32Val)
-			case *uint8, *uint64, *uint16, *uint32:
-				if _, ok := baseconst.ReservedColumnTargetAliases[colName]; ok {
-					metricPoint.Value = float64(reflect.ValueOf(v).Elem().Uint())
-				} else {
-					groupBy = append(groupBy, fmt.Sprintf("%v", reflect.ValueOf(v).Elem().Uint()))
-					groupAttributes[colName] = fmt.Sprintf("%v", reflect.ValueOf(v).Elem().Uint())
-				}
-			case *int8, *int16, *int32, *int64:
-				if _, ok := baseconst.ReservedColumnTargetAliases[colName]; ok {
-					metricPoint.Value = float64(reflect.ValueOf(v).Elem().Int())
-				} else {
-					groupBy = append(groupBy, fmt.Sprintf("%v", reflect.ValueOf(v).Elem().Int()))
-					groupAttributes[colName] = fmt.Sprintf("%v", reflect.ValueOf(v).Elem().Int())
-				}
-			default:
-				zap.L().Error("invalid var found in metric builder query result", zap.Any("var", v), zap.String("colName", colName))
-			}
-		}
-		sort.Strings(groupBy)
-		key := strings.Join(groupBy, "")
-		attributesMap[key] = groupAttributes
-		metricPointsMap[key] = append(metricPointsMap[key], metricPoint)
-	}
-
-	var seriesList []*basemodel.Series
-	for key := range metricPointsMap {
-		points := metricPointsMap[key]
-		// first point in each series could be invalid since the
-		// aggregations are applied with point from prev series
-		if len(points) != 0 && len(points) > 1 {
-			points = points[1:]
-		}
-		attributes := attributesMap[key]
-		series := basemodel.Series{Labels: attributes, Points: points}
-		seriesList = append(seriesList, &series)
-	}
-	// err = r.conn.Exec(ctx, "DROP TEMPORARY TABLE IF EXISTS getSubTreeSpans"+hash)
-	// if err != nil {
-	// 	zap.L().Error("Error in dropping temporary table: ", err)
-	// 	return nil, err
-	// }
-	if hash == "" {
-		return seriesList, hash, nil
-	} else {
-		return seriesList, "getSubTreeSpans" + hash, nil
-	}
-}
-
-func (r *ClickhouseReader) getSubTreeSpansCustomFunction(ctx context.Context, query string, hash string) (string, string, error) {
-
-	zap.L().Debug("Executing getSubTreeSpans function")
-
-	// str1 := `select fromUnixTimestamp64Milli(intDiv( toUnixTimestamp64Milli ( timestamp ), 100) * 100) AS interval, toFloat64(count()) as count from (select timestamp, spanId, parentSpanId, durationNano from getSubTreeSpans(select * from signoz_traces.signoz_index_v2 where serviceName='frontend' and name='/driver.DriverService/FindNearest' and  traceID='00000000000000004b0a863cb5ed7681') where name='FindDriverIDs' group by interval order by interval asc;`
-
-	// process the query to fetch subTree query
-	var subtreeInput string
-	query, subtreeInput, hash = processQuery(query, hash)
-
-	err := r.conn.Exec(ctx, "DROP TABLE IF EXISTS getSubTreeSpans"+hash)
-	if err != nil {
-		zap.L().Error("Error in dropping temporary table", zap.Error(err))
-		return query, hash, err
-	}
-
-	// Create temporary table to store the getSubTreeSpans() results
-	zap.L().Debug("Creating temporary table getSubTreeSpans", zap.String("hash", hash))
-	err = r.conn.Exec(ctx, "CREATE TABLE IF NOT EXISTS "+"getSubTreeSpans"+hash+" (timestamp DateTime64(9) CODEC(DoubleDelta, LZ4), traceID FixedString(32) CODEC(ZSTD(1)), spanID String CODEC(ZSTD(1)), parentSpanID String CODEC(ZSTD(1)), rootSpanID String CODEC(ZSTD(1)), serviceName LowCardinality(String) CODEC(ZSTD(1)), name LowCardinality(String) CODEC(ZSTD(1)), rootName LowCardinality(String) CODEC(ZSTD(1)), durationNano UInt64 CODEC(T64, ZSTD(1)), kind Int8 CODEC(T64, ZSTD(1)), tagMap Map(LowCardinality(String), String) CODEC(ZSTD(1)), events Array(String) CODEC(ZSTD(2))) ENGINE = MergeTree() ORDER BY (timestamp)")
-	if err != nil {
-		zap.L().Error("Error in creating temporary table", zap.Error(err))
-		return query, hash, err
-	}
-
-	var getSpansSubQueryDBResponses []model.GetSpansSubQueryDBResponse
-	getSpansSubQuery := subtreeInput
-	// Execute the subTree query
-	zap.L().Debug("Executing subTree query", zap.String("query", getSpansSubQuery))
-	err = r.conn.Select(ctx, &getSpansSubQueryDBResponses, getSpansSubQuery)
-
-	// zap.L().Info(getSpansSubQuery)
-
-	if err != nil {
-		zap.L().Error("Error in processing sql query", zap.Error(err))
-		return query, hash, fmt.Errorf("error in processing sql query")
-	}
-
-	var searchScanResponses []basemodel.SearchSpanDBResponseItem
-
-	// TODO : @ankit: I think the algorithm does not need to assume that subtrees are from the same TraceID. We can take this as an improvement later.
-	// Fetch all the spans from of same TraceID so that we can build subtree
-	modelQuery := fmt.Sprintf("SELECT timestamp, traceID, model FROM %s.%s WHERE traceID=$1", r.TraceDB, r.SpansTable)
-
-	if len(getSpansSubQueryDBResponses) == 0 {
-		return query, hash, fmt.Errorf("no spans found for the given query")
-	}
-	zap.L().Debug("Executing query to fetch all the spans from the same TraceID: ", zap.String("modelQuery", modelQuery))
-	err = r.conn.Select(ctx, &searchScanResponses, modelQuery, getSpansSubQueryDBResponses[0].TraceID)
-
-	if err != nil {
-		zap.L().Error("Error in processing sql query", zap.Error(err))
-		return query, hash, fmt.Errorf("error in processing sql query")
-	}
-
-	// Process model to fetch the spans
-	zap.L().Debug("Processing model to fetch the spans")
-	searchSpanResponses := []basemodel.SearchSpanResponseItem{}
-	for _, item := range searchScanResponses {
-		var jsonItem basemodel.SearchSpanResponseItem
-		json.Unmarshal([]byte(item.Model), &jsonItem)
-		jsonItem.TimeUnixNano = uint64(item.Timestamp.UnixNano())
-		if jsonItem.Events == nil {
-			jsonItem.Events = []string{}
-		}
-		searchSpanResponses = append(searchSpanResponses, jsonItem)
-	}
-	// Build the subtree and store all the subtree spans in temporary table getSubTreeSpans+hash
-	// Use map to store pointer to the spans to avoid duplicates and save memory
-	zap.L().Debug("Building the subtree to store all the subtree spans in temporary table getSubTreeSpans", zap.String("hash", hash))
-
-	treeSearchResponse, err := getSubTreeAlgorithm(searchSpanResponses, getSpansSubQueryDBResponses)
-	if err != nil {
-		zap.L().Error("Error in getSubTreeAlgorithm function", zap.Error(err))
-		return query, hash, err
-	}
-	zap.L().Debug("Preparing batch to store subtree spans in temporary table getSubTreeSpans", zap.String("hash", hash))
-	statement, err := r.conn.PrepareBatch(context.Background(), fmt.Sprintf("INSERT INTO getSubTreeSpans"+hash))
-	if err != nil {
-		zap.L().Error("Error in preparing batch statement", zap.Error(err))
-		return query, hash, err
-	}
-	for _, span := range treeSearchResponse {
-		var parentID string
-		if len(span.References) > 0 && span.References[0].RefType == "CHILD_OF" {
-			parentID = span.References[0].SpanId
-		}
-		err = statement.Append(
-			time.Unix(0, int64(span.TimeUnixNano)),
-			span.TraceID,
-			span.SpanID,
-			parentID,
-			span.RootSpanID,
-			span.ServiceName,
-			span.Name,
-			span.RootName,
-			uint64(span.DurationNano),
-			int8(span.Kind),
-			span.TagMap,
-			span.Events,
-		)
-		if err != nil {
-			zap.L().Error("Error in processing sql query", zap.Error(err))
-			return query, hash, err
-		}
-	}
-	zap.L().Debug("Inserting the subtree spans in temporary table getSubTreeSpans", zap.String("hash", hash))
-	err = statement.Send()
-	if err != nil {
-		zap.L().Error("Error in sending statement", zap.Error(err))
-		return query, hash, err
-	}
-	return query, hash, nil
-}
-
-//lint:ignore SA4009 return hash is feeded to the query
-func processQuery(query string, hash string) (string, string, string) {
-	re3 := regexp.MustCompile(`getSubTreeSpans`)
-
-	submatchall3 := re3.FindAllStringIndex(query, -1)
-	getSubtreeSpansMatchIndex := submatchall3[0][1]
-
-	query2countParenthesis := query[getSubtreeSpansMatchIndex:]
-
-	sqlCompleteIndex := 0
-	countParenthesisImbalance := 0
-	for i, char := range query2countParenthesis {
-
-		if string(char) == "(" {
-			countParenthesisImbalance += 1
-		}
-		if string(char) == ")" {
-			countParenthesisImbalance -= 1
-		}
-		if countParenthesisImbalance == 0 {
-			sqlCompleteIndex = i
-			break
-		}
-	}
-	subtreeInput := query2countParenthesis[1:sqlCompleteIndex]
-
-	// hash the subtreeInput
-	hmd5 := md5.Sum([]byte(subtreeInput))
-	hash = fmt.Sprintf("%x", hmd5)
-
-	// Reformat the query to use the getSubTreeSpans function
-	query = query[:getSubtreeSpansMatchIndex] + hash + " " + query2countParenthesis[sqlCompleteIndex+1:]
-	return query, subtreeInput, hash
-}
-
-// getSubTreeAlgorithm is an algorithm to build the subtrees of the spans and return the list of spans
-func getSubTreeAlgorithm(payload []basemodel.SearchSpanResponseItem, getSpansSubQueryDBResponses []model.GetSpansSubQueryDBResponse) (map[string]*basemodel.SearchSpanResponseItem, error) {
-
-	var spans []*model.SpanForTraceDetails
-	for _, spanItem := range payload {
-		var parentID string
-		if len(spanItem.References) > 0 && spanItem.References[0].RefType == "CHILD_OF" {
-			parentID = spanItem.References[0].SpanId
-		}
-		span := &model.SpanForTraceDetails{
-			TimeUnixNano: spanItem.TimeUnixNano,
-			SpanID:       spanItem.SpanID,
-			TraceID:      spanItem.TraceID,
-			ServiceName:  spanItem.ServiceName,
-			Name:         spanItem.Name,
-			Kind:         spanItem.Kind,
-			DurationNano: spanItem.DurationNano,
-			TagMap:       spanItem.TagMap,
-			ParentID:     parentID,
-			Events:       spanItem.Events,
-			HasError:     spanItem.HasError,
-		}
-		spans = append(spans, span)
-	}
-
-	zap.L().Debug("Building Tree")
-	roots, err := buildSpanTrees(&spans)
-	if err != nil {
-		return nil, err
-	}
-	searchSpansResult := make(map[string]*basemodel.SearchSpanResponseItem)
-	// Every span which was fetched from getSubTree Input SQL query is considered root
-	// For each root, get the subtree spans
-	for _, getSpansSubQueryDBResponse := range getSpansSubQueryDBResponses {
-		targetSpan := &model.SpanForTraceDetails{}
-		// zap.L().Debug("Building tree for span id: " + getSpansSubQueryDBResponse.SpanID + " " + strconv.Itoa(i+1) + " of " + strconv.Itoa(len(getSpansSubQueryDBResponses)))
-		// Search target span object in the tree
-		for _, root := range roots {
-			targetSpan, err = breadthFirstSearch(root, getSpansSubQueryDBResponse.SpanID)
-			if targetSpan != nil {
-				break
-			}
-			if err != nil {
-				zap.L().Error("Error during BreadthFirstSearch()", zap.Error(err))
-				return nil, err
-			}
-		}
-		if targetSpan == nil {
-			return nil, nil
-		}
-		// Build subtree for the target span
-		// Mark the target span as root by setting parent ID as empty string
-		targetSpan.ParentID = ""
-		preParents := []*model.SpanForTraceDetails{targetSpan}
-		children := []*model.SpanForTraceDetails{}
-
-		// Get the subtree child spans
-		for i := 0; len(preParents) != 0; i++ {
-			parents := []*model.SpanForTraceDetails{}
-			for _, parent := range preParents {
-				children = append(children, parent.Children...)
-				parents = append(parents, parent.Children...)
-			}
-			preParents = parents
-		}
-
-		resultSpans := children
-		// Add the target span to the result spans
-		resultSpans = append(resultSpans, targetSpan)
-
-		for _, item := range resultSpans {
-			references := []basemodel.OtelSpanRef{
-				{
-					TraceId: item.TraceID,
-					SpanId:  item.ParentID,
-					RefType: "CHILD_OF",
-				},
-			}
-
-			if item.Events == nil {
-				item.Events = []string{}
-			}
-			searchSpansResult[item.SpanID] = &basemodel.SearchSpanResponseItem{
-				TimeUnixNano: item.TimeUnixNano,
-				SpanID:       item.SpanID,
-				TraceID:      item.TraceID,
-				ServiceName:  item.ServiceName,
-				Name:         item.Name,
-				Kind:         item.Kind,
-				References:   references,
-				DurationNano: item.DurationNano,
-				TagMap:       item.TagMap,
-				Events:       item.Events,
-				HasError:     item.HasError,
-				RootSpanID:   getSpansSubQueryDBResponse.SpanID,
-				RootName:     targetSpan.Name,
-			}
-		}
-	}
-	return searchSpansResult, nil
-}

ee/query-service/app/db/reader.go

@@ -25,8 +25,9 @@ func NewDataConnector(
 	maxOpenConns int,
 	dialTimeout time.Duration,
 	cluster string,
+	useLogsNewSchema bool,
 ) *ClickhouseReader {
-	ch := basechr.NewReader(localDB, promConfigPath, lm, maxIdleConns, maxOpenConns, dialTimeout, cluster)
+	ch := basechr.NewReader(localDB, promConfigPath, lm, maxIdleConns, maxOpenConns, dialTimeout, cluster, useLogsNewSchema)
 	return &ClickhouseReader{
 		conn:             ch.GetConn(),
 		appdb:            localDB,

ee/query-service/app/server.go

@@ -28,6 +28,7 @@ import (
 	"go.signoz.io/signoz/ee/query-service/dao"
 	"go.signoz.io/signoz/ee/query-service/integrations/gateway"
 	"go.signoz.io/signoz/ee/query-service/interfaces"
+	"go.signoz.io/signoz/ee/query-service/rules"
 	baseauth "go.signoz.io/signoz/pkg/query-service/auth"
 	"go.signoz.io/signoz/pkg/query-service/migrate"
 	"go.signoz.io/signoz/pkg/query-service/model"
@@ -52,7 +53,7 @@ import (
 	baseint "go.signoz.io/signoz/pkg/query-service/interfaces"
 	basemodel "go.signoz.io/signoz/pkg/query-service/model"
 	pqle "go.signoz.io/signoz/pkg/query-service/pqlEngine"
-	rules "go.signoz.io/signoz/pkg/query-service/rules"
+	baserules "go.signoz.io/signoz/pkg/query-service/rules"
 	"go.signoz.io/signoz/pkg/query-service/telemetry"
 	"go.signoz.io/signoz/pkg/query-service/utils"
 	"go.uber.org/zap"
@@ -76,12 +77,13 @@ type ServerOptions struct {
 	FluxInterval      string
 	Cluster           string
 	GatewayUrl        string
+	UseLogsNewSchema  bool
 }
 
 // Server runs HTTP api service
 type Server struct {
 	serverOptions *ServerOptions
-	ruleManager   *rules.Manager
+	ruleManager   *baserules.Manager
 
 	// public http router
 	httpConn   net.Listener
@@ -153,6 +155,7 @@ func NewServer(serverOptions *ServerOptions) (*Server, error) {
 			serverOptions.MaxOpenConns,
 			serverOptions.DialTimeout,
 			serverOptions.Cluster,
+			serverOptions.UseLogsNewSchema,
 		)
 		go qb.Start(readerReady)
 		reader = qb
@@ -175,7 +178,9 @@ func NewServer(serverOptions *ServerOptions) (*Server, error) {
 		localDB,
 		reader,
 		serverOptions.DisableRules,
-		lm)
+		lm,
+		serverOptions.UseLogsNewSchema,
+	)
 
 	if err != nil {
 		return nil, err
@@ -264,6 +269,7 @@ func NewServer(serverOptions *ServerOptions) (*Server, error) {
 		Cache:                         c,
 		FluxInterval:                  fluxInterval,
 		Gateway:                       gatewayProxy,
+		UseLogsNewSchema:              serverOptions.UseLogsNewSchema,
 	}
 
 	apiHandler, err := api.NewAPIHandler(apiOpts)
@@ -359,6 +365,8 @@ func (s *Server) createPublicServer(apiHandler *api.APIHandler) (*http.Server, e
 	apiHandler.RegisterIntegrationRoutes(r, am)
 	apiHandler.RegisterQueryRangeV3Routes(r, am)
 	apiHandler.RegisterQueryRangeV4Routes(r, am)
+	apiHandler.RegisterWebSocketPaths(r, am)
+	apiHandler.RegisterMessagingQueuesRoutes(r, am)
 
 	c := cors.New(cors.Options{
 		AllowedOrigins: []string{"*"},
@@ -375,6 +383,7 @@ func (s *Server) createPublicServer(apiHandler *api.APIHandler) (*http.Server, e
 	}, nil
 }
 
+// TODO(remove): Implemented at pkg/http/middleware/logging.go
 // loggingMiddleware is used for logging public api calls
 func loggingMiddleware(next http.Handler) http.Handler {
 	return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
@@ -386,6 +395,7 @@ func loggingMiddleware(next http.Handler) http.Handler {
 	})
 }
 
+// TODO(remove): Implemented at pkg/http/middleware/logging.go
 // loggingMiddlewarePrivate is used for logging private api calls
 // from internal services like alert manager
 func loggingMiddlewarePrivate(next http.Handler) http.Handler {
@@ -398,27 +408,32 @@ func loggingMiddlewarePrivate(next http.Handler) http.Handler {
 	})
 }
 
+// TODO(remove): Implemented at pkg/http/middleware/logging.go
 type loggingResponseWriter struct {
 	http.ResponseWriter
 	statusCode int
 }
 
+// TODO(remove): Implemented at pkg/http/middleware/logging.go
 func NewLoggingResponseWriter(w http.ResponseWriter) *loggingResponseWriter {
 	// WriteHeader(int) is not called if our response implicitly returns 200 OK, so
 	// we default to that status code.
 	return &loggingResponseWriter{w, http.StatusOK}
 }
 
+// TODO(remove): Implemented at pkg/http/middleware/logging.go
 func (lrw *loggingResponseWriter) WriteHeader(code int) {
 	lrw.statusCode = code
 	lrw.ResponseWriter.WriteHeader(code)
 }
 
+// TODO(remove): Implemented at pkg/http/middleware/logging.go
 // Flush implements the http.Flush interface.
 func (lrw *loggingResponseWriter) Flush() {
 	lrw.ResponseWriter.(http.Flusher).Flush()
 }
 
+// TODO(remove): Implemented at pkg/http/middleware/logging.go
 // Support websockets
 func (lrw *loggingResponseWriter) Hijack() (net.Conn, *bufio.ReadWriter, error) {
 	h, ok := lrw.ResponseWriter.(http.Hijacker)
@@ -564,6 +579,7 @@ func (s *Server) analyticsMiddleware(next http.Handler) http.Handler {
 	})
 }
 
+// TODO(remove): Implemented at pkg/http/middleware/timeout.go
 func setTimeoutMiddleware(next http.Handler) http.Handler {
 	return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
 		ctx := r.Context()
@@ -717,7 +733,8 @@ func makeRulesManager(
 	db *sqlx.DB,
 	ch baseint.Reader,
 	disableRules bool,
-	fm baseint.FeatureLookup) (*rules.Manager, error) {
+	fm baseint.FeatureLookup,
+	useLogsNewSchema bool) (*baserules.Manager, error) {
 
 	// create engine
 	pqle, err := pqle.FromConfigPath(promConfigPath)
@@ -733,12 +750,9 @@ func makeRulesManager(
 	}
 
 	// create manager opts
-	managerOpts := &rules.ManagerOptions{
+	managerOpts := &baserules.ManagerOptions{
 		NotifierOpts: notifierOpts,
-		Queriers: &rules.Queriers{
-			PqlEngine: pqle,
-			Ch:        ch.GetConn(),
-		},
+		PqlEngine:    pqle,
 		RepoURL:      ruleRepoURL,
 		DBConn:       db,
 		Context:      context.Background(),
@@ -747,10 +761,13 @@ func makeRulesManager(
 		FeatureFlags: fm,
 		Reader:       ch,
 		EvalDelay:    baseconst.GetEvalDelay(),
+
+		PrepareTaskFunc:  rules.PrepareTaskFunc,
+		UseLogsNewSchema: useLogsNewSchema,
 	}
 
 	// create Manager
-	manager, err := rules.NewManager(managerOpts)
+	manager, err := baserules.NewManager(managerOpts)
 	if err != nil {
 		return nil, fmt.Errorf("rule manager error: %v", err)
 	}

ee/query-service/constants/constants.go

@@ -11,8 +11,6 @@ const (
 var LicenseSignozIo = "https://license.signoz.io/api/v1"
 var LicenseAPIKey = GetOrDefaultEnv("SIGNOZ_LICENSE_API_KEY", "")
 var SaasSegmentKey = GetOrDefaultEnv("SIGNOZ_SAAS_SEGMENT_KEY", "")
-var SpanRenderLimitStr = GetOrDefaultEnv("SPAN_RENDER_LIMIT", "2500")
-var MaxSpansInTraceStr = GetOrDefaultEnv("MAX_SPANS_IN_TRACE", "250000")
 var FetchFeatures = GetOrDefaultEnv("FETCH_FEATURES", "false")
 var ZeusFeaturesURL = GetOrDefaultEnv("ZEUS_FEATURES_URL", "ZeusFeaturesURL")
 

ee/query-service/main.go

@@ -87,6 +87,7 @@ func main() {
 	var ruleRepoURL string
 	var cluster string
 
+	var useLogsNewSchema bool
 	var cacheConfigPath, fluxInterval string
 	var enableQueryServiceLogOTLPExport bool
 	var preferSpanMetrics bool
@@ -96,6 +97,7 @@ func main() {
 	var dialTimeout time.Duration
 	var gatewayUrl string
 
+	flag.BoolVar(&useLogsNewSchema, "use-logs-new-schema", false, "use logs_v2 schema for logs")
 	flag.StringVar(&promConfigPath, "config", "./config/prometheus.yml", "(prometheus config to read metrics)")
 	flag.StringVar(&skipTopLvlOpsPath, "skip-top-level-ops", "", "(config file to skip top level operations)")
 	flag.BoolVar(&disableRules, "rules.disable", false, "(disable rule evaluation)")
@@ -134,6 +136,7 @@ func main() {
 		FluxInterval:      fluxInterval,
 		Cluster:           cluster,
 		GatewayUrl:        gatewayUrl,
+		UseLogsNewSchema:  useLogsNewSchema,
 	}
 
 	// Read the jwt secret key

ee/query-service/model/plans.go

@@ -12,6 +12,8 @@ const DisableUpsell = "DISABLE_UPSELL"
 const Onboarding = "ONBOARDING"
 const ChatSupport = "CHAT_SUPPORT"
 const Gateway = "GATEWAY"
+const PremiumSupport = "PREMIUM_SUPPORT"
+const QueryBuilderSearchV2 = "QUERY_BUILDER_SEARCH_V2"
 
 var BasicPlan = basemodel.FeatureSet{
 	basemodel.Feature{
@@ -119,6 +121,20 @@ var BasicPlan = basemodel.FeatureSet{
 		UsageLimit: -1,
 		Route:      "",
 	},
+	basemodel.Feature{
+		Name:       PremiumSupport,
+		Active:     false,
+		Usage:      0,
+		UsageLimit: -1,
+		Route:      "",
+	},
+	basemodel.Feature{
+		Name:       QueryBuilderSearchV2,
+		Active:     false,
+		Usage:      0,
+		UsageLimit: -1,
+		Route:      "",
+	},
 }
 
 var ProPlan = basemodel.FeatureSet{
@@ -220,6 +236,20 @@ var ProPlan = basemodel.FeatureSet{
 		UsageLimit: -1,
 		Route:      "",
 	},
+	basemodel.Feature{
+		Name:       PremiumSupport,
+		Active:     true,
+		Usage:      0,
+		UsageLimit: -1,
+		Route:      "",
+	},
+	basemodel.Feature{
+		Name:       QueryBuilderSearchV2,
+		Active:     false,
+		Usage:      0,
+		UsageLimit: -1,
+		Route:      "",
+	},
 }
 
 var EnterprisePlan = basemodel.FeatureSet{
@@ -335,4 +365,18 @@ var EnterprisePlan = basemodel.FeatureSet{
 		UsageLimit: -1,
 		Route:      "",
 	},
+	basemodel.Feature{
+		Name:       PremiumSupport,
+		Active:     true,
+		Usage:      0,
+		UsageLimit: -1,
+		Route:      "",
+	},
+	basemodel.Feature{
+		Name:       QueryBuilderSearchV2,
+		Active:     false,
+		Usage:      0,
+		UsageLimit: -1,
+		Route:      "",
+	},
 }

ee/query-service/rules/manager.go

@@ -0,0 +1,70 @@
+package rules
+
+import (
+	"fmt"
+	"time"
+
+	baserules "go.signoz.io/signoz/pkg/query-service/rules"
+)
+
+func PrepareTaskFunc(opts baserules.PrepareTaskOptions) (baserules.Task, error) {
+
+	rules := make([]baserules.Rule, 0)
+	var task baserules.Task
+
+	ruleId := baserules.RuleIdFromTaskName(opts.TaskName)
+	if opts.Rule.RuleType == baserules.RuleTypeThreshold {
+		// create a threshold rule
+		tr, err := baserules.NewThresholdRule(
+			ruleId,
+			opts.Rule,
+			opts.FF,
+			opts.Reader,
+			opts.UseLogsNewSchema,
+			baserules.WithEvalDelay(opts.ManagerOpts.EvalDelay),
+		)
+
+		if err != nil {
+			return task, err
+		}
+
+		rules = append(rules, tr)
+
+		// create ch rule task for evalution
+		task = newTask(baserules.TaskTypeCh, opts.TaskName, time.Duration(opts.Rule.Frequency), rules, opts.ManagerOpts, opts.NotifyFunc, opts.RuleDB)
+
+	} else if opts.Rule.RuleType == baserules.RuleTypeProm {
+
+		// create promql rule
+		pr, err := baserules.NewPromRule(
+			ruleId,
+			opts.Rule,
+			opts.Logger,
+			opts.Reader,
+			opts.ManagerOpts.PqlEngine,
+		)
+
+		if err != nil {
+			return task, err
+		}
+
+		rules = append(rules, pr)
+
+		// create promql rule task for evalution
+		task = newTask(baserules.TaskTypeProm, opts.TaskName, time.Duration(opts.Rule.Frequency), rules, opts.ManagerOpts, opts.NotifyFunc, opts.RuleDB)
+
+	} else {
+		return nil, fmt.Errorf("unsupported rule type. Supported types: %s, %s", baserules.RuleTypeProm, baserules.RuleTypeThreshold)
+	}
+
+	return task, nil
+}
+
+// newTask returns an appropriate group for
+// rule type
+func newTask(taskType baserules.TaskType, name string, frequency time.Duration, rules []baserules.Rule, opts *baserules.ManagerOptions, notify baserules.NotifyFunc, ruleDB baserules.RuleDB) baserules.Task {
+	if taskType == baserules.TaskTypeCh {
+		return baserules.NewRuleTask(name, "", frequency, rules, opts, notify, ruleDB)
+	}
+	return baserules.NewPromRuleTask(name, "", frequency, rules, opts, notify, ruleDB)
+}

frontend/package.json

@@ -51,7 +51,7 @@
 		"ansi-to-html": "0.7.2",
 		"antd": "5.11.0",
 		"antd-table-saveas-excel": "2.2.1",
-		"axios": "1.6.4",
+		"axios": "1.7.4",
 		"babel-eslint": "^10.1.0",
 		"babel-jest": "^29.6.4",
 		"babel-loader": "9.1.3",
@@ -88,7 +88,7 @@
 		"lucide-react": "0.379.0",
 		"mini-css-extract-plugin": "2.4.5",
 		"papaparse": "5.4.1",
-		"posthog-js": "1.142.1",
+		"posthog-js": "1.160.3",
 		"rc-tween-one": "3.0.6",
 		"react": "18.2.0",
 		"react-addons-update": "15.6.3",
@@ -207,7 +207,6 @@
 		"eslint-plugin-sonarjs": "^0.12.0",
 		"husky": "^7.0.4",
 		"is-ci": "^3.0.1",
-		"jest-playwright-preset": "^1.7.2",
 		"jest-styled-components": "^7.0.8",
 		"lint-staged": "^12.5.0",
 		"msw": "1.3.2",

frontend/public/Icons/groupBy.svg

@@ -0,0 +1 @@
+<svg width="14" height="14" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#prefix__clip0_4344_1236)" stroke="#C0C1C3" stroke-width="1.167" stroke-linecap="round" stroke-linejoin="round"><path d="M4.667 1.167H2.333c-.644 0-1.166.522-1.166 1.166v2.334c0 .644.522 1.166 1.166 1.166h2.334c.644 0 1.166-.522 1.166-1.166V2.333c0-.644-.522-1.166-1.166-1.166zM8.167 1.167a1.17 1.17 0 011.166 1.166v2.334a1.17 1.17 0 01-1.166 1.166M11.667 1.167a1.17 1.17 0 011.166 1.166v2.334a1.17 1.17 0 01-1.166 1.166M5.833 10.5H2.917c-.992 0-1.75-.758-1.75-1.75v-.583"/><path d="M4.083 12.25l1.75-1.75-1.75-1.75M11.667 8.167H9.333c-.644 0-1.166.522-1.166 1.166v2.334c0 .644.522 1.166 1.166 1.166h2.334c.644 0 1.166-.522 1.166-1.166V9.333c0-.644-.522-1.166-1.166-1.166z"/></g><defs><clipPath id="prefix__clip0_4344_1236"><path fill="#fff" d="M0 0h14v14H0z"/></clipPath></defs></svg>

frontend/public/Icons/solid-x-circle.svg

@@ -0,0 +1 @@
+<svg width="14" height="14" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#prefix__clip0_4062_7291)" stroke-width="1.167" stroke-linecap="round" stroke-linejoin="round"><path d="M7 12.833A5.833 5.833 0 107 1.167a5.833 5.833 0 000 11.666z" fill="#E5484D" stroke="#E5484D"/><path d="M8.75 5.25l-3.5 3.5M5.25 5.25l3.5 3.5" stroke="#121317"/></g><defs><clipPath id="prefix__clip0_4062_7291"><path fill="#fff" d="M0 0h14v14H0z"/></clipPath></defs></svg>

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

@@ -0,0 +1,30 @@
+{
+  "breadcrumb": "Messaging Queues",
+  "header": "Kafka / Overview",
+  "overview": {
+    "title": "Start sending data in as little as 20 minutes",
+    "subtitle": "Connect and Monitor Your Data Streams"
+  },
+  "configureConsumer": {
+    "title": "Configure Consumer",
+    "description": "Add consumer data sources to gain insights and enhance monitoring.",
+    "button": "Get Started"
+  },
+  "configureProducer": {
+    "title": "Configure Producer",
+    "description": "Add producer data sources to gain insights and enhance monitoring.",
+    "button": "Get Started"
+  },
+  "monitorKafka": {
+    "title": "Monitor kafka",
+    "description": "Add your Kafka source to gain insights and enhance activity tracking.",
+    "button": "Get Started"
+  },
+  "summarySection": {
+    "viewDetailsButton": "View Details"
+  },
+  "confirmModal": {
+    "content": "Before navigating to the details page, please make sure you have configured all the required setup to ensure correct data monitoring.",
+    "okText": "Proceed"
+  }
+}

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

@@ -1,3 +1,3 @@
 {
-	"rps_over_100": "You are sending data at more than 100 RPS, your ingestion  may be rate limited. Please reach out to us via Intercom support."
+	"rps_over_100": "You are sending data at more than 100 RPS, your ingestion  may be rate limited. Please reach out to us via Intercom support or "
 }

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

@@ -38,5 +38,7 @@
 	"LIST_LICENSES": "SigNoz | List of Licenses",
 	"WORKSPACE_LOCKED": "SigNoz | Workspace Locked",
 	"SUPPORT": "SigNoz | Support",
-	"DEFAULT": "Open source Observability Platform | SigNoz"
+	"DEFAULT": "Open source Observability Platform | SigNoz",
+	"ALERT_HISTORY": "SigNoz | Alert Rule History",
+	"ALERT_OVERVIEW": "SigNoz | Alert Rule Overview"
 }

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

@@ -0,0 +1,22 @@
+{
+	"trialPlanExpired": "Trial Plan Expired",
+	"gotQuestions": "Got Questions?",
+	"contactUs": "Contact Us",
+	"upgradeToContinue": "Upgrade to Continue",
+	"upgradeNow": "Upgrade now to keep enjoying all the great features you’ve been using.",
+	"yourDataIsSafe": "Your data is safe with us until",
+	"actNow": "Act now to avoid any disruptions and continue where you left off.",
+	"contactAdmin": "Contact your admin to proceed with the upgrade.",
+	"continueMyJourney": "Continue My Journey",
+	"needMoreTime": "Need More Time?",
+	"extendTrial": "Extend Trial",
+	"extendTrialMsgPart1": "If you have a specific reason why you were not able to finish your PoC in the trial period, please write to us on",
+	"extendTrialMsgPart2": "with the reason. Sometimes we can extend trial by a few days on a case by case basis",
+	"whyChooseSignoz": "Why choose Signoz",
+	"enterpriseGradeObservability": "Enterprise-grade Observability",
+	"observabilityDescription": "Get access to observability at any scale with advanced security and compliance.",
+	"continueToUpgrade": "Continue to Upgrade",
+	"youAreInGoodCompany": "You are in good company",
+	"faqs": "FAQs",
+	"somethingWentWrong": "Something went wrong"
+}

frontend/public/locales/en/dashboard.json

@@ -1,6 +1,7 @@
 {
 	"create_dashboard": "Create Dashboard",
 	"import_json": "Import Dashboard JSON",
+	"view_template": "View templates",
 	"import_grafana_json": "Import Grafana JSON",
 	"copy_to_clipboard": "Copy To ClipBoard",
 	"download_json": "Download JSON",

frontend/public/locales/en/messagingQueuesKafkaOverview.json

@@ -0,0 +1,30 @@
+{
+  "breadcrumb": "Messaging Queues",
+  "header": "Kafka / Overview",
+  "overview": {
+    "title": "Start sending data in as little as 20 minutes",
+    "subtitle": "Connect and Monitor Your Data Streams"
+  },
+  "configureConsumer": {
+    "title": "Configure Consumer",
+    "description": "Add consumer data sources to gain insights and enhance monitoring.",
+    "button": "Get Started"
+  },
+  "configureProducer": {
+    "title": "Configure Producer",
+    "description": "Add producer data sources to gain insights and enhance monitoring.",
+    "button": "Get Started"
+  },
+  "monitorKafka": {
+    "title": "Monitor kafka",
+    "description": "Add your Kafka source to gain insights and enhance activity tracking.",
+    "button": "Get Started"
+  },
+  "summarySection": {
+    "viewDetailsButton": "View Details"
+  },
+  "confirmModal": {
+    "content": "Before navigating to the details page, please make sure you have configured all the required setup to ensure correct data monitoring.",
+    "okText": "Proceed"
+  }
+}

frontend/public/locales/en/services.json

@@ -1,3 +1,3 @@
 {
-	"rps_over_100": "You are sending data at more than 100 RPS, your ingestion  may be rate limited. Please reach out to us via Intercom support."
+	"rps_over_100": "You are sending data at more than 100 RPS, your ingestion  may be rate limited. Please reach out to us via Intercom support or "
 }

frontend/public/locales/en/titles.json

@@ -49,5 +49,8 @@
 	"TRACES_SAVE_VIEWS": "SigNoz | Traces Saved Views",
 	"DEFAULT": "Open source Observability Platform | SigNoz",
 	"SHORTCUTS": "SigNoz | Shortcuts",
-	"INTEGRATIONS": "SigNoz | Integrations"
+	"INTEGRATIONS": "SigNoz | Integrations",
+	"ALERT_HISTORY": "SigNoz | Alert Rule History",
+	"ALERT_OVERVIEW": "SigNoz | Alert Rule Overview",
+	"MESSAGING_QUEUES": "SigNoz | Messaging Queues"
 }

frontend/public/locales/en/workspaceLocked.json

@@ -0,0 +1,22 @@
+{
+	"trialPlanExpired": "Trial Plan Expired",
+	"gotQuestions": "Got Questions?",
+	"contactUs": "Contact Us",
+	"upgradeToContinue": "Upgrade to Continue",
+	"upgradeNow": "Upgrade now to keep enjoying all the great features you’ve been using.",
+	"yourDataIsSafe": "Your data is safe with us until",
+	"actNow": "Act now to avoid any disruptions and continue where you left off.",
+	"contactAdmin": "Contact your admin to proceed with the upgrade.",
+	"continueMyJourney": "Continue My Journey",
+	"needMoreTime": "Need More Time?",
+	"extendTrial": "Extend Trial",
+	"extendTrialMsgPart1": "If you have a specific reason why you were not able to finish your PoC in the trial period, please write to us on",
+	"extendTrialMsgPart2": "with the reason. Sometimes we can extend trial by a few days on a case by case basis",
+	"whyChooseSignoz": "Why choose Signoz",
+	"enterpriseGradeObservability": "Enterprise-grade Observability",
+	"observabilityDescription": "Get access to observability at any scale with advanced security and compliance.",
+	"continueToUpgrade": "Continue to Upgrade",
+	"youAreInGoodCompany": "You are in good company",
+	"faqs": "FAQs",
+	"somethingWentWrong": "Something went wrong"
+}

frontend/src/AppRoutes/index.tsx

@@ -19,6 +19,7 @@ import { ResourceProvider } from 'hooks/useResourceAttribute';
 import history from 'lib/history';
 import { identity, pick, pickBy } from 'lodash-es';
 import posthog from 'posthog-js';
+import AlertRuleProvider from 'providers/Alert';
 import { DashboardProvider } from 'providers/Dashboard/Dashboard';
 import { QueryBuilderProvider } from 'providers/QueryBuilder';
 import { Suspense, useEffect, useState } from 'react';
@@ -136,7 +137,6 @@ function App(): JSX.Element {
 
 		window.analytics.identify(email, sanitizedIdentifyPayload);
 		window.analytics.group(domain, groupTraits);
-		window.clarity('identify', email, name);
 
 		posthog?.identify(email, {
 			email,
@@ -236,22 +236,24 @@ function App(): JSX.Element {
 							<QueryBuilderProvider>
 								<DashboardProvider>
 									<KeyboardHotkeysProvider>
-										<AppLayout>
-											<Suspense fallback={<Spinner size="large" tip="Loading..." />}>
-												<Switch>
-													{routes.map(({ path, component, exact }) => (
-														<Route
-															key={`${path}`}
-															exact={exact}
-															path={path}
-															component={component}
-														/>
-													))}
+										<AlertRuleProvider>
+											<AppLayout>
+												<Suspense fallback={<Spinner size="large" tip="Loading..." />}>
+													<Switch>
+														{routes.map(({ path, component, exact }) => (
+															<Route
+																key={`${path}`}
+																exact={exact}
+																path={path}
+																component={component}
+															/>
+														))}
 
-													<Route path="*" component={NotFound} />
-												</Switch>
-											</Suspense>
-										</AppLayout>
+														<Route path="*" component={NotFound} />
+													</Switch>
+												</Suspense>
+											</AppLayout>
+										</AlertRuleProvider>
 									</KeyboardHotkeysProvider>
 								</DashboardProvider>
 							</QueryBuilderProvider>

frontend/src/AppRoutes/pageComponents.ts

@@ -92,6 +92,14 @@ export const CreateNewAlerts = Loadable(
 	() => import(/* webpackChunkName: "Create Alerts" */ 'pages/CreateAlert'),
 );
 
+export const AlertHistory = Loadable(
+	() => import(/* webpackChunkName: "Alert History" */ 'pages/AlertList'),
+);
+
+export const AlertOverview = Loadable(
+	() => import(/* webpackChunkName: "Alert Overview" */ 'pages/AlertList'),
+);
+
 export const CreateAlertChannelAlerts = Loadable(
 	() =>
 		import(/* webpackChunkName: "Create Channels" */ 'pages/AlertChannelCreate'),
@@ -204,3 +212,15 @@ export const InstalledIntegrations = Loadable(
 			/* webpackChunkName: "InstalledIntegrations" */ 'pages/IntegrationsModulePage'
 		),
 );
+
+export const MessagingQueues = Loadable(
+	() =>
+		import(/* webpackChunkName: "MessagingQueues" */ 'pages/MessagingQueues'),
+);
+
+export const MQDetailPage = Loadable(
+	() =>
+		import(
+			/* webpackChunkName: "MQDetailPage" */ 'pages/MessagingQueues/MQDetailPage'
+		),
+);

frontend/src/AppRoutes/routes.ts

@@ -2,6 +2,8 @@ import ROUTES from 'constants/routes';
 import { RouteProps } from 'react-router-dom';
 
 import {
+	AlertHistory,
+	AlertOverview,
 	AllAlertChannels,
 	AllErrors,
 	APIKeys,
@@ -23,6 +25,8 @@ import {
 	LogsExplorer,
 	LogsIndexToFields,
 	LogsSaveViews,
+	MessagingQueues,
+	MQDetailPage,
 	MySettings,
 	NewDashboardPage,
 	OldLogsExplorer,
@@ -169,6 +173,20 @@ const routes: AppRoutes[] = [
 		isPrivate: true,
 		key: 'ALERTS_NEW',
 	},
+	{
+		path: ROUTES.ALERT_HISTORY,
+		exact: true,
+		component: AlertHistory,
+		isPrivate: true,
+		key: 'ALERT_HISTORY',
+	},
+	{
+		path: ROUTES.ALERT_OVERVIEW,
+		exact: true,
+		component: AlertOverview,
+		isPrivate: true,
+		key: 'ALERT_OVERVIEW',
+	},
 	{
 		path: ROUTES.TRACE,
 		exact: true,
@@ -351,6 +369,20 @@ const routes: AppRoutes[] = [
 		isPrivate: true,
 		key: 'INTEGRATIONS',
 	},
+	{
+		path: ROUTES.MESSAGING_QUEUES,
+		exact: true,
+		component: MessagingQueues,
+		key: 'MESSAGING_QUEUES',
+		isPrivate: true,
+	},
+	{
+		path: ROUTES.MESSAGING_QUEUES_DETAIL,
+		exact: true,
+		component: MQDetailPage,
+		key: 'MESSAGING_QUEUES_DETAIL',
+		isPrivate: true,
+	},
 ];
 
 export const SUPPORT_ROUTE: AppRoutes = {

frontend/src/api/alerts/create.ts

@@ -1,26 +1,20 @@
 import axios from 'api';
-import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
-import { AxiosError } from 'axios';
 import { ErrorResponse, SuccessResponse } from 'types/api';
 import { PayloadProps, Props } from 'types/api/alerts/create';
 
 const create = async (
 	props: Props,
 ): Promise<SuccessResponse<PayloadProps> | ErrorResponse> => {
-	try {
-		const response = await axios.post('/rules', {
-			...props.data,
-		});
+	const response = await axios.post('/rules', {
+		...props.data,
+	});
 
-		return {
-			statusCode: 200,
-			error: null,
-			message: response.data.status,
-			payload: response.data.data,
-		};
-	} catch (error) {
-		return ErrorResponseHandler(error as AxiosError);
-	}
+	return {
+		statusCode: 200,
+		error: null,
+		message: response.data.status,
+		payload: response.data.data,
+	};
 };
 
 export default create;

frontend/src/api/alerts/delete.ts

@@ -1,24 +1,18 @@
 import axios from 'api';
-import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
-import { AxiosError } from 'axios';
 import { ErrorResponse, SuccessResponse } from 'types/api';
 import { PayloadProps, Props } from 'types/api/alerts/delete';
 
 const deleteAlerts = async (
 	props: Props,
 ): Promise<SuccessResponse<PayloadProps> | ErrorResponse> => {
-	try {
-		const response = await axios.delete(`/rules/${props.id}`);
+	const response = await axios.delete(`/rules/${props.id}`);
 
-		return {
-			statusCode: 200,
-			error: null,
-			message: response.data.status,
-			payload: response.data.data.rules,
-		};
-	} catch (error) {
-		return ErrorResponseHandler(error as AxiosError);
-	}
+	return {
+		statusCode: 200,
+		error: null,
+		message: response.data.status,
+		payload: response.data.data.rules,
+	};
 };
 
 export default deleteAlerts;

frontend/src/api/alerts/get.ts

@@ -1,24 +1,16 @@
 import axios from 'api';
-import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
-import { AxiosError } from 'axios';
 import { ErrorResponse, SuccessResponse } from 'types/api';
 import { PayloadProps, Props } from 'types/api/alerts/get';
 
 const get = async (
 	props: Props,
 ): Promise<SuccessResponse<PayloadProps> | ErrorResponse> => {
-	try {
-		const response = await axios.get(`/rules/${props.id}`);
-
-		return {
-			statusCode: 200,
-			error: null,
-			message: response.data.status,
-			payload: response.data,
-		};
-	} catch (error) {
-		return ErrorResponseHandler(error as AxiosError);
-	}
+	const response = await axios.get(`/rules/${props.id}`);
+	return {
+		statusCode: 200,
+		error: null,
+		message: response.data.status,
+		payload: response.data,
+	};
 };
-
 export default get;

frontend/src/api/alerts/patch.ts

@@ -1,26 +1,20 @@
 import axios from 'api';
-import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
-import { AxiosError } from 'axios';
 import { ErrorResponse, SuccessResponse } from 'types/api';
 import { PayloadProps, Props } from 'types/api/alerts/patch';
 
 const patch = async (
 	props: Props,
 ): Promise<SuccessResponse<PayloadProps> | ErrorResponse> => {
-	try {
-		const response = await axios.patch(`/rules/${props.id}`, {
-			...props.data,
-		});
+	const response = await axios.patch(`/rules/${props.id}`, {
+		...props.data,
+	});
 
-		return {
-			statusCode: 200,
-			error: null,
-			message: response.data.status,
-			payload: response.data.data,
-		};
-	} catch (error) {
-		return ErrorResponseHandler(error as AxiosError);
-	}
+	return {
+		statusCode: 200,
+		error: null,
+		message: response.data.status,
+		payload: response.data.data,
+	};
 };
 
 export default patch;

frontend/src/api/alerts/put.ts

@@ -1,26 +1,20 @@
 import axios from 'api';
-import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
-import { AxiosError } from 'axios';
 import { ErrorResponse, SuccessResponse } from 'types/api';
 import { PayloadProps, Props } from 'types/api/alerts/save';
 
 const put = async (
 	props: Props,
 ): Promise<SuccessResponse<PayloadProps> | ErrorResponse> => {
-	try {
-		const response = await axios.put(`/rules/${props.id}`, {
-			...props.data,
-		});
+	const response = await axios.put(`/rules/${props.id}`, {
+		...props.data,
+	});
 
-		return {
-			statusCode: 200,
-			error: null,
-			message: response.data.status,
-			payload: response.data.data,
-		};
-	} catch (error) {
-		return ErrorResponseHandler(error as AxiosError);
-	}
+	return {
+		statusCode: 200,
+		error: null,
+		message: response.data.status,
+		payload: response.data.data,
+	};
 };
 
 export default put;

frontend/src/api/alerts/ruleStats.ts

@@ -0,0 +1,28 @@
+import axios from 'api';
+import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
+import { AxiosError } from 'axios';
+import { ErrorResponse, SuccessResponse } from 'types/api';
+import { AlertRuleStatsPayload } from 'types/api/alerts/def';
+import { RuleStatsProps } from 'types/api/alerts/ruleStats';
+
+const ruleStats = async (
+	props: RuleStatsProps,
+): Promise<SuccessResponse<AlertRuleStatsPayload> | ErrorResponse> => {
+	try {
+		const response = await axios.post(`/rules/${props.id}/history/stats`, {
+			start: props.start,
+			end: props.end,
+		});
+
+		return {
+			statusCode: 200,
+			error: null,
+			message: response.data.status,
+			payload: response.data,
+		};
+	} catch (error) {
+		return ErrorResponseHandler(error as AxiosError);
+	}
+};
+
+export default ruleStats;

frontend/src/api/alerts/timelineGraph.ts

@@ -0,0 +1,33 @@
+import axios from 'api';
+import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
+import { AxiosError } from 'axios';
+import { ErrorResponse, SuccessResponse } from 'types/api';
+import { AlertRuleTimelineGraphResponsePayload } from 'types/api/alerts/def';
+import { GetTimelineGraphRequestProps } from 'types/api/alerts/timelineGraph';
+
+const timelineGraph = async (
+	props: GetTimelineGraphRequestProps,
+): Promise<
+	SuccessResponse<AlertRuleTimelineGraphResponsePayload> | ErrorResponse
+> => {
+	try {
+		const response = await axios.post(
+			`/rules/${props.id}/history/overall_status`,
+			{
+				start: props.start,
+				end: props.end,
+			},
+		);
+
+		return {
+			statusCode: 200,
+			error: null,
+			message: response.data.status,
+			payload: response.data,
+		};
+	} catch (error) {
+		return ErrorResponseHandler(error as AxiosError);
+	}
+};
+
+export default timelineGraph;

frontend/src/api/alerts/timelineTable.ts

@@ -0,0 +1,36 @@
+import axios from 'api';
+import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
+import { AxiosError } from 'axios';
+import { ErrorResponse, SuccessResponse } from 'types/api';
+import { AlertRuleTimelineTableResponsePayload } from 'types/api/alerts/def';
+import { GetTimelineTableRequestProps } from 'types/api/alerts/timelineTable';
+
+const timelineTable = async (
+	props: GetTimelineTableRequestProps,
+): Promise<
+	SuccessResponse<AlertRuleTimelineTableResponsePayload> | ErrorResponse
+> => {
+	try {
+		const response = await axios.post(`/rules/${props.id}/history/timeline`, {
+			start: props.start,
+			end: props.end,
+			offset: props.offset,
+			limit: props.limit,
+			order: props.order,
+			state: props.state,
+			// TODO(shaheer): implement filters
+			filters: props.filters,
+		});
+
+		return {
+			statusCode: 200,
+			error: null,
+			message: response.data.status,
+			payload: response.data,
+		};
+	} catch (error) {
+		return ErrorResponseHandler(error as AxiosError);
+	}
+};
+
+export default timelineTable;

frontend/src/api/alerts/topContributors.ts

@@ -0,0 +1,33 @@
+import axios from 'api';
+import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
+import { AxiosError } from 'axios';
+import { ErrorResponse, SuccessResponse } from 'types/api';
+import { AlertRuleTopContributorsPayload } from 'types/api/alerts/def';
+import { TopContributorsProps } from 'types/api/alerts/topContributors';
+
+const topContributors = async (
+	props: TopContributorsProps,
+): Promise<
+	SuccessResponse<AlertRuleTopContributorsPayload> | ErrorResponse
+> => {
+	try {
+		const response = await axios.post(
+			`/rules/${props.id}/history/top_contributors`,
+			{
+				start: props.start,
+				end: props.end,
+			},
+		);
+
+		return {
+			statusCode: 200,
+			error: null,
+			message: response.data.status,
+			payload: response.data,
+		};
+	} catch (error) {
+		return ErrorResponseHandler(error as AxiosError);
+	}
+};
+
+export default topContributors;

frontend/src/api/common/getQueryStats.ts

@@ -0,0 +1,62 @@
+import getLocalStorageApi from 'api/browser/localstorage/get';
+import { ENVIRONMENT } from 'constants/env';
+import { LOCALSTORAGE } from 'constants/localStorage';
+import { isEmpty } from 'lodash-es';
+
+export interface WsDataEvent {
+	read_rows: number;
+	read_bytes: number;
+	elapsed_ms: number;
+}
+interface GetQueryStatsProps {
+	queryId: string;
+	setData: React.Dispatch<React.SetStateAction<WsDataEvent | undefined>>;
+}
+
+function getURL(baseURL: string, queryId: string): URL | string {
+	if (baseURL && !isEmpty(baseURL)) {
+		return `${baseURL}/ws/query_progress?q=${queryId}`;
+	}
+	const url = new URL(`/ws/query_progress?q=${queryId}`, window.location.href);
+
+	if (window.location.protocol === 'http:') {
+		url.protocol = 'ws';
+	} else {
+		url.protocol = 'wss';
+	}
+
+	return url;
+}
+
+export function getQueryStats(props: GetQueryStatsProps): void {
+	const { queryId, setData } = props;
+
+	const token = getLocalStorageApi(LOCALSTORAGE.AUTH_TOKEN) || '';
+
+	// https://github.com/whatwg/websockets/issues/20 reason for not using the relative URLs
+	const url = getURL(ENVIRONMENT.wsURL, queryId);
+
+	const socket = new WebSocket(url, token);
+
+	socket.addEventListener('message', (event) => {
+		try {
+			const parsedData = JSON.parse(event?.data);
+			setData(parsedData);
+		} catch {
+			setData(event?.data);
+		}
+	});
+
+	socket.addEventListener('error', (event) => {
+		console.error(event);
+	});
+
+	socket.addEventListener('close', (event) => {
+		// 1000 is a normal closure status code
+		if (event.code !== 1000) {
+			console.error('WebSocket closed with error:', event);
+		} else {
+			console.error('WebSocket closed normally.');
+		}
+	});
+}

frontend/src/api/dashboard/variables/dashboardVariablesQuery.ts

@@ -1,6 +1,8 @@
 import { ApiV2Instance as axios } from 'api';
 import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
 import { AxiosError } from 'axios';
+import getStartEndRangeTime from 'lib/getStartEndRangeTime';
+import store from 'store';
 import { ErrorResponse, SuccessResponse } from 'types/api';
 import {
 	Props,
@@ -11,7 +13,26 @@ const dashboardVariablesQuery = async (
 	props: Props,
 ): Promise<SuccessResponse<VariableResponseProps> | ErrorResponse> => {
 	try {
-		const response = await axios.post(`/variables/query`, props);
+		const { globalTime } = store.getState();
+		const { start, end } = getStartEndRangeTime({
+			type: 'GLOBAL_TIME',
+			interval: globalTime.selectedTime,
+		});
+
+		const timeVariables: Record<string, number> = {
+			start_timestamp_ms: parseInt(start, 10) * 1e3,
+			end_timestamp_ms: parseInt(end, 10) * 1e3,
+			start_timestamp_nano: parseInt(start, 10) * 1e9,
+			end_timestamp_nano: parseInt(end, 10) * 1e9,
+			start_timestamp: parseInt(start, 10),
+			end_timestamp: parseInt(end, 10),
+		};
+
+		const payload = { ...props };
+
+		payload.variables = { ...payload.variables, ...timeVariables };
+
+		const response = await axios.post(`/variables/query`, payload);
 
 		return {
 			statusCode: 200,

frontend/src/api/metrics/getQueryRange.ts

@@ -12,10 +12,13 @@ export const getMetricsQueryRange = async (
 	props: QueryRangePayload,
 	version: string,
 	signal: AbortSignal,
+	headers?: Record<string, string>,
 ): Promise<SuccessResponse<MetricRangePayloadV3> | ErrorResponse> => {
 	try {
 		if (version && version === ENTITY_VERSION_V4) {
-			const response = await ApiV4Instance.post('/query_range', props, { signal });
+			const response = await ApiV4Instance.post('/query_range', props, {
+				signal,
+			});
 
 			return {
 				statusCode: 200,
@@ -26,7 +29,10 @@ export const getMetricsQueryRange = async (
 			};
 		}
 
-		const response = await ApiV3Instance.post('/query_range', props, { signal });
+		const response = await ApiV3Instance.post('/query_range', props, {
+			signal,
+			headers,
+		});
 
 		return {
 			statusCode: 200,

frontend/src/api/queryBuilder/getAttributeSuggestions.ts

@@ -0,0 +1,63 @@
+import { ApiV3Instance } from 'api';
+import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
+import { AxiosError, AxiosResponse } from 'axios';
+import { baseAutoCompleteIdKeysOrder } from 'constants/queryBuilder';
+import { encode } from 'js-base64';
+import { createIdFromObjectFields } from 'lib/createIdFromObjectFields';
+import createQueryParams from 'lib/createQueryParams';
+import { ErrorResponse, SuccessResponse } from 'types/api';
+import {
+	IGetAttributeSuggestionsPayload,
+	IGetAttributeSuggestionsSuccessResponse,
+} from 'types/api/queryBuilder/getAttributeSuggestions';
+import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
+
+export const getAttributeSuggestions = async ({
+	searchText,
+	dataSource,
+	filters,
+}: IGetAttributeSuggestionsPayload): Promise<
+	SuccessResponse<IGetAttributeSuggestionsSuccessResponse> | ErrorResponse
+> => {
+	try {
+		let base64EncodedFiltersString;
+		try {
+			// the replace function is to remove the padding at the end of base64 encoded string which is auto added to make it a multiple of 4
+			// why ? because the current working of qs doesn't work well with padding
+			base64EncodedFiltersString = encode(JSON.stringify(filters)).replace(
+				/=+$/,
+				'',
+			);
+		} catch {
+			// default base64 encoded string for empty filters object
+			base64EncodedFiltersString = 'eyJpdGVtcyI6W10sIm9wIjoiQU5EIn0';
+		}
+		const response: AxiosResponse<{
+			data: IGetAttributeSuggestionsSuccessResponse;
+		}> = await ApiV3Instance.get(
+			`/filter_suggestions?${createQueryParams({
+				searchText,
+				dataSource,
+				existingFilter: base64EncodedFiltersString,
+			})}`,
+		);
+
+		const payload: BaseAutocompleteData[] =
+			response.data.data.attributes?.map(({ id: _, ...item }) => ({
+				...item,
+				id: createIdFromObjectFields(item, baseAutoCompleteIdKeysOrder),
+			})) || [];
+
+		return {
+			statusCode: 200,
+			error: null,
+			message: response.statusText,
+			payload: {
+				attributes: payload,
+				example_queries: response.data.data.example_queries,
+			},
+		};
+	} catch (e) {
+		return ErrorResponseHandler(e as AxiosError);
+	}
+};

frontend/src/assets/AlertHistory/ConfigureIcon.tsx

@@ -0,0 +1,41 @@
+interface ConfigureIconProps {
+	width?: number;
+	height?: number;
+	fill?: string;
+}
+
+function ConfigureIcon({
+	width,
+	height,
+	fill,
+}: ConfigureIconProps): JSX.Element {
+	return (
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			width={width}
+			height={height}
+			fill={fill}
+		>
+			<path
+				stroke="#C0C1C3"
+				strokeLinecap="round"
+				strokeLinejoin="round"
+				strokeWidth="1.333"
+				d="M9.71 4.745a.576.576 0 000 .806l.922.922a.576.576 0 00.806 0l2.171-2.171a3.455 3.455 0 01-4.572 4.572l-3.98 3.98a1.222 1.222 0 11-1.727-1.728l3.98-3.98a3.455 3.455 0 014.572-4.572L9.717 4.739l-.006.006z"
+			/>
+			<path
+				stroke="#C0C1C3"
+				strokeLinecap="round"
+				strokeWidth="1.333"
+				d="M4 7L2.527 5.566a1.333 1.333 0 01-.013-1.898l.81-.81a1.333 1.333 0 011.991.119L5.333 3m5.417 7.988l1.179 1.178m0 0l-.138.138a.833.833 0 00.387 1.397v0a.833.833 0 00.792-.219l.446-.446a.833.833 0 00.176-.917v0a.833.833 0 00-1.355-.261l-.308.308z"
+			/>
+		</svg>
+	);
+}
+
+ConfigureIcon.defaultProps = {
+	width: 16,
+	height: 16,
+	fill: 'none',
+};
+export default ConfigureIcon;

frontend/src/assets/AlertHistory/LogsIcon.tsx

@@ -0,0 +1,65 @@
+interface LogsIconProps {
+	width?: number;
+	height?: number;
+	fill?: string;
+	strokeColor?: string;
+	strokeWidth?: number;
+}
+
+function LogsIcon({
+	width,
+	height,
+	fill,
+	strokeColor,
+	strokeWidth,
+}: LogsIconProps): JSX.Element {
+	return (
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			width={width}
+			height={height}
+			fill={fill}
+		>
+			<path
+				stroke={strokeColor}
+				strokeWidth={strokeWidth}
+				d="M2.917 3.208v7.875"
+			/>
+			<ellipse
+				cx="6.417"
+				cy="3.208"
+				stroke={strokeColor}
+				strokeWidth={strokeWidth}
+				rx="3.5"
+				ry="1.458"
+			/>
+			<ellipse cx="6.417" cy="3.165" fill={strokeColor} rx="0.875" ry="0.365" />
+			<path
+				stroke={strokeColor}
+				strokeWidth={strokeWidth}
+				d="M9.917 11.083c0 .645-1.567 1.167-3.5 1.167s-3.5-.522-3.5-1.167"
+			/>
+			<path
+				stroke={strokeColor}
+				strokeLinecap="round"
+				strokeWidth={strokeWidth}
+				d="M5.25 6.417v1.117c0 .028.02.053.049.057l1.652.276A.058.058 0 017 7.924v1.993"
+			/>
+			<path
+				stroke={strokeColor}
+				strokeWidth={strokeWidth}
+				d="M9.917 3.208v3.103c0 .046.05.074.089.05L12.182 5a.058.058 0 01.088.035l.264 1.059a.058.058 0 01-.013.053l-2.59 2.877a.058.058 0 00-.014.04v2.018"
+			/>
+		</svg>
+	);
+}
+
+LogsIcon.defaultProps = {
+	width: 14,
+	height: 14,
+	fill: 'none',
+	strokeColor: '#C0C1C3',
+	strokeWidth: 1.167,
+};
+
+export default LogsIcon;

frontend/src/assets/AlertHistory/SeverityCriticalIcon.tsx

@@ -0,0 +1,39 @@
+interface SeverityCriticalIconProps {
+	width?: number;
+	height?: number;
+	fill?: string;
+	stroke?: string;
+}
+
+function SeverityCriticalIcon({
+	width,
+	height,
+	fill,
+	stroke,
+}: SeverityCriticalIconProps): JSX.Element {
+	return (
+		<svg
+			width={width}
+			height={height}
+			fill={fill}
+			xmlns="http://www.w3.org/2000/svg"
+		>
+			<path
+				d="M.99707.666056.99707 2.99939M.99707 5.33337H.991237M3.00293.666056 3.00293 2.99939M3.00293 5.33337H2.9971M5.00879.666056V2.99939M5.00879 5.33337H5.00296"
+				stroke={stroke}
+				strokeWidth="1.16667"
+				strokeLinecap="round"
+				strokeLinejoin="round"
+			/>
+		</svg>
+	);
+}
+
+SeverityCriticalIcon.defaultProps = {
+	width: 6,
+	height: 6,
+	fill: 'none',
+	stroke: '#F56C87',
+};
+
+export default SeverityCriticalIcon;

frontend/src/assets/AlertHistory/SeverityErrorIcon.tsx

@@ -0,0 +1,42 @@
+interface SeverityErrorIconProps {
+	width?: number;
+	height?: number;
+	fill?: string;
+	stroke?: string;
+	strokeWidth?: string;
+}
+
+function SeverityErrorIcon({
+	width,
+	height,
+	fill,
+	stroke,
+	strokeWidth,
+}: SeverityErrorIconProps): JSX.Element {
+	return (
+		<svg
+			width={width}
+			height={height}
+			fill={fill}
+			xmlns="http://www.w3.org/2000/svg"
+		>
+			<path
+				d="M1.00781.957845 1.00781 2.99951M1.00781 5.04175H1.00228"
+				stroke={stroke}
+				strokeWidth={strokeWidth}
+				strokeLinecap="round"
+				strokeLinejoin="round"
+			/>
+		</svg>
+	);
+}
+
+SeverityErrorIcon.defaultProps = {
+	width: 2,
+	height: 6,
+	fill: 'none',
+	stroke: '#F56C87',
+	strokeWidth: '1.02083',
+};
+
+export default SeverityErrorIcon;

frontend/src/assets/AlertHistory/SeverityInfoIcon.tsx

@@ -0,0 +1,46 @@
+interface SeverityInfoIconProps {
+	width?: number;
+	height?: number;
+	fill?: string;
+	stroke?: string;
+}
+
+function SeverityInfoIcon({
+	width,
+	height,
+	fill,
+	stroke,
+}: SeverityInfoIconProps): JSX.Element {
+	return (
+		<svg
+			width={width}
+			height={height}
+			fill={fill}
+			xmlns="http://www.w3.org/2000/svg"
+		>
+			<rect
+				width={width}
+				height={height}
+				rx="3.5"
+				fill={stroke}
+				fillOpacity=".2"
+			/>
+			<path
+				d="M7 9.33346V7.00012M7 4.66675H7.00583"
+				stroke={stroke}
+				strokeWidth="1.16667"
+				strokeLinecap="round"
+				strokeLinejoin="round"
+			/>
+		</svg>
+	);
+}
+
+SeverityInfoIcon.defaultProps = {
+	width: 14,
+	height: 14,
+	fill: 'none',
+	stroke: '#7190F9',
+};
+
+export default SeverityInfoIcon;

frontend/src/assets/AlertHistory/SeverityWarningIcon.tsx

@@ -0,0 +1,42 @@
+interface SeverityWarningIconProps {
+	width?: number;
+	height?: number;
+	fill?: string;
+	stroke?: string;
+	strokeWidth?: string;
+}
+
+function SeverityWarningIcon({
+	width,
+	height,
+	fill,
+	stroke,
+	strokeWidth,
+}: SeverityWarningIconProps): JSX.Element {
+	return (
+		<svg
+			width={width}
+			height={height}
+			fill={fill}
+			xmlns="http://www.w3.org/2000/svg"
+		>
+			<path
+				d="M1.00732.957845 1.00732 2.99951M1.00732 5.04175H1.00179"
+				stroke={stroke}
+				strokeWidth={strokeWidth}
+				strokeLinecap="round"
+				strokeLinejoin="round"
+			/>
+		</svg>
+	);
+}
+
+SeverityWarningIcon.defaultProps = {
+	width: 2,
+	height: 6,
+	fill: 'none',
+	stroke: '#FFD778',
+	strokeWidth: '0.978299',
+};
+
+export default SeverityWarningIcon;

frontend/src/assets/CustomIcons/GroupByIcon.tsx

@@ -0,0 +1,27 @@
+import { Color } from '@signozhq/design-tokens';
+import { useIsDarkMode } from 'hooks/useDarkMode';
+
+function GroupByIcon(): JSX.Element {
+	const isDarkMode = useIsDarkMode();
+	return (
+		<svg width="14" height="14" fill="none" xmlns="http://www.w3.org/2000/svg">
+			<g
+				clipPath="url(#prefix__clip0_4344_1236)"
+				stroke={isDarkMode ? Color.BG_VANILLA_100 : Color.BG_INK_500}
+				strokeWidth="1.167"
+				strokeLinecap="round"
+				strokeLinejoin="round"
+			>
+				<path d="M4.667 1.167H2.333c-.644 0-1.166.522-1.166 1.166v2.334c0 .644.522 1.166 1.166 1.166h2.334c.644 0 1.166-.522 1.166-1.166V2.333c0-.644-.522-1.166-1.166-1.166zM8.167 1.167a1.17 1.17 0 011.166 1.166v2.334a1.17 1.17 0 01-1.166 1.166M11.667 1.167a1.17 1.17 0 011.166 1.166v2.334a1.17 1.17 0 01-1.166 1.166M5.833 10.5H2.917c-.992 0-1.75-.758-1.75-1.75v-.583" />
+				<path d="M4.083 12.25l1.75-1.75-1.75-1.75M11.667 8.167H9.333c-.644 0-1.166.522-1.166 1.166v2.334c0 .644.522 1.166 1.166 1.166h2.334c.644 0 1.166-.522 1.166-1.166V9.333c0-.644-.522-1.166-1.166-1.166z" />
+			</g>
+			<defs>
+				<clipPath id="prefix__clip0_4344_1236">
+					<path fill="#fff" d="M0 0h14v14H0z" />
+				</clipPath>
+			</defs>
+		</svg>
+	);
+}
+
+export default GroupByIcon;

frontend/src/components/AlertDetailsFilters/Filters.styles.scss

@@ -0,0 +1,14 @@
+.reset-button {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	background: var(--bg-ink-300);
+	border: 1px solid var(--bg-slate-400);
+}
+
+.lightMode {
+	.reset-button {
+		background: var(--bg-vanilla-100);
+		border-color: var(--bg-vanilla-300);
+	}
+}

frontend/src/components/AlertDetailsFilters/Filters.tsx

@@ -0,0 +1,11 @@
+import './Filters.styles.scss';
+
+import DateTimeSelector from 'container/TopNav/DateTimeSelectionV2';
+
+export function Filters(): JSX.Element {
+	return (
+		<div className="filters">
+			<DateTimeSelector showAutoRefresh={false} hideShareModal showResetButton />
+		</div>
+	);
+}

frontend/src/components/ChatSupportGateway/ChatSupportGateway.tsx

@@ -7,6 +7,7 @@ import { useNotifications } from 'hooks/useNotifications';
 import { CreditCard, X } from 'lucide-react';
 import { useEffect, useState } from 'react';
 import { useMutation } from 'react-query';
+import { useLocation } from 'react-router-dom';
 import { ErrorResponse, SuccessResponse } from 'types/api';
 import { CheckoutSuccessPayloadProps } from 'types/api/billing/checkout';
 import { License } from 'types/api/licenses/def';
@@ -57,11 +58,11 @@ export default function ChatSupportGateway(): JSX.Element {
 			onError: handleBillingOnError,
 		},
 	);
-
+	const { pathname } = useLocation();
 	const handleAddCreditCard = (): void => {
 		logEvent('Add Credit card modal: Clicked', {
 			source: `intercom icon`,
-			page: '',
+			page: pathname,
 		});
 
 		updateCreditCard({
@@ -79,7 +80,7 @@ export default function ChatSupportGateway(): JSX.Element {
 					onClick={(): void => {
 						logEvent('Disabled Chat Support: Clicked', {
 							source: `intercom icon`,
-							page: '',
+							page: pathname,
 						});
 
 						setIsAddCreditCardModalOpen(true);

frontend/src/components/Graph/utils.ts

@@ -139,6 +139,7 @@ export const getGraphOptions = (
 	},
 	scales: {
 		x: {
+			stacked: isStacked,
 			grid: {
 				display: true,
 				color: getGridColor(),
@@ -165,6 +166,7 @@ export const getGraphOptions = (
 			ticks: { color: getAxisLabelColor(currentTheme) },
 		},
 		y: {
+			stacked: isStacked,
 			display: true,
 			grid: {
 				display: true,
@@ -178,9 +180,6 @@ export const getGraphOptions = (
 				},
 			},
 		},
-		stacked: {
-			display: isStacked === undefined ? false : 'auto',
-		},
 	},
 	elements: {
 		line: {

frontend/src/components/LaunchChatSupport/LaunchChatSupport.tsx

@@ -13,6 +13,7 @@ import { defaultTo } from 'lodash-es';
 import { CreditCard, HelpCircle, X } from 'lucide-react';
 import { useEffect, useState } from 'react';
 import { useMutation } from 'react-query';
+import { useLocation } from 'react-router-dom';
 import { ErrorResponse, SuccessResponse } from 'types/api';
 import { CheckoutSuccessPayloadProps } from 'types/api/billing/checkout';
 import { License } from 'types/api/licenses/def';
@@ -47,6 +48,7 @@ function LaunchChatSupport({
 		false,
 	);
 
+	const { pathname } = useLocation();
 	const isPremiumChatSupportEnabled =
 		useFeatureFlags(FeatureKeys.PREMIUM_SUPPORT)?.active || false;
 
@@ -65,6 +67,11 @@ function LaunchChatSupport({
 
 	const handleFacingIssuesClick = (): void => {
 		if (showAddCreditCardModal) {
+			logEvent('Disabled Chat Support: Clicked', {
+				source: `facing issues button`,
+				page: pathname,
+				...attributes,
+			});
 			setIsAddCreditCardModalOpen(true);
 		} else {
 			logEvent(eventName, attributes);
@@ -105,7 +112,7 @@ function LaunchChatSupport({
 	const handleAddCreditCard = (): void => {
 		logEvent('Add Credit card modal: Clicked', {
 			source: `facing issues button`,
-			page: '',
+			page: pathname,
 			...attributes,
 		});
 

frontend/src/components/LaunchChatSupport/util.ts

@@ -41,6 +41,21 @@ I need help with managing alerts.
 
 Thanks`;
 
+export const onboardingHelpMessage = (
+	dataSourceName: string,
+	moduleId: string,
+): string => `Hi Team,
+
+I am facing issues sending data to SigNoz. Here are my application details
+
+Data Source: ${dataSourceName}
+Framework:
+Environment:
+Module: ${moduleId}
+
+Thanks
+`;
+
 export const alertHelpMessage = (
 	alertDef: AlertDef,
 	ruleId: number,

frontend/src/components/LogDetail/LogDetail.interfaces.ts

@@ -3,12 +3,18 @@ import { AddToQueryHOCProps } from 'components/Logs/AddToQueryHOC';
 import { ActionItemProps } from 'container/LogDetailedView/ActionItem';
 import { IField } from 'types/api/logs/fields';
 import { ILog } from 'types/api/logs/log';
+import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
 
 import { VIEWS } from './constants';
 
 export type LogDetailProps = {
 	log: ILog | null;
 	selectedTab: VIEWS;
+	onGroupByAttribute?: (
+		fieldKey: string,
+		isJSON?: boolean,
+		dataType?: DataTypes,
+	) => Promise<void>;
 	isListViewPanel?: boolean;
 	listViewPanelSelectedFields?: IField[] | null;
 } & Pick<AddToQueryHOCProps, 'onAddToQuery'> &

frontend/src/components/LogDetail/index.tsx

@@ -2,6 +2,7 @@
 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';
@@ -10,8 +11,13 @@ import { LOCALSTORAGE } from 'constants/localStorage';
 import ContextView from 'container/LogDetailedView/ContextView/ContextView';
 import JSONView from 'container/LogDetailedView/JsonView';
 import Overview from 'container/LogDetailedView/Overview';
-import { aggregateAttributesResourcesToString } from 'container/LogDetailedView/utils';
+import {
+	aggregateAttributesResourcesToString,
+	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';
@@ -28,15 +34,19 @@ import { useMemo, useState } from 'react';
 import { useCopyToClipboard } from 'react-use';
 import { Query, TagFilter } from 'types/api/queryBuilder/queryBuilderData';
 import { DataSource, StringOperators } from 'types/common/queryBuilder';
+import { FORBID_DOM_PURIFY_TAGS } from 'utils/app';
 
 import { VIEW_TYPES, VIEWS } from './constants';
 import { LogDetailProps } from './LogDetail.interfaces';
 import QueryBuilderSearchWrapper from './QueryBuilderSearchWrapper';
 
+const convert = new Convert();
+
 function LogDetail({
 	log,
 	onClose,
 	onAddToQuery,
+	onGroupByAttribute,
 	onClickActionItem,
 	selectedTab,
 	isListViewPanel = false,
@@ -89,6 +99,17 @@ function LogDetail({
 		}
 	};
 
+	const htmlBody = useMemo(
+		() => ({
+			__html: convert.toHtml(
+				dompurify.sanitize(unescapeString(log?.body || ''), {
+					FORBID_TAGS: [...FORBID_DOM_PURIFY_TAGS],
+				}),
+			),
+		}),
+		[log?.body],
+	);
+
 	const handleJSONCopy = (): void => {
 		copyToClipboard(LogJsonData);
 		notifications.success({
@@ -126,8 +147,8 @@ function LogDetail({
 		>
 			<div className="log-detail-drawer__log">
 				<Divider type="vertical" className={cx('log-type-indicator', logType)} />
-				<Tooltip title={log?.body} placement="left">
-					<Typography.Text className="log-body">{log?.body}</Typography.Text>
+				<Tooltip title={removeEscapeCharacters(log?.body)} placement="left">
+					<div className="log-body" dangerouslySetInnerHTML={htmlBody} />
 				</Tooltip>
 
 				<div className="log-overflow-shadow">&nbsp;</div>
@@ -209,6 +230,7 @@ function LogDetail({
 					logData={log}
 					onAddToQuery={onAddToQuery}
 					onClickActionItem={onClickActionItem}
+					onGroupByAttribute={onGroupByAttribute}
 					isListViewPanel={isListViewPanel}
 					selectedOptions={options}
 					listViewPanelSelectedFields={listViewPanelSelectedFields}

frontend/src/components/Logs/AddToQueryHOC.styles.scss

@@ -1,3 +1,16 @@
 .addToQueryContainer {
 	cursor: pointer;
+	display: flex;
+	align-items: center;
+	&.small {
+		line-height: 16px;
+	}
+
+	&.medium {
+		line-height: 20px;
+	}
+
+	&.large {
+		line-height: 24px;
+	}
 }

frontend/src/components/Logs/AddToQueryHOC.tsx

@@ -1,18 +1,21 @@
 import './AddToQueryHOC.styles.scss';
 
 import { Popover } from 'antd';
+import cx from 'classnames';
 import { OPERATORS } from 'constants/queryBuilder';
+import { FontSize } from 'container/OptionsMenu/types';
 import { memo, MouseEvent, ReactNode, useMemo } from 'react';
 
 function AddToQueryHOC({
 	fieldKey,
 	fieldValue,
 	onAddToQuery,
+	fontSize,
 	children,
 }: AddToQueryHOCProps): JSX.Element {
 	const handleQueryAdd = (event: MouseEvent<HTMLDivElement>): void => {
 		event.stopPropagation();
-		onAddToQuery(fieldKey, fieldValue, OPERATORS.IN);
+		onAddToQuery(fieldKey, fieldValue, OPERATORS['=']);
 	};
 
 	const popOverContent = useMemo(() => <span>Add to query: {fieldKey}</span>, [
@@ -21,7 +24,7 @@ function AddToQueryHOC({
 
 	return (
 		// eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
-		<div className="addToQueryContainer" onClick={handleQueryAdd}>
+		<div className={cx('addToQueryContainer', fontSize)} onClick={handleQueryAdd}>
 			<Popover placement="top" content={popOverContent}>
 				{children}
 			</Popover>
@@ -33,6 +36,7 @@ export interface AddToQueryHOCProps {
 	fieldKey: string;
 	fieldValue: string;
 	onAddToQuery: (fieldKey: string, fieldValue: string, operator: string) => void;
+	fontSize: FontSize;
 	children: ReactNode;
 }
 

frontend/src/components/Logs/CopyClipboardHOC.tsx

@@ -4,6 +4,7 @@ import { ReactNode, useCallback, useEffect } from 'react';
 import { useCopyToClipboard } from 'react-use';
 
 function CopyClipboardHOC({
+	entityKey,
 	textToCopy,
 	children,
 }: CopyClipboardHOCProps): JSX.Element {
@@ -11,11 +12,15 @@ function CopyClipboardHOC({
 	const { notifications } = useNotifications();
 	useEffect(() => {
 		if (value.value) {
+			const key = entityKey || '';
+
+			const notificationMessage = `${key} copied to clipboard`;
+
 			notifications.success({
-				message: 'Copied to clipboard',
+				message: notificationMessage,
 			});
 		}
-	}, [value, notifications]);
+	}, [value, notifications, entityKey]);
 
 	const onClick = useCallback((): void => {
 		setCopy(textToCopy);
@@ -34,6 +39,7 @@ function CopyClipboardHOC({
 }
 
 interface CopyClipboardHOCProps {
+	entityKey: string | undefined;
 	textToCopy: string;
 	children: ReactNode;
 }

frontend/src/components/Logs/ListLogView/ListLogView.styles.scss

@@ -6,6 +6,21 @@
 	font-weight: 400;
 	line-height: 18px; /* 128.571% */
 	letter-spacing: -0.07px;
+
+	&.small {
+		font-size: 11px;
+		line-height: 16px;
+	}
+
+	&.medium {
+		font-size: 13px;
+		line-height: 20px;
+	}
+
+	&.large {
+		font-size: 14px;
+		line-height: 24px;
+	}
 }
 .log-value {
 	color: var(--text-vanilla-400, #c0c1c3);
@@ -14,6 +29,21 @@
 	font-weight: 400;
 	line-height: 18px; /* 128.571% */
 	letter-spacing: -0.07px;
+
+	&.small {
+		font-size: 11px;
+		line-height: 16px;
+	}
+
+	&.medium {
+		font-size: 13px;
+		line-height: 20px;
+	}
+
+	&.large {
+		font-size: 14px;
+		line-height: 24px;
+	}
 }
 .log-line {
 	display: flex;
@@ -40,6 +70,20 @@
 		font-weight: 400;
 		line-height: 18px; /* 128.571% */
 		letter-spacing: -0.07px;
+		&.small {
+			font-size: 11px;
+			line-height: 16px;
+		}
+
+		&.medium {
+			font-size: 13px;
+			line-height: 20px;
+		}
+
+		&.large {
+			font-size: 14px;
+			line-height: 24px;
+		}
 	}
 
 	.selected-log-value {
@@ -52,12 +96,37 @@
 		line-height: 18px;
 		letter-spacing: -0.07px;
 		font-size: 14px;
+		&.small {
+			font-size: 11px;
+			line-height: 16px;
+		}
+
+		&.medium {
+			font-size: 13px;
+			line-height: 20px;
+		}
+
+		&.large {
+			font-size: 14px;
+			line-height: 24px;
+		}
 	}
 
 	.selected-log-kv {
 		min-height: 24px;
 		display: flex;
 		align-items: center;
+		&.small {
+			min-height: 16px;
+		}
+
+		&.medium {
+			min-height: 20px;
+		}
+
+		&.large {
+			min-height: 24px;
+		}
 	}
 }
 

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

@@ -3,8 +3,11 @@ 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 { unescapeString } from 'container/LogDetailedView/utils';
+import { FontSize } from 'container/OptionsMenu/types';
 import dayjs from 'dayjs';
 import dompurify from 'dompurify';
 import { useActiveLog } from 'hooks/logs/useActiveLog';
@@ -39,6 +42,7 @@ interface LogFieldProps {
 	fieldKey: string;
 	fieldValue: string;
 	linesPerRow?: number;
+	fontSize: FontSize;
 }
 
 type LogSelectedFieldProps = Omit<LogFieldProps, 'linesPerRow'> &
@@ -48,11 +52,12 @@ function LogGeneralField({
 	fieldKey,
 	fieldValue,
 	linesPerRow = 1,
+	fontSize,
 }: LogFieldProps): JSX.Element {
 	const html = useMemo(
 		() => ({
 			__html: convert.toHtml(
-				dompurify.sanitize(fieldValue, {
+				dompurify.sanitize(unescapeString(fieldValue), {
 					FORBID_TAGS: [...FORBID_DOM_PURIFY_TAGS],
 				}),
 			),
@@ -62,12 +67,12 @@ function LogGeneralField({
 
 	return (
 		<TextContainer>
-			<Text ellipsis type="secondary" className="log-field-key">
+			<Text ellipsis type="secondary" className={cx('log-field-key', fontSize)}>
 				{`${fieldKey} : `}
 			</Text>
 			<LogText
 				dangerouslySetInnerHTML={html}
-				className="log-value"
+				className={cx('log-value', fontSize)}
 				linesPerRow={linesPerRow > 1 ? linesPerRow : undefined}
 			/>
 		</TextContainer>
@@ -78,6 +83,7 @@ function LogSelectedField({
 	fieldKey = '',
 	fieldValue = '',
 	onAddToQuery,
+	fontSize,
 }: LogSelectedFieldProps): JSX.Element {
 	return (
 		<div className="log-selected-fields">
@@ -85,16 +91,22 @@ function LogSelectedField({
 				fieldKey={fieldKey}
 				fieldValue={fieldValue}
 				onAddToQuery={onAddToQuery}
+				fontSize={fontSize}
 			>
 				<Typography.Text>
-					<span style={{ color: blue[4] }} className="selected-log-field-key">
+					<span
+						style={{ color: blue[4] }}
+						className={cx('selected-log-field-key', fontSize)}
+					>
 						{fieldKey}
 					</span>
 				</Typography.Text>
 			</AddToQueryHOC>
-			<Typography.Text ellipsis className="selected-log-kv">
-				<span className="selected-log-field-key">{': '}</span>
-				<span className="selected-log-value">{fieldValue || "''"}</span>
+			<Typography.Text ellipsis className={cx('selected-log-kv', fontSize)}>
+				<span className={cx('selected-log-field-key', fontSize)}>{': '}</span>
+				<span className={cx('selected-log-value', fontSize)}>
+					{fieldValue || "''"}
+				</span>
 			</Typography.Text>
 		</div>
 	);
@@ -107,6 +119,7 @@ type ListLogViewProps = {
 	onAddToQuery: AddToQueryHOCProps['onAddToQuery'];
 	activeLog?: ILog | null;
 	linesPerRow: number;
+	fontSize: FontSize;
 };
 
 function ListLogView({
@@ -116,6 +129,7 @@ function ListLogView({
 	onAddToQuery,
 	activeLog,
 	linesPerRow,
+	fontSize,
 }: ListLogViewProps): JSX.Element {
 	const flattenLogData = useMemo(() => FlatLogData(logData), [logData]);
 
@@ -128,6 +142,7 @@ function ListLogView({
 		onAddToQuery: handleAddToQuery,
 		onSetActiveLog: handleSetActiveContextLog,
 		onClearActiveLog: handleClearActiveContextLog,
+		onGroupByAttribute,
 	} = useActiveLog();
 
 	const isDarkMode = useIsDarkMode();
@@ -185,6 +200,7 @@ function ListLogView({
 				onMouseEnter={handleMouseEnter}
 				onMouseLeave={handleMouseLeave}
 				onClick={handleDetailedView}
+				fontSize={fontSize}
 			>
 				<div className="log-line">
 					<LogStateIndicator
@@ -192,18 +208,28 @@ function ListLogView({
 						isActive={
 							activeLog?.id === logData.id || activeContextLog?.id === logData.id
 						}
+						fontSize={fontSize}
 					/>
 					<div>
-						<LogContainer>
+						<LogContainer fontSize={fontSize}>
 							<LogGeneralField
 								fieldKey="Log"
 								fieldValue={flattenLogData.body}
 								linesPerRow={linesPerRow}
+								fontSize={fontSize}
 							/>
 							{flattenLogData.stream && (
-								<LogGeneralField fieldKey="Stream" fieldValue={flattenLogData.stream} />
+								<LogGeneralField
+									fieldKey="Stream"
+									fieldValue={flattenLogData.stream}
+									fontSize={fontSize}
+								/>
 							)}
-							<LogGeneralField fieldKey="Timestamp" fieldValue={timestampValue} />
+							<LogGeneralField
+								fieldKey="Timestamp"
+								fieldValue={timestampValue}
+								fontSize={fontSize}
+							/>
 
 							{updatedSelecedFields.map((field) =>
 								isValidLogField(flattenLogData[field.name] as never) ? (
@@ -212,6 +238,7 @@ function ListLogView({
 										fieldKey={field.name}
 										fieldValue={flattenLogData[field.name] as never}
 										onAddToQuery={onAddToQuery}
+										fontSize={fontSize}
 									/>
 								) : null,
 							)}
@@ -232,6 +259,7 @@ function ListLogView({
 					onAddToQuery={handleAddToQuery}
 					selectedTab={VIEW_TYPES.CONTEXT}
 					onClose={handlerClearActiveContextLog}
+					onGroupByAttribute={onGroupByAttribute}
 				/>
 			)}
 		</>

frontend/src/components/Logs/ListLogView/styles.ts

@@ -1,21 +1,46 @@
+/* eslint-disable no-nested-ternary */
 import { Color } from '@signozhq/design-tokens';
 import { Card, Typography } from 'antd';
+import { FontSize } from 'container/OptionsMenu/types';
 import styled from 'styled-components';
 
 interface LogTextProps {
 	linesPerRow?: number;
 }
 
+interface LogContainerProps {
+	fontSize: FontSize;
+}
+
 export const Container = styled(Card)<{
 	$isActiveLog: boolean;
 	$isDarkMode: boolean;
+	fontSize: FontSize;
 }>`
 	width: 100% !important;
 	margin-bottom: 0.3rem;
+
+	${({ fontSize }): string =>
+		fontSize === FontSize.SMALL
+			? `margin-bottom:0.1rem;`
+			: fontSize === FontSize.MEDIUM
+			? `margin-bottom: 0.2rem;`
+			: fontSize === FontSize.LARGE
+			? `margin-bottom:0.3rem;`
+			: ``}
 	cursor: pointer;
 	.ant-card-body {
 		padding: 0.3rem 0.6rem;
 
+		${({ fontSize }): string =>
+			fontSize === FontSize.SMALL
+				? `padding:0.1rem 0.6rem;`
+				: fontSize === FontSize.MEDIUM
+				? `padding: 0.2rem 0.6rem;`
+				: fontSize === FontSize.LARGE
+				? `padding:0.3rem 0.6rem;`
+				: ``}
+
 		${({ $isActiveLog, $isDarkMode }): string =>
 			$isActiveLog
 				? `background-color: ${
@@ -38,11 +63,17 @@ export const TextContainer = styled.div`
 	width: 100%;
 `;
 
-export const LogContainer = styled.div`
+export const LogContainer = styled.div<LogContainerProps>`
 	margin-left: 0.5rem;
 	display: flex;
 	flex-direction: column;
 	gap: 6px;
+	${({ fontSize }): string =>
+		fontSize === FontSize.SMALL
+			? `gap: 2px;`
+			: fontSize === FontSize.MEDIUM
+			? ` gap:4px;`
+			: `gap:6px;`}
 `;
 
 export const LogText = styled.div<LogTextProps>`

frontend/src/components/Logs/LogStateIndicator/LogStateIndicator.styles.scss

@@ -9,11 +9,24 @@
 		border-radius: 50px;
 		background-color: transparent;
 
+		&.small {
+			min-height: 16px;
+		}
+
+		&.medium {
+			min-height: 20px;
+		}
+
+		&.large {
+			min-height: 24px;
+		}
+
 		&.INFO {
 			background-color: var(--bg-slate-400);
 		}
 
-		&.WARNING, &.WARN {
+		&.WARNING,
+		&.WARN {
 			background-color: var(--bg-amber-500);
 		}
 

frontend/src/components/Logs/LogStateIndicator/LogStateIndicator.test.tsx

@@ -1,10 +1,13 @@
 import { render } from '@testing-library/react';
+import { FontSize } from 'container/OptionsMenu/types';
 
 import LogStateIndicator from './LogStateIndicator';
 
 describe('LogStateIndicator', () => {
 	it('renders correctly with default props', () => {
-		const { container } = render(<LogStateIndicator type="INFO" />);
+		const { container } = render(
+			<LogStateIndicator type="INFO" fontSize={FontSize.MEDIUM} />,
+		);
 		const indicator = container.firstChild as HTMLElement;
 		expect(indicator.classList.contains('log-state-indicator')).toBe(true);
 		expect(indicator.classList.contains('isActive')).toBe(false);
@@ -15,28 +18,30 @@ describe('LogStateIndicator', () => {
 	});
 
 	it('renders correctly when isActive is true', () => {
-		const { container } = render(<LogStateIndicator type="INFO" isActive />);
+		const { container } = render(
+			<LogStateIndicator type="INFO" isActive fontSize={FontSize.MEDIUM} />,
+		);
 		const indicator = container.firstChild as HTMLElement;
 		expect(indicator.classList.contains('isActive')).toBe(true);
 	});
 
 	it('renders correctly with different types', () => {
 		const { container: containerInfo } = render(
-			<LogStateIndicator type="INFO" />,
+			<LogStateIndicator type="INFO" fontSize={FontSize.MEDIUM} />,
 		);
 		expect(containerInfo.querySelector('.line')?.classList.contains('INFO')).toBe(
 			true,
 		);
 
 		const { container: containerWarning } = render(
-			<LogStateIndicator type="WARNING" />,
+			<LogStateIndicator type="WARNING" fontSize={FontSize.MEDIUM} />,
 		);
 		expect(
 			containerWarning.querySelector('.line')?.classList.contains('WARNING'),
 		).toBe(true);
 
 		const { container: containerError } = render(
-			<LogStateIndicator type="ERROR" />,
+			<LogStateIndicator type="ERROR" fontSize={FontSize.MEDIUM} />,
 		);
 		expect(
 			containerError.querySelector('.line')?.classList.contains('ERROR'),

frontend/src/components/Logs/LogStateIndicator/LogStateIndicator.tsx

@@ -1,6 +1,7 @@
 import './LogStateIndicator.styles.scss';
 
 import cx from 'classnames';
+import { FontSize } from 'container/OptionsMenu/types';
 
 export const SEVERITY_TEXT_TYPE = {
 	TRACE: 'TRACE',
@@ -44,13 +45,15 @@ export const LogType = {
 function LogStateIndicator({
 	type,
 	isActive,
+	fontSize,
 }: {
 	type: string;
+	fontSize: FontSize;
 	isActive?: boolean;
 }): JSX.Element {
 	return (
 		<div className={cx('log-state-indicator', isActive ? 'isActive' : '')}>
-			<div className={cx('line', type)}> </div>
+			<div className={cx('line', type, fontSize)}> </div>
 		</div>
 	);
 }

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

@@ -4,6 +4,7 @@ import Convert from 'ansi-to-html';
 import { DrawerProps } from 'antd';
 import LogDetail from 'components/LogDetail';
 import { VIEW_TYPES, VIEWS } from 'components/LogDetail/constants';
+import { unescapeString } from 'container/LogDetailedView/utils';
 import LogsExplorerContext from 'container/LogsExplorerContext';
 import dayjs from 'dayjs';
 import dompurify from 'dompurify';
@@ -39,6 +40,7 @@ function RawLogView({
 	linesPerRow,
 	isTextOverflowEllipsisDisabled,
 	selectedFields = [],
+	fontSize,
 }: RawLogViewProps): JSX.Element {
 	const { isHighlighted, isLogsExplorerPage, onLogCopy } = useCopyLogLink(
 		data.id,
@@ -54,6 +56,7 @@ function RawLogView({
 		onSetActiveLog,
 		onClearActiveLog,
 		onAddToQuery,
+		onGroupByAttribute,
 	} = useActiveLog();
 
 	const [hasActionButtons, setHasActionButtons] = useState<boolean>(false);
@@ -143,7 +146,9 @@ function RawLogView({
 	const html = useMemo(
 		() => ({
 			__html: convert.toHtml(
-				dompurify.sanitize(text, { FORBID_TAGS: [...FORBID_DOM_PURIFY_TAGS] }),
+				dompurify.sanitize(unescapeString(text), {
+					FORBID_TAGS: [...FORBID_DOM_PURIFY_TAGS],
+				}),
 			),
 		}),
 		[text],
@@ -160,6 +165,7 @@ function RawLogView({
 			$isActiveLog={isActiveLog}
 			onMouseEnter={handleMouseEnter}
 			onMouseLeave={handleMouseLeave}
+			fontSize={fontSize}
 		>
 			<LogStateIndicator
 				type={logType}
@@ -168,6 +174,7 @@ function RawLogView({
 					activeContextLog?.id === data.id ||
 					isActiveLog
 				}
+				fontSize={fontSize}
 			/>
 
 			<RawLogContent
@@ -176,6 +183,7 @@ function RawLogView({
 				$isDarkMode={isDarkMode}
 				$isTextOverflowEllipsisDisabled={isTextOverflowEllipsisDisabled}
 				linesPerRow={linesPerRow}
+				fontSize={fontSize}
 				dangerouslySetInnerHTML={html}
 			/>
 
@@ -199,6 +207,7 @@ function RawLogView({
 					onClose={handleCloseLogDetail}
 					onAddToQuery={onAddToQuery}
 					onClickActionItem={onAddToQuery}
+					onGroupByAttribute={onGroupByAttribute}
 				/>
 			)}
 		</RawLogViewContainer>

frontend/src/components/Logs/RawLogView/styles.ts

@@ -1,6 +1,8 @@
+/* eslint-disable no-nested-ternary */
 import { blue } from '@ant-design/colors';
 import { Color } from '@signozhq/design-tokens';
 import { Col, Row, Space } from 'antd';
+import { FontSize } from 'container/OptionsMenu/types';
 import styled from 'styled-components';
 import { getActiveLogBackground, getDefaultLogBackground } from 'utils/logs';
 
@@ -11,6 +13,7 @@ export const RawLogViewContainer = styled(Row)<{
 	$isReadOnly?: boolean;
 	$isActiveLog?: boolean;
 	$isHightlightedLog: boolean;
+	fontSize: FontSize;
 }>`
 	position: relative;
 	width: 100%;
@@ -22,6 +25,13 @@ export const RawLogViewContainer = styled(Row)<{
 
 	.log-state-indicator {
 		margin: 4px 0;
+
+		${({ fontSize }): string =>
+			fontSize === FontSize.SMALL
+				? `margin: 1px 0;`
+				: fontSize === FontSize.MEDIUM
+				? `margin: 1px 0;`
+				: `margin: 2px 0;`}
 	}
 
 	${({ $isActiveLog }): string => getActiveLogBackground($isActiveLog)}
@@ -50,8 +60,8 @@ export const RawLogContent = styled.div<RawLogContentProps>`
 	margin-bottom: 0;
 	font-family: 'SF Mono', monospace;
 	font-family: 'Geist Mono';
-	font-size: 13px;
-	font-weight: 400;
+	letter-spacing: -0.07px;
+	padding: 4px;
 	text-align: left;
 	color: ${({ $isDarkMode }): string =>
 		$isDarkMode ? Color.BG_VANILLA_400 : Color.BG_INK_400};
@@ -66,9 +76,15 @@ export const RawLogContent = styled.div<RawLogContentProps>`
 		line-clamp: ${linesPerRow}; 
 		-webkit-box-orient: vertical;`};
 
+	font-size: 13px;
+	font-weight: 400;
 	line-height: 24px;
-	letter-spacing: -0.07px;
-	padding: 4px;
+	${({ fontSize }): string =>
+		fontSize === FontSize.SMALL
+			? `font-size:11px; line-height:16px; padding:1px;`
+			: fontSize === FontSize.MEDIUM
+			? `font-size:13px; line-height:20px; padding:1px;`
+			: `font-size:14px; line-height:24px; padding:2px;`}
 
 	cursor: ${({ $isActiveLog, $isReadOnly }): string =>
 		$isActiveLog || $isReadOnly ? 'initial' : 'pointer'};

frontend/src/components/Logs/RawLogView/types.ts

@@ -1,3 +1,4 @@
+import { FontSize } from 'container/OptionsMenu/types';
 import { IField } from 'types/api/logs/fields';
 import { ILog } from 'types/api/logs/log';
 
@@ -7,11 +8,13 @@ export interface RawLogViewProps {
 	isTextOverflowEllipsisDisabled?: boolean;
 	data: ILog;
 	linesPerRow: number;
+	fontSize: FontSize;
 	selectedFields?: IField[];
 }
 
 export interface RawLogContentProps {
 	linesPerRow: number;
+	fontSize: FontSize;
 	$isReadOnly?: boolean;
 	$isActiveLog?: boolean;
 	$isDarkMode?: boolean;

frontend/src/components/Logs/TableView/styles.ts

@@ -1,7 +1,10 @@
+/* eslint-disable no-nested-ternary */
+import { FontSize } from 'container/OptionsMenu/types';
 import styled from 'styled-components';
 
 interface TableBodyContentProps {
 	linesPerRow: number;
+	fontSize: FontSize;
 	isDarkMode?: boolean;
 }
 
@@ -20,4 +23,10 @@ export const TableBodyContent = styled.div<TableBodyContentProps>`
 	-webkit-line-clamp: ${(props): number => props.linesPerRow};
 	line-clamp: ${(props): number => props.linesPerRow};
 	-webkit-box-orient: vertical;
+	${({ fontSize }): string =>
+		fontSize === FontSize.SMALL
+			? `font-size:11px; line-height:16px;`
+			: fontSize === FontSize.MEDIUM
+			? `font-size:13px; line-height:20px;`
+			: `font-size:14px; line-height:24px;`}
 `;

frontend/src/components/Logs/TableView/types.ts

@@ -1,4 +1,5 @@
 import { ColumnsType, ColumnType } from 'antd/es/table';
+import { FontSize } from 'container/OptionsMenu/types';
 import { IField } from 'types/api/logs/fields';
 import { ILog } from 'types/api/logs/log';
 
@@ -10,6 +11,7 @@ export type LogsTableViewProps = {
 	logs: ILog[];
 	fields: IField[];
 	linesPerRow: number;
+	fontSize: FontSize;
 	onClickExpand?: (log: ILog) => void;
 };
 

frontend/src/components/Logs/TableView/useTableView.styles.scss

@@ -5,6 +5,21 @@
 	font-weight: 400;
 	line-height: 18px; /* 128.571% */
 	letter-spacing: -0.07px;
+
+	&.small {
+		font-size: 11px;
+		line-height: 16px;
+	}
+
+	&.medium {
+		font-size: 13px;
+		line-height: 20px;
+	}
+
+	&.large {
+		font-size: 14px;
+		line-height: 24px;
+	}
 }
 
 .table-timestamp {
@@ -25,3 +40,21 @@
 		color: var(--bg-slate-400);
 	}
 }
+
+.paragraph {
+	padding: 0px !important;
+	&.small {
+		font-size: 11px !important;
+		line-height: 16px !important;
+	}
+
+	&.medium {
+		font-size: 13px !important;
+		line-height: 20px !important;
+	}
+
+	&.large {
+		font-size: 14px !important;
+		line-height: 24px !important;
+	}
+}

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

@@ -3,6 +3,8 @@ 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 { unescapeString } from 'container/LogDetailedView/utils';
 import dayjs from 'dayjs';
 import dompurify from 'dompurify';
 import { useIsDarkMode } from 'hooks/useDarkMode';
@@ -31,6 +33,7 @@ export const useTableView = (props: UseTableViewProps): UseTableViewResult => {
 		logs,
 		fields,
 		linesPerRow,
+		fontSize,
 		appendTo = 'center',
 		activeContextLog,
 		activeLog,
@@ -57,7 +60,10 @@ export const useTableView = (props: UseTableViewProps): UseTableViewResult => {
 							: getDefaultCellStyle(isDarkMode),
 					},
 					children: (
-						<Typography.Paragraph ellipsis={{ rows: linesPerRow }}>
+						<Typography.Paragraph
+							ellipsis={{ rows: linesPerRow }}
+							className={cx('paragraph', fontSize)}
+						>
 							{field}
 						</Typography.Paragraph>
 					),
@@ -87,8 +93,9 @@ export const useTableView = (props: UseTableViewProps): UseTableViewResult => {
 									isActive={
 										activeLog?.id === item.id || activeContextLog?.id === item.id
 									}
+									fontSize={fontSize}
 								/>
-								<Typography.Paragraph ellipsis className="text">
+								<Typography.Paragraph ellipsis className={cx('text', fontSize)}>
 									{date}
 								</Typography.Paragraph>
 							</div>
@@ -109,11 +116,12 @@ export const useTableView = (props: UseTableViewProps): UseTableViewResult => {
 						<TableBodyContent
 							dangerouslySetInnerHTML={{
 								__html: convert.toHtml(
-									dompurify.sanitize(field, {
+									dompurify.sanitize(unescapeString(field), {
 										FORBID_TAGS: [...FORBID_DOM_PURIFY_TAGS],
 									}),
 								),
 							}}
+							fontSize={fontSize}
 							linesPerRow={linesPerRow}
 							isDarkMode={isDarkMode}
 						/>
@@ -130,6 +138,7 @@ export const useTableView = (props: UseTableViewProps): UseTableViewResult => {
 		linesPerRow,
 		activeLog?.id,
 		activeContextLog?.id,
+		fontSize,
 	]);
 
 	return { columns, dataSource: flattenLogData };

frontend/src/components/LogsFormatOptionsMenu/LogsFormatOptionsMenu.styles.scss

@@ -17,17 +17,126 @@
 	box-shadow: 4px 10px 16px 2px rgba(0, 0, 0, 0.2);
 	backdrop-filter: blur(20px);
 
+	.font-size-dropdown {
+		display: flex;
+		flex-direction: column;
+
+		.back-btn {
+			display: flex;
+			align-items: center;
+			gap: 6px;
+			padding: 12px;
+			border: none !important;
+			box-shadow: none !important;
+
+			.icon {
+				flex-shrink: 0;
+			}
+			.text {
+				color: var(--bg-vanilla-400);
+				font-family: Inter;
+				font-size: 13px;
+				font-style: normal;
+				font-weight: 400;
+				line-height: 20px; /* 142.857% */
+				letter-spacing: 0.14px;
+			}
+		}
+
+		.back-btn:hover {
+			background-color: unset !important;
+		}
+
+		.content {
+			display: flex;
+			flex-direction: column;
+			.option-btn {
+				display: flex;
+				align-items: center;
+				padding: 12px;
+				border: none !important;
+				box-shadow: none !important;
+				justify-content: space-between;
+
+				.icon {
+					flex-shrink: 0;
+				}
+				.text {
+					color: var(--bg-vanilla-400);
+					font-family: Inter;
+					font-size: 13px;
+					font-style: normal;
+					font-weight: 400;
+					line-height: normal; /* 142.857% */
+					letter-spacing: 0.14px;
+					text-transform: capitalize;
+				}
+
+				.text:hover {
+					color: var(--bg-vanilla-300);
+				}
+			}
+
+			.option-btn:hover {
+				background-color: unset !important;
+			}
+		}
+	}
+
+	.font-size-container {
+		padding: 12px;
+		display: flex;
+		flex-direction: column;
+		gap: 12px;
+
+		.title {
+			color: var(--bg-slate-50);
+			font-family: Inter;
+			font-size: 11px;
+			font-style: normal;
+			font-weight: 500;
+			line-height: 18px; /* 163.636% */
+			letter-spacing: 0.88px;
+			text-transform: uppercase;
+		}
+
+		.value {
+			display: flex;
+			height: 20px;
+			padding: 4px 0px;
+			justify-content: space-between;
+			align-items: center;
+			border: none !important;
+			.font-value {
+				color: var(--bg-vanilla-400);
+				font-family: Inter;
+				font-size: 13px;
+				font-style: normal;
+				font-weight: 400;
+				line-height: normal;
+				letter-spacing: 0.14px;
+				text-transform: capitalize;
+			}
+			.icon {
+			}
+		}
+
+		.value:hover {
+			background-color: unset !important;
+		}
+	}
+
 	.menu-container {
 		padding: 12px;
 
 		.title {
 			font-family: Inter;
 			font-size: 11px;
-			font-weight: 600;
+			font-weight: 500;
 			line-height: 18px;
 			letter-spacing: 0.08em;
 			text-align: left;
-			color: #52575c;
+			color: var(--bg-slate-50);
 		}
 
 		.menu-items {
@@ -65,11 +174,11 @@
 		padding: 12px;
 
 		.title {
-			color: #52575c;
+			color: var(--bg-slate-50);
 			font-family: Inter;
 			font-size: 11px;
 			font-style: normal;
-			font-weight: 600;
+			font-weight: 500;
 			line-height: 18px; /* 163.636% */
 			letter-spacing: 0.88px;
 			text-transform: uppercase;
@@ -149,11 +258,11 @@
 		}
 
 		.title {
-			color: #52575c;
+			color: var(--bg-slate-50);
 			font-family: Inter;
 			font-size: 11px;
 			font-style: normal;
-			font-weight: 600;
+			font-weight: 500;
 			line-height: 18px; /* 163.636% */
 			letter-spacing: 0.88px;
 			text-transform: uppercase;
@@ -299,6 +408,38 @@
 
 		box-shadow: 4px 10px 16px 2px rgba(255, 255, 255, 0.2);
 
+		.font-size-dropdown {
+			.back-btn {
+				.text {
+					color: var(--bg-ink-400);
+				}
+			}
+
+			.content {
+				.option-btn {
+					.text {
+						color: var(--bg-ink-400);
+					}
+
+					.text:hover {
+						color: var(--bg-ink-300);
+					}
+				}
+			}
+		}
+
+		.font-size-container {
+			.title {
+				color: var(--bg-ink-100);
+			}
+
+			.value {
+				.font-value {
+					color: var(--bg-ink-400);
+				}
+			}
+		}
+
 		.horizontal-line {
 			background: var(--bg-vanilla-300);
 		}

frontend/src/components/LogsFormatOptionsMenu/LogsFormatOptionsMenu.tsx

@@ -3,12 +3,12 @@
 /* eslint-disable jsx-a11y/click-events-have-key-events */
 import './LogsFormatOptionsMenu.styles.scss';
 
-import { Divider, Input, InputNumber, Tooltip } from 'antd';
+import { Button, Divider, Input, InputNumber, Tooltip, Typography } from 'antd';
 import cx from 'classnames';
 import { LogViewMode } from 'container/LogsTable';
-import { OptionsMenuConfig } from 'container/OptionsMenu/types';
+import { FontSize, OptionsMenuConfig } from 'container/OptionsMenu/types';
 import useDebouncedFn from 'hooks/useDebouncedFunction';
-import { Check, Minus, Plus, X } from 'lucide-react';
+import { Check, ChevronLeft, ChevronRight, Minus, Plus, X } from 'lucide-react';
 import { useCallback, useEffect, useState } from 'react';
 
 interface LogsFormatOptionsMenuProps {
@@ -24,10 +24,16 @@ export default function LogsFormatOptionsMenu({
 	selectedOptionFormat,
 	config,
 }: LogsFormatOptionsMenuProps): JSX.Element {
-	const { maxLines, format, addColumn } = config;
+	const { maxLines, format, addColumn, fontSize } = config;
 	const [selectedItem, setSelectedItem] = useState(selectedOptionFormat);
 	const maxLinesNumber = (maxLines?.value as number) || 1;
 	const [maxLinesPerRow, setMaxLinesPerRow] = useState<number>(maxLinesNumber);
+	const [fontSizeValue, setFontSizeValue] = useState<FontSize>(
+		fontSize?.value || FontSize.SMALL,
+	);
+	const [isFontSizeOptionsOpen, setIsFontSizeOptionsOpen] = useState<boolean>(
+		false,
+	);
 
 	const [addNewColumn, setAddNewColumn] = useState(false);
 
@@ -88,6 +94,12 @@ export default function LogsFormatOptionsMenu({
 		}
 	}, [maxLinesPerRow]);
 
+	useEffect(() => {
+		if (fontSizeValue && config && config.fontSize?.onChange) {
+			config.fontSize.onChange(fontSizeValue);
+		}
+	}, [fontSizeValue]);
+
 	return (
 		<div
 			className={cx('nested-menu-container', addNewColumn ? 'active' : '')}
@@ -96,145 +108,213 @@ export default function LogsFormatOptionsMenu({
 				event.stopPropagation();
 			}}
 		>
-			<div className="menu-container">
-				<div className="title"> {title} </div>
-
-				<div className="menu-items">
-					{items.map(
-						(item: any): JSX.Element => (
-							<div
-								className="item"
-								key={item.label}
-								onClick={(): void => handleMenuItemClick(item.key)}
-							>
-								<div className={cx('item-label')}>
-									{item.label}
-
-									{selectedItem === item.key && <Check size={12} />}
-								</div>
-							</div>
-						),
-					)}
+			{isFontSizeOptionsOpen ? (
+				<div className="font-size-dropdown">
+					<Button
+						onClick={(): void => setIsFontSizeOptionsOpen(false)}
+						className="back-btn"
+						type="text"
+					>
+						<ChevronLeft size={14} className="icon" />
+						<Typography.Text className="text">Select font size</Typography.Text>
+					</Button>
+					<div className="horizontal-line" />
+					<div className="content">
+						<Button
+							onClick={(): void => {
+								setFontSizeValue(FontSize.SMALL);
+							}}
+							className="option-btn"
+							type="text"
+						>
+							<Typography.Text className="text">{FontSize.SMALL}</Typography.Text>
+							{fontSizeValue === FontSize.SMALL && (
+								<Check size={14} className="icon" />
+							)}
+						</Button>
+						<Button
+							onClick={(): void => {
+								setFontSizeValue(FontSize.MEDIUM);
+							}}
+							className="option-btn"
+							type="text"
+						>
+							<Typography.Text className="text">{FontSize.MEDIUM}</Typography.Text>
+							{fontSizeValue === FontSize.MEDIUM && (
+								<Check size={14} className="icon" />
+							)}
+						</Button>
+						<Button
+							onClick={(): void => {
+								setFontSizeValue(FontSize.LARGE);
+							}}
+							className="option-btn"
+							type="text"
+						>
+							<Typography.Text className="text">{FontSize.LARGE}</Typography.Text>
+							{fontSizeValue === FontSize.LARGE && (
+								<Check size={14} className="icon" />
+							)}
+						</Button>
+					</div>
 				</div>
-			</div>
-
-			{selectedItem && (
+			) : (
 				<>
-					<>
-						<div className="horizontal-line" />
-						<div className="max-lines-per-row">
-							<div className="title"> max lines per row </div>
-							<div className="raw-format max-lines-per-row-input">
-								<button
-									type="button"
-									className="periscope-btn"
-									onClick={decrementMaxLinesPerRow}
-								>
-									{' '}
-									<Minus size={12} />{' '}
-								</button>
-								<InputNumber
-									min={1}
-									max={10}
-									value={maxLinesPerRow}
-									onChange={handleLinesPerRowChange}
-								/>
-								<button
-									type="button"
-									className="periscope-btn"
-									onClick={incrementMaxLinesPerRow}
-								>
-									{' '}
-									<Plus size={12} />{' '}
-								</button>
-							</div>
-						</div>
-					</>
+					<div className="font-size-container">
+						<div className="title">Font Size</div>
+						<Button
+							className="value"
+							type="text"
+							onClick={(): void => {
+								setIsFontSizeOptionsOpen(true);
+							}}
+						>
+							<Typography.Text className="font-value">{fontSizeValue}</Typography.Text>
+							<ChevronRight size={14} className="icon" />
+						</Button>
+					</div>
+					<div className="horizontal-line" />
+					<div className="menu-container">
+						<div className="title"> {title} </div>
 
-					<div className="selected-item-content-container active">
-						{!addNewColumn && <div className="horizontal-line" />}
+						<div className="menu-items">
+							{items.map(
+								(item: any): JSX.Element => (
+									<div
+										className="item"
+										key={item.label}
+										onClick={(): void => handleMenuItemClick(item.key)}
+									>
+										<div className={cx('item-label')}>
+											{item.label}
 
-						{addNewColumn && (
-							<div className="add-new-column-header">
-								<div className="title">
-									{' '}
-									columns
-									<X size={14} onClick={handleToggleAddNewColumn} />{' '}
-								</div>
-
-								<Input
-									tabIndex={0}
-									type="text"
-									autoFocus
-									onFocus={addColumn?.onFocus}
-									onChange={handleSearchValueChange}
-									placeholder="Search..."
-								/>
-							</div>
-						)}
-
-						<div className="item-content">
-							{!addNewColumn && (
-								<div className="title">
-									columns
-									<Plus size={14} onClick={handleToggleAddNewColumn} />{' '}
-								</div>
-							)}
-
-							<div className="column-format">
-								{addColumn?.value?.map(({ key, id }) => (
-									<div className="column-name" key={id}>
-										<div className="name">
-											<Tooltip placement="left" title={key}>
-												{key}
-											</Tooltip>
+											{selectedItem === item.key && <Check size={12} />}
 										</div>
-										<X
-											className="delete-btn"
-											size={14}
-											onClick={(): void => addColumn.onRemove(id as string)}
-										/>
 									</div>
-								))}
-							</div>
-
-							{addColumn?.isFetching && (
-								<div className="loading-container"> Loading ... </div>
-							)}
-
-							{addNewColumn &&
-								addColumn &&
-								addColumn.value.length > 0 &&
-								addColumn.options &&
-								addColumn?.options?.length > 0 && (
-									<Divider className="column-divider" />
-								)}
-
-							{addNewColumn && (
-								<div className="column-format-new-options">
-									{addColumn?.options?.map(({ label, value }) => (
-										<div
-											className="column-name"
-											key={value}
-											onClick={(eve): void => {
-												eve.stopPropagation();
-
-												if (addColumn && addColumn?.onSelect) {
-													addColumn?.onSelect(value, { label, disabled: false });
-												}
-											}}
-										>
-											<div className="name">
-												<Tooltip placement="left" title={label}>
-													{label}
-												</Tooltip>
-											</div>
-										</div>
-									))}
-								</div>
+								),
 							)}
 						</div>
 					</div>
+
+					{selectedItem && (
+						<>
+							<>
+								<div className="horizontal-line" />
+								<div className="max-lines-per-row">
+									<div className="title"> max lines per row </div>
+									<div className="raw-format max-lines-per-row-input">
+										<button
+											type="button"
+											className="periscope-btn"
+											onClick={decrementMaxLinesPerRow}
+										>
+											{' '}
+											<Minus size={12} />{' '}
+										</button>
+										<InputNumber
+											min={1}
+											max={10}
+											value={maxLinesPerRow}
+											onChange={handleLinesPerRowChange}
+										/>
+										<button
+											type="button"
+											className="periscope-btn"
+											onClick={incrementMaxLinesPerRow}
+										>
+											{' '}
+											<Plus size={12} />{' '}
+										</button>
+									</div>
+								</div>
+							</>
+
+							<div className="selected-item-content-container active">
+								{!addNewColumn && <div className="horizontal-line" />}
+
+								{addNewColumn && (
+									<div className="add-new-column-header">
+										<div className="title">
+											{' '}
+											columns
+											<X size={14} onClick={handleToggleAddNewColumn} />{' '}
+										</div>
+
+										<Input
+											tabIndex={0}
+											type="text"
+											autoFocus
+											onFocus={addColumn?.onFocus}
+											onChange={handleSearchValueChange}
+											placeholder="Search..."
+										/>
+									</div>
+								)}
+
+								<div className="item-content">
+									{!addNewColumn && (
+										<div className="title">
+											columns
+											<Plus size={14} onClick={handleToggleAddNewColumn} />{' '}
+										</div>
+									)}
+
+									<div className="column-format">
+										{addColumn?.value?.map(({ key, id }) => (
+											<div className="column-name" key={id}>
+												<div className="name">
+													<Tooltip placement="left" title={key}>
+														{key}
+													</Tooltip>
+												</div>
+												<X
+													className="delete-btn"
+													size={14}
+													onClick={(): void => addColumn.onRemove(id as string)}
+												/>
+											</div>
+										))}
+									</div>
+
+									{addColumn?.isFetching && (
+										<div className="loading-container"> Loading ... </div>
+									)}
+
+									{addNewColumn &&
+										addColumn &&
+										addColumn.value.length > 0 &&
+										addColumn.options &&
+										addColumn?.options?.length > 0 && (
+											<Divider className="column-divider" />
+										)}
+
+									{addNewColumn && (
+										<div className="column-format-new-options">
+											{addColumn?.options?.map(({ label, value }) => (
+												<div
+													className="column-name"
+													key={value}
+													onClick={(eve): void => {
+														eve.stopPropagation();
+
+														if (addColumn && addColumn?.onSelect) {
+															addColumn?.onSelect(value, { label, disabled: false });
+														}
+													}}
+												>
+													<div className="name">
+														<Tooltip placement="left" title={label}>
+															{label}
+														</Tooltip>
+													</div>
+												</div>
+											))}
+										</div>
+									)}
+								</div>
+							</div>
+						</>
+					)}
 				</>
 			)}
 		</div>

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/Checkbox.styles.scss

@@ -0,0 +1,145 @@
+.checkbox-filter {
+	display: flex;
+	flex-direction: column;
+	padding: 12px;
+	gap: 12px;
+	border-bottom: 1px solid var(--bg-slate-400);
+	.filter-header-checkbox {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+
+		.left-action {
+			display: flex;
+			align-items: center;
+			gap: 6px;
+
+			.title {
+				color: var(--bg-vanilla-400);
+				font-family: Inter;
+				font-size: 14px;
+				font-style: normal;
+				font-weight: 400;
+				line-height: 18px;
+				letter-spacing: -0.07px;
+				text-transform: capitalize;
+			}
+		}
+
+		.right-action {
+			display: flex;
+			align-items: center;
+
+			.clear-all {
+				font-size: 12px;
+				color: var(--bg-robin-500);
+				cursor: pointer;
+			}
+		}
+	}
+
+	.values {
+		display: flex;
+		flex-direction: column;
+		gap: 8px;
+
+		.value {
+			display: flex;
+			align-items: center;
+			gap: 8px;
+
+			.checkbox-value-section {
+				display: flex;
+				align-items: center;
+				justify-content: space-between;
+				width: 100%;
+				cursor: pointer;
+
+				&.filter-disabled {
+					cursor: not-allowed;
+
+					.value-string {
+						color: var(--bg-slate-200);
+					}
+
+					.only-btn {
+						cursor: not-allowed;
+						color: var(--bg-slate-200);
+					}
+
+					.toggle-btn {
+						cursor: not-allowed;
+						color: var(--bg-slate-200);
+					}
+				}
+
+				.value-string {
+				}
+
+				.only-btn {
+					display: none;
+				}
+				.toggle-btn {
+					display: none;
+				}
+
+				.toggle-btn:hover {
+					background-color: unset;
+				}
+
+				.only-btn:hover {
+					background-color: unset;
+				}
+			}
+
+			.checkbox-value-section:hover {
+				.toggle-btn {
+					display: none;
+				}
+				.only-btn {
+					display: flex;
+					align-items: center;
+					justify-content: center;
+					height: 21px;
+				}
+			}
+		}
+
+		.value:hover {
+			.toggle-btn {
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				height: 21px;
+			}
+		}
+	}
+
+	.no-data {
+		align-self: center;
+	}
+
+	.show-more {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+
+		.show-more-text {
+			color: var(--bg-robin-500);
+			cursor: pointer;
+		}
+	}
+}
+
+.lightMode {
+	.checkbox-filter {
+		border-bottom: 1px solid var(--bg-vanilla-300);
+		.filter-header-checkbox {
+			.left-action {
+				.title {
+					color: var(--bg-ink-400);
+				}
+			}
+		}
+	}
+}

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/Checkbox.tsx

@@ -0,0 +1,510 @@
+/* eslint-disable no-nested-ternary */
+/* eslint-disable sonarjs/no-identical-functions */
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+import './Checkbox.styles.scss';
+
+import { Button, Checkbox, Input, Skeleton, Typography } from 'antd';
+import cx from 'classnames';
+import { IQuickFiltersConfig } from 'components/QuickFilters/QuickFilters';
+import { OPERATORS } from 'constants/queryBuilder';
+import { getOperatorValue } from 'container/QueryBuilder/filters/QueryBuilderSearch/utils';
+import { useGetAggregateValues } from 'hooks/queryBuilder/useGetAggregateValues';
+import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
+import { cloneDeep, isArray, isEmpty, isEqual } from 'lodash-es';
+import { ChevronDown, ChevronRight } from 'lucide-react';
+import { useMemo, useState } from 'react';
+import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
+import { Query, TagFilterItem } from 'types/api/queryBuilder/queryBuilderData';
+import { DataSource } from 'types/common/queryBuilder';
+import { v4 as uuid } from 'uuid';
+
+const SELECTED_OPERATORS = [OPERATORS['='], 'in'];
+const NON_SELECTED_OPERATORS = [OPERATORS['!='], 'nin'];
+
+function setDefaultValues(
+	values: string[],
+	trueOrFalse: boolean,
+): Record<string, boolean> {
+	const defaultState: Record<string, boolean> = {};
+	values.forEach((val) => {
+		defaultState[val] = trueOrFalse;
+	});
+	return defaultState;
+}
+interface ICheckboxProps {
+	filter: IQuickFiltersConfig;
+}
+
+export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
+	const { filter } = props;
+	const [searchText, setSearchText] = useState<string>('');
+	const [isOpen, setIsOpen] = useState<boolean>(filter.defaultOpen);
+	const [visibleItemsCount, setVisibleItemsCount] = useState<number>(10);
+
+	const {
+		lastUsedQuery,
+		currentQuery,
+		redirectWithQueryBuilderData,
+	} = useQueryBuilder();
+
+	const { data, isLoading } = useGetAggregateValues(
+		{
+			aggregateOperator: 'noop',
+			dataSource: DataSource.LOGS,
+			aggregateAttribute: '',
+			attributeKey: filter.attributeKey.key,
+			filterAttributeKeyDataType: filter.attributeKey.dataType || DataTypes.EMPTY,
+			tagType: filter.attributeKey.type || '',
+			searchText: searchText ?? '',
+		},
+		{
+			enabled: isOpen,
+			keepPreviousData: true,
+		},
+	);
+
+	const attributeValues: string[] = useMemo(
+		() =>
+			((Object.values(data?.payload || {}).find((el) => !!el) ||
+				[]) as string[]).filter((val) => !isEmpty(val)),
+		[data?.payload],
+	);
+	const currentAttributeKeys = attributeValues.slice(0, visibleItemsCount);
+
+	// derive the state of each filter key here in the renderer itself and keep it in sync with staged query
+	// also we need to keep a note of last focussed query.
+	// eslint-disable-next-line sonarjs/cognitive-complexity
+	const currentFilterState = useMemo(() => {
+		let filterState: Record<string, boolean> = setDefaultValues(
+			attributeValues,
+			false,
+		);
+		const filterSync = currentQuery?.builder.queryData?.[
+			lastUsedQuery || 0
+		]?.filters?.items.find((item) =>
+			isEqual(item.key?.key, filter.attributeKey.key),
+		);
+
+		if (filterSync) {
+			if (SELECTED_OPERATORS.includes(filterSync.op)) {
+				if (isArray(filterSync.value)) {
+					filterSync.value.forEach((val) => {
+						filterState[val] = true;
+					});
+				} else if (typeof filterSync.value === 'string') {
+					filterState[filterSync.value] = true;
+				} else if (typeof filterSync.value === 'boolean') {
+					filterState[String(filterSync.value)] = true;
+				} else if (typeof filterSync.value === 'number') {
+					filterState[String(filterSync.value)] = true;
+				}
+			} else if (NON_SELECTED_OPERATORS.includes(filterSync.op)) {
+				filterState = setDefaultValues(attributeValues, true);
+				if (isArray(filterSync.value)) {
+					filterSync.value.forEach((val) => {
+						filterState[val] = false;
+					});
+				} else if (typeof filterSync.value === 'string') {
+					filterState[filterSync.value] = false;
+				} else if (typeof filterSync.value === 'boolean') {
+					filterState[String(filterSync.value)] = false;
+				} else if (typeof filterSync.value === 'number') {
+					filterState[String(filterSync.value)] = false;
+				}
+			}
+		} else {
+			filterState = setDefaultValues(attributeValues, true);
+		}
+		return filterState;
+	}, [
+		attributeValues,
+		currentQuery?.builder.queryData,
+		filter.attributeKey,
+		lastUsedQuery,
+	]);
+
+	// disable the filter when there are multiple entries of the same attribute key present in the filter bar
+	const isFilterDisabled = useMemo(
+		() =>
+			(currentQuery?.builder?.queryData?.[
+				lastUsedQuery || 0
+			]?.filters?.items?.filter((item) =>
+				isEqual(item.key?.key, filter.attributeKey.key),
+			)?.length || 0) > 1,
+
+		[currentQuery?.builder?.queryData, lastUsedQuery, filter.attributeKey],
+	);
+
+	// variable to check if the current filter has multiple values to its name in the key op value section
+	const isMultipleValuesTrueForTheKey =
+		Object.values(currentFilterState).filter((val) => val).length > 1;
+
+	const handleClearFilterAttribute = (): void => {
+		const preparedQuery: Query = {
+			...currentQuery,
+			builder: {
+				...currentQuery.builder,
+				queryData: currentQuery.builder.queryData.map((item, idx) => ({
+					...item,
+					filters: {
+						...item.filters,
+						items:
+							idx === lastUsedQuery
+								? item.filters.items.filter(
+										(fil) => !isEqual(fil.key?.key, filter.attributeKey.key),
+								  )
+								: [...item.filters.items],
+					},
+				})),
+			},
+		};
+		redirectWithQueryBuilderData(preparedQuery);
+	};
+
+	const isSomeFilterPresentForCurrentAttribute = currentQuery.builder.queryData?.[
+		lastUsedQuery || 0
+	]?.filters?.items?.some((item) =>
+		isEqual(item.key?.key, filter.attributeKey.key),
+	);
+
+	const onChange = (
+		value: string,
+		checked: boolean,
+		isOnlyOrAllClicked: boolean,
+		// eslint-disable-next-line sonarjs/cognitive-complexity
+	): void => {
+		const query = cloneDeep(currentQuery.builder.queryData?.[lastUsedQuery || 0]);
+
+		// if only or all are clicked we do not need to worry about anything just override whatever we have
+		// by either adding a new IN operator value clause in case of ONLY or remove everything we have for ALL.
+		if (isOnlyOrAllClicked && query?.filters?.items) {
+			const isOnlyOrAll = isSomeFilterPresentForCurrentAttribute
+				? currentFilterState[value] && !isMultipleValuesTrueForTheKey
+					? 'All'
+					: 'Only'
+				: 'Only';
+			query.filters.items = query.filters.items.filter(
+				(q) => !isEqual(q.key?.key, filter.attributeKey.key),
+			);
+			if (isOnlyOrAll === 'Only') {
+				const newFilterItem: TagFilterItem = {
+					id: uuid(),
+					op: getOperatorValue(OPERATORS.IN),
+					key: filter.attributeKey,
+					value,
+				};
+				query.filters.items = [...query.filters.items, newFilterItem];
+			}
+		} else if (query?.filters?.items) {
+			if (
+				query.filters?.items?.some((item) =>
+					isEqual(item.key?.key, filter.attributeKey.key),
+				)
+			) {
+				// if there is already a running filter for the current attribute key then
+				// we split the cases by which particular operator is present right now!
+				const currentFilter = query.filters?.items?.find((q) =>
+					isEqual(q.key?.key, filter.attributeKey.key),
+				);
+				if (currentFilter) {
+					const runningOperator = currentFilter?.op;
+					switch (runningOperator) {
+						case 'in':
+							if (checked) {
+								// if it's an IN operator then if we are checking another value it get's added to the
+								// filter clause. example -  key IN [value1, currentSelectedValue]
+								if (isArray(currentFilter.value)) {
+									const newFilter = {
+										...currentFilter,
+										value: [...currentFilter.value, value],
+									};
+									query.filters.items = query.filters.items.map((item) => {
+										if (isEqual(item.key?.key, filter.attributeKey.key)) {
+											return newFilter;
+										}
+										return item;
+									});
+								} else {
+									// if the current state wasn't an array we make it one and add our value
+									const newFilter = {
+										...currentFilter,
+										value: [currentFilter.value as string, value],
+									};
+									query.filters.items = query.filters.items.map((item) => {
+										if (isEqual(item.key?.key, filter.attributeKey.key)) {
+											return newFilter;
+										}
+										return item;
+									});
+								}
+							} else if (!checked) {
+								// if we are removing some value when the running operator is IN we filter.
+								// example - key IN [value1,currentSelectedValue] becomes key IN [value1] in case of array
+								if (isArray(currentFilter.value)) {
+									const newFilter = {
+										...currentFilter,
+										value: currentFilter.value.filter((val) => val !== value),
+									};
+
+									if (newFilter.value.length === 0) {
+										query.filters.items = query.filters.items.filter(
+											(item) => !isEqual(item.key?.key, filter.attributeKey.key),
+										);
+									} else {
+										query.filters.items = query.filters.items.map((item) => {
+											if (isEqual(item.key?.key, filter.attributeKey.key)) {
+												return newFilter;
+											}
+											return item;
+										});
+									}
+								} else {
+									// if not an array remove the whole thing altogether!
+									query.filters.items = query.filters.items.filter(
+										(item) => !isEqual(item.key?.key, filter.attributeKey.key),
+									);
+								}
+							}
+							break;
+						case 'nin':
+							// if the current running operator is NIN then when unchecking the value it gets
+							// added to the clause like key NIN [value1 , currentUnselectedValue]
+							if (!checked) {
+								// in case of array add the currentUnselectedValue to the list.
+								if (isArray(currentFilter.value)) {
+									const newFilter = {
+										...currentFilter,
+										value: [...currentFilter.value, value],
+									};
+									query.filters.items = query.filters.items.map((item) => {
+										if (isEqual(item.key?.key, filter.attributeKey.key)) {
+											return newFilter;
+										}
+										return item;
+									});
+								} else {
+									// in case of not an array make it one!
+									const newFilter = {
+										...currentFilter,
+										value: [currentFilter.value as string, value],
+									};
+									query.filters.items = query.filters.items.map((item) => {
+										if (isEqual(item.key?.key, filter.attributeKey.key)) {
+											return newFilter;
+										}
+										return item;
+									});
+								}
+							} else if (checked) {
+								// opposite of above!
+								if (isArray(currentFilter.value)) {
+									const newFilter = {
+										...currentFilter,
+										value: currentFilter.value.filter((val) => val !== value),
+									};
+
+									if (newFilter.value.length === 0) {
+										query.filters.items = query.filters.items.filter(
+											(item) => !isEqual(item.key?.key, filter.attributeKey.key),
+										);
+									} else {
+										query.filters.items = query.filters.items.map((item) => {
+											if (isEqual(item.key?.key, filter.attributeKey.key)) {
+												return newFilter;
+											}
+											return item;
+										});
+									}
+								} else {
+									query.filters.items = query.filters.items.filter(
+										(item) => !isEqual(item.key?.key, filter.attributeKey.key),
+									);
+								}
+							}
+							break;
+						case '=':
+							if (checked) {
+								const newFilter = {
+									...currentFilter,
+									op: getOperatorValue(OPERATORS.IN),
+									value: [currentFilter.value as string, value],
+								};
+								query.filters.items = query.filters.items.map((item) => {
+									if (isEqual(item.key?.key, filter.attributeKey.key)) {
+										return newFilter;
+									}
+									return item;
+								});
+							} else if (!checked) {
+								query.filters.items = query.filters.items.filter(
+									(item) => !isEqual(item.key?.key, filter.attributeKey.key),
+								);
+							}
+							break;
+						case '!=':
+							if (!checked) {
+								const newFilter = {
+									...currentFilter,
+									op: getOperatorValue(OPERATORS.NIN),
+									value: [currentFilter.value as string, value],
+								};
+								query.filters.items = query.filters.items.map((item) => {
+									if (isEqual(item.key?.key, filter.attributeKey.key)) {
+										return newFilter;
+									}
+									return item;
+								});
+							} else if (checked) {
+								query.filters.items = query.filters.items.filter(
+									(item) => !isEqual(item.key?.key, filter.attributeKey.key),
+								);
+							}
+							break;
+						default:
+							break;
+					}
+				}
+			} else {
+				// case  - when there is no filter for the current key that means all are selected right now.
+				const newFilterItem: TagFilterItem = {
+					id: uuid(),
+					op: getOperatorValue(OPERATORS.NIN),
+					key: filter.attributeKey,
+					value,
+				};
+				query.filters.items = [...query.filters.items, newFilterItem];
+			}
+		}
+		const finalQuery = {
+			...currentQuery,
+			builder: {
+				...currentQuery.builder,
+				queryData: [
+					...currentQuery.builder.queryData.map((q, idx) => {
+						if (idx === lastUsedQuery) {
+							return query;
+						}
+						return q;
+					}),
+				],
+			},
+		};
+
+		redirectWithQueryBuilderData(finalQuery);
+	};
+
+	return (
+		<div className="checkbox-filter">
+			<section className="filter-header-checkbox">
+				<section className="left-action">
+					{isOpen ? (
+						<ChevronDown
+							size={13}
+							cursor="pointer"
+							onClick={(): void => {
+								setIsOpen(false);
+								setVisibleItemsCount(10);
+							}}
+						/>
+					) : (
+						<ChevronRight
+							size={13}
+							onClick={(): void => setIsOpen(true)}
+							cursor="pointer"
+						/>
+					)}
+					<Typography.Text className="title">{filter.title}</Typography.Text>
+				</section>
+				<section className="right-action">
+					{isOpen && (
+						<Typography.Text
+							className="clear-all"
+							onClick={handleClearFilterAttribute}
+						>
+							Clear All
+						</Typography.Text>
+					)}
+				</section>
+			</section>
+			{isOpen && isLoading && !attributeValues.length && (
+				<section className="loading">
+					<Skeleton paragraph={{ rows: 4 }} />
+				</section>
+			)}
+			{isOpen && !isLoading && (
+				<>
+					<section className="search">
+						<Input
+							placeholder="Filter values"
+							onChange={(e): void => setSearchText(e.target.value)}
+							disabled={isFilterDisabled}
+						/>
+					</section>
+					{attributeValues.length > 0 ? (
+						<section className="values">
+							{currentAttributeKeys.map((value: string) => (
+								<div key={value} className="value">
+									<Checkbox
+										onChange={(e): void => onChange(value, e.target.checked, false)}
+										checked={currentFilterState[value]}
+										disabled={isFilterDisabled}
+										rootClassName="check-box"
+									/>
+
+									<div
+										className={cx(
+											'checkbox-value-section',
+											isFilterDisabled ? 'filter-disabled' : '',
+										)}
+										onClick={(): void => {
+											if (isFilterDisabled) {
+												return;
+											}
+											onChange(value, currentFilterState[value], true);
+										}}
+									>
+										{filter.customRendererForValue ? (
+											filter.customRendererForValue(value)
+										) : (
+											<Typography.Text
+												className="value-string"
+												ellipsis={{ tooltip: { placement: 'right' } }}
+											>
+												{value}
+											</Typography.Text>
+										)}
+										<Button type="text" className="only-btn">
+											{isSomeFilterPresentForCurrentAttribute
+												? currentFilterState[value] && !isMultipleValuesTrueForTheKey
+													? 'All'
+													: 'Only'
+												: 'Only'}
+										</Button>
+										<Button type="text" className="toggle-btn">
+											Toggle
+										</Button>
+									</div>
+								</div>
+							))}
+						</section>
+					) : (
+						<section className="no-data">
+							<Typography.Text>No values found</Typography.Text>{' '}
+						</section>
+					)}
+					{visibleItemsCount < attributeValues?.length && (
+						<section className="show-more">
+							<Typography.Text
+								className="show-more-text"
+								onClick={(): void => setVisibleItemsCount((prev) => prev + 10)}
+							>
+								Show More...
+							</Typography.Text>
+						</section>
+					)}
+				</>
+			)}
+		</div>
+	);
+}

frontend/src/components/QuickFilters/FilterRenderers/Slider/Slider.tsx

@@ -0,0 +1,14 @@
+import './Slider.styles.scss';
+
+import { IQuickFiltersConfig } from 'components/QuickFilters/QuickFilters';
+
+interface ISliderProps {
+	filter: IQuickFiltersConfig;
+}
+
+// not needed for now build when required
+export default function Slider(props: ISliderProps): JSX.Element {
+	const { filter } = props;
+	console.log(filter);
+	return <div>Slider</div>;
+}

frontend/src/components/QuickFilters/QuickFilters.styles.scss

@@ -0,0 +1,93 @@
+.quick-filters {
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+	border-right: 1px solid var(--bg-slate-400);
+
+	.header {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: 10.5px;
+		border-bottom: 1px solid var(--bg-slate-400);
+
+		.left-actions {
+			display: flex;
+			align-items: center;
+			gap: 6px;
+
+			.text {
+				color: var(--bg-vanilla-400);
+				font-family: Inter;
+				font-size: 14px;
+				font-style: normal;
+				font-weight: 400;
+				line-height: 18px;
+				letter-spacing: -0.07px;
+			}
+
+			.sync-tag {
+				display: flex;
+				padding: 5px 9px;
+				flex-direction: column;
+				justify-content: center;
+				align-items: center;
+				gap: 10px;
+				border-radius: 2px;
+				border: 1px solid rgba(78, 116, 248, 0.2);
+				background: rgba(78, 116, 248, 0.1);
+				color: var(--bg-robin-500);
+				font-family: 'Geist Mono';
+				font-size: 14px;
+				font-style: normal;
+				font-weight: 400;
+				line-height: 18px; /* 128.571% */
+				text-transform: uppercase;
+			}
+		}
+
+		.right-actions {
+			display: flex;
+			align-items: center;
+			gap: 12px;
+
+			.divider-filter {
+				width: 1px;
+				height: 14px;
+				background: #161922;
+			}
+
+			.sync-icon {
+				background-color: var(--bg-ink-500);
+				border: 0;
+				box-shadow: none;
+			}
+		}
+	}
+}
+
+.lightMode {
+	.quick-filters {
+		background-color: var(--bg-vanilla-100);
+		border-right: 1px solid var(--bg-vanilla-300);
+
+		.header {
+			border-bottom: 1px solid var(--bg-vanilla-300);
+
+			.left-actions {
+				.text {
+					color: var(--bg-ink-400);
+				}
+
+				.sync-icon {
+					background-color: var(--bg-vanilla-100);
+				}
+			}
+			.right-actions {
+				.sync-icon {
+					background-color: var(--bg-vanilla-100);
+				}
+			}
+		}
+	}
+}

frontend/src/components/QuickFilters/QuickFilters.tsx

@@ -0,0 +1,124 @@
+import './QuickFilters.styles.scss';
+
+import {
+	FilterOutlined,
+	SyncOutlined,
+	VerticalAlignTopOutlined,
+} from '@ant-design/icons';
+import { Tooltip, Typography } from 'antd';
+import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
+import { cloneDeep } from 'lodash-es';
+import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
+import { Query } from 'types/api/queryBuilder/queryBuilderData';
+
+import Checkbox from './FilterRenderers/Checkbox/Checkbox';
+import Slider from './FilterRenderers/Slider/Slider';
+
+export enum FiltersType {
+	SLIDER = 'SLIDER',
+	CHECKBOX = 'CHECKBOX',
+}
+
+export enum MinMax {
+	MIN = 'MIN',
+	MAX = 'MAX',
+}
+
+export enum SpecficFilterOperations {
+	ALL = 'ALL',
+	ONLY = 'ONLY',
+}
+
+export interface IQuickFiltersConfig {
+	type: FiltersType;
+	title: string;
+	attributeKey: BaseAutocompleteData;
+	customRendererForValue?: (value: string) => JSX.Element;
+	defaultOpen: boolean;
+}
+
+interface IQuickFiltersProps {
+	config: IQuickFiltersConfig[];
+	handleFilterVisibilityChange: () => void;
+}
+
+export default function QuickFilters(props: IQuickFiltersProps): JSX.Element {
+	const { config, handleFilterVisibilityChange } = props;
+
+	const {
+		currentQuery,
+		lastUsedQuery,
+		redirectWithQueryBuilderData,
+	} = useQueryBuilder();
+
+	// clear all the filters for the query which is in sync with filters
+	const handleReset = (): void => {
+		const updatedQuery = cloneDeep(
+			currentQuery?.builder.queryData?.[lastUsedQuery || 0],
+		);
+
+		if (!updatedQuery) {
+			return;
+		}
+
+		if (updatedQuery?.filters?.items) {
+			updatedQuery.filters.items = [];
+		}
+
+		const preparedQuery: Query = {
+			...currentQuery,
+			builder: {
+				...currentQuery.builder,
+				queryData: currentQuery.builder.queryData.map((item, idx) => ({
+					...item,
+					filters: {
+						...item.filters,
+						items: idx === lastUsedQuery ? [] : [...item.filters.items],
+					},
+				})),
+			},
+		};
+		redirectWithQueryBuilderData(preparedQuery);
+	};
+
+	const lastQueryName =
+		currentQuery.builder.queryData?.[lastUsedQuery || 0]?.queryName;
+	return (
+		<div className="quick-filters">
+			<section className="header">
+				<section className="left-actions">
+					<FilterOutlined />
+					<Typography.Text className="text">Filters for</Typography.Text>
+					<Tooltip title={`Filter currently in sync with query ${lastQueryName}`}>
+						<Typography.Text className="sync-tag">{lastQueryName}</Typography.Text>
+					</Tooltip>
+				</section>
+				<section className="right-actions">
+					<Tooltip title="Reset All">
+						<SyncOutlined className="sync-icon" onClick={handleReset} />
+					</Tooltip>
+					<div className="divider-filter" />
+					<Tooltip title="Collapse Filters">
+						<VerticalAlignTopOutlined
+							rotate={270}
+							onClick={handleFilterVisibilityChange}
+						/>
+					</Tooltip>
+				</section>
+			</section>
+
+			<section className="filters">
+				{config.map((filter) => {
+					switch (filter.type) {
+						case FiltersType.CHECKBOX:
+							return <Checkbox filter={filter} />;
+						case FiltersType.SLIDER:
+							return <Slider filter={filter} />;
+						default:
+							return <Checkbox filter={filter} />;
+					}
+				})}
+			</section>
+		</div>
+	);
+}

frontend/src/components/TabsAndFilters/Tabs/Tabs.styles.scss

@@ -0,0 +1,5 @@
+.tab-title {
+	display: flex;
+	gap: 4px;
+	align-items: center;
+}

frontend/src/components/TabsAndFilters/Tabs/Tabs.tsx

@@ -0,0 +1,41 @@
+import './Tabs.styles.scss';
+
+import { Radio } from 'antd';
+import { RadioChangeEvent } from 'antd/lib';
+import { History, Table } from 'lucide-react';
+import { useState } from 'react';
+
+import { ALERT_TABS } from '../constants';
+
+export function Tabs(): JSX.Element {
+	const [selectedTab, setSelectedTab] = useState('overview');
+
+	const handleTabChange = (e: RadioChangeEvent): void => {
+		setSelectedTab(e.target.value);
+	};
+
+	return (
+		<Radio.Group className="tabs" onChange={handleTabChange} value={selectedTab}>
+			<Radio.Button
+				className={
+					selectedTab === ALERT_TABS.OVERVIEW ? 'selected_view tab' : 'tab'
+				}
+				value={ALERT_TABS.OVERVIEW}
+			>
+				<div className="tab-title">
+					<Table size={14} />
+					Overview
+				</div>
+			</Radio.Button>
+			<Radio.Button
+				className={selectedTab === ALERT_TABS.HISTORY ? 'selected_view tab' : 'tab'}
+				value={ALERT_TABS.HISTORY}
+			>
+				<div className="tab-title">
+					<History size={14} />
+					History
+				</div>
+			</Radio.Button>
+		</Radio.Group>
+	);
+}

frontend/src/components/TabsAndFilters/TabsAndFilters.styles.scss

@@ -0,0 +1,18 @@
+@mixin flex-center {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+}
+
+.tabs-and-filters {
+	@include flex-center;
+	margin-top: 1rem;
+	margin-bottom: 1rem;
+	.filters {
+		@include flex-center;
+		gap: 16px;
+		.reset-button {
+			@include flex-center;
+		}
+	}
+}

frontend/src/components/TabsAndFilters/TabsAndFilters.tsx

@@ -0,0 +1,16 @@
+import './TabsAndFilters.styles.scss';
+
+import { Filters } from 'components/AlertDetailsFilters/Filters';
+
+import { Tabs } from './Tabs/Tabs';
+
+function TabsAndFilters(): JSX.Element {
+	return (
+		<div className="tabs-and-filters">
+			<Tabs />
+			<Filters />
+		</div>
+	);
+}
+
+export default TabsAndFilters;

frontend/src/components/TabsAndFilters/constants.ts

@@ -0,0 +1,5 @@
+export const ALERT_TABS = {
+	OVERVIEW: 'OVERVIEW',
+	HISTORY: 'HISTORY',
+	ACTIVITY: 'ACTIVITY',
+} as const;

frontend/src/constants/env.ts

@@ -3,4 +3,5 @@ export const ENVIRONMENT = {
 		process?.env?.FRONTEND_API_ENDPOINT ||
 		process?.env?.GITPOD_WORKSPACE_URL?.replace('://', '://8080-') ||
 		'',
+	wsURL: process?.env?.WEBSOCKET_API_ENDPOINT || '',
 };