chore(release): bump to v0.89.0 (#8482)

* chore: only log telemetry query for explorer, rule and dashboard pages

* chore: add dashboard and rule properties for no telemetry result

.devenv/docker/clickhouse/compose.yaml

@@ -40,7 +40,7 @@ services:
       timeout: 5s
       retries: 3
   schema-migrator-sync:
-    image: signoz/signoz-schema-migrator:v0.111.42
+    image: signoz/signoz-schema-migrator:v0.128.0
     container_name: schema-migrator-sync
     command:
       - sync
@@ -53,7 +53,7 @@ services:
         condition: service_healthy
     restart: on-failure
   schema-migrator-async:
-    image: signoz/signoz-schema-migrator:v0.111.42
+    image: signoz/signoz-schema-migrator:v0.128.0
     container_name: schema-migrator-async
     command:
       - async

.github/workflows/integrationci.yaml

@@ -22,7 +22,7 @@ jobs:
           - 24.1.2-alpine
           - 24.12-alpine
         schema-migrator-version:
-          - v0.111.38
+          - v0.128.0
         postgres-version:
           - 15
     if: |

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

@@ -174,7 +174,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:v0.87.0
+    image: signoz/signoz:v0.89.0
     command:
       - --config=/root/config/prometheus.yml
     ports:
@@ -194,6 +194,7 @@ services:
       - TELEMETRY_ENABLED=true
       - DEPLOYMENT_TYPE=docker-swarm
       - SIGNOZ_JWT_SECRET=secret
+      - DOT_METRICS_ENABLED=true
     healthcheck:
       test:
         - CMD
@@ -206,7 +207,7 @@ services:
       retries: 3
   otel-collector:
     !!merge <<: *db-depend
-    image: signoz/signoz-otel-collector:v0.111.42
+    image: signoz/signoz-otel-collector:v0.128.0
     command:
       - --config=/etc/otel-collector-config.yaml
       - --manager-config=/etc/manager-config.yaml
@@ -230,7 +231,7 @@ services:
       - signoz
   schema-migrator:
     !!merge <<: *common
-    image: signoz/signoz-schema-migrator:v0.111.42
+    image: signoz/signoz-schema-migrator:v0.128.0
     deploy:
       restart_policy:
         condition: on-failure

deploy/docker-swarm/docker-compose.yaml

@@ -100,7 +100,7 @@ services:
     #   - "9000:9000"
     #   - "8123:8123"
     #   - "9181:9181"
-              
+
     configs:
       - source: clickhouse-config
         target: /etc/clickhouse-server/config.xml
@@ -110,13 +110,12 @@ services:
         target: /etc/clickhouse-server/custom-function.xml
       - source: clickhouse-cluster
         target: /etc/clickhouse-server/config.d/cluster.xml
-        
     volumes:
       - clickhouse:/var/lib/clickhouse/
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:v0.87.0
+    image: signoz/signoz:v0.89.0
     command:
       - --config=/root/config/prometheus.yml
     ports:
@@ -136,6 +135,7 @@ services:
       - GODEBUG=netdns=go
       - TELEMETRY_ENABLED=true
       - DEPLOYMENT_TYPE=docker-swarm
+      - DOT_METRICS_ENABLED=true
     healthcheck:
       test:
         - CMD
@@ -148,7 +148,7 @@ services:
       retries: 3
   otel-collector:
     !!merge <<: *db-depend
-    image: signoz/signoz-otel-collector:v0.111.42
+    image: signoz/signoz-otel-collector:v0.128.0
     command:
       - --config=/etc/otel-collector-config.yaml
       - --manager-config=/etc/manager-config.yaml
@@ -174,7 +174,7 @@ services:
       - signoz
   schema-migrator:
     !!merge <<: *common
-    image: signoz/signoz-schema-migrator:v0.111.42
+    image: signoz/signoz-schema-migrator:v0.128.0
     deploy:
       restart_policy:
         condition: on-failure
@@ -195,7 +195,6 @@ volumes:
     name: signoz-sqlite
   zookeeper-1:
     name: signoz-zookeeper-1
-
 configs:
   clickhouse-config:
     file: ../common/clickhouse/config.xml
@@ -205,7 +204,6 @@ configs:
     file: ../common/clickhouse/custom-function.xml
   clickhouse-cluster:
     file: ../common/clickhouse/cluster.xml
-
   signoz-prometheus-config:
     file: ../common/signoz/prometheus.yml
   # If you have multiple dashboard files, you can list them individually:

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

@@ -26,7 +26,7 @@ processors:
     detectors: [env, system]
     timeout: 2s
   signozspanmetrics/delta:
-    metrics_exporter: clickhousemetricswrite, signozclickhousemetrics
+    metrics_exporter: signozclickhousemetrics
     metrics_flush_interval: 60s
     latency_histogram_buckets: [100us, 1ms, 2ms, 6ms, 10ms, 50ms, 100ms, 250ms, 500ms, 1000ms, 1400ms, 2000ms, 5s, 10s, 20s, 40s, 60s ]
     dimensions_cache_size: 100000
@@ -60,27 +60,16 @@ exporters:
     datasource: tcp://clickhouse:9000/signoz_traces
     low_cardinal_exception_grouping: ${env:LOW_CARDINAL_EXCEPTION_GROUPING}
     use_new_schema: true
-  clickhousemetricswrite:
-    endpoint: tcp://clickhouse:9000/signoz_metrics
-    resource_to_telemetry_conversion:
-      enabled: true
-    disable_v2: true
-  clickhousemetricswrite/prometheus:
-    endpoint: tcp://clickhouse:9000/signoz_metrics
-    disable_v2: true
   signozclickhousemetrics:
     dsn: tcp://clickhouse:9000/signoz_metrics
   clickhouselogsexporter:
     dsn: tcp://clickhouse:9000/signoz_logs
     timeout: 10s
     use_new_schema: true
-  # debug: {}
 service:
   telemetry:
     logs:
       encoding: json
-    metrics:
-      address: 0.0.0.0:8888
   extensions:
     - health_check
     - pprof
@@ -92,11 +81,11 @@ service:
     metrics:
       receivers: [otlp]
       processors: [batch]
-      exporters: [clickhousemetricswrite, signozclickhousemetrics]
+      exporters: [signozclickhousemetrics]
     metrics/prometheus:
       receivers: [prometheus]
       processors: [batch]
-      exporters: [clickhousemetricswrite/prometheus, signozclickhousemetrics]
+      exporters: [signozclickhousemetrics]
     logs:
       receivers: [otlp]
       processors: [batch]

deploy/docker/docker-compose.ha.yaml

@@ -177,7 +177,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:${VERSION:-v0.87.0}
+    image: signoz/signoz:${VERSION:-v0.89.0}
     container_name: signoz
     command:
       - --config=/root/config/prometheus.yml
@@ -197,6 +197,7 @@ services:
       - GODEBUG=netdns=go
       - TELEMETRY_ENABLED=true
       - DEPLOYMENT_TYPE=docker-standalone-amd
+      - DOT_METRICS_ENABLED=true
     healthcheck:
       test:
         - CMD
@@ -210,7 +211,7 @@ services:
   # TODO: support otel-collector multiple replicas. Nginx/Traefik for loadbalancing?
   otel-collector:
     !!merge <<: *db-depend
-    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-v0.111.42}
+    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-v0.128.0}
     container_name: signoz-otel-collector
     command:
       - --config=/etc/otel-collector-config.yaml
@@ -236,7 +237,7 @@ services:
         condition: service_healthy
   schema-migrator-sync:
     !!merge <<: *common
-    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-v0.111.42}
+    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-v0.128.0}
     container_name: schema-migrator-sync
     command:
       - sync
@@ -247,7 +248,7 @@ services:
         condition: service_healthy
   schema-migrator-async:
     !!merge <<: *db-depend
-    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-v0.111.42}
+    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-v0.128.0}
     container_name: schema-migrator-async
     command:
       - async

deploy/docker/docker-compose.yaml

@@ -110,7 +110,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:${VERSION:-v0.87.0}
+    image: signoz/signoz:${VERSION:-v0.89.0}
     container_name: signoz
     command:
       - --config=/root/config/prometheus.yml
@@ -130,6 +130,7 @@ services:
       - GODEBUG=netdns=go
       - TELEMETRY_ENABLED=true
       - DEPLOYMENT_TYPE=docker-standalone-amd
+      - DOT_METRICS_ENABLED=true
     healthcheck:
       test:
         - CMD
@@ -142,7 +143,7 @@ services:
       retries: 3
   otel-collector:
     !!merge <<: *db-depend
-    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-v0.111.42}
+    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-v0.128.0}
     container_name: signoz-otel-collector
     command:
       - --config=/etc/otel-collector-config.yaml
@@ -164,7 +165,7 @@ services:
         condition: service_healthy
   schema-migrator-sync:
     !!merge <<: *common
-    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-v0.111.42}
+    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-v0.128.0}
     container_name: schema-migrator-sync
     command:
       - sync
@@ -176,7 +177,7 @@ services:
     restart: on-failure
   schema-migrator-async:
     !!merge <<: *db-depend
-    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-v0.111.42}
+    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-v0.128.0}
     container_name: schema-migrator-async
     command:
       - async

deploy/docker/otel-collector-config.yaml

@@ -26,7 +26,7 @@ processors:
     detectors: [env, system]
     timeout: 2s
   signozspanmetrics/delta:
-    metrics_exporter: clickhousemetricswrite, signozclickhousemetrics
+    metrics_exporter: signozclickhousemetrics
     metrics_flush_interval: 60s
     latency_histogram_buckets: [100us, 1ms, 2ms, 6ms, 10ms, 50ms, 100ms, 250ms, 500ms, 1000ms, 1400ms, 2000ms, 5s, 10s, 20s, 40s, 60s ]
     dimensions_cache_size: 100000
@@ -60,27 +60,16 @@ exporters:
     datasource: tcp://clickhouse:9000/signoz_traces
     low_cardinal_exception_grouping: ${env:LOW_CARDINAL_EXCEPTION_GROUPING}
     use_new_schema: true
-  clickhousemetricswrite:
-    endpoint: tcp://clickhouse:9000/signoz_metrics
-    disable_v2: true
-    resource_to_telemetry_conversion:
-      enabled: true
-  clickhousemetricswrite/prometheus:
-    endpoint: tcp://clickhouse:9000/signoz_metrics
-    disable_v2: true
   signozclickhousemetrics:
     dsn: tcp://clickhouse:9000/signoz_metrics
   clickhouselogsexporter:
     dsn: tcp://clickhouse:9000/signoz_logs
     timeout: 10s
     use_new_schema: true
-  # debug: {}
 service:
   telemetry:
     logs:
       encoding: json
-    metrics:
-      address: 0.0.0.0:8888
   extensions:
     - health_check
     - pprof
@@ -92,11 +81,11 @@ service:
     metrics:
       receivers: [otlp]
       processors: [batch]
-      exporters: [clickhousemetricswrite, signozclickhousemetrics]
+      exporters: [signozclickhousemetrics]
     metrics/prometheus:
       receivers: [prometheus]
       processors: [batch]
-      exporters: [clickhousemetricswrite/prometheus, signozclickhousemetrics]
+      exporters: [signozclickhousemetrics]
     logs:
       receivers: [otlp]
       processors: [batch]

docs/otel-demo-docs.md

@@ -16,7 +16,7 @@ __Table of Contents__
   - [Prerequisites](#prerequisites-1)
   - [Install Helm Repo and Charts](#install-helm-repo-and-charts)
   - [Start the OpenTelemetry Demo App](#start-the-opentelemetry-demo-app-1)
-  - [Moniitor with SigNoz (Kubernetes)](#monitor-with-signoz-kubernetes)
+  - [Monitor with SigNoz (Kubernetes)](#monitor-with-signoz-kubernetes)
 - [What's next](#whats-next)
 
 

ee/query-service/app/server.go

@@ -203,17 +203,6 @@ func NewServer(config signoz.Config, signoz *signoz.SigNoz, jwt *authtypes.JWT)
 		&opAmpModel.AllAgents, agentConfMgr, signoz.Instrumentation,
 	)
 
-	orgs, err := apiHandler.Signoz.Modules.OrgGetter.ListByOwnedKeyRange(context.Background())
-	if err != nil {
-		return nil, err
-	}
-	for _, org := range orgs {
-		errorList := reader.PreloadMetricsMetadata(context.Background(), org.ID)
-		for _, er := range errorList {
-			zap.L().Error("failed to preload metrics metadata", zap.Error(er))
-		}
-	}
-
 	return s, nil
 }
 

ee/query-service/main.go

@@ -9,6 +9,7 @@ import (
 	"github.com/SigNoz/signoz/ee/licensing"
 	"github.com/SigNoz/signoz/ee/licensing/httplicensing"
 	"github.com/SigNoz/signoz/ee/query-service/app"
+	"github.com/SigNoz/signoz/ee/sqlschema/postgressqlschema"
 	"github.com/SigNoz/signoz/ee/sqlstore/postgressqlstore"
 	"github.com/SigNoz/signoz/ee/zeus"
 	"github.com/SigNoz/signoz/ee/zeus/httpzeus"
@@ -21,6 +22,7 @@ import (
 	"github.com/SigNoz/signoz/pkg/modules/organization"
 	baseconst "github.com/SigNoz/signoz/pkg/query-service/constants"
 	"github.com/SigNoz/signoz/pkg/signoz"
+	"github.com/SigNoz/signoz/pkg/sqlschema"
 	"github.com/SigNoz/signoz/pkg/sqlstore"
 	"github.com/SigNoz/signoz/pkg/sqlstore/sqlstorehook"
 	"github.com/SigNoz/signoz/pkg/types/authtypes"
@@ -145,6 +147,14 @@ func main() {
 		signoz.NewEmailingProviderFactories(),
 		signoz.NewCacheProviderFactories(),
 		signoz.NewWebProviderFactories(),
+		func(sqlstore sqlstore.SQLStore) factory.NamedMap[factory.ProviderFactory[sqlschema.SQLSchema, sqlschema.Config]] {
+			existingFactories := signoz.NewSQLSchemaProviderFactories(sqlstore)
+			if err := existingFactories.Add(postgressqlschema.NewFactory(sqlstore)); err != nil {
+				zap.L().Fatal("Failed to add postgressqlschema factory", zap.Error(err))
+			}
+
+			return existingFactories
+		},
 		sqlStoreFactories,
 		signoz.NewTelemetryStoreProviderFactories(),
 	)

ee/sqlschema/postgressqlschema/formatter.go

@@ -0,0 +1,36 @@
+package postgressqlschema
+
+import (
+	"strings"
+
+	"github.com/SigNoz/signoz/pkg/sqlschema"
+)
+
+type Formatter struct {
+	sqlschema.Formatter
+}
+
+func (formatter Formatter) SQLDataTypeOf(dataType sqlschema.DataType) string {
+	if dataType == sqlschema.DataTypeTimestamp {
+		return "TIMESTAMPTZ"
+	}
+
+	return strings.ToUpper(dataType.String())
+}
+
+func (formatter Formatter) DataTypeOf(dataType string) sqlschema.DataType {
+	switch strings.ToUpper(dataType) {
+	case "TIMESTAMPTZ", "TIMESTAMP", "TIMESTAMP WITHOUT TIME ZONE", "TIMESTAMP WITH TIME ZONE":
+		return sqlschema.DataTypeTimestamp
+	case "INT8":
+		return sqlschema.DataTypeBigInt
+	case "INT2", "INT4", "SMALLINT", "INTEGER":
+		return sqlschema.DataTypeInteger
+	case "BOOL", "BOOLEAN":
+		return sqlschema.DataTypeBoolean
+	case "VARCHAR", "CHARACTER VARYING", "CHARACTER":
+		return sqlschema.DataTypeText
+	}
+
+	return formatter.Formatter.DataTypeOf(dataType)
+}

ee/sqlschema/postgressqlschema/provider.go

@@ -0,0 +1,285 @@
+package postgressqlschema
+
+import (
+	"context"
+
+	"github.com/SigNoz/signoz/pkg/factory"
+	"github.com/SigNoz/signoz/pkg/sqlschema"
+	"github.com/SigNoz/signoz/pkg/sqlstore"
+	"github.com/uptrace/bun"
+)
+
+type provider struct {
+	settings factory.ScopedProviderSettings
+	fmter    sqlschema.SQLFormatter
+	sqlstore sqlstore.SQLStore
+	operator sqlschema.SQLOperator
+}
+
+func NewFactory(sqlstore sqlstore.SQLStore) factory.ProviderFactory[sqlschema.SQLSchema, sqlschema.Config] {
+	return factory.NewProviderFactory(factory.MustNewName("postgres"), func(ctx context.Context, providerSettings factory.ProviderSettings, config sqlschema.Config) (sqlschema.SQLSchema, error) {
+		return New(ctx, providerSettings, config, sqlstore)
+	})
+}
+
+func New(ctx context.Context, providerSettings factory.ProviderSettings, config sqlschema.Config, sqlstore sqlstore.SQLStore) (sqlschema.SQLSchema, error) {
+	settings := factory.NewScopedProviderSettings(providerSettings, "github.com/SigNoz/signoz/pkg/sqlschema/postgressqlschema")
+	fmter := Formatter{Formatter: sqlschema.NewFormatter(sqlstore.BunDB().Dialect())}
+
+	return &provider{
+		sqlstore: sqlstore,
+		fmter:    fmter,
+		settings: settings,
+		operator: sqlschema.NewOperator(fmter, sqlschema.OperatorSupport{
+			DropConstraint:          true,
+			ColumnIfNotExistsExists: true,
+			AlterColumnSetNotNull:   true,
+		}),
+	}, nil
+}
+
+func (provider *provider) Formatter() sqlschema.SQLFormatter {
+	return provider.fmter
+}
+
+func (provider *provider) Operator() sqlschema.SQLOperator {
+	return provider.operator
+}
+
+func (provider *provider) GetTable(ctx context.Context, tableName sqlschema.TableName) (*sqlschema.Table, []*sqlschema.UniqueConstraint, error) {
+	rows, err := provider.
+		sqlstore.
+		BunDB().
+		QueryContext(ctx, `
+SELECT 
+    c.column_name, 
+	c.is_nullable = 'YES', 
+	c.udt_name, 
+	c.column_default 
+FROM 
+    information_schema.columns AS c
+WHERE
+    c.table_name = ?`, string(tableName))
+	if err != nil {
+		return nil, nil, err
+	}
+
+	defer func() {
+		if err := rows.Close(); err != nil {
+			provider.settings.Logger().ErrorContext(ctx, "error closing rows", "error", err)
+		}
+	}()
+
+	columns := make([]*sqlschema.Column, 0)
+	for rows.Next() {
+		var (
+			name        string
+			sqlDataType string
+			nullable    bool
+			defaultVal  *string
+		)
+		if err := rows.Scan(&name, &nullable, &sqlDataType, &defaultVal); err != nil {
+			return nil, nil, err
+		}
+
+		columnDefault := ""
+		if defaultVal != nil {
+			columnDefault = *defaultVal
+		}
+
+		columns = append(columns, &sqlschema.Column{
+			Name:     sqlschema.ColumnName(name),
+			Nullable: nullable,
+			DataType: provider.fmter.DataTypeOf(sqlDataType),
+			Default:  columnDefault,
+		})
+	}
+
+	constraintsRows, err := provider.
+		sqlstore.
+		BunDB().
+		QueryContext(ctx, `
+SELECT 
+    c.column_name, 
+	constraint_name, 
+	constraint_type 
+FROM 
+    information_schema.table_constraints tc
+	JOIN information_schema.constraint_column_usage AS ccu USING (constraint_schema, constraint_catalog, table_name, constraint_name) 
+	JOIN information_schema.columns AS c ON c.table_schema = tc.constraint_schema AND tc.table_name = c.table_name AND ccu.column_name = c.column_name 
+WHERE
+    c.table_name = ?`, string(tableName))
+	if err != nil {
+		return nil, nil, err
+	}
+
+	defer func() {
+		if err := constraintsRows.Close(); err != nil {
+			provider.settings.Logger().ErrorContext(ctx, "error closing rows", "error", err)
+		}
+	}()
+
+	var primaryKeyConstraint *sqlschema.PrimaryKeyConstraint
+	uniqueConstraintsMap := make(map[string]*sqlschema.UniqueConstraint)
+	for constraintsRows.Next() {
+		var (
+			name           string
+			constraintName string
+			constraintType string
+		)
+
+		if err := constraintsRows.Scan(&name, &constraintName, &constraintType); err != nil {
+			return nil, nil, err
+		}
+
+		if constraintType == "PRIMARY KEY" {
+			if primaryKeyConstraint == nil {
+				primaryKeyConstraint = (&sqlschema.PrimaryKeyConstraint{
+					ColumnNames: []sqlschema.ColumnName{sqlschema.ColumnName(name)},
+				}).Named(constraintName).(*sqlschema.PrimaryKeyConstraint)
+			} else {
+				primaryKeyConstraint.ColumnNames = append(primaryKeyConstraint.ColumnNames, sqlschema.ColumnName(name))
+			}
+		}
+
+		if constraintType == "UNIQUE" {
+			if _, ok := uniqueConstraintsMap[constraintName]; !ok {
+				uniqueConstraintsMap[constraintName] = (&sqlschema.UniqueConstraint{
+					ColumnNames: []sqlschema.ColumnName{sqlschema.ColumnName(name)},
+				}).Named(constraintName).(*sqlschema.UniqueConstraint)
+			} else {
+				uniqueConstraintsMap[constraintName].ColumnNames = append(uniqueConstraintsMap[constraintName].ColumnNames, sqlschema.ColumnName(name))
+			}
+		}
+	}
+
+	foreignKeyConstraintsRows, err := provider.
+		sqlstore.
+		BunDB().
+		QueryContext(ctx, `
+SELECT 
+    tc.constraint_name, 
+	kcu.table_name AS referencing_table, 
+	kcu.column_name AS referencing_column, 
+	ccu.table_name AS referenced_table, 
+	ccu.column_name AS referenced_column 
+FROM
+    information_schema.key_column_usage kcu 
+    JOIN information_schema.table_constraints tc ON kcu.constraint_name = tc.constraint_name AND kcu.table_schema = tc.table_schema 
+    JOIN information_schema.constraint_column_usage ccu ON ccu.constraint_name = tc.constraint_name AND ccu.table_schema = tc.table_schema
+WHERE 
+    tc.constraint_type = ?
+	AND kcu.table_name = ?`, "FOREIGN KEY", string(tableName))
+	if err != nil {
+		return nil, nil, err
+	}
+
+	defer func() {
+		if err := foreignKeyConstraintsRows.Close(); err != nil {
+			provider.settings.Logger().ErrorContext(ctx, "error closing rows", "error", err)
+		}
+	}()
+
+	foreignKeyConstraints := make([]*sqlschema.ForeignKeyConstraint, 0)
+	for foreignKeyConstraintsRows.Next() {
+		var (
+			constraintName    string
+			referencingTable  string
+			referencingColumn string
+			referencedTable   string
+			referencedColumn  string
+		)
+
+		if err := foreignKeyConstraintsRows.Scan(&constraintName, &referencingTable, &referencingColumn, &referencedTable, &referencedColumn); err != nil {
+			return nil, nil, err
+		}
+
+		foreignKeyConstraints = append(foreignKeyConstraints, (&sqlschema.ForeignKeyConstraint{
+			ReferencingColumnName: sqlschema.ColumnName(referencingColumn),
+			ReferencedTableName:   sqlschema.TableName(referencedTable),
+			ReferencedColumnName:  sqlschema.ColumnName(referencedColumn),
+		}).Named(constraintName).(*sqlschema.ForeignKeyConstraint))
+	}
+
+	uniqueConstraints := make([]*sqlschema.UniqueConstraint, 0)
+	for _, uniqueConstraint := range uniqueConstraintsMap {
+		uniqueConstraints = append(uniqueConstraints, uniqueConstraint)
+	}
+
+	return &sqlschema.Table{
+		Name:                  tableName,
+		Columns:               columns,
+		PrimaryKeyConstraint:  primaryKeyConstraint,
+		ForeignKeyConstraints: foreignKeyConstraints,
+	}, uniqueConstraints, nil
+}
+
+func (provider *provider) GetIndices(ctx context.Context, name sqlschema.TableName) ([]sqlschema.Index, error) {
+	rows, err := provider.
+		sqlstore.
+		BunDB().
+		QueryContext(ctx, `
+SELECT
+    ct.relname AS table_name,
+    ci.relname AS index_name,
+    i.indisunique AS unique,
+    i.indisprimary AS primary,
+    a.attname AS column_name
+FROM
+    pg_index i
+    LEFT JOIN pg_class ct ON ct.oid = i.indrelid
+    LEFT JOIN pg_class ci ON ci.oid = i.indexrelid
+    LEFT JOIN pg_attribute a ON a.attrelid = ct.oid
+    LEFT JOIN pg_constraint con ON con.conindid = i.indexrelid
+WHERE
+    a.attnum = ANY(i.indkey)
+    AND con.oid IS NULL
+    AND ct.relkind = 'r'
+    AND ct.relname = ?`, string(name))
+	if err != nil {
+		return nil, err
+	}
+
+	defer func() {
+		if err := rows.Close(); err != nil {
+			provider.settings.Logger().ErrorContext(ctx, "error closing rows", "error", err)
+		}
+	}()
+
+	uniqueIndicesMap := make(map[string]*sqlschema.UniqueIndex)
+	for rows.Next() {
+		var (
+			tableName  string
+			indexName  string
+			unique     bool
+			primary    bool
+			columnName string
+		)
+
+		if err := rows.Scan(&tableName, &indexName, &unique, &primary, &columnName); err != nil {
+			return nil, err
+		}
+
+		if unique {
+			if _, ok := uniqueIndicesMap[indexName]; !ok {
+				uniqueIndicesMap[indexName] = &sqlschema.UniqueIndex{
+					TableName:   name,
+					ColumnNames: []sqlschema.ColumnName{sqlschema.ColumnName(columnName)},
+				}
+			} else {
+				uniqueIndicesMap[indexName].ColumnNames = append(uniqueIndicesMap[indexName].ColumnNames, sqlschema.ColumnName(columnName))
+			}
+		}
+	}
+
+	indices := make([]sqlschema.Index, 0)
+	for _, index := range uniqueIndicesMap {
+		indices = append(indices, index)
+	}
+
+	return indices, nil
+}
+
+func (provider *provider) ToggleFKEnforcement(_ context.Context, _ bun.IDB, _ bool) error {
+	return nil
+}

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/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/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

@@ -191,7 +191,8 @@ function App(): JSX.Element {
 				// if the user is on basic plan then remove billing
 				if (isOnBasicPlan) {
 					updatedRoutes = updatedRoutes.filter(
-						(route) => route?.path !== ROUTES.BILLING,
+						(route) =>
+							route?.path !== ROUTES.BILLING && route?.path !== ROUTES.INTEGRATIONS,
 					);
 				}
 
@@ -204,7 +205,8 @@ function App(): JSX.Element {
 			} else {
 				// if not a cloud user then remove billing and add list licenses route
 				updatedRoutes = updatedRoutes.filter(
-					(route) => route?.path !== ROUTES.BILLING,
+					(route) =>
+						route?.path !== ROUTES.BILLING && route?.path !== ROUTES.INTEGRATIONS,
 				);
 				updatedRoutes = [...updatedRoutes, LIST_LICENSES];
 			}

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

@@ -101,13 +101,18 @@
 		line-height: 28px;
 	}
 
-	.changelog-media-image {
+	.changelog-media-image,
+	.changelog-media-video {
 		height: auto;
 		width: 100%;
 		overflow: hidden;
 		border-radius: 4px;
 		border: 1px solid var(--bg-slate-400, #1d212d);
 	}
+
+	.changelog-media-video {
+		margin: 12px 0;
+	}
 }
 
 .lightMode {

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

@@ -32,7 +32,7 @@ function renderMedia(media: Media): JSX.Element | null {
 				controls
 				controlsList="nodownload noplaybackrate"
 				loop
-				className="my-3 h-auto w-full rounded"
+				className="changelog-media-video"
 			>
 				<source src={media.url} type={media.mime} />
 				<track kind="captions" src="" label="No captions available" default />
@@ -56,7 +56,7 @@ function ChangelogRenderer({ changelog }: Props): JSX.Element {
 			</div>
 			<span className="changelog-release-date">{formattedReleaseDate}</span>
 			{changelog.features && changelog.features.length > 0 && (
-				<div className="changelog-renderer-list flex flex-col gap-7">
+				<div className="changelog-renderer-list">
 					{changelog.features.map((feature) => (
 						<div key={feature.id}>
 							<h2>{feature.title}</h2>

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

@@ -194,7 +194,7 @@ function HostMetricTraces({
 			{!isError && traces.length > 0 && (
 				<div className="host-metric-traces-table">
 					<TraceExplorerControls
-						isLoading={isFetching}
+						isLoading={isFetching && traces.length === 0}
 						totalCount={totalCount}
 						perPageOptions={PER_PAGE_OPTIONS}
 						showSizeChanger={false}
@@ -203,7 +203,7 @@ function HostMetricTraces({
 						tableLayout="fixed"
 						pagination={false}
 						scroll={{ x: true }}
-						loading={isFetching}
+						loading={isFetching && traces.length === 0}
 						dataSource={traces}
 						columns={traceListColumns}
 						onRow={(): Record<string, unknown> => ({

frontend/src/components/HostMetricsDetail/HostMetricsDetails.tsx

@@ -37,7 +37,7 @@ import {
 	ScrollText,
 	X,
 } from 'lucide-react';
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { useSearchParams } from 'react-router-dom-v5-compat';
 import { AppState } from 'store/reducers';
@@ -86,8 +86,12 @@ function HostMetricsDetails({
 		endTime: endMs,
 	}));
 
+	const lastSelectedInterval = useRef<Time | null>(null);
+
 	const [selectedInterval, setSelectedInterval] = useState<Time>(
-		selectedTime as Time,
+		lastSelectedInterval.current
+			? lastSelectedInterval.current
+			: (selectedTime as Time),
 	);
 
 	const [selectedView, setSelectedView] = useState<VIEWS>(
@@ -150,10 +154,11 @@ function HostMetricsDetails({
 	}, [initialFilters]);
 
 	useEffect(() => {
-		setSelectedInterval(selectedTime as Time);
+		const currentSelectedInterval = lastSelectedInterval.current || selectedTime;
+		setSelectedInterval(currentSelectedInterval as Time);
 
-		if (selectedTime !== 'custom') {
-			const { maxTime, minTime } = GetMinMax(selectedTime);
+		if (currentSelectedInterval !== 'custom') {
+			const { maxTime, minTime } = GetMinMax(currentSelectedInterval);
 
 			setModalTimeRange({
 				startTime: Math.floor(minTime / 1000000000),
@@ -181,6 +186,7 @@ function HostMetricsDetails({
 
 	const handleTimeChange = useCallback(
 		(interval: Time | CustomTimeType, dateTimeRange?: [number, number]): void => {
+			lastSelectedInterval.current = interval as Time;
 			setSelectedInterval(interval as Time);
 
 			if (interval === 'custom' && dateTimeRange) {
@@ -356,6 +362,7 @@ function HostMetricsDetails({
 
 	const handleClose = (): void => {
 		setSelectedInterval(selectedTime as Time);
+		lastSelectedInterval.current = null;
 		setSearchParams({});
 
 		if (selectedTime !== 'custom') {

frontend/src/components/HostMetricsDetail/Metrics/Metrics.tsx

@@ -15,11 +15,12 @@ import {
 } from 'container/TopNav/DateTimeSelectionV2/config';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { useResizeObserver } from 'hooks/useDimensions';
+import { useMultiIntersectionObserver } from 'hooks/useMultiIntersectionObserver';
 import { GetMetricQueryRange } from 'lib/dashboard/getQueryResults';
 import { getUPlotChartOptions } from 'lib/uPlotLib/getUplotChartOptions';
 import { getUPlotChartData } from 'lib/uPlotLib/utils/getUplotChartData';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { useQueries, UseQueryResult } from 'react-query';
+import { QueryFunctionContext, useQueries, UseQueryResult } from 'react-query';
 import { SuccessResponse } from 'types/api';
 import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
 
@@ -53,6 +54,11 @@ function Metrics({
 		featureFlags?.find((flag) => flag.name === FeatureKeys.DOT_METRICS_ENABLED)
 			?.active || false;
 
+	const {
+		visibilities,
+		setElement,
+	} = useMultiIntersectionObserver(hostWidgetInfo.length, { threshold: 0.1 });
+
 	const queryPayloads = useMemo(
 		() =>
 			getHostQueryPayload(
@@ -65,11 +71,15 @@ function Metrics({
 	);
 
 	const queries = useQueries(
-		queryPayloads.map((payload) => ({
+		queryPayloads.map((payload, index) => ({
 			queryKey: ['host-metrics', payload, ENTITY_VERSION_V4, 'HOST'],
-			queryFn: (): Promise<SuccessResponse<MetricRangePayloadProps>> =>
-				GetMetricQueryRange(payload, ENTITY_VERSION_V4),
-			enabled: !!payload,
+			queryFn: ({
+				signal,
+			}: QueryFunctionContext): Promise<
+				SuccessResponse<MetricRangePayloadProps>
+			> => GetMetricQueryRange(payload, ENTITY_VERSION_V4, signal),
+			enabled: !!payload && visibilities[index],
+			keepPreviousData: true,
 		})),
 	);
 
@@ -143,7 +153,7 @@ function Metrics({
 		query: UseQueryResult<SuccessResponse<MetricRangePayloadProps>, unknown>,
 		idx: number,
 	): JSX.Element => {
-		if (query.isLoading) {
+		if ((!query.data && query.isLoading) || !visibilities[idx]) {
 			return <Skeleton />;
 		}
 
@@ -181,7 +191,7 @@ function Metrics({
 			</div>
 			<Row gutter={24} className="host-metrics-container">
 				{queries.map((query, idx) => (
-					<Col span={12} key={hostWidgetInfo[idx].title}>
+					<Col ref={setElement(idx)} span={12} key={hostWidgetInfo[idx].title}>
 						<Typography.Text>{hostWidgetInfo[idx].title}</Typography.Text>
 						<Card bordered className="host-metrics-card" ref={graphRef}>
 							{renderCardContent(query, idx)}

frontend/src/components/LogDetail/index.tsx

@@ -71,7 +71,7 @@ function LogDetail({
 	const [contextQuery, setContextQuery] = useState<Query | undefined>();
 	const [filters, setFilters] = useState<TagFilter | null>(null);
 	const [isEdit, setIsEdit] = useState<boolean>(false);
-	const { initialDataSource, stagedQuery } = useQueryBuilder();
+	const { stagedQuery } = useQueryBuilder();
 
 	const listQuery = useMemo(() => {
 		if (!stagedQuery || stagedQuery.builder.queryData.length < 1) return null;
@@ -81,7 +81,7 @@ function LogDetail({
 
 	const { options } = useOptionsMenu({
 		storageKey: LOCALSTORAGE.LOGS_LIST_OPTIONS,
-		dataSource: initialDataSource || DataSource.LOGS,
+		dataSource: DataSource.LOGS,
 		aggregateOperator: listQuery?.aggregateOperator || StringOperators.NOOP,
 	});
 

frontend/src/components/RouteTab/index.tsx

@@ -1,5 +1,10 @@
 import { Tabs, TabsProps } from 'antd';
-import { useLocation, useParams } from 'react-router-dom';
+import {
+	generatePath,
+	matchPath,
+	useLocation,
+	useParams,
+} from 'react-router-dom';
 
 import { RouteTabProps } from './types';
 
@@ -17,20 +22,13 @@ function RouteTab({
 	const params = useParams<Params>();
 	const location = useLocation();
 
-	// Replace dynamic parameters in routes
-	const routesWithParams = routes.map((route) => ({
-		...route,
-		route: route.route.replace(
-			/:(\w+)/g,
-			(match, param) => params[param] || match,
-		),
-	}));
-
 	// Find the matching route for the current pathname
-	const currentRoute = routesWithParams.find((route) => {
-		const routePattern = route.route.replace(/:(\w+)/g, '([^/]+)');
-		const regex = new RegExp(`^${routePattern}$`);
-		return regex.test(location.pathname);
+	const currentRoute = routes.find((route) => {
+		const routePath = route.route.split('?')[0];
+		return matchPath(location.pathname, {
+			path: routePath,
+			exact: true,
+		});
 	});
 
 	const onChange = (activeRoute: string): void => {
@@ -38,14 +36,15 @@ function RouteTab({
 			onChangeHandler(activeRoute);
 		}
 
-		const selectedRoute = routesWithParams.find((e) => e.key === activeRoute);
+		const selectedRoute = routes.find((e) => e.key === activeRoute);
 
 		if (selectedRoute) {
-			history.push(selectedRoute.route);
+			const resolvedRoute = generatePath(selectedRoute.route, params);
+			history.push(resolvedRoute);
 		}
 	};
 
-	const items = routesWithParams.map(({ Component, name, route, key }) => ({
+	const items = routes.map(({ Component, name, route, key }) => ({
 		label: name,
 		key,
 		tabKey: route,

frontend/src/constants/query.ts

@@ -46,4 +46,5 @@ export enum QueryParams {
 	msgSystem = 'msgSystem',
 	destination = 'destination',
 	kindString = 'kindString',
+	tab = 'tab',
 }

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

@@ -1,4 +1,7 @@
-.app-banner-container {
+// Earlier we were having app-banner-container class
+// we change it to app-banner-wrapper as the adblocker was blocking the app-banner-container class
+// Keep an eye on What classnames are used in the codebase
+.app-banner-wrapper {
 	position: relative;
 	width: 100%;
 }

frontend/src/container/AppLayout/index.tsx

@@ -63,7 +63,6 @@ import {
 } 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,
@@ -98,16 +97,11 @@ 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>(
+	const { latestVersion } = useSelector<AppState, AppReducer>(
 		(state) => state.app,
 	);
 
-	const isLatestVersion = checkVersionState(currentVersion, latestVersion);
-
 	const handleBillingOnSuccess = (
 		data: SuccessResponseV2<CheckoutSuccessPayloadProps>,
 	): void => {
@@ -163,7 +157,7 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 			queryFn: (): Promise<SuccessResponse<ChangelogSchema> | ErrorResponse> =>
 				getChangelogByVersion(latestVersion),
 			queryKey: ['getChangelogByVersion', latestVersion],
-			enabled: isLoggedIn && !isCloudUserVal && shouldFetchChangelog,
+			enabled: isLoggedIn && !isCloudUserVal && Boolean(latestVersion),
 		},
 	]);
 
@@ -223,7 +217,7 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 
 		if (
 			getUserVersionResponse.isFetched &&
-			getUserLatestVersionResponse.isSuccess &&
+			getUserVersionResponse.isSuccess &&
 			getUserVersionResponse.data &&
 			getUserVersionResponse.data.payload
 		) {
@@ -261,18 +255,13 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 		getUserVersionResponse.isLoading,
 		getUserVersionResponse.isError,
 		getUserVersionResponse.data,
+		getUserVersionResponse.isSuccess,
 		getUserLatestVersionResponse.isFetched,
 		getUserVersionResponse.isFetched,
 		getUserLatestVersionResponse.isSuccess,
 		notifications,
 	]);
 
-	useEffect(() => {
-		if (!isLatestVersion) {
-			setShouldFetchChangelog(true);
-		}
-	}, [isLatestVersion]);
-
 	useEffect(() => {
 		if (
 			getChangelogByVersionResponse.isFetched &&
@@ -613,7 +602,7 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 			</Helmet>
 
 			{isLoggedIn && (
-				<div className={cx('app-banner-container')}>
+				<div className={cx('app-banner-wrapper')}>
 					{SHOW_TRIAL_EXPIRY_BANNER && (
 						<div className="trial-expiry-banner">
 							You are in free trial period. Your free trial will end on{' '}

frontend/src/container/EmptyLogsSearch/EmptyLogsSearch.styles.scss

@@ -1,30 +1,173 @@
-.empty-logs-search-container {
-	display: flex;
-	flex-direction: column;
-	justify-content: center;
-	align-items: center;
-	height: 240px;
-
-	.empty-logs-search-container-content {
+.empty-logs-search {
+	&__container {
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		height: 240px;
+	}
+	&__content {
 		display: flex;
 		flex-direction: column;
 		gap: 4px;
-
 		color: var(--text-vanilla-400);
 		font-family: Inter;
 		font-size: 14px;
 		font-style: normal;
 		font-weight: 400;
-		line-height: 18px; /* 128.571% */
+		line-height: 18px;
 		letter-spacing: -0.07px;
-
+		align-items: flex-start;
 		.empty-state-svg {
 			height: 50px;
 			width: 50px;
 		}
+	}
+	&__sub-text {
+		font-weight: 600;
+	}
 
-		.sub-text {
-			font-weight: 600;
+	&__container {
+		&--custom-message {
+			height: 445px;
+			.empty-state-svg {
+				height: 32px;
+				width: 32px;
+			}
+			.empty-logs-search {
+				&__header {
+					display: flex;
+					align-items: center;
+					gap: 4px;
+				}
+
+				&__title {
+					color: var(--bg-vanilla-100);
+					font-size: 14px;
+					font-weight: 500;
+					line-height: 20px;
+					letter-spacing: -0.07px;
+				}
+
+				&__subtitle {
+					color: var(--bg-vanilla-400);
+					font-size: 14px;
+					font-weight: 400;
+					line-height: 20px;
+					letter-spacing: -0.07px;
+				}
+
+				&__description {
+					font-size: 14px;
+					color: var(--text-vanilla-400);
+					line-height: 20px;
+				}
+
+				&__description-list {
+					margin: 0;
+					margin-top: 8px;
+					color: var(--bg-vanilla-400);
+					font-size: 14px;
+					font-weight: 400;
+					line-height: 20px;
+					letter-spacing: -0.07px;
+					display: flex;
+					flex-direction: column;
+					gap: 6px;
+					list-style: none;
+					padding: 0;
+					font-family: Inter;
+				}
+
+				&__description-list li {
+					position: relative;
+					padding-left: 20px;
+				}
+
+				&__description-list li::before {
+					content: '⎯';
+					font-family: Inter;
+					position: absolute;
+					left: 0;
+					color: var(--bg-robin-400);
+					font-weight: bold;
+					font-size: 16px;
+					line-height: 20px;
+				}
+
+				&__clear-filters-btn {
+					display: flex;
+					width: 468px;
+					font-family: Inter;
+					padding: 12px;
+					justify-content: space-between;
+					align-items: flex-start;
+					border-radius: 3px;
+					border: 1px dashed var(--bg-slate-500);
+					background: transparent;
+					color: var(--bg-vanilla-400);
+					font-size: 14px;
+					font-weight: 400;
+					line-height: 18px;
+					letter-spacing: -0.07px;
+					cursor: pointer;
+					margin-top: 12px;
+				}
+
+				&__clear-filters-btn-icon {
+					display: flex;
+					align-items: center;
+					gap: 6px;
+				}
+
+				&__row {
+					display: flex;
+					flex-direction: row;
+					align-items: flex-end;
+					max-width: 825px;
+					gap: 25px;
+					justify-content: center;
+					margin-left: 21px;
+				}
+
+				&__content {
+					display: flex;
+					flex-direction: column;
+					gap: 4px;
+					min-width: 260px;
+				}
+
+				&__resources-card {
+					background: var(--bg-ink-400);
+					border: 1px solid var(--bg-slate-500);
+					border-radius: 4px;
+					width: 332px;
+				}
+
+				&__resources-title {
+					color: var(--bg-vanilla-400);
+					font-family: Inter;
+					font-size: 11px;
+					font-weight: 600;
+					line-height: 18px;
+					letter-spacing: 0.88px;
+					text-transform: uppercase;
+					padding: 16px 16px 12px;
+					border-bottom: 1px solid var(--bg-slate-500);
+					height: 46px;
+				}
+
+				&__resources-links {
+					padding: 16px;
+					display: flex;
+					flex-direction: column;
+					gap: 16px;
+
+					.learn-more {
+						height: 18px;
+					}
+				}
+			}
 		}
 	}
 }

frontend/src/container/EmptyLogsSearch/EmptyLogsSearch.tsx

@@ -2,16 +2,24 @@ import './EmptyLogsSearch.styles.scss';
 
 import { Typography } from 'antd';
 import logEvent from 'api/common/logEvent';
+import cx from 'classnames';
+import LearnMore from 'components/LearnMore/LearnMore';
+import { EmptyLogsListConfig } from 'container/LogsExplorerList/utils';
+import { Delete } from 'lucide-react';
 import { useEffect, useRef } from 'react';
 import { DataSource, PanelTypeKeys } from 'types/common/queryBuilder';
 
+interface EmptyLogsSearchProps {
+	dataSource: DataSource;
+	panelType: PanelTypeKeys;
+	customMessage?: EmptyLogsListConfig;
+}
+
 export default function EmptyLogsSearch({
 	dataSource,
 	panelType,
-}: {
-	dataSource: DataSource;
-	panelType: PanelTypeKeys;
-}): JSX.Element {
+	customMessage,
+}: EmptyLogsSearchProps): JSX.Element {
 	const logEventCalledRef = useRef(false);
 	useEffect(() => {
 		if (!logEventCalledRef.current) {
@@ -30,18 +38,80 @@ export default function EmptyLogsSearch({
 	}, []);
 
 	return (
-		<div className="empty-logs-search-container">
-			<div className="empty-logs-search-container-content">
-				<img
-					src="/Icons/emptyState.svg"
-					alt="thinking-emoji"
-					className="empty-state-svg"
-				/>
-				<Typography.Text>
-					<span className="sub-text">This query had no results. </span>
-					Edit your query and try again!
-				</Typography.Text>
+		<div
+			className={cx('empty-logs-search__container', {
+				'empty-logs-search__container--custom-message': !!customMessage,
+			})}
+		>
+			<div className="empty-logs-search__row">
+				<div className="empty-logs-search__content">
+					<img
+						src="/Icons/emptyState.svg"
+						alt="thinking-emoji"
+						className="empty-state-svg"
+					/>
+					{customMessage ? (
+						<>
+							<div className="empty-logs-search__header">
+								<Typography.Text className="empty-logs-search__title">
+									{customMessage.title}
+								</Typography.Text>
+								{customMessage.subTitle && (
+									<Typography.Text className="empty-logs-search__subtitle">
+										{customMessage.subTitle}
+									</Typography.Text>
+								)}
+							</div>
+							{Array.isArray(customMessage.description) ? (
+								<ul className="empty-logs-search__description-list">
+									{customMessage.description.map((desc) => (
+										<li key={desc}>{desc}</li>
+									))}
+								</ul>
+							) : (
+								<Typography.Text className="empty-logs-search__description">
+									{customMessage.description}
+								</Typography.Text>
+							)}
+							{/* Clear filters button */}
+							{customMessage.showClearFiltersButton && (
+								<button
+									type="button"
+									className="empty-logs-search__clear-filters-btn"
+									onClick={customMessage.onClearFilters}
+								>
+									{customMessage.clearFiltersButtonText}
+									<span className="empty-logs-search__clear-filters-btn-icon">
+										<Delete size={14} />
+										Clear filters
+									</span>
+								</button>
+							)}
+						</>
+					) : (
+						<Typography.Text>
+							<span className="empty-logs-search__sub-text">
+								This query had no results.{' '}
+							</span>
+							Edit your query and try again!
+						</Typography.Text>
+					)}
+				</div>
+				{customMessage?.documentationLinks && (
+					<div className="empty-logs-search__resources-card">
+						<div className="empty-logs-search__resources-title">RESOURCES</div>
+						<div className="empty-logs-search__resources-links">
+							{customMessage.documentationLinks.map((link) => (
+								<LearnMore key={link.text} text={link.text} url={link.url} />
+							))}
+						</div>
+					</div>
+				)}
 			</div>
 		</div>
 	);
 }
+
+EmptyLogsSearch.defaultProps = {
+	customMessage: null,
+};

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/GridCardLayout.styles.scss

@@ -2,6 +2,7 @@
 	overflow: auto;
 	margin: 8px -8px;
 	margin-right: 0;
+	margin-bottom: 64px;
 
 	.react-grid-layout {
 		border: none !important;

frontend/src/container/InfraMonitoringHosts/HostsList.tsx

@@ -96,11 +96,41 @@ function HostsList(): JSX.Element {
 		};
 	}, [pageSize, currentPage, filters, minTime, maxTime, orderBy]);
 
+	const queryKey = useMemo(() => {
+		if (selectedHostName) {
+			return [
+				'hostList',
+				String(pageSize),
+				String(currentPage),
+				JSON.stringify(filters),
+				JSON.stringify(orderBy),
+			];
+		}
+		return [
+			'hostList',
+			String(pageSize),
+			String(currentPage),
+			JSON.stringify(filters),
+			JSON.stringify(orderBy),
+			String(minTime),
+			String(maxTime),
+		];
+	}, [
+		pageSize,
+		currentPage,
+		filters,
+		orderBy,
+		selectedHostName,
+		minTime,
+		maxTime,
+	]);
+
 	const { data, isFetching, isLoading, isError } = useGetHostList(
 		query as HostListPayload,
 		{
-			queryKey: ['hostList', query],
+			queryKey,
 			enabled: !!query,
+			keepPreviousData: true,
 		},
 	);
 
@@ -212,6 +242,7 @@ function HostsList(): JSX.Element {
 						<HostsListControls
 							filters={filters}
 							handleFiltersChange={handleFiltersChange}
+							showAutoRefresh={!selectedHostData}
 						/>
 					</div>
 					<HostsListTable

frontend/src/container/InfraMonitoringHosts/HostsListControls.tsx

@@ -11,9 +11,11 @@ import { DataSource } from 'types/common/queryBuilder';
 function HostsListControls({
 	handleFiltersChange,
 	filters,
+	showAutoRefresh,
 }: {
 	handleFiltersChange: (value: IBuilderQuery['filters']) => void;
 	filters: IBuilderQuery['filters'];
+	showAutoRefresh: boolean;
 }): JSX.Element {
 	const currentQuery = initialQueriesMap[DataSource.METRICS];
 	const updatedCurrentQuery = useMemo(
@@ -58,7 +60,7 @@ function HostsListControls({
 
 			<div className="time-selector">
 				<DateTimeSelectionV2
-					showAutoRefresh
+					showAutoRefresh={showAutoRefresh}
 					showRefreshText={false}
 					hideShareModal
 				/>

frontend/src/container/InfraMonitoringHosts/HostsListTable.tsx

@@ -93,9 +93,13 @@ export default function HostsListTable({
 	const showHostsEmptyState =
 		!isFetching &&
 		!isLoading &&
+		formattedHostMetricsData.length === 0 &&
 		(!sentAnyHostMetricsData || isSendingIncorrectK8SAgentMetrics) &&
 		!filters.items.length;
 
+	const showTableLoadingState =
+		(isLoading || isFetching) && formattedHostMetricsData.length === 0;
+
 	if (isError) {
 		return <Typography>{data?.error || 'Something went wrong'}</Typography>;
 	}
@@ -127,7 +131,7 @@ export default function HostsListTable({
 		);
 	}
 
-	if (isLoading || isFetching) {
+	if (showTableLoadingState) {
 		return (
 			<div className="hosts-list-loading-state">
 				<Skeleton.Input
@@ -155,7 +159,7 @@ export default function HostsListTable({
 	return (
 		<Table
 			className="hosts-list-table"
-			dataSource={isLoading || isFetching ? [] : formattedHostMetricsData}
+			dataSource={showTableLoadingState ? [] : formattedHostMetricsData}
 			columns={columns}
 			pagination={{
 				current: currentPage,
@@ -170,7 +174,7 @@ export default function HostsListTable({
 			}}
 			scroll={{ x: true }}
 			loading={{
-				spinning: isFetching || isLoading,
+				spinning: showTableLoadingState,
 				indicator: <Spin indicator={<LoadingOutlined size={14} spin />} />,
 			}}
 			tableLayout="fixed"

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

@@ -28,6 +28,7 @@ describe('HostsListControls', () => {
 			<HostsListControls
 				handleFiltersChange={mockHandleFiltersChange}
 				filters={mockFilters}
+				showAutoRefresh={false}
 			/>,
 		);
 

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

@@ -59,13 +59,27 @@ describe('HostsListTable', () => {
 		setPageSize: mockSetPageSize,
 	} as any;
 
-	it('renders loading state if isLoading is true', () => {
-		const { container } = render(<HostsListTable {...mockProps} isLoading />);
+	it('renders loading state if isLoading is true and tableData is empty', () => {
+		const { container } = render(
+			<HostsListTable
+				{...mockProps}
+				isLoading
+				hostMetricsData={[]}
+				tableData={{ payload: { data: { hosts: [] } } }}
+			/>,
+		);
 		expect(container.querySelector('.hosts-list-loading-state')).toBeTruthy();
 	});
 
-	it('renders loading state if isFetching is true', () => {
-		const { container } = render(<HostsListTable {...mockProps} isFetching />);
+	it('renders loading state if isFetching is true and tableData is empty', () => {
+		const { container } = render(
+			<HostsListTable
+				{...mockProps}
+				isFetching
+				hostMetricsData={[]}
+				tableData={{ payload: { data: { hosts: [] } } }}
+			/>,
+		);
 		expect(container.querySelector('.hosts-list-loading-state')).toBeTruthy();
 	});
 
@@ -75,7 +89,17 @@ describe('HostsListTable', () => {
 	});
 
 	it('renders empty state if no hosts are found', () => {
-		const { container } = render(<HostsListTable {...mockProps} />);
+		const { container } = render(
+			<HostsListTable
+				{...mockProps}
+				hostMetricsData={[]}
+				tableData={{
+					payload: {
+						data: { hosts: [] },
+					},
+				}}
+			/>,
+		);
 		expect(container.querySelector(EMPTY_STATE_CONTAINER_CLASS)).toBeTruthy();
 	});
 
@@ -83,6 +107,7 @@ describe('HostsListTable', () => {
 		const { container } = render(
 			<HostsListTable
 				{...mockProps}
+				hostMetricsData={[]}
 				tableData={{
 					...mockTableData,
 					payload: {
@@ -90,6 +115,7 @@ describe('HostsListTable', () => {
 						data: {
 							...mockTableData.payload.data,
 							sentAnyHostMetricsData: false,
+							hosts: [],
 						},
 					},
 				}}
@@ -102,6 +128,7 @@ describe('HostsListTable', () => {
 		const { container } = render(
 			<HostsListTable
 				{...mockProps}
+				hostMetricsData={[]}
 				tableData={{
 					...mockTableData,
 					payload: {
@@ -109,6 +136,7 @@ describe('HostsListTable', () => {
 						data: {
 							...mockTableData.payload.data,
 							isSendingIncorrectK8SAgentMetrics: true,
+							hosts: [],
 						},
 					},
 				}}

frontend/src/container/InfraMonitoringK8s/Clusters/ClusterDetails/ClusterDetails.tsx

@@ -38,7 +38,7 @@ import {
 	ScrollText,
 	X,
 } from 'lucide-react';
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { useSearchParams } from 'react-router-dom-v5-compat';
 import { AppState } from 'store/reducers';
@@ -85,8 +85,12 @@ function ClusterDetails({
 		endTime: endMs,
 	}));
 
+	const lastSelectedInterval = useRef<Time | null>(null);
+
 	const [selectedInterval, setSelectedInterval] = useState<Time>(
-		selectedTime as Time,
+		lastSelectedInterval.current
+			? lastSelectedInterval.current
+			: (selectedTime as Time),
 	);
 
 	const [searchParams, setSearchParams] = useSearchParams();
@@ -195,10 +199,11 @@ function ClusterDetails({
 	}, [initialFilters, initialEventsFilters]);
 
 	useEffect(() => {
-		setSelectedInterval(selectedTime as Time);
+		const currentSelectedInterval = lastSelectedInterval.current || selectedTime;
+		setSelectedInterval(currentSelectedInterval as Time);
 
-		if (selectedTime !== 'custom') {
-			const { maxTime, minTime } = GetMinMax(selectedTime);
+		if (currentSelectedInterval !== 'custom') {
+			const { maxTime, minTime } = GetMinMax(currentSelectedInterval);
 
 			setModalTimeRange({
 				startTime: Math.floor(minTime / 1000000000),
@@ -226,6 +231,7 @@ function ClusterDetails({
 
 	const handleTimeChange = useCallback(
 		(interval: Time | CustomTimeType, dateTimeRange?: [number, number]): void => {
+			lastSelectedInterval.current = interval as Time;
 			setSelectedInterval(interval as Time);
 
 			if (interval === 'custom' && dateTimeRange) {
@@ -462,6 +468,7 @@ function ClusterDetails({
 	};
 
 	const handleClose = (): void => {
+		lastSelectedInterval.current = null;
 		setSelectedInterval(selectedTime as Time);
 
 		if (selectedTime !== 'custom') {

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

@@ -51,8 +51,8 @@ export const getClusterMetricsQueryPayload = (
 	const getKey = (dotKey: string, underscoreKey: string): string =>
 		dotMetricsEnabled ? dotKey : underscoreKey;
 	const k8sPodCpuUtilizationKey = getKey(
-		'k8s.pod.cpu.utilization',
-		'k8s_pod_cpu_utilization',
+		'k8s.pod.cpu.usage',
+		'k8s_pod_cpu_usage',
 	);
 	const k8sNodeAllocatableCpuKey = getKey(
 		'k8s.node.allocatable_cpu',
@@ -146,7 +146,7 @@ export const getClusterMetricsQueryPayload = (
 						{
 							aggregateAttribute: {
 								dataType: DataTypes.Float64,
-								id: 'k8s_pod_cpu_utilization--float64--Gauge--true',
+								id: 'k8s_pod_cpu_usage--float64--Gauge--true',
 								isColumn: true,
 								isJSON: false,
 								key: k8sPodCpuUtilizationKey,
@@ -189,7 +189,7 @@ export const getClusterMetricsQueryPayload = (
 						{
 							aggregateAttribute: {
 								dataType: DataTypes.Float64,
-								id: 'k8s_pod_cpu_utilization--float64--Gauge--true',
+								id: 'k8s_pod_cpu_usage--float64--Gauge--true',
 								isColumn: true,
 								isJSON: false,
 								key: k8sPodCpuUtilizationKey,
@@ -232,7 +232,7 @@ export const getClusterMetricsQueryPayload = (
 						{
 							aggregateAttribute: {
 								dataType: DataTypes.Float64,
-								id: 'k8s_pod_cpu_utilization--float64--Gauge--true',
+								id: 'k8s_pod_cpu_usage--float64--Gauge--true',
 								isColumn: true,
 								isJSON: false,
 								key: k8sPodCpuUtilizationKey,
@@ -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/Clusters/K8sClustersList.tsx

@@ -189,6 +189,32 @@ function K8sClustersList({
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [minTime, maxTime, orderBy, selectedRowData, groupBy]);
 
+	const groupedByRowDataQueryKey = useMemo(() => {
+		if (selectedClusterName) {
+			return [
+				'clusterList',
+				JSON.stringify(queryFilters),
+				JSON.stringify(orderBy),
+				JSON.stringify(selectedRowData),
+			];
+		}
+		return [
+			'clusterList',
+			JSON.stringify(queryFilters),
+			JSON.stringify(orderBy),
+			JSON.stringify(selectedRowData),
+			String(minTime),
+			String(maxTime),
+		];
+	}, [
+		queryFilters,
+		orderBy,
+		selectedClusterName,
+		minTime,
+		maxTime,
+		selectedRowData,
+	]);
+
 	const {
 		data: groupedByRowData,
 		isFetching: isFetchingGroupedByRowData,
@@ -198,7 +224,7 @@ function K8sClustersList({
 	} = useGetK8sClustersList(
 		fetchGroupedByRowDataQuery as K8sClustersListPayload,
 		{
-			queryKey: ['clusterList', fetchGroupedByRowDataQuery],
+			queryKey: groupedByRowDataQueryKey,
 			enabled: !!fetchGroupedByRowDataQuery && !!selectedRowData,
 		},
 		undefined,
@@ -254,11 +280,44 @@ function K8sClustersList({
 		return groupedByRowData?.payload?.data?.records || [];
 	}, [groupedByRowData, selectedRowData]);
 
+	const queryKey = useMemo(() => {
+		if (selectedClusterName) {
+			return [
+				'clusterList',
+				String(pageSize),
+				String(currentPage),
+				JSON.stringify(queryFilters),
+				JSON.stringify(orderBy),
+				JSON.stringify(groupBy),
+			];
+		}
+		return [
+			'clusterList',
+			String(pageSize),
+			String(currentPage),
+			JSON.stringify(queryFilters),
+			JSON.stringify(orderBy),
+			JSON.stringify(groupBy),
+			String(minTime),
+			String(maxTime),
+		];
+	}, [
+		selectedClusterName,
+		pageSize,
+		currentPage,
+		queryFilters,
+		orderBy,
+		groupBy,
+		minTime,
+		maxTime,
+	]);
+
 	const { data, isFetching, isLoading, isError } = useGetK8sClustersList(
 		query as K8sClustersListPayload,
 		{
-			queryKey: ['clusterList', query],
+			queryKey,
 			enabled: !!query,
+			keepPreviousData: true,
 		},
 		undefined,
 		dotMetricsEnabled,
@@ -583,6 +642,9 @@ function K8sClustersList({
 		});
 	};
 
+	const showTableLoadingState =
+		(isFetching || isLoading) && formattedClustersData.length === 0;
+
 	return (
 		<div className="k8s-list">
 			<K8sHeader
@@ -595,12 +657,13 @@ function K8sClustersList({
 				handleGroupByChange={handleGroupByChange}
 				selectedGroupBy={groupBy}
 				entity={K8sCategory.NODES}
+				showAutoRefresh={!selectedClusterData}
 			/>
 			{isError && <Typography>{data?.error || 'Something went wrong'}</Typography>}
 
 			<Table
 				className="k8s-list-table clusters-list-table"
-				dataSource={isFetching || isLoading ? [] : formattedClustersData}
+				dataSource={showTableLoadingState ? [] : formattedClustersData}
 				columns={columns}
 				pagination={{
 					current: currentPage,
@@ -612,26 +675,25 @@ function K8sClustersList({
 				}}
 				scroll={{ x: true }}
 				loading={{
-					spinning: isFetching || isLoading,
+					spinning: showTableLoadingState,
 					indicator: <Spin indicator={<LoadingOutlined size={14} spin />} />,
 				}}
 				locale={{
-					emptyText:
-						isFetching || isLoading ? null : (
-							<div className="no-filtered-hosts-message-container">
-								<div className="no-filtered-hosts-message-content">
-									<img
-										src="/Icons/emptyState.svg"
-										alt="thinking-emoji"
-										className="empty-state-svg"
-									/>
+					emptyText: showTableLoadingState ? null : (
+						<div className="no-filtered-hosts-message-container">
+							<div className="no-filtered-hosts-message-content">
+								<img
+									src="/Icons/emptyState.svg"
+									alt="thinking-emoji"
+									className="empty-state-svg"
+								/>
 
-									<Typography.Text className="no-filtered-hosts-message">
-										This query had no results. Edit your query and try again!
-									</Typography.Text>
-								</div>
+								<Typography.Text className="no-filtered-hosts-message">
+									This query had no results. Edit your query and try again!
+								</Typography.Text>
 							</div>
-						),
+						</div>
+					),
 				}}
 				tableLayout="fixed"
 				onChange={handleTableChange}

frontend/src/container/InfraMonitoringK8s/DaemonSets/DaemonSetDetails/DaemonSetDetails.tsx

@@ -33,7 +33,7 @@ import {
 	ScrollText,
 	X,
 } from 'lucide-react';
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { useSearchParams } from 'react-router-dom-v5-compat';
 import { AppState } from 'store/reducers';
@@ -84,8 +84,12 @@ function DaemonSetDetails({
 		endTime: endMs,
 	}));
 
+	const lastSelectedInterval = useRef<Time | null>(null);
+
 	const [selectedInterval, setSelectedInterval] = useState<Time>(
-		selectedTime as Time,
+		lastSelectedInterval.current
+			? lastSelectedInterval.current
+			: (selectedTime as Time),
 	);
 
 	const [searchParams, setSearchParams] = useSearchParams();
@@ -211,10 +215,11 @@ function DaemonSetDetails({
 	}, [initialFilters, initialEventsFilters]);
 
 	useEffect(() => {
-		setSelectedInterval(selectedTime as Time);
+		const currentSelectedInterval = lastSelectedInterval.current || selectedTime;
+		setSelectedInterval(currentSelectedInterval as Time);
 
-		if (selectedTime !== 'custom') {
-			const { maxTime, minTime } = GetMinMax(selectedTime);
+		if (currentSelectedInterval !== 'custom') {
+			const { maxTime, minTime } = GetMinMax(currentSelectedInterval);
 
 			setModalTimeRange({
 				startTime: Math.floor(minTime / 1000000000),
@@ -242,6 +247,7 @@ function DaemonSetDetails({
 
 	const handleTimeChange = useCallback(
 		(interval: Time | CustomTimeType, dateTimeRange?: [number, number]): void => {
+			lastSelectedInterval.current = interval as Time;
 			setSelectedInterval(interval as Time);
 
 			if (interval === 'custom' && dateTimeRange) {
@@ -476,6 +482,7 @@ function DaemonSetDetails({
 	};
 
 	const handleClose = (): void => {
+		lastSelectedInterval.current = null;
 		setSelectedInterval(selectedTime as Time);
 
 		if (selectedTime !== 'custom') {

frontend/src/container/InfraMonitoringK8s/DaemonSets/DaemonSetDetails/constants.ts

@@ -33,8 +33,8 @@ export const getDaemonSetMetricsQueryPayload = (
 	dotMetricsEnabled: boolean,
 ): GetQueryResultsProps[] => {
 	const k8sPodCpuUtilizationKey = dotMetricsEnabled
-		? 'k8s.pod.cpu.utilization'
-		: 'k8s_pod_cpu_utilization';
+		? 'k8s.pod.cpu.usage'
+		: 'k8s_pod_cpu_usage';
 
 	const k8sContainerCpuRequestKey = dotMetricsEnabled
 		? 'k8s.container.cpu_request'
@@ -84,7 +84,7 @@ export const getDaemonSetMetricsQueryPayload = (
 						{
 							aggregateAttribute: {
 								dataType: DataTypes.Float64,
-								id: 'k8s_pod_cpu_utilization--float64--Gauge--true',
+								id: 'k8s_pod_cpu_usage--float64--Gauge--true',
 								isColumn: true,
 								isJSON: false,
 								key: k8sPodCpuUtilizationKey,

frontend/src/container/InfraMonitoringK8s/DaemonSets/K8sDaemonSetsList.tsx

@@ -191,6 +191,32 @@ function K8sDaemonSetsList({
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [minTime, maxTime, orderBy, selectedRowData, groupBy]);
 
+	const groupedByRowDataQueryKey = useMemo(() => {
+		if (selectedDaemonSetUID) {
+			return [
+				'daemonSetList',
+				JSON.stringify(queryFilters),
+				JSON.stringify(orderBy),
+				JSON.stringify(selectedRowData),
+			];
+		}
+		return [
+			'daemonSetList',
+			JSON.stringify(queryFilters),
+			JSON.stringify(orderBy),
+			JSON.stringify(selectedRowData),
+			String(minTime),
+			String(maxTime),
+		];
+	}, [
+		queryFilters,
+		orderBy,
+		selectedDaemonSetUID,
+		minTime,
+		maxTime,
+		selectedRowData,
+	]);
+
 	const {
 		data: groupedByRowData,
 		isFetching: isFetchingGroupedByRowData,
@@ -200,7 +226,7 @@ function K8sDaemonSetsList({
 	} = useGetK8sDaemonSetsList(
 		fetchGroupedByRowDataQuery as K8sDaemonSetsListPayload,
 		{
-			queryKey: ['daemonSetList', fetchGroupedByRowDataQuery],
+			queryKey: groupedByRowDataQueryKey,
 			enabled: !!fetchGroupedByRowDataQuery && !!selectedRowData,
 		},
 		undefined,
@@ -251,11 +277,44 @@ function K8sDaemonSetsList({
 		[groupedByRowData, groupBy],
 	);
 
+	const queryKey = useMemo(() => {
+		if (selectedDaemonSetUID) {
+			return [
+				'daemonSetList',
+				String(pageSize),
+				String(currentPage),
+				JSON.stringify(queryFilters),
+				JSON.stringify(orderBy),
+				JSON.stringify(groupBy),
+			];
+		}
+		return [
+			'daemonSetList',
+			String(pageSize),
+			String(currentPage),
+			JSON.stringify(queryFilters),
+			JSON.stringify(orderBy),
+			JSON.stringify(groupBy),
+			String(minTime),
+			String(maxTime),
+		];
+	}, [
+		selectedDaemonSetUID,
+		pageSize,
+		currentPage,
+		queryFilters,
+		orderBy,
+		groupBy,
+		minTime,
+		maxTime,
+	]);
+
 	const { data, isFetching, isLoading, isError } = useGetK8sDaemonSetsList(
 		query as K8sDaemonSetsListPayload,
 		{
-			queryKey: ['daemonSetList', query],
+			queryKey,
 			enabled: !!query,
+			keepPreviousData: true,
 		},
 		undefined,
 		dotMetricsEnabled,
@@ -591,6 +650,9 @@ function K8sDaemonSetsList({
 		});
 	};
 
+	const showTableLoadingState =
+		(isFetching || isLoading) && formattedDaemonSetsData.length === 0;
+
 	return (
 		<div className="k8s-list">
 			<K8sHeader
@@ -603,6 +665,7 @@ function K8sDaemonSetsList({
 				handleGroupByChange={handleGroupByChange}
 				selectedGroupBy={groupBy}
 				entity={K8sCategory.DAEMONSETS}
+				showAutoRefresh={!selectedDaemonSetData}
 			/>
 			{isError && <Typography>{data?.error || 'Something went wrong'}</Typography>}
 
@@ -610,7 +673,7 @@ function K8sDaemonSetsList({
 				className={classNames('k8s-list-table', 'daemonSets-list-table', {
 					'expanded-daemonsets-list-table': isGroupedByAttribute,
 				})}
-				dataSource={isFetching || isLoading ? [] : formattedDaemonSetsData}
+				dataSource={showTableLoadingState ? [] : formattedDaemonSetsData}
 				columns={columns}
 				pagination={{
 					current: currentPage,
@@ -622,26 +685,25 @@ function K8sDaemonSetsList({
 				}}
 				scroll={{ x: true }}
 				loading={{
-					spinning: isFetching || isLoading,
+					spinning: showTableLoadingState,
 					indicator: <Spin indicator={<LoadingOutlined size={14} spin />} />,
 				}}
 				locale={{
-					emptyText:
-						isFetching || isLoading ? null : (
-							<div className="no-filtered-hosts-message-container">
-								<div className="no-filtered-hosts-message-content">
-									<img
-										src="/Icons/emptyState.svg"
-										alt="thinking-emoji"
-										className="empty-state-svg"
-									/>
+					emptyText: showTableLoadingState ? null : (
+						<div className="no-filtered-hosts-message-container">
+							<div className="no-filtered-hosts-message-content">
+								<img
+									src="/Icons/emptyState.svg"
+									alt="thinking-emoji"
+									className="empty-state-svg"
+								/>
 
-									<Typography.Text className="no-filtered-hosts-message">
-										This query had no results. Edit your query and try again!
-									</Typography.Text>
-								</div>
+								<Typography.Text className="no-filtered-hosts-message">
+									This query had no results. Edit your query and try again!
+								</Typography.Text>
 							</div>
-						),
+						</div>
+					),
 				}}
 				tableLayout="fixed"
 				onChange={handleTableChange}

frontend/src/container/InfraMonitoringK8s/Deployments/DeploymentDetails/DeploymentDetails.tsx

@@ -38,7 +38,7 @@ import {
 	ScrollText,
 	X,
 } from 'lucide-react';
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { useSearchParams } from 'react-router-dom-v5-compat';
 import { AppState } from 'store/reducers';
@@ -88,8 +88,12 @@ function DeploymentDetails({
 		endTime: endMs,
 	}));
 
+	const lastSelectedInterval = useRef<Time | null>(null);
+
 	const [selectedInterval, setSelectedInterval] = useState<Time>(
-		selectedTime as Time,
+		lastSelectedInterval.current
+			? lastSelectedInterval.current
+			: (selectedTime as Time),
 	);
 
 	const [searchParams, setSearchParams] = useSearchParams();
@@ -215,10 +219,11 @@ function DeploymentDetails({
 	}, [initialFilters, initialEventsFilters]);
 
 	useEffect(() => {
-		setSelectedInterval(selectedTime as Time);
+		const currentSelectedInterval = lastSelectedInterval.current || selectedTime;
+		setSelectedInterval(currentSelectedInterval as Time);
 
-		if (selectedTime !== 'custom') {
-			const { maxTime, minTime } = GetMinMax(selectedTime);
+		if (currentSelectedInterval !== 'custom') {
+			const { maxTime, minTime } = GetMinMax(currentSelectedInterval);
 
 			setModalTimeRange({
 				startTime: Math.floor(minTime / 1000000000),
@@ -246,6 +251,7 @@ function DeploymentDetails({
 
 	const handleTimeChange = useCallback(
 		(interval: Time | CustomTimeType, dateTimeRange?: [number, number]): void => {
+			lastSelectedInterval.current = interval as Time;
 			setSelectedInterval(interval as Time);
 
 			if (interval === 'custom' && dateTimeRange) {
@@ -487,6 +493,7 @@ function DeploymentDetails({
 	};
 
 	const handleClose = (): void => {
+		lastSelectedInterval.current = null;
 		setSelectedInterval(selectedTime as Time);
 
 		if (selectedTime !== 'custom') {

frontend/src/container/InfraMonitoringK8s/Deployments/DeploymentDetails/constants.ts

@@ -33,8 +33,8 @@ export const getDeploymentMetricsQueryPayload = (
 	dotMetricsEnabled: boolean,
 ): GetQueryResultsProps[] => {
 	const k8sPodCpuUtilizationKey = dotMetricsEnabled
-		? 'k8s.pod.cpu.utilization'
-		: 'k8s_pod_cpu_utilization';
+		? 'k8s.pod.cpu.usage'
+		: 'k8s_pod_cpu_usage';
 
 	const k8sContainerCpuRequestKey = dotMetricsEnabled
 		? 'k8s.container.cpu_request'
@@ -80,7 +80,7 @@ export const getDeploymentMetricsQueryPayload = (
 						{
 							aggregateAttribute: {
 								dataType: DataTypes.Float64,
-								id: 'k8s_pod_cpu_utilization--float64--Gauge--true',
+								id: 'k8s_pod_cpu_usage--float64--Gauge--true',
 								isColumn: true,
 								isJSON: false,
 								key: k8sPodCpuUtilizationKey,

frontend/src/container/InfraMonitoringK8s/Deployments/K8sDeploymentsList.tsx

@@ -192,6 +192,32 @@ function K8sDeploymentsList({
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [minTime, maxTime, orderBy, selectedRowData, groupBy]);
 
+	const groupedByRowDataQueryKey = useMemo(() => {
+		if (selectedDeploymentUID) {
+			return [
+				'deploymentList',
+				JSON.stringify(queryFilters),
+				JSON.stringify(orderBy),
+				JSON.stringify(selectedRowData),
+			];
+		}
+		return [
+			'deploymentList',
+			JSON.stringify(queryFilters),
+			JSON.stringify(orderBy),
+			JSON.stringify(selectedRowData),
+			String(minTime),
+			String(maxTime),
+		];
+	}, [
+		queryFilters,
+		orderBy,
+		selectedDeploymentUID,
+		minTime,
+		maxTime,
+		selectedRowData,
+	]);
+
 	const {
 		data: groupedByRowData,
 		isFetching: isFetchingGroupedByRowData,
@@ -201,7 +227,7 @@ function K8sDeploymentsList({
 	} = useGetK8sDeploymentsList(
 		fetchGroupedByRowDataQuery as K8sDeploymentsListPayload,
 		{
-			queryKey: ['deploymentList', fetchGroupedByRowDataQuery],
+			queryKey: groupedByRowDataQueryKey,
 			enabled: !!fetchGroupedByRowDataQuery && !!selectedRowData,
 		},
 		undefined,
@@ -252,11 +278,44 @@ function K8sDeploymentsList({
 		[groupedByRowData, groupBy],
 	);
 
+	const queryKey = useMemo(() => {
+		if (selectedDeploymentUID) {
+			return [
+				'deploymentList',
+				String(pageSize),
+				String(currentPage),
+				JSON.stringify(queryFilters),
+				JSON.stringify(orderBy),
+				JSON.stringify(groupBy),
+			];
+		}
+		return [
+			'deploymentList',
+			String(pageSize),
+			String(currentPage),
+			JSON.stringify(queryFilters),
+			JSON.stringify(orderBy),
+			JSON.stringify(groupBy),
+			String(minTime),
+			String(maxTime),
+		];
+	}, [
+		selectedDeploymentUID,
+		pageSize,
+		currentPage,
+		queryFilters,
+		orderBy,
+		groupBy,
+		minTime,
+		maxTime,
+	]);
+
 	const { data, isFetching, isLoading, isError } = useGetK8sDeploymentsList(
 		query as K8sDeploymentsListPayload,
 		{
-			queryKey: ['deploymentList', query],
+			queryKey,
 			enabled: !!query,
+			keepPreviousData: true,
 		},
 		undefined,
 		dotMetricsEnabled,
@@ -596,6 +655,9 @@ function K8sDeploymentsList({
 		});
 	};
 
+	const showTableLoadingState =
+		(isFetching || isLoading) && formattedDeploymentsData.length === 0;
+
 	return (
 		<div className="k8s-list">
 			<K8sHeader
@@ -608,6 +670,7 @@ function K8sDeploymentsList({
 				handleGroupByChange={handleGroupByChange}
 				selectedGroupBy={groupBy}
 				entity={K8sCategory.NODES}
+				showAutoRefresh={!selectedDeploymentData}
 			/>
 			{isError && <Typography>{data?.error || 'Something went wrong'}</Typography>}
 
@@ -615,7 +678,7 @@ function K8sDeploymentsList({
 				className={classNames('k8s-list-table', 'deployments-list-table', {
 					'expanded-deployments-list-table': isGroupedByAttribute,
 				})}
-				dataSource={isFetching || isLoading ? [] : formattedDeploymentsData}
+				dataSource={showTableLoadingState ? [] : formattedDeploymentsData}
 				columns={columns}
 				pagination={{
 					current: currentPage,
@@ -627,26 +690,25 @@ function K8sDeploymentsList({
 				}}
 				scroll={{ x: true }}
 				loading={{
-					spinning: isFetching || isLoading,
+					spinning: showTableLoadingState,
 					indicator: <Spin indicator={<LoadingOutlined size={14} spin />} />,
 				}}
 				locale={{
-					emptyText:
-						isFetching || isLoading ? null : (
-							<div className="no-filtered-hosts-message-container">
-								<div className="no-filtered-hosts-message-content">
-									<img
-										src="/Icons/emptyState.svg"
-										alt="thinking-emoji"
-										className="empty-state-svg"
-									/>
+					emptyText: showTableLoadingState ? null : (
+						<div className="no-filtered-hosts-message-container">
+							<div className="no-filtered-hosts-message-content">
+								<img
+									src="/Icons/emptyState.svg"
+									alt="thinking-emoji"
+									className="empty-state-svg"
+								/>
 
-									<Typography.Text className="no-filtered-hosts-message">
-										This query had no results. Edit your query and try again!
-									</Typography.Text>
-								</div>
+								<Typography.Text className="no-filtered-hosts-message">
+									This query had no results. Edit your query and try again!
+								</Typography.Text>
 							</div>
-						),
+						</div>
+					),
 				}}
 				tableLayout="fixed"
 				onChange={handleTableChange}

frontend/src/container/InfraMonitoringK8s/EntityDetailsUtils/EntityEvents/EntityEvents.tsx

@@ -270,7 +270,7 @@ export default function Events({
 				</div>
 			</div>
 
-			{isLoading && <LoadingContainer />}
+			{isLoading && formattedEntityEvents.length === 0 && <LoadingContainer />}
 
 			{!isLoading && !isError && formattedEntityEvents.length === 0 && (
 				<EntityDetailsEmptyContainer category={category} view="events" />

frontend/src/container/InfraMonitoringK8s/EntityDetailsUtils/EntityMetrics/EntityMetrics.tsx

@@ -24,12 +24,13 @@ import {
 import { getUPlotChartOptions } from 'lib/uPlotLib/getUplotChartOptions';
 import { getUPlotChartData } from 'lib/uPlotLib/utils/getUplotChartData';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { useQueries, UseQueryResult } from 'react-query';
+import { QueryFunctionContext, useQueries, UseQueryResult } from 'react-query';
 import { SuccessResponse } from 'types/api';
 import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
 import { Options } from 'uplot';
 
 import { FeatureKeys } from '../../../../constants/features';
+import { useMultiIntersectionObserver } from '../../../../hooks/useMultiIntersectionObserver';
 import { useAppContext } from '../../../../providers/App/App';
 
 interface EntityMetricsProps<T> {
@@ -73,6 +74,12 @@ function EntityMetrics<T>({
 	const dotMetricsEnabled =
 		featureFlags?.find((flag) => flag.name === FeatureKeys.DOT_METRICS_ENABLED)
 			?.active || false;
+
+	const {
+		visibilities,
+		setElement,
+	} = useMultiIntersectionObserver(entityWidgetInfo.length, { threshold: 0.1 });
+
 	const queryPayloads = useMemo(
 		() =>
 			getEntityQueryPayload(
@@ -91,11 +98,15 @@ function EntityMetrics<T>({
 	);
 
 	const queries = useQueries(
-		queryPayloads.map((payload) => ({
+		queryPayloads.map((payload, index) => ({
 			queryKey: [queryKey, payload, ENTITY_VERSION_V4, category],
-			queryFn: (): Promise<SuccessResponse<MetricRangePayloadProps>> =>
-				GetMetricQueryRange(payload, ENTITY_VERSION_V4),
-			enabled: !!payload,
+			queryFn: ({
+				signal,
+			}: QueryFunctionContext): Promise<
+				SuccessResponse<MetricRangePayloadProps>
+			> => GetMetricQueryRange(payload, ENTITY_VERSION_V4, signal),
+			enabled: !!payload && visibilities[index],
+			keepPreviousData: true,
 		})),
 	);
 
@@ -186,7 +197,7 @@ function EntityMetrics<T>({
 		query: UseQueryResult<SuccessResponse<MetricRangePayloadProps>, unknown>,
 		idx: number,
 	): JSX.Element => {
-		if (query.isLoading) {
+		if ((!query.data && query.isLoading) || !visibilities[idx]) {
 			return <Skeleton />;
 		}
 
@@ -196,7 +207,7 @@ function EntityMetrics<T>({
 			return <div>{errorMessage}</div>;
 		}
 
-		const { panelType } = (query.data?.params as any).compositeQuery;
+		const panelType = (query.data?.params as any)?.compositeQuery?.panelType;
 
 		return (
 			<div
@@ -234,7 +245,7 @@ function EntityMetrics<T>({
 			</div>
 			<Row gutter={24} className="entity-metrics-container">
 				{queries.map((query, idx) => (
-					<Col span={12} key={entityWidgetInfo[idx].title}>
+					<Col ref={setElement(idx)} span={12} key={entityWidgetInfo[idx].title}>
 						<Typography.Text>{entityWidgetInfo[idx].title}</Typography.Text>
 						<Card bordered className="entity-metrics-card" ref={graphRef}>
 							{renderCardContent(query, idx)}

frontend/src/container/InfraMonitoringK8s/EntityDetailsUtils/EntityTraces/EntityTraces.tsx

@@ -203,7 +203,7 @@ function EntityTraces({
 			{!isError && traces.length > 0 && (
 				<div className="entity-traces-table">
 					<TraceExplorerControls
-						isLoading={isFetching}
+						isLoading={isFetching && traces.length === 0}
 						totalCount={totalCount}
 						perPageOptions={PER_PAGE_OPTIONS}
 						showSizeChanger={false}
@@ -212,7 +212,7 @@ function EntityTraces({
 						tableLayout="fixed"
 						pagination={false}
 						scroll={{ x: true }}
-						loading={isFetching}
+						loading={isFetching && traces.length === 0}
 						dataSource={traces}
 						columns={traceListColumns}
 						onRow={(): Record<string, unknown> => ({

frontend/src/container/InfraMonitoringK8s/Jobs/JobDetails/JobDetails.tsx

@@ -33,7 +33,7 @@ import {
 	ScrollText,
 	X,
 } from 'lucide-react';
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { useSearchParams } from 'react-router-dom-v5-compat';
 import { AppState } from 'store/reducers';
@@ -81,8 +81,12 @@ function JobDetails({
 		endTime: endMs,
 	}));
 
+	const lastSelectedInterval = useRef<Time | null>(null);
+
 	const [selectedInterval, setSelectedInterval] = useState<Time>(
-		selectedTime as Time,
+		lastSelectedInterval.current
+			? lastSelectedInterval.current
+			: (selectedTime as Time),
 	);
 
 	const [searchParams, setSearchParams] = useSearchParams();
@@ -204,10 +208,11 @@ function JobDetails({
 	}, [initialFilters, initialEventsFilters]);
 
 	useEffect(() => {
-		setSelectedInterval(selectedTime as Time);
+		const currentSelectedInterval = lastSelectedInterval.current || selectedTime;
+		setSelectedInterval(currentSelectedInterval as Time);
 
-		if (selectedTime !== 'custom') {
-			const { maxTime, minTime } = GetMinMax(selectedTime);
+		if (currentSelectedInterval !== 'custom') {
+			const { maxTime, minTime } = GetMinMax(currentSelectedInterval);
 
 			setModalTimeRange({
 				startTime: Math.floor(minTime / 1000000000),
@@ -235,6 +240,7 @@ function JobDetails({
 
 	const handleTimeChange = useCallback(
 		(interval: Time | CustomTimeType, dateTimeRange?: [number, number]): void => {
+			lastSelectedInterval.current = interval as Time;
 			setSelectedInterval(interval as Time);
 
 			if (interval === 'custom' && dateTimeRange) {
@@ -469,6 +475,7 @@ function JobDetails({
 	};
 
 	const handleClose = (): void => {
+		lastSelectedInterval.current = null;
 		setSelectedInterval(selectedTime as Time);
 
 		if (selectedTime !== 'custom') {

frontend/src/container/InfraMonitoringK8s/Jobs/JobDetails/constants.ts

@@ -33,8 +33,8 @@ export const getJobMetricsQueryPayload = (
 	dotMetricsEnabled: boolean,
 ): GetQueryResultsProps[] => {
 	const k8sPodCpuUtilizationKey = dotMetricsEnabled
-		? 'k8s.pod.cpu.utilization'
-		: 'k8s_pod_cpu_utilization';
+		? 'k8s.pod.cpu.usage'
+		: 'k8s_pod_cpu_usage';
 	const k8sPodMemoryUsageKey = dotMetricsEnabled
 		? 'k8s.pod.memory.usage'
 		: 'k8s_pod_memory_usage';
@@ -59,7 +59,7 @@ export const getJobMetricsQueryPayload = (
 						{
 							aggregateAttribute: {
 								dataType: DataTypes.Float64,
-								id: 'k8s_pod_cpu_utilization--float64--Gauge--true',
+								id: 'k8s_pod_cpu_usage--float64--Gauge--true',
 								isColumn: true,
 								isJSON: false,
 								key: k8sPodCpuUtilizationKey,

frontend/src/container/InfraMonitoringK8s/Jobs/K8sJobsList.tsx

@@ -186,6 +186,25 @@ function K8sJobsList({
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [minTime, maxTime, orderBy, selectedRowData, groupBy]);
 
+	const groupedByRowDataQueryKey = useMemo(() => {
+		if (selectedJobUID) {
+			return [
+				'jobList',
+				JSON.stringify(queryFilters),
+				JSON.stringify(orderBy),
+				JSON.stringify(selectedRowData),
+			];
+		}
+		return [
+			'jobList',
+			JSON.stringify(queryFilters),
+			JSON.stringify(orderBy),
+			JSON.stringify(selectedRowData),
+			String(minTime),
+			String(maxTime),
+		];
+	}, [queryFilters, orderBy, selectedJobUID, minTime, maxTime, selectedRowData]);
+
 	const {
 		data: groupedByRowData,
 		isFetching: isFetchingGroupedByRowData,
@@ -195,7 +214,7 @@ function K8sJobsList({
 	} = useGetK8sJobsList(
 		fetchGroupedByRowDataQuery as K8sJobsListPayload,
 		{
-			queryKey: ['jobList', fetchGroupedByRowDataQuery],
+			queryKey: groupedByRowDataQueryKey,
 			enabled: !!fetchGroupedByRowDataQuery && !!selectedRowData,
 		},
 		undefined,
@@ -251,11 +270,44 @@ function K8sJobsList({
 		return groupedByRowData?.payload?.data?.records || [];
 	}, [groupedByRowData, selectedRowData]);
 
+	const queryKey = useMemo(() => {
+		if (selectedJobUID) {
+			return [
+				'jobList',
+				String(pageSize),
+				String(currentPage),
+				JSON.stringify(queryFilters),
+				JSON.stringify(orderBy),
+				JSON.stringify(groupBy),
+			];
+		}
+		return [
+			'jobList',
+			String(pageSize),
+			String(currentPage),
+			JSON.stringify(queryFilters),
+			JSON.stringify(orderBy),
+			JSON.stringify(groupBy),
+			String(minTime),
+			String(maxTime),
+		];
+	}, [
+		selectedJobUID,
+		pageSize,
+		currentPage,
+		queryFilters,
+		orderBy,
+		groupBy,
+		minTime,
+		maxTime,
+	]);
+
 	const { data, isFetching, isLoading, isError } = useGetK8sJobsList(
 		query as K8sJobsListPayload,
 		{
-			queryKey: ['jobList', query],
+			queryKey,
 			enabled: !!query,
+			keepPreviousData: true,
 		},
 		undefined,
 		dotMetricsEnabled,
@@ -581,6 +633,7 @@ function K8sJobsList({
 				handleGroupByChange={handleGroupByChange}
 				selectedGroupBy={groupBy}
 				entity={K8sCategory.JOBS}
+				showAutoRefresh={!selectedJobData}
 			/>
 			{isError && <Typography>{data?.error || 'Something went wrong'}</Typography>}
 

frontend/src/container/InfraMonitoringK8s/K8sHeader.tsx

@@ -30,6 +30,7 @@ interface K8sHeaderProps {
 	handleFilterVisibilityChange: () => void;
 	isFiltersVisible: boolean;
 	entity: K8sCategory;
+	showAutoRefresh: boolean;
 }
 
 function K8sHeader({
@@ -46,6 +47,7 @@ function K8sHeader({
 	handleFilterVisibilityChange,
 	isFiltersVisible,
 	entity,
+	showAutoRefresh,
 }: K8sHeaderProps): JSX.Element {
 	const [isFiltersSidePanelOpen, setIsFiltersSidePanelOpen] = useState(false);
 	const [searchParams, setSearchParams] = useSearchParams();
@@ -136,7 +138,7 @@ function K8sHeader({
 
 			<div className="k8s-list-controls-right">
 				<DateTimeSelectionV2
-					showAutoRefresh
+					showAutoRefresh={showAutoRefresh}
 					showRefreshText={false}
 					hideShareModal
 				/>

frontend/src/container/InfraMonitoringK8s/Namespaces/K8sNamespacesList.tsx

@@ -190,6 +190,32 @@ function K8sNamespacesList({
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [minTime, maxTime, orderBy, selectedRowData, groupBy]);
 
+	const groupedByRowDataQueryKey = useMemo(() => {
+		if (selectedNamespaceUID) {
+			return [
+				'namespaceList',
+				JSON.stringify(queryFilters),
+				JSON.stringify(orderBy),
+				JSON.stringify(selectedRowData),
+			];
+		}
+		return [
+			'namespaceList',
+			JSON.stringify(queryFilters),
+			JSON.stringify(orderBy),
+			JSON.stringify(selectedRowData),
+			String(minTime),
+			String(maxTime),
+		];
+	}, [
+		queryFilters,
+		orderBy,
+		selectedNamespaceUID,
+		minTime,
+		maxTime,
+		selectedRowData,
+	]);
+
 	const {
 		data: groupedByRowData,
 		isFetching: isFetchingGroupedByRowData,
@@ -199,7 +225,7 @@ function K8sNamespacesList({
 	} = useGetK8sNamespacesList(
 		fetchGroupedByRowDataQuery as K8sNamespacesListPayload,
 		{
-			queryKey: ['namespaceList', fetchGroupedByRowDataQuery],
+			queryKey: groupedByRowDataQueryKey,
 			enabled: !!fetchGroupedByRowDataQuery && !!selectedRowData,
 		},
 		undefined,
@@ -250,11 +276,44 @@ function K8sNamespacesList({
 		[groupedByRowData, groupBy],
 	);
 
+	const queryKey = useMemo(() => {
+		if (selectedNamespaceUID) {
+			return [
+				'namespaceList',
+				String(pageSize),
+				String(currentPage),
+				JSON.stringify(queryFilters),
+				JSON.stringify(orderBy),
+				JSON.stringify(groupBy),
+			];
+		}
+		return [
+			'namespaceList',
+			String(pageSize),
+			String(currentPage),
+			JSON.stringify(queryFilters),
+			JSON.stringify(orderBy),
+			JSON.stringify(groupBy),
+			String(minTime),
+			String(maxTime),
+		];
+	}, [
+		selectedNamespaceUID,
+		pageSize,
+		currentPage,
+		queryFilters,
+		orderBy,
+		groupBy,
+		minTime,
+		maxTime,
+	]);
+
 	const { data, isFetching, isLoading, isError } = useGetK8sNamespacesList(
 		query as K8sNamespacesListPayload,
 		{
-			queryKey: ['namespaceList', query],
+			queryKey,
 			enabled: !!query,
+			keepPreviousData: true,
 		},
 		undefined,
 		dotMetricsEnabled,
@@ -592,6 +651,9 @@ function K8sNamespacesList({
 		});
 	};
 
+	const showTableLoadingState =
+		(isFetching || isLoading) && formattedNamespacesData.length === 0;
+
 	return (
 		<div className="k8s-list">
 			<K8sHeader
@@ -604,12 +666,13 @@ function K8sNamespacesList({
 				handleGroupByChange={handleGroupByChange}
 				selectedGroupBy={groupBy}
 				entity={K8sCategory.NODES}
+				showAutoRefresh={!selectedNamespaceData}
 			/>
 			{isError && <Typography>{data?.error || 'Something went wrong'}</Typography>}
 
 			<Table
 				className="k8s-list-table namespaces-list-table"
-				dataSource={isFetching || isLoading ? [] : formattedNamespacesData}
+				dataSource={showTableLoadingState ? [] : formattedNamespacesData}
 				columns={columns}
 				pagination={{
 					current: currentPage,
@@ -621,26 +684,25 @@ function K8sNamespacesList({
 				}}
 				scroll={{ x: true }}
 				loading={{
-					spinning: isFetching || isLoading,
+					spinning: showTableLoadingState,
 					indicator: <Spin indicator={<LoadingOutlined size={14} spin />} />,
 				}}
 				locale={{
-					emptyText:
-						isFetching || isLoading ? null : (
-							<div className="no-filtered-hosts-message-container">
-								<div className="no-filtered-hosts-message-content">
-									<img
-										src="/Icons/emptyState.svg"
-										alt="thinking-emoji"
-										className="empty-state-svg"
-									/>
+					emptyText: showTableLoadingState ? null : (
+						<div className="no-filtered-hosts-message-container">
+							<div className="no-filtered-hosts-message-content">
+								<img
+									src="/Icons/emptyState.svg"
+									alt="thinking-emoji"
+									className="empty-state-svg"
+								/>
 
-									<Typography.Text className="no-filtered-hosts-message">
-										This query had no results. Edit your query and try again!
-									</Typography.Text>
-								</div>
+								<Typography.Text className="no-filtered-hosts-message">
+									This query had no results. Edit your query and try again!
+								</Typography.Text>
 							</div>
-						),
+						</div>
+					),
 				}}
 				tableLayout="fixed"
 				onChange={handleTableChange}

frontend/src/container/InfraMonitoringK8s/Namespaces/NamespaceDetails/NamespaceDetails.tsx

@@ -35,7 +35,7 @@ import {
 	ScrollText,
 	X,
 } from 'lucide-react';
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { useSearchParams } from 'react-router-dom-v5-compat';
 import { AppState } from 'store/reducers';
@@ -85,8 +85,12 @@ function NamespaceDetails({
 		endTime: endMs,
 	}));
 
+	const lastSelectedInterval = useRef<Time | null>(null);
+
 	const [selectedInterval, setSelectedInterval] = useState<Time>(
-		selectedTime as Time,
+		lastSelectedInterval.current
+			? lastSelectedInterval.current
+			: (selectedTime as Time),
 	);
 
 	const [searchParams, setSearchParams] = useSearchParams();
@@ -195,10 +199,11 @@ function NamespaceDetails({
 	}, [initialFilters, initialEventsFilters]);
 
 	useEffect(() => {
-		setSelectedInterval(selectedTime as Time);
+		const currentSelectedInterval = lastSelectedInterval.current || selectedTime;
+		setSelectedInterval(currentSelectedInterval as Time);
 
-		if (selectedTime !== 'custom') {
-			const { maxTime, minTime } = GetMinMax(selectedTime);
+		if (currentSelectedInterval !== 'custom') {
+			const { maxTime, minTime } = GetMinMax(currentSelectedInterval);
 
 			setModalTimeRange({
 				startTime: Math.floor(minTime / 1000000000),
@@ -226,6 +231,7 @@ function NamespaceDetails({
 
 	const handleTimeChange = useCallback(
 		(interval: Time | CustomTimeType, dateTimeRange?: [number, number]): void => {
+			lastSelectedInterval.current = interval as Time;
 			setSelectedInterval(interval as Time);
 
 			if (interval === 'custom' && dateTimeRange) {
@@ -461,6 +467,7 @@ function NamespaceDetails({
 	};
 
 	const handleClose = (): void => {
+		lastSelectedInterval.current = null;
 		setSelectedInterval(selectedTime as Time);
 
 		if (selectedTime !== 'custom') {

frontend/src/container/InfraMonitoringK8s/Namespaces/NamespaceDetails/constants.ts

@@ -59,8 +59,8 @@ export const getNamespaceMetricsQueryPayload = (
 	const getKey = (dotKey: string, underscoreKey: string): string =>
 		dotMetricsEnabled ? dotKey : underscoreKey;
 	const k8sPodCpuUtilizationKey = getKey(
-		'k8s.pod.cpu.utilization',
-		'k8s_pod_cpu_utilization',
+		'k8s.pod.cpu.usage',
+		'k8s_pod_cpu_usage',
 	);
 	const k8sContainerCpuRequestKey = getKey(
 		'k8s.container.cpu_request',

frontend/src/container/InfraMonitoringK8s/Nodes/K8sNodesList.tsx

@@ -184,6 +184,32 @@ function K8sNodesList({
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [minTime, maxTime, orderBy, selectedRowData, groupBy]);
 
+	const groupedByRowDataQueryKey = useMemo(() => {
+		if (selectedNodeUID) {
+			return [
+				'nodeList',
+				JSON.stringify(queryFilters),
+				JSON.stringify(orderBy),
+				JSON.stringify(selectedRowData),
+			];
+		}
+		return [
+			'nodeList',
+			JSON.stringify(queryFilters),
+			JSON.stringify(orderBy),
+			JSON.stringify(selectedRowData),
+			String(minTime),
+			String(maxTime),
+		];
+	}, [
+		queryFilters,
+		orderBy,
+		selectedNodeUID,
+		minTime,
+		maxTime,
+		selectedRowData,
+	]);
+
 	const {
 		data: groupedByRowData,
 		isFetching: isFetchingGroupedByRowData,
@@ -193,7 +219,7 @@ function K8sNodesList({
 	} = useGetK8sNodesList(
 		fetchGroupedByRowDataQuery as K8sNodesListPayload,
 		{
-			queryKey: ['nodeList', fetchGroupedByRowDataQuery],
+			queryKey: groupedByRowDataQueryKey,
 			enabled: !!fetchGroupedByRowDataQuery && !!selectedRowData,
 		},
 		undefined,
@@ -249,11 +275,44 @@ function K8sNodesList({
 		[groupedByRowData, groupBy],
 	);
 
+	const queryKey = useMemo(() => {
+		if (selectedNodeUID) {
+			return [
+				'nodeList',
+				String(pageSize),
+				String(currentPage),
+				JSON.stringify(queryFilters),
+				JSON.stringify(orderBy),
+				JSON.stringify(groupBy),
+			];
+		}
+		return [
+			'nodeList',
+			String(pageSize),
+			String(currentPage),
+			JSON.stringify(queryFilters),
+			JSON.stringify(orderBy),
+			JSON.stringify(groupBy),
+			String(minTime),
+			String(maxTime),
+		];
+	}, [
+		selectedNodeUID,
+		pageSize,
+		currentPage,
+		queryFilters,
+		orderBy,
+		groupBy,
+		minTime,
+		maxTime,
+	]);
+
 	const { data, isFetching, isLoading, isError } = useGetK8sNodesList(
 		query as K8sNodesListPayload,
 		{
-			queryKey: ['nodeList', query],
+			queryKey,
 			enabled: !!query,
+			keepPreviousData: true,
 		},
 		undefined,
 		dotMetricsEnabled,
@@ -571,6 +630,9 @@ function K8sNodesList({
 		});
 	};
 
+	const showTableLoadingState =
+		(isFetching || isLoading) && formattedNodesData.length === 0;
+
 	return (
 		<div className="k8s-list">
 			<K8sHeader
@@ -583,12 +645,13 @@ function K8sNodesList({
 				handleGroupByChange={handleGroupByChange}
 				selectedGroupBy={groupBy}
 				entity={K8sCategory.NODES}
+				showAutoRefresh={!selectedNodeData}
 			/>
 			{isError && <Typography>{data?.error || 'Something went wrong'}</Typography>}
 
 			<Table
 				className="k8s-list-table nodes-list-table"
-				dataSource={isFetching || isLoading ? [] : formattedNodesData}
+				dataSource={showTableLoadingState ? [] : formattedNodesData}
 				columns={columns}
 				pagination={{
 					current: currentPage,
@@ -600,26 +663,25 @@ function K8sNodesList({
 				}}
 				scroll={{ x: true }}
 				loading={{
-					spinning: isFetching || isLoading,
+					spinning: showTableLoadingState,
 					indicator: <Spin indicator={<LoadingOutlined size={14} spin />} />,
 				}}
 				locale={{
-					emptyText:
-						isFetching || isLoading ? null : (
-							<div className="no-filtered-hosts-message-container">
-								<div className="no-filtered-hosts-message-content">
-									<img
-										src="/Icons/emptyState.svg"
-										alt="thinking-emoji"
-										className="empty-state-svg"
-									/>
+					emptyText: showTableLoadingState ? null : (
+						<div className="no-filtered-hosts-message-container">
+							<div className="no-filtered-hosts-message-content">
+								<img
+									src="/Icons/emptyState.svg"
+									alt="thinking-emoji"
+									className="empty-state-svg"
+								/>
 
-									<Typography.Text className="no-filtered-hosts-message">
-										This query had no results. Edit your query and try again!
-									</Typography.Text>
-								</div>
+								<Typography.Text className="no-filtered-hosts-message">
+									This query had no results. Edit your query and try again!
+								</Typography.Text>
 							</div>
-						),
+						</div>
+					),
 				}}
 				tableLayout="fixed"
 				onChange={handleTableChange}

frontend/src/container/InfraMonitoringK8s/Nodes/NodeDetails/NodeDetails.tsx

@@ -38,7 +38,7 @@ import {
 	ScrollText,
 	X,
 } from 'lucide-react';
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { useSearchParams } from 'react-router-dom-v5-compat';
 import { AppState } from 'store/reducers';
@@ -85,8 +85,12 @@ function NodeDetails({
 		endTime: endMs,
 	}));
 
+	const lastSelectedInterval = useRef<Time | null>(null);
+
 	const [selectedInterval, setSelectedInterval] = useState<Time>(
-		selectedTime as Time,
+		lastSelectedInterval.current
+			? lastSelectedInterval.current
+			: (selectedTime as Time),
 	);
 
 	const [searchParams, setSearchParams] = useSearchParams();
@@ -195,10 +199,11 @@ function NodeDetails({
 	}, [initialFilters, initialEventsFilters]);
 
 	useEffect(() => {
-		setSelectedInterval(selectedTime as Time);
+		const currentSelectedInterval = lastSelectedInterval.current || selectedTime;
+		setSelectedInterval(currentSelectedInterval as Time);
 
-		if (selectedTime !== 'custom') {
-			const { maxTime, minTime } = GetMinMax(selectedTime);
+		if (currentSelectedInterval !== 'custom') {
+			const { maxTime, minTime } = GetMinMax(currentSelectedInterval);
 
 			setModalTimeRange({
 				startTime: Math.floor(minTime / 1000000000),
@@ -226,6 +231,7 @@ function NodeDetails({
 
 	const handleTimeChange = useCallback(
 		(interval: Time | CustomTimeType, dateTimeRange?: [number, number]): void => {
+			lastSelectedInterval.current = interval as Time;
 			setSelectedInterval(interval as Time);
 
 			if (interval === 'custom' && dateTimeRange) {
@@ -464,6 +470,7 @@ function NodeDetails({
 	};
 
 	const handleClose = (): void => {
+		lastSelectedInterval.current = null;
 		setSelectedInterval(selectedTime as Time);
 
 		if (selectedTime !== 'custom') {

frontend/src/container/InfraMonitoringK8s/Nodes/NodeDetails/constants.ts

@@ -59,8 +59,8 @@ export const getNodeMetricsQueryPayload = (
 	const getKey = (dotKey: string, underscoreKey: string): string =>
 		dotMetricsEnabled ? dotKey : underscoreKey;
 	const k8sNodeCpuUtilizationKey = getKey(
-		'k8s.node.cpu.utilization',
-		'k8s_node_cpu_utilization',
+		'k8s.node.cpu.usage',
+		'k8s_node_cpu_usage',
 	);
 
 	const k8sNodeAllocatableCpuKey = getKey(
@@ -99,8 +99,8 @@ export const getNodeMetricsQueryPayload = (
 	);
 
 	const k8sPodCpuUtilizationKey = getKey(
-		'k8s.pod.cpu.utilization',
-		'k8s_pod_cpu_utilization',
+		'k8s.pod.cpu.usage',
+		'k8s_pod_cpu_usage',
 	);
 
 	const k8sPodMemoryUsageKey = getKey(
@@ -147,7 +147,7 @@ export const getNodeMetricsQueryPayload = (
 						{
 							aggregateAttribute: {
 								dataType: DataTypes.Float64,
-								id: 'k8s_node_cpu_utilization--float64--Gauge--true',
+								id: 'k8s_node_cpu_usage--float64--Gauge--true',
 								isColumn: true,
 								isJSON: false,
 								key: k8sNodeCpuUtilizationKey,
@@ -276,7 +276,7 @@ export const getNodeMetricsQueryPayload = (
 						{
 							aggregateAttribute: {
 								dataType: DataTypes.Float64,
-								id: 'k8s_node_cpu_utilization--float64--Gauge--true',
+								id: 'k8s_node_cpu_usage--float64--Gauge--true',
 								isColumn: true,
 								isJSON: false,
 								key: k8sNodeCpuUtilizationKey,
@@ -319,7 +319,7 @@ export const getNodeMetricsQueryPayload = (
 						{
 							aggregateAttribute: {
 								dataType: DataTypes.Float64,
-								id: 'k8s_node_cpu_utilization--float64--Gauge--true',
+								id: 'k8s_node_cpu_usage--float64--Gauge--true',
 								isColumn: true,
 								isJSON: false,
 								key: k8sNodeCpuUtilizationKey,
@@ -729,7 +729,7 @@ export const getNodeMetricsQueryPayload = (
 						{
 							aggregateAttribute: {
 								dataType: DataTypes.Float64,
-								id: 'k8s_node_cpu_utilization--float64--Gauge--true',
+								id: 'k8s_node_cpu_usage--float64--Gauge--true',
 								isColumn: true,
 								isJSON: false,
 								key: k8sNodeCpuUtilizationKey,
@@ -1079,7 +1079,7 @@ export const getNodeMetricsQueryPayload = (
 						{
 							aggregateAttribute: {
 								dataType: DataTypes.Float64,
-								id: 'k8s_pod_cpu_utilization--float64--Gauge--true',
+								id: 'k8s_pod_cpu_usage--float64--Gauge--true',
 								isColumn: true,
 								isJSON: false,
 								key: k8sPodCpuUtilizationKey,

frontend/src/container/InfraMonitoringK8s/Pods/K8sPodLists.tsx

@@ -205,11 +205,44 @@ function K8sPodsList({
 		return queryPayload;
 	}, [pageSize, currentPage, queryFilters, minTime, maxTime, orderBy, groupBy]);
 
+	const queryKey = useMemo(() => {
+		if (selectedPodUID) {
+			return [
+				'podList',
+				String(pageSize),
+				String(currentPage),
+				JSON.stringify(queryFilters),
+				JSON.stringify(orderBy),
+				JSON.stringify(groupBy),
+			];
+		}
+		return [
+			'podList',
+			String(pageSize),
+			String(currentPage),
+			JSON.stringify(queryFilters),
+			JSON.stringify(orderBy),
+			JSON.stringify(groupBy),
+			String(minTime),
+			String(maxTime),
+		];
+	}, [
+		selectedPodUID,
+		pageSize,
+		currentPage,
+		queryFilters,
+		orderBy,
+		groupBy,
+		minTime,
+		maxTime,
+	]);
+
 	const { data, isFetching, isLoading, isError } = useGetK8sPodsList(
 		query as K8sPodsListPayload,
 		{
-			queryKey: ['hostList', query],
+			queryKey,
 			enabled: !!query,
+			keepPreviousData: true,
 		},
 		undefined,
 		dotMetricsEnabled,
@@ -261,6 +294,25 @@ function K8sPodsList({
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [minTime, maxTime, orderBy, selectedRowData]);
 
+	const groupedByRowDataQueryKey = useMemo(() => {
+		if (selectedPodUID) {
+			return [
+				'podList',
+				JSON.stringify(queryFilters),
+				JSON.stringify(orderBy),
+				JSON.stringify(selectedRowData),
+			];
+		}
+		return [
+			'podList',
+			JSON.stringify(queryFilters),
+			JSON.stringify(orderBy),
+			JSON.stringify(selectedRowData),
+			String(minTime),
+			String(maxTime),
+		];
+	}, [queryFilters, orderBy, selectedPodUID, minTime, maxTime, selectedRowData]);
+
 	const {
 		data: groupedByRowData,
 		isFetching: isFetchingGroupedByRowData,
@@ -270,7 +322,7 @@ function K8sPodsList({
 	} = useGetK8sPodsList(
 		fetchGroupedByRowDataQuery as K8sPodsListPayload,
 		{
-			queryKey: ['hostList', fetchGroupedByRowDataQuery],
+			queryKey: groupedByRowDataQueryKey,
 			enabled: !!fetchGroupedByRowDataQuery && !!selectedRowData,
 		},
 		undefined,
@@ -629,6 +681,9 @@ function K8sPodsList({
 		});
 	};
 
+	const showTableLoadingState =
+		(isFetching || isLoading) && formattedPodsData.length === 0;
+
 	return (
 		<div className="k8s-list">
 			<K8sHeader
@@ -645,6 +700,7 @@ function K8sPodsList({
 				onAddColumn={handleAddColumn}
 				onRemoveColumn={handleRemoveColumn}
 				entity={K8sCategory.PODS}
+				showAutoRefresh={!selectedPodData}
 			/>
 			{isError && <Typography>{data?.error || 'Something went wrong'}</Typography>}
 
@@ -652,7 +708,7 @@ function K8sPodsList({
 				className={classNames('k8s-list-table', {
 					'expanded-k8s-list-table': isGroupedByAttribute,
 				})}
-				dataSource={isFetching || isLoading ? [] : formattedPodsData}
+				dataSource={showTableLoadingState ? [] : formattedPodsData}
 				columns={columns}
 				pagination={{
 					current: currentPage,
@@ -663,26 +719,25 @@ function K8sPodsList({
 					onChange: onPaginationChange,
 				}}
 				loading={{
-					spinning: isFetching || isLoading,
+					spinning: showTableLoadingState,
 					indicator: <Spin indicator={<LoadingOutlined size={14} spin />} />,
 				}}
 				locale={{
-					emptyText:
-						isFetching || isLoading ? null : (
-							<div className="no-filtered-hosts-message-container">
-								<div className="no-filtered-hosts-message-content">
-									<img
-										src="/Icons/emptyState.svg"
-										alt="thinking-emoji"
-										className="empty-state-svg"
-									/>
+					emptyText: showTableLoadingState ? null : (
+						<div className="no-filtered-hosts-message-container">
+							<div className="no-filtered-hosts-message-content">
+								<img
+									src="/Icons/emptyState.svg"
+									alt="thinking-emoji"
+									className="empty-state-svg"
+								/>
 
-									<Typography.Text className="no-filtered-hosts-message">
-										This query had no results. Edit your query and try again!
-									</Typography.Text>
-								</div>
+								<Typography.Text className="no-filtered-hosts-message">
+									This query had no results. Edit your query and try again!
+								</Typography.Text>
 							</div>
-						),
+						</div>
+					),
 				}}
 				scroll={{ x: true }}
 				tableLayout="fixed"

frontend/src/container/InfraMonitoringK8s/Pods/PodDetails/PodDetails.tsx

@@ -39,7 +39,7 @@ import {
 	ScrollText,
 	X,
 } from 'lucide-react';
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { useSearchParams } from 'react-router-dom-v5-compat';
 import { AppState } from 'store/reducers';
@@ -89,8 +89,12 @@ function PodDetails({
 		endTime: endMs,
 	}));
 
+	const lastSelectedInterval = useRef<Time | null>(null);
+
 	const [selectedInterval, setSelectedInterval] = useState<Time>(
-		selectedTime as Time,
+		lastSelectedInterval.current
+			? lastSelectedInterval.current
+			: (selectedTime as Time),
 	);
 
 	const [searchParams, setSearchParams] = useSearchParams();
@@ -212,10 +216,11 @@ function PodDetails({
 	}, [initialFilters, initialEventsFilters]);
 
 	useEffect(() => {
-		setSelectedInterval(selectedTime as Time);
+		const currentSelectedInterval = lastSelectedInterval.current || selectedTime;
+		setSelectedInterval(currentSelectedInterval as Time);
 
-		if (selectedTime !== 'custom') {
-			const { maxTime, minTime } = GetMinMax(selectedTime);
+		if (currentSelectedInterval !== 'custom') {
+			const { maxTime, minTime } = GetMinMax(currentSelectedInterval);
 
 			setModalTimeRange({
 				startTime: Math.floor(minTime / TimeRangeOffset),
@@ -243,6 +248,7 @@ function PodDetails({
 
 	const handleTimeChange = useCallback(
 		(interval: Time | CustomTimeType, dateTimeRange?: [number, number]): void => {
+			lastSelectedInterval.current = interval as Time;
 			setSelectedInterval(interval as Time);
 
 			if (interval === 'custom' && dateTimeRange) {
@@ -485,6 +491,7 @@ function PodDetails({
 	};
 
 	const handleClose = (): void => {
+		lastSelectedInterval.current = null;
 		setSelectedInterval(selectedTime as Time);
 
 		if (selectedTime !== 'custom') {

frontend/src/container/InfraMonitoringK8s/Pods/PodDetails/constants.ts

@@ -72,10 +72,7 @@ export const getPodMetricsQueryPayload = (
 		dotMetricsEnabled ? dotKey : underscoreKey;
 	const k8sContainerNameKey = getKey('k8s.container.name', 'k8s_container_name');
 
-	const k8sPodCpuUtilKey = getKey(
-		'k8s.pod.cpu.utilization',
-		'k8s_pod_cpu_utilization',
-	);
+	const k8sPodCpuUtilKey = getKey('k8s.pod.cpu.usage', 'k8s_pod_cpu_usage');
 
 	const k8sPodCpuReqUtilKey = getKey(
 		'k8s.pod.cpu_request_utilization',
@@ -115,8 +112,8 @@ export const getPodMetricsQueryPayload = (
 	);
 
 	const containerCpuUtilKey = getKey(
-		'container.cpu.utilization',
-		'container_cpu_utilization',
+		'container.cpu.usage',
+		'container_cpu_usage',
 	);
 
 	const k8sContainerCpuRequestKey = getKey(
@@ -189,7 +186,7 @@ export const getPodMetricsQueryPayload = (
 						{
 							aggregateAttribute: {
 								dataType: DataTypes.Float64,
-								id: 'k8s_pod_cpu_utilization--float64--Gauge--true',
+								id: 'k8s_pod_cpu_usage--float64--Gauge--true',
 								isColumn: true,
 								isJSON: false,
 								key: k8sPodCpuUtilKey,
@@ -245,7 +242,7 @@ export const getPodMetricsQueryPayload = (
 						{
 							aggregateAttribute: {
 								dataType: DataTypes.Float64,
-								id: 'k8s_pod_cpu_utilization--float64--Gauge--true',
+								id: 'k8s_pod_cpu_usage--float64--Gauge--true',
 								isColumn: true,
 								isJSON: false,
 								key: k8sPodCpuUtilKey,
@@ -301,7 +298,7 @@ export const getPodMetricsQueryPayload = (
 						{
 							aggregateAttribute: {
 								dataType: DataTypes.Float64,
-								id: 'k8s_pod_cpu_utilization--float64--Gauge--true',
+								id: 'k8s_pod_cpu_usage--float64--Gauge--true',
 								isColumn: true,
 								isJSON: false,
 								key: k8sPodCpuUtilKey,
@@ -1570,7 +1567,7 @@ export const getPodMetricsQueryPayload = (
 						{
 							aggregateAttribute: {
 								dataType: DataTypes.Float64,
-								id: 'container_cpu_utilization--float64--Gauge--true',
+								id: 'container_cpu_usage--float64--Gauge--true',
 								isColumn: true,
 								isJSON: false,
 								key: containerCpuUtilKey,
@@ -1668,7 +1665,7 @@ export const getPodMetricsQueryPayload = (
 						{
 							aggregateAttribute: {
 								dataType: DataTypes.Float64,
-								id: 'container_cpu_utilization--float64--Gauge--true',
+								id: 'container_cpu_usage--float64--Gauge--true',
 								isColumn: true,
 								isJSON: false,
 								key: containerCpuUtilKey,

frontend/src/container/InfraMonitoringK8s/StatefulSets/K8sStatefulSetsList.tsx

@@ -191,6 +191,32 @@ function K8sStatefulSetsList({
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [minTime, maxTime, orderBy, selectedRowData, groupBy]);
 
+	const groupedByRowDataQueryKey = useMemo(() => {
+		if (selectedStatefulSetUID) {
+			return [
+				'statefulSetList',
+				JSON.stringify(queryFilters),
+				JSON.stringify(orderBy),
+				JSON.stringify(selectedRowData),
+			];
+		}
+		return [
+			'statefulSetList',
+			JSON.stringify(queryFilters),
+			JSON.stringify(orderBy),
+			JSON.stringify(selectedRowData),
+			String(minTime),
+			String(maxTime),
+		];
+	}, [
+		queryFilters,
+		orderBy,
+		selectedStatefulSetUID,
+		minTime,
+		maxTime,
+		selectedRowData,
+	]);
+
 	const {
 		data: groupedByRowData,
 		isFetching: isFetchingGroupedByRowData,
@@ -200,7 +226,7 @@ function K8sStatefulSetsList({
 	} = useGetK8sStatefulSetsList(
 		fetchGroupedByRowDataQuery as K8sStatefulSetsListPayload,
 		{
-			queryKey: ['statefulSetList', fetchGroupedByRowDataQuery],
+			queryKey: groupedByRowDataQueryKey,
 			enabled: !!fetchGroupedByRowDataQuery && !!selectedRowData,
 		},
 		undefined,
@@ -256,11 +282,44 @@ function K8sStatefulSetsList({
 		return groupedByRowData?.payload?.data?.records || [];
 	}, [groupedByRowData, selectedRowData]);
 
+	const queryKey = useMemo(() => {
+		if (selectedStatefulSetUID) {
+			return [
+				'statefulSetList',
+				String(pageSize),
+				String(currentPage),
+				JSON.stringify(queryFilters),
+				JSON.stringify(orderBy),
+				JSON.stringify(groupBy),
+			];
+		}
+		return [
+			'statefulSetList',
+			String(pageSize),
+			String(currentPage),
+			JSON.stringify(queryFilters),
+			JSON.stringify(orderBy),
+			JSON.stringify(groupBy),
+			String(minTime),
+			String(maxTime),
+		];
+	}, [
+		selectedStatefulSetUID,
+		pageSize,
+		currentPage,
+		queryFilters,
+		orderBy,
+		groupBy,
+		minTime,
+		maxTime,
+	]);
+
 	const { data, isFetching, isLoading, isError } = useGetK8sStatefulSetsList(
 		query as K8sStatefulSetsListPayload,
 		{
-			queryKey: ['statefulSetList', query],
+			queryKey,
 			enabled: !!query,
+			keepPreviousData: true,
 		},
 		undefined,
 		dotMetricsEnabled,
@@ -592,6 +651,9 @@ function K8sStatefulSetsList({
 		});
 	};
 
+	const showTableLoadingState =
+		(isFetching || isLoading) && formattedStatefulSetsData.length === 0;
+
 	return (
 		<div className="k8s-list">
 			<K8sHeader
@@ -604,6 +666,7 @@ function K8sStatefulSetsList({
 				handleGroupByChange={handleGroupByChange}
 				selectedGroupBy={groupBy}
 				entity={K8sCategory.STATEFULSETS}
+				showAutoRefresh={!selectedStatefulSetData}
 			/>
 			{isError && <Typography>{data?.error || 'Something went wrong'}</Typography>}
 
@@ -611,7 +674,7 @@ function K8sStatefulSetsList({
 				className={classNames('k8s-list-table', 'statefulSets-list-table', {
 					'expanded-statefulsets-list-table': isGroupedByAttribute,
 				})}
-				dataSource={isFetching || isLoading ? [] : formattedStatefulSetsData}
+				dataSource={showTableLoadingState ? [] : formattedStatefulSetsData}
 				columns={columns}
 				pagination={{
 					current: currentPage,
@@ -623,26 +686,25 @@ function K8sStatefulSetsList({
 				}}
 				scroll={{ x: true }}
 				loading={{
-					spinning: isFetching || isLoading,
+					spinning: showTableLoadingState,
 					indicator: <Spin indicator={<LoadingOutlined size={14} spin />} />,
 				}}
 				locale={{
-					emptyText:
-						isFetching || isLoading ? null : (
-							<div className="no-filtered-hosts-message-container">
-								<div className="no-filtered-hosts-message-content">
-									<img
-										src="/Icons/emptyState.svg"
-										alt="thinking-emoji"
-										className="empty-state-svg"
-									/>
+					emptyText: showTableLoadingState ? null : (
+						<div className="no-filtered-hosts-message-container">
+							<div className="no-filtered-hosts-message-content">
+								<img
+									src="/Icons/emptyState.svg"
+									alt="thinking-emoji"
+									className="empty-state-svg"
+								/>
 
-									<Typography.Text className="no-filtered-hosts-message">
-										This query had no results. Edit your query and try again!
-									</Typography.Text>
-								</div>
+								<Typography.Text className="no-filtered-hosts-message">
+									This query had no results. Edit your query and try again!
+								</Typography.Text>
 							</div>
-						),
+						</div>
+					),
 				}}
 				tableLayout="fixed"
 				onChange={handleTableChange}

frontend/src/container/InfraMonitoringK8s/StatefulSets/StatefulSetDetails/StatefulSetDetails.tsx

@@ -38,7 +38,7 @@ import {
 	ScrollText,
 	X,
 } from 'lucide-react';
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { useSearchParams } from 'react-router-dom-v5-compat';
 import { AppState } from 'store/reducers';
@@ -84,8 +84,12 @@ function StatefulSetDetails({
 		endTime: endMs,
 	}));
 
+	const lastSelectedInterval = useRef<Time | null>(null);
+
 	const [selectedInterval, setSelectedInterval] = useState<Time>(
-		selectedTime as Time,
+		lastSelectedInterval.current
+			? lastSelectedInterval.current
+			: (selectedTime as Time),
 	);
 
 	const [searchParams, setSearchParams] = useSearchParams();
@@ -211,10 +215,11 @@ function StatefulSetDetails({
 	}, [initialFilters, initialEventsFilters]);
 
 	useEffect(() => {
-		setSelectedInterval(selectedTime as Time);
+		const currentSelectedInterval = lastSelectedInterval.current || selectedTime;
+		setSelectedInterval(currentSelectedInterval as Time);
 
-		if (selectedTime !== 'custom') {
-			const { maxTime, minTime } = GetMinMax(selectedTime);
+		if (currentSelectedInterval !== 'custom') {
+			const { maxTime, minTime } = GetMinMax(currentSelectedInterval);
 
 			setModalTimeRange({
 				startTime: Math.floor(minTime / 1000000000),
@@ -242,6 +247,7 @@ function StatefulSetDetails({
 
 	const handleTimeChange = useCallback(
 		(interval: Time | CustomTimeType, dateTimeRange?: [number, number]): void => {
+			lastSelectedInterval.current = interval as Time;
 			setSelectedInterval(interval as Time);
 
 			if (interval === 'custom' && dateTimeRange) {
@@ -477,6 +483,7 @@ function StatefulSetDetails({
 	};
 
 	const handleClose = (): void => {
+		lastSelectedInterval.current = null;
 		setSelectedInterval(selectedTime as Time);
 
 		if (selectedTime !== 'custom') {

frontend/src/container/InfraMonitoringK8s/StatefulSets/StatefulSetDetails/constants.ts

@@ -49,8 +49,8 @@ export const getStatefulSetMetricsQueryPayload = (
 	const k8sPodNameKey = dotMetricsEnabled ? 'k8s.pod.name' : 'k8s_pod_name';
 
 	const k8sPodCpuUtilKey = dotMetricsEnabled
-		? 'k8s.pod.cpu.utilization'
-		: 'k8s_pod_cpu_utilization';
+		? 'k8s.pod.cpu.usage'
+		: 'k8s_pod_cpu_usage';
 	const k8sContainerCpuRequestKey = dotMetricsEnabled
 		? 'k8s.container.cpu_request'
 		: 'k8s_container_cpu_request';

frontend/src/container/InfraMonitoringK8s/Volumes/K8sVolumesList.tsx

@@ -574,6 +574,9 @@ function K8sVolumesList({
 		});
 	};
 
+	const showTableLoadingState =
+		(isFetching || isLoading) && formattedVolumesData.length === 0;
+
 	return (
 		<div className="k8s-list">
 			<K8sHeader
@@ -586,6 +589,7 @@ function K8sVolumesList({
 				handleGroupByChange={handleGroupByChange}
 				selectedGroupBy={groupBy}
 				entity={K8sCategory.NODES}
+				showAutoRefresh={!selectedVolumeData}
 			/>
 			{isError && <Typography>{data?.error || 'Something went wrong'}</Typography>}
 
@@ -593,7 +597,7 @@ function K8sVolumesList({
 				className={classNames('k8s-list-table', 'volumes-list-table', {
 					'expanded-volumes-list-table': isGroupedByAttribute,
 				})}
-				dataSource={isFetching || isLoading ? [] : formattedVolumesData}
+				dataSource={showTableLoadingState ? [] : formattedVolumesData}
 				columns={columns}
 				pagination={{
 					current: currentPage,
@@ -605,26 +609,25 @@ function K8sVolumesList({
 				}}
 				scroll={{ x: true }}
 				loading={{
-					spinning: isFetching || isLoading,
+					spinning: showTableLoadingState,
 					indicator: <Spin indicator={<LoadingOutlined size={14} spin />} />,
 				}}
 				locale={{
-					emptyText:
-						isFetching || isLoading ? null : (
-							<div className="no-filtered-hosts-message-container">
-								<div className="no-filtered-hosts-message-content">
-									<img
-										src="/Icons/emptyState.svg"
-										alt="thinking-emoji"
-										className="empty-state-svg"
-									/>
+					emptyText: showTableLoadingState ? null : (
+						<div className="no-filtered-hosts-message-container">
+							<div className="no-filtered-hosts-message-content">
+								<img
+									src="/Icons/emptyState.svg"
+									alt="thinking-emoji"
+									className="empty-state-svg"
+								/>
 
-									<Typography.Text className="no-filtered-hosts-message">
-										This query had no results. Edit your query and try again!
-									</Typography.Text>
-								</div>
+								<Typography.Text className="no-filtered-hosts-message">
+									This query had no results. Edit your query and try again!
+								</Typography.Text>
 							</div>
-						),
+						</div>
+					),
 				}}
 				tableLayout="fixed"
 				onChange={handleTableChange}

frontend/src/container/InfraMonitoringK8s/Volumes/VolumeDetails/VolumeDetails.tsx

@@ -13,7 +13,7 @@ import {
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import GetMinMax from 'lib/getMinMax';
 import { X } from 'lucide-react';
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { AppState } from 'store/reducers';
 import { GlobalReducer } from 'types/reducer/globalTime';
@@ -44,8 +44,12 @@ function VolumeDetails({
 		endTime: endMs,
 	}));
 
+	const lastSelectedInterval = useRef<Time | null>(null);
+
 	const [selectedInterval, setSelectedInterval] = useState<Time>(
-		selectedTime as Time,
+		lastSelectedInterval.current
+			? lastSelectedInterval.current
+			: (selectedTime as Time),
 	);
 
 	const isDarkMode = useIsDarkMode();
@@ -62,10 +66,11 @@ function VolumeDetails({
 	}, [volume]);
 
 	useEffect(() => {
-		setSelectedInterval(selectedTime as Time);
+		const currentSelectedInterval = lastSelectedInterval.current || selectedTime;
+		setSelectedInterval(currentSelectedInterval as Time);
 
-		if (selectedTime !== 'custom') {
-			const { maxTime, minTime } = GetMinMax(selectedTime);
+		if (currentSelectedInterval !== 'custom') {
+			const { maxTime, minTime } = GetMinMax(currentSelectedInterval);
 
 			setModalTimeRange({
 				startTime: Math.floor(minTime / 1000000000),
@@ -76,6 +81,7 @@ function VolumeDetails({
 
 	const handleTimeChange = useCallback(
 		(interval: Time | CustomTimeType, dateTimeRange?: [number, number]): void => {
+			lastSelectedInterval.current = interval as Time;
 			setSelectedInterval(interval as Time);
 
 			if (interval === 'custom' && dateTimeRange) {
@@ -104,6 +110,7 @@ function VolumeDetails({
 	);
 
 	const handleClose = (): void => {
+		lastSelectedInterval.current = null;
 		setSelectedInterval(selectedTime as Time);
 
 		if (selectedTime !== 'custom') {

frontend/src/container/InfraMonitoringK8s/constants.ts

@@ -38,28 +38,28 @@ export const K8sCategories = {
 
 export const underscoreMap = {
 	[K8sCategory.HOSTS]: 'system_cpu_load_average_15m',
-	[K8sCategory.PODS]: 'k8s_pod_cpu_utilization',
-	[K8sCategory.NODES]: 'k8s_node_cpu_utilization',
-	[K8sCategory.NAMESPACES]: 'k8s_pod_cpu_utilization',
-	[K8sCategory.CLUSTERS]: 'k8s_node_cpu_utilization',
-	[K8sCategory.DEPLOYMENTS]: 'k8s_pod_cpu_utilization',
-	[K8sCategory.STATEFULSETS]: 'k8s_pod_cpu_utilization',
-	[K8sCategory.DAEMONSETS]: 'k8s_pod_cpu_utilization',
-	[K8sCategory.CONTAINERS]: 'k8s_pod_cpu_utilization',
+	[K8sCategory.PODS]: 'k8s_pod_cpu_usage',
+	[K8sCategory.NODES]: 'k8s_node_cpu_usage',
+	[K8sCategory.NAMESPACES]: 'k8s_pod_cpu_usage',
+	[K8sCategory.CLUSTERS]: 'k8s_node_cpu_usage',
+	[K8sCategory.DEPLOYMENTS]: 'k8s_pod_cpu_usage',
+	[K8sCategory.STATEFULSETS]: 'k8s_pod_cpu_usage',
+	[K8sCategory.DAEMONSETS]: 'k8s_pod_cpu_usage',
+	[K8sCategory.CONTAINERS]: 'k8s_pod_cpu_usage',
 	[K8sCategory.JOBS]: 'k8s_job_desired_successful_pods',
 	[K8sCategory.VOLUMES]: 'k8s_volume_capacity',
 };
 
 export const dotMap = {
 	[K8sCategory.HOSTS]: 'system.cpu.load_average.15m',
-	[K8sCategory.PODS]: 'k8s.pod.cpu.utilization',
-	[K8sCategory.NODES]: 'k8s.node.cpu.utilization',
-	[K8sCategory.NAMESPACES]: 'k8s.pod.cpu.utilization',
-	[K8sCategory.CLUSTERS]: 'k8s.node.cpu.utilization',
-	[K8sCategory.DEPLOYMENTS]: 'k8s.pod.cpu.utilization',
-	[K8sCategory.STATEFULSETS]: 'k8s.pod.cpu.utilization',
-	[K8sCategory.DAEMONSETS]: 'k8s.pod.cpu.utilization',
-	[K8sCategory.CONTAINERS]: 'k8s.pod.cpu.utilization',
+	[K8sCategory.PODS]: 'k8s.pod.cpu.usage',
+	[K8sCategory.NODES]: 'k8s.node.cpu.usage',
+	[K8sCategory.NAMESPACES]: 'k8s.pod.cpu.usage',
+	[K8sCategory.CLUSTERS]: 'k8s.node.cpu.usage',
+	[K8sCategory.DEPLOYMENTS]: 'k8s.pod.cpu.usage',
+	[K8sCategory.STATEFULSETS]: 'k8s.pod.cpu.usage',
+	[K8sCategory.DAEMONSETS]: 'k8s.pod.cpu.usage',
+	[K8sCategory.CONTAINERS]: 'k8s.pod.cpu.usage',
 	[K8sCategory.JOBS]: 'k8s.job.desired_successful_pods',
 	[K8sCategory.VOLUMES]: 'k8s.volume.capacity',
 };
@@ -96,8 +96,8 @@ export function GetPodsQuickFiltersConfig(
 
 	// Define aggregate attribute (metric) name
 	const cpuUtilizationMetric = dotMetricsEnabled
-		? 'k8s.pod.cpu.utilization'
-		: 'k8s_pod_cpu_utilization';
+		? 'k8s.pod.cpu.usage'
+		: 'k8s_pod_cpu_usage';
 
 	return [
 		{
@@ -252,8 +252,8 @@ export function GetNodesQuickFiltersConfig(
 
 	// Define aggregate metric name for node CPU utilization
 	const cpuUtilMetric = dotMetricsEnabled
-		? 'k8s.node.cpu.utilization'
-		: 'k8s_node_cpu_utilization';
+		? 'k8s.node.cpu.usage'
+		: 'k8s_node_cpu_usage';
 	const environmentKey = dotMetricsEnabled
 		? 'deployment.environment'
 		: 'deployment_environment';
@@ -314,8 +314,8 @@ export function GetNamespaceQuickFiltersConfig(
 		: 'k8s_namespace_name';
 	const clusterKey = dotMetricsEnabled ? 'k8s.cluster.name' : 'k8s_cluster_name';
 	const cpuUtilMetric = dotMetricsEnabled
-		? 'k8s.pod.cpu.utilization'
-		: 'k8s_pod_cpu_utilization';
+		? 'k8s.pod.cpu.usage'
+		: 'k8s_pod_cpu_usage';
 	const environmentKey = dotMetricsEnabled
 		? 'deployment.environment'
 		: 'deployment_environment';
@@ -373,8 +373,8 @@ export function GetClustersQuickFiltersConfig(
 ): IQuickFiltersConfig[] {
 	const clusterKey = dotMetricsEnabled ? 'k8s.cluster.name' : 'k8s_cluster_name';
 	const cpuUtilMetric = dotMetricsEnabled
-		? 'k8s.node.cpu.utilization'
-		: 'k8s_node_cpu_utilization';
+		? 'k8s.node.cpu.usage'
+		: 'k8s_node_cpu_usage';
 	const environmentKey = dotMetricsEnabled
 		? 'deployment.environment'
 		: 'deployment_environment';
@@ -541,9 +541,7 @@ export function GetDeploymentsQuickFiltersConfig(
 		? 'k8s.namespace.name'
 		: 'k8s_namespace_name';
 	const clusterKey = dotMetricsEnabled ? 'k8s.cluster.name' : 'k8s_cluster_name';
-	const metric = dotMetricsEnabled
-		? 'k8s.pod.cpu.utilization'
-		: 'k8s_pod_cpu_utilization';
+	const metric = dotMetricsEnabled ? 'k8s.pod.cpu.usage' : 'k8s_pod_cpu_usage';
 	const environmentKey = dotMetricsEnabled
 		? 'deployment.environment'
 		: 'deployment_environment';
@@ -622,9 +620,7 @@ export function GetStatefulsetsQuickFiltersConfig(
 		? 'k8s.namespace.name'
 		: 'k8s_namespace_name';
 	const clusterKey = dotMetricsEnabled ? 'k8s.cluster.name' : 'k8s_cluster_name';
-	const metric = dotMetricsEnabled
-		? 'k8s.pod.cpu.utilization'
-		: 'k8s_pod_cpu_utilization';
+	const metric = dotMetricsEnabled ? 'k8s.pod.cpu.usage' : 'k8s_pod_cpu_usage';
 	const environmentKey = dotMetricsEnabled
 		? 'deployment.environment'
 		: 'deployment_environment';
@@ -704,8 +700,8 @@ export function GetDaemonsetsQuickFiltersConfig(
 		: 'k8s_namespace_name';
 	const clusterKey = dotMetricsEnabled ? 'k8s.cluster.name' : 'k8s_cluster_name';
 	const metricName = dotMetricsEnabled
-		? 'k8s.pod.cpu.utilization'
-		: 'k8s_pod_cpu_utilization';
+		? 'k8s.pod.cpu.usage'
+		: 'k8s_pod_cpu_usage';
 	const environmentKey = dotMetricsEnabled
 		? 'deployment.environment'
 		: 'deployment_environment';
@@ -781,8 +777,8 @@ export function GetJobsQuickFiltersConfig(
 		: 'k8s_namespace_name';
 	const clusterKey = dotMetricsEnabled ? 'k8s.cluster.name' : 'k8s_cluster_name';
 	const metricName = dotMetricsEnabled
-		? 'k8s.pod.cpu.utilization'
-		: 'k8s_pod_cpu_utilization';
+		? 'k8s.pod.cpu.usage'
+		: 'k8s_pod_cpu_usage';
 	const environmentKey = dotMetricsEnabled
 		? 'deployment.environment'
 		: 'deployment_environment';

frontend/src/container/LogDetailedView/BodyTitleRenderer.styles.ts

@@ -1,6 +1,9 @@
 import styled from 'styled-components';
 
 export const TitleWrapper = styled.span`
+	user-select: text !important;
+	cursor: text;
+
 	.hover-reveal {
 		visibility: hidden;
 	}

frontend/src/container/LogDetailedView/BodyTitleRenderer.tsx

@@ -71,8 +71,13 @@ function BodyTitleRenderer({
 		onClick: onClickHandler,
 	};
 
+	const handleTextSelection = (e: React.MouseEvent): void => {
+		// Prevent tree node click when user is trying to select text
+		e.stopPropagation();
+	};
+
 	return (
-		<TitleWrapper>
+		<TitleWrapper onMouseDown={handleTextSelection}>
 			<Dropdown menu={menu} trigger={['click']}>
 				<SettingOutlined style={{ marginRight: 8 }} className="hover-reveal" />
 			</Dropdown>

frontend/src/container/LogDetailedView/ContextView/ContextLogRenderer.tsx

@@ -32,7 +32,7 @@ function ContextLogRenderer({
 	const [afterLogPage, setAfterLogPage] = useState<number>(1);
 	const [logs, setLogs] = useState<ILog[]>([log]);
 
-	const { initialDataSource, stagedQuery } = useQueryBuilder();
+	const { stagedQuery } = useQueryBuilder();
 
 	const listQuery = useMemo(() => {
 		if (!stagedQuery || stagedQuery.builder.queryData.length < 1) return null;
@@ -42,7 +42,7 @@ function ContextLogRenderer({
 
 	const { options } = useOptionsMenu({
 		storageKey: LOCALSTORAGE.LOGS_LIST_OPTIONS,
-		dataSource: initialDataSource || DataSource.METRICS,
+		dataSource: DataSource.LOGS,
 		aggregateOperator: listQuery?.aggregateOperator || StringOperators.NOOP,
 	});
 

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

@@ -17,8 +17,8 @@ export const getPodQueryPayload = (
 		: 'k8s_cluster_name';
 	const k8sPodNameKey = dotMetricsEnabled ? 'k8s.pod.name' : 'k8s_pod_name';
 	const containerCpuUtilKey = dotMetricsEnabled
-		? 'container.cpu.utilization'
-		: 'container_cpu_utilization';
+		? 'container.cpu.usage'
+		: 'container_cpu_usage';
 	const containerMemUsageKey = dotMetricsEnabled
 		? 'container.memory.usage'
 		: 'container_memory_usage';
@@ -63,7 +63,7 @@ export const getPodQueryPayload = (
 						{
 							aggregateAttribute: {
 								dataType: DataTypes.Float64,
-								id: 'container_cpu_utilization--float64--Gauge--true',
+								id: 'container_cpu_usage--float64--Gauge--true',
 								isColumn: true,
 								isJSON: false,
 								key: containerCpuUtilKey,
@@ -231,7 +231,7 @@ export const getPodQueryPayload = (
 						{
 							aggregateAttribute: {
 								dataType: DataTypes.Float64,
-								id: 'container_cpu_utilization--float64--Gauge--true',
+								id: 'container_cpu_usage--float64--Gauge--true',
 								isColumn: true,
 								isJSON: false,
 								key: containerCpuUtilKey,
@@ -385,7 +385,7 @@ export const getPodQueryPayload = (
 						{
 							aggregateAttribute: {
 								dataType: DataTypes.Float64,
-								id: 'container_cpu_utilization--float64--Gauge--true',
+								id: 'container_cpu_usage--float64--Gauge--true',
 								isColumn: true,
 								isJSON: false,
 								key: containerCpuUtilKey,

frontend/src/container/LogDetailedView/TableView.tsx

@@ -32,7 +32,7 @@ import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
 
 import { ActionItemProps } from './ActionItem';
 import FieldRenderer from './FieldRenderer';
-import { TableViewActions } from './TableView/TableViewActions';
+import TableViewActions from './TableView/TableViewActions';
 import {
 	filterKeyForField,
 	findKeyPath,

frontend/src/container/LogDetailedView/TableView/TableViewActions.styles.scss

@@ -11,6 +11,18 @@
 	}
 }
 
+.selectable-tree {
+	.ant-tree-node-content-wrapper {
+		user-select: text !important;
+		cursor: text !important;
+	}
+
+	.ant-tree-title {
+		user-select: text !important;
+		cursor: text !important;
+	}
+}
+
 .table-view-actions-content {
 	.ant-popover-inner {
 		border-radius: 4px;

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

@@ -1,3 +1,4 @@
+/* eslint-disable sonarjs/no-duplicate-string */
 import './TableViewActions.styles.scss';
 
 import { Color } from '@signozhq/design-tokens';
@@ -11,10 +12,9 @@ import { OPERATORS } from 'constants/queryBuilder';
 import ROUTES from 'constants/routes';
 import { RESTRICTED_SELECTED_FIELDS } from 'container/LogsFilters/config';
 import dompurify from 'dompurify';
-import { isEmpty } from 'lodash-es';
 import { ArrowDownToDot, ArrowUpFromDot, Ellipsis } from 'lucide-react';
 import { useTimezone } from 'providers/Timezone';
-import React, { useMemo, useState } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import { useLocation } from 'react-router-dom';
 import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { FORBID_DOM_PURIFY_TAGS } from 'utils/app';
@@ -24,12 +24,11 @@ import {
 	escapeHtml,
 	filterKeyForField,
 	getFieldAttributes,
-	jsonToDataNodes,
 	parseFieldValue,
-	recursiveParseJSON,
 	removeEscapeCharacters,
 	unescapeString,
 } from '../utils';
+import useAsyncJSONProcessing from './useAsyncJSONProcessing';
 
 interface ITableViewActionsProps {
 	fieldData: Record<string, string>;
@@ -52,7 +51,69 @@ interface ITableViewActionsProps {
 
 const convert = new Convert();
 
-export function TableViewActions(
+// Memoized Tree Component
+const MemoizedTree = React.memo<{ treeData: any[] }>(({ treeData }) => (
+	<Tree
+		defaultExpandAll
+		showLine
+		treeData={treeData}
+		className="selectable-tree"
+	/>
+));
+
+MemoizedTree.displayName = 'MemoizedTree';
+
+// Body Content Component
+const BodyContent: React.FC<{
+	fieldData: Record<string, string>;
+	record: DataType;
+	bodyHtml: { __html: string };
+}> = React.memo(({ fieldData, record, bodyHtml }) => {
+	const { isLoading, treeData, error } = useAsyncJSONProcessing(
+		fieldData.value,
+		record.field === 'body',
+	);
+
+	// Show JSON tree if available, otherwise show HTML content
+	if (record.field === 'body' && treeData) {
+		return <MemoizedTree treeData={treeData} />;
+	}
+
+	if (record.field === 'body' && isLoading) {
+		return (
+			<div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+				<Spin size="small" />
+				<span style={{ color: Color.BG_SIENNA_400 }}>Processing JSON...</span>
+			</div>
+		);
+	}
+
+	if (record.field === 'body' && error) {
+		return (
+			<span
+				style={{ color: Color.BG_SIENNA_400, whiteSpace: 'pre-wrap', tabSize: 4 }}
+			>
+				Error parsing Body JSON
+			</span>
+		);
+	}
+
+	if (record.field === 'body') {
+		return (
+			<span
+				style={{ color: Color.BG_SIENNA_400, whiteSpace: 'pre-wrap', tabSize: 4 }}
+			>
+				<span dangerouslySetInnerHTML={bodyHtml} />
+			</span>
+		);
+	}
+
+	return null;
+});
+
+BodyContent.displayName = 'BodyContent';
+
+export default function TableViewActions(
 	props: ITableViewActionsProps,
 ): React.ReactElement {
 	const {
@@ -78,44 +139,42 @@ export function TableViewActions(
 
 	const { formatTimezoneAdjustedTimestamp } = useTimezone();
 
-	if (record.field === 'body') {
-		const parsedBody = recursiveParseJSON(fieldData.value);
-		if (!isEmpty(parsedBody)) {
-			return (
-				<Tree defaultExpandAll showLine treeData={jsonToDataNodes(parsedBody)} />
-			);
-		}
-	}
-	const bodyHtml =
-		record.field === 'body'
-			? {
-					__html: convert.toHtml(
-						dompurify.sanitize(unescapeString(escapeHtml(record.value)), {
-							FORBID_TAGS: [...FORBID_DOM_PURIFY_TAGS],
-						}),
-					),
-			  }
-			: { __html: '' };
+	// Memoize bodyHtml computation
+	const bodyHtml = useMemo(() => {
+		if (record.field !== 'body') return { __html: '' };
+
+		return {
+			__html: convert.toHtml(
+				dompurify.sanitize(unescapeString(escapeHtml(record.value)), {
+					FORBID_TAGS: [...FORBID_DOM_PURIFY_TAGS],
+				}),
+			),
+		};
+	}, [record.field, record.value]);
 
 	const fieldFilterKey = filterKeyForField(fieldData.field);
-	let textToCopy = fieldData.value;
 
-	// remove starting and ending quotes from the value
-	try {
-		textToCopy = textToCopy.replace(/^"|"$/g, '');
-	} catch (error) {
-		console.error(
-			'Failed to remove starting and ending quotes from the value',
-			error,
-		);
-	}
+	// Memoize textToCopy computation
+	const textToCopy = useMemo(() => {
+		let text = fieldData.value;
+		try {
+			text = text.replace(/^"|"$/g, '');
+		} catch (error) {
+			console.error(
+				'Failed to remove starting and ending quotes from the value',
+				error,
+			);
+		}
+		return text;
+	}, [fieldData.value]);
 
-	let cleanTimestamp: string;
-	if (record.field === 'timestamp') {
-		cleanTimestamp = fieldData.value.replace(/^["']|["']$/g, '');
-	}
+	// Memoize cleanTimestamp computation
+	const cleanTimestamp = useMemo(() => {
+		if (record.field !== 'timestamp') return '';
+		return fieldData.value.replace(/^["']|["']$/g, '');
+	}, [record.field, fieldData.value]);
 
-	const renderFieldContent = (): JSX.Element => {
+	const renderFieldContent = useCallback((): JSX.Element => {
 		const commonStyles: React.CSSProperties = {
 			color: Color.BG_SIENNA_400,
 			whiteSpace: 'pre-wrap',
@@ -124,7 +183,9 @@ export function TableViewActions(
 
 		switch (record.field) {
 			case 'body':
-				return <span style={commonStyles} dangerouslySetInnerHTML={bodyHtml} />;
+				return (
+					<BodyContent fieldData={fieldData} record={record} bodyHtml={bodyHtml} />
+				);
 
 			case 'timestamp':
 				return (
@@ -141,7 +202,93 @@ export function TableViewActions(
 					<span style={commonStyles}>{removeEscapeCharacters(fieldData.value)}</span>
 				);
 		}
-	};
+	}, [
+		record,
+		fieldData,
+		bodyHtml,
+		formatTimezoneAdjustedTimestamp,
+		cleanTimestamp,
+	]);
+
+	// Early return for body field with async processing
+	if (record.field === 'body') {
+		return (
+			<div className={cx('value-field', isOpen ? 'open-popover' : '')}>
+				<CopyClipboardHOC entityKey={fieldFilterKey} textToCopy={textToCopy}>
+					<BodyContent fieldData={fieldData} record={record} bodyHtml={bodyHtml} />
+				</CopyClipboardHOC>
+				{!isListViewPanel && !RESTRICTED_SELECTED_FIELDS.includes(fieldFilterKey) && (
+					<span className="action-btn">
+						<Tooltip title="Filter for value">
+							<Button
+								className="filter-btn periscope-btn"
+								icon={
+									isfilterInLoading ? (
+										<Spin size="small" />
+									) : (
+										<ArrowDownToDot size={14} style={{ transform: 'rotate(90deg)' }} />
+									)
+								}
+								onClick={onClickHandler(
+									OPERATORS['='],
+									fieldFilterKey,
+									parseFieldValue(fieldData.value),
+									dataType,
+								)}
+							/>
+						</Tooltip>
+						<Tooltip title="Filter out value">
+							<Button
+								className="filter-btn periscope-btn"
+								icon={
+									isfilterOutLoading ? (
+										<Spin size="small" />
+									) : (
+										<ArrowUpFromDot size={14} style={{ transform: 'rotate(90deg)' }} />
+									)
+								}
+								onClick={onClickHandler(
+									OPERATORS['!='],
+									fieldFilterKey,
+									parseFieldValue(fieldData.value),
+									dataType,
+								)}
+							/>
+						</Tooltip>
+						{!isOldLogsExplorerOrLiveLogsPage && (
+							<Popover
+								open={isOpen}
+								onOpenChange={setIsOpen}
+								arrow={false}
+								content={
+									<div>
+										<Button
+											className="group-by-clause"
+											type="text"
+											icon={<GroupByIcon />}
+											onClick={(): Promise<void> | void =>
+												onGroupByAttribute?.(fieldFilterKey)
+											}
+										>
+											Group By Attribute
+										</Button>
+									</div>
+								}
+								rootClassName="table-view-actions-content"
+								trigger="hover"
+								placement="bottomLeft"
+							>
+								<Button
+									icon={<Ellipsis size={14} />}
+									className="filter-btn periscope-btn"
+								/>
+							</Popover>
+						)}
+					</span>
+				)}
+			</div>
+		);
+	}
 
 	return (
 		<div className={cx('value-field', isOpen ? 'open-popover' : '')}>

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

@@ -1,7 +1,7 @@
 import { render, screen } from '@testing-library/react';
 import { RESTRICTED_SELECTED_FIELDS } from 'container/LogsFilters/config';
 
-import { TableViewActions } from '../TableViewActions';
+import TableViewActions from '../TableViewActions';
 
 // Mock the components and hooks
 jest.mock('components/Logs/CopyClipboardHOC', () => ({

frontend/src/container/LogDetailedView/TableView/useAsyncJSONProcessing.ts

@@ -0,0 +1,102 @@
+/* eslint-disable sonarjs/no-duplicate-string */
+import { isEmpty } from 'lodash-es';
+import { useEffect, useRef, useState } from 'react';
+
+import { jsonToDataNodes, recursiveParseJSON } from '../utils';
+
+// Hook for async JSON processing
+const useAsyncJSONProcessing = (
+	value: string,
+	shouldProcess: boolean,
+): {
+	isLoading: boolean;
+	treeData: any[] | null;
+	error: string | null;
+} => {
+	const [jsonState, setJsonState] = useState<{
+		isLoading: boolean;
+		treeData: any[] | null;
+		error: string | null;
+	}>({
+		isLoading: false,
+		treeData: null,
+		error: null,
+	});
+
+	const processingRef = useRef<boolean>(false);
+
+	// eslint-disable-next-line sonarjs/cognitive-complexity
+	useEffect((): (() => void) => {
+		if (!shouldProcess || processingRef.current) {
+			return (): void => {};
+		}
+
+		processingRef.current = true;
+		setJsonState({ isLoading: true, treeData: null, error: null });
+
+		// Option 1: Using setTimeout for non-blocking processing
+		const processAsync = (): void => {
+			setTimeout(() => {
+				try {
+					const parsedBody = recursiveParseJSON(value);
+					if (!isEmpty(parsedBody)) {
+						const treeData = jsonToDataNodes(parsedBody);
+						setJsonState({ isLoading: false, treeData, error: null });
+					} else {
+						setJsonState({ isLoading: false, treeData: null, error: null });
+					}
+				} catch (error) {
+					setJsonState({
+						isLoading: false,
+						treeData: null,
+						error: error instanceof Error ? error.message : 'Parsing failed',
+					});
+				} finally {
+					processingRef.current = false;
+				}
+			}, 0);
+		};
+
+		// Option 2: Using requestIdleCallback for better performance
+		const processWithIdleCallback = (): void => {
+			if ('requestIdleCallback' in window) {
+				requestIdleCallback(
+					// eslint-disable-next-line sonarjs/no-identical-functions
+					(): void => {
+						try {
+							const parsedBody = recursiveParseJSON(value);
+							if (!isEmpty(parsedBody)) {
+								const treeData = jsonToDataNodes(parsedBody);
+								setJsonState({ isLoading: false, treeData, error: null });
+							} else {
+								setJsonState({ isLoading: false, treeData: null, error: null });
+							}
+						} catch (error) {
+							setJsonState({
+								isLoading: false,
+								treeData: null,
+								error: error instanceof Error ? error.message : 'Parsing failed',
+							});
+						} finally {
+							processingRef.current = false;
+						}
+					},
+					{ timeout: 1000 },
+				);
+			} else {
+				processAsync();
+			}
+		};
+
+		processWithIdleCallback();
+
+		// Cleanup function
+		return (): void => {
+			processingRef.current = false;
+		};
+	}, [value, shouldProcess]);
+
+	return jsonState;
+};
+
+export default useAsyncJSONProcessing;

frontend/src/container/LogsExplorerList/__tests__/LogsExplorerList.test.tsx

@@ -0,0 +1,221 @@
+import { PANEL_TYPES } from 'constants/queryBuilder';
+import ROUTES from 'constants/routes';
+import LogsExplorerViews from 'container/LogsExplorerViews';
+import { mockQueryBuilderContextValue } from 'container/LogsExplorerViews/tests/mock';
+import { useGetExplorerQueryRange } from 'hooks/queryBuilder/useGetExplorerQueryRange';
+import { logsQueryRangeEmptyResponse } from 'mocks-server/__mockdata__/logs_query_range';
+import { server } from 'mocks-server/server';
+import { rest } from 'msw';
+import { SELECTED_VIEWS } from 'pages/LogsExplorer/utils';
+import { PreferenceContextProvider } from 'providers/preferences/context/PreferenceContextProvider';
+import { QueryBuilderContext } from 'providers/QueryBuilder';
+import { render, screen } from 'tests/test-utils';
+
+const queryRangeURL = 'http://localhost/api/v3/query_range';
+
+const logsQueryServerRequest = ({
+	response = logsQueryRangeEmptyResponse,
+}: {
+	response?: any;
+}): void =>
+	server.use(
+		rest.post(queryRangeURL, (req, res, ctx) =>
+			res(ctx.status(200), ctx.json(response)),
+		),
+	);
+
+jest.mock('react-router-dom', () => ({
+	...jest.requireActual('react-router-dom'),
+	useLocation: (): { pathname: string } => ({
+		pathname: `${ROUTES.LOGS_EXPLORER}`,
+	}),
+}));
+
+jest.mock('providers/preferences/sync/usePreferenceSync', () => ({
+	usePreferenceSync: (): any => ({
+		preferences: {
+			columns: [],
+			formatting: {
+				maxLines: 2,
+				format: 'table',
+				fontSize: 'small',
+				version: 1,
+			},
+		},
+		loading: false,
+		error: null,
+		updateColumns: jest.fn(),
+		updateFormatting: jest.fn(),
+	}),
+}));
+
+jest.mock(
+	'container/TimeSeriesView/TimeSeriesView',
+	() =>
+		// eslint-disable-next-line func-names, @typescript-eslint/explicit-function-return-type, react/display-name
+		function () {
+			return <div>Time Series Chart</div>;
+		},
+);
+
+jest.mock(
+	'container/LogsExplorerChart',
+	() =>
+		// eslint-disable-next-line func-names, @typescript-eslint/explicit-function-return-type, react/display-name
+		function () {
+			return <div>Histogram Chart</div>;
+		},
+);
+
+jest.mock('hooks/useSafeNavigate', () => ({
+	useSafeNavigate: (): any => ({
+		safeNavigate: jest.fn(),
+	}),
+}));
+
+jest.mock('uplot', () => {
+	const paths = {
+		spline: jest.fn(),
+		bars: jest.fn(),
+	};
+	const uplotMock = jest.fn(() => ({
+		paths,
+	}));
+	return {
+		paths,
+		default: uplotMock,
+	};
+});
+
+jest.mock('hooks/queryBuilder/useGetExplorerQueryRange', () => ({
+	__esModule: true,
+	useGetExplorerQueryRange: jest.fn(),
+}));
+
+describe('LogsExplorerList - empty states', () => {
+	beforeEach(() => {
+		(useGetExplorerQueryRange as jest.Mock).mockReturnValue({
+			data: { payload: logsQueryRangeEmptyResponse },
+		});
+		logsQueryServerRequest({});
+	});
+
+	it('should display custom empty state when navigating from trace to logs with no results', async () => {
+		const mockTraceToLogsContextValue = {
+			...mockQueryBuilderContextValue,
+			panelType: PANEL_TYPES.LIST,
+			stagedQuery: {
+				...mockQueryBuilderContextValue.stagedQuery,
+				builder: {
+					...mockQueryBuilderContextValue.stagedQuery.builder,
+					queryData: [
+						{
+							...mockQueryBuilderContextValue.stagedQuery.builder.queryData[0],
+							filters: {
+								items: [
+									{
+										id: 'trace-filter',
+										key: {
+											key: 'trace_id',
+											type: '',
+											dataType: 'string',
+											isColumn: true,
+										},
+										op: '=',
+										value: 'test-trace-id',
+									},
+								],
+								op: 'AND',
+							},
+						},
+					],
+				},
+			},
+		};
+
+		render(
+			<QueryBuilderContext.Provider value={mockTraceToLogsContextValue as any}>
+				<PreferenceContextProvider>
+					<LogsExplorerViews
+						selectedView={SELECTED_VIEWS.SEARCH}
+						showFrequencyChart
+						setIsLoadingQueries={(): void => {}}
+						listQueryKeyRef={{ current: {} }}
+						chartQueryKeyRef={{ current: {} }}
+					/>
+				</PreferenceContextProvider>
+			</QueryBuilderContext.Provider>,
+		);
+
+		// Check for custom empty state message
+		expect(screen.getByText('No logs found for this trace.')).toBeInTheDocument();
+		expect(screen.getByText('This could be because :')).toBeInTheDocument();
+		expect(
+			screen.getByText('Logs are not linked to Traces.'),
+		).toBeInTheDocument();
+		expect(
+			screen.getByText('Logs are not being sent to SigNoz.'),
+		).toBeInTheDocument();
+		expect(
+			screen.getByText('No logs are associated with this particular trace/span.'),
+		).toBeInTheDocument();
+
+		// Check for documentation links
+		expect(screen.getByText('Sending logs to SigNoz')).toBeInTheDocument();
+		expect(screen.getByText('Correlate traces and logs')).toBeInTheDocument();
+	});
+
+	it('should display empty state when filters are applied and no results are found', async () => {
+		const mockTraceToLogsContextValue = {
+			...mockQueryBuilderContextValue,
+			panelType: PANEL_TYPES.LIST,
+			stagedQuery: {
+				...mockQueryBuilderContextValue.stagedQuery,
+				builder: {
+					...mockQueryBuilderContextValue.stagedQuery.builder,
+					queryData: [
+						{
+							...mockQueryBuilderContextValue.stagedQuery.builder.queryData[0],
+							filters: {
+								items: [
+									{
+										id: 'service-filter',
+										key: {
+											key: 'service.name',
+											type: '',
+											dataType: 'string',
+											isColumn: true,
+										},
+										op: '=',
+										value: 'test-service-name',
+									},
+								],
+								op: 'AND',
+							},
+						},
+					],
+				},
+			},
+		};
+
+		render(
+			<QueryBuilderContext.Provider value={mockTraceToLogsContextValue as any}>
+				<PreferenceContextProvider>
+					<LogsExplorerViews
+						selectedView={SELECTED_VIEWS.SEARCH}
+						showFrequencyChart
+						setIsLoadingQueries={(): void => {}}
+						listQueryKeyRef={{ current: {} }}
+						chartQueryKeyRef={{ current: {} }}
+					/>
+				</PreferenceContextProvider>
+			</QueryBuilderContext.Provider>,
+		);
+
+		// Check for custom empty state message
+		expect(screen.getByText(/This query had no results./i)).toBeInTheDocument();
+		expect(
+			screen.getByText(/Edit your query and try again!/i),
+		).toBeInTheDocument();
+	});
+});

frontend/src/container/LogsExplorerList/index.tsx

@@ -29,7 +29,11 @@ import NoLogs from '../NoLogs/NoLogs';
 import InfinityTableView from './InfinityTableView';
 import { LogsExplorerListProps } from './LogsExplorerList.interfaces';
 import { InfinityWrapperStyled } from './styles';
-import { convertKeysToColumnFields } from './utils';
+import {
+	convertKeysToColumnFields,
+	getEmptyLogsListConfig,
+	isTraceToLogsQuery,
+} from './utils';
 
 function Footer(): JSX.Element {
 	return <Spinner height={20} tip="Getting Logs" />;
@@ -44,7 +48,6 @@ function LogsExplorerList({
 	isFilterApplied,
 }: LogsExplorerListProps): JSX.Element {
 	const ref = useRef<VirtuosoHandle>(null);
-	const { initialDataSource } = useQueryBuilder();
 
 	const { activeLogId } = useCopyLogLink();
 
@@ -58,11 +61,17 @@ function LogsExplorerList({
 
 	const { options } = useOptionsMenu({
 		storageKey: LOCALSTORAGE.LOGS_LIST_OPTIONS,
-		dataSource: initialDataSource || DataSource.METRICS,
+		dataSource: DataSource.LOGS,
 		aggregateOperator:
 			currentStagedQueryData?.aggregateOperator || StringOperators.NOOP,
 	});
 
+	const {
+		currentQuery,
+		lastUsedQuery,
+		redirectWithQueryBuilderData,
+	} = useQueryBuilder();
+
 	const activeLogIndex = useMemo(
 		() => logs.findIndex(({ id }) => id === activeLogId),
 		[logs, activeLogId],
@@ -186,6 +195,44 @@ function LogsExplorerList({
 		selectedFields,
 	]);
 
+	const isTraceToLogsNavigation = useMemo(() => {
+		if (!currentStagedQueryData) return false;
+		return isTraceToLogsQuery(currentStagedQueryData);
+	}, [currentStagedQueryData]);
+
+	const handleClearFilters = useCallback((): void => {
+		const queryIndex = lastUsedQuery ?? 0;
+		const updatedQuery = currentQuery?.builder.queryData?.[queryIndex];
+
+		if (!updatedQuery) return;
+
+		if (updatedQuery?.filters?.items) {
+			updatedQuery.filters.items = [];
+		}
+
+		const preparedQuery = {
+			...currentQuery,
+			builder: {
+				...currentQuery.builder,
+				queryData: currentQuery.builder.queryData.map((item, idx: number) => ({
+					...item,
+					filters: {
+						...item.filters,
+						items: idx === queryIndex ? [] : [...(item.filters?.items || [])],
+					},
+				})),
+			},
+		};
+
+		redirectWithQueryBuilderData(preparedQuery);
+	}, [currentQuery, lastUsedQuery, redirectWithQueryBuilderData]);
+
+	const getEmptyStateMessage = useMemo(() => {
+		if (!isTraceToLogsNavigation) return;
+
+		return getEmptyLogsListConfig(handleClearFilters);
+	}, [isTraceToLogsNavigation, handleClearFilters]);
+
 	return (
 		<div className="logs-list-view-container">
 			{(isLoading || (isFetching && logs.length === 0)) && <LogsLoading />}
@@ -201,7 +248,11 @@ function LogsExplorerList({
 				logs.length === 0 &&
 				!isError &&
 				isFilterApplied && (
-					<EmptyLogsSearch dataSource={DataSource.LOGS} panelType="LIST" />
+					<EmptyLogsSearch
+						dataSource={DataSource.LOGS}
+						panelType="LIST"
+						customMessage={getEmptyStateMessage}
+					/>
 				)}
 
 			{isError && !isLoading && !isFetching && <LogsError />}

frontend/src/container/LogsExplorerList/utils.ts

@@ -1,5 +1,9 @@
 import { IField } from 'types/api/logs/fields';
 import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
+import {
+	IBuilderQuery,
+	TagFilterItem,
+} from 'types/api/queryBuilder/queryBuilderData';
 
 export const convertKeysToColumnFields = (
 	keys: BaseAutocompleteData[],
@@ -9,3 +13,56 @@ export const convertKeysToColumnFields = (
 		name: item.key,
 		type: item.type as string,
 	}));
+/**
+ * Determines if a query represents a trace-to-logs navigation
+ * by checking for the presence of a trace_id filter.
+ */
+export const isTraceToLogsQuery = (queryData: IBuilderQuery): boolean => {
+	// Check if this is a trace-to-logs query by looking for trace_id filter
+	if (!queryData?.filters?.items) return false;
+
+	const traceIdFilter = queryData.filters.items.find(
+		(item: TagFilterItem) => item.key?.key === 'trace_id',
+	);
+
+	return !!traceIdFilter;
+};
+
+export type EmptyLogsListConfig = {
+	title: string;
+	subTitle: string;
+	description: string | string[];
+	documentationLinks?: Array<{
+		text: string;
+		url: string;
+	}>;
+	showClearFiltersButton?: boolean;
+	onClearFilters?: () => void;
+	clearFiltersButtonText?: string;
+};
+
+export const getEmptyLogsListConfig = (
+	handleClearFilters: () => void,
+): EmptyLogsListConfig => ({
+	title: 'No logs found for this trace.',
+	subTitle: 'This could be because :',
+	description: [
+		'Logs are not linked to Traces.',
+		'Logs are not being sent to SigNoz.',
+		'No logs are associated with this particular trace/span.',
+	],
+	documentationLinks: [
+		{
+			text: 'Sending logs to SigNoz',
+			url: 'https://signoz.io/docs/logs-management/send-logs-to-signoz/',
+		},
+		{
+			text: 'Correlate traces and logs',
+			url:
+				'https://signoz.io/docs/traces-management/guides/correlate-traces-and-logs/',
+		},
+	],
+	clearFiltersButtonText: 'Clear filters from Trace to view other logs',
+	showClearFiltersButton: true,
+	onClearFilters: handleClearFilters,
+});

frontend/src/container/LogsExplorerViews/index.tsx

@@ -153,13 +153,13 @@ function LogsExplorerViews({
 
 	const isMultipleQueries = useMemo(
 		() =>
-			currentQuery.builder.queryData.length > 1 ||
-			currentQuery.builder.queryFormulas.length > 0,
+			currentQuery?.builder?.queryData?.length > 1 ||
+			currentQuery?.builder?.queryFormulas?.length > 0,
 		[currentQuery],
 	);
 
 	const isGroupByExist = useMemo(() => {
-		const groupByCount: number = currentQuery.builder.queryData.reduce<number>(
+		const groupByCount: number = currentQuery?.builder?.queryData?.reduce<number>(
 			(acc, query) => acc + query.groupBy.length,
 			0,
 		);
@@ -551,19 +551,19 @@ function LogsExplorerViews({
 		if (!stagedQuery) return [];
 
 		if (panelType === PANEL_TYPES.LIST) {
-			if (listChartData && listChartData.payload.data.result.length > 0) {
+			if (listChartData && listChartData.payload.data?.result.length > 0) {
 				return listChartData.payload.data.result;
 			}
 			return [];
 		}
 
-		if (!data || data.payload.data.result.length === 0) return [];
+		if (!data || data.payload.data?.result.length === 0) return [];
 
 		const isGroupByExist = stagedQuery.builder.queryData.some(
 			(queryData) => queryData.groupBy.length > 0,
 		);
 
-		const firstPayloadQuery = data.payload.data.result.find(
+		const firstPayloadQuery = data.payload.data?.result.find(
 			(item) => item.queryName === listQuery?.queryName,
 		);
 

frontend/src/container/MetricsApplication/Tabs/Overview/ApDex/ApDexMetricsApplication.tsx

@@ -3,9 +3,11 @@ import { useGetMetricMeta } from 'hooks/apDex/useGetMetricMeta';
 import useErrorNotification from 'hooks/useErrorNotification';
 import { useParams } from 'react-router-dom';
 
+import { FeatureKeys } from '../../../../../constants/features';
+import { useAppContext } from '../../../../../providers/App/App';
+import { WidgetKeys } from '../../../constant';
 import { IServiceName } from '../../types';
 import ApDexMetrics from './ApDexMetrics';
-import { metricMeta } from './constants';
 import { ApDexDataSwitcherProps } from './types';
 
 function ApDexMetricsApplication({
@@ -18,7 +20,19 @@ function ApDexMetricsApplication({
 	const { servicename: encodedServiceName } = useParams<IServiceName>();
 	const servicename = decodeURIComponent(encodedServiceName);
 
-	const { data, isLoading, error } = useGetMetricMeta(metricMeta, servicename);
+	const { featureFlags } = useAppContext();
+	const dotMetricsEnabled =
+		featureFlags?.find((flag) => flag.name === FeatureKeys.DOT_METRICS_ENABLED)
+			?.active || false;
+
+	const signozLatencyBucketMetrics = dotMetricsEnabled
+		? WidgetKeys.Signoz_latency_bucket
+		: WidgetKeys.Signoz_latency_bucket_norm;
+
+	const { data, isLoading, error } = useGetMetricMeta(
+		signozLatencyBucketMetrics,
+		servicename,
+	);
 	useErrorNotification(error);
 
 	if (isLoading) {

frontend/src/container/MetricsApplication/Tabs/Overview/ApDex/constants.ts

@@ -1 +0,0 @@
-export const metricMeta = 'signoz_latency_bucket';

frontend/src/container/MetricsExplorer/Summary/Summary.tsx

@@ -75,15 +75,14 @@ function Summary(): JSX.Element {
 	useEffect(() => {
 		logEvent(MetricsExplorerEvents.TabChanged, {
 			[MetricsExplorerEventKeys.Tab]: 'summary',
+			[MetricsExplorerEventKeys.TimeRange]: {
+				startTime: convertNanoToMilliseconds(minTime),
+				endTime: convertNanoToMilliseconds(maxTime),
+			},
 		});
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, []);
 
-	useEffect(() => {
-		logEvent(MetricsExplorerEvents.TimeUpdated, {
-			[MetricsExplorerEventKeys.Tab]: 'summary',
-		});
-	}, [maxTime, minTime]);
-
 	// This is used to avoid the filters from being serialized with the id
 	const queryFiltersWithoutId = useMemo(() => {
 		const filtersWithoutId = {
@@ -168,9 +167,11 @@ function Summary(): JSX.Element {
 				[SUMMARY_FILTERS_KEY]: JSON.stringify(value),
 			});
 			setCurrentPage(1);
-			logEvent(MetricsExplorerEvents.FilterApplied, {
-				[MetricsExplorerEventKeys.Tab]: 'summary',
-			});
+			if (value.items.length > 0) {
+				logEvent(MetricsExplorerEvents.FilterApplied, {
+					[MetricsExplorerEventKeys.Tab]: 'summary',
+				});
+			}
 		},
 		[setSearchParams, searchParams],
 	);

frontend/src/container/MetricsExplorer/events.ts

@@ -6,7 +6,6 @@ export enum MetricsExplorerEvents {
 	ModalOpened = 'Metrics Explorer: Modal opened',
 	MetricClicked = 'Metrics Explorer: Metric clicked',
 	FilterApplied = 'Metrics Explorer: Filter applied',
-	TimeUpdated = 'Metrics Explorer: Time updated',
 	TreemapViewChanged = 'Metrics Explorer: Treemap view changed',
 	PageNumberChanged = 'Metrics Explorer: Page number changed',
 	PageSizeChanged = 'Metrics Explorer: Page size changed',
@@ -48,4 +47,5 @@ export enum MetricsExplorerEventKeys {
 	YAxisUnit = 'yAxisUnit',
 	ViewName = 'viewName',
 	Filters = 'filters',
+	TimeRange = 'timeRange',
 }

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

@@ -112,9 +112,6 @@
 				font-weight: 500;
 				line-height: 14px; /* 140% */
 				letter-spacing: 0.4px;
-
-				cursor: pointer;
-
 				max-width: 60px;
 
 				overflow: hidden;
@@ -122,6 +119,10 @@
 				white-space: nowrap;
 			}
 
+			.version-clickable {
+				cursor: pointer;
+			}
+
 			.version-update-notification-dot-icon {
 				width: 4px;
 				height: 4px;

frontend/src/container/SideNav/SideNav.tsx

@@ -195,11 +195,25 @@ function SideNav({ isPinned }: { isPinned: boolean }): JSX.Element {
 		};
 	}, [checkScroll]);
 
+	const {
+		isCloudUser,
+		isEnterpriseSelfHostedUser,
+		isCommunityUser,
+		isCommunityEnterpriseUser,
+	} = useGetTenantLicense();
+
+	const [licenseTag, setLicenseTag] = useState('');
+	const isAdmin = user.role === USER_ROLES.ADMIN;
+	const isEditor = user.role === USER_ROLES.EDITOR;
+
 	useEffect(() => {
 		const navShortcuts = (userPreferences?.find(
 			(preference) => preference.name === USER_PREFERENCES.NAV_SHORTCUTS,
 		)?.value as unknown) as string[];
 
+		const shouldShowIntegrations =
+			(isCloudUser || isEnterpriseSelfHostedUser) && (isAdmin || isEditor);
+
 		if (navShortcuts && isArray(navShortcuts) && navShortcuts.length > 0) {
 			// nav shortcuts is array of strings
 			const pinnedItems = navShortcuts
@@ -211,11 +225,14 @@ function SideNav({ isPinned }: { isPinned: boolean }): JSX.Element {
 			// Set pinned items in the order they were stored
 			setPinnedMenuItems(pinnedItems);
 
-			// Set secondary items with proper isPinned state
 			setSecondaryMenuItems(
 				defaultMoreMenuItems.map((item) => ({
 					...item,
 					isPinned: pinnedItems.some((pinned) => pinned.itemKey === item.itemKey),
+					isEnabled:
+						item.key === ROUTES.INTEGRATIONS
+							? shouldShowIntegrations
+							: item.isEnabled,
 				})),
 			);
 		} else {
@@ -225,17 +242,26 @@ function SideNav({ isPinned }: { isPinned: boolean }): JSX.Element {
 			);
 			setPinnedMenuItems(defaultPinnedItems);
 
-			// Set secondary items with proper isPinned state
 			setSecondaryMenuItems(
 				defaultMoreMenuItems.map((item) => ({
 					...item,
 					isPinned: defaultPinnedItems.some(
 						(pinned) => pinned.itemKey === item.itemKey,
 					),
+					isEnabled:
+						item.key === ROUTES.INTEGRATIONS
+							? shouldShowIntegrations
+							: item.isEnabled,
 				})),
 			);
 		}
-	}, [userPreferences]);
+	}, [
+		userPreferences,
+		isCloudUser,
+		isEnterpriseSelfHostedUser,
+		isAdmin,
+		isEditor,
+	]);
 
 	const isOnboardingV3Enabled = featureFlags?.find(
 		(flag) => flag.name === FeatureKeys.ONBOARDING_V3,
@@ -249,10 +275,6 @@ function SideNav({ isPinned }: { isPinned: boolean }): JSX.Element {
 		(flag) => flag.name === FeatureKeys.PREMIUM_SUPPORT,
 	)?.active;
 
-	const [licenseTag, setLicenseTag] = useState('');
-	const isAdmin = user.role === USER_ROLES.ADMIN;
-	const isEditor = user.role === USER_ROLES.EDITOR;
-
 	const userSettingsMenuItem = {
 		key: ROUTES.SETTINGS,
 		label: 'Settings',
@@ -375,13 +397,6 @@ function SideNav({ isPinned }: { isPinned: boolean }): JSX.Element {
 
 	const { registerShortcut, deregisterShortcut } = useKeyboardHotkeys();
 
-	const {
-		isCloudUser,
-		isEnterpriseSelfHostedUser,
-		isCommunityUser,
-		isCommunityEnterpriseUser,
-	} = useGetTenantLicense();
-
 	const isWorkspaceBlocked = trialInfo?.workSpaceBlock || false;
 
 	const openInNewTab = (path: string): void => {
@@ -718,35 +733,13 @@ function SideNav({ isPinned }: { isPinned: boolean }): JSX.Element {
 		}
 	};
 
-	useEffect(() => {
-		if ((isCloudUser || isEnterpriseSelfHostedUser) && (isAdmin || isEditor)) {
-			// enable integrations for cloud users
-			setSecondaryMenuItems((prevItems) =>
-				prevItems.map((item) => ({
-					...item,
-					isEnabled: item.key === ROUTES.INTEGRATIONS ? true : item.isEnabled,
-				})),
-			);
-
-			// enable integrations for pinned menu items
-			// eslint-disable-next-line sonarjs/no-identical-functions
-			setPinnedMenuItems((prevItems) =>
-				prevItems.map((item) => ({
-					...item,
-					isEnabled: item.key === ROUTES.INTEGRATIONS ? true : item.isEnabled,
-				})),
-			);
-		}
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [isCloudUser, isEnterpriseSelfHostedUser]);
-
 	const onClickVersionHandler = useCallback((): void => {
-		if (isCloudUser) {
+		if (isCloudUser || !changelog) {
 			return;
 		}
 
 		setShowChangelogModal(true);
-	}, [isCloudUser]);
+	}, [isCloudUser, changelog]);
 
 	useEffect(() => {
 		if (!isLatestVersion && !isCloudUser) {
@@ -814,7 +807,10 @@ function SideNav({ isPinned }: { isPinned: boolean }): JSX.Element {
 											}
 										>
 											<div className="version-container">
-												<span className="version" onClick={onClickVersionHandler}>
+												<span
+													className={cx('version', changelog && 'version-clickable')}
+													onClick={onClickVersionHandler}
+												>
 													{currentVersion}
 												</span>
 

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

@@ -215,6 +215,27 @@ export function SpanDuration({
 		setHasActionButtons(false);
 	};
 
+	// Calculate text positioning to handle overflow cases
+	const textStyle = useMemo(() => {
+		const spanRightEdge = leftOffset + width;
+		const textWidthApprox = 8; // Approximate text width in percentage
+
+		// If span would cause text overflow, right-align text to span end
+		if (leftOffset > 100 - textWidthApprox) {
+			return {
+				right: `${100 - spanRightEdge}%`,
+				color,
+				textAlign: 'right' as const,
+			};
+		}
+
+		// Default: left-align text to span start
+		return {
+			left: `${leftOffset}%`,
+			color,
+		};
+	}, [leftOffset, width, color]);
+
 	return (
 		<div
 			className={cx(
@@ -270,7 +291,7 @@ export function SpanDuration({
 				<Typography.Text
 					className="span-line-text"
 					ellipsis
-					style={{ left: `${leftOffset}%`, color }}
+					style={textStyle}
 				>{`${toFixed(time, 2)} ${timeUnitName}`}</Typography.Text>
 			</Tooltip>
 		</div>
@@ -311,6 +332,16 @@ function getWaterfallColumns({
 				/>
 			),
 			size: 450,
+			/**
+			 * Note: The TanStack table currently does not support percentage-based column sizing.
+			 * Therefore, we specify both `minSize` and `maxSize` for the "span-name" column to ensure
+			 * that its width remains between 240px and 900px. Setting a `maxSize` here is important
+			 * because the "span-duration" column has column resizing disabled, making it difficult
+			 * to enforce a minimum width for that column. By constraining the "span-name" column,
+			 * we indirectly control the minimum width available for the "span-duration" column.
+			 */
+			minSize: 240,
+			maxSize: 900,
 		}),
 		columnDefHelper.display({
 			id: 'span-duration',

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/hooks/__tests__/useUrlQueryData.test.tsx

@@ -0,0 +1,306 @@
+/* eslint-disable sonarjs/no-duplicate-string */
+/* eslint-disable @typescript-eslint/explicit-function-return-type */
+
+import { act, renderHook } from '@testing-library/react';
+import { createMemoryHistory } from 'history';
+import { Router } from 'react-router-dom';
+
+import useUrlQueryData from '../useUrlQueryData';
+
+// Mock the useSafeNavigate hook
+const mockSafeNavigate = jest.fn();
+jest.mock('hooks/useSafeNavigate', () => ({
+	useSafeNavigate: () => ({
+		safeNavigate: mockSafeNavigate,
+	}),
+}));
+
+describe('useUrlQueryData', () => {
+	beforeEach(() => {
+		jest.clearAllMocks();
+	});
+
+	const renderHookWithRouter = (
+		queryKey: string,
+		defaultData?: any,
+		initialEntries: string[] = ['/test'],
+	) => {
+		const history = createMemoryHistory({ initialEntries });
+
+		// Mock window.location.search to match the current route
+		Object.defineProperty(window, 'location', {
+			value: {
+				search: history.location.search,
+				pathname: history.location.pathname,
+				origin: 'http://localhost',
+			},
+			writable: true,
+		});
+
+		return renderHook(() => useUrlQueryData(queryKey, defaultData), {
+			wrapper: ({ children }) => <Router history={history}>{children}</Router>,
+		});
+	};
+
+	describe('query parsing', () => {
+		test('should parse valid JSON query parameter', () => {
+			const testData = { name: 'test', value: 123 };
+			const { result } = renderHookWithRouter('testKey', {}, [
+				`/test?testKey=${encodeURIComponent(JSON.stringify(testData))}`,
+			]);
+
+			expect(result.current.query).toBe(JSON.stringify(testData));
+			expect(result.current.queryData).toEqual(testData);
+		});
+
+		test('should return default data when query parameter is not present', () => {
+			const defaultData = { default: 'value' };
+			const { result } = renderHookWithRouter('testKey', defaultData);
+
+			expect(result.current.query).toBeNull();
+			expect(result.current.queryData).toEqual(defaultData);
+		});
+
+		test('should return default data when query parameter is empty', () => {
+			const defaultData = { default: 'value' };
+			const { result } = renderHookWithRouter('testKey', defaultData, [
+				'/test?testKey=',
+			]);
+
+			expect(result.current.query).toBe('');
+			expect(result.current.queryData).toEqual(defaultData);
+		});
+
+		test('should handle invalid JSON and return default data', () => {
+			const defaultData = { default: 'value' };
+			const consoleSpy = jest.spyOn(console, 'warn').mockImplementation();
+
+			const { result } = renderHookWithRouter('testKey', defaultData, [
+				'/test?testKey=invalid-json',
+			]);
+
+			expect(result.current.query).toBe('invalid-json');
+			expect(result.current.queryData).toEqual(defaultData);
+			expect(consoleSpy).toHaveBeenCalledWith(
+				'Failed to parse query as JSON:',
+				'invalid-json',
+				expect.any(Error),
+			);
+
+			consoleSpy.mockRestore();
+		});
+
+		test('should handle malformed JSON and return default data', () => {
+			const defaultData = { default: 'value' };
+			const consoleSpy = jest.spyOn(console, 'warn').mockImplementation();
+
+			const { result } = renderHookWithRouter(
+				'testKey',
+				defaultData,
+				['/test?testKey={"name":"test",}'], // Missing closing brace
+			);
+
+			expect(result.current.query).toBe('{"name":"test",}');
+			expect(result.current.queryData).toEqual(defaultData);
+			expect(consoleSpy).toHaveBeenCalled();
+
+			consoleSpy.mockRestore();
+		});
+
+		test('should handle complex nested objects', () => {
+			const complexData = {
+				users: [
+					{ id: 1, name: 'John', settings: { theme: 'dark', notifications: true } },
+					{
+						id: 2,
+						name: 'Jane',
+						settings: { theme: 'light', notifications: false },
+					},
+				],
+				metadata: {
+					total: 2,
+					page: 1,
+				},
+			};
+
+			const { result } = renderHookWithRouter('complexKey', {}, [
+				`/test?complexKey=${encodeURIComponent(JSON.stringify(complexData))}`,
+			]);
+
+			expect(result.current.query).toBe(JSON.stringify(complexData));
+			expect(result.current.queryData).toEqual(complexData);
+		});
+
+		test('should handle primitive values', () => {
+			const stringData = 'simple string';
+			const { result } = renderHookWithRouter('stringKey', '', [
+				`/test?stringKey=${encodeURIComponent(JSON.stringify(stringData))}`,
+			]);
+
+			expect(result.current.query).toBe(JSON.stringify(stringData));
+			expect(result.current.queryData).toBe(stringData);
+		});
+	});
+
+	describe('redirectWithQuery', () => {
+		test('should navigate with new query data', () => {
+			const { result } = renderHookWithRouter('testKey', {});
+
+			const newData = { name: 'new', value: 456 };
+			act(() => {
+				result.current.redirectWithQuery(newData);
+			});
+
+			expect(mockSafeNavigate).toHaveBeenCalledWith(
+				expect.stringContaining('testKey='),
+			);
+
+			const calledUrl = mockSafeNavigate.mock.calls[0][0];
+			const urlParams = new URLSearchParams(calledUrl.split('?')[1]);
+			expect(urlParams.get('testKey')).toBe(JSON.stringify(newData));
+		});
+
+		test('should preserve existing query parameters when adding new one', () => {
+			const { result } = renderHookWithRouter('newKey', {}, [
+				'/test?existingKey=existingValue',
+			]);
+
+			const newData = { name: 'new' };
+			act(() => {
+				result.current.redirectWithQuery(newData);
+			});
+
+			const calledUrl = mockSafeNavigate.mock.calls[0][0];
+			const urlParams = new URLSearchParams(calledUrl.split('?')[1]);
+
+			expect(urlParams.get('existingKey')).toBe('existingValue');
+			expect(urlParams.get('newKey')).toBe(JSON.stringify(newData));
+		});
+
+		test('should update existing query parameter', () => {
+			const initialData = { name: 'old' };
+			const { result } = renderHookWithRouter('testKey', {}, [
+				`/test?testKey=${encodeURIComponent(JSON.stringify(initialData))}`,
+			]);
+
+			const newData = { name: 'new', value: 789 };
+			act(() => {
+				result.current.redirectWithQuery(newData);
+			});
+
+			const calledUrl = mockSafeNavigate.mock.calls[0][0];
+			const urlParams = new URLSearchParams(calledUrl.split('?')[1]);
+			expect(urlParams.get('testKey')).toBe(JSON.stringify(newData));
+		});
+
+		test('should handle complex data in redirectWithQuery', () => {
+			const { result } = renderHookWithRouter('complexKey', {});
+
+			const complexData = {
+				filters: {
+					status: ['active', 'pending'],
+					dateRange: { start: '2023-01-01', end: '2023-12-31' },
+				},
+				sort: { field: 'created_at', direction: 'desc' },
+			};
+
+			act(() => {
+				result.current.redirectWithQuery(complexData);
+			});
+
+			const calledUrl = mockSafeNavigate.mock.calls[0][0];
+			const urlParams = new URLSearchParams(calledUrl.split('?')[1]);
+			expect(urlParams.get('complexKey')).toBe(JSON.stringify(complexData));
+		});
+
+		test('should handle primitive values in redirectWithQuery', () => {
+			const { result } = renderHookWithRouter('primitiveKey', '');
+
+			act(() => {
+				result.current.redirectWithQuery('simple string');
+			});
+
+			const calledUrl = mockSafeNavigate.mock.calls[0][0];
+			const urlParams = new URLSearchParams(calledUrl.split('?')[1]);
+			expect(urlParams.get('primitiveKey')).toBe(JSON.stringify('simple string'));
+		});
+
+		test('should handle null and undefined values', () => {
+			const { result } = renderHookWithRouter('nullKey', {});
+
+			act(() => {
+				result.current.redirectWithQuery(null);
+			});
+
+			const calledUrl = mockSafeNavigate.mock.calls[0][0];
+			const urlParams = new URLSearchParams(calledUrl.split('?')[1]);
+			expect(urlParams.get('nullKey')).toBe('null');
+
+			act(() => {
+				result.current.redirectWithQuery(undefined);
+			});
+
+			const secondCalledUrl = mockSafeNavigate.mock.calls[1][0];
+			const secondUrlParams = new URLSearchParams(secondCalledUrl.split('?')[1]);
+			expect(secondUrlParams.get('nullKey')).toBe('undefined');
+		});
+	});
+
+	describe('hook interface', () => {
+		test('should return correct interface structure', () => {
+			const { result } = renderHookWithRouter('testKey', {});
+
+			expect(result.current).toHaveProperty('query');
+			expect(result.current).toHaveProperty('queryData');
+			expect(result.current).toHaveProperty('redirectWithQuery');
+			expect(typeof result.current.redirectWithQuery).toBe('function');
+		});
+
+		test('should handle different query keys', () => {
+			const { result: result1 } = renderHookWithRouter('key1', {});
+			const { result: result2 } = renderHookWithRouter('key2', {});
+
+			expect(result1.current.query).toBeNull();
+			expect(result2.current.query).toBeNull();
+
+			const testData = { test: 'data' };
+			act(() => {
+				result1.current.redirectWithQuery(testData);
+			});
+
+			const calledUrl = mockSafeNavigate.mock.calls[0][0];
+			const urlParams = new URLSearchParams(calledUrl.split('?')[1]);
+			expect(urlParams.get('key1')).toBe(JSON.stringify(testData));
+			expect(urlParams.get('key2')).toBeNull();
+		});
+	});
+
+	describe('URL encoding/decoding', () => {
+		test('should handle URL encoded query parameters', () => {
+			const testData = { name: 'test with spaces', value: 'special&chars' };
+			const encodedData = encodeURIComponent(JSON.stringify(testData));
+
+			const { result } = renderHookWithRouter('testKey', {}, [
+				`/test?testKey=${encodedData}`,
+			]);
+
+			expect(result.current.queryData).toEqual(testData);
+		});
+
+		test('should properly encode data in redirectWithQuery', () => {
+			const { result } = renderHookWithRouter('testKey', {});
+
+			const testData = { name: 'test with spaces', value: 'special&chars' };
+			act(() => {
+				result.current.redirectWithQuery(testData);
+			});
+
+			const calledUrl = mockSafeNavigate.mock.calls[0][0];
+			const urlParams = new URLSearchParams(calledUrl.split('?')[1]);
+			const decodedValue = JSON.parse(
+				decodeURIComponent(urlParams.get('testKey') || ''),
+			);
+			expect(decodedValue).toEqual(testData);
+		});
+	});
+});

frontend/src/hooks/useMultiIntersectionObserver.ts

@@ -0,0 +1,54 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+type SetElement = (el: Element | null) => void;
+
+// To manage intersection observers for multiple items
+export function useMultiIntersectionObserver(
+	itemCount: number,
+	options: IntersectionObserverInit = { threshold: 0.1 },
+): {
+	visibilities: boolean[];
+	setElement: (index: number) => SetElement;
+} {
+	const elementsRef = useRef<(Element | null)[]>([]);
+
+	const [everVisibles, setEverVisibles] = useState<boolean[]>(
+		new Array(itemCount).fill(false),
+	);
+
+	const setElement = useCallback<(index: number) => SetElement>(
+		(index) => (el): void => {
+			elementsRef.current[index] = el;
+		},
+		[],
+	);
+
+	useEffect(() => {
+		if (!elementsRef.current.length) return;
+
+		const observer = new IntersectionObserver((entries) => {
+			setEverVisibles((prev) => {
+				const newVis = [...prev];
+				let changed = false;
+				entries.forEach((entry) => {
+					const idx = elementsRef.current.indexOf(entry.target);
+					if (idx !== -1 && entry.isIntersecting && !newVis[idx]) {
+						newVis[idx] = true;
+						changed = true;
+					}
+				});
+				return changed ? newVis : prev;
+			});
+		}, options);
+
+		elementsRef.current.forEach((el) => {
+			if (el) observer.observe(el);
+		});
+
+		return (): void => {
+			observer.disconnect();
+		};
+	}, [itemCount, options]);
+
+	return { visibilities: everVisibles, setElement };
+}

frontend/src/hooks/useUrlQueryData.ts

@@ -14,10 +14,17 @@ const useUrlQueryData = <T>(
 
 	const query = useMemo(() => urlQuery.get(queryKey), [urlQuery, queryKey]);
 
-	const queryData: T = useMemo(() => (query ? JSON.parse(query) : defaultData), [
-		query,
-		defaultData,
-	]);
+	const queryData: T = useMemo(() => {
+		if (query) {
+			try {
+				return JSON.parse(query);
+			} catch (e) {
+				console.warn('Failed to parse query as JSON:', query, e);
+				return defaultData;
+			}
+		}
+		return defaultData;
+	}, [query, defaultData]);
 
 	const redirectWithQuery = useCallback(
 		(newQueryData: T): void => {

frontend/src/lib/newQueryBuilder/queryBuilderMappers/mapQueryDataToApi.ts

@@ -11,22 +11,23 @@ export const mapQueryDataToApi = <Data extends MapData, Key extends keyof Data>(
 ): MapQueryDataToApiResult<Record<string, Data>> => {
 	const newLegendMap: Record<string, string> = {};
 
-	const preparedResult = data.reduce<Record<string, Data>>((acc, query) => {
-		const newResult: Record<string, Data> = {
-			...acc,
-			[query[nameField] as string]: {
-				...query,
-				...tableParams?.pagination,
-				...(tableParams?.selectColumns
-					? { selectColumns: tableParams?.selectColumns }
-					: null),
-			},
-		};
+	const preparedResult =
+		data?.reduce<Record<string, Data>>((acc, query) => {
+			const newResult: Record<string, Data> = {
+				...acc,
+				[query[nameField] as string]: {
+					...query,
+					...tableParams?.pagination,
+					...(tableParams?.selectColumns
+						? { selectColumns: tableParams?.selectColumns }
+						: null),
+				},
+			};
 
-		newLegendMap[query[nameField] as string] = query.legend;
+			newLegendMap[query[nameField] as string] = query.legend;
 
-		return newResult;
-	}, {} as Record<string, Data>);
+			return newResult;
+		}, {} as Record<string, Data>) || {};
 
 	return {
 		data: preparedResult,

frontend/src/mocks-server/__mockdata__/logs_query_range.ts

@@ -46,6 +46,14 @@ export const logsQueryRangeSuccessResponse = {
 		],
 	},
 };
+export const logsQueryRangeEmptyResponse = {
+	resultType: '',
+	result: [
+		{
+			queryName: 'A',
+		},
+	],
+};
 
 export const logsPaginationQueryRangeSuccessResponse = ({
 	offset = 0,

frontend/src/pages/MetricsApplication/MetricsApplication.styles.scss

@@ -0,0 +1,26 @@
+.service-route-tab {
+	margin-bottom: 64px;
+	.ant-tabs-nav {
+		&::before {
+			border-bottom: 1px solid var(--bg-slate-400);
+		}
+		.ant-tabs-nav-wrap {
+			.ant-tabs-nav-list {
+				.ant-tabs-ink-bar {
+					background-color: var(--bg-robin-500) !important;
+				}
+				.ant-tabs-tab {
+					font-size: 13px;
+					font-family: 'Inter';
+					color: var(--text-vanilla-100);
+					line-height: 20px;
+					letter-spacing: -0.07px;
+					gap: 10px;
+				}
+				.ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {
+					color: var(--bg-robin-500);
+				}
+			}
+		}
+	}
+}

frontend/src/pages/MetricsApplication/MetricsApplication.tsx

@@ -1,13 +1,14 @@
-import RouteTab from 'components/RouteTab';
-import ROUTES from 'constants/routes';
+import './MetricsApplication.styles.scss';
+
+import { Tabs, TabsProps } from 'antd/lib';
+import { QueryParams } from 'constants/query';
 import DBCall from 'container/MetricsApplication/Tabs/DBCall';
 import External from 'container/MetricsApplication/Tabs/External';
 import Overview from 'container/MetricsApplication/Tabs/Overview';
 import ResourceAttributesFilter from 'container/ResourceAttributesFilter';
+import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import useUrlQuery from 'hooks/useUrlQuery';
-import history from 'lib/history';
-import { useCallback, useMemo } from 'react';
-import { generatePath, useParams } from 'react-router-dom';
+import { useParams } from 'react-router-dom';
 
 import ApDexApplication from './ApDex/ApDexApplication';
 import { MetricsApplicationTab, TAB_KEY_VS_LABEL } from './types';
@@ -23,46 +24,42 @@ function MetricsApplication(): JSX.Element {
 	const activeKey = useMetricsApplicationTabKey();
 
 	const urlQuery = useUrlQuery();
+	const { safeNavigate } = useSafeNavigate();
 
-	const getRouteUrl = useCallback(
-		(tab: MetricsApplicationTab): string => {
-			urlQuery.set('tab', tab);
-			return `${generatePath(ROUTES.SERVICE_METRICS, {
-				servicename,
-			})}?${urlQuery.toString()}`;
+	const items: TabsProps['items'] = [
+		{
+			label: TAB_KEY_VS_LABEL[MetricsApplicationTab.OVER_METRICS],
+			key: MetricsApplicationTab.OVER_METRICS,
+			children: <Overview />,
 		},
-		[servicename, urlQuery],
-	);
+		{
+			label: TAB_KEY_VS_LABEL[MetricsApplicationTab.DB_CALL_METRICS],
+			key: MetricsApplicationTab.DB_CALL_METRICS,
+			children: <DBCall />,
+		},
+		{
+			label: TAB_KEY_VS_LABEL[MetricsApplicationTab.EXTERNAL_METRICS],
+			key: MetricsApplicationTab.EXTERNAL_METRICS,
+			children: <External />,
+		},
+	];
 
-	const routes = useMemo(
-		() => [
-			{
-				Component: Overview,
-				name: TAB_KEY_VS_LABEL[MetricsApplicationTab.OVER_METRICS],
-				route: getRouteUrl(MetricsApplicationTab.OVER_METRICS),
-				key: MetricsApplicationTab.OVER_METRICS,
-			},
-			{
-				Component: DBCall,
-				name: TAB_KEY_VS_LABEL[MetricsApplicationTab.DB_CALL_METRICS],
-				route: getRouteUrl(MetricsApplicationTab.DB_CALL_METRICS),
-				key: MetricsApplicationTab.DB_CALL_METRICS,
-			},
-			{
-				Component: External,
-				name: TAB_KEY_VS_LABEL[MetricsApplicationTab.EXTERNAL_METRICS],
-				route: getRouteUrl(MetricsApplicationTab.EXTERNAL_METRICS),
-				key: MetricsApplicationTab.EXTERNAL_METRICS,
-			},
-		],
-		[getRouteUrl],
-	);
+	const onTabChange = (tab: string): void => {
+		urlQuery.set(QueryParams.tab, tab);
+		safeNavigate(`/services/${servicename}?${urlQuery.toString()}`);
+	};
 
 	return (
 		<div className="metrics-application-container">
 			<ResourceAttributesFilter />
 			<ApDexApplication />
-			<RouteTab routes={routes} history={history} activeKey={activeKey} />
+			<Tabs
+				items={items}
+				activeKey={activeKey}
+				className="service-route-tab"
+				destroyInactiveTabPane
+				onChange={onTabChange}
+			/>
 		</div>
 	);
 }