chore: add todo comments

* chore: add constants for AWS Integration UI event names

* chore: log event for account viewed and account connection attempt started

* chore: log telemetry event on successful account connection

* chore: log telemetry event when an account connection attempt times out

* chore: log telemetry event on redirecting to AWS for account connection

* chore: log telemetry event on opening account settings

* chore: log telemetry event on saving account settings

* chore: log telemetry event on removing account

* chore: log telemetry event on viewing details of a service

* chore: log telemetry event on opening service settings

* chore: log telemetry event on saving service settings

* chore: some cleanup

* chore: address PR comment

* chore: minor cleanup

.github/workflows/push.yaml

@@ -68,6 +68,8 @@ jobs:
           echo 'TUNNEL_URL="${{ secrets.TUNNEL_URL }}"' >> frontend/.env
           echo 'TUNNEL_DOMAIN="${{ secrets.TUNNEL_DOMAIN }}"' >> frontend/.env
           echo 'POSTHOG_KEY="${{ secrets.POSTHOG_KEY }}"' >> frontend/.env
+          echo 'CUSTOMERIO_ID="${{ secrets.CUSTOMERIO_ID }}"' >> frontend/.env
+          echo 'CUSTOMERIO_SITE_ID="${{ secrets.CUSTOMERIO_SITE_ID }}"' >> frontend/.env
       - name: Setup golang
         uses: actions/setup-go@v4
         with:

README.md

@@ -219,12 +219,18 @@ Not sure how to get started? Just ping us on `#contributing` in our [slack commu
 - [Nityananda Gohain](https://github.com/nityanandagohain)
 - [Srikanth Chekuri](https://github.com/srikanthccv)
 - [Vishal Sharma](https://github.com/makeavish)
+- [Shivanshu Raj Shrivastava](https://github.com/shivanshuraj1333)
+- [Ekansh Gupta](https://github.com/eKuG)
+- [Aniket Agarwal](https://github.com/aniketio-ctrl)
 
 #### Frontend
 
 - [Yunus M](https://github.com/YounixM)
 - [Vikrant Gupta](https://github.com/vikrantgupta25)
 - [Sagar Rajput](https://github.com/SagarRajput-7)
+- [Shaheer Kochai](https://github.com/ahmadshaheer)
+- [Amlan Kumar Nandy](https://github.com/amlannandy)
+- [Sahil Khan](https://github.com/sawhil)
 
 #### DevOps
 

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

@@ -181,7 +181,7 @@ services:
       - query-service
   query-service:
     !!merge <<: *db-depend
-    image: signoz/query-service:0.70.0
+    image: signoz/query-service:0.74.0
     command:
       - --config=/root/config/prometheus.yml
       - --use-logs-new-schema=true
@@ -214,7 +214,7 @@ services:
       retries: 3
   frontend:
     !!merge <<: *common
-    image: signoz/frontend:0.70.0
+    image: signoz/frontend:0.74.0
     depends_on:
       - alertmanager
       - query-service
@@ -224,7 +224,7 @@ services:
       - ../common/signoz/nginx-config.conf:/etc/nginx/conf.d/default.conf
   otel-collector:
     !!merge <<: *db-depend
-    image: signoz/signoz-otel-collector:0.111.24
+    image: signoz/signoz-otel-collector:0.111.29
     command:
       - --config=/etc/otel-collector-config.yaml
       - --manager-config=/etc/manager-config.yaml
@@ -248,7 +248,7 @@ services:
       - query-service
   schema-migrator:
     !!merge <<: *common
-    image: signoz/signoz-schema-migrator:0.111.24
+    image: signoz/signoz-schema-migrator:0.111.29
     deploy:
       restart_policy:
         condition: on-failure
@@ -262,7 +262,6 @@ services:
 networks:
   signoz-net:
     name: signoz-net
-
 volumes:
   alertmanager:
     name: signoz-alertmanager

deploy/docker-swarm/docker-compose.yaml

@@ -117,7 +117,7 @@ services:
       - query-service
   query-service:
     !!merge <<: *db-depend
-    image: signoz/query-service:0.70.0
+    image: signoz/query-service:0.74.0
     command:
       - --config=/root/config/prometheus.yml
       - --use-logs-new-schema=true
@@ -150,7 +150,7 @@ services:
       retries: 3
   frontend:
     !!merge <<: *common
-    image: signoz/frontend:0.70.0
+    image: signoz/frontend:0.74.0
     depends_on:
       - alertmanager
       - query-service
@@ -160,7 +160,7 @@ services:
       - ../common/signoz/nginx-config.conf:/etc/nginx/conf.d/default.conf
   otel-collector:
     !!merge <<: *db-depend
-    image: signoz/signoz-otel-collector:0.111.24
+    image: signoz/signoz-otel-collector:0.111.29
     command:
       - --config=/etc/otel-collector-config.yaml
       - --manager-config=/etc/manager-config.yaml
@@ -184,7 +184,7 @@ services:
       - query-service
   schema-migrator:
     !!merge <<: *common
-    image: signoz/signoz-schema-migrator:0.111.24
+    image: signoz/signoz-schema-migrator:0.111.29
     deploy:
       restart_policy:
         condition: on-failure
@@ -198,7 +198,6 @@ services:
 networks:
   signoz-net:
     name: signoz-net
-
 volumes:
   alertmanager:
     name: signoz-alertmanager

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

@@ -66,7 +66,7 @@ exporters:
       enabled: true
   clickhousemetricswrite/prometheus:
     endpoint: tcp://clickhouse:9000/signoz_metrics
-  clickhousemetricswritev2:
+  signozclickhousemetrics:
     dsn: tcp://clickhouse:9000/signoz_metrics
   clickhouselogsexporter:
     dsn: tcp://clickhouse:9000/signoz_logs
@@ -90,11 +90,11 @@ service:
     metrics:
       receivers: [otlp]
       processors: [batch]
-      exporters: [clickhousemetricswrite, clickhousemetricswritev2]
+      exporters: [clickhousemetricswrite, signozclickhousemetrics]
     metrics/prometheus:
       receivers: [prometheus]
       processors: [batch]
-      exporters: [clickhousemetricswrite/prometheus, clickhousemetricswritev2]
+      exporters: [clickhousemetricswrite/prometheus, signozclickhousemetrics]
     logs:
       receivers: [otlp]
       processors: [batch]

deploy/docker/docker-compose.ha.yaml

@@ -188,7 +188,7 @@ services:
         condition: service_healthy
   query-service:
     !!merge <<: *db-depend
-    image: signoz/query-service:${DOCKER_TAG:-0.70.0}
+    image: signoz/query-service:${DOCKER_TAG:-0.74.0}
     container_name: signoz-query-service
     command:
       - --config=/root/config/prometheus.yml
@@ -222,7 +222,7 @@ services:
       retries: 3
   frontend:
     !!merge <<: *common
-    image: signoz/frontend:${DOCKER_TAG:-0.70.0}
+    image: signoz/frontend:${DOCKER_TAG:-0.74.0}
     container_name: signoz-frontend
     depends_on:
       - alertmanager
@@ -234,7 +234,7 @@ services:
   # TODO: support otel-collector multiple replicas. Nginx/Traefik for loadbalancing?
   otel-collector:
     !!merge <<: *db-depend
-    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-0.111.24}
+    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-0.111.29}
     container_name: signoz-otel-collector
     command:
       - --config=/etc/otel-collector-config.yaml
@@ -260,7 +260,7 @@ services:
         condition: service_healthy
   schema-migrator-sync:
     !!merge <<: *common
-    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-0.111.24}
+    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-0.111.29}
     container_name: schema-migrator-sync
     command:
       - sync
@@ -271,7 +271,7 @@ services:
         condition: service_healthy
   schema-migrator-async:
     !!merge <<: *db-depend
-    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-0.111.24}
+    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-0.111.29}
     container_name: schema-migrator-async
     command:
       - async
@@ -280,7 +280,6 @@ services:
 networks:
   signoz-net:
     name: signoz-net
-
 volumes:
   alertmanager:
     name: signoz-alertmanager

deploy/docker/docker-compose.testing.yaml

@@ -121,7 +121,7 @@ services:
         condition: service_healthy
   query-service:
     !!merge <<: *db-depend
-    image: signoz/query-service:${DOCKER_TAG:-0.70.0}
+    image: signoz/query-service:${DOCKER_TAG:-0.74.0}
     container_name: signoz-query-service
     command:
       - --config=/root/config/prometheus.yml
@@ -157,7 +157,7 @@ services:
       retries: 3
   frontend:
     !!merge <<: *common
-    image: signoz/frontend:${DOCKER_TAG:-0.70.0}
+    image: signoz/frontend:${DOCKER_TAG:-0.74.0}
     container_name: signoz-frontend
     depends_on:
       - alertmanager
@@ -168,7 +168,7 @@ services:
       - ../common/signoz/nginx-config.conf:/etc/nginx/conf.d/default.conf
   otel-collector:
     !!merge <<: *db-depend
-    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-0.111.24}
+    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-0.111.29}
     container_name: signoz-otel-collector
     command:
       - --config=/etc/otel-collector-config.yaml
@@ -190,7 +190,7 @@ services:
         condition: service_healthy
   schema-migrator-sync:
     !!merge <<: *common
-    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-0.111.24}
+    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-0.111.29}
     container_name: schema-migrator-sync
     command:
       - sync
@@ -201,7 +201,7 @@ services:
         condition: service_healthy
   schema-migrator-async:
     !!merge <<: *db-depend
-    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-0.111.24}
+    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-0.111.29}
     container_name: schema-migrator-async
     command:
       - async
@@ -210,7 +210,6 @@ services:
 networks:
   signoz-net:
     name: signoz-net
-
 volumes:
   alertmanager:
     name: signoz-alertmanager

deploy/docker/docker-compose.yaml

@@ -121,7 +121,7 @@ services:
         condition: service_healthy
   query-service:
     !!merge <<: *db-depend
-    image: signoz/query-service:${DOCKER_TAG:-0.70.0}
+    image: signoz/query-service:${DOCKER_TAG:-0.74.0}
     container_name: signoz-query-service
     command:
       - --config=/root/config/prometheus.yml
@@ -155,7 +155,7 @@ services:
       retries: 3
   frontend:
     !!merge <<: *common
-    image: signoz/frontend:${DOCKER_TAG:-0.70.0}
+    image: signoz/frontend:${DOCKER_TAG:-0.74.0}
     container_name: signoz-frontend
     depends_on:
       - alertmanager
@@ -166,7 +166,7 @@ services:
       - ../common/signoz/nginx-config.conf:/etc/nginx/conf.d/default.conf
   otel-collector:
     !!merge <<: *db-depend
-    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-0.111.24}
+    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-0.111.29}
     container_name: signoz-otel-collector
     command:
       - --config=/etc/otel-collector-config.yaml
@@ -188,7 +188,7 @@ services:
         condition: service_healthy
   schema-migrator-sync:
     !!merge <<: *common
-    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-0.111.24}
+    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-0.111.29}
     container_name: schema-migrator-sync
     command:
       - sync
@@ -199,7 +199,7 @@ services:
         condition: service_healthy
   schema-migrator-async:
     !!merge <<: *db-depend
-    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-0.111.24}
+    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-0.111.29}
     container_name: schema-migrator-async
     command:
       - async
@@ -208,7 +208,6 @@ services:
 networks:
   signoz-net:
     name: signoz-net
-
 volumes:
   alertmanager:
     name: signoz-alertmanager

deploy/docker/otel-collector-config.yaml

@@ -66,7 +66,7 @@ exporters:
       enabled: true
   clickhousemetricswrite/prometheus:
     endpoint: tcp://clickhouse:9000/signoz_metrics
-  clickhousemetricswritev2:
+  signozclickhousemetrics:
     dsn: tcp://clickhouse:9000/signoz_metrics
   clickhouselogsexporter:
     dsn: tcp://clickhouse:9000/signoz_logs
@@ -90,11 +90,11 @@ service:
     metrics:
       receivers: [otlp]
       processors: [batch]
-      exporters: [clickhousemetricswrite, clickhousemetricswritev2]
+      exporters: [clickhousemetricswrite, signozclickhousemetrics]
     metrics/prometheus:
       receivers: [prometheus]
       processors: [batch]
-      exporters: [clickhousemetricswrite/prometheus, clickhousemetricswritev2]
+      exporters: [clickhousemetricswrite/prometheus, signozclickhousemetrics]
     logs:
       receivers: [otlp]
       processors: [batch]

ee/http/middleware/pat.go

@@ -0,0 +1,36 @@
+package middleware
+
+import (
+	"net/http"
+
+	"go.signoz.io/signoz/pkg/types/authtypes"
+)
+
+type Pat struct {
+	uuid    *authtypes.UUID
+	headers []string
+}
+
+func NewPat(headers []string) *Pat {
+	return &Pat{uuid: authtypes.NewUUID(), headers: headers}
+}
+
+func (p *Pat) Wrap(next http.Handler) http.Handler {
+	return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
+		var values []string
+		for _, header := range p.headers {
+			values = append(values, r.Header.Get(header))
+		}
+
+		ctx, err := p.uuid.ContextFromRequest(r.Context(), values...)
+		if err != nil {
+			next.ServeHTTP(w, r)
+			return
+		}
+
+		r = r.WithContext(ctx)
+
+		next.ServeHTTP(w, r)
+	})
+
+}

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

@@ -20,6 +20,7 @@ import (
 	basemodel "go.signoz.io/signoz/pkg/query-service/model"
 	rules "go.signoz.io/signoz/pkg/query-service/rules"
 	"go.signoz.io/signoz/pkg/query-service/version"
+	"go.signoz.io/signoz/pkg/types/authtypes"
 )
 
 type APIHandlerOptions struct {
@@ -36,10 +37,12 @@ type APIHandlerOptions struct {
 	LogsParsingPipelineController *logparsingpipeline.LogParsingPipelineController
 	Cache                         cache.Cache
 	Gateway                       *httputil.ReverseProxy
+	GatewayUrl                    string
 	// Querier Influx Interval
 	FluxInterval      time.Duration
 	UseLogsNewSchema  bool
 	UseTraceNewSchema bool
+	JWT               *authtypes.JWT
 }
 
 type APIHandler struct {
@@ -181,6 +184,17 @@ func (ah *APIHandler) RegisterRoutes(router *mux.Router, am *baseapp.AuthMiddlew
 
 }
 
+func (ah *APIHandler) RegisterCloudIntegrationsRoutes(router *mux.Router, am *baseapp.AuthMiddleware) {
+
+	ah.APIHandler.RegisterCloudIntegrationsRoutes(router, am)
+
+	router.HandleFunc(
+		"/api/v1/cloud-integrations/{cloudProvider}/accounts/generate-connection-params",
+		am.EditAccess(ah.CloudIntegrationsGenerateConnectionParams),
+	).Methods(http.MethodGet)
+
+}
+
 func (ah *APIHandler) getVersion(w http.ResponseWriter, r *http.Request) {
 	version := version.GetVersion()
 	versionResponse := basemodel.GetVersionResponse{

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

@@ -50,7 +50,7 @@ func (ah *APIHandler) loginUser(w http.ResponseWriter, r *http.Request) {
 	}
 
 	// if all looks good, call auth
-	resp, err := baseauth.Login(ctx, &req)
+	resp, err := baseauth.Login(ctx, &req, ah.opts.JWT)
 	if ah.HandleError(w, err, http.StatusUnauthorized) {
 		return
 	}
@@ -253,7 +253,7 @@ func (ah *APIHandler) receiveGoogleAuth(w http.ResponseWriter, r *http.Request)
 		return
 	}
 
-	nextPage, err := ah.AppDao().PrepareSsoRedirect(ctx, redirectUri, identity.Email)
+	nextPage, err := ah.AppDao().PrepareSsoRedirect(ctx, redirectUri, identity.Email, ah.opts.JWT)
 	if err != nil {
 		zap.L().Error("[receiveGoogleAuth] failed to generate redirect URI after successful login ", zap.String("domain", domain.String()), zap.Error(err))
 		handleSsoError(w, r, redirectUri)
@@ -331,7 +331,7 @@ func (ah *APIHandler) receiveSAML(w http.ResponseWriter, r *http.Request) {
 		return
 	}
 
-	nextPage, err := ah.AppDao().PrepareSsoRedirect(ctx, redirectUri, email)
+	nextPage, err := ah.AppDao().PrepareSsoRedirect(ctx, redirectUri, email, ah.opts.JWT)
 	if err != nil {
 		zap.L().Error("[receiveSAML] failed to generate redirect URI after successful login ", zap.String("domain", domain.String()), zap.Error(err))
 		handleSsoError(w, r, redirectUri)

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

@@ -0,0 +1,425 @@
+package api
+
+import (
+	"bytes"
+	"context"
+	"encoding/json"
+	"fmt"
+	"io"
+	"net/http"
+	"strings"
+	"time"
+
+	"github.com/google/uuid"
+	"github.com/gorilla/mux"
+	"go.signoz.io/signoz/ee/query-service/constants"
+	"go.signoz.io/signoz/ee/query-service/model"
+	"go.signoz.io/signoz/pkg/query-service/auth"
+	baseconstants "go.signoz.io/signoz/pkg/query-service/constants"
+	"go.signoz.io/signoz/pkg/query-service/dao"
+	basemodel "go.signoz.io/signoz/pkg/query-service/model"
+	"go.uber.org/zap"
+)
+
+type CloudIntegrationConnectionParamsResponse struct {
+	IngestionUrl string `json:"ingestion_url,omitempty"`
+	IngestionKey string `json:"ingestion_key,omitempty"`
+	SigNozAPIUrl string `json:"signoz_api_url,omitempty"`
+	SigNozAPIKey string `json:"signoz_api_key,omitempty"`
+}
+
+func (ah *APIHandler) CloudIntegrationsGenerateConnectionParams(w http.ResponseWriter, r *http.Request) {
+	cloudProvider := mux.Vars(r)["cloudProvider"]
+	if cloudProvider != "aws" {
+		RespondError(w, basemodel.BadRequest(fmt.Errorf(
+			"cloud provider not supported: %s", cloudProvider,
+		)), nil)
+		return
+	}
+
+	currentUser, err := auth.GetUserFromReqContext(r.Context())
+	if err != nil {
+		RespondError(w, basemodel.UnauthorizedError(fmt.Errorf(
+			"couldn't deduce current user: %w", err,
+		)), nil)
+		return
+	}
+
+	apiKey, apiErr := ah.getOrCreateCloudIntegrationPAT(r.Context(), currentUser.OrgId, cloudProvider)
+	if apiErr != nil {
+		RespondError(w, basemodel.WrapApiError(
+			apiErr, "couldn't provision PAT for cloud integration:",
+		), nil)
+		return
+	}
+
+	result := CloudIntegrationConnectionParamsResponse{
+		SigNozAPIKey: apiKey,
+	}
+
+	license, apiErr := ah.LM().GetRepo().GetActiveLicense(r.Context())
+	if apiErr != nil {
+		RespondError(w, basemodel.WrapApiError(
+			apiErr, "couldn't look for active license",
+		), nil)
+		return
+	}
+
+	if license == nil {
+		// Return the API Key (PAT) even if the rest of the params can not be deduced.
+		// Params not returned from here will be requested from the user via form inputs.
+		// This enables gracefully degraded but working experience even for non-cloud deployments.
+		zap.L().Info("ingestion params and signoz api url can not be deduced since no license was found")
+		ah.Respond(w, result)
+		return
+	}
+
+	ingestionUrl, signozApiUrl, apiErr := getIngestionUrlAndSigNozAPIUrl(r.Context(), license.Key)
+	if apiErr != nil {
+		RespondError(w, basemodel.WrapApiError(
+			apiErr, "couldn't deduce ingestion url and signoz api url",
+		), nil)
+		return
+	}
+
+	result.IngestionUrl = ingestionUrl
+	result.SigNozAPIUrl = signozApiUrl
+
+	gatewayUrl := ah.opts.GatewayUrl
+	if len(gatewayUrl) > 0 {
+
+		ingestionKey, apiErr := getOrCreateCloudProviderIngestionKey(
+			r.Context(), gatewayUrl, license.Key, cloudProvider,
+		)
+		if apiErr != nil {
+			RespondError(w, basemodel.WrapApiError(
+				apiErr, "couldn't get or create ingestion key",
+			), nil)
+			return
+		}
+
+		result.IngestionKey = ingestionKey
+
+	} else {
+		zap.L().Info("ingestion key can't be deduced since no gateway url has been configured")
+	}
+
+	ah.Respond(w, result)
+}
+
+func (ah *APIHandler) getOrCreateCloudIntegrationPAT(ctx context.Context, orgId string, cloudProvider string) (
+	string, *basemodel.ApiError,
+) {
+	integrationPATName := fmt.Sprintf("%s integration", cloudProvider)
+
+	integrationUser, apiErr := ah.getOrCreateCloudIntegrationUser(ctx, orgId, cloudProvider)
+	if apiErr != nil {
+		return "", apiErr
+	}
+
+	allPats, err := ah.AppDao().ListPATs(ctx)
+	if err != nil {
+		return "", basemodel.InternalError(fmt.Errorf(
+			"couldn't list PATs: %w", err.Error(),
+		))
+	}
+	for _, p := range allPats {
+		if p.UserID == integrationUser.Id && p.Name == integrationPATName {
+			return p.Token, nil
+		}
+	}
+
+	zap.L().Info(
+		"no PAT found for cloud integration, creating a new one",
+		zap.String("cloudProvider", cloudProvider),
+	)
+
+	newPAT := model.PAT{
+		Token:     generatePATToken(),
+		UserID:    integrationUser.Id,
+		Name:      integrationPATName,
+		Role:      baseconstants.ViewerGroup,
+		ExpiresAt: 0,
+		CreatedAt: time.Now().Unix(),
+		UpdatedAt: time.Now().Unix(),
+	}
+	integrationPAT, err := ah.AppDao().CreatePAT(ctx, newPAT)
+	if err != nil {
+		return "", basemodel.InternalError(fmt.Errorf(
+			"couldn't create cloud integration PAT: %w", err.Error(),
+		))
+	}
+	return integrationPAT.Token, nil
+}
+
+func (ah *APIHandler) getOrCreateCloudIntegrationUser(
+	ctx context.Context, orgId string, cloudProvider string,
+) (*basemodel.User, *basemodel.ApiError) {
+	cloudIntegrationUserId := fmt.Sprintf("%s-integration", cloudProvider)
+
+	integrationUserResult, apiErr := ah.AppDao().GetUser(ctx, cloudIntegrationUserId)
+	if apiErr != nil {
+		return nil, basemodel.WrapApiError(apiErr, "couldn't look for integration user")
+	}
+
+	if integrationUserResult != nil {
+		return &integrationUserResult.User, nil
+	}
+
+	zap.L().Info(
+		"cloud integration user not found. Attempting to create the user",
+		zap.String("cloudProvider", cloudProvider),
+	)
+
+	newUser := &basemodel.User{
+		Id:        cloudIntegrationUserId,
+		Name:      fmt.Sprintf("%s integration", cloudProvider),
+		Email:     fmt.Sprintf("%s@signoz.io", cloudIntegrationUserId),
+		CreatedAt: time.Now().Unix(),
+		OrgId:     orgId,
+	}
+
+	viewerGroup, apiErr := dao.DB().GetGroupByName(ctx, baseconstants.ViewerGroup)
+	if apiErr != nil {
+		return nil, basemodel.WrapApiError(apiErr, "couldn't get viewer group for creating integration user")
+	}
+	newUser.GroupId = viewerGroup.ID
+
+	passwordHash, err := auth.PasswordHash(uuid.NewString())
+	if err != nil {
+		return nil, basemodel.InternalError(fmt.Errorf(
+			"couldn't hash random password for cloud integration user: %w", err,
+		))
+	}
+	newUser.Password = passwordHash
+
+	integrationUser, apiErr := ah.AppDao().CreateUser(ctx, newUser, false)
+	if apiErr != nil {
+		return nil, basemodel.WrapApiError(apiErr, "couldn't create cloud integration user")
+	}
+
+	return integrationUser, nil
+}
+
+func getIngestionUrlAndSigNozAPIUrl(ctx context.Context, licenseKey string) (
+	string, string, *basemodel.ApiError,
+) {
+	url := fmt.Sprintf(
+		"%s%s",
+		strings.TrimSuffix(constants.ZeusURL, "/"),
+		"/v2/deployments/me",
+	)
+
+	type deploymentResponse struct {
+		Status string `json:"status"`
+		Error  string `json:"error"`
+		Data   struct {
+			Name string `json:"name"`
+
+			ClusterInfo struct {
+				Region struct {
+					DNS string `json:"dns"`
+				} `json:"region"`
+			} `json:"cluster"`
+		} `json:"data"`
+	}
+
+	resp, apiErr := requestAndParseResponse[deploymentResponse](
+		ctx, url, map[string]string{"X-Signoz-Cloud-Api-Key": licenseKey}, nil,
+	)
+
+	if apiErr != nil {
+		return "", "", basemodel.WrapApiError(
+			apiErr, "couldn't query for deployment info",
+		)
+	}
+
+	if resp.Status != "success" {
+		return "", "", basemodel.InternalError(fmt.Errorf(
+			"couldn't query for deployment info: status: %s, error: %s",
+			resp.Status, resp.Error,
+		))
+	}
+
+	regionDns := resp.Data.ClusterInfo.Region.DNS
+	deploymentName := resp.Data.Name
+
+	if len(regionDns) < 1 || len(deploymentName) < 1 {
+		// Fail early if actual response structure and expectation here ever diverge
+		return "", "", basemodel.InternalError(fmt.Errorf(
+			"deployment info response not in expected shape. couldn't determine region dns and deployment name",
+		))
+	}
+
+	ingestionUrl := fmt.Sprintf("https://ingest.%s", regionDns)
+
+	signozApiUrl := fmt.Sprintf("https://%s.%s", deploymentName, regionDns)
+
+	return ingestionUrl, signozApiUrl, nil
+}
+
+type ingestionKey struct {
+	Name  string `json:"name"`
+	Value string `json:"value"`
+	// other attributes from gateway response not included here since they are not being used.
+}
+
+type ingestionKeysSearchResponse struct {
+	Status string         `json:"status"`
+	Data   []ingestionKey `json:"data"`
+	Error  string         `json:"error"`
+}
+
+type createIngestionKeyResponse struct {
+	Status string       `json:"status"`
+	Data   ingestionKey `json:"data"`
+	Error  string       `json:"error"`
+}
+
+func getOrCreateCloudProviderIngestionKey(
+	ctx context.Context, gatewayUrl string, licenseKey string, cloudProvider string,
+) (string, *basemodel.ApiError) {
+	cloudProviderKeyName := fmt.Sprintf("%s-integration", cloudProvider)
+
+	// see if the key already exists
+	searchResult, apiErr := requestGateway[ingestionKeysSearchResponse](
+		ctx,
+		gatewayUrl,
+		licenseKey,
+		fmt.Sprintf("/v1/workspaces/me/keys/search?name=%s", cloudProviderKeyName),
+		nil,
+	)
+
+	if apiErr != nil {
+		return "", basemodel.WrapApiError(
+			apiErr, "couldn't search for cloudprovider ingestion key",
+		)
+	}
+
+	if searchResult.Status != "success" {
+		return "", basemodel.InternalError(fmt.Errorf(
+			"couldn't search for cloudprovider ingestion key: status: %s, error: %s",
+			searchResult.Status, searchResult.Error,
+		))
+	}
+
+	for _, k := range searchResult.Data {
+		if k.Name == cloudProviderKeyName {
+			if len(k.Value) < 1 {
+				// Fail early if actual response structure and expectation here ever diverge
+				return "", basemodel.InternalError(fmt.Errorf(
+					"ingestion keys search response not as expected",
+				))
+			}
+
+			return k.Value, nil
+		}
+	}
+
+	zap.L().Info(
+		"no existing ingestion key found for cloud integration, creating a new one",
+		zap.String("cloudProvider", cloudProvider),
+	)
+	createKeyResult, apiErr := requestGateway[createIngestionKeyResponse](
+		ctx, gatewayUrl, licenseKey, "/v1/workspaces/me/keys",
+		map[string]any{
+			"name": cloudProviderKeyName,
+			"tags": []string{"integration", cloudProvider},
+		},
+	)
+	if apiErr != nil {
+		return "", basemodel.WrapApiError(
+			apiErr, "couldn't create cloudprovider ingestion key",
+		)
+	}
+
+	if createKeyResult.Status != "success" {
+		return "", basemodel.InternalError(fmt.Errorf(
+			"couldn't create cloudprovider ingestion key: status: %s, error: %s",
+			createKeyResult.Status, createKeyResult.Error,
+		))
+	}
+
+	ingestionKey := createKeyResult.Data.Value
+	if len(ingestionKey) < 1 {
+		// Fail early if actual response structure and expectation here ever diverge
+		return "", basemodel.InternalError(fmt.Errorf(
+			"ingestion key creation response not as expected",
+		))
+	}
+
+	return ingestionKey, nil
+}
+
+func requestGateway[ResponseType any](
+	ctx context.Context, gatewayUrl string, licenseKey string, path string, payload any,
+) (*ResponseType, *basemodel.ApiError) {
+
+	baseUrl := strings.TrimSuffix(gatewayUrl, "/")
+	reqUrl := fmt.Sprintf("%s%s", baseUrl, path)
+
+	headers := map[string]string{
+		"X-Signoz-Cloud-Api-Key": licenseKey,
+		"X-Consumer-Username":    "lid:00000000-0000-0000-0000-000000000000",
+		"X-Consumer-Groups":      "ns:default",
+	}
+
+	return requestAndParseResponse[ResponseType](ctx, reqUrl, headers, payload)
+}
+
+func requestAndParseResponse[ResponseType any](
+	ctx context.Context, url string, headers map[string]string, payload any,
+) (*ResponseType, *basemodel.ApiError) {
+
+	reqMethod := http.MethodGet
+	var reqBody io.Reader
+	if payload != nil {
+		reqMethod = http.MethodPost
+
+		bodyJson, err := json.Marshal(payload)
+		if err != nil {
+			return nil, basemodel.InternalError(fmt.Errorf(
+				"couldn't serialize request payload to JSON: %w", err,
+			))
+		}
+		reqBody = bytes.NewBuffer([]byte(bodyJson))
+	}
+
+	req, err := http.NewRequestWithContext(ctx, reqMethod, url, reqBody)
+	if err != nil {
+		return nil, basemodel.InternalError(fmt.Errorf(
+			"couldn't prepare request: %w", err,
+		))
+	}
+
+	for k, v := range headers {
+		req.Header.Set(k, v)
+	}
+
+	client := &http.Client{
+		Timeout: 10 * time.Second,
+	}
+
+	response, err := client.Do(req)
+	if err != nil {
+		return nil, basemodel.InternalError(fmt.Errorf("couldn't make request: %w", err))
+	}
+
+	defer response.Body.Close()
+
+	respBody, err := io.ReadAll(response.Body)
+	if err != nil {
+		return nil, basemodel.InternalError(fmt.Errorf("couldn't read response: %w", err))
+	}
+
+	var resp ResponseType
+
+	err = json.Unmarshal(respBody, &resp)
+	if err != nil {
+		return nil, basemodel.InternalError(fmt.Errorf(
+			"couldn't unmarshal gateway response into %T", resp,
+		))
+	}
+
+	return &resp, nil
+}

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

@@ -34,7 +34,7 @@ func (ah *APIHandler) createPAT(w http.ResponseWriter, r *http.Request) {
 		RespondError(w, model.BadRequest(err), nil)
 		return
 	}
-	user, err := auth.GetUserFromRequest(r)
+	user, err := auth.GetUserFromReqContext(r.Context())
 	if err != nil {
 		RespondError(w, &model.ApiError{
 			Typ: model.ErrorUnauthorized,
@@ -97,7 +97,7 @@ func (ah *APIHandler) updatePAT(w http.ResponseWriter, r *http.Request) {
 		return
 	}
 
-	user, err := auth.GetUserFromRequest(r)
+	user, err := auth.GetUserFromReqContext(r.Context())
 	if err != nil {
 		RespondError(w, &model.ApiError{
 			Typ: model.ErrorUnauthorized,
@@ -127,7 +127,7 @@ func (ah *APIHandler) updatePAT(w http.ResponseWriter, r *http.Request) {
 
 func (ah *APIHandler) getPATs(w http.ResponseWriter, r *http.Request) {
 	ctx := context.Background()
-	user, err := auth.GetUserFromRequest(r)
+	user, err := auth.GetUserFromReqContext(r.Context())
 	if err != nil {
 		RespondError(w, &model.ApiError{
 			Typ: model.ErrorUnauthorized,
@@ -147,7 +147,7 @@ func (ah *APIHandler) getPATs(w http.ResponseWriter, r *http.Request) {
 func (ah *APIHandler) revokePAT(w http.ResponseWriter, r *http.Request) {
 	ctx := context.Background()
 	id := mux.Vars(r)["id"]
-	user, err := auth.GetUserFromRequest(r)
+	user, err := auth.GetUserFromReqContext(r.Context())
 	if err != nil {
 		RespondError(w, &model.ApiError{
 			Typ: model.ErrorUnauthorized,

ee/query-service/app/server.go

@@ -1,26 +1,20 @@
 package app
 
 import (
-	"bufio"
-	"bytes"
 	"context"
-	"encoding/json"
 	"errors"
 	"fmt"
-	"io"
 	"net"
 	"net/http"
 	_ "net/http/pprof" // http profiler
-	"os"
-	"regexp"
 	"time"
 
 	"github.com/gorilla/handlers"
-	"github.com/gorilla/mux"
 	"github.com/jmoiron/sqlx"
 
 	"github.com/rs/cors"
 	"github.com/soheilhy/cmux"
+	eemiddleware "go.signoz.io/signoz/ee/http/middleware"
 	"go.signoz.io/signoz/ee/query-service/app/api"
 	"go.signoz.io/signoz/ee/query-service/app/db"
 	"go.signoz.io/signoz/ee/query-service/auth"
@@ -30,9 +24,8 @@ import (
 	"go.signoz.io/signoz/ee/query-service/interfaces"
 	"go.signoz.io/signoz/ee/query-service/rules"
 	"go.signoz.io/signoz/pkg/http/middleware"
-	baseauth "go.signoz.io/signoz/pkg/query-service/auth"
-	v3 "go.signoz.io/signoz/pkg/query-service/model/v3"
 	"go.signoz.io/signoz/pkg/signoz"
+	"go.signoz.io/signoz/pkg/types/authtypes"
 	"go.signoz.io/signoz/pkg/web"
 
 	licensepkg "go.signoz.io/signoz/ee/query-service/license"
@@ -81,6 +74,7 @@ type ServerOptions struct {
 	GatewayUrl                 string
 	UseLogsNewSchema           bool
 	UseTraceNewSchema          bool
+	Jwt                        *authtypes.JWT
 }
 
 // Server runs HTTP api service
@@ -111,7 +105,7 @@ func (s Server) HealthCheckStatus() chan healthcheck.Status {
 
 // NewServer creates and initializes Server
 func NewServer(serverOptions *ServerOptions) (*Server, error) {
-	modelDao, err := dao.InitDao(serverOptions.SigNoz.SQLStore.SQLxDB())
+	modelDao, err := dao.InitDao(serverOptions.SigNoz.SQLStore)
 	if err != nil {
 		return nil, err
 	}
@@ -134,7 +128,7 @@ func NewServer(serverOptions *ServerOptions) (*Server, error) {
 	}
 
 	// initiate license manager
-	lm, err := licensepkg.StartManager(serverOptions.SigNoz.SQLStore.SQLxDB())
+	lm, err := licensepkg.StartManager(serverOptions.SigNoz.SQLStore.SQLxDB(), serverOptions.SigNoz.SQLStore.BunDB())
 	if err != nil {
 		return nil, err
 	}
@@ -149,25 +143,20 @@ func NewServer(serverOptions *ServerOptions) (*Server, error) {
 	}
 
 	var reader interfaces.DataConnector
-	storage := os.Getenv("STORAGE")
-	if storage == "clickhouse" {
-		zap.L().Info("Using ClickHouse as datastore ...")
-		qb := db.NewDataConnector(
-			serverOptions.SigNoz.SQLStore.SQLxDB(),
-			serverOptions.SigNoz.TelemetryStore.ClickHouseDB(),
-			serverOptions.PromConfigPath,
-			lm,
-			serverOptions.Cluster,
-			serverOptions.UseLogsNewSchema,
-			serverOptions.UseTraceNewSchema,
-			fluxIntervalForTraceDetail,
-			serverOptions.SigNoz.Cache,
-		)
-		go qb.Start(readerReady)
-		reader = qb
-	} else {
-		return nil, fmt.Errorf("storage type: %s is not supported in query service", storage)
-	}
+	qb := db.NewDataConnector(
+		serverOptions.SigNoz.SQLStore.SQLxDB(),
+		serverOptions.SigNoz.TelemetryStore.ClickHouseDB(),
+		serverOptions.PromConfigPath,
+		lm,
+		serverOptions.Cluster,
+		serverOptions.UseLogsNewSchema,
+		serverOptions.UseTraceNewSchema,
+		fluxIntervalForTraceDetail,
+		serverOptions.SigNoz.Cache,
+	)
+	go qb.Start(readerReady)
+	reader = qb
+
 	skipConfig := &basemodel.SkipConfig{}
 	if serverOptions.SkipTopLvlOpsPath != "" {
 		// read skip config
@@ -208,14 +197,14 @@ func NewServer(serverOptions *ServerOptions) (*Server, error) {
 		return nil, err
 	}
 
-	integrationsController, err := integrations.NewController(serverOptions.SigNoz.SQLStore.SQLxDB())
+	integrationsController, err := integrations.NewController(serverOptions.SigNoz.SQLStore)
 	if err != nil {
 		return nil, fmt.Errorf(
 			"couldn't create integrations controller: %w", err,
 		)
 	}
 
-	cloudIntegrationsController, err := cloudintegrations.NewController(serverOptions.SigNoz.SQLStore.SQLxDB())
+	cloudIntegrationsController, err := cloudintegrations.NewController(serverOptions.SigNoz.SQLStore)
 	if err != nil {
 		return nil, fmt.Errorf(
 			"couldn't create cloud provider integrations controller: %w", err,
@@ -272,8 +261,10 @@ func NewServer(serverOptions *ServerOptions) (*Server, error) {
 		Cache:                         c,
 		FluxInterval:                  fluxInterval,
 		Gateway:                       gatewayProxy,
+		GatewayUrl:                    serverOptions.GatewayUrl,
 		UseLogsNewSchema:              serverOptions.UseLogsNewSchema,
 		UseTraceNewSchema:             serverOptions.UseTraceNewSchema,
+		JWT:                           serverOptions.Jwt,
 	}
 
 	apiHandler, err := api.NewAPIHandler(apiOpts)
@@ -316,6 +307,8 @@ func (s *Server) createPrivateServer(apiHandler *api.APIHandler) (*http.Server,
 
 	r := baseapp.NewRouter()
 
+	r.Use(middleware.NewAuth(zap.L(), s.serverOptions.Jwt, []string{"Authorization", "Sec-WebSocket-Protocol"}).Wrap)
+	r.Use(eemiddleware.NewPat([]string{"SIGNOZ-API-KEY"}).Wrap)
 	r.Use(middleware.NewTimeout(zap.L(),
 		s.serverOptions.Config.APIServer.Timeout.ExcludedRoutes,
 		s.serverOptions.Config.APIServer.Timeout.Default,
@@ -347,8 +340,8 @@ func (s *Server) createPublicServer(apiHandler *api.APIHandler, web web.Web) (*h
 	r := baseapp.NewRouter()
 
 	// add auth middleware
-	getUserFromRequest := func(r *http.Request) (*basemodel.UserPayload, error) {
-		user, err := auth.GetUserFromRequest(r, apiHandler)
+	getUserFromRequest := func(ctx context.Context) (*basemodel.UserPayload, error) {
+		user, err := auth.GetUserFromRequestContext(ctx, apiHandler)
 
 		if err != nil {
 			return nil, err
@@ -362,6 +355,8 @@ func (s *Server) createPublicServer(apiHandler *api.APIHandler, web web.Web) (*h
 	}
 	am := baseapp.NewAuthMiddleware(getUserFromRequest)
 
+	r.Use(middleware.NewAuth(zap.L(), s.serverOptions.Jwt, []string{"Authorization", "Sec-WebSocket-Protocol"}).Wrap)
+	r.Use(eemiddleware.NewPat([]string{"SIGNOZ-API-KEY"}).Wrap)
 	r.Use(middleware.NewTimeout(zap.L(),
 		s.serverOptions.Config.APIServer.Timeout.ExcludedRoutes,
 		s.serverOptions.Config.APIServer.Timeout.Default,
@@ -379,6 +374,8 @@ func (s *Server) createPublicServer(apiHandler *api.APIHandler, web web.Web) (*h
 	apiHandler.RegisterQueryRangeV4Routes(r, am)
 	apiHandler.RegisterWebSocketPaths(r, am)
 	apiHandler.RegisterMessagingQueuesRoutes(r, am)
+	apiHandler.RegisterThirdPartyApiRoutes(r, am)
+	apiHandler.MetricExplorerRoutes(r, am)
 
 	c := cors.New(cors.Options{
 		AllowedOrigins: []string{"*"},
@@ -400,174 +397,6 @@ func (s *Server) createPublicServer(apiHandler *api.APIHandler, web web.Web) (*h
 	}, nil
 }
 
-// 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)
-	if !ok {
-		return nil, nil, errors.New("hijack not supported")
-	}
-	return h.Hijack()
-}
-
-func extractQueryRangeData(path string, r *http.Request) (map[string]interface{}, bool) {
-	pathToExtractBodyFromV3 := "/api/v3/query_range"
-	pathToExtractBodyFromV4 := "/api/v4/query_range"
-
-	data := map[string]interface{}{}
-	var postData *v3.QueryRangeParamsV3
-
-	if (r.Method == "POST") && ((path == pathToExtractBodyFromV3) || (path == pathToExtractBodyFromV4)) {
-		if r.Body != nil {
-			bodyBytes, err := io.ReadAll(r.Body)
-			if err != nil {
-				return nil, false
-			}
-			r.Body.Close() //  must close
-			r.Body = io.NopCloser(bytes.NewBuffer(bodyBytes))
-			json.Unmarshal(bodyBytes, &postData)
-
-		} else {
-			return nil, false
-		}
-
-	} else {
-		return nil, false
-	}
-
-	referrer := r.Header.Get("Referer")
-
-	dashboardMatched, err := regexp.MatchString(`/dashboard/[a-zA-Z0-9\-]+/(new|edit)(?:\?.*)?$`, referrer)
-	if err != nil {
-		zap.L().Error("error while matching the referrer", zap.Error(err))
-	}
-	alertMatched, err := regexp.MatchString(`/alerts/(new|edit)(?:\?.*)?$`, referrer)
-	if err != nil {
-		zap.L().Error("error while matching the alert: ", zap.Error(err))
-	}
-	logsExplorerMatched, err := regexp.MatchString(`/logs/logs-explorer(?:\?.*)?$`, referrer)
-	if err != nil {
-		zap.L().Error("error while matching the logs explorer: ", zap.Error(err))
-	}
-	traceExplorerMatched, err := regexp.MatchString(`/traces-explorer(?:\?.*)?$`, referrer)
-	if err != nil {
-		zap.L().Error("error while matching the trace explorer: ", zap.Error(err))
-	}
-
-	queryInfoResult := telemetry.GetInstance().CheckQueryInfo(postData)
-
-	if (queryInfoResult.MetricsUsed || queryInfoResult.LogsUsed || queryInfoResult.TracesUsed) && (queryInfoResult.FilterApplied) {
-		if queryInfoResult.MetricsUsed {
-			telemetry.GetInstance().AddActiveMetricsUser()
-		}
-		if queryInfoResult.LogsUsed {
-			telemetry.GetInstance().AddActiveLogsUser()
-		}
-		if queryInfoResult.TracesUsed {
-			telemetry.GetInstance().AddActiveTracesUser()
-		}
-		data["metricsUsed"] = queryInfoResult.MetricsUsed
-		data["logsUsed"] = queryInfoResult.LogsUsed
-		data["tracesUsed"] = queryInfoResult.TracesUsed
-		data["filterApplied"] = queryInfoResult.FilterApplied
-		data["groupByApplied"] = queryInfoResult.GroupByApplied
-		data["aggregateOperator"] = queryInfoResult.AggregateOperator
-		data["aggregateAttributeKey"] = queryInfoResult.AggregateAttributeKey
-		data["numberOfQueries"] = queryInfoResult.NumberOfQueries
-		data["queryType"] = queryInfoResult.QueryType
-		data["panelType"] = queryInfoResult.PanelType
-
-		userEmail, err := baseauth.GetEmailFromJwt(r.Context())
-		if err == nil {
-			// switch case to set data["screen"] based on the referrer
-			switch {
-			case dashboardMatched:
-				data["screen"] = "panel"
-			case alertMatched:
-				data["screen"] = "alert"
-			case logsExplorerMatched:
-				data["screen"] = "logs-explorer"
-			case traceExplorerMatched:
-				data["screen"] = "traces-explorer"
-			default:
-				data["screen"] = "unknown"
-				return data, true
-			}
-			telemetry.GetInstance().SendEvent(telemetry.TELEMETRY_EVENT_QUERY_RANGE_API, data, userEmail, true, false)
-		}
-	}
-	return data, true
-}
-
-func getActiveLogs(path string, r *http.Request) {
-	// if path == "/api/v1/dashboards/{uuid}" {
-	// 	telemetry.GetInstance().AddActiveMetricsUser()
-	// }
-	if path == "/api/v1/logs" {
-		hasFilters := len(r.URL.Query().Get("q"))
-		if hasFilters > 0 {
-			telemetry.GetInstance().AddActiveLogsUser()
-		}
-
-	}
-
-}
-
-func (s *Server) analyticsMiddleware(next http.Handler) http.Handler {
-	return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
-		ctx := baseauth.AttachJwtToContext(r.Context(), r)
-		r = r.WithContext(ctx)
-		route := mux.CurrentRoute(r)
-		path, _ := route.GetPathTemplate()
-
-		queryRangeData, metadataExists := extractQueryRangeData(path, r)
-		getActiveLogs(path, r)
-
-		lrw := NewLoggingResponseWriter(w)
-		next.ServeHTTP(lrw, r)
-
-		data := map[string]interface{}{"path": path, "statusCode": lrw.statusCode}
-		if metadataExists {
-			for key, value := range queryRangeData {
-				data[key] = value
-			}
-		}
-
-		if _, ok := telemetry.EnabledPaths()[path]; ok {
-			userEmail, err := baseauth.GetEmailFromJwt(r.Context())
-			if err == nil {
-				telemetry.GetInstance().SendEvent(telemetry.TELEMETRY_EVENT_PATH, data, userEmail, true, false)
-			}
-		}
-
-	})
-}
-
 // initListeners initialises listeners of the server
 func (s *Server) initListeners() error {
 	// listen on public port

ee/query-service/auth/auth.go

@@ -3,20 +3,20 @@ package auth
 import (
 	"context"
 	"fmt"
-	"net/http"
 	"time"
 
 	"go.signoz.io/signoz/ee/query-service/app/api"
 	baseauth "go.signoz.io/signoz/pkg/query-service/auth"
 	basemodel "go.signoz.io/signoz/pkg/query-service/model"
 	"go.signoz.io/signoz/pkg/query-service/telemetry"
+	"go.signoz.io/signoz/pkg/types/authtypes"
 
 	"go.uber.org/zap"
 )
 
-func GetUserFromRequest(r *http.Request, apiHandler *api.APIHandler) (*basemodel.UserPayload, error) {
-	patToken := r.Header.Get("SIGNOZ-API-KEY")
-	if len(patToken) > 0 {
+func GetUserFromRequestContext(ctx context.Context, apiHandler *api.APIHandler) (*basemodel.UserPayload, error) {
+	patToken, ok := authtypes.UUIDFromContext(ctx)
+	if ok && patToken != "" {
 		zap.L().Debug("Received a non-zero length PAT token")
 		ctx := context.Background()
 		dao := apiHandler.AppDao()
@@ -40,7 +40,7 @@ func GetUserFromRequest(r *http.Request, apiHandler *api.APIHandler) (*basemodel
 			}
 			telemetry.GetInstance().SetPatTokenUser()
 			dao.UpdatePATLastUsed(ctx, patToken, time.Now().Unix())
-			user.User.GroupId = group.Id
+			user.User.GroupId = group.ID
 			user.User.Id = pat.Id
 			return &basemodel.UserPayload{
 				User: user.User,
@@ -52,5 +52,5 @@ func GetUserFromRequest(r *http.Request, apiHandler *api.APIHandler) (*basemodel
 			return nil, err
 		}
 	}
-	return baseauth.GetUserFromRequest(r)
+	return baseauth.GetUserFromReqContext(ctx)
 }

ee/query-service/dao/factory.go

@@ -1,10 +1,10 @@
 package dao
 
 import (
-	"github.com/jmoiron/sqlx"
 	"go.signoz.io/signoz/ee/query-service/dao/sqlite"
+	"go.signoz.io/signoz/pkg/sqlstore"
 )
 
-func InitDao(inputDB *sqlx.DB) (ModelDao, error) {
-	return sqlite.InitDB(inputDB)
+func InitDao(sqlStore sqlstore.SQLStore) (ModelDao, error) {
+	return sqlite.InitDB(sqlStore)
 }

ee/query-service/dao/interface.go

@@ -10,6 +10,7 @@ import (
 	basedao "go.signoz.io/signoz/pkg/query-service/dao"
 	baseint "go.signoz.io/signoz/pkg/query-service/interfaces"
 	basemodel "go.signoz.io/signoz/pkg/query-service/model"
+	"go.signoz.io/signoz/pkg/types/authtypes"
 )
 
 type ModelDao interface {
@@ -22,7 +23,7 @@ type ModelDao interface {
 
 	// auth methods
 	CanUsePassword(ctx context.Context, email string) (bool, basemodel.BaseApiError)
-	PrepareSsoRedirect(ctx context.Context, redirectUri, email string) (redirectURL string, apierr basemodel.BaseApiError)
+	PrepareSsoRedirect(ctx context.Context, redirectUri, email string, jwt *authtypes.JWT) (redirectURL string, apierr basemodel.BaseApiError)
 	GetDomainFromSsoResponse(ctx context.Context, relayState *url.URL) (*model.OrgDomain, error)
 
 	// org domain (auth domains) CRUD ops

ee/query-service/dao/sqlite/auth.go

@@ -14,6 +14,7 @@ import (
 	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.signoz.io/signoz/pkg/types/authtypes"
 	"go.uber.org/zap"
 )
 
@@ -48,7 +49,7 @@ func (m *modelDao) createUserForSAMLRequest(ctx context.Context, email string) (
 		Password:          hash,
 		CreatedAt:         time.Now().Unix(),
 		ProfilePictureURL: "", // Currently unused
-		GroupId:           group.Id,
+		GroupId:           group.ID,
 		OrgId:             domain.OrgId,
 	}
 
@@ -64,7 +65,7 @@ func (m *modelDao) createUserForSAMLRequest(ctx context.Context, email string) (
 
 // PrepareSsoRedirect prepares redirect page link after SSO response
 // is successfully parsed (i.e. valid email is available)
-func (m *modelDao) PrepareSsoRedirect(ctx context.Context, redirectUri, email string) (redirectURL string, apierr basemodel.BaseApiError) {
+func (m *modelDao) PrepareSsoRedirect(ctx context.Context, redirectUri, email string, jwt *authtypes.JWT) (redirectURL string, apierr basemodel.BaseApiError) {
 
 	userPayload, apierr := m.GetUserByEmail(ctx, email)
 	if !apierr.IsNil() {
@@ -85,7 +86,7 @@ func (m *modelDao) PrepareSsoRedirect(ctx context.Context, redirectUri, email st
 		user = &userPayload.User
 	}
 
-	tokenStore, err := baseauth.GenerateJWTForUser(user)
+	tokenStore, err := baseauth.GenerateJWTForUser(user, jwt)
 	if err != nil {
 		zap.L().Error("failed to generate token for SSO login user", zap.Error(err))
 		return "", model.InternalErrorStr("failed to generate token for the user")

ee/query-service/dao/sqlite/modelDao.go

@@ -7,7 +7,7 @@ import (
 	basedao "go.signoz.io/signoz/pkg/query-service/dao"
 	basedsql "go.signoz.io/signoz/pkg/query-service/dao/sqlite"
 	baseint "go.signoz.io/signoz/pkg/query-service/interfaces"
-	"go.uber.org/zap"
+	"go.signoz.io/signoz/pkg/sqlstore"
 )
 
 type modelDao struct {
@@ -29,113 +29,15 @@ func (m *modelDao) checkFeature(key string) error {
 	return m.flags.CheckFeature(key)
 }
 
-func columnExists(db *sqlx.DB, tableName, columnName string) bool {
-	query := fmt.Sprintf("PRAGMA table_info(%s);", tableName)
-	rows, err := db.Query(query)
-	if err != nil {
-		zap.L().Error("Failed to query table info", zap.Error(err))
-		return false
-	}
-	defer rows.Close()
-
-	var (
-		cid        int
-		name       string
-		ctype      string
-		notnull    int
-		dflt_value *string
-		pk         int
-	)
-	for rows.Next() {
-		err := rows.Scan(&cid, &name, &ctype, &notnull, &dflt_value, &pk)
-		if err != nil {
-			zap.L().Error("Failed to scan table info", zap.Error(err))
-			return false
-		}
-		if name == columnName {
-			return true
-		}
-	}
-	err = rows.Err()
-	if err != nil {
-		zap.L().Error("Failed to scan table info", zap.Error(err))
-		return false
-	}
-	return false
-}
-
 // InitDB creates and extends base model DB repository
-func InitDB(inputDB *sqlx.DB) (*modelDao, error) {
-	dao, err := basedsql.InitDB(inputDB)
+func InitDB(sqlStore sqlstore.SQLStore) (*modelDao, error) {
+	dao, err := basedsql.InitDB(sqlStore)
 	if err != nil {
 		return nil, err
 	}
 	// set package variable so dependent base methods (e.g. AuthCache)  will work
 	basedao.SetDB(dao)
 	m := &modelDao{ModelDaoSqlite: dao}
-
-	table_schema := `
-	PRAGMA foreign_keys = ON;
-	CREATE TABLE IF NOT EXISTS org_domains(
-		id TEXT PRIMARY KEY,
-		org_id TEXT NOT NULL,
-		name VARCHAR(50) NOT NULL UNIQUE,
-		created_at INTEGER NOT NULL,
-		updated_at INTEGER,
-		data TEXT  NOT NULL,
-		FOREIGN KEY(org_id) REFERENCES organizations(id)
-	);
-	CREATE TABLE IF NOT EXISTS personal_access_tokens (
-		id INTEGER PRIMARY KEY AUTOINCREMENT,
-		role TEXT NOT NULL,
-		user_id TEXT NOT NULL,
-		token TEXT NOT NULL UNIQUE,
-		name TEXT NOT NULL,
-		created_at INTEGER NOT NULL,
-		expires_at INTEGER NOT NULL,
-		updated_at INTEGER NOT NULL,
-		last_used INTEGER NOT NULL,
-		revoked BOOLEAN NOT NULL,
-		updated_by_user_id TEXT NOT NULL,
-		FOREIGN KEY(user_id) REFERENCES users(id)
-	);
-	`
-
-	_, err = m.DB().Exec(table_schema)
-	if err != nil {
-		return nil, fmt.Errorf("error in creating tables: %v", err.Error())
-	}
-
-	if !columnExists(m.DB(), "personal_access_tokens", "role") {
-		_, err = m.DB().Exec("ALTER TABLE personal_access_tokens ADD COLUMN role TEXT NOT NULL DEFAULT 'ADMIN';")
-		if err != nil {
-			return nil, fmt.Errorf("error in adding column: %v", err.Error())
-		}
-	}
-	if !columnExists(m.DB(), "personal_access_tokens", "updated_at") {
-		_, err = m.DB().Exec("ALTER TABLE personal_access_tokens ADD COLUMN updated_at INTEGER NOT NULL DEFAULT 0;")
-		if err != nil {
-			return nil, fmt.Errorf("error in adding column: %v", err.Error())
-		}
-	}
-	if !columnExists(m.DB(), "personal_access_tokens", "last_used") {
-		_, err = m.DB().Exec("ALTER TABLE personal_access_tokens ADD COLUMN last_used INTEGER NOT NULL DEFAULT 0;")
-		if err != nil {
-			return nil, fmt.Errorf("error in adding column: %v", err.Error())
-		}
-	}
-	if !columnExists(m.DB(), "personal_access_tokens", "revoked") {
-		_, err = m.DB().Exec("ALTER TABLE personal_access_tokens ADD COLUMN revoked BOOLEAN NOT NULL DEFAULT FALSE;")
-		if err != nil {
-			return nil, fmt.Errorf("error in adding column: %v", err.Error())
-		}
-	}
-	if !columnExists(m.DB(), "personal_access_tokens", "updated_by_user_id") {
-		_, err = m.DB().Exec("ALTER TABLE personal_access_tokens ADD COLUMN updated_by_user_id TEXT NOT NULL DEFAULT '';")
-		if err != nil {
-			return nil, fmt.Errorf("error in adding column: %v", err.Error())
-		}
-	}
 	return m, nil
 }
 

ee/query-service/license/db.go

@@ -9,29 +9,28 @@ import (
 
 	"github.com/jmoiron/sqlx"
 	"github.com/mattn/go-sqlite3"
+	"github.com/uptrace/bun"
 
-	"go.signoz.io/signoz/ee/query-service/license/sqlite"
 	"go.signoz.io/signoz/ee/query-service/model"
 	basemodel "go.signoz.io/signoz/pkg/query-service/model"
+	"go.signoz.io/signoz/pkg/types"
 	"go.uber.org/zap"
 )
 
 // Repo is license repo. stores license keys in a secured DB
 type Repo struct {
-	db *sqlx.DB
+	db    *sqlx.DB
+	bundb *bun.DB
 }
 
 // NewLicenseRepo initiates a new license repo
-func NewLicenseRepo(db *sqlx.DB) Repo {
+func NewLicenseRepo(db *sqlx.DB, bundb *bun.DB) Repo {
 	return Repo{
-		db: db,
+		db:    db,
+		bundb: bundb,
 	}
 }
 
-func (r *Repo) InitDB(inputDB *sqlx.DB) error {
-	return sqlite.InitDB(inputDB)
-}
-
 func (r *Repo) GetLicensesV3(ctx context.Context) ([]*model.LicenseV3, error) {
 	licensesData := []model.LicenseDB{}
 	licenseV3Data := []*model.LicenseV3{}
@@ -170,24 +169,25 @@ func (r *Repo) UpdateLicenseV3(ctx context.Context, l *model.LicenseV3) error {
 	return nil
 }
 
-func (r *Repo) CreateFeature(req *basemodel.Feature) *basemodel.ApiError {
+func (r *Repo) CreateFeature(req *types.FeatureStatus) *basemodel.ApiError {
 
-	_, err := r.db.Exec(
-		`INSERT INTO feature_status (name, active, usage, usage_limit, route)
-		VALUES (?, ?, ?, ?, ?);`,
-		req.Name, req.Active, req.Usage, req.UsageLimit, req.Route)
+	_, err := r.bundb.NewInsert().
+		Model(req).
+		Exec(context.Background())
 	if err != nil {
 		return &basemodel.ApiError{Typ: basemodel.ErrorInternal, Err: err}
 	}
 	return nil
 }
 
-func (r *Repo) GetFeature(featureName string) (basemodel.Feature, error) {
+func (r *Repo) GetFeature(featureName string) (types.FeatureStatus, error) {
+	var feature types.FeatureStatus
 
-	var feature basemodel.Feature
+	err := r.bundb.NewSelect().
+		Model(&feature).
+		Where("name = ?", featureName).
+		Scan(context.Background())
 
-	err := r.db.Get(&feature,
-		`SELECT * FROM feature_status WHERE name = ?;`, featureName)
 	if err != nil {
 		return feature, err
 	}
@@ -210,18 +210,19 @@ func (r *Repo) GetAllFeatures() ([]basemodel.Feature, error) {
 	return feature, nil
 }
 
-func (r *Repo) UpdateFeature(req basemodel.Feature) error {
+func (r *Repo) UpdateFeature(req types.FeatureStatus) error {
 
-	_, err := r.db.Exec(
-		`UPDATE feature_status SET active = ?, usage = ?, usage_limit = ?, route = ? WHERE name = ?;`,
-		req.Active, req.Usage, req.UsageLimit, req.Route, req.Name)
+	_, err := r.bundb.NewUpdate().
+		Model(&req).
+		Where("name = ?", req.Name).
+		Exec(context.Background())
 	if err != nil {
 		return err
 	}
 	return nil
 }
 
-func (r *Repo) InitFeatures(req basemodel.FeatureSet) error {
+func (r *Repo) InitFeatures(req []types.FeatureStatus) error {
 	// get a feature by name, if it doesn't exist, create it. If it does exist, update it.
 	for _, feature := range req {
 		currentFeature, err := r.GetFeature(feature.Name)
@@ -234,7 +235,7 @@ func (r *Repo) InitFeatures(req basemodel.FeatureSet) error {
 		} else if err != nil {
 			return err
 		}
-		feature.Usage = currentFeature.Usage
+		feature.Usage = int(currentFeature.Usage)
 		if feature.Usage >= feature.UsageLimit && feature.UsageLimit != -1 {
 			feature.Active = false
 		}

ee/query-service/license/manager.go

@@ -2,17 +2,18 @@ package license
 
 import (
 	"context"
-	"fmt"
 	"sync/atomic"
 	"time"
 
 	"github.com/jmoiron/sqlx"
 	"github.com/pkg/errors"
+	"github.com/uptrace/bun"
 
 	"sync"
 
-	"go.signoz.io/signoz/pkg/query-service/auth"
 	baseconstants "go.signoz.io/signoz/pkg/query-service/constants"
+	"go.signoz.io/signoz/pkg/types"
+	"go.signoz.io/signoz/pkg/types/authtypes"
 
 	validate "go.signoz.io/signoz/ee/query-service/integrations/signozio"
 	"go.signoz.io/signoz/ee/query-service/model"
@@ -44,17 +45,12 @@ type Manager struct {
 	activeFeatures  basemodel.FeatureSet
 }
 
-func StartManager(db *sqlx.DB, features ...basemodel.Feature) (*Manager, error) {
+func StartManager(db *sqlx.DB, bundb *bun.DB, features ...basemodel.Feature) (*Manager, error) {
 	if LM != nil {
 		return LM, nil
 	}
 
-	repo := NewLicenseRepo(db)
-	err := repo.InitDB(db)
-	if err != nil {
-		return nil, fmt.Errorf("failed to initiate license repo: %v", err)
-	}
-
+	repo := NewLicenseRepo(db, bundb)
 	m := &Manager{
 		repo: &repo,
 	}
@@ -243,10 +239,10 @@ func (lm *Manager) ValidateV3(ctx context.Context) (reterr error) {
 func (lm *Manager) ActivateV3(ctx context.Context, licenseKey string) (licenseResponse *model.LicenseV3, errResponse *model.ApiError) {
 	defer func() {
 		if errResponse != nil {
-			userEmail, err := auth.GetEmailFromJwt(ctx)
-			if err == nil {
+			claims, ok := authtypes.ClaimsFromContext(ctx)
+			if ok {
 				telemetry.GetInstance().SendEvent(telemetry.TELEMETRY_LICENSE_ACT_FAILED,
-					map[string]interface{}{"err": errResponse.Err.Error()}, userEmail, true, false)
+					map[string]interface{}{"err": errResponse.Err.Error()}, claims.Email, true, false)
 			}
 		}
 	}()
@@ -288,15 +284,41 @@ func (lm *Manager) GetFeatureFlags() (basemodel.FeatureSet, error) {
 }
 
 func (lm *Manager) InitFeatures(features basemodel.FeatureSet) error {
-	return lm.repo.InitFeatures(features)
+	featureStatus := make([]types.FeatureStatus, len(features))
+	for i, f := range features {
+		featureStatus[i] = types.FeatureStatus{
+			Name:       f.Name,
+			Active:     f.Active,
+			Usage:      int(f.Usage),
+			UsageLimit: int(f.UsageLimit),
+			Route:      f.Route,
+		}
+	}
+	return lm.repo.InitFeatures(featureStatus)
 }
 
 func (lm *Manager) UpdateFeatureFlag(feature basemodel.Feature) error {
-	return lm.repo.UpdateFeature(feature)
+	return lm.repo.UpdateFeature(types.FeatureStatus{
+		Name:       feature.Name,
+		Active:     feature.Active,
+		Usage:      int(feature.Usage),
+		UsageLimit: int(feature.UsageLimit),
+		Route:      feature.Route,
+	})
 }
 
 func (lm *Manager) GetFeatureFlag(key string) (basemodel.Feature, error) {
-	return lm.repo.GetFeature(key)
+	featureStatus, err := lm.repo.GetFeature(key)
+	if err != nil {
+		return basemodel.Feature{}, err
+	}
+	return basemodel.Feature{
+		Name:       featureStatus.Name,
+		Active:     featureStatus.Active,
+		Usage:      int64(featureStatus.Usage),
+		UsageLimit: int64(featureStatus.UsageLimit),
+		Route:      featureStatus.Route,
+	}, nil
 }
 
 // GetRepo return the license repo

ee/query-service/license/sqlite/init.go

@@ -1,63 +0,0 @@
-package sqlite
-
-import (
-	"fmt"
-
-	"github.com/jmoiron/sqlx"
-)
-
-func InitDB(db *sqlx.DB) error {
-	var err error
-	if db == nil {
-		return fmt.Errorf("invalid db connection")
-	}
-
-	table_schema := `CREATE TABLE IF NOT EXISTS licenses(
-		key TEXT PRIMARY KEY,
-		createdAt TIMESTAMP DEFAULT CURRENT_TIMESTAMP, 
-		updatedAt TIMESTAMP DEFAULT CURRENT_TIMESTAMP, 
-		planDetails TEXT,
-		activationId TEXT,
-		validationMessage TEXT,
-		lastValidated TIMESTAMP DEFAULT CURRENT_TIMESTAMP
-	);
-	
-	CREATE TABLE IF NOT EXISTS sites(
-		uuid TEXT PRIMARY KEY,
-		alias VARCHAR(180) DEFAULT 'PROD',
-		url VARCHAR(300),
-		createdAt TIMESTAMP DEFAULT CURRENT_TIMESTAMP
-	);
-	`
-
-	_, err = db.Exec(table_schema)
-	if err != nil {
-		return fmt.Errorf("error in creating licenses table: %s", err.Error())
-	}
-
-	table_schema = `CREATE TABLE IF NOT EXISTS feature_status (
-		name TEXT PRIMARY KEY,
-		active bool,
-		usage INTEGER DEFAULT 0,
-		usage_limit INTEGER DEFAULT 0,
-		route TEXT
-	);`
-
-	_, err = db.Exec(table_schema)
-	if err != nil {
-		return fmt.Errorf("error in creating feature_status table: %s", err.Error())
-	}
-
-	table_schema = `CREATE TABLE IF NOT EXISTS licenses_v3 (
-		id TEXT PRIMARY KEY,
-		key TEXT NOT NULL UNIQUE,
-		data TEXT
-	);`
-
-	_, err = db.Exec(table_schema)
-	if err != nil {
-		return fmt.Errorf("error in creating licenses_v3 table: %s", err.Error())
-	}
-
-	return nil
-}

ee/query-service/main.go

@@ -18,9 +18,9 @@ import (
 	"go.signoz.io/signoz/pkg/config/fileprovider"
 	"go.signoz.io/signoz/pkg/query-service/auth"
 	baseconst "go.signoz.io/signoz/pkg/query-service/constants"
-	"go.signoz.io/signoz/pkg/query-service/migrate"
 	"go.signoz.io/signoz/pkg/query-service/version"
 	"go.signoz.io/signoz/pkg/signoz"
+	"go.signoz.io/signoz/pkg/types/authtypes"
 	"google.golang.org/grpc"
 	"google.golang.org/grpc/credentials/insecure"
 
@@ -155,6 +155,16 @@ func main() {
 		zap.L().Fatal("Failed to create signoz struct", zap.Error(err))
 	}
 
+	jwtSecret := os.Getenv("SIGNOZ_JWT_SECRET")
+
+	if len(jwtSecret) == 0 {
+		zap.L().Warn("No JWT secret key is specified.")
+	} else {
+		zap.L().Info("JWT secret key set successfully.")
+	}
+
+	jwt := authtypes.NewJWT(jwtSecret, 30*time.Minute, 30*24*time.Hour)
+
 	serverOptions := &app.ServerOptions{
 		Config:                     config,
 		SigNoz:                     signoz,
@@ -172,21 +182,7 @@ func main() {
 		GatewayUrl:                 gatewayUrl,
 		UseLogsNewSchema:           useLogsNewSchema,
 		UseTraceNewSchema:          useTraceNewSchema,
-	}
-
-	// Read the jwt secret key
-	auth.JwtSecret = os.Getenv("SIGNOZ_JWT_SECRET")
-
-	if len(auth.JwtSecret) == 0 {
-		zap.L().Warn("No JWT secret key is specified.")
-	} else {
-		zap.L().Info("JWT secret key set successfully.")
-	}
-
-	if err := migrate.Migrate(signoz.SQLStore.SQLxDB()); err != nil {
-		zap.L().Error("Failed to migrate", zap.Error(err))
-	} else {
-		zap.L().Info("Migration successful")
+		Jwt:                        jwt,
 	}
 
 	server, err := app.NewServer(serverOptions)

ee/query-service/model/license.go

@@ -139,8 +139,8 @@ func NewLicenseV3(data map[string]interface{}) (*LicenseV3, error) {
 	if err != nil {
 		return nil, err
 	}
-	// if license status is inactive then default it to basic
-	if status == LicenseStatusInactive {
+	// if license status is invalid then default it to basic
+	if status == LicenseStatusInvalid {
 		planName = PlanNameBasic
 	}
 

ee/query-service/model/plans.go

@@ -21,7 +21,7 @@ var (
 )
 
 var (
-	LicenseStatusInactive = "INACTIVE"
+	LicenseStatusInvalid = "INVALID"
 )
 
 const DisableUpsell = "DISABLE_UPSELL"

frontend/package.json

@@ -92,7 +92,7 @@
 		"overlayscrollbars": "^2.8.1",
 		"overlayscrollbars-react": "^0.5.6",
 		"papaparse": "5.4.1",
-		"posthog-js": "1.160.3",
+		"posthog-js": "1.215.5",
 		"rc-tween-one": "3.0.6",
 		"react": "18.2.0",
 		"react-addons-update": "15.6.3",
@@ -107,6 +107,7 @@
 		"react-grid-layout": "^1.3.4",
 		"react-helmet-async": "1.3.0",
 		"react-i18next": "^11.16.1",
+		"react-lottie": "1.2.10",
 		"react-markdown": "8.0.7",
 		"react-query": "3.39.3",
 		"react-redux": "^7.2.2",
@@ -178,6 +179,7 @@
 		"@types/react-dom": "18.0.10",
 		"@types/react-grid-layout": "^1.1.2",
 		"@types/react-helmet-async": "1.0.3",
+		"@types/react-lottie": "1.2.10",
 		"@types/react-redux": "^7.1.11",
 		"@types/react-resizable": "3.0.3",
 		"@types/react-router-dom": "^5.1.6",
@@ -218,6 +220,7 @@
 		"portfinder-sync": "^0.0.2",
 		"postcss": "8.4.38",
 		"prettier": "2.2.1",
+		"prop-types": "15.8.1",
 		"raw-loader": "4.0.2",
 		"react-hooks-testing-library": "0.6.0",
 		"react-hot-loader": "^4.13.0",

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

@@ -0,0 +1,6 @@
+<svg width="57" height="57" viewBox="0 0 57 57" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="solid-check-circle-2">
+<path id="Vector" d="M28.2498 51.9638C41.1368 51.9638 51.5832 41.5175 51.5832 28.6305C51.5832 15.7435 41.1368 5.29712 28.2498 5.29712C15.3628 5.29712 4.9165 15.7435 4.9165 28.6305C4.9165 41.5175 15.3628 51.9638 28.2498 51.9638Z" fill="#4E74F8" stroke="#4E74F8" stroke-width="4.66667" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_2" d="M16.25 27.6304L24.2115 36.6304L39.25 22.6304" stroke="#121317" stroke-width="4.66667" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</svg>

frontend/public/Logos/aws-dark.svg

@@ -0,0 +1,23 @@
+<svg width="24" height="16" viewBox="0 0 24 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="amazon_web_services_logo.svg" clip-path="url(#clip0_2552_26387)">
+<g id="Group">
+<path id="Vector" d="M6.82058 6.05151C6.82058 6.34672 6.85997 6.58289 6.89935 6.76001C6.95843 6.93714 7.03721 7.11426 7.15537 7.33075C7.19476 7.38979 7.21445 7.44883 7.21445 7.50788C7.21445 7.5866 7.17506 7.66532 7.0569 7.74404L6.56456 8.07861C6.48579 8.11797 6.42671 8.15733 6.36762 8.15733C6.28885 8.15733 6.21008 8.11797 6.1313 8.03925C6.01314 7.92117 5.93437 7.80308 5.85559 7.66532C5.77682 7.52756 5.69804 7.38979 5.61927 7.19299C5.00876 7.92117 4.24071 8.27542 3.29542 8.27542C2.62584 8.27542 2.1138 8.07861 1.71993 7.70468C1.32606 7.33075 1.12912 6.81906 1.12912 6.18928C1.12912 5.52014 1.36544 4.96908 1.83809 4.57547C2.31074 4.18186 2.96063 3.96538 3.76807 3.96538C4.04378 3.96538 4.31949 3.98506 4.5952 4.02442C4.8906 4.06378 5.18601 4.12282 5.50111 4.20154V3.63081C5.50111 3.04039 5.38294 2.60742 5.12693 2.37125C4.87091 2.13508 4.45734 2.017 3.84684 2.017C3.57113 2.017 3.29542 2.05636 3.00001 2.1154C2.70461 2.19413 2.4289 2.27285 2.15319 2.39093C2.03503 2.43029 1.93656 2.46965 1.87748 2.48933C1.8184 2.48933 1.77901 2.50901 1.75932 2.50901C1.64115 2.50901 1.60177 2.43029 1.60177 2.27285V1.87924C1.60177 1.76115 1.62146 1.66275 1.66085 1.60371C1.70024 1.54467 1.77901 1.48563 1.87748 1.44626C2.15319 1.3085 2.48798 1.19042 2.86216 1.09201C3.25603 0.993612 3.6499 0.93457 4.08316 0.93457C5.02846 0.93457 5.69804 1.15106 6.15099 1.56435C6.58425 1.99732 6.80088 2.6271 6.80088 3.51272L6.82058 6.05151ZM3.63021 7.25203C3.88623 7.25203 4.16194 7.21267 4.43765 7.11426C4.71336 7.01586 4.96938 6.83874 5.18601 6.60257C5.30417 6.44513 5.40264 6.28768 5.46172 6.09088C5.50111 5.89407 5.54049 5.67758 5.54049 5.40206V5.06749C5.30417 5.00845 5.06785 4.96908 4.81183 4.92972C4.55581 4.89036 4.31949 4.89036 4.06347 4.89036C3.53174 4.89036 3.15756 4.98876 2.88185 5.20525C2.62584 5.42174 2.48798 5.71695 2.48798 6.11056C2.48798 6.48449 2.58645 6.76001 2.78338 6.93714C2.98032 7.17331 3.25603 7.25203 3.63021 7.25203ZM9.95187 8.11797C9.81401 8.11797 9.71554 8.09829 9.65646 8.03925C9.59738 7.99989 9.5383 7.88181 9.49891 7.72436L7.64771 1.62339C7.60832 1.46595 7.56894 1.36754 7.56894 1.3085C7.56894 1.19042 7.62802 1.1117 7.76587 1.1117H8.53392C8.69147 1.1117 8.78994 1.13138 8.84902 1.19042C8.9081 1.22978 8.96718 1.34786 9.00657 1.50531L10.326 6.72065L11.547 1.50531C11.5864 1.34786 11.6258 1.24946 11.7046 1.19042C11.7637 1.15106 11.8818 1.1117 12.0197 1.1117H12.6499C12.8074 1.1117 12.9059 1.13138 12.965 1.19042C13.0241 1.22978 13.0832 1.34786 13.1225 1.50531L14.3632 6.7797L15.7221 1.50531C15.7615 1.34786 15.8206 1.24946 15.8796 1.19042C15.9387 1.15106 16.0372 1.1117 16.1947 1.1117H16.9234C17.0416 1.1117 17.1203 1.17074 17.1203 1.3085C17.1203 1.34786 17.1203 1.38722 17.1007 1.42658C17.1007 1.46595 17.081 1.54467 17.0416 1.62339L15.1313 7.72436C15.0919 7.88181 15.0328 7.98021 14.9737 8.03925C14.9147 8.07861 14.8162 8.11797 14.6783 8.11797H14.0088C13.8512 8.11797 13.7527 8.09829 13.6937 8.03925C13.6346 7.98021 13.5755 7.88181 13.5361 7.72436L12.3151 2.64678L11.0941 7.72436C11.0547 7.88181 11.0153 7.98021 10.9365 8.03925C10.8775 8.09829 10.7593 8.11797 10.6214 8.11797H9.95187ZM20.0941 8.31478C19.6805 8.31478 19.267 8.27542 18.8731 8.17702C18.4792 8.07861 18.1641 7.98021 17.9672 7.86213C17.849 7.7834 17.7505 7.70468 17.7308 7.64564C17.7112 7.5866 17.6718 7.4882 17.6718 7.42915V7.03554C17.6718 6.8781 17.7308 6.79938 17.849 6.79938C17.8884 6.79938 17.9475 6.79938 17.9869 6.81906C18.0263 6.83874 18.105 6.85842 18.1838 6.89778C18.4595 7.01586 18.7352 7.11426 19.0503 7.17331C19.3654 7.23235 19.6805 7.27171 19.9956 7.27171C20.488 7.27171 20.8818 7.19299 21.1378 7.01586C21.4136 6.83874 21.5514 6.58289 21.5514 6.268C21.5514 6.05151 21.4726 5.87439 21.3348 5.71695C21.1969 5.5595 20.9212 5.44142 20.547 5.30365L19.4048 4.9494C18.8337 4.77228 18.4004 4.49675 18.1444 4.1425C17.8884 3.78825 17.7505 3.41432 17.7505 3.00103C17.7505 2.66646 17.8293 2.37125 17.9672 2.13508C18.105 1.89892 18.302 1.66275 18.5383 1.48563C18.7746 1.3085 19.0503 1.17074 19.3654 1.07233C19.6805 0.973931 20.0153 0.93457 20.3501 0.93457C20.5273 0.93457 20.7046 0.93457 20.8818 0.973931C21.0591 0.993612 21.2363 1.03297 21.3939 1.05265C21.5514 1.09201 21.709 1.13138 21.8468 1.17074C21.9847 1.2101 22.1028 1.26914 22.1816 1.3085C22.2998 1.36754 22.3785 1.42658 22.4179 1.50531C22.4573 1.56435 22.4967 1.66275 22.4967 1.76115V2.13508C22.4967 2.29253 22.4376 2.39093 22.3195 2.39093C22.2604 2.39093 22.1619 2.35157 22.0241 2.29253C21.5711 2.09572 21.0788 1.97764 20.5077 1.97764C20.0547 1.97764 19.7002 2.05636 19.4639 2.19413C19.2276 2.33189 19.0897 2.56806 19.0897 2.90263C19.0897 3.11911 19.1685 3.31592 19.326 3.45368C19.4836 3.61113 19.779 3.74889 20.1926 3.88665L21.3151 4.2409C21.8862 4.41803 22.2998 4.67388 22.5361 4.98876C22.7724 5.30365 22.8906 5.67758 22.8906 6.09088C22.8906 6.42545 22.8118 6.74033 22.6936 6.99618C22.5558 7.27171 22.3589 7.50788 22.1225 7.685C21.8862 7.88181 21.5908 8.01957 21.256 8.11797C20.8621 8.27542 20.488 8.31478 20.0941 8.31478Z" fill="white"/>
+<g id="Group_2">
+<path id="Vector_2" fill-rule="evenodd" clip-rule="evenodd" d="M21.5908 12.1525C18.9912 14.0615 15.2101 15.0849 11.9803 15.0849C7.43108 15.0849 3.33481 13.4121 0.242906 10.6174C0.00658259 10.4009 0.223213 10.1057 0.518617 10.2632C3.86653 12.2115 7.9825 13.3727 12.256 13.3727C15.1313 13.3727 18.302 12.7823 21.2166 11.5424C21.6302 11.3653 22.0044 11.8376 21.5908 12.1525Z" fill="#FF9900"/>
+<path id="Vector_3" fill-rule="evenodd" clip-rule="evenodd" d="M22.6543 10.9324C22.3195 10.4994 20.4683 10.7356 19.6214 10.834C19.3654 10.8734 19.326 10.6372 19.5624 10.4798C21.0394 9.43669 23.4814 9.7319 23.7571 10.0861C24.0328 10.4404 23.6783 12.8808 22.2998 14.0419C22.0831 14.2191 21.8862 14.1207 21.9847 13.8845C22.2998 13.0973 22.989 11.3457 22.6543 10.9324Z" fill="#FF9900"/>
+</g>
+</g>
+<g id="Group_3">
+<path id="Vector_4" d="M6.82058 6.05151C6.82058 6.34672 6.85997 6.58289 6.89935 6.76001C6.95843 6.93714 7.03721 7.11426 7.15537 7.33075C7.19476 7.38979 7.21445 7.44883 7.21445 7.50788C7.21445 7.5866 7.17506 7.66532 7.0569 7.74404L6.56456 8.07861C6.48579 8.11797 6.42671 8.15733 6.36762 8.15733C6.28885 8.15733 6.21008 8.11797 6.1313 8.03925C6.01314 7.92117 5.93437 7.80308 5.85559 7.66532C5.77682 7.52756 5.69804 7.38979 5.61927 7.19299C5.00876 7.92117 4.24071 8.27542 3.29542 8.27542C2.62584 8.27542 2.1138 8.07861 1.71993 7.70468C1.32606 7.33075 1.12912 6.81906 1.12912 6.18928C1.12912 5.52014 1.36544 4.96908 1.83809 4.57547C2.31074 4.18186 2.96063 3.96538 3.76807 3.96538C4.04378 3.96538 4.31949 3.98506 4.5952 4.02442C4.8906 4.06378 5.18601 4.12282 5.50111 4.20154V3.63081C5.50111 3.04039 5.38294 2.60742 5.12693 2.37125C4.87091 2.13508 4.45734 2.017 3.84684 2.017C3.57113 2.017 3.29542 2.05636 3.00001 2.1154C2.70461 2.19413 2.4289 2.27285 2.15319 2.39093C2.03503 2.43029 1.93656 2.46965 1.87748 2.48933C1.8184 2.48933 1.77901 2.50901 1.75932 2.50901C1.64115 2.50901 1.60177 2.43029 1.60177 2.27285V1.87924C1.60177 1.76115 1.62146 1.66275 1.66085 1.60371C1.70024 1.54467 1.77901 1.48563 1.87748 1.44626C2.15319 1.3085 2.48798 1.19042 2.86216 1.09201C3.25603 0.993612 3.6499 0.93457 4.08316 0.93457C5.02846 0.93457 5.69804 1.15106 6.15099 1.56435C6.58425 1.99732 6.80088 2.6271 6.80088 3.51272L6.82058 6.05151ZM3.63021 7.25203C3.88623 7.25203 4.16194 7.21267 4.43765 7.11426C4.71336 7.01586 4.96938 6.83874 5.18601 6.60257C5.30417 6.44513 5.40264 6.28768 5.46172 6.09088C5.50111 5.89407 5.54049 5.67758 5.54049 5.40206V5.06749C5.30417 5.00845 5.06785 4.96908 4.81183 4.92972C4.55581 4.89036 4.31949 4.89036 4.06347 4.89036C3.53174 4.89036 3.15756 4.98876 2.88185 5.20525C2.62584 5.42174 2.48798 5.71695 2.48798 6.11056C2.48798 6.48449 2.58645 6.76001 2.78338 6.93714C2.98032 7.17331 3.25603 7.25203 3.63021 7.25203ZM9.95187 8.11797C9.81401 8.11797 9.71554 8.09829 9.65646 8.03925C9.59738 7.99989 9.5383 7.88181 9.49891 7.72436L7.64771 1.62339C7.60832 1.46595 7.56894 1.36754 7.56894 1.3085C7.56894 1.19042 7.62802 1.1117 7.76587 1.1117H8.53392C8.69147 1.1117 8.78994 1.13138 8.84902 1.19042C8.9081 1.22978 8.96718 1.34786 9.00657 1.50531L10.326 6.72065L11.547 1.50531C11.5864 1.34786 11.6258 1.24946 11.7046 1.19042C11.7637 1.15106 11.8818 1.1117 12.0197 1.1117H12.6499C12.8074 1.1117 12.9059 1.13138 12.965 1.19042C13.0241 1.22978 13.0832 1.34786 13.1225 1.50531L14.3632 6.7797L15.7221 1.50531C15.7615 1.34786 15.8206 1.24946 15.8796 1.19042C15.9387 1.15106 16.0372 1.1117 16.1947 1.1117H16.9234C17.0416 1.1117 17.1203 1.17074 17.1203 1.3085C17.1203 1.34786 17.1203 1.38722 17.1007 1.42658C17.1007 1.46595 17.081 1.54467 17.0416 1.62339L15.1313 7.72436C15.0919 7.88181 15.0328 7.98021 14.9737 8.03925C14.9147 8.07861 14.8162 8.11797 14.6783 8.11797H14.0088C13.8512 8.11797 13.7527 8.09829 13.6937 8.03925C13.6346 7.98021 13.5755 7.88181 13.5361 7.72436L12.3151 2.64678L11.0941 7.72436C11.0547 7.88181 11.0153 7.98021 10.9365 8.03925C10.8775 8.09829 10.7593 8.11797 10.6214 8.11797H9.95187ZM20.0941 8.31478C19.6805 8.31478 19.267 8.27542 18.8731 8.17702C18.4792 8.07861 18.1641 7.98021 17.9672 7.86213C17.849 7.7834 17.7505 7.70468 17.7308 7.64564C17.7112 7.5866 17.6718 7.4882 17.6718 7.42915V7.03554C17.6718 6.8781 17.7308 6.79938 17.849 6.79938C17.8884 6.79938 17.9475 6.79938 17.9869 6.81906C18.0263 6.83874 18.105 6.85842 18.1838 6.89778C18.4595 7.01586 18.7352 7.11426 19.0503 7.17331C19.3654 7.23235 19.6805 7.27171 19.9956 7.27171C20.488 7.27171 20.8818 7.19299 21.1378 7.01586C21.4136 6.83874 21.5514 6.58289 21.5514 6.268C21.5514 6.05151 21.4726 5.87439 21.3348 5.71695C21.1969 5.5595 20.9212 5.44142 20.547 5.30365L19.4048 4.9494C18.8337 4.77228 18.4004 4.49675 18.1444 4.1425C17.8884 3.78825 17.7505 3.41432 17.7505 3.00103C17.7505 2.66646 17.8293 2.37125 17.9672 2.13508C18.105 1.89892 18.302 1.66275 18.5383 1.48563C18.7746 1.3085 19.0503 1.17074 19.3654 1.07233C19.6805 0.973931 20.0153 0.93457 20.3501 0.93457C20.5273 0.93457 20.7046 0.93457 20.8818 0.973931C21.0591 0.993612 21.2363 1.03297 21.3939 1.05265C21.5514 1.09201 21.709 1.13138 21.8468 1.17074C21.9847 1.2101 22.1028 1.26914 22.1816 1.3085C22.2998 1.36754 22.3785 1.42658 22.4179 1.50531C22.4573 1.56435 22.4967 1.66275 22.4967 1.76115V2.13508C22.4967 2.29253 22.4376 2.39093 22.3195 2.39093C22.2604 2.39093 22.1619 2.35157 22.0241 2.29253C21.5711 2.09572 21.0788 1.97764 20.5077 1.97764C20.0547 1.97764 19.7002 2.05636 19.4639 2.19413C19.2276 2.33189 19.0897 2.56806 19.0897 2.90263C19.0897 3.11911 19.1685 3.31592 19.326 3.45368C19.4836 3.61113 19.779 3.74889 20.1926 3.88665L21.3151 4.2409C21.8862 4.41803 22.2998 4.67388 22.5361 4.98876C22.7724 5.30365 22.8906 5.67758 22.8906 6.09088C22.8906 6.42545 22.8118 6.74033 22.6936 6.99618C22.5558 7.27171 22.3589 7.50788 22.1225 7.685C21.8862 7.88181 21.5908 8.01957 21.256 8.11797C20.8621 8.27542 20.488 8.31478 20.0941 8.31478Z" fill="white"/>
+<g id="Group_4">
+<path id="Vector_5" fill-rule="evenodd" clip-rule="evenodd" d="M21.5908 12.1525C18.9912 14.0615 15.2101 15.0849 11.9803 15.0849C7.43108 15.0849 3.33481 13.4121 0.242906 10.6174C0.00658259 10.4009 0.223213 10.1057 0.518617 10.2632C3.86653 12.2115 7.9825 13.3727 12.256 13.3727C15.1313 13.3727 18.302 12.7823 21.2166 11.5424C21.6302 11.3653 22.0044 11.8376 21.5908 12.1525Z" fill="#FF9900"/>
+<path id="Vector_6" fill-rule="evenodd" clip-rule="evenodd" d="M22.6543 10.9324C22.3195 10.4994 20.4683 10.7356 19.6214 10.834C19.3654 10.8734 19.326 10.6372 19.5624 10.4798C21.0394 9.43669 23.4814 9.7319 23.7571 10.0861C24.0328 10.4404 23.6783 12.8808 22.2998 14.0419C22.0831 14.2191 21.8862 14.1207 21.9847 13.8845C22.2998 13.0973 22.989 11.3457 22.6543 10.9324Z" fill="#FF9900"/>
+</g>
+</g>
+</g>
+<defs>
+<clipPath id="clip0_2552_26387">
+<rect width="23.7111" height="14.17" fill="white" transform="translate(0.14444 0.915039)"/>
+</clipPath>
+</defs>
+</svg>

frontend/public/Logos/aws-light.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="none">
+
+<path fill="#252F3E" d="M4.51 7.687c0 .197.02.357.058.475.042.117.096.245.17.384a.233.233 0 01.037.123c0 .053-.032.107-.1.16l-.336.224a.255.255 0 01-.138.048c-.054 0-.107-.026-.16-.074a1.652 1.652 0 01-.192-.251 4.137 4.137 0 01-.165-.315c-.415.491-.936.737-1.564.737-.447 0-.804-.129-1.064-.385-.261-.256-.394-.598-.394-1.025 0-.454.16-.822.484-1.1.325-.278.756-.416 1.304-.416.18 0 .367.016.564.042.197.027.4.07.612.118v-.39c0-.406-.085-.689-.25-.854-.17-.166-.458-.246-.868-.246-.186 0-.377.022-.574.07a4.23 4.23 0 00-.575.181 1.525 1.525 0 01-.186.07.326.326 0 01-.085.016c-.075 0-.112-.054-.112-.166v-.262c0-.085.01-.15.037-.186a.399.399 0 01.15-.113c.185-.096.409-.176.67-.24.26-.07.537-.101.83-.101.633 0 1.096.144 1.394.432.293.288.442.726.442 1.314v1.73h.01zm-2.161.811c.175 0 .356-.032.548-.096.191-.064.362-.182.505-.342a.848.848 0 00.181-.341c.032-.129.054-.283.054-.465V7.03a4.43 4.43 0 00-.49-.09 3.996 3.996 0 00-.5-.033c-.357 0-.618.07-.793.214-.176.144-.26.347-.26.614 0 .25.063.437.196.566.128.133.314.197.559.197zm4.273.577c-.096 0-.16-.016-.202-.054-.043-.032-.08-.106-.112-.208l-1.25-4.127a.938.938 0 01-.049-.214c0-.085.043-.133.128-.133h.522c.1 0 .17.016.207.053.043.032.075.107.107.208l.894 3.535.83-3.535c.026-.106.058-.176.1-.208a.365.365 0 01.214-.053h.425c.102 0 .17.016.213.053.043.032.08.107.101.208l.841 3.578.92-3.578a.458.458 0 01.107-.208.346.346 0 01.208-.053h.495c.085 0 .133.043.133.133 0 .027-.006.054-.01.086a.76.76 0 01-.038.133l-1.283 4.127c-.032.107-.069.177-.111.209a.34.34 0 01-.203.053h-.457c-.101 0-.17-.016-.213-.053-.043-.038-.08-.107-.101-.214L8.213 5.37l-.82 3.439c-.026.107-.058.176-.1.213-.043.038-.118.054-.213.054h-.458zm6.838.144a3.51 3.51 0 01-.82-.096c-.266-.064-.473-.134-.612-.214-.085-.048-.143-.101-.165-.15a.378.378 0 01-.031-.149v-.272c0-.112.042-.166.122-.166a.3.3 0 01.096.016c.032.011.08.032.133.054.18.08.378.144.585.187.213.042.42.064.633.064.336 0 .596-.059.777-.176a.575.575 0 00.277-.508.52.52 0 00-.144-.373c-.095-.102-.276-.193-.537-.278l-.772-.24c-.388-.123-.676-.305-.851-.545a1.275 1.275 0 01-.266-.774c0-.224.048-.422.143-.593.096-.17.224-.32.384-.438.16-.122.34-.213.553-.277.213-.064.436-.091.67-.091.118 0 .24.005.357.021.122.016.234.038.346.06.106.026.208.052.303.085.096.032.17.064.224.096a.46.46 0 01.16.133.289.289 0 01.047.176v.251c0 .112-.042.171-.122.171a.552.552 0 01-.202-.064 2.427 2.427 0 00-1.022-.208c-.303 0-.543.048-.708.15-.165.1-.25.256-.25.475 0 .149.053.277.16.379.106.101.303.202.585.293l.756.24c.383.123.66.294.825.513.165.219.244.47.244.748 0 .23-.047.437-.138.619a1.436 1.436 0 01-.388.47c-.165.133-.362.23-.591.299-.24.075-.49.112-.761.112z"/>
+
+<g fill="#F90" fill-rule="evenodd" clip-rule="evenodd">
+

frontend/public/locales/en/titles.json

@@ -57,5 +57,8 @@
 	"ALERT_OVERVIEW": "SigNoz | Alert Rule Overview",
 	"MESSAGING_QUEUES": "SigNoz | Messaging Queues",
 	"INFRASTRUCTURE_MONITORING_HOSTS": "SigNoz | Infra Monitoring",
-	"INFRASTRUCTURE_MONITORING_KUBERNETES": "SigNoz | Infra Monitoring"
+	"INFRASTRUCTURE_MONITORING_KUBERNETES": "SigNoz | Infra Monitoring",
+	"METRICS_EXPLORER": "SigNoz | Metrics Explorer",
+	"METRICS_EXPLORER_EXPLORER": "SigNoz | Metrics Explorer",
+	"METRICS_EXPLORER_VIEWS": "SigNoz | Metrics Explorer"
 }

frontend/src/AppRoutes/Private.tsx

@@ -156,7 +156,7 @@ function PrivateRoute({ children }: PrivateRouteProps): JSX.Element {
 			const currentRoute = mapRoutes.get('current');
 			const shouldSuspendWorkspace =
 				activeLicenseV3.status === LicenseStatus.SUSPENDED &&
-				activeLicenseV3.state === LicenseState.PAYMENT_FAILED;
+				activeLicenseV3.state === LicenseState.DEFAULTED;
 
 			if (shouldSuspendWorkspace && currentRoute) {
 				navigateToWorkSpaceSuspended(currentRoute);

frontend/src/AppRoutes/index.tsx

@@ -110,6 +110,18 @@ function App(): JSX.Element {
 					source: 'signoz-ui',
 					isPaidUser: !!licenses?.trialConvertedToSubscription,
 				});
+
+				if (
+					window.cioanalytics &&
+					typeof window.cioanalytics.identify === 'function'
+				) {
+					window.cioanalytics.reset();
+					window.cioanalytics.identify(email, {
+						name: user.name,
+						email,
+						role: user.role,
+					});
+				}
 			}
 		},
 		[hostname, isFetchingLicenses, licenses, org],

frontend/src/AppRoutes/pageComponents.ts

@@ -264,3 +264,8 @@ export const CeleryOverview = Loadable(
 			/* webpackChunkName: "CeleryOverview" */ 'pages/Celery/CeleryOverview/CeleryOverview'
 		),
 );
+
+export const MetricsExplorer = Loadable(
+	() =>
+		import(/* webpackChunkName: "MetricsExplorer" */ 'pages/MetricsExplorer'),
+);

frontend/src/AppRoutes/routes.ts

@@ -28,6 +28,7 @@ import {
 	LogsExplorer,
 	LogsIndexToFields,
 	LogsSaveViews,
+	MetricsExplorer,
 	MySettings,
 	NewDashboardPage,
 	OldLogsExplorer,
@@ -435,6 +436,27 @@ const routes: AppRoutes[] = [
 		key: 'INFRASTRUCTURE_MONITORING_KUBERNETES',
 		isPrivate: true,
 	},
+	{
+		path: ROUTES.METRICS_EXPLORER,
+		exact: true,
+		component: MetricsExplorer,
+		key: 'METRICS_EXPLORER',
+		isPrivate: true,
+	},
+	{
+		path: ROUTES.METRICS_EXPLORER_EXPLORER,
+		exact: true,
+		component: MetricsExplorer,
+		key: 'METRICS_EXPLORER_EXPLORER',
+		isPrivate: true,
+	},
+	{
+		path: ROUTES.METRICS_EXPLORER_VIEWS,
+		exact: true,
+		component: MetricsExplorer,
+		key: 'METRICS_EXPLORER_VIEWS',
+		isPrivate: true,
+	},
 ];
 
 export const SUPPORT_ROUTE: AppRoutes = {

frontend/src/api/Integrations/removeAwsIntegrationAccount.ts

@@ -0,0 +1,19 @@
+import axios from 'api';
+import { ErrorResponse, SuccessResponse } from 'types/api';
+
+const removeAwsIntegrationAccount = async (
+	accountId: string,
+): Promise<SuccessResponse<Record<string, never>> | ErrorResponse> => {
+	const response = await axios.post(
+		`/cloud-integrations/aws/accounts/${accountId}/disconnect`,
+	);
+
+	return {
+		statusCode: 200,
+		error: null,
+		message: response.data.status,
+		payload: response.data.data,
+	};
+};
+
+export default removeAwsIntegrationAccount;

frontend/src/api/index.ts

@@ -6,7 +6,9 @@ import loginApi from 'api/user/login';
 import afterLogin from 'AppRoutes/utils';
 import axios, { AxiosResponse, InternalAxiosRequestConfig } from 'axios';
 import { ENVIRONMENT } from 'constants/env';
+import { Events } from 'constants/events';
 import { LOCALSTORAGE } from 'constants/localStorage';
+import { eventEmitter } from 'utils/getEventEmitter';
 
 import apiV1, {
 	apiAlertManager,
@@ -18,13 +20,40 @@ import apiV1, {
 } from './apiV1';
 import { Logout } from './utils';
 
+const RESPONSE_TIMEOUT_THRESHOLD = 5000; // 5 seconds
+
 const interceptorsResponse = (
 	value: AxiosResponse<any>,
-): Promise<AxiosResponse<any>> => Promise.resolve(value);
+): Promise<AxiosResponse<any>> => {
+	if ((value.config as any)?.metadata) {
+		const duration =
+			new Date().getTime() - (value.config as any).metadata.startTime;
+
+		if (duration > RESPONSE_TIMEOUT_THRESHOLD && value.config.url !== '/event') {
+			eventEmitter.emit(Events.SLOW_API_WARNING, true, {
+				duration,
+				url: value.config.url,
+				threshold: RESPONSE_TIMEOUT_THRESHOLD,
+			});
+
+			console.warn(
+				`[API Warning] Request to ${value.config.url} took ${duration}ms`,
+			);
+		}
+	}
+
+	return Promise.resolve(value);
+};
 
 const interceptorsRequestResponse = (
 	value: InternalAxiosRequestConfig,
 ): InternalAxiosRequestConfig => {
+	// Attach metadata safely (not sent with the request)
+	Object.defineProperty(value, 'metadata', {
+		value: { startTime: new Date().getTime() },
+		enumerable: false, // Prevents it from being included in the request
+	});
+
 	const token = getLocalStorageApi(LOCALSTORAGE.AUTH_TOKEN) || '';
 
 	if (value && value.headers) {

frontend/src/api/infraMonitoring/getHostLists.ts

@@ -50,6 +50,8 @@ export interface HostListResponse {
 		total: number;
 		sentAnyHostMetricsData: boolean;
 		isSendingK8SAgentMetrics: boolean;
+		clusterNames: string[];
+		nodeNames: string[];
 	};
 }
 

frontend/src/api/infraMonitoring/getK8sEntityStatus.ts

@@ -0,0 +1,47 @@
+import axios from 'api';
+import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
+import { AxiosError } from 'axios';
+import { ErrorResponse, SuccessResponse } from 'types/api';
+
+export interface K8sRequiredMetadataFields {
+	clusterName: string;
+	nodeName: string;
+	namespaceName: string;
+	podName: string;
+	hasClusterName: boolean;
+	hasNodeName: boolean;
+	hasNamespaceName: boolean;
+	hasDeploymentName: boolean;
+	hasStatefulsetName: boolean;
+	hasDaemonsetName: boolean;
+	hasCronjobName: boolean;
+	hasJobName: boolean;
+}
+
+export interface K8sEntityStatusResponse {
+	didSendPodMetrics: boolean;
+	didSendNodeMetrics: boolean;
+	didSendClusterMetrics: boolean;
+	isSendingOptionalPodMetrics: boolean;
+	isSendingRequiredMetadata: Array<K8sRequiredMetadataFields>;
+}
+
+export const getK8sEntityStatus = async (
+	signal?: AbortSignal,
+	headers?: Record<string, string>,
+): Promise<SuccessResponse<K8sEntityStatusResponse> | ErrorResponse> => {
+	try {
+		const response = await axios.get('/infra_onboarding/k8s/status', {
+			signal,
+			headers,
+		});
+		return {
+			statusCode: 200,
+			error: null,
+			message: 'Success',
+			payload: response.data.data,
+		};
+	} catch (error) {
+		return ErrorResponseHandler(error as AxiosError);
+	}
+};

frontend/src/api/integration/aws/index.ts

@@ -0,0 +1,88 @@
+import axios from 'api';
+import {
+	CloudAccount,
+	Service,
+	ServiceData,
+	UpdateServiceConfigPayload,
+	UpdateServiceConfigResponse,
+} from 'container/CloudIntegrationPage/ServicesSection/types';
+import {
+	AccountConfigPayload,
+	AccountConfigResponse,
+	ConnectionParams,
+	ConnectionUrlResponse,
+} from 'types/api/integrations/aws';
+
+export const getAwsAccounts = async (): Promise<CloudAccount[]> => {
+	const response = await axios.get('/cloud-integrations/aws/accounts');
+
+	return response.data.data.accounts;
+};
+
+export const getAwsServices = async (
+	cloudAccountId?: string,
+): Promise<Service[]> => {
+	const params = cloudAccountId
+		? { cloud_account_id: cloudAccountId }
+		: undefined;
+	const response = await axios.get('/cloud-integrations/aws/services', {
+		params,
+	});
+
+	return response.data.data.services;
+};
+
+export const getServiceDetails = async (
+	serviceId: string,
+	cloudAccountId?: string,
+): Promise<ServiceData> => {
+	const params = cloudAccountId
+		? { cloud_account_id: cloudAccountId }
+		: undefined;
+	const response = await axios.get(
+		`/cloud-integrations/aws/services/${serviceId}`,
+		{ params },
+	);
+	return response.data.data;
+};
+
+export const generateConnectionUrl = async (params: {
+	agent_config: { region: string };
+	account_config: { regions: string[] };
+	account_id?: string;
+}): Promise<ConnectionUrlResponse> => {
+	const response = await axios.post(
+		'/cloud-integrations/aws/accounts/generate-connection-url',
+		params,
+	);
+	return response.data.data;
+};
+
+export const updateAccountConfig = async (
+	accountId: string,
+	payload: AccountConfigPayload,
+): Promise<AccountConfigResponse> => {
+	const response = await axios.post<AccountConfigResponse>(
+		`/cloud-integrations/aws/accounts/${accountId}/config`,
+		payload,
+	);
+	return response.data;
+};
+
+export const updateServiceConfig = async (
+	serviceId: string,
+	payload: UpdateServiceConfigPayload,
+): Promise<UpdateServiceConfigResponse> => {
+	const response = await axios.post<UpdateServiceConfigResponse>(
+		`/cloud-integrations/aws/services/${serviceId}/config`,
+		payload,
+	);
+	return response.data;
+};
+
+export const getConnectionParams = async (): Promise<ConnectionParams> => {
+	const response = await axios.get(
+		'/cloud-integrations/aws/accounts/generate-connection-params',
+	);
+	return response.data.data;
+};

frontend/src/components/CeleryOverview/CeleryOverviewConfigOptions/CeleryOverviewConfigOptions.tsx

@@ -1,7 +1,6 @@
 import './CeleryOverviewConfigOptions.styles.scss';
 
-import { Color } from '@signozhq/design-tokens';
-import { Button, Row, Select, Spin, Tooltip } from 'antd';
+import { Row, Select, Spin } from 'antd';
 import {
 	getValuesFromQueryParams,
 	setQueryParamsFromOptions,
@@ -10,10 +9,7 @@ import { useCeleryFilterOptions } from 'components/CeleryTask/useCeleryFilterOpt
 import { SelectMaxTagPlaceholder } from 'components/MessagingQueues/MQCommon/MQCommon';
 import { QueryParams } from 'constants/query';
 import useUrlQuery from 'hooks/useUrlQuery';
-import { Check, Share2 } from 'lucide-react';
-import { useState } from 'react';
 import { useHistory, useLocation } from 'react-router-dom';
-import { useCopyToClipboard } from 'react-use';
 
 interface SelectOptionConfig {
 	placeholder: string;
@@ -66,10 +62,6 @@ function FilterSelect({
 }
 
 function CeleryOverviewConfigOptions(): JSX.Element {
-	const [isURLCopied, setIsURLCopied] = useState(false);
-
-	const [, handleCopyToClipboard] = useCopyToClipboard();
-
 	const selectConfigs: SelectOptionConfig[] = [
 		{
 			placeholder: 'Service Name',
@@ -98,14 +90,6 @@ function CeleryOverviewConfigOptions(): JSX.Element {
 		},
 	];
 
-	const handleShareURL = (): void => {
-		handleCopyToClipboard(window.location.href);
-		setIsURLCopied(true);
-		setTimeout(() => {
-			setIsURLCopied(false);
-		}, 1000);
-	};
-
 	return (
 		<div className="celery-overview-filters">
 			<Row className="celery-filters">
@@ -118,19 +102,6 @@ function CeleryOverviewConfigOptions(): JSX.Element {
 					/>
 				))}
 			</Row>
-			<Tooltip title="Share this" arrow={false}>
-				<Button
-					className="periscope-btn copy-url-btn"
-					onClick={handleShareURL}
-					icon={
-						isURLCopied ? (
-							<Check size={14} color={Color.BG_FOREST_500} />
-						) : (
-							<Share2 size={14} />
-						)
-					}
-				/>
-			</Tooltip>
 		</div>
 	);
 }

frontend/src/components/CeleryOverview/CeleryOverviewTable/CeleryOverviewTable.styles.scss

@@ -37,7 +37,6 @@
 				font-weight: 600;
 				line-height: 18px; /* 163.636% */
 				letter-spacing: 0.44px;
-				text-transform: uppercase;
 
 				&::before {
 					background-color: transparent;

frontend/src/components/CeleryOverview/CeleryOverviewTable/CeleryOverviewTable.tsx

@@ -15,6 +15,7 @@ import {
 	Typography,
 } from 'antd';
 import { FilterDropdownProps } from 'antd/lib/table/interface';
+import logEvent from 'api/common/logEvent';
 import {
 	getQueueOverview,
 	QueueOverviewResponse,
@@ -218,35 +219,44 @@ function getColumns(data: RowData[]): TableColumnsType<RowData> {
 				showTitle: false,
 			},
 			width: 200,
-			sorter: (a: RowData, b: RowData): number =>
-				String(a.error_percentage).localeCompare(String(b.error_percentage)),
+			sorter: (a: RowData, b: RowData): number => {
+				const aValue = Number(a.error_percentage);
+				const bValue = Number(b.error_percentage);
+				return aValue - bValue;
+			},
 			render: ProgressRender,
 		},
 		{
-			title: 'LATENCY (P95)',
+			title: 'LATENCY (P95) in ms',
 			dataIndex: 'p95_latency',
 			key: 'p95_latency',
 			ellipsis: {
 				showTitle: false,
 			},
 			width: 100,
-			sorter: (a: RowData, b: RowData): number =>
-				String(a.p95_latency).localeCompare(String(b.p95_latency)),
+			sorter: (a: RowData, b: RowData): number => {
+				const aValue = Number(a.p95_latency);
+				const bValue = Number(b.p95_latency);
+				return aValue - bValue;
+			},
 			render: (value: number | string): string => {
 				if (!isNumber(value)) return value.toString();
 				return (typeof value === 'string' ? parseFloat(value) : value).toFixed(3);
 			},
 		},
 		{
-			title: 'THROUGHPUT',
+			title: 'THROUGHPUT (ops/s)',
 			dataIndex: 'throughput',
 			key: 'throughput',
 			ellipsis: {
 				showTitle: false,
 			},
 			width: 100,
-			sorter: (a: RowData, b: RowData): number =>
-				String(a.throughput).localeCompare(String(b.throughput)),
+			sorter: (a: RowData, b: RowData): number => {
+				const aValue = Number(a.throughput);
+				const bValue = Number(b.throughput);
+				return aValue - bValue;
+			},
 			render: (value: number | string): string => {
 				if (!isNumber(value)) return value.toString();
 				return (typeof value === 'string' ? parseFloat(value) : value).toFixed(3);
@@ -449,6 +459,7 @@ export default function CeleryOverviewTable({
 
 	const handleRowClick = (record: RowData): void => {
 		onRowClick(record);
+		logEvent('MQ Overview Page: Right Panel', { ...record });
 	};
 
 	const getFilteredData = useCallback(
@@ -472,6 +483,22 @@ export default function CeleryOverviewTable({
 		tableData,
 	]);
 
+	const prevTableDataRef = useRef<string>();
+
+	useEffect(() => {
+		if (tableData.length > 0) {
+			const currentTableData = JSON.stringify(tableData);
+
+			if (currentTableData !== prevTableDataRef.current) {
+				logEvent(`MQ Overview Page: List rendered`, {
+					dataRender: tableData.length,
+				});
+				prevTableDataRef.current = currentTableData;
+			}
+		}
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [JSON.stringify(tableData)]);
+
 	return (
 		<div className="celery-overview-table-container">
 			<Input.Search

frontend/src/components/CeleryTask/CeleryTaskConfigOptions/CeleryTaskConfigOptions.tsx

@@ -1,14 +1,10 @@
 import './CeleryTaskConfigOptions.styles.scss';
 
-import { Color } from '@signozhq/design-tokens';
-import { Button, Select, Spin, Tooltip, Typography } from 'antd';
+import { Select, Spin, Typography } from 'antd';
 import { SelectMaxTagPlaceholder } from 'components/MessagingQueues/MQCommon/MQCommon';
 import { QueryParams } from 'constants/query';
 import useUrlQuery from 'hooks/useUrlQuery';
-import { Check, Share2 } from 'lucide-react';
-import { useState } from 'react';
 import { useHistory, useLocation } from 'react-router-dom';
-import { useCopyToClipboard } from 'react-use';
 
 import {
 	getValuesFromQueryParams,
@@ -23,11 +19,8 @@ function CeleryTaskConfigOptions(): JSX.Element {
 	const history = useHistory();
 	const location = useLocation();
 
-	const [isURLCopied, setIsURLCopied] = useState(false);
 	const urlQuery = useUrlQuery();
 
-	const [, handleCopyToClipboard] = useCopyToClipboard();
-
 	return (
 		<div className="celery-task-filters">
 			<div className="celery-filters">
@@ -66,25 +59,6 @@ function CeleryTaskConfigOptions(): JSX.Element {
 					}}
 				/>
 			</div>
-			<Tooltip title="Share this" arrow={false}>
-				<Button
-					className="periscope-btn copy-url-btn"
-					onClick={(): void => {
-						handleCopyToClipboard(window.location.href);
-						setIsURLCopied(true);
-						setTimeout(() => {
-							setIsURLCopied(false);
-						}, 1000);
-					}}
-					icon={
-						isURLCopied ? (
-							<Check size={14} color={Color.BG_FOREST_500} />
-						) : (
-							<Share2 size={14} />
-						)
-					}
-				/>
-			</Tooltip>
 		</div>
 	);
 }

frontend/src/components/CeleryTask/CeleryTaskConfigOptions/useGetCeleryFilters.ts

@@ -1,9 +1,13 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import { DefaultOptionType } from 'antd/es/select';
 import { getAttributesValues } from 'api/queryBuilder/getAttributesValues';
+import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import { useQuery } from 'react-query';
+import { useSelector } from 'react-redux';
+import { AppState } from 'store/reducers';
 import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { DataSource } from 'types/common/queryBuilder';
+import { GlobalReducer } from 'types/reducer/globalTime';
 
 export interface Filters {
 	searchText: string;
@@ -31,8 +35,18 @@ export function useGetAllFilters(props: Filters): GetAllFiltersResponse {
 		tagType,
 	} = props;
 
+	const { minTime, maxTime } = useSelector<AppState, GlobalReducer>(
+		(state) => state.globalTime,
+	);
+
 	const { data, isLoading } = useQuery(
-		['attributesValues', attributeKey, searchText],
+		[
+			REACT_QUERY_KEY.GET_ATTRIBUTE_VALUES,
+			attributeKey,
+			searchText,
+			minTime,
+			maxTime,
+		],
 		async () => {
 			const keys = Array.isArray(attributeKey) ? attributeKey : [attributeKey];
 

frontend/src/components/CeleryTask/CeleryTaskDetail/CeleryTaskDetail.tsx

@@ -2,24 +2,17 @@ import './CeleryTaskDetail.style.scss';
 
 import { Color, Spacing } from '@signozhq/design-tokens';
 import { Divider, Drawer, Typography } from 'antd';
-import { QueryParams } from 'constants/query';
+import logEvent from 'api/common/logEvent';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import dayjs from 'dayjs';
 import { useIsDarkMode } from 'hooks/useDarkMode';
-import useUrlQuery from 'hooks/useUrlQuery';
 import { X } from 'lucide-react';
-import { useEffect, useState } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
-import { useHistory, useLocation } from 'react-router-dom';
-import { UpdateTimeInterval } from 'store/actions';
-import { AppState } from 'store/reducers';
+import { useState } from 'react';
 import { Widgets } from 'types/api/dashboard/getAll';
 import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
-import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
-import { GlobalReducer } from 'types/reducer/globalTime';
-import { v4 as uuidv4 } from 'uuid';
 
 import CeleryTaskGraph from '../CeleryTaskGraph/CeleryTaskGraph';
+import { createFiltersFromData } from '../CeleryUtils';
 import { useNavigateToTraces } from '../useNavigateToTraces';
 
 export type CeleryTaskData = {
@@ -39,40 +32,6 @@ export type CeleryTaskDetailProps = {
 	drawerOpen: boolean;
 };
 
-const createFiltersFromData = (
-	data: Record<string, any>,
-): Array<{
-	id: string;
-	key: {
-		key: string;
-		dataType: DataTypes;
-		type: string;
-		isColumn: boolean;
-		isJSON: boolean;
-		id: string;
-	};
-	op: string;
-	value: string;
-}> => {
-	const excludeKeys = ['A', 'A_without_unit'];
-
-	return Object.entries(data)
-		.filter(([key]) => !excludeKeys.includes(key))
-		.map(([key, value]) => ({
-			id: uuidv4(),
-			key: {
-				key,
-				dataType: DataTypes.String,
-				type: 'tag',
-				isColumn: false,
-				isJSON: false,
-				id: `${key}--string--tag--false`,
-			},
-			op: '=',
-			value: value.toString(),
-		}));
-};
-
 export default function CeleryTaskDetail({
 	widgetData,
 	taskData,
@@ -85,7 +44,7 @@ export default function CeleryTaskDetail({
 		!!taskData.entity && !!taskData.timeRange[0] && drawerOpen;
 
 	const formatTimestamp = (timestamp: number): string =>
-		dayjs(timestamp * 1000).format('MM-DD-YYYY hh:mm A');
+		dayjs(timestamp).format('DD-MM-YYYY hh:mm A');
 
 	const [totalTask, setTotalTask] = useState(0);
 
@@ -93,52 +52,9 @@ export default function CeleryTaskDetail({
 		setTotalTask((graphData?.result?.[0] as any)?.table?.rows.length);
 	};
 
-	// set time range
-	const { minTime, maxTime, selectedTime } = useSelector<
-		AppState,
-		GlobalReducer
-	>((state) => state.globalTime);
-
 	const startTime = taskData.timeRange[0];
 	const endTime = taskData.timeRange[1];
 
-	const urlQuery = useUrlQuery();
-	const location = useLocation();
-	const history = useHistory();
-	const dispatch = useDispatch();
-
-	useEffect(() => {
-		urlQuery.delete(QueryParams.relativeTime);
-		urlQuery.set(QueryParams.startTime, startTime.toString());
-		urlQuery.set(QueryParams.endTime, endTime.toString());
-
-		const generatedUrl = `${location.pathname}?${urlQuery.toString()}`;
-		history.replace(generatedUrl);
-
-		if (startTime !== endTime) {
-			dispatch(UpdateTimeInterval('custom', [startTime, endTime]));
-		}
-
-		return (): void => {
-			urlQuery.delete(QueryParams.relativeTime);
-			urlQuery.delete(QueryParams.startTime);
-			urlQuery.delete(QueryParams.endTime);
-
-			if (selectedTime !== 'custom') {
-				dispatch(UpdateTimeInterval(selectedTime));
-				urlQuery.set(QueryParams.relativeTime, selectedTime);
-			} else {
-				dispatch(UpdateTimeInterval('custom', [minTime / 1e6, maxTime / 1e6]));
-				urlQuery.set(QueryParams.startTime, Math.floor(minTime / 1e6).toString());
-				urlQuery.set(QueryParams.endTime, Math.floor(maxTime / 1e6).toString());
-			}
-
-			const generatedUrl = `${location.pathname}?${urlQuery.toString()}`;
-			history.replace(generatedUrl);
-		};
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, []);
-
 	const navigateToTrace = useNavigateToTraces();
 
 	return (
@@ -149,10 +65,8 @@ export default function CeleryTaskDetail({
 					<Typography.Text className="title">{`Details - ${taskData.entity}`}</Typography.Text>
 					<div>
 						<Typography.Text className="subtitle">
-							{`${formatTimestamp(taskData.timeRange[0])} ${
-								taskData.timeRange[1]
-									? `- ${formatTimestamp(taskData.timeRange[1])}`
-									: ''
+							{`${formatTimestamp(startTime)} ${
+								endTime ? `- ${formatTimestamp(endTime)}` : ''
 							}`}
 						</Typography.Text>
 						<Divider type="vertical" />
@@ -185,8 +99,16 @@ export default function CeleryTaskDetail({
 						...rowData,
 						[taskData.entity]: taskData.value,
 					});
-					navigateToTrace(filters);
+					logEvent('MQ Celery: navigation to trace page', {
+						filters,
+						startTime,
+						endTime,
+						source: widgetData.title,
+					});
+					navigateToTrace(filters, startTime, endTime);
 				}}
+				start={startTime}
+				end={endTime}
 			/>
 		</Drawer>
 	);

frontend/src/components/CeleryTask/CeleryTaskGraph/CeleryTaskBar.tsx

@@ -3,14 +3,12 @@ import './CeleryTaskGraph.style.scss';
 import { Color } from '@signozhq/design-tokens';
 import { QueryParams } from 'constants/query';
 import { PANEL_TYPES } from 'constants/queryBuilder';
-import { themeColors } from 'constants/theme';
 import { ViewMenuAction } from 'container/GridCardLayout/config';
 import GridCard from 'container/GridCardLayout/GridCard';
 import { Card } from 'container/GridCardLayout/styles';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import useUrlQuery from 'hooks/useUrlQuery';
-import getLabelName from 'lib/getLabelName';
-import { generateColor } from 'lib/uPlotLib/utils/generateColor';
+import { isEmpty } from 'lodash-es';
 import { getStartAndEndTimesInMilliseconds } from 'pages/MessagingQueues/MessagingQueuesUtils';
 import { useCallback, useMemo, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
@@ -18,11 +16,14 @@ import { useHistory, useLocation } from 'react-router-dom';
 import { UpdateTimeInterval } from 'store/actions';
 import { AppState } from 'store/reducers';
 import { Widgets } from 'types/api/dashboard/getAll';
-import { QueryData } from 'types/api/widgets/getQuery';
 import { GlobalReducer } from 'types/reducer/globalTime';
 
 import { CaptureDataProps } from '../CeleryTaskDetail/CeleryTaskDetail';
-import { paths } from '../CeleryUtils';
+import {
+	applyCeleryFilterOnWidgetData,
+	getFiltersFromQueryParams,
+} from '../CeleryUtils';
+import { useGetGraphCustomSeries } from '../useGetGraphCustomSeries';
 import {
 	celeryAllStateWidgetData,
 	celeryFailedStateWidgetData,
@@ -41,10 +42,12 @@ import {
 function CeleryTaskBar({
 	onClick,
 	queryEnabled,
+	checkIfDataExists,
 }: {
 	onClick?: (task: CaptureDataProps) => void;
 
 	queryEnabled: boolean;
+	checkIfDataExists?: (isDataAvailable: boolean) => void;
 }): JSX.Element {
 	const history = useHistory();
 	const { pathname } = useLocation();
@@ -75,26 +78,60 @@ function CeleryTaskBar({
 
 	const [barState, setBarState] = useState<CeleryTaskState>(CeleryTaskState.All);
 
+	const selectedFilters = useMemo(
+		() =>
+			getFiltersFromQueryParams(
+				QueryParams.taskName,
+				urlQuery,
+				'celery.task_name',
+			),
+		[urlQuery],
+	);
+
 	const celeryAllStateData = useMemo(
 		() => celeryAllStateWidgetData(minTime, maxTime),
 		[minTime, maxTime],
 	);
 
+	const celeryAllStateFilteredData = useMemo(
+		() =>
+			applyCeleryFilterOnWidgetData(selectedFilters || [], celeryAllStateData),
+		[selectedFilters, celeryAllStateData],
+	);
+
 	const celeryFailedStateData = useMemo(
 		() => celeryFailedStateWidgetData(minTime, maxTime),
 		[minTime, maxTime],
 	);
 
+	const celeryFailedStateFilteredData = useMemo(
+		() =>
+			applyCeleryFilterOnWidgetData(selectedFilters || [], celeryFailedStateData),
+		[selectedFilters, celeryFailedStateData],
+	);
+
 	const celeryRetryStateData = useMemo(
 		() => celeryRetryStateWidgetData(minTime, maxTime),
 		[minTime, maxTime],
 	);
 
+	const celeryRetryStateFilteredData = useMemo(
+		() =>
+			applyCeleryFilterOnWidgetData(selectedFilters || [], celeryRetryStateData),
+		[selectedFilters, celeryRetryStateData],
+	);
+
 	const celerySuccessStateData = useMemo(
 		() => celerySuccessStateWidgetData(minTime, maxTime),
 		[minTime, maxTime],
 	);
 
+	const celerySuccessStateFilteredData = useMemo(
+		() =>
+			applyCeleryFilterOnWidgetData(selectedFilters || [], celerySuccessStateData),
+		[selectedFilters, celerySuccessStateData],
+	);
+
 	const onGraphClick = (
 		widgetData: Widgets,
 		xValue: number,
@@ -114,58 +151,26 @@ function CeleryTaskBar({
 			string,
 		];
 
-		onClick?.({
-			entity,
-			value,
-			timeRange: [start, end],
-			widgetData,
-		});
+		if (!isEmpty(entity) || !isEmpty(value)) {
+			onClick?.({
+				entity,
+				value,
+				timeRange: [start, end],
+				widgetData,
+			});
+		}
 	};
 
-	const getGraphSeries = (color: string, label: string): any => ({
+	const { getCustomSeries } = useGetGraphCustomSeries({
+		isDarkMode,
 		drawStyle: 'bars',
-		paths,
-		lineInterpolation: 'spline',
-		show: true,
-		label,
-		fill: `${color}90`,
-		stroke: color,
-		width: 2,
-		spanGaps: true,
-		points: {
-			size: 5,
-			show: false,
-			stroke: color,
+		colorMapping: {
+			SUCCESS: Color.BG_FOREST_500,
+			FAILURE: Color.BG_CHERRY_500,
+			RETRY: Color.BG_AMBER_400,
 		},
 	});
 
-	const customSeries = (data: QueryData[]): uPlot.Series[] => {
-		const configurations: uPlot.Series[] = [
-			{ label: 'Timestamp', stroke: 'purple' },
-		];
-		for (let i = 0; i < data.length; i += 1) {
-			const { metric = {}, queryName = '', legend = '' } = data[i] || {};
-			const label = getLabelName(metric, queryName || '', legend || '');
-			let color = generateColor(
-				label,
-				isDarkMode ? themeColors.chartcolors : themeColors.lightModeColor,
-			);
-			if (label === 'SUCCESS') {
-				color = Color.BG_FOREST_500;
-			}
-			if (label === 'FAILURE') {
-				color = Color.BG_CHERRY_500;
-			}
-
-			if (label === 'RETRY') {
-				color = Color.BG_AMBER_400;
-			}
-			const series = getGraphSeries(color, label);
-			configurations.push(series);
-		}
-		return configurations;
-	};
-
 	return (
 		<Card
 			isDarkMode={isDarkMode}
@@ -176,50 +181,51 @@ function CeleryTaskBar({
 			<div className="celery-task-graph-grid-content">
 				{barState === CeleryTaskState.All && (
 					<GridCard
-						widget={celeryAllStateData}
+						widget={celeryAllStateFilteredData}
 						headerMenuList={[...ViewMenuAction]}
 						onDragSelect={onDragSelect}
 						isQueryEnabled={queryEnabled}
 						onClickHandler={(...args): void =>
 							onGraphClick(celerySlowestTasksTableWidgetData, ...args)
 						}
-						customSeries={customSeries}
+						customSeries={getCustomSeries}
+						dataAvailable={checkIfDataExists}
 					/>
 				)}
 				{barState === CeleryTaskState.Failed && (
 					<GridCard
-						widget={celeryFailedStateData}
+						widget={celeryFailedStateFilteredData}
 						headerMenuList={[...ViewMenuAction]}
 						onDragSelect={onDragSelect}
 						isQueryEnabled={queryEnabled}
 						onClickHandler={(...args): void =>
 							onGraphClick(celeryFailedTasksTableWidgetData, ...args)
 						}
-						customSeries={customSeries}
+						customSeries={getCustomSeries}
 					/>
 				)}
 				{barState === CeleryTaskState.Retry && (
 					<GridCard
-						widget={celeryRetryStateData}
+						widget={celeryRetryStateFilteredData}
 						headerMenuList={[...ViewMenuAction]}
 						onDragSelect={onDragSelect}
 						isQueryEnabled={queryEnabled}
 						onClickHandler={(...args): void =>
 							onGraphClick(celeryRetryTasksTableWidgetData, ...args)
 						}
-						customSeries={customSeries}
+						customSeries={getCustomSeries}
 					/>
 				)}
 				{barState === CeleryTaskState.Successful && (
 					<GridCard
-						widget={celerySuccessStateData}
+						widget={celerySuccessStateFilteredData}
 						headerMenuList={[...ViewMenuAction]}
 						onDragSelect={onDragSelect}
 						isQueryEnabled={queryEnabled}
 						onClickHandler={(...args): void =>
 							onGraphClick(celerySuccessTasksTableWidgetData, ...args)
 						}
-						customSeries={customSeries}
+						customSeries={getCustomSeries}
 					/>
 				)}
 			</div>
@@ -229,6 +235,7 @@ function CeleryTaskBar({
 
 CeleryTaskBar.defaultProps = {
 	onClick: (): void => {},
+	checkIfDataExists: undefined,
 };
 
 export default CeleryTaskBar;

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

@@ -6,93 +6,85 @@
 	padding-bottom: 16px;
 	margin-bottom: 16px;
 
-	.celery-task-graph-grid {
-		display: grid;
-		grid-template-columns: 60% 40%;
-		align-items: flex-start;
-		gap: 10px;
+	.celery-task-graph-bar,
+	.celery-task-graph-task-latency {
+		height: 380px !important;
 		width: 100%;
+		box-sizing: border-box;
 
-		.celery-task-graph {
-			height: 380px !important;
+		.celery-task-graph-grid-content {
 			padding: 6px;
-			width: 100%;
-			box-sizing: border-box;
+			height: 100%;
+		}
 
-			.ant-card-body {
-				height: calc(100% - 18px);
+		.ant-card-body {
+			height: calc(100% - 18px);
 
-				.widget-graph-container {
-					&.bar {
-						height: calc(100% - 110px);
-					}
+			.widget-graph-container {
+				&.bar {
+					height: calc(100% - 110px);
+				}
+
+				&.graph {
+					height: calc(100% - 80px);
 				}
 			}
 		}
+	}
 
-		.celery-task-graph-worker-count {
+	.celery-task-graph-worker-count {
+		height: 100%;
+		width: 100%;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		border: 1px solid var(--bg-slate-500);
+		background: linear-gradient(
+				0deg,
+				rgba(171, 189, 255, 0) 0%,
+				rgba(171, 189, 255, 0) 100%
+			),
+			#0b0c0e;
+
+		.ant-card-body {
 			height: 100%;
 			width: 100%;
+		}
+
+		.worker-count-text-container {
+			height: 100%;
 			display: flex;
 			justify-content: center;
 			align-items: center;
-			border: 1px solid var(--bg-slate-500);
-			background: linear-gradient(
-					0deg,
-					rgba(171, 189, 255, 0) 0%,
-					rgba(171, 189, 255, 0) 100%
-				),
-				#0b0c0e;
 
-			.ant-card-body {
-				height: 100%;
-				width: 100%;
-			}
-
-			.worker-count-text-container {
-				height: 100%;
-				display: flex;
-				justify-content: center;
-				align-items: center;
-
-				.celery-task-graph-worker-count-text {
-					font-size: 2.5vw;
-					text-align: center;
-				}
-			}
-
-			.worker-count-header {
-				display: flex;
-				justify-content: start;
-				align-items: start;
-				position: absolute;
-				height: 100%;
-				width: 100%;
+			.celery-task-graph-worker-count-text {
+				font-size: 2.5vw;
+				text-align: center;
 			}
 		}
 
-		.celery-task-graph-bar,
-		.celery-task-graph-task-latency {
-			height: 380px !important;
+		.worker-count-header {
+			display: flex;
+			justify-content: start;
+			align-items: start;
+			position: absolute;
+			height: 100%;
 			width: 100%;
-			box-sizing: border-box;
+		}
+	}
 
-			.celery-task-graph-grid-content {
-				padding: 6px;
-				height: 100%;
-			}
+	.celery-task-graph {
+		height: 380px !important;
+		padding: 6px;
+		width: 100%;
+		box-sizing: border-box;
 
-			.ant-card-body {
-				height: calc(100% - 18px);
+		.ant-card-body {
+			height: calc(100% - 18px);
 
-				.widget-graph-container {
-					&.bar {
-						height: calc(100% - 110px);
-					}
-
-					&.graph {
-						height: calc(100% - 80px);
-					}
+			.widget-graph-container {
+				&.bar {
+					height: calc(100% - 110px);
 				}
 			}
 		}
@@ -116,6 +108,89 @@
 			}
 		}
 	}
+
+	.metric-based-graphs,
+	.trace-based-graphs {
+		display: flex;
+		flex-direction: column;
+		gap: 10px;
+
+		.metric-page-grid {
+			display: flex;
+			flex-direction: row;
+			gap: 10px;
+			width: 100%;
+
+			.celery-task-graph {
+				height: 280px !important;
+			}
+		}
+	}
+
+	.trace-based-graphs {
+		.trace-based-graphs-header {
+			display: grid;
+			grid-template-columns: 50% 50%;
+			align-items: center;
+			gap: 24px;
+			width: 100%;
+		}
+	}
+
+	.configure-option-Info {
+		display: grid;
+		grid-template-columns: max-content 1fr;
+		gap: 16px;
+		align-items: center;
+
+		border: 1px dashed var(--bg-slate-50);
+		border-radius: 4px;
+		padding: 6px 24px 6px 12px;
+		width: max-content;
+
+		.configure-option-Info-text {
+			color: var(--bg-vanilla-400);
+			font-size: 12px;
+			font-weight: 400;
+		}
+	}
+
+	.row-panel {
+		border-radius: 4px;
+		background: rgba(18, 19, 23, 0.4);
+		padding: 8px;
+		display: flex;
+		gap: 6px;
+		align-items: center;
+		height: 48px !important;
+		width: 100%;
+
+		.ant-typography {
+			font-size: 14px;
+			font-weight: 500;
+		}
+
+		.row-panel-section {
+			display: flex;
+			gap: 6px;
+			align-items: center;
+
+			.row-icon {
+				color: var(--bg-vanilla-400);
+				cursor: pointer;
+			}
+
+			.section-title {
+				color: var(--bg-vanilla-400);
+				font-family: Inter;
+				font-size: 14px;
+				font-style: normal;
+				font-weight: 400;
+				line-height: 20px;
+				letter-spacing: -0.07px;
+			}
+		}
+	}
 }
 
 .celery-task-states {
@@ -170,11 +245,13 @@
 
 .lightMode {
 	.celery-task-graph-grid-container {
-		.celery-task-graph-grid {
-			.celery-task-graph-worker-count {
-				border: 1px solid var(--bg-vanilla-300);
-				background: unset;
-			}
+		.celery-task-graph-worker-count {
+			border: 1px solid var(--bg-vanilla-300);
+			background: unset;
+		}
+
+		.row-panel .row-panel-section .section-title {
+			color: var(--bg-ink-400);
 		}
 	}
 
@@ -203,4 +280,8 @@
 			background-color: var(--bg-ink-400);
 		}
 	}
+
+	.configure-option-Info {
+		border: 1px dashed var(--bg-robin-400);
+	}
 }

frontend/src/components/CeleryTask/CeleryTaskGraph/CeleryTaskGraph.tsx

@@ -32,6 +32,11 @@ function CeleryTaskGraph({
 	openTracesButton,
 	onOpenTraceBtnClick,
 	applyCeleryTaskFilter,
+	customErrorMessage,
+	start,
+	end,
+	checkIfDataExists,
+	analyticsEvent,
 }: {
 	widgetData: Widgets;
 	onClick?: (task: CaptureDataProps) => void;
@@ -42,6 +47,11 @@ function CeleryTaskGraph({
 	openTracesButton?: boolean;
 	onOpenTraceBtnClick?: (record: RowData) => void;
 	applyCeleryTaskFilter?: boolean;
+	customErrorMessage?: string;
+	start?: number;
+	end?: number;
+	checkIfDataExists?: (isDataAvailable: boolean) => void;
+	analyticsEvent?: string;
 }): JSX.Element {
 	const history = useHistory();
 	const { pathname } = useLocation();
@@ -116,6 +126,11 @@ function CeleryTaskGraph({
 				openTracesButton={openTracesButton}
 				onOpenTraceBtnClick={onOpenTraceBtnClick}
 				version={ENTITY_VERSION_V4}
+				customErrorMessage={customErrorMessage}
+				start={start}
+				end={end}
+				dataAvailable={checkIfDataExists}
+				analyticsEvent={analyticsEvent}
 			/>
 		</Card>
 	);
@@ -129,6 +144,11 @@ CeleryTaskGraph.defaultProps = {
 	openTracesButton: false,
 	onOpenTraceBtnClick: undefined,
 	applyCeleryTaskFilter: false,
+	customErrorMessage: undefined,
+	start: undefined,
+	end: undefined,
+	checkIfDataExists: undefined,
+	analyticsEvent: undefined,
 };
 
 export default CeleryTaskGraph;

frontend/src/components/CeleryTask/CeleryTaskGraph/CeleryTaskGraphGrid.tsx

@@ -1,7 +1,11 @@
 import './CeleryTaskGraph.style.scss';
 
 import { Card, Typography } from 'antd';
-import { useMemo } from 'react';
+import logEvent from 'api/common/logEvent';
+import { CardContainer } from 'container/GridCardLayout/styles';
+import { useIsDarkMode } from 'hooks/useDarkMode';
+import { ChevronDown, ChevronUp } from 'lucide-react';
+import { useMemo, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { AppState } from 'store/reducers';
 import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
@@ -23,9 +27,11 @@ import CeleryTaskLatencyGraph from './CeleryTaskLatencyGraph';
 export default function CeleryTaskGraphGrid({
 	onClick,
 	queryEnabled,
+	configureOptionComponent,
 }: {
 	onClick: (task: CaptureDataProps) => void;
 	queryEnabled: boolean;
+	configureOptionComponent?: React.ReactNode;
 }): JSX.Element {
 	const { minTime, maxTime } = useSelector<AppState, GlobalReducer>(
 		(state) => state.globalTime,
@@ -71,44 +77,151 @@ export default function CeleryTaskGraphGrid({
 		DataTypes.String,
 		'tag',
 	);
+	const isDarkMode = useIsDarkMode();
+
+	const [collapsedSections, setCollapsedSections] = useState<{
+		[key: string]: boolean;
+	}>({
+		metricBasedGraphs: false,
+		traceBasedGraphs: false,
+	});
+
+	const toggleCollapse = (key: string): void => {
+		setCollapsedSections((prev) => ({
+			...prev,
+			[key]: !prev[key],
+		}));
+	};
+
+	const checkIfDataExists = (isDataAvailable: boolean, title: string): void => {
+		if (isDataAvailable) {
+			logEvent(`MQ Celery: ${title} data exists`, {
+				graph: title,
+				isDataAvailable,
+			});
+		}
+	};
 
 	return (
 		<div className="celery-task-graph-grid-container">
-			<div className="celery-task-graph-grid">
-				<CeleryTaskBar queryEnabled={queryEnabled} onClick={onClick} />
-				<Card className="celery-task-graph-worker-count">
-					<div className="worker-count-header">
-						<Typography.Text className="worker-count-header-text">
-							Worker Count
+			<div className="metric-based-graphs">
+				<CardContainer className="row-card" isDarkMode={isDarkMode}>
+					<div className="row-panel">
+						<div className="row-panel-section">
+							<Typography.Text className="section-title">
+								Flower Metrics
+							</Typography.Text>
+							{collapsedSections.metricBasedGraphs ? (
+								<ChevronDown
+									size={14}
+									onClick={(): void => toggleCollapse('metricBasedGraphs')}
+									className="row-icon"
+								/>
+							) : (
+								<ChevronUp
+									size={14}
+									onClick={(): void => toggleCollapse('metricBasedGraphs')}
+									className="row-icon"
+								/>
+							)}
+						</div>
+					</div>
+				</CardContainer>
+				{!collapsedSections.metricBasedGraphs && (
+					<div className="metric-page-grid">
+						<CeleryTaskGraph
+							key={celeryActiveTasksData.id}
+							widgetData={celeryActiveTasksData}
+							queryEnabled={queryEnabled}
+							customErrorMessage="Enable Flower metrics to view this graph"
+							checkIfDataExists={(isDataAvailable): void =>
+								checkIfDataExists(isDataAvailable, 'Active Tasks by worker')
+							}
+							analyticsEvent="MQ Celery: Flower metric not enabled"
+						/>
+						<Card className="celery-task-graph-worker-count">
+							<div className="worker-count-header">
+								<Typography.Text className="worker-count-header-text">
+									Worker Online
+								</Typography.Text>
+							</div>
+							<div className="worker-count-text-container">
+								<Typography.Text className="celery-task-graph-worker-count-text">
+									{options.filter((option) => option.value).length}
+								</Typography.Text>
+							</div>
+						</Card>
+					</div>
+				)}
+			</div>
+			<div className="trace-based-graphs">
+				<div className="trace-based-graphs-header">
+					<CardContainer className="row-card" isDarkMode={isDarkMode}>
+						<div className="row-panel">
+							<div className="row-panel-section">
+								<Typography.Text className="section-title">
+									Span Based Stats
+								</Typography.Text>
+								{collapsedSections.traceBasedGraphs ? (
+									<ChevronDown
+										size={14}
+										onClick={(): void => toggleCollapse('traceBasedGraphs')}
+										className="row-icon"
+									/>
+								) : (
+									<ChevronUp
+										size={14}
+										onClick={(): void => toggleCollapse('traceBasedGraphs')}
+										className="row-icon"
+									/>
+								)}
+							</div>
+						</div>
+					</CardContainer>
+					<div className="configure-option-Info">
+						{configureOptionComponent}
+						<Typography.Text className="configure-option-Info-text">
+							Click on a graph co-ordinate to see more details
 						</Typography.Text>
 					</div>
-					<div className="worker-count-text-container">
-						<Typography.Text className="celery-task-graph-worker-count-text">
-							{options.filter((option) => option.value).length}
-						</Typography.Text>
-					</div>
-				</Card>
-			</div>
-			<div className="celery-task-graph-grid">
-				<CeleryTaskLatencyGraph onClick={onClick} queryEnabled={queryEnabled} />
-				<CeleryTaskGraph
-					key={celeryActiveTasksData.id}
-					widgetData={celeryActiveTasksData}
-					queryEnabled={queryEnabled}
-				/>
-			</div>
-			<div className="celery-task-graph-grid-bottom">
-				{bottomWidgetData.map((widgetData, index) => (
-					<CeleryTaskGraph
-						key={widgetData.id}
-						widgetData={widgetData}
-						onClick={onClick}
-						queryEnabled={queryEnabled}
-						rightPanelTitle={rightPanelTitle[index]}
-						applyCeleryTaskFilter
-					/>
-				))}
+				</div>
+				{!collapsedSections.traceBasedGraphs && (
+					<>
+						<CeleryTaskBar
+							queryEnabled={queryEnabled}
+							onClick={onClick}
+							checkIfDataExists={(isDataAvailable): void =>
+								checkIfDataExists(isDataAvailable, 'State Graph')
+							}
+						/>
+						<CeleryTaskLatencyGraph
+							queryEnabled={queryEnabled}
+							checkIfDataExists={(isDataAvailable): void =>
+								checkIfDataExists(isDataAvailable, 'Task Latency')
+							}
+						/>
+						<div className="celery-task-graph-grid-bottom">
+							{bottomWidgetData.map((widgetData, index) => (
+								<CeleryTaskGraph
+									key={widgetData.id}
+									widgetData={widgetData}
+									onClick={onClick}
+									queryEnabled={queryEnabled}
+									rightPanelTitle={rightPanelTitle[index]}
+									applyCeleryTaskFilter
+									checkIfDataExists={(isDataAvailable): void =>
+										checkIfDataExists(isDataAvailable, rightPanelTitle[index])
+									}
+								/>
+							))}
+						</div>
+					</>
+				)}
 			</div>
 		</div>
 	);
 }
+
+CeleryTaskGraphGrid.defaultProps = {
+	configureOptionComponent: null,
+};

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

@@ -42,21 +42,7 @@ export const celeryAllStateWidgetData = (
 					disabled: false,
 					expression: 'A',
 					filters: {
-						items: [
-							{
-								id: uuidv4(),
-								key: {
-									dataType: DataTypes.String,
-									id: 'celery.task_name--string--tag--false',
-									isColumn: false,
-									isJSON: false,
-									key: 'celery.task_name',
-									type: 'tag',
-								},
-								op: '=',
-								value: 'tasks.tasks.divide',
-							},
-						],
+						items: [],
 						op: 'AND',
 					},
 					functions: [],
@@ -113,7 +99,7 @@ export const celeryRetryStateWidgetData = (
 					filters: {
 						items: [
 							{
-								id: '6d97eed3',
+								id: uuidv4(),
 								key: {
 									dataType: DataTypes.String,
 									id: 'celery.state--string--tag--false',
@@ -179,7 +165,7 @@ export const celeryFailedStateWidgetData = (
 					filters: {
 						items: [
 							{
-								id: '5983eae2',
+								id: uuidv4(),
 								key: {
 									dataType: DataTypes.String,
 									id: 'celery.state--string--tag--false',
@@ -245,7 +231,7 @@ export const celerySuccessStateWidgetData = (
 					filters: {
 						items: [
 							{
-								id: '000c5a93',
+								id: uuidv4(),
 								key: {
 									dataType: DataTypes.String,
 									id: 'celery.state--string--tag--false',
@@ -332,6 +318,7 @@ export const celeryTasksByWorkerWidgetData = (
 					timeAggregation: 'rate',
 				},
 			],
+			yAxisUnit: 'cps',
 		}),
 	);
 
@@ -345,44 +332,103 @@ export const celeryErrorByWorkerWidgetData = (
 			description: 'Represents the number of errors by each worker.',
 			queryData: [
 				{
+					dataSource: DataSource.TRACES,
+					queryName: 'A',
+					aggregateOperator: 'count_distinct',
 					aggregateAttribute: {
-						dataType: DataTypes.String,
-						id: '------false',
-						isColumn: false,
+						dataType: 'string',
+						id: 'span_id--string----true',
+						isColumn: true,
 						isJSON: false,
-						key: '',
+						key: 'span_id',
 						type: '',
 					},
-					aggregateOperator: 'rate',
-					dataSource: DataSource.TRACES,
-					disabled: false,
-					expression: 'A',
+					timeAggregation: 'count_distinct',
+					spaceAggregation: 'sum',
+					functions: [],
 					filters: {
-						items: [],
+						items: [
+							{
+								id: uuidv4(),
+								key: {
+									dataType: DataTypes.bool,
+									id: 'has_error--bool----true',
+									isColumn: true,
+									isJSON: false,
+									key: 'has_error',
+									type: '',
+								},
+								op: '=',
+								value: 'true',
+							},
+						],
 						op: 'AND',
 					},
-					functions: [],
+					expression: 'A',
+					disabled: true,
+					stepInterval: getStepInterval(startTime, endTime),
+					having: [],
+					limit: null,
+					orderBy: [],
 					groupBy: [
 						{
 							dataType: DataTypes.String,
-							id: 'celery.hostname--string--tag--false',
 							isColumn: false,
 							isJSON: false,
 							key: 'celery.hostname',
 							type: 'tag',
+							id: 'celery.hostname--string--tag--false',
 						},
 					],
-					having: [],
-					legend: '{{celery.hostname}}',
-					limit: 10,
-					orderBy: [],
-					queryName: 'A',
+					legend: '',
 					reduceTo: 'avg',
-					spaceAggregation: 'sum',
-					stepInterval: getStepInterval(startTime, endTime),
-					timeAggregation: 'rate',
 				},
+				{
+					dataSource: 'traces',
+					queryName: 'B',
+					aggregateOperator: 'count_distinct',
+					aggregateAttribute: {
+						dataType: 'string',
+						id: 'span_id--string----true',
+						isColumn: true,
+						isJSON: false,
+						key: 'span_id',
+						type: '',
+					},
+					timeAggregation: 'count_distinct',
+					spaceAggregation: 'sum',
+					functions: [],
+					filters: {
+						items: [],
+						op: 'AND',
+					},
+					expression: 'B',
+					disabled: true,
+					stepInterval: getStepInterval(startTime, endTime),
+					having: [],
+					limit: null,
+					orderBy: [],
+					groupBy: [
+						{
+							dataType: DataTypes.String,
+							isColumn: false,
+							isJSON: false,
+							key: 'celery.hostname',
+							type: 'tag',
+							id: 'celery.hostname--string--tag--false',
+						},
+					],
+					legend: '',
+					reduceTo: 'avg',
+				},
+				{
+					queryName: 'F1',
+					expression: '(A/B)*100',
+					disabled: false,
+					legend: '{{celery.hostname}}',
+				} as any,
 			],
+			yAxisUnit: 'percent',
 		}),
 	);
 
@@ -392,7 +438,7 @@ export const celeryLatencyByWorkerWidgetData = (
 ): Widgets =>
 	getWidgetQueryBuilder(
 		getWidgetQuery({
-			title: 'Latency by Worker',
+			title: 'Latency by worker',
 			description: 'Represents the latency of tasks by each worker.',
 			queryData: [
 				{
@@ -444,7 +490,7 @@ export const celeryActiveTasksWidgetData = (
 ): Widgets =>
 	getWidgetQueryBuilder(
 		getWidgetQuery({
-			title: 'Tasks/ worker (Active tasks)',
+			title: 'Active Tasks by worker',
 			description: 'Represents the number of active tasks.',
 			queryData: [
 				{
@@ -487,6 +533,7 @@ export const celeryActiveTasksWidgetData = (
 					timeAggregation: 'latest',
 				},
 			],
+			yAxisUnit: 'cps',
 		}),
 	);
 
@@ -541,7 +588,7 @@ export const celeryTaskLatencyWidgetData = (
 					reduceTo: 'avg',
 					spaceAggregation: 'sum',
 					stepInterval: getStepInterval(startTime, endTime),
-					timeAggregation: 'p99',
+					timeAggregation: type || 'p99',
 				},
 			],
 			yAxisUnit: 'ns',
@@ -625,7 +672,7 @@ export const celeryRetryTasksTableWidgetData = getWidgetQueryBuilder(
 				filters: {
 					items: [
 						{
-							id: '9e09c9ed',
+							id: uuidv4(),
 							key: {
 								dataType: DataTypes.String,
 								id: 'celery.state--string--tag--false',
@@ -694,7 +741,7 @@ export const celeryFailedTasksTableWidgetData = getWidgetQueryBuilder(
 				filters: {
 					items: [
 						{
-							id: '2330f906',
+							id: uuidv4(),
 							key: {
 								dataType: DataTypes.String,
 								id: 'celery.state--string--tag--false',
@@ -761,7 +808,7 @@ export const celerySuccessTasksTableWidgetData = getWidgetQueryBuilder(
 				filters: {
 					items: [
 						{
-							id: 'ec3df7b7',
+							id: uuidv4(),
 							key: {
 								dataType: DataTypes.String,
 								id: 'celery.state--string--tag--false',
@@ -884,33 +931,19 @@ export const celeryAllStateCountWidgetData = getWidgetQueryBuilder(
 		queryData: [
 			{
 				aggregateAttribute: {
-					dataType: DataTypes.EMPTY,
-					id: '------false',
-					isColumn: false,
+					dataType: DataTypes.String,
+					id: 'span_id--string----true',
+					isColumn: true,
 					isJSON: false,
-					key: '',
+					key: 'span_id',
 					type: '',
 				},
-				aggregateOperator: 'count',
+				aggregateOperator: 'count_distinct',
 				dataSource: DataSource.TRACES,
 				disabled: false,
 				expression: 'A',
 				filters: {
-					items: [
-						{
-							id: uuidv4(),
-							key: {
-								dataType: DataTypes.String,
-								id: 'celery.task_name--string--tag--false',
-								isColumn: false,
-								isJSON: false,
-								key: 'celery.task_name',
-								type: 'tag',
-							},
-							op: '=',
-							value: 'tasks.tasks.divide',
-						},
-					],
+					items: [],
 					op: 'AND',
 				},
 				functions: [],
@@ -920,10 +953,10 @@ export const celeryAllStateCountWidgetData = getWidgetQueryBuilder(
 				limit: null,
 				orderBy: [],
 				queryName: 'A',
-				reduceTo: 'avg',
+				reduceTo: 'last',
 				spaceAggregation: 'sum',
 				stepInterval: 60,
-				timeAggregation: 'rate',
+				timeAggregation: 'count_distinct',
 			},
 		],
 	}),
@@ -937,14 +970,14 @@ export const celerySuccessStateCountWidgetData = getWidgetQueryBuilder(
 		queryData: [
 			{
 				aggregateAttribute: {
-					dataType: DataTypes.EMPTY,
-					id: '------false',
-					isColumn: false,
+					dataType: DataTypes.String,
+					id: 'span_id--string----true',
+					isColumn: true,
 					isJSON: false,
-					key: '',
+					key: 'span_id',
 					type: '',
 				},
-				aggregateOperator: 'count',
+				aggregateOperator: 'count_distinct',
 				dataSource: DataSource.TRACES,
 				disabled: false,
 				expression: 'A',
@@ -973,10 +1006,10 @@ export const celerySuccessStateCountWidgetData = getWidgetQueryBuilder(
 				limit: null,
 				orderBy: [],
 				queryName: 'A',
-				reduceTo: 'avg',
+				reduceTo: 'last',
 				spaceAggregation: 'sum',
 				stepInterval: 60,
-				timeAggregation: 'rate',
+				timeAggregation: 'count_distinct',
 			},
 		],
 	}),
@@ -990,14 +1023,14 @@ export const celeryFailedStateCountWidgetData = getWidgetQueryBuilder(
 		queryData: [
 			{
 				aggregateAttribute: {
-					dataType: DataTypes.EMPTY,
-					id: '------false',
-					isColumn: false,
+					dataType: DataTypes.String,
+					id: 'span_id--string----true',
+					isColumn: true,
 					isJSON: false,
-					key: '',
+					key: 'span_id',
 					type: '',
 				},
-				aggregateOperator: 'count',
+				aggregateOperator: 'count_distinct',
 				dataSource: DataSource.TRACES,
 				disabled: false,
 				expression: 'A',
@@ -1026,10 +1059,10 @@ export const celeryFailedStateCountWidgetData = getWidgetQueryBuilder(
 				limit: null,
 				orderBy: [],
 				queryName: 'A',
-				reduceTo: 'avg',
+				reduceTo: 'last',
 				spaceAggregation: 'sum',
 				stepInterval: 60,
-				timeAggregation: 'rate',
+				timeAggregation: 'count_distinct',
 			},
 		],
 	}),
@@ -1043,13 +1076,13 @@ export const celeryRetryStateCountWidgetData = getWidgetQueryBuilder(
 		queryData: [
 			{
 				aggregateAttribute: {
-					dataType: DataTypes.EMPTY,
-					id: '------false',
-					isColumn: false,
-					key: '',
+					dataType: DataTypes.String,
+					id: 'span_id--string----true',
+					isColumn: true,
+					key: 'span_id',
 					type: '',
 				},
-				aggregateOperator: 'count',
+				aggregateOperator: 'count_distinct',
 				dataSource: DataSource.TRACES,
 				disabled: false,
 				expression: 'A',
@@ -1078,10 +1111,10 @@ export const celeryRetryStateCountWidgetData = getWidgetQueryBuilder(
 				limit: null,
 				orderBy: [],
 				queryName: 'A',
-				reduceTo: 'avg',
+				reduceTo: 'last',
 				spaceAggregation: 'sum',
 				stepInterval: 60,
-				timeAggregation: 'rate',
+				timeAggregation: 'count_distinct',
 			},
 		],
 	}),

frontend/src/components/CeleryTask/CeleryTaskGraph/CeleryTaskLatencyGraph.tsx

@@ -1,13 +1,17 @@
 import './CeleryTaskGraph.style.scss';
 
 import { Col, Row } from 'antd';
+import logEvent from 'api/common/logEvent';
 import { QueryParams } from 'constants/query';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import { ViewMenuAction } from 'container/GridCardLayout/config';
 import GridCard from 'container/GridCardLayout/GridCard';
 import { Card } from 'container/GridCardLayout/styles';
+import { Button } from 'container/MetricsApplication/Tabs/styles';
+import { onGraphClickHandler } from 'container/MetricsApplication/Tabs/util';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import useUrlQuery from 'hooks/useUrlQuery';
+import { OnClickPluginOpts } from 'lib/uPlotLib/plugins/onClickPlugin';
 import { getStartAndEndTimesInMilliseconds } from 'pages/MessagingQueues/MessagingQueuesUtils';
 import { useCallback, useMemo, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
@@ -16,15 +20,13 @@ import { UpdateTimeInterval } from 'store/actions';
 import { AppState } from 'store/reducers';
 import { GlobalReducer } from 'types/reducer/globalTime';
 
-import { CaptureDataProps } from '../CeleryTaskDetail/CeleryTaskDetail';
 import {
 	applyCeleryFilterOnWidgetData,
+	createFiltersFromData,
 	getFiltersFromQueryParams,
 } from '../CeleryUtils';
-import {
-	celeryTaskLatencyWidgetData,
-	celeryTimeSeriesTablesWidgetData,
-} from './CeleryTaskGraphUtils';
+import { useNavigateToTraces } from '../useNavigateToTraces';
+import { celeryTaskLatencyWidgetData } from './CeleryTaskGraphUtils';
 
 interface TabData {
 	label: string;
@@ -38,11 +40,11 @@ export enum CeleryTaskGraphState {
 }
 
 function CeleryTaskLatencyGraph({
-	onClick,
 	queryEnabled,
+	checkIfDataExists,
 }: {
-	onClick: (task: CaptureDataProps) => void;
 	queryEnabled: boolean;
+	checkIfDataExists?: (isDataAvailable: boolean) => void;
 }): JSX.Element {
 	const history = useHistory();
 	const { pathname } = useLocation();
@@ -62,6 +64,10 @@ function CeleryTaskLatencyGraph({
 
 	const handleTabClick = (key: CeleryTaskGraphState): void => {
 		setGraphState(key as CeleryTaskGraphState);
+		logEvent('MQ Celery: Task latency graph tab clicked', {
+			taskName: urlQuery.get(QueryParams.taskName),
+			graphState: key,
+		});
 	};
 
 	const onDragSelect = useCallback(
@@ -106,31 +112,51 @@ function CeleryTaskLatencyGraph({
 		[celeryTaskLatencyData, selectedFilters],
 	);
 
-	const onGraphClick = (
-		xValue: number,
-		_yValue: number,
-		_mouseX: number,
-		_mouseY: number,
-		data?: {
-			[key: string]: string;
+	const [selectedTimeStamp, setSelectedTimeStamp] = useState<number>(0);
+	const [entityData, setEntityData] = useState<{
+		entity: string;
+		value: string;
+	}>();
+
+	const handleSetTimeStamp = useCallback((selectTime: number) => {
+		setSelectedTimeStamp(selectTime);
+	}, []);
+
+	const onGraphClick = useCallback(
+		(type: string): OnClickPluginOpts['onClick'] => (
+			xValue,
+			yValue,
+			mouseX,
+			mouseY,
+			data,
+		): Promise<void> => {
+			const [firstDataPoint] = Object.entries(data || {});
+			const [entity, value] = firstDataPoint;
+			setEntityData({
+				entity,
+				value,
+			});
+
+			return onGraphClickHandler(handleSetTimeStamp)(
+				xValue,
+				yValue,
+				mouseX,
+				mouseY,
+				type,
+			);
 		},
-	): void => {
-		const { start, end } = getStartAndEndTimesInMilliseconds(xValue);
+		[handleSetTimeStamp],
+	);
 
-		// Extract entity and value from data
-		const [firstDataPoint] = Object.entries(data || {});
-		const [entity, value] = (firstDataPoint || ([] as unknown)) as [
-			string,
-			string,
-		];
+	const navigateToTraces = useNavigateToTraces();
 
-		onClick?.({
-			entity,
-			value,
-			timeRange: [start, end],
-			widgetData: celeryTimeSeriesTablesWidgetData(entity, value, 'Task Latency'),
+	const goToTraces = useCallback(() => {
+		const { start, end } = getStartAndEndTimesInMilliseconds(selectedTimeStamp);
+		const filters = createFiltersFromData({
+			[entityData?.entity as string]: entityData?.value,
 		});
-	};
+		navigateToTraces(filters, start, end, true);
+	}, [entityData, navigateToTraces, selectedTimeStamp]);
 
 	return (
 		<Card
@@ -161,32 +187,65 @@ function CeleryTaskLatencyGraph({
 			</Row>
 			<div className="celery-task-graph-grid-content">
 				{graphState === CeleryTaskGraphState.P99 && (
-					<GridCard
-						widget={updatedWidgetData}
-						headerMenuList={[...ViewMenuAction]}
-						onDragSelect={onDragSelect}
-						onClickHandler={onGraphClick}
-						isQueryEnabled={queryEnabled}
-					/>
+					<>
+						<Button
+							type="default"
+							size="small"
+							id="Celery_p99_latency_button"
+							onClick={goToTraces}
+						>
+							View Traces
+						</Button>
+						<GridCard
+							widget={updatedWidgetData}
+							headerMenuList={[...ViewMenuAction]}
+							onDragSelect={onDragSelect}
+							onClickHandler={onGraphClick('Celery_p99_latency')}
+							isQueryEnabled={queryEnabled}
+							dataAvailable={checkIfDataExists}
+						/>
+					</>
 				)}
 
 				{graphState === CeleryTaskGraphState.P95 && (
-					<GridCard
-						widget={updatedWidgetData}
-						headerMenuList={[...ViewMenuAction]}
-						onDragSelect={onDragSelect}
-						onClickHandler={onGraphClick}
-						isQueryEnabled={queryEnabled}
-					/>
+					<>
+						<Button
+							type="default"
+							size="small"
+							id="Celery_p95_latency_button"
+							onClick={goToTraces}
+						>
+							View Traces
+						</Button>
+						<GridCard
+							widget={updatedWidgetData}
+							headerMenuList={[...ViewMenuAction]}
+							onDragSelect={onDragSelect}
+							onClickHandler={onGraphClick('Celery_p95_latency')}
+							isQueryEnabled={queryEnabled}
+							dataAvailable={checkIfDataExists}
+						/>
+					</>
 				)}
 				{graphState === CeleryTaskGraphState.P90 && (
-					<GridCard
-						widget={updatedWidgetData}
-						headerMenuList={[...ViewMenuAction]}
-						onDragSelect={onDragSelect}
-						onClickHandler={onGraphClick}
-						isQueryEnabled={queryEnabled}
-					/>
+					<>
+						<Button
+							type="default"
+							size="small"
+							id="Celery_p90_latency_button"
+							onClick={goToTraces}
+						>
+							View Traces
+						</Button>
+						<GridCard
+							widget={updatedWidgetData}
+							headerMenuList={[...ViewMenuAction]}
+							onDragSelect={onDragSelect}
+							onClickHandler={onGraphClick('Celery_p90_latency')}
+							isQueryEnabled={queryEnabled}
+							dataAvailable={checkIfDataExists}
+						/>
+					</>
 				)}
 			</div>
 		</Card>
@@ -194,3 +253,7 @@ function CeleryTaskLatencyGraph({
 }
 
 export default CeleryTaskLatencyGraph;
+
+CeleryTaskLatencyGraph.defaultProps = {
+	checkIfDataExists: undefined,
+};

frontend/src/components/CeleryTask/CeleryTaskGraph/CeleryTaskStateGraphConfig.tsx

@@ -2,8 +2,15 @@
 import './CeleryTaskGraph.style.scss';
 
 import { Col, Row } from 'antd';
-import { Dispatch, SetStateAction } from 'react';
+import logEvent from 'api/common/logEvent';
+import { QueryParams } from 'constants/query';
+import useUrlQuery from 'hooks/useUrlQuery';
+import { Dispatch, SetStateAction, useMemo } from 'react';
 
+import {
+	applyCeleryFilterOnWidgetData,
+	getFiltersFromQueryParams,
+} from '../CeleryUtils';
 import {
 	celeryAllStateCountWidgetData,
 	celeryFailedStateCountWidgetData,
@@ -38,20 +45,37 @@ function CeleryTaskStateGraphConfig({
 		{ label: 'Successful', key: CeleryTaskState.Successful },
 	];
 
+	const urlQuery = useUrlQuery();
+
 	const handleTabClick = (key: CeleryTaskState): void => {
 		setBarState(key as CeleryTaskState);
+		logEvent('MQ Celery: State graph tab clicked', {
+			taskName: urlQuery.get(QueryParams.taskName),
+			graphState: key,
+		});
 	};
 
-	const { values, isLoading, isError } = useGetValueFromWidget(
-		[
-			celeryAllStateCountWidgetData,
-			celeryFailedStateCountWidgetData,
-			celeryRetryStateCountWidgetData,
-			celerySuccessStateCountWidgetData,
-		],
-		['celery-task-states'],
+	const selectedFilters = useMemo(
+		() =>
+			getFiltersFromQueryParams(
+				QueryParams.taskName,
+				urlQuery,
+				'celery.task_name',
+			),
+		[urlQuery],
 	);
 
+	const widgetData = [
+		celeryAllStateCountWidgetData,
+		celeryFailedStateCountWidgetData,
+		celeryRetryStateCountWidgetData,
+		celerySuccessStateCountWidgetData,
+	].map((data) => applyCeleryFilterOnWidgetData(selectedFilters || [], data));
+
+	const { values, isLoading, isError } = useGetValueFromWidget(widgetData, [
+		'celery-task-states',
+	]);
+
 	return (
 		<Row className="celery-task-states">
 			{tabs.map((tab, index) => (
@@ -66,7 +90,13 @@ function CeleryTaskStateGraphConfig({
 					<div className="celery-task-states__label-wrapper">
 						<div className="celery-task-states__label">{tab.label}</div>
 						<div className="celery-task-states__value">
-							{isLoading ? '-' : isError ? '-' : values[index]}
+							{isLoading
+								? '-'
+								: isError
+								? '-'
+								: Number.isNaN(values[index])
+								? '-'
+								: Math.round(Number(values[index]))}
 						</div>
 					</div>
 					{tab.key === barState && <div className="celery-task-states__indicator" />}

frontend/src/components/CeleryTask/CeleryUtils.ts

@@ -90,3 +90,40 @@ export const paths = (
 
 	return renderer(u, seriesIdx, idx0, idx1, extendGap, buildClip);
 };
+
+export const createFiltersFromData = (
+	data: Record<string, any>,
+): Array<{
+	id: string;
+	key: {
+		key: string;
+		dataType: DataTypes;
+		type: string;
+		isColumn: boolean;
+		isJSON: boolean;
+		id: string;
+	};
+	op: string;
+	value: string;
+}> => {
+	const excludeKeys = ['A', 'A_without_unit'];
+
+	return (
+		Object.entries(data)
+			.filter(([key]) => !excludeKeys.includes(key))
+			// eslint-disable-next-line sonarjs/no-identical-functions
+			.map(([key, value]) => ({
+				id: uuidv4(),
+				key: {
+					key,
+					dataType: DataTypes.String,
+					type: 'tag',
+					isColumn: false,
+					isJSON: false,
+					id: `${key}--string--tag--false`,
+				},
+				op: '=',
+				value: value.toString(),
+			}))
+	);
+};

frontend/src/components/CeleryTask/useGetGraphCustomSeries.ts

@@ -0,0 +1,70 @@
+import { Color } from '@signozhq/design-tokens';
+import { themeColors } from 'constants/theme';
+import getLabelName from 'lib/getLabelName';
+import { drawStyles } from 'lib/uPlotLib/utils/constants';
+import { generateColor } from 'lib/uPlotLib/utils/generateColor';
+import { QueryData } from 'types/api/widgets/getQuery';
+
+import { paths } from './CeleryUtils';
+
+interface UseGetGraphCustomSeriesProps {
+	isDarkMode: boolean;
+	drawStyle?: typeof drawStyles[keyof typeof drawStyles];
+	colorMapping?: Record<string, string>;
+}
+
+const defaultColorMapping = {
+	SUCCESS: Color.BG_FOREST_500,
+	FAILURE: Color.BG_CHERRY_500,
+	RETRY: Color.BG_AMBER_400,
+};
+
+export const useGetGraphCustomSeries = ({
+	isDarkMode,
+	drawStyle = 'bars',
+	colorMapping = defaultColorMapping,
+}: UseGetGraphCustomSeriesProps): {
+	getCustomSeries: (data: QueryData[]) => uPlot.Series[];
+} => {
+	const getGraphSeries = (color: string, label: string): any => ({
+		drawStyle,
+		paths,
+		lineInterpolation: 'spline',
+		show: true,
+		label,
+		fill: `${color}90`,
+		stroke: color,
+		width: 2,
+		spanGaps: true,
+		points: {
+			size: 5,
+			show: false,
+			stroke: color,
+		},
+	});
+
+	const getCustomSeries = (data: QueryData[]): uPlot.Series[] => {
+		const configurations: uPlot.Series[] = [
+			{ label: 'Timestamp', stroke: 'purple' },
+		];
+
+		for (let i = 0; i < data.length; i += 1) {
+			const { metric = {}, queryName = '', legend = '' } = data[i] || {};
+			const label = getLabelName(metric, queryName || '', legend || '');
+
+			// Check if label exists in colorMapping
+			const color =
+				colorMapping[label] ||
+				generateColor(
+					label,
+					isDarkMode ? themeColors.chartcolors : themeColors.lightModeColor,
+				);
+
+			const series = getGraphSeries(color, label);
+			configurations.push(series);
+		}
+		return configurations;
+	};
+
+	return { getCustomSeries };
+};

frontend/src/components/CeleryTask/useNavigateToTraces.ts

@@ -12,6 +12,7 @@ export function useNavigateToTraces(): (
 	filters: TagFilterItem[],
 	startTime?: number,
 	endTime?: number,
+	sameTab?: boolean,
 ) => void {
 	const { currentQuery } = useQueryBuilder();
 	const { minTime, maxTime } = useSelector<AppState, GlobalReducer>(
@@ -38,7 +39,12 @@ export function useNavigateToTraces(): (
 	);
 
 	return useCallback(
-		(filters: TagFilterItem[], startTime?: number, endTime?: number): void => {
+		(
+			filters: TagFilterItem[],
+			startTime?: number,
+			endTime?: number,
+			sameTab?: boolean,
+		): void => {
 			const urlParams = new URLSearchParams();
 			if (startTime && endTime) {
 				urlParams.set(QueryParams.startTime, startTime.toString());
@@ -58,7 +64,7 @@ export function useNavigateToTraces(): (
 				QueryParams.compositeQuery
 			}=${JSONCompositeQuery}`;
 
-			window.open(newTraceExplorerPath, '_blank');
+			window.open(newTraceExplorerPath, sameTab ? '_self' : '_blank');
 		},
 		[minTime, maxTime, prepareQuery],
 	);

frontend/src/components/ExplorerCard/ExplorerCard.tsx

@@ -18,7 +18,9 @@ import {
 import axios from 'axios';
 import TextToolTip from 'components/TextToolTip';
 import { SOMETHING_WENT_WRONG } from 'constants/api';
+import { LOCALSTORAGE } from 'constants/localStorage';
 import { QueryParams } from 'constants/query';
+import { useOptionsMenu } from 'container/OptionsMenu';
 import { useGetSearchQueryParam } from 'hooks/queryBuilder/useGetSearchQueryParam';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useDeleteView } from 'hooks/saveViews/useDeleteView';
@@ -29,6 +31,7 @@ import { useNotifications } from 'hooks/useNotifications';
 import { mapCompositeQueryFromQuery } from 'lib/newQueryBuilder/queryBuilderMappers/mapCompositeQueryFromQuery';
 import { useState } from 'react';
 import { useCopyToClipboard } from 'react-use';
+import { DataSource, StringOperators } from 'types/common/queryBuilder';
 import { popupContainer } from 'utils/selectPopupContainer';
 
 import { ExploreHeaderToolTip, SaveButtonText } from './constants';
@@ -83,7 +86,20 @@ function ExplorerCard({
 
 	const viewKey = useGetSearchQueryParam(QueryParams.viewKey) || '';
 
-	const isQueryUpdated = isStagedQueryUpdated(viewsData?.data?.data, viewKey);
+	const { options } = useOptionsMenu({
+		storageKey:
+			sourcepage === DataSource.TRACES
+				? LOCALSTORAGE.TRACES_LIST_OPTIONS
+				: LOCALSTORAGE.LOGS_LIST_OPTIONS,
+		dataSource: sourcepage,
+		aggregateOperator: StringOperators.NOOP,
+	});
+
+	const isQueryUpdated = isStagedQueryUpdated(
+		viewsData?.data?.data,
+		viewKey,
+		options,
+	);
 
 	const { mutateAsync: updateViewAsync } = useUpdateView({
 		compositeQuery: mapCompositeQueryFromQuery(currentQuery, panelType),

frontend/src/components/ExplorerCard/test/ExplorerCard.test.tsx

@@ -6,11 +6,24 @@ import { DataSource } from 'types/common/queryBuilder';
 import { viewMockData } from '../__mock__/viewData';
 import ExplorerCard from '../ExplorerCard';
 
+const historyReplace = jest.fn();
+
+// eslint-disable-next-line sonarjs/no-duplicate-string
 jest.mock('react-router-dom', () => ({
 	...jest.requireActual('react-router-dom'),
 	useLocation: (): { pathname: string } => ({
 		pathname: `${process.env.FRONTEND_API_ENDPOINT}/${ROUTES.TRACES_EXPLORER}/`,
 	}),
+	useHistory: (): any => ({
+		...jest.requireActual('react-router-dom').useHistory(),
+		replace: historyReplace,
+	}),
+}));
+
+jest.mock('hooks/useSafeNavigate', () => ({
+	useSafeNavigate: (): any => ({
+		safeNavigate: jest.fn(),
+	}),
 }));
 
 jest.mock('hooks/queryBuilder/useGetPanelTypesQueryParam', () => ({

frontend/src/components/ExplorerCard/types.ts

@@ -2,6 +2,7 @@ import { FormInstance } from 'antd';
 import { NotificationInstance } from 'antd/es/notification/interface';
 import { AxiosResponse } from 'axios';
 import { PANEL_TYPES } from 'constants/queryBuilder';
+import { OptionsQuery } from 'container/OptionsMenu/types';
 import { UseMutateAsyncFunction } from 'react-query';
 import { ICompositeMetricQuery } from 'types/api/alerts/compositeQuery';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';
@@ -36,6 +37,7 @@ export interface IsQueryUpdatedInViewProps {
 	data: ViewProps[] | undefined;
 	stagedQuery: Query | null;
 	currentPanelType: PANEL_TYPES | null;
+	options: OptionsQuery;
 }
 
 export interface SaveViewWithNameProps {

frontend/src/components/ExplorerCard/utils.ts

@@ -80,12 +80,13 @@ export const isQueryUpdatedInView = ({
 	data,
 	stagedQuery,
 	currentPanelType,
+	options,
 }: IsQueryUpdatedInViewProps): boolean => {
 	const currentViewDetails = getViewDetailsUsingViewKey(viewKey, data);
 	if (!currentViewDetails) {
 		return false;
 	}
-	const { query, panelType } = currentViewDetails;
+	const { query, panelType, extraData } = currentViewDetails;
 
 	// Omitting id from aggregateAttribute and groupBy
 	const updatedCurrentQuery = omitIdFromQuery(stagedQuery);
@@ -97,12 +98,15 @@ export const isQueryUpdatedInView = ({
 	) {
 		return false;
 	}
-
 	return (
 		panelType !== currentPanelType ||
 		!isEqual(query.builder, updatedCurrentQuery?.builder) ||
 		!isEqual(query.clickhouse_sql, updatedCurrentQuery?.clickhouse_sql) ||
-		!isEqual(query.promql, updatedCurrentQuery?.promql)
+		!isEqual(query.promql, updatedCurrentQuery?.promql) ||
+		!isEqual(
+			options?.selectColumns,
+			extraData && JSON.parse(extraData)?.selectColumns,
+		)
 	);
 };
 

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

@@ -67,6 +67,10 @@ function HostMetricTraces({
 						aggregateAttribute: {
 							...currentQuery.builder.queryData[0].aggregateAttribute,
 						},
+						filters: {
+							items: [],
+							op: 'AND',
+						},
 					},
 				],
 			},

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

@@ -50,6 +50,10 @@ function HostMetricLogsDetailedView({
 						aggregateAttribute: {
 							...currentQuery.builder.queryData[0].aggregateAttribute,
 						},
+						filters: {
+							items: [],
+							op: 'AND',
+						},
 					},
 				],
 			},

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

@@ -133,7 +133,7 @@
 	.go-to-docs {
 		display: flex;
 		flex-direction: column;
-		gap: 64px;
+		gap: 44px;
 		&__container {
 			display: flex;
 			flex-direction: column;

frontend/src/components/ResizeTable/DynamicColumnTable.tsx

@@ -6,6 +6,8 @@ import { ColumnGroupType, ColumnType } from 'antd/es/table';
 import { ColumnsType } from 'antd/lib/table';
 import logEvent from 'api/common/logEvent';
 import LaunchChatSupport from 'components/LaunchChatSupport/LaunchChatSupport';
+import { useSafeNavigate } from 'hooks/useSafeNavigate';
+import useUrlQuery from 'hooks/useUrlQuery';
 import { SlidersHorizontal } from 'lucide-react';
 import { memo, useEffect, useState } from 'react';
 import { popupContainer } from 'utils/selectPopupContainer';
@@ -25,8 +27,12 @@ function DynamicColumnTable({
 	onDragColumn,
 	facingIssueBtn,
 	shouldSendAlertsLogEvent,
+	pagination,
 	...restProps
 }: DynamicColumnTableProps): JSX.Element {
+	const { safeNavigate } = useSafeNavigate();
+	const urlQuery = useUrlQuery();
+
 	const [columnsData, setColumnsData] = useState<ColumnsType | undefined>(
 		columns,
 	);
@@ -93,6 +99,28 @@ function DynamicColumnTable({
 			type: 'checkbox',
 		})) || [];
 
+	// Get current page from URL or default to 1
+	const currentPage = Number(urlQuery.get('page')) || 1;
+
+	const handlePaginationChange = (page: number, pageSize?: number): void => {
+		// Update URL with new page number while preserving other params
+		urlQuery.set('page', page.toString());
+
+		const newUrl = `${window.location.pathname}?${urlQuery.toString()}`;
+		safeNavigate(newUrl);
+
+		// Call original pagination handler if provided
+		if (pagination?.onChange && !!pageSize) {
+			pagination.onChange(page, pageSize);
+		}
+	};
+
+	const enhancedPagination = {
+		...pagination,
+		current: currentPage, // Ensure the pagination component shows the correct page
+		onChange: handlePaginationChange,
+	};
+
 	return (
 		<div className="DynamicColumnTable">
 			<Flex justify="flex-end" align="center" gap={8}>
@@ -116,6 +144,7 @@ function DynamicColumnTable({
 			<ResizeTable
 				columns={columnsData}
 				onDragColumn={onDragColumn}
+				pagination={enhancedPagination}
 				{...restProps}
 			/>
 		</div>

frontend/src/components/ResizeTable/types.ts

@@ -1,6 +1,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { TableProps } from 'antd';
 import { ColumnsType } from 'antd/es/table';
+import { PaginationProps } from 'antd/lib';
 import { ColumnGroupType, ColumnType } from 'antd/lib/table';
 import { LaunchChatSupportProps } from 'components/LaunchChatSupport/LaunchChatSupport';
 
@@ -15,6 +16,7 @@ export interface DynamicColumnTableProps extends TableProps<any> {
 	onDragColumn?: (fromIndex: number, toIndex: number) => void;
 	facingIssueBtn?: LaunchChatSupportProps;
 	shouldSendAlertsLogEvent?: boolean;
+	pagination?: PaginationProps;
 }
 
 export type GetVisibleColumnsFunction = (

frontend/src/components/SignozModal/SignozModal.style.scss

@@ -0,0 +1,117 @@
+.signoz-modal {
+	.ant-modal-content {
+		padding: 0;
+		background: var(--bg-ink-400);
+		border: 1px solid var(--bg-slate-500);
+	}
+
+	.ant-modal-header {
+		background: var(--bg-ink-400);
+		border-bottom: none;
+		padding: 12px 24px 8px;
+		border-bottom: 1px solid var(--bg-slate-500);
+		margin-bottom: 0;
+	}
+
+	.ant-modal-close {
+		top: 15px;
+		height: 14px;
+		width: 14px;
+		.ant-modal-close-x {
+			font-size: 12px;
+		}
+	}
+
+	.ant-modal-title {
+		color: var(--bg-vanilla-100);
+		font-size: 14px;
+		font-weight: 400;
+		line-height: 20px;
+	}
+
+	.ant-modal-body {
+		padding: 16px 24px 24px;
+	}
+
+	.ant-modal-footer {
+		padding: 24px;
+		display: flex;
+		justify-content: end;
+		gap: 12px;
+	}
+
+	.ant-typography {
+		color: var(--bg-vanilla-100);
+	}
+
+	.ant-select {
+		border-radius: 2px !important;
+		&-selector {
+			background: var(--bg-ink-300) !important;
+			border: 1px solid var(--bg-slate-400) !important;
+			border-radius: 2px !important;
+		}
+	}
+
+	.ant-select-dropdown {
+		background: var(--bg-ink-400);
+		border: 1px solid var(--bg-ink-300);
+		-webkit-backdrop-filter: blur(20px);
+		backdrop-filter: blur(20px);
+	}
+
+	.ant-select-item {
+		color: var(--bg-vanilla-100);
+
+		&-option-selected {
+			background: var(--bg-ink-300);
+		}
+	}
+}
+
+.lightMode {
+	.signoz-modal {
+		.ant-modal-content {
+			background: var(--bg-vanilla-100);
+			border-color: var(--bg-vanilla-300);
+		}
+
+		.ant-modal-header {
+			background: var(--bg-vanilla-100);
+			border-bottom-color: var(--bg-vanilla-300);
+		}
+
+		.ant-modal-title {
+			color: var(--bg-ink-500);
+		}
+
+		.ant-typography {
+			color: var(--bg-ink-500);
+		}
+
+		.ant-select {
+			&-selector {
+				background: var(--bg-vanilla-100) !important;
+				border-color: var(--bg-vanilla-300) !important;
+			}
+		}
+
+		.ant-select-dropdown {
+			background: var(--bg-vanilla-100);
+			border-color: var(--bg-vanilla-300);
+		}
+
+		.ant-select-item {
+			color: var(--bg-ink-400);
+
+			&-option-selected {
+				background: var(--bg-vanilla-300);
+				color: var(--bg-ink-500);
+			}
+
+			&-option-active {
+				background: var(--bg-vanilla-200);
+			}
+		}
+	}
+}

frontend/src/components/SignozModal/SignozModal.tsx

@@ -0,0 +1,25 @@
+import './SignozModal.style.scss';
+
+import { Modal, ModalProps } from 'antd';
+
+function SignozModal({
+	children,
+
+	rootClassName = '',
+	...rest
+}: ModalProps): JSX.Element {
+	return (
+		<Modal
+			centered
+			width={672}
+			cancelText="Close"
+			rootClassName={`signoz-modal ${rootClassName}`}
+			// eslint-disable-next-line react/jsx-props-no-spreading
+			{...rest}
+		>
+			{children}
+		</Modal>
+	);
+}
+
+export default SignozModal;

frontend/src/components/Upgrade/UpgradePrompt.tsx

@@ -1,31 +0,0 @@
-import { Alert, Space } from 'antd';
-import { SIGNOZ_UPGRADE_PLAN_URL } from 'constants/app';
-
-type UpgradePromptProps = {
-	title?: string;
-};
-
-function UpgradePrompt({ title }: UpgradePromptProps): JSX.Element {
-	return (
-		<Space direction="vertical" style={{ width: '100%' }}>
-			<Alert
-				message={title}
-				description={
-					<div>
-						This feature is available for paid plans only.{' '}
-						<a href={SIGNOZ_UPGRADE_PLAN_URL} target="_blank" rel="noreferrer">
-							Click here
-						</a>{' '}
-						to Upgrade
-					</div>
-				}
-				type="warning"
-			/>{' '}
-		</Space>
-	);
-}
-
-UpgradePrompt.defaultProps = {
-	title: 'Upgrade to a Paid Plan',
-};
-export default UpgradePrompt;

frontend/src/constants/events.ts

@@ -2,4 +2,5 @@ export enum Events {
 	UPDATE_GRAPH_VISIBILITY_STATE = 'UPDATE_GRAPH_VISIBILITY_STATE',
 	UPDATE_GRAPH_MANAGER_TABLE = 'UPDATE_GRAPH_MANAGER_TABLE',
 	TABLE_COLUMNS_DATA = 'TABLE_COLUMNS_DATA',
+	SLOW_API_WARNING = 'SLOW_API_WARNING',
 }

frontend/src/constants/localStorage.ts

@@ -25,4 +25,5 @@ export enum LOCALSTORAGE {
 	PREFERRED_TIMEZONE = 'PREFERRED_TIMEZONE',
 	UNAUTHENTICATED_ROUTE_HIT = 'UNAUTHENTICATED_ROUTE_HIT',
 	CELERY_OVERVIEW_COLUMNS = 'CELERY_OVERVIEW_COLUMNS',
+	DONT_SHOW_SLOW_API_WARNING = 'DONT_SHOW_SLOW_API_WARNING',
 }

frontend/src/constants/queryBuilder.ts

@@ -407,3 +407,13 @@ export const HAVING_OPERATORS: string[] = [
 	OPERATORS['<='],
 	OPERATORS['<'],
 ];
+
+export enum PanelDisplay {
+	TIME_SERIES = 'Time Series',
+	VALUE = 'Number',
+	TABLE = 'Table',
+	LIST = 'List',
+	BAR = 'Bar',
+	PIE = 'Pie',
+	HISTOGRAM = 'Histogram',
+}

frontend/src/constants/reactQueryKeys.ts

@@ -18,11 +18,13 @@ export const REACT_QUERY_KEY = {
 	GET_ALL_ALLERTS: 'GET_ALL_ALLERTS',
 	REMOVE_ALERT_RULE: 'REMOVE_ALERT_RULE',
 	DUPLICATE_ALERT_RULE: 'DUPLICATE_ALERT_RULE',
-	GET_HOST_LIST: 'GET_HOST_LIST',
 	UPDATE_ALERT_RULE: 'UPDATE_ALERT_RULE',
 	GET_ACTIVE_LICENSE_V3: 'GET_ACTIVE_LICENSE_V3',
 	GET_TRACE_V2_WATERFALL: 'GET_TRACE_V2_WATERFALL',
 	GET_TRACE_V2_FLAMEGRAPH: 'GET_TRACE_V2_FLAMEGRAPH',
+
+	// Infra Monitoring Query Keys
+	GET_HOST_LIST: 'GET_HOST_LIST',
 	GET_POD_LIST: 'GET_POD_LIST',
 	GET_NODE_LIST: 'GET_NODE_LIST',
 	GET_DEPLOYMENT_LIST: 'GET_DEPLOYMENT_LIST',
@@ -32,4 +34,16 @@ export const REACT_QUERY_KEY = {
 	GET_JOB_LIST: 'GET_JOB_LIST',
 	GET_DAEMONSET_LIST: 'GET_DAEMONSET_LIST,',
 	GET_VOLUME_LIST: 'GET_VOLUME_LIST',
+	GET_K8S_ENTITY_STATUS: 'GET_K8S_ENTITY_STATUS',
+
+	// AWS Integration Query Keys
+	AWS_ACCOUNTS: 'AWS_ACCOUNTS',
+	AWS_SERVICES: 'AWS_SERVICES',
+	AWS_SERVICE_DETAILS: 'AWS_SERVICE_DETAILS',
+	AWS_ACCOUNT_STATUS: 'AWS_ACCOUNT_STATUS',
+	AWS_UPDATE_ACCOUNT_CONFIG: 'AWS_UPDATE_ACCOUNT_CONFIG',
+	AWS_UPDATE_SERVICE_CONFIG: 'AWS_UPDATE_SERVICE_CONFIG',
+	AWS_GENERATE_CONNECTION_URL: 'AWS_GENERATE_CONNECTION_URL',
+	AWS_GET_CONNECTION_PARAMS: 'AWS_GET_CONNECTION_PARAMS',
+	GET_ATTRIBUTE_VALUES: 'GET_ATTRIBUTE_VALUES',
 };

frontend/src/constants/routes.ts

@@ -65,6 +65,9 @@ const ROUTES = {
 	INFRASTRUCTURE_MONITORING_KUBERNETES: '/infrastructure-monitoring/kubernetes',
 	MESSAGING_QUEUES_CELERY_TASK: '/messaging-queues/celery-task',
 	MESSAGING_QUEUES_OVERVIEW: '/messaging-queues/overview',
+	METRICS_EXPLORER: '/metrics-explorer/summary',
+	METRICS_EXPLORER_EXPLORER: '/metrics-explorer/explorer',
+	METRICS_EXPLORER_VIEWS: '/metrics-explorer/views',
 } as const;
 
 export default ROUTES;

frontend/src/container/AllAlertChannels/__tests__/CreateAlertChannel.test.tsx

@@ -378,9 +378,7 @@ describe('Create Alert Channel', () => {
 			});
 
 			it('Should check if the selected item in the type dropdown has text "msteams"', () => {
-				expect(
-					screen.getByText('Microsoft Teams (Supported in Paid Plans Only)'),
-				).toBeInTheDocument();
+				expect(screen.getByText('Microsoft Teams')).toBeInTheDocument();
 			});
 
 			it('Should check if Webhook URL label and input are displayed properly ', () => {

frontend/src/container/AllAlertChannels/__tests__/CreateAlertChannelNormalUser.test.tsx

@@ -308,10 +308,8 @@ describe('Create Alert Channel (Normal User)', () => {
 				render(<CreateAlertChannels preType={ChannelType.MsTeams} />);
 			});
 
-			it('Should check if the selected item in the type dropdown has text "Microsoft Teams (Supported in Paid Plans Only)"', () => {
-				expect(
-					screen.getByText('Microsoft Teams (Supported in Paid Plans Only)'),
-				).toBeInTheDocument();
+			it('Should check if the selected item in the type dropdown has text "Microsoft Teams"', () => {
+				expect(screen.getByText('Microsoft Teams')).toBeInTheDocument();
 			});
 
 			// TODO[vikrantgupta25]: check with Shaheer

frontend/src/container/AppLayout/AppLayout.styles.scss

@@ -101,13 +101,32 @@
 	}
 }
 
-.trial-expiry-banner {
+.trial-expiry-banner,
+.slow-api-warning-banner {
 	padding: 8px;
 	background-color: #f25733;
 	color: white;
 	text-align: center;
 }
 
+.slow-api-warning-banner {
+	background-color: var(--bg-robin-500);
+
+	.dismiss-banner {
+		color: white;
+		float: right;
+		padding: 0 16px;
+
+		display: flex;
+		align-items: center;
+		gap: 4px;
+
+		&:hover {
+			color: white;
+		}
+	}
+}
+
 .payment-failed-banner {
 	padding: 8px;
 	background-color: var(--bg-sakura-500);

frontend/src/container/AppLayout/index.tsx

@@ -6,13 +6,18 @@ import './AppLayout.styles.scss';
 import * as Sentry from '@sentry/react';
 import { Flex } from 'antd';
 import manageCreditCardApi from 'api/billing/manage';
+import getLocalStorageApi from 'api/browser/localstorage/get';
+import setLocalStorageApi from 'api/browser/localstorage/set';
+import logEvent from 'api/common/logEvent';
 import getUserLatestVersion from 'api/user/getLatestVersion';
 import getUserVersion from 'api/user/getVersion';
 import cx from 'classnames';
 import ChatSupportGateway from 'components/ChatSupportGateway/ChatSupportGateway';
 import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
 import { SOMETHING_WENT_WRONG } from 'constants/api';
+import { Events } from 'constants/events';
 import { FeatureKeys } from 'constants/features';
+import { LOCALSTORAGE } from 'constants/localStorage';
 import ROUTES from 'constants/routes';
 import SideNav from 'container/SideNav';
 import TopNav from 'container/TopNav';
@@ -22,8 +27,16 @@ import { useNotifications } from 'hooks/useNotifications';
 import history from 'lib/history';
 import { isNull } from 'lodash-es';
 import ErrorBoundaryFallback from 'pages/ErrorBoundaryFallback/ErrorBoundaryFallback';
+import { INTEGRATION_TYPES } from 'pages/Integrations/utils';
 import { useAppContext } from 'providers/App/App';
-import { ReactNode, useEffect, useMemo, useRef, useState } from 'react';
+import {
+	ReactNode,
+	useCallback,
+	useEffect,
+	useMemo,
+	useRef,
+	useState,
+} from 'react';
 import { Helmet } from 'react-helmet-async';
 import { useTranslation } from 'react-i18next';
 import { useMutation, useQueries } from 'react-query';
@@ -40,7 +53,9 @@ import {
 import { ErrorResponse, SuccessResponse } from 'types/api';
 import { CheckoutSuccessPayloadProps } from 'types/api/billing/checkout';
 import { LicenseEvent } from 'types/api/licensesV3/getActive';
+import { USER_ROLES } from 'types/roles';
 import { isCloudUser } from 'utils/app';
+import { eventEmitter } from 'utils/getEventEmitter';
 import {
 	getFormattedDate,
 	getFormattedDateWithMinutes,
@@ -71,6 +86,9 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 		setShowPaymentFailedWarning,
 	] = useState<boolean>(false);
 
+	const [showSlowApiWarning, setShowSlowApiWarning] = useState(false);
+	const [slowApiWarningShown, setSlowApiWarningShown] = useState(false);
+
 	const handleBillingOnSuccess = (
 		data: ErrorResponse | SuccessResponse<CheckoutSuccessPayloadProps, unknown>,
 	): void => {
@@ -249,7 +267,7 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 		if (
 			!isFetchingActiveLicenseV3 &&
 			!isNull(activeLicenseV3) &&
-			activeLicenseV3?.event_queue?.event === LicenseEvent.FAILED_PAYMENT
+			activeLicenseV3?.event_queue?.event === LicenseEvent.DEFAULT
 		) {
 			setShowPaymentFailedWarning(true);
 		}
@@ -260,22 +278,25 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 		if (!isLoggedIn) {
 			setShowTrialExpiryBanner(false);
 			setShowPaymentFailedWarning(false);
+			setShowSlowApiWarning(false);
 		}
 	}, [isLoggedIn]);
 
-	const handleUpgrade = (): void => {
-		if (user.role === 'ADMIN') {
+	const handleUpgrade = useCallback((): void => {
+		if (user.role === USER_ROLES.ADMIN) {
 			history.push(ROUTES.BILLING);
 		}
-	};
+	}, [user.role]);
 
-	const handleFailedPayment = (): void => {
-		manageCreditCard({
-			licenseKey: activeLicenseV3?.key || '',
-			successURL: window.location.origin,
-			cancelURL: window.location.origin,
-		});
-	};
+	const handleFailedPayment = useCallback((): void => {
+		if (activeLicenseV3?.key) {
+			manageCreditCard({
+				licenseKey: activeLicenseV3?.key || '',
+				successURL: window.location.origin,
+				cancelURL: window.location.origin,
+			});
+		}
+	}, [activeLicenseV3?.key, manageCreditCard]);
 
 	const isLogsView = (): boolean =>
 		routeKey === 'LOGS' ||
@@ -292,6 +313,11 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 		routeKey === 'MESSAGING_QUEUES_CELERY_TASK' ||
 		routeKey === 'MESSAGING_QUEUES_OVERVIEW';
 
+	const isCloudIntegrationPage = (): boolean =>
+		routeKey === 'INTEGRATIONS' &&
+		new URLSearchParams(window.location.search).get('integration') ===
+			INTEGRATION_TYPES.AWS_INTEGRATION;
+
 	const isDashboardListView = (): boolean => routeKey === 'ALL_DASHBOARD';
 	const isAlertHistory = (): boolean => routeKey === 'ALERT_HISTORY';
 	const isAlertOverview = (): boolean => routeKey === 'ALERT_OVERVIEW';
@@ -354,6 +380,107 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 		licenses,
 	]);
 
+	// Listen for API warnings
+	const handleWarning = (
+		isSlow: boolean,
+		data: { duration: number; url: string; threshold: number },
+	): void => {
+		const dontShowSlowApiWarning = getLocalStorageApi(
+			LOCALSTORAGE.DONT_SHOW_SLOW_API_WARNING,
+		);
+
+		logEvent(`Slow API Warning`, {
+			duration: `${data.duration}ms`,
+			url: data.url,
+			threshold: data.threshold,
+		});
+
+		const isDontShowSlowApiWarning = dontShowSlowApiWarning === 'true';
+
+		if (isDontShowSlowApiWarning) {
+			setShowSlowApiWarning(false);
+		} else {
+			setShowSlowApiWarning(isSlow);
+		}
+	};
+
+	useEffect(() => {
+		eventEmitter.on(Events.SLOW_API_WARNING, handleWarning);
+
+		return (): void => {
+			eventEmitter.off(Events.SLOW_API_WARNING, handleWarning);
+		};
+	}, []);
+
+	const isTrialUser = useMemo(
+		(): boolean =>
+			(!isFetchingLicenses &&
+				licenses &&
+				licenses.onTrial &&
+				!licenses.trialConvertedToSubscription) ||
+			false,
+		[licenses, isFetchingLicenses],
+	);
+
+	const handleDismissSlowApiWarning = (): void => {
+		setShowSlowApiWarning(false);
+
+		setLocalStorageApi(LOCALSTORAGE.DONT_SHOW_SLOW_API_WARNING, 'true');
+	};
+
+	useEffect(() => {
+		if (
+			showSlowApiWarning &&
+			isTrialUser &&
+			!licenses?.trialConvertedToSubscription &&
+			!slowApiWarningShown
+		) {
+			setSlowApiWarningShown(true);
+
+			notifications.info({
+				message: (
+					<div>
+						Our systems are taking longer than expected for your trial workspace.
+						Please{' '}
+						{user.role === USER_ROLES.ADMIN ? (
+							<span>
+								<a
+									className="upgrade-link"
+									onClick={(): void => {
+										notifications.destroy('slow-api-warning');
+
+										logEvent(`Slow API Banner: Upgrade clicked`, {});
+
+										handleUpgrade();
+									}}
+								>
+									upgrade
+								</a>
+								your workspace for a smoother experience.
+							</span>
+						) : (
+							'contact your administrator for upgrading to a paid plan for a smoother experience.'
+						)}
+					</div>
+				),
+				duration: 60000,
+				placement: 'topRight',
+				onClose: handleDismissSlowApiWarning,
+				key: 'slow-api-warning',
+			});
+		}
+	}, [
+		showSlowApiWarning,
+		notifications,
+		isTrialUser,
+		licenses?.trialConvertedToSubscription,
+		user.role,
+		isLoadingManageBilling,
+		handleFailedPayment,
+		slowApiWarningShown,
+		handleUpgrade,
+	]);
+
 	return (
 		<Layout className={cx(isDarkMode ? 'darkMode' : 'lightMode')}>
 			<Helmet>
@@ -364,7 +491,7 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 				<div className="trial-expiry-banner">
 					You are in free trial period. Your free trial will end on{' '}
 					<span>{getFormattedDate(licenses?.trialEnd || Date.now())}.</span>
-					{user.role === 'ADMIN' ? (
+					{user.role === USER_ROLES.ADMIN ? (
 						<span>
 							{' '}
 							Please{' '}
@@ -378,6 +505,7 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 					)}
 				</div>
 			)}
+
 			{!showTrialExpiryBanner && showPaymentFailedWarning && (
 				<div className="payment-failed-banner">
 					Your bill payment has failed. Your workspace will get suspended on{' '}
@@ -387,18 +515,11 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 						)}
 						.
 					</span>
-					{user.role === 'ADMIN' ? (
+					{user.role === USER_ROLES.ADMIN ? (
 						<span>
 							{' '}
 							Please{' '}
-							<a
-								className="upgrade-link"
-								onClick={(): void => {
-									if (!isLoadingManageBilling) {
-										handleFailedPayment();
-									}
-								}}
-							>
+							<a className="upgrade-link" onClick={handleFailedPayment}>
 								pay the bill
 							</a>
 							to continue using SigNoz features.
@@ -426,6 +547,7 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 											isAlertHistory() ||
 											isAlertOverview() ||
 											isMessagingQueues() ||
+											isCloudIntegrationPage() ||
 											isInfraMonitoring()
 												? 0
 												: '0 1rem',

frontend/src/container/CloudIntegrationPage/CloudIntegrationPage.tsx

@@ -0,0 +1,15 @@
+import Header from './Header/Header';
+import HeroSection from './HeroSection/HeroSection';
+import ServicesTabs from './ServicesSection/ServicesTabs';
+
+function CloudIntegrationPage(): JSX.Element {
+	return (
+		<div>
+			<Header />
+			<HeroSection />
+			<ServicesTabs />
+		</div>
+	);
+}
+
+export default CloudIntegrationPage;

frontend/src/container/CloudIntegrationPage/Header/Header.styles.scss

@@ -0,0 +1,65 @@
+.cloud-header {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	padding: 8px 18px;
+	border-bottom: 1px solid var(--bg-slate-400);
+
+	&__navigation {
+		display: flex;
+		align-items: center;
+		padding: 6px 0px 6px;
+	}
+
+	&__breadcrumb-link {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+	}
+
+	&__breadcrumb-title {
+		color: var(--bg-vanilla-400);
+		font-size: 14px;
+		line-height: 20px; /* 142.857% */
+		letter-spacing: -0.07px;
+	}
+
+	&__help {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding: 6px;
+		gap: 6px;
+		border: 1px solid var(--bg-slate-400);
+		background: var(--bg-ink-300);
+		border-radius: 2px;
+		color: var(--bg-vanilla-400);
+		font-size: 12px;
+		line-height: 10px; /* 83.333% */
+		letter-spacing: 0.12px;
+		width: 113px;
+		height: 32px;
+		cursor: pointer;
+	}
+}
+
+.lightMode {
+	.cloud-header {
+		border-bottom: 1px solid var(--bg-slate-300);
+
+		&__breadcrumb-title {
+			color: var(--bg-ink-400);
+		}
+
+		&__help {
+			border-color: var(--bg-slate-300);
+			background: var(--bg-vanilla-100);
+			color: var(--bg-ink-400);
+
+			&:hover {
+				border-color: var(--bg-slate-400);
+				color: var(--bg-ink-500);
+			}
+		}
+	}
+}

frontend/src/container/CloudIntegrationPage/Header/Header.tsx

@@ -0,0 +1,45 @@
+import './Header.styles.scss';
+
+import Breadcrumb from 'antd/es/breadcrumb';
+import ROUTES from 'constants/routes';
+import { Blocks, LifeBuoy } from 'lucide-react';
+import { Link } from 'react-router-dom';
+
+function Header(): JSX.Element {
+	return (
+		<div className="cloud-header">
+			<div className="cloud-header__navigation">
+				<Breadcrumb
+					className="cloud-header__breadcrumb"
+					items={[
+						{
+							title: (
+								<Link to={ROUTES.INTEGRATIONS}>
+									<span className="cloud-header__breadcrumb-link">
+										<Blocks size={16} color="var(--bg-vanilla-400)" />
+										<span className="cloud-header__breadcrumb-title">Integrations</span>
+									</span>
+								</Link>
+							),
+						},
+						{
+							title: (
+								<div className="cloud-header__breadcrumb-title">
+									Amazon Web Services
+								</div>
+							),
+						},
+					]}
+				/>
+			</div>
+			<div className="cloud-header__actions">
+				<button className="cloud-header__help" type="button">
+					<LifeBuoy size={12} />
+					Get Help
+				</button>
+			</div>
+		</div>
+	);
+}
+
+export default Header;

frontend/src/container/CloudIntegrationPage/HeroSection/HeroSection.style.scss

@@ -0,0 +1,72 @@
+.hero-section {
+	height: 308px;
+	padding: 26px 16px;
+	display: flex;
+	gap: 24px;
+	position: relative;
+	overflow: hidden;
+	background-position: right;
+	background-size: cover;
+	background-repeat: no-repeat;
+	border-bottom: 1px solid var(--bg-slate-500);
+
+	&__icon {
+		height: fit-content;
+		background-color: var(--bg-ink-400);
+		padding: 12px;
+		border: 1px solid var(--bg-ink-300);
+		border-radius: 6px;
+		width: 60px;
+		height: 60px;
+		display: flex;
+		align-items: center;
+		img {
+			width: 100%;
+		}
+	}
+
+	&__details {
+		display: flex;
+		flex-direction: column;
+		gap: 12px;
+
+		.title {
+			color: var(--bg-vanilla-100);
+			font-size: 24px;
+			font-weight: 500;
+			line-height: 20px;
+			letter-spacing: -0.12px;
+		}
+
+		.description {
+			color: var(--bg-vanilla-400);
+			font-size: 12px;
+			font-weight: 400;
+			line-height: 18px;
+		}
+	}
+}
+
+.lightMode {
+	.hero-section {
+		border-bottom: 1px solid var(--bg-vanilla-300);
+
+		&__icon {
+			background-color: var(--bg-vanilla-100);
+			border-color: var(--bg-vanilla-300);
+		}
+
+		&__details {
+			.title {
+				color: var(--bg-ink-500);
+			}
+
+			.description {
+				color: var(--bg-ink-400);
+			}
+		}
+	}
+}
+.integrations-select {
+	height: 44px;
+}

frontend/src/container/CloudIntegrationPage/HeroSection/HeroSection.tsx

@@ -0,0 +1,34 @@
+import './HeroSection.style.scss';
+
+import { useIsDarkMode } from 'hooks/useDarkMode';
+
+import AccountActions from './components/AccountActions';
+
+function HeroSection(): JSX.Element {
+	const isDarkMode = useIsDarkMode();
+	return (
+		<div
+			className="hero-section"
+			style={
+				isDarkMode
+					? {
+							backgroundImage: `url('/Images/integrations-hero-bg.png')`,
+					  }
+					: {}
+			}
+		>
+			<div className="hero-section__icon">
+				<img src="/Logos/aws-dark.svg" alt="aws-logo" />
+			</div>
+			<div className="hero-section__details">
+				<div className="title">Amazon Web Services</div>
+				<div className="description">
+					One-click setup for AWS monitoring with SigNoz
+				</div>
+				<AccountActions />
+			</div>
+		</div>
+	);
+}
+
+export default HeroSection;

frontend/src/container/CloudIntegrationPage/HeroSection/components/AccountActions.style.scss

@@ -0,0 +1,142 @@
+.hero-section {
+	&__actions {
+		margin-top: 12px;
+
+		&-with-account {
+			display: flex;
+			flex-direction: column;
+			gap: 10px;
+		}
+	}
+
+	&__input-skeleton {
+		width: 300px;
+		margin-bottom: 16px;
+	}
+
+	&__new-account-button-skeleton {
+		width: 180px;
+		margin-right: 8px;
+	}
+
+	&__account-settings-button-skeleton {
+		width: 140px;
+	}
+	&__action-buttons {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+	}
+	&__action-button {
+		font-family: 'Inter';
+		border-radius: 2px;
+		cursor: pointer;
+		font-size: 12px;
+		font-weight: 500;
+		line-height: 16px;
+		padding: 8px 17px;
+	
+		&.primary {
+			background: var(--bg-robin-500);
+			border: none;
+			color: var(--bg-vanilla-100);
+		}
+	
+		&.secondary {
+			display: flex;
+			align-items: center;
+			border: 1px solid var(--bg-ink-300);
+			color: var(--bg-vanilla-100);
+			border-radius: 2px;
+			background: var(--bg-slate-400);
+			box-shadow: none;
+		}
+	}
+}
+
+.cloud-account-selector {
+	border-radius: 2px;
+	border: 1px solid var(--bg-ink-300);
+	background: linear-gradient(
+		139deg,
+		rgba(18, 19, 23, 0.8) 0%,
+		rgba(18, 19, 23, 0.9) 98.68%
+	);
+	box-shadow: 4px 10px 16px 2px rgba(0, 0, 0, 0.2);
+	-webkit-backdrop-filter: blur(20px);
+	backdrop-filter: blur(20px);
+	.ant-select-selector {
+		border-color: var(--bg-slate-400) !important;
+		background: var(--bg-ink-300) !important;
+		padding: 6px 8px !important;
+	}
+	.ant-select-selection-item {
+		color: var(--bg-vanilla-400);
+		font-size: 12px;
+		font-weight: 400;
+		line-height: 16px;
+	}
+
+	.account-option-item {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		&__selected {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			height: 14px;
+			width: 14px;
+			background-color: rgba(192, 193, 195, 0.2); /* #C0C1C3 with 0.2 opacity */
+			border-radius: 2px;
+		}
+	}
+}
+.lightMode {
+	.hero-section__action-button {
+		&.primary {
+			background: var(--bg-robin-500);
+			color: var(--bg-vanilla-100);
+		}
+
+		&.secondary {
+			border-color: var(--bg-vanilla-300);
+			color: var(--bg-ink-400);
+			background: var(--bg-vanilla-100);
+
+			&:hover {
+				border-color: var(--bg-vanilla-400);
+				color: var(--bg-ink-500);
+			}
+		}
+	}
+
+	.cloud-account-selector {
+		background: var(--bg-vanilla-100);
+		.ant-select-selector {
+			background: var(--bg-vanilla-100) !important;
+			border-color: var(--bg-vanilla-400) !important;
+		}
+		.ant-select-item-option-active {
+			background: var(--bg-vanilla-400) !important;
+		}
+
+		.ant-select-selection-item {
+			color: var(--bg-ink-400);
+		}
+
+		&:hover {
+			.ant-select-selector {
+				border-color: var(--bg-vanilla-400) !important;
+			}
+		}
+	}
+
+	.account-option-item {
+		color: var(--bg-ink-400);
+
+		&__selected {
+			background: var(--bg-robin-500);
+		}
+	}
+}

frontend/src/container/CloudIntegrationPage/HeroSection/components/AccountActions.tsx

@@ -0,0 +1,243 @@
+import './AccountActions.style.scss';
+
+import { Color } from '@signozhq/design-tokens';
+import { Button, Select, Skeleton } from 'antd';
+import { SelectProps } from 'antd/lib';
+import logEvent from 'api/common/logEvent';
+import { useAwsAccounts } from 'hooks/integration/aws/useAwsAccounts';
+import useUrlQuery from 'hooks/useUrlQuery';
+import { Check, ChevronDown } from 'lucide-react';
+import { useEffect, useMemo, useState } from 'react';
+import { useNavigate } from 'react-router-dom-v5-compat';
+
+import { CloudAccount } from '../../ServicesSection/types';
+import AccountSettingsModal from './AccountSettingsModal';
+import CloudAccountSetupModal from './CloudAccountSetupModal';
+
+interface AccountOptionItemProps {
+	label: React.ReactNode;
+	isSelected: boolean;
+}
+
+function AccountOptionItem({
+	label,
+	isSelected,
+}: AccountOptionItemProps): JSX.Element {
+	return (
+		<div className="account-option-item">
+			{label}
+			{isSelected && (
+				<div className="account-option-item__selected">
+					<Check size={12} color={Color.BG_VANILLA_100} />
+				</div>
+			)}
+		</div>
+	);
+}
+
+function renderOption(
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	option: any,
+	activeAccountId: string | undefined,
+): JSX.Element {
+	return (
+		<AccountOptionItem
+			label={option.label}
+			isSelected={option.value === activeAccountId}
+		/>
+	);
+}
+
+const getAccountById = (
+	accounts: CloudAccount[],
+	accountId: string,
+): CloudAccount | null =>
+	accounts.find((account) => account.cloud_account_id === accountId) || null;
+
+function AccountActionsRenderer({
+	accounts,
+	isLoading,
+	activeAccount,
+	selectOptions,
+	onAccountChange,
+	onIntegrationModalOpen,
+	onAccountSettingsModalOpen,
+}: {
+	accounts: CloudAccount[] | undefined;
+	isLoading: boolean;
+	activeAccount: CloudAccount | null;
+	selectOptions: SelectProps['options'];
+	onAccountChange: (value: string) => void;
+	onIntegrationModalOpen: () => void;
+	onAccountSettingsModalOpen: () => void;
+}): JSX.Element {
+	if (isLoading) {
+		return (
+			<div className="hero-section__actions-with-account">
+				<Skeleton.Input
+					active
+					size="large"
+					block
+					className="hero-section__input-skeleton"
+				/>
+				<div className="hero-section__action-buttons">
+					<Skeleton.Button
+						active
+						size="large"
+						className="hero-section__new-account-button-skeleton"
+					/>
+					<Skeleton.Button
+						active
+						size="large"
+						className="hero-section__account-settings-button-skeleton"
+					/>
+				</div>
+			</div>
+		);
+	}
+	if (accounts?.length) {
+		return (
+			<div className="hero-section__actions-with-account">
+				<Select
+					value={`Account: ${activeAccount?.cloud_account_id}`}
+					options={selectOptions}
+					rootClassName="cloud-account-selector"
+					placeholder="Select AWS Account"
+					suffixIcon={<ChevronDown size={16} color={Color.BG_VANILLA_400} />}
+					optionRender={(option): JSX.Element =>
+						renderOption(option, activeAccount?.cloud_account_id)
+					}
+					onChange={onAccountChange}
+				/>
+				<div className="hero-section__action-buttons">
+					<Button
+						type="primary"
+						className="hero-section__action-button primary"
+						onClick={onIntegrationModalOpen}
+					>
+						Add New AWS Account
+					</Button>
+					<Button
+						type="default"
+						className="hero-section__action-button secondary"
+						onClick={onAccountSettingsModalOpen}
+					>
+						Account Settings
+					</Button>
+				</div>
+			</div>
+		);
+	}
+	return (
+		<Button
+			className="hero-section__action-button primary"
+			onClick={onIntegrationModalOpen}
+		>
+			Integrate Now
+		</Button>
+	);
+}
+
+function AccountActions(): JSX.Element {
+	const urlQuery = useUrlQuery();
+	const navigate = useNavigate();
+	const { data: accounts, isLoading } = useAwsAccounts();
+
+	const initialAccount = useMemo(
+		() =>
+			accounts?.length
+				? getAccountById(accounts, urlQuery.get('cloudAccountId') || '') ||
+				  accounts[0]
+				: null,
+		[accounts, urlQuery],
+	);
+
+	const [activeAccount, setActiveAccount] = useState<CloudAccount | null>(
+		initialAccount,
+	);
+
+	// Update state when initial value changes
+	useEffect(() => {
+		if (initialAccount !== null) {
+			setActiveAccount(initialAccount);
+			const latestUrlQuery = new URLSearchParams(window.location.search);
+			latestUrlQuery.set('cloudAccountId', initialAccount.cloud_account_id);
+			navigate({ search: latestUrlQuery.toString() });
+		}
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [initialAccount]);
+
+	const [isIntegrationModalOpen, setIsIntegrationModalOpen] = useState(false);
+	const startAccountConnectionAttempt = (): void => {
+		setIsIntegrationModalOpen(true);
+		logEvent('AWS Integration: Account connection attempt started', {});
+	};
+
+	const [isAccountSettingsModalOpen, setIsAccountSettingsModalOpen] = useState(
+		false,
+	);
+	const openAccountSettings = (): void => {
+		setIsAccountSettingsModalOpen(true);
+		logEvent('AWS Integration: Account settings viewed', {
+			cloudAccountId: activeAccount?.cloud_account_id,
+		});
+	};
+
+	// log telemetry event when an account is viewed.
+	useEffect(() => {
+		if (activeAccount) {
+			logEvent('AWS Integration: Account viewed', {
+				cloudAccountId: activeAccount?.cloud_account_id,
+				status: activeAccount?.status,
+				enabledRegions: activeAccount?.config?.regions,
+			});
+		}
+	}, [activeAccount]);
+
+	const selectOptions: SelectProps['options'] = useMemo(
+		() =>
+			accounts?.length
+				? accounts.map((account) => ({
+						value: account.cloud_account_id,
+						label: account.cloud_account_id,
+				  }))
+				: [],
+		[accounts],
+	);
+
+	return (
+		<div className="hero-section__actions">
+			<AccountActionsRenderer
+				accounts={accounts}
+				isLoading={isLoading}
+				activeAccount={activeAccount}
+				selectOptions={selectOptions}
+				onAccountChange={(value): void => {
+					if (accounts) {
+						setActiveAccount(getAccountById(accounts, value));
+						urlQuery.set('cloudAccountId', value);
+						navigate({ search: urlQuery.toString() });
+					}
+				}}
+				onIntegrationModalOpen={startAccountConnectionAttempt}
+				onAccountSettingsModalOpen={openAccountSettings}
+			/>
+
+			{isIntegrationModalOpen && (
+				<CloudAccountSetupModal
+					onClose={(): void => setIsIntegrationModalOpen(false)}
+				/>
+			)}
+
+			{isAccountSettingsModalOpen && (
+				<AccountSettingsModal
+					onClose={(): void => setIsAccountSettingsModalOpen(false)}
+					account={activeAccount as CloudAccount}
+					setActiveAccount={setActiveAccount}
+				/>
+			)}
+		</div>
+	);
+}
+
+export default AccountActions;

frontend/src/container/CloudIntegrationPage/HeroSection/components/AccountSettingsModal.style.scss

@@ -0,0 +1,189 @@
+.account-settings-modal {
+	&__title-account-id {
+		color: var(--bg-vanilla-100);
+		font-family: 'Geist Mono';
+		font-size: 14px;
+		font-weight: 600;
+		line-height: 20px;
+	}
+
+	&__body {
+		display: flex;
+		flex-direction: column;
+		gap: 17px;
+		border-radius: 3px;
+		border: 1px solid var(--bg-slate-500);
+		padding: 14px;
+		&-account-info {
+			&-connected-account-details {
+				&-title {
+					color: var(--bg-vanilla-100);
+					font-size: 14px;
+					font-weight: 500;
+					line-height: 20px; /* 142.857% */
+					letter-spacing: -0.07px;
+				}
+				&-account-id {
+					color: var(--bg-vanilla-400);
+					font-size: 12px;
+					line-height: 18px;
+					letter-spacing: -0.06px;
+					&-account-id {
+						font-family: 'Geist Mono';
+						font-size: 12px;
+						font-weight: 700;
+						line-height: 18px;
+						letter-spacing: -0.06px;
+					}
+				}
+			}
+		}
+		&-regions-switch {
+			display: flex;
+			flex-direction: column;
+			gap: 10px;
+			&-title {
+				color: var(--bg-vanilla-100);
+				font-size: 14px;
+				font-weight: 500;
+				line-height: 20px;
+				letter-spacing: -0.07px;
+			}
+			&-switch {
+				display: flex;
+				align-items: center;
+				gap: 10px;
+				&-label {
+					color: var(--bg-vanilla-400);
+					background-color: transparent;
+					border: none;
+					font-family: Inter;
+					font-size: 12px;
+					font-weight: 400;
+					line-height: 18px;
+					letter-spacing: -0.005em;
+					cursor: pointer;
+				}
+			}
+		}
+		&-regions-select {
+			margin-top: 8px;
+		}
+	}
+
+	&__footer {
+		&-close-button,
+		&-save-button {
+			color: var(--bg-vanilla-100);
+			font-family: Inter;
+			font-size: 12px;
+			font-weight: 500;
+			padding-left: 16px;
+			padding-right: 16px;
+		}
+		&-close-button {
+			border-radius: 2px;
+			background: var(--bg-slate-400);
+			border: none;
+		}
+		&-save-button {
+			&:disabled {
+				background: var(--bg-robin-500);
+				color: var(--bg-vanilla-100);
+				opacity: 0.6;
+				border: none;
+			}
+			border-radius: 2px;
+			margin: 0 !important;
+		}
+	}
+	.ant-modal-body {
+		padding-bottom: 0 !important;
+	}
+	.ant-modal-footer {
+		margin: 0;
+		padding: 24px 24px 12px;
+	}
+
+	.integration-detail-content {
+		margin: 0;
+	}
+}
+
+.lightMode {
+	.account-settings-modal {
+		&__title-account-id {
+			color: var(--bg-ink-500);
+		}
+
+		&__body {
+			border-color: var(--bg-vanilla-300);
+
+			&-account-info {
+				&-connected-account-details {
+					&-title {
+						color: var(--bg-ink-500);
+					}
+
+					&-account-id {
+						color: var(--bg-ink-400);
+
+						&-account-id {
+							color: var(--bg-ink-500);
+						}
+					}
+				}
+			}
+
+			&-regions-switch {
+				&-title {
+					color: var(--bg-ink-500);
+				}
+
+				&-switch {
+					&-label {
+						color: var(--bg-ink-400);
+
+						&:hover {
+							color: var(--bg-ink-500);
+						}
+					}
+				}
+			}
+		}
+
+		&__footer {
+			&-close-button,
+			&-save-button {
+				color: var(--bg-vanilla-100);
+			}
+
+			&-close-button {
+				background: var(--bg-vanilla-100);
+				border: 1px solid var(--bg-vanilla-300);
+				color: var(--bg-ink-400);
+
+				&:hover {
+					border-color: var(--bg-vanilla-400);
+					color: var(--bg-ink-500);
+				}
+			}
+
+			&-save-button {
+				// Keep primary button same as dark mode
+				background: var(--bg-robin-500);
+				color: var(--bg-vanilla-100);
+
+				&:disabled {
+					background: var(--bg-robin-500);
+					color: var(--bg-vanilla-100);
+					opacity: 0.6;
+				}
+
+				&:not(:disabled):hover {
+					background: var(--bg-robin-400);
+				}
+			}
+		}
+	}
+}

frontend/src/container/CloudIntegrationPage/HeroSection/components/AccountSettingsModal.tsx

@@ -0,0 +1,194 @@
+import './AccountSettingsModal.style.scss';
+
+import { Form, Select, Switch } from 'antd';
+import SignozModal from 'components/SignozModal/SignozModal';
+import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
+import {
+	getRegionPreviewText,
+	useAccountSettingsModal,
+} from 'hooks/integration/aws/useAccountSettingsModal';
+import useUrlQuery from 'hooks/useUrlQuery';
+import history from 'lib/history';
+import { Dispatch, SetStateAction, useCallback } from 'react';
+import { useQueryClient } from 'react-query';
+
+import logEvent from '../../../../api/common/logEvent';
+import { CloudAccount } from '../../ServicesSection/types';
+import { RegionSelector } from './RegionSelector';
+import RemoveIntegrationAccount from './RemoveIntegrationAccount';
+
+interface AccountSettingsModalProps {
+	onClose: () => void;
+	account: CloudAccount;
+	setActiveAccount: Dispatch<SetStateAction<CloudAccount | null>>;
+}
+
+function AccountSettingsModal({
+	onClose,
+	account,
+	setActiveAccount,
+}: AccountSettingsModalProps): JSX.Element {
+	const {
+		form,
+		isLoading,
+		selectedRegions,
+		includeAllRegions,
+		isRegionSelectOpen,
+		isSaveDisabled,
+		setSelectedRegions,
+		setIncludeAllRegions,
+		setIsRegionSelectOpen,
+		handleIncludeAllRegionsChange,
+		handleSubmit,
+		handleClose,
+	} = useAccountSettingsModal({ onClose, account, setActiveAccount });
+
+	const queryClient = useQueryClient();
+	const urlQuery = useUrlQuery();
+
+	const handleRemoveIntegrationAccountSuccess = (): void => {
+		queryClient.invalidateQueries([REACT_QUERY_KEY.AWS_ACCOUNTS]);
+		urlQuery.delete('cloudAccountId');
+		handleClose();
+		history.replace({ search: urlQuery.toString() });
+
+		logEvent('AWS Integration: Account removed', {
+			id: account?.id,
+			cloudAccountId: account?.cloud_account_id,
+		});
+	};
+
+	const renderRegionSelector = useCallback(() => {
+		if (isRegionSelectOpen) {
+			return (
+				<RegionSelector
+					selectedRegions={selectedRegions}
+					setSelectedRegions={setSelectedRegions}
+					setIncludeAllRegions={setIncludeAllRegions}
+				/>
+			);
+		}
+
+		return (
+			<>
+				<div className="account-settings-modal__body-regions-switch-switch ">
+					<Switch
+						checked={includeAllRegions}
+						onChange={handleIncludeAllRegionsChange}
+					/>
+					<button
+						className="account-settings-modal__body-regions-switch-switch-label"
+						type="button"
+						onClick={(): void => handleIncludeAllRegionsChange(!includeAllRegions)}
+					>
+						Include all regions
+					</button>
+				</div>
+				<Select
+					suffixIcon={null}
+					placeholder="Select Region(s)"
+					className="cloud-account-setup-form__select account-settings-modal__body-regions-select integrations-select"
+					onClick={(): void => setIsRegionSelectOpen(true)}
+					mode="multiple"
+					maxTagCount={3}
+					value={getRegionPreviewText(selectedRegions)}
+					open={false}
+				/>
+			</>
+		);
+	}, [
+		isRegionSelectOpen,
+		selectedRegions,
+		includeAllRegions,
+		handleIncludeAllRegionsChange,
+		setIsRegionSelectOpen,
+		setSelectedRegions,
+		setIncludeAllRegions,
+	]);
+
+	const renderAccountDetails = useCallback(
+		() => (
+			<div className="account-settings-modal__body-account-info">
+				<div className="account-settings-modal__body-account-info-connected-account-details">
+					<div className="account-settings-modal__body-account-info-connected-account-details-title">
+						Connected Account details
+					</div>
+					<div className="account-settings-modal__body-account-info-connected-account-details-account-id">
+						AWS Account:{' '}
+						<span className="account-settings-modal__body-account-info-connected-account-details-account-id-account-id">
+							{account?.id}
+						</span>
+					</div>
+				</div>
+			</div>
+		),
+		[account?.id],
+	);
+
+	const modalTitle = (
+		<div className="account-settings-modal__title">
+			Account settings for{' '}
+			<span className="account-settings-modal__title-account-id">
+				{account?.id}
+			</span>
+		</div>
+	);
+
+	return (
+		<SignozModal
+			open
+			title={modalTitle}
+			onCancel={handleClose}
+			onOk={handleSubmit}
+			okText="Save"
+			okButtonProps={{
+				disabled: isSaveDisabled,
+				className: 'account-settings-modal__footer-save-button',
+				loading: isLoading,
+			}}
+			cancelButtonProps={{
+				className: 'account-settings-modal__footer-close-button',
+			}}
+			width={672}
+			rootClassName="account-settings-modal"
+		>
+			<Form
+				form={form}
+				layout="vertical"
+				initialValues={{
+					selectedRegions,
+					includeAllRegions,
+				}}
+			>
+				<div className="account-settings-modal__body">
+					{renderAccountDetails()}
+
+					<Form.Item
+						name="selectedRegions"
+						rules={[
+							{
+								validator: async (): Promise<void> => {
+									if (selectedRegions.length === 0) {
+										throw new Error('Please select at least one region to monitor');
+									}
+								},
+								message: 'Please select at least one region to monitor',
+							},
+						]}
+					>
+						{renderRegionSelector()}
+					</Form.Item>
+
+					<div className="integration-detail-content">
+						<RemoveIntegrationAccount
+							accountId={account?.id}
+							onRemoveIntegrationAccountSuccess={handleRemoveIntegrationAccountSuccess}
+						/>
+					</div>
+				</div>
+			</Form>
+		</SignozModal>
+	);
+}
+
+export default AccountSettingsModal;

frontend/src/container/CloudIntegrationPage/HeroSection/components/AlertMessage.tsx

@@ -0,0 +1,53 @@
+import { Color } from '@signozhq/design-tokens';
+import { Alert, Spin } from 'antd';
+import { LoaderCircle, TriangleAlert } from 'lucide-react';
+
+import { ModalStateEnum } from '../types';
+
+function AlertMessage({
+	modalState,
+}: {
+	modalState: ModalStateEnum;
+}): JSX.Element | null {
+	switch (modalState) {
+		case ModalStateEnum.WAITING:
+			return (
+				<Alert
+					message={
+						<div className="cloud-account-setup-form__alert-message">
+							<Spin
+								indicator={
+									<LoaderCircle
+										size={14}
+										color={Color.BG_AMBER_400}
+										className="anticon anticon-loading anticon-spin ant-spin-dot"
+									/>
+								}
+							/>
+							Waiting for connection, retrying in{' '}
+							<span className="retry-time">10</span> secs...
+						</div>
+					}
+					className="cloud-account-setup-form__alert"
+					type="warning"
+				/>
+			);
+		case ModalStateEnum.ERROR:
+			return (
+				<Alert
+					message={
+						<div className="cloud-account-setup-form__alert-message">
+							<TriangleAlert type="solid" size={15} color={Color.BG_SAKURA_400} />
+							{`We couldn't establish a connection to your AWS account. Please try again`}
+						</div>
+					}
+					type="error"
+					className="cloud-account-setup-form__alert"
+				/>
+			);
+		default:
+			return null;
+	}
+}
+
+export default AlertMessage;

frontend/src/container/CloudIntegrationPage/HeroSection/components/CloudAccountSetupModal.style.scss

@@ -0,0 +1,221 @@
+.cloud-account-setup-modal {
+	.account-setup-modal-footer {
+		&__confirm-button {
+			background: var(--bg-robin-500);
+			color: var(--bg-vanilla-100);
+			font-size: 12px;
+			font-weight: 500;
+		}
+		&__confirm-selection-count {
+			font-family: 'Geist Mono';
+		}
+		&__close-button {
+			background: var(--bg-slate-400);
+			border-radius: 2px;
+			color: var(--bg-vanilla-100);
+			font-family: 'Inter';
+			font-size: 12px;
+			font-weight: 500;
+		}
+	}
+
+	.cloud-account-setup-form {
+		.disabled {
+			opacity: 0.4;
+		}
+		&,
+		&__content {
+			display: flex;
+			flex-direction: column;
+			gap: 38px;
+		}
+		&__alert {
+			&.ant-alert {
+				padding: 12px;
+				border-radius: 6px;
+				font-size: 14px;
+				line-height: 22px; /* 157.143% */
+				letter-spacing: -0.07px;
+			}
+			&.ant-alert-error {
+				color: var(--bg-sakura-400);
+				border: 1px solid rgba(242, 71, 105, 0.1);
+				background: rgba(242, 71, 105, 0.1);
+			}
+			&.ant-alert-warning {
+				color: var(--bg-amber-400);
+				border: 1px solid rgba(255, 205, 86, 0.1);
+				background: rgba(255, 205, 86, 0.1);
+			}
+			&-message {
+				display: flex;
+				align-items: center;
+				gap: 8px;
+				.retry-time {
+					font-family: 'Geist Mono';
+					font-size: 14px;
+					font-weight: 600;
+					line-height: 22px;
+					letter-spacing: -0.07px;
+				}
+			}
+		}
+		&__form-group {
+			display: flex;
+			flex-direction: column;
+			gap: 12px;
+		}
+		&__title {
+			color: var(--bg-vanilla-100);
+			font-size: 14px;
+			font-weight: 500;
+			line-height: 20px;
+			letter-spacing: -0.07px;
+		}
+		&__description {
+			color: var(--bg-vanilla-400);
+			font-size: 12px;
+			font-weight: 400;
+			line-height: 18px;
+			letter-spacing: -0.06px;
+		}
+		&__select {
+			.ant-select-selection-item {
+				color: var(--bg-vanilla-100);
+				font-size: 14px;
+				line-height: 20px;
+				letter-spacing: -0.07px;
+			}
+		}
+		&__form-item {
+			margin: 0;
+		}
+		&__include-all-regions-switch {
+			display: flex;
+			align-items: center;
+			gap: 10px;
+			color: var(--bg-vanilla-400);
+			font-size: 12px;
+			line-height: 18px;
+			letter-spacing: -0.06px;
+			margin-bottom: 12px;
+			&-label {
+				background-color: transparent;
+				border: none;
+				color: var(--bg-vanilla-400);
+				font-size: 12px;
+				line-height: 18px;
+				letter-spacing: -0.06px;
+				cursor: pointer;
+			}
+		}
+		&__note {
+			padding: 12px;
+			color: var(--bg-robin-400);
+			font-size: 12px;
+			line-height: 22px;
+			letter-spacing: -0.06px;
+			border-radius: 4px;
+			border: 1px solid rgba(78, 116, 248, 0.1);
+			background: rgba(78, 116, 248, 0.1);
+		}
+		&__submit-button {
+			border-radius: 2px;
+			background: var(--bg-robin-500);
+			color: var(--bg-vanilla-100);
+			font-size: 14px;
+			font-weight: 500;
+			line-height: 20px;
+			&-content {
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				gap: 8px;
+			}
+			&:disabled {
+				opacity: 0.4;
+			}
+		}
+	}
+}
+
+.lightMode {
+	.cloud-account-setup-modal {
+		.account-setup-modal-footer {
+			&__confirm-button {
+				background: var(--bg-robin-500);
+				color: var(--bg-vanilla-100);
+			}
+
+			&__close-button {
+				background: var(--bg-vanilla-100);
+				border: 1px solid var(--bg-vanilla-300);
+				color: var(--bg-ink-400);
+
+				&:hover {
+					border-color: var(--bg-vanilla-400);
+					color: var(--bg-ink-500);
+				}
+			}
+		}
+
+		.cloud-account-setup-form {
+			&__title {
+				color: var(--bg-ink-500);
+			}
+
+			&__description {
+				color: var(--bg-ink-400);
+			}
+
+			&__select {
+				.ant-select-selection-item {
+					color: var(--bg-ink-500);
+				}
+			}
+
+			&__include-all-regions-switch {
+				color: var(--bg-ink-400);
+
+				&-label {
+					color: var(--bg-ink-400);
+
+					&:hover {
+						color: var(--bg-ink-500);
+					}
+				}
+			}
+
+			&__note {
+				color: var(--bg-robin-500);
+				border: 1px solid rgba(78, 116, 248, 0.2);
+				background: rgba(78, 116, 248, 0.1);
+			}
+
+			&__submit-button {
+				background: var(--bg-robin-500);
+				color: var(--bg-vanilla-100);
+			}
+
+			&__alert {
+				&.ant-alert-error {
+					color: var(--bg-cherry-500);
+					border: 1px solid rgba(242, 71, 105, 0.2);
+					background: rgba(242, 71, 105, 0.1);
+				}
+
+				&.ant-alert-warning {
+					color: var(--bg-amber-500);
+					border: 1px solid rgba(255, 205, 86, 0.2);
+					background: rgba(255, 205, 86, 0.1);
+				}
+
+				&-message {
+					.retry-time {
+						color: var(--bg-ink-500);
+					}
+				}
+			}
+		}
+	}
+}

frontend/src/container/CloudIntegrationPage/HeroSection/components/CloudAccountSetupModal.tsx

@@ -0,0 +1,190 @@
+import './CloudAccountSetupModal.style.scss';
+
+import { Color } from '@signozhq/design-tokens';
+import SignozModal from 'components/SignozModal/SignozModal';
+import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
+import { useIntegrationModal } from 'hooks/integration/aws/useIntegrationModal';
+import { SquareArrowOutUpRight } from 'lucide-react';
+import { useCallback } from 'react';
+import { useQueryClient } from 'react-query';
+
+import {
+	ActiveViewEnum,
+	IntegrationModalProps,
+	ModalStateEnum,
+} from '../types';
+import { RegionForm } from './RegionForm';
+import { RegionSelector } from './RegionSelector';
+import { SuccessView } from './SuccessView';
+
+function CloudAccountSetupModal({
+	onClose,
+}: IntegrationModalProps): JSX.Element {
+	const queryClient = useQueryClient();
+	const {
+		form,
+		modalState,
+		setModalState,
+		isLoading,
+		activeView,
+		selectedRegions,
+		includeAllRegions,
+		isGeneratingUrl,
+		setSelectedRegions,
+		setIncludeAllRegions,
+		handleIncludeAllRegionsChange,
+		handleRegionSelect,
+		handleSubmit,
+		handleClose,
+		setActiveView,
+		allRegions,
+		accountId,
+		selectedDeploymentRegion,
+		handleRegionChange,
+		connectionParams,
+		isConnectionParamsLoading,
+	} = useIntegrationModal({ onClose });
+
+	const renderContent = useCallback(() => {
+		if (modalState === ModalStateEnum.SUCCESS) {
+			return <SuccessView />;
+		}
+
+		if (activeView === ActiveViewEnum.SELECT_REGIONS) {
+			return (
+				<RegionSelector
+					selectedRegions={selectedRegions}
+					setSelectedRegions={setSelectedRegions}
+					setIncludeAllRegions={setIncludeAllRegions}
+				/>
+			);
+		}
+
+		return (
+			<RegionForm
+				form={form}
+				modalState={modalState}
+				setModalState={setModalState}
+				selectedRegions={selectedRegions}
+				includeAllRegions={includeAllRegions}
+				onIncludeAllRegionsChange={handleIncludeAllRegionsChange}
+				onRegionSelect={handleRegionSelect}
+				onSubmit={handleSubmit}
+				accountId={accountId}
+				selectedDeploymentRegion={selectedDeploymentRegion}
+				handleRegionChange={handleRegionChange}
+				connectionParams={connectionParams}
+				isConnectionParamsLoading={isConnectionParamsLoading}
+			/>
+		);
+	}, [
+		modalState,
+		activeView,
+		form,
+		setModalState,
+		selectedRegions,
+		includeAllRegions,
+		handleIncludeAllRegionsChange,
+		handleRegionSelect,
+		handleSubmit,
+		accountId,
+		selectedDeploymentRegion,
+		handleRegionChange,
+		connectionParams,
+		isConnectionParamsLoading,
+		setSelectedRegions,
+		setIncludeAllRegions,
+	]);
+
+	const getSelectedRegionsCount = useCallback(
+		(): number =>
+			selectedRegions.includes('all') ? allRegions.length : selectedRegions.length,
+		[selectedRegions, allRegions],
+	);
+
+	const getModalConfig = useCallback(() => {
+		// Handle success state first
+		if (modalState === ModalStateEnum.SUCCESS) {
+			return {
+				title: 'AWS Integration',
+				okText: (
+					<div className="cloud-account-setup-success-view__footer-button">
+						Continue
+					</div>
+				),
+				block: true,
+				onOk: (): void => {
+					queryClient.invalidateQueries([REACT_QUERY_KEY.AWS_ACCOUNTS]);
+					handleClose();
+				},
+				cancelButtonProps: { style: { display: 'none' } },
+				disabled: false,
+			};
+		}
+
+		// Handle other views
+		const viewConfigs = {
+			[ActiveViewEnum.FORM]: {
+				title: 'Add AWS Account',
+				okText: (
+					<div className="cloud-account-setup-form__submit-button-content">
+						Launch Cloud Formation Template{' '}
+						<SquareArrowOutUpRight size={17} color={Color.BG_VANILLA_100} />
+					</div>
+				),
+				onOk: handleSubmit,
+				disabled:
+					isLoading || isGeneratingUrl || modalState === ModalStateEnum.WAITING,
+				cancelButtonProps: { style: { display: 'none' } },
+			},
+			[ActiveViewEnum.SELECT_REGIONS]: {
+				title: 'Which regions do you want to monitor?',
+				okText: `Confirm Selection (${getSelectedRegionsCount()})`,
+				onOk: (): void => setActiveView(ActiveViewEnum.FORM),
+				isLoading: isLoading || isGeneratingUrl,
+				cancelButtonProps: { style: { display: 'block' } },
+				disabled: false,
+			},
+		};
+
+		return viewConfigs[activeView];
+	}, [
+		modalState,
+		handleSubmit,
+		getSelectedRegionsCount,
+		isLoading,
+		isGeneratingUrl,
+		activeView,
+		handleClose,
+		setActiveView,
+		queryClient,
+	]);
+
+	const modalConfig = getModalConfig();
+
+	return (
+		<SignozModal
+			open
+			className="cloud-account-setup-modal"
+			title={modalConfig.title}
+			onCancel={handleClose}
+			onOk={modalConfig.onOk}
+			okText={modalConfig.okText}
+			okButtonProps={{
+				loading: isLoading,
+				disabled: selectedRegions.length === 0 || modalConfig.disabled,
+				className:
+					activeView === ActiveViewEnum.FORM
+						? 'cloud-account-setup-form__submit-button'
+						: 'account-setup-modal-footer__confirm-button',
+				block: activeView === ActiveViewEnum.FORM,
+			}}
+			cancelButtonProps={modalConfig.cancelButtonProps}
+			width={672}
+		>
+			{renderContent()}
+		</SignozModal>
+	);
+}
+
+export default CloudAccountSetupModal;

frontend/src/container/CloudIntegrationPage/HeroSection/components/IntegrateNowFormSections.tsx

@@ -0,0 +1,137 @@
+import { Color } from '@signozhq/design-tokens';
+import { Form, Select, Switch } from 'antd';
+import { ChevronDown } from 'lucide-react';
+import { Region } from 'utils/regions';
+
+// Form section components
+function RegionDeploymentSection({
+	regions,
+	selectedDeploymentRegion,
+	handleRegionChange,
+	isFormDisabled,
+}: {
+	regions: Region[];
+	selectedDeploymentRegion: string | undefined;
+	handleRegionChange: (value: string) => void;
+	isFormDisabled: boolean;
+}): JSX.Element {
+	return (
+		<div className="cloud-account-setup-form__form-group">
+			<div className="cloud-account-setup-form__title">
+				Where should we deploy the SigNoz Cloud stack?
+			</div>
+			<div className="cloud-account-setup-form__description">
+				Choose the AWS region for CloudFormation stack deployment
+			</div>
+			<Form.Item
+				name="region"
+				rules={[{ required: true, message: 'Please select a region' }]}
+				className="cloud-account-setup-form__form-item"
+			>
+				<Select
+					placeholder="e.g. US East (N. Virginia)"
+					suffixIcon={<ChevronDown size={16} color={Color.BG_VANILLA_400} />}
+					className="cloud-account-setup-form__select integrations-select"
+					onChange={handleRegionChange}
+					value={selectedDeploymentRegion}
+					disabled={isFormDisabled}
+				>
+					{regions.flatMap((region) =>
+						region.subRegions.map((subRegion) => (
+							<Select.Option key={subRegion.id} value={subRegion.id}>
+								{subRegion.displayName}
+							</Select.Option>
+						)),
+					)}
+				</Select>
+			</Form.Item>
+		</div>
+	);
+}
+
+function MonitoringRegionsSection({
+	includeAllRegions,
+	selectedRegions,
+	onIncludeAllRegionsChange,
+	getRegionPreviewText,
+	onRegionSelect,
+	isFormDisabled,
+}: {
+	includeAllRegions: boolean;
+	selectedRegions: string[];
+	onIncludeAllRegionsChange: (checked: boolean) => void;
+	getRegionPreviewText: (regions: string[]) => string[];
+	onRegionSelect: () => void;
+	isFormDisabled: boolean;
+}): JSX.Element {
+	return (
+		<div className="cloud-account-setup-form__form-group">
+			<div className="cloud-account-setup-form__title">
+				Which regions do you want to monitor?
+			</div>
+			<div className="cloud-account-setup-form__description">
+				Choose only the regions you want SigNoz to monitor. You can enable all at
+				once, or pick specific ones:
+			</div>
+			<Form.Item
+				name="monitorRegions"
+				rules={[
+					{
+						validator: async (): Promise<void> => {
+							if (selectedRegions.length === 0) {
+								return Promise.reject();
+							}
+							return Promise.resolve();
+						},
+						message: 'Please select at least one region to monitor',
+					},
+				]}
+				className="cloud-account-setup-form__form-item"
+			>
+				<div className="cloud-account-setup-form__include-all-regions-switch">
+					<Switch
+						size="small"
+						checked={includeAllRegions}
+						onChange={onIncludeAllRegionsChange}
+						disabled={isFormDisabled}
+					/>
+					<button
+						className="cloud-account-setup-form__include-all-regions-switch-label"
+						type="button"
+						onClick={(): void =>
+							!isFormDisabled
+								? onIncludeAllRegionsChange(!includeAllRegions)
+								: undefined
+						}
+					>
+						Include all regions
+					</button>
+				</div>
+				<Select
+					suffixIcon={null}
+					placeholder="Select Region(s)"
+					className="cloud-account-setup-form__select integrations-select"
+					onClick={!isFormDisabled ? onRegionSelect : undefined}
+					mode="multiple"
+					maxTagCount={3}
+					value={getRegionPreviewText(selectedRegions)}
+					open={false}
+				/>
+			</Form.Item>
+		</div>
+	);
+}
+
+function ComplianceNote(): JSX.Element {
+	return (
+		<div className="cloud-account-setup-form__form-group">
+			<div className="cloud-account-setup-form__note">
+				Note: Some organizations may require the CloudFormation stack to be deployed
+				in the same region as their primary infrastructure for compliance or latency
+				reasons.
+			</div>
+		</div>
+	);
+}
+
+export { ComplianceNote, MonitoringRegionsSection, RegionDeploymentSection };

frontend/src/container/CloudIntegrationPage/HeroSection/components/RegionForm.tsx

@@ -0,0 +1,109 @@
+import { Form } from 'antd';
+import cx from 'classnames';
+import { useAccountStatus } from 'hooks/integration/aws/useAccountStatus';
+import { useRef } from 'react';
+import { AccountStatusResponse } from 'types/api/integrations/aws';
+import { regions } from 'utils/regions';
+
+import logEvent from '../../../../api/common/logEvent';
+import { ModalStateEnum, RegionFormProps } from '../types';
+import AlertMessage from './AlertMessage';
+import {
+	ComplianceNote,
+	MonitoringRegionsSection,
+	RegionDeploymentSection,
+} from './IntegrateNowFormSections';
+import RenderConnectionFields from './RenderConnectionParams';
+
+const allRegions = (): string[] =>
+	regions.flatMap((r) => r.subRegions.map((sr) => sr.name));
+
+const getRegionPreviewText = (regions: string[]): string[] => {
+	if (regions.includes('all')) {
+		return allRegions();
+	}
+	return regions;
+};
+
+export function RegionForm({
+	form,
+	modalState,
+	setModalState,
+	selectedRegions,
+	includeAllRegions,
+	onIncludeAllRegionsChange,
+	onRegionSelect,
+	onSubmit,
+	accountId,
+	selectedDeploymentRegion,
+	handleRegionChange,
+	connectionParams,
+	isConnectionParamsLoading,
+}: RegionFormProps): JSX.Element {
+	const startTimeRef = useRef(Date.now());
+	const refetchInterval = 10 * 1000;
+	const errorTimeout = 10 * 60 * 1000;
+
+	const { isLoading: isAccountStatusLoading } = useAccountStatus(accountId, {
+		refetchInterval,
+		enabled: !!accountId && modalState === ModalStateEnum.WAITING,
+		onSuccess: (data: AccountStatusResponse) => {
+			if (data.data.status.integration.last_heartbeat_ts_ms !== null) {
+				setModalState(ModalStateEnum.SUCCESS);
+				logEvent('AWS Integration: Account connected', {
+					cloudAccountId: data?.data?.cloud_account_id,
+					status: data?.data?.status,
+				});
+			} else if (Date.now() - startTimeRef.current >= errorTimeout) {
+				setModalState(ModalStateEnum.ERROR);
+				logEvent('AWS Integration: Account connection attempt timed out', {
+					id: accountId,
+				});
+			}
+		},
+		onError: () => {
+			setModalState(ModalStateEnum.ERROR);
+		},
+	});
+
+	const isFormDisabled =
+		modalState === ModalStateEnum.WAITING || isAccountStatusLoading;
+
+	return (
+		<Form
+			form={form}
+			className="cloud-account-setup-form"
+			layout="vertical"
+			onFinish={onSubmit}
+		>
+			<AlertMessage modalState={modalState} />
+
+			<div
+				className={cx(`cloud-account-setup-form__content`, {
+					disabled: isFormDisabled,
+				})}
+			>
+				<RegionDeploymentSection
+					regions={regions}
+					handleRegionChange={handleRegionChange}
+					isFormDisabled={isFormDisabled}
+					selectedDeploymentRegion={selectedDeploymentRegion}
+				/>
+				<MonitoringRegionsSection
+					includeAllRegions={includeAllRegions}
+					selectedRegions={selectedRegions}
+					onIncludeAllRegionsChange={onIncludeAllRegionsChange}
+					getRegionPreviewText={getRegionPreviewText}
+					onRegionSelect={onRegionSelect}
+					isFormDisabled={isFormDisabled}
+				/>
+				<ComplianceNote />
+				<RenderConnectionFields
+					isConnectionParamsLoading={isConnectionParamsLoading}
+					connectionParams={connectionParams}
+					isFormDisabled={isFormDisabled}
+				/>
+			</div>
+		</Form>
+	);
+}

frontend/src/container/CloudIntegrationPage/HeroSection/components/RegionSelector.style.scss

@@ -0,0 +1,21 @@
+.select-all {
+	margin-bottom: 20px;
+}
+
+.regions-grid {
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
+	gap: 8px;
+}
+
+.region-group {
+	display: flex;
+	flex-direction: column;
+	gap: 4px;
+}
+
+.region-group label {
+	display: flex;
+	gap: 10px;
+	align-items: center;
+}

frontend/src/container/CloudIntegrationPage/HeroSection/components/RegionSelector.tsx

@@ -0,0 +1,63 @@
+import './RegionSelector.style.scss';
+
+import { Checkbox } from 'antd';
+import { useRegionSelection } from 'hooks/integration/aws/useRegionSelection';
+import { Dispatch, SetStateAction } from 'react';
+import { regions } from 'utils/regions';
+
+export function RegionSelector({
+	selectedRegions,
+	setSelectedRegions,
+	setIncludeAllRegions,
+}: {
+	selectedRegions: string[];
+	setSelectedRegions: Dispatch<SetStateAction<string[]>>;
+	setIncludeAllRegions: Dispatch<SetStateAction<boolean>>;
+}): JSX.Element {
+	const {
+		allRegionIds,
+		handleSelectAll,
+		handleRegionSelect,
+	} = useRegionSelection({
+		selectedRegions,
+		setSelectedRegions,
+		setIncludeAllRegions,
+	});
+
+	return (
+		<div className="region-selector">
+			<div className="select-all">
+				<Checkbox
+					checked={selectedRegions.includes('all')}
+					indeterminate={
+						selectedRegions.length > 20 &&
+						selectedRegions.length < allRegionIds.length
+					}
+					onChange={(e): void => handleSelectAll(e.target.checked)}
+				>
+					Select All Regions
+				</Checkbox>
+			</div>
+
+			<div className="regions-grid">
+				{regions.map((region) => (
+					<div key={region.id} className="region-group">
+						<h3>{region.name}</h3>
+						{region.subRegions.map((subRegion) => (
+							<Checkbox
+								key={subRegion.id}
+								checked={
+									selectedRegions.includes('all') ||
+									selectedRegions.includes(subRegion.id)
+								}
+								onChange={(): void => handleRegionSelect(subRegion.id)}
+							>
+								{subRegion.name}
+							</Checkbox>
+						))}
+					</div>
+				))}
+			</div>
+		</div>
+	);
+}

frontend/src/container/CloudIntegrationPage/HeroSection/components/RemoveIntegrationAccount.scss

@@ -0,0 +1,48 @@
+.remove-integration-account {
+	display: flex;
+	justify-content: space-between;
+	padding: 16px;
+	border-radius: 4px;
+	border: 1px solid rgba(218, 85, 101, 0.2);
+	background: rgba(218, 85, 101, 0.06);
+	&__header {
+		display: flex;
+		flex-direction: column;
+		gap: 6px;
+	}
+
+	&__title {
+		color: var(--bg-cherry-500);
+		font-size: 14px;
+		letter-spacing: -0.07px;
+	}
+
+	&__subtitle {
+		color: var(--bg-cherry-300);
+		font-size: 14px;
+		line-height: 22px;
+		letter-spacing: -0.07px;
+	}
+
+	&__button {
+		display: flex;
+		align-items: center;
+		background: var(--bg-cherry-500);
+		border: none;
+		color: var(--bg-vanilla-100);
+		font-size: 12px;
+		font-weight: 500;
+		line-height: 13.3px; /* 110.833% */
+		padding: 9px 13px;
+		.ant-btn-icon {
+			margin-inline-end: 4px !important;
+		}
+
+		&:hover {
+			&.ant-btn-default {
+				color: var(--bg-vanilla-300) !important;
+			}
+		}
+	}
+}
+

frontend/src/container/CloudIntegrationPage/HeroSection/components/RemoveIntegrationAccount.tsx

@@ -0,0 +1,94 @@
+import './RemoveIntegrationAccount.scss';
+
+import { Button, Modal } from 'antd';
+import logEvent from 'api/common/logEvent';
+import removeAwsIntegrationAccount from 'api/Integrations/removeAwsIntegrationAccount';
+import { SOMETHING_WENT_WRONG } from 'constants/api';
+import { useNotifications } from 'hooks/useNotifications';
+import { X } from 'lucide-react';
+import { INTEGRATION_TELEMETRY_EVENTS } from 'pages/Integrations/utils';
+import { useState } from 'react';
+import { useMutation } from 'react-query';
+
+function RemoveIntegrationAccount({
+	accountId,
+	onRemoveIntegrationAccountSuccess,
+}: {
+	accountId: string;
+	onRemoveIntegrationAccountSuccess: () => void;
+}): JSX.Element {
+	const { notifications } = useNotifications();
+	const [isModalOpen, setIsModalOpen] = useState(false);
+
+	const showModal = (): void => {
+		setIsModalOpen(true);
+	};
+
+	const {
+		mutate: removeIntegration,
+		isLoading: isRemoveIntegrationLoading,
+	} = useMutation(removeAwsIntegrationAccount, {
+		onSuccess: () => {
+			onRemoveIntegrationAccountSuccess?.();
+			setIsModalOpen(false);
+		},
+		onError: () => {
+			notifications.error({
+				message: SOMETHING_WENT_WRONG,
+			});
+		},
+	});
+	const handleOk = (): void => {
+		logEvent(INTEGRATION_TELEMETRY_EVENTS.AWS_INTEGRATION_ACCOUNT_REMOVED, {
+			accountId,
+		});
+		removeIntegration(accountId);
+	};
+
+	const handleCancel = (): void => {
+		setIsModalOpen(false);
+	};
+
+	return (
+		<div className="remove-integration-account">
+			<div className="remove-integration-account__header">
+				<div className="remove-integration-account__title">Remove Integration</div>
+				<div className="remove-integration-account__subtitle">
+					Removing this integration won&apos;t delete any existing data but will stop
+					collecting new data from AWS.
+				</div>
+			</div>
+			<Button
+				className="remove-integration-account__button"
+				icon={<X size={14} />}
+				onClick={(): void => showModal()}
+			>
+				Remove
+			</Button>
+			<Modal
+				className="remove-integration-modal"
+				open={isModalOpen}
+				title="Remove integration"
+				onOk={handleOk}
+				onCancel={handleCancel}
+				okText="Remove Integration"
+				okButtonProps={{
+					danger: true,
+					disabled: isRemoveIntegrationLoading,
+				}}
+			>
+				<div className="remove-integration-modal__text">
+					Removing this account will remove all components created for sending
+					telemetry to SigNoz in your AWS account within the next ~15 minutes
+					(cloudformation stacks named signoz-integration-telemetry-collection in
+					enabled regions). <br />
+					<br />
+					After that, you can delete the cloudformation stack that was created
+					manually when connecting this account.
+				</div>
+			</Modal>
+		</div>
+	);
+}
+
+export default RemoveIntegrationAccount;

frontend/src/container/CloudIntegrationPage/HeroSection/components/RenderConnectionParams.tsx

@@ -0,0 +1,71 @@
+import { Form, Input } from 'antd';
+import { ConnectionParams } from 'types/api/integrations/aws';
+
+function RenderConnectionFields({
+	isConnectionParamsLoading,
+	connectionParams,
+	isFormDisabled,
+}: {
+	isConnectionParamsLoading?: boolean;
+	connectionParams?: ConnectionParams | null;
+	isFormDisabled?: boolean;
+}): JSX.Element | null {
+	if (
+		isConnectionParamsLoading ||
+		(!!connectionParams?.ingestion_url &&
+			!!connectionParams?.ingestion_key &&
+			!!connectionParams?.signoz_api_url &&
+			!!connectionParams?.signoz_api_key)
+	) {
+		return null;
+	}
+
+	return (
+		<Form.Item name="connection_params">
+			{!connectionParams?.ingestion_url && (
+				<Form.Item
+					name="ingestion_url"
+					label="Ingestion URL"
+					rules={[{ required: true, message: 'Please enter ingestion URL' }]}
+				>
+					<Input placeholder="Enter ingestion URL" disabled={isFormDisabled} />
+				</Form.Item>
+			)}
+			{!connectionParams?.ingestion_key && (
+				<Form.Item
+					name="ingestion_key"
+					label="Ingestion Key"
+					rules={[{ required: true, message: 'Please enter ingestion key' }]}
+				>
+					<Input placeholder="Enter ingestion key" disabled={isFormDisabled} />
+				</Form.Item>
+			)}
+			{!connectionParams?.signoz_api_url && (
+				<Form.Item
+					name="signoz_api_url"
+					label="SigNoz API URL"
+					rules={[{ required: true, message: 'Please enter SigNoz API URL' }]}
+				>
+					<Input placeholder="Enter SigNoz API URL" disabled={isFormDisabled} />
+				</Form.Item>
+			)}
+			{!connectionParams?.signoz_api_key && (
+				<Form.Item
+					name="signoz_api_key"
+					label="SigNoz API KEY"
+					rules={[{ required: true, message: 'Please enter SigNoz API Key' }]}
+				>
+					<Input placeholder="Enter SigNoz API Key" disabled={isFormDisabled} />
+				</Form.Item>
+			)}
+		</Form.Item>
+	);
+}
+
+RenderConnectionFields.defaultProps = {
+	connectionParams: null,
+	isFormDisabled: false,
+	isConnectionParamsLoading: false,
+};
+
+export default RenderConnectionFields;

frontend/src/container/CloudIntegrationPage/HeroSection/components/SuccessView.style.scss

@@ -0,0 +1,156 @@
+.cloud-account-setup-success-view {
+	display: flex;
+	flex-direction: column;
+	gap: 40px;
+	text-align: center;
+	padding-top: 34px;
+	p,
+	h3,
+	h4 {
+		margin: 0;
+	}
+	&__content {
+		display: flex;
+		flex-direction: column;
+		gap: 14px;
+		.cloud-account-setup-success-view {
+			&__title {
+				h3 {
+					color: var(--bg-vanilla-100);
+					font-size: 20px;
+					font-weight: 500;
+					line-height: 32px;
+				}
+			}
+			&__description {
+				color: var(--bg-vanilla-400);
+				font-size: 14px;
+				font-weight: 400;
+				line-height: 20px;
+				letter-spacing: -0.07px;
+			}
+		}
+	}
+	&__what-next {
+		display: flex;
+		flex-direction: column;
+		gap: 18px;
+		text-align: left;
+		&-title {
+			color: var(--bg-slate-50);
+			font-size: 11px;
+			font-weight: 500;
+			line-height: 18px;
+			letter-spacing: 0.88px;
+			text-transform: uppercase;
+		}
+		.what-next-items-wrapper {
+			display: flex;
+			flex-direction: column;
+			gap: 12px;
+			&__item {
+				display: flex;
+				gap: 10px;
+				align-items: baseline;
+				&.ant-alert {
+					padding: 14px;
+					border-radius: 8px;
+					font-size: 14px;
+					line-height: 20px; /* 142.857% */
+					letter-spacing: -0.21px;
+				}
+				&.ant-alert-info {
+					border: 1px solid rgba(63, 94, 204, 0.5);
+					background: rgba(78, 116, 248, 0.2);
+					color: var(--bg-robin-400);
+				}
+
+				.what-next-item {
+					color: var(--bg-robin-400);
+					&-bullet-icon {
+						font-size: 20px;
+						line-height: 20px;
+					}
+					&-text {
+						font-size: 14px;
+						font-weight: 500;
+						line-height: 20px;
+						letter-spacing: -0.21px;
+					}
+				}
+			}
+		}
+	}
+	&__footer {
+		padding-top: 18px;
+		.ant-btn {
+			background: var(--bg-robin-500);
+			color: var(--bg-vanilla-100);
+			font-size: 14px;
+			font-weight: 500;
+			line-height: 20px;
+			height: 36px;
+		}
+	}
+}
+.lottie-container {
+	position: absolute;
+	width: 743.5px;
+	height: 990.342px;
+	top: -100px;
+	left: -36px;
+	z-index: 1;
+}
+
+.lightMode {
+	.cloud-account-setup-success-view {
+		&__content {
+			.cloud-account-setup-success-view {
+				&__title {
+					h3 {
+						color: var(--bg-ink-500);
+					}
+				}
+
+				&__description {
+					color: var(--bg-ink-400);
+				}
+			}
+		}
+
+		&__what-next {
+			&-title {
+				color: var(--bg-ink-500);
+			}
+
+			.what-next-items-wrapper {
+				&__item {
+					&.ant-alert-info {
+						border: 1px solid rgba(63, 94, 204, 0.2);
+						background: rgba(78, 116, 248, 0.1);
+						color: var(--bg-robin-500);
+					}
+
+					.what-next-item {
+						color: var(--bg-robin-500);
+
+						&-text {
+							color: var(--bg-robin-500);
+						}
+					}
+				}
+			}
+		}
+
+		&__footer {
+			.ant-btn {
+				background: var(--bg-robin-500);
+				color: var(--bg-vanilla-100);
+
+				&:hover {
+					background: var(--bg-robin-400);
+				}
+			}
+		}
+	}
+}

frontend/src/container/CloudIntegrationPage/HeroSection/components/SuccessView.tsx

@@ -0,0 +1,73 @@
+import './SuccessView.style.scss';
+
+import { Alert } from 'antd';
+import integrationsSuccess from 'assets/Lotties/integrations-success.json';
+import { useState } from 'react';
+import Lottie from 'react-lottie';
+
+export function SuccessView(): JSX.Element {
+	const [isAnimationComplete, setIsAnimationComplete] = useState(false);
+
+	const defaultOptions = {
+		loop: false,
+		autoplay: true,
+		animationData: integrationsSuccess,
+		rendererSettings: {
+			preserveAspectRatio: 'xMidYMid slice',
+		},
+	};
+
+	return (
+		<>
+			{!isAnimationComplete && (
+				<div className="lottie-container">
+					<Lottie
+						options={defaultOptions}
+						height={990.342}
+						width={743.5}
+						eventListeners={[
+							{
+								eventName: 'complete',
+								callback: (): void => setIsAnimationComplete(true),
+							},
+						]}
+					/>
+				</div>
+			)}
+			<div className="cloud-account-setup-success-view">
+				<div className="cloud-account-setup-success-view__icon">
+					<img src="Icons/solid-check-circle.svg" alt="Success" />
+				</div>
+				<div className="cloud-account-setup-success-view__content">
+					<div className="cloud-account-setup-success-view__title">
+						<h3>🎉 Success! </h3>
+						<h3>Your AWS Web Service integration is all set.</h3>
+					</div>
+					<div className="cloud-account-setup-success-view__description">
+						<p>Your observability journey is off to a great start. </p>
+						<p>Now that your data is flowing, here’s what you can do next:</p>
+					</div>
+				</div>
+				<div className="cloud-account-setup-success-view__what-next">
+					<h4 className="cloud-account-setup-success-view__what-next-title">
+						WHAT NEXT
+					</h4>
+					<div className="what-next-items-wrapper">
+						<Alert
+							message={
+								<div className="what-next-items-wrapper__item">
+									<div className="what-next-item-bullet-icon">•</div>
+									<div className="what-next-item-text">
+										Set up your AWS services effortlessly under your enabled account.
+									</div>
+								</div>
+							}
+							type="info"
+							className="what-next-items-wrapper__item"
+						/>
+					</div>
+				</div>
+			</div>
+		</>
+	);
+}