Merge branch 'main' into fix/8403

* fix: fetch only required traces fields

* fix: remove only logs case in field name

* fix: add extra if condition for logs json field names

* fix: tests

.golangci.yml

@@ -7,6 +7,7 @@ linters:
     - sloglint
     - depguard
     - iface
+    - unparam
 
 linters-settings:
   sloglint:

conf/example.yaml

@@ -90,6 +90,15 @@ apiserver:
       - /api/v1/version
       - /
 
+##################### Querier #####################
+querier:
+  # The TTL for cached query results.
+  cache_ttl: 168h
+  # The interval for recent data that should not be cached.
+  flux_interval: 5m
+  # The maximum number of concurrent queries for missing ranges.
+  max_concurrent_queries: 4
+
 ##################### TelemetryStore #####################
 telemetrystore:
   # Maximum number of idle connections in the connection pool.
@@ -103,13 +112,15 @@ telemetrystore:
   clickhouse:
     # The DSN to use for clickhouse.
     dsn: tcp://localhost:9000
+    # The cluster name to use for clickhouse.
+    cluster: cluster
     # The query settings for clickhouse.
     settings:
       max_execution_time: 0
       max_execution_time_leaf: 0
       timeout_before_checking_execution_speed: 0
       max_bytes_to_read: 0
-      max_result_rows_for_ch_query: 0
+      max_result_rows: 0
 
 ##################### Prometheus #####################
 prometheus:
@@ -224,3 +235,12 @@ statsreporter:
   enabled: true
   # The interval at which the stats are collected.
   interval: 6h
+  collect:
+    # Whether to collect identities and traits (emails).
+    identities: true
+
+
+##################### Gateway (License only) #####################
+gateway:
+  # The URL of the gateway's api.
+  url: http://localhost:8080

ee/query-service/Dockerfile

@@ -11,11 +11,9 @@ RUN apk update && \
 
 
 COPY ./target/${OS}-${TARGETARCH}/signoz /root/signoz
-COPY ./conf/prometheus.yml /root/config/prometheus.yml
 COPY ./templates/email /root/templates
 COPY frontend/build/ /etc/signoz/web/
 
 RUN chmod 755 /root /root/signoz
 
-ENTRYPOINT ["./signoz"]
-CMD ["-config", "/root/config/prometheus.yml"]
+ENTRYPOINT ["./signoz"]

ee/query-service/Dockerfile.multi-arch

@@ -12,11 +12,9 @@ RUN apk update && \
     rm -rf /var/cache/apk/*
 
 COPY ./target/${OS}-${ARCH}/signoz /root/signoz
-COPY ./conf/prometheus.yml /root/config/prometheus.yml
 COPY ./templates/email /root/templates
 COPY frontend/build/ /etc/signoz/web/
 
 RUN chmod 755 /root /root/signoz
 
 ENTRYPOINT ["./signoz"]
-CMD ["-config", "/root/config/prometheus.yml"]

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

@@ -7,7 +7,6 @@ import (
 
 	"github.com/SigNoz/signoz/ee/licensing/httplicensing"
 	"github.com/SigNoz/signoz/ee/query-service/integrations/gateway"
-	"github.com/SigNoz/signoz/ee/query-service/interfaces"
 	"github.com/SigNoz/signoz/ee/query-service/usage"
 	"github.com/SigNoz/signoz/pkg/alertmanager"
 	"github.com/SigNoz/signoz/pkg/apis/fields"
@@ -17,6 +16,7 @@ import (
 	"github.com/SigNoz/signoz/pkg/query-service/app/cloudintegrations"
 	"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/interfaces"
 	basemodel "github.com/SigNoz/signoz/pkg/query-service/model"
 	rules "github.com/SigNoz/signoz/pkg/query-service/rules"
 	"github.com/SigNoz/signoz/pkg/signoz"
@@ -26,8 +26,7 @@ import (
 )
 
 type APIHandlerOptions struct {
-	DataConnector                 interfaces.DataConnector
-	PreferSpanMetrics             bool
+	DataConnector                 interfaces.Reader
 	RulesManager                  *rules.Manager
 	UsageManager                  *usage.Manager
 	IntegrationsController        *integrations.Controller
@@ -51,7 +50,6 @@ type APIHandler struct {
 func NewAPIHandler(opts APIHandlerOptions, signoz *signoz.SigNoz) (*APIHandler, error) {
 	baseHandler, err := baseapp.NewAPIHandler(baseapp.APIHandlerOpts{
 		Reader:                        opts.DataConnector,
-		PreferSpanMetrics:             opts.PreferSpanMetrics,
 		RuleManager:                   opts.RulesManager,
 		IntegrationsController:        opts.IntegrationsController,
 		CloudIntegrationsController:   opts.CloudIntegrationsController,
@@ -61,7 +59,7 @@ func NewAPIHandler(opts APIHandlerOptions, signoz *signoz.SigNoz) (*APIHandler,
 		LicensingAPI:                  httplicensing.NewLicensingAPI(signoz.Licensing),
 		FieldsAPI:                     fields.NewAPI(signoz.Instrumentation.ToProviderSettings(), signoz.TelemetryStore),
 		Signoz:                        signoz,
-		QuerierAPI:                    querierAPI.NewAPI(signoz.Querier),
+		QuerierAPI:                    querierAPI.NewAPI(signoz.Instrumentation.ToProviderSettings(), signoz.Querier),
 	})
 
 	if err != nil {

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

@@ -96,7 +96,7 @@ func (ah *APIHandler) receiveSAML(w http.ResponseWriter, r *http.Request) {
 		return
 	}
 
-	nextPage, err := ah.Signoz.Modules.User.PrepareSsoRedirect(ctx, redirectUri, email, ah.opts.JWT)
+	nextPage, err := ah.Signoz.Modules.User.PrepareSsoRedirect(ctx, redirectUri, email)
 	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/featureFlags.go

@@ -59,7 +59,7 @@ func (ah *APIHandler) getFeatureFlags(w http.ResponseWriter, r *http.Request) {
 		}
 	}
 
-	if ah.opts.PreferSpanMetrics {
+	if constants.IsPreferSpanMetrics {
 		for idx, feature := range featureSet {
 			if feature.Name == licensetypes.UseSpanMetrics {
 				featureSet[idx].Active = true

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

@@ -1,39 +0,0 @@
-package db
-
-import (
-	"time"
-
-	"github.com/ClickHouse/clickhouse-go/v2"
-
-	"github.com/SigNoz/signoz/pkg/cache"
-	"github.com/SigNoz/signoz/pkg/prometheus"
-	basechr "github.com/SigNoz/signoz/pkg/query-service/app/clickhouseReader"
-	"github.com/SigNoz/signoz/pkg/sqlstore"
-	"github.com/SigNoz/signoz/pkg/telemetrystore"
-)
-
-type ClickhouseReader struct {
-	conn  clickhouse.Conn
-	appdb sqlstore.SQLStore
-	*basechr.ClickHouseReader
-}
-
-func NewDataConnector(
-	sqlDB sqlstore.SQLStore,
-	telemetryStore telemetrystore.TelemetryStore,
-	prometheus prometheus.Prometheus,
-	cluster string,
-	fluxIntervalForTraceDetail time.Duration,
-	cache cache.Cache,
-) *ClickhouseReader {
-	chReader := basechr.NewReader(sqlDB, telemetryStore, prometheus, cluster, fluxIntervalForTraceDetail, cache)
-	return &ClickhouseReader{
-		conn:             telemetryStore.ClickhouseDB(),
-		appdb:            sqlDB,
-		ClickHouseReader: chReader,
-	}
-}
-
-func (r *ClickhouseReader) GetSQLStore() sqlstore.SQLStore {
-	return r.appdb
-}

ee/query-service/app/server.go

@@ -6,14 +6,10 @@ import (
 	"net"
 	"net/http"
 	_ "net/http/pprof" // http profiler
-	"time"
 
 	"github.com/gorilla/handlers"
-	"github.com/jmoiron/sqlx"
 
 	"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/integrations/gateway"
 	"github.com/SigNoz/signoz/ee/query-service/rules"
 	"github.com/SigNoz/signoz/ee/query-service/usage"
@@ -32,6 +28,7 @@ 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/clickhouseReader"
 	"github.com/SigNoz/signoz/pkg/query-service/app/cloudintegrations"
 	"github.com/SigNoz/signoz/pkg/query-service/app/integrations"
 	"github.com/SigNoz/signoz/pkg/query-service/app/logparsingpipeline"
@@ -41,7 +38,6 @@ import (
 	"github.com/SigNoz/signoz/pkg/query-service/healthcheck"
 	baseint "github.com/SigNoz/signoz/pkg/query-service/interfaces"
 	baserules "github.com/SigNoz/signoz/pkg/query-service/rules"
-	"github.com/SigNoz/signoz/pkg/query-service/telemetry"
 	"github.com/SigNoz/signoz/pkg/query-service/utils"
 	"go.uber.org/zap"
 )
@@ -59,62 +55,55 @@ type ServerOptions struct {
 	Jwt                        *authtypes.JWT
 }
 
-// Server runs HTTP api service
+// Server runs HTTP, Mux and a grpc server
 type Server struct {
-	serverOptions *ServerOptions
-	ruleManager   *baserules.Manager
+	config      signoz.Config
+	signoz      *signoz.SigNoz
+	jwt         *authtypes.JWT
+	ruleManager *baserules.Manager
 
 	// public http router
-	httpConn   net.Listener
-	httpServer *http.Server
+	httpConn     net.Listener
+	httpServer   *http.Server
+	httpHostPort string
 
 	// private http
-	privateConn net.Listener
-	privateHTTP *http.Server
+	privateConn     net.Listener
+	privateHTTP     *http.Server
+	privateHostPort string
+
+	opampServer *opamp.Server
 
 	// Usage manager
 	usageManager *usage.Manager
 
-	opampServer *opamp.Server
-
 	unavailableChannel chan healthcheck.Status
 }
 
-// HealthCheckStatus returns health check status channel a client can subscribe to
-func (s Server) HealthCheckStatus() chan healthcheck.Status {
-	return s.unavailableChannel
-}
-
 // NewServer creates and initializes Server
-func NewServer(serverOptions *ServerOptions) (*Server, error) {
-	gatewayProxy, err := gateway.NewProxy(serverOptions.GatewayUrl, gateway.RoutePrefix)
+func NewServer(config signoz.Config, signoz *signoz.SigNoz, jwt *authtypes.JWT) (*Server, error) {
+	gatewayProxy, err := gateway.NewProxy(config.Gateway.URL.String(), gateway.RoutePrefix)
 	if err != nil {
 		return nil, err
 	}
 
-	fluxIntervalForTraceDetail, err := time.ParseDuration(serverOptions.FluxIntervalForTraceDetail)
-	if err != nil {
-		return nil, err
-	}
-
-	reader := db.NewDataConnector(
-		serverOptions.SigNoz.SQLStore,
-		serverOptions.SigNoz.TelemetryStore,
-		serverOptions.SigNoz.Prometheus,
-		serverOptions.Cluster,
-		fluxIntervalForTraceDetail,
-		serverOptions.SigNoz.Cache,
+	reader := clickhouseReader.NewReader(
+		signoz.SQLStore,
+		signoz.TelemetryStore,
+		signoz.Prometheus,
+		signoz.TelemetryStore.Cluster(),
+		config.Querier.FluxInterval,
+		signoz.Cache,
 	)
 
 	rm, err := makeRulesManager(
-		serverOptions.SigNoz.SQLStore.SQLxDB(),
 		reader,
-		serverOptions.SigNoz.Cache,
-		serverOptions.SigNoz.Alertmanager,
-		serverOptions.SigNoz.SQLStore,
-		serverOptions.SigNoz.TelemetryStore,
-		serverOptions.SigNoz.Prometheus,
-		serverOptions.SigNoz.Modules.OrgGetter,
+		signoz.Cache,
+		signoz.Alertmanager,
+		signoz.SQLStore,
+		signoz.TelemetryStore,
+		signoz.Prometheus,
+		signoz.Modules.OrgGetter,
 	)
 
 	if err != nil {
@@ -122,19 +111,16 @@ func NewServer(serverOptions *ServerOptions) (*Server, error) {
 	}
 
 	// initiate opamp
-	_, err = opAmpModel.InitDB(serverOptions.SigNoz.SQLStore.SQLxDB())
-	if err != nil {
-		return nil, err
-	}
+	opAmpModel.Init(signoz.SQLStore, signoz.Instrumentation.Logger(), signoz.Modules.OrgGetter)
 
-	integrationsController, err := integrations.NewController(serverOptions.SigNoz.SQLStore)
+	integrationsController, err := integrations.NewController(signoz.SQLStore)
 	if err != nil {
 		return nil, fmt.Errorf(
 			"couldn't create integrations controller: %w", err,
 		)
 	}
 
-	cloudIntegrationsController, err := cloudintegrations.NewController(serverOptions.SigNoz.SQLStore)
+	cloudIntegrationsController, err := cloudintegrations.NewController(signoz.SQLStore)
 	if err != nil {
 		return nil, fmt.Errorf(
 			"couldn't create cloud provider integrations controller: %w", err,
@@ -143,7 +129,8 @@ func NewServer(serverOptions *ServerOptions) (*Server, error) {
 
 	// ingestion pipelines manager
 	logParsingPipelineController, err := logparsingpipeline.NewLogParsingPipelinesController(
-		serverOptions.SigNoz.SQLStore, integrationsController.GetPipelinesForInstalledIntegrations,
+		signoz.SQLStore,
+		integrationsController.GetPipelinesForInstalledIntegrations,
 	)
 	if err != nil {
 		return nil, err
@@ -151,7 +138,7 @@ func NewServer(serverOptions *ServerOptions) (*Server, error) {
 
 	// initiate agent config handler
 	agentConfMgr, err := agentConf.Initiate(&agentConf.ManagerOptions{
-		DB:            serverOptions.SigNoz.SQLStore.SQLxDB(),
+		Store:         signoz.SQLStore,
 		AgentFeatures: []agentConf.AgentFeature{logParsingPipelineController},
 	})
 	if err != nil {
@@ -159,7 +146,7 @@ func NewServer(serverOptions *ServerOptions) (*Server, error) {
 	}
 
 	// start the usagemanager
-	usageManager, err := usage.New(serverOptions.SigNoz.Licensing, serverOptions.SigNoz.TelemetryStore.ClickhouseDB(), serverOptions.SigNoz.Zeus, serverOptions.SigNoz.Modules.OrgGetter)
+	usageManager, err := usage.New(signoz.Licensing, signoz.TelemetryStore.ClickhouseDB(), signoz.Zeus, signoz.Modules.OrgGetter)
 	if err != nil {
 		return nil, err
 	}
@@ -168,47 +155,36 @@ func NewServer(serverOptions *ServerOptions) (*Server, error) {
 		return nil, err
 	}
 
-	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 {
-		return nil, err
-	}
-
 	apiOpts := api.APIHandlerOptions{
 		DataConnector:                 reader,
-		PreferSpanMetrics:             serverOptions.PreferSpanMetrics,
 		RulesManager:                  rm,
 		UsageManager:                  usageManager,
 		IntegrationsController:        integrationsController,
 		CloudIntegrationsController:   cloudIntegrationsController,
 		LogsParsingPipelineController: logParsingPipelineController,
-		FluxInterval:                  fluxInterval,
+		FluxInterval:                  config.Querier.FluxInterval,
 		Gateway:                       gatewayProxy,
-		GatewayUrl:                    serverOptions.GatewayUrl,
-		JWT:                           serverOptions.Jwt,
+		GatewayUrl:                    config.Gateway.URL.String(),
+		JWT:                           jwt,
 	}
 
-	apiHandler, err := api.NewAPIHandler(apiOpts, serverOptions.SigNoz)
+	apiHandler, err := api.NewAPIHandler(apiOpts, signoz)
 	if err != nil {
 		return nil, err
 	}
 
 	s := &Server{
+		config:             config,
+		signoz:             signoz,
+		jwt:                jwt,
 		ruleManager:        rm,
-		serverOptions:      serverOptions,
+		httpHostPort:       baseconst.HTTPHostPort,
+		privateHostPort:    baseconst.PrivateHostPort,
 		unavailableChannel: make(chan healthcheck.Status),
 		usageManager:       usageManager,
 	}
 
-	httpServer, err := s.createPublicServer(apiHandler, serverOptions.SigNoz.Web)
+	httpServer, err := s.createPublicServer(apiHandler, signoz.Web)
 
 	if err != nil {
 		return nil, err
@@ -224,7 +200,7 @@ func NewServer(serverOptions *ServerOptions) (*Server, error) {
 	s.privateHTTP = privateServer
 
 	s.opampServer = opamp.InitializeServer(
-		&opAmpModel.AllAgents, agentConfMgr,
+		&opAmpModel.AllAgents, agentConfMgr, signoz.Instrumentation,
 	)
 
 	orgs, err := apiHandler.Signoz.Modules.OrgGetter.ListByOwnedKeyRange(context.Background())
@@ -241,18 +217,22 @@ func NewServer(serverOptions *ServerOptions) (*Server, error) {
 	return s, nil
 }
 
+// HealthCheckStatus returns health check status channel a client can subscribe to
+func (s Server) HealthCheckStatus() chan healthcheck.Status {
+	return s.unavailableChannel
+}
+
 func (s *Server) createPrivateServer(apiHandler *api.APIHandler) (*http.Server, error) {
 	r := baseapp.NewRouter()
 
-	r.Use(middleware.NewAuth(s.serverOptions.Jwt, []string{"Authorization", "Sec-WebSocket-Protocol"}, s.serverOptions.SigNoz.Sharder, s.serverOptions.SigNoz.Instrumentation.Logger()).Wrap)
-	r.Use(middleware.NewAPIKey(s.serverOptions.SigNoz.SQLStore, []string{"SIGNOZ-API-KEY"}, s.serverOptions.SigNoz.Instrumentation.Logger(), s.serverOptions.SigNoz.Sharder).Wrap)
-	r.Use(middleware.NewTimeout(s.serverOptions.SigNoz.Instrumentation.Logger(),
-		s.serverOptions.Config.APIServer.Timeout.ExcludedRoutes,
-		s.serverOptions.Config.APIServer.Timeout.Default,
-		s.serverOptions.Config.APIServer.Timeout.Max,
+	r.Use(middleware.NewAuth(s.jwt, []string{"Authorization", "Sec-WebSocket-Protocol"}, s.signoz.Sharder, s.signoz.Instrumentation.Logger()).Wrap)
+	r.Use(middleware.NewAPIKey(s.signoz.SQLStore, []string{"SIGNOZ-API-KEY"}, s.signoz.Instrumentation.Logger(), s.signoz.Sharder).Wrap)
+	r.Use(middleware.NewTimeout(s.signoz.Instrumentation.Logger(),
+		s.config.APIServer.Timeout.ExcludedRoutes,
+		s.config.APIServer.Timeout.Default,
+		s.config.APIServer.Timeout.Max,
 	).Wrap)
-	r.Use(middleware.NewAnalytics().Wrap)
-	r.Use(middleware.NewLogging(s.serverOptions.SigNoz.Instrumentation.Logger(), s.serverOptions.Config.APIServer.Logging.ExcludedRoutes).Wrap)
+	r.Use(middleware.NewLogging(s.signoz.Instrumentation.Logger(), s.config.APIServer.Logging.ExcludedRoutes).Wrap)
 
 	apiHandler.RegisterPrivateRoutes(r)
 
@@ -274,17 +254,16 @@ func (s *Server) createPrivateServer(apiHandler *api.APIHandler) (*http.Server,
 
 func (s *Server) createPublicServer(apiHandler *api.APIHandler, web web.Web) (*http.Server, error) {
 	r := baseapp.NewRouter()
-	am := middleware.NewAuthZ(s.serverOptions.SigNoz.Instrumentation.Logger())
+	am := middleware.NewAuthZ(s.signoz.Instrumentation.Logger())
 
-	r.Use(middleware.NewAuth(s.serverOptions.Jwt, []string{"Authorization", "Sec-WebSocket-Protocol"}, s.serverOptions.SigNoz.Sharder, s.serverOptions.SigNoz.Instrumentation.Logger()).Wrap)
-	r.Use(middleware.NewAPIKey(s.serverOptions.SigNoz.SQLStore, []string{"SIGNOZ-API-KEY"}, s.serverOptions.SigNoz.Instrumentation.Logger(), s.serverOptions.SigNoz.Sharder).Wrap)
-	r.Use(middleware.NewTimeout(s.serverOptions.SigNoz.Instrumentation.Logger(),
-		s.serverOptions.Config.APIServer.Timeout.ExcludedRoutes,
-		s.serverOptions.Config.APIServer.Timeout.Default,
-		s.serverOptions.Config.APIServer.Timeout.Max,
+	r.Use(middleware.NewAuth(s.jwt, []string{"Authorization", "Sec-WebSocket-Protocol"}, s.signoz.Sharder, s.signoz.Instrumentation.Logger()).Wrap)
+	r.Use(middleware.NewAPIKey(s.signoz.SQLStore, []string{"SIGNOZ-API-KEY"}, s.signoz.Instrumentation.Logger(), s.signoz.Sharder).Wrap)
+	r.Use(middleware.NewTimeout(s.signoz.Instrumentation.Logger(),
+		s.config.APIServer.Timeout.ExcludedRoutes,
+		s.config.APIServer.Timeout.Default,
+		s.config.APIServer.Timeout.Max,
 	).Wrap)
-	r.Use(middleware.NewAnalytics().Wrap)
-	r.Use(middleware.NewLogging(s.serverOptions.SigNoz.Instrumentation.Logger(), s.serverOptions.Config.APIServer.Logging.ExcludedRoutes).Wrap)
+	r.Use(middleware.NewLogging(s.signoz.Instrumentation.Logger(), s.config.APIServer.Logging.ExcludedRoutes).Wrap)
 
 	apiHandler.RegisterRoutes(r, am)
 	apiHandler.RegisterLogsRoutes(r, am)
@@ -325,7 +304,7 @@ func (s *Server) createPublicServer(apiHandler *api.APIHandler, web web.Web) (*h
 func (s *Server) initListeners() error {
 	// listen on public port
 	var err error
-	publicHostPort := s.serverOptions.HTTPHostPort
+	publicHostPort := s.httpHostPort
 	if publicHostPort == "" {
 		return fmt.Errorf("baseconst.HTTPHostPort is required")
 	}
@@ -335,10 +314,10 @@ func (s *Server) initListeners() error {
 		return err
 	}
 
-	zap.L().Info(fmt.Sprintf("Query server started listening on %s...", s.serverOptions.HTTPHostPort))
+	zap.L().Info(fmt.Sprintf("Query server started listening on %s...", s.httpHostPort))
 
 	// listen on private port to support internal services
-	privateHostPort := s.serverOptions.PrivateHostPort
+	privateHostPort := s.privateHostPort
 
 	if privateHostPort == "" {
 		return fmt.Errorf("baseconst.PrivateHostPort is required")
@@ -348,7 +327,7 @@ func (s *Server) initListeners() error {
 	if err != nil {
 		return err
 	}
-	zap.L().Info(fmt.Sprintf("Query server started listening on private port %s...", s.serverOptions.PrivateHostPort))
+	zap.L().Info(fmt.Sprintf("Query server started listening on private port %s...", s.privateHostPort))
 
 	return nil
 }
@@ -368,7 +347,7 @@ func (s *Server) Start(ctx context.Context) error {
 	}
 
 	go func() {
-		zap.L().Info("Starting HTTP server", zap.Int("port", httpPort), zap.String("addr", s.serverOptions.HTTPHostPort))
+		zap.L().Info("Starting HTTP server", zap.Int("port", httpPort), zap.String("addr", s.httpHostPort))
 
 		switch err := s.httpServer.Serve(s.httpConn); err {
 		case nil, http.ErrServerClosed, cmux.ErrListenerClosed:
@@ -394,7 +373,7 @@ func (s *Server) Start(ctx context.Context) error {
 	}
 
 	go func() {
-		zap.L().Info("Starting Private HTTP server", zap.Int("port", privatePort), zap.String("addr", s.serverOptions.PrivateHostPort))
+		zap.L().Info("Starting Private HTTP server", zap.Int("port", privatePort), zap.String("addr", s.privateHostPort))
 
 		switch err := s.privateHTTP.Serve(s.privateConn); err {
 		case nil, http.ErrServerClosed, cmux.ErrListenerClosed:
@@ -446,7 +425,6 @@ func (s *Server) Stop(ctx context.Context) error {
 }
 
 func makeRulesManager(
-	db *sqlx.DB,
 	ch baseint.Reader,
 	cache cache.Cache,
 	alertmanager alertmanager.Alertmanager,
@@ -459,7 +437,6 @@ func makeRulesManager(
 	managerOpts := &baserules.ManagerOptions{
 		TelemetryStore:      telemetryStore,
 		Prometheus:          prometheus,
-		DBConn:              db,
 		Context:             context.Background(),
 		Logger:              zap.L(),
 		Reader:              ch,

ee/query-service/constants/constants.go

@@ -37,9 +37,14 @@ func GetDefaultSiteURL() string {
 const DotMetricsEnabled = "DOT_METRICS_ENABLED"
 
 var IsDotMetricsEnabled = false
+var IsPreferSpanMetrics = false
 
 func init() {
 	if GetOrDefaultEnv(DotMetricsEnabled, "false") == "true" {
 		IsDotMetricsEnabled = true
 	}
+
+	if GetOrDefaultEnv("USE_SPAN_METRICS", "false") == "true" {
+		IsPreferSpanMetrics = true
+	}
 }

ee/query-service/interfaces/connector.go

@@ -1,11 +0,0 @@
-package interfaces
-
-import (
-	baseint "github.com/SigNoz/signoz/pkg/query-service/interfaces"
-)
-
-// Connector defines methods for interaction
-// with o11y data. for example - clickhouse
-type DataConnector interface {
-	baseint.Reader
-}

ee/query-service/main.go

@@ -102,10 +102,14 @@ func main() {
 			fileprovider.NewFactory(),
 		},
 	}, signoz.DeprecatedFlags{
-		MaxIdleConns: maxIdleConns,
-		MaxOpenConns: maxOpenConns,
-		DialTimeout:  dialTimeout,
-		Config:       promConfigPath,
+		MaxIdleConns:               maxIdleConns,
+		MaxOpenConns:               maxOpenConns,
+		DialTimeout:                dialTimeout,
+		Config:                     promConfigPath,
+		FluxInterval:               fluxInterval,
+		FluxIntervalForTraceDetail: fluxIntervalForTraceDetail,
+		Cluster:                    cluster,
+		GatewayUrl:                 gatewayUrl,
 	})
 	if err != nil {
 		zap.L().Fatal("Failed to create config", zap.Error(err))
@@ -148,20 +152,7 @@ func main() {
 		zap.L().Fatal("Failed to create signoz", zap.Error(err))
 	}
 
-	serverOptions := &app.ServerOptions{
-		Config:                     config,
-		SigNoz:                     signoz,
-		HTTPHostPort:               baseconst.HTTPHostPort,
-		PreferSpanMetrics:          preferSpanMetrics,
-		PrivateHostPort:            baseconst.PrivateHostPort,
-		FluxInterval:               fluxInterval,
-		FluxIntervalForTraceDetail: fluxIntervalForTraceDetail,
-		Cluster:                    cluster,
-		GatewayUrl:                 gatewayUrl,
-		Jwt:                        jwt,
-	}
-
-	server, err := app.NewServer(serverOptions)
+	server, err := app.NewServer(config, signoz, jwt)
 	if err != nil {
 		zap.L().Fatal("Failed to create server", zap.Error(err))
 	}

ee/sqlstore/postgressqlstore/dialect.go

@@ -17,19 +17,21 @@ var (
 )
 
 var (
-	Org              = "org"
-	User             = "user"
-	UserNoCascade    = "user_no_cascade"
-	FactorPassword   = "factor_password"
-	CloudIntegration = "cloud_integration"
+	Org                = "org"
+	User               = "user"
+	UserNoCascade      = "user_no_cascade"
+	FactorPassword     = "factor_password"
+	CloudIntegration   = "cloud_integration"
+	AgentConfigVersion = "agent_config_version"
 )
 
 var (
-	OrgReference              = `("org_id") REFERENCES "organizations" ("id")`
-	UserReference             = `("user_id") REFERENCES "users" ("id") ON DELETE CASCADE ON UPDATE CASCADE`
-	UserReferenceNoCascade    = `("user_id") REFERENCES "users" ("id")`
-	FactorPasswordReference   = `("password_id") REFERENCES "factor_password" ("id")`
-	CloudIntegrationReference = `("cloud_integration_id") REFERENCES "cloud_integration" ("id") ON DELETE CASCADE`
+	OrgReference                = `("org_id") REFERENCES "organizations" ("id")`
+	UserReference               = `("user_id") REFERENCES "users" ("id") ON DELETE CASCADE ON UPDATE CASCADE`
+	UserReferenceNoCascade      = `("user_id") REFERENCES "users" ("id")`
+	FactorPasswordReference     = `("password_id") REFERENCES "factor_password" ("id")`
+	CloudIntegrationReference   = `("cloud_integration_id") REFERENCES "cloud_integration" ("id") ON DELETE CASCADE`
+	AgentConfigVersionReference = `("version_id") REFERENCES "agent_config_version" ("id")`
 )
 
 type dialect struct{}
@@ -274,6 +276,8 @@ func (dialect *dialect) RenameTableAndModifyModel(ctx context.Context, bun bun.I
 			fkReferences = append(fkReferences, FactorPasswordReference)
 		} else if reference == CloudIntegration && !slices.Contains(fkReferences, CloudIntegrationReference) {
 			fkReferences = append(fkReferences, CloudIntegrationReference)
+		} else if reference == AgentConfigVersion && !slices.Contains(fkReferences, AgentConfigVersionReference) {
+			fkReferences = append(fkReferences, AgentConfigVersionReference)
 		}
 	}
 

ee/sqlstore/postgressqlstore/provider.go

@@ -10,7 +10,6 @@ import (
 	"github.com/jackc/pgx/v5/pgconn"
 	"github.com/jackc/pgx/v5/pgxpool"
 	"github.com/jackc/pgx/v5/stdlib"
-	"github.com/jmoiron/sqlx"
 	"github.com/uptrace/bun"
 	"github.com/uptrace/bun/dialect/pgdialect"
 )
@@ -19,7 +18,6 @@ type provider struct {
 	settings factory.ScopedProviderSettings
 	sqldb    *sql.DB
 	bundb    *sqlstore.BunDB
-	sqlxdb   *sqlx.DB
 	dialect  *dialect
 }
 
@@ -61,7 +59,6 @@ func New(ctx context.Context, providerSettings factory.ProviderSettings, config
 		settings: settings,
 		sqldb:    sqldb,
 		bundb:    sqlstore.NewBunDB(settings, sqldb, pgdialect.New(), hooks),
-		sqlxdb:   sqlx.NewDb(sqldb, "postgres"),
 		dialect:  new(dialect),
 	}, nil
 }
@@ -74,10 +71,6 @@ func (provider *provider) SQLDB() *sql.DB {
 	return provider.sqldb
 }
 
-func (provider *provider) SQLxDB() *sqlx.DB {
-	return provider.sqlxdb
-}
-
 func (provider *provider) Dialect() sqlstore.SQLDialect {
 	return provider.dialect
 }

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

@@ -14,8 +14,8 @@
 	"remove_label_confirm": "This action will remove all the labels. Do you want to proceed?",
 	"remove_label_success": "Labels cleared",
 	"alert_form_step1": "Step 1 - Define the metric",
-	"alert_form_step2": "Step 2 - Define Alert Conditions",
-	"alert_form_step3": "Step 3 - Alert Configuration",
+	"alert_form_step2": "Step {{step}} - Define Alert Conditions",
+	"alert_form_step3": "Step {{step}} - Alert Configuration",
 	"metric_query_max_limit": "Can not create query. You can create maximum of 5 queries",
 	"confirm_save_title": "Save Changes",
 	"confirm_save_content_part1": "Your alert built with",

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

@@ -62,5 +62,8 @@
   "channel_test_failed": "Failed to send a test message to this channel, please confirm that the parameters are set correctly",
   "channel_test_unexpected": "An unexpected error occurred while sending a message to this channel, please try again",
   "webhook_url_required": "Webhook URL is mandatory",
-  "slack_channel_help": "Specify channel or user, use #channel-name, @username (has to be all lowercase, no whitespace)"
+  "slack_channel_help": "Specify channel or user, use #channel-name, @username (has to be all lowercase, no whitespace)",
+  "api_key_required": "API Key is mandatory",
+	"to_required": "To field is mandatory",
+	"channel_name_required": "Channel name is mandatory"
 }

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

@@ -7,8 +7,8 @@
 	"remove_label_confirm": "This action will remove all the labels. Do you want to proceed?",
 	"remove_label_success": "Labels cleared",
 	"alert_form_step1": "Step 1 - Define the metric",
-	"alert_form_step2": "Step 2 - Define Alert Conditions",
-	"alert_form_step3": "Step 3 - Alert Configuration",
+	"alert_form_step2": "Step {{step}} - Define Alert Conditions",
+	"alert_form_step3": "Step {{step}} - Alert Configuration",
 	"metric_query_max_limit": "Can not create query. You can create maximum of 5 queries",
 	"confirm_save_title": "Save Changes",
 	"confirm_save_content_part1": "Your alert built with",

frontend/public/locales/en/alerts.json

@@ -129,5 +129,6 @@
 	"text_num_points": "data points in each result group",
 	"text_alert_frequency": "Run alert every",
 	"text_for": "minutes",
-	"selected_query_placeholder": "Select query"
+	"selected_query_placeholder": "Select query",
+	"alert_rule_not_found": "Alert Rule not found"
 }

frontend/public/locales/en/channels.json

@@ -77,5 +77,8 @@
   "channel_test_failed": "Failed to send a test message to this channel, please confirm that the parameters are set correctly",
   "channel_test_unexpected": "An unexpected error occurred while sending a message to this channel, please try again",
   "webhook_url_required": "Webhook URL is mandatory",
-  "slack_channel_help": "Specify channel or user, use #channel-name, @username (has to be all lowercase, no whitespace)"
+  "slack_channel_help": "Specify channel or user, use #channel-name, @username (has to be all lowercase, no whitespace)",
+  "api_key_required": "API Key is mandatory",
+	"to_required": "To field is mandatory",
+	"channel_name_required": "Channel name is mandatory"
 }

frontend/public/locales/en/rules.json

@@ -7,8 +7,8 @@
 	"remove_label_confirm": "This action will remove all the labels. Do you want to proceed?",
 	"remove_label_success": "Labels cleared",
 	"alert_form_step1": "Step 1 - Define the metric",
-	"alert_form_step2": "Step 2 - Define Alert Conditions",
-	"alert_form_step3": "Step 3 - Alert Configuration",
+	"alert_form_step2": "Step {{step}} - Define Alert Conditions",
+	"alert_form_step3": "Step {{step}} - Alert Configuration",
 	"metric_query_max_limit": "Can not create query. You can create maximum of 5 queries",
 	"confirm_save_title": "Save Changes",
 	"confirm_save_content_part1": "Your alert built with",

frontend/src/AppRoutes/Private.tsx

@@ -126,7 +126,8 @@ function PrivateRoute({ children }: PrivateRouteProps): JSX.Element {
 
 		const isRouteEnabledForWorkspaceBlockedState =
 			isAdmin &&
-			(path === ROUTES.ORG_SETTINGS ||
+			(path === ROUTES.SETTINGS ||
+				path === ROUTES.ORG_SETTINGS ||
 				path === ROUTES.BILLING ||
 				path === ROUTES.MY_SETTINGS);
 

frontend/src/AppRoutes/index.tsx

@@ -71,7 +71,7 @@ function App(): JSX.Element {
 				const orgName =
 					org && Array.isArray(org) && org.length > 0 ? org[0].displayName : '';
 
-				const { displayName, email, role } = user;
+				const { displayName, email, role, id, orgId } = user;
 
 				const domain = extractDomain(email);
 				const hostNameParts = hostname.split('.');
@@ -105,7 +105,7 @@ function App(): JSX.Element {
 					logEvent('Domain Identified', groupTraits, 'group');
 				}
 				if (window && window.Appcues) {
-					window.Appcues.identify(email, {
+					window.Appcues.identify(id, {
 						name: displayName,
 
 						tenant_id: hostNameParts[0],
@@ -131,7 +131,7 @@ function App(): JSX.Element {
 					isPaidUser: !!trialInfo?.trialConvertedToSubscription,
 				});
 
-				posthog?.identify(email, {
+				posthog?.identify(id, {
 					email,
 					name: displayName,
 					orgName,
@@ -143,7 +143,7 @@ function App(): JSX.Element {
 					isPaidUser: !!trialInfo?.trialConvertedToSubscription,
 				});
 
-				posthog?.group('company', domain, {
+				posthog?.group('company', orgId, {
 					name: orgName,
 					tenant_id: hostNameParts[0],
 					data_region: hostNameParts[1],

frontend/src/AppRoutes/pageComponents.ts

@@ -131,10 +131,6 @@ export const CreateAlertChannelAlerts = Loadable(
 	() => import(/* webpackChunkName: "Create Channels" */ 'pages/Settings'),
 );
 
-export const EditAlertChannelsAlerts = Loadable(
-	() => import(/* webpackChunkName: "Edit Channels" */ 'pages/Settings'),
-);
-
 export const AllAlertChannels = Loadable(
 	() => import(/* webpackChunkName: "All Channels" */ 'pages/Settings'),
 );

frontend/src/AppRoutes/routes.ts

@@ -12,7 +12,6 @@ import {
 	CreateNewAlerts,
 	DashboardPage,
 	DashboardWidget,
-	EditAlertChannelsAlerts,
 	EditRulesPage,
 	ErrorDetails,
 	Home,
@@ -253,13 +252,6 @@ const routes: AppRoutes[] = [
 		isPrivate: true,
 		key: 'CHANNELS_NEW',
 	},
-	{
-		path: ROUTES.CHANNELS_EDIT,
-		exact: true,
-		component: EditAlertChannelsAlerts,
-		isPrivate: true,
-		key: 'CHANNELS_EDIT',
-	},
 	{
 		path: ROUTES.ALL_CHANNELS,
 		exact: true,

frontend/src/api/changelog/getChangelogByVersion.ts

@@ -0,0 +1,29 @@
+import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
+import axios, { AxiosError } from 'axios';
+import { ErrorResponse, SuccessResponse } from 'types/api';
+import { ChangelogSchema } from 'types/api/changelog/getChangelogByVersion';
+
+const getChangelogByVersion = async (
+	versionId: string,
+): Promise<SuccessResponse<ChangelogSchema> | ErrorResponse> => {
+	try {
+		const response = await axios.get(`
+			https://cms.signoz.cloud/api/release-changelogs?filters[version][$eq]=${versionId}&populate[features][sort]=sort_order:asc&populate[features][populate][media][fields]=id,ext,url,mime,alternativeText
+        `);
+
+		if (!Array.isArray(response.data.data) || response.data.data.length === 0) {
+			throw new Error('No changelog found!');
+		}
+
+		return {
+			statusCode: 200,
+			error: null,
+			message: response.statusText,
+			payload: response.data.data[0],
+		};
+	} catch (error) {
+		return ErrorResponseHandler(error as AxiosError);
+	}
+};
+
+export default getChangelogByVersion;

frontend/src/api/traceFunnels/index.ts

@@ -119,6 +119,7 @@ export const updateFunnelSteps = async (
 export interface ValidateFunnelPayload {
 	start_time: number;
 	end_time: number;
+	steps: FunnelStepData[];
 }
 
 export interface ValidateFunnelResponse {
@@ -132,12 +133,11 @@ export interface ValidateFunnelResponse {
 }
 
 export const validateFunnelSteps = async (
-	funnelId: string,
 	payload: ValidateFunnelPayload,
 	signal?: AbortSignal,
 ): Promise<SuccessResponse<ValidateFunnelResponse> | ErrorResponse> => {
 	const response = await axios.post(
-		`${FUNNELS_BASE_PATH}/${funnelId}/analytics/validate`,
+		`${FUNNELS_BASE_PATH}/analytics/validate`,
 		payload,
 		{ signal },
 	);
@@ -185,6 +185,7 @@ export interface FunnelOverviewPayload {
 	end_time: number;
 	step_start?: number;
 	step_end?: number;
+	steps: FunnelStepData[];
 }
 
 export interface FunnelOverviewResponse {
@@ -202,12 +203,11 @@ export interface FunnelOverviewResponse {
 }
 
 export const getFunnelOverview = async (
-	funnelId: string,
 	payload: FunnelOverviewPayload,
 	signal?: AbortSignal,
 ): Promise<SuccessResponse<FunnelOverviewResponse> | ErrorResponse> => {
 	const response = await axios.post(
-		`${FUNNELS_BASE_PATH}/${funnelId}/analytics/overview`,
+		`${FUNNELS_BASE_PATH}/analytics/overview`,
 		payload,
 		{
 			signal,
@@ -235,12 +235,11 @@ export interface SlowTraceData {
 }
 
 export const getFunnelSlowTraces = async (
-	funnelId: string,
 	payload: FunnelOverviewPayload,
 	signal?: AbortSignal,
 ): Promise<SuccessResponse<SlowTraceData> | ErrorResponse> => {
 	const response = await axios.post(
-		`${FUNNELS_BASE_PATH}/${funnelId}/analytics/slow-traces`,
+		`${FUNNELS_BASE_PATH}/analytics/slow-traces`,
 		payload,
 		{
 			signal,
@@ -273,7 +272,7 @@ export const getFunnelErrorTraces = async (
 	signal?: AbortSignal,
 ): Promise<SuccessResponse<ErrorTraceData> | ErrorResponse> => {
 	const response: AxiosResponse = await axios.post(
-		`${FUNNELS_BASE_PATH}/${funnelId}/analytics/error-traces`,
+		`${FUNNELS_BASE_PATH}/analytics/error-traces`,
 		payload,
 		{
 			signal,
@@ -291,6 +290,7 @@ export const getFunnelErrorTraces = async (
 export interface FunnelStepsPayload {
 	start_time: number;
 	end_time: number;
+	steps: FunnelStepData[];
 }
 
 export interface FunnelStepGraphMetrics {
@@ -307,12 +307,11 @@ export interface FunnelStepsResponse {
 }
 
 export const getFunnelSteps = async (
-	funnelId: string,
 	payload: FunnelStepsPayload,
 	signal?: AbortSignal,
 ): Promise<SuccessResponse<FunnelStepsResponse> | ErrorResponse> => {
 	const response = await axios.post(
-		`${FUNNELS_BASE_PATH}/${funnelId}/analytics/steps`,
+		`${FUNNELS_BASE_PATH}/analytics/steps`,
 		payload,
 		{ signal },
 	);
@@ -330,6 +329,7 @@ export interface FunnelStepsOverviewPayload {
 	end_time: number;
 	step_start?: number;
 	step_end?: number;
+	steps: FunnelStepData[];
 }
 
 export interface FunnelStepsOverviewResponse {
@@ -341,12 +341,11 @@ export interface FunnelStepsOverviewResponse {
 }
 
 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`,
+		`${FUNNELS_BASE_PATH}/analytics/steps/overview`,
 		payload,
 		{ signal },
 	);

frontend/src/api/userFeedback/sendFeedback.ts

@@ -1,21 +0,0 @@
-import axios from 'api';
-import { Props } from 'types/api/userFeedback/sendResponse';
-
-const sendFeedback = async (props: Props): Promise<number> => {
-	const response = await axios.post(
-		'/feedback',
-		{
-			email: props.email,
-			message: props.message,
-		},
-		{
-			headers: {
-				'Content-Type': 'application/x-www-form-urlencoded',
-			},
-		},
-	);
-
-	return response.status;
-};
-
-export default sendFeedback;

frontend/src/components/ChangelogModal/ChangelogModal.styles.scss

@@ -0,0 +1,161 @@
+.changelog-modal {
+	.ant-modal-content {
+		padding: unset;
+		background-color: var(--bg-ink-400, #121317);
+
+		.ant-modal-header {
+			margin-bottom: unset;
+		}
+
+		.ant-modal-footer {
+			margin-top: unset;
+		}
+	}
+
+	&-title {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+		background-color: var(--bg-ink-400, #121317);
+		padding: 16px;
+		font-size: 14px;
+		line-height: 20px;
+		color: var(--text-vanilla-100, #fff);
+		border-bottom: 1px solid var(--bg-slate-500, #161922);
+	}
+
+	&-footer.scroll-available {
+		.scroll-btn-container {
+			display: block;
+		}
+	}
+
+	&-footer {
+		position: relative;
+		border: 1px solid var(--bg-slate-500, #161922);
+		padding: 12px;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+
+		&-label {
+			color: var(--text-robin-400, #7190f9);
+			font-size: 14px;
+			line-height: 24px;
+			position: relative;
+			padding-left: 14px;
+
+			&::before {
+				content: '';
+				position: absolute;
+				top: 50%;
+				left: 0;
+				transform: translateY(-50%);
+				width: 6px;
+				height: 6px;
+				border-radius: 100%;
+				background-color: var(--bg-robin-500, #7190f9);
+			}
+		}
+
+		&-ctas {
+			display: flex;
+
+			& svg {
+				font-size: 14px;
+			}
+		}
+
+		.scroll-btn-container {
+			display: none;
+			position: absolute;
+			top: -40px;
+			left: 50%;
+			transform: translateX(-50%);
+
+			.scroll-btn {
+				all: unset;
+				padding: 4px 12px 4px 10px;
+				background-color: var(--bg-slate-400, #1d212d);
+				border-radius: 20px;
+				cursor: pointer;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				gap: 4px;
+				transition: background-color 0.1s;
+
+				&:hover {
+					background-color: var(--bg-slate-200, #2c3140);
+				}
+
+				&:active {
+					background-color: var(--bg-slate-600, #1c1f2a);
+				}
+
+				span {
+					font-size: 12px;
+					line-height: 18px;
+					color: var(--text-vanilla-400, #c0c1c3);
+				}
+
+				// add animation to the chevrons down icon
+				svg {
+					animation: pulse 1s infinite;
+				}
+			}
+		}
+	}
+
+	&-content {
+		max-height: calc(100vh - 300px);
+		overflow-y: auto;
+		padding: 16px;
+		border: 1px solid var(--bg-slate-500, #161922);
+		border-top-width: 0;
+		border-bottom-width: 0;
+	}
+}
+
+// pulse for the scroll for more icon
+@keyframes pulse {
+	0% {
+		opacity: 1;
+	}
+	50% {
+		opacity: 0.5;
+	}
+}
+
+.lightMode {
+	.changelog-modal {
+		.ant-modal-content {
+			background-color: var(--bg-vanilla-100);
+			border-color: var(--bg-vanilla-300);
+		}
+
+		&-title {
+			background: var(--bg-vanilla-100);
+			color: var(--bg-ink-500);
+			border-color: var(--bg-vanilla-300);
+		}
+
+		&-content {
+			border-color: var(--bg-vanilla-300);
+		}
+
+		&-footer {
+			border-color: var(--bg-vanilla-300);
+
+			.scroll-btn-container {
+				.scroll-btn {
+					background-color: var(--bg-vanilla-300);
+
+					span {
+						color: var(--text-ink-500);
+					}
+				}
+			}
+		}
+	}
+}

frontend/src/components/ChangelogModal/ChangelogModal.tsx

@@ -0,0 +1,131 @@
+import './ChangelogModal.styles.scss';
+
+import { CheckOutlined, CloseOutlined } from '@ant-design/icons';
+import { Button, Modal } from 'antd';
+import cx from 'classnames';
+import dayjs from 'dayjs';
+import { ChevronsDown, ScrollText } from 'lucide-react';
+import { useAppContext } from 'providers/App/App';
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+import ChangelogRenderer from './components/ChangelogRenderer';
+
+interface Props {
+	onClose: () => void;
+}
+
+function ChangelogModal({ onClose }: Props): JSX.Element {
+	const [hasScroll, setHasScroll] = useState(false);
+	const changelogContentSectionRef = useRef<HTMLDivElement>(null);
+	const { changelog } = useAppContext();
+
+	const formattedReleaseDate = dayjs(changelog?.release_date).format(
+		'MMMM D, YYYY',
+	);
+
+	const checkScroll = useCallback((): void => {
+		if (changelogContentSectionRef.current) {
+			const {
+				scrollHeight,
+				clientHeight,
+				scrollTop,
+			} = changelogContentSectionRef.current;
+			const isAtBottom = scrollHeight - clientHeight - scrollTop <= 8;
+			setHasScroll(scrollHeight > clientHeight + 24 && !isAtBottom); // 24px - buffer height to show show more
+		}
+	}, []);
+
+	useEffect(() => {
+		checkScroll();
+		const changelogContentSection = changelogContentSectionRef.current;
+
+		if (changelogContentSection) {
+			changelogContentSection.addEventListener('scroll', checkScroll);
+		}
+
+		return (): void => {
+			if (changelogContentSection) {
+				changelogContentSection.removeEventListener('scroll', checkScroll);
+			}
+		};
+	}, [checkScroll]);
+
+	const onClickUpdateWorkspace = (): void => {
+		window.open(
+			'https://github.com/SigNoz/signoz/releases',
+			'_blank',
+			'noopener,noreferrer',
+		);
+	};
+
+	const onClickScrollForMore = (): void => {
+		if (changelogContentSectionRef.current) {
+			changelogContentSectionRef.current.scrollTo({
+				top: changelogContentSectionRef.current.scrollTop + 600, // Scroll 600px from the current position
+				behavior: 'smooth',
+			});
+		}
+	};
+
+	return (
+		<Modal
+			className={cx('changelog-modal')}
+			title={
+				<div className="changelog-modal-title">
+					<ScrollText size={16} />
+					What’s New ⎯ Changelog : {formattedReleaseDate}
+				</div>
+			}
+			width={820}
+			open
+			onCancel={onClose}
+			footer={
+				<div
+					className={cx('changelog-modal-footer', hasScroll && 'scroll-available')}
+				>
+					{changelog?.features && changelog.features.length > 0 && (
+						<span className="changelog-modal-footer-label">
+							{changelog.features.length} new&nbsp;
+							{changelog.features.length > 1 ? 'features' : 'feature'}
+						</span>
+					)}
+					<div className="changelog-modal-footer-ctas">
+						<Button type="default" icon={<CloseOutlined />} onClick={onClose}>
+							Skip for now
+						</Button>
+						<Button
+							type="primary"
+							icon={<CheckOutlined />}
+							onClick={onClickUpdateWorkspace}
+						>
+							Update my workspace
+						</Button>
+					</div>
+					{changelog && (
+						<div className="scroll-btn-container">
+							<button
+								data-testid="scroll-more-btn"
+								type="button"
+								className="scroll-btn"
+								onClick={onClickScrollForMore}
+							>
+								<ChevronsDown size={14} />
+								<span>Scroll for more</span>
+							</button>
+						</div>
+					)}
+				</div>
+			}
+		>
+			<div
+				className="changelog-modal-content"
+				data-testid="changelog-content"
+				ref={changelogContentSectionRef}
+			>
+				{changelog && <ChangelogRenderer changelog={changelog} />}
+			</div>
+		</Modal>
+	);
+}
+
+export default ChangelogModal;

frontend/src/components/ChangelogModal/__test__/ChangelogModal.test.tsx

@@ -0,0 +1,79 @@
+/* eslint-disable sonarjs/no-duplicate-string */
+/* eslint-disable sonarjs/no-identical-functions */
+/* eslint-disable @typescript-eslint/explicit-function-return-type */
+
+import { fireEvent, render, screen } from '@testing-library/react';
+
+import ChangelogModal from '../ChangelogModal';
+
+const mockChangelog = {
+	release_date: '2025-06-10',
+	features: [
+		{
+			id: 1,
+			title: 'Feature 1',
+			description: 'Description for feature 1',
+			media: null,
+		},
+	],
+	bug_fixes: 'Bug fix details',
+	maintenance: 'Maintenance details',
+};
+
+// Mock react-markdown to just render children as plain text
+jest.mock(
+	'react-markdown',
+	() =>
+		function ReactMarkdown({ children }: any) {
+			return <div>{children}</div>;
+		},
+);
+
+// mock useAppContext
+jest.mock('providers/App/App', () => ({
+	useAppContext: jest.fn(() => ({ changelog: mockChangelog })),
+}));
+
+describe('ChangelogModal', () => {
+	it('renders modal with changelog data', () => {
+		render(<ChangelogModal onClose={jest.fn()} />);
+		expect(
+			screen.getByText('What’s New ⎯ Changelog : June 10, 2025'),
+		).toBeInTheDocument();
+		expect(screen.getByText('Feature 1')).toBeInTheDocument();
+		expect(screen.getByText('Description for feature 1')).toBeInTheDocument();
+		expect(screen.getByText('Bug fix details')).toBeInTheDocument();
+		expect(screen.getByText('Maintenance details')).toBeInTheDocument();
+	});
+
+	it('calls onClose when Skip for now is clicked', () => {
+		const onClose = jest.fn();
+		render(<ChangelogModal onClose={onClose} />);
+		fireEvent.click(screen.getByText('Skip for now'));
+		expect(onClose).toHaveBeenCalled();
+	});
+
+	it('opens migration docs when Update my workspace is clicked', () => {
+		window.open = jest.fn();
+		render(<ChangelogModal onClose={jest.fn()} />);
+		fireEvent.click(screen.getByText('Update my workspace'));
+		expect(window.open).toHaveBeenCalledWith(
+			'https://github.com/SigNoz/signoz/releases',
+			'_blank',
+			'noopener,noreferrer',
+		);
+	});
+
+	it('scrolls for more when Scroll for more is clicked', () => {
+		render(<ChangelogModal onClose={jest.fn()} />);
+		const scrollBtn = screen.getByTestId('scroll-more-btn');
+		const contentDiv = screen.getByTestId('changelog-content');
+		if (contentDiv) {
+			contentDiv.scrollTo = jest.fn();
+		}
+		fireEvent.click(scrollBtn);
+		if (contentDiv) {
+			expect(contentDiv.scrollTo).toHaveBeenCalled();
+		}
+	});
+});

frontend/src/components/ChangelogModal/__test__/ChangelogRenderer.test.tsx

@@ -0,0 +1,63 @@
+/* eslint-disable sonarjs/no-duplicate-string */
+/* eslint-disable sonarjs/no-identical-functions */
+/* eslint-disable @typescript-eslint/explicit-function-return-type */
+
+import { render, screen } from '@testing-library/react';
+
+import ChangelogRenderer from '../components/ChangelogRenderer';
+
+// Mock react-markdown to just render children as plain text
+jest.mock(
+	'react-markdown',
+	() =>
+		function ReactMarkdown({ children }: any) {
+			return <div>{children}</div>;
+		},
+);
+
+const mockChangelog = {
+	id: 1,
+	documentId: 'changelog-doc-1',
+	version: '1.0.0',
+	createdAt: '2025-06-09T12:00:00Z',
+	release_date: '2025-06-10',
+	features: [
+		{
+			id: 1,
+			documentId: '1',
+			title: 'Feature 1',
+			description: 'Description for feature 1',
+			sort_order: 1,
+			createdAt: '',
+			updatedAt: '',
+			publishedAt: '',
+			deployment_type: 'All',
+			media: {
+				id: 1,
+				documentId: 'doc1',
+				ext: '.webp',
+				url: '/uploads/feature1.webp',
+				mime: 'image/webp',
+				alternativeText: null,
+			},
+		},
+	],
+	bug_fixes: 'Bug fix details',
+	updatedAt: '2025-06-09T12:00:00Z',
+	publishedAt: '2025-06-09T12:00:00Z',
+	maintenance: 'Maintenance details',
+};
+
+describe('ChangelogRenderer', () => {
+	it('renders release date', () => {
+		render(<ChangelogRenderer changelog={mockChangelog} />);
+		expect(screen.getByText('June 10, 2025')).toBeInTheDocument();
+	});
+
+	it('renders features, media, and description', () => {
+		render(<ChangelogRenderer changelog={mockChangelog} />);
+		expect(screen.getByText('Feature 1')).toBeInTheDocument();
+		expect(screen.getByAltText('Media')).toBeInTheDocument();
+		expect(screen.getByText('Description for feature 1')).toBeInTheDocument();
+	});
+});

frontend/src/components/ChangelogModal/components/ChangelogRenderer.styles.scss

@@ -0,0 +1,136 @@
+.changelog-renderer {
+	position: relative;
+	padding-left: 20px;
+
+	.changelog-release-date {
+		font-size: 14px;
+		line-height: 20px;
+		color: var(--text-vanilla-400, #c0c1c3);
+	}
+
+	&-list {
+		display: flex;
+		flex-direction: column;
+		gap: 28px;
+	}
+
+	&-line {
+		position: absolute;
+		left: 0;
+		top: 6px;
+		bottom: -30px;
+		width: 1px;
+		background-color: var(--bg-slate-400, #1d212d);
+
+		.inner-ball {
+			position: absolute;
+			left: 50%;
+			width: 6px;
+			height: 6px;
+			border-radius: 100%;
+			transform: translateX(-50%);
+			background-color: var(--bg-robin-500, #7190f9);
+		}
+	}
+
+	ul,
+	ol {
+		list-style: none;
+		display: flex;
+		flex-direction: column;
+		gap: 16px;
+		padding-left: 30px;
+
+		li {
+			position: relative;
+			&::before {
+				content: '';
+				position: absolute;
+				left: -10px;
+				top: 10px;
+				width: 20px;
+				height: 2px;
+				background-color: var(--bg-robin-500, #7190f9);
+				transform: translate(-100%, -50%);
+			}
+		}
+	}
+
+	li,
+	p {
+		font-size: 14px;
+		line-height: 20px;
+		color: var(--text-vanilla-400, #c0c1c3);
+	}
+
+	code {
+		padding: 2px 4px;
+		background-color: var(--bg-slate-500, #161922);
+		border-radius: 6px;
+		font-size: 95%;
+		vertical-align: middle;
+		border: 1px solid var(--bg-slate-600, #1c1f2a);
+	}
+	a {
+		color: var(--text-robin-500, #7190f9);
+		font-weight: 600;
+		text-decoration: underline;
+
+		&:hover {
+			text-decoration: none;
+		}
+	}
+
+	h1,
+	h2,
+	h3,
+	h4,
+	h5,
+	h6 {
+		font-weight: 600;
+		color: var(--text-vanilla-100, #fff);
+	}
+
+	h1 {
+		font-size: 24px;
+		line-height: 32px;
+	}
+
+	h2 {
+		font-size: 20px;
+		line-height: 28px;
+	}
+
+	.changelog-media-image {
+		height: auto;
+		width: 100%;
+		overflow: hidden;
+		border-radius: 4px;
+		border: 1px solid var(--bg-slate-400, #1d212d);
+	}
+}
+
+.lightMode {
+	.changelog-renderer {
+		.changelog-release-date {
+			color: var(--text-ink-500);
+		}
+
+		&-line {
+			background-color: var(--bg-vanilla-300);
+		}
+		li,
+		p {
+			color: var(--text-ink-500);
+		}
+
+		h1,
+		h2,
+		h3,
+		h4,
+		h5,
+		h6 {
+			color: var(--text-ink-500);
+		}
+	}
+}

frontend/src/components/ChangelogModal/components/ChangelogRenderer.tsx

@@ -0,0 +1,89 @@
+import './ChangelogRenderer.styles.scss';
+
+import dayjs from 'dayjs';
+import ReactMarkdown from 'react-markdown';
+import {
+	ChangelogSchema,
+	Media,
+	SupportedImageTypes,
+	SupportedVideoTypes,
+} from 'types/api/changelog/getChangelogByVersion';
+
+interface Props {
+	changelog: ChangelogSchema;
+}
+
+function renderMedia(media: Media): JSX.Element | null {
+	if (SupportedImageTypes.includes(media.ext)) {
+		return (
+			<img
+				src={media.url}
+				alt={media.alternativeText || 'Media'}
+				width={800}
+				height={450}
+				className="changelog-media-image"
+			/>
+		);
+	}
+	if (SupportedVideoTypes.includes(media.ext)) {
+		return (
+			<video
+				autoPlay
+				controls
+				controlsList="nodownload noplaybackrate"
+				loop
+				className="my-3 h-auto w-full rounded"
+			>
+				<source src={media.url} type={media.mime} />
+				<track kind="captions" src="" label="No captions available" default />
+				Your browser does not support the video tag.
+			</video>
+		);
+	}
+
+	return null;
+}
+
+function ChangelogRenderer({ changelog }: Props): JSX.Element {
+	const formattedReleaseDate = dayjs(changelog.release_date).format(
+		'MMMM D, YYYY',
+	);
+
+	return (
+		<div className="changelog-renderer">
+			<div className="changelog-renderer-line">
+				<div className="inner-ball" />
+			</div>
+			<span className="changelog-release-date">{formattedReleaseDate}</span>
+			{changelog.features && changelog.features.length > 0 && (
+				<div className="changelog-renderer-list flex flex-col gap-7">
+					{changelog.features.map((feature) => (
+						<div key={feature.id}>
+							<h2>{feature.title}</h2>
+							{feature.media && renderMedia(feature.media)}
+							<ReactMarkdown>{feature.description}</ReactMarkdown>
+						</div>
+					))}
+				</div>
+			)}
+			{changelog.bug_fixes && changelog.bug_fixes.length > 0 && (
+				<div>
+					<h2>Bug Fixes</h2>
+					{changelog.bug_fixes && (
+						<ReactMarkdown>{changelog.bug_fixes}</ReactMarkdown>
+					)}
+				</div>
+			)}
+			{changelog.maintenance && changelog.maintenance.length > 0 && (
+				<div>
+					<h2>Maintenance</h2>
+					{changelog.maintenance && (
+						<ReactMarkdown>{changelog.maintenance}</ReactMarkdown>
+					)}
+				</div>
+			)}
+		</div>
+	);
+}
+
+export default ChangelogRenderer;

frontend/src/components/HostMetricsDetail/HostMetricsDetails.tsx

@@ -430,9 +430,13 @@ function HostMetricsDetails({
 								>
 									{host.active ? 'ACTIVE' : 'INACTIVE'}
 								</Tag>
-								<Tag className="infra-monitoring-tags" bordered>
-									{host.os}
-								</Tag>
+								{host.os ? (
+									<Tag className="infra-monitoring-tags" bordered>
+										{host.os}
+									</Tag>
+								) : (
+									<Typography.Text>-</Typography.Text>
+								)}
 								<div className="progress-container">
 									<Progress
 										percent={Number((host.cpu * 100).toFixed(1))}

frontend/src/components/Logs/AddToQueryHOC.tsx

@@ -5,17 +5,19 @@ import cx from 'classnames';
 import { OPERATORS } from 'constants/queryBuilder';
 import { FontSize } from 'container/OptionsMenu/types';
 import { memo, MouseEvent, ReactNode, useMemo } from 'react';
+import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
 
 function AddToQueryHOC({
 	fieldKey,
 	fieldValue,
 	onAddToQuery,
 	fontSize,
+	dataType = DataTypes.EMPTY,
 	children,
 }: AddToQueryHOCProps): JSX.Element {
 	const handleQueryAdd = (event: MouseEvent<HTMLDivElement>): void => {
 		event.stopPropagation();
-		onAddToQuery(fieldKey, fieldValue, OPERATORS['=']);
+		onAddToQuery(fieldKey, fieldValue, OPERATORS['='], undefined, dataType);
 	};
 
 	const popOverContent = useMemo(() => <span>Add to query: {fieldKey}</span>, [
@@ -35,9 +37,20 @@ function AddToQueryHOC({
 export interface AddToQueryHOCProps {
 	fieldKey: string;
 	fieldValue: string;
-	onAddToQuery: (fieldKey: string, fieldValue: string, operator: string) => void;
+	onAddToQuery: (
+		fieldKey: string,
+		fieldValue: string,
+		operator: string,
+		isJSON?: boolean,
+		dataType?: DataTypes,
+	) => void;
 	fontSize: FontSize;
+	dataType?: DataTypes;
 	children: ReactNode;
 }
 
+AddToQueryHOC.defaultProps = {
+	dataType: DataTypes.EMPTY,
+};
+
 export default memo(AddToQueryHOC);

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

@@ -20,6 +20,7 @@ export function getDefaultCellStyle(isDarkMode?: boolean): CSSProperties {
 
 export const defaultTableStyle: CSSProperties = {
 	minWidth: '40rem',
+	maxWidth: '60rem',
 };
 
 export const defaultListViewPanelStyle: CSSProperties = {

frontend/src/components/RouteTab/index.tsx

@@ -1,4 +1,5 @@
 import { Tabs, TabsProps } from 'antd';
+import { escapeRegExp } from 'lodash-es';
 import { useLocation, useParams } from 'react-router-dom';
 
 import { RouteTabProps } from './types';
@@ -28,7 +29,11 @@ function RouteTab({
 
 	// Find the matching route for the current pathname
 	const currentRoute = routesWithParams.find((route) => {
-		const routePattern = route.route.replace(/:(\w+)/g, '([^/]+)');
+		const pathnameOnly = route.route.split('?')[0];
+		const routePattern = escapeRegExp(pathnameOnly).replace(
+			/\\:([a-zA-Z0-9_]+)/g,
+			'([^/]+)',
+		);
 		const regex = new RegExp(`^${routePattern}$`);
 		return regex.test(location.pathname);
 	});

frontend/src/constants/localStorage.ts

@@ -30,5 +30,5 @@ export enum LOCALSTORAGE {
 	SHOW_EXCEPTIONS_QUICK_FILTERS = 'SHOW_EXCEPTIONS_QUICK_FILTERS',
 	BANNER_DISMISSED = 'BANNER_DISMISSED',
 	QUICK_FILTERS_SETTINGS_ANNOUNCEMENT = 'QUICK_FILTERS_SETTINGS_ANNOUNCEMENT',
-	UNEXECUTED_FUNNELS = 'UNEXECUTED_FUNNELS',
+	FUNNEL_STEPS = 'FUNNEL_STEPS',
 }

frontend/src/constants/routes.ts

@@ -29,7 +29,7 @@ const ROUTES = {
 	ALERT_OVERVIEW: '/alerts/overview',
 	ALL_CHANNELS: '/settings/channels',
 	CHANNELS_NEW: '/settings/channels/new',
-	CHANNELS_EDIT: '/settings/channels/edit/:id',
+	CHANNELS_EDIT: '/settings/channels/edit/:channelId',
 	ALL_ERROR: '/exceptions',
 	ERROR_DETAIL: '/error-detail',
 	VERSION: '/status',
@@ -62,8 +62,10 @@ const ROUTES = {
 	WORKSPACE_SUSPENDED: '/workspace-suspended',
 	SHORTCUTS: '/settings/shortcuts',
 	INTEGRATIONS: '/integrations',
+	MESSAGING_QUEUES_BASE: '/messaging-queues',
 	MESSAGING_QUEUES_KAFKA: '/messaging-queues/kafka',
 	MESSAGING_QUEUES_KAFKA_DETAIL: '/messaging-queues/kafka/detail',
+	INFRASTRUCTURE_MONITORING_BASE: '/infrastructure-monitoring',
 	INFRASTRUCTURE_MONITORING_HOSTS: '/infrastructure-monitoring/hosts',
 	INFRASTRUCTURE_MONITORING_KUBERNETES: '/infrastructure-monitoring/kubernetes',
 	MESSAGING_QUEUES_CELERY_TASK: '/messaging-queues/celery-task',
@@ -71,6 +73,7 @@ const ROUTES = {
 	METRICS_EXPLORER: '/metrics-explorer/summary',
 	METRICS_EXPLORER_EXPLORER: '/metrics-explorer/explorer',
 	METRICS_EXPLORER_VIEWS: '/metrics-explorer/views',
+	API_MONITORING_BASE: '/api-monitoring',
 	API_MONITORING: '/api-monitoring/explorer',
 	METRICS_EXPLORER_BASE: '/metrics-explorer',
 	WORKSPACE_ACCESS_RESTRICTED: '/workspace-access-restricted',

frontend/src/container/AllAlertChannels/AlertChannels.tsx

@@ -23,7 +23,7 @@ function AlertChannels({ allChannels }: AlertChannelsProps): JSX.Element {
 	const onClickEditHandler = useCallback((id: string) => {
 		history.push(
 			generatePath(ROUTES.CHANNELS_EDIT, {
-				id,
+				channelId: id,
 			}),
 		);
 	}, []);

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

@@ -120,14 +120,19 @@ describe('Create Alert Channel', () => {
 			expect(screen.getByText('button_test_channel')).toBeInTheDocument();
 			expect(screen.getByText('button_return')).toBeInTheDocument();
 		});
-		it('Should check if saving the form without filling the name displays "Something went wrong"', async () => {
+		it('Should check if saving the form without filling the name displays error notification', async () => {
 			const saveButton = screen.getByRole('button', {
 				name: 'button_save_channel',
 			});
 
 			fireEvent.click(saveButton);
 
-			await waitFor(() => expect(showErrorModal).toHaveBeenCalled());
+			await waitFor(() =>
+				expect(errorNotification).toHaveBeenCalledWith({
+					message: 'Error',
+					description: 'channel_name_required',
+				}),
+			);
 		});
 		it('Should check if clicking on Test button shows "An alert has been sent to this channel" success message if testing passes', async () => {
 			server.use(

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

@@ -1,8 +1,34 @@
+.app-banner-container {
+	position: relative;
+	width: 100%;
+}
+
 .app-layout {
 	position: relative;
 	height: 100%;
 	width: 100%;
 
+	&.isWorkspaceRestricted {
+		height: calc(100% - 32px);
+
+		// same styles as its either trial expired or payment failed
+		&.isTrialExpired {
+			height: calc(100% - 64px);
+		}
+
+		&.isPaymentFailed {
+			height: calc(100% - 64px);
+		}
+	}
+
+	&.isTrialExpired {
+		height: calc(100% - 32px);
+	}
+
+	&.isPaymentFailed {
+		height: calc(100% - 32px);
+	}
+
 	.app-content {
 		width: calc(100% - 64px); // width of the sidebar
 		z-index: 0;
@@ -163,3 +189,9 @@
 		text-underline-offset: 2px;
 	}
 }
+
+.workspace-restricted-banner,
+.trial-expiry-banner,
+.payment-failed-banner {
+	height: 32px;
+}

frontend/src/container/AppLayout/index.tsx

@@ -7,6 +7,7 @@ import * as Sentry from '@sentry/react';
 import { Flex } from 'antd';
 import getLocalStorageApi from 'api/browser/localstorage/get';
 import setLocalStorageApi from 'api/browser/localstorage/set';
+import getChangelogByVersion from 'api/changelog/getChangelogByVersion';
 import logEvent from 'api/common/logEvent';
 import manageCreditCardApi from 'api/v1/portal/create';
 import getUserLatestVersion from 'api/v1/version/getLatestVersion';
@@ -40,9 +41,10 @@ import {
 import { Helmet } from 'react-helmet-async';
 import { useTranslation } from 'react-i18next';
 import { useMutation, useQueries } from 'react-query';
-import { useDispatch } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import { useLocation } from 'react-router-dom';
 import { Dispatch } from 'redux';
+import { AppState } from 'store/reducers';
 import AppActions from 'types/actions';
 import {
 	UPDATE_CURRENT_ERROR,
@@ -50,15 +52,18 @@ import {
 	UPDATE_LATEST_VERSION,
 	UPDATE_LATEST_VERSION_ERROR,
 } from 'types/actions/app';
-import { SuccessResponseV2 } from 'types/api';
+import { ErrorResponse, SuccessResponse, SuccessResponseV2 } from 'types/api';
 import { CheckoutSuccessPayloadProps } from 'types/api/billing/checkout';
+import { ChangelogSchema } from 'types/api/changelog/getChangelogByVersion';
 import APIError from 'types/api/error';
 import {
 	LicenseEvent,
 	LicensePlatform,
 	LicenseState,
 } from 'types/api/licensesV3/getActive';
+import AppReducer from 'types/reducer/app';
 import { USER_ROLES } from 'types/roles';
+import { checkVersionState } from 'utils/app';
 import { eventEmitter } from 'utils/getEventEmitter';
 import {
 	getFormattedDate,
@@ -81,6 +86,7 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 		isFetchingFeatureFlags,
 		featureFlagsFetchError,
 		userPreferences,
+		updateChangelog,
 	} = useAppContext();
 
 	const { notifications } = useNotifications();
@@ -92,6 +98,15 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 
 	const [showSlowApiWarning, setShowSlowApiWarning] = useState(false);
 	const [slowApiWarningShown, setSlowApiWarningShown] = useState(false);
+	const [shouldFetchChangelog, setShouldFetchChangelog] = useState<boolean>(
+		false,
+	);
+
+	const { currentVersion, latestVersion } = useSelector<AppState, AppReducer>(
+		(state) => state.app,
+	);
+
+	const isLatestVersion = checkVersionState(currentVersion, latestVersion);
 
 	const handleBillingOnSuccess = (
 		data: SuccessResponseV2<CheckoutSuccessPayloadProps>,
@@ -129,7 +144,11 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 
 	const { isCloudUser: isCloudUserVal } = useGetTenantLicense();
 
-	const [getUserVersionResponse, getUserLatestVersionResponse] = useQueries([
+	const [
+		getUserVersionResponse,
+		getUserLatestVersionResponse,
+		getChangelogByVersionResponse,
+	] = useQueries([
 		{
 			queryFn: getUserVersion,
 			queryKey: ['getUserVersion', user?.accessJwt],
@@ -140,6 +159,12 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 			queryKey: ['getUserLatestVersion', user?.accessJwt],
 			enabled: isLoggedIn,
 		},
+		{
+			queryFn: (): Promise<SuccessResponse<ChangelogSchema> | ErrorResponse> =>
+				getChangelogByVersion(latestVersion),
+			queryKey: ['getChangelogByVersion', latestVersion],
+			enabled: isLoggedIn && !isCloudUserVal && shouldFetchChangelog,
+		},
 	]);
 
 	useEffect(() => {
@@ -242,6 +267,30 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 		notifications,
 	]);
 
+	useEffect(() => {
+		if (!isLatestVersion) {
+			setShouldFetchChangelog(true);
+		}
+	}, [isLatestVersion]);
+
+	useEffect(() => {
+		if (
+			getChangelogByVersionResponse.isFetched &&
+			getChangelogByVersionResponse.isSuccess &&
+			getChangelogByVersionResponse.data &&
+			getChangelogByVersionResponse.data.payload
+		) {
+			updateChangelog(getChangelogByVersionResponse.data.payload);
+		}
+	}, [
+		updateChangelog,
+		getChangelogByVersionResponse.isFetched,
+		getChangelogByVersionResponse.isLoading,
+		getChangelogByVersionResponse.isError,
+		getChangelogByVersionResponse.data,
+		getChangelogByVersionResponse.isSuccess,
+	]);
+
 	const isToDisplayLayout = isLoggedIn;
 
 	const routeKey = useMemo(() => getRouteKey(pathname), [pathname]);
@@ -551,53 +600,63 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 		(preference) => preference.name === USER_PREFERENCES.SIDENAV_PINNED,
 	)?.value as boolean;
 
+	const SHOW_TRIAL_EXPIRY_BANNER =
+		showTrialExpiryBanner && !showPaymentFailedWarning;
+	const SHOW_WORKSPACE_RESTRICTED_BANNER = showWorkspaceRestricted;
+	const SHOW_PAYMENT_FAILED_BANNER =
+		!showTrialExpiryBanner && showPaymentFailedWarning;
+
 	return (
 		<Layout className={cx(isDarkMode ? 'darkMode dark' : 'lightMode')}>
 			<Helmet>
 				<title>{pageTitle}</title>
 			</Helmet>
 
-			{showTrialExpiryBanner && !showPaymentFailedWarning && (
-				<div className="trial-expiry-banner">
-					You are in free trial period. Your free trial will end on{' '}
-					<span>{getFormattedDate(trialInfo?.trialEnd || Date.now())}.</span>
-					{user.role === USER_ROLES.ADMIN ? (
-						<span>
-							{' '}
-							Please{' '}
-							<a className="upgrade-link" onClick={handleUpgrade}>
-								upgrade
-							</a>
-							to continue using SigNoz features.
-						</span>
-					) : (
-						'Please contact your administrator for upgrading to a paid plan.'
+			{isLoggedIn && (
+				<div className={cx('app-banner-container')}>
+					{SHOW_TRIAL_EXPIRY_BANNER && (
+						<div className="trial-expiry-banner">
+							You are in free trial period. Your free trial will end on{' '}
+							<span>{getFormattedDate(trialInfo?.trialEnd || Date.now())}.</span>
+							{user.role === USER_ROLES.ADMIN ? (
+								<span>
+									{' '}
+									Please{' '}
+									<a className="upgrade-link" onClick={handleUpgrade}>
+										upgrade
+									</a>
+									to continue using SigNoz features.
+								</span>
+							) : (
+								'Please contact your administrator for upgrading to a paid plan.'
+							)}
+						</div>
 					)}
-				</div>
-			)}
 
-			{showWorkspaceRestricted && renderWorkspaceRestrictedBanner()}
+					{SHOW_WORKSPACE_RESTRICTED_BANNER && renderWorkspaceRestrictedBanner()}
 
-			{!showTrialExpiryBanner && showPaymentFailedWarning && (
-				<div className="payment-failed-banner">
-					Your bill payment has failed. Your workspace will get suspended on{' '}
-					<span>
-						{getFormattedDateWithMinutes(
-							dayjs(activeLicense?.event_queue?.scheduled_at).unix() || Date.now(),
-						)}
-						.
-					</span>
-					{user.role === USER_ROLES.ADMIN ? (
-						<span>
-							{' '}
-							Please{' '}
-							<a className="upgrade-link" onClick={handleFailedPayment}>
-								pay the bill
-							</a>
-							to continue using SigNoz features.
-						</span>
-					) : (
-						' Please contact your administrator to pay the bill.'
+					{SHOW_PAYMENT_FAILED_BANNER && (
+						<div className="payment-failed-banner">
+							Your bill payment has failed. Your workspace will get suspended on{' '}
+							<span>
+								{getFormattedDateWithMinutes(
+									dayjs(activeLicense?.event_queue?.scheduled_at).unix() || Date.now(),
+								)}
+								.
+							</span>
+							{user.role === USER_ROLES.ADMIN ? (
+								<span>
+									{' '}
+									Please{' '}
+									<a className="upgrade-link" onClick={handleFailedPayment}>
+										pay the bill
+									</a>
+									to continue using SigNoz features.
+								</span>
+							) : (
+								' Please contact your administrator to pay the bill.'
+							)}
+						</div>
 					)}
 				</div>
 			)}
@@ -607,6 +666,9 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 					'app-layout',
 					isDarkMode ? 'darkMode dark' : 'lightMode',
 					sideNavPinned ? 'side-nav-pinned' : '',
+					SHOW_WORKSPACE_RESTRICTED_BANNER ? 'isWorkspaceRestricted' : '',
+					SHOW_TRIAL_EXPIRY_BANNER ? 'isTrialExpired' : '',
+					SHOW_PAYMENT_FAILED_BANNER ? 'isPaymentFailed' : '',
 				)}
 			>
 				{isToDisplayLayout && !renderFullScreen && (

frontend/src/container/CloudIntegrationPage/CloudIntegrationPage.tsx

@@ -14,7 +14,7 @@ function CloudIntegrationPage(): JSX.Element {
 			<HeroSection />
 			<RequestIntegrationBtn
 				type={IntegrationType.AWS_SERVICES}
-				message="Cannot find the AWS service you're looking for? Request more integrations"
+				message="Can't find the AWS service you're looking for? Request more integrations"
 			/>
 			<ServicesTabs />
 		</div>

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

@@ -60,26 +60,30 @@ function CloudServiceDataCollected({
 
 	return (
 		<div className="cloud-service-data-collected">
-			<div className="cloud-service-data-collected__table">
-				<div className="cloud-service-data-collected__table-heading">Logs</div>
-				<Table
-					columns={logsColumns}
-					dataSource={logsData}
-					// eslint-disable-next-line react/jsx-props-no-spreading
-					{...tableProps}
-					className="cloud-service-data-collected__table-logs"
-				/>
-			</div>
-			<div className="cloud-service-data-collected__table">
-				<div className="cloud-service-data-collected__table-heading">Metrics</div>
-				<Table
-					columns={metricsColumns}
-					dataSource={metricsData}
-					// eslint-disable-next-line react/jsx-props-no-spreading
-					{...tableProps}
-					className="cloud-service-data-collected__table-metrics"
-				/>
-			</div>
+			{logsData && logsData.length > 0 && (
+				<div className="cloud-service-data-collected__table">
+					<div className="cloud-service-data-collected__table-heading">Logs</div>
+					<Table
+						columns={logsColumns}
+						dataSource={logsData}
+						// eslint-disable-next-line react/jsx-props-no-spreading
+						{...tableProps}
+						className="cloud-service-data-collected__table-logs"
+					/>
+				</div>
+			)}
+			{metricsData && metricsData.length > 0 && (
+				<div className="cloud-service-data-collected__table">
+					<div className="cloud-service-data-collected__table-heading">Metrics</div>
+					<Table
+						columns={metricsColumns}
+						dataSource={metricsData}
+						// eslint-disable-next-line react/jsx-props-no-spreading
+						{...tableProps}
+						className="cloud-service-data-collected__table-metrics"
+					/>
+				</div>
+			)}
 		</div>
 	);
 }

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

@@ -51,6 +51,33 @@ function ServiceStatus({
 	return <div className={`service-status ${className}`}>{text}</div>;
 }
 
+function getTabItems(serviceDetailsData: any): TabsProps['items'] {
+	const dashboards = serviceDetailsData?.assets.dashboards || [];
+	const dataCollected = serviceDetailsData?.data_collected || {};
+	const items: TabsProps['items'] = [];
+
+	if (dashboards.length) {
+		items.push({
+			key: 'dashboards',
+			label: `Dashboards (${dashboards.length})`,
+			children: <CloudServiceDashboards service={serviceDetailsData} />,
+		});
+	}
+
+	items.push({
+		key: 'data-collected',
+		label: 'Data Collected',
+		children: (
+			<CloudServiceDataCollected
+				logsData={dataCollected.logs || []}
+				metricsData={dataCollected.metrics || []}
+			/>
+		),
+	});
+
+	return items;
+}
+
 function ServiceDetails(): JSX.Element | null {
 	const urlQuery = useUrlQuery();
 	const cloudAccountId = urlQuery.get('cloudAccountId');
@@ -106,23 +133,7 @@ function ServiceDetails(): JSX.Element | null {
 		return null;
 	}
 
-	const tabItems: TabsProps['items'] = [
-		{
-			key: 'dashboards',
-			label: `Dashboards (${serviceDetailsData?.assets.dashboards.length})`,
-			children: <CloudServiceDashboards service={serviceDetailsData} />,
-		},
-		{
-			key: 'data-collected',
-			label: 'Data Collected',
-			children: (
-				<CloudServiceDataCollected
-					logsData={serviceDetailsData?.data_collected.logs || []}
-					metricsData={serviceDetailsData?.data_collected.metrics || []}
-				/>
-			),
-		},
-	];
+	const tabItems = getTabItems(serviceDetailsData);
 
 	return (
 		<div className="service-details">

frontend/src/container/CloudIntegrationPage/__tests__/RequestIntegration.test.tsx

@@ -34,7 +34,7 @@ describe('Request AWS integration', () => {
 
 		expect(
 			screen.getByText(
-				/cannot find what you’re looking for\? request more integrations/i,
+				/can't find what you’re looking for\? request more integrations/i,
 			),
 		).toBeInTheDocument();
 

frontend/src/container/CreateAlertChannels/index.tsx

@@ -138,6 +138,14 @@ function CreateAlertChannels({
 	);
 
 	const onSlackHandler = useCallback(async () => {
+		if (!selectedConfig.api_url) {
+			notifications.error({
+				message: 'Error',
+				description: t('webhook_url_required'),
+			});
+			return;
+		}
+
 		setSavingState(true);
 
 		try {
@@ -154,7 +162,7 @@ function CreateAlertChannels({
 		} finally {
 			setSavingState(false);
 		}
-	}, [prepareSlackRequest, notifications, t, showErrorModal]);
+	}, [selectedConfig, notifications, t, prepareSlackRequest, showErrorModal]);
 
 	const prepareWebhookRequest = useCallback(() => {
 		// initial api request without auth params
@@ -192,6 +200,14 @@ function CreateAlertChannels({
 	}, [notifications, t, selectedConfig]);
 
 	const onWebhookHandler = useCallback(async () => {
+		if (!selectedConfig.api_url) {
+			notifications.error({
+				message: 'Error',
+				description: t('webhook_url_required'),
+			});
+			return;
+		}
+
 		setSavingState(true);
 		try {
 			const request = prepareWebhookRequest();
@@ -208,7 +224,13 @@ function CreateAlertChannels({
 		} finally {
 			setSavingState(false);
 		}
-	}, [prepareWebhookRequest, notifications, t, showErrorModal]);
+	}, [
+		selectedConfig.api_url,
+		notifications,
+		t,
+		prepareWebhookRequest,
+		showErrorModal,
+	]);
 
 	const preparePagerRequest = useCallback(() => {
 		const validationError = ValidatePagerChannel(selectedConfig as PagerChannel);
@@ -272,6 +294,14 @@ function CreateAlertChannels({
 	);
 
 	const onOpsgenieHandler = useCallback(async () => {
+		if (!selectedConfig.api_key) {
+			notifications.error({
+				message: 'Error',
+				description: t('api_key_required'),
+			});
+			return;
+		}
+
 		setSavingState(true);
 		try {
 			await createOpsgenie(prepareOpsgenieRequest());
@@ -287,7 +317,13 @@ function CreateAlertChannels({
 		} finally {
 			setSavingState(false);
 		}
-	}, [prepareOpsgenieRequest, notifications, t, showErrorModal]);
+	}, [
+		selectedConfig.api_key,
+		notifications,
+		t,
+		prepareOpsgenieRequest,
+		showErrorModal,
+	]);
 
 	const prepareEmailRequest = useCallback(
 		() => ({
@@ -301,6 +337,14 @@ function CreateAlertChannels({
 	);
 
 	const onEmailHandler = useCallback(async () => {
+		if (!selectedConfig.to) {
+			notifications.error({
+				message: 'Error',
+				description: t('to_required'),
+			});
+			return;
+		}
+
 		setSavingState(true);
 		try {
 			const request = prepareEmailRequest();
@@ -317,7 +361,7 @@ function CreateAlertChannels({
 		} finally {
 			setSavingState(false);
 		}
-	}, [prepareEmailRequest, notifications, t, showErrorModal]);
+	}, [prepareEmailRequest, notifications, t, showErrorModal, selectedConfig.to]);
 
 	const prepareMsTeamsRequest = useCallback(
 		() => ({
@@ -331,6 +375,14 @@ function CreateAlertChannels({
 	);
 
 	const onMsTeamsHandler = useCallback(async () => {
+		if (!selectedConfig.webhook_url) {
+			notifications.error({
+				message: 'Error',
+				description: t('webhook_url_required'),
+			});
+			return;
+		}
+
 		setSavingState(true);
 
 		try {
@@ -347,10 +399,24 @@ function CreateAlertChannels({
 		} finally {
 			setSavingState(false);
 		}
-	}, [prepareMsTeamsRequest, notifications, t, showErrorModal]);
+	}, [
+		selectedConfig.webhook_url,
+		notifications,
+		t,
+		prepareMsTeamsRequest,
+		showErrorModal,
+	]);
 
 	const onSaveHandler = useCallback(
 		async (value: ChannelType) => {
+			if (!selectedConfig.name) {
+				notifications.error({
+					message: 'Error',
+					description: t('channel_name_required'),
+				});
+				return;
+			}
+
 			const functionMapper = {
 				[ChannelType.Slack]: onSlackHandler,
 				[ChannelType.Webhook]: onWebhookHandler,

frontend/src/container/EditAlertChannels/index.tsx

@@ -28,7 +28,6 @@ import { useNotifications } from 'hooks/useNotifications';
 import history from 'lib/history';
 import { useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useParams } from 'react-router-dom';
 import APIError from 'types/api/error';
 
 function EditAlertChannels({
@@ -53,7 +52,11 @@ function EditAlertChannels({
 	const [savingState, setSavingState] = useState<boolean>(false);
 	const [testingState, setTestingState] = useState<boolean>(false);
 	const { notifications } = useNotifications();
-	const { id } = useParams<{ id: string }>();
+
+	// Extract channelId from URL pathname since useParams doesn't work in nested routing
+	const { pathname } = window.location;
+	const channelIdMatch = pathname.match(/\/settings\/channels\/edit\/([^/]+)/);
+	const id = channelIdMatch ? channelIdMatch[1] : '';
 
 	const [type, setType] = useState<ChannelType>(
 		initialValue?.type ? (initialValue.type as ChannelType) : ChannelType.Slack,

frontend/src/container/FormAlertChannels/index.tsx

@@ -149,7 +149,7 @@ function FormAlertChannels({
 					</Button>
 					<Button
 						onClick={(): void => {
-							history.replace(ROUTES.SETTINGS);
+							history.replace(ROUTES.ALL_CHANNELS);
 						}}
 					>
 						{t('button_return')}

frontend/src/container/FormAlertRules/QuerySection.tsx

@@ -212,9 +212,12 @@ function QuerySection({
 				return null;
 		}
 	};
+
+	const step2Label = alertDef.alertType === 'METRIC_BASED_ALERT' ? '2' : '1';
+
 	return (
 		<>
-			<StepHeading> {t('alert_form_step2')}</StepHeading>
+			<StepHeading> {t('alert_form_step2', { step: step2Label })}</StepHeading>
 			<FormContainer>
 				<div>{renderTabs(alertType)}</div>
 				{renderQuerySection(currentTab)}

frontend/src/container/FormAlertRules/RuleOptions.tsx

@@ -371,9 +371,11 @@ function RuleOptions({
 		selectedCategory?.name,
 	);
 
+	const step3Label = alertDef.alertType === 'METRIC_BASED_ALERT' ? '3' : '2';
+
 	return (
 		<>
-			<StepHeading>{t('alert_form_step3')}</StepHeading>
+			<StepHeading>{t('alert_form_step3', { step: step3Label })}</StepHeading>
 			<FormContainer>
 				{queryCategory === EQueryType.PROM && renderPromRuleOptions()}
 				{queryCategory !== EQueryType.PROM &&

frontend/src/container/GridCardLayout/__tests__/utils.test.ts

@@ -109,7 +109,7 @@ describe('GridCardLayout Utils', () => {
 			builder: {
 				queryData: [
 					{
-						stepInterval: 30,
+						stepInterval: 60,
 						aggregateOperator: 'avg',
 						dataSource: DataSource.METRICS,
 						queryName: 'A',
@@ -181,7 +181,7 @@ describe('GridCardLayout Utils', () => {
 
 			expect(result.builder.queryData).toHaveLength(2);
 			expect(result.builder.queryData[0].stepInterval).toBe(180);
-			expect(result.builder.queryData[1].stepInterval).toBe(180);
+			expect(result.builder.queryData[1].stepInterval).toBe(45); // 45 is the stepInterval of the second query - custom value
 		});
 
 		it('should use calculated stepInterval when original is undefined', () => {

frontend/src/container/GridCardLayout/utils.ts

@@ -2,7 +2,7 @@ import { FORMULA_REGEXP } from 'constants/regExp';
 import { isEmpty, isEqual } from 'lodash-es';
 import { Layout } from 'react-grid-layout';
 import { Dashboard, Widgets } from 'types/api/dashboard/getAll';
-import { Query } from 'types/api/queryBuilder/queryBuilderData';
+import { IBuilderQuery, Query } from 'types/api/queryBuilder/queryBuilderData';
 
 export const removeUndefinedValuesFromLayout = (layout: Layout[]): Layout[] =>
 	layout.map((obj) =>
@@ -99,6 +99,12 @@ export function updateStepInterval(
 ): Query {
 	const stepIntervalPoints = getStepIntervalPoints(minTime, maxTime);
 
+	// if user haven't enter anything manually, that is we have default value of 60 then do the interval adjustment for bar otherwise apply the user's value
+	const getSteps = (queryData: IBuilderQuery): number =>
+		queryData.stepInterval === 60
+			? stepIntervalPoints || 60
+			: queryData?.stepInterval || 60;
+
 	return {
 		...query,
 		builder: {
@@ -106,7 +112,7 @@ export function updateStepInterval(
 			queryData: [
 				...(query?.builder?.queryData ?? []).map((queryData) => ({
 					...queryData,
-					stepInterval: stepIntervalPoints || queryData?.stepInterval || 60,
+					stepInterval: getSteps(queryData),
 				})),
 			],
 		},

frontend/src/container/InfraMonitoringHosts/InfraMonitoring.styles.scss

@@ -172,6 +172,13 @@
 			.ant-table-cell:nth-child(n + 3) {
 				padding-right: 24px;
 			}
+			.memory-usage-header {
+				display: flex;
+				align-items: center;
+				justify-content: flex-end;
+				gap: 4px;
+				margin-right: 4px;
+			}
 			.column-header-right {
 				text-align: right;
 			}

frontend/src/container/InfraMonitoringHosts/__tests__/HostsEmptyOrIncorrectMetrics.test.tsx

@@ -0,0 +1,43 @@
+import { render, screen } from '@testing-library/react';
+
+import HostsEmptyOrIncorrectMetrics from '../HostsEmptyOrIncorrectMetrics';
+
+describe('HostsEmptyOrIncorrectMetrics', () => {
+	it('shows no data message when noData is true', () => {
+		render(<HostsEmptyOrIncorrectMetrics noData incorrectData={false} />);
+		expect(
+			screen.getByText('No host metrics data received yet.'),
+		).toBeInTheDocument();
+		expect(
+			screen.getByText(/Infrastructure monitoring requires the/),
+		).toBeInTheDocument();
+	});
+
+	it('shows incorrect data message when incorrectData is true', () => {
+		render(<HostsEmptyOrIncorrectMetrics noData={false} incorrectData />);
+		expect(
+			screen.getByText(
+				'To see host metrics, upgrade to the latest version of SigNoz k8s-infra chart. Please contact support if you need help.',
+			),
+		).toBeInTheDocument();
+	});
+
+	it('does not show no data message when noData is false', () => {
+		render(<HostsEmptyOrIncorrectMetrics noData={false} incorrectData={false} />);
+		expect(
+			screen.queryByText('No host metrics data received yet.'),
+		).not.toBeInTheDocument();
+		expect(
+			screen.queryByText(/Infrastructure monitoring requires the/),
+		).not.toBeInTheDocument();
+	});
+
+	it('does not show incorrect data message when incorrectData is false', () => {
+		render(<HostsEmptyOrIncorrectMetrics noData={false} incorrectData={false} />);
+		expect(
+			screen.queryByText(
+				'To see host metrics, upgrade to the latest version of SigNoz k8s-infra chart. Please contact support if you need help.',
+			),
+		).not.toBeInTheDocument();
+	});
+});

frontend/src/container/InfraMonitoringHosts/__tests__/HostsList.test.tsx

@@ -0,0 +1,166 @@
+/* eslint-disable react/button-has-type */
+import { render } from '@testing-library/react';
+import ROUTES from 'constants/routes';
+import * as useGetHostListHooks from 'hooks/infraMonitoring/useGetHostList';
+import * as appContextHooks from 'providers/App/App';
+import * as timezoneHooks from 'providers/Timezone';
+import { QueryClient, QueryClientProvider } from 'react-query';
+import { Provider } from 'react-redux';
+import { MemoryRouter } from 'react-router-dom';
+import store from 'store';
+import { LicenseEvent } from 'types/api/licensesV3/getActive';
+
+import HostsList from '../HostsList';
+
+jest.mock('lib/getMinMax', () => ({
+	__esModule: true,
+	default: jest.fn().mockImplementation(() => ({
+		minTime: 1713734400000,
+		maxTime: 1713738000000,
+		isValidTimeFormat: jest.fn().mockReturnValue(true),
+	})),
+}));
+jest.mock('components/CustomTimePicker/CustomTimePicker', () => ({
+	__esModule: true,
+	default: ({ onSelect, selectedTime, selectedValue }: any): JSX.Element => (
+		<div data-testid="custom-time-picker">
+			<button onClick={(): void => onSelect('custom')}>
+				{selectedTime} - {selectedValue}
+			</button>
+		</div>
+	),
+}));
+
+const queryClient = new QueryClient();
+
+jest.mock('uplot', () => {
+	const paths = {
+		spline: jest.fn(),
+		bars: jest.fn(),
+	};
+	const uplotMock = jest.fn(() => ({
+		paths,
+	}));
+	return {
+		paths,
+		default: uplotMock,
+	};
+});
+jest.mock('react-redux', () => ({
+	...jest.requireActual('react-redux'),
+	useSelector: (): any => ({
+		globalTime: {
+			selectedTime: {
+				startTime: 1713734400000,
+				endTime: 1713738000000,
+			},
+			maxTime: 1713738000000,
+			minTime: 1713734400000,
+		},
+	}),
+}));
+jest.mock('react-router-dom', () => ({
+	...jest.requireActual('react-router-dom'),
+	useLocation: jest.fn().mockReturnValue({
+		pathname: ROUTES.INFRASTRUCTURE_MONITORING_HOSTS,
+	}),
+}));
+jest.mock('react-router-dom-v5-compat', () => {
+	const actual = jest.requireActual('react-router-dom-v5-compat');
+	return {
+		...actual,
+		useSearchParams: jest
+			.fn()
+			.mockReturnValue([
+				{ get: jest.fn(), entries: jest.fn().mockReturnValue([]) },
+				jest.fn(),
+			]),
+		useNavigationType: (): any => 'PUSH',
+	};
+});
+jest.mock('hooks/useSafeNavigate', () => ({
+	useSafeNavigate: (): any => ({
+		safeNavigate: jest.fn(),
+	}),
+}));
+
+jest.spyOn(timezoneHooks, 'useTimezone').mockReturnValue({
+	timezone: {
+		offset: 0,
+	},
+	browserTimezone: {
+		offset: 0,
+	},
+} as any);
+jest.spyOn(useGetHostListHooks, 'useGetHostList').mockReturnValue({
+	data: {
+		payload: {
+			data: {
+				records: [
+					{
+						hostName: 'test-host',
+						active: true,
+						cpu: 0.75,
+						memory: 0.65,
+						wait: 0.03,
+					},
+				],
+				isSendingK8SAgentMetrics: false,
+				sentAnyHostMetricsData: true,
+			},
+		},
+	},
+	isLoading: false,
+	isError: false,
+} as any);
+jest.spyOn(appContextHooks, 'useAppContext').mockReturnValue({
+	user: {
+		role: 'admin',
+	},
+	activeLicenseV3: {
+		event_queue: {
+			created_at: '0',
+			event: LicenseEvent.NO_EVENT,
+			scheduled_at: '0',
+			status: '',
+			updated_at: '0',
+		},
+		license: {
+			license_key: 'test-license-key',
+			license_type: 'trial',
+			org_id: 'test-org-id',
+			plan_id: 'test-plan-id',
+			plan_name: 'test-plan-name',
+			plan_type: 'trial',
+			plan_version: 'test-plan-version',
+		},
+	},
+} as any);
+
+describe('HostsList', () => {
+	it('renders hosts list table', () => {
+		const { container } = render(
+			<QueryClientProvider client={queryClient}>
+				<MemoryRouter>
+					<Provider store={store}>
+						<HostsList />
+					</Provider>
+				</MemoryRouter>
+			</QueryClientProvider>,
+		);
+		expect(container.querySelector('.hosts-list-table')).toBeInTheDocument();
+	});
+
+	it('renders filters', () => {
+		const { container } = render(
+			<QueryClientProvider client={queryClient}>
+				<MemoryRouter>
+					<Provider store={store}>
+						<HostsList />
+					</Provider>
+				</MemoryRouter>
+			</QueryClientProvider>,
+		);
+		expect(container.querySelector('.filters')).toBeInTheDocument();
+	});
+});

frontend/src/container/InfraMonitoringHosts/__tests__/HostsListControl.test.tsx

@@ -0,0 +1,37 @@
+import { render, screen } from '@testing-library/react';
+
+import HostsListControls from '../HostsListControls';
+
+jest.mock('container/QueryBuilder/filters/QueryBuilderSearch', () => ({
+	__esModule: true,
+	default: (): JSX.Element => (
+		<div data-testid="query-builder-search">Search</div>
+	),
+}));
+
+jest.mock('container/TopNav/DateTimeSelectionV2', () => ({
+	__esModule: true,
+	default: (): JSX.Element => (
+		<div data-testid="date-time-selection">Date Time</div>
+	),
+}));
+
+describe('HostsListControls', () => {
+	const mockHandleFiltersChange = jest.fn();
+	const mockFilters = {
+		items: [],
+		op: 'AND',
+	};
+
+	it('renders search and date time filters', () => {
+		render(
+			<HostsListControls
+				handleFiltersChange={mockHandleFiltersChange}
+				filters={mockFilters}
+			/>,
+		);
+
+		expect(screen.getByTestId('query-builder-search')).toBeInTheDocument();
+		expect(screen.getByTestId('date-time-selection')).toBeInTheDocument();
+	});
+});

frontend/src/container/InfraMonitoringHosts/__tests__/HostsListTable.test.tsx

@@ -0,0 +1,139 @@
+/* eslint-disable react/jsx-props-no-spreading */
+import { render, screen } from '@testing-library/react';
+
+import HostsListTable from '../HostsListTable';
+
+jest.mock('uplot', () => {
+	const paths = {
+		spline: jest.fn(),
+		bars: jest.fn(),
+	};
+	const uplotMock = jest.fn(() => ({
+		paths,
+	}));
+	return {
+		paths,
+		default: uplotMock,
+	};
+});
+
+const EMPTY_STATE_CONTAINER_CLASS = '.hosts-empty-state-container';
+
+describe('HostsListTable', () => {
+	const mockHost = {
+		hostName: 'test-host-1',
+		active: true,
+		cpu: 0.75,
+		memory: 0.65,
+		wait: 0.03,
+		load15: 1.5,
+		os: 'linux',
+	};
+
+	const mockTableData = {
+		payload: {
+			data: {
+				hosts: [mockHost],
+			},
+		},
+	};
+	const mockOnHostClick = jest.fn();
+	const mockSetCurrentPage = jest.fn();
+	const mockSetOrderBy = jest.fn();
+	const mockSetPageSize = jest.fn();
+	const mockProps = {
+		isLoading: false,
+		isError: false,
+		isFetching: false,
+		tableData: mockTableData,
+		hostMetricsData: [mockHost],
+		filters: {
+			items: [],
+			op: 'AND',
+		},
+		onHostClick: mockOnHostClick,
+		currentPage: 1,
+		setCurrentPage: mockSetCurrentPage,
+		pageSize: 10,
+		setOrderBy: mockSetOrderBy,
+		setPageSize: mockSetPageSize,
+	} as any;
+
+	it('renders loading state if isLoading is true', () => {
+		const { container } = render(<HostsListTable {...mockProps} isLoading />);
+		expect(container.querySelector('.hosts-list-loading-state')).toBeTruthy();
+	});
+
+	it('renders loading state if isFetching is true', () => {
+		const { container } = render(<HostsListTable {...mockProps} isFetching />);
+		expect(container.querySelector('.hosts-list-loading-state')).toBeTruthy();
+	});
+
+	it('renders error state if isError is true', () => {
+		render(<HostsListTable {...mockProps} isError />);
+		expect(screen.getByText('Something went wrong')).toBeTruthy();
+	});
+
+	it('renders empty state if no hosts are found', () => {
+		const { container } = render(<HostsListTable {...mockProps} />);
+		expect(container.querySelector(EMPTY_STATE_CONTAINER_CLASS)).toBeTruthy();
+	});
+
+	it('renders empty state if sentAnyHostMetricsData is false', () => {
+		const { container } = render(
+			<HostsListTable
+				{...mockProps}
+				tableData={{
+					...mockTableData,
+					payload: {
+						...mockTableData.payload,
+						data: {
+							...mockTableData.payload.data,
+							sentAnyHostMetricsData: false,
+						},
+					},
+				}}
+			/>,
+		);
+		expect(container.querySelector(EMPTY_STATE_CONTAINER_CLASS)).toBeTruthy();
+	});
+
+	it('renders empty state if isSendingIncorrectK8SAgentMetrics is true', () => {
+		const { container } = render(
+			<HostsListTable
+				{...mockProps}
+				tableData={{
+					...mockTableData,
+					payload: {
+						...mockTableData.payload,
+						data: {
+							...mockTableData.payload.data,
+							isSendingIncorrectK8SAgentMetrics: true,
+						},
+					},
+				}}
+			/>,
+		);
+		expect(container.querySelector(EMPTY_STATE_CONTAINER_CLASS)).toBeTruthy();
+	});
+
+	it('renders table data', () => {
+		const { container } = render(
+			<HostsListTable
+				{...mockProps}
+				tableData={{
+					...mockTableData,
+					payload: {
+						...mockTableData.payload,
+						data: {
+							...mockTableData.payload.data,
+							isSendingIncorrectK8SAgentMetrics: false,
+							sentAnyHostMetricsData: true,
+						},
+					},
+				}}
+			/>,
+		);
+		expect(container.querySelector('.hosts-list-table')).toBeTruthy();
+	});
+});

frontend/src/container/InfraMonitoringHosts/__tests__/utilts.test.tsx

@@ -0,0 +1,104 @@
+import { render } from '@testing-library/react';
+
+import { formatDataForTable, GetHostsQuickFiltersConfig } from '../utils';
+
+const PROGRESS_BAR_CLASS = '.progress-bar';
+
+jest.mock('uplot', () => {
+	const paths = {
+		spline: jest.fn(),
+		bars: jest.fn(),
+	};
+	const uplotMock = jest.fn(() => ({
+		paths,
+	}));
+	return {
+		paths,
+		default: uplotMock,
+	};
+});
+
+describe('InfraMonitoringHosts utils', () => {
+	describe('formatDataForTable', () => {
+		it('should format host data correctly', () => {
+			const mockData = [
+				{
+					hostName: 'test-host',
+					active: true,
+					cpu: 0.95,
+					memory: 0.85,
+					wait: 0.05,
+					load15: 2.5,
+					os: 'linux',
+				},
+			] as any;
+
+			const result = formatDataForTable(mockData);
+
+			expect(result[0].hostName).toBe('test-host');
+			expect(result[0].wait).toBe('5%');
+			expect(result[0].load15).toBe(2.5);
+
+			// Test active tag rendering
+			const activeTag = render(result[0].active as JSX.Element);
+			expect(activeTag.container.textContent).toBe('ACTIVE');
+			expect(activeTag.container.querySelector('.active')).toBeTruthy();
+
+			// Test CPU progress bar
+			const cpuProgress = render(result[0].cpu as JSX.Element);
+			const cpuProgressBar = cpuProgress.container.querySelector(
+				PROGRESS_BAR_CLASS,
+			);
+			expect(cpuProgressBar).toBeTruthy();
+
+			// Test memory progress bar
+			const memoryProgress = render(result[0].memory as JSX.Element);
+			const memoryProgressBar = memoryProgress.container.querySelector(
+				PROGRESS_BAR_CLASS,
+			);
+			expect(memoryProgressBar).toBeTruthy();
+		});
+
+		it('should handle inactive hosts', () => {
+			const mockData = [
+				{
+					hostName: 'test-host',
+					active: false,
+					cpu: 0.3,
+					memory: 0.4,
+					wait: 0.02,
+					load15: 1.2,
+					os: 'linux',
+					cpuTimeSeries: [],
+					memoryTimeSeries: [],
+					waitTimeSeries: [],
+					load15TimeSeries: [],
+				},
+			] as any;
+
+			const result = formatDataForTable(mockData);
+
+			const inactiveTag = render(result[0].active as JSX.Element);
+			expect(inactiveTag.container.textContent).toBe('INACTIVE');
+			expect(inactiveTag.container.querySelector('.inactive')).toBeTruthy();
+		});
+	});
+
+	describe('GetHostsQuickFiltersConfig', () => {
+		it('should return correct config when dotMetricsEnabled is true', () => {
+			const result = GetHostsQuickFiltersConfig(true);
+
+			expect(result[0].attributeKey.key).toBe('host.name');
+			expect(result[1].attributeKey.key).toBe('os.type');
+			expect(result[0].aggregateAttribute).toBe('system.cpu.load_average.15m');
+		});
+
+		it('should return correct config when dotMetricsEnabled is false', () => {
+			const result = GetHostsQuickFiltersConfig(false);
+
+			expect(result[0].attributeKey.key).toBe('host_name');
+			expect(result[1].attributeKey.key).toBe('os_type');
+			expect(result[0].aggregateAttribute).toBe('system_cpu_load_average_15m');
+		});
+	});
+});

frontend/src/container/InfraMonitoringHosts/utils.tsx

@@ -1,7 +1,8 @@
 import './InfraMonitoring.styles.scss';
 
+import { InfoCircleOutlined } from '@ant-design/icons';
 import { Color } from '@signozhq/design-tokens';
-import { Progress, TabsProps, Tag } from 'antd';
+import { Progress, TabsProps, Tag, Tooltip } from 'antd';
 import { ColumnType } from 'antd/es/table';
 import {
 	HostData,
@@ -93,7 +94,14 @@ export const getHostsListColumns = (): ColumnType<HostRowData>[] => [
 		align: 'right',
 	},
 	{
-		title: <div className="column-header-right">Memory Usage</div>,
+		title: (
+			<div className="column-header-right memory-usage-header">
+				Memory Usage
+				<Tooltip title="Excluding cache memory">
+					<InfoCircleOutlined />
+				</Tooltip>
+			</div>
+		),
 		dataIndex: 'memory',
 		key: 'memory',
 		width: 100,
@@ -210,6 +218,10 @@ export function GetHostsQuickFiltersConfig(
 		? 'system.cpu.load_average.15m'
 		: 'system_cpu_load_average_15m';
 
+	const environmentKey = dotMetricsEnabled
+		? 'deployment.environment'
+		: 'deployment_environment';
+
 	return [
 		{
 			type: FiltersType.CHECKBOX,
@@ -241,5 +253,17 @@ export function GetHostsQuickFiltersConfig(
 			dataSource: DataSource.METRICS,
 			defaultOpen: true,
 		},
+		{
+			type: FiltersType.CHECKBOX,
+			title: 'Environment',
+			attributeKey: {
+				key: environmentKey,
+				dataType: DataTypes.String,
+				type: 'resource',
+				isColumn: false,
+				isJSON: false,
+			},
+			defaultOpen: true,
+		},
 	];
 }

frontend/src/container/InfraMonitoringK8s/Clusters/ClusterDetails/constants.ts

@@ -731,7 +731,7 @@ export const getClusterMetricsQueryPayload = (
 		},
 		{
 			selectedTime: 'GLOBAL_TIME',
-			graphType: PANEL_TYPES.TIME_SERIES,
+			graphType: PANEL_TYPES.TABLE,
 			query: {
 				builder: {
 					queryData: [
@@ -751,7 +751,7 @@ export const getClusterMetricsQueryPayload = (
 							filters: {
 								items: [
 									{
-										id: 'd7779183',
+										id: 'a7da59c7',
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_cluster_name--string--tag--false',
@@ -786,12 +786,12 @@ export const getClusterMetricsQueryPayload = (
 								},
 							],
 							having: [],
-							legend: `{{${k8sDeploymentNameKey}}} ({{${k8sNamespaceNameKey}})`,
+							legend: 'available',
 							limit: null,
 							orderBy: [],
 							queryName: 'A',
-							reduceTo: 'avg',
-							spaceAggregation: 'max',
+							reduceTo: 'last',
+							spaceAggregation: 'sum',
 							stepInterval: 60,
 							timeAggregation: 'latest',
 						},
@@ -804,14 +804,14 @@ export const getClusterMetricsQueryPayload = (
 								key: k8sDeploymentDesiredKey,
 								type: 'Gauge',
 							},
-							aggregateOperator: 'latest',
+							aggregateOperator: 'avg',
 							dataSource: DataSource.METRICS,
 							disabled: false,
 							expression: 'B',
 							filters: {
 								items: [
 									{
-										id: 'd7779183',
+										id: '55110885',
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_cluster_name--string--tag--false',
@@ -846,14 +846,14 @@ export const getClusterMetricsQueryPayload = (
 								},
 							],
 							having: [],
-							legend: `{{${k8sDeploymentNameKey}}} ({{${k8sNamespaceNameKey}})`,
+							legend: 'desired',
 							limit: null,
 							orderBy: [],
 							queryName: 'B',
-							reduceTo: 'avg',
-							spaceAggregation: 'max',
+							reduceTo: 'last',
+							spaceAggregation: 'sum',
 							stepInterval: 60,
-							timeAggregation: 'latest',
+							timeAggregation: 'avg',
 						},
 					],
 					queryFormulas: [],
@@ -890,13 +890,13 @@ export const getClusterMetricsQueryPayload = (
 				queryType: EQueryType.QUERY_BUILDER,
 			},
 			variables: {},
-			formatForWeb: false,
+			formatForWeb: true,
 			start,
 			end,
 		},
 		{
 			selectedTime: 'GLOBAL_TIME',
-			graphType: PANEL_TYPES.TIME_SERIES,
+			graphType: PANEL_TYPES.TABLE,
 			query: {
 				builder: {
 					queryData: [
@@ -909,14 +909,14 @@ export const getClusterMetricsQueryPayload = (
 								key: k8sStatefulsetCurrentPodsKey,
 								type: 'Gauge',
 							},
-							aggregateOperator: 'latest',
+							aggregateOperator: 'max',
 							dataSource: DataSource.METRICS,
 							disabled: false,
 							expression: 'A',
 							filters: {
 								items: [
 									{
-										id: 'd7779183',
+										id: '3c57b4d1',
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_cluster_name--string--tag--false',
@@ -951,14 +951,14 @@ export const getClusterMetricsQueryPayload = (
 								},
 							],
 							having: [],
-							legend: `{{${k8sStatefulsetNameKey}}} ({{${k8sNamespaceNameKey}})`,
+							legend: 'current',
 							limit: null,
 							orderBy: [],
 							queryName: 'A',
-							reduceTo: 'avg',
-							spaceAggregation: 'max',
+							reduceTo: 'last',
+							spaceAggregation: 'sum',
 							stepInterval: 60,
-							timeAggregation: 'latest',
+							timeAggregation: 'max',
 						},
 						{
 							aggregateAttribute: {
@@ -969,14 +969,14 @@ export const getClusterMetricsQueryPayload = (
 								key: k8sStatefulsetDesiredPodsKey,
 								type: 'Gauge',
 							},
-							aggregateOperator: 'latest',
+							aggregateOperator: 'max',
 							dataSource: DataSource.METRICS,
 							disabled: false,
 							expression: 'B',
 							filters: {
 								items: [
 									{
-										id: 'd7779183',
+										id: '0f49fe64',
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_cluster_name--string--tag--false',
@@ -1011,14 +1011,14 @@ export const getClusterMetricsQueryPayload = (
 								},
 							],
 							having: [],
-							legend: `{{${k8sStatefulsetNameKey}}} ({{${k8sNamespaceNameKey}})`,
+							legend: 'desired',
 							limit: null,
 							orderBy: [],
 							queryName: 'B',
-							reduceTo: 'avg',
-							spaceAggregation: 'max',
+							reduceTo: 'last',
+							spaceAggregation: 'sum',
 							stepInterval: 60,
-							timeAggregation: 'latest',
+							timeAggregation: 'max',
 						},
 						{
 							aggregateAttribute: {
@@ -1029,14 +1029,14 @@ export const getClusterMetricsQueryPayload = (
 								key: k8sStatefulsetReadyPodsKey,
 								type: 'Gauge',
 							},
-							aggregateOperator: 'latest',
+							aggregateOperator: 'max',
 							dataSource: DataSource.METRICS,
 							disabled: false,
 							expression: 'C',
 							filters: {
 								items: [
 									{
-										id: 'd7779183',
+										id: '0bebf625',
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_cluster_name--string--tag--false',
@@ -1071,14 +1071,14 @@ export const getClusterMetricsQueryPayload = (
 								},
 							],
 							having: [],
-							legend: `{{${k8sStatefulsetNameKey}}} ({{${k8sNamespaceNameKey}})`,
+							legend: 'ready',
 							limit: null,
 							orderBy: [],
 							queryName: 'C',
-							reduceTo: 'avg',
-							spaceAggregation: 'max',
+							reduceTo: 'last',
+							spaceAggregation: 'sum',
 							stepInterval: 60,
-							timeAggregation: 'latest',
+							timeAggregation: 'max',
 						},
 						{
 							aggregateAttribute: {
@@ -1089,14 +1089,14 @@ export const getClusterMetricsQueryPayload = (
 								key: k8sStatefulsetUpdatedPodsKey,
 								type: 'Gauge',
 							},
-							aggregateOperator: 'latest',
+							aggregateOperator: 'max',
 							dataSource: DataSource.METRICS,
 							disabled: false,
 							expression: 'D',
 							filters: {
 								items: [
 									{
-										id: 'd7779183',
+										id: '1ddacbbe',
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_cluster_name--string--tag--false',
@@ -1131,14 +1131,14 @@ export const getClusterMetricsQueryPayload = (
 								},
 							],
 							having: [],
-							legend: `{{${k8sStatefulsetNameKey}}} ({{${k8sNamespaceNameKey}})`,
+							legend: 'updated',
 							limit: null,
 							orderBy: [],
 							queryName: 'D',
-							reduceTo: 'avg',
-							spaceAggregation: 'max',
+							reduceTo: 'last',
+							spaceAggregation: 'sum',
 							stepInterval: 60,
-							timeAggregation: 'latest',
+							timeAggregation: 'max',
 						},
 					],
 					queryFormulas: [],
@@ -1199,13 +1199,13 @@ export const getClusterMetricsQueryPayload = (
 				queryType: EQueryType.QUERY_BUILDER,
 			},
 			variables: {},
-			formatForWeb: false,
+			formatForWeb: true,
 			start,
 			end,
 		},
 		{
 			selectedTime: 'GLOBAL_TIME',
-			graphType: PANEL_TYPES.TIME_SERIES,
+			graphType: PANEL_TYPES.TABLE,
 			query: {
 				builder: {
 					queryData: [
@@ -1218,14 +1218,14 @@ export const getClusterMetricsQueryPayload = (
 								key: k8sDaemonsetCurrentScheduledNodesKey,
 								type: 'Gauge',
 							},
-							aggregateOperator: 'latest',
+							aggregateOperator: 'avg',
 							dataSource: DataSource.METRICS,
 							disabled: false,
 							expression: 'A',
 							filters: {
 								items: [
 									{
-										id: 'd7779183',
+										id: 'e0bea554',
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_cluster_name--string--tag--false',
@@ -1250,24 +1250,16 @@ export const getClusterMetricsQueryPayload = (
 									key: k8sDaemonsetNameKey,
 									type: 'tag',
 								},
-								{
-									dataType: DataTypes.String,
-									id: 'k8s_namespace_name--string--tag--false',
-									isColumn: false,
-									isJSON: false,
-									key: k8sNamespaceNameKey,
-									type: 'tag',
-								},
 							],
 							having: [],
-							legend: `{{${k8sDaemonsetNameKey}} ({{${k8sNamespaceNameKey}})`,
+							legend: 'current_nodes',
 							limit: null,
 							orderBy: [],
 							queryName: 'A',
-							reduceTo: 'avg',
-							spaceAggregation: 'max',
+							reduceTo: 'last',
+							spaceAggregation: 'avg',
 							stepInterval: 60,
-							timeAggregation: 'latest',
+							timeAggregation: 'avg',
 						},
 						{
 							aggregateAttribute: {
@@ -1278,14 +1270,14 @@ export const getClusterMetricsQueryPayload = (
 								key: k8sDaemonsetDesiredScheduledNodesKey,
 								type: 'Gauge',
 							},
-							aggregateOperator: 'latest',
+							aggregateOperator: 'avg',
 							dataSource: DataSource.METRICS,
 							disabled: false,
 							expression: 'B',
 							filters: {
 								items: [
 									{
-										id: 'd7779183',
+										id: '741052f7',
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_cluster_name--string--tag--false',
@@ -1310,24 +1302,16 @@ export const getClusterMetricsQueryPayload = (
 									key: k8sDaemonsetNameKey,
 									type: 'tag',
 								},
-								{
-									dataType: DataTypes.String,
-									id: 'k8s_namespace_name--string--tag--false',
-									isColumn: false,
-									isJSON: false,
-									key: k8sNamespaceNameKey,
-									type: 'tag',
-								},
 							],
 							having: [],
-							legend: `{{${k8sDaemonsetNameKey}} ({{${k8sNamespaceNameKey}})`,
+							legend: 'desired_nodes',
 							limit: null,
 							orderBy: [],
 							queryName: 'B',
-							reduceTo: 'avg',
-							spaceAggregation: 'max',
+							reduceTo: 'last',
+							spaceAggregation: 'avg',
 							stepInterval: 60,
-							timeAggregation: 'latest',
+							timeAggregation: 'avg',
 						},
 						{
 							aggregateAttribute: {
@@ -1338,14 +1322,14 @@ export const getClusterMetricsQueryPayload = (
 								key: k8sDaemonsetReadyNodesKey,
 								type: 'Gauge',
 							},
-							aggregateOperator: 'latest',
+							aggregateOperator: 'avg',
 							dataSource: DataSource.METRICS,
 							disabled: false,
 							expression: 'C',
 							filters: {
 								items: [
 									{
-										id: 'd7779183',
+										id: 'f23759f2',
 										key: {
 											dataType: DataTypes.String,
 											id: 'k8s_cluster_name--string--tag--false',
@@ -1370,24 +1354,16 @@ export const getClusterMetricsQueryPayload = (
 									key: k8sDaemonsetNameKey,
 									type: 'tag',
 								},
-								{
-									dataType: DataTypes.String,
-									id: 'k8s_namespace_name--string--tag--false',
-									isColumn: false,
-									isJSON: false,
-									key: k8sNamespaceNameKey,
-									type: 'tag',
-								},
 							],
 							having: [],
-							legend: `{{${k8sDaemonsetNameKey}} ({{${k8sNamespaceNameKey}})`,
+							legend: 'ready_nodes',
 							limit: null,
 							orderBy: [],
 							queryName: 'C',
-							reduceTo: 'avg',
-							spaceAggregation: 'max',
+							reduceTo: 'last',
+							spaceAggregation: 'avg',
 							stepInterval: 60,
-							timeAggregation: 'latest',
+							timeAggregation: 'avg',
 						},
 					],
 					queryFormulas: [],
@@ -1436,316 +1412,7 @@ export const getClusterMetricsQueryPayload = (
 				queryType: EQueryType.QUERY_BUILDER,
 			},
 			variables: {},
-			formatForWeb: false,
-			start,
-			end,
-		},
-		{
-			selectedTime: 'GLOBAL_TIME',
-			graphType: PANEL_TYPES.TIME_SERIES,
-			query: {
-				builder: {
-					queryData: [
-						{
-							aggregateAttribute: {
-								dataType: DataTypes.Float64,
-								id: 'k8s_job_active_pods--float64--Gauge--true',
-								isColumn: true,
-								isJSON: false,
-								key: k8sJobActivePodsKey,
-								type: 'Gauge',
-							},
-							aggregateOperator: 'latest',
-							dataSource: DataSource.METRICS,
-							disabled: false,
-							expression: 'A',
-							filters: {
-								items: [
-									{
-										id: 'd7779183',
-										key: {
-											dataType: DataTypes.String,
-											id: 'k8s_cluster_name--string--tag--false',
-											isColumn: false,
-											isJSON: false,
-											key: k8sClusterNameKey,
-											type: 'tag',
-										},
-										op: '=',
-										value: cluster.meta.k8s_cluster_name,
-									},
-								],
-								op: 'AND',
-							},
-							functions: [],
-							groupBy: [
-								{
-									dataType: DataTypes.String,
-									id: 'k8s_job_name--string--tag--false',
-									isColumn: false,
-									isJSON: false,
-									key: k8sJobNameKey,
-									type: 'tag',
-								},
-								{
-									dataType: DataTypes.String,
-									id: 'k8s_namespace_name--string--tag--false',
-									isColumn: false,
-									isJSON: false,
-									key: k8sNamespaceNameKey,
-									type: 'tag',
-								},
-							],
-							having: [],
-							legend: `{{${k8sJobNameKey}}} ({{${k8sNamespaceNameKey}})`,
-							limit: null,
-							orderBy: [],
-							queryName: 'A',
-							reduceTo: 'avg',
-							spaceAggregation: 'max',
-							stepInterval: 60,
-							timeAggregation: 'latest',
-						},
-						{
-							aggregateAttribute: {
-								dataType: DataTypes.Float64,
-								id: 'k8s_job_successful_pods--float64--Gauge--true',
-								isColumn: true,
-								isJSON: false,
-								key: k8sJobSuccessfulPodsKey,
-								type: 'Gauge',
-							},
-							aggregateOperator: 'latest',
-							dataSource: DataSource.METRICS,
-							disabled: false,
-							expression: 'B',
-							filters: {
-								items: [
-									{
-										id: 'd7779183',
-										key: {
-											dataType: DataTypes.String,
-											id: 'k8s_cluster_name--string--tag--false',
-											isColumn: false,
-											isJSON: false,
-											key: k8sClusterNameKey,
-											type: 'tag',
-										},
-										op: '=',
-										value: cluster.meta.k8s_cluster_name,
-									},
-								],
-								op: 'AND',
-							},
-							functions: [],
-							groupBy: [
-								{
-									dataType: DataTypes.String,
-									id: 'k8s_job_name--string--tag--false',
-									isColumn: false,
-									isJSON: false,
-									key: k8sJobNameKey,
-									type: 'tag',
-								},
-								{
-									dataType: DataTypes.String,
-									id: 'k8s_namespace_name--string--tag--false',
-									isColumn: false,
-									isJSON: false,
-									key: k8sNamespaceNameKey,
-									type: 'tag',
-								},
-							],
-							having: [],
-							legend: `{{${k8sJobNameKey}}} ({{${k8sNamespaceNameKey}})`,
-							limit: null,
-							orderBy: [],
-							queryName: 'B',
-							reduceTo: 'avg',
-							spaceAggregation: 'max',
-							stepInterval: 60,
-							timeAggregation: 'latest',
-						},
-						{
-							aggregateAttribute: {
-								dataType: DataTypes.Float64,
-								id: 'k8s_job_failed_pods--float64--Gauge--true',
-								isColumn: true,
-								isJSON: false,
-								key: k8sJobFailedPodsKey,
-								type: 'Gauge',
-							},
-							aggregateOperator: 'latest',
-							dataSource: DataSource.METRICS,
-							disabled: false,
-							expression: 'C',
-							filters: {
-								items: [
-									{
-										id: 'd7779183',
-										key: {
-											dataType: DataTypes.String,
-											id: 'k8s_cluster_name--string--tag--false',
-											isColumn: false,
-											isJSON: false,
-											key: k8sClusterNameKey,
-											type: 'tag',
-										},
-										op: '=',
-										value: cluster.meta.k8s_cluster_name,
-									},
-								],
-								op: 'AND',
-							},
-							functions: [],
-							groupBy: [
-								{
-									dataType: DataTypes.String,
-									id: 'k8s_job_name--string--tag--false',
-									isColumn: false,
-									isJSON: false,
-									key: k8sJobNameKey,
-									type: 'tag',
-								},
-								{
-									dataType: DataTypes.String,
-									id: 'k8s_namespace_name--string--tag--false',
-									isColumn: false,
-									isJSON: false,
-									key: k8sNamespaceNameKey,
-									type: 'tag',
-								},
-							],
-							having: [],
-							legend: `{{${k8sJobNameKey}}} ({{${k8sNamespaceNameKey}})`,
-							limit: null,
-							orderBy: [],
-							queryName: 'C',
-							reduceTo: 'avg',
-							spaceAggregation: 'max',
-							stepInterval: 60,
-							timeAggregation: 'latest',
-						},
-						{
-							aggregateAttribute: {
-								dataType: DataTypes.Float64,
-								id: 'k8s_job_desired_successful_pods--float64--Gauge--true',
-								isColumn: true,
-								isJSON: false,
-								key: k8sJobDesiredSuccessfulPodsKey,
-								type: 'Gauge',
-							},
-							aggregateOperator: 'latest',
-							dataSource: DataSource.METRICS,
-							disabled: false,
-							expression: 'D',
-							filters: {
-								items: [
-									{
-										id: 'd7779183',
-										key: {
-											dataType: DataTypes.String,
-											id: 'k8s_cluster_name--string--tag--false',
-											isColumn: false,
-											isJSON: false,
-											key: k8sClusterNameKey,
-											type: 'tag',
-										},
-										op: '=',
-										value: cluster.meta.k8s_cluster_name,
-									},
-								],
-								op: 'AND',
-							},
-							functions: [],
-							groupBy: [
-								{
-									dataType: DataTypes.String,
-									id: 'k8s_job_name--string--tag--false',
-									isColumn: false,
-									isJSON: false,
-									key: k8sJobNameKey,
-									type: 'tag',
-								},
-								{
-									dataType: DataTypes.String,
-									id: 'k8s_namespace_name--string--tag--false',
-									isColumn: false,
-									isJSON: false,
-									key: k8sNamespaceNameKey,
-									type: 'tag',
-								},
-							],
-							having: [],
-							legend: `{{${k8sJobNameKey}}} ({{${k8sNamespaceNameKey}})`,
-							limit: null,
-							orderBy: [],
-							queryName: 'D',
-							reduceTo: 'avg',
-							spaceAggregation: 'max',
-							stepInterval: 60,
-							timeAggregation: 'latest',
-						},
-					],
-					queryFormulas: [],
-				},
-				clickhouse_sql: [
-					{
-						disabled: false,
-						legend: '',
-						name: 'A',
-						query: '',
-					},
-					{
-						disabled: false,
-						legend: '',
-						name: 'B',
-						query: '',
-					},
-					{
-						disabled: false,
-						legend: '',
-						name: 'C',
-						query: '',
-					},
-					{
-						disabled: false,
-						legend: '',
-						name: 'D',
-						query: '',
-					},
-				],
-				id: v4(),
-				promql: [
-					{
-						disabled: false,
-						legend: '',
-						name: 'A',
-						query: '',
-					},
-					{
-						disabled: false,
-						legend: '',
-						name: 'B',
-						query: '',
-					},
-					{
-						disabled: false,
-						legend: '',
-						name: 'C',
-						query: '',
-					},
-					{
-						disabled: false,
-						legend: '',
-						name: 'D',
-						query: '',
-					},
-				],
-				queryType: EQueryType.QUERY_BUILDER,
-			},
-			variables: {},
-			formatForWeb: false,
+			formatForWeb: true,
 			start,
 			end,
 		},
@@ -1777,7 +1444,7 @@ export const getClusterMetricsQueryPayload = (
 											id: 'k8s_cluster_name--string--tag--false',
 											isColumn: false,
 											isJSON: false,
-											key: 'k8s_cluster_name',
+											key: k8sClusterNameKey,
 											type: 'tag',
 										},
 										op: '=',
@@ -1837,7 +1504,7 @@ export const getClusterMetricsQueryPayload = (
 											id: 'k8s_cluster_name--string--tag--false',
 											isColumn: false,
 											isJSON: false,
-											key: 'k8s_cluster_name',
+											key: k8sClusterNameKey,
 											type: 'tag',
 										},
 										op: '=',
@@ -1897,7 +1564,7 @@ export const getClusterMetricsQueryPayload = (
 											id: 'k8s_cluster_name--string--tag--false',
 											isColumn: false,
 											isJSON: false,
-											key: 'k8s_cluster_name',
+											key: k8sClusterNameKey,
 											type: 'tag',
 										},
 										op: '=',
@@ -1957,7 +1624,7 @@ export const getClusterMetricsQueryPayload = (
 											id: 'k8s_cluster_name--string--tag--false',
 											isColumn: false,
 											isJSON: false,
-											key: 'k8s_cluster_name',
+											key: k8sClusterNameKey,
 											type: 'tag',
 										},
 										op: '=',
@@ -2005,6 +1672,24 @@ export const getClusterMetricsQueryPayload = (
 						name: 'A',
 						query: '',
 					},
+					{
+						disabled: false,
+						legend: '',
+						name: 'B',
+						query: '',
+					},
+					{
+						disabled: false,
+						legend: '',
+						name: 'C',
+						query: '',
+					},
+					{
+						disabled: false,
+						legend: '',
+						name: 'D',
+						query: '',
+					},
 				],
 				id: v4(),
 				promql: [
@@ -2014,6 +1699,24 @@ export const getClusterMetricsQueryPayload = (
 						name: 'A',
 						query: '',
 					},
+					{
+						disabled: false,
+						legend: '',
+						name: 'B',
+						query: '',
+					},
+					{
+						disabled: false,
+						legend: '',
+						name: 'C',
+						query: '',
+					},
+					{
+						disabled: false,
+						legend: '',
+						name: 'D',
+						query: '',
+					},
 				],
 				queryType: EQueryType.QUERY_BUILDER,
 			},

frontend/src/container/InfraMonitoringK8s/constants.ts

@@ -90,6 +90,9 @@ export function GetPodsQuickFiltersConfig(
 		? 'k8s.daemonset.name'
 		: 'k8s_daemonset_name';
 	const jobKey = dotMetricsEnabled ? 'k8s.job.name' : 'k8s_job_name';
+	const environmentKey = dotMetricsEnabled
+		? 'deployment.environment'
+		: 'deployment_environment';
 
 	// Define aggregate attribute (metric) name
 	const cpuUtilizationMetric = dotMetricsEnabled
@@ -225,6 +228,18 @@ export function GetPodsQuickFiltersConfig(
 			dataSource: DataSource.METRICS,
 			defaultOpen: false,
 		},
+		{
+			type: FiltersType.CHECKBOX,
+			title: 'Environment',
+			attributeKey: {
+				key: environmentKey,
+				dataType: DataTypes.String,
+				type: 'resource',
+				isColumn: false,
+				isJSON: false,
+			},
+			defaultOpen: true,
+		},
 	];
 }
 
@@ -239,6 +254,9 @@ export function GetNodesQuickFiltersConfig(
 	const cpuUtilMetric = dotMetricsEnabled
 		? 'k8s.node.cpu.utilization'
 		: 'k8s_node_cpu_utilization';
+	const environmentKey = dotMetricsEnabled
+		? 'deployment.environment'
+		: 'deployment_environment';
 
 	return [
 		{
@@ -273,6 +291,18 @@ export function GetNodesQuickFiltersConfig(
 			dataSource: DataSource.METRICS,
 			defaultOpen: true,
 		},
+		{
+			type: FiltersType.CHECKBOX,
+			title: 'Environment',
+			attributeKey: {
+				key: environmentKey,
+				dataType: DataTypes.String,
+				type: 'resource',
+				isColumn: false,
+				isJSON: false,
+			},
+			defaultOpen: true,
+		},
 	];
 }
 
@@ -286,6 +316,9 @@ export function GetNamespaceQuickFiltersConfig(
 	const cpuUtilMetric = dotMetricsEnabled
 		? 'k8s.pod.cpu.utilization'
 		: 'k8s_pod_cpu_utilization';
+	const environmentKey = dotMetricsEnabled
+		? 'deployment.environment'
+		: 'deployment_environment';
 
 	return [
 		{
@@ -320,6 +353,18 @@ export function GetNamespaceQuickFiltersConfig(
 			dataSource: DataSource.METRICS,
 			defaultOpen: true,
 		},
+		{
+			type: FiltersType.CHECKBOX,
+			title: 'Environment',
+			attributeKey: {
+				key: environmentKey,
+				dataType: DataTypes.String,
+				type: 'resource',
+				isColumn: false,
+				isJSON: false,
+			},
+			defaultOpen: true,
+		},
 	];
 }
 
@@ -330,6 +375,9 @@ export function GetClustersQuickFiltersConfig(
 	const cpuUtilMetric = dotMetricsEnabled
 		? 'k8s.node.cpu.utilization'
 		: 'k8s_node_cpu_utilization';
+	const environmentKey = dotMetricsEnabled
+		? 'deployment.environment'
+		: 'deployment_environment';
 
 	return [
 		{
@@ -348,6 +396,18 @@ export function GetClustersQuickFiltersConfig(
 			dataSource: DataSource.METRICS,
 			defaultOpen: true,
 		},
+		{
+			type: FiltersType.CHECKBOX,
+			title: 'Environment',
+			attributeKey: {
+				key: environmentKey,
+				dataType: DataTypes.String,
+				type: 'resource',
+				isColumn: false,
+				isJSON: false,
+			},
+			defaultOpen: true,
+		},
 	];
 }
 
@@ -357,6 +417,9 @@ export function GetContainersQuickFiltersConfig(
 	const containerKey = dotMetricsEnabled
 		? 'k8s.container.name'
 		: 'k8s_container_name';
+	const environmentKey = dotMetricsEnabled
+		? 'deployment.environment'
+		: 'deployment_environment';
 
 	return [
 		{
@@ -372,6 +435,18 @@ export function GetContainersQuickFiltersConfig(
 			},
 			defaultOpen: true,
 		},
+		{
+			type: FiltersType.CHECKBOX,
+			title: 'Environment',
+			attributeKey: {
+				key: environmentKey,
+				dataType: DataTypes.String,
+				type: 'resource',
+				isColumn: false,
+				isJSON: false,
+			},
+			defaultOpen: true,
+		},
 	];
 }
 
@@ -388,6 +463,9 @@ export function GetVolumesQuickFiltersConfig(
 	const volumeMetric = dotMetricsEnabled
 		? 'k8s.volume.capacity'
 		: 'k8s_volume_capacity';
+	const environmentKey = dotMetricsEnabled
+		? 'deployment.environment'
+		: 'deployment_environment';
 
 	return [
 		{
@@ -438,6 +516,18 @@ export function GetVolumesQuickFiltersConfig(
 			dataSource: DataSource.METRICS,
 			defaultOpen: true,
 		},
+		{
+			type: FiltersType.CHECKBOX,
+			title: 'Environment',
+			attributeKey: {
+				key: environmentKey,
+				dataType: DataTypes.String,
+				type: 'resource',
+				isColumn: false,
+				isJSON: false,
+			},
+			defaultOpen: true,
+		},
 	];
 }
 
@@ -454,6 +544,9 @@ export function GetDeploymentsQuickFiltersConfig(
 	const metric = dotMetricsEnabled
 		? 'k8s.pod.cpu.utilization'
 		: 'k8s_pod_cpu_utilization';
+	const environmentKey = dotMetricsEnabled
+		? 'deployment.environment'
+		: 'deployment_environment';
 
 	return [
 		{
@@ -504,6 +597,18 @@ export function GetDeploymentsQuickFiltersConfig(
 			dataSource: DataSource.METRICS,
 			defaultOpen: true,
 		},
+		{
+			type: FiltersType.CHECKBOX,
+			title: 'Environment',
+			attributeKey: {
+				key: environmentKey,
+				dataType: DataTypes.String,
+				type: 'resource',
+				isColumn: false,
+				isJSON: false,
+			},
+			defaultOpen: true,
+		},
 	];
 }
 
@@ -520,6 +625,9 @@ export function GetStatefulsetsQuickFiltersConfig(
 	const metric = dotMetricsEnabled
 		? 'k8s.pod.cpu.utilization'
 		: 'k8s_pod_cpu_utilization';
+	const environmentKey = dotMetricsEnabled
+		? 'deployment.environment'
+		: 'deployment_environment';
 
 	return [
 		{
@@ -570,6 +678,18 @@ export function GetStatefulsetsQuickFiltersConfig(
 			dataSource: DataSource.METRICS,
 			defaultOpen: true,
 		},
+		{
+			type: FiltersType.CHECKBOX,
+			title: 'Environment',
+			attributeKey: {
+				key: environmentKey,
+				dataType: DataTypes.String,
+				type: 'resource',
+				isColumn: false,
+				isJSON: false,
+			},
+			defaultOpen: true,
+		},
 	];
 }
 
@@ -586,6 +706,9 @@ export function GetDaemonsetsQuickFiltersConfig(
 	const metricName = dotMetricsEnabled
 		? 'k8s.pod.cpu.utilization'
 		: 'k8s_pod_cpu_utilization';
+	const environmentKey = dotMetricsEnabled
+		? 'deployment.environment'
+		: 'deployment_environment';
 
 	return [
 		{
@@ -634,6 +757,18 @@ export function GetDaemonsetsQuickFiltersConfig(
 			dataSource: DataSource.METRICS,
 			defaultOpen: true,
 		},
+		{
+			type: FiltersType.CHECKBOX,
+			title: 'Environment',
+			attributeKey: {
+				key: environmentKey,
+				dataType: DataTypes.String,
+				type: 'resource',
+				isColumn: false,
+				isJSON: false,
+			},
+			defaultOpen: true,
+		},
 	];
 }
 
@@ -648,6 +783,9 @@ export function GetJobsQuickFiltersConfig(
 	const metricName = dotMetricsEnabled
 		? 'k8s.pod.cpu.utilization'
 		: 'k8s_pod_cpu_utilization';
+	const environmentKey = dotMetricsEnabled
+		? 'deployment.environment'
+		: 'deployment_environment';
 
 	return [
 		{
@@ -696,6 +834,18 @@ export function GetJobsQuickFiltersConfig(
 			dataSource: DataSource.METRICS,
 			defaultOpen: true,
 		},
+		{
+			type: FiltersType.CHECKBOX,
+			title: 'Environment',
+			attributeKey: {
+				key: environmentKey,
+				dataType: DataTypes.String,
+				type: 'resource',
+				isColumn: false,
+				isJSON: false,
+			},
+			defaultOpen: true,
+		},
 	];
 }
 

frontend/src/container/IngestionSettings/MultiIngestionSettings.tsx

@@ -71,7 +71,7 @@ import {
 	PaginationProps,
 } from 'types/api/ingestionKeys/types';
 import { USER_ROLES } from 'types/roles';
-import { hasDatePassed } from 'utils/timeUtils';
+import { getDaysUntilExpiry } from 'utils/timeUtils';
 
 const { Option } = Select;
 
@@ -1242,23 +1242,37 @@ function MultiIngestionSettings(): JSX.Element {
 
 						<div className="ingestion-key-details">
 							<div className="ingestion-key-last-used-at">
-								<CalendarClock size={14} />
+								{((): JSX.Element | null => {
+									const daysToExpiry = getDaysUntilExpiry(expiresOn);
+									const isNoExpiry = expiresOn === 'No Expiry';
 
-								{hasDatePassed(expiresOn) ? (
-									<>
-										Expired on <Minus size={12} />
-										<Typography.Text>{expiresOn}</Typography.Text>
-									</>
-								) : (
-									<>
-										{expiresOn !== 'No Expiry' && (
-											<>
-												Expires on <Minus size={12} />
-											</>
-										)}
-										<Typography.Text>{expiresOn}</Typography.Text>
-									</>
-								)}
+									if (!isNoExpiry && daysToExpiry < 0) {
+										return (
+											<div className="ingestion-key-expires-in danger">
+												<CalendarClock size={14} /> Expired on
+												<Minus size={12} /> {expiresOn}
+											</div>
+										);
+									}
+									if (!isNoExpiry && daysToExpiry <= 3) {
+										return (
+											<div className="ingestion-key-expires-in warning">
+												<CalendarClock size={14} /> Expires on
+												<Minus size={12} /> {expiresOn}
+											</div>
+										);
+									}
+									return (
+										<>
+											{!isNoExpiry && (
+												<>
+													<CalendarClock size={14} /> Expires on <Minus size={12} />
+												</>
+											)}
+											<Typography.Text>{expiresOn}</Typography.Text>
+										</>
+									);
+								})()}
 							</div>
 						</div>
 					</div>

frontend/src/container/ListOfDashboard/RequestDashboardBtn.tsx

@@ -58,7 +58,14 @@ export function RequestDashboardBtn(): JSX.Element {
 	return (
 		<div className="request-entity-container">
 			<Typography.Text>
-				Can&apos;t find the dashboard you need? Request a new Dashboard.
+				<a
+					href="https://github.com/SigNoz/dashboards"
+					target="_blank"
+					rel="noopener noreferrer"
+				>
+					Browse dashboard templates
+				</a>{' '}
+				or Request new template →
 			</Typography.Text>
 
 			<div className="form-section">

frontend/src/container/LogDetailedView/ActionItem.tsx

@@ -3,6 +3,7 @@ import { Button, Col, Popover } from 'antd';
 import { OPERATORS } from 'constants/queryBuilder';
 import { removeJSONStringifyQuotes } from 'lib/removeJSONStringifyQuotes';
 import { memo, useCallback, useMemo } from 'react';
+import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
 
 function ActionItem({
 	fieldKey,
@@ -55,6 +56,8 @@ export interface ActionItemProps {
 		fieldKey: string,
 		fieldValue: string,
 		operator: string,
+		isJSON?: boolean,
+		dataType?: DataTypes,
 	) => void;
 }
 

frontend/src/container/LogDetailedView/InfraMetrics/constants.ts

@@ -2463,7 +2463,7 @@ export const getHostQueryPayload = (
 							functions: [],
 							groupBy: [],
 							having: [],
-							legend: '',
+							legend: 'system disk io',
 							limit: null,
 							orderBy: [],
 							queryName: 'A',

frontend/src/container/LogDetailedView/TableView.tsx

@@ -33,7 +33,12 @@ import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { ActionItemProps } from './ActionItem';
 import FieldRenderer from './FieldRenderer';
 import { TableViewActions } from './TableView/TableViewActions';
-import { filterKeyForField, findKeyPath, flattenObject } from './utils';
+import {
+	filterKeyForField,
+	findKeyPath,
+	flattenObject,
+	getFieldAttributes,
+} from './utils';
 
 interface TableViewProps {
 	logData: ILog;
@@ -107,10 +112,17 @@ function TableView({
 		operator: string,
 		fieldKey: string,
 		fieldValue: string,
+		dataType: string | undefined,
 	): void => {
 		const validatedFieldValue = removeJSONStringifyQuotes(fieldValue);
 		if (onClickActionItem) {
-			onClickActionItem(fieldKey, validatedFieldValue, operator);
+			onClickActionItem(
+				fieldKey,
+				validatedFieldValue,
+				operator,
+				undefined,
+				dataType as DataTypes,
+			);
 		}
 	};
 
@@ -118,8 +130,9 @@ function TableView({
 		operator: string,
 		fieldKey: string,
 		fieldValue: string,
+		dataType: string | undefined,
 	) => (): void => {
-		handleClick(operator, fieldKey, fieldValue);
+		handleClick(operator, fieldKey, fieldValue, dataType);
 		if (operator === OPERATORS['=']) {
 			setIsFilterInLoading(true);
 		}
@@ -247,6 +260,7 @@ function TableView({
 				}
 
 				const fieldFilterKey = filterKeyForField(field);
+				const { dataType } = getFieldAttributes(field);
 				if (!RESTRICTED_SELECTED_FIELDS.includes(fieldFilterKey)) {
 					return (
 						<AddToQueryHOC
@@ -254,6 +268,7 @@ function TableView({
 							fieldValue={flattenLogData[field]}
 							onAddToQuery={onAddToQuery}
 							fontSize={FontSize.SMALL}
+							dataType={dataType as DataTypes}
 						>
 							{renderedField}
 						</AddToQueryHOC>

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

@@ -23,6 +23,7 @@ import { DataType } from '../TableView';
 import {
 	escapeHtml,
 	filterKeyForField,
+	getFieldAttributes,
 	jsonToDataNodes,
 	parseFieldValue,
 	recursiveParseJSON,
@@ -45,6 +46,7 @@ interface ITableViewActionsProps {
 		operator: string,
 		fieldKey: string,
 		fieldValue: string,
+		dataType: string | undefined,
 	) => () => void;
 }
 
@@ -64,6 +66,7 @@ export function TableViewActions(
 	} = props;
 
 	const { pathname } = useLocation();
+	const { dataType } = getFieldAttributes(record.field);
 
 	// there is no option for where clause in old logs explorer and live logs page
 	const isOldLogsExplorerOrLiveLogsPage = useMemo(
@@ -161,6 +164,7 @@ export function TableViewActions(
 								OPERATORS['='],
 								fieldFilterKey,
 								parseFieldValue(fieldData.value),
+								dataType,
 							)}
 						/>
 					</Tooltip>
@@ -178,6 +182,7 @@ export function TableViewActions(
 								OPERATORS['!='],
 								fieldFilterKey,
 								parseFieldValue(fieldData.value),
+								dataType,
 							)}
 						/>
 					</Tooltip>

frontend/src/container/LogsExplorerViews/index.tsx

@@ -58,7 +58,8 @@ import {
 	useRef,
 	useState,
 } from 'react';
-import { useSelector } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
+import { UpdateTimeInterval } from 'store/actions';
 import { AppState } from 'store/reducers';
 import { Dashboard } from 'types/api/dashboard/getAll';
 import { ILog } from 'types/api/logs/log';
@@ -95,6 +96,7 @@ function LogsExplorerViews({
 	chartQueryKeyRef: MutableRefObject<any>;
 }): JSX.Element {
 	const { safeNavigate } = useSafeNavigate();
+	const dispatch = useDispatch();
 
 	// this is to respect the panel type present in the URL rather than defaulting it to list always.
 	const panelTypes = useGetPanelTypesQueryParam(PANEL_TYPES.LIST);
@@ -106,9 +108,10 @@ function LogsExplorerViews({
 		DEFAULT_PER_PAGE_VALUE,
 	);
 
-	const { minTime, maxTime } = useSelector<AppState, GlobalReducer>(
-		(state) => state.globalTime,
-	);
+	const { minTime, maxTime, selectedTime } = useSelector<
+		AppState,
+		GlobalReducer
+	>((state) => state.globalTime);
 
 	const currentMinTimeRef = useRef<number>(minTime);
 
@@ -134,6 +137,7 @@ function LogsExplorerViews({
 	const [showFormatMenuItems, setShowFormatMenuItems] = useState(false);
 	const [queryId, setQueryId] = useState<string>(v4());
 	const [queryStats, setQueryStats] = useState<WsDataEvent>();
+	const [listChartQuery, setListChartQuery] = useState<Query | null>(null);
 
 	const listQuery = useMemo(() => {
 		if (!stagedQuery || stagedQuery.builder.queryData.length < 1) return null;
@@ -170,8 +174,11 @@ function LogsExplorerViews({
 		return logs.length >= listQuery.limit;
 	}, [logs.length, listQuery]);
 
-	const listChartQuery = useMemo(() => {
-		if (!stagedQuery || !listQuery) return null;
+	useEffect(() => {
+		if (!stagedQuery || !listQuery) {
+			setListChartQuery(null);
+			return;
+		}
 
 		const modifiedQueryData: IBuilderQuery = {
 			...listQuery,
@@ -220,7 +227,7 @@ function LogsExplorerViews({
 			},
 		};
 
-		return modifiedQuery;
+		setListChartQuery(modifiedQuery);
 	}, [stagedQuery, listQuery, activeLogId]);
 
 	const exportDefaultQuery = useMemo(
@@ -256,6 +263,8 @@ function LogsExplorerViews({
 		{},
 		undefined,
 		chartQueryKeyRef,
+		undefined,
+		'custom',
 	);
 
 	const {
@@ -502,6 +511,16 @@ function LogsExplorerViews({
 			requestData?.id !== stagedQuery?.id ||
 			currentMinTimeRef.current !== minTime
 		) {
+			// Recalculate global time when query changes i.e. stage and run query clicked
+			if (
+				!!requestData?.id &&
+				stagedQuery?.id &&
+				requestData?.id !== stagedQuery?.id &&
+				selectedTime !== 'custom'
+			) {
+				dispatch(UpdateTimeInterval(selectedTime));
+			}
+
 			const newRequestData = getRequestData(stagedQuery, {
 				filters: listQuery?.filters || initialFilters,
 				page: 1,
@@ -523,6 +542,9 @@ function LogsExplorerViews({
 		activeLogId,
 		panelType,
 		selectedView,
+		dispatch,
+		selectedTime,
+		maxTime,
 	]);
 
 	const chartData = useMemo(() => {

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

@@ -8,7 +8,7 @@ import { SELECTED_VIEWS } from 'pages/LogsExplorer/utils';
 import { PreferenceContextProvider } from 'providers/preferences/context/PreferenceContextProvider';
 import { QueryBuilderContext } from 'providers/QueryBuilder';
 import { VirtuosoMockContext } from 'react-virtuoso';
-import { fireEvent, render, RenderResult } from 'tests/test-utils';
+import { fireEvent, render, RenderResult, waitFor } from 'tests/test-utils';
 import { TagFilterItem } from 'types/api/queryBuilder/queryBuilderData';
 
 import LogsExplorerViews from '..';
@@ -197,12 +197,16 @@ describe('LogsExplorerViews -', () => {
 		).toBeInTheDocument();
 	});
 
-	it('should add activeLogId filter when present in URL', () => {
+	it('should add activeLogId filter when present in URL', async () => {
 		// Mock useCopyLogLink to return an activeLogId
 		(useCopyLogLink as jest.Mock).mockReturnValue({
 			activeLogId: ACTIVE_LOG_ID,
 		});
 
+		const originalFiltersLength =
+			mockQueryBuilderContextValue.currentQuery.builder.queryData[0].filters?.items
+				.length || 0;
+
 		lodsQueryServerRequest();
 		render(
 			<QueryBuilderContext.Provider value={mockQueryBuilderContextValue}>
@@ -218,27 +222,36 @@ describe('LogsExplorerViews -', () => {
 			</QueryBuilderContext.Provider>,
 		);
 
-		// Get the query data from the first call to useGetExplorerQueryRange
-		const {
-			queryData,
-		} = (useGetExplorerQueryRange as jest.Mock).mock.calls[0][0].builder;
-		const firstQuery = queryData[0];
+		await waitFor(() => {
+			const listCall = (useGetExplorerQueryRange as jest.Mock).mock.calls.find(
+				(call) =>
+					call[0] &&
+					call[0].builder.queryData[0].filters.items.length ===
+						originalFiltersLength + 1,
+			);
 
-		// Get the original number of filters from mock data
-		const originalFiltersLength =
-			mockQueryBuilderContextValue.currentQuery.builder.queryData[0].filters?.items
-				.length || 0;
-		const expectedFiltersLength = originalFiltersLength + 1; // +1 for activeLogId filter
+			expect(listCall).toBeDefined();
 
-		// Verify that the activeLogId filter is present
-		expect(
-			firstQuery.filters?.items.some(
-				(item: TagFilterItem) =>
-					item.key?.key === 'id' && item.op === '<=' && item.value === ACTIVE_LOG_ID,
-			),
-		).toBe(true);
+			if (listCall) {
+				const { queryData } = listCall[0].builder;
 
-		// Verify the total number of filters (original + 1 new activeLogId filter)
-		expect(firstQuery.filters?.items.length).toBe(expectedFiltersLength);
+				const firstQuery = queryData[0];
+
+				const expectedFiltersLength = originalFiltersLength + 1; // +1 for activeLogId filter
+
+				// Verify that the activeLogId filter is present
+				expect(
+					firstQuery.filters?.items.some(
+						(item: TagFilterItem) =>
+							item.key?.key === 'id' &&
+							item.op === '<=' &&
+							item.value === ACTIVE_LOG_ID,
+					),
+				).toBe(true);
+
+				// Verify the total number of filters (original + 1 new activeLogId filter)
+				expect(firstQuery.filters?.items.length).toBe(expectedFiltersLength);
+			}
+		});
 	});
 });

frontend/src/container/MetricsApplication/MetricsPageQueries/OverviewQueries.ts

@@ -611,9 +611,7 @@ export const errorPercentage = ({
 		{
 			id: '',
 			key: {
-				key: dotMetricsEnabled
-					? WidgetKeys.Service_name
-					: WidgetKeys.StatusCodeNorm,
+				key: dotMetricsEnabled ? WidgetKeys.StatusCode : WidgetKeys.StatusCodeNorm,
 				dataType: DataTypes.Int64,
 				isColumn: false,
 				type: MetricsType.Tag,

frontend/src/container/NewWidget/LeftContainer/ExplorerAttributeColumns.tsx

@@ -0,0 +1,55 @@
+import { Checkbox, Empty } from 'antd';
+import Spinner from 'components/Spinner';
+
+type ExplorerAttributeColumnsProps = {
+	isLoading: boolean;
+	data: any;
+	searchText: string;
+	isAttributeKeySelected: (key: string) => boolean;
+	handleCheckboxChange: (key: string) => void;
+};
+
+function ExplorerAttributeColumns({
+	isLoading,
+	data,
+	searchText,
+	isAttributeKeySelected,
+	handleCheckboxChange,
+}: ExplorerAttributeColumnsProps): JSX.Element {
+	if (isLoading) {
+		return (
+			<div className="attribute-columns">
+				<Spinner size="large" tip="Loading..." height="2vh" />
+			</div>
+		);
+	}
+
+	const filteredAttributeKeys =
+		data?.payload?.attributeKeys?.filter((attributeKey: any) =>
+			attributeKey.key.toLowerCase().includes(searchText.toLowerCase()),
+		) || [];
+	if (filteredAttributeKeys.length === 0) {
+		return (
+			<div className="attribute-columns">
+				<Empty description="No columns found" />
+			</div>
+		);
+	}
+
+	return (
+		<div className="attribute-columns">
+			{filteredAttributeKeys.map((attributeKey: any) => (
+				<Checkbox
+					checked={isAttributeKeySelected(attributeKey.key)}
+					onChange={(): void => handleCheckboxChange(attributeKey.key)}
+					style={{ padding: 0 }}
+					key={attributeKey.key}
+				>
+					{attributeKey.key}
+				</Checkbox>
+			))}
+		</div>
+	);
+}
+
+export default ExplorerAttributeColumns;

frontend/src/container/NewWidget/LeftContainer/ExplorerColumnsRenderer.tsx

@@ -3,21 +3,13 @@
 import './ExplorerColumnsRenderer.styles.scss';
 
 import { Color } from '@signozhq/design-tokens';
-import {
-	Button,
-	Checkbox,
-	Divider,
-	Dropdown,
-	Input,
-	Tooltip,
-	Typography,
-} from 'antd';
+import { Button, Divider, Dropdown, Input, Tooltip, Typography } from 'antd';
 import { MenuProps } from 'antd/lib';
-import Spinner from 'components/Spinner';
 import { SOMETHING_WENT_WRONG } from 'constants/api';
 import { useGetAggregateKeys } from 'hooks/queryBuilder/useGetAggregateKeys';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useIsDarkMode } from 'hooks/useDarkMode';
+import useDebouncedFn from 'hooks/useDebouncedFunction';
 import {
 	AlertCircle,
 	GripVertical,
@@ -25,7 +17,7 @@ import {
 	Search,
 	Trash2,
 } from 'lucide-react';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import {
 	DragDropContext,
 	Draggable,
@@ -35,6 +27,7 @@ import {
 import { DataSource } from 'types/common/queryBuilder';
 
 import { WidgetGraphProps } from '../types';
+import ExplorerAttributeColumns from './ExplorerAttributeColumns';
 
 type LogColumnsRendererProps = {
 	setSelectedLogFields: WidgetGraphProps['setSelectedLogFields'];
@@ -51,6 +44,7 @@ function ExplorerColumnsRenderer({
 }: LogColumnsRendererProps): JSX.Element {
 	const { currentQuery } = useQueryBuilder();
 	const [searchText, setSearchText] = useState<string>('');
+	const [querySearchText, setQuerySearchText] = useState<string>('');
 	const [open, setOpen] = useState<boolean>(false);
 
 	const initialDataSource = currentQuery.builder.queryData[0].dataSource;
@@ -60,13 +54,14 @@ function ExplorerColumnsRenderer({
 			aggregateAttribute: '',
 			dataSource: currentQuery.builder.queryData[0].dataSource,
 			aggregateOperator: currentQuery.builder.queryData[0].aggregateOperator,
-			searchText: '',
+			searchText: querySearchText,
 			tagType: '',
 		},
 		{
 			queryKey: [
 				currentQuery.builder.queryData[0].dataSource,
 				currentQuery.builder.queryData[0].aggregateOperator,
+				querySearchText,
 			],
 		},
 	);
@@ -120,8 +115,20 @@ function ExplorerColumnsRenderer({
 		setOpen(false);
 	};
 
+	const debouncedSetQuerySearchText = useDebouncedFn((value) => {
+		setQuerySearchText(value as string);
+	}, 400);
+
+	useEffect(
+		() => (): void => {
+			debouncedSetQuerySearchText.cancel();
+		},
+		[debouncedSetQuerySearchText],
+	);
+
 	const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>): void => {
 		setSearchText(e.target.value);
+		debouncedSetQuerySearchText(e.target.value);
 	};
 
 	const items: MenuProps['items'] = [
@@ -141,22 +148,13 @@ function ExplorerColumnsRenderer({
 		{
 			key: 'columns',
 			label: (
-				<div className="attribute-columns">
-					{data?.payload?.attributeKeys
-						?.filter((attributeKey) =>
-							attributeKey.key.toLowerCase().includes(searchText.toLowerCase()),
-						)
-						?.map((attributeKey) => (
-							<Checkbox
-								checked={isAttributeKeySelected(attributeKey.key)}
-								onChange={(): void => handleCheckboxChange(attributeKey.key)}
-								style={{ padding: 0 }}
-								key={attributeKey.key}
-							>
-								{attributeKey.key}
-							</Checkbox>
-						))}
-				</div>
+				<ExplorerAttributeColumns
+					isLoading={isLoading}
+					data={data}
+					searchText={searchText}
+					isAttributeKeySelected={isAttributeKeySelected}
+					handleCheckboxChange={handleCheckboxChange}
+				/>
 			),
 		},
 	];
@@ -220,17 +218,13 @@ function ExplorerColumnsRenderer({
 
 	const isDarkMode = useIsDarkMode();
 
-	if (isLoading) {
-		return <Spinner size="large" tip="Loading..." height="4vh" />;
-	}
-
 	return (
 		<div className="explorer-columns-renderer">
 			<div className="title">
 				<Typography.Text>Columns</Typography.Text>
 				{isError && (
 					<Tooltip title={SOMETHING_WENT_WRONG}>
-						<AlertCircle size={16} />
+						<AlertCircle size={16} data-testid="alert-circle-icon" />
 					</Tooltip>
 				)}
 			</div>
@@ -265,6 +259,7 @@ function ExplorerColumnsRenderer({
 															size={12}
 															color="red"
 															onClick={(): void => removeSelectedLogField(field.name)}
+															data-testid="trash-icon"
 														/>
 													</div>
 												)}
@@ -290,6 +285,7 @@ function ExplorerColumnsRenderer({
 															size={12}
 															color="red"
 															onClick={(): void => removeSelectedLogField(field.key)}
+															data-testid="trash-icon"
 														/>
 													</div>
 												)}

frontend/src/container/NewWidget/LeftContainer/__test__/ExplorerColumnsRenderer.test.tsx

@@ -0,0 +1,394 @@
+/* eslint-disable sonarjs/no-duplicate-string */
+/* eslint-disable sonarjs/cognitive-complexity */
+/* eslint-disable react/jsx-props-no-spreading */
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { useGetAggregateKeys } from 'hooks/queryBuilder/useGetAggregateKeys';
+import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
+import React from 'react';
+import { DropResult } from 'react-beautiful-dnd';
+import {
+	BaseAutocompleteData,
+	DataTypes,
+} from 'types/api/queryBuilder/queryAutocompleteResponse';
+import { DataSource } from 'types/common/queryBuilder';
+
+import ExplorerColumnsRenderer from '../ExplorerColumnsRenderer';
+
+// Mock hooks
+jest.mock('hooks/queryBuilder/useQueryBuilder');
+jest.mock('hooks/queryBuilder/useGetAggregateKeys');
+
+// Mock react-beautiful-dnd
+let onDragEndMock: ((result: DropResult) => void) | undefined;
+
+jest.mock('react-beautiful-dnd', () => ({
+	DragDropContext: jest.fn(
+		({
+			children,
+			onDragEnd,
+		}: {
+			children: React.ReactNode;
+			onDragEnd: (result: any) => void;
+		}) => {
+			onDragEndMock = onDragEnd;
+			return children;
+		},
+	),
+	Droppable: jest.fn(
+		({ children }: { children: (provided: any) => React.ReactNode }) =>
+			children({
+				draggableProps: { style: {} },
+				innerRef: jest.fn(),
+				placeholder: null,
+			}),
+	),
+	Draggable: jest.fn(
+		({ children }: { children: (provided: any) => React.ReactNode }) =>
+			children({
+				draggableProps: { style: {} },
+				innerRef: jest.fn(),
+				dragHandleProps: {},
+			}),
+	),
+}));
+
+describe('ExplorerColumnsRenderer', () => {
+	const mockSetSelectedLogFields = jest.fn();
+	const mockSetSelectedTracesFields = jest.fn();
+
+	beforeEach(() => {
+		jest.clearAllMocks();
+		// Reset mock implementations for useQueryBuilder and useGetAggregateKeys before each test
+		// to ensure a clean state for each test case unless explicitly overridden.
+		(useQueryBuilder as jest.Mock).mockReturnValue({
+			currentQuery: {
+				builder: {
+					queryData: [
+						{
+							dataSource: DataSource.LOGS,
+							aggregateOperator: 'count',
+						},
+					],
+				},
+			},
+		});
+		(useGetAggregateKeys as jest.Mock).mockReturnValue({
+			data: {
+				payload: {
+					attributeKeys: [
+						{ key: 'attribute1', dataType: 'string', type: '' },
+						{ key: 'attribute2', dataType: 'string', type: '' },
+						{ key: 'another_attribute', dataType: 'string', type: '' },
+					],
+				},
+			},
+			isLoading: false,
+			isError: false,
+		});
+	});
+
+	it('renders correctly with default props and displays "Columns" title', () => {
+		render(
+			<ExplorerColumnsRenderer
+				selectedLogFields={[]}
+				setSelectedLogFields={mockSetSelectedLogFields}
+				selectedTracesFields={[]}
+				setSelectedTracesFields={mockSetSelectedTracesFields}
+			/>,
+		);
+
+		expect(screen.getByText('Columns')).toBeInTheDocument();
+		expect(screen.getByTestId('add-columns-button')).toBeInTheDocument();
+	});
+
+	it('displays error message when data fetching fails', () => {
+		(useGetAggregateKeys as jest.Mock).mockReturnValueOnce({
+			data: undefined,
+			isLoading: false,
+			isError: true,
+		});
+
+		render(
+			<ExplorerColumnsRenderer
+				selectedLogFields={[]}
+				setSelectedLogFields={mockSetSelectedLogFields}
+				selectedTracesFields={[]}
+				setSelectedTracesFields={mockSetSelectedTracesFields}
+			/>,
+		);
+
+		expect(screen.getByTestId('alert-circle-icon')).toBeInTheDocument();
+	});
+
+	it('opens and closes the dropdown', async () => {
+		render(
+			<ExplorerColumnsRenderer
+				selectedLogFields={[]}
+				setSelectedLogFields={mockSetSelectedLogFields}
+				selectedTracesFields={[]}
+				setSelectedTracesFields={mockSetSelectedTracesFields}
+			/>,
+		);
+
+		const addButton = screen.getByTestId('add-columns-button');
+		await userEvent.click(addButton);
+
+		expect(screen.getByPlaceholderText('Search')).toBeInTheDocument();
+		expect(screen.getByText('attribute1')).toBeInTheDocument();
+
+		await userEvent.click(addButton);
+		await waitFor(() => {
+			expect(screen.queryByRole('menu')).not.toBeInTheDocument();
+		});
+	});
+
+	it('filters attribute keys based on search text', async () => {
+		render(
+			<ExplorerColumnsRenderer
+				selectedLogFields={[]}
+				setSelectedLogFields={mockSetSelectedLogFields}
+				selectedTracesFields={[]}
+				setSelectedTracesFields={mockSetSelectedTracesFields}
+			/>,
+		);
+
+		await userEvent.click(screen.getByTestId('add-columns-button'));
+
+		const searchInput = screen.getByPlaceholderText('Search');
+		await userEvent.type(searchInput, 'another');
+
+		await waitFor(() => {
+			expect(screen.queryByText('attribute1')).not.toBeInTheDocument();
+			expect(screen.getByText('another_attribute')).toBeInTheDocument();
+		});
+
+		await userEvent.clear(searchInput);
+		await userEvent.type(searchInput, 'attribute');
+
+		await waitFor(() => {
+			expect(screen.getByText('attribute1')).toBeInTheDocument();
+			expect(screen.getByText('attribute2')).toBeInTheDocument();
+			expect(screen.getByText('another_attribute')).toBeInTheDocument();
+		});
+	});
+
+	describe('Log Data Source', () => {
+		it('adds a log field when checkbox is checked', async () => {
+			render(
+				<ExplorerColumnsRenderer
+					selectedLogFields={[]}
+					setSelectedLogFields={mockSetSelectedLogFields}
+					selectedTracesFields={[]}
+					setSelectedTracesFields={mockSetSelectedTracesFields}
+				/>,
+			);
+
+			await userEvent.click(screen.getByTestId('add-columns-button'));
+			const checkbox = screen.getByLabelText('attribute1');
+			await userEvent.click(checkbox);
+
+			expect(mockSetSelectedLogFields).toHaveBeenCalledWith([
+				{ dataType: 'string', name: 'attribute1', type: '' },
+			]);
+		});
+
+		it('removes a log field when checkbox is unchecked', async () => {
+			render(
+				<ExplorerColumnsRenderer
+					selectedLogFields={[{ dataType: 'string', name: 'attribute1', type: '' }]}
+					setSelectedLogFields={mockSetSelectedLogFields}
+					selectedTracesFields={[]}
+					setSelectedTracesFields={mockSetSelectedTracesFields}
+				/>,
+			);
+
+			await userEvent.click(screen.getByTestId('add-columns-button'));
+			const checkbox = screen.getByLabelText('attribute1');
+			await userEvent.click(checkbox);
+
+			expect(mockSetSelectedLogFields).toHaveBeenCalledWith([]);
+		});
+
+		it('removes a log field using the trash icon', async () => {
+			render(
+				<ExplorerColumnsRenderer
+					selectedLogFields={[{ dataType: 'string', name: 'attribute1', type: '' }]}
+					setSelectedLogFields={mockSetSelectedLogFields}
+					selectedTracesFields={[]}
+					setSelectedTracesFields={mockSetSelectedTracesFields}
+				/>,
+			);
+
+			expect(screen.getByText('attribute1')).toBeInTheDocument();
+			const trashIcon = screen.getByTestId('trash-icon');
+			await userEvent.click(trashIcon);
+
+			expect(mockSetSelectedLogFields).toHaveBeenCalledWith([]);
+		});
+
+		it('reorders log fields on drag and drop', () => {
+			const initialSelectedFields = [
+				{ dataType: 'string', name: 'field1', type: '' },
+				{ dataType: 'string', name: 'field2', type: '' },
+			];
+
+			render(
+				<ExplorerColumnsRenderer
+					selectedLogFields={initialSelectedFields}
+					setSelectedLogFields={mockSetSelectedLogFields}
+					selectedTracesFields={[]}
+					setSelectedTracesFields={mockSetSelectedTracesFields}
+				/>,
+			);
+
+			const field1Element = screen.getByText('field1');
+			const dragDropContext = field1Element.closest('.explorer-columns');
+
+			if (dragDropContext && onDragEndMock) {
+				// Simulate onDragEnd directly
+				onDragEndMock({
+					source: { index: 0, droppableId: 'drag-drop-list' },
+					destination: { index: 1, droppableId: 'drag-drop-list' },
+					draggableId: '0',
+					type: 'DEFAULT',
+					reason: 'DROP',
+					combine: undefined,
+					mode: 'FLUID',
+				});
+
+				expect(mockSetSelectedLogFields).toHaveBeenCalledWith([
+					{ dataType: 'string', name: 'field2', type: '' },
+					{ dataType: 'string', name: 'field1', type: '' },
+				]);
+			} else {
+				fail('DragDropContext or onDragEndMock not found');
+			}
+		});
+	});
+
+	describe('Trace Data Source', () => {
+		beforeEach(() => {
+			(useQueryBuilder as jest.Mock).mockReturnValue({
+				currentQuery: {
+					builder: {
+						queryData: [
+							{
+								dataSource: DataSource.TRACES,
+								aggregateOperator: 'count',
+							},
+						],
+					},
+				},
+			});
+
+			(useGetAggregateKeys as jest.Mock).mockReturnValue({
+				data: {
+					payload: {
+						attributeKeys: [
+							{ key: 'trace_attribute1', dataType: 'string', type: 'tag' },
+							{ key: 'trace_attribute2', dataType: 'string', type: 'tag' },
+						],
+					},
+				},
+				isLoading: false,
+				isError: false,
+			});
+		});
+
+		it('adds a trace field when checkbox is checked', async () => {
+			render(
+				<ExplorerColumnsRenderer
+					selectedLogFields={[]}
+					setSelectedLogFields={mockSetSelectedLogFields}
+					selectedTracesFields={[]}
+					setSelectedTracesFields={mockSetSelectedTracesFields}
+				/>,
+			);
+
+			await userEvent.click(screen.getByTestId('add-columns-button'));
+			const checkbox = screen.getByLabelText('trace_attribute1');
+			await userEvent.click(checkbox);
+
+			expect(mockSetSelectedTracesFields).toHaveBeenCalledWith([
+				{ key: 'trace_attribute1', dataType: 'string', type: 'tag' },
+			]);
+		});
+
+		it('removes a trace field when checkbox is unchecked', async () => {
+			render(
+				<ExplorerColumnsRenderer
+					selectedLogFields={[]}
+					setSelectedLogFields={mockSetSelectedLogFields}
+					selectedTracesFields={[
+						{ key: 'trace_attribute1', dataType: DataTypes.String, type: 'tag' },
+					]}
+					setSelectedTracesFields={mockSetSelectedTracesFields}
+				/>,
+			);
+
+			await userEvent.click(screen.getByTestId('add-columns-button'));
+			const checkbox = screen.getByLabelText('trace_attribute1');
+			await userEvent.click(checkbox);
+
+			expect(mockSetSelectedTracesFields).toHaveBeenCalledWith([]);
+		});
+
+		it('removes a trace field using the trash icon', async () => {
+			render(
+				<ExplorerColumnsRenderer
+					selectedLogFields={[]}
+					setSelectedLogFields={mockSetSelectedLogFields}
+					selectedTracesFields={[
+						{ key: 'trace_attribute1', dataType: DataTypes.String, type: 'tag' },
+					]}
+					setSelectedTracesFields={mockSetSelectedTracesFields}
+				/>,
+			);
+
+			expect(screen.getByText('trace_attribute1')).toBeInTheDocument();
+			const trashIcon = screen.getByTestId('trash-icon');
+			await userEvent.click(trashIcon);
+
+			expect(mockSetSelectedTracesFields).toHaveBeenCalledWith([]);
+		});
+
+		it('reorders trace fields on drag and drop', () => {
+			const initialSelectedFields = [
+				{ key: 'trace_field1', dataType: 'string', type: 'tag' },
+				{ key: 'trace_field2', dataType: 'string', type: 'tag' },
+			];
+
+			render(
+				<ExplorerColumnsRenderer
+					selectedLogFields={[]}
+					setSelectedLogFields={mockSetSelectedLogFields}
+					selectedTracesFields={initialSelectedFields as BaseAutocompleteData[]}
+					setSelectedTracesFields={mockSetSelectedTracesFields}
+				/>,
+			);
+
+			const traceField1Element = screen.getByText('trace_field1');
+			const dragDropContext = traceField1Element.closest('.explorer-columns');
+			if (dragDropContext && onDragEndMock) {
+				// Simulate onDragEnd directly
+				onDragEndMock({
+					source: { index: 0, droppableId: 'drag-drop-list' },
+					destination: { index: 1, droppableId: 'drag-drop-list' },
+					draggableId: '0',
+					type: 'DEFAULT',
+					reason: 'DROP',
+					combine: undefined,
+					mode: 'FLUID',
+				});
+
+				expect(mockSetSelectedTracesFields).toHaveBeenCalledWith([
+					{ key: 'trace_field2', dataType: 'string', type: 'tag' },
+					{ key: 'trace_field1', dataType: 'string', type: 'tag' },
+				]);
+			} else {
+				fail('DragDropContext or onDragEndMock not found');
+			}
+		});
+	});
+});

frontend/src/container/NewWidget/index.tsx

@@ -421,6 +421,7 @@ function NewWidget({ selectedGraph }: NewWidgetProps): JSX.Element {
 				formatForWeb:
 					getGraphTypeForFormat(selectedGraph || selectedWidget.panelTypes) ===
 					PANEL_TYPES.TABLE,
+				originalGraphType: selectedGraph || selectedWidget.panelTypes,
 			}));
 		}
 		// eslint-disable-next-line react-hooks/exhaustive-deps

frontend/src/container/OnboardingQuestionaire/AboutSigNozQuestions/AboutSigNozQuestions.tsx

@@ -3,15 +3,15 @@ import '../OnboardingQuestionaire.styles.scss';
 
 import { Color } from '@signozhq/design-tokens';
 import { Button, Input, Typography } from 'antd';
+import TextArea from 'antd/lib/input/TextArea';
 import logEvent from 'api/common/logEvent';
 import { ArrowLeft, ArrowRight, CheckCircle } from 'lucide-react';
 import { useEffect, useState } from 'react';
 
 export interface SignozDetails {
-	hearAboutSignoz: string | null;
 	interestInSignoz: string | null;
 	otherInterestInSignoz: string | null;
-	otherAboutSignoz: string | null;
+	discoverSignoz: string | null;
 }
 
 interface AboutSigNozQuestionsProps {
@@ -21,15 +21,6 @@ interface AboutSigNozQuestionsProps {
 	onBack: () => void;
 }
 
-const hearAboutSignozOptions: Record<string, string> = {
-	search: 'Google / Search',
-	hackerNews: 'Hacker News',
-	linkedin: 'LinkedIn',
-	twitter: 'Twitter',
-	reddit: 'Reddit',
-	colleaguesFriends: 'Colleagues / Friends',
-};
-
 const interestedInOptions: Record<string, string> = {
 	savingCosts: 'Saving costs',
 	otelNativeStack: 'Interested in Otel-native stack',
@@ -42,24 +33,20 @@ export function AboutSigNozQuestions({
 	onNext,
 	onBack,
 }: AboutSigNozQuestionsProps): JSX.Element {
-	const [hearAboutSignoz, setHearAboutSignoz] = useState<string | null>(
-		signozDetails?.hearAboutSignoz || null,
-	);
-	const [otherAboutSignoz, setOtherAboutSignoz] = useState<string>(
-		signozDetails?.otherAboutSignoz || '',
-	);
 	const [interestInSignoz, setInterestInSignoz] = useState<string | null>(
 		signozDetails?.interestInSignoz || null,
 	);
 	const [otherInterestInSignoz, setOtherInterestInSignoz] = useState<string>(
 		signozDetails?.otherInterestInSignoz || '',
 	);
+	const [discoverSignoz, setDiscoverSignoz] = useState<string>(
+		signozDetails?.discoverSignoz || '',
+	);
 	const [isNextDisabled, setIsNextDisabled] = useState<boolean>(true);
 
 	useEffect((): void => {
 		if (
-			hearAboutSignoz !== null &&
-			(hearAboutSignoz !== 'Others' || otherAboutSignoz !== '') &&
+			discoverSignoz !== '' &&
 			interestInSignoz !== null &&
 			(interestInSignoz !== 'Others' || otherInterestInSignoz !== '')
 		) {
@@ -67,24 +54,17 @@ export function AboutSigNozQuestions({
 		} else {
 			setIsNextDisabled(true);
 		}
-	}, [
-		hearAboutSignoz,
-		otherAboutSignoz,
-		interestInSignoz,
-		otherInterestInSignoz,
-	]);
+	}, [interestInSignoz, otherInterestInSignoz, discoverSignoz]);
 
 	const handleOnNext = (): void => {
 		setSignozDetails({
-			hearAboutSignoz,
-			otherAboutSignoz,
+			discoverSignoz,
 			interestInSignoz,
 			otherInterestInSignoz,
 		});
 
 		logEvent('Org Onboarding: Answered', {
-			hearAboutSignoz,
-			otherAboutSignoz,
+			discoverSignoz,
 			interestInSignoz,
 			otherInterestInSignoz,
 		});
@@ -94,8 +74,7 @@ export function AboutSigNozQuestions({
 
 	const handleOnBack = (): void => {
 		setSignozDetails({
-			hearAboutSignoz,
-			otherAboutSignoz,
+			discoverSignoz,
 			interestInSignoz,
 			otherInterestInSignoz,
 		});
@@ -115,52 +94,16 @@ export function AboutSigNozQuestions({
 			<div className="questions-form-container">
 				<div className="questions-form">
 					<div className="form-group">
-						<div className="question">Where did you hear about SigNoz?</div>
-						<div className="two-column-grid">
-							{Object.keys(hearAboutSignozOptions).map((option: string) => (
-								<Button
-									key={option}
-									type="primary"
-									className={`onboarding-questionaire-button ${
-										hearAboutSignoz === option ? 'active' : ''
-									}`}
-									onClick={(): void => setHearAboutSignoz(option)}
-								>
-									{hearAboutSignozOptions[option]}
-									{hearAboutSignoz === option && (
-										<CheckCircle size={12} color={Color.BG_FOREST_500} />
-									)}
-								</Button>
-							))}
+						<div className="question">How did you first come across SigNoz?</div>
 
-							{hearAboutSignoz === 'Others' ? (
-								<Input
-									type="text"
-									className="onboarding-questionaire-other-input"
-									placeholder="How you got to know about us"
-									value={otherAboutSignoz}
-									autoFocus
-									addonAfter={
-										otherAboutSignoz !== '' ? (
-											<CheckCircle size={12} color={Color.BG_FOREST_500} />
-										) : (
-											''
-										)
-									}
-									onChange={(e): void => setOtherAboutSignoz(e.target.value)}
-								/>
-							) : (
-								<Button
-									type="primary"
-									className={`onboarding-questionaire-button ${
-										hearAboutSignoz === 'Others' ? 'active' : ''
-									}`}
-									onClick={(): void => setHearAboutSignoz('Others')}
-								>
-									Others
-								</Button>
-							)}
-						</div>
+						<TextArea
+							className="discover-signoz-input"
+							placeholder="e.g., Google Search, Hacker News, Reddit, a friend, ChatGPT, a blog post, a conference, etc."
+							value={discoverSignoz}
+							autoFocus
+							rows={4}
+							onChange={(e): void => setDiscoverSignoz(e.target.value)}
+						/>
 					</div>
 
 					<div className="form-group">

frontend/src/container/OnboardingQuestionaire/OnboardingQuestionaire.styles.scss

@@ -84,6 +84,23 @@
 				}
 			}
 
+			.discover-signoz-input {
+				width: 100%;
+				height: 100px;
+				resize: none;
+				border: 1px solid var(--bg-slate-400);
+				background: var(--bg-ink-300);
+				color: var(--bg-vanilla-100);
+				border-radius: 4px;
+				font-size: 14px;
+				padding: 12px;
+
+				&::placeholder {
+					color: var(--bg-vanilla-400);
+					opacity: 1;
+				}
+			}
+
 			&.invite-team-members-form {
 				min-height: calc(420px - 24px);
 				max-height: calc(420px - 24px);
@@ -123,7 +140,7 @@
 
 					height: 32px;
 					background: var(--Ink-300, #16181d);
-					border: 1px solid var(--bg-slate-400);
+					border: 1px solid var(--Greyscale-Slate-400, #1d212d);
 					color: var(--bg-vanilla-400);
 				}
 
@@ -445,6 +462,17 @@
 					}
 				}
 
+				.discover-signoz-input {
+					border: 1px solid var(--bg-vanilla-300);
+					background: var(--bg-vanilla-100);
+					color: var(--text-ink-300);
+
+					&::placeholder {
+						color: var(--bg-slate-400);
+						opacity: 1;
+					}
+				}
+
 				&.invite-team-members-form {
 					.invite-team-members-container {
 						max-height: 260px;

frontend/src/container/OnboardingQuestionaire/OrgQuestions/OrgQuestions.tsx

@@ -21,7 +21,7 @@ export interface OrgDetails {
 	usesObservability: boolean | null;
 	observabilityTool: string | null;
 	otherTool: string | null;
-	familiarity: string | null;
+	usesOtel: boolean | null;
 }
 
 interface OrgQuestionsProps {
@@ -40,13 +40,6 @@ const observabilityTools = {
 	Honeycomb: 'Honeycomb',
 };
 
-const o11yFamiliarityOptions: Record<string, string> = {
-	beginner: 'Beginner',
-	intermediate: 'Intermediate',
-	expert: 'Expert',
-	notFamiliar: "I'm not familiar with it",
-};
-
 function OrgQuestions({
 	currentOrgData,
 	orgDetails,
@@ -69,9 +62,6 @@ function OrgQuestions({
 	const [otherTool, setOtherTool] = useState<string>(
 		orgDetails?.otherTool || '',
 	);
-	const [familiarity, setFamiliarity] = useState<string | null>(
-		orgDetails?.familiarity || null,
-	);
 	const [isNextDisabled, setIsNextDisabled] = useState<boolean>(true);
 
 	useEffect(() => {
@@ -80,6 +70,10 @@ function OrgQuestions({
 
 	const [isLoading, setIsLoading] = useState<boolean>(false);
 
+	const [usesOtel, setUsesOtel] = useState<boolean | null>(
+		orgDetails?.usesOtel || null,
+	);
+
 	const handleOrgNameUpdate = async (): Promise<void> => {
 		/* Early bailout if orgData is not set or if the organisation name is not set or if the organisation name is empty or if the organisation name is the same as the one in the orgData */
 		if (
@@ -92,7 +86,7 @@ function OrgQuestions({
 				usesObservability,
 				observabilityTool,
 				otherTool,
-				familiarity,
+				usesOtel,
 			});
 
 			onNext({
@@ -100,7 +94,7 @@ function OrgQuestions({
 				usesObservability,
 				observabilityTool,
 				otherTool,
-				familiarity,
+				usesOtel,
 			});
 
 			return;
@@ -123,7 +117,7 @@ function OrgQuestions({
 					usesObservability,
 					observabilityTool,
 					otherTool,
-					familiarity,
+					usesOtel,
 				});
 
 				onNext({
@@ -131,7 +125,7 @@ function OrgQuestions({
 					usesObservability,
 					observabilityTool,
 					otherTool,
-					familiarity,
+					usesOtel,
 				});
 			} else {
 				logEvent('Org Onboarding: Org Name Update Failed', {
@@ -177,7 +171,7 @@ function OrgQuestions({
 	useEffect(() => {
 		const isValidObservability = isValidUsesObservability();
 
-		if (organisationName !== '' && familiarity !== null && isValidObservability) {
+		if (organisationName !== '' && usesOtel !== null && isValidObservability) {
 			setIsNextDisabled(false);
 		} else {
 			setIsNextDisabled(true);
@@ -186,7 +180,7 @@ function OrgQuestions({
 	}, [
 		organisationName,
 		usesObservability,
-		familiarity,
+		usesOtel,
 		observabilityTool,
 		otherTool,
 	]);
@@ -317,25 +311,37 @@ function OrgQuestions({
 					)}
 
 					<div className="form-group">
-						<div className="question">
-							Are you familiar with setting up observability (o11y)?
-						</div>
+						<div className="question">Do you already use OpenTelemetry?</div>
 						<div className="two-column-grid">
-							{Object.keys(o11yFamiliarityOptions).map((option: string) => (
-								<Button
-									key={option}
-									type="primary"
-									className={`onboarding-questionaire-button ${
-										familiarity === option ? 'active' : ''
-									}`}
-									onClick={(): void => setFamiliarity(option)}
-								>
-									{o11yFamiliarityOptions[option]}
-									{familiarity === option && (
-										<CheckCircle size={12} color={Color.BG_FOREST_500} />
-									)}
-								</Button>
-							))}
+							<Button
+								type="primary"
+								name="usesObservability"
+								className={`onboarding-questionaire-button ${
+									usesOtel === true ? 'active' : ''
+								}`}
+								onClick={(): void => {
+									setUsesOtel(true);
+								}}
+							>
+								Yes{' '}
+								{usesOtel === true && (
+									<CheckCircle size={12} color={Color.BG_FOREST_500} />
+								)}
+							</Button>
+							<Button
+								type="primary"
+								className={`onboarding-questionaire-button ${
+									usesOtel === false ? 'active' : ''
+								}`}
+								onClick={(): void => {
+									setUsesOtel(false);
+								}}
+							>
+								No{' '}
+								{usesOtel === false && (
+									<CheckCircle size={12} color={Color.BG_FOREST_500} />
+								)}
+							</Button>
 						</div>
 					</div>
 				</div>

frontend/src/container/OnboardingQuestionaire/index.tsx

@@ -42,14 +42,13 @@ const INITIAL_ORG_DETAILS: OrgDetails = {
 	usesObservability: true,
 	observabilityTool: '',
 	otherTool: '',
-	familiarity: '',
+	usesOtel: null,
 };
 
 const INITIAL_SIGNOZ_DETAILS: SignozDetails = {
-	hearAboutSignoz: '',
 	interestInSignoz: '',
 	otherInterestInSignoz: '',
-	otherAboutSignoz: '',
+	discoverSignoz: '',
 };
 
 const INITIAL_OPTIMISE_SIGNOZ_DETAILS: OptimiseSignozDetails = {
@@ -168,22 +167,17 @@ function OnboardingQuestionaire(): JSX.Element {
 		});
 
 		updateProfile({
-			familiarity_with_observability: orgDetails?.familiarity as string,
+			uses_otel: orgDetails?.usesOtel as boolean,
 			has_existing_observability_tool: orgDetails?.usesObservability as boolean,
 			existing_observability_tool:
 				orgDetails?.observabilityTool === 'Others'
 					? (orgDetails?.otherTool as string)
 					: (orgDetails?.observabilityTool as string),
-
+			where_did_you_discover_signoz: signozDetails?.discoverSignoz as string,
 			reasons_for_interest_in_signoz:
 				signozDetails?.interestInSignoz === 'Others'
 					? (signozDetails?.otherInterestInSignoz as string)
 					: (signozDetails?.interestInSignoz as string),
-			where_did_you_hear_about_signoz:
-				signozDetails?.hearAboutSignoz === 'Others'
-					? (signozDetails?.otherAboutSignoz as string)
-					: (signozDetails?.hearAboutSignoz as string),
-
 			logs_scale_per_day_in_gb: optimiseSignozDetails?.logsPerDay as number,
 			number_of_hosts: optimiseSignozDetails?.hostsPerDay as number,
 			number_of_services: optimiseSignozDetails?.services as number,

frontend/src/container/OnboardingV2Container/onboarding-configs/onboarding-config-with-links.json

@@ -1631,7 +1631,7 @@
 			"docker metrics to signoz"
 		],
 		"imgUrl": "/Logos/docker.svg",
-		"link": "https://signoz.io/docs/userguide/k8s-metrics/"
+		"link": "https://signoz.io/docs/metrics-management/docker-container-metrics/"
 	},
 	{
 		"dataSource": "ec2-application-logs",

frontend/src/container/PipelinePage/Layouts/ChangeHistory/tests/testUtils.ts

@@ -9,7 +9,7 @@ export const pipelineData: Pipeline = {
 	active: false,
 	is_valid: false,
 	disabled: false,
-	deployStatus: 'DEPLOYED',
+	deployStatus: 'deployed',
 	deployResult: 'Deployment was successful',
 	lastHash: 'log_pipelines:24',
 	lastConf: 'oiwernveroi',
@@ -135,7 +135,7 @@ export const pipelineData: Pipeline = {
 			active: false,
 			isValid: false,
 			disabled: false,
-			deployStatus: 'DEPLOYED',
+			deployStatus: 'deployed',
 			deployResult: 'Deployment was successful',
 			lastHash: 'log_pipelines:24',
 			lastConf: 'eovineroiv',
@@ -150,7 +150,7 @@ export const pipelineData: Pipeline = {
 			active: false,
 			isValid: false,
 			disabled: false,
-			deployStatus: 'DEPLOYED',
+			deployStatus: 'deployed',
 			deployResult: 'Deployment was successful',
 			lastHash: 'log_pipelines:23',
 			lastConf: 'eivrounreovi',
@@ -169,7 +169,7 @@ export const pipelineDataHistory: Pipeline['history'] = [
 		active: false,
 		isValid: false,
 		disabled: false,
-		deployStatus: 'DEPLOYED',
+		deployStatus: 'deployed',
 		deployResult: 'Deployment was successful',
 		lastHash: 'log_pipelines:24',
 		lastConf: 'eovineroiv',
@@ -184,7 +184,7 @@ export const pipelineDataHistory: Pipeline['history'] = [
 		active: false,
 		isValid: false,
 		disabled: false,
-		deployStatus: 'IN_PROGRESS',
+		deployStatus: 'in_progress',
 		deployResult: 'Deployment is in progress',
 		lastHash: 'log_pipelines:23',
 		lastConf: 'eivrounreovi',
@@ -199,7 +199,7 @@ export const pipelineDataHistory: Pipeline['history'] = [
 		active: false,
 		isValid: false,
 		disabled: false,
-		deployStatus: 'DIRTY',
+		deployStatus: 'dirty',
 		deployResult: 'Deployment is dirty',
 		lastHash: 'log_pipelines:23',
 		lastConf: 'eivrounreovi',
@@ -214,7 +214,7 @@ export const pipelineDataHistory: Pipeline['history'] = [
 		active: false,
 		isValid: false,
 		disabled: false,
-		deployStatus: 'FAILED',
+		deployStatus: 'failed',
 		deployResult: 'Deployment failed',
 		lastHash: 'log_pipelines:23',
 		lastConf: 'eivrounreovi',
@@ -229,7 +229,7 @@ export const pipelineDataHistory: Pipeline['history'] = [
 		active: false,
 		isValid: false,
 		disabled: false,
-		deployStatus: 'UNKNOWN',
+		deployStatus: 'unknown',
 		deployResult: '',
 		lastHash: 'log_pipelines:23',
 		lastConf: 'eivrounreovi',

frontend/src/container/PipelinePage/Layouts/ChangeHistory/utils.tsx

@@ -9,15 +9,15 @@ import { Spin } from 'antd';
 
 export function getDeploymentStage(value: string): string {
 	switch (value) {
-		case 'IN_PROGRESS':
+		case 'in_progress':
 			return 'In Progress';
-		case 'DEPLOYED':
+		case 'deployed':
 			return 'Deployed';
-		case 'DIRTY':
+		case 'dirty':
 			return 'Dirty';
-		case 'FAILED':
+		case 'failed':
 			return 'Failed';
-		case 'UNKNOWN':
+		case 'unknown':
 			return 'Unknown';
 		default:
 			return '';
@@ -26,17 +26,17 @@ export function getDeploymentStage(value: string): string {
 
 export function getDeploymentStageIcon(value: string): JSX.Element {
 	switch (value) {
-		case 'IN_PROGRESS':
+		case 'in_progress':
 			return (
 				<Spin indicator={<LoadingOutlined style={{ fontSize: 15 }} spin />} />
 			);
-		case 'DEPLOYED':
+		case 'deployed':
 			return <CheckCircleFilled />;
-		case 'DIRTY':
+		case 'dirty':
 			return <ExclamationCircleFilled />;
-		case 'FAILED':
+		case 'failed':
 			return <CloseCircleFilled />;
-		case 'UNKNOWN':
+		case 'unknown':
 			return <MinusCircleFilled />;
 		default:
 			return <span />;

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

@@ -240,6 +240,7 @@
 					line-height: 18px; /* 163.636% */
 					letter-spacing: 0.88px;
 					text-transform: uppercase;
+					min-height: 18px;
 
 					display: flex;
 					align-items: center;
@@ -889,6 +890,10 @@
 	.ant-dropdown-menu-item-divider {
 		background-color: var(--Slate-500, #161922) !important;
 	}
+
+	.ant-dropdown-menu-item-disabled {
+		opacity: 0.7;
+	}
 }
 
 .settings-dropdown,

frontend/src/container/SideNav/SideNav.tsx

@@ -23,6 +23,7 @@ import logEvent from 'api/common/logEvent';
 import { Logout } from 'api/utils';
 import updateUserPreference from 'api/v1/user/preferences/name/update';
 import cx from 'classnames';
+import ChangelogModal from 'components/ChangelogModal/ChangelogModal';
 import { FeatureKeys } from 'constants/features';
 import ROUTES from 'constants/routes';
 import { GlobalShortcuts } from 'constants/shortcuts/globalShortcuts';
@@ -124,6 +125,7 @@ function SideNav({ isPinned }: { isPinned: boolean }): JSX.Element {
 		trialInfo,
 		isLoggedIn,
 		userPreferences,
+		changelog,
 		updateUserPreferenceInContext,
 	} = useAppContext();
 
@@ -155,6 +157,7 @@ function SideNav({ isPinned }: { isPinned: boolean }): JSX.Element {
 
 	const [hasScroll, setHasScroll] = useState(false);
 	const navTopSectionRef = useRef<HTMLDivElement>(null);
+	const [showChangelogModal, setShowChangelogModal] = useState<boolean>(false);
 
 	const checkScroll = useCallback((): void => {
 		if (navTopSectionRef.current) {
@@ -447,6 +450,7 @@ function SideNav({ isPinned }: { isPinned: boolean }): JSX.Element {
 				{
 					key: 'workspace',
 					label: 'Workspace Settings',
+					disabled: isWorkspaceBlocked,
 				},
 				...(isEnterpriseSelfHostedUser || isCommunityEnterpriseUser
 					? [
@@ -464,7 +468,12 @@ function SideNav({ isPinned }: { isPinned: boolean }): JSX.Element {
 					),
 				},
 			].filter(Boolean),
-		[isEnterpriseSelfHostedUser, isCommunityEnterpriseUser, user.email],
+		[
+			isEnterpriseSelfHostedUser,
+			isCommunityEnterpriseUser,
+			user.email,
+			isWorkspaceBlocked,
+		],
 	);
 
 	useEffect(() => {
@@ -731,20 +740,13 @@ function SideNav({ isPinned }: { isPinned: boolean }): JSX.Element {
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [isCloudUser, isEnterpriseSelfHostedUser]);
 
-	const onClickVersionHandler = useCallback(
-		(event: MouseEvent): void => {
-			if (isCloudUser) {
-				return;
-			}
+	const onClickVersionHandler = useCallback((): void => {
+		if (isCloudUser) {
+			return;
+		}
 
-			if (isCtrlMetaKey(event)) {
-				openInNewTab(ROUTES.VERSION);
-			} else {
-				history.push(ROUTES.VERSION);
-			}
-		},
-		[isCloudUser],
-	);
+		setShowChangelogModal(true);
+	}, [isCloudUser]);
 
 	useEffect(() => {
 		if (!isLatestVersion && !isCloudUser) {
@@ -784,7 +786,9 @@ function SideNav({ isPinned }: { isPinned: boolean }): JSX.Element {
 										'brand-title-section',
 										isCommunityEnterpriseUser && 'community-enterprise-user',
 										isCloudUser && 'cloud-user',
-										showVersionUpdateNotification && 'version-update-notification',
+										showVersionUpdateNotification &&
+											changelog &&
+											'version-update-notification',
 									)}
 								>
 									<span className="license-type"> {licenseTag} </span>
@@ -795,7 +799,8 @@ function SideNav({ isPinned }: { isPinned: boolean }): JSX.Element {
 											overlayClassName="version-tooltip-overlay"
 											arrow={false}
 											overlay={
-												showVersionUpdateNotification && (
+												showVersionUpdateNotification &&
+												changelog && (
 													<div className="version-update-notification-tooltip">
 														<div className="version-update-notification-tooltip-title">
 															There&apos;s a new version available.
@@ -813,7 +818,7 @@ function SideNav({ isPinned }: { isPinned: boolean }): JSX.Element {
 													{currentVersion}
 												</span>
 
-												{showVersionUpdateNotification && (
+												{showVersionUpdateNotification && changelog && (
 													<span className="version-update-notification-dot-icon" />
 												)}
 											</div>
@@ -1044,6 +1049,9 @@ function SideNav({ isPinned }: { isPinned: boolean }): JSX.Element {
 					</div>
 				</div>
 			</Modal>
+			{showChangelogModal && (
+				<ChangelogModal onClose={(): void => setShowChangelogModal(false)} />
+			)}
 		</div>
 	);
 }

frontend/src/container/SideNav/menuItems.tsx

@@ -391,7 +391,7 @@ export const helpSupportDropdownMenuItems: SidebarItem[] = [
 	},
 	{
 		key: 'invite-collaborators',
-		label: 'Invite a Collaborator',
+		label: 'Invite a Team Member',
 		icon: <Plus size={14} />,
 		itemKey: 'invite-collaborators',
 	},
@@ -403,6 +403,10 @@ export const NEW_ROUTES_MENU_ITEM_KEY_MAP: Record<string, string> = {
 	[ROUTES.TRACE_EXPLORER]: ROUTES.TRACES_EXPLORER,
 	[ROUTES.LOGS_BASE]: ROUTES.LOGS_EXPLORER,
 	[ROUTES.METRICS_EXPLORER_BASE]: ROUTES.METRICS_EXPLORER,
+	[ROUTES.INFRASTRUCTURE_MONITORING_BASE]:
+		ROUTES.INFRASTRUCTURE_MONITORING_HOSTS,
+	[ROUTES.API_MONITORING_BASE]: ROUTES.API_MONITORING,
+	[ROUTES.MESSAGING_QUEUES_BASE]: ROUTES.MESSAGING_QUEUES_OVERVIEW,
 };
 
 export default menuItems;

frontend/src/container/SpanDetailsDrawer/Events/Events.tsx

@@ -1,12 +1,13 @@
 import './Events.styles.scss';
 
-import { Collapse, Input, Tooltip, Typography } from 'antd';
+import { Collapse, Input, Modal, Typography } from 'antd';
 import { getYAxisFormattedValue } from 'components/Graph/yAxisConfig';
 import { Diamond } from 'lucide-react';
 import { useState } from 'react';
 import { Span } from 'types/api/trace/getTraceV2';
 
 import NoData from '../NoData/NoData';
+import EventAttribute from './components/EventAttribute';
 
 interface IEventsTableProps {
 	span: Span;
@@ -17,6 +18,19 @@ interface IEventsTableProps {
 function EventsTable(props: IEventsTableProps): JSX.Element {
 	const { span, startTime, isSearchVisible } = props;
 	const [fieldSearchInput, setFieldSearchInput] = useState<string>('');
+	const [modalContent, setModalContent] = useState<{
+		title: string;
+		content: string;
+	} | null>(null);
+
+	const showAttributeModal = (title: string, content: string): void => {
+		setModalContent({ title, content });
+	};
+
+	const handleCancel = (): void => {
+		setModalContent(null);
+	};
+
 	const events = span.event;
 
 	return (
@@ -91,21 +105,12 @@ function EventsTable(props: IEventsTableProps): JSX.Element {
 												</div>
 												{event.attributeMap &&
 													Object.keys(event.attributeMap).map((attributeKey) => (
-														<div className="attribute-container" key={attributeKey}>
-															<Tooltip title={attributeKey}>
-																<Typography.Text className="attribute-key" ellipsis>
-																	{attributeKey}
-																</Typography.Text>
-															</Tooltip>
-
-															<div className="wrapper">
-																<Tooltip title={event.attributeMap[attributeKey]}>
-																	<Typography.Text className="attribute-value" ellipsis>
-																		{event.attributeMap[attributeKey]}
-																	</Typography.Text>
-																</Tooltip>
-															</div>
-														</div>
+														<EventAttribute
+															key={attributeKey}
+															attributeKey={attributeKey}
+															attributeValue={event.attributeMap[attributeKey]}
+															onExpand={showAttributeModal}
+														/>
 													))}
 											</div>
 										),
@@ -115,6 +120,18 @@ function EventsTable(props: IEventsTableProps): JSX.Element {
 						</div>
 					))}
 			</div>
+			<Modal
+				title={modalContent?.title}
+				open={!!modalContent}
+				onCancel={handleCancel}
+				footer={null}
+				width="80vw"
+				centered
+			>
+				<pre className="attribute-with-expandable-popover__full-view">
+					{modalContent?.content}
+				</pre>
+			</Modal>
 		</div>
 	);
 }

frontend/src/container/SpanDetailsDrawer/Events/components/AttributeWithExpandablePopover.styles.scss

@@ -0,0 +1,31 @@
+.attribute-with-expandable-popover {
+	&__popover {
+		display: flex;
+		flex-direction: column;
+		gap: 8px;
+		max-width: 50vw;
+	}
+
+	&__preview {
+		max-height: 40vh;
+		overflow-y: auto;
+		white-space: pre-wrap;
+		word-break: break-all;
+		padding: 8px;
+		border-radius: 4px;
+	}
+
+	&__expand-button {
+		align-self: flex-end;
+		display: flex;
+		align-items: center;
+		flex-grow: 0;
+	}
+
+	&__full-view {
+		max-height: 70vh;
+		overflow-y: auto;
+		white-space: pre-wrap;
+		word-break: break-all;
+	}
+}

frontend/src/container/SpanDetailsDrawer/Events/components/AttributeWithExpandablePopover.tsx

@@ -0,0 +1,52 @@
+import './AttributeWithExpandablePopover.styles.scss';
+
+import { Button, Popover, Tooltip, Typography } from 'antd';
+import { Fullscreen } from 'lucide-react';
+
+interface AttributeWithExpandablePopoverProps {
+	attributeKey: string;
+	attributeValue: string;
+	onExpand: (title: string, content: string) => void;
+}
+
+function AttributeWithExpandablePopover({
+	attributeKey,
+	attributeValue,
+	onExpand,
+}: AttributeWithExpandablePopoverProps): JSX.Element {
+	const popoverContent = (
+		<div className="attribute-with-expandable-popover__popover">
+			<pre className="attribute-with-expandable-popover__preview">
+				{attributeValue}
+			</pre>
+			<Button
+				onClick={(): void => onExpand(attributeKey, attributeValue)}
+				size="small"
+				className="attribute-with-expandable-popover__expand-button"
+				icon={<Fullscreen size={14} />}
+			>
+				Expand
+			</Button>
+		</div>
+	);
+
+	return (
+		<div className="attribute-container" key={attributeKey}>
+			<Tooltip title={attributeKey}>
+				<Typography.Text className="attribute-key" ellipsis>
+					{attributeKey}
+				</Typography.Text>
+			</Tooltip>
+
+			<div className="wrapper">
+				<Popover content={popoverContent} trigger="hover" placement="topRight">
+					<Typography.Text className="attribute-value" ellipsis>
+						{attributeValue}
+					</Typography.Text>
+				</Popover>
+			</div>
+		</div>
+	);
+}
+
+export default AttributeWithExpandablePopover;

frontend/src/container/SpanDetailsDrawer/Events/components/EventAttribute.tsx

@@ -0,0 +1,46 @@
+import { Tooltip, Typography } from 'antd';
+
+import AttributeWithExpandablePopover from './AttributeWithExpandablePopover';
+
+const EXPANDABLE_ATTRIBUTE_KEYS = ['exception.stacktrace', 'exception.message'];
+
+interface EventAttributeProps {
+	attributeKey: string;
+	attributeValue: string;
+	onExpand: (title: string, content: string) => void;
+}
+
+function EventAttribute({
+	attributeKey,
+	attributeValue,
+	onExpand,
+}: EventAttributeProps): JSX.Element {
+	if (EXPANDABLE_ATTRIBUTE_KEYS.includes(attributeKey)) {
+		return (
+			<AttributeWithExpandablePopover
+				attributeKey={attributeKey}
+				attributeValue={attributeValue}
+				onExpand={onExpand}
+			/>
+		);
+	}
+
+	return (
+		<div className="attribute-container" key={attributeKey}>
+			<Tooltip title={attributeKey}>
+				<Typography.Text className="attribute-key" ellipsis>
+					{attributeKey}
+				</Typography.Text>
+			</Tooltip>
+			<div className="wrapper">
+				<Tooltip title={attributeValue}>
+					<Typography.Text className="attribute-value" ellipsis>
+						{attributeValue}
+					</Typography.Text>
+				</Tooltip>
+			</div>
+		</div>
+	);
+}
+
+export default EventAttribute;

frontend/src/container/SpanDetailsDrawer/SpanDetailsDrawer.tsx

@@ -192,6 +192,19 @@ function SpanDetailsDrawer(props: ISpanDetailsDrawerProps): JSX.Element {
 								</Typography.Text>
 							</div>
 						</div>
+
+						{selectedSpan.statusMessage && (
+							<div className="item">
+								<Typography.Text className="attribute-key">
+									status message
+								</Typography.Text>
+								<div className="value-wrapper">
+									<Typography.Text className="attribute-value">
+										{selectedSpan.statusMessage}
+									</Typography.Text>
+								</div>
+							</div>
+						)}
 					</section>
 
 					<Button onClick={onLogsHandler} className="related-logs">

frontend/src/container/TraceMetadata/TraceMetadata.tsx

@@ -43,13 +43,7 @@ function TraceMetadata(props: ITraceMetadataProps): JSX.Element {
 						<ArrowLeft
 							size={14}
 							onClick={(): void => {
-								// Check if page was opened in new tab (no referrer from same origin)
-								// or if there's no meaningful history to go back to
-								const hasValidReferrer =
-									document.referrer &&
-									new URL(document.referrer).origin === window.location.origin;
-
-								if (hasValidReferrer && window.history.length > 1) {
+								if (window.history.length > 1) {
 									history.goBack();
 								} else {
 									history.push(ROUTES.TRACES_EXPLORER);

frontend/src/container/TraceWaterfall/AddSpanToFunnelModal/AddSpanToFunnelModal.styles.scss

@@ -241,6 +241,15 @@
 			&-title {
 				color: var(--bg-ink-500);
 			}
+
+			&-footer {
+				border-top-color: var(--bg-vanilla-300);
+				background: var(--bg-vanilla-100);
+				.add-span-to-funnel-modal__discard-button {
+					background: var(--bg-vanilla-200);
+					color: var(--bg-ink-500);
+				}
+			}
 		}
 	}
 

frontend/src/container/TraceWaterfall/AddSpanToFunnelModal/AddSpanToFunnelModal.tsx

@@ -72,7 +72,6 @@ function FunnelDetailsView({
 				funnel={funnel}
 				isTraceDetailsPage
 				span={span}
-				disableAutoSave
 				triggerAutoSave={triggerAutoSave}
 				showNotifications={showNotifications}
 			/>
@@ -143,13 +142,19 @@ function AddSpanToFunnelModal({
 	const handleSaveFunnel = (): void => {
 		setTriggerSave(true);
 		// Reset trigger after a brief moment to allow the save to be processed
-		setTimeout(() => setTriggerSave(false), 100);
+		setTimeout(() => {
+			setTriggerSave(false);
+			onClose();
+		}, 100);
 	};
 
 	const handleDiscard = (): void => {
 		setTriggerDiscard(true);
 		// Reset trigger after a brief moment
-		setTimeout(() => setTriggerDiscard(false), 100);
+		setTimeout(() => {
+			setTriggerDiscard(false);
+			onClose();
+		}, 100);
 	};
 
 	const renderListView = (): JSX.Element => (
@@ -239,9 +244,6 @@ function AddSpanToFunnelModal({
 			footer={
 				activeView === ModalView.DETAILS
 					? [
-							<Button key="close" onClick={onClose}>
-								Close
-							</Button>,
 							<Button
 								type="default"
 								key="discard"

frontend/src/container/TraceWaterfall/TraceWaterfallStates/Success/Success.tsx

@@ -149,30 +149,28 @@ function SpanOverview({
 					<Typography.Text className="service-name">
 						{span.serviceName}
 					</Typography.Text>
-					{!!span.serviceName &&
-						!!span.name &&
-						process.env.NODE_ENV === 'development' && (
-							<div className="add-funnel-button">
-								<span className="add-funnel-button__separator">·</span>
-								<Button
-									type="text"
-									size="small"
-									className="add-funnel-button__button"
-									onClick={(e): void => {
-										e.preventDefault();
-										e.stopPropagation();
-										handleAddSpanToFunnel(span);
-									}}
-									icon={
-										<img
-											className="add-funnel-button__icon"
-											src="/Icons/funnel-add.svg"
-											alt="funnel-icon"
-										/>
-									}
-								/>
-							</div>
-						)}
+					{!!span.serviceName && !!span.name && (
+						<div className="add-funnel-button">
+							<span className="add-funnel-button__separator">·</span>
+							<Button
+								type="text"
+								size="small"
+								className="add-funnel-button__button"
+								onClick={(e): void => {
+									e.preventDefault();
+									e.stopPropagation();
+									handleAddSpanToFunnel(span);
+								}}
+								icon={
+									<img
+										className="add-funnel-button__icon"
+										src="/Icons/funnel-add.svg"
+										alt="funnel-icon"
+									/>
+								}
+							/>
+						</div>
+					)}
 				</section>
 			</div>
 		</div>
@@ -475,7 +473,7 @@ function Success(props: ISuccessProps): JSX.Element {
 				virtualiserRef={virtualizerRef}
 				setColumnWidths={setTraceFlamegraphStatsWidth}
 			/>
-			{selectedSpanToAddToFunnel && process.env.NODE_ENV === 'development' && (
+			{selectedSpanToAddToFunnel && (
 				<AddSpanToFunnelModal
 					span={selectedSpanToAddToFunnel}
 					isOpen={isAddSpanToFunnelModalOpen}

frontend/src/container/TriggeredAlerts/FilteredTable/ExapandableRow.tsx

@@ -28,26 +28,26 @@ function ExapandableRow({ allAlerts }: ExapandableRowProps): JSX.Element {
 						hoverable
 						key={alert.fingerprint}
 					>
-						<TableCell>
+						<TableCell minWidth="90px">
 							<Status severity={alert.status.state} />
 						</TableCell>
 
-						<TableCell>
+						<TableCell minWidth="90px" overflowX="scroll">
 							<Typography>{labels.alertname}</Typography>
 						</TableCell>
 
-						<TableCell>
+						<TableCell minWidth="90px">
 							<Typography>{labels.severity}</Typography>
 						</TableCell>
 
-						<TableCell>
+						<TableCell minWidth="90px">
 							<Typography>{`${formatTimezoneAdjustedTimestamp(
 								formatedDate,
 								DATE_TIME_FORMATS.UTC_US,
 							)}`}</Typography>
 						</TableCell>
 
-						<TableCell>
+						<TableCell minWidth="90px" overflowX="scroll">
 							<div>
 								{tags.map((e) => (
 									<Tag key={e}>{`${e}:${labels[e]}`}</Tag>

frontend/src/container/TriggeredAlerts/FilteredTable/TableRow.tsx

@@ -19,7 +19,7 @@ function TableRowComponent({
 	return (
 		<div>
 			<TableRow>
-				<TableCell>
+				<TableCell minWidth="90px">
 					<StatusContainer>
 						<IconContainer onClick={onClickHandler}>
 							{!isClicked ? <PlusSquareOutlined /> : <MinusSquareOutlined />}
@@ -33,10 +33,10 @@ function TableRowComponent({
 						</>
 					</StatusContainer>
 				</TableCell>
-				<TableCell />
-				<TableCell />
-				<TableCell />
-				<TableCell />
+				<TableCell minWidth="90px" />
+				<TableCell minWidth="90px" />
+				<TableCell minWidth="90px" />
+				<TableCell minWidth="90px" />
 				{/* <TableCell minWidth="200px">
 					<Button type="primary">Resume Group</Button>
 				</TableCell> */}

frontend/src/container/TriggeredAlerts/FilteredTable/index.tsx

@@ -36,7 +36,9 @@ function FilteredTable({
 		<Container>
 			<TableHeaderContainer>
 				{headers.map((header) => (
-					<TableHeader key={header}>{header}</TableHeader>
+					<TableHeader key={header} minWidth="90px">
+						{header}
+					</TableHeader>
 				))}
 			</TableHeaderContainer>
 

frontend/src/container/TriggeredAlerts/FilteredTable/styles.ts

@@ -1,13 +1,14 @@
 import { Card } from 'antd';
 import styled from 'styled-components';
 
-export const TableHeader = styled(Card)`
+export const TableHeader = styled(Card)<Props>`
 	&&& {
 		flex: 1;
 		text-align: center;
 		.ant-card-body {
 			padding: 1rem;
 		}
+		min-width: ${(props): string => props.minWidth || ''};
 	}
 `;
 
@@ -37,6 +38,7 @@ export const TableRow = styled(Card)`
 
 interface Props {
 	minWidth?: string;
+	overflowX?: string;
 }
 export const TableCell = styled.div<Props>`
 	&&& {
@@ -45,6 +47,10 @@ export const TableCell = styled.div<Props>`
 		display: flex;
 		justify-content: flex-start;
 		align-items: center;
+		overflow-x: ${(props): string => props.overflowX || 'none'};
+		::-webkit-scrollbar {
+			height: ${(props): string => (props.overflowX ? '2px' : '8px')};
+		}
 	}
 `;
 

frontend/src/hooks/TracesFunnels/useFunnelConfiguration.tsx

@@ -1,10 +1,13 @@
+import { LOCALSTORAGE } from 'constants/localStorage';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import useDebounce from 'hooks/useDebounce';
+import { useLocalStorage } from 'hooks/useLocalStorage';
 import { useNotifications } from 'hooks/useNotifications';
 import { isEqual } from 'lodash-es';
 import { useFunnelContext } from 'pages/TracesFunnels/FunnelContext';
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { useQueryClient } from 'react-query';
+import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { FunnelData, FunnelStepData } from 'types/api/traceFunnels';
 
 import { useUpdateFunnelSteps } from './useFunnels';
@@ -13,22 +16,30 @@ interface UseFunnelConfiguration {
 	isPopoverOpen: boolean;
 	setIsPopoverOpen: (isPopoverOpen: boolean) => void;
 	steps: FunnelStepData[];
+	isSaving: boolean;
 }
 
 // Add this helper function
-const normalizeSteps = (steps: FunnelStepData[]): FunnelStepData[] => {
+export const normalizeSteps = (steps: FunnelStepData[]): FunnelStepData[] => {
 	if (steps.some((step) => !step.filters)) return steps;
 
 	return steps.map((step) => ({
 		...step,
 		filters: {
 			...step.filters,
-			items: step.filters.items.map((item) => ({
-				id: '',
-				key: item.key,
-				value: item.value,
-				op: item.op,
-			})),
+			items: step.filters.items.map((item) => {
+				const {
+					id: unusedId,
+					isIndexed,
+					...keyObj
+				} = item.key as BaseAutocompleteData;
+				return {
+					id: '',
+					key: keyObj,
+					value: item.value,
+					op: item.op,
+				};
+			}),
 		},
 	}));
 };
@@ -36,22 +47,22 @@ const normalizeSteps = (steps: FunnelStepData[]): FunnelStepData[] => {
 // eslint-disable-next-line sonarjs/cognitive-complexity
 export default function useFunnelConfiguration({
 	funnel,
-	disableAutoSave = false,
 	triggerAutoSave = false,
 	showNotifications = false,
 }: {
 	funnel: FunnelData;
-	disableAutoSave?: boolean;
 	triggerAutoSave?: boolean;
 	showNotifications?: boolean;
 }): UseFunnelConfiguration {
 	const { notifications } = useNotifications();
+	const queryClient = useQueryClient();
 	const {
 		steps,
-		initialSteps,
-		hasIncompleteStepFields,
+		lastUpdatedSteps,
+		setLastUpdatedSteps,
 		handleRestoreSteps,
-		handleRunFunnel,
+		selectedTime,
+		setIsUpdatingFunnel,
 	} = useFunnelContext();
 
 	// State management
@@ -59,10 +70,6 @@ export default function useFunnelConfiguration({
 
 	const debouncedSteps = useDebounce(steps, 200);
 
-	const [lastValidatedSteps, setLastValidatedSteps] = useState<FunnelStepData[]>(
-		initialSteps,
-	);
-
 	// Mutation hooks
 	const updateStepsMutation = useUpdateFunnelSteps(
 		funnel.funnel_id,
@@ -71,6 +78,15 @@ export default function useFunnelConfiguration({
 
 	// Derived state
 	const lastSavedStepsStateRef = useRef<FunnelStepData[]>(steps);
+	const hasRestoredFromLocalStorage = useRef(false);
+
+	// localStorage hook for funnel steps
+	const localStorageKey = `${LOCALSTORAGE.FUNNEL_STEPS}_${funnel.funnel_id}`;
+	const [
+		localStorageSavedSteps,
+		setLocalStorageSavedSteps,
+		clearLocalStorageSavedSteps,
+	] = useLocalStorage<FunnelStepData[] | null>(localStorageKey, null);
 
 	const hasStepsChanged = useCallback(() => {
 		const normalizedLastSavedSteps = normalizeSteps(
@@ -80,6 +96,34 @@ export default function useFunnelConfiguration({
 		return !isEqual(normalizedDebouncedSteps, normalizedLastSavedSteps);
 	}, [debouncedSteps]);
 
+	// Handle localStorage for funnel steps
+	useEffect(() => {
+		// Restore from localStorage on first run if
+		if (!hasRestoredFromLocalStorage.current) {
+			const savedSteps = localStorageSavedSteps;
+			if (savedSteps) {
+				handleRestoreSteps(savedSteps);
+				hasRestoredFromLocalStorage.current = true;
+				return;
+			}
+		}
+
+		// Save steps to localStorage
+		if (hasStepsChanged()) {
+			setLocalStorageSavedSteps(debouncedSteps);
+		}
+	}, [
+		debouncedSteps,
+		funnel.funnel_id,
+		hasStepsChanged,
+		handleRestoreSteps,
+		localStorageSavedSteps,
+		setLocalStorageSavedSteps,
+		queryClient,
+		selectedTime,
+		lastUpdatedSteps,
+	]);
+
 	const hasFunnelStepDefinitionsChanged = useCallback(
 		(prevSteps: FunnelStepData[], nextSteps: FunnelStepData[]): boolean => {
 			if (prevSteps.length !== nextSteps.length) return true;
@@ -97,15 +141,6 @@ export default function useFunnelConfiguration({
 		[],
 	);
 
-	const hasFunnelLatencyTypeChanged = useCallback(
-		(prevSteps: FunnelStepData[], nextSteps: FunnelStepData[]): boolean =>
-			prevSteps.some((step, index) => {
-				const nextStep = nextSteps[index];
-				return step.latency_type !== nextStep.latency_type;
-			}),
-		[],
-	);
-
 	// Mutation payload preparation
 	const getUpdatePayload = useCallback(
 		() => ({
@@ -116,33 +151,19 @@ export default function useFunnelConfiguration({
 		[funnel.funnel_id, debouncedSteps],
 	);
 
-	const queryClient = useQueryClient();
-	const { selectedTime } = useFunnelContext();
-
-	const validateStepsQueryKey = useMemo(
-		() => [REACT_QUERY_KEY.VALIDATE_FUNNEL_STEPS, funnel.funnel_id, selectedTime],
-		[funnel.funnel_id, selectedTime],
-	);
 	// eslint-disable-next-line sonarjs/cognitive-complexity
 	useEffect(() => {
-		// Determine if we should save based on the mode
-		let shouldSave = false;
-
-		if (disableAutoSave) {
-			// Manual save mode: only save when explicitly triggered
-			shouldSave = triggerAutoSave;
-		} else {
-			// Auto-save mode: save when steps have changed and no incomplete fields
-			shouldSave = hasStepsChanged() && !hasIncompleteStepFields;
-		}
-
-		if (shouldSave && !isEqual(debouncedSteps, lastValidatedSteps)) {
+		if (triggerAutoSave && !isEqual(debouncedSteps, lastUpdatedSteps)) {
+			setIsUpdatingFunnel(true);
 			updateStepsMutation.mutate(getUpdatePayload(), {
 				onSuccess: (data) => {
 					const updatedFunnelSteps = data?.payload?.steps;
 
 					if (!updatedFunnelSteps) return;
 
+					// Clear localStorage since steps are saved successfully
+					clearLocalStorageSavedSteps();
+
 					queryClient.setQueryData(
 						[REACT_QUERY_KEY.GET_FUNNEL_DETAILS, funnel.funnel_id],
 						(oldData: any) => {
@@ -163,17 +184,9 @@ export default function useFunnelConfiguration({
 						(step) => step.service_name === '' || step.span_name === '',
 					);
 
-					if (hasFunnelLatencyTypeChanged(lastValidatedSteps, debouncedSteps)) {
-						handleRunFunnel();
-						setLastValidatedSteps(debouncedSteps);
-					}
 					// Only validate if funnel steps definitions
-					else if (
-						!hasIncompleteStepFields &&
-						hasFunnelStepDefinitionsChanged(lastValidatedSteps, debouncedSteps)
-					) {
-						queryClient.refetchQueries(validateStepsQueryKey);
-						setLastValidatedSteps(debouncedSteps);
+					if (!hasIncompleteStepFields) {
+						setLastUpdatedSteps(debouncedSteps);
 					}
 
 					// Show success notification only when requested
@@ -216,17 +229,18 @@ export default function useFunnelConfiguration({
 		getUpdatePayload,
 		hasFunnelStepDefinitionsChanged,
 		hasStepsChanged,
-		lastValidatedSteps,
+		lastUpdatedSteps,
 		queryClient,
-		validateStepsQueryKey,
 		triggerAutoSave,
 		showNotifications,
-		disableAutoSave,
+		localStorageSavedSteps,
+		clearLocalStorageSavedSteps,
 	]);
 
 	return {
 		isPopoverOpen,
 		setIsPopoverOpen,
 		steps,
+		isSaving: updateStepsMutation.isLoading,
 	};
 }