chore(release): bump to v0.84.1 (#7998)

#### Summary
 - Release SigNoz v0.84.1

.github/workflows/goci.yaml

@@ -37,6 +37,15 @@ jobs:
     with:
       PRIMUS_REF: main
       GO_VERSION: 1.23
+  deps:
+    if: |
+      (github.event_name == 'pull_request' && ! github.event.pull_request.head.repo.fork && github.event.pull_request.user.login != 'dependabot[bot]' && ! contains(github.event.pull_request.labels.*.name, 'safe-to-test')) ||
+      (github.event_name == 'pull_request_target' && contains(github.event.pull_request.labels.*.name, 'safe-to-test'))
+    uses: signoz/primus.workflows/.github/workflows/go-deps.yaml@main
+    secrets: inherit
+    with:
+      PRIMUS_REF: main
+      GO_VERSION: 1.23
   build:
     if: |
       (github.event_name == 'pull_request' && ! github.event.pull_request.head.repo.fork && github.event.pull_request.user.login != 'dependabot[bot]' && ! contains(github.event.pull_request.labels.*.name, 'safe-to-test')) ||

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

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

deploy/docker-swarm/docker-compose.yaml

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

deploy/docker/docker-compose.ha.yaml

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

deploy/docker/docker-compose.yaml

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

ee/http/middleware/pat.go

@@ -61,14 +61,14 @@ func (p *Pat) Wrap(next http.Handler) http.Handler {
 			return
 		}
 
-		role, err := authtypes.NewRole(user.Role)
+		role, err := types.NewRole(user.Role)
 		if err != nil {
 			next.ServeHTTP(w, r)
 			return
 		}
 
 		jwt := authtypes.Claims{
-			UserID: user.ID,
+			UserID: user.ID.String(),
 			Role:   role,
 			Email:  user.Email,
 			OrgID:  user.OrgID,

ee/modules/user/impluser/handler.go

@@ -0,0 +1,203 @@
+package impluser
+
+import (
+	"context"
+	"encoding/json"
+	"net/http"
+	"time"
+
+	"github.com/SigNoz/signoz/pkg/errors"
+	"github.com/SigNoz/signoz/pkg/http/render"
+	"github.com/SigNoz/signoz/pkg/modules/user"
+	"github.com/SigNoz/signoz/pkg/modules/user/impluser"
+	"github.com/SigNoz/signoz/pkg/types"
+	"github.com/gorilla/mux"
+)
+
+// EnterpriseHandler embeds the base handler implementation
+type Handler struct {
+	user.Handler // Embed the base handler interface
+	module       user.Module
+}
+
+func NewHandler(module user.Module) user.Handler {
+	baseHandler := impluser.NewHandler(module)
+	return &Handler{
+		Handler: baseHandler,
+		module:  module,
+	}
+}
+
+func (h *Handler) Login(w http.ResponseWriter, r *http.Request) {
+	ctx, cancel := context.WithTimeout(r.Context(), 10*time.Second)
+	defer cancel()
+
+	var req types.PostableLoginRequest
+	if err := json.NewDecoder(r.Body).Decode(&req); err != nil {
+		render.Error(w, err)
+		return
+	}
+
+	if req.RefreshToken == "" {
+		// the EE handler wrapper passes the feature flag value in context
+		ssoAvailable, ok := ctx.Value(types.SSOAvailable).(bool)
+		if !ok {
+			render.Error(w, errors.New(errors.TypeInternal, errors.CodeInternal, "failed to retrieve SSO availability"))
+			return
+		}
+
+		if ssoAvailable {
+			_, err := h.module.CanUsePassword(ctx, req.Email)
+			if err != nil {
+				render.Error(w, err)
+				return
+			}
+		}
+	}
+
+	user, err := h.module.GetAuthenticatedUser(ctx, req.OrgID, req.Email, req.Password, req.RefreshToken)
+	if err != nil {
+		render.Error(w, err)
+		return
+	}
+
+	jwt, err := h.module.GetJWTForUser(ctx, user)
+	if err != nil {
+		render.Error(w, err)
+		return
+	}
+
+	gettableLoginResponse := &types.GettableLoginResponse{
+		GettableUserJwt: jwt,
+		UserID:          user.ID.String(),
+	}
+
+	render.Success(w, http.StatusOK, gettableLoginResponse)
+}
+
+// Override only the methods you need with enterprise-specific implementations
+func (h *Handler) LoginPrecheck(w http.ResponseWriter, r *http.Request) {
+	ctx, cancel := context.WithTimeout(r.Context(), 10*time.Second)
+	defer cancel()
+
+	// assume user is valid unless proven otherwise and assign default values for rest of the fields
+
+	email := r.URL.Query().Get("email")
+	sourceUrl := r.URL.Query().Get("ref")
+	orgID := r.URL.Query().Get("orgID")
+
+	resp, err := h.module.LoginPrecheck(ctx, orgID, email, sourceUrl)
+	if err != nil {
+		render.Error(w, err)
+		return
+	}
+
+	render.Success(w, http.StatusOK, resp)
+
+}
+
+func (h *Handler) AcceptInvite(w http.ResponseWriter, r *http.Request) {
+	ctx, cancel := context.WithTimeout(r.Context(), 10*time.Second)
+	defer cancel()
+
+	req := new(types.PostableAcceptInvite)
+	if err := json.NewDecoder(r.Body).Decode(req); err != nil {
+		render.Error(w, errors.Wrapf(err, errors.TypeInvalidInput, errors.CodeInvalidInput, "failed to decode user"))
+		return
+	}
+
+	// get invite object
+	invite, err := h.module.GetInviteByToken(ctx, req.InviteToken)
+	if err != nil {
+		render.Error(w, err)
+		return
+	}
+
+	orgDomain, err := h.module.GetAuthDomainByEmail(ctx, invite.Email)
+	if err != nil && !errors.Ast(err, errors.TypeNotFound) {
+		render.Error(w, err)
+		return
+	}
+
+	precheckResp := &types.GettableLoginPrecheck{
+		SSO:    false,
+		IsUser: false,
+	}
+
+	if invite.Name == "" && req.DisplayName != "" {
+		invite.Name = req.DisplayName
+	}
+
+	user, err := types.NewUser(invite.Name, invite.Email, invite.Role, invite.OrgID)
+	if err != nil {
+		render.Error(w, err)
+		return
+	}
+
+	if orgDomain != nil && orgDomain.SsoEnabled {
+		// sso is enabled, create user and respond precheck data
+		err = h.module.CreateUser(ctx, user)
+		if err != nil {
+			render.Error(w, err)
+			return
+		}
+
+		// check if sso is enforced for the org
+		precheckResp, err = h.module.LoginPrecheck(ctx, invite.OrgID, user.Email, req.SourceURL)
+		if err != nil {
+			render.Error(w, err)
+			return
+		}
+
+	} else {
+		password, err := types.NewFactorPassword(req.Password)
+		if err != nil {
+			render.Error(w, err)
+			return
+		}
+
+		user, err = h.module.CreateUserWithPassword(ctx, user, password)
+		if err != nil {
+			render.Error(w, err)
+			return
+		}
+
+		precheckResp.IsUser = true
+	}
+
+	// delete the invite
+	if err := h.module.DeleteInvite(ctx, invite.OrgID, invite.ID); err != nil {
+		render.Error(w, err)
+		return
+	}
+
+	render.Success(w, http.StatusOK, precheckResp)
+}
+
+func (h *Handler) GetInvite(w http.ResponseWriter, r *http.Request) {
+	ctx, cancel := context.WithTimeout(r.Context(), 10*time.Second)
+	defer cancel()
+
+	token := mux.Vars(r)["token"]
+	sourceUrl := r.URL.Query().Get("ref")
+	invite, err := h.module.GetInviteByToken(ctx, token)
+	if err != nil {
+		render.Error(w, err)
+		return
+	}
+
+	// precheck the user
+	precheckResp, err := h.module.LoginPrecheck(ctx, invite.OrgID, invite.Email, sourceUrl)
+	if err != nil {
+		render.Error(w, err)
+		return
+	}
+
+	gettableInvite := &types.GettableEEInvite{
+		GettableInvite: *invite,
+		PreCheck:       precheckResp,
+	}
+
+	render.Success(w, http.StatusOK, gettableInvite)
+	return
+}

ee/modules/user/impluser/module.go

@@ -0,0 +1,229 @@
+package impluser
+
+import (
+	"context"
+	"fmt"
+	"net/url"
+	"strings"
+
+	"github.com/SigNoz/signoz/ee/query-service/constants"
+	"github.com/SigNoz/signoz/pkg/errors"
+	"github.com/SigNoz/signoz/pkg/modules/user"
+	baseimpl "github.com/SigNoz/signoz/pkg/modules/user/impluser"
+	"github.com/SigNoz/signoz/pkg/types"
+	"github.com/SigNoz/signoz/pkg/types/authtypes"
+	"go.uber.org/zap"
+)
+
+// EnterpriseModule embeds the base module implementation
+type Module struct {
+	*baseimpl.Module // Embed the base module implementation
+	store            types.UserStore
+}
+
+func NewModule(store types.UserStore) user.Module {
+	baseModule := baseimpl.NewModule(store).(*baseimpl.Module)
+	return &Module{
+		Module: baseModule,
+		store:  store,
+	}
+}
+
+func (m *Module) createUserForSAMLRequest(ctx context.Context, email string) (*types.User, error) {
+	// get auth domain from email domain
+	_, err := m.GetAuthDomainByEmail(ctx, email)
+	if err != nil && !errors.Ast(err, errors.TypeNotFound) {
+		return nil, err
+	}
+
+	// get name from email
+	parts := strings.Split(email, "@")
+	if len(parts) < 2 {
+		return nil, errors.New(errors.TypeInvalidInput, errors.CodeInvalidInput, "invalid email format")
+	}
+	name := parts[0]
+
+	defaultOrgID, err := m.store.GetDefaultOrgID(ctx)
+	if err != nil {
+		return nil, err
+	}
+
+	user, err := types.NewUser(name, email, types.RoleViewer.String(), defaultOrgID)
+	if err != nil {
+		return nil, err
+	}
+
+	err = m.CreateUser(ctx, user)
+	if err != nil {
+		return nil, err
+	}
+
+	return user, nil
+}
+
+func (m *Module) PrepareSsoRedirect(ctx context.Context, redirectUri, email string, jwt *authtypes.JWT) (string, error) {
+	users, err := m.GetUsersByEmail(ctx, email)
+	if err != nil {
+		zap.L().Error("failed to get user with email received from auth provider", zap.String("error", err.Error()))
+		return "", err
+	}
+	user := &types.User{}
+
+	if len(users) == 0 {
+		newUser, err := m.createUserForSAMLRequest(ctx, email)
+		user = newUser
+		if err != nil {
+			zap.L().Error("failed to create user with email received from auth provider", zap.Error(err))
+			return "", err
+		}
+	} else {
+		user = &users[0].User
+	}
+
+	tokenStore, err := m.GetJWTForUser(ctx, user)
+	if err != nil {
+		zap.L().Error("failed to generate token for SSO login user", zap.Error(err))
+		return "", err
+	}
+
+	return fmt.Sprintf("%s?jwt=%s&usr=%s&refreshjwt=%s",
+		redirectUri,
+		tokenStore.AccessJwt,
+		user.ID,
+		tokenStore.RefreshJwt), nil
+}
+
+func (m *Module) CanUsePassword(ctx context.Context, email string) (bool, error) {
+	domain, err := m.GetAuthDomainByEmail(ctx, email)
+	if err != nil && !errors.Ast(err, errors.TypeNotFound) {
+		return false, err
+	}
+
+	if domain != nil && domain.SsoEnabled {
+		// sso is enabled, check if the user has admin role
+		users, err := m.GetUsersByEmail(ctx, email)
+		if err != nil {
+			return false, err
+		}
+
+		if len(users) == 0 {
+			return false, errors.New(errors.TypeNotFound, errors.CodeNotFound, "user not found")
+		}
+
+		if users[0].Role != types.RoleAdmin.String() {
+			return false, errors.New(errors.TypeForbidden, errors.CodeForbidden, "auth method not supported")
+		}
+
+	}
+
+	return true, nil
+}
+
+func (m *Module) LoginPrecheck(ctx context.Context, orgID, email, sourceUrl string) (*types.GettableLoginPrecheck, error) {
+	resp := &types.GettableLoginPrecheck{IsUser: true, CanSelfRegister: false}
+
+	// check if email is a valid user
+	users, err := m.GetUsersByEmail(ctx, email)
+	if err != nil {
+		return nil, err
+	}
+
+	if len(users) == 0 {
+		resp.IsUser = false
+	}
+
+	// give them an option to select an org
+	if orgID == "" && len(users) > 1 {
+		resp.SelectOrg = true
+		resp.Orgs = make([]string, len(users))
+		for i, user := range users {
+			resp.Orgs[i] = user.OrgID
+		}
+		return resp, nil
+	}
+
+	// select the user with the corresponding orgID
+	if len(users) > 1 {
+		found := false
+		for _, tuser := range users {
+			if tuser.OrgID == orgID {
+				// user = tuser
+				found = true
+				break
+			}
+		}
+		if !found {
+			resp.IsUser = false
+			return resp, nil
+		}
+	}
+
+	// the EE handler wrapper passes the feature flag value in context
+	ssoAvailable, ok := ctx.Value(types.SSOAvailable).(bool)
+	if !ok {
+		zap.L().Error("failed to retrieve ssoAvailable from context")
+		return nil, errors.New(errors.TypeInternal, errors.CodeInternal, "failed to retrieve SSO availability")
+	}
+
+	if ssoAvailable {
+
+		// TODO(Nitya): in multitenancy this should use orgId as well.
+		orgDomain, err := m.GetAuthDomainByEmail(ctx, email)
+		if err != nil && !errors.Ast(err, errors.TypeNotFound) {
+			return nil, err
+		}
+
+		if orgDomain != nil && orgDomain.SsoEnabled {
+			// this is to allow self registration
+			resp.IsUser = true
+
+			// saml is enabled for this domain, lets prepare sso url
+			if sourceUrl == "" {
+				sourceUrl = constants.GetDefaultSiteURL()
+			}
+
+			// parse source url that generated the login request
+			var err error
+			escapedUrl, _ := url.QueryUnescape(sourceUrl)
+			siteUrl, err := url.Parse(escapedUrl)
+			if err != nil {
+				return nil, errors.New(errors.TypeInvalidInput, errors.CodeInvalidInput, "failed to parse referer")
+			}
+
+			// build Idp URL that will authenticat the user
+			// the front-end will redirect user to this url
+			resp.SSOUrl, err = orgDomain.BuildSsoUrl(siteUrl)
+			if err != nil {
+				zap.L().Error("failed to prepare saml request for domain", zap.String("domain", orgDomain.Name), zap.Error(err))
+				return nil, errors.New(errors.TypeInternal, errors.CodeInternal, "failed to prepare saml request for domain")
+			}
+
+			// set SSO to true, as the url is generated correctly
+			resp.SSO = true
+		}
+	}
+	return resp, nil
+}
+
+func (m *Module) GetAuthDomainByEmail(ctx context.Context, email string) (*types.GettableOrgDomain, error) {
+
+	if email == "" {
+		return nil, errors.New(errors.TypeInvalidInput, errors.CodeInvalidInput, "email is required")
+	}
+
+	components := strings.Split(email, "@")
+	if len(components) < 2 {
+		return nil, errors.New(errors.TypeInvalidInput, errors.CodeInvalidInput, "invalid email format")
+	}
+
+	domain, err := m.store.GetDomainByName(ctx, components[1])
+	if err != nil {
+		return nil, err
+	}
+
+	gettableDomain := &types.GettableOrgDomain{StorableOrgDomain: *domain}
+	if err := gettableDomain.LoadConfig(domain.Data); err != nil {
+		return nil, errors.Wrapf(err, errors.TypeInternal, errors.CodeInternal, "failed to load domain config")
+	}
+	return gettableDomain, nil
+}

ee/modules/user/impluser/store.go

@@ -0,0 +1,37 @@
+package impluser
+
+import (
+	"context"
+
+	"github.com/SigNoz/signoz/pkg/errors"
+	baseimpl "github.com/SigNoz/signoz/pkg/modules/user/impluser"
+	"github.com/SigNoz/signoz/pkg/sqlstore"
+	"github.com/SigNoz/signoz/pkg/types"
+)
+
+type store struct {
+	*baseimpl.Store
+	sqlstore sqlstore.SQLStore
+}
+
+func NewStore(sqlstore sqlstore.SQLStore) types.UserStore {
+	baseStore := baseimpl.NewStore(sqlstore).(*baseimpl.Store)
+	return &store{
+		Store:    baseStore,
+		sqlstore: sqlstore,
+	}
+}
+
+func (s *store) GetDomainByName(ctx context.Context, name string) (*types.StorableOrgDomain, error) {
+	domain := new(types.StorableOrgDomain)
+	err := s.sqlstore.BunDB().NewSelect().
+		Model(domain).
+		Where("name = ?", name).
+		Limit(1).
+		Scan(ctx)
+
+	if err != nil {
+		return nil, errors.Wrapf(err, errors.TypeNotFound, errors.CodeNotFound, "failed to get domain from name")
+	}
+	return domain, nil
+}

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

@@ -1,6 +1,7 @@
 package api
 
 import (
+	"context"
 	"net/http"
 	"net/http/httputil"
 	"time"
@@ -9,10 +10,13 @@ import (
 	"github.com/SigNoz/signoz/ee/query-service/integrations/gateway"
 	"github.com/SigNoz/signoz/ee/query-service/interfaces"
 	"github.com/SigNoz/signoz/ee/query-service/license"
+	"github.com/SigNoz/signoz/ee/query-service/model"
 	"github.com/SigNoz/signoz/ee/query-service/usage"
 	"github.com/SigNoz/signoz/pkg/alertmanager"
 	"github.com/SigNoz/signoz/pkg/apis/fields"
+	"github.com/SigNoz/signoz/pkg/errors"
 	"github.com/SigNoz/signoz/pkg/http/middleware"
+	"github.com/SigNoz/signoz/pkg/http/render"
 	"github.com/SigNoz/signoz/pkg/modules/quickfilter"
 	quickfilterscore "github.com/SigNoz/signoz/pkg/modules/quickfilter/core"
 	baseapp "github.com/SigNoz/signoz/pkg/query-service/app"
@@ -23,9 +27,11 @@ import (
 	basemodel "github.com/SigNoz/signoz/pkg/query-service/model"
 	rules "github.com/SigNoz/signoz/pkg/query-service/rules"
 	"github.com/SigNoz/signoz/pkg/signoz"
+	"github.com/SigNoz/signoz/pkg/types"
 	"github.com/SigNoz/signoz/pkg/types/authtypes"
 	"github.com/SigNoz/signoz/pkg/version"
 	"github.com/gorilla/mux"
+	"go.uber.org/zap"
 )
 
 type APIHandlerOptions struct {
@@ -60,7 +66,6 @@ func NewAPIHandler(opts APIHandlerOptions, signoz *signoz.SigNoz) (*APIHandler,
 	baseHandler, err := baseapp.NewAPIHandler(baseapp.APIHandlerOpts{
 		Reader:                        opts.DataConnector,
 		PreferSpanMetrics:             opts.PreferSpanMetrics,
-		AppDao:                        opts.AppDao,
 		RuleManager:                   opts.RulesManager,
 		FeatureFlags:                  opts.FeatureFlags,
 		IntegrationsController:        opts.IntegrationsController,
@@ -120,43 +125,24 @@ func (ah *APIHandler) RegisterRoutes(router *mux.Router, am *middleware.AuthZ) {
 
 	// routes available only in ee version
 
-	router.HandleFunc("/api/v1/featureFlags",
-		am.OpenAccess(ah.getFeatureFlags)).
-		Methods(http.MethodGet)
+	router.HandleFunc("/api/v1/featureFlags", am.OpenAccess(ah.getFeatureFlags)).Methods(http.MethodGet)
+	router.HandleFunc("/api/v1/loginPrecheck", am.OpenAccess(ah.loginPrecheck)).Methods(http.MethodGet)
 
-	router.HandleFunc("/api/v1/loginPrecheck",
-		am.OpenAccess(ah.precheckLogin)).
-		Methods(http.MethodGet)
+	// invite
+	router.HandleFunc("/api/v1/invite/{token}", am.OpenAccess(ah.getInvite)).Methods(http.MethodGet)
+	router.HandleFunc("/api/v1/invite/accept", am.OpenAccess(ah.acceptInvite)).Methods(http.MethodPost)
 
 	// paid plans specific routes
-	router.HandleFunc("/api/v1/complete/saml",
-		am.OpenAccess(ah.receiveSAML)).
-		Methods(http.MethodPost)
+	router.HandleFunc("/api/v1/complete/saml", am.OpenAccess(ah.receiveSAML)).Methods(http.MethodPost)
+	router.HandleFunc("/api/v1/complete/google", am.OpenAccess(ah.receiveGoogleAuth)).Methods(http.MethodGet)
+	router.HandleFunc("/api/v1/orgs/{orgId}/domains", am.AdminAccess(ah.listDomainsByOrg)).Methods(http.MethodGet)
 
-	router.HandleFunc("/api/v1/complete/google",
-		am.OpenAccess(ah.receiveGoogleAuth)).
-		Methods(http.MethodGet)
-
-	router.HandleFunc("/api/v1/orgs/{orgId}/domains",
-		am.AdminAccess(ah.listDomainsByOrg)).
-		Methods(http.MethodGet)
-
-	router.HandleFunc("/api/v1/domains",
-		am.AdminAccess(ah.postDomain)).
-		Methods(http.MethodPost)
-
-	router.HandleFunc("/api/v1/domains/{id}",
-		am.AdminAccess(ah.putDomain)).
-		Methods(http.MethodPut)
-
-	router.HandleFunc("/api/v1/domains/{id}",
-		am.AdminAccess(ah.deleteDomain)).
-		Methods(http.MethodDelete)
+	router.HandleFunc("/api/v1/domains", am.AdminAccess(ah.postDomain)).Methods(http.MethodPost)
+	router.HandleFunc("/api/v1/domains/{id}", am.AdminAccess(ah.putDomain)).Methods(http.MethodPut)
+	router.HandleFunc("/api/v1/domains/{id}", am.AdminAccess(ah.deleteDomain)).Methods(http.MethodDelete)
 
 	// base overrides
 	router.HandleFunc("/api/v1/version", am.OpenAccess(ah.getVersion)).Methods(http.MethodGet)
-	router.HandleFunc("/api/v1/invite/{token}", am.OpenAccess(ah.getInvite)).Methods(http.MethodGet)
-	router.HandleFunc("/api/v1/register", am.OpenAccess(ah.registerUser)).Methods(http.MethodPost)
 	router.HandleFunc("/api/v1/login", am.OpenAccess(ah.loginUser)).Methods(http.MethodPost)
 
 	// PAT APIs
@@ -188,6 +174,54 @@ func (ah *APIHandler) RegisterRoutes(router *mux.Router, am *middleware.AuthZ) {
 
 }
 
+// TODO(nitya): remove this once we know how to get the FF's
+func (ah *APIHandler) updateRequestContext(w http.ResponseWriter, r *http.Request) (*http.Request, error) {
+	ssoAvailable := true
+	err := ah.FF().CheckFeature(model.SSO)
+	if err != nil {
+		switch err.(type) {
+		case basemodel.ErrFeatureUnavailable:
+			// do nothing, just skip sso
+			ssoAvailable = false
+		default:
+			zap.L().Error("feature check failed", zap.String("featureKey", model.SSO), zap.Error(err))
+			return r, errors.New(errors.TypeInternal, errors.CodeInternal, "error checking SSO feature")
+		}
+	}
+	ctx := context.WithValue(r.Context(), types.SSOAvailable, ssoAvailable)
+	return r.WithContext(ctx), nil
+}
+
+func (ah *APIHandler) loginPrecheck(w http.ResponseWriter, r *http.Request) {
+	r, err := ah.updateRequestContext(w, r)
+	if err != nil {
+		render.Error(w, err)
+		return
+	}
+	ah.Signoz.Handlers.User.LoginPrecheck(w, r)
+	return
+}
+
+func (ah *APIHandler) acceptInvite(w http.ResponseWriter, r *http.Request) {
+	r, err := ah.updateRequestContext(w, r)
+	if err != nil {
+		render.Error(w, err)
+		return
+	}
+	ah.Signoz.Handlers.User.AcceptInvite(w, r)
+	return
+}
+
+func (ah *APIHandler) getInvite(w http.ResponseWriter, r *http.Request) {
+	r, err := ah.updateRequestContext(w, r)
+	if err != nil {
+		render.Error(w, err)
+		return
+	}
+	ah.Signoz.Handlers.User.GetInvite(w, r)
+	return
+}
+
 func (ah *APIHandler) RegisterCloudIntegrationsRoutes(router *mux.Router, am *middleware.AuthZ) {
 
 	ah.APIHandler.RegisterCloudIntegrationsRoutes(router, am)

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

@@ -9,13 +9,11 @@ import (
 	"net/http"
 	"net/url"
 
-	"github.com/gorilla/mux"
 	"go.uber.org/zap"
 
 	"github.com/SigNoz/signoz/ee/query-service/constants"
 	"github.com/SigNoz/signoz/ee/query-service/model"
-	baseauth "github.com/SigNoz/signoz/pkg/query-service/auth"
-	basemodel "github.com/SigNoz/signoz/pkg/query-service/model"
+	"github.com/SigNoz/signoz/pkg/http/render"
 )
 
 func parseRequest(r *http.Request, req interface{}) error {
@@ -31,161 +29,13 @@ func parseRequest(r *http.Request, req interface{}) error {
 
 // loginUser overrides base handler and considers SSO case.
 func (ah *APIHandler) loginUser(w http.ResponseWriter, r *http.Request) {
-
-	req := basemodel.LoginRequest{}
-	err := parseRequest(r, &req)
+	r, err := ah.updateRequestContext(w, r)
 	if err != nil {
-		RespondError(w, model.BadRequest(err), nil)
+		render.Error(w, err)
 		return
 	}
-
-	ctx := context.Background()
-
-	if req.Email != "" && ah.CheckFeature(model.SSO) {
-		var apierr basemodel.BaseApiError
-		_, apierr = ah.AppDao().CanUsePassword(ctx, req.Email)
-		if apierr != nil && !apierr.IsNil() {
-			RespondError(w, apierr, nil)
-		}
-	}
-
-	// if all looks good, call auth
-	resp, err := baseauth.Login(ctx, &req, ah.opts.JWT)
-	if ah.HandleError(w, err, http.StatusUnauthorized) {
-		return
-	}
-
-	ah.WriteJSON(w, r, resp)
-}
-
-// registerUser registers a user and responds with a precheck
-// so the front-end can decide the login method
-func (ah *APIHandler) registerUser(w http.ResponseWriter, r *http.Request) {
-
-	if !ah.CheckFeature(model.SSO) {
-		ah.APIHandler.Register(w, r)
-		return
-	}
-
-	ctx := context.Background()
-	var req *baseauth.RegisterRequest
-
-	defer r.Body.Close()
-	requestBody, err := io.ReadAll(r.Body)
-	if err != nil {
-		zap.L().Error("received no input in api", zap.Error(err))
-		RespondError(w, model.BadRequest(err), nil)
-		return
-	}
-
-	err = json.Unmarshal(requestBody, &req)
-
-	if err != nil {
-		zap.L().Error("received invalid user registration request", zap.Error(err))
-		RespondError(w, model.BadRequest(fmt.Errorf("failed to register user")), nil)
-		return
-	}
-
-	// get invite object
-	invite, err := baseauth.ValidateInvite(ctx, req)
-	if err != nil {
-		zap.L().Error("failed to validate invite token", zap.Error(err))
-		RespondError(w, model.BadRequest(err), nil)
-		return
-	}
-
-	if invite == nil {
-		zap.L().Error("failed to validate invite token: it is either empty or invalid", zap.Error(err))
-		RespondError(w, model.BadRequest(basemodel.ErrSignupFailed{}), nil)
-		return
-	}
-
-	// get auth domain from email domain
-	domain, apierr := ah.AppDao().GetDomainByEmail(ctx, invite.Email)
-	if apierr != nil {
-		zap.L().Error("failed to get domain from email", zap.Error(apierr))
-		RespondError(w, model.InternalError(basemodel.ErrSignupFailed{}), nil)
-	}
-
-	precheckResp := &basemodel.PrecheckResponse{
-		SSO:    false,
-		IsUser: false,
-	}
-
-	if domain != nil && domain.SsoEnabled {
-		// sso is enabled, create user and respond precheck data
-		user, apierr := baseauth.RegisterInvitedUser(ctx, req, true)
-		if apierr != nil {
-			RespondError(w, apierr, nil)
-			return
-		}
-
-		var precheckError basemodel.BaseApiError
-
-		precheckResp, precheckError = ah.AppDao().PrecheckLogin(ctx, user.Email, req.SourceUrl)
-		if precheckError != nil {
-			RespondError(w, precheckError, precheckResp)
-		}
-
-	} else {
-		// no-sso, validate password
-		if err := baseauth.ValidatePassword(req.Password); err != nil {
-			RespondError(w, model.InternalError(fmt.Errorf("password is not in a valid format")), nil)
-			return
-		}
-
-		_, registerError := baseauth.Register(ctx, req, ah.Signoz.Alertmanager, ah.Signoz.Modules.Organization, ah.QuickFilterModule)
-		if !registerError.IsNil() {
-			RespondError(w, apierr, nil)
-			return
-		}
-
-		precheckResp.IsUser = true
-	}
-
-	ah.Respond(w, precheckResp)
-}
-
-// getInvite returns the invite object details for the given invite token. We do not need to
-// protect this API because invite token itself is meant to be private.
-func (ah *APIHandler) getInvite(w http.ResponseWriter, r *http.Request) {
-	token := mux.Vars(r)["token"]
-	sourceUrl := r.URL.Query().Get("ref")
-
-	inviteObject, err := baseauth.GetInvite(r.Context(), token, ah.Signoz.Modules.Organization)
-	if err != nil {
-		RespondError(w, model.BadRequest(err), nil)
-		return
-	}
-
-	resp := model.GettableInvitation{
-		InvitationResponseObject: inviteObject,
-	}
-
-	precheck, apierr := ah.AppDao().PrecheckLogin(r.Context(), inviteObject.Email, sourceUrl)
-	resp.Precheck = precheck
-
-	if apierr != nil {
-		RespondError(w, apierr, resp)
-	}
-
-	ah.WriteJSON(w, r, resp)
-}
-
-// PrecheckLogin enables browser login page to display appropriate
-// login methods
-func (ah *APIHandler) precheckLogin(w http.ResponseWriter, r *http.Request) {
-	ctx := context.Background()
-
-	email := r.URL.Query().Get("email")
-	sourceUrl := r.URL.Query().Get("ref")
-
-	resp, apierr := ah.AppDao().PrecheckLogin(ctx, email, sourceUrl)
-	if apierr != nil {
-		RespondError(w, apierr, resp)
-	}
-
-	ah.Respond(w, resp)
+	ah.Signoz.Handlers.User.Login(w, r)
+	return
 }
 
 func handleSsoError(w http.ResponseWriter, r *http.Request, redirectURL string) {
@@ -252,7 +102,7 @@ func (ah *APIHandler) receiveGoogleAuth(w http.ResponseWriter, r *http.Request)
 		return
 	}
 
-	nextPage, err := ah.AppDao().PrepareSsoRedirect(ctx, redirectUri, identity.Email, ah.opts.JWT)
+	nextPage, err := ah.Signoz.Modules.User.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)
@@ -330,7 +180,7 @@ func (ah *APIHandler) receiveSAML(w http.ResponseWriter, r *http.Request) {
 		return
 	}
 
-	nextPage, err := ah.AppDao().PrepareSsoRedirect(ctx, redirectUri, email, ah.opts.JWT)
+	nextPage, err := ah.Signoz.Modules.User.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

@@ -12,8 +12,8 @@ import (
 
 	"github.com/SigNoz/signoz/ee/query-service/constants"
 	eeTypes "github.com/SigNoz/signoz/ee/types"
+	"github.com/SigNoz/signoz/pkg/errors"
 	"github.com/SigNoz/signoz/pkg/http/render"
-	"github.com/SigNoz/signoz/pkg/query-service/auth"
 	basemodel "github.com/SigNoz/signoz/pkg/query-service/model"
 	"github.com/SigNoz/signoz/pkg/types"
 	"github.com/SigNoz/signoz/pkg/types/authtypes"
@@ -123,7 +123,7 @@ func (ah *APIHandler) getOrCreateCloudIntegrationPAT(ctx context.Context, orgId
 		))
 	}
 	for _, p := range allPats {
-		if p.UserID == integrationUser.ID && p.Name == integrationPATName {
+		if p.UserID == integrationUser.ID.String() && p.Name == integrationPATName {
 			return p.Token, nil
 		}
 	}
@@ -135,8 +135,8 @@ func (ah *APIHandler) getOrCreateCloudIntegrationPAT(ctx context.Context, orgId
 
 	newPAT := eeTypes.NewGettablePAT(
 		integrationPATName,
-		authtypes.RoleViewer.String(),
-		integrationUser.ID,
+		types.RoleViewer.String(),
+		integrationUser.ID.String(),
 		0,
 	)
 	integrationPAT, err := ah.AppDao().CreatePAT(ctx, orgId, newPAT)
@@ -154,10 +154,9 @@ func (ah *APIHandler) getOrCreateCloudIntegrationUser(
 	cloudIntegrationUser := fmt.Sprintf("%s-integration", cloudProvider)
 	email := fmt.Sprintf("%s@signoz.io", cloudIntegrationUser)
 
-	// TODO(nitya): there should be orgId here
-	integrationUserResult, apiErr := ah.AppDao().GetUserByEmail(ctx, email)
-	if apiErr != nil {
-		return nil, basemodel.WrapApiError(apiErr, "couldn't look for integration user")
+	integrationUserResult, err := ah.Signoz.Modules.User.GetUserByEmailInOrg(ctx, orgId, email)
+	if err != nil && !errors.Ast(err, errors.TypeNotFound) {
+		return nil, basemodel.NotFoundError(fmt.Errorf("couldn't look for integration user: %w", err))
 	}
 
 	if integrationUserResult != nil {
@@ -169,29 +168,18 @@ func (ah *APIHandler) getOrCreateCloudIntegrationUser(
 		zap.String("cloudProvider", cloudProvider),
 	)
 
-	newUser := &types.User{
-		ID:    uuid.New().String(),
-		Name:  cloudIntegrationUser,
-		Email: email,
-		TimeAuditable: types.TimeAuditable{
-			CreatedAt: time.Now(),
-		},
-		OrgID: orgId,
-	}
-
-	newUser.Role = authtypes.RoleViewer.String()
-
-	passwordHash, err := auth.PasswordHash(uuid.NewString())
+	newUser, err := types.NewUser(cloudIntegrationUser, email, types.RoleViewer.String(), orgId)
 	if err != nil {
 		return nil, basemodel.InternalError(fmt.Errorf(
-			"couldn't hash random password for cloud integration user: %w", err,
+			"couldn't create 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")
+	password, err := types.NewFactorPassword(uuid.NewString())
+
+	integrationUser, err := ah.Signoz.Modules.User.CreateUserWithPassword(ctx, newUser, password)
+	if err != nil {
+		return nil, basemodel.InternalError(fmt.Errorf("couldn't create cloud integration user: %w", err))
 	}
 
 	return integrationUser, nil

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

@@ -6,7 +6,6 @@ import (
 
 	"github.com/SigNoz/signoz/pkg/errors"
 	"github.com/SigNoz/signoz/pkg/http/render"
-	"github.com/SigNoz/signoz/pkg/query-service/app/dashboards"
 	"github.com/SigNoz/signoz/pkg/types/authtypes"
 	"github.com/gorilla/mux"
 )
@@ -41,9 +40,9 @@ func (ah *APIHandler) lockUnlockDashboard(w http.ResponseWriter, r *http.Request
 		return
 	}
 
-	dashboard, apiErr := dashboards.GetDashboard(r.Context(), claims.OrgID, uuid)
-	if apiErr != nil {
-		render.Error(w, errors.Wrapf(err, errors.TypeInternal, errors.CodeInternal, "failed to get dashboard"))
+	dashboard, err := ah.Signoz.Modules.Dashboard.Get(r.Context(), claims.OrgID, uuid)
+	if err != nil {
+		render.Error(w, err)
 		return
 	}
 
@@ -53,9 +52,9 @@ func (ah *APIHandler) lockUnlockDashboard(w http.ResponseWriter, r *http.Request
 	}
 
 	// Lock/Unlock the dashboard
-	apiErr = dashboards.LockUnlockDashboard(r.Context(), claims.OrgID, uuid, lock)
-	if apiErr != nil {
-		render.Error(w, errors.Wrapf(err, errors.TypeInternal, errors.CodeInternal, "failed to lock/unlock dashboard"))
+	err = ah.Signoz.Modules.Dashboard.LockUnlock(r.Context(), claims.OrgID, uuid, lock)
+	if err != nil {
+		render.Error(w, err)
 		return
 	}
 

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

@@ -7,7 +7,7 @@ import (
 	"net/http"
 
 	"github.com/SigNoz/signoz/ee/query-service/model"
-	"github.com/SigNoz/signoz/ee/types"
+	"github.com/SigNoz/signoz/pkg/types"
 	"github.com/google/uuid"
 	"github.com/gorilla/mux"
 )

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

@@ -56,7 +56,7 @@ func (ah *APIHandler) createPAT(w http.ResponseWriter, r *http.Request) {
 }
 
 func validatePATRequest(req eeTypes.GettablePAT) error {
-	_, err := authtypes.NewRole(req.Role)
+	_, err := types.NewRole(req.Role)
 	if err != nil {
 		return err
 	}
@@ -93,16 +93,16 @@ func (ah *APIHandler) updatePAT(w http.ResponseWriter, r *http.Request) {
 	}
 
 	//get the pat
-	existingPAT, paterr := ah.AppDao().GetPATByID(r.Context(), claims.OrgID, id)
-	if paterr != nil {
-		render.Error(w, errorsV2.Newf(errorsV2.TypeInvalidInput, errorsV2.CodeInvalidInput, paterr.Error()))
+	existingPAT, err := ah.AppDao().GetPATByID(r.Context(), claims.OrgID, id)
+	if err != nil {
+		render.Error(w, errorsV2.Newf(errorsV2.TypeInvalidInput, errorsV2.CodeInvalidInput, err.Error()))
 		return
 	}
 
 	// get the user
-	createdByUser, usererr := ah.AppDao().GetUser(r.Context(), existingPAT.UserID)
-	if usererr != nil {
-		render.Error(w, errorsV2.Newf(errorsV2.TypeInvalidInput, errorsV2.CodeInvalidInput, usererr.Error()))
+	createdByUser, err := ah.Signoz.Modules.User.GetUserByID(r.Context(), claims.OrgID, existingPAT.UserID)
+	if err != nil {
+		render.Error(w, err)
 		return
 	}
 
@@ -119,7 +119,6 @@ func (ah *APIHandler) updatePAT(w http.ResponseWriter, r *http.Request) {
 
 	req.UpdatedByUserID = claims.UserID
 	req.UpdatedAt = time.Now()
-	zap.L().Info("Got Update PAT request", zap.Any("pat", req))
 	var apierr basemodel.BaseApiError
 	if apierr = ah.AppDao().UpdatePAT(r.Context(), claims.OrgID, req, id); apierr != nil {
 		RespondError(w, apierr, nil)
@@ -167,9 +166,9 @@ func (ah *APIHandler) revokePAT(w http.ResponseWriter, r *http.Request) {
 	}
 
 	// get the user
-	createdByUser, usererr := ah.AppDao().GetUser(r.Context(), existingPAT.UserID)
-	if usererr != nil {
-		render.Error(w, errorsV2.Newf(errorsV2.TypeInvalidInput, errorsV2.CodeInvalidInput, usererr.Error()))
+	createdByUser, err := ah.Signoz.Modules.User.GetUserByID(r.Context(), claims.OrgID, existingPAT.UserID)
+	if err != nil {
+		render.Error(w, err)
 		return
 	}
 

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

@@ -33,3 +33,7 @@ func NewDataConnector(
 		ClickHouseReader: chReader,
 	}
 }
+
+func (r *ClickhouseReader) GetSQLStore() sqlstore.SQLStore {
+	return r.appdb
+}

ee/query-service/app/server.go

@@ -15,7 +15,7 @@ import (
 	"github.com/SigNoz/signoz/ee/query-service/app/api"
 	"github.com/SigNoz/signoz/ee/query-service/app/db"
 	"github.com/SigNoz/signoz/ee/query-service/constants"
-	"github.com/SigNoz/signoz/ee/query-service/dao"
+	"github.com/SigNoz/signoz/ee/query-service/dao/sqlite"
 	"github.com/SigNoz/signoz/ee/query-service/integrations/gateway"
 	"github.com/SigNoz/signoz/ee/query-service/rules"
 	"github.com/SigNoz/signoz/pkg/alertmanager"
@@ -36,8 +36,6 @@ import (
 	"github.com/SigNoz/signoz/pkg/query-service/agentConf"
 	baseapp "github.com/SigNoz/signoz/pkg/query-service/app"
 	"github.com/SigNoz/signoz/pkg/query-service/app/cloudintegrations"
-	"github.com/SigNoz/signoz/pkg/query-service/app/dashboards"
-	baseexplorer "github.com/SigNoz/signoz/pkg/query-service/app/explorer"
 	"github.com/SigNoz/signoz/pkg/query-service/app/integrations"
 	"github.com/SigNoz/signoz/pkg/query-service/app/logparsingpipeline"
 	"github.com/SigNoz/signoz/pkg/query-service/app/opamp"
@@ -92,19 +90,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)
-	if err != nil {
-		return nil, err
-	}
-
-	if err := baseexplorer.InitWithDSN(serverOptions.SigNoz.SQLStore); err != nil {
-		return nil, err
-	}
-
-	if err := dashboards.InitDB(serverOptions.SigNoz.SQLStore); err != nil {
-		return nil, err
-	}
-
+	modelDao := sqlite.NewModelDao(serverOptions.SigNoz.SQLStore)
 	gatewayProxy, err := gateway.NewProxy(serverOptions.GatewayUrl, gateway.RoutePrefix)
 	if err != nil {
 		return nil, err
@@ -116,9 +102,6 @@ func NewServer(serverOptions *ServerOptions) (*Server, error) {
 		return nil, err
 	}
 
-	// set license manager as feature flag provider in dao
-	modelDao.SetFlagProvider(lm)
-
 	fluxIntervalForTraceDetail, err := time.ParseDuration(serverOptions.FluxIntervalForTraceDetail)
 	if err != nil {
 		return nil, err
@@ -195,7 +178,13 @@ func NewServer(serverOptions *ServerOptions) (*Server, error) {
 	}
 
 	telemetry.GetInstance().SetReader(reader)
+	telemetry.GetInstance().SetSqlStore(serverOptions.SigNoz.SQLStore)
 	telemetry.GetInstance().SetSaasOperator(constants.SaasSegmentKey)
+	telemetry.GetInstance().SetSavedViewsInfoCallback(telemetry.GetSavedViewsInfo)
+	telemetry.GetInstance().SetAlertsInfoCallback(telemetry.GetAlertsInfo)
+	telemetry.GetInstance().SetGetUsersCallback(telemetry.GetUsers)
+	telemetry.GetInstance().SetUserCountCallback(telemetry.GetUserCount)
+	telemetry.GetInstance().SetDashboardsInfoCallback(telemetry.GetDashboardsInfo)
 
 	fluxInterval, err := time.ParseDuration(serverOptions.FluxInterval)
 	if err != nil {
@@ -322,7 +311,6 @@ func (s *Server) createPublicServer(apiHandler *api.APIHandler, web web.Web) (*h
 	apiHandler.RegisterMessagingQueuesRoutes(r, am)
 	apiHandler.RegisterThirdPartyApiRoutes(r, am)
 	apiHandler.MetricExplorerRoutes(r, am)
-	apiHandler.RegisterTraceFunnelsRoutes(r, am)
 
 	c := cors.New(cors.Options{
 		AllowedOrigins: []string{"*"},

ee/query-service/dao/factory.go

@@ -1,10 +0,0 @@
-package dao
-
-import (
-	"github.com/SigNoz/signoz/ee/query-service/dao/sqlite"
-	"github.com/SigNoz/signoz/pkg/sqlstore"
-)
-
-func InitDao(sqlStore sqlstore.SQLStore) (ModelDao, error) {
-	return sqlite.InitDB(sqlStore)
-}

ee/query-service/dao/interface.go

@@ -4,27 +4,15 @@ import (
 	"context"
 	"net/url"
 
-	"github.com/SigNoz/signoz/ee/types"
-	basedao "github.com/SigNoz/signoz/pkg/query-service/dao"
-	baseint "github.com/SigNoz/signoz/pkg/query-service/interfaces"
+	eeTypes "github.com/SigNoz/signoz/ee/types"
 	basemodel "github.com/SigNoz/signoz/pkg/query-service/model"
-	"github.com/SigNoz/signoz/pkg/types/authtypes"
+	"github.com/SigNoz/signoz/pkg/types"
 	"github.com/SigNoz/signoz/pkg/valuer"
 	"github.com/google/uuid"
-	"github.com/uptrace/bun"
 )
 
 type ModelDao interface {
-	basedao.ModelDao
-
-	// SetFlagProvider sets the feature lookup provider
-	SetFlagProvider(flags baseint.FeatureLookup)
-
-	DB() *bun.DB
-
 	// auth methods
-	CanUsePassword(ctx context.Context, email string) (bool, basemodel.BaseApiError)
-	PrepareSsoRedirect(ctx context.Context, redirectUri, email string, jwt *authtypes.JWT) (redirectURL string, apierr basemodel.BaseApiError)
 	GetDomainFromSsoResponse(ctx context.Context, relayState *url.URL) (*types.GettableOrgDomain, error)
 
 	// org domain (auth domains) CRUD ops
@@ -35,10 +23,10 @@ type ModelDao interface {
 	DeleteDomain(ctx context.Context, id uuid.UUID) basemodel.BaseApiError
 	GetDomainByEmail(ctx context.Context, email string) (*types.GettableOrgDomain, basemodel.BaseApiError)
 
-	CreatePAT(ctx context.Context, orgID string, p types.GettablePAT) (types.GettablePAT, basemodel.BaseApiError)
-	UpdatePAT(ctx context.Context, orgID string, p types.GettablePAT, id valuer.UUID) basemodel.BaseApiError
-	GetPAT(ctx context.Context, pat string) (*types.GettablePAT, basemodel.BaseApiError)
-	GetPATByID(ctx context.Context, orgID string, id valuer.UUID) (*types.GettablePAT, basemodel.BaseApiError)
-	ListPATs(ctx context.Context, orgID string) ([]types.GettablePAT, basemodel.BaseApiError)
+	CreatePAT(ctx context.Context, orgID string, p eeTypes.GettablePAT) (eeTypes.GettablePAT, basemodel.BaseApiError)
+	UpdatePAT(ctx context.Context, orgID string, p eeTypes.GettablePAT, id valuer.UUID) basemodel.BaseApiError
+	GetPAT(ctx context.Context, pat string) (*eeTypes.GettablePAT, basemodel.BaseApiError)
+	GetPATByID(ctx context.Context, orgID string, id valuer.UUID) (*eeTypes.GettablePAT, basemodel.BaseApiError)
+	ListPATs(ctx context.Context, orgID string) ([]eeTypes.GettablePAT, basemodel.BaseApiError)
 	RevokePAT(ctx context.Context, orgID string, id valuer.UUID, userID string) basemodel.BaseApiError
 }

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

@@ -1,191 +0,0 @@
-package sqlite
-
-import (
-	"context"
-	"fmt"
-	"net/url"
-	"time"
-
-	"github.com/SigNoz/signoz/ee/query-service/constants"
-	"github.com/SigNoz/signoz/ee/query-service/model"
-	baseauth "github.com/SigNoz/signoz/pkg/query-service/auth"
-	basemodel "github.com/SigNoz/signoz/pkg/query-service/model"
-	"github.com/SigNoz/signoz/pkg/query-service/utils"
-	"github.com/SigNoz/signoz/pkg/types"
-	"github.com/SigNoz/signoz/pkg/types/authtypes"
-	"github.com/google/uuid"
-	"go.uber.org/zap"
-)
-
-func (m *modelDao) createUserForSAMLRequest(ctx context.Context, email string) (*types.User, basemodel.BaseApiError) {
-	// get auth domain from email domain
-	domain, apierr := m.GetDomainByEmail(ctx, email)
-	if apierr != nil {
-		zap.L().Error("failed to get domain from email", zap.Error(apierr))
-		return nil, model.InternalErrorStr("failed to get domain from email")
-	}
-	if domain == nil {
-		zap.L().Error("email domain does not match any authenticated domain", zap.String("email", email))
-		return nil, model.InternalErrorStr("email domain does not match any authenticated domain")
-	}
-
-	hash, err := baseauth.PasswordHash(utils.GeneratePassowrd())
-	if err != nil {
-		zap.L().Error("failed to generate password hash when registering a user via SSO redirect", zap.Error(err))
-		return nil, model.InternalErrorStr("failed to generate password hash")
-	}
-
-	user := &types.User{
-		ID:       uuid.New().String(),
-		Name:     "",
-		Email:    email,
-		Password: hash,
-		TimeAuditable: types.TimeAuditable{
-			CreatedAt: time.Now(),
-		},
-		ProfilePictureURL: "", // Currently unused
-		Role:              authtypes.RoleViewer.String(),
-		OrgID:             domain.OrgID,
-	}
-
-	user, apiErr := m.CreateUser(ctx, user, false)
-	if apiErr != nil {
-		zap.L().Error("CreateUser failed", zap.Error(apiErr))
-		return nil, apiErr
-	}
-
-	return user, nil
-
-}
-
-// 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, jwt *authtypes.JWT) (redirectURL string, apierr basemodel.BaseApiError) {
-
-	userPayload, apierr := m.GetUserByEmail(ctx, email)
-	if !apierr.IsNil() {
-		zap.L().Error("failed to get user with email received from auth provider", zap.String("error", apierr.Error()))
-		return "", model.BadRequestStr("invalid user email received from the auth provider")
-	}
-
-	user := &types.User{}
-
-	if userPayload == nil {
-		newUser, apiErr := m.createUserForSAMLRequest(ctx, email)
-		user = newUser
-		if apiErr != nil {
-			zap.L().Error("failed to create user with email received from auth provider", zap.Error(apiErr))
-			return "", apiErr
-		}
-	} else {
-		user = &userPayload.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")
-	}
-
-	return fmt.Sprintf("%s?jwt=%s&usr=%s&refreshjwt=%s",
-		redirectUri,
-		tokenStore.AccessJwt,
-		user.ID,
-		tokenStore.RefreshJwt), nil
-}
-
-func (m *modelDao) CanUsePassword(ctx context.Context, email string) (bool, basemodel.BaseApiError) {
-	domain, apierr := m.GetDomainByEmail(ctx, email)
-	if apierr != nil {
-		return false, apierr
-	}
-
-	if domain != nil && domain.SsoEnabled {
-		// sso is enabled, check if the user has admin role
-		userPayload, baseapierr := m.GetUserByEmail(ctx, email)
-
-		if baseapierr != nil || userPayload == nil {
-			return false, baseapierr
-		}
-
-		if userPayload.Role != authtypes.RoleAdmin.String() {
-			return false, model.BadRequest(fmt.Errorf("auth method not supported"))
-		}
-
-	}
-
-	return true, nil
-}
-
-// PrecheckLogin is called when the login or signup page is loaded
-// to check sso login is to be prompted
-func (m *modelDao) PrecheckLogin(ctx context.Context, email, sourceUrl string) (*basemodel.PrecheckResponse, basemodel.BaseApiError) {
-
-	// assume user is valid unless proven otherwise
-	resp := &basemodel.PrecheckResponse{IsUser: true, CanSelfRegister: false}
-
-	// check if email is a valid user
-	userPayload, baseApiErr := m.GetUserByEmail(ctx, email)
-	if baseApiErr != nil {
-		return resp, baseApiErr
-	}
-
-	if userPayload == nil {
-		resp.IsUser = false
-	}
-
-	ssoAvailable := true
-	err := m.checkFeature(model.SSO)
-	if err != nil {
-		switch err.(type) {
-		case basemodel.ErrFeatureUnavailable:
-			// do nothing, just skip sso
-			ssoAvailable = false
-		default:
-			zap.L().Error("feature check failed", zap.String("featureKey", model.SSO), zap.Error(err))
-			return resp, model.BadRequestStr(err.Error())
-		}
-	}
-
-	if ssoAvailable {
-
-		resp.IsUser = true
-
-		// find domain from email
-		orgDomain, apierr := m.GetDomainByEmail(ctx, email)
-		if apierr != nil {
-			zap.L().Error("failed to get org domain from email", zap.String("email", email), zap.Error(apierr.ToError()))
-			return resp, apierr
-		}
-
-		if orgDomain != nil && orgDomain.SsoEnabled {
-			// saml is enabled for this domain, lets prepare sso url
-
-			if sourceUrl == "" {
-				sourceUrl = constants.GetDefaultSiteURL()
-			}
-
-			// parse source url that generated the login request
-			var err error
-			escapedUrl, _ := url.QueryUnescape(sourceUrl)
-			siteUrl, err := url.Parse(escapedUrl)
-			if err != nil {
-				zap.L().Error("failed to parse referer", zap.Error(err))
-				return resp, model.InternalError(fmt.Errorf("failed to generate login request"))
-			}
-
-			// build Idp URL that will authenticat the user
-			// the front-end will redirect user to this url
-			resp.SsoUrl, err = orgDomain.BuildSsoUrl(siteUrl)
-
-			if err != nil {
-				zap.L().Error("failed to prepare saml request for domain", zap.String("domain", orgDomain.Name), zap.Error(err))
-				return resp, model.InternalError(err)
-			}
-
-			// set SSO to true, as the url is generated correctly
-			resp.SSO = true
-		}
-	}
-	return resp, nil
-}

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

@@ -10,8 +10,8 @@ import (
 	"time"
 
 	"github.com/SigNoz/signoz/ee/query-service/model"
-	"github.com/SigNoz/signoz/ee/types"
 	basemodel "github.com/SigNoz/signoz/pkg/query-service/model"
+	"github.com/SigNoz/signoz/pkg/types"
 	ossTypes "github.com/SigNoz/signoz/pkg/types"
 	"github.com/google/uuid"
 	"go.uber.org/zap"
@@ -44,7 +44,7 @@ func (m *modelDao) GetDomainFromSsoResponse(ctx context.Context, relayState *url
 		}
 
 		domain, err = m.GetDomain(ctx, domainId)
-		if (err != nil) || domain == nil {
+		if err != nil {
 			zap.L().Error("failed to find domain from domainId received in IdP response", zap.Error(err))
 			return nil, fmt.Errorf("invalid credentials")
 		}
@@ -54,7 +54,7 @@ func (m *modelDao) GetDomainFromSsoResponse(ctx context.Context, relayState *url
 
 		domainFromDB, err := m.GetDomainByName(ctx, domainNameStr)
 		domain = domainFromDB
-		if (err != nil) || domain == nil {
+		if err != nil {
 			zap.L().Error("failed to find domain from domainName received in IdP response", zap.Error(err))
 			return nil, fmt.Errorf("invalid credentials")
 		}
@@ -70,7 +70,7 @@ func (m *modelDao) GetDomainFromSsoResponse(ctx context.Context, relayState *url
 func (m *modelDao) GetDomainByName(ctx context.Context, name string) (*types.GettableOrgDomain, basemodel.BaseApiError) {
 
 	stored := types.StorableOrgDomain{}
-	err := m.DB().NewSelect().
+	err := m.sqlStore.BunDB().NewSelect().
 		Model(&stored).
 		Where("name = ?", name).
 		Limit(1).
@@ -94,7 +94,7 @@ func (m *modelDao) GetDomainByName(ctx context.Context, name string) (*types.Get
 func (m *modelDao) GetDomain(ctx context.Context, id uuid.UUID) (*types.GettableOrgDomain, basemodel.BaseApiError) {
 
 	stored := types.StorableOrgDomain{}
-	err := m.DB().NewSelect().
+	err := m.sqlStore.BunDB().NewSelect().
 		Model(&stored).
 		Where("id = ?", id).
 		Limit(1).
@@ -119,7 +119,7 @@ func (m *modelDao) ListDomains(ctx context.Context, orgId string) ([]types.Getta
 	domains := []types.GettableOrgDomain{}
 
 	stored := []types.StorableOrgDomain{}
-	err := m.DB().NewSelect().
+	err := m.sqlStore.BunDB().NewSelect().
 		Model(&stored).
 		Where("org_id = ?", orgId).
 		Scan(ctx)
@@ -167,7 +167,7 @@ func (m *modelDao) CreateDomain(ctx context.Context, domain *types.GettableOrgDo
 		TimeAuditable: ossTypes.TimeAuditable{CreatedAt: time.Now(), UpdatedAt: time.Now()},
 	}
 
-	_, err = m.DB().NewInsert().
+	_, err = m.sqlStore.BunDB().NewInsert().
 		Model(&storableDomain).
 		Exec(ctx)
 
@@ -201,7 +201,7 @@ func (m *modelDao) UpdateDomain(ctx context.Context, domain *types.GettableOrgDo
 		TimeAuditable: ossTypes.TimeAuditable{UpdatedAt: time.Now()},
 	}
 
-	_, err = m.DB().NewUpdate().
+	_, err = m.sqlStore.BunDB().NewUpdate().
 		Model(storableDomain).
 		Column("data", "updated_at").
 		WherePK().
@@ -224,7 +224,7 @@ func (m *modelDao) DeleteDomain(ctx context.Context, id uuid.UUID) basemodel.Bas
 	}
 
 	storableDomain := &types.StorableOrgDomain{ID: id}
-	_, err := m.DB().NewDelete().
+	_, err := m.sqlStore.BunDB().NewDelete().
 		Model(storableDomain).
 		WherePK().
 		Exec(ctx)
@@ -251,7 +251,7 @@ func (m *modelDao) GetDomainByEmail(ctx context.Context, email string) (*types.G
 	parsedDomain := components[1]
 
 	stored := types.StorableOrgDomain{}
-	err := m.DB().NewSelect().
+	err := m.sqlStore.BunDB().NewSelect().
 		Model(&stored).
 		Where("name = ?", parsedDomain).
 		Limit(1).

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

@@ -1,46 +1,18 @@
 package sqlite
 
 import (
-	"fmt"
-
-	basedao "github.com/SigNoz/signoz/pkg/query-service/dao"
-	basedsql "github.com/SigNoz/signoz/pkg/query-service/dao/sqlite"
-	baseint "github.com/SigNoz/signoz/pkg/query-service/interfaces"
+	"github.com/SigNoz/signoz/pkg/modules/user"
+	"github.com/SigNoz/signoz/pkg/modules/user/impluser"
 	"github.com/SigNoz/signoz/pkg/sqlstore"
-	"github.com/uptrace/bun"
 )
 
 type modelDao struct {
-	*basedsql.ModelDaoSqlite
-	flags baseint.FeatureLookup
-}
-
-// SetFlagProvider sets the feature lookup provider
-func (m *modelDao) SetFlagProvider(flags baseint.FeatureLookup) {
-	m.flags = flags
-}
-
-// CheckFeature confirms if a feature is available
-func (m *modelDao) checkFeature(key string) error {
-	if m.flags == nil {
-		return fmt.Errorf("flag provider not set")
-	}
-
-	return m.flags.CheckFeature(key)
+	userModule user.Module
+	sqlStore   sqlstore.SQLStore
 }
 
 // InitDB creates and extends base model DB repository
-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}
-	return m, nil
-}
-
-func (m *modelDao) DB() *bun.DB {
-	return m.ModelDaoSqlite.DB()
+func NewModelDao(sqlStore sqlstore.SQLStore) *modelDao {
+	userModule := impluser.NewModule(impluser.NewStore(sqlStore))
+	return &modelDao{userModule: userModule, sqlStore: sqlStore}
 }

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

@@ -17,7 +17,7 @@ import (
 func (m *modelDao) CreatePAT(ctx context.Context, orgID string, p types.GettablePAT) (types.GettablePAT, basemodel.BaseApiError) {
 	p.StorablePersonalAccessToken.OrgID = orgID
 	p.StorablePersonalAccessToken.ID = valuer.GenerateUUID()
-	_, err := m.DB().NewInsert().
+	_, err := m.sqlStore.BunDB().NewInsert().
 		Model(&p.StorablePersonalAccessToken).
 		Exec(ctx)
 	if err != nil {
@@ -25,7 +25,7 @@ func (m *modelDao) CreatePAT(ctx context.Context, orgID string, p types.Gettable
 		return types.GettablePAT{}, model.InternalError(fmt.Errorf("PAT insertion failed"))
 	}
 
-	createdByUser, _ := m.GetUser(ctx, p.UserID)
+	createdByUser, _ := m.userModule.GetUserByID(ctx, orgID, p.UserID)
 	if createdByUser == nil {
 		p.CreatedByUser = types.PatUser{
 			NotFound: true,
@@ -33,14 +33,15 @@ func (m *modelDao) CreatePAT(ctx context.Context, orgID string, p types.Gettable
 	} else {
 		p.CreatedByUser = types.PatUser{
 			User: ossTypes.User{
-				ID:    createdByUser.ID,
-				Name:  createdByUser.Name,
-				Email: createdByUser.Email,
+				Identifiable: ossTypes.Identifiable{
+					ID: createdByUser.ID,
+				},
+				DisplayName: createdByUser.DisplayName,
+				Email:       createdByUser.Email,
 				TimeAuditable: ossTypes.TimeAuditable{
 					CreatedAt: createdByUser.CreatedAt,
 					UpdatedAt: createdByUser.UpdatedAt,
 				},
-				ProfilePictureURL: createdByUser.ProfilePictureURL,
 			},
 			NotFound: false,
 		}
@@ -49,7 +50,7 @@ func (m *modelDao) CreatePAT(ctx context.Context, orgID string, p types.Gettable
 }
 
 func (m *modelDao) UpdatePAT(ctx context.Context, orgID string, p types.GettablePAT, id valuer.UUID) basemodel.BaseApiError {
-	_, err := m.DB().NewUpdate().
+	_, err := m.sqlStore.BunDB().NewUpdate().
 		Model(&p.StorablePersonalAccessToken).
 		Column("role", "name", "updated_at", "updated_by_user_id").
 		Where("id = ?", id.StringValue()).
@@ -66,7 +67,7 @@ func (m *modelDao) UpdatePAT(ctx context.Context, orgID string, p types.Gettable
 func (m *modelDao) ListPATs(ctx context.Context, orgID string) ([]types.GettablePAT, basemodel.BaseApiError) {
 	pats := []types.StorablePersonalAccessToken{}
 
-	if err := m.DB().NewSelect().
+	if err := m.sqlStore.BunDB().NewSelect().
 		Model(&pats).
 		Where("revoked = false").
 		Where("org_id = ?", orgID).
@@ -82,7 +83,7 @@ func (m *modelDao) ListPATs(ctx context.Context, orgID string) ([]types.Gettable
 			StorablePersonalAccessToken: pats[i],
 		}
 
-		createdByUser, _ := m.GetUser(ctx, pats[i].UserID)
+		createdByUser, _ := m.userModule.GetUserByID(ctx, orgID, pats[i].UserID)
 		if createdByUser == nil {
 			patWithUser.CreatedByUser = types.PatUser{
 				NotFound: true,
@@ -90,20 +91,21 @@ func (m *modelDao) ListPATs(ctx context.Context, orgID string) ([]types.Gettable
 		} else {
 			patWithUser.CreatedByUser = types.PatUser{
 				User: ossTypes.User{
-					ID:    createdByUser.ID,
-					Name:  createdByUser.Name,
-					Email: createdByUser.Email,
+					Identifiable: ossTypes.Identifiable{
+						ID: createdByUser.ID,
+					},
+					DisplayName: createdByUser.DisplayName,
+					Email:       createdByUser.Email,
 					TimeAuditable: ossTypes.TimeAuditable{
 						CreatedAt: createdByUser.CreatedAt,
 						UpdatedAt: createdByUser.UpdatedAt,
 					},
-					ProfilePictureURL: createdByUser.ProfilePictureURL,
 				},
 				NotFound: false,
 			}
 		}
 
-		updatedByUser, _ := m.GetUser(ctx, pats[i].UpdatedByUserID)
+		updatedByUser, _ := m.userModule.GetUserByID(ctx, orgID, pats[i].UpdatedByUserID)
 		if updatedByUser == nil {
 			patWithUser.UpdatedByUser = types.PatUser{
 				NotFound: true,
@@ -111,14 +113,15 @@ func (m *modelDao) ListPATs(ctx context.Context, orgID string) ([]types.Gettable
 		} else {
 			patWithUser.UpdatedByUser = types.PatUser{
 				User: ossTypes.User{
-					ID:    updatedByUser.ID,
-					Name:  updatedByUser.Name,
-					Email: updatedByUser.Email,
+					Identifiable: ossTypes.Identifiable{
+						ID: updatedByUser.ID,
+					},
+					DisplayName: updatedByUser.DisplayName,
+					Email:       updatedByUser.Email,
 					TimeAuditable: ossTypes.TimeAuditable{
 						CreatedAt: updatedByUser.CreatedAt,
 						UpdatedAt: updatedByUser.UpdatedAt,
 					},
-					ProfilePictureURL: updatedByUser.ProfilePictureURL,
 				},
 				NotFound: false,
 			}
@@ -131,7 +134,7 @@ func (m *modelDao) ListPATs(ctx context.Context, orgID string) ([]types.Gettable
 
 func (m *modelDao) RevokePAT(ctx context.Context, orgID string, id valuer.UUID, userID string) basemodel.BaseApiError {
 	updatedAt := time.Now().Unix()
-	_, err := m.DB().NewUpdate().
+	_, err := m.sqlStore.BunDB().NewUpdate().
 		Model(&types.StorablePersonalAccessToken{}).
 		Set("revoked = ?", true).
 		Set("updated_by_user_id = ?", userID).
@@ -149,7 +152,7 @@ func (m *modelDao) RevokePAT(ctx context.Context, orgID string, id valuer.UUID,
 func (m *modelDao) GetPAT(ctx context.Context, token string) (*types.GettablePAT, basemodel.BaseApiError) {
 	pats := []types.StorablePersonalAccessToken{}
 
-	if err := m.DB().NewSelect().
+	if err := m.sqlStore.BunDB().NewSelect().
 		Model(&pats).
 		Where("token = ?", token).
 		Where("revoked = false").
@@ -174,7 +177,7 @@ func (m *modelDao) GetPAT(ctx context.Context, token string) (*types.GettablePAT
 func (m *modelDao) GetPATByID(ctx context.Context, orgID string, id valuer.UUID) (*types.GettablePAT, basemodel.BaseApiError) {
 	pats := []types.StorablePersonalAccessToken{}
 
-	if err := m.DB().NewSelect().
+	if err := m.sqlStore.BunDB().NewSelect().
 		Model(&pats).
 		Where("id = ?", id.StringValue()).
 		Where("org_id = ?", orgID).

ee/query-service/main.go

@@ -6,6 +6,7 @@ import (
 	"os"
 	"time"
 
+	eeuserimpl "github.com/SigNoz/signoz/ee/modules/user/impluser"
 	"github.com/SigNoz/signoz/ee/query-service/app"
 	"github.com/SigNoz/signoz/ee/sqlstore/postgressqlstore"
 	"github.com/SigNoz/signoz/ee/zeus"
@@ -13,8 +14,10 @@ import (
 	"github.com/SigNoz/signoz/pkg/config"
 	"github.com/SigNoz/signoz/pkg/config/envprovider"
 	"github.com/SigNoz/signoz/pkg/config/fileprovider"
+	"github.com/SigNoz/signoz/pkg/modules/user"
 	baseconst "github.com/SigNoz/signoz/pkg/query-service/constants"
 	"github.com/SigNoz/signoz/pkg/signoz"
+	"github.com/SigNoz/signoz/pkg/sqlstore"
 	"github.com/SigNoz/signoz/pkg/sqlstore/sqlstorehook"
 	"github.com/SigNoz/signoz/pkg/types/authtypes"
 	"github.com/SigNoz/signoz/pkg/version"
@@ -118,6 +121,12 @@ func main() {
 		signoz.NewWebProviderFactories(),
 		sqlStoreFactories,
 		signoz.NewTelemetryStoreProviderFactories(),
+		func(sqlstore sqlstore.SQLStore) user.Module {
+			return eeuserimpl.NewModule(eeuserimpl.NewStore(sqlstore))
+		},
+		func(userModule user.Module) user.Handler {
+			return eeuserimpl.NewHandler(userModule)
+		},
 	)
 	if err != nil {
 		zap.L().Fatal("Failed to create signoz", zap.Error(err))

ee/query-service/model/auth.go

@@ -1,12 +0,0 @@
-package model
-
-import (
-	basemodel "github.com/SigNoz/signoz/pkg/query-service/model"
-)
-
-// GettableInvitation overrides base object and adds precheck into
-// response
-type GettableInvitation struct {
-	*basemodel.InvitationResponseObject
-	Precheck *basemodel.PrecheckResponse `json:"precheck"`
-}

ee/query-service/model/plans.go

@@ -62,6 +62,13 @@ var BasicPlan = basemodel.FeatureSet{
 		UsageLimit: -1,
 		Route:      "",
 	},
+	basemodel.Feature{
+		Name:       basemodel.TraceFunnels,
+		Active:     false,
+		Usage:      0,
+		UsageLimit: -1,
+		Route:      "",
+	},
 }
 
 var EnterprisePlan = basemodel.FeatureSet{
@@ -114,4 +121,11 @@ var EnterprisePlan = basemodel.FeatureSet{
 		UsageLimit: -1,
 		Route:      "",
 	},
+	basemodel.Feature{
+		Name:       basemodel.TraceFunnels,
+		Active:     false,
+		Usage:      0,
+		UsageLimit: -1,
+		Route:      "",
+	},
 }

ee/query-service/sso/model.go

@@ -1,31 +0,0 @@
-package sso 
-
-import (
-	"net/http"
-)
-
-// SSOIdentity contains details of user received from SSO provider 
-type SSOIdentity struct {
-	UserID            string
-	Username          string
-	PreferredUsername string
-	Email             string
-	EmailVerified     bool
-	ConnectorData []byte
-}
-
-// OAuthCallbackProvider is an interface implemented by connectors which use an OAuth
-// style redirect flow to determine user information.
-type OAuthCallbackProvider interface {
-	// The initial URL user would be redirect to.  
-	// OAuth2 implementations support various scopes but we only need profile and user as 
-	// the roles are still being managed in SigNoz. 
-	BuildAuthURL(state string) (string, error)
-
-	// Handle the callback to the server (after login at oauth provider site)
-	// and return a email identity. 
-	// At the moment we dont support auto signup flow (based on domain), so 
-	// the full identity (including name, group etc) is not required outside of the 
-	// connector 
-	HandleCallback(r *http.Request) (identity *SSOIdentity, err error)
-}

ee/sqlstore/postgressqlstore/dialect.go

@@ -19,12 +19,14 @@ var (
 var (
 	Org              = "org"
 	User             = "user"
+	FactorPassword   = "factor_password"
 	CloudIntegration = "cloud_integration"
 )
 
 var (
 	OrgReference              = `("org_id") REFERENCES "organizations" ("id")`
 	UserReference             = `("user_id") REFERENCES "users" ("id") ON DELETE CASCADE ON UPDATE CASCADE`
+	FactorPasswordReference   = `("password_id") REFERENCES "factor_password" ("id")`
 	CloudIntegrationReference = `("cloud_integration_id") REFERENCES "cloud_integration" ("id") ON DELETE CASCADE`
 )
 
@@ -264,6 +266,8 @@ func (dialect *dialect) RenameTableAndModifyModel(ctx context.Context, bun bun.I
 			fkReferences = append(fkReferences, OrgReference)
 		} else if reference == User && !slices.Contains(fkReferences, UserReference) {
 			fkReferences = append(fkReferences, UserReference)
+		} else if reference == FactorPassword && !slices.Contains(fkReferences, FactorPasswordReference) {
+			fkReferences = append(fkReferences, FactorPasswordReference)
 		} else if reference == CloudIntegration && !slices.Contains(fkReferences, CloudIntegrationReference) {
 			fkReferences = append(fkReferences, CloudIntegrationReference)
 		}

frontend/.eslintrc.js

@@ -110,6 +110,8 @@ module.exports = {
 		// eslint rules need to remove
 		'@typescript-eslint/no-shadow': 'off',
 		'import/no-cycle': 'off',
+		// https://typescript-eslint.io/rules/consistent-return/ check the warning for details
+		'consistent-return': 'off',
 		'prettier/prettier': [
 			'error',
 			{},

frontend/package.json

@@ -31,6 +31,7 @@
 		"@dnd-kit/core": "6.1.0",
 		"@dnd-kit/modifiers": "7.0.0",
 		"@dnd-kit/sortable": "8.0.0",
+		"@dnd-kit/utilities": "3.2.2",
 		"@grafana/data": "^11.2.3",
 		"@mdx-js/loader": "2.3.0",
 		"@mdx-js/react": "2.3.0",

frontend/public/locales/en/titles.json

@@ -69,5 +69,5 @@
 	"METRICS_EXPLORER": "SigNoz | Metrics Explorer",
 	"METRICS_EXPLORER_EXPLORER": "SigNoz | Metrics Explorer",
 	"METRICS_EXPLORER_VIEWS": "SigNoz | Metrics Explorer",
-	"API_MONITORING": "SigNoz | API Monitoring"
+	"API_MONITORING": "SigNoz | External APIs"
 }

frontend/src/AppRoutes/Private.tsx

@@ -1,6 +1,6 @@
 import getLocalStorageApi from 'api/browser/localstorage/get';
 import setLocalStorageApi from 'api/browser/localstorage/set';
-import getOrgUser from 'api/v1/user/getOrgUser';
+import getAll from 'api/v1/user/get';
 import { FeatureKeys } from 'constants/features';
 import { LOCALSTORAGE } from 'constants/localStorage';
 import ROUTES from 'constants/routes';
@@ -11,8 +11,11 @@ import { useAppContext } from 'providers/App/App';
 import { ReactChild, useCallback, useEffect, useMemo, useState } from 'react';
 import { useQuery } from 'react-query';
 import { matchPath, useLocation } from 'react-router-dom';
+import { SuccessResponseV2 } from 'types/api';
+import APIError from 'types/api/error';
 import { LicensePlatform, LicenseState } from 'types/api/licensesV3/getActive';
 import { Organization } from 'types/api/user/getOrganization';
+import { UserResponse } from 'types/api/user/getUser';
 import { USER_ROLES } from 'types/roles';
 import { routePermission } from 'utils/permission';
 
@@ -58,12 +61,13 @@ function PrivateRoute({ children }: PrivateRouteProps): JSX.Element {
 
 	const [orgData, setOrgData] = useState<Organization | undefined>(undefined);
 
-	const { data: orgUsers, isFetching: isFetchingOrgUsers } = useQuery({
+	const { data: usersData, isFetching: isFetchingUsers } = useQuery<
+		SuccessResponseV2<UserResponse[]> | undefined,
+		APIError
+	>({
 		queryFn: () => {
 			if (orgData && orgData.id !== undefined) {
-				return getOrgUser({
-					orgId: orgData.id,
-				});
+				return getAll();
 			}
 			return undefined;
 		},
@@ -72,23 +76,23 @@ function PrivateRoute({ children }: PrivateRouteProps): JSX.Element {
 	});
 
 	const checkFirstTimeUser = useCallback((): boolean => {
-		const users = orgUsers?.payload || [];
+		const users = usersData?.data || [];
 
 		const remainingUsers = users.filter(
 			(user) => user.email !== 'admin@signoz.cloud',
 		);
 
 		return remainingUsers.length === 1;
-	}, [orgUsers?.payload]);
+	}, [usersData?.data]);
 
 	useEffect(() => {
 		if (
 			isCloudUserVal &&
 			!isFetchingOrgPreferences &&
 			orgPreferences &&
-			!isFetchingOrgUsers &&
-			orgUsers &&
-			orgUsers.payload
+			!isFetchingUsers &&
+			usersData &&
+			usersData.data
 		) {
 			const isOnboardingComplete = orgPreferences?.find(
 				(preference: Record<string, any>) => preference.key === 'ORG_ONBOARDING',
@@ -108,9 +112,9 @@ function PrivateRoute({ children }: PrivateRouteProps): JSX.Element {
 		checkFirstTimeUser,
 		isCloudUserVal,
 		isFetchingOrgPreferences,
-		isFetchingOrgUsers,
+		isFetchingUsers,
 		orgPreferences,
-		orgUsers,
+		usersData,
 		pathname,
 	]);
 

frontend/src/AppRoutes/index.tsx

@@ -5,6 +5,7 @@ import setLocalStorageApi from 'api/browser/localstorage/set';
 import logEvent from 'api/common/logEvent';
 import NotFound from 'components/NotFound';
 import Spinner from 'components/Spinner';
+import UserpilotRouteTracker from 'components/UserpilotRouteTracker/UserpilotRouteTracker';
 import { FeatureKeys } from 'constants/features';
 import { LOCALSTORAGE } from 'constants/localStorage';
 import ROUTES from 'constants/routes';
@@ -69,14 +70,14 @@ function App(): JSX.Element {
 				const orgName =
 					org && Array.isArray(org) && org.length > 0 ? org[0].displayName : '';
 
-				const { name, email, role } = user;
+				const { displayName, email, role } = user;
 
 				const domain = extractDomain(email);
 				const hostNameParts = hostname.split('.');
 
 				const identifyPayload = {
 					email,
-					name,
+					name: displayName,
 					company_name: orgName,
 					tenant_id: hostNameParts[0],
 					data_region: hostNameParts[1],
@@ -105,7 +106,7 @@ function App(): JSX.Element {
 
 				Userpilot.identify(email, {
 					email,
-					name,
+					name: displayName,
 					orgName,
 					tenant_id: hostNameParts[0],
 					data_region: hostNameParts[1],
@@ -117,7 +118,7 @@ function App(): JSX.Element {
 
 				posthog?.identify(email, {
 					email,
-					name,
+					name: displayName,
 					orgName,
 					tenant_id: hostNameParts[0],
 					data_region: hostNameParts[1],
@@ -143,7 +144,7 @@ function App(): JSX.Element {
 				) {
 					window.cioanalytics.reset();
 					window.cioanalytics.identify(email, {
-						name: user.name,
+						name: user.displayName,
 						email,
 						role: user.role,
 					});
@@ -257,7 +258,7 @@ function App(): JSX.Element {
 				window.Intercom('boot', {
 					app_id: process.env.INTERCOM_APP_ID,
 					email: user?.email || '',
-					name: user?.name || '',
+					name: user?.displayName || '',
 				});
 			}
 		}
@@ -354,6 +355,7 @@ function App(): JSX.Element {
 			<ConfigProvider theme={themeConfig}>
 				<Router history={history}>
 					<CompatRouter>
+						<UserpilotRouteTracker />
 						<NotificationProvider>
 							<PrivateRoute>
 								<ResourceProvider>

frontend/src/api/index.ts

@@ -2,7 +2,7 @@
 /* eslint-disable no-param-reassign */
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import getLocalStorageApi from 'api/browser/localstorage/get';
-import loginApi from 'api/v1/user/login';
+import loginApi from 'api/v1/login/login';
 import afterLogin from 'AppRoutes/utils';
 import axios, { AxiosResponse, InternalAxiosRequestConfig } from 'axios';
 import { ENVIRONMENT } from 'constants/env';
@@ -71,15 +71,15 @@ const interceptorRejected = async (
 			const { response } = value;
 			// reject the refresh token error
 			if (response.status === 401 && response.config.url !== '/login') {
-				const response = await loginApi({
-					refreshToken: getLocalStorageApi(LOCALSTORAGE.REFRESH_AUTH_TOKEN) || '',
-				});
+				try {
+					const response = await loginApi({
+						refreshToken: getLocalStorageApi(LOCALSTORAGE.REFRESH_AUTH_TOKEN) || '',
+					});
 
-				if (response.statusCode === 200) {
 					afterLogin(
-						response.payload.userId,
-						response.payload.accessJwt,
-						response.payload.refreshJwt,
+						response.data.userId,
+						response.data.accessJwt,
+						response.data.refreshJwt,
 						true,
 					);
 
@@ -89,23 +89,22 @@ const interceptorRejected = async (
 							method: value.config.method,
 							headers: {
 								...value.config.headers,
-								Authorization: `Bearer ${response.payload.accessJwt}`,
+								Authorization: `Bearer ${response.data.accessJwt}`,
 							},
 							data: {
 								...JSON.parse(value.config.data || '{}'),
 							},
 						},
 					);
-
 					if (reResponse.status === 200) {
 						return await Promise.resolve(reResponse);
 					}
 					Logout();
 					return await Promise.reject(reResponse);
+				} catch (error) {
+					Logout();
 				}
-				Logout();
 			}
-
 			// when refresh token is expired
 			if (response.status === 401 && response.config.url === '/login') {
 				Logout();

frontend/src/api/metrics/ApDex/getApDexSettings.ts

@@ -1,8 +0,0 @@
-import axios from 'api';
-import { AxiosResponse } from 'axios';
-import { ApDexPayloadAndSettingsProps } from 'types/api/metrics/getApDex';
-
-export const getApDexSettings = (
-	servicename: string,
-): Promise<AxiosResponse<ApDexPayloadAndSettingsProps[]>> =>
-	axios.get(`/settings/apdex?services=${servicename}`);

frontend/src/api/quickFilters/getCustomFilters.ts

@@ -1,21 +1,20 @@
-import axios from 'api';
+import { ApiBaseInstance } from 'api';
 import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
 import { AxiosError } from 'axios';
 import { ErrorResponse, SuccessResponse } from 'types/api';
-import { PayloadProps, Props } from 'types/api/user/updateRole';
+import { PayloadProps, Props } from 'types/api/quickFilters/getCustomFilters';
 
-const updateRole = async (
+const getCustomFilters = async (
 	props: Props,
 ): Promise<SuccessResponse<PayloadProps> | ErrorResponse> => {
+	const { signal } = props;
 	try {
-		const response = await axios.put(`/rbac/role/${props.userId}`, {
-			group_name: props.group_name,
-		});
+		const response = await ApiBaseInstance.get(`orgs/me/filters/${signal}`);
 
 		return {
 			statusCode: 200,
 			error: null,
-			message: response.data.status,
+			message: 'Success',
 			payload: response.data.data,
 		};
 	} catch (error) {
@@ -23,4 +22,4 @@ const updateRole = async (
 	}
 };
 
-export default updateRole;
+export default getCustomFilters;

frontend/src/api/quickFilters/updateCustomFilters.ts

@@ -0,0 +1,13 @@
+import { ApiBaseInstance } from 'api';
+import { AxiosError } from 'axios';
+import { SuccessResponse } from 'types/api';
+import { UpdateCustomFiltersProps } from 'types/api/quickFilters/updateCustomFilters';
+
+const updateCustomFiltersAPI = async (
+	props: UpdateCustomFiltersProps,
+): Promise<SuccessResponse<void> | AxiosError> =>
+	ApiBaseInstance.put(`orgs/me/filters`, {
+		...props.data,
+	});
+
+export default updateCustomFiltersAPI;

frontend/src/api/traceFunnels/index.ts

@@ -22,7 +22,7 @@ export const createFunnel = async (
 		statusCode: 200,
 		error: null,
 		message: 'Funnel created successfully',
-		payload: response.data,
+		payload: response.data.data,
 	};
 };
 
@@ -196,7 +196,9 @@ export interface FunnelOverviewResponse {
 			avg_rate: number;
 			conversion_rate: number | null;
 			errors: number;
+			// TODO(shaheer): remove p99_latency once we have support for latency
 			p99_latency: number;
+			latency: number;
 		};
 	}>;
 }
@@ -222,13 +224,6 @@ export const getFunnelOverview = async (
 	};
 };
 
-export interface SlowTracesPayload {
-	start_time: number;
-	end_time: number;
-	step_a_order: number;
-	step_b_order: number;
-}
-
 export interface SlowTraceData {
 	status: string;
 	data: Array<{
@@ -243,7 +238,7 @@ export interface SlowTraceData {
 
 export const getFunnelSlowTraces = async (
 	funnelId: string,
-	payload: SlowTracesPayload,
+	payload: FunnelOverviewPayload,
 	signal?: AbortSignal,
 ): Promise<SuccessResponse<SlowTraceData> | ErrorResponse> => {
 	const response = await axios.post(
@@ -261,12 +256,6 @@ export const getFunnelSlowTraces = async (
 		payload: response.data,
 	};
 };
-export interface ErrorTracesPayload {
-	start_time: number;
-	end_time: number;
-	step_a_order: number;
-	step_b_order: number;
-}
 
 export interface ErrorTraceData {
 	status: string;
@@ -282,7 +271,7 @@ export interface ErrorTraceData {
 
 export const getFunnelErrorTraces = async (
 	funnelId: string,
-	payload: ErrorTracesPayload,
+	payload: FunnelOverviewPayload,
 	signal?: AbortSignal,
 ): Promise<SuccessResponse<ErrorTraceData> | ErrorResponse> => {
 	const response: AxiosResponse = await axios.post(
@@ -337,3 +326,37 @@ export const getFunnelSteps = async (
 		payload: response.data,
 	};
 };
+
+export interface FunnelStepsOverviewPayload {
+	start_time: number;
+	end_time: number;
+	step_start?: number;
+	step_end?: number;
+}
+
+export interface FunnelStepsOverviewResponse {
+	status: string;
+	data: Array<{
+		timestamp: string;
+		data: Record<string, number>;
+	}>;
+}
+
+export const getFunnelStepsOverview = async (
+	funnelId: string,
+	payload: FunnelStepsOverviewPayload,
+	signal?: AbortSignal,
+): Promise<SuccessResponse<FunnelStepsOverviewResponse> | ErrorResponse> => {
+	const response = await axios.post(
+		`${FUNNELS_BASE_PATH}/${funnelId}/analytics/steps/overview`,
+		payload,
+		{ signal },
+	);
+
+	return {
+		statusCode: 200,
+		error: null,
+		message: '',
+		payload: response.data,
+	};
+};

frontend/src/api/utils.ts

@@ -12,7 +12,7 @@ export const Logout = (): void => {
 	deleteLocalStorageKey(LOCALSTORAGE.LOGGED_IN_USER_NAME);
 	deleteLocalStorageKey(LOCALSTORAGE.CHAT_SUPPORT);
 	deleteLocalStorageKey(LOCALSTORAGE.USER_ID);
-
+	deleteLocalStorageKey(LOCALSTORAGE.QUICK_FILTERS_SETTINGS_ANNOUNCEMENT);
 	window.dispatchEvent(new CustomEvent('LOGOUT'));
 
 	// eslint-disable-next-line @typescript-eslint/ban-ts-comment

frontend/src/api/v1/factor_password/changeMyPassword.ts

@@ -1,25 +1,26 @@
 import axios from 'api';
-import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
 import { AxiosError } from 'axios';
-import { ErrorResponse, SuccessResponse } from 'types/api';
+import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
 import { PayloadProps, Props } from 'types/api/user/changeMyPassword';
 
 const changeMyPassword = async (
 	props: Props,
-): Promise<SuccessResponse<PayloadProps> | ErrorResponse> => {
+): Promise<SuccessResponseV2<PayloadProps>> => {
 	try {
-		const response = await axios.post(`/changePassword/${props.userId}`, {
-			...props,
-		});
+		const response = await axios.post<PayloadProps>(
+			`/changePassword/${props.userId}`,
+			{
+				...props,
+			},
+		);
 
 		return {
-			statusCode: 200,
-			error: null,
-			message: response.data.status,
-			payload: response.data,
+			httpStatusCode: response.status,
+			data: response.data,
 		};
 	} catch (error) {
-		return ErrorResponseHandler(error as AxiosError);
+		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
 	}
 };
 

frontend/src/api/v1/factor_password/getResetPasswordToken.ts

@@ -1,23 +1,27 @@
 import axios from 'api';
-import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
 import { AxiosError } from 'axios';
-import { ErrorResponse, SuccessResponse } from 'types/api';
-import { PayloadProps, Props } from 'types/api/user/getResetPasswordToken';
+import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
+import {
+	GetResetPasswordToken,
+	PayloadProps,
+	Props,
+} from 'types/api/user/getResetPasswordToken';
 
 const getResetPasswordToken = async (
 	props: Props,
-): Promise<SuccessResponse<PayloadProps> | ErrorResponse> => {
+): Promise<SuccessResponseV2<GetResetPasswordToken>> => {
 	try {
-		const response = await axios.get(`/getResetPasswordToken/${props.userId}`);
+		const response = await axios.get<PayloadProps>(
+			`/getResetPasswordToken/${props.userId}`,
+		);
 
 		return {
-			statusCode: 200,
-			error: null,
-			message: response.data.status,
-			payload: response.data,
+			httpStatusCode: response.status,
+			data: response.data.data,
 		};
 	} catch (error) {
-		return ErrorResponseHandler(error as AxiosError);
+		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
 	}
 };
 

frontend/src/api/v1/factor_password/resetPassword.ts

@@ -1,25 +1,23 @@
 import axios from 'api';
-import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
 import { AxiosError } from 'axios';
-import { ErrorResponse, SuccessResponse } from 'types/api';
+import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
 import { PayloadProps, Props } from 'types/api/user/resetPassword';
 
 const resetPassword = async (
 	props: Props,
-): Promise<SuccessResponse<PayloadProps> | ErrorResponse> => {
+): Promise<SuccessResponseV2<PayloadProps>> => {
 	try {
-		const response = await axios.post(`/resetPassword`, {
+		const response = await axios.post<PayloadProps>(`/resetPassword`, {
 			...props,
 		});
 
 		return {
-			statusCode: 200,
-			error: null,
-			message: response.statusText,
-			payload: response.data,
+			httpStatusCode: response.status,
+			data: response.data,
 		};
 	} catch (error) {
-		return ErrorResponseHandler(error as AxiosError);
+		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
 	}
 };
 

frontend/src/api/v1/invite/bulk/create.ts

@@ -1,18 +1,21 @@
 import axios from 'api';
-import { SuccessResponse } from 'types/api';
-import { InviteUsersResponse, UsersProps } from 'types/api/user/inviteUsers';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
+import { AxiosError } from 'axios';
+import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
+import { UsersProps } from 'types/api/user/inviteUsers';
 
 const inviteUsers = async (
 	users: UsersProps,
-): Promise<SuccessResponse<InviteUsersResponse>> => {
-	const response = await axios.post(`/invite/bulk`, users);
-
-	return {
-		statusCode: 200,
-		error: null,
-		message: response.data.status,
-		payload: response.data,
-	};
+): Promise<SuccessResponseV2<null>> => {
+	try {
+		const response = await axios.post(`/invite/bulk`, users);
+		return {
+			httpStatusCode: response.status,
+			data: null,
+		};
+	} catch (error) {
+		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
+	}
 };
 
 export default inviteUsers;

frontend/src/api/v1/invite/create.ts

@@ -1,25 +1,23 @@
 import axios from 'api';
-import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
 import { AxiosError } from 'axios';
-import { ErrorResponse, SuccessResponse } from 'types/api';
+import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
 import { PayloadProps, Props } from 'types/api/user/setInvite';
 
 const sendInvite = async (
 	props: Props,
-): Promise<SuccessResponse<PayloadProps> | ErrorResponse> => {
+): Promise<SuccessResponseV2<PayloadProps>> => {
 	try {
-		const response = await axios.post(`/invite`, {
+		const response = await axios.post<PayloadProps>(`/invite`, {
 			...props,
 		});
 
 		return {
-			statusCode: 200,
-			error: null,
-			message: response.data.status,
-			payload: response.data,
+			httpStatusCode: response.status,
+			data: response.data,
 		};
 	} catch (error) {
-		return ErrorResponseHandler(error as AxiosError);
+		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
 	}
 };
 

frontend/src/api/v1/invite/get.ts

@@ -0,0 +1,19 @@
+import axios from 'api';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
+import { AxiosError } from 'axios';
+import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
+import { PayloadProps, PendingInvite } from 'types/api/user/getPendingInvites';
+
+const get = async (): Promise<SuccessResponseV2<PendingInvite[]>> => {
+	try {
+		const response = await axios.get<PayloadProps>(`/invite`);
+		return {
+			httpStatusCode: response.status,
+			data: response.data.data,
+		};
+	} catch (error) {
+		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
+	}
+};
+
+export default get;

frontend/src/api/v1/invite/getPendingInvites.ts

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

frontend/src/api/v1/invite/id/accept.ts

@@ -0,0 +1,25 @@
+import axios from 'api';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
+import { AxiosError } from 'axios';
+import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
+import {
+	LoginPrecheckResponse,
+	PayloadProps,
+	Props,
+} from 'types/api/user/accept';
+
+const accept = async (
+	props: Props,
+): Promise<SuccessResponseV2<LoginPrecheckResponse>> => {
+	try {
+		const response = await axios.post<PayloadProps>(`/invite/accept`, props);
+		return {
+			httpStatusCode: response.status,
+			data: response.data.data,
+		};
+	} catch (error) {
+		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
+	}
+};
+
+export default accept;

frontend/src/api/v1/invite/id/delete.ts

@@ -1,24 +1,20 @@
 import axios from 'api';
-import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
 import { AxiosError } from 'axios';
-import { ErrorResponse, SuccessResponse } from 'types/api';
-import { PayloadProps, Props } from 'types/api/user/deleteInvite';
+import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
+import { Props } from 'types/api/user/deleteInvite';
 
-const deleteInvite = async (
-	props: Props,
-): Promise<SuccessResponse<PayloadProps> | ErrorResponse> => {
+const del = async (props: Props): Promise<SuccessResponseV2<null>> => {
 	try {
-		const response = await axios.delete(`/invite/${props.email}`);
+		const response = await axios.delete(`/invite/${props.id}`);
 
 		return {
-			statusCode: 200,
-			error: null,
-			message: response.data.status,
-			payload: response.data,
+			httpStatusCode: response.status,
+			data: null,
 		};
 	} catch (error) {
-		return ErrorResponseHandler(error as AxiosError);
+		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
 	}
 };
 
-export default deleteInvite;
+export default del;

frontend/src/api/v1/invite/id/get.ts

@@ -1,25 +1,27 @@
 import axios from 'api';
-import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
 import { AxiosError } from 'axios';
-import { ErrorResponse, SuccessResponse } from 'types/api';
-import { PayloadProps, Props } from 'types/api/user/getInviteDetails';
+import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
+import {
+	InviteDetails,
+	PayloadProps,
+	Props,
+} from 'types/api/user/getInviteDetails';
 
 const getInviteDetails = async (
 	props: Props,
-): Promise<SuccessResponse<PayloadProps> | ErrorResponse> => {
+): Promise<SuccessResponseV2<InviteDetails>> => {
 	try {
-		const response = await axios.get(
+		const response = await axios.get<PayloadProps>(
 			`/invite/${props.inviteId}?ref=${window.location.href}`,
 		);
 
 		return {
-			statusCode: 200,
-			error: null,
-			message: response.data.status,
-			payload: response.data,
+			httpStatusCode: response.status,
+			data: response.data.data,
 		};
 	} catch (error) {
-		return ErrorResponseHandler(error as AxiosError);
+		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
 	}
 };
 

frontend/src/api/v1/login/login.ts

@@ -2,11 +2,11 @@ import axios from 'api';
 import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
 import { AxiosError } from 'axios';
 import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
-import { PayloadProps, Props } from 'types/api/user/login';
+import { PayloadProps, Props, UserLoginResponse } from 'types/api/user/login';
 
 const login = async (
 	props: Props,
-): Promise<SuccessResponseV2<PayloadProps>> => {
+): Promise<SuccessResponseV2<UserLoginResponse>> => {
 	try {
 		const response = await axios.post<PayloadProps>(`/login`, {
 			...props,
@@ -14,12 +14,10 @@ const login = async (
 
 		return {
 			httpStatusCode: response.status,
-			data: response.data,
+			data: response.data.data,
 		};
 	} catch (error) {
 		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
-		// this line is never reached but ts isn't detecting the never type properly for the ErrorResponseHandlerV2
-		throw error;
 	}
 };
 

frontend/src/api/v1/settings/apdex/services/get.ts

@@ -0,0 +1,26 @@
+import axios from 'api';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
+import { AxiosError } from 'axios';
+import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
+import {
+	ApDexPayloadAndSettingsProps,
+	PayloadProps,
+} from 'types/api/metrics/getApDex';
+
+const getApDexSettings = async (
+	servicename: string,
+): Promise<SuccessResponseV2<ApDexPayloadAndSettingsProps[]>> => {
+	try {
+		const response = await axios.get<PayloadProps>(
+			`/settings/apdex?services=${servicename}`,
+		);
+		return {
+			httpStatusCode: response.status,
+			data: response.data.data,
+		};
+	} catch (error) {
+		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
+	}
+};
+
+export default getApDexSettings;

frontend/src/api/v1/user/get.ts

@@ -0,0 +1,21 @@
+import axios from 'api';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
+import { AxiosError } from 'axios';
+import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
+import { UserResponse } from 'types/api/user/getUser';
+import { PayloadProps } from 'types/api/user/getUsers';
+
+const getAll = async (): Promise<SuccessResponseV2<UserResponse[]>> => {
+	try {
+		const response = await axios.get<PayloadProps>(`/user`);
+
+		return {
+			httpStatusCode: response.status,
+			data: response.data.data,
+		};
+	} catch (error) {
+		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
+	}
+};
+
+export default getAll;

frontend/src/api/v1/user/getOrgUser.ts

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

frontend/src/api/v1/user/id/delete.ts

@@ -1,23 +1,19 @@
 import axios from 'api';
-import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
 import { AxiosError } from 'axios';
-import { ErrorResponse, SuccessResponse } from 'types/api';
-import { PayloadProps, Props } from 'types/api/user/deleteUser';
+import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
+import { Props } from 'types/api/user/deleteUser';
 
-const deleteUser = async (
-	props: Props,
-): Promise<SuccessResponse<PayloadProps> | ErrorResponse> => {
+const deleteUser = async (props: Props): Promise<SuccessResponseV2<null>> => {
 	try {
 		const response = await axios.delete(`/user/${props.userId}`);
 
 		return {
-			statusCode: 200,
-			error: null,
-			message: response.data.status,
-			payload: response.data,
+			httpStatusCode: response.status,
+			data: null,
 		};
 	} catch (error) {
-		return ErrorResponseHandler(error as AxiosError);
+		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
 	}
 };
 

frontend/src/api/v1/user/id/get.ts

@@ -1,18 +1,22 @@
 import axios from 'api';
-import { ErrorResponse, SuccessResponse } from 'types/api';
-import { PayloadProps, Props } from 'types/api/user/getUser';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
+import { AxiosError } from 'axios';
+import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
+import { PayloadProps, Props, UserResponse } from 'types/api/user/getUser';
 
 const getUser = async (
 	props: Props,
-): Promise<SuccessResponse<PayloadProps> | ErrorResponse> => {
-	const response = await axios.get(`/user/${props.userId}`);
+): Promise<SuccessResponseV2<UserResponse>> => {
+	try {
+		const response = await axios.get<PayloadProps>(`/user/${props.userId}`);
 
-	return {
-		statusCode: 200,
-		error: null,
-		message: 'Success',
-		payload: response.data,
-	};
+		return {
+			httpStatusCode: response.status,
+			data: response.data.data,
+		};
+	} catch (error) {
+		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
+	}
 };
 
 export default getUser;

frontend/src/api/v1/user/id/getRoles.ts

@@ -1,28 +0,0 @@
-import axios from 'api';
-import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
-import { AxiosError } from 'axios';
-import { ErrorResponse, SuccessResponse } from 'types/api';
-import { PayloadProps, Props } from 'types/api/user/getUserRole';
-
-const getRoles = async (
-	props: Props,
-): Promise<SuccessResponse<PayloadProps> | ErrorResponse> => {
-	try {
-		const response = await axios.get(`/rbac/role/${props.userId}`, {
-			headers: {
-				Authorization: `bearer ${props.token}`,
-			},
-		});
-
-		return {
-			statusCode: 200,
-			error: null,
-			message: response.data.status,
-			payload: response.data,
-		};
-	} catch (error) {
-		return ErrorResponseHandler(error as AxiosError);
-	}
-};
-
-export default getRoles;

frontend/src/api/v1/user/id/update.ts

@@ -1,26 +1,23 @@
 import axios from 'api';
-import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
 import { AxiosError } from 'axios';
-import { ErrorResponse, SuccessResponse } from 'types/api';
-import { PayloadProps, Props } from 'types/api/user/editUser';
+import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
+import { Props } from 'types/api/user/editUser';
 
-const editUser = async (
-	props: Props,
-): Promise<SuccessResponse<PayloadProps> | ErrorResponse> => {
+const update = async (props: Props): Promise<SuccessResponseV2<null>> => {
 	try {
 		const response = await axios.put(`/user/${props.userId}`, {
-			Name: props.name,
+			displayName: props.displayName,
+			role: props.role,
 		});
 
 		return {
-			statusCode: 200,
-			error: null,
-			message: response.data.status,
-			payload: response.data,
+			httpStatusCode: response.status,
+			data: null,
 		};
 	} catch (error) {
-		return ErrorResponseHandler(error as AxiosError);
+		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
 	}
 };
 
-export default editUser;
+export default update;

frontend/src/api/v1/user/login.ts

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

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

@@ -19,7 +19,7 @@ import { getOperatorValue } from 'container/QueryBuilder/filters/QueryBuilderSea
 import { useGetAggregateValues } from 'hooks/queryBuilder/useGetAggregateValues';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import useDebouncedFn from 'hooks/useDebouncedFunction';
-import { cloneDeep, isArray, isEmpty, isEqual, isFunction } from 'lodash-es';
+import { cloneDeep, isArray, isEqual, isFunction } from 'lodash-es';
 import { ChevronDown, ChevronRight } from 'lucide-react';
 import { useMemo, useState } from 'react';
 import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
@@ -82,7 +82,9 @@ export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
 	const attributeValues: string[] = useMemo(() => {
 		const dataType = filter.attributeKey.dataType || DataTypes.String;
 		const key = DATA_TYPE_VS_ATTRIBUTE_VALUES_KEY[dataType];
-		return (data?.payload?.[key] || []).filter((val) => !isEmpty(val));
+		return (data?.payload?.[key] || []).filter(
+			(val) => val !== undefined && val !== null,
+		);
 	}, [data?.payload, filter.attributeKey.dataType]);
 
 	const currentAttributeKeys = attributeValues.slice(0, visibleItemsCount);

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

@@ -1,7 +1,16 @@
+.quick-filters-container {
+	display: flex;
+	height: 100%;
+	.quick-filters-settings-container {
+		position: relative;
+	}
+}
+
 .quick-filters {
 	display: flex;
 	flex-direction: column;
 	height: 100%;
+	width: 100%;
 	border-right: 1px solid var(--bg-slate-400);
 	color: var(--bg-vanilla-100);
 
@@ -44,7 +53,7 @@
 				font-size: 14px;
 				font-style: normal;
 				font-weight: 400;
-				line-height: 18px; /* 128.571% */
+				line-height: 18px;
 				text-transform: uppercase;
 			}
 		}
@@ -52,7 +61,7 @@
 		.right-actions {
 			display: flex;
 			align-items: center;
-			gap: 12px;
+			gap: 10px;
 			width: 100%;
 			justify-content: flex-end;
 
@@ -63,10 +72,34 @@
 			}
 
 			.sync-icon {
-				background-color: var(--bg-ink-500);
 				border: 0;
 				box-shadow: none;
 			}
+
+			.right-action-icon-container {
+				position: relative;
+				display: flex;
+				padding: 2px;
+				background-color: var(--bg-ink-500);
+
+				.settings-icon {
+					height: 14px;
+					width: 14px;
+					cursor: pointer;
+				}
+
+				&.active,
+				&:hover {
+					background: var(--bg-slate-500);
+				}
+			}
+		}
+	}
+
+	.quick-filters-skeleton {
+		.ant-skeleton-input {
+			width: 236px;
+			margin: 8px 12px;
 		}
 	}
 }
@@ -90,8 +123,12 @@
 				}
 			}
 			.right-actions {
-				.sync-icon {
+				.right-action-icon-container {
 					background-color: var(--bg-vanilla-100);
+					&.active,
+					&:hover {
+						background-color: var(--bg-vanilla-200);
+					}
 				}
 			}
 		}

frontend/src/components/QuickFilters/QuickFilters.tsx

@@ -5,18 +5,43 @@ import {
 	SyncOutlined,
 	VerticalAlignTopOutlined,
 } from '@ant-design/icons';
-import { Tooltip, Typography } from 'antd';
-import TypicalOverlayScrollbar from 'components/TypicalOverlayScrollbar/TypicalOverlayScrollbar';
+import { Skeleton, Tooltip, Typography } from 'antd';
+import getLocalStorageKey from 'api/browser/localstorage/get';
+import setLocalStorageKey from 'api/browser/localstorage/set';
+import classNames from 'classnames';
+import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
+import { LOCALSTORAGE } from 'constants/localStorage';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
-import { cloneDeep, isFunction } from 'lodash-es';
+import { cloneDeep, isFunction, isNull } from 'lodash-es';
+import { Settings2 as SettingsIcon } from 'lucide-react';
+import { useMemo, useState } from 'react';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';
 
 import Checkbox from './FilterRenderers/Checkbox/Checkbox';
 import Slider from './FilterRenderers/Slider/Slider';
+import useFilterConfig from './hooks/useFilterConfig';
+import AnnouncementTooltip from './QuickFiltersSettings/AnnouncementTooltip';
+import QuickFiltersSettings from './QuickFiltersSettings/QuickFiltersSettings';
 import { FiltersType, IQuickFiltersProps, QuickFiltersSource } from './types';
 
 export default function QuickFilters(props: IQuickFiltersProps): JSX.Element {
-	const { config, handleFilterVisibilityChange, source, onFilterChange } = props;
+	const {
+		className,
+		config,
+		handleFilterVisibilityChange,
+		source,
+		onFilterChange,
+		signal,
+	} = props;
+	const [isSettingsOpen, setIsSettingsOpen] = useState(false);
+
+	const {
+		filterConfig,
+		isDynamicFilters,
+		customFilters,
+		setIsStale,
+		isCustomFiltersLoading,
+	} = useFilterConfig({ signal, config });
 
 	const {
 		currentQuery,
@@ -24,6 +49,16 @@ export default function QuickFilters(props: IQuickFiltersProps): JSX.Element {
 		redirectWithQueryBuilderData,
 	} = useQueryBuilder();
 
+	const showAnnouncementTooltip = useMemo(() => {
+		const localStorageValue = getLocalStorageKey(
+			LOCALSTORAGE.QUICK_FILTERS_SETTINGS_ANNOUNCEMENT,
+		);
+		if (!isNull(localStorageValue)) {
+			return !(localStorageValue === 'false');
+		}
+		return true;
+	}, []);
+
 	// clear all the filters for the query which is in sync with filters
 	const handleReset = (): void => {
 		const updatedQuery = cloneDeep(
@@ -63,68 +98,141 @@ export default function QuickFilters(props: IQuickFiltersProps): JSX.Element {
 		currentQuery.builder.queryData?.[lastUsedQuery || 0]?.queryName;
 
 	return (
-		<div className="quick-filters">
-			{source !== QuickFiltersSource.INFRA_MONITORING &&
-				source !== QuickFiltersSource.API_MONITORING && (
-					<section className="header">
-						<section className="left-actions">
-							<FilterOutlined />
-							<Typography.Text className="text">
-								{lastQueryName ? 'Filters for' : 'Filters'}
-							</Typography.Text>
-							{lastQueryName && (
-								<Tooltip title={`Filter currently in sync with query ${lastQueryName}`}>
-									<Typography.Text className="sync-tag">{lastQueryName}</Typography.Text>
+		<div className="quick-filters-container">
+			<div className="quick-filters">
+				{source !== QuickFiltersSource.INFRA_MONITORING &&
+					source !== QuickFiltersSource.API_MONITORING && (
+						<section className="header">
+							<section className="left-actions">
+								<FilterOutlined />
+								<Typography.Text className="text">
+									{lastQueryName ? 'Filters for' : 'Filters'}
+								</Typography.Text>
+								{lastQueryName && (
+									<Tooltip
+										title={`Filter currently in sync with query ${lastQueryName}`}
+									>
+										<Typography.Text className="sync-tag">
+											{lastQueryName}
+										</Typography.Text>
+									</Tooltip>
+								)}
+							</section>
+
+							<section className="right-actions">
+								<Tooltip title="Reset All">
+									<div className="right-action-icon-container">
+										<SyncOutlined className="sync-icon" onClick={handleReset} />
+									</div>
 								</Tooltip>
-							)}
+								<Tooltip title="Collapse Filters">
+									<div className="right-action-icon-container">
+										<VerticalAlignTopOutlined
+											rotate={270}
+											onClick={handleFilterVisibilityChange}
+										/>
+									</div>
+								</Tooltip>
+								{isDynamicFilters && (
+									<Tooltip title="Settings">
+										<div
+											className={classNames('right-action-icon-container', {
+												active: isSettingsOpen,
+											})}
+										>
+											<SettingsIcon
+												className="settings-icon"
+												data-testid="settings-icon"
+												width={14}
+												height={14}
+												onClick={(): void => setIsSettingsOpen(true)}
+											/>
+											<AnnouncementTooltip
+												show={showAnnouncementTooltip}
+												position={{ top: -5, left: 15 }}
+												title="Edit your quick filters"
+												message="You can now customize and re-arrange your quick filters panel. Select the quick filters you’d need and hide away the rest for faster exploration."
+												onClose={(): void => {
+													setLocalStorageKey(
+														LOCALSTORAGE.QUICK_FILTERS_SETTINGS_ANNOUNCEMENT,
+														'false',
+													);
+												}}
+											/>
+										</div>
+									</Tooltip>
+								)}
+							</section>
 						</section>
+					)}
 
-						<section className="right-actions">
-							<Tooltip title="Reset All">
-								<SyncOutlined className="sync-icon" onClick={handleReset} />
-							</Tooltip>
-							<div className="divider-filter" />
-							<Tooltip title="Collapse Filters">
-								<VerticalAlignTopOutlined
-									rotate={270}
-									onClick={handleFilterVisibilityChange}
-								/>
-							</Tooltip>
+				{isCustomFiltersLoading ? (
+					<div className="quick-filters-skeleton">
+						{Array.from({ length: 5 }).map((_, index) => (
+							<Skeleton.Input
+								active
+								size="small"
+								// eslint-disable-next-line react/no-array-index-key
+								key={index}
+							/>
+						))}
+					</div>
+				) : (
+					<OverlayScrollbar>
+						<section className="filters">
+							{filterConfig.map((filter) => {
+								switch (filter.type) {
+									case FiltersType.CHECKBOX:
+										return (
+											<Checkbox
+												source={source}
+												filter={filter}
+												onFilterChange={onFilterChange}
+											/>
+										);
+									case FiltersType.SLIDER:
+										return <Slider filter={filter} />;
+									// eslint-disable-next-line sonarjs/no-duplicated-branches
+									default:
+										return (
+											<Checkbox
+												source={source}
+												filter={filter}
+												onFilterChange={onFilterChange}
+											/>
+										);
+								}
+							})}
 						</section>
-					</section>
+					</OverlayScrollbar>
 				)}
-
-			<TypicalOverlayScrollbar>
-				<section className="filters">
-					{config.map((filter) => {
-						switch (filter.type) {
-							case FiltersType.CHECKBOX:
-								return (
-									<Checkbox
-										source={source}
-										filter={filter}
-										onFilterChange={onFilterChange}
-									/>
-								);
-							case FiltersType.SLIDER:
-								return <Slider filter={filter} />;
-							// eslint-disable-next-line sonarjs/no-duplicated-branches
-							default:
-								return (
-									<Checkbox
-										source={source}
-										filter={filter}
-										onFilterChange={onFilterChange}
-									/>
-								);
-						}
-					})}
-				</section>
-			</TypicalOverlayScrollbar>
+			</div>
+			<div className="quick-filters-settings-container">
+				<div
+					className={classNames(
+						'quick-filters-settings',
+						{
+							hidden: !isSettingsOpen,
+						},
+						className,
+					)}
+				>
+					{isSettingsOpen && (
+						<QuickFiltersSettings
+							signal={signal}
+							setIsSettingsOpen={setIsSettingsOpen}
+							customFilters={customFilters}
+							setIsStale={setIsStale}
+						/>
+					)}
+				</div>
+			</div>
 		</div>
 	);
 }
 
 QuickFilters.defaultProps = {
 	onFilterChange: null,
+	signal: '',
+	config: [],
 };

frontend/src/components/QuickFilters/QuickFiltersSettings/AddedFilters.tsx

@@ -0,0 +1,147 @@
+/* eslint-disable react/jsx-props-no-spreading */
+import {
+	closestCenter,
+	DndContext,
+	DragEndEvent,
+	PointerSensor,
+	useSensor,
+	useSensors,
+} from '@dnd-kit/core';
+import {
+	arrayMove,
+	SortableContext,
+	useSortable,
+	verticalListSortingStrategy,
+} from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import { Button } from 'antd';
+import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
+import { GripVertical } from 'lucide-react';
+import { useMemo } from 'react';
+import { Filter as FilterType } from 'types/api/quickFilters/getCustomFilters';
+
+function SortableFilter({
+	filter,
+	onRemove,
+	allowDrag,
+	allowRemove,
+}: {
+	filter: FilterType;
+	onRemove: (filter: FilterType) => void;
+	allowDrag: boolean;
+	allowRemove: boolean;
+}): JSX.Element {
+	const {
+		attributes,
+		listeners,
+		setNodeRef,
+		transform,
+		transition,
+	} = useSortable({ id: filter.key });
+
+	const style = {
+		transform: CSS.Transform.toString(transform),
+		transition,
+	};
+
+	return (
+		<div
+			ref={setNodeRef}
+			style={style}
+			className={`qf-filter-item ${allowDrag ? 'drag-enabled' : 'drag-disabled'}`}
+		>
+			<div {...attributes} {...listeners} className="drag-handle">
+				{allowDrag && <GripVertical size={16} />}
+				{filter.key}
+			</div>
+			{allowRemove && (
+				<Button
+					className="remove-filter-btn periscope-btn"
+					size="small"
+					onClick={(): void => {
+						onRemove(filter as FilterType);
+					}}
+				>
+					Remove
+				</Button>
+			)}
+		</div>
+	);
+}
+
+function AddedFilters({
+	inputValue,
+	addedFilters,
+	setAddedFilters,
+}: {
+	inputValue: string;
+	addedFilters: FilterType[];
+	setAddedFilters: React.Dispatch<React.SetStateAction<FilterType[]>>;
+}): JSX.Element {
+	const sensors = useSensors(useSensor(PointerSensor));
+
+	const handleDragEnd = (event: DragEndEvent): void => {
+		const { active, over } = event;
+
+		if (over && active.id !== over.id) {
+			setAddedFilters((items) => {
+				const oldIndex = items.findIndex((item) => item.key === active.id);
+				const newIndex = items.findIndex((item) => item.key === over.id);
+
+				return arrayMove(items, oldIndex, newIndex);
+			});
+		}
+	};
+
+	const filteredAddedFilters = useMemo(
+		() =>
+			addedFilters.filter((filter) =>
+				filter.key.toLowerCase().includes(inputValue.toLowerCase()),
+			),
+		[addedFilters, inputValue],
+	);
+
+	const handleRemoveFilter = (filter: FilterType): void => {
+		setAddedFilters((prev) => prev.filter((f) => f.key !== filter.key));
+	};
+
+	const allowDrag = inputValue.length === 0;
+	const allowRemove = addedFilters.length > 1;
+
+	return (
+		<div className="qf-filters added-filters">
+			<div className="qf-filters-header">ADDED FILTERS</div>
+			<div className="qf-added-filters-list">
+				<OverlayScrollbar>
+					<DndContext
+						sensors={sensors}
+						collisionDetection={closestCenter}
+						onDragEnd={handleDragEnd}
+					>
+						{filteredAddedFilters.length === 0 ? (
+							<div className="no-values-found">No values found</div>
+						) : (
+							<SortableContext
+								items={addedFilters.map((f) => f.key)}
+								strategy={verticalListSortingStrategy}
+								disabled={!allowDrag}
+							>
+								{filteredAddedFilters.map((filter) => (
+									<SortableFilter
+										key={filter.key}
+										filter={filter}
+										onRemove={handleRemoveFilter}
+										allowDrag={allowDrag}
+										allowRemove={allowRemove}
+									/>
+								))}
+							</SortableContext>
+						)}
+					</DndContext>
+				</OverlayScrollbar>
+			</div>
+		</div>
+	);
+}
+
+export default AddedFilters;

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

@@ -0,0 +1,56 @@
+.announcement-tooltip {
+	&__dot {
+		position: absolute;
+		width: 8px;
+		height: 8px;
+		border-radius: 50%;
+		background-color: var(--bg-robin-500);
+		z-index: 1000;
+	}
+
+	&__title {
+		font-weight: 500;
+		font-size: 15px;
+	}
+
+	&__container {
+		position: absolute;
+		width: 320px;
+		background-color: var(--bg-robin-500);
+		color: var(--text-white);
+		border-radius: 8px;
+		padding: 16px;
+		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+		z-index: 1000;
+	}
+
+	&__header {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+	}
+
+	&__close-icon {
+		cursor: pointer;
+		color: var(--text-white);
+	}
+
+	&__message {
+		margin: 12px 0;
+		line-height: 20px;
+	}
+
+	&__footer {
+		display: flex;
+		justify-content: flex-end;
+	}
+
+	&__button {
+		background: var(--bg-vanilla-100);
+		color: var(--bg-robin-500);
+		border: none;
+		padding: 6px 12px;
+		border-radius: 4px;
+		cursor: pointer;
+	}
+}

frontend/src/components/QuickFilters/QuickFiltersSettings/AnnouncementTooltip/index.tsx

@@ -0,0 +1,79 @@
+import './AnnouncementTooltip.styles.scss';
+
+import { Button, Typography } from 'antd';
+import classNames from 'classnames';
+import { X } from 'lucide-react';
+import { useState } from 'react';
+
+type AnnouncementTooltipProps = {
+	position: { top: number; left: number };
+	title: string;
+	message: string;
+	show?: boolean;
+	className?: string;
+	onClose?: () => void;
+};
+
+// TEMPORARY HACK FOR ANNOUNCEMENTS: To be removed once proper system in place.
+function AnnouncementTooltip({
+	position,
+	show,
+	title,
+	message,
+	className,
+	onClose,
+}: AnnouncementTooltipProps): JSX.Element | null {
+	const [visible, setVisible] = useState(show);
+
+	const closeTooltip = (): void => {
+		setVisible(false);
+		onClose?.();
+	};
+
+	return visible ? (
+		<>
+			{/* Dot */}
+			<div
+				className={classNames('announcement-tooltip__dot', className)}
+				style={{
+					top: position.top,
+					left: position.left,
+				}}
+			/>
+
+			{/* Tooltip box */}
+			<div
+				className={classNames('announcement-tooltip__container', className)}
+				style={{
+					top: position.top,
+					left: position.left + 30,
+				}}
+			>
+				<div className="announcement-tooltip__header">
+					<Typography.Text className="announcement-tooltip__title">
+						{title}
+					</Typography.Text>
+					<X
+						size={18}
+						onClick={closeTooltip}
+						className="announcement-tooltip__close-icon"
+					/>
+				</div>
+				<p className="announcement-tooltip__message">{message}</p>
+				<div className="announcement-tooltip__footer">
+					<Button onClick={closeTooltip} className="announcement-tooltip__button">
+						Okay
+					</Button>
+				</div>
+			</div>
+		</>
+	) : null;
+}
+
+AnnouncementTooltip.defaultProps = {
+	show: false,
+	className: '',
+	onClose: (): void => {},
+};
+
+export default AnnouncementTooltip;

frontend/src/components/QuickFilters/QuickFiltersSettings/OtherFilters.tsx

@@ -0,0 +1,104 @@
+import { Button, Skeleton } from 'antd';
+import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
+import { SIGNAL_DATA_SOURCE_MAP } from 'components/QuickFilters/QuickFiltersSettings/constants';
+import { SignalType } from 'components/QuickFilters/types';
+import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
+import { useGetAttributeSuggestions } from 'hooks/queryBuilder/useGetAttributeSuggestions';
+import { useMemo } from 'react';
+import { TagFilter } from 'types/api/queryBuilder/queryBuilderData';
+import { Filter as FilterType } from 'types/api/quickFilters/getCustomFilters';
+
+function OtherFiltersSkeleton(): JSX.Element {
+	return (
+		<>
+			{Array.from({ length: 5 }).map((_, index) => (
+				<Skeleton.Input
+					active
+					size="small"
+					// eslint-disable-next-line react/no-array-index-key
+					key={index}
+				/>
+			))}
+		</>
+	);
+}
+
+function OtherFilters({
+	signal,
+	inputValue,
+	addedFilters,
+	setAddedFilters,
+}: {
+	signal: SignalType | undefined;
+	inputValue: string;
+	addedFilters: FilterType[];
+	setAddedFilters: React.Dispatch<React.SetStateAction<FilterType[]>>;
+}): JSX.Element {
+	const {
+		data: suggestionsData,
+		isFetching: isFetchingSuggestions,
+	} = useGetAttributeSuggestions(
+		{
+			searchText: inputValue,
+			dataSource: SIGNAL_DATA_SOURCE_MAP[signal as SignalType],
+			filters: {} as TagFilter,
+		},
+		{
+			queryKey: [REACT_QUERY_KEY.GET_OTHER_FILTERS, inputValue],
+			enabled: !!signal,
+		},
+	);
+
+	const otherFilters = useMemo(
+		() =>
+			suggestionsData?.payload?.attributes?.filter(
+				(attr) => !addedFilters.some((filter) => filter.key === attr.key),
+			),
+		[suggestionsData, addedFilters],
+	);
+
+	const handleAddFilter = (filter: FilterType): void => {
+		setAddedFilters((prev) => [
+			...prev,
+			{
+				key: filter.key,
+				dataType: filter.dataType,
+				isColumn: filter.isColumn,
+				isJSON: filter.isJSON,
+				type: filter.type,
+			},
+		]);
+	};
+
+	const renderFilters = (): React.ReactNode => {
+		if (isFetchingSuggestions) return <OtherFiltersSkeleton />;
+		if (!otherFilters?.length)
+			return <div className="no-values-found">No values found</div>;
+
+		return otherFilters.map((filter) => (
+			<div key={filter.key} className="qf-filter-item other-filters-item">
+				<div className="qf-filter-key">{filter.key}</div>
+				<Button
+					className="add-filter-btn periscope-btn"
+					size="small"
+					onClick={(): void => handleAddFilter(filter as FilterType)}
+				>
+					Add
+				</Button>
+			</div>
+		));
+	};
+
+	return (
+		<div className="qf-filters other-filters">
+			<div className="qf-filters-header">OTHER FILTERS</div>
+			<div className="qf-other-filters-list">
+				<OverlayScrollbar>
+					<>{renderFilters()}</>
+				</OverlayScrollbar>
+			</div>
+		</div>
+	);
+}
+
+export default OtherFilters;

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

@@ -0,0 +1,190 @@
+.quick-filters-settings {
+	display: flex;
+	flex-direction: column;
+	position: absolute;
+	z-index: 999;
+	width: 342px;
+	background: var(--bg-slate-500);
+	transition: width 0.05s ease-in-out;
+	overflow: hidden;
+
+	&.qf-logs-explorer {
+		height: calc(100vh - 45px);
+	}
+
+	&.qf-exceptions {
+		height: 100vh;
+	}
+
+	&.hidden {
+		width: 0;
+	}
+	.qf-header {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: 10.5px;
+
+		.qf-title {
+			display: flex;
+			align-items: center;
+			gap: 12px;
+		}
+
+		.qf-header-icon {
+			width: 16px;
+			height: 16px;
+			cursor: pointer;
+		}
+	}
+
+	.qf-filters {
+		&.added-filters {
+			max-height: 40%;
+		}
+		&.other-filters {
+			flex: 1;
+			display: flex;
+			flex-direction: column;
+			min-height: 0;
+		}
+	}
+
+	.search {
+		.ant-input {
+			background-color: var(--bg-slate-500);
+			height: 46px;
+			border-radius: 0;
+		}
+	}
+
+	.qf-other-filters-list {
+		.ant-skeleton-input {
+			width: 300px;
+			margin: 8px 12px;
+		}
+	}
+
+	.qf-footer {
+		display: flex;
+		gap: 12px;
+		padding: 12px;
+		border-top: 1px solid var(--bg-slate-400);
+		button {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			width: 50%;
+
+			.ant-btn-icon {
+				margin: 3px !important;
+			}
+		}
+	}
+}
+
+//ADDED FILTERS AND OTHER FILTERS COMMON STYLES
+.qf-filters {
+	display: flex;
+	flex-direction: column;
+	.qf-filters-header {
+		color: var(--bg-slate-50);
+		font-family: Inter;
+		font-size: 11px;
+		font-style: normal;
+		font-weight: 500;
+		line-height: 18px;
+		letter-spacing: 0.88px;
+		text-transform: uppercase;
+		padding: 8px 12px;
+	}
+}
+
+.no-values-found {
+	padding: 8px;
+	text-align: center;
+}
+
+.qf-added-filters-list {
+	margin-bottom: 12px;
+	overflow: hidden;
+}
+
+.qf-other-filters-list {
+	margin-bottom: 12px;
+	overflow: hidden;
+}
+
+.qf-filter-item {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding: 8px;
+	border-radius: 4px;
+	user-select: none;
+	transition: background-color 0.2s ease-in-out;
+
+	.drag-handle {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+		flex-grow: 1;
+	}
+
+	.qf-filter-content {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+	}
+
+	&.other-filters-item {
+		padding: 8px 12px;
+		height: 32px;
+	}
+
+	&.drag-enabled {
+		cursor: grab;
+		&:active {
+			cursor: grabbing;
+		}
+	}
+
+	&.drag-disabled {
+		padding: 8px 12px;
+	}
+
+	.remove-filter-btn,
+	.add-filter-btn {
+		padding: 6px 12px;
+		opacity: 0;
+		transition: opacity 0.2s ease-in-out;
+	}
+
+	&:hover {
+		background-color: var(--bg-slate-400);
+		.remove-filter-btn,
+		.add-filter-btn {
+			opacity: 1;
+		}
+	}
+}
+
+.lightMode {
+	.quick-filters-settings {
+		background: var(--bg-vanilla-100);
+		.search {
+			.ant-input {
+				background-color: var(--bg-vanilla-100);
+			}
+		}
+		.qf-footer {
+			border-top: 1px solid var(--bg-vanilla-300);
+		}
+	}
+
+	.qf-filter-item {
+		&:hover {
+			background-color: var(--bg-vanilla-200);
+		}
+	}
+}

frontend/src/components/QuickFilters/QuickFiltersSettings/QuickFiltersSettings.tsx

@@ -0,0 +1,109 @@
+import './QuickFiltersSettings.styles.scss';
+
+import { Button, Input } from 'antd';
+import { CheckIcon, TableColumnsSplit, XIcon } from 'lucide-react';
+import { useMemo } from 'react';
+import { Filter as FilterType } from 'types/api/quickFilters/getCustomFilters';
+
+import { SignalType } from '../types';
+import AddedFilters from './AddedFilters';
+import useQuickFilterSettings from './hooks/useQuickFilterSettings';
+import OtherFilters from './OtherFilters';
+
+function QuickFiltersSettings({
+	signal,
+	setIsSettingsOpen,
+	customFilters,
+	setIsStale,
+}: {
+	signal: SignalType | undefined;
+	setIsSettingsOpen: (isSettingsOpen: boolean) => void;
+	customFilters: FilterType[];
+	setIsStale: (isStale: boolean) => void;
+}): JSX.Element {
+	const {
+		handleSettingsClose,
+		handleDiscardChanges,
+		addedFilters,
+		setAddedFilters,
+		handleSaveChanges,
+		isUpdatingCustomFilters,
+		inputValue,
+		handleInputChange,
+		debouncedInputValue,
+	} = useQuickFilterSettings({
+		setIsSettingsOpen,
+		customFilters,
+		setIsStale,
+		signal,
+	});
+
+	const hasUnsavedChanges = useMemo(
+		() =>
+			// check if both arrays have the same length and same order of elements
+			!(
+				addedFilters.length === customFilters.length &&
+				addedFilters.every(
+					(filter, index) => filter.key === customFilters[index].key,
+				)
+			),
+		[addedFilters, customFilters],
+	);
+
+	return (
+		<>
+			<div className="qf-header">
+				<div className="qf-title">
+					<TableColumnsSplit width={16} height={16} />
+					Edit quick filters
+				</div>
+				<XIcon
+					className="qf-header-icon"
+					width={16}
+					height={16}
+					onClick={handleSettingsClose}
+				/>
+			</div>
+			<section className="search">
+				<Input
+					type="text"
+					value={inputValue}
+					placeholder="Search for a filter..."
+					onChange={handleInputChange}
+				/>
+			</section>
+			<AddedFilters
+				inputValue={inputValue}
+				addedFilters={addedFilters}
+				setAddedFilters={setAddedFilters}
+			/>
+			<OtherFilters
+				signal={signal}
+				inputValue={debouncedInputValue}
+				addedFilters={addedFilters}
+				setAddedFilters={setAddedFilters}
+			/>
+			{hasUnsavedChanges && (
+				<div className="qf-footer">
+					<Button
+						type="default"
+						onClick={handleDiscardChanges}
+						icon={<XIcon width={16} height={16} />}
+					>
+						Discard
+					</Button>
+					<Button
+						type="primary"
+						onClick={handleSaveChanges}
+						icon={<CheckIcon width={16} height={16} />}
+						loading={isUpdatingCustomFilters}
+					>
+						Save changes
+					</Button>
+				</div>
+			)}
+		</>
+	);
+}
+
+export default QuickFiltersSettings;

frontend/src/components/QuickFilters/QuickFiltersSettings/constants.ts

@@ -0,0 +1,9 @@
+import { SignalType } from 'components/QuickFilters/types';
+import { DataSource } from 'types/common/queryBuilder';
+
+export const SIGNAL_DATA_SOURCE_MAP = {
+	[SignalType.LOGS]: DataSource.LOGS,
+	[SignalType.TRACES]: DataSource.TRACES,
+	[SignalType.EXCEPTIONS]: DataSource.TRACES,
+	[SignalType.API_MONITORING]: DataSource.TRACES,
+};

frontend/src/components/QuickFilters/QuickFiltersSettings/hooks/useQuickFilterSettings.tsx

@@ -0,0 +1,111 @@
+import updateCustomFiltersAPI from 'api/quickFilters/updateCustomFilters';
+import axios, { AxiosError } from 'axios';
+import { SignalType } from 'components/QuickFilters/types';
+import { SOMETHING_WENT_WRONG } from 'constants/api';
+import useDebouncedFn from 'hooks/useDebouncedFunction';
+import { useNotifications } from 'hooks/useNotifications';
+import { useCallback, useState } from 'react';
+import { useMutation } from 'react-query';
+import { Filter as FilterType } from 'types/api/quickFilters/getCustomFilters';
+
+interface UseQuickFilterSettingsProps {
+	setIsSettingsOpen: (isSettingsOpen: boolean) => void;
+	customFilters: FilterType[];
+	setIsStale: (isStale: boolean) => void;
+	signal?: SignalType;
+}
+
+interface UseQuickFilterSettingsReturn {
+	addedFilters: FilterType[];
+	setAddedFilters: React.Dispatch<React.SetStateAction<FilterType[]>>;
+	handleSettingsClose: () => void;
+	handleDiscardChanges: () => void;
+	handleSaveChanges: () => void;
+	isUpdatingCustomFilters: boolean;
+	inputValue: string;
+	setInputValue: React.Dispatch<React.SetStateAction<string>>;
+	debouncedInputValue: string;
+	handleInputChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+}
+
+const useQuickFilterSettings = ({
+	customFilters,
+	setIsSettingsOpen,
+	setIsStale,
+	signal,
+}: UseQuickFilterSettingsProps): UseQuickFilterSettingsReturn => {
+	const [inputValue, setInputValue] = useState<string>('');
+	const [debouncedInputValue, setDebouncedInputValue] = useState<string>('');
+	const [addedFilters, setAddedFilters] = useState<FilterType[]>(customFilters);
+	const { notifications } = useNotifications();
+
+	const {
+		mutate: updateCustomFilters,
+		isLoading: isUpdatingCustomFilters,
+	} = useMutation(updateCustomFiltersAPI, {
+		onSuccess: () => {
+			setIsSettingsOpen(false);
+			setIsStale(true);
+			notifications.success({
+				message: 'Quick filters updated successfully',
+				placement: 'bottomRight',
+			});
+		},
+		onError: (error: AxiosError) => {
+			notifications.error({
+				message: axios.isAxiosError(error) ? error.message : SOMETHING_WENT_WRONG,
+				placement: 'bottomRight',
+			});
+		},
+	});
+	const debouncedUpdate = useDebouncedFn((value) => {
+		setDebouncedInputValue(value as string);
+	}, 400);
+
+	const handleInputChange = useCallback(
+		(e: React.ChangeEvent<HTMLInputElement>): void => {
+			const value = e.target.value.trim().toLowerCase();
+			setInputValue(value);
+			debouncedUpdate(value);
+		},
+		[debouncedUpdate],
+	);
+
+	const handleSettingsClose = useCallback((): void => {
+		setIsSettingsOpen(false);
+	}, [setIsSettingsOpen]);
+
+	const handleDiscardChanges = useCallback((): void => {
+		setAddedFilters(customFilters);
+	}, [customFilters, setAddedFilters]);
+
+	const handleSaveChanges = useCallback((): void => {
+		if (signal) {
+			updateCustomFilters({
+				data: {
+					filters: addedFilters.map((filter) => ({
+						key: filter.key,
+						datatype: filter.dataType,
+						type: filter.type,
+					})),
+					signal,
+				},
+			});
+		}
+	}, [addedFilters, signal, updateCustomFilters]);
+
+	return {
+		handleSettingsClose,
+		handleDiscardChanges,
+		addedFilters,
+		setAddedFilters,
+		handleSaveChanges,
+		isUpdatingCustomFilters,
+		inputValue,
+		setInputValue,
+		debouncedInputValue,
+		handleInputChange,
+	};
+};
+
+export default useQuickFilterSettings;

frontend/src/components/QuickFilters/hooks/useFilterConfig.tsx

@@ -0,0 +1,67 @@
+import getCustomFilters from 'api/quickFilters/getCustomFilters';
+import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
+import { useMemo, useState } from 'react';
+import { useQuery } from 'react-query';
+import { ErrorResponse, SuccessResponse } from 'types/api';
+import {
+	Filter as FilterType,
+	PayloadProps,
+} from 'types/api/quickFilters/getCustomFilters';
+
+import { IQuickFiltersConfig, SignalType } from '../types';
+import { getFilterConfig } from '../utils';
+
+interface UseFilterConfigProps {
+	signal?: SignalType;
+	config: IQuickFiltersConfig[];
+}
+interface UseFilterConfigReturn {
+	filterConfig: IQuickFiltersConfig[];
+	customFilters: FilterType[];
+	setCustomFilters: React.Dispatch<React.SetStateAction<FilterType[]>>;
+	isCustomFiltersLoading: boolean;
+	isDynamicFilters: boolean;
+	setIsStale: React.Dispatch<React.SetStateAction<boolean>>;
+}
+
+const useFilterConfig = ({
+	signal,
+	config,
+}: UseFilterConfigProps): UseFilterConfigReturn => {
+	const [customFilters, setCustomFilters] = useState<FilterType[]>([]);
+	const [isStale, setIsStale] = useState(true);
+	const isDynamicFilters = useMemo(() => customFilters.length > 0, [
+		customFilters,
+	]);
+	const { isLoading: isCustomFiltersLoading } = useQuery<
+		SuccessResponse<PayloadProps> | ErrorResponse,
+		Error
+	>(
+		[REACT_QUERY_KEY.GET_CUSTOM_FILTERS, signal],
+		() => getCustomFilters({ signal: signal || '' }),
+		{
+			onSuccess: (data) => {
+				if ('payload' in data && data.payload?.filters) {
+					setCustomFilters(data.payload.filters || ([] as FilterType[]));
+				}
+				setIsStale(false);
+			},
+			enabled: !!signal && isStale,
+		},
+	);
+	const filterConfig = useMemo(() => getFilterConfig(customFilters, config), [
+		config,
+		customFilters,
+	]);
+
+	return {
+		filterConfig,
+		customFilters,
+		setCustomFilters,
+		isCustomFiltersLoading,
+		isDynamicFilters,
+		setIsStale,
+	};
+};
+
+export default useFilterConfig;

frontend/src/components/QuickFilters/tests/QuickFilters.test.tsx

@@ -1,111 +1,288 @@
 import '@testing-library/jest-dom';
 
-import { fireEvent, render, screen } from '@testing-library/react';
-import { useGetAggregateValues } from 'hooks/queryBuilder/useGetAggregateValues';
+import {
+	cleanup,
+	fireEvent,
+	render,
+	screen,
+	waitFor,
+} from '@testing-library/react';
+import { ENVIRONMENT } from 'constants/env';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
+import {
+	otherFiltersResponse,
+	quickFiltersAttributeValuesResponse,
+	quickFiltersListResponse,
+} from 'mocks-server/__mockdata__/customQuickFilters';
+import { server } from 'mocks-server/server';
+import { rest } from 'msw';
 import MockQueryClientProvider from 'providers/test/MockQueryClientProvider';
 
 import QuickFilters from '../QuickFilters';
-import { QuickFiltersSource } from '../types';
+import { IQuickFiltersConfig, QuickFiltersSource, SignalType } from '../types';
 import { QuickFiltersConfig } from './constants';
 
-// Mock the useQueryBuilder hook
 jest.mock('hooks/queryBuilder/useQueryBuilder', () => ({
 	useQueryBuilder: jest.fn(),
 }));
-// Mock the useGetAggregateValues hook
-jest.mock('hooks/queryBuilder/useGetAggregateValues', () => ({
-	useGetAggregateValues: jest.fn(),
-}));
 
 const handleFilterVisibilityChange = jest.fn();
 const redirectWithQueryBuilderData = jest.fn();
+const putHandler = jest.fn();
 
-function TestQuickFilters(): JSX.Element {
+const BASE_URL = ENVIRONMENT.baseURL;
+const SIGNAL = SignalType.LOGS;
+const quickFiltersListURL = `${BASE_URL}/api/v1/orgs/me/filters/${SIGNAL}`;
+const saveQuickFiltersURL = `${BASE_URL}/api/v1/orgs/me/filters`;
+const quickFiltersSuggestionsURL = `${BASE_URL}/api/v3/filter_suggestions`;
+const quickFiltersAttributeValuesURL = `${BASE_URL}/api/v3/autocomplete/attribute_values`;
+
+const FILTER_OS_DESCRIPTION = 'os.description';
+const FILTER_K8S_DEPLOYMENT_NAME = 'k8s.deployment.name';
+const ADDED_FILTERS_LABEL = /ADDED FILTERS/i;
+const OTHER_FILTERS_LABEL = /OTHER FILTERS/i;
+const SAVE_CHANGES_TEXT = 'Save changes';
+const DISCARD_TEXT = 'Discard';
+const FILTER_SERVICE_NAME = 'Service Name';
+const SETTINGS_ICON_TEST_ID = 'settings-icon';
+const QUERY_NAME = 'Test Query';
+
+const setupServer = (): void => {
+	server.use(
+		rest.get(quickFiltersListURL, (_, res, ctx) =>
+			res(ctx.status(200), ctx.json(quickFiltersListResponse)),
+		),
+		rest.get(quickFiltersSuggestionsURL, (_, res, ctx) =>
+			res(ctx.status(200), ctx.json(otherFiltersResponse)),
+		),
+		rest.put(saveQuickFiltersURL, async (req, res, ctx) => {
+			putHandler(await req.json());
+			return res(ctx.status(200), ctx.json({}));
+		}),
+		rest.get(quickFiltersAttributeValuesURL, (_, res, ctx) =>
+			res(ctx.status(200), ctx.json(quickFiltersAttributeValuesResponse)),
+		),
+	);
+};
+
+function TestQuickFilters({
+	signal = SignalType.LOGS,
+	config = QuickFiltersConfig,
+}: {
+	signal?: SignalType;
+	config?: IQuickFiltersConfig[];
+}): JSX.Element {
 	return (
 		<MockQueryClientProvider>
 			<QuickFilters
 				source={QuickFiltersSource.EXCEPTIONS}
-				config={QuickFiltersConfig}
+				config={config}
 				handleFilterVisibilityChange={handleFilterVisibilityChange}
+				signal={signal}
 			/>
 		</MockQueryClientProvider>
 	);
 }
 
-describe('Quick Filters', () => {
-	beforeEach(() => {
-		// Provide a mock implementation for useQueryBuilder
-		(useQueryBuilder as jest.Mock).mockReturnValue({
-			currentQuery: {
-				builder: {
-					queryData: [
-						{
-							queryName: 'Test Query',
-							filters: { items: [{ key: 'test', value: 'value' }] },
-						},
-					],
-				},
+TestQuickFilters.defaultProps = {
+	signal: '',
+	config: QuickFiltersConfig,
+};
+
+beforeAll(() => {
+	server.listen();
+});
+
+afterEach(() => {
+	server.resetHandlers();
+});
+
+afterAll(() => {
+	server.close();
+	cleanup();
+});
+
+beforeEach(() => {
+	(useQueryBuilder as jest.Mock).mockReturnValue({
+		currentQuery: {
+			builder: {
+				queryData: [
+					{
+						queryName: QUERY_NAME,
+						filters: { items: [{ key: 'test', value: 'value' }] },
+					},
+				],
 			},
-			lastUsedQuery: 0,
-			redirectWithQueryBuilderData,
-		});
-
-		// Provide a mock implementation for useGetAggregateValues
-		(useGetAggregateValues as jest.Mock).mockReturnValue({
-			data: {
-				statusCode: 200,
-				error: null,
-				message: 'success',
-				payload: {
-					stringAttributeValues: [
-						'mq-kafka',
-						'otel-demo',
-						'otlp-python',
-						'sample-flask',
-					],
-					numberAttributeValues: null,
-					boolAttributeValues: null,
-				},
-			}, // Mocked API response
-			isLoading: false,
-		});
-	});
-
-	it('renders correctly with default props', () => {
-		const { container } = render(<TestQuickFilters />);
-		expect(container).toMatchSnapshot();
+		},
+		lastUsedQuery: 0,
+		redirectWithQueryBuilderData,
 	});
+	setupServer();
+});
 
+describe('Quick Filters', () => {
 	it('displays the correct query name in the header', () => {
 		render(<TestQuickFilters />);
 		expect(screen.getByText('Filters for')).toBeInTheDocument();
-		expect(screen.getByText('Test Query')).toBeInTheDocument();
+		expect(screen.getByText(QUERY_NAME)).toBeInTheDocument();
 	});
 
-	it('should add filter data to query when checkbox is clicked', () => {
+	it('should add filter data to query when checkbox is clicked', async () => {
 		render(<TestQuickFilters />);
 		const checkbox = screen.getByText('mq-kafka');
 		fireEvent.click(checkbox);
-		expect(redirectWithQueryBuilderData).toHaveBeenCalledWith(
-			expect.objectContaining({
-				builder: {
-					queryData: expect.arrayContaining([
-						expect.objectContaining({
-							filters: expect.objectContaining({
-								items: expect.arrayContaining([
-									expect.objectContaining({
-										key: expect.objectContaining({
-											key: 'deployment.environment',
+
+		await waitFor(() => {
+			expect(redirectWithQueryBuilderData).toHaveBeenCalledWith(
+				expect.objectContaining({
+					builder: {
+						queryData: expect.arrayContaining([
+							expect.objectContaining({
+								filters: expect.objectContaining({
+									items: expect.arrayContaining([
+										expect.objectContaining({
+											key: expect.objectContaining({
+												key: 'deployment.environment',
+											}),
+											value: 'mq-kafka',
 										}),
-										value: 'mq-kafka',
-									}),
-								]),
+									]),
+								}),
 							}),
-						}),
-					]),
-				},
-			}),
-		); // sets composite query param
+						]),
+					},
+				}),
+			);
+		});
+	});
+});
+
+describe('Quick Filters with custom filters', () => {
+	it('loads the custom filters correctly', async () => {
+		render(<TestQuickFilters signal={SIGNAL} />);
+		expect(screen.getByText('Filters for')).toBeInTheDocument();
+		expect(screen.getByText(QUERY_NAME)).toBeInTheDocument();
+		await screen.findByText(FILTER_SERVICE_NAME);
+		await screen.findByText('otel-demo');
+
+		const icon = await screen.findByTestId(SETTINGS_ICON_TEST_ID);
+		fireEvent.click(icon);
+
+		expect(await screen.findByText('Edit quick filters')).toBeInTheDocument();
+
+		const addedSection = screen.getByText(ADDED_FILTERS_LABEL).parentElement!;
+		expect(addedSection).toContainElement(
+			await screen.findByText(FILTER_OS_DESCRIPTION),
+		);
+
+		const otherSection = screen.getByText(OTHER_FILTERS_LABEL).parentElement!;
+		expect(otherSection).toContainElement(
+			await screen.findByText(FILTER_K8S_DEPLOYMENT_NAME),
+		);
+	});
+
+	it('adds a filter from OTHER FILTERS to ADDED FILTERS when clicked', async () => {
+		render(<TestQuickFilters signal={SIGNAL} />);
+		await screen.findByText(FILTER_SERVICE_NAME);
+
+		const icon = await screen.findByTestId(SETTINGS_ICON_TEST_ID);
+		fireEvent.click(icon);
+
+		const otherFilterItem = await screen.findByText(FILTER_K8S_DEPLOYMENT_NAME);
+		const addButton = otherFilterItem.parentElement?.querySelector('button');
+		expect(addButton).not.toBeNull();
+		fireEvent.click(addButton as HTMLButtonElement);
+
+		const addedSection = screen.getByText(ADDED_FILTERS_LABEL).parentElement!;
+		await waitFor(() => {
+			expect(addedSection).toHaveTextContent(FILTER_K8S_DEPLOYMENT_NAME);
+		});
+	});
+
+	it('removes a filter from ADDED FILTERS and moves it to OTHER FILTERS', async () => {
+		render(<TestQuickFilters signal={SIGNAL} />);
+		await screen.findByText(FILTER_SERVICE_NAME);
+
+		const icon = await screen.findByTestId(SETTINGS_ICON_TEST_ID);
+		fireEvent.click(icon);
+
+		const addedSection = screen.getByText(ADDED_FILTERS_LABEL).parentElement!;
+		const target = await screen.findByText(FILTER_OS_DESCRIPTION);
+		const removeBtn = target.parentElement?.querySelector('button');
+		expect(removeBtn).not.toBeNull();
+		fireEvent.click(removeBtn as HTMLButtonElement);
+
+		await waitFor(() => {
+			expect(addedSection).not.toContainElement(
+				screen.getByText(FILTER_OS_DESCRIPTION),
+			);
+		});
+
+		const otherSection = screen.getByText(OTHER_FILTERS_LABEL).parentElement!;
+		expect(otherSection).toContainElement(
+			screen.getByText(FILTER_OS_DESCRIPTION),
+		);
+	});
+
+	it('restores original filter state on Discard', async () => {
+		render(<TestQuickFilters signal={SIGNAL} />);
+		await screen.findByText(FILTER_SERVICE_NAME);
+
+		const icon = await screen.findByTestId(SETTINGS_ICON_TEST_ID);
+		fireEvent.click(icon);
+
+		const addedSection = screen.getByText(ADDED_FILTERS_LABEL).parentElement!;
+		const target = await screen.findByText(FILTER_OS_DESCRIPTION);
+		const removeBtn = target.parentElement?.querySelector('button');
+		expect(removeBtn).not.toBeNull();
+		fireEvent.click(removeBtn as HTMLButtonElement);
+
+		const otherSection = screen.getByText(OTHER_FILTERS_LABEL).parentElement!;
+		await waitFor(() => {
+			expect(addedSection).not.toContainElement(
+				screen.getByText(FILTER_OS_DESCRIPTION),
+			);
+			expect(otherSection).toContainElement(
+				screen.getByText(FILTER_OS_DESCRIPTION),
+			);
+		});
+
+		fireEvent.click(screen.getByText(DISCARD_TEXT));
+
+		await waitFor(() => {
+			expect(addedSection).toContainElement(
+				screen.getByText(FILTER_OS_DESCRIPTION),
+			);
+			expect(otherSection).not.toContainElement(
+				screen.getByText(FILTER_OS_DESCRIPTION),
+			);
+		});
+	});
+
+	it('saves the updated filters by calling PUT with correct payload', async () => {
+		render(<TestQuickFilters signal={SIGNAL} />);
+		await screen.findByText(FILTER_SERVICE_NAME);
+
+		const icon = await screen.findByTestId(SETTINGS_ICON_TEST_ID);
+		fireEvent.click(icon);
+
+		const target = await screen.findByText(FILTER_OS_DESCRIPTION);
+		const removeBtn = target.parentElement?.querySelector('button');
+		expect(removeBtn).not.toBeNull();
+		fireEvent.click(removeBtn as HTMLButtonElement);
+
+		fireEvent.click(screen.getByText(SAVE_CHANGES_TEXT));
+
+		await waitFor(() => {
+			expect(putHandler).toHaveBeenCalled();
+		});
+
+		const requestBody = putHandler.mock.calls[0][0];
+		expect(requestBody.filters).toEqual(
+			expect.arrayContaining([
+				expect.not.objectContaining({ key: FILTER_OS_DESCRIPTION }),
+			]),
+		);
+		expect(requestBody.signal).toBe(SIGNAL);
 	});
 });

frontend/src/components/QuickFilters/tests/__snapshots__/QuickFilters.test.tsx.snap

@@ -1,384 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Quick Filters renders correctly with default props 1`] = `
-<div>
-  <div
-    class="quick-filters"
-  >
-    <section
-      class="header"
-    >
-      <section
-        class="left-actions"
-      >
-        <span
-          aria-label="filter"
-          class="anticon anticon-filter"
-          role="img"
-        >
-          <svg
-            aria-hidden="true"
-            data-icon="filter"
-            fill="currentColor"
-            focusable="false"
-            height="1em"
-            viewBox="64 64 896 896"
-            width="1em"
-          >
-            <path
-              d="M880.1 154H143.9c-24.5 0-39.8 26.7-27.5 48L349 597.4V838c0 17.7 14.2 32 31.8 32h262.4c17.6 0 31.8-14.3 31.8-32V597.4L907.7 202c12.2-21.3-3.1-48-27.6-48zM603.4 798H420.6V642h182.9v156zm9.6-236.6l-9.5 16.6h-183l-9.5-16.6L212.7 226h598.6L613 561.4z"
-            />
-          </svg>
-        </span>
-        <span
-          class="ant-typography text css-dev-only-do-not-override-2i2tap"
-        >
-          Filters for
-        </span>
-        <span
-          class="ant-typography sync-tag css-dev-only-do-not-override-2i2tap"
-        >
-          Test Query
-        </span>
-      </section>
-      <section
-        class="right-actions"
-      >
-        <span
-          aria-label="sync"
-          class="anticon anticon-sync sync-icon"
-          role="img"
-          tabindex="-1"
-        >
-          <svg
-            aria-hidden="true"
-            data-icon="sync"
-            fill="currentColor"
-            focusable="false"
-            height="1em"
-            viewBox="64 64 896 896"
-            width="1em"
-          >
-            <path
-              d="M168 504.2c1-43.7 10-86.1 26.9-126 17.3-41 42.1-77.7 73.7-109.4S337 212.3 378 195c42.4-17.9 87.4-27 133.9-27s91.5 9.1 133.8 27A341.5 341.5 0 01755 268.8c9.9 9.9 19.2 20.4 27.8 31.4l-60.2 47a8 8 0 003 14.1l175.7 43c5 1.2 9.9-2.6 9.9-7.7l.8-180.9c0-6.7-7.7-10.5-12.9-6.3l-56.4 44.1C765.8 155.1 646.2 92 511.8 92 282.7 92 96.3 275.6 92 503.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8zm756 7.8h-60c-4.4 0-7.9 3.5-8 7.8-1 43.7-10 86.1-26.9 126-17.3 41-42.1 77.8-73.7 109.4A342.45 342.45 0 01512.1 856a342.24 342.24 0 01-243.2-100.8c-9.9-9.9-19.2-20.4-27.8-31.4l60.2-47a8 8 0 00-3-14.1l-175.7-43c-5-1.2-9.9 2.6-9.9 7.7l-.7 181c0 6.7 7.7 10.5 12.9 6.3l56.4-44.1C258.2 868.9 377.8 932 512.2 932c229.2 0 415.5-183.7 419.8-411.8a8 8 0 00-8-8.2z"
-            />
-          </svg>
-        </span>
-        <div
-          class="divider-filter"
-        />
-        <span
-          aria-label="vertical-align-top"
-          class="anticon anticon-vertical-align-top"
-          role="img"
-          tabindex="-1"
-        >
-          <svg
-            aria-hidden="true"
-            data-icon="vertical-align-top"
-            fill="currentColor"
-            focusable="false"
-            height="1em"
-            style="transform: rotate(270deg);"
-            viewBox="64 64 896 896"
-            width="1em"
-          >
-            <path
-              d="M859.9 168H164.1c-4.5 0-8.1 3.6-8.1 8v60c0 4.4 3.6 8 8.1 8h695.8c4.5 0 8.1-3.6 8.1-8v-60c0-4.4-3.6-8-8.1-8zM518.3 355a8 8 0 00-12.6 0l-112 141.7a7.98 7.98 0 006.3 12.9h73.9V848c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V509.7H624c6.7 0 10.4-7.7 6.3-12.9L518.3 355z"
-            />
-          </svg>
-        </span>
-      </section>
-    </section>
-    <div
-      class="overlay-scrollbar"
-      data-overlayscrollbars-initialize="true"
-    >
-      <div
-        data-overlayscrollbars-contents=""
-      >
-        <section
-          class="filters"
-        >
-          <div
-            class="checkbox-filter"
-          >
-            <section
-              class="filter-header-checkbox"
-            >
-              <section
-                class="left-action"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="lucide lucide-chevron-down"
-                  cursor="pointer"
-                  fill="none"
-                  height="13"
-                  stroke="currentColor"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="2"
-                  viewBox="0 0 24 24"
-                  width="13"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="m6 9 6 6 6-6"
-                  />
-                </svg>
-                <span
-                  class="ant-typography title css-dev-only-do-not-override-2i2tap"
-                >
-                  Environment
-                </span>
-              </section>
-              <section
-                class="right-action"
-              >
-                <span
-                  class="ant-typography clear-all css-dev-only-do-not-override-2i2tap"
-                >
-                  Clear All
-                </span>
-              </section>
-            </section>
-            <section
-              class="search"
-            >
-              <input
-                class="ant-input css-dev-only-do-not-override-2i2tap"
-                placeholder="Filter values"
-                type="text"
-                value=""
-              />
-            </section>
-            <section
-              class="values"
-            >
-              <div
-                class="value"
-              >
-                <label
-                  class="ant-checkbox-wrapper ant-checkbox-wrapper-checked check-box css-dev-only-do-not-override-2i2tap"
-                >
-                  <span
-                    class="ant-checkbox ant-wave-target css-dev-only-do-not-override-2i2tap ant-checkbox-checked"
-                  >
-                    <input
-                      checked=""
-                      class="ant-checkbox-input"
-                      type="checkbox"
-                    />
-                    <span
-                      class="ant-checkbox-inner"
-                    />
-                  </span>
-                </label>
-                <div
-                  class="checkbox-value-section"
-                >
-                  <span
-                    class="ant-typography ant-typography-ellipsis ant-typography-single-line ant-typography-ellipsis-single-line value-string css-dev-only-do-not-override-2i2tap"
-                  >
-                    mq-kafka
-                  </span>
-                  <button
-                    class="ant-btn css-dev-only-do-not-override-2i2tap ant-btn-text only-btn"
-                    type="button"
-                  >
-                    <span>
-                      Only
-                    </span>
-                  </button>
-                  <button
-                    class="ant-btn css-dev-only-do-not-override-2i2tap ant-btn-text toggle-btn"
-                    type="button"
-                  >
-                    <span>
-                      Toggle
-                    </span>
-                  </button>
-                </div>
-              </div>
-              <div
-                class="value"
-              >
-                <label
-                  class="ant-checkbox-wrapper ant-checkbox-wrapper-checked check-box css-dev-only-do-not-override-2i2tap"
-                >
-                  <span
-                    class="ant-checkbox ant-wave-target css-dev-only-do-not-override-2i2tap ant-checkbox-checked"
-                  >
-                    <input
-                      checked=""
-                      class="ant-checkbox-input"
-                      type="checkbox"
-                    />
-                    <span
-                      class="ant-checkbox-inner"
-                    />
-                  </span>
-                </label>
-                <div
-                  class="checkbox-value-section"
-                >
-                  <span
-                    class="ant-typography ant-typography-ellipsis ant-typography-single-line ant-typography-ellipsis-single-line value-string css-dev-only-do-not-override-2i2tap"
-                  >
-                    otel-demo
-                  </span>
-                  <button
-                    class="ant-btn css-dev-only-do-not-override-2i2tap ant-btn-text only-btn"
-                    type="button"
-                  >
-                    <span>
-                      Only
-                    </span>
-                  </button>
-                  <button
-                    class="ant-btn css-dev-only-do-not-override-2i2tap ant-btn-text toggle-btn"
-                    type="button"
-                  >
-                    <span>
-                      Toggle
-                    </span>
-                  </button>
-                </div>
-              </div>
-              <div
-                class="value"
-              >
-                <label
-                  class="ant-checkbox-wrapper ant-checkbox-wrapper-checked check-box css-dev-only-do-not-override-2i2tap"
-                >
-                  <span
-                    class="ant-checkbox ant-wave-target css-dev-only-do-not-override-2i2tap ant-checkbox-checked"
-                  >
-                    <input
-                      checked=""
-                      class="ant-checkbox-input"
-                      type="checkbox"
-                    />
-                    <span
-                      class="ant-checkbox-inner"
-                    />
-                  </span>
-                </label>
-                <div
-                  class="checkbox-value-section"
-                >
-                  <span
-                    class="ant-typography ant-typography-ellipsis ant-typography-single-line ant-typography-ellipsis-single-line value-string css-dev-only-do-not-override-2i2tap"
-                  >
-                    otlp-python
-                  </span>
-                  <button
-                    class="ant-btn css-dev-only-do-not-override-2i2tap ant-btn-text only-btn"
-                    type="button"
-                  >
-                    <span>
-                      Only
-                    </span>
-                  </button>
-                  <button
-                    class="ant-btn css-dev-only-do-not-override-2i2tap ant-btn-text toggle-btn"
-                    type="button"
-                  >
-                    <span>
-                      Toggle
-                    </span>
-                  </button>
-                </div>
-              </div>
-              <div
-                class="value"
-              >
-                <label
-                  class="ant-checkbox-wrapper ant-checkbox-wrapper-checked check-box css-dev-only-do-not-override-2i2tap"
-                >
-                  <span
-                    class="ant-checkbox ant-wave-target css-dev-only-do-not-override-2i2tap ant-checkbox-checked"
-                  >
-                    <input
-                      checked=""
-                      class="ant-checkbox-input"
-                      type="checkbox"
-                    />
-                    <span
-                      class="ant-checkbox-inner"
-                    />
-                  </span>
-                </label>
-                <div
-                  class="checkbox-value-section"
-                >
-                  <span
-                    class="ant-typography ant-typography-ellipsis ant-typography-single-line ant-typography-ellipsis-single-line value-string css-dev-only-do-not-override-2i2tap"
-                  >
-                    sample-flask
-                  </span>
-                  <button
-                    class="ant-btn css-dev-only-do-not-override-2i2tap ant-btn-text only-btn"
-                    type="button"
-                  >
-                    <span>
-                      Only
-                    </span>
-                  </button>
-                  <button
-                    class="ant-btn css-dev-only-do-not-override-2i2tap ant-btn-text toggle-btn"
-                    type="button"
-                  >
-                    <span>
-                      Toggle
-                    </span>
-                  </button>
-                </div>
-              </div>
-            </section>
-          </div>
-          <div
-            class="checkbox-filter"
-          >
-            <section
-              class="filter-header-checkbox"
-            >
-              <section
-                class="left-action"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="lucide lucide-chevron-right"
-                  cursor="pointer"
-                  fill="none"
-                  height="13"
-                  stroke="currentColor"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="2"
-                  viewBox="0 0 24 24"
-                  width="13"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="m9 18 6-6-6-6"
-                  />
-                </svg>
-                <span
-                  class="ant-typography title css-dev-only-do-not-override-2i2tap"
-                >
-                  Service Name
-                </span>
-              </section>
-              <section
-                class="right-action"
-              />
-            </section>
-          </div>
-        </section>
-      </div>
-    </div>
-  </div>
-</div>
-`;

frontend/src/components/QuickFilters/types.ts

@@ -17,6 +17,13 @@ export enum SpecficFilterOperations {
 	ONLY = 'ONLY',
 }
 
+export enum SignalType {
+	TRACES = 'traces',
+	LOGS = 'logs',
+	API_MONITORING = 'api_monitoring',
+	EXCEPTIONS = 'exceptions',
+}
+
 export interface IQuickFiltersConfig {
 	type: FiltersType;
 	title: string;
@@ -33,6 +40,8 @@ export interface IQuickFiltersProps {
 	handleFilterVisibilityChange: () => void;
 	source: QuickFiltersSource;
 	onFilterChange?: (query: Query) => void;
+	signal?: SignalType;
+	className?: string;
 }
 
 export enum QuickFiltersSource {

frontend/src/components/QuickFilters/utils.tsx

@@ -0,0 +1,39 @@
+import { Filter as FilterType } from 'types/api/quickFilters/getCustomFilters';
+
+import { FiltersType, IQuickFiltersConfig } from './types';
+
+const getFilterName = (str: string): string =>
+	// replace . and _ with space
+	// capitalize the first letter of each word
+	str
+		.replace(/\./g, ' ')
+		.replace(/_/g, ' ')
+		.split(' ')
+		.map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+		.join(' ');
+
+export const getFilterConfig = (
+	customFilters?: FilterType[],
+	config?: IQuickFiltersConfig[],
+): IQuickFiltersConfig[] => {
+	if (!customFilters?.length) {
+		return config || [];
+	}
+
+	return customFilters.map(
+		(att, index) =>
+			({
+				type: FiltersType.CHECKBOX,
+				title: getFilterName(att.key),
+				attributeKey: {
+					id: att.key,
+					key: att.key,
+					dataType: att.dataType,
+					type: att.type,
+					isColumn: att.isColumn,
+					isJSON: att.isJSON,
+				},
+				defaultOpen: index === 0,
+			} as IQuickFiltersConfig),
+	);
+};

frontend/src/components/UserpilotRouteTracker/UserpilotRouteTracker.test.tsx

@@ -0,0 +1,223 @@
+import { render } from '@testing-library/react';
+import { act } from 'react-dom/test-utils';
+import { MemoryRouter } from 'react-router-dom';
+import { Userpilot } from 'userpilot';
+
+import UserpilotRouteTracker from './UserpilotRouteTracker';
+
+// Mock constants
+const INITIAL_PATH = '/initial';
+const TIMER_DELAY = 100;
+
+// Mock the userpilot module
+jest.mock('userpilot', () => ({
+	Userpilot: {
+		reload: jest.fn(),
+	},
+}));
+
+// Mock location state
+let mockLocation = {
+	pathname: INITIAL_PATH,
+	search: '',
+	hash: '',
+	state: null,
+};
+
+// Mock react-router-dom
+jest.mock('react-router-dom', () => {
+	const originalModule = jest.requireActual('react-router-dom');
+
+	return {
+		...originalModule,
+		useLocation: jest.fn(() => mockLocation),
+	};
+});
+
+describe('UserpilotRouteTracker', () => {
+	beforeEach(() => {
+		jest.clearAllMocks();
+		// Reset timers
+		jest.useFakeTimers();
+		// Reset error mock implementation
+		(Userpilot.reload as jest.Mock).mockImplementation(() => {});
+		// Reset location to initial state
+		mockLocation = {
+			pathname: INITIAL_PATH,
+			search: '',
+			hash: '',
+			state: null,
+		};
+	});
+
+	afterEach(() => {
+		jest.useRealTimers();
+	});
+
+	it('calls Userpilot.reload on initial render', () => {
+		render(
+			<MemoryRouter>
+				<UserpilotRouteTracker />
+			</MemoryRouter>,
+		);
+
+		// Fast-forward timer to trigger the setTimeout in reloadUserpilot
+		act(() => {
+			jest.advanceTimersByTime(TIMER_DELAY);
+		});
+
+		expect(Userpilot.reload).toHaveBeenCalledTimes(1);
+	});
+
+	it('calls Userpilot.reload when pathname changes', () => {
+		const { rerender } = render(
+			<MemoryRouter>
+				<UserpilotRouteTracker />
+			</MemoryRouter>,
+		);
+
+		// Fast-forward initial render timer
+		act(() => {
+			jest.advanceTimersByTime(TIMER_DELAY);
+		});
+		jest.clearAllMocks();
+
+		// Create a new location object with different pathname
+		const newLocation = {
+			...mockLocation,
+			pathname: '/new-path',
+		};
+
+		// Update the mock location with new path and trigger re-render
+		act(() => {
+			mockLocation = newLocation;
+			// Force a component update with the new location
+			rerender(
+				<MemoryRouter>
+					<UserpilotRouteTracker />
+				</MemoryRouter>,
+			);
+		});
+
+		// Fast-forward timer to allow the setTimeout to execute
+		act(() => {
+			jest.advanceTimersByTime(TIMER_DELAY);
+		});
+
+		expect(Userpilot.reload).toHaveBeenCalledTimes(1);
+	});
+
+	it('calls Userpilot.reload when search parameters change', () => {
+		const { rerender } = render(
+			<MemoryRouter>
+				<UserpilotRouteTracker />
+			</MemoryRouter>,
+		);
+
+		// Fast-forward initial render timer
+		act(() => {
+			jest.advanceTimersByTime(TIMER_DELAY);
+		});
+		jest.clearAllMocks();
+
+		// Create a new location object with different search params
+		const newLocation = {
+			...mockLocation,
+			search: '?param=value',
+		};
+
+		// Update the mock location with new search and trigger re-render
+		// eslint-disable-next-line sonarjs/no-identical-functions
+		act(() => {
+			mockLocation = newLocation;
+			// Force a component update with the new location
+			rerender(
+				<MemoryRouter>
+					<UserpilotRouteTracker />
+				</MemoryRouter>,
+			);
+		});
+
+		// Fast-forward timer to allow the setTimeout to execute
+		act(() => {
+			jest.advanceTimersByTime(TIMER_DELAY);
+		});
+
+		expect(Userpilot.reload).toHaveBeenCalledTimes(1);
+	});
+
+	it('handles errors in Userpilot.reload gracefully', () => {
+		// Mock console.error to prevent test output noise and capture calls
+		const consoleErrorSpy = jest
+			.spyOn(console, 'error')
+			.mockImplementation(() => {});
+
+		// Instead of using the component, we test the error handling behavior directly
+		const errorMsg = 'Error message';
+
+		// Set up a function that has the same error handling behavior as in component
+		const testErrorHandler = (): void => {
+			try {
+				if (typeof Userpilot !== 'undefined' && Userpilot.reload) {
+					Userpilot.reload();
+				}
+			} catch (error) {
+				console.error('[Userpilot] Error reloading on route change:', error);
+			}
+		};
+
+		// Make Userpilot.reload throw an error
+		(Userpilot.reload as jest.Mock).mockImplementation(() => {
+			throw new Error(errorMsg);
+		});
+
+		// Execute the function that should handle errors
+		testErrorHandler();
+
+		// Verify error was logged
+		expect(consoleErrorSpy).toHaveBeenCalledWith(
+			'[Userpilot] Error reloading on route change:',
+			expect.any(Error),
+		);
+
+		// Restore console mock
+		consoleErrorSpy.mockRestore();
+	});
+
+	it('does not call Userpilot.reload when same route is rendered again', () => {
+		const { rerender } = render(
+			<MemoryRouter>
+				<UserpilotRouteTracker />
+			</MemoryRouter>,
+		);
+
+		// Fast-forward initial render timer
+		act(() => {
+			jest.advanceTimersByTime(TIMER_DELAY);
+		});
+		jest.clearAllMocks();
+
+		act(() => {
+			mockLocation = {
+				pathname: mockLocation.pathname,
+				search: mockLocation.search,
+				hash: mockLocation.hash,
+				state: mockLocation.state,
+			};
+			// Force a component update with the same location
+			rerender(
+				<MemoryRouter>
+					<UserpilotRouteTracker />
+				</MemoryRouter>,
+			);
+		});
+
+		// Fast-forward timer
+		act(() => {
+			jest.advanceTimersByTime(TIMER_DELAY);
+		});
+
+		// Should not call reload since path and search are the same
+		expect(Userpilot.reload).not.toHaveBeenCalled();
+	});
+});

frontend/src/components/UserpilotRouteTracker/UserpilotRouteTracker.tsx

@@ -0,0 +1,60 @@
+import { useCallback, useEffect, useRef } from 'react';
+import { useLocation } from 'react-router-dom';
+import { Userpilot } from 'userpilot';
+
+/**
+ * UserpilotRouteTracker - A component that tracks route changes and calls Userpilot.reload
+ * on actual page changes (pathname changes or significant query parameter changes).
+ *
+ * This component renders nothing and is designed to be placed once high in the component tree.
+ */
+function UserpilotRouteTracker(): null {
+	const location = useLocation();
+	const prevPathRef = useRef<string>(location.pathname);
+	const prevSearchRef = useRef<string>(location.search);
+	const isFirstRenderRef = useRef<boolean>(true);
+
+	// Function to reload Userpilot safely - using useCallback to avoid dependency issues
+	const reloadUserpilot = useCallback((): void => {
+		try {
+			if (typeof Userpilot !== 'undefined' && Userpilot.reload) {
+				setTimeout(() => {
+					Userpilot.reload();
+				}, 100);
+			}
+		} catch (error) {
+			console.error('[Userpilot] Error reloading on route change:', error);
+		}
+	}, []);
+
+	// Handle first render
+	useEffect(() => {
+		if (isFirstRenderRef.current) {
+			isFirstRenderRef.current = false;
+			reloadUserpilot();
+		}
+	}, [reloadUserpilot]);
+
+	// Handle route/query changes
+	useEffect(() => {
+		// Skip first render as it's handled by the effect above
+		if (isFirstRenderRef.current) {
+			return;
+		}
+
+		// Check if the path has changed or if significant query params have changed
+		const pathChanged = location.pathname !== prevPathRef.current;
+		const searchChanged = location.search !== prevSearchRef.current;
+
+		if (pathChanged || searchChanged) {
+			// Update refs
+			prevPathRef.current = location.pathname;
+			prevSearchRef.current = location.search;
+			reloadUserpilot();
+		}
+	}, [location.pathname, location.search, reloadUserpilot]);
+
+	return null;
+}
+
+export default UserpilotRouteTracker;

frontend/src/constants/localStorage.ts

@@ -28,4 +28,7 @@ export enum LOCALSTORAGE {
 	DONT_SHOW_SLOW_API_WARNING = 'DONT_SHOW_SLOW_API_WARNING',
 	METRICS_LIST_OPTIONS = 'METRICS_LIST_OPTIONS',
 	SHOW_EXCEPTIONS_QUICK_FILTERS = 'SHOW_EXCEPTIONS_QUICK_FILTERS',
+	BANNER_DISMISSED = 'BANNER_DISMISSED',
+	QUICK_FILTERS_SETTINGS_ANNOUNCEMENT = 'QUICK_FILTERS_SETTINGS_ANNOUNCEMENT',
+	UNEXECUTED_FUNNELS = 'UNEXECUTED_FUNNELS',
 }

frontend/src/constants/reactQueryKeys.ts

@@ -75,7 +75,12 @@ export const REACT_QUERY_KEY = {
 	VALIDATE_FUNNEL_STEPS: 'VALIDATE_FUNNEL_STEPS',
 	UPDATE_FUNNEL_STEP_DETAILS: 'UPDATE_FUNNEL_STEP_DETAILS',
 	GET_FUNNEL_OVERVIEW: 'GET_FUNNEL_OVERVIEW',
+	GET_FUNNEL_STEPS_OVERVIEW: 'GET_FUNNEL_STEPS_OVERVIEW',
 	GET_FUNNEL_SLOW_TRACES: 'GET_FUNNEL_SLOW_TRACES',
 	GET_FUNNEL_ERROR_TRACES: 'GET_FUNNEL_ERROR_TRACES',
 	GET_FUNNEL_STEPS_GRAPH_DATA: 'GET_FUNNEL_STEPS_GRAPH_DATA',
+
+	// Quick Filters Query Keys
+	GET_CUSTOM_FILTERS: 'GET_CUSTOM_FILTERS',
+	GET_OTHER_FILTERS: 'GET_OTHER_FILTERS',
 } as const;

frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/AllEndPoints.tsx

@@ -7,10 +7,12 @@ import {
 import GridCard from 'container/GridCardLayout/GridCard';
 import QueryBuilderSearchV2 from 'container/QueryBuilder/filters/QueryBuilderSearchV2/QueryBuilderSearchV2';
 import { useGetAggregateKeys } from 'hooks/queryBuilder/useGetAggregateKeys';
+import { isEqual } from 'lodash-es';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
 import { DataSource } from 'types/common/queryBuilder';
 
+import { useApiMonitoringParams } from '../../../queryParams';
 import { SPAN_ATTRIBUTES, VIEWS } from './constants';
 
 function AllEndPoints({
@@ -35,6 +37,7 @@ function AllEndPoints({
 	initialFilters: IBuilderQuery['filters'];
 	setInitialFiltersEndPointStats: (filters: IBuilderQuery['filters']) => void;
 }): JSX.Element {
+	const [params, setParams] = useApiMonitoringParams();
 	const [groupBySearchValue, setGroupBySearchValue] = useState<string>('');
 	const [allAvailableGroupByOptions, setAllAvailableGroupByOptions] = useState<{
 		[key: string]: any;
@@ -55,87 +58,38 @@ function AllEndPoints({
 		{ value: string; label: string }[]
 	>([]);
 
-	const handleGroupByChange = useCallback(
-		(value: IBuilderQuery['groupBy']) => {
-			const newGroupBy = [];
-
-			for (let index = 0; index < value.length; index++) {
-				const element = (value[index] as unknown) as string;
-
-				// Check if the key exists in our cached options first
-				if (allAvailableGroupByOptions[element]) {
-					newGroupBy.push(allAvailableGroupByOptions[element]);
-				} else {
-					// If not found in cache, check the current filtered results
-					const key = groupByFiltersData?.payload?.attributeKeys?.find(
-						(key) => key.key === element,
-					);
-
-					if (key) {
-						newGroupBy.push(key);
-					}
-				}
-			}
-
-			setGroupBy(newGroupBy);
-			setGroupBySearchValue('');
-		},
-		[groupByFiltersData, setGroupBy, allAvailableGroupByOptions],
-	);
-
-	useEffect(() => {
-		if (groupByFiltersData?.payload) {
-			// Update dropdown options
-			setGroupByOptions(
-				groupByFiltersData?.payload?.attributeKeys?.map((filter) => ({
-					value: filter.key,
-					label: filter.key,
-				})) || [],
-			);
-
-			// Cache all available options to preserve selected values using functional update
-			// to avoid dependency on allAvailableGroupByOptions
-			setAllAvailableGroupByOptions((prevOptions) => {
-				const newOptions = { ...prevOptions };
-				groupByFiltersData?.payload?.attributeKeys?.forEach((filter) => {
-					newOptions[filter.key] = filter;
-				});
-				return newOptions;
-			});
-		}
-	}, [groupByFiltersData]); // Only depends on groupByFiltersData now
-
-	// Cache existing selected options on component mount
-	useEffect(() => {
-		if (groupBy && groupBy.length > 0) {
-			setAllAvailableGroupByOptions((prevOptions) => {
-				const newOptions = { ...prevOptions };
-				groupBy.forEach((option) => {
-					newOptions[option.key] = option;
-				});
-				return newOptions;
-			});
-		}
-	}, [groupBy]); // Removed allAvailableGroupByOptions from dependencies
-
-	const currentQuery = initialQueriesMap[DataSource.TRACES];
-
-	// Local state for filters, combining endpoint filter and search filters
+	// --- FILTERS STATE SYNC ---
 	const [filters, setFilters] = useState<IBuilderQuery['filters']>(() => {
+		if (params.allEndpointsLocalFilters) {
+			return params.allEndpointsLocalFilters;
+		}
 		// Initialize filters based on the initial endPointName prop
 		const initialItems = [...initialFilters.items];
 		return { op: 'AND', items: initialItems };
 	});
 
+	// Sync params to local filters state on param change
+	useEffect(() => {
+		if (
+			params.allEndpointsLocalFilters &&
+			!isEqual(params.allEndpointsLocalFilters, filters)
+		) {
+			setFilters(params.allEndpointsLocalFilters);
+		}
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [params.allEndpointsLocalFilters]);
+
 	// Handler for changes from the QueryBuilderSearchV2 component
 	const handleFilterChange = useCallback(
 		(newFilters: IBuilderQuery['filters']): void => {
-			// 1. Update local filters state immediately
 			setFilters(newFilters);
+			setParams({ allEndpointsLocalFilters: newFilters });
 		},
-		[], // Dependencies for the callback
+		[setParams],
 	);
 
+	const currentQuery = initialQueriesMap[DataSource.TRACES];
+
 	const updatedCurrentQuery = useMemo(
 		() => ({
 			...currentQuery,
@@ -160,6 +114,91 @@ function AllEndPoints({
 		[groupBy, domainName, filters],
 	);
 
+	// --- GROUP BY STATE SYNC (existing) ---
+	const handleGroupByChange = useCallback(
+		(value: IBuilderQuery['groupBy']) => {
+			const newGroupBy = [];
+
+			for (let index = 0; index < value.length; index++) {
+				const element = (value[index] as unknown) as string;
+
+				// Check if the key exists in our cached options first
+				if (allAvailableGroupByOptions[element]) {
+					newGroupBy.push(allAvailableGroupByOptions[element]);
+				} else {
+					// If not found in cache, check the current filtered results
+					const key = groupByFiltersData?.payload?.attributeKeys?.find(
+						(key) => key.key === element,
+					);
+
+					if (key) {
+						newGroupBy.push(key);
+					}
+				}
+			}
+
+			setGroupBy(newGroupBy);
+			setGroupBySearchValue('');
+			// Update params
+			setParams({ groupBy: newGroupBy.map((g) => g.key) });
+		},
+		[groupByFiltersData, setGroupBy, allAvailableGroupByOptions, setParams],
+	);
+
+	// Sync params to local groupBy state on param change
+	useEffect(() => {
+		if (
+			params.groupBy &&
+			Array.isArray(params.groupBy) &&
+			!isEqual(
+				params.groupBy,
+				groupBy.map((g) => g.key),
+			)
+		) {
+			// Only update if different
+			const newGroupBy = params.groupBy
+				.map((key) => allAvailableGroupByOptions[key])
+				.filter(Boolean);
+			if (newGroupBy.length === params.groupBy.length) {
+				setGroupBy(newGroupBy);
+			}
+		}
+	}, [params.groupBy, allAvailableGroupByOptions, groupBy, setGroupBy]);
+
+	useEffect(() => {
+		if (groupByFiltersData?.payload) {
+			// Update dropdown options
+			setGroupByOptions(
+				groupByFiltersData?.payload?.attributeKeys?.map((filter) => ({
+					value: filter.key,
+					label: filter.key,
+				})) || [],
+			);
+
+			// Cache all available options to preserve selected values using functional update
+			setAllAvailableGroupByOptions((prevOptions) => {
+				const newOptions = { ...prevOptions };
+				groupByFiltersData?.payload?.attributeKeys?.forEach((filter) => {
+					newOptions[filter.key] = filter;
+				});
+				return newOptions;
+			});
+		}
+	}, [groupByFiltersData]); // Only depends on groupByFiltersData now
+
+	// Cache existing selected options on component mount
+	useEffect(() => {
+		if (groupBy && groupBy.length > 0) {
+			setAllAvailableGroupByOptions((prevOptions) => {
+				const newOptions = { ...prevOptions };
+				groupBy.forEach((option) => {
+					newOptions[option.key] = option;
+				});
+				return newOptions;
+			});
+		}
+	}, [groupBy]);
+
 	const onRowClick = useCallback(
 		(props: any): void => {
 			setSelectedEndPointName(props[SPAN_ATTRIBUTES.URL_PATH] as string);
@@ -172,6 +211,14 @@ function AllEndPoints({
 				items: initialItems,
 				op: 'AND',
 			});
+			setParams({
+				selectedEndPointName: props[SPAN_ATTRIBUTES.URL_PATH] as string,
+				selectedView: VIEWS.ENDPOINT_STATS,
+				endPointDetailsLocalFilters: {
+					items: initialItems,
+					op: 'AND',
+				},
+			});
 		},
 		[
 			filters,
@@ -179,6 +226,7 @@ function AllEndPoints({
 			setSelectedEndPointName,
 			setSelectedView,
 			groupBy,
+			setParams,
 		],
 	);
 

frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/DomainDetails.tsx

@@ -11,12 +11,13 @@ import {
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import GetMinMax from 'lib/getMinMax';
 import { ArrowDown, ArrowUp, X } from 'lucide-react';
-import { useCallback, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { AppState } from 'store/reducers';
 import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
 import { GlobalReducer } from 'types/reducer/globalTime';
 
+import { useApiMonitoringParams } from '../../../queryParams';
 import AllEndPoints from './AllEndPoints';
 import DomainMetrics from './components/DomainMetrics';
 import { VIEW_TYPES, VIEWS } from './constants';
@@ -40,8 +41,13 @@ function DomainDetails({
 	domainListLength: number;
 	domainListFilters: IBuilderQuery['filters'];
 }): JSX.Element {
-	const [selectedView, setSelectedView] = useState<VIEWS>(VIEWS.ALL_ENDPOINTS);
-	const [selectedEndPointName, setSelectedEndPointName] = useState<string>('');
+	const [params, setParams] = useApiMonitoringParams();
+	const [selectedView, setSelectedView] = useState<VIEWS>(
+		(params.selectedView as VIEWS) || VIEWS.ALL_ENDPOINTS,
+	);
+	const [selectedEndPointName, setSelectedEndPointName] = useState<string>(
+		params.selectedEndPointName || '',
+	);
 	const [endPointsGroupBy, setEndPointsGroupBy] = useState<
 		IBuilderQuery['groupBy']
 	>([]);
@@ -52,8 +58,27 @@ function DomainDetails({
 
 	const handleTabChange = (e: RadioChangeEvent): void => {
 		setSelectedView(e.target.value);
+		setParams({ selectedView: e.target.value });
 	};
 
+	const handleEndPointChange = (name: string): void => {
+		setSelectedEndPointName(name);
+		setParams({ selectedEndPointName: name });
+	};
+
+	useEffect(() => {
+		if (params.selectedView && params.selectedView !== selectedView) {
+			setSelectedView(params.selectedView as VIEWS);
+		}
+		if (
+			params.selectedEndPointName !== undefined &&
+			params.selectedEndPointName !== selectedEndPointName
+		) {
+			setSelectedEndPointName(params.selectedEndPointName);
+		}
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [params.selectedView, params.selectedEndPointName]);
+
 	const { maxTime, minTime, selectedTime } = useSelector<
 		AppState,
 		GlobalReducer
@@ -67,34 +92,62 @@ function DomainDetails({
 	]);
 
 	const [selectedInterval, setSelectedInterval] = useState<Time>(
-		selectedTime as Time,
+		(params.selectedInterval as Time) || (selectedTime as Time),
 	);
 
-	const [modalTimeRange, setModalTimeRange] = useState(() => ({
-		startTime: startMs,
-		endTime: endMs,
-	}));
+	// Sync params to local selectedInterval state on param change
+	useEffect(() => {
+		if (params.selectedInterval && params.selectedInterval !== selectedInterval) {
+			setSelectedInterval(params.selectedInterval as Time);
+		}
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [params.selectedInterval]);
+
+	const [modalTimeRange, setModalTimeRange] = useState(() => {
+		if (params.modalTimeRange) {
+			return params.modalTimeRange;
+		}
+		return {
+			startTime: startMs,
+			endTime: endMs,
+		};
+	});
+
+	// Sync params to local modalTimeRange state on param change
+	useEffect(() => {
+		if (
+			params.modalTimeRange &&
+			JSON.stringify(params.modalTimeRange) !== JSON.stringify(modalTimeRange)
+		) {
+			setModalTimeRange(params.modalTimeRange);
+		}
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [params.modalTimeRange]);
 
 	const handleTimeChange = useCallback(
 		(interval: Time | CustomTimeType, dateTimeRange?: [number, number]): void => {
 			setSelectedInterval(interval as Time);
+			setParams({ selectedInterval: interval as string });
 
 			if (interval === 'custom' && dateTimeRange) {
-				setModalTimeRange({
+				const newRange = {
 					startTime: Math.floor(dateTimeRange[0] / 1000),
 					endTime: Math.floor(dateTimeRange[1] / 1000),
-				});
+				};
+				setModalTimeRange(newRange);
+				setParams({ modalTimeRange: newRange });
 			} else {
 				const { maxTime, minTime } = GetMinMax(interval);
 
-				setModalTimeRange({
+				const newRange = {
 					startTime: Math.floor(minTime / TimeRangeOffset),
 					endTime: Math.floor(maxTime / TimeRangeOffset),
-				});
+				};
+				setModalTimeRange(newRange);
+				setParams({ modalTimeRange: newRange });
 			}
 		},
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-		[],
+		[setParams],
 	);
 
 	return (
@@ -174,7 +227,6 @@ function DomainDetails({
 						>
 							<Radio.Button
 								className={
-									// eslint-disable-next-line sonarjs/no-duplicate-string
 									selectedView === VIEW_TYPES.ALL_ENDPOINTS ? 'selected_view tab' : 'tab'
 								}
 								value={VIEW_TYPES.ALL_ENDPOINTS}
@@ -204,7 +256,7 @@ function DomainDetails({
 					{selectedView === VIEW_TYPES.ALL_ENDPOINTS && (
 						<AllEndPoints
 							domainName={domainData.domainName}
-							setSelectedEndPointName={setSelectedEndPointName}
+							setSelectedEndPointName={handleEndPointChange}
 							setSelectedView={setSelectedView}
 							groupBy={endPointsGroupBy}
 							setGroupBy={setEndPointsGroupBy}
@@ -218,7 +270,7 @@ function DomainDetails({
 						<EndPointDetails
 							domainName={domainData.domainName}
 							endPointName={selectedEndPointName}
-							setSelectedEndPointName={setSelectedEndPointName}
+							setSelectedEndPointName={handleEndPointChange}
 							initialFilters={initialFiltersEndPointStats}
 							timeRange={modalTimeRange}
 							handleTimeChange={handleTimeChange}

frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/EndPointDetails.tsx

@@ -1,5 +1,6 @@
 import { ENTITY_VERSION_V4 } from 'constants/app';
 import { initialQueriesMap } from 'constants/queryBuilder';
+import { useApiMonitoringParams } from 'container/ApiMonitoring/queryParams';
 import {
 	END_POINT_DETAILS_QUERY_KEYS_ARRAY,
 	extractPortAndEndpoint,
@@ -59,13 +60,16 @@ function EndPointDetails({
 	) => void;
 }): JSX.Element {
 	const { startTime: minTime, endTime: maxTime } = timeRange;
+	const [params, setParams] = useApiMonitoringParams();
 
 	const currentQuery = initialQueriesMap[DataSource.TRACES];
 
 	// Local state for filters, combining endpoint filter and search filters
 	const [filters, setFilters] = useState<IBuilderQuery['filters']>(() => {
 		// Initialize filters based on the initial endPointName prop
-		const initialItems = [...initialFilters.items];
+		const initialItems = params.endPointDetailsLocalFilters
+			? [...params.endPointDetailsLocalFilters.items]
+			: [...initialFilters.items];
 		if (endPointName) {
 			initialItems.push({
 				id: '92b8a1c1',
@@ -107,11 +111,26 @@ function EndPointDetails({
 		});
 	}, [endPointName]);
 
+	// Separate effect to update params when filters change
+	useEffect(() => {
+		const filtersWithoutHttpUrl = {
+			op: 'AND',
+			items: filters.items.filter((item) => item.key?.key !== httpUrlKey.key),
+		};
+		setParams({ endPointDetailsLocalFilters: filtersWithoutHttpUrl });
+	}, [filters, setParams]);
+
 	// Handler for changes from the QueryBuilderSearchV2 component
 	const handleFilterChange = useCallback(
 		(newFilters: IBuilderQuery['filters']): void => {
 			// 1. Update local filters state immediately
 			setFilters(newFilters);
+			// Filter out http.url filter before saving to params
+			const filteredNewFilters = {
+				op: 'AND',
+				items: newFilters.items.filter((item) => item.key?.key !== httpUrlKey.key),
+			};
+			setParams({ endPointDetailsLocalFilters: filteredNewFilters });
 
 			// 2. Derive the endpoint name from the *new* filters state
 			const httpUrlFilter = newFilters.items.find(
@@ -126,7 +145,7 @@ function EndPointDetails({
 				setSelectedEndPointName(derivedEndPointName);
 			}
 		},
-		[endPointName, setSelectedEndPointName], // Dependencies for the callback
+		[endPointName, setSelectedEndPointName, setParams], // Dependencies for the callback
 	);
 
 	const updatedCurrentQuery = useMemo(

frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/TopErrors.tsx

@@ -215,7 +215,9 @@ function TopErrors({
 										/>
 
 										<Typography.Text className="no-filtered-endpoints-message">
-											This query had no results. Edit your query and try again!
+											{showStatusCodeErrors
+												? 'Please disable "Status Message Exists" toggle to see all errors'
+												: 'This query had no results. Edit your query and try again!'}
 										</Typography.Text>
 									</div>
 								</div>

frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/components/MetricOverTimeGraph.tsx

@@ -21,6 +21,7 @@ function MetricOverTimeGraph({
 						onDragSelect={onDragSelect}
 						customOnDragSelect={(): void => {}}
 						customTimeRange={timeRange}
+						customTimeRangeWindowForCoRelation="5m"
 					/>
 				</div>
 			</Card>

frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/components/StatusCodeBarCharts.tsx

@@ -19,6 +19,7 @@ import { useResizeObserver } from 'hooks/useDimensions';
 import { useNotifications } from 'hooks/useNotifications';
 import { getUPlotChartOptions } from 'lib/uPlotLib/getUplotChartOptions';
 import { getUPlotChartData } from 'lib/uPlotLib/utils/getUplotChartData';
+import { getStartAndEndTimesInMilliseconds } from 'pages/MessagingQueues/MessagingQueuesUtils';
 import { useCallback, useMemo, useRef, useState } from 'react';
 import { UseQueryResult } from 'react-query';
 import { SuccessResponse } from 'types/api';
@@ -150,7 +151,12 @@ function StatusCodeBarCharts({
 			metric?: { [key: string]: string },
 			queryData?: { queryName: string; inFocusOrNot: boolean },
 		): void => {
+			const TWO_AND_HALF_MINUTES_IN_MILLISECONDS = 2.5 * 60 * 1000; // 150,000 milliseconds
 			const customFilters = getCustomFiltersForBarChart(metric);
+			const { start, end } = getStartAndEndTimesInMilliseconds(
+				xValue,
+				TWO_AND_HALF_MINUTES_IN_MILLISECONDS,
+			);
 			handleGraphClick({
 				xValue,
 				yValue,
@@ -164,6 +170,10 @@ function StatusCodeBarCharts({
 				notifications,
 				graphClick,
 				customFilters,
+				customTracesTimeRange: {
+					start,
+					end,
+				},
 			});
 		},
 		[

frontend/src/container/ApiMonitoring/Explorer/Domains/DomainList.tsx

@@ -16,7 +16,7 @@ import { useGetCompositeQueryParam } from 'hooks/queryBuilder/useGetCompositeQue
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useQueryOperations } from 'hooks/queryBuilder/useQueryBuilderOperations';
 import { useShareBuilderUrl } from 'hooks/queryBuilder/useShareBuilderUrl';
-import { useCallback, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useQuery } from 'react-query';
 import { useSelector } from 'react-redux';
 import { AppState } from 'store/reducers';
@@ -25,6 +25,7 @@ import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
 import { DataSource } from 'types/common/queryBuilder';
 import { GlobalReducer } from 'types/reducer/globalTime';
 
+import { DEFAULT_PARAMS, useApiMonitoringParams } from '../../queryParams';
 import {
 	columnsConfig,
 	formatDataForTable,
@@ -32,7 +33,9 @@ import {
 } from '../../utils';
 import DomainDetails from './DomainDetails/DomainDetails';
 
-function DomainList({ showIP }: { showIP: boolean }): JSX.Element {
+function DomainList(): JSX.Element {
+	const [params, setParams] = useApiMonitoringParams();
+	const { showIP, selectedDomain } = params;
 	const [selectedDomainIndex, setSelectedDomainIndex] = useState<number>(-1);
 	const { maxTime, minTime } = useSelector<AppState, GlobalReducer>(
 		(state) => state.globalTime,
@@ -129,6 +132,16 @@ function DomainList({ showIP }: { showIP: boolean }): JSX.Element {
 		[data],
 	);
 
+	// Open drawer if selectedDomain is set in URL
+	useEffect(() => {
+		if (selectedDomain && formattedDataForTable?.length > 0) {
+			const idx = formattedDataForTable.findIndex(
+				(item) => item.domainName === selectedDomain,
+			);
+			setSelectedDomainIndex(idx);
+		}
+	}, [selectedDomain, formattedDataForTable]);
+
 	return (
 		<section className={cx('api-module-right-section')}>
 			<Toolbar
@@ -179,6 +192,7 @@ function DomainList({ showIP }: { showIP: boolean }): JSX.Element {
 								(item) => item.key === record.key,
 							);
 							setSelectedDomainIndex(dataIndex);
+							setParams({ selectedDomain: record.domainName });
 							logEvent('API Monitoring: Domain name row clicked', {});
 						}
 					},
@@ -196,6 +210,7 @@ function DomainList({ showIP }: { showIP: boolean }): JSX.Element {
 					domainListLength={formattedDataForTable.length}
 					handleClose={(): void => {
 						setSelectedDomainIndex(-1);
+						setParams(DEFAULT_PARAMS);
 					}}
 					domainListFilters={query?.filters}
 				/>

frontend/src/container/ApiMonitoring/Explorer/Explorer.tsx

@@ -8,13 +8,15 @@ import cx from 'classnames';
 import QuickFilters from 'components/QuickFilters/QuickFilters';
 import { QuickFiltersSource } from 'components/QuickFilters/types';
 import ErrorBoundaryFallback from 'pages/ErrorBoundaryFallback/ErrorBoundaryFallback';
-import { useEffect, useState } from 'react';
+import { useEffect } from 'react';
 
+import { useApiMonitoringParams } from '../queryParams';
 import { ApiMonitoringQuickFiltersConfig } from '../utils';
 import DomainList from './Domains/DomainList';
 
 function Explorer(): JSX.Element {
-	const [showIP, setShowIP] = useState<boolean>(true);
+	const [params, setParams] = useApiMonitoringParams();
+	const showIP = params.showIP ?? true;
 
 	useEffect(() => {
 		logEvent('API Monitoring: Landing page visited', {});
@@ -34,14 +36,12 @@ function Explorer(): JSX.Element {
 						<Switch
 							size="small"
 							style={{ marginLeft: 'auto' }}
-							checked={showIP}
+							checked={showIP ?? true}
 							onClick={(): void => {
-								setShowIP((showIP): boolean => {
-									logEvent('API Monitoring: Show IP addresses clicked', {
-										showIP: !showIP,
-									});
-									return !showIP;
+								logEvent('API Monitoring: Show IP addresses clicked', {
+									showIP: !(showIP ?? true),
 								});
+								setParams({ showIP });
 							}}
 						/>
 					</div>
@@ -52,7 +52,7 @@ function Explorer(): JSX.Element {
 						handleFilterVisibilityChange={(): void => {}}
 					/>
 				</section>
-				<DomainList showIP={showIP} />
+				<DomainList />
 			</div>
 		</Sentry.ErrorBoundary>
 	);

frontend/src/container/ApiMonitoring/__tests__/AllEndPoints.test.tsx

@@ -79,6 +79,24 @@ jest.mock('antd', () => {
 	};
 });
 
+// Mock useApiMonitoringParams hook
+jest.mock('container/ApiMonitoring/queryParams', () => ({
+	useApiMonitoringParams: jest.fn().mockReturnValue([
+		{
+			showIP: true,
+			selectedDomain: '',
+			selectedView: 'all_endpoints',
+			selectedEndPointName: '',
+			groupBy: [],
+			allEndpointsLocalFilters: undefined,
+			endPointDetailsLocalFilters: undefined,
+			modalTimeRange: undefined,
+			selectedInterval: undefined,
+		},
+		jest.fn(),
+	]),
+}));
+
 describe('AllEndPoints', () => {
 	const mockProps = {
 		domainName: 'test-domain',

frontend/src/container/ApiMonitoring/__tests__/EndPointDetails.test.tsx

@@ -25,6 +25,24 @@ jest.mock('react-query', () => ({
 	useQueries: jest.fn(),
 }));
 
+// Mock useApiMonitoringParams hook
+jest.mock('container/ApiMonitoring/queryParams', () => ({
+	useApiMonitoringParams: jest.fn().mockReturnValue([
+		{
+			showIP: true,
+			selectedDomain: '',
+			selectedView: 'all_endpoints',
+			selectedEndPointName: '',
+			groupBy: [],
+			allEndpointsLocalFilters: undefined,
+			endPointDetailsLocalFilters: undefined,
+			modalTimeRange: undefined,
+			selectedInterval: undefined,
+		},
+		jest.fn(),
+	]),
+}));
+
 jest.mock('container/ApiMonitoring/utils', () => ({
 	END_POINT_DETAILS_QUERY_KEYS_ARRAY: [
 		'endPointMetricsData',

frontend/src/container/ApiMonitoring/__tests__/queryParams.test.tsx

@@ -0,0 +1,276 @@
+/* eslint-disable sonarjs/no-duplicate-string */
+import {
+	ApiMonitoringParams,
+	DEFAULT_PARAMS,
+	getApiMonitoringParams,
+	setApiMonitoringParams,
+} from 'container/ApiMonitoring/queryParams';
+
+// Mock react-router-dom hooks
+jest.mock('react-router-dom', () => {
+	const originalModule = jest.requireActual('react-router-dom');
+	return {
+		...originalModule,
+		useLocation: jest.fn(),
+		useHistory: jest.fn(),
+	};
+});
+
+describe('API Monitoring Query Params', () => {
+	describe('getApiMonitoringParams', () => {
+		it('returns default params when no query param exists', () => {
+			const search = '';
+			expect(getApiMonitoringParams(search)).toEqual(DEFAULT_PARAMS);
+		});
+
+		it('parses URL query params correctly', () => {
+			const mockParams: Partial<ApiMonitoringParams> = {
+				showIP: false,
+				selectedDomain: 'test-domain',
+				selectedView: 'test-view',
+				selectedEndPointName: '/api/test',
+			};
+
+			// Create a URL search string with encoded params
+			const urlParams = new URLSearchParams();
+			urlParams.set(
+				'apiMonitoringParams',
+				encodeURIComponent(JSON.stringify(mockParams)),
+			);
+			const search = `?${urlParams.toString()}`;
+
+			const result = getApiMonitoringParams(search);
+
+			// Only check specific properties that we set, not all DEFAULT_PARAMS
+			expect(result.showIP).toBe(mockParams.showIP);
+			expect(result.selectedDomain).toBe(mockParams.selectedDomain);
+			expect(result.selectedView).toBe(mockParams.selectedView);
+			expect(result.selectedEndPointName).toBe(mockParams.selectedEndPointName);
+		});
+
+		it('returns default params when parsing fails', () => {
+			const urlParams = new URLSearchParams();
+			urlParams.set('apiMonitoringParams', 'invalid-json');
+			const search = `?${urlParams.toString()}`;
+
+			expect(getApiMonitoringParams(search)).toEqual(DEFAULT_PARAMS);
+		});
+	});
+
+	describe('setApiMonitoringParams', () => {
+		it('updates URL with new params (push mode)', () => {
+			const history = {
+				push: jest.fn(),
+				replace: jest.fn(),
+			};
+			const search = '';
+			const newParams: Partial<ApiMonitoringParams> = {
+				showIP: false,
+				selectedDomain: 'updated-domain',
+			};
+
+			setApiMonitoringParams(newParams, search, history as any, false);
+
+			expect(history.push).toHaveBeenCalledWith({
+				search: expect.stringContaining('apiMonitoringParams'),
+			});
+			expect(history.replace).not.toHaveBeenCalled();
+
+			// Verify that the search string contains the expected encoded params
+			const searchArg = history.push.mock.calls[0][0].search;
+			const params = new URLSearchParams(searchArg);
+			const decoded = JSON.parse(
+				decodeURIComponent(params.get('apiMonitoringParams') || ''),
+			);
+
+			// Test only the specific fields we set
+			expect(decoded.showIP).toBe(newParams.showIP);
+			expect(decoded.selectedDomain).toBe(newParams.selectedDomain);
+		});
+
+		it('updates URL with new params (replace mode)', () => {
+			const history = {
+				push: jest.fn(),
+				replace: jest.fn(),
+			};
+			const search = '';
+			const newParams: Partial<ApiMonitoringParams> = {
+				showIP: false,
+				selectedDomain: 'updated-domain',
+			};
+
+			setApiMonitoringParams(newParams, search, history as any, true);
+
+			expect(history.replace).toHaveBeenCalledWith({
+				search: expect.stringContaining('apiMonitoringParams'),
+			});
+			expect(history.push).not.toHaveBeenCalled();
+		});
+
+		it('merges new params with existing params', () => {
+			const history = {
+				push: jest.fn(),
+				replace: jest.fn(),
+			};
+
+			// Start with some existing params
+			const existingParams: Partial<ApiMonitoringParams> = {
+				showIP: true,
+				selectedDomain: 'domain-1',
+				selectedView: 'view-1',
+			};
+
+			const urlParams = new URLSearchParams();
+			urlParams.set(
+				'apiMonitoringParams',
+				encodeURIComponent(JSON.stringify(existingParams)),
+			);
+			const search = `?${urlParams.toString()}`;
+
+			// Add some new params
+			const newParams: Partial<ApiMonitoringParams> = {
+				selectedDomain: 'domain-2',
+				selectedEndPointName: '/api/test',
+			};
+
+			setApiMonitoringParams(newParams, search, history as any, false);
+
+			// Verify merged params
+			const searchArg = history.push.mock.calls[0][0].search;
+			const params = new URLSearchParams(searchArg);
+			const decoded = JSON.parse(
+				decodeURIComponent(params.get('apiMonitoringParams') || ''),
+			);
+
+			// Test only the specific fields
+			expect(decoded.showIP).toBe(existingParams.showIP);
+			expect(decoded.selectedView).toBe(existingParams.selectedView);
+			expect(decoded.selectedDomain).toBe(newParams.selectedDomain); // This should be overwritten
+			expect(decoded.selectedEndPointName).toBe(newParams.selectedEndPointName);
+		});
+	});
+
+	describe('useApiMonitoringParams hook without calling hook directly', () => {
+		// Instead of using the hook directly, We are testing the individual functions that make up the hook
+		// as the original hook contains react core hooks
+		const mockUseLocationAndHistory = (initialSearch = ''): any => {
+			// Create mock location object
+			const location = {
+				search: initialSearch,
+				pathname: '/some-path',
+				hash: '',
+				state: null,
+			};
+
+			// Create mock history object
+			const history = {
+				push: jest.fn((args) => {
+					// Simulate updating the location search
+					location.search = args.search;
+				}),
+				replace: jest.fn((args) => {
+					location.search = args.search;
+				}),
+				length: 1,
+				location,
+			};
+
+			// Set up mocks for useLocation and useHistory
+			const useLocationMock = jest.requireMock('react-router-dom').useLocation;
+			const useHistoryMock = jest.requireMock('react-router-dom').useHistory;
+
+			useLocationMock.mockReturnValue(location);
+			useHistoryMock.mockReturnValue(history);
+
+			return { location, history };
+		};
+
+		it('retrieves URL params correctly from location', () => {
+			const testParams: Partial<ApiMonitoringParams> = {
+				showIP: false,
+				selectedDomain: 'test-domain',
+				selectedView: 'custom-view',
+			};
+
+			const urlParams = new URLSearchParams();
+			urlParams.set(
+				'apiMonitoringParams',
+				encodeURIComponent(JSON.stringify(testParams)),
+			);
+			const search = `?${urlParams.toString()}`;
+
+			const result = getApiMonitoringParams(search);
+
+			// Test only specific fields
+			expect(result.showIP).toBe(testParams.showIP);
+			expect(result.selectedDomain).toBe(testParams.selectedDomain);
+			expect(result.selectedView).toBe(testParams.selectedView);
+		});
+
+		it('updates URL correctly with new params', () => {
+			const { location, history } = mockUseLocationAndHistory();
+
+			const newParams: Partial<ApiMonitoringParams> = {
+				selectedDomain: 'new-domain',
+				showIP: false,
+			};
+
+			// Manually execute the core logic of the hook's setParams function
+			setApiMonitoringParams(newParams, location.search, history as any);
+
+			expect(history.push).toHaveBeenCalledWith({
+				search: expect.stringContaining('apiMonitoringParams'),
+			});
+
+			const searchArg = history.push.mock.calls[0][0].search;
+			const params = new URLSearchParams(searchArg);
+			const decoded = JSON.parse(
+				decodeURIComponent(params.get('apiMonitoringParams') || ''),
+			);
+
+			// Test only specific fields
+			expect(decoded.selectedDomain).toBe(newParams.selectedDomain);
+			expect(decoded.showIP).toBe(newParams.showIP);
+		});
+
+		it('preserves existing params when updating', () => {
+			// Create a search string with existing params
+			const initialParams: Partial<ApiMonitoringParams> = {
+				showIP: false,
+				selectedDomain: 'initial-domain',
+			};
+
+			const urlParams = new URLSearchParams();
+			urlParams.set(
+				'apiMonitoringParams',
+				encodeURIComponent(JSON.stringify(initialParams)),
+			);
+			const initialSearch = `?${urlParams.toString()}`;
+
+			// Set up mocks
+			const { location, history } = mockUseLocationAndHistory(initialSearch);
+
+			// Manually execute the core logic
+			setApiMonitoringParams(
+				{ selectedView: 'new-view' },
+				location.search,
+				history as any,
+			);
+
+			// Verify history was updated
+			expect(history.push).toHaveBeenCalled();
+
+			// Parse the new query params from the URL
+			const searchArg = history.push.mock.calls[0][0].search;
+			const params = new URLSearchParams(searchArg);
+			const decoded = JSON.parse(
+				decodeURIComponent(params.get('apiMonitoringParams') || ''),
+			);
+
+			// Test only specific fields
+			expect(decoded.showIP).toBe(initialParams.showIP);
+			expect(decoded.selectedDomain).toBe(initialParams.selectedDomain);
+			expect(decoded.selectedView).toBe('new-view');
+		});
+	});
+});

frontend/src/container/ApiMonitoring/queryParams.ts

@@ -0,0 +1,88 @@
+import { useCallback } from 'react';
+import { useHistory, useLocation } from 'react-router-dom';
+
+// --- Types for all API Monitoring query params ---
+export interface ApiMonitoringParams {
+	showIP?: boolean;
+	selectedDomain?: string;
+	selectedView?: string;
+	selectedEndPointName?: string;
+	groupBy?: string[];
+	allEndpointsLocalFilters?: any;
+	endPointDetailsLocalFilters?: any;
+	modalTimeRange?: { startTime: number; endTime: number };
+	selectedInterval?: string;
+	// Add more params as needed
+}
+
+export const DEFAULT_PARAMS: ApiMonitoringParams = {
+	showIP: true,
+	selectedDomain: '',
+	selectedView: 'all_endpoints',
+	selectedEndPointName: '',
+	groupBy: [],
+	allEndpointsLocalFilters: undefined,
+	endPointDetailsLocalFilters: undefined,
+	modalTimeRange: undefined,
+	selectedInterval: undefined,
+};
+
+const PARAM_KEY = 'apiMonitoringParams';
+
+// --- Parse and serialize helpers ---
+function encodeParams(params: ApiMonitoringParams): string {
+	return encodeURIComponent(JSON.stringify(params));
+}
+
+function decodeParams(value: string | null): ApiMonitoringParams {
+	if (!value) return DEFAULT_PARAMS;
+	try {
+		return JSON.parse(decodeURIComponent(value));
+	} catch {
+		return DEFAULT_PARAMS;
+	}
+}
+
+// --- Read query params from URL ---
+export function getApiMonitoringParams(search: string): ApiMonitoringParams {
+	const params = new URLSearchParams(search);
+	return decodeParams(params.get(PARAM_KEY));
+}
+
+// --- Set query params in URL (replace or push) ---
+export function setApiMonitoringParams(
+	newParams: Partial<ApiMonitoringParams>,
+	search: string,
+	history: ReturnType<typeof useHistory>,
+	replace = false,
+): void {
+	const urlParams = new URLSearchParams(search);
+	const current = decodeParams(urlParams.get(PARAM_KEY));
+	const merged = { ...current, ...newParams };
+	urlParams.set(PARAM_KEY, encodeParams(merged));
+	const newSearch = `?${urlParams.toString()}`;
+	if (replace) {
+		history.replace({ search: newSearch });
+	} else {
+		history.push({ search: newSearch });
+	}
+}
+
+// --- React hook to use query params in a component ---
+export function useApiMonitoringParams(): [
+	ApiMonitoringParams,
+	(newParams: Partial<ApiMonitoringParams>, replace?: boolean) => void,
+] {
+	const location = useLocation();
+	const history = useHistory();
+	const params = getApiMonitoringParams(location.search);
+
+	const setParams = useCallback(
+		(newParams: Partial<ApiMonitoringParams>, replace = false) => {
+			setApiMonitoringParams(newParams, location.search, history, replace);
+		},
+		[location.search, history],
+	);
+
+	return [params, setParams];
+}

frontend/src/container/ApiMonitoring/utils.tsx

@@ -3796,9 +3796,9 @@ export const getRateOverTimeWidgetData = (
 ): Widgets => {
 	let legend = domainName;
 	if (endPointName) {
-		const { endpoint, port } = extractPortAndEndpoint(endPointName);
+		const { endpoint } = extractPortAndEndpoint(endPointName);
 		// eslint-disable-next-line sonarjs/no-nested-template-literals
-		legend = `${port !== '-' && port !== 'n/a' ? `${port}:` : ''}${endpoint}`;
+		legend = `${endpoint}`;
 	}
 
 	return getWidgetQueryBuilder(
@@ -3861,9 +3861,9 @@ export const getLatencyOverTimeWidgetData = (
 ): Widgets => {
 	let legend = domainName;
 	if (endPointName) {
-		const { endpoint, port } = extractPortAndEndpoint(endPointName);
+		const { endpoint } = extractPortAndEndpoint(endPointName);
 		// eslint-disable-next-line sonarjs/no-nested-template-literals
-		legend = `${port !== '-' && port !== 'n/a' ? `${port}:` : ''}${endpoint}`;
+		legend = `${endpoint}`;
 	}
 
 	return getWidgetQueryBuilder(

frontend/src/container/CloudIntegrationPage/CloudIntegrationPage.tsx

@@ -1,3 +1,8 @@
+import {
+	IntegrationType,
+	RequestIntegrationBtn,
+} from 'pages/Integrations/RequestIntegrationBtn';
+
 import Header from './Header/Header';
 import HeroSection from './HeroSection/HeroSection';
 import ServicesTabs from './ServicesSection/ServicesTabs';
@@ -7,6 +12,10 @@ function CloudIntegrationPage(): JSX.Element {
 		<div>
 			<Header />
 			<HeroSection />
+			<RequestIntegrationBtn
+				type={IntegrationType.AWS_SERVICES}
+				message="Cannot find the AWS service you're looking for? Request more integrations"
+			/>
 			<ServicesTabs />
 		</div>
 	);

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

@@ -33,13 +33,16 @@
 		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% */
+		line-height: 10px;
 		letter-spacing: 0.12px;
 		width: 113px;
 		height: 32px;
 		cursor: pointer;
+		&,
+		&:hover {
+			color: var(--bg-vanilla-400);
+		}
 	}
 }
 

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

@@ -33,10 +33,15 @@ function Header(): JSX.Element {
 				/>
 			</div>
 			<div className="cloud-header__actions">
-				<button className="cloud-header__help" type="button">
+				<a
+					href="https://signoz.io/blog/native-aws-integrations-with-autodiscovery/"
+					target="_blank"
+					rel="noopener noreferrer"
+					className="cloud-header__help"
+				>
 					<LifeBuoy size={12} />
 					Get Help
-				</button>
+				</a>
 			</div>
 		</div>
 	);

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

@@ -58,6 +58,23 @@ function AccountSettingsModal({
 		});
 	};
 
+	const handleRegionDeselect = useCallback(
+		(item: string): void => {
+			if (selectedRegions.includes(item)) {
+				setSelectedRegions(selectedRegions.filter((region) => region !== item));
+				if (includeAllRegions) {
+					setIncludeAllRegions(false);
+				}
+			}
+		},
+		[
+			selectedRegions,
+			includeAllRegions,
+			setSelectedRegions,
+			setIncludeAllRegions,
+		],
+	);
+
 	const renderRegionSelector = useCallback(() => {
 		if (isRegionSelectOpen) {
 			return (
@@ -93,17 +110,19 @@ function AccountSettingsModal({
 					maxTagCount={3}
 					value={getRegionPreviewText(selectedRegions)}
 					open={false}
+					onDeselect={handleRegionDeselect}
 				/>
 			</>
 		);
 	}, [
 		isRegionSelectOpen,
-		selectedRegions,
 		includeAllRegions,
 		handleIncludeAllRegionsChange,
-		setIsRegionSelectOpen,
+		selectedRegions,
+		handleRegionDeselect,
 		setSelectedRegions,
 		setIncludeAllRegions,
+		setIsRegionSelectOpen,
 	]);
 
 	const renderAccountDetails = useCallback(

frontend/src/container/CloudIntegrationPage/ServicesSection/ConfigureServiceModal.tsx

@@ -8,12 +8,14 @@ import {
 	SupportedSignals,
 } from 'container/CloudIntegrationPage/ServicesSection/types';
 import { useUpdateServiceConfig } from 'hooks/integration/aws/useUpdateServiceConfig';
+import { isEqual } from 'lodash-es';
 import { useCallback, useMemo, useState } from 'react';
 import { useQueryClient } from 'react-query';
 
 import logEvent from '../../../api/common/logEvent';
+import S3BucketsSelector from './S3BucketsSelector';
 
-interface IConfigureServiceModalProps {
+export interface IConfigureServiceModalProps {
 	isOpen: boolean;
 	onClose: () => void;
 	serviceName: string;
@@ -36,18 +38,34 @@ function ConfigureServiceModal({
 	const [isLoading, setIsLoading] = useState(false);
 
 	// Track current form values
-	const initialValues = {
-		metrics: initialConfig?.metrics?.enabled || false,
-		logs: initialConfig?.logs?.enabled || false,
-	};
+	const initialValues = useMemo(
+		() => ({
+			metrics: initialConfig?.metrics?.enabled || false,
+			logs: initialConfig?.logs?.enabled || false,
+			s3Buckets: initialConfig?.logs?.s3_buckets || {},
+		}),
+		[initialConfig],
+	);
 	const [currentValues, setCurrentValues] = useState(initialValues);
 
 	const isSaveDisabled = useMemo(
 		() =>
 			// disable only if current values are same as the initial config
 			currentValues.metrics === initialValues.metrics &&
-			currentValues.logs === initialValues.logs,
-		[currentValues, initialValues.metrics, initialValues.logs],
+			currentValues.logs === initialValues.logs &&
+			isEqual(currentValues.s3Buckets, initialValues.s3Buckets),
+		[currentValues, initialValues],
+	);
+
+	const handleS3BucketsChange = useCallback(
+		(bucketsByRegion: Record<string, string[]>) => {
+			setCurrentValues((prev) => ({
+				...prev,
+				s3Buckets: bucketsByRegion,
+			}));
+			form.setFieldsValue({ s3Buckets: bucketsByRegion });
+		},
+		[form],
 	);
 
 	const {
@@ -70,6 +88,7 @@ function ConfigureServiceModal({
 						config: {
 							logs: {
 								enabled: values.logs,
+								s3_buckets: values.s3Buckets,
 							},
 							metrics: {
 								enabled: values.metrics,
@@ -144,6 +163,7 @@ function ConfigureServiceModal({
 				initialValues={{
 					metrics: initialConfig?.metrics?.enabled || false,
 					logs: initialConfig?.logs?.enabled || false,
+					s3Buckets: initialConfig?.logs?.s3_buckets || {},
 				}}
 			>
 				<div className=" configure-service-modal__body">
@@ -174,27 +194,38 @@ function ConfigureServiceModal({
 					)}
 
 					{supportedSignals.logs && (
-						<Form.Item
-							name="logs"
-							valuePropName="checked"
-							className="configure-service-modal__body-form-item"
-						>
-							<div className="configure-service-modal__body-regions-switch-switch">
-								<Switch
-									checked={currentValues.logs}
-									onChange={(checked): void => {
-										setCurrentValues((prev) => ({ ...prev, logs: checked }));
-										form.setFieldsValue({ logs: checked });
-									}}
-								/>
-								<span className="configure-service-modal__body-regions-switch-switch-label">
-									Log Collection
-								</span>
-							</div>
-							<div className="configure-service-modal__body-switch-description">
-								To ingest logs from your AWS services, you must complete several steps
-							</div>
-						</Form.Item>
+						<>
+							<Form.Item
+								name="logs"
+								valuePropName="checked"
+								className="configure-service-modal__body-form-item"
+							>
+								<div className="configure-service-modal__body-regions-switch-switch">
+									<Switch
+										checked={currentValues.logs}
+										onChange={(checked): void => {
+											setCurrentValues((prev) => ({ ...prev, logs: checked }));
+											form.setFieldsValue({ logs: checked });
+										}}
+									/>
+									<span className="configure-service-modal__body-regions-switch-switch-label">
+										Log Collection
+									</span>
+								</div>
+								<div className="configure-service-modal__body-switch-description">
+									To ingest logs from your AWS services, you must complete several steps
+								</div>
+							</Form.Item>
+
+							{currentValues.logs && serviceId === 's3sync' && (
+								<Form.Item name="s3Buckets" noStyle>
+									<S3BucketsSelector
+										initialBucketsByRegion={currentValues.s3Buckets}
+										onChange={handleS3BucketsChange}
+									/>
+								</Form.Item>
+							)}
+						</>
 					)}
 				</div>
 			</Form>

frontend/src/container/CloudIntegrationPage/ServicesSection/S3BucketsSelector.tsx

@@ -0,0 +1,123 @@
+import { Form, Select, Skeleton, Typography } from 'antd';
+import { useAwsAccounts } from 'hooks/integration/aws/useAwsAccounts';
+import useUrlQuery from 'hooks/useUrlQuery';
+import { useCallback, useMemo, useState } from 'react';
+
+const { Title } = Typography;
+
+interface S3BucketsSelectorProps {
+	onChange?: (bucketsByRegion: Record<string, string[]>) => void;
+	initialBucketsByRegion?: Record<string, string[]>;
+}
+
+/**
+ * Component for selecting S3 buckets by AWS region
+ * Displays a multi-select input for each region in the active AWS account
+ */
+function S3BucketsSelector({
+	onChange,
+	initialBucketsByRegion = {},
+}: S3BucketsSelectorProps): JSX.Element {
+	const cloudAccountId = useUrlQuery().get('cloudAccountId');
+	const { data: accounts, isLoading } = useAwsAccounts();
+	const [bucketsByRegion, setBucketsByRegion] = useState<
+		Record<string, string[]>
+	>(initialBucketsByRegion);
+
+	// Find the active AWS account based on the URL query parameter
+	const activeAccount = useMemo(
+		() =>
+			accounts?.find((account) => account.cloud_account_id === cloudAccountId),
+		[accounts, cloudAccountId],
+	);
+
+	// Get all regions to display (union of account regions and initialBucketsByRegion regions)
+	const allRegions = useMemo(() => {
+		if (!activeAccount) return [];
+
+		// Get unique regions from both sources
+		const initialRegions = Object.keys(initialBucketsByRegion);
+		const accountRegions = activeAccount.config.regions;
+
+		// Create a Set to get unique values
+		const uniqueRegions = new Set([...accountRegions, ...initialRegions]);
+
+		return Array.from(uniqueRegions);
+	}, [activeAccount, initialBucketsByRegion]);
+
+	// Check if a region is disabled (not in account's regions)
+	const isRegionDisabled = useCallback(
+		(region: string) => !activeAccount?.config.regions.includes(region),
+		[activeAccount],
+	);
+
+	// Handle changes to bucket selections for a specific region
+	const handleRegionBucketsChange = useCallback(
+		(region: string, buckets: string[]): void => {
+			setBucketsByRegion((prevBuckets) => {
+				const updatedBuckets = { ...prevBuckets };
+
+				if (buckets.length === 0) {
+					// Remove empty bucket arrays
+					delete updatedBuckets[region];
+				} else {
+					updatedBuckets[region] = buckets;
+				}
+
+				// Notify parent component of changes
+				onChange?.(updatedBuckets);
+				return updatedBuckets;
+			});
+		},
+		[onChange],
+	);
+
+	// Show loading state while fetching account data
+	if (isLoading || !activeAccount) {
+		return <Skeleton active />;
+	}
+
+	return (
+		<div className="s3-buckets-selector">
+			<Title level={5}>Select S3 Buckets by Region</Title>
+
+			{allRegions.map((region) => {
+				const disabled = isRegionDisabled(region);
+
+				return (
+					<Form.Item
+						key={region}
+						label={region}
+						// eslint-disable-next-line react/jsx-props-no-spreading
+						{...(disabled && {
+							help:
+								'Region disabled in account settings; S3 buckets here will not be synced.',
+							validateStatus: 'warning',
+						})}
+					>
+						<Select
+							mode="tags"
+							placeholder={`Enter S3 bucket names for ${region}`}
+							value={bucketsByRegion[region] || []}
+							onChange={(value): void => handleRegionBucketsChange(region, value)}
+							tokenSeparators={[',']}
+							allowClear
+							disabled={disabled}
+							suffixIcon={null}
+							notFoundContent={null}
+							filterOption={false}
+							showSearch
+						/>
+					</Form.Item>
+				);
+			})}
+		</div>
+	);
+}
+
+S3BucketsSelector.defaultProps = {
+	onChange: undefined,
+	initialBucketsByRegion: undefined,
+};
+
+export default S3BucketsSelector;

frontend/src/container/CloudIntegrationPage/ServicesSection/__tests__/ConfigureServiceModalS3Sync.test.tsx

@@ -0,0 +1,162 @@
+import { act, fireEvent, screen, waitFor } from '@testing-library/react';
+import { server } from 'mocks-server/server';
+import { rest, RestRequest } from 'msw'; // Import RestRequest for req.json() typing
+
+import { UpdateServiceConfigPayload } from '../types';
+import { accountsResponse, CLOUD_ACCOUNT_ID, initialBuckets } from './mockData';
+import {
+	assertGenericModalElements,
+	assertS3SyncSpecificElements,
+	renderModal,
+} from './utils';
+
+// --- MOCKS ---
+jest.mock('hooks/useUrlQuery', () => ({
+	__esModule: true,
+	default: jest.fn(() => ({
+		get: jest.fn((paramName: string) => {
+			if (paramName === 'cloudAccountId') {
+				return CLOUD_ACCOUNT_ID;
+			}
+			return null;
+		}),
+	})),
+}));
+
+// --- TEST SUITE ---
+describe('ConfigureServiceModal for S3 Sync service', () => {
+	jest.setTimeout(10000);
+	beforeEach(() => {
+		server.use(
+			rest.get(
+				'http://localhost/api/v1/cloud-integrations/aws/accounts',
+				(req, res, ctx) => res(ctx.json(accountsResponse)),
+			),
+		);
+	});
+
+	it('should render with logs collection switch and bucket selectors (no buckets initially selected)', async () => {
+		act(() => {
+			renderModal({}); // No initial S3 buckets, defaults to 's3sync' serviceId
+		});
+		await assertGenericModalElements(); // Use new generic assertion
+		await assertS3SyncSpecificElements({}); // Use new S3-specific assertion
+	});
+
+	it('should render with logs collection switch and bucket selectors (some buckets initially selected)', async () => {
+		act(() => {
+			renderModal(initialBuckets); // Defaults to 's3sync' serviceId
+		});
+		await assertGenericModalElements(); // Use new generic assertion
+		await assertS3SyncSpecificElements(initialBuckets); // Use new S3-specific assertion
+	});
+
+	it('should enable save button after adding a new bucket via combobox', async () => {
+		act(() => {
+			renderModal(initialBuckets); // Defaults to 's3sync' serviceId
+		});
+		await assertGenericModalElements();
+		await assertS3SyncSpecificElements(initialBuckets);
+
+		expect(screen.getByRole('button', { name: /save/i })).toBeDisabled();
+
+		const targetCombobox = screen.getAllByRole('combobox')[0];
+		const newBucketName = 'a-newly-added-bucket';
+
+		act(() => {
+			fireEvent.change(targetCombobox, { target: { value: newBucketName } });
+			fireEvent.keyDown(targetCombobox, {
+				key: 'Enter',
+				code: 'Enter',
+				keyCode: 13,
+			});
+		});
+
+		await waitFor(() => {
+			expect(screen.getByLabelText(newBucketName)).toBeInTheDocument();
+			expect(screen.getByRole('button', { name: /save/i })).toBeEnabled();
+		});
+	});
+
+	it('should send updated bucket configuration on save', async () => {
+		let capturedPayload: UpdateServiceConfigPayload | null = null;
+		const mockUpdateConfigUrl =
+			'http://localhost/api/v1/cloud-integrations/aws/services/s3sync/config';
+
+		// Override POST handler specifically for this test to capture payload
+		server.use(
+			rest.post(mockUpdateConfigUrl, async (req: RestRequest, res, ctx) => {
+				capturedPayload = await req.json();
+				return res(ctx.status(200), ctx.json({ message: 'Config updated' }));
+			}),
+		);
+		act(() => {
+			renderModal(initialBuckets); // Defaults to 's3sync' serviceId
+		});
+		await assertGenericModalElements();
+		await assertS3SyncSpecificElements(initialBuckets);
+
+		expect(screen.getByRole('button', { name: /save/i })).toBeDisabled();
+
+		const newBucketName = 'another-new-bucket';
+		// As before, targeting the first combobox, assumed to be for 'ap-south-1'.
+		const targetCombobox = screen.getAllByRole('combobox')[0];
+
+		// eslint-disable-next-line sonarjs/no-identical-functions
+		act(() => {
+			fireEvent.change(targetCombobox, { target: { value: newBucketName } });
+			fireEvent.keyDown(targetCombobox, {
+				key: 'Enter',
+				code: 'Enter',
+				keyCode: 13,
+			});
+		});
+
+		await waitFor(() => {
+			expect(screen.getByLabelText(newBucketName)).toBeInTheDocument();
+			expect(screen.getByRole('button', { name: /save/i })).toBeEnabled();
+			act(() => {
+				fireEvent.click(screen.getByRole('button', { name: /save/i }));
+			});
+		});
+
+		await waitFor(() => {
+			expect(capturedPayload).not.toBeNull();
+		});
+
+		expect(capturedPayload).toEqual({
+			cloud_account_id: CLOUD_ACCOUNT_ID,
+			config: {
+				logs: {
+					enabled: true,
+					s3_buckets: {
+						'us-east-2': ['first-bucket', 'second-bucket'], // Existing buckets
+						'ap-south-1': [newBucketName], // Newly added bucket for the first region
+					},
+				},
+				metrics: {},
+			},
+		});
+	});
+
+	it('should not render S3 bucket region selector UI for services other than s3sync', async () => {
+		const otherServiceId = 'cloudwatch';
+		act(() => {
+			renderModal({}, otherServiceId);
+		});
+		await assertGenericModalElements();
+
+		await waitFor(() => {
+			expect(
+				screen.queryByRole('heading', { name: /select s3 buckets by region/i }),
+			).not.toBeInTheDocument();
+
+			const regions = accountsResponse.data.accounts[0]?.config?.regions || [];
+			regions.forEach((region) => {
+				expect(
+					screen.queryByText(`Enter S3 bucket names for ${region}`),
+				).not.toBeInTheDocument();
+			});
+		});
+	});
+});

frontend/src/container/CloudIntegrationPage/ServicesSection/__tests__/mockData.ts

@@ -0,0 +1,44 @@
+import { IConfigureServiceModalProps } from '../ConfigureServiceModal';
+
+const CLOUD_ACCOUNT_ID = '123456789012';
+
+const initialBuckets = { 'us-east-2': ['first-bucket', 'second-bucket'] };
+
+const accountsResponse = {
+	status: 'success',
+	data: {
+		accounts: [
+			{
+				id: 'a1b2c3d4-e5f6-7890-1234-567890abcdef',
+				cloud_account_id: CLOUD_ACCOUNT_ID,
+				config: {
+					regions: ['ap-south-1', 'ap-south-2', 'us-east-1', 'us-east-2'],
+				},
+				status: {
+					integration: {
+						last_heartbeat_ts_ms: 1747114366214,
+					},
+				},
+			},
+		],
+	},
+};
+
+const defaultModalProps: Omit<IConfigureServiceModalProps, 'initialConfig'> = {
+	isOpen: true,
+	onClose: jest.fn(),
+	serviceName: 'S3 Sync',
+	serviceId: 's3sync',
+	cloudAccountId: CLOUD_ACCOUNT_ID,
+	supportedSignals: {
+		logs: true,
+		metrics: false,
+	},
+};
+
+export {
+	accountsResponse,
+	CLOUD_ACCOUNT_ID,
+	defaultModalProps,
+	initialBuckets,
+};

frontend/src/container/CloudIntegrationPage/ServicesSection/__tests__/utils.tsx

@@ -0,0 +1,79 @@
+import { render, RenderResult, screen, waitFor } from '@testing-library/react';
+import MockQueryClientProvider from 'providers/test/MockQueryClientProvider';
+
+import ConfigureServiceModal from '../ConfigureServiceModal';
+import { accountsResponse, defaultModalProps } from './mockData';
+
+/**
+ * Renders the ConfigureServiceModal with specified S3 bucket initial configurations.
+ */
+const renderModal = (
+	initialConfigLogsS3Buckets: Record<string, string[]> = {},
+	serviceId = 's3sync',
+): RenderResult => {
+	const initialConfig = {
+		logs: { enabled: true, s3_buckets: initialConfigLogsS3Buckets },
+		metrics: { enabled: false },
+	};
+
+	return render(
+		<MockQueryClientProvider>
+			<ConfigureServiceModal
+				// eslint-disable-next-line react/jsx-props-no-spreading
+				{...defaultModalProps}
+				serviceId={serviceId}
+				initialConfig={initialConfig}
+			/>
+		</MockQueryClientProvider>,
+	);
+};
+
+/**
+ * Asserts that generic UI elements of the modal are present.
+ */
+const assertGenericModalElements = async (): Promise<void> => {
+	await waitFor(() => {
+		expect(screen.getByRole('switch')).toBeInTheDocument();
+		expect(screen.getByText(/log collection/i)).toBeInTheDocument();
+		expect(
+			screen.getByText(
+				/to ingest logs from your aws services, you must complete several steps/i,
+			),
+		).toBeInTheDocument();
+	});
+};
+
+/**
+ * Asserts the state of S3 bucket selectors for each region, specific to S3 Sync.
+ */
+const assertS3SyncSpecificElements = async (
+	expectedBucketsByRegion: Record<string, string[]> = {},
+): Promise<void> => {
+	const regions = accountsResponse.data.accounts[0]?.config?.regions || [];
+
+	await waitFor(() => {
+		expect(
+			screen.getByRole('heading', { name: /select s3 buckets by region/i }),
+		).toBeInTheDocument();
+
+		regions.forEach((region) => {
+			expect(screen.getByText(region)).toBeInTheDocument();
+			const bucketsForRegion = expectedBucketsByRegion[region] || [];
+			if (bucketsForRegion.length > 0) {
+				bucketsForRegion.forEach((bucket) => {
+					expect(screen.getByText(bucket)).toBeInTheDocument();
+				});
+			} else {
+				expect(
+					screen.getByText(`Enter S3 bucket names for ${region}`),
+				).toBeInTheDocument();
+			}
+		});
+	});
+};
+
+export {
+	assertGenericModalElements,
+	assertS3SyncSpecificElements,
+	renderModal,
+};