chore: fix test notification button styling

* feat: add queriesCount prop to QueryV2 and conditionally render delete option

* fix: make the trace operator label match the case and color of QB addons

* fix: fix the inconsistency in the styles of trace operator and other query addons

* fix: make the QB footer buttons styles consistent with other buttons

* fix: fix similar colors for different queries in timeseries view

* fix: enhance the UI of formula label to match the other add-ons

* fix: update styles for metrics operators and select components for consistency

* fix: format styles for query footer buttons for improved readability

* fix: update #888 to var(--bg-vanilla-400)

.devenv/docker/clickhouse/compose.yaml

@@ -42,7 +42,7 @@ services:
       timeout: 5s
       retries: 3
   schema-migrator-sync:
-    image: signoz/signoz-schema-migrator:v0.129.7
+    image: signoz/signoz-schema-migrator:v0.129.11
     container_name: schema-migrator-sync
     command:
       - sync
@@ -55,7 +55,7 @@ services:
         condition: service_healthy
     restart: on-failure
   schema-migrator-async:
-    image: signoz/signoz-schema-migrator:v0.129.7
+    image: signoz/signoz-schema-migrator:v0.129.11
     container_name: schema-migrator-async
     command:
       - async

.github/CODEOWNERS

@@ -2,7 +2,7 @@
 # Owners are automatically requested for review for PRs that changes code
 # that they own.
 
-/frontend/ @SigNoz/frontend @YounixM
+/frontend/ @YounixM @aks07
 /frontend/src/container/MetricsApplication @srikanthccv
 /frontend/src/container/NewWidget/RightContainer/types.ts @srikanthccv
 

.github/workflows/build-enterprise.yaml

@@ -107,7 +107,6 @@ jobs:
         -X github.com/SigNoz/signoz/pkg/version.branch=${{ needs.prepare.outputs.branch }}
         -X github.com/SigNoz/signoz/ee/zeus.url=https://api.signoz.cloud
         -X github.com/SigNoz/signoz/ee/zeus.deprecatedURL=https://license.signoz.io
-        -X github.com/SigNoz/signoz/ee/query-service/constants.ZeusURL=https://api.signoz.cloud
         -X github.com/SigNoz/signoz/ee/query-service/constants.LicenseSignozIo=https://license.signoz.io/api/v1
         -X github.com/SigNoz/signoz/pkg/analytics.key=9kRrJ7oPCGPEJLF6QjMPLt5bljFhRQBr'
       DOCKER_BASE_IMAGES: '{"alpine": "alpine:3.20.3"}'

.github/workflows/build-staging.yaml

@@ -106,7 +106,6 @@ jobs:
         -X github.com/SigNoz/signoz/pkg/version.branch=${{ needs.prepare.outputs.branch }}
         -X github.com/SigNoz/signoz/ee/zeus.url=https://api.staging.signoz.cloud
         -X github.com/SigNoz/signoz/ee/zeus.deprecatedURL=https://license.staging.signoz.cloud
-        -X github.com/SigNoz/signoz/ee/query-service/constants.ZeusURL=https://api.staging.signoz.cloud
         -X github.com/SigNoz/signoz/ee/query-service/constants.LicenseSignozIo=https://license.staging.signoz.cloud/api/v1
         -X github.com/SigNoz/signoz/pkg/analytics.key=9kRrJ7oPCGPEJLF6QjMPLt5bljFhRQBr'
       DOCKER_BASE_IMAGES: '{"alpine": "alpine:3.20.3"}'

.github/workflows/integrationci.yaml

@@ -17,6 +17,8 @@ jobs:
           - bootstrap
           - passwordauthn
           - callbackauthn
+          - cloudintegrations
+          - dashboard
           - querier
           - ttl
         sqlstore-provider:

.golangci.yml

@@ -1,39 +1,63 @@
+version: "2"
 linters:
-  default: standard
+  default: none
   enable:
     - bodyclose
+    - depguard
+    - errcheck
+    - forbidigo
+    - govet
+    - iface
+    - ineffassign
     - misspell
     - nilnil
     - sloglint
-    - depguard
-    - iface
     - unparam
-    - forbidigo
-
-linters-settings:
-  sloglint:
-    no-mixed-args: true
-    kv-only: true
-    no-global: all
-    context: all
-    static-msg: true
-    msg-style: lowercased
-    key-naming-case: snake
-  depguard:
-    rules:
-      nozap:
-        deny:
-          - pkg: "go.uber.org/zap"
-            desc: "Do not use zap logger. Use slog instead."
-      noerrors:
-        deny:
-          - pkg: "errors"
-            desc: "Do not use errors package. Use github.com/SigNoz/signoz/pkg/errors instead."
-  iface:
-    enable:
-      - identical
-issues:
-  exclude-dirs:
-    - "pkg/query-service"
-    - "ee/query-service"
-    - "scripts/"
+    - unused
+  settings:
+    depguard:
+      rules:
+        noerrors:
+          deny:
+            - pkg: errors
+              desc: Do not use errors package. Use github.com/SigNoz/signoz/pkg/errors instead.
+        nozap:
+          deny:
+            - pkg: go.uber.org/zap
+              desc: Do not use zap logger. Use slog instead.
+    forbidigo:
+      forbid:
+        - pattern: fmt.Errorf
+        - pattern: ^(fmt\.Print.*|print|println)$
+    iface:
+      enable:
+        - identical
+    sloglint:
+      no-mixed-args: true
+      kv-only: true
+      no-global: all
+      context: all
+      static-msg: true
+      key-naming-case: snake
+  exclusions:
+    generated: lax
+    presets:
+      - comments
+      - common-false-positives
+      - legacy
+      - std-error-handling
+    paths:
+      - pkg/query-service
+      - ee/query-service
+      - scripts/
+      - tmp/
+      - third_party$
+      - builtin$
+      - examples$
+formatters:
+  exclusions:
+    generated: lax
+    paths:
+      - third_party$
+      - builtin$
+      - examples$

Makefile

@@ -84,10 +84,9 @@ go-run-enterprise: ## Runs the enterprise go backend server
 	SIGNOZ_ALERTMANAGER_PROVIDER=signoz \
 	SIGNOZ_TELEMETRYSTORE_PROVIDER=clickhouse \
 	SIGNOZ_TELEMETRYSTORE_CLICKHOUSE_DSN=tcp://127.0.0.1:9000 \
+	SIGNOZ_TELEMETRYSTORE_CLICKHOUSE_CLUSTER=cluster \
 	go run -race \
-		$(GO_BUILD_CONTEXT_ENTERPRISE)/*.go \
-		--config ./conf/prometheus.yml \
-		--cluster cluster
+		$(GO_BUILD_CONTEXT_ENTERPRISE)/*.go
 
 .PHONY: go-test
 go-test: ## Runs go unit tests
@@ -102,10 +101,9 @@ go-run-community: ## Runs the community go backend server
 	SIGNOZ_ALERTMANAGER_PROVIDER=signoz \
 	SIGNOZ_TELEMETRYSTORE_PROVIDER=clickhouse \
 	SIGNOZ_TELEMETRYSTORE_CLICKHOUSE_DSN=tcp://127.0.0.1:9000 \
+	SIGNOZ_TELEMETRYSTORE_CLICKHOUSE_CLUSTER=cluster \
 	go run -race \
-		$(GO_BUILD_CONTEXT_COMMUNITY)/*.go server \
-		--config ./conf/prometheus.yml \
-		--cluster cluster
+		$(GO_BUILD_CONTEXT_COMMUNITY)/*.go server
 
 .PHONY: go-build-community $(GO_BUILD_ARCHS_COMMUNITY)
 go-build-community: ## Builds the go backend server for community
@@ -208,4 +206,4 @@ py-lint: ## Run lint for integration tests
 
 .PHONY: py-test
 py-test: ## Runs integration tests
-	@cd tests/integration && poetry run pytest --basetemp=./tmp/ -vv --capture=no src/
+	@cd tests/integration && poetry run pytest --basetemp=./tmp/ -vv --capture=no src/

cmd/community/server.go

@@ -5,9 +5,12 @@ import (
 	"log/slog"
 
 	"github.com/SigNoz/signoz/cmd"
+	"github.com/SigNoz/signoz/ee/authz/openfgaauthz"
+	"github.com/SigNoz/signoz/ee/authz/openfgaschema"
 	"github.com/SigNoz/signoz/ee/sqlstore/postgressqlstore"
 	"github.com/SigNoz/signoz/pkg/analytics"
 	"github.com/SigNoz/signoz/pkg/authn"
+	"github.com/SigNoz/signoz/pkg/authz"
 	"github.com/SigNoz/signoz/pkg/factory"
 	"github.com/SigNoz/signoz/pkg/licensing"
 	"github.com/SigNoz/signoz/pkg/licensing/nooplicensing"
@@ -76,6 +79,9 @@ func runServer(ctx context.Context, config signoz.Config, logger *slog.Logger) e
 		func(ctx context.Context, providerSettings factory.ProviderSettings, store authtypes.AuthNStore, licensing licensing.Licensing) (map[authtypes.AuthNProvider]authn.AuthN, error) {
 			return signoz.NewAuthNs(ctx, providerSettings, store, licensing)
 		},
+		func(ctx context.Context, sqlstore sqlstore.SQLStore) factory.ProviderFactory[authz.AuthZ, authz.Config] {
+			return openfgaauthz.NewProviderFactory(sqlstore, openfgaschema.NewSchema().Get(ctx))
+		},
 	)
 	if err != nil {
 		logger.ErrorContext(ctx, "failed to create signoz", "error", err)

cmd/enterprise/.goreleaser.yaml

@@ -31,7 +31,6 @@ builds:
       - -X github.com/SigNoz/signoz/pkg/version.branch={{ .Branch }}
       - -X github.com/SigNoz/signoz/ee/zeus.url=https://api.signoz.cloud
       - -X github.com/SigNoz/signoz/ee/zeus.deprecatedURL=https://license.signoz.io
-      - -X github.com/SigNoz/signoz/ee/query-service/constants.ZeusURL=https://api.signoz.cloud
       - -X github.com/SigNoz/signoz/ee/query-service/constants.LicenseSignozIo=https://license.signoz.io/api/v1
       - -X github.com/SigNoz/signoz/pkg/analytics.key=9kRrJ7oPCGPEJLF6QjMPLt5bljFhRQBr
     mod_timestamp: "{{ .CommitTimestamp }}"

cmd/enterprise/server.go

@@ -8,6 +8,8 @@ import (
 	"github.com/SigNoz/signoz/cmd"
 	"github.com/SigNoz/signoz/ee/authn/callbackauthn/oidccallbackauthn"
 	"github.com/SigNoz/signoz/ee/authn/callbackauthn/samlcallbackauthn"
+	"github.com/SigNoz/signoz/ee/authz/openfgaauthz"
+	"github.com/SigNoz/signoz/ee/authz/openfgaschema"
 	enterpriselicensing "github.com/SigNoz/signoz/ee/licensing"
 	"github.com/SigNoz/signoz/ee/licensing/httplicensing"
 	enterpriseapp "github.com/SigNoz/signoz/ee/query-service/app"
@@ -17,6 +19,7 @@ import (
 	"github.com/SigNoz/signoz/ee/zeus/httpzeus"
 	"github.com/SigNoz/signoz/pkg/analytics"
 	"github.com/SigNoz/signoz/pkg/authn"
+	"github.com/SigNoz/signoz/pkg/authz"
 	"github.com/SigNoz/signoz/pkg/factory"
 	"github.com/SigNoz/signoz/pkg/licensing"
 	"github.com/SigNoz/signoz/pkg/modules/organization"
@@ -105,6 +108,9 @@ func runServer(ctx context.Context, config signoz.Config, logger *slog.Logger) e
 
 			return authNs, nil
 		},
+		func(ctx context.Context, sqlstore sqlstore.SQLStore) factory.ProviderFactory[authz.AuthZ, authz.Config] {
+			return openfgaauthz.NewProviderFactory(sqlstore, openfgaschema.NewSchema().Get(ctx))
+		},
 	)
 	if err != nil {
 		logger.ErrorContext(ctx, "failed to create signoz", "error", err)

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

@@ -176,7 +176,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:v0.98.0
+    image: signoz/signoz:v0.102.0
     command:
       - --config=/root/config/prometheus.yml
     ports:
@@ -209,7 +209,7 @@ services:
       retries: 3
   otel-collector:
     !!merge <<: *db-depend
-    image: signoz/signoz-otel-collector:v0.129.7
+    image: signoz/signoz-otel-collector:v0.129.11
     command:
       - --config=/etc/otel-collector-config.yaml
       - --manager-config=/etc/manager-config.yaml
@@ -233,7 +233,7 @@ services:
       - signoz
   schema-migrator:
     !!merge <<: *common
-    image: signoz/signoz-schema-migrator:v0.129.7
+    image: signoz/signoz-schema-migrator:v0.129.11
     deploy:
       restart_policy:
         condition: on-failure

deploy/docker-swarm/docker-compose.yaml

@@ -117,7 +117,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:v0.98.0
+    image: signoz/signoz:v0.102.0
     command:
       - --config=/root/config/prometheus.yml
     ports:
@@ -150,7 +150,7 @@ services:
       retries: 3
   otel-collector:
     !!merge <<: *db-depend
-    image: signoz/signoz-otel-collector:v0.129.7
+    image: signoz/signoz-otel-collector:v0.129.11
     command:
       - --config=/etc/otel-collector-config.yaml
       - --manager-config=/etc/manager-config.yaml
@@ -176,7 +176,7 @@ services:
       - signoz
   schema-migrator:
     !!merge <<: *common
-    image: signoz/signoz-schema-migrator:v0.129.7
+    image: signoz/signoz-schema-migrator:v0.129.11
     deploy:
       restart_policy:
         condition: on-failure

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

@@ -1,3 +1,10 @@
+connectors:
+  signozmeter:
+    metrics_flush_interval: 1h
+    dimensions:
+      - name: service.name
+      - name: deployment.environment
+      - name: host.name
 receivers:
   otlp:
     protocols:
@@ -21,6 +28,10 @@ processors:
     send_batch_size: 10000
     send_batch_max_size: 11000
     timeout: 10s
+  batch/meter:
+    send_batch_max_size: 25000
+    send_batch_size: 20000
+    timeout: 1s
   resourcedetection:
     # Using OTEL_RESOURCE_ATTRIBUTES envvar, env detector adds custom labels.
     detectors: [env, system]
@@ -66,6 +77,11 @@ exporters:
     dsn: tcp://clickhouse:9000/signoz_logs
     timeout: 10s
     use_new_schema: true
+  signozclickhousemeter:
+    dsn: tcp://clickhouse:9000/signoz_meter
+    timeout: 45s
+    sending_queue:
+      enabled: false
 service:
   telemetry:
     logs:
@@ -77,16 +93,20 @@ service:
     traces:
       receivers: [otlp]
       processors: [signozspanmetrics/delta, batch]
-      exporters: [clickhousetraces]
+      exporters: [clickhousetraces, signozmeter]
     metrics:
       receivers: [otlp]
       processors: [batch]
-      exporters: [signozclickhousemetrics]
+      exporters: [signozclickhousemetrics, signozmeter]
     metrics/prometheus:
       receivers: [prometheus]
       processors: [batch]
-      exporters: [signozclickhousemetrics]
+      exporters: [signozclickhousemetrics, signozmeter]
     logs:
       receivers: [otlp]
       processors: [batch]
-      exporters: [clickhouselogsexporter]
+      exporters: [clickhouselogsexporter, signozmeter]
+    metrics/meter:
+      receivers: [signozmeter]
+      processors: [batch/meter]
+      exporters: [signozclickhousemeter]

deploy/docker/docker-compose.ha.yaml

@@ -179,7 +179,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:${VERSION:-v0.98.0}
+    image: signoz/signoz:${VERSION:-v0.102.0}
     container_name: signoz
     command:
       - --config=/root/config/prometheus.yml
@@ -213,7 +213,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.129.7}
+    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-v0.129.11}
     container_name: signoz-otel-collector
     command:
       - --config=/etc/otel-collector-config.yaml
@@ -239,7 +239,7 @@ services:
         condition: service_healthy
   schema-migrator-sync:
     !!merge <<: *common
-    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-v0.129.7}
+    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-v0.129.11}
     container_name: schema-migrator-sync
     command:
       - sync
@@ -250,7 +250,7 @@ services:
         condition: service_healthy
   schema-migrator-async:
     !!merge <<: *db-depend
-    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-v0.129.7}
+    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-v0.129.11}
     container_name: schema-migrator-async
     command:
       - async

deploy/docker/docker-compose.yaml

@@ -111,7 +111,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:${VERSION:-v0.98.0}
+    image: signoz/signoz:${VERSION:-v0.102.0}
     container_name: signoz
     command:
       - --config=/root/config/prometheus.yml
@@ -144,7 +144,7 @@ services:
       retries: 3
   otel-collector:
     !!merge <<: *db-depend
-    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-v0.129.7}
+    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-v0.129.11}
     container_name: signoz-otel-collector
     command:
       - --config=/etc/otel-collector-config.yaml
@@ -166,7 +166,7 @@ services:
         condition: service_healthy
   schema-migrator-sync:
     !!merge <<: *common
-    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-v0.129.7}
+    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-v0.129.11}
     container_name: schema-migrator-sync
     command:
       - sync
@@ -178,7 +178,7 @@ services:
     restart: on-failure
   schema-migrator-async:
     !!merge <<: *db-depend
-    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-v0.129.7}
+    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-v0.129.11}
     container_name: schema-migrator-async
     command:
       - async

deploy/docker/otel-collector-config.yaml

@@ -1,3 +1,10 @@
+connectors:
+  signozmeter:
+    metrics_flush_interval: 1h
+    dimensions:
+      - name: service.name
+      - name: deployment.environment
+      - name: host.name
 receivers:
   otlp:
     protocols:
@@ -21,6 +28,10 @@ processors:
     send_batch_size: 10000
     send_batch_max_size: 11000
     timeout: 10s
+  batch/meter:
+    send_batch_max_size: 25000
+    send_batch_size: 20000
+    timeout: 1s
   resourcedetection:
     # Using OTEL_RESOURCE_ATTRIBUTES envvar, env detector adds custom labels.
     detectors: [env, system]
@@ -66,6 +77,11 @@ exporters:
     dsn: tcp://clickhouse:9000/signoz_logs
     timeout: 10s
     use_new_schema: true
+  signozclickhousemeter:
+    dsn: tcp://clickhouse:9000/signoz_meter
+    timeout: 45s
+    sending_queue:
+      enabled: false
 service:
   telemetry:
     logs:
@@ -77,16 +93,20 @@ service:
     traces:
       receivers: [otlp]
       processors: [signozspanmetrics/delta, batch]
-      exporters: [clickhousetraces]
+      exporters: [clickhousetraces, signozmeter]
     metrics:
       receivers: [otlp]
       processors: [batch]
-      exporters: [signozclickhousemetrics]
+      exporters: [signozclickhousemetrics, signozmeter]
     metrics/prometheus:
       receivers: [prometheus]
       processors: [batch]
-      exporters: [signozclickhousemetrics]
+      exporters: [signozclickhousemetrics, signozmeter]
     logs:
       receivers: [otlp]
       processors: [batch]
-      exporters: [clickhouselogsexporter]
+      exporters: [clickhouselogsexporter, signozmeter]
+    metrics/meter:
+      receivers: [signozmeter]
+      processors: [batch/meter]
+      exporters: [signozclickhousemeter]

docs/otel-demo-docs.md

@@ -103,9 +103,19 @@ Remember to replace the region and ingestion key with proper values as obtained
 
 Both SigNoz and OTel demo app [frontend-proxy service, to be accurate] share common port allocation at 8080. To prevent port allocation conflicts, modify the OTel demo application config to use port 8081 as the `ENVOY_PORT` value as shown below, and run docker compose command.
 
+Also, both SigNoz and OTel Demo App have the same `PROMETHEUS_PORT` configured, by default both of them try to start at `9090`, which may cause either of them to fail depending upon which one acquires it first. To prevent this, we need to mofify the value of `PROMETHEUS_PORT` too.
+
+
 ```sh
-ENVOY_PORT=8081 docker compose up -d
+ENVOY_PORT=8081 PROMETHEUS_PORT=9091 docker compose up -d
 ```
+
+Alternatively, we can modify these values using the `.env` file too, which reduces the command as just:
+
+```sh
+docker compose up -d
+```
+
 This spins up multiple microservices, with OpenTelemetry instrumentation enabled. you can verify this by,
 ```sh
 docker compose ps -a

ee/authz/openfgaauthz/provider.go

@@ -48,7 +48,26 @@ func (provider *provider) Check(ctx context.Context, tuple *openfgav1.TupleKey)
 }
 
 func (provider *provider) CheckWithTupleCreation(ctx context.Context, claims authtypes.Claims, orgID valuer.UUID, relation authtypes.Relation, _ authtypes.Relation, typeable authtypes.Typeable, selectors []authtypes.Selector) error {
-	subject, err := authtypes.NewSubject(authtypes.TypeUser, claims.UserID, authtypes.Relation{})
+	subject, err := authtypes.NewSubject(authtypes.TypeableUser, claims.UserID, orgID, nil)
+	if err != nil {
+		return err
+	}
+
+	tuples, err := typeable.Tuples(subject, relation, selectors, orgID)
+	if err != nil {
+		return err
+	}
+
+	err = provider.BatchCheck(ctx, tuples)
+	if err != nil {
+		return err
+	}
+
+	return nil
+}
+
+func (provider *provider) CheckWithTupleCreationWithoutClaims(ctx context.Context, orgID valuer.UUID, relation authtypes.Relation, _ authtypes.Relation, typeable authtypes.Typeable, selectors []authtypes.Selector) error {
+	subject, err := authtypes.NewSubject(authtypes.TypeableAnonymous, authtypes.AnonymousUser.String(), orgID, nil)
 	if err != nil {
 		return err
 	}

ee/authz/openfgaschema/base.fga

@@ -15,18 +15,18 @@ type anonymous
 
 type role 
   relations
-    define assignee: [user]
+    define assignee: [user, anonymous]
 
     define read: [user, role#assignee]
     define update: [user, role#assignee]
     define delete: [user, role#assignee]
 
-type resources
+type metaresources
   relations
     define create: [user, role#assignee]
     define list: [user, role#assignee]
 
-type resource
+type metaresource
   relations
       define read: [user, anonymous, role#assignee]
       define update: [user, role#assignee]
@@ -35,6 +35,6 @@ type resource
       define block: [user, role#assignee]
 
 
-type telemetry
+type telemetryresource
   relations
-      define read: [user, anonymous, role#assignee]
+      define read: [user, role#assignee]

ee/licensing/config.go

@@ -1,10 +1,10 @@
 package licensing
 
 import (
-	"fmt"
 	"sync"
 	"time"
 
+	"github.com/SigNoz/signoz/pkg/errors"
 	"github.com/SigNoz/signoz/pkg/licensing"
 )
 
@@ -18,7 +18,7 @@ func Config(pollInterval time.Duration, failureThreshold int) licensing.Config {
 	once.Do(func() {
 		config = licensing.Config{PollInterval: pollInterval, FailureThreshold: failureThreshold}
 		if err := config.Validate(); err != nil {
-			panic(fmt.Errorf("invalid licensing config: %w", err))
+			panic(errors.WrapInternalf(err, errors.CodeInternal, "invalid licensing config"))
 		}
 	})
 

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

@@ -20,6 +20,10 @@ import (
 	basemodel "github.com/SigNoz/signoz/pkg/query-service/model"
 	rules "github.com/SigNoz/signoz/pkg/query-service/rules"
 	"github.com/SigNoz/signoz/pkg/signoz"
+	"github.com/SigNoz/signoz/pkg/types"
+	"github.com/SigNoz/signoz/pkg/types/authtypes"
+	"github.com/SigNoz/signoz/pkg/types/dashboardtypes"
+	"github.com/SigNoz/signoz/pkg/valuer"
 	"github.com/SigNoz/signoz/pkg/version"
 	"github.com/gorilla/mux"
 )
@@ -99,6 +103,39 @@ func (ah *APIHandler) RegisterRoutes(router *mux.Router, am *middleware.AuthZ) {
 	router.HandleFunc("/api/v1/billing", am.AdminAccess(ah.getBilling)).Methods(http.MethodGet)
 	router.HandleFunc("/api/v1/portal", am.AdminAccess(ah.LicensingAPI.Portal)).Methods(http.MethodPost)
 
+	// dashboards
+	router.HandleFunc("/api/v1/dashboards/{id}/public", am.AdminAccess(ah.Signoz.Handlers.Dashboard.CreatePublic)).Methods(http.MethodPost)
+	router.HandleFunc("/api/v1/dashboards/{id}/public", am.AdminAccess(ah.Signoz.Handlers.Dashboard.GetPublic)).Methods(http.MethodGet)
+	router.HandleFunc("/api/v1/dashboards/{id}/public", am.AdminAccess(ah.Signoz.Handlers.Dashboard.UpdatePublic)).Methods(http.MethodPut)
+	router.HandleFunc("/api/v1/dashboards/{id}/public", am.AdminAccess(ah.Signoz.Handlers.Dashboard.DeletePublic)).Methods(http.MethodDelete)
+
+	// public access for dashboards
+	router.HandleFunc("/api/v1/public/dashboards/{id}", am.CheckWithoutClaims(
+		ah.Signoz.Handlers.Dashboard.GetPublicData,
+		authtypes.RelationRead, authtypes.RelationRead,
+		dashboardtypes.TypeableMetaResourcePublicDashboard,
+		func(req *http.Request, orgs []*types.Organization) ([]authtypes.Selector, valuer.UUID, error) {
+			id, err := valuer.NewUUID(mux.Vars(req)["id"])
+			if err != nil {
+				return nil, valuer.UUID{}, err
+			}
+
+			return ah.Signoz.Modules.Dashboard.GetPublicDashboardOrgAndSelectors(req.Context(), id, orgs)
+		})).Methods(http.MethodGet)
+
+	router.HandleFunc("/api/v1/public/dashboards/{id}/widgets/{index}/query_range", am.CheckWithoutClaims(
+		ah.Signoz.Handlers.Dashboard.GetPublicWidgetQueryRange,
+		authtypes.RelationRead, authtypes.RelationRead,
+		dashboardtypes.TypeableMetaResourcePublicDashboard,
+		func(req *http.Request, orgs []*types.Organization) ([]authtypes.Selector, valuer.UUID, error) {
+			id, err := valuer.NewUUID(mux.Vars(req)["id"])
+			if err != nil {
+				return nil, valuer.UUID{}, err
+			}
+
+			return ah.Signoz.Modules.Dashboard.GetPublicDashboardOrgAndSelectors(req.Context(), id, orgs)
+		})).Methods(http.MethodGet)
+
 	// v3
 	router.HandleFunc("/api/v3/licenses", am.AdminAccess(ah.LicensingAPI.Activate)).Methods(http.MethodPost)
 	router.HandleFunc("/api/v3/licenses", am.AdminAccess(ah.LicensingAPI.Refresh)).Methods(http.MethodPut)

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

@@ -10,7 +10,6 @@ import (
 	"strings"
 	"time"
 
-	"github.com/SigNoz/signoz/ee/query-service/constants"
 	"github.com/SigNoz/signoz/pkg/errors"
 	"github.com/SigNoz/signoz/pkg/http/render"
 	"github.com/SigNoz/signoz/pkg/modules/user"
@@ -77,7 +76,7 @@ func (ah *APIHandler) CloudIntegrationsGenerateConnectionParams(w http.ResponseW
 		return
 	}
 
-	ingestionUrl, signozApiUrl, apiErr := getIngestionUrlAndSigNozAPIUrl(r.Context(), license.Key)
+	ingestionUrl, signozApiUrl, apiErr := ah.getIngestionUrlAndSigNozAPIUrl(r.Context(), license.Key)
 	if apiErr != nil {
 		RespondError(w, basemodel.WrapApiError(
 			apiErr, "couldn't deduce ingestion url and signoz api url",
@@ -186,48 +185,37 @@ func (ah *APIHandler) getOrCreateCloudIntegrationUser(
 	return cloudIntegrationUser, nil
 }
 
-func getIngestionUrlAndSigNozAPIUrl(ctx context.Context, licenseKey string) (
+func (ah *APIHandler) getIngestionUrlAndSigNozAPIUrl(ctx context.Context, licenseKey string) (
 	string, string, *basemodel.ApiError,
 ) {
-	url := fmt.Sprintf(
-		"%s%s",
-		strings.TrimSuffix(constants.ZeusURL, "/"),
-		"/v2/deployments/me",
-	)
-
+	// TODO: remove this struct from here
 	type deploymentResponse struct {
-		Status string `json:"status"`
-		Error  string `json:"error"`
-		Data   struct {
-			Name string `json:"name"`
-
-			ClusterInfo struct {
-				Region struct {
-					DNS string `json:"dns"`
-				} `json:"region"`
-			} `json:"cluster"`
-		} `json:"data"`
+		Name        string `json:"name"`
+		ClusterInfo struct {
+			Region struct {
+				DNS string `json:"dns"`
+			} `json:"region"`
+		} `json:"cluster"`
 	}
 
-	resp, apiErr := requestAndParseResponse[deploymentResponse](
-		ctx, url, map[string]string{"X-Signoz-Cloud-Api-Key": licenseKey}, nil,
-	)
-
-	if apiErr != nil {
-		return "", "", basemodel.WrapApiError(
-			apiErr, "couldn't query for deployment info",
-		)
-	}
-
-	if resp.Status != "success" {
+	respBytes, err := ah.Signoz.Zeus.GetDeployment(ctx, licenseKey)
+	if err != nil {
 		return "", "", basemodel.InternalError(fmt.Errorf(
-			"couldn't query for deployment info: status: %s, error: %s",
-			resp.Status, resp.Error,
+			"couldn't query for deployment info: error: %w", err,
 		))
 	}
 
-	regionDns := resp.Data.ClusterInfo.Region.DNS
-	deploymentName := resp.Data.Name
+	resp := new(deploymentResponse)
+
+	err = json.Unmarshal(respBytes, resp)
+	if err != nil {
+		return "", "", basemodel.InternalError(fmt.Errorf(
+			"couldn't unmarshal deployment info response: error: %w", err,
+		))
+	}
+
+	regionDns := resp.ClusterInfo.Region.DNS
+	deploymentName := resp.Name
 
 	if len(regionDns) < 1 || len(deploymentName) < 1 {
 		// Fail early if actual response structure and expectation here ever diverge

ee/query-service/app/server.go

@@ -192,7 +192,7 @@ func (s Server) HealthCheckStatus() chan healthcheck.Status {
 
 func (s *Server) createPublicServer(apiHandler *api.APIHandler, web web.Web) (*http.Server, error) {
 	r := baseapp.NewRouter()
-	am := middleware.NewAuthZ(s.signoz.Instrumentation.Logger())
+	am := middleware.NewAuthZ(s.signoz.Instrumentation.Logger(), s.signoz.Modules.OrgGetter, s.signoz.Authz)
 
 	r.Use(otelmux.Middleware(
 		"apiserver",

ee/query-service/constants/constants.go

@@ -10,9 +10,6 @@ var SaasSegmentKey = GetOrDefaultEnv("SIGNOZ_SAAS_SEGMENT_KEY", "")
 var FetchFeatures = GetOrDefaultEnv("FETCH_FEATURES", "false")
 var ZeusFeaturesURL = GetOrDefaultEnv("ZEUS_FEATURES_URL", "ZeusFeaturesURL")
 
-// this is set via build time variable
-var ZeusURL = "https://api.signoz.cloud"
-
 func GetOrDefaultEnv(key string, fallback string) string {
 	v := os.Getenv(key)
 	if len(v) == 0 {

ee/sqlschema/postgressqlschema/formatter.go

@@ -30,6 +30,8 @@ func (formatter Formatter) DataTypeOf(dataType string) sqlschema.DataType {
 		return sqlschema.DataTypeBoolean
 	case "VARCHAR", "CHARACTER VARYING", "CHARACTER":
 		return sqlschema.DataTypeText
+	case "BYTEA":
+		return sqlschema.DataTypeBytea
 	}
 
 	return formatter.Formatter.DataTypeOf(dataType)

ee/sqlstore/postgressqlstore/formatter.go

@@ -0,0 +1,153 @@
+package postgressqlstore
+
+import (
+	"strings"
+
+	"github.com/SigNoz/signoz/pkg/sqlstore"
+	"github.com/uptrace/bun/schema"
+)
+
+type formatter struct {
+	bunf schema.Formatter
+}
+
+func newFormatter(dialect schema.Dialect) sqlstore.SQLFormatter {
+	return &formatter{bunf: schema.NewFormatter(dialect)}
+}
+
+func (f *formatter) JSONExtractString(column, path string) []byte {
+	var sql []byte
+	sql = f.bunf.AppendIdent(sql, column)
+	sql = append(sql, f.convertJSONPathToPostgres(path)...)
+	return sql
+}
+
+func (f *formatter) JSONType(column, path string) []byte {
+	var sql []byte
+	sql = append(sql, "jsonb_typeof("...)
+	sql = f.bunf.AppendIdent(sql, column)
+	sql = append(sql, f.convertJSONPathToPostgresWithMode(path, false)...)
+	sql = append(sql, ')')
+	return sql
+}
+
+func (f *formatter) JSONIsArray(column, path string) []byte {
+	var sql []byte
+	sql = append(sql, f.JSONType(column, path)...)
+	sql = append(sql, " = "...)
+	sql = schema.Append(f.bunf, sql, "array")
+	return sql
+}
+
+func (f *formatter) JSONArrayElements(column, path, alias string) ([]byte, []byte) {
+	var sql []byte
+	sql = append(sql, "jsonb_array_elements("...)
+	sql = f.bunf.AppendIdent(sql, column)
+	sql = append(sql, f.convertJSONPathToPostgresWithMode(path, false)...)
+	sql = append(sql, ") AS "...)
+	sql = f.bunf.AppendIdent(sql, alias)
+
+	return sql, []byte(alias)
+}
+
+func (f *formatter) JSONArrayOfStrings(column, path, alias string) ([]byte, []byte) {
+	var sql []byte
+	sql = append(sql, "jsonb_array_elements_text("...)
+	sql = f.bunf.AppendIdent(sql, column)
+	sql = append(sql, f.convertJSONPathToPostgresWithMode(path, false)...)
+	sql = append(sql, ") AS "...)
+	sql = f.bunf.AppendIdent(sql, alias)
+
+	return sql, append([]byte(alias), "::text"...)
+}
+
+func (f *formatter) JSONKeys(column, path, alias string) ([]byte, []byte) {
+	var sql []byte
+	sql = append(sql, "jsonb_each("...)
+	sql = f.bunf.AppendIdent(sql, column)
+	sql = append(sql, f.convertJSONPathToPostgresWithMode(path, false)...)
+	sql = append(sql, ") AS "...)
+	sql = f.bunf.AppendIdent(sql, alias)
+
+	return sql, append([]byte(alias), ".key"...)
+}
+
+func (f *formatter) JSONArrayAgg(expression string) []byte {
+	var sql []byte
+	sql = append(sql, "jsonb_agg("...)
+	sql = append(sql, expression...)
+	sql = append(sql, ')')
+	return sql
+}
+
+func (f *formatter) JSONArrayLiteral(values ...string) []byte {
+	var sql []byte
+	sql = append(sql, "jsonb_build_array("...)
+	for idx, value := range values {
+		if idx > 0 {
+			sql = append(sql, ", "...)
+		}
+		sql = schema.Append(f.bunf, sql, value)
+	}
+	sql = append(sql, ')')
+	return sql
+}
+
+func (f *formatter) TextToJsonColumn(column string) []byte {
+	var sql []byte
+	sql = f.bunf.AppendIdent(sql, column)
+	sql = append(sql, "::jsonb"...)
+	return sql
+}
+
+func (f *formatter) convertJSONPathToPostgres(jsonPath string) []byte {
+	return f.convertJSONPathToPostgresWithMode(jsonPath, true)
+}
+
+func (f *formatter) convertJSONPathToPostgresWithMode(jsonPath string, asText bool) []byte {
+	path := strings.TrimPrefix(strings.TrimPrefix(jsonPath, "$"), ".")
+
+	if path == "" {
+		return nil
+	}
+
+	parts := strings.Split(path, ".")
+
+	var validParts []string
+	for _, part := range parts {
+		if part != "" {
+			validParts = append(validParts, part)
+		}
+	}
+
+	if len(validParts) == 0 {
+		return nil
+	}
+
+	var result []byte
+
+	for idx, part := range validParts {
+		if idx == len(validParts)-1 {
+			if asText {
+				result = append(result, "->>"...)
+			} else {
+				result = append(result, "->"...)
+			}
+			result = schema.Append(f.bunf, result, part)
+			return result
+		}
+
+		result = append(result, "->"...)
+		result = schema.Append(f.bunf, result, part)
+	}
+
+	return result
+}
+
+func (f *formatter) LowerExpression(expression string) []byte {
+	var sql []byte
+	sql = append(sql, "lower("...)
+	sql = append(sql, expression...)
+	sql = append(sql, ')')
+	return sql
+}

ee/sqlstore/postgressqlstore/formatter_test.go

@@ -0,0 +1,500 @@
+package postgressqlstore
+
+import (
+	"testing"
+
+	"github.com/stretchr/testify/assert"
+	"github.com/uptrace/bun/dialect/pgdialect"
+)
+
+func TestJSONExtractString(t *testing.T) {
+	tests := []struct {
+		name     string
+		column   string
+		path     string
+		expected string
+	}{
+		{
+			name:     "simple path",
+			column:   "data",
+			path:     "$.field",
+			expected: `"data"->>'field'`,
+		},
+		{
+			name:     "nested path",
+			column:   "metadata",
+			path:     "$.user.name",
+			expected: `"metadata"->'user'->>'name'`,
+		},
+		{
+			name:     "deeply nested path",
+			column:   "json_col",
+			path:     "$.level1.level2.level3",
+			expected: `"json_col"->'level1'->'level2'->>'level3'`,
+		},
+		{
+			name:     "root path",
+			column:   "json_col",
+			path:     "$",
+			expected: `"json_col"`,
+		},
+		{
+			name:     "empty path",
+			column:   "data",
+			path:     "",
+			expected: `"data"`,
+		},
+	}
+
+	for _, tt := range tests {
+		t.Run(tt.name, func(t *testing.T) {
+			f := newFormatter(pgdialect.New())
+			got := string(f.JSONExtractString(tt.column, tt.path))
+			assert.Equal(t, tt.expected, got)
+		})
+	}
+}
+
+func TestJSONType(t *testing.T) {
+	tests := []struct {
+		name     string
+		column   string
+		path     string
+		expected string
+	}{
+		{
+			name:     "simple path",
+			column:   "data",
+			path:     "$.field",
+			expected: `jsonb_typeof("data"->'field')`,
+		},
+		{
+			name:     "nested path",
+			column:   "metadata",
+			path:     "$.user.age",
+			expected: `jsonb_typeof("metadata"->'user'->'age')`,
+		},
+		{
+			name:     "root path",
+			column:   "json_col",
+			path:     "$",
+			expected: `jsonb_typeof("json_col")`,
+		},
+		{
+			name:     "empty path",
+			column:   "data",
+			path:     "",
+			expected: `jsonb_typeof("data")`,
+		},
+	}
+
+	for _, tt := range tests {
+		t.Run(tt.name, func(t *testing.T) {
+			f := newFormatter(pgdialect.New())
+			got := string(f.JSONType(tt.column, tt.path))
+			assert.Equal(t, tt.expected, got)
+		})
+	}
+}
+
+func TestJSONIsArray(t *testing.T) {
+	tests := []struct {
+		name     string
+		column   string
+		path     string
+		expected string
+	}{
+		{
+			name:     "simple path",
+			column:   "data",
+			path:     "$.items",
+			expected: `jsonb_typeof("data"->'items') = 'array'`,
+		},
+		{
+			name:     "nested path",
+			column:   "metadata",
+			path:     "$.user.tags",
+			expected: `jsonb_typeof("metadata"->'user'->'tags') = 'array'`,
+		},
+		{
+			name:     "root path",
+			column:   "json_col",
+			path:     "$",
+			expected: `jsonb_typeof("json_col") = 'array'`,
+		},
+		{
+			name:     "empty path",
+			column:   "data",
+			path:     "",
+			expected: `jsonb_typeof("data") = 'array'`,
+		},
+	}
+
+	for _, tt := range tests {
+		t.Run(tt.name, func(t *testing.T) {
+			f := newFormatter(pgdialect.New())
+			got := string(f.JSONIsArray(tt.column, tt.path))
+			assert.Equal(t, tt.expected, got)
+		})
+	}
+}
+
+func TestJSONArrayElements(t *testing.T) {
+	tests := []struct {
+		name     string
+		column   string
+		path     string
+		alias    string
+		expected string
+	}{
+		{
+			name:     "root path with dollar sign",
+			column:   "data",
+			path:     "$",
+			alias:    "elem",
+			expected: `jsonb_array_elements("data") AS "elem"`,
+		},
+		{
+			name:     "root path empty",
+			column:   "data",
+			path:     "",
+			alias:    "elem",
+			expected: `jsonb_array_elements("data") AS "elem"`,
+		},
+		{
+			name:     "nested path",
+			column:   "metadata",
+			path:     "$.items",
+			alias:    "item",
+			expected: `jsonb_array_elements("metadata"->'items') AS "item"`,
+		},
+		{
+			name:     "deeply nested path",
+			column:   "json_col",
+			path:     "$.user.tags",
+			alias:    "tag",
+			expected: `jsonb_array_elements("json_col"->'user'->'tags') AS "tag"`,
+		},
+	}
+
+	for _, tt := range tests {
+		t.Run(tt.name, func(t *testing.T) {
+			f := newFormatter(pgdialect.New())
+			got, _ := f.JSONArrayElements(tt.column, tt.path, tt.alias)
+			assert.Equal(t, tt.expected, string(got))
+		})
+	}
+}
+
+func TestJSONArrayOfStrings(t *testing.T) {
+	tests := []struct {
+		name     string
+		column   string
+		path     string
+		alias    string
+		expected string
+	}{
+		{
+			name:     "root path with dollar sign",
+			column:   "data",
+			path:     "$",
+			alias:    "str",
+			expected: `jsonb_array_elements_text("data") AS "str"`,
+		},
+		{
+			name:     "root path empty",
+			column:   "data",
+			path:     "",
+			alias:    "str",
+			expected: `jsonb_array_elements_text("data") AS "str"`,
+		},
+		{
+			name:     "nested path",
+			column:   "metadata",
+			path:     "$.strings",
+			alias:    "s",
+			expected: `jsonb_array_elements_text("metadata"->'strings') AS "s"`,
+		},
+	}
+
+	for _, tt := range tests {
+		t.Run(tt.name, func(t *testing.T) {
+			f := newFormatter(pgdialect.New())
+			got, _ := f.JSONArrayOfStrings(tt.column, tt.path, tt.alias)
+			assert.Equal(t, tt.expected, string(got))
+		})
+	}
+}
+
+func TestJSONKeys(t *testing.T) {
+	tests := []struct {
+		name     string
+		column   string
+		path     string
+		alias    string
+		expected string
+	}{
+		{
+			name:     "root path with dollar sign",
+			column:   "data",
+			path:     "$",
+			alias:    "k",
+			expected: `jsonb_each("data") AS "k"`,
+		},
+		{
+			name:     "root path empty",
+			column:   "data",
+			path:     "",
+			alias:    "k",
+			expected: `jsonb_each("data") AS "k"`,
+		},
+		{
+			name:     "nested path",
+			column:   "metadata",
+			path:     "$.object",
+			alias:    "key",
+			expected: `jsonb_each("metadata"->'object') AS "key"`,
+		},
+	}
+
+	for _, tt := range tests {
+		t.Run(tt.name, func(t *testing.T) {
+			f := newFormatter(pgdialect.New())
+			got, _ := f.JSONKeys(tt.column, tt.path, tt.alias)
+			assert.Equal(t, tt.expected, string(got))
+		})
+	}
+}
+
+func TestJSONArrayAgg(t *testing.T) {
+	tests := []struct {
+		name       string
+		expression string
+		expected   string
+	}{
+		{
+			name:       "simple column",
+			expression: "id",
+			expected:   "jsonb_agg(id)",
+		},
+		{
+			name:       "expression with function",
+			expression: "DISTINCT name",
+			expected:   "jsonb_agg(DISTINCT name)",
+		},
+		{
+			name:       "complex expression",
+			expression: "data->>'field'",
+			expected:   "jsonb_agg(data->>'field')",
+		},
+	}
+
+	for _, tt := range tests {
+		t.Run(tt.name, func(t *testing.T) {
+			f := newFormatter(pgdialect.New())
+			got := string(f.JSONArrayAgg(tt.expression))
+			assert.Equal(t, tt.expected, got)
+		})
+	}
+}
+
+func TestJSONArrayLiteral(t *testing.T) {
+	tests := []struct {
+		name     string
+		values   []string
+		expected string
+	}{
+		{
+			name:     "empty array",
+			values:   []string{},
+			expected: "jsonb_build_array()",
+		},
+		{
+			name:     "single value",
+			values:   []string{"value1"},
+			expected: "jsonb_build_array('value1')",
+		},
+		{
+			name:     "multiple values",
+			values:   []string{"value1", "value2", "value3"},
+			expected: "jsonb_build_array('value1', 'value2', 'value3')",
+		},
+		{
+			name:     "values with special characters",
+			values:   []string{"test", "with space", "with-dash"},
+			expected: "jsonb_build_array('test', 'with space', 'with-dash')",
+		},
+	}
+
+	for _, tt := range tests {
+		t.Run(tt.name, func(t *testing.T) {
+			f := newFormatter(pgdialect.New())
+			got := string(f.JSONArrayLiteral(tt.values...))
+			assert.Equal(t, tt.expected, got)
+		})
+	}
+}
+
+func TestConvertJSONPathToPostgresWithMode(t *testing.T) {
+	tests := []struct {
+		name     string
+		jsonPath string
+		asText   bool
+		expected string
+	}{
+		{
+			name:     "simple path as text",
+			jsonPath: "$.field",
+			asText:   true,
+			expected: "->>'field'",
+		},
+		{
+			name:     "simple path as json",
+			jsonPath: "$.field",
+			asText:   false,
+			expected: "->'field'",
+		},
+		{
+			name:     "nested path as text",
+			jsonPath: "$.user.name",
+			asText:   true,
+			expected: "->'user'->>'name'",
+		},
+		{
+			name:     "nested path as json",
+			jsonPath: "$.user.name",
+			asText:   false,
+			expected: "->'user'->'name'",
+		},
+		{
+			name:     "deeply nested as text",
+			jsonPath: "$.a.b.c.d",
+			asText:   true,
+			expected: "->'a'->'b'->'c'->>'d'",
+		},
+		{
+			name:     "root path",
+			jsonPath: "$",
+			asText:   true,
+			expected: "",
+		},
+		{
+			name:     "empty path",
+			jsonPath: "",
+			asText:   true,
+			expected: "",
+		},
+	}
+
+	for _, tt := range tests {
+		t.Run(tt.name, func(t *testing.T) {
+			f := newFormatter(pgdialect.New()).(*formatter)
+			got := string(f.convertJSONPathToPostgresWithMode(tt.jsonPath, tt.asText))
+			assert.Equal(t, tt.expected, got)
+		})
+	}
+}
+
+func TestTextToJsonColumn(t *testing.T) {
+	tests := []struct {
+		name     string
+		column   string
+		expected string
+	}{
+		{
+			name:     "simple column name",
+			column:   "data",
+			expected: `"data"::jsonb`,
+		},
+		{
+			name:     "column with underscore",
+			column:   "user_data",
+			expected: `"user_data"::jsonb`,
+		},
+		{
+			name:     "column with special characters",
+			column:   "json-col",
+			expected: `"json-col"::jsonb`,
+		},
+	}
+
+	for _, tt := range tests {
+		t.Run(tt.name, func(t *testing.T) {
+			f := newFormatter(pgdialect.New())
+			got := string(f.TextToJsonColumn(tt.column))
+			assert.Equal(t, tt.expected, got)
+		})
+	}
+}
+
+func TestLowerExpression(t *testing.T) {
+	tests := []struct {
+		name     string
+		expr     string
+		expected string
+	}{
+		{
+			name:     "simple column name",
+			expr:     "name",
+			expected: "lower(name)",
+		},
+		{
+			name:     "quoted column identifier",
+			expr:     `"column_name"`,
+			expected: `lower("column_name")`,
+		},
+		{
+			name:     "jsonb text extraction",
+			expr:     "data->>'field'",
+			expected: "lower(data->>'field')",
+		},
+		{
+			name:     "nested jsonb extraction",
+			expr:     "metadata->'user'->>'name'",
+			expected: "lower(metadata->'user'->>'name')",
+		},
+		{
+			name:     "jsonb_typeof expression",
+			expr:     "jsonb_typeof(data->'field')",
+			expected: "lower(jsonb_typeof(data->'field'))",
+		},
+		{
+			name:     "string concatenation",
+			expr:     "first_name || ' ' || last_name",
+			expected: "lower(first_name || ' ' || last_name)",
+		},
+		{
+			name:     "CAST expression",
+			expr:     "CAST(value AS TEXT)",
+			expected: "lower(CAST(value AS TEXT))",
+		},
+		{
+			name:     "COALESCE expression",
+			expr:     "COALESCE(name, 'default')",
+			expected: "lower(COALESCE(name, 'default'))",
+		},
+		{
+			name:     "subquery column",
+			expr:     "users.email",
+			expected: "lower(users.email)",
+		},
+		{
+			name:     "quoted identifier with special chars",
+			expr:     `"user-name"`,
+			expected: `lower("user-name")`,
+		},
+		{
+			name:     "jsonb to text cast",
+			expr:     "data::text",
+			expected: "lower(data::text)",
+		},
+	}
+
+	for _, tt := range tests {
+		t.Run(tt.name, func(t *testing.T) {
+			f := newFormatter(pgdialect.New())
+			got := string(f.LowerExpression(tt.expr))
+			assert.Equal(t, tt.expected, got)
+		})
+	}
+}

ee/sqlstore/postgressqlstore/provider.go

@@ -15,10 +15,11 @@ import (
 )
 
 type provider struct {
-	settings factory.ScopedProviderSettings
-	sqldb    *sql.DB
-	bundb    *sqlstore.BunDB
-	dialect  *dialect
+	settings  factory.ScopedProviderSettings
+	sqldb     *sql.DB
+	bundb     *sqlstore.BunDB
+	dialect   *dialect
+	formatter sqlstore.SQLFormatter
 }
 
 func NewFactory(hookFactories ...factory.ProviderFactory[sqlstore.SQLStoreHook, sqlstore.Config]) factory.ProviderFactory[sqlstore.SQLStore, sqlstore.Config] {
@@ -55,11 +56,14 @@ func New(ctx context.Context, providerSettings factory.ProviderSettings, config
 
 	sqldb := stdlib.OpenDBFromPool(pool)
 
+	pgDialect := pgdialect.New()
+	bunDB := sqlstore.NewBunDB(settings, sqldb, pgDialect, hooks)
 	return &provider{
-		settings: settings,
-		sqldb:    sqldb,
-		bundb:    sqlstore.NewBunDB(settings, sqldb, pgdialect.New(), hooks),
-		dialect:  new(dialect),
+		settings:  settings,
+		sqldb:     sqldb,
+		bundb:     bunDB,
+		dialect:   new(dialect),
+		formatter: newFormatter(bunDB.Dialect()),
 	}, nil
 }
 
@@ -75,6 +79,10 @@ func (provider *provider) Dialect() sqlstore.SQLDialect {
 	return provider.dialect
 }
 
+func (provider *provider) Formatter() sqlstore.SQLFormatter {
+	return provider.formatter
+}
+
 func (provider *provider) BunDBCtx(ctx context.Context) bun.IDB {
 	return provider.bundb.BunDBCtx(ctx)
 }

ee/zeus/config.go

@@ -1,10 +1,10 @@
 package zeus
 
 import (
-	"fmt"
 	neturl "net/url"
 	"sync"
 
+	"github.com/SigNoz/signoz/pkg/errors"
 	"github.com/SigNoz/signoz/pkg/zeus"
 )
 
@@ -24,17 +24,17 @@ func Config() zeus.Config {
 	once.Do(func() {
 		parsedURL, err := neturl.Parse(url)
 		if err != nil {
-			panic(fmt.Errorf("invalid zeus URL: %w", err))
+			panic(errors.WrapInternalf(err, errors.CodeInternal, "invalid zeus URL"))
 		}
 
 		deprecatedParsedURL, err := neturl.Parse(deprecatedURL)
 		if err != nil {
-			panic(fmt.Errorf("invalid zeus deprecated URL: %w", err))
+			panic(errors.WrapInternalf(err, errors.CodeInternal, "invalid zeus deprecated URL"))
 		}
 
 		config = zeus.Config{URL: parsedURL, DeprecatedURL: deprecatedParsedURL}
 		if err := config.Validate(); err != nil {
-			panic(fmt.Errorf("invalid zeus config: %w", err))
+			panic(errors.WrapInternalf(err, errors.CodeInternal, "invalid zeus config"))
 		}
 	})
 

frontend/package.json

@@ -69,7 +69,7 @@
 		"antd": "5.11.0",
 		"antd-table-saveas-excel": "2.2.1",
 		"antlr4": "4.13.2",
-		"axios": "1.8.2",
+		"axios": "1.12.0",
 		"babel-eslint": "^10.1.0",
 		"babel-jest": "^29.6.4",
 		"babel-loader": "9.1.3",
@@ -280,6 +280,7 @@
 		"got": "11.8.5",
 		"form-data": "4.0.4",
 		"brace-expansion": "^2.0.2",
-		"on-headers": "^1.1.0"
+		"on-headers": "^1.1.0",
+		"tmp": "0.2.4"
 	}
 }

frontend/src/AppRoutes/index.tsx

@@ -27,7 +27,6 @@ import { IUser } from 'providers/App/types';
 import { DashboardProvider } from 'providers/Dashboard/Dashboard';
 import { ErrorModalProvider } from 'providers/ErrorModalProvider';
 import { KBarCommandPaletteProvider } from 'providers/KBarCommandPaletteProvider';
-import { MarkersProvider } from 'providers/Markers/Markers';
 import { PreferenceContextProvider } from 'providers/preferences/context/PreferenceContextProvider';
 import { QueryBuilderProvider } from 'providers/QueryBuilder';
 import { Suspense, useCallback, useEffect, useState } from 'react';
@@ -275,7 +274,7 @@ function App(): JSX.Element {
 					chat_settings: {
 						app_id: process.env.PYLON_APP_ID,
 						email: user.email,
-						name: user.displayName,
+						name: user.displayName || user.email,
 					},
 				};
 			}
@@ -380,34 +379,30 @@ function App(): JSX.Element {
 									<PrivateRoute>
 										<ResourceProvider>
 											<QueryBuilderProvider>
-												<MarkersProvider>
-													<DashboardProvider>
-														<KeyboardHotkeysProvider>
-															<AlertRuleProvider>
-																<AppLayout>
-																	<PreferenceContextProvider>
-																		<Suspense
-																			fallback={<Spinner size="large" tip="Loading..." />}
-																		>
-																			<Switch>
-																				{routes.map(({ path, component, exact }) => (
-																					<Route
-																						key={`${path}`}
-																						exact={exact}
-																						path={path}
-																						component={component}
-																					/>
-																				))}
-																				<Route exact path="/" component={Home} />
-																				<Route path="*" component={NotFound} />
-																			</Switch>
-																		</Suspense>
-																	</PreferenceContextProvider>
-																</AppLayout>
-															</AlertRuleProvider>
-														</KeyboardHotkeysProvider>
-													</DashboardProvider>
-												</MarkersProvider>
+												<DashboardProvider>
+													<KeyboardHotkeysProvider>
+														<AlertRuleProvider>
+															<AppLayout>
+																<PreferenceContextProvider>
+																	<Suspense fallback={<Spinner size="large" tip="Loading..." />}>
+																		<Switch>
+																			{routes.map(({ path, component, exact }) => (
+																				<Route
+																					key={`${path}`}
+																					exact={exact}
+																					path={path}
+																					component={component}
+																				/>
+																			))}
+																			<Route exact path="/" component={Home} />
+																			<Route path="*" component={NotFound} />
+																		</Switch>
+																	</Suspense>
+																</PreferenceContextProvider>
+															</AppLayout>
+														</AlertRuleProvider>
+													</KeyboardHotkeysProvider>
+												</DashboardProvider>
 											</QueryBuilderProvider>
 										</ResourceProvider>
 									</PrivateRoute>

frontend/src/api/common/logEvent.ts

@@ -1,4 +1,4 @@
-import { ApiBaseInstance as axios } from 'api';
+import { LogEventAxiosInstance as axios } from 'api';
 import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
 import { AxiosError } from 'axios';
 import { ErrorResponse, SuccessResponse } from 'types/api';

frontend/src/api/dynamicVariables/__tests__/getFieldKeys.test.ts

@@ -1,13 +1,11 @@
 /* eslint-disable sonarjs/no-duplicate-string */
-import { ApiBaseInstance } from 'api';
+import axios from 'api';
 
 import { getFieldKeys } from '../getFieldKeys';
 
 // Mock the API instance
 jest.mock('api', () => ({
-	ApiBaseInstance: {
-		get: jest.fn(),
-	},
+	get: jest.fn(),
 }));
 
 describe('getFieldKeys API', () => {
@@ -31,33 +29,33 @@ describe('getFieldKeys API', () => {
 
 	it('should call API with correct parameters when no args provided', async () => {
 		// Mock successful API response
-		(ApiBaseInstance.get as jest.Mock).mockResolvedValueOnce(mockSuccessResponse);
+		(axios.get as jest.Mock).mockResolvedValueOnce(mockSuccessResponse);
 
 		// Call function with no parameters
 		await getFieldKeys();
 
 		// Verify API was called correctly with empty params object
-		expect(ApiBaseInstance.get).toHaveBeenCalledWith('/fields/keys', {
+		expect(axios.get).toHaveBeenCalledWith('/fields/keys', {
 			params: {},
 		});
 	});
 
 	it('should call API with signal parameter when provided', async () => {
 		// Mock successful API response
-		(ApiBaseInstance.get as jest.Mock).mockResolvedValueOnce(mockSuccessResponse);
+		(axios.get as jest.Mock).mockResolvedValueOnce(mockSuccessResponse);
 
 		// Call function with signal parameter
 		await getFieldKeys('traces');
 
 		// Verify API was called with signal parameter
-		expect(ApiBaseInstance.get).toHaveBeenCalledWith('/fields/keys', {
+		expect(axios.get).toHaveBeenCalledWith('/fields/keys', {
 			params: { signal: 'traces' },
 		});
 	});
 
 	it('should call API with name parameter when provided', async () => {
 		// Mock successful API response
-		(ApiBaseInstance.get as jest.Mock).mockResolvedValueOnce({
+		(axios.get as jest.Mock).mockResolvedValueOnce({
 			status: 200,
 			data: {
 				status: 'success',
@@ -72,14 +70,14 @@ describe('getFieldKeys API', () => {
 		await getFieldKeys(undefined, 'service');
 
 		// Verify API was called with name parameter
-		expect(ApiBaseInstance.get).toHaveBeenCalledWith('/fields/keys', {
+		expect(axios.get).toHaveBeenCalledWith('/fields/keys', {
 			params: { name: 'service' },
 		});
 	});
 
 	it('should call API with both signal and name when provided', async () => {
 		// Mock successful API response
-		(ApiBaseInstance.get as jest.Mock).mockResolvedValueOnce({
+		(axios.get as jest.Mock).mockResolvedValueOnce({
 			status: 200,
 			data: {
 				status: 'success',
@@ -94,14 +92,14 @@ describe('getFieldKeys API', () => {
 		await getFieldKeys('logs', 'service');
 
 		// Verify API was called with both parameters
-		expect(ApiBaseInstance.get).toHaveBeenCalledWith('/fields/keys', {
+		expect(axios.get).toHaveBeenCalledWith('/fields/keys', {
 			params: { signal: 'logs', name: 'service' },
 		});
 	});
 
 	it('should return properly formatted response', async () => {
 		// Mock API to return our response
-		(ApiBaseInstance.get as jest.Mock).mockResolvedValueOnce(mockSuccessResponse);
+		(axios.get as jest.Mock).mockResolvedValueOnce(mockSuccessResponse);
 
 		// Call the function
 		const result = await getFieldKeys('traces');

frontend/src/api/dynamicVariables/__tests__/getFieldValues.test.ts

@@ -1,13 +1,11 @@
 /* eslint-disable sonarjs/no-duplicate-string */
-import { ApiBaseInstance } from 'api';
+import axios from 'api';
 
 import { getFieldValues } from '../getFieldValues';
 
 // Mock the API instance
 jest.mock('api', () => ({
-	ApiBaseInstance: {
-		get: jest.fn(),
-	},
+	get: jest.fn(),
 }));
 
 describe('getFieldValues API', () => {
@@ -17,7 +15,7 @@ describe('getFieldValues API', () => {
 
 	it('should call the API with correct parameters (no options)', async () => {
 		// Mock API response
-		(ApiBaseInstance.get as jest.Mock).mockResolvedValueOnce({
+		(axios.get as jest.Mock).mockResolvedValueOnce({
 			status: 200,
 			data: {
 				status: 'success',
@@ -34,14 +32,14 @@ describe('getFieldValues API', () => {
 		await getFieldValues();
 
 		// Verify API was called correctly with empty params
-		expect(ApiBaseInstance.get).toHaveBeenCalledWith('/fields/values', {
+		expect(axios.get).toHaveBeenCalledWith('/fields/values', {
 			params: {},
 		});
 	});
 
 	it('should call the API with signal parameter', async () => {
 		// Mock API response
-		(ApiBaseInstance.get as jest.Mock).mockResolvedValueOnce({
+		(axios.get as jest.Mock).mockResolvedValueOnce({
 			status: 200,
 			data: {
 				status: 'success',
@@ -58,14 +56,14 @@ describe('getFieldValues API', () => {
 		await getFieldValues('traces');
 
 		// Verify API was called with signal parameter
-		expect(ApiBaseInstance.get).toHaveBeenCalledWith('/fields/values', {
+		expect(axios.get).toHaveBeenCalledWith('/fields/values', {
 			params: { signal: 'traces' },
 		});
 	});
 
 	it('should call the API with name parameter', async () => {
 		// Mock API response
-		(ApiBaseInstance.get as jest.Mock).mockResolvedValueOnce({
+		(axios.get as jest.Mock).mockResolvedValueOnce({
 			status: 200,
 			data: {
 				status: 'success',
@@ -82,14 +80,14 @@ describe('getFieldValues API', () => {
 		await getFieldValues(undefined, 'service.name');
 
 		// Verify API was called with name parameter
-		expect(ApiBaseInstance.get).toHaveBeenCalledWith('/fields/values', {
+		expect(axios.get).toHaveBeenCalledWith('/fields/values', {
 			params: { name: 'service.name' },
 		});
 	});
 
 	it('should call the API with value parameter', async () => {
 		// Mock API response
-		(ApiBaseInstance.get as jest.Mock).mockResolvedValueOnce({
+		(axios.get as jest.Mock).mockResolvedValueOnce({
 			status: 200,
 			data: {
 				status: 'success',
@@ -106,14 +104,14 @@ describe('getFieldValues API', () => {
 		await getFieldValues(undefined, 'service.name', 'front');
 
 		// Verify API was called with value parameter
-		expect(ApiBaseInstance.get).toHaveBeenCalledWith('/fields/values', {
+		expect(axios.get).toHaveBeenCalledWith('/fields/values', {
 			params: { name: 'service.name', searchText: 'front' },
 		});
 	});
 
 	it('should call the API with time range parameters', async () => {
 		// Mock API response
-		(ApiBaseInstance.get as jest.Mock).mockResolvedValueOnce({
+		(axios.get as jest.Mock).mockResolvedValueOnce({
 			status: 200,
 			data: {
 				status: 'success',
@@ -138,7 +136,7 @@ describe('getFieldValues API', () => {
 		);
 
 		// Verify API was called with time range parameters (converted to milliseconds)
-		expect(ApiBaseInstance.get).toHaveBeenCalledWith('/fields/values', {
+		expect(axios.get).toHaveBeenCalledWith('/fields/values', {
 			params: {
 				signal: 'logs',
 				name: 'service.name',
@@ -165,7 +163,7 @@ describe('getFieldValues API', () => {
 			},
 		};
 
-		(ApiBaseInstance.get as jest.Mock).mockResolvedValueOnce(mockResponse);
+		(axios.get as jest.Mock).mockResolvedValueOnce(mockResponse);
 
 		// Call the function
 		const result = await getFieldValues('traces', 'mixed.values');
@@ -196,7 +194,7 @@ describe('getFieldValues API', () => {
 		};
 
 		// Mock API to return our response
-		(ApiBaseInstance.get as jest.Mock).mockResolvedValueOnce(mockApiResponse);
+		(axios.get as jest.Mock).mockResolvedValueOnce(mockApiResponse);
 
 		// Call the function
 		const result = await getFieldValues('traces', 'service.name');

frontend/src/api/dynamicVariables/getFieldKeys.ts

@@ -1,4 +1,4 @@
-import { ApiBaseInstance } from 'api';
+import axios from 'api';
 import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
 import { AxiosError } from 'axios';
 import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
@@ -24,7 +24,7 @@ export const getFieldKeys = async (
 	}
 
 	try {
-		const response = await ApiBaseInstance.get('/fields/keys', { params });
+		const response = await axios.get('/fields/keys', { params });
 
 		return {
 			httpStatusCode: response.status,

frontend/src/api/dynamicVariables/getFieldValues.ts

@@ -1,5 +1,5 @@
 /* eslint-disable sonarjs/cognitive-complexity */
-import { ApiBaseInstance } from 'api';
+import axios from 'api';
 import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
 import { AxiosError } from 'axios';
 import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
@@ -47,7 +47,7 @@ export const getFieldValues = async (
 	}
 
 	try {
-		const response = await ApiBaseInstance.get('/fields/values', { params });
+		const response = await axios.get('/fields/values', { params });
 
 		// Normalize values from different types (stringValues, boolValues, etc.)
 		if (response.data?.data?.values) {

frontend/src/api/index.ts

@@ -86,8 +86,9 @@ const interceptorRejected = async (
 
 			if (
 				response.status === 401 &&
-				// if the session rotate call errors out with 401 or the delete sessions call returns 401 then we do not retry!
+				// if the session rotate call or the create session errors out with 401 or the delete sessions call returns 401 then we do not retry!
 				response.config.url !== '/sessions/rotate' &&
+				response.config.url !== '/sessions/email_password' &&
 				!(
 					response.config.url === '/sessions' && response.config.method === 'delete'
 				)
@@ -199,15 +200,15 @@ ApiV5Instance.interceptors.request.use(interceptorsRequestResponse);
 //
 
 // axios Base
-export const ApiBaseInstance = axios.create({
+export const LogEventAxiosInstance = axios.create({
 	baseURL: `${ENVIRONMENT.baseURL}${apiV1}`,
 });
 
-ApiBaseInstance.interceptors.response.use(
+LogEventAxiosInstance.interceptors.response.use(
 	interceptorsResponse,
 	interceptorRejectedBase,
 );
-ApiBaseInstance.interceptors.request.use(interceptorsRequestResponse);
+LogEventAxiosInstance.interceptors.request.use(interceptorsRequestResponse);
 //
 
 // gateway Api V1

frontend/src/api/infra/getHostAttributeKeys.ts

@@ -1,4 +1,4 @@
-import { ApiBaseInstance } from 'api';
+import axios from 'api';
 import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
 import { AxiosError, AxiosResponse } from 'axios';
 import { baseAutoCompleteIdKeysOrder } from 'constants/queryBuilder';
@@ -17,7 +17,7 @@ export const getHostAttributeKeys = async (
 	try {
 		const response: AxiosResponse<{
 			data: IQueryAutocompleteResponse;
-		}> = await ApiBaseInstance.get(
+		}> = await axios.get(
 			`/${entity}/attribute_keys?dataSource=metrics&searchText=${searchText}`,
 			{
 				params: {

frontend/src/api/messagingQueues/onboarding/getOnboardingStatus.ts

@@ -1,4 +1,4 @@
-import { ApiBaseInstance } from 'api';
+import axios from 'api';
 import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
 import { AxiosError } from 'axios';
 import { SOMETHING_WENT_WRONG } from 'constants/api';
@@ -20,7 +20,7 @@ const getOnboardingStatus = async (props: {
 }): Promise<SuccessResponse<OnboardingStatusResponse> | ErrorResponse> => {
 	const { endpointService, ...rest } = props;
 	try {
-		const response = await ApiBaseInstance.post(
+		const response = await axios.post(
 			`/messaging-queues/kafka/onboarding/${endpointService || 'consumers'}`,
 			rest,
 		);

frontend/src/api/metrics/getService.ts

@@ -1,13 +1,20 @@
-import axios from 'api';
+import { ApiV2Instance } from 'api';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
+import { AxiosError } from 'axios';
+import { ErrorV2Resp } from 'types/api';
 import { PayloadProps, Props } from 'types/api/metrics/getService';
 
 const getService = async (props: Props): Promise<PayloadProps> => {
-	const response = await axios.post(`/services`, {
-		start: `${props.start}`,
-		end: `${props.end}`,
-		tags: props.selectedTags,
-	});
-	return response.data;
+	try {
+		const response = await ApiV2Instance.post(`/services`, {
+			start: `${props.start}`,
+			end: `${props.end}`,
+			tags: props.selectedTags,
+		});
+		return response.data.data;
+	} catch (error) {
+		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
+	}
 };
 
 export default getService;

frontend/src/api/metrics/getTopOperations.ts

@@ -1,22 +1,27 @@
-import axios from 'api';
+import { ApiV2Instance } from 'api';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
+import { AxiosError } from 'axios';
+import { ErrorV2Resp } from 'types/api';
 import { PayloadProps, Props } from 'types/api/metrics/getTopOperations';
 
 const getTopOperations = async (props: Props): Promise<PayloadProps> => {
-	const endpoint = props.isEntryPoint
-		? '/service/entry_point_operations'
-		: '/service/top_operations';
+	try {
+		const endpoint = props.isEntryPoint
+			? '/service/entry_point_operations'
+			: '/service/top_operations';
 
-	const response = await axios.post(endpoint, {
-		start: `${props.start}`,
-		end: `${props.end}`,
-		service: props.service,
-		tags: props.selectedTags,
-	});
+		const response = await ApiV2Instance.post(endpoint, {
+			start: `${props.start}`,
+			end: `${props.end}`,
+			service: props.service,
+			tags: props.selectedTags,
+			limit: 5000,
+		});
 
-	if (props.isEntryPoint) {
 		return response.data.data;
+	} catch (error) {
+		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
 	}
-	return response.data;
 };
 
 export default getTopOperations;

frontend/src/api/metricsExplorer/updateMetricMetadata.ts

@@ -9,6 +9,7 @@ export interface UpdateMetricMetadataProps {
 	metricType: MetricType;
 	temporality?: Temporality;
 	isMonotonic?: boolean;
+	unit?: string;
 }
 
 export interface UpdateMetricMetadataResponse {

frontend/src/api/quickFilters/getCustomFilters.ts

@@ -1,4 +1,4 @@
-import { ApiBaseInstance } from 'api';
+import axios from 'api';
 import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
 import { AxiosError } from 'axios';
 import { ErrorResponse, SuccessResponse } from 'types/api';
@@ -9,7 +9,7 @@ const getCustomFilters = async (
 ): Promise<SuccessResponse<PayloadProps> | ErrorResponse> => {
 	const { signal } = props;
 	try {
-		const response = await ApiBaseInstance.get(`orgs/me/filters/${signal}`);
+		const response = await axios.get(`/orgs/me/filters/${signal}`);
 
 		return {
 			statusCode: 200,

frontend/src/api/quickFilters/updateCustomFilters.ts

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

frontend/src/api/settings/setRetentionV2.ts

@@ -8,7 +8,7 @@ const setRetentionV2 = async ({
 	type,
 	defaultTTLDays,
 	coldStorageVolume,
-	coldStorageDuration,
+	coldStorageDurationDays,
 	ttlConditions,
 }: PropsV2): Promise<SuccessResponseV2<PayloadPropsV2>> => {
 	try {
@@ -16,7 +16,7 @@ const setRetentionV2 = async ({
 			type,
 			defaultTTLDays,
 			coldStorageVolume,
-			coldStorageDuration,
+			coldStorageDurationDays,
 			ttlConditions,
 		});
 

frontend/src/api/thirdPartyApis/listOverview.ts

@@ -1,4 +1,4 @@
-import { ApiBaseInstance } from 'api';
+import axios from 'api';
 import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
 import { AxiosError } from 'axios';
 import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
@@ -9,15 +9,12 @@ const listOverview = async (
 ): Promise<SuccessResponseV2<PayloadProps>> => {
 	const { start, end, show_ip: showIp, filter } = props;
 	try {
-		const response = await ApiBaseInstance.post(
-			`/third-party-apis/overview/list`,
-			{
-				start,
-				end,
-				show_ip: showIp,
-				filter,
-			},
-		);
+		const response = await axios.post(`/third-party-apis/overview/list`, {
+			start,
+			end,
+			show_ip: showIp,
+			filter,
+		});
 
 		return {
 			httpStatusCode: response.status,

frontend/src/api/trace/getSpanPercentiles.ts

@@ -0,0 +1,28 @@
+import axios from 'api';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
+import { AxiosError } from 'axios';
+import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
+import {
+	GetSpanPercentilesProps,
+	GetSpanPercentilesResponseDataProps,
+} from 'types/api/trace/getSpanPercentiles';
+
+const getSpanPercentiles = async (
+	props: GetSpanPercentilesProps,
+): Promise<SuccessResponseV2<GetSpanPercentilesResponseDataProps>> => {
+	try {
+		const response = await axios.post('/span_percentile', {
+			...props,
+		});
+
+		return {
+			httpStatusCode: response.status,
+			data: response.data.data,
+		};
+	} catch (error) {
+		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
+		throw error;
+	}
+};
+
+export default getSpanPercentiles;

frontend/src/api/v5/queryRange/getQueryRange.ts

@@ -11,7 +11,7 @@ import {
 export const getQueryRangeV5 = async (
 	props: QueryRangePayloadV5,
 	version: string,
-	signal: AbortSignal,
+	signal?: AbortSignal,
 	headers?: Record<string, string>,
 ): Promise<SuccessResponseV2<MetricRangePayloadV5>> => {
 	try {

frontend/src/components/Graph/__tests__/yAxisConfig.test.ts

@@ -0,0 +1,371 @@
+/* eslint-disable sonarjs/no-duplicate-string */
+import { getYAxisFormattedValue, PrecisionOptionsEnum } from '../yAxisConfig';
+
+const testFullPrecisionGetYAxisFormattedValue = (
+	value: string,
+	format: string,
+): string => getYAxisFormattedValue(value, format, PrecisionOptionsEnum.FULL);
+
+describe('getYAxisFormattedValue - none (full precision legacy assertions)', () => {
+	test('large integers and decimals', () => {
+		expect(testFullPrecisionGetYAxisFormattedValue('250034', 'none')).toBe(
+			'250034',
+		);
+		expect(
+			testFullPrecisionGetYAxisFormattedValue('250034897.12345', 'none'),
+		).toBe('250034897.12345');
+		expect(
+			testFullPrecisionGetYAxisFormattedValue('250034897.02354', 'none'),
+		).toBe('250034897.02354');
+		expect(testFullPrecisionGetYAxisFormattedValue('9999999.9999', 'none')).toBe(
+			'9999999.9999',
+		);
+	});
+
+	test('preserves leading zeros after decimal until first non-zero', () => {
+		expect(testFullPrecisionGetYAxisFormattedValue('1.0000234', 'none')).toBe(
+			'1.0000234',
+		);
+		expect(testFullPrecisionGetYAxisFormattedValue('0.00003', 'none')).toBe(
+			'0.00003',
+		);
+	});
+
+	test('trims to three significant decimals and removes trailing zeros', () => {
+		expect(
+			testFullPrecisionGetYAxisFormattedValue('0.000000250034', 'none'),
+		).toBe('0.000000250034');
+		expect(testFullPrecisionGetYAxisFormattedValue('0.00000025', 'none')).toBe(
+			'0.00000025',
+		);
+
+		// Big precision, limiting the javascript precision (~16 digits)
+		expect(
+			testFullPrecisionGetYAxisFormattedValue('1.0000000000000001', 'none'),
+		).toBe('1');
+		expect(
+			testFullPrecisionGetYAxisFormattedValue('1.00555555559595876', 'none'),
+		).toBe('1.005555555595958');
+
+		expect(testFullPrecisionGetYAxisFormattedValue('0.000000001', 'none')).toBe(
+			'0.000000001',
+		);
+		expect(
+			testFullPrecisionGetYAxisFormattedValue('0.000000250000', 'none'),
+		).toBe('0.00000025');
+	});
+
+	test('whole numbers normalize', () => {
+		expect(testFullPrecisionGetYAxisFormattedValue('1000', 'none')).toBe('1000');
+		expect(testFullPrecisionGetYAxisFormattedValue('99.5458', 'none')).toBe(
+			'99.5458',
+		);
+		expect(testFullPrecisionGetYAxisFormattedValue('1.234567', 'none')).toBe(
+			'1.234567',
+		);
+		expect(testFullPrecisionGetYAxisFormattedValue('99.998', 'none')).toBe(
+			'99.998',
+		);
+	});
+
+	test('strip redundant decimal zeros', () => {
+		expect(testFullPrecisionGetYAxisFormattedValue('1000.000', 'none')).toBe(
+			'1000',
+		);
+		expect(testFullPrecisionGetYAxisFormattedValue('99.500', 'none')).toBe(
+			'99.5',
+		);
+		expect(testFullPrecisionGetYAxisFormattedValue('1.000', 'none')).toBe('1');
+	});
+
+	test('edge values', () => {
+		expect(testFullPrecisionGetYAxisFormattedValue('0', 'none')).toBe('0');
+		expect(testFullPrecisionGetYAxisFormattedValue('-0', 'none')).toBe('0');
+		expect(testFullPrecisionGetYAxisFormattedValue('Infinity', 'none')).toBe('∞');
+		expect(testFullPrecisionGetYAxisFormattedValue('-Infinity', 'none')).toBe(
+			'-∞',
+		);
+		expect(testFullPrecisionGetYAxisFormattedValue('invalid', 'none')).toBe(
+			'NaN',
+		);
+		expect(testFullPrecisionGetYAxisFormattedValue('', 'none')).toBe('NaN');
+		expect(testFullPrecisionGetYAxisFormattedValue('abc123', 'none')).toBe('NaN');
+	});
+
+	test('small decimals keep precision as-is', () => {
+		expect(testFullPrecisionGetYAxisFormattedValue('0.0001', 'none')).toBe(
+			'0.0001',
+		);
+		expect(testFullPrecisionGetYAxisFormattedValue('-0.0001', 'none')).toBe(
+			'-0.0001',
+		);
+		expect(testFullPrecisionGetYAxisFormattedValue('0.000000001', 'none')).toBe(
+			'0.000000001',
+		);
+	});
+
+	test('simple decimals preserved', () => {
+		expect(testFullPrecisionGetYAxisFormattedValue('0.1', 'none')).toBe('0.1');
+		expect(testFullPrecisionGetYAxisFormattedValue('0.2', 'none')).toBe('0.2');
+		expect(testFullPrecisionGetYAxisFormattedValue('0.3', 'none')).toBe('0.3');
+		expect(testFullPrecisionGetYAxisFormattedValue('1.0000000001', 'none')).toBe(
+			'1.0000000001',
+		);
+	});
+});
+
+describe('getYAxisFormattedValue - units (full precision legacy assertions)', () => {
+	test('ms', () => {
+		expect(testFullPrecisionGetYAxisFormattedValue('1500', 'ms')).toBe('1.5 s');
+		expect(testFullPrecisionGetYAxisFormattedValue('500', 'ms')).toBe('500 ms');
+		expect(testFullPrecisionGetYAxisFormattedValue('60000', 'ms')).toBe('1 min');
+		expect(testFullPrecisionGetYAxisFormattedValue('295.429', 'ms')).toBe(
+			'295.429 ms',
+		);
+		expect(testFullPrecisionGetYAxisFormattedValue('4353.81', 'ms')).toBe(
+			'4.35381 s',
+		);
+	});
+
+	test('s', () => {
+		expect(testFullPrecisionGetYAxisFormattedValue('90', 's')).toBe('1.5 mins');
+		expect(testFullPrecisionGetYAxisFormattedValue('30', 's')).toBe('30 s');
+		expect(testFullPrecisionGetYAxisFormattedValue('3600', 's')).toBe('1 hour');
+	});
+
+	test('m', () => {
+		expect(testFullPrecisionGetYAxisFormattedValue('90', 'm')).toBe('1.5 hours');
+		expect(testFullPrecisionGetYAxisFormattedValue('30', 'm')).toBe('30 min');
+		expect(testFullPrecisionGetYAxisFormattedValue('1440', 'm')).toBe('1 day');
+	});
+
+	test('bytes', () => {
+		expect(testFullPrecisionGetYAxisFormattedValue('1024', 'bytes')).toBe(
+			'1 KiB',
+		);
+		expect(testFullPrecisionGetYAxisFormattedValue('512', 'bytes')).toBe('512 B');
+		expect(testFullPrecisionGetYAxisFormattedValue('1536', 'bytes')).toBe(
+			'1.5 KiB',
+		);
+	});
+
+	test('mbytes', () => {
+		expect(testFullPrecisionGetYAxisFormattedValue('1024', 'mbytes')).toBe(
+			'1 GiB',
+		);
+		expect(testFullPrecisionGetYAxisFormattedValue('512', 'mbytes')).toBe(
+			'512 MiB',
+		);
+		expect(testFullPrecisionGetYAxisFormattedValue('1536', 'mbytes')).toBe(
+			'1.5 GiB',
+		);
+	});
+
+	test('kbytes', () => {
+		expect(testFullPrecisionGetYAxisFormattedValue('1024', 'kbytes')).toBe(
+			'1 MiB',
+		);
+		expect(testFullPrecisionGetYAxisFormattedValue('512', 'kbytes')).toBe(
+			'512 KiB',
+		);
+		expect(testFullPrecisionGetYAxisFormattedValue('1536', 'kbytes')).toBe(
+			'1.5 MiB',
+		);
+	});
+
+	test('short', () => {
+		expect(testFullPrecisionGetYAxisFormattedValue('1000', 'short')).toBe('1 K');
+		expect(testFullPrecisionGetYAxisFormattedValue('1500', 'short')).toBe(
+			'1.5 K',
+		);
+		expect(testFullPrecisionGetYAxisFormattedValue('999', 'short')).toBe('999');
+
+		expect(testFullPrecisionGetYAxisFormattedValue('1000000', 'short')).toBe(
+			'1 Mil',
+		);
+		expect(testFullPrecisionGetYAxisFormattedValue('1555600', 'short')).toBe(
+			'1.5556 Mil',
+		);
+		expect(testFullPrecisionGetYAxisFormattedValue('999999', 'short')).toBe(
+			'999.999 K',
+		);
+
+		expect(testFullPrecisionGetYAxisFormattedValue('1000000000', 'short')).toBe(
+			'1 Bil',
+		);
+		expect(testFullPrecisionGetYAxisFormattedValue('1500000000', 'short')).toBe(
+			'1.5 Bil',
+		);
+		expect(testFullPrecisionGetYAxisFormattedValue('999999999', 'short')).toBe(
+			'999.999999 Mil',
+		);
+	});
+
+	test('percent', () => {
+		expect(testFullPrecisionGetYAxisFormattedValue('0.15', 'percent')).toBe(
+			'0.15%',
+		);
+		expect(testFullPrecisionGetYAxisFormattedValue('0.1234', 'percent')).toBe(
+			'0.1234%',
+		);
+		expect(testFullPrecisionGetYAxisFormattedValue('0.123499', 'percent')).toBe(
+			'0.123499%',
+		);
+		expect(testFullPrecisionGetYAxisFormattedValue('1.5', 'percent')).toBe(
+			'1.5%',
+		);
+		expect(testFullPrecisionGetYAxisFormattedValue('0.0001', 'percent')).toBe(
+			'0.0001%',
+		);
+		expect(
+			testFullPrecisionGetYAxisFormattedValue('0.000000001', 'percent'),
+		).toBe('1e-9%');
+		expect(
+			testFullPrecisionGetYAxisFormattedValue('0.000000250034', 'percent'),
+		).toBe('0.000000250034%');
+		expect(testFullPrecisionGetYAxisFormattedValue('0.00000025', 'percent')).toBe(
+			'0.00000025%',
+		);
+		// Big precision, limiting the javascript precision (~16 digits)
+		expect(
+			testFullPrecisionGetYAxisFormattedValue('1.0000000000000001', 'percent'),
+		).toBe('1%');
+		expect(
+			testFullPrecisionGetYAxisFormattedValue('1.00555555559595876', 'percent'),
+		).toBe('1.005555555595958%');
+	});
+
+	test('ratio', () => {
+		expect(testFullPrecisionGetYAxisFormattedValue('0.5', 'ratio')).toBe(
+			'0.5 ratio',
+		);
+		expect(testFullPrecisionGetYAxisFormattedValue('1.25', 'ratio')).toBe(
+			'1.25 ratio',
+		);
+		expect(testFullPrecisionGetYAxisFormattedValue('2.0', 'ratio')).toBe(
+			'2 ratio',
+		);
+	});
+
+	test('temperature units', () => {
+		expect(testFullPrecisionGetYAxisFormattedValue('25', 'celsius')).toBe(
+			'25 °C',
+		);
+		expect(testFullPrecisionGetYAxisFormattedValue('0', 'celsius')).toBe('0 °C');
+		expect(testFullPrecisionGetYAxisFormattedValue('-10', 'celsius')).toBe(
+			'-10 °C',
+		);
+
+		expect(testFullPrecisionGetYAxisFormattedValue('77', 'fahrenheit')).toBe(
+			'77 °F',
+		);
+		expect(testFullPrecisionGetYAxisFormattedValue('32', 'fahrenheit')).toBe(
+			'32 °F',
+		);
+		expect(testFullPrecisionGetYAxisFormattedValue('14', 'fahrenheit')).toBe(
+			'14 °F',
+		);
+	});
+
+	test('ms edge cases', () => {
+		expect(testFullPrecisionGetYAxisFormattedValue('0', 'ms')).toBe('0 ms');
+		expect(testFullPrecisionGetYAxisFormattedValue('-1500', 'ms')).toBe('-1.5 s');
+		expect(testFullPrecisionGetYAxisFormattedValue('Infinity', 'ms')).toBe('∞');
+	});
+
+	test('bytes edge cases', () => {
+		expect(testFullPrecisionGetYAxisFormattedValue('0', 'bytes')).toBe('0 B');
+		expect(testFullPrecisionGetYAxisFormattedValue('-1024', 'bytes')).toBe(
+			'-1 KiB',
+		);
+	});
+});
+
+describe('getYAxisFormattedValue - precision option tests', () => {
+	test('precision 0 drops decimal part', () => {
+		expect(getYAxisFormattedValue('1.2345', 'none', 0)).toBe('1');
+		expect(getYAxisFormattedValue('0.9999', 'none', 0)).toBe('0');
+		expect(getYAxisFormattedValue('12345.6789', 'none', 0)).toBe('12345');
+		expect(getYAxisFormattedValue('0.0000123456', 'none', 0)).toBe('0');
+		expect(getYAxisFormattedValue('1000.000', 'none', 0)).toBe('1000');
+		expect(getYAxisFormattedValue('0.000000250034', 'none', 0)).toBe('0');
+		expect(getYAxisFormattedValue('1.00555555559595876', 'none', 0)).toBe('1');
+
+		// with unit
+		expect(getYAxisFormattedValue('4353.81', 'ms', 0)).toBe('4 s');
+	});
+	test('precision 1,2,3,4 decimals', () => {
+		expect(getYAxisFormattedValue('1.2345', 'none', 1)).toBe('1.2');
+		expect(getYAxisFormattedValue('1.2345', 'none', 2)).toBe('1.23');
+		expect(getYAxisFormattedValue('1.2345', 'none', 3)).toBe('1.234');
+		expect(getYAxisFormattedValue('1.2345', 'none', 4)).toBe('1.2345');
+
+		expect(getYAxisFormattedValue('0.0000123456', 'none', 1)).toBe('0.00001');
+		expect(getYAxisFormattedValue('0.0000123456', 'none', 2)).toBe('0.000012');
+		expect(getYAxisFormattedValue('0.0000123456', 'none', 3)).toBe('0.0000123');
+		expect(getYAxisFormattedValue('0.0000123456', 'none', 4)).toBe('0.00001234');
+
+		expect(getYAxisFormattedValue('1000.000', 'none', 1)).toBe('1000');
+		expect(getYAxisFormattedValue('1000.000', 'none', 2)).toBe('1000');
+		expect(getYAxisFormattedValue('1000.000', 'none', 3)).toBe('1000');
+		expect(getYAxisFormattedValue('1000.000', 'none', 4)).toBe('1000');
+
+		expect(getYAxisFormattedValue('0.000000250034', 'none', 1)).toBe('0.0000002');
+		expect(getYAxisFormattedValue('0.000000250034', 'none', 2)).toBe(
+			'0.00000025',
+		); // leading zeros + 2 significant => same trimmed
+		expect(getYAxisFormattedValue('0.000000250034', 'none', 3)).toBe(
+			'0.00000025',
+		);
+		expect(getYAxisFormattedValue('0.000000250304', 'none', 4)).toBe(
+			'0.0000002503',
+		);
+
+		expect(getYAxisFormattedValue('1.00555555559595876', 'none', 1)).toBe(
+			'1.005',
+		);
+		expect(getYAxisFormattedValue('1.00555555559595876', 'none', 2)).toBe(
+			'1.0055',
+		);
+		expect(getYAxisFormattedValue('1.00555555559595876', 'none', 3)).toBe(
+			'1.00555',
+		);
+		expect(getYAxisFormattedValue('1.00555555559595876', 'none', 4)).toBe(
+			'1.005555',
+		);
+
+		// with unit
+		expect(getYAxisFormattedValue('4353.81', 'ms', 1)).toBe('4.4 s');
+		expect(getYAxisFormattedValue('4353.81', 'ms', 2)).toBe('4.35 s');
+		expect(getYAxisFormattedValue('4353.81', 'ms', 3)).toBe('4.354 s');
+		expect(getYAxisFormattedValue('4353.81', 'ms', 4)).toBe('4.3538 s');
+
+		// Percentages
+		expect(getYAxisFormattedValue('0.123456', 'percent', 2)).toBe('0.12%');
+		expect(getYAxisFormattedValue('0.123456', 'percent', 4)).toBe('0.1235%'); // approximation
+	});
+
+	test('precision full uses up to DEFAULT_SIGNIFICANT_DIGITS significant digits', () => {
+		expect(
+			getYAxisFormattedValue(
+				'0.00002625429914148441',
+				'none',
+				PrecisionOptionsEnum.FULL,
+			),
+		).toBe('0.000026254299141');
+		expect(
+			getYAxisFormattedValue(
+				'0.000026254299141484417',
+				's',
+				PrecisionOptionsEnum.FULL,
+			),
+		).toBe('26254299141484417000000 µs');
+
+		expect(
+			getYAxisFormattedValue('4353.81', 'ms', PrecisionOptionsEnum.FULL),
+		).toBe('4.35381 s');
+		expect(getYAxisFormattedValue('500', 'ms', PrecisionOptionsEnum.FULL)).toBe(
+			'500 ms',
+		);
+	});
+});

frontend/src/components/Graph/yAxisConfig.ts

@@ -1,58 +1,158 @@
+/* eslint-disable sonarjs/cognitive-complexity */
 import { formattedValueToString, getValueFormat } from '@grafana/data';
+import * as Sentry from '@sentry/react';
+import { isNaN } from 'lodash-es';
 
+const DEFAULT_SIGNIFICANT_DIGITS = 15;
+// max decimals to keep should not exceed 15 decimal places to avoid floating point precision issues
+const MAX_DECIMALS = 15;
+
+export enum PrecisionOptionsEnum {
+	ZERO = 0,
+	ONE = 1,
+	TWO = 2,
+	THREE = 3,
+	FOUR = 4,
+	FULL = 'full',
+}
+export type PrecisionOption = 0 | 1 | 2 | 3 | 4 | PrecisionOptionsEnum.FULL;
+
+/**
+ * Formats a number for display, preserving leading zeros after the decimal point
+ * and showing up to DEFAULT_SIGNIFICANT_DIGITS digits after the first non-zero decimal digit.
+ * It avoids scientific notation and removes unnecessary trailing zeros.
+ *
+ * @example
+ * formatDecimalWithLeadingZeros(1.2345); // "1.2345"
+ * formatDecimalWithLeadingZeros(0.0012345); // "0.0012345"
+ * formatDecimalWithLeadingZeros(5.0); // "5"
+ *
+ * @param value The number to format.
+ * @returns The formatted string.
+ */
+const formatDecimalWithLeadingZeros = (
+	value: number,
+	precision: PrecisionOption,
+): string => {
+	if (value === 0) {
+		return '0';
+	}
+
+	// Use toLocaleString to get a full decimal representation without scientific notation.
+	const numStr = value.toLocaleString('en-US', {
+		useGrouping: false,
+		maximumFractionDigits: 20,
+	});
+
+	const [integerPart, decimalPart = ''] = numStr.split('.');
+
+	// If there's no decimal part, the integer part is the result.
+	if (!decimalPart) {
+		return integerPart;
+	}
+
+	// Find the index of the first non-zero digit in the decimal part.
+	const firstNonZeroIndex = decimalPart.search(/[^0]/);
+
+	// If the decimal part consists only of zeros, return just the integer part.
+	if (firstNonZeroIndex === -1) {
+		return integerPart;
+	}
+
+	// Determine the number of decimals to keep: leading zeros + up to N significant digits.
+	const significantDigits =
+		precision === PrecisionOptionsEnum.FULL
+			? DEFAULT_SIGNIFICANT_DIGITS
+			: precision;
+	const decimalsToKeep = firstNonZeroIndex + (significantDigits || 0);
+
+	// max decimals to keep should not exceed 15 decimal places to avoid floating point precision issues
+	const finalDecimalsToKeep = Math.min(decimalsToKeep, MAX_DECIMALS);
+	const trimmedDecimalPart = decimalPart.substring(0, finalDecimalsToKeep);
+
+	// If precision is 0, we drop the decimal part entirely.
+	if (precision === 0) {
+		return integerPart;
+	}
+
+	// Remove any trailing zeros from the result to keep it clean.
+	const finalDecimalPart = trimmedDecimalPart.replace(/0+$/, '');
+
+	// Return the integer part, or the integer and decimal parts combined.
+	return finalDecimalPart ? `${integerPart}.${finalDecimalPart}` : integerPart;
+};
+
+/**
+ * Formats a Y-axis value based on a given format string.
+ *
+ * @param value The string value from the axis.
+ * @param format The format identifier (e.g. 'none', 'ms', 'bytes', 'short').
+ * @returns A formatted string ready for display.
+ */
 export const getYAxisFormattedValue = (
 	value: string,
 	format: string,
+	precision: PrecisionOption = 2, // default precision requested
 ): string => {
-	let decimalPrecision: number | undefined;
-	const parsedValue = getValueFormat(format)(
-		parseFloat(value),
-		undefined,
-		undefined,
-		undefined,
-	);
-	try {
-		const decimalSplitted = parsedValue.text.split('.');
-		if (decimalSplitted.length === 1) {
-			decimalPrecision = 0;
-		} else {
-			const decimalDigits = decimalSplitted[1].split('');
-			decimalPrecision = decimalDigits.length;
-			let nonZeroCtr = 0;
-			for (let idx = 0; idx < decimalDigits.length; idx += 1) {
-				if (decimalDigits[idx] !== '0') {
-					nonZeroCtr += 1;
-					if (nonZeroCtr >= 2) {
-						decimalPrecision = idx + 1;
-					}
-				} else if (nonZeroCtr) {
-					decimalPrecision = idx;
-					break;
-				}
-			}
+	const numValue = parseFloat(value);
+
+	// Handle non-numeric or special values first.
+	if (isNaN(numValue)) return 'NaN';
+	if (numValue === Infinity) return '∞';
+	if (numValue === -Infinity) return '-∞';
+
+	const decimalPlaces = value.split('.')[1]?.length || undefined;
+
+	// Use custom formatter for the 'none' format honoring precision
+	if (format === 'none') {
+		return formatDecimalWithLeadingZeros(numValue, precision);
+	}
+
+	// For all other standard formats, delegate to grafana/data's built-in formatter.
+	const computeDecimals = (): number | undefined => {
+		if (precision === PrecisionOptionsEnum.FULL) {
+			return decimalPlaces && decimalPlaces >= DEFAULT_SIGNIFICANT_DIGITS
+				? decimalPlaces
+				: DEFAULT_SIGNIFICANT_DIGITS;
 		}
+		return precision;
+	};
 
-		return formattedValueToString(
-			getValueFormat(format)(
-				parseFloat(value),
-				decimalPrecision,
-				undefined,
-				undefined,
-			),
-		);
-	} catch (error) {
-		console.error(error);
-	}
-	return `${parseFloat(value)}`;
-};
+	const fallbackFormat = (): string => {
+		if (precision === PrecisionOptionsEnum.FULL) return numValue.toString();
+		if (precision === 0) return Math.round(numValue).toString();
+		return precision !== undefined
+			? numValue
+					.toFixed(precision)
+					.replace(/(\.[0-9]*[1-9])0+$/, '$1') // trimming zeros
+					.replace(/\.$/, '')
+			: numValue.toString();
+	};
 
-export const getToolTipValue = (value: string, format?: string): string => {
 	try {
-		return formattedValueToString(
-			getValueFormat(format)(parseFloat(value), undefined, undefined, undefined),
-		);
+		const formatter = getValueFormat(format);
+		const formattedValue = formatter(numValue, computeDecimals(), undefined);
+		if (formattedValue.text && formattedValue.text.includes('.')) {
+			formattedValue.text = formatDecimalWithLeadingZeros(
+				parseFloat(formattedValue.text),
+				precision,
+			);
+		}
+		return formattedValueToString(formattedValue);
 	} catch (error) {
-		console.error(error);
+		Sentry.captureEvent({
+			message: `Error applying formatter: ${
+				error instanceof Error ? error.message : 'Unknown error'
+			}`,
+			level: 'error',
+		});
+		return fallbackFormat();
 	}
-	return `${value}`;
 };
+
+export const getToolTipValue = (
+	value: string | number,
+	format?: string,
+	precision?: PrecisionOption,
+): string =>
+	getYAxisFormattedValue(value?.toString(), format || 'none', precision);

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

@@ -60,6 +60,14 @@ function Metrics({
 		setElement,
 	} = useMultiIntersectionObserver(hostWidgetInfo.length, { threshold: 0.1 });
 
+	const legendScrollPositionRef = useRef<{
+		scrollTop: number;
+		scrollLeft: number;
+	}>({
+		scrollTop: 0,
+		scrollLeft: 0,
+	});
+
 	const queryPayloads = useMemo(
 		() =>
 			getHostQueryPayload(
@@ -147,6 +155,13 @@ function Metrics({
 					maxTimeScale: graphTimeIntervals[idx].end,
 					onDragSelect: (start, end) => onDragSelect(start, end, idx),
 					query: currentQuery,
+					legendScrollPosition: legendScrollPositionRef.current,
+					setLegendScrollPosition: (position: {
+						scrollTop: number;
+						scrollLeft: number;
+					}) => {
+						legendScrollPositionRef.current = position;
+					},
 				}),
 			),
 		[

frontend/src/components/InputWithLabel/InputWithLabel.styles.scss

@@ -37,7 +37,6 @@
 
 		border-radius: 2px 0px 0px 2px;
 		border: 1px solid var(--bg-slate-400);
-		background: var(--bg-ink-300);
 
 		border-right: none;
 		border-left: none;
@@ -45,6 +44,12 @@
 		border-bottom-right-radius: 0px;
 		border-top-left-radius: 0px;
 		border-bottom-left-radius: 0px;
+		font-size: 12px !important;
+		line-height: 27px;
+		&::placeholder {
+			color: var(--bg-vanilla-400) !important;
+			font-size: 12px !important;
+		}
 	}
 
 	.close-btn {

frontend/src/components/LogDetail/LogDetails.styles.scss

@@ -132,9 +132,9 @@
 			justify-content: center;
 		}
 
-		.json-action-btn {
+		.log-detail-drawer__actions {
 			display: flex;
-			gap: 8px;
+			gap: 4px;
 		}
 	}
 

frontend/src/components/LogDetail/index.tsx

@@ -319,31 +319,35 @@ function LogDetailInner({
 					</Radio.Button>
 				</Radio.Group>
 
-				{selectedView === VIEW_TYPES.JSON && (
-					<div className="json-action-btn">
+				<div className="log-detail-drawer__actions">
+					{selectedView === VIEW_TYPES.CONTEXT && (
+						<Tooltip
+							title="Show Filters"
+							placement="topLeft"
+							aria-label="Show Filters"
+						>
+							<Button
+								className="action-btn"
+								icon={<Filter size={16} />}
+								onClick={handleFilterVisible}
+							/>
+						</Tooltip>
+					)}
+
+					<Tooltip
+						title={selectedView === VIEW_TYPES.JSON ? 'Copy JSON' : 'Copy Log Link'}
+						placement="topLeft"
+						aria-label={
+							selectedView === VIEW_TYPES.JSON ? 'Copy JSON' : 'Copy Log Link'
+						}
+					>
 						<Button
 							className="action-btn"
 							icon={<Copy size={16} />}
-							onClick={handleJSONCopy}
+							onClick={selectedView === VIEW_TYPES.JSON ? handleJSONCopy : onLogCopy}
 						/>
-					</div>
-				)}
-
-				{selectedView === VIEW_TYPES.CONTEXT && (
-					<Button
-						className="action-btn"
-						icon={<Filter size={16} />}
-						onClick={handleFilterVisible}
-					/>
-				)}
-
-				<Tooltip title="Copy Log Link" placement="left" aria-label="Copy Log Link">
-					<Button
-						className="action-btn"
-						icon={<Copy size={16} />}
-						onClick={onLogCopy}
-					/>
-				</Tooltip>
+					</Tooltip>
+				</div>
 			</div>
 			{isFilterVisible && contextQuery?.builder.queryData[0] && (
 				<div className="log-detail-drawer-query-container">
@@ -383,7 +387,8 @@ function LogDetailInner({
 					podName={log.resources_string?.[RESOURCE_KEYS.POD_NAME] || ''}
 					nodeName={log.resources_string?.[RESOURCE_KEYS.NODE_NAME] || ''}
 					hostName={log.resources_string?.[RESOURCE_KEYS.HOST_NAME] || ''}
-					logLineTimestamp={log.timestamp.toString()}
+					timestamp={log.timestamp.toString()}
+					dataSource={DataSource.LOGS}
 				/>
 			)}
 		</Drawer>

frontend/src/components/Logs/CopyClipboardHOC.tsx

@@ -6,6 +6,7 @@ import { useCopyToClipboard } from 'react-use';
 function CopyClipboardHOC({
 	entityKey,
 	textToCopy,
+	tooltipText = 'Copy to clipboard',
 	children,
 }: CopyClipboardHOCProps): JSX.Element {
 	const [value, setCopy] = useCopyToClipboard();
@@ -31,7 +32,7 @@ function CopyClipboardHOC({
 		<span onClick={onClick} role="presentation" tabIndex={-1}>
 			<Popover
 				placement="top"
-				content={<span style={{ fontSize: '0.9rem' }}>Copy to clipboard</span>}
+				content={<span style={{ fontSize: '0.9rem' }}>{tooltipText}</span>}
 			>
 				{children}
 			</Popover>
@@ -42,7 +43,11 @@ function CopyClipboardHOC({
 interface CopyClipboardHOCProps {
 	entityKey: string | undefined;
 	textToCopy: string;
+	tooltipText?: string;
 	children: ReactNode;
 }
 
 export default CopyClipboardHOC;
+CopyClipboardHOC.defaultProps = {
+	tooltipText: 'Copy to clipboard',
+};

frontend/src/components/Logs/RawLogView/styles.ts

@@ -57,8 +57,8 @@ export const RawLogViewContainer = styled(Row)<{
 			  transition: background-color 2s ease-in;`
 			: ''}
 
-	${({ $isCustomHighlighted, $isDarkMode, $logType }): string =>
-		getCustomHighlightBackground($isCustomHighlighted, $isDarkMode, $logType)}
+	${({ $isCustomHighlighted }): string =>
+		getCustomHighlightBackground($isCustomHighlighted)}
 `;
 
 export const InfoIconWrapper = styled(Info)`

frontend/src/components/Logs/TableView/useTableView.tsx

@@ -153,7 +153,9 @@ export const useTableView = (props: UseTableViewProps): UseTableViewResult => {
 								children: (
 									<TableBodyContent
 										dangerouslySetInnerHTML={{
-											__html: getSanitizedLogBody(field as string),
+											__html: getSanitizedLogBody(field as string, {
+												shouldEscapeHtml: true,
+											}),
 										}}
 										fontSize={fontSize}
 										linesPerRow={linesPerRow}

frontend/src/components/NewSelect/CustomMultiSelect.tsx

@@ -32,6 +32,7 @@ import { popupContainer } from 'utils/selectPopupContainer';
 
 import { CustomMultiSelectProps, CustomTagProps, OptionData } from './types';
 import {
+	ALL_SELECTED_VALUE,
 	filterOptionsBySearch,
 	handleScrollToBottom,
 	prioritizeOrAddOptionForMultiSelect,
@@ -43,8 +44,6 @@ enum ToggleTagValue {
 	All = 'All',
 }
 
-const ALL_SELECTED_VALUE = '__ALL__'; // Constant for the special value
-
 const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 	placeholder = 'Search...',
 	className,

frontend/src/components/NewSelect/utils.ts

@@ -5,6 +5,8 @@ import { OptionData } from './types';
 
 export const SPACEKEY = ' ';
 
+export const ALL_SELECTED_VALUE = '__ALL__'; // Constant for the special value
+
 export const prioritizeOrAddOptionForSingleSelect = (
 	options: OptionData[],
 	value: string,

frontend/src/components/PanelMarkersControl/PanelMarkersControl.scss

@@ -1,58 +0,0 @@
-.panel-markers-control {
-	padding: 16px;
-	.panel-markers-view-controller {
-		display: flex;
-		align-items: center;
-		gap: 8px;
-		margin-bottom: 16px;
-	}
-
-	.markers-control-skeleton {
-		display: flex;
-		align-items: center;
-		gap: 24px;
-		margin-top: 8px;
-		.ant-skeleton-input{
-			width: 230px;
-		}
-	}
-
-	.panel-markers-inputs-section {
-		display: flex;
-		align-items: center;
-		gap: 24px;
-		margin-top: 8px;
-		.panel-markers-select-container {
-			display: flex;
-			align-items: center;
-			margin-bottom: 8px;
-            .custom-multiselect-wrapper {
-                width: fit-content;
-				min-width: 230px;
-            }
-		}
-	}
-}
-
-.variable-name {
-	display: flex;
-	min-width: 56px;
-	height: 32px;
-	padding: 6px 6px 6px 8px;
-	align-items: center;
-	gap: 4px;
-	border-radius: 2px 0px 0px 2px;
-	border: 1px solid var(--bg-slate-400);
-	background: var(--bg-ink-300);
-	color: var(--bg-robin-300);
-	font-family: Inter;
-	font-size: 12px;
-	font-style: normal;
-	font-weight: 400;
-	line-height: 16px;
-
-	.info-icon {
-		margin-left: 4px;
-		color: var(--bg-vanilla-400);
-	}
-}

frontend/src/components/PanelMarkersControl/constants.ts

@@ -1,3 +0,0 @@
-export const MARKER_TYPES = {
-	DEPLOYMENT: 'deployment',
-};

frontend/src/components/PanelMarkersControl/hooks/useMarkerControlState.ts

@@ -1,70 +0,0 @@
-import type { Dispatch } from 'react';
-import { useReducer } from 'react';
-
-import type { MarkerControlState, MarkerQueryState } from '../types';
-
-export const MARKER_ACTIONS = {
-	TOGGLE_SHOW_MARKERS: 'toggleShowMarkers',
-	SET_MARKER_SERVICES: 'setMarkerServices',
-	SET_MARKER_TYPES: 'setMarkerTypes',
-	SET_DEFAULTS_ON: 'setDefaultsOn',
-	RESET: 'reset',
-} as const;
-
-export type MarkerActionType = typeof MARKER_ACTIONS[keyof typeof MARKER_ACTIONS];
-
-export type MarkerControlAction =
-	| { type: typeof MARKER_ACTIONS.TOGGLE_SHOW_MARKERS; payload: boolean }
-	| { type: typeof MARKER_ACTIONS.SET_MARKER_SERVICES; payload: string[] }
-	| { type: typeof MARKER_ACTIONS.SET_MARKER_TYPES; payload: string[] }
-	| {
-			type: typeof MARKER_ACTIONS.SET_DEFAULTS_ON;
-			payload: { markerServices: string[]; markerTypes: string[] };
-	  }
-	| { type: typeof MARKER_ACTIONS.RESET };
-
-function normalizeInitialState(
-	state: MarkerQueryState | null,
-): MarkerControlState {
-	return {
-		showMarkers: state?.showMarkers ? 1 : 0,
-		markerServices: state?.markerServices || [],
-		markerTypes: state?.markerTypes || [],
-	};
-}
-
-function reducer(
-	state: MarkerControlState,
-	action: MarkerControlAction,
-): MarkerControlState {
-	switch (action.type) {
-		case MARKER_ACTIONS.TOGGLE_SHOW_MARKERS:
-			return { ...state, showMarkers: action.payload ? 1 : 0 };
-		case MARKER_ACTIONS.SET_MARKER_SERVICES:
-			return { ...state, markerServices: action.payload };
-		case MARKER_ACTIONS.SET_MARKER_TYPES:
-			return { ...state, markerTypes: action.payload };
-		case MARKER_ACTIONS.SET_DEFAULTS_ON:
-			return {
-				...state,
-				showMarkers: 1,
-				markerServices: action.payload.markerServices,
-				markerTypes: action.payload.markerTypes,
-			};
-		case MARKER_ACTIONS.RESET:
-			return { showMarkers: 0, markerServices: [], markerTypes: [] };
-		default:
-			return state;
-	}
-}
-
-export default function useMarkerControlState(
-	initialQueryState: MarkerQueryState | null,
-): {
-	store: MarkerControlState;
-	dispatch: Dispatch<MarkerControlAction>;
-} {
-	const initial = normalizeInitialState(initialQueryState);
-	const [store, dispatch] = useReducer(reducer, initial);
-	return { store, dispatch };
-}

frontend/src/components/PanelMarkersControl/hooks/useMarkerHandlers.tsx

@@ -1,57 +0,0 @@
-import {
-	clearLocalStorageState,
-	getLocalStorageState,
-	getMarkerStateFromQuery,
-	getQueryParamsFromState,
-	setLocalStorageState,
-} from 'components/PanelMarkersControl/utils';
-import useUrlQuery from 'hooks/useUrlQuery';
-import { useCallback, useEffect } from 'react';
-import { useHistory, useLocation } from 'react-router-dom';
-
-type MarkerHandlers = {
-	onMarkerToggleOn: () => void;
-	onMarkerToggleOff: () => void;
-};
-
-const useMarkerHandlers = ({ key }: { key: string }): MarkerHandlers => {
-	const urlQuery = useUrlQuery();
-	const { search } = useLocation();
-	const history = useHistory();
-
-	// useEffect to sync url query with local storage
-	useEffect(() => {
-		const queryState = getMarkerStateFromQuery(urlQuery);
-		const localStorageState = getLocalStorageState(key);
-
-		if (queryState === null && localStorageState?.showMarkers) {
-			const params = new URLSearchParams(search);
-			const queryParams = getQueryParamsFromState(params, localStorageState);
-			history.replace({ search: queryParams.toString() });
-		} else {
-			setLocalStorageState(key, queryState);
-		}
-	}, [urlQuery, key, search, history]);
-
-	const onMarkerToggleOn = useCallback(() => {
-		// set defaults for service and marker type
-		const params = new URLSearchParams(search);
-		params.set('showMarkers', '1');
-		history.replace({ search: params.toString() });
-	}, [search, history]);
-
-	const onMarkerToggleOff = useCallback(() => {
-		// important to clear both  url query and local storage here. Else url local storage sync useEffect will not work as expected.
-		clearLocalStorageState(key);
-
-		const params = new URLSearchParams(search);
-		params.delete('showMarkers');
-		params.delete('markerServices');
-		params.delete('markerTypes');
-		history.replace({ search: params.toString() });
-	}, [key, search, history]);
-
-	return { onMarkerToggleOn, onMarkerToggleOff };
-};
-
-export default useMarkerHandlers;

frontend/src/components/PanelMarkersControl/index.tsx

@@ -1,234 +0,0 @@
-import './PanelMarkersControl.scss';
-
-import { Skeleton, Switch, Typography } from 'antd';
-import CustomMultiSelect from 'components/NewSelect/CustomMultiSelect';
-import { MARKER_TYPES } from 'components/PanelMarkersControl/constants';
-import useMarkerControlState, {
-	MARKER_ACTIONS,
-} from 'components/PanelMarkersControl/hooks/useMarkerControlState';
-import useMarkerHandlers from 'components/PanelMarkersControl/hooks/useMarkerHandlers';
-import {
-	getInitialStateForControls,
-	getQueryParamsFromState,
-} from 'components/PanelMarkersControl/utils';
-import useUrlQuery from 'hooks/useUrlQuery';
-import { useDashboard } from 'providers/Dashboard/Dashboard';
-import { useFetchMarkersData, useMarkers } from 'providers/Markers/Markers';
-import { useCallback, useEffect, useMemo } from 'react';
-import { useHistory, useLocation } from 'react-router-dom';
-
-function PanelMarkersControl(): JSX.Element {
-	const urlQuery = useUrlQuery();
-	const { search } = useLocation();
-	const history = useHistory();
-
-	const { selectedDashboard } = useDashboard();
-
-	const { store: markerControlState, dispatch } = useMarkerControlState(
-		getInitialStateForControls(selectedDashboard?.id || '', urlQuery),
-	);
-
-	const { markersData, setMarkersData } = useMarkers();
-
-	const { loadingMarkers } = useFetchMarkersData({
-		isFetchEnabled: markerControlState.showMarkers === 1,
-	});
-
-	const { onMarkerToggleOn, onMarkerToggleOff } = useMarkerHandlers({
-		key: selectedDashboard?.id || '',
-	});
-
-	// API integration: check if this is correct
-	const markerTypeOptions = useMemo(() => {
-		const uniqueTypes = Array.from(
-			new Set((markersData || []).map((m: any) => m?.type).filter(Boolean)),
-		);
-		return uniqueTypes.map((t: string) => ({
-			label: t.charAt(0).toUpperCase() + t.slice(1),
-			value: t,
-		}));
-	}, [markersData]);
-
-	// API integration: check if this is correct
-	const serviceNameOptions = useMemo(() => {
-		const uniqueServices = Array.from(
-			new Set(
-				(markersData || [])
-					.map((m: any) => m?.attr?.['service.name'])
-					.filter(Boolean),
-			),
-		);
-		return uniqueServices.map((s: string) => ({ label: s, value: s }));
-	}, [markersData]);
-
-	const handleServiceChange = useCallback(
-		(serviceOrServices: string | string[] | undefined): void => {
-			let servicesArray: string[] = [];
-			if (Array.isArray(serviceOrServices)) {
-				servicesArray = serviceOrServices;
-			} else if (serviceOrServices) {
-				servicesArray = [serviceOrServices];
-			}
-			dispatch({
-				type: MARKER_ACTIONS.SET_MARKER_SERVICES,
-				payload: servicesArray,
-			});
-
-			// sync URL param
-			const params = new URLSearchParams(search);
-			if (servicesArray.length > 0) {
-				params.set('markerServices', servicesArray.join(','));
-			} else {
-				params.delete('markerServices');
-			}
-			history.replace({ search: params.toString() });
-		},
-		[history, search, dispatch],
-	);
-
-	const handleMarkerTypesChange = useCallback(
-		(typesOrArray: string | string[] | undefined): void => {
-			let typesArray: string[] = [];
-			if (Array.isArray(typesOrArray)) {
-				typesArray = typesOrArray;
-			} else if (typesOrArray) {
-				typesArray = [typesOrArray];
-			}
-			dispatch({ type: MARKER_ACTIONS.SET_MARKER_TYPES, payload: typesArray });
-
-			const params = new URLSearchParams(search);
-			if (typesArray.length > 0) {
-				params.set('markerTypes', typesArray.join(','));
-			} else {
-				params.delete('markerTypes');
-			}
-			history.replace({ search: params.toString() });
-		},
-		[history, search, dispatch],
-	);
-
-	const handleToggleShowMarkers = useCallback(
-		(checked: boolean): void => {
-			dispatch({ type: MARKER_ACTIONS.TOGGLE_SHOW_MARKERS, payload: checked });
-			if (checked) {
-				// get default services and marker types from markersData
-				onMarkerToggleOn();
-			} else {
-				// consider using useReducer to reset the state
-				setMarkersData([]);
-				dispatch({ type: MARKER_ACTIONS.RESET });
-				onMarkerToggleOff();
-			}
-		},
-		[onMarkerToggleOn, onMarkerToggleOff, dispatch, setMarkersData],
-	);
-
-	useEffect(() => {
-		if (markersData.length < 1) return;
-		/**
-		 * On markers data change, derive defaults (or use query selections if present)
-		 * and set them in a single reducer dispatch.
-		 */
-		const queryMarkerServicesRaw = urlQuery.get('markerServices') || '';
-		const queryMarkerTypesRaw = urlQuery.get('markerTypes') || '';
-
-		const defMarkerServices = ['cart-service'];
-		const defMarkerTypes = [MARKER_TYPES.DEPLOYMENT];
-
-		const servicesArray = queryMarkerServicesRaw
-			? queryMarkerServicesRaw
-					.split(',')
-					.map((s) => s.trim())
-					.filter((s) => s.length > 0)
-			: defMarkerServices;
-		const typesArray = queryMarkerTypesRaw
-			? queryMarkerTypesRaw
-					.split(',')
-					.map((t) => t.trim())
-					.filter((t) => t.length > 0)
-			: defMarkerTypes;
-
-		dispatch({
-			type: MARKER_ACTIONS.SET_DEFAULTS_ON,
-			payload: { markerServices: servicesArray, markerTypes: typesArray },
-		});
-
-		// reflect in URL params as well
-		const params = new URLSearchParams(search);
-		const queryParams = getQueryParamsFromState(params, {
-			showMarkers: 1,
-			markerServices: servicesArray,
-			markerTypes: typesArray,
-		});
-		history.replace({ search: queryParams.toString() });
-
-		console.log('>>> markersData', markersData);
-		// urlQuery removed from dependencies as not able to unset markerTypes. But works with markerServices. [CHECK THIS]
-
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [markersData]);
-
-	// ADD INITIAL STATE FOR SELECTED SERVICES AND MARKER TYPES
-
-	return (
-		<div className="panel-markers-control">
-			<div className="panel-markers-view-controller">
-				<Typography>Show Markers</Typography>
-				<Switch
-					size="small"
-					checked={markerControlState.showMarkers === 1}
-					onChange={handleToggleShowMarkers}
-				/>
-			</div>
-
-			{markerControlState.showMarkers === 1 && (
-				<div className="panel-markers-inputs-section">
-					{loadingMarkers ? (
-						<div className="markers-control-skeleton">
-							<Skeleton.Input active size="small" />
-							<Skeleton.Input active size="small" />
-						</div>
-					) : (
-						<>
-							<div className="panel-markers-select-container">
-								<Typography.Text className="variable-name" ellipsis>
-									Marker type
-								</Typography.Text>
-								<CustomMultiSelect
-									className="panel-markers-select"
-									placeholder="Select one or more marker types"
-									enableAllSelection={false}
-									options={markerTypeOptions}
-									maxTagCount={3}
-									value={markerControlState.markerTypes}
-									onChange={handleMarkerTypesChange}
-								/>
-							</div>
-							<div className="panel-markers-select-container">
-								<Typography.Text className="variable-name" ellipsis>
-									Service name
-								</Typography.Text>
-								<CustomMultiSelect
-									className="panel-markers-select"
-									placeholder="Select one or more service names"
-									maxTagCount={3}
-									enableAllSelection={false}
-									options={serviceNameOptions}
-									value={markerControlState.markerServices}
-									onChange={handleServiceChange}
-								/>
-							</div>
-						</>
-					)}
-				</div>
-			)}
-		</div>
-	);
-}
-
-// select bright color for the markers
-// convert panel marker state to useReducer
-// removed urlQuery from dependencies.
-// filters on markersData should work properly. If no markers selected. Show no markers.
-
-export default PanelMarkersControl;

frontend/src/components/PanelMarkersControl/types.ts

@@ -1,7 +0,0 @@
-export interface MarkerControlState {
-	showMarkers: number;
-	markerServices: string[];
-	markerTypes: string[];
-}
-
-export type MarkerQueryState = MarkerControlState | null;

frontend/src/components/PanelMarkersControl/utils.ts

@@ -1,108 +0,0 @@
-import type { MarkerQueryState } from 'components/PanelMarkersControl/types';
-import { LOCALSTORAGE } from 'constants/localStorage';
-
-// CHECK LOGIC AND CREATE UTIL
-export function getMarkerStateFromQuery(
-	urlQuery: URLSearchParams,
-): MarkerQueryState | null {
-	const showMarkers = urlQuery.get('showMarkers') === '1';
-	const servicesRaw = urlQuery.get('markerServices') || '';
-
-	if (!showMarkers) {
-		return null;
-	}
-
-	const markerTypesParam = urlQuery.get('markerTypes') || '';
-
-	const markerTypes = markerTypesParam
-		.split(',')
-		.map((t) => t.trim())
-		.filter((t) => t.length > 0);
-
-	const markerServices = servicesRaw
-		.split(',')
-		.map((s) => s.trim())
-		.filter((s) => s.length > 0);
-
-	return {
-		showMarkers: 1,
-		markerServices,
-		markerTypes,
-	};
-}
-
-export const getLocalStorageState = (key: string): MarkerQueryState | null => {
-	const raw = localStorage.getItem(LOCALSTORAGE.MARKERS_OVERLAY_STATE);
-	try {
-		const parsed = raw ? JSON.parse(raw) : null;
-		return parsed?.[key] ?? null;
-	} catch (_) {
-		return null;
-	}
-};
-
-export const getQueryParamsFromState = (
-	params: URLSearchParams,
-	state: MarkerQueryState,
-): URLSearchParams => {
-	if (!state) {
-		return params;
-	}
-	if (state.showMarkers) {
-		params.set('showMarkers', String(state.showMarkers) || '0');
-	}
-	if (Array.isArray(state.markerServices) && state.markerServices.length > 0) {
-		params.set('markerServices', state.markerServices.join(','));
-	}
-	if (Array.isArray(state.markerTypes) && state.markerTypes.length > 0) {
-		params.set('markerTypes', state.markerTypes.join(','));
-	}
-	return params;
-};
-
-export const setLocalStorageState = (
-	key: string,
-	state: MarkerQueryState | null,
-): void => {
-	if (!key || key.trim().length === 0) {
-		return;
-	}
-
-	try {
-		const raw = localStorage.getItem(LOCALSTORAGE.MARKERS_OVERLAY_STATE);
-		let obj: Record<string, unknown> = {};
-		try {
-			obj = raw ? JSON.parse(raw) : {};
-		} catch (_) {
-			obj = {};
-		}
-		obj[key] = state;
-		localStorage.setItem(LOCALSTORAGE.MARKERS_OVERLAY_STATE, JSON.stringify(obj));
-	} catch (_) {
-		// ignore storage errors
-	}
-};
-
-export const getInitialStateForControls = (
-	key: string,
-	urlQuery: URLSearchParams,
-): MarkerQueryState | null => {
-	const queryState = getMarkerStateFromQuery(urlQuery);
-	const localStorageState = getLocalStorageState(key);
-	return queryState ?? localStorageState;
-};
-
-export const clearLocalStorageState = (key: string): void => {
-	if (!key || key.trim().length === 0) {
-		return;
-	}
-	const raw = localStorage.getItem(LOCALSTORAGE.MARKERS_OVERLAY_STATE);
-	let obj: Record<string, unknown> = {};
-	try {
-		obj = raw ? JSON.parse(raw) : {};
-	} catch (_) {
-		obj = {};
-	}
-	delete obj[key];
-	localStorage.setItem(LOCALSTORAGE.MARKERS_OVERLAY_STATE, JSON.stringify(obj));
-};

frontend/src/components/QueryBuilderV2/QueryBuilderV2.styles.scss

@@ -251,6 +251,10 @@
 					.ant-input-group-addon {
 						border-top-left-radius: 0px !important;
 						border-top-right-radius: 0px !important;
+						background: var(--bg-ink-300);
+						color: var(--bg-vanilla-400);
+						font-size: 12px;
+						font-weight: 300;
 					}
 
 					.ant-input {
@@ -398,7 +402,7 @@
 	}
 
 	.qb-search-container {
-		.metrics-select-container {
+		.metrics-container {
 			margin-bottom: 12px;
 		}
 	}

frontend/src/components/QueryBuilderV2/QueryBuilderV2.tsx

@@ -22,6 +22,8 @@ export const QueryBuilderV2 = memo(function QueryBuilderV2({
 	showOnlyWhereClause = false,
 	showTraceOperator = false,
 	version,
+	onSignalSourceChange,
+	signalSourceChangeEnabled = false,
 }: QueryBuilderProps): JSX.Element {
 	const {
 		currentQuery,
@@ -175,6 +177,9 @@ export const QueryBuilderV2 = memo(function QueryBuilderV2({
 							queryVariant={config?.queryVariant || 'dropdown'}
 							showOnlyWhereClause={showOnlyWhereClause}
 							isListViewPanel={isListViewPanel}
+							onSignalSourceChange={onSignalSourceChange || ((): void => {})}
+							signalSourceChangeEnabled={signalSourceChangeEnabled}
+							queriesCount={1}
 						/>
 					) : (
 						currentQuery.builder.queryData.map((query, index) => (
@@ -193,7 +198,10 @@ export const QueryBuilderV2 = memo(function QueryBuilderV2({
 								queryVariant={config?.queryVariant || 'dropdown'}
 								showOnlyWhereClause={showOnlyWhereClause}
 								isListViewPanel={isListViewPanel}
-								signalSource={config?.signalSource || ''}
+								signalSource={query.source as 'meter' | ''}
+								onSignalSourceChange={onSignalSourceChange || ((): void => {})}
+								signalSourceChangeEnabled={signalSourceChangeEnabled}
+								queriesCount={currentQuery.builder.queryData.length}
 							/>
 						))
 					)}

frontend/src/components/QueryBuilderV2/QueryV2/MerticsAggregateSection/MetricsAggregateSection.styles.scss

@@ -98,6 +98,13 @@
 					border-radius: 2px;
 					border: 1.005px solid var(--Slate-400, #1d212d);
 					background: var(--Ink-300, #16181d);
+					color: var(--bg-vanilla-400);
+					font-family: 'Geist Mono';
+					font-size: 13px;
+					font-style: normal;
+					font-weight: 400;
+					line-height: 20px;
+					letter-spacing: -0.07px;
 				}
 
 				.input-with-label {

frontend/src/components/QueryBuilderV2/QueryV2/MetricsSelect/MetricsSelect.styles.scss

@@ -1,5 +1,23 @@
-.metrics-select-container {
+.metrics-source-select-container {
 	margin-bottom: 8px;
+	display: flex;
+	flex-direction: row;
+	align-items: flex-start;
+	gap: 8px;
+	width: 100%;
+
+	.ant-select-selection-search-input {
+		font-size: 12px !important;
+		line-height: 27px;
+		&::placeholder {
+			color: var(--bg-vanilla-400) !important;
+			font-size: 12px !important;
+		}
+	}
+
+	.source-selector {
+		width: 120px;
+	}
 
 	.ant-select-selector {
 		width: 100%;
@@ -13,6 +31,11 @@
 		font-weight: 400;
 		line-height: 20px; /* 142.857% */
 		min-height: 36px;
+
+		.ant-select-selection-placeholder {
+			color: var(--bg-vanilla-400) !important;
+			font-size: 12px !important;
+		}
 	}
 
 	.ant-select-dropdown {
@@ -42,7 +65,7 @@
 }
 
 .lightMode {
-	.metrics-select-container {
+	.metrics-source-select-container {
 		.ant-select-selector {
 			border: 1px solid var(--bg-vanilla-300) !important;
 			background: var(--bg-vanilla-100);

frontend/src/components/QueryBuilderV2/QueryV2/MetricsSelect/MetricsSelect.tsx

@@ -1,34 +1,121 @@
 import './MetricsSelect.styles.scss';
 
+import { Select } from 'antd';
+import {
+	initialQueriesMap,
+	initialQueryMeterWithType,
+	PANEL_TYPES,
+} from 'constants/queryBuilder';
 import { AggregatorFilter } from 'container/QueryBuilder/filters';
+import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useQueryOperations } from 'hooks/queryBuilder/useQueryBuilderOperations';
-import { memo } from 'react';
+import { memo, useCallback, useMemo, useState } from 'react';
+import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
+import { DataSource } from 'types/common/queryBuilder';
+import { SelectOption } from 'types/common/select';
+
+export const SOURCE_OPTIONS: SelectOption<string, string>[] = [
+	{ value: 'metrics', label: 'Metrics' },
+	{ value: 'meter', label: 'Meter' },
+];
 
 export const MetricsSelect = memo(function MetricsSelect({
 	query,
 	index,
 	version,
 	signalSource,
+	onSignalSourceChange,
+	signalSourceChangeEnabled = false,
 }: {
 	query: IBuilderQuery;
 	index: number;
 	version: string;
 	signalSource: 'meter' | '';
+	onSignalSourceChange: (value: string) => void;
+	signalSourceChangeEnabled: boolean;
 }): JSX.Element {
+	const [attributeKeys, setAttributeKeys] = useState<BaseAutocompleteData[]>([]);
+
 	const { handleChangeAggregatorAttribute } = useQueryOperations({
 		index,
 		query,
 		entityVersion: version,
 	});
 
+	const handleAggregatorAttributeChange = useCallback(
+		(value: BaseAutocompleteData, isEditMode?: boolean) => {
+			handleChangeAggregatorAttribute(value, isEditMode, attributeKeys || []);
+		},
+		[handleChangeAggregatorAttribute, attributeKeys],
+	);
+
+	const { updateAllQueriesOperators, handleSetQueryData } = useQueryBuilder();
+
+	const source = useMemo(
+		() => (signalSource === 'meter' ? 'meter' : 'metrics'),
+		[signalSource],
+	);
+
+	const defaultMeterQuery = useMemo(
+		() =>
+			updateAllQueriesOperators(
+				initialQueryMeterWithType,
+				PANEL_TYPES.BAR,
+				DataSource.METRICS,
+				'meter' as 'meter' | '',
+			),
+		[updateAllQueriesOperators],
+	);
+
+	const defaultMetricsQuery = useMemo(
+		() =>
+			updateAllQueriesOperators(
+				initialQueriesMap.metrics,
+				PANEL_TYPES.BAR,
+				DataSource.METRICS,
+				'',
+			),
+		[updateAllQueriesOperators],
+	);
+
+	const handleSignalSourceChange = (value: string): void => {
+		onSignalSourceChange(value);
+		handleSetQueryData(
+			index,
+			value === 'meter'
+				? {
+						...defaultMeterQuery.builder.queryData[0],
+						source: 'meter',
+						queryName: query.queryName,
+				  }
+				: {
+						...defaultMetricsQuery.builder.queryData[0],
+						source: '',
+						queryName: query.queryName,
+				  },
+		);
+	};
+
 	return (
-		<div className="metrics-select-container">
+		<div className="metrics-source-select-container">
+			{signalSourceChangeEnabled && (
+				<Select
+					className="source-selector"
+					placeholder="Source"
+					options={SOURCE_OPTIONS}
+					value={source}
+					defaultValue="metrics"
+					onChange={handleSignalSourceChange}
+				/>
+			)}
+
 			<AggregatorFilter
-				onChange={handleChangeAggregatorAttribute}
+				onChange={handleAggregatorAttributeChange}
 				query={query}
 				index={index}
 				signalSource={signalSource || ''}
+				setAttributeKeys={setAttributeKeys}
 			/>
 		</div>
 	);

frontend/src/components/QueryBuilderV2/QueryV2/QueryAddOns/QueryAddOns.styles.scss

@@ -236,6 +236,10 @@
 					background: var(--bg-ink-100) !important;
 					opacity: 0.5 !important;
 				}
+
+				.cm-activeLine > span {
+					font-size: 12px !important;
+				}
 			}
 		}
 
@@ -271,6 +275,9 @@
 
 		box-sizing: border-box;
 		position: relative;
+		.cm-placeholder {
+			font-size: 12px !important;
+		}
 	}
 }
 

frontend/src/components/QueryBuilderV2/QueryV2/QueryAddOns/QueryAddOns.tsx

@@ -500,7 +500,10 @@ function QueryAddOns({
 								}
 								value={addOn}
 							>
-								<div className="add-on-tab-title">
+								<div
+									className="add-on-tab-title"
+									data-testid={`query-add-on-${addOn.key}`}
+								>
 									{addOn.icon}
 									{addOn.label}
 								</div>

frontend/src/components/QueryBuilderV2/QueryV2/QueryAggregation/QueryAggregation.styles.scss

@@ -20,6 +20,8 @@
 				border-radius: 2px;
 				flex: 1;
 				min-width: 0;
+				font-size: 12px;
+				color: var(--bg-vanilla-400) !important;
 
 				&.error {
 					.cm-editor {
@@ -231,6 +233,9 @@
 				.query-aggregation-interval-input {
 					input {
 						max-width: 120px;
+						&::placeholder {
+							color: var(--bg-vanilla-400);
+						}
 					}
 				}
 			}

frontend/src/components/QueryBuilderV2/QueryV2/QueryFooter/QueryFooter.styles.scss

@@ -0,0 +1,7 @@
+.add-trace-operator-button,
+.add-new-query-button,
+.add-formula-button {
+	border: 1px solid var(--bg-slate-400);
+	background: var(--bg-ink-300);
+	box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
+}

frontend/src/components/QueryBuilderV2/QueryV2/QueryFooter/QueryFooter.tsx

@@ -1,3 +1,5 @@
+import './QueryFooter.styles.scss';
+
 /* eslint-disable react/require-default-props */
 import { Button, Tooltip, Typography } from 'antd';
 import { DraftingCompass, Plus, Sigma } from 'lucide-react';
@@ -22,8 +24,7 @@ export default function QueryFooter({
 				<div className="qb-add-new-query">
 					<Tooltip title={<div style={{ textAlign: 'center' }}>Add New Query</div>}>
 						<Button
-							className="add-new-query-button periscope-btn secondary"
-							type="text"
+							className="add-new-query-button periscope-btn "
 							icon={<Plus size={16} />}
 							onClick={addNewBuilderQuery}
 						/>
@@ -49,7 +50,7 @@ export default function QueryFooter({
 							}
 						>
 							<Button
-								className="add-formula-button periscope-btn secondary"
+								className="add-formula-button periscope-btn "
 								icon={<Sigma size={16} />}
 								onClick={addNewFormula}
 							>
@@ -77,7 +78,7 @@ export default function QueryFooter({
 							}
 						>
 							<Button
-								className="add-trace-operator-button periscope-btn secondary"
+								className="add-trace-operator-button periscope-btn "
 								icon={<DraftingCompass size={16} />}
 								onClick={(): void => addTraceOperator?.()}
 							>

frontend/src/components/QueryBuilderV2/QueryV2/QueryV2.tsx

@@ -33,7 +33,15 @@ export const QueryV2 = memo(function QueryV2({
 	showOnlyWhereClause = false,
 	signalSource = '',
 	isMultiQueryAllowed = false,
-}: QueryProps & { ref: React.RefObject<HTMLDivElement> }): JSX.Element {
+	onSignalSourceChange,
+	signalSourceChangeEnabled = false,
+	queriesCount = 1,
+}: QueryProps & {
+	ref: React.RefObject<HTMLDivElement>;
+	onSignalSourceChange: (value: string) => void;
+	signalSourceChangeEnabled: boolean;
+	queriesCount: number;
+}): JSX.Element {
 	const { cloneQuery, panelType } = useQueryBuilder();
 
 	const showFunctions = query?.functions?.length > 0;
@@ -186,12 +194,16 @@ export const QueryV2 = memo(function QueryV2({
 												icon: <Copy size={14} />,
 												onClick: handleCloneEntity,
 											},
-											{
-												label: 'Delete',
-												key: 'delete-query',
-												icon: <Trash size={14} />,
-												onClick: handleDeleteQuery,
-											},
+											...(queriesCount && queriesCount > 1
+												? [
+														{
+															label: 'Delete',
+															key: 'delete-query',
+															icon: <Trash size={14} />,
+															onClick: handleDeleteQuery,
+														},
+												  ]
+												: []),
 										],
 									}}
 									placement="bottomRight"
@@ -207,12 +219,14 @@ export const QueryV2 = memo(function QueryV2({
 					<div className="qb-elements-container">
 						<div className="qb-search-container">
 							{dataSource === DataSource.METRICS && (
-								<div className="metrics-select-container">
+								<div className="metrics-container">
 									<MetricsSelect
 										query={query}
 										index={index}
 										version={ENTITY_VERSION_V5}
 										signalSource={signalSource as 'meter' | ''}
+										onSignalSourceChange={onSignalSourceChange}
+										signalSourceChangeEnabled={signalSourceChangeEnabled}
 									/>
 								</div>
 							)}
@@ -258,7 +272,7 @@ export const QueryV2 = memo(function QueryV2({
 								panelType={panelType}
 								query={query}
 								index={index}
-								key={`metrics-aggregate-section-${query.queryName}-${query.dataSource}`}
+								key={`metrics-aggregate-section-${query.queryName}-${query.dataSource}-${signalSource}`}
 								version="v4"
 								signalSource={signalSource as 'meter' | ''}
 							/>

frontend/src/components/QueryBuilderV2/QueryV2/TraceOperator/TraceOperator.styles.scss

@@ -92,6 +92,9 @@
 
 		.qb-trace-operator-editor-container {
 			flex: 1;
+			.cm-activeLine > span {
+				font-size: 12px;
+			}
 		}
 
 		&.arrow-left {
@@ -113,6 +116,8 @@
 			text-overflow: ellipsis;
 			padding: 0px 8px;
 			border-right: 1px solid var(--bg-slate-400);
+			font-size: 12px;
+			font-weight: 300;
 		}
 	}
 }

frontend/src/components/QueryBuilderV2/QueryV2/TraceOperator/TraceOperator.tsx

@@ -68,7 +68,7 @@ export default function TraceOperator({
 						!isListViewPanel && 'qb-trace-operator-arrow',
 					)}
 				>
-					<Typography.Text className="label">TRACE OPERATOR</Typography.Text>
+					<Typography.Text className="label">Trace Operator</Typography.Text>
 					<div className="qb-trace-operator-editor-container">
 						<TraceOperatorEditor
 							value={traceOperator?.expression || ''}

frontend/src/components/QueryBuilderV2/utils.ts

@@ -224,7 +224,7 @@ export const convertFiltersToExpressionWithExistingQuery = (
 	const visitedPairs: Set<string> = new Set(); // Set to track visited query pairs
 
 	// Map extracted query pairs to key-specific pair information for faster access
-	let queryPairsMap = getQueryPairsMap(existingQuery.trim());
+	let queryPairsMap = getQueryPairsMap(existingQuery);
 
 	filters?.items?.forEach((filter) => {
 		const { key, op, value } = filter;
@@ -309,7 +309,7 @@ export const convertFiltersToExpressionWithExistingQuery = (
 							)}${OPERATORS.IN} ${formattedValue} ${modifiedQuery.slice(
 								notInPair.position.valueEnd + 1,
 							)}`;
-							queryPairsMap = getQueryPairsMap(modifiedQuery.trim());
+							queryPairsMap = getQueryPairsMap(modifiedQuery);
 						}
 						shouldAddToNonExisting = false; // Don't add this to non-existing filters
 					} else if (

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

@@ -45,6 +45,12 @@
 		flex-direction: column;
 		gap: 8px;
 
+		.filter-separator {
+			height: 1px;
+			background-color: var(--bg-slate-400);
+			margin: 4px 0;
+		}
+
 		.value {
 			display: flex;
 			align-items: center;
@@ -177,6 +183,12 @@
 				}
 			}
 		}
+
+		.values {
+			.filter-separator {
+				background-color: var(--bg-vanilla-300);
+			}
+		}
 	}
 }
 

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

@@ -0,0 +1,191 @@
+import { FiltersType, QuickFiltersSource } from 'components/QuickFilters/types';
+import { useGetAggregateValues } from 'hooks/queryBuilder/useGetAggregateValues';
+import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
+import { useGetQueryKeyValueSuggestions } from 'hooks/querySuggestions/useGetQueryKeyValueSuggestions';
+import { quickFiltersAttributeValuesResponse } from 'mocks-server/__mockdata__/customQuickFilters';
+import { rest, server } from 'mocks-server/server';
+import { UseQueryResult } from 'react-query';
+import { render, screen, userEvent, waitFor } from 'tests/test-utils';
+import { SuccessResponse } from 'types/api';
+import { IAttributeValuesResponse } from 'types/api/queryBuilder/getAttributesValues';
+import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
+import { DataSource } from 'types/common/queryBuilder';
+
+import CheckboxFilter from './Checkbox';
+
+// Mock the query builder hook
+jest.mock('hooks/queryBuilder/useQueryBuilder');
+const mockUseQueryBuilder = jest.mocked(useQueryBuilder);
+
+// Mock the aggregate values hook
+jest.mock('hooks/queryBuilder/useGetAggregateValues');
+
+const mockUseGetAggregateValues = jest.mocked(useGetAggregateValues);
+
+// Mock the key value suggestions hook
+jest.mock('hooks/querySuggestions/useGetQueryKeyValueSuggestions');
+
+const mockUseGetQueryKeyValueSuggestions = jest.mocked(
+	useGetQueryKeyValueSuggestions,
+);
+
+interface MockFilterConfig {
+	title: string;
+	attributeKey: {
+		key: string;
+		dataType: DataTypes;
+		type: string;
+	};
+	dataSource: DataSource;
+	defaultOpen: boolean;
+	type: FiltersType;
+}
+
+const createMockFilter = (
+	overrides: Partial<MockFilterConfig> = {},
+): MockFilterConfig => ({
+	// eslint-disable-next-line sonarjs/no-duplicate-string
+	title: 'Service Name',
+	attributeKey: {
+		key: 'service.name',
+		dataType: DataTypes.String,
+		type: 'resource',
+	},
+	dataSource: DataSource.LOGS,
+	defaultOpen: false,
+	type: FiltersType.CHECKBOX,
+	...overrides,
+});
+
+const createMockQueryBuilderData = (hasActiveFilters = false): any => ({
+	lastUsedQuery: 0,
+	currentQuery: {
+		builder: {
+			queryData: [
+				{
+					filters: {
+						items: hasActiveFilters
+							? [
+									{
+										key: {
+											key: 'service.name',
+											dataType: DataTypes.String,
+											type: 'resource',
+										},
+										op: 'in',
+										value: ['otel-demo', 'sample-flask'],
+									},
+							  ]
+							: [],
+					},
+				},
+			],
+		},
+	},
+	redirectWithQueryBuilderData: jest.fn(),
+});
+
+describe('CheckboxFilter - User Flows', () => {
+	beforeEach(() => {
+		// Reset all mocks
+		jest.clearAllMocks();
+
+		// Default mock implementations using the same structure as existing tests
+		mockUseGetAggregateValues.mockReturnValue({
+			data: {
+				payload: {
+					stringAttributeValues: [
+						'mq-kafka',
+						'otel-demo',
+						'otlp-python',
+						'sample-flask',
+					],
+				},
+			},
+			isLoading: false,
+		} as UseQueryResult<SuccessResponse<IAttributeValuesResponse>>);
+
+		mockUseGetQueryKeyValueSuggestions.mockReturnValue({
+			data: null,
+			isLoading: false,
+		} as any);
+
+		// Setup MSW server for API calls
+		server.use(
+			rest.get('*/api/v3/autocomplete/attribute_values', (_req, res, ctx) =>
+				res(ctx.status(200), ctx.json(quickFiltersAttributeValuesResponse)),
+			),
+		);
+	});
+
+	it('should auto-open filter and prioritize checked items with visual separator when user opens page with active filters', async () => {
+		// Mock query builder with active filters
+		mockUseQueryBuilder.mockReturnValue(createMockQueryBuilderData(true) as any);
+
+		const mockFilter = createMockFilter({ defaultOpen: false });
+
+		render(
+			<CheckboxFilter
+				filter={mockFilter}
+				source={QuickFiltersSource.LOGS_EXPLORER}
+			/>,
+		);
+
+		// User should see the filter is automatically opened (not collapsed)
+		expect(screen.getByText('Service Name')).toBeInTheDocument();
+		await waitFor(() => {
+			// eslint-disable-next-line sonarjs/no-duplicate-string
+			expect(screen.getByPlaceholderText('Filter values')).toBeInTheDocument();
+		});
+
+		// User should see visual separator between checked and unchecked items
+		expect(screen.getByTestId('filter-separator')).toBeInTheDocument();
+
+		// User should see checked items at the top
+		await waitFor(() => {
+			const checkboxes = screen.getAllByRole('checkbox');
+			expect(checkboxes).toHaveLength(4); // Ensure we have exactly 4 checkboxes
+			expect(checkboxes[0]).toBeChecked(); // otel-demo should be first and checked
+			expect(checkboxes[1]).toBeChecked(); // sample-flask should be second and checked
+			expect(checkboxes[2]).not.toBeChecked(); // mq-kafka should be unchecked
+			expect(checkboxes[3]).not.toBeChecked(); // otlp-python should be unchecked
+		});
+	});
+
+	it('should respect user preference when user manually toggles filter over auto-open behavior', async () => {
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+
+		// Mock query builder with active filters
+		mockUseQueryBuilder.mockReturnValue(createMockQueryBuilderData(true) as any);
+
+		const mockFilter = createMockFilter({ defaultOpen: false });
+
+		render(
+			<CheckboxFilter
+				filter={mockFilter}
+				source={QuickFiltersSource.LOGS_EXPLORER}
+			/>,
+		);
+
+		// Initially auto-opened due to active filters
+		await waitFor(() => {
+			expect(screen.getByPlaceholderText('Filter values')).toBeInTheDocument();
+		});
+
+		// User manually closes the filter
+		await user.click(screen.getByText('Service Name'));
+
+		// User should see filter is now closed (respecting user preference)
+		expect(
+			screen.queryByPlaceholderText('Filter values'),
+		).not.toBeInTheDocument();
+
+		// User manually opens the filter again
+		await user.click(screen.getByText('Service Name'));
+
+		// User should see filter is now open (respecting user preference)
+		await waitFor(() => {
+			expect(screen.getByPlaceholderText('Filter values')).toBeInTheDocument();
+		});
+	});
+});

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

@@ -21,7 +21,7 @@ import { useGetQueryKeyValueSuggestions } from 'hooks/querySuggestions/useGetQue
 import useDebouncedFn from 'hooks/useDebouncedFunction';
 import { cloneDeep, isArray, isEqual, isFunction } from 'lodash-es';
 import { ChevronDown, ChevronRight } from 'lucide-react';
-import { useMemo, useState } from 'react';
+import { Fragment, useMemo, useState } from 'react';
 import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { Query, TagFilterItem } from 'types/api/queryBuilder/queryBuilderData';
 import { DataSource } from 'types/common/queryBuilder';
@@ -54,7 +54,8 @@ interface ICheckboxProps {
 export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
 	const { source, filter, onFilterChange } = props;
 	const [searchText, setSearchText] = useState<string>('');
-	const [isOpen, setIsOpen] = useState<boolean>(filter.defaultOpen);
+	// null = no user action, true = user opened, false = user closed
+	const [userToggleState, setUserToggleState] = useState<boolean | null>(null);
 	const [visibleItemsCount, setVisibleItemsCount] = useState<number>(10);
 
 	const {
@@ -63,6 +64,33 @@ export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
 		redirectWithQueryBuilderData,
 	} = useQueryBuilder();
 
+	// Check if this filter has active filters in the query
+	const isSomeFilterPresentForCurrentAttribute = useMemo(
+		() =>
+			currentQuery.builder.queryData?.[
+				lastUsedQuery || 0
+			]?.filters?.items?.some((item) =>
+				isEqual(item.key?.key, filter.attributeKey.key),
+			),
+		[currentQuery.builder.queryData, lastUsedQuery, filter.attributeKey.key],
+	);
+
+	// Derive isOpen from filter state + user action
+	const isOpen = useMemo(() => {
+		// If user explicitly toggled, respect that
+		if (userToggleState !== null) return userToggleState;
+
+		// Auto-open if this filter has active filters in the query
+		if (isSomeFilterPresentForCurrentAttribute) return true;
+
+		// Otherwise use default behavior (first 2 filters open)
+		return filter.defaultOpen;
+	}, [
+		userToggleState,
+		isSomeFilterPresentForCurrentAttribute,
+		filter.defaultOpen,
+	]);
+
 	const { data, isLoading } = useGetAggregateValues(
 		{
 			aggregateOperator: filter.aggregateOperator || 'noop',
@@ -128,8 +156,6 @@ export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
 		);
 	}, [data?.payload, filter.attributeKey.dataType, keyValueSuggestions, source]);
 
-	const currentAttributeKeys = attributeValues.slice(0, visibleItemsCount);
-
 	const setSearchTextDebounced = useDebouncedFn((...args) => {
 		setSearchText(args[0] as string);
 	}, DEBOUNCE_DELAY);
@@ -202,6 +228,23 @@ export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
 	const isMultipleValuesTrueForTheKey =
 		Object.values(currentFilterState).filter((val) => val).length > 1;
 
+	// Sort checked items to the top, then unchecked items
+	const currentAttributeKeys = useMemo(() => {
+		const checkedValues = attributeValues.filter(
+			(val) => currentFilterState[val],
+		);
+		const uncheckedValues = attributeValues.filter(
+			(val) => !currentFilterState[val],
+		);
+		return [...checkedValues, ...uncheckedValues].slice(0, visibleItemsCount);
+	}, [attributeValues, currentFilterState, visibleItemsCount]);
+
+	// Count of checked values in the currently visible items
+	const checkedValuesCount = useMemo(
+		() => currentAttributeKeys.filter((val) => currentFilterState[val]).length,
+		[currentAttributeKeys, currentFilterState],
+	);
+
 	const handleClearFilterAttribute = (): void => {
 		const preparedQuery: Query = {
 			...currentQuery,
@@ -235,12 +278,6 @@ export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
 		}
 	};
 
-	const isSomeFilterPresentForCurrentAttribute = currentQuery.builder.queryData?.[
-		lastUsedQuery || 0
-	]?.filters?.items?.some((item) =>
-		isEqual(item.key?.key, filter.attributeKey.key),
-	);
-
 	const onChange = (
 		value: string,
 		checked: boolean,
@@ -490,10 +527,10 @@ export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
 				className="filter-header-checkbox"
 				onClick={(): void => {
 					if (isOpen) {
-						setIsOpen(false);
+						setUserToggleState(false);
 						setVisibleItemsCount(10);
 					} else {
-						setIsOpen(true);
+						setUserToggleState(true);
 					}
 				}}
 			>
@@ -540,50 +577,59 @@ export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
 					)}
 					{attributeValues.length > 0 ? (
 						<section className="values">
-							{currentAttributeKeys.map((value: string) => (
-								<div key={value} className="value">
-									<Checkbox
-										onChange={(e): void => onChange(value, e.target.checked, false)}
-										checked={currentFilterState[value]}
-										disabled={isFilterDisabled}
-										rootClassName="check-box"
-									/>
+							{currentAttributeKeys.map((value: string, index: number) => (
+								<Fragment key={value}>
+									{index === checkedValuesCount && checkedValuesCount > 0 && (
+										<div
+											key="separator"
+											className="filter-separator"
+											data-testid="filter-separator"
+										/>
+									)}
+									<div className="value">
+										<Checkbox
+											onChange={(e): void => onChange(value, e.target.checked, false)}
+											checked={currentFilterState[value]}
+											disabled={isFilterDisabled}
+											rootClassName="check-box"
+										/>
 
-									<div
-										className={cx(
-											'checkbox-value-section',
-											isFilterDisabled ? 'filter-disabled' : '',
-										)}
-										onClick={(): void => {
-											if (isFilterDisabled) {
-												return;
-											}
-											onChange(value, currentFilterState[value], true);
-										}}
-									>
-										<div className={`${filter.title} label-${value}`} />
-										{filter.customRendererForValue ? (
-											filter.customRendererForValue(value)
-										) : (
-											<Typography.Text
-												className="value-string"
-												ellipsis={{ tooltip: { placement: 'right' } }}
-											>
-												{String(value)}
-											</Typography.Text>
-										)}
-										<Button type="text" className="only-btn">
-											{isSomeFilterPresentForCurrentAttribute
-												? currentFilterState[value] && !isMultipleValuesTrueForTheKey
-													? 'All'
-													: 'Only'
-												: 'Only'}
-										</Button>
-										<Button type="text" className="toggle-btn">
-											Toggle
-										</Button>
+										<div
+											className={cx(
+												'checkbox-value-section',
+												isFilterDisabled ? 'filter-disabled' : '',
+											)}
+											onClick={(): void => {
+												if (isFilterDisabled) {
+													return;
+												}
+												onChange(value, currentFilterState[value], true);
+											}}
+										>
+											<div className={`${filter.title} label-${value}`} />
+											{filter.customRendererForValue ? (
+												filter.customRendererForValue(value)
+											) : (
+												<Typography.Text
+													className="value-string"
+													ellipsis={{ tooltip: { placement: 'right' } }}
+												>
+													{String(value)}
+												</Typography.Text>
+											)}
+											<Button type="text" className="only-btn">
+												{isSomeFilterPresentForCurrentAttribute
+													? currentFilterState[value] && !isMultipleValuesTrueForTheKey
+														? 'All'
+														: 'Only'
+													: 'Only'}
+											</Button>
+											<Button type="text" className="toggle-btn">
+												Toggle
+											</Button>
+										</div>
 									</div>
-								</div>
+								</Fragment>
 							))}
 						</section>
 					) : isEmptyStateWithDocsEnabled ? (

frontend/src/components/Uplot/plugins/verticalMarkersPlugin.ts

@@ -1,177 +0,0 @@
-/* eslint-disable sonarjs/cognitive-complexity */
-/* eslint-disable sonarjs/no-duplicate-string */
-
-import uPlot from 'uplot';
-
-type MarkersData = { id: string | number; val: number; stroke?: string };
-
-export function verticalMarkersPlugin({
-	markersData = [],
-	lineType = [5, 3],
-	width = 1,
-}: {
-	markersData?: MarkersData[];
-	lineType?: number[];
-	width?: number;
-} = {}): uPlot.Plugin {
-	const DEFAULT_STROKE = 'rgba(0, 102, 255, 0.95)';
-	let removeListeners: (() => void) | null = null;
-	let tooltipEl: HTMLDivElement | null = null;
-	const renderAxisMarkers = (uu: uPlot): void => {
-		const axes = uu.root.querySelectorAll('.u-axis');
-		const xAxis = (axes && (axes[0] as HTMLElement)) || null;
-		if (!xAxis) return;
-
-		// attach delegated hover/mouseout listeners once on the x-axis container
-		if (!(xAxis as HTMLElement).dataset?.vlineHoverAttached) {
-			const onMouseOver = (e: MouseEvent): void => {
-				const target = e.target as HTMLElement;
-				if (!target?.classList?.contains('vline-triangle-marker')) return;
-
-				const { id } = target.dataset;
-				const valStr = target.dataset.val;
-				const val = valStr ? Number(valStr) : undefined;
-				// const mData = markersData.find((d) => String(d.id) === String(id));
-				// create tooltip
-				if (!tooltipEl) {
-					tooltipEl = document.createElement('div');
-					tooltipEl.className = 'vline-marker-tooltip';
-					Object.assign(tooltipEl.style, {
-						position: 'fixed',
-						padding: '6px 8px',
-						borderRadius: '4px',
-						fontSize: '12px',
-						zIndex: '10000',
-						pointerEvents: 'none',
-						background: '#111827',
-						color: '#e5e7eb',
-						border: '1px solid #374151',
-					});
-					document.body.appendChild(tooltipEl);
-				}
-				tooltipEl.textContent = `id: ${id ?? ''} • ts: ${val ?? ''}`;
-				// position near cursor
-				tooltipEl.style.left = `${e.clientX + 10}px`;
-				tooltipEl.style.top = `${e.clientY - 28}px`;
-			};
-			const onMouseOut = (e: MouseEvent): void => {
-				const target = e.target as HTMLElement;
-				if (!target?.classList?.contains('vline-triangle-marker')) return;
-				if (tooltipEl) {
-					tooltipEl.remove();
-					tooltipEl = null;
-				}
-			};
-			xAxis.addEventListener('mouseover', onMouseOver);
-			xAxis.addEventListener('mouseout', onMouseOut);
-			removeListeners = (): void => {
-				xAxis.removeEventListener('mouseover', onMouseOver);
-				xAxis.removeEventListener('mouseout', onMouseOut);
-			};
-			(xAxis as HTMLElement).dataset.vlineHoverAttached = '1';
-		}
-
-		// cleanup markers to avoid duplicates on rerender/resize
-		xAxis.querySelectorAll('.vline-triangle-marker').forEach((el) => el.remove());
-
-		const plotLeft = uu.bbox.left;
-		const plotRight = plotLeft + uu.bbox.width;
-
-		for (let i = 0; i < markersData.length; i++) {
-			const mData = markersData[i];
-			const xAbs = uu.valToPos(mData.val, 'x', true);
-			if (xAbs >= plotLeft && xAbs <= plotRight) {
-				const xPx = (xAbs - plotLeft) / window.devicePixelRatio;
-
-				const marker = document.createElement('div');
-				marker.className = 'vline-triangle-marker';
-				marker.dataset.id = String(mData.id); // may change later after BE discussion
-				marker.dataset.val = String(mData.val); // TODO: remove this later
-				Object.assign(marker.style, {
-					position: 'absolute',
-					width: '0px',
-					height: '0px',
-					borderLeft: '5px solid transparent',
-					borderRight: '5px solid transparent',
-					borderBottomWidth: '5px',
-					borderBottomStyle: 'solid',
-					borderBottomColor: mData.stroke || DEFAULT_STROKE,
-					transform: 'translateX(-50%)',
-					cursor: 'pointer',
-					zIndex: '1',
-					left: `${xPx}px`,
-				});
-
-				xAxis.appendChild(marker);
-			}
-		}
-	};
-
-	return {
-		hooks: {
-			destroy: [
-				(): void => {
-					if (tooltipEl) {
-						tooltipEl.remove();
-						tooltipEl = null;
-					}
-					if (removeListeners) {
-						removeListeners();
-						removeListeners = null;
-					}
-				},
-			],
-			drawAxes: [
-				(uu: uPlot): void => {
-					renderAxisMarkers(uu);
-				},
-			],
-			draw: [
-				(uu: uPlot): void => {
-					const { ctx } = uu;
-					const { top } = uu.bbox;
-					const bottom = top + uu.bbox.height;
-					const plotLeft = uu.bbox.left;
-					const plotRight = plotLeft + uu.bbox.width;
-
-					ctx.save();
-					for (let i = 0; i < markersData.length; i++) {
-						const mData = markersData[i];
-						const x = uu.valToPos(mData.val, 'x', true);
-						// only draw if within plot bounds
-						if (x >= plotLeft && x <= plotRight) {
-							ctx.beginPath();
-							ctx.strokeStyle = mData.stroke || DEFAULT_STROKE;
-							ctx.lineWidth = width;
-							ctx.setLineDash(lineType || []);
-							ctx.moveTo(x, top);
-							ctx.lineTo(x, bottom);
-							ctx.stroke();
-						}
-					}
-					ctx.restore();
-				},
-			],
-		},
-	};
-}
-
-// MOVE TO REACT. or use portal for tooltip.
-// correct the format should work with expected data from BE
-// Remove cognitive complexity rule.
-
-// logic to get marker plugin to be added to context
-// depending on type of marker parse the data to choose color. example deployment should be red etc.
-// pass such data with multple colors to check render.
-// PERF CHECK.
-
-// drive data passing from the context for markers. data in this is enriched only when we
-// use <ShowMarkers /> component. else it will be empty.
-// plugins. and pass marker hooks using this
-// should only pass marker hook if data is present(shouldRenderMarker memo)
-// depending on type of marker parse the data to choose color. example deployment should be red etc.
-// pass such data with multple colors to check render.
-// PERF CHECK.
-
-// drive data passing from the context for markers. data in this is enriched only when we
-// use <ShowMarkers /> component. else it will be empty.

frontend/src/components/YAxisUnitSelector/YAxisUnitSelector.tsx

@@ -12,6 +12,7 @@ function YAxisUnitSelector({
 	onChange,
 	placeholder = 'Please select a unit',
 	loading = false,
+	'data-testid': dataTestId,
 }: YAxisUnitSelectorProps): JSX.Element {
 	const universalUnit = mapMetricUnitToUniversalUnit(value);
 
@@ -45,6 +46,7 @@ function YAxisUnitSelector({
 				placeholder={placeholder}
 				filterOption={(input, option): boolean => handleSearch(input, option)}
 				loading={loading}
+				data-testid={dataTestId}
 			>
 				{Y_AXIS_CATEGORIES.map((category) => (
 					<Select.OptGroup key={category.name} label={category.name}>

frontend/src/components/YAxisUnitSelector/types.ts

@@ -4,6 +4,7 @@ export interface YAxisUnitSelectorProps {
 	placeholder?: string;
 	loading?: boolean;
 	disabled?: boolean;
+	'data-testid'?: string;
 }
 
 export enum UniversalYAxisUnit {

frontend/src/constants/dateTimeFormats.ts

@@ -24,6 +24,7 @@ export const DATE_TIME_FORMATS = {
 	TIME_SECONDS: 'HH:mm:ss',
 	TIME_UTC: 'HH:mm:ss (UTC Z)',
 	TIME_UTC_MS: 'HH:mm:ss.SSS (UTC Z)',
+	TIME_SPAN_PERCENTILE: 'HH:mm:ss MMM DD',
 
 	// Short date formats
 	DATE_SHORT: 'MM/DD',

frontend/src/constants/localStorage.ts

@@ -36,5 +36,4 @@ export enum LOCALSTORAGE {
 	LAST_USED_CUSTOM_TIME_RANGES = 'LAST_USED_CUSTOM_TIME_RANGES',
 	SHOW_FREQUENCY_CHART = 'SHOW_FREQUENCY_CHART',
 	DISSMISSED_COST_METER_INFO = 'DISMISSED_COST_METER_INFO',
-	MARKERS_OVERLAY_STATE = 'MARKERS_OVERLAY_STATE',
 }

frontend/src/constants/query.ts

@@ -50,4 +50,5 @@ export enum QueryParams {
 	tab = 'tab',
 	thresholds = 'thresholds',
 	selectedExplorerView = 'selectedExplorerView',
+	variables = 'variables',
 }

frontend/src/constants/reactQueryKeys.ts

@@ -86,7 +86,11 @@ export const REACT_QUERY_KEY = {
 	SPAN_LOGS: 'SPAN_LOGS',
 	SPAN_BEFORE_LOGS: 'SPAN_BEFORE_LOGS',
 	SPAN_AFTER_LOGS: 'SPAN_AFTER_LOGS',
+	TRACE_ONLY_LOGS: 'TRACE_ONLY_LOGS',
 
 	// Routing Policies Query Keys
 	GET_ROUTING_POLICIES: 'GET_ROUTING_POLICIES',
+
+	// Span Percentiles Query Keys
+	GET_SPAN_PERCENTILES: 'GET_SPAN_PERCENTILES',
 } as const;

frontend/src/constants/theme.ts

@@ -34,7 +34,7 @@ const themeColors = {
 		cyan: '#00FFFF',
 	},
 	chartcolors: {
-		robin: '#3F5ECC',
+		radicalRed: '#FF1A66',
 		dodgerBlue: '#2F80ED',
 		mediumOrchid: '#BB6BD9',
 		seaBuckthorn: '#F2994A',
@@ -58,7 +58,7 @@ const themeColors = {
 		oliveDrab: '#66991A',
 		lavenderRose: '#FF99E6',
 		electricLime: '#CCFF1A',
-		radicalRed: '#FF1A66',
+		robin: '#3F5ECC',
 		harleyOrange: '#E6331A',
 		turquoise: '#33FFCC',
 		gladeGreen: '#66994D',
@@ -80,7 +80,7 @@ const themeColors = {
 		maroon: '#800000',
 		navy: '#000080',
 		aquamarine: '#7FFFD4',
-		gold: '#FFD700',
+		darkSeaGreen: '#8FBC8F',
 		gray: '#808080',
 		skyBlue: '#87CEEB',
 		indigo: '#4B0082',
@@ -105,7 +105,7 @@ const themeColors = {
 		lawnGreen: '#7CFC00',
 		mediumSeaGreen: '#3CB371',
 		lightCoral: '#F08080',
-		darkSeaGreen: '#8FBC8F',
+		gold: '#FFD700',
 		sandyBrown: '#F4A460',
 		darkKhaki: '#BDB76B',
 		cornflowerBlue: '#6495ED',
@@ -113,7 +113,7 @@ const themeColors = {
 		paleGreen: '#98FB98',
 	},
 	lightModeColor: {
-		robin: '#3F5ECC',
+		radicalRed: '#FF1A66',
 		dodgerBlueDark: '#0C6EED',
 		steelgrey: '#2f4b7c',
 		steelpurple: '#665191',
@@ -143,7 +143,7 @@ const themeColors = {
 		oliveDrab: '#66991A',
 		lavenderRoseDark: '#F024BD',
 		electricLimeDark: '#84A800',
-		radicalRed: '#FF1A66',
+		robin: '#3F5ECC',
 		harleyOrange: '#E6331A',
 		gladeGreen: '#66994D',
 		hemlock: '#66664D',
@@ -181,7 +181,7 @@ const themeColors = {
 		darkOrchid: '#9932CC',
 		mediumSeaGreenDark: '#109E50',
 		lightCoralDark: '#F85959',
-		darkSeaGreenDark: '#509F50',
+		gold: '#FFD700',
 		sandyBrownDark: '#D97117',
 		darkKhakiDark: '#99900A',
 		cornflowerBlueDark: '#3371E6',

frontend/src/constants/userPreferences.ts

@@ -3,4 +3,5 @@ export const USER_PREFERENCES = {
 	NAV_SHORTCUTS: 'nav_shortcuts',
 	LAST_SEEN_CHANGELOG_VERSION: 'last_seen_changelog_version',
 	SPAN_DETAILS_PINNED_ATTRIBUTES: 'span_details_pinned_attributes',
+	SPAN_PERCENTILE_RESOURCE_ATTRIBUTES: 'span_percentile_resource_attributes',
 };

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

@@ -1,4 +1,5 @@
 import { Select } from 'antd';
+import { ENTITY_VERSION_V5 } from 'constants/app';
 import { initialQueriesMap } from 'constants/queryBuilder';
 import {
 	getAllEndpointsWidgetData,
@@ -264,6 +265,7 @@ function AllEndPoints({
 					customOnDragSelect={(): void => {}}
 					customTimeRange={timeRange}
 					customOnRowClick={onRowClick}
+					version={ENTITY_VERSION_V5}
 				/>
 			</div>
 		</div>

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

@@ -1,5 +1,6 @@
-import { ENTITY_VERSION_V4 } from 'constants/app';
+import { ENTITY_VERSION_V4, ENTITY_VERSION_V5 } from 'constants/app';
 import { initialQueriesMap } from 'constants/queryBuilder';
+import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import { useApiMonitoringParams } from 'container/ApiMonitoring/queryParams';
 import {
 	END_POINT_DETAILS_QUERY_KEYS_ARRAY,
@@ -178,18 +179,33 @@ function EndPointDetails({
 		[domainName, filters, minTime, maxTime],
 	);
 
+	const V5_QUERIES = [
+		REACT_QUERY_KEY.GET_ENDPOINT_STATUS_CODE_DATA,
+		REACT_QUERY_KEY.GET_ENDPOINT_STATUS_CODE_BAR_CHARTS_DATA,
+		REACT_QUERY_KEY.GET_ENDPOINT_STATUS_CODE_LATENCY_BAR_CHARTS_DATA,
+		REACT_QUERY_KEY.GET_ENDPOINT_METRICS_DATA,
+		REACT_QUERY_KEY.GET_ENDPOINT_DEPENDENT_SERVICES_DATA,
+		REACT_QUERY_KEY.GET_ENDPOINT_DROPDOWN_DATA,
+	] as const;
+
 	const endPointDetailsDataQueries = useQueries(
-		endPointDetailsQueryPayload.map((payload, index) => ({
-			queryKey: [
-				END_POINT_DETAILS_QUERY_KEYS_ARRAY[index],
-				payload,
-				filters?.items, // Include filters.items in queryKey for better caching
-				ENTITY_VERSION_V4,
-			],
-			queryFn: (): Promise<SuccessResponse<MetricRangePayloadProps>> =>
-				GetMetricQueryRange(payload, ENTITY_VERSION_V4),
-			enabled: !!payload,
-		})),
+		endPointDetailsQueryPayload.map((payload, index) => {
+			const queryKey = END_POINT_DETAILS_QUERY_KEYS_ARRAY[index];
+			const version = (V5_QUERIES as readonly string[]).includes(queryKey)
+				? ENTITY_VERSION_V5
+				: ENTITY_VERSION_V4;
+			return {
+				queryKey: [
+					END_POINT_DETAILS_QUERY_KEYS_ARRAY[index],
+					payload,
+					...(filters?.items?.length ? filters.items : []), // Include filters.items in queryKey for better caching
+					version,
+				],
+				queryFn: (): Promise<SuccessResponse<MetricRangePayloadProps>> =>
+					GetMetricQueryRange(payload, version),
+				enabled: !!payload,
+			};
+		}),
 	);
 
 	const [

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

@@ -1,8 +1,10 @@
 import { LoadingOutlined } from '@ant-design/icons';
 import { Spin, Switch, Table, Tooltip, Typography } from 'antd';
+import { getQueryRangeV5 } from 'api/v5/queryRange/getQueryRange';
+import { MetricRangePayloadV5, ScalarData } from 'api/v5/v5';
 import { useNavigateToExplorer } from 'components/CeleryTask/useNavigateToExplorer';
 import { withErrorBoundary } from 'components/ErrorBoundaryHOC';
-import { DEFAULT_ENTITY_VERSION, ENTITY_VERSION_V4 } from 'constants/app';
+import { ENTITY_VERSION_V5 } from 'constants/app';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import {
 	END_POINT_DETAILS_QUERY_KEYS_ARRAY,
@@ -11,13 +13,12 @@ import {
 	getTopErrorsColumnsConfig,
 	getTopErrorsCoRelationQueryFilters,
 	getTopErrorsQueryPayload,
-	TopErrorsResponseRow,
 } from 'container/ApiMonitoring/utils';
 import { GetMetricQueryRange } from 'lib/dashboard/getQueryResults';
 import { Info } from 'lucide-react';
 import { useMemo, useState } from 'react';
-import { useQueries } from 'react-query';
-import { SuccessResponse } from 'types/api';
+import { QueryFunctionContext, useQueries, useQuery } from 'react-query';
+import { SuccessResponse, SuccessResponseV2 } from 'types/api';
 import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
 import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
@@ -46,7 +47,7 @@ function TopErrors({
 		true,
 	);
 
-	const queryPayloads = useMemo(
+	const queryPayload = useMemo(
 		() =>
 			getTopErrorsQueryPayload(
 				domainName,
@@ -55,6 +56,10 @@ function TopErrors({
 				{
 					items: endPointName
 						? [
+								// Remove any existing http.url filters from initialFilters to avoid duplicates
+								...(initialFilters?.items?.filter(
+									(item) => item.key?.key !== SPAN_ATTRIBUTES.URL_PATH,
+								) || []),
 								{
 									id: '92b8a1c1',
 									key: {
@@ -65,7 +70,6 @@ function TopErrors({
 									op: '=',
 									value: endPointName,
 								},
-								...(initialFilters?.items || []),
 						  ]
 						: [...(initialFilters?.items || [])],
 					op: 'AND',
@@ -82,37 +86,34 @@ function TopErrors({
 		],
 	);
 
-	const topErrorsDataQueries = useQueries(
-		queryPayloads.map((payload) => ({
-			queryKey: [
-				REACT_QUERY_KEY.GET_TOP_ERRORS_BY_DOMAIN,
-				payload,
-				DEFAULT_ENTITY_VERSION,
-				showStatusCodeErrors,
-			],
-			queryFn: (): Promise<SuccessResponse<MetricRangePayloadProps>> =>
-				GetMetricQueryRange(payload, DEFAULT_ENTITY_VERSION),
-			enabled: !!payload,
-			staleTime: 0,
-			cacheTime: 0,
-		})),
-	);
-
-	const topErrorsDataQuery = topErrorsDataQueries[0];
 	const {
 		data: topErrorsData,
 		isLoading,
 		isRefetching,
 		isError,
 		refetch,
-	} = topErrorsDataQuery;
+	} = useQuery({
+		queryKey: [
+			REACT_QUERY_KEY.GET_TOP_ERRORS_BY_DOMAIN,
+			queryPayload,
+			ENTITY_VERSION_V5,
+			showStatusCodeErrors,
+		],
+		queryFn: ({
+			signal,
+		}: QueryFunctionContext): Promise<SuccessResponseV2<MetricRangePayloadV5>> =>
+			getQueryRangeV5(queryPayload, ENTITY_VERSION_V5, signal),
+		enabled: !!queryPayload,
+		staleTime: 0,
+		cacheTime: 0,
+	});
 
 	const topErrorsColumnsConfig = useMemo(() => getTopErrorsColumnsConfig(), []);
 
 	const formattedTopErrorsData = useMemo(
 		() =>
 			formatTopErrorsDataForTable(
-				topErrorsData?.payload?.data?.result as TopErrorsResponseRow[],
+				topErrorsData?.data?.data?.data?.results[0] as ScalarData,
 			),
 		[topErrorsData],
 	);
@@ -130,12 +131,12 @@ function TopErrors({
 	const endPointDropDownDataQueries = useQueries(
 		endPointDropDownQueryPayload.map((payload) => ({
 			queryKey: [
-				END_POINT_DETAILS_QUERY_KEYS_ARRAY[4],
+				END_POINT_DETAILS_QUERY_KEYS_ARRAY[2],
 				payload,
-				ENTITY_VERSION_V4,
+				ENTITY_VERSION_V5,
 			],
 			queryFn: (): Promise<SuccessResponse<MetricRangePayloadProps>> =>
-				GetMetricQueryRange(payload, ENTITY_VERSION_V4),
+				GetMetricQueryRange(payload, ENTITY_VERSION_V5),
 			enabled: !!payload,
 			staleTime: 60 * 1000,
 		})),

frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/components/DomainMetrics.test.tsx

@@ -0,0 +1,337 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable react/jsx-props-no-spreading */
+/* eslint-disable prefer-destructuring */
+/* eslint-disable sonarjs/no-duplicate-string */
+import { render, screen, waitFor } from '@testing-library/react';
+import { TraceAggregation } from 'api/v5/v5';
+import { ENTITY_VERSION_V5 } from 'constants/app';
+import { GetMetricQueryRange } from 'lib/dashboard/getQueryResults';
+import { QueryClient, QueryClientProvider } from 'react-query';
+import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
+
+import DomainMetrics from './DomainMetrics';
+
+// Mock the API call
+jest.mock('lib/dashboard/getQueryResults', () => ({
+	GetMetricQueryRange: jest.fn(),
+}));
+
+// Mock ErrorState component
+jest.mock('./ErrorState', () => ({
+	__esModule: true,
+	default: jest.fn(({ refetch }) => (
+		<div data-testid="error-state">
+			<button type="button" onClick={refetch} data-testid="retry-button">
+				Retry
+			</button>
+		</div>
+	)),
+}));
+
+describe('DomainMetrics - V5 Query Payload Tests', () => {
+	let queryClient: QueryClient;
+
+	const mockProps = {
+		domainName: '0.0.0.0',
+		timeRange: {
+			startTime: 1758259531000,
+			endTime: 1758261331000,
+		},
+		domainListFilters: {
+			items: [],
+			op: 'AND' as const,
+		} as IBuilderQuery['filters'],
+	};
+
+	const mockSuccessResponse = {
+		statusCode: 200,
+		error: null,
+		payload: {
+			data: {
+				result: [
+					{
+						table: {
+							rows: [
+								{
+									data: {
+										A: '150',
+										B: '125000000',
+										D: '2021-01-01T23:00:00Z',
+										F1: '5.5',
+									},
+								},
+							],
+						},
+					},
+				],
+			},
+		},
+	};
+
+	beforeEach(() => {
+		queryClient = new QueryClient({
+			defaultOptions: {
+				queries: {
+					retry: false,
+					cacheTime: 0,
+				},
+			},
+		});
+		jest.clearAllMocks();
+	});
+
+	afterEach(() => {
+		queryClient.clear();
+	});
+
+	const renderComponent = (props = mockProps): ReturnType<typeof render> =>
+		render(
+			<QueryClientProvider client={queryClient}>
+				<DomainMetrics {...props} />
+			</QueryClientProvider>,
+		);
+
+	describe('1. V5 Query Payload with Filters', () => {
+		it('sends correct V5 payload structure with domain name filters', async () => {
+			(GetMetricQueryRange as jest.Mock).mockResolvedValue(mockSuccessResponse);
+
+			renderComponent();
+
+			await waitFor(() => {
+				expect(GetMetricQueryRange).toHaveBeenCalledTimes(1);
+			});
+
+			const [payload, version] = (GetMetricQueryRange as jest.Mock).mock.calls[0];
+
+			// Verify it's using V5
+			expect(version).toBe(ENTITY_VERSION_V5);
+
+			// Verify time range
+			expect(payload.start).toBe(1758259531000);
+			expect(payload.end).toBe(1758261331000);
+
+			// Verify V3 payload structure (getDomainMetricsQueryPayload returns V3 format)
+			expect(payload.query).toBeDefined();
+			expect(payload.query.builder).toBeDefined();
+			expect(payload.query.builder.queryData).toBeDefined();
+
+			const queryData = payload.query.builder.queryData;
+
+			// Verify Query A - count with URL filter
+			const queryA = queryData.find((q: any) => q.queryName === 'A');
+			expect(queryA).toBeDefined();
+			expect(queryA.dataSource).toBe('traces');
+			expect(queryA.aggregations?.[0]).toBeDefined();
+			expect((queryA.aggregations?.[0] as TraceAggregation)?.expression).toBe(
+				'count()',
+			);
+			// Verify exact domain filter expression structure
+			expect(queryA.filter.expression).toContain(
+				"(net.peer.name = '0.0.0.0' OR server.address = '0.0.0.0')",
+			);
+			expect(queryA.filter.expression).toContain(
+				'url.full EXISTS OR http.url EXISTS',
+			);
+
+			// Verify Query B - p99 latency
+			const queryB = queryData.find((q: any) => q.queryName === 'B');
+			expect(queryB).toBeDefined();
+			expect(queryB.aggregateOperator).toBe('p99');
+			expect(queryB.aggregations?.[0]).toBeDefined();
+			expect((queryB.aggregations?.[0] as TraceAggregation)?.expression).toBe(
+				'p99(duration_nano)',
+			);
+			// Verify exact domain filter expression structure
+			expect(queryB.filter.expression).toContain(
+				"(net.peer.name = '0.0.0.0' OR server.address = '0.0.0.0')",
+			);
+
+			// Verify Query C - error count (disabled)
+			const queryC = queryData.find((q: any) => q.queryName === 'C');
+			expect(queryC).toBeDefined();
+			expect(queryC.disabled).toBe(true);
+			expect(queryC.filter.expression).toContain(
+				"(net.peer.name = '0.0.0.0' OR server.address = '0.0.0.0')",
+			);
+			expect(queryC.aggregations?.[0]).toBeDefined();
+			expect((queryC.aggregations?.[0] as TraceAggregation)?.expression).toBe(
+				'count()',
+			);
+
+			expect(queryC.filter.expression).toContain('has_error = true');
+
+			// Verify Query D - max timestamp
+			const queryD = queryData.find((q: any) => q.queryName === 'D');
+			expect(queryD).toBeDefined();
+			expect(queryD.aggregateOperator).toBe('max');
+			expect(queryD.aggregations?.[0]).toBeDefined();
+			expect((queryD.aggregations?.[0] as TraceAggregation)?.expression).toBe(
+				'max(timestamp)',
+			);
+			// Verify exact domain filter expression structure
+			expect(queryD.filter.expression).toContain(
+				"(net.peer.name = '0.0.0.0' OR server.address = '0.0.0.0')",
+			);
+
+			// Verify Formula F1 - error rate calculation
+			const formulas = payload.query.builder.queryFormulas;
+			expect(formulas).toBeDefined();
+			expect(formulas.length).toBeGreaterThan(0);
+			const formulaF1 = formulas.find((f: any) => f.queryName === 'F1');
+			expect(formulaF1).toBeDefined();
+			expect(formulaF1.expression).toBe('(C/A)*100');
+		});
+
+		it('includes custom filters in filter expressions', async () => {
+			(GetMetricQueryRange as jest.Mock).mockResolvedValue(mockSuccessResponse);
+
+			const customFilters: IBuilderQuery['filters'] = {
+				items: [
+					{
+						id: 'test-1',
+						key: {
+							key: 'service.name',
+							dataType: 'string' as any,
+							type: 'resource',
+						},
+						op: '=',
+						value: 'my-service',
+					},
+					{
+						id: 'test-2',
+						key: {
+							key: 'deployment.environment',
+							dataType: 'string' as any,
+							type: 'resource',
+						},
+						op: '=',
+						value: 'production',
+					},
+				],
+				op: 'AND' as const,
+			};
+
+			renderComponent({
+				...mockProps,
+				domainListFilters: customFilters,
+			});
+
+			await waitFor(() => {
+				expect(GetMetricQueryRange).toHaveBeenCalled();
+			});
+
+			const [payload] = (GetMetricQueryRange as jest.Mock).mock.calls[0];
+			const queryData = payload.query.builder.queryData;
+
+			// Verify all queries include the custom filters
+			queryData.forEach((query: any) => {
+				if (query.filter && query.filter.expression) {
+					expect(query.filter.expression).toContain('service.name');
+					expect(query.filter.expression).toContain('my-service');
+					expect(query.filter.expression).toContain('deployment.environment');
+					expect(query.filter.expression).toContain('production');
+				}
+			});
+		});
+	});
+
+	describe('2. Data Display State', () => {
+		it('displays metrics when data is successfully loaded', async () => {
+			(GetMetricQueryRange as jest.Mock).mockResolvedValue(mockSuccessResponse);
+
+			renderComponent();
+
+			// Wait for skeletons to disappear
+			await waitFor(() => {
+				const skeletons = document.querySelectorAll('.ant-skeleton-button');
+				expect(skeletons.length).toBe(0);
+			});
+
+			// Verify all metric labels are displayed
+			expect(screen.getByText('EXTERNAL API')).toBeInTheDocument();
+			expect(screen.getByText('AVERAGE LATENCY')).toBeInTheDocument();
+			expect(screen.getByText('ERROR %')).toBeInTheDocument();
+			expect(screen.getByText('LAST USED')).toBeInTheDocument();
+
+			// Verify metric values are displayed
+			expect(screen.getByText('150')).toBeInTheDocument();
+			expect(screen.getByText('0.125s')).toBeInTheDocument();
+		});
+	});
+
+	describe('3. Empty/Missing Data State', () => {
+		it('displays "-" for missing data values', async () => {
+			const emptyResponse = {
+				statusCode: 200,
+				error: null,
+				payload: {
+					data: {
+						result: [
+							{
+								table: {
+									rows: [],
+								},
+							},
+						],
+					},
+				},
+			};
+
+			(GetMetricQueryRange as jest.Mock).mockResolvedValue(emptyResponse);
+
+			renderComponent();
+
+			await waitFor(() => {
+				const skeletons = document.querySelectorAll('.ant-skeleton-button');
+				expect(skeletons.length).toBe(0);
+			});
+
+			// When no data, all values should show "-"
+			const dashValues = screen.getAllByText('-');
+			expect(dashValues.length).toBeGreaterThan(0);
+		});
+	});
+
+	describe('4. Error State', () => {
+		it('displays error state when API call fails', async () => {
+			(GetMetricQueryRange as jest.Mock).mockRejectedValue(new Error('API Error'));
+
+			renderComponent();
+
+			await waitFor(() => {
+				expect(screen.getByTestId('error-state')).toBeInTheDocument();
+			});
+
+			expect(screen.getByTestId('retry-button')).toBeInTheDocument();
+		});
+
+		it('retries API call when retry button is clicked', async () => {
+			let callCount = 0;
+			(GetMetricQueryRange as jest.Mock).mockImplementation(() => {
+				callCount += 1;
+				if (callCount === 1) {
+					return Promise.reject(new Error('API Error'));
+				}
+				return Promise.resolve(mockSuccessResponse);
+			});
+
+			renderComponent();
+
+			// Wait for error state
+			await waitFor(() => {
+				expect(screen.getByTestId('error-state')).toBeInTheDocument();
+			});
+
+			// Click retry
+			const retryButton = screen.getByTestId('retry-button');
+			retryButton.click();
+
+			// Wait for successful load
+			await waitFor(() => {
+				expect(screen.getByText('150')).toBeInTheDocument();
+			});
+
+			expect(callCount).toBe(2);
+		});
+	});
+});

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

@@ -1,6 +1,6 @@
 import { Color } from '@signozhq/design-tokens';
 import { Progress, Skeleton, Tooltip, Typography } from 'antd';
-import { ENTITY_VERSION_V4 } from 'constants/app';
+import { ENTITY_VERSION_V5 } from 'constants/app';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import {
 	DomainMetricsResponseRow,
@@ -44,10 +44,10 @@ function DomainMetrics({
 			queryKey: [
 				REACT_QUERY_KEY.GET_DOMAIN_METRICS_DATA,
 				payload,
-				ENTITY_VERSION_V4,
+				ENTITY_VERSION_V5,
 			],
 			queryFn: (): Promise<SuccessResponse<MetricRangePayloadProps>> =>
-				GetMetricQueryRange(payload, ENTITY_VERSION_V4),
+				GetMetricQueryRange(payload, ENTITY_VERSION_V5),
 			enabled: !!payload,
 			staleTime: 60 * 1000, // 1 minute stale time : optimize this part
 		})),
@@ -132,7 +132,9 @@ function DomainMetrics({
 						) : (
 							<Tooltip title={formattedDomainMetricsData.latency}>
 								<span className="round-metric-tag">
-									{(Number(formattedDomainMetricsData.latency) / 1000).toFixed(3)}s
+									{formattedDomainMetricsData.latency !== '-'
+										? `${(Number(formattedDomainMetricsData.latency) / 1000).toFixed(3)}s`
+										: '-'}
 								</span>
 							</Tooltip>
 						)}
@@ -143,23 +145,27 @@ function DomainMetrics({
 							<Skeleton.Button active size="small" />
 						) : (
 							<Tooltip title={formattedDomainMetricsData.errorRate}>
-								<Progress
-									status="active"
-									percent={Number(
-										Number(formattedDomainMetricsData.errorRate).toFixed(2),
-									)}
-									strokeLinecap="butt"
-									size="small"
-									strokeColor={((): string => {
-										const errorRatePercent = Number(
+								{formattedDomainMetricsData.errorRate !== '-' ? (
+									<Progress
+										status="active"
+										percent={Number(
 											Number(formattedDomainMetricsData.errorRate).toFixed(2),
-										);
-										if (errorRatePercent >= 90) return Color.BG_SAKURA_500;
-										if (errorRatePercent >= 60) return Color.BG_AMBER_500;
-										return Color.BG_FOREST_500;
-									})()}
-									className="progress-bar"
-								/>
+										)}
+										strokeLinecap="butt"
+										size="small"
+										strokeColor={((): string => {
+											const errorRatePercent = Number(
+												Number(formattedDomainMetricsData.errorRate).toFixed(2),
+											);
+											if (errorRatePercent >= 90) return Color.BG_SAKURA_500;
+											if (errorRatePercent >= 60) return Color.BG_AMBER_500;
+											return Color.BG_FOREST_500;
+										})()}
+										className="progress-bar"
+									/>
+								) : (
+									'-'
+								)}
 							</Tooltip>
 						)}
 					</Typography.Text>

frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/components/EndPointMetrics.test.tsx

@@ -0,0 +1,419 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable react/jsx-props-no-spreading */
+/* eslint-disable prefer-destructuring */
+/* eslint-disable sonarjs/no-duplicate-string */
+import { render, screen, waitFor } from '@testing-library/react';
+import { getEndPointDetailsQueryPayload } from 'container/ApiMonitoring/utils';
+import { GetMetricQueryRange } from 'lib/dashboard/getQueryResults';
+import { QueryClient, QueryClientProvider, UseQueryResult } from 'react-query';
+import { SuccessResponse } from 'types/api';
+
+import EndPointMetrics from './EndPointMetrics';
+
+// Mock the API call
+jest.mock('lib/dashboard/getQueryResults', () => ({
+	GetMetricQueryRange: jest.fn(),
+}));
+
+// Mock ErrorState component
+jest.mock('./ErrorState', () => ({
+	__esModule: true,
+	default: jest.fn(({ refetch }) => (
+		<div data-testid="error-state">
+			<button type="button" onClick={refetch} data-testid="retry-button">
+				Retry
+			</button>
+		</div>
+	)),
+}));
+
+describe('EndPointMetrics - V5 Query Payload Tests', () => {
+	let queryClient: QueryClient;
+
+	const mockSuccessResponse = {
+		statusCode: 200,
+		error: null,
+		payload: {
+			data: {
+				result: [
+					{
+						table: {
+							rows: [
+								{
+									data: {
+										A: '85.5',
+										B: '245000000',
+										D: '2021-01-01T22:30:00Z',
+										F1: '3.2',
+									},
+								},
+							],
+						},
+					},
+				],
+			},
+		},
+	};
+
+	beforeEach(() => {
+		queryClient = new QueryClient({
+			defaultOptions: {
+				queries: {
+					retry: false,
+					cacheTime: 0,
+				},
+			},
+		});
+		jest.clearAllMocks();
+	});
+
+	afterEach(() => {
+		queryClient.clear();
+	});
+
+	// Helper to create mock query result
+	const createMockQueryResult = (
+		response: any,
+		overrides?: Partial<UseQueryResult<SuccessResponse<any>, unknown>>,
+	): UseQueryResult<SuccessResponse<any>, unknown> =>
+		({
+			data: response,
+			error: null,
+			isError: false,
+			isIdle: false,
+			isLoading: false,
+			isLoadingError: false,
+			isRefetchError: false,
+			isRefetching: false,
+			isStale: true,
+			isSuccess: true,
+			status: 'success' as const,
+			dataUpdatedAt: Date.now(),
+			errorUpdateCount: 0,
+			errorUpdatedAt: 0,
+			failureCount: 0,
+			isFetched: true,
+			isFetchedAfterMount: true,
+			isFetching: false,
+			isPlaceholderData: false,
+			isPreviousData: false,
+			refetch: jest.fn(),
+			remove: jest.fn(),
+			...overrides,
+		} as UseQueryResult<SuccessResponse<any>, unknown>);
+
+	const renderComponent = (
+		endPointMetricsDataQuery: UseQueryResult<SuccessResponse<any>, unknown>,
+	): ReturnType<typeof render> =>
+		render(
+			<QueryClientProvider client={queryClient}>
+				<EndPointMetrics endPointMetricsDataQuery={endPointMetricsDataQuery} />
+			</QueryClientProvider>,
+		);
+
+	// eslint-disable-next-line sonarjs/cognitive-complexity
+	describe('1. V5 Query Payload with Filters', () => {
+		// eslint-disable-next-line sonarjs/cognitive-complexity
+		it('sends correct V5 payload structure with domain and endpoint filters', async () => {
+			(GetMetricQueryRange as jest.Mock).mockResolvedValue(mockSuccessResponse);
+
+			const domainName = 'api.example.com';
+			const startTime = 1758259531000;
+			const endTime = 1758261331000;
+			const filters = {
+				items: [],
+				op: 'AND' as const,
+			};
+
+			// Get the actual payload that would be generated
+			const payloads = getEndPointDetailsQueryPayload(
+				domainName,
+				startTime,
+				endTime,
+				filters,
+			);
+
+			// First payload is for endpoint metrics
+			const metricsPayload = payloads[0];
+
+			// Verify it's using the correct structure (V3 format for V5 API)
+			expect(metricsPayload.query).toBeDefined();
+			expect(metricsPayload.query.builder).toBeDefined();
+			expect(metricsPayload.query.builder.queryData).toBeDefined();
+
+			const queryData = metricsPayload.query.builder.queryData;
+
+			// Verify Query A - rate with domain and client kind filters
+			const queryA = queryData.find((q: any) => q.queryName === 'A');
+			expect(queryA).toBeDefined();
+			if (queryA) {
+				expect(queryA.dataSource).toBe('traces');
+				expect(queryA.aggregateOperator).toBe('rate');
+				expect(queryA.timeAggregation).toBe('rate');
+				// Verify exact domain filter expression structure
+				if (queryA.filter) {
+					expect(queryA.filter.expression).toContain(
+						"(net.peer.name = 'api.example.com' OR server.address = 'api.example.com')",
+					);
+					expect(queryA.filter.expression).toContain("kind_string = 'Client'");
+				}
+			}
+
+			// Verify Query B - p99 latency with duration_nano
+			const queryB = queryData.find((q: any) => q.queryName === 'B');
+			expect(queryB).toBeDefined();
+			if (queryB) {
+				expect(queryB.aggregateOperator).toBe('p99');
+				if (queryB.aggregateAttribute) {
+					expect(queryB.aggregateAttribute.key).toBe('duration_nano');
+				}
+				expect(queryB.timeAggregation).toBe('p99');
+				// Verify exact domain filter expression structure
+				if (queryB.filter) {
+					expect(queryB.filter.expression).toContain(
+						"(net.peer.name = 'api.example.com' OR server.address = 'api.example.com')",
+					);
+					expect(queryB.filter.expression).toContain("kind_string = 'Client'");
+				}
+			}
+
+			// Verify Query C - error count (disabled)
+			const queryC = queryData.find((q: any) => q.queryName === 'C');
+			expect(queryC).toBeDefined();
+			if (queryC) {
+				expect(queryC.disabled).toBe(true);
+				expect(queryC.aggregateOperator).toBe('count');
+				if (queryC.filter) {
+					expect(queryC.filter.expression).toContain(
+						"(net.peer.name = 'api.example.com' OR server.address = 'api.example.com')",
+					);
+					expect(queryC.filter.expression).toContain("kind_string = 'Client'");
+					expect(queryC.filter.expression).toContain('has_error = true');
+				}
+			}
+
+			// Verify Query D - max timestamp for last used
+			const queryD = queryData.find((q: any) => q.queryName === 'D');
+			expect(queryD).toBeDefined();
+			if (queryD) {
+				expect(queryD.aggregateOperator).toBe('max');
+				if (queryD.aggregateAttribute) {
+					expect(queryD.aggregateAttribute.key).toBe('timestamp');
+				}
+				expect(queryD.timeAggregation).toBe('max');
+				// Verify exact domain filter expression structure
+				if (queryD.filter) {
+					expect(queryD.filter.expression).toContain(
+						"(net.peer.name = 'api.example.com' OR server.address = 'api.example.com')",
+					);
+					expect(queryD.filter.expression).toContain("kind_string = 'Client'");
+				}
+			}
+
+			// Verify Query E - total count (disabled)
+			const queryE = queryData.find((q: any) => q.queryName === 'E');
+			expect(queryE).toBeDefined();
+			if (queryE) {
+				expect(queryE.disabled).toBe(true);
+				expect(queryE.aggregateOperator).toBe('count');
+				if (queryE.aggregateAttribute) {
+					expect(queryE.aggregateAttribute.key).toBe('span_id');
+				}
+				if (queryE.filter) {
+					expect(queryE.filter.expression).toContain(
+						"(net.peer.name = 'api.example.com' OR server.address = 'api.example.com')",
+					);
+					expect(queryE.filter.expression).toContain("kind_string = 'Client'");
+				}
+			}
+
+			// Verify Formula F1 - error rate calculation
+			const formulas = metricsPayload.query.builder.queryFormulas;
+			expect(formulas).toBeDefined();
+			expect(formulas.length).toBeGreaterThan(0);
+			const formulaF1 = formulas.find((f: any) => f.queryName === 'F1');
+			expect(formulaF1).toBeDefined();
+			if (formulaF1) {
+				expect(formulaF1.expression).toBe('(C/E)*100');
+				expect(formulaF1.disabled).toBe(false);
+				expect(formulaF1.legend).toBe('error percentage');
+			}
+		});
+
+		it('includes custom domainListFilters in all query expressions', async () => {
+			(GetMetricQueryRange as jest.Mock).mockResolvedValue(mockSuccessResponse);
+
+			const customFilters = {
+				items: [
+					{
+						id: 'test-1',
+						key: {
+							key: 'service.name',
+							dataType: 'string' as any,
+							type: 'resource',
+						},
+						op: '=',
+						value: 'payment-service',
+					},
+					{
+						id: 'test-2',
+						key: {
+							key: 'deployment.environment',
+							dataType: 'string' as any,
+							type: 'resource',
+						},
+						op: '=',
+						value: 'staging',
+					},
+				],
+				op: 'AND' as const,
+			};
+
+			const payloads = getEndPointDetailsQueryPayload(
+				'api.internal.com',
+				1758259531000,
+				1758261331000,
+				customFilters,
+			);
+
+			const queryData = payloads[0].query.builder.queryData;
+
+			// Verify ALL queries (A, B, C, D, E) include the custom filters
+			const allQueryNames = ['A', 'B', 'C', 'D', 'E'];
+			allQueryNames.forEach((queryName) => {
+				const query = queryData.find((q: any) => q.queryName === queryName);
+				expect(query).toBeDefined();
+				if (query && query.filter && query.filter.expression) {
+					// Check for exact filter inclusion
+					expect(query.filter.expression).toContain('service.name');
+					expect(query.filter.expression).toContain('payment-service');
+					expect(query.filter.expression).toContain('deployment.environment');
+					expect(query.filter.expression).toContain('staging');
+					// Also verify domain filter is still present
+					expect(query.filter.expression).toContain(
+						"(net.peer.name = 'api.internal.com' OR server.address = 'api.internal.com')",
+					);
+					// Verify client kind filter is present
+					expect(query.filter.expression).toContain("kind_string = 'Client'");
+				}
+			});
+		});
+	});
+
+	describe('2. Data Display State', () => {
+		it('displays metrics when data is successfully loaded', async () => {
+			const mockQuery = createMockQueryResult(mockSuccessResponse);
+
+			renderComponent(mockQuery);
+
+			// Wait for skeletons to disappear
+			await waitFor(() => {
+				const skeletons = document.querySelectorAll('.ant-skeleton-button');
+				expect(skeletons.length).toBe(0);
+			});
+
+			// Verify all metric labels are displayed
+			expect(screen.getByText('Rate')).toBeInTheDocument();
+			expect(screen.getByText('AVERAGE LATENCY')).toBeInTheDocument();
+			expect(screen.getByText('ERROR %')).toBeInTheDocument();
+			expect(screen.getByText('LAST USED')).toBeInTheDocument();
+
+			// Verify metric values are displayed
+			expect(screen.getByText('85.5 ops/sec')).toBeInTheDocument();
+			expect(screen.getByText('245ms')).toBeInTheDocument();
+		});
+	});
+
+	describe('3. Empty/Missing Data State', () => {
+		it("displays '-' for missing data values", async () => {
+			const emptyResponse = {
+				statusCode: 200,
+				error: null,
+				payload: {
+					data: {
+						result: [
+							{
+								table: {
+									rows: [],
+								},
+							},
+						],
+					},
+				},
+			};
+
+			const mockQuery = createMockQueryResult(emptyResponse);
+
+			renderComponent(mockQuery);
+
+			await waitFor(() => {
+				const skeletons = document.querySelectorAll('.ant-skeleton-button');
+				expect(skeletons.length).toBe(0);
+			});
+
+			// When no data, all values should show "-"
+			const dashValues = screen.getAllByText('-');
+			// Should have at least 2 dashes (rate and last used - latency shows "-", error % shows progress bar)
+			expect(dashValues.length).toBeGreaterThanOrEqual(2);
+		});
+	});
+
+	describe('4. Error State', () => {
+		it('displays error state when API call fails', async () => {
+			const mockQuery = createMockQueryResult(null, {
+				isError: true,
+				isSuccess: false,
+				status: 'error',
+				error: new Error('API Error'),
+			});
+
+			renderComponent(mockQuery);
+
+			await waitFor(() => {
+				expect(screen.getByTestId('error-state')).toBeInTheDocument();
+			});
+
+			expect(screen.getByTestId('retry-button')).toBeInTheDocument();
+		});
+
+		it('retries API call when retry button is clicked', async () => {
+			const refetch = jest.fn().mockResolvedValue(mockSuccessResponse);
+
+			// Start with error state
+			const mockQuery = createMockQueryResult(null, {
+				isError: true,
+				isSuccess: false,
+				status: 'error',
+				error: new Error('API Error'),
+				refetch,
+			});
+
+			const { rerender } = renderComponent(mockQuery);
+
+			// Wait for error state
+			await waitFor(() => {
+				expect(screen.getByTestId('error-state')).toBeInTheDocument();
+			});
+
+			// Click retry
+			const retryButton = screen.getByTestId('retry-button');
+			retryButton.click();
+
+			// Verify refetch was called
+			expect(refetch).toHaveBeenCalledTimes(1);
+
+			// Simulate successful refetch by rerendering with success state
+			const successQuery = createMockQueryResult(mockSuccessResponse);
+			rerender(
+				<QueryClientProvider client={queryClient}>
+					<EndPointMetrics endPointMetricsDataQuery={successQuery} />
+				</QueryClientProvider>,
+			);
+
+			// Wait for successful load
+			await waitFor(() => {
+				expect(screen.getByText('85.5 ops/sec')).toBeInTheDocument();
+			});
+		});
+	});
+});

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

@@ -1,12 +1,16 @@
 import { Color } from '@signozhq/design-tokens';
 import { Progress, Skeleton, Tooltip, Typography } from 'antd';
-import { getFormattedEndPointMetricsData } from 'container/ApiMonitoring/utils';
+import {
+	getDisplayValue,
+	getFormattedEndPointMetricsData,
+} from 'container/ApiMonitoring/utils';
 import { useMemo } from 'react';
 import { UseQueryResult } from 'react-query';
 import { SuccessResponse } from 'types/api';
 
 import ErrorState from './ErrorState';
 
+// eslint-disable-next-line sonarjs/cognitive-complexity
 function EndPointMetrics({
 	endPointMetricsDataQuery,
 }: {
@@ -70,7 +74,9 @@ function EndPointMetrics({
 							<Skeleton.Button active size="small" />
 						) : (
 							<Tooltip title={metricsData?.rate}>
-								<span className="round-metric-tag">{metricsData?.rate} ops/sec</span>
+								<span className="round-metric-tag">
+									{metricsData?.rate !== '-' ? `${metricsData?.rate} ops/sec` : '-'}
+								</span>
 							</Tooltip>
 						)}
 					</Typography.Text>
@@ -79,7 +85,7 @@ function EndPointMetrics({
 							<Skeleton.Button active size="small" />
 						) : (
 							<Tooltip title={metricsData?.latency}>
-								<span className="round-metric-tag">{metricsData?.latency}ms</span>
+								{metricsData?.latency !== '-' ? `${metricsData?.latency}ms` : '-'}
 							</Tooltip>
 						)}
 					</Typography.Text>
@@ -88,21 +94,25 @@ function EndPointMetrics({
 							<Skeleton.Button active size="small" />
 						) : (
 							<Tooltip title={metricsData?.errorRate}>
-								<Progress
-									status="active"
-									percent={Number(Number(metricsData?.errorRate ?? 0).toFixed(2))}
-									strokeLinecap="butt"
-									size="small"
-									strokeColor={((): string => {
-										const errorRatePercent = Number(
-											Number(metricsData?.errorRate ?? 0).toFixed(2),
-										);
-										if (errorRatePercent >= 90) return Color.BG_SAKURA_500;
-										if (errorRatePercent >= 60) return Color.BG_AMBER_500;
-										return Color.BG_FOREST_500;
-									})()}
-									className="progress-bar"
-								/>
+								{metricsData?.errorRate !== '-' ? (
+									<Progress
+										status="active"
+										percent={Number(Number(metricsData?.errorRate ?? 0).toFixed(2))}
+										strokeLinecap="butt"
+										size="small"
+										strokeColor={((): string => {
+											const errorRatePercent = Number(
+												Number(metricsData?.errorRate ?? 0).toFixed(2),
+											);
+											if (errorRatePercent >= 90) return Color.BG_SAKURA_500;
+											if (errorRatePercent >= 60) return Color.BG_AMBER_500;
+											return Color.BG_FOREST_500;
+										})()}
+										className="progress-bar"
+									/>
+								) : (
+									'-'
+								)}
 							</Tooltip>
 						)}
 					</Typography.Text>
@@ -110,7 +120,9 @@ function EndPointMetrics({
 						{isLoading || isRefetching ? (
 							<Skeleton.Button active size="small" />
 						) : (
-							<Tooltip title={metricsData?.lastUsed}>{metricsData?.lastUsed}</Tooltip>
+							<Tooltip title={metricsData?.lastUsed}>
+								{getDisplayValue(metricsData?.lastUsed)}
+							</Tooltip>
 						)}
 					</Typography.Text>
 				</div>

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

@@ -1,4 +1,5 @@
 import { Card } from 'antd';
+import { ENTITY_VERSION_V5 } from 'constants/app';
 import GridCard from 'container/GridCardLayout/GridCard';
 import { Widgets } from 'types/api/dashboard/getAll';
 
@@ -22,6 +23,7 @@ function MetricOverTimeGraph({
 						customOnDragSelect={(): void => {}}
 						customTimeRange={timeRange}
 						customTimeRangeWindowForCoRelation="5m"
+						version={ENTITY_VERSION_V5}
 					/>
 				</div>
 			</Card>