fix: data race while getting cached series

* fix: override the stagedQuery orderBy and send order by timestamp in traces view of traces explorer

* chore: write test for sending order by timestamp in the traces view of traces explorer

* refactor: refactor the query transformer to accept partial query object and override fields

.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:
@@ -227,3 +238,9 @@ statsreporter:
   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,16 +111,16 @@ func NewServer(serverOptions *ServerOptions) (*Server, error) {
 	}
 
 	// initiate opamp
-	opAmpModel.InitDB(serverOptions.SigNoz.SQLStore, serverOptions.SigNoz.Instrumentation.Logger(), serverOptions.SigNoz.Modules.OrgGetter)
+	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,
@@ -140,7 +129,7 @@ func NewServer(serverOptions *ServerOptions) (*Server, error) {
 
 	// ingestion pipelines manager
 	logParsingPipelineController, err := logparsingpipeline.NewLogParsingPipelinesController(
-		serverOptions.SigNoz.SQLStore,
+		signoz.SQLStore,
 		integrationsController.GetPipelinesForInstalledIntegrations,
 	)
 	if err != nil {
@@ -149,7 +138,7 @@ func NewServer(serverOptions *ServerOptions) (*Server, error) {
 
 	// initiate agent config handler
 	agentConfMgr, err := agentConf.Initiate(&agentConf.ManagerOptions{
-		Store:         serverOptions.SigNoz.SQLStore,
+		Store:         signoz.SQLStore,
 		AgentFeatures: []agentConf.AgentFeature{logParsingPipelineController},
 	})
 	if err != nil {
@@ -157,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
 	}
@@ -166,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
@@ -222,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())
@@ -239,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)
 
@@ -272,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)
@@ -323,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")
 	}
@@ -333,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")
@@ -346,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
 }
@@ -366,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:
@@ -392,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:
@@ -444,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,
@@ -457,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/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/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/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/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/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/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/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/QueryBuilder/filters/QueryBuilderSearchV2/QueryBuilderSearchV2.tsx

@@ -98,6 +98,7 @@ interface QueryBuilderSearchV2Props {
 	hideSpanScopeSelector?: boolean;
 	// Determines whether to call onChange when a tag is closed
 	triggerOnChangeOnClose?: boolean;
+	skipQueryBuilderRedirect?: boolean;
 }
 
 export interface Option {
@@ -137,6 +138,7 @@ function QueryBuilderSearchV2(
 		operatorConfigKey,
 		hideSpanScopeSelector,
 		triggerOnChangeOnClose,
+		skipQueryBuilderRedirect,
 	} = props;
 
 	const { registerShortcut, deregisterShortcut } = useKeyboardHotkeys();
@@ -1038,7 +1040,11 @@ function QueryBuilderSearchV2(
 				})}
 			</Select>
 			{!hideSpanScopeSelector && (
-				<SpanScopeSelector query={query} onChange={onChange} />
+				<SpanScopeSelector
+					query={query}
+					onChange={onChange}
+					skipQueryBuilderRedirect={skipQueryBuilderRedirect}
+				/>
 			)}
 		</div>
 	);
@@ -1056,6 +1062,7 @@ QueryBuilderSearchV2.defaultProps = {
 	operatorConfigKey: undefined,
 	hideSpanScopeSelector: true,
 	triggerOnChangeOnClose: false,
+	skipQueryBuilderRedirect: false,
 };
 
 export default QueryBuilderSearchV2;

frontend/src/container/QueryBuilder/filters/QueryBuilderSearchV2/SpanScopeSelector.tsx

@@ -23,6 +23,7 @@ interface SpanFilterConfig {
 interface SpanScopeSelectorProps {
 	onChange?: (value: TagFilter) => void;
 	query?: IBuilderQuery;
+	skipQueryBuilderRedirect?: boolean;
 }
 
 const SPAN_FILTER_CONFIG: Record<SpanScope, SpanFilterConfig | null> = {
@@ -58,6 +59,7 @@ const SELECT_OPTIONS = [
 function SpanScopeSelector({
 	onChange,
 	query,
+	skipQueryBuilderRedirect,
 }: SpanScopeSelectorProps): JSX.Element {
 	const { currentQuery, redirectWithQueryBuilderData } = useQueryBuilder();
 	const [selectedScope, setSelectedScope] = useState<SpanScope>(
@@ -79,6 +81,7 @@ function SpanScopeSelector({
 		if (hasFilter('isEntryPoint')) return SpanScope.ENTRYPOINT_SPANS;
 		return SpanScope.ALL_SPANS;
 	};
+
 	useEffect(() => {
 		let queryData = (currentQuery?.builder?.queryData || [])?.find(
 			(item) => item.queryName === query?.queryName,
@@ -127,13 +130,10 @@ function SpanScopeSelector({
 			},
 		}));
 
-		if (onChange && query) {
+		if (skipQueryBuilderRedirect && onChange && query) {
 			onChange({
 				...query.filters,
-				items: getUpdatedFilters(
-					[...query.filters.items, ...newQuery.builder.queryData[0].filters.items],
-					true,
-				),
+				items: getUpdatedFilters([...query.filters.items], true),
 			});
 
 			setSelectedScope(newScope);
@@ -156,6 +156,7 @@ function SpanScopeSelector({
 SpanScopeSelector.defaultProps = {
 	onChange: undefined,
 	query: undefined,
+	skipQueryBuilderRedirect: false,
 };
 
 export default SpanScopeSelector;

frontend/src/container/QueryBuilder/filters/QueryBuilderSearchV2/__test__/SpanScopeSelector.test.tsx

@@ -3,9 +3,11 @@ import {
 	render,
 	RenderResult,
 	screen,
+	within,
 } from '@testing-library/react';
 import { initialQueriesMap } from 'constants/queryBuilder';
 import { QueryBuilderContext } from 'providers/QueryBuilder';
+import { QueryClient, QueryClientProvider } from 'react-query';
 import {
 	IBuilderQuery,
 	Query,
@@ -13,6 +15,7 @@ import {
 	TagFilterItem,
 } from 'types/api/queryBuilder/queryBuilderData';
 
+import QueryBuilderSearchV2 from '../QueryBuilderSearchV2';
 import SpanScopeSelector from '../SpanScopeSelector';
 
 const mockRedirectWithQueryBuilderData = jest.fn();
@@ -48,6 +51,14 @@ const defaultQuery = {
 	},
 };
 
+const queryClient = new QueryClient({
+	defaultOptions: {
+		queries: {
+			refetchOnWindowFocus: false,
+		},
+	},
+});
+
 const defaultQueryBuilderQuery: IBuilderQuery = {
 	...initialQueriesMap.traces.builder.queryData[0],
 	queryName: 'A',
@@ -76,6 +87,7 @@ const renderWithContext = (
 	initialQuery = defaultQuery,
 	onChangeProp?: (value: TagFilter) => void,
 	queryProp?: IBuilderQuery,
+	skipQueryBuilderRedirect = false,
 ): RenderResult =>
 	render(
 		<QueryBuilderContext.Provider
@@ -87,12 +99,19 @@ const renderWithContext = (
 				} as any
 			}
 		>
-			<SpanScopeSelector onChange={onChangeProp} query={queryProp} />
+			<SpanScopeSelector
+				onChange={onChangeProp}
+				query={queryProp}
+				skipQueryBuilderRedirect={skipQueryBuilderRedirect}
+			/>
 		</QueryBuilderContext.Provider>,
 	);
 
 const selectOption = async (optionText: string): Promise<void> => {
-	const selector = screen.getByRole('combobox');
+	const selector = within(screen.getByTestId('span-scope-selector')).getByRole(
+		'combobox',
+	);
+
 	fireEvent.mouseDown(selector);
 
 	// Wait for dropdown to appear
@@ -264,6 +283,7 @@ describe('SpanScopeSelector', () => {
 				defaultQuery,
 				mockOnChange,
 				localQuery,
+				true,
 			);
 			expect(await screen.findByText('All Spans')).toBeInTheDocument();
 
@@ -283,6 +303,7 @@ describe('SpanScopeSelector', () => {
 				defaultQuery,
 				mockOnChange,
 				localQuery,
+				true,
 			);
 			expect(await screen.findByText('Root Spans')).toBeInTheDocument();
 
@@ -303,6 +324,7 @@ describe('SpanScopeSelector', () => {
 				defaultQuery,
 				mockOnChange,
 				localQuery,
+				true,
 			);
 			expect(await screen.findByText('Root Spans')).toBeInTheDocument();
 
@@ -324,6 +346,7 @@ describe('SpanScopeSelector', () => {
 				defaultQuery,
 				mockOnChange,
 				localQuery,
+				true,
 			);
 			expect(await screen.findByText('Root Spans')).toBeInTheDocument();
 
@@ -350,6 +373,7 @@ describe('SpanScopeSelector', () => {
 				defaultQuery,
 				mockOnChange,
 				localQuery,
+				true,
 			);
 			expect(await screen.findByText('Entrypoint Spans')).toBeInTheDocument();
 
@@ -361,5 +385,60 @@ describe('SpanScopeSelector', () => {
 				container.querySelector('span[title="All Spans"]'),
 			).toBeInTheDocument();
 		});
+
+		it('should not duplicate non-scope filters when changing span scope', async () => {
+			const query = {
+				...defaultQuery,
+				builder: {
+					...defaultQuery.builder,
+					queryData: [
+						{
+							...defaultQuery.builder.queryData[0],
+							filters: {
+								items: [createNonScopeFilter('service', 'checkout')],
+								op: 'AND',
+							},
+						},
+					],
+				},
+			};
+			render(
+				<QueryClientProvider client={queryClient}>
+					<QueryBuilderContext.Provider
+						value={
+							{
+								currentQuery: query,
+								redirectWithQueryBuilderData: mockRedirectWithQueryBuilderData,
+							} as any
+						}
+					>
+						<QueryBuilderSearchV2
+							query={query.builder.queryData[0] as any}
+							onChange={mockOnChange}
+							hideSpanScopeSelector={false}
+						/>
+					</QueryBuilderContext.Provider>
+				</QueryClientProvider>,
+			);
+
+			expect(await screen.findByText('All Spans')).toBeInTheDocument();
+
+			await selectOption('Entrypoint Spans');
+
+			expect(mockRedirectWithQueryBuilderData).toHaveBeenCalled();
+
+			const redirectQueryArg = mockRedirectWithQueryBuilderData.mock
+				.calls[0][0] as Query;
+			const { items } = redirectQueryArg.builder.queryData[0].filters;
+			// Count non-scope filters
+			const nonScopeFilters = items.filter(
+				(filter) => filter.key?.type !== 'spanSearchScope',
+			);
+			expect(nonScopeFilters).toHaveLength(1);
+
+			expect(nonScopeFilters).toContainEqual(
+				createNonScopeFilter('service', 'checkout'),
+			);
+		});
 	});
 });

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;

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) {
@@ -737,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) {
@@ -790,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>
@@ -801,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.
@@ -819,7 +818,7 @@ function SideNav({ isPinned }: { isPinned: boolean }): JSX.Element {
 													{currentVersion}
 												</span>
 
-												{showVersionUpdateNotification && (
+												{showVersionUpdateNotification && changelog && (
 													<span className="version-update-notification-dot-icon" />
 												)}
 											</div>
@@ -1050,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

@@ -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/TraceWaterfallStates/Success/Filters/Filters.tsx

@@ -142,6 +142,7 @@ function Filters({
 				}}
 				onChange={handleFilterChange}
 				hideSpanScopeSelector={false}
+				skipQueryBuilderRedirect
 			/>
 			{filteredSpanIds.length > 0 && (
 				<div className="pre-next-toggle">

frontend/src/container/TracesExplorer/TracesView/index.tsx

@@ -17,6 +17,7 @@ import { AppState } from 'store/reducers';
 import { DataSource } from 'types/common/queryBuilder';
 import { GlobalReducer } from 'types/reducer/globalTime';
 import DOCLINKS from 'utils/docLinks';
+import { transformBuilderQueryFields } from 'utils/queryTransformers';
 
 import TraceExplorerControls from '../Controls';
 import { TracesLoading } from '../TraceLoading/TraceLoading';
@@ -39,9 +40,22 @@ function TracesView({ isFilterApplied }: TracesViewProps): JSX.Element {
 		QueryParams.pagination,
 	);
 
+	const transformedQuery = useMemo(
+		() =>
+			transformBuilderQueryFields(stagedQuery || initialQueriesMap.traces, {
+				orderBy: [
+					{
+						columnName: 'timestamp',
+						order: 'desc',
+					},
+				],
+			}),
+		[stagedQuery],
+	);
+
 	const { data, isLoading, isFetching, isError } = useGetQueryRange(
 		{
-			query: stagedQuery || initialQueriesMap.traces,
+			query: transformedQuery,
 			graphType: panelType || PANEL_TYPES.TRACE,
 			selectedTime: 'GLOBAL_TIME',
 			globalSelectedInterval: globalSelectedTime,

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/queryBuilder/useGetQueryRange.ts

@@ -10,6 +10,7 @@ import { useMemo } from 'react';
 import { useQuery, UseQueryOptions, UseQueryResult } from 'react-query';
 import { SuccessResponse } from 'types/api';
 import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
+import { DataSource } from 'types/common/queryBuilder';
 
 type UseGetQueryRange = (
 	requestData: GetQueryResultsProps,
@@ -25,15 +26,13 @@ export const useGetQueryRange: UseGetQueryRange = (
 	headers,
 ) => {
 	const newRequestData: GetQueryResultsProps = useMemo(() => {
+		const firstQueryData = requestData.query.builder?.queryData[0];
 		const isListWithSingleTimestampOrder =
 			requestData.graphType === PANEL_TYPES.LIST &&
-			requestData.query.builder?.queryData[0]?.orderBy?.length === 1 &&
+			firstQueryData?.orderBy?.length === 1 &&
 			// exclude list with id filter (i.e. context logs)
-			!requestData.query.builder?.queryData[0].filters.items.some(
-				(filter) => filter.key?.key === 'id',
-			) &&
-			requestData.query.builder?.queryData[0].orderBy[0].columnName ===
-				'timestamp';
+			!firstQueryData?.filters.items.some((filter) => filter.key?.key === 'id') &&
+			firstQueryData?.orderBy[0].columnName === 'timestamp';
 
 		const modifiedRequestData = {
 			...requestData,
@@ -44,17 +43,20 @@ export const useGetQueryRange: UseGetQueryRange = (
 		};
 
 		// If the query is a list with a single timestamp order, we need to add the id column to the order by clause
-		if (isListWithSingleTimestampOrder) {
+		if (
+			isListWithSingleTimestampOrder &&
+			firstQueryData?.dataSource === DataSource.LOGS
+		) {
 			modifiedRequestData.query.builder = {
 				...requestData.query.builder,
 				queryData: [
 					{
-						...requestData?.query?.builder?.queryData[0],
+						...firstQueryData,
 						orderBy: [
-							...(requestData?.query?.builder?.queryData[0]?.orderBy || []),
+							...(firstQueryData?.orderBy || []),
 							{
 								columnName: 'id',
-								order: requestData?.query?.builder?.queryData[0]?.orderBy[0]?.order,
+								order: firstQueryData?.orderBy[0]?.order,
 							},
 						],
 					},

frontend/src/lib/__tests__/chooseAutocompleteFromCustomValue.test.ts

@@ -0,0 +1,296 @@
+import { initialAutocompleteData } from 'constants/queryBuilder';
+import {
+	BaseAutocompleteData,
+	DataTypes,
+} from 'types/api/queryBuilder/queryAutocompleteResponse';
+
+import { chooseAutocompleteFromCustomValue } from '../newQueryBuilder/chooseAutocompleteFromCustomValue';
+
+describe('chooseAutocompleteFromCustomValue', () => {
+	// Mock source list containing various data types and edge cases
+	const mockSourceList = [
+		{
+			key: 'string_key',
+			dataType: DataTypes.String,
+			isJSON: false,
+		},
+		{
+			key: 'number_key',
+			dataType: DataTypes.Float64,
+			isJSON: false,
+		},
+		{
+			key: 'bool_key',
+			dataType: DataTypes.bool,
+			isJSON: false,
+		},
+		{
+			key: 'float_key',
+			dataType: DataTypes.Float64,
+			isJSON: false,
+		},
+		{
+			key: 'unknown_key',
+			dataType: DataTypes.EMPTY,
+			isJSON: false,
+		},
+		{
+			key: 'duplicate_key',
+			dataType: DataTypes.String,
+			isJSON: false,
+		},
+		{
+			key: 'duplicate_key',
+			dataType: DataTypes.Float64,
+			isJSON: false,
+		},
+	] as BaseAutocompleteData[];
+
+	describe('when element with same value and same data type found in sourceList', () => {
+		// Test case: Perfect match - both key and dataType match an existing element
+		it('should return matching string element', () => {
+			const result = chooseAutocompleteFromCustomValue(
+				mockSourceList,
+				'string_key',
+				false,
+				'string' as DataTypes,
+			);
+
+			expect(result).toEqual(mockSourceList[0]);
+		});
+
+		// Test case: Perfect match for numeric data type
+		it('should return matching number element', () => {
+			const result = chooseAutocompleteFromCustomValue(
+				mockSourceList,
+				'number_key',
+				false,
+				'number',
+			);
+
+			expect(result).toEqual(mockSourceList[1]);
+		});
+
+		// Test case: Perfect match for boolean data type
+		it('should return matching bool element', () => {
+			const result = chooseAutocompleteFromCustomValue(
+				mockSourceList,
+				'bool_key',
+				false,
+				'bool' as DataTypes,
+			);
+
+			expect(result).toEqual(mockSourceList[2]);
+		});
+
+		// Test case: Perfect match for float data type (maps to Float64)
+		it('should return matching float element', () => {
+			const result = chooseAutocompleteFromCustomValue(
+				mockSourceList,
+				'float_key',
+				false,
+				'number',
+			);
+
+			expect(result).toEqual(mockSourceList[3]);
+		});
+
+		// Test case: Perfect match for unknown data type
+		it('should return matching unknown element', () => {
+			const result = chooseAutocompleteFromCustomValue(
+				mockSourceList,
+				'unknown_key',
+				false,
+				'unknown' as DataTypes,
+			);
+
+			expect(result).toEqual({
+				...initialAutocompleteData,
+				key: 'unknown_key',
+				dataType: 'unknown',
+				isJSON: false,
+			});
+		});
+
+		// Test case: Perfect match with isJSON true in sourceList
+		it('should return matching element with isJSON true', () => {
+			const jsonSourceList = [
+				{ key: 'json_key', dataType: DataTypes.String, isJSON: true },
+			];
+			const result = chooseAutocompleteFromCustomValue(
+				jsonSourceList as BaseAutocompleteData[],
+				'json_key',
+				true,
+				'string' as DataTypes,
+			);
+			expect(result).toEqual(jsonSourceList[0]);
+		});
+	});
+
+	describe('when element with same value but different data type found in sourceList', () => {
+		// Test case: Key exists but dataType doesn't match - should create new object
+		it('should return new object for string value with number dataType', () => {
+			const result = chooseAutocompleteFromCustomValue(
+				mockSourceList,
+				'string_key',
+				false,
+				'number',
+			);
+
+			expect(result).toEqual({
+				...initialAutocompleteData,
+				key: 'string_key',
+				dataType: DataTypes.Float64,
+				isJSON: false,
+			});
+		});
+
+		// Test case: Key exists but dataType doesn't match - should create new object
+		it('should return new object for number value with string dataType', () => {
+			const result = chooseAutocompleteFromCustomValue(
+				mockSourceList,
+				'number_key',
+				false,
+				'string' as DataTypes,
+			);
+
+			expect(result).toEqual({
+				...initialAutocompleteData,
+				key: 'number_key',
+				dataType: DataTypes.String,
+				isJSON: false,
+			});
+		});
+
+		// Test case: Key exists but dataType doesn't match - should create new object
+		it('should return new object for bool value with string dataType', () => {
+			const result = chooseAutocompleteFromCustomValue(
+				mockSourceList,
+				'bool_key',
+				false,
+				'string' as DataTypes,
+			);
+
+			expect(result).toEqual({
+				...initialAutocompleteData,
+				key: 'bool_key',
+				dataType: DataTypes.String,
+				isJSON: false,
+			});
+		});
+
+		// Test case: Duplicate key with different dataType - should return the matching one
+		it('should return new object for duplicate key with different dataType', () => {
+			const result = chooseAutocompleteFromCustomValue(
+				mockSourceList,
+				'duplicate_key',
+				false,
+				'number' as DataTypes,
+			);
+
+			expect(result).toEqual(mockSourceList[6]);
+		});
+	});
+
+	describe('when element not found in sourceList', () => {
+		// Test case: New key with string dataType - should create new object
+		it('should return new object for string dataType', () => {
+			const result = chooseAutocompleteFromCustomValue(
+				mockSourceList,
+				'new_string_key',
+				false,
+				'string' as DataTypes,
+			);
+
+			expect(result).toEqual({
+				...initialAutocompleteData,
+				key: 'new_string_key',
+				dataType: DataTypes.String,
+				isJSON: false,
+			});
+		});
+
+		// Test case: New key with number dataType - should create new object with Float64
+		it('should return new object for number dataType', () => {
+			const result = chooseAutocompleteFromCustomValue(
+				mockSourceList,
+				'new_number_key',
+				false,
+				'number' as DataTypes,
+			);
+
+			expect(result).toEqual({
+				...initialAutocompleteData,
+				key: 'new_number_key',
+				dataType: DataTypes.Float64,
+				isJSON: false,
+			});
+		});
+
+		// Test case: New key with boolean dataType - should create new object
+		it('should return new object for bool dataType', () => {
+			const result = chooseAutocompleteFromCustomValue(
+				mockSourceList,
+				'new_bool_key',
+				false,
+				'bool' as DataTypes,
+			);
+
+			expect(result).toEqual({
+				...initialAutocompleteData,
+				key: 'new_bool_key',
+				dataType: DataTypes.bool,
+				isJSON: false,
+			});
+		});
+
+		// Test case: New key with unknown dataType - should create new object with 'unknown' string
+		it('should return new object for unknown dataType', () => {
+			const result = chooseAutocompleteFromCustomValue(
+				mockSourceList,
+				'new_unknown_key',
+				false,
+				'unknown' as DataTypes,
+			);
+
+			expect(result).toEqual({
+				...initialAutocompleteData,
+				key: 'new_unknown_key',
+				dataType: 'unknown',
+				isJSON: false,
+			});
+		});
+
+		// Test case: New key with undefined dataType - should create new object with EMPTY
+		it('should return new object for undefined dataType', () => {
+			const result = chooseAutocompleteFromCustomValue(
+				mockSourceList,
+				'new_undefined_key',
+				false,
+			);
+
+			expect(result).toEqual({
+				...initialAutocompleteData,
+				key: 'new_undefined_key',
+				dataType: DataTypes.EMPTY,
+				isJSON: false,
+			});
+		});
+
+		// Test case: New key with isJSON true - should create new object with isJSON true
+		it('should return new object with isJSON true when not found', () => {
+			const result = chooseAutocompleteFromCustomValue(
+				mockSourceList,
+				'json_not_found',
+				true,
+				'string' as DataTypes,
+			);
+			expect(result).toEqual({
+				...initialAutocompleteData,
+				key: 'json_not_found',
+				dataType: DataTypes.String,
+				isJSON: true,
+			});
+		});
+	});
+});

frontend/src/lib/newQueryBuilder/chooseAutocompleteFromCustomValue.ts

@@ -4,21 +4,40 @@ import {
 	DataTypes,
 } from 'types/api/queryBuilder/queryAutocompleteResponse';
 
+const getDataTypeForCustomValue = (dataType?: string): DataTypes => {
+	if (dataType === 'number') {
+		return DataTypes.Float64;
+	}
+
+	if (dataType === 'string') {
+		return DataTypes.String;
+	}
+
+	if (dataType === 'bool') {
+		return DataTypes.bool;
+	}
+
+	return (dataType as DataTypes) || DataTypes.EMPTY;
+};
+
 export const chooseAutocompleteFromCustomValue = (
 	sourceList: BaseAutocompleteData[],
 	value: string,
 	isJSON?: boolean,
-	dataType?: DataTypes,
+	dataType?: DataTypes | 'number',
 ): BaseAutocompleteData => {
+	const dataTypeToUse = getDataTypeForCustomValue(dataType);
 	const firstBaseAutoCompleteValue = sourceList.find(
-		(sourceAutoComplete) => value === sourceAutoComplete.key,
+		(sourceAutoComplete) =>
+			value === sourceAutoComplete.key &&
+			(dataType === undefined || dataTypeToUse === sourceAutoComplete.dataType),
 	);
 
 	if (!firstBaseAutoCompleteValue) {
 		return {
 			...initialAutocompleteData,
 			key: value,
-			dataType: dataType || DataTypes.EMPTY,
+			dataType: dataTypeToUse,
 			isJSON,
 		};
 	}

frontend/src/pages/AlertList/AlertList.styles.scss

@@ -4,7 +4,6 @@
 	}
 
 	.ant-tabs-content-holder {
-		padding-left: 16px;
-		padding-right: 16px;
+		padding: 8px;
 	}
 }

frontend/src/pages/ChannelsEdit/ChannelsEdit.styles.scss

@@ -1,6 +1,5 @@
 .edit-alert-channels-container {
-	width: 90%;
-	margin: 12px auto;
+	margin: 12px;
 
 	border: 1px solid var(--Slate-500, #161922);
 	background: var(--Ink-400, #121317);

frontend/src/pages/ChannelsEdit/index.tsx

@@ -15,23 +15,27 @@ import {
 import EditAlertChannels from 'container/EditAlertChannels';
 import { useTranslation } from 'react-i18next';
 import { useQuery } from 'react-query';
-import { useParams } from 'react-router-dom';
 import { SuccessResponseV2 } from 'types/api';
 import { Channels } from 'types/api/channels/getAll';
 import APIError from 'types/api/error';
 
 function ChannelsEdit(): JSX.Element {
-	const { id } = useParams<Params>();
 	const { t } = useTranslation();
 
+	// 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 channelId = channelIdMatch ? channelIdMatch[1] : undefined;
+
 	const { isFetching, isError, data, error } = useQuery<
 		SuccessResponseV2<Channels>,
 		APIError
-	>(['getChannel', id], {
+	>(['getChannel', channelId], {
 		queryFn: () =>
 			get({
-				id,
+				id: channelId || '',
 			}),
+		enabled: !!channelId,
 	});
 
 	if (isError) {
@@ -144,8 +148,5 @@ function ChannelsEdit(): JSX.Element {
 		</div>
 	);
 }
-interface Params {
-	id: string;
-}
 
 export default ChannelsEdit;

frontend/src/pages/Integrations/RequestIntegrationBtn.tsx

@@ -116,5 +116,5 @@ export function RequestIntegrationBtn({
 
 RequestIntegrationBtn.defaultProps = {
 	type: IntegrationType.INTEGRATIONS_LIST,
-	message: 'Cannot find what you’re looking for? Request more integrations',
+	message: "Can't find what you’re looking for? Request more integrations",
 };

frontend/src/pages/LogsModulePage/constants.tsx

@@ -22,7 +22,11 @@ export const logsExplorer: TabRoutes = {
 };
 
 export const logsPipelines: TabRoutes = {
-	Component: Pipelines,
+	Component: (): JSX.Element => (
+		<PreferenceContextProvider>
+			<Pipelines />
+		</PreferenceContextProvider>
+	),
 	name: (
 		<div className="tab-item">
 			<Workflow size={16} /> Pipelines

frontend/src/pages/Settings/Settings.tsx

@@ -217,6 +217,13 @@ function SettingsPage(): JSX.Element {
 			return true;
 		}
 
+		if (
+			pathname.startsWith(ROUTES.CHANNELS_EDIT) &&
+			key === ROUTES.ALL_CHANNELS
+		) {
+			return true;
+		}
+
 		return pathname === key;
 	};
 

frontend/src/pages/TracesExplorer/__test__/TracesExplorer.test.tsx

@@ -26,6 +26,7 @@ import {
 	waitFor,
 	within,
 } from 'tests/test-utils';
+import { QueryRangePayload } from 'types/api/metrics/getQueryRange';
 
 import TracesExplorer from '..';
 import { Filter } from '../Filter/Filter';
@@ -449,6 +450,8 @@ jest.mock('hooks/useHandleExplorerTabChange', () => ({
 	})),
 }));
 
+let capturedPayload: QueryRangePayload;
+
 describe('TracesExplorer - ', () => {
 	const quickFiltersListURL = `${BASE_URL}/api/v1/orgs/me/filters/traces`;
 
@@ -496,6 +499,45 @@ describe('TracesExplorer - ', () => {
 
 		// column interaction is covered in E2E tests as its a complex interaction
 	});
+	it('should not add id to orderBy when dataSource is traces', async () => {
+		server.use(
+			rest.post(`${BASE_URL}/api/v4/query_range`, async (req, res, ctx) => {
+				const payload = await req.json();
+				capturedPayload = payload;
+				return res(ctx.status(200), ctx.json(queryRangeForTableView));
+			}),
+		);
+
+		render(
+			<QueryBuilderContext.Provider
+				value={{
+					...qbProviderValue,
+					stagedQuery: {
+						...qbProviderValue.stagedQuery,
+						builder: {
+							...qbProviderValue.stagedQuery.builder,
+							queryData: [
+								{
+									...qbProviderValue.stagedQuery.builder.queryData[0],
+									orderBy: [{ columnName: 'timestamp', order: 'desc' }],
+								},
+							],
+						},
+					},
+				}}
+			>
+				<TracesExplorer />
+			</QueryBuilderContext.Provider>,
+		);
+
+		await waitFor(() => {
+			expect(capturedPayload).toBeDefined();
+		});
+
+		expect(capturedPayload.compositeQuery.builderQueries?.A.orderBy).toEqual([
+			{ columnName: 'timestamp', order: 'desc' },
+		]);
+	});
 
 	it('trace explorer - table view', async () => {
 		server.use(
@@ -552,6 +594,53 @@ describe('TracesExplorer - ', () => {
 			'http://localhost/trace/5765b60ba7cc4ddafe8bdaa9c1b4b246',
 		);
 	});
+	it('trace explorer - trace view should only send order by timestamp in the query', async () => {
+		let capturedPayload: QueryRangePayload;
+		const orderBy = [
+			{ columnName: 'id', order: 'desc' },
+			{ columnName: 'serviceName', order: 'desc' },
+		];
+		const defaultOrderBy = [{ columnName: 'timestamp', order: 'desc' }];
+		server.use(
+			rest.post(`${BASE_URL}/api/v4/query_range`, async (req, res, ctx) => {
+				const payload = await req.json();
+				capturedPayload = payload;
+				return res(ctx.status(200), ctx.json(queryRangeForTraceView));
+			}),
+		);
+		render(
+			<QueryBuilderContext.Provider
+				value={{
+					...qbProviderValue,
+					panelType: PANEL_TYPES.TRACE,
+					stagedQuery: {
+						...qbProviderValue.stagedQuery,
+						builder: {
+							...qbProviderValue.stagedQuery.builder,
+							queryData: [
+								{
+									...qbProviderValue.stagedQuery.builder.queryData[0],
+									orderBy,
+								},
+							],
+						},
+					},
+				}}
+			>
+				<TracesExplorer />
+			</QueryBuilderContext.Provider>,
+		);
+
+		await waitFor(() => {
+			expect(capturedPayload).toBeDefined();
+			expect(capturedPayload?.compositeQuery?.builderQueries?.A.orderBy).toEqual(
+				defaultOrderBy,
+			);
+			expect(
+				capturedPayload?.compositeQuery?.builderQueries?.A.orderBy,
+			).not.toEqual(orderBy);
+		});
+	});
 
 	it('test for explorer options', async () => {
 		const { getByText, getByTestId } = render(

frontend/src/providers/App/App.tsx

@@ -19,6 +19,7 @@ import {
 	useState,
 } from 'react';
 import { useQuery } from 'react-query';
+import { ChangelogSchema } from 'types/api/changelog/getChangelogByVersion';
 import { FeatureFlagProps as FeatureFlags } from 'types/api/features/getFeaturesFlags';
 import {
 	LicensePlatform,
@@ -58,6 +59,7 @@ export function AppProvider({ children }: PropsWithChildren): JSX.Element {
 		(): boolean => getLocalStorageApi(LOCALSTORAGE.IS_LOGGED_IN) === 'true',
 	);
 	const [org, setOrg] = useState<Organization[] | null>(null);
+	const [changelog, setChangelog] = useState<ChangelogSchema | null>(null);
 
 	// if the user.id is not present, for migration older cases then we need to logout only for current logged in users!
 	useEffect(() => {
@@ -253,6 +255,13 @@ export function AppProvider({ children }: PropsWithChildren): JSX.Element {
 		[org],
 	);
 
+	const updateChangelog = useCallback(
+		(payload: ChangelogSchema): void => {
+			setChangelog(payload);
+		},
+		[setChangelog],
+	);
+
 	// global event listener for AFTER_LOGIN event to start the user fetch post all actions are complete
 	useGlobalEventListener('AFTER_LOGIN', (event) => {
 		if (event.detail) {
@@ -296,11 +305,13 @@ export function AppProvider({ children }: PropsWithChildren): JSX.Element {
 			featureFlagsFetchError,
 			orgPreferencesFetchError,
 			activeLicense,
+			changelog,
 			activeLicenseRefetch,
 			updateUser,
 			updateOrgPreferences,
 			updateUserPreferenceInContext,
 			updateOrg,
+			updateChangelog,
 			versionData: versionData?.payload || null,
 		}),
 		[
@@ -319,8 +330,10 @@ export function AppProvider({ children }: PropsWithChildren): JSX.Element {
 			orgPreferences,
 			activeLicenseRefetch,
 			orgPreferencesFetchError,
+			changelog,
 			updateUserPreferenceInContext,
 			updateOrg,
+			updateChangelog,
 			user,
 			userFetchError,
 			versionData,

frontend/src/providers/App/types.ts

@@ -1,3 +1,4 @@
+import { ChangelogSchema } from 'types/api/changelog/getChangelogByVersion';
 import APIError from 'types/api/error';
 import { FeatureFlagProps as FeatureFlags } from 'types/api/features/getFeaturesFlags';
 import { LicenseResModel, TrialInfo } from 'types/api/licensesV3/getActive';
@@ -26,11 +27,13 @@ export interface IAppContext {
 	activeLicenseFetchError: APIError | null;
 	featureFlagsFetchError: unknown;
 	orgPreferencesFetchError: unknown;
+	changelog: ChangelogSchema | null;
 	activeLicenseRefetch: () => void;
 	updateUser: (user: IUser) => void;
 	updateOrgPreferences: (orgPreferences: OrgPreference[]) => void;
 	updateUserPreferenceInContext: (userPreference: UserPreference) => void;
 	updateOrg(orgId: string, updatedOrgName: string): void;
+	updateChangelog(payload: ChangelogSchema): void;
 	versionData: PayloadProps | null;
 }